/* MARGE FLOWER WORKS - design styles
   【配色パターン：ネイビー×白（ゴシック体）】
   ※テーマ認識用のヘッダーは直下の /style.css にあります（このファイルではありません） */

@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");

  :root{
    /* ネイビー×白の配色（変数名はそのまま、値だけ差し替え） */
    --paper:#FFFFFF;      /* 地色：白 */
    --paper-2:#FFFFFF;    /* 帯・フッター：ごく淡い生成り */
    --ink:#2A3743;        /* 文字：深いネイビー */
    --ink-soft:#526B81;   /* サブ文字：ブルーグレー */
    --hair:#E5E1D8;       /* 罫線：グレージュ */
    --moss:#8B8C82;       /* 差し色：ウォームグレー（ラベル・番号） */
    --moss-deep:#2A3743;  /* 濃い差し色：ネイビー（ボタンなど） */
    --moss-light:#C9C5BC; /* セクション番号・入力欄の枠 */
    /* 書体：本文も見出しもゴシック体に */
    --serif:"Zen Kaku Gothic New", sans-serif;   /* 本文（明朝→ゴシック） */
    --latin:"Jost", "Helvetica Neue", Arial, sans-serif; /* 英字見出し */
    --gothic:"Zen Kaku Gothic New", sans-serif;
    --pad: clamp(1.4rem, 6vw, 7rem);
    --logo: url("../images/Logo_01.png");
  }

  *{box-sizing:border-box; margin:0; padding:0;}
    html{scroll-behavior:smooth; scroll-padding-top:96px;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--serif);
    line-height:2;
    font-weight:400;
    letter-spacing:.04em;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  /* かすかな紙の質感 */
  body::before{
    content:"";
    position:fixed; inset:0; z-index:0; pointer-events:none;
    opacity:0; /* 紙の質感はオフ（すっきりした白に） */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  img{display:block; max-width:100%;}

  /* ---------- ラベル / 共通 ---------- */
  .eyebrow{
    font-family:var(--latin);
    font-size:2rem;
    letter-spacing:.42em;
    text-transform:uppercase;
    color:var(--moss);
    font-weight:500;
  }
  .latin-h{
    font-family:var(--latin);
    font-weight:500;
    letter-spacing:.18em;
  }
  .lead{ color:var(--ink-soft); }

  /* ---------- ヘッダー ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:1.1rem var(--pad);
    background:rgba(255,255,255,0);
    transition:background .5s ease, padding .5s ease, box-shadow .5s ease;
    height: 80px;
  }
  header.scrolled{
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(10px);
    padding:.7rem var(--pad);
    box-shadow:0 1px 0 var(--hair);
  }
  .brandmark{
    font-family:var(--latin);
    font-size:1.15rem;
    letter-spacing:.34em;
    font-weight:400;
  }
  .logo-mark{ background:var(--logo) center/contain no-repeat; display:block; }
  .logo-header{ display:block; line-height:0; }
  .logo-header-img{ width:120px; object-fit:contain; display:block; transition:width .45s ease, height .45s ease; }
  header.scrolled .logo-header-img{ width:120px; }
  .logo-hero{ width:clamp(190px,24vw,330px); height:clamp(190px,24vw,330px); margin:0 auto; background-position:center;
    filter:invert(1) drop-shadow(0 3px 18px rgba(0,0,0,.4)); }
  .logo-foot{ width:104px; height:104px; background-position:left center; margin-bottom:.8rem; }
  nav{display:flex; gap:1.9rem; align-items:center;}
  nav a{
    font-family:var(--latin);
    font-size:.82rem;
    letter-spacing:.22em;
    text-decoration:none;
    color:var(--ink);
    text-transform:uppercase;
    position:relative;
    padding-bottom:2px;
  }
  nav a::after{
    content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
    background:var(--moss); transition:width .35s ease;
  }
  nav a:hover::after{width:100%;}
  .nav-mob{display:none; font-family:var(--latin); letter-spacing:.2em; font-size:.85rem;}
  @media(max-width:820px){ nav{display:none;} .nav-mob{display:block;} }
  /* ヘッダーが写真に重なる最上部は白文字 */
  nav a, .nav-mob{ transition:color .5s ease; }
  /* ヘッダーが写真に重なる最上部は白文字（トップページのみ） */
  body.home header:not(.scrolled) nav a{ color:#fff; }
  body.home header:not(.scrolled) nav a::after{ background:#fff; }
  body.home header:not(.scrolled) .nav-mob{ color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.4); }
  body.home header:not(.scrolled) .logo-header-img{ filter:invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.45)); }
  /* トップ以外（白背景ページ）は常に下地ありのヘッダー */
  body:not(.home) header{ background:rgba(255,255,255,.94); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--hair); }
  body:not(.home){ padding-top:0; }

     /* ---------- スマホメニュー ---------- */
  .nav-mob{ background:none; border:0; color:var(--ink); cursor:pointer; padding:.4rem 0; }
  @media(max-width:820px){
    /* 背景のぼかしがあるとメニューの位置がずれるため、スマホでは外して不透明の背景に */
    #hdr, #hdr.scrolled{ backdrop-filter:none; -webkit-backdrop-filter:none; }
    body:not(.home) #hdr, #hdr.scrolled{ background:var(--paper); }

    /* メニュー本体：ふわっと出てくる */
    #hdr nav{
      display:flex; position:fixed; top:80px; left:0; right:0; bottom:0;
      flex-direction:column; align-items:center; gap:2rem;
      padding:3rem var(--pad); background:var(--paper); overflow-y:auto;
      opacity:0; visibility:hidden; transform:translateY(-12px);
      transition:opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1), visibility 0s linear .6s;
    }
    #hdr.nav-open nav{
      opacity:1; visibility:visible; transform:none;
      transition:opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1), visibility 0s;
    }

    /* 項目が上から順に少しずつ現れる */
    #hdr nav > a, #hdr nav .nav-social{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
    #hdr.nav-open nav > a, #hdr.nav-open nav .nav-social{ opacity:1; transform:none; }
    #hdr.nav-open nav > :nth-child(2){ transition-delay:.05s; }
    #hdr.nav-open nav > :nth-child(3){ transition-delay:.1s; }
    #hdr.nav-open nav > :nth-child(4){ transition-delay:.15s; }
    #hdr.nav-open nav > :nth-child(5){ transition-delay:.2s; }
    #hdr.nav-open nav > :nth-child(6){ transition-delay:.25s; }
    #hdr.nav-open nav > :nth-child(7){ transition-delay:.3s; }
    #hdr.nav-open nav > :nth-child(8){ transition-delay:.35s; }

    #hdr.nav-open{ background:var(--paper); box-shadow:0 1px 0 var(--hair); }
    #hdr.nav-open nav a{ font-size:1rem; color:var(--ink); }
    #hdr.nav-open nav a::after{ background:var(--moss); }
    #hdr .nav-social{ display:flex; gap:1.4rem; margin-top:1rem; }
    body.home #hdr.nav-open .nav-mob{ color:var(--ink); text-shadow:none; }
    body.home #hdr.nav-open .logo-header-img{ filter:none; }
  }

  /* ---------- ヒーロー（フルスクリーンMV） ---------- */
  .hero{
    position:relative; min-height:100svh;
    display:flex; align-items:center; justify-content:center;
    text-align:center; overflow:hidden;
  }
  .hero-bg{ position:absolute; inset:0; z-index:0; }
  .hero-bg img{ width:100%; height:100%; object-fit:cover; filter:saturate(.96) contrast(1.02) brightness(.75); }
  .hero-bg::after{ content:""; position:absolute; inset:0;
    background:linear-gradient(to bottom, rgba(42,55,67,.32) 0%, rgba(42,55,67,.10) 34%, rgba(42,55,67,.14) 60%, rgba(42,55,67,.48) 100%); }
  .hero-inner{
    position:relative; z-index:2; color:#fff;
    width:100%;
    padding:6rem var(--pad) 5rem;
  }
  .hero-inner .eyebrow{ color:rgba(255,255,255,.9); margin-bottom:.5rem; text-shadow:0 1px 8px rgba(0,0,0,.4); }
  .hero .jp-tag{
    font-size:clamp(1.6rem,3.4vw,2.35rem);
    font-weight:500; letter-spacing:.14em; line-height:1.7;
    text-shadow:0 2px 16px rgba(0,0,0,.45);
  }
  .hero .jp-tag .thin{ color:#fff; }
  .hero p{ margin:0 auto; font-size:1.02rem; color:rgba(255,255,255,.93); text-shadow:0 1px 12px rgba(0,0,0,.45); }
  .hero-actions{ display:flex; gap:1.2rem; margin-top:2rem; flex-wrap:wrap; justify-content:center; }
  .btn{
    font-family:var(--gothic); font-weight:400;
    font-size:.92rem; letter-spacing:.14em;
    text-decoration:none; color:var(--ink);
    padding:.55rem 2rem; border:1px solid var(--ink);
    border-radius:999px; transition:all .4s ease; white-space:nowrap;
  }
  .btn:hover{ background:var(--ink); color:var(--paper); }
  .btn.ghost{ border-color:var(--hair); color:var(--ink-soft); }
  .btn.ghost:hover{ border-color:var(--moss); color:var(--moss-deep); background:transparent; }
  /* 写真の上のボタン */
  .hero .btn{ color:#fff; border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.05); min-width:15em; backdrop-filter:blur(3px);  font-size:1.2rem; padding:.85rem 2.6rem;  }
  .hero .btn-sub{ display:block; font-size:.68rem; letter-spacing:.06em; line-height:1.5; margin-top:.2rem; opacity:.85; }
  .hero .btn:hover{ background:#fff; color:var(--ink); border-color:#fff; }
  .hero .btn.solid{ background:rgba(255,255,255,.94); color:var(--ink); border-color:#fff; }
  .hero .btn.solid:hover{ background:#fff; }
  @media(max-width:820px){ .hero-inner{ padding:7rem var(--pad) 4.5rem; } }

  /* ---------- セクション枠 ---------- */
  section{ position:relative; z-index:2; }
  .wrap{ padding:clamp(3.5rem,7vw,7rem) var(--pad); }
  .sec-head{ display:flex; align-items:baseline; gap:1.4rem; margin-bottom:3.5rem; }
  .sec-head .num{ font-family:var(--latin); color:var(--moss-light); font-size:1rem; letter-spacing:.2em; }
  .sec-head h2{ font-family:var(--latin); font-weight:500; font-size:clamp(1.7rem,3.4vw,2.6rem); letter-spacing:.22em; text-transform:uppercase; }
  .hair{ height:1px; background:var(--hair); border:0; }

  /* ---------- ABOUT ---------- */
  .about{ background:var(--paper); }
  .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:center; }
  .about-copy p{ margin-bottom:1.7rem; font-size:1.06rem; }
  .about-copy .big{
    font-size:clamp(1.4rem,2.6vw,1.9rem); font-weight:500; letter-spacing:.08em;
    line-height:1.8; margin-bottom:2.4rem;
  }
  .about-imgs{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .about-imgs img{ width:100%; height:100%; object-fit:cover; border-radius:2px; }
  .about-imgs .tall{ grid-row:span 2; aspect-ratio:3/5; }
  .about-imgs .short{ aspect-ratio:4/3; }
  @media(max-width:820px){ .about-grid{ grid-template-columns:1fr; } }

  /* ---------- 余白がくれるもの ---------- */
  .gives{ background:var(--paper-2); }
  .gives-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(2rem,5vw,4.5rem); }
  .give .g-num{ font-family:var(--latin); font-size:1.5rem; color:var(--moss); letter-spacing:.1em; }
  .give h3{ font-weight:600; font-size:1.18rem; letter-spacing:.06em; margin:1.1rem 0 .9rem; line-height:1.7; }
  .give p{ color:var(--ink-soft); font-size:.98rem; }
  .give{ padding-top:1.6rem; border-top:1px solid var(--hair); }
  @media(max-width:820px){ .gives-row{ grid-template-columns:1fr; gap:2.5rem; } }

  /* ---------- こんな方と ---------- */
  .forwhom{ background:var(--paper); }
  .whom-list{ max-width:46rem; }
  .whom-list li{ list-style:none; padding:1.5rem 0; border-bottom:1px solid var(--hair); display:flex; gap:1.5rem; align-items:flex-start; font-size:1.08rem; }
  .whom-list li:first-child{ border-top:1px solid var(--hair); }
  .whom-list .dot{ color:var(--moss); font-family:var(--latin); flex:none; line-height:1.9; }

  /* ---------- LESSON teaser ---------- */
  .lesson{ background:var(--paper-2); color:var(--ink); }
  .lesson .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
  .lesson .eyebrow{ color:var(--moss); }
  .lesson h2{ font-family:var(--latin); font-weight:500; font-size:clamp(1.9rem,3.6vw,2.8rem); letter-spacing:.16em; line-height:1.3; margin:1.6rem 0 1.4rem; }
  .lesson p{ color:var(--ink-soft); margin-bottom:2.4rem; }
  .lesson .btn{ border-color:var(--moss-deep); color:var(--moss-deep); }
  .lesson .btn:hover{ background:var(--moss-deep); color:var(--paper); }
  .lesson-img img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px; }
  @media(max-width:820px){ .lesson .wrap{ grid-template-columns:1fr; } }

  /* ---------- WORKS ---------- */
  .works .gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
  .works .gallery a{ display:block; overflow:hidden; border-radius:2px; }
  .works .gallery img{ width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); filter:saturate(.94); }
  .works .gallery a:hover img{ transform:scale(1.06); }
  .works .more{ text-align:center; margin-top:3rem; }
  .works .more a{ font-family:var(--latin); letter-spacing:.2em; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--moss); padding-bottom:4px; }
  @media(max-width:560px){ .works .gallery{ grid-template-columns:repeat(2,1fr); } }

  /* ---------- PROFILE ---------- */
  .profile{ background:var(--paper-2); }
  .profile .wrap{ display:grid; grid-template-columns:.55fr 1.45fr; gap:clamp(2.5rem,7vw,6rem); align-items:center; }
  .profile-img img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:2px; }
  .profile .role{ font-family:var(--latin); color:var(--moss); letter-spacing:.2em; font-size:.9rem; }
  .profile .name{ font-size:1.6rem; font-weight:600; letter-spacing:.08em; margin:.5rem 0 .2rem; }
  .profile .name small{ font-family:var(--latin); font-weight:500; color:var(--ink-soft); letter-spacing:.18em; font-size:1rem; display:block; margin-top:.3rem; }
  .timeline{ margin-top:2.4rem; }
  .timeline .row{ display:grid; grid-template-columns:5rem 1fr; gap:1.5rem; padding:1.1rem 0; border-top:1px solid var(--hair); }
  .timeline .row:last-child{ border-bottom:1px solid var(--hair); }
  .timeline .yr{ font-family:var(--latin); color:var(--moss-deep); letter-spacing:.12em; font-size:1.05rem; }
  .timeline .ev{ color:var(--ink-soft); font-size:.98rem; line-height:1.85; }
  @media(max-width:820px){ .profile .wrap{ grid-template-columns:1fr; } .profile-img img{ aspect-ratio:4/3; } }

  /* ---------- CONTACT / CTA ---------- */
  .contact{ background:var(--paper); text-align:center; }
  .contact h2{ font-family:var(--latin); font-weight:500; font-size:clamp(2rem,4.5vw,3.4rem); letter-spacing:.12em; line-height:1.3; margin-bottom:1.4rem; }
    .contact .btn{ background:transparent; color:var(--moss-deep); border-color:var(--moss-deep); }
  .contact .btn:hover{ background:var(--moss-deep); border-color:var(--moss-deep); color:#fff; }
  .contact .jp{ font-size:1.15rem; color:var(--ink-soft); margin-bottom:3rem; }
  .contact .store-note{ margin-top:4rem; font-size:.9rem; color:var(--ink-soft); letter-spacing:.16em; }
  .contact .store-note .latin-h{ display:block; color:var(--moss); font-size:.78rem; letter-spacing:.4em; text-transform:uppercase; margin-bottom:.6rem; }

  /* ---------- NEWS strip ---------- */
  .news{ background:var(--paper); border-top:1px solid var(--hair); }
  .news .wrap{ padding-top:clamp(3rem,7vw,5rem); padding-bottom:clamp(3rem,7vw,5rem); display:grid; grid-template-columns:auto 1fr; gap:2.5rem; align-items:center; }
  .news .eyebrow{ align-self:start; padding-top:.4rem; }
  .news-item{ display:flex; gap:1.6rem; align-items:baseline; }
  .news-item .date{ font-family:var(--latin); color:var(--moss); letter-spacing:.1em; flex:none; }
  .news-item .txt{ color:var(--ink); }
  @media(max-width:560px){ .news .wrap{ grid-template-columns:1fr; gap:1rem; } }

  /* ---------- フッター ---------- */
  footer{ background:var(--paper-2); color:var(--ink); border-top:1px solid var(--hair); padding:clamp(3.5rem,8vw,6rem) var(--pad) 2.5rem; position:relative; z-index:2; }
  .foot-top{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:2rem; }
  .foot-brand{ font-family:var(--latin); letter-spacing:.3em; font-size:1.3rem; }
  .foot-brand small{ display:block; font-family:var(--serif); letter-spacing:.1em; font-size:.82rem; color:var(--ink-soft); margin-top:.7rem; }
  .foot-nav{ display:flex; gap:1.4rem; flex-wrap:wrap; }
  .foot-nav a{ font-family:var(--latin); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; }
  .foot-nav a:hover{ color:var(--moss-deep); }
  .foot-bottom{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--hair); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.78rem; color:var(--ink-soft); letter-spacing:.1em; }

  /* ---------- 出現アニメーション ---------- */
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
  .reveal.in{ opacity:1; transform:none; }
  .d1{transition-delay:.1s;} .d2{transition-delay:.25s;} .d3{transition-delay:.4s;} .d4{transition-delay:.55s;}
  @media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;} }


  /* ---------- 汎用ページ / 投稿（page.php / single.php） ---------- */
  .page-head{ padding:9.5rem var(--pad) 0; text-align:center; }
  .page-head .eyebrow{ display:block; margin-bottom:1rem; }
  .page-head h1{ font-family:var(--latin); font-weight:500; font-size:clamp(1.9rem,4vw,3rem); letter-spacing:.16em; line-height:1.3; }
  .page-head .date{ display:block; margin-top:1rem; font-family:var(--latin); color:var(--moss); letter-spacing:.12em; }
  .entry{ max-width:46rem; margin:0 auto; padding:clamp(2.5rem,6vw,4.5rem) var(--pad) clamp(5rem,11vw,9rem); }
  .entry-content p{ margin-bottom:1.5rem; }
  .entry-content h2{ font-weight:600; font-size:1.4rem; margin:2.6rem 0 1rem; letter-spacing:.04em; }
  .entry-content h3{ font-weight:600; font-size:1.15rem; margin:2rem 0 .8rem; }
  .entry-content img{ border-radius:2px; margin:1.6rem 0; height:auto; }
  .entry-content a{ color:var(--moss-deep); }
  .entry-content ul, .entry-content ol{ margin:0 0 1.5rem 1.4rem; }
  .entry-content li{ margin-bottom:.5rem; }
  .back-link{ display:inline-block; margin-top:2.5rem; font-family:var(--latin); letter-spacing:.18em; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--moss); padding-bottom:3px; }
  .post-list{ max-width:48rem; margin:0 auto; padding:clamp(2rem,6vw,4rem) var(--pad) clamp(5rem,11vw,9rem); }
  .post-list .item{ display:block; padding:1.9rem 0; border-bottom:1px solid var(--hair); text-decoration:none; color:var(--ink); }
  .post-list .item:first-child{ border-top:1px solid var(--hair); }
  .post-list .item .date{ font-family:var(--latin); color:var(--moss); letter-spacing:.1em; font-size:.9rem; }
  .post-list .item .ttl{ display:block; margin-top:.45rem; font-size:1.18rem; line-height:1.7; transition:color .3s ease; }
  .post-list .item:hover .ttl{ color:var(--moss-deep); }

  /* ---------- 選ばれる理由（サービスページ） ---------- */
  .svc-reason__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(2rem,5vw,4.5rem); }
  .svc-reason__item{ padding-top:1.6rem; border-top:1px solid var(--hair); }
  .svc-reason__num{ font-family:var(--latin); font-size:1.5rem; color:var(--moss); letter-spacing:.1em; }
  .svc-reason__item h3{ font-weight:600; font-size:1.18rem; letter-spacing:.06em; margin:1.1rem 0 .9rem; line-height:1.7; }
  .svc-reason__item p{ color:var(--ink-soft); font-size:.98rem; }
  @media(max-width:820px){ .svc-reason__row{ grid-template-columns:1fr; gap:2.5rem; } }