@charset "utf-8";
body{
background-color: #F8F8D4;
}
#header{
background:#666;
color: #fff;
text-align: center;
}

.box{
color: #666;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
/*text-align: center;*/
}
#box1{
background-image: url(../images/hero2.svg);
background-color: #F8F8D4;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#box2{
background: #F8F8D4;
}
#box3{
background: #F8F8D4;
}
#box4{
background: #F8F8D4;
}
#box5{
background: #F8F8D4;
}

#footer{
background:#F8F8D4;
padding:10px;
}
#footer .copy{
font-size: 10px;
color:#666;
text-align:center;
}

.section-wrap{
max-width: 500px;
padding: 0 16px 0 16px;
}
@media(max-width:600px){
.section-wrap{
max-width: 400px;
padding: 0 35px 0 16px;
}
}
.object-fit-cover{
object-fit: cover;
}
.map,
.address{
width: 500px;
height: auto;
}
@media(max-width:600px){
.map,
.address{
width: 340px;
height: auto;
}
}
.address{
padding: 0 12px;
}

h1{
font-size: 10px;}
h2{
font-size: 28px;
font-family: serif;
margin-bottom: 30px;
text-align: center;
}
p{
font-size: 18px;
line-height: 1.8;
margin: 1rem 0;
}
.table td{
padding: 10px;
}
.align-right{
text-align: right;
}



/*========= ページネーションCSS ===============*/

.pagination {
position:fixed;
right:20px;
top: 50%;
transform: translateY(-50%);
font-size:1em;
z-index: 10;
list-style: none;
}

.pagination a {
display:block;
height:20px;
margin-bottom:5px;
color:#666;
position:relative;
padding:4px;
}

.pagination a.active:after {
box-shadow:inset 0 0 0 5px;
}

/*現在地表示のテキストの設定*/
.pagination a .hover-text {
position:absolute;
right:15px;
top:0;
opacity:0;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
padding-right: 15px;
}

.pagination a:hover .hover-text {
opacity: 1;
}

.pagination a:after {
-webkit-transition:box-shadow 0.5s ease;
transition:box-shadow 0.5s ease;
width:10px;
height:10px;
display: block;
border:1px solid;
border-radius:50%;
content:"";
position: absolute;
margin:auto;
top:0;
right:3px;
bottom:0;
}

/*768px以下は現在地表示のテキストを非表示*/
@media screen and (max-width:768px) { 
.pagination a .hover-text{
display: none;
} 
}