@charset "utf-8";
/* CSS関数設定 */
:root {
	/* カラーパレット */
	--RED: #d1524b;
	--PINK01: #ffd5e0;
	--PINK02: #ffa6c3;
	--BLUE: #beedff;

	/* ファーストビュー */
	--BGCOLOR_FV: #CBEEFF;
	--TTL_COLOR_FV: #837FBA;

/* スリック */

--ICON_SLIDE_ARROW: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+OBqeOBiuOBvuOBp+OBmSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyOS44IDI5LjgiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuc3QwIHsgZmlsbDogIzFlMWUxZTsgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTE0LjksMEM2LjcsMCwwLDYuNywwLDE0LjlzNi43LDE0LjksMTQuOSwxNC45UzI5LjgsMjMuMiwgMjkuOCwxNC45UzIzLjIsMCwxNC45LDBaTTE3LjQsMjAuN2wtMS40LDEuNC03LTcuMiw3LTcuMiwxLjQsMS40LTUuNiw1LjgsNS42LDUuOFoiLz4KPC9zdmc+Cg==");

}
main.fs-l-main {
	max-width: unset;
	padding: 0 !important;
}
.s-featureTmp section {
	margin-bottom: 0;
}
/* MV */
.s-featureTmp__mv{
	display: flex;
	max-width: 900px;
	margin-inline: auto;
}
.s-featureTmp__mv--txtContainer{
	background-color: var(--BGCOLOR_FV);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.s-featureTmp__mv--ttl{
	font-size: var(--FZ_28);
	font-weight: 500;
	color: var(--TTL_COLOR_FV);
	margin-bottom: var(--GAP_40);
	text-align: center;
	line-height: 1.4;
	letter-spacing: .2em;
}
.s-featureTmp__mv--txt{
	text-align: center;
	font-size: var(--FZ_14);
	margin-bottom: var(--GAP_30);
	line-height: 1.8;
	letter-spacing: .2em;
}
.s-featureTmp__mv--logo{
	width: 70px;
	margin-inline: auto;
}
@media screen and (min-width: 768px){
	.s-featureTmp__mv--txtContainer{
		width: 50%;
	}
	.s-featureTmp__mv--img{
		width: 50%;
	}
	/* MVワンカラム */
	.s-featureTmp__mv.oneColumn {
		flex-direction: column-reverse;
	}
	.s-featureTmp__mv.oneColumn .s-featureTmp__mv--txtContainer,
	.s-featureTmp__mv.oneColumn .s-featureTmp__mv--img{
		width: 100%;
	}
	.s-featureTmp__mv.oneColumn .s-featureTmp__mv--txtContainer{
		padding: var(--GAP_90)  0 var(--GAP_80);
	}
}
@media screen and (max-width: 767px){
	.s-featureTmp__mv{
		flex-direction: column-reverse;
	}
	.s-featureTmp__mv--txtContainer{
		padding: var(--GAP_90)  0 var(--GAP_80);
	}
}

/* スライド */
.s-loopSlider .slick-slide {
	width: 200px;
	margin: 0 8px
}
.s-loopSlider{
	opacity: 0;
	transition: opacity .3s linear;
}
.s-loopSlider.slick-initialized{
	opacity: 1;
}
/* シーンカラー */
.s-featureTmp__scene.s-scene--blue {
	background-color: #F1F9FE;
}
.s-featureTmp__scene.s-scene--yellow {
	background-color: #FCFFEB;
}
.s-featureTmp__scene.s-scene--green {
	background-color: #F1FEFB;
}
.s-featureTmp__scene.s-scene--pink {
	background-color: #F8F3FB;
}
.s-featureTmp__scene.s-scene--blue .s-scene__mv--catch span {
	border-bottom: 3px dotted #CFECFC;
}
.s-featureTmp__scene.s-scene--yellow .s-scene__mv--catch span {
	border-bottom: 3px dotted #EAEDAD;
}
.s-featureTmp__scene.s-scene--green .s-scene__mv--catch span {
	border-bottom: 3px dotted #AEEBE5;
}
.s-featureTmp__scene.s-scene--pink .s-scene__mv--catch span {
	border-bottom: 3px dotted #DBC7ED;
}
.s-featureTmp__scene.s-scene--blue h2.s-scene__mv--ttl span {
	background:linear-gradient(transparent 40%, #F1F9FE 60%);
}
.s-featureTmp__scene.s-scene--yellow h2.s-scene__mv--ttl span {
	background:linear-gradient(transparent 40%, #FCFFEB 60%);
}
.s-featureTmp__scene.s-scene--green h2.s-scene__mv--ttl span {
	background:linear-gradient(transparent 40%, #F1FEFB 60%);
}
.s-featureTmp__scene.s-scene--pink h2.s-scene__mv--ttl span {
	background:linear-gradient(transparent 40%, #F8F3FB 60%);
}
.s-featureTmp__scene.s-scene--blue .s-scene__item,
.s-featureTmp__scene.s-scene--blue .s-scene__item--ttl,
.s-featureTmp__scene.s-scene--blue .s-scene__product--ttl::before,
.s-featureTmp__scene.s-scene--blue .s-scene__product--ttl::after {
	border-color: #CFECFC;
}
.s-featureTmp__scene.s-scene--yellow .s-scene__item,
.s-featureTmp__scene.s-scene--yellow .s-scene__item--ttl,
.s-featureTmp__scene.s-scene--yellow .s-scene__product--ttl::before,
.s-featureTmp__scene.s-scene--yellow .s-scene__product--ttl::after {
	border-color: #EAEDAD;
}
.s-featureTmp__scene.s-scene--green .s-scene__item,
.s-featureTmp__scene.s-scene--green .s-scene__item--ttl,
.s-featureTmp__scene.s-scene--green .s-scene__product--ttl::before,
.s-featureTmp__scene.s-scene--green .s-scene__product--ttl::after {
	border-color: #AEEBE5;
}
.s-featureTmp__scene.s-scene--pink .s-scene__item,
.s-featureTmp__scene.s-scene--pink .s-scene__item--ttl,
.s-featureTmp__scene.s-scene--pink .s-scene__product--ttl::before,
.s-featureTmp__scene.s-scene--pink .s-scene__product--ttl::after {
	border-color: #DBC7ED;
}
/* シーン */
.s-featureTmp--inner{
	width: 90%;
	max-width: 1080px;
	margin-inline: auto;
	background: var(--WHITE);
	border-radius: var(--GAP_40);
}
/* シーンメイン */
.s-scene__mv {
	display: flex;
}
.s-scene__mvContainer {
	flex: 1;
	padding-top: var(--GAP_40);
}
.s-scene__mv--catch {
	text-align: center;
	margin-bottom: var(--GAP_30);
}
.s-scene__mv--catch span{
	padding-bottom: var(--GAP_5_CONST);
}
h2.s-scene__mv--ttl {
	text-align: center;
	font-weight: 500;
	margin-bottom: var(--GAP_50);
	padding-bottom: var(--GAP_10);
}
.s-scene__mv--slider .g-slickDots button{
	background-color: var(--WHITE);
	border: 1px solid rgb(114 114 114 / 50%);
}
.s-scene__mv--slider .g-slickDots .slick-active button{
	background-color: rgb(114 114 114 / 50%);
	border: 1px solid rgb(114 114 114 / 50%);
}
.s-scene__mv--slider{
	--SLICK_ARROW_SIZE: 30px;
	--SLICK_ARROW_TO_BODY: 5px;
}
.s-scene__mv--slider .g-slickArrow--prev.slick-arrow,
.s-scene__mv--slider .g-slickArrow--next.slick-arrow {
	top: 45%;
}
.s-scene__mv--slider .g-slickArrow--gray{
	background-color: rgba(255, 255, 255, 0.2);
}
.s-scene__mv--slider .g-slickArrow--gray::before{
	background-color: rgb(114 114 114 / 50%);
	mask-size: 100%;
}
.s-scene__mv--slider.only-one-slide .g-slickDots,
.s-scene__mv--slider.only-one-slide .g-slickArrow--gray {
  display: none !important;
}
@media screen and (min-width: 768px){
	.s-featureTmp__scene:nth-of-type(even) .s-scene__mv{
		flex-direction: row-reverse;
	}
	.s-featureTmp--inner{
		padding: var(--GAP_80);
	}
	.s-scene__mv {
		gap: var(--GAP_40);
	}
	.s-scene__mv--catch {
		font-size: var(--FZ_16);
	}
	h2.s-scene__mv--ttl {
		font-size: var(--FZ_28);
	}
	.s-scene__mv--txt {
		font-size: var(--FZ_16);
		line-height: 1.6;
	}
	.s-scene__mv--img {
		width: 45%;
	}
	.slick-dotted.s-scene__mv--slider {
		margin-bottom: 0;
	}
	.s-scene__mv--slider .g-slickDots {
		margin-top: 10px;
	}
}
@media screen and (max-width: 767px){
	.s-scene__mv {
		flex-direction: column;
		gap: var(--GAP_10);
	}
	.s-scene__mvContainer {
		display: contents;
	}
	.s-featureTmp--inner{
		padding: var(--GAP_60) var(--GAP_30);
	}
	.s-scene__mv--txt {
		order: 3;
		line-height: 1.5;
	}
	.s-scene__mv--catch {
		font-size: var(--FZ_18);
	}
	h2.s-scene__mv--ttl {
		font-size: var(--FZ_35);
	}
	.s-scene__mv--txt {
		font-size: var(--FZ_15);
	}
	.s-scene__mv--img {
		margin-bottom: var(--GAP_30);
	}
	.s-scene__mv--slider .g-slickDots li {
		margin-top: 10px;
	}
	.slick-dotted.s-scene__mv--slider {
		margin-bottom: 20px;
	}

}

/* 着用アイテム */
.s-scene__item {
	border: 3px solid;
	border-radius: var(--GAP_30);
	width: fit-content;
	margin-inline: auto;
}
.s-scene__item--ttl {
	width: fit-content;
	font-size: var(--FZ_20);
	font-weight: 500;
	padding: 8px 2em;
	line-height: 1.4;
	border: 3px solid;
	border-radius: var(--GAP_30);
	background: var(--WHITE);
}
.s-scene__itemList {
	display: grid;
	justify-items: center;
}
.s-scene__itemList--item {
 width: 100%;
	max-width: 185px;
}
/* 1商品の時 */
.s-scene__itemList:has(.s-scene__itemList--item:only-child) {
	grid-template-columns: 1fr;
}
.s-scene__itemList--img {
	margin-bottom: var(--GAP_10);
}
.s-scene__itemList--name {
	font-size: var(--FZ_14);
}
.s-scene__itemList--price{
	font-size: var(--FZ_16);
	font-weight: 500;
}
.s-scene__itemList--price span{
	font-size: var(--FZ_10);
}
.s-scene__itemList--color {
	display: flex;
	gap: 5px;
}
.s-scene__itemList--color span::before{
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
}
span.color-blue::before {
	background: #3472BD;
}
span.color-beige::before {
	background: #EBDDB7;
}
@media screen and (min-width: 768px){
	/* 2商品の時 */
	.s-scene__itemList:has(.s-scene__itemList--item:nth-child(2):last-child) {
		grid-template-columns: repeat(2, 1fr);
	}
	/* 3商品の時 */
	.s-scene__itemList:has(.s-scene__itemList--item:nth-child(3):last-child) {
		grid-template-columns: repeat(3, 1fr);
	}
	/* 4商品の時 */
	.s-scene__itemList:has(.s-scene__itemList--item:nth-child(4):last-child) {
		grid-template-columns: repeat(4, 1fr);
	}
	.s-scene__item {
		padding: var(--GAP_60) var(--GAP_40) var(--GAP_40);
	}
	.s-scene__itemList {
		gap: 30px;
	}
	.s-scene__item--ttl {
		margin: calc(-1 * clamp(50px, 6.5vw, 80px)) auto var(--GAP_40);
	}

}
@media screen and (max-width: 767px){
	.s-scene__itemList:has(.s-scene__itemList--item:nth-child(2)) {
		grid-template-columns: repeat(2, 1fr);
	}
	.s-scene__item {
		padding: var(--GAP_60) var(--GAP_20) var(--GAP_40);
	}
	.s-scene__itemList {
		gap: 30px 10px;
	}
	.s-scene__item--ttl {
		margin: calc(-1 * clamp(60px, 6.5vw, 80px)) auto var(--GAP_20);
	}

}

/* おすすめ商品 */
.s-scene__product--ttl {
	width: fit-content;
	margin-inline: auto;
	font-size: var(--FZ_22);
	font-weight: 500;
	margin-bottom: var(--GAP_40);
}
.s-scene__product--ttl::before,
.s-scene__product--ttl::after {
	content: "";
	display: inline-block;
	width: 3px;
	height: 35px;
	vertical-align: text-top;
}
.s-scene__product--ttl::before{
	border-left: 3px dotted;
	margin-right: 1em;
	transform: rotate(-30deg);
}
.s-scene__product--ttl::after {
	border-right: 3px dotted;
	margin-left: 1em;
	transform: rotate(30deg);
}
@media screen and (min-width: 768px){
	.s-scene__product .fs-c-productListCarousel__list {
		grid-template-columns: repeat(4, 1fr);
	}
¥
}
@media screen and (max-width: 767px){
	.s-scene__product .fs-c-productListCarousel__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px 10px;
	}

}

/* アニメーション */
.fadeupTrigger {
  opacity: 0;
}
.fadeup {
	animation: fadeUpAnime 1s ease forwards;
	opacity: 0;
	transform: translateY(20px);
}

@keyframes fadeUpAnime {
	from {
			opacity: 0;
			transform: translateY(20px);
	}
	to {
			opacity: 1;
			transform: translateY(0);
	}
}

@keyframes rotate {
	0% {
			transform:  rotate(0deg);
	}
	100% {
			transform: rotate(25deg);
	}
}