/*

メインテキスト　#5A5A5A
差し色　#AB101D
背景　#fff
*/

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

img {height: auto;}
.flash-messages{display: none;}
/*-----------
commone
-----------*/
/*flex box*/
#actmode_ray .flex{display: flex;}
#actmode_ray .mleft{margin-left: auto;}
#actmode_ray .mright{margin-right: auto;}
#actmode_ray .mtop{margin-top: auto;}
#actmode_ray .mbottom{margin-bottom: auto;}

#actmode_ray section{max-width: 1200px; width: 95%; margin: 0 auto; position: relative;}
#actmode_ray article{overflow: hidden;padding: 5em 0 0;}


@media screen and ( max-width:768px) {
	#actmode_ray section h3{font-size: 2em;}
 }

 @media screen and ( max-width:500px) {
	#actmode_ray section h3{font-size: 1.5em;}

 }


/*btn*/
#actmode_ray .btn{ padding:0;margin-bottom: 0;font-size: 14px;line-height: 1;
color: #fff;text-shadow: none;background:none; border: none; display: inline;position: relative;z-index: 5;}
#actmode_ray .btn a {display: block; background: #474645;color: #fff; text-decoration: none; width: 95%; max-width: 600px; margin: 0 auto; font-size: 2.5em; text-align: center;border: 2px solid #474645; box-sizing: border-box; transition: all 0.2s linear;padding: 0.5em 0 0.5em; line-height: 1;cursor: pointer; text-align: center;font-weight:600;position: relative;}
#actmode_ray .btn a span{font-size: 50%; font-weight: 300;}
#actmode_ray .btn a:hover {background: #fff;color:#474645;}
#actmode_ray .btn a::after,
#actmode_ray .btn a::before{content: ""; display: block; width: 60px; height: 60px; position: absolute; border:2px solid #474645;}
#actmode_ray .btn a::after{top: -10px; left: -10px; border-right: none; border-bottom: none;}
#actmode_ray .btn a::before{bottom: -10px; right: -10px; border-left: none; border-top: none;}


@media screen and ( max-width:900px) {
	#actmode_ray .btn a{font-size: 1.8em;}
	#actmode_ray .btn a::after,
	#actmode_ray .btn a::before{width: 30px; height: 30px; border: 1px solid #474645;}
	#actmode_ray .btn a::after{ border-right: none; border-bottom: none;}
	#actmode_ray .btn a::before{border-left: none; border-top: none;}
	
 }
@media screen and ( max-width:768px) {
	#actmode_ray .btn br {display: block;}
 }

/* @media screen and ( max-width:800px) {
	#actmode_ray .btn a{font-size: 1.8em;}
	#actmode_ray .btn a::after,
	#actmode_ray .btn a::before{width: 30px; height: 30px;}
	
 } */

/*-----------
body
-----------*/
#actmode_ray{width: 100%; background: #fff;background-position: center 0; color: #474645;overflow: hidden; font-size: 1.5em; font-family: 'Noto Sans JP', sans-serif; font-weight: 300;}
#actmode_ray.fixde{background-position: center 149px;}

@media screen and ( max-width:768px) {
	#actmode_ray{position: relative; font-size: 1.2em; background-image: none;background-repeat: no-repeat;padding-top: 26px;}
}

/* ----------
TOP 
---------- */
/*top*/
#actmode_ray #top{position: relative; padding:0 ; z-index: 10;background: url(../images/bg_top.png) right top no-repeat; background-size: contain;}
#actmode_ray #top::after,
#actmode_ray #top::before{content: ""; display: block; position: absolute; left: 0;background:#474645; z-index: 2;width: 100%; }
#actmode_ray #top::after{bottom: -167px; height: 167px;}
#actmode_ray #top::before{bottom: -167px; height: 42px; border-top: 10px solid #fff;z-index: 10;}

#actmode_ray #top .left{width: 40%;position: relative; padding: 0 5% 3% 10%;box-sizing: border-box;}
#actmode_ray #top .left .bg_top{position: absolute; left: 31.5%; top: 0; width: 50%; height: 100%; background: #EDEDED; z-index: 1;}
#actmode_ray #top .left .bg_top::after,
#actmode_ray #top .left .bg_top::before{content: ""; display: block; width: 10px; height: 100%; position: absolute; top:0; background: #EDEDED;}

#actmode_ray #top .left .bg_top::after{right: -15px;}
#actmode_ray #top .left .bg_top::before{left: -15px;}

#actmode_ray #top .left .box.flex{ position: relative;z-index: 10; flex-wrap: wrap; flex-direction: column;justify-content: center;}
#actmode_ray #top .left .box h1{padding: 0; line-height: 0; width: 100%;margin: 3% auto 0;}
#actmode_ray #top .left .box h2{text-align: center; margin: 0.2em 0 0; padding: 20% 0 0;}
#actmode_ray #top .left .box .btn a{margin-top: 10%; width: 100%; font-size: 2vw;line-height: .8;}
#actmode_ray #top .left .box .logo_sacred{width: 35%; max-width: 276px; margin: 20% auto 0; display: block;}
#actmode_ray #top .left .box .sns{width: 100%; justify-content: center;}
#actmode_ray #top .left .box .sns a{margin: 4% 1% 0; width: 40px;}

#actmode_ray #top .inner figure{width: 35%; max-width: 820px; position: absolute; left:40%; top: 0; z-index: 10; margin: 0;}



@media screen and ( max-width:1000px) {
	#actmode_ray #top::after{bottom: -120px; height: 120px;}
	#actmode_ray #top::before{bottom: -120px; height: 40px; border-top: 8px solid #fff;z-index: 10;}
	#actmode_ray #top .inner figure{width: 38%;}
	
 }


 @media screen and ( max-width:800px) {
	#actmode_ray #top .left .box h2{padding-top: 15%;}
	#actmode_ray #top::after{bottom: -80px; height: 80px;}
	#actmode_ray #top::before{bottom: -80px; height: 25px; border-top: 5px solid #fff;z-index: 10;}
	#actmode_ray #top .inner figure{width: 40%;}
	#actmode_ray #top .left .box .logo_sacred{margin-top: 15%;}
	#actmode_ray #top .left .box .sns a{margin: 4% 2% 0; width: 30px;}
 }


 @media screen and ( max-width:600px) {
	#actmode_ray #top{background:#fff;}
	#actmode_ray #top .inner{display: flex; flex-direction: column-reverse; align-items: center;padding-bottom: 5%;}
	#actmode_ray #top .left{padding:0;width: 80%; margin: -20% 0 0 0; z-index: 20;}
	#actmode_ray #top .left .box{padding: 0;
		}
	#actmode_ray #top .left .box h2{padding: 0; line-height: 1;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+11,ffffff+100&0+0,1+11,1+100 */
		background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */}
	#actmode_ray #top .left .box .btn a{font-size: 2em; margin-top: 6%;}
	#actmode_ray #top .left .bg_top{display: none;}
	#actmode_ray #top .inner figure{width: 80%; position: relative; top: auto; left: auto;}
	.bg_sp{display: block; position: absolute; top: 0; left: 25%; width: 50%; height: 100%; background: #EDEDED;}
 }


/* ----------
 release_text
---------- */
#actmode_ray #release_text{padding: 300px 0 10%;}
#actmode_ray #release_text h3{text-align: center;font-size: 1.2em;font-weight: 600;}
#actmode_ray #release_text p{text-align: center; font-size: .8em; margin: 1em 0 0;}

@media screen and ( max-width:1000px) {
	#actmode_ray #release_text{padding-top: 250px;}
 }

 @media screen and ( max-width:800px) {
	#actmode_ray #release_text{padding-top: 180px;}
 }
 @media screen and ( max-width:800px) {
	#actmode_ray #release_text p{text-align: center;}
 }


/* ----------
 TOP SLIDER
---------- */


/* ----------
wasp
---------- */
#actmode_ray section#wasp,
#actmode_ray section#prf{width:100%; max-width: 100%;}

#actmode_ray section#wasp{margin: 10% 0 0;}
#actmode_ray #wasp .flex{align-items: flex-end; max-width: 1200px; width: 95%; margin: 0 auto; position: relative; z-index: 5;}
#actmode_ray #wasp .box{ margin: 0 0 0 2%; position: relative;}
#actmode_ray #wasp .box:first-child{margin-left: 0;}
#actmode_ray #wasp .box:first-child::after,
#actmode_ray #wasp .box:last-child::after{content: "";display: block; height: 0; width: 0; position: absolute; border:20px solid transparent;  border-left: 20px solid #BCEF7C;  bottom:45%;}
#actmode_ray #wasp .box:first-child::after{right: -30px;}
#actmode_ray #wasp .box:last-child::after{left: -30px;}
#actmode_ray #wasp figcaption{font-weight: 600; text-align: center;}

#actmode_ray #wasp .bg_wasp{position: absolute; top: 20%;width: 100%; height: 300px;background: #EDEDED; z-index: 1;}
#actmode_ray #wasp .bg_wasp::after,
#actmode_ray #wasp .bg_wasp::before{content: "";display: block; width: 100%; height: 35px; position: absolute;left: 0;background: #EDEDED;}
#actmode_ray #wasp .bg_wasp::after{border-top: 7px solid #fff; bottom: 0;}
#actmode_ray #wasp .bg_wasp::before{border-bottom: 7px solid #fff; top:0;}

@media screen and ( max-width:1000px) {
	#actmode_ray #wasp .bg_wasp{height: 200px;}
	#actmode_ray #wasp .bg_wasp::after,
	#actmode_ray #wasp .bg_wasp::before{height: 30px;}
 }


@media screen and ( max-width:800px) {
	#actmode_ray #wasp .bg_wasp{height: 150px;}
	#actmode_ray #wasp .bg_wasp::after,
	#actmode_ray #wasp .bg_wasp::before{height: 28px;}
	#actmode_ray #wasp .bg_wasp::after{border-top: 5px solid #fff;}
	#actmode_ray #wasp .bg_wasp::before{border-bottom: 5px solid #fff;}
	#actmode_ray #wasp figcaption{font-size: .9em;}
 }

 @media screen and ( max-width:600px) {
	
	#actmode_ray section#wasp{margin: 0; padding-top: 20%; padding-bottom: 5%;/*  padding-bottom: calc(20% + 200px); */}
	#actmode_ray #wasp .flex{width: 70%; flex-direction: column;align-items: center;}
	#actmode_ray #wasp .box{margin: 0 0 50px 0;}
	#actmode_ray #wasp .box:first-child,
	#actmode_ray #wasp .box:last-child{width: 80%;}
	#actmode_ray #wasp .box:first-child::after,
	#actmode_ray #wasp .box:last-child::after{left: calc(50% - 20px); right: auto; border:20px solid transparent;  border-top: 20px solid #BCEF7C; bottom:auto;}
	#actmode_ray #wasp .box:first-child::after{bottom: -57px;}
	#actmode_ray #wasp .box:last-child::after{top: -40px;}

	#actmode_ray #wasp .bg_wasp{width: 50%; height: 100%; top: 0; left: 25%;}
	#actmode_ray #wasp .bg_wasp::after,
	#actmode_ray #wasp .bg_wasp::before{content: "";display: block; width: 35px; height: 100%; position: absolute;left: auto; background: #EDEDED;}
	#actmode_ray #wasp .bg_wasp::after{border-left: 7px solid #fff; border-top: none; bottom:0; right: 0;}
	#actmode_ray #wasp .bg_wasp::before{border-right: 7px solid #fff; border-bottom: none; left: 0; top:0;}
}



/* ----------
prf
---------- */
#actmode_ray #prf{position: relative; padding: 0; margin: 15% 0 0 0;}
#actmode_ray #prf .bg_prf{background: url(../images/bg_prf.png) no-repeat; background-size: 100% auto; background-position: bottom; width: 100%; height: 60%; display: block; position: absolute; z-index: 1; bottom: 10%;}
#actmode_ray #prf .inner{position: relative; z-index: 3; align-items: center; width: 90%; max-width: 1200px; margin: 0 auto;}
#actmode_ray #prf .prfimg{width: 40%; max-width: 484px;}

#actmode_ray #prf .text_box{position: relative; z-index: 5;text-shadow: 0px 0px 5px rgba(255,255,255,1),0px 0px 5px rgba(255,255,255,1),0px 0px 5px rgba(255,255,255,1);}
#actmode_ray p{position: relative; z-index: 10; font-size: .8em;}
#actmode_ray .name{font-weight: 600; font-size: 1.1em;}


 @media screen and ( max-width:100px) {
	#actmode_ray #prf .bg_prf{ bottom: 20%;}
}

 @media screen and ( max-width:600px) {
	#actmode_ray #prf{width:100%; max-width: 100%;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+10,1+100 */
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	z-index: 20; position: relative; margin-top: -10%;padding-top: 13%;
	}
	#actmode_ray #prf .prfimg{width: 60%;}
	#actmode_ray #prf .bg_prf{bottom: 0; height: 80%;}
	#actmode_ray #prf .inner.flex{flex-direction: column;}
	#actmode_ray #prf .text_box{padding: 0 5% 5%; width: 90%; margin: -10% auto 0;}

}
/* ----------
リリースカット・リリーステキスト
---------- */
#actmode_ray #release{width: 100%; max-width: 100%; background-size: cover;padding: 0 0 10%; margin: 20% 0 0;}
#actmode_ray #release .flex{align-items: flex-start; width: 95%; max-width: 1500px; margin: 0 auto;justify-content: space-between;}
#actmode_ray #release h3,#actmode_ray #release p{text-shadow: none;}

@media screen and ( max-width:768px) {
	#actmode_ray #question .prf {width: 100%; max-width: 100%;}
 }

/*slider*/
#actmode_ray .slider_wrap {width: 40%; margin: 0;}
#actmode_ray .thumb {margin-top: 1em;}
#actmode_ray .thumb .inner{padding: 2px;}
#actmode_ray .thumb li{ margin:0.2em;}
#actmode_ray .thumb li img{width: 100%; height: auto;}
#actmode_ray #release .slick-slide{cursor: pointer;}
#actmode_ray .slider li,#actmode_ray .thumb li{border:1px solid #000;box-sizing: border-box;}
#actmode_ray .thumb li.slick-current{border:1px solid #000;}
#actmode_ray .thumb .slick-arrow{display: none!important;}
#actmode_ray .slider .slick-list.draggable{width: 100%; margin: 0 auto;}
#actmode_ray .thumb .slick-list.draggable{width: 100%; margin: 0 auto;}
#actmode_ray .font-note{margin-top: 1em;}
#actmode_ray .small.font-note{font-size: 1em; margin-top: 0.5em;}
#actmode_ray .thumb li p{margin: 0.2em 0 0;font-size: 80%;}
/* #actmode_ray .thumb li p.deku a{color: #ff7e00;}
#actmode_ray .thumb li p.bakugou a{color: green;} */

@media screen and ( max-width:768px) {
	#actmode_ray .slider_wrap {width: 100%;}
 }


/*spec*/

#actmode_ray #release .spec{justify-content: space-between; margin: 0 0 5em;flex-wrap: wrap;align-items: stretch; position: relative;font-size: 0.8em;box-sizing: border-box; width: 58%; padding-left: 2%;}

#actmode_ray #release .line{display: flex; width: 100%;position: relative; box-sizing: border-box;}
#actmode_ray #release .ttl{box-sizing: border-box; padding: 0.4em 0.4em 0.3em;align-self: stretch; color: #595757; width: 120px;display: flex;justify-content: left;font-weight: 500; font-size: 0.9em; /* border-right:2px solid #595757; */}
#actmode_ray #release .line.first .ttl,
#actmode_ray #release .line.first .detail{margin-top: 0;}
#actmode_ray #release .spec.en .ttl{width: 210px;}
#actmode_ray #release .detail{box-sizing: border-box; padding: 0.4em 0.4em 0.3em 1em;align-self: stretch; width: 100%; align-items: center; display: flex;font-weight: 200;line-height: 1.5; }
#actmode_ray #release .detail span{font-size: 0.8em;}
#actmode_ray #release .detail .sp{display: block;}

@media screen and ( max-width:768px) {
	#actmode_ray #release .flex{flex-wrap: wrap; width: 95%; margin: 0 auto;}
	#actmode_ray #release .spec.flex{width: 100%; margin-top: 1em;}
	#actmode_ray #release .line{width: 100%;}
	#actmode_ray #release .spec_area .img_spec{opacity: 0.6;position: absolute;bottom: 25%;right: -18%;width: 91%;}
	#actmode_ray #release .detail .sp{display: block;}
}


/*reserve*/
#actmode_ray #reserve{width: 95%; max-width: 1500px; margin: 0 auto;}
#actmode_ray #release #reserve .txt,
#actmode_ray #release #reserve .txt a{font-size: 1.4em; text-align: center; font-weight: 800; line-height: 1.4;margin: 0.5em 0 0; text-decoration: none; color: #AB101D;}
#actmode_ray #release #reserve .txt.partner_btn{font-size: 1em; margin-top: 2em;}
#actmode_ray #release #reserve .txt a{font-size: 1.1em; margin-top: 2%;}
#actmode_ray #release #reserve .txt.partner_btn.en a{font-size: .6em;/*  margin-top: 2em; */ line-height: 1;}
#actmode_ray #release #reserve .txt.partner_btn.en a br{display: block;}
#actmode_ray #release #reserve .txt a:hover{text-decoration: underline;}
#actmode_ray #release #reserve .txt span.gray{font-size: 0.8em; font-weight: 800; color: #474645;}
#actmode_ray #release #reserve .txt span.week{margin: 0 -.5em 0;}
#actmode_ray #release #reserve .txt.mini{line-height: .9;}
#actmode_ray #release #reserve .txt.mini span.gray{font-size: .5em; font-weight: 300; line-height: 1;}
#actmode_ray #release #reserve .txt span.gray.en{font-size: .6em;}
/* #actmode_ray #release #reserve .txt span.gray.en span{font-size: .5em;} */
#actmode_ray #release #reserve .btn a{margin-top: 3%;}

@media screen and ( max-width:768px) {
	#actmode_ray #release #reserve {margin-top: 3em;}
	#actmode_ray #release #reserve .txt br,#actmode_ray #release #reserve .txt_partner_btn br{display: block;}
	#actmode_ray #release #reserve .txt.partner_btn.en a br{display: block;}
}

@media screen and ( max-width:500px) {
	#actmode_ray #release .reserve .txt{font-size: 6.5vw;}
}

/* ----------
aside 
---------- */
#actmode_ray  aside .sns.flex{justify-content: center;}
#actmode_ray  aside .sns.flex a{margin: 0 0.3%; width: 40px;}
/* ----------
Footer 
---------- */
#footer{border: none; padding: 0; position: relative;}/*必須*/
#actmode_ray #footer{margin:0;padding:3em 0; border: none;box-sizing: content-box;background: #fff;}
#actmode_ray #footer p{color: #595757; text-align: center; font-size: 1.2em;}
#actmode_ray #footer .sns{width: 50%; max-width: 130px; justify-content: space-between; margin: 1em auto 0;}
#actmode_ray #footer .sns a{width: 49%;}

@media screen and ( max-width:768px) {
	#actmode_ray #footer p{font-size: 0.6em; width: 95%; margin: 0 auto;}
 }

/* ----------
  zh
---------- */


/* ----------
  en
---------- */