body {
    font-size: 10px;
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.display_wrap {
    background-image: url(../img/back.jpg);
    background-size: cover;
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    /* 追加: 外側がスクロールしないように固定 */
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
}

.content_inner {
    margin: 0 auto;
    /* max-width: 620px; */
    max-width: 580px;
    box-shadow: -5px 0 12px -2px rgba(0, 0, 0, 0.1), 5px 0 12px -2px rgba(0, 0, 0, 0.1);
    /* 追加: 親要素に合わせて高さを確保し、縦スクロールさせる */
    height: 100vh;
    overflow-y: auto;
}

@media screen and (max-width: 619px) {
    .content_inner {
        box-shadow: none;
    }
}

.full {
    img {
        width: 100%;
    }

    a {
        img {
            width: 100%;
        }
    }
}

.inner_l {
    padding: 0 6%;

    img {
        width: 100%;
    }

    a {
        img {
            width: 100%;
        }
    }

    .movie {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 5%;

        video {
            width: 100%;
            /* 隙間の分を引いて計算 */
            height: auto;
        }

        img {
            margin: 0 auto;
        }
    }
}

.inner_m {
    img {
        width: 100%;
        padding: 0px 12%;
    }

    a {
        img {
            width: 100%;
            padding: 0px 6%;
        }
    }
}

.flex {
    display: flex;
}

.short {
    width: 100%;
    gap: 10px;

    /* 画像の間に10pxの隙間を作る */
    img {
        width: calc(50% - 5px);
        /* 隙間の分を引いて計算 */
        height: auto;
    }

    video {
        width: calc(50% - 5px);
        /* 隙間の分を引いて計算 */
        height: auto;
    }
}

.product_container {
    padding: 0 0 0 0;
}

.special_contents {
    padding: 10% 0 12%;
}

.presentcp {
    padding: 0 0 8%;
}

.btn {
    margin-top: 4%;
}

.cp_content_inner {
    display: flex;
    flex-direction: column;
    gap: 10%;
    padding: 4% 0 0 0;

    .inner_l {
        padding: 4%;
    }
}


.acc_unit_b{
padding: 16% 0 10% ;
background-color: #fff;
}

.inner_content_b{
margin: -4% 4% 0%;
border-radius: 8px;
padding-bottom: 1%;
text-align: center;
background-color: #F0F1F5;
.wise_b{
width: 86%;
margin: 0 auto;
}
.wise_b>img{
margin: -4% 0 0;
}

}


.acc_unit{
padding: 16% 0 10% ;
background-color: #F0F1F5;
}

.inner_content{
margin: -4% 4% 0%;
border-radius: 8px;
padding-bottom: 1%;
text-align: center;
background-color: #fff;
.wise{
width: 86%;
margin: 0 auto;
}
.wise>img{
margin: -4% 0 0;
}

}


/* ====================
=====================
アコーディオン系CSS（画像風にカスタム）
=====================
====================*/

/* アコーディオン全体のコンテナ */
.accordion {
    margin-bottom: 12%;
}

/* ヘッダー（ボタン）のスタイル */
.accordion-header {
    width: 100%;
    background-color: #192447; /* ① 画像に合わせたネイビーに変更 */
    color: #fff;
    border: none;
    padding: 18px 20px; /* 上下のパディングを少し広げて存在感を調整 */
    display: flex;
    justify-content: center; /* タイトルを中央に */
    align-items: center;
    position: relative;
    cursor: pointer;
    border-radius: 12px; /* ③ 角丸を少し強めて画像に合わせる */
    margin-top: 4%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* ⑥ 下部に薄い影を追加 */
    transition: border-radius 0.3s ease, opacity 0.4s ease;
}

.accordion-header:hover {
    opacity: 0.8;
}

/* 開いている時のヘッダーのスタイル */
.accordion-header.is-open {
}

/* タイトルテキスト */
.accordion-title {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    letter-spacing: 0.15em;
    font-size: 1.15rem;
    font-weight: bold;
}

/* アイコンエリア */
.accordion-icon-wrap {
    position: absolute;
    right: 24px; /* 右端からの余白を画像に合わせて調整 */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    /* ④ border-left（区切り線）の疑似要素は以下で非表示にしています */
}

/* 不要な区切り線を削除 */
.accordion-icon-wrap::before {
    display: none; 
}

/* ＋/－ アイコン（⑤ 丸枠付きのデザインに変更） */
.accordion-icon {
    position: relative;
    width: 26px; /* 丸のサイズ */
    height: 26px;
    border: 1px solid #fff; /* 白い丸枠線 */
    border-radius: 50%; /* 完全な正円にする */
}

.accordion-icon::before,
.accordion-icon::after {
    content: '';
    position: absolute;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* アイコンの横線（丸の中に綺麗に収まるよう幅を50%に） */
.accordion-icon::before {
    width: 50%;
    height: 1px;
}

/* アイコンの縦線（丸の中に綺麗に収まるよう高さを50%に） */
.accordion-icon::after {
    width: 1px;
    height: 50%;
}

/* 開いている時は縦線を消して「－」にする */
.accordion-header.is-open .accordion-icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

/* コンテンツ部分の開閉アニメーション設定 */
.accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
    /* box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); */
    border-radius: 0px 0px 12px 12px; /* コンテンツ下部も12pxの角丸に */
}

/* 開いている時のコンテンツ部分 */
.accordion-header.is-open + .accordion-content {
    grid-template-rows: 1fr;
}

/* はみ出した要素を隠すためのラッパー */
.accordion-inner {
    overflow: hidden;
}

/* 中身のデザイン */
.accordion-body {
    padding: 8% 0% 0%;
    /* background-color: #fff; */
    text-align: center;
    border-radius: 0px 0px 12px 12px;
    line-height: 1.8;
    border-top: none;
    display: flex;
    gap: 2.5rem;
    flex-direction: column;
}

.product_acc_inner img {
    /* width: 90%; */
}

.comment {
    padding-top: 4%;
}



/* ====================
=====================
Q&Aセクション専用CSS
=====================
====================*/

.qa_seq {
    max-width: 640px; /* サイトに合わせて全体の幅を調整してください */
    margin: 0 auto;
    background-color: #ffffff;
    padding: 60px 20px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

/* Q&A大見出し */
.qa_title {
    text-align: center;
    font-size: 2.2rem;
    color: #192447; /* ネイビー */
    margin-bottom: 40px;
    font-family: "Jost", sans-serif;
    letter-spacing: 0.05em;
}

/* Q&Aの一番上の太い境界線 */
.qa_container {
    border-top: 1px solid #192447;
}

/* 各質問の区切り線 */
.qa_item {
    border-bottom: 1px solid #192447;
}

/* 質問エリア（ボタン） */
.qa_header {
    width: 100%;
    background: none;
    border: none;
    padding: 28px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
    position: relative;
}

/* 左側のQとテキストのまとまり */
.qa_header_left {
    display: flex;
    align-items: flex-start; /* 複数行になってもQが上に固定されるように */
    gap: 16px;
    padding-right: 50px; /* 右側アイコンとの衝突を防ぐ余白 */
}

/* 「Q」の文字デザイン */
.qa_q_text {
    font-size: 1.5rem;
    color: #192447;
    line-height: 1.2;
    font-family: "Jost", sans-serif;
}

/* 質問のテキスト */
.qa_question {
    font-size: 1.15rem;
    color: #192447;
    line-height: 1.6;
    letter-spacing: 0.03em;
}

/* 右側のピンクの丸ボタン */
.qa_icon_circle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    background-color: #d14080; /* 画像風の鮮やかなピンク */
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color 0.3s;
}

/* ＋・ー アイコンの白線 */
.qa_icon_circle::before,
.qa_icon_circle::after {
    content: '';
    position: absolute;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 横線（ー） */
.qa_icon_circle::before {
    width: 14px;
    height: 2px;
}

/* 縦線（開くと消えて「ー」になる設定） */
.qa_icon_circle::after {
    width: 2px;
    height: 14px;
}

/* 最初から開いている状態（is-open）の時は縦線を消す */
.qa_header.is-open .qa_icon_circle::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

/* 開閉アニメーション用のコンテナ */
.qa_content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

/* 開いている時の処理（高さを1frにする） */
.qa_header.is-open + .qa_content {
    grid-template-rows: 1fr;
}

.qa_inner {
    overflow: hidden;
}

/* 回答エリアの中身 */
.qa_body {
    /* 質問テキストの開始位置と縦ラインを揃えるための左パディング */
    padding-left: 36px; 
    padding-bottom: 28px;
    padding-right: 50px;
}

/* 回答のテキスト */
.qa_answer {
    color: #d14080; /* 画像風のピンク */
    font-size: 1.1rem;
    line-height: 1.7;
    margin: 0;
    letter-spacing: 0.03em;
}