@charset "utf-8";

#splash {
position: fixed;
width: 100%;
height: 100%;
z-index: 9999;
background:#d6b05d;
text-align:center;
color:#fff;
}
#splash_logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#splash_logo svg{
width:100px;
}
.splashbg{
display: none;
}
body.appear .splashbg{
display: block;
content: "";
position:fixed;
z-index: 999;
width: 100%;
height: 100vh;
top: 0;
left: 0;
background-color:#fff;
animation-name:PageAnime;
animation-duration:0.6s;
animation-timing-function:ease-in-out;
animation-fill-mode:forwards;
}

@keyframes PageAnime{
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#container{
opacity: 0;
}
body.appear #container{
animation-name:PageAnimeAppear;
animation-duration:0.8s;
animation-delay: 0.4s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes PageAnimeAppear{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#mask path {
fill-opacity: 0;
transition: fill-opacity .5s;
fill: none;
stroke: #fff;
}
#mask.done path{
fill: #fff;
fill-opacity: 1;
stroke: none;
}
.svganimeblock svg{
width:100%;
}
.svganimeblock svg path {
fill-opacity: 0;
transition: fill-opacity .5s;
fill: none;
stroke: #ccc;
}
.svganimeblock svg.done path{
fill: #efefef;
fill-opacity: 1;
stroke: none;
}

#header{
position: fixed;
}

.slider {
position: relative;
}
#slider {
position: relative;
overflow: hidden;
width: 100% !important;
margin-bottom: 60px;
}
#slider ul, #slider ul li, #slider ul li .slide, .teaser {
height: 50vh;
}
#slider ul { 
position: relative;
overflow: hidden;
}
#slider ul li {
opacity:0;
transition:opacity 1s;
}
#slider ul li.actslide {
opacity:1;
z-index:2;
}
#slider ul li .slide {
background-size: cover;
}
#slide1 {
background: url("../images/slider1.avif") no-repeat center center;
background-size: cover;
}
#slide2 {
background: url("../images/slider2.avif") no-repeat center center;
background-size: cover;
}
#slide3 {
background: url("../images/slider3.avif") no-repeat center center;
background-size: cover;
}
#slide4 {
background: url("../images/slider4.avif") no-repeat center center;
background-size: cover;
}
#slide5 {
background: url("../images/slider5.avif") no-repeat center center;
background-size: cover;
}
#slide6 {
background: url("../images/slider6.avif") no-repeat center center;
background-size: cover;
}
#slide7 {
background: url("../images/slider7.avif") no-repeat center center;
background-size: cover;
}
#slider .progress {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 5px;
background: rgba(255,255,255,0.3);
overflow: hidden;
border-radius: 3px;
cursor: pointer;
z-index: 10;
}
#slider .progress .bar {
width: 0;
height: 100%;
background: #fff;
transition: width 0.1s linear;
}
.teaser {
position: absolute;
width: 100%;
}

#vertical {
text-align: center;
padding-bottom: 60px;
}
#vertical h1 {
display: block;
width: 30%;
max-width: 90px;
margin: 0 auto;
padding-bottom: 20px;
}
#vertical h2 {
display: inline-block;
text-align: left;
writing-mode: vertical-rl;
line-height: 200%;
letter-spacing: 3px;
font-size: 4vw;
}

#wrap, #access h3, #access ul {
width: 90%;
max-width: 1000px;
margin: 0 auto;
}

#news h3, #content h3, #access h3 {
border-bottom: 1px solid #00243b;
text-align: center;
padding-bottom: 10px;
margin-bottom: 20px;
font-size: 5.5vw;
}
#news ul {
padding-bottom: 20px;
}
#news ul li {
padding-bottom: 30px;
}
#news ul li a {
font-size: 3.5vw;
display: flex;
align-items: center;
background: #fff;
}
#news ul li a img {
width: 35%;
}
#news ul li a div {
width: 65%;
box-sizing: border-box;
padding: 0 10px;
}
#news ul li a time {
font-size: 0.8em;
line-height: 1em;
}
#news ul li a p {
line-height: 180%;
}

#reiwa h3 img {
margin-bottom: 20px;
}
#reiwa h4 {
font-size: 3.8vw;
line-height: 200%;
padding-bottom: clamp(20px, 1.9vw, 30px);
}

#content ul li {
background: #f3efe9;
margin-bottom: 40px;
}
#content ul li:last-child {
margin-bottom: 0;
}
#content ul li > a {
padding-bottom: 20px;
}
#content ul li div {
box-sizing: border-box;
padding: 20px 20px 30px 20px;
}
#content ul li:last-child div {
padding-bottom: 0;
}
#content ul li h4 {
position: relative;
margin-bottom: 12px;
}
#content ul li h4:after {
content: "";
display: block;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
left: 0;
z-index: 1;
background: #00243b;
}
#content ul li h4 span {
background: #f3efe9;
display: table;
position: relative;
z-index: 2;
font-size: 4.5vw;
padding-right: 16px;
}
#content ul li p {
line-height: 2em;
font-size: 3.5vw;
}
#content ul li:last-child p {
padding-bottom: 20px;
}
#content ul li div a {
margin-right: 20px;
font-size: 5vw;
}
#content ul li div a:last-child {
margin-right: 0;
}
#content ul li div > span {
display: table;
position: relative;
margin-top: 20px;
margin-left: auto;
margin-right: 20px;
line-height: 1em;
padding-right: 30px;
}
#content ul li div > span:after {
position: absolute;
top: 55%;
right: 0;
transform: translateY(-50%);
content: '\f054';
font-family: 'Font Awesome 5 Pro';
}

#access iframe {
height: 40vh;
margin-bottom: 30px;
}
#access ul li {
padding-bottom: 20px;
}
#access ul li:last-child {
padding-bottom: 0;
}
#access ul li h4 {
font-size: 4vw;
padding-bottom: 10px;
}
#access ul li i {
font-size: 1.2em;
padding-right: 10px;
}
#access ul li p {
font-size: 3.5vw;
}

@media print,screen and (max-width:560px) {
#reiwa h4 br {
display: none;
}
}

@media print,screen and (min-width:561px) {
#slider {
margin-bottom: 100px;
}
#slider ul, #slider ul li, #slider ul li .slide, .teaser {
height: 80vh;
}

#vertical {
padding-bottom: 100px;
}
#vertical h1 {
padding-bottom: 30px;
}
#vertical h2 {
font-size: 1.8rem;
}

#news h3, #content h3, #access h3 {
font-size: 2.2rem;
padding-bottom: 12px;
margin-bottom: 30px;
}
#news ul li a {
font-size: 1.8rem;
}
#news ul li a img {
width: 30%;
}
#news ul li a div {
width: 70%;
padding: 0 20px;
}

#reiwa h4 {
font-size: 1.8rem;
}

#content ul li {
margin-bottom: 60px;
}
#content ul li div {
padding: 20px 40px;
}
#content ul li h4 {
margin-bottom: 20px;
}
#content ul li h4 span {
font-size: 2.2rem;
padding-right: 20px;
}
#content ul li p {
font-size: 1.8rem;
}
#content ul li div a {
margin-right: 24px;
font-size: 3rem;
}

#access iframe {
height: 650px;
margin-bottom: 50px;
}
#access ul li {
padding-bottom: 30px;
}
#access ul li h4 {
font-size: 1.8rem;
}
#access ul li p {
font-size: 1.6rem;
padding-left: 30px;
}
}

@media print,screen and (min-width:769px) {
#slider ul, #slider ul li, #slider ul li .slide, .teaser {
height: 600px;
}
#slide1 {
background: url("../images/slider1x2.avif") no-repeat center center;
background-size: cover;
}
#slide2 {
background: url("../images/slider2x2.avif") no-repeat center center;
background-size: cover;
}
#slide3 {
background: url("../images/slider3x2.avif") no-repeat center center;
background-size: cover;
}
#slide4 {
background: url("../images/slider4x2.avif") no-repeat center center;
background-size: cover;
}
#slide5 {
background: url("../images/slider5x2.avif") no-repeat center center;
background-size: cover;
}
#slide6 {
background: url("../images/slider6x2.avif") no-repeat center center;
background-size: cover;
}
#slide7 {
background: url("../images/slider7x2.avif") no-repeat center center;
background-size: cover;
}

#vertical h2 {
font-size: 2.2rem;
}

#news h3, #content h3, #access h3 {
font-size: 2.4rem;
}
#news ul {
display: flex;
justify-content: space-between;
padding-bottom: 50px;
}
#news ul li {
width: 32%;
padding-bottom: 0;
}
#news ul li a {
display: block;
background: none;
font-size: 1.6rem;
}
#news ul li a div {
display: contents;
}
#news ul li a img {
width: 100%;
padding-bottom: 10px;
}

#reiwa h4 {
text-align: center;
font-size: 2rem;
}

#content ul li > a{
display: flex;
padding-bottom: 0;
}
#content ul li:nth-child(even) > a {
flex-direction: row-reverse;
}
#content ul li:last-child{
display: flex;
flex-direction: row-reverse;
}
#content ul li img {
width: 39%;
}
#content ul li div {
width: 61%;
padding: 20px 20px 0;
position: relative;
}
#content ul li h4 {
margin-bottom: 12px;
}
#content ul li h4 span {
font-size: 2rem;
}
#content ul li p {
font-size: 1.4rem;
line-height: 150%;
}
#content ul li div a {
font-size: 2.4rem;
}
#content ul li div > span {
font-size: 1.4rem;
}
}

@media print,screen and (min-width:1025px) {
#reiwa h4 {
font-size: 2.2rem;
}

#content ul li h4 span {
font-size: 2.4rem;
}
#content ul li p {
font-size: 1.8rem;
}
#content ul li div a {
transition: .6s;
}
#content ul li div a:hover {
color: #00243b;
}
#content ul li div > span {
padding-right: 30px;
}

#access ul li h4 {
font-size: 2rem;
}
}

@media print,screen and (min-width:1281px) {
#content ul li > a, #content ul li:last-child {
align-items: center;
}
#content ul li a div {
padding: 0 40px;
}
#content ul li h4 span {
font-size: 2.8rem;
padding-right: 20px;
}
#content ul li p {
font-size: 2rem;
line-height: 200%;
}
#content ul li div > span {
font-size: 1.6rem;
padding-right: 40px;
}
}