@charset "utf-8";

html {
	overflow-y:scroll;
  	scroll-behavior: smooth;
}

/*@font-face {
  font-family: 'MyFont';
	src: url('RoNOWStd-MM.eot');
	src: url('RoNOWStd-MM.woff');
	src: url('RoNOWStd-MM.ttf');}
*/
body{
	background-color:#03070a;
	/*background: linear-gradient(rgba(0, 0, 0, 0) 1%,rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0)), url("../images/sand.jpg") repeat-y;*/
	
}

#redbg{
	background: linear-gradient(rgba(0, 0, 0, 0) 1%,rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0)), url("../images/sand.jpg") repeat-y;
}

a:link { color: #FFF; }
a:visited { color: #FFF; }
a:hover { color: #FFDF87; }
a:active { color: #FFF; }

a {
    outline: none;
	text-decoration: none;
}


.spmenu{ display:none;}


@media screen and (max-width:960px){

.pcmenu{display:none;}
.spmenu{display:inherit;}

}



/*header設定*/
#header{
	
	background: rgba(30, 30, 30, .2) radial-gradient(rgba(30, 30, 30, .3) 70%, transparent 70%);
	background-size: 5px 5px;
	
	/*background: linear-gradient(rgba(255, 255, 255, 0.5) 1%,rgba(255, 255, 255, 0.5) 10%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.5));*/
    position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
    height: 30vh;/*高さを全画面にあわせる*/
	padding: 250px 0;
} 

#video-area{
    position: absolute;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
	
}

#video {
	
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}

.gaiyoubox{
	width: 820px;
	position: absolute;
   top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);	
	
}

.gaiyoumds{
	color: #FFF;
	font-size: 250%;
	font-weight: bold;
    text-shadow: 0 0 10px #000;
	margin-bottom: 30px;
	
}

.big{
	font-size: 2em;
}

.gaiyoutxt{
	color: #FFF;
	font-size: 250%;
	text-align: left;
    text-shadow: 0 0 5px #000;
}


#ttl{
	position: absolute;
	top:13%;
	left: 3%;
}


.topcopy{
	font-size: 3em;
	text-align: center;
	font-weight: bold;
	color: #FFF;
	font-family:'MyFont Script';
    text-shadow: 0 0 10px #000;
}

#storybg{
	position: relative;
	width: 100%;
	background: url("../images/story_bg.jpg") left center / cover no-repeat;
	margin: 0px 0 0;
	text-align: center;
	z-index: 1;
	padding: 80px 0;
}

#shantae_story{
	float: right;
	width: 750px;
	font-size: 1.9em;
	font-family:'MyFont Script2';
	line-height: 1.8em;
	color: #FFF;
	text-align: left;
	padding-right: 5%;
	text-shadow: 2px 2px 10px #4e25a5 ,
	-2px 2px 10px #4e25a5 ,
	2px -2px 10px #4e25a5 ,
	-2px -2px 10px #4e25a5;


}

.ybig{
	color: yellow;
	font-size: 1.3em;
}

.wbig{
	/*color: yellow;*/
	font-size: 1.5em;
}

.gyotxt{
	margin-bottom: 20px;
}

#bg01{
	position: relative;
	width: 100%;
	background: linear-gradient(rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0.6)),url("../images/bg1.jpg") center center / cover no-repeat fixed;

	margin: -10px 0 0;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 20px;
	z-index: 1;
}

#bg02{
	position: relative;
	width: 100%;
	background: linear-gradient(rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0.6)),url("../images/bg2.jpg") center center / cover no-repeat fixed;

	margin: -10px 0 0;
	text-align: center;
	padding-top: 10px;
	z-index: 1;
	padding-bottom: 80px;
}

#bg03{
	position: relative;
	width: 100%;
	background: linear-gradient(rgba(0, 0, 0, 0.6) 20%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0.6)),url("../images/bg3.jpg") center center / cover no-repeat fixed;

	margin: -10px 0 0;
	text-align: center;
	padding-top: 10px;
	z-index: 1;
	padding-bottom: 80px;
}


#shantae2nd > div{
		position: relative;
	width: 100%;
	margin: 0 auto;

}




/*div{
	text-align:center;
}*/
img{
	vertical-align:top;
}

/*ギャラリー*/



.gallery_main{
	position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
	padding: 10px 0 0;

}

.gallery_main img{
	border: rgba(255, 255, 255, .9) 2px solid;
}


.resizeimage img {
	position: relative;
	width: 100%;
	z-index: 10;
}


#cate{
	background-color: rgba(50,5,133,0.9);
	width:100%;
/*	padding-top:2px;
	padding-bottom:2px;*/
    position: fixed;
    top: 0;
    right:0;
	/*margin-bottom:30px;*/
	padding-top: 19px;
	padding-bottom: 12px;
	z-index: 10;
}

.cate_space{
	margin-left: 40px;
}


#kounyu a{
	/*margin-right: 20px;*/
	background: #000;
	padding: 5px 15px;
	color: #FFDF87;
	border: solid 1px #FFDF87;
	font-weight: bold;
}

#kounyu a:hover{
	color: #000;
	background: #FFDF87;
	transition:all 1.0s;
}


.buy{
	font-weight: bold;
	background-color: #31BD29;
	color: #FFF;
	padding: 10px 19px 10px 15px;
	margin-left: 30px;
}

.buy a:hover{color: #fff;}

h1 {
　　font-size: 36px;
　　color: #FFF;
　　background-color: #222;
　　text-align: center;
　　padding: 5px;
}


#navi {
　　position:absolute;
　　height:60px;
　　z-index:1;
　　width: 100%;
　　background-color: #222;
	text-align:center;
	color:#fff;
	margin:0.5em;
	font-size:160%;
	vertical-align:middle;
}

#navi a{
	margin-left: 5px;
}


.u_line{
   text-decoration: none;
   border-bottom: 1px solid #FFF;
   padding-bottom: 0.3px;
   }

.spec_left{
	float:left;
	}


.red{
	color: #FE6534;
	font-weight: bold;
}

.tokucho{
	width: 860px;
	text-align: left;
	margin: 0 auto;
/*	margin-left: 20px;
*/}

.space{
	margin: 20px 0;
}

/*コピーライト*/

#tenpo{
	width: 960px;
	text-align:center;
/*margin-top:30px;*/
padding-top:10px;
padding-bottom:10px;
	margin-right: auto;
	margin-left: auto;

}

#shop_kounyu{
	color: #FFF;
	text-align: center;
	font-size: 270%;
	font-weight: bold;
	margin-bottom: 10px;
}

#shop_list{
	width: 100%;
	margin: 0px auto;
	text-align: center;

	padding-top: 40px;
	padding-bottom: 50px;
}

#shop{
	text-align: center;
	margin: 50px 0 0px;
}

#shop a{
	margin-bottom: 10px;
}

.bottom_spc{
	margin-bottom: 5px;
}

#footer{
	width: 100%;
	background: #333300;
	padding-bottom: 30px;
	border-bottom: #f6f4c6 solid 2px;
	border-top: #f6f4c6 solid 2px;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5d5d5d+0,5d5d5d+50,5d5d5d+100&0.1+1,1+25,1+75,0.1+100 */
/* IE6-9 */
}

#inc_logo{
	width: 960px;
	height: 60px;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    layout-grid-line:200px;
	padding-bottom: 0px;
	padding-top: 20px;
}

#inc_logo img{
    vertical-align:middle;
}

#inc_logo img{
    vertical-align:middle;
}


.logo_space{
	margin-left: 30px;
}


#copy{
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	margin-top:20px;
	margin-bottom:20px;
	color:#fff;
	font-size:90%;
	text-align: center;
}

/*ギャラリー*/


.ss_img{
	margin-bottom: 7px;
}

/*.ss_space{
	margin-left: 10px;
}*/

.gallery_img{
	margin-bottom: 10px;
	/*background-color: #FFF;*/
}

.gallery_img2{
	margin-left: 10px;
}


.ss_img{
	margin-bottom: 7px;
}

.ss_space{
	margin-left: 7px;
}






#specbg{
	position: relative;
	width: 100%;
	/*height: 500px;*/
	background: linear-gradient(rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0.7)),url("../images/specbg.jpg") center center / cover no-repeat;
	padding: 60px 0 80px;
}

.spec1main{
	color: #FFF;
	width: 880px;
	margin: 0 auto;
	padding: 40px 0 20px;
	text-align: left;
	/*font-family:'MyFont Script2';*/
}

.speccntttl{
	color: #FFF;
	font-size: 150%;
	font-weight: bold;
	margin-top: 20px;
	height: 60px;
}

.specttl{
	background: #B41E23;
	color: #FFF;
	font-size: 180%;
	margin-bottom: 5px;
	/*font-weight: bold;*/
	text-align: center;
	padding: 10px 0;
}

.specttl2{
	background: #3A7FA8;
	color: #FFF;
	font-size: 180%;
	margin-bottom: 5px;
	/*font-weight: bold;*/
	text-align: center;
	padding: 10px 0;
}

.specbkg{
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	padding: 0px 0 0;

}

.spectext{
	font-size: 160%;
	margin-bottom: 15px;
	border-bottom: #FFF solid 1px;
	padding-bottom: 10px;
}

.spectextbgx{
	font-size: 160%;

}


dl {
list-style:none;
	font-size: 150%;
	margin-bottom: 15px;
}

.dl_bd{
	border-bottom: #FFF solid 1px;
}

ul {
list-style:none;
	font-size: 160%;
	margin-bottom: 15px;
}

/*li{
	border-bottom: #FFF solid 1px;

}*/

.li_bd{
	border-top: #FFF solid 1px;
	padding-top: 10px;
}

.li_bd2{
	border-top: #FFF solid 1px;
	padding-top: 10px;
	border-bottom: #FFF solid 1px; 
}


.specbd{
	margin-top: 10px;

}

span.dan {
	float:left;
	width: 9em;
	background: #FFF;
	margin: 0 0 10px;
	color: #000;
	/*font-weight: bold;*/
	text-align: center;
	
}

span.dan2 {
	display: block;
	margin-left: 110px;
	margin: 0 0 10px;
}

span.dan3{
	float:left;
	width: 9em;
	height: 3em;
	display: flex;
  justify-content: center;
  align-items: center;
	background: #FFF;
	margin: 0 0 10px;
	color: #000;
	/*font-weight: bold;*/
	text-align: center;
	
}

#shop{
	text-align: center;

	margin: 50px 0 0px;
}

#shop a{
	margin-bottom: 10px;
}





#smain{
	width: 850px;
	margin: 0 auto;
}

#stext{
	/*float: left;*/
	color: #FFF;
	margin-left: 10px;
}





#toplogo{
	float: left;
	text-align: left;
	margin-left: 25px;
	padding-top: 5px;
}

#ccnt{
	float: right;
	text-align: center;
	margin-right: 25px;
	margin-top: 17px;
}

#ccnt a:hover{
	transition:all 1.0s;
}

.btna a:hover{
	transition:all 1.0s;
}

#cate div{
    vertical-align:middle;
}

#t_main{
	text-align: center;
	width: 960px;
	padding-top: 50px;
	padding-bottom: 50px;
	margin: 0px auto;
}

ul {
list-style:none;
	font-size: 160%;
	margin-bottom: 15px;
}

li{
	border-bottom: #FFF solid 1px;
}

.li_bd{
	border-top: #FFF solid 1px;
	padding-top: 10px;
}

.specbd{
	margin-top: 10px;

}

span.dan {
	float:left;
	width: 10em;
	background: #FFF;
	margin: 0 0 10px;
	color: #000;
	font-weight: bold;
	text-align: center;
	
}

span.dan2 {
	display: block;
	margin-left: 110px;
	margin: 0 0 10px;
color: #FFF;
}

span.dan3{
	float:left;
	width: 10em;
	height: 3em;
	display: flex;
  justify-content: center;
  align-items: center;
	background: #FFF;
	margin: 0 0 10px;
	color: #000;
	font-weight: bold;
	text-align: center;
	
}


@font-face {
  font-family: 'MyFont Script';
  font-style: normal;
  font-weight: 400;
  src: url("../font/RoGSanSrfStd-Bd.otf") format('woff');
}


@font-face {
  font-family: 'MyFont Script2';
  font-style: normal;
  font-weight: 400;
  src: url("../font/A-OTF-SoftGoStd-Medium.otf") format('woff');
}




.bsmds{
	padding: 50px 0 0px;

}

.bstxt{
	width: 58%;
	padding: 0px 0 50px;
	color: #FFF;
	font-size: 270%;
	text-align: left;
	margin: 0 auto;

}


.bstxt2{
	width: 58%;
	padding: 0px 0 50px;
	color: #FFF;
	font-size: 220%;
	text-align: left;
	margin: 0 auto;

}


.mdsst{
	font-size: 1.4em;
}

.mdsst2{
	font-size: 1.2em;
}


.boxmain{
	width: 100%;
display:flex;
justify-content: center;	
}


.boxmain img{
	border: #dfcbb3 2px solid;
}

.boxleft{
	float: left;
	width: 42%;
}

.boxright{
	float: left;
	width: 42%;
}

.boxtxt{
	color: #FFF;
	font-size: 2.3em;
	line-height: 1.5em;
	text-align: left;
	width: 90%;
	margin-left: 3%;
	margin-top: 20px;
	/*font-family:'MyFont Script';*/
	margin-inline: auto;
  max-inline-size: max-content;
}

.redtxt{
	color: #ff6347;
}

.imgspc{
	margin-left: 3%;
}

.imgspc2{
	padding-bottom: 3%;
}


/*表*/

.mainbox{
	font-size: 180%;
	margin-bottom: 70px;
	margin-top: 20px;
}

.mainbox section{
	width: 70%;
	margin: 0 auto;
}

.flex-row {
  display: flex;
  gap: 4px;
}

.flex-row+.flex-row {
  margin-top: 4px;
}

.flex-item {
  background: #dfcbb3;
  padding: 4px;
	display: flex;
  align-items: center;
}

.flex-item:nth-child(1) {
  width: 250px;
	display:flex;
	text-align: left;
  	align-items: center;
	padding-left: 20px;
	background: #754e20;
	color: #FFF;

}

.flex-item:nth-child(2) {
  flex: 2;
	text-align: left;
	padding: 10px;
}

.flex-item:nth-child(3) {
  flex: 1;
}

.stred{
	color: #dc143c;
}

.stred_b{
	color: #dc143c;
	font-weight: bold;
}

.stbl_b{
	font-weight: bold;
	margin-bottom: 15px;
}


img.middle { vertical-align: middle; }


/*ヒント*/
.wp_area{
	width: 92%;
	margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;	
	
	
}

.wp_area img{
	border: #dfcbb3 2px solid;
}


.wp_boxL{
	float: left;
	width: 45%;
	margin-left: 5%;
}

.wp_boxR{
	float: right;
	width: 40%;
	color: #FFF;
	font-size: 180%;
	margin-right: 5%;
	margin-left: 3.5%;
	text-align: left;
}

.hint_mds{
	font-size: 130%;
	font-weight: bold;
	padding-bottom: 10px;
	color: #ffcc66;
}