@charset "UTF-8";

/* ==========================================================
   PC用のヘッダー調整（既存のヘッダー幅 1200px に完全に適合させる）
   ========================================================== */

/* 親のヘッダー枠をFlexboxにして左右端に寄せる */
.cmn-header__body {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 80px !important; /* ヘッダーの高さを固定 */
  position: relative !important;
}

/* 既存のロゴ位置の絶対配置干渉をリセット */
.cmn-header-logo {
  position: static !important; 
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* PCナビをFlexboxで一列にし、高さを中央揃えにする */
.pc-nav {
  position: static !important; /* 絶対配置を完全に解除 */
  display: block !important;
  margin-left: auto !important; /* ロゴの右側に無理やり寄せる */
}

.pc-nav ul {
  display: flex !important;
  align-items: center !important; /* 上下の高さを中央揃えに */
  gap: 25px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 既存の共通設定（liへの自動「-」付与など）をPC側でも徹底リセット */
.pc-nav ul li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: inline-block !important; /* 横並びを保証 */
}

.pc-nav ul li:before {
  display: none !important; /* PC表示での「-」を完全に消去 */
  content: none !important;
}

/* ナビゲーションの文字リンク */
.pc-nav ul li a {
  color: #333 !important;
  font-size: 15px !important;
  font-weight: bold !important;
  display: block !important;
  line-height: 1 !important; /* 行高による上下のズレ（キャンペーン特典の浮き）を解消 */
  text-decoration: none !important;
}
.pc-nav ul li a:hover {
  text-decoration: underline !important;
}

/* PC用 口座開設ボタン */
.pc-nav ul li a.btn-open-account {
  background-color: #eb688a !important; /* ピンク */
  color: #fff !important;
  padding: 12px 25px !important;
  border-radius: 50px !important;
  transition: opacity 0.3s !important;
  line-height: 1 !important;
}
.pc-nav ul li a.btn-open-account:hover {
  opacity: 0.8 !important;
  text-decoration: none !important;
}

/* PC時はスマホ用コンポーネントを完全に隠す */
.burger-btn, 
.sp-menu-overlay {
  display: none !important;
}

/* ==========================================================
   メインタイトル（.ttl_main）の風のアニメーション
   ========================================================== */
.ttl_main {
  opacity: 0; /* 最初は完全に非表示 */
  
  /* 左上が黒（表示）、右下が透明（非表示）のグラデーションマスク */
  -webkit-mask-image: linear-gradient(135deg, #000 35%, transparent 65%);
  mask-image: linear-gradient(135deg, #000 35%, transparent 65%);
  
  /* 遅延中のチラつきを防ぐため、マスクの横幅を少し広げて完全に隠します */
  -webkit-mask-size: 350% 300%;
  mask-size: 350% 300%;
  -webkit-mask-position: 100% 100%;
  mask-position: 100% 100%;

  /* 【調整ポイント】末尾の「0.8s」が遅延時間、「both」で待機中の非表示をキープ */
  animation: sweepReveal 9.5s cubic-bezier(0.35, 1, 0.65, 1) 0.2s both;
}

@keyframes sweepReveal {
  0% {
    opacity: 0;
    -webkit-mask-position: 100% 100%;
    mask-position: 100% 100%;
  }
  /* 動き出しの瞬間、まずは文字の形をフワッと不透明にします */
  15% {
    opacity: 1;
    -webkit-mask-position: 100% 100%;
    mask-position: 100% 100%;
  }
  100% {
    opacity: 1;
    -webkit-mask-position: 0% 0%; /* 左上から右下へ完全に表示 */
    mask-position: 0% 0%;
  }
}
/* ==========================================================
   キラキラ（スパークル）エフェクトのスタイル
   ========================================================== */
.sparkle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* 背景とテキストの間 */
  pointer-events: none; /* マウス操作を邪魔しない */
}

.sparkle {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8); /* 白色の光 */
  border-radius: 50%; /* 丸くする */
  opacity: 0;
  /* ぼんやりとした光彩（グロー効果）を追加 */
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.6);
  /* 点滅アニメーションの名前とループ指定（秒数はJSの指定を活かす） */
  animation-name: twinkle;
  animation-iteration-count: infinite;
}

/* 点滅（フェードイン・アウトと拡大縮小）のアニメーション */
@keyframes twinkle {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  30% {
    opacity: 1; /* 完全に光る */
    transform: scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0; /* 消える */
    transform: scale(0);
  }
}

/* ==========================================================
   キャンペーン内容セクションの全幅背景（エンドレス配置）
   ========================================================== */
.camp-section {
  background-image: url("../img/bg_camp.png"); 
    background-repeat: repeat;
    padding-bottom: 100px;
}

/* ==========================================================
   マイル特典カードのスクロールアニメーションと影
   ========================================================== */
/* アニメーション前の初期状態（他のc-rowを巻き込まないよう、専用クラス scroll-fade-row の中だけに限定します） */
.scroll-fade-row > [class*="c-col-"] {
  opacity: 0;
  transform: translateY(30px);
  /* 1.2秒かけて滑らかに変化するよう設定 */
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), 
              transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  /* 【影の設定】右に5px、下に5px、ぼかし0px、黒20%に修正 */
  filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.15));
}

/* 画面内に入って「is-visible」クラスがついた瞬間の状態（本来の位置に戻る） */
.scroll-fade-row > [class*="c-col-"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 順番に（時間差で）フワッと現れるための遅延時間（ディレイ）の設定 */
.scroll-fade-row > [class*="c-col-"].is-visible:nth-child(1) {
  transition-delay: 0s;     /* 1枠目はすぐ動く */
}
.scroll-fade-row > [class*="c-col-"].is-visible:nth-child(2) {
  transition-delay: 0.75s;  /* 2枠目は遅れて動く */
}
.scroll-fade-row > [class*="c-col-"].is-visible:nth-child(3) {
  transition-delay: 1.5s;   /* 3枠目はさらに遅れて動く */
}

/* ==========================================================
   立体スペシャルボタン（単色ピンク・ホバーで凹むエフェクト）
   ========================================================= */
.special-btn {
  /* --- 基本スタイル --- */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 500px;          /* ボタンの最大横幅 */
  height: 80px;              /* PCでのボタンの高さ */
  margin: 40px auto;         /* 上下に余白をもたせて中央配置 */
  border-radius: 40px;       /* 高さの半分で完全な丸角 */
  text-decoration: none;
  font-weight: bold;
  font-size: 20px;           /* PCでの文字サイズ */
  color: #fff !important;    /* 文字は白 */
  border: none !important;   /* 元の枠線を消去 */
  padding-left: 40px;        /* 左側の余白 */
  padding-right: 16px;       /* 右側の円の余白 */
  
  /* --- 添付画像に合わせた単色ピンク --- */
  background-color: #eb688a !important;
  
  /* --- 立体感の表現（右に0px、下に6px、ぼかし0pxの濃いピンクを敷いて厚みを出します） --- */
  box-shadow: 0 5px 0 #bd3b5d, 0 6px 12px rgba(0, 0, 0, 0.3) !important;
  
  /* 凹むときの動きの滑らかさ（一瞬でパチッと切り替わる心地よさ） */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

/* --- テキストを中央に寄せる調整 --- */
.special-btn span:first-child {
  flex: 1;
  text-align: center;
  padding-left: 20px; /* 右側に白い丸がある分、少し左にパディングを入れて完全な中央寄せに */
}

/* --- 右側の白い円 --- */
.special-btn .icon-wrap {
  width: 48px;
  height: 48px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- 飛行機アイコン（CSSマスクでボタンと同じピンクを適用） --- */
.special-btn .icon-wrap::after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  /* mask ではなく、一度普通の背景画像として読み込んでみる */
  background: url("../img/icon_plane.svg") no-repeat center / contain;
}
/* --- マウスオーバー（ホバー）したときにカチッと凹む設定 --- */
.special-btn:hover {
  /* 厚み分（5px）だけボタン全体を下に沈ませます */
  transform: translateY(5px);
  /* 下にあった立体用の影の厚みをゼロにし、全体の影も薄くすることで「押し込まれた」表現になります */
  box-shadow: 0 0 0 #bf2c5b, 0 2px 5px rgba(0, 0, 0, 0.1) !important;
  text-decoration: none !important;
}
/* ==========================================================
   mail_section
   ========================================================== */
.mail_section {
    position: relative;
    margin: 100px auto 40px;
    padding: 60px;
    border-radius: 10px;
    background-color: #FFFFFF;
    filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.15));
}
.mail_section .ico-mail {
    position: absolute;
    top: -58px;
    left: 32px;
}
.mail_section .mail_section_ttl {
    font-size: 38px;
    font-weight: normal;
    color: #074ca5;
    border: none;
    text-align: center;
    margin: 0 auto 48px;
}
.mail_section .mail_section_ttl span {
    font-size: 70px;
    font-weight: bold;
    background: linear-gradient(transparent 80%, #ffff41 80%, #ffff41 90%, transparent 90%);
    display: inline;
    line-height: 1em;
}
.mail_section .mail {
    font-size: 34px;
    font-weight: bold;
    background: linear-gradient(transparent 80%, #ffff41 80%, #ffff41 90%, transparent 90%);
    display: inline;
    color: #074ca5;
    line-height: 1em;
}
/* ==========================================================
   右上の折り曲げ（ドッグイヤー）エフェクト
   ========================================================== */
.c-mail-box {
    margin-bottom: 48px;
    padding: 32px;
    background-color: #f6f6f6;
    border-radius: 8px;
    position: relative; /* ★追記：折り曲げパーツを右上に固定するための基準点 */
}

.c-mail-box::before {
    content: "";
    position: absolute;
    top: -1px;     /* ブラウザのバグで一瞬グレーの隙間が見えるのを防ぐプロの微調整 */
    right: -1px;
    width: 28px;   /* 折り曲げる三角形のサイズ（大きさを変えたいときはここを調整） */
    height: 28px;
    
    /* 225deg（右上から左下）に向けて、右上半分を背景と同じ白（#fff）で塗りつぶし、
       左下半分を折り返した紙の裏側（少し濃いグレー）にする魔法のグラデーション */
    background: linear-gradient(225deg, #ffffff 50%, #d2d2d4 50%);
    
    /* 折り曲げた内側の角（左下）にほんの少しだけ丸みをつけて「参考.png」の質感を再現 */
    border-bottom-left-radius: 4px;
    
    /* めくれた紙の浮き上がりを表現する、うっすらとした優しい影 */
    box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.08);
    display: block;
}


/* ==========================================================
   「すでに口座をお持ちの方も対象！」
   ========================================================== */
.u-already {
    display: inline-block;
    margin: 0 auto;
    font-size: 20px;
    font-weight: bold;
    color: #e9577d;
    background-color: #FFFFFF;
    padding: 8px 16px;
    border: 2px solid #e9577d;
    border-radius: 5px;
}

.u-lh-15{
    line-height: 1.5em!important;
}
.u-lh-16{
    line-height: 1.6em!important;
}
.u-lh-17{
    line-height: 1.7em!important;
}
.u-lh-18{
    line-height: 1.8em!important;
}
.u-lh-19{
    line-height: 1.9em!important;
}
.u-lh-20{
    line-height: 2.0em!important;
}

ul.list-caution > li {
	padding-left: 5.25em;
	list-style: none;
}

ul.list-caution > li:before {
	display: inline-block;
	margin-left: -5.25em;
	width: 5.25em;
	content: "※ご注意：";
	vertical-align: top;
}

/* ==========================================================
   オススメ！見出し用ラベル（ピンクの図形・クッキリ静止版）
   ========================================================== */
.lbl-recommend {
  display: inline-block;
  margin-left: 12px;         /* 前の文字との隙間 */
  padding: 6px 12px;         /* ラベル内の余白（上下・左右） */
  background-color: #ffff41; /* 黄色 */
  color: #c70000 !important;    /* 文字は赤 */
  font-size: 14px;           /* 文字サイズ */
  font-weight: bold;
  border-radius: 4px;        /* ゆるやかな角丸 */
  vertical-align: middle;    /* 横の文字の上下中央に揃える */
  line-height: 1.2 !important; /* ラベル内の高さをキュッと締める */
  position: relative;
  top: -2px;                 /* 見出しの文字との高さのバランスを微調整 */
}

/* ==========================================================
   ANA Payとは？ アコーディオン（開閉ギミック：完全版）
   ========================================================== */
.accordion-wrap {
  margin: 30px auto;
  width: 100%;
}

/* アコーディオンのボタン部分（青いバー） */
.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 24px;
  background-image: linear-gradient(180deg, rgba(249, 252, 255, 1) 32%, rgba(223, 236, 255, 1));
  color: #074ca5 !important;
  font-size: 20px;
  font-weight: bold;
  border: 1px solid #d4d4d4;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.3s ease;
}

.accordion-trigger:hover {
  background-color: #4d83be; /* ホバー時に少し暗くして押しやすく */
}

/* タイトルとアイコンを横並びにする枠 */
.accordion-title-inner {
  display: flex;
  align-items: center;
  gap: 12px; /* アイコンと文字の隙間 */
}

/* 飛行機アイコンのサイズ調整 */
.accordion-icon {
  width: 24px;
  height: auto;
  vertical-align: middle;
}

/* 右側の「＋/ー」マーク（通常時から一貫して真中央に完全固定するプロ仕様） */
.accordion-toggle-mark {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0; /* 画面が狭くなってもプラスマークが絶対に横潰れしないガード */
}

.accordion-toggle-mark::before,
.accordion-toggle-mark::after {
  content: "";
  position: absolute;
  background-color: #074ca5; /* 線の色（白） */
  top: 50%;
  left: 50%;
  /* 通常時から中心点をマイナス50%移動させて、バチバチに真ん中へ固定します */
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 横線 */
.accordion-toggle-mark::before {
  width: 20px;
  height: 2px;
}

/* 縦線 */
.accordion-toggle-mark::after {
  width: 2px;
  height: 20px;
}

/* ★開いたとき（activeクラスがついたとき）の変化（中心軸を固定したまま回転・ブレなし） */
.accordion-trigger.active .accordion-toggle-mark::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0; /* 縦線を綺麗に消して「ー」にする */
}
.accordion-trigger.active .accordion-toggle-mark::before {
  transform: translate(-50%, -50%) rotate(180deg); /* 横線を綺麗に回す */
}

/* アコーディオンの中身（薄グレー背景） */
.accordion-content {
  background-color: #f6f6f6; /* 薄グレー */
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}

/* 中身のテキストの余白と装飾 */
.accordion-content-inner {
  padding: 32px;
}

/* ==========================================================
   アコーディオン内部の特徴ボックス（白背景・ピンクのラベル）
   ========================================================== */
/* 全体を包む白い角丸のボックス */
.accordion-features-box {
  background-color: #fff;
  padding: 24px;
  margin-bottom: 24px;
}

/* ラベルとテキストを横並びにする1行の枠 */
.accordion-feature-item {
  display: flex;
  align-items: flex-start; /* ラベルをテキストの1行目の上端にピタッと揃える */
  margin-bottom: 18px;
}
.accordion-feature-item:last-child {
  margin-bottom: 0; /* 最後の行は下の余白を無しにする */
}

/* 「貯まる」「使える」などのピンクの角丸ラベル */
.accordion-feature-item .feature-label {
  display: inline-block;
  width: 100px;               /* ラベルの横幅を固定して、右のテキストの開始位置を完璧に揃える */
  padding: 8px 0;
  background-color: #eb688a;  /* ボタンとお揃いのピンク */
  color: #fff !important;     /* 文字は白 */
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  border-radius: 3px;         /* 綺麗な角丸 */
  flex-shrink: 0;             /* 画面が狭くなっても四角形が絶対に横潰れしないガード */
  margin-right: 16px;         /* 右側のテキストとの隙間 */
  line-height: 1.2 !important;
}

/* ==========================================================
   ＡＮＡ支店とは？セクションの全幅背景
   ========================================================== */
.ana-section {
    background-color: #0350bf;
    padding: 90px 0 44px;
    margin-bottom: 90px;
}
.ana_subsection {
    position: relative;
    margin: 30px auto 30px;
    padding: 60px;
    border-radius: 10px;
    background-color: #ebeff2;
    filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.15));
}

/* ==========================================================
   右上の折り曲げ（ドッグイヤー）エフェクト／背景白
   ========================================================== */
.c-mail-box-wh {
    margin-bottom: 30px;
    padding: 42px 60px;
    background-color: #ffffff;
    border-radius: 8px;
    position: relative; /* ★追記：折り曲げパーツを右上に固定するための基準点 */
}
.c-mail-box-wh::before {
    content: "";
    position: absolute;
    top: -1px;     /* ブラウザのバグで一瞬グレーの隙間が見えるのを防ぐプロの微調整 */
    right: -1px;
    width: 28px;   /* 折り曲げる三角形のサイズ（大きさを変えたいときはここを調整） */
    height: 28px;
    
    /* 225deg（右上から左下）に向けて、右上半分を背景と同じ白（#fff）で塗りつぶし、
       左下半分を折り返した紙の裏側（少し濃いグレー）にする魔法のグラデーション */
    background: linear-gradient(225deg, #ebeff2 50%, #d2d2d4 50%);
    
    /* 折り曲げた内側の角（左下）にほんの少しだけ丸みをつけて「参考.png」の質感を再現 */
    border-bottom-left-radius: 4px;
    
    /* めくれた紙の浮き上がりを表現する、うっすらとした優しい影 */
    box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.08);
    display: block;
}


@media screen and (max-width: 767px) {
  
  /* PCナビを非表示 */
  .pc-nav {
    display: none !important;
  }

  /* スマホヘッダーの枠設定 */
  .cmn-header__body {
    display: flex !important;
    width: 100% !important;
    padding: 0 15px !important;
    height: 75px !important; /* 既存のスマホヘッダー高 */
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* スマホロゴのサイズ調整 */
  .cmn-header-logo {
    margin: 0 !important;
    width: 100px !important;
  }

  /* ハンバーガーボタン（ピンクの丸） */
  .burger-btn {
    display: flex !important; 
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 38px !important;
    height: 38px !important;
    background-color: #eb688a !important;
    border: none !important;
    border-radius: 50% !important;
    position: absolute !important;
    right: 18px !important;
    top: 18px !important;
    cursor: pointer !important;
    z-index: 2000 !important;
    padding: 0 !important;
  }
  
  /* ボタンの中の三本線 */
  .burger-btn .bar {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background-color: #fff !important;
    transition: all 0.3s !important;
  }

  /* 「✕」アニメーション */
  .burger-btn.active .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  .burger-btn.active .bar:nth-child(2) {
    opacity: 0 !important;
  }
  .burger-btn.active .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  /* スマホ用メニューの背景マスク */
  .sp-menu-overlay {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    z-index: 1500 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .sp-menu-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* 白いメニューボックス */
  .sp-menu-inner {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: calc(100% - 20px) !important;
    max-width: 320px !important;
    background-color: #fff !important;
    border-radius: 5px !important;
    padding: 20px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
  }

  /* メニュー内のリンク */
  .sp-nav-list {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .sp-nav-list li {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .sp-nav-list li:before {
    display: none !important; /* スマホ側でも「-」を消去 */
    content: none !important;
  }
  .sp-nav-list li a {
    color: #0054a6 !important;
    font-size: 16px !important;
    font-weight: bold !important;
    padding: 12px 0 !important;
    display: block !important;
    text-align: center !important;
    line-height: 1 !important;
  }
  
  /* メニュー内の口座開設ボタン */
  .sp-menu-btn-wrap {
    margin-top: 20px !important;
    display: block !important;
  }
  .sp-menu-btn-wrap .btn-open-account {
    background-color: #f27399 !important;
    color: #fff !important;
    padding: 12px 0 !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 50px !important;
    display: block !important;
    text-align: center !important;
    line-height: 1 !important;
  }
  .sp-menu-btn-wrap .btn-open-account:hover {
    text-decoration: none !important;
  }
    
/* ==========================================================
   キャンペーン内容セクションの全幅背景（エンドレス配置）
   ========================================================== */
.camp-section {
    background-size: 10%;
    padding-bottom: 50px;
}
    
/* ==========================================================
   立体スペシャルボタン（単色ピンク・ホバーで凹むエフェクト）
   ========================================================= */
.special-btn {
  max-width: none;          /* ボタンの最大横幅 */
  height: 70px;              /* PCでのボタンの高さ */
  margin: 20px auto;         /* 上下に余白をもたせて中央配置 */
  border-radius: 35px;       /* 高さの半分で完全な丸角 */
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;           /* PCでの文字サイズ */
  color: #fff !important;    /* 文字は白 */
  border: none !important;   /* 元の枠線を消去 */
  padding-left: 20px;        /* 左側の余白 */
  padding-right: 16px;       /* 右側の円の余白 */
    line-height: 1.5em;
  
  /* --- 立体感の表現（右に0px、下に6px、ぼかし0pxの濃いピンクを敷いて厚みを出します） --- */
  box-shadow: 0 4px 0 #bd3b5d, 0 6px 12px rgba(0, 0, 0, 0.3) !important;
}

/* --- テキストを中央に寄せる調整 --- */
.special-btn span:first-child {
  flex: 1;
  text-align: center;
  padding-left: 20px; /* 右側に白い丸がある分、少し左にパディングを入れて完全な中央寄せに */
}

/* --- 右側の白い円 --- */
.special-btn .icon-wrap {
  width: 42px;
  height: 42px;
}

/* --- 飛行機アイコン（CSSマスクでボタンと同じピンクを適用） --- */
.special-btn .icon-wrap::after {
  width: 20px;
  height: 20px;
}
/* --- マウスオーバー（ホバー）したときにカチッと凹む設定 --- */
.special-btn:hover {
  /* 厚み分（4px）だけボタン全体を下に沈ませます */
  transform: translateY(4px);
}
    
/* ==========================================================
   mail_section
   ========================================================== */
.mail_section {
    position: relative;
    margin: 60px auto 30px;
    padding: 64px 20px 20px;
    border-radius: 5px;
    background-color: #FFFFFF;
    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.15));
}
.mail_section .ico-mail {
    position: absolute;
    top: -38px;
    left: calc(50% - 40px);
    width: 80px;
}
.mail_section .mail_section_ttl {
    font-size: 18px;
    font-weight: normal;
    color: #074ca5;
    border: none;
    text-align: center;
    margin: 0 auto 20px;
}
.mail_section .mail_section_ttl p {
    font-size: 18px;
}
.mail_section .mail_section_ttl span {
    font-size: 50px;
    font-weight: bold;
    background: linear-gradient(transparent 80%, #ffff41 80%, #ffff41 90%, transparent 90%);
    display: inline;
    line-height: 1em;
}
.mail_section .mail {
    font-size: 34px;
    font-weight: bold;
    background: linear-gradient(transparent 80%, #ffff41 80%, #ffff41 90%, transparent 90%);
    display: inline;
    color: #074ca5;
    line-height: 1em;
}
    
/* ==========================================================
   右上の折り曲げ（ドッグイヤー）エフェクト
   ========================================================== */
.c-mail-box {
    margin-bottom: 24px;
    padding: 20px;
    background-color: #f6f6f6;
    border-radius: 5px;
    position: relative; /* ★追記：折り曲げパーツを右上に固定するための基準点 */
}

.c-mail-box::before {
    content: "";
    position: absolute;
    top: -1px;     /* ブラウザのバグで一瞬グレーの隙間が見えるのを防ぐプロの微調整 */
    right: -1px;
    width: 16px;   /* 折り曲げる三角形のサイズ（大きさを変えたいときはここを調整） */
    height: 16px;
    
    /* 225deg（右上から左下）に向けて、右上半分を背景と同じ白（#fff）で塗りつぶし、
       左下半分を折り返した紙の裏側（少し濃いグレー）にする魔法のグラデーション */
    background: linear-gradient(225deg, #ffffff 50%, #d2d2d4 50%);
    
    /* 折り曲げた内側の角（左下）にほんの少しだけ丸みをつけて「参考.png」の質感を再現 */
    border-bottom-left-radius: 4px;
    
    /* めくれた紙の浮き上がりを表現する、うっすらとした優しい影 */
    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.08);
    display: block;
}
    
/* ==========================================================
   「すでに口座をお持ちの方も対象！」
   ========================================================== */
.u-already {
    display: inline-block;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #e9577d;
    background-color: #FFFFFF;
    padding: 8px 12px;
    border: 1px solid #e9577d;
    border-radius: 5px;
}
    
/* ==========================================================
   オススメ！見出し用ラベル（ピンクの図形・クッキリ静止版）
   ========================================================== */
.lbl-recommend {
  display: inline-block;
  margin-left: 2px;         /* 前の文字との隙間 */
  padding: 5px 5px;         /* ラベル内の余白（上下・左右） */
  background-color: #ffff41; /* 黄色 */
  color: #c70000 !important;    /* 文字は赤 */
  font-size: 11px;           /* 文字サイズ */
  font-weight: bold;
  border-radius: 2px;        /* ゆるやかな角丸 */
  vertical-align: middle;    /* 横の文字の上下中央に揃える */
  line-height: 1.2 !important; /* ラベル内の高さをキュッと締める */
  position: relative;
  top: -2px;                 /* 見出しの文字との高さのバランスを微調整 */
}
    
/* ==========================================================
   ANA Payとは？ アコーディオン（開閉ギミック：完全版）
   ========================================================== */
.accordion-wrap {
  margin: 30px auto;
  width: 100%;
}

/* アコーディオンのボタン部分（青いバー） */
.accordion-trigger {
  padding: 12px 18px;
  font-size: 18px;
}

/* 中身のテキストの余白と装飾 */
.accordion-content-inner {
  padding: 18px;
}

/* ==========================================================
   アコーディオン内部の特徴ボックス（白背景・ピンクのラベル）
   ========================================================== */
/* 全体を包む白い角丸のボックス */
.accordion-features-box {
  background-color: #fff;
  padding: 16px;
  margin-bottom: 24px;
}

/* ラベルとテキストを横並びにする1行の枠 */
.accordion-feature-item {
  display: inline;
  align-items: flex-start; /* ラベルをテキストの1行目の上端にピタッと揃える */
  margin-bottom: 18px;
}
.accordion-feature-item:last-child {
  margin-bottom: 0; /* 最後の行は下の余白を無しにする */
}

/* 「貯まる」「使える」などのピンクの角丸ラベル */
.accordion-feature-item .feature-label {
  display: block;
  width: 90px;               /* ラベルの横幅を固定して、右のテキストの開始位置を完璧に揃える */
  padding: 8px 0;
    margin-bottom: 8px;
  background-color: #eb688a;  /* ボタンとお揃いのピンク */
  color: #fff !important;     /* 文字は白 */
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  border-radius: 3px;         /* 綺麗な角丸 */
  flex-shrink: 0;             /* 画面が狭くなっても四角形が絶対に横潰れしないガード */
  margin-right: 16px;         /* 右側のテキストとの隙間 */
  line-height: 1.2 !important;
}
    
/* ==========================================================
   ＡＮＡ支店とは？セクションの全幅背景
   ========================================================== */
.ana-section {
    background-color: #0350bf;
    padding: 40px 0 10px;
    margin-bottom: 40px;
}
.ana_subsection {
    position: relative;
    margin: 16px auto 30px;
    padding: 20px;
    border-radius: 5px;
    background-color: #ebeff2;
    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.15));
}
    
/* ==========================================================
   右上の折り曲げ（ドッグイヤー）エフェクト／背景白
   ========================================================== */
.c-mail-box-wh {
    margin-bottom: 24px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 5px;
    position: relative; /* ★追記：折り曲げパーツを右上に固定するための基準点 */
}

.c-mail-box-wh::before {
    content: "";
    position: absolute;
    top: -1px;     /* ブラウザのバグで一瞬グレーの隙間が見えるのを防ぐプロの微調整 */
    right: -1px;
    width: 16px;   /* 折り曲げる三角形のサイズ（大きさを変えたいときはここを調整） */
    height: 16px;
    
    /* 225deg（右上から左下）に向けて、右上半分を背景と同じ白（#fff）で塗りつぶし、
       左下半分を折り返した紙の裏側（少し濃いグレー）にする魔法のグラデーション */
    background: linear-gradient(225deg, #ebeff2 50%, #d2d2d4 50%);
    
    /* 折り曲げた内側の角（左下）にほんの少しだけ丸みをつけて「参考.png」の質感を再現 */
    border-bottom-left-radius: 4px;
    
    /* めくれた紙の浮き上がりを表現する、うっすらとした優しい影 */
    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.08);
    display: block;
}
    
    
    
.u-sp-lh-10{
    line-height: 1.0em!important;
}    
.u-sp-lh-11{
    line-height: 1.1em!important;
}
.u-sp-lh-12{
    line-height: 1.2em!important;
}
.u-sp-lh-13{
    line-height: 1.3em!important;
}
.u-sp-lh-14{
    line-height: 1.4em!important;
}
.u-sp-lh-15{
    line-height: 1.5em!important;
}
.u-sp-lh-16{
    line-height: 1.6em!important;
}
.u-sp-lh-17{
    line-height: 1.7em!important;
}
.u-sp-lh-18{
    line-height: 1.8em!important;
}
.u-sp-lh-19{
    line-height: 1.9em!important;
}
.u-sp-lh-20{
    line-height: 2.0em!important;
}
    
}