@charset "utf-8";


/* ============================
デフォルト設定
============================ */


html {
    max-width: 100%;
    /* nav要素が右スクロールで見えてしまう現象を解決 */
    overflow-x: hidden;
}

body {
    font-family: 'Noto Sans JP', "Helvetica Neue",
        "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
        "Arial", "Yu Gothic", "Meiryo", sans-serif;
    /* font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif; */
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

a:hover {
    transition: 0.5s;
}

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

dl,
dt,
dd,
ol,
ul,
li {
    list-style: none;
    padding: 0px;
    margin: 0;
}

figure,
figcaption {
    margin: 0;
}

/* h2,
h3,
h4,
img,
a,
dt,
dd,
p {
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    transform: translateX(-50px);
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
transition: left 0.5s ease;
}

dt,
dd {
    opacity: 0;
    visibility: hidden;
    transition: all 1s;
    transform: translateX(100px);
}

.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
} */

/* ============================
フォントサイズ設定
============================ */

h1 {
    font-size: clamp(24px, 5vw, 36px);
}

h2 {
    font-size: clamp(22px, 3vw, 28px);
    margin: 0;
}

h3 {
    font-size: clamp(18px, 2.2vw, 20px);
}

h4 {
    font-size: clamp(16px, 1.8vw, 18px);
}

p {
    font-size: clamp(14px, 1.5vw, 16px);
    /* font-weight: bold; */
}



/* ============================
ヘッダー
============================ */

.header {
    margin: 0px;
    padding: 1% 2%;
    background-color: #004098;
    /* position: fixed; */
    border-top: 1px solid #004098;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    height: 75px;
}

.header-wrapper {
    max-width: 1500px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: inherit;
    margin-right: auto;
    margin-left: auto;
    padding: 0 20px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}

.header-div {
    margin: 0px;
    align-items: center;
    width: 18%;
}

.header-image {
    width: 100%;
}

@media screen and (max-width: 700px) {
    .header-div {
        width: 35%;
    }
}

/* ============================
ヒーロー
============================ */

.hero {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 2rem;
/*    background-image:
        linear-gradient(90deg, #000000 25%, #333333 50%, #000000 75%);*/
  background: #000;
}

.hero-image {
    width: 100%;
    max-width: 1500px;
    /* box-shadow: #fff 0px 0px 10px; */
}

.h1{
    margin-top: 0;
    padding-top: 1rem;
}

.release {
    display: block;
    margin: 0 0 2rem;
}

.campaign-link {
    display: block;
    max-width: 700px;
    margin: 2rem auto 0;
}

.campaign-link:hover {
    opacity: 0.7;
}

.shine {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.shine::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 90%;
    height: 100%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(240, 246, 255, 0.371) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    animation: shine 1.5s infinite;
    pointer-events: none;
    /* 画像のクリックを邪魔しない */
}

@keyframes shine {
    0% {
        left: -100%;
    }

    100% {
        left: 150%;
    }
}

.hero-second {
    background-image:
        linear-gradient(90deg, #000000 25%, #333333 50%, #000000 75%);
}

@media screen and (max-width: 550px) {
    .hero {
        padding-bottom: 1.5rem;
    }

    .release {
        margin: 0 0 1.5rem;
    }

    .campaign-link {
        width: 90%;
        margin: 1.5rem auto 0;
    }
}


/* ============================
フローティングバナー
============================ */


.floating-banner {
    position: fixed;
    bottom: 0;
    /* left: 0; */
    right: 0;
    max-width: 500px;
    padding: 0.5rem;
    margin: 0 auto;
    z-index: 9999;
    /* display: none; */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.floating-banner.visible {
    opacity: 1;
    visibility: visible;
}

.floating-link {
    display: block;
}

.floating-image {
    width: 100%;
    z-index: 9999;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border: #7c7c7c #200056 2px;
}


/* ============================
main-ベース
============================ */

.main {
    margin: 0 auto;
    background-color: #fff;
}

.section {
    margin: 0 auto;
    /* max-width: 1100px; */
    padding: 2rem 0;
}

.section.white {
    background-image:
        linear-gradient(90deg, #dfe3e6 25%, #ffffff 50%, #dfe3e6 75%);
}

.section.purple {
    background-image:
        linear-gradient(-145deg, #161c62, #611e85);
}

.section-headline {
    margin: 2rem 0 2rem;
    padding: 1rem 0;
    background-image: linear-gradient(-135deg, #161c62, #611e85);
}

.section-headline.black {
    color: #333;
    background-image: none;

    >span {
        border-bottom: red 2.5px solid;
        /* padding-bottom: 0.5rem; */
    }
}

.paragraph-left {
    text-align: left;
    margin: 1rem 0;
}

.paragraph-center {
    text-align: center;
    margin: 1rem 0;
}

.paragraph-center.black {
    color: #333;
}

.paragraph.section-paragraph {
    text-align: center;
    margin: 0rem 0 3rem;
}

.wrapper {
    max-width: 1100px;
    padding: 2rem;
    margin: 0 auto;
}

@media screen and (max-width: 600px) {
    .section {
        padding: 1rem 0;
    }

    .section-headline {
        margin: 1rem 0 1rem;
        padding: 1rem 0;
    }

    .wrapper {
        padding: 1rem;
    }

    .paragraph {
        margin: 0.5rem 0;
    }

    .paragraph-center {
        text-align: left;
    }
}

/* ============================
試打レビュー
============================ */


.movie {
    width: 100%;
    /* padding-bottom: 2rem; */
    margin-bottom: 1rem;
}

.movie {
    >h2 {
        display: inline-block;
        margin: 4.5rem 0;
        padding: 1rem;
        color: rgb(255, 255, 255);
        border: #fff solid 1.5px;
        background-color: #ffffff17;
    }
}

.movie-wrap {
    width: 100%;
    max-width: calc(810px + 8rem);
    /* padding: 0 2rem; */
    margin: 0 auto;
    border-radius: 10px;
}

.movie-iframeWrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.35%;
}

.movie-iframeWrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 767px) {
    .movie {
        padding-bottom: 0.5rem;

        >h2 {
            margin: 2.5rem 0;
        }
    }

    .movie-wrap {
        max-width: 100%;
    }
}

/* ============================
悩みセクション
============================ */

.nayami {
    background-color: #2c264a;
    padding: 2rem;
}

.nayami-headline {
    margin: 2rem auto;
    font-weight: normal;
}

.nayami-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-left: 4rem;
}

.nayami-item {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 1rem;

    >span {
        display: block;
        padding: 0.5rem 1rem;
        background-color: #fff;
        color: #2c264a;
    }
}

.arrow-imgage {
    width: 15%;
    margin-top: 3rem;

}

@media screen and (max-width: 600px) {
    /* .nayami {
        background-color: #2c264a;
        padding: 2rem;
    } */

    .nayami-headline {
        margin: 2rem auto;
        font-weight: normal;
    }

    .nayami-list {
        gap: 0.5rem;
        padding-left: 0rem;
    }

    .nayami-item {
        gap: 1rem;

        >span {
            padding: 0.5rem 1rem;
        }
    }
}

/* ============================
商品の提示セクション
============================ */

.anshin-wrapper {
    background-color: #fff;
    padding: 2rem;

    >h2 {
        /* margin-bottom: ; */
    }
}

.mijikakutehiroi {
    width: 80%;
    margin: 1rem auto;
}

.anshin-headline {
    font-size: clamp(20px, 3vw, 26px);
    color: #333;

    >span {
        color: red;
    }
}

/* .anshin-club {} */

.anshin-club-image {
    margin: 2rem auto;
    width: 60%;
}

.anshin-club-caption {
    background-color: #fff;
    padding: 2rem;
}

.anshin-club-description {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: bold;
    color: #2c264a;
}

@media screen and (max-width: 600px) {
    .anshin-wrapper {
        padding: 1.5rem;
    }

    .mijikakutehiroi {
        width: 95%;
    }

    .anshin-headline {
        font-size: clamp(20px, 3vw, 26px);
    }

    /* .anshin-club {} */

    .anshin-club-image {
        margin: 1rem auto;
        width: 90%;
    }

    .anshin-club-caption {
        padding: 1rem;
    }

    .anshin-club-description {
        font-size: clamp(20px, 3vw, 26px);
    }
}



/* ============================
実績紹介セクション
============================ */

.survey {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.survey-list {
    width: 32%;
    border: #611e85 3px solid;
}

.data-title {
    background-image: linear-gradient(-135deg, #161c62, #611e85);
    font-size: clamp(16px, 1.8vw, 18px);
    padding: 1rem 0;
}

.data-description {
    padding: 1rem;
}

.survey-image {
    width: 100%;
}

.comment {
    margin: 2rem auto;
    padding: 1.5rem;
    background-image: linear-gradient(-135deg, #161c62, #611e85);
}

.comment-headline {
    display: inline-block;
    font-style: italic;
    border-bottom: #fff 1.5px solid;
    padding-bottom: 0.4rem;
}

/* .comment-list {} */

/* .comment-item {} */



.monitor-list {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 4rem;
}

.monitor-item {
    width: 47%;
    padding: 1.5rem;
    background-image:
        linear-gradient(-145deg, #161c62, #611e85);
    box-shadow: #fff 0px 0px 10px;
}

/* .monitor {} */

.monitor-image {
    width: 40%;
}

/* .monitor-caption {} */

.monitor-headline {
    border-bottom: #fff solid 1.5px;
    padding-bottom: 0.5rem;
}

.monitor-description {
    font-weight: normal;
    text-align: left;
}

.complement {
    font-size: 0.9rem;
    text-align: right;
    font-weight: normal;
}

.section-headline.test {
    font-weight: normal;
}

.test-wrapper {
    background-color: #d7d1dc;
    padding: 1rem 1rem 2rem;
}

.test-headline {
    color: #333;
}

.test-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

.test-item {
    width: 49%;
}

/* .test-image {} */

@media screen and (max-width: 600px) {

    .survey {
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .survey-list {
        width: 48.5%;
    }

    .data-title {
        font-size: clamp(14px, 1.8vw, 18px);
        padding: 0.7rem 0;
    }

    .data-description {
        padding: 0.2rem;
    }

    .survey-image {
        width: 100%;
    }

    .monitor-list {
        margin-top: 1rem;
        flex-direction: column;
        gap: 1rem;
    }

    .monitor-item {
        width: 100%;
        padding: 1rem;
        margin-top: 1rem;
    }

    .monitor-item:nth-child(2) {
        margin-top: 1rem;
    }

    .monitor-item:nth-child(4) {
        margin-top: 1rem;
    }

    /* .monitor {} */

    .monitor-image {
        width: 50%;
    }

    /* .monitor-caption {} */

    .monitor-headline {
        border-bottom: #fff solid 1.5px;
        padding-bottom: 0.5rem;
    }

    .monitor-description {
        font-weight: normal;
        text-align: left;
    }

    .complement {
        font-size: 0.9rem;
        text-align: right;
        margin-bottom: 0;
    }

    .section-headline.test {
        font-weight: normal;
    }

    .test-wrapper {
        padding-bottom: 1rem;
    }

    .test-list {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
        padding: 0;
    }

    .test-item {
        width: 95%;
    }

    /* .test-image {} */
}

/* ============================
ドライバー
============================ */

.two-column {
    display: flex;
    justify-content: center;
    align-items: start;
    margin-bottom: 2rem;
}

.left-side {
    width: 30%;
    padding: 1rem;
    position: sticky;
    top: 0;
    left: 0;
    /* display: flex;
    flex-direction: column;
    justify-content: center; */
    background-image:
        linear-gradient(135deg, #161c62, #611e85);
}

.left-side.face {
    background-image:
        linear-gradient(135deg, #350e14, #b94e1b);
}

.side {
    height: 100vh;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    gap: 1rem;
}

/* .side-image {} */

.side-caption {
    font-weight: bold;

    >P {
        font-size: clamp(18px, 2.2vw, 20px);
    }
}

/* .side-description-image {} */

.right-side {
    width: 70%;
    background-color: #d7d1dc;
}

.right-side.face {
    background-color: #fee8d2;
}

.side-headline {
    padding: 1.5rem 0 1.5rem 1rem;
    font-style: italic;
    font-weight: normal;
    text-align: left;
    background-image:
        linear-gradient(135deg, #161c62, #611e85);
}

.side-headline.face {
    background-image:
        linear-gradient(135deg, #350e14, #b94e1b);
}

.side-function {
    padding: 1rem;
}

.side-function-image {
    width: 70%;
}

.side-function-image.face {
    width: 90%;
}

.side-function-description {
    color: #333;
}

.paragraph-center {
    >span {
        color: #611e85;
    }
}

.side-function-list {
    padding: 0 1rem 1rem 1rem;
}

.side-function-item {
    >p {
        color: #333;
    }
}

.side-function-headline {
    padding: 1rem;
    font-weight: normal;
    background-image:
        linear-gradient(135deg, #591380, #9c0c86);
}

.side-function-headline.face {
    background-image:
        linear-gradient(135deg, #c8391b, #ea682a);
}


@media screen and (max-width: 600px) {

    .two-column {
        display: flex;
        justify-content: center;
        align-items: start;
        flex-direction: column;
        margin-bottom: 2rem;
    }

    .left-side {
        width: 100%;
        padding: 0.7rem;
        position: sticky;
        top: 0;
        left: 0;
    }

    .left-side.face {
        background-image:
            linear-gradient(135deg, #350e14, #b94e1b);
    }

    .side {
        height: 20vh;
        flex-direction: row-reverse;
        align-items: center;
        gap: 1rem;
    }

    .side.face {
        gap: 0;
    }

    .side-image {
        width: 30%;
    }

    .side-image.face {
        width: 40%;
    }

    .side-caption {
        width: 70%;

        >P {
            font-size: clamp(15px, 2.2vw, 20px);
        }
    }

    .side-caption.face {
        width: 60%;

        >P {
            font-size: clamp(15px, 2.2vw, 20px);
        }
    }

    .side-description-image {
        width: 100%;
    }

    .right-side {
        width: 100%;
    }

    .right-side.face {
        background-color: #fee8d2;
    }

    .side-headline {
        padding: 1rem;
    }

    .side-headline.face {
        background-image:
            linear-gradient(135deg, #350e14, #b94e1b);
    }

    .side-function {
        padding: 0.5rem;
    }

    .side-function-image {
        width: 100%;
    }

    .side-function-image.face {
        width: 100%;
    }

    .side-function-description {
        color: #333;
    }

    .paragraph-center {
        >span {
            color: #611e85;
        }
    }

    .side-function-list {
        padding: 0 1rem 0rem 1rem;
    }

    .side-function-item {
        >p {
            color: #333;
        }
    }

    .side-function-headline {
        padding: 0.7rem;
        font-weight: normal;
        background-image:
            linear-gradient(135deg, #591380, #9c0c86);
    }

    .side-function-headline.face {
        background-image:
            linear-gradient(135deg, #c8391b, #ea682a);
    }
}


/* ============================
ウッド・アイアン
============================ */

.tab-list {
    display: flex;
    justify-content: space-between;
}

.tab-item {
    width: 49%;
    background-color: #fff;
    color: #2c264a;
    font-weight: bold;
    padding: 1rem 0;
}

.tab-item.active {
    color: #fff;
    background-color: #2c264a;
}

.tab-item:hover {
    cursor: pointer;
}

.panel-list {
    /* padding: 1rem; */
}

.panel-item {
    display: none;
}

.panel-item.active {
    display: block;
    background-color: #2c264a;
    padding: 1rem;
}

.panel-headline {
    margin-top: 1rem;
    padding: 1rem 0;
    font-style: italic;
    font-weight: normal;
    background-image:
        linear-gradient(-45deg, #2c264a, #611e85);

    >br {
        display: none;
    }
}

.panel-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex-direction: row-reverse; */
    gap: 1rem;
}

.panel-visual-image {
    width: 30%;
}

.panel-visual-caption {
    width: 50%;
    /* text-align: right; */
}

.panel-visual-description {
    font-size: clamp(16px, 1.8vw, 18px);
    font-style: italic;
    font-weight: bold;
}

.panel-chart {
    margin: 2rem auto;
}

.panel-chart-image {
    width: 95%;
}

/* .panel-chart-caption {} */

.panel-function {
    margin: 1.5rem auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.panel-function-image {
    width: 45%;
}

.panel-function-caption {
    width: 55%;
}

@media screen and (max-width: 600px) {

    /* .panel-list {
        padding: 1rem;
    } */

    .panel-item {
        display: none;
    }

    .panel-item.active {
        display: block;
        background-color: #2c264a;
        padding: 1rem;
    }

    .panel-headline {
        margin-top: 1rem;
        padding: 1rem 0;

        >br {
            display: block;
        }
    }

    .panel-visual {
        flex-direction: column;
        gap: 0.5rem;
    }

    .panel-visual-image {
        width: 80%;
    }

    .panel-visual-caption {
        width: 100%;
        /* text-align: right; */
    }

    .panel-visual-description {
        font-size: clamp(16px, 1.8vw, 18px);
    }

    .panel-chart {
        margin: 2rem auto;
    }

    .panel-chart-image {
        width: 95%;
    }

    /* .panel-chart-caption {} */

    .panel-function {
        margin: 1rem auto;
        flex-direction: column;
        gap: 0;
    }

    .panel-function-image {
        width: 100%;
    }

    .panel-function-caption {
        width: 100%;
    }
}


/* ============================
FAQ
============================ */

.details {
    background-color: #d7d1dc;
    margin-bottom: 1rem;
}

.faq-title {
    font-size: clamp(16px, 1.8vw, 18px);
    text-align: left;
    background-image:
        linear-gradient(135deg, #591380, #9c0c86);
    padding: 1rem;
    cursor: pointer;
}

.details-wrapper {
    padding: 1rem;
}

.faq-headline {
    font-size: clamp(16px, 1.8vw, 18px);
    margin-top: 0;
    color: #333;
    font-weight: bold;
}

/* .answer-list {} */

.answer-item {
    margin-bottom: 3rem;
}

.answer-headline {
    font-size: clamp(16px, 1.8vw, 18px);
    padding: 1rem 0;
    background-image:
        linear-gradient(135deg, #c8391b, #ea682a);
}

.answer-demerit {
    width: 95%;
}

.shaft {
    padding: 1rem;
}

.shaft-image {
    width: 100%;
}

.shaft-caption {
    color: #333;
}

.shaft-graph {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

.shaft-graph-image {
    width: 40%;
}

.graph-image-caption {
    width: 60%;
}

.shaft-data-list {
    color: #333;
    background-color: #b39ac2;
    font-weight: bold;
    padding: 0.5rem;
}

.shaft-data-item {
    display: flex;
    align-items: center;
    border-bottom: #fff solid 1.5px;
}

.shaft-data-item:last-child {
    border-bottom: none;
}

.shaft-data-title {
    display: block;
    width: 25%;
    border-right: #fff dashed 1.5px;
    padding: 0.5rem;

    >span {
        color: #ea682a;
    }
}

.shaft-data-description {
    display: block;
    width: 75%;
    text-align: left;
    padding: 0.5rem;

    >span {
        color: #591380;
    }
}

.faq-compare {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.faq-compare-image {
    width: 48%;
}

.faq-compare-caption {
    width: 100%;
    color: #333;
}

.shaft-meyasu {
    width: 60%;
}

@media screen and (max-width: 600px) {

    .details-wrapper {
        padding: 1rem;
    }

    .faq-headline {
        font-size: clamp(16px, 1.8vw, 18px);
        margin-top: 0;
    }

    /* .answer-list {} */

    .answer-item {
        margin-bottom: 2rem;
    }

    .answer-headline {
        font-size: clamp(16px, 1.8vw, 18px);
        padding: 1rem 0.5rem;
        text-align: left;
    }

    .answer-demerit {
        width: 100%;
    }

    .shaft {
        padding: 0;
    }

    .shaft-image {
        width: 100%;
    }

    .shaft-caption {
        color: #333;
    }

    .shaft-graph {
        flex-direction: column;
        gap: 1rem;
        padding: 0;
    }

    .shaft-graph-image {
        width: 100%;
    }

    .graph-image-caption {
        width: 100%;
    }

    .shaft-data-list {
        padding: 0.5rem;
    }

    .shaft-data-title {
        width: 30%;
        border-right: #fff dashed 2px;
        padding: 0.5rem;
    }

    .shaft-data-description {
        width: 75%;
        text-align: left;
        padding: 0.5rem;
        padding-right: 0;
    }

    .faq-compare-image {
        width: 100%;
    }

    .shaft-meyasu {
        width: 100%;
    }
}


/* ============================
お求めやすい価格で提供
============================ */

.product-list {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-wrap: wrap;
    /* gap: 1rem; */
}

.product-item {
    width: 48.5%;
    margin-bottom: 1rem;
}

.product-headline {
    font-weight: bold;
    font-style: italic;
    padding: 1rem 0;
    background-image:
        linear-gradient(-135deg, #161c62, #611e85);

    >br {
        display: none;
    }
}

.product-wrapper {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

.price-figure {
    width: 45%;
}

.price-figure.full {
    width: 85%;
}

/* .price-image.full{
    width: 100%;
}  */

.price-list {
    width: 100%;
    text-align: left;
}

.price-title {
    color: #333;
    font-weight: bold;
}

.price-description {
    font-size: 1.5em;
    font-weight: bold;
    font-style: italic;
    color: #611e85;
    border-bottom: #611e85 1.5px solid;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    text-align: right;

    >span {
        font-size: 0.7em;
    }

    >br {
        display: none;
    }
}

.price-description:last-child {
    margin-bottom: 0;
}

.paragraph-center.mukinri {
    width: 100%;
    padding: 1rem;
    font-weight: bold;
    font-style: italic;
    background-image:
        linear-gradient(135deg, #591380, #9c0c86);
}

.paragraph-center.bottom-shida {
    font-weight: bold;
    font-size: clamp(26px, 5vw, 28px);
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
    width: 100%;
    padding: 1rem;
    background-image:
        linear-gradient(135deg, #c7351d, #ec6a2c);

    >span {
        color: #fff;
        font-size: 1.5em;
    }
}

@media screen and (max-width: 600px) {

    .product-list {
        display: flex;
        justify-content: space-between;
        align-items: start;
        flex-wrap: wrap;
        /* gap: 1rem; */
    }

    .product-item {
        width: 100%;
        margin-bottom: 1rem;
    }

    .product-wrapper {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 0;
    }

    .price-figure {
        width: 50%;
    }

    /* .price-image {} */

    .price-list {
        width: 100%;
        /* padding-left: 1rem; */
    }

    .price-description {
        >span {
            font-size: 0.7em;
        }

        >br {
            display: none;
        }
    }

    .paragraph-center.mukinri {
        font-size: 1.1em;
        text-align: center;
        background-image:
            linear-gradient(135deg, #591380, #9c0c86);
    }

    .paragraph-center.bottom-shida {
        font-size: clamp(25px, 5vw, 28px);
        background-image:
            linear-gradient(135deg, #c7351d, #ec6a2c);
    }
}

/* ============================
フッター
============================ */

.footer {
    padding: 4rem 1rem;
    color: #fff;
    background-color: #00204f;
}

.footer-wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

.footer-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.footer-list.sp {
    display: none;
}

.footer-item {
    width: 20%;
}

.footer-link {
    display: block;
    color: #fff;
    border-bottom: #fff 1px solid;
    padding: 0.5rem 0;
}

.footer-link:hover {
    color: #00204f;
    background-color: #fff;
}

/* .small {} */



@media screen and (max-width: 600px) {
    .footer-list.sp {
        display: block;
    }

    .footer-list {
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 3rem;
    }

    .footer-item {
        width: 48%;
    }
}