/* =========================================================
Japanese Heritage - Template 003
Free HTML/CSS Template by MACHIKA WEB
---------------------------------------------------------
★初心者の方へ
最初はこの「初心者向け編集エリア」だけ変更すれば、
サイト全体の色・横幅・角の雰囲気を簡単に変えられます。
========================================================= */

/* =========================================================
★初心者向け編集エリア
========================================================= */
:root  {

  /* ★朱色：ボタン・アクセント */
  --main-color: #9b3a32;

  /* ★墨色：文字・フッター */
  --ink-color: #1f211f;

  /* ★金茶：小見出し・装飾 */
  --gold-color: #ad8a55;

  /* ★苔色：補助色 */
  --moss-color: #66705d;

  /* ★和紙のような背景色 */
  --paper-color: #f5f0e7;

  /* ★明るいカード背景 */
  --white-color: #fffdf8;

  /* ★通常の文字色 */
  --text-color: #494844;

  /* ★薄い文字色 */
  --muted-color: #77736c;

  /* ★枠線 */
  --border-color: #d9d0c1;

  /* ★サイト全体の最大横幅 */
  --site-width: 1180px;

  /* ★角丸。和風らしく少し控えめ */
  --radius: 18px;

}

/* =========================================================
ここから下は基本レイアウトです。
慣れるまでは変更しなくても大丈夫です。
========================================================= */
* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  color:var(--text-color);
  background:var(--paper-color);
  font-family:"Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  line-height:1.9;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration:none
}

img {
  display:block;
  max-width:100%;
  height:auto
}

button, input, textarea {
  font:inherit
}

.container {
  width:min(calc(100% - 44px), var(--site-width));
  margin-inline:auto
}

.section {
  padding:108px 0
}

.section-white {
  background:var(--white-color)
}

.section-ink {
  color:#ece4d7;
  background:var(--ink-color)
}

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--gold-color);
  font-family:Arial, sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:.22em
}

.eyebrow::before {
  content:"";
  width:34px;
  height:1px;
  background:currentColor
}

.section-title {
  margin:14px 0 0;
  color:var(--ink-color);
  font-size:clamp(34px, 4.8vw, 62px);
  font-weight:500;
  line-height:1.25;
  letter-spacing:.05em
}

.section-lead {
  max-width:720px;
  margin:20px 0 0;
  color:var(--muted-color);
  font-size:14px
}

.vertical-accent {
  writing-mode:vertical-rl;
  letter-spacing:.18em
}

/* ===== Header ===== */
.site-header {
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid rgba(217, 208, 193, .7);
  background:rgba(245, 240, 231, .93);
  backdrop-filter:blur(16px)
}

.header-inner {
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px
}

.logo {
  display:flex;
  align-items:center;
  gap:13px
}

.logo-mon {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid var(--ink-color);
  border-radius:50%;
  color:var(--main-color);
  font-size:20px
}

.logo-copy strong {
  display:block;
  color:var(--ink-color);
  font-size:18px;
  font-weight:600;
  letter-spacing:.18em
}

.logo-copy small {
  display:block;
  margin-top:-2px;
  color:var(--muted-color);
  font-family:Arial, sans-serif;
  font-size:8px;
  letter-spacing:.23em
}

.global-nav {
  display:flex;
  align-items:center;
  gap:24px;
  font-family:Arial, "Noto Sans JP", sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em
}

.global-nav a {
  position:relative;
  padding:8px 0
}

.global-nav a::after {
  content:"";
  position:absolute;
  left:50%;
  right:50%;
  bottom:2px;
  height:1px;
  background:var(--main-color);
  transition:left .2s, right .2s
}

.global-nav a:hover::after, .global-nav .is-current::after {
  left:0;
  right:0
}

.nav-button {
  padding:10px 16px!important;
  border:1px solid var(--ink-color)
}

.nav-button::after {
  display:none
}

/* ===== Hero ===== */
.hero {
  position:relative;
  min-height:790px;
  overflow:hidden;
  background:#817b6f
}

.hero-media {
  position:absolute;
  inset:0
}

.hero-media img {
  width:100%;
  height:100%;
  object-fit:cover
}

.hero-media::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(26, 27, 25, .78), rgba(26, 27, 25, .24) 58%, rgba(26, 27, 25, .1)), linear-gradient(0deg, rgba(20, 20, 18, .25), transparent 45%)
}

.hero-inner {
  position:relative;
  z-index:2;
  min-height:790px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:48px;
  align-items:end;
  padding:140px 0 92px;
  color:#fff
}

.hero-side {
  align-self:center;
  padding-top:30px;
  color:#eadfcd;
  font-size:11px
}

.hero-copy-wrap {
  max-width:780px
}

.hero-kicker {
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-family:Arial, sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:.25em
}

.hero-kicker::before {
  content:"";
  width:52px;
  height:1px;
  background:currentColor
}

.hero h1 {
  margin:24px 0 0;
  font-size:clamp(52px, 7.2vw, 96px);
  font-weight:500;
  line-height:1.12;
  letter-spacing:.08em;
  text-shadow:0 2px 20px rgba(0, 0, 0, .18)
}

.hero h1 span {
  display:block;
  margin-top:12px;
  font-family:Arial, sans-serif;
  font-size:.18em;
  font-weight:600;
  letter-spacing:.28em
}

.hero-text {
  max-width:600px;
  margin:28px 0 0;
  color:#efe7db;
  font-size:14px
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:34px
}

.button {
  min-height:50px;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  font-family:Arial, "Noto Sans JP", sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  transition:transform .2s, background .2s, color .2s
}

.button:hover {
  transform:translateY(-2px)
}

.button-light {
  color:var(--ink-color);
  background:#fffdf8
}

.button-outline-light {
  color:#fff;
  border:1px solid rgba(255, 255, 255, .65)
}

.button-dark {
  color:#fff;
  background:var(--ink-color)
}

.button-vermilion {
  color:#fff;
  background:var(--main-color)
}

.button-outline {
  color:var(--ink-color);
  border:1px solid var(--ink-color)
}

/* ===== Pattern band ===== */
.pattern-band {
  height:22px;
  background-color:var(--main-color);
  background-image:radial-gradient(circle at 10px -4px, transparent 12px, rgba(255, 255, 255, .16) 13px, transparent 14px), radial-gradient(circle at 10px 26px, transparent 12px, rgba(255, 255, 255, .13) 13px, transparent 14px);
  background-size:40px 22px
}

/* ===== Intro ===== */
.intro-grid {
  display:grid;
  grid-template-columns:.76fr 1.24fr;
  gap:90px;
  align-items:start
}

.intro-side {
  position:sticky;
  top:124px
}

.intro-copy .lead {
  margin-top:0;
  color:var(--ink-color);
  font-size:21px;
  line-height:2
}

.intro-copy p {
  color:var(--muted-color)
}

.seal {
  margin-top:34px;
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border:2px solid var(--main-color);
  color:var(--main-color);
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  transform:rotate(-3deg)
}

/* ===== Features ===== */
.feature-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:46px
}

.feature-card {
  position:relative;
  overflow:hidden;
  min-height:390px;
  border:1px solid var(--border-color);
  background:var(--white-color)
}

.feature-card img {
  width:100%;
  height:240px;
  object-fit:cover
}

.feature-card-body {
  padding:26px
}

.feature-card span {
  color:var(--gold-color);
  font-family:Arial, sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em
}

.feature-card h3 {
  margin:10px 0 0;
  color:var(--ink-color);
  font-size:24px;
  font-weight:500
}

.feature-card p {
  margin:10px 0 0;
  color:var(--muted-color);
  font-size:12px
}

/* ===== Split image/content ===== */
.split-block {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:stretch
}

.split-image {
  min-height:560px
}

.split-image img {
  width:100%;
  height:100%;
  object-fit:cover
}

.split-content {
  display:grid;
  align-content:center;
  padding:70px clamp(34px, 6vw, 92px);
  background:var(--ink-color);
  color:#d8d1c5
}

.split-content .section-title {
  color:#fff
}

.split-content p {
  color:#bdb5a8
}

.split-content .button {
  justify-self:start;
  margin-top:20px
}

/* ===== Gallery ===== */
.gallery-grid {
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  grid-template-rows:270px 270px;
  gap:16px;
  margin-top:46px
}

.gallery-item {
  overflow:hidden;
  background:#ddd
}

.gallery-item:first-child {
  grid-row:span 2
}

.gallery-item:last-child {
  grid-column:span 2
}

.gallery-item img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s
}

.gallery-item:hover img {
  transform:scale(1.03)
}

/* ===== Information ===== */
.info-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:start
}

.info-panel {
  padding:40px;
  border:1px solid var(--border-color);
  background:var(--white-color)
}

.info-list {
  margin:0
}

.info-list div {
  display:grid;
  grid-template-columns:120px 1fr;
  gap:22px;
  padding:17px 0;
  border-bottom:1px solid var(--border-color)
}

.info-list div:first-child {
  padding-top:0
}

.info-list dt {
  color:var(--ink-color);
  font-family:Arial, "Noto Sans JP", sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em
}

.info-list dd {
  margin:0;
  color:var(--muted-color);
  font-size:13px
}

.notice-list {
  margin:22px 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--border-color)
}

.notice-list a {
  display:grid;
  grid-template-columns:110px 82px 1fr auto;
  gap:15px;
  align-items:center;
  padding:16px 0;
  border-bottom:1px solid var(--border-color);
  font-size:12px
}

.notice-list time {
  font-family:Arial, sans-serif;
  color:var(--muted-color)
}

.notice-list span {
  color:var(--main-color);
  font-family:Arial, sans-serif;
  font-size:9px;
  font-weight:800
}

.notice-list strong {
  color:var(--ink-color);
  font-weight:500
}

/* ===== CTA ===== */
.cta {
  padding:80px 0;
  color:#eee5d8;
  background:var(--main-color)
}

.cta-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px
}

.cta h2 {
  margin:8px 0 0;
  color:#fff;
  font-size:clamp(32px, 4.3vw, 54px);
  font-weight:500;
  line-height:1.35
}

.cta p {
  margin:12px 0 0;
  color:#ead7d3;
  font-size:13px
}

/* ===== Subpage common ===== */
.page-hero {
  padding:90px 0 70px;
  border-bottom:1px solid var(--border-color);
  background:var(--white-color)
}

.breadcrumb {
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--muted-color);
  font-family:Arial, "Noto Sans JP", sans-serif;
  font-size:9px
}

.page-hero h1 {
  margin:22px 0 0;
  color:var(--ink-color);
  font-size:clamp(42px, 6vw, 76px);
  font-weight:500;
  line-height:1.22;
  letter-spacing:.08em
}

.page-hero h1 small {
  display:block;
  margin-top:12px;
  color:var(--gold-color);
  font-family:Arial, sans-serif;
  font-size:.16em;
  font-weight:800;
  letter-spacing:.28em
}

.page-hero p {
  max-width:680px;
  margin:22px 0 0;
  color:var(--muted-color);
  font-size:13px
}

.content-grid {
  display:grid;
  grid-template-columns:.74fr 1.26fr;
  gap:82px;
  align-items:start
}

.content-side {
  position:sticky;
  top:124px
}

.content-side h2 {
  margin:14px 0 0;
  color:var(--ink-color);
  font-size:clamp(32px, 4vw, 52px);
  font-weight:500;
  line-height:1.4
}

.content-main>.lead {
  margin-top:0;
  color:var(--ink-color);
  font-size:19px;
  line-height:2
}

.content-main p {
  color:var(--muted-color)
}

.wide-image {
  overflow:hidden;
  margin-bottom:46px
}

.wide-image img {
  width:100%;
  aspect-ratio:16/8;
  object-fit:cover
}

/* ===== About ===== */
.timeline {
  margin-top:42px;
  border-top:1px solid var(--border-color)
}

.timeline article {
  display:grid;
  grid-template-columns:110px 1fr;
  gap:24px;
  padding:23px 0;
  border-bottom:1px solid var(--border-color)
}

.timeline span {
  color:var(--gold-color);
  font-family:Arial, sans-serif;
  font-size:11px;
  font-weight:800
}

.timeline h3 {
  margin:0;
  color:var(--ink-color);
  font-size:20px;
  font-weight:500
}

.timeline p {
  margin:7px 0 0;
  font-size:12px
}

/* ===== Guide cards ===== */
.guide-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px
}

.guide-card {
  padding:30px;
  border:1px solid var(--border-color);
  background:var(--white-color)
}

.guide-card span {
  color:var(--gold-color);
  font-family:Arial, sans-serif;
  font-size:10px;
  font-weight:800
}

.guide-card h3 {
  margin:10px 0 0;
  color:var(--ink-color);
  font-size:24px;
  font-weight:500
}

.guide-card p {
  margin:10px 0 0;
  color:var(--muted-color);
  font-size:12px
}

.guide-card dl {
  margin:20px 0 0;
  border-top:1px solid var(--border-color)
}

.guide-card dl div {
  display:grid;
  grid-template-columns:90px 1fr;
  gap:14px;
  padding:10px 0;
  border-bottom:1px solid var(--border-color)
}

.guide-card dt {
  font-size:10px;
  color:var(--ink-color)
}

.guide-card dd {
  margin:0;
  font-size:11px;
  color:var(--muted-color)
}

/* ===== Gallery page ===== */
.gallery-page-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px
}

.gallery-page-grid figure {
  margin:0;
  overflow:hidden;
  border:1px solid var(--border-color);
  background:var(--white-color)
}

.gallery-page-grid figure:nth-child(1), .gallery-page-grid figure:nth-child(5) {
  grid-column:span 2
}

.gallery-page-grid img {
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover
}

.gallery-page-grid figcaption {
  padding:14px 16px;
  color:var(--muted-color);
  font-size:11px
}

/* ===== Information page ===== */
.info-table {
  width:100%;
  border-collapse:collapse;
  background:var(--white-color)
}

.info-table th, .info-table td {
  padding:18px 16px;
  border-bottom:1px solid var(--border-color);
  text-align:left;
  vertical-align:top
}

.info-table th {
  width:170px;
  color:var(--ink-color);
  background:#ece5da;
  font-family:Arial, "Noto Sans JP", sans-serif;
  font-size:10px;
  letter-spacing:.04em
}

.info-table td {
  color:var(--muted-color);
  font-size:13px
}

.note-box {
  margin-top:28px;
  padding:22px 24px;
  border-left:3px solid var(--main-color);
  background:#eee6da;
  color:var(--muted-color);
  font-size:12px
}

/* ===== Access ===== */
.map-placeholder {
  min-height:450px;
  display:grid;
  place-items:center;
  padding:40px;
  border:1px solid var(--border-color);
  background:linear-gradient(135deg, #d8d0c4, #f4efe6);
  text-align:center
}

.map-placeholder strong {
  display:block;
  color:var(--ink-color);
  font-size:28px;
  font-weight:500
}

.map-placeholder p {
  max-width:520px;
  color:var(--muted-color);
  font-size:12px
}

.route-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-top:30px
}

.route-card {
  padding:24px;
  border:1px solid var(--border-color);
  background:var(--white-color)
}

.route-card span {
  color:var(--main-color);
  font-family:Arial, sans-serif;
  font-size:10px;
  font-weight:800
}

.route-card h3 {
  margin:9px 0 0;
  color:var(--ink-color);
  font-size:20px;
  font-weight:500
}

.route-card p {
  margin:9px 0 0;
  color:var(--muted-color);
  font-size:11px
}

/* ===== Contact ===== */
.contact-alert {
  padding:22px 24px;
  border:1px solid #dcc9aa;
  background:#fff8e9;
  color:#6f6455;
  font-size:12px
}

.contact-options {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
  margin-top:28px
}

.contact-option {
  padding:30px;
  border:1px solid var(--border-color);
  background:var(--white-color)
}

.contact-option span {
  color:var(--gold-color);
  font-family:Arial, sans-serif;
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em
}

.contact-option h3 {
  margin:10px 0 0;
  color:var(--ink-color);
  font-size:25px;
  font-weight:500
}

.contact-option p {
  color:var(--muted-color);
  font-size:12px
}

.sample-form {
  margin-top:38px;
  padding:32px;
  border:1px solid var(--border-color);
  background:#eee7dc
}

.form-row {
  margin-top:20px
}

.form-row:first-child {
  margin-top:0
}

.form-row label {
  display:block;
  margin-bottom:7px;
  color:var(--ink-color);
  font-family:Arial, "Noto Sans JP", sans-serif;
  font-size:10px;
  font-weight:800
}

.form-row input, .form-row textarea {
  width:100%;
  padding:13px 14px;
  border:1px solid #cfc5b7;
  background:#fffdf8;
  color:var(--text-color)
}

.form-row textarea {
  min-height:150px;
  resize:vertical
}

.form-help {
  margin:13px 0 0;
  color:var(--muted-color);
  font-size:10px
}

/* ===== Footer ===== */
.site-footer {
  padding:64px 0 26px;
  color:#c9c2b7;
  background:var(--ink-color)
}

.footer-grid {
  display:grid;
  grid-template-columns:1fr auto;
  gap:50px
}

.footer-brand strong {
  display:block;
  color:#fff;
  font-size:24px;
  font-weight:500;
  letter-spacing:.16em
}

.footer-brand p {
  max-width:480px;
  color:#9f998f;
  font-size:11px
}

.footer-nav {
  display:grid;
  grid-template-columns:repeat(2, auto);
  gap:10px 28px;
  align-content:start;
  font-family:Arial, "Noto Sans JP", sans-serif;
  font-size:10px
}

.footer-nav a:hover {
  color:#fff
}

.footer-bottom {
  margin-top:46px;
  padding-top:20px;
  border-top:1px solid rgba(255, 255, 255, .1);
  color:#77736d;
  font-family:Arial, "Noto Sans JP", sans-serif;
  font-size:9px
}

.footer-bottom a {
  color:#cfc6b8;
  text-decoration:underline;
  text-underline-offset:3px
}

.footer-bottom a:hover {
  color:#fff
}

@media(max-width:900px) {
  .global-nav {
    gap:13px;
    font-size:9px
  }

  .hero-inner {
    grid-template-columns:1fr
  }

  .hero-side {
    display:none
  }

  .intro-grid, .info-grid, .content-grid {
    grid-template-columns:1fr;
    gap:45px
  }

  .intro-side, .content-side {
    position:static
  }

  .feature-grid {
    grid-template-columns:1fr 1fr
  }

  .split-block {
    grid-template-columns:1fr
  }

  .split-image {
    min-height:400px
  }

  .gallery-grid {
    grid-template-columns:1fr 1fr;
    grid-template-rows:290px 230px
  }

  .gallery-item:first-child {
    grid-row:auto
  }

  .gallery-item:last-child {
    grid-column:span 2
  }

  .route-grid {
    grid-template-columns:1fr 1fr
  }

  .footer-grid {
    grid-template-columns:1fr
  }

}

@media(max-width:680px) {
  .container {
    width:min(calc(100% - 28px), var(--site-width))
  }

  .header-inner {
    min-height:70px
  }

  .logo-copy small {
    display:none
  }

  .global-nav {
    display:grid;
    grid-template-columns:repeat(2, auto);
    gap:5px 12px;
    text-align:right
  }

  .global-nav .nav-button {
    display:none
  }

  .hero, .hero-inner {
    min-height:660px
  }

  .hero-inner {
    padding:100px 0 68px
  }

  .hero h1 {
    font-size:48px
  }

  .section {
    padding:76px 0
  }

  .feature-grid, .guide-grid, .contact-options, .route-grid {
    grid-template-columns:1fr
  }

  .gallery-grid {
    grid-template-columns:1fr;
    grid-template-rows:repeat(3, 250px)
  }

  .gallery-item:last-child {
    grid-column:auto
  }

  .gallery-page-grid {
    grid-template-columns:1fr
  }

  .gallery-page-grid figure:nth-child(1), .gallery-page-grid figure:nth-child(5) {
    grid-column:auto
  }

  .notice-list a {
    grid-template-columns:90px 1fr auto
  }

  .notice-list span {
    display:none
  }

  .cta-inner {
    display:grid
  }

  .info-list div {
    grid-template-columns:95px 1fr
  }

  .info-table th {
    width:110px
  }

  .footer-nav {
    grid-template-columns:1fr 1fr
  }

}