@charset "utf-8";

/*
 *  SiteName : rrrrrrrrr
 *  FileName : scene_selection.css
 *  © 2023 MERCI
 */
 
 /* --------------------------------------------------------------
	Responsive PC
-------------------------------------------------------------- */

/* reset
============================================================== */

input {
	border: none;
	outline: none;
	background-color: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

.fs-l-header,
.fs-l-sideArea,
.fs-l-footer,
.fs-l-footer__utility,
.fs-p-footerCopyright,
.fs-l-main,
.fs-c-heading--page {
	margin: 0;
	padding: 0;
	display: none;
}

* {
	letter-spacing: 0.05em;
}

/* font
============================================================== */

body {
	color: #646464;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 1.3rem;
	line-height: 1.3em;
}

/* img
============================================================== */

img {
	max-width: 100%;
}

/* a
============================================================== */

a:link,
a:visited,
a:active {
	color: #000000;
	text-decoration: none;
}

@media only screen and (min-width: 48.0625em) {

	a {
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

	a img {
		-webkit-transition: all 0.8s ease;
		transition: all 0.8s ease;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	a:hover {
		color: #646464;
		text-decoration: none;
	}

	a:hover img {
		opacity: 0.6;
		filter: alpha(opacity=60);
	}

}

/* body
============================================================== */

body {
	width: 100%;
	min-width: 1280px;
	background: #FFF7E4;
}

/* main
============================================================== */

main {
	position: relative;
	max-width: 100%;
}

/* section
============================================================== */

section {
	margin: 0 auto;
	width: 100%;
}

/* .fixedNavi
============================================================== */

.fixedNaviCheck,
.fixedNaviBtn {
	display: none;
}

.fixedNavi {
	position: fixed;
	bottom: 0;
	left: 0;
	margin: 0 auto;
	padding: 15px 0 10px;
	width: 100%;
	text-align: center;
	background: #E4D1A7;
	z-index: 3;
}

.fixedNavi ul {
	margin: 0 auto;
	font-size: 0;
}

.fixedNavi ul li {
	margin: 0 20px;
	font-size: 1.3rem;
	font-weight: bold;
	display: inline-block;
}

.fixedNavi ul li a {
	color: #FFFFFF;
}

@media only screen and (min-width: 48.0625em) {

	.fixedNavi ul li a:hover {
		color: #646464;
		text-decoration: none;
	}

}

/* #header
============================================================== */

#header {
	position: relative;
	height: 60px;
	z-index: 1;
}

#header div {
	margin: 0;
	padding: 32px 0 0;
	text-align: center;
}

/* #mainImage
============================================================== */

#mainImage {
	position: relative;
	margin: -60px auto 0;
	height: 600px;
	background: url(https://mercisaga.itembox.design/item//scene_selection/mainimage_pc.jpg) no-repeat center / cover;
}

#mainImage .topText {
	position: absolute;
	top: 356px;
	left: 11.25%;
	color: #FFFFFF;
}

#mainImage .topText h2 {
	margin: 0;
	font-size: 4.0rem;
	font-weight: bold;
}

#mainImage .topText h2 span {
	margin: 0 0 10px;
	padding: 0.5em 0.1em 0.4em;
	background: #E4D1A7;
	display: inline-block;
}

#mainImage .topText h3 {
	margin: 24px 0 0;
	font-size: 2.0rem;
	font-weight: bold;
}

/* #mainText
============================================================== */

#mainText {
	position: relative;
	padding: 120px 0;
	color: #FFFFFF;
	text-align: center;
	background: url(https://mercisaga.itembox.design/item/scene_selection/maintext.jpg) no-repeat center / cover;
}

#mainText::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	background-color: rgba(198, 198, 198, 0.1);
	display: block;
}

#mainText h2 {
	position: relative;
	margin: auto;
	width: 675px;
	line-height: 1.7em;
	font-size: 2.0rem;
	font-weight: bold;
	z-index: 2;
}

/* #sceneList
============================================================== */

#sceneList {
	margin: 64px auto;
}

#sceneList ul {
	margin: 0 auto -40px;
	padding: 0;
	width: 720px;
	text-align: center;
	font-size: 0;
	list-style: none;
	overflow: hidden;
}

#sceneList ul li {
	position: relative;
	margin: 0 20px 40px;
	width: 200px;
	height: 200px;
	font-size: 2.0rem;
	font-weight: bold;
	border: 1px #CEB272 solid;
	border-radius: 50%;
	display: inline-block;
	vertical-align: top;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

#sceneList ul li a {
	position: relative;
	width: 100%;
	height: 100%;
	color: #CEB272;
	line-height: 1.5em;
	display: block;
}

#sceneList ul li span {
	position: absolute;
	top: 54%;
	width: 100%;
	text-align: center;
	display: block;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

#sceneList ul li div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #FFFFFF;
	background: rgba(0,0,0,0.35);
	border-radius: 50%;
	z-index: 1;
}

@media only screen and (min-width: 48.0625em) {

	#sceneList ul li:hover {
		background: #CEB272;
	}

	#sceneList ul li:hover a {
		color: #FFFFFF;
	}

}

/* #brandInfo
============================================================== */

#brandInfo {
	margin: 0 auto;
	padding: 64px 0;
	color: #FFFFFF;
	background: #E4D1A7;
}

#brandInfo h2 span,
#brandInfo h2 img {
	margin: 0 auto 8px;
	text-align: center;
	font-size: 1.3rem;
	display: block;
}

#brandInfo h3 {
	margin: 28px auto 0;
	padding: 6px;
	width: 10.0em;
	color: #E4D1A7;
	text-align: center;
	font-size: 1.8rem;
	font-weight: bold;
	background: #FFFFFF;
}

#brandInfo p {
	margin: 32px auto 0;
	width: 800px;
	line-height: 1.7em;
	font-size: 1.6rem;
	font-weight: bold;
}

#brandInfo .brandBtn {
	position: relative;
	margin: 50px auto 0;
	width: 242px;
	text-align: center;
	font-size: 1.6rem;
	font-weight: bold;
}

#brandInfo .brandBtn::before,
#brandInfo .brandBtn::after {
	position: absolute;
	margin: auto;
	content: '';
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

#brandInfo .brandBtn::before {
	right: 0;
	bottom: -10px;
	width: 14px;
	height: 0;
	border-top: 1px solid #FFFFFF;
	transform: rotate(30deg);
}

#brandInfo .brandBtn::after {
	left: 0;
	bottom: -14px;
	width: 100%;
	height: 1px;
	background: #FFFFFF;
}

#brandInfo .brandBtn a {
	padding: 0 0 14px;
	width: 100%;
	height: 100%;
	color: #FFFFFF;
}

@media only screen and (min-width: 48.0625em) {


	#brandInfo .brandBtn:hover::before {
		border-top: 1px solid #646464;
	}

	#brandInfo .brandBtn:hover::after {
		background: #646464;
	}

	#brandInfo .brandBtn:hover a {
		color: #646464;
	}

}

/* #scene01~06
============================================================== */

.sceneSection {
	padding: 120px 0 130px;
	color: #CEB272;
	text-align: center;

}

.sceneSection:nth-child(6) {
	padding: 80px 0 110px;
}

.sceneSection:nth-child(2n) {
	color: #CE696F;
	background: #FFF0F1;
}

.sceneSection .sceneImage {
	margin: 0 auto;
}

.sceneSection .sceneImage h2 {
	margin: 45px auto 30px;
	font-size: 3.2rem;
	font-weight: bold;
}

.sceneSection .sceneImage p {
	margin: 0 auto;
	width: 800px;
	text-align: left;
	line-height: 1.7em;
	font-size: 1.4rem;
	font-weight: bold;
}

.sceneSection h3 {
	margin: 80px auto 0;
	padding: 12px 12px 10px;
	font-size: 1.8rem;
	font-weight: bold;
	background: rgba(255,255,255,0.9);
	display: inline-block;
}

.sceneSection .itemList {
	margin: 24px auto 0;
	width: 1028px;
	font-size: 0;
	text-align: left;
}

.sceneSection .itemList li {
	margin: 0 16px;
	width: 225px;
	text-align: center;
	font-size: 1.3rem;
	display: inline-block;
	vertical-align: top;
}

.sceneSection .itemList li h4 {
	margin: 20px auto 10px;
	font-size: 1.4rem;
}

.sceneSection .itemList li h4,
.sceneSection .itemList li .priceText {
	color: #CEB272;
	text-align: left;
}

.sceneSection:nth-child(2n + 1) .itemList li h4,
.sceneSection:nth-child(2n + 1) .itemList li .priceText {
	color: #CE696F;
}

.sceneSection .itemList li .colorList {
	margin: 18px auto 24px;
	width: 100%;
	text-align: left;
	font-size: 0;
}

.sceneSection .itemList li .colorList li {
	margin: 0 4px 0 0;
	width: 18px;
	height: 18px;
	border: 1px solid;
	border-radius: 50%;
	display: none; /* color非表示 */
}

.sceneSection .itemList li .colorList li:last-of-type(1) {
	margin: 0;
}

.sceneSection .itemList li .colorList .white01,
.sceneSection .itemList li .colorList .paper01 {
	background: #FEFEFE;
	border-color: #ACACAC;
}

.sceneSection .itemList li .colorList .white02 {
	background: #EEEEEE;
	border-color: #EEEEEE;
}

.sceneSection .itemList li .colorList .white03 {
	background: #F1F1F1;
	border-color: #F1F1F1;
}

.sceneSection .itemList li .colorList .paper02 {
	background: #E9E9E9;
	border-color: #E9E9E9;
}

.sceneSection .itemList li .colorList .paper03 {
	background: #F3EFE3;
	border-color: #F3EFE3;
}

.sceneSection .itemList li .colorList .black01 {
	background: #575556;
	border-color: #575556;
}

.sceneSection .itemList li .colorList .black02 {
	background: #4D4D4D;
	border-color: #4D4D4D;
}

.sceneSection .itemList li .colorList .black03 {
	background: #000000;
	border-color: #000000;
}

.sceneSection .itemList li .colorList .black04 {
	background: #3C3A3B;
	border-color: #3C3A3B;
}

.sceneSection .itemList li .colorList .black05 {
	background: #313035;
	border-color: #313035;
}

.sceneSection .itemList li .colorList .black06 {
	background: #2E302F;
	border-color: #2E302F;
}

.sceneSection .itemList li .colorList .black07 {
	background: #3B3A3F;
	border-color: #3B3A3F;
}

.sceneSection .itemList li .colorList .black08 {
	background: #464646;
	border-color: #464646;
}

.sceneSection .itemList li .colorList .black09 {
	background: #2F2F2F;
	border-color: #2F2F2F;
}

.sceneSection .itemList li .colorList .black10 {
	background: #4C4C4C;
	border-color: #4C4C4C;
}

.sceneSection .itemList li .colorList .black11 {
	background: #3C3B41;
	border-color: #3C3B41;
}

.sceneSection .itemList li .colorList .water01 {
	background: #CDD9E9;
	border-color: #CDD9E9;
}

.sceneSection .itemList li .colorList .water02 {
	background: #8EC1DC;
	border-color: #8EC1DC;
}

.sceneSection .itemList li .colorList .brown01 {
	background: #C6856F;
	border-color: #C6856F;
}

.sceneSection .itemList li .colorList .brown02 {
	background: #F2EADF;
	border-color: #ACACAC;
}

.sceneSection .itemList li .colorList .brown03 {
	background: #927F83;
	border-color: #927F83;
}

.sceneSection .itemList li .colorList .beige01 {
	background: #F2E7E5;
	border-color: #F2E7E5;
}

.sceneSection .itemList li .colorList .beige02 {
	background: #C7C7C7;
	border-color: #C7C7C7;
}

.sceneSection .itemList li .colorList .beige03 {
	background: #D0C1BE;
	border-color: #D0C1BE;
}

.sceneSection .itemList li .colorList .beige04 {
	background: #F3E8E6;
	border-color: #F3E8E6;
}

.sceneSection .itemList li .colorList .beige05 {
	background: #E3D1BD;
	border-color: #E3D1BD;
}

.sceneSection .itemList li .colorList .beige06 {
	background: #A7908A;
	border-color: #A7908A;
}

.sceneSection .itemList li .colorList .beige07 {
	background: #E9DAD6;
	border-color: #E9DAD6;
}

.sceneSection .itemList li .colorList .green01 {
	background: #D7DDAF;
	border-color: #D7DDAF;
}

.sceneSection .itemList li .colorList .green02 {
	background: #B1B7B3;
	border-color: #B1B7B3;
}

.sceneSection .itemList li .colorList .blue01 {
	background: #CDD9E9;
	border-color: #CDD9E9;
}

.sceneSection .itemList li .colorList .blue02 {
	background: #C2C3D5;
	border-color: #C2C3D5;
}

.sceneSection .itemList li .colorList .ecru {
	background: #F6E9E1;
	border-color: #F6E9E1;
}

.sceneSection .itemList li .colorList .lightgray {
	background: #DDD3D1;
	border-color: #DDD3D1;
}

.sceneSection .itemList li .colorList .lavender {
	background: #A49FBF;
	border-color: #A49FBF;
}

.sceneSection .itemList li .colorList .navy {
	background: #23415B;
	border-color: #23415B;
}

.sceneSection .itemList li .colorList .saladgreen {
	background: #59796C;
	border-color: #59796C;
}

.sceneSection .itemList li .colorList .mint {
	background: #ACBCB2;
	border-color: #ACBCB2;
}

.sceneSection .itemList li .colorList .wakaba {
	background: #9BC5B1;
	border-color: #9BC5B1;
}

.sceneSection .itemList li .colorList .purple {
	background: #D6C6E3;
	border-color: #D6C6E3;
}

.sceneSection .itemList li .colorList .freshpink01 {
	background: #EAC2C2;
	border-color: #EAC2C2;
}

.sceneSection .itemList li .colorList .freshpink02 {
	background: #EFDCE2;
	border-color: #EFDCE2;
}

.sceneSection .itemList li .colorList .almondmilk01 {
	background: #F3E7DB;
	border-color: #F3E7DB;
}

.sceneSection .itemList li .colorList .almondmilk02 {
	background: #F9EBEA;
	border-color: #F9EBEA;
}

.sceneSection .itemList li .colorList .camel {
	background: #CBAFA1;
	border-color: #CBAFA1;
}

.sceneSection .itemList li .colorList .warmgray01 {
	background: #7F7679;
	border-color: #7F7679;
}

.sceneSection .itemList li .colorList .warmgray02 {
	background: #856C70;
	border-color: #856C70;
}

.sceneSection .itemList li .colorList .pink {
	background: #EBB3C0;
	border-color: #EBB3C0;
}

.sceneSection .itemList li .colorList .orange {
	background: #ED925D;
	border-color: #ED925D;
}

.sceneSection .itemList li .colorList .gray01 {
	background: #5C5859;
	border-color: #5C5859;
}

.sceneSection .itemList li .colorList .gray02 {
	background: #E3E3E3;
	border-color: #E3E3E3;
}

.sceneSection .itemList li .colorList .darkblue {
	background: #617888;
	border-color: #617888;
}

.sceneSection .itemList li .itemIntr {
	margin: 0 auto;
	padding: 9px 8px 8px;
	color: #646464;
	text-align: left;
	background: rgba(255,255,255,0.9);
}

.sceneSection .itemList li .itemlistBtn {
	margin: 30px auto 0;
	padding: 12px 0 8px;
	color: #FFFFFF;
	background: #4B4B4B;
	border: 1px #4B4B4B solid;
	border-radius: 5px;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

@media only screen and (min-width: 48.0625em) {


	.sceneSection .itemList li:hover .itemlistBtn {
		color: #4B4B4B;
		background: #FFFFFF;
	}

}

/* #footer
============================================================== */

#footer {
	margin: 100px 0 0;
	padding: 13px 0 0;
	height: 40px;
	color: #FFFFFF;
	text-align: center;
	font-size: 1.2rem;
	background: #DAD3C3;
}

#footer a {
	color: #FFFFFF;
}

/* #pageTop
============================================================== */

#pageTop {
	position: fixed;
	right: 20px;
	bottom: 60px;
	width: 40px;
	height: 40px;
	z-index: 4;
}

#pageTop a {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #4B4B4B;
	display: block;
}

#pageTop a span {
	position: absolute;
	margin: auto;
	top: 7px;
	bottom: 0;
	left: 0;
	right: 0;
	width: 10px;
	height: 10px;
	border-top: 1px #FFFFFF solid;
	border-right: 1px #FFFFFF solid;
	display: block;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

@media only screen and (min-width: 48.0625em) {

	#pageTop a {
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

	#pageTop a:hover {
		opacity: 0.6;
		filter: alpha(opacity=60);
	}

}

/* --------------------------------------------------------------
	Responsive SP
-------------------------------------------------------------- */

@media only screen and (max-width: 48.0625em) {

/* font
============================================================== */

	body {
		font-size: 1.2rem;
	}

/* body
============================================================== */

	body {
		min-width: 100%;
	}

/* .fixedNavi
============================================================== */

	.fixedNaviBtn {
		position: fixed;
		bottom: 10px;
		right: 10px;
		margin: 0 auto;
		width: 30px;
		height: 25px;
		text-align: right;
		vertical-align: top;
		display: inline-block;
		z-index: 4;
	}

	.fixedNaviBtn::before {
		-webkit-box-shadow: #4B4B4B 0 11px 0;
		box-shadow: #4B4B4B 0 11px 0;
	}

	.fixedNaviBtn::after {
		bottom: 0;
	}

	.fixedNaviBtn::before,
	.fixedNaviBtn::after {
		position: absolute;
		width: 30px;
		height: 3px;
		background: #4B4B4B;
		content: '';
		display: block;
		-webkit-transition: -webkit-box-shadow 0.2s linear, -webkit-transform 0.2s 0.2s;
		transition: box-shadow 0.2s linear, transform 0.2s 0.2s;
	}

	.fixedNaviCheck:checked~.fixedNaviBtn::before {
		-webkit-box-shadow: transparent 0 0 0;
		box-shadow: transparent 0 0 0;
		-webkit-transform: rotate(45deg) translate3d(7px, 9px, 0);
		transform: rotate(45deg) translate3d(7px, 9px, 0);
	}

	.fixedNaviCheck:checked~.fixedNaviBtn::after {
		-webkit-transform: rotate(-45deg) translate3d(7px, -9px, 0);
		transform: rotate(-45deg) translate3d(7px, -9px, 0);
	}

	.fixedNaviCheck:checked~.fixedNavi {
		right: 0;
	}

	.fixedNavi {
		left: auto;
		right: -100%;
		padding: calc(100vh / 3) 0 0;
		height: 100vh;
		background: rgba(228,209,167,0.9);
		z-index: 3;
		-webkit-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}

	.fixedNavi ul li {
		margin: 0 auto 40px;
		font-size: 1.6rem;
		display: block;
	}

/* #header
============================================================== */

	#header {
		height: 48px;
	}

	#header div {
		padding: 20px 0 0;
	}

/* #mainImage
============================================================== */

	#mainImage {
		margin: -48px auto 0;
		height: 500px;
		background: url(https://mercisaga.itembox.design/item/scene_selection/mainimage_sp.jpg) no-repeat center / cover;
	}

	#mainImage .topText {
		top: 318px;
		left: 6.4%;
		color: #FFFFFF;
	}

	#mainImage .topText h2 {
		font-size: 2.4rem;
	}

	#mainImage .topText h2 span {
		margin: 0 0 10px;
	}

	#mainImage .topText h3 {
		margin: 16px 0 0;
		font-size: 1.6rem;
	}

/* #mainText
============================================================== */

	#mainText {
		padding: 80px 0;
	}

	#mainText h2 {
		width: 85%;
		font-size: 1.8rem;
	}

/* #sceneList
============================================================== */

	#sceneList {
		margin: 40px auto;
	}

	#sceneList ul {
		margin: 0 auto -20px;
		width: 100%;
	}

	#sceneList ul li {
		margin: 0 10px 20px;
		width: calc((100% / 3) - 22px);
		height: calc((100vw / 3) - 22px);
		font-size: 1.3rem;
	}

	#sceneList ul li a {
		padding: calc(((100vw / 3) - 22px) * 0.333) 0 0;
	}

/* #brandInfo
============================================================== */

	#brandInfo {
		padding: 50px 0;
	}

	#brandInfo h2 span,
	#brandInfo h2 img {
		font-size: 1.3rem;
	}

	#brandInfo h3 {
		font-size: 1.6rem;
	}

	#brandInfo p {
		margin: 32px auto 0;
		width: 90%;
		font-size: 1.4rem;
	}

	#brandInfo .brandBtn {
		margin: 40px auto 0;
		width: 53%;
		max-width: 242px;
		font-size: 1.4rem;
	}

/* #scene01~06
============================================================== */

	.sceneSection {
		padding: 40px 0 0;
		text-align: center;
		overflow-x: hidden;
	}

	.sceneSection .sceneImage {
		width: 90%;
	}

	.sceneSection .sceneImage h2 {
		margin: 30px auto 20px;
		font-size: 1.8rem;
	}

	.sceneSection .sceneImage p {
		width: 100%;
	}

	.sceneSection h3 {
		margin: 60px auto 0;
		padding: 12px 12px 10px;
		font-size: 1.6rem;
	}

	.sceneSection .itemList {
		margin: 20px auto 0;
		padding: 0 calc(5% - 8px) 15px;
		width: 100%;
		text-align: left;
		font-size: 0;
		overflow-x: scroll;
		white-space: nowrap;
		overflow-scrolling: touch;
		-webkit-overflow-scrolling: touch;
	}

	.sceneSection .itemList li {
		margin: 0 8px;
		width: calc((100vw / 2.7) + 30px - 16px);
		font-size: 1.2rem;
		white-space: normal;
	}

/* #pageTop
============================================================== */

	#pageTop {
		right: 10px;
		bottom: 50px;
		width: 30px;
		height: 30px;
	}

}