/* v16: 読む面と絵を受ける面を分ける。本文と要素の順は保持。 */
.hero{background:#FFF1E6 url('assets/geometry-hero-pc.webp') center/100% 100% no-repeat;overflow:hidden}
.hero::before{content:none}
.hero .wrap{z-index:1}
.hero .cond{background:#FFF1E6;box-shadow:0 0 0 10px #FFF1E6;color:var(--ink);max-width:none}
.hero .cap{background:#FFF1E6;margin:12px 0 0;padding:8px 12px;width:fit-content;max-width:100%;border-left:3px solid #B4D3E0}
.hero-grid>div:last-child{padding-bottom:24px}

/* 六つの玩具は矩形の紙面として扱い、異なる曲面との継ぎ目を作らない。 */
.shelf .toys{background:transparent;border-radius:0;padding:0;margin-inline:0}
.shelf .art-toys{display:block;mix-blend-mode:normal!important;border-radius:0;border:0}
.shelf .toys .cap{margin-top:14px;padding:0}

/* 隣接する比較項目は一本の区切りを共有。セルフの背景と太字は保持。 */
.course .c .x{border:0!important;margin:0!important;padding:14px 0!important}
.course .c p:not(.p){margin:0!important;padding:14px 0;border:0;border-bottom:1px solid #E2D4C9!important}
.course .c p:last-child{border-bottom:0!important;padding-bottom:0}
.course .c.self p:not(.p){border-color:#D1C9C2!important}
.course .c .p{margin-bottom:0}
.shelf .reading-copy{text-wrap:pretty;word-break:normal;line-break:strict}
.shelf .course-sources .copy-lead{display:inline;font-size:16px;margin:0}
.shelf .course-sources{max-width:none}

/* 正確な時間帯は5:1。目印・引出線は図の下の無地面だけに配置。 */
.timeline{aspect-ratio:auto!important;padding-bottom:80px!important;font-size:16px!important}
.timeline .timeline-art{position:static;display:block;aspect-ratio:auto!important;width:100%;height:auto;object-fit:contain}
.timeline .time-band{position:relative;margin-top:36px;overflow:visible}
.timeline .time-band::before{content:'';position:absolute;top:-4px;left:-1px;width:7px;height:18px;background:#805038;transform:translateX(-50%)}
.timeline .play-days,.timeline .plan-days{position:relative}
.timeline .plan-days::before,.timeline .plan-days::after{content:'';position:absolute;top:-4px;width:7px;height:18px;background:#174A68;transform:translateX(-50%)}
.timeline .plan-days::before{left:-1px}.timeline .plan-days::after{left:100%}
.timeline .floor-labels{position:absolute;top:auto;bottom:0;left:0;width:100%;height:80px;font:700 16px var(--round)!important;overflow:visible}
.cycle .source-copy{text-wrap:pretty;max-width:none}
.cycle .source-copy .copy-block{display:inline;margin:0}

/* 条件: 項目の区切りは行頭、説明内のまとまりは余白。札と二重線を解消。 */
.trow .term-lead{border:0;padding-left:0;margin-bottom:18px}
.trow .term-part .d{display:block;background:none;border:0;padding:0;margin:0 0 10px;font-weight:700;font-size:18px;color:var(--ink)}
.trow .term-part{border:0;padding:0;margin-top:24px}
.trow .term-part+.term-part{border:0;padding-top:0;margin-top:28px}
.trow .term-part:first-child{margin-top:0}
.trow dd small,.trow .detail-intro{font-size:16px;color:var(--ink);line-height:2}
.trow .copy-block+.copy-block{margin-top:12px}
.trow .para-break{height:14px}
.trow.key{margin-inline:-16px;padding-inline:16px}
.trow.key+.trow.key{margin-top:0}
.trow.key .term-lead{padding-left:0}
.trow.cancel-term .term-lead>.copy-block+.copy-block{margin-top:12px}
.trow .detail-intro{display:inline}

/* 手順の細い画像片は除き、既存の左罫線を見出しの支えにする。 */
.start-section .section-head{background-image:none;padding-right:0}
/* 最後のCTAは上下の線と左右の面で受け、角に細い円弧を残さない。 */
.terms-section>.wrap>.final{border-top:3px solid #E3B693;border-bottom:3px solid #E3B693;background:#FFF1E6}
.terms-section>.wrap>.final::before,.terms-section>.wrap>.final::after{content:none}

@media(max-width:859px){
 .hero{background-image:url('assets/geometry-hero-mobile.webp');background-size:100% calc(100% - 240px);background-position:center bottom}
 .hero::before{content:none}
 .hero-grid>div:first-child::before{content:'';position:absolute;left:calc((100% - 100vw)/2);width:100vw;top:0;bottom:-8px;background:#FFF1E6;z-index:-1;pointer-events:none}
 .hero .cond{box-shadow:none;background:transparent}
 .hero .pr{padding-top:12px}
 .hero .eyebrow{margin-top:12px;padding-block:5px}
 .hero h1{margin-block:14px}
 .hero .cta{margin-top:18px}
 .hero .cond{margin-top:18px}
 .hero .cond a{margin-top:6px}
 .hero-grid{gap:8px}
 .hero-grid>div:last-child{padding:12px 0 0;background:none}
 .hero .cap{margin:8px 0 0;background:#FFF1E6}
 .hero{padding-bottom:22px}
 .course .c .p{margin-bottom:0}
 .shelf .course-sources{padding-left:0;padding-right:0}
 .trow.key{margin-inline:-8px;padding-inline:8px}
 .trow .term-lead,.trow.key .term-lead{padding-left:0}
 .trow .term-part .d{font-size:17px}
 .trow.key+.trow.key{margin-top:0}
}
@media(max-width:359px){.hero{background-position:center calc(100% + 36px)}}