@charset "utf-8";

section {
    margin-bottom: 2rem;
}

.station-title {
    text-align: center;
    padding-bottom: 20px;
}

.station-name {
    padding-bottom: 20px;
}

.catchcopy {
    text-align: center;
}

/* グーグルマップ */

iframe {
    width: clamp(320px, 90vw, 1160px);
    height: 400px;
    margin-top: 60px;
    border-radius: 20px;
}

.text dl {
    width: 100%;
    word-break: break-all;
}


h2 {
    margin-bottom: 4px;
    /* background-image: url(../images/hedline_yellow.png); */
    background-position: center;
    background-repeat: no-repeat;
    padding: 20px;
    color: #B45A27;
    margin-top: 60px;
}



h3 {
    margin: 0 auto;
    font-family: 'Kiwi Maru', serif;
    /* border-bottom: dotted 10px #e7d955;
    width: 150px; */
    text-align: center;
    padding: 10px;
}

h4 {
    font-size: 20px;
    font-family: 'Kiwi Maru', serif;
    text-align: center;
}

p {
    text-align: center;
}

/*
.center {
    text-align: center;
    margin: 0 auto;
} */

.up {
    margin-top: 30px;
}

.width {
    margin-bottom: 10px;
}

.width-row {
    margin-bottom: 40px;
    text-align: start;
}

.bottom {
    padding-bottom: 1.25rem;
}

/* たぬきとコメント */
.flex {
    gap: 1.25rem;
    width: clamp(320px, 100%, 1000px);
    margin: 0 auto;
    text-align: center;
}

.f-width {
    padding-bottom: 20px;
    /* max-width: 300px; */
    justify-content: center;
}


.none {
    display: none;
}

/*
.absolute {
    position: absolute;
} */

.sideways {
    position: relative;
    top: -110px;
    left: -100px;
    margin-bottom: -110px;
}

.sideways2 {
    position: relative;
    top: -120px;
    right: 115px;
    margin-bottom: -110px;
}


/* slick */
.slide-items {
    width: 100%;
    height: 100%;
}

.slide-items img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
}

.slick-dots li button::before {
    font-size: 30px;
}

.like {
    text-align: center;
}



.speech {
    position: relative;
    display: inline-block;
    margin: 1.25rem;
    padding: 1.25rem;
    border-radius: 20px;
    min-width: 120px;
    max-width: 100%;
    background: #fff;
    text-align: left;
    border: 2px solid #e7d955;

}


/* .speech:before {
    content: "";
    position: absolute;
    top: -12px;
    left: 45%;
    transform: rotate(90deg);
    margin-top: -15px;
    border: 15px solid transparent;
    border-right: 15px solid #fff;
} */

.speech p {
    margin: 0;
    padding: 0;
    text-align: start;
}

/* 画像と文字を重ねる */
.overlap {
    position: relative;
}

.overlap h3 {
    border-bottom: dotted 10px #e7d955;
    width: 150px;
}

/* .overlap h3 { */
/* position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); */
/* } */


/* 道の駅グルメとお土産のエリア */
.img {
    display: block;
    /* width: 320px; */
    width: 100%;
    margin: 0 auto;
    height: 320px;
    object-fit: cover;
}


/* 商品名の下に引く線の設定 */
.deco-h4::after {
    display: block;
    content: "";
    /* width: clamp(280px, 49vw, 380px); */
    height: 0;
    border-top: solid 3px #1ca10a;
    margin-top: 0.5rem;
}

.commentary {
    margin-bottom: 3rem;
}

.frameborder {
    border: dashed 3px #A7D28D;
}

/* 商品説明文の幅をボタンサイズに合わせる */
.com-wrap {
    width: clamp(280px, 50vw, 380px);
    word-wrap: break-word;
    margin-top: 20px;
    text-align: start;
}

.container {
    display: flex;
    flex-direction: column;
    margin: auto;
    gap: 20px;
}

.container img {
    border-radius: 20px;
}

.text {
    padding: min(20px, 5%, 30px);
    background-color: #ffffff;
    display: grid;
    align-content: center;
    justify-content: center;
    border-radius: 20px;
    word-wrap: break-word;
}

/* .favorite { */
/* border: dashed 3px #d6e6ae;
    background-color: #fff;
    border-radius: 20px;
    padding: 20px; */
/* } */



.favorite-text {
    text-align: center;
    margin-bottom: 10px;

}

/* ボタン */

.blog-btn {
    margin-top: 10px;
    font-size: clamp(12px, 5vw, 20px);
    align-items: center;
    position: relative;
    width: 240px;
    margin: 0 auto;
    padding: 10px;
    border: none;
    border-radius: 25px;
    background-color: #009900;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
    margin-bottom: 10px;
    text-align: center;

    display: block;
    margin: 0 auto;
}

.blog-btn_color {
    margin-top: 10px;
    font-size: clamp(12px, 5vw, 20px);
    align-items: center;
    position: relative;
    width: 240px;
    margin: 0 auto;
    padding: 10px;
    border: none;
    border-radius: 25px;
    background-color: #b6b8b4;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
    margin-bottom: 10px;
    text-align: center;

    display: block;
    margin: 0 auto;
}


/* .blog-btn::before { */
/* position: absolute;
    right: calc(2em + 0.5px);
    transform: translateX(50%);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #fff;
    content: ''; */



/* } */


/* .blog-btn ::after { */
/* transform: rotate(45deg);
    width: 5px;
    height: 5px;
    border-top: 3px solid #a7d28d;
    border-right: 3px solid #a7d28d;
    content: '';
    position: relative;
    left: -20px; */
/* } */

.blog-btn:hover {
    opacity: 0.7;
}

.blog-btn_color:hover {
    opacity: 0.7;
}


.blog-img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    height: auto;
}

/* アクティビティ画像 */
.activity {
    width: 100%;
    /* max-height: 320px; */
    max-height: 600px;
    object-fit: cover;
    /* object-fit: contain; */
    /* object-position: 80% 25%; */
    object-position: 60% 60%;
    margin-bottom: 30px;
    border-radius: 20px;
}

.item {
    color: #fffbf1;
    background-color: #1ca10a;
    width: clamp(280px, 49vw, 380px);
    border-radius: 20px;
    padding: 10px;
    margin: 0 auto;
    margin-bottom: 20px;
    text-align: center;
}

dl {
    word-wrap: break-word;
}

dd {
    line-height: 1.5rem;
    margin-bottom: 1.25rem;
}

dt {
    float: left;
    line-height: 1.5rem;
    margin-bottom: 1.25rem;
}


/* アイコンの幅調整 */
.icon-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 300px;
    justify-items: center;
    padding-top: 10px;
}

.activity-text {
    word-wrap: break-word;
    margin-top: 20px;
    text-align: start;
}

.icon-wrapper img {
    width: 30px;
    height: 30px;
}



/* 星を黄色にする */
.yellow {
    color: #fa670c;
}

.headline-activity-place {
    margin-top: 50px;

}

/* roadstation-frame{
    glid
} */

.roadstation-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    /* width: 195px; */
    /* margin: 0 auto; */
    padding: 25px 45px;
    border: none;
    border-radius: 25px;
    background-color: #a7d28d;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
    margin-bottom: 10px;
    margin-top: 15px;
}


.roadstation-name ::before {
    position: absolute;
    right: calc(21.5px);
    transform: translateX(50%);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #fff;
    content: '';
}

.roadstation-name ::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    /* margin-left: 10px; */
    border-top: 5px solid #a7d28d;
    border-right: 5px solid #a7d28d;
    content: '';
    position: relative;
    left: -20px;

}

.roadstation-name :hover {

    opacity: 0.7;
}

.roadstation-name a {
    display: flex;
    justify-content: center;
    align-items: center;
}


.blog {
    text-align: center;

}



/* PCグルメとお土産エリアを横に並べる */

@media screen and (min-width:970px) {
    .container {
        flex-direction: row;
        align-items: center;
    }

    .commentary .reverse {
        flex-direction: row-reverse;
    }

    .container>.text {
        flex: 2;
        min-height: 500px;
    }

    .container>.img {
        flex: 1;
    }

    /* 地図と基本情報エリア */

    .container>iframe {
        flex: 8;
        width: 50vw;
    }

    .speech {
        position: relative;
        display: inline-block;
        margin: 1.25rem;
        padding: 1.25rem;
        border-radius: 20px;
        min-width: 120px;
        max-width: 100%;
        background: #fff;
    }

    /* .speech:before {
        content: "";
        position: absolute;
        top: -290px;
        left: -27px;
        margin-top: 45%;
        transform: rotate(0deg);
        border: 15px solid transparent;
        border-right: 15px solid #fff; */

    /* .roadstation-name {

            display: inline-block;
            text-align: center;

            background-color: #d6e6ae;
            border-radius: 50px;
            margin: auto;
            margin-top: 20px;
            padding: 15px;
            height: 65px;
            width: clamp(280px, 50vw, 280px);
        } */
}

/* グルメ画像など指定 */
@media screen and (min-width:425px) {
    .img {
        width: 100%;
        height: 400px;
        object-fit: cover;
        object-position: center;
    }
}

/* アイコンの幅設定 */
@media screen and (min-width:768px) {
    .icon-wrapper {
        grid-template-columns: repeat(8, 1fr);
        gap: 10px;
    }

    /* .roadstation-name {

            display: inline-block;
            text-align: start;

            background-color: #d6e6ae;
            border-radius: 50px;
            margin: auto;
            margin-top: 20px;
            padding: 15px;
            height: 65px;
            width: clamp(280px, 50vw, 280px); */

}


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

    h2 {
        margin-bottom: 14px;
    }

    h3 {
        font-size: 32px;
    }

    /* h3横の画像設定 */
    .none {
        display: block;
    }

    .sideways-off {
        position: static;
        margin-bottom: 0;
    }

    /* 吹き出しを横に並べる */
    .flex {
        display: flex;
        align-items: center;
    }

    .map {
        display: flex;
        gap: 20px;
        margin-bottom: 50px;
    }

    .flex2 {
        align-items: stretch;
    }

    /* グルメ画像など指定 */
    .img {
        min-width: 500px;
        min-height: 500px;
    }

    /* 地図設定 */
    iframe {
        margin-top: 0;
        height: auto;
    }

    .harf {
        width: 50%;
    }

    /*
    .roadstation-name {

        display: inline-block;
        text-align: start;

        background-color: #d6e6ae;
        border-radius: 50px;
        margin: auto;
        margin-top: 20px;
        padding: 15px;
        height: 65px;
        width: clamp(280px, 50vw, 280px);
        /* width: 550px; */
    /* } */
}