/* --- 全体リセット --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* --- 基本スタイル --- */
body {
  font-family: "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
  background-color: #ffffff;
  color: #000000;
  line-height: 1.6;
  padding: 20px;
}

.container {
  width: 100%;        /* 画面幅に合わせて縮む */
  max-width: 1000px;   /* 最大800pxに制限 */
  margin: 0 auto;     /* 左右中央寄せ */
  padding: 0 20px;    /* 画面ピッタリだと窮屈なので余白 */
  box-sizing: border-box;
}

/* --- ヘッダー --- */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.header .logo {
  font-size: 24px;
  font-weight: bold;
  color: #2e7d32; /* 緑系キーカラー */
}

/* ロゴリンク専用 */
.header .logo a {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  color: #2e7d32;         /* 緑系キーカラー */
  text-decoration: none;  /* 下線を消す */
  font-size: 28px;  /* ロゴとして少し大きめ */
  font-weight: bold;      /* 太字にする場合 */
}

/* ホバーで少し変化させたい場合 */
.header .logo a:hover {
  color: #1b5e20;         /* 濃い緑に */
}

.main-nav ul {
  list-style: none;  /* ・を消す */
  display: flex;     /* 横並びにする */
  gap: 20px;         /* 項目の間隔 */
  padding: 0;        /* ulのデフォルト余白も削除 */
  margin: 0;         /* ulの上余白も削除 */
  margin-top: 8px;
}

.main-nav a {
  text-decoration: none;
  color: #000000;
  font-weight: 500;
  padding: 10px 20px;          /* 背景色が付くときの余白 */
  border-radius: 5px;         /* 角を丸く */
  transition: background 0.3s, color 0.3s; /* アニメーションで滑らかに */
}

.main-nav a:hover {
  color: #ffffff;             /* 文字色も変更可能 */
  background-color: #2e7d32;  /* 緑系背景 */
}

/* --- テキストカラー用ユーティリティ --- */
.text-red {
  color: red;
}

.text-blue {
  color: blue;
}


/* ==========================
     --- 漫空紹介漫画 ---
     index.html
   ==========================*/
.slideshow {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
  height: 500px;    /* 仮の高さ */
}

.slide {
  position: absolute;
  width: 100%;
  opacity: 0;
  animation: fade 24s infinite;
}

.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 4s; }
.slide:nth-child(3) { animation-delay: 8s; }
.slide:nth-child(4) { animation-delay: 12s; }
.slide:nth-child(5) { animation-delay: 16s; }
.slide:nth-child(6) { animation-delay: 20s; }
.slide:nth-child(7) { animation-delay: 24s; }

@keyframes fade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  30% { opacity: 1; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}

.slideshow img {
  width: 100%;
  height: auto;
  display: block;
}





/* --- キャッチコピー --- */
.catch {
  text-align: center;
  margin-bottom: 30px;
}

.catch h1 {
  font-size: 28px;
  color: #2e7d32; /* 緑系 */
  font-weight: bold;
  text-decoration: none;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
}

.catch h2 {
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 5px;
}


/* --- 沿革 --- */

.storehistory_img {
  width: 100%;        /* デバイス幅に合わせて縮む */
  height: auto;
  max-width: 1000px;   /* 最大幅を800pxに固定 */
  display: block;
  margin: 0 auto 20px auto; /* 中央寄せ + 下に余白 */
  border-radius: 6px;
}


/* --- 最新情報 --- */

.calendar-img {
  width: 100%;        /* デバイス幅に合わせて縮む */
  height: auto;
  max-width: 1000px;   /* 最大幅を800pxに固定 */
  display: block;
  margin: 0 auto 20px auto; /* 中央寄せ + 下に余白 */
  border-radius: 6px;
}

/* スケジュール表ページのカレンダー */
.calendar img {
  width: 100%;       /* 横幅100%で親要素に収める */
  max-width: 1000px;  /* 最大幅を800pxに制限 */
  height: auto;      /* 縦横比を維持 */
  display: block;
  margin: 0 auto;    /* 中央揃え */
}


.news {
  margin: 40px auto;
  max-width: 800px;
  padding: 20px;
}

.news h3 {
  font-size: 1.6rem;
  color: #1a5f2d;
  border-left: 4px solid #1a5f2d;
  padding-left: 10px;
  margin-bottom: 20px;
}

.news ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news li {
  margin-bottom: 12px;
  line-height: 1.5;
  font-size: 1.05rem;
}

.news li a {
  color: #1a5f2d;
  text-decoration: none;
  font-weight: bold;
  margin-left: 8px;
}

.news li a:hover {
  text-decoration: underline;
  opacity: 0.8;
}

/* --- 主要導線ボタン --- */
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 30px;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #2e7d32; /* 緑系 */
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}

.btn:hover {
  background-color: #1b5e20; /* 濃い緑でホバー */
}


/* ====================================================
   料金・利用方法
==================================================== */

/* セクション */
section {
  margin-bottom: 40px;
}

/* セクション余白 */
section h2 {
  font-size: 1.5rem;
  color: #2e7d32;
  margin-bottom: 15px;
  border-bottom: 2px solid #2e7d32;
  display: inline-block;
  padding-bottom: 5px;
}


/* コンセプト写真 */
.concept-images {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.concept-images img {
  width: 100%;
  max-width: 480px;
  border-radius: 8px;
}

/* 設備紹介 */
.equipment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  list-style: none;
}

.equipment-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #2e7d32;
  border-radius: 5px;
}

/* 料金一覧 */
.pricing ul {
  list-style: none;
  padding-left: 0;
}

.pricing li {
  padding: 6px 0;
}

/* 利用方法 */
.usage ol {
  padding-left: 20px;
  margin-top: 10px;
}



/* ====================================================
 漫画空間とは？
==================================================== */
.service {
  max-width: 1000px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

/* サービス紹介ページ：画像エリア */
.service-images {
  display: flex;         /* 横並び */
  gap: 20px;             /* 画像間の余白 */
  justify-content: center; /* 中央寄せ */
  margin: 20px 0;
}

/* 各画像の最大幅を調整（スマホ対応） */
.service-images img {
  width: 48%;            /* 2枚横並びでちょうど良い幅 */
  max-width: 400px;      /* PC時に大きくなりすぎないよう制限 */
  height: auto;          /* 比率を保持 */
  border-radius: 6px;    /* 少し角丸に（不要なら削除OK） */
  display: block;
}

.service_img2 {
  width: 100%;        /* デバイス幅に合わせて縮む */
  height: auto;
  max-width: 1000px;   /* 最大幅を800pxに固定 */
  display: block;
  margin: 0 auto 20px auto; /* 中央寄せ + 下に余白 */
  border-radius: 6px;
}

/* スケジュール表ページのカレンダー */
.service_img2 img {
  width: 100%;       /* 横幅100%で親要素に収める */
  max-width: 1000px;  /* 最大幅を800pxに制限 */
  height: auto;      /* 縦横比を維持 */
  display: block;
  margin: 0 auto;    /* 中央揃え */
}

/* サービスページ内のリンクを全ページ統一スタイルに */
.service a,
.courses a,
.event a {
  color: #2e7d32;        /* 緑色 */
  text-decoration: none; /* 下線を消す */
  font-weight: 500;
}

/* ホバー時 */
.service a:hover,
.courses a:hover,
.event a:hover {
  text-decoration: underline;
  opacity: 0.8;
}

/* スマホで縦並びになる設定 */
@media (max-width: 600px) {
  .service-images {
    flex-direction: column;
    align-items: center;
  }
  .service-images img {
    width: 100%;  /* スマホは画面幅いっぱい */
    max-width: 100%;
  }
}


/* ====================================================
   スケジュールページ
   イベント
==================================================== */
/* イベント一覧 */
.event,
.events {
  max-width: 1000px;
  margin: 0 auto 60px;
  padding: 0 20px;
}


.events h2 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: #2e7d32;  /* 緑系キーカラー */
}

.events ul {
  list-style: none;
  padding: 0;
}

.events li {
  font-size: 1.1rem;
  margin: 8px 0;
  padding: 6px 0;
}

/* イベント内リンク（詳細 ▶︎ ボタン風） */
.events a {
  color: #2e7d32;  /* 緑系キーカラー */
  text-decoration: none;
  font-weight: bold;
  margin-left: 6px;
  border-bottom: 2px solid transparent;
  transition: 0.2s;
}

.events a:hover {
  color: #2e7d32;
  border-bottom: 2px solid #2e7d32;
}



/* ====================================================
   アクセスページ共通
==================================================== */

/* Googleマップ埋め込み */
.map iframe {
  width: 100%;
  max-width: 800px;  /* 最大幅800px */
  height: 400px;
  border: 0;
  display: block;
  margin: 10px auto;
  border-radius: 8px;
}

/* 外観写真 */
.store-photo img {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
  margin: 10px auto;
  border-radius: 8px;
}

/* 決済リンクリスト */
.payment ul {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
}

.payment li {
  margin-bottom: 10px;
}

.payment a {
  display: inline-block;
  text-decoration: none;
  color: #ffffff;
  background-color: #2e7d32;  /* 緑系キーカラー */
  padding: 8px 15px;
  border-radius: 5px;
  transition: background 0.3s;
}

.payment a:hover {
  background-color: #1b5e20;
}

/* お問い合わせリンク */
.contact a {
  background: #2e7d32;  /* 緑系キーカラー */
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
}

.contact a:hover {
  background: #2e7d32;  /* 緑系キーカラー */
}



/* レスポンシブ */
@media (max-width: 768px) {
  .map iframe,
  .store-photo img {
    height: 300px;
  }
}



/* --- SNS --- */
.sns {
  max-width: 1000px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

.sns a {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;

  color: #2e7d32;
  text-decoration: underline;
  font-weight: normal;
  display: inline;
}

.sns a:hover {
  opacity: 0.7;
}



/* --- フッター --- */
.footer {
  text-align: center;
  font-size: 14px;
  color: #666666;
  border-top: 1px solid #ccc;
  padding-top: 10px;
}

.footer a {
  text-decoration: none;
  color: #2e7d32;
}

.footer a:hover {
  text-decoration: underline;
}



/* --- ハンバーガーメニュー --- */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger span {
  width: 26px;
  height: 3px;
  background-color: #2e7d32;
  border-radius: 2px;
}


/* --- カレンダー --- */
.calendar a img {
  cursor: zoom-in;
}

.calendar-note {
  text-align: center;
  font-size: 0.9rem;
  color: #666;
  margin-top: 8px;
}




/* ==========================
   スマホ用ナビゲーション
========================== */
@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 70px;
    right: 20px;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 220px;
    z-index: 1000;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 0;
  }

  .main-nav li {
    border-bottom: 1px solid #eee;
  }

  .main-nav li:last-child {
    border-bottom: none;
  }

  .main-nav a {
    display: block;
    padding: 12px 16px;
  }

  .main-nav.active {
    display: block;
  }
}