:root{--paper:#171a18;--ink:#f1f2ed;--muted:#a9b1aa;--line:#ffffff20;--accent:#b2c8b7;--serif:'Zen Old Mincho',serif;color-scheme:dark;font-family:var(--serif);color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:45px}body{margin:0;overflow-wrap:break-word}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--accent);outline-offset:7px}a:hover{color:var(--accent)}::selection{background:var(--accent);color:#171a18}.skip{position:fixed;left:20px;top:-100px;z-index:20;padding:12px;background:var(--paper)}.skip:focus{top:12px}.header{height:94px;display:flex;align-items:center;justify-content:space-between;padding:0 5.8%;background:#fff;color:#1a1a1a}.brand{display:inline-flex;align-items:center;gap:12px;font-size:25px;font-weight:600;letter-spacing:-.055em}.brand svg,.story-signoff svg{width:32px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.header nav{display:flex;align-items:center;gap:37px;font-size:13px}.header .current{color:#3d7a5e}.header nav a{padding:10px 0}.header nav span{margin-left:12px}.hero{position:relative;min-height:590px;height:min(680px,75vw);isolation:isolate;overflow:hidden}.hero-image{position:absolute;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:center 85%;filter:sepia(.16) saturate(.5) brightness(.62) contrast(.94);inset:0}.hero-shade{position:absolute;z-index:-2;inset:0;background:linear-gradient(90deg,#101814b0,transparent 90%),linear-gradient(0deg,#0c120eb5,transparent 65%)}.hero-content{position:relative;padding:105px 8% 95px;max-width:1400px;margin:auto}.eyebrow{font-size:11px;font-weight:400;letter-spacing:.2em;color:var(--accent);line-height:1.8;margin:0 0 30px}h1{font-size:clamp(46px,5.3vw,76px);font-weight:400;line-height:1.45;letter-spacing:.08em;margin:0 0 30px}.hero-subtitle{font-size:16px;line-height:1.75;letter-spacing:.04em;color:#e4e8e2;margin:0}.hero-bottom{position:absolute;bottom:34px;left:8%;right:8%;display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.04em}.hero-bottom a{display:flex;gap:38px;align-items:center;min-height:40px}.hero-bottom a span{font-size:21px}.hero-bottom>span{font-size:10px;letter-spacing:.17em;color:#d1d8d0}.photo-credit{display:flex;align-items:center;justify-content:space-between;margin:0 5.8%;padding:19px 0;font-size:10px;letter-spacing:.11em;color:var(--muted)}.story{max-width:600px;padding:110px 0 115px;margin:auto}.story-intro{margin-bottom:58px}.story-intro .eyebrow{margin-bottom:24px}.story h2{font-size:32px;font-weight:400;line-height:1.8;letter-spacing:.065em;margin:0}.prose{font-size:16px;font-weight:400;line-height:2;letter-spacing:.05em;color:#d3d8d1}.prose p{margin:0 0 16px}.questions{margin:42px 0;color:#aeb8ae}.questions p{margin:0 0 15px}.prose .question{font-size:22px;color:var(--ink);margin:49px 0 0;letter-spacing:.07em}.belief{padding-top:90px}.story h3{font-size:28px;font-weight:400;line-height:1.9;letter-spacing:.045em;margin:0 0 43px}.belief .prose{line-height:2}.prose .statement{font-size:32px;font-weight:500;line-height:1.65;letter-spacing:.055em;color:var(--ink);margin:55px 0 0}.promise{margin-top:96px;padding-top:78px;border-top:1px solid var(--line)}.promise .eyebrow{margin-bottom:23px}.story-signoff{display:flex;align-items:center;gap:19px;margin-top:64px;color:var(--accent);font-size:13px;letter-spacing:.075em}.story-signoff svg{width:26px}.journey{background:#222b25;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:60px;padding:80px max(8%,calc((100% - 1100px)/2));}.journey .eyebrow{margin-bottom:24px;font-size:10px}.journey h2{font-size:32px;font-weight:400;line-height:1.8;letter-spacing:.055em;margin:0}.journey-action{max-width:320px;width:100%;justify-self:end}.journey-action p{font-size:13px;color:#c5cfc5;line-height:1.65;margin:0 0 24px}.app-link{display:flex;justify-content:space-between;align-items:center;gap:30px;border:1px solid #a8b9ab9c;padding:18px 24px;font-size:14px;transition:background .2s,color .2s}.app-link span{font-size:20px}.app-link:hover{color:#172019;background:#e0e8df}.footer{padding:45px 5.8% 28px;background:#131613}.footer-top,.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px}.footer .brand{font-size:25px}.back-top{font-size:12px;color:#c4ccc3}.footer-bottom{margin-top:38px;color:#98a196;font-size:10px;line-height:1.8}.footer-bottom small{font-size:11px}@media(min-width:1700px){.hero-content{padding-left:0}.hero-bottom{max-width:1400px;margin:auto}}@media(max-width:800px){.header{height:78px;padding:0 6%}.brand{font-size:22px;gap:8px}.brand svg{width:27px}.header nav{gap:20px;font-size:12px}.header nav .current{display:none}.header nav span{margin-left:7px}.hero{min-height:540px;height:70svh;max-height:650px}.hero-image{object-position:72% center}.hero-shade{background:linear-gradient(90deg,#10181485,transparent),linear-gradient(0deg,#0c120ecc,transparent 90%)}.hero-content{padding:105px 8% 100px}.hero-content .eyebrow{font-size:10px;margin-bottom:25px}h1{font-size:48px;letter-spacing:.04em;line-height:1.5;margin-bottom:25px}.hero-subtitle{font-size:14px;line-height:1.75;letter-spacing:.02em}.hero-bottom{bottom:25px}.hero-bottom>span{display:none}.photo-credit{margin:0 6%;font-size:9px;padding:17px 0}.story{padding:76px 7% 78px;width:100%;max-width:600px}.story-intro{margin-bottom:38px}.story-intro .eyebrow{font-size:10px;margin-bottom:18px}.story h2{font-size:26px;letter-spacing:.02em}.prose{font-size:16px;line-height:2;letter-spacing:.05em}.prose p{margin-bottom:16px}.questions{margin:34px 0}.questions p{margin-bottom:18px}.prose .question{font-size:21px;margin-top:38px}.belief{padding-top:65px}.story h3{font-size:23px;letter-spacing:.015em;line-height:1.85;margin-bottom:30px}.desktop-break{display:none}.prose .statement{font-size:27px;letter-spacing:.01em;margin-top:38px}.promise{margin-top:64px;padding-top:54px}.promise .eyebrow{font-size:10px}.story-signoff{margin-top:44px;gap:12px;font-size:12px;letter-spacing:.025em}.journey{grid-template-columns:1fr;gap:31px;padding:58px 7% 62px}.journey h2{font-size:28px;letter-spacing:.02em;line-height:1.8}.journey-action{justify-self:start;max-width:360px}.journey-action p{font-size:12px;margin-bottom:18px}.app-link{font-size:14px;padding:17px 22px}.footer{padding:32px 6% 24px}.footer .brand{font-size:23px}.footer-bottom{align-items:flex-start;font-size:9px;gap:15px;flex-wrap:wrap}.footer-bottom small{font-size:10px}}@media(max-width:360px){h1{font-size:43px}.hero-content{padding-left:7%;padding-right:7%}.story h3{font-size:21px}.prose .statement{font-size:25px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.app-link{transition:none}}@media print{body,.journey,.footer{background:#fff;color:#000}.hero{min-height:auto;height:auto}.hero-image,.hero-shade,.header,.hero-bottom,.photo-credit{display:none}.hero-content{padding:20px 0}.hero h1,.hero p,.prose,.eyebrow,.prose .statement,.prose .question,.story-signoff{color:#000}.story{padding:30px 0}.belief,.promise,.journey{break-inside:avoid}.back-top{display:none}}

/* Official wordmark on white; compact supporting text. */
.header .brand-logo{display:block;width:156px;height:auto}.header a:hover{color:#3d7a5e}.header a:focus-visible{outline-color:#3d7a5e}.eyebrow{line-height:1.5}.prose .question{font-weight:500;line-height:1.65}.questions p{margin-bottom:12px}.journey-action p{line-height:1.65}@media(max-width:800px){.header .brand-logo{width:136px}}

/* Keep the closing headline on exactly two lines at every breakpoint. */
.journey-intro{min-width:0;container-type:inline-size}.journey h2{font-size:clamp(20px,8.8cqw,32px)}.journey h2 span{display:block;white-space:nowrap}@media(max-width:800px){.journey h2{font-size:clamp(20px,8.8cqw,28px)}}

/* 2026-09-26 コメント対応：「WithPackは、こんなAI時代に…」直下の本文2段落の行間を詰める（2.0→1.7） */
.belief .prose p:not(.statement){line-height:1.7}
/* 2026-09-26 コメント対応：「旅の実感を、取り戻す。」直下の本文2段落の行間を詰める（2.0→1.7） */
#story > .prose > p:not(.question){line-height:1.7}
/* 2026-09-26 コメント対応：「面倒は片付ける。旅の中身は決めつけない。」直下の本文の行間を詰める（2.0→1.7） */
.promise .prose p{line-height:1.7}
/* 2026-09-26 コメント対応：アプリ導線パートに機能紹介（最新の画面イメージ9点）を横スクロールで追加 */
.journey-carousel{grid-column:1/-1;min-width:0;--bleed:max(8vw,calc((100vw - 1100px)/2))}
.journey-action{grid-column:2}
.journey-features{list-style:none;margin:16px calc(var(--bleed)*-1) 0;padding:6px var(--bleed) 34px;display:flex;gap:44px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--bleed);scrollbar-width:thin;scrollbar-color:#a8b9ab80 transparent}
.journey-features:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.feature{flex:0 0 236px;display:flex;flex-direction:column;scroll-snap-align:start}
.feature-shot{margin:0 0 26px;width:200px;aspect-ratio:505/1040}
.feature-shot img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 16px 24px #00000059)}
.journey .feature .eyebrow{margin:0 0 12px}
.feature h3{font-size:17px;font-weight:400;line-height:1.65;letter-spacing:.05em;color:var(--ink);margin:0 0 12px}
.feature-text{font-size:13px;line-height:1.7;letter-spacing:.04em;color:#c5cfc5;margin:0}
.features-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:6px}
.features-hint{margin:0;font-size:11px;letter-spacing:.12em;color:var(--muted)}
.features-buttons{display:flex;gap:10px}
.features-btn{width:46px;height:46px;border:1px solid #a8b9ab9c;background:transparent;color:var(--ink);font:inherit;font-size:18px;cursor:pointer;transition:background .2s,color .2s}
.features-btn:hover:not(:disabled){background:#e0e8df;color:#172019}
.features-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.features-btn:disabled{opacity:.35;cursor:default}
@media(max-width:800px){.journey-carousel{--bleed:7vw}.journey-action{grid-column:auto}.journey-features{gap:26px;margin-top:4px;padding-bottom:26px}.feature{flex-basis:min(62vw,230px)}.feature-shot{width:min(52vw,190px);margin-bottom:20px}.feature h3{font-size:15px;letter-spacing:.03em}.feature-text{font-size:12px}.features-btn{width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.features-btn{transition:none}}
/* 2026-09-26 機能紹介に旅のタイミングのタグを追加（旅行計画中→旅行中→旅行後→旅行前（日常）の順） */
.feature-phase{align-self:flex-start;margin:0 0 22px;padding:5px 12px 6px;border:1px solid #b2c8b770;border-radius:2px;font-size:12px;line-height:1.4;letter-spacing:.08em;color:var(--accent)}
@media(max-width:800px){.feature-phase{font-size:11px;margin-bottom:18px;padding:4px 10px 5px}}
.feature-shot{position:relative}.feature-shot img{position:absolute;inset:0}
/* 2026-09-26 旅のタイミングのタグを柔らかい色で色分け（計画中=若草 / 旅行中=空色 / 旅行後=砂色 / 日常=薄紅） */
.feature-phase{border-color:transparent;font-weight:500}
.phase-plan{background:#c9dcc433;color:#cfe3c9;border-color:#c9dcc466}
.phase-during{background:#b9d3e433;color:#c4dcec;border-color:#b9d3e466}
.phase-after{background:#e6d2b033;color:#ecdcbd;border-color:#e6d2b066}
.phase-daily{background:#e7c4c833;color:#efcfd2;border-color:#e7c4c866}
/* 2026-10-01 公式サイト（withpack.app）と同じ、プライバシーポリシー・利用規約・お問い合わせへのリンクをフッターに追加 */
.footer-legal{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.04em;color:#c4ccc3}
.footer-legal a{padding:4px 0}
.footer-legal+.footer-bottom{margin-top:18px}
@media(max-width:800px){.footer-legal{gap:8px 22px;margin-top:24px;padding-top:18px;font-size:11px}}