/* 0.58 / 02以降の編集的な再設計。ヒーローと01には適用しない。 */

/* 02 / 3枚のカードではなく、一続きの資産フローとして見せる。 */
.structure-section{padding-block:112px 118px}
.structure-section>.section{position:relative}
.structure-section .section-heading{display:grid;grid-template-columns:minmax(0,.82fr) minmax(360px,.58fr);column-gap:clamp(60px,9vw,132px);align-items:end;margin-bottom:64px}
.structure-section .section-heading>.eyebrow{grid-column:1/-1;margin-bottom:28px}
.structure-section .section-heading>h2{margin:0}
.structure-section .section-heading>p{align-self:end;margin:0 0 8px;padding:0 0 5px 28px;border-left:1px solid #c7bfce;line-height:2}
.structure-section .structure-flow{position:relative;grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr) 52px minmax(0,1fr);gap:0;align-items:stretch}
.structure-section .structure-flow article{z-index:1;display:flex;min-height:512px;flex-direction:column;padding:26px 26px 32px;background:rgba(255,255,255,.94);border:0;box-shadow:inset 1px 0 #ded9e3,inset -1px 0 #ded9e3,inset 0 -1px #ded9e3;position:relative}
.structure-section .structure-flow article:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:#86779b;transform-origin:left center}
.structure-section .structure-flow article:after{display:none}
.structure-section .structure-flow .step-number{position:relative;z-index:2;width:38px;height:38px;margin:0 0 18px;background:#f4f1f8;border:1px solid #e0d9ea;font-family:Georgia,serif}
.structure-section .process-illustration{height:176px;margin:0 0 24px;object-fit:contain}
.structure-section .structure-flow h3{font-size:clamp(21px,1.7vw,25px);margin:0 0 13px}
.structure-section .structure-flow p{max-width:31ch;margin:0;font-size:14px;line-height:2}
.structure-section .flow-arrow{position:relative;z-index:2;display:flex;width:52px;height:100%;padding:42px 12px 0;justify-content:center;color:#86779b;background:transparent}
.structure-section .flow-arrow svg{width:28px}

/* 03 / 背景はMETSの文字だけに絞り、特典を一続きの台帳として接続する。 */
.token-section{position:relative;grid-template-columns:minmax(320px,.76fr) minmax(480px,1.24fr);column-gap:clamp(68px,8vw,118px);padding-block:126px 118px}
.token-section:after{content:none;display:none}
.token-section:before{left:-8px;top:190px;color:#e9e4ee;font-size:clamp(154px,17vw,232px);letter-spacing:-.075em}
.token-section .token-heading{min-height:535px;display:flex;flex-direction:column;align-items:flex-start}
.token-section .token-heading>.eyebrow{margin-bottom:26px}
.token-section .token-heading h2{margin:0}
.token-section .token-heading>.token-coin{width:190px;height:190px;margin:auto 0 8px 22px;filter:drop-shadow(0 18px 24px rgba(31,21,48,.12))}
.token-section .visual-uses{gap:0;border-top:1px solid #39333f;border-bottom:1px solid #39333f}
.token-section .visual-uses article,.token-section .visual-uses article:first-child{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr);gap:0 18px;align-items:start;min-height:154px;padding:31px 8px 30px 0;background:transparent;border:0;border-bottom:1px solid #ddd7e2}
.token-section .visual-uses article:last-child{border-bottom:0}
.token-section .visual-uses article:before{content:none;display:none}
.token-section .visual-uses article:after{content:none;display:none}
.token-section .visual-uses article>div{min-width:0;padding-left:24px;border-left:1px solid #ddd7e2}
.token-section .visual-uses .benefit-icon{width:42px;height:42px;margin:0;background:transparent;border:0;border-radius:0;color:#5e3aae}
.token-section .visual-uses .benefit-icon svg{width:32px;height:32px;stroke-width:1.05}
.token-section .visual-uses h3{font-size:22px;margin:0 0 8px}
.token-section .visual-uses p{max-width:51ch;line-height:1.9}
.token-section .tier-table{grid-column:1/-1;margin-top:76px;border:0;border-top:1px solid #c9c1d1;background:#fff}
.token-section .tier-table caption{padding:18px 18px 16px;background:transparent;border-bottom:1px solid #ddd7e3;letter-spacing:.08em}
.token-section .tier-table th,.token-section .tier-table td{border-right:1px solid #eeeaf2}
.token-section .tier-table tr>*:last-child{border-right:0}
.token-section .tier-table thead th:nth-child(n+2){padding-top:25px;font-family:Georgia,'Times New Roman',serif;font-size:21px;letter-spacing:.015em}
.token-section .tier-table thead th:nth-child(2){background:linear-gradient(180deg,#f6f6f7,#f1f1f3);color:#5e6169;box-shadow:inset 0 3px #b8bbc3}
.token-section .tier-table thead th:nth-child(3){background:linear-gradient(180deg,#fbf7ec,#f7f1e3);color:#8b6727;box-shadow:inset 0 3px #caa75e}
.token-section .tier-table thead th:nth-child(4){background:linear-gradient(180deg,#f4eef9,#eee6f7);color:#4f2c9e;box-shadow:inset 0 3px #6039bb,inset 1px 0 #d8cce7,inset -1px 0 #d8cce7}
.token-section .tier-table tbody td:nth-child(2){background:#fbfbfc}
.token-section .tier-table tbody td:nth-child(3){background:#fdfbf6}
.token-section .tier-table tbody td:nth-child(4){background:#faf7fc;box-shadow:inset 1px 0 #eee7f3,inset -1px 0 #eee7f3}

/* 04 / 暗色の誌面として、保有情報と3つの工程を横長の章で見せる。 */
.journey-section{padding-block:122px 126px;background:linear-gradient(90deg,rgba(25,24,30,.98) 0%,rgba(31,30,37,.94) 44%,rgba(37,35,43,.88) 100%),#211f27}
.journey-section:before{opacity:.16;background-position:center bottom;mix-blend-mode:screen;filter:grayscale(1) contrast(.88)}
.journey-section .journey-layout{grid-template-columns:minmax(400px,.86fr) minmax(560px,1.14fr);gap:clamp(68px,7vw,110px);align-items:start}
.journey-section .journey-layout>div:first-child{padding-top:3px}
.journey-section .journey-layout h2{max-width:100%;margin-bottom:0}
.journey-section .holding-record{max-width:440px;margin-top:72px;padding:0;background:transparent;border:0;border-top:1px solid #807985;border-bottom:1px solid #807985}
.journey-section .holding-record>div{display:grid;grid-template-columns:minmax(120px,.78fr) minmax(0,1.22fr);align-items:center;gap:24px;min-height:62px;padding:14px 2px;border-color:#ffffff1a}
.journey-section .holding-record .record-title{display:block;min-height:0;padding:18px 2px 17px;color:#c8c1cf;letter-spacing:.14em}
.journey-section .record-illustration{display:none}
.journey-section .holding-record b{text-align:right;font-size:13px;letter-spacing:.01em}
.journey-section .holding-record>div>span{font-size:12px}
.journey-section .journey-steps{position:relative;margin:0;padding:0;background:transparent;border:0;border-top:1px solid #87808d;backdrop-filter:none}
.journey-section .journey-steps:before{content:none;display:none}
.journey-section .journey-steps li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:22px;min-height:176px;padding:30px 0 29px;border-bottom:1px solid #ffffff20}
.journey-section .journey-steps li:last-child{min-height:176px;padding-bottom:29px;border-bottom-color:#87808d}
.journey-section .journey-steps li:not(:last-child):before{display:none}
.journey-section .journey-steps li:after{content:"";position:absolute;left:0;top:-1px;width:62px;height:1px;background:#c7b2df;transform-origin:left center}
.journey-section .journey-steps li>span{display:block;z-index:1;width:auto;height:auto;padding-top:9px;border:0;border-radius:0;background:transparent;color:#b9aec4;font-family:Arial,sans-serif;font-size:10px;font-weight:600;letter-spacing:.18em;line-height:1}
.journey-section .journey-steps li>div{display:grid;grid-template-columns:minmax(0,1fr) 190px;align-items:center;gap:34px;width:100%;padding:0}
.journey-section .journey-steps li h3{margin:0;font-size:clamp(27px,2.25vw,35px);line-height:1.18}
.journey-section .journey-illustration{display:block;justify-self:end;width:190px;height:112px;object-fit:contain;object-position:right center;opacity:.95}

/* 05 / 左の余白を背景図の呼吸として残しつつ、料金票の重心を中央へ寄せる。 */
.fee-section{grid-template-columns:minmax(330px,.84fr) minmax(520px,1.16fr);gap:clamp(72px,9vw,130px);padding-block:126px}
.fee-section>div:first-child{min-height:490px}
.fee-section>div:first-child:before{left:-82px;right:-8px;top:110px;bottom:-42px;opacity:.62}
.fee-section .fee-list{padding:31px 38px 24px;box-shadow:12px 12px 0 #f2eff6}
.fee-section .fee-list .receipt-label{margin-bottom:9px;padding-bottom:20px}
.fee-section .fee-list>div:not(.fee-example){padding:21px 0 25px}
.fee-section .fee-list .fee-example{margin-top:27px;padding:22px 24px}

/* 06 / 3枚のカードを廃し、一つの時系列として読む。 */
.roadmap-section{padding-block:100px 120px;background:#f7f6f8}
.roadmap-section>.section-heading,.roadmap-section .roadmap-grid{max-width:1192px}
.roadmap-section>.section-heading{margin-bottom:68px}
.roadmap-section .roadmap-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid #ada2b8;border-bottom:1px solid #d8d2de}
.roadmap-section .roadmap-grid:before{content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;background:#6039bb;transform-origin:left center}
.roadmap-section.is-motion-entered .roadmap-grid:before{transform:scaleX(1)}
.roadmap-section .roadmap-grid article{position:relative;min-height:330px;padding:38px 34px 40px;background:rgba(255,255,255,.58);border:0;border-right:1px solid #d8d2de}
.roadmap-section .roadmap-grid article:last-child{border-right:0}
.roadmap-section .roadmap-grid article:before{content:"";position:absolute;top:-7px;left:34px;width:13px;height:13px;background:#f7f6f8;border:2px solid #6039bb;border-radius:50%}
.roadmap-section .roadmap-grid article>p{display:block;margin:0 0 50px;color:#6f647b;letter-spacing:.14em}
.roadmap-section .roadmap-grid b{display:block;margin-top:7px;color:#c0b6ca;font-size:76px;line-height:.9}
.roadmap-section .roadmap-grid h3{margin:0 0 17px;font-size:22px}
.roadmap-section .roadmap-grid span{display:block;max-width:28ch}

/* FAQ / 罫線と番号で整え、閉じた状態でも全体の構造を見せる。 */
.questions-section{grid-template-columns:minmax(250px,.68fr) minmax(560px,1.32fr);gap:clamp(62px,8vw,118px);padding-block:112px 120px}
.questions-section>div:first-child:after{font-size:190px;margin-top:34px}
.questions-section .questions{counter-reset:mets-question;border-top:1px solid #bcb4c5}
.questions-section details{counter-increment:mets-question;position:relative;border-color:#d8d2de}
.questions-section summary{display:grid;grid-template-columns:42px minmax(0,1fr) 24px;gap:18px;min-height:82px;padding:25px 0}
.questions-section summary:before{content:counter(mets-question,decimal-leading-zero);font-family:Georgia,serif;font-size:12px;color:#776b83;font-weight:400}
.questions-section summary svg{justify-self:end}
.questions-section details>p{margin:0;padding:0 42px 26px 60px}

/* Closing / 一本の罫線で本文から切り替える。 */
.closing{border-top:1px solid #756781}
.closing .closing-inner{max-width:1050px;padding-block:94px 102px}
.closing .closing-inner:before{content:"";display:block;width:54px;height:1px;margin:0 auto 32px;background:#a58ec5}

@media(max-width:1000px){
  .structure-section .section-heading{grid-template-columns:1fr;gap:20px}.structure-section .section-heading>.eyebrow{margin-bottom:10px}.structure-section .section-heading>p{max-width:620px;padding-left:20px}
  .token-section{grid-template-columns:minmax(280px,.72fr) minmax(400px,1.28fr);column-gap:52px}.token-section .token-heading>.token-coin{width:166px;height:166px}
  .journey-section .journey-layout{grid-template-columns:minmax(285px,.7fr) minmax(470px,1.3fr);gap:54px}
  .journey-section .journey-steps li>div{grid-template-columns:minmax(0,1fr) 158px;gap:22px}.journey-section .journey-illustration{width:158px}
  .fee-section{grid-template-columns:minmax(290px,.75fr) minmax(460px,1.25fr);gap:52px}
}

@media(max-width:800px){
  .structure-section{padding-block:82px 88px}
  .structure-section .section-heading{display:block;margin-bottom:42px}
  .structure-section .section-heading>.eyebrow{margin-bottom:18px}
  .structure-section .section-heading>h2{margin-bottom:24px}
  .structure-section .section-heading>p{padding:0 0 0 18px;font-size:13px;line-height:1.9}
  .structure-section .structure-flow{display:block}
  .structure-section .structure-flow article{min-height:0;padding:22px 22px 27px}
  .structure-section .process-illustration{width:100%;max-width:270px;height:152px;aspect-ratio:auto;margin:0 auto 19px}
  .structure-section .structure-flow .step-number{margin-bottom:14px}
  .structure-section .structure-flow p{max-width:none}
  .structure-section .flow-arrow{width:40px;height:50px;padding:11px 0 9px 8px;justify-content:flex-start}
  .structure-section .flow-arrow svg{width:24px;transform:rotate(90deg)}

  .token-section{display:block;padding-block:84px 82px}
  .token-section:before{top:160px;left:-8px;font-size:126px}
  .token-section .token-heading{min-height:365px}
  .token-section .token-heading>.token-coin{width:144px;height:144px;margin:auto 0 24px 8px}
  .token-section .visual-uses{margin-top:16px}
  .token-section .visual-uses article,.token-section .visual-uses article:first-child{grid-template-columns:44px minmax(0,1fr);gap:0 12px;min-height:0;padding:25px 0}
  .token-section .visual-uses article>div{padding-left:18px}
  .token-section .visual-uses .benefit-icon{width:38px;height:38px}
  .token-section .visual-uses .benefit-icon svg{width:29px;height:29px}
  .token-section .visual-uses h3{font-size:20px}
  .token-section .tier-table{margin-top:48px}

  .journey-section{padding-block:86px 92px;background:linear-gradient(180deg,rgba(26,25,31,.98),rgba(35,33,41,.92)),#211f27}
  .journey-section .journey-layout{display:block}
  .journey-section .journey-layout h2{max-width:10ch}
  .journey-section .holding-record{margin:42px 0 70px}
  .journey-section .holding-record>div{grid-template-columns:minmax(100px,.8fr) minmax(0,1.2fr);gap:15px;min-height:58px;padding-block:12px}
  .journey-section .journey-steps{padding-top:0}
  .journey-section .journey-steps li{grid-template-columns:32px minmax(0,1fr);gap:15px;min-height:0;padding:26px 0 27px}
  .journey-section .journey-steps li:last-child{min-height:0;padding-bottom:27px}
  .journey-section .journey-steps li:after{width:42px}
  .journey-section .journey-steps li>span{padding-top:7px;font-size:9px}
  .journey-section .journey-steps li>div{display:grid;grid-template-columns:1fr;gap:18px;padding:0}
  .journey-section .journey-steps li h3{font-size:clamp(24px,7.2vw,30px)}
  .journey-section .journey-illustration{justify-self:start;width:min(236px,100%);height:102px;object-position:left center}

  .fee-section{display:block;padding-block:84px 92px}
  .fee-section>div:first-child{min-height:330px}
  .fee-section>div:first-child:before{left:-82px;right:12%;top:72px;bottom:-22px;opacity:.48}
  .fee-section .fee-list{padding:25px 24px 21px}

  .roadmap-section{padding-block:82px 88px}
  .roadmap-section>.section-heading{margin-bottom:48px}
  .roadmap-section .roadmap-grid{display:block;border-top:0;border-bottom:0;border-left:1px solid #ada2b8;margin-left:7px}
  .roadmap-section .roadmap-grid:before{left:-1px;top:0;width:2px;height:100%;transform-origin:top center}
  .roadmap-section .roadmap-grid article{min-height:0;padding:15px 16px 45px 34px;background:transparent;border:0}
  .roadmap-section .roadmap-grid article:last-child{padding-bottom:8px}
  .roadmap-section .roadmap-grid article:before{top:20px;left:-7px}
  .roadmap-section .roadmap-grid article>p{margin-bottom:18px}
  .roadmap-section .roadmap-grid b{font-size:58px}
  .roadmap-section .roadmap-grid span{max-width:none}

  .questions-section{display:block;padding-block:82px 88px}
  .questions-section>div:first-child{margin-bottom:36px}
  .questions-section>div:first-child:after{font-size:104px;margin:0;right:0;top:0}
  .questions-section summary{grid-template-columns:32px minmax(0,1fr) 20px;gap:12px;min-height:76px;padding-block:22px}
  .questions-section details>p{padding:0 28px 24px 44px}
  .closing .closing-inner{padding-block:76px 82px}
}

@media(max-width:380px){
  .structure-section .structure-flow article{padding-inline:19px}.structure-section .process-illustration{height:136px}
  .token-section .token-heading{min-height:340px}.token-section .token-heading>.token-coin{width:132px;height:132px}
  .journey-section .holding-record>div{font-size:11px}.journey-section .journey-steps li{gap:12px}.journey-section .journey-illustration{height:92px}
  .fee-section .fee-list{padding-inline:20px}.fee-section .fee-list .fee-example{padding-inline:18px}
  .questions-section summary{grid-template-columns:28px minmax(0,1fr) 18px;gap:9px}.questions-section details>p{padding-left:37px;padding-right:10px}
}