﻿@charset "utf-8";

/*////////////////////////////////////////////////////////

/css/common01_sp.css

/////////////////////////////////////////////////////////*/
/* ----------------------------------------------- 
	
	1: body 
		: header 
		: パンくず 

	2: Font
		: link
	
	3: select
	
	4: footer
	
	
 ----------------------------------------------- */

 /* --------------------------------------------
1: body
-------------------------------------------- */

@media screen and (-webkit-min-device-pixel-ratio:2),
                  (min-resolution: 2dppx){

}

@media screen and (max-width:768px){
  /* タブレット 768px以下 */
  html{
    font-size: 2vw;
  }

@media screen and  (max-width:480px){
  /* スマートフォン 480px以下 */
  html{
    font-size: 3.4vw;
  }
}

@media only screen and (max-device-width: 0), screen and (max-width: 768px){
body{overflow-x: hidden;}
/*header*/
.niji{width: 27.25%;}
.sp_header #header_in{border-bottom: 3px solid #6fcbeb;z-index: 101;background-color: #FFFFFF;position: fixed;top: 0;}
.header_contact .header_contact_right{width: 20.06%;}
.header_contact .header_contact_rightin li:nth-child(1){width: 25%;}
.header_contact .header_contact_rightin li:nth-child(2){width: 45%;}
.yousei4{margin-top:1em;}
.header_contact .header_contact_center{text-align:left;}
.sp_header{background-color: #FFF;border-bottom: 3px solid #6fcbeb;}
header{border-bottom: 3px solid #6fcbeb !important;}
.line_bottom{border-bottom: 3px solid #6fcbeb;}

a.zoom:hover{animation: none;transform: none;transition: unset;}
a.zoom:hover img{animation: none;transform: none;transition: unset;}
a.zoom2:hover img{animation: none;transform: none;transition: unset;}
.zoom2 img:hover{animation: none;transform: none;transition: unset;}
a:link{animation: none;transform: none;transition: unset;}
a:hover{animation: none;transform: none;transition: unset;}
a:visited{animation: none;transform: none;transition: unset;}

@media only screen and (max-device-width: 0), screen and (max-width: 700px) {
.navi_change_header_navi_in ul li:nth-child(6),.navi_change_header_navi_in ul li:nth-child(7){display: none;}
.navi_change_header_navi_in ul li{padding: 0 1.5rem;}

}

@media only screen and (max-device-width: 0), screen and (max-width: 500px){
.navi_change{bottom: 0;top: inherit;border-top: 3px solid #6fcbeb;}
@keyframes fadedown {
from {
    opacity: 1;
    transform: translateY(0);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.navi_change_header_logo{display: none;}
.navi_change_header_navi_in{width: 100%;}
.navi_in li{width: calc(90% / 5);}
.navi_in li:nth-child(6),.navi_in li:nth-child(7){display: none;}
.navi_change_header{padding: .5em;border-bottom: 0;}
.navi_change_header_navi_in{width: 100%;}
.navi_change_header_navi_in ul li{padding: 0 .5rem;width: calc((100% - 7em) / 5);}
.navi_change_header_right{display: none;}
.navi_in_sp{display:block;text-align: center;margin-top: -3rem;}

.navi_in_sp li{display: inline-block;border-radius: 50px;text-align: center;margin: 1rem;width:calc((80% - 23rem) /2);padding: 0 .2rem;}
.navi_in_sp li img{width: 100%;}
.navi_in_sp li:nth-child(1){background-color: #efeefb;}
.navi_in_sp li:nth-child(2){background-color: #fffce2;}
.sp_header{position: fixed;top:0;z-index: 102;animation-name:sp_header_fadein;animation-duration: 2s;animation-iteration-count:1;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
overflow:hidden;background-color: #FFF;}
/*@keyframes sp_header_fadein{
from {opacity: 0;transform: translateY(0px);}
to { opacity: 1;transform: translateY(0);}

}*/
/*.header_contact{animation-name:sp_header_fadein;animation-duration: 2s;animation-iteration-count:1;}*/
.navi_in_sp{display: block !important;}

}
@media only screen and (max-device-width: 0), screen and (max-width: 480px) {
.navi_in_sp li{width:calc((80% - 12rem) /2);}
}
@media only screen and (max-device-width: 0), screen and (max-width: 400px){
.header_contact .header_contact_center{width:46.94%;margin: 0 auto;text-align: center;}
.header_character_left{display:none !important;}

.header_contact .header_contact_right{width:24.06%;}
}

#DrawerMenu {/*width:20.25rem;*/width: 100%;box-sizing: border-box;}
.drawer-menu{width: 100%;}
.DrawerMenu_closebtn img{max-width: 45px !important;}
.modalWrapper,.modalWrapper2{width:90%;padding: 5em 0;}
.modalWrapper1,.modalWrapper2{width:90%;padding: 5em 0;}

.modal,.modal2{box-sizing: border-box;height: fit-content;top: 0;bottom: 0;}
@media only screen and (max-device-width: 0), screen and (max-width: 500px) {
#searchform{padding: 0 .5em;box-sizing: border-box;}
#keywords{width: 70%;}
#searchBtn{width: 9%;margin-left: .5em;}
/*.special_list p{width: calc((100% - 2em) / 2 );}*/

.mt-site-search-form{padding: 0 .5em;box-sizing: border-box;}  
.mt-site-search-form__query{width: 70%;}  
.mt-site-search-form__button{width: 20%;margin-left: .5em;border-radius: 30px;font-size: 1rem;padding: .8rem 0;}  

}
/* ============= お知らせ ============= */
@media only screen and (max-device-width: 0), screen and (max-width: 500px) {
.informationin_ttl{display: block;width: 100%;height: inherit !important;padding: 1em 0;font-size: 1.5rem;}
#information{padding:0;}

}

@media only screen and (max-device-width: 0), screen and (max-width: 400px) {
.top_information_wrapperin{align-items: inherit;}
}

 /* --------------------------------------------
4: footer
-------------------------------------------- */
footer{display: inherit;}
#page-top img{max-width: 48px;}
.footer_left, .footer_center, .footer_right{width: 100%;}
.guide_left dd.line{border-bottom: 1px dotted #FFF;padding-bottom: 1em;margin-bottom: 1em;}
.guide_left dd​.line:last-child{border-bottom: none;margin-bottom: 0;padding-bottom: 0;}
.footer_right{position: inherit;width: 100%;}
.footer_rightin{position: inherit;}

.footer_san-x{width: 90%;}
#footer{margin: 60px auto 10px auto;}

/*btn*/
/*btn_テキスト*/
.btn1wrapper{font-size:1.5em;}
.btn1wrapper a{align-items: center;background-size: contain;}
.btn1wrapper a span{padding:7px .2em;}
.btn1wrapper a span img{width: 30px;}
.btn1wrapper a:before {width: 36px;height: 62px;margin-right: -1px;}
.btn1wrapper a:after {background-size: contain;width: 41px;height: 62px;background-repeat: no-repeat;}
.btn1wrapper a:hover span{background-size: contain;}
.btn1wrapper a:hover:before{background-size: contain;width: 41px;height: 62px;margin-right: -1px;}
.btn1wrapper a:hover:after{background-size: contain;width: 41px;height: 62px;background-repeat: no-repeat;}

/*btn_画像*/
.btn2wrapper a img{width: 80%;}

@media only screen and (max-device-width: 0), screen and (max-width: 500px) {
footer{padding-bottom: 9em;}
}

@media only screen and (max-device-width: 0), screen and (max-width: 400px){
.btn1wrapper{font-size:1.2em;}
.btn1wrapper a:before {width: 34px;height: 52px;}
.btn1wrapper a:after {background-size: contain;width: 35px;height: 52px;}
.btn1wrapper a:hover:before{width: 34px;height: 52px;}
.btn1wrapper a:hover:after{width: 35px;height: 52px;}

}

@media only screen and (max-device-width: 0), screen and (max-width: 340px){
.btn1wrapper{font-size: 1em;}
.btn1wrapper a span{padding: 10px .2em;}
}

}