@charset "utf-8";

/* ================================================================================
   今月のクーポン フローティングウィジェット（単体CSS）
   --------------------------------------------------------------------------------
   このファイルは、トップページ（index.html）の css/style.css に含まれている
   「#coupon-widget」関連のCSSだけを、そのままこのファイル1つに抜き出したものです。

   ★ なぜ style.css をそのまま読み込まないのか ★
   style.css はトップページ全体（ヘッダー・ナビゲーション・各セクションなど）
   のための巨大なCSSファイルです。お申し込みページのような、
   トップページとはデザインが異なる別ページにそのまま読み込むと、
   意図しないデザイン崩れを起こす可能性があります。
   そのため、ウィジェットの表示に必要な部分だけを、
   このファイル1つに独立させています。

   中身は index.html / css/style.css にあるものと完全に同じです
   （見た目・動作を変える意図での変更は一切行っていません）。

   関係するHTML：
   #coupon-widget とその中の各要素
   （どのページに設置する場合も、index.html にある
   　#coupon-widget のHTMLブロックをそのままコピーして使ってください）

   関係するJavaScript：
   js/coupon-widget.js
   （class の切り替え、クーポンコードの自動生成、カウントダウンなどを行っています。
   　このJSは jQuery 不要の素のJavaScriptなので、jQuery未読み込みのページでも
   　そのまま動作します）

   ★ 注意 ★
   #coupon-widget、.coupon-widget-close、.coupon-mini-trigger などのid・class名は
   js/coupon-widget.js から参照されています。名前を変更する場合はJS側も
   合わせて変更してください。
   ================================================================================ */

/* --------------------------------------------------------------------------------
   [元の場所] index.html 末尾／「今月のクーポン」フローティングウィジェット
   --------------------------------------------------------------------------------
   画面左下に固定表示される、丸いクーポン案内ウィジェットのデザインです。
   3つの状態（大きさ）を、#coupon-widget に付く class で切り替えます。

   ・class無し　　　　　→ 通常の小さい丸（.coupon-small-content が表示）
   ・is-minimized　　　→ さらに小さいアイコンだけの丸
   ・is-expanded　　　 → クーポン詳細を表示する大きなカード

   関係するJavaScript：
   js/coupon-widget.js
   （class の切り替え、クーポンコードの自動生成、カウントダウンなどを行っています）

   ★ 注意 ★
   #coupon-widget、.coupon-widget-close、.coupon-mini-trigger などのid・class名は
   js/coupon-widget.js から参照されています。名前を変更する場合はJS側も
   合わせて変更してください。
   -------------------------------------------------------------------------------- */
#coupon-widget {
  position: fixed;
  bottom: 24px;
  left: 24px;

  width: 115px;
  height: 115px;

  background: linear-gradient(
    135deg,
    #eaf9fd,
    #d4f0fa
  );

  border-radius: 24px;

  box-shadow: 0 8px 20px rgba(180, 180, 210, 0.3);

  z-index: 9999;

  overflow: hidden;

  border: 2px solid rgba(255, 255, 255, 0.8);

  transition: all 0.4s ease;

  box-sizing: border-box;

  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;

  animation: none;
}

/* 状態①：最小の丸（ここだけふわふわ） */
#coupon-widget.is-minimized {
  width: 46px;
  height: 46px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.28);

  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);

  border: 1px solid rgba(255, 255, 255, 0.55);

  box-shadow: 0 4px 10px rgba(150, 150, 150, 0.18);

  cursor: pointer;

  transition: background 0.3s ease, box-shadow 0.3s ease;

  animation: floatSmooth 3s ease-in-out infinite;
}

#coupon-widget.is-minimized:hover {
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 14px rgba(150, 150, 150, 0.25);
}

/* 状態②：大きな詳細表示
   ------------------------------------------------------------
   width（横幅）は 360px の固定値、
   height（縦幅）は auto にしているため、
   「適用条件」などの文章が増えれば、その分だけ
   枠の高さが自動で伸びます（横幅は変わりません）。

   ★ 以前は将来の追記に備えて空の<br>行を仕込んでいましたが、
      横幅固定・縦幅autoの今の作りなら不要（かえって余白の
      バラつきの原因になっていた）だったため削除しました。
      index.html側で今後「ご利用方法」「適用条件」などの
      文章を増やしたい場合は、そのまま行を追記するだけで
      自動的に枠が広がります。 ★

   ★ 万が一、中身が非常に長くなった場合の保険として ★
   max-height を設定し、画面の高さ(92vh)を超えたら
   スクロールで見られるようにしています。
   （.coupon-large-content 側の overflow-y: auto と連動）
   ------------------------------------------------------------ */
#coupon-widget.is-expanded {
  width: 360px;	/*320px→360pxに拡大。スマホの画面幅いっぱいに近い見やすいサイズ（固定幅）*/
  height: auto;	/*文章量に応じて縦方向だけ自動で伸び縮みする*/
  max-height: 92vh;	/*画面からはみ出さないための上限。超えた分は内部スクロール*/

  border-radius: 28px;

  background: #ffffff;

  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);

  border: 3px solid #ffffff;

  animation: none;
}

/* 浮遊アニメーション */
@keyframes floatSmooth {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* × 閉じるボタン（右上の小さな丸ボタン） */
.coupon-widget-close {
  position: absolute;

  top: 6px;
  right: 6px;

  width: 20px;
  height: 20px;

  background: rgba(255, 255, 255, 0.9);

  color: #8b7d9b;

  border: none;

  border-radius: 50%;

  font-size: 13px;
  font-weight: bold;

  cursor: pointer;

  display: flex;

  align-items: center;
  justify-content: center;

  z-index: 20;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  transition: all 0.2s ease;

  line-height: 1;

  padding: 0;
}

.coupon-widget-close:hover {
  background: #ffffff;
  color: #8b7d9b;
  transform: scale(1.1);
}

#coupon-widget.is-minimized .coupon-widget-close {
  display: none;
}

/* 最小化された丸の「？」 */
.coupon-mini-trigger {
  display: none;

  width: 100%;
  height: 100%;

  align-items: center;
  justify-content: center;

  cursor: pointer;

  user-select: none;

  position: relative;

  overflow: hidden;
}

#coupon-widget.is-minimized .coupon-mini-trigger {
  display: flex;
}

.mini-trigger-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}

#coupon-widget.is-minimized:hover .mini-trigger-icon {
  opacity: 0.85;
}

/* 通常の小サイズ表示 */
.coupon-small-content {
  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  height: 100%;

  padding: 22px 8px 10px;

  cursor: pointer;

  text-align: center;

  color: #555555;

  box-sizing: border-box;

  position: relative;

  overflow: hidden;
}

/* 通常表示（小さい丸）を1枚の画像で表示する場合の設定
   ------------------------------------------------------------
   images/whats_this_months_coupon.png を、
   .coupon-small-content の余白（padding）を無視して
   ボックスいっぱいに敷き詰めて表示します。

   position: absolute; inset: 0;
   → 親要素（.coupon-small-content）のpaddingの内側ではなく、
     枠の外周ぎりぎりまで画像を広げるための指定です。

   object-fit: cover;
   → 画像の縦横比を保ったまま、はみ出た部分は自動でトリミングして
     115×115pxの正方形を隙間なく埋めます。

   角の丸みは #coupon-widget 側の border-radius: 24px と
   overflow: hidden によって自動的にカットされます
   （この画像側で角丸を作る必要はありません）。

   ★ 画像を差し替えたい／サイズを変えたい場合は、
      images/whats_this_months_coupon.png を同じファイル名で
      上書きするだけでOKです（HTML・CSSの変更は不要）。
   ------------------------------------------------------------ */
.small-content-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;

  /* 最初はうっすら透かしが入った状態（透明度55%）、
     カーソルを合わせるとハッキリ（透明度100%）見えるようにする */
  opacity: 0.55;
  transition: opacity 0.35s ease;
}

/* カーソルを合わせた時（ホバー）にハッキリ見せる
   ------------------------------------------------------------
   .coupon-small-content 自体（画像の親要素）にカーソルが
   乗っている間、中の画像の透明度を100%にします。
   ★ スマホなど「カーソル」がない端末では、この効果は
      基本的に発生しません（タップ時に一瞬反応する端末もあります）。
   ------------------------------------------------------------ */
.coupon-small-content:hover .small-content-image {
  opacity: 1;
}

/* キラキラ・ピカピカと複数の光の粒が「中心から外側へ」ゆっくり広がって消える演出
   ------------------------------------------------------------
   .coupon-small-content の中心付近から、光の粒（円形のグラデーション）が
   放射状にゆっくり広がりながら薄くなって消えていくアニメーションです。

   ::before（グループA）：6秒周期
   ::after （グループB）：3秒周期・3秒遅れてスタート
   → 周期が違う（6秒と3秒）ので、6秒ごとに両方のタイミングが揃い、
     その間は少しずつずれて重なり合うことで、単調な点滅ではなく
     自然な「キラキラ」した瞬きに見えるようにしています。

   background-position を「中心付近」→「外側」へアニメーションさせることで、
   粒がその場で光るだけでなく、外へじわっと広がっていく動きを出しています。

   ★ 崩れないようにするためのポイント（このセクションを調整する際も守ってください）
   - .coupon-small-content 自体のサイズ・padding・overflow は変更しない
   - 疑似要素（::before/::after）自体を scale() で拡大しない
     （粒の位置だけを background-position で動かす）
   - pointer-events: none のため、クリック判定には影響しません
   - 光は .coupon-small-content の overflow: hidden の範囲内だけに表示されます
   ------------------------------------------------------------ */
.coupon-small-content::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle, rgba(255,255,255,1)    0%, rgba(255,255,255,0) 70%),
    radial-gradient(circle, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(circle, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(circle, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(circle, rgba(255,255,255,0.9)  0%, rgba(255,255,255,0) 70%);
  background-size: 15px 15px, 9px 9px, 11px 11px, 8px 8px, 10px 10px;
  background-position: 50% 50%, 48% 52%, 52% 48%, 51% 50%, 49% 49%;
  animation: coupon-small-content-sparkle-a 6s ease-in-out infinite;
}

.coupon-small-content::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(circle, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(circle, rgba(255,255,255,0.9)  0%, rgba(255,255,255,0) 70%),
    radial-gradient(circle, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(circle, rgba(255,255,255,0.9)  0%, rgba(255,255,255,0) 70%);
  background-size: 12px 12px, 8px 8px, 10px 10px, 9px 9px, 11px 11px;
  background-position: 50% 50%, 51% 49%, 49% 51%, 52% 50%, 48% 50%;
  animation: coupon-small-content-sparkle-b 3s ease-in-out infinite;
  animation-delay: 3s;
}

/* グループA：中心 → 上・右上・右下・左下・下方向へ、6秒かけてゆっくり広がって消える */
@keyframes coupon-small-content-sparkle-a {
  0% {
    opacity: 0;
    background-position: 50% 50%, 48% 52%, 52% 48%, 51% 50%, 49% 49%;
  }
  15% { opacity: 0.9; }
  55% {
    opacity: 1;
    background-position: 50% 22%, 76% 27%, 79% 55%, 25% 68%, 51% 79%;
  }
  80% { opacity: 0.4; }
  100% {
    opacity: 0;
    background-position: 50% 12%, 87% 18%, 91% 58%, 15% 78%, 51% 90%;
  }
}

/* グループB：中心 → 上下逆方向へ、3秒かけて広がって消える（グループAより速いテンポ） */
@keyframes coupon-small-content-sparkle-b {
  0% {
    opacity: 0;
    background-position: 50% 50%, 51% 49%, 49% 51%, 52% 50%, 48% 50%;
  }
  15% { opacity: 0.85; }
  55% {
    opacity: 0.95;
    background-position: 50% 78%, 24% 72%, 76% 72%, 22% 34%, 78% 30%;
  }
  80% { opacity: 0.35; }
  100% {
    opacity: 0;
    background-position: 50% 91%, 12% 84%, 88% 84%, 10% 22%, 90% 18%;
  }
}

/* 「動きを減らす」設定をしている端末では、光の演出を止める（アクセシビリティ配慮） */
@media (prefers-reduced-motion: reduce) {
  .coupon-small-content::before,
  .coupon-small-content::after {
    animation: none;
  }
}

/* ------------------------------------------------------------
   ↓ 以下は「画像1枚」に切り替える前に使っていた、
   テキスト＋キラキラ演出（sparkle）のスタイルです。

   現在のHTML（.coupon-small-content の中身）では
   使用されていませんが、将来また画像をやめて元のテキスト表示に
   戻したくなった場合のために、あえて削除せず残してあります。
   ------------------------------------------------------------ */

#coupon-widget.is-expanded .coupon-small-content,
#coupon-widget.is-minimized .coupon-small-content {
  display: none;
}

.small-label {
  font-size: 10px;
  font-weight: bold;
  color: #666666;
  line-height: 1.1;
  white-space: nowrap;
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
}

.small-question {
  font-size: 24px;
  font-weight: 900;
  color: #ed7180;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 8px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8), 0 1px 3px rgba(200, 100, 120, 0.18);
  position: relative;
  z-index: 2;
}

.small-btn-tag {
  background: linear-gradient(135deg, #b9e8f4, #9edbea);
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 16px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(130, 195, 215, 0.22);
  position: relative;
  z-index: 2;
}

/* キラキラ要素 */
.sparkle {
  position: absolute;
  line-height: 1;
  pointer-events: none;
  font-style: normal;
}

.mini-sparkle { color: rgba(255, 255, 255, 0.9); font-size: 8px; }
.mini-sparkle.s1 { top: 6px; left: 10px; }
.mini-sparkle.s2 { top: 10px; right: 8px; font-size: 6px; }
.mini-sparkle.s3 { bottom: 8px; left: 8px; font-size: 6px; }
.mini-sparkle.s4 { bottom: 8px; right: 10px; font-size: 8px; }

.small-sparkle { color: rgba(255, 255, 255, 0.85); z-index: 1; }
.small-sparkle.s1 { top: 8px; left: 10px; font-size: 8px; }
.small-sparkle.s2 { top: 12px; right: 10px; font-size: 6px; }
.small-sparkle.s3 { top: 35px; left: 6px; font-size: 6px; }
.small-sparkle.s4 { top: 40px; right: 8px; font-size: 9px; }
.small-sparkle.s5 { bottom: 25px; left: 12px; font-size: 6px; }
.small-sparkle.s6 { bottom: 20px; right: 12px; font-size: 7px; }

.large-sparkle { color: rgba(255, 255, 255, 0.9); z-index: 1; }
.large-sparkle.s1 { top: 8px; left: 20px; font-size: 10px; }
.large-sparkle.s2 { top: 16px; left: 54px; font-size: 6px; }
.large-sparkle.s3 { top: 8px; left: 105px; font-size: 7px; }
.large-sparkle.s4 { top: 18px; right: 72px; font-size: 6px; }
.large-sparkle.s5 { top: 8px; right: 42px; font-size: 10px; }
.large-sparkle.s6 { top: 16px; right: 15px; font-size: 7px; }
.large-sparkle.s7 { bottom: 10px; left: 30px; font-size: 6px; }
.large-sparkle.s8 { bottom: 12px; right: 27px; font-size: 9px; }

/* 大きな詳細表示
   ------------------------------------------------------------
   親要素（#coupon-widget.is-expanded）の高さが auto になったため、
   ここも height: 100% ではなく auto にして、中身の量に
   合わせて自然に伸び縮みするようにしています。
   max-height と overflow-y: auto は、内容が非常に長くなった時の
   保険（画面からはみ出さず、スクロールで見られるようにする）です。
   ------------------------------------------------------------ */
.coupon-large-content {
  display: none;
  height: auto;
  max-height: 92vh;
  flex-direction: column;
  background: #ffffff;
  overflow-y: auto;
  box-sizing: border-box;
  border-radius: 24px;
}

#coupon-widget.is-expanded .coupon-large-content {
  display: flex;
}

.large-header-banner {
  background: linear-gradient(
    135deg,
    #ffe0e9 0%,
    #fff3e0 25%,
    #e8f5e9 50%,
    #e0f7fa 75%,
    #f3e5f5 100%
  );

  padding: 24px 14px 14px;
  text-align: center;
  border-radius: 24px 24px 18px 18px;
  position: relative;
  overflow: hidden;
}

.banner-sub {
  font-size: 12px;
  color: #666666;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 2px;
  position: relative;
  z-index: 2;
}

.banner-main-text {
  font-size: 24px;	/*20px→24pxに拡大*/
  font-weight: 900;
  color: #3a3a3a;	/*真っ黒(#000000)だと硬い印象だったため、濃いグレーに変更*/
  line-height: 1.3;
  position: relative;
  z-index: 2;
}

.banner-note {
  margin-top: 4px;
  font-size: 10px;
  font-weight: normal;
  color: #999999;
  letter-spacing: 0.3px;
  line-height: 1.4;
  position: relative;
  z-index: 2;
}

.large-body {
  padding: 22px 20px;	/*16px→22px 20pxに拡大し、余白にゆとりを持たせる*/
  font-size: 12px;
  color: #555555;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: #ffffff;
}

.promo-label {
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: #666666;
  margin-bottom: 6px;
}

.code-box {
  border: 2px dashed #b5ead7;
  background: #fbfbfd;
  border-radius: 12px;
  padding: 8px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #6c5ce7;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.code-box:hover {
  background: #f0fdf9;
  border-color: #70a1ff;
}

.section-title {
  font-size: 13px;
  font-weight: bold;
  color: #333333;
  margin-top: 18px;
  margin-bottom: 6px;
  border-left: 3px solid #888888;
  padding-left: 7px;
}

.text-content {
  color: #666666;
  font-size: 12px;
  line-height: 1.7;
}

.notes-list {
  color: #666666;
  font-size: 12px;
  line-height: 1.7;
}

/* カウントダウンBOX
   ------------------------------------------------------------
   以前は紫がかったグレー（#6f6872など）でしたが、
   サイト全体の「グレーの濃淡で統一」という方針に合わせて、
   すべて色味のない純粋なグレーに変更しています。
   ------------------------------------------------------------ */
.timer-box {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px 10px;
  margin-top: 18px;	/*.section-titleのmargin-topと同じ18pxにして、他のセクションとの間隔を揃えている*/
  text-align: center;
  color: #555555;
  font-weight: bold;
  font-size: 11px;
  line-height: 1.6;
}

.timer-label-top { font-size: 11px; color: #777777; font-weight: 600; }
.timer-code { font-size: 12px; color: #555555; font-weight: 700; letter-spacing: 0.3px; }
.timer-label { font-size: 11px; color: #888888; }
.timer-countdown { font-size: 14px; color: #333333; font-weight: 700; white-space: nowrap; letter-spacing: 0.2px; }
.timer-ended { color: #999999 !important; font-size: 12.5px !important; }

.close-text-btn { text-align: center; margin-top: auto; padding-top: 14px; }
.close-text-btn button {
  background: #eeeeee;
  border: none;
  color: #666666;
  padding: 9px 34px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}
.close-text-btn button:hover { background: #dddddd; }

/* ★ スマートフォン表示に関係するため変更時注意 ★ */
@media (max-width: 480px) {
  #coupon-widget { left: 16px; bottom: 16px; }
  /* 高さもPC版と同じく auto にして、中身に合わせて伸び縮みさせる。
     幅は画面いっぱいに近い形（左右12pxの余白のみ）まで広げ、
     最大でも380pxまでとしています。 */
  #coupon-widget.is-expanded { width: calc(100vw - 24px); max-width: 380px; height: auto; max-height: 90vh; }
}