@charset "utf-8";

@import url('font.css');
@import url('common.css');
@import url('swiper-bundle.min.css');
@import url('animate.css');
@import url('board-common.css');
@import url('board-reset.css');

:root {
    --white: #fff;
    --black: #000;
}

.subpage main {min-height: calc(100vh - 424px); overflow-x: hidden;}

.wrapper01 {width: 1280px; margin: 0 auto;}
.wrapper02 {width: 1820px; margin: 0 auto;}
.para-wrap {padding-left: 50px; padding-right: 50px;}
.para01 {padding-top: 165px; padding-bottom: 120px;}
.para02 {padding-top: 185px; padding-bottom: 100px;}
.para03 {padding-top: 85px; padding-bottom: 120px;}


.cm-title01 {position: absolute; z-index: 1; bottom: 80px; left:80px; color: var(--white);}
.cm-title01 p {font-size: 18px; opacity: 0.5; font-weight: 300;}
.cm-title01 h3 {margin: 16px 0 40px; font-size: 40px; font-weight: 600; line-height: 1.3;}
.cm-title01 a {display: inline-block;font-size: 15px; color: var(--white); line-height: 1.2; padding: 11px 39px; border: 1px solid var(--white); border-radius: 4px; transition: all .3s ease; box-sizing: border-box;}
.cm-title01 a:hover {color: var(--black); background: var(--white);}

.cm-title02 {flex-grow: 1; padding-bottom: 80px; padding-left: 80px;}
.cm-title02 span {line-height: 1.4; color: #aaa;} 
.cm-title02 h3 {font-size: 54px; font-weight: 500; line-height: 1.2; color: #333;} 
.cm-title02 h3 {margin: 16px 0 32px; font-size: 54px; font-weight: 500; line-height: 1.2; color: #333; letter-spacing: -0.6px;} 
.cm-title02 p {margin-bottom: 32px; color: #888; line-height: 1.5; letter-spacing: 0.2px;}
.cm-title02 a {display: flex; align-items: center; justify-content: center; width: 129px; font-size: 15px; height: 40px; line-height: 1.4; padding-right: 56px; background: url(../images/ico/ico_arrow_round.svg) no-repeat right center;}

.select-wrap {position: relative;}
.select-wrap:before {content:''; position: absolute; z-indeX: 1; width: 43px; height: 43px; right: 0; transform: rotate(90deg); background: url(../images/ico/ico_paging_arrow01.svg) no-repeat center/cover;}
.select-wrap select {width: 100%;}

.btn-wrap {display: flex; align-items: center; gap: 8px;}
.btn-wrap [class$="-btn"] {display: flex; align-items: center; justify-content: center; font-size: 15px; border-radius: 4px; border: 1px solid var(--black);}
.btn-wrap .black-btn {color: var(--white); background: var(--black);}
.btn-wrap .line-btn {color: var(--black);}

.btn-wrap.admin {display: flex; align-items: center; justify-content: space-between;}
.btn-wrap.fx-ed {justify-content: flex-end;}
.btn-wrap.admin > div {display: flex; align-items: center; gap: 4px;}
.btn-wrap.large [class$="-btn"] {width: 240px; height: 46px;}
.btn-wrap.small [class$="-btn"] {width: 75px; height: 36px; font-size: 12px; font-weight: 600;}
.btn-wrap.xs {gap: 4px;}
.btn-wrap.xs [class$="-btn"] {width: 60px; height: 28px; font-size: 10px; font-weight: 600;}

.visual {position: relative; width: 100%; height: 100vh; overflow-x: hidden;}
.visual .visual-swiper {height: 100%;}
.visual .visual-swiper .swiper-slide img {position: relative; left: 50%; transform: translateX(-50%); width: auto; min-width: 100%; max-width: inherit;min-height: 100%; height: 100%; object-fit: cover}

.tabwrap .tab li {cursor: pointer;}

.product {padding: 100px 80px 66px; overflow-x: hidden; background: #FBFAF8;}
.product .list-top {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; border-bottom: 0;}
.product .list-top ul {display: flex; align-items: center; gap: 16px;}
.product .list-top ul li {font-size: 24px; font-weight: 400; line-height: 1.3; opacity: 0.2; transition: all .3s ease;}
.product .list-top ul li.on,
.product .list-top ul li:hover {font-weight: 500; opacity: 1;}
.product .list-top > a {font-size: 14px; line-height: 1.7; opacity: 0.5; transition: all .3s ease;}
.product .list-top > a:hover {opacity: 1;}

.product .product-swiper {position: relative;}
.product .product-swiper .swiper-pagination {position: relative; display: flex; align-items: center; justify-content: center; margin-top: 66px;}
.product .product-swiper .swiper-pagination span {width: 20px; height: 2px; border-radius: 2px; background: var(--black); opacity: 0.1; transition: all .3s ease;}
.product .product-swiper .swiper-pagination span:hover,
.product .product-swiper .swiper-pagination span.swiper-pagination-bullet-active {opacity: 1;}
.product .product-swiper .img {width: 100%; aspect-ratio: 1/1}
.product .product-swiper .txt {display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; margin-top: 16px; line-height: 1.3;}
.product .product-swiper .txt span {font-size: 14px; opacity: 0.3;}
.product .product-swiper .txt strong {font-size: 15px; font-weight: 400; }

.category {padding: 120px 0;}
.category h3 {display: block; font-size: 24px; font-weight: 500; line-height: 1.3; padding-left: 80px; margin-bottom: 50px;}
.category .grid.half .full {overflow: hidden; margin-right: -0.5px;}
.category .grid.half .full .cate-swiper {width: 100%;}
.category .grid.half .four .half > div {position: relative; z-index:2; flex: 1; overflow: hidden;}
.category .grid.half .four .half > div:before {content:''; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background: var(--black); opacity: 0; transition: all .3s ease;}
.category .grid.half .four .half > div:after {content:''; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; transition: all .3s ease;}
.category .grid.half .four .half > div:hover:after {transform: scale(1.2)}
.category .grid.half .four .half > div:hover:before {opacity: 0.3;}
.category .grid.half .four .half > div a {position: relative; z-index: 2; display: block; width: 100%; height: 100%; padding: 30px;}
.category .grid.half .four .half > div a strong {font-size: 28px; font-weight: 500; line-height: 1.3; transition: all .3s ease;}
.category .grid.half .four .half > div a:hover strong {color: var(--white);}
.category .grid.half .four .half > div a span {position: absolute; z-index:1; top: 50%; left: 50%; transform: translate(-50%,-50%); padding-right: 20px; color: var(--white); background: url(../images/ico/ico_arrow_righttop01.svg) no-repeat right center; opacity: 0; transition: all .3s ease;}
.category .grid.half .four .half > div a:hover span {opacity: 1;}
.category .grid.half .four .half > div.face:after {background-image: url(../images/pic/pic_main_cate01.png);}
.category .grid.half .four .half > div.eyes:after {background-image: url(../images/pic/pic_main_cate02.png);}
.category .grid.half .four .half > div.lip:after {background-image: url(../images/pic/pic_main_cate03.png);}
.category .grid.half .four .half > div.skin:after {background-image: url(../images/pic/pic_main_cate04.png);}
.grid {display: flex; align-items: stretch;}
.grid.jc-end {justify-content: space-between;;}
.grid.half > div {flex: 1; flex-shrink: 0;}
.grid.four {flex-direction: column;}
.grid.four > div {height: 50%;}

.half-bnr {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 80px;}
.half-bnr .cm-title02 {flex-grow: 1;}
.half-bnr .imgbox {width: 62.5vw; aspect-ratio: 3/2;}

.half-bnr.heritage .cm-title02 {order: 0;}
.half-bnr.heritage .imgbox {order: 1;}
.half-bnr.history {margin-bottom: 120px;}
.half-bnr.history .cm-title02 {order: 1;}
.half-bnr.history .imgbox {order: 0;}

.skincore {position: relative; margin-bottom: -5px;}
.skincore video {width: 100%;}
.skincore .cm-title01 {bottom: 85px;}

/* subpage */
.sub-visual {display: flex; align-items: flex-start; justify-content: flex-end; flex-direction: column; color: var(--white); width: 100%; height: 900px; padding: 80px; background-repeat: no-repeat; background-position: center; background-size: cover;}
.sub-visual > p {font-size: 18px; line-height: 1.3; opacity: 0.5; font-weight: 300;}
.sub-visual > h3 {display: block; margin-top: 8px; font-size: 50px; font-weight: 500; line-height: 1.3; letter-spacing: 1.25px;}
.sub-visual.about {background-image: url(../images/bg/bg_subvisual_about01.jpg);}
.sub-visual.heritage {position: relative; height: 100vh; align-items: center; justify-content: center; background-image: url(../images/bg/bg_subvisual_heritage01.jpg);}

.split-text { position: absolute; font-size: 50px; font-weight: 600; 
line-height: 1.2; text-align: center; margin: 0; width: 100%; }
.base {color: rgba(255, 255, 255, 0.1); z-index: 1;}
.overlay {color: #fff; z-index: 2;}
.split-text span {display: inline-block; min-width: 0.1em;}
.overlay span {opacity: 0;}

.about-info {display: flex; align-items: center; gap: 80px; padding-top: 80px; padding-bottom: 80px;}
.about-info > div {flex: 1;}
.about-info .txtbox {font-size: 15px; line-height: 1.5; color: #666}
.about-info .txtbox p + p {margin-top: 26px;}
.about-info .txtbox strong {font-weight: 600; color: var(--black);}


.his-list {width: 100%; padding: 50px 0 0 50px; overflow: hidden;}
.his-list ol {display: flex; align-items: stretch; width: max-content; will-change: transform;}
.his-list ol li {flex-shrink: 0; width: 25vw; --draw: 0;}
.his-list ol li > strong {display: block; font-size: 32px; font-weight: 600; justify-content: 1.3; padding-bottom: 23px;}
.his-list ol li .con {position: relative; line-height: 1.5; color: #444; padding-top: 24px; border-top: 1px solid #eee; padding-right: 80px;}
.his-list ol li .con:after {content:''; position: absolute; z-index: 1; top: 0; left: 0;width: calc(var(--draw) * 100%); height: 1px; background: var(--black); transition: all .3s ease;}
.his-list ol li .con:before {content:''; position: absolute; z-index: 2; top: 0; left: 0; transform: translateY(-50%); width: 10px; height: 10px; background: var(--white); border: 3px solid var(--black); border-radius: 50px;}
.his-list ol li .con .txtbox {margin-bottom: 40px;}
.his-list ol li .con .txtbox p strong {font-weight: 500; color: var(--black);}
.his-list ol li .con .imgbox {border-radius: 8px; overflow: hidden;}
.his-list ol li .con .imgbox img {width: 100%;}

.heritage-wrap {margin-top: -40px; margin-bottom: 80px; padding-top: 80px; padding-bottom: 80px; background: #FBFAF8;}
.heritage-wrap > div {display: flex; align-items: center; justify-content: space-between; padding-right: 42px;}
.heritage-wrap .txtbox {width: 52.75%;}
.heritage-wrap .txtbox > span {line-height: 1.4; color: #aaa;}
.heritage-wrap .txtbox > h3 {display: block; margin-top: 16px; font-size: 44px; font-weight: 500; line-height: 1.3; color: #333;}
.heritage-wrap .txtbox > div {margin-top: 40px;}
.heritage-wrap .txtbox > div p {line-height: 1.5; color: #888;}
.heritage-wrap .txtbox > div p + p {margin-top: 24px;}
.heritage-wrap .imgbox {display: flex; align-items: flex-start; gap: 50px; width: 44.95%; flex-shrink: 0;}
.heritage-wrap .imgbox > p {width: calc(50% - 25px); border-radius: 8px; overflow: hidden;}
.heritage-wrap .imgbox .img02 {margin-top: 240px;}

.sub-title {padding-bottom: 80px;}
.sub-title h3 {font-size: 50px; font-weight: 500; line-height: 1.3;}
.sub-title > div {margin-top: 16px;}
.sub-title > div > p {line-height: 1.6; color: #888;}
.sub-title.store {padding-bottom: 60px;}
.sub-title.news {padding-bottom: 40px;}

.company-wrap {display: flex; align-items: stretch; gap: 80px;}
.company-wrap > div {flex: 1;}
.company-wrap > div h4 {display: block; margin-bottom: 32px; font-size: 32px; line-height: 1.3; font-weight: 600;}

.logobox > div + div {margin-top: 40px;}
.logobox strong {display:block; margin-bottom: 12px; font-weight: 400; line-height: 1.6; color: #aaa;}
.logobox ul {display: flex; align-items: center; gap: 8px; flex-wrap: wrap;}
.logobox ul li {width: 180px; border: 1px solid #eee;}

.barnd-heritage {position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: -100px; padding-bottom: 100px;}
.barnd-heritage .txtbox {padding-bottom: 100px;}
.barnd-heritage .txtbox h3 {display: block; margin-bottom: 40px; font-weight: 500; font-size: 44px; line-height: 1.3; color: #333;}
.barnd-heritage .txtbox p {line-height: 1.5; color: #888;}
.barnd-heritage .txtbox p + p {margin-top: 24px;}
.barnd-heritage .img {width: 620px;}

.adr-wrap {display: flex; align-items: stretch; justify-content: space-between; gap: 80px;}
.adr-wrap > div {flex: 1;}
.adr-wrap > div > strong {font-size: 32px; line-height: 1.3; font-weight: 600; letter-spacing: 1.4px;}
.adr-wrap > div .img {margin: 32px 0;}
.adr-wrap > div .info strong {font-size: 20px; line-height: 1.5; font-weight: 600; letter-spacing: -0.5px;}
.adr-wrap > div .info p {margin-top: 8px; line-height: 1.5; color: #888;}

.contact-detail {display: flex; align-items: center;}
.contact-detail > div {flex: 1;}
.contact-detail dl {text-align: center;}
.contact-detail dl + dl {margin-top: 36px;}
.contact-detail dl dt {color: #aaa; font-size: 15px;}
.contact-detail dl dd {margin-top: 10px; font-size: 18px;}
.contact-detail dl.mail dd {margin-top: 12px;}
.contact-detail .util-box {justify-content: center; gap: 25px;}
.contact-detail .util-box > a {color: var(--black); font-size: 16px; padding: 6px 0 6px 24px; background-position: left center; background-size: 20px;}
.contact-detail .util-box > a.youtube {background-image: url(../images/ico/ico_sns_youtube01_b.svg);}
.contact-detail .util-box > a.insta {background-image: url(../images/ico/ico_sns_insta01_b.svg);}
.contact-detail .util-box > a.tiktok {background-image: url(../images/ico/ico_sns_tiktok01_b.svg);}

.sub-title.news.list-top {border-bottom: 0;}

/* Product */
.product-list-wrap h3 {display: block; margin-bottom: 16px; font-size: 50px; font-weight: 500; line-height: 1.3;}
.product-list-wrap .product-list {display: flex; align-items: stretch; gap: 54px 36px; flex-wrap: wrap;}
.product-list-wrap .product-list > li {width: calc(25% - 27px);}
.product-list-wrap .product-list > li > a {display: block; width: 100%; height: 100%;}
.product-list-wrap .product-list > li .imgbox {width: 100%; border-radius: 8px; overflow: hidden; aspect-ratio: 1/1; background: #FBFAF8;}
.product-list-wrap .product-list > li .imgbox img {display: block; object-fit: cover; max-width: none; width: auto; height: 100%;}
.product-list-wrap .product-list > li .txt {margin-top: 13px; text-align: center;}
.product-list-wrap .product-list > li .txt span {font-size: 14px; line-height: 1.3; opacity: 0.3;}
.product-list-wrap .product-list > li .txt strong {display: block; margin-top: 8px; font-size: 15px; line-height: 1.3; font-weight: 400;}
.list-top {display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; margin-bottom: 60px;}

.product-detail-view {position: relative; padding-top: 85px;}
.product-detail-view .product-infobox {display: flex; align-items: center;}
.product-detail-view .product-infobox > div {width: 50%;}
.product-detail-view .mainimg-swiper .swiper-slide img {width: 100%;}
.product-detail-view .main-info {padding: 56px 100px 0}
.product-detail-view .main-info .name {display: block; margin-bottom: 16px; font-size: 26px; font-weight: 600; line-height: 1.5;}
.product-detail-view .main-info .discription {margin-bottom: 50px; font-size: 15px; line-height: 1.5; color: #888;}
.product-detail-view .main-info .discription p + p {margin-top: 4px;}
.product-detail-view .main-info > ul {display: flex; align-items: center;}
.product-detail-view .main-info > ul > li {position: relative; font-weight: 500; line-height: 1.5;}
.product-detail-view .main-info > ul > li::after {content: ''; display: inline-block; width: 1px; height: 12px; margin: 0 8px; background: #ddd;}
.product-detail-view .main-info > ul > li:last-child {display: flex; align-items: center;}
.product-detail-view .main-info > ul > li.last::after {display: none;}
.product-detail-view .main-info > ul > li:last-child::after {display: none;}
.product-detail-view .main-info .color-list ol {display: flex; align-items: center; margin-left: 24px; gap: 8px;}
.product-detail-view .main-info .color-list ol li {position: relative; cursor: pointer;}
.product-detail-view .main-info .color-list ol strong {position: absolute; z-index: 1; top: -27.5px; left: 50%; transform: translateX(-50%); display: inline-block; white-space: nowrap; width: fit-content; font-size: 10px; font-weight: 600; line-height: 1.3; color: var(--white); width: auto; padding: 3px 7px; border-radius: 4px; background: var(--black); opacity: 0; transition: all .3s ease;}
.product-detail-view .main-info .color-list ol strong:after {content:''; position: absolute; z-index: 1; bottom: -4px; left: 50%; transform: translateX(-50%); width: 8px; height: 6px; background: url(../images/ico/ico_angle01_b.svg) no-repeat center/cover;}
.product-detail-view .main-info .color-list ol li:hover strong {opacity: 1;}
.product-detail-view .main-info .color-list ol .img {width: 20px; height: 20px;}
.product-detail-view .main-info .color-list ol .img img {display: block; width: 100%; object-fit: cover; border-radius: 20px;}
.product-detail-view .main-info .tag {display: flex; align-items: center; gap: 4px; margin-top: 50px; flex-wrap: wrap;}
.product-detail-view .main-info .tag span {font-size: 13px; line-height: 1.5; color: #888; border: 1px solid #eee; border-radius: 4px; padding: 4px 8px;}
.product-detail-view .main-info .btn-wrap {margin: 80px 0;}
.product-detail-view .key-ingre {border-bottom: 1px solid #eee;}
.product-detail-view .key-ingre .keytit {display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding-bottom: 10px;}
.product-detail-view .key-ingre .keytit strong {font-size: 15px; font-weight: 600; line-height: 1.5;}
.product-detail-view .key-ingre .keytit a {width: 34px; height: 34px; text-indent: -9999px; overflow: hidden; flex-shrink: 1; background: url(../images/ico/ico_product_close01.svg) no-repeat center/34px; transform: rotate(-45deg); transition: all .3s ease;}
.product-detail-view .key-ingre .con {display: none; line-height: 1.5; font-size: 13px; color: #888; padding-bottom: 24px;}
.product-detail-view .key-ingre .con p + p {margin-top: 8px;}
.product-detail-view .key-ingre .keytit.on {padding-bottom: 0;}
.product-detail-view .key-ingre .keytit.on a {width: 46px; height: 46px; transform: rotate(0);}

.product-detail-view .benefit-imgbox {display: flex; align-items: center;}
.product-detail-view .benefit-imgbox > div {width: 50%;}
.product-detail-view .benefit-list {padding: 0 100px;}
.product-detail-view .benefit-list ol li {display: flex; align-items: flex-start; gap: 24px;}
.product-detail-view .benefit-list ol li + li {margin-top: 50px;}
.product-detail-view .benefit-list ol li strong {display: block; font-size: 18px; font-weight: 600; line-height: 1.5;}
.product-detail-view .benefit-list ol li > strong {width: 24px; flex-shrink: 0;}
.product-detail-view .benefit-list ol li > div p {line-height: 1.5; margin-top: 8px; color: #888;}
.product-detail-view > .btn-wrap {position: absolute; z-index: 1; top: 100px; right: 100px;}

/* news */
.news .edit-wrap {border-top: 2px solid var(--black)}
.sub-title.news.list-top {margin: 0;}


.link-txt a {text-decoration: underline; text-underline-position:under; color: #2196f3}
/*****************************************************************************************************************************************************************************************/

@media all and (max-width:1920px) {
	.wrapper02 {width: 100%; padding-left: 50px; padding-right: 50px;}
}

@media all and (max-width:1600px) {
	.product-detail-view .main-info {padding: 0 100px;}
}

@media all and (max-width:1400px) {
	/* Product */
	.product-detail-view .main-info,
	.product-detail-view .benefit-list {padding: 0 50px;}
	.product-detail-view .main-info .discription {margin-bottom: 30px;}
	.product-detail-view .main-info .tag {margin-top: 30px;}
	.product-detail-view .benefit-list ol li + li {margin-top: 20px;}
	
	.product-detail-view .main-info .btn-wrap {margin: 40px 0;}
	.product-detail-view .swiper-slide img {aspect-ratio: 1/1.2; object-fit: cover;}
}


@media all and (max-width:1380px) {
	.wrapper01 {width: 100%; padding-left: 50px; padding-right: 50px;}
}

@media all and (max-width:1200px) {
	.cm-title01 {bottom: 50px; left: 50px;}
	.cm-title02 {padding-left: 50px; padding-bottom: 50px;}
	
	.half-bnr {align-items: stretch;}
	.half-bnr .cm-title02 {padding-top: 100px;}
	.half-bnr .imgbox {overflow: hidden;}
	.half-bnr .imgbox img {position: relative; left: 50%; transform: translateX(-50%); object-fit: cover; max-width: inherit; height: 100%;}

	/* subpage */
	.his-list ol li {width: 33.33vw;}
	
	/* Product */
	.product-detail-view .main-info,
	.product-detail-view .benefit-list {padding: 0 40px;}
	.product-detail-view .main-info .name {font-size: 22px;}
	.product-detail-view .main-info .discription {font-size: 13px; margin-bottom: 20px;}
	.product-detail-view .main-info > ul > li {font-size: 14px;}
	.product-detail-view .main-info .tag span {font-size: 11px;}
	.product-detail-view .main-info .btn-wrap {width: 100%;}
	.product-detail-view .main-info .btn-wrap.large [class$="-btn"] {width: 50%;}
	.product-detail-view .key-ingre .keytit {padding-bottom: 0;}
	.product-detail-view .key-ingre .keytit strong {font-size: 12px;}
	.product-detail-view .key-ingre .keytit a {background-size: 24px;}
	.product-detail-view .key-ingre .keytit.on a {width: 34px; height: 34px;}
	.product-detail-view .key-ingre .con {font-size: 11px; padding-bottom: 12px;}
	.product-detail-view .key-ingre .con p + p {margin-top: 4px;}
	.product-detail-view > .btn-wrap {right: 40px;}
	
	.product-detail-view .benefit-list ol li {gap: 18px;}
	.product-detail-view .benefit-list ol li strong {font-size: 16px;}
	.product-detail-view .benefit-list ol li > div p {margin-top: 4px; font-size: 14px;}
}


@media all and (max-width:1025px) {
	.category .grid.half .four .half > div a {padding: 20px;}
	.category .grid.half .four .half > div a strong {font-size: 20px;}
	
	/* subpage */
	.his-list ol li {width: 50vw;}
	.heritage-wrap > div {flex-direction: column; gap: 40px;}
	.heritage-wrap .txtbox,
	.heritage-wrap .imgbox {width: 100%;}
	
	.company-wrap {gap: 40px;}
	.company-wrap > div h4 {font-size: 28px;}
	.logobox ul li {width: calc(50% - 10px);}
	
	.barnd-heritage {flex-direction: column; gap: 80px; margin-top: 0; padding-top: 80px; padding-bottom: 80px;}
	.barnd-heritage .txtbox {width: 100%; padding-bottom: 0;}
	.barnd-heritage .img {width: 100%;}
	
	.adr-wrap {gap: 40px;}
	.adr-wrap > div > strong {font-size: 24px;}
	.adr-wrap > div .img {margin: 24px 0;}
	
	.contact-detail {flex-direction: column; gap: 60px;}
	.contact-detail .dp-pc {display: none;}
	
	/* product */
	.product-list-wrap .product-list {gap: 54px 20px;}
	.product-list-wrap .product-list > li {width: calc(33.33% - 13.5px);}
	
	.product-detail-view {padding-top: 50px;}
	.product-detail-view .product-infobox {flex-direction: column;}
	.product-detail-view .product-infobox > div {width: 100%;}
	.product-detail-view .product-infobox .main-info {padding: 40px 20px;}
	.product-detail-view .main-info .name {margin-bottom: 8px; font-size: 18px; line-height: 1.5;}
	.product-detail-view .main-info .discription {margin-bottom: 36px;}
	.product-detail-view .swiper-slide img {aspect-ratio: 374 / 351}
	
	.product-detail-view > .btn-wrap {top: 60px; right: 10px;}
	.product-detail-view .main-info > ul {flex-wrap: wrap;}
	.product-detail-view .main-info > ul li.color-list {width: 100%; margin-top: 12px;}
	.product-detail-view .main-info > ul li.color-list ol {margin-left: 0;}
	.product-detail-view .main-info .tag {margin-top: 36px;}
	.product-detail-view .main-info .btn-wrap {flex-direction: column; margin: 60px 0; gap: 8px;}
	.product-detail-view .main-info .btn-wrap.large [class$="-btn"] {width: 100%; font-size: 14px;}
	.product-detail-view .key-ingre .keytit {padding-bottom: 12px;}
	.product-detail-view .key-ingre .keytit strong {font-size: 14px;}
	.product-detail-view .key-ingre .keytit a {background-size: 34px;}
	.product-detail-view .key-ingre .keytit.on a {width: 46px; height: 46px;}
	.product-detail-view .key-ingre .con {font-size: 12px; padding-bottom: 24px;}
	.product-detail-view .key-ingre .con p + p {margin-top: 8px;}
	
	.product-detail-view .benefit-imgbox {flex-direction: column;}
	.product-detail-view .benefit-imgbox > div {width: 100%;}
	.product-detail-view .benefit-imgbox .subimg-swiper {order: 0;}
	.product-detail-view .benefit-imgbox .benefit-list {order: 1; padding: 40px 20px;}
	.product-detail-view .benefit-list ol li > strong {font-size: 14px;}
	.product-detail-view .benefit-list ol li > div strong {font-size: 16px;}
	.product-detail-view .benefit-list ol li > div p {margin-top: 8px;}
	.product-detail-view .benefit-list ol li + li {margin-top: 36px;}
}

@media all and (max-width:768px) {
	.wrapper01 {padding-left: 20px; padding-right: 20px;}
	.wrapper02 {padding-left: 20px; padding-right: 20px;}
	.para-wrap {padding-left: 20px; padding-right: 20px;}
	.para01 {padding-top: 100px; padding-bottom: 80px;}
	.para02 {padding-top: 100px;}
	
	.cm-title01 {left: 24px;}
	.cm-title01 p {font-size: 14px;}
	.cm-title01 h3 {font-size: 26px; line-height: 1.3; margin: 12px 0 30px;}
	.cm-title01 a {font-size: 13px; padding: 10px 40.5px;}
	
	.cm-title02 span {font-size: 14px;}
	.cm-title02 h3 {margin: 8px 0 24px; font-size: 34px; line-height: 1.2;}
	.cm-title02 p {font-size: 14px; margin-bottom: 24px; word-break: keep-all;}
	.cm-title02 p br {display: none;}
	.cm-title02 a {font-size: 14px; justify-content: flex-start;}
	
	.select-wrap:before {width: 40px; height: 40px;}

	.btn-wrap {gap: 4px;}
	.btn-wrap.small [class$="-btn"] {width: 65px; height: 30px; font-size: 10px;}
	
	.product {padding: 60px 24px;}
	.product .list-top {margin-bottom: 24px; flex-direction: row;}
	.product .list-top .tab {order: 0;}
	.product .list-top ul li {font-size: 20px;}
	.product .list-top > a {order: 1;font-size: 13px; line-height: 1.7;}
	.product .product-swiper .txt {margin-top: 16px;}
	.product .product-swiper .txt span {font-size: 12px; line-height: 1.3;}
	.product .product-swiper .txt strong {font-size: 14px; line-height: 1.4; text-align: center; word-break: keep-all; padding: 0 10px;}
	.product .product-swiper .swiper-pagination {display: none; margin: 0;}
	
	.category {padding: 60px 24px;}
	.category h3 {font-size: 20px; margin-bottom: 32px; padding: 0;}
	.category .grid.half .full {display: none;}
	.category .grid.four > div {display: block; height: auto;}
	.category .grid.half .four .half > div {height: 240px;}
	.category .grid.half .four .half > div a {padding: 24px;}
	.category .grid.half .four .half > div a strong {font-size: 20px;}
	.category .grid.half .four .half > div a span {font-size: 16px;}
	.category .grid.half .four .half > div.face {background-image: url(../images/pic/pic_main_cate01_m.jpg);}
	.category .grid.half .four .half > div.eyes {background-image: url(../images/pic/pic_main_cate02_m.jpg);}
	.category .grid.half .four .half > div.lip {background-image: url(../images/pic/pic_main_cate03_m.jpg);}
	.category .grid.half .four .half > div.skin {background-image: url(../images/pic/pic_main_cate04_m.jpg);}

	.half-bnr {flex-direction: column; gap: 32px; padding: 0; padding-bottom: 80px; margin: 0;}
	.half-bnr .cm-title02 {order: 1 !important; width: 100%; padding: 0 24px;}
	.half-bnr .imgbox {order: 0 !important; width: 100%;}
	
	.half-bnr.history {margin: 0;}
	.half-bnr.history {margin: 0;}
	
	.skincore {margin-bottom: 0; padding-top: 177.858%;}
	.skincore video  {position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%;}
	.skincore .cm-title01 {bottom: 50px;}
	
	/* subpage */
	.sub-visual {height: 700px; padding: 50px 24px;}
	.sub-visual > p {font-size: 14px; line-height: 1.21;}
	.sub-visual > h3 {font-size: 30px; font-weight: 600; letter-spacing: 0;}
	.sub-visual.about {background-image: url(../images/bg/bg_subvisual_about01_m.jpg);}

	.about-info {flex-direction: column; gap: 50px;}
	.about-info .txtbox p + p {margin-top: 24px;}
	
	/* subpage */
	.sub-title.para-wrap {padding-left: 0; padding-right: 0; padding-bottom: 50px;}
	.sub-title.company {padding-bottom: 36px;}
	.sub-title h3 {margin-bottom: 16px; font-size: 26px;}
	.sub-title > div > p {font-size: 14px;}

	.sub-title.store {padding-bottom: 36px;}
	.sub-title.store h3 {font-size: 24px; margin-bottom: 8px;}
	.sub-title.store > div {margin-top: 0;}
	
	.his-wrap {padding: 100px 20px 80px; top: 0 !important;}
	.his-list {padding: 0;}
	.his-list ol {flex-direction: column; width: 100%;}
	.his-list ol li > strong.dp-pc {display: none;}
	.his-list ol li {position: relative; width: 100%;}
	.his-list ol li:after {content:''; position: absolute; z-index: 1; top: 8px; left: 7px; width: 1px; height: 100%; background: #eee;}
	.his-list ol li .con {border-top: 0; padding: 0 0 40px 32px;}
	.his-list ol li .con > strong {display: block; color: var(--black); margin-bottom: 4px; font-size: 24px; font-weight: 600; line-height: 1.3;}
	.his-list ol li .con .txtbox {margin-bottom: 24px;}
	.his-list ol li .con .txtbox p {font-size: 13px;}
	.his-list ol li .con:before {z-index: 4; top: 8px; transform: translateY(0);}
	.his-list ol li .con:after {z-index: 3; left: 7px; top: 8px; width: 1px; height: calc(var(--draw) * 100%);}
	.his-list ol li:last-child:after {display: none;}
	.his-list ol li:last-child .con{padding-bottom: 0;}
	.his-list ol li:last-child .con:after {display: none;}
	
	.heritage-wrap {margin: 0; padding-top: 60px; padding-bottom: 60px;}
	.heritage-wrap .txtbox > span {font-size: 14px;}
	.heritage-wrap .txtbox > h3 {margin-top: 8px; font-size: 24px;}
	.heritage-wrap .txtbox > div {margin-top: 32px;}
	.heritage-wrap .txtbox > div p {font-size: 14px;}
	.heritage-wrap .txtbox > div p br {display: none;}
	.heritage-wrap .imgbox {gap: 10px;}
	.heritage-wrap .imgbox > p {width: calc(50% - 5px);}
	.heritage-wrap .imgbox .img02 {margin-top: 101px;}
	
	.company-wrap {flex-direction: column; align-items: flex-start; gap: 80px;}
	.company-wrap > div h4 {margin-bottom: 24px; font-size: 20px; font-weight: 500;}
	.logobox strong {font-size: 14px; margin-bottom: 8px;}
	.logobox ul li {width: calc(50% - 4px);}
	.logobox > div + div {margin-top: 32px;}
	
	.barnd-heritage .txtbox h3 {margin-bottom: 32px; font-size: 26px;}
	.barnd-heritage .txtbox p {font-size: 15px;}
	
	.adr-wrap {flex-direction: column; gap: 60px;}
	.adr-wrap > div .img {margin: 24px 0 16px;}
	.adr-wrap > div .info strong {font-size: 16px;}
	.adr-wrap > div .info p {margin-top: 4px; font-size: 13px;}
	
	.adr-wrap > div > strong {font-size: 20px;}
	
	/* product */
	.product-list-wrap h3 {margin-bottom: 8px; font-size: 24px;}
	.product-list-wrap .product-list {gap: 32px 8px}
	.product-list-wrap .product-list > li {width: calc(50% - 4px);}
	.product-list-wrap .product-list > li .txt {text-align: left;}
	.product-list-wrap .product-list > li .txt span {font-size: 11px;}
	.product-list-wrap .product-list > li .txt strong {margin-top: 4px; font-size: 12px;}

	/* news */
	.sub-title.news.list-top {flex-direction: row; justify-content: flex-start; padding: 0; margin-bottom: 16px;}
	.sub-title.news.list-top h3 {text-align: left; margin: 0;}
	.sub-title.news.list-top .board-btn-wrap.only {margin-top: 0;}
}


@media all and (max-width:374px) {
	.contact-detail .util-box {gap: 20px;}
}