@charset "UTF-8";

/******************
セレクタ設定方法です。
各ページのbodyタグにページタイトルのidタグを設定してください。
CSSはそのidに続けてclass名を書いてください。
以下参考です。
#access {}
#access .googlemap {}
#access .accordion p {}
といった具合にお願いいたします。
*******************/
/****************************************

プラン

*****************************************/
/******************
横スクロール
*******************/

.top-tab img {
    margin-top: 60px;
    width: 192px;
    height: 300px;
}

/****************************************
プラン共通設定
*****************************************/

body {
    position: relative;
    background-color: #EEF9FC;
    text-align: center;
}

main {

    margin-inline: auto;
}

li {
    text-align: left;
}



.first-view .main-bg {

    background: url(../images/plan/plan-top.webp) no-repeat center/cover;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 33.5rem;

}

img {
    line-height: 0;
}

h2 {
    color: #E4D5BA;
    font-size: clamp(3rem, 1.944rem + 4.507vw, 6rem);
    position: absolute;
    top: 16.75rem;
    left: 0;
    right: 0;
}

/* .top-margin {
    margin-top: 140px;

} */


header {
    height: 33.5rem;
}

li {
    text-align: left;
}




.line {
    border-left: 0.5px solid #000;
    /* 線の太さ、種類、色をまとめて指定 */
    /* padding-left: clamp(0.125rem, -0.821rem + 4.038vw, 2.813rem); */
    padding-left: 14px;
    padding-right: 15PX;
    /* ラインの左に余白をつける */
    margin-left: 15px;
}

p {
    /* background-color: #42ef27; */
    font-size: clamp(0.625rem, 0.493rem + 0.563vw, 1rem);
    line-height: 1.4em;
    text-align: left;

}

.flex-container {
    width: 100%;
}

.plan-titile {
    display: flex;
    width: 100%;
}

.plan-title-pic {
    width: calc(100%/4);
    line-height: 0;
    margin-top: 60px;

}

.plan-title-pic>img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 3/2;
}



.last-tex {
    margin-bottom: 100px;
}

/*****************
パンくず
*****************/
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 auto;
    margin-top: clamp(0.5rem, 0.346rem + 0.657vw, 0.938rem);
    width: 90%;

}


.breadcrumb li:not(:last-of-type)::after {
    content: "›";
    margin: 0 .6em;
    /* 記号の左右の余白 */
    color: #777;
    /* 記号の色 */
}


.main-content {

    margin-left: 16px;
    margin-right: 16px;
}

/******************
夫婦プラン
*******************/

.plan-title-pic>img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 3/2;
}

.morning {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    margin-left: 10%;
    /* margin-right: 5%;
    gap: 2%;
    margin: 25px auto 20px; */
    aspect-ratio: 7 / 2;
}

.morning-txt {
    margin: 0 auto;
    margin-left: 10%;
    margin-right: 0;
    margin-top: 16px;
}

.morning-flex {
    display: flex;
    flex-direction: column-reverse;

}

.morning-txt p {
    /* padding-left: 45px; */
    text-align: left;
}

.morning-pic1 {
    width: calc(50% / 2);
    line-height: 0;
    flex-basis: 48%;
}

.morning-pic1>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.time-img {
    text-align: left;
    width: calc(100% / 3);
    /* margin-top: clamp(3.75rem, 4.300rem + -2.347vw, 2.188rem); */
    line-height: 0;
    padding-top: clamp(0.938rem, 0.607rem + 1.408vw, 1.875rem);
}

.time-img>img {
    width: 100%;
}


.fishing {
    display: flex;
    flex-direction: column-reverse;
}

.fishing-pic {
    flex-basis: 65%;
    aspect-ratio: 7 / 2;
    margin-left: 10%;
    margin-top: 15px;
}


.fishing-pic>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fishing-txt {
    flex-basis: 40%;
    margin: 0 auto;
    margin-left: 10%;
    margin-right: 0;
    margin-top: 16px;
}

.fishing-txt p {
    /* padding-left: 45px; */
    text-align: left;
}




.pottery {
    display: flex;
    flex-direction: column;
    margin-left: 10%;
}

.pottery-pic-box {
    display: flex;
    flex-basis: 65%;
    gap: 4%;

}

.pottery-pic {
    margin-top: 15px;
    width: 50%;
    aspect-ratio: 5/3;
}

.pottery-pic>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.dinner>p {
    margin-left: 10%;
    margin-top: 15px;
}

.dinner-pic {
    margin-left: 10%;
    margin-top: 15px;
}

.dinner-pic>img {
    width: 100%;
}



.bonfire {
    margin-left: 10%;
    margin-top: 15px;
}

.bonfire-flex {
    display: flex;
    gap: 4%;
}

.bonfire-flex:nth-child(2) {
    flex-direction: row-reverse;
    margin-top: 2%;
}

.bonfire-pic {
    flex-basis: 50%;
}

.bonfire-pic>img {
    width: 100%;
}

.bonfire-txt {
    flex-basis: 50%;
    align-self: center;
}



.text-box>p {
    text-align: center;
    padding-right: 1rem;
}

.text-box {
    position: relative;
    display: inline-block;
    /* 必要なら調整 */
    padding: 3rem 0 3rem 1rem;
    line-height: 1.8;
    /* margin-left: 15px; */
    background-image: url(../images/plan/text-box.svg);
    background-position: right bottom;
    background-repeat: no-repeat;
    width: 98%;

}



footer {
    margin-top: 100px;
}








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

    /****************************************

    PCサイズはこちらに記述してください。

    *****************************************/
    /******************
    全体への設定
    *******************/

    .first-view {
        height: 33.5rem;
    }

    
    .morning {

        margin-right: clamp(0.125rem, -0.821rem + 4.038vw, 2.813rem);
        ;
        width: 100%;

        /* background-color: #dc0d0d; */
        display: flex;
        justify-content: flex-end;
        margin-right: 5%;
        gap: 2%;
        margin: 25px auto 0px;
        aspect-ratio: 7 / 1;
    }

    .morning-txt {
        margin-right: 5%;
    }

    .morning-pic1 {
        flex-basis: auto;
    }



    .morning-flex {
        display: block;

    }



    .line {
        margin-left: 30px;
    }

    .fishing {
        flex-direction: row;
        margin-top: 16px;
    }

    .fishing-pic {
        flex-basis: 65%;
        margin-left: 0;
        margin-top: 0;
    }

    .fishing-pic>img {
        width: 100%;
        height: auto;

    }

    .fishing-txt {
        margin-top: 0;
        margin-right: 5%;
        margin-left: 11%;
    }

    .pottery {
        flex-direction: row-reverse;
        margin-left: 11%;
        margin-top: 16px;
    }

    .pottery-txt {
        flex-basis: 45%;
        padding-right: 5%;
    }

    .pottery-pic {
        margin-top: 0;
        width: 100%;
        height: 88%;
        object-fit: cover;
        line-height: 0;
    }

    .pottery-pic-box {

        height: 50%;
    }

    .plan-title-pic {
        margin-top: 140px;

    }

    .dinner-pic {
        margin-left: 11%;
    }

    .dinner>p {
        margin-left: 11%;
    }


    .bonfire {
        display: flex;
        gap: 4%;
        margin-left: 11%;

    }

    .bonfire-flex {
        gap: 0;
    }

    .bonfire-pic {
        flex-basis: 70%;
    }

    .bonfire-flex:first-of-type {
        flex-basis: 50%;
    }

    .bonfire-flex:nth-child(2) {
        flex-direction: row;
        margin-top: 0;
        flex-basis: 50%;
    }

    .bonfire-txt {
        padding-left: 8%;
    }


    .text-box {
        padding: 4rem 2rem 4rem 2rem;
        line-height: 1.8;
        background-image: url(../images/plan/text-box-pc.svg);
        background-position: right bottom;
        background-repeat: no-repeat;
        width: 98%;
    }

    .ski-pic>img {
        width: 100%;
        object-position: 80% 23%;
        object-fit: cover;
        height: 200px;
    }

    .text-box>p {
        text-align: center;
        padding: 0 4% 0 4%;
    }

    footer {
        margin-top: 180px;
    }

}