@font-face {
  font-family: 'Lucida';
  src: url('../font/lucida-calligraphy-regular.ttf') format('truetype');
}

/* base.css */
/*--------------------------------------*/

html {
}

body * {
    box-sizing: border-box;
}

body {
    position: relative;
    font-family: 'Shippori Mincho', serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 62.5%;
    color: #333d4c;
    letter-spacing: normal;
    -webkit-text-size-adjust: 100%;
}


/* text link color */
/*--------------------------------------*/

a {
    text-decoration:none;
    transition: all .3s ease;
}

a img {
    opacity:1;
    transition:all .3s ease;
}
a:hover img {
    opacity:0.7;
}
@media only screen and (max-width: 768px) {
    a:hover img {
        opacity: 1;
    }
}


/* wrapper */
/*--------------------------------------*/
#wrapper {
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: #E1F0EE;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
#wrapper img {
    max-width:100%;
    height:auto;
    vertical-align:bottom;
}

/* section */
section {
    position: relative;
    width: 100%;
}
section .inner {
    position: relative;
    width: 94%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    z-index: 1;
}
@media only screen and (max-width: 750px) {
    section .inner {
        width: 90%;
    }
}

/* pc/sp */
.pc {}
.sp {display:none;}



/* common font/list */
/*--------------------------------------*/
strong {
    font-weight:700;
}

.center {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align:center !important;
}

.right {
    text-align:right !important;
}

.eol {
    margin-bottom:2.5em !important;
}

.bottom {
    margin-bottom:60px !important;
}

.nm {
    margin-bottom:0 !important;
}

.big {
    font-size:1.4em;
}

.note {
    font-size:0.8em;
}

.red {
    color:#ff0000;
}


/* sup sub */
sup {
    vertical-align:super;
    font-size:0.6em;
}
sub {
    vertical-align:sub;
    font-size:0.6em;
}

ul {
    letter-spacing:-0.5em;
}
ul li {
    letter-spacing:normal;
}


/* margin&padding */
.mb00 { margin-bottom:0 !important; }
.mb05 { margin-bottom:5px !important; }
.mb10 { margin-bottom:10px !important; }
.mb15 { margin-bottom:15px !important; }
.mb20 { margin-bottom:20px !important; }
.mb25 { margin-bottom:25px !important; }
.mb30 { margin-bottom:30px !important; }
.mb35 { margin-bottom:35px !important; }
.mb40 { margin-bottom:40px !important; }
.mb45 { margin-bottom:45px !important; }
.mb50 { margin-bottom:50px !important; }
.mb60 { margin-bottom:60px !important; }
.mb70 { margin-bottom:70px !important; }
.mb80 { margin-bottom:80px !important; }
.mb90 { margin-bottom:90px !important; }
.mb100 { margin-bottom:100px !important; }
.mb120 { margin-bottom:120px !important; }
.mb140 { margin-bottom:140px !important; }

.pb00 { padding-bottom:0 !important; }
.pb05 { padding-bottom:5px !important; }
.pb10 { padding-bottom:10px !important; }
.pb15 { padding-bottom:15px !important; }
.pb20 { padding-bottom:20px !important; }
.pb25 { padding-bottom:25px !important; }
.pb30 { padding-bottom:30px !important; }
.pb35 { padding-bottom:35px !important; }
.pb40 { padding-bottom:40px !important; }
.pb45 { padding-bottom:45px !important; }
.pb50 { padding-bottom:50px !important; }
.pb60 { padding-bottom:60px !important; }
.pb70 { padding-bottom:70px !important; }
.pb80 { padding-bottom:80px !important; }
.pb90 { padding-bottom:90px !important; }
.pb100 { padding-bottom:100px !important; }
.pb120 { padding-bottom:120px !important; }
.pb140 { padding-bottom:140px !important; }


/* map link */
area {
    outline:0;
}


/* breadcrumbs */
#breadcrumbs {
    overflow-x: auto;
}
#breadcrumbs ul {
    display: flex;
    width: 90%;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding: 1em 0;
    font-size: 16px;
}
#breadcrumbs ul li {
    white-space: nowrap;
}
#breadcrumbs ul li a {
    position: relative;
    color: #333d4c;
}
#breadcrumbs ul li a:after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background-color: #333d4c;
    transition: all .3s ease;
    content: "";
}
#breadcrumbs ul li a:hover:after {
    width: 100%;
}
#breadcrumbs ul li:not(:last-child):after {
    margin: 0 1em;
    content: "＞";
}
@media only screen and (max-width: 750px) {
    #breadcrumbs ul {
        font-size: 3.0vw;
    }
}

/* pagetop */
.pagetop {
    position: fixed;
    visibility: hidden;
    right: 6%;
    bottom: 6%;
    width: 48px;
    height: 48px;
    opacity: 0;
    transition: all .3s ease;
    z-index: 100;
}
.pagetop.active {
    visibility: visible;
    opacity: 1;
}
.pagetop.stop {
    position: absolute;
    bottom: 500px;
}
.pagetop a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(104,173,207,0.7);
    border-radius: 100%;
    text-indent: -9999px;
}
.pagetop a:before,
.pagetop a:after {
  position: absolute;
  top: 35%;
  left: calc(50% - 2px);
  width: 4px;
  height: 35%;
  border-radius: 9999px;
  background-color: #ffffff;
  transform-origin: 50% 2px;
  content: "";
}
.pagetop a:before {
  transform: rotate(45deg);
}
.pagetop a:after {
  transform: rotate(-45deg);
}
.pagetop a:hover {
    opacity: 0.7;
}
@media only screen and (max-width: 750px) {
    .pagetop {
        bottom: 10%;
    }
    .pagetop.stop {
        bottom: 16vw;
    }
}

/* fixed button */
ul#fixed-btn {
    position: fixed;
    top: 115px;
    right: 0;
    z-index: 99;
}
ul#fixed-btn li {
    margin-bottom: 20px;
}
ul#fixed-btn li a {
    height: 8em;
    background-color: rgba(104,173,207,0.7);
    text-align: center;
    line-height: 2.25;
    font-family: "Noto Sans", sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.1em;
    writing-mode: vertical-rl;
    color: #ffffff;
}
ul#fixed-btn li a:hover {
    background-color: rgba(98,161,194,1);
}
@media only screen and (max-width: 750px) {
    ul#fixed-btn {
        top: inherit;
        right: inherit;
        left: 0;
        bottom: 14vh;
    }
    ul#fixed-btn li {
        margin-bottom: 2vw;
    }
    ul#fixed-btn li a {
        height: auto;
        padding: 1.5em 0;
        font-size: 3.0vw;
    }
}


/* flex */
.flex-wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* button arrow */
a.btn-arrow {
    display: block;
    position: relative;
    width: 174px;
    padding: 0.75em 0 0.75em 0.75em;
    border-left: 1px solid #333d4c;
    border-bottom: 1px solid #333d4c;
    text-align: left;
    font-family: 'Lucida', 'Shippori Mincho', serif;
    font-size: 16px;
    font-weight: 500;
    color: #333d4c;
    text-decoration: none;
}
a.btn-arrow:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 102px;
    height: 1px;
    background-color: #333d4c;
    content: "";
}
a.btn-arrow span {
    position: relative;
    padding-right: 3em;
    transition: all .3s ease;
}
a.btn-arrow span:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.25em;
    height: 1.5em;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    background-image: url(../images/arrow.svg);
    margin: auto;
    transition: all .3s ease;
    content: "";
}
a.btn-arrow:hover span:after {
    transform: translateX(0.5em);
}
@media only screen and (max-width: 750px) {
    a.btn-arrow {
        width: 32vw;
        font-size: 3.0vw;
    }
    a.btn-arrow:before {
        width: 20vw;
    }
}
/* button not link */
a.btn-arrow.not-link {
    pointer-events: none;
}
a.btn-arrow.not-link span:after {
    display: none;
}


/* reservation */
/*--------------------------------------*/
.reservation-contents {
    position: relative;
    width: 80%;
    max-width: 794px;
    margin-left: auto;
    margin-right: auto;
    padding: 40px 8% 32px;
    border-radius: 9999px;
}
.reservation-contents .circle {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -50px;
    left: -102px;
    width: 183px;
    height: 183px;
    border-radius: 50%;
}
@media only screen and (max-width: 1000px) {
    .reservation-contents {
        padding: 60px 10% 50px 14%;
    }
    .reservation-contents .circle {
        left: -80px;
    }
}
.reservation-contents .circle span {
    font-size: 24px;
    font-weight: 500;
    color: #ffffff;
}
.reservation-contents h2 {
    line-height: 1.4;
    font-family: "游明朝体", "Yu Mincho", YuMincho, serif;
    font-size: 32px;
    letter-spacing: 0.05em;
}
.reservation-contents .btn a {
    margin-left: auto;
}
@media only screen and (max-width: 750px) {
    .reservation-contents {
        width: 90%;
        padding: 12vw 10% 8vw;
    }
    .reservation-contents .circle {
        width: 23vw;
        height: 23vw;
        top: -12vw;
        left: -3vw;
    }
    .reservation-contents .circle span {
        font-size: 3.0vw;
    }
    .reservation-contents h2 {
        font-size: 5.4vw;
    }
}


/* - 750px */
/*-----------------------------------------------------------*/
@media only screen and (max-width: 750px) {


/* pc/sp */
.pc {display:none;}
.sp {display:block;}

/* flex */
.flex-wrap {
    display: block;
}

/* margin&padding */
.mb05 { margin-bottom:0.6vw !important; }
.mb10 { margin-bottom:1.3vw !important; }
.mb15 { margin-bottom:2vw !important; }
.mb20 { margin-bottom:2.6vw !important; }
.mb25 { margin-bottom:3.3vw !important; }
.mb30 { margin-bottom:4vw !important; }
.mb35 { margin-bottom:4.6vw !important; }
.mb40 { margin-bottom:5.3vw !important; }
.mb45 { margin-bottom:6vw !important; }
.mb50 { margin-bottom:6.6vw !important; }
.mb60 { margin-bottom:8vw !important; }
.mb70 { margin-bottom:9.3vw !important; }
.mb80 { margin-bottom:10.6vw !important; }
.mb90 { margin-bottom:12vw !important; }
.mb100 { margin-bottom:13.3vw!important; }
.mb120 { margin-bottom:16vw !important; }
.mb140 { margin-bottom:18.6vw !important; }

.pb05 { padding-bottom:0.6vw !important; }
.pb10 { padding-bottom:1.3vw !important; }
.pb15 { padding-bottom:2vw !important; }
.pb20 { padding-bottom:2.6vw !important; }
.pb25 { padding-bottom:3.3vw !important; }
.pb30 { padding-bottom:4vw !important; }
.pb35 { padding-bottom:4.6vw !important; }
.pb40 { padding-bottom:5.3vw !important; }
.pb45 { padding-bottom:6vw !important; }
.pb50 { padding-bottom:6.6vw !important; }
.pb60 { padding-bottom:8vw !important; }
.pb70 { padding-bottom:9.3vw !important; }
.pb80 { padding-bottom:10.6vw !important; }
.pb90 { padding-bottom:12vw !important; }
.pb100 { padding-bottom:13.3vw !important; }
.pb120 { padding-bottom:16vw !important; }
.pb140 { padding-bottom:18.6vw !important; }


}
/* - 750px end */