@charset "utf-8";

/*ヘッダー*/
header {padding:0; margin:0 auto; width:100%;}
header .headerflex{display:flex; justify-content: space-between; align-items:center; padding:0; margin:0;}
header .menu {width:calc(80% - 100px); display: flex; justify-content:space-between; align-items:center; padding:0; margin:0;}
header .menu li {transform:rotateZ(0.03deg);list-style: none; padding:0; padding-top:10px; margin:0; line-height:min(calc((100 / 1500) * 17vw), 17px);  }
header .menu li a {text-decoration: none; position:relative; color:#009967; font-weight: bold; font-size:min(calc((100 / 1500) * 17vw), 17px); line-height:min(calc((100 / 1500) * 17vw), 17px); padding:0; box-sizing:border-box;}
header .menu li a::after {content: ""; display:inline-block; margin:0 auto; height:2px; background:#fff; width:1%;  transition: all 0.2s 0s ease;}
header .menu li a:hover::after {background:#a6d6e6; width:100%; }
header .headerimg{width:calc((100 / 1500) * 250vw); margin-left: 2%;}
header .headerimg img{width:100%; display:block;}
header .otoiawase { width:calc((100 / 1500) * 130vw); height:calc((100 / 1500) * 80vw); background:linear-gradient(to right, #98D2EF,#048688); text-align:center; display:flex; align-items: center; }
header .otoiawase a {width:60%; display:block; margin:0 auto;}
header .otoiawase a img {width:100%; display:block;}
header .otoiawase a::after {opacity:0; }
header .otoiawase a:hover::after {opacity:0;}

/*フッター*/
.link img {height:50px; position:fixed; bottom:20px; right:15px; z-index:12}
footer {width:100%;}
footer .fotterflex {max-width:1300px; width:100%; display: flex; justify-content:space-between; align-items:flex-start; padding:90px 20px 40px 20px; margin:0 auto;}
footer .fotterflex .itemleft {max-width:650px; width:100%; padding-right:20px;}
footer .fotterflex .itemleft .sinryojikan {margin:0;}
footer .fotterflex .itemleft .kyushinbi {margin:30px 0;}
footer .fotterflex .itemleft .tell p {color:#4D4D4D; font-size:13px; padding:5px 15px; font-weight:500; transform:rotateZ(0.03deg);}
footer .fotterflex .map {max-width:550px; width:100%; padding-left:20px;}
footer .fotterflex .map iframe {width:100%; height:320px; border:solid 3px; border-color:#009967;border-radius:0px 15px 0px 15px; }
footer .fotterflex .map p {color:#009967; font-size:1rem; margin:0 4% 0 2%; font-weight:500; transform:rotateZ(0.03deg);}
footer .fotterbottom {background-image:url("../img/common/footer_bg.svg"); background-repeat: no-repeat; background-size:cover; padding:0 0 50px 0; width:100%;}
footer .fotterbottom .inner {max-width:1300px; width:100%; display:flex; justify-content: space-between; align-items:center; padding:0 20px; margin:0 auto;}
footer .fotterbottom .inner .footerimg {width:calc((100 / 1500) * 350vw); margin-top: 12%;}
footer .fotterbottom .inner .footerimg  img {width:100%;}
footer .fotterbottom .inner .teikei {width:calc((100 / 1500) * 288vw); margin-top: 12%;}
footer .fotterbottom .inner .teikei img{width:100%;}
footer .fotterbottom .inner .addres{margin-top:12%; color:#666666; padding:0 10px; font-size:15px; transform:rotateZ(0.03deg);}
footer .copy{color:white; text-align: center; font-size:11px; background-color:#009967;padding:7px 0;transform:rotateZ(0.03deg);}

/*sP版追記共通*/
.hamburger-menu{display: none; cursor:pointer;}
.spmenuimg{display: none;}

@media screen and (max-width:800px){

  /*sp版共通ヘッダー*/
  footer, .goaisatuwhite, .watasitati, .fotterflex {width:100%; margin:0 auto;}
  header{position:fixed;left:0;top:0;z-index: 10; background-color: white;}
  .menu {display:none !important; border:1px solid red;}
  .spmenu {display:flex;}
  .spbutton {width:100%;width:min(calc((100 / 1500) * 120vw), 120px);margin-right: 5%;padding-top: 10%;}
  .spbutton img {width:100%;}
  .headerimg {min-width:150px; padding:0; padding:0; }
  .headerimg img {margin:0; width:100%; display:block;}

  .hamburger-menu{width: 50px;height: 50px;margin-left: auto;display: block; }
  .menu-btn{position: relative;top: 0;right: 0;display: flex;height: 100%;width: 100%;justify-content: center;align-items: center;z-index: 90;background: linear-gradient(to right, #30A4DE,#038587); }
  .menu-btn span,
  .menu-btn span:before,
  .menu-btn span:after{content: '';display: block;height: 1.5px;width: 20px;border-radius: 1.5px;background-color: #ffffff;position: absolute;}
  .menu-btn span:before{bottom: 8px;}
  .menu-btn span:after{top: 8px;}
  #menu-btn-check:checked ~ .menu-btn span{background-color: rgba( 255, 255, 255, 0 ); }
  #menu-btn-check:checked ~ .menu-btn span::before{bottom: 0;transform: rotate( 45deg );}
  #menu-btn-check:checked ~ .menu-btn span::after{top: 0;transform: rotate( -45deg ); }
  #menu-btn-check{display: none;}
  .menu-content{width: 100%;height: 100%;position: fixed;top: 80;right: -100%;z-index: 80;background: linear-gradient(to right, #30A4DE,#038587);transition: all 0.5s; }
  .menu-content ul{padding: 70px 10px 0;}
  .menu-content ul li{border-bottom: solid 1px #ffffff; /* メニューアイテムの区切り線 */list-style: none;}
  .menu-content ul li a{display: block;width: 100%;font-size: 15px;box-sizing: border-box;text-decoration: none;color: #ffffff;padding: 9px 15px 10px 0;position: relative; transform:rotateZ(0.03deg);}
  #menu-btn-check:checked ~ .menu-content{right: 0;  /* チェックされたら画面内へ */}
  .spmenuimg {min-width:min(calc((100 / 1500) * 100vw), 100px); display: block; margin-right: 2%; position:absolute; right:50px; min-width:30px;}
  .spmenuimg a {display: block; }
  .spmenuimg img {display: block;}

  /*フッター*/
  .link img {height:50px; position:fixed; bottom:20px; right:15px; z-index:12}
  footer {width:100%; border:0px solid red;}
  footer .fotterflex {display:block; padding-top:50px; max-width:100%;}
  footer .fotterflex .itemleft {max-width:100%; width:100%; padding-right:0;}
  footer .fotterflex .itemleft .kyushinbi {margin:10px 0 15px 0;}
  footer .fotterflex .map {max-width:100%;  width:100%; padding:0; margin-top:20px; padding:0 10px;}
  footer .fotterflex .map iframe {width:100%; height:400px; }
  footer .fotterflex .map p {color:#009967;font-size:1rem;margin:0 4% 0 2%;}
  footer .fotterflex .tell p {color:#4D4D4D; font-size:16px; padding:0px 10px 20px 10px;}
  footer .fotterbottom {padding:40px 20px 50px 20px; width:100%; }
  footer .fotterbottom .inner {max-width:100%; display:block; padding:0; margin:0 auto; margin-top:100px; background:#f1f6f2;}
  footer .fotterbottom .inner .footerimg {width:100%; padding:0; margin-top:0;}
  footer .fotterbottom .inner .addres {color:#666; padding:0; margin:10px auto 0 auto; font-size:13px; text-align:center;}
  footer .fotterbottom .inner .teikei {width:100%; padding:30px 0 0 0; margin-top:0; }

}