@charset "utf-8";
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family:"游ゴシック", "Yu Gothic", sans-serif;
}

.flex {
    display: flex;
    gap: 40px;
}

.center {
    justify-content: center;
}

img {
    max-width: 100%;
    vertical-align: bottom;
}

h1 {
    position: relative;
}

h1 a {
    position: absolute;
    bottom: 20%;
    left: 7%;
    width: 28vw;
    min-width: 106px;  
}

h2 {
    text-align: center;
    font-size: clamp(1.8rem, 3.7vw, 5rem);
    padding-top: 5%;
    padding-bottom: 2%;
}

h3 {
    font-size: clamp(1.6rem, 2.4vw, 3rem);
}

p{
    font-size: clamp(1rem, 1.68vw, 3rem);
}

.fv {
    width: 100%;
}

  /* サービス概要 */
  .service {
    position: relative;
    background-image: url(../images/bg1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 5%;
    padding-bottom: 5%;

    img {
        width: 100%;
    }

    div.card {
        position: relative;
        background-color: white;
        border-radius: 25px;
        width: 592px;
        max-width: 64.8%;
        /* aspect-ratio: 1; */
        margin: 0 auto;
    }

    span {
        color: #C1655F;
    }

    p {
        color: #6D5954;
        white-space: pre-line;
        font-size: clamp(12px, 1.8vw, 28.59px);
        font-weight: 700;
        letter-spacing: 0.2rem;
        padding: 30px;
        text-align: justify;
    }

    .fukidashi {
        position: absolute;
        width: 20%;
    }

    .fukidashi:nth-child(2) {
        left: -17%;
        top: 0;
    }

    .fukidashi:last-child {
        bottom: 0;
        right: -15%;
    }

    a {
        display: block;
        text-align: center;

        img {
            width: 27vw;
            padding-top: 3%;
        }
    }

    @media screen and (max-width:1000px) {
        div.card {
            width: 64.8%;
        }

        .fukidashi {
            width: 23%;
        }
    }

    @media screen and (max-width:450px) {
        div.card {
            width: 64.8%;
        }

        .fukidashi {
            width: 33%;
        }

        .fukidashi:nth-child(2) {
            left: -33%;
        }

        .fukidashi:last-child {
            right: -25%;
        }
    }
}

/* 選ばれる4つの理由 */
.reason {
    background-color: #F3ECE3;
    padding-bottom: 7%;

    h2 {
        color: #91766E;
        text-align: center;
    }
    .card2 {
        width: 540px;
        border-radius: 30px;
        background-color: #F4EDB3;
        display: flex;
        flex-flow: column;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        margin-block: 20px;
        color: #91766E;

        p {
            padding: 5%;
            text-align: justify;
        }
    }

    @media screen and (max-width: 767px) {
        .card2 {
            display: block;
            width: 80%;
            margin: 5% auto;
        }
    }
}

/* 料金プラン */
.price {
    background-image: url(../images/bg2.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    color: #91766E;
    text-align: center; 

    .planblock {
        background-color:#91766E;
        padding-bottom: 37px;
    }
    
    .planblock2 {
        background-color:#F3ECE3 ;
        padding-bottom: 37px;
    }
    
    .planblock p:first-of-type,.planblock2 p:first-of-type {
        padding: 50px 0;
    }
    .planblock span,.planblock2 span {
        font-size: 48px;
        font-weight: bold;
    }
    .planblock h3 {
        font-size: 40px;
        background-color:#91766E;
        color: #F3ECE3;
        padding: 50px;
    }

    .planblock p {
        background-color: white;
    }
    
    .planblock p:last-of-type,.planblock2 p:last-of-type {
        font-size: 28px;
        font-weight: 480;
        padding-bottom: 50px;
    }
    
    .planblock2 h3 {
        font-size: 40px;
        background-color:#F3ECE3;
        color: #91766E;
    }
    
    .planblock2 p {
        background-color: white;
    }
    
    .planblock h3,.planblock2 h3 {
        padding: 0 30px 0 ;
        width: 8em;
        text-align: center;
        margin: 0 auto;
    }
    
    .comment {
        font-size: clamp(1.6rem, 2.19vw, 3rem);
        font-weight: bold;
    }
    
    .comment span {
        font-family: Arial;
    }
    .kazoku {
        background-color: #F4EDB3;
        width: 50vw;
        border-radius: 50px;
        font-size: clamp(0.5rem, 2.4vw, 3rem);
        font-weight: bold;
        padding-top: 30px;
        margin: 0 auto;
    }
    
    .kazoku span {
        color: #C1655F;
        font-size: clamp(1.5rem, 3.66vw, 3rem);
    }
    
    .caution {
        font-size: clamp(0.5rem, 0.95vw, 2rem);
        text-align: right;    
    } 
    
    section#oneyear {
        position: relative;
    }

    img {
        position: absolute;
        top: -22%;
        right: 10%;
    }

    @media screen and (max-width: 767px) { 
        .kazoku {
            width: 74.7vw;
            padding-top: 10px;
        }
        .price {
            background-image: url(../images/Spbg2.jpg);
        }
        
    }
}

/* お届けまでの流れ */
.procedure {
    background-color: #F3ECE3;
    color: #91766E;
    padding-bottom: 7%;

    h3 {
        font-size: clamp(1.5rem, 2.92vw, 3rem);
    }

    p {
        font-weight: 500;
    }
    
    
    .step {
        display: flex;
       text-align: center;
        margin-bottom: 20px;
        align-items: flex-start;
        margin-left: 50px;
    }
    
    .step-content {
        display: flex;
        flex-direction: column; /* h3とpを縦並びに */
      }
    
    .step-content h3 {
      border-top: 2px dashed #91766E; /* 破線の色と太さを調整 */
      padding-top: 10px;           /* 破線とテキストの間に余白 */
      width: 1000px; /* すべてのステップで統一 */
    
    }

    .step-content h3,.step-content p {
        text-align: left;
    }

    
    .spstep p {
        font-size: 6.46vw;
        font-weight: bold;
        color: #D3BFB6;
        background-color: #6D5954;
    }

    @media screen and (max-width: 767px) {
        .step {
            display: block;
            width: 100%;
            margin: 5% auto;
            text-align: center;
        }
        .step-content h3{
            border-top: none;
            border-bottom: 2px dashed #91766E;
            display: flex;
            width: 90%;
            margin: 0 auto;
            justify-content: center;
        }
        .step img {
            display: none;
        }

        .step-content h3,.step-content p {
            text-align: center; /* テキストを左寄せに */
          }
    }
}

/* お客様の声 */
.voice {
    background-color: #D3BFB6;
    color: #91766E;
    padding-bottom: 7%;

    .card3 {
        background-color: #F7F6E7;
        margin-block: 20px;
        padding: 18px 0px;
        color: #91766E;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 580px;
        padding: 20px;
        box-sizing: border-box;
      }
      
      .card3 img {
        height: 160px;
        width: auto;
        display: block;
        margin-bottom: 10px;
      }
      
      .card3 p:first-of-type {
        height: 2.5em; /* 年齢・職業の高さを固定 */
        line-height: 1.5;
        margin-bottom: 10px;
        text-align: center;
      }
}

/* FAQ */
.faq {
    background-color: #EFEDE6;
    color: #91766E;
    padding-bottom: 5%;

    a {
        display: block;
        margin: 0 auto;
        padding-top: 5%;
        padding-bottom: 5%;
        text-align: center;
    }
    
    p {
        font-size: clamp(0.9rem, 1.46vw, 3rem);
        padding-left: 40px;    
    }
    
    summary {
        font-size: clamp(1rem, 2.19vw, 3rem);
    }
    
    details {
        padding-left: 50px;
    }
    
    summary {
        display: block;
        cursor: pointer;
        }
    
    .answer {
        display: block grid;
        transition: grid-template-rows 0.5s;
        }
    
    .inner {
        overflow: hidden;
        }
    
    p.noIndent {
        text-indent: 0;
        }
    
    /*開ける事を意味するアイコン*/
    summary::before {
        content: "+";
        color: #6D5954;
        }
    
    /*閉じる事を意味するアイコン*/
    details[open] summary::before {
        content: "-";
        color: #6D5954;
        }    
}

/* フッター */
footer {
    position: relative;
    background-image: url(../images/bg3.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    color: #6D5954;
    padding-left: 50px;

    p {
        font-size: clamp(0.5rem, 1.7vw, 3rem);
    }

    img {
        position: absolute;
        right: 50px;
        bottom: 10px;
    }
    
    a {
        color: inherit; /* 親要素の色を継承する、または特定の色を指定 */
        text-decoration: none; /* 下線を消す */
        padding-bottom: 1%;
      }
    .copyright {
        padding-bottom: 2%;
        color: #937A74;
    }

    @media screen and (max-width: 767px) {
        footer img {
            position: absolute;
            right: 3.5vw;
            bottom: 14vw;
        }
    }
}

/* ハンバーガーメニュー */
.hamburger {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 150;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.hamburger.is-active span:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(135deg);
}

.hamburger.is-active span:nth-child(2) {
    opacity: 0;
}

.hamburger.is-active span:nth-child(3) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-135deg);
}

.hamburger span {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 2px;
    background-color: #91766E;
    transition: transform .3s;
}

.hamburger.is-active span {
    background-color: #ffffff;
}

.hamburger span:nth-child(1) {
    top: 30%;
}

.hamburger span:nth-child(2) {
    top: 60%;
}

.hamburger span:nth-child(3) {
    top: 90%;
}

/*=========================================
#drawer
=========================================*/
.drawer {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 130;
    width: 100%;
    height: 100vh;
    background-color: #91766E;
    transition: opacity .3s, visibility .3s;
}

.drawer.is-active {
    visibility: visible;
    opacity: 1;
}

.drawer-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 20px;
}

.drawer__list {
    display: flex;
    flex-direction: column;
    list-style: none;

    gap: 50px;
}

.drawer__link {
    color: #ffffff;
}

/* ===============================================
# 共通
=============================================== */
a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    background-size: cover;
    background-repeat: no-repeat;
    font-style: italic;
    vertical-align: middle;

    shape-margin: .75rem;
}

/*PC版設定。画像を横並びにする*/
.noSwiper {
    display: flex;
    gap: 3%;
    }
    /*スマホ用設定。swiperを使ってスライドショーに*/
    .swiper {
    max-width: 1000px;   
    }
    
    /*スライドショー構造全体の幅を決める。*/
    .swiper-slide section {
        width: 80%;
        margin: 0 auto;
        }

    #swiper-pagination-bullet {
    background-color: #91766E;
    /*スライド下の●の色や大きさを変える。*/
    }

    #swiper-button-prev,
    #swiper-button-next {
    color: #91766E;
    /*左右矢印の大きさや色、配置を変える。*/
    }

    /*PCの時はスライドショーを非表示(display:none;)に*/
    #sfswiper {
        max-width: 1000px;
        display: none;
        }
        /*スマホの時はPC用を非表示(display:none;)に。幅768pxで切り替え*/
        @media screen and (max-width:768px) {
        #sfswiper {
        display: block;
        }

        #noSwiper {
        display: none;
        }
    }

    @media screen and (max-width: 767px) {        
        .flex {
            display: block;
        }

        .service {
            background-image: url(../images/Spbg1.jpg);
        }

        .price {
            background-image: url(../images/Spbg2.jpg);
        }    
    
    }
    
    @media screen and (min-width: 768px) {
        .spstep{
            display: none;
        }
    }