@charset "UTF-8";

/* ========================================
   THE 100 JOURNEY
======================================== */

/* ----------------------------------------
   Swiper
---------------------------------------- */

.method-journey-slider .swiper-wrapper { height:auto; align-items:stretch; color:rgba(0,0,0,.7);  }
.method-journey-slider .swiper-slide { display:flex; height:auto; }
.method-journey-slide__panel { flex:1; }

/* ----------------------------------------
   Journey head
---------------------------------------- */

.method-journey__head { padding:70px clamp(20px,3vw,80px) 0; background:#b5aea7; text-align:center; }
.method-journey__head .method-section-title { max-width:700px; margin:0 auto 10px; }
.method-journey__head .method-section-title p { margin:0 0 10px; font-size:11px; letter-spacing:.14em; }
.method-journey__head .method-section-title .en { margin-bottom:17px; color:#fff; font-size:clamp(28px,3vw,44px); letter-spacing:.16em; }
.method-journey__head .method-section-title h2 { margin:0; color:#fff; font-size:19px; font-weight:300; }


/* ----------------------------------------
   Journey tabs
---------------------------------------- */

.method-journey-tabs { position:relative; top:auto; right:auto; bottom:auto; left:auto; display:grid; grid-template-columns:repeat(4,1fr); width:100%; padding:18px 0 0; box-sizing:border-box; background:transparent; transform:none; text-align:left; }
.method-journey-tabs .swiper-pagination-bullet { position:relative; width:auto; height:auto; min-height:78px; margin:0 !important; padding:22px 15px 18px; box-sizing:border-box; border:0; border-radius:0; background:transparent; color:#fff; opacity:1; text-align:left; font:inherit; appearance:none; -webkit-appearance:none; cursor:pointer; }

.method-journey-tab__step { display:block; margin-bottom:0; color:rgba(255,255,255,.75); font-size:11px; letter-spacing:.14em; line-height:.5; }
.method-journey-tab__number { display:block; margin-bottom:8px; font-family:serif; font-size:30px; font-weight:300; }
.method-journey-tab__label { display:block; font-size:14px; letter-spacing:.06em; white-space:nowrap; }
.method-journey-tab__label-sp { display:none; }

/* Tab line */

.method-journey-tabs .swiper-pagination-bullet::after { content:""; position:absolute; right:15px; bottom:0; left:15px; height:2px; background:rgba(255,255,255,.6); }
.method-journey-tabs .swiper-pagination-bullet:hover::after { background:rgba(0,0,0,.45); }
.method-journey-tabs .swiper-pagination-bullet-active::after { height:2px; background:rgba(0,0,0,.7); }

/* Current marker */

.method-journey-tabs .swiper-pagination-bullet::before { content:""; position:absolute; bottom:-6px; left:50%; width:0; height:0; border-right:5px solid transparent; border-left:5px solid transparent; border-top:6px solid transparent; transform:translateX(-50%); }
.method-journey-tabs .swiper-pagination-bullet-active::before { border-top-color:rgba(0,0,0,.7); }

/* Active tab */

.method-journey-tabs .swiper-pagination-bullet-active .method-journey-tab__step { color:rgba(0,0,0,.7); }
.method-journey-tabs .swiper-pagination-bullet-active .method-journey-tab__number { color:rgba(0,0,0,.7); opacity:1; }
.method-journey-tabs .swiper-pagination-bullet-active .method-journey-tab__label { color:rgba(0,0,0,.7); }


/* ----------------------------------------
   Journey slide
---------------------------------------- */

.method-journey-slide { position:relative; min-height:580px; overflow:hidden; }
.method-journey-slide__panel { display:grid; grid-template-columns:50% 50%; grid-template-areas:"text visual"; width:100%; min-height:580px; box-sizing:border-box; background:#d1cbc6; }
.method-journey-slide.is-gray .method-journey-slide__panel { background:#bebebe; }
.method-journey-slide--reverse .method-journey-slide__panel { grid-template-columns:50% 50%; grid-template-areas:"visual text"; }


/* ----------------------------------------
   Journey motion
---------------------------------------- */

.method-journey-slider.swiper-container-fade .swiper-slide { z-index:1; opacity:0 !important; pointer-events:none; transition-property:none !important; transition-duration:0ms !important; }
.method-journey-slider.swiper-container-fade .swiper-slide.is-underlay { z-index:2; opacity:1 !important; }
.method-journey-slider.swiper-container-fade .swiper-slide.swiper-slide-active { z-index:3; opacity:1 !important; pointer-events:auto; }

.method-journey-slide.is-cover-next .method-journey-slide__panel { animation:journey-panel-next 1.15s cubic-bezier(.55,.02,.18,1) both; }
.method-journey-slide.is-cover-prev .method-journey-slide__panel { animation:journey-panel-prev 1.15s cubic-bezier(.55,.02,.18,1) both; }

@keyframes journey-panel-next {
	from { transform:translate3d(100%,0,0); }
	to { transform:translate3d(0,0,0); }
}

@keyframes journey-panel-prev {
	from { transform:translate3d(-100%,0,0); }
	to { transform:translate3d(0,0,0); }
}

@media (prefers-reduced-motion: reduce) {
	.method-journey-slide.is-cover-next .method-journey-slide__panel { animation:none !important; }
	.method-journey-slide.is-cover-prev .method-journey-slide__panel { animation:none !important; }
}


/* ----------------------------------------
   Visual
---------------------------------------- */

.method-journey-slide__visual { position:relative; grid-area:visual; margin:70px 70px 70px 0; overflow:hidden; }
.method-journey-slide--reverse .method-journey-slide__visual { margin:70px 0 70px 70px; }
.method-journey-slide__visual .media-box { width:100%; height:100%; }


/* ----------------------------------------
   Text
---------------------------------------- */

.method-journey-slide__text { grid-area:text; display:flex; flex-direction:column; justify-content:center; padding:80px clamp(45px,6vw,100px); box-sizing:border-box; }
.method-journey-slide.is-gray .method-journey-slide__text { color:#fff; }
.method-journey-slide.is-gray .method-journey-slide__lead { color:rgba(1,1,1,.5); }
.method-journey-slide.is-gray .method-journey-slide__copy p { color:#fff; }

.method-journey-slide__step { margin-bottom:8px; font-size:13px; letter-spacing:.05em; opacity:.5; }
.method-journey-slide h3 { margin:0 0 25px; font-size:clamp(27px,2.6vw,34px); font-weight:400; letter-spacing:.03em; }

.method-journey-slide__lead { display:flex; align-items:baseline; gap:14px; margin:0 0 32px; color:#fff; font-size:20px; line-height:1.5; display:block; }
.method-journey-slide__lead strong { font-weight:500; }
.method-journey-slide__lead .en { font-size:17px; letter-spacing:.08em; opacity:.5;display:block; }
.method-journey-slide--reverse .method-journey-slide__lead .en { opacity:.35; }
.method-journey-slide__copy { max-width:520px; font-size:12px; line-height:2; letter-spacing:.04em; }
.method-journey-slide__copy p { margin:0 0 15px; color:rgba(0,0,0,.7); }


/* ----------------------------------------
   Journey next
---------------------------------------- */

.method-journey-slide__closing { margin-top:42px !important; font-weight:500; }

.method-journey-next { display:inline-grid; grid-template-columns:1fr auto; grid-template-areas:"eyebrow eyebrow" "label arrow"; align-items:end; column-gap:30px; min-width:260px; padding:0 0 8px; border-bottom:1px solid currentColor; color:rgba(0,0,0,.7); text-decoration:none; transition:opacity .4s ease; }
.method-journey-next__eyebrow { grid-area:eyebrow; display:block; margin-bottom:6px; font-size:9px; font-weight:400; letter-spacing:.14em; line-height:1; opacity:.45; }
.method-journey-next__label { grid-area:label; display:block; font-size:11px; font-weight:400; letter-spacing:.08em; line-height:1.4; }
.method-journey-next__arrow { grid-area:arrow; display:block; font-size:16px; font-weight:300; line-height:1; transition:transform .55s cubic-bezier(.19,1,.22,1); }

.method-journey-next:hover { opacity:.65; }
.method-journey-next:hover .method-journey-next__arrow { transform:translateX(7px); }

.method-journey-slide.is-gray .method-journey-next { color:#fff; }



/* ========================================
   SP
======================================== */

@media (max-width:767px) {

	.method-journey__head .method-section-title .en { margin-bottom:10px; }
	.method-journey__head .method-section-title h2 { font-size:18px; }

	.method-journey-tabs .swiper-pagination-bullet { padding:16px 7px 14px; text-align:center; }
	.method-journey-tabs .swiper-pagination-bullet::after { right:7px; left:7px; }

	.method-journey-tab__step { margin-bottom:0; font-size:10px; }
	.method-journey-tab__number { margin-bottom:4px; font-size:25px; }
	.method-journey-tab__label { font-size:12px; }
	.method-journey-tab__label-pc { display:none; }
	.method-journey-tab__label-sp { display:block; }

	.method-journey-slide { min-height:0; }

	.method-journey-slide__panel,
	.method-journey-slide--reverse .method-journey-slide__panel { display:flex; flex-direction:column; min-height:0; }

	.method-journey-slide__text { order:1; padding:55px 25px 20px; }

	.method-journey-slide__visual,
	.method-journey-slide--reverse .method-journey-slide__visual { order:2; height:clamp(160px,42vw,220px); min-height:0; margin:0 25px 30px; }
	
	.method-journey-slide__step {margin-bottom: 3px; }
	.method-journey-slide h3 { font-size:26px; }
	.method-journey-slide__lead {margin: 0 0 20px;}
	.method-journey-slide__lead .en {font-size: 17px;}
	.method-journey-slide__copy p {margin: 0 0 10px;}

	.method-journey-slide__closing { margin-top:32px !important; }

	.method-journey-next { width:100%; min-width:0; column-gap:20px; padding-bottom:11px; }
	.method-journey-next__eyebrow { font-size:9px; }
	.method-journey-next__label { font-size:12px; }

}