@charset "utf-8";

#container_ #app > #home {width:930px; margin-left:-465px; padding-left:50%; padding-right:50%; background:#fff8dc center 0 repeat-y;}
@media screen and (min-width:600px) {
#container_ #app > #home {background-image:url(../assets/images/home/background.jpg?v=1.1.0-20230310);}
}
@media screen and (max-width:599px) {
#container_ #app > #home {
	width:auto; margin-left:-10px; margin-right:-10px; padding-left:10px; padding-right:10px; 
	background:url(../assets/images/home/background_sp.jpg?v=1.1.0-20230310); background-size:100% auto;}
}

#container_ #app > #home > header {position:relative;}
#container_ #app > #home > header > .image {display:block; margin:0 calc(50% - 50vw); background:#ffcb00; text-align:center;}
#container_ #app > #home > header > .image > img {margin:0 auto;}
#container_ #app > #home > header > h1,
#container_ #app > #home > header > strong {
	position:absolute; left:50%; z-index:2; transform:translate(-50%,-50%); font-weight:bold; line-height:1;}
#container_ #app > #home > header > h1 {top:125px; font-size:36px;}
#container_ #app > #home > header > h1::after {
	display:block; content:''; height:20px; position:absolute; left:-0.25em; right:-0.25em; bottom:-30%; z-index:-1; 
	background:#fff2bf;}
#container_ #app > #home > header > strong {top:175px; font-size:16px;}
#container_ #app > #home > header > nav {padding:40px 0;}
#container_ #app > #home > header > nav > h1 {display:none;}
#container_ #app > #home > header > nav > ul {display:flex; flex-wrap:nowrap; font-size:15px; font-weight:bold; line-height:1.3333;}
#container_ #app > #home > header > nav > ul > li {flex:1 1 100%; display:flex; border:1px solid #808784; border-width:0 0 0 1px;}
#container_ #app > #home > header > nav > ul > li:last-child {border-right-width:1px;}
#container_ #app > #home > header > nav > ul > li > a {
	flex:1 1 100%; display:flex; justify-content:center; align-items:center; 
	position:relative; margin:-40px 0; padding:40px 35px; text-decoration:none;}
#container_ #app > #home > header > nav > ul > li > a::after {
	display:flex; align-items:center; justify-content:center; content:'\e802'; 
	width:3em; position:absolute; right:0; top:0; bottom:0; font:normal 1em/1 icons;}
@media screen and (max-width:1260px) {
#container_ #app > #home > header > .image {margin-left:-165px; margin-right:-165px;}
}
@media screen and (max-width:599px) {
#container_ #app > #home > header {}
#container_ #app > #home > header > .image {margin:0 -20px;}
#container_ #app > #home > header > .image > img {width:100%; height:auto;}
#container_ #app > #home > header > h1,
#container_ #app > #home > header > strong {white-space:nowrap;}
#container_ #app > #home > header > h1 {top:19vw; font-size:18px; font-size:5.625vw;}
#container_ #app > #home > header > h1::after {height:3.125vw; bottom:-17%;}
#container_ #app > #home > header > strong {top:30vw; font-size:10px; font-size:3.125vw; line-height:1.6;}
#container_ #app > #home > header > nav {margin:7.8125vw 20px; padding:0; font-size:12px; font-size:3.75vw;}
#container_ #app > #home > header > nav > h1 {display:block; position:relative; padding:1em; background:#01172d; color:#fff; font-weight:bold;}
#container_ #app > #home > header > nav > ul {display:block; font-size:12px; font-size:3.75vw;}
#container_ #app > #home > header > nav > ul > li {padding:1em; border-color:#bfc0b0; border-width:0 0 1px;}
#container_ #app > #home > header > nav > ul > li:last-child {border-right-width:0;}
#container_ #app > #home > header > nav > ul > li > a {margin:-1em; padding:inherit; text-decoration:none;}
#container_ #app > #home > header > nav > ul > li > a::after {display:none;}
#container_ #app > #home > header > nav.fac-switcher {overflow:hidden; transition:height 0.3s cubic-bezier(0.645,0.045,0.355,1);}
#container_ #app > #home > header > nav.fac-switcher > h1 {cursor:pointer;}
#container_ #app > #home > header > nav.fac-switcher > h1::after {
	display:flex; justify-content:center; align-items:center; 
	content:'\e822'; width:2em; position:absolute; right:0; top:0; bottom:0; font:normal 2em/1 icons; 
	transition:transform 0.3s cubic-bezier(0.645,0.045,0.355,1);}
#container_ #app > #home > header > nav.fac-switcher--hidden:not(.fac-switcher--shown) > *:not(h1) {display:none;}
#container_ #app > #home > header > nav.fac-switcher--shown:not(.fac-switcher--hidden) > h1::after {transform:rotate(-180deg);}
}

#container_ #app > #home > .categories {margin:0 -125px; padding:0 125px 60px; background:#fff;}
#container_ #app > #home > .categories > .category {position:relative; padding:70px 0 40px;}
#container_ #app > #home > .categories > .category > h1 {position:relative; padding:0 0 20px; font-size:28px; font-weight:bold; line-height:1;}
#container_ #app > #home > .categories > .category > h1::after {
	display:block; content:''; width:60px; height:0; position:absolute; left:0; right:0; bottom:0; 
	margin:auto; border-bottom:2px solid #01172d;}
#container_ #app > #home > .categories > .category > .c-entry-list {padding-top:65px;}
#container_ #app > #home > .categories > .category > .more {margin:60px auto 0;}
#container_ #app > #home > .categories > .category::before,
#container_ #app > #home > .categories > .category::after  {display:block; content:''; position:absolute; background:center center no-repeat; overflow:hidden;}
#container_ #app > #home > .categories > #skincare::before  {width:175px; height:220px; left:-175px; bottom:-120px; background-image:url(../assets/images/home/skincare_ornament01.png);}
#container_ #app > #home > .categories > #skincare::after   {width:100px; height:120px; right:-145px; bottom:-30px; background-image:url(../assets/images/home/skincare_ornament02.png);}
#container_ #app > #home > .categories > #bodycare::before  {width:160px; height:90px; left:-165px; bottom:-53px; background-image:url(../assets/images/home/bodycare_ornament01.png);}
#container_ #app > #home > .categories > #bodycare::after   {width:300px; height:350px; right:-295px; bottom:-240px; background-image:url(../assets/images/home/bodycare_ornament02.png);}
#container_ #app > #home > .categories > #haircare::before  {width:300px; height:230px; left:-300px; bottom:-120px; background-image:url(../assets/images/home/haircare_ornament01.png);}
#container_ #app > #home > .categories > #haircare::after   {width:160px; height:170px; right:-210px; bottom:-90px; background-image:url(../assets/images/home/haircare_ornament02.png);}
#container_ #app > #home > .categories > #fragrance::before {width:120px; height:170px; left:-175px; bottom:-80px; background-image:url(../assets/images/home/fragrance_ornament01.png);}
#container_ #app > #home > .categories > #fragrance::after  {width:180px; height:240px; right:-175px; bottom:-125px; background-image:url(../assets/images/home/fragrance_ornament02.png);}
#container_ #app > #home > .categories > #gift::before      {}
#container_ #app > #home > .categories > #gift::after       {}
@media screen and (max-width:599px) {
#container_ #app > #home > .categories {margin:0 10px; padding:0 10px 12.5vw;}
#container_ #app > #home > .categories > .category {position:relative; padding:10.9375vw 0 6.25vw;}
#container_ #app > #home > .categories > .category > h1 {padding:0 0 1em; font-size:16px; font-size:5vw;}
#container_ #app > #home > .categories > .category > h1::after {width:9.375vw; border-width:0.3125vw; }
#container_ #app > #home > .categories > .category > .c-entry-list {padding-top:9.375vw;}
#container_ #app > #home > .categories > .category > .more {margin:6.25vw auto 0;}
#container_ #app > #home > .categories > .category::before,
#container_ #app > #home > .categories > .category::after  {background-size:contain;}
#container_ #app > #home > .categories > #skincare::before  {width:27.3437vw; height:34.375vw; left:-14vw; bottom:-16vw;}
#container_ #app > #home > .categories > #skincare::after   {width:15.625vw; height:18.75vw; right:-9vw; bottom:-6vw;}
#container_ #app > #home > .categories > #bodycare::before  {width:25vw; height:14.0625vw; left:-10vw; bottom:-4vw;}
#container_ #app > #home > .categories > #bodycare::after   {width:46.875vw; height:54.6875vw; right:-32vw; bottom:-45vw;}
#container_ #app > #home > .categories > #haircare::before  {width:46.875vw; height:35.9375vw; left:-30vw; bottom:-20vw;}
#container_ #app > #home > .categories > #haircare::after   {width:25vw; height:26.5625vw; right:-15vw; bottom:-15vw;}
#container_ #app > #home > .categories > #fragrance::before {width:18.75vw; height:26.5625vw; left:-9vw; bottom:-12vw;}
#container_ #app > #home > .categories > #fragrance::after  {width:28.125vw; height:37.5vw; right:-13vw; bottom:-23vw;}
#container_ #app > #home > .categories > #gift::before      {}
#container_ #app > #home > .categories > #gift::after       {}
}