/* --- 既存の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%;
    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(20px);
    transition: opacity 0.8s ease-out, transform 0.8s 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% 16% 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% 24%;
}

.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%;
}

.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');
}




/*-----ここから----*/

.campaign_content {
    background-image: url('../images/campaign_content_bg.jpg');
    padding: 8% 4% 10% 4%;
}

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

.campaign_content_btn a:hover {
    opacity: 0.6;
    transition: 0.3s ease-in-out;
}

.about_content {
    background-color: #E6EFF8;
    padding: 12% 4% 12% 4%;
}

.about_content_cm {
    padding: 10% 4% 0% 4%;
}

.cp_area {
    background-color: #ffffff;
    position: relative;
    padding: 0% 0% 8% 0%;
}

.cp_area_1 {
    background-color: #E6EFF8;
    margin: 10% 4% 6%;
    padding: 10% 0%;
    border-radius: 10px;
}

.cp_area_1_content {
    margin: 8% 3% 0% 3%;
}


.cp_area_1_ttl {
    margin-left: -4%;
    /* 親のmargin(4%)を超えて外に出す */
    margin-right: -4%;
    /* 右側も同様に外に出す */
    width: 110%;
    /* 100%以上に広げる */
}

.cp_area_1_ttl img {
    width: 100%;
    /* 親要素(.cp_area_1_ttl)の幅いっぱいに表示 */
    height: auto;
    display: block;
}

.cp_area_2 {
    padding: 0% 4% 0% 4%;
}

.cp_products {
    background-color: #E6EFF8;
    padding: 0% 0% 4% 0%;
}

.cp_products_item {
    text-align: center;
    margin: 0% 4% 8% 4%;
    background-color: #ffffff;
    border-radius: 16px;
}

.cp_products_item_img{
padding: 4%;
}

.cp_products_item_txt{
padding: 0% 4%;
}

.cp_products_item_set{
padding: 0% 4%;
}

.cp_products_item_price{
padding: 4% 4% 2%;
}

.cp_products_item_present{
padding: 0% 4% 4%;
}

.cp_products_item_buy_btn {
    padding: 0% 8%;
}

.cp_products_item_notice{
padding: 2% 20% 10%;
}

.cp_products_item_buy_btn a:hover {
    opacity: 0.6;
    transition: 0.3s ease-in-out;
}

.cp_special_apply_content{
padding: 4% 4% 10%;
background-color: #ffffff;
}
.cp_special_apply_01,
.cp_special_apply_02,
.cp_special_apply_03{
padding: 4% 0% 0%;
}

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

.cp_special_apply_btn_02{
padding: 2% 0% 0%;
}

._soon{
pointer-events: none;
}

.product_lineup_content{
padding: 10% 4% 14%;
background-color: #F3EDE3;
}

.product_lineup_01,
.product_lineup_02,
.product_lineup_03{
    padding: 0% 0% 8%;
}

.caution_content_inner{
padding: 12% 4%;
background-color: #ffffff;
}

.caution_rest,
.caution_policy,
.caution_contact
{
padding: 8% 0% 0%;
}

/* ImageMapsterが作る枠がはみ出さないようにする */
.product_lineup_01, 
.product_lineup_02, 
.product_lineup_03, 
.cp_special_set_content {
    width: 100%;
    max-width: 100%;
}

/* 生成されたdivコンテナを中央に寄せる */
div[id^="mapster_wrap_"] {
    margin: 0 auto !important;
}

.cp_special_apply_btn_01 a:hover{
    opacity: 0.6;
    transition: 0.3s ease-in-out;
}