/* フォント設定（Google Fonts等で明朝体を用意するとより良くなります） */
.wedding-style-section {
  font-family: "Times New Roman", "Shippori Mincho", "Yu Mincho", serif;
  color: #333;
  line-height: 1.8;
  letter-spacing: 0.05em;
  overflow-wrap: break-word;
}

.inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4%;
}

/* 共通の見出しスタイル */
.sec-title-en {
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #888;
  display: block;
  margin-bottom: 10px;
}

.sec-title-jp {
  font-size: 24px;
  font-weight: normal;
  margin-bottom: 30px;
}


/* 全体のリセット設定（既存サイトにある場合は不要です） */
.mv-section {
  width: 100%;
  padding: 80px 0; /* 上下の余白 */
  background-color: #fff;
  text-align: center;
  font-family: "Times New Roman", "Shippori Mincho", "Yu Mincho", serif;
  color: #333;
}

.mv-container {
  max-width: 1000px; /* 画像の最大幅に合わせて調整してください */
  margin: 0 auto;
  padding: 0 20px;
}

/* 画像部分 */
.mv-image img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 60px; /* 画像とテキストの間の余白 */
}

/* 英語表記 */
.mv-english {
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 30px;
  color: #666;
}

/* キャッチコピー */
.mv-catchcopy {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.1em;
  margin-bottom: 40px;
}

/* 説明文 */
.mv-description {
  font-size: 15px;
  line-height: 2.2;
  letter-spacing: 0.05em;
  color: #444;
}

/* レスポンシブ調整（スマホ用） */
@media (max-width: 768px) {
  .mv-section {
    padding: 40px 0;
  }
  .mv-image img {
    margin-bottom: 40px;
  }
  .mv-catchcopy {
    font-size: 22px; /* スマホでは少し小さく */
  }
  .mv-description {
    font-size: 14px;
    text-align: left; /* スマホで長文なら左寄せor中央維持はお好みで */
    display: inline-block;
    text-align: center;
  }
}

.flex-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 100px;
  gap: 60px;
}

/* 偶数番目は左右反転させる設定 */
.flex-item:nth-child(even) {
  flex-direction: row-reverse;
}

.flex-text {
  flex: 0 0 40%;
}

.flex-image {
  flex: 0 0 55%;
  min-width: 0; /* Swiper崩れ防止 */
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.image-grid img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.heading-group {
  margin-bottom: 30px;
}

.en-title {
  display: block;
  font-family: 'Times New Roman', serif; /* 英語はセリフ体 */
  font-size: 13px;
  text-transform: uppercase; /* 大文字に強制 */
  letter-spacing: 0.3em;      /* 文字間を広く取るのがコツ */
  color: #a8916e;            /* 上品なシャンパンゴールド */
  margin-bottom: 12px;
}

.jp-title {
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: #333;
}

.swiper {
  width: 100%;
  padding-bottom: 30px; /* ページネーション用の余白 */
}

.swiper-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* ページネーションのカスタマイズ（色などをサイトに合わせる） */
.swiper-pagination-bullet-active {
  background: #b89b5e; /* 高級感のあるゴールド系など */
}


@media (max-width: 768px) {
  /* 1. 全体の並びを「上：テキスト、下：画像」に統一 */
  .flex-item, 
  .flex-item.is-reverse {
    display: flex;
    flex-direction: column; /* row-reverseを解除し、記述順（縦）にする */
    gap: 24px; /* テキストと画像の間隔 */
    margin-bottom: 60px; /* セクション同士の間隔 */
  }

  /* 2. 幅の解除と余白の調整 */
  .flex-text, 
  .flex-image {
    width: 100%;
    flex: 0 0 auto;
    max-width: 100%;
  }

  /* 3. 見出し周りの微調整（スマホで読みやすく） */
  .heading-group {
    margin-bottom: 15px;
    text-align: center; /* 必要に応じて中央揃えに */
  }

  .jp-title {
    font-size: 20px; /* PCより少し小さく */
  }

  /* 4. スライダー（画像）が消えないための設定 */
  .flex-image {
    min-height: 250px; 
    min-width: 0;
    overflow: hidden;
  }

  .mySwiper {
    width: 100%;
  }

  .mySwiper .swiper-slide img {
    width: 100%;
    aspect-ratio: 3 / 2; /* 高さを確保する */
    object-fit: cover;
  }
}

  .swiper-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2; /* 比率を固定して高さを出す */
    object-fit: cover;
  }
}

/* 背景画像エリア */
.schedule-bg-header {
  background-image: url('https://thecreativestudio.net/common/img/mv/img_03.jpg'); /* 添付画像のテーブルフォト */
  background-size: cover;
  background-position: center;
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
}

.header-content {
  text-align: center;
  z-index: 2;
}

/* 白いキャンバス */
.schedule-inner-canvas {
  max-width: 800px;
  margin: -100px auto 0; /* 上の画像に食い込ませる */
  background: #fff;
  padding: 80px 40px;
  position: relative;
  z-index: 3;
  text-align: center;
}

.schedule-intro {
  line-height: 2.2;
  margin-bottom: 60px;
  color: #333;
}

/* タイムライン（左寄せ） */
.timeline-container {
  max-width: 500px;
  margin: 0 auto;
  text-align: left;
  border-left: 1px solid #a8c8d8; /* 左側の縦線 */
  padding-left: 0;
  position: relative;
}

.timeline-item {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 30px;
  padding-left: 20px;
}

/* 時間表示 */
.time {
  width: 60px;
  color: #a8c8d8;
  font-family: 'Times New Roman', serif;
  font-size: 18px;
  margin-right: 15px;
  text-align: right;
}

/* ドットと点線 */
.timeline-marker {
  display: flex;
  align-items: center;
  flex-grow: 0;
}

.dot {
  width: 8px;
  height: 8px;
  background-color: #a8c8d8;
  border-radius: 50%;
  position: absolute;
  left: -4.5px; /* 縦線の上に重ねる */
}

.dash-line {
  width: 40px;
  border-bottom: 1px dotted #a8c8d8;
  margin: 0 15px;
}

.event-text {
  color: #a8c8d8;
  font-size: 15px;
  margin: 0;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .schedule-inner-canvas {
    margin: -50px 20px 0;
    padding: 40px 20px;
  }
  .time {
    font-size: 14px;
    width: 40px;
  }
  .dash-line {
    width: 20px;
  }
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.gallery-item {
  text-align: center;
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.gallery-item .name {
  margin-top: 15px;
  font-size: 14px;
}

/* スマホ対応（768px以下） */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr); /* SPは2枚横並び */
    gap: 10px; /* 画面が狭いので余白を少し詰める */
  }

  .gallery-item .name {
    font-size: 12px; /* 文字が重ならないよう少し小さめに */
    margin-top: 10px;
  }
}