/* =========================================================
   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;
}
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;
  width:100%;
  background:#15161a;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.hero-reel{position:absolute; inset:0; overflow:hidden; z-index:0;}
.hero-reel .frame{
  position:absolute; inset:0;
  opacity:0;
  transform:scale(1.02);
  filter:saturate(0.78) contrast(1.12) brightness(0.88) sepia(0.08);
  transition:opacity 0.45s ease, transform 1.6s ease-out;
  will-change:opacity, transform;
}
.hero-reel .frame.photo{
  background-size:cover;
  background-position:center 30%;
  background-repeat:no-repeat;
}
.hero-reel .frame.active{
  opacity:1;
  transform:scale(1.05);
}

/* 大きいモニターでは、写真の被写体が判別できないほど拡大されすぎないよう
   さらに控えめにする */
@media (min-width: 1600px){
  .hero-reel .frame{ transform:scale(1.01); }
  .hero-reel .frame.active{ transform:scale(1.03); }
}
.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;
}
.collection-grid figure{position:relative; overflow:hidden; background:#e5e1d6;}
.collection-grid img{
  height:100%;
  min-height:560px;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.collection-grid figure:hover img{ transform:scale(1.045); }
.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;
}
.col-right{ display:flex; flex-direction:column; gap:2px; }
.col-right figure{ flex:1; }
.col-right img{ min-height:279px; }

.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; }
  .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; }
}