@charset "utf-8";

/*
 * File    : sub-sancway.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * LAYOUT
 * COMPONENT
 * YOGURT
 * SOYSAUCE
 * TOFU
 * BEDDING
 * UNDERWEAR
 * SANC ESG
 */

 

/* **************************************** *
 * LAYOUT
 * **************************************** */
body[class*="page-template-sancway-"] .main-container { padding-top: 0; }

.sancway-container { display: flex; flex-direction: column; gap: 260rem; padding-top: 260rem; }
.sancway-section__head { display: flex; flex-direction: column; align-items: center; gap: 32rem; margin-bottom: 80rem; text-align: center; }
.sancway-section__head p { color: var(--color-gray-800); }



/* **************************************** *
 * COMPONENT
 * **************************************** */
.sancway-group{ display: flex; gap: 16rem; }
.sancway-group__item { position: relative; width: 50%; border-radius: var(--round-06); overflow: hidden; }
.sancway-group__item--circle { border-radius: 50%; }
.sancway-group__bg { position: relative; width: 100%; padding-top: 95.56%; }
.sancway-group__content { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--color-white); text-align: center; }
.sancway-group__content p:not(:first-child) { margin-top: 16rem; }

/* card */
.sancway-card:not(:has(.sancway-card__inner)) { position: relative; padding-top: 47.36%; border-radius: var(--round-06); background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden; }
.sancway-card:not(:has(.sancway-card__inner)):not(:first-child) { margin-top: 300rem; }
.sancway-card__inner { position: relative; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: var(--round-06); overflow: hidden; }
.sancway-card__content { position: absolute; top: 30rem; right: 32rem; width: 564rem; height: calc(100% - 60rem); background: var(--color-point-01); border-radius: var(--round-06); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 40rem; }
.sancway-card__content figure { width: 160rem; height: 160rem; margin-bottom: 24rem; }
.sancway-card__content p { margin-top: 16rem; color: var(--color-gray-800); }
.sancway-card__label { position: absolute; top: 60rem; left: 80rem; color: var(--color-gray-800); }

/* horizontal slide */
.sancway-horizontal { margin: 0 -52rem; overflow: hidden; }
.sancway-horizontal__slider { margin: 0 52rem; overflow: visible; }

.sancway-horizontal__slider .swiper-navigation .swiper-button-prev { left: 16rem; }
.sancway-horizontal__slider .swiper-navigation .swiper-button-next { right: 16rem; }

.sancway-horizontal__item { width: 50%; height: 860rem; margin-right: 16rem; position: relative; text-align: center; white-space: normal; border-radius: var(--round-06); overflow: hidden; }
.sancway-horizontal__item:last-child { margin-right: 0; }
.sancway-horizontal__item.sancway-horizontal__item--full { width: 100%; }
.sancway-horizontal__item.sancway-horizontal__item--circle { border-radius: 50%; }

.sancway-horizontal__row { display: flex; flex-direction: column; gap: 16rem; height: 100%; }
.sancway-horizontal__row-item { flex: 1; display: flex; gap: 16rem; position: relative; border-radius: var(--round-06); overflow: hidden; }
.sancway-horizontal__row-cell { flex: 1; position: relative; border-radius: var(--round-06); overflow: hidden; }

.sancway-horizontal__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat center / cover; }

.sancway-horizontal__content { width: 100%; padding: 0 32rem; position: absolute; left: 0; top: 50%; font-size: 0; color: var(--color-white); transform: translateY(-50%); }
.sancway-horizontal__content p:not(:first-child) { margin-top: 16rem; }

/* PROCESS */
.sancway-process .sancway-section__head { gap: 24rem; }
.sancway-process__list-container { margin-left: -52rem; margin-right: -52rem; display: flex; position: relative; z-index: 1; overflow: hidden; }
.sancway-process__list { display: flex; align-items: center; padding-left: calc(50vw - (720rem / 2)); padding-right: calc(50vw - (720rem / 2)); }
.sancway-process__list-item { width: 720rem; height: 720rem; padding: 50rem; border: 1px solid var(--color-gray-400); border-radius: 50%; margin: 0 12rem; }
.sancway-process__list-item:first-child { margin-left: 0; }
.sancway-process__list-item:last-child { margin-right: 0; }
.sancway-process__list-item-inner { background: var(--color-gray-300); border-radius: 50%; height: 100%; display: flex; align-items: center; justify-content: center; }
.sancway-process__list-content { text-align: center; }
.sancway-process__list-content figure { width: 200rem; height: 200rem; margin-left: auto; margin-right: auto; }
.sancway-process__list-label { display: inline-block; width: 200rem; background: var(--color-gray-900); color: var(--color-white); padding: 4rem 10rem; border-radius: 999rem; margin-bottom: 16rem; }
.sancway-process__list-title { display: block; margin-top: 20rem; }
.sancway-process__list-title--small { display: none; }
.sancway-process__list-desc { margin-top: 16rem; color: var(--color-gray-800); }
.sancway-process__list-desc--small { display: none; }

.sancway-process__list--yogurt .sancway-process__list-label { background: var(--color-gray-900); color: var(--color-white); }
.sancway-process__list--soysauce .sancway-process__list-label { background: var(--color-tertiary); color: var(--color-white);}
.sancway-process__list--tofu .sancway-process__list-label { background: #7CB73F; color: var(--color-white);}
.sancway-process__list--underwear .sancway-process__list-label { background: var(--color-point-03); color: var(--color-black);}
.sancway-process__list--bedding .sancway-process__list-label { background: #9CC8D1; color: var(--color-black); }
.sancway-process__list--pad .sancway-process__list-label { background: var(--color-point-03); color: var(--color-black); }

/* certification */
.sancway-certification__list-container { padding: 0 52rem; margin: 0 -52rem; overflow: hidden; }
.sancway-certification__list { margin: 0 -16rem; font-size: 0; overflow: visible; }
.sancway-certification__list-item { display: inline-block; vertical-align: top; width: calc(33.33% - 32rem); margin: 0 16rem; text-align: center; }
.sancway-certification__list-item b { display: block; margin-top: 40rem; }
.sancway-certification__list-item p { margin-top: 16rem; color: var(--color-gray-800); }
.sancway-certification__list-img-wrap { border: 1px solid var(--color-point-03); background: var(--color-white); border-radius: var(--round-06); padding: 50rem; }
.sancway-certification__list-img-wrap figure { padding-top: 133.47%; }
.sancway-certification .swiper-navigation .swiper-button { top: calc(1 * (100vw - 104rem - 32rem) / 3 * 1.34 / 2); }



/* **************************************** *
 * YOGURT
 * **************************************** */
.sancway-yogurt-system__haccp-mark { position: absolute; top: 40rem; right: 40rem; width: 160rem; height: 160rem; }

.sancway-yogurt-health--up { background: var(--color-quinary); }
.sancway-yogurt-health--run { background: var(--color-primary); }
.sancway-group :is(.sancway-yogurt-health--up, .sancway-yogurt-health--run) .sancway-group__content b { margin-top: 23rem; }
.sancway-group :is(.sancway-yogurt-health--up, .sancway-yogurt-health--run) .sancway-group__content p { margin-top: 24rem; }
.sancway-group :is(.sancway-yogurt-health--up, .sancway-yogurt-health--run) .sancway-group__content p + p { margin-top: 30rem; }

.sancway-yogurt-nofat__content { position: relative; text-align: center; margin-top: 145rem; }
.sancway-yogurt-nofat__content-inner { display: inline-flex; align-items: center; justify-content: center; }
.sancway-yogurt-nofat__parentheses { font-family: var(--font-secondary); font-size: 250rem; line-height: 1; color: var(--color-gray-900); padding-top: 12rem; }
.sancway-yogurt-nofat__parentheses:nth-child(1) { margin-right: 49rem; opacity: .1; transform: translateX(100%); }
.sancway-yogurt-nofat__parentheses:nth-child(2) { margin-right: 64rem; opacity: .3; transform: translateX(100%); }
.sancway-yogurt-nofat__parentheses:nth-child(3) { margin-right: 94rem; transform: translateX(100%); }
.sancway-yogurt-nofat__parentheses:nth-last-child(1) { margin-left: 49rem; opacity: .1; transform: translateX(-100%); }
.sancway-yogurt-nofat__parentheses:nth-last-child(2) { margin-left: 64rem; opacity: .3; transform: translateX(-100%); }
.sancway-yogurt-nofat__parentheses:nth-last-child(3) { margin-left: 94rem; transform: translateX(-100%); }
.sancway-yogurt-nofat__text { display: inline-flex; flex-direction: column; align-items: center; gap: 4rem; }
.sancway-yogurt-nofat__text strong { font-size: 200rem; font-weight: 700; line-height: 1; }

.sancway-yogurt-nofat__badge { position: absolute; display: block; background: var(--color-primary); color: var(--color-white); border-radius: 50%; }
.sancway-yogurt-nofat__badge--ca { top: -66rem; right: 407rem; padding: 57rem 103rem; }
.sancway-yogurt-nofat__badge--b2 { left: 400rem; bottom: -90rem; padding: 55rem 74rem 58rem; }



/* **************************************** *
 * SOYSAUCE
 * **************************************** */
.sancway-soysauce-product__list-container { position: relative; }
.sancway-soysauce-product__list { font-size: 0; position: relative; overflow: hidden; margin-left: -52rem; margin-right: -52rem; }
.sancway-soysauce-product__list-item { position: relative; height: 760rem; width: auto; display: inline-block; vertical-align: top; margin-right: 80rem; }
.sancway-soysauce-product__list-item:last-child { margin-right: 0; }
.sancway-soysauce-product__list-item figure { height: 100%; }
.sancway-soysauce-product__list-item figure img  { height: 100%; }
.sancway-soysauce-product__bg { position: absolute; bottom: 0; left: 50%; width: 100vw; height: 954rem; transform: translateX(-50%); opacity: .1; background: url(../images/layout/sanc-illust.svg) no-repeat bottom center; background-size: auto 100%; }

.sancway-soysauce-tunnel__arc { display: block; width: 200rem; margin: 0 auto; }
.sancway-soysauce-tunnel__arc svg { display: block; width: 100%; height: auto; }
.sancway-soysauce-tunnel__arc svg path { fill: var(--color-white); }
.sancway-horizontal__content .sancway-soysauce-tunnel__arc + p { margin-top: 40rem; }
.sancway-soysauce-tunnel--music { background: var(--color-tertiary); }
.sancway-soysauce-tunnel--music .sancway-horizontal__bg { background-size: 100% 100%; }

.sancway-soysauce-research .sancway-card__content figure { mix-blend-mode: darken; }
.sancway-soysauce-research .sancway-card__content figure + p { margin-top: 0; }



/* **************************************** *
 * TOFU
 * **************************************** */
.sancway-tofu-quality__mark { width: 160rem; height: 160rem; position: absolute; top: 40rem; left: 40rem; }
.sancway-tofu-quality--water { width: 584rem; background: var(--color-secondary); }
.sancway-tofu-quality--water figure { display: block; width: 160rem; height: 160rem; margin: 0 auto 24rem; }
.sancway-tofu-quality--beloved { background: var(--color-point-02); }
.sancway-tofu-quality--beloved .sancway-horizontal__content { color: var(--color-black); }
.sancway-tofu-quality--beloved .sancway-horizontal__content p { color: var(--color-gray-800); }
.sancway-tofu-quality--manage .sancway-horizontal__content { top: auto; bottom: 77rem; transform: translateZ(0); }

.sancway-tofu-factory__slider { -webkit-mask-image: url(../images/sub/sancway/sancway-tofu-factory-mask.svg); mask-image: url(../images/sub/sancway/sancway-tofu-factory-mask.svg); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.sancway-tofu-factory__slider-item { padding-top: 42.95%; }
.sancway-tofu-factory__slider-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; }



/* **************************************** *
 * BEDDING
 * **************************************** */
.sancway-bedding-ore__label { position: absolute; top: 40rem; left: 40rem; background: var(--color-point-01); border-radius: 100rem; padding: 8rem 24rem; }
.sancway-bedding-ore__parentheses { display: inline-flex; justify-content: center; align-items: center; gap: 40rem; }
.sancway-horizontal__content .sancway-bedding-ore__parentheses p:not(:first-child) { margin-top: 0; }
.sancway-bedding-ore--award .sancway-horizontal__content p:not(:first-child) { margin-top: 8rem; }
.sancway-bedding-ore--deodorizer .sancway-horizontal__content p:not(:first-child) { margin-top: 8rem; }
.sancway-bedding-ore--antibacterial { background: var(--color-secondary); }
.sancway-bedding-ore--antibacterial i { display: block; width: 186rem; margin: 0 auto; }
.sancway-bedding-ore--antibacterial i svg { display: block; width: 100%; height: auto; }
.sancway-bedding-ore--antibacterial i svg path { fill: var(--color-white); }

.sancway-bedding-eco-bio__slogan { margin-left: -52rem; margin-right: -52rem; color: var(--color-secondary); }
.sancway-bedding-eco-bio__list-item { width: 100%; }
.sancway-bedding-eco-bio__list-item figure { padding-top: 50%; }
.sancway-bedding-eco-bio__list-title { position: absolute; bottom: 20rem; left: 50%; transform: translateX(-50%); }
.sancway-bedding-eco-bio__parentheses { position: absolute; top: 50%; transform: translateY(-50%); margin-top: -11rem; z-index: 1; height: 351rem; }
.sancway-bedding-eco-bio__parentheses svg { height: 100%; width: auto; }
.sancway-bedding-eco-bio__parentheses svg path { fill: var(--color-gray-600); }
.sancway-bedding-eco-bio__parentheses--left { left: 57rem; }
.sancway-bedding-eco-bio__parentheses--right { right: 57rem; }

.sancway-bedding-cotton .sancway-cards > *:first-child .sancway-card__content { background: var(--color-point-02); }



/* **************************************** *
 * UNDERWEAR
 * **************************************** */
.sancway-underwear-quality--handmade { width: 1200rem; }

.sancway-underwear-energy__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32rem; }
.sancway-underwear-energy__list-item { position: relative; border-radius: var(--round-06); background: var(--color-gray-300); padding-top: 147.51%; /* overflow: hidden; */  background-repeat: no-repeat; background-position: center; background-size: cover; }
.sancway-underwear-energy__list-item-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.sancwah-underwear-energy__list-content { position: sticky; top: 20rem; display: flex; flex-direction: column; gap: 24rem; margin: 20rem; padding: 60rem; border-radius: var(--round-05); background: var(--color-white); text-align: center; }



/* **************************************** *
 * SANC ESG
 * **************************************** */
/* GLOBAL */
.sancway-esg { --section-margin: 52rem; display: flex; flex-direction: column; gap: 260rem; padding-top: 260rem; }

/* STORY */
.sancway-esg-story__picture { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32rem; margin-bottom: 80rem; }
.sancway-esg-story__picture .jt-lazyload { padding-top: 96.51%; border-radius: var(--round-03); }

.sancway-esg-story__rolling { margin: 0 calc(-1 * var(--section-margin)); position: relative; overflow: hidden; }
.sancway-esg-story__rolling-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #06848A no-repeat center center / cover; }
.sancway-esg-story__rolling-content { display: flex; flex-direction: column; align-items: center; padding: 323rem var(--section-margin); position: relative; }
.sancway-esg-story__rolling-content > p { padding: 110rem 0; text-align: center; color: var(--color-white); }

html.desktop .sancway-esg-story__rolling-bg { background-attachment: fixed; }
html.mobile .sancway-esg-story__rolling-bg { height: 100lvh; }

/* VALUE */
.sancway-esg-value { margin-top: -130rem; margin-bottom: -130rem; position: relative; }

.sancway-esg-value__inner { width: 100%; height: 100vh; padding: 130rem 0; position: absolute; top: 0; left: 0; z-index: 1; }

.sancway-esg-value__key { width: fit-content; position: relative; top: 0; left: 155rem; }
.sancway-esg-value__key-list { display: flex; flex-direction: column; gap: 8rem; margin-top: 60rem; }
.sancway-esg-value__key-list > li { color: var(--color-gray-500); transition: color .3s; }
.sancway-esg-value__key-list > li.active { color: var(--color-black); }

.sancway-esg-value__message { width: 737rem; position: absolute; right: 0; bottom: 130rem; }
.sancway-esg-value__message-item { width: 100%; position: relative; top: 0; left: 0; }
.sancway-esg-value__message-item:not(:first-child) { position: absolute; opacity: 0; }
.sancway-esg-value__message-desc { margin-top: 16rem; color: var(--color-gray-800); }
.sancway-esg-value__message-image { display: none; }

.sancway-esg-value__slide { width: 480rem; margin-left: 433rem; }
.sancway-esg-value__slide-item { width: 100%; margin-top: 280rem; }
.sancway-esg-value__slide-item:last-child { margin-bottom: 130rem; }
.sancway-esg-value__slide-item .jt-lazyload { padding-top: 100%; }

/* ENVIRONMENT */
.sancway-esg-environment__list { display: flex; flex-direction: column; gap: 200rem; }

.sancway-esg-environment__thumb { padding-top: 30.83%; position: relative; background: var(--color-gray-100); border-radius: var(--round-06); overflow: hidden; }
.sancway-esg-environment__thumb .jt-bg-parallax { position: absolute; top: 0; left: 0; }
.sancway-esg-environment__label { position: absolute; top: 40rem; left: 40rem; padding: 8rem 24rem; background: var(--color-white); border-radius: 99rem; }

.sancway-esg-environment__content { display: flex; gap: 32rem; margin-top: 60rem; }
.sancway-esg-environment__content-inner { display: flex; flex-direction: column; gap: 16rem; width: calc((100% - 32rem) / 2); }
.sancway-esg-environment__content p { color: var(--color-gray-800); }

/* CARBON */
.sancway-esg-carbon__key { --factory-size: 760rem; --factory-gap: 100rem; position: relative; font-size: 0; text-align: center; }
.sancway-esg-carbon__key > li { display: inline-block; width: var(--factory-size); position: relative; opacity: 0; }
.sancway-esg-carbon__key > li:nth-child(1) { transform: translateX( calc( ( var(--factory-size) / 2 ) - ( var(--factory-gap) / 2 ) ) ); }
.sancway-esg-carbon__key > li:nth-child(2) { margin-left: calc(-1 * var(--factory-gap)); transform: translateX( calc( -1 * ( ( var(--factory-size) / 2 ) - ( var(--factory-gap) / 2 ) ) ) ); }

.sancway-esg-carbon__key-bg { width: 100%; padding-top: 100%; background: no-repeat center center / cover; border-radius: 50%; overflow: hidden; }
.sancway-esg-carbon__key-bg:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.1); border-radius: inherit; }

.sancway-esg-carbon__bracket { display: flex; align-items: center; justify-content: center; gap: 90rem; position: absolute; top: 50%; left: 50%; color: var(--color-white); transform: translate3d(-50%, -50%, 0); }
.sancway-esg-carbon__bracket > i { font-style: normal; }
.sancway-esg-carbon__bracket > span { display: block; }

/* SHARE */
.sancway-esg-share__list { margin-top: 120rem; }
.sancway-esg-share__list > li { padding: 60rem 0; border-bottom: 1px solid var(--color-gray-500); }
.sancway-esg-share__list > li:first-child { padding-top: 0; }

.sancway-esg-share__context { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 20rem; }
.sancway-esg-share__context-info { width: 892rem; color: var(--color-gray-800); }
.sancway-esg-share__context-info small { display: block; margin-top: 16rem; }
.sancway-esg-share__context-thumb { width: 584rem; border-radius: var(--round-02); overflow: hidden; }
.sancway-esg-share__context-thumb .jt-lazyload { padding-top: 68.49%; }

/* PROMISE */
.sancway-esg-promise__inner { padding-top: 47.35%; position: relative; border-radius: var(--round-05); overflow: hidden; }

.sancway-esg-promise__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.sancway-esg-promise__bg:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.1); }

.sancway-esg-promise__content { width: 100%; padding: 0 calc(var(--section-margin) * 1.5); position: absolute; top: 50%; left: 50%; text-align: center; color: var(--color-white); transform: translate3d(-50%, -50%, 0); }