/*-----------
reset
-----------*/
* {margin: 0;padding: 0;}

.cf { zoom: 1; }
.cf:before,.cf:after { content: ""; display: table;}
.cf:after { clear: both;}

/*-----------
Common
-----------*/
.ft_mplus { font-family: "M PLUS Rounded 1c"; }


/*-----------
body
-----------*/
body{background: #fff;color: #ffa229; font-size: 20px; width: 100%; }
img{width: 100%;height: auto;}

@media screen and (max-width: 767px){
	body{width: 100%;}
}

/*-----------
wrap
-----------*/
#wrap{position: relative;transition: all .5s;}
#wrap.open {transform: translateX(630px);}

@media screen and ( max-width:767px) {
}
/*-----------
cnt_wrap
-----------*/
#cnt_wrap{height: 100%;overflow-x: hidden;position: relative;}
.overlay {content: "";display: block;width: 0;height: 0;background-color: rgba(0, 0, 0, 0.5);position: absolute;top: 0;left: 0;z-index: 2;opacity: 0;transition: opacity .5s;}
.overlay.open {width: 100%;height: 100%;opacity: 1;}

/*-----------
l_cnt
-----------*/
#l_cnt{width: 300px;margin: 0; background: url(../images/bg.jpg);background-size: cover; display: flex;display: -webkit-flex;flex-direction: column; justify-content: center;align-items: center;position: fixed;height: 100vh; overflow: hidden;}
#l_cnt .inner{width: 300px;margin: 0 5px;display: flex;display: -webkit-flex;flex-direction: column; justify-content: center;align-items: center;}
#l_cnt h1{width: 80%; margin: 0 auto;}
#l_cnt h2{font-size: 0.8em; /*width:100%;*/}
.btn{border: 1px #ffa229 solid; width: 80%; padding: 0.8em 0; text-align: center; font-size: 0.9em; background: rgba(255,255,255,0.6);line-height: 0.8em;}
.btn:hover{ background: rgba(255,255,255,0.9); cursor: pointer;}

.price{margin-top: 1em;}
.sns_wrap{display: flex;display: -webkit-flex;width: 25%; margin: 0.5em auto 0;}
.sns_wrap .icon_inst{margin-left: 10px;}

.bnr_pop100 a{width: 85%; margin: 0 auto; display: block; line-height: 0; box-sizing: border-box; border: 1px solid #a0a0a0;}
@media screen and ( max-width:768px) {
	#l_cnt{position: relative;width: 98%; padding: 20px 1%; margin: 0; height: auto;background-size: 50% auto; background-repeat: repeat;}
}

.lang{display: flex; font-size: 0.9em;}
.lang{margin-top: .5em;}
.lang p{position: relative; line-height: 2em; margin-right: 0.5em;}
.lang p::after{content: "";display: block; width: 0;height: 0;border-style: solid;border-width: 5px 0 5px 5px;border-color: transparent transparent transparent #ffa229;position: absolute;right: -10px; top: calc(50% - 7px); }
.btn_lang a{border: 1px #ffa229 solid;padding: 0.7em;text-align: center;font-size: 0.8em;background: rgba(255,255,255,0.6);line-height: 0.8em; text-decoration: none;color: #ffa229;display: block;margin-left: 0.5em;}
.btn_lang a:hover{cursor: pointer;background: rgba(255,255,255,0.8);}


/*-----------
R_cnt
-----------*/
#R_cnt{margin-left: 305px;}

article{display: flex;display: -webkit-flex; flex-wrap: wrap;}
.box{margin: 10px 5px 0;width: calc((100% / 5) - 10px);border-radius: 5px; overflow: hidden;}
.box.lineup{line-height: 0;}
.box a{line-height: 0; display: block;}
.box img{width: 100%;}

@media screen and ( max-width:1300px) {
	.box{width: calc((100% / 4) - 10px);}
}

/* @media screen and ( max-width:800px) {
	.box{width: calc((100% / 3) - 10px);}
} */

@media screen and ( max-width:768px) {
	#R_cnt{margin-left: 0; }
	.box{width: calc((100% / 3) - 10px);}
}

@media screen and ( max-width:560px) {
	#R_cnt{margin-left: 0; }
	.box{width: calc((100% / 2) - 10px);}
}

/*-----------
about
-----------*/
#about{width: 630px;  height: 100%;background:url(../images/bg_about.jpg);background-repeat: no-repeat; background-size:cover;/*position: relative;*/padding:10px 0 0; overflow: auto;transform: translateX(-630px); transition: all .5s;position: fixed;top: 0;left: 0;}
#about.open{transform: translateX(0); }
.img_about{position: absolute; left: 0; top: 10%; width: 70%;}
#about h2{width: 80%; margin: 0 auto;}
#about .text_about{width: 50%; background: rgba(255,255,255,0.8);border-radius: 5px; padding: 10px;box-sizing: border-box;position: relative;z-index: 10;margin-left: 45%;}
#about .text_about h3{color: #fff; background: #ffa229; text-align: center; font-size: 0.9em; border-radius: 5px; margin-top: 10px;}
#about .text_about p{color: #4c4c4c; font-size: 0.7em;}
#about .text_about.en p{ font-size: 0.6em;}
.overlay {content: "";display: block;width: 0;height: 0;background-color: rgba(0, 0, 0, 0.4);position: absolute;top: 0;left: 0;z-index: 2;opacity: 0;transition: opacity .5s;}
.overlay.open {width: 100%;height: 100%;opacity: 1;}


@media screen and ( max-width:768px) {
	#about h2{width: 100%;}
}

@media screen and ( max-width:540px) {
	#about .img_about{display: none;}
	#about .text_about{width: 95%; margin:0 auto;}
}


/*-----------
animation
-----------*/

.box/*  img  */{transform: scale(0);}


/*-----------
size 20220315
-----------*/
.box{position: relative;}
.tab_size-l,
.tab_size-xl{position: absolute; right: 10px; bottom: 10px; width: 50px; background: #fff; color: #ffa229;text-align: center; font-weight: 700; line-height: 1; padding:.3em .1em .3em; border-radius: 100px; font-family: "M PLUS Rounded 1c"; font-size: 1.1em;}

.show{display: block;}
.hide{display: none;}


select, option{border: 1px solid #ffa229;background: rgba(255,255,255,0.6);border-radius: 100px;padding: 0 2em;/*  text-align: center; */position: relative;-webkit-appearance: none;appearance: none; font-size: .9em;color: #ffa229; font-family: "M PLUS Rounded 1c"; }
.pd_select{position: relative; margin-top: .5em;}
.pd_select::before {content: '';position: absolute;top: 0.8em;right: 0.8em;width: 0;height: 0;padding: 0;border-left: 3px solid transparent;border-right: 3px solid transparent;border-top: 6px solid #ffa229;pointer-events: none;z-index: 5;background: rgba(255,255,255,0.6);}
.pd_select .filter:focus,
.pd_select .filter:focus-visible,
.pd_select .filter:active{border: 1px solid #ffa229;outline: none;}


.btn_type{display: flex; margin: .5em 0;}
.btn_type a{border: 1px #ffa229 solid;padding: 0.7em;text-align: center;font-size: 0.8em;background: rgba(255,255,255,0.6);line-height: 0.8em; text-decoration: none;color: #ffa229;display: block;margin-left: 0.5em;}
.btn_type a:hover{cursor: pointer;background: rgba(255,255,255,0.8);}