@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Noto+Sans+JP:wght@400;500;600;700&display=swap");
:root { --ink:#173a32; --ink-soft:#49645d; --moss:#2b735f; --moss-dark:#1a5145; --moss-pale:#e3f0e8; --cream:#fbfaf4; --sand:#f2eee1; --line:#dce4d9; --sun:#e7b64b; --danger:#b34d37; --white:#fff; --shadow:0 18px 45px rgba(36,71,59,.11); --shadow-small:0 8px 24px rgba(36,71,59,.08); --radius-lg:28px; --radius-md:18px; --ease:cubic-bezier(.23,1,.32,1); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--cream); font-family:"Noto Sans JP",system-ui,sans-serif; font-size:16px; line-height:1.75; } a { color:inherit; text-decoration:none; } a:focus-visible,button:focus-visible { outline:3px solid #e1aa31; outline-offset:4px; } button { font:inherit; }
.container { width:min(1160px,calc(100% - 40px)); margin:0 auto; }.eyebrow { display:inline-flex; align-items:center; gap:8px; margin:0 0 14px; color:var(--moss-dark); font-family:Manrope,sans-serif; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.eyebrow::before { width:9px; height:9px; border-radius:999px; background:var(--sun); content:""; }.section { padding:104px 0; }.section--soft { background:#f0f3ea; }.section--sand { background:var(--sand); }.section-heading { max-width:670px; }.section-heading h2,.article-intro h1,.page-hero h1 { margin:0; color:var(--ink); font-size:clamp(30px,4vw,48px); line-height:1.27; letter-spacing:-.045em; }.section-heading p { margin:18px 0 0; color:var(--ink-soft); }.section-heading--between { display:flex; justify-content:space-between; gap:32px; align-items:end; max-width:none; }.skip-link { position:absolute; left:12px; top:-80px; z-index:100; padding:10px 14px; background:var(--ink); color:var(--white); border-radius:8px; }.skip-link:focus { top:12px; }
.site-header { position:sticky; z-index:50; top:0; border-bottom:1px solid transparent; background:rgba(251,250,244,.82); backdrop-filter:blur(14px); transition:background .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease); }.site-header.is-scrolled { border-color:rgba(23,58,50,.1); background:rgba(251,250,244,.94); box-shadow:0 7px 22px rgba(35,60,52,.06); }.nav { display:flex; min-height:76px; align-items:center; justify-content:space-between; gap:24px; }.brand { display:inline-flex; align-items:center; gap:10px; font-weight:700; line-height:1.25; }.brand__mark { display:grid; width:38px; height:38px; place-items:center; border-radius:13px; background:var(--moss); color:#fff; box-shadow:0 5px 12px rgba(43,115,95,.24); }.brand__name { font-size:15px; }.brand__sub { display:block; color:var(--ink-soft); font-size:10px; font-weight:500; letter-spacing:.05em; }.nav__links { display:flex; align-items:center; gap:24px; color:var(--ink-soft); font-size:14px; font-weight:600; }.nav__links a { transition:color .16s var(--ease); }.nav__links a:hover,.nav__links a[aria-current="page"] { color:var(--moss-dark); }.nav__toggle { display:none; border:0; background:transparent; color:var(--ink); cursor:pointer; }
.button { display:inline-flex; min-height:49px; align-items:center; justify-content:center; gap:10px; padding:12px 20px; border:1px solid transparent; border-radius:999px; font-weight:700; font-size:14px; line-height:1; transition:transform .16s var(--ease),background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease); }.button:active { transform:scale(.97); }.button--primary { color:#fff; background:var(--moss); box-shadow:0 9px 18px rgba(43,115,95,.22); }.button--primary:hover { background:var(--moss-dark); }.button--secondary { color:var(--moss-dark); background:transparent; border-color:#b9cec0; }.button--secondary:hover { border-color:var(--moss); background:var(--moss-pale); }.button--light { color:var(--moss-dark); background:#fff; }.button--small { min-height:42px; padding:10px 16px; font-size:13px; }.button__arrow { font-family:Manrope,sans-serif; font-size:18px; line-height:0; }
.hero { position:relative; overflow:hidden; padding:74px 0 90px; background:radial-gradient(circle at 83% 9%,#d8e9d9 0,transparent 26%),linear-gradient(128deg,#f7f4e8 0%,#fbfaf4 54%,#eaf2ea 100%); }.hero::before { position:absolute; width:510px; height:510px; right:-210px; bottom:-285px; border:1px solid rgba(43,115,95,.14); border-radius:50%; box-shadow:0 0 0 54px rgba(43,115,95,.04),0 0 0 108px rgba(43,115,95,.035); content:""; }.hero__grid { position:relative; display:grid; grid-template-columns:minmax(0,.94fr) minmax(430px,.88fr); align-items:center; gap:54px; }.hero h1 { max-width:660px; margin:0; font-size:clamp(42px,5.1vw,69px); line-height:1.18; letter-spacing:-.07em; }.hero h1 em { color:var(--moss); font-style:normal; }.hero__lede { max-width:590px; margin:24px 0 0; color:var(--ink-soft); font-size:17px; }.hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:31px; }.hero__note { display:flex; gap:10px; align-items:flex-start; max-width:520px; margin-top:25px; color:#5c7169; font-size:12px; line-height:1.65; }.hero__note strong { display:inline-grid; flex:0 0 auto; width:20px; height:20px; place-items:center; border-radius:50%; background:#e4ede5; color:var(--moss-dark); font-family:Manrope,sans-serif; }
.map-art { position:relative; min-height:460px; border:1px solid rgba(43,115,95,.11); border-radius:36px; background:#e6eee5; box-shadow:var(--shadow); overflow:hidden; transform:rotate(2deg); }.map-art__river { position:absolute; width:660px; height:105px; top:187px; left:-120px; border-radius:52% 48% 42% 58%; background:#add9db; transform:rotate(-19deg); }.map-art__street { position:absolute; height:30px; background:rgba(255,255,255,.88); border-radius:999px; box-shadow:0 0 0 5px rgba(255,255,255,.26); }.map-art__street--one { width:540px; top:95px; right:-75px; transform:rotate(30deg); }.map-art__street--two { width:470px; bottom:66px; left:-100px; transform:rotate(-28deg); }.map-art__street--three { width:320px; top:312px; right:-58px; transform:rotate(60deg); }.map-art__park { position:absolute; border-radius:45% 55% 50% 50%; background:#b7d4a6; }.map-art__park--one { width:250px; height:180px; top:-36px; left:-20px; transform:rotate(-20deg); }.map-art__park--two { width:250px; height:200px; bottom:-72px; right:-25px; transform:rotate(25deg); }.map-art__label { position:absolute; z-index:2; padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.78); color:#5e746a; box-shadow:0 5px 14px rgba(47,82,67,.09); font-size:11px; font-weight:700; }.map-art__label--one { left:73px; top:122px; transform:rotate(-7deg); }.map-art__label--two { right:72px; bottom:111px; transform:rotate(7deg); }.map-pin { position:absolute; z-index:3; display:grid; width:54px; height:54px; place-items:center; border:4px solid rgba(255,255,255,.94); border-radius:50% 50% 50% 0; background:var(--danger); color:#fff; box-shadow:0 12px 22px rgba(126,55,40,.26); transform:rotate(-45deg); }.map-pin span { transform:rotate(45deg); font-size:22px; }.map-pin--one { top:182px; left:170px; }.map-pin--two { top:112px; right:112px; background:#d5a436; }.map-pin--three { right:154px; bottom:90px; background:var(--moss); }.map-art__caption { position:absolute; z-index:5; right:21px; bottom:20px; max-width:232px; padding:15px 17px; border:1px solid rgba(255,255,255,.8); border-radius:16px; background:rgba(255,255,255,.89); box-shadow:var(--shadow-small); font-size:12px; line-height:1.6; }.map-art__caption strong { display:block; margin-bottom:3px; color:var(--moss-dark); font-size:13px; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:-35px; position:relative; }.principle { padding:23px 24px; border:1px solid var(--line); border-radius:var(--radius-md); background:rgba(255,255,255,.86); box-shadow:0 8px 20px rgba(45,75,62,.05); }.principle__icon { display:grid; width:38px; height:38px; place-items:center; margin-bottom:12px; border-radius:12px; color:var(--moss-dark); background:var(--moss-pale); font-size:18px; }.principle h3 { margin:0; font-size:15px; }.principle p { margin:6px 0 0; color:var(--ink-soft); font-size:13px; line-height:1.65; }
.split { display:grid; grid-template-columns:.82fr 1.18fr; gap:86px; align-items:start; }.feature-list { display:grid; gap:14px; }.feature { display:grid; grid-template-columns:52px 1fr; gap:16px; padding:22px; border:1px solid var(--line); border-radius:var(--radius-md); background:#fff; }.feature__number { display:grid; width:36px; height:36px; place-items:center; border-radius:50%; background:var(--moss-pale); color:var(--moss-dark); font-family:Manrope,sans-serif; font-size:13px; font-weight:800; }.feature h3 { margin:0; font-size:16px; }.feature p { margin:6px 0 0; color:var(--ink-soft); font-size:14px; line-height:1.75; }
.guide-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:35px; }.guide-card { display:flex; min-height:260px; flex-direction:column; padding:21px; border:1px solid var(--line); border-radius:22px; background:#fff; transition:transform .2s var(--ease),box-shadow .2s var(--ease); }.guide-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-small); }.guide-card__visual { position:relative; height:96px; margin:-21px -21px 19px; overflow:hidden; border-radius:21px 21px 0 0; }.guide-card__visual::before { position:absolute; content:""; }.guide-card__visual--higanbana { background:linear-gradient(130deg,#fadcc6,#f1a8a1); }.guide-card__visual--higanbana::before { width:100px; height:100px; left:77px; bottom:-60px; border:5px dotted #bc413d; border-radius:50%; }.guide-card__visual--suisen { background:linear-gradient(130deg,#f3edbc,#cde2bd); }.guide-card__visual--suisen::before { width:50px; height:50px; left:93px; top:19px; border:15px solid #fff9da; border-radius:50%; box-shadow:0 0 0 7px #e8b845 inset; }.guide-card__visual--kyouchikutou { background:linear-gradient(130deg,#d6e4c9,#86b58a); }.guide-card__visual--kyouchikutou::before { width:75px; height:75px; left:88px; top:13px; border-radius:50% 50% 45% 55%; background:radial-gradient(circle,#f2d2d5 0 19%,#e88498 21% 35%,transparent 37%); }.guide-card__visual--inusafuran { background:linear-gradient(130deg,#e4d7ef,#b4a6d2); }.guide-card__visual--inusafuran::before { width:46px; height:88px; left:98px; top:4px; border-radius:56% 44% 50% 50%; background:linear-gradient(90deg,#eee7f2 0 42%,#a78cc2 44% 52%,#eee7f2 54%); }.guide-card__eyebrow { color:var(--danger); font-family:Manrope,sans-serif; font-size:10px; font-weight:800; letter-spacing:.11em; }.guide-card h3 { margin:6px 0 0; font-size:19px; }.guide-card p { margin:8px 0 15px; color:var(--ink-soft); font-size:12px; line-height:1.72; }.text-link { display:inline-flex; gap:7px; align-items:center; margin-top:auto; color:var(--moss-dark); font-size:13px; font-weight:800; }.text-link span { font-family:Manrope,sans-serif; font-size:17px; transition:transform .16s var(--ease); }.text-link:hover span { transform:translateX(4px); }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:38px; counter-reset:steps; }.step { position:relative; padding:24px 22px 22px; border-radius:22px; background:#fff; box-shadow:0 8px 20px rgba(48,77,68,.06); }.step::before { display:grid; width:35px; height:35px; place-items:center; margin-bottom:22px; border-radius:50%; background:var(--ink); color:#fff; content:counter(steps); counter-increment:steps; font-family:Manrope,sans-serif; font-size:12px; font-weight:800; }.step h3 { margin:0; font-size:16px; }.step p { margin:8px 0 0; color:var(--ink-soft); font-size:13px; line-height:1.75; }.callout { display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; padding:42px 48px; border-radius:28px; color:#fff; background:var(--moss-dark); box-shadow:var(--shadow); }.callout h2 { margin:0; font-size:clamp(26px,3vw,38px); line-height:1.35; letter-spacing:-.04em; }.callout p { max-width:660px; margin:12px 0 0; color:#d5e9dc; font-size:14px; }.callout .button { white-space:nowrap; }
.page-hero { padding:86px 0 60px; background:linear-gradient(125deg,#eef4e9,#fbfaf4); }.page-hero__inner { max-width:765px; }.page-hero p { margin:18px 0 0; color:var(--ink-soft); font-size:16px; }.breadcrumb { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 22px; color:#61766c; font-size:12px; }.breadcrumb span { opacity:.7; }.article-shell { width:min(820px,calc(100% - 40px)); margin:0 auto; padding:72px 0 104px; }.article-intro { padding-bottom:35px; border-bottom:1px solid var(--line); }.article-intro p { max-width:700px; margin:18px 0 0; color:var(--ink-soft); }.article-meta { display:flex; flex-wrap:wrap; gap:9px; margin-top:23px; }.tag { display:inline-flex; padding:5px 10px; border-radius:999px; color:var(--moss-dark); background:var(--moss-pale); font-size:11px; font-weight:700; }.tag--notice { color:#974130; background:#fae6dc; }.article-body { padding-top:36px; }.article-body h2 { margin:46px 0 16px; font-size:25px; line-height:1.45; letter-spacing:-.03em; }.article-body h2:first-child { margin-top:0; }.article-body p { margin:0 0 17px; color:#3d5750; }.article-body ul { margin:0 0 22px; padding-left:1.25em; color:#3d5750; }.article-body li + li { margin-top:7px; }.article-note { margin:27px 0; padding:20px 21px; border-left:4px solid var(--sun); border-radius:0 14px 14px 0; background:#fff9e9; color:#65542f; font-size:14px; }.source-box { margin-top:48px; padding:27px; border-radius:18px; background:#eef4e9; }.source-box h2 { margin:0 0 10px; font-size:18px; }.source-box p { margin:0; color:var(--ink-soft); font-size:13px; }.source-list { margin:15px 0 0; padding-left:1.2em; color:var(--moss-dark); font-size:13px; }.source-list a { text-decoration:underline; text-underline-offset:3px; }
.faq-list { display:grid; gap:12px; margin-top:34px; } details { border:1px solid var(--line); border-radius:16px; background:#fff; } summary { position:relative; padding:20px 52px 20px 21px; cursor:pointer; font-weight:700; list-style:none; } summary::-webkit-details-marker { display:none; } summary::after { position:absolute; right:20px; top:19px; display:grid; width:24px; height:24px; place-items:center; border-radius:50%; color:var(--moss-dark); background:var(--moss-pale); content:"+"; font-family:Manrope,sans-serif; font-size:18px; } details[open] summary::after { content:"−"; } details p { margin:0; padding:0 21px 21px; color:var(--ink-soft); font-size:14px; }
.footer { padding:61px 0 26px; color:#dae7dc; background:#153b32; }.footer__top { display:grid; grid-template-columns:1.25fr .75fr .75fr; gap:45px; padding-bottom:42px; border-bottom:1px solid rgba(255,255,255,.14); }.footer .brand { color:#fff; }.footer .brand__mark { background:#dcecdf; color:var(--moss-dark); box-shadow:none; }.footer .brand__sub { color:#b5d0bf; }.footer__description { max-width:350px; margin:15px 0 0; color:#b8d2c0; font-size:13px; line-height:1.8; }.footer h2 { margin:2px 0 14px; color:#fff; font-size:13px; }.footer ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; font-size:13px; }.footer a { color:#c7dbcc; }.footer a:hover { color:#fff; text-decoration:underline; text-underline-offset:3px; }.footer__bottom { display:flex; justify-content:space-between; gap:16px; padding-top:22px; color:#a6c3ae; font-family:Manrope,sans-serif; font-size:11px; }
@media (prefers-reduced-motion:no-preference) { .hero__copy,.map-art,.principle,.guide-card,.step { animation:rise .6s var(--ease) both; }.map-art { animation-delay:.12s; }.principle:nth-child(2),.guide-card:nth-child(2),.step:nth-child(2) { animation-delay:.08s; }.principle:nth-child(3),.guide-card:nth-child(3),.step:nth-child(3) { animation-delay:.16s; }.guide-card:nth-child(4) { animation-delay:.24s; } } @keyframes rise { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:900px) { .hero__grid { grid-template-columns:1fr; gap:42px; }.map-art { max-width:570px; width:94%; min-height:405px; margin-left:auto; transform:rotate(1deg); }.guide-grid { grid-template-columns:repeat(2,1fr); }.split { grid-template-columns:1fr; gap:44px; }.footer__top { grid-template-columns:1.2fr 1fr; }.footer__top > :first-child { grid-column:1 / -1; } } @media (max-width:680px) { .container { width:min(100% - 32px,1160px); }.section { padding:72px 0; }.nav { min-height:68px; }.nav__toggle { display:inline-grid; width:42px; height:42px; place-items:center; }.nav__links { position:absolute; top:67px; right:16px; left:16px; display:none; padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow-small); }.nav__links.is-open { display:grid; gap:14px; }.nav__links .button { width:100%; margin-top:3px; }.hero { padding:53px 0 75px; }.hero h1 { font-size:41px; letter-spacing:-.06em; }.hero__lede { font-size:15px; }.map-art { width:100%; min-height:340px; }.map-pin--one { left:100px; top:151px; }.map-pin--two { right:64px; top:80px; }.map-pin--three { right:112px; bottom:78px; }.principles { grid-template-columns:1fr; margin-top:-28px; }.section-heading--between { display:block; }.section-heading--between .button { margin-top:20px; }.guide-grid,.steps { grid-template-columns:1fr; }.callout { grid-template-columns:1fr; padding:31px 27px; }.callout .button { justify-self:start; }.page-hero { padding:58px 0 46px; }.article-shell { width:min(100% - 32px,820px); padding:50px 0 74px; }.footer__top { grid-template-columns:1fr; gap:29px; }.footer__top > :first-child { grid-column:auto; }.footer__bottom { flex-direction:column; } }
.footer { padding:61px 0 26px; color:#dae7dc; background:#153b32; }.footer__top { display:grid; grid-template-columns:1.25fr .75fr .75fr; gap:45px; padding-bottom:42px; border-bottom:1px solid rgba(255,255,255,.14); }.footer .brand { color:#fff; }.footer .brand__mark { background:#dcecdf; color:var(--moss-dark); box-shadow:none; }.footer .brand__sub { color:#b5d0bf; }.footer__description { max-width:350px; margin:15px 0 0; color:#b8d2c0; font-size:13px; line-height:1.8; }.footer h2 { margin:2px 0 14px; color:#fff; font-size:13px; }.footer ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; font-size:13px; }.footer a { color:#c7dbcc; }.footer a:hover { color:#fff; text-decoration:underline; text-underline-offset:3px; }.footer__bottom { display:flex; justify-content:space-between; gap:16px; padding-top:22px; color:#a6c3ae; font-family:Manrope,sans-serif; font-size:11px; }
.article-hero-visual { margin:34px 0 0; overflow:hidden; border:1px solid rgba(43,115,95,.14); border-radius:24px; background:#e7efe5; box-shadow:var(--shadow-small); }.article-hero-visual img { display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; }.article-hero-visual figcaption { padding:10px 16px; color:#5c7169; background:#fff; font-size:11px; line-height:1.6; }.article-summary { margin-top:34px; padding:26px 29px; border:1px solid #d4e4d7; border-radius:18px; background:linear-gradient(122deg,#eff7ef,#fbfaf4); }.article-summary .eyebrow { margin-bottom:8px; }.article-summary p:last-child { max-width:650px; margin:0; color:#36584d; font-size:16px; line-height:1.85; }.article-action-section { margin:48px -48px 0; padding:48px; border-radius:28px; background:#eff3e9; }.article-action-section h2 { margin-top:0; }.article-action-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; }.article-action-card { position:relative; min-height:224px; padding:24px; border:1px solid rgba(43,115,95,.11); border-radius:20px; background:#fff; box-shadow:0 8px 20px rgba(48,77,68,.05); }.article-action-card__number { display:grid; width:34px; height:34px; place-items:center; margin-bottom:31px; border-radius:50%; color:#fff; background:var(--moss-dark); font-family:Manrope,sans-serif; font-size:12px; font-weight:800; }.article-action-card:nth-child(2) .article-action-card__number { background:#cf9e34; }.article-action-card:nth-child(3) .article-action-card__number { background:#bd6550; }.article-action-card h3 { margin:0; font-size:17px; }.article-action-card p { margin:9px 0 0; color:var(--ink-soft); font-size:13px; line-height:1.78; }.article-moment-grid { display:grid; gap:12px; margin:26px 0 32px; }.article-moment { display:grid; grid-template-columns:155px 1fr; gap:30px; padding:24px; border-bottom:1px solid var(--line); }.article-moment:first-child { border-top:1px solid var(--line); }.article-moment__label { margin:0!important; color:var(--moss-dark)!important; font-family:Manrope,sans-serif; font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }.article-moment h3 { margin:0; font-size:17px; }.article-moment ul { grid-column:2; margin:0; color:var(--ink-soft); font-size:14px; }.article-quote { margin:45px 0; padding:4px 0 4px 26px; border-left:4px solid var(--sun); }.article-quote p { margin:0; color:var(--ink)!important; font-size:21px; font-weight:600; line-height:1.8; letter-spacing:-.02em; } @media (max-width:900px) { .article-action-section { margin-right:0; margin-left:0; }.article-action-grid { grid-template-columns:1fr; }.article-action-card { min-height:auto; }.article-moment { grid-template-columns:130px 1fr; gap:20px; } } @media (max-width:680px) { .article-hero-visual { margin-top:25px; border-radius:18px; }.article-summary { padding:22px; }.article-summary p:last-child { font-size:15px; }.article-action-section { margin-top:38px; padding:29px 20px; border-radius:20px; }.article-action-grid { gap:12px; }.article-action-card { padding:22px; }.article-action-card__number { margin-bottom:20px; }.article-moment { display:block; padding:20px 0; }.article-moment h3 { margin-top:7px; }.article-moment ul { margin-top:12px; padding-left:1.2em; font-size:13px; }.article-quote { padding-left:19px; }.article-quote p { font-size:18px; } }