/*-------------------------------------
■ reset
-------------------------------------*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;font-weight:normal;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}ins{text-decoration:none}mark{font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}hr{display:block;height:1px;border:0;padding:0}input,select{vertical-align: middle}img{vertical-align:top;font-size:0;line-height:0}th{text-align:left}iframe{vertical-align:bottom}video{display:block}strong{font-weight:bold}

/*-------------------------------------
■ common
-------------------------------------*/
html,body{font-size:100%}
body{color:#fff;font-family:'游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;-webkit-text-size-adjust:100%;letter-spacing:-0.015em;background:#fff}
.sp_cts{display:none}
ins,mark{background:#ff9;color:#000}
img{width:auto;max-width:100%;height:auto}
hr{margin:1em 0;border-top:1px solid #ccc}
a{-webkit-tap-highlight-color:rgba(0,0,0,0);text-decoration:none;overflow:hidden;outline:none}
a:hover{text-decoration:none}
input,textarea,select,textarea,button{outline:none;border-radius:0;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
.clear{clear:both}
.clearfix{zoom:100%}
.clearfix:after{content:"";clear:both;display:block}
.box{-webkit-box-sizing:border-box;box-sizing:border-box}
.mt_10{margin-top:10px}.mt_20{margin-top:20px}.mt_30{margin-top:30px}.mt_40{margin-top:40px}.mt_50{margin-top:50px}
.mb_10{margin-bottom:10px}.mb_20{margin-bottom:20px}.mb_30{margin-bottom:30px}.mb_40{margin-bottom:40px}.mb_50{margin-bottom:50px}
.left{float:left}
.right{float:right}

body,
.h_bg,
.top_main,
.p_top_main{
	min-width:1240px
}
.f_01{font-family: 'Spirax', cursive;}
.h_menu,
.title,
.cts_page .top_main_inner h1{
font-family:"游ゴシック体","Yu Gothic",YuGothic,Noto Sans Japanese,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif
}

.h_menu_sp,
.h_menu_content_sp,
#preview_sp{
	display:none;
}

.container{
	width:100%;
	position:relative;
	-webkit-box-sizing:border-box;box-sizing:border-box
}
.content{
	max-width:1240px;
	margin:0 auto;
	box-sizing:border-box;
	padding:0 20px;
}
.p_content{
}
article{
	margin:0 auto;
}
article.container{
	min-width:0;
}

.t_bg{
	height:100vh;
}
.h_bg{
	height:400px;
}
.h_bg video,
.t_bg video{
	position:fixed;
	/*top:50%;*/
	top:0;
	left:50%;
	min-width:100%;
	min-height:100%;
	width:auto;
	height:auto;
	z-index:-100;
	-moz-transform:translateX(-50%) translateY(-50%);
	-ms-transform:translateX(-50%) translateY(-50%);
	-webkit-transform:translateX(-50%) translateY(-50%);
	transform:translateX(-50%) translateY(-50%);
	background:#000;
	background-size:auto;
	background-size:cover;
	-webkit-transition:1s opacity;
	transition:1s opacity;
}

/*-------------------------------------
■ header
-------------------------------------*/
.top_main_inner h1.h_logo{
	width:320px;
	margin:20px auto;
}

/* header menu
--------------------------------*/
.menu{
	position:sticky;
	top:0;
	box-shadow:0 0 10px -5px rgba(0,0,0,1);
	background:rgba(46,34,16,1);
	z-index:999;
}
.menu ul{
	display:flex;
	margin:0 auto;
	padding:10px 0;
	max-width:1200px;
}
.menu ul li{
/*
	width:12.5%;
*/
	width:14.28571428571429%;
	border-left:1px solid #5b4524
}
.menu ul li:last-child{border-right:1px solid #5b4524}

.menu ul li a,
.menu ul li a span{
	display:block;
	text-align:center;
}
.menu ul li a{
	position:relative;
	padding:5px 0 10px;
}
.menu ul li a span.en{
	color:#ffbc57;
	font-weight:bold;
	text-transform:uppercase;
}
.menu ul li a span.jp{
	color:#fff;
	font-size:0.8rem;
	line-height:1;
}

.menu ul li a:after{
	content:'';
	position:absolute;
	left:50%;
	bottom:0;
	display:block;
	width:0;
	height:1px;
	background:#ff5385;
	transition:.4s;
}
.menu ul li a:hover:after{
	left:0%;
	width:100%;
}


/*-------------------------------------
■ content
-------------------------------------*/
main{
	padding:85px 0;
	background:#2E2210;
	position:relative;
}
main.main{
	padding:30px 0;
	background:#ebe8d5 url(../img/c_bg.jpg) fixed no-repeat center top;
	background-size:cover;
}
.main .inner{
	width:1200px;
	padding:20px;
	position:relative;
	backdrop-filter:blur(15px);
	background:linear-gradient(-45deg, rgba(0, 0, 0, 0.5),rgba(89, 25, 0, 0.5));
	box-shadow:0 0 10px -5px rgba(0,0,0,1);
}
.inner_bk{
	backdrop-filter:blur(15px);
	background:linear-gradient(-45deg, rgba(0, 0, 0, 0.5),rgba(89, 25, 0, 0.5));
	box-shadow:0 0 10px -5px rgba(0,0,0,1);
}

.c_l{width:300px}
.c_r{width:880px}

.top_main,
.p_top_main{
	position:absolute;
	left:0;
	top:0;
	display:table;
	width:100%;
	height:100%;
	background:linear-gradient(-45deg, rgba(0, 0, 0, 0.4),rgba(255, 204, 102, 0.25))
}
.p_top_main{height:400px}
.cts_page .top_main{
	height:500px;
}

.top_main_inner{
	display:table-cell;
	padding:0 20px;
	vertical-align:middle;
}
.top_main_inner h1{
	margin:30px 0;
	color:#fff;
	text-align:center;
}
.top_main_inner h1 .h_logo_img{
	max-width:500px;
	width:90%;
}


/* s list
--------------------------------*/
.s_list{
	display:flex;
	flex-wrap:wrap;
}

.sl_box{
	position:relative;
	width:23.95%;
	margin-right:1.4%;
	margin-bottom:1.4%;
}
.sl_box:nth-child(4n){
	margin-right:0;
}

.sl_s{
	position:relative;
	display:block;
	padding:10px;
}

.sl_s:after{
	content:"";
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:linear-gradient(-45deg, rgba(0, 0, 0, 1),rgba(89, 25, 0, 1));
	opacity:0;
	z-index:-1;
	transition:opacity .3s
}

.sl_s:hover:after{
	opacity:1;
}

.sl_img{
	position:relative;
	overflow:hidden;
	margin-bottom:5px;
}
.sl_img_bg{
	position:absolute;
	top:0;
	left:0;
	width:101%;
	height:101%;
	background-size:cover;
	transition:transform .3s;
}

.sl_img img{
	width:100%;
}
.sl_s:hover .sl_img_bg{
	transform:scale(1.25) rotate(-5deg);
}

.content p.sl_name{
	text-align:center;
	font-weight:bold;
	font-size:1.05rem;
	color:#ffbc57;
}
.content p.sl_name .sl_age{
	font-size:0.8rem;
	margin-left:5px;
}

.content p.sl_3{
	margin-bottom:2px;
	text-align:center;
	color:#fff;
	font-size:0.8rem
}

.content p.sl_time{
	text-align:center;
	color:#fff;
	background:#a87528
}

/* icon */
.icon_new{
	position:absolute;
	top:15px;
	left:-1px;
	width:70px;
}
.icon_s,
.icon_p,
.icon_b{
	position:absolute;
	top:257px;
	right:5px;
	width:40px;
}
.icon_twitter{
	position:absolute;
	top:257px;
	left:10px;
	width:40px;
}
.icon_rank{
	position:absolute;
	top:5px;
	right:5px;
	width:40px;
}

/*-------------------------------------
■ side
-------------------------------------*/
.twitter_w{
	padding:20px;
	margin-bottom:20px;
}
.twitter_i{
	margin-bottom:20px;
	background:#fff;
}
.twitter_i:last-child{
	margin-bottom:0;
}

.s_banner{
	display:block;
	margin-bottom:20px;
	transition:opacity .3s;
}
.s_banner:hover{
	opacity:.85
}

/* title
--------------------------------*/
.title_u{
	position:relative;
	max-width:750px;
	width:90%;
	padding:20px;
	margin:0 auto;
	color:#fff;
	background:linear-gradient(-45deg, rgba(0, 0, 0, 0.5),rgba(89, 25, 0, 0.5))
}
.title_u:after{
	content:"";
	position:absolute;
	top:10px;
	left:10px;
	width:calc(100% - 21px);
	height:calc(100% - 21px);
	border:1px solid #fff;
}
.title_u p{
	text-align:center;
	line-height:4rem;
}
.tu_b{
	font-size:3em;
}
.tu_s{
	font-size:30px;
}

.e_top_info{
	padding-bottom:85px;
}
.concept{
	padding:85px 20px;
	background:#000 url(../img/e_c_bg.jpg) no-repeat center center;
	background-size:cover;
}

.concept .content{
	padding:50px;
	position:relative;
	backdrop-filter:blur(15px);
	background:linear-gradient(-45deg, rgba(0, 0, 0, 0.5),rgba(89, 25, 0, 0.5));
	box-shadow:0 0 10px -5px rgba(0,0,0,1);
}

.e_cc_box{
	margin-bottom:50px;
}
.e_cc_box:last-child{
	margin-bottom:0;
}

.e_cc_box p:first-child{
	font-size:20px;
	padding-left:10px;
	line-height:1.2;
	margin-bottom:10px;
	border-left:3px solid #fff;
}

.b_title{
	position:relative;
	color:#ffbc57;
	text-align:center;
	font-size:30px;
	padding-bottom:20px;
	margin-bottom:20px;
}
.b_title:after{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	margin:0 auto;
	width:10px;
	height:10px;
	background:#fc9;
	transform:rotate(45deg)
}

.cb_title{
	position:relative;
	text-align:center;
	font-size:32px;
	margin-bottom:20px;
	text-shadow:2px 2px 5px rgba(55,55,55,.8)
}
h4.cb_title{
	font-size:26px;
	margin-bottom:10px;
}
.cb_title strong{
	display:block;
	color:#ffbc57;
	line-height:1.2;
	text-transform:uppercase;
}
.cb_title strong span{
	color:#ff5385;
}

.cb_title .s_jp{
	display:block;
	font-size:1.2rem;
}
h4.cb_title .s_jp{
	display:block;
	font-size:1rem;
}

.l_title{
	position:relative;
	padding:10px 0;
	margin-bottom:10px;
	text-align:center;
	font-weight:bold;
	color:#ff5385;
	z-index:1;
}

.l_title:after{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	margin:0 auto;
	width:10px;
	height:10px;
	transform:rotate(45deg);
	background:#ede6d4;
	z-index:-1;
}
.l_title:before{
	content:"";
	position:absolute;
	bottom:5px;
	left:0;
	width:100%;
	height:1px;
	background:#ede6d4;
	z-index:-1;
}

h4.cts_w_title{
	padding:20px 0 25px;
	position:relative;
	text-align:center;
	line-height:1.3;
	font-size:1.6rem;
}
h4.cts_w_title .cwt_st{
	display:block;
	font-size:1rem;
}
h4.cts_w_title:after{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	margin:0 auto;
	width:10px;
	height:10px;
	transform:rotate(45deg);
	background:#ede6d4;
	z-index:-1;
}
h4.cts_w_title:before{
	content:"";
	position:absolute;
	bottom:5px;
	left:0;
	width:100%;
	height:1px;
	background:#ede6d4;
	z-index:-1;
}
.cwtc_s{color:#ffbc57}
.cwtc_p{color:#ff5385}
.cwtc_b{color:#ffff00}

/* text
--------------------------------*/
.content p{
	font-size:100%;
	line-height:1.8;
}
.content p.m_text{
	font-size:1.2rem;
	text-align:center;
}
.content p.ibt_c{text-align:center}

.tu_text{
	text-align:center;
	margin-bottom:40px;
}
.note_t{
	color:#ff5385;
	text-shadow:2px 2px 5px rgba(55,55,55,.8);
}
.note_t2{
	color:#ffbc57;
	text-shadow:2px 2px 5px rgba(55,55,55,.8);
}


/* form
--------------------------------*/
input[type="text"],
input[type="date"],
select,
textarea{
	font-family:'游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;-webkit-text-size-adjust:100%;
	font-size:100%;
	outline:none;
	padding:5px 10px;
	width:100%;
	border:1px solid #ede6d4;
	background:#ede6d4;
	transition:border .3s , background .3s;
}
input[type="date"]{width:200px}
textarea{resize:vertical}
input[type="text"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus{
	border:1px solid #ffbc57;
	background:#fff
}



.fw_list{
	display:table;
	width:100%;
	border-bottom:1px solid #62543e;
}
.fw_list:last-child{
	border-bottom:0
}
.fw_title,
.fw_text{
	display:table-cell;
	padding:20px;
}
.fw_title{
	width:35%;
	color:#ffbc57;
	vertical-align:middle;
	background:rgba(46,34,16,1);
}
.fw_text{
	width:70%;
	background:rgba(46,34,16,.5);
}

.fw_must{
	display:inline-block;
	padding:0 6px;
	font-size:0.8rem;
	color:#fff;
	vertical-align:text-bottom;
	margin-left:10px;
	border-radius:2px;
	background:#ff5385
}


.fw_submit{
	text-align:center;
	padding:30px 0;
}
.button{
	font-family:'游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;-webkit-text-size-adjust:100%;
	outline:none;
	border:0;
	width:100%;
	max-width:260px;
	padding:10px 20px;
	border-radius:2px;
	font-weight:bold;
	font-size:1.2rem;
	cursor:pointer;
	background:linear-gradient(180deg, rgba(255, 188, 87, 1),rgba(198, 130, 28, 1));
	transition:opacity .3s
}
.button:hover{
	opacity:.85;
}

.t_pill{
	display:inline-block;
	width:49%;
	padding:2px 0;
	margin-right:2%;
	margin-top:2%;
	color:rgba(46,34,16,1);
	text-align:center;
	font-weight:bold;
	border-radius:100px;
	background:#ede6d4;
}
.t_pill:nth-of-type(2n){
	margin-right:0;
}
.t_pill:nth-of-type(1),
.t_pill:nth-of-type(2){
	margin-top:0;
}


/* flex
--------------------------------*/


/* Page top
--------------------------------*/
.pagetop{
	display:none;
	position:fixed;
	right:10px;
	bottom:10px;
	z-index:900;
}
.pagetop a{
	display:block;
	font-size:0;
	width:60px;
	height:60px;
	border-radius:100%;
	text-align:center;
	background:#2c0303;
	transition:opacity .3s;
}
.pagetop a:hover{
	opacity:.8
}

/*-------------------------------------
■ footer
-------------------------------------*/
footer{
	background:#18130A;
	background:linear-gradient(0deg, rgba(24, 19, 10, 1),rgba(46, 34, 16, 1))
}
.footer_w_under{
	padding:60px 0 40px;
}
.f_logo{
	margin:0 auto;
	display:block;
	max-width:200px;
	width:50%;
}
.f_info{
	padding:30px 0;
	color:#b7b2a9;
	text-align:center;
	font-size:14px;
}

footer small{
	margin-top:30px;
	text-align:center;
	display:block;
	font-size:14px;
	color:#999;
}

/* Up
--------------------------------*/

/* Under
--------------------------------*/





@media screen and (max-width:980px){
/*-------------------------------------
■ header
-------------------------------------*/
/*-------------------------------------
■ content
-------------------------------------*/
	main{
		padding:80px 0;
	}

/* title
--------------------------------*/
/*-------------------------------------
■ footer
-------------------------------------*/
/* Under
--------------------------------*/
}




@media screen and (max-width:767px){
	body,
	.h_bg,
	.top_main,
	.p_top_main{
		min-width:100%
	}
	.sp_cts{display:block}
	#preview{display:none}
	#preview_sp{
		display:inline;
		margin-bottom:20px
	}
/*-------------------------------------
■ header
-------------------------------------*/
	.sp_menu{
		position:fixed;
		top:5px;
		right:5px;
		z-index:1000;
	}

	.sp_menu_btn{
		width:46px;
		height:46px;
		background:#ffbc57;
		border-radius:100%;
		box-shadow:0 0 10px -3px rgba(0,0,0,1)
	}

	.smb_hum{
		display:block;
		position:absolute;
		top:22px;
		left:8px;
		width:30px;
		height:2px;
		background:#fff;
		transition:transform .2s;
		-webkit-backface-visibility:hidden;
		backface-visibility:hidden;
	}
	.smb_hum:before,
	.smb_hum:after{
		content:"";
		display:block;
		position:absolute;
		top:20px;
		left:0;
		width:30px;
		height:2px;
		background:#fff;
		transition:transform .3s;
		-webkit-backface-visibility:hidden;
		backface-visibility:hidden;
	}
	.smb_hum:before{margin-top:-12px}
	.smb_hum:after{margin-top:-28px}

	.sp_menu_btn_on .smb_hum{background:rgba(255,255,255,0)}
	.sp_menu_btn_on .smb_hum:before{
		-webkit-transform:rotate(-45deg);
		transform:rotate(-45deg);
		margin-top:-21px;
	}
	.sp_menu_btn_on .smb_hum:after{
		-webkit-transform:rotate(-135deg);
		transform:rotate(-135deg);
		margin-top:-21px;
	}


/* sp menu
--------------------------------*/
	.menu{
		position:fixed;
		width:100%;
		height:100%;
		box-sizing:border-box;
		padding:60px 0 90px;
		background:rgba(46,34,16,.9);
		left:110%;
		transition:transform .3s;
	}
	.menu ul{
		flex-direction:column;
		justify-content:space-around;
		padding:0;
		height:100%;
		
	}
	.menu ul li{
		width:100%;
		border:0;
	}
	.menu ul li:last-child{border:0}
	.menu ul li a::after{display:none}

	.sp_menu_container_on{
		transform:translateX(-110%);
	}


/*-------------------------------------
■ content
-------------------------------------*/
	main{
		padding:50px 0;
	}
	.cts_page .top_main{
		height:100%;
	}

	.concept{
		padding:50px 20px;
	}
	.concept .content{
		padding:20px;
	}

	.c_r,
	.c_l{
		width:100%;
		float:none
	}
	.c_l{
		max-width:600px;
		min-width:auto;
		margin:0 auto;
	}

/* s list
--------------------------------*/
	.sl_box{
		width:32%;
		margin-right:2%;
		margin-bottom:3%;
	}
	.sl_box:nth-child(4n){
		margin-right:2%;
	
	}
	.sl_box:nth-child(3n){
		margin-right:0;
	}

	.sl_s{
		padding:0
	}
	.content p.sl_name{
		font-size:0.75rem;
	}
	.content p.sl_name .sl_age{
		font-size:0.6rem;
	}
	.content p.sl_3{
		font-size:0.6rem;
	}
	.content p.sl_time{
		font-size:0.85rem;
	}

	.icon_new{
		top:5px;
		max-width:70px;
		width:40%;
	}
	.icon_s,
	.icon_p,
	.icon_b{
		position:absolute;
		top:auto;
		bottom:50px;
		max-width:40px;
		width:25%;
	}
	.icon_twitter{
		top:auto;
		left:5px;
		bottom:50px;
		max-width:40px;
		width:25%;
	}
	.sche_w .icon_s,
	.sche_w .icon_p,
	.sche_w .icon_b,
	.sche_w .icon_twitter{
		bottom:75px;
	}
	.icon_rank{
		top:2px;
		right:2px;
		max-width:40px;
		width:25%;

	}


/*-------------------------------------
■ side
-------------------------------------*/
	.twitter_i iframe{
		height:400px !important;
	}

/* title
--------------------------------*/
	.title_u{
		width:100%;
	}
	.title_u p{
		line-height:3rem;
	}
	.tu_b{
		font-size:2em;
	}
	.tu_s{
		font-size:4vw;
	}

	.cb_title{
		font-size:26px;
	}
	.cb_title .s_jp{
		font-size:1rem;
	}

/* form
--------------------------------*/
	.fw_list,
	.fw_title,
	.fw_text{
		display:block;
		width:100%;
	}
	.fw_list{
		border:0;
	}
	.fw_title{
		padding:10px 20px;
		border-left:3px solid #ffbc57
	}
	.fw_text textarea{
		height:150px;
	}

	.t_pill{
		width:100%;
		margin-right:0;
		margin-top:3%;
	}
	.t_pill:nth-of-type(2){
		margin-top:3%;
	}

/* Page top
--------------------------------*/
	.pagetop{
		display:none !important;
	}

/*-------------------------------------
■ footer
-------------------------------------*/
	.footer_w_under{
		padding-bottom:100px;
	}
	.f_menu{
		position:fixed;
		bottom:0;
		left:0;
		width:100%;
		box-shadow:0 0 10px -2px rgba(0,0,0,1);
		background: rgba(46,34,16,1);
		z-index:999999;
	}
	.f_menu ul{
		width:calc(100% - 60px);
		padding:10px 0;
	}
	.f_menu ul li{
		width:31.2%;
		margin-left:2%;
	}
	.f_menu ul li a{
		padding:4px 0;
		display:block;
		text-align:center;
		line-height:32px;
		color:#fff;
		border-radius:4px;
		background:#a87528
	}
	.f_menu ul li a img{
		margin-right:2px;
		width:30px;
	}

	.f_menu .sp_pagetop{
		width:40px;
		margin:10px 10px 0 0;
	}
	.f_menu .sp_pagetop a{
		display:block;
		border-radius:100%;
		background:#a87528
	}

/* Under
--------------------------------*/

}





@media screen and (max-width:480px){
	.top_main_inner h1.h_logo{
		width:85%;
	}
/*-------------------------------------
■ content
-------------------------------------*/
	.h_bg,
	.p_top_main{
		height:330px;
	}

/* text
--------------------------------*/
}