:root{--ink:#0a0a0a;--sub:#5f5f5f;--blue:#004bff;--gray:#f1f1f1;--line:#d9d9d9;--bg:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.9;font-family:-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif}
a{color:var(--blue)}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.5rem}

header.nav{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:4rem;gap:1rem}
.logo{background:var(--ink);color:#fff;text-decoration:none;font-weight:700;letter-spacing:.12em;font-size:.95rem;padding:.55rem 1.1rem;white-space:nowrap}
header.nav nav{display:flex;align-items:center;gap:1.6rem}
header.nav nav a{color:var(--ink);text-decoration:none;font-size:.9rem;letter-spacing:.06em}
header.nav nav a:hover{color:var(--blue)}
header.nav nav a.cta{background:var(--blue);color:#fff;padding:.6rem 1.2rem;font-weight:600}
header.nav nav a.cta:hover{background:#0039c4;color:#fff}

.hero{position:relative;min-height:30rem;display:flex;align-items:flex-end;color:#fff;padding:4rem 0;
  background:#1b1b1b url(images/hero.jpg) center/cover}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.25))}
.hero .wrap{position:relative;width:100%}
.hero h1{font-size:clamp(1.8rem,5vw,2.8rem);font-weight:500;line-height:1.5;margin:0 0 1rem}
.hero p{max-width:36rem;margin:0 0 2rem;opacity:.92}
.btn{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;font-weight:600;padding:.8rem 2rem;letter-spacing:.06em}
.btn:hover{background:#0039c4;color:#fff}

.ticker{overflow:hidden;white-space:nowrap;background:#f0f3fa;border-bottom:1px solid var(--line);padding:.8rem 0;font-size:.95rem}
.ticker span{display:inline-block;padding-right:3rem;animation:tick 45s linear infinite}
@keyframes tick{to{transform:translateX(-100%)}}

section{padding:5rem 0}
h2{font-size:clamp(1.5rem,4vw,2rem);font-weight:500;letter-spacing:.04em;margin:0 0 2rem;line-height:1.4}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.card{background:var(--gray);padding:2rem 1.6rem}
.card .no{color:#999;font-size:.9rem;letter-spacing:.1em}
.card h3{font-size:1.25rem;font-weight:500;margin:.2rem 0 .6rem}
.card p{margin:0 0 1rem;font-size:.95rem;color:var(--sub);line-height:1.8}
.card a{color:var(--ink);font-size:.9rem}

.reason{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.reason p{margin:0}
.photo{aspect-ratio:4/3;background:#ddd center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:#888;font-size:.85rem}
#news{background:var(--gray)}
.news-head{display:flex;justify-content:space-between;align-items:baseline}
.news-head a{font-size:.9rem}
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;list-style:none;margin:0;padding:0}
.news a{display:block;background:var(--bg);padding:1.6rem;text-decoration:none;color:var(--ink);height:100%}
.news a:hover{outline:2px solid var(--blue)}
.news .cat{color:var(--blue);font-size:.8rem;font-weight:600;letter-spacing:.06em}
.news h3{font-size:1.05rem;font-weight:500;margin:.3rem 0 0;line-height:1.6}

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.profile{display:flex;gap:1.4rem;align-items:center}
.profile img{width:8rem;height:8rem;object-fit:cover;flex-shrink:0;background:#e6ecf5}
.profile .name{font-size:1.2rem;font-weight:700;margin:0}
.profile .role{font-size:.85rem;color:var(--sub);margin:0 0 .5rem}
.profile .bio{margin:0;font-size:.95rem}
dl{display:grid;grid-template-columns:6rem 1fr;gap:0 1rem;margin:0;border-top:1px solid var(--line)}
dt,dd{margin:0;padding:.8rem 0;border-bottom:1px solid var(--line)}
dt{color:var(--sub);font-size:.9rem}
#contact{background:var(--ink);color:#fff}
#contact p{margin:0 0 1.6rem;color:#ccc}
.mail{display:block;margin-bottom:1.6rem;color:#fff;font-size:clamp(1.1rem,4vw,1.6rem)}
footer{font-size:.8rem;color:var(--sub);text-align:center;padding:1.6rem 1rem}

.page-head{background:var(--ink);color:#fff;padding:4rem 0 3rem}
.page-head h1{font-size:clamp(1.5rem,5vw,2.2rem);font-weight:500;line-height:1.5;margin:0 0 .4rem}
.page-head p{margin:0;opacity:.85}
.posts{list-style:none;margin:0;padding:0}
.posts a{display:block;border-top:1px solid var(--line);padding:1.3rem .5rem;text-decoration:none;color:var(--ink)}
.posts li:last-child a{border-bottom:1px solid var(--line)}
.posts a:hover{background:var(--gray)}
.posts .meta{font-size:.8rem;color:var(--sub)}
.posts .cat{color:var(--blue);font-weight:600;margin-right:.6rem}
.posts h2{font-size:1.15rem;margin:.2rem 0;font-weight:500}
.posts p{margin:0;font-size:.9rem;color:var(--sub)}
article h2{font-size:1.4rem;margin:2.4rem 0 .6rem}
article h3{font-size:1.1rem;font-weight:600;margin:1.6rem 0 .4rem}
article blockquote{margin:1.2rem 0;padding:.6rem 1rem;border-left:4px solid var(--blue);background:var(--gray)}
article code{background:var(--gray);padding:0 .35rem}
.back{display:inline-block;margin-top:2rem}

@media(max-width:800px){
  header.nav nav a:not(.cta){display:none}
  .cards,.news,.reason,.about-grid{grid-template-columns:1fr}
  .reason{gap:1.5rem}.hero{min-height:28rem}
  .profile{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){.ticker span{animation:none}*{scroll-behavior:auto!important}}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;list-style:none;margin:0;padding:0;counter-reset:st}
.steps li{border-top:3px solid var(--ink);padding-top:1rem;counter-increment:st}
.steps li::before{content:"0" counter(st);color:var(--blue);font-weight:700;letter-spacing:.1em;font-size:.9rem}
.steps h3{font-size:1.1rem;font-weight:500;margin:.2rem 0 .4rem}
.steps p{margin:0;font-size:.9rem;color:var(--sub);line-height:1.8}
@media(max-width:800px){.steps{grid-template-columns:1fr}}

.hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:3rem;align-items:end}
.hero-photo{width:100%;max-width:20rem;justify-self:end;aspect-ratio:4/5;object-fit:cover;background:#e6ecf5;display:block}
@media(max-width:800px){.hero-grid{grid-template-columns:1fr;gap:2rem}.hero-photo{justify-self:start;max-width:14rem}}

.hero-text{align-self:center}

.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:start}
.contact-info{display:grid;grid-template-columns:4.5rem 1fr;gap:0;margin:0;border-top:1px solid #444}
.contact-info dt,.contact-info dd{margin:0;padding:.8rem 0;border-bottom:1px solid #444;color:#fff}
.contact-info dt{color:#aaa;font-size:.9rem}
.contact-info a{color:#fff}
.form-slot,.form-frame{width:100%;min-height:30rem;background:#1c1c1c;border:1px dashed #666;color:#aaa;display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;font-size:.9rem}
.form-frame{border:none;background:#fff;display:block}
@media(max-width:800px){.contact-grid{grid-template-columns:1fr;gap:2rem}}

/* 帯: 空の色と、切り抜き写真が下の端に立つ配置 */
.hero{padding:4rem 0 0;
  background:
    radial-gradient(ellipse 18rem 5rem at 20% 72%,rgba(255,255,255,.35),transparent 70%),
    radial-gradient(ellipse 22rem 6rem at 78% 38%,rgba(255,255,255,.25),transparent 70%),
    radial-gradient(ellipse 14rem 4rem at 55% 88%,rgba(255,255,255,.3),transparent 70%),
    linear-gradient(180deg,#0f4fc4 0%,#2f7fe0 50%,#8fc4f5 100%)}
.hero::before{display:none}
.hero h1,.hero p{text-shadow:0 1px 10px rgba(0,40,120,.35)}
.hero .btn{background:#fff;color:var(--blue);text-shadow:none}
.hero .btn:hover{background:#eaf2ff;color:var(--blue)}
.hero-text{padding-bottom:4rem}
.hero-photo{background:none;aspect-ratio:auto;object-fit:contain;object-position:bottom;max-width:22rem}
@media(max-width:800px){.hero-photo{justify-self:center;max-width:15rem}.hero-text{padding-bottom:0}}

header.nav nav a.cta{border-radius:.5rem}

/* ロゴマーク+屋号(2行)。屋号の高さはロゴと同じ */
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--ink)}
.logo{display:flex;align-items:center;height:2.8rem;padding:0 1.1rem}
.brand-text{height:2.8rem;display:flex;flex-direction:column;justify-content:space-between;line-height:1.15}
.brand-text b{font-size:1.05rem;font-weight:700;letter-spacing:.14em}
.brand-text small{font-size:.64rem;letter-spacing:.04em;color:var(--sub);white-space:nowrap}

/* 屋号の文字を大きく(高さはロゴと同じ) */
header.nav .wrap{height:4.6rem}
.logo,.brand-text{height:3.2rem}
.brand-text b{font-size:1.3rem}
.brand-text small{font-size:.8rem}
@media(max-width:800px){.brand-text b{font-size:1.05rem}.brand-text small{font-size:.62rem}.logo{padding:0 .8rem}}

/* ロゴ: 黒地・白文字の正方形(2×2) */
.logo{display:block;width:3.2rem;height:3.2rem;padding:0;background:none}
@media(max-width:800px){.logo{width:2.8rem;height:2.8rem;padding:0}.brand-text{height:2.8rem}}

/* 写真なし(撮影までの間): 帯は文字だけ。写真を戻す時はこの塊を消す */
.hero-grid{grid-template-columns:1fr}
.hero{padding:5rem 0 1rem;min-height:26rem}
.hero-text{padding-bottom:3rem}

.hero .hero-en{font-size:clamp(.9rem,2.4vw,1.1rem);letter-spacing:.08em;margin:-.4rem 0 1.4rem;opacity:.9}

.hero h1 rt{font-size:.3em;font-weight:400;letter-spacing:.1em}

.btn{border-radius:.5rem}

.card{border-radius:1rem}

.more{margin:2rem 0 0;text-align:center;font-size:1.05rem}