@charset "UTF-8";

/* ==========================================
   共通設定・アニメーション定義
========================================== */


/*2025 font "LINE Seed"=*/
/* nomal */
@font-face {
  font-family: 'LINESeedJP';
  src: url('../font/LINESeedJP_OTF_Rg.woff2') format('woff2'),
    url('../font/LINESeedJP_OTF_Rg.woff') format('woff');
  font-weight: normal;
  font-weight: 400;
  font-style: normal;
}

/* bold */
@font-face {
  font-family: 'LINESeedJP';
  src: url('../font/LINESeedJP_OTF_Bd.woff2') format('woff2'),
    url('../font/LINESeedJP_OTF_Bd.woff') format('woff');
  font-weight: bold;
  font-weight: 700;
  font-style: normal;
}

/* EX bold */
@font-face {
  font-family: 'LINESeedJP';
  src: url('../font/LINESeedJP_OTF_Eb.woff2') format('woff2'),
    url('../font/LINESeedJP_OTF_Eb.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}


html {
  scroll-behavior: smooth;
  font-size: 66.5%;
  background: #02afce;
  max-width: 1900px;
  margin: auto;
}

body {
  margin: 0;
  padding: 0;
  background: #f0fbfd;
  font-family: 'LINESeedJP', "Noto Sans JP", sans-serif;
  font-weight: normal;
  font-size: 1.4rem;
  padding-top: 0;
}

img {
  width: 100%;
}

#airtrip-fes-lp {
  overflow: hidden;
}

/* スクロールで下から出てくる要素 */
.js-fadein {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.js-fadein.is-active {
  opacity: 1;
  transform: translateY(0);
}

.c_wrap {
  width: 100%;
  max-width: 1200px;
  padding: 60px 20px;
  margin: 0 auto;
  position: relative;
}

h2 {
  font-size: 3rem;
  /* 3emから変更 */
  font-weight: bold;
  color: #0D4F91;
}

.txt-sup {
  font-size: 1.1rem;
  display: block;
  line-height: 1.5rem;
}



/* ==========================================
   ヘッダー（ナビゲーション）
========================================== */
#fes-header {
  position: fixed;
  top: 20px;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  justify-content: center;
  padding: 0 20px;
  box-sizing: border-box;
  transition: 0.4s ease;

}

#fes-header a:hover {
  opacity: .6;

}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  height: 65px;
  background-color: #ffffffe1;
  border-radius: 50px;
  padding: 0 40px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  position: relative;
  /* ハンバーガー基準用 */
}

.header-logo img {
  height: 30px;
  width: auto;
  display: block;
}

/* PC用ナビ */
.header-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 25px;
}

.nav-list a {
  text-decoration: none;
  color: #4b74b1;
  font-weight: bold;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  transition: opacity 0.3s;
}

.header-btn {
  display: inline-block;
  background-color: #17b6c7;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.6rem;
  padding: 10px 20px;
  border-radius: 30px;
  transition: background-color 0.3s;
}

/* ハンバーガーボタン（デフォルト非表示） */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 1100;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 2px;
  background: #4b74b1;
  position: absolute;
  left: 7.5px;
  transition: 0.3s;
}

.hamburger span:nth-child(1) {
  top: 12px;
}

.hamburger span:nth-child(2) {
  top: 19px;
}

.hamburger span:nth-child(3) {
  top: 26px;
}

/* ハンバーガー変形(×) */
.hamburger.is-active span:nth-child(1) {
  top: 19px;
  transform: rotate(45deg);
}

.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.hamburger.is-active span:nth-child(3) {
  top: 19px;
  transform: rotate(-45deg);
}

/* ==========================================
   スマホ調整（1000px以下）
========================================== */
@media screen and (max-width: 1000px) {
  .header-inner {
    padding: 0 20px;
    /* 端の余白を少し詰める */
  }

  .hamburger {
    display: block;
    /* スマホで表示 */
  }

  .header-nav {
    position: fixed;
    top: 0;
    right: -100%;
    /* 隠す */
    width: 60%;
    height: 100vh;
    background: #fff;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    transition: 0.4s ease;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    z-index: 1050;
  }

  .header-nav.is-active {
    right: 0;
    /* 表示 */
  }

  .nav-list {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
}

/* ==========================================
   MV（メインビジュアル）完全版
========================================= */
.lp-mv {
  position: relative;
  width: 100%;
  height: 100vh;
  /* 画面目一杯 */
  overflow: hidden;
  /* はみ出しブロック */
  background-color: #5d99b2;
  /* 予備の背景色 */
}

/* ★背景レイヤーの重ね合わせスタイル ★ */
.mv-background-layers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  object-fit: cover;
  /* 最背面 */
}

/* 1. 群衆背景 (mvbg.webp) */
.mv-base-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 比率を保って画面を覆う */
  display: block;
}

/* 2. 集中線 (syutyu.png) */
.mv-speed-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 104%;
  height: 100%;
  opacity: 0.8;
  pointer-events: none;
  object-fit: cover;
  object-position: center center;
}

/* コンテンツレイヤー */
.lp-mv-inner {
  position: relative;
  z-index: 2;
  /* 背景よりも手前 */
  width: 100%;
  height: 100%;
}

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

  .lp-mv {
    height: 85vh;
  }

  .img2.js-mv-anim,
  .img5.js-mv-anim {
    display: none;
  }

  .mv-speed-lines {
    position: absolute;
    /* ▼ 魔法のど真ん中配置 ▼ */
    top: 20%;
    left: 54%;
    transform: translate(-50%, -50%);

    /* ▼ 画像を画面より大きくする（足りなければ200%とかにしてください） ▼ */
    width: 150%;
    height: 150%;

    /* ▼ 比率を保ったまま綺麗に広げる ▼ */
    object-fit: cover;
    opacity: 0.8;
    pointer-events: none;
  }
}


/* ==========================================
   ふわふわ写真の再配置・アニメーション
========================================== */
/* ★ふわふわアニメーションの定義 */
@keyframes floatAnim {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* 写真を入れるコンテナ */
.mv-floating-items {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ★ 浮かぶ写真のベース（サイズを % に変更！） */
.float-img {
  position: absolute;
  width: 10%;
  max-width: 220px;
  min-width: 100px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  animation: floatAnim 6s ease-in-out infinite;
}

/* ==========================================
   ★ 浮かぶ写真の配置（ヘッダー絶対回避版） ★
========================================== */

/* 左側の3枚 */
/* ヘッダー(約85px)＋フワフワ浮く分(20px)＋余白 ＝ 130px は絶対に開ける！ */
.float-img.img1 {
  top: 130px;
  left: 4%;
  animation-delay: 0s;
}

/* 真ん中は%指定で画面の中央付近をキープ */
.float-img.img2 {
  top: 45%;
  left: 2%;
  animation-delay: -1s;
}

/* 一番下も青い帯(約60px)に絶対被らないように bottom を固定pxで指定！ */
.float-img.img3 {
  bottom: 90px;
  left: 5%;
  top: auto;
  animation-delay: -2s;
}

/* 右側の3枚 */
/* こちらも同様に上130px、下90pxの絶対安全圏を守る！ */
.float-img.img4 {
  top: 130px;
  right: 4%;
  left: auto;
  animation-delay: -0.5s;
}

.float-img.img5 {
  top: 45%;
  right: 2%;
  left: auto;
  animation-delay: -1.5s;
}

.float-img.img6 {
  bottom: 90px;
  right: 5%;
  left: auto;
  top: auto;
  animation-delay: -2.5s;
}


/* ==========================================
   中央テキスト ＆ バッジのセット配置
========================================== */
/* ★中央テキストとバッジを入れる共通の箱（追加） */
.mv-center-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 900px;
  z-index: 10;
}

/* 4. 中央テキストアセット (mvtxt.png) */
.mv-center-content {
  width: 90%;
  padding: 0 50px;
  box-sizing: border-box;
  margin: auto;
}

.mv-title-txt {
  width: 100%;
  height: auto;
  display: block;
}

.mv-title-txt.sp_txt {
  display: none;
}

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

  .mv-title-txt.sp_txt {
    display: block;
  }

  .mv-title-txt.pc_txt {
    display: none;
  }

  .mv-center-content {
    padding: 0 20px;
  }
}

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

  .mv-center-content {
    padding: 0 5px;
  }
}

/* 5. 右下：参加人数バッジ (san_nin_2000.png) */
.mv-badge {
  position: absolute;
  bottom: -20px;
  right: 0px;
  width: 15%;
  z-index: 10;
  max-width: 150px;
}

.mv-badge-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================
   一番下の青い帯（テキスト）追加
========================================== */
.mv-bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #007bc7;
  color: #fff;
  text-align: center;
  padding: 15px 0;
  z-index: 5;
  font-weight: 500;
}

.mv-bottom-bar img {
  max-width: 180px;
  margin-right: 5px;
}

.mv-bottom-bar p {
  margin: 0;
  font-size: 1.6rem;
  /* 16pxから変更 */
  letter-spacing: 0.05em;
  font-weight: bold;
}

.mv-bottom-bar .sp {
  display: none;
}

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



  .mv-bottom-bar {
    padding: 10px 5px;
    text-align: center;
  }

  .mv-bottom-bar .sp {
    display: block;
  }

  .mv-bottom-bar p {
    margin: 0;
    font-size: 1.4rem;
    letter-spacing: 0.15em;
  }

  .mv-bottom-bar img {
    max-width: 120px;
    margin-bottom: 2px;
  }
}


/* ==========================================
   アニメーション（背景 → 中央テキスト）
========================================== */
/* ==========================================
   MV アニメーション（超スピード＆ボヨーン効果）
========================================== */

/* 1. 全てのアニメーション要素の「共通ベース」 */
.js-mv-anim {
  opacity: 0;
  /* ★共通の「めちゃハヤ＆ボヨーン」の動きを設定 */
  transition: opacity 0.3s ease-out, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ==========================================
   2. 各要素の「初期状態」の微調整
========================================== */
/* ① 中央テキスト（バグを防ぐため scale だけで動かす） */
.mv-center-content.js-mv-anim {
  transform: scale(0.9);
}

/* ② 右下バッジ（少し小さく、下から） */
.mv-badge.js-mv-anim {
  transform: scale(0.8) translateY(20px);
}

/* ③ 浮遊写真たち（一番小さく、下から飛び出させる） */
.float-img.js-mv-anim {
  transform: scale(0.6) translateY(20px);
}

/* ==========================================
   3. JSでクラスが付いた時の「ゴール状態（共通）」
========================================== */
.js-mv-anim.is-active {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ==========================================
   4. 出現の順番とタイミング（遅延：delay）
========================================== */
/* ① MVテキスト（一番最初） */
.mv-center-content.js-mv-anim {
  transition-delay: 0s;
}

/* ② バッジ（テキストの直後） */
.mv-badge.js-mv-anim {
  transition-delay: 0.15s;
}

/* ③ 浮遊写真たち（バッジの後、0.1秒間隔でめちゃハヤ連射！） */
/* 順番: 1 → 6 → 3 → 4 → 2 → 5 */
.img1.js-mv-anim {
  transition-delay: 0.3s;
}

.img6.js-mv-anim {
  transition-delay: 0.4s;
}

.img3.js-mv-anim {
  transition-delay: 0.5s;
}

.img4.js-mv-anim {
  transition-delay: 0.6s;
}

.img2.js-mv-anim {
  transition-delay: 0.7s;
}

.img5.js-mv-anim {
  transition-delay: 0.8s;
}

/* ==========================================
   ポップアップ（モーダル）
========================================== */
.lp-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
}

.lp-modal.is-open {
  display: flex;
  justify-content: center;
  align-items: center;
}

.lp-modal-content {
  background: #fff;
  padding: 40px;
  width: 90%;
  max-width: 600px;
  position: relative;
}

.header-inner .lp-modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 2.4rem;
  /* 24pxから変更 */
  background: none;
  border: none;
  cursor: pointer;
}

@media screen and (max-width: 600px) {
  .mv-badge {
    width: 20%;
  }
}

/* ==========================================
   ABOUTセクション（What is & 強み）
========================================== */
.about-section {
  /* ★ 後ろの背景画像を設定 */
  background-image: url('./image/bg01.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ★ 指定いただいたコンテナ幅設定（もし消えていたら追記してください） */
.c_wrap {
  width: 100%;
  max-width: 1200px;
  padding: 60px 20px;
  margin: 0 auto;
  position: relative;
}

/* --- ブロック全体のレイアウト --- */
.about-block {
  display: flex;
  align-items: center;
  margin-bottom: 80px;
  /* 上下のブロック間の余白 */
}

/* 強みブロックはHTMLの順序（画像→テキスト）でそのまま横並び */
.block-strength {
  flex-direction: row;
}

.about-text-box {
  border-radius: 20px;
  padding: 50px;
  color: #fff;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 2;
}

/* 1つ目：水色グラデーション（★ ここに左突っ切りの魔法を統合！） */
.bg-blue {
  background: linear-gradient(135deg, #00d2ff 0%, #0076ff 100%);
  box-sizing: border-box;

  /* 画面の左端まで箱を引っ張る */
  margin-left: calc(50% - 50vw);
  /* 引っ張った分だけ、文字を右に押し戻す（元の余白50pxを足す） */
  padding-left: calc(50vw - 50% + 50px);
  /* 引っ張った分だけ、箱の横幅を広げる（元の幅60%を足す） */
  width: calc(60% + 50vw - 50%);

  /* 左側の角丸を消して画面端にピタッとくっつける */
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* ==========================================
   2つ目：青紫グラデーション（★ 右突っ切り ＆ 文字被り回避 統合版！）
========================================== */
.bg-purple-blue {
  background: linear-gradient(135deg, #7b81ec 0%, #3bd1ff 100%);
  box-sizing: border-box;

  /* ① 画面の右端まで箱を引っ張る（左の時と逆になります） */
  margin-right: calc(50% - 50vw);

  /* ② 引っ張った分だけ、右側の余白を広げる */
  padding-right: calc(50vw - 50% + 50px);

  /* ③ 引っ張った分だけ、箱の横幅を広げる（元の65% ＋ 引っ張った距離） */
  width: calc(65% + 50vw - 50%);

  /* ④ 右側の角丸を真っ直ぐにして、画面右端にピタッとくっつける */
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;

  /* ★ 追加：文字がグラフに被らないように、左側の内側余白(padding)を広くとる！ */
  padding-left: 100px;
}


/* ==========================================
   ★ オーバーラップ（重なり）の微調整
========================================== */
.block-whatis .about-media-box {
  margin-left: -5%;
  /* そのまま */
  margin-top: 40px;
}

.block-strength .about-text-box {
  margin-left: -8%;
  /* 食い込みすぎないように -10% から -8% に少し弱めました */
  margin-top: 40px;
}


/* ==========================================
   --- レスポンシブ（スマホ対応）にも追加 ---
========================================== */
@media screen and (max-width: 768px) {

  .about-block,
  .block-strength {
    flex-direction: column;
  }

  .bg-purple-blue,
  .about-media-box {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: -30px !important;
  }

  /* 左突っ切りの解除 */
  .bg-blue {
    padding-left: 20px !important;
    border-radius: 20px !important;
  }

  /* ★ 右突っ切り ＆ 文字逃がし の解除（スマホ用に追加！） */
  .bg-purple-blue {
    margin-right: 0 !important;
    padding-right: 20px !important;
    padding-left: 20px !important;
    /* 広げた左余白も元に戻す */
    border-radius: 20px !important;
  }

  .block-strength .about-media-box {
    margin-bottom: -30px;
    margin-top: 0 !important;
  }

  .about-text-box {
    padding: 30px 20px;
  }

  .strength-list li {
    width: 100%;
  }
}


@media screen and (max-width: 768px) {
  .c_wrap {
    padding: 10% 20px;
  }
}

/* --- メディアボックス（動画・グラフ / 手前に重なる） --- */
.about-media-box {
  width: 45%;
  position: relative;
  z-index: 3;
  /* ★テキストより手前に出す！（念のためz-indexを3にしました） */
}

/* ★ オーバーラップ（重なり）の魔法（ネガティブマージン） ★ */
.block-whatis .about-media-box {
  margin-left: -5%;
  /* 左側のテキストボックスに 5% 分食い込ませる */
  margin-top: 40px;
  /* 少し下にずらす */
}

.block-strength .about-text-box {
  margin-left: -10%;
  /* 左側のグラフに 10% 分食い込ませる */
  margin-top: 40px;
  /* 少し下にずらす */
}

/* 動画のスタイル */
.video-wrapper video {
  width: 100%;
  height: auto;
  border-radius: 15px;
  display: block;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  background: #000;
}

/* 動画の再生ボタン（CSSで丸と三角を作る） */
.play-btn-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.6);
  border: 4px solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.play-btn-overlay::after {
  content: '';
  display: block;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 25px solid #fff;
  margin-left: 10px;
  /* 三角の位置調整 */
}

/* グラフ画像のスタイル */
.graph-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.15));
  /* 透過画像にも影をつける */
}

/* --- タイトルやテキストの細かい装飾 --- */
#about h2 {
  font-size: 2.8rem;
  margin-top: 0;
  margin-bottom: 30px;
  letter-spacing: 0.05em;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  color: #fff;
  filter: drop-shadow(5px 4px 6px #0000004a);
}

#about h2 figure {
  width: 60%;
}

#about h2 span {
  font-size: 4.4rem;
  /* 44pxから変更 */
}

/* What is のテキスト */
.block-whatis .lead {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 10px;
  line-height: 1.6;
}

#about .desc {
  font-size: 1.5rem;
  line-height: 1.6;
  margin: 0;
  margin-right: 20px;
}

/* 強みのリスト（黄色いチェックマークをCSSで再現） */
.strength-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
  display: flex;
  flex-wrap: wrap;
  /* 2列にする設定 */
  gap: 15px 20px;
}

.strength-list li {
  font-size: 1.6rem;
  /* 16pxから変更 */
  font-weight: bold;
  display: flex;
  align-items: center;
  width: calc(50% - 10px);
  /* 半分ずつ（2カラム）にする */
}

.strength-list li::before {
  content: '✔';
  /* チェックマーク */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  background: #e2c14c;
  /* 黄色 */
  color: #ffffff !important;
  border-radius: 50%;
  font-size: 1.2rem;
  /* 12pxから変更 */
  margin-right: 10px;
  flex-shrink: 0;
}

.strength-list li small {
  font-size: 1.2rem;
  /* 12pxから変更 */
  font-weight: normal;
  margin-left: 5px;
  display: block;
}

.strength-bottom-text {
  font-size: 1.6rem;
  /* 16pxから変更 */
  margin: 0;
  line-height: 1.6;
}

/* --- レスポンシブ（スマホ対応） --- */
@media screen and (max-width: 768px) {

  .about-block,
  .block-strength {
    flex-direction: column;
  }

  .about-block {
    margin-bottom: 30px;
  }

  .block-strength {
    margin-bottom: 0;
  }

  .about-text-box,
  .bg-blue,
  .bg-purple-blue,
  .about-media-box {
    width: 100%;
    /* スマホでは全幅に */
    margin-left: 0;
    /* 横の食い込みや左突っ切りをリセット */
    margin-top: -30px;
    /* 代わりに上下で食い込ませる */
  }

  .about-text-box,
  .bg-blue {
    margin-top: 10px;
  }

  /* ★ 左突っ切りの解除（スマホ用） */
  .bg-blue {
    padding-left: 20px;
    /* スマホ用の余白に戻す */
    border-radius: 20px;
    /* スマホでは角丸を復活させる */
  }

  .block-strength .about-media-box {
    margin-bottom: -30px;
    margin-top: 0;
  }

  .about-text-box {
    padding: 30px 20px;
  }

  .strength-list li {
    width: 100%;
    /* スマホは1カラム（1列） */
  }

  #about .desc {
    margin-right: 0;
  }

}

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

  #about .block-strength h2 {
    line-height: 0;
    margin-top: 30px;
    font-size: 2rem;
    align-items: center;

  }

}

/* ==========================================
   ギャラリー（無限スクロール）
========================================== */
.gallery-section {
  margin-top: -30px;
  overflow: hidden;
  /* 画面外へのはみ出しを隠す */
  background-color: transparent;
  /* 背景はそのまま */
}

.gallery-wrapper {
  width: 100%;
  overflow: hidden;
}

/* ★ 無限ループのアニメーション定義 ★ */
@keyframes infiniteGallery {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }

  /* 全体の半分の位置（1セット目の終わり）まで移動したら0%に戻る */
}

/* 写真を横一列に並べて動かすレール */
.gallery-track {
  display: flex;
  width: max-content;
  /* 中身の写真の合計サイズに合わせて幅を広げる */
  animation: infiniteGallery 20s linear infinite;
  /* 50秒かけて一定の速度（linear）で無限ループ */
}

/* 1枚1枚の写真の枠 */
.gallery-item {
  width: 320px;
  /* 写真の横幅（スマホとPCで変えたい場合はメディアクエリで調整） */
  margin: 0 5px;
  /* 写真と写真の隙間（左右に15pxずつ） */
  flex-shrink: 0;
  /* 画面が狭くても写真を縮ませない */
}

/* 写真本体の設定 */
.gallery-item img {
  width: 100%;
  height: 200px;
  /* 高さをピシッと揃える（ガタガタ防止） */
  object-fit: cover;
  /* 写真の縦横比がバラバラでも、枠に合わせて綺麗にトリミングする魔法 */
  border-radius: 5px;
  /* 少し角を丸くして柔らかい印象に */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  /* フワッとした影をつける */
  display: block;
}

/* --- レスポンシブ（スマホ対応） --- */
@media screen and (max-width: 768px) {
  .gallery-item {
    width: 240px;
    /* スマホでは少し写真を小さくする */
    margin: 0 10px;
    /* 隙間も少し狭くする */
  }

  .gallery-item img {
    height: 160px;
    /* 高さもスマホサイズに合わせる */
  }
}

/* ==========================================
   Talk Session（背景固定・改変版）
========================================= */
.talk-session {
  /* ★ 後ろの背景画像を再指定。ファイル名は適宜用意してください（例：bg02.png） */
  background-image: url(./image/bg02.png);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* パララックス（背景追従） 必要になったら*/
  /* padding: 100px 0; */
  /* min-height: 80vh; */
}

/* タイトル（ユーザー提供済み） */
.talk-session h2 {
  font-size: 3rem;
  /* 3emから変更 */
  font-weight: bold;
  color: #0D4F91;
  margin-top: 0;
  margin-bottom: 50px;
  /* ★白いボックスとの間隔を追加 */
}

.session-card {
  display: flex;
  justify-content: space-between;
  /* flex-wrap: wrap; */
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  align-items: flex-start;
  margin-bottom: 30px;
}

.session-card:last-of-type {
  margin-bottom: 0;
}


.time-label {
  background: #0d2a45;
  color: #fff;
  display: flex;
  border-radius: 20px 0 20px 0;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  /* width: 6%; */
  height: ;
  font-weight: bold;
}

.card-content {
  width: 90%;
  padding: 20px 10px 30px;
  font-size: 1.4rem;
}

.card-content h3 {
  font-weight: bold;
  font-size: 1.6rem;
  margin-bottom: 10px;
}

.card-content.soon {
  width: 100%;
  text-align: center;
  padding: 50px 20px;
}

.card-content.soon h3 {
  font-weight: bold;
  font-size: 1.6rem;
  margin-bottom: 0;
  color: #8c8787;
}

.session-desc {
  margin-bottom: 30px;
}

/* 3つ目：登壇者リスト（横並びにする） */
.speakers-list {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  /* 登壇者同士の間隔 */
}

.speaker-item {
  display: flex;
  align-items: center;
  gap: 15px;
  /* flex: 1; */
  width: 45%;
  /* ★均等に配置 */
}

/* アバター（丸）とモデレータータグのラップ */
.avatar-wrap {
  position: relative;
  width: 100px;
  height: 100px;
}

.avatar-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  /* ★丸くする */
  object-fit: cover;
  display: block;
}

/* モデレータータグ（アバターの左下に配置） */
.moderator-tag {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #0d2a45;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 5px 15px;
  border-radius: 20px;
  white-space: nowrap;
  z-index: 1;
}


/* 登壇者情報（テキスト） */
.speaker-name {
  font-weight: bold;
  color: #333;
  margin: 0 0 5px 0;
}

.speaker-title {
  font-size: 1.2rem;
  line-height: 1.4;
  color: #666;
  margin: 0;
}

@media screen and (max-width: 768px) {
  .session-card {
    display: block;
  }

  .card-content {
    width: 100%;
  }

  .time-label {
    display: block;
    border-radius: 0;
    padding: 10px;
    border-radius: 20px 20px 0 0;
  }

  .session-card span.hyphen {
    display: inline-block;
    /* ★これがないと回転しません！ */
    transform: rotate(90deg);
    /* ★90度回転させて横棒にする */
  }

  .speaker-item {
    width: 100%;
  }
}

@media screen and (max-width: 600px) {
  .card-content.soon {
    padding: 30px 20px;
  }
}




/* ==========================================
   SPONSOR（色変更）
========================================== */
.sponsor {
  /* ★ 指定の背景色に変更 */
  background-color: #50A2D2;
}

.sponsor h2 {
  font-size: 3rem;
  font-weight: bold;
  /* ★ 白文字に変更 */
  color: #fff;
  text-align: center;
  margin-bottom: 40px;
}

#sponsor-swiper {
  margin-bottom: 40px;
  padding: 10px;
}

.js-open-modal {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 100%;
  display: block;
}

.js-open-modal img {
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  display: block;
  transition: transform 0.3s, opacity 0.3s;
}

.js-open-modal:hover img {
  transform: scale(1.05);
  opacity: 0.8;
}

.sponsor-more {
  text-align: center;
}

.btn-more {
  display: inline-block;
  background-color: #0D4F91;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.6rem;
  padding: 12px 30px;
  border-radius: 30px;
  transition: background-color 0.3s, transform 0.2s;
}

.btn-more:hover {
  background-color: #0d2a45;
  transform: translateY(-2px);
}

@media screen and (max-width: 768px) {
  #sponsor-swiper {
    padding: 0;
  }
}

/* ==========================================
   FAQ（背景画像 ＆ スムース開閉）
========================================== */
.faq-section {
  /* padding: 80px 0 100px; */
  /* ★ ユーザー指定の画像背景に変更（円の模様は削除） */
  background-image: url('./image/bg03.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.faq-section h2 {
  font-size: 3rem;
  font-weight: bold;
  color: #0D4F91;
  text-align: center;
  margin-bottom: 50px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.faq-item {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.faq-question {
  display: flex;
  align-items: center;
  padding: 20px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s;
}

.faq-question:hover {
  background-color: #f9feff;
}

.q-icon {
  font-size: 1.8rem;
  font-weight: bold;
  color: #0D4F91;
  margin-right: 15px;
  flex-shrink: 0;
}

.q-text {
  font-size: 1.6rem;
  font-weight: bold;
  color: #333;
  flex: 1;
}

/* ★ ＋/ー アイコンをCSSで制御（JSの手間を減らして綺麗に） */
.faq-icon {
  font-size: 2rem;
  font-weight: bold;
  color: #4b74b1;
  margin-left: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
}

.faq-icon::before {
  content: '＋';
}

.faq-item.is-open .faq-icon::before {
  content: 'ー';
}

.faq-item.is-open .faq-question {
  background-color: #f9feff;
}

/* ★ ヌルッと開く魔法（CSS Gridを使用） */
.faq-answer-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  /* 閉じた状態（高さゼロ） */
  transition: grid-template-rows 0.4s ease-out;
  /* スムースなアニメーション */
}

.faq-item.is-open .faq-answer-wrapper {
  grid-template-rows: 1fr;
  /* 開いた状態（中身に合わせた高さ） */
}

.faq-answer-inner {
  overflow: hidden;
  /* 高さが変わる時に中身を隠す */
  display: flex;
  padding: 0 20px;
  /* 横の余白だけ指定（上下はJSで開いた時に付与） */
}

.a-icon {
  font-size: 1.8rem;
  font-weight: bold;
  color: #e24e4c;
  margin-right: 15px;
  flex-shrink: 0;
}

.a-text {
  font-size: 1.4rem;
  line-height: 1.8;
  color: #666;
}

.a-text a {
  color: #0D4F91;
  text-decoration: none;
}

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

@media screen and (max-width: 768px) {
  .faq-section {
    /* padding: 60px 0 80px; */
  }

  .q-text {
    font-size: 1.4rem;
  }

  .a-text {
    font-size: 1.3rem;
  }
}


/* ==========================================
   開催概要（Google Map フルブリード）
========================================== */
.overview-section {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background-image: url('./image/bg04.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
}

/* 左半分：テキストエリア */
.overview-text-area {
  width: 60%;
  padding: 30px 2% 20px 10%;
  /* 地図が右にくっつく分、左側に余白を取る */
  box-sizing: border-box;
  /* background: #000; */

}

.overview-text-inner {
  max-width: 700px;
  margin-left: auto;
  /* 画面が大きくなってもテキストが中央寄りに保たれるように */
}

.overview-text-inner h3 {
  font-size: 2.8rem;
  font-weight: bold;
  color: #fff;
  display: inline-block;
  margin-bottom: 40px;
}

.overview-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.overview-item {
  display: flex;
  align-items: flex-start;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.overview-list dt {
  width: 130px;
  font-size: 1.6rem;
  font-weight: bold;
  color: #fff;
  flex-shrink: 0;
}

.overview-list dd {
  font-size: 1.4rem;
  line-height: 1.8;
  color: #fff;
  margin: 0;
  flex: 1;
}

.txt_indent {
  padding-left: 1.2em;
  text-indent: -1.2em;
  line-height: 1.4;
}

/* 右半分：マップエリア（余白ゼロ） */
.overview-map-area {
  width: 40%;
  /* 画面の右半分を完全に占領 */
  min-height: 500px;
  /* 最低限の高さ */
}

/* iframeが隙間なく埋まるように設定 */
.overview-map-area iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
  filter: hue-rotate(30deg);
  -webkit-filter: hue-rotate(30deg)
}

@media screen and (max-width: 480px) {
  .overview-section .txt_indent {
    margin-bottom: 5px;
  }
}

/* --- レスポンシブ（スマホ時は縦並びに） --- */
@media screen and (max-width: 900px) {
  .overview-section {
    flex-direction: column;
  }

  .overview-text-area,
  .overview-map-area {
    width: 100%;
  }

  .overview-text-area {
    padding: 60px 20px;
    /* スマホ時の余白 */
  }

  .overview-text-inner {
    margin-left: 0;
    width: 100%;
    max-width: unset;
  }

  .overview-map-area {
    height: 400px;
    /* スマホ時のマップの高さ */
  }
}

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

  .overview-map-area {
    max-height: 350px;
    min-height: 100px;
  }
}


@media screen and (max-width: 480px) {
  .overview-map-area {
    max-height: 250px;
  }

  .overview-list dt {
    font-size: 1.4rem;
    width: 100px;
  }
}



/* ポップアップ（モーダルのCSSは前回と同じなのでそのまま残してください） */

/* ==========================================
   参加表明セクション
========================================== */
.sns-section {
  /* 画像に近い青〜水色のグラデーション */
  /* background: linear-gradient(180deg, #186bc9 0%, #3bc4cc 100%); */
  /* padding: 80px 0 100px; */
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 10;
  margin-top: 100px;
  /* border-radius: 50% 50% 0 0 / 150px 150px 0 0; */
  background-image: url('./image/bg05.png');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  padding: 0;
}

/* タイトルを白文字に上書き */
.sns-section h2 {
  color: #fff;
  font-size: 3rem;
  margin-bottom: 20px;
}

.sns-lead {
  font-size: 1.6rem;
  line-height: 1.8;
  margin-bottom: 40px;
  font-weight: bold;
}

/* テンプレート画像横並び */
.sns-templates {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 50px;
}

.sns-templates img {
  width: 25%;
  max-width: 220px;
  /* 大きくなりすぎないようにストッパー */
  height: auto;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  /* 画像に少し影をつける */
  border-radius: 5px;
  /* お好みで角丸 */
}

/* 作成するボタン（淡いグリーン〜水色） */
.btn-create {
  display: inline-block;
  background: linear-gradient(135deg, #7ad2b3, #65c8cc);
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  padding: 15px 60px;
  border-radius: 40px;
  /* ピル型 */
  text-decoration: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s, opacity 0.3s;
}

.btn-create:hover {
  transform: translateY(-3px);
  opacity: 0.9;
}

/* ==========================================
   モーダル内：SNSシェアボタン
========================================== */
.sns-share-area {
  display: none;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px dashed #ccc;
  text-align: center;
}

.sns-share-area.is-active {
  display: block;
  animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

.share-note {
  font-size: 1.2rem;
  color: #d32f2f;
  margin-bottom: 15px;
  line-height: 1.4;
  font-weight: bold;
}

.share-btn-group {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-weight: bold;
  font-size: 1.4rem;
  cursor: pointer;
  width: 100%;
  transition: opacity 0.3s, transform 0.2s;
}

.share-btn:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

/* 𝕏 のブランドカラー（黒） */
.btn-x {
  background-color: #000000;
}

/* Facebookのブランドカラー（青） */
.btn-fb {
  background-color: #1877F2;
}


/* ==========================================
   お問い合わせセクション
========================================== */
.contact-section {
  /* ★ ユーザー様で用意される背景画像（bg5.png等）を指定してください */
  background-image: url('./image/bg06.png');
  background-size: cover;
  background-position: center;
  background-position: bottom center;
}

.contact-section h2 {
  font-size: 3rem;
  font-weight: bold;
  color: #12284c;
  /* デザイン画像に近い少し濃いめの青 */
  margin-bottom: 50px;
  text-align: center;
}

/* フォームを囲む白いカード */
.form-wrapper {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  /* ふんわりした影 */
  max-width: 800px;
  margin: 0 auto;
  /* 中央寄せ */
  padding: 40px;
}

/* iframe（埋め込みフォーム）がはみ出さないように設定 */
.form-wrapper iframe {
  width: 100%;
  border: none;
  display: block;
}

/* 中央寄せ用ユーティリティ（もし共通CSSになければ追加） */
.text-center {
  text-align: center;
}


/* ==========================================
   フッター
========================================== */
#fes-footer {
  background-color: #12284c;
  /* 画像に近い濃紺 */
  color: #fff;
  text-align: center;
  padding: 25px 0;
}

#fes-footer p {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
}


/* --- レスポンシブ（スマホ対応） --- */
@media screen and (max-width: 768px) {
  .sns-lead {
    font-size: 1.4rem;
  }

  .sns-templates {
    gap: 10px;
    /* 隙間を狭くする */
  }

  .sns-templates img {
    width: 30%;
    /* スマホでも横並びをキープ */
  }

  .form-wrapper {
    padding: 20px 15px;
    /* スマホでは内側の余白を減らして広く見せる */
  }
}

/* ==========================================
   追従申し込みボタン（右下固定）
========================================== */
.floating-entry-btn {
  position: fixed;
  right: 0;
  z-index: 9998;
  background: linear-gradient(214deg, #f2e725, #f2e725);
  color: #fff;
  text-decoration: none;
  border-radius: 20px 0 0 0;
  padding: 25px 30px;
  box-shadow: 0 10px 25px rgba(255, 75, 43, 0.4);
  animation: pulse-shadow 2s infinite;

  /* ★ 追加：最初は画面の下に隠しておく！ */
  bottom: -150px;
  /* ボタンの高さ分だけ下にマイナスして隠す */
  opacity: 0;
  pointer-events: none;
  /* 隠れている時はクリック判定を消す */

  /* ★ 追加：フワッと出てくるアニメーションの設定 */
  transition: bottom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s, transform 0.3s, box-shadow 0.3s;
}

/* ★ 追加：JSで「.is-show」クラスが付いた時に、定位置に戻る！ */
.floating-entry-btn.is-show {
  bottom: 0;
  /* 元の位置（画面の右下ピタッ）に戻る */
  opacity: 1;
  pointer-events: auto;
}

.floating-entry-btn:hover {
  transform: translateY(-5px) scale(1.02);
  /* マウスを乗せたら少し浮いて大きくなる */
  box-shadow: 0 15px 35px rgba(200, 110, 1, 0.6);
  animation: none;
  /* ホバー時は波紋を止める */
}

.floating-entry-inner {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  /* ロゴと文字の隙間 */
  /* flex-direction: column; */
}

/* 中に入れるロゴのサイズ */
.floating-logo {
  height: 22px;
  width: auto;
  display: block;
}

.floating-text {
  font-size: 1.8rem;
  font-weight: bold;
  color: #528eb9;
}

.floating-arrow {
  font-size: 1.2rem;
  margin-left: 5px;
}

/* ★ 波紋アニメーションのキーフレーム */
@keyframes pulse-shadow {
  0% {
    box-shadow: 0 0 0 0 rgba(223, 255, 43, 0.7);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(255, 75, 43, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 75, 43, 0);
  }
}

/* --- レスポンシブ（スマホ対応） --- */
@media screen and (max-width: 768px) {
  .floating-entry-btn {
    bottom: 0;
    right: 0;
    padding: 20px 25px;
    /* スマホでは少しコンパクトに */
  }

  .floating-logo {
    height: 16px;
    /* ロゴも少し小さく */
  }

  .floating-text {
    font-size: 1.4rem;
  }
}


/* =========================================
   画像作成モーダル（参加表明）専用スタイル
   ========================================= */

/* LP上のサンプル画像（レスポンシブ対応） */
.sample-images {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.sample-img {
  width: 30%;
  max-width: 200px;
  height: auto;
  /* border: 1px solid #ddd; */
  border-radius: 4px;
}

.modal-sponsor-title {
  font-weight: bold;
  font-size: 1.8rem;
  color: #333;
  margin: 20px 0;
  text-align: center;
}

/* モーダルの背景（画面全体を最前面で暗く覆う） */
.editor-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 999999;
  /* ヘッダーや追従ボタンより確実に上に配置 */
  justify-content: center;
  align-items: center;
  padding: 15px;
  box-sizing: border-box;
}

/* モーダル本体（スマホでは縦並び） */
.editor-modal-inner {
  background: #fff;
  width: 100%;
  max-width: 800px;
  border-radius: 8px;
  padding: 20px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  -webkit-overflow-scrolling: touch;
}

/* 閉じるボタン */
.editor-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  border: none;
  background: none;
  cursor: pointer;
  color: #333;
  line-height: 1;
  z-index: 10;
  padding: 0;
}

/* 左右のレイアウトベース */
.editor-left,
.editor-right {
  width: 100%;
  box-sizing: border-box;
}

.editor-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* タイトルテキスト類 */
.editor-title {
  font-size: 18px;
  margin: 0 0 15px 0;
  text-align: center;
  color: #333;
  font-weight: bold;
}

.step-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin: 0 0 10px 0;
  text-align: center;
}

.editor-note {
  font-size: 12px;
  color: #666;
  margin-top: 10px;
  text-align: center;
  line-height: 1.4;
}

/* キャンバスエリア */
.canvas-wrapper {
  width: 100%;
  aspect-ratio: 1/1;
  /* 綺麗な正方形を保つ */
  position: relative;
  background: #f0f0f0;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #ddd;
  line-height: 0;
  box-sizing: border-box;
}

#main-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: auto !important;
}

/* 拡大縮小スライダーのベースレイアウト */
.zoom-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 15px;
  width: 100%;
}

.zoom-label {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
}

/* =========================================
   ここから：スライダーを綺麗にする魔法のCSS
   ========================================= */
#image-zoom-slider {
  -webkit-appearance: none;
  /* ブラウザ標準のダサい見た目を消す */
  appearance: none;
  width: 100%;
  /* 横幅をしっかり広げる */
  max-width: 250px;
  /* 広がりすぎ防止 */
  height: 6px;
  /* バーの太さ */
  background: #ddd;
  /* バーの背景色（グレー） */
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

/* スライダーの「つまみ」部分（iPhone/Chrome系） */
#image-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  /* つまみの大きさ */
  height: 24px;
  border-radius: 50%;
  background: #0073aa;
  /* エアトリブルーに！ */
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  /* 少し影をつけて押しやすく */
}

/* スライダーの「つまみ」部分（Firefox系） */
#image-zoom-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0073aa;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* 無効化（写真を選ぶ前）の時の見た目 */
#image-zoom-slider:disabled::-webkit-slider-thumb {
  background: #ccc;
  box-shadow: none;
  cursor: not-allowed;
}

#image-zoom-slider:disabled::-moz-range-thumb {
  background: #ccc;
  box-shadow: none;
  cursor: not-allowed;
}


/* テンプレート選択（スマホではみ出さない相対指定） */
.template-list {
  display: flex;
  gap: 3%;
  justify-content: center;
  flex-wrap: nowrap;
}

.modal-template-thumb {
  width: 31%;
  /* 画面幅に合わせて3等分 */
  max-width: 80px;
  aspect-ratio: 1/1;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  box-sizing: border-box;
}

.modal-template-thumb.active {
  border-color: #0073aa;
}

/* 写真アップロードボタン */
.photo-upload-label {
  display: block;
  text-align: center;
  padding: 12px 20px;
  background: #eee;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #ccc;
  font-size: 14px;
  color: #333;
  margin: 0;
  box-sizing: border-box;
}

.photo-upload-input {
  display: none;
}

/* 生成・コピーボタンエリア */
.action-area {
  /* margin-top: auto; */
  padding-top: 10px;
}

.sp-save-note {
  font-size: 11px;
  color: #e53935;
  text-align: center;
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.action-btn-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-btn-primary {
  padding: 15px;
  background: #0073aa;
  color: white;
  border: none;
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  font-size: 16px;
  box-sizing: border-box;
  text-align: center;
}

.action-btn-secondary {
  padding: 15px;
  background: #333;
  color: white;
  border: none;
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  font-size: 16px;
  box-sizing: border-box;
  text-align: center;
}

/* 結果表示エリア（スマホ用） */
.result-area {
  display: none;
  margin-top: 15px;
  text-align: center;
  width: 100%;
}

.result-area hr {
  margin: 0 0 15px 0;
  border: none;
  border-top: 1px solid #eee;
}

.result-title {
  font-weight: bold;
  margin: 0 0 10px 0;
  color: #e53935;
  font-size: 14px;
}

.result-img {
  width: 100%;
  border: 1px solid #ccc;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

/* =========================================
   PC・タブレット向け（768px以上）の横並びレイアウト
   ========================================= */
@media (min-width: 768px) {
  .editor-modal-inner {
    flex-direction: row;
    align-items: stretch;
    padding: 30px;
  }

  .editor-left {
    width: 55%;
  }

  .editor-right {
    width: 45%;
    padding-left: 20px;
  }

  .step-title {
    text-align: left;
  }

  .template-list {
    justify-content: flex-start;
  }
}


/* ==========================================
   下層ページ：スポンサー一覧（スクショ風デザイン）
========================================== */
.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* スマホは2列 */
  gap: 30px 15px;
  /* 縦の隙間を少し広めにとる */
}

/* ボタン自体の装飾は消して、透明な枠として扱う */
.sponsor-item button {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: center;
  transition: transform 0.2s;
}

.sponsor-item button:hover {
  transform: translateY(-3px);
  /* マウスを乗せたら少し浮く */
}

/* ①白い箱（ロゴエリア）のスタイル */
.sponsor-img-box {
  background-color: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 15px; */
  /* 箱の中の余白 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
  /* ほんの少しだけ影をつける */
  margin-bottom: 12px;
  /* 下のテキストとの隙間 */
}

/* ロゴ画像の調整 */
.sponsor-img-box img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* はみ出さないように綺麗に収める */
}

/* ②会社名のテキスト */
.sponsor-name-txt {
  font-size: 1.3rem;
  color: #666;
  font-weight: bold;
  line-height: 1.4;
}

/* PCサイズの時（4列） */
@media screen and (min-width: 768px) {
  .sponsor-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 25px;
    /* PCは隙間を少し広げる */
  }
}