.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}:root {
font-size: 62.5%;
--s-5: calc(var(--s1) / 2);
--s1: 0.8rem;
--s1-5: calc(var(--s1) * 1.5);
--s2: calc(var(--s1) * 2);
--s2-5: calc(var(--s1) * 2.5);
--s3: calc(var(--s1) * 3);
--s4: calc(var(--s1) * 4);
--s5: calc(var(--s1) * 5);
--s6: calc(var(--s1) * 6);
--s7: calc(var(--s1) * 7);
--s8: calc(var(--s1) * 8);
--s9: calc(var(--s1) * 9);
--s10: calc(var(--s1) * 10);
--s11: calc(var(--s1) * 11);
--s12: calc(var(--s1) * 12);
--color01: #231815;
--color02: #ffffff;
--color03: rgba(35, 24, 21, 0.3);
--color04: #887858;
--color05: #F4F0ED;
--color06: #790516;
}
@media screen and (max-width: 1280px) {
:root {
font-size: 0.78125vw;
}
}
body {
margin: 0;
padding: 0;
background: var(--color05);
color: var(--color01);
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-size: 1.6rem;
font-weight: 400;
line-height: 1;
letter-spacing: 0.1em;
-webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-weight: normal;
clear: both;
}
ul, ol, dl, p, img, form, dt, dd, figure {
margin: 0;
padding: 0;
border: 0;
}
li {
list-style: none;
}
input, button, textarea, select {
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
font-size: 1.6rem;
font-family: "Noto Serif JP", serif;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
img.img-height {
width: auto;
max-width: inherit;
height: 100%;
}
a {
color: var(--color01);
transition: opacity 0.6s ease, color 0.6s ease;
outline: none;
}
a:active {
color: var(--color01);
text-decoration: none;
}
@media (hover: hover) {
a:hover {
color: var(--color01);
text-decoration: none;
}
}
p {
line-height: 2;
}
p + p {
margin-top: 1em;
}
strong {
font-weight: 700;
}
em {
font-style: italic;
font-weight: normal;
}
small {
font-size: 80%;
}
* {
box-sizing: border-box;
}
@media screen and (min-width: 768px) {
.for-sp {
display: none;
}
}
@media screen and (max-width: 767px) {
.for-pc {
display: none;
}
}  .fade-up.js-inview {
opacity: 0;
transform: translateY(5rem);
transition: opacity 1s ease, transform 1.5s ease;
}
.fade-up.js-inview.is-inview {
opacity: 1;
transform: translateY(0);
} .l-center {
max-width: 112rem;
margin-right: auto;
margin-left: auto;
padding-right: var(--s10);
padding-left: var(--s10);
box-sizing: content-box;
}
.l-center-narrow {
max-width: 88rem;
margin-right: auto;
margin-left: auto;
padding-right: var(--s10);
padding-left: var(--s10);
box-sizing: content-box;
} .l-over-contents-right {
--margin-right: calc((100vw - var(--s10) - 100%) / 2);
width: calc(100% + var(--margin-right));
margin-right: calc(var(--margin-right) * -1);
} .l-stack-01,
.l-stack-02,
.l-stack-03,
.l-stack-04,
.l-stack-05 {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.l-stack-01 > *,
.l-stack-02 > *,
.l-stack-03 > *,
.l-stack-04 > *,
.l-stack-05 > * {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.l-stack-01 {
gap: var(--s3);
}
.l-stack-02 {
gap: var(--s5);
}
.l-stack-03 {
gap: var(--s1-5);
}
.l-stack-04 {
gap: var(--s10);
}
.l-stack-05 {
gap: var(--s8);
} .l-cluster {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--s1-5);
} .l-sidebar {
display: flex;
gap: var(--s10);
}
.l-sidebar__side {
width: 24rem;
}
.l-sidebar__main {
flex: 1;
} .l-grid {
--minmum: 50%;
display: grid;
grid-gap: 0;
}
.l-grid-three {
--minmum: calc((100% - var(--s2) * 2) / 3);
display: grid;
grid-gap: var(--s2);
}
@supports (width: min(var(--minmum), 100%)) {
.l-grid,
.l-grid-three {
grid-template-columns: repeat(auto-fill, minmax(min(var(--minmum), 100%), 1fr));
}
} .l-column-01 {
display: flex;
flex-wrap: wrap;
gap: var(--s10);
}
.l-column-01__side {
width: 17rem;
}
.l-column-01__main {
flex: 1;
}
.l-column-02 {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--s10);
}
.l-column-02__side {
width: 36rem;
}
.l-column-02__main {
flex: 1;
}
.l-column-02--restaurant {
align-items: center;
}
.l-column-03 {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 14rem;
}
.l-column-03__side {
flex: 1;
}
.l-column-03__main {
width: 48rem;
}
.l-column-04 {
display: flex;
flex-wrap: wrap;
}
.l-column-04__side {
width: 24rem;
}
.l-column-04__main {
flex: 1;
}
.l-column-05 {
display: flex;
flex-wrap: wrap;
gap: var(--s10);
}
.l-column-05__side {
width: 53.6rem;
}
.l-column-05__main {
flex: 1;
}
.l-column-06 {
display: flex;
flex-wrap: wrap;
gap: var(--s3) var(--s8);
}
.l-column-06__side {
width: 38rem;
}
.l-column-06__main {
flex: 1;
}
.l-column-07 {
display: flex;
flex-wrap: wrap;
}
.l-column-07__side {
width: 48rem;
}
.l-column-07__main {
padding: var(--s10) var(--s8) var(--s8);
flex: 1;
} .l-grid-areas-01 {
display: grid;
grid-template-areas: "text img" "btn img";
grid-template-columns: 1fr 33.6rem;
grid-template-rows: auto 1fr;
grid-gap: var(--s5) 0;
}
.l-grid-areas-01__cell-01 {
grid-area: text;
}
.l-grid-areas-01__cell-02 {
grid-area: img;
}
.l-grid-areas-01__cell-03 {
grid-area: btn;
}
.l-grid-areas-02 {
display: grid;
grid-template-areas: "title img" "text img";
grid-template-columns: 50rem 1fr;
grid-template-rows: auto 1fr;
grid-gap: var(--s6) 14rem;
}
.l-grid-areas-02__cell-01 {
grid-area: title;
}
.l-grid-areas-02__cell-02 {
grid-area: img;
}
.l-grid-areas-02__cell-03 {
grid-area: text;
} .l-scroll-x {
width: 100%;
padding-bottom: var(--s1);
overflow-x: auto;
overflow-y: hidden;
scrollbar-color: #ddd transparent;
scrollbar-width: 0.6rem;
}
.l-scroll-x::-webkit-scrollbar {
height: 0.6rem;
}
.l-scroll-x::-webkit-scrollbar-track {
border-radius: 0.3rem;
background: #eee;
}
.l-scroll-x::-webkit-scrollbar-thumb {
border-radius: 0.3rem;
background: #ddd;
} .l-gnavi-01 {
display: grid;
grid-template-areas: "menu-01 menu-02" "menu-01 sns";
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
grid-gap: 0 16rem;
align-items: flex-end;
}
.l-gnavi-01__cell-01 {
grid-area: menu-01;
}
.l-gnavi-01__cell-02 {
grid-area: menu-02;
}
.l-gnavi-01__cell-03 {
grid-area: sns;
} .l-footer-01 {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--s5) var(--s3);
}
.l-footer-02 {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: var(--s5) var(--s3);
}
.l-footer-01 + .l-footer-02 {
margin-top: var(--s10);
} .l-page {
position: relative;
}
.l-page__sidebar {
width: var(--s10);
height: 100vh;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.l-page__main {
padding-left: var(--s10);
} .l-btn-01 {
display: flex;
justify-content: center;
gap: var(--s10);
}
.l-btn-01 > * {
margin: 0 !important;
} .bg-01 {
background: var(--color05);
} .btn-primary,
.btn-secondary,
.btn-tertiary {
margin: 0 auto;
}
.btn-primary__link,
.btn-secondary__link,
.btn-tertiary__link {
min-height: var(--s8);
padding: var(--s1) var(--s4) var(--s1) var(--s1);
border-radius: var(--s1);
display: flex;
align-items: center;
gap: var(--s2);
color: var(--color02);
text-decoration: none;
overflow: hidden;
position: relative;
z-index: 1;
}
.btn-primary__link::before,
.btn-secondary__link::before,
.btn-tertiary__link::before {
content: "";
width: 0;
height: 0;
border-top: 0.6rem solid transparent;
border-left: 0.8rem solid var(--color05);
border-right: 0.8rem solid transparent;
border-bottom: 0.6rem solid transparent;
}
.btn-primary__link::after,
.btn-secondary__link::after,
.btn-tertiary__link::after {
content: "";
width: calc(100% - var(--s-5));
height: calc(100% - var(--s-5));
border: 1px solid var(--color05);
border-radius: 0.6rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
.l-btn-01 .btn-primary__link,
.l-btn-01 .btn-secondary__link,
.l-btn-01 .btn-tertiary__link {
width: 32rem;
}
.btn-primary__en,
.btn-secondary__en,
.btn-tertiary__en {
height: 0.9rem;
line-height: 0;
}
.btn-primary__link {
background: var(--color06);
}
@media (hover: hover) {
.btn-primary__link:hover {
color: var(--color02);
opacity: 0.5;
}
}
.btn-secondary__link {
background: var(--color04);
}
@media (hover: hover) {
.btn-secondary__link:hover {
color: var(--color02);
opacity: 0.5;
}
}
.btn-tertiary__link {
border: 1px solid var(--color01);
color: var(--color01);
}
.btn-tertiary__link::before {
border-left-color: var(--color01);
}
.btn-tertiary__link::after {
border-color: var(--color01);
}
@media (hover: hover) {
.btn-tertiary__link:hover {
opacity: 0.5;
}
}
.btn-view-more {
width: fit-content;
margin-left: auto;
margin-right: 0;
}
.btn-view-more__link {
min-height: var(--s2-5);
padding: 0 var(--s4) 0 0;
background: url(//kanouya-shimaonsen.com/kny_panel/wp-content/themes/kanouya/assets/img/global/arrow-01-red-right.svg) no-repeat right center/var(--s2-5) var(--s2-5);
display: flex;
align-items: center;
font-size: 1.2rem;
text-decoration: none;
line-height: 1.3;
}
.btn-view-more__img {
max-width: inherit;
height: 0.98rem;
}
@media (hover: hover) {
.btn-view-more__link:hover {
opacity: 0.5;
}
}
.btn-reserve {
width: var(--s8);
height: 20.8rem;
margin: var(--s3) auto;
border-radius: var(--s1);
overflow: hidden;
position: relative;
z-index: 1;
}
.btn-reserve__link {
width: 100%;
height: 100%;
padding: var(--s1);
background: var(--color06);
display: flex;
align-items: center;
gap: var(--s2);
color: var(--color02);
letter-spacing: 0.5em;
writing-mode: vertical-rl;
text-orientation: upright;
text-decoration: none;
position: relative;
z-index: 1;
}
.btn-reserve__link::before {
content: "";
width: 0;
height: 0;
border-top: 0.8rem solid var(--color05);
border-left: 0.6rem solid transparent;
border-right: 0.6rem solid transparent;
border-bottom: 0.8rem solid transparent;
}
.btn-reserve__link::after {
content: "";
width: calc(100% - var(--s-5));
height: calc(100% - var(--s-5));
border: 1px solid var(--color05);
border-radius: 0.6rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
.btn-reserve__en {
width: 0.8rem;
height: 5.5rem;
line-height: 0;
}
@media (hover: hover) {
.btn-reserve__link:hover {
color: var(--color02);
opacity: 0.5;
}
}
.btn-back-to-index {
width: 100%;
}
.btn-back-to-index__link {
width: 32rem;
min-height: var(--s8);
margin: 0 auto;
padding: var(--s1) var(--s2-5);
background: var(--color05);
border-radius: var(--s1);
border: 1px solid var(--color01);
display: flex;
align-items: center;
gap: var(--s2);
text-decoration: none;
overflow: hidden;
position: relative;
z-index: 1;
}
.btn-back-to-index__link::after {
content: "";
width: calc(100% - var(--s-5));
height: calc(100% - var(--s-5));
border: 1px solid var(--color01);
border-radius: 0.6rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
.btn-back-to-index__en {
height: 0.9rem;
line-height: 0;
}
.btn-back-to-index__icon {
width: var(--s3);
height: 1px;
background: var(--color01);
position: relative;
}
.btn-back-to-index__icon::before {
content: "";
width: 100%;
height: var(--s1);
border-top: 1px solid var(--color01);
border-bottom: 1px solid var(--color01);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media (hover: hover) {
.btn-back-to-index__link:hover {
opacity: 0.5;
}
} .icon-toggle {
width: var(--s3);
height: var(--s3);
position: relative;
}
.icon-toggle::before {
content: "";
width: 100%;
height: 1px;
background: var(--color01);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
transition: transform 0.6s ease;
}
.icon-toggle::after {
content: "";
width: 1px;
height: 100%;
background: var(--color01);
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
transition: transform 0.6s ease;
}
.is-open > .icon-toggle::after {
transform: translateX(-50%) rotate(90deg);
} .list-dot-01__item {
padding-left: 1.2em;
line-height: 1.5;
position: relative;
}
.list-dot-01__item::before {
content: "";
width: 0.25em;
height: 0.25em;
background: var(--color01);
border-radius: 100%;
position: absolute;
top: 0.65em;
left: 0.2em;
}
.list-dot-01__item + .list-dot-01__item {
margin-top: var(--s1);
} .text-note {
font-size: 1.2rem;
line-height: 1.3;
}
.text-center {
text-align: center;
} .caption-01 {
display: block;
color: var(--color04);
font-size: 1.2rem;
line-height: 1.3;
text-align: right;
} .summary-01 {
line-height: 2;
}
.summary-01__row {
display: flex;
gap: var(--s3);
}
.summary-01__row + .summary-01__row {
margin-top: var(--s3);
}
.summary-01__label {
width: 8em;
font-weight: 700;
}
.summary-02 {
border-top: 1px solid var(--color01);
border-bottom: 1px solid var(--color01);
line-height: 2;
}
.summary-02__row {
padding: var(--s2);
display: flex;
gap: var(--s2);
}
.summary-02__row + .summary-02__row {
border-top: 1px solid var(--color03);
}
.summary-02__label {
width: 20%;
font-weight: 700;
}
.summary-02__content {
flex: 1;
}
.summary-02__content .list-dot-01:first-child {
margin: var(--s-5) 0;
} .sns-menu-01 {
display: flex;
gap: var(--s3);
}
.sns-menu-01__item {
width: var(--s3);
}
.sns-menu-01__link {
display: block;
text-decoration: none;
}
@media (hover: hover) {
.sns-menu-01__link:hover {
opacity: 0.5;
}
} .category-list-01-wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--s3);
}
.category-list-01__link {
padding-bottom: var(--s-5);
display: block;
font-size: 1.8rem;
font-weight: 600;
line-height: 1.5;
text-decoration: none;
position: relative;
}
.category-list-01__link::before {
content: "";
width: 0%;
height: 1px;
background: var(--color04);
position: absolute;
left: 0;
bottom: 0;
transition: width 0.6s ease;
}
.category-list-01__link.is-active {
pointer-events: none;
position: relative;
}
.category-list-01__link.is-active::before {
width: 100%;
}
.category-list-01__link.is-active::after {
content: "";
width: 0;
height: 0;
border-top: 0.8rem solid var(--color04);
border-left: 0.6rem solid transparent;
border-right: 0.6rem solid transparent;
border-bottom: 0.8rem solid transparent;
position: absolute;
top: calc(100% + 2px);
left: 50%;
transform: translate(-50%, 0);
}
@media (hover: hover) {
.category-list-01__link:hover {
opacity: 0.5;
}
}
.category-list-02-wrapper {
padding: var(--s10) 0;
position: sticky;
top: 0;
left: 0;
}
.category-list-02__link {
padding: var(--s1-5) 0 var(--s1-5) var(--s4);
background: url(//kanouya-shimaonsen.com/kny_panel/wp-content/themes/kanouya/assets/img/global/arrow-01-gray-right.svg) no-repeat left center/var(--s2-5) var(--s2-5);
display: block;
font-size: 1.8rem;
line-height: 1.5;
text-decoration: none;
}
.category-list-02__link.is-current {
background-image: url(//kanouya-shimaonsen.com/kny_panel/wp-content/themes/kanouya/assets/img/global/arrow-01-gold-right.svg);
font-weight: 600;
} .header-area {
background: var(--color05);
border-right: 1px solid var(--color01);
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
}
.header-logo {
width: 63.75%;
}
.header-logo__link {
display: block;
text-decoration: none;
}
@media (hover: hover) {
.header-logo__link:hover {
opacity: 0.5;
}
} .gnavi-btn {
width: 100%;
height: var(--s10);
cursor: pointer;
position: relative;
}
.gnavi-btn > span {
width: var(--s6);
height: 1px;
background: var(--color01);
position: absolute;
left: var(--s2);
}
.gnavi-btn > span:nth-child(1) {
top: 3.2rem;
transform: rotate(0deg);
transition: top 0.6s ease 0.6s, transform 0.6s ease;
}
body.is-gnavi-open .gnavi-btn > span:nth-child(1) {
top: 4rem;
transform: rotate(30deg);
transition: top 0.6s ease, transform 0.6s ease 0.6s;
}
.gnavi-btn > span:nth-child(2) {
top: 4rem;
transform: rotate(0deg);
transition: transform 0.6s ease;
}
body.is-gnavi-open .gnavi-btn > span:nth-child(2) {
transform: rotate(-30deg);
transition: transform 0.6s ease 0.6s;
}
.gnavi-btn > span:nth-child(3) {
width: var(--s4);
top: 4.8rem;
transition: top 0.6s ease 0.6s, opacity 0.6s ease;
}
body.is-gnavi-open .gnavi-btn > span:nth-child(3) {
top: 4rem;
opacity: 0;
transition: top 0.6s ease, opacity 0.6s ease 0.6s;
}
.gnavi-area {
width: calc(100% - var(--s10));
height: 100%;
background: var(--color05);
display: flex;
align-items: center;
justify-content: center;
overflow-x: hidden;
overflow-y: auto;
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
left: var(--s10);
z-index: 20;
transition: opacity 1s ease, visibility 1s ease;
}
.gnavi-area.is-open {
opacity: 1;
visibility: visible;
}
body.is-gnavi-open .gnavi-area {
opacity: 1;
visibility: visible;
}
.gnavi-menu-01__item + .gnavi-menu-01__item {
margin-top: var(--s5);
}
.gnavi-menu-01__link {
padding-top: var(--s4);
display: flex;
align-items: flex-end;
gap: var(--s2);
text-decoration: none;
position: relative;
}
.gnavi-menu-01__link::before {
content: "";
width: var(--s4);
height: 1px;
background: var(--color01);
position: absolute;
top: 0;
left: 0;
}
.gnavi-menu-01__sub {
max-width: inherit;
height: 1.5rem;
}
.gnavi-menu-01__sub-text {
padding-bottom: var(--s-5);
color: var(--color04);
font-size: 1.4rem;
}
.gnavi-menu-01__main {
max-width: inherit;
height: 3.2rem;
}
@media (hover: hover) {
.gnavi-menu-01__link:hover {
opacity: 0.5;
}
}
.gnavi-menu-02__item + .gnavi-menu-02__item {
margin-top: var(--s5);
}
.gnavi-menu-02__link {
display: block;
font-size: 1.4rem;
text-decoration: none;
}
@media (hover: hover) {
.gnavi-menu-02__link:hover {
opacity: 0.5;
}
} .footer-area {
padding-top: var(--s10);
padding-bottom: var(--s10);
background: var(--color05);
}
.footer-menu-01 {
width: fit-content;
border-right: 1px solid var(--color03);
display: flex;
flex-wrap: wrap;
}
.footer-menu-01__link {
padding: 0 var(--s3);
display: block;
text-decoration: none;
}
.footer-menu-01__item {
border-left: 1px solid var(--color03);
}
.footer-menu-01--sub {
font-size: 1.2rem;
}
@media (hover: hover) {
.footer-menu-01__link:hover {
opacity: 0.5;
}
}
.footer-summary-01__row {
display: flex;
gap: var(--s3);
}
.footer-summary-01__row + .footer-summary-01__row {
margin-top: var(--s2);
}
.footer-summary-01__label {
width: 5em;
padding: var(--s1) 0;
line-height: 0;
}
.footer-summary-01__label__img {
max-width: inherit;
height: 1.3rem;
}
.footer-summary-01__content {
line-height: 2;
}
.footer-summary-01__address {
font-size: 1.2rem;
}
.footer-summary-01__note {
margin-left: 1em;
font-size: 1.2rem;
} .page-area {
position: relative;
}
.page-area::after {
content: "";
width: 100%;
height: 100vh;
height: 100vh;
background: url(//kanouya-shimaonsen.com/kny_panel/wp-content/themes/kanouya/assets/img/global/bg-01.jpg) no-repeat center center/cover;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.page-header {
padding: 16rem var(--s10) var(--s10);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s8);
}
.page-contents {
padding-bottom: 10rem;
}
.page-title-01 {
padding-top: var(--s5);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s3);
position: relative;
}
.page-title-01::before {
content: "";
width: var(--s4);
height: 1px;
background: var(--color01);
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
.page-title-01__main {
max-width: inherit;
height: 4rem;
}
.page-title-01__sub {
max-width: inherit;
height: 1.7rem;
}
.page-title-01__sub-text {
color: var(--color04);
font-size: 1.4rem;
}
.page-navi-wrapper-01 {
width: fit-content;
margin: 0 auto;
padding: 0 var(--s10);
position: relative;
} .section-title-01 {
padding-top: var(--s5);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s3);
position: relative;
}
.section-title-01::before {
content: "";
width: var(--s4);
height: 1px;
background: var(--color01);
position: absolute;
top: 0;
left: 0;
}
.section-title-01__main {
max-width: inherit;
height: 4rem;
}
.section-title-01__sub {
max-width: inherit;
height: 1.7rem;
}
.section-title-02 {
padding-top: var(--s4);
font-size: 3.2rem;
font-weight: 600;
line-height: 1.5;
text-align: center;
position: relative;
}
.section-title-02::before {
content: "";
width: var(--s4);
height: 1px;
background: var(--color01);
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
} .other-block {
padding-top: 10rem;
padding-bottom: 10rem;
background: var(--color05);
}
.other-card-01 {
padding: var(--s1);
border: 1px solid var(--color01);
}
.other-card-01__link {
display: block;
text-decoration: none;
}
.other-card-01__thumb {
width: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
position: relative;
}
.other-card-01__img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.6s ease;
}
.other-card-01__content {
padding: 0 var(--s1);
}
.other-card-01__title {
padding: var(--s3) var(--s3) var(--s3) 0;
background: url(//kanouya-shimaonsen.com/kny_panel/wp-content/themes/kanouya/assets/img/global/arrow-01-gray-right.svg) no-repeat right center/var(--s2-5) var(--s2-5);
font-size: 1.6rem;
font-weight: 700;
line-height: 1.5;
}
.other-card-01__text {
padding: var(--s3) 0 var(--s1);
position: relative;
}
.other-card-01__text::before {
content: "";
width: var(--s4);
height: 1px;
background: var(--color01);
position: absolute;
top: 0;
left: 0;
}
@media (hover: hover) {
.other-card-01__link:hover {
opacity: 0.5;
}
.other-card-01__link:hover .other-card-01__img {
transform: translate(-50%, -50%) scale(1.08);
}
} .post-block-01 .wp-block-image {
margin: var(--s5) 0;
text-align: center;
}
.post-block-01 h2, .post-block-01 h3, .post-block-01 h4, .post-block-01 h5, .post-block-01 h6 {
margin: 1.5em 0 1em;
font-weight: 600;
line-height: 1.5;
}
.post-block-01 h2 {
font-size: 2.4rem;
}
.post-block-01 h3 {
font-size: 2.2rem;
}
.post-block-01 h4 {
font-size: 2rem;
}
.post-block-01 h5, .post-block-01 h6 {
font-size: 1.8rem;
}
.post-block-01 > *:first-child {
margin-top: 0 !important;
}
.post-block-01 > *:last-child {
margin-bottom: 0 !important;
} .wp-pagenavi {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--s1-5) var(--s2);
}
.wp-pagenavi .page,
.wp-pagenavi .current {
height: var(--s5);
padding: 0 0.5em;
border-bottom: 1px solid var(--color05);
display: flex;
align-items: center;
justify-content: center;
color: var(--color01);
font-weight: 600;
text-decoration: none;
text-align: center;
transition: background-color 0.6s ease, border-color 0.6s ease;
}
.wp-pagenavi .current {
border-color: var(--color01);
}
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
width: var(--s5);
height: var(--s5);
background: no-repeat center/1.6rem 1.6rem;
border: 1px solid var(--color01);
border-radius: var(--s1);
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.6s ease;
}
.wp-pagenavi .previouspostslink::before,
.wp-pagenavi .nextpostslink::before {
content: "";
width: 0;
height: 0;
border-top: 0.6rem solid transparent;
border-left: 0.8rem solid var(--color01);
border-right: 0.8rem solid transparent;
border-bottom: 0.6rem solid transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-25%, -50%);
}
.wp-pagenavi .previouspostslink::after,
.wp-pagenavi .nextpostslink::after {
content: "";
width: calc(100% - var(--s-5));
height: calc(100% - var(--s-5));
border-radius: 0.6rem;
border: 1px solid var(--color01);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.wp-pagenavi .previouspostslink {
left: 0;
}
.wp-pagenavi .previouspostslink::before {
transform: translate(-75%, -50%) rotate(180deg);
}
.wp-pagenavi .nextpostslink {
right: 0;
}
.wp-pagenavi .extend {
display: flex;
align-items: flex-end;
}
@media (hover: hover) {
.wp-pagenavi .page:hover {
border-color: var(--color01);
opacity: 0.5;
}
.wp-pagenavi .previouspostslink:hover,
.wp-pagenavi .nextpostslink:hover {
opacity: 0.5;
}
} .toggle-content {
display: none;
}  .mv-block {
height: 100vh;
padding: var(--s3);
position: relative;
z-index: 1;
}
.mv-copy-01 {
color: var(--color05);
font-size: 2.8rem;
font-weight: 600;
letter-spacing: 0.25em;
writing-mode: vertical-rl;
text-orientation: upright;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
position: absolute;
top: var(--s10);
right: var(--s9);
z-index: 1;
}
.mv-bg-01 {
width: 100%;
height: 100%;
}
.mv-bg-01__img {
width: 100%;
height: 100%;
object-position: center right;
object-fit: cover;
} .introduction-block {
width: 100%;
min-height: 67.2rem;
position: relative;
z-index: 1;
}
.introduction-block::before {
content: "";
width: 100%;
height: 28rem;
background: var(--color05);
position: absolute;
top: -1px;
left: 0;
z-index: -1;
}
.introduction-block::after {
content: "";
width: 100%;
height: 10rem;
background: var(--color05);
position: absolute;
left: 0;
bottom: -1px;
z-index: -1;
}
.introduction-copy-01 {
width: 50.4rem;
height: 100%;
padding: 10rem 0;
background: var(--color05);
display: flex;
flex-direction: column;
justify-content: center;
letter-spacing: 0.4em;
writing-mode: vertical-rl;
text-orientation: upright;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.introduction-copy-01 p + p {
margin-top: 0;
} .news-block {
padding-top: 10rem;
padding-bottom: 10rem;
}
.news-card-01__link {
padding: var(--s3) var(--s7) var(--s3) var(--s3);
background: url(//kanouya-shimaonsen.com/kny_panel/wp-content/themes/kanouya/assets/img/global/arrow-01-gray-right.svg) no-repeat right var(--s3) center/var(--s2-5) var(--s2-5);
display: flex;
flex-wrap: wrap;
gap: var(--s2);
color: var(--color01);
text-decoration: none;
}
.news-card-01__date {
font-size: 1.4rem;
line-height: 1.5;
}
.news-card-01__category {
font-size: 1.4rem;
line-height: 1.5;
}
.news-card-01__date + .news-card-01__category {
padding-left: var(--s2);
position: relative;
}
.news-card-01__date + .news-card-01__category::before {
content: "";
width: 1px;
height: 1em;
background: var(--color03);
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
}
.news-card-01__title {
width: 100%;
font-size: 1.6rem;
line-height: 1.5;
}
.news-card-01 + .news-card-01 {
border-top: 1px solid var(--color03);
}
.news-card-01-wrapper {
border-top: 1px solid var(--color01);
border-bottom: 1px solid var(--color01);
}
@media (hover: hover) {
.news-card-01__link:hover {
opacity: 0.5;
}
} .rooms-block {
padding-top: 10rem;
padding-bottom: 10rem;
overflow: hidden;
}
.rooms-card-01-wrapper {
margin-top: var(--s5);
}
.rooms-card-01__link {
display: block;
text-decoration: none;
aspect-ratio: 1/1.6;
overflow: hidden;
position: relative;
}
.rooms-card-01__img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.6s ease;
}
.rooms-card-01__content {
width: 100%;
height: 100%;
padding: var(--s3);
background: rgba(244, 240, 237, 0.8);
display: flex;
flex-direction: column;
justify-content: flex-end;
opacity: 0;
position: absolute;
top: 0;
left: 0;
z-index: 1;
transition: opacity 0.6s ease;
}
.rooms-card-01__content::before {
content: "";
width: var(--s3);
height: 1px;
background: var(--color01);
}
.rooms-card-01__number {
width: fit-content;
max-width: inherit;
height: 1.2rem;
}
.rooms-card-01__title-en {
max-width: inherit;
height: 2.4rem;
}
.rooms-card-01__title-jp {
margin-top: var(--s1);
display: block;
color: var(--color04);
font-size: 1.2rem;
line-height: 1.5;
}
@media (hover: hover) {
.rooms-card-01__link:hover .rooms-card-01__content {
opacity: 1;
}
.rooms-card-01__link:hover .rooms-card-01__img {
transform: translate(-50%, -50%) scale(1.08);
}
} .cuisine-block {
padding-top: 10rem;
padding-bottom: 10rem;
overflow: hidden;
} .hot-spring-block {
padding-top: 10rem;
padding-bottom: 10rem;
} .restaurant-block-01 {
padding-top: 10rem;
padding-bottom: 10rem;
}
.restaurant-title-01 {
width: fit-content;
margin: 0 var(--s6) calc(var(--s2-5) * -1);
padding: 0 var(--s3);
background: var(--color05);
display: flex;
align-items: flex-end;
gap: var(--s3);
position: relative;
z-index: 1;
}
.restaurant-title-01__en {
max-width: inherit;
height: 4rem;
}
.restaurant-title-01__jp {
padding-bottom: var(--s1);
color: var(--color04);
font-size: 1.8rem;
letter-spacing: 0.1em;
}
.restaurant-box-01 {
border: 1px solid var(--color01);
}
.restaurant-box-01__cell-01 {
padding: var(--s10) var(--s8) 0;
}
.restaurant-box-01__cell-02 {
padding: var(--s1);
border-left: 1px solid var(--color01);
}
.restaurant-box-01__cell-03 {
padding: 0 var(--s8) var(--s8);
}
.restaurant-box-01__thumb {
position: relative;
}
.restaurant-box-01__thumb + .restaurant-box-01__thumb {
margin-top: var(--s2);
}
.restaurant-box-01__thumb + .restaurant-box-01__thumb::before {
content: "";
width: 100%;
height: 1px;
background: var(--color01);
position: absolute;
top: calc(var(--s1) * -1);
left: 0;
transform: translate(0, -50%);
} .beauty-block-01 {
padding-top: 10rem;
padding-bottom: 10rem;
}
.beauty-title-01 {
width: fit-content;
margin: 0 var(--s6) calc(var(--s2-5) * -1);
padding: 0 var(--s3);
background: var(--color05);
display: flex;
align-items: flex-end;
gap: var(--s3);
position: relative;
z-index: 1;
}
.beauty-title-01__en {
max-width: inherit;
height: 4rem;
}
.beauty-title-01__jp {
padding-bottom: var(--s1);
color: var(--color04);
font-size: 1.8rem;
letter-spacing: 0.1em;
}
.beauty-box-01 {
border: 1px solid var(--color01);
}
.beauty-box-01__photo {
width: 100%;
height: 100%;
object-fit: cover;
} .banner-block {
padding-top: 10rem;
padding-bottom: 10rem;
}
.banner-01__link {
display: block;
text-decoration: none;
}
@media (hover: hover) {
.banner-01__link:hover {
opacity: 0.5;
}
} .bg-show-block {
height: 60rem;
} .room-contents {
padding-bottom: 10rem;
}
.room-title-01 {
padding-top: var(--s5);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s3);
position: relative;
}
.room-title-01::before {
content: "";
width: var(--s4);
height: 1px;
background: var(--color01);
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
.room-title-01__number {
max-width: inherit;
height: 1.7rem;
}
.room-title-01__en {
max-width: inherit;
height: 3.7rem;
}
.room-title-01__jp {
margin-top: var(--s2);
display: block;
color: var(--color04);
font-size: 1.6rem;
text-align: center;
}
.rooms-block-01__photo {
width: 100%;
}
.rooms-block-01__img {
width: 100%;
aspect-ratio: 1/0.4;
object-fit: cover;
}
.rooms-block-01__content {
width: calc(100% - 16rem);
max-width: 112rem;
margin: calc(var(--s5) * -1) auto 0;
padding: var(--s5);
background: var(--color05);
position: relative;
z-index: 1;
}
.rooms-block-01__content-main {
padding-left: var(--s8);
border-left: 1px solid var(--color03);
}
.rooms-block-01__number {
width: fit-content;
max-width: inherit;
height: 1.5rem;
}
.rooms-block-01__title {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s1);
}
.rooms-block-01__title-en {
max-width: inherit;
height: 3rem;
}
.rooms-block-01__title-jp {
color: var(--color04);
font-size: 1.4rem;
line-height: 1.5;
}
.rooms-block-01 + .rooms-block-01 {
margin-top: var(--s5);
}
.rooms-block-02__photo {
width: 100%;
}
.rooms-block-02__slider {
width: calc(100% - var(--s1-5));
max-width: 88rem;
margin-left: auto;
}
.rooms-block-02__slider .splide__track {
padding-bottom: var(--s5);
}
.rooms-block-02__slider .splide__pagination {
padding: 0;
justify-content: flex-end;
gap: var(--s2);
bottom: 0;
}
.rooms-block-02__slider .splide__pagination__page {
width: var(--s4);
height: var(--s3);
margin: 0;
background: none;
border-radius: 0;
opacity: 1;
position: relative;
transition: opacity 0.6s ease;
}
.rooms-block-02__slider .splide__pagination__page::after {
content: "";
width: 100%;
height: 2px;
background: var(--color03);
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
}
.rooms-block-02__slider .splide__pagination__page.is-active {
pointer-events: none;
transform: scale(1);
}
.rooms-block-02__slider .splide__pagination__page.is-active::after {
background: var(--color01);
}
.rooms-block-02__content {
padding-top: var(--s5);
position: relative;
}
.rooms-block-02__content::before {
content: "";
width: var(--s4);
height: 1px;
background: var(--color01);
position: absolute;
top: 0;
left: 0;
}
@media (hover: hover) {
.rooms-block-02__slider .splide__pagination__page:hover {
opacity: 0.5;
}
} .restaurant-contents {
padding-bottom: 10rem;
}
.restaurant-hero-photo {
width: 100%;
margin: 0 0 var(--s10);
}
.restaurant-summary-01 {
display: flex;
flex-direction: column;
gap: var(--s6) 0;
}
.restaurant-summary-01__photo {
width: 88rem;
}
.restaurant-summary-01__content {
width: 65rem;
margin-left: auto;
margin-right: 0;
}
.restaurant-slider-01 {
margin: var(--s10) 0;
padding: var(--s1) 0;
border-top: 1px solid var(--color01);
border-bottom: 1px solid var(--color01);
}
.restaurant-slider-01__item {
padding: 0 var(--s1);
border-left: 1px solid var(--color01);
}
.restaurant-block-02 {
margin-top: 10rem;
padding-top: 10rem;
}
.restaurant-title-02 {
padding-top: var(--s4);
display: flex;
align-items: flex-end;
gap: var(--s3);
z-index: 1;
position: relative;
}
.restaurant-title-02::before {
content: "";
width: var(--s4);
height: 1px;
background: var(--color01);
position: absolute;
top: 0;
left: 0;
}
.restaurant-title-02__en {
max-width: inherit;
height: 4rem;
}
.restaurant-title-02__jp {
padding-bottom: var(--s1);
color: var(--color04);
font-size: 1.8rem;
letter-spacing: 0.1em;
}
.restaurant-block-03 {
margin-top: 10rem;
padding-top: 10rem;
}
.restaurant-block-03 + .restaurant-block-03 {
margin-top: 0;
}
.restaurant-title-03 {
width: fit-content;
margin: 0 var(--s6) calc(var(--s2-5) * -1);
padding: 0 var(--s3);
background: var(--color05);
display: flex;
align-items: flex-end;
gap: var(--s3);
position: relative;
z-index: 1;
}
.restaurant-title-03__en {
max-width: inherit;
height: 4rem;
}
.restaurant-title-03__jp {
padding-bottom: var(--s1);
color: var(--color04);
font-size: 1.8rem;
letter-spacing: 0.1em;
}
.restaurant-box-02 {
padding: var(--s8);
border: 1px solid var(--color01);
} .news-contents {
padding-bottom: 10rem;
}
.news-header {
padding: 16rem 0 var(--s10);
display: flex;
flex-wrap: wrap;
gap: var(--s2);
}
.news-title-01 {
width: 100%;
padding-top: var(--s5);
font-size: 3.2rem;
font-weight: 600;
line-height: 1.5;
position: relative;
}
.news-title-01::before {
content: "";
width: var(--s4);
height: 1px;
background: var(--color01);
position: absolute;
top: 0;
left: 0;
} .faq-contents {
padding-bottom: 10rem;
}
.faq-block-01 {
padding: var(--s7) 0 0;
}
.faq-block-01__title {
padding: var(--s3) 0;
font-size: 2.4rem;
font-weight: 600;
line-height: 1.5;
}
.faq-box-01 {
border-top: 1px solid var(--color01);
border-bottom: 1px solid var(--color01);
}
.faq-box-01 + .faq-box-01 {
border-top: none;
}
.faq-box-01__label {
padding: var(--s3) var(--s8) var(--s3) var(--s3);
display: flex;
align-items: center;
gap: 0 var(--s3);
line-height: 2;
cursor: pointer;
position: relative;
}
.faq-box-01__label::before {
content: "";
width: 2.3rem;
height: 2.3rem;
background: url(//kanouya-shimaonsen.com/kny_panel/wp-content/themes/kanouya/assets/img/global/text-q.svg) no-repeat center/contain;
flex-shrink: 0;
}
.faq-box-01__label .icon-toggle {
position: absolute;
top: 50%;
right: var(--s3);
transform: translateY(-50%);
}
.faq-box-01__content {
padding: 0 var(--s8) var(--s3);
overflow: hidden;
}
.faq-box-01__content::before {
content: "";
width: calc(100% + var(--s8));
height: 1rem;
margin-bottom: var(--s3);
background: url(//kanouya-shimaonsen.com/kny_panel/wp-content/themes/kanouya/assets/img/global/faq-answer-line.svg) no-repeat 0 0/auto 100%;
display: block;
} .facilities-contents {
padding-bottom: 10rem;
}
.facilities-hero-photo {
width: 100%;
margin: 0 0 var(--s10);
}
.facilities-box-01 {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--s8) 0;
}
.facilities-box-01__map {
width: 88rem;
height: 0;
margin-left: 0;
margin-right: auto;
padding-top: 56.25%;
filter: grayscale(100%);
position: relative;
}
.facilities-box-01__map iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.facilities-box-01__content {
width: 65rem;
}
.facilities-block-01 {
margin-top: 10rem;
padding-top: 10rem;
}
.facilities-box-02-wrapper {
padding-top: var(--s6);
padding-bottom: var(--s6);
border-top: 1px solid var(--color01);
border-bottom: 1px solid var(--color01);
}
.facilities-box-02__title {
background: var(--color05);
font-size: 2.2rem;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.1em;
}
.facilities-box-02__title__en {
max-width: inherit;
height: 1.7rem;
margin-top: var(--s2);
display: block;
}
.facilities-box-02 + .facilities-box-02 {
margin-top: var(--s6);
padding-top: var(--s6);
border-top: 1px solid var(--color03);
} .privacy-title-01 {
width: 100%;
padding-top: var(--s4);
font-size: 2rem;
font-weight: 600;
line-height: 1.5;
position: relative;
}
.privacy-title-01::before {
content: "";
width: var(--s4);
height: 1px;
background: var(--color01);
position: absolute;
top: 0;
left: 0;
}
@media screen and (max-width: 767px) { :root {
font-size: 2.6666666667vw;
}
body {
font-size: 1.5rem;
}
input, button, textarea, select {
font-size: 1.5rem;
}
}
@media screen and (max-width: 767px) { .l-center,
.l-center-narrow {
padding-right: var(--s1-5);
padding-left: var(--s1-5);
box-sizing: border-box;
}
.l-center--sp-no-padding,
.l-center-narrow--sp-no-padding {
padding-right: 0;
padding-left: 0;
} .l-stack-01 {
gap: var(--s2);
}
.l-stack-02 {
gap: var(--s3);
}
.l-stack-03 {
gap: var(--s1);
}
.l-stack-04 {
gap: var(--s6);
}
.l-stack-05 {
gap: var(--s5);
} .l-cluster {
gap: var(--s1);
} .l-sidebar {
flex-direction: column;
gap: 0;
}
.l-sidebar__side {
width: 100%;
position: sticky;
top: 0;
left: 0;
z-index: 2;
}
.l-sidebar__main {
width: 100%;
} .l-grid {
grid-template-columns: 100%;
}
.l-grid-three {
grid-gap: var(--s2);
grid-template-columns: 100%;
} .l-column-01 {
gap: var(--s5);
}
.l-column-01__side {
width: 100%;
}
.l-column-01__main {
width: 100%;
}
.l-column-02 {
gap: var(--s3);
}
.l-column-02__side {
width: 100%;
}
.l-column-02__main {
width: 100%;
}
.l-column-02--restaurant {
gap: var(--s1-5);
}
.l-column-03 {
justify-content: flex-end;
gap: var(--s5);
}
.l-column-03__side {
width: calc(100% - var(--s5));
margin-right: calc(var(--s1-5) * -1);
flex: 0 1 auto;
}
.l-column-03__main {
width: 100%;
}
.l-column-04 {
gap: var(--s2);
}
.l-column-04__side {
width: 100%;
}
.l-column-04__main {
flex: 100%;
}
.l-column-05 {
gap: var(--s3);
}
.l-column-05__side {
width: 100%;
}
.l-column-05__main {
width: 100%;
}
.l-column-06__side {
width: 100%;
}
.l-column-06__main {
width: 100%;
}
.l-column-07__side {
width: 100%;
}
.l-column-07__main {
width: 100%;
padding: var(--s4) var(--s1-5) var(--s3);
} .l-grid-areas-01 {
grid-template-areas: "text" "img" "btn";
grid-template-columns: 100%;
grid-template-rows: auto auto 1fr;
grid-gap: var(--s3) 0;
}
.l-grid-areas-02 {
grid-template-areas: "title" "img" "text";
grid-template-columns: 100%;
grid-template-rows: auto auto 1fr;
grid-gap: var(--s3) 0;
} .l-scroll-x-sp {
width: 100%;
padding-bottom: 0.6rem;
overflow-x: auto;
overflow-y: hidden;
}
.l-scroll-x-sp::-webkit-scrollbar {
height: 0.6rem;
}
.l-scroll-x-sp::-webkit-scrollbar-track {
border-radius: 0.3rem;
background: #eee;
}
.l-scroll-x-sp::-webkit-scrollbar-thumb {
border-radius: 0.3rem;
background: #ddd;
} .l-gnavi-01 {
width: 100%;
grid-template-areas: "menu-01" "menu-02" "sns";
grid-template-columns: 100%;
grid-template-rows: auto auto 1fr;
grid-gap: var(--s6);
} .l-footer-01 {
flex-direction: column;
}
.l-footer-01 + .l-footer-02 {
margin-top: var(--s5);
} .l-page__sidebar {
width: var(--s7);
}
.l-page__main {
padding-left: var(--s7);
} .l-btn-01 {
flex-direction: column;
gap: var(--s3);
}
}
@media screen and (max-width: 767px) { .btn-primary__link,
.btn-secondary__link {
min-height: var(--s7);
gap: var(--s1-5);
}
.l-btn-01 .btn-primary__link,
.l-btn-01 .btn-secondary__link {
width: 100%;
}
.btn-reserve {
width: var(--s5);
height: 16rem;
margin: var(--s1) auto;
}
.btn-reserve__link {
padding: var(--s1);
gap: var(--s-5);
}
.btn-reserve__link::before {
border-top-width: 0.6rem;
border-left-width: 0.4rem;
border-right-width: 0.4rem;
border-bottom-width: 0.6rem;
}
.btn-reserve__en {
width: 0.8rem;
height: 5.5rem;
}
.btn-back-to-index__link {
width: 100%;
min-height: var(--s7);
padding: var(--s1) var(--s1-5);
gap: var(--s1-5);
} .icon-toggle {
width: var(--s2);
height: var(--s2);
} .summary-01__row {
flex-direction: column;
gap: 0;
}
.summary-01__row + .summary-01__row {
margin-top: var(--s3);
}
.summary-01__label {
width: 100%;
}
.summary-02__row {
padding: var(--s1-5) 0;
flex-direction: column;
gap: var(--s1);
}
.summary-02__label {
width: 100%;
}
.summary-02__content {
width: 100%;
} .category-list-01-wrapper {
gap: var(--s2);
}
.category-list-01__link {
font-size: 1.5rem;
}
.category-list-02-wrapper {
padding: var(--s1-5) 0;
background: rgba(244, 240, 237, 0.9);
display: flex;
flex-wrap: wrap;
gap: 0 var(--s2);
position: relative;
}
.category-list-02-wrapper::after {
content: "";
width: calc(100% + var(--s3));
height: 1px;
background: var(--color01);
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.category-list-02__link {
padding: var(--s1) 0 var(--s1) var(--s2-5);
background-image: url(//kanouya-shimaonsen.com/kny_panel/wp-content/themes/kanouya/assets/img/global/arrow-01-gray-down.svg);
background-size: var(--s2) var(--s2);
font-size: 1.5rem;
}
.category-list-02__link.is-current {
background-image: url(//kanouya-shimaonsen.com/kny_panel/wp-content/themes/kanouya/assets/img/global/arrow-01-gold-down.svg);
} .gnavi-btn {
height: var(--s7);
}
.gnavi-btn > span {
width: var(--s4);
left: var(--s1-5);
}
.gnavi-btn > span:nth-child(1) {
top: 2rem;
}
body.is-gnavi-open .gnavi-btn > span:nth-child(1) {
top: 2.8rem;
}
.gnavi-btn > span:nth-child(2) {
top: 2.8rem;
}
.gnavi-btn > span:nth-child(3) {
width: var(--s2);
top: 3.6rem;
}
body.is-gnavi-open .gnavi-btn > span:nth-child(3) {
top: 2.8rem;
}
.gnavi-area {
width: calc(100% - var(--s7));
padding: var(--s5) var(--s3);
justify-content: flex-start;
left: var(--s7);
}
.gnavi-menu-01__item + .gnavi-menu-01__item {
margin-top: var(--s3);
}
.gnavi-menu-01__link {
padding-top: var(--s3);
gap: var(--s1);
}
.gnavi-menu-01__link::before {
width: var(--s3);
}
.gnavi-menu-01__main {
height: 2.2rem;
}
.gnavi-menu-01__sub {
height: 1.2rem;
}
.gnavi-menu-01__sub-text {
font-size: 1.2rem;
}
.gnavi-menu-02__item + .gnavi-menu-02__item {
margin-top: var(--s3);
} .footer-area {
padding-top: var(--s5);
padding-bottom: var(--s5);
}
.footer-menu-01 {
border-right: none;
gap: var(--s3);
}
.footer-menu-01__item {
border-left: none;
position: relative;
}
.footer-menu-01__item + .footer-menu-01__item::before {
content: "";
width: 1px;
height: 1em;
background: var(--color03);
position: absolute;
top: 50%;
left: calc(var(--s1-5) * -1);
transform: translate(0, -50%);
}
.footer-menu-01__link {
padding: 0;
}
.footer-summary-01 {
width: 100%;
}
.footer-summary-01__row {
flex-direction: column;
gap: var(--s1);
}
.footer-summary-01__row + .footer-summary-01__row {
margin-top: var(--s3);
}
.footer-summary-01__label {
width: 100%;
padding: 0;
}
.footer-summary-01__label__img {
height: 1.2rem;
}
.footer-summary-01__content {
line-height: 1.5;
} .sns-menu-01 {
width: 100%;
justify-content: flex-end;
}
.sns-menu-01__item {
width: var(--s2-5);
} .page-header {
padding: var(--s8) var(--s1-5) var(--s5);
gap: var(--s5);
}
.page-contents {
padding-bottom: var(--s5);
}
.page-title-01 {
padding-top: var(--s3);
gap: var(--s1);
}
.page-title-01::before {
width: var(--s3);
}
.page-title-01__main {
height: 2.8rem;
}
.page-title-01__main--sp-two-line {
height: 6rem;
}
.page-title-01__sub {
height: 1.4rem;
}
.page-navi-wrapper-01 {
padding: 0 var(--s6);
} .section-title-01 {
padding-top: var(--s3);
gap: var(--s1-5);
}
.section-title-01::before {
width: var(--s3);
}
.section-title-01__main {
height: 2.8rem;
}
.section-title-01__sub {
height: 1.4rem;
}
.section-title-02 {
padding-top: var(--s3);
font-size: 2.4rem;
}
.section-title-02::before {
width: var(--s3);
} .post-block-01 .wp-block-image {
margin: var(--s3) 0;
}
.post-block-01 h2 {
font-size: 2rem;
}
.post-block-01 h3 {
font-size: 1.8rem;
}
.post-block-01 h4 {
font-size: 1.6rem;
}
.post-block-01 h5, .post-block-01 h6 {
font-size: 1.5rem;
} .wp-pagenavi {
width: 100%;
gap: var(--s1) var(--s1-5);
}
.wp-pagenavi .page,
.wp-pagenavi .current {
height: var(--s4);
font-size: 1.2rem;
}
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
width: var(--s4);
height: var(--s4);
}
.wp-pagenavi .previouspostslink::before,
.wp-pagenavi .nextpostslink::before {
border-top-width: 0.4rem;
border-left-width: 0.6rem;
border-right-width: 0.6rem;
border-bottom-width: 0.4rem;
}
}
@media screen and (max-width: 767px) {  .mv-block {
padding: var(--s1-5);
}
.mv-copy-01 {
font-size: 2rem;
top: var(--s5);
right: var(--s4);
} .introduction-block {
min-height: 54rem;
padding-bottom: var(--s5);
}
.introduction-block::before {
width: var(--s4);
height: 100%;
}
.introduction-block::after {
height: var(--s5);
}
.introduction-copy-01 {
width: 100%;
height: inherit;
padding: var(--s5) 0;
} .news-block {
padding-top: var(--s5);
padding-bottom: var(--s5);
}
.news-card-01__link {
padding: var(--s1-5) var(--s4) var(--s1-5) 0;
background-position: right center;
gap: var(--s1) var(--s1-5);
}
.news-card-01__date {
font-size: 1.2rem;
}
.news-card-01__category {
font-size: 1.2rem;
}
.news-card-01__date + .news-card-01__category {
padding-left: var(--s1-5);
}
.news-card-01__title {
font-size: 1.5rem;
} .rooms-block {
padding-top: var(--s5);
padding-bottom: var(--s5);
} .cuisine-block {
padding-top: var(--s5);
padding-bottom: var(--s5);
} .hot-spring-block {
padding-top: var(--s5);
padding-bottom: var(--s5);
} .restaurant-block-01 {
padding-top: var(--s5);
padding-bottom: var(--s5);
}
.restaurant-title-01 {
margin: 0 var(--s1-5) calc(var(--s1-5) * -1);
padding: 0 var(--s1);
gap: var(--s2);
}
.restaurant-title-01__en {
height: 2.4rem;
}
.restaurant-title-01__jp {
padding-bottom: var(--s-5);
font-size: 1.2rem;
}
.restaurant-box-01__cell-01 {
padding: var(--s4) var(--s1-5) 0;
}
.restaurant-box-01__cell-02 {
border-left: none;
}
.restaurant-box-01__cell-03 {
padding: 0 var(--s1-5) var(--s3);
}
.restaurant-box-01__thumb:first-child::before {
content: "";
width: 100%;
height: 1px;
background: var(--color01);
position: absolute;
top: calc(var(--s1) * -1);
left: 0;
transform: translate(0, -50%);
}
.restaurant-box-01__thumb:last-child::after {
content: "";
width: 100%;
height: 1px;
background: var(--color01);
position: absolute;
bottom: calc(var(--s1) * -1);
left: 0;
transform: translate(0, -50%);
} .beauty-block-01 {
padding-top: var(--s5);
padding-bottom: var(--s5);
}
.beauty-title-01 {
margin: 0 var(--s1-5) calc(var(--s1-5) * -1);
padding: 0 var(--s1);
gap: var(--s2);
}
.beauty-title-01__en {
height: 2.4rem;
}
.beauty-title-01__jp {
padding-bottom: var(--s-5);
font-size: 1.2rem;
} .other-block {
padding-top: var(--s5);
padding-bottom: var(--s5);
}
.other-card-01__thumb {
height: 14rem;
}
.other-card-01__content {
padding: 0;
}
.other-card-01__title {
padding: var(--s2) var(--s3) var(--s2) 0;
}
.other-card-01__text {
padding: var(--s2) 0 var(--s1);
}
.other-card-01__text::before {
width: var(--s3);
} .banner-block {
padding-top: var(--s5);
padding-bottom: var(--s5);
}
}
@media screen and (max-width: 767px) { .room-contents {
padding-bottom: var(--s5);
}
.room-title-01 {
padding-top: var(--s3);
gap: var(--s2);
}
.room-title-01::before {
width: var(--s3);
}
.room-title-01__number {
height: 1.5rem;
}
.room-title-01__en {
height: 2.8rem;
}
.room-title-01__jp {
margin-top: var(--s1-5);
font-size: 1.4rem;
}
.rooms-block-01__img {
aspect-ratio: 1/0.5;
}
.rooms-block-01__content {
width: calc(100% - var(--s3));
margin-top: calc(var(--s3) * -1);
padding: var(--s3) var(--s1-5);
}
.rooms-block-01__content-main {
padding-top: var(--s1-5);
padding-left: 0;
border-top: 1px solid var(--color03);
border-left: none;
}
.rooms-block-01__number {
height: 1.2rem;
margin-left: auto;
margin-right: auto;
}
.rooms-block-01__title {
align-items: center;
}
.rooms-block-01__title-en {
height: 2.2rem;
}
.rooms-block-01__title-jp {
font-size: 1rem;
}
.rooms-block-01 + .rooms-block-01 {
margin-top: var(--s3);
}
.rooms-block-02__slider .splide__track {
padding-bottom: var(--s4);
}
.rooms-block-02__slider .splide__pagination__page {
width: var(--s3);
height: var(--s2);
}
.rooms-block-02__content {
padding-top: var(--s2);
}
.rooms-block-02__content::before {
width: var(--s3);
}
}
@media screen and (max-width: 767px) { .restaurant-contents {
padding-bottom: var(--s5);
}
.restaurant-hero-photo {
margin-bottom: var(--s5);
}
.restaurant-summary-01 {
gap: var(--s3) 0;
}
.restaurant-summary-01__photo {
width: 100%;
padding-right: var(--s3);
}
.restaurant-summary-01__content {
width: 100%;
padding-left: var(--s3);
padding-right: var(--s1-5);
}
.restaurant-slider-01 {
margin: var(--s5) 0;
padding: var(--s-5) 0;
}
.restaurant-slider-01__item {
padding: 0 var(--s-5);
}
.restaurant-block-02 {
margin-top: var(--s5);
padding-top: var(--s5);
}
.restaurant-title-02 {
padding-top: var(--s3);
gap: var(--s2);
}
.restaurant-title-02::before {
width: var(--s3);
}
.restaurant-title-02__en {
height: 2.4rem;
}
.restaurant-title-02__jp {
padding-bottom: var(--s-5);
font-size: 1.2rem;
}
.restaurant-block-03 {
margin-top: var(--s5);
padding-top: var(--s5);
}
.restaurant-title-03 {
margin: 0 var(--s1-5) calc(var(--s1) * -1);
padding: 0 var(--s1-5);
gap: var(--s1);
}
.restaurant-title-03__en {
height: 2.4rem;
}
.restaurant-title-03__jp {
padding-bottom: var(--s-5);
font-size: 1.2rem;
}
.restaurant-box-02 {
padding: var(--s2) var(--s1) var(--s1);
}
}
@media screen and (max-width: 767px) { .news-contents {
padding-bottom: var(--s5);
}
.news-header {
padding: var(--s8) 0 var(--s5);
gap: var(--s1) var(--s1-5);
}
.news-title-01 {
padding-top: var(--s3);
font-size: 2.2rem;
}
.news-title-01::before {
width: var(--s3);
}
}
@media screen and (max-width: 767px) { .faq-contents {
padding-bottom: var(--s5);
}
.faq-sidebar {
min-height: var(--s5);
}
.faq-block-01 {
padding-top: var(--s3);
}
.faq-block-01__title {
padding: var(--s2) 0;
font-size: 1.8rem;
}
.faq-box-01__label {
padding: var(--s2) var(--s3) var(--s2) 0;
gap: 0 var(--s1);
}
.faq-box-01__label::before {
width: var(--s2);
height: var(--s2);
}
.faq-box-01__label .icon-toggle {
right: 0;
}
.faq-box-01__content {
padding: 0 0 var(--s2) var(--s3);
}
.faq-box-01__content::before {
width: 100%;
height: 0.8rem;
margin-bottom: var(--s2);
}
}
@media screen and (max-width: 767px) { .facilities-contents {
padding-bottom: var(--s5);
}
.facilities-hero-photo {
margin-bottom: var(--s5);
}
.facilities-box-01 {
gap: var(--s3) 0;
}
.facilities-box-01__map {
width: calc(100% - var(--s3));
padding-top: 100%;
}
.facilities-box-01__content {
width: 100%;
padding-left: var(--s3);
padding-right: var(--s1-5);
}
.facilities-block-01 {
margin-top: var(--s5);
padding-top: var(--s5);
}
.facilities-box-02-wrapper {
padding-top: var(--s3);
padding-bottom: var(--s3);
}
.facilities-box-02__title {
font-size: 1.8rem;
}
.facilities-box-02__title__en {
height: 1.4rem;
margin-top: var(--s1);
}
.facilities-box-02 + .facilities-box-02 {
margin-top: var(--s3);
padding-top: var(--s3);
}
}
@media screen and (max-width: 767px) { .privacy-title-01 {
padding-top: var(--s3);
font-size: 1.8rem;
}
.privacy-title-01::before {
width: var(--s3);
}
}