@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;
}

li {
    text-align: left;
}


h2 {

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

header>nav>ul {
    margin-top: 150px;
}



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

header {
    height: 33.5rem;
}

.first-view {
    height: 33.5rem;
}

.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;
    /* 記号の色 */
}


.first-view .main-bg {
    background: url(../images/access/access-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;
}


/******************
googleMAP
*******************/
.map-grayscale {
    height: 20rem;
    width: 90%;
    filter: grayscale(100%);
}

.g-mapcancel {
    margin-left: -5%;
    margin-right: -5%;
    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;
}

/******************
住所
*******************/
dl .flex:nth-last-child(1) {
    margin-top: clamp(0.75rem, 0.618rem + 0.563vw, 1.125rem);
}

dl {
    margin-top: clamp(1.813rem, 0.118rem + 7.23vw, 6.625rem);
    margin-left: clamp(1.063rem, -1.622rem + 11.455vw, 8.688rem);
    margin-bottom: clamp(4rem, 3.230rem + 3.286vw, 6.188rem);
    line-height: 1.4rem;

}

dl dt,
dl dd address,
dl dd a {
    font-size: 16px;
}

dl dd address {
    text-align: left;
}

dl dt {
    text-align: right;
    width: calc(100% / 5);
}

/******************
アコーディオン
*******************/
/*アコーディオン全体*/

section .ac-menu p {
    line-height: 2rem;

}

.bdline {
    border-bottom: solid 1px #000;
}

div .ac-menu {
    width: 100%;
    background-color: #687C62;

}

.accordion-area {
    list-style: none;
    max-width: 900px;
    margin: 0 auto;
    margin-bottom: clamp(7.688rem, 4.034rem + 15.587vw, 18.063rem);
}

.accordion-area li {
    margin: 0;
}

.box p {
    text-align: left;
}



h3 {
    text-align: center;
    align-items: center;


}

.title {
    position: relative;
    /*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size: 1rem;
    font-weight: normal;
    padding: 3% 3% 3% 0px;
    transition: all .5s ease;
    /* width: 155px; */
    text-align: left;
    margin: 0 auto;
    color: #fff;
    height: 70px;
    display: flex;
    justify-content: center;

}

/*アイコンの＋と×*/
.title::before,
.title::after {
    position: absolute;
    content: '';
    width: 15px;
    height: 2px;
    background-color: #fff;


}

.title::before {
    top: 48%;
    right: 55px;
    transform: rotate(0deg);


}

.title::after {
    top: 48%;
    right: 55px;
    transform: rotate(90deg);

}

/*　closeというクラスがついたら形状変化　*/

.title.close::before {
    transform: rotate(45deg);

}

.title.close::after {
    transform: rotate(-45deg);

}

/*アコーディオンで現れるエリア*/
.box {
    display: none;
    /*はじめは非表示*/
    background: #EEF9FC;
    margin: 0 auto;
    padding: clamp(1.313rem, 1.026rem + 1.221vw, 2.125rem);
    padding-left: clamp(1.5rem, -3.364rem + 20.751vw, 15.313rem);
    padding-right: clamp(1.5rem, -3.364rem + 20.751vw, 15.313rem);
    width: 100%;
}

.box p:nth-child(2) {
    padding-top: 18px;
}




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

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

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

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

    .sp-only {
        height: 33, 5rem;
    }

    .g-mapcancel {
        margin-left: 0;
        margin-right:0;
        width: 100%;
    }

    iframe {
        width: 100%;
    }


.accordion-area {
    width: 96%;
}

.map-grayscale {
   max-width: 900px;
    width: 96%;
}


}