@charset "utf-8";
/* CSS Document */
.top-page-main-photo-area-01{ position: relative; width: 100%;}
.top-page-main-photo-area-01 h2{ color: #ffffff; font-size: 50px; line-height: 60px; left: 4%; position: absolute; text-shadow: 2px 2px 3px rgb(0 0 0 / 60%), -2px 2px 3px rgb(0 0 0 / 60%), 2px -2px 3px rgb(0 0 0 / 60%), -2px -2px 3px rgb(0 0 0 / 60%); top: 28%;}
.top-title-01{ font-size: 40px; line-height: 46px; margin-bottom: 30px; text-align: center;}
.top-title-01 span{ color: rgba( 243, 149, 0, .6); display: block; margin-bottom: 10px;}
.top-text-01{ font-size: 14px; line-height: 24px; margin-bottom: 40px; text-align: center;}
.top-3-photo-01{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 60px; width: 100%;}
.top-3-photo-01 li{ width: calc(100% / 3);}
.top-3-photo-01 li a,.top-2-photo-01 li a{ border: 1px solid #dedede; display: block; overflow: hidden; padding-top: 100%; position: relative;}
.top-3-photo-01 li a img,.top-2-photo-01 li a img{ display: block; left: 0; position: absolute; top: 0; transition: all .4s;}
.top-3-photo-01 li a:hover img,.top-2-photo-01 li a:hover img{ transform: scale(1.2);}
.top-3-photo-01 li a span,.top-2-photo-01 li a span{ background-color: rgba( 255, 255, 255, .8); display: block; font-size: 16px; font-weight: bold; left: 0; position: absolute; text-align: center; top: 10px; width: 100%;}
.top-2-photo-01{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 0; width: 100%;}
.top-2-photo-01 li{ width: calc(100% / 2);}
.top-2-photo-01 li a{ padding-top: 45%;}
.news-area-01{ border-radius: 6px; border: 1px solid #dedede; margin: 40px auto; padding: 20px 30px;}
.news-area-01 dt p{ color: #ff4f58; font-size: 18px; font-weight: bold; margin-bottom: 10px; text-align: center;}
.news-area-01 dd li{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.news-area-01 dd li p{ font-size: 12px; line-height: 20px;}
.news-area-01 dd li p:first-child{ width: 80px;}
.news-area-01 dd li p:nth-child(2){ margin: 0 10px; width: 60px;}
.news-area-01 dd li p:nth-child(2) span.red{ background-color: #ff0000; color: #ffffff; padding: 2px 10px;}
.news-area-01 dd li p:last-child{ font-size: 14px; width: calc(100% - 160px);}

.top-page-main-photo-01{ height: 600px; position: relative; overflow: hidden; width: 100%;}
.top-page-main-photo-01::after{ background-image: url('/images/dot-01.png'); content: ""; height: 100%; opacity: .5; position: absolute; width: 100%;}
.main-photo-01,.main-photo-02,.main-photo-03{ background-position: center; background-repeat: no-repeat; background-size: cover; height: 100%; left:0; position: absolute; top:0; width: 100%;}
.main-photo-01{ animation: slide-animation-01 14s infinite; background-image: url('/images/top-slider-main-01.png');}
.main-photo-02{ animation: slide-animation-02 14s infinite; background-image: url('/images/top-slider-main-02.png');}
.main-photo-03{ animation: slide-animation-03 14s infinite; background-image: url('/images/top-slider-main-03.png');}
@keyframes slide-animation-01{
    0% {opacity: 1; transform: scale(1.0);}
    30% {opacity: 1;}
    40% {opacity: 0; transform: scale(1.15);}
    90% {opacity: 0}
    100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02{
    0% {opacity: 0;}
    30% {opacity: 0; transform: scale(1.1);}
    40% {opacity: 1;}
    60% {opacity: 1;}
    70% {opacity: 0; transform: scale(1.0);}
    100% {opacity: 0;}
}
@keyframes slide-animation-03{
    0% {opacity: 0;}
    60% {opacity: 0;  transform: scale(1.0);}
    70% {opacity: 1;}
    90% {opacity: 1;}
    100% {opacity: 0; transform: scale(1.1);}
}

@media screen and (max-width: 799px){
    .top-page-main-photo-area-01 h2 br:nth-child(2){ display: none;}
}
@media screen and (max-width: 599px){
    .top-page-main-photo-01{ height: 380px;}
    .top-page-main-photo-area-01 h2{ font-size: 9vw; line-height: 120%;}
}
@media screen and (max-width: 592px){
    .top-page-main-photo-area-01 h2 br{ display: none;}
}
@media screen and (max-width: 520px){
    .top-3-photo-01 li,.top-2-photo-01 li,.news-area-01 dd li p:last-child{ width: 100%;}
    .news-area-01 dd li p:last-child{ margin-top: 4px; text-align: justify;}
}