@charset "utf-8";

@font-face {
	font-family:'ShinGoPro';
	font-weight:normal;
	src:url('font/A-OTF-ShinGoPro-Light.woff') format('woff');
}
@font-face {
	font-family:'ShinGoPro';
	font-weight:bold;
	src:url('font/A-OTF-ShinGoPro-Medium.woff') format('woff');
}
@font-face {
	font-family:'ShinGoPro';
	font-weight:900;
	src:url('font/A-OTF-ShinGoPro-Bold.woff') format('woff');
}

:root {
	--siteWidth:560px;
	--headerHeight:60px;
	--bottomNavHeight:55px;

	--textColor:#5d5d5d;/* テキスト基本色 */


	--fontMincho:'Zen Old Mincho', serif;
	--fontNum1:'Amiri', serif;
	--decoText_black:
		-1px -1px 1px #000000,
		-1px -1px 1px #000000,
		-1px -1px 2px #000000,
		-1px -1px 2px #000000,
		-1px -1px 3px #000000,
		-1px -1px 3px #000000,
		-1px -1px 3px #000000,
		-1px -1px 3px #000000,
		-2px -2px 3px #000000,
		-2px -2px 3px #000000,
		-2px -2px 3px #000000,
		-2px -2px 3px #000000,

		1px -1px 1px #000000,
		1px -1px 1px #000000,
		1px -1px 2px #000000,
		1px -1px 2px #000000,
		1px -1px 3px #000000,
		1px -1px 3px #000000,
		1px -1px 3px #000000,
		1px -1px 3px #000000,
		2px -2px 3px #000000,
		2px -2px 3px #000000,
		2px -2px 3px #000000,
		2px -2px 3px #000000,

		1px 1px 1px #000000,
		1px 1px 1px #000000,
		1px 1px 2px #000000,
		1px 1px 2px #000000,
		1px 1px 3px #000000,
		1px 1px 3px #000000,
		1px 1px 3px #000000,
		1px 1px 3px #000000,
		2px 2px 3px #000000,
		2px 2px 3px #000000,
		2px 2px 3px #000000,
		2px 2px 3px #000000,

		-1px 1px 1px #000000,
		-1px 1px 1px #000000,
		-1px 1px 2px #000000,
		-1px 1px 2px #000000,
		-1px 1px 3px #000000,
		-1px 1px 3px #000000,
		-1px 1px 3px #000000,
		-1px 1px 3px #000000,
		-2px 2px 3px #000000,
		-2px 2px 3px #000000,
		-2px 2px 3px #000000,
		-2px 2px 3px #000000;
		/*★黒の縁取り(filter:)*/
		--textBordering:drop-shadow(2px 0px 0px rgba(0, 0, 0, 1)) drop-shadow(0px 2px 0px rgba(0, 0, 0, 1)) drop-shadow(-2px 0px 0px rgba(0, 0, 0, 1)) drop-shadow(0px -2px 0px rgba(0, 0, 0, 1)) drop-shadow(0px 0px 1px rgba(0, 0, 0, 1)) drop-shadow(0px 0px 1px rgba(0, 0, 0, 1));
}

.colorYellow { color:var(--colorYellow); }
.borderingBlack {/*★黒の縁取り*/
	filter:var(--textBordering);
	font-weight:900;
}

.contents2411 {
	font-size:15px;
	line-height:1.6;
	background:url(../../../img/shop_lp/sugoi/site_bg.jpg) center center repeat;
	background-size:100% auto;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	text-decoration: none;
	color:#333333;
	font-family:'ShinGoPro';
	font-weight:normal;
	color:var(--textColor);
}

img, video {
	max-width: 100%;
}
ul {
	list-style: none;
}
a {
	text-decoration: none;
}
main a {
	color: #585858;
}



.remodal_video {
	background:none;
	padding:0;
}
	.remodal_video .remodal-close {
		top:-40px;
	}
	.remodal_video .remodal-close:before {
		background:none;
	}

.remodal_video .videoContainer {
	background:#000000;
	border-radius:1em;
	padding:0;
	overflow:hidden;
}




.mainImage {
	position:relative;
	/*background:url(../../../img/shop_lp/sugoi/main_image.jpg) top center no-repeat;*/
	background-size:100% auto;
	box-sizing:border-box;
	width:100%;
	margin-bottom:2em;
	overflow:hidden;
	z-index:10;
}
@media only screen and (max-width:560px) {
	.mainImage {
		font-size:2.7vw;
	}
}



.mainImageVideo {
	position:relative;
	aspect-ratio:750 / 1216;
	width:100%;
	margin-bottom:2em;
	overflow:hidden;
}

@media only screen and (max-width:560px) {
	.mainImageVideo {
		font-size:2.7vw;
	}
}

.mainImageVideo video {
	position: absolute;
	top: calc(50% - 6em);
	left: 50%;
	transform: translate(-50%, calc(-50% + 6em));
	width:auto;
	max-width: inherit;
	height:calc(100% + 12em);
	z-index:-1;
}


.mainImageContents {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	background:url(../../../img/shop_lp/sugoi/fv_bg.png) center center no-repeat;
	background-size:100% auto;
	color:#ffffff;
	z-index:2;
}



.mainImageContents .object1 {
	position:absolute;
	top:22%; left:7.7%;
	margin-top:10%;
}
	.mainImageContents .object1 p {
		font-size:2em;
		line-height:1.2;
		margin-bottom:2em;
		text-align:center;
		color:#260616;
	}

	.mainImageContents .object1 .text1 {
		margin-bottom:2.8em;
	}
	.mainImageContents .object1 .text2 {
		font-size:1.4em;
		margin-bottom:2.3em;
	}

	.mainImageContents .object1 p span {
		font-weight:900;
		font-weight:bold;
	}

	.mainImageContents .object1 .text2 span {
		font-size:1.6em;
	}

.mainImageContents .object2 {
	position:absolute;
	top:16%; right:6.2%;
}
	.mainImageContents .object2 p {
		font-size:3.8em;
		line-height:0.9;
		font-family:var(--fontMincho);
	}
	.mainImageContents .object2 p.char14 {
		margin-top:0.1em;
		transform:rotate(180deg);
	}


.topContents {
	color:#ffffff;
}
@media only screen and (max-width:560px) {
	.topContents {
		font-size:2.8vw;
	}
}

.topContents .introduct {
	position:relative;
}
.topContents .introduct .text {
	position:absolute;
	top:11%; left:0; right:0;
	width:100%;
	margin:0 auto 1.5em;
}
	.topContents .introduct .text1 {
		margin-bottom:0.2em;
	}
	.topContents .introduct .text2 {
		margin-bottom:10em;
	}


.topContents .videoContainer {
	padding:1.5em 3%;
}
	.topContents .videoContainer .videoFlame {
		background:#000;
		border-radius:1em;
		overflow:hidden;
	}

.topContents .bgBlock {
}
.topContents .bgBlock .supervise {
	position:relative;
	text-align:center;
}
	.topContents .bgBlock .supervise .content {
		position:absolute;
		top:27%;
		width:100%;
	}
	.topContents .bgBlock .supervise .content h2 {
		font-size:1.4em;
		font-weight:900;
	}
	.topContents .bgBlock .supervise .content ul {
		display:flex;
		justify-content:space-between;
		padding:1em 7% 0;
	}
	.topContents .bgBlock .supervise .content ul li {
		display:flex;
		align-items:center;
		background:rgba(255,255,255,0.2);
		border-radius:50%;
		width:33%;
	}
	.topContents .bgBlock .supervise .content ul li div {
		position:relative;
		width:100%;
		height:100%;
		padding:0 0 100%;
	}
	.topContents .bgBlock .supervise .content ul li div p {
		font-size:1.1em;
		position:absolute;
		top:0; left:0;
		display:flex;
		justify-content:center;
		align-items:center;
		width:100%;
		height:100%;
	}
	.topContents .bgBlock .supervise .content ul li div p em {
		display:block;
		font-weight:900;
	}

.topContents .bgBlock .hybrid {
	position:relative;
	text-align:center;
}
	.topContents .bgBlock .hybrid .content {
		position:absolute;
		top:0; left:0;
		box-sizing:border-box;
		width:100%;
		height:100%;
		padding-top:3em;
	}
	.topContents .bgBlock .hybrid .content p {
		font-size:1.3em;
		margin-bottom:1.5em;
	}
	.topContents .forPlay a {
		font-size:1.3em;
		line-height:1;
		display:block;
		background:#ffffff;
		border:solid 1px #e6e6e6;
		border-radius:1.5em;
		box-shadow:0 2px 2px rgba(0,0,0,0.15);
		width:65%;
		padding:1em 0;
		margin:auto;
		text-align:center;
		color:#5d5d5d;
	}
	.hybrid .forplay {
		border:none;
		box-shadow:none;
	}

.topContents .bgBlock .sugoi {
	background:url(../../../img/shop_lp/sugoi/top_sugoi_bg.png) center top no-repeat;
	background-size:100% auto;
	padding:5em 0;
	text-align:center;
}


.topContents .bgBlock .sugoi .content {
	/*position:absolute;
	top:22%;
	width:100%;
	padding-top:30%;*/
}
.topContents .bgBlock .sugoi h2 {
	font-size:3em;
	margin-bottom:3.2em;
	font-weight:900;
	z-index:2;
}
/*
.topContents .bgBlock .sugoi .content ul {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	padding:0 15%;
}
	.topContents .bgBlock .sugoi .content ul li {
		width:49%;
		margin-bottom:0.5em;
	}
*/
.topContents .bgBlock .sugoi .sugoi1 .bg,
.topContents .bgBlock .sugoi .sugoi2 .bg {
	aspect-ratio:750/1159;
	width: 100%;
	position:absolute;
	top:0; left:0; right:0;
	margin:auto;
	overflow:hidden;

}

.topContents .bgBlock .sugoi .sugoi1 {
	width: 100%;
	position:relative;
	background:url(../../../img/shop_lp/sugoi/top_sugoi1_bg.png) center top no-repeat;
	background-size:100% auto;
	padding-top:30%;
	margin-bottom:3em;
}


.topContents .bgBlock .sugoi .sugoi2 {
	position:relative;
	background:url(../../../img/shop_lp/sugoi/top_sugoi2_bg.png) center top no-repeat;
	background-size:100% auto;
	padding-top:30%;
	margin-bottom:3em;
}


.playContents {
	color:#ffffff;
}
@media only screen and (max-width:560px) {
	.playContents {
		font-size:2.7vw;
	}
}
.playContents .introduct {
	position:relative;
}
.playContents .introduct .content {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
}
.playContents .introduct .content h2 {
	font-size:3em;
	line-height:1.2;
	position:absolute;
	top:16.4%; right:14%;
	font-family:var(--fontMincho);
	writing-mode: vertical-rl;
}
.playContents .introduct .content ul {
	position:absolute;
	top:73%;
	left:0; right:0;
	display:flex;
	justify-content:space-between;
	align-items:center;
	width:78%;
	margin:auto;
	color:#260616;
}

	.playContents .introduct .content ul li {
		font-size:1.4em;
		line-height:1.2;
		width:25%;
		text-align:center;
	}
	.playContents .introduct .content ul li span {
		font-weight:900;
		font-weight:bold;
	}

.playContents .introduct .content .text {
	position:absolute;
	top:87%;
	width:100%;
	text-align:center;
}

.playContents .play {
	text-align:center;
}
.playContents .play > .content {
	padding:2em 0 6em;
}
.playContents .play .content > .playTitle {
	margin-bottom:5.2em;
}
	.playContents .play > .content .playTitle span {
		font-size:3.4em;
		line-height:1;
		display:block;
		margin-bottom:1.24em;
		font-family:var(--fontMincho);
	}
	.playContents .play > .content .playTitle h2 {
		font-size:1.7em;
		line-height:1;
		font-weight:900;
	}

.playContents .play > .content > p {
	font-size:1.1em;
}
.videoButtons {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	padding:0 3%;
}
.videoButtons li {
	position:relative;
	border-radius:2em;
	width:48%;
	height:100%;
	margin-bottom:1em;
	overflow:hidden;
	z-index:1;/* iosで角丸が効かない対応 */
}
.videoButtons li .videoArea {
	position:relative;
	background:url(../../../img/shop_lp/sugoi/serviceFlow_loading.png) center top no-repeat;
	background-size:100% auto;
	width:100%;
	height:100%;
	padding:156% 0 0;
}
	.videoButtons li .videoArea.opImg {/*type2のときは画像なので*/
		background:none;
		padding:0;
	}
	.videoButtons li .videoArea .videoMask {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
	.videoButtons li .videoArea .videoMask video {
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
		width:auto;
		height:100%;
	}

.videoButtons li .btn {
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	right:1.2em;
	width:18%;
}

.videoButtons li.active .btn {
	display:none;
}
/*
.videoButtons li a {
	display:block;
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	margin:auto;
}
*/
	.videoButtons li .content {
		display:flex;
		flex-wrap:wrap;
		align-content: center;
		position:absolute;
		left:0; top:58%;
		background:rgba(222,70,255,0.3);
		width:100%;
		height:42%;
		z-index:1;
	}
	.videoButtons li .content h3 {
		font-size:1.2em;
		line-height:1;
		width:100%;
		margin-bottom:0.9em;
		font-weight:900;
	}
	.videoButtons li .content p {
		width:100%;
	}



.opList {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	padding:0 3%;
}
.opList li {
	position:relative;
	border-radius:2em;
	width:48%;
	margin-bottom:1em;
	overflow:hidden;
	z-index:1;/* iosで角丸が効かない対応 */
}
	.opList li .content {
		display:flex;
		flex-wrap:wrap;
		align-content: center;
		position:absolute;
		left:0; top:58%;
		background:rgba(222,70,255,0.3);
		width:100%;
		height:42%;
		z-index:1;
	}
	.opList li .content h3 {
		font-size:1.2em;
		line-height:1;
		width:100%;
		margin-bottom:0.9em;
		font-weight:900;
	}
	.opList li .content p {
		width:100%;
	}

.opList li .btn {
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	right:1.2em;
	width:18%;
}

.remodal_optionVideo {
	border-radius:1em;
	padding:0;
	overflow:hidden;
}









.playContents .play.sentai {
	background:url(../../../img/shop_lp/sugoi/play_sentai_bg.jpg) center top no-repeat;
	background-size:100% auto;
}
.playContents .play.esthe {
	background:url(../../../img/shop_lp/sugoi/play_esthe_bg.jpg) center top no-repeat;
	background-size:100% auto;
}
.playContents .play.esthe > .content {
	padding-top:4.7em;
}
	.playContents .play.esthe > .content .playTitle {
		margin-bottom:5.7em;
	}

.playContents .play.esthe .videoButtons li {
	/*margin-bottom:1em;*/
}

.playContents .play.health {
	background:url(../../../img/shop_lp/sugoi/play_health_bg.jpg) center top no-repeat;
	background-size:100% auto;
}
.playContents .play.health > .content {
	padding-top:4.6em;
}
	.playContents .play.health > .content .playTitle {
		margin-bottom:4.2em;
	}

.playContents .play.health .videoButtons li {
	margin-bottom:1em;
}

.playContents .play.option {
	background:url(../../../img/shop_lp/sugoi/play_option_bg.jpg) center top no-repeat;
	background-size:100% auto;
	margin-bottom:3em;
}
.playContents .play.option > .content {
	padding-top:4.6em;
}
	.playContents .play.option > .content .playTitle {
		margin-bottom:5.6em;
	}

.playContents .forSystem {
	background:linear-gradient(to right, rgba(153,182,255,1) 0%,rgba(204,167,239,1) 50%,rgba(255,153,223,1) 100%);
	padding:3em 0;
	margin-bottom:2em;
}
.playContents .forSystem a {
	font-size:1.3em;
	display:block;
	line-height:3;
	background:#ffffff;
	border-radius:1.5em;
	box-shadow:0 0.1em 0.1em rgba(0,0,0,0.1);
	width:70%;
	height:3em;
	margin:auto;
	text-align:center;
	color:#5d5d5d;
}

.playContents .compare {
	position:relative;
	padding:0 3%;
}
.playContents .compare .content {
	position:absolute;
	top:10.5%;
	left:7%;
	width:68%;
}
.playContents .compare .content .text1 {
	margin-bottom:0.9em;
}


.hvnNav {
	display:flex;
	justify-content:space-between;
	padding:0 6%;
}
	.playContents .hvnNav {
		padding-top:3em;
		padding-bottom:4em;
	}

@media only screen and (max-width:560px) {
	.hvnNav {
		font-size:2.7vw;
	}
}
	.hvnNav a {
		font-size:1.2em;
		line-height:3.4;
		background:#fff;
		border-radius:1.7em;
		box-shadow:0 0.1em 0.1em rgba(0,0,0,0.15);
		width:47%;
		text-align:center;
	}

	/* common.cssの #main video 打消し */

	#main .mainImageVideo video {
		max-width: inherit;
	}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
[ページ]コンセプト動画ページ exp_video
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
.pageTitle {
	padding:3em 0.5em;
	text-align:center;
	/*font-family: 'Noto Sans JP', sans-serif;*/
}
	.pageTitle p {
		font-size:1.3em;
		line-height:1.2;
	}
.expVideoContents{
	padding-bottom:8em;
}
@media only screen and (max-width:560px) {
	.expVideoContents{
		font-size:2.7vw;
	}
}
.expVideoContents .concept_pv {
	position:relative;
	aspect-ratio:750/800;
	background:url(../../../img/shop_lp/sugoi/exp_video_bg.webp) center center no-repeat;
	background-size:100% auto;
	display:flex;
	jusify-content:space-between;
	align-items:center;
	padding:0 4%;
}

.expVideoContents .concept_pv .videoFlame {
	/*border:solid 1px #ceaa57;*/
	border-radius:1em;
	overflow:hidden;
	margin-top:10%;
}

/* フッターに影響が及ばないよう、調整 */
footer a {
	color: #fff;
}

/* ページ内遷移のスクロール位置調整(ヘッダーと被らないよう) */
html {
  scroll-padding-top: calc((172 / var(--base-font-pixel)) * 1rem);
}