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



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

周辺観光

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

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

p {
    line-height: 1.4rem;
}

a:hover {
    color: #687C62;
}


h2 {

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



.zen {
    font-family: "Zen Old Mincho", serif;
}

header {
    height: 33.5rem;
}


/* -----ヘッダーの上の余白----- */
header>nav>ul {
    margin-top: 150px;
}

.first-view {
    height: 33.5rem;
}


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

p {
    line-height: 1.4rem;
}

li {
    text-align-last: left;
}




h2 {

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



.zen {
    font-family: "Zen Old Mincho", serif;
}

header {
    height: 33.5rem;
}

.first-view {
    height: 33.5rem;
}


.first-view .main-bg {
    background: url(../images/sightseeing/sightseeing-top.webp) no-repeat center/cover;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 33.5rem;
}

.main-content {
    max-width: 1036px;

    margin: 0 auto;
}


.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-top: clamp(0.5rem, 0.346rem + 0.657vw, 0.938rem);
}

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


/******************
観光情報
*******************/
* {
    box-sizing: border-box;
}

.content_area {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0;
}

.tab-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 75px;
    margin-top: 100px;
    border-left: 1px solid #000;

}


.tab {
    font-weight: 500;
    text-align: center;
    width: calc(100% / 3);
    padding: 10px;
    background-color: #EEF9FC;
    cursor: pointer;
    border-right: solid #000 0.5px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* flex-grow: ; */
}


.tab.active {
    background-color: #EEF9FC;
}

.tab p {
    text-align: left;

}

.item2 {
    flex-basis: 50%;
}

.flex p {
    align-self: flex-end;
    padding-bottom: 8px;
    letter-spacing: 0.15rem;
}

.content {
    display: none;
    /*必須*/
}

.content.show {
    display: block;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    gap: 2.5%;
    flex-wrap: nowrap;


}


.fig-line {
    border-bottom: #000 solid 1px;
    margin-top: 65px;
}

.fig-line:first-of-type {
    margin-top: 0;
}

.fig-line img {
    text-align: left;
}

.tab-con {
    width: 100%;
    position: relative;
    justify-content: center;

}

h4 {
    padding: 15px 0 25px 0;
    text-align: left;
    letter-spacing: 0.15rem;
}

.fig-img img {
    width: 100%;
}

dd {
    text-align: left;
    padding-top: 15px;
    line-height: 2.2rem;
    letter-spacing: 0.16rem;
    font-size: 0.87rem;
    height: 210px;
}

dd p {
    line-height: 1.2rem;
    font-size: 0.87rem;
}

dd p:nth-last-child(1) {
    padding-top: 0.8rem;
}


.moreLinkText {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    letter-spacing: 0.5rem;
    text-align: right;
    padding-right: 35px;
    position: absolute;
    bottom: 0;
    right: 0;
}

/*ホバーしたときに下線矢印も同時に色を変える*/
.moreLinkText:hover .lineArrow {
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
}

.moreLinkText:hover {
    color: #687C62;
    ;
}

.lineArrow {
    width: 60%;
    height: 15px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    /*傾きを調節*/
    transform: skew(45deg);
    /*下線矢印をテキストに合わせてうまい具合にはめる*/
    margin: -9px 100px 0 112px;

}

.margin-top {
    margin-top: 65px;
}

.margin-top-mb {
    margin-top: 65px;
}

.fig-line img {
    width: 50px;
}

/******************
googleMAP
*******************/

.map-grayscale {
    height: 30rem;
    width: 100%;
    filter: grayscale(100%);
    margin-bottom: 140px;
    margin-top: 70px;
}

.g-mapcancel {

    margin-top: clamp(2.063rem, 0.522rem + 6.573vw, 6.438rem);
}

/* .g-mapcancel iframe {
    top: -150px;
    height: calc(100% + 150px + 150px);
} */


element.style {
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
}

.gm-style .place-card-medium {
    display: none;
}






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

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

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

    *****************************************/
    /******************
    全体への設定
    *******************/
    .tab {
        font-weight: 500;
        text-align: center;
        width: calc(100% / 5);
        padding: 10px;
        background-color: #EEF9FC;
        cursor: pointer;
    }

    .tab-container {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .tab:hover {
        color: #687C62;
    }

    .content.show {
        display: block;
        /*必須*/
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        flex-direction: row;
        gap: 2.5%;
        width: 95%;
        margin: 0 auto;

    }

    .tab-con {
        width: calc(95% / 3);
        height: 550px;
    }

    header {
        width: 25%;

    }

    body>div>main {
        width: 75%;
    }


    .item2 {
        flex-basis: calc(100% / 5);
    }




    .map-grayscale {
        height: 40rem;
        width: 100%;
        filter: grayscale(100%);
        margin-bottom: 140px;
        margin-top: 70px;
    }

    .moreLinkText {
        padding-bottom: 40px;
    }

    .margin-top-mb {
        margin-top: 0;
    }
}

/* コンテンツのモバイル版マージン設定する */