/* ============== Base ============== */
:root{
    --bg: #f1f1f1;
    --ink: #0f0f10;
    --muted: rgba(15,15,16,.62);
    --hairline: rgba(15,15,16,.12);
    --soft: rgba(15,15,16,.06);
    --shadow: 0 18px 50px rgba(0,0,0,.18);
    --radius: 22px;
    --max: 1120px;
    --sheet: #cfd7da; /* グレー面 */
  }
  
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family: ui-serif, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    letter-spacing:.02em;
  }
  
  img{ max-width:100%; height:auto; display:block; }
  a{ color:inherit; text-decoration:none; }
  
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  
  .container{
    width:min(var(--max), calc(100% - 48px));
    margin-inline:auto;
  }
  
  /* ============== Section common ============== */
  .section{
    padding: clamp(54px, 7vw, 90px) 0;
  }
  
  /* ============== HERO: scapula (1枚目) ============== */
  .hero--scapula{
    position: relative;
    min-height: 92vh;
    overflow: hidden;
  }
  
  .hero__bg--scapula{
    position:absolute;
    inset:0;
    background-image:url("/assets/img/hero-back2.jpg");
    background-size: cover;
    background-position: center 18%;
    background-repeat: no-repeat;
    filter:saturate(.92) contrast(1.06);
  }
  
  /* 上のlogo行 */
  .hero__topline{
    position: relative;
    z-index: 2;
    padding: 22px 24px 0;
    color: rgba(255,255,255,.92);
    font-family: ui-sans-serif, system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
    letter-spacing: .08em;
    font-size: 13px;
  }
  
  /* センターコピー */
  .hero__center{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    z-index:2;
    pointer-events:none;
  }
  
  /* hero全体に効かせず、scapula限定で指定 */
  .hero--scapula .hero__kicker{
    margin:0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 20px;
    letter-spacing:.22em;
    text-shadow: 0 10px 30px rgba(0,0,0,.28);
  }
  
  /* ============== STORY: dress (2枚目) ============== */
  .story--dress{
    position: relative;
    overflow: hidden;
    min-height: 75vh;
    display:grid;
    align-items:center;
    color: rgba(0, 0, 0, 0.92);
  }
  
  .story--dress .story__bg{
    position:absolute;
    inset:0;
    background-image:url("/assets/img/hero-black.jpg");
    background-size: cover;
    background-position: left 40%;
    background-repeat: no-repeat;
    filter:saturate(.9) contrast(1.08);
  }
  
  /* 右にテキストを置くグリッド */
  .story__grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns: 1.6fr .4fr;
    gap: 22px;
    align-items:center;
    padding: 64px 0;
  }
  
  .story__content{
    justify-self:end;
    margin-right: -160px;  
  }
  
  .story__title{
    margin:0 0 12px;
    font-size: clamp(22px, 2.6vw, 32px);
    letter-spacing:.18em;
  }
  
  .story__text{
    margin:0;
    color: rgba(0, 0, 0, 0.76);
    font-size: 15px;
    line-height: 2.05;
    letter-spacing:.08em;
  }
  
  /* ============== Intro Visual (left text / right full-bleed) ============== */
  .section--intro-visual{ padding: 0; }
  
  .intro-grid{
    display: grid;
    grid-template-columns: minmax(520px,1fr) 38vw;
    min-height: clamp(420px, 52vw, 720px);
  }
  
  .intro-text{
    display: grid;
    align-items: start;
    padding: clamp(56px, 6vw, 92px) clamp(36px, 6vw, 86px);
  }
  
  .intro-text__inner{ max-width: 620px; }
  
  .section--intro-visual .section__headline{
    margin: 0 0 28px;
    font-size: clamp(22px, 2.2vw, 34px);
    line-height: 1.65;
    letter-spacing: .10em;
  }
  
  .section--intro-visual .section__body{
    margin: 0;
    font-size: 14px;
    line-height: 2.15;
    letter-spacing: .06em;
    color: rgba(15,15,16,.72);
  }
  
  .intro-media{
    position: relative;
    overflow: hidden;
  }
  
  .intro-media__bg{
    position: absolute;
    inset: 0;
    background: var(--sheet);
  }
  
  .intro-media__img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 78% 85%;
    filter: saturate(.95) contrast(1.02);
  }
  
  /* ============== Center Visual (background image + poem) ============== */
  .section--center-visual{
    position: relative;
    overflow: hidden;
    padding: 0;
    min-height: clamp(420px, 55vw, 640px);
    display: grid;
    place-items: center;
    text-align: center;
  
    background-image: url("/assets/img/center-silhouette.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 78% 35%;
  }
  
  .center-visual__inner{
    position: relative;
    z-index: 2;
    width: min(720px, calc(100% - 48px));
    padding: clamp(48px, 6vw, 76px) 0;
    color: rgba(15,15,16,.86);
  }
  
  .center-visual__kicker{
    margin: 0 0 18px;
    font-size: 13px;
    letter-spacing: .18em;
    color: rgba(15,15,16,.62);
  }
  
  .center-visual__headline{
    margin: 22px 0;
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 1.9;
    letter-spacing: .18em;
    font-weight: 500;
  }
  
  .center-visual__sub{
    margin: 18px 0 0;
    font-size: 13px;
    letter-spacing: .14em;
    color: rgba(15,15,16,.68);
  }
  
  .center-visual__rule{
    display: inline-block;
    width: 64px;
    height: 1px;
    background: rgba(15,15,16,.22);
  }
  
  /* ============== Two-col blocks (既存のまま) ============== */
  .two{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(22px, 4vw, 56px);
    align-items:center;
  }
  
  .section__eyebrow{
    margin:0 0 10px;
    color: rgba(15,15,16,.55);
    font-size: 12px;
    letter-spacing:.18em;
  }
  
  .section__title{
    margin:0 0 16px;
    font-size: clamp(22px, 2.8vw, 34px);
    letter-spacing:.18em;
    line-height: 1.35;
  }
  
  .bullets{
    margin: 0 0 16px;
    padding: 0 0 0 18px;
    color: rgba(15,15,16,.72);
    line-height: 1.9;
    font-size: 14px;
  }
  .bullets li{ margin: 6px 0; }
  
  .two__media img{
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background:#f2f2f2;
  }
  
  /* ============== Hand Sheet (paper layout) ============== */
  .section--hand-sheet{ padding: 0; }
  
  .hand-sheet{
    display:grid;
    grid-template-columns: minmax(520px, 1fr) 42vw; /* 右を“紙面っぽく”細めに */
    min-height: clamp(460px, 52vw, 720px);
  }
  
  .hand-sheet__text{
    display: grid;
    align-items: center;
    padding: clamp(56px, 6vw, 92px) clamp(36px, 6vw, 86px);
  }
  
  .hand-sheet__inner{
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .hand-sheet__eyebrow{
    margin: 0 0 18px;
    font-size: 13px;
    letter-spacing: .14em;
    color: rgba(15,15,16,.62);
  }
  
  .hand-sheet__title{
    margin: 0 0 26px;
    font-size: clamp(26px, 2.8vw, 40px);
    line-height: 1.35;
    letter-spacing: .14em;
    font-weight: 600;
  }
  
  .hand-sheet__body{
    margin: 0;
    font-size: 14px;
    line-height: 2.1;
    letter-spacing: .08em;
    color: rgba(15,15,16,.72);
  }
  
  .hand-sheet__media{
    position: relative;
    overflow: hidden;
  }
  
  .hand-sheet__bg{
    position:absolute;
    inset:0;
  }
  
  .hand-sheet__img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit: contain;   /* “細く全体を見せる” */
    object-position: 55% 50%;
  }
  
  /* ============== Footer ============== */
  .footer{
    background: #0b0c0e;
    color: rgba(255,255,255,.86);
    padding: 56px 0 26px;
    margin-top: 22px;
  }
  
  .footer__grid{
    display:grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 40px;
    align-items:start;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  
  .footer__kicker{
    margin:0 0 12px;
    font-size: 12px;
    letter-spacing:.18em;
    color: rgba(255,255,255,.62);
  }
  
  .footer__cols{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  
  .footer__title{
    margin:0 0 12px;
    font-size: 12px;
    letter-spacing:.18em;
    color: rgba(255,255,255,.62);
  }
  
  .footer__line{
    margin: 8px 0;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,.78);
  }
  
  .footer__bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 20px;
    padding-top: 18px;
  }
  
  .footer__small{
    margin:0;
    font-size: 12px;
    color: rgba(255,255,255,.60);
    letter-spacing:.12em;
  }
  
  .footer__sns{
    display:flex;
    gap: 12px;
  }
  
  .footer__sns a{
    width: 34px;
    height: 34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    color: rgba(255,255,255,.84);
  }
  
  /* ============== Responsive ============== */
  @media (max-width: 960px){
    .story__grid{
      grid-template-columns: 1fr;
      padding: 56px 0;
    }
    .story__content{
      justify-self:start;
      width: min(520px, 100%);
    }
    .story--dress .story__bg{
      background-position:center 35%;
    }
  }
  
  @media (max-width: 900px){
    .intro-grid{
      grid-template-columns: 1fr;
      min-height: auto;
    }
    .intro-media{
      height: 56vh;
      min-height: 360px;
    }
    .intro-text{
      padding: 52px 22px;
    }
  
    .section--center-visual{
      background-size: cover;
      min-height: 420px;
    }
  
    .hand-sheet{
      grid-template-columns: 1fr;
    }
    .hand-sheet__media{
      height: 70vh;
      min-height: 420px;
    }
    .hand-sheet__img{
      object-fit: contain;
      object-position: 50% 50%;
    }
  }
  
  @media (max-width: 820px){
    .two{
      grid-template-columns: 1fr;
    }
  
    .footer__grid{
      grid-template-columns: 1fr;
    }
    .footer__cols{
      grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 560px){

    .center-visual__inner{
      width: min(680px, calc(100% - 28px));
    }
    .center-visual__headline{
      letter-spacing: .14em;
      line-height: 1.85;
    }
  
    .hand-sheet__text{
      padding: 52px 22px;
    }
    .hand-sheet__media{
      height: 58vh;
      min-height: 360px;
    }
  }
  @media (max-width: 768px){
    .story--dress .story__content{
      color: #fff;
      text-shadow:
        0 2px 6px rgba(0,0,0,.75),
        0 6px 24px rgba(0,0,0,.85);
    }
  
    .story--dress .story__content .story__title{
      color: #fff;
      text-shadow:
        0 3px 8px rgba(0,0,0,.85),
        0 10px 32px rgba(0,0,0,.95);
    }
  
    .story--dress .story__content .story__text{
      color: rgba(255,255,255,.96);
      text-shadow:
        0 2px 6px rgba(0,0,0,.8),
        0 6px 20px rgba(0,0,0,.9);
    }
    .center-visual__headline{
        font-size: clamp(20px, 5.2vw, 26px);
        line-height: 1.6;
        letter-spacing: .08em;
      }
  }