@charset "utf-8";

.mobile{
display: none;
}

body{
background-color: #ffffff;
background-image: url("https://www.transparenttextures.com/patterns/wood-pattern.png");
}

/*--------------------header--------------------*/

header.header{
position: relative;
margin-bottom: 20px
}

h2.header{
width: 800px;
position: absolute;
bottom: 20px;
left:50%;
transform: translateX(-50%);
}

header.header:before{
content: '';
position: absolute;
width: 1px;
height: 30px;
background: #fff;
bottom: 0px;
left:50%;
transform: translateX(-50%)
}

header.header:after{
content: '';
position: absolute;
width: 1px;
height: 20px;
background: #000;
bottom: -20px;
left:50%;
transform: translateX(-50%)
}

nav.nav{
display: none
}

/*--------------------menu--------------------*/

menu.menu{
width: 100%;
position: fixed;
align-items: center;
background: #fff;
top:0px;
z-index: 11
}

a.menu_logo{
width: 150px;
position: absolute;
top:0px;
left: 5%;
}

li.menu{
width: 900px;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: center
}

a.menu{
padding: 25px 0px;
font-family: 'Revans';
display: block;
font-size: 15px;
margin: 0px 20px;
color: #000
}

a.menu:after{
content: "／";
display: inline-block;
margin-left: 20px
}

a.menu:last-of-type:after{
content: "";
display: inline-block;
margin-left: 20px
}

a.header_tel{
color: #fff;
position: relative;
background: url(../../img/icon/back.png) no-repeat center;
background-size: 100%;
position: absolute;
top:10px;
right: 5%;
height: 46px;
border-radius: 23px;
padding: 0px 25px 0px 25px;
}

a.header_tel:before{
content: "";
width: 22px;
height: 22px;
background: url(../../img/icon/tell.png) no-repeat center;
background-size: cover;
position: absolute;
top:12px;
left: 15px;
}

p.header_tel{
font-size: 20px;
border-bottom: solid 1px #fff;
padding-bottom: 2px;
margin-bottom: 2px;
margin-left: 20px;
font-weight: 600
}

p.reception{
margin-left: 20px;
font-size:12px;
font-weight: 600
}

/*--------------------main--------------------*/

main.main{
margin: 0px auto;
}

h2.section{
font-family: 'Revans';
font-size:42px;
letter-spacing: 0.03em;;
font-weight: 400;
margin-bottom: 40px
}

i.section{
font-size:14px;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,ヒラギノ角ゴ ProN,Hiragino Kaku Gothic ProN,メイリオ,Meiryo,osaka,ＭＳ Ｐゴシック,MS PGothic,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji,sans-serif;
}

div.scroll {
margin-inline: auto;
position: relative;
width: fit-content;
margin-bottom: 20px
}

div.scroll::before {
animation: 2s scroll infinite;
background: #000;
border-radius: 3px;
content: "";
height: 10px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 3px;
}

div.scroll::after {
border: 2px solid #000;
border-radius: 20px;
content: "";
display: block;
height: 50px;
margin-inline: auto;
margin-top: 10px;
width: 30px;
}

@keyframes scroll {
0% {
opacity: 0;
top: 40%;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
top: 70%;
}
}

/*--------------------about--------------------*/

section#about{
width: 1000px;
padding: 60px;
margin: 0px auto;
background: rgba(255,255,255,0.7);
position: relative
}

section#about:before{
content: '';
position: absolute;
bottom: 0px;
left:50%;
transform: translateX(-50%);
height: 30px;
width: 1px;
background: #000
}

section#about:after{
content: '';
position: absolute;
bottom: -30px;
left:50%;
transform: translateX(-50%);
height: 30px;
width: 1px;
background: #fff
}

article.about{
display: flex;
align-items: start
}

h4.about{
width: 300px;
line-height: 2
}

h4.about b{
font-size:130%;

}

div.about_image{
width: 600px;
aspect-ratio: 16 / 8;
margin: 0px 0px 0px auto
}

img.about_image{
width: 100%;
height: 100%;
object-fit: cover
}

img.about_sub{
width: 280px;
margin-left: 40px;
position: relative;
top:-40px
}

/*--------------------news--------------------*/

div.news{
padding: 40px;
border:solid 1px #efefef;
border-radius: 10px;
}

ul.news{
width: 1000px;
margin: 0px auto;
display: flex;
align-items: start
}

li.news_title{
width: 180px;
}

li.news{
width: 560px;
vertical-align: middle
}

li.news_more{
text-align: right;
vertical-align: middle
}

h2.news{
font-size:38px;
font-family: 'Revans';
font-weight: 300
}

i.news{
display: block;
font-size: 14px;
color: #666
}

article.news{
display: flex;
align-items: center;
border-bottom: solid 1px #dcdcdc;
padding: 8px 0px 8px 0px;
letter-spacing: 0.05em;
font-weight: normal
}

p.news_date{
font-size:15px;
}

h4.news{
width: 110px;
padding: 5px 0px 5px 0px;
margin: 0px 15px 0px 15px;
font-size:13px;
background: url(../../img/icon/back.png) no-repeat center;
background-size: cover;
text-align: center;
color:#fff;
}

h3.news{
font-size:14px;
}

a.news{
font-size:14px;
text-decoration: underline;
font-weight: 600
}

a.news:hover{
text-decoration: none;
}

article.news_page{
width: 700px;
margin: 0px auto
}

h2.news_page_title{
font-family: 'Playfair', serif;
font-size: 20px;
color: #019add;
margin-bottom: 15px
}

h4.news_page_title{
font-size:14px;
font-weight: 400;
line-height: 1.8
}

/*--------------------welcom--------------------*/

section#welcom{
text-align: center;
background: #f8f5f0;
padding: 60px 0px ;
}

div.welcom{
width: 580px;
margin: 0px auto;
display: flex;
justify-content: space-between;
align-items: start
}

article.welcom{
width: 48%;
}

p.welcom{
aspect-ratio: 16 / 9;
position: relative;
margin-bottom: 40px
}

img.welcom{
width: 100%;
height: 100%
}

span.welcom_icon{
width: 46px;
height: 46px;
display: block;
background: url(../../img/icon/back.png) no-repeat center;
background-size: cover;
border-radius: 50%;
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center
}

span.welcom_icon img{
width: 60%
}

h3.welcom{
font-size:22px;
width: max-content;
padding: 0px 10px 0px 10px;
font-family: 'Revans';
letter-spacing: 0.02em;
border-bottom: solid 2px #000;
margin: 0px auto 20px auto
}

h4.welcom{
width: 80%;
margin: 0px auto;
text-align: justify;
font-size: 13px;
line-height: 1.6;
font-weight: 400
}

/*--------------------party--------------------*/

section#party{
width: 100%;
aspect-ratio: 16 / 6;
background: url(../img/header/mixed-foods-soup-salad-pastry.jpg) no-repeat center;
background-size: cover;
padding-top: 20px
}

img.party_image{
width: 300px;
margin: 0px auto 20px auto
}

h3.party{
margin-bottom: 20px;
}

span.party{
width: 400px;
aspect-ratio: 512 / 135;
margin: 0px auto;
line-height: 110px;
display: block;
text-align: center;
font-size:60px;
font-family: 'Revans';
color: #fff;
background: url(../img/party/f1134_5.png) no-repeat center;
background-size: contain
}

h4.party{
text-align: center;
color: #fff;
font-size:16px;
margin-bottom: 20px
}

article.party{
width: 480px;
border-radius: 15px;
margin: 0px auto;
padding: 30px;
background: rgba(255,255,255,0.8);
position: relative
}

h5.party{
border-left:solid 2px #000;
padding-left: 10px;
font-size:14px;
line-height: 1.7;
position: relative
}

img.party_icon{
width: 70px;
position: absolute;
top:-10px;
right:-10px;
}

/*--------------------access--------------------*/

section#access{
width: 1000px;
padding: 60px;
margin: 0px auto;
}

iframe.map{
width: 900px;
height: 400px;
margin-bottom: 30px
}

article.access{
width: 900px;
margin: 0px 0px 0px 100px;
display: flex;
align-items: start
}

h4.access{
line-height: 1.8;
margin-bottom: 20px
}

div.access{
padding-left: 50px
}

h3.access_title{
font-family: 'Revans';
font-size:20px;
letter-spacing: 0.02em;
font-weight: 500;
margin-bottom: 10px
}

/*--------------------footer--------------------*/

footer.footer{
background: #1e1e1e;
padding: 40px 0px 40px 0px;
font-weight: 200;
position: relative;
color: #fff
}

footer.footer a{
color: #fff
}

a.footer_banner{
width: 340px;
display: block;
margin-bottom: 20px
}

p.totop{
width: 42px;
height: 52px;
border:solid 2px #dcdcdc;
border-radius: 5px;
background: #fff;
position:absolute;
right: 10%;
top:-26px
}

p.totop img{
width: 60%;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
opacity: 0.7
}

ul.footer{
width: 1000px;
margin: 0px auto;
display: flex;
justify-content: space-between;
align-items: start
}

img.footer_logo{
width: 160px;
margin-bottom: 15px
}

h3.footer{
margin-bottom: 100px;
}

div.footer_other{
margin-bottom: 20px
}

a.footer_other{
margin-right: 30px;
}

a.footer_other:hover{
text-decoration: underline
}

p.footer_title{
font-family: 'Revans';
font-size:20px;
letter-spacing: 0.02em;
font-weight: 500;
margin-bottom: 30px
}

p.footer_title:after{
content: "";
width: 120px;
height: 1px;
background: #fff;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}

a.footer_link{
display: block;
margin-bottom: 15px
}

a.footer_link:hover{
text-decoration: underline
}

h4.footer{
font-size:11px;

letter-spacing: 0.02em;
margin-bottom: 10px
}

a.entry{
background:#999;
background-size: 100%;
color: #fff;
display: block;
text-align: center;
height: 60px;
line-height: 60px;
margin-bottom: 30px;
font-weight: 600
}

a.entry:hover{
background: #fff;
color:#000
}