@charset "UTF-8";

.shop-about {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 70px;
}

.sub-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform : translateX(-50%);
    font-size: 3.2rem;
    font-weight: 700;
}
#topic-pass {
    position: absolute;
    top: 10px;
    left: 6.14%;
}
#topic-pass ul {
    display: flex;
    padding: 6px 6.14%;
    font-size: 1rem;
    width: 195px;
}

#topic-pass ul li {
    padding-right: 2.6rem;
}
.topic-passHome a {
    text-decoration: none;
}

.topic-passHome {
    position: relative;
}

.topic-passHome::after {
    content: "\03e";
    position: absolute;
    right: 10px;
} 

/* -----------------
イントロダクション
-------------------- */
.shop_introduction {
    max-width: 886px;
}

.shop_introduction_block {
    margin: 0 auto;
}

.introduction_text {
    text-align: left;
    line-height: 1.8;
}

.shop_introduction figure {
    max-width: 390px;
    margin: 0 auto;
}

.shop_introduction figure img {
    display: block;
}


/*--------------------
本店（八多）背景ピンク
-----------------------*/
#hatashop {
    margin-top: -9px;
    margin-bottom: -2px;
    z-index: -1;
}

/*--------------------
本店（八多）
-----------------------*/
.hatashop_box {
    display: flex;
    gap: 4%;
    justify-content: center;
}

.hatashop_box img {
    max-width: 340px;
}

.shop_tell {
    display: block;
    color: #4B965D;
    font-size: 3.2rem;
    line-height: 2.6;
    font-weight: 700;
    width: fit-content;
    margin: 0 auto;
    background-image: url(../images/shop_tel.png);
    background-size: 44px;
    background-repeat: no-repeat;
    padding-left: 43px;
    background-position: 2px 24px;
}

.hatashop_reservation {
    margin-top: 42px;
}

.hatashop_reservation p {
    margin-bottom: 16px;
}

.shikanokoshop_reservation {
    max-width: 502px;
}

.shikanokoshop_reservation p {
    text-align: left;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .hatashop_box {
        display: block;
    }
    .hatashop_box img {
        width: 100%;
    }
    .shikanokoshop_reservation {
        margin-right: auto;
        margin-left: auto;
    }
}

/*--------------------
商品一覧
-----------------------*/

.shop_goods {
    display: grid;
    gap: 1%;
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
    justify-content: center;
    margin-bottom: 56px;
}

.goods_list {
    background-color: #fff;
    border-radius: 20px;
    padding: 32px 20px;
}
.goods_list_card {
    height: 100%; /* 高さを統一 */
}

.goods_list_text h4 {
    margin: 32px auto;
}

.goods_price {
    width: 208px;
    text-align: left;
    margin: 0 auto;
}

.goods_price dd {
    margin-bottom:16px;
}

.postage {
    margin-left: 100px;
}

.picking_detail_note {
    width: fit-content;
    text-align: left;
    margin: 0 auto;
}

.delivery_note {
    text-align: left;
}

.shikanoko_area_span {
    font-size: 1.4rem;
}

@media (max-width: 768px) {
    .goods_list_text h4 {
        margin: 24px auto;
    }

    .pack_bottom {
        margin-bottom: 36px;
    }

    .delivery_note {
        margin-bottom: 16px;
        margin-right: auto;
        margin-left: auto;
        width: 87%;
    }

    .shikanoko_area_span {
        font-size: 1.2rem;
    }
}

/*--------------------
品種 いちご狩りはこちら 破線ボタン
-----------------------*/
.btn_waveline {
    display: flex;
    justify-content: center;
    gap: 74px;
    margin: 100px auto;
}

.btn_googlemap {
    margin: 0 auto 64px;
}
@media (max-width:557px) {
    .btn_waveline {
        display: block;
        margin: 74px auto;
    }

    .btn_waveline_list {
        width: fit-content;
        margin: 0 auto 60px;
    }
}

/*--------------------
アクセス
-----------------------*/

.access_map {
    max-width: 622px;
    margin: 74px auto 4px;
    box-shadow: 0px 3px 10px rgba(253, 123, 123, 0.16);
    border-radius: 22px;
}

.access_flex {
    display: flex;
    justify-content: center;
    gap: 32px;
}

.access_box {
    width: 50%;
    margin: 62px 0 120px;
    padding: 6% 4% 3%;
    border-radius: 22px;
}
.access_text {
    text-align: left;
}
.access_box h4 {
    margin-bottom: 32px;
}
.access_box h5 {
    margin: 42px 0 24px;
}
.map_addres {
    text-align: left;
}

.access_car {
    margin-bottom: 32px;
} 

.access_train {
    margin-bottom: 64px;
} 

.access_list {
    margin-bottom: 16px;
}

.access_list li {
    margin-bottom: 4px;
}

.access_note {
    text-align: left;
    width: fit-content;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .access_flex {
        display: block;
    }
    .access_box {
        width: 100%;
        margin: 62px 0 -27px;
        padding: 11% 4% 5%;
    }

    .access_box_inner {
        max-width: 373px;
        margin: 0 auto;
    }
    .access_map {
        margin: 42px auto 42px;
    }
}
.map_red {
    background-image: url(../images/icon-map-red.png);
    background-repeat: no-repeat;
    background-size: 17px;
    padding-left: 27px;
    line-height: 18px;
}

.car_red {
    background-image: url(../images/icon-car-red.png);
    background-repeat: no-repeat;
    background-size: 18px;
    padding-left: 27px;
    line-height: 18px;
}

.train_red {
    background-image: url(../images/icon-train-red.png);
    background-repeat: no-repeat;
    background-size: 18px;
    padding-left: 23px;
    line-height: 20px;
    background-position: 0px 1px;
}


.map_orange {
    background-image: url(../images/icon-map-orange.png);
    background-repeat: no-repeat;
    background-size: 17px;
    padding-left: 27px;
    line-height: 18px;
}

.car_orange {
    background-image: url(../images/icon-car-orange.png);
    background-repeat: no-repeat;
    background-size: 18px;
    padding-left: 27px;
    line-height: 18px;
}

.train_orange {
    background-image: url(../images/icon-train-orange.png);
    background-repeat: no-repeat;
    background-size: 18px;
    padding-left: 23px;
    line-height: 20px;
    background-position: 0px 1px;
}

/*--------------------
鹿の子台店への行き方（徒歩での最短距離　階段あり）
-----------------------*/
.sp_br {
    display: none;
}
@media (max-width: 1120px) {
    .sp_br {
        display: block;
        margin-top: 8px;
    }
    .shikanoko_title {
        line-height: 1.3;
    }
}

.direction {
    display: grid;
    grid-template-columns: repeat(auto-fit, 256px);
    justify-content: center;
    gap: 43px;
}

.direction figure {
    text-align: left;
}

.direction figure img {
    margin-bottom: 8px;
    border-radius: 22px;
}

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

.direction 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: #F99B2C; 
}

@media (max-width: 590px) {
    .direction li:not(:last-child)::after {
        display: none;
    }
    .direction {
        gap: 32px;
    }
}


/*--------------------
農園概要
-----------------------*/

.farmtable {
    max-width: 830px;
    text-align: left;
}

.about-farm table {
    width: 100%;
    margin: 72px auto 0;
    border-collapse: collapse;
    position: relative;   
}

.about-farm table th {
    width: 26%;
    text-align: center;
    padding: 0 2.1%;    
}

.about-farm table td{
    width: 74%;
    padding: 20px 4%;
}

.farmtable-list, .farmtable-top {
    border-bottom: dashed 1.5px rgba(240,90,101,0.5);
}

.farmtable-top {
    border-top: solid 1.5px rgba(240,90,101,0.5);
}    

.farmtable-bottom {
    border-bottom: solid 3px rgba(240,90,101,0.5);
} 

.about-farm table::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    border-top: solid 3px rgba(240,90,101,0.5);
    left: 0px;
    top: -9px;
    border-radius: 3.5px;
}

.pickup-box {
    margin-bottom: 180px;
}

.td_address {
    margin: 8px 0;
}
.address_br {
    display: none;
}

@media (max-width: 590px) {
    .farmtable {
        font-size: 1.4rem;
    }

    .address_br {
        display: block;
    }
}