@charset "utf-8";

/*////////////////////////////////////////////////////////

css/common01.css

/////////////////////////////////////////////////////////*/

/* ----------------------------------------------- 
	
	1: body 
		: header 
		: パンくず 

	2: Font
		: link
	
	3: select
	
	4: footer
	
	5: IE10対応
	
	6:shoplist
	
 ----------------------------------------------- */

 /* --------------------------------------------
1: body
-------------------------------------------- */

@font-face {

   font-family: "font_thin";
   src: url("../M_PLUS_Rounded_1c/MPLUSRounded1c-Thin.ttf") format("truetype");
}

@font-face {
   font-family: "font_light";
   src: url("../M_PLUS_Rounded_1c/MPLUSRounded1c-Light.ttf") format("truetype");
}
@font-face {
   font-family: "font_regular";
   src: url("../M_PLUS_Rounded_1c/MPLUSRounded1c-Regular.ttf") format("truetype");
}

@font-face {
   font-family: "font_medium";
   src: url("../M_PLUS_Rounded_1c/MPLUSRounded1c-Medium.ttf") format("truetype");
}

@font-face {
   font-family: "font_bold";
   src: url("../M_PLUS_Rounded_1c/MPLUSRounded1c-Bold.ttf") format("truetype");
}

@font-face {
   font-family: "font_extrabold";
   src: url("../M_PLUS_Rounded_1c/MPLUSRounded1c-ExtraBold.ttf") format("truetype");
}

@font-face {
   font-family: "font_black";
   src: url("../M_PLUS_Rounded_1c/MPLUSRounded1c-Black.ttf") format("truetype");
}

html{height:100%;}
body{height:100%; width:100%;margin: 0;padding: 0; font-size:16px; border:none;font-family: 'font_light', sans-serif;position: relative;overflow-x: hidden;}
::-webkit-scrollbar{width: 5px;}
::-webkit-scrollbar-track{background: #fff;border: none;border-radius: 10px;box-shadow: inset 0 0 2px #6fcbeb; }
::-webkit-scrollbar-thumb{background: #6fcbeb;border-radius: 10px;box-shadow: none;
}

.red{color: #f90000;}
.text-indent{text-indent: -1em;margin-left: 1em;}

a.zoom{display: inline-block;}
a.zoom:hover {-webkit-animation: zoom .7s;animation: zoom .7s;opacity:1;}
a.zoom:hover img{opacity:1;}
@-webkit-keyframes zoom {
  50% {
    -webkit-transform: scale(1.05);
  }
}
@keyframes zoom {
  50% {
    transform: scale(1.05);
  }
}

a.zoom2{display: block;}
a.zoom2 img{transition-duration: 0.3s;/*backface-visibility: hidden;
	-webkit-backface-visibility: hidden;*/}
.zoom2 img:hover{cursor: pointer;transform: scale(1.1);	/*画像の拡大率*/
	transition-duration: 0.3s;}

@media only screen and (max-device-width: 0px), screen and (max-width: 768px) {

}

a{text-decoration:inherit !important;}

main#main{ width:100%; margin:0 auto;color: #405d6a;}
#wrapper{width:100%; margin:0 auto;background-color: #FFF;}

main.mainin{ max-width:1600px; margin:0 auto; height:100%;display: inline;}
.mainin1200{max-width:1200px !important;}

img{touch-callout:none;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-touch-callout:none;-moz-user-select:none;}
br.none_pc{display: none;}

/*header*/

header{ width:100%; margin:0 auto;background-color: #FFF;display: flex;    border-bottom: 4px solid #6fcbeb;}
#header_in{ width:100%; margin:0 auto;}
.header_contact{display: flex;align-items: center;position: relative;}
.header_contact h1 img{width:100%;}
.header_character_left{padding-top:.5em;}
.header_contact li{display: inline-block;vertical-align: middle;}
.header_contact li img{width: 100%;}

.niji{width:22%;}
.niji img{height: auto;}

.header_character_left{width:25%;}
.header_character_left img{position: relative; z-index: 2;}
.header_contact .header_contact_center{width:54.94%;margin:0 auto;text-align: center;}
.header_logo{width:60%;text-align:left;}

.header_contact .header_contact_right{text-align: right;}
.header_contact .header_contact_rightin li:nth-child(1){width: 30%;box-sizing: border-box;}
.header_contact .header_contact_rightin li:nth-child(2){margin-left:10.84%;margin-right:9.84%;width: 45%;box-sizing: border-box;}

.niji{overflow: hidden;position: relative;}
.niji:before{animation: l_to_r_scroll 4s ease 0s 1 forwards normal;background: #fff;bottom: 0;content: '';left: 0;pointer-events: none;position: absolute;right: 0;top: 0;z-index: 1; box-shadow: 0 0 26px 20px #fff;max-width: 322px;}
@keyframes l_to_r_scroll{
    100%{
      transform: translateX(100%);
    }
}


.softly{
    animation-name: softly_yousei1;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}
@keyframes softly_yousei1{
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-15px)
    }
}

#wrapper_navi{width: 100%;background-color: #FFF;}
#navi{width: 100%;margin: 0 auto;text-align: center;padding: 1em 0;}
#navi img{width: 100%;max-width: 140px;}

#navi:before,#navi:after{content: '';background-repeat: repeat-x;width: 100%;visibility: inherit;height: 4px;display: block;}
#navi:before{background: url(../img/top_line.png);background-position: bottom;}
#navi:after{background: url(../img/bottom_line.png);background-position: top;}

.navi_in{width: 100%;display: block;background: url(../img/top_line_in_bg.png);visibility: inherit;margin: 0 auto;padding: 1em 0;}
.navi_in ul{text-align: center;margin: 0 auto;}
.navi_in li{display: inline-block;width: calc(94% / 7);text-align: center;}
.navi_in li a{display: block;}
.navi_change{display: none;position: fixed;top: 0;right: 0;left: 0;margin: auto;z-index: 100;background-color: #FFF;
-webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    animation-name: fadedown;
animation-duration: 2s;
    animation-iteration-count: 1;
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
overflow:hidden;transform: translate3d(0,0,0);
}

@keyframes fadedown {
from {
    opacity: 0;
    transform: translateY(0);
}
to {
    opacity: 1;
    transform: translateY(0);
}

}

.navi_change_header{display: flex;background-color: #FFF;border-bottom: 4px solid #6fcbeb;padding: 1em;justify-content: space-between;align-items: center;}

.navi_change_header_logo{width: 15%;}
.navi_change_header_logo img{width: 100%;}
.navi_change_header_logo a{display: block;}
.navi_change_header_navi_in{width: 65%;}
.navi_change_header_navi_in ul{display: flex;justify-content: space-between;align-items: center;}
.navi_change_header_navi_in ul li{padding: 0 1.5em;}
@media all and (-ms-high-contrast: none) {
.navi_change_header_navi_in ul li{width:calc(65% /7);}
}

@media only screen and (max-device-width: 0px), screen and (max-width: 1100px) {.navi_change_header_navi_in ul li{padding: 0 1rem;}}

.navi_change_header_navi_in ul img{width: 100%;max-width: 140px;}
.navi_change_header_right{width: 10%;text-align: right;}
.navi_change_header_rightin{width: 100%;display: flex;justify-content: space-between;}
.navi_change_header_rightin li{display: inline-block;vertical-align: middle;width: 45%;}
.navi_change_header_rightin li:nth-child(1){text-align: left;width: 30%;}
.navi_change_header_rightin li img{width: 100%;cursor: pointer;transition-duration: 0.3s;backface-visibility: hidden;-webkit-backface-visibility: hidden;}
.navi_change_header_rightin li img:hover{cursor: pointer;transform: scale(1.1);	/*画像の拡大率*/
	transition-duration: 0.3s;}
.modal-inner1 {position: relative;}
#openModal1{cursor: pointer;}
.modalArea1 {display: none;position: fixed;z-index: 101;top: 0;left: 0;bottom:0;width: 100%;height: 100%;}
.modalBg1 {width: 100%;height: 100%;background-color:rgb(255 255 255 / 80%);}

.modalWrapper1 {position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);width: 100%;max-width: 750px;padding: 5em 30px;background-color: #fff;border-radius: 20px;border: 2px dashed #66c5e9;box-shadow: 0 0 0 11px #ffffff;}
.closeModal1 {position: absolute;top: 0.5rem;right: 1rem;cursor: pointer;}
 
.modalContents1{text-align: center;}
.is-open1 {display: block;}

.modal-open1{height: 100%;background-color: rgba(200,200,200,.5);    overflow: hidden;}
.mtssq{width: 80%;border: 1px solid #a9a6a6;padding: 1em .5em;border-radius: 50px;vertical-align: middle;}

.snsin{position: absolute;top: -25px;z-index: 8;left: -40px;background-color: #b7e0ef;border-radius: 50px;width: 110px;padding: 1em .5em;}
.toggle-title{color: #FFFFFF;letter-spacing: .4em;text-align: right;}
.toggle-box{z-index: 10;position: absolute;top: 0;left: 40px;background-color: #cdecf7;width: 305px;height: 510px;border-radius: 0 30px 30px 0;overflow: hidden;padding: 10px;}
.DrawerMenusnsins{width: 300px;height: 500px;overflow-y: scroll;}

#DrawerMenusns{display:none;}
.DrawerMenusns_closebtn{text-align: right;margin-right: 10px;}
#DrawerMenusns .drawer-menu li.icon{position: relative;border-radius: 50px;width: 40px;height: 40px;margin: 5px;padding: 0;}
#DrawerMenusns .drawer-menu li.facebook{background-color: #3b5999;}
#DrawerMenusns .drawer-menu li.twitter{background-color: #1894ca;}
#DrawerMenusns .drawer-menu li.blog{background-color: #ff7a90;}
#DrawerMenusns .drawer-menu li.instagram{background-color: #ffa500;}

#DrawerMenusns .drawer-menu li.youtube{background-color: #d51112;/*display: inline-block;*/}
#DrawerMenusns .drawer-menu li.wechat{background-color: #1AAD19;display: inline-block;}

#DrawerMenusns .drawer-menu li.box{margin-bottom: 20px;border-bottom: 1px solid #FFF;}

#DrawerMenusns .drawer-menu li.icon a {top: 4px;bottom: 0;margin: auto;position: absolute;right: 0;left: 0;}

.DrawerMenusnsin{text-align: left;margin: .5em;line-height: 1.7em;}
.DrawerMenusnsin a{position: relative;display: inline-block;transition: .3s;color: #3f5c68;}
.DrawerMenusnsin a::after {position: absolute;bottom: 0;left: 50%;content: '';width: 0;height: 1px;background-color: #405d6a;transition: .3s;-webkit-transform: translateX(-50%);transform: translateX(-50%);}
.DrawerMenusnsin a:hover::after {width: 100%;}

.line_bottom{border-bottom: 4px solid #6fcbeb;}

.header_sanx_logo{position: absolute;top: 0;left: .5rem;bottom: 0;margin: auto;z-index: 2;width: 15%;}
.header_sanx_logo a{display: block;}
.header_sanx_logo a img{width: 100%;position: absolute;top: 0;bottom: 0;margin: auto;}

.special_list{width: 100%;}
.special_list div{display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;}
.special_list p{display: inline-block;border: 1px solid #d3eef8;border-radius: 10px;padding: .5em;margin: .5em;width: calc((100% - 5em) / 4 );box-sizing: border-box;    font-size: .8rem;text-align: center;background-color: #FFF;
color: #405d6a;}
.special_list p a{color: #405d6a !important;transition: .3s;}

@media only screen and (max-device-width: 0), screen and (max-width: 768px){
.header_sanx_logo{width: 23.25%;}
}

/*========= 検索窓の設定 ===============*/

.modal-inner,.modal-inner2 {position: relative;}
#openModal,#openModal2{cursor: pointer;}
.modalArea,.modalArea2 {display: none;position: fixed;z-index: 100;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width: 100%;height: 100%;}
.modalBg,.modalBg2 {width: 100%;height: 100%;background-color:rgb(255 255 255 / 80%);}

.modalWrapper,.modalWrapper2 {position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);width: 100%;max-width: 750px;padding: 5em 30px;background-color: #fff;border-radius: 20px;border: 2px dashed #66c5e9;box-shadow: 0 0 0 11px #ffffff;}
.closeModal,.closeModal2 {position: absolute;top: 0.5rem;right: 1rem;cursor: pointer;}

#searchform{  width: 100%;  display: block;height: 50px;position: relative;}  
#keywords{width: 80%;border: 1px solid #a9a6a6;padding: 1em .5em;border-radius: 50px;vertical-align: middle;}  
#searchBtn{vertical-align: middle;width: 30px;margin-left: 20px;}

.modalContents,.modalContents2{text-align: center;}
.is-open,.is-open2{display: block;}
.modal-open,.modal-open2{height: 100%;background-color: rgba(200,200,200,.5); overflow: hidden;}

.mt-site-search-form{  width: 100%;  display: block;height: 50px;position: relative;text-align: center;}  
.mt-site-search-form__query{width: 80%;border: 1px solid #a9a6a6;padding: 1em .5em;border-radius: 50px;vertical-align: middle;}  
.mt-site-search-form__button{vertical-align: middle;margin-left: 20px;background-color: #66c5e9;color: #FFF;padding: .5rem;border-radius: 10px;border: none;}  
.mt-site-search-form__button:hover{cursor: pointer;transform: scale(1.1);transition-duration: 0.3s;opacity: .7;}
.mt-site-search-result-container{margin: 1rem;}

#DrawerMenu{display:none;width:36.25rem;height:100%;position: fixed;right:0;top:0;background-color:#6fcbeb;border:1px solid #FFFFFF;z-index: 103;overflow-y: scroll;padding: 1em;scrollbar-color: #6fcbeb #fff;}
#DrawerMenu::-webkit-scrollbar{width: 5px;}

@media all and (-ms-high-contrast: none){
#DrawerMenu{ scrollbar-base-color:#fff; }/* IE用スクロールバーカラー */
#DrawerMenu::-webkit-scrollbar { width:10px; height: auto; }/* スクロールバー幅 */
#DrawerMenu::-webkit-scrollbar-track { background: #6fcbeb; }/* 背景 */
#DrawerMenu::-webkit-scrollbar-thumb { background:#fff; }/* スクロールバー本体 */
::-webkit-scrollbar-thumb { background:#fcc800; }
}
#DrawerMenu -ms-overflow-style{width: 5px;}
#DrawerMenu scrollbar-width{width: 5px;}

#DrawerMenu{-ms-overflow-style: none;scrollbar-width: thin;}

.DrawerMenu_closebtn{text-align: right;}
#DrawerMenu .drawer-menu li{color: #FFFFFF;font-weight: bold;vertical-align: middle;margin-bottom: .5em;border-bottom:1px solid #ffffff;padding-bottom: .5em;display: block;font-size: 1.2rem;}
#DrawerMenu .drawer-menu li a {position: relative;display: inline-block;transition: .3s;color: #FFFFFF;}
#DrawerMenu .drawer-menu li a::after {position: absolute;bottom: 0;left: 50%;content: '';width: 0;height: 1px;background-color: #405d6a;transition: .3s;-webkit-transform: translateX(-50%);transform: translateX(-50%);}
#DrawerMenu .drawer-menu li a:hover::after {width: 100%;}
#DrawerMenu .drawer-menu li .dotted{margin: .5em;}
#DrawerMenu .drawer-menu li .dotted{color:#405d6a;}

.openModal img{transition-duration: 0.3s;backface-visibility: hidden;
	-webkit-backface-visibility: hidden;}
.openModal img:hover{cursor: pointer;transform: scale(1.1);
	transition-duration: 0.3s;}

.fade-in01{ 
  opacity:0;
  animation-name: fade-in01; /*←@keyframesにも同じ名前を記述*/
  animation-duration: 1s; 
  animation-fill-mode: forwards; 
}
.drawer-menu{padding-bottom: 4em;}
@keyframes fade-in01 {
0% {opacity: 0;}
90% { opacity: 1;}
100% { opacity: 1;} 
}


/*btn*/

/*btn_テキスト*/
.btn1wrapper{margin:0 auto;text-align: center;width: 100%;position: relative;font-size:2.3125em;z-index: 5;display:flex;}
.btn1wrapper a:before{content:"";width: 100%;display: block;background: url(../img/top_look_btn_before.png) ;width: 49px;height: 75px;cursor: pointer;transition: 1.0s ;background-size: cover;display: inline-flex;vertical-align:top;margin-left: -1px;}
.btn1wrapper a:after{content:"";width: 100%;display: block;background: url(../img/top_look_btn_after.png) ;width: 50px;height: 75px;visibility: inherit;cursor: pointer;transition: 1.0s ;display: inline-flex;vertical-align:top;margin-right: 3px;}
.btn1wrapper a span{background: url(../img/top_look_btn.png) ;cursor: pointer;line-height: 2em;transition: 1.0s ;align-items: center;background-size: contain;display: inline-flex;vertical-align:top;padding: .5px;}
.btn1wrapper a{color: #FFF;text-align: center;margin: 0 auto;display: -webkit-flex;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-justify-content: center;}
.btn1wrapper a span img{vertical-align: middle;margin-left: 10px;}
.btn1wrapper a:hover span{background: url(../img/top_look_btn_on.png) ;cursor: pointer;transition: 1.0s ;}
.btn1wrapper a:hover:before{content:"";width: 100%;background: url(../img/top_look_btn_before_on.png) ;width: 49px;height: 75px;cursor: pointer;transition: 1.0s ;margin-left: -1px;}
.btn1wrapper a:hover:after{content:"";width: 100%;background: url(../img/top_look_btn_after_on.png) ;width: 50px;height: 75px;cursor: pointer;transition: 1.0s ;margin-right: 3px;}

/*btn_画像*/
.btn2wrapper{margin:0 auto;text-align: center;width: 100%;position: relative;z-index: 5;display:flex;}
.btn2wrapper a{text-align: center;margin: 0 auto;}
.btn2wrapper a:hover{cursor: pointer;transition: 1.0s ;}



@media only screen and (max-device-width: 0), screen and (max-width: 510px){.news_top img{width: 60px;}}

/* ============= お知らせ ============= */
#information{margin: 0 auto;width: 100%;padding: 3em 0;}
.informationin{margin:1em;box-sizing: border-box;border: 1px solid #c5dfeb;}
.informationin_ttl{color: #405d6a;display:table-cell;width: 10em;vertical-align: middle;background-color:#c5dfeb;text-align: center;font-size:1.25rem;font-family: 'font_medium', serif;}
.informationin_box{color: #85a7b4;display:table-cell;vertical-align: middle;padding: 1em;box-sizing: border-box;}
.informationin_box li{margin-left: 1em;text-indent: -1em;font-weight: bold;}

/* ============= SNS ============= */
.side_navi{display: none;}





 /* --------------------------------------------
4: footer
-------------------------------------------- */

#page-top a {text-decoration: none;display: block;}
#page-top a:hover {text-decoration: none;}
#footer{margin: 100px auto 0 auto;color: #898989;font-size: 12px;line-height: 1.7em;}

.page-top {position: fixed;right: 10px;display: block;z-index: 20;}
.page-top img{max-width: 95px;}

#footer{background: url(../img/top_line_dotted.png);background-repeat: repeat-x;padding-top: 1.2em;width: 100%;position: relative;}
footer{background: url(../img/top_line_dotted_bg.png);display: flex;padding: 2em;margin: 0 auto;}
.footer_left,.footer_center,.footer_right{width: calc(97% / 3);}

.footer_left,.footer_center{margin-right: 2em;}
.footer_right{vertical-align: bottom;position: relative;}
.footer_rightin{position: absolute;bottom:2em;}

footer dl{margin-bottom: 2em;border-bottom: 1px solid #6fcbeb;padding-bottom: 2em;}
footer dt a{font-size:1.25rem;margin-bottom:.5em;display: block;text-decoration: none !important;}
/*footer dt a:after{display: inline-block;content:"";width: 100%;display: block;background: url(https://www.san-x.co.jp/img/top_slider_next.png) ;width:1em;height:1em;background-size: 100% auto;visibility: inherit;cursor: pointer;transition: 1.0s ;
margin-left: .5em;display: inline-block;vertical-align: middle;margin-bottom: .2em;}*/

footer dd{font-size:1rem;color:#85a7b4;}
footer dd a{color:#405d6a !important;font-weight: normal;text-decoration: none;line-height: 1.7em;}
footer dd a:hover{color:#405d6a !important;}
footer dd a:after{display: inline-block;content:"";width: 100%;display: block;background: url(https://www.san-x.co.jp/img/top_slider_next.png) ;width:1em;height:1em;background-size: 100% auto;visibility: inherit;cursor: pointer;transition: 1.0s ;
margin-left: .5em;display: inline-block;vertical-align: middle;margin-bottom: .2em;}

#copyright{text-align: right;font-size: 1.25rem;color:#00b0ec;}
#copyright span{text-align: left;font-size: 1rem;font-family: 'font_regular', serif;margin-top: 1em;display: block;}

nav#copyright{ padding:0.5em;  margin:0 auto; text-align:center;background-color:#5f3f32; color:#ffd200; height:auto;}
nav#copyright span{color: #FFF;font-size: 0.8em;margin: 0.5em auto;display: block;}

.footer_san-x{width: 100%;text-align: center;margin: 1em auto;}
.footer_san-x img{width: 100%;}
.footer_san-x a{display: block;}
    
.footer_san-x_sns{text-align:center;margin: 1em auto;}
.footer_san-x_sns a{width: calc((100% - 5em) / 4);display: inline-block;    margin: .5em;}
.footer_san-x_sns a img{width: 100%;}