@charset "UTF-8";


/* --------------------------------------------------------
　基本設定
-------------------------------------------------------- */
/*-- コンセプトエリア --*/
.brand-commons-layout .vertical-pin-box .bg-layer > .img{
width:100%;
height:100%;
filter:brightness(1);
margin:0 auto;
transition:.3s ease-in-out;
display:grid;
gap:.5rem;
}
.brand-commons-layout .vertical-pin-box .bg-layer.is-animated > .img{
transform:scale(1);
filter:brightness(.7);
transition:.3s ease-in-out;
gap:0;
}
.brand-commons-layout .vertical-pin-box .bg-layer > .img > figure{
position:relative;
overflow:hidden;
width:100%;
height:100%;
}
.brand-commons-layout .vertical-pin-box .bg-layer > .img > figure > img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
}
.brand-commons-layout .vertical-pin-box .bg-layer > .img > figure.change > img:nth-child(1) {
animation:fade1 6s infinite;
}
.brand-commons-layout .vertical-pin-box .bg-layer > .img > figure.change > img:nth-child(2) {
animation:fade2 6s infinite;
}
@keyframes fade1{
	0%,45%{opacity:1;}
	50%,95%{opacity:0;}
	100%{opacity:1;}
}
@keyframes fade2{
	0%,45%{opacity:0;}
	50%,95%{opacity:1;}
	100%{opacity:0;}
}
.brand-commons-layout .vertical-wrapper{
color:#fff;
}
.brand-commons-layout .vertical-wrapper > .vertical-content > .main-visual{
filter:contrast(1) brightness(1);
aspect-ratio:5 / 6;
overflow:hidden;
}
.brand-commons-layout#brand-elfrank-wrap .vertical-wrapper > .vertical-content > .main-visual{
filter:contrast(1.2) brightness(1.2);
}
.brand-commons-layout .vertical-wrapper > .vertical-content > .main-visual > video,
.brand-commons-layout .vertical-wrapper > .vertical-content > .main-visual > img{
object-fit:cover;
width:100%;
height:100%;
}
.brand-commons-layout .vertical-wrapper > .vertical-content > .main-text > h2{
line-height:1;
}
.brand-commons-layout .vertical-wrapper > .vertical-content > .main-text > h2 > div{
display:block;
}
.brand-commons-layout .vertical-wrapper > .vertical-content > .main-text > p.brand-data{
font-family:var(--font-family-en);
opacity:.7;
}


/*-- 取り扱い商材エリア --*/
.brand-commons-layout > .genre-area > h2{
font-family:var(--font-family-en);
color:#d5cfc4;
line-height:1;
width:max-content;
height:max-content;
}
.brand-commons-layout > .genre-area > h2 > span{
font-family:var(--font-family-jp);
display:block;
color:#000;
}
.brand-commons-layout > .genre-area > nav > ul > li > a{
display:block;
position:relative;
}
.brand-commons-layout > .genre-area > nav > ul > li > a > figure{
display:block;
filter:brightness(.95)contrast(1.1) saturate(1.3);
position:relative;
width:100%;
height:100%;
aspect-ratio:700 / 935;
overflow:hidden;
}
.brand-commons-layout > .genre-area > nav > ul > li > a > figure > img{
position:absolute;
top:50%;
left:50%;
object-fit:cover;
object-position:50% 50%;
transform:scale(1) translate(-50%,-50%);
width:100%;
height:100%;
}
.brand-commons-layout > .genre-area > nav > ul > li > a > div{
font-weight:600;
width:100%;
position:absolute;
}
.brand-commons-layout > .genre-area > nav > ul > li > a > div > p{
line-height:1;
padding:1rem 2rem;
width:max-content;
letter-spacing:.08em;
background:rgba(209,198,159,.78);
color:#fff;
border-radius:3rem;
font-family:var(--font-family-en);
}
.brand-commons-layout > .genre-area > nav > ul > li > a > div > span{
display:block;
margin:0 auto;
text-align:center;
color:#fff;
}

/*-- ショップエリア --*/
.brand-commons-layout > .shop-area{
width:100%;
background:rgba(255,255,255,.3);
border:1px solid #fff;
}
.brand-commons-layout > .shop-area > .online-store-list > ul{
display:grid;
}
.brand-commons-layout > .shop-area > .online-store-list > ul > li.scroll-view.fadein.is-animated{
transition:.4s ease-in-out;
}
.brand-commons-layout > .shop-area > .online-store-list > ul > li > a{
justify-content:space-between;
width:100%;
}
.brand-commons-layout > .shop-area > .online-store-list > ul > li > a:before{
order:2;
}

/*-- SNS SHAREエリア --*/
.brand-commons-layout > .sns-share-area > h2{
line-height:1;
font-family:var(--font-family-en);
width:max-content;
color:#666;
text-align:center;
}
.brand-commons-layout > .sns-share-area > h2 > span{
letter-spacing:0;
}
.brand-commons-layout > .sns-share-area > ul{
display:grid;
align-items:center;
justify-content:center;
}
.brand-commons-layout > .sns-share-area > ul > li > a{
display:flex;
align-items:center;
justify-content:center;
border-radius:100%;
background:rgba(255,255,255,.5);
border:1px solid #fff;
width:100%;
height:100%;
aspect-ratio:1 / 1;
}
.brand-commons-layout > .sns-share-area > ul > li > a > i{
color:#212121;
}

@media all and (min-width:769px){
	.brand-commons-layout{
	margin:0 auto;
	padding:8rem 0 30rem 0;
	}
	.brand-commons-layout + .brand-commons-layout{
	padding:0 0 30rem 0;
	}

	/*-- コンセプトエリア --*/
	.scroll-vertical-view-all{
	height:2800px;
	}
	.brand-commons-layout .vertical-pin-box .bg-layer:not(.is-animated) > .img{
	transform:scale(.98);
	}
	.brand-commons-layout .vertical-pin-box .bg-layer > .img{
	min-width:calc(1400px - 4rem);
	grid-template-columns:.20fr .20fr .20fr .40fr;
	gap:.5rem;
	}
	.brand-commons-layout .vertical-pin-box .bg-layer > .img > figure:nth-child(4){
	grid-row:span 2;
	}
	.brand-commons-layout .vertical-wrapper{
	margin:calc((2800px / 4) - 15rem) auto 0 auto;
	padding-bottom:15rem;
	color:#fff;
	}
	.brand-commons-layout .vertical-wrapper > .vertical-content{
	display:grid;
	grid-template-columns:1fr .8fr;
	grid-auto-rows:auto;
	width:calc(1400px - 4rem);
	gap:0 10rem;
	align-items:center;
	padding:0 2rem;
	}
	.brand-commons-layout .vertical-wrapper > .vertical-content > .main-text > h2 > div#rogo-elfrank{
	width:38rem;
	}
	.brand-commons-layout .vertical-wrapper > .vertical-content > .main-text > h2 > div#rogo-girl{
	width:25rem;
	}
	.brand-commons-layout .vertical-wrapper > .vertical-content > .main-text > h2 > div#rogo-flolia{
	width:26rem;
	}
	.brand-commons-layout .vertical-wrapper > .vertical-content > .main-text > h2 > div#rogo-lowo{
	width:25rem;
	}
	.brand-commons-layout .vertical-wrapper > .vertical-content > .main-text > h2 > div#rogo-ampirula{
	width:30rem;
	}
	.brand-commons-layout .vertical-wrapper > .vertical-content > .main-text > h3{
	font-size:2.6rem;
	margin-top:6rem;
	}
	.brand-commons-layout .vertical-wrapper > .vertical-content > .main-text > p{
	font-size:1.8rem;
	margin-top:6rem;
	width:48rem
	}
	.brand-commons-layout .vertical-wrapper > .vertical-content > .main-text > p.brand-data{
	margin-top:6.5rem;
	font-size:1.2rem;
	letter-spacing:.13em;
	}


	/*-- 取り扱い商材エリア --*/
	.brand-commons-layout > .genre-area{
	margin:20rem auto 15rem auto;
	padding:2rem;
	width:calc(1400px - 4rem);
	}
	.brand-commons-layout > .genre-area > h2{
	font-size:8rem;
	margin:0 auto 5rem auto;
	position:relative;
	}
	.brand-commons-layout > .genre-area > h2 > span{
	position:absolute;
	top:calc(50% + .5rem);
	left:50%;
	transform:translate(-50%,-50%);
	width:max-content;
	height:max-content;
	font-size:2rem;
	}
	.brand-commons-layout > .genre-area > nav > ul{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:2rem;
	}
	.brand-commons-layout > .genre-area > nav > ul > li > a > figure > img{
	transition:.8s ease-in-out;
	}
	.brand-commons-layout > .genre-area > nav > ul > li > a > figure > img.img-hovered{
	position:absolute;
	opacity:0;
	}
	.brand-commons-layout > .genre-area > nav > ul > li > a > figure:hover > img.img-hovered{
	opacity:1;
	width:110%;
	height:110%;
	}
	.brand-commons-layout > .genre-area > nav > ul > li > a > div{
	padding:0 4rem;
	bottom:4rem;
	}
	.brand-commons-layout > .genre-area > nav > ul > li > a > div > p{
	font-size:1.6rem;
	margin:0 auto 2rem auto;
	}
	.brand-commons-layout > .genre-area > nav > ul > li > a > div > span{
	font-size:1.6rem;
	}


	/*-- ショップエリア --*/
	.brand-commons-layout > .shop-area{
	margin:0 auto 15rem auto;
	padding:6rem 6rem;
	width:calc(1400px - 2rem);
	display:flex;
	justify-content:space-between;
	border-radius:2rem;
	}
	.brand-commons-layout > .shop-area > .commons-title{
	margin-bottom:4rem;
	}
	.brand-commons-layout > .shop-area > .commons-title > .sub{
	margin-bottom:1rem;
	}
	.brand-commons-layout > .shop-area > .commons-title > .main{
	font-size:3.2rem;
	}
	.brand-commons-layout > .shop-area > .online-store-list{
	width:95rem;
	}
	.brand-commons-layout > .shop-area > .online-store-list > ul{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:4rem 4rem;
	padding:0 1.46rem 0 0;
	width:100%;
	}
	.brand-commons-layout > .shop-area > .online-store-list > ul > li > a{
	height:6rem;
	}
	.brand-commons-layout > .shop-area > .online-store-list > ul > li > a:before{
	width:6rem;
	}

	/*-- SNS SHAREエリア --*/
	.brand-commons-layout > .sns-share-area{
	display:flex;
	align-items:center;
	justify-content:space-between;
	width:calc(1400px - 4rem);
	margin:0 auto;
	padding:0 2rem;
	}
	.brand-commons-layout > .sns-share-area > h2{
	font-size:2.2rem;
	display:flex;
	align-items:center;
	letter-spacing:.05em;
	gap:0 1.5rem;
	}
	.brand-commons-layout > .sns-share-area > h2 > span{
	font-size:1.4rem;
	}
	.brand-commons-layout > .sns-share-area > ul{
	grid-template-columns:repeat(5,5rem);
	gap:0 3rem;
	width:max-content;
	}
	.brand-commons-layout > .sns-share-area > ul > li > a > i{
	font-size:2.5rem;
	}
}
@media all and (max-width:768px){
	.brand-commons-layout{
	margin:0 auto;
	padding:0 0 10rem 0;
	}

	/*-- コンセプトエリア --*/
	.scroll-vertical-view-all{
	height:2800px;
	}
	.brand-commons-layout .vertical-pin-box .bg-layer:not(.is-animated) > .img{
	transform:scale(.95);
	}
	.brand-commons-layout .vertical-pin-box .bg-layer > .img{
	height:100%;
	grid-template-columns:repeat(3,1fr);
	grid-template-rows:1fr .5fr .5fr;
	gap:.3rem;
	}
	.brand-commons-layout .vertical-pin-box .bg-layer > .img > figure:nth-child(1){
	order:2;
	}
	.brand-commons-layout .vertical-pin-box .bg-layer > .img > figure:nth-child(2){
	order:3;
	}
	.brand-commons-layout .vertical-pin-box .bg-layer > .img > figure:nth-child(3){
	order:4;
	}
	.brand-commons-layout .vertical-pin-box .bg-layer > .img > figure:nth-child(4){
	order:1;
	grid-column:span 3;
	}
	.brand-commons-layout .vertical-pin-box .bg-layer > .img > figure:nth-child(5){
	order:5;
	}
	.brand-commons-layout .vertical-pin-box .bg-layer > .img > figure:nth-child(6){
	order:6;
	}
	.brand-commons-layout .vertical-pin-box .bg-layer > .img > figure:nth-child(7){
	order:7;
	}
	.brand-commons-layout .vertical-pin-box .bg-layer > .img > figure > img{
	object-position:50% 10%;
	}
	.brand-commons-layout .vertical-wrapper{
	margin-top:calc(2800px / 2);
	color:#fff;
	}
	.brand-commons-layout .vertical-wrapper > .vertical-content{
	width:75vw;
	margin:0 auto;
	}
	.brand-commons-layout .vertical-wrapper > .vertical-content > .main-text > h2 > div{
	margin:6rem auto 0 auto;
	}
	.brand-commons-layout .vertical-wrapper > .vertical-content > .main-text > h2 > div#rogo-elfrank{
	width:55vw;
	}
	.brand-commons-layout .vertical-wrapper > .vertical-content > .main-text > h2 > div#rogo-girl{
	width:45%;
	}
	.brand-commons-layout .vertical-wrapper > .vertical-content > .main-text > h2 > div#rogo-flolia{
	width:45%;
	}
	.brand-commons-layout .vertical-wrapper > .vertical-content > .main-text > h2 > div#rogo-lowo{
	width:45%;
	}
	.brand-commons-layout .vertical-wrapper > .vertical-content > .main-text > h2 > div#rogo-ampirula{
	width:45%;
	}
	.brand-commons-layout .vertical-wrapper > .vertical-content > .main-text > h3{
	font-size:4.4vw;
	margin-top:4rem;
	text-align:center;
	}
	.brand-commons-layout .vertical-wrapper > .vertical-content > .main-text > p{
	margin-top:4rem;
	width:100%;
	font-size:1.4rem;
	}
	.brand-commons-layout .vertical-wrapper > .vertical-content > .main-text > p.brand-data{
	margin-top:6rem;
	font-size:1.0rem;
	text-align:center;
	line-height:1.3;
	letter-spacing:.08em;
	}


	/*-- 取り扱い商材エリア --*/
	.brand-commons-layout > .genre-area{
	margin:5rem auto;
	padding:0;
	}
	.brand-commons-layout > .genre-area > h2{
	font-size:8vw;
	margin:0 auto 3rem 0;
	padding:0 3rem;
	text-align:center;
	width:100%;
	}
	.brand-commons-layout > .genre-area > h2 > span{
	font-size:1.6rem;
	margin:2rem auto 0 auto;
	}
	.brand-commons-layout > .genre-area > nav{
	overflow-x:auto;
	width:100%;
	white-space:nowrap;
	-webkit-overflow-scrolling:touch;
	padding:0 3rem;
	}
	.brand-commons-layout > .genre-area > nav > ul{
	display:flex;
	gap:.5rem;
	width:max-content;
	}
	.brand-commons-layout > .genre-area > nav > ul > li{
	width:calc(50vw - 3.25rem);
	}
	.brand-commons-layout > .genre-area > nav > ul > li > a > div{
	padding:0 1rem;
	bottom:2rem;
	}
	.brand-commons-layout > .genre-area > nav > ul > li > a > div > p{
	font-size:3vw;
	margin:0 auto 1rem auto;
	}
	.brand-commons-layout > .genre-area > nav > ul > li > a > div > span{
	font-size:2.6vw;
	}

	/*-- ショップエリア --*/
	.brand-commons-layout > .shop-area{
	margin:0 auto 5rem auto;
	padding:3.5rem 3rem 4rem 3rem;
	width:calc(100% - 6rem);
	border-radius:2rem;
	}
	.brand-commons-layout > .shop-area > .commons-title{
	margin:0 auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:0 0 3rem 0;
	border-bottom:1px solid #ddd;
    }
	.brand-commons-layout > .shop-area > .commons-title > .sub{
	font-size:1.7rem;
	margin:0;
    }
	.brand-commons-layout > .shop-area > .commons-title > .main{
	font-size:1.2rem;
	padding:0;
	}
	.brand-commons-layout > .shop-area > .online-store-list > ul{
	margin-top:2rem;
	padding:0;
	}
	.brand-commons-layout > .shop-area > .online-store-list > ul > li + li{
	margin-top:2rem;
	}
	.brand-commons-layout > .shop-area > .online-store-list > ul > li > a{
	font-size:1.5rem;
	}
	.brand-commons-layout > .shop-area > .online-store-list > ul > li > a:before{
	height:4rem;
	}


	/*-- SNS SHAREエリア --*/
	.brand-commons-layout > .sns-share-area{
	padding:0 3rem;
	}
	.brand-commons-layout > .sns-share-area > h2{
	font-size:1.8rem;
	letter-spacing:.06em;
	margin:0 auto 3rem auto;
	}
	.brand-commons-layout > .sns-share-area > h2 > span{
	font-size:1.2rem;
	display:block;
	margin:1.2rem auto 0 auto;
	width:max-content;
	}
	.brand-commons-layout > .sns-share-area > ul{
	grid-template-columns:repeat(5,3.5rem);
	gap:0 2rem;
	width:calc(100% - 6rem);
	margin:0 auto;
	}
	.brand-commons-layout > .sns-share-area > ul > li > a > i{
	font-size:2rem;
	}
}