@charset "UTF-8";
/* 共通部分
------------------------------------*/
html{
    font-size: 100%;
}
img{
    max-width: 100%;
}
body{
    margin: 0 auto;
    background-image: url(../img/patter.png);
    font-family: "Zen Old Mincho", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;  
}
.wrapper{
    max-width: 800px;
    margin: 0 auto;
}
a{
    text-decoration: none;
}
  
/* タイトル
------------------------------------*/
.logo{
    width: auto;
    height: 34vh;
    margin: 0 auto;
}
.page-title{
    background-color: rgb(255, 255, 255,1);
    width: 20%;
    height: 100vh;
    padding-top: 3rem;
}
.header-img-box{
    width: 80%;
    height: 100vh;
    filter: brightness(70%);
}
header img{
    height: 100vh;
    object-fit: cover;
    width: 100%;
}
header{
    display: flex;
}
.header-list{
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: 1.1rem;
    list-style-type: none;
    font-weight: 400;
    line-height: 1.6;
    margin: 5rem auto;
    padding: 0;
}
.header-list a:hover{
    opacity: .3;
}
.header-list a{
    color: black;
    transition: .5s;
}

/* about
------------------------------------*/
#about{
    background-color: #fff;
    margin: 4% 10%;
    padding: 3% 3%;
}
.about-title{
    text-align: center;
}
.about-title h2{
    font-size: 1.6rem;
    position: relative;
    display: inline-block;
    margin-bottom: 2%;
}
.about-title h2::after{
    position: absolute;
    content: "";
    height: 1.5px;
    width: 15px;
    background-color: black;
    top: 1.3rem;
    right: -1.5rem;
}
.about-title h2::before{
    position: absolute;
    content: "";
    height: 1.5px;
    width: 15px;
    background-color: black;
    top: 1.3rem;
    left: -1.5rem;
}

.about-box{
    display: flex;
}
.about-box img{
    width: 50%;
    height: 50vh;
    object-fit: cover;
}
.about-textbox{
    width: 50%;
    height: 50vh;
    padding-right: 3%;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    text-indent: 1em;
    line-height: 1.8;
    margin: 0 auto;
}
.about-textbox p{
    margin-left: 3%;
}

/* menu
------------------------------------*/
#menu{
    background-color: #fff;
    margin: 4% 10%;
    padding: 3% 3%;
}
.menu-title{
    text-align: center;
}
.menu-title h2{
    font-size: 1.6rem;
    position: relative;
    display: inline-block;
    margin-bottom: 2%;
}
.menu-title h2::after{
    position: absolute;
    content: "";
    height: 1.5px;
    width: 15px;
    background-color: black;
    top: 1.3rem;
    right: -1.5rem;
}
.menu-title h2::before{
    position: absolute;
    content: "";
    height: 1.5px;
    width: 15px;
    background-color: black;
    top: 1.3rem;
    left: -1.5rem;
}

.menu-box{
    display: flex;
    justify-content: center;
}
.menu-box img{
    width: 50%;
    height: 50vh;
    object-fit: cover;
}
.menu-textbox{
    width: 50%;
    height: 50vh;
    padding-right: 3%;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    text-indent: 1em;
    line-height: 1.8;
    margin: 0 auto;
}
.menu-textbox span{
    margin-top: .5rem;
}
.menu-textbox p{
    margin-left: 3%;
}
.menu-textbox li{
    list-style-type: none;
    position: relative;
    line-height: 2.5;
}
.menu-textbox li::before{
    position: absolute;
    content: "";
    height: 13px;
    width: 1px;
    background-color: black;
    top: -1rem;
    left: 1.2rem;
}

/* news
------------------------------------*/
#news{
    background-color: #fff;
    margin: 4% 10%;
    padding: 3% 5%;
}
.news-title{
    text-align: center;
}
.news-title h2{
    font-size: 1.6rem;
    position: relative;
    display: inline-block;
    margin-bottom: 2%;
}
.news-title h2::after{
    position: absolute;
    content: "";
    height: 1.5px;
    width: 15px;
    background-color: black;
    top: 1.3rem;
    right: -1.5rem;
}
.news-title h2::before{
    position: absolute;
    content: "";
    height: 1.5px;
    width: 15px;
    background-color: black;
    top: 1.3rem;
    left: -1.5rem;
}
.news-list{
    display: flex;
    flex-wrap: wrap;
    line-height: 3;
}
.news-list dt{
    width: 35%;
}
.news-list dd{
    width: 65%;
}
.news-list dt,
.news-list dd{
    border-bottom: 1px solid rgb(17, 107, 20,.5);
}
.news-list-top{
    border-top: 1px solid rgb(17, 107, 20,.5);
}
.news-list span{
    background-color: rgb(17, 107, 20,1);
    color: #fff;
    padding: 0 1rem;
    padding-bottom: .3rem;
    border-radius: 3px;
    margin-left: 1rem;
}
.news-list span.event{
    background-color: rgb(178, 39, 31);
}

/* map
------------------------------------*/
.map{
    filter: grayscale(1);
}
iframe {
  vertical-align: bottom;
}
/* footer
------------------------------------*/
footer{
    background-color: #fff;
}
footer p{
    text-align: center;
}
.footer-box{
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-box img{
    height: 34vh;
}
.footer-list{
    list-style-type: none;
    margin: 1rem 2rem;
    padding: 0;
    line-height: 2;
}
.footer-list li{
    position: relative;
}
.footer-list li::before{
    position: absolute;
    content: "";
    width: 10px;
    height: 1px;
    background-color: black;
    top: 1.1rem;
    left: -1rem;
}
.go-top a{
    background-color: rgb(107, 107, 107);
    color:#fff;
    padding: 1rem .1rem;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    transition: all .5s;
    border-radius: 3px ;
}
.go-top a:hover{
    opacity: .4;
}

/* pc向き(スマホmin-width)
------------------------------------*/
@media(max-width: 900px){
/* タイトル
------------------------------------*/
.page-title{
    width: 20%;
}
.header-img-box{
    width: 80%;
}
/* about
------------------------------------*/
#about{
    margin: 7% 6%;
    padding: 2% 2%;
}

.about-box{
    display: flex;
    flex-direction: column;
}
.about-box img{
    width: 100%;
    height: 40vh;
}
.about-textbox{
    margin-top: 1rem;
    width: 100%;
    height: 35vh;
    padding-right: 0;
    line-height: 1.7;
    padding: 4% 0;
}
.about-textbox p{
    margin-left: 3%;
}

/* menu
------------------------------------*/
#menu{
    margin: 7% 6%;
    padding: 2% 2%;
}

.menu-box{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.menu-box img{
    width: 100%;
    height: 40vh;
    order: 1;
}
.menu-textbox{
    width: 100%;
    height: 50vh;
    padding-right: 0;
    order: 2;
}
.menu-textbox span{
    margin-top: .5rem;
}

/* news
------------------------------------*/
#news{
    margin: 7% 6%;
    padding: 2% 2%;
}
.news-list{
    display: flex;
    flex-wrap: wrap;
    line-height: 3;
}
.news-list dt{
    width: 100%;
}
.news-list dd{
    width: 100%;
}
.news-list dt{
    border: none;
}
.news-list-top{
    border-top: none
}
.news-list .res{
    border-top: 1px solid rgb(17, 107, 20,.5);
}
}


@media(max-width: 600px){
/* タイトル
------------------------------------*/
.logo{
    height: 32vh;
}
.page-title{
    width: 50%;
}
.header-img-box{
    width: 50%;
}

/* about
------------------------------------*/
.about-title h2{
    font-size: 1.3rem;
    margin-bottom: 2%;
}
.about-title h2::after{
    top: 1rem;
}
.about-title h2::before{
    top: 1rem;
}
#about{
    margin: 10% 2%;
    padding: 3% 2%;
}
.about-box img{
    padding: 1% 2%;
    height: 35vh;
}
.about-textbox{
    width: 100%;
    height: 42vh;
    line-height: 1.5;
    font-size: .95rem;
    padding-bottom: 2%;
}
/* menu
------------------------------------*/
.menu-title h2{
    font-size: 1.3rem;
    margin-bottom: 2%;
}
.menu-title h2::after{
    top: 1rem;
}
.menu-title h2::before{
    top: 1rem;
}
#menu{
    margin: 10% 2%;
    padding: 3% 2%;
}
.menu-box img{
    padding: 1% 2%;
    height: 35vh;
}
.menu-textbox li {
    line-height: 2.3;
}

/* news
------------------------------------*/
.news-title h2{
    font-size: 1.3rem;
    margin-bottom: 2%;
}
.news-title h2::after{
    top: 1rem;
}
.news-title h2::before{
    top: 1rem;
}
#news{
    margin: 10% 2%;
    padding: 3% 2%;
}

/* footer
------------------------------------*/
.footer-list{
    font-size: .95rem;
}
.footer-list li::before {
    top: 1rem;
}
}