/* =========================================================
   MARET Found & Made — main.css
   オリジナルの maret-homepage-ja.html から移植。
   クラス名は変更していないため、他ページ追加時も流用可能。
   ========================================================= */

:root{
  --paper:#F7F5F0;
  --paper-warm:#F2EFE8;
  --ink:#1A1A18;
  --grey:#5C5A54;
  --indigo:#2B3A52;
  --indigo-soft:#8C9AAE;
  --line:#C9C2B0;
  --line-soft:rgba(26,26,24,0.12);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Shippori Mincho', serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.display{font-family:'Cormorant', serif;}
.label{
  font-family:'Inter', sans-serif;
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--grey);
}
img{width:100%;display:block;object-fit:cover;}
a{color:inherit;}

/* WordPress標準ユーティリティ */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; width:1px; overflow:hidden; position:absolute !important;
  word-wrap:normal !important;
}
.alignwide{max-width:1400px;margin-left:auto;margin-right:auto;}

/* ===== Spine (signature element) ===== */
.spine{
  position:fixed;
  left:0; top:0; bottom:0;
  width:34px;
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper);
  border-right:1px solid var(--line-soft);
}
.spine span{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:'Inter', sans-serif;
  font-size:10.5px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--grey);
  white-space:nowrap;
}
.spine .dot{
  position:absolute;
  top:28px;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--indigo);
}

.wrap{margin-left:34px;}

/* ===== Nav ===== */
header.nav{
  position:fixed;
  top:0; left:34px; right:0;
  z-index:400;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px 56px;
  mix-blend-mode:difference;
}
header.nav .mark{
  font-family:'Cormorant', serif;
  font-weight:500;
  font-size:22px;
  letter-spacing:0.18em;
  color:#fff;
  text-decoration:none;
  display:flex;
  align-items:center;
}
.mark-logo{
  display:block;
  width:auto;
  height:auto;
}
/* ヘッダーは動画/写真の上に重なるため、ロゴを白抜きにしたうえで
   header.nav の mix-blend-mode:difference と組み合わせ、常に視認できるようにする */
.mark-logo--header{
  height:24px;
  filter:brightness(0) invert(1);
}
/* フッターは紙色の背景の上なので、ロゴ本来の色(墨)をそのまま使う */
.mark-logo--footer{
  height:20px;
}
/* ヒーロー下部の大見出し代わりのロゴ。動画/写真の上なので白抜きにする */
.mark-logo--hero{
  height:clamp(48px, 8vw, 104px);
  width:auto;
  filter:brightness(0) invert(1);
}
.hero-logo{ display:flex; align-items:flex-end; }
header.nav nav{display:flex; gap:38px; align-items:center;}
header.nav nav a{
  font-family:'Inter', sans-serif;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
}
.nav-right{
  display:flex;
  align-items:center;
  gap:32px;
}
.lang-switch{display:flex; gap:12px;}
.lang-switch a{opacity:0.55;}
.lang-switch a.current-lang{opacity:1; border-bottom:1px solid #fff;}

.social-link{
  display:flex;
  align-items:center;
  color:#fff;
  opacity:0.85;
  transition:opacity 0.25s;
}
.social-link:hover{ opacity:1; }

/* ===== ハンバーガーボタン(モバイルのみ表示) ===== */
.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:28px;
  height:22px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  z-index:601;
}
.hamburger span{
  display:block;
  height:1px;
  width:100%;
  background:#fff;
  transition:transform 0.3s ease, opacity 0.3s ease;
}
.hamburger.is-active span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamburger.is-active span:nth-child(2){ opacity:0; }
.hamburger.is-active span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ===== モバイル用フルスクリーンナビ ===== */
.mobile-nav{
  position:fixed;
  inset:0;
  z-index:550;
  background:var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:32px;
  opacity:0;
  transform:translateY(-12px);
  pointer-events:none;
  transition:opacity 0.35s ease, transform 0.35s ease;
}
.mobile-nav.is-open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.mobile-nav nav{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
}
.mobile-nav nav a{
  font-family:'Cormorant', serif;
  font-style:italic;
  font-weight:300;
  font-size:30px;
  color:#fff;
  text-decoration:none;
}
.mobile-nav .lang-switch{ margin-top:8px; }
.mobile-nav .lang-switch a{ color:#fff; font-size:12px; }
.mobile-nav .social-link{ margin-top:4px; color:#fff; }
body.nav-open{ overflow:hidden; }

.mobile-nav-close{
  position:absolute;
  top:28px;
  left:28px;
  width:32px;
  height:32px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  z-index:1;
}
.mobile-nav-close span{
  position:absolute;
  top:50%; left:50%;
  width:24px; height:1px;
  background:#fff;
}
.mobile-nav-close span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
.mobile-nav-close span:nth-child(2){ transform:translate(-50%,-50%) rotate(-45deg); }

/* WordPressの管理者用ツールバー(上部の黒いバー)と、固定表示のヘッダー/スパインが
   重なって二重に見えてしまうのを防ぐ(ログイン中の管理者にのみ表示される問題。
   一般の訪問者にはツールバーが表示されないため影響しません) */
body.admin-bar .spine,
body.admin-bar header.nav,
body.admin-bar .mobile-nav{
  top:32px;
}
@media screen and (max-width: 782px){
  body.admin-bar .spine,
  body.admin-bar header.nav,
  body.admin-bar .mobile-nav{
    top:46px;
  }
}

/* ===== Hero ===== */
.hero{
  position:relative;
  height:100vh;
  max-height:900px;
  width:100%;
  background:#15161a;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
@media (min-height: 900px) and (max-width: 900px){
  .hero{ max-height:100vh; } /* スマホ縦画面では制限しない */
}
/* PC：横長3:2写真に高さを合わせ、トリミングを最小限にする */
@media (min-width: 901px){
  .hero{ height:min(100vh, 66.667vw); max-height:none; min-height:520px; }
}

.hero-reel{position:absolute; inset:0; overflow:hidden; z-index:0;}
/* PC用とスマホ用、2つのreelを切り替え表示する */
.hero-reel--mobile{ display:none; }
@media (max-width: 900px){
  .hero-reel--desktop{ display:none; }
  .hero-reel--mobile{ display:block; }
}
.hero-reel .frame{
  position:absolute; inset:0;
  opacity:0;
  transform:scale(1);
  filter:saturate(0.78) contrast(1.12) brightness(0.88) sepia(0.08);
  transition:opacity 1.2s ease, transform 1.6s ease-out;
  will-change:opacity, transform;
}
.hero-reel .frame.photo{
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
.hero-reel .frame.active{
  opacity:1;
  transform:scale(1);
}

/* 大きいモニターでは、写真の被写体が判別できないほど拡大されすぎないよう
   さらに控えめにする */
@media (min-width: 1600px){
  .hero-reel .frame{ transform:scale(1); }
  .hero-reel .frame.active{ transform:scale(1); }
}
.hero-reel .frame-video{overflow:hidden;}
.hero-reel .frame-video video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 25%;
}
.hero-reel.flicker{animation:flicker 0.12s infinite alternate;}
@keyframes flicker{
  0%{filter:brightness(1);}
  50%{filter:brightness(0.94);}
  100%{filter:brightness(0.99);}
}
.hero-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 38%, rgba(8,8,10,0.34) 78%, rgba(5,5,6,0.62) 100%);
}
.hero-grain{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:url('../img/grain.png');
  background-repeat:repeat;
  background-size:256px 256px;
  opacity:0.55;
  mix-blend-mode:overlay;
  animation:grainShift 0.4s steps(4) infinite;
}
@keyframes grainShift{
  0%{background-position:0 0;}
  25%{background-position:-64px 32px;}
  50%{background-position:48px -48px;}
  75%{background-position:-32px -64px;}
  100%{background-position:0 0;}
}

.hero::after{
  content:'';
  position:absolute; inset:0;
  z-index:3;
  background:linear-gradient(180deg, rgba(20,22,26,0.08) 0%, rgba(15,17,20,0.62) 100%);
}
.hero-foot{
  position:relative;
  z-index:4;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding:0 56px 56px;
}
.hero-title{
  font-family:'Cormorant', serif;
  font-weight:300;
  font-style:italic;
  color:#fff;
  font-size:clamp(48px, 7vw, 104px);
  line-height:0.95;
  max-width:780px;
}
.hero-meta{
  text-align:right;
  color:#EDEAE2;
}
.hero-meta .label{color:#C9C5B8;}
.hero-meta p{
  font-family:'Cormorant', serif;
  font-style:italic;
  font-size:15px;
  margin-top:8px;
  max-width:220px;
  color:#DAD6C9;
}
.scroll-cue{
  position:absolute;
  bottom:24px; left:56px;
  z-index:4;
  color:#EDEAE2;
  font-family:'Inter', sans-serif;
  font-size:10px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:10px;
}
.scroll-cue::before{
  content:'';
  width:1px; height:30px;
  background:#EDEAE2;
  opacity:0.6;
}

/* ===== Section generic ===== */
section{ position:relative; }
.section-pad{ padding:160px 56px; }
.rule{
  height:1px;
  background:var(--line-soft);
  margin:0 56px;
}

/* ===== Intro ===== */
.intro{
  display:grid;
  grid-template-columns:0.9fr 1.4fr;
  gap:80px;
  align-items:start;
}
.intro .label{margin-bottom:26px;}
.intro h2{
  font-family:'Cormorant', serif;
  font-weight:400;
  font-style:italic;
  font-size:clamp(32px,3.4vw,46px);
  line-height:1.22;
  color:var(--ink);
}
.intro .body-col p{
  font-size:16.5px;
  line-height:2;
  color:var(--grey);
  max-width:560px;
}
.intro .body-col p + p{margin-top:22px;}
.intro .signature{
  margin-top:44px;
  font-family:'Cormorant', serif;
  font-style:italic;
  font-size:19px;
  color:var(--indigo);
}

/* ===== Collection ===== */
.collection-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding:0 0 64px;
}
.collection-head h2{
  font-family:'Cormorant', serif;
  font-weight:300;
  font-style:italic;
  font-size:clamp(40px,5vw,72px);
  line-height:1;
}
.collection-head .label{text-align:right;}

.collection-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:2px;
  padding:0 56px;
}
.collection-grid figure{position:relative; overflow:hidden; background:#e5e1d6;}
.collection-grid img{
  width:100%;
  height:100%;
  min-height:560px;
  object-fit:cover;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.collection-grid figure:hover img{ transform:scale(1.045); }
.col-right{ display:flex; flex-direction:column; gap:2px; }
.col-right figure{ flex:1; }
.col-right img{ min-height:279px; }
.cap{
  position:absolute;
  left:24px; bottom:24px;
  color:#fff;
}
.cap .label{color:#E5E1D6;}
.cap .ttl{
  font-family:'Cormorant', serif;
  font-style:italic;
  font-size:24px;
  margin-top:4px;
}

.collection-foot{
  display:flex;
  justify-content:center;
  margin-top:56px;
}
.ghost-link{
  font-family:'Inter', sans-serif;
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--ink);
  padding-bottom:6px;
}

/* ===== Story (craftsmanship) ===== */
.story{ background:var(--ink); color:var(--paper); }
.story .section-pad{ padding-top:140px; padding-bottom:0; }
.story-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:end;
  margin-bottom:80px;
}
.story-head .label{ color:#9A9588; }
.story-head h2{
  font-family:'Cormorant', serif;
  font-weight:300;
  font-size:clamp(38px,4.4vw,60px);
  line-height:1.1;
}
.story-head p{
  font-size:15.5px;
  line-height:1.95;
  color:#B9B4A6;
  max-width:420px;
}

.story-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-left:34px;
  width:calc(100% - 34px);
}
.story-panel{ position:relative; background:#0f0f0d;}
.story-panel img{ height:640px; filter:grayscale(15%) contrast(1.04); }
.story-panel .num{
  position:absolute; top:28px; left:28px;
  font-family:'Cormorant', serif;
  font-style:italic;
  font-size:15px;
  color:#fff;
}
.story-panel .pc{
  padding:26px 28px 0;
}
.story-panel .pc .label{ color:#8C9AAE; margin-bottom:10px;}
.story-panel .pc h3{
  font-family:'Cormorant', serif;
  font-style:italic;
  font-weight:400;
  font-size:22px;
  margin-bottom:10px;
}
.story-panel .pc p{
  font-size:14px;
  line-height:1.85;
  color:#A9A498;
  padding-bottom:50px;
}
.story-panel + .story-panel{ border-left:1px solid rgba(247,245,240,0.1); }

/* ===== News ===== */
.news-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding:0 0 56px;
}
.news-head h2{
  font-family:'Cormorant', serif;
  font-weight:300;
  font-style:italic;
  font-size:clamp(34px,4vw,52px);
}
.news-list{ padding:0; }
.news-row{
  display:grid;
  grid-template-columns:120px 1fr auto;
  gap:32px;
  align-items:baseline;
  padding:30px 0;
  border-top:1px solid var(--line-soft);
  text-decoration:none;
  color:inherit;
}
.news-list .news-row:last-child{ border-bottom:1px solid var(--line-soft); }
.news-row .date{
  font-family:'Inter', sans-serif;
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--grey);
  padding-top:4px;
}
.news-row .ttl{
  font-family:'Shippori Mincho', serif;
  font-size:18px;
  color:var(--ink);
}
.news-row .ttl .tag{
  font-family:'Inter', sans-serif;
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--indigo);
  margin-right:14px;
  border:1px solid var(--indigo-soft);
  padding:4px 9px;
  border-radius:1px;
}
.news-row .arrow{
  font-family:'Cormorant', serif;
  font-style:italic;
  color:var(--grey);
  font-size:15px;
}
.news-empty{ padding:0 0 56px; color:var(--grey); font-size:14px; }

/* ===== Contact ===== */
.contact{
  background:var(--paper-warm);
}
.contact .section-pad{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:80px;
}
.contact h2{
  font-family:'Cormorant', serif;
  font-style:italic;
  font-weight:300;
  font-size:clamp(40px,5vw,68px);
  line-height:1.05;
  color:var(--ink);
}
.contact .label{ margin-bottom:24px; }
.contact-block + .contact-block{ margin-top:34px; }
.contact-block .ck{
  font-family:'Inter', sans-serif;
  font-size:10.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:8px;
  display:block;
}
.contact-block .cv{
  font-family:'Shippori Mincho', serif;
  font-size:17px;
  color:var(--ink);
}
.contact-block .cv a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }

/* ===== Footer ===== */
footer{
  padding:48px 56px 64px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line-soft);
}
footer .mark{
  font-family:'Cormorant', serif;
  font-size:18px;
  letter-spacing:0.16em;
  display:flex;
  align-items:center;
}
footer .label{ text-align:right; }

/* ===== Generic page (page.php / single.php) ===== */
.page-content{
  padding:200px 64px 160px;
  max-width:820px;
  margin:0 auto;
}
.page-content h1{
  font-family:'Cormorant', 'Shippori Mincho', serif;
  font-weight:300;
  font-style:italic;
  font-size:clamp(24px,3vw,34px);
  margin-bottom:32px;
  color:var(--ink);
}
.page-content .entry-content{
  font-size:16.5px;
  line-height:2;
  color:var(--grey);
}
.page-content .entry-content p + p{ margin-top:22px; }
.page-content .entry-content img{ margin:32px 0; }
.page-content .entry-content h2{
  font-family:'Cormorant', serif;
  font-style:italic;
  font-weight:400;
  font-size:26px;
  color:var(--ink);
  margin:48px 0 18px;
}
.page-content .entry-content h2:first-child{ margin-top:0; }
.page-content .entry-content h3{
  font-family:'Inter', sans-serif;
  font-size:13px;
  letter-spacing:0.08em;
  color:var(--ink);
  margin:32px 0 12px;
}
.page-content .entry-content ul,
.page-content .entry-content ol{
  margin:16px 0 16px 22px;
}
.page-content .entry-content li{ margin-bottom:8px; }
.page-content .entry-content a{ color:var(--indigo); border-bottom:1px solid var(--indigo-soft); text-decoration:none; }
.page-content .entry-meta{ margin-bottom:24px; }
.archive-list{ padding:200px 64px 120px; }

@media (max-width: 900px){
  .intro, .story-head, .contact .section-pad{ grid-template-columns:1fr; }
  .collection-grid{ grid-template-columns:1fr; padding:0 40px; }
  .col-right{ flex-direction:row; }
  .story-strip{ grid-template-columns:1fr; }
  .story-panel + .story-panel{ border-left:none; border-top:1px solid rgba(247,245,240,0.1);}
  .story-panel img{ height:auto; aspect-ratio:1/1; }
  .nav-right{ display:none; }
  .hamburger{ display:flex; }
  .page-content, .archive-list{ padding-left:48px; padding-right:40px; }
  .contact-page-grid{ grid-template-columns:1fr !important; }
  .stockist-text-list{ padding-left:48px; padding-right:40px; }
  .company-page .section-pad{ padding-left:48px; padding-right:40px; }
  .collection-head, .news-head{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }
  .collection-head .label,
  .news-head .label{ text-align:left; }
}

@media (max-width: 480px){
  .page-content, .archive-list{ padding-left:44px; padding-right:24px; }
  .stockist-text-list{ padding-left:44px; padding-right:24px; }
  .company-page .section-pad{ padding-left:44px; padding-right:24px; }
}

/* ===== お問い合わせページ ===== */
.contact-page .section-pad{ padding-top:200px; }
.contact-page-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:72px;
}
.contact-page-intro h1{
  font-family:'Cormorant', 'Shippori Mincho', serif;
  font-weight:300;
  font-style:italic;
  font-size:clamp(24px,3vw,34px);
  line-height:1.1;
  color:var(--ink);
  margin:14px 0 20px;
}
.contact-page-form .wpcf7-form{
  font-family:'Inter', sans-serif;
}
.contact-page-form .wpcf7-form p{ margin-bottom:20px; }
.contact-page-form .wpcf7-form label{
  display:block;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:8px;
}
.contact-page-form .wpcf7-form input[type="text"],
.contact-page-form .wpcf7-form input[type="email"],
.contact-page-form .wpcf7-form input[type="tel"],
.contact-page-form .wpcf7-form textarea{
  width:100%;
  border:none;
  border-bottom:1px solid var(--line);
  background:transparent;
  padding:10px 2px;
  font-family:'Shippori Mincho', serif;
  font-size:15px;
  color:var(--ink);
}
.contact-page-form .wpcf7-form textarea{ min-height:120px; }
.contact-page-form .wpcf7-form input:focus,
.contact-page-form .wpcf7-form textarea:focus{
  outline:none;
  border-bottom-color:var(--indigo);
}
.contact-page-form .wpcf7-form input[type="submit"]{
  appearance:none;
  -webkit-appearance:none;
  border-radius:0;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  padding:12px 32px;
  font-family:'Inter', sans-serif;
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background 0.3s, color 0.3s;
}
.contact-page-form .wpcf7-form input[type="submit"]:hover{
  background:var(--ink);
  color:var(--paper);
}
.contact-page-note{ margin-top:24px; font-size:13.5px; color:var(--grey); line-height:1.8; }
.wpcf7-not-valid-tip{ font-size:12px; color:#a33; margin-top:4px; }
.wpcf7-response-output{
  margin-top:20px !important;
  font-size:13px;
  padding:12px 16px !important;
}

/* ===== 取扱店舗ページ ===== */
.stockist-page .section-pad h1{
  font-family:'Cormorant', 'Shippori Mincho', serif;
  font-weight:300;
  font-style:italic;
  font-size:clamp(22px,2.4vw,32px);
  color:var(--ink);
  margin-top:12px;
}
.stockist-text-list{
  max-width:640px;
  padding:64px 56px 120px;
}
.stockist-area + .stockist-area{ margin-top:44px; }
.stockist-area-heading{
  font-family:'Inter', sans-serif;
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--indigo);
  border-bottom:1px solid var(--line-soft);
  padding-bottom:10px;
  margin-bottom:20px;
}
.stockist-entry{ padding:14px 0; }
.stockist-entry + .stockist-entry{ border-top:1px solid var(--line-soft); }
.stockist-name{
  font-family:'Shippori Mincho', serif;
  font-weight:600;
  font-size:15.5px;
  color:var(--ink);
  margin-bottom:6px;
}
.stockist-line{
  font-family:'Inter', sans-serif;
  font-size:13px;
  line-height:1.8;
  color:var(--grey);
}
.stockist-line a{
  color:var(--indigo);
  word-break:break-all;
}
.stockist-note{
  margin-top:56px;
  font-size:12px;
  line-height:1.9;
  color:var(--grey);
}

/* ===== 会社概要ページ ===== */
.company-page .section-pad{ padding-top:200px; }
.company-page h1{
  font-family:'Cormorant', 'Shippori Mincho', serif;
  font-weight:300;
  font-style:italic;
  font-size:clamp(22px,2.4vw,32px);
  color:var(--ink);
  margin-top:12px;
}
.company-intro{ max-width:640px; margin-top:24px; margin-bottom:48px; }
.company-table{ max-width:720px; border-top:1px solid var(--line-soft); }
.company-row{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:24px;
  padding:20px 0;
  border-bottom:1px solid var(--line-soft);
}
.company-row dt{
  font-family:'Inter', sans-serif;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--grey);
  padding-top:2px;
}
.company-row dd{
  font-family:'Shippori Mincho', serif;
  font-size:15px;
  line-height:1.85;
  color:var(--ink);
}
@media (max-width: 600px){
  .company-row{ grid-template-columns:1fr; gap:6px; }
}

/* =========================================================
   v2 — Apartamento風トップページ
   ========================================================= */
:root{
  --futura:'futura-pt','Jost','Futura','Zen Kaku Gothic New',sans-serif; /* Futura風 */
  --band:#EDE3C4;        /* ブランド紹介バンドの背景(淡いバター色) */
  --footer-bg:#E6DECB;   /* フッターのベージュ */
}

.ap-heading{
  font-family:'Cormorant','Shippori Mincho',serif;
  font-weight:400;
  font-size:clamp(30px,3.4vw,46px);
  text-align:center;
  color:var(--ink);
  max-width:1180px;
  margin:0 auto;
  padding-bottom:22px;
  border-bottom:1px solid var(--ink);
}
.pill{
  display:inline-block;
  font-family:'Inter',sans-serif;
  font-size:12px;
  letter-spacing:0.08em;
  color:var(--ink);
  text-decoration:none;
  border:1px solid var(--ink);
  border-radius:999px;
  padding:9px 28px;
  transition:background .25s, color .25s;
}
.pill:hover{ background:var(--ink); color:var(--paper); }
.text-link{
  font-family:'Inter',sans-serif;
  font-size:12px;
  letter-spacing:0.08em;
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:4px;
}

/* --- Latest releases --- */
.releases{ padding:110px 56px 110px; }
.release-grid{
  max-width:1180px;
  margin:72px auto 0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:28px;
  align-items:start;
}
.release{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.release-img{
  width:100%;
  aspect-ratio:4/5;
  display:flex; align-items:center; justify-content:center;
}
.release-img img{ width:auto; max-width:100%; height:auto; max-height:100%; object-fit:contain; }
.release-badge{
  margin-top:14px;
  font-family:'Inter',sans-serif;
  font-size:11px;
  letter-spacing:0.12em;
  color:var(--indigo);
}
.release h3{
  margin-top:12px;
  font-family:'Cormorant','Shippori Mincho',serif;
  font-weight:500;
  font-size:20px;
  line-height:1.4;
}
.release-price{ margin-top:10px; font-family:'Inter',sans-serif; font-size:13px; letter-spacing:0.04em; }
.release .pill{ margin-top:20px; }
.releases-foot{ text-align:center; margin-top:64px; }

/* --- ブランド紹介バンド --- */
.feature-band{
  background:var(--band);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  padding:100px 56px 100px 56px;
}
.feature-text{ max-width:560px; justify-self:end; }
.feature-text .label{ margin-bottom:22px; color:var(--ink); }
.feature-text h2{
  font-family:'Cormorant','Shippori Mincho',serif;
  font-style:italic; font-weight:400;
  font-size:clamp(34px,4vw,56px);
  line-height:1.15;
  margin-bottom:34px;
}
.feature-text .body-col p{ font-size:15.5px; line-height:2; color:var(--ink); max-width:none; }
.feature-text .signature{ margin-top:28px; }
.feature-text .pill{ margin-top:34px; }
.feature-img{ justify-self:start; width:100%; max-width:520px; }
.feature-img img{ width:100%; height:auto; max-height:640px; object-fit:contain; object-position:left center; }

/* --- Collection(新商品の画像をどんどん追加) --- */
.collection{ padding:110px 56px 120px; }
.collection-sub{
  max-width:1180px; margin:20px auto 0;
  display:flex; justify-content:center; gap:28px;
}
.look-grid{
  max-width:1180px;
  margin:56px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:56px 30px;
  align-items:start;
}
.look{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.look-img{ width:100%; overflow:hidden; background:#e5e1d6; }
.look-img img{ width:100%; height:auto; transition:transform 1.1s cubic-bezier(.16,1,.3,1); }
.look:hover .look-img img{ transform:scale(1.04); }
.look h3{
  margin-top:20px;
  font-family:'Cormorant','Shippori Mincho',serif;
  font-weight:400; font-size:22px; line-height:1.4;
}
.look .pill{ margin-top:18px; }

/* --- Footer:ベージュ背景・黒文字 --- */
footer{
  background:var(--footer-bg);
  color:var(--ink);
  border-top:none;
}
footer .label{ color:var(--ink); }

@media (max-width: 900px){
  .releases{ padding:80px 40px 80px 48px; }
  .release-grid{ grid-template-columns:repeat(2,1fr); gap:44px 20px; margin-top:48px; }
  .feature-band{ grid-template-columns:1fr; gap:48px; padding:72px 40px 72px 48px; }
  .feature-text{ justify-self:start; }
  .feature-img{ max-width:none; }
  .collection{ padding:80px 40px 80px 48px; }
  .look-grid{ grid-template-columns:repeat(2,1fr); gap:44px 20px; }
}
@media (max-width: 480px){
  .releases, .collection, .feature-band{ padding-right:24px; padding-left:44px; }
  .release h3{ font-size:17px; }
  .look-grid{ grid-template-columns:1fr; }
}

/* --- 文字:Futura風(Jost)に統一 --- */
.release h3, .look h3{
  font-family:var(--futura);
  font-weight:400;
  font-size:clamp(20px,2vw,26px);
  line-height:1.4;
  letter-spacing:0.02em;
}
.release-price, .release-badge{ font-family:var(--futura); }
.release-price{ font-size:16px; }
.release-badge{ font-size:12px; }
.feature-text .label{ font-family:var(--futura); letter-spacing:0.14em; }
.feature-text h2{
  font-family:var(--futura);
  font-style:italic; font-weight:500;
  letter-spacing:0.01em;
}
.feature-text .body-col p, .feature-text .signature{
  font-family:var(--futura);
  letter-spacing:0.04em;
  line-height:1.95;
}
.feature-text .signature{ font-style:italic; color:var(--ink); }
.pill, .text-link{ font-family:'Times New Roman','Shippori Mincho',serif; font-size:14px; letter-spacing:0; }
@media (max-width: 480px){
  .release h3, .look h3{ font-size:18px; }
}

/* --- コレクション:画像サイズを一定に --- */
.look-img{ aspect-ratio:3/4; }
.look-img img{ width:100%; height:100%; object-fit:cover; }
.look h3{ margin-top:22px; }
.look .pill{ margin-top:18px; }

/* 画像枠を必ず同じ比率(3:4)に固定 */
.look-img{ position:relative; width:100%; aspect-ratio:3/4; height:auto; overflow:hidden; }
.look-img img{ position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:cover; }

/* --- 全体をFutura風(Jost)に統一 --- */
.ap-heading{ font-family:var(--futura); font-weight:400; letter-spacing:0.01em; }
.pill, .text-link{ font-family:var(--futura); font-size:13px; letter-spacing:0.06em; }
.release-badge{ font-family:var(--futura); font-size:13px; letter-spacing:0.04em; }
.collection-sub .label{ font-family:var(--futura); }

/* 商品画像の枠を必ず同じ大きさに固定 */
.release-img{ position:relative; width:100%; aspect-ratio:4/5; display:block; }
.release-img img{ position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:contain; }

/* --- 参考サイトの文字の組み合わせ:見出し・ボタン・バッジは明朝系、商品名・価格はFutura風 --- */
:root{ --serif-en:'Times New Roman','Times','Shippori Mincho',serif; }
.ap-heading{ font-family:var(--serif-en); font-weight:400; font-size:clamp(34px,3.4vw,48px); letter-spacing:0; }
.pill, .text-link{ font-family:var(--serif-en); font-size:15px; letter-spacing:0; }
.release-badge{ font-family:var(--serif-en); font-size:14px; letter-spacing:0; color:#1f3fa0; }
.release h3, .look h3{
  font-family:var(--futura); font-weight:500;
  font-size:clamp(20px,1.95vw,28px); line-height:1.25; letter-spacing:0.04em;
}
.release-price{ font-family:var(--futura); font-size:clamp(16px,1.3vw,19px); letter-spacing:0.04em; margin-top:16px; }

.release-grid{ gap:36px; align-items:stretch; }
.release-img{ padding:0 12%; }
.release-img img{ inset:0 12%; width:76% !important; object-position:center bottom; }
.release .pill{ margin-top:auto; }
.release-price{ margin-bottom:28px; }
.release h3{ margin-top:14px; }
.collection-sub .label{ font-family:var(--serif-en); }
@media (max-width: 900px){ .release-img{ padding:0 8%; } .release-img img{ inset:0 8%; width:84% !important; } }

/* --- 商品スライダー(商品が増えたら矢印で横スライド) --- */
.release-viewport{ position:relative; max-width:1180px; margin:72px auto 0; }
.release-viewport .release-grid{
  display:flex; gap:36px; margin:0; max-width:none;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.release-viewport .release-grid::-webkit-scrollbar{ display:none; }
.release-viewport .release{ flex:0 0 calc((100% - 4 * 36px) / 5); scroll-snap-align:start; }
.rel-arrow{
  position:absolute; top:calc(50% - 90px); z-index:3;
  width:44px; height:90px; padding:0;
  background:none; border:none; cursor:pointer; color:#000;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .25s;
}
.rel-arrow[hidden]{ display:none; }
.rel-arrow svg{ width:26px; height:70px; }
.rel-arrow:hover{ opacity:.55; }
.rel-prev{ left:-90px; }
.rel-next{ right:-90px; }
@media (max-width: 1400px){ .rel-prev{ left:-52px; } .rel-next{ right:-52px; } }
@media (max-width: 900px){
  .release-viewport .release{ flex-basis:calc((100% - 20px) / 2); }
  .release-viewport .release-grid{ gap:20px; }
  .rel-prev{ left:-14px; } .rel-next{ right:-14px; }
  .rel-arrow{ width:32px; background:rgba(247,245,240,.75); }
  .rel-arrow svg{ width:18px; height:50px; }
}

.release h3{ margin-bottom:18px; }
.release .pill{ margin-top:auto; }
.release-price{ margin-bottom:24px; }

/* --- ブランド紹介バンド:フォントを元(Cormorant・Shippori Mincho)に戻す --- */
.feature-text .label{ font-family:'Inter',sans-serif; letter-spacing:0.22em; }
.feature-text h2{
  font-family:'Cormorant','Shippori Mincho',serif;
  font-style:italic; font-weight:400; letter-spacing:0;
}
.feature-text .body-col p{
  font-family:'Shippori Mincho',serif; letter-spacing:0; line-height:2; font-size:16px;
}
.feature-text .signature{
  font-family:'Cormorant',serif; font-style:italic; letter-spacing:0;
  color:var(--indigo); font-size:19px;
}

/* 商品名:Futura PT Bold(Adobe Fonts) */
.release h3, .look h3{
  font-family:'futura-pt-bold','futura-pt','Jost',sans-serif;
  font-weight:700; font-style:normal;
}

/* 商品名:Futura PT Medium(参考サイトと同じ)。プロジェクトにMediumを追加すると有効になる */
.release h3, .look h3{
  font-family:'futura-pt-medium','futura-pt','Jost',sans-serif;
  font-weight:500; font-style:normal;
}

/* メニューからのページ内リンク(#collection など)でスクロールした時、固定ヘッダーに隠れないようにする */
#releases, #about, #collection, #story, #news, #contact{ scroll-margin-top:70px; }

/* 参考サイトの商品名に合わせる:字間0.6px・行間35px(28px時)・下余白15px */
.release h3, .look h3{
  font-weight:500;
  font-size:clamp(20px,1.95vw,28px);
  line-height:1.25;
  letter-spacing:0.6px;
  margin-bottom:15px;
}

/* スマホ:ヒーローの高さを「実際に見えている画面の高さ(svh)」に合わせ、
   左の白い帯(スパイン)と同じ長さにする(iPhoneのアドレスバー/下部バー対策) */
@media (max-width: 900px){
  .hero{ height:100vh; height:100svh; max-height:none; }
}

/* =========================================================
   トップのスライド:細かいノイズ感 + ほんの少しのズーム
   - 位置のずれ:コマ落ち風に、気づくか気づかないか程度(±0.1%)
   - ズーム:表示中にゆっくり2%ほど寄る(画像の端を隠すため少し拡大して開始)
   - 粒子:やや強めで細かく動く
   ========================================================= */
@keyframes handheld{
  0%   { transform:translate3d(0,0,0); }
  14%  { transform:translate3d(-0.09%,0.06%,0); }
  28%  { transform:translate3d(0.07%,-0.08%,0); }
  42%  { transform:translate3d(-0.04%,-0.05%,0); }
  56%  { transform:translate3d(0.1%,0.05%,0); }
  70%  { transform:translate3d(-0.07%,0.09%,0); }
  84%  { transform:translate3d(0.03%,-0.03%,0); }
  100% { transform:translate3d(0,0,0); }
}
.hero-reel .frame.photo{
  scale:1.03;
  transition:opacity 1.2s ease, scale 8s linear;
  animation:handheld 1.1s steps(1,end) infinite;
}
.hero-reel .frame.photo:nth-child(even){ animation-duration:1.3s; }
.hero-reel .frame.photo.active{ scale:1.055; }

.hero-grain{
  opacity:0.75;
  animation:grainShift 0.28s steps(4) infinite, grainFlicker 0.9s steps(1) infinite;
}
@keyframes grainFlicker{
  0%{ opacity:0.75; } 20%{ opacity:0.62; } 40%{ opacity:0.82; } 60%{ opacity:0.68; } 80%{ opacity:0.78; } 100%{ opacity:0.75; }
}
@media (prefers-reduced-motion: reduce){
  .hero-reel .frame.photo{ animation:none; scale:1; transition:opacity 1.2s ease; }
  .hero-reel .frame.photo.active{ scale:1; }
  .hero-grain{ animation:none; }
}

/* 揺れ(位置のずれ)は無し。ノイズ(粒子)とゆっくりズームインのみ */
.hero-reel .frame.photo{ animation:none; }

/* --- コレクション:9枚(3行)まで表示し、残りは MORE で開く --- */
.look-grid.is-collapsed .look:nth-child(n+10){ display:none; }
.look-more{ text-align:center; margin-top:56px; }
.more-btn{
  background:none; border:none; cursor:pointer; color:var(--ink);
  font-family:var(--serif-en,'Times New Roman',serif); font-size:16px; letter-spacing:0.14em;
  display:inline-flex; align-items:center; gap:10px; padding:10px 18px;
}
.more-btn svg{ width:9px; height:15px; transition:transform .3s; }
.more-btn[aria-expanded="true"] svg{ transform:rotate(-90deg); }
.more-btn:hover{ opacity:.55; }

/* コンタクト欄のInstagramアイコン(細線・文字と同じ色) */
.contact-instagram{
  display:inline-flex; align-items:center; vertical-align:middle;
  margin-left:22px; color:var(--ink); border-bottom:none !important; text-decoration:none;
  transition:opacity .25s;
}
.contact-instagram:hover{ opacity:.55; }
.contact-block .cv a.contact-instagram{ border-bottom:none; }

/* フッターのロゴ:ベージュ背景なので黒にして見えるようにする */
footer .mark-logo--footer{ filter:brightness(0); }