/* セクション */
section {
    margin: 40px auto 70px;
    max-width: 1200px; /* PCの横幅 */
    width: 100%;
}

/* メインビジュアルのセクション */
.mv {
    margin-top: 80px; /* PCの余白 */
}

.mv img {
    width: 100%;
    height: auto;
}

/* アンカーリンクのセクション */
.anchor-links {
    display: flex;
    justify-content: center;
    gap: 20px; /* 各アンカーリンクの間隔を設定 */
}

.anchor-links a {
    color: white;
    text-decoration: none;
    height: 70px;
    width: 290px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #2D4857; /* 背景色を指定 */
    font-size: 26px; /* フォントサイズを28pxに設定 */
}

.anchor-links a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px; /* 文字の後ろ20pxにシェブロンを配置 */
    width: 9px;
    height: 9px;
    border-top: 3px solid white;
    border-right: 3px solid white;
    transform: translate3d(0, -50%, 0) rotate(135deg);
}

/* メインコンテンツのセクション */
.content {
}

.content-header {
    background-color: #2D4857; /* 背景色を指定 */
    color: white; /* 文字色を白に設定 */
    text-align: center; /* テキストを中央に配置 */
    padding: 20px 0; /* 上下に余白を追加 */
    margin-bottom: 40px; /* セクションの下に余白を追加 */
}

.content-header h2 {
    font-size: 28px; /* フォントサイズを28pxに設定 */
    background-color: #2D4857 !important; /* 背景色を指定 */
    margin-bottom: 0 !important; /* セクションの下に余白を追加 */
}

.content-header .subtitle {
    font-size: 14px; /* PCのフォントサイズを14pxに設定 */
}

.sp-only {
    display: none; /* 初期状態で非表示に設定 */
}

/* ユーザーの声のセクション */
.testimonials {
    text-align: center;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    grid-gap: 20px; /* 各ボックスの間隔を設定 */
    padding: 0 30px;
}

.testimonial {
    background-color: #FFFCC9; /* 背景色を指定 */
    border-radius: 10px; /* 角丸を指定 */
    padding: 20px; /* パディングを指定 */
}

.testimonial .highlight {
    font-size: 18px; /* PCのフォントサイズを18pxに設定 */
    font-weight: bold;
    margin-bottom: 30px; /* 下に30pxの余白を追加 */
}

.stars {
    color: #FE9924; /* ★の色を設定 */
}

/* ポイント・クーポンの使い方のセクション */
.how-to-use {
    text-align: center;
}

.how-to-use .lead {
    font-size: 20px;
    margin-bottom: 20px;
}

.how-to-use .lead .highlight {
    font-size: 24px; /* フォントサイズを24pxに設定 */
    color: #C00; /* 色を#C00に設定 */
    font-weight: bold; /* 太字に設定 */
}

.how-to-use-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    grid-gap: 20px; /* 各ボックスの間隔を設定 */
    padding: 0 30px;
}

.how-to-use-item {
    background-color: #EFF1F2; /* 背景色を指定 */
    border-radius: 10px; /* 角丸を指定 */
    padding: 20px; /* パディングを指定 */
    text-align: center; /* テキストを中央揃えに */
}

.how-to-use-item h3 {
    font-size: 18px; /* PCのフォントサイズを18pxに設定 */
    font-weight: bold;
    margin-bottom: 10px; /* 下に10pxの余白を追加 */
}

.how-to-use-item img {
    width: 400px; /* 幅を400pxに設定 */
    height: 200px; /* 高さを200pxに設定 */
    display: block; /* ブロック要素に設定 */
    margin: 0 auto 10px; /* 上下の余白を調整 */
}

.how-to-use-item p {
    font-size: 16px; /* PCのフォントサイズを16pxに設定 */
}

.step .highlight,.how-to-use-item .highlight {
    color: #C00; /* 赤色に設定 */
    font-weight: bold; /* 太字に設定 */
    font-size: 18px; /* フォントサイズを2px上げて18pxに設定 */
}

/* よくある質問のセクション */
.faq details {
    margin: 0 20px 20px;
    line-height: 2;
}

.faq summary {
    font-size: 20px; /* PCのフォントサイズを20pxに設定 */
    font-weight: bold; /* 質問を太字に設定 */
    cursor: pointer;
    list-style: none; /* デフォルトのリストスタイルを削除 */
    position: relative; /* アイコンの位置を調整するために追加 */
    border-bottom: 1px solid #CCCCCC; /* アンダーラインを追加 */
    padding-bottom: 5px; /* アンダーラインとの間隔を調整 */
}

.faq summary::-webkit-details-marker {
    display: none; /* Chromeのデフォルトの矢印を非表示 */
}

.q-label {
    color: #C00; /* Qの色 */
    font-size: 20px;
}

.a-label {
    color: #034CFB; /* Aの色 */
    font-size: 20px;
}

.faq .answer {
    margin-top: 10px;
    font-size: 16px;
    padding-left: 22px; /* インデントを追加 */
    text-indent: -20px; /* A. の位置を揃える */
}

.toggle-icon::before,
.toggle-icon::after {
    display: block;
    content: '';
    background-color: #000;
    position: absolute;
    width: 18px;
    height: 3px;
    top: 50%;
    right: 20px;
    transform: translate(-50%, -50%);
    border-radius: 50vh;
}

.toggle-icon::before {
    width: 3px;
    height: 18px;
    right: 35px;
}

details[open] .toggle-icon::before {
    display: none;
}

/* ステップのセクション */
.steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    grid-gap: 20px; /* 各ボックスの間隔を設定 */
    padding: 0 30px;
}

.step {
    background-color: #FFFCC9; /* 各ステップの背景色を指定 */
    border-radius: 10px; /* 角丸を指定 */
    padding: 20px; /* パディングを指定 */
    text-align: center; /* テキストを中央揃えに */
    position: relative; /* 相対位置を指定 */
    z-index: 1; /* ステップのz-indexを1に設定 */
}

.step h3 {
    font-size: 22px; /* フォントサイズを22pxに設定 */
    margin-bottom: 10px; /* 下に10pxの余白を追加 */
    position: relative; /* 相対位置を指定 */
    z-index: 2; /* テキストのz-indexを2に設定 */
    font-weight: bold; /* 質問を太字に設定 */
}

.step p {
    font-size: 16px; /* フォントサイズを16pxに設定 */
    position: relative; /* 相対位置を指定 */
    z-index: 2; /* テキストのz-indexを2に設定 */
}

.icon-point {
    position: absolute;
    top: 20px; /* 上からの位置を調整 */
    right: 20px; /* 右から20px */
    height: 90px; /* 高さを90pxに設定 */
    z-index: 0; /* アイコンのz-indexを0に設定 */
}

.icon-coupon {
    position: absolute;
    top: 20px; /* 上からの位置を調整 */
    right: 0; /* 右から0 */
    height: 100px; /* 高さを100pxに設定 */
    z-index: 0; /* アイコンのz-indexを0に設定 */
}

.icons {
    display: flex;
    justify-content: center; /* アイコンを中央揃え */
    gap: 10px; /* アイコン間の間隔を設定 */
}

.icons img {
    height: 38px; /* アイコンの高さ */
}

/* 注釈 */
.annotation {
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
}

/* さらにお得に！ */
.attention {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    position: relative;
}

.triangle-left, .triangle-right {
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
}

.triangle-left {
    border-width: 5px 20px 30px 0; /* 高さ 20px, 底辺 10px */
    border-right-color: #c00; /* 右側の色を赤に */
    margin-right: 20px;
}

.triangle-right {
    border-width: 5px 0 30px 20px; /* 高さ 20px, 底辺 10px */
    border-left-color: #c00; /* 左側の色を赤に */
    margin-left: 10px;
}

.more-benefits {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    color: #000; /* 文字色を黒に */
    margin: 0;
}

/* アプリの特典 */
.app-benefits {
    text-align: center;
    margin-top: 40px;
    font-size: 16px;
}

/* 追加コンテンツ */
.extra-content {
    background-color: #BB5C3E; /* 背景色 */
    border-radius: 10px; /* 角丸 */
    width: 800px; /* 固定幅を指定 */
    padding: 20px; /* パディング */
    margin: 30px auto 0 auto; /* 上に30pxの余白を追加し、中央揃え */
    color: #fff; /* テキストカラー */
    box-sizing: border-box; /* ボックスサイズの計算にパディングとボーダーを含める */
    text-align: center; /* テキストを中央揃えに */
}

.extra-title {
    font-size: 32px; /* フォントサイズを20pxに設定 */
    margin-top: 0; /* 上の余白を削除 */
}

.extra-content .lead {
    margin-top: 10px;
}

.extra-content .highlight-point {
    font-size: 24px; /* フォントサイズを24pxに設定 */
    font-weight: bold; /* 太字に設定 */
}

.extra-content .image-links {
    display: flex; /* フレックスボックスを使用 */
    justify-content: center; /* 画像を中央揃え */
    gap: 50px; /* 画像間の間隔を設定 */
    margin-top: 20px; /* 上に20pxの余白を追加 */
}

.extra-content .image-links a img {
    height: 60px; /* 画像の高さを60pxに設定 */
    border-radius: 5px; /* 画像の角を丸くする */
}

/* コンバージョンリンクセクション */
.conversion-link {
    background-color: #BB5C3E; /* 背景色 */
    border-radius: 10px; /* 角丸 */
    padding: 20px; /* パディング */
    text-align: center; /* テキストを中央揃えに */
    margin: 30px auto 110px auto; /* 上に30pxの余白を追加し、中央揃え */
    width: 800px; /* 固定幅を指定 */
    box-sizing: border-box; /* ボックスサイズの計算にパディングとボーダーを含める */
    color: #fff; /* テキストカラー */
}

.conversion-link h3 {
    font-size: 20px; /* フォントサイズを20pxに設定 */
    margin: 0 0 10px 0; /* 下に10pxの余白を追加 */
}

.conversion-link p {
    font-size: 16px; /* フォントサイズを16pxに設定 */
    margin: 0 0 20px 0; /* 下に20pxの余白を追加 */
}

.register-button {
    display: inline-block; /* インラインブロック要素に設定 */
    background-color: #2D4857; /* 背景色 */
    color: #fff; /* テキストカラー */
    padding: 10px 20px; /* パディング */
    border-radius: 10px; /* 角丸 */
    text-decoration: none; /* テキストの下線を削除 */
    width: 300px; /* 幅を300pxに設定 */
    text-align: center; /* テキストを中央揃えに */
    font-weight: bold; /* 太字に設定 */
    position: relative; /* 相対位置を指定 */
}

.register-button::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px; /* 文字の後ろ20pxにシェブロンを配置 */
    width: 9px;
    height: 9px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    transform: translate3d(0, -50%, 0) rotate(45deg);
}

/* 共通設定 */
.icon-title::before {
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    content: '';
}

/* 各見出しに対応するアイコン */
.icon-point-earn::before {
    background-image: url('../../../../img/usr/freepage/poikatsu/icon_h_point.png'); /* アイコンのURLを指定 */
    width: 45px;
    height: 45px;
}

.icon-point-use::before {
    background-image: url('../../../../img/usr/freepage/poikatsu/icon_h_point.png'); /* アイコンのURLを指定 */
    width: 45px;
    height: 45px;
}

.icon-user-voice::before {
    background-image: url('../../../../img/usr/freepage/poikatsu/icon_h_revico.png'); /* アイコンのURLを指定 */
    width: 45px;
    height: 45px;
}

.icon-faq::before {
    background-image: url('../../../../img/usr/freepage/poikatsu/icon_h_faq.png'); /* アイコンのURLを指定 */
    width: 45px;
    height: 45px;
}

.icon-extra-title::before {
    background-image: url('../../../../img/usr/freepage/poikatsu/icon_point.png'); /* アイコンのURLを指定 */
    width: 45px;
    height: 45px;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    section {
        max-width: 100%; /* SPの横幅を100%に */
    }

    .mv {
        margin: 40px 0; /* SPの余白 */
        padding: 0;
    }

    .anchor-links {
        flex-direction: column;
        align-items: center;
        gap: 30px; /* SP用の間隔を設定 */
        padding: 0; /* SP用の間隔をリセット */
    }

    .anchor-links a {
        width: 80%; /* SPの横幅を80%に設定 */
        justify-content: center;
    }

    .content-header {
        width: 100vw; /* 横幅を画面いっぱいに設定 */
    }

    .content-header h2 {
        font-size: 20px; /* SPのフォントサイズを20pxに設定 */
    }

    .content-header .subtitle {
        font-size: 16px; /* SPのフォントサイズを16pxに設定 */
    }

    .sp-only {
        display: inline; /* SPでのみ表示 */
    }

    .testimonial-grid {
        grid-template-columns: 1fr; /* 1列 */
        padding: 0 20px;
    }

    .testimonial .highlight {
        font-size: 16px; /* SPのフォントサイズを16pxに設定 */
    }

    .how-to-use-grid {
        grid-template-columns: 1fr; /* 1列 */
        padding: 0 20px;
    }

    .how-to-use-item img {
        width: 100%; /* 幅を100%に設定 */
        height: auto; /* 高さを自動調整 */
    }

    .faq summary {
        font-size: 18px; /* SPの質問のフォントサイズを18pxに設定 */
    }

    .faq .answer {
        font-size: 14px; /* SPの回答のフォントサイズ */
        padding-left: 22px; /* インデントを追加 */
        text-indent: -20px; /* A. の位置を揃える */
    }

    .a-label {
        font-size: 18px; /* SPのAのフォントサイズ */
    }

    .toggle-icon::before,
    .toggle-icon::after {
        right: -5px;
    }

    .toggle-icon::before {
        right: 10px; /* アイコンの位置を調整 */
    }

    .steps {
        grid-template-columns: 1fr; /* 1列 */
        padding: 0 20px;
    }

    .step {
        width: 100%; /* SPの横幅を100%に設定 */
        margin-bottom: 20px; /* 下に余白を追加 */
    }

    .icon-point {
        top: 95px; /* 上からの位置を調整 */
        right: 5px; /* 右から5px */
        height: 70px; /* 高さを70pxに設定 */
    }

    .icon-coupon {
        top: 5px; /* 上からの位置を調整 */
        right: 5px; /* 右から5px */
        height: 70px; /* 高さを70pxに設定 */
    }

    .more-benefits {
        font-size: 24px; /* SPのフォントサイズを24pxに設定 */
    }

    .triangle-left, .triangle-right {
        border-width: 3px 10px 20px 0; /* 高さ 10px, 底辺 5px */
    }

    .triangle-right {
        border-width: 3px 0 20px 10px; /* 高さ 10px, 底辺 5px */
    }

    .extra-title {
        font-size: 24px; /* SPのフォントサイズを24pxに設定 */
    }

    .extra-content, .conversion-link {
        width: calc(100% - 22px); /* 幅を100%から左右11pxずつ引いた値に設定 */
        padding: 15px; /* パディング */
    }

    .extra-content .image-links {
        flex-direction: row; /* 画像を横に並べる */
        justify-content: space-around; /* 画像間のスペースを均等に */
        gap: 10px; /* 画像間の間隔を10pxに設定 */
    }

    .extra-content .image-links a img {
        height: 50px; /* 画像の高さを50pxに設定 */
    }

    .annotation {
        margin-top: 0;
        font-size: 11px;
    }
/* SP用のアイコンサイズ */
    .icon-point-earn::before,
    .icon-point-use::before,
    .icon-user-voice::before,
    .icon-faq::before,
    .icon-extra-title::before {
        width: 25px;
        height: 25px;
    }
}