@charset "UTF-8";

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

.is-header-bg-visible .header-fixed-bg{opacity:0;}
/* =========================================
   INTRO
========================================= */

.method-intro { position:relative; min-height:100vh; padding:87px 5vw 90px; box-sizing:border-box; background:#f1efed; color:rgba(0,0,0,.72); }
.method-intro__inner { display:grid; grid-template-columns:minmax(0,45%) minmax(0,55%); align-items:center; width:100%; max-width:1500px; min-height:calc(100vh - 200px); margin:0 auto; }
.method-intro__content { position:relative; z-index:2; padding:50px clamp(40px,6vw,95px) 50px 2vw; }
.method-intro__description { margin:0; font-size:13px; font-weight:400; line-height:1.6; letter-spacing:.09em; opacity:.65; margin-bottom: 5px; }
.method-intro__title { margin:0 0 18px; font-size:clamp(30px,3.2vw,48px); font-weight:400; line-height:1.2; letter-spacing:.1em; white-space: nowrap; }
.method-intro__catch { margin:35px 0 0; font-size:clamp(21px,2.6vw,30px); font-weight:400; line-height:1.6; letter-spacing:.035em; }
.method-intro__copy { max-width:620px; margin:33px 0 0; font-size:14px; line-height:2.0; letter-spacing:.04em; opacity:.8; }

.method-intro__approaches { max-width:620px; margin-top:33px; text-align:center; }
.method-intro__approaches-head { margin-bottom:12px; text-align:center; }
.method-intro__approaches-number { display:block; font-size:27px; line-height:1; letter-spacing:.04em; opacity:.3; font-weight: 300; }
.method-intro__approaches-label { display:block; margin-top:4px; font-size: 10px; letter-spacing: .12em; opacity: .7; }
.method-intro__approaches-label span { font-size:14px; line-height:1; letter-spacing:.04em; font-weight: 300; }
.method-intro__approaches-list { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(0,0,0,.18); border-bottom:1px solid rgba(0,0,0,.18); }
.method-intro__approach { position:relative; padding:17px 10px 16px 10px; }
.method-intro__approach:not(:last-child)::after { content:""; position:absolute; top:14px; right:0; bottom:14px; width:1px; background:rgba(0,0,0,.1); }
.method-intro__approach-name { display:block; font-size:10px; letter-spacing:.12em; opacity:.7; }
.method-intro__approach-jp { display:block; margin-top:7px; font-size:11px; letter-spacing:.03em; opacity:.55; }

.method-intro__next { display:flex; flex-direction:column; align-items:center; width:100%; max-width:620px; margin-top:45px; color:inherit; text-align:center; text-decoration:none; }
.method-intro__next-label { margin-bottom:9px; font-size:10px; letter-spacing:.18em;  opacity:.35; }
.method-intro__next-title { font-size:14px; font-weight:400; line-height:1.5; letter-spacing:.08em; }
.method-intro__next-jp { margin-top:5px; font-size:10px; letter-spacing:.06em; opacity:.42; }
.method-intro__next-line { position:relative; display:block; width:8px; height:46px; margin-top:18px; }
.method-intro__next-line::before { content:""; position:absolute; top:0; left:50%; width:1px; height:34px; background:rgba(0,0,0,.3); transform:translateX(-50%); transition:height .65s cubic-bezier(.19,1,.22,1),background-color .4s ease; }
.method-intro__next-line::after { content:""; position:absolute; top:28px; left:50%; width:6px; height:6px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:translateX(-50%) rotate(45deg); transition:top .65s cubic-bezier(.19,1,.22,1); }
.method-intro__next:hover .method-intro__next-line::before { height:46px; background:rgba(0,0,0,.6); }
.method-intro__next:hover .method-intro__next-line::after { top:40px; }

.method-intro__visual-sp { display:none; }
.method-intro__visual { position:relative; height:min(68vh,720px); min-height:500px; margin:0 1vw 0 0; overflow:hidden; }
.method-intro__visual img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }


.method-intro__br { display:none; }
@media (min-width:1200px) {
.method-intro__br { display:block; }
}

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

@media (max-width:767px) {

.method-intro { min-height:0; padding:80px 20px 50px; }
.method-intro__inner { display:flex; flex-direction:column; min-height:0; }
.method-intro__content { order:1; width:100%; padding:20px 5px 0; box-sizing:border-box; }
.method-intro__description { font-size: 11px; margin-bottom:5px; text-align:center; }
.method-intro__title { font-size:32px; text-align:center; }
.method-intro__catch { font-size:21px; text-align:center; }
.method-intro__copy { margin-top:11px; font-size:12px; line-height:2; text-align:center; }
/*.method-intro__approaches { width: 80%; margin: 40px auto 0; }
.method-intro__approaches-list { grid-template-columns:1fr; }
.method-intro__approach { padding:13px 0; }
.method-intro__approach:not(:last-child) { border-bottom:1px solid rgba(0,0,0,.1); }
.method-intro__approach:not(:last-child)::after { display:none; }*/
.method-intro__approach-jp { margin-top:4px; font-size:11px; }
.method-intro__next { margin-top:50px; }
.method-intro__next-title { font-size:13px; }
.method-intro__next-line { height:28px; }
.method-intro__visual { display:none; }
.method-intro__visual-sp { display:block; width:100%; height:clamp(180px,48vw,240px); margin:35px 0 40px; overflow:hidden; }
.method-intro__visual-sp img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }


}


/* ----------------------------------------
   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__title { margin:0 0 17px; color:#fff; font-size:clamp(29px,3vw,44px); font-weight:400; letter-spacing:.16em; }
.method-journey__head .method-section-title__subtitle { 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:55% 45%; 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:45% 55%; 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:80px 80px 80px 0; overflow:hidden; }
.method-journey-slide--reverse .method-journey-slide__visual { margin:80px 0 80px 80px; }
.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:11px; letter-spacing:.05em; opacity:.5; }
.method-journey-slide h3 { margin:0 0 25px; font-size:clamp(27px,2.5vw,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:15px; 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 30px; grid-template-areas:"eyebrow eyebrow" "label arrow"; align-items:center; column-gap:30px; min-width:260px; padding:0 10px 8px 0; border-bottom:1px solid currentColor; color:rgba(0,0,0,.7); text-decoration:none; transition:opacity .4s ease; }
.method-journey-next__arrow { grid-area:arrow; display:flex; width:30px; align-items:center; justify-content:flex-start; transition:transform .55s cubic-bezier(.19,1,.22,1); }

.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:13px; font-weight:400; letter-spacing:.08em; line-height:1.4; }


.method-arrow { position:relative; display:inline-block; width:8px; height:1px; background:currentColor; opacity:.5; transition:width 700ms cubic-bezier(.19,1,.22,1),opacity .4s ease; }
.method-arrow::before,.method-arrow::after { content:""; position:absolute; top:0; right:0; display:block; width:8px; height:1px; background:inherit; transition:transform 700ms cubic-bezier(.19,1,.22,1); }
.method-arrow::before { transform:translateX(5px) rotate(45deg); transform-origin:100% 100%; }
.method-arrow::after { transform:translateX(5px) rotate(-45deg); transform-origin:100% 0%; }
a:hover .method-arrow { width:20px; opacity:1; }
a:hover .method-arrow::before { transform:translateX(9px) rotate(-45deg); transform-origin:100% 0%; }
a:hover .method-arrow::after { transform:translateX(9px) rotate(45deg); transform-origin:100% 100%; }
/*step 4 for down*/
.method-arrow--down { transform:rotate(90deg); transform-origin:center center; }
.method-journey-next__arrow--down { justify-content:center; margin-bottom: 12px; }
.method-journey-next:hover .method-journey-next__arrow--down { transform:translateY(6px); }


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

@media (max-width:767px) {

	.method-journey__head .method-section-title__title { margin-bottom:10px; }
	.method-journey__head .method-section-title__subtitle { 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:46px 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: 4px; font-size: 10px; }
	.method-journey-slide h3 { font-size:25px; }
	.method-journey-slide__lead {margin: 0 0 20px; font-size: 19px; }
	.method-journey-slide__copy p {margin: 0 0 10px;}

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

	.method-journey-next { width:55%; min-width:0; column-gap:20px; padding-bottom:11px; padding-right: 0px;}
	.method-journey-next__eyebrow { font-size:9px; }
	.method-journey-next__label { font-size:12px; }
	
.method-journey-slide__panel { clip-path:inset(0 var(--journey-peek,0px) 0 0); transition:clip-path .45s cubic-bezier(.19,1,.22,1); }
.method-journey-slide.is-peeking .method-journey-slide__panel { transition:none; }
.method-journey-slider.swiper-container-fade .swiper-slide.is-peek-next { z-index:2; opacity:1!important; pointer-events:none; }
.method-journey-slide.is-peeking::after { content:""; position:absolute; top:0; right:var(--journey-peek,0px); bottom:0; width:5px; background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,.1)); z-index:4; pointer-events:none; }



}


/* =========================================
   THE 100 MENU
========================================= */
.method-menu { background:#b5aea7; color:#fff; }
.method-menu__inner { width:100%; max-width:1400px; margin:0 auto; padding:110px 7vw 65px; box-sizing:border-box; }
.method-menu .method-section-title { max-width:900px; margin:0 auto; text-align:center; }
.method-menu .method-section-title__title { margin:0 0 17px; color:#fff; font-size:clamp(29px,3vw,44px); font-weight:400; letter-spacing:.16em; }
.method-menu .method-section-title__subtitle { margin:0; color:#fff; font-size:19px; font-weight:300; }
.method-menu__intro { max-width:680px; margin:50px auto 0; font-size:14px; line-height:2; }
.method-menu__nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:900px; margin:65px auto 0; border-top:1px solid rgba(255,255,255,.35); }
.method-menu__link { position:relative; display:grid; grid-template-columns:1fr 30px; grid-template-areas:"en arrow" "jp arrow"; gap:7px 30px; align-items:center; padding:24px 0; color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); }
.method-menu__link:first-child { margin-right:35px; }
.method-menu__link:last-child { margin-left:35px; }
.method-menu__link-en { grid-area:en; font-size:20px; letter-spacing:.08em; }
.method-menu__link-jp { grid-area:jp; font-size:13px; opacity:.6; }
.method-menu__link-arrow { grid-area:arrow; display:flex; width:30px; align-items:center; justify-content:center; opacity:1; transition:transform .55s cubic-bezier(.19,1,.22,1); }
.method-menu__link-arrow .method-arrow { opacity:1; }
.method-menu__link:hover .method-menu__link-arrow { transform:translateY(6px); }


/* =========================================
   MENU PANELS
========================================= */
.method-menu__panels { padding:0 5vw 45px; box-sizing:border-box; }


/* =========================================
   SP THE 100 MENU 
========================================= */
@media (max-width:767px) {
.method-menu__inner { padding:75px 25px 35px; }
.method-menu .method-section-title__title { margin-bottom:10px; }
.method-menu .method-section-title__subtitle { font-size:16px; }
.method-menu__intro { margin-top:35px; font-size:12px; text-align:left; }
.method-menu__nav { display:block; margin-top:45px; }
.method-menu__link:first-child { margin-right:0; }
.method-menu__link:last-child { margin-left:0; }
.method-menu__link { padding:20px 0; }
.method-menu__link-en { font-size:19px; }
.method-menu__link-jp { font-size:12px; }
.method-menu__panels { padding:0 15px 60px; }
}


/* =========================================
   PROGRAM
========================================= */

.method-program { padding:80px 7vw 140px; background:#d1cbc6; color:rgba(0,0,0,.7); }
.method-program__inner { width:100%; max-width:1400px; margin:0 auto; }
.method-program__head { margin-bottom:80px; }
.method-program__title { margin:0 0 12px; color:#fff; font-size:clamp(26px,3vw,44px); font-weight:400; letter-spacing:.12em; }
.method-program__subtitle { margin:0; color:#fff; font-size:19px; font-weight:400; line-height:1.5; }
.method-program__intro { margin:25px 0 0; font-size:13px; line-height:2; opacity:.6; }

.method-program-list { border-top:1px solid rgba(0,0,0,.22); }
.program-item { position:relative; border-bottom:1px solid rgba(0,0,0,.22); transition:background-color .55s cubic-bezier(.19,1,.22,1),color .4s ease; }
.program-item.is-open { background:rgba(255,255,255,.3); color:rgba(0,0,0,.88); margin-bottom: 10px; }

.program-item__summary { display:grid; grid-template-columns:50px minmax(0,1fr) auto auto; column-gap:30px; align-items:center; padding:42px 0; cursor:pointer; }
.program-item__number { align-self:start; padding-top:7px; font-size:11px; letter-spacing:.08em; color:#fff; transition:opacity .4s ease; opacity: .7; }
.program-item__main { min-width:0; }
.program-item__name { margin:0; font-size:28px; font-weight:400; line-height:1.3; letter-spacing:.02em; }
.program-item__lead { max-width:520px; margin:14px 0 0; font-size:12px; line-height:1.9; opacity:.62; transition:opacity .4s ease; }
.program-item__price { white-space:nowrap; font-size:14px; font-weight:400; letter-spacing:.04em; transition:opacity .4s ease; }


.program-item__trigger { display:flex; align-items:center; gap:28px; min-width:155px; padding:13px 0 13px 2px; border:0; border-bottom:1px solid rgba(0,0,0,.4); background:none; color:inherit; font-family:inherit; font-size:10px; letter-spacing:.1em; cursor:pointer; opacity:.65; transition:opacity .4s ease; }


.program-item__icon { position:relative; display:block; width:22px; height:22px; margin-left:auto; opacity:.55; transition:opacity .4s ease; }
.program-item__icon::before,.program-item__icon::after { content:""; position:absolute; top:50%; left:50%; display:block; width:10px; height:1px; background:currentColor; transform:translate(-50%,-50%); transition:width 700ms cubic-bezier(.19,1,.22,1),transform 700ms cubic-bezier(.19,1,.22,1),opacity .4s ease; }
.program-item__icon::after { transform:translate(-50%,-50%) rotate(90deg); }
.program-item.is-open .program-item__icon { opacity:.9; }
.program-item.is-open .program-item__icon::before { width:24px; }
.program-item.is-open .program-item__icon::after { transform:translate(-50%,-50%) rotate(90deg) scaleX(0); opacity:0; }

.program-item__detail { display:grid; grid-template-rows:0fr; background:transparent; transition:grid-template-rows .8s cubic-bezier(.19,1,.22,1); }
.program-item.is-open .program-item__detail { grid-template-rows:1fr; }
.program-item__detail-inner { overflow:hidden; }
.program-detail-list { padding:5px 0 45px 105px; }
.program-detail-item { display:grid; grid-template-columns:minmax(200px,280px) minmax(0,1fr); column-gap:10px; padding:20px 40px 20px 0; border-top:1px solid rgba(0,0,0,.13); }
.program-detail-item:last-child { border-bottom:1px solid rgba(0,0,0,.13); }
.program-detail-item h5 { margin:0; font-size:12px; font-weight:400; letter-spacing:.06em; line-height:1.6; opacity: .5;}
.program-detail-item > p { margin:0; font-size:11px; line-height:1.8; opacity:.74; }
.program-detail-item__description { grid-column:2; margin-top:8px !important; max-width:650px; opacity:.5 !important; }

.program-item__close { display:flex; align-items:center; gap:28px; width:155px; margin:0 0 40px auto; padding:6px 0 6px 2px; border:0; border-bottom:1px solid rgba(0,0,0,.4); background:none; color:inherit; font-family:inherit; font-size:10px; letter-spacing:.1em; cursor:pointer; opacity:.65; transition:opacity .4s ease; }
.program-item__close .program-item__icon { margin-left:auto; }

.method__note { margin:18px 0 0; font-size:10px; opacity:.6; }


@media (hover:hover) {
.program-item:hover { background:rgba(255,255,255,.14); color:rgba(0,0,0,.9); }
.program-item:not(.is-open):hover .program-item__icon::before { animation:program-plus-hover .9s cubic-bezier(.19,1,.22,1) forwards; }
.program-item:not(.is-open):hover .program-item__icon::after { opacity:.65; transform:translate(-50%,-50%) rotate(90deg) scaleX(.8); }

.program-item__trigger:hover { opacity:0.3; }
.program-item:hover .program-item__number { opacity:.65; }
.program-item:hover .program-item__lead { opacity:.8; }
.program-item:hover .program-item__price { opacity:.9; }
.program-item:hover .program-item__icon { opacity:.85; }
.program-item__close:hover { opacity:0.3; }
}

@keyframes program-plus-hover {
0% { width:10px; }
45% { width:28px; }
100% { width:18px; }
}

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

@media (max-width:767px) {
.method-program { padding:50px 20px 90px; }
.method-program__head { margin-bottom:55px; }
.method-program__subtitle { font-size:16px; }
.method-program__intro { font-size:12px; }

.program-item:hover { background:transparent; color:inherit; }
.program-item.is-open { background:rgba(255,255,255,.3); }

.program-item__summary { grid-template-columns:25px minmax(0,1fr); gap:0 10px; padding:32px 0; }
.program-item__number { grid-column:1; grid-row:1 / 4; }
.program-item__main { grid-column:2; }
.program-item__name { font-size:21px; }
.program-item__lead { margin-top:10px; font-size:12px; }
.program-item__price { grid-column:2; margin-top:15px; font-size:15px; }
.program-item__trigger { grid-column:2; justify-self:stretch; width:50%; margin:0 0 0 auto; }

.program-detail-list { padding:0 0 25px 35px; }
.program-detail-item { display:block; padding:17px 10px 17px 0; }
.program-detail-item h5 { margin-bottom:7px; font-size:11px; }
.program-detail-item > p { font-size:11px; }
.program-detail-item__description { margin-top:10px !important; }

.method-program-cta { margin-top:85px; }
.method-program-cta__title { font-size:23px; }
.method-program-cta__link { width:100%; min-width:0; }
.program-item__close { width:50%; margin:0 0 35px auto; }
}


/* =========================================
   EXPERIENCE
========================================= */

.method-experience { margin-top:40px; padding:80px 7vw 140px; background:#bebebe; color:rgba(0,0,0,.7); }
.method-experience .method-section-title { max-width:1400px; margin:0 auto 75px; text-align:left; }
.method-experience__title { margin:0 0 12px; font-size:clamp(29px,3vw,44px); font-weight:400; letter-spacing:.12em; opacity:1; color:#fff; }
.method-experience__subtitle { margin:0; font-size:19px; font-weight:400; line-height:1.5; color:#fff; }
.method-experience__intro { max-width:680px; margin:25px 0 0; font-size:13px; line-height:2; opacity:.7; }

.experience-list { max-width:1400px; margin:0 auto; border-top:1px solid rgba(0,0,0,.22); }

.experience-item { position:relative; border-bottom:1px solid rgba(0,0,0,.22); transition:background-color .55s cubic-bezier(.19,1,.22,1),color .4s ease; }
.experience-item:hover { background:rgba(255,255,255,.13); color:rgba(0,0,0,.92); }
.experience-item.is-open { background:rgba(255,255,255,.28); color:rgba(0,0,0,.9); }

.experience-item__summary { display:grid; grid-template-columns:minmax(0,1fr) auto 34px; align-items:center; gap:35px; padding:24px 20px; cursor:pointer; }
.experience-item__main { min-width:0; }

.experience-item__name { margin:0; color:#fff; font-size:15px; font-weight:400; letter-spacing:.12em; line-height:1.4; opacity:.75; }
.experience-item.is-open .experience-item__name { opacity:1; }

.experience-item__lead { margin:7px 0 0; font-size:17px; font-weight:400; line-height:1.5; letter-spacing:.03em; opacity:.9; }

.experience-item__treatment { max-width:760px; margin:16px 0 0; font-size:12px; font-weight:400; line-height:1.8; letter-spacing:.02em; opacity:.58; transition:opacity .4s ease; }
.experience-item:hover .experience-item__treatment { opacity:.7; }
.experience-item.is-open .experience-item__treatment { opacity:.78; }

.experience-item__price { white-space:nowrap; font-size:13px; letter-spacing:.04em; opacity:.5; transition:opacity .4s ease; }
.experience-item:hover .experience-item__price { opacity:1; }

.experience-item__trigger { display:flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:0; background:transparent; color:inherit; cursor:pointer; }

.experience-item__icon { position:relative; display:block; width:28px; height:28px; color:#fff; opacity:.85; transition:opacity .4s ease; }
.experience-item__icon::before,.experience-item__icon::after { content:""; position:absolute; top:50%; left:50%; display:block; width:11px; height:1px; background:currentColor; transform:translate(-50%,-50%); transition:width .7s cubic-bezier(.19,1,.22,1),transform .7s cubic-bezier(.19,1,.22,1),opacity .4s ease; }
.experience-item__icon::after { transform:translate(-50%,-50%) rotate(90deg); }
.experience-item:hover .experience-item__icon { opacity:1; }
.experience-item.is-open .experience-item__icon::before { width:24px; }
.experience-item.is-open .experience-item__icon::after { transform:translate(-50%,-50%) rotate(90deg) scaleX(0); opacity:0; }

.experience-item__detail { display:grid; grid-template-rows:0fr; transition:grid-template-rows .8s cubic-bezier(.19,1,.22,1); }
.experience-item.is-open .experience-item__detail { grid-template-rows:1fr; }

.experience-item__detail-inner { overflow:hidden; padding:0 90px 0 20px; }
.experience-item.is-open .experience-item__detail-inner { padding-bottom:45px; }

.experience-detail__catch { margin:10px 0 0; color:#fff; font-size:18px; font-weight:400; line-height:1.7; letter-spacing:.03em; }

.experience-detail__copy { max-width:760px; margin-top:18px; font-size:11px; line-height:1.95; opacity:.68; }
.experience-detail__copy p { margin:0 0 8px; }
.experience-detail__copy p:last-child { margin-bottom:0; }

.experience-detail__time { margin:18px 0 0 !important; font-size:11px; line-height:1.6; letter-spacing:.05em; opacity:.65; }


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

@media (max-width:767px) {

.method-experience { margin-top:15px; padding:70px 20px 90px; }
.method-experience .method-section-title { margin-bottom:50px; }
.method-experience__title { font-size:26px; }
.method-experience__subtitle { font-size:16px; }
.method-experience__intro { margin-top:20px; font-size:12px; }

.experience-item:hover { background:transparent; color:inherit; }
.experience-item.is-open { background:rgba(255,255,255,.25); }

.experience-item__summary { grid-template-columns:minmax(0,1fr) auto 24px; gap:20px; padding:20px 5px 20px 10px; }
.experience-item__name { font-size:12px; }
.experience-item__lead { margin-top:7px; font-size:14px; opacity:1; }
.experience-item__treatment { margin-top:8px; font-size:11px;  line-height:1.9; opacity:.65; }
.experience-item__price { font-size:11px; }
.experience-item__trigger { width:24px; height:24px; }

.experience-item__detail-inner { padding:0 35px 0 12px; }
.experience-item.is-open .experience-item__detail-inner { padding-bottom:35px; }

.experience-detail__catch { margin-top:0px; font-size:15px; }
.experience-detail__copy { margin-top:7px; font-size:10px; line-height:1.9; }
.experience-detail__time { margin-top:15px !important; font-size:10px; }
.experience-detail__copy p { font-size: 11px; }
.experience-item__summary { grid-template-columns:minmax(0,1fr) auto 24px; grid-template-areas:"name price trigger" "lead price trigger" "treatment treatment treatment"; gap:0 20px; }
.experience-item__main { display:contents; }
.experience-item__name { grid-area:name; white-space: nowrap; }
.experience-item__lead { grid-area:lead; }
.experience-item__treatment { grid-area:treatment; max-width:none; margin-top:14px; padding-right:0; }
.experience-item__price { grid-area:price; align-self:center; margin-top:2px; }
.experience-item__trigger { grid-area:trigger; align-self:center; }

}

/* =========================================
   TRANSITION VISUAL
========================================= */

.method-transition-visual { position:relative; width:100%; height:clamp(220px,28vw,420px); overflow:hidden; background:#d1cbc6; }
.method-transition-visual img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 48%; }

@media (max-width:767px) {
.method-transition-visual { height:140px; }
}


/* =========================================
   STACKING SCROLL
========================================= */

@media (min-width:768px) {

.method-intro { position:sticky; top:0; z-index:1; }

.method-journey { position:relative; z-index:2; background:#b5aea7; box-shadow:0 -18px 40px rgba(0,0,0,.07); }

.method-menu { position:relative; z-index:3; }

.method-transition-visual { position:sticky; top:0; z-index:4; }

.method-final-cta { position:relative; z-index:5; box-shadow:0 -18px 40px rgba(0,0,0,.08); }

}



/* =========================================
   FINAL CTA
========================================= */

.method-final-cta { padding:100px 5vw; background:#b5aea7; color:#fff; }
.method-final-cta__inner { display:grid; grid-template-columns:minmax(0,7fr) minmax(260px,3fr); width:100%; max-width:1400px; min-height:520px; margin:0 auto; }
.method-final-cta__content { display:flex; flex-direction:column; justify-content:center; padding:70px 8vw 70px 4vw; }
.method-final-cta__eyebrow { margin:0 0 35px; font-size:10px; letter-spacing:.16em; opacity:.6; }
.method-final-cta__title { margin:0; font-size:clamp(30px,3vw,46px); font-weight:400; line-height:1.55; letter-spacing:.03em; }
.method-final-cta__text { margin:30px 0 0; font-size:13px; line-height:2; opacity:.7; }

.method-final-cta__links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; width:100%; max-width:620px; margin-top:55px; }

.method-final-cta__link { display:flex; align-items:center; justify-content:center; gap:16px; min-width:0; padding:0 18px; border:1px solid #fff; color:#fff; text-decoration:none; font-size:13px; letter-spacing:.1em; line-height:50px; white-space:nowrap; transition:all 700ms cubic-bezier(.19,1,.22,1); }
.method-final-cta__link .method-arrow { flex:0 0 auto; }
.method-final-cta__link:hover { color:#fff; border-color:#666; background-color:#666; }
.method-final-cta__link:hover .method-arrow { width:20px; }
.method-final-cta__visual { position:relative; min-height:520px; overflow:hidden; }
.method-final-cta__visual img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform 1.4s cubic-bezier(.19,1,.22,1); }
.method-final-cta:hover .method-final-cta__visual img { transform:scale(1.025); }


/* =========================================
   SP FINAL CTA
========================================= */

@media (max-width:767px) {
.method-final-cta { padding:70px 15px 0; }
.method-final-cta__inner { display:flex; flex-direction:column; min-height:0; }
.method-final-cta__content { padding:35px 10px 70px; }
.method-final-cta__eyebrow { margin-bottom:25px; }
.method-final-cta__title { font-size:28px; }
.method-final-cta__text { margin-top:25px; font-size:12px; }
.method-final-cta__links { display:block; margin-top:45px; }
.method-final-cta__link { margin-top:20px; }
.method-final-cta__visual { min-height:360px; }
.method-final-cta__visual img { object-position:center; }
}