/* ==========================================================
     TOKENS
  ========================================================== */
  :root{
    --bg:            #FBF7FA;
    --bg-soft:       #F4EBF4;
    --panel:         #FFFFFF;
    --lav-100:       #F0E1EF;
    --lav-300:       #DDBEE0;
    --lav-500:       #BD93C4;
    --lav-700:       #8C5F98;
    --ink:           #45324C;
    --ink-soft:      #6E5A76;
    --gold:          #B4884F;
    --gold-soft:     #D8B98A;
    --line:          rgba(69,50,76,0.14);

    --font-en:       'Cormorant Garamond', 'Noto Serif JP', serif;
    --font-jp:       'Noto Serif JP', serif;
    --font-body:     'Noto Sans JP', sans-serif;

    --wrap: 1440px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    font-weight:300;
    line-height:1.9;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{display:block; width:100%; height:100%; object-fit:cover;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
  .eyebrow{
    display:block;
    font-family:var(--font-en);
    letter-spacing:0.32em;
    font-size:13px;
    color:var(--gold);
    text-transform:uppercase;
    margin-bottom:14px;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 30px;
    font-family:var(--font-en);
    font-size:14px;
    letter-spacing:0.14em;
    border:1px solid var(--ink);
    color:var(--ink);
    transition:all .35s ease;
  }
  .btn:hover{ background:var(--ink); color:#fff; }
  .btn.solid{ background:var(--lav-700); border-color:var(--lav-700); color:#fff; }
  .btn.solid:hover{ background:var(--ink); border-color:var(--ink); }
  .btn.ghost-light{ border-color:rgba(255,255,255,.75); color:#fff; }
  .btn.ghost-light:hover{ background:#fff; color:var(--ink); }
  .btn svg{ width:14px; height:14px; transition:transform .35s ease; }
  .btn:hover svg{ transform:translateX(4px); }

  .section-head{
    text-align:center;
    margin-bottom:56px;
  }
  .section-head h2{
    font-family:var(--font-jp);
    font-weight:500;
    font-size:clamp(24px,3vw,32px);
    letter-spacing:.06em;
  }

  .placeholder-img{
    position:relative;
    background:
      linear-gradient(135deg, var(--lav-100), var(--bg-soft));
    display:flex; align-items:center; justify-content:center;
  }
  /* 推奨サイズラベル表示は不要になったためコメントアウト（data-label属性はHTML側に残しています）
  .placeholder-img::after{
    content: attr(data-label);
    position:absolute; inset:auto 10px 10px 10px;
    font-family:var(--font-body);
    font-size:11px;
    letter-spacing:.02em;
    color:var(--lav-700);
    background:rgba(255,255,255,.75);
    padding:5px 8px;
    line-height:1.4;
    border:1px dashed var(--lav-500);
  }
  */
  .placeholder-img img{ position:relative; z-index:0; }

  /* ==========================================================
     SCROLL REVEAL（ふわっとフェードイン）
  ========================================================== */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
    will-change:opacity, transform;
  }
  .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
  }
  @media (prefers-reduced-motion: reduce){
    .reveal{ transition:none; opacity:1; transform:none; }
  }

  .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 60px; }

  /* ==========================================================
     HEADER
  ========================================================== */
  header{
    position:sticky; top:0; z-index:200;
    background:rgba(251,247,250,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav-row{
    max-width:var(--wrap); margin:0 auto;
    display:grid;
    grid-template-columns: 1fr auto 1fr auto;
    align-items:center;
    column-gap:40px;
    padding:20px 60px;
  }
  .nav-left{
    display:flex; align-items:center; gap:40px;
    justify-content:flex-end;
  }
  .nav-right{
    display:flex; align-items:center; gap:40px;
    justify-content:flex-start;
  }
  .nav-icons{ display:flex; align-items:center; gap:22px; justify-self:end; }
  .nav-left a, .nav-right a, .nav-icons button{
    font-family:var(--font-en);
    font-size:13px;
    letter-spacing:.14em;
    position:relative;
  }
  .nav-left a::after, .nav-right a::after{
    content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px;
    background:var(--gold); transform:scaleX(0); transform-origin:left;
    transition:transform .3s ease;
  }
  .nav-left a:hover::after, .nav-right a:hover::after{ transform:scaleX(1); }
  .nav-icons button{ display:flex; align-items:center; }
  .nav-icons svg{ width:18px; height:18px; }

  .logo{
    text-align:center;
    font-family:var(--font-en);
  }
  .logo .name{ font-size:24px; letter-spacing:.24em; font-weight:500; }
  .logo .sub{ font-size:10px; letter-spacing:.42em; color:var(--gold); margin-top:2px;}

  .hamburger{ display:none; width:26px; height:18px; position:relative; }
  .hamburger span{
    position:absolute; left:0; right:0; height:1px; background:var(--ink);
    transition:all .3s ease;
  }
  .hamburger span:nth-child(1){ top:0; }
  .hamburger span:nth-child(2){ top:8px; }
  .hamburger span:nth-child(3){ top:16px; }
  .hamburger.active span:nth-child(1){ top:8px; transform:rotate(45deg); }
  .hamburger.active span:nth-child(2){ opacity:0; }
  .hamburger.active span:nth-child(3){ top:8px; transform:rotate(-45deg); }

  .mobile-menu{
    position:fixed; inset:0; z-index:300;
    background:var(--bg);
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:34px;
    transform:translateY(-100%);
    transition:transform .45s cubic-bezier(.65,0,.35,1);
  }
  .mobile-menu.open{ transform:translateY(0); }
  .mobile-menu a{
    font-family:var(--font-en);
    font-size:20px; letter-spacing:.2em;
  }
  .mobile-menu .m-icons{ display:flex; gap:26px; margin-top:20px; }
  .mobile-menu .m-icons svg{ width:20px; height:20px; }
  .mobile-close{
    position:absolute; top:24px; right:24px;
    width:26px; height:18px;
  }
  .mobile-close span{
    position:absolute; left:0; right:0; top:8px; height:1px; background:var(--ink);
  }
  .mobile-close span:nth-child(1){ transform:rotate(45deg); }
  .mobile-close span:nth-child(2){ transform:rotate(-45deg); }

  /* ==========================================================
     HERO
  ========================================================== */
  .hero{
    position:relative;
    min-height:92vh;
    display:flex; align-items:flex-end;
  }
  .hero-bg{
    position:absolute; inset:0;
  }
  .hero-bg::before{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(69,50,76,.12) 0%, rgba(69,50,76,.38) 100%);
    z-index:1;
  }
  .hero-content{
    position:relative; z-index:2;
    max-width:var(--wrap); margin:0 auto;
    width:100%;
    padding:0 60px 90px;
    color:#fff;
  }
  .hero-content .kicker{
    font-family:var(--font-jp);
    font-size:clamp(20px,2.4vw,28px);
    line-height:1.7;
    margin-bottom:18px;
    text-shadow:0 2px 18px rgba(0,0,0,.25);
  }
  .hero-content h1{
    font-family:var(--font-en);
    font-weight:500;
    font-size:clamp(46px,7vw,84px);
    line-height:0.98;
    letter-spacing:.02em;
    text-shadow:0 2px 24px rgba(0,0,0,.2);
  }
  .hero-content .hero-sub{
    font-family:var(--font-en);
    font-size:15px;
    letter-spacing:.5em;
    margin:14px 0 34px;
    color:var(--gold-soft);
  }

  /* ==========================================================
     BRAND STORY
  ========================================================== */
  .story{
    padding:140px 0;
  }
  .story .wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center;
  }
  .story-media{ aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line); }
  .story-text h2{
    font-family:var(--font-en);
    font-weight:500;
    font-size:clamp(30px,3.6vw,44px);
    line-height:1.2;
    margin-bottom:26px;
  }
  .story-text p{ color:var(--ink-soft); margin-bottom:36px; font-size:15px; }

  /* ==========================================================
     NEW COLLECTION (carousel)
  ========================================================== */
  .collection{ padding:0 0 140px; }
  .carousel-wrap{ position:relative; }
  .carousel{
    display:flex; gap:24px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:4px 60px 26px;
    scrollbar-width:none;
  }
  .carousel::-webkit-scrollbar{ display:none; }
  .product-card{
    flex:0 0 auto;
    width:260px;
    scroll-snap-align:start;
  }
  .product-card .thumb{
    aspect-ratio:4/5;
    margin-bottom:20px;
    background:var(--panel);
    border:1px solid var(--line);
    overflow:hidden;
  }
  .product-card .thumb img{ transition:transform .6s ease; }
  .product-card:hover .thumb img{ transform:scale(1.05); }
  .product-card .label-en{
    font-family:var(--font-en);
    letter-spacing:.14em;
    font-size:15px;
  }
  .product-card .label-jp{
    font-size:12px; color:var(--ink-soft); margin-top:4px;
  }
  .carousel-nav{
    display:flex; justify-content:center; gap:18px; margin-top:10px;
  }
  .carousel-nav button{
    width:42px; height:42px; border-radius:50%;
    border:1px solid var(--ink); display:flex; align-items:center; justify-content:center;
    transition:all .3s ease;
  }
  .carousel-nav button:hover{ background:var(--ink); color:#fff; }
  .carousel-nav svg{ width:15px; height:15px; }

  /* ==========================================================
     WORLD OF BRAND NAME
  ========================================================== */
  .world{ padding:0 0 140px; }
  .world-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  }
  .world-card .thumb{ aspect-ratio:3/4; overflow:hidden; margin-bottom:22px; }
  .world-card .thumb img{ transition:transform .6s ease; }
  .world-card:hover .thumb img{ transform:scale(1.06); }
  .world-card .label-en{ font-family:var(--font-en); font-size:16px; letter-spacing:.1em; }
  .world-card .label-jp{ font-size:12px; color:var(--ink-soft); margin:6px 0 20px; }

  /* ==========================================================
     CAFE BANNER
  ========================================================== */
  .cafe-banner{
    position:relative; min-height:70vh;
    display:flex; align-items:center;
    margin-bottom:140px;
  }
  .cafe-banner .hero-bg::before{
    background:linear-gradient(90deg, rgba(45,28,50,.66) 10%, rgba(45,28,50,.18) 70%);
  }
  .bg-fixed{
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
  }
  .bg-fixed img{ opacity:0; } /* 背景はCSS背景画像側で表示するため、img自体は読み込み確認用に透明化 */
  .cafe-banner .hero-content{ padding:0 60px; color:#fff; }
  .cafe-banner h2{
    font-family:var(--font-en); font-weight:500;
    font-size:clamp(32px,4vw,52px); line-height:1.1; margin-bottom:18px;
  }
  .cafe-banner h2 em{ font-style:italic; color:var(--gold-soft); }
  .cafe-banner p{ max-width:420px; margin-bottom:34px; color:rgba(255,255,255,.9); font-size:15px;}

  /* ==========================================================
     SWEETS COLLECTION
  ========================================================== */
  .sweets{ padding:0 0 140px; }
  .sweets .section-head{
    display:flex; align-items:flex-end; justify-content:space-between;
    text-align:left; margin-bottom:44px;
  }
  .sweets .section-head .btn{ padding:11px 22px; font-size:12px; }
  .sweets-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
  .sweets-grid .thumb{ aspect-ratio:1/1; overflow:hidden; }
  .sweets-grid .thumb img{ transition:transform .6s ease; }
  .sweets-grid .thumb:hover img{ transform:scale(1.06); }

  /* ==========================================================
     GIFT BANNER
  ========================================================== */
  .gift{
    display:grid; grid-template-columns:1fr 1fr;
    background:var(--bg-soft);
    margin-bottom:140px;
  }
  .gift-media{ aspect-ratio:16/11; overflow:hidden; }
  .gift-text{
    display:flex; flex-direction:column; justify-content:center;
    padding:70px;
  }
  .gift-text h2{
    font-family:var(--font-en); font-weight:500;
    font-size:clamp(28px,3.4vw,40px); margin-bottom:20px;
  }
  .gift-text p{ color:var(--ink-soft); margin-bottom:32px; font-size:15px; }

  /* ==========================================================
     INSTAGRAM + NEWS
  ========================================================== */
  .feed{ padding:0 0 120px; }
  .feed .wrap{ display:grid; grid-template-columns:1.5fr 1fr; gap:90px; }
  .feed-col h3, .news-col h3{
    font-family:var(--font-en); font-size:15px; letter-spacing:.2em; margin-bottom:26px;
  }
  .insta-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .insta-grid .thumb{ aspect-ratio:1/1; overflow:hidden; }
  .news-list li{
    display:flex; gap:22px; padding:18px 0; border-bottom:1px solid var(--line);
    font-size:14px;
  }
  .news-list .date{ font-family:var(--font-en); color:var(--ink-soft); flex:0 0 90px; }
  .news-col .btn{ margin-top:30px; padding:12px 26px; font-size:12px; }

  /* ==========================================================
     FOOTER
  ========================================================== */
  footer{ background:var(--lav-700); color:#fff; padding-top:90px; position:relative; }
  .footer-top{
    max-width:var(--wrap); margin:0 auto; padding:0 60px 60px;
    display:grid; grid-template-columns:1.2fr 1fr 1fr;
    gap:60px;
    border-bottom:1px solid rgba(255,255,255,.2);
  }
  .footer-brand .logo .name, .footer-brand .logo .sub{ color:#fff; }
  .footer-brand p{ font-size:13px; opacity:.8; margin-top:18px; max-width:280px; }
  .footer-nav h4{
    font-family:var(--font-en); font-size:13px; letter-spacing:.16em; margin-bottom:20px; opacity:.85;
  }
  .footer-nav li{ margin-bottom:12px; font-size:13px; }
  .footer-nav a:hover{ opacity:.7; }
  .mail-form{ display:flex; margin-top:18px; border-bottom:1px solid rgba(255,255,255,.5); max-width:260px; }
  .mail-form input{
    flex:1; background:none; border:none; color:#fff; padding:8px 0; font-size:13px;
  }
  .mail-form input::placeholder{ color:rgba(255,255,255,.6); }
  .mail-form button{ font-family:var(--font-en); font-size:12px; letter-spacing:.1em; }
  .sns-row{ display:flex; gap:16px; margin-top:20px; }
  .sns-row svg{ width:17px; height:17px; }

  .footer-bottom{
    max-width:var(--wrap); margin:0 auto; padding:26px 60px 40px;
    display:flex; align-items:center; justify-content:space-between;
    font-size:12px; opacity:.75;
  }

  .back-to-top{
    position:fixed; right:28px; bottom:28px; z-index:150;
    width:52px; height:52px; border-radius:50%;
    background:var(--ink); color:#fff;
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:all .35s ease;
  }
  .back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
  .back-to-top svg{ width:16px; height:16px; }

  /* ==========================================================
     RESPONSIVE
  ========================================================== */
  @media (max-width:1080px){
    .wrap, .nav-row{ padding-left:32px; padding-right:32px; }
    .hero-content{ padding-left:32px; padding-right:32px; }
    .story .wrap{ gap:50px; }
    .world-grid{ grid-template-columns:repeat(2,1fr); }
    .sweets-grid{ grid-template-columns:repeat(2,1fr); }
    .feed .wrap{ grid-template-columns:1fr; gap:60px; }
    .footer-top{ grid-template-columns:1fr 1fr; }
  }

  @media (max-width:768px){
    .nav-left, .nav-right, .nav-icons{ display:none; }
    .nav-row{
      display:flex;
      justify-content:space-between;
      align-items:center;
    }
    .logo{ text-align:left; }
    .hamburger{ display:block; }
    .nav-row{ padding:16px 24px; }
    .logo .name{ font-size:19px; }

    /* ---- HERO: mobile = text block on top, image block(右半分) below ---- */
    .hero{
      position:static;
      display:flex; flex-direction:column;
      min-height:auto;
      align-items:stretch;
    }
    .hero-bg{
      position:static;
      order:2;
      height:52vw; min-height:280px;
      overflow:hidden;
    }
    .hero-bg img{ object-position:78% center; } /* 画像の右側（商品側）だけ見せる */
    .hero-content{
      position:static; order:1;
      padding:64px 24px 40px;
      color:var(--ink);
      background:var(--bg-soft);
      text-align:center;
      display:flex; flex-direction:column; align-items:center;
    }
    .hero-content .kicker{ color:var(--ink); text-shadow:none; }
    .hero-content h1{ text-shadow:none; }
    .hero-content .hero-sub{ color:var(--gold); }
    /* ④ 背景が明るくなった分、白文字ボタンのままだと見えないため濃色ボタンに変更 */
    .hero-content .btn.ghost-light{
      border-color:var(--ink); color:var(--ink);
    }
    .hero-content .btn.ghost-light:hover{ background:var(--ink); color:#fff; }
    /* ④ メインビューはスマホ版でオーバーレイ（暗いグラデーション）を消す */
    .hero .hero-bg::before{ display:none; }

    /* ⑥ BRAND NAME Café：ヒーローと同じ「テキスト上／画像下」の構成に統一して崩れを解消 */
    .cafe-banner{
      position:static;
      display:flex; flex-direction:column;
      min-height:auto;
      margin-bottom:80px;
    }
    .cafe-banner .hero-bg{
      position:static; order:2;
      height:60vw; min-height:280px;
      overflow:hidden;
    }
    .cafe-banner .hero-bg::before{ display:none; }
    .cafe-banner .hero-bg img{ object-position:60% center; }
    /* ③ background-attachment:fixed はスマホの縦積みレイアウトに合わないため通常画像表示に戻す */
    .cafe-banner .hero-bg.bg-fixed{ background-image:none; background-attachment:scroll; }
    .cafe-banner .hero-bg.bg-fixed img{ opacity:1; }
    .cafe-banner .hero-content{
      position:static; order:1;
      padding:56px 24px 36px;
      color:var(--ink);
      background:var(--bg-soft);
      text-align:center;
      display:flex; flex-direction:column; align-items:center;
    }
    .cafe-banner h2{ color:var(--ink); }
    .cafe-banner h2 em{ color:var(--lav-700); }
    .cafe-banner .hero-sub{ color:var(--gold) !important; }
    .cafe-banner p{ max-width:none; color:var(--ink-soft); }
    /* ④ Caféのボタンも同様に濃色へ変更して視認性を確保 */
    .cafe-banner .btn.ghost-light{
      border-color:var(--ink); color:var(--ink);
    }
    .cafe-banner .btn.ghost-light:hover{ background:var(--ink); color:#fff; }

    .story{ padding:80px 0; }
    .story .wrap{ grid-template-columns:1fr; gap:36px; }
    .story-media{ order:1; }
    .story-text{ order:2; text-align:center; display:flex; flex-direction:column; align-items:center; }

    .collection{ padding-bottom:80px; }
    .carousel{ padding-left:24px; padding-right:24px; }
    .product-card{ width:200px; text-align:center; }

    .world{ padding-bottom:80px; }
    .world-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
    .world-card{ text-align:center; }

    .sweets{ padding-bottom:80px; }
    .sweets .section-head{ flex-direction:column; align-items:center; text-align:center; gap:16px; }
    .sweets-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }

    .gift{ grid-template-columns:1fr; margin-bottom:80px; }
    .gift-text{ padding:44px 24px; text-align:center; align-items:center; }

    .feed{ padding-bottom:80px; }
    .feed .wrap{ text-align:center; }
    .insta-grid{ grid-template-columns:repeat(3,1fr); gap:6px; }
    .news-list li{ justify-content:center; }
    .news-col .btn{ margin-left:auto; margin-right:auto; }

    .footer-top{ grid-template-columns:1fr; gap:40px; padding-bottom:40px; text-align:center; }
    .footer-brand p{ margin-left:auto; margin-right:auto; }
    .mail-form{ margin-left:auto; margin-right:auto; }
    .sns-row{ justify-content:center; }
    .footer-bottom{ flex-direction:column; gap:10px; align-items:center; text-align:center; }
    .back-to-top{ width:44px; height:44px; right:16px; bottom:16px; }
  }