/* ===========================================================
   浜町 緒ばた Obata — 多言語サイト共通CSS
   4言語 × 6ページ = 24ページ共通
   =========================================================== */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden;width:100%}
body{
  font-family:'Noto Sans JP','Noto Sans SC','Noto Sans TC','Noto Sans KR',sans-serif;
  font-weight:300;
  color:#333;
  background:#fff;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:opacity 0.3s,color 0.3s}
a:hover{opacity:0.7}
ul{list-style:none;padding:0;margin:0}
button{font-family:inherit}

/* ---------- Color tokens ---------- */
:root{
  --white:#ffffff;
  --paper:#fafaf7;        /* やや温かみのある紙白 */
  --ink:#1a1a1a;          /* 墨 */
  --text:#333333;
  --text-sub:#777777;
  --line:#e8e6e0;
  --moss:#4a6741;         /* 苔緑アクセント */
  --moss-dark:#3a5232;
  --gold:#a89060;         /* 控えめな金 */
}

/* ---------- Language-specific heading fonts ---------- */
.lang-en h1,.lang-en h2,.lang-en h3,.lang-en h4,.lang-en .serif{
  font-family:'Cormorant Garamond','Shippori Mincho','Noto Serif JP',serif;
  font-weight:500;
  letter-spacing:0.02em;
}
.lang-en{font-family:'Noto Sans JP','Noto Sans',sans-serif}

.lang-zh-cn h1,.lang-zh-cn h2,.lang-zh-cn h3,.lang-zh-cn h4,.lang-zh-cn .serif{
  font-family:'Noto Serif SC','Shippori Mincho',serif;
  font-weight:500;
}
.lang-zh-cn{font-family:'Noto Sans SC',sans-serif}

.lang-zh-tw h1,.lang-zh-tw h2,.lang-zh-tw h3,.lang-zh-tw h4,.lang-zh-tw .serif{
  font-family:'Noto Serif TC','Shippori Mincho',serif;
  font-weight:500;
}
.lang-zh-tw{font-family:'Noto Sans TC',sans-serif}

.lang-ko h1,.lang-ko h2,.lang-ko h3,.lang-ko h4,.lang-ko .serif{
  font-family:'Noto Serif KR','Shippori Mincho',serif;
  font-weight:500;
}
.lang-ko{font-family:'Noto Sans KR',sans-serif}

/* ---------- Headings (default) ---------- */
h1,h2,h3,h4{
  font-family:'Shippori Mincho','Noto Serif JP',serif;
  font-weight:500;
  color:var(--ink);
  line-height:1.4;
  margin:0 0 0.6em;
}
h1{font-size:clamp(28px,4vw,44px)}
h2{font-size:clamp(24px,3vw,34px)}
h3{font-size:clamp(18px,2vw,22px)}
p{margin:0 0 1em;font-size:15px}

/* ---------- Layout helpers ---------- */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:80px 0}
.section-narrow{max-width:880px;margin:0 auto;padding:0 24px}
.section-title{
  text-align:center;
  margin-bottom:48px;
}
.section-title .en{
  display:block;
  font-family:'Cormorant Garamond',serif;
  font-size:14px;
  letter-spacing:0.3em;
  color:var(--moss);
  margin-bottom:8px;
  text-transform:uppercase;
}

/* ---------- Header ---------- */
.hd{
  position:fixed;top:0;left:0;right:0;
  z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  transition:background 0.3s,border-color 0.3s,box-shadow 0.3s;
}
.hd.scrolled{
  background:rgba(255,255,255,0.98);
  border-bottom-color:var(--line);
  box-shadow:0 1px 12px rgba(0,0,0,0.04);
}
.hd-inner{
  max-width:1280px;
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  gap:24px;
}
.hd-logo{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-right:auto;
}
.hd-logo-jp{
  font-family:'Shippori Mincho',serif;
  font-size:24px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:0.05em;
}
.hd-logo-sub{
  font-family:'Cormorant Garamond',serif;
  font-size:14px;
  letter-spacing:0.2em;
  color:var(--text-sub);
}
.hd-nav{
  display:flex;
  gap:28px;
}
.hd-nav a{
  font-size:13px;
  letter-spacing:0.1em;
  color:var(--ink);
  position:relative;
  padding:6px 0;
}
.hd-nav a::after{
  content:'';
  position:absolute;
  left:50%;bottom:0;
  width:0;height:1px;
  background:var(--moss);
  transition:width 0.3s,left 0.3s;
}
.hd-nav a:hover{opacity:1}
.hd-nav a:hover::after{width:100%;left:0}

/* ---------- Language Switch ---------- */
.lang-switch{position:relative}
.lang-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:2px;
  padding:8px 14px;
  font-size:12px;
  letter-spacing:0.08em;
  color:var(--ink);
  cursor:pointer;
  transition:border-color 0.2s,background 0.2s;
}
.lang-btn:hover{border-color:var(--moss);background:rgba(74,103,65,0.04)}
.lang-globe{font-size:13px}
.lang-caret{font-size:10px;margin-left:2px;color:var(--text-sub)}
.lang-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:140px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 6px 20px rgba(0,0,0,0.06);
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:opacity 0.2s,transform 0.2s,visibility 0.2s;
}
.lang-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
.lang-menu li a{
  display:block;
  padding:10px 16px;
  font-size:13px;
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
.lang-menu li:last-child a{border-bottom:none}
.lang-menu li a:hover{background:var(--paper);opacity:1;color:var(--moss)}

/* ---------- Hamburger ---------- */
.hb{
  display:none;
  background:none;border:none;cursor:pointer;
  width:44px;height:44px;
  position:relative;
  z-index:120;
}
.hb i{
  display:block;
  width:22px;height:1.5px;
  background:var(--ink);
  position:absolute;
  left:11px;
  transition:all 0.3s;
}
.hb i:nth-child(1){top:15px}
.hb i:nth-child(2){top:21px}
.hb i:nth-child(3){top:27px}
.hb.on i:nth-child(1){top:21px;transform:rotate(45deg)}
.hb.on i:nth-child(2){opacity:0}
.hb.on i:nth-child(3){top:21px;transform:rotate(-45deg)}

/* ---------- Drawer (SP) ---------- */
.dr{
  display:none;
  position:fixed;inset:0;
  z-index:110;
  background:rgba(255,255,255,0.98);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:60px 24px;
}
.dr.open{display:flex}
.dr-nav{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  margin-bottom:40px;
}
.dr-nav a{
  font-family:'Shippori Mincho',serif;
  font-size:22px;
  color:var(--ink);
  letter-spacing:0.1em;
}
.dr-lang{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  padding-top:24px;
  border-top:1px solid var(--line);
  width:100%;
  max-width:300px;
}
.dr-lang a{
  font-size:13px;
  color:var(--text-sub);
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:2px;
}

/* ---------- Main ---------- */
.main{padding-top:70px}

/* ---------- Hero (Pattern B 風 / 1枚ドーン両対応) ---------- */
.hero{
  position:relative;
  min-height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  z-index:0;
}
.hero-bg::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.45) 100%);
}
.hero-inner{
  position:relative;
  z-index:1;
  text-align:center;
  color:#fff;
  padding:0 24px;
}
.hero-title{
  font-family:'Shippori Mincho',serif;
  font-size:clamp(36px,6vw,68px);
  font-weight:500;
  color:#fff;
  letter-spacing:0.1em;
  margin-bottom:16px;
  text-shadow:0 2px 20px rgba(0,0,0,0.3);
}
.hero-sub{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(14px,1.5vw,18px);
  letter-spacing:0.3em;
  text-transform:uppercase;
  opacity:0.95;
}

/* ---------- Hero slider (index top, 4-slide crossfade) ---------- */
.hero-slider{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation:heroFade 48s ease-in-out infinite}
.hero-slide.hs2{animation-delay:12s}
.hero-slide.hs3{animation-delay:24s}
.hero-slide.hs4{animation-delay:36s}
@keyframes heroFade{0%{opacity:0;transform:scale(1)}4%{opacity:1}25%{opacity:1}29%{opacity:0}100%{opacity:0;transform:scale(1.08)}}
.hero-slide.hs1{opacity:1}
.hero-slider::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.45) 100%)}
@media(prefers-reduced-motion:reduce){.hero-slide{animation:none}.hero-slide.hs1{opacity:1}}
.hs1{background-image:url('https://obata-mikuni.jp/official/wp-content/themes/obata/assets/images/top/slider02.jpg')}
.hs2{background-image:url('https://obata-mikuni.jp/official/wp-content/themes/obata/assets/images/top/slider04.jpg')}
.hs3{background-image:url('https://obata-mikuni.jp/official/wp-content/themes/obata/assets/images/top/slider01.jpg')}
.hs4{background-image:url('https://obata-mikuni.jp/official/wp-content/themes/obata/assets/images/top/slider03.jpg')}
@media(max-width:768px){
.hs1{background-image:url('https://obata-mikuni.jp/official/wp-content/themes/obata/assets/images/top/img_slide2.jpg')}
.hs2{background-image:url('https://obata-mikuni.jp/official/wp-content/themes/obata/assets/images/top/img_slide4.jpg')}
.hs3{background-image:url('https://obata-mikuni.jp/official/wp-content/themes/obata/assets/images/top/img_slide1.jpg')}
.hs4{background-image:url('https://obata-mikuni.jp/official/wp-content/themes/obata/assets/images/top/img_slide3.jpg')}
}

/* ---------- Hero (split: left fixed image + right content) ---------- */
.hero-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100vh;
}
.hero-split-left{
  background-size:cover;
  background-position:center;
  position:sticky;
  top:70px;
  height:calc(100vh - 70px);
}
.hero-split-right{
  padding:80px 48px;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ---------- Cards / Grids ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--line);padding:32px}
.card-img{aspect-ratio:4/3;background-size:cover;background-position:center;margin-bottom:20px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  padding:14px 36px;
  font-size:13px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  background:var(--ink);
  color:#fff;
  border:1px solid var(--ink);
  transition:background 0.3s,color 0.3s;
}
.btn:hover{background:#fff;color:var(--ink);opacity:1}
.btn-outline{
  background:transparent;
  color:var(--ink);
}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-moss{background:var(--moss);border-color:var(--moss)}
.btn-moss:hover{background:#fff;color:var(--moss)}

/* ---------- Photo strip ---------- */
.photo-strip{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:2px;
}
.photo-strip > div{
  aspect-ratio:1;
  background-size:cover;
  background-position:center;
}

/* ---------- Footer ---------- */
.ft{
  background:var(--ink);
  color:#d8d4c8;
  padding:64px 24px 24px;
  margin-top:80px;
}
.ft-inner{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:48px;
}
.ft-logo{
  margin-bottom:18px;
}
.ft-logo-jp{
  font-family:'Shippori Mincho',serif;
  font-size:24px;
  color:#fff;
  margin-right:10px;
}
.ft-logo-sub{
  font-family:'Cormorant Garamond',serif;
  font-size:13px;
  letter-spacing:0.2em;
  color:#a8a496;
}
.ft p{font-size:13px;color:#bdb8a8;margin-bottom:10px;line-height:1.7}
.ft a{color:#d8d4c8}
.ft a:hover{color:#fff;opacity:1}
.ft h4{
  font-size:13px;
  letter-spacing:0.2em;
  color:#fff;
  margin-bottom:16px;
  text-transform:uppercase;
}
.ft-ig,.ft-jp-link{
  display:block;
  font-size:13px;
  margin-bottom:8px;
}
.ft-reserve-btn{
  display:inline-block;
  padding:14px 28px;
  background:var(--moss);
  color:#fff;
  font-size:13px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  border:1px solid var(--moss);
}
.ft-reserve-btn:hover{background:transparent;color:var(--moss);opacity:1}
.ft-note{font-size:11px;color:#a8a496;margin-top:12px}
.ft-bottom{
  max-width:1200px;
  margin:48px auto 0;
  padding-top:24px;
  border-top:1px solid #2a2a2a;
  text-align:center;
}
.ft-bottom small{color:#888574;font-size:11px;letter-spacing:0.1em}

/* ---------- Fade-in ---------- */
.fi{opacity:0;transform:translateY(20px);transition:opacity 0.7s,transform 0.7s}
.fi.v{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .hd-nav{display:none}
  .hb{display:flex;align-items:center;justify-content:center}
  .lang-switch{margin-left:auto}
  .ft-inner{grid-template-columns:1fr;gap:32px}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .hero-split{grid-template-columns:1fr}
  .hero-split-left{position:relative;top:0;height:50vh}
  .hero-split-right{padding:48px 24px}
  .photo-strip{grid-template-columns:repeat(3,1fr)}
  .section{padding:56px 0}
}
@media(max-width:480px){
  .lang-current{display:none}
  .lang-btn{padding:8px 10px}
  body{font-size:14px}
  p{font-size:14px}
}

/* ---------- About section photo bg (index top, JP sec04準拠: 包丁/まな板) ---------- */
.about-photo{position:relative;background:url('https://obata-mikuni.jp/official/wp-content/themes/obata/assets/images/top/img_about.jpg') no-repeat center center/cover}
.about-photo::before{content:'';position:absolute;inset:0;background:rgba(18,20,16,0.62)}
.about-photo>.container{position:relative;z-index:1}
.about-photo .section-title .en{color:rgba(255,255,255,0.82)}
.about-photo h2,.about-photo p{color:#fff}
.about-photo .btn-outline{color:#fff;border-color:rgba(255,255,255,0.65)}
.about-photo .btn-outline:hover{background:rgba(255,255,255,0.15);color:#fff}

/* ===== Creative alignment to JP: hero center logo + full-bleed + transparent header ===== */
.main{padding-top:0}
.hero:has(.hero-slider){min-height:100vh}
.hero-logo{margin:0 0 18px}
.hero-logo img{width:172px;max-width:46vw;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 2px 18px rgba(0,0,0,0.4))}
/* header transparent over hero (top) */
.hd{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.hd .hd-logo-jp{color:#fff}
.hd .hd-logo-sub{color:rgba(255,255,255,0.85)}
.hd .hd-nav a{color:#fff}
.hd .hd-nav a::after{background:#fff}
.hd .lang-btn{color:#fff;border-color:rgba(255,255,255,0.5)}
.hd .lang-caret{color:rgba(255,255,255,0.8)}
.hd .hb i{background:#fff}
/* solid on scroll → dark text */
.hd.scrolled{background:rgba(255,255,255,0.98);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hd.scrolled .hd-logo-jp{color:var(--ink)}
.hd.scrolled .hd-logo-sub{color:var(--text-sub)}
.hd.scrolled .hd-nav a{color:var(--ink)}
.hd.scrolled .hd-nav a::after{background:var(--moss)}
.hd.scrolled .lang-btn{color:var(--ink);border-color:var(--line)}
.hd.scrolled .lang-caret{color:var(--text-sub)}
.hd.scrolled .hb i{background:var(--ink)}

/* ---------- Section photo bg (cuisine/room intro, JP-style) ---------- */
.sec-photo{position:relative;background-size:cover;background-position:center}
.sec-photo::before{content:'';position:absolute;inset:0;background:rgba(18,20,16,0.6)}
.sec-photo>.container{position:relative;z-index:1}
.sec-photo .section-title .en{color:rgba(255,255,255,0.82)}
.sec-photo h2,.sec-photo h3,.sec-photo p,.sec-photo li{color:#fff}
.sec-photo .btn-outline{color:#fff;border-color:rgba(255,255,255,0.65)}
.sec-photo .btn-outline:hover{background:rgba(255,255,255,0.15);color:#fff}

/* SP guards */
h1,h2,h3,h4,p,li,td,th,dt,dd{overflow-wrap:break-word}

/* SP: wide tables scroll inside instead of overflowing */
@media(max-width:600px){
  table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ---------- Four Seasons (cuisine) ---------- */
.seasons .section-title{margin-bottom:40px}
.season-row{align-items:center;margin-bottom:40px}
.season-row:last-child{margin-bottom:0}
.season-img{width:100%;aspect-ratio:133/82;background-size:cover;background-position:center}
.season-txt h3{font-size:1.5rem;font-weight:500;margin-bottom:16px}
.season-row.reverse .season-img{order:2}
@media(max-width:768px){.season-row.reverse .season-img{order:0}}

/* ---------- Room photo gallery ---------- */
.room-gallery>img{width:100%;display:block;margin-bottom:8px}
.room-thumbs{display:flex;gap:8px}
.room-thumbs img{flex:1;min-width:0;display:block}