@charset "UTF-8";
.contents { overflow: hidden; }
/*img{width: 100%;}*/

figure{position: relative;}

.f-50{font-size: 50%;}
.f-60{font-size: 60%;}
.f-70{font-size: 70%;}
.f-80{font-size: 80%;}
.f-90{font-size: 90%;}
.f-110{font-size: 110%;}
.f-120{font-size: 120%;}
.f-130{font-size: 130%;}
.f-140{font-size: 140%;}
.f-150{font-size: 150%;}
.f-160{font-size: 160%;}
.f-170{font-size: 170%;}
.f-180{font-size: 180%;}
.f-190{font-size: 190%;}
.f-200{font-size: 200%;}
.f-210{font-size: 210%;}
.f-220{font-size: 220%;}
.f-230{font-size: 230%;}
.f-240{font-size: 240%;}
.f-400{font-size: 400%;}

.f-12px{font-size: 12px;letter-spacing: 0.04em;}

.caption {
font-size: 10px;
}
figure + .caption {
padding-top: 0.5em;
}

sup{
font-size: 10px;
vertical-align: super;
}
span.note {
display: inline-block;
font-size: 10px;
padding-top: 2em;
}

#main_Wrap {
position: relative;
background: url(../img/main_bg.jpg) no-repeat center center / cover;
aspect-ratio: 7/1;
}
#main_Wrap h2 {
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
margin: 0 auto;
text-align: center;
font-size: clamp(24px,3.333333333333333vw,50px);
color: #fff;
letter-spacing: 0.12em;
font-family: "Cinzel", serif;
}


.map_box {
margin: 80px auto 100px;
}
.map_box a.gm_btn {
display: block;
margin: 48px auto 0;
color: #345a78;
border: 1px solid #345a78;
width: 320px;
padding: 20px;
box-sizing: border-box;
transition: .3s;
}
.map_box a.gm_btn span {
display: flex;
align-items: center;
justify-content: center;
}
.map_box a.gm_btn span::before {
content: "";
width: 0.75em;
aspect-ratio: 4/5;
background: url(../img/icon_map.png) no-repeat center center;
background-size: contain;
margin-right: 1em;
transition: .3s;
}

/*hover*/
.map_box a.gm_btn:hover {
color: #fff;
border: 1px solid #345a78;
background: #345a78;
}
.map_box a.gm_btn:hover span::before {
background: url(../img/icon_map_w.png) no-repeat center center;
background-size: contain;
}
.gallery_Area {
justify-content: space-between;
width: 94%;
max-width: 800px;
margin: 60px auto 100px;
background: #fff;
border: 1px solid #646b74;
box-sizing: content-box;
}
.gallery_Area figure{
width: 45%;
margin: 0;
}
.gallery_Area > div{
width: 55%;
border-left: 1px solid #646b74;
}
.gallery_Area h3{
text-align: center;
font-size: clamp(18px,1.714285714285714vw,24px);
letter-spacing: 0.16em;
color: #fff;
padding: 5% 0;
background: #0d205c;
border-bottom: 1px solid #646b74;
}

.gallery_Area .addres_inner{
display: flex;
justify-content: space-between;
flex-direction: column;
text-align: center;
/* padding: 8% 0; */
padding: clamp(5%, 5.5%, 6.5%) 0;
gap: 1em 0;
}
.gallery_Area .addres_inner p{
font-size: clamp(16px,1.428571428571429vw,20px);
letter-spacing: 0.1em;
line-height: 1.6;
color: #0d205c;;
padding: 0 0 3%;
}
.gallery_Area .addres_inner p span {
display: inline-block;
/*background: #0d205c;*/
padding: 0.5em 1em;
/*color: #fff;*/
color: #0d205c;
font-size: 1.2em;
border-top: 1px solid #0d205c;
border-bottom: 1px solid #0d205c;
}
.gallery_Area .addres_inner .gmap_btn {
margin: 2% 0 0;
display: flex;
justify-content: center;
transition: 0.3s;
}
.gallery_Area .addres_inner .gmap_btn .gmap_btn_inner {
border: 1px solid #0d205c;
padding: 15px 10px;
color:#FFF;
max-width: 320px;
width: 70%;
background: #0d205c;
padding: 22px 15px;
transition: .3s;
/* margin-top: 3%; */
}
.gallery_Area .addres_inner .gmap_btn .gmap_btn_inner svg{
width: 16px;
transition: 0.3s;
fill: #FFF;
vertical-align: bottom;
}
.gallery_Area .addres_inner .gmap_btn .gmap_btn_inner:hover{
background: #FFF;
color: #0d205c;
}
.gallery_Area .addres_inner .gmap_btn .gmap_btn_inner:hover svg{ fill: #0d205c;}

/*=========================================================================================================
tab
=========================================================================================================*/
@media screen and (min-width: 768px) and (max-width: 1024px) {






}

/*=========================================================================================================
sp
=========================================================================================================*/
@media screen and (max-width: 767px) {

#main_Wrap {
    aspect-ratio: 4/1;
}
.map_box {
    margin: 60px auto 60px;
}
.map_box a.gm_btn {
    margin: 40px auto 0;
}
.gallery_Area {
width: 94%;
margin: 40px auto 50px;
flex-direction: column;
}
.gallery_Area figure{
width: 100%;
max-width: 100%;
}
.gallery_Area > div{
width: 100%;
border-left: none;
}
.gallery_Area .addres_inner{
padding: 5% 5% 8%;
gap: 0;
}
.gallery_Area .addres_inner p{
padding: 10px 0;
line-height: 1.4;
}
.gallery_Area .addres_inner .gmap_btn .gmap_btn_inner {
width: 80%;
padding: 20px 15px;
font-size: 14px;
}

}