:root{
  --green-main:#8dc63f;
  --green-dark:#5da22e;
  --green-light:#eef7e1;
  --orange:#f6a832;
  --yellow:#ffd966;
  --text-dark:#4a4a3a;
  --cream:#fffdf5;
  --white:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  background:var(--cream);
  color:var(--text-dark);
  line-height:1.7;
}
a{color:var(--green-dark);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}

.logo{
  font-size:1.4rem;font-weight:bold;
  display:flex;align-items:center;gap:10px;
}
.logo-icon{
  background:#fff;color:var(--green-dark);
  border-radius:50%;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
}

.hero{
  background:
    linear-gradient(rgba(93,162,46,0.55),rgba(141,198,63,0.4)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 20px, transparent 20px 40px);
  background-color:#a9d46e;
  color:#fff;
  padding:70px 20px;
  text-align:center;
}
.hero h1{font-size:2.2rem;margin-bottom:14px;text-shadow:1px 1px 4px rgba(0,0,0,0.2);}
.hero p{font-size:1.1rem;}
.hero-badge{
  display:inline-block;margin-top:20px;
  background:var(--orange);
  padding:10px 26px;border-radius:30px;
  font-weight:bold;box-shadow:0 3px 6px rgba(0,0,0,0.15);
}

main{max-width:1100px;margin:0 auto;padding:40px 20px;}
section{margin-bottom:50px;}
.section-title{
  display:flex;align-items:center;gap:12px;
  font-size:1.5rem;color:var(--green-dark);
  border-bottom:3px solid var(--yellow);
  padding-bottom:10px;margin-bottom:24px;
}
.section-title::before{
  content:"";width:14px;height:14px;background:var(--orange);
  border-radius:50%;display:inline-block;
}

.info-card{
  background:var(--white);border-radius:16px;padding:24px;
  box-shadow:0 3px 10px rgba(0,0,0,0.06);
  border-left:6px solid var(--green-main);
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}
.card{
  background:var(--white);border-radius:16px;padding:20px;
  box-shadow:0 3px 10px rgba(0,0,0,0.06);
  transition:0.25s;border:2px solid var(--green-light);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 16px rgba(0,0,0,0.12);
  border-color:var(--orange);
}
.card h3{
  color:var(--green-dark);margin-bottom:8px;font-size:1.05rem;
  display:flex;align-items:center;gap:8px;
}
.card h3 .dot{
  width:10px;height:10px;background:var(--orange);border-radius:50%;
  display:inline-block;flex:none;
}
.card p{font-size:0.92rem;color:#555;}

table{
  width:100%;border-collapse:collapse;background:var(--white);
  border-radius:12px;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,0.06);
}
table caption{text-align:left;font-weight:bold;color:var(--green-dark);margin-bottom:8px;}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid #eee;font-size:0.92rem;}
th{background:var(--green-light);color:var(--green-dark);}
tr:hover td{background:#fbfbe8;}

.notice-box{
  background:#fff8e1;border:2px dashed var(--yellow);
  border-radius:14px;padding:18px 22px;font-size:0.9rem;color:#7a6a20;
}
.notice-box strong{color:var(--orange);}

.link-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;
}
.link-list a{
  display:flex;align-items:center;gap:10px;background:var(--white);
  padding:14px 16px;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,0.05);
  color:var(--text-dark);font-size:0.9rem;border-left:4px solid var(--orange);
  transition:0.2s;
}
.link-list a:hover{
  background:var(--green-light);text-decoration:none;border-left-color:var(--green-dark);
}
.link-list a::before{content:"🔗";flex:none;}

footer{background:var(--green-dark);color:#fff;text-align:center;padding:30px 20px;font-size:0.85rem;}
footer a{color:#fff8d6;}

.disclaimer{max-width:1100px;margin:0 auto 30px;padding:0 20px;}
.disclaimer p{font-size:0.8rem;color:#888;background:#f3f3e8;padding:12px 16px;border-radius:10px;}

@media (max-width:600px){
  .hero h1{font-size:1.6rem;}
  nav ul{justify-content:center;width:100%;}
  .header-inner{flex-direction:column;gap:12px;}
}

.contact-button{
  display:inline-block;
  background:var(--orange);
  color:#fff;
  font-weight:bold;
  font-size:1rem;
  padding:14px 40px;
  border-radius:30px;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
  transition:0.25s;
}
.contact-button:hover{
  background:var(--green-dark);
  text-decoration:none;
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,0.2);
}
.hero {
  background-image: url('/images/gaikan.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* 画像の上に文字を載せるため、暗めのオーバーレイを重ねて視認性を確保 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 0;
}

.hero h1,
.hero p,
.hero-badge {
  position: relative;
  z-index: 1;
  color: #fff;
}

.sitemap {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}
.sitemap-block {
  flex: 1;
  min-width: 180px;
}
.sitemap-block h4 {
  color: var(--yellow);
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 6px;
  font-size: 1rem;
}
.sitemap-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sitemap-block ul li {
  margin-bottom: 8px;
}
.sitemap-block ul li a {
  color: #fff8d6; /* 既存の footer a と統一 */
  text-decoration: none;
  font-size: 0.88rem;
}
.sitemap-block ul li a:hover {
  text-decoration: underline;
  color: #fff;
}
.footer-bottom {
  text-align: center;
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.25);
  font-size: 0.85rem;
  color: #e8f5d9;
}

/* ==========================================================
   動きの追加（アニメーション・トランジション強化）
   ========================================================== */

html {
  scroll-behavior: smooth;
}

/* --- ページ読み込み時：セクションのフェードイン --- */
section {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeInUp 0.8s ease forwards;
}
section:nth-of-type(1) { animation-delay: 0.05s; }
section:nth-of-type(2) { animation-delay: 0.1s; }
section:nth-of-type(3) { animation-delay: 0.15s; }
section:nth-of-type(4) { animation-delay: 0.2s; }
section:nth-of-type(5) { animation-delay: 0.25s; }
section:nth-of-type(6) { animation-delay: 0.3s; }
section:nth-of-type(7) { animation-delay: 0.35s; }

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* --- ヒーロー：背景オーバーレイのゆらぎ + 文字のフェードイン --- */
.hero::before {
  animation: overlayPulse 6s ease-in-out infinite;
}
@keyframes overlayPulse {
  0%, 100% { background-color: rgba(0,0,0,0.45); }
  50%      { background-color: rgba(0,0,0,0.3); }
}
.hero h1 {
  opacity: 0;
  animation: fadeInUp 0.9s ease 0.2s forwards;
}
.hero p {
  opacity: 0;
  animation: fadeInUp 0.9s ease 0.4s forwards;
}
.hero-badge {
  opacity: 0;
  animation: fadeInUp 0.9s ease 0.6s forwards, badgeBounce 2s ease-in-out 1.5s infinite;
}
@keyframes badgeBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* --- ヘッダー：ロゴアイコンの軽い回転演出 --- */
.logo-icon {
  transition: transform 0.4s ease;
}
.logo:hover .logo-icon {
  transform: rotate(15deg) scale(1.1);
}

/* --- ナビゲーション：ボタンの浮き上がり --- */
/* ヘッダー全体 */
header {
  background: linear-gradient(135deg, var(--green-main), var(--green-dark));
  padding: 0 20px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
  position: sticky; top: 0; z-index: 100;
}

/* 内側レイアウト */
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  min-height: 80px;
}

/* ロゴエリア */
.logo {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

/* ナビ全体 */
nav {
  display: flex;
  align-items: center;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  height: 100%;
  align-items: stretch;
}

nav ul li {
  display: flex;
  align-items: stretch;
}

/* ナビリンク */
nav a {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.92);
  background: transparent;
  padding: 0 18px;
  font-size: 1.05rem;   /* 0.9rem → 1.05rem に変更 */
  font-weight: 500;
  letter-spacing: 0.04em;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  white-space: nowrap;
}

@media (max-width: 768px) {
  nav a {
    font-size: 1.1rem;
  }
}

nav a:hover {
  color: #fff;
  background: rgba(255,255,255,0.12);
  border-bottom-color: var(--yellow);
  text-decoration: none;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .header-inner {
    flex-direction: column;
    align-items: center;
    min-height: auto;
    padding: 12px 0;
  }
  nav ul {
    gap: 4px;
    padding: 8px 0;
  }
  nav a {
    padding: 8px 12px;
    border-bottom: none;
    border-radius: 20px;
    background: rgba(255,255,255,0.12);
  }
  nav a:hover {
    background: var(--orange);
  }
}

/* --- section-title：丸ポチが登場時にポップする --- */
.section-title::before {
  animation: dotPop 0.5s ease;
}
@keyframes dotPop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* --- カード：ホバー時の浮き上がりを強化 + アイコンドットの拍動 --- */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 22px rgba(0,0,0,0.15);
}
.card img {
  transition: transform 0.5s ease;
  overflow: hidden;
}
.card:hover img {
  transform: scale(1.06);
}
.card h3 .dot {
  transition: transform 0.3s ease;
}
.card:hover h3 .dot {
  transform: scale(1.5);
}

/* --- テーブル行：ホバー時の色変化を滑らかに --- */
tr td {
  transition: background 0.2s ease;
}

/* --- 関連リンク一覧：ホバーでアイコンが揺れる --- */
.link-list a {
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.link-list a:hover {
  transform: translateX(4px);
}
.link-list a::before {
  display: inline-block;
  transition: transform 0.3s ease;
}
.link-list a:hover::before {
  transform: rotate(-15deg) scale(1.2);
}

/* --- お問い合わせボタン：拍動 + ホバー拡大 --- */
.contact-button {
  animation: ctaPulse 2.4s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
  50%      { box-shadow: 0 4px 18px rgba(246,168,50,0.5); }
}
.contact-button:hover {
  transform: translateY(-3px) scale(1.05);
  animation-play-state: paused;
}

/* --- フッター：サイトマップリンクにアンダーラインが伸びる演出 --- */
.sitemap-block ul li a {
  position: relative;
  padding-bottom: 2px;
}
.sitemap-block ul li a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0;
  height: 1px;
  background: var(--yellow);
  transition: width 0.3s ease;
}
.sitemap-block ul li a:hover::after {
  width: 100%;
}

/* --- notice-box：点線ボーダーがゆっくり動く --- */
.notice-box {
  background-image:
    linear-gradient(90deg, var(--yellow) 50%, transparent 50%),
    linear-gradient(90deg, var(--yellow) 50%, transparent 50%),
    linear-gradient(0deg, var(--yellow) 50%, transparent 50%),
    linear-gradient(0deg, var(--yellow) 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 12px 2px, 12px 2px, 2px 12px, 2px 12px;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  border: none;
  animation: borderMarch 20s linear infinite;
}
@keyframes borderMarch {
  to { background-position: 100px 0, -100px 100%, 0 -100px, 100% 100px; }
}

/* --- アクセシビリティ配慮：動きを抑えたい人向け --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

.notice-list {
  display: grid;
  gap: 12px;
}

.notice-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-left: 4px solid #8dcc25;
  border-radius: 10px;
  background: #fff;
  color: #4f9b2e;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.notice-thumbnail {
  width: 160px;
  height: 100px;
  flex: 0 0 160px;
  display: block;
  object-fit: cover;
  border-radius: 6px;
  background: #eef1f3;
}

.no-image {
  display: grid;
  place-items: center;
  color: #999;
  font-size: .75rem;
}

.notice-card-content {
  min-width: 0;
}

.notice-card-content time {
  display: block;
  margin-bottom: 8px;
  color: #888;
  font-size: .72rem;
}

.notice-card-content h3 {
  margin: 0;
  overflow: hidden;
  color: #4f9b2e;
  font-size: .95rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .notice-thumbnail {
    width: 100px;
    height: 65px;
    flex-basis: 100px;
  }
}

/* アクセスセクション */
.access-flex {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: stretch;
}
.access-flex .info-card {
  flex: 1;
  min-width: 280px;
}
.map-wrap {
  flex: 1;
  min-width: 280px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
}
.map-wrap iframe {
  width: 100%;
  flex: 1;
  min-height: 280px;
  border: 0;
  display: block;
}

/* =========================
   Font size adjustment
   佐倉市ページに近い見やすい文字サイズ
========================= */

/* PC・タブレット基準 */
body {
    font-size: 17px;
}

/* 本文・表・リスト */
p,
li,
address,
table,
dt,
dd,
th,
td {
    font-size: 1rem;
    line-height: 1.7;
}

/* お知らせカード */
#notices .notice-date {
    font-size: 0.95rem;
}

#notices .notice-title-1line {
    font-size: 1.35rem;
    line-height: 1.45;
}

#notices .notice-summary-2line {
    font-size: 1rem;
    line-height: 1.65;
}

/* スマホ表示ではさらに大きく */
@media screen and (max-width: 768px) {
    body {
        font-size: 19px;
    }

    #notices .notice-title-1line {
        font-size: 1.45rem;
    }

    #notices .notice-summary-2line {
        font-size: 1.05rem;
    }

    #notices .notice-date {
        font-size: 1rem;
    }
}
/* =========================
   全体フォント拡大調整
   佐倉市ページの見た目に近づける
========================= */

body {
    font-size: 20px;
}

/* 通常本文・リスト・表・カード内テキストをまとめて拡大 */
p,
li,
address,
table,
dt,
dd,
th,
td,
.card,
.card p,
.card li,
.info-card,
.info-card p,
.info-card li,
#notices,
#notices p,
#notices li,
#notices .notice-date,
#notices .notice-summary-2line {
    font-size: 1rem;
    line-height: 1.75;
}

/* 小さく指定されがちな補足・説明文も拡大 */
small,
.note,
.caption,
.description,
.summary,
.text-small {
    font-size: 0.95rem;
    line-height: 1.7;
}

/* 見出し類 */
h2 {
    font-size: 1.65rem;
}

h3 {
    font-size: 1.25rem;
}

/* お知らせタイトル */
#notices .notice-title-1line {
    font-size: 1.45rem;
    line-height: 1.45;
}

/* スマホ・狭い画面ではさらに大きめ */
@media screen and (max-width: 768px) {
    body {
        font-size: 22px;
    }

    p,
    li,
    address,
    table,
    dt,
    dd,
    th,
    td,
    .card,
    .card p,
    .card li,
    .info-card,
    .info-card p,
    .info-card li,
    #notices,
    #notices p,
    #notices li,
    #notices .notice-date,
    #notices .notice-summary-2line {
        font-size: 1rem;
    }

    #notices .notice-title-1line {
        font-size: 1.5rem;
    }
}
/* 施設のご紹介：写真を2列に固定 */
/* 施設のご紹介：3列表示の横スライド */
#about .facility-photos {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: calc((100% - 44px) / 3) !important;
  grid-template-columns: none !important;
  gap: 22px !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  margin-top: 20px !important;
  padding-bottom: 12px !important;
}

#about .facility-photos .card {
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  scroll-snap-align: start;
}

#about .facility-photos .card img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

#about .facility-photos .card {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
}

#about .facility-photos .card img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

.logo-img {
  display: block;
  width: 360px;
  height: auto;
  max-height: 110px;
  object-fit: contain;
}
@media screen and (max-width: 600px) {
  .logo-img {
    width: 280px;
    max-height: 90px;
  }
}

.room-photo,
.facility-photo {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 10px;
}

@media screen and (max-width: 600px) {
  .room-photo,
  .facility-photo {
    height: 220px;
  }
}

.info-card {
  position: relative;
  z-index: 2;
  margin-bottom: 30px;
}

.room-photo-grid {
  position: relative;
  z-index: 1;
  clear: both;
}

.room-photo-grid {
  padding-bottom: 30px;
}

.room-photo-card {
  min-width: 0;
  overflow: hidden;
}

.room-photo-card .room-photo {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0;
}

@media screen and (max-width: 900px) {
  .room-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 600px) {
  .room-photo-grid {
    grid-template-columns: 1fr;
  }

  .room-photo-card .room-photo {
    height: 240px;
  }
}
/* 茶室の写真：3列表示 */
.tea-room-page .room-photo-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: start;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

.tea-room-page .room-photo-card {
  min-width: 0;
  overflow: hidden;
}

.tea-room-page .room-photo-card .room-photo {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0;
}

@media screen and (max-width: 900px) {
  .tea-room-page .room-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 600px) {
  .tea-room-page .room-photo-grid {
    grid-template-columns: 1fr !important;
  }

  .tea-room-page .room-photo-card .room-photo {
    height: 240px;
  }
}
/* 施設のご紹介：スマホでは1列縦並び */
@media screen and (max-width: 600px) {
  #about .facility-photos {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;

    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;

    padding-bottom: 0 !important;
  }

  #about .facility-photos .card {
    width: 100% !important;
    min-width: 0 !important;
    scroll-snap-align: none !important;
  }

  #about .facility-photos .card img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }
}
/* 施設のご紹介：スマホ画像サイズ調整 */
@media screen and (max-width: 600px) {
  #about .facility-photos .card img {
    width: 100% !important;
    height: 220px !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    background: #f7f7f7;
  }
}
/* 図面を中央寄せし、画像本来の幅で表示 */
#about .facility-photos .card img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}
@media screen and (max-width: 600px) {
  #about .facility-photos {
    justify-items: center !important;
  }

  #about .facility-photos .card {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  #about .facility-photos .card img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}
@media screen and (max-width: 600px) {
  #about .facility-photos,
  #about .facility-photos .card {
    display: block !important;
  }

  #about .facility-photos .card img {
    display: block !important;
    width: 100% !important;
    height: 220px !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 auto !important;
  }
}