@charset "UTF-8";

.nav_list_pc a:hover {color:#1CC0E6;}

/*-----------------------------------------
  ヘッダー
-----------------------------------------*/

@media screen and (min-width: 768px){
    .header {  display: none;}
    .header_pc {width:100%; background-color: #fff; padding:5px 0;display: block;position: fixed; top: -80px; z-index: 80; box-shadow: 2px 2px 4px 1px rgb(0 0 0 / 20%); transition: top ease-in 300ms;}
    .header.scroll-nav ~ .header_pc {top: 0;}
    .nav_pc {width:100%; display: flex; justify-content: center;align-items: center;  padding: 5px 8px; }
    .pclogo{width:15%;margin-left: 5%;}
    .nav_list_pc{width:80%;display: flex; justify-content: center;}
    .nav_item_pc {margin-left:5%;font-family: 'Noto Sans Japanese', sans-serif;font-weight: 500;}
    
    .nav_btn_pc {width:100%; margin: 80px auto; position: fixed; top: -130px; z-index: 80; transition: top ease-in 300ms;}
    .header.scroll-nav ~ .nav_btn_pc {top: 0;}
    .nav_list_pc2 {width:100%; display: flex; justify-content: flex-end;}
    
    .headcontactbtn a {float: right; display: block; 
    text-align: center;
    position: relative;
    border-radius: 20px;
    margin:12px 0 0 0;
    padding: 2px 25px;
    color: #ffffff; text-decoration: none;
    font-size: 17px;
    font-family: 'Noto Sans Japanese', sans-serif;
    font-weight: bold;
    background-color: #1cc0e6;
    box-shadow: 2px 2px 4px 1px rgb(0 0 0 / 20%);
    -webkit-transition: all .3s;
    transition: all .3s;
}
.headcontactbtn a:hover{
    color: #1cc0e6 !important;
    background-color: #ffffff!important;
    text-decoration: none;
    opacity: 0.7;
}
.headcontactbtn a:hover::before{
    background: #ffffff!important;
}
.headcontactbtn a:hover::after{
    border-top-color: #1cc0e6;
    border-right-color: #1cc0e6;
}
.headcontactbtn2 a {float: right; display: block; 
    text-align: center;
    position: relative;
    border-radius: 20px;
    margin:12px 20px 0 0;
    padding: 2px 25px;
    color: #343434; text-decoration: none;
    font-size: 17px;
    font-family: 'Noto Sans Japanese', sans-serif;
    font-weight: bold;
    background-color: #fff;
    box-shadow: 2px 2px 4px 1px rgb(0 0 0 / 20%);
    -webkit-transition: all .3s;
    transition: all .3s;
    overflow: hidden;
}
.headcontactbtn2 a:hover{
    color: #1cc0e6 !important;
    background-color: #fff!important;
    text-decoration: none;
    opacity: 0.7;
}
.headcontactbtn2 a:hover::before{
    background: #fff!important;
}
.headcontactbtn2 a:hover::after{
    border-top-color: #fff;
    border-right-color: #fff;
}
}

@media screen and (max-width: 767px){
.header_pc {  display: none;}
.header {width:100%; margin:0;  display: flex;  justify-content: center;  align-items: center;  padding: 5px 8px;  background: #262626;  position: fixed; top: -60px; z-index: 80; transition: top ease-in 300ms;}
.header.scroll-nav {top: 0;}

.logo {width:60%; margin: 10px 0 0 20%; }
    .logo img {width:50%;}
    .headerbtn {position: relative;width:24%;height:44px; font-size: 12px; line-height: 1.2em; background-color:#1CC0E6;padding:5px 3px 5px 0;}
    .headerbtn a {color: #fff;}
    .headerbtn a i {width:30%;float:left;font-size: 1.4em;padding-top:13px;}
    .headerbtn a span {width:70%;float:right;padding-top:7px;font-family: 'Noto Sans Japanese', sans-serif;font-weight: 500;}
    .headerbtn .headerbtnlink{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
  
@media screen and (max-width: 390px){
    .headerbtn a span{font-size:0.9em; }
    }
@media screen and (max-width: 370px){
    .headerbtn a span{fline-height: 1.15em;}
    }
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}
/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 40px;
  z-index: 100;
  cursor: pointer;
}
/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #fff;
  transition: 0.5s;
  position: absolute;
}
.drawer_open span:before {  bottom: 8px;}
.drawer_open span:after {  top: 8px;}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {  background: rgba(255, 255, 255, 0);}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before { bottom: 0; transform: rotate(45deg);}
#drawer_input:checked ~ .drawer_open span::after { top: 0; transform: rotate(-45deg);}
  
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0%;
  right: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #262626;;
  transition: .5s;
  text-align: center;
  padding-top: 10px;
}
.spopenlogo {width:100%; text-align: right; padding-right:20px;}
.spopenlogo img {width:30%;}
.nav_list {width:70%;margin:40px 15% 0; list-style: none; text-align: left; border-bottom: solid 1px #1CC0E6; padding-bottom: 40px;font-family: 'Noto Sans Japanese', sans-serif;font-weight: 400;font-size: 0.9em;}
.nav_content li {margin:20px 0;}
.nav_list li {width:90%; margin-left: 10%;}
.nav_item a {  color: #fff;  text-decoration: none;}
.nav_item a:hover {color:#1CC0E6;}
.nav_list2 {width:55%; margin:30px 22%; text-align: center;font-family: 'Noto Sans Japanese', sans-serif;font-weight: 400;font-size: 0.9em;}
.sp01{background: url("../img/spmenuicon01.png") right center no-repeat; padding-right:25px;}
.sp02{background: url("../img/spmenuicon02.png") right center no-repeat; padding-right:25px;}
/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {  right: 0;}
}

@media screen and (max-width: 280px){
    .logo {width:50%; margin: 10px 0 0 25%; }
    .logo img {width:70%;}
    .headerbtn {position: relative;width:30%;height:35px; font-size: 9px; line-height: 1.2em; padding:5px 3px 5px 0;}
    .nav_content li {margin:10px 0;}
    .nav_list,.nav_list2{font-size:0.7em;}
}
.scroll-nav {box-shadow: 2px 2px 4px 1px rgb(0 0 0 / 20%);}