@charset "utf-8";

html {
font-size: 62.5%;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1.6rem;
line-height: 200%;
color: #00243b;
background:#eeebdd;
font-family: "YuMincho", "Yu Mincho", "Zen Old Mincho", "Hiragino Mincho ProN", "MS PMincho", serif;
font-weight: 500;
word-wrap: break-word;
}
body.noscroll {
overflow: hidden;
block-size: 100vh;
}
img, iframe, video {
inline-size: 100%;
vertical-align: bottom;
}
a {
color: #873d24;
}
.box {
inline-size: 90%;
max-inline-size: 1000px;
margin-inline: auto;
}
.btn {
display: table;
background: #873d24;
color: #fff;
transition: .6s;
margin-inline: auto;
}
.black {
font-weight: 900;
}
.bold {
font-weight: bold;
}
.f4f1ed {
background: #f4f1ed;
}
.t-center {
text-align: center;
}

#container{
position: relative;
}

#header{
inline-size: 100%;
background: #00243b;
position: sticky;
top: 0;
left: 0;
z-index: 100;
}
#g-nav #g-nav-list > ul{
display: flex;
}
#g-nav #g-nav-list > ul > li > a{
display: block;
position: relative;
transition:all 0.3s;
font-weight: 700;
color: #fff;
}
#g-nav #g-nav-list > ul > li.current a::before,#g-nav #g-nav-list > ul > li > a:hover::before{
content: "";
position: absolute;
top: 0;
left:50%;
inline-size: 1px;
block-size: 20px;
background: #FFF;
animation: gnavipathmove 2.4s ease-in-out infinite;
opacity:0;
color:#6a2e9e;
}
@keyframes gnavipathmove{
0%{
block-size:0;
top:0;
opacity: 0;
}
30%{
block-size:20px;
opacity: 1;
}
100%{
block-size:0;
top:30px;
opacity: 0;
}
}
.openbtn{
display: none;
}

#main section h2 {
font-weight: bold;
text-align: center;
}

#faq dl dt, #faq dl dd {
position: relative;
}
#faq dl dt:before, #faq dl dd:before {
position: absolute;
}
#faq dl dt:before {
content: "Q";
display: inline-block;
background: #00243b;
color: #fff;
border-radius: 4px;
}
#faq dl dd:before {
content: "A";
display: inline-block;
border: #00243b 1px solid;
border-radius: 4px;
}
#faq dl dd:last-child {
padding-bottom: 0;
}
#faq dl dt span, #faq dl dd span {
display: block;
}

#page-top {
position: fixed;
right: 10px;
z-index: 10;
cursor: pointer;
opacity: 0;
transform: translateY(100px);
}
#page-top a{
display: flex;
justify-content:center;
align-items:center;
inline-size: 60px;
block-size: 60px;
color: #6C6C6C;
border:1px solid #6C6C6C;
transition:all 0.3s;
background: #fff;
}
#page-top.UpMove{
animation: UpAnime 0.5s forwards;
animation-delay:0s;
}
@keyframes UpAnime{
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#page-top.DownMove{
animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 1;
transform: translateY(100px);
}
}

.blur{
animation-name: blurAnime;
animation-duration:1s;
animation-fill-mode:forwards;
}
@keyframes blurAnime{
from {
filter: blur(10px);
opacity: 0;
}
to {
filter: blur(0);
opacity: 1;
}
}
.blurTrigger{
opacity: 0;
}

#footer {
background: #fff;
}
#footer #address img {
filter: invert(100%);
}
#footer #address ul {
display: flex;
}
#footer #address ul li {
padding-right: 20px;
}
#footer #address ul li a {
font-size: 1.5em;
}
#footer #tel p {
display: table;
margin-inline: auto;
}
#footer #tel a {
display: block;
font-weight: 900;
}
#footer #reserve p {
display: table;
margin-inline: auto;
}
#footerNav {
background: #873d24;
}
#footerNav ul li a {
color: #fff;
}
#footer small {
display: block;
background: #00243b;
color: #fff;
text-align: center;
font-size: 12px;
padding: 4px 0;
}

@media print,screen and (max-width:560px) {
[id] {
  scroll-margin-top: 100px;
}

.btn {
padding: 4px 10px;
font-size: 3.6vw;
}

#hero {
padding-bottom: 60px;
}

#g-nav #g-nav-list > ul {
top:45%;
}
.sub-menu li a {
font-size: 3.5vw;
}

#main > section, #wrap > section {
padding-bottom: 60px;
}
#main section h2 {
font-size: 5vw;
letter-spacing: 1px;
padding-bottom: 20px;
}

#faq dl {
margin-bottom: 30px;
}
#faq dl dt {
padding-bottom: 8px;
}
#faq dl dd {
padding-bottom: 20px;
}
#faq dl dt:before, #faq dl dd:before {
padding: 1px 12px 4px;
}
#faq dl dt span, #faq dl dd span {
padding-left: 44px;
}

#footer .box {
padding: 40px 0 20px;
}
#footer #address, #footer #tel {
padding-bottom: 30px;
margin-bottom: 30px;
border-bottom: 1px solid #ddd;
}
#footer #address h6 {
inline-size: 180px;
margin: 0 auto 16px;
}
#footer #address address {
text-align: center;
}
#footer #address ul {
justify-content: center;
}
#footer #tel {
text-align: center;
}
#footer #tel a {
font-size: 8vw;
margin: 10px 0;
}
#footer #reserve p {
padding-bottom: 10px;
}
}

@media print,screen and (min-width:561px) {
[id] {
  scroll-margin-top: 140px;
}

.tc {
text-align: center;
}
.vertical {
writing-mode: vertical-rl;
text-align: left;
display: inline-block;
}

a[href^="tel:"] {
pointer-events: none;
}

#main > section, #wrap > section {
padding-bottom: 100px;
}
#main section h2 {
font-size: 3rem;
letter-spacing: 2px;
padding-bottom: 30px;
}

#faq dl {
padding: 20px;
block-size: 260px;
overflow-y: auto;
margin-bottom: 20px;
}
#faq dl dt {
padding-bottom: 10px;
}
#faq dl dd {
padding-bottom: 30px;
}
#faq dl dt:before, #faq dl dd:before {
font-size: 1.8rem;
line-height: 100%;
padding: 4px 10px 8px;
}
#faq dl dt span, #faq dl dd span {
padding-left: 40px;
}

#page-top a i {
font-size: 2rem;
}

#footer .box {
padding: 80px 0 60px;
display: flex;
}
#footer .box > div {
inline-size: 32%;
}
#footer #address h6 {
max-inline-size: 240px;
padding-bottom: 10px;
}
#footer #tel {
inline-size: 34%;
padding: 0 1%;
margin: 0 1%;
box-sizing: border-box;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
#footer #tel a {
margin: 10px 0;
}
#footer #reserve p {
padding-bottom: 20px;
}
}

@media print,screen and (min-width: 561px) and (max-width: 768px) {
.btn {
padding: 4px 10px;
}

#hero {
padding: 80px 0 60px;
}

#footer #tel a {
font-size: 2.6rem;
}
}

@media print,screen and (max-width:768px) {
#header {
padding: 24px 0;
}
.header__logo {
inline-size: 180px;
}

#footerNav {
display: none;
}
}

@media print,screen and (min-width:769px) {
#page-top a:hover{
background: #777;
}

#footer #reserve p {
font-size: 1.8rem;
}
#footerNav {
padding: 10px 0;
}
#footerNav ul {
display: flex;
justify-content: center;
}
#footerNav ul li {
border-right: 1px solid #fff;
}
#footerNav ul li:first-child {
padding-left: 0;
}
#footerNav ul li:last-child {
border-right: none;
padding-right: 0;
}
#footerNav ul li a {
line-height: 100%;
}
}

@media print,screen and (min-width: 769px) and (max-width: 1024px) {
.btn {
padding: 4px 18px;
}

#header {
padding: 16px 0;
}
.header__logo {
inline-size: 320px;
}

#hero {
padding: 77px 0 100px;
}

#footer #tel a {
font-size: 3rem;
}
#footerNav ul li {
padding: 0 10px;
}
#footerNav ul li a {
font-size: 1.4rem;
}
}

@media print,screen and (min-width: 561px) and (max-width: 1024px) {
#g-nav #g-nav-list > ul {
top:40%;
}
}

@media print,screen and (max-width:1024px) {
.header__logo {
margin-inline: auto;
}

.openbtn{
display: block;
position: fixed;
z-index: 9999;
cursor: pointer;
top:10px;
right:10px;
inline-size: 55px;
block-size:55px;
border:1px solid #fff;
}
.openbtn span{
display: inline-block;
transition: all .4s;
position: absolute;
font-size: 10px;
}
.openbtn span:nth-of-type(1),.openbtn span:nth-of-type(3) {
block-size: 1px;
background: #fff;
inline-size: 62%;
left: 10px;
}
.openbtn span:nth-of-type(1) {
top:13px;	
}
.openbtn span:nth-of-type(2) {
top:12px;
left:14px;
text-transform: uppercase;
color: #fff;
}
.openbtn span:nth-of-type(3) {
top:41px;
}
.openbtn.active span:nth-of-type(1) {
top: 22px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
inline-size: 30%;
}
.openbtn.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn.active span:nth-of-type(3){
top: 34px;
left: 18px;
transform: translateY(-6px) rotate(45deg);
inline-size: 30%;
}
#g-nav.panelactive{
inline-size:100%;
block-size: 100vh;
}

.circle-bg{
position: fixed;
z-index:3;
inline-size: 100px;
block-size: 100px;
border-radius: 50%;
background:#00243b;
transform: scale(0);
bottom:-50px;
left:calc(50% - 50px);
transition: all .6s;
}
.circle-bg.circleactive{
transform: scale(50);
}
#g-nav-list{
display: none;
position: fixed;
z-index: 999; 
inline-size: 100%;
block-size: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#g-nav.panelactive #g-nav-list{
display: block;
}
#g-nav #g-nav-list > ul {
opacity: 0;
position: absolute;
z-index: 999;
left:50%;
transform: translate(-50%,-50%);
display: block;
inline-size: 90%;
}
#g-nav.panelactive #g-nav-list > ul {
opacity:1;
}
#g-nav.panelactive #g-nav-list > ul > li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
#g-nav #g-nav-list > ul > li {
padding-bottom: 10px;
}
#g-nav #g-nav-list > ul > li > a {
padding-left: 20px;
font-size: 1.1em;
}
#g-nav a{
color: #fff;
}
#g-nav #g-nav-list > ul > li.current a::before,#g-nav #g-nav-list > ul > li > a:hover::before{
animation: none;
left:0;
top:48%;
inline-size:10px;
block-size: 1px;
background: #fff;
opacity: 1;
}
.sub-menu {
display: flex;
flex-wrap: wrap;
padding-left: 20px;
}
.sub-menu li {
padding-right: 16px;
}
.sub-menu li a {
line-height: 1;
}
}

@media print,screen and (max-height:700px) {
#g-nav #g-nav-list > ul > li {
padding-bottom: 12px;
}
#g-nav #g-nav-list > ul > li > a {
font-size: 3.5vw;
line-height: 1;
}
.sub-menu li a {
font-size: 3.2vw;
}
}

@media print,screen and (min-width:1025px) {
.btn {
font-size: 1.8rem;
letter-spacing: 1px;
padding: 10px 24px;
}
.btn:hover {
background:#5d0e07;
}

#header > div {
display: flex;
justify-content: space-between;
align-items: center;
inline-size: 90%;
margin-inline: auto;
}
.header__logo {
inline-size: 240px;
}
#main-nav {
inline-size: 680px;
}
#g-nav #g-nav-list > ul {
display: flex;
justify-content: space-between;
}
#g-nav #g-nav-list > ul > li > a{
padding: 34px 0;
}
#g-nav ul li {
position: relative;
}
.sub-menu {
display: none;
background: #00243b;
position: absolute;
top: 100%;
left: 0;
min-inline-size: 140px;
}
.sub-menu li {
border-top: 1px solid #fff;
}
.sub-menu li a{
display: block;
padding: 10px;
font-weight: 700;
color: #fff;
padding: 12px 20px;
font-size: 1.4rem;
white-space: nowrap;
}
.has-child {
position: relative;
}
.has-child > .sub-menu {
position: absolute;
top: 100%;
left: 0;
min-inline-size: 140px;
background: #00243b;
display: none;
}
.has-child:hover > .sub-menu {
display: block;
}

#hero {
padding-block: 100px;
}

#footer #tel a {
font-size: 4rem;
}
#footerNav ul li {
padding: 0 16px;
}
#footerNav ul li a {
font-size: 1.6rem;
}
}