*, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Zen Maru Gothic';
      font-weight: bold;
    }
    a:hover{
      opacity: 0.7;
    }
    a{
      display: inline-block;
  padding: 10px;
  margin: -10px;
    }
    :root {
      --color-pink: #F25D8E;
      --color-orange: #f8c284;
      --color-blue: #4BC8E8;
      --color-red: #E8192C;
      --color-yellow-green: #C8D93A;
      --color-light-pink: #F5D0DC;
      --color-bg: #FDE8EE;
      --color-white: #ffffff;
      --nav-width: 220px;
      --fv-width: 420px;
      --sp-max-width: 390px;
    }

    html, body {
      min-height: 100%;
      background-color: var(--color-bg);
       scroll-behavior: smooth; /* この1行を追加 */
       font-family: "Zen Maru Gothic", sans-serif;
    }
.pc-fv img {
        max-width: 100%;
        width: 100%;
        height: auto;
    }
    a.nav-btn--pink,
    a.nav-btn--orange,
    a.nav-btn--blue-sub,
    a.nav-btn--light-pink,
    .nav-btn--pink > img,
    .nav-btn--orange > img,
    .nav-btn--blue-sub > img,
    .nav-btn--light-pink > img{
        width: 378px;
    }
    a.nav-btn--pink,
    a.nav-btn--orange,
    a.nav-btn--blue-sub,
    a.nav-btn--light-pink,
    a.nav-btn--blue,
    a.nav-btn--pink-app{
        padding: 0 0 12px 0;
    }

    /*動画情報*/
.sec-youtube .img-block{
  width: 100%;
  height: 100%;
  margin: auto;
  position: relative;
  z-index: 2;
}
    iframe{
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0;
    position: absolute;
    }
  .pc-nav a.nav-btn.nav-btn--pink-app{
 margin-left: 17px;
  }
  section.section.sec-youtube{
    position: relative;
    padding: 12px;
  }
    /* =====================
       PC LAYOUT (≥ 900px)
    ===================== */
    .pc-wrapper {
      display: none;
    }
.nav-inner{
    gap: 1.5rem 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 350px;
    width: 100%;
}
.nav-inner a.nav-btn {
    padding: 0;
    max-width: 100%;
}
.nav-row{
  display: flex;
}
.pc-nav .nav-row{
  justify-content: center;
}
.pc-nav .nav-row a{
  width: 49%;
}
    @media (min-width: 750px) {
      .sp-only {
        display: none !important;
      }
      .pc-wrapper {
        display: flex;
        align-items: flex-start;
        min-height: 100vh;
        gap: 0;
        width: 100%;

      }

      /* --- Left: FV column --- */
      .pc-fv {
        position: sticky;
        top: 0;
        width: auto;
      }

      
.img-placeholder{
          width: 100%;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #888;
}
    }

    /* =====================
       SMARTPHONE LAYOUT
    ===================== */

    /* --- Section blocks --- */
    .section {
        width: 100%;
        background: #fce2eb;
    }

    .section.sec-app,
    .section.sec-thanks,
    .section.sec-kawaii,
    .section.sec-profile,
    .section.sec-footer {
        padding-bottom: 0;
    }
    #kawaii .img-block {
    height: 615px;
      background: #fff;
    }
    section#kawaii div {
        width: auto !important;
    }
#kawaii-sp .img-block{
    background: #fff;
    padding-bottom: 10px;
}
#app .img-block {
    height: auto;
    background-color: #fff;
}
    /* placeholder image blocks */
    .img-block {
      width: 100%;
      display: block;
      line-height: 0;
      text-align: center;
    }

    .img-block img {
      width: 100%;
      height: auto;
      display: block;
    }
  
    /* placeholder gray box (before images are embedded) */
    .img-placeholder {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #888;
    }

    /* ---- Hero / KV ---- */
    .sec-hero .img-placeholder {
      aspect-ratio: 750 / 750;
    }

    /* ---- YouTube area ---- */
    .sec-youtube .img-placeholder {
      aspect-ratio: 706 / 396;
    }

    /* ---- Navigation buttons (SP) ---- */
    .sp-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 6px 21px;
    background: #fce2eb;
    align-items: center;
    }
    .sp-nav img{
        width: 100%;
    }
    .sp-nav .nav-row {
      display: flex;
      gap: 28px;
      justify-content: space-between;
      width: 95%;
    }

    .sp-nav .nav-btn--full       { width: 100%; }

    /* ---- Content sections (SP body) ---- */
    .sec-stamp      .img-placeholder { aspect-ratio: 750 / 1200; }

    .sec-stores     .img-placeholder { aspect-ratio: 750 / 1400; }
    .sec-sticker    .img-placeholder { aspect-ratio: 750 / 900; }
    .sec-checklist  .img-placeholder { aspect-ratio: 750 / 1600; }

    /* =====================
       UTILITY
    ===================== */
    @media (max-width: 1260px) {


      .sp-only {
        display: block;
      }
    }


    /* =========================================
       取り込み用: 実施店舗アコーディオン
       .sec-stores 内に貼り付けてください
    ========================================= */
    .stores-section {
      background:#ffa0c8;
      margin: 0 11px;
    }
     .stores-section.stores-section--summerfes {
    background: #ffdf9a;
     }
     .stores-section.stores-section.stores-section--bargain{
    background: #e9747d;
     }
 .stores-section--bargain .stores-title{
    background:#f8c284;
    color: #000;
 }
 .stores-section--summerfes .stores-title{
 background:#73bedd;
 color: #fff;
 }


    .stores-title {
      background: #f14090;
      text-align: center;
      padding: 20px 0 12px;
      font-size: 22px;
      color: #fff;
      letter-spacing: 0.05em;
    margin: 0 auto;
    font-weight: 600;
    font-family: 'Zen Maru Gothic';
    width: 94.5%;
    }
 .stores-section.stores-section--bargain .stores-list{
    background:#e9747d;
 }
  .stores-section.stores-section--summerfes .stores-list{
    background:#ffdf9a;
  }
    .stores-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 6px;
        background: #ffa0c8;
        padding-bottom: 24px;
    }
 
    /* --- アコーディオン1件 --- */

    .store-item {
    overflow: hidden;
    text-align: center;
    margin: 0 10px;
    }
 
    /* トリガーボタン */
    .stores-section.stores-section--bargain .store-trigger {
        background: #E8192C;
    }

    .stores-section.stores-section--summerfes .store-trigger {
        background: #0173b9;
    }
    .store-trigger {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 14px;
        background: #4bc8e8;
        border: none;
        cursor: pointer;
        font-size: 17px;
        font-weight: 500;
        color: #fff;
        position: relative;
    }
 
    .store-trigger:hover {
      opacity: 0.9;
    }
 
    /* 矢印アイコン */
    .store-trigger__arrow {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      flex-shrink: 0;
      position: absolute;
      transition: transform 0.25s ease;
      right: 15px;
    }
 
    .store-trigger__arrow::before,
    .store-trigger__arrow::after {
      content: '';
      position: absolute;
      border-radius: 2px;
    }
 
    /* ＋ アイコン */
    .store-trigger__arrow::before {
      width: 2px;
      height: 10px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: opacity 0.2s;
    }
    .stores-section.stores-section--stamp .store-trigger__arrow::after{
    top: 15%;
    left: 25%;
    transform: rotate(135deg);
    width: 10px;
    transition: transform 0.3s ease;
    height: 10px;
    border-top: 3px solid #4bc8e8;
    border-right: 3px solid #4bc8e8;
    background: none !important;
    }
    .stores-section.stores-section--bargain .store-trigger__arrow::after {
    top: 15%;
    left: 25%;
    transform: rotate(135deg);
    width: 10px;
    transition: transform 0.3s ease;
    height: 10px;
    border-top: 3px solid #E8192C;
    border-right: 3px solid #E8192C;
    background: none !important;
    }
    .stores-section.stores-section--summerfes .store-trigger__arrow::after {
    top: 15%;
    left: 25%;
    transform: rotate(135deg);
    width: 10px;
    transition: transform 0.3s ease;
    height: 10px;
    border-top: 3px solid #003579;
    border-right: 3px solid #003579;
    background: none !important;
    }
 
    /* 開いているとき ＋ → － */
    .store-item.is-open .store-trigger__arrow::before {
      opacity: 0;
    }
 
    .store-item.is-open .store-trigger__arrow {
      transform: rotate(180deg);
    }
 
    /* 展開パネル */
    .store-panel {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
      background: #fff;
    }
 
    .store-item.is-open .store-panel {
      max-height: 500px; /* 十分な高さ */
    }
    .stores-section--stamp .store-panel__inner{
      border: 4px solid #4bc8e8;
      border-top: none;
    }
    .stores-section--bargain .store-panel__inner{
      border: 4px solid #E8192C;
      border-top: none;
    }
 .stores-section--summerfes .store-panel__inner{
      border: 4px solid #003579;
      border-top: none;
 }
    .store-panel__inner {
      padding: 10px 14px 14px;
      font-size: 13px;
      color: #333;
      line-height: 1.7;
    border-top: none;
    }
 
    /* 店舗情報行 */
    .store-info-row {
      display: flex;
      align-items: baseline;
      gap: 6px;
      padding: 4px 0;
      border-bottom: 1px dashed #e0e0e0;
    }
 
    .store-info-row:last-child {
      border-bottom: none;
    }
 
    .store-info-floor {
      font-size: 11px;
      color: #f25d8e;
      font-weight: 700;
      white-space: nowrap;
      min-width: 48px;
    }
 
    .store-info-name {
      font-size: 13px;
    }
 
    /* 未定ラベル */
    .stores-section.stores-section--bargain .store-undecided{
        color: #E8192C;
    }
    .stores-section.stores-section--summerfes .store-undecided {
        color: #0173ba;
    }
    .store-undecided {
     font-size: 18px;
    color: #54c1e0;
    background: #fff;
    font-weight: 600;
    }
section.stores-section.stores-section--stamp{
      margin-bottom: 42px;
}
section#sticker{
  margin-top: 42px;
}


    .pc-left{
        position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    width: 50%;
    height: 100vh;
    overflow: hidden;
    background-image: url(../img/bg.webp);
    padding-left: 40px
    }
    .pc-left__inner{
          width: 100%;
    max-width: 920px;
    }
    .pc-left .illust-wrap{
          position: relative;
    z-index: 0;
    }
    .pc-left .mv-img {
    max-width: 100%;
    margin: auto;
    position: relative;
    right: 30px;
    z-index: 1;
}
.pc-left img {
    max-width: 100%;
    width: 100%;
    height: auto;
}
.pc-fv{
    position: relative;
    width: 390px;
    height: 100vh;
    margin-left: 50%;
    z-index: 2;
}
.pc-sp-center{
    overflow: hidden;
}
.pc-nav{
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(50% - 390px);
    height: 100vh;
    background-image: url(../img/bg2.webp);
    background-size: contain;
}
#funfun-sp .img-placeholder{
  margin-top: 42px;
}
.back-white{
  height: 42px;
  background-color: #fff;
}
@media screen and (max-width: 1400px) {
    .pc-left {
        width: calc(100% - 390px);
    }
    .pc-fv{
        margin-left: calc(100% - 390px);
    }
    .pc-nav {
        display: none;
    }
}

@media screen and (max-width: 768px) {
  .pc-fv{        
  width: 100%;
        height: inherit;
        margin-left: 0;
        }
            .pc-left {
        display: none;
    }
     .pc-right {
    display: none;
  }
  section.section.sec-youtube{
        padding: 0 12px;
      }
      .nav-row a.nav-btn.nav-btn--blue, a.nav-btn--pink-app{
          width: 49.6%;
      }
      .sp-nav .nav-row{
        gap: 0;
    display: flex;
      justify-content: space-between;
      width: 95%;
      }
      .sec-youtube .img-block {
    padding: 24px 0 50%;
    position: relative;
    height: 0;
    margin: 0 auto 45px;
}
    iframe {
        padding: 0 8px;
        position: absolute;
            width: 100%;
    height: 100%;
    display: block;
    margin-top: 24px;
    top: 0;
    left: 0;
    right: 0;
    }
.sp-nav img {
    width: 100%;
    height: auto;   
}
#kaimawari-sp{
  padding-bottom: 11px;
  background: #fff;
}
}

/* 1. 画像とリンクを囲む親要素を基準位置にする */
.img-block-css-map-kawaii {
    position: relative;
    width: 100%;
}
.img-block-css-map-kawaii img {
    width: 100%;
    height: auto;
    display: block;
}

/* 2. リンクエリアの共通設定 */
.kawaii-link {
    position: absolute;
    display: block;
    cursor: pointer;
    z-index: 10;
    /* ↓↓↓【位置確認用】調整するときは最初の「/*」を消してください。
       リンクの場所が赤く半透明で表示されるので、スマホで見ながら微調整できます */
    /* background: rgba(255, 0, 0, 0.4); */
}

/* 3. 各リンクの配置（パーセント指定） */
/* 金沢フォーラス */
.k-kanazawa {
    top: 76%;      /* 画像の縦位置（少し上めに調整） */
    left: 9.6%;      /* 72px / 750px */
    width: 41.47%;   /* (383-72) / 750 */
    height: 6.0%;    /* (930-870) / 1000相当 */
}

/* 横浜ビブレ */
.k-yokohama {
    top: 76%;      /* 画像の縦位置（少し上めに調整） */
    left: 53.33%;    /* 400px / 750px */
    width: 41.2%;    /* (709-400) / 750 */
    height: 6.6%;    /* (933-867) / 1000相当 */
}

/* 1. 画像とリンクを囲む親要素を基準位置にする */
.img-block-css-map {
    position: relative;
    width: 100%;
}
.img-block-css-map img {
    width: 100%;
    height: auto;
    display: block;
}

/* 2. リンクエリアの共通設定 */
.map-link {
    position: absolute;
    display: block;
    cursor: pointer;
    z-index: 10;
    /* ↓↓↓【超重要】位置を調整するときは、下の「background」の最初の「/*」を消してください。
       リンクの場所が赤く半透明で表示されるので、スマホで見ながら完璧に微調整できます！ */
    /* background: rgba(255, 0, 0, 0.4); */
}

/* 3. 各リンクの配置（全体的に上へズラした調整版） */
/* kawaisouniサイト */
.f-kawaisouni {
    top: 45.5%;      /* 少し上に調整 */
    left: 25.6%;     
    width: 53.33%;   
    height: 5.71%;   
}
/* SNS 4個並び列 */
.f-insta { top: 54%; left: 4.13%; width: 27.87%; height: 2.71%; }
.f-x { top: 54%; left: 33.47%; width: 18.27%; height: 2.67%; }
.f-tiktok { top: 54%; left: 52.27%; width: 22.4%; height: 2.79%; }
.f-youtube { top: 54%; left: 75.33%; width: 24.8%; height: 2.79%; }

/* 下部 丸型アイコン3個 */
.i-insta { top: 75.53%; left: 30.8%; width: 10.67%; height: 3.33%; border-radius: 50%; }
.i-x { top: 75.53%; left: 46.8%; width: 10.67%; height: 3.33%; border-radius: 50%; }
.i-youtube { top: 75.53%; left: 62.93%; width: 10.67%; height: 3.33%; border-radius: 50%; }

/* OPAバナー */
.f-opa {
    top: 86%;     /* 少し上に調整 */
    left: 7.73%;     
    width: 89.33%;   
    height: 2.71%;   
}