@charset "UTF-8";



/*-------------------------------------------
introduction
-------------------------------------------*/
.introduction {
    display: flex;
    justify-content: center;
    align-items: end;
}

.introduction_girl_pc {
    max-width: 185px;
}

.introduction_boy_pc {
    max-width: 268px;
}

.introduction_text {
    width: 372px;
    margin: 0 48px 16px 48px;
    text-align: left;
}

.introduction_text p {
    margin: 0 auto 16px;
    line-height: 1.8;
}

.introduction_text span {
    font-weight: 700;
}

.picking-sp {
    display: none;
}

@media (max-width: 1024px) {
    .introduction {
        display: block;
    }

    .introduction_girl_pc, .introduction_boy_pc {
    display: none;
    }

    .picking-sp {
        display: block;
        max-width: 420px;
        margin: 0 auto;
    }

    .introduction_text {
        margin: 0 auto;
        width: 100%;
    }



}


/*--------------------
house 八多 鹿の子台
-----------------------*/
.backgroud img {
    width: 100%;
}
.house_box {
    display: flex;
    justify-content: center;
}

#hata {
    background-color: #FFF6F6;
    margin-top: -9px;
    margin-bottom: -2px;
    z-index: -1;
}

#shikanokodai {
    background-color: #FFFAEF;
    margin-top: -9px;
    margin-bottom: -2px;
    z-index: -1;
}
/*--------------------
house 八多
-----------------------*/
.box_li {
    max-width: 522px;
    margin: 0 16px;
    border-radius: 22px;
    text-align: center;
}

.box_image img {
    width: 100%;
    height: auto;
    border-radius: 22px 22px 0 0;
}
.box_info {
    margin-top: 28px;
}

.box_info h3 {
    width: fit-content;
    position: relative;
    margin: 0 auto 24px;
}

.hata_box_info h3::before {
    position: absolute;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    left: -22%;
    top: calc(48% - 1px); 
    border-top: solid 3px;
    border-right: solid 3px;
    transform: rotate(45deg) translateY(-50%);
    color: #E70616; 
}

.hata_features_box {
    display: grid;
    grid-template-columns: repeat(auto-fit, 200px);
    margin: 0 auto;
    justify-content: center;
    gap: 1px 8px;
}

.hata_features {
    width: fit-content;
    margin-bottom: 15px;
    position: relative;
    padding-left: 40px; /* アイコンのスペースを確保 */
}

.hata_features:nth-child(1)::before {
    background-image: url(../images/picking-hataExclusive.png); /* 1番目のアイコンのパス */
}
.hata_features:nth-child(2)::before {
    background-image: url(../images/picking-hataComparison.png); 
}

.hata_features:nth-child(3)::before {
    background-image: url(../images/picking-hataRest.png); 
}
.hata_features:nth-child(4)::before {
    background-image: url(../images/picking-hataCar.png); 
}

.hata_features:nth-child(5)::before {
    background-image: url(../images/picking-hataReservation.png); 
}

.hata_features::before {
    content: '';
    display: inline-block;
    width: 36px;
    height: 36px;
    background-size: cover;
    position: absolute;
    left: -2px;
    top: -6px;
} 

.shikanoko_features_box {
    display: grid;
    gap: 1px 8px;
    grid-template-columns: repeat(auto-fit, 200px);
    margin: 0 auto;
    justify-content: center;
    text-align: left;
    padding-bottom: 10px;
}

.wide {
    grid-column: span 2; /* 2列分のスペースを取る例 */
    max-width: 100%; /* 必要に応じて幅を調整 */
}

@media (max-width:1024px) {
    .house_box {
        display: block;
    }
    .box_li {
        width: 100%;
        margin: 0 auto 32px;
    }

  
}
@media (max-width:434px) {
    .hata_features_box {
        display: block;
        max-width: 208px;
    }
    .wide {
        grid-column: auto;
    }

    .shikanoko_features_box {
        display: block;
        text-align: center;
        max-width: 208px;
    }

    .hata_features {
        text-align: center;
    }
    .box_info {
        padding-bottom: 20px;
    }
}

.shikanoko_features:not(:last-child) {
    margin-bottom: 15px;
    position: relative;
    padding-left: 40px; /* アイコンのスペースを確保 */
    align-items: center;
    text-align: left;
}

.shikanoko_box_span {
    display: block;
}

/* アイコン */
.shikanoko_features:nth-child(1)::before {
    background-image: url(../images/picking-shikanokoComparison.png); /* 1番目のアイコンのパス */
}
.shikanoko_features:nth-child(2)::before {
    background-image: url(../images/picking-shikanokoRest.png); 
}

.shikanoko_features:nth-child(3)::before {
    background-image: url(../images/picking-shikanokoaWash.png);
}
.shikanoko_features:nth-child(4)::before {
    background-image: url(../images/picking-shikanokoParking.png); 
}
.shikanoko_features:nth-child(5)::before {
    background-image: url(../images/picking-shikanokoWalk.png); 
}
.shikanoko_features:nth-child(6)::before {
    background-image: url(../images/picking-shikanokoReservation.png); 
}

.shikanoko_features::before {
    content: '';
    display: inline-block;
    width: 36px;
    height: 36px;
    background-size: cover;
    position: absolute;
    left: 2px;
    top: -6px;
}

/*--------------------
本店（八多）鹿の子台point
-----------------------*/
.point {
    display: grid;
    gap: 102px 36px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin: 160px 0;
    justify-content: center;
}

.pointlist {
    background-color: #fff;
    border-radius: 20px;
}
.point-card {
    position: relative; /* 擬似要素を絶対位置で配置するため */
    height: 100%; /* 高さを統一 */
}

.point-card::before {
    content: "POINT";
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.4rem;
    color: #4B965D; /* テキスト色を緑に設定 */
    font-weight: 700;
    font-family: 'Caveat', cursive;
  }
  
  .point-card::after {
    content: attr(data-point);
    position: absolute;
    top: -33px; /* POINTの下に数字が来るように調整 */
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    color: #4B965D;
    font-size: 3.8rem;
    font-weight: 700;
    font-family: 'Caveat', cursive;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
  }


.features_title {
    margin: 28px auto 24px;
}

.features_text {
    text-align: left;
    padding: 0 6%;
    margin: 0 auto;
    width: fit-content;
    padding-bottom: 20px;
}

.detail_box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 36px;
    justify-content: center;
}

.detail_box_li {
    background-color: #fff;
    border-radius: 20px;
    height: auto;
    padding: 14% 0;
}

.detail_price {
    width: 302px;
    margin: 48px auto 0;
}

/* 八多タイトル下線 */
.detail_title_border_hata {
    border-bottom: 2px solid #FBE7EC;
    width: 68%;
    margin-right: auto;
    margin-left: auto;
}

.detail_pricetitle_hata, .detail_timetitle_hata  {
    width: fit-content;
    padding-bottom: 16px;
    position: relative;
    margin-right: auto;
    margin-left: auto;
}

/* タイトルアイコン 料金*/
.detail_pricetitle_hata::before {
    content: '';
    display: inline-block;
    background-image: url(../images/picking-price.png); 
    background-repeat: no-repeat;
    background-size: cover;
    width: 49px;
    height: 49px;
    position: absolute;
    top: -17px;
    left: -54px;
}

/* タイトルアイコン 時間*/
.detail_timetitle_hata::before {
    content: '';
    display: inline-block;
    background-image: url(../images/picking-time.png); /* 1番目のアイコンのパス */
    background-repeat: no-repeat;
    background-size: cover;
    width: 40px;
    height: 40px;
    position: absolute;
    top: -6px;
    left: -50px;
}

.detail_box_li h6 {
    margin-bottom: 16px;
}

.dot_hata {
    font-size: 3.4rem;
    color: #EF535F;
}

/*表；料金  */
.price_table1, .price_table2 {
    width: 238px;
    margin: 0 auto;
    text-align: left;
    padding-left: 7px;
}

.price_table1 td, .price_table2 td,  .price_table1 td, .price_table2 td  {
    padding-bottom: 8px;
}


/*表；時間 八多 */
.time_table_season {
    padding-right: 50px;
}




.time_table1 {
    max-width: 300px;
    margin: 48px auto 32px;
    padding-left: 17px;
    text-align: left;
}
.time_table2 {
    max-width: 300px;
    margin: 0 auto;
    padding-left: 17px;
}

.time_table_title {
    padding-bottom: 16px;
    text-align: left;
}

.hata_dot, .hata_dot_price {
    position: relative;
}
.hata_dot::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    top: 8px;
    left: -18px;
    background-color: #EF535F;
 } 
   
.hata_dot::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    top: 8px;
    left: -18px;
    background-color: #EF535F;
 }

.hata_dot_price::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    top: 8px;
    left: 22px;
    background-color: #EF535F;
 }

.time_table_time {
    line-height: 2;
    text-align: left;
}

@media (max-width: 768px) {
    .time_table_season {
        padding-right: 34px;
    }
    .point {
        margin: 120px 0;
    }
}

@media (max-width: 425px) {
    .shikanoko_area_span {
        display: block;
        padding: 8px 0 0;
    }

    .shikanoko_area::before {
        top: 36%;
    }
}
/*--------------------
鹿の子台：料金／時間
-----------------------*/


.time_table_title_shikanko1 {
    width: 92px;
    margin: 48px auto 32px;
}

.time_table_title_shikanko_holiday  {
    width: 152px;
    margin: 48px auto 32px;
    padding-left: 14px;
    padding-left: 39px;
}

/*表；時間 鹿の子台 定休日*/
.time_table_season_shikanoko2 {
    padding-top: 16px;
    padding-left: 40px;
}

.time_table_season_span {
    display: block;
    font-size: 1.2rem;
 }


.shikanoko_title {
    text-align: left;
    position: relative;
    margin-left: 21px;
}

.shikanoko_title::before {
    content: "";
    position: absolute;
    left: -21px;
    top: 13%;
    width: 7px;
    height: 23px; /* ラインの太さ */
    border-radius: 3.5px;
    background-color: #FA9825; /* ラインの色 */

}

.detail_price li {
    margin-bottom: 36px;
}

/* 鹿の子台タイトル下線 */
.detail_title_border_shikanoko {
    border-bottom: 2px solid #F8D9B4;
    width: 68%;
    margin-right: auto;
    margin-left: auto;
}

.detail_pricetitle_shikanoko, .detail_timetitle_shikanoko {
    width: fit-content;
    padding-bottom: 16px;
    position: relative;
    margin: 0 auto;
}

/* 鹿の子台タイトルアイコン 料金*/
.detail_pricetitle_shikanoko::before {
    content: '';
    display: inline-block;
    background-image: url(../images/picking-priceShikanoko.png); 
    background-repeat: no-repeat;
    background-size: cover;
    width: 49px;
    height: 49px;
    position: absolute;
    top: -17px;
    left: -54px;
}

/* 鹿の子台タイトルアイコン 時間*/
.detail_timetitle_shikanoko::before {
    content: '';
    display: inline-block;
    background-image: url(../images/picking-timeShikanoko.png); /* 1番目のアイコンのパス */
    background-repeat: no-repeat;
    background-size: cover;
    width: 40px;
    height: 40px;
    position: absolute;
    top: -6px;
    left: -50px;
}


.shikanoko_dot, .shikanoko_dot_price, .shikanoko_dot_holiday {
    position: relative;
}
.shikanoko_dot::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    top: 8px;
    left: -18px;
    background-color: #FA9825;
 } 

.shikanoko_dot_price::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    top: 8px;
    left: 22px;
    background-color: #FA9825;
 }

 .shikanoko_dot_holiday::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    top: 8px;
    left: 19px;
    background-color: #FA9825;
 }



/*--------------------
promise_box
-----------------------*/
#promise {
    text-align: center;
}

.promise_box {
    display: grid;
    grid-template-columns: repeat(auto-fit, 218px);
    margin: 0 auto;
    justify-content: center;
    gap: 72px 36px;
    width: 100%; 
    max-width: 1200px; 
} 
.promise_box figure {
    max-width: 218px;
}
.promise_box::after {
    content:"";
    display: block;
    width: 218px;
}

.promise_box figure figcaption {
    text-align: left;
}

.promise_box img {
    max-width: 139px;
    height: 104px;
    margin-bottom: 24px;

}
.promise_box li.left-align {
    margin-left: auto; /* 左側に寄せる */
}

@media (max-width: 499px) {
    .promise_box {
        gap: 36px;
    }
}
/*--------------------
picking_step
-----------------------*/
#step {
    text-align: center;
}


.picking_step {
    display: grid;
    grid-template-columns: repeat(auto-fit, 138px);
    justify-content: center;
    gap: 74px 69px;
}

.picking_step li {
    text-align: left;
    position: relative;
}

.picking_step li:not(:last-child)::after {
    position: absolute;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    right: -24px;
    top: 109px; 
    border-top: solid 3px;
    border-right: solid 3px;
    transform: rotate(45deg) translateY(-50%);
    color: #E70616; 
}

@media (max-width: 840px) {
    .box_li {
        width: 100%;
        margin: 0 auto 32px;
    }
 
    .detail_box {
        display: block;
    }

    .detail_box_li {
        width: 100%;
    }
    .detail_box_li:nth-child(1){
        margin-bottom: 32px;
    }
}
@media (max-width: 768px) {
    .detail_pricetitle_hata::before, .detail_pricetitle_shikanoko::before {
        width: 42px;
        height: 42px;
        top: -13px;
        left: -51px;
    }
    .detail_timetitle_hata::before, .detail_timetitle_shikanoko::before {
        width: 32px;
        height: 32px;
        top: -4px;
        left: -42px;
    }
}

@media (max-width: 425px) {
    .picking_step li:not(:last-child)::after {
        display: none;
    }
    
    .picking_step {
        display: block;
    }

    .picking_step img {
        width: 190px;
        margin-bottom: 16px;
    }

    .picking_step figure {
        text-align: center;
        margin-bottom: 36px;
    }

    .picking_step figcaption {
        text-align: left;
        width: 245px;
        margin: 0 auto;
    }
}


/* =====背景======= */

/* .container {
    background-image: url(../images/bg-shape6a@2x.png), url(../images/bg-shape6a@2x.png), url(../images/bg-shape8@2x.png);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: 124% 32%, -22% 62%, 120% 103%;
    background-size: 40%, 40%, 30%;
}

@media (max-width: 1205px) {
    .container {
        background-position: 123% 37%, -22% 63%, 117% 102%;
        background-size: 40%, 40%, 30%;
    }
}

@media (max-width: 1012px) {
    .container {
        background-position: 123% 35%, -15% 66%, 111% 102%;
        background-size: 46%, 34%, 30%;
    }
}

@media (max-width: 800px) {
    .container {
        background-position: 127% 35%, -27% 68%, 110% 101%;
        background-size: 55%, 46%, 30%;
    }
}

@media (max-width: 662px) {
    .container {
        background-position: 127% 35%, -27% 68%, 110% 101%;
        background-size: 55%, 46%, 30%;
    }
}

@media (max-width: 618px) {
    .container {
        background-position: 129% 48%, -44% 71%, 134% 102%;
        background-size: 56%, 60%, 55%;
    }
} */