@charset "UTF-8";
/* CSS Document */

html {
  scroll-behavior: smooth;
}

/* ==============================================
   ★新規追加：慣性スクロール（Lenis）用のベース設定
============================================== */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important; /* CSSのsmoothスクロールとの喧嘩を防ぎます */
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}


ol,ul,dl,p {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

a:visited {
  color: #000000;
}

.wrap{
    width: 100%;
    max-width: 430px;
    background-color: #C8E6F0;
    margin-left: auto;
    margin-right: auto;
}

.kawaii_kouryaku{
    position: relative;
    top: -100px;
}

.quize{
   position: relative;
   top: -80px;
}

.quest1_icon{
    position: relative;
    top: 50px;
}

.omoide_story{
    background-color: #9ADDF8;
    width: 370px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
}

.summer_story{
    margin-top: 32px;
    margin-bottom: 15px;
}

.summer_story_txt{
    width: 270px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    font-size: 13px;
    text-align: left;
}


/* アコーディオンの基本設定 */
details {
  transition: height 0.5s ease; /* ★ここを書き換え */
  height: 80px;
  margin-bottom: 1px;
  overflow: hidden;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  summary {
    line-height: 0;       /* ★ここを50pxから0に変更（隙間を消す） */
    align-items: center;
    list-style: none;
    padding: 0;           /* ★15pxを0に変更 */
    color: #fff;
    position: relative;
    text-align: center;   /* ★画像が中央に来るように追加 */

    &::-webkit-details-marker {
      display: none;
    }
    p {
        font-size: 12px;
        text-align: justify;
    }
  }
}

/* ★新規追加：summary内の画像特有の隙間を消滅させる */
details summary img {
    display: block;
    margin: 0 auto;
}

/* ==============================================
   追加セクション用のスタイル
============================================== */

/* アコーディオンの中身（画像用は中央揃え） */
.details_inner {
    padding: 10px 0;
    text-align: center;
}

/* ==============================================
   アコーディオン個別の高さ設定（開いた時の高さ）
============================================== */
details.accordion_quest1_howto[open] {
    height: 510px; /* ★ご指定の510pxに変更 */
}
details.accordion_quest1_quiz[open] {
    height: 270px; /* 画像用 */
}
details.accordion_quest2_play[open] {
    height: 1660px; /* 画像用 */
}


/* ==============================================
   ★参加方法（テキスト版）の綺麗見え用スタイル
============================================== */
.accordion_quest1_howto .details_inner {
    width: 330px;              /* ★幅を330pxに指定 */
    margin: 0 auto;            /* ★中央寄せ */
    box-sizing: border-box;    /* 余白を含めて330pxに収める設定 */
    padding: 20px 25px;        /* ブロック内側の上下左右の余白 */
    background-color: #B5E6FA; /* ★背景色を#B5E6FAに指定 */
    border-radius: 0px;        /* 角を少し丸く（真四角が良ければこの行を削除してください） */
    font-size: 13px;
    line-height: 1.6;
    color: #2c5062;            /* 文字色 */
}

/* 👇 pタグ（上のテキスト）背景色などを削除してスッキリ化 */
.accordion_quest1_howto .details_inner p {
    margin-bottom: 12px;
    font-weight: bold;
    text-align: left;
}

/* 👇 ulタグ（下のリスト）背景色などを削除してスッキリ化 */
.accordion_quest1_howto .details_inner ul.step_list {
    padding-left: 0;
    list-style-type: none;     /* デフォルトの黒丸(・)を消す */
    text-align: left;
}

.accordion_quest1_howto .details_inner ul.step_list li {
    margin-bottom: 8px;        /* リスト同士の縦の隙間 */
    text-align: left;
    padding-left: 1.4em;       /* 全体を少し右にずらす */
    text-indent: -1.4em;       /* 1行目（①など）だけを左に突き出させる */
}


/* ==============================================
   EVENT FLOW セクション全体
============================================= */
.event_flow {
    width: 430px;
    margin: -120px auto 0; 
    position: relative;
    z-index: 5;         
    text-align: center; 
    box-sizing: border-box;
    /* ★背景色（background-color）を削除しました */
    
}
.event_flow > div:first-child {
    line-height: 0;
    font-size: 0;
}

.event_flow > div:first-child img {
    display: block;
    margin: 0 auto;
}

/* ==============================================
   QUEST 2 アイコンの重ね合わせ表現
============================================== */
.quest2_header {
    position: relative;     /* 重ね合わせの基準となる箱 */
    width: 430px;           /* ベースとなる背景画像の幅 */
    margin: 60px auto 0;    /* HTMLにあった margin-top: 60px; を移動 */
}

/* 後ろの背景（雲とキラキラ） */
.quest2_header .quest2_bg {
    width: 100%;
    display: block;
}

/* 前のアイコン（QUEST 2） */
.quest2_header .quest2_fg {
    position: absolute;     /* 基準の箱の中で自由に動かせるようにする */
    
    /* 👇 アイコンの位置とサイズ調整 */
    top: 50%;                    /* 上から50%の位置に */
    transform: translateY(-50%); /* 自身の高さの半分だけ上に戻す（＝完璧な上下中央揃え） */
    left: 20px;                  /* 左からの距離（デザインに合わせて調整してください） */
    width: 160px;                /* アイコンのサイズ（適宜変更してください） */
}




/* ==============================================
   1〜6の玉のジグザグ配置 ＆ フワフワアニメーション
============================================== */
.floating_balls {
    display: flex;
    flex-direction: column; 
    /* ★上下20px、左右52pxの余白を設定して、中身のエリアを326pxに絞ります */
    padding: 20px 52px;
    width: 430px;               /* ★背景を塗るために幅を430pxに拡大 */
    box-sizing: border-box;     /* ★paddingを含めて430pxに収めるための必須プロパティ */
    margin: 0 auto;    
    background-color: #D3F2FF; 
    position: relative;         /* ★【重要】キラキラを重ねる基準にするために追記 */
    padding-bottom: 100px;
}

/* 👇【新規追加】幅78pxで中央にキラキラを重ねるスタイル */
.floating_balls .sparkle_overlay {
    position: absolute;
    top: 85px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;                /* 玉（ball）より前面に表示 */
    pointer-events: none;       /* タップを透過させて後ろの玉を触れるようにする設定 */
}

.floating_balls .sparkle_overlay img {
    width: 100px;                /* ★指定に固定 */
    height: auto;
    display: block;
    margin: 0 auto;             /* ★中央寄せ */
}

.floating_balls .ball {
    width: 161px;
    position: relative;
}

/* 2番目以降の玉を少し上に引き上げて、玉同士の縦の距離を詰める */
.floating_balls .ball + .ball {
    margin-top: -22px;
}

/* 奇数番目（1, 3, 5）は左寄せ */
.floating_balls .ball:nth-child(odd) {
    align-self: flex-start;
    margin-left: 0; 
}

/* 偶数番目（2, 4, 6）は右寄せ */
.floating_balls .ball:nth-child(even) {
    align-self: flex-end;
    margin-right: 0; 
}

/* （これ以降の img の設定やアニメーションは変更ありません） */

.floating_balls .ball img {
    width: 100%;
    height: auto;
    display: block;
}

@keyframes ballFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); } /* 10px上下にフワフワ */
}

/* それぞれの玉の動きをずらす（変更なし） */
.floating_balls .ball:nth-child(1) { animation: ballFloat 3s ease-in-out infinite 0s; }
.floating_balls .ball:nth-child(2) { animation: ballFloat 3s ease-in-out infinite 0.3s; }
.floating_balls .ball:nth-child(3) { animation: ballFloat 3s ease-in-out infinite 0.6s; }
.floating_balls .ball:nth-child(4) { animation: ballFloat 3s ease-in-out infinite 0.9s; }
.floating_balls .ball:nth-child(5) { animation: ballFloat 3s ease-in-out infinite 1.2s; }
.floating_balls .ball:nth-child(6) { animation: ballFloat 3s ease-in-out infinite 1.5s; }

/* ==============================================
   ★WEB限定バッジ取得クイズ（画像版）のピッタリ密着＆角丸外し
============================================== */
.accordion_quest1_quiz .details_inner {
    padding-top: 0;    /* ★ボタンとの間の隙間（上余白）をゼロにして密着させます */
    border-radius: 0;  /* ★角丸を完全に無くして真っ直ぐな四角形にします */
}

.accordion_quest1_quiz .details_inner img {
    border-radius: 0;  /* 万が一画像自体にブラウザの角丸プロパティが効いていた場合用のリセット */
}

/* ==============================================
   ★アコーディオンが閉じる時用のアニメーションクラス
============================================== */
details.closing {
    height: 80px !important; /* 強制的に閉じた時の高さ（80px）に戻す */
}

/* ==============================================
   ★QUEST 2 (KAWAII OTO LAB) の3箇所隙間ゼロ化
============================================== */

/* ① 【一番上の隙間対策】ヘッダー画像の下の隙間を消滅させる */
.quest2_header {
    line-height: 0;
    font-size: 0;
}

/* ② 【真ん中の隙間対策】ABOUT画像のブロック余白と画像の下隙間をリセット */
.otolab_story .otolab_title {
    line-height: 0;
    font-size: 0;
    text-align: center;
    background-color: #E6E6FA; /* 画像の左右にできる隙間を背景色で埋める */
}

.otolab_story .otolab_title img {
    display: inline-block;
    vertical-align: bottom;
}

/* ③ 【一番下の隙間対策】遊び方アコーディオン開閉時の隙間をゼロにして密着＆角丸外し */
.accordion_quest2_play .details_inner {
    padding-top: 0;    /* ボタンとの間の上余白をゼロに */
    padding-bottom: 0; /* 下の要素と密着させるために下余白もゼロに */
    border-radius: 0;  /* 角丸を完全に無くして真っ直ぐな四角形にします */
}

.accordion_quest2_play .details_inner img {
    display: block;
    margin: 0 auto;
    border-radius: 0;  /* 画像自体の角丸もリセット */
}

/* ==============================================
   ★BENEFITS ＆ SHOP INFO（背景色統一＆隙間リセット）
============================================== */
.benefits {
    width: 430px;
    
    /* ★第一数値（-60px）で上のブロックへの重ね具合を調整します */
    /* 雲の波型ラインがきれいに重なるよう、まずは -60px あたりから調整してみてください */
    margin: -70px auto 0; 
    
    position: relative;     /* ★重ね合わせを有効にするために必須の設定 */
    z-index: 6;             /* ★上のブロック（z-index: 5）よりも前面に重ねるために「6」に設定します */
    
    text-align: center;
    box-sizing: border-box;
}

/* タイトル画像の下の謎の隙間を完全に消滅させる */
.benefits .benefits_title {
    line-height: 0;
    font-size: 0;
}

.benefits .benefits_title img {
    display: block;
    margin: 0 auto;
}

/* 👇 ★ご指定の範囲の背景色を #D3F2FF に統一するスタイル */
.benefits .benefits_inner {
    width: 430px;
    background-color: #D3F2FF; /* 背景色を指定 */
    box-sizing: border-box;
    padding-top: 20px;         /* 特典コンテンツ画像（370px）の上の余白 */
    padding-bottom: 50px;      /* ショップ情報（一番下）の下の余白 */
}

.benefits .benefits_content {
    line-height: 0;
    font-size: 0;
}

.benefits .benefits_content img {
    display: inline-block;
}

/* ショップ情報エリア */
.shop_info {
    margin-top: 40px;
    text-align: center;
}

/* 👇 ★新規追加：店舗詳細テキストの綺麗見えスタイル */
.shop_details_text {
    margin-top: 20px;
    font-size: 13px;
    line-height: 1.8;
    color: #020202; /* 全体のテキスト色と合わせて統一感を出します */
}

/* 住所の部分（少し目立たせるために太字にしています） */
.shop_details_text .address {
    font-weight: bold;
    margin-bottom: 16px;
}

/* [MAP] リンクの部分 */
.shop_details_text .map_link {
    margin-bottom: 20px;
}

.shop_details_text .map_link a {
    color: #2c5062;
    text-decoration: underline; /* リンクと分かるように下線をつけます */
    font-weight: bold;
    font-size: 14px;
    transition: opacity 0.3s;
}

/* タップした時に少し透明にするフワッとしたエフェクト */
.shop_details_text .map_link a:hover {
    opacity: 0.7;
}

/* 営業時間部分 */
.shop_details_text .hours {
    font-weight: bold;
}

/* ==============================================
   ★SHARE SNS セクション（丸アイコン3つ横並び）
============================================== */
.share_sns {
    margin-top: 60px;
    padding-bottom: 10px;
    text-align: center;
}

/* アイコンを横並びにして中央に寄せる設定 */
.share_sns .sns_icon_list {
    margin-top: 20px;
    display: flex;
    justify-content: center; /* 横方向の中央寄せ */
    gap: 15px;              /* ★アイコンとアイコンの間の隙間です（お好みで調整してください） */
}

.share_sns .sns_icon_list a {
    display: block;
    line-height: 0;
}

/* アイコン画像自体のスタイル */
.share_sns .sns_icon_list img {
    width: 75px;            /* ★ご指定の35pxに固定 */
    height: 75px;           /* 縦横比を1:1にして綺麗な正方形にします */
    object-fit: cover;      /* 画像が歪まないように綺麗に収める設定 */
    border-radius: 50%;     /* ★元の画像が四角形でも、綺麗な丸型にくり抜きます */
    transition: transform 0.2s, opacity 0.2s; /* マウスを乗せたときの動きを滑らかに */
    margin-top: 35px;
}

/* 【おまけ】アイコンをタップ・マウスホバーした時にフワッと少し大きくなる可愛いエフェクト */
.share_sns .sns_icon_list a:hover img {
    opacity: 0.8;
    transform: scale(1.1);  /* 1.1倍の大きさにフワッと変化 */
}

/* ==============================================
   ★スマホでの横揺れ・右寄り解消（レスポンシブ対応）
============================================== */
/* ① 画面外へのはみ出し（横スクロール）を強制的にブロック */
body {
    overflow-x: hidden;
}

/* ② 画像が箱のサイズを突き破らないようにする基本設定 */
img {
    max-width: 100%;
    height: auto;
}

/* ③ 固定幅（px）で指定していた主要ブロックを、小さい画面では「100%」に縮むように上書き */
.wrap,
.event_flow,
.quest2_header,
.floating_balls,
.benefits,
.benefits .benefits_inner {
    width: 100%;
    max-width: 430px;
}

/* インラインスタイルで430pxが指定されている箱の上書き */
.otolab_story {
    width: 100% !important; 
    max-width: 430px;
}

/* 370px以下の固定幅になっていた中身の箱も同様に縮むように設定 */
.omoide_story {
    width: 100%;
    max-width: 370px;
}

.summer_story_txt {
    width: 100%;
    max-width: 270px;
}

.accordion_quest1_howto .details_inner {
    width: 100%;
    max-width: 330px;
}