@charset "UTF-8";

/*======================
common
======================== */
html {
    font-size: 62.5%;
}
body {
    font-family:
                "BIZ UDPMincho",
                Arial,
                sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #31201B;
    text-align: center;
}
a {
    text-decoration: none;
}
ul {
    list-style: none;
}
img {
    max-width: 100%;
    height: auto;
}
:root {
    --primary-white:#FFFFFF;
    --primary-black:#31201B;
    --primary-pink:#FC7369;
    --primary-brown:#784230;
    --primary-red:#FF4444;
    --primary-orange:#FF9400;
    --primary-green:#7ACA94;
    --primary-lightgreen:#E9F5CD;
}

/*======================
header
======================== */
.header {
    padding: 9px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header_topic img,
.nav__topic img {
    width: 182px;
    height: 67px;
}
/* .nav初期表示 */
.nav {
    background: rgba(255, 255, 255, 0.9);
    width: 100%;
    height: 92vh;
    padding: 9px 16px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.4s;
    box-sizing: border-box;
}
.nav__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav__list {
    margin-top: 25px;
}
.nav__item {
    font-size: 1.3rem;
    line-height: 1;
    margin-top: 40px;
}
.nav__item-text {
    display: block;
    color: #31201B;
    font-family: "Dancing Script", cursive;
    font-size: 2.7rem;
    letter-spacing: 1.62px;
    margin-bottom: 0.5rem;  
    text-align: center;
}
/* .nav.active表示 */
.nav.active {
    transform: translate(0);
}
.header__btn {
    display: block;
    width: 30px;
    height: 18px;
    cursor: pointer;
} 
.nav__btn {
    display: block;
    width: 18px;
    height: 18px;
    cursor: pointer;
}
/* header pc */
@media screen and (min-width:769px) {
    .header {
        max-width: 1100px;
        margin: 0 auto;
        padding: 6px 53px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .nav {
        background: transparent;
        width: auto;
        height: auto;
        padding: 0;
        position: static;
        transform: translate(0);
    }
    .nav__list {
        margin-top: 0;
        display: flex;
    }
    .nav__item {
        margin-top: 0;
        font-size: 1.3rem;
        line-height: 1.3;
        margin-left: 32px;
    }
    .nav__header {
        display: none;
    }
    .header__btn {
        display: none;
    }
}
/* pc 769px */

/*======================
main
======================== */
.mainImg .mainImg__pc {
    display: none;
}
/* mainImg pc */
@media screen and (min-width: 769px){
    .mainImg .mainImg__pc {
        display: block;  
    }
    .mainImg .mainImg__sp {
        display: none;
    }    
    .brSp {
        display: none;
    }
}        
/* pc 769px */

/* about */
.section--about {
    margin: 0 17px;
}
.about_topic {
    margin: 48px 0;
    padding-bottom: 30px;
    border: 1px solid var(--primary-pink);
}
.about_wrapper p {
    line-height: 2;
    margin-bottom: 51px;
}
.about_topic h2 {
    margin-top: 20px;
    line-height: 1.5;
    letter-spacing: 2.7px;
}
.about_topic span {
    margin: 20px;
    color: #FC7369;
    font-size: 2.5rem;
    line-height: 1.5;
    letter-spacing: 3.5px;
    position: relative;
    display: inline-block;
}
.about_topic span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 8px; 
    background: repeating-linear-gradient(
        -45deg, 
        #FC7369, 
        #FC7369 1px,
        #fff 1px,
        #fff 4px  
    );
}
/* about PC */
@media screen and (min-width: 769px){
    .section--about {
        max-width: 1100px;
        display: flex;
        margin: 0 auto;
    }
    .about_topic {
        display: flex;
        margin: 76px 23px 43px;
        padding: 0;
        align-items: center;
    }
    .about_topic img {
        width: 495px;
    }
    .about_topic h2 {
        font-size: 3rem;
        letter-spacing: 6px;
        margin: 0 auto;
    }
    .about_topic span {
        font-size: 4rem;
        letter-spacing: 7px;
    }
    .about_wrapper p {
        font-size: 2.8rem;
        letter-spacing: 4.2px;
        line-height: 2.2;
        margin: 0 200px; 
        text-align: center;
    }
}
/* pc 769px */

/* trial */
.section--trial {
    padding: 50px 17px 0;
}
.section--trial h2 {
    font-size: 2.3rem;
    line-height: 1.5;
    letter-spacing: 4.6px;
}
.trial_wrapper {
    align-items: center;
}
.trialimg_pc {
    display: none;
}
.trial_btn {
    position: relative;
}
.trial_btn img {
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    max-width: 327px;
}
/* trial pc */
@media screen and (min-width: 769px){
    .section--trial {
        padding: 68px 0 50px;
    }
    .trialimg_sp {
        display: none;
    }
    .trialimg_pc {
        display: block;
        width: 824px;
        margin: 0 auto;
    }
    .section--trial h2 {
        font-size: 3rem;
        letter-spacing: 7.2px;
    }
    .trial_btn img {
        top: -50%;
        max-width: 680px;
        transform: translateY(-20%);
    }
}
/* pc 769px */

/* reason */
.reason--wrapper {
    overflow: hidden;
}
.section--reason h2 {
    background-color: var(--primary-pink);
    clip-path: polygon(0% 0%, 100% 0, 100% 80%, 50% 100%, 0 80%);
    color: #FFF;
    font-size: 3rem;
    line-height: 1.5;
    letter-spacing: 4.5px;
    padding: 42px 0;
    position: relative;
    overflow: hidden;
} 
.section--reason h2::before {
    content: "Reason for choosing";
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-0deg);
    font-size: 2rem;
    font-family: "Dancing Script";
    color: var(--primary-white);
    white-space: nowrap; 
}
.reason_title {
    position: relative;
} 
.reason_title::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 47%;
    right: -15%;
    width: 204px;
    height: 100px;
    background-image: url('../images/potates.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}
.section--reason h3 {
    position: relative;
}
.section--reason h3 img{  
    width: 220.364px;
    height: 107px;
    padding: 0;
}
.reason_list1 {
    margin-top: 55px;
}
.reason_list2 {
    margin-top: 80px;
}
.reason_list3 {
    margin-top: 80px;
}
.reason_list1::before {
    content: "Directly from the farm";
    position: absolute;
    top: 5%;
    left: 25%;
    transform: translate(-50%, -50%) rotate(-23deg);
    font-size: 2rem;
    font-family: "Dancing Script";
    color: var(--primary-red);
    white-space: nowrap; 
}
.reason_list2::before {
    content: "Pesticide-free vegetables";
    position: absolute;
    top: 5%;
    left: 25%;
    transform: translate(-50%, -50%) rotate(-23deg);
    font-size: 2rem;
    font-family: "Dancing Script";
    color: var(--primary-red);
    white-space: nowrap; 
}
.reason_list3::before {
    content: "Seasonal vegetables";
    position: absolute;
    top: 5%;
    left: 25%;
    transform: translate(-50%, -50%) rotate(-23deg);
    font-size: 2rem;
    font-family: "Dancing Script";
    color: var(--primary-red);
    white-space: nowrap; 
}
.reason_topic {
    font-size: 1.8rem;
    line-height: 1.5;
    letter-spacing: 2.7px;
    margin-top: 6px;
}
.reason_txt {
    line-height: 1.8;
    letter-spacing: 1.92px;
    margin: 5px 16px;
}
.reason_txt br {
    display: none;
}
/* reason pc */
@media screen and (min-width: 769px){
    .section--reason h2 {
        background-color: var(--primary-pink);
        clip-path: polygon(0% 0%, 100% 0, 100% 80%, 50% 100%, 0 80%);
        color: #FFF;
        font-size: 4.5rem;
        line-height: 1.5;
        letter-spacing: 8.25px;
        padding: 97px 0;
        position: relative;
        overflow: hidden;
    }
    .reason_title::before {
        top: 47%;
        right: 0;
        width: 443px;
        height: 215px;
        z-index: 1;
    }
    .section--reason h2::before {
        top: 25%;
        font-size: 3.8rem;
    }
    .section--reason h3 img{  
        width: 604px;
        height: 238px;
        padding: 0;
    }
    .reason_list1::before {
        top: 20%;
        left: 23%;
        transform: translate(-50%, -50%) rotate(-12deg);
        font-size: 3.4rem;
        letter-spacing: 5px;
    }
    .reason_list2::before {
        top: 20%;
        left: 23%;
        transform: translate(-50%, -50%) rotate(-12deg);
        font-size: 3.4rem;
        letter-spacing: 5px;
    }
    .reason_list3::before {
        top: 20%;
        left: 23%;
        transform: translate(-50%, -50%) rotate(-12deg);
        font-size: 3.4rem;
        letter-spacing: 5px;
    }
    .reason_photo {
        width: 100%;
        height: auto;
    }
    .reason_topic {
        font-size: 3.7rem;
        line-height: 1.5;
        letter-spacing: 5.55px;
        margin-top: 20px;
    }
    .reason_txt {
        font-size: 2.8rem;
        line-height: 1.8;
        letter-spacing: 3.36px;
        margin: 0 65px;
    }
    .reason_txt br {
        display: inline;
    }
}
/* pc 769px */

/* organic */
.section--organic {
    margin-top: 53px;
}
.organic_wrapper {
    background-color: var(--primary-lightgreen);
    padding: 40px 0 55px;
}
.organic_topic {
    font-size: 2.3rem;
    line-height: 1.8;
}
.organic_wrapper img {
    padding: 0 100px;
}
.organic_wrapper h2 {
    font-size: 1.8rem;
    letter-spacing: 3.6px;
    margin-top: 14px;
}
.organic_wrapper h2 span {
    font-size: 2.4rem;
    letter-spacing: 4.8px;
    position: relative;
}
.organic_wrapper h2 span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px; 
    width: 100%;
    height: 8px;
    background: repeating-linear-gradient(
        -45deg, 
        #5DC076,  
        #5DC076 1px,
        #fff 1px,
        #fff 4px  
    );
}
.organic_box {
    background-color: var(--primary-white);
    border-radius: 0px 75px;
    margin: 0 18px;
    padding: 5px;
}
.organic_txt1 {
    padding: 20px 0 35px;
    border-radius: 0px 70px;
    border: 1px solid var(--primary-green);
}    
.organic_txt1 p {
    margin: 40px 40px 0;
}
.organic_wrapper p {
    letter-spacing: 4px;
    line-height: 1.8;
}
.organic_wrapper p span{
    color: var(--primary-red);
    letter-spacing: 3.36px;
}
.organic_txt2 {
    line-height: 28px;
    letter-spacing: 4px;
    margin: 31px 23px 0;
}
/* organic pc */
@media screen and (min-width: 769px){
    .section--organic {
        margin-top: 113px;
    }
    .organic_topic {
        font-size: 3rem;
        letter-spacing: 7px;
        margin:0 0 18px 30px;
        text-align: left;
    }
    .organic_box {
       max-width: 1000px;
       margin: 0 auto;
       position: relative;
    }
    .organic_wrapper {
        padding: 80px 250px 90px;
    }
    .organic_img {
        position: absolute;
        top: -3%; 
        left: 60%; 
        width: 550px;
        height: auto;
    }
    .organic_txt1 {
        align-items: center;
        padding: px 80px 35px 0;
    }  
    .organic_wrapper h2 {
        font-size: 5.3rem;
        letter-spacing: 10;
        text-align: left;
        margin: 79px 0 0 40px;
    }
    .organic_wrapper h2 span {
        font-size: 7.5rem;
        letter-spacing: 12px;
    }
    .organic_wrapper h2 span::after {
        bottom: -8px; 
        width: 100%;
        height:12px;
        background: repeating-linear-gradient(
            -50deg, 
            #5DC076,  
            #5DC076 2px,
            #fff 2px,
            #fff 7px  
        );
    }
    .organic_txt1 p {
        font-size: 2.8rem;
        letter-spacing: 7px;
        margin: 40px 30px;
    }
    .organic_txt2 {
        font-size: 2.3rem;
        line-height: 6;
        letter-spacing: 6.5px;
        margin: 52px 0 0 0;
    }
}
/* pc 769px */

.saibai_wrapper {
    margin-top: 33px;
}
.saibai_wrapper h3{
    font-size: 2.3rem;
    letter-spacing: 4.6px;
}
.saibai_list {
    margin-top: 20px;
    color: var(--primary-brown);
}
.saibai_topic {
    margin-top: 30px;
}
.saibai_topic p{
    font-size: 1.5rem;
    margin: 17px 35px 0;
    padding-bottom: 20px;
    border-bottom-width: 1px;
    border-style: dashed;
    border-color: var(--primary-brown);
}
/* saibai pc */
@media screen and (min-width: 769px){
    .saibai_wrapper {
        margin-bottom: 37px;
    }
    .saibai_wrapper h3{
        font-size: 3rem;
        letter-spacing: 7.2px;
        margin-top: 37px;
    }
    .saibai_list {
        display: flex;
        justify-content: center;
    }
    .saibai_topic {
        border-right-width: 1px;
        border-style: dashed;
        border-color: var(--primary-brown);
    }
    .saibai_topic p{
        border-style: none;
    }
    .saibai_img {
        margin: 0 20px;
    }
}
/* pc 769px */

/* farmer */
.section--farmer {
    background-image: url(../images/background.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.farmer_wrapper {
    margin-top: 50px;
    padding: 46px 0 70px;
    position: relative;
}
.farmer_wrapper::before {
    content: "";
    position: absolute;
    top: 3%;
    left: 17%; 
    width: 136.141px;
    height: 85px;
    transform: translate(-50%, -50%) rotate(-0deg);
    background-image: url(../images/tometes.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.farmer_header {
    position: relative;
}
.farmer_header::before {
    content: "";
    position: absolute;
    top: 4%;
    left: 85%; 
    width: 105px;
    height: 130px;
    transform: translate(-50%, -50%) rotate(-0deg);
    background-image: url(../images/broccoli.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.farmer_title {
    padding: 33px 0;
    margin: 0 33px;
    border-radius: 0px 70px;
    background-color: var(--primary-white);  
    opacity: 0.9;
    position: relative;
}
.farmer_title::before {
    content: "";
    position: absolute;
    top: 5px;    
    left: 5px;   
    right: 5px;
    bottom: 5px; 
    border: 1px solid var(--primary-green);
    border-radius: 0px 65px;
}
.farmer_title::after {
    content: "";
    position: absolute;
    top: 110%;
    left: 15%; 
    width: 116.169px;
    height: 103px;
    transform: translate(-50%, -50%) rotate(-0deg);
    background-image: url(../images/onion.png);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}
.farmer_title h2 {
    font-size: 2rem;
    line-height: 1.5;
    letter-spacing: 4px;
}
.farmer_title span {
    font-size: 1.5rem;
    line-height: 1.8;
    letter-spacing: 2.25px;
}
.farmer_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-bottom: -1rem;
}
.farmer_content img {
    width: 320px;
    height: auto;
    transform: rotate(-2deg);
    position: relative; 
    z-index: 2; 
}    
.farmer_index1 {
    background-color: var(--primary-green);
    opacity: 0.85;
    color: var(--primary-white);
    padding: 20px 23px;
    position: relative;
    z-index: 1;
    margin-top: -20px; 
}
.farmer_index2 {
    background-color: var(--primary-green);
    opacity: 0.85;
    color: var(--primary-white);
    padding: 20px 23px;
    position: relative;
    z-index: 1;
    margin-top: -20px; 
}
.farmer_box1 {
    position: relative;
}
.farmer_box1::before {
    content: "";
    position: absolute;
    top: 5%;
    left: 85%;
    transform: translate(-50%, -50%) rotate(-0deg);
    width: 142.592px;
    height: 153px;
    background-image: url(../images/onion_red.png);
    background-size: cover; 
    background-repeat: no-repeat;
}
.farmer_index1::after {
    content: "";
    position: absolute;
    bottom: -65%;
    left: 80%;
    transform: translate(-50%, -50%) rotate(-0deg);
    width: 178.036px;
    height: 144px;
    background-image: url(../images/green_beans.png);
    background-size: cover; 
    background-repeat: no-repeat;
    z-index: 1;
}
.farmer_shop {
    font-size: 2rem;
    letter-spacing: 3px;
    text-align: left;
}
.farmer_index1 h3 {
    font-size: 2.3rem;
    letter-spacing: 3.45px;
    text-align: left;
    margin-top: 15px;
}
.farmer_index1 h3 span {
    display: block;
    text-align: right;
}
.farmer_index2 h3 {
    font-size: 2.3rem;
    letter-spacing: 3.45px;
    text-align: left;
    margin-top: 15px;
}
.farmer_index2 h3 span {
    display: block;
    text-align: right;
}
.farmer_name {
    font-size: 1.8rem;
    letter-spacing: 3.06px;
    text-align: right;
    margin-top: 5px;
}
.farmer_txt {
    color: var(--primary-black);
    font-size: 1.8rem;
    line-height: 1.5; 
    letter-spacing: 3.06px;
    margin-top: 23px;
    text-align: left;
}
/* farmer pc */
@media screen and (min-width: 769px){
    .farmer_wrapper {
        max-width: 1100px;
        margin: 0 auto;
        padding: 140px 0;
    }
    .farmer_wrapper::before {
        top: 7%;
        left: 17%; 
        width: 269.079px;
        height: 168px;
    }
    .farmer_header::before {
        top: -3%;
        left: 85%; 
        width: 253.731px;
        height: 280px;
    }
    .farmer_index1::after {
        top: 115%;
        left: 80%;
        width: 319px;
        height: 258px;
    }
    .farmer_header::after {
        content: "";
        position: absolute;
        top: 80%;
        left: 85%; 
        width: 257px;
        height: 365px;
        transform: translate(-50%, -50%) rotate(10deg);
        background-image: url(../images/mizuna.png);
        background-size: cover;
        background-repeat: no-repeat;
        z-index: 1;
    }
    .farmer_title {
        margin: 0 100px;
        padding: 29px 0 60px;
    }
    .farmer_title::after {
        top: 70%;
        left: 5%; 
        width: 247px;
        height: 219px;
        transform: translate(-50%, -50%) rotate(-0deg);
    }
    .farmer_content img {
        width: 542px;
        height: 690px;
        transform: rotate(-0deg);
        position: absolute;
        top: -35px;
        left: -35px; 
    } 
    .farmer_content.content--reverse{
        position: relative;
        margin-top: 70px;
    }
    .farmer_content.content--reverse img {
        width: 542px;
        height: 690px;
        transform: rotate(-0deg);
        position: absolute;
        top: -35px;
        right: -30px; 
        left: unset;
    }
    .farmer_title span {
        font-size: 3rem;
        letter-spacing: 3.5px;
        line-height: 3;
        text-align: left;
    }
    .farmer_title h2 {
        font-size: 4.8rem;
        letter-spacing: 10px;
    }
    .farmer_content {
        flex-direction: row;
        justify-content: space-between;
        position: relative; 
    }
    .farmer_content.content--1 {
        position: relative;
    }
    .farmer_content.content--1::after {
        content: "";
        position: absolute;
        bottom: -30%;
        left: 20%;
        transform: translate(-50%, -50%) rotate(-0deg);
        width: 218.082px;
        height: 234px;
        background-image: url(../images/onion_red.png);
        background-size: cover; 
        background-repeat: no-repeat;
        z-index: 2;
    }
    .farmer_index1 {
        padding: 20px 20px 20px 350px;
        margin: 80px 30px 80px 170px ; 
        text-align: right;
        text-align: center;
        position: relative;
        display: flex;
    }
    .farmer_index1 h3 {
        font-size: 4.3rem;
        letter-spacing: 6px;
        text-align: left;
    }
    .farmer_index2 {
        padding: 20px 350px 20px 20px;
        margin: 80px 170px 80px 30px ; 
        text-align: right;
        position: relative;
        display: flex;
    }
    .farmer_index2 h3 {
        font-size: 4.3rem;
        letter-spacing: 6px;
        text-align: left;
    }
    .farmer_index2 h3 span {
        text-align: center;
    }
    .farmer_shop {
        font-size: 3.5rem;
        letter-spacing: 4px;
        text-align: left;
    }
    .farmer_name {
        font-size: 2.8rem;
        letter-spacing: 4.25px;
        margin-top: 5px;
    }
    .farmer_txt {
        font-size: 2rem;
        line-height: 1.7; 
        letter-spacing: 3.4px;
        margin-top: 23px;
    }
    .farmer_box1::before {
        display: none;
    }
}
/* pc 769px */

/* quality */
.section--quality {
    padding: 28px 17px 37px;
}
.quality_wrapper {
    background-image: linear-gradient(#B28F5BD9,#624825);
    color: #FFF;
    position: relative;
    padding: 4px;
}
.quality_wrapper img {
    position: absolute;
    top: -20px; 
    left: -20px; 
    width: 152px;
    height: auto;
}
.quality_box {
    border: 3px solid #DAC289;
}
.quality_border {
    padding: 50px 10px 37px;
    margin: 1px;
    border: 1px solid #DAC289;
    position: relative;
}
.quality_border::after {
    content: "";
    position: absolute;
    top: 13%;
    left: 80%;
    transform: translate(-50%, -50%) rotate(-0deg);
    width: 150px;  
    height: 200px;
    background-image: url(../images/corn.png);
    background-size: cover; 
    background-repeat: no-repeat;
    z-index: 1;
}
.quality_box span {
    font-family: "Dancing Script";
    font-size: 2.2rem;
    letter-spacing: 2.64px;
}
.quality_box h2 {
    font-size: 3rem;
    letter-spacing: 3.6px;
}
.quality_topic {
    border-bottom-width: 1px;
    border-style: solid;
    border-color: var(--primary-white);
    border-top-width: 1px;
    margin: 30px 14px;
    padding: 20px 0;
}
.quality_topic p {
    font-size: 2rem;
    letter-spacing: 1.8px;
}
.quality_txt {
    line-height: 2;
    letter-spacing: 1px;
}
.quality_txt br {
    display: none;
}
.quality_txt2 {
    margin-top: 30px;
}
/* quality pc */
@media screen and (min-width: 769px){
    .section--quality {
        padding: 78px 0;
    }
    .quality_wrapper {
        max-width: 980px;
        margin: 0 auto;
    }
    .quality_wrapper img {
        top: -20px; 
        left: -50px; 
        width: 290px;
        height: auto;
    }
    .quality_box span {
        font-size: 4.5rem;
        letter-spacing: 6px;
        color: rgba(255, 255, 255, 0.88);
    }
    .quality_border {
        padding: 0;
    }
    .quality_border::after {
        top: 28%;
        left: 80%;
        width: 265px;  
        height: 421px;
    }
    .quality_box h2 {
        font-size: 6rem;
        line-height: 1;
        letter-spacing: 7.5px;
    }
    .quality_topic {
        margin: 30px 230px;
        padding: 35px 0;
    }
    .quality_topic p {
        font-size: 2.5rem;
        letter-spacing: 3.75px;
        line-height: 1.6; 
    }
    .quality_txt {
        font-size: 1.8rem;
        line-height: 2;
        letter-spacing: 4.5px;
        margin: 33px 88px 40px;
    }
    .quality_txt br {
        display: inline;
    }
}

/* pc 769px */

/* voice */
.voice_wrapper {
    position: relative;
    margin-top: 45px;
}
.voice_wrapper::before {
    content: "";
    position: absolute;
    background-image: url(../images/paprika.png);
    width: 122px;
    height: 134px;
    top: 11%;
    left: 30%;
    transform: translate(-50%, -50%) rotate(-0deg);
    background-size: cover; 
    background-repeat: no-repeat;
    z-index: 1;
}
.voice_wrapper h2 {
    font-size: 4rem;
    line-height: 1.8;
    letter-spacing: 4.8px;
}
.voice_wrapper h2 span {
    color: var(--primary-red);
}   
.voice_img {
    text-align: right;
}
.voice_topic img {
    width: 195.749px;
    height: auto;
}
.voice_heading h3 {
    padding: 10px;
    background-color: var(--primary-white);
    font-size: 2.7rem;
    letter-spacing: 2.43px;
} 
.voice_heading p {
    margin-right: 18px;
    color: var(--primary-orange);
    font-size: 2.8rem;
    letter-spacing: 1.8px;
    text-align: right;
    padding: 10px 0;
}
.voice_list2 .voice_heading p {
    color: var(--primary-green);
}
.voice_txt {
    padding: 30px 10px;
    margin: 0 17px;
    border-radius: 0px 55px;
    background-color: var(--primary-white);   
    line-height: 1.7;
    letter-spacing: 3.04px;
}
.voice_txt br {
    display: none;
}
.voice_list1 {
    height: 690px;
    background-image: url(../images/background_1.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.voice_list1::before {
    content: "Voice 01";
    position: absolute;
    top: 17%;
    left: 25%;
    transform: translate(-50%, -50%) rotate(-23deg);
    font-size: 4rem;
    font-family: "Dancing Script";
    color: var(--primary-orange);
    white-space: nowrap; 
    z-index: 1;
}
.voice_list1::after {
    content: "";
    position: absolute;
    top: 17%;
    left: 0;
    transform: translate(-50%, -50%) rotate(0deg);
    background-image: url(../images/voice_shape1.png);
    width: 229px;
    height: 153px;
    background-repeat: no-repeat;
}
.voice_list2 {
    height: 630px;
    background-image: url(../images/background_2.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.voice_list2 .voice_img {
    text-align: left;
}
.voice_list2::before {
    content: "Voice 02";
    position: absolute;
    top: 6%;
    right: -10%;
    transform: translate(-50%, -50%) rotate(7deg);
    font-size: 4rem;
    font-family: "Dancing Script";
    color: var(--primary-green);
    white-space: nowrap; 
}
.voice_list3 {
    height: 750px;
    background-image: url(../images/background_3.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin-top: 20px;
}
.voice_list3::before {
    content: "Voice 03";
    position: absolute;
    top: 4%;
    left: 25%;
    transform: translate(-50%, -50%) rotate(-7deg);
    font-size: 4rem;
    font-family: "Dancing Script";
    color: var(--primary-orange);
    white-space: nowrap; 
}
.voice_list3::after {
    content: "";
    position: absolute;
    bottom: -5.5%;
    left: 0;
    transform: translate(-50%, -50%) rotate(0deg);
    background-image: url(../images/voice_shape2.png);
    width: 186px;
    height: 84px;
    background-repeat: no-repeat;
}
/* voice pc */
@media screen and (min-width: 769px){
    .section--voice {
        margin-top: 100px;
    }
    .voice_wrapper h2 {
        font-size: 6rem;
        line-height: 1.5;
        letter-spacing: 8.4px;
    }
    .voice_wrapper::before {
        width: 187.237px;
        height: 205.393px;
        top: 3%;
        left: 70%;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .voice_wrapper::after {
        content: "";
        position: absolute;
        background-image: url(../images/turnip.png);
        width: 435.993px;
        height: 233.9px;
        top: 11%;
        left: 30%;
        transform: translate(-50%, -50%) rotate(-0deg);
        background-size: cover; 
        background-repeat: no-repeat;
        z-index: 1;
    }
    .voice_head {
        position: relative;
    }
    .voice_head::before {
        content: "";
        position: absolute;
        background-image: url(../images/kabu.png);
        width: 250px;
        height: 350px;
        top: 11%;
        left: 28%;
        transform: translate(-50%, -50%) rotate(6deg);
        background-size: cover; 
        background-repeat: no-repeat;
        z-index: 1;
    }

    .voice_topic {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 55px;
        position: relative;
    }
    .voice_topic img {
        width: 397px;
        height: auto;
    }
    .voice_list1 {
        height: 930px;
        background-image: url(../images/background_pc1.svg);
        margin-bottom: -50px;
    }
    .voice_list1::after {
        top: 11%;
        left: 0;
        transform: translate(-50%, -50%) rotate(0deg);
        background-image: url(../images/voice_shape1_pc.png);
        width: 1066px;
        height: 329px;
        background-repeat: no-repeat;
    }
    .voice_list2 {
        height: 930px;
        background-image: url(../images/background_pc2.svg);
        margin-bottom: -120px;
    }
    .voice_list3 {
        height: 930px;
        background-image: url(../images/background_pc3.svg);
        margin-top: 0;
    }
    .voice_list3::after {
        bottom: -28.4%;
        left: 0;
        transform: translate(-50%, -50%) rotate(0deg);
        background-image: url(../images/voice_shape2_pc.png);
        width: 1012px;
        height: 286px;
        background-repeat: no-repeat;
    }
    .voice_heading h3 {
        padding: 10px;
        font-size: 4.5rem;
        letter-spacing: 4.5px;
        text-align: left;
        position: absolute;
        top: 35%;
    } 
    .voice_list2 .voice_heading h3 {
        text-align: right;
        top: 30%;
        right: 10%;
    }
    .voice_list2 .voice_heading p {
        margin-right: 18px;
        font-size: 3.8rem;
        letter-spacing: 4.05px;
        position: absolute;
        top: 45%;
        right: 37%;
    }
    .voice_heading p {
        margin-right: 18px;
        font-size: 3.8rem;
        letter-spacing: 4.05px;
        position: absolute;
        top: 47%;
        right: 41%;
    }
    .voice_txt {
        font-size: 2.8rem;
        padding: 30px 35px;
        margin: 0;
        letter-spacing: 6px;
        text-align: left;
    }
    .voice_txt br {
        display: inline;
    }
    .voice_list1::before {
        top: 16%;
        left: 25%;
        transform: translate(-50%, -50%) rotate(-10deg);
        font-size: 8rem;
    }
    .voice_list2::before {
        top: 10%;
        left: 75%;
        transform: translate(-50%, -50%) rotate(3deg);
        font-size: 8rem;
    }
    .voice_list3::before {
        top: 16%;
        left: 25%;
        transform: translate(-50%, -50%) rotate(-10deg);
        font-size: 8rem;
    }
}
/* pc 769px */


/* faq */
.faq_wrapper {
    background-image: linear-gradient(#F3FDCC,#D6F09F);
    padding: 31px 17px 80px;
    margin-top: 84px;
}
.faq_wrapper h2 {
    font-size: 2.3rem;
    letter-spacing: 3.45px;
    margin-bottom: 50px;
    position: relative;
}
.faq_wrapper h2::before {
    content: "Frequently Asked Questions";
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    font-size: 2rem;
    font-family: "Dancing Script";
    color: var(--primary-green);
    white-space: nowrap; 
}
.faq_list {
    background-color: var(--primary-white);
    border-radius: 0px 60px;
    border: 1px solid var(--primary-orange);
    margin-bottom: 38px;
}
.faq_list dt {
    border-radius: 0px 55px 0px 0px;
    background: var(--primary-orange);
    height: auto;
    padding: 10px 10px;
    margin: 1px;
    display: flex;
    color: var(--primary-white);
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: 1.62px;
    align-items: center;
    border: 2px solid var(--primary-white);
}
.faq_list span {
    font-family: "Dancing Script";
    font-size: 3rem;
    letter-spacing: 2.7px;
    margin-right: 10px;
}
.faq_list dd {
    padding: 30px 19px 27px;
    line-height: 1.7;
    letter-spacing: 3.04px;
}
.faq_list br {
    display: none;
}
/* faq pc */
@media screen and (min-width: 769px){
    .section--faq {
        max-width: 1100px;
        width: 100%;      
        margin: 0 auto; 
    }
    .faq_wrapper {
        padding: 70px 38px 62px;
        margin: 0;
    }
    .faq_wrapper h2 {
        font-size: 5rem;
        letter-spacing: 3.45px;
        margin-bottom: 75px;
        position: relative;
    }
    .faq_wrapper h2::before {
        top: 93%;
        left: 78%;
        transform: translate(-50%, -50%) rotate(-10deg);
        font-size: 4rem;
        letter-spacing: 4.8px;
    }
    .faq_list {
        border-radius: 0px 100px;
        margin-bottom: 32px;
    }
    .faq_list dt {
        border-radius: 0px 95px 0px 0px;
        padding: 20px 35px;
        display: flex;
        color: var(--primary-white);
        font-size: 3.5rem;
        letter-spacing: 4px;
        align-items: center;
        line-height: 1.2;
    }
    .faq_list span {
        font-size: 7rem;
        margin-right: 46px;
    }
    .faq_list dd {
        padding: 26px;
        font-size: 2.5rem;
        line-height: 2.5;
        letter-spacing: 1.9px;
        text-align: left;
    }
    .faq_list br {
        display: inline;
    }
}
/* pc 769px */

/*======================
footer
======================== */
.copy {
    font-size: 1rem;
    padding: 16px 112px;
}