@charset "shift_jis";

@font-face {
	font-family: 'GenJyuuGothic';
	font-display: block;
	font-style: normal;
	font-weight: 400;
	src: url(../../pc/fonts/GenJyuuGothic/GenJyuuGothic-Regular__limited.woff2) format('woff2'),
		url(../../pc/fonts/GenJyuuGothic/GenJyuuGothic-Regular__limited.woff) format('woff'),
		url(../../pc/fonts/GenJyuuGothic/GenJyuuGothic-Regular__limited.ttf) format('truetype');
}

@font-face {
	font-family: 'GenJyuuGothic';
	font-display: block;
	font-style: normal;
	font-weight: 500;
	src: url(../../pc/fonts/GenJyuuGothic/GenJyuuGothic-Medium__limited.woff2) format('woff2'),
		url(../../pc/fonts/GenJyuuGothic/GenJyuuGothic-Medium__limited.woff) format('woff'),
		url(../../pc/fonts/GenJyuuGothic/GenJyuuGothic-Medium__limited.ttf) format('truetype');
}

@font-face {
	font-family: 'GenJyuuGothic';
	font-display: block;
	font-style: normal;
	font-weight: 700;
	src: url(../../pc/fonts/GenJyuuGothic/GenJyuuGothic-Bold__limited.woff2) format('woff2'),
		url(../../pc/fonts/GenJyuuGothic/GenJyuuGothic-Bold__limited.woff) format('woff'),
		url(../../pc/fonts/GenJyuuGothic/GenJyuuGothic-Bold__limited.ttf) format('truetype');
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*  ---------------------------------------------- +landing  */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.item-detail-area{padding: 0;}
@media screen and (max-width: 1024px){#p_info,#p_review{padding: 0 10px;}}
#genie_dress article{padding: 0;}
#genie_dress article section{margin: 0;}
#genie_dress article h1,#genie_dress article h2,#genie_dress article h3,#genie_dress article h4,#genie_dress article h5,#genie_dress article h6{font-family:"inherit";}
#genie_dress img{vertical-align: bottom;}

/********************

   common

*********************/
html {
	font-size: 16px;
	font-size: clamp(10px, 4.25vw, 32px) !important;
	/*1rem 32px/ basic_width-750px*/
}

#genie_dress {
	--font-base: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", 'メイリオ', Meiryo, sans-serif;
	--font-maru_gothic: 'GenJyuuGothic', 'メイリオ', Meiryo, sans-serif;
	--font_shippori_mincho: "Shippori Mincho", serif;

	--color-black01: #000;
	--color-black02: #1e1e1e;
	--color-gray01: #666;
	--color-brown01: #603813;
	--color-red01: #bb110d;
	--color-pink01: #df8092;
	--color-pink02: #f5d5e1;
	--color-purple01: #d3b1d9;
	--color-blue01: #91bfd7;
	--color-sky_blue01: #e9f3f9;

	--wrapper01: 760px;
	--wrapper_sp01: 82%;

	position: relative;
	width: auto;
	height: auto;
	background-color: transparent;
	font-size: 0.87rem;
	font-weight: 500;
	font-family: var(--font-base);
	color: var(--color-black01);
	letter-spacing: 0.05em;
	overflow: hidden;
}

#genie_dress * {
	box-sizing: border-box;
}

#genie_dress h2 {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	letter-spacing: 0.02em;
}

#genie_dress h3 {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
	letter-spacing: 0.04em;
}

#genie_dress p {
	font-size: 0.87rem;
	line-height: 1.5;
	letter-spacing: 0.06em;
}

#genie_dress img {
	max-width: 100%;
	width: 100%;
	height: auto;
}

#genie_dress figure {
	margin: 0;
}

#genie_dress figcaption {
	margin-top: 0.73em;
	font-size: 0.62rem;
	font-family: var(--font-maru_gothic);
	font-weight: 500;
	letter-spacing: 0.02em;
}


/********************
   parts
*********************/
#genie_dress .contents_wrapper {
	position: relative;
	width: var(--wrapper_sp01);
	max-width: var(--wrapper01);
	margin-right: auto;
	margin-left: auto;
	z-index: 1;
}

#genie_dress .attention_text {
	font-size: 0.62rem;
	font-weight: 500;
	line-height: 1.44;
	letter-spacing: 0.02em;
	white-space: wrap;
}

#genie_dress .attention_mark {
	position: relative;
	top: 0.1em;
	margin-left: 0.1em;
	margin-right: 0.14em;
	font-size: 0.62em;
	vertical-align: top;
}

#genie_dress .underline01 {
	--underline_color: var(--color-pink02);
	position: relative;
	display: inline;
	font-size: 1.02em;
	background: linear-gradient(transparent 0%, transparent 17%, var(--underline_color) 17%, var(--underline_color) 100%);
}

#genie_dress .color-pink01 {
	color: var(--color-pink01);
}



/********************

   main

*********************/
#genie_dress main {
	overflow: hidden;
}

.main_section {
	position: relative;
	padding: 2.28rem 0 2.8rem;
	z-index: 10;
}




/********************
   fv
*********************/
#genie_dress .fv {
	position: relative;
	width: 100%;
	height: auto;
	background: #fff;
	color: var(--color-black01);
	margin: 0 auto;
	padding: 0;
	z-index: 5;
}

#genie_dress .fv__tit {
	position: relative;
	width: 100%;
	max-width: var(--wrapper01);
	padding: 0;
	margin: -0.82rem auto 0;
	line-height: 1.1;
}

@media screen and (min-width:620px) {

	#genie_dress .fv__tit::before,
	#genie_dress .fv__tit::after {
		--adjust: 76px;
		content: "";
		position: absolute;
		top: 0;
		width: 50vw;
		height: 100%;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) var(--adjust));
	}

	#genie_dress .fv__tit::before {
		transform: rotate(180deg);
		right: calc(100% - var(--adjust) - 10px);
	}

	#genie_dress .fv__tit::after {
		left: calc(100% - var(--adjust) - 10px);
	}

}


/********************
 sec_group01
*********************/
#genie_dress .sec_group01 {
	position: relative;
	padding: 2rem 0 2.2rem;
	background: transparent;
	background-image: url(../img/design/bg_design02-sp.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	overflow: hidden;
	z-index: 1;
}


/********************
    movie
*********************/
#genie_dress .movie {
	position: relative;
	padding: 1.32rem 0 0.4rem;
	z-index: 80;
}

#genie_dress .movie__heading {
	width: 80%;
	margin: 0 auto 0.69em;
	font-size: 1.9rem;
	font-weight: 900;
	line-height: 1.1;
}

#genie_dress .movie .hacobune-video-frame{
	margin-top: -5%;
	width: 110% !important;
	margin-left: -5%;
}


/********************
  lead_sec
*********************/
#genie_dress .lead_sec {
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0 auto;
}

#genie_dress .lead_sec__heading {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-purple01);
	padding: 1.6rem 0.4rem 0.82rem;
	margin: 0;
	z-index: 10;
}
#genie_dress .lead_sec__heading img {
	width: 19.6rem;
}
#genie_dress .lead_sec__heading::after {
	content: "";
	position: absolute;
	top: calc(100% - 0.04rem);
	left: 0;
	width: 100%;
	height: 1.32rem;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	background: var(--color-purple01);
}
#genie_dress .lead_sec__wrapper {
	position: relative;
	width: 100%;
	max-width: var(--wrapper01);
	margin: 0 auto;
}


#genie_dress .lead_sec__block01 {
	display: block;
}

#genie_dress .lead_sec__block01_contents_block {
	position: relative;
	width: 100%;
	height: auto;
	padding: 2.5rem 0 2.2rem;
	background-image: url(../img/design/bg_design01-sp.png);
	background-repeat: no-repeat;
	background-size: 150% 160%;
	background-position: 32% 32%;
}

#genie_dress .lead_sec__block01_contents_inner {
	display: flex;
	justify-content: center;
	flex-direction: column;
	width: 80%;
	margin: 0 auto;
	height: 100%;
}

#genie_dress .lead_sec__tit {
	margin: 0 0 0.54rem;
}


#genie_dress .lead_sec .attention_text {
	margin: 0.25rem 0 0;
	font-weight: 600;
	text-align: right;
}

#genie_dress .lead_sec__text {
	margin: 1.1rem 0 0.25rem;
	font-size: 0.81rem;
	font-weight: 600;
	line-height: 1.8;
}

#genie_dress .lead_sec__block01_img_block {
	position: relative;
	width: 100%;
}

#genie_dress .lead_sec__block01_img_block figcaption {
	position: absolute;
	bottom: 5.9%;
	right: 10%;
	font-size: 1.25rem;
	font-family: var(--font_shippori_mincho);
	letter-spacing: -0.02em;
	color: #fff;
	text-shadow: 0 0 0.22rem #80803f, 0 0 0.22rem #80803f, 0 0 0.2rem #80803f, 0 0 0.2rem #80803f;
	filter: drop-shadow(0 0 0.28rem #80803f);
}

#genie_dress .lead_sec__block01_img_smaller {
	font-size: 0.62em;
}


#genie_dress .lead_sec__block02 {
	position: relative;
	width: 100%;
	height: auto;
}

#genie_dress .lead_sec__block02_img_block {
	width: 100%;
}

#genie_dress .lead_sec__block02_img_block img {
	width: 100%;
}


#genie_dress .lead_sec__block02_contents_block {
	position: relative;
	width: 100%;
	height: auto;
	padding: 2.28rem 0.2rem 0.82rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	z-index: 10;
}
#genie_dress .lead_sec__block02_contents_block::before {
	content: "";
	position: absolute;
	bottom: -3.5rem;
	left: 50%;
	transform: translateX(-50%);
	width: 110%;
	height: 8.2rem;
	background : linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.17) 4.23%, rgba(255, 255, 255, 1) 25.5%);
	filter: blur(0.25rem);
	z-index: -1;
}

#genie_dress .lead_sec__block02_text {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100%;
}

#genie_dress .lead_sec__block02_text img {
	width: 12.5rem;
}


/********************
  sec01
*********************/
#genie_dress .sec01 {
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0 auto;
}

#genie_dress .sec01__block {
	position: relative;
	width: 100%;
	max-width: var(--wrapper01);
	margin: 0 auto;
}

#genie_dress .sec01__img_block {
	width: 100%;
}

#genie_dress .sec01__contents_block {
	position: relative;
	width: 100%;
	height: auto;
	padding: 1.7rem 0.2rem 2.82rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	z-index: 10;
}
#genie_dress .sec01__contents_block::before {
	content: "";
	position: absolute;
	top: -2.5rem;
	left: 50%;
	transform: translateX(-50%);
	width: 110%;
	height: 8.2rem;
	background : linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.17) 4.23%, rgba(255, 255, 255, 1) 25.5%);
	filter: blur(0.25rem);
	z-index: -1;
}

#genie_dress .sec01__heading {
	margin: 0 auto 0.73em;
	font-size: 1.76rem;
	font-family: var(--font_shippori_mincho);
	text-align: center;
	line-height: 1.3;
	letter-spacing: -0.04em;
}

#genie_dress .sec01__heading span {
	position: relative;
	z-index: 1;
}

#genie_dress .sec01__heading span::after {
	content: "";
	position: absolute;
	bottom: 0.17em;
	left: -0.13em;
	width: 100%;
	height: 0.47em;
	background-image: url(../img/design/underline01-sp@2x.png);
	background-size: 100% 100%;
	z-index: -1;
}

#genie_dress .sec01__text {
	color: #808080;
	font-size: 1.76rem;
	font-family: var(--font_shippori_mincho);
	text-align: center;
	letter-spacing: -0.02em;
}


/********************
  worry
*********************/
#genie_dress .worry {
	position: relative;
	padding: 1.4rem 0 2.0rem;
	color: #fff;
	text-align: center;
}
#genie_dress .worry .contents_wrapper {
	width: 93%;
}

#genie_dress .worry__heading {
	width: 92.5%;
	margin: 0 auto 1.9rem;
}


/********************
    points
*********************/
#genie_dress .points {
	position: relative;
	padding: 0 0 1.0rem;
	margin: 0;
	background: var(--color-sky_blue01);
}

#genie_dress .points__heading {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-purple01);
	padding: 1.02rem 0.2rem 1.17rem;
	margin: 0 0 2.8rem;
}
#genie_dress .points__heading img {
	width: 17rem;
}

#genie_dress .points__wrapper {
	width: 100%;
	max-width: var(--wrapper01);
}


#genie_dress .point {
	position: relative;
	padding: 0.1rem 2.28rem 2.0rem;
	margin-bottom: 3.1rem;
	z-index: 10;
}

#genie_dress .point::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	filter: blur(1rem);
	z-index: -1;
}

#genie_dress .point__block {
	display: block;
}

#genie_dress .point__img_block {
	margin: 0 auto 0.96rem;
}

#genie_dress .point__contents_img_block {
	width: 100%;
	margin: 1.62rem 0 0.76rem;
}

#genie_dress .point__contents_img_block img {
	width: 100%;
}

#genie_dress .point__contents {
	width: 100%;
}

#genie_dress .point__tit {
	margin: -2rem 0 0.92rem -1.4rem;
}

#genie_dress .point__text {
	margin-bottom: 1.25em;
	color: var(--color-black02);
	font-size: 0.873rem;
	font-family: var(--font-maru_gothic);
	line-height: 1.56;
	letter-spacing: 0.025em;
}

/* 01 */
#genie_dress .point[data-num="01"] .point__tit {
	width: 18.7rem;
}
#genie_dress .point[data-num="01"] .point__img_block {
	width: 100%;
}

#genie_dress .point[data-num="01"] .attention_text {
	text-align: right;
	margin-bottom: 0.32rem;
}

/* 02 */
#genie_dress .point[data-num="02"] .point__tit {
	width: 19.6rem;
}
#genie_dress .point[data-num="02"] .point__img_block {
	width: 66.6%;
}

/* 03 */
#genie_dress .point[data-num="03"] .point__tit {
		width: 18.2rem;
}
#genie_dress .point[data-num="03"] .point__block {

}

#genie_dress .point[data-num="03"] figcaption {
	text-align: center;
	font-size: 0.76rem;
}
#genie_dress .point[data-num="03"] .point__img_block {
	width: 66.6%;
}
#genie_dress .point[data-num="03"] .point__img_block .movie_box {
	width: 100%;
	aspect-ratio: 320/540;
}

/* 04 */
#genie_dress .point[data-num="04"] .point__tit {
		width: 20.4rem;
}




/********************
    scenes
*********************/
#genie_dress .scenes {
	padding: 0 0 0.44rem;
}

#genie_dress .scenes__heading {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-purple01);
	padding: 2.44rem 0.4rem 1.1rem;
	margin: 0;
	z-index: 10;
}
#genie_dress .scenes__heading img {
	width: 16.2rem;
}
#genie_dress .scenes__heading::after {
	content: "";
	position: absolute;
	top: calc(100% - 1px);
	left: 0;
	width: 100%;
	height: 1.32rem;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	background: var(--color-purple01);
}

#genie_dress .scenes__contents img {
	position: relative;
	top: -1px;
	left: 50%;
	transform: translateX(-50%);
	line-height: 1;
	margin: 0;
}



/********************
    size_sec
*********************/
#genie_dress .size_sec {
	text-align: center;
	padding-top: 1.5rem;
	padding-bottom: 0;
}

.size_sec__contents {
	width: 100%;
}

#genie_dress .size_sec__img_block {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	margin: 1.82rem auto 0;
}

#genie_dress .size_sec__img_block figcaption {
	position: absolute;
	bottom: 0.5rem;
	right: 1.9rem;
	text-align: right;
}



/********************
    color_sec
*********************/
#genie_dress .color_sec {
	position: relative;
	padding: 3.9rem 0 3.2rem;
	background: var(--color-sky_blue01);
}

#genie_dress .color_sec__heading {
	text-align: center;
	width: 15.5rem;
	margin: 0 auto 1.62rem;
}

#genie_dress .color_sec__img_block {
	width: 100%;
	margin: 0 auto 1.7rem;
}

#genie_dress .color_sec__img_block:first-of-type {
	width: 96%;
	margin-bottom: 2.55rem;
}

#genie_dress .color_sec__img_block_text {
	margin: 0.76em auto 0;
	color: var(--color-brown01);
	font-size: 0.922rem;
	font-weight: 500;
	font-family: var(--font-maru_gothic);
	line-height: 1.4;
}




/********************
  sec02
*********************/
#genie_dress .sec02 {
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0 auto;
}

#genie_dress .sec02__block {
	position: relative;
	width: 100%;
	max-width: var(--wrapper01);
	margin: 0 auto;
}

#genie_dress .sec02__img_block {
	width: 100%;
	margin-left: auto;
	margin-right: 0;
}

#genie_dress .sec02__img_block img {
	width: 100%;
}

#genie_dress .sec02__contents_block {
	position: relative;
	width: 100%;
	height: auto;
	padding: 1.7rem 0.2rem 2.82rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	z-index: 10;
}
#genie_dress .sec02__contents_block::before {
	content: "";
	position: absolute;
	top: -2.5rem;
	left: 50%;
	transform: translateX(-50%);
	width: 110%;
	height: 8.2rem;
	background : linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.17) 4.23%, rgba(255, 255, 255, 1) 25.5%);
	filter: blur(0.25rem);
	z-index: -1;
}

#genie_dress .sec02__heading {
	margin: 0 auto 0.62em;
	font-size: 1.76rem;
	font-family: var(--font_shippori_mincho);
	text-align: center;
	line-height: 1.3;
	letter-spacing: -0.04em;
}

#genie_dress .sec02__text img {
	width: 14.4rem;
}