/* --- オープニングアニメーションのスタイル (一時無効) --- */
#opening-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at 50% 50%, #ffffff 0%, #f7f7ff 60%, #e0e0f0 100%);
    z-index: 99999; /* 他の要素より大きく */
    opacity: 1;
    transition: opacity 1.5s ease-out;
    pointer-events: auto; /* 背後の操作を防止 */
}
        #opening-screen::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background:
                radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.8) 0%, transparent 40%),
                radial-gradient(circle at 10% 90%, rgba(135, 206, 250, 0.5) 0%, rgba(255, 105, 180, 0.4) 30%, transparent 60%);
            animation: subtle-light-move 15s infinite alternate ease-in-out;
        }

        @keyframes subtle-light-move {
            from {
                transform: translate(0, 0);
            }

            to {
                transform: translate(5%, 5%);
            }
        }

        #logo {
            font-size: 4rem;
            font-family: 'Arial', sans-serif;
            color: #333;
            opacity: 1;
            transition: opacity 2s ease-in-out;
            font-weight: bold;
            letter-spacing: 0.1em;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 10000;
        }

        .fade-out-logo {
            opacity: 0 !important;
        }

        .fade-out-screen {
            opacity: 0 !important;
            transition: opacity 1.8s ease-out;
        }

        .screen-hidden {
            visibility: hidden;
        }

  /* --- 既存のCSS --- */
  body,
  html {
      margin: 0;
      padding: 0;
      /* height: 100%; */
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: #333;
      /* bodyのスクロール制限を一時解除 */
      /* overflow: hidden; */
  }

  .fixed-background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-image: url('../images/background.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
  }

.main-container {
    width: 100%;
    /* height: 100%; を削除 */
    display: flex;
    justify-content: center;
}

  .scrollable-content {
      width: 100%;
      height: 100%;
      /* max-width: 500px; */
      max-width: 500px;
      border-radius: 0;
      box-shadow: none;
      /* overflow: hidden; */
      z-index: 10;

      /* スクロールバー非表示 */
      scrollbar-width: none;

      &::-webkit-scrollbar {
          width: 0;
          height: 0;
      }
  }

  .scrollable-content img {
      max-width: 100%;

  }

  /* --- 固定バナーのスタイル --- */
  
  .fixed_banner {
      display: flex;
      position: fixed;
      bottom: 0;
      max-width: 500px;
      /* main-containerの幅に合わせる */
      width: 100%;
      z-index: 999;
      /* 追加: フェードアニメーション */
      transition: opacity 0.3s ease-out, visibility 0.3s;
  }

  /* 追加: 非表示クラス */
  .fixed_banner.is-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      /* クリックを無効にする */
  }

  .fixed_banner a {
      width: 100%;
  }

  .fixed_banner a img {
      width: 100%;
      bottom: 0;
  }

  @media screen and (min-width: 960px) {
    .fixed_banner {
        display: none !important; /* 強制的に非表示 */
    }

    /* 代わりにサイドバナーを表示 */
    .side-fixed-banner {
        display: block;
    }
}

  /* --- コンテンツのスタイル --- */
  .kv_container {
      max-width: 500px;
      width: 100%;
  }

  .about {
      background-image: url('../images/bg_about.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
  }

  .about_txt {
      padding: 20% 10% 0% 10%;
  }

  .about_products {
      padding: 10% 14% 20% 14%;
  }

  .fadein {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 3s ease-out, transform 3s ease-in-out;
      will-change: opacity, transform;
  }

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

  #logo img {
      width: 100%;
  }

  .white_none {
      margin-top: -1px;
  }

  .lineup {
      padding: 20% 0% 20% 0%;
      background-position: top;
      background-image: url(../images/bg_lineup.png);
      background-size: cover;
      position: relative;
  }

  .lineup_products_items {
      display: flex;
      flex-direction: column;
      padding-bottom: 16%;
      padding: 0% 14% 14% 14%;
  }

  .lineup_section_ttl {
      padding: 0% 0% 8%;
  }

  .lineup_ttl {
      padding: 0% 4%;
  }

  .lineup_p {
      padding: 8% 20% 0%;
  }


  .btn_more {
      display: flex;
      justify-content: center;
      margin: 0 auto;
      padding: 8% 26%;
  }

  .btn_soon{
      display: flex;
      justify-content: center;
      margin: 0 auto;
      padding: 8% 0%;
}

  ._soon{
    pointer-events: none;
}

  .circle {
      position: absolute;
      bottom: 0;
      width: 100%;
      left: 0;
      /* border-bottom: 3px solid #ffffff; */
  }

  .circle img {
      width: 100%;
  }

  .making,
  .interview {
      background-color: #ffffff;
      padding-bottom: 14%;
  }

  .video_container {
      padding: 4%;
      background-color: #E988A9;
  }

  .video_container video {
      width: 100%;
  }

  .campaign {
      background-image: url(../images/bg_campaign.png);
      background-position: top;
      background-size: cover;
      position: relative;
      padding-bottom: 12%;
  }

  .campaign_info {
      padding: 20% 8% 8% 8%;
  }

  .campaign_info_other {
      padding: 4% 8% 8% 8%;
  }

  .campaign_info_btn {
      display: flex;
      justify-content: center;
      padding: 0% 6%;
  }

  .campaign_info_sub {
      padding: 4% 8% 0%;
  }

  .entry {
      background-color: #ffffff;
      padding: 0% 6% 16% 6%;
  }

  .entry_ttl {}

  .entry_container {
      padding: 10% 6%;
      background-color: #FFF7F8;
  }

  .entry_arrow {
      padding: 4% 0%;
  }

  .entry_btn {
      display: flex;
      justify-content: center;
      padding: 8% 6% 0%;
  }

  .product_about_item {}

  .pr_notice {
      padding-bottom: 10%;
  }

  ._pr01 {
      background-image: url(../images/bg_product_about_01.png);
      background-position: top;
      background-size: cover;
      position: relative;
      padding: 20% 8% 16% 8%;
  }

  ._pr02 {
      background-image: url(../images/bg_product_about_02.png);
      padding: 0% 4% 0% 4%;
      background-position: top;
      background-size: cover;
      position: relative;
  }

  ._pr03 {
      background-image: url(../images/bg_product_about_03.png);
      padding: 20% 8% 16% 8%;
      background-position: top;
      background-size: cover;
      position: relative;
  }

  .buy_btn {
      display: flex;
      justify-content: center;
      padding: 8% 6%;
  }

  .product_about_item_container {
      padding: 16% 0% 0%;
  }

  .qa {
      background-color: #FFF7F8;
      padding: 16% 0% 40%;
      font-family: "Shippori Mincho", serif;
      font-weight: 400;
      font-style: normal;
  }

  .qa-container {
      color: #d16b7f;
      padding: 8% 4% 0%;
  }

  .qa-item {
      border-bottom: 1px solid #F36981;
  }

  .qa-item:first-of-type {
      border-top: 1px solid #F36981;
  }

  /* ボタンのリセットと装飾 */
  .qa-question {
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      outline: none;
      padding: 24px 40px 24px 16px;
      cursor: pointer;
      position: relative;
      font-weight: bold;
      font-size: 17px;
      color: #EC7092;
      line-height: 1.6;
      background-color: #ffffff;
      display: block;
  }

  /* アイコン (+/-) */
  .qa-question::after {
      content: '+';
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      background-color: #EC7092;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s;
  }

  /* 開いている時のアイコン変化 */
  .qa-item.is-open .qa-question::after {
      content: '−';
  }

  /* 回答の隠れる部分 */
  .qa-answer {
      height: 0;
      overflow: hidden;
      transition: height 0.3s ease-out;
      /* ここで滑らかさを制御 */
      background-color: #FDE9EB;
  }

  /* 内側の余白（高さ計算を正確にするため） */
  .qa-answer-inner {
      padding: 20px;
      color: #000000;
      font-size: 16px;
      line-height: 1.6;
  }

  .qa-answer-inner small {
      font-size: 10px;
  }

  /* --- 共通設定（一度書けばOK） --- */
  .btn_hover_switch {
      display: block;
      width: 100%;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      transition: background-image 0.2s ease;
  }

  /* --- ポストボタン専用設定 --- */
  ._post {
      max-width: 500px;
      /* デザインに合わせて調整してください */
      aspect-ratio: 500 / 120;
      /* btn_post.png の実際の [横幅 / 縦幅] に書き換えてください */
      background-image: url('../images/btn_post.png');
  }

  ._post:hover {
      background-image: url('../images/btn_post_hv.png');
  }

  /* --- 購入ボタン専用設定（先ほどの内容） --- */
  ._buy {
      max-width: 400px;
      aspect-ratio: 400 / 100;
      /* btn_buy.png の比率 */
      background-image: url('../images/btn_buy.png');
  }

  ._buy:hover {
      background-image: url('../images/btn_buy_hv.png');
  }

  /* --- ノベルティ応募ボタン専用設定 --- */
  ._novel {
      max-width: 500px;
      /* デザインに合わせて調整 */
      aspect-ratio: 500 / 130;
      /* btn_novel.png の [横幅 / 縦幅] に書き換えてください */
      background-image: url('../images/btn_novel.png');
  }

  ._novel:hover {
      background-image: url('../images/btn_novel_hv.png');
  }


  /* --- サイド固定バナーのスタイル --- */
.side-fixed-banner {
    position: fixed;
    /* コンテンツの右端に合わせる計算 */
    /* 50%（中央） + コンテンツ半分の幅(300px) + 余白(20px) */
    /* left: calc(50% + 290px); */
    /* top: 50%; */
     /* 上からの位置（お好みで調整） */
    /* width: 220px; バナーのサイズに合わせて調整 */
    bottom: 2vw;
    right: 2vw;
    width: 19vw;
    z-index: 1000;
    display: none; /* デフォルトは非表示（スマホ等） */
}

.side-fixed-banner img {
    width: 100%;
    height: auto;
        border-radius: 2px;
    display: block;
}

/* 画面幅が広い時（例: 960px以上）だけバナーを表示 */
/* 計算式: コンテンツ600px + (バナー160px + 余白20px) * 2 = 960px */
@media screen and (min-width: 960px) {
    .side-fixed-banner {
        display: block;
    }
}

/* ホバー時に少し浮かせるなどの演出（任意） */
.side-fixed-banner a:hover {
    opacity: 0.8;
}

.webcm_container{
    padding: 4% 0% 6%;
background-color:#E988A9 ;
}