@charset "UTF-8";

/* =========================================
   Base & Reset
========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    color: #333;
    line-height: 1.8;
    background-color: #fff;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
}

.fontRed {
    color: #EC081F;
}

.linkText {
    text-decoration: underline;
}

/* =========================================
   MV
========================================= */
.EN_mv img {
    width: 100%;
    display: block;
}

.EN_mv_inner {
    text-align: center;
}

/* =========================================
   Layout & Utility
========================================= */
.container02 {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}

.section {
    padding: 40px 0;
}


/* Backgrounds */
.bg-light-blue {
    background-color: #ebfaff;
}

.bg-blue {
    background-color: #00a4e4;
    color: #fff;
}

.bg-yellow-stripe {
    /* 斜めストライプの背景 */
    background: repeating-linear-gradient(-45deg,
            #fff9c4,
            #fff9c4 10px,
            #fffde7 10px,
            #fffde7 20px);
}


/* =========================================
   notion Section
========================================= */

.notion-section {
    text-align: left;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

.notion-section h2 {
    color: #0088cf;
    text-align: center;
    margin-bottom: 23px;
}

.notion-section li {
    margin: 7px 0;
}

.notion-section a {
    text-decoration: underline;
}

span.date {
    margin-right: 15px;
}

/* =========================================
   Intro Section
========================================= */
.intro-section {
    background-color: #e6f7ff;
    text-align: center;
    border-radius: 20px;
    margin: 20px auto;
    width: 100%;
    max-width: 900px;
}

.section-title {
    font-size: 20px;
    margin-bottom: 20px;
    color: #0088cc;
}

.intro-section h3 {
    font-size: 1.35rem;
    margin: 30px 0 30px;
    color: #0088cc;
}

.intro-characters {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 35px;
    font-size: 40px;
}

.intro-content ul {
    text-align: left;
    width: 80%;
    margin: 0 auto;

}

.intro-content li {
    list-style: disc;
}

/* =========================================
   「？」マークの装飾（画像配置）
========================================= */
.intro-section {
    position: relative;
    /* 【重要】基準点 */
    overflow: hidden;
    /* はみ出し防止 */
}

/* 画像（？）共通のスタイル */
.deco-question {
    position: absolute;
    width: 120px;
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}

/* 左側の「？」の位置と傾き */
.deco-question.left {
    top: 50px;
    left: 5%;
    transform: rotate(-15deg);
    /* 左に傾ける */
}

/* 右側の「？」の位置と傾き */
.deco-question.right {
    bottom: 50px;
    right: 5%;
    transform: rotate(15deg);
    /* 右に傾ける */
}



/* =========================================
   Video Section
========================================= */
.video-section {
    text-align: center;
}

.youtube-wrapper {
    position: relative;
    /* ★追記：中の動画をピッタリ配置するための基準点 */
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* iframe自体の設定 */
.youtube-wrapper iframe {
    position: absolute;
    /* ★追記：外側の箱に絶対配置する */
    top: 0;
    left: 0;
    width: 100% !important;
    /* ★変更：!importantで強制的に100%幅にする */
    height: 100% !important;
    /* ★変更：!importantで強制的に100%高さにする */
    display: block;
    border: none;
}

/* =========================================
   Method Icons Grid (メニューボタン)
========================================= */
.method-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 43px;
    max-width: 600px;
    margin: 0 auto;
}

.icon-item {
    background-color: #fff;
    color: #0088cc;
    /* 基本のテキスト色（青） */
    width: 150px;
    /* ボタンの幅（カンプに合わせて調整） */
    height: 150px;
    /* ボタンの高さ */
    border-radius: 15px;
    /* 角の丸み */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* ふんわりした影 */
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    line-height: 20px;

    /* フレックスボックスで中身を縦並び・中央揃えにする */
    display: flex;
    flex-direction: column;
    /* ★ここが縦並びの魔法！ */
    align-items: center;
    /* 横方向の中央揃え */
    justify-content: center;
    /* 縦方向の中央揃え */

    transition: transform 0.2s ease;
    /* ホバー時のアニメーション準備 */
}

/* マウスが乗った時に少しフワッと浮くアクション（お好みで） */
.icon-item:hover {
    transform: translateY(-5px);
}

/* アイコン画像のサイズと余白 */
.icon-img {
    width: 60px;
    /* アイコンの大きさ（適宜調整） */
    height: auto;
    margin-bottom: 3px;
    /* テキストとの間の余白 */
}

/* 「注意すること」ボタンだけオレンジ色にする */
.icon-item.color-orange {
    color: #ff9800;
}


/* =========================================
   Accordion (Details / Summary)
========================================= */

.soudan-accordion {
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
}

/* summaryタグ特有の三角マークを消す */
.soudan-accordion summary::-webkit-details-marker {
    display: none;
}

.soudan-accordion summary {
    list-style: none;
    cursor: pointer;
}

.soudan-list {
    align-items: center;
    display: flex;
    font-size: 22px;
}

.soudan-icon {
    width: 40px;
    margin-right: 10px;
}

.soudan-header {
    background-color: #00a4e4;
    color: #fff;
    padding: 5px 20px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* =========================================
   アコーディオンの ＋/－ 切り替え（絶対崩れない版）
========================================= */

/* ① 万が一HTMLに <span class="toggle-icon"> が残っていても強制的に隠す魔法 */
.toggle-icon {
    display: none !important;
}

/* ② ヘッダーの設定を少し調整（アイコンが文字に被らないように右側に余白を作る） */
.soudan-header {
    position: relative; /* ★追加：右端のアイコンの基準点にする */
    padding-right: 50px !important; 
}

/* ③ CSSの力だけで、右端に「＋」を一つだけ固定配置する（!importantでテーマのCSSをねじ伏せます） */
.soudan-accordion summary::after {
    content: "＋" !important; 
    position: absolute !important;
    right: 20px !important; /* 右端に固定 */
    top: 50% !important;
    transform: translateY(-50%) !important; /* 上下のど真ん中に配置 */
    font-size: 26px !important;
    font-weight: bold !important;
    color: #fff !important;
    display: block !important;
}

/* ④ 開いている時は「－」に切り替える */
.soudan-accordion[open] summary::after {
    content: "－" !important;
}

.content-list {
    margin-top: 10px;
    display: block;
    list-style: none;
    padding-left: 0;
    counter-reset: number-counter;
}

.content-list li {
    position: relative;
    padding-left: 2em;
    margin-bottom: 10px;
}

.content-list li::before {
    counter-increment: number-counter;
    content: counter(number-counter) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: #0088cc;
    font-weight: bold;
}

.content-list img {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 10px auto;
}

.soudan-content {
    padding: 20px 40px;
    border-top: 2px solid #00a4e4;
    line-height: 1.8em;
}



.soudan-content h3 {
    margin: 0 0 25px 0;
    text-align: center;
}

.soudan-content p {
    margin-bottom: 35px;
}


/* =========================================
   削除のお願いを送るボタン
========================================= */
.btn-container {
    text-align: center;
    margin-bottom: 50px;
    /* 下部との余白 */
}

.btn-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #00a4e4;
    color: #fff;
    padding: 15px 40px;
    border-radius: 40px;
    font-weight: bold;
    font-size: 18px;
    text-decoration: none;
    gap: 15px;
}

/* マウスが乗った時のアクション */
.btn-delete:hover {
    background-color: #0088cc;
    transform: translateY(-2px);
}

/* アイコン（白い丸） */
.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
}

/* 疑似要素で三角（▶︎）を作る */
.btn-icon::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 12px;
    border-color: transparent transparent transparent #00a4e4;
    position: absolute;
    left: calc(50% + -4px);
    /* 丸の中央から少し右にずらす調整 */
    top: 50%;
    transform: translateY(-50%);
}


/* =========================================
   Guidelines Box (warning)
========================================= */
.guidelines-box {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 35px;
}


.title_warning {
    margin: 0px auto 39px;
}

.title_warning img {
    width: 32%;
    margin: 0 auto;
    display: block;
}

.box-title.bg-orange {
    background-color: #ff9800;
    color: #fff;
    padding: 15px;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.box-content {
    padding: 20px 40px 50px;
    line-height: 1.8em;
}

.box-content h3 {
    color: #ff9800;
    margin-top: 15px;
    margin-bottom: 5px;
    font-size: 16px;
}

.box-content .sub {
    padding: 7px;
    border-radius: 10px;
    color: #fff;
    background-color: #ff9800;
    max-width: 150px;
    width: 100%;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    display: block;
    margin: 0 auto 25px;
}


.box-list {
    margin: 10px 10px 40px;
    display: block;
    list-style: none;
    padding-left: 0;
}

.box-list li {
    padding-left: 0.3em;
    margin-bottom: 15px;
    list-style: circle;
}


/* =========================================
   Buttons
========================================= */
.btn {
    display: inline-block;
    padding: 10px 30px;
    border-radius: 30px;
    text-align: center;
    font-weight: bold;
    margin-top: 15px;
}

.btn-blue {
    background-color: #00a4e4;
    color: #fff;
    border: 2px solid #00a4e4;
}

.btn-yellow-icon,
.btn-orange-icon,
.btn-blue-icon {
    flex-shrink: 0;
}

/* =========================================
   Media Queries (PC用スタイル)
========================================= */
@media (min-width: 768px) {
    .icon-item {
        width: 170px;
        height: 151px;
        font-size: 22px;
        line-height: 28px;
        padding: 0px 5px;
    }

    .section-title {
        font-size: 28px;
    }
}

/* ...（前略：既存のスタイル）... */

/* =========================================
   よくある質問（FAQ）セクション
========================================= */
.faq-section {
    position: relative;
    /* 背景装飾用 */
    overflow: hidden;
}

.faq-section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.faq-title-icon {
    margin: 0px auto 39px;
    display: block;
    width: 32%;
}

.deco-question-faq {
    position: absolute;
    width: 200px;
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}

.deco-question-faq.faq-q1 {
    top: 21%;
    right: 11%;
    transform: rotate(29deg);
}

/* 2つ目：中央の左側 */
.deco-question-faq.faq-q2 {
    top: 60%;
    left: 12%;
    transform: translateY(-50%) rotate(-15deg);
    /* 縦の中央に配置して左に傾ける */
}

/* 3つ目：下部の右側 */
.deco-question-faq.faq-q3 {
    bottom: 7%;
    right: 11%;
    transform: rotate(28deg);
}


/* FAQカード */
.faq-card {
    background-color: #fff;
    border-radius: 20px;
    margin-bottom: 30px;
    overflow: hidden;
}

.faq-card-header {
    background-color: #0b73c1;
    color: #fff;
    padding: 15px 25px;
    font-weight: bold;
    font-size: 22px;
    text-align: center;
    display: flex;
    align-items: center;
}


.faq-header-icon {
    width: 28px;
    height: auto;
}

.faq-card-content {
    padding: 35px 40px 50px;
    line-height: 1.8;
}

.faq-card-content p {
    margin-bottom: 20px;
}

.faq-card-content p:last-child {
    margin-bottom: 0;
}

.faq-img {
    max-width: 300px;
    width: 100%;
    display: block;
}



/* 黄色いボタン（FAQカード内） */
.btn-yellow-container {
    text-align: center;
    margin: 30px 0 35px;
}

.btn-yellow-rounded {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffff88;
    /* 薄い黄色 */
    color: #17aeef;
    /* 青文字 */
    padding: 15px 40px;
    border-radius: 40px;
    border: 3px solid #17aeef;
    /* 青い枠線 */
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
    gap: 15px;
    transition: all 0.2s ease;
}

.btn-yellow-rounded:hover {
    background-color: #ffffaa;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.btn-yellow-icon {
    /* 以前の削除ボタンと同様のCSS三角テクニック */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: #17aeef;
    /* 青い丸 */
    border-radius: 50%;
    position: relative;
}

.btn-yellow-icon::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    /* 三角のサイズ */
    border-color: transparent transparent transparent #fff;
    /* 白い三角 */
    position: absolute;
    left: calc(50% + -3px);
    /* 位置調整 */
    top: 50%;
    transform: translateY(-50%);
}


/* =========================================
   Yahoo!きっず検索セクション
========================================= */
.yahoo-section {
    padding-top: 80px;
    padding-bottom: 60px;
}

/* 吹き出しタイトル */
.yahoo-title-wrap {
    text-align: center;
    /* ★マイナスのマージンを使って、タイトルを上に引っ張り上げる！ */
    /*  margin-top: -55px;  */
    margin-bottom: -63px;
    position: relative;
    z-index: 2;
    /* 枠線よりも手前に表示させる */
}

.yahoo-title {
    display: inline-block;
    background-color: #17aeef;
    color: #fff;
    padding: 22px 50px;
    border-radius: 100px;
    font-weight: bold;
    position: relative;
    text-align: center;
    max-width: 650px;
    width: 100%;

}

.yahoo-title p {
    margin: 0;
    font-size: 28px;
    line-height: 1.6;
}




/* オレンジボタン */
.btn-orange-container-top {
    text-align: center;
    margin-bottom: 10px;
    margin-top: 110px;

}

.btn-orange-container {
    text-align: center;
    margin-top: 50px;
}

.btn-orange-rounded {
    display: flex;
    align-items: center;
    background-color: #ff9800;
    color: #fff;
    padding: 15px 60px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
    gap: 15px;
    flex-direction: row;
    max-width: 500px;
    width: 100%;
    justify-content: center;
    margin: 105px auto 0;
}

.btn-orange-rounded:hover {
    background-color: #f57c00;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.btn-orange-rounded02 {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff9800;
    color: #fff;
    padding: 25px 60px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
    gap: 15px;
    letter-spacing: 2px;
    margin: 0 auto 70px;
    flex-direction: row;
    max-width: 500px;
    width: 100%;
}

.btn-orange-rounded02:hover {
    background-color: #f57c00;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.btn-orange-icon {
    /* 白い丸にオレンジ三角 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
}

.btn-orange-icon::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #ff9800;
    /* オレンジ三角 */
    position: absolute;
    left: calc(50% - 3px);
    top: 50%;
    transform: translateY(-50%);
}

/* ステップテキストと画像 */
.yahoo-step {
    margin-bottom: 60px;
    text-align: left;
    background: #fff;
    border: solid 3px #17aeef;
    border-radius: 3vh;
    position: relative;
}

.yahoo-step-text {
    margin-bottom: 15px;
    display: inline-block;
    text-align: left;
}

.yahoo-content {
    padding: 43px 40px 0px;
    line-height: 1.8em;
    text-align: left;
}

.yahoo-step-img-wrap {
    display: block;
    text-align: center;
}

.yahoo-step-img {
    max-width: 500px;
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 65px;
}

/* --- スマホ表示時の調整（既存の @media (max-width: 768px) などがあればその中に入れてください） --- */
@media (max-width: 768px) {
    .yahoo-title p {
        font-size: 16px;
    }

    .yahoo-title {
        padding: 20px 30px;
    }

    .yahoo-chara {
        width: 70px;
        top: -35px;
        right: -15px;
    }

    .yahoo-step-text {
        font-size: 13px;
    }
}

/* =========================================
   ご要望、ご意見セクション
========================================= */
.feedback-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* 吹き出しタイトル */
.feedback-title-wrap {
    text-align: center;
    margin-bottom: -63px;
    position: relative;
    z-index: 2;
}

.feedback-title {
    display: inline-block;
    background-color: #0b73c1;
    color: #fff;
    padding: 22px 50px;
    border-radius: 90px;
    font-weight: bold;
    position: relative;
    text-align: center;
    max-width: 650px;
    width: 100%;
    font-size: 28px;
}



/* 白いカード */
.feedback-card {
    background-color: #fff;
    border-radius: 15px;
    border: 3px solid #0b73c1;
    padding: 40px;
    margin-bottom: 40px;
}

/* 中央 thanksテキスト・キャラ */
.feedback-thanks {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 35px;
    text-align: center;
    line-height: 1.4em;
    font-weight: bold;
    color: #333;
}

.feedback-chara {
    width: 98%;
    height: auto;
    margin-top: 55px;
}

.feedback-heart {
    position: absolute;
    width: 25px;
    height: auto;
    top: 0;
    right: calc(50% + -90px);
}

/* カード内テキスト */
.feedback-text p {
    margin-bottom: 20px;
}

.feedback-text a {
    text-decoration: underline;
    color: #17aeef;
}

.feedback-notion {
    font-size: 14px;
    color: #666;
}

/* 青いボタン (アイコン付き) */
.btn-blue-container {
    text-align: center;
}

.btn-blue-rounded {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #17aeef;
    color: #fff;
    padding: 25px 60px;
    border-radius: 60px;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
    gap: 15px;
    max-width: 500px;
    width: 100%;
}

.btn-blue-rounded:hover {
    background-color: #0088cc;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.btn-blue-icon {
    /* 白い丸に青三角 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.btn-blue-icon::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #00a4e4;
    /* 青三角 */
    position: absolute;
    left: calc(50% + -3px);
    top: 50%;
    transform: translateY(-50%);
}

/* =========================================
   Media Queries (スマホ表示の調整)
========================================= */
@media (max-width: 768px) {

    /* 1. 全体・レイアウトの基本調整 */
    .container02 {
        padding: 0 12px;
        /* 左右の余白を狭くする */
    }

    .section {
        padding: 40px 0 55px;
    }

    .section-title {
        font-size: 20px;
        /* 見出しを小さく */
        margin-bottom: 15px;
    }

    .notion-section h2 {
        font-size: 18px;
    }

    .notion-section ul {
        padding: 0 15px;
    }

    .notion-section li {
        font-size: 14px;
        /* お知らせテキストなどを小さく */
    }


    /* 基本の行間は1.5のままでもOKですが、長文になる箇所だけ広げます */
    
    .soudan-content p,
    .soudan-content li,
    .box-content p,
    .box-content li,
    .faq-card-content p,
    .feedback-text p {
        line-height: 2; 
        margin-bottom: 20px; 
    }

    /* 2. イントロ（パワーアップ）セクション */
    .intro-section {
        padding: 20px 10px;
        width: auto;
        border-radius: 5px;
        margin: 0px 15px 45px;
    }

    .intro-section h3 {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .intro-content ul {
        width: 95%;
        /* 横幅を広げて改行を防ぐ */
        font-size: 14px;
    }

    /* 背景の「？」を小さくする */
    .deco-question {
        width: 70px;
    }

    .deco-question.left {
        top: 20px;
        left: 2%;
    }

    .deco-question.right {
        bottom: 20px;
        right: 2%;
    }


    /* 3. 5つのメニューボタン（2列に並べる魔法） */
    .method-icons {
        gap: 10px;
        /* ボタン同士の隙間を狭く */
        justify-content: center;
        /* 中央寄せ */
    }

    .icon-item {
        width: calc((100% - 20px) / 3);
        max-width: 150px;
        height: auto;
        min-height: 90px;
        padding: 2px 7px;
        font-size: 11px;
        line-height: 1.2em;
        border-radius: 5px;
    }


    .icon-img {
        width: 40px;
        /* アイコンを小さく */
        margin-bottom: 3px;
    }


    /* 4. アコーディオン（相談手順） */
    .soudan-header {
        font-size: 16px;
        /* タイトルを小さく */
        padding: 5px 15px;
    }

    .soudan-list {
        align-items: center;
        display: flex;
        font-size: 16px;
    }

    .soudan-icon {
        width: 30px;
        margin-right: 8px;
    }

    .toggle-icon {
        font-size: 24px;
        /* ＋/－アイコンを小さく */
    }

    .soudan-content {
        padding: 8px 15px 15px;
        /* 内側の余白を狭く */
        font-size: 14px;
        line-height: 1.5em;

    }

    .soudan-content h3 {
        font-size: 15px;
        margin: 8px 0 15px 0;
    }

    .content-list li {
        padding-left: 1.5em;
        margin-bottom: 10px;
    }


    /* 5. ご利用にあたって（⚠️注意） */

    .title_warning img {
        width: 45%;
        /* タイトル画像をスマホサイズに */
    }

    .box-title.bg-orange {
        font-size: 16px;
        padding: 12px;
        text-align: left;
        line-height: 1.5em;
    }

    .guidelines-box {
        border-radius: 5px;
    }

    .box-content {
        padding: 20px 15px;
        font-size: 14px;
        line-height: 1.5em;

    }

    .box-content .sub {
        font-size: 16px;
        max-width: 120px;
    }

    .box-list li {
        padding-left: 0.1em;
    }


    /* 6. よくある質問（FAQ） */
    .faq-section-title {
        margin-bottom: 0;
    }


    .faq-title-icon {
        width: 45%;
        /* タイトル画像をスマホサイズに */
    }


    .faq-card {
        border-radius: 5px;
    }

    .faq-card-header {
        font-size: 16px;
        padding: 12px 15px;
        text-align: left;
        line-height: 1.5em;
    }

    .faq-card-content {
        padding: 20px 15px;
        font-size: 14px;
        line-height: 1.5em;

    }

    /* 背景の「？」をスマホ用に調整 */
    .deco-question-faq {
        width: 80px;
    }

    .deco-question-faq.faq-q1 {
        top: 10%;
        right: -5%;
    }

    .deco-question-faq.faq-q2 {
        top: 45%;
        left: -5%;
    }

    .deco-question-faq.faq-q3 {
        bottom: 5%;
        right: -5%;
    }


    /* 7. Yahoo!きっずセクション */
    .yahoo-section {
        padding-top: 60px;
    }

    .yahoo-title-wrap {
        margin-bottom: -40px;
        /* 食い込み具合の調整 */
    }

    .yahoo-title {
        padding: 7px 30px;
    }

    .yahoo-title p {
        font-size: 16px;
        /* タイトルテキストを小さく */
    }

    .yahoo-chara {
        width: 70px;
        top: -35px;
        right: -10px;
    }

    .yahoo-content {
        padding: 30px 20px 0;
        /* 内側の余白を狭く */
    }


    .yahoo-step {
    margin-bottom: 40px;
    border: solid 2px #17aeef;
    border-radius: 3vh;
    position: relative;
}

    .yahoo-step-text {
        font-size: 13px;
    }

    .yahoo-step-img {
        margin-bottom: 15px;
    }


    /* 8. ご要望・ご意見セクション */
    .feedback-title-wrap {
        margin-bottom: -40px;
    }

    .feedback-title {
        font-size: 16px;
        padding: 13px 10px;
    }

    .feedback-card {
        padding: 30px 13px;
        border: 2px solid #0b73c1;
    }

    .feedback-chara {
        margin-top: 30px;
    }

    .feedback-text p {
        font-size: 14px;
    }


    /* 9. 各種ボタンのスマホ調整（横幅いっぱい＆文字サイズダウン） */
    .btn-delete,
    .btn-yellow-rounded,
    .btn-orange-rounded,
    .btn-orange-rounded02,
    .btn-blue-rounded {
        font-size: 15px;
        /* 文字を小さく */
        padding: 15px 8px;
        width: 90%;
        /* スマホでは横幅いっぱいに広げる */
        box-sizing: border-box;
    }

    .btn-orange-container-top {
        margin-top: 70px;
        padding: 10px;
        letter-spacing: normal;
    }

    .btn-orange-rounded02 {
        margin: 0 auto 40px;
        letter-spacing: normal;
        padding: 10px 15px;
    }


    /* 10. ページトップ（一番上へ）ボタンのスマホ調整 */
    .page-top,
    .back-to-top,
    #page-top {
        width: 55px !important;
        height: 55px !important;
        font-size: 11px !important;
        bottom: 15px !important;
        right: 15px !important;
    }
}