@charset "utf-8";

:root {
	/* base */
	--cts-gutter: 25px;
	--cts-width: calc(1000px +  var(--cts-gutter) * 2);

	/* font */
	--dp-font: "Noto Sans JP", sans-serif;
	/* Noto Sans
	Noto Sans JP Regular 400
	Noto Sans JP Medium 500
	Noto Sans JP Bold 600
	Noto Sans JP Black 900
	*/
	--cts-font: vdl-megag, sans-serif;
	/* VDL メガＧ
	VDL-MegaG R 400
	*/
	--cts-font-size: clamp(13px,2.67vw,16px);
	--cts-font-ls: .05em;/*letter-spacing*/

	/* color */
	--cts-color-bg: #fff;
	--cts-color-font: #000;

	--cts-color-y: #FBFF8A;/*yellow*/
	--cts-color-g: #5B5B5B;/*gray*/
	--cts-color-p: #EA47BE;/*pink*/
}


/* LP共通汎用
____________________*/
#container {
	width:100%;
}
.column2R #main {
	float: none;
	width: auto;
}
.breadCrumb {
	margin: 0 auto !important;
}
.pagetop {
	margin: 0 auto;
	width: 1050px;
}
#pagetop {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 55px;
}
#pagetop a {
	color: #fff;
	background-color: #333;
	border-radius: 5px;
	display: block;
	font-size: 12px;
	line-height: 1.5em;
	padding: 5px 10px;
	text-align: center;
	text-decoration: none;
}
figure {
	margin: 0;
}
img {
	image-rendering: -webkit-optimize-contrast;
}
.sp {
	display: none;
}
#s_container {
	font-family: var(--dp-font);
	width: 100%;
	margin: 10px auto;
}
.contentWrap {
	width: 100%;
	color: var(--cts-color-font);
	font-size: var(--cts-font-size);
}
.contentWrap img {
	max-width: 100%;
}
.clearfix:after, #nav1:after, #nav2:after, #nav3:after, #container:after, #contents:after, #footerNav:after {
	content: none !important;
}


/* コンテンツ汎用
____________________*/
.contentWrap {
	background-color: var(--cts-color-bg);
}

.fade,
.fadeup {
	opacity: 0;
	transition: all 1s;
}
.fadeup {
	transform: translatey(50px);
}
.fade.fadeShow,
.fadeup.fadeShow {
	opacity: 1;
	transform: translate(0, 0);
}


/* .contentWrap
____________________*/
.contentWrap {
	position: relative;
	text-align: center;
}
.contentWrap::before,
.contentWrap::after {
	content: "";
	position: absolute;
	width: clamp(100px,26.67vw,330px);
	height: 100%;
	top: 0;
	background-size: contain;
	z-index: 10;
}
.contentWrap::before {
	left: 0;
	background-image: url("../../5info/img/sqc/bg_left.jpg?$staticlink$");
}
.contentWrap::after {
	right: 0;
	background-image: url("../../5info/img/sqc/bg_right.jpg?$staticlink$");
}
.contentWrap>* {
	position: relative;
	z-index: 100;
}


/* .mv
____________________*/
.ctsmv {
	width: 100%;
	margin-bottom: 0;
	padding: 0;
	text-align: center;
}
.ctsmv img {
	width: 100%;
}


/* .recopc
____________________*/
.recopc {
	margin-top: clamp(30px,8vw,70px);
}
.recopc__heading {
	padding-left: var(--cts-gutter);
	padding-right: var(--cts-gutter);
}
.recopc__box {
	position: relative;
	width: 800px;
	margin: 200px auto 0;
	padding: 150px 10px 40px;
	background: var(--cts-color-y);
	box-sizing: border-box;
	border-radius: 30px;
}
.recopc__img {
	position: absolute;
	top: -180px;
	left: 50%;
	transform: translateX(-50%);
}
.recopc__txt {
	font-weight: 600;
	line-height: 2.18;
	letter-spacing: .025em;
}


/* .lineup
____________________*/
.lineup {
	margin-top: clamp(50px,13.33vw,120px);
}
.lineup__heading {
	position: relative;
}
.lineup__headinginner {
	position: absolute;
	width: 100%;
	left: 50%;
	bottom: 43px;
	font-size: 35px;
	font-family: var(--cts-font);
	font-weight: 100;
	color: var(--cts-color-p);
	line-height: 1;
	transform: translateX(-50%);
}
.lineup__headinginner::after {
	content: "";
	background: url("../../5info/img/sqc/lineup_heading_inner_bg.png?$staticlink$") no-repeat;
	background-size: cover;
	position: absolute;
	width: 618px;
	height: 84px;
	left: 50%;
	bottom: -.8em;
	transform: translateX(-50%);
	z-index: -1;
}
.lineup__list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: clamp(40px,10.67vw,50px) 30px;
	max-width: 800px;
	margin: clamp(40px,10.67vw,80px) auto 0;
}
.lineup__item {
	position: relative;
	width: clamp(260px,69.33vw,380px);
	padding: clamp(22px,5.87vw,30px) clamp(18px,4.8vw,30px);
	background: var(--cts-color-bg);
	border: 3px solid #98FFFF;
	border-radius: 20px;
	color: var(--cts-color-g);
	box-sizing: border-box;
}
.lineup__type {
	position: absolute;
	top: -.5em;
	left: 50%;
	background: var(--cts-color-bg);
	padding: 0 clamp(10px,2.67vw,15px);
	font-size: clamp(16px,4.27vw,24px);
	font-family: var(--cts-font);
	font-weight: 100;
	line-height: 1;
	word-break: keep-all;
	transform: translateX(-50%);
	color: var(--cts-color-p);
}
.lineup__name {
	margin-top: clamp(8px,2.13vw,10px);
	font-size: clamp(12px,3.2vw,17px);
	font-weight: 500;
	letter-spacing: var(--cts-font-ls);
}
.lineup__spec {
	margin-top: clamp(9px,2.4vw,12px);
	font-size: clamp(10px,2.67vw,14px);
	letter-spacing: var(--cts-font-ls);
}
.lineup__spec span {
	display: block;
}
.lineup__price {
	margin-top: clamp(9px,2.4vw,13px);
	font-size: clamp(15px,4vw,21px);
	letter-spacing: var(--cts-font-ls);
}
.lineup__tax {
	font-size: clamp(11px,2.93vw,16px);
	letter-spacing: var(--cts-font-ls);
}
.lineup__link {
	margin-top: 2px;
}
.lineup__linkicon {
	position: relative;
	display: inline-block;
	padding: 20px 0 5px;
	border-radius: 30px;
	overflow: hidden;
}
.lineup__linkicon::after {
	content: url("../../5info/img/sqc/about_link_website_img.png?$staticlink$");
	position: absolute;
	bottom: -80px;
	left: 0;
	transition: all .3s;
}
.lineup__linkicon.hover::after {
	bottom: -8px;
}
.lineup__item:nth-child(even) .lineup__linkicon::after {
	content: url("../../5info/img/sqc/about_link_twitter_img.png?$staticlink$");
}
.lineup__link a {
	position: relative;
	display: inline-block;
	width: clamp(200px,53.33vw,286px);
	bottom: 0;
	padding: clamp(9px,2.4vw,12px);
	background: var(--cts-color-p);
	border-radius: 30px;
	font-size: clamp(12px,3.2vw,17px);
	letter-spacing: var(--cts-font-ls);
	text-decoration: none !important;
	box-sizing: border-box;
	box-shadow: 3px 4px 0px #ea47be61;
	transition: all .3s;
	color: #fff !important;
}
.lineup__link a:hover {
	bottom: -4px;
	box-shadow: 0px 0px 0px #ea47be61;
}


/* .benefit
____________________*/
.benefit {
	margin-top: clamp(85px,22.37vw,190px);
}
.benefit__box {
	position: relative;
	width: 900px;
	margin: auto;
	padding: 200px 80px 50px;
	background: url("../../5info/img/sqc/imgbox_bg.jpg?$staticlink$") no-repeat;
	background-size: cover;
	border-radius: 30px;
	box-sizing: border-box;
	box-shadow: 0 3px 10px #85547830;
}
.benefit__heading {
	position: absolute;
	top: -70px;
	left: 50%;
	transform: translateX(-50%);
}
.benefit__headinginner {
	position: absolute;
	width: 100%;
	left: 50%;
	bottom: 43px;
	font-size: 35px;
	font-family: var(--cts-font);
	font-weight: 100;
	color: var(--cts-color-p);
	line-height: 1;
	transform: translateX(-50%);
}
.benefit__headinginner::after {
	content: "";
	background: url("../../5info/img/sqc/benefit_heading_inner_bg.png?$staticlink$") no-repeat;
	background-size: cover;
	position: absolute;
	width: 618px;
	height: 84px;
	left: 50%;
	bottom: -.8em;
	transform: translateX(-50%);
	z-index: -1;
}
.benefit__imgbox {
	padding: 45px 60px 35px;
	background: var(--cts-color-bg);
	border-radius: 30px;
}
.benefit__txt {
	margin-top: 22px;
	letter-spacing: .025em;
}


/* .about
____________________*/
.about {
	margin-top: clamp(50px,13.33vw,120px);
}
.about__heading {
	position: relative;
	display: inline-block;
}
.about__heading::before {
	content: url("../../5info/img/sqc/about_bg_l.png?$staticlink$");
	position: absolute;
	bottom: 0;
	left: -241px;
}
.about__heading::after {
	content: url("../../5info/img/sqc/about_bg_r.png?$staticlink$");
	position: absolute;
    bottom: 0;
	right: -272px;
}
.about__txt {
	letter-spacing: .025em;
}
.about__list {
	display: flex;
	justify-content: center;
	gap: clamp(30px,8vw,50px);
	margin-top: clamp(30px,8vw,45px);
}
.about__link {
	position: relative;
	display: inline-block;
	width: 255px;
	padding: 12px;
	background: var(--cts-color-p);
	border-radius: 50px;
	font-weight: 500;
	letter-spacing: .1em;
	text-decoration: none !important;
	box-sizing: border-box;
	opacity: 1;
	transition: all .3s;
	color: #fff !important;
}
.about__link:hover {
	opacity: .85;
}
.about__link--website::before {
	position: absolute;
	content: url("../../5info/img/sqc/about_link_website_img.png?$staticlink$");
	top: 0;
	left: -10px;
	transition: all .3s;
}
.about__link--website:hover::before {
	left: 0;
}
.about__link--twitter::before {
	position: absolute;
	content: url("../../5info/img/sqc/about_link_twitter_img.png?$staticlink$");
	top: 0;
	left: -10px;
	transition: all .3s;
}
.about__link--twitter:hover::before {
	left: 0;
}


/* .gallery
____________________*/
.gallery {
	margin-top: 70px;
}
.gallery__list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 15px 0;
	width: 1000px;
	margin: auto;
	padding: 55px 50px;
	background: var(--cts-color-y);
	border-radius: 30px;
	box-sizing: border-box;
}
.gallery_modal {
	display: inline-block;
	width: 210px;
	border: 2px solid var(--cts-color-bg);
	overflow: hidden;
}
.gallery_modal img {
	opacity: 1;
	transition: all .3s;
}
.gallery_modal img:hover {
	transform: scale(1.5);
	opacity: .7;
}


/* .special
____________________*/
.special {
	margin-top: clamp(85px,22.37vw,190px);
}
.special__box {
	position: relative;
	width: 900px;
	margin: auto;
	padding: 145px 80px 72px;
	background: url("../../5info/img/sqc/imgbox_bg.jpg?$staticlink$") no-repeat;
	background-size: cover;
	border-radius: 30px;
	box-sizing: border-box;
	box-shadow: 0 3px 10px #85547830;
}
.special__heading {
	position: absolute;
	top: 0;
	left: 50%;
	font-size: 30px;
	font-weight: 100;
	font-family: var(--cts-font);
	line-height: 1.3;
	transform: translateX(-50%);
}
.special__heading::after {
	content: url("../../5info/img/sqc/special_heading_bg.png?$staticlink$");
	position: absolute;
	top: -50%;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
}
.special__imgbox {
	padding: 63px 10px 40px;
	background: var(--cts-color-bg);
	border-radius: 30px;
}
.special__imgwrap {
	position: relative;
	display: inline-block;
}
.special__imgwrap::before {
	content: url("../../5info/img/sqc/special_img_icon.png?$staticlink$");
	position: absolute;
	top: 100px;
	left: -90px;
	animation: boundIcon 3s cubic-bezier(.12,0,.39,0) infinite;
}
@keyframes boundIcon {
	0% {
		left: -90px;
	}
	8% {
		left: -45px;
	}
	11% {
		left: -60px;
	}
	16% {
		left: -45px;
	}
	90% {
		left: -45px;
	}
	100% {
		left: -90px
	}
}
.special__txt {
	margin-top: 46px;
	font-size: 25px;
	font-family: var(--cts-font);
}


/* .recologo
____________________*/
.recologo {
	margin-top: clamp(50px,13.33vw,120px);
	padding-bottom: clamp(50px,13.33vw,120px);
}


/* .contentscopy
____________________*/
.contentscopy {
	padding: clamp(15px,4vw,35px) var(--cts-gutter);
	background: var(--cts-color-y);
	font-size: clamp(8px,2.13vw,12px);
	font-weight: 500;
	color: var(--cts-color-font);
	text-align: center;
}


/* モバイル
____________________*/
@media (max-width: 850px) {
	#s_container {
		margin: auto;
	}
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}

	.recopc__box {
		width: max(300px,80vw);
		margin-top: max(75px,20vw);
		padding: max(75px,20vw) 10px max(25px,6.67vw);
	}
	.recopc__img {
		width: max(74.67vw,280px);
		top: max(-60px,-16vw);
	}
	.recopc__txt {
		line-height: 1.5;
	}
	.lineup__headingimg {
		width: 260px;
	}
	.lineup__headinginner {
		font-size: 16px;
		bottom: 1.8em;
	}
	.lineup__headinginner::after {
		width: 295px;
		height: 40px;
	}
	.lineup__list {
		justify-content: center;
		width: calc(100vw - var(--cts-gutter) * 2);
	}
	.lineup__itembox figure {
		width: max(170px,45.33vw);
		margin: auto;
	}
	.lineup__linkicon {
		padding: 14px 0 5px;
		border-radius: 20px;
	}
	.lineup__linkicon::after {
		content: "";
		width: 54px;
		height: 55px;
		bottom: -55px;
		background: url("../../5info/img/sqc/about_link_website_img.png?$staticlink$") no-repeat;
		background-size: cover;
	}
	.lineup__item:nth-child(even) .lineup__linkicon::after {
		content: "";
		background: url("../../5info/img/sqc/about_link_twitter_img.png?$staticlink$") no-repeat;
		background-size: cover;
	}
	.benefit__box {
		width: max(300px,85.33vw);
		padding: 120px max(25px,6.67vw) max(25px,6.67vw);
	}
	.benefit__heading {
		width: 100%;
		top: min(-35px,9.33vw);
	}
	.benefit__headingimg {
		width: 200px;
	}
	.benefit__headinginner {
		font-size: 17px;
		bottom: 1.8em;
	}
	.benefit__headinginner::after {
		width: 295px;
		height: 40px;
	}
	.benefit__imgbox {
		padding: max(20px,5.33vw) max(15px,4vw);
	}
	.benefit__txt {
		margin-top: max(15px,4vw);
		font-size: max(12px,3.2vw);
	}
	.about__heading {
		width: max(270px,72vw);
	}
	.about__heading::before,
	.about__heading::after {
		display: none;
	}
	.about__list {
		flex-wrap: wrap;
	}
	.about__link {
		width: max(200px,53.33vw);
		padding: max(10px,2.67vw);
	}
	.about__link--website::before {
		content: "";
		width: 54px;
		height: 55px;
		background: url("../../5info/img/sqc/about_link_website_img.png?$staticlink$") no-repeat;
		background-size: cover;
	}
	.about__link--twitter::before {
		content: "";
		width: 54px;
		height: 55px;
		background: url("../../5info/img/sqc/about_link_twitter_img.png?$staticlink$") no-repeat;
		background-size: cover;
	}
	.gallery__list {
		justify-content: center;
		gap: max(10px,2.67vw);
		width: max(300px,85.33vw);
		padding: max(30px,8vw) max(25px,6.67vw);
	}
	.gallery_modal {
		width: max(115px,31vw);
	}
	.special__box {
		width: max(320px,85.33vw);
		padding: 70px 10px max(25px,6.67vw);
	}
	.special__heading {
		font-size: 14px;
	}
	.special__heading::after {
		content: "";
		width: 183px;
		height: 127px;
		top: -35px;
		background: url("../../5info/img/sqc/special_heading_bg.png?$staticlink$") no-repeat;
		background-size: cover;
	}
	.special__imgbox {
		width: 280px;
		margin: auto;
		padding: 30px 10px 15px;
	}
	.special__imgwrap::before {
		content: "";
		width: 49px;
		height: 36px;
		top: 50px;
		left: -30px;
		background: url("../../5info/img/sqc/special_img_icon.png?$staticlink$") no-repeat;
		background-size: cover;
		animation: boundIconsp 3s cubic-bezier(.12,0,.39,0) infinite;
	}
	.special__txt {
		margin-top: max(15px,4vw);
		font-size: max(12px,3.2vw);
	}
	.recologo__imgbox {
		width: max(300px,85.33vw);
		margin: auto;
	}
}
@keyframes boundIconsp {
	0% {
		left: -30px;
	}
	5% {
		left: -10px;
	}
	8% {
		left: -15px;
	}
	10% {
		left: -10px;
	}
	90% {
		left: -10px;
	}
	100% {
		left: -30px
	}
}



/* lightbox */
div.lightboxOverlay {
	z-index: 25000;
}
div.lightbox {
	z-index: 30000;
}
div.lb-outerContainer {
	background-color: transparent;
}
.lightbox .lb-outerContainer .lb-image {
	border-radius: 0;
}