@charset 'UTF-8';
/*===========================================
hayawakari.css INDEX
===========================================*/

#hyMenu{background-color:#45b6f2; position:relative;}
#hyMenu h1{position:absolute; left:50px; top:65px; color:#fff; font-size:44px; font-weight:bold; line-height:1.3; margin:0; padding:0; border:none;}
#hyMenu p{position:absolute; left:50px; top:183px; color:#fff; font-family:Helvetica, Arial, sans-serif;}
#hyMenu ul{padding:52px 0 52px 40px; overflow:hidden;}
#hyMenu ul li{float:left; margin:10px 0 0 10px; width: 188px; height: 170px;}
#hyMenu ul li:first-child{margin-left:405px;}
#hyMenu ul li#btn2{margin-top:-19px; width: 214px; z-index: 30; position: relative;}
#hyMenu ul li#btn3{margin-left:-17px;}
#hyMenu ul li#btn4{margin-top:0px;}
#hyMenu ul li#btn6{margin-top:-15px; width: 211px; z-index: 30; position: relative;}
#hyMenu ul li#btn13{margin-left:-15px;}

#hyMenu ul li .pcHide{display:none;}

@media screen and (max-width:767px){
  #hyMenu{margin:10px -10px 0; width: auto}
  #hyMenu h1,
  #hyMenu p{position:relative; left:inherit; top:inherit;}
  #hyMenu h1{padding:20px 20px 5px; font-size:30px;}
  #hyMenu p{padding:0 20px 10px; font-size:12px;}
  #hyMenu ul{padding:0 20px 20px;}
  #hyMenu ul li{margin:15px 0 0 0; width:48%; height: auto;}
  #hyMenu ul li:first-child{margin:15px 0 0 0;}
  #hyMenu ul li:nth-child(even){float:right;}
  #hyMenu ul li#btn2,
  #hyMenu ul li#btn3,
  #hyMenu ul li#btn4,
  #hyMenu ul li#btn6,
  #hyMenu ul li#btn13{margin:15px 0 0 0; width: 48%; height: auto;}
  #hyMenu ul li#btn10{padding-bottom: 0; }
  #hyMenu ul li .pcHide{display:block;}
  #hyMenu ul li .on{display:none;}
}

.hyBox {
  position: relative;
  background-color: #f4efed;
  padding: 20px;
  width: 960px;
  height: 600px;
  overflow-y: scroll;
}
.hyBox h2{margin-bottom:10px; color:#00a0e9; font-size:34px; font-weight:bold;}
.hyBox h2.small{font-size: 26px !important;}
.hyBox h3{color:#00a0e9; font-size:20px; font-weight:bold;}
.hyBox .text{margin:30px 0 10px;}
.hyBox .colorH2{color:#00a0e9;}
.hyBox .spHide{width:65%;}
.hyBox .pcHide{display:none;}

.modalWin > div{display:none;}
.hyBox.modalInner{width:960px; padding:20px;}
.hyBox.modalInner p > img.spHide {margin: 0 auto}
#boxer.inline{padding:6px!important; background-color:#45b6f2; box-shadow: 0 0 20px rgba(0, 0, 0, .4);}
#spOverlay{display:none;}

/* box2
---------------------*/
#adjustBox2{height:440px; margin:0 auto;}
#adjustBox2 h3{position:absolute; z-index:102;}
#adjustBox2 h3.head1{left:110px; top:125px;}
#adjustBox2 h3.head2{left:534px; top:125px;}
#adjustBox2 h3.head3{/*left:110px;*/ top:344px;left:0;width: 100%; text-align: center;}
#adjustBox2 h3.head4{left:564px; top:344px;}
#adjustBox2 p[class^="img"]{position:absolute;}
#adjustBox2 .img1{left:94px; top:70px;}
#adjustBox2 .img2{left:530px; top:117px;}
#adjustBox2 .img3{left:180px; top:379px;}
#adjustBox2 .img4{left:591px; top:385px;}
#adjustBox2 hr{display:none;}

@media screen and (max-width:767px){
  .hyBox{padding:15px; height:auto;}
  .hyBox h2{font-size:18px; margin:0;}
  .hyBox h2.small{font-size:18px !important;}
  .hyBox .text{margin:20px 0 0; font-size: 13px}
  .hyBox .pcHide{display:block; margin: 0 auto}
  .hyBox .spHide{display:none;}

  .modalInner{width:100%!important; padding:0!important; box-sizing:border-box!important; height: auto !important}
  #boxer.mobile{
    border:#45b6f2 3px solid;
    background-color:#f4efed!important;
    box-sizing:border-box;
    top: 7%!important;
    right: 0;
    bottom: 0;
    left: 0;
    height:93%!important;
    padding:10px 15px 10px 10px!important;
    z-index:110;
  }
  #boxer.mobile .boxer-close{
    background-color:#fff!important;
    background-position:50% 50%!important;
    background-size:19px 19px;
    -moz-background-size:19px 19px;
    -webkit-background-size:19px 19px;
  }
  #boxer.mobile .boxer-container{background:#f4efed!important;height:100%!important;}
  #boxer.mobile .boxer-content{height:auto!important; background:#f4efed!important;}

  #adjustBox2{height:auto; overflow:hidden; padding:10px;}
  #adjustBox2 .inner{height:auto;}
  #adjustBox2 h3{position:relative; left:inherit!important; top:inherit!important; font-size:14px; font-weight:normal; margin-bottom:10px;}
  #adjustBox2 p[class^="img"]{position:relative; left:inherit!important; top:inherit!important; margin:0;}
  #adjustBox2 .innerBox{width:47%; margin-bottom:15px;}
  #adjustBox2 .innerBox:nth-of-type(even){float:right;}
  #adjustBox2 .innerBox:nth-of-type(odd){float:left;}
  #adjustBox2 hr{display:block; clear:both; border:none; height:0; background:#f4efed;}
  .box10txt{font-size:12px;}

  #boxer.mobile .boxer-close{
    top:-8%!important;
    right:-3px!important;
    left: unset !important;
    width:44px!important;
    height:44px!important;
    background:#4cb7ef url(../images/hay_close_sp.png) 50% 50% no-repeat!important;
    background-size:30px 30px!important;
    -moz-background-size:30px 30px!important;
    -webkit-background-size:30px 30px!important;
    border-radius: 0 !important;
  }
  #boxer.mobile .boxer-close::after, #boxer.mobile .boxer-close::before {content: none}

  #spOverlay{display:block; width:100%; height:7%; position:fixed; top:0; left:0; background-color: rgba(255,255,255,0.9);}

  /*#modal-bg{display:none;}*/
}