@charset "UTF-8";

html {
    font-size: 100%;
}
body {
    /* フォントの指定（明朝体を優先） */
  font-family: "Shippori Mincho", serif;
  
  /* 文字色：真っ黒すぎない濃いグレーで見やすく */
  color: #333;
  
  /* 行間：かなりゆったりした設定 */
  line-height: 2.0;
  
  /* 文字間隔：少し広げることで高級感と読みやすさを出す */
  letter-spacing: 0.05em;
  
  /* フォントを滑らかに表示する設定（Mac/iOS向け） */
  -webkit-font-smoothing: antialiased;
}
/* 記事本文のパラグラフ設定 */
p {
  font-size: 16px;
  margin-bottom: 2em; /* 段落同士の間隔もゆったりと */
}

/* 見出しのカスタマイズ */
h1, h2, h3 {
  font-weight: 700;
  line-height: 1.4;
  margin-top: 2em;
}
img {
    max-width: 100%;
    vertical-align: bottom;
}
li {
    list-style: none;
}
a {
    color: #333;
    text-decoration: none;
}

a:hover {
    opacity: 0.7;
}
iframe {
    vertical-align: bottom;
}
/* 全体のベース（先ほどのフォント設定を反映） */
body {
  margin: 0;
  padding: 0;
  font-family: "Shippori Mincho", serif;
  color: #333;
  background-color: #fff;
}

/* ヘッダー全体の余白 */
.article-header {
  max-width: 1000px; /* 横幅を制限して読みやすく */
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center; /* 中央揃え（左揃えにするなら削除） */
}

/* パンくずリスト */
.breadcrumb {
  font-size: 12px;
  letter-spacing: 0.1em;
  margin-bottom: 40px;
  text-transform: uppercase;
}

.breadcrumb a {
  text-decoration: none;
  color: #888;
  transition: color 0.3s;
}

.breadcrumb a:hover {
  color: #000;
}

.breadcrumb span {
  margin: 0 8px;
  color: #ccc;
}

/* 小見出し（日付など） */
.subtitle {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #888;
  margin-bottom: 15px;
  text-transform: uppercase;
}

/* メインの見出し */
.main-title {
  font-size: 28px;
  line-height: 1.4;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.05em;
}

/* メインビジュアル */
.main-visual {
  width: 100%;
  max-width: 1200px; /* サイト全体の最大幅に合わせる */
  margin: 0 auto 60px; /* 下に余白を作る */
}

.main-visual img {
  width: 100%;
  height: auto;
  display: block;
}
/* 本文エリアを中央に寄せ、読みやすい幅に絞る */
.container {
  max-width: 720px; /* 文章が長くなりすぎない絶妙な幅 */
  margin: 0 auto;   /* 中央寄せ */
  padding: 0 20px;  /* スマホ時の左右余白 */
}

/* 本文内の段落の間隔を調整 */
.post-content p {
  margin-bottom: 2.5em; /* 段落の間をしっかり空ける */
}
.post-content p:first-of-type {
  text-align: center;
}


/* 本文内の中見出し */
.post-content h2 {
  font-size: 20px;
  margin-top: 3em;
  margin-bottom: 1.5em;
  border-bottom: 1px solid #eee; /* 軽い線を入れると区切りが分かりやすい */
  padding-bottom: 0.5em;
}
.lead-text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
}

/* 要綱セクションの全体 */
.event-summary {
  margin: 60px auto 20px; /* 下のマージンを 60px から 20px に */
  padding: 40px;
  background-color: #fafafa;
  border-radius: 4px;
}
/* 開催要綱というタイトル */
.summary-title {
  font-size: 18px;
  text-align: center;
  margin-bottom: 30px;
  letter-spacing: 0.1em;
}

/* リスト（dl）のスタイル */
.summary-item {
  display: flex; /* 横並びにする */
  padding: 15px 0;
  border-bottom: 1px solid #e0e0e0; /* 細い区切り線 */
}

.summary-item:last-child {
  border-bottom: none; /* 最後の線は消す */
}

/* 項目名（日時・場所など） */
.summary-item dt {
  width: 120px; /* 左側の幅を固定 */
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0; /* 幅が狭まらないように固定 */
}

/* 内容（具体的な情報） */
.summary-item dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

/* 住所などの補足テキスト */
.address {
  font-size: 13px;
  color: #666;
}
/* 本文内の電話番号 */
.post-content .tel a,
.event-summary .tel a {
  color: #666;
  text-decoration: underline;
}

/* フッター内の電話番号 */
#footer .tel a {
  color: #fff;
}



/* スマホ表示の時は縦に並べる */
@media (max-width: 600px) {
  .summary-item {
    flex-direction: column; /* 縦並びに変更 */
  }
  .summary-item dt {
    margin-bottom: 5px;
  }
}
/* セクション全体の余白 */
.ceremony-detail {
  padding: 20px 0 80px;
}

/* 中央の見出し */
.section-title {
  font-size: 24px;
  text-align: center;
  margin-bottom: 50px;
  position: relative;
  padding-bottom: 15px;
}

/* 見出しの下に短い線を入れる（神社の厳かな雰囲気） */
.section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 1px;
  background-color: #333;
}

/* 文章のスタイル */
.content-text p {
  line-height: 2.2; /* さらに行間を広げて「読み物」感を出す */
  margin-bottom: 2em;
}

/* 祈祷の受付などの補足枠 */
.info-box {
  margin-top: 50px;
  padding: 30px;
  border: 1px solid #eee; /* 囲み線で情報を整理 */
  background-color: #fff;
}

.info-box h3 {
  font-size: 16px;
  margin-bottom: 15px;
  color: #555;
}

.info-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.info-box li {
  margin-bottom: 8px;
  padding-left: 1.2em;
  position: relative;
}

/* リストの先頭に「・」を入れる */
.info-box li::before {
  content: "・";
  position: absolute;
  left: 0;
}
/* info-box内の既存のリストに余白を追加 */
.info-box ul {
  margin-bottom: 30px; /* 注釈との間に間隔を作る */
}

/* 注釈エリアのスタイル */
.note-box {
  padding: 15px 20px;
  background-color: #fdfdfd; /* 非常に薄い背景色 */
  border-left: 2px solid #d1d1d1; /* 左側に落ち着いた色のアクセント線 */
}

.note-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #333;
}

.note-text {
  font-size: 13px; /* 本文より一回り小さく */
  line-height: 1.8;
  color: #666; /* 少しだけ色を薄くして、補足情報であることを示す */
  margin: 0;
}
/* 厄年セクション全体 */
.yakudoshi-minimal {
  margin: 80px auto;
  max-width: 800px; /* 少し広めに設定 */
  text-align: center;
}

.yakudoshi-minimal h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.yakudoshi-note {
  font-size: 13px;
  color: #888;
  margin-bottom: 40px;
}

/* 男女の表を並べる設定 */
.yakudoshi-flex {
  display: flex;
  gap: 40px; /* 表と表の間隔 */
  justify-content: center;
}

.yakudoshi-box {
  flex: 1; /* 左右均等な幅に */
  min-width: 300px;
}

/* 男女のラベル（男性・女性） */
.gender-label {
  font-weight: 700;
  font-size: 14px;
  padding: 10px;
  background-color: #f0f0f0;
  color: #333;
  letter-spacing: 0.2em;
  margin-bottom: 15px;
  border-radius: 3px;

}

/* テーブルのスタイル */
.yakudoshi-box table {
  width: 100%;
  border-collapse: collapse; /* 線を重ねる */
  font-size: 14px;
}

.yakudoshi-box th {
  font-weight: 700;
  padding: 10px 5px;
  border-bottom: 2px solid #333; /* 見出しの下だけ少し太く */
}

.yakudoshi-box td {
  padding: 15px 5px;
  border-bottom: 1px solid #eee; /* 横線は薄く */
  line-height: 1.4;
}

/* 西暦（小さい文字） */
.yakudoshi-box small {
  font-size: 11px;
  color: #888;
  display: block;
  margin-top: 4px;
}

/* 本厄（大厄）の背景色 */
.bg-gray {
  background-color: #f7f7f7;
}

/* 強調（42歳・33歳など） */
.yakudoshi-box strong {
  color: #000;
  font-size: 16px;
}
/* フッター全体のスタイル */
#footer {
  background-color: #1a1a1a; /* ダークグレーで画面を引き締める */
  color: #fff;               /* 文字を白に */
  padding: 80px 20px;
  margin-top: 100px;         /* 記事本文からしっかり離す */
  text-align: center;
}

/* 「お問い合わせ」の見出し */
#footer h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 40px;
  text-transform: uppercase;
  color: #888; /* 見出しは少しトーンを落とす */
}

/* 神社名 */
.shrine-name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 0.1em;
}

/* 住所・電話番号 */
.address, .tel {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 10px;
}

/* 電話番号のリンク色 */
.tel a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 0.3s;
}

.tel a:hover {
  opacity: 0.7;
}

/* コピーライト（一番下の著作権表示） */
.footer-bottom {
  margin-top: 60px;
  border-top: 1px solid #333;
  padding-top: 30px;
}

.copyright {
  font-size: 10px;
  letter-spacing: 0.05em;
  color: #555;
}

/* スマートフォン向けの調整 */
@media (max-width: 767px) {
  #footer {
    padding: 60px 15px;
  }
}

/* スマートフォン表示：縦に並べる */
@media (max-width: 767px) {
  .yakudoshi-flex {
    flex-direction: column;
    gap: 60px;
  }
  .yakudoshi-box {
    min-width: 100%;
  }
}
/*----------------------------------------------------------
スマートフォン
----------------------------------------------------------*/

@media screen and (max-width: 480px) {

  .main-title {
    font-size: 22px;
  }

  .article-header {
    padding: 30px 15px;
  }

  .post-content p:first-of-type {
    text-align: left;
  }

}