@charset "utf-8";

/* ==========================
comon
=========================== */

:root {
    --primary-red: #C22D3F;
    --primary-lightgreen: #E4F0DB;
    --primary-brown: #7A6853;
    --primary-blak: #66513A;
    --primary-white: #FCFAF5;
    --primary-beige: #FCF5E1;
}

html {
    font-size: 62.5%;
}

body {
    color: var(--primary-blak, #66513A);
    font-family: "Noto Sans JP",
        Arial,
        sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #fff;
    line-height: 1.8;
}

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

.wrap {
    width: 100%;
    max-width: 2800px;
    margin: 0 auto;
    overflow: hidden;
}

.section {
    position: relative;
}

.section_inner {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;

    position: relative;
}

.section_title {
    margin: 0 auto;
    text-align: center;
    font-family: "Zen Kaku Gothic New";
}

.btn {
    position: relative;
    display: block;
    color: #FFF;
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1;

    width: 282px;
    padding: 16px 61px 18px 48px;
    border-radius: 100px;
    background-color: var(--primary-red);
    border: 1px solid var(--primary-brown);
    box-shadow: 2.868px 3.824px 0px 0px #7A6853;
    transition: all 0.2s;
}

.btn:hover {
    opacity: 0.75;
    transform: scale(1.02);
}

.btn::after {
    content: "";
    display: block;
    width: 8.5%;
    height: 44.83%;
    background-image: url(../images/btn_arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}


.txt_strong {
    color: var(--primary-red);
    font-size: 2rem;
    letter-spacing: 1px;

    position: relative;
}

.txt_strong::before {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 100px;
    background-color: var(--primary-red);

    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (min-width:769px) {
    .spBr {
        display: none;
    }

    .section_inner {
        max-width: 1160px;
    }
}

/* ==========================
head
=========================== */
/* nav */
.nav {
    width: 100%;
    background-color: var(--primary-white);
    background-image: url(../images/nav_background.webp);
    background-position: center 27%;
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 12px 0 48px 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    position: fixed;
    top: -100%;
    right: 0;
    z-index: 1000;
    transition: all 0.6s;
}

.nav.active {
    top: 0;
}

.nav_header {
    width: 100%;
    padding: 0 5.333% 0 2.667%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav_logo {
    width: 202px;
}

.nav_close {
    width: 23px;
    height: 23px;
}

.nav_list {
    margin-top: 12px;

    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}

.nav_item {
    color: var(--primary-brown);
    font-family: "Zen Kaku Gothic New";
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1;
}

.btn_nav {
    margin-top: 32px;
}

.nav_open {
    position: fixed;
    top: 37px;
    right: 6.533%;
    z-index: 500;
}

@media screen and (min-width:1230px) {
    .nav {
        background-color: #fff;
        background-image: none;
        padding: 17px 2%;

        flex-direction: row;
        justify-content: end;
        gap: 60px;

        top: 0;
    }

    .nav_header {
        display: none;
    }

    .nav_list {
        margin-top: 0;

        flex-direction: row;
        gap: 34px;
    }

    .nav_item {
        font-size: 1.4rem;
    }

    .btn_nav {
        margin-top: 0;
    }

    .nav_open {
        display: none;
    }
}

@media screen and (min-width:1400px) {
    .nav_item {
        font-size: 1.6rem;
    }
}


/* mainVisual */
.mainVisual_img {
    display: flex;
    justify-content: center;
    margin-top: 107px;
}

.mainVisual_subImg {
    display: none;
}

.mainVisual_mainImg {
    position: relative;
}

.mainVisual_mainImg--img {
    width: 93.866%;
    max-width: 492px;
    margin: 0 auto 0;
    position: relative;
    z-index: 10;
}

.mainVisual_mainImg--parts {
    width: 100%;

    position: absolute;
    top: 0;
}

h1 {
    width: 72%;
    max-width: 366px;
    margin: 0 auto;
    text-align: center;

    position: relative;
    z-index: 100;
}

.mainVisual_subtitle {
    color: var(--primary-brown);
    font-family: "Zen Kaku Gothic New";
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    margin-top: 27px;
}

.mainVisual_subtitle span {
    display: block;
    margin-top: 12px;
}

.scroll {
    color: var(--primary-brown);
    text-align: center;
    font-family: "Zen Kaku Gothic New";
    font-size: 2rem;
    line-height: 1;
    margin-top: 37px;
}

.scroll_line {
    background-color: var(--primary-brown);
    width: 1px;
    height: 44px;
    margin: 13px auto 0;
}

@media screen and (min-width:1024px) {
    h1 {
        width: 25.396%;
        margin-top: 10px;
    }

    .mainVisual_img {
        margin-top: 96px;

        align-items: end;
    }

    .mainVisual_mainImg {
        width: 34.156vw;
        max-width: 492px;
    }

    .mainVisual_subImg {
        display: block;
    }

    .mainVisual_subImg01 {
        width: 21.944vw;
        max-width: 316px;
        margin: 0 clamp(60px, 6vw, 87px) -69px 0;
    }

    .mainVisual_subImg02 {
        width: 20vw;
        max-width: 288px;
        margin: 0 0 -58px clamp(64px, 6.388vw, 92px);
    }

    .mainVisual_subtitle {
        font-size: 2.4rem;
        margin-top: 20px;
    }
}

/* ==========================
about
=========================== */
.about_background--top {
    width: 26.933%;

    position: absolute;
    top: -44px;
    left: -12px;
    z-index: -10;
}

.about_background--bottom {
    width: 48.533%;
    
    position: absolute;
    bottom: -16%;
    right: 25px;
    z-index: -10;
}

.section_inner--about {
    padding: 32px 0 60px;

}

.section_title--about {
    color: var(--primary-brown);
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
}

.section_title--about span {
    font-size: 1.8rem;
    padding: 0 2px;
    margin: 0 1px;
    background-color: var(--primary-lightgreen);
    border-radius: 6px;
}

.about_txt {
    text-align: center;
    font-size: 1.4rem;
    margin-top: 18px;
}

.about_txt:last-of-type {
    margin-top: 25px;
}

.btn_about {
    color: var(--primary-brown);
    background-color: var(--primary-white);
    margin: 45px auto 0;

    transition: all 0.4s;
}

.btn_about:hover {
    color: #FFF;
    background-color: var(--primary-red);
    opacity: 1;
}

.btn_about::after {
    background-image: url(../images/btn_arrow_about.svg);
}

.about_img {
    max-width: 640px;
    padding: 0 6.4%;
    margin: 8vw auto 0;

    position: relative;
}

.about_img p {
    position: relative;
    z-index: 10;
    width: 47vw;
    max-width: 230px;
}

.about_img--top {
    margin-left: auto;
}

@media screen and (min-width:769px) {
    .section_inner--about {
        padding: 100px 0;
    }

    .about_img {
        width: 100%;
        max-width: none;
        padding: 0 3%;
        margin: 0;

        position: absolute;
        top: 40px;
    }

    .about_img p {
        position: relative;
        z-index: 10;
        width: 23.706%;
    }

    .about_img--bottom {
        margin-top: 100px;
    }
}

@media screen and (min-width:1000px) {
    .section_title--about {
        font-size: 2.2rem;
    }

    .section_title--about span {
        font-size: 3rem;
        border-radius: 10px;
    }

    .about_txt {
        font-size: 1.8rem;
        margin-top: 40px;
    }

    .about_txt:last-of-type {
        margin-top: 32px;
    }

    .about_img {
        padding: 0;
    }

    .btn_about {
        margin: 40px auto 0;
        width: 327px;
        padding: 16px 74px 15px 73px;
    }
}

@media screen and (min-width:1000px) and (max-width:1230px) {
    .about_img {
        padding: 0 3%;
    }
}

@media screen and (min-width:769px) {
    .about_background--top {
        width: 21.465%;
    
        top: -40px;
        left: 8%;
    }

    .about_background--bottom {
        width: 30.431%;

        bottom: -23%;
        right: 3%;
    }
}

/* ==========================
trial
=========================== */
.trial01 {
    background-color: var(--primary-white);
}

.section_inner--trial {
    padding: 64px 0px 96px;
}

/* title */
.trial_subtitle,
.voice_subtitle {
    display: inline-block;
    color: var(--primary-brown);
    font-size: clamp(1.4rem, 3.433vw, 1.8rem);
    font-weight: 500;
    line-height: 1;

    position: relative;
}

.trial_subtitle::after,
.trial_subtitle::before,
.voice_subtitle::after,
.voice_subtitle::before {
    content: "";
    display: block;
    width: 9px;
    height: 100%;
    background-image: url(../images/trial_title_parts.svg);
    background-repeat: no-repeat;
    background-size: contain;

    position: absolute;
    bottom: 0;
    right: -5.952%;
}

.trial_subtitle::before,
.voice_subtitle::before {
    right: inherit;
    left: -5.952%;
    transform: scale(-1, 1);
}

.trial_maintitle {
    margin-top: clamp(23px, 6%, 29px);
    font-size: clamp(2rem, 5.333vw, 2.5rem);
    font-weight: 700;
}

.trial_maintitle .txt_strong {
    font-size: clamp(2.7rem, 7.2vw, 3.4rem);
    line-height: 1;
}

.trial_maintitle span:last-of-type {
    display: inline-block;
    font-size: clamp(3.2rem, 8.533vw, 4rem);

    position: relative;
    z-index: 10;
}

.trial_maintitle span:last-of-type::after {
    content: "";
    display: block;
    width: 100%;
    height: 18px;
    background-color: #fff;
    border-radius: 6px;

    position: absolute;
    bottom: 15%;
    z-index: -10;
}

/* list */
.trial_list {
    margin: 36px auto 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 86px;
}

.trial_item--img {
    width: 87.303%;
    max-width: 350px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.trial_item--detail {
    text-align: center;
    border-radius: 12.721px;
    background: #FFF;
    box-shadow: 0px 0px 8.48px 0px rgba(122, 104, 83, 0.15);
    padding: 64px 28px 21px;
    margin-top: -42px;

    position: relative;
}

.trial_item--detail::after {
    content: "";
    display: block;
    width: 92px;
    height: 60px;
    background-image: url(../images/trial_item_parts.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    position: absolute;
    bottom: -36px;
    left: -24px;
}

.trial_detail--bottom::after {
    transform: scale(-1, 1);
    left: auto;
    right: -24px;
}

.detail_farmer {
    color: #FFF;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;

    display: inline-block;
    padding: 6px 13px;
    border-radius: 100px;
    background: var(--primary-brown);
}

.detail_title {
    font-family: "Zen Kaku Gothic New";
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1.5;
    margin-top: 12px;
}

.detail_title span {
    font-size: 1.6rem;
}

.detail_price {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    margin-top: 5px;
}

.detail_price span {
    font-size: 2.4rem;
}

.btn_trial {
    margin-top: 16px;
    display: inline-block;
}

@media screen and (min-width:769px) {
    .section_inner--trial {
        padding: 68px 0px 100px;
    }

    .trial_subtitle {
        font-weight: 700;
    }


    /* list */
    .trial_list {
        flex-direction: row;
        gap: 40px;
    }

}

@media screen and (min-width:1100px) {
    .trial_list {
        gap: 187px;
    }

    .trial_item--img {
        width: 87.5%;
    }

    .trial_item--detail {
        border-radius: 15px;
        padding: 75px 44px 35px;
        margin-top: -48px;
    }

    .trial_item--detail::after {
        width: 108px;
        height: 70px;

        bottom: -43px;
        left: -26px;
    }

    .trial_detail--bottom::after {
        left: auto;
        right: -26px;
    }

    .detail_farmer {
        font-size: 1.6rem;

        padding: 7px 16px;
    }

    .detail_title {
        font-size: 2.5rem;
        margin-top: 15px;
    }

    .detail_title span {
        font-size: 1.8rem;
    }

    .detail_price {
        font-size: 1.6rem;
        margin-top: 9px;
    }

    .detail_price span {
        font-size: 2.7rem;
    }

    .btn_trial {
        margin-top: 21px;
    }
}

/* ==========================
reason
=========================== */
.section_inner--reason {
    padding: 64px 0px 96px;
}

/* title */
.reason_title--top {
    font-size: clamp(2rem, 5.333vw, 3.2rem);
    font-weight: 500;
    line-height: 1;
}

.section_title--reason img {
    width: clamp(154px, 41.066vw, 245px);
    margin-top: clamp(10px, 4.266%, 25px);
}

.section_title--reason {
    position: relative;
}

.section_title--reason::after {
    content: "";
    display: block;
    width: 50vw;
    max-width: 300px;
    height: 18px;
    background-color: var(--primary-lightgreen);
    border-radius: 6px;

    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: -10;
}

/* list */
.reason_list {
    margin-top: 32px;
}

.reason_item {
    margin-top: 60px;
}

.reason_item:first-of-type {
    margin-top: 0;
}

.reason_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.reason_img {
    width: 75.466%;
}

.reason_txtBox {
    width: 84%;
    margin-top: 9px;
}

.reason_item--title {
    display: flex;
    align-items: center;
}

.reason_number {
    width: 57px;
    margin-right: 4px;
}

.reason_topics {
    color: var(--primary-brown);
    font-family: "Zen Kaku Gothic New";
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.35;
}

.reason_topics span {
    font-size: 2.4rem;
    font-weight: 700;

    display: inline-block;
    padding: 0 3px;
    margin: 0 1px;
    position: relative;
}

.reason_topics span::after {
    content: "";
    display: block;
    width: 100%;
    height: 18px;
    background-color: var(--primary-beige);
    border-radius: 6px;

    position: absolute;
    bottom: 0;
    z-index: -10;
}

.reason_item--txt {
    font-size: 1.4rem;
    font-weight: 400;
    margin-top: 8px;
}

@media screen and (min-width:769px) {
    .section_inner--reason {
        padding: 68px 0px 100px;
    }

    .reason_list {
        width: 90vw;
        max-width: 100%;
        margin: 116px auto;
    }

    .reason_item {
        margin-top: 49px;
        flex-direction: row;
        justify-content: start;
        gap: 55px;
    }

    .reason_item:nth-of-type(2) {
        flex-direction: row-reverse;
        justify-content: end;
    }

    .reason_txtBox {
        width: 70vw;
    }
}

@media screen and (min-width:1100px) {

    .reason_img {
        width: 35vw;
        max-width: 505px;
    }

    .reason_txtBox {
        width: 84%;
        max-width: 500px;
        margin-top: 0;
    }

    .reason_number {
        width: 85px;
        margin-right: 10px;
    }

    .reason_topics {
        font-size: 2.5rem;
    }

    .reason_topics span {
        font-size: 3rem;
    }

    .reason_topics span::after {
        height: 23px;
        border-radius: 7px;
    }

    .reason_item--txt {
        font-size: 16px;
        margin-top: 16px;
    }

}

/* ==========================
farmers
=========================== */
.section_farmers {
    background-color: var(--primary-white);
}

.section_inner--farmers {
    padding: 64px 0px 96px;
}

.section_title--farmers {
    width: 84%;
    max-width: 607px;
    margin: 0 auto;
    text-align: center;

    position: relative;
    z-index: 10;
}

.farmers_subtitle {
    width: 83.01%;
    max-width: 367px;
}

.farmaers_title--img {
    width: 31.746%;
    max-width: 140px;
    margin-top: -34px;

    position: absolute;
    left: 0;
    z-index: -10;
}

.farmaers_title--img:last-of-type {
    left: inherit;
    right: 0;
}

.farmers_maintitle {
    text-align: center;
    text-shadow: 1px 1px 0 var(--primary-white), -1px -1px 0 var(--primary-white),
        -1px 1px 0 var(--primary-white), 1px -1px 0 var(--primary-white),
        0px 1px 0 var(--primary-white), 0-1px 0 var(--primary-white),
        -1px 0 0 var(--primary-white), 1px 0 0 var(--primary-white);

    font-size: clamp(24px, 7.619vw, 3.4rem);
    font-weight: 700;
}

.farmers_maintitle span {
    font-size: clamp(3rem, 9.523vw, 4.2rem);
}

/* list */
.farmers_list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13.333vw;
    margin-top: 124px;
}

.farmers_item {
    width: 84%;
    max-width: 432px;

    display: flex;
    flex-direction: column;
}

.farmers_item02 {
    align-items: end;
}

.farmers_detail {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.farmers_item02 .farmers_detail {
    flex-direction: row-reverse;
}

.farmers_detail h3 {
    width: 83.174%;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.farmers_detail h3 img {
    display: block;
    width: 85.877%;
    max-width: 308px;
    margin: 0 auto;
}

.farmers_detail h3 span {
    display: inline-block;
    color: #FFF;
    text-align: center;
    font-family: "Zen Kaku Gothic New";
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 700;
    line-height: 1;

    background-color: var(--primary-brown);
    padding: 6px 14px;
    margin-top: -1px;
    border-radius: 100px;
}

.farmers_item01 .farmers_detail h3 span {
    width: 100%;
}

.farmers_item02 .farmers_detail h3 span {
    width: 77.48%;
}

.farmers_detail p {
    width: 18%;
    margin-left: -2.857%;
}

.farmers_txt {
    font-size: 1.4rem;
    margin-top: 12px;
}

@media screen and (min-width:769px) {
    .farmaers_title--img {
        margin-top: -100px;
    }
}

@media screen and (min-width:1000px) {
    .farmaers_title--img {
        margin-top: -100px;
    }

    /* list */
    .farmers_list {
        flex-direction: row;
        align-items: start;
        gap: 102px;
        margin-top: 154px;
    }

    .farmers_item02 {
        align-items: start;
    }

    .farmers_item02 .farmers_detail {
        flex-direction: row;
    }

    .farmers_detail h3 span {
        padding: 8px 16px;
    }

    .farmers_txt {
        font-size: 1.6rem;
        margin-top: 16px;
        width: 360px;
    }
}


/* ==========================
voice
=========================== */

.section_inner--voice {
    padding: 60px 0;
}

.voice_title--img {
    width: 100%;
}

/* title */
.voice_subtitle {
    font-size: clamp(1.4rem, 3.433vw, 2rem);
}

.voice_maintitle {
    display: inline-block;
    margin-top: clamp(6px, 1.6%, 9px);
    font-size: clamp(3.2rem, 8.533vw, 4.8rem);
    font-weight: 700;

    position: relative;
    z-index: 10;
}

.voice_maintitle::after {
    content: "";
    display: block;
    width: 100%;
    height: 18px;
    background-color: var(--primary-lightgreen);
    border-radius: 6px;

    position: absolute;
    bottom: 15%;
    z-index: -10;
}

.voice_title--img p:first-of-type {
    width: 74.643%;
    max-width: 545px;
    margin: -4.8% 0 0 -9.866%;
}

.voice_title--img p:last-of-type {
    width: 50.564%;
    max-width: 395px;
    margin: -18px -1.6% 0 auto;
}

/* list */
.voice_contents {
    padding: clamp(100px, 27.466vw, 120px) 0 0;
    text-align: center;

    position: relative;
}


.voice_contents::after {
    content: "";
    display: block;
    width: 878px;
    height: 878px;
    background-image: url(../images/voice_background.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;

    position: absolute;
    top: clamp(30px, 8vw, 52px);
    left: 50%;
    transform: translateX(-50%);
    z-index: -10;
}


.voice_contents--title {
    color: var(--primary-brown);
    text-align: center;
    font-family: "Zen Kaku Gothic New";
    font-size: 2rem;
    font-weight: 700;

    display: inline-block;
    position: relative;
}

.voice_contents--title::after {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-image: url(../images/voice_contents_parts.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    position: absolute;
    top: 17px;
    left: -24px;
}

.voice_contents--slider {
    text-align: start;
    margin-top: 15px;
}

.voice_item {
    width: 300px;
    min-height: 637px;
    background-color: #fff;
    padding: 25px 24px 0;
    margin: 0 9px;
    border-radius: 6px;
    box-shadow: 0px 0px 10px 0px rgba(122, 104, 83, 0.15);
}

.voice_item_parts {
    width: 34px;
    margin-top: 14px;
}

.voice_item--title {
    font-family: "Zen Kaku Gothic New";
    font-size: 1.9rem;
    font-weight: 700;
}

.voice_item--title p {
    text-align: end;
    font-size: 1.4rem;
    font-weight: 500;
    margin-top: 2px;
}

.voice_item--txt {
    font-size: 1.4rem;
    line-height: 1.5;
    margin-top: 14px;
}

/* slider */
.slick-list {
    overflow: visible;
}

@media screen and (min-width:769px) {
    .section_inner--voice {
        padding-top: 64px;
    }

    /* title */
    .voice_maintitle::after {
        height: 27px;
        border-radius: 8px;
    }

    .voice_title--img {
        display: flex;
    }

    .voice_title--img p:first-of-type {
        width: 47.357%;
        margin: -30px 0 0 9.137%;
    }

    .voice_title--img p:last-of-type {
        width: 34.073%;
        margin: 132px 0 0 3.275%;
    }

    /* list */
    .voice_contents--slider {
        margin-top: 40px;
    }
}

@media screen and (min-width:1100px) {
    .section_inner--voice {
        padding-bottom: 136px;
    }

    .voice_contents::after {
        width: 1000px;
        height: 1000px;
    }

    .voice_contents--title {
        font-size: 2.5rem;
    }

    .voice_contents--title::after {
        width: 51px;
        height: 51px;
        top: 21px;
        left: -30px;
    }

    .voice_list {
        display: flex;
        align-items: start;
        justify-content: center;
    }

    .voice_item {
        width: 334px;
        min-height: 708px;
        padding: 36px 26px 0;
        border-radius: 15px;
    }

    .voice_item_parts {
        width: 37px;
        margin-top: 9px;
    }

    .voice_item--title {
        font-size: 2.1rem;
    }

    .voice_item--title p {
        font-size: 1.6rem;
        margin-top: 0;
    }

    .voice_item--txt {
        font-size: 1.6rem;
        margin-top: 15px;
    }
}

@media screen and (min-width:1400px) {
    .voice_list {
        gap: 40px;
    }
}

/* ==========================
faq
=========================== */
.section_inner--faq {
    padding: 32px 0px 54px;
}

.section_title--faq {
    font-family: "Zen Kaku Gothic New";
    font-size: 3.2rem;
    font-weight: 700;
}

.faq_contents {
    margin-top: 25px;
}

details {
    background-color: var(--primary-white);
    border-radius: 6px;
    width: clamp(327px, 87.2%, 880px);
    margin: 32px auto 0;
}

details:first-of-type {
    margin-top: 0;
}

summary {
    list-style: none;
    font-family: "Zen Kaku Gothic New";
    font-size: 1.6rem;
    font-weight: 500;

    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

summary::-webkit-details-marker {
    display:none;
  }

.faq_btn {
    width: 24px;
    height: 24px;
    border-radius: 100px;
    background-color: var(--primary-red);

    position: relative;
}

.faq_btn--row,
.faq_btn--column {
    width: 12px;
    height: 2px;
    background-color: #fff;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.4s;
}

.faq_btn--row {
    transform: translate(-50%, -50%) rotate(90deg);
}

details[open] .faq_btn--row {
    transform: translate(-50%, -50%) rotate(180deg);
}

.faq_answer {
    font-size: 1.4rem;
    padding: 0 15px 15px;
}

.faq_answer span {
    font-weight: 500;
    text-decoration: underline;
}

@media screen and (min-width:769px) {
    .section_inner--faq {
        padding: 0 0 102px;
    }

    .faq_contents {
        margin-top: 57px;
    }

    details {
        border-radius: 10px;
    }

    summary {
        font-size: 2rem;
        padding: 25px;
    }

    .faq_btn {
        width: 30px;
        height: 30px;
    }

    .faq_btn::after,
    .faq_btn::before {
        width: 15px;
    }

    .faq_answer {
        font-size: 1.6rem;
        padding: 0 25px 25px;
    }
}

/* ==========================
guarantee
=========================== */
.section_guarantee {
    background-color: var(--primary-white);
}

.section_inner--guarantee {
    padding: 34px 0;

    z-index: 10;
}

.section_inner--guarantee::after {
    content: "";
    display: block;
    width: 120%;
    height: 100%;
    background-image: url(../images/guarantee_background_sp.png);
    background-position: center 0px;
    background-repeat: no-repeat;
    background-size: 100% auto;

    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -10;
}

.section_title--guarantee {
    width: 74.666%;
    max-width: 352.8px;
}

.guarantee_txtBox {
    width: 76.533vw;
    max-width: 380px;
    padding: 7.317% 0;
    margin: 24px auto 0;
    background-color: #FFF;
    border-radius: 6px;
    box-shadow: 0px 0px 10px 0px rgba(122, 104, 83, 0.15);
    text-align: center;
    font-family: "Zen Kaku Gothic New";
    line-height: 1;
    font-size: 1.6rem;
    font-weight: 700;
}

.guarantee_txtBox--txt01 {
    font-size: 1.4rem;
    font-weight: 500;
}

.guarantee_txtBox--txt02 {
    margin-top: 16px;
}

.guarantee_txtBox--txt03 {
    margin-top: 19px;
}


.guarantee_txt {
    font-family: "Zen Kaku Gothic New";
    font-size: 1.4rem;
    width: 84%;
    max-width: 900px;
    margin: 24px auto 0;
}

.guarantee_txt span {
    color: var(--primary-red);
    font-weight: 500;
}

.guarantee_txt:last-of-type {
    margin-top: 25px;
}

@media screen and (min-width:769px) {
    .section_inner--guarantee::after {
        width: 100%;
        max-width: 1002px;
        height: 100%;
        background-image: url(../images/guarantee_background_pc.png);
    }


    .guarantee_txtBox {
        max-width: 534px;
        padding: 37px 0;
        margin: 32px auto 0;
        border-radius: 15px;
        font-size: 3rem;
    }

    .guarantee_txtBox--txt01 {
        font-size: 2.6rem;
    }

    .guarantee_txtBox--txt02 {
        margin-top: 35px;
    }

    .guarantee_txtBox--txt03 {
        margin-top: 35px;
    }

    .guarantee_txt {
        font-size: 1.6rem;
        margin: 32px auto 0;
    }

    .guarantee_txt:last-of-type {
        margin-top: 28px;
    }

    .guarantee_txtBox--txt03 .txt_strong {
        font-size: 3.7rem;
    }

}

/* ==========================
trial02
=========================== */
.trial_item--detail02 {
    background-color: var(--primary-white);
}

.trial02 .section_inner--trial .section_title--trial .trial_maintitle span:last-of-type::after {
    background-color: var(--primary-beige);
}

/* ==========================
footer
=========================== */
footer {
    background-color: var(--primary-white);
}

.section_inner--footer {
    text-align: center;
    padding: 30px 0;
}

.section_inner--footer::after {
    content: "";
    width: 116.8%;
    height: 100%;
    background-image: url(../images/footer_background_sp.png);
    background-repeat: no-repeat;
    background-size: 100% auto;

    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.footer_logo {
    width: 28vw;
    max-width: 213px;
    margin: 0 auto;
}

.copy {
    font-family: "Zen Maru Gothic";
    font-size: 1rem;
    line-height: 1;
    margin-top: 15px;
}

@media screen and (min-width:769px) {
    .section_inner--footer {
        padding: clamp(30px, 4.166%, 60px) 0;
    }

    .section_inner--footer::after {
        width: 104vw;
        max-width: 1498px;
        background-image: url(../images/footer_background_pc.png);
    }

    .copy {
        font-family: "Zen Maru Gothic";
        font-size: 1rem;
        line-height: 1;
        margin-top: 44px;
    }
}

/* ==========================
pageTop
=========================== */
.pageTop {
    width: 40px;
    height: 40px;
    background-color: var(--primary-brown);
    border-radius: 100px;

    position: fixed;
    bottom: 12px;
    right: 12px;
    z-index: 500;
}

.pageTop::after {
    content: "";
    display: block;
    width: 50%;
    height: 25%;
    background-image: url(../images/pageTop_arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media screen and (min-width:769px) {
    .pageTop {
        width: 80px;
        height: 80px;

        bottom: 53px;
        right: 53px;
    }
}