﻿
.pagetitle-container { background: #f0f1f3 }

.pagetitle-wrapper {
 position:relative;
 z-index:5;
}

.pagetitle-container .-building {
 position: absolute;
 z-index: 1;
 width: 100%;
 height: 100%;
}
.pagetitle-container .-building picture {
 width: 100%;
 height: 100%;
}
.pagetitle-container .-building picture img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}



.linkers-container {
 display: flex;
 justify-content: flex-start;
 flex-wrap: wrap;
}

.linkers-container a {
 position: relative;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-wrap: wrap;
 width: 100%;
 height: 100%;
 border: solid 1px #cacaca;
 background-color: #FFF;
 line-height: 1;
 color: inherit;
 text-decoration: none;
 font-weight: 500;
 text-align: center;
 transition : color 0.8s ease 0s;
}

.linkers-container a:hover {
 color: #999;
 text-decoration: none !important;
}

.linkers-container a:after {
 display: block;
 border-right: solid 2px #000000;
 border-bottom: solid 2px #000000;
 content: "";
 position: absolute;
 top:33%;
 transform: rotate(45deg);
 transition : all 0.8s ease 0s;
}

.linkers-container a:hover:after {
 border-right: solid 2px #999;
 border-bottom: solid 2px #999;
}



@media screen and (min-width: 1025px){
.linkers-container { margin-top: 60px; }
.linkers-container > li { width: 23.5% }
.linkers-container > li + li { margin-left: 2%; }
.linkers-container a { padding: 1em 2em; font-size: clamp(12px,16px,1vw); }
 .linkers-container a:after { width: 10px; height: 10px; right:1.5em; }
}
@media screen and (max-width: 1024px){
.linkers-container { margin-top: 15px; }
.linkers-container a { padding: .75em 3em; }
.linkers-container > li { width:48.5%; margin-top: 12px; }
.linkers-container > li:nth-child(2n) { margin-left: 3%; }
.linkers-container a { padding: 1em 2em; font-size: clamp(10px,14px,3vw); }
 .linkers-container a:after { width: 6px; height: 6px; right:1em; }
 .linkers-container a span{
  display: table;
  margin: 3px auto;
  width:100%;
  text-align: center;
 }
}


.info-container { text-align: left;}

.info-container * + p { margin-top: 2em; }
 
.info-wrapper.-greeting { display: flex; justify-content: space-between; flex-wrap: wrap; }

@media screen and (min-width: 769px){
 .info-container { padding-top:80px; }
    
 .info-wrapper.-greeting { margin-top: 60px; }
 .info-wrapper.-greeting .-photo { width: 360px; }
 .info-wrapper.-greeting .-message { width: calc(95% - 360px); }
.info-container.-outline table , .info-container.-history table {
 margin: 60px auto 0;
 width: 830px;
 max-width: 90%;
}
.info-container.-outline table th, .info-container.-history table th { width: 7em; }
.info-container.-outline table td, .info-container.-history table td { width: calc(100% - 7em); }
.info-container.-outline table + .-note { margin:10px auto 0; width: 830px; max-width: 90%; }    
.info-container.-outline table + .-note a { text-decoration: underline; }   
.info-container.-outline table + .-note a:hover { opacity: .5; }
}
@media screen and (max-width: 768px){
 .info-container { padding-top:40px; }
    
 .info-wrapper.-greeting { margin-top: 30px; }
 .info-wrapper.-greeting .-photo { width: 65%; order:2; margin: 30px auto 0; }
 .info-wrapper.-greeting .-message { width: 100%; order:1; }    
 .info-wrapper.-greeting .greeting-signimage img { max-width: 33.3%; }
.info-container.-outline table , .info-container.-history table {
 margin: 30px auto 0;
}
}


a.-pdf {
 font-size: 1rem;
 display: inline-block;
 padding-right: 2em;
 color:  inherit;
 background-image: url("../img/ic_pdf.svg");
 background-position: right center;
 background-repeat: no-repeat;
 font-weight: 600;
}



.access-wrapper {
 display: flex; 
 justify-content: space-between;
 flex-wrap: wrap;
}

.access-headline {
 font-weight: 700;
}

.access-data {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}

.access-data dt{ width: 3em; }
.access-data dd { width: calc(100% - 3em); }


.access-list {
    
 width: 100%;
 margin-top: 1.25em;
 padding: 1.5em 2em;
 background-color: var(--color-gray);
 font-weight: 500;
}

.access-map .-linktext {
 margin-top: 10px;
 text-align: right;
}
.access-map .-linktext a {
 color: #1a73e8;
 text-decoration: underline;
}


@media screen and (min-width: 769px){
 .access-wrapper { margin-top: 60px; }
 .access-wrapper > div { width: 48.5%; }
 .access-headline { font-size: clamp(22px,28px,6vw); padding-bottom: 1em; }
 .access-list { margin-top: 1.25em; padding: 1.5em 2em; }
 .access-map .-inner { width: 100%; height: 372px; overflow: hidden; }
 .access-map iframe { width: 100%; height: calc(100% + 300px); margin-top: -150px; }
}
@media screen and (max-width: 768px){
 .access-wrapper { margin-top: 20px; }
 .access-headline { font-size: 15px; }
 .access-detail { width: 100%; }
 .access-data { font-size: 13px; line-height: 2; }
 .access-list { margin-top: 1em; padding: 1em 1em; font-size: 13px; }
 .access-map { margin-top: 10px; width: 100%; }
 .access-map .-inner { width: 100%; height: 200px; overflow: hidden; }
 .access-map iframe { width: 100%; height: calc(100% + 200px); margin-top: -100px; }
}



@media screen and (min-width: 769px){
 .info-container.-history { padding-bottom: 140px; }
}
@media screen and (max-width: 768px){
 .info-container.-history { padding-bottom: 70px; }
}

