@charset "UTF-8";
/* CSS Document */

#header{
transform: translateY(-71px);
}
h2{
text-align: center;
font-weight: 600;
letter-spacing: 0.3em;
}
h2 span{
display: block;
font-weight: 600;
letter-spacing: 0.2em;
}
h2 span:before{
display: block;
content: "";
background-color: #111;
}
div.box.more-box{
position: relative;
}
div.more{
bottom: 0;
right: 0;
display: flex;
align-items: center;
justify-content: flex-end;
color: #fff;
background-color: #111;
}
div.more h3{
font-weight: 600;
border-right: solid 1px #fff;
}
div.more a{
text-align: center;
color: #fff;
font-weight: bold;
}
div.more a:before{
display: block;
font-family: "Font Awesome 5 Pro";
font-weight: 600;
content: "\f101";
}
/*--------------------
#hero
--------------------*/
#hero{
position: relative;
}
#hero .flex{
display: flex;
}
#hero .flex > div{
position: relative;
}
#hero .flex > div:before{
position: absolute;
top: 50%;
left: 50%;
display: block;
content: "";
height: 100%;
margin:0 auto;
background-color:#111;
opacity: 0.5;
}
#hero .flex > div h1{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
text-align: center;
letter-spacing: 0.2em;
}
#hero .flex > nav ul li a{
font-weight: 600;
}
#hero .day{
position: absolute;
bottom: 0;
left: 0;
display: flex;
align-items: center;
color: #fff;
background-color: #111;
}
#hero .day h3{
text-align: center;
border-right: solid 1px #fff;
font-weight: 600;
letter-spacing: 0.05em;
}
#hero .day h3 > span{
display: block;
font-weight: 600;
}
#hero .day h3 > span span{
font-weight: 600;
}
#hero .day a{
text-align: center;
color: #fff;
position: relative;
display: block;
padding: 30px 0 0 0;
}
#hero .day a:before{
display: block;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
font-family: "Font Awesome 5 Pro";
content: "\f144";
}
/*--------------------
#greeting
--------------------*/
#greeting p{
background-color: #f1f5e3;
margin-left: auto;
line-height: 1.8em;
letter-spacing: 0.2em;
}
/*--------------------
#event
--------------------*/
#event .slider li a{
display: flex;
}
#event .slider li a img{
width: 50%;
}
#event .slider li a div{
width: 50%;
color: #fff;
background-color: #111;
position: relative;
}
#event .slider li a div h3{
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100%;
text-align: center;
letter-spacing: 0.2em;
}
#event .slider li a div h3 span{
display: block;
}
#event .slider li a div p {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
width: 90%;
font-size: 12px;
}
/*--------------------
#kuyoh-gosogi
--------------------*/
#kuyoh-gosogi ul li{
position: relative;
}
#kuyoh-gosogi ul li:before{
position: absolute;
top: 10%;
left: 10%;
display: block;
content: "";
width: 90%;
height: 100%;
background-color: #f1f5e3;
z-index: -1;
}
#kuyoh-gosogi ul li div{
display: flex;
align-items: center;
}
#kuyoh-gosogi ul li div h2{
padding-bottom: 0;
}
#kuyoh-gosogi ul li p{
line-height: 1.8em;
letter-spacing: 0.2em;
}
/*--------------------
#kitoh-gokigan
--------------------*/
#kitoh-gokigan p{
background-color: #f1f5e3;
line-height: 1.8em;
letter-spacing: 0.2em;
}
/*--------------------
#kushikireidanho
--------------------*/
#kushikireidanho .box div:first-of-type{
position: relative;
}
#kushikireidanho .box div p{
background-color: #f1f5e3;
width: 80%;
line-height: 1.8em;
letter-spacing: 0.2em;
}
/*--------------------
#access
--------------------*/
#access .box{
position: relative;
}
#access .g-map iframe{
width: 100%;
height: 100%;
}
#access .text{
background-color: #f1f5e3;
}

@media (max-width: 560px){
section{
padding: 40px 0;
}
h2{
font-size: 1.8rem;
padding-bottom: 20px;
}
h2 span{
font-size: 1.2rem;
}
h2 span:before{
width: 10px;
height: 10px;
margin: 3px auto;
}
div.box.more-box{
padding-bottom: 50px;
}
div.more{
position: absolute;
padding: 10px 20px;
}
div.more h3{
font-size: 1.4rem;
padding: 10px 0;
padding-right: 15px;
margin-right: 15px;
}
div.more a{
font-size: 1.0rem;
transition: 0.3s;
}
div.more a:hover{
transform: scale(1.1);
transition: 0.3s;
}
div.more a:before{
font-size: 2.2rem;
}
/*--------------------
#hero
--------------------*/
#hero .flex > div:before{
transform: translate(-50%,-50%) skewX(-20deg);
width: 55%;
}
#hero .flex > div h1{
font-size: 15vw;
}
#hero .flex > nav{
width: 260px;
}
#hero .flex > nav ul{
padding: 40px 20px;
}
#hero .flex > nav ul li{
padding-bottom: 20px;
}
#hero .day{
padding: 10px 20px;
}
#hero .day h3{
padding-right: 20px;
margin-right: 20px;
font-size: 1.2rem;
}
#hero .day h3 > span{
font-size: 1.6rem;
padding-top: 5px;
}
#hero .day h3 > span span{
font-size: 1.4rem;
}
#hero .day a{
font-size: 1.0rem;
}
#hero .day a:hover{
transform: scale(1.1);
transition: 0.3s;
}
#hero .day a:before{
font-size: 2rem;
padding-bottom: 5px;
}
/*--------------------
#greeting
--------------------*/
#greeting img{
display: block;
width: 60%;
margin: 0 auto;
}
#greeting p{
position: relative;
transform: translateY(-30px);
padding: 50px 5% 20px 5%;
z-index: -1;
}
/*--------------------
#event
--------------------*/
#event .slider li a div h3{
bottom: 40%;
font-size: 1.8rem;
}
#event .slider li a div h3 span{
font-size: 1.4rem;
padding-bottom: 30px;
}
/*--------------------
#kuyoh-gosogi
--------------------*/
#kuyoh-gosogi div.more-box{
padding-bottom: 110px;
}
#kuyoh-gosogi ul li{
margin-bottom: 60px;
}
#kuyoh-gosogi ul li:last-of-type{
margin-bottom: 0;
}
#kuyoh-gosogi ul li:last-of-type:before{
left: 0;
}
#kuyoh-gosogi ul li div{
padding-bottom: 20px;
}
#kuyoh-gosogi ul li:last-of-type div{
flex-direction: row-reverse;
}
#kuyoh-gosogi ul li div h2,
#kuyoh-gosogi ul li div img{
width: 50%;
}
#kuyoh-gosogi ul li:first-of-type p{
width: 75%;
margin-left: 18%;
}
#kuyoh-gosogi ul li:last-of-type p{
width: 75%;
margin-left: 8%;
}
/*--------------------
#kitoh-gokigan
--------------------*/
#kitoh-gokigan div.more-box{
padding-bottom: 80px;
}
#kitoh-gokigan p{
padding: 5%;
}
/*--------------------
#kushikireidanho
--------------------*/
#kushikireidanho .box{
padding-bottom: 60px;
}
#kushikireidanho .box div p{
width: 80%;
margin: 0 auto;
transform: translateY(-20px);
padding: 5%;
}
/*--------------------
#access
--------------------*/
#access{
padding-bottom: 0;
}
#access .box .inner{
transform: translateY(-30px);
}
#access .g-map{
width: 85%;
height: 25vh;
}
#access .text{
position: relative;
padding: 50px 5% 5% 5%;
width: 75%;
margin-left: auto;
transform: translateY(-30px);
z-index: -1;
}
#access .text p{
padding-bottom: 10px;
}
#access .text p span{
padding-right: 10px;
}
#access .text ul{
padding-top: 20px;
}
#access .text ul li{
padding-bottom: 10px;
}
}

@media (min-width: 561px){
h2 span:before{
margin: 5px auto;
}
div.box.more-box{
padding-bottom: 100px;
}
div.more{
position: absolute;
padding: 10px 20px;
}
div.more h3{
padding: 10px 0;
padding-right: 15px;
margin-right: 15px;
}
div.more a{
font-size: 1.0rem;
transition: 0.3s;
}
div.more a:hover{
transform: scale(1.1);
transition: 0.3s;
}
div.more a:before{
font-size: 2.2rem;
}
/*--------------------
#hero
--------------------*/
#hero .flex > div:before{
transform: translate(-50%,-50%) skewX(-25deg);
width: 55%;
}
#hero .flex > div h1{
font-size: 9vw;
}
#hero .flex > nav{
width: 260px;
}
#hero .flex > nav ul{
padding: 40px 20px;
}
#hero .flex > nav ul li{
padding-bottom: 20px;
}
#hero .day{
padding: 10px 20px;
}
#hero .day h3{
padding-right: 20px;
margin-right: 20px;
font-size: 1.8rem;
}
#hero .day h3 > span{
font-size: 2.2rem;
padding-top: 5px;
}
#hero .day h3 > span span{
font-size: 1.4rem;
}
#hero .day a{
font-size: 1.0rem;
}
#hero .day a:hover{
transform: scale(1.1);
transition: 0.3s;
}
#hero .day a:before{
font-size: 2rem;
padding-bottom: 5px;
}
/*--------------------
#greeting
--------------------*/
#greeting img{
position: absolute;
top: 170px;
left: 0;
width: 30%;
}
#greeting p{
width: 60%;
padding: 50px 50px 50px 120px;
font-size: 1.8rem;
}
/*--------------------
#event
--------------------*/
/*--------------------
#kuyoh-gosogi
--------------------*/
#kuyoh-gosogi ul{
display: flex;
justify-content: space-between;
}
#kuyoh-gosogi ul li{
width: 47%;
}
#kuyoh-gosogi ul li div{
padding-bottom: 30px;
}
#kuyoh-gosogi ul li div h2{
width: 45%;
}
#kuyoh-gosogi ul li div img{
width: 55%;
}
#kuyoh-gosogi ul li p{
width: 60%;
margin-left: 25%;
font-size: 1.8rem;
}
/*--------------------
#kitoh-gokigan
--------------------*/
#kitoh-gokigan p{
padding: 40px;
font-size: 1.8rem;
}
/*--------------------
#kushikireidanho
--------------------*/
#kushikireidanho .box div p{
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 80%;
font-size: 1.8rem;
padding: 30px;
}
/*--------------------
#access
--------------------*/
#access .box .inner{
transform: translateY(-120px);
}
#access .text{
position: absolute;
right: 0;
z-index: -1;
bottom: -100px;
}
#access .text p{
padding-bottom: 10px;
}
#access .text p span{
padding-right: 10px;
}
#access .text ul{
padding-top: 20px;
}
#access .text ul li{
padding-bottom: 10px;
}
}

@media (max-width: 1024px){
/*--------------------
#hero
--------------------*/
#hero .flex > nav{
display: none;
}
#hero .flex > div{
width: 100%;
}
}

@media (min-width: 561px) and (max-width: 1024px){
section{
padding: 50px 0;
}
h2{
font-size: 2.2rem;
padding-bottom: 30px;
}
h2 span{
font-size: 1.4rem;
}
h2 span:before{
width: 10px;
height: 10px;
}
/*--------------------
#event
--------------------*/
#event .slider li a div h3{
bottom: 40%;
font-size: 2.0rem;
}
#event .slider li a div h3 span{
font-size: 1.4rem;
padding-bottom: 20px;
}
/*--------------------
#kuyoh-gosogi
--------------------*/
#kuyoh-gosogi div.more-box{
padding: 30px 0 135px;
}
#kuyoh-gosogi ul li div h2{
margin-top: 30px;
}
/*--------------------
#kushikireidanho
--------------------*/
#kushikireidanho .box{
padding-bottom: 220px;
}
#kushikireidanho .box div p{
bottom: -40%;
}
/*--------------------
#access
--------------------*/
#access .g-map{
width: 50%;
height: 25vh;
}
#access .text{
padding: 30px 30px 30px 80px;
}
#access .text p,
#access .text ul{
width: 85%;
margin-left: auto;
}
}

@media (min-width: 1025px){
section{
padding: 60px 0;
}
h2{
font-size: 2.8rem;
padding-bottom: 40px;
}
h2 span{
font-size: 1.6rem;
}
h2 span:before{
width: 15px;
height: 15px;
}
/*--------------------
#hero
--------------------*/
#hero .flex > div{
width: calc(100% - 260px) ;
}
/*--------------------
#event
--------------------*/
#event .slider li a div h3{
bottom: 45%;
font-size: 2.4rem;
}
#event .slider li a div h3 span{
font-size: 1.8rem;
padding-bottom: 40px;
}
/*--------------------
#kuyoh-gosogi
--------------------*/
#kuyoh-gosogi div.more-box{
padding-bottom: 140px;
}
/*--------------------
#kushikireidanho
--------------------*/
#kushikireidanho .box{
padding-bottom: 210px;
}
#kushikireidanho .box div p{
bottom: -25%;
}
/*--------------------
#access
--------------------*/
#access .g-map{
width: 58%;
height: 50vh;
}
#access .text{
padding: 30px 50px 30px 120px;
}
}