@charset "UTF-8";
:root{
  --ink:#2b2a26;          /* 墨色 */
  --paper:#f7f4ec;        /* 生成り */
  --paper-2:#efe9db;
  --roof:#3d4a3e;         /* 松葉色（瓦屋根の影） */
  --roof-deep:#2c362e;
  --dancheong-red:#a8503c;/* 弁柄色 */
  --dancheong-blue:#3f5b73;
  --gold:#b08d4f;
  --line:#d9d2c0;
  --white:#fffdf8;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans JP",sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.9;
  font-size:16px;
}
img{max-width:100%;display:block}
a{color:var(--dancheong-blue)}
h1,h2,h3,.serif{font-family:"Shippori Mincho",serif}

/* ---------- header ---------- */
.demo-banner{
  background:var(--dancheong-red);
  color:#fff;
  text-align:center;
  font-size:.8rem;
  padding:.45em 1em;
  letter-spacing:.05em;
}
header.site{
  background:var(--white);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.header-inner{
  max-width:1080px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:.55rem 1.2rem;flex-wrap:wrap;gap:.6rem;
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
/* ロゴ画像: 支給素材 assets_src/HP用ロゴ素材 まとめ.svg から切り出した images/logo.svg */
.brand .logo-img{height:40px;width:auto;display:block}
.brand .tagline{font-size:.72rem;color:#7a7466;letter-spacing:.08em}
nav.global ul{display:flex;gap:1.4rem;list-style:none;flex-wrap:wrap}
nav.global a{
  text-decoration:none;color:var(--ink);font-size:.9rem;letter-spacing:.06em;
  padding:.3em 0;border-bottom:2px solid transparent;transition:border-color .2s;
}
nav.global a:hover{border-color:var(--dancheong-red)}

/* ---------- 上部ユーティリティバー ---------- */
.topbar{
  background:var(--dancheong-red);color:#fff;
  font-size:.74rem;letter-spacing:.06em;
}
.topbar-inner{
  max-width:1080px;margin:0 auto;padding:.3rem 1.2rem;
  display:flex;align-items:center;justify-content:flex-end;gap:1rem;flex-wrap:wrap;
}
.topbar .util{display:flex;gap:1.2rem}
/* 薄めの白は opacity ではなく色で出す。opacity だと PDF 書き出し(WebKit createPDF)が要素を透明レイヤーに
   して矩形でクリップし、文字の端が 1px 弱切れる(earphone/marutoku のヘッダーラベルと同じ) */
.topbar a{color:rgba(255,255,255,.92);text-decoration:none}
.topbar a:hover{color:#fff;text-decoration:underline}

/* 丹青（タンチョン）帯：韓国の伝統彩色をイメージした識別ライン */
.dancheong-bar{
  height:4px;
  background:linear-gradient(90deg,
    var(--dancheong-red) 0 25%,
    var(--dancheong-blue) 25% 50%,
    var(--gold) 50% 75%,
    var(--roof) 75% 100%);
}

/* ---------- パンくず ---------- */
.breadcrumb{background:var(--paper-2);border-bottom:1px solid var(--line)}
.breadcrumb ol{
  max-width:1080px;margin:0 auto;padding:.3rem 1.2rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:.5em;
  list-style:none;font-size:.72rem;line-height:1.7;color:#7a7466;
}
.breadcrumb a{color:#7a7466;text-decoration:none}
.breadcrumb a:hover{color:var(--dancheong-red)}
/* 区切りの「>」の薄さは opacity ではなく色で出す(opacity は PDF 書き出しで矩形にクリップされ文字の端が切れる)。
   現在地の li は色が --ink に変わるので、その ::before も同じ色の 50% にして見た目を変えない */
.breadcrumb li+li::before{content:"\003E";margin-right:.5em;color:rgba(122,116,102,.5)}
.breadcrumb li[aria-current]{color:var(--ink);font-weight:700}
.breadcrumb li[aria-current]::before{color:rgba(43,42,38,.5)}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:clamp(340px,59vh,590px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:
    /* 写真: images/CREDITS.md 参照 */
    url("images/bukchon_alley_hero.jpg") center 55%/cover no-repeat,
    var(--roof-deep);
  color:#fff;
  padding:3.2rem 1.5rem 4rem;
  text-align:center;
  overflow:hidden;
}
/* 上部は青空を残し、下側だけ落として文字を読ませる */
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(18,24,20,.46) 0%,
    rgba(18,24,20,.18) 28%,
    rgba(18,24,20,.30) 55%,
    rgba(18,24,20,.62) 100%);
}
.hero > *{position:relative;z-index:1}
.hero .kicker{
  display:inline-block;
  background:rgba(168,80,60,.85);
  border:1px solid rgba(255,255,255,.45);
  padding:.28em 1.4em;font-size:.74rem;letter-spacing:.32em;text-indent:.32em;
  margin-bottom:.9rem;
}
.hero h1{
  /* 2026-09-11「韓国」をすこし大きく: 上限を 6.8rem → 8.5rem(1.25倍)。PC 幅ではこの上限で決まる */
  font-size:clamp(3.2rem,11vw,8.5rem);
  font-weight:700;letter-spacing:.16em;text-indent:.16em;line-height:1.06;
  text-shadow:0 3px 22px rgba(0,0,0,.55);
}
.hero .sub{
  font-family:"Shippori Mincho",serif;
  margin-top:.55rem;
  font-size:clamp(.95rem,2.8vw,1.44rem);
  letter-spacing:.46em;text-indent:.46em;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.hero .sub::before,.hero .sub::after{
  content:"";display:inline-block;vertical-align:middle;
  width:clamp(28px,7vw,64px);height:1px;background:rgba(255,255,255,.7);
  margin:0 1.1em .28em;
}
.hero .sub::after{margin-left:.6em}
.hero .lead-box{
  margin:1.15rem auto 0;max-width:820px;
  background:rgba(22,28,23,.58);
  border:1px solid rgba(255,255,255,.22);
  padding:.8rem 1.3rem;
  font-size:.94rem;line-height:1.8;letter-spacing:.03em;text-align:center;
}
.hero .roofline{
  position:absolute;left:0;right:0;bottom:-1px;height:28px;z-index:2;
  background:var(--white);
  clip-path:polygon(0 100%,100% 100%,100% 45%,50% 0,0 45%);
}

/* ---------- クイックナビ（アイコン行） ---------- */
.quicknav{background:var(--white);border-bottom:1px solid var(--line)}
.quicknav ul{
  max-width:1080px;margin:0 auto;padding:0 1.2rem;
  display:grid;grid-template-columns:repeat(4,1fr);list-style:none;
}
.quicknav a{
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  padding:.8rem .5rem;text-decoration:none;color:var(--ink);
  font-size:.92rem;letter-spacing:.08em;
  border-right:1px solid var(--line);
  transition:background .2s;
}
.quicknav li:first-child a{border-left:1px solid var(--line)}
.quicknav a:hover{background:var(--paper-2)}
.quicknav .ico{
  flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--paper-2);color:var(--dancheong-red);
  display:flex;align-items:center;justify-content:center;
}
.quicknav .ico svg{width:17px;height:17px}

/* ---------- layout ---------- */
main{max-width:1080px;margin:0 auto;padding:0 1.2rem}
section{padding:4.2rem 0 1rem}
.sec-head{text-align:center;margin-bottom:2.6rem}
.sec-head .eng{
  font-size:.75rem;letter-spacing:.4em;color:var(--gold);
  text-transform:uppercase;display:block;margin-bottom:.5rem;
}
.sec-head h2{
  font-size:clamp(1.5rem,4vw,2.1rem);letter-spacing:.15em;font-weight:700;
}
.sec-head h2::after{
  content:"";display:block;width:56px;height:3px;
  background:var(--dancheong-red);margin:.9rem auto 0;
}

/* intro */
.intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2.4rem;align-items:center}
.intro-grid .photo{
  border:1px solid var(--line);background:var(--paper-2);
  padding:.6rem;box-shadow:6px 6px 0 var(--paper-2);
}
.intro-grid .photo img{aspect-ratio:4/3;object-fit:cover;width:100%}
.intro-grid .photo figcaption{font-size:.75rem;color:#7a7466;padding-top:.5rem;text-align:right}
.intro-text p+p{margin-top:1em}
.intro-text .first-letter{color:var(--dancheong-red);font-weight:700}

.fact-box{
  margin-top:1.6rem;border:1px solid var(--line);background:var(--white);
  padding:1.2rem 1.4rem;font-size:.88rem;
}
.fact-box dt{font-weight:700;color:var(--roof);float:left;width:7.5em}
.fact-box dd{margin-left:8em;margin-bottom:.35em}

/* highlights */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem}
.card{
  background:var(--white);border:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .2s,box-shadow .2s;
}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(43,42,38,.12)}
.card .thumb{
  height:150px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:"Shippori Mincho",serif;font-size:1.3rem;letter-spacing:.2em;
}
.thumb-1{background:linear-gradient(135deg,#3d4a3e,#5c6e5a)}
.thumb-2{background:linear-gradient(135deg,#3f5b73,#6b8399)}
.thumb-3{background:linear-gradient(135deg,#a8503c,#c07a5f)}
.thumb-4{background:linear-gradient(135deg,#b08d4f,#cbb27e)}
.card .thumb.photo{padding:0}
.card .thumb.photo img{width:100%;height:150px;object-fit:cover}
.card .body{padding:1.2rem 1.3rem 1.4rem;flex:1}
.card h3{font-size:1.05rem;letter-spacing:.08em;margin-bottom:.5rem;color:var(--roof-deep)}
.card p{font-size:.88rem;color:#4c483f}

/* history timeline */
.timeline{border-left:3px solid var(--gold);margin-left:.6rem;padding-left:1.6rem}
.timeline li{list-style:none;position:relative;padding-bottom:1.6rem}
.timeline li::before{
  content:"";position:absolute;left:-2.05rem;top:.45em;
  width:13px;height:13px;border-radius:50%;
  background:var(--paper);border:3px solid var(--dancheong-red);
}
.timeline .era{
  font-family:"Shippori Mincho",serif;font-weight:700;
  color:var(--dancheong-red);letter-spacing:.08em;display:block;
}
.timeline p{font-size:.9rem}

/* gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.gallery-grid figure{
  background:var(--white);border:1px solid var(--line);
  padding:.5rem;margin:0;
}
.gallery-grid img{width:100%;aspect-ratio:3/2;object-fit:cover}
.gallery-grid figcaption{font-size:.75rem;color:#7a7466;padding-top:.45rem;text-align:right}

/* manners */
/* ※ .manners は main の外（body直下）にあるため負マージン不要（付けると横はみ出しの原因になる） */
.manners{background:var(--roof);color:#f2efe6;padding:4.2rem 1.2rem 4.6rem}
.manners-inner{max-width:1080px;margin:0 auto}
.manners .sec-head h2{color:#fff}
.manners .sec-head .eng{color:#d8c894}
.manner-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem}
.manner-item{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  padding:1.4rem 1.4rem 1.5rem;
}
.manner-item .num{
  font-family:"Shippori Mincho",serif;font-size:1.6rem;color:#d8c894;
  display:block;line-height:1;margin-bottom:.6rem;
}
.manner-item h3{font-size:1rem;letter-spacing:.08em;margin-bottom:.4rem;color:#fff}
.manner-item p{font-size:.85rem;color:rgba(242,239,230,.9)}  /* .manners の #f2efe6 を 90%。opacity は PDF でクリップされるので使わない */
.manners .note{
  margin-top:2rem;font-size:.85rem;text-align:center;color:rgba(242,239,230,.85);letter-spacing:.05em;
}

/* access */
.access-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.access-table{width:100%;border-collapse:collapse;background:var(--white);font-size:.9rem}
.access-table th,.access-table td{
  border:1px solid var(--line);padding:.75em 1em;text-align:left;vertical-align:top;
}
.access-table th{
  background:var(--paper-2);width:9em;font-weight:700;color:var(--roof-deep);
  letter-spacing:.05em;white-space:nowrap;
}
.map-placeholder{
  border:1px dashed var(--gold);background:var(--white);
  min-height:280px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.6rem;
  color:#8a8272;font-size:.85rem;letter-spacing:.08em;text-align:center;padding:1rem;
}
.map-placeholder .pin{font-size:2rem;color:var(--dancheong-red)}

/* contact */
.contact-box{
  background:var(--white);border:1px solid var(--line);
  padding:1.8rem 2rem;text-align:center;margin-top:2.4rem;
}
.contact-box h3{letter-spacing:.12em;margin-bottom:.6rem}
.contact-box p{font-size:.9rem}
.contact-box .dummy{color:#8a8272;font-size:.8rem}

/* footer */
footer.site{
  margin-top:4.5rem;background:var(--roof-deep);color:#cfc9b8;
  padding:2.6rem 1.2rem 2.2rem;font-size:.82rem;
}
.footer-inner{max-width:1080px;margin:0 auto;text-align:center}
.footer-inner .logo{margin-bottom:.9rem}
/* 濃色地に載せるため白ヌキ版(images/logo-white.svg)を使う。CSS の filter で白くする方式は
   PDF 書き出し(WebKit createPDF)でフィルタが落ちて黒いロゴになるので使わない(site01 と同じ) */
.footer-inner .logo-img{height:34px;width:auto;margin:0 auto;opacity:.92}
.footer-links{display:flex;justify-content:center;gap:1.6rem;flex-wrap:wrap;margin-bottom:1.2rem}
.footer-links a{color:#cfc9b8;text-decoration:none;font-size:.8rem}
.footer-links a:hover{color:#fff}
.copyright{color:rgba(207,201,184,.7)}  /* footer.site の #cfc9b8 を 70%。opacity は PDF でクリップされるので使わない */

/* responsive */
@media (max-width:760px){
  .intro-grid,.access-grid{grid-template-columns:1fr}
  nav.global ul{gap:.9rem}
  .hero{padding:3.6rem 1.2rem 5rem;min-height:clamp(340px,52vh,480px)}
  .quicknav ul{grid-template-columns:repeat(2,1fr);padding:0}
  .quicknav a{border-left:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.85rem;gap:.5rem}
  .quicknav li:nth-child(n+3) a{border-bottom:none}
  .fact-box dt{float:none;width:auto}
  .fact-box dd{margin-left:0;margin-bottom:.6em}
}
@media (max-width:480px){
  body{font-size:15px}
  .header-inner{padding:.7rem 1rem}
  nav.global ul{gap:.7rem}
  nav.global a{font-size:.85rem}
  .topbar-inner{padding:.45rem 1rem;font-size:.72rem;gap:.5rem}
  .breadcrumb ol{padding:.5rem 1rem}
  .hero{padding:3.2rem 1rem 4.4rem}
  .hero h1{letter-spacing:.1em;text-indent:.1em}
  .hero .kicker{letter-spacing:.2em;text-indent:.2em;font-size:.7rem}
  .hero .lead-box{font-size:.8rem;padding:.9rem 1.1rem}
  main{padding:0 1rem}
  section{padding:3.2rem 0 1rem}
  .sec-head{margin-bottom:2rem}
  .sec-head h2{letter-spacing:.1em}
  .fact-box{padding:1rem 1.1rem}
  .manners{padding:3.4rem 1rem 3.8rem}
  .access-table th{width:auto;min-width:5em;white-space:normal;padding:.65em .7em}
  .access-table td{padding:.65em .8em}
  .contact-box{padding:1.4rem 1.1rem}
  .footer-links{gap:1rem}
}