/*-----------
reset
-----------*/
* {margin: 0;padding: 0;box-sizing: border-box;}

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

/*-----------
body
-----------*/
/*！！！！！！*/
:root {
	--bg-color: #fff;
	--text-color: #000;
	--text-size: 20px;
	--link-color: #ff9426;
	--border-color: #cbcbcb;
	/* --box-size: 200px; */
  }

/* @media screen and ( max-width:1000px ) {
	:root {
		--box-size: 150px;
	  }
}
 */
@media screen and ( max-width:768px ) {
	:root {
		/* --box-size: 100px; */
		--text-size: 18px;
	  }
}

/*！！！！！！*/

body{color:var(--text-color); font-size: var(--text-size); width: 100%; overflow: scroll;overflow-x: hidden; font-family: "senobi-gothic", sans-serif;font-weight: 400;font-style: normal;background-color: var(--bg-color); background-image: url(../images/bg.jpg) ;background-repeat: no-repeat;background-attachment: fixed; position: relative;background-size: cover;}
body.en{font-family: 'Cabin', sans-serif;}
.font-b{font-family: "senobi-gothic", sans-serif;font-weight: 700;font-style: normal;}
.font-udkaku{font-family: "fot-udkakugoc80-pro", sans-serif;font-weight: 700;font-style: normal;}
img{height: auto; display: block;}


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

@media screen and (max-width: 768px){
	body{background-attachment: initial;background-image:none ;}
	body::before {background:url(../images/bg_sp.jpg) no-repeat;background-size: 100% auto;display: block;position:fixed;top: 0;left: 0;width: 100%;height: 100%;padding-bottom: 108px;content: "";z-index: -1;} 
}

/*-----------
commone
-----------*/
/*article*/
article{width: 100%;}
section{width: 100%;margin: 0 auto;}

/*float*/
/* .left{float: left;}
.right{float: right;}
.listL li{float: left;} */

/*link*/
a{color: var(--link-color);cursor:pointer;}
a:hover{text-decoration: none;}
a:hover img{filter:alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9;}

/*flex box*/
.flex{display: flex; align-items: flex-start;flex-wrap: wrap;}
.flex img{align-items: flex-start;}
.mleft{margin-left: auto;}
.mright{margin-right: auto;}
.mtop{margin-top: auto;}
.mbottom{margin-bottom: auto;}

@media screen and ( max-width:768px ) {
	.flex{flex-wrap: wrap;}
}

/*social*/
/* .social{display: flex; justify-content: space-between; line-height: 1em;}
.social img{align-items: flex-start;}
.social a{width: 35px; margin-left: 10px;} */

/*※じるしリスト*/
ul.caution{font-size: 0.7em; margin-left: 2em;}
ul.caution li{margin-left: -1em;}
ul.caution li::before{content: "※"; margin-left: -1em;}

/*btn*/
.link{display: block; line-height: 1; text-decoration: none; width: 100%; position: relative; border: 2px solid #fff; border-radius: 1000px; padding: 1em .5em; color: #FFF;text-align: center; margin: 0 .25em; box-sizing: border-box;font-weight: 500; }
.link span{text-align: center;}


/*br*/
br.sp{display: block;}
@media screen and ( max-width:768px ) {
	br.sp{display: block;}
}

/*shadow*/
.shadow{box-shadow: 0 0 10px rgba(255,0,0,.5);}
.shadow-filter{filter:drop-shadow(0 0 10px rgba(255,0,0,.5));}
/*-----------
header
-----------*/
header .inner.flex{justify-content: space-between; padding: .5em; box-sizing: border-box;}
header .logo{width: 22%; min-width: 300px; max-width: 300px;}
header .logo_gsc{width: 49%;  margin-right: 1em; /*min-width: 150px; */}
header .logo_mxf{width: calc(51% - 1em); /* min-width: 150px; */}
header .left_box{background: var(--bg-color); border-radius: 1000px; font-size: .7em; padding: .5em 1.5em; align-items: center;}
header .left_box a{text-decoration: none; color: var(--text-color); margin: 0 0 0 .5em;}
header .left_box .language a.active,
header .left_box .language a:hover{border-bottom: 2px solid #000;}
header .left_box .social{align-items: center; margin-left: 1em;}

header .left_box .social .sns_tw{width: 20px;}
header .left_box .social .sns_fb{width: 20px;}


@media screen and ( max-width:768px ) {
	header .left_box{display: flex; /* flex-direction: column; */ align-items: center; position: absolute; height: 120px; width: 100%; top: -120px; left: 0;z-index: 15;transition: all 0.6s; background: rgba(255,2552,255,.8);padding: .5em 0; border-radius:0 0 30px 30px;font-size: 5vw;align-self: center;}
	/* header .left_box.flex{flex-direction: column; flex-wrap: nowrap;} */
	header .left_box .flex{justify-content: center;}
	header .left_box.shadow{box-shadow: none;}
	header .left_box.active{top: 0; }
	header .left_box.active.shadow{top: 0; box-shadow: 0 0 10px rgba(255,0,0,.5);}
	/* header .right_box{font-size: 1.5em;} */
	header .left_box .language,header .left_box .social{width: 100%;}
}

@media screen and ( max-width:600px ) {
	header .logo{width: 60%; min-width: 60%; max-width: 60%;}
	header .logo_gsc{margin-right: .5em;}
	header .logo_mxf{width: calc(51% - .5em);}
}

/*SP用ボタン*/
.menu_btn{display: none;}
@media screen and ( max-width:768px ) {
	.menu_btn{position: relative; z-index: 20; border-radius: 1000px; position: absolute; top: 10px; right: 10px; display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; background: #fff;} 
	.menu_btn:hover{cursor: pointer;}
	.menu_btn span{font-size: .8em; background: #000;position: relative; height: 3px;display: block; width: 50%;}
	.menu_btn span::after,.menu_btn span::before{content: ""; display: block; height: 3px ; width: 100%; background: #000;left: 0; position: absolute; transition: all 0.6s;}
	.menu_btn span::after{top: -.8em;}
	.menu_btn span::before{bottom: -.8em;}
	/* .menu_btn span */
	.menu_btn.active span{background: rgba(0,255,255,0);}
	.menu_btn.active span::after{top: 0; transform:rotate(45deg);}
	.menu_btn.active span::before{bottom: 0; transform:rotate(-45deg);}

}

/*-----------
TOP
-----------*/
#top{padding:8% 4% 0; max-width: 2000px; margin: 0 auto;}
#top h1{width: 40%; margin-left: 2%;}
#top .text_area{width: calc(55% - 2em);margin: 0 0 0 2em;}
#top h2{line-height: 1.3; font-size: 3em; text-align: center;}
#top h2.en{font-size: 4em;}
#top h2 img{display: inline;}
#top h2 .font-l{font-size: 200%;}
#top h2 .line{margin: 0 .2em 0 0;}
#top h2 .data{margin: 0 .2em;}
#top h2 .data.en{margin: 0 .1em;}
#top h2 .data.sat{margin-left: -.15em;}
#top h2 .data.sat.en{margin-left: -.01em;}
#top h2 .data img{width: 6%; line-height: 1;}
#top h2 .data.en img{width: 4.5%; line-height: 1;}
#top .lead{ text-align: center; font-size: 1.5em;  margin-top: 1em; transform: rotate(0.03
	);}

br.sp{display: block;}

@media screen and ( max-width:2000px ) {
	#top h2{font-size: 3.5vw; }
	#top h2.en{font-size: 4.5vw;}
	#top .lead{font-size: 1.5vw;}
}

@media screen and ( max-width:1200px ) {
	#top h2{font-size: 3.2vw; }
	#top .text_area{width: calc(55% - 1em);margin: 0 0 0 1em;}
	#top .lead{font-size: 1.5vw;}
}


@media screen and ( max-width:850px ) {
	#top h1{width: 80%; margin: 0 auto;}
	#top .inner.flex{flex-direction: column;}
	#top .text_area{width: 95%; margin: 1em auto 0;}
	#top .text_area br{display: block;}
	#top h2{font-size: 6vw;}
	#top h2.en{font-size: 7vw;}
	#top .lead{font-size: 2.6vw;}

}

@media screen and ( max-width:768px ) {
	#top .lead{font-size: 1em;}
	#top .text_area br{display: none;}
	#top .text_area h2 br{display: block;}
}


@media screen and ( max-width:600px ) {
	#top{padding-top:10%;}
	#top h1{width: 80%; margin: 0 auto;}
}

/*-----------
section
-----------*/
section.flex{background: var(--bg-color); padding: 2em; max-width: 1500px; width: 90%; margin: 8em auto 0; border-radius: 2.5em; align-items: center;}
section h3{width: 30%; text-align: center; font-size: 1.8em; line-height: 1.2;}
section h3 .font-s{font-size: .9em;}
section h3 img{display: block; margin: 0 auto .5em;}
section .text_area{width: calc(70% - 1em); margin-left: 1em;}

@media screen and ( max-width:2000px ) {
	section h3{font-size: 2vw;}
}

@media screen and ( max-width:800px ) {
	section.flex{flex-direction: column;}
	section h3{width: 100%;font-size: 1.5em;}
	section h3 img{zoom: .8;}
	section .text_area{width:100%; margin-left:0;}
}

@media screen and ( max-width:600px ) {
	section.flex{padding: 2em 1.5em;}
	section h3{font-size: 1.2em;}
	section h3 img{zoom: .6;}
}


/*event*/
#event section h3 img{width: 28.5%;max-width: 87px;}

dl,dt,dd{box-sizing: border-box;}
dt,dd{padding: .5em .5em 0 0;} 
dt{width: 100px;float: left;}
dd {margin-left: 100px;padding-bottom: 10px;}
dd:after {content: ''; display: block;clear: both;}
dd .font-s{font-size: .8em;}
dd .sp{display: none;}
dd .last{margin: 0 .3em 0 .8em;}

#event .event_caution a{margin-top: 1em;text-decoration: none;}
#event .event_caution a:hover{text-decoration: underline;}
#event .event_caution span{position: relative; }
#event .event_caution span::after{content: "▼"; /* position: absolute; */width: .8em; height: .8em; font-size: .8em; top: .1em; right: -1em; color: var(--link-color);}
#event .event_caution br{display: none;}

@media screen and ( max-width:850px ) {
	#event section.flex {margin-top: 3em;}
	dt{width: 100%;float: none; border-bottom: 2px solid var(--border-color);}
	dd {margin-left: 0;width: 100%; padding-top: .5em;}
	dd br{display: block;}
	dd .last{margin: 0;}
	#event .event_caution{text-align: center; width: 100%; margin-top: 1.5em;}
	#event .event_caution span::after{top: 0em;}
}


@media screen and ( max-width:550px ) {
	#event .event_caution br{display: block;}
	dd .sp{display: block;}
}


/*maker*/
#maker section h3 img{width: 23.5%; max-width: 55px;}
#maker .text_area.flex{margin-left: 0;align-items: center; margin-top: -1em;}
#maker .text_area a{margin:1em 0 0 1em;}

@media screen and ( max-width:850px ) {
	#maker .text_area.flex {padding-top: 1.5em;justify-content: center;}
	#maker .text_area a {zoom: 90%; margin: 1em .25em 0 .25em;}
}

/*caution*/
#caution h3{width: 100%;text-align: center;font-size: 1.5em;}
#caution h3 br{display: none;}
/* #caution li a{color: var(--text-color);} */
#caution .disc li{list-style-type:circle; margin-left: 1em;}
#caution ul{margin-top: 1em;}
#caution .caution li{font-size: 1.2em;}

@media screen and ( max-width:600px ) {
	#caution h3{font-size: 1.2em;}
	#caution h3 br{display: block;}
}

/*-----------
footer
-----------*/
footer{position: relative;z-index: 10; background: var(--bg-color); padding-bottom: 3em; border-radius: 2.5em 2.5em  0 0; width: 90%; max-width: 1500px; margin: 8em auto 0; padding: 2em;}
footer .left_box{width: 60%;}
footer .right_box{width: 40%;}

footer .logo_gsc{width: 15%; margin-right: 1em; min-width: 120px;}
footer .logo_mxf{width: 15%; min-width: 120px;}
footer .copy{font-size: .6em; text-align: left;margin-top: 1em; }
footer .copy br{display: block;}

footer h4{font-size: 1.2em;position: relative;padding-left: 1.3em;background: url(../images/icon_sns.svg) no-repeat;background-size: 1em 1em; background-position: center left;}
footer h5{font-size: 1em;}
footer .account a{text-decoration: none; color: var(--text-color); font-size: .8em; margin:1em 1em 0 0;}
footer .account a:hover{text-decoration: underline;}

@media screen and ( max-width:850px ) {
	footer{flex-direction: column-reverse;}
	footer .left_box,footer .right_box{width: 100%;}
	footer .left_box{padding-top: 2em; border: 1px solid var(--border-color); border-width: 1px 0 0 0;margin-top: 3em;}
	footer .left_box .flex{justify-content: center;}
	footer .left_box p{text-align: center;}
	
	footer .account a{font-size: .9em; margin-right:1em;}
}


.bnr_gallery{width: 90%; margin: 5em auto 0; max-width: 800px;display: block;}
.survey a{position: fixed; left: 10px; bottom: 10px; border-radius: 1000px; background: #fe904d; color: #fff;text-decoration: none; z-index: 100;padding: 1.2em 1em 1em; box-shadow: 0 0 10px #fff; width: 100px ; height: 100px; text-align: center;line-height: 1.2; font-size: .7em;}

@media screen and ( max-width:768px ) {
	.survey a{background: #fe904d; color: #fff;text-decoration: none; z-index: 100;padding: 1em 1em; box-shadow: 0 0 10px #fff; width: calc(100% - 20px);text-align: center; height: auto;}
}