@charset "shift_jis";

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

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

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



/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*  ---------------------------------------------- +base & parts   */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* --- リンク画像の透過--- */
#genie_dress a:hover {
	opacity: .65;
	-webkit-opacity: .65;
	-moz-opacity: .65;
}

#genie_dress a {
	transition: opacity .2s ease-out;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/*  ---------------------------------------------- +landing  */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////// */

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

   common

*********************/
#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: 980px;

	position: relative;
	font-size: 16px;
	font-weight: 500;
	font-family: var(--font-base);
	color: var(--color-black01);
	letter-spacing: 0.02em;
}

#genie_dress *,
#genie_dress *::before,
#genie_dress *::after {
	box-sizing: border-box;
}

#genie_dress h1 {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.44;
}

#genie_dress h2 {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 50px;
}

#genie_dress h3 {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.55;
	margin-bottom: 29px;
}

#genie_dress p {
	font-size: 16px;
	font-weight: 500;
	line-height: 2.1;
}

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

#genie_dress figure {
	margin: 0;
}

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



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

#genie_dress .attention_text {
	font-size: 14px;
	text-align: left;
	font-weight: 500;
	line-height: 1.6;
}

#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 69.6%, var(--underline_color) 69.6%, var(--underline_color) 100%);
}

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

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

   main

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

#genie_dress .main_section {
	position: relative;
	padding: 76px 0 82px;
	z-index: 10;
}


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

#genie_dress .fv__tit {
	position: relative;
	width: 100%;
	max-width: 1500px;
	padding: 0;
	margin: 0 auto;
	line-height: 1.1;
}

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



/********************
 sec_group01
*********************/
#genie_dress .sec_group01 {
	position: relative;
	padding: 62px 0 76px;
	background: transparent;
	background-image: url(../img/design/bg_design02.png);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	z-index: 1;
}


/********************
    movie
*********************/
#genie_dress .movie {
	position: relative;
	padding-top: 32px;
	padding-bottom: 62px;
	z-index: 80;
	text-align: center;
}

#genie_dress .movie .contents_wrapper {
	max-width: 760px;
}

#genie_dress .movie__heading {
	width: fit-content;
	margin: 0 auto 28.2px;
	font-size: 40px;
	font-weight: 900;
	line-height: 1.25;
}

#genie_dress .movie .hacobune-video-frame{
	width: 100.1% !important;
	margin-top: -0.3%;
}


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

#genie_dress .lead_sec__heading {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-purple01);
	padding: 39px 10px 32px;
	margin: 0;
}

#genie_dress .lead_sec__wrapper {
	position: relative;
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
}


#genie_dress .lead_sec__block01 {
	display: flex;
	align-items: stretch;
	justify-content: center;
}

#genie_dress .lead_sec__block01_contents_block {
	position: relative;
	flex: 1;
	height: auto;
	background-image: url(../img/design/bg_design01.png);
	background-repeat: no-repeat;
	background-size: 150% 160%;
	background-position: 32% 69%;
}

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

#genie_dress .lead_sec__tit {
	margin: 0 0 30px;
}

#genie_dress .lead_sec__tit+.attention_text {
	text-align: right;
}

#genie_dress .attention_text {
	margin: 10px 0 0;
	font-size: 14px;
	font-weight: 600;
}

#genie_dress .lead_sec__text {
	margin: 32px 0 10px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.8;
}

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

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

#genie_dress .lead_sec__block01_img_block figcaption {
	position: absolute;
	bottom: 10%;
	right: 10%;
	font-size: 20px;
	font-family: var(--font_shippori_mincho);
	letter-spacing: -0.04em;
	color: #fff;
	text-shadow: 0 0 5.5px #80803f, 0 0 5.5px #80803f, 0 0 5px #80803f, 0 0 5px #80803f;
	filter: drop-shadow(0 0 8.2px #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: 69%;
}

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

.lead_sec__block02_contents_block {
	position: absolute;
	top: 0;
	right: 0;
	width: 54%;
	height: 100%;
	padding-left: 15%;
	padding-bottom: 2%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 2.5%, rgba(255, 255, 255, 1) 22.8%);
}

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

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

#genie_dress .sec01__block {
	position: relative;
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
}

#genie_dress .sec01__img_block {
	width: 69%;
}

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

.sec01__contents_block {
	position: absolute;
	top: 0;
	right: 0;
	width: 62%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 2.5%, rgba(255, 255, 255, 1) 22%);
}

#genie_dress .sec01__heading {
	margin: 0 auto 40px;
	font-size: 51.5px;
	font-family: var(--font_shippori_mincho);
	text-align: center;
	line-height: 1.2;
	letter-spacing: 0em;
}

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

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

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


/********************
  worry
*********************/
#genie_dress .worry {
	position: relative;
	padding: 50px 0 76px;
	color: #fff;
	text-align: center;
}

#genie_dress .worry__heading {
	margin-bottom: 62px;
}


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

#genie_dress .points__heading {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-purple01);
	padding: 34px 10px 35px;
	margin: 0 0 96px;
}

#genie_dress .points__wrapper {
	max-width: 1080px;
}


#genie_dress .point {
	position: relative;
	padding: 39px 50px;
	margin-top: 87px;
	z-index: 10;
}

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

#genie_dress .point__block {
	display: flex;
	justify-content: space-between;
	column-gap: 35.9px;
}

#genie_dress .point__contents_img_block {
	width: 100%;
	margin: 25px 0 15px;
}

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

#genie_dress .point__contents {
	flex: 1;
}

#genie_dress .point__tit {
	margin: 0 0 32px;
}

#genie_dress .point__text {
	margin-bottom: 1.25em;
	color: var(--color-black02);
	font-size: 16px;
	font-family: var(--font-maru_gothic);
	line-height: 2.2;
}

/* 01 */
#genie_dress .point[data-num="01"] .point__img_block {
	width: 486px;
}

/* 03 */
#genie_dress .point[data-num="03"] .point__block {
	column-gap: 82px;
}

#genie_dress .point[data-num="03"] figcaption {
	text-align: right;
}

#genie_dress .point[data-num="03"] .point__img_block .movie_box {
	width: 320px;
	aspect-ratio: 320/540;
}

/* 04 */
#genie_dress .point[data-num="04"] .point__img_block {
	margin-top: 25px;
}




/********************
    scenes
*********************/
#genie_dress .scenes {
	padding: 0 0 10px;
}

#genie_dress .scenes__heading {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-purple01);
	padding: 39px 10px 40px;
	margin: 0;
	z-index: 1;
}

#genie_dress .scenes__contents {
	width: fit-content;
	margin: 0 auto;
}

#genie_dress .scenes__contents img {
	position: relative;
	top: -1px;
	width: 100%;
	max-width: 1500px;
	line-height: 1;
	margin: 0;
}




/********************
    size_sec
*********************/
#genie_dress .size_sec {
	text-align: center;
	padding-bottom: 76px;
}

#genie_dress .size_sec__img_block {
	width: fit-content;
	margin: 55px auto 25px;
}

#genie_dress .size_sec__img_block figcaption {
	text-align: right;
}




/********************
    color_sec
*********************/
#genie_dress .color_sec {
	position: relative;
	padding: 96px 0 55px;
	background: var(--color-sky_blue01);
}

#genie_dress .color_sec__heading {
	text-align: center;
	margin: 0 auto 56px;
}

#genie_dress .color_sec__img_block {
	width: fit-content;
	margin: 0 auto 50px;
}

#genie_dress .color_sec__img_block:first-of-type {
	margin-bottom: 62px;
}

#genie_dress .color_sec__img_block_text {
	margin: 15px auto 0;
	color: var(--color-brown01);
	font-size: 16px;
	font-weight: 500;
	font-family: var(--font-maru_gothic);
	line-height: 1.62;
}




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

#genie_dress .sec02__block {
	position: relative;
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
}

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

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

.sec02__contents_block {
	position: absolute;
	top: 0;
	left: 0;
	width: 56%;
	height: 100%;
	padding-left: 55px;
	padding-right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

#genie_dress .sec02__heading {
	margin: 0 auto 39px;
	font-size: 48px;
	font-family: var(--font_shippori_mincho);
	text-align: center;
	line-height: 1.3;
	letter-spacing: -0.02em;
}

#genie_dress .sec02__text img {
	width: 455px;
}