@charset "UTF-8";

:root {
--desktop-title-size: clamp(22px, 2vw, 24px);
--desktop-subtitle-size: clamp(20px, 1.3vw, 22px);
--desktop-paragraph-size: clamp(16px, 1.2vw, 20px);
--tablet-title-size: clamp(0.9rem, 2.3vw, 2rem);
--tablet-subtitle-size: clamp(0.9rem, 2vw, 2rem);
--tablet-font-size: clamp(0.9rem, 1.2vw, 1.5rem);
--mobile-title-size: 18px;
--mobile-subtitle-size: 14px;
--mobile-font-size: 12px;
--color-primary: #333333;
--color-secondary: #333333;
--color-secondary-light: #709B84;
--color-secondary-dark: #333333;
--color-background: transparent;
} *,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
width: 100%;
height: auto;
display: block;
overflow-x: hidden;
}
.kanji-font {
font-family: 'Zen Old Mincho';
}
h1,
h2,
h3,
h4,
p {
letter-spacing: 0.2em !important;
}
html {
scroll-behavior: smooth;
}
body {
overflow-x: hidden;
} .vertical-bar {
display: inline-block;
width: 1px;
height: 2em;
background-color: #144738;
margin-right: 10px;
vertical-align: middle;
transform: translateY(-3.5px);
}
.vertical-bar.dining {
background-color: #754043;
} .dark-green-washi::before {
content: "";
position: absolute;
top: 0;
left: 50%;
right: 50%;
margin-left: -50vw; margin-right: -50vw; width: 100vw;
height: 100%;
background-image: url(//senshinwaho.com/wp-content/plugins/my-snow-monkey/assets/images/Green\ Washi\ for\ Senshin.webp);
background-size: contain;
z-index: -1;
}
.light-green-washi::before {
content: "";
position: absolute;
top: 0;
left: 50%;
right: 50%;
margin-left: -50vw; margin-right: -50vw; width: 100vw;
height: 100%;
background-image: url(//senshinwaho.com/wp-content/plugins/my-snow-monkey/assets/images/Light\ green\ Washi\ for\ Senshin.webp);
background-size: contain;
z-index: -1;
}
.gray-washi::before {
content: "";
position: absolute;
top: 0;
left: 50%;
right: 50%;
margin-left: -50vw; margin-right: -50vw; width: 100vw;
height: 100%;
background-image: url(//senshinwaho.com/wp-content/plugins/my-snow-monkey/assets/images/beige\ washi\ 3.webp);
background-size: contain;
z-index: -1;
} body p {
color: #333333;
}
@media (max-width: 768px) {
h2 {
font-size: 18px !important;
}
h3 {
font-size: 14px !important;
}
p {
font-size: 12px !important;
}
} .instagram-sticky-link {
position: fixed;
bottom: 20px;
left: 20px;
background-color: #144738;
padding: 8px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
z-index: 10000;
cursor: pointer;
transition: background-color 0.3s ease;
}
.instagram-sticky-link svg {
width: 32px;
height: 32px;
fill: white;
}
.instagram-sticky-link:hover {
background-color: #144738c1;
}
.instagram-sticky-link {
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}
.instagram-sticky-link.visible {
opacity: 1;
pointer-events: auto;
}
.insta-link {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
}
.insta-link a {
display: flex;
align-items: center;
gap: 10px;
color: white;
text-decoration: none;
font-family: 'Federo', sans-serif;
font-size: 20px;
}
.insta-link svg {
fill: white;
width: 30px;
height: 30px;
} .image-wrapper {
position: relative;
align-self: end;
} a {
text-decoration: none;
color: white;
}
a.static-reserve {
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
color: white;
border-radius: 50px;
} @media screen and (max-width: 1024px) {
.active2 {
text-decoration: underline !important;
}
}
@media screen and (min-width: 1025px) {
.active {
text-decoration: underline !important;
}
} .dropdown {
position: relative;
display: inline-block;
list-style: none;
padding: 0;
margin: 0;
}
.dropdown::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
margin: -30px;
}
nav {
overflow: visible !important;
} .home-dropdown-content {
font-size: clamp(5px, 1vw, 20px);
position: absolute;
top: 78%;
left: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease, transform 0.5s ease;
z-index: 999;
display: flex;
flex-direction: column;
transform: translateY(-30px);
width: max-content;
white-space: nowrap;
} .home-dropdown-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(//senshinwaho.com/wp-content/plugins/my-snow-monkey/assets/images/Green Washi for Senshin.webp);
background-size: contain;
background-position: center;
z-index: -1;
opacity: var(--dropdown-bg-opacity, 1); transition: opacity 0.2s ease-out;
pointer-events: none;
}
.home-dropdown-content.show {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.home-dropdown-content a {
padding: 3px;
margin-left: 10px;
margin-right: 10px;
display: block;
text-decoration: none;
color: #000;
border-radius: 4px;
transition: background 0.2s;
}
.dropdown:hover .home-dropdown-content {
opacity: 1;
transform: translateY(30px);
pointer-events: auto;
} .dropdown-content {
font-size: clamp(5px, 1vw, 40px);
position: absolute;
top: 78%;
left: 10;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease, transform 0.5s ease;
z-index: 999;
display: flex;
flex-direction: column;
transform: translateY(-30px);
width: max-content;
white-space: nowrap;
background-image: url(//senshinwaho.com/wp-content/plugins/my-snow-monkey/assets/images/Green\ Washi\ for\ Senshin.webp);
background-size: contain;
} .dropdown-content.show {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
} .drop-up .dropdown-content {
bottom: 83px !important;
top: unset;
transform: translateY(60px);
background: none;
}
.dropdown-content a {
padding: 3px;
margin-left: 5px;
margin-right: 5px;
display: block;
text-decoration: none;
color: #000;
border-radius: 4px;
transition: background 0.2s;
}
.dropdown:hover .dropdown-content {
opacity: 1;
transform: translateY(30px);
pointer-events: auto;
}
@media screen and (max-width: 767px) {
a.static-reserve {
margin: 3.25vw;
font-size: 1.1rem !important;
width: fit-content;
height: fit-content;
padding: 12px 22px;
position: fixed;
bottom: 0px;
background-color: rgba(20, 71, 56, 1);
right: 0px;
opacity: 0;
border: none;
z-index: 1001;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
a.static-reserve:hover {
background-color: rgba(20, 71, 56, 1) !important;
}
a.reserve-now-mobile {
display: none;
}
}
a.side-reserve {
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
color: white;
border-radius: 50px;
border: solid 1px;
} a.reserve-now {
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
color: white;
border-radius: 50px;
width: 150px;
height: 40px;
padding: 0 10px;
border: solid 1px;
font-size: 13px;
transition: 1s;
margin-right: 35px;
white-space: nowrap; }
a.reserve-now:hover {
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
color: white;
border-radius: 50px;
padding: 5px;
border: solid 1px;
background-color: white;
color: #496F8B;
transition: 0.5s;
border: solid white 1px;
}
a.reserve-now-mobile {
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
color: white;
border-radius: 50px;
border: solid 1px;
}
.kanji-font-two {
font-family: 'Zen Old Mincho'
} .sticky-container {
min-height: 100vh;
width: 100vw;
z-index: -999;
}
.main-nav {
display: flex;
justify-content: space-between;
align-items: center;
width: 100vw;
height: 75px; gap: clamp(10px, 3vw, 200px);
position: sticky;
top: 0;
margin-top: -75px; z-index: 999;
overflow: auto;
background-image: url(//senshinwaho.com/wp-content/plugins/my-snow-monkey/assets/images/Green\ Washi\ for\ Senshin.webp);
background-size: contain;
} .home-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100vw;
height: 75px; gap: clamp(10px, 3vw, 200px);
position: sticky;
top: 0;
margin-top: -75px; z-index: 999;
overflow: auto;
background-color: transparent;
}
.home-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 75px;
background-image: url(//senshinwaho.com/wp-content/plugins/my-snow-monkey/assets/images/Green\ Washi\ for\ Senshin.webp);
background-size: contain;
z-index: -1;
pointer-events: none;
opacity: var(--header-bg-opacity, 0);
transition: opacity 0.2s ease-out;
} .nav-logo {
height: 100%;
display: flex;
align-items: center;
transition: opacity 0.3s ease;
}
.nav-logo img {
max-height: 50px;
width: auto;
padding-left: 20px;
height: auto;
object-fit: contain;
display: block;
}
.nav-logo:hover {
opacity: 0.6;
} .nav-links {
font-family: "Federo";
display: flex;
list-style: none;
margin: 0 auto;
padding: 0;
white-space: nowrap; gap: clamp(10px, 3vh, 150px);
justify-content: center;
color: white;
letter-spacing: 0.2em;
line-height: 160%;
}
.nav-links li {
margin-left: 0.5rem;
margin-right: 0.5rem;
font-family: "Zen Old Mincho" !important;
font-size: clamp(5px, 1.2vw, 30px);
letter-spacing: 0.1em;
}
.nav-links a {
letter-spacing: 0.1em;
font-family: "Zen Old Mincho" !important;
color: white;
font-size: clamp(5px, 1.1vw, 22px);
text-decoration: none;
transition: opacity 0.3s ease;
}
.dropdown .dropdown-content a,
.dropdown .home-dropdown-content a {
font-size: clamp(5px, 1vw, 18px);
}
.nav-links a:hover {
opacity: 50%;
} .arrow {
display: inline-block;
transition: transform 0.4s ease;
}
.dropdown:hover .arrow {
transform: rotate(-180deg);
} .mobile-nav {
display: none;
}    @media (max-width: 1024px) {
.main-nav,
.home-header {
display: none;
}
a.reserve-now {
display: none;
}
.nav-logo img {
height: clamp(30px, 5vw, 80px) !important;
margin: 0;
padding: 0;
}
.mobile-nav {
display: flex;
flex-direction: column;
gap: 10px;
justify-content: start;
align-self: center;
align-content: center;
height: clamp(30px, calc(4vh + 4vw), 150px);
}
.top-nav {
display: flex;
flex-direction: row;
margin: 0;
justify-content: space-between;
align-items: center;
width: 100%;
height: clamp(30px, calc(4vh + 4vw), 150px);
} .burger {
width: 30px;
height: 20px;
display: flex;
flex-direction: column;
cursor: pointer;
margin-right: 30px;
align-self: center;
justify-self: center;
background-color: transparent !important;
background: none;
border: none;
gap: 10px;
}
.bar {
width: 24px;
height: 3px;
background-color: #ffffff;
border-radius: 2px;
transition: transform 0.4s ease, top 0.4s ease;
} .top {
top: 0;
}
.bottom {
bottom: 0;
}
.burger.cross .top {
transform: rotate(45deg) translateY(5px) translateX(4px);
}
.burger.cross .bottom {
transform: rotate(-45deg) translateY(-5px) translateX(4px);
}
.burger:hover {
opacity: 0.5;
}
.nav-logo {
padding: 10px;
} @keyframes expandNav {
0% {
height: 0;
opacity: 0;
visibility: visible;
}
10% {
opacity: 1;
}
100% {
height: 100vh;
}
} @keyframes collapseNav {
0% {
height: 100vh;
opacity: 1;
}
100% {
height: 0px;
padding: 0;
}
} .bottom-nav.expand {
visibility: visible;
animation: expandNav 0.6s ease forwards;
} .bottom-nav.collapse {
animation: collapseNav 0.6s ease forwards;
}
.bottom-nav.active .nav-links {
opacity: 1;
}
.bottom-nav {
visibility: hidden;
overflow-y: auto;
overflow-x: hidden;
height: 0;
opacity: 1;
background-image: url(//senshinwaho.com/wp-content/plugins/my-snow-monkey/assets/images/Green\ Washi\ for\ Senshin.webp);
position: absolute;
top: 100%;
left: 0;
width: 100%;
align-items: center;
justify-content: center;
max-height: 100vh;
}
.nav-links {
gap: 30px;
display: flex;
flex-direction: column;
align-items: start;
width: 100%;
padding: 5px;
height: 90%;
display: flex;
flex-direction: column;
justify-content: start;
}
.nav-contents {
padding: 20px;
padding-top: 16px;
height: 80%;
max-height: 400px;
}
.nav-links li {
font-size: clamp(10px, 3vw, 40px);
}
.nav-links a {
font-size: clamp(10px, 3vw, 40px);
}
.submenu {
display: flex;
flex-direction: column;
margin-left: 20px;
gap: 6px;
padding-left: 20px;
color: white;
}
.scroll-text {
width: 70% !important;
}
} @media (max-width: 767px) {
.instagram-sticky-link {
display: none;
}
.burger {
margin-right: 20px;
font-size: 35px;
}
.main-nav {
background-color: rgba(20, 71, 56, 1);
}
.nav-links {
gap: 20px !important;
opacity: 1;
transition: opacity 0.3s ease-in-out 0.3s;
padding: 0;
margin: 0;
}
.nav-links li {
font-size: 23px !important;
}
.nav-links a {
font-size: 23px !important;
}
.submenu {
gap: 20px;
}
a.reserve-now {
text-decoration: none;
display: inline-flex;
justify-content: center;
align-items: center;
color: white;
border-radius: 50px;
width: 175px;
height: 50px;
border: solid 1px;
font-size: 25px;
font-family: 'Zen Old Mincho';
font-size: 20px;
line-height: 1;
padding: 5px;
box-sizing: border-box;
display: flex;
margin: 0 auto;
}
} @media (max-width: 767px) and (min-width: 481px) {
.main-nav {
height: 50px;
}
.top-nav {
height: 50px;
}
.nav-contents {
padding-bottom: 0%;
}
a.reserve-now {
height: 40px;
margin-top: 0px !important;
transform: translate(calc(65vw), calc(-20vh));
}
.insta-link {
height: 40px;
width: 100px;
transform: translate(calc(78vw), calc(-20vh));
}
.nav-links {
gap: 6px !important;
}
.submenu {
gap: 6px;
}
}
.circle-menu {
display: none !important;
}
.c-page-top {
display: none !important;
} .static-reserve {
font-size: min(calc(1.2 * 1440px / 100), 1.2vw);;
letter-spacing: 0.1em;
position: fixed;
opacity: 0;
width: min(calc(9 * 1440px / 100), 9vw);
height: min(calc(3 * 1440px / 100), 3vw);
background-color: rgba(73, 111, 139, 0.5);
border: 1px solid white; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
z-index: 1001;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.static-reserve.show {
opacity: 1;
}
.static-reserve:hover {
background-color: #496F8B;
color: white;
} .circle-menu {
position: fixed;
top: 4%;
right: 2%;
width: 50px;
height: 50px;
background-color: rgba(73, 111, 139, 0.5);
border: 1px solid white; border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
opacity: 0;
transition: opacity 0.3s ease-in-out;
z-index: 1001;
cursor: pointer;
}
.circle-menu.show {
opacity: 1;
}
.circle-menu.close::before,
.circle-menu.close::after {
content: "";
position: absolute;
width: 60%;
height: 1px;
background-color: white;
transform: rotate(45deg);
}
.circle-menu.close::after {
transform: rotate(-45deg);
}
.hamburger {
display: flex;
flex-direction: column;
justify-content: space-between;
height: min(calc(1 * 1440px / 100), 1vw);
width: min(calc(1.2 * 1440px / 100), 1.2vw);
opacity: 1; transition: opacity 0.3s ease; }
.circle-menu.close .hamburger {
opacity: 0; } .hamburger div {
width: 100%;
height: min(calc(0.1 * 1440px / 100), 0.1vw);
background-color: white;
border-radius: 2px;
transition: opacity 0.3s ease; }
.circle-menu.close .hamburger div {
opacity: 0; } .menu {
position: fixed;
top: 0;
right: 0;
width: min(calc(32.4 * 1440px / 100), 32.4vw);
height: 100%;
background-color: rgba(73, 111, 139, 0.7);
color: white;
box-shadow: -4px 0 6px rgba(0, 0, 0, 0.2);
padding-left: min(calc(5 * 1440px / 100), 5vw);
z-index: 1000;
padding-top: min(calc(15 * 1440px / 100), 20svh);
transform: translateX(100%); transition: transform 0.3s ease-in-out, visibility 0s 0.3s; visibility: hidden; }
.menu.show {
transform: translateX(0); visibility: visible; transition: transform 0.3s ease-in-out, visibility 0s 0s; 
}
.menu ul {
list-style: none;
display: grid;
}
.menu li {
margin: min(calc(0.5 * 1440px / 100), 0.5vw) 0;
cursor: pointer;
transition: color 0.2s;
font-family: 'Federo';
line-height: 160%;
font-weight: 400;
font-size: min(calc(1.8 * 1440px / 100), 1.8vw);
letter-spacing: 0.2em;
color: #FFFFFF;
transition: opacity 0.3s ease;
}
.menu li:hover {
opacity: 0.5;
}
.circle-menu { transition: background-color 0.3s ease; }
.circle-menu:hover {
background-color: #496F8B;
}
.circle-menu:not(.show),
.static-reserve:not(.show) {
pointer-events: none;
}
.circle-menu,
.static-reserve {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.side-reserve {
width: min(calc(12 * 1440px / 100), 12vw);
margin-top: min(calc(4 * 1440px / 100), 4vw);
font-size: min(calc(1.6 * 1440px / 100), 1.6vw);
text-align: center;
letter-spacing: 0.1em;
padding: 0;
line-height: 1;
padding-block-start: 0.7rem;
padding-block-end: calc(0.7rem + 1px);
}
.side-logo {
width: min(20vw, 500px);
position: absolute;
top: 2%;
translate: -30px 0;
}    @media (max-width: 1024px) and (min-width: 769px) {
.circle-menu {
width: 50px;
height: 50px;
}
.hamburger {
height: 20px;
width: 20px;
}
.hamburger div {
height: 2px;
}
}    @media (max-width: 768px) { 
#menu > div > img {
display: none;
}
.menu ul {
padding: 0;
gap: 15px;
}
.menu li {
font-size: 4.5vw;
}
.side-reserve {
width: 30vw;
font-size: 4vw;
margin-top: 30px;
}
.side-logo {
display: none;
}
}
.hero-bg-container {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -1;
overflow: hidden;
background-color: white;
}
.hero-bg-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.5));
pointer-events: none;
z-index: 1;
}
.hero-bg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: relative;
object-position: 50% 100%; } .popup-overlay {
position: absolute;
right: 25px;
bottom: 15px;
background: none;
display: flex;
align-items: end;
justify-content: end;
z-index: 500;
opacity: 1;
transition: opacity 0.5s ease;
} .popup-overlay.hidden {
opacity: 0;
pointer-events: none;
} .popup {
position: relative;
background: #fff;
width: 300px;
max-width: 300px;
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
} .close-btn {
position: absolute;
top: -5px;
right: -5px;
width: 20px;
height: 20px;
border: none;
border-radius: 50%;
background-color: #eee;
color: #333;
font-size: 12px;
font-weight: bold;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.close-btn:hover {
background-color: #ccc;
transform: scale(1.1);
}
.popup img {
width: 100%;
height: 200px;
object-fit: cover;
}
.popup p {
font-size: 16px;
}
.hero-container {
height: 100vh;
width: 100vw;
justify-self: center;
position: relative;
display: grid;
place-items: start center;
}
.mobile-header-container {
display: none;
}
.background-container {
background-color: white;
}
.header-logo-container {
display: flex;
align-self: center;
transform: translateY(-50%);
max-width: clamp(30px, 30vh, 800px);
height: auto;
} #body>div.l-container>div.l-contents>div>div>div>main>div.hero-container>img {
max-width: clamp(30px, 26vh, 800px);
margin: -35vh auto 0 auto;
display: block;
width: 100%;
} #body>div.l-container>div.l-contents>div>div>div>main>div.hero-container>div.header-container-mobile>img {
width: 25vh;
margin: 1vh auto;
display: block;
} .scroll-indicator {
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}
.scroll-line {
width: 1px;
height: 25svh;
background: linear-gradient(to bottom, rgba(204, 204, 204, 0) 0%, #d2d2d2 30%, #d2d2d2 70%, rgba(204, 204, 204, 0) 100%);
position: relative; overflow: hidden;
}
.scroll-square {
width: 2px;
height: min(calc(2.5 * 1440px / 100), 2.5vw);
background: rgba(255, 255, 255, 0.9);
position: absolute;
left: 50%;
transform: translateX(-50%);
animation: scrollSquaresAnimation 2.5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
animation-fill-mode: both;
opacity: 0.5;
} .scroll-text {
line-height: 160%;
position: absolute;
bottom: 30svh;
left: 50%;
transform: translate(-50%, -50%);
right: auto;
font-size: var(--desktop-paragraph-size);
text-align: center;
color: white;
width: 100%;
font-weight: 500;
} .reserve-now {
font-size: clamp(1rem, 1.2vw, 2rem);
width: clamp(120px, 10vw, 220px);
height: clamp(40px, 4vh, 80px);
letter-spacing: 0.1em;
}
.reserve-now-container {
display: flex;
align-items: center;
justify-content: center;
}
@keyframes scrollSquaresAnimation {
0% {
top: 0;
opacity: 0.3;
}
85% {
top: calc(100% - min(calc(2.5 * 1440px / 100), 2.5vw)); opacity: 1;
}
100% {
top: calc(100% - min(calc(2.5 * 1440px / 100), 2.5vw));
opacity: 0;
}
}
.reserve-now-mobile {
display: none;
position: absolute;
top: 64%;
letter-spacing: 0.1em;
} @media (max-width: 1024px) and (min-width: 768px) {
.scroll-text {
font-size: 18px;
width: 100%;
}
.hero-container {
height: calc(100svh + 30px) !important;
}
.hero-bg-container {
height: calc(100svh + 30px) !important;
}
.popup-overlay {
bottom: 25px;
}
.popup {
max-width: 200px;
}
.popup img {
height: 150px;
object-fit: cover;
}
.reserve-now {
font-size: 18px!important;
margin: 15vw 0;
display: block;
justify-self: center;
width: 150px;
height: fit-content;
}
a.reserve-now {
transform: none;
text-align: center;
display: flex;
padding: 25px;
}
} @media (max-width: 767px) and (min-width: 481px) {
.popup-overlay {
display: none;
} .mobile-header-container {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
justify-self: center;
height: 80vh;
}
.main-nav {
height: 50px;
}
.top-nav {
height: 50px;
}
.header-logo-container {
display: none;
}
.header-container-mobile {
width: 70vw;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.mobile-logo {
max-width: 25% !important;
padding-top: 100px;
padding-bottom: 10px;
height: auto;
object-fit: contain;
display: flex;
justify-self: center;
align-self: center;
}
.scroll-text-mobile {
display: flex;
color: white;
margin: 10px;
justify-self: center;
line-height: 140% !important;
padding-bottom: 100px;
}
#body>div.l-container>div.l-contents>div>div>div>main>div.hero-container>div.header-container-mobile>img {
width: 25vh;
margin-top: 1vh;
margin-bottom: 1vh;
}
#body>div.l-container>div.l-contents>div>div>div>main>div.hero-container>img {
position: initial;
width: 1vh;
margin: 9vh;
background-size: contain;
justify-self: center;
display: none;
}
.hero-container {
display: grid;
height: calc(100vh + 100px);
}
.hero-bg-container {
height: calc(100svh + 100px) !important;
}
.reserve-now {
font-size: 4vw;
margin: 15vw 0;
display: block;
justify-self: center;
width: 150px;
height: fit-content;
}
.hero-text {
font-size: var(--mobile-font-size);
}
a.reserve-now-mobile {
padding: 10px 20px;
width: auto;
height: fit-content;
font-size: 2.5vw;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
color: white;
border-radius: 50px;
border: solid 1px;
}
a.reserve-now {
transform: none;
text-align: center;
display: flex;
padding: 25px;
}
}
.reserve-now-container {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
width: 100%;
}
.reserve-now-mobile {
display: flex;
height: auto;
padding: 5px;
justify-self: center;
align-self: center;
width: 170px;
} .scroll-text {
bottom: 50%;
width: 92%;
font-size: var(--mobile-font-size);
display: none;
}
.header-logo-container {
padding: 10px;
margin-top: 50px;
}
} @media (max-width: 767px) and (min-width: 481px) and (min-height: 800px) {
.mobile-logo {
max-width: 40% !important;
padding-top: 150px;
}
a.reserve-now-mobile {
padding: 30px 40px;
}
a.reserve-now {
display: flex;
padding: 25px;
}
} @media (max-width: 480px) {
.hero-bg {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 100%;
display: block;
position: relative;
}
.popup-overlay {
display: none;
}
.header-logo-container {
display: none;
}
.mobile-header-container {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
justify-self: center;
height: 55vh;
}
.mobile-logo {
max-width: 50% !important;
padding-top: 150px;
padding-bottom: 10px;
height: auto;
object-fit: contain;
display: flex;
justify-self: center;
align-self: center;
}
.header-logo {
display: none;
} #body>div.l-container>div.l-contents>div>div>div>main>div.hero-container>img {
position: initial;
width: 50%;
margin: 9vh;
background-size: contain;
justify-self: center;
display: none;
}
#body>div.l-container>div.l-contents>div>div>div>main>div.hero-container>div.header-container-mobile>img {
width: 25vh;
margin-top: 1vh;
margin-bottom: 1vh;
}
.scroll-text-mobile {
color: white;
font-size: 2.5vh !important;
width: 100% !important;
justify-self: center;
line-height: 140% !important;
margin-top: 2vh;
}
.hero-container {
display: grid;
padding: var(--mobile-padding);
height: 102svh;
}
a.reserve-now-mobile {
padding: 5vw 6vw !important;
width: auto;
height: fit-content;
font-size: 2.5vh;
align-self: center;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
color: white;
border-radius: 50px;
border: solid 1px;
translate: 0 -50%;
}
.hero-text {
font-size: var(--mobile-font-size);
}
a.reserve-now {
display: flex;
padding: 25px;
}
}
.reserve-now-mobile {
display: block;
height: 50px;
justify-self: center;
width: 170px;
top: 70%;
} .scroll-text {
bottom: 50%;
width: 92%;
font-size: var(--mobile-font-size);
display: none;
}
.hero-container,
.hero-bg-container,
.hero-container::before {
height: 110vh;
}
}
#page-top {
border-radius: 50%;
margin: min(calc(3 * 1440px / 100), 3vw);
border: 1px solid white;
background-color: rgba(73, 111, 139, 0.5);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
width: 50px;
height: 50px;
}
#page-top > a > svg {
height: 20px;
}
#page-top:hover {
background-color: #496F8B;
}    @media (max-width: 1024px) and (min-width: 769px) {
#page-top {
width: 50px;
height: 50px;
}
#page-top > a > svg {
height: 3vw;
}
}    @media (max-width: 768px) { 
#page-top {
border-radius: 50%;
margin: 3.25vw;
border: 1px solid white;
background-color: rgba(73, 111, 139, 0.5);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
width: 40px;
height: 40px;
}
#page-top > a > svg {
height: 20px;
}
}
.insta-link {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
}
.insta-link a {
display: flex;
align-items: center;
gap: 10px;
color: white;
text-decoration: none;
font-family: 'Federo', sans-serif;
font-size: 20px;
}
.insta-link svg {
fill: white;
width: 30px;
height: 30px;
}
.site-footer {
margin: auto;
font-family: "Zen Old Mincho", "Federo";
position: relative; padding: 32px 0;
color: white;
width: 100vw;
max-width: 1440px;
justify-self: center;
z-index: 20; }
.site-footer::before {
content: "";
position: absolute;
top: 0;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
height: 100%;
background-image: url(//senshinwaho.com/wp-content/plugins/my-snow-monkey/assets/images/Green\ Washi\ for\ Senshin.webp);
background-size: contain;
z-index: -1; }
.footer-column a {
font-family: "Federo", "Zen Old Mincho";
text-decoration: none;
line-height: 160%;
font-size: clamp(18px, 1.1vw, 25px);
align-self: center;
letter-spacing: 0.2em;
color: white;
transition: opacity 0.3s ease;
}
.footer-column a:hover {
opacity: 0.5;
}
.footer-copyright {
font-size: min(calc(0.8 * 1440px / 100), 0.8vw);
align-items: center;
text-align: center;
color: white;
}
.footer-links {
display: flex;
flex-direction: column;
justify-content: center; align-items: center; gap: 1vh; }
.footer-top {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
}
.footer-top img {
width: 200px;
height: auto;
align-self: center;
margin: auto;
padding-bottom: 45px;
padding-top: 15px;
padding-right: 25px;
transition: opacity 0.3s ease;
}
.footer-top:hover img {
opacity: 0.6;
}
.footer-column {
display: flex;
flex-direction: column;
gap: 0.1vw;
align-items: flex-start;
width: fit-content;
}
.footer-bottom {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: clamp(20px, 5vw, 500px);
align-items: center;
width: fit-content;
}
.footer-right {
width: min(calc(25 * 1440px / 100), 25vw);
gap: 0.1vw;
justify-self: center;
}
.footer-left {
width: min(calc(25 * 1440px / 100), 25vw);
gap: 0.1vw;
justify-self: center;
}    @media (max-width: 1024px) and (min-width: 768px) {
.site-footer {
padding: 3vw 0 0vw 0;
}
.footer-column {
justify-self: center;
}
.footer-column a {
font-size: clamp(18px, 2vw, 22px);
align-self: center;
}
.footer-links {
display: grid;
gap: 20px;
}
.footer-logo {
width: 150px;
justify-self: center;
text-align: center;
}
.footer-logo img {
width: 100%;
}
.footer-left {
display: grid;
width: initial;
}
.footer-left a {
text-align: center;
}
.footer-right {
width: initial;
justify-content: end;
}
#body>div.l-container>div.l-contents>div>div>div>main>footer>div>div.footer-links>div.footer-left>div {
justify-self: center;
}
.footer-copyright {
font-size: 10px;
}
}    @media (max-width: 767px) {
.site-footer {
padding: 10vw 0 0 0;
}
.footer-column {
justify-self: center;
}
.footer-column a {
font-size: clamp(18px, 3.5vw, 22px);
align-self: center;
margin-top: 10px;
white-space: nowrap;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 30px;
}
.footer-top img {
width: 250px !important;
justify-self: center;
text-align: center;
padding-bottom: 10px;
}
.footer-logo img {
width: 100%;
}
.footer-bottom {
display: flex;
flex-direction: column;
gap: 0;
}
.footer-left {
order: 0;
align-self: center;
}
.footer-right {
order: 1;
align-self: center;
}
.footer-middle {
order: 2;
gap: 0.1vw !important;
}
.footer-copyright {
font-size: 10px;
padding-bottom: 5%;
}
}
.custom-carousel {
width: 100%;
margin: auto;
overflow: hidden;
position: relative;
padding-bottom: 100px;
}
.custom-carousel-track-wrapper {
overflow: hidden;
}
.custom-carousel-track {
display: flex;
width: 100%;
transition: transform 0.5s ease;
}
.custom-carousel-slide {
flex: 0 0 33.3333%;
height: 300px;
width: 100%;
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
user-select: none;
}
.carousel-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.8);
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.carousel-caption h3 {
margin: 0;
font-size: var(--desktop-paragraph-size) !important;
color: #333;
text-align: center;
font-weight: 100;
}
.custom-carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
display: block;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
user-drag: none;
}
.custom-carousel-slide h3 {
font-size: 1.1rem;
color: #333;
}
.custom-carousel-dots {
display: flex;
justify-content: center;
margin-top: 10px;
gap: 8px;
}
.custom-carousel-dots .dot {
width: 10px;
height: 10px;
background: #ccc;
border-radius: 50%;
cursor: pointer;
}
.custom-carousel-dots .dot.active {
background: #333;
}
.custom-carousel img {
user-drag: none;
-webkit-user-drag: none;
-moz-user-drag: none;
-ms-user-drag: none;
pointer-events: auto;
user-select: none;
}
.custom-carousel a {
-webkit-user-drag: none;
user-drag: none;
user-select: none;
} .carousel-controls {
display: flex;
justify-content: center;
align-items: center;
margin-top: 12px;
width: 30vw;
margin: auto;
}
.carousel-dots {
display: flex;
gap: 8px;
transform: translateY(-4px);
}
.carousel-arrow {
background-color: rgba(255, 255, 255, 0.8);
border: none;
font-size: 18px;
cursor: pointer;
padding: 10px 10px;
margin: 0 20px;
color: #333;
border-radius: 4px;
transition: background-color 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.carousel-arrow:hover {
background-color: rgba(20, 71, 56, 0.8);
color: white;
}
}
.carousel-item.news {
overflow: hidden;
position: relative;
}
.carousel-item.news .carousel-image {
transition: transform 0.5s ease;
width: 100%;
height: 300px;
display: block;
}
.carousel-item.news:hover .carousel-image {
transform: scale(1.05);
}
.carousel-dots {
display: flex;
justify-content: center;
margin-top: 12px;
gap: 8px;
}
.carousel-dots .dot {
width: 10px;
height: 10px;
background-color: #bbb;
border-radius: 50%;
transition: background-color 0.3s ease;
cursor: pointer;
}
.carousel-dots .dot.active {
background-color: rgba(20, 71, 56, 0.8);
}
.carousel-container {
margin: auto;
position: relative;
z-index: 1;
display: flex;
justify-self: center;
align-self: center;
}
.carousel-container:before {
content: "";
position: absolute;
top: 0;
left: 50%;
right: 50%;
margin-left: -50vw; margin-right: -50vw; width: 100vw;
height: 100%;
z-index: -1;
}
.carousel-container h3 {
font-family: 'Zen Old Mincho';
font-size: min(calc(1.2 * 1440px / 100), 1.2vw);
font-weight: 400;
color: white;
padding-bottom: 0;
color: #3E131C;
}
.carousel-overflow {
overflow: hidden; }
.carousel-wrapper {
display: flex;
object-fit: cover;
flex-direction: row;
flex-wrap: nowrap;
}
.carousel-item {
flex: 0 0 calc((100%) / 3.5);
position: relative;
}
.discrete .carousel-item {
flex: 0 0 calc((100%) / 3);
position: relative;
}
.carousel-image {
width: 100%;
height: 280px;
object-fit: cover;
}
.carousel-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.9);
padding: 5px;
text-align: center;
color: #3E131C;
}
.carousel-nav-btn {
position: absolute;
top: calc(0% + min(calc(10 * 1440px / 100), 15vw));
transform: translateY(-50%);
background: rgba(52, 113, 91, 0.87);
color: white;
border: none;
width: min(calc(3 * 1440px / 100), 3vw);
height: min(calc(3 * 1440px / 100), 3vw);
border-radius: 50%;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}
.carousel-nav-btn:hover {
background: rgb(37, 82, 66);
}
.carousel-nav-btn svg {
width: min(calc(1.5 * 1440px / 100), 1.5vw);
height: min(calc(1.5 * 1440px / 100), 1.5vw);
fill: none;
stroke: white;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.carousel-nav-btn.prev {
display: none !important;
left: 80px;
}
.carousel-nav-btn.next {
display: none !important;
right: 80px;
}
@media (min-width: 1921px) {
.carousel-item {
flex: 0 0 calc((100%) / 5);
}
}
@media (max-width: 1024px) {
.carousel-caption h3 {
font-size: var(--tablet-font-size) !important;
}
.custom-carousel-slide {
flex: 0 0 50%;
}
.carousel-item {
flex: 0 0 calc((100%) / 3);
}
} @media (max-width: 767px) {
.custom-carousel-slide {
flex: 0 0 100%;
}
.custom-carousel {
padding-left: 4vw;
padding-right: 4vw;
padding-bottom: 10vw;
}
.carousel-caption h3 {
font-size: var(--mobile-font-size) !important;
}
.carousel-container {
padding-top: 2vw;
padding-bottom: 2vw;
padding-left: 30px;
padding-right: 30px; }
.carousel-item {
flex: 0 0 calc((100% - 40px) / 2);
}
.discrete .carousel-item {
flex: 0 0 calc((100% - 40px) / 2);
}
.carousel-image {
height: 300px; }
.carousel-title h2 {
font-size: 16px; }
.carousel-nav-btn {
transform: translateY(50px);
width: 36px; height: 36px;
}
.carousel-nav-btn svg {
width: 16px; height: 16px;
}
.carousel-nav-btn.prev {
left: 10px;
}
.carousel-nav-btn.next {
right: 10px;
}
} @media (max-width: 480px) {
.carousel-container {
padding: 0 20px; }
.carousel-caption {
padding-right: 20px;
}
.carousel-item {
flex: 0 0 100%; }
.discrete .carousel-item {
flex: 0 0 100%;
}
.carousel-image {
height: 250px; }
.carousel-nav-btn {
width: 30px; height: 30px;
}
.carousel-nav-btn svg {
width: 14px;
height: 14px;
}
.carousel-title h3 {
font-size: var(--mobile-font-size);
}
} @media (max-width: 1024px) and (min-width: 769px) {
.carousel-nav-btn.prev {
left: 55px;
}
.carousel-nav-btn.next {
right: 55px;
}
} @media (max-width: 768px) {
.carousel-nav-btn.prev {
left: 5px;
}
.carousel-nav-btn.next {
right: 5px;
}
}
.chef-container {
margin: auto;
display: grid;
grid-template-columns: 30% 67%;
padding-top: min(calc(10 * 1440px / 100), 10vw);
padding: min(calc(10 * 1440px / 100), 10vw) min(calc(10 * 1440px / 100), 10vw);
gap: 3%;
max-width: 1440px;
position: relative;
z-index: 1;
justify-self: center;
justify-content: space-between
}
.chef-container:before {
content: "";
position: absolute;
top: 0;
left: 50%;
right: 50%;
margin-left: -50vw; margin-right: -50vw; width: 100vw;
height: 100%;
background-image: linear-gradient(rgba(207, 171, 122, 0.2), rgba(207, 171, 122, 0.2)),
url(//senshinwaho.com/wp-content/plugins/my-snow-monkey/assets/css/wp-content/plugins/my-snow-monkey/assets/images/washi.png);
z-index: -1;
}
.chef-container h2 {
color: #3E131C;
justify-self: left;
font-family: 'Federo';
font-weight: 400;
font-size: var(--desktop-title-size);
letter-spacing: clamp(0.01rem, 0.1vw, 1rem);
}
.chef-container h3 {
color: #3E131C;
justify-self: left;
font-size: var(--desktop-subtitle-size);
font-family: 'Zen Old Mincho';
font-weight: 400;
letter-spacing: min(calc(0.2 * 1440px / 100), 0.2vw);
}
.chef-image {
align-self: end;
object-fit: cover;
}
.chef-content {
align-self: flex-end;
display: grid;
gap: min(calc(1.2 * 1440px / 100), 1.2vw);
}
.chef-text {
font-size: var(--desktop-paragraph-size);
line-height: 140%;
letter-spacing: 0.2em;
} @media (max-width: 1024px) and (min-width: 769px) {
.chef-text {
font-size: var(--tablet-font-size);
}
.chef-container h3 {
font-size: var(--tablet-subtitle-size);
}
.chef-container h2 {
font-size: var(--tablet-title-size);
}
.chef-image {
align-self: flex-start;
justify-content: flex-start;
justify-self: flex-start;
}
}
@media (max-width: 768px) {
.chef-container {
display: flex; flex-direction: column; padding: var(--mobile-padding);
gap: 10px;
padding-top: 60px;
}
.chef-container h3 {
justify-self: center;
padding-bottom: 20px;
font-size: var(--mobile-subtitle-size);
}
.chef-container h2 {
justify-self: center;
font-size: var(--mobile-title-size);
}
.chef-image {
align-self: center;
width: 40vw;
padding-bottom: 20px;
}
.chef-text {
font-size: var(--mobile-font-size);
}
}
.washi-background {
height: 100px;
width: 100vw;
background-image: linear-gradient(rgba(207, 171, 122, 0.2), rgba(207, 171, 122, 0.2)),
url(//senshinwaho.com/wp-content/plugins/my-snow-monkey/assets/css/wp-content/plugins/my-snow-monkey/assets/images/washi.png);
}
@media (max-width: 768px) {
.washi-background {
height: 60px;
}
}
.cuisine-section-wrapper {
position: relative;
width: 100%;
} .big-overlay-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
top: 15%;
font-size: 3vw;
font-weight: 700;
color: #709B84;
text-align: center;
z-index: 10;
letter-spacing: 0.1em;
white-space: nowrap;
pointer-events: none;
} .cuisine-new-container h2 {
font-weight: 400;
font-size: var(--desktop-title-size);
letter-spacing: clamp(0.01rem, 0.1vw, 1rem);
color: #709B84;
} .cuisine-new-container h3 {
font-weight: 400;
font-size: var(--desktop-subtitle-size);
letter-spacing: 0.2em;
color: #709B84;
} .cuisine-new-content {
gap: min(calc(1 * 1440px / 100), 1vw);
display: flex; flex-direction: column; justify-content: space-evenly;
} .cuisine-new-text {
font-size: var(--desktop-paragraph-size);
line-height: 140%;
letter-spacing: 0.2em;
color: #000000;
} .cuisine-new-image {
align-self: end;
position: relative; }
.cuisine-new-container {
margin: auto;
display: grid;
grid-template-columns: 45% 53%;
padding: min(calc(14 * 1440px / 100), 15vw) min(calc(10 * 1440px / 100), 10vw);
gap: 2%;
max-width: 1440px;
position: relative;
z-index: 1;
justify-self: center;
} @media (max-width: 1024px) and (min-width: 769px) {
.cuisine-new-text {
font-size: var(--tablet-font-size);
}
.cuisine-new-container h3 {
font-size: var(--tablet-subtitle-size);
}
.cuisine-new-container h2 {
font-size: var(--tablet-title-size);
}
.cuisine-new-image {
justify-content: flex-start;
}
}
@media (max-width: 768px) { .big-overlay-title {
font-size: min(calc(6 * 1440px / 100), 6vw);
white-space: normal;
line-height: 1.2;
} .cuisine-new-container {
display: flex; flex-direction: column-reverse; padding: 10vw 4vw;
gap: 4vw;
} .cuisine-new-container h2 {
font-size: var(--mobile-title-size);
text-align: center;
align-self: center; justify-self: center;
}
.cuisine-new-container h3 {
font-size: var(--mobile-subtitle-size);
align-self: center;
margin: 0;
} .cuisine-new-text {
font-size: var(--mobile-font-size);
} .cuisine-new-image {
order: 2;
}
}
.see-more-button {
display: flex;
justify-self: center;
text-decoration: none;
justify-content: center;
align-items: center;
color: #144738;
border-radius: 50px;
font-family: 'Zen Old Mincho';
padding: 5px;
border: solid 1px;
transition: 1s;
width: 150px;
height: 38px;
letter-spacing: 0.1em;
background-color: transparent;
font-size: var(--desktop-paragraph-size);
margin-top: 15px;
}
.see-more-button:hover {
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
color: white;
background-color: rgba(20, 71, 56, 1);
transition: 0.5s;
border: solid rgba(20, 71, 56, 1) 1px;
font-size: var(--desktop-paragraph-size);
}
.center-button {
align-self: center;
justify-self: center;
margin: auto;
margin-top: 10px;
}
.cuisine {
color: rgb(117, 64, 67);
}
a.cuisine {
color: rgb(117, 64, 67);
}     .content-container {
margin: auto;
display: grid;
grid-template-columns: 47.5% 47.5%;
gap: 5%;
max-width: 1200px;
padding: 100px 40px;
position: relative;
z-index: 1;
justify-self: center;
align-items: center;
} .content-wrapper {
gap: min(calc(1 * 1440px / 100), 1vw);
display: flex;
flex-direction: column;
justify-content: space-evenly;
} .content-container h2 {
font-family: 'Federo';
font-weight: 400;
font-size: var(--desktop-title-size);
letter-spacing: min(calc(0.4 * 1440px / 100), 0.4vw);
line-height: 140%;
} .content-container h3 {
font-weight: 400;
font-size: var(--desktop-subtitle-size);
letter-spacing: 0.2em;
} .content-text {
font-size: var(--desktop-paragraph-size);
line-height: 160%;
letter-spacing: 0.2em;
color: #333333;
} .image-wrapper {
align-self: center !important;
height: auto;
width: 100%;
overflow: hidden;
display: flex;
align-items: stretch;
}
.content-image {
width: auto;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
align-self: center;
} .content-container.cuisine h2,
.content-container.cuisine h3 {
color: rgb(117, 64, 67);
}
.content-container h2,
.content-container h3 {
color: rgba(20, 71, 56, 0.8);
} .cuisine {
color: rgb(117, 64, 67);
}
a.cuisine {
color: rgb(117, 64, 67);
} .big-overlay-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
top: 15%;
font-size: 3vw;
font-weight: 700;
color: #144738;
text-align: center;
z-index: 10;
letter-spacing: 0.1em;
white-space: nowrap;
pointer-events: none;
}
.menu-container {
display: flex;
align-content: center;
justify-content: center;
}
.menu {
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: 'Federo';
padding: 5px;
border: none;
transition: 1s;
width: clamp(120px, 12vw, 220px);
height: clamp(40px, 5vh, 80px);
letter-spacing: 0.2em;
background-color: rgb(117, 64, 67);
opacity: 1;
font-size: var(--desktop-paragraph-size);
justify-self: center;
align-self: center;
margin-bottom: 2vw;
margin-top: 2vw;
z-index: 500;
}
a.menu:hover {
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
color: rgb(117, 64, 67);
transition: 0.5s;
border: solid rgb(117, 64, 67) 1px;
font-size: var(--desktop-paragraph-size);
}     .concept-container {
padding: min(calc(10 * 1440px / 100), 10vw) 0vw;
text-align: left;
background-color: white;
background:
linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgb(255, 255, 255, 1)),
url(//senshinwaho.com/wp-content/plugins/my-snow-monkey/assets/images/concept-back.webp) no-repeat center center / cover;
}
.concept-content h2 {
font-family: 'Federo';
font-weight: 400;
font-size: var(--desktop-title-size);
letter-spacing: min(calc(0.4 * 1440px / 100), 0.4vw);
color: #333333;
justify-self: center;
}
.concept-cool-text h3 {
font-family: 'Zen Old Mincho';
font-weight: 400;
font-size: min(calc(3.4 * 1440px / 100), 3.4vw);
text-align: left;
letter-spacing: 0.2em;
color: #333333;
}
.concept-content {
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: min(calc(4 * 1440px / 100), 4vw);
}
.concept-info {
max-width: min(80vw, 900px);
padding: 0 40px;
padding-top: 0;
}
.concept-info h4 {
justify-self: center;
letter-spacing: 0.4em;
font-weight: 400;
font-size: clamp(20px, 2.15vw, 32px);
padding-bottom: 25px;
text-align: center;
}
.concept-text {
margin: min(calc(1 * 1440px / 100), 1vw);
font-size: var(--desktop-subtitle-size);
line-height: 160%;
letter-spacing: 0.2em;
color: #333333;
text-align: center;
}
.text-container {
display: flex;
flex-direction: column;
gap: 5%;
}     .contact-container h2 {
font-family: 'Federo';
font-weight: 400;
font-size: var(--desktop-title-size);
letter-spacing: min(calc(0.4 * 1440px / 100), 0.4vw);
color: rgba(20, 71, 56, 1);
}
.contact-container {
margin: auto;
display: grid;
padding: min(calc(14 * 1440px / 100), 15vw) min(calc(10 * 1440px / 100), 10vw);
gap: 5%;
max-width: 1440px;
position: relative;
z-index: 1;
justify-self: center;
text-align: center;
}
.contact-form {
max-width: 500px;
width: 80vw;
margin: 0 auto;
}
.form-group {
margin-bottom: 2rem;
text-align: left;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
cursor: default;
font-family: 'Zen Old Mincho';
}
.wpcf7-list-item-label {
font-family: 'Zen Old Mincho';
}
.wpcf7-list-item-label a {
font-family: 'Zen Old Mincho';
color: #144738!important;
text-decoration:underline;
}
.form-group input,
.form-group textarea {
font-family: 'Zen Old Mincho';
width: 100%;
padding: 1rem;
border: 1px solid #ddd;
}
.form-group textarea {
height: 10rem;
resize: vertical;
} .submit-btn {
font-family: "Federo";
width: min(calc(10 * 1440px / 100), 10vw);
height: min(calc(3 * 1440px / 100), 3vw);
align-items: center;
text-align: center;
letter-spacing: 0.1em;
transition: background-color 0.3s ease, color 0.3s ease;
background-color: rgba(20, 71, 56) !important;
}
.submit-btn:hover {
background-color: #ffffff;
color: rgba(20, 71, 56);
outline: 1px solid rgba(20, 71, 56);
}
#wpcf7-f853-p30-o1>form>div.contact-form>p>input {
font-size: min(calc(1.2 * 1440px / 100), 1.2vw);
border-radius: 50px;
padding: 0;
line-height: 1;
padding-block-start: 1px;
}
#wpcf7-f853-p30-o1>form>div.contact-form>p>span {
display: initial;
margin: 0;
} #wpcf7-f853-p30-o1>form>div.contact-form>p>input,
.wpcf7-submit {
font-size: min(calc(1.2 * 1440px / 100), 1.2vw);
border-radius: 50px !important;
padding: 0 !important;
line-height: 1 !important;
padding-block-start: 1px !important;
margin: auto !important;
margin-top: 30px !important;
background-color: rgba(20, 71, 56) !important; display: flex !important;
justify-content: center !important; align-items: center !important; }
#wpcf7-f853-p30-o1>form>div.contact-form>p>input:hover,
.wpcf7-submit:hover {
font-size: min(calc(1.2 * 1440px / 100), 1.2vw);
border-radius: 50px;
padding: 0;
line-height: 1;
padding-block-start: 1px;
margin: 15px;
background-color: white !important;
filter: none;
} .contact-form input:focus::placeholder,
.contact-form textarea:focus::placeholder {
opacity: 0;
transition: opacity 0.3s ease;
} .contact-form input::placeholder,
.contact-form textarea::placeholder {
opacity: 1;
transition: opacity 0.3s ease;
} .wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
color: red;
border: none;
} span.wpcf7-not-valid-tip {
color: red !important;
}     .transport-container {
max-width: 1200px;
margin: 0 auto;
padding: 100px 40px;
gap: 50px;
display: flex;
flex-direction: column;
}
.transport-item {
margin-bottom: 20px;
overflow: hidden;
} .transport-header {
color: #144738;
padding: 10px;
font-size: 1.5rem;
text-align: left;
border-bottom: 1px solid #cbcbcb;
} .transport-dropdown {
border-bottom: 1px solid #cbcbcb;
} .dropdown-header {
padding: 12px 16px;
font-size: 1.2rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.3s;
} .arrow {
transition: transform 0.3s ease;
display: inline-block;
font-size: 30px;
font-family: 'Zen Old Mincho' !important;
padding-top: 12px;
line-height: 1;
vertical-align: middle;
transform-origin: center center;
transform: rotate(180deg);
}
.vertical-line {
width: 2px;
background-color: #000;
height: 60px;
flex-shrink: 0;
}
.stop {
padding: 5px;
}
.stop p {
margin: 0;
}
.line {
display: flex;
align-items: center;
gap: 20px; margin-top: 20px;
margin-bottom: 10px;
margin-left: 10px;
}
.dropdown-title {
display: block;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 40px;
}
.dropdown-details {
margin-left: 40px;
}
.dropdown-header.active {
background-color: #144738 !important;
color: white;
text-decoration: none !important;
}
.dropdown-header:hover {
background-color: #144738 !important;
color: white;
text-decoration: none !important;
}
.dropdown-title,
.transport-title,
.dropdown-details h3,
.stop p,
.line span {
font-family: 'Zen Old Mincho';
}
.distance {
width: 50px;
white-space: nowrap;
}
.line span,
.stop p,
.dropdown-title {
font-size: var(--desktop-paragraph-size) !important;
}
.transport-title {
font-size: var(--desktop-title-size);
} .dropdown-details {
max-height: 0;
overflow: hidden;
opacity: 0;
transition:
max-height 0.5s ease,
opacity 0.3s ease,
transform 0.3s ease;
overflow: hidden;
transition: max-height 0.5s ease;
margin-left: 55px;
}
.transport-dropdown.open .dropdown-details {
max-height: 500px; opacity: 1;
transform: translateY(0);
margin-top: 25px;
margin-bottom: 25px;
}
.transport-dropdown.open .arrow {
transform: rotate(0deg);
}  .location-container {
margin: auto;
width: 100vw;
height: auto;
padding: 100px 40px;
padding-top: 0;
gap: 5%;
max-width: 1200px;
position: relative;
z-index: 1;
justify-self: left;
}  .location-content {
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
padding: 80px 40px;
padding-bottom: 20px;
gap: min(calc(1.5 * 1440px / 100), 1.5vw);
width: 100%;
max-width: 1200px;
justify-content: center;
justify-self: center;
}
.location-content.notice {
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
padding: 25px 0px;
padding-bottom: 20px;
gap: min(calc(1.5 * 1440px / 100), 1.5vw);
width: 100%;
max-width: 1200px;
justify-content: center;
justify-self: center;
}
.location-content h3 {
font-weight: 100;
color: #144738;
}
.location-container.notice {
padding-bottom: 100px;
padding-top: 100px;
} .location-map {
border: 0;
width: 100%;
max-width: 1200px;
max-height: 500px;
margin-bottom: 50px;
height: 65vh;
display: flex;
justify-self: center;
align-self: center;
align-items: center;
margin: auto;
}
.location-container h2 {
font-family: 'Federo';
font-weight: 400;
font-size: var(--desktop-title-size);
letter-spacing: min(calc(0.4 * 1440px / 100), 0.4vw);
color: rgba(20, 71, 56, 0.8);
}
.address {
color: #000000;
font-weight: 400;
text-align: center;
line-height: 160%;
font-size: var(--desktop-paragraph-size);
padding-bottom: 10px;
font-family: 'Zen Old Mincho';
}
.news-title {
text-align: center;
color: rgba(20, 71, 56, 0.8);
font-family: 'Federo';
font-size: 30px;
padding-bottom: 20px;
font-weight: 100;
}
.home-cuisine {
padding-bottom: 100px;
display: none;
} #body>div.l-container>header>div>div>div>div>div.c-row__col.c-row__col--fit.u-invisible-lg-up {
display: none;
}
.l-header {
background-color: transparent;
color: white;
position: relative;
}
.l-footer {
display: none;
}
#body>div.l-container>header {
box-shadow: none;
padding: min(calc(4 * 1440px / 100), 4vw) min(calc(6 * 1440px / 100), 6vw);
} .l-header .c-hamburger-btn__bar {
background-color: white;
} .reserve-now-mobile,
.header-logo {
opacity: 0;
transform: translateY(20px);
transition: opacity 1s ease-in-out,
transform 1s ease-in-out;
}
.scroll-text {
opacity: 0;
transition: opacity 2s ease-in-out;
}
.scroll-text-mobile,
.header-container-mobile {
display: none;
}     #instagram-feed {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-content:center;
width: 100%;
}
.instagram-feed-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: auto; gap: 5%;
position: relative;
z-index: 1;
} .sb_instagram_header  {
display: none;
}
#sbi_load{
display: none;
} #sb_instagram #sbi_images {
box-sizing: border-box;
display: grid;
width: 100%;
padding: 0px;
}   @media (max-width: 1024px) and (min-width: 768px) { .content-container .content-text {
font-size: var(--tablet-font-size);
}
.content-container h3 {
font-size: var(--tablet-subtitle-size);
}
.content-container h2 {
font-size: var(--tablet-title-size);
} .concept-text {
font-size: var(--tablet-font-size);
}
.concept-info {
max-width: 60vw;
}
.concept-info h4 {
font-size: calc(var(--tablet-subtitle-size)*1.3);
}
.concept-content h2 {
font-size: var(--tablet-title-size);
} .location-container {
padding-left: 40px !important;
padding-right: 40px !important;
} .content-text {
font-size: var(--tablet-font-size);
}
.content-container h2 {
font-size: var(--tablet-title-size);
}
.content-container h3 {
font-size: var(--tablet-subtitle-size);
}
}   @media (max-width: 767px) { .big-overlay-title {
font-size: min(calc(6 * 1440px / 100), 6vw);
white-space: normal;
line-height: 1.2;
} .content-container {
display: flex;
flex-direction: column;
padding: 10vw 4vw;
gap: 4vw;
}
.content-container h2 {
font-size: var(--mobile-title-size);
text-align: center;
align-self: center;
justify-self: center;
}
.content-container h3 {
font-size: var(--mobile-subtitle-size);
align-self: center;
margin: 0;
text-align: center;
}
.content-text {
font-size: var(--mobile-font-size);
}
.content-wrapper {
gap: 15px;
} .content-container .image-wrapper {
order: -1; }
.content-container .content-wrapper {
order: 1;
} .concept-container {
padding: 10vw 4vw;
}
.concept-info {
padding: 0;
}
.concept-container h2 {
font-size: var(--mobile-title-size);
text-align: center;
}
.concept-container h3 {
padding-bottom: var(--mobile-padding);
}
.concept-cool-text h3 {
font-size: 6vw;
}
.concept-info h4 {
font-size: var(--mobile-subtitle-size);
padding-bottom: 10px;
letter-spacing: 0.2em;
}
.concept-content {
gap: 1vw;
}
.concept-info {
max-width: none;
}
.concept-text {
font-size: var(--mobile-font-size);
} .contact-container h2 {
margin-top: 100px;
font-size: var(--mobile-title-size);
text-align: center;
align-self: center;
justify-self: center;
}
.contact-container {
padding: var(--mobile-padding);
padding-bottom: 40px;
}
.contact-form {
max-width: none;
width: 100%;
}
.contact-form input[type="submit"] {
font-size: 16px;
width: 150px;
height: 50px;
margin: 15px auto;
display: block;
} #wpcf7-f853-p30-o1>form>div.contact-form>p>input {
font-size: 16px !important;
width: 150px !important;
height: 50px !important;
margin: 15px auto !important;
display: block !important;
background-color: rgba(20, 71, 56, 1) !important;
} .distance {
width: 40px;
}
.dropdown-title {
margin-left: 5px;
font-size: var(--mobile-subtitle-size);
}
.dropdown-details {
margin-left: 30px;
}
.stop p {
font-size: var(--mobile-subtitle-size) !important;
}
.line span {
font-size: var(--mobile-font-size);
}
.transport-title {
font-size: var(--mobile-title-size);
}
.transport-container {
padding: 10vw 4vw;
}
.location-container,
.washi-bg {
display: flex;
flex-direction: column;
gap: 0px;
width: calc(100% - 15px);
padding: 50px 8px;
}
.location-container h2 {
font-size: var(--mobile-title-size);
text-align: center;
align-self: center;
justify-self: center;
}
.address {
font-size: var(--mobile-font-size);
align-self: center;
margin: 0;
}
.location-container {
padding-top: 10vw !important;
padding-bottom: 10vw !important;
}
.location-content {
padding: 10vw 4vw;
} #body>div.l-container>header,
#menu>div {
display: none;
}
.circle-menu {
top: 20px;
width: 40px;
height: 40px;
}
.hamburger {
width: 20px;
height: 15px;
}
.hamburger div {
height: 2px;
}
.menu {
width: 50%;
padding-top: 150px;
padding-left: 10vw;
padding-right: 10vw;
} .scroll-text-mobile {
display: block;
margin: auto;
color: white;
font-size: 16px;
width: 80%;
justify-self: center;
}
.header-container-mobile {
display: block;
}
.scroll-line {
width: 0.3vw;
}
.scroll-square {
width: 0.6vw;
height: 6vw;
}
.static-reserve {
display: none;
}
@keyframes scrollSquaresAnimation {
0% {
top: 0;
opacity: 0.3;
}
85% {
top: calc(100% - min(calc(5 * 1440px / 100), 5vw));
opacity: 1;
}
100% {
top: calc(100% - min(calc(5 * 1440px / 100), 5vw));
opacity: 0;
}
}
.home-cuisine {
padding-bottom: 4vw;
} .see-more-button {
margin: 15px auto;
}
}    body {
background-color: rgb(255, 255, 255); margin: 0;
padding: 0;
}
#body>div.l-container>header {
display: none;
}
html[data-sticky-footer=true] .l-container {
min-height: 100svh;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Zen Old Mincho", "Federo";
font-style: normal;
font-weight: 400;
line-height: 160%;
}
.kanji-font {
font-family: 'Zen Old Mincho';
}