@charset "UTF-8";
/***************************

共通CSSの流用

****************************/
html, body {
    line-height: 1;
}

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

PCからSPへの表示切り替え

*****************************/
.pc{
	display: block;
}
.sp{
	display: none;
}
.ipad{
	display: block;
}
@media screen and (max-width: 820px) {
	.ipad{
		display: none;
	}
}
@media screen and (max-width: 768px) {
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
}

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

Parallax 部分

****************************
main::before,
main::after{
	content: "";
	display: block;
	width: 100%;
	height: 100vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}
main::after{
	background-image: url(/ec/img/usr/pg/campaign/formal_yoneori/index/parallax_image_01.jpg);
	opacity: 1;
	transition: 0.3s;
}
main::before{
	background-image: url(/ec/img/usr/pg/campaign/formal_yoneori/index/parallax_image_02.jpg);
}*/
.bg__parallax01,
.bg__parallax02{
	display: block;
	/* max-width: 1200px; */
	width: 100%;
	height: 100vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	position: fixed;
	top: -0;
	left: 0;
	right: 0;
    margin-right: auto;
    margin-left: auto;
	z-index: -1;
	transition: 0s;
}
.bg__parallax01{
	background-color: #F8F6F5;
	background-size: calc(1470 / 1380* 100vw);
	background-image: url(/ec/img/usr/pg/campaign/formal_yoneori/index/parallax_image_01.jpg);
	background-position: top calc(50 / 1380* 100vw) left calc(-60 / 1380* 100vw);
	opacity: 0;
}
.bg__parallax02{
	background-color: #F8F6F5;
	background-size: calc(2500 / 1380* 100vw);
    background-image: url(/ec/img/usr/pg/campaign/formal_yoneori/index/parallax_image_02.jpg);
    background-position: top calc(-980 / 1380* 100vw) left calc(-1120 / 1380* 100vw);
	opacity: 0;
}
.parallax__fade--swichA{
	opacity: 1;
}
.parallax__fade--swichB{
	opacity: 1;
}
@media screen and (min-width: 768px) and (max-width: 1380px) {
	.bg__parallax01{
		/* background-size: 2358px;
		background-position: top -63px left -347px; */
		background-size: calc(2358 / 1380 * 100vw);
		background-position: top calc(-63 / 1380 * 100vw) left calc(-347 / 1380 * 100vw);
	}
	.bg__parallax02{
		/* background-size: 1674.87px;
		background-position: top -100px left -295px; */
		background-size: calc(1674.87 / 1380 * 100vw);
		background-position: top calc(-250 / 1380 * 100vw) left calc(-295 / 1380 * 100vw);
	}
}
@media screen and (max-width: 768px){
	.bg__parallax01{
		background-color: #F8F6F5;
		background-size: calc(2358 / 750 * 100vw);
	    background-position: top calc(150 / 375 * 100vw) left calc(-174 / 375 * 100vw);
	}
	.bg__parallax02{
		background-color: #F8F6F5;
		background-size: calc(1800 / 750* 100vw);
        background-position: top calc(-10 / 375* 100vw) left calc(-500 / 375* 100vw);
	}
}
/***************************

ページ内スクロール　ヘッダー分のズレ対応

*****************************/
.page__scroll{
}


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

kv__area

*****************************/
.kv__area{
	width: 100%;
}
.kv__area img{
	width: 100%;
}
.kv__wrap {
	position: relative;
	/* padding-top: 64px; */
	color: #333333;
	font-family: 'Noto Serif JP', serif;
}
.kv__wrap .kv__lead{
	position: absolute;
    top: 30%;
    left: 9%;
}
.kv__wrap h1{
	font-size: 52px;
	line-height: 68px;
	font-weight: 600;
	letter-spacing: 0.3em;
	margin-bottom: 20px;
}
.kv__wrap p{
	margin-top: 20px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.45em;
}

.nav__pc--wrap{
	position: fixed;
    bottom: 0;
    right: 50px;
	z-index: 10;
}
.nav__pc--wrap ul li{
	text-align: right;
	margin-bottom: 20px;
}
.nav__pc--wrap ul li a{
	color: #666666;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 15px;
	letter-spacing: 0.75px;
	font-weight: 700;
	position: relative;
}
.nav__pc--wrap .border__bt{
	display: block;
    width: 0;
    height: 2px;
    background-color: #666666;
    position: absolute;
    bottom: -3px;
    left: 0;
	transition: 0.3s;
}
.nav__pc--wrap .border__bt.current{
	width: 100%;
}
@media screen and (max-width: 1020px) {
	.kv__wrap h1{
		font-size: 40px;
    	line-height: 54px;
    	letter-spacing: 11.6px;
    	margin-bottom: 15px;
	}
	.kv__wrap p{
		font-size: 16px;
    	line-height: 32px;
    	letter-spacing: 8.6px;
	}
}

@media screen and (max-width: 768px) {

	.kv__wrap{
		/* margin-top: 18vw; */
		margin-top: calc(82 / 768 * 100vw);
		padding-top: 0;
		color: #fff;
	}
	.kv__wrap .kv__lead{
		top: 50%;
		left: 50%;
		transform: translate(-45%,-50%);
		width: 75vw;
	}
	.kv__wrap h1{
		font-size: 7vw;
    	line-height: 9vw;
    	letter-spacing: 1.9vw;
    	margin-bottom: 3vw;
		color: #fff;
	}
	.kv__wrap p{
		font-size: 3.4vw;
    	line-height: 6vw;
    	letter-spacing: 1.2vw;
	}
	.nav__sp--wrap{
		position: absolute;
    	top: -87px;
    	left: 0;
	    width: 100%;
		background-color: #333333;
		color: #fff;
		padding: 4vw 0;
		z-index: 999;
	}
	.nav__sp--wrap ul{
		width: 83vw;
    	margin: 0 auto;
		font-family: 'Noto Sans JP', sans-serif;
		display: flex;
		flex-wrap: wrap;
	}
	.nav__sp--wrap ul li{
		width: 33%;
		text-align: center;
	}
	.nav__sp--wrap ul li:nth-child(1),
	.nav__sp--wrap ul li:nth-child(2),
	.nav__sp--wrap ul li:nth-child(3){
		margin-bottom: 4vw;
	}
	.nav__sp--wrap ul li a{
		display: flex;
    	justify-content: center;
    	align-items: center;
		width: 100%;
		height: 100%;
		font-size: 2.6vw;
		border-right: 1px solid #999999;
		color: #fff;
	}
	.nav__sp--wrap ul li:nth-child(3) a,
	.nav__sp--wrap ul li:nth-child(6) a{
		border-right: 0;
		padding-left: 3vw;
	}
}
@media screen and (max-width: 414px){
	.nav__sp--wrap{
		top: -87px;
	}
	.nav__sp--wrap ul{
		width: 92vw;
	}
	.nav__sp--wrap ul li{
		height: 6vw;
	}
	.nav__sp--wrap ul li a{
		font-size: 3.2vw;
    	letter-spacing: 0.2vw;
	}
	.kv__wrap{
		margin-top: calc(87 / 375 * 100vw);
		padding-top: 1vw;
        background-color: #F8F6F5;
	}
	.kv__wrap p{
		font-size: 4.4vw;
	}
	.kv__wrap .kv__lead{
	    left: 47%;
		width: 78vw;
	}
	.kv__wrap h1{
		font-size: 7.8vw;
    	line-height: 11vw;
	}
}
/***************************

kiji__area

*****************************/
.kiji__area{
	background-color: #F8F6F5;
	margin-bottom: 500px;
	overflow-x: hidden;
}
.kiji__area section{
	max-width: 980px;
	width: 100%;
	margin: 0 auto;
	padding-top: 100px;
	padding-bottom: 100px;
	color: #333333;
	font-family: 'Noto Serif JP', serif;
}
.ct__title--wrap{
	padding-top: 59px;
    margin-top: -59px;
	margin-bottom: 80px;
	position: relative;
}
.ct__title--wrap::before{
	content: "";
    display: block;
    width: 100vw;
    height: 1px;
    background-color: #666666;
    position: absolute;
    top: 105px;
    left: -103vw;
}
.ct__title--wrap p.ct__number{
	font-family: 'Yrsa', serif;
	font-size: 68px;
	font-weight: 300;
	color: #E2C6BB;
}
.ct__title--wrap h2{
	font-size: 36px;
	font-weight: 700;
	letter-spacing: 10.8px;
	margin-bottom: 20px;
	line-height: 36px;
}
.ct__title--wrap p:last-child{
	margin-top: 20px;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 3.6px;
}
.yonezawaori__wrap{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 120px;
}
.yonezawaori__wrap div:first-child{
	margin-right: 135px;
}
.yonezawaori__wrap div img{
	margin-bottom: 40px;
}
.yonezawaori__wrap div:first-child img{
	max-width: 300px;
	width: 100%;
	height: auto;
}
.yonezawaori__wrap div:last-child{
	margin-right: -100px;
}
.yonezawaori__wrap div:last-child img{
	max-width: 610px;
	border-left: 10px solid #E2C6BB;
}
.yonezawaori__wrap p{
	font-size: 18px;
	line-height: 54px;
	letter-spacing: 1.8px;
}
.yonezawaori__wrap--last{
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}
.yonezawaori__wrap--last div img{
	max-width: 500px;
	width: 100%;
}
.yonezawaori__wrap--last div p{
	font-size: 18px;
    line-height: 54px;
    letter-spacing: 1.8px;
	margin-bottom: 30px;
}
.yonezawaori__wrap--last div:first-child{
	margin-right: 40px;
}
.yonezawaori__wrap--last div a{
	display: flex;
    justify-content: center;
    align-items: center;
	max-width: 300px;
	width: 100%;
    height: 60px;
	background-color: #fff;
	background-image: url(/ec/img/usr/pg/campaign/formal_yoneori/index/external_link_iicon.svg);
	background-repeat: no-repeat;
	background-size: 17px;
	background-position: center right 30px;
	font-size: 18px;
	letter-spacing: 1.8px;
}

@media screen and (max-width: 1180px) {
	.kiji__area section{
		max-width: 768px;
	}
}

@media screen and (max-width: 768px) {
	.kiji__area{
		margin-bottom: calc(500 / 750 * 100vw);
	}
	.kiji__area section{
		padding-top: 10vw;
		padding-bottom: 20vw;
	}
	.ct__title--wrap{
		padding: 0 10vw;
		margin-bottom: 10vw;
		padding-top: 37vw;
    	margin-top: -37vw;
	}
	.ct__title--wrap::before{
		top: 44.5vw;
    	left: -94vw;
	}
	.ct__title--wrap p.ct__number{
		font-size: 11.5vw;
		margin-bottom: 3vw;
	}
	.ct__title--wrap h2{
		font-size: 7vw;
    	letter-spacing: 1.6vw;
    	margin-bottom: 5vw;
	}
	.ct__title--wrap p:last-child{
		font-size: 3.4vw;
		letter-spacing: 1vw;
		margin-top: 3vw;
	}
	.yonezawaori__wrap{
		flex-wrap: wrap;
		justify-content: flex-end;
		margin-bottom: 10vw;
	}
	.yonezawaori__wrap p{
	    font-size: 3.4vw;
    	line-height: 9vw;
    	letter-spacing: 0vw;
	}
	.yonezawaori__wrap div img{
		margin-bottom: 3vw;
	}
	.yonezawaori__wrap div:first-child{
		order: 2;
		margin-right: auto;
    	margin-left: auto;
   		width: 90vw;
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}
	.yonezawaori__wrap div:first-child img{
		margin-right: 4vw;
		margin-top: 3vw;
		width: 47vw;
	}
	.yonezawaori__wrap div:last-child{
		order: 1;
		margin-right: 0;
		width: 85vw;
		margin-bottom: 10vw;
	}
	.yonezawaori__wrap--last{
		justify-content: center;
		flex-wrap: wrap;
		width: 85vw;
    	margin: 0 auto;
	}
	.yonezawaori__wrap--last div img{
		margin-bottom: 2vw;
	}
	.yonezawaori__wrap--last div:first-child{
		margin-right: 0;
	}
	.yonezawaori__wrap--last div p{
	    font-size: 3.4vw;
    	line-height: 9vw;
    	letter-spacing: 0.7vw;
		margin-bottom: 4vw;
		max-width: 80vw;
	}
	.yonezawaori__wrap--last div a{
		max-width: 55vw;
    	margin: 0 auto;
    	height: 10vw;
		font-size: 3.4vw;
		letter-spacing: 0.6vw;
		background-size: 3vw;
    	background-position: center right 5vw;
	}
}
@media screen and (max-width: 414px) {
	.ct__title--wrap p:last-child{
		font-size: 3.8vw;
	}
	.yonezawaori__wrap p{
		font-size: 3.8vw;
	}
	.yonezawaori__wrap--last div p{
		font-size: 3.8vw;
	}
	.yonezawaori__wrap--last div:first-child{
		width: 71.5vw;
	}
	.yonezawaori__wrap--last div:last-child{
		width: 71.5vw;
	}
	.yonezawaori__wrap--last div:last-child p{
		letter-spacing: 0.5vw;
	}
	.yonezawaori__wrap--last div a{
		height: 13vw;
		font-size: 3.8vw;
		letter-spacing: 0.2vw;
    	background-size: 4vw;
	}
}



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

housei__area

*****************************/
.housei__area{
	background-color: #F8F6F5;
	margin-bottom: 500px;
}
.housei__area .ct__title--wrap{
	max-width: 980px;
	width: 100%;
	margin-right:  auto;
	margin-left:  auto;
}
.housei__area section{
	width: 100%;
	margin: 0 auto;
	padding-top: 100px;
	padding-bottom: 180px;
	color: #333333;
	font-family: 'Noto Serif JP', serif;
	overflow-x: hidden;
}
.housei__area .flex__layout{
	max-width: 1380px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	position: relative;
	z-index: 2;
}
.housei__area .flex__layout img{
	max-width: 750px;
	width: 100%;
	position: relative;
    z-index: 1;
}
.housei__area .flex__layout p{
	font-size: 18px;
    line-height: 54px;
    letter-spacing: 1.8px;
	position: relative;
	z-index: 1;
}
.housei__area .flex__layout div:first-child{
	margin-right: 90px;
}
.housei__area .flex__layout:nth-child(2){
	justify-content: flex-start;
	align-items: flex-start;
	margin-bottom: -290px;
}
.housei__area .flex__layout:nth-child(3){
	justify-content: flex-end;
	align-items: flex-end;
}
.flex__layout .image__bg{
	display: block;
	max-width: 750px;
	width: 100%;
	max-height: 750px;
	height: 100%;
	background-color: #E2C6BB;
	z-index: 0;
}
.flex__layout:nth-child(2) .image__bg{
	position: absolute;
    top: 50px;
    left: 50px;
}
.flex__layout:nth-child(3) .image__bg{
	position: absolute;
    top: 50px;
    right: -50px;
}

@media screen and (max-width: 1180px) {
	.housei__area .ct__title--wrap{
		max-width: 768px;
	}
	.housei__area .flex__layout img{
		max-width: 590px;
	}
	.flex__layout .image__bg{
		max-width: 590px;
	}
}
@media screen and (max-width: 1080px) {
	.housei__area .flex__layout:nth-child(2){
	    margin-bottom: -230px;
	}
}
@media screen and (max-width: 1000px){
	.housei__area .flex__layout img{
		max-width: 525px;
	}
	.flex__layout .image__bg{
		max-width: 525px;
	}
	.housei__area .flex__layout:nth-child(2){
		margin-bottom: -180px;
	}
	.flex__layout:nth-child(2) .image__bg{
		top: 30px;
    	left: 30px;
	}
	.flex__layout:nth-child(3) .image__bg{
		top: 30px;
	}
	.housei__area .flex__layout div:first-child{
		margin-right: 5%;
	}
}
@media screen and (max-width: 885px){
	.housei__area .flex__layout img{
		max-width: 395px;
	}
	.flex__layout .image__bg{
		max-width: 395px;
	}
	.housei__area .flex__layout:nth-child(2){
		margin-bottom: -110px;
	}
}
@media screen and (max-width: 768px) {
	.housei__area{
		margin-bottom: calc(500 / 750 * 100vw);
	}
	.housei__area section{
		padding-top: 15vw;
		padding-bottom: 25vw;
	}
	.housei__area .flex__layout:nth-child(2){
		margin-bottom: 10vw;
    	flex-wrap: wrap;
	}
	.housei__area .flex__layout img{
		max-width: 750px;
	}
	.flex__layout:nth-child(2) .image__bg{
		top: 4vw;
    	left: 6vw;
    	max-width: 81vw;
    	max-height: 83vw;
	}
	.housei__area .flex__layout div:first-child{
		margin-right: 0;
		margin-bottom: 8vw;
		width: 82vw;
	}
	.housei__area .flex__layout p{
	    font-size: 3.4vw;
    	line-height: 9vw;
    	letter-spacing: 0.7vw;
		padding-left: 5vw;
	}
	.housei__area .flex__layout:nth-child(3){
		flex-wrap: wrap;
	}
	.housei__area .flex__layout:nth-child(3) div:first-child{
		order: 2;
		margin-bottom: 0;
	}
	.housei__area .flex__layout:nth-child(3) div:first-child p{
		text-align: right;
		padding-left: 0;
    	padding-right: 3vw;
	}
	.housei__area .flex__layout:nth-child(3) div:last-child{
		order: 1;
		width: 80vw;
	}
	.housei__area .flex__layout:nth-child(3) div:last-child img{
		margin-bottom: 8vw;
	}
	.flex__layout:nth-child(3) .image__bg{
		max-width: 80vw;
		max-height: 72vw;
		top: 13vw;
    	right: -7vw;
	}
}
@media screen and (max-width: 414px) {
	.housei__area .flex__layout:nth-child(2){
		margin-bottom: 13vw;
	}
	.housei__area .flex__layout p{
		font-size: 3.6vw;
		padding-left: 5.5vw;
		letter-spacing: 0.5vw;
	}
	.housei__area .flex__layout:nth-child(3) div:last-child{
		width: 82vw;
	}
	.flex__layout:nth-child(3) .image__bg{
		top: 14.5vw;
		right: -3vw;
	}
}



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

comfortable__area

*****************************/
.comfortable__area{
	background-color: #F8F6F5;
}
.comfortable__area .ct__title--wrap{
	max-width: 980px;
	width: 100%;
	margin-right:  auto;
	margin-left:  auto;
}
.comfortable__area section{
	width: 100%;
	margin: 0 auto;
	padding-top: 100px;
	padding-bottom: 0;
	color: #333333;
	font-family: 'Noto Serif JP', serif;
	overflow-x: hidden;
}
.comfortable__area .flex__layout{
	display: flex;
	max-width: 1380px;
    width: 100%;
	margin: 0 auto;
}
.comfortable__area .flex__layout:nth-child(2){
	justify-content: flex-start;
	align-items: flex-start;
	margin-bottom: 80px;
}
.comfortable__area .flex__layout:nth-child(2) img{
	max-width: 800px;
	width: 100%;
	border-right:10px solid #E2C6BB;
}
.comfortable__area .flex__layout:nth-child(2) p{
	margin-left: 40px;
	margin-top: 90px;
}
.comfortable__area .flex__layout:nth-child(3){
	justify-content: flex-end;
    align-items: flex-start;
    max-width: 1160px;
    width: 100%;
    margin: 0 auto 85px;
}
.comfortable__area .flex__layout:nth-child(3) img{
	max-width: 300px;
	width: 100%;
}
.comfortable__area .flex__layout:nth-child(3) p{
	margin-right: 40px;
}
.comfortable__area .flex__layout:nth-child(4){
	justify-content: flex-end;
	align-items: flex-end;
	margin-bottom: 250px;
}
.comfortable__area .flex__layout:nth-child(4) div:first-child p{
	max-width: 340px;
	width: 100%;
    margin: 0px 10px 200px auto;
}
.comfortable__area .flex__layout:nth-child(4) div:first-child p.m__b--0{
	margin-bottom: 0;
}
.comfortable__area .flex__layout:nth-child(4) div:first-child div{
	margin-right: 170px;
}
.comfortable__area .flex__layout:nth-child(4) div:first-child div img{
	max-width: 300px;
	width: 100%;
	margin-bottom: 20px;
}
.comfortable__area .flex__layout:nth-child(4) div.left__side img{
	max-width: 700px;
	border-left: 10px solid #E2C6BB;
}
.comfortable__area .flex__layout p{
	font-size: 18px;
    line-height: 54px;
    letter-spacing: 1.8px;
}

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

}
@media screen and (max-width: 1180px){
	.comfortable__area .ct__title--wrap{
		max-width: 768px;
	}
}
@media screen and (max-width: 1160px){
	.comfortable__area .flex__layout:nth-child(3){
		width: 85%;
	}
	.comfortable__area .flex__layout:nth-child(4){
		max-width: 858px;
    	margin-right: 0;
	}
	.comfortable__area .flex__layout:nth-child(4) div:first-child p{
    	margin: 0px 170px 95px auto;
	}
	.comfortable__area .flex__layout:nth-child(4) div:first-child div{
		margin-right: 160px;
    	margin-left: -80px;
	}
}
@media screen and (max-width: 880px){
	.comfortable__area .flex__layout:nth-child(4){
		max-width: 658px;
	}
	.comfortable__area .flex__layout:nth-child(4) div:first-child div{
		margin-right: 100px;
	}
	.comfortable__area .flex__layout:nth-child(4) div:first-child p{
		margin: 0px 70px 95px -30px;
	}
}
@media screen and (max-width: 768px) {
	.comfortable__area section{
		padding-top: 15vw;
	}
	.comfortable__area .flex__layout:nth-child(2){
		flex-wrap: wrap;
		margin-bottom: 10vw;
	}
	.comfortable__area .flex__layout:nth-child(2) img{
		width: 85vw;
		margin-bottom: 3vw;
	}
	.comfortable__area .flex__layout:nth-child(2) p{
		margin-left: 24vw;
		margin-top: 0;
	}
	.comfortable__area .flex__layout p{
		font-size: 3.4vw;
    	line-height: 9vw;
    	letter-spacing: 0.3vw;
	}
	.comfortable__area .flex__layout:nth-child(3){
		width: 88vw;
    	margin: 0 auto 5vw;
		justify-content: center;
	}
	.comfortable__area .flex__layout:nth-child(3) p{
		margin-right: 0;
	}
	.comfortable__area .flex__layout:nth-child(3) div:first-child{
		order: 1;
		width: 110vw;
	}
	.comfortable__area .flex__layout:nth-child(3) div:last-child{
		order: 2;
		width: 95vw;
		margin-left: 5vw;
	}
	.comfortable__area .flex__layout:nth-child(4){
		flex-wrap: wrap;
		max-width: 94vw;
		margin-bottom: 13vw;
	}
	.comfortable__area .flex__layout:nth-child(4) div:last-child{
		order: 2;
		width: 94vw;
		margin-bottom: 4vw;
	}
	.comfortable__area .flex__layout:nth-child(4) div:last-child p{
		margin-top: 3vw;
	}
	.comfortable__area .flex__layout:nth-child(4) div:first-child{
		order: 1;
		margin-right: 3vw;
		margin-bottom: 5vw;
	}
	.comfortable__area .flex__layout:nth-child(4) div:first-child p{
		max-width: 100%;
		width: 94vw;
		margin: 0px auto 10vw auto;
	}
	.comfortable__area .flex__layout:nth-child(4) div:first-child div{
		margin-right: 0;
	}
	.comfortable__area .flex__layout:nth-child(4) div:first-child div.flex__wrap--sp-lyaout{
    	display: flex;
    	justify-content: center;
    	align-items: flex-start;
		width: 90vw;
		margin-left: 0vw;
		padding-right: 2vw;
	}
	.comfortable__area .flex__layout:nth-child(4) div:first-child div.flex__wrap--sp-lyaout img{
		width: 39vw;
		margin-top: 3vw;
    	margin-right: 5vw;
    	margin-bottom: 0;
	}
	.comfortable__area .flex__layout:nth-child(3) img{
		margin-top: 3vw;
	}
}

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

product__area

*****************************/
.product__area{
	padding-top: 59px;
	margin-top: -59px;
}
.product__area section{
	background-color: #F1EDED;
	padding-bottom: 100px;
}
.product__area .title__box{
	width: 100%;
	height: 700px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url("/ec/img/usr/pg/campaign/formal_yoneori/index/yoneori_product_title_bg-pc.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100%;
	margin-bottom: 100px;
}
.product__area .title__box h2{
	font-family: 'Yrsa', serif;
	font-size: 64px;
	font-weight: 500;
	letter-spacing: 12.8px;
	margin: 0;
}

.yoneori__product--detail{
	max-width: 980px;
	width: 100%;
	height: 500px;
	margin: 0 auto;
	font-family: 'Noto Serif JP', serif;
	color: #333333;
}
.yoneori__line-up{
	max-width: 980px;
	width: 100%;
	margin: 0 auto;
	font-family: 'Noto Serif JP', serif;
	color: #333333;
}
.yoneori__line-up h3{
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 5.6px;
	text-align: center;
	margin-bottom: 40px;
}
.yoneori__line-up ul{
	margin-top: 50px;
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-wrap: wrap;
}
.yoneori__line-up ul li{
	/* max-width: 310px; */
	max-width: calc((100% - 50px) / 3);
    width: 100%;
	height: auto;
	color: #666666;
}
.yoneori__line-up ul li:nth-child(2),
.yoneori__line-up ul li:nth-child(5){
	margin: 0 25px;
}
.yoneori__line-up ul li:nth-child(4),
.yoneori__line-up ul li:nth-child(5){
	margin-top: 80px;
}
.yoneori__line-up ul li img{
	margin-bottom: 20px;
}
.yoneori__line-up ul li p{
	font-size: 16px;
	letter-spacing: 0.8px;
}
.yoneori__line-up ul li p.ct__product--en{
	margin-bottom: 10px;
}
.yoneori__line-up ul li h4{
	font-size: 19px;
	line-height: 1.4;
	margin-bottom: 10px;
}
.yoneori__line-up ul li:last-child h4{
	letter-spacing: -0.6px;
}
.yoneori__line-up ul li p.product__spec{
	margin-bottom: 40px;
}
.yoneori__line-up ul li p.product__spec a{
	pointer-events: none;
}
.yoneori__line-up ul li a.product__link--btn{
	font-size: 18px;
	letter-spacing: 0.9px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 62px;
	color: #333333;
	background-color: #fff;
	background-image: url("/ec/img/usr/pg/campaign/formal_yoneori/index/arrow_right.svg");
	background-repeat: no-repeat;
	background-size: 17px 6px;
	background-position: center left 30%;
}
.product_contents_block{
	display: flex;
    position: relative;
	max-width: 980px;
    width: 100%;
    margin: 0 auto 150px;
	font-family: 'Noto Serif JP', serif;
	color: #333333;
}
.product_contents_block .contents_right{
	width: 60%;
    height: 1000px;
	position: -webkit-sticky;
    position: sticky;
    top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(/ec/img/usr/pg/campaign/formal_yoneori/index/product_contents_block_bg_01.jpg);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 95%;
}
.product_contents_block .contents_right.contents_right--02 {
	background-image: url(/ec/img/usr/pg/campaign/formal_yoneori/index/product_contents_block_bg_02.jpg);	
}
.product_contents_block .contents_left{
	width: 37%;
	margin-right: 3%;
    position: relative;
}
.contents_left p.ct__product--en{
	color: #666666;
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 15px;
}
.contents_left h3{
	color: #666666;
    font-size: 28px;
	font-weight: 400;
    line-height: 40px;
    margin-bottom: 15px;
}
.contents_left p.product__spec{
	color: #666666;
	font-size: 16px;
	margin-top: 15px;
	margin-bottom: 40px;
}
.contents_left a.product__link--btn{
	font-size: 18px;
    letter-spacing: 0.9px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 85%;
    height: 62px;
    background-color: #fff;
    background-image: url(/ec/img/usr/pg/campaign/formal_yoneori/index/arrow_right.svg);
    background-repeat: no-repeat;
    background-size: 17px 6px;
    background-position: center left 30%;
	margin-bottom: 80px;
}
.contents_left .product_contents_txt.strong{
	color: #666666;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 30px !important;
}
.contents_left .product_contents_txt{
	font-size: 16px;
	font-weight: 500;
	line-height: 36px;
	margin-bottom: 60px;
}
.product_contents_img{
	max-width: 250px;
	width: 100%;
}
.product_contents_img:last-child{
	margin-top: 60px;
}
.product_contents_img img{
	margin-bottom: 20px;
}
.product_contents_img img + img{
	margin-top: 40px;
}
.product_contents_img p{
	font-size: 16px;
	font-weight: 500;
	line-height: 36px;
}
@media screen and (min-width: 769px) {

}
@media screen and (max-width: 1300px) {
	.product__area .title__box{
		height: 50vw;
	}
}
@media screen and (max-width: 1000px){
	.product__area .title__box h2{
		font-size: 50px;
		letter-spacing: 6.8px;
	}
}
@media screen and (max-width: 768px) {
	.product__area{
		padding-top: 37vw;
		margin-top: -37vw;
	}
	.product__area section{
		padding-bottom: 15vw;
	}
	.product__area .title__box{
		height: 53vw;
		background-image: url(/ec/img/usr/pg/campaign/formal_yoneori/index/yoneori_product_title_bg-sp.jpg);
		margin-bottom: 10vw;
	}
	.product__area .title__box h2{
		font-size: 7.5vw;
		letter-spacing: 1.5vw;
	}
	.yoneori__line-up{
		width: 90vw;
	}
	.yoneori__line-up h3{
		font-size: 4.4vw;
    	letter-spacing: 0.8vw;
    	margin-bottom: 7vw;
	}
	.yoneori__line-up ul{
		flex-wrap: wrap;
	}
	.yoneori__line-up ul li{
		max-width: 42vw;
	}
	.yoneori__line-up ul li:nth-child(2),
	.yoneori__line-up ul li:nth-child(4){
		margin: 0 auto 0 6vw;
	}
	.yoneori__line-up ul li:nth-child(5) {
		margin: 0;
	}
	.yoneori__line-up ul li:first-child,
	.yoneori__line-up ul li:nth-child(2),
	.yoneori__line-up ul li:nth-child(3),
	.yoneori__line-up ul li:nth-child(4){
		margin-bottom: 12vw;
	}
	.yoneori__line-up ul li p{
		font-size: 3.4vw;
    	letter-spacing: 0.1vw;
	}
	.yoneori__line-up ul li img{
		margin-bottom: 2vw;
	}
	.yoneori__line-up ul li p.ct__product--en{
		margin-bottom: 3vw;
	}
	.yoneori__line-up ul li h4{
		font-size: 4.4vw;
    	line-height: 6vw;
    	margin-bottom: 2vw;
	}
	.yoneori__line-up ul li a.product__link--btn{
		font-size: 3.4vw;
		letter-spacing: 0.3vw;
		height: 11vw;
		background-size: 4vw 1.5vw;
		background-position: center left 10vw;
	}
	.product_contents_block{
		flex-wrap: wrap;
		margin: 0 auto 28vw;
	}
	.product_contents_block .contents_left{
		width: 80vw;
    	margin-right: auto;
    	margin-left: auto;
    	order: 2;
	}
	.product_contents_block .contents_right{
		width: 100%;
		height: 113vw;
		position: inherit;
		top: inherit;
		background-position: top center;
		background-size: 80%;
		order: 1;
		margin-bottom: 5vw;
	}
	.contents_left p.ct__product--en{
		font-size: 3vw;
    	letter-spacing: 0.5vw;
   	 	margin-bottom: 2vw;
	}
	.contents_left h3{
		font-size: 5.5vw;
    	letter-spacing: 0.5vw;
    	line-height: 7vw;
    	margin-bottom: 3vw;
	}
	.contents_left p.product__spec{
		font-size: 3.4vw;
    	letter-spacing: 0.2vw;
	}
	.contents_left p.product__spec a{
		pointer-events: none;
	}
	.contents_left a.product__link--btn{
		width: 60vw;
		height: 12vw;
		margin: 0 auto;
		font-size: 3.4vw;
		letter-spacing: 0.2vw;
		background-size: 4vw 2vw;
		background-position: center left 17vw;
		margin-bottom: 12vw;
	}
	.contents_left .product_contents_txt.strong{
		font-size: 4vw;
    	letter-spacing: 0.2vw;
		margin-bottom: 3vw !important;
	}
	.contents_left .product_contents_txt{
		font-size: 3.4vw;
    	line-height: 7vw;
    	letter-spacing: 0.2vw;
		margin-bottom: 10vw;
	}
	.contents_left .slider{
		width: 90vw;
    	margin-left: -5vw;
		background-color: #fff;
	}
	.contents_left .slider img{
		padding: 6vw 18vw;
	}
	.contents_left .slider p{
		font-size: 3.4vw;
    	line-height: 7vw;
    	letter-spacing: 0.2vw;
		padding: 0 8vw 6vw;
	}
	.contents_left .slider button{
		content: "" !important;
		position: absolute !important;
        bottom: -8vw !important;
    	left: 50% !important;
    	transform: translateX(-50%) !important;
		background-color: none !important;
		text-indent: -9999px;
		width: 8vw;
    	height: 3vw;
		border: none !important;
	}
	.contents_left .slider .slick-next{
		background-image: url(/ec/img/usr/pg/campaign/formal_yoneori/index/slider_next_arrow.svg);
		background-size: 100%;
		background-position: center;
		background-repeat: no-repeat;
		left: 56vw !important;
	}
	.contents_left .slider .slick-prev{
		background-image: url(/ec/img/usr/pg/campaign/formal_yoneori/index/slider_pre_arrow.svg);
		background-size: 100%;
		background-position: center;
		background-repeat: no-repeat;
	    left: 37vw !important;
	}
	.contents_left .slider button.slick-disabled{
		display:none !important;
	}
}

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

yoneori__trying--area

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

.yoneori__trying--area{
	background-color: #fff;
	font-family: 'Noto Serif JP', serif;
	padding: 100px 0;
}
.yoneori__trying--area section{
	padding-top: 90px;
	margin-top: -90px;
}
.yoneori_trying_on_block{
	max-width: 980px;
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.yoneori_trying_on_block::before{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-color: #333333;
	position: absolute;
	top: 109px;
	left: 0;
}
.yoneori_trying_on_block h2{
	font-size: 32px;
	text-align: center;
	max-width: 350px;
    width: 100%;
    margin: 0 auto;
	background-color: #fff;
	position: relative;
	z-index: 1;
	font-weight: normal;
	letter-spacing: normal;
}
.yoneori_trying_on_block p{
	padding-top: 40px;
	margin-bottom: 80px;
	font-size: 16px;
	line-height: 36px;
	text-align: center;
	letter-spacing: normal;
}
.yoneori .reserve_trying_on_area h3{
	font-size: 24px;
	text-align: center;
}
.yoneori .reserve_trying_on_area_title{
	margin-bottom: 40px;
}
.trying_on_3merit_area{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 80px;
}
.trying_on_3merit_area .trying_on_3merit_block:nth-child(2){
	margin: 0 50px;
}
.btn_trying_on_3merit .btn_area{
	max-width: 420px;
	width: 100%;
	height: 60px;
	margin: 0 auto;
	border: 1px solid #666666;
}
.btn_trying_on_3merit .btn_area a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	font-size: 18px;
	background-image: url(/ec/img/usr/pg/campaign/formal_yoneori/index/arrow_right.svg);
    background-repeat: no-repeat;
    background-size: 17px 6px;
    background-position: center left 30%;
}
@media screen and (min-width: 769px) {

}

@media screen and (max-width: 768px) {
	.yoneori_trying_on_block{
		width: 90vw;
	}
	.trying_on_3merit_area{
		flex-wrap: wrap;
		margin-bottom: 10vw;
	}
	.trying_on_3merit_area .trying_on_3merit_block{
		margin-bottom: 4vw;
		width: 65vw;
	}
	.trying_on_3merit_area .trying_on_3merit_block:nth-child(2){
		margin: 0 0 4vw;
	}
	.trying_on_3merit_area .trying_on_3merit_block:last-child{
		margin-bottom: 0;
	}
	.btn_trying_on_3merit .btn_area{
		width: 65vw;
    	height: 15vw;
	}
	.btn_trying_on_3merit .btn_area a{
		font-size: 3.4vw;
		letter-spacing: 0.3vw;
		background-size: 4vw 1.5vw;
		background-position: center left 10vw;
	}
	.yoneori__trying--area{
		padding: 18vw 0;
	}
	.yoneori__trying--area section{
		padding-top: 40vw;
		margin-top: -40vw;
	}
	.reserve_trying_on_area{
		text-align: center;
	}
	.yoneori_trying_on_block h2{
		font-size: 5vw;
    	max-width: 52vw;
	}
	.yoneori_trying_on_block p{
		font-size: 3.4vw;
    	line-height: 8vw;
    	text-align: left;
    	letter-spacing: 0.3vw;
    	margin-bottom: 14vw;
	}
	.reserve_trying_on_area h3{
		font-size: 5vw;
    	margin-bottom: 8vw;
	}
	.yoneori_trying_on_block::before{
		top: 42.5vw;
	}
}


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

store_search_area

*****************************/
.store_search_area{
	background-image: url(/ec/img/usr/pg/campaign/formal_yoneori/index/store_illust.jpg);
    position: relative;
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
	font-family: 'Noto Serif JP', serif;
}
.store_search_area .store_search_block{
	background-color: rgba(0, 0, 0, 0.7);
}
.store_search_block{
	padding: 90px 20px;
}
.store_search_area h2{
	font-size: 36px;
	letter-spacing: 7.2px;
    font-weight: 500;
    line-height: 1.8;
	text-align: center;
    color: #fff;
	margin-bottom: 10px;
}
.store_search_area p{
	font-size: 18px;
	text-align: center;
	line-height: 34px;
	color: #fff;
	margin-bottom: 45px;
}
.store_search_area a{
	font-size: 18px;
	color: #38392F;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 420px;
	width: 100%;
	height: 60px;
	margin: 0 auto;
	background-color: #fff;
	background-image: url("/ec/img/usr/pg/campaign/formal_yoneori/index/arrow_right.svg");
	background-repeat: no-repeat;
	background-size: 17px 6px;
	background-position: center left 35%;
}
@media screen and (min-width: 769px) {

}

@media screen and (max-width: 768px) {
	.store_search_block{
		padding: 8vw 3vw;
	}
	.store_search_area h2{
		font-size: 6vw;
		letter-spacing: 1vw;
		margin-bottom: 2vw;
	}
	.store_search_area p{
		font-size: 4vw;
		line-height: 7vw;
		margin-bottom: 10vw;
	}
	.store_search_area a{
		width: 65vw;
		height: 15vw;
		font-size: 3.4vw;
		letter-spacing: 0.3vw;
		background-size: 4vw 1.5vw;
		background-position: center left 15vw;
	}

}
@media screen and (max-width: 414px) {
	.store_search_area a{
		font-size: 4vw;
		background-position: center left 15vw;
	}
}
/***************************

relation__area

*****************************/
.relation__area{
	background-color: #fff;
	padding-top: 95px;
	padding-bottom: 200px;
	font-family: 'Noto Serif JP', serif;
}
.relation__block{
	max-width: 980px;
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.relation__block::before{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-color: #333333;
	position: absolute;
	top: 33px;
	left: 0;
}
.relation__block h2{
	font-family: 'Yrsa', serif;
	font-size: 48px;
	font-weight: 500;
	letter-spacing: 4.8px;
	text-align: center;
	max-width: 350px;
    width: 100%;
    margin: 0 auto !important;
	background-color: #fff;
	position: relative;
	z-index: 1;
}
.relation_bnr_list{
	display: flex;
    /* justify-content: space-between; */
	justify-content: space-around;
    padding-top: 40px;
}
.relation_bnr_list li{
	width: 48%;
}
.relation_bnr_img{
	position: relative;
}
.relation_bnr_txt{
	padding-top: 20px;
	font-size: 16px;
    letter-spacing: 0.8px;
}
.relation_bnr .relation_bnr_img::after{
	content: "";
	color: #fff;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    transition-duration: 0.3s;
    opacity: 0;
    letter-spacing: 0.2em;
}
.relation_bnr.relation_bnr_fotmal .relation_bnr_img::after{
	content: "FORMAL";
}
.relation_bnr.relation_bnr_column .relation_bnr_img::after{
	content: "AOYAMA Journal";
}
.relation_bnr_list li a:hover .relation_bnr_img::after{
	opacity: 1;
}
@media screen and (min-width: 769px) {

}

@media screen and (max-width: 768px) {
	.relation__block{
		width: 90vw;
	}
	.relation__block::before{
		top: 6vw;
	}
	.relation__block h2{
		font-size: 9vw;
		letter-spacing: 1vw;
		width: 72vw;
    	max-width: 60vw;
	}
	.relation_bnr_list{
		padding-top: 6vw;
    	flex-wrap: wrap;
	}
	.relation_bnr_list li{
		width: 85vw;
    	margin: 0 auto;
	}
	.relation_bnr_list li:first-child{
		margin-bottom: 10vw;
	}
	.relation_bnr_txt{
		padding-top: 3vw;
    	font-size: 4vw;
    	letter-spacing: 0.2vw;
    	line-height: 8vw;
	}
	.relation__area{
		padding-bottom: 22vw;
	}
	.relation_bnr .relation_bnr_img::after{
		opacity: 1 !important;
	}
}

/* 打消し */
.l-cont_wrap{
	padding: 0 !important;;
}

@media screen and (max-width: 768px) {
	.l-wrap.js-wrap{
		background: none!important;
	}
	.l-bglogo{
		background: none!important;
	}
}

/* for parallax bg to remain underneath */
.yoneori{
	position: relative;
	z-index: 0;
}
/* for sticky elements*/
.yoneori-overflow{
	overflow-x: visible;
}
/* for parallax bg to remain underneath */
.yoneori-rel{
	overflow-x: hidden;
	position: relative;
}

.pane-contents .pane-main {
    margin-bottom: 0!important;
}
.pane-header + .pane-main {
    padding-bottom: 0!important;
}