@charset "UTF-8";

/* ============================================================
   mildsongwork.com — design tokens
   旧サイトの配色（#0097B2 ターコイズ / #5D0D11 えんじ / #F9F8CD 生成り）を
   彩度を落として継承。背景はより明るく、余白を広めに。
   ============================================================ */
:root{
    --bg:#faf9f4;
    --surface:#ffffff;
    --surface-2:#f1ede1;
    --surface-3:#e9e3d2;
    --ink:#262420;
    --ink-soft:#4a463d;
    --muted:#7d7969;
    --line:#e3ddcd;

    --accent:#147082;
    --accent-ink:#ffffff;
    --accent-soft:#e2eff0;
    --accent2:#7a2434;
    --accent2-soft:#f3e4e6;
    --line-color:#06c755; /* LINE brand */

    --font-head:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Noto Sans JP",sans-serif;
    --font-body:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
    --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Consolas,monospace;

    --header-h:60px;
    --radius:16px;
    --radius-sm:10px;
    --container:1080px;
}
@media (min-width:769px){
    :root{ --header-h:76px; }
}

*, *::before, *::after{ box-sizing:border-box; }

html{ font-size:100%; scroll-behavior:smooth; overflow-x:hidden; }
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.85;
    padding-top:var(--header-h);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--accent); outline-offset:2px;
}

h1,h2,h3,h4{
    font-family:var(--font-head);
    color:var(--ink);
    line-height:1.4;
    margin:0 0 .5em;
}

.container{ max-width:var(--container); margin:0 auto; padding:0 20px; position:relative; z-index:1; }
@media (min-width:769px){ .container{ padding:0 40px; } }

.eyebrow{
    font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--accent); display:block; margin-bottom:10px;
}

/* ============================================================
   header / nav
   ============================================================ */
.site-header{
    position:fixed; top:0; left:0; width:100%; height:var(--header-h);
    background:var(--bg);
    border-bottom:1px solid var(--line);
    z-index:100;
}
.site-header .container{ height:100%; display:flex; align-items:center; justify-content:space-between; }

.site-logo{ display:flex; align-items:center; }
.site-logo img{ height:34px; width:auto; display:block; }
.site-logo:hover{ text-decoration:none; }
@media (min-width:769px){ .site-logo img{ height:42px; } }

.nav-desktop{ display:none; }
@media (min-width:769px){
    .nav-desktop{ display:flex; align-items:center; gap:30px; }
    .nav-desktop a{ font-size:14.5px; color:var(--ink-soft); }
    .nav-desktop a:hover{ color:var(--accent); text-decoration:none; }
    .nav-desktop .current{ color:var(--accent); font-weight:700; }
    .nav-desktop a.nav-cta{ color:var(--accent-ink); }
    .nav-desktop a.nav-cta:hover{ color:var(--accent-ink); }
}
.nav-cta{
    font-family:var(--font-body); font-weight:700; font-size:13.5px;
    background:var(--accent); color:var(--accent-ink);
    padding:8px 16px; border-radius:999px; white-space:nowrap;
}
.nav-cta:hover{ background:#0f5a68; text-decoration:none; color:var(--accent-ink); }

.hamburger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:34px; height:34px; border:none; background:none; cursor:pointer; padding:0;
}
@media (min-width:769px){ .hamburger{ display:none; } }
.hamburger span{ display:block; width:24px; height:2px; background:var(--ink); border-radius:2px; }

.mobile-nav{
    position:fixed; inset:0; top:var(--header-h);
    background:var(--surface); z-index:99;
    display:flex; flex-direction:column;
    padding:12px 0;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.mobile-nav.open{ opacity:1; visibility:visible; transform:translateY(0); }
.mobile-nav a{
    padding:16px 24px; font-size:16px; color:var(--ink); border-bottom:1px solid var(--line);
    text-align:center;
}
.mobile-nav a:hover{ text-decoration:none; }
.mobile-nav a.btn{
    align-self:center; margin:16px 0 0; border-bottom:none; color:var(--accent-ink);
}
.mobile-nav a.btn:hover{ color:var(--accent-ink); }
.mobile-nav-close{
    align-self:center; margin-top:auto; margin-bottom:28px; flex:none;
    width:48px; height:48px; border-radius:50%;
    border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
    display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.mobile-nav-close:hover{ color:var(--ink); border-color:var(--muted); }
.mobile-nav-close svg{ width:18px; height:18px; }
@media (min-width:769px){ .mobile-nav{ display:none; } }

/* ============================================================
   buttons
   ============================================================ */
.btn{
    font-family:var(--font-body); font-weight:700; font-size:14.5px; border-radius:999px; border:none;
    padding:13px 24px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.btn:hover{ text-decoration:none; }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ background:#0f5a68; color:var(--accent-ink); }
.btn-ghost{ background:transparent; color:var(--ink-soft); border:1px solid var(--line); }
.btn-ghost:hover{ background:var(--surface-2); color:var(--ink); }
.btn-line{ background:var(--line-color); color:#fff; }
.btn-line:hover{ background:#05a648; color:#fff; }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; }

/* ============================================================
   hero
   ============================================================ */
.hero{ padding-top:56px; padding-bottom:40px; }
@media (min-width:769px){ .hero{ padding-top:88px; padding-bottom:56px; } }
.hero h1{ font-size:clamp(26px,5vw,42px); font-weight:900; }
.hero p{ font-size:16.5px; color:var(--ink-soft); max-width:44ch; margin:0; }

/* ============================================================
   decorative circles (reveal on scroll, image circles slowly spin)
   ============================================================ */
.has-decor{ position:relative; z-index:0; }
.decor{
    position:absolute; inset:0; overflow:visible; pointer-events:none; z-index:-1;
}
/* このセクションだけ、装飾円をカードの背景より手前に重ねたい場合に使う */
.decor.decor-front{ z-index:1; }
.decor-circle{
    position:absolute;
    top:var(--top, auto); left:var(--left, auto); right:var(--right, auto); bottom:var(--bottom, auto);
    width:var(--size); height:var(--size);
    border-radius:50%;
    opacity:0; transform:scale(.7);
    transition:opacity .9s ease, transform .9s ease;
}
.decor-circle.visible{ opacity:1; transform:scale(1); }
.decor-circle.plain{ background:var(--tone-color, var(--surface-3)); }
.decor-circle.img{ overflow:hidden; }
.decor-circle.img img{
    width:100%; height:100%; object-fit:contain; display:block;
    animation:decor-spin var(--spin, 28s) linear infinite;
}
@keyframes decor-spin{ to{ transform:rotate(360deg); } }
@media (max-width:640px){
    .decor-circle{ width:calc(var(--size) * .6); height:calc(var(--size) * .6); }
}
/* ヒーロー下のそばアイコン：セクション間の余白ぴったりに収まるよう専用サイズ・位置を指定
   （ブレークポイントで前後セクションの余白が変わるため、独自クラスで固定値を管理） */
.decor-circle.decor-noodle{
    width:64px; height:64px; top:auto; right:auto; bottom:-32px; left:-14px;
}
@media (min-width:769px){
    .decor-circle.decor-noodle{ width:96px; height:96px; bottom:-52px; left:-16px; }
}
/* 「すべて見る→」の下に来る歯車アイコン：セクションの上余白がブレークポイントで
   変わるため、リンクの下に確実に収まるよう専用の位置を指定 */
.decor-circle.decor-gear{
    width:56px; height:56px; bottom:auto; left:auto; top:74px; right:-4px;
}
@media (min-width:769px){
    .decor-circle.decor-gear{ width:80px; height:80px; top:120px; right:-4px; }
}
@media (prefers-reduced-motion: reduce){
    .decor-circle.img img{ animation:none; }
    .decor-circle{ transition:none; }
}

/* ============================================================
   section scaffolding
   ============================================================ */
.section{ padding-top:40px; padding-bottom:40px; }
@media (min-width:769px){ .section{ padding-top:64px; padding-bottom:64px; } }
.section-head{
    display:flex; align-items:baseline; justify-content:space-between; gap:16px;
    margin-bottom:24px; flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(20px,3vw,26px); font-weight:700; }
.section-head .count{ font-family:var(--font-mono); font-size:13px; color:var(--muted); }
.more-link{ font-size:14px; font-weight:700; white-space:nowrap; }

/* ============================================================
   app cards
   ============================================================ */
.app-grid{
    display:grid; grid-template-columns:1fr; gap:20px;
}
@media (min-width:640px){ .app-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .app-grid{ grid-template-columns:repeat(3,1fr); } }

.app-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .15s ease, transform .15s ease;
}
.app-card:hover{ box-shadow:0 6px 20px rgba(38,36,32,.08); transform:translateY(-2px); }
.app-card .thumb{
    aspect-ratio:4/3; background:var(--surface-2); overflow:hidden;
}
.app-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.app-card .body{ padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.app-card .idx{ font-family:var(--font-mono); font-size:11.5px; color:var(--accent); }
.app-card h3{ font-size:17px; font-weight:700; margin:0; }
.app-card .desc{ font-size:14px; color:var(--ink-soft); line-height:1.7; margin:0; }
.app-card .why{
    font-size:12.5px; color:var(--muted); background:var(--surface-2); border-radius:8px; padding:9px 11px;
    border-left:2px solid var(--accent2); margin:2px 0 0;
}
.app-card .meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:8px; }
.tag{
    font-family:var(--font-mono); font-size:10.5px; padding:3px 9px; border-radius:999px;
    background:var(--surface-2); color:var(--muted); border:1px solid var(--line);
}
.app-card .actions{ display:flex; gap:8px; padding:0 18px 18px; }
.app-card .actions .btn{ padding:9px 16px; font-size:13.5px; }

.app-card.empty{
    align-items:center; justify-content:center; text-align:center; gap:10px; padding:40px 20px;
    border-style:dashed; background:transparent; aspect-ratio:auto;
}
.app-card.empty .thumb{ display:none; }
.app-card.empty h3{ font-size:15.5px; color:var(--muted); font-weight:700; }
.app-card.empty p{ font-size:13.5px; color:var(--muted); max-width:32ch; margin:0; }

/* ============================================================
   "この人は誰？" teaser
   ============================================================ */
.who-teaser{
    display:flex; flex-direction:column; gap:16px; background:var(--surface-2);
    border-radius:var(--radius); padding:24px;
}
.who-teaser .teaser-label,
.archive-teaser .teaser-label{ flex-basis:100%; margin-bottom:2px; }
.who-teaser .who-header{ display:flex; align-items:center; gap:16px; }
.who-teaser .who-header img{ width:88px; height:88px; border-radius:50%; object-fit:cover; object-position:50% 15%; flex:none; }
.who-teaser .text{ flex:1; min-width:220px; }
.who-teaser p{ margin:0 0 10px; color:var(--ink-soft); font-size:14.5px; }
.who-teaser .who-name{
    font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:18px; margin:0;
}

/* ============================================================
   archive teaser
   ============================================================ */
.archive-teaser{
    display:flex; gap:20px; align-items:center; flex-wrap:wrap;
    padding:24px; border:1px solid var(--line); border-radius:var(--radius);
}
.archive-teaser .thumbs{ display:flex; gap:8px; flex:none; }
.archive-teaser .thumbs img{
    width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--line);
}
.archive-teaser .text{ flex:1; min-width:220px; }
.archive-teaser p{ margin:0 0 10px; color:var(--ink-soft); font-size:14.5px; }

/* ============================================================
   footer CTA
   ============================================================ */
.footer-cta{
    background:var(--surface-2); padding:56px 0; text-align:center; margin-top:24px;
}
/* footer-cta は .container が入れ子のため、装飾円もコンテナ幅に揃える
   （揃えないと、画面が広いときに円だけ画面端に張り付いてしまう） */
.footer-cta .decor{ max-width:var(--container); margin:0 auto; }
.footer-cta h2{ font-size:clamp(20px,3vw,26px); margin-bottom:10px; }
.footer-cta p{ font-size:14.5px; color:var(--ink-soft); max-width:42ch; margin:0 auto 22px; }
.footer-cta .btn-row{ justify-content:center; }

.site-footer{ padding:48px 20px; text-align:center; }
.site-footer .links{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    margin-bottom:16px; font-size:13.5px;
}
.site-footer .links-row{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
@media (min-width:640px){
    .site-footer .links{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:18px; }
    .site-footer .links-row{ display:contents; }
}
.site-footer .copyright{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); }

/* ============================================================
   generic content blocks (about / archive intro / guide legacy)
   ============================================================ */
.prose{ max-width:64ch; }
.prose p{ color:var(--ink-soft); margin:0 0 16px; }
.prose p:last-child{ margin-bottom:0; }

.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
    font-size:13px; padding:6px 13px; border-radius:999px; background:var(--surface-2);
    border:1px solid var(--line); color:var(--ink-soft);
}

.profile-block{ display:flex; gap:28px; flex-wrap:wrap; align-items:flex-start; }
.profile-block img{ width:180px; height:180px; border-radius:50%; object-fit:cover; object-position:50% 15%; flex:none; }
.profile-block .text{ flex:1; min-width:260px; }
@media (max-width:640px){
    .profile-block{ flex-direction:column; }
    .profile-block img{ align-self:center; }
}

.divider{ height:1px; background:var(--line); margin:40px 0; border:none; }

/* ============================================================
   contact form (kept close to original structure; mail.php unchanged)
   ============================================================ */
.contact-form{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:28px 24px; max-width:560px;
}
.contact-form .notice{ font-size:13.5px; color:var(--muted); margin:0 0 22px; line-height:1.8; }
.form-item{ margin-bottom:20px; }
.form-item label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:6px; color:var(--ink-soft); }
.form-item input[type="text"],
.form-item input[type="email"],
.form-item textarea{
    width:100%; font-size:16px; font-family:var(--font-body);
    border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 13px;
    background:var(--surface); color:var(--ink);
}
.form-item textarea{ min-height:140px; resize:vertical; }
.form-submit{ display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:8px; }

/* ============================================================
   archive / works — legacy gallery kept, restyled
   ============================================================ */
.oya2{ max-width:var(--container); margin:0 auto; }
.content3{ padding:8px 0 30px; display:flex; flex-wrap:wrap; gap:14px; }
.content3 h3{ width:100%; }
.oya2 h3{
    font-size:16px; margin:30px 0 6px; padding-bottom:8px; border-bottom:2px dotted var(--accent2);
}
.oya2 h3:first-child{ margin-top:0; }
.logo, .logo7{ width:150px; height:auto; border-radius:8px; border:1px solid var(--line); }

.modal-wrapper{
    z-index:999; position:fixed; inset:0; padding:40px 14px; text-align:center;
}
/* モーダル表示中はヘッダーを隠し、モーダルだけを全画面表示する */
body:has(.modal-wrapper:target) .site-header{ display:none; }
.modal-wrapper:not(:target){ opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.modal-wrapper:target{ opacity:1; visibility:visible; transition:opacity .3s, visibility .3s; }
.modal-wrapper::after{ display:inline-block; height:100%; margin-left:-.05em; vertical-align:middle; content:""; }
.modal-wrapper .modal-window{
    box-sizing:border-box; display:inline-block; z-index:20; position:relative;
    width:100%; max-width:600px; padding:26px 22px 16px; border-radius:var(--radius-sm);
    background:var(--surface); box-shadow:0 10px 40px rgba(0,0,0,.25); vertical-align:middle; text-align:left;
}
.modal-wrapper .modal-window .modal-content{ max-height:78vh; overflow-y:auto; }
.modal-overlay{ z-index:10; position:absolute; inset:0; background:rgba(20,18,15,.7); }
.modal-wrapper .modal-close{
    z-index:20; position:absolute; top:6px; right:14px; width:30px; color:var(--muted) !important;
    font-size:22px; font-weight:700; line-height:30px; text-align:center; text-decoration:none;
}
.modal-wrapper .modal-close:hover{ color:var(--accent2) !important; }
.modal-text{ text-align:left; font-size:13.5px; color:var(--ink-soft); margin:10px 0; }
.modal-text p{ margin:6px 0; }

/* ============================================================
   guide.html legacy layout — restyled only
   ============================================================ */
.oya{ display:flex; flex-wrap:wrap; gap:20px; }
.oya .content{
    flex:1 1 260px; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius); padding:22px; text-align:left;
}
.oya .content h3{ display:flex; align-items:center; gap:8px; font-size:16px; }
.num{ width:26px; height:26px; }
.guide{ margin:16px auto 0; border-radius:var(--radius-sm); }
.click{ text-align:center; margin:8px 0; }

/* ============================================================
   arigatou.html
   ============================================================ */
.alady{ width:220px; height:auto; margin:0 auto 8px; }

/* ============================================================
   utility
   ============================================================ */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }