@charset "UTF-8";
/* =========================================================
   本館1階 葵テラス イベント情報（SKY BLUE × NAVY）
   ※ Gaisho SPECIAL 3DAYS のページと同じ書き方で作っています

   ■ 前提
   ・ファイル名は、ページの HTML と同じ名前にする（230626_aoi.html → 230626_aoi.css）。
     共通の名前にすると、ほかのページの CSS と重なる。
   ・本番ページでは CMS 共通CSS（parts.css / topics-detail.css）の上で表示される。
     リセット（margin・padding 0 など）と box-sizing: border-box は、そちらで効いている。
     このファイルは、CMS 共通CSSより後に読み込む。
   ・スマホ（767px以下）では、CMS の「#main p { font-size: 15px }」が、このファイルで
     p に指定した font-size より優先される（p の font-size は PC と 768px のときだけ効く）。
     イベントの説明文（.event-text）は、9. で #main を付けて、指定どおりの大きさにしている。
     ブログと Instagram の説明文（.blog-lead・.instagram-text）は、767px以下では 15px のまま。
   ・CMS 共通CSSに「time { display: block; }」がある。日付の <time> は、4. と 5. で
     display: contents にして、並び方に影響させないようにしている。
   ・文字の大きさは rem で指定している。CMS の共通CSS が html { font-size: 62.5% } としているため、
     1rem＝10px（例：1.5rem＝15px）。ブラウザの文字サイズの設定を大きくすると、同じ割合で大きくなる。

   ■ 初めて触る方へ
   ・見た目を変えたいときは、HTML で変えたい部分の class="…" の名前を確かめ、
     このファイルを「.名前」で検索する（例：イベント名の色を変えたい → 「.event-name」で検索）
   ・同じ名前が「9. スマホ（768px以下）」の中にもあるときは、スマホではそちらが優先される。
     PC だけ・スマホだけを変えたいときは、どちらを書き換えるかに気をつける
   ・色は「0. 変数」でまとめて決めている。例：--aoi-navy の色を変えると、大見出しとイベント名の色がすべて変わる
   ・{ } の中は「プロパティ: 値;」の組。行の最後の「;」は消さない
   ・この説明書きのような部分（コメント）は、画面には影響しない

   ■ よく出てくる指定の意味
   ・margin … 外側の余白　／　padding … 内側の余白
     （値が4つなら「上 右 下 左」、2つなら「上下 左右」、1つなら四方すべて）
   ・width / height … 幅 / 高さ（max-width は「これより広くしない」）
   ・font-size … 文字の大きさ　／　font-weight … 文字の太さ（400 が普通、600・700 は太字）
   ・line-height … 行の高さ（数字だけなら、文字の大きさの何倍か）
   ・letter-spacing … 文字の間隔　／　text-align … 文字のそろえ方（left 左 / center 中央）
   ・color … 文字の色　／　background … 背景　／　border … 枠線　／　box-shadow … 影
   ・display: flex … 中身を横に並べる（flex-direction: column なら縦）　／　gap … 並べた中身の間隔
   ・display: grid … 中身を表のように並べる（grid-template-columns で列の幅を決める）
   ・position / top / left など … 飾りの線などを、決まった位置に置く
   ・::before / ::after … 線や ✦ などの飾りを、CSS だけで足す
   ・:hover … マウスを乗せたときの見た目
   ・transform / transition / animation … 動き（位置をずらす / 変化にかける時間 / 繰り返しの動き）
   ・@media screen and (max-width: 768px) { … } … 画面の幅が 768px 以下（スマホ）のときだけ効く指定
   ・単位：px … 画面の点の数　／　em … その部分の文字の大きさの何倍か　／　% … 親の幅に対する割合
     rem … ページ全体の基準の文字の大きさの何倍か（このページでは 1rem＝10px）
   ・calc(100% - 32px) … 「親の幅から 32px 引いた幅」のような計算

   ■ 書き方のルール
   ・クラス名は、単語を「-」でつなぐ（例：event-card、upcoming-date）
   ・色・書体・幅は、0. の変数を使う
   ・文字の大きさ（font-size）は rem で書く。px で考えた数字を10で割る（例：13px → 1.3rem、8px → .8rem）
   ・プロパティは「中身 → 配置 → 並べ方 → 大きさ・余白 → 文字 → 背景・枠 → 動き」の順に書く
   ・スマホ用の指定は 9.（768px以下）にまとめ、その中も、この目次と同じ番号・順番で並べる
   ・!important は使わない。CMS 共通CSSの指定より優先させたいときは、親のクラスや #main を付けて強くする

   ■ 目次
    0. 変数
    1. 共通（全体幅・見出しの改行）
    2. メインビジュアル
    3. 大見出し（h2）
    4. 今週・来週のイベント
    5. 今後のイベントスケジュール
    6. 葵テラスの最新情報（ブログ）
    7. Instagram
    8. スクロールで表示する動き
    9. スマホ（768px以下）
========================================================= */


/* =========================================================
   0. 変数
========================================================= */

:root {

  /* SKY BLUE（水色） */
  --aoi-sky: #59BDED;           /* 英字の小見出し・大見出しの線・ボタンの枠・日付の間の線 */
  --aoi-sky-pale: #8fd5f4;      /* ✦ の飾り */
  --aoi-sky-line: #9ddaf5;      /* 今後のイベントの、日付の間の縦線 */

  /* BLUE（青） */
  --aoi-blue: #168fd0;          /* 「詳細はこちら」の文字・開催中のバッジ・今後のイベントの日付 */
  --aoi-blue-light: #35aceb;    /* Instagram のボタン（グラデーションの左の色） */
  --aoi-blue-date: #1265a8;     /* 今週・来週の日付 */
  --aoi-blue-pale: #e3f3fb;     /* NEXT のバッジの背景 */

  /* NAVY（紺） */
  --aoi-navy: #073b70;          /* 大見出し・イベント名・Instagram の公式名 */

  /* BASE */
  --aoi-white: #fff;
  --aoi-text: #444;             /* 今週・来週の説明文 */
  --aoi-text-sub: #555;         /* 今後の説明文・ブログと Instagram の説明文 */
  --aoi-line: #e4eef3;          /* カードの枠・区切りの線 */

  /* Instagram */
  --aoi-insta-border: #cbeaf8;  /* 枠 */
  --aoi-insta-dot: #b9def1;     /* 点線の区切り */
  --aoi-insta-bg: #f1faff;      /* 背景（グラデーションの右下の色） */

  /* FONT（英字は、英字の小見出しとそのほかで組み合わせが違うため別の変数） */
  --aoi-font-mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
  --aoi-font-serif-en: Georgia, "Times New Roman", serif;  /* 英字の小見出し（THIS WEEK など） */
  --aoi-font-serif-en-sub: Georgia, serif;                 /* 曜日・Instagram の小見出し */
  --aoi-font-sans-en: Arial, sans-serif;                   /* バッジ・ボタン */

  /* 幅 */
  --aoi-content-width: 1100px;
  --aoi-sp-gutter: 16px;        /* スマホの左右の余白 */
}


/* =========================================================
   1. 共通
========================================================= */

/* 全体幅（メインビジュアル・今週と来週・今後のイベント） */

.main-visual,
.event-section,
.upcoming-section {
  max-width: var(--aoi-content-width);
  margin: 0 auto;
}

/* 見出しの中の改行
   ・<br> ではなく、1行ずつ <span class="heading-line"> で囲む */

.heading-line {
  display: block;
}


/* =========================================================
   2. メインビジュアル（PC / スマホの画像は、HTML の picture で切り替え）
========================================================= */

/* 光の飾りのはみ出しを隠す */

.main-visual {
  position: relative;
  overflow: hidden;
}

/* 光の飾り（7秒ごとに、左から右へ横切る） */

.main-visual::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -40%;
  width: 25%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: rotate(20deg);
  animation: aoiLight 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes aoiLight {

  0%,
  55% {
    left: -40%;
    opacity: 0;
  }

  65% {
    opacity: 1;
  }

  90% {
    left: 120%;
    opacity: 1;
  }

  100% {
    left: 120%;
    opacity: 0;
  }

}


/* =========================================================
   3. 大見出し（h2：今週のイベント など）
========================================================= */

/* 大見出しのまとまり（英字の小見出し＋h2） */

.section-heading {
  margin: 70px 0 35px;
  text-align: center;
}

/* 英字の小見出し（THIS WEEK など） */

.section-heading-en {
  display: block;
  margin-bottom: 7px;
  color: var(--aoi-sky);
  font-family: var(--aoi-font-serif-en);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .22em;
}

/* 大見出し */

.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0;
  color: var(--aoi-navy);
  font-family: var(--aoi-font-mincho);
  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: .12em;
}

/* 大見出しの両側の線 */

.section-title::before,
.section-title::after {
  content: "";
  width: 55px;
  height: 1px;
  background: var(--aoi-sky);
}


/* =========================================================
   4. 今週・来週のイベント
========================================================= */

/* 大見出しの上の余白（今週・来週は 45px。ほかの大見出しは 70px） */

.event-section > .section-heading {
  margin-top: 45px;
}

/* カードの並び（縦に並べて、中央にそろえる） */

.event-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* カードの幅 */

.event-list > .event-card {
  width: 700px;
  max-width: calc(100% - 32px);
}

/* カード（PC は、上の行に日付とバッジ、下の行に画像と説明を横に並べる） */

.event-section .event-card {
  display: grid;
  grid-template-columns: 48% minmax(0, 1fr);
  grid-template-areas:
    "status status"
    "image content";
  column-gap: 22px;
  row-gap: 18px;
  box-sizing: border-box;
  margin: 0;
  padding: 22px;
  overflow: hidden;
  background: var(--aoi-white);
  border: 1px solid var(--aoi-line);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(20, 70, 100, .07);
  transition: transform .3s ease, box-shadow .3s ease;
}

/* マウスを乗せると、少し浮く（スマホでは 9. で止めている） */

.event-section .event-card:hover {
  box-shadow: 0 12px 35px rgba(20, 70, 100, .11);
  transform: translateY(-3px);
}

/* 日付とバッジの行 */

.event-status {
  grid-area: status;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  margin: 0;
}

/* 日付（明朝体の青い数字） */

.event-date {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
  color: var(--aoi-blue-date);
  font-family: var(--aoi-font-mincho);
  line-height: 1;
  white-space: nowrap;
}

/* <time> は日付の意味付けだけ。並び方には影響させない（CMS の time { display: block; } を打ち消す） */

.event-date time {
  display: contents;
}

/* 日付の数字（09.30） */

.event-date .date-main {
  font-size: 2.8rem;
  font-weight: 500;
  letter-spacing: .03em;
}

/* 曜日（WED） */

.event-date .date-day {
  font-family: var(--aoi-font-serif-en-sub);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .08em;
}

/* 開始日と終了日の間の線（―） */

.date-dash {
  margin: 0 4px;
  color: var(--aoi-sky);
  font-size: 1.8rem;
  font-weight: 300;
}

/* 開催中のバッジ（青） */

.event-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 17px;
  color: var(--aoi-white);
  font-family: var(--aoi-font-sans-en);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .08em;
  white-space: nowrap;
  background: var(--aoi-blue);
  border-radius: 30px;
  box-shadow: 0 4px 10px rgba(22, 143, 208, .18);
}

/* NEXT のバッジ（薄い青）：class="event-badge event-badge-next" */

.event-badge-next {
  color: var(--aoi-blue);
  background: var(--aoi-blue-pale);
  box-shadow: none;
}

/* 画像（PC は正方形に切り抜き、スマホは 9. で全体を表示）
   ※ 画像は正方形で入稿する（正方形でないと、PC とスマホで見え方が変わる） */

.event-photo {
  grid-area: image;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
}

.event-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}

/* 説明の部分（縦に並べ、ボタンを下にそろえる） */

.event-body {
  grid-area: content;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* イベント名（h3） */

.event-body .event-name {
  position: relative;
  margin: 0 0 12px;
  padding: 0;
  color: var(--aoi-navy);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .02em;
}

/* 説明文 */

.event-body .event-text {
  margin: 0 0 15px;
  color: var(--aoi-text);
  font-size: 1.2rem;
  line-height: 1.8;
}

/* 「詳細はこちら」のボタン（下にそろえる） */

.event-btn {
  margin-top: auto;
}

/* ボタンの見た目
   ※CMS の a:link（詳細度 0,1,1）より優先させるため、「.event-btn >」を付けて指定する */

.event-btn > .event-btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 8px;
  padding: 9px 20px;
  color: var(--aoi-blue);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--aoi-sky);
  border-radius: 30px;
  transition: background .3s ease, color .3s ease;
}

/* 矢印（→） */

.event-btn > .event-btn-link::after {
  content: "→";
  font-family: var(--aoi-font-sans-en);
  transition: transform .3s ease;
}

/* マウスを乗せたとき（水色になり、矢印が右へ動く） */

.event-btn > .event-btn-link:hover {
  color: var(--aoi-white);
  background: var(--aoi-sky);
}

.event-btn > .event-btn-link:hover::after {
  transform: translateX(4px);
}


/* =========================================================
   5. 今後のイベントスケジュール
========================================================= */

.upcoming-section {
  margin-bottom: 60px;
}

/* カード（PC は、日付・画像・説明を横に並べる） */

.upcoming-card {
  display: grid;
  grid-template-columns: 150px 210px minmax(0, 1fr);
  align-items: center;
  min-height: 150px;
  padding: 22px 25px;
  background: var(--aoi-white);
  border-bottom: 1px solid var(--aoi-line);
}

/* 最後のカードだけ、下の角を丸くする */

.upcoming-card:last-child {
  border-radius: 0 0 12px 12px;
}

/* 日付（1行目に開始日、2行目に縦線、3行目に終了日） */

.upcoming-date {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: baseline;
  column-gap: 7px;
  padding-right: 20px;
  color: var(--aoi-blue);
}

/* <time> は日付の意味付けだけ。並び方には影響させない */

.upcoming-date time {
  display: contents;
}

/* 日付の数字 */

.upcoming-date .date-main {
  font-family: var(--aoi-font-mincho);
  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: .04em;
}

/* 曜日 */

.upcoming-date .date-day {
  font-family: var(--aoi-font-serif-en-sub);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .08em;
}

/* 開始日と終了日の間の縦線（2行目に置く） */

.upcoming-date::after {
  content: "";
  grid-row: 2;
  grid-column: 1 / 3;
  display: block;
  width: 1px;
  height: 18px;
  margin: 4px 0 4px 18px;
  background: var(--aoi-sky-line);
}

/* 画像（左に区切りの線） */

.upcoming-photo {
  padding: 0 25px;
  border-left: 1px solid var(--aoi-line);
}

.upcoming-photo img {
  display: block;
  width: 100%;
  max-height: 110px;
  object-fit: contain;
}

/* 説明の部分 */

.upcoming-body {
  padding-left: 25px;
}

/* イベント名（h3） */

.upcoming-body .event-name {
  position: relative;
  margin: 0 0 8px;
  padding: 0;
  color: var(--aoi-navy);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .03em;
}

/* 説明文 */

.upcoming-body .event-text {
  margin: 0;
  color: var(--aoi-text-sub);
  font-size: 1.3rem;
  line-height: 1.8;
}


/* =========================================================
   6. 葵テラスの最新情報（ブログ）
========================================================= */

.blog-section {
  max-width: 900px;
  margin: 80px auto 100px;
  text-align: center;
}

/* 説明文（上に ✦ の飾り） */

.blog-lead {
  margin: -5px auto 28px;
  color: var(--aoi-text-sub);
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: .05em;
  text-align: center;
}

/* ✦ の飾り（ゆっくり点滅する） */

.blog-lead::before {
  content: "✦";
  display: block;
  margin-bottom: 14px;
  color: var(--aoi-sky-pale);
  font-size: 1.4rem;
  animation: aoiTwinkle 2.5s ease-in-out infinite;
}

@keyframes aoiTwinkle {

  0%,
  100% {
    opacity: .35;
    transform: scale(.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }

}

/* ブログのバナー（マウスを乗せると、少し浮く） */

.blog-banner {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(20, 70, 100, .10);
  transition: transform .3s ease, box-shadow .3s ease;
}

.blog-banner:hover {
  box-shadow: 0 12px 35px rgba(20, 70, 100, .15);
  transform: translateY(-3px);
}

.blog-banner img {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
   7. Instagram（「葵テラスの最新情報」の中の小さなまとまり）
========================================================= */

.instagram {
  max-width: 760px;
  margin: 80px auto 0;
  text-align: center;
}

/* 小見出し（h3：FOLLOW AOI TERRACE）
   文字の見た目は中の span で決めるため、h3 自体の大きさ・太さは周りと同じにする */

.instagram-heading {
  margin: 0;
  font-size: inherit;
  font-weight: normal;
}

.instagram-heading span {
  color: var(--aoi-sky);
  font-family: var(--aoi-font-serif-en-sub);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: .22em;
}

/* ✦ の飾り（3つが少しずつずれて点滅する） */

.instagram-sparkle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 25px;
  color: var(--aoi-sky-pale);
}

.instagram-sparkle span {
  animation: aoiInstagramTwinkle 2.5s ease-in-out infinite;
}

.instagram-sparkle span:nth-child(1),
.instagram-sparkle span:nth-child(3) {
  font-size: 1.4rem;
  opacity: .75;
}

.instagram-sparkle span:nth-child(2) {
  font-size: 2.5rem;
  animation-delay: .3s;
}

.instagram-sparkle span:nth-child(3) {
  animation-delay: .6s;
}

@keyframes aoiInstagramTwinkle {

  0%,
  100% {
    opacity: .35;
    transform: scale(.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.12);
  }

}

/* 水色の枠 */

.instagram-card {
  padding: 38px 42px 42px;
  background: linear-gradient(135deg, var(--aoi-white) 0%, var(--aoi-insta-bg) 100%);
  border: 1px solid var(--aoi-insta-border);
  border-radius: 22px;
  box-shadow: 0 12px 35px rgba(20, 70, 100, .08);
}

/* アイコンと公式名（PC は横並び） */

.instagram-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* アイコン（枠 50px／画像 40px。PC・スマホとも同じ） */

.instagram-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
}

/* アイコンの画像（黒い画像を、filter で水色にしている） */

.instagram-icon img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: invert(52%) sepia(92%) saturate(1300%) hue-rotate(165deg) brightness(95%) contrast(90%);
}

/* 公式名 */

.instagram-name {
  color: var(--aoi-navy);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .03em;
  text-align: left;
}

/* 点線の区切り */

.instagram-divider {
  width: 80%;
  margin: 26px auto;
  border-top: 2px dotted var(--aoi-insta-dot);
}

/* 説明文 */

.instagram-text {
  margin: 0 0 28px;
  color: var(--aoi-text-sub);
  font-size: 1.6rem;
  line-height: 1.9;
}

/* 「Instagramを見る」のボタン
   ※CMS の a:link（詳細度 0,1,1）より優先させるため、「.instagram-card >」を付けて指定する */

.instagram-card > .instagram-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-width: 360px;
  padding: 15px 34px;
  color: var(--aoi-white);
  font-family: var(--aoi-font-sans-en);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  background: linear-gradient(90deg, var(--aoi-blue-light), var(--aoi-blue));
  border-radius: 40px;
  box-shadow: 0 7px 20px rgba(22, 143, 208, .22);
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}

/* 矢印（→） */

.instagram-btn span {
  color: var(--aoi-white);
  transition: transform .3s ease;
}

/* マウスを乗せたとき（少し浮き、矢印が右へ動く） */

.instagram-card > .instagram-btn:hover {
  box-shadow: 0 11px 28px rgba(22, 143, 208, .30);
  filter: brightness(1.04);
  transform: translateY(-2px);
}

.instagram-btn:hover span {
  transform: translateX(5px);
}


/* =========================================================
   8. スクロールで表示する動き（class="reveal"）
   ・最初は透明で少し下にあり、画面に入ると、ふわっと表示される
     （HTML の最後の script が class="is-show" を付ける）
   ・PC の指定の最後に置く（同じ部分の opacity・transform の指定より後にするため）
========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity .9s ease, transform .9s ease;
}

.reveal.is-show {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
   9. スマホ（768px以下）
   ※p の font-size は、767px以下では CMS の指定（15px）が優先される
========================================================= */

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

  /* 1. 共通 */

  /* 全体幅：左右に余白をとる */

  .main-visual,
  .event-section,
  .upcoming-section {
    width: auto;
    margin-right: var(--aoi-sp-gutter);
    margin-left: var(--aoi-sp-gutter);
  }

  /* 3. 大見出し */

  .section-heading {
    margin: 50px 0 25px;
  }

  .section-heading-en {
    font-size: 1rem;
  }

  .section-title {
    gap: 12px;
    font-size: 2rem;
    letter-spacing: .08em;
  }

  /* 両側の線を短くする */

  .section-title::before,
  .section-title::after {
    width: 25px;
  }

  /* 4. 今週・来週のイベント */

  /* カードが1件だけのときは、横幅いっぱいにする（2件以上のときは、PC と同じく左右に少し余白が残る） */

  .event-list > .event-card:only-child {
    width: 100%;
    max-width: none;
  }

  /* カード：上から、日付とバッジ、画像、説明の順に縦に並べる */

  .event-section .event-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 14px;
    border-radius: 12px;
  }

  /* マウスを乗せても、浮かせない */

  .event-section .event-card:hover {
    transform: none;
  }

  .event-status {
    order: 1;
    gap: 8px;
    margin-bottom: 14px;
  }

  .event-date {
    gap: 4px;
  }

  .event-date .date-main {
    font-size: 2.1rem;
  }

  .event-date .date-day {
    font-size: .8rem;
  }

  .date-dash {
    margin: 0 2px;
    font-size: 1.4rem;
  }

  .event-badge {
    padding: 6px 10px;
    font-size: .9rem;
  }

  /* 画像：正方形に切り抜かず、全体を表示する */

  .event-photo {
    order: 2;
    margin-bottom: 16px;
  }

  .event-photo img {
    aspect-ratio: auto;
    object-fit: contain;
  }

  .event-body {
    order: 3;
  }

  /* 説明文（CMS の #main p { font-size: 15px } を打ち消すため、#main を付けた指定も並べる） */

  .event-body .event-text,
  #main .event-body .event-text {
    font-size: 1.3rem;
  }

  /* ボタン：横幅いっぱいにする */

  .event-btn > .event-btn-link {
    display: flex;
    padding: 10px 18px;
  }

  /* 5. 今後のイベントスケジュール */

  /* カード：左の列に日付、右の列に画像と説明を縦に並べる */

  .upcoming-card {
    grid-template-columns: 90px 1fr;
    min-height: 0;
    padding: 20px 12px;
  }

  .upcoming-date {
    align-self: start;
    padding-right: 10px;
  }

  .upcoming-date .date-main {
    font-size: 1.8rem;
  }

  .upcoming-date .date-day {
    font-size: .8rem;
  }

  .upcoming-date::after {
    height: 14px;
    margin-left: 12px;
  }

  .upcoming-photo {
    padding: 0 0 14px 16px;
  }

  .upcoming-photo img {
    max-height: 100px;
  }

  /* 説明の部分（右の列。左に区切りの線） */

  .upcoming-body {
    grid-column: 2;
    padding: 0 0 0 16px;
    border-left: 1px solid var(--aoi-line);
  }

  .upcoming-body .event-name {
    font-size: 1.5rem;
  }

  /* 説明文（CMS の #main p { font-size: 15px } を打ち消すため、#main を付けた指定も並べる） */

  .upcoming-body .event-text,
  #main .upcoming-body .event-text {
    font-size: 1.2rem;
    line-height: 1.7;
  }

  /* 6. 葵テラスの最新情報（ブログ） */

  .blog-section {
    margin: 60px var(--aoi-sp-gutter) 70px;
  }

  /* 説明文（767px以下では、CMS の #main p の 15px になる） */

  .blog-lead {
    margin-bottom: 22px;
    font-size: 1.3rem;
    line-height: 1.9;
  }

  .blog-banner {
    border-radius: 8px;
  }

  /* 7. Instagram */

  .instagram {
    margin-top: 60px;
  }

  .instagram-heading span {
    font-size: 1.1rem;
    letter-spacing: .16em;
  }

  .instagram-sparkle {
    margin: 13px 0 20px;
  }

  .instagram-card {
    padding: 28px 18px 30px;
    border-radius: 18px;
  }

  /* アイコンと公式名を縦に並べる */

  .instagram-profile {
    flex-direction: column;
    gap: 12px;
  }

  .instagram-name {
    font-size: 1.6rem;
    text-align: center;
  }

  .instagram-divider {
    width: 90%;
    margin: 22px auto;
  }

  /* 説明文（767px以下では、CMS の #main p の 15px になる） */

  .instagram-text {
    margin-bottom: 24px;
    font-size: 1.3rem;
  }

  /* ボタン：横幅いっぱいにする */

  .instagram-card > .instagram-btn {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 13px 20px;
    font-size: 1.4rem;
  }

}