/* 
font-family: thirsty-script, sans-serif;
font-family: hiragino-kaku-gothic-pron, sans-serif;
font-family: momochidori, sans-serif;
font-family: "bodega-sans", sans-serif;
*/

html {
box-sizing: border-box;
scroll-behavior: smooth;
}

:root{
--Fuji_redpurple: #A50E6D;
--Fuji_deeppurple: #663A77;
--Fuji_lightpurple: #9B6296;
--Ichi_lightpink: #FDB3AF;
--Ichi_coralpink: #FC6D7F;
--Ichi_yellow: #FFBF67;
--Ichi_orange: #FF7652;
--Ichi_lightblue: #B8E8FC;
--Ichi_aqua: #83D9F0;
--Ichi_blue: #638AFF;
--black161616: #161616;
--animate-delay-1: 0.1s;
--animate-delay-2: 0.2s;
--animate-delay-3: 0.3s;
--animate-delay-4: 0.4s;
--animate-delay-10: 1s;
}

body{
width: 100%;
/* height: 100%; */
height: auto;
margin: 0;
padding: 0;
line-height: 1.6;
font-size: 16px;
letter-spacing: normal;
color: var(--black161616);
-webkit-font-smoothing: antialiased;
font-family: hiragino-kaku-gothic-pron, sans-serif;
overflow-x: hidden;
}

.bg-video{
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
object-fit: cover;
z-index: -999;
}

/* ===common=== */
div[class^="section-"]{
padding: 100px 0;
width: 100%;
/* height: auto; */
}

*, *::before, *::after {
box-sizing: inherit;
}

a{
text-decoration: none;
}

p{
font-family: hiragino-kaku-gothic-pron, sans-serif;
font-size: 16px;
}

ul li{
list-style: none;
}

img{
width: 100%;
height: auto;
}

h2{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--black161616);
padding-top: 80px;
}

@media (max-width: 576px){
h2{
transform: scale(.8);
}

}

.section-about h2,
.section-access h2{
color: white;
text-shadow: 0px 0px 10px rgba(0, 0, 0, .6);
}

h2 .h2-en{
font-family: thirsty-script, sans-serif;
font-weight: bold;
font-size: 70px;
line-height: 1;
}

h2 .h2-ja{
font-family: momochidori, sans-serif;
font-weight: bold;
font-size: 20px;
line-height: 1;
vertical-align: top;
padding-top: 2px;
border-top: var(--Fuji_redpurple) solid 3px;
}

.wrapper{
max-width: 1140px;
margin: 0 auto;
}

.marker-orange{
background:linear-gradient(transparent 50%, #ffd6cb 50%);
padding-bottom: .2em;
}
.marker-lightblue{
background:linear-gradient(transparent 50%, #bfedff 50%);
padding-bottom: .2em;
}
.marker-lightpink{
background:linear-gradient(transparent 50%, #ffd5dc 50%);
padding-bottom: .2em;
}
.marker-pink{
background:linear-gradient(transparent 50%, #ffc7d0 50%);
padding-bottom: .2em;
}
.marker-purple{
background:linear-gradient(transparent 50%, #edc8ff 50%);
padding-bottom: .2em;
}
.marker-aqua{
background:linear-gradient(transparent 50%, #b7f7ff 50%);
padding-bottom: .2em;
}
.marker-blue{
background:linear-gradient(transparent 50%, #c5c9ff 50%);
padding-bottom: .2em;
}

.wn{
white-space: nowrap;
}

.larger{
font-size: larger;
}

.smaller{
font-size: smaller;
}

/* ===nav=== */

header{
position: sticky;
top: 0;
z-index: 999;
}

.nav {
position: relative;
padding: 1rem;
justify-content: space-between;
align-items: center;
}

.nav-links {
gap: 1rem;
display: flex;
justify-content: center;
text-align: center;
transition: all 0.3s ease;
}

.nav-links li a {
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--black161616);
padding: 5px;
border: var(--black161616) solid 6px;
width: 230px;
height: auto;
border-radius: 9999px;
background: rgba(255, 255, 255, .6);
backdrop-filter: blur(10px);
}

.nav-links li a .menu-en {
font-family: thirsty-script, sans-serif;
font-weight: bold;
font-size: 40px;
letter-spacing: normal;
line-height: 1;
}

.nav-links li a .menu-ja {
font-family: momochidori, sans-serif;
font-weight: bold;
font-size: 16px;
line-height: 1;
vertical-align: top;
padding-top: 2px;
border-top: var(--Fuji_redpurple) solid 3px;
}

.menu-toggle {
color: var(--black161616);
width: 140px;
height: 80px;
font-family: thirsty-script, sans-serif;
font-weight: bold;
letter-spacing: normal;
font-size: 40px;
border: none;
margin-left: auto;
z-index: 10000;
position: fixed;
top: 10px;
right: 10px;
padding: 10px 15px;
background: rgba(255, 255, 255, .8);
backdrop-filter: blur(5px);
border-radius: 9999px;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease, visibility 0.4s ease;
}

.menu-toggle.fade-out {
opacity: 0;
visibility: hidden;
}

.nav-links.active {
display: flex;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}

@media (max-width: 1000px) {
.nav{
height: 100%;
}
.nav-links {
width: 100%;
height: 100vh;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
inset: 0;
width: 100%;
opacity: 0;
transform: translateY(-20px);
pointer-events: none;
transition: all 0.3s ease;
background: rgba(255,255,255, .3);
backdrop-filter: blur(15px);
}

.nav-links.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}

.nav-links li {
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
margin: 1em auto;
}

.nav-links.active li {
opacity: 1;
transform: translateY(0);
}

.nav-links.active li:nth-child(1) { transition-delay: 0.1s; }
.nav-links.active li:nth-child(2) { transition-delay: 0.2s; }
.nav-links.active li:nth-child(3) { transition-delay: 0.3s; }
.nav-links.active li:nth-child(4) { transition-delay: 0.4s; }

.menu-toggle {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
}

@media (max-width: 576px){
.menu-toggle{
transform: scale(.7);
top: 0;
right: 0;

}
}

/* ===HERO== */

.section-hero{
height: calc(100vh - 113px);
position: relative;
}

.section-hero .wallpaint{
position: absolute;
left: 50%;
bottom: -50px;
transform: translate(-50%,0);
width: 100%;
max-width: 1600px;
z-index: 1;
}

h1{
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 2;
width: 90%;
max-width: 700px;
}

.section-hero .flower{
z-index: 3;
position: absolute;
width: 6%;
min-width: 80px;
height: auto;
animation-delay: var(--animate-delay-10);
}
.section-hero .flower_1{
top: 5%;
left: 5%;
}
.section-hero .flower_2{
top: 15%;
right: 25%;
}
.section-hero .flower_3{
top: 3%;
right: 5%;
}
.section-hero .flower_4{
top: 45%;
left: 5%;
}
.section-hero .flower_5{
top: 50%;
right: 5%;
}

@media (max-width: 1200px) {
.section-hero{
height: calc(100vh - 20px);
}
h1{
top: 30%;
}
.section-hero .flower_1{
top: 8%;
left: 8%;
}
.section-hero .flower_2{
top: 18%;
right: 10%;
}
.section-hero .flower_3{
top: 5%;
right: 3%;
}
.section-hero .flower_4{
top: 45%;
left: 6%;
}
.section-hero .flower_5{
top: 43%;
right: 6%;
}
}

@media (max-width: 768px) {
.section-hero .wallpaint{
bottom: 10%;
}
h1{
max-width: 500px;
}
}

@media (max-width: 576px) {
.section-hero .wallpaint{
bottom: 30%;
}
h1{
top: 35%;
}
.section-hero .flower_1{
top: 10%;
left: 5%;
}
.section-hero .flower_2{
top: 22%;
right: 5%;
}
.section-hero .flower_3{
top: 5%;
right: 25%;
}
.section-hero .flower_4{
top: 78%;
left: 12%;
}
.section-hero .flower_5{
top: 85%;
right: 10%;
}
}

/* ===About=== */

.section-about{
overflow: hidden;
padding-top: 0 !important;
}

.section-about .about-intro{
background: url(../img/RentalSpaceLP/about_bg.webp) center / cover no-repeat;
width: 100%;
height: 100vh;
position: relative;
}

.about-text-outer{
width: 95%;
max-width: 1140px;
margin: 0 auto;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%,-50%);
}

.about-text{
/* animation-delay: var(--animate-delay-4); */
animation-duration: 1s;
}

.about-text p{
font-weight: bold;
background: white;
display: inline;
padding: 8px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}

.about span[class^="marker-"]{
font-size: larger;
}

@media (max-width: 1200px) {
.about-text p{
font-size: smaller;
}
}
/* @media (max-width: 768px){
.about-text{
animation-delay: var(--animate-delay-1);
}
} */

.section-about>.section-about-wrap{
padding: 0;
}

.section-about>.section-about-wrap>section{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
position: relative;
padding: 60px 20px;
overflow: hidden;
}

.section-about>.section-about-wrap>section>.section-inner{
position: relative;
max-width: 1100px;
margin: 0 auto;
padding: 80px 20px;
text-align: center;
}

.section-about .section-about-wrap .bbq{
background: var(--Ichi_coralpink);
}
.section-about .section-about-wrap .pool{
background: var(--Ichi_lightblue);
}
.section-about .section-about-wrap .convinient{
background: var(--Ichi_aqua);
}
.section-about .section-about-wrap .photogenic{
background: var(--Ichi_blue);
}

.about-section-img{
max-width: 900px;
}

.about-section-img img{
display: block;
width: 100%;
aspect-ratio: 5 / 3;
object-fit: cover;
border-radius: 30px;
box-shadow: 5px 5px 0 var(--black161616);
margin: 0 auto;
position: relative;
z-index: 1;
}

.about-section-text{
font-weight: bold;
text-align: left;
background: white;
border-radius: 30px;
box-shadow: 5px 5px 0 var(--black161616);
position: relative;
margin: -20px auto 0;
z-index: 2;
display: inline-block;
padding: 15px 30px 20px;
}

.en-headline{
font-family: "bodega-sans", sans-serif;
font-weight: 500;
font-size: 80px;
line-height: 1;
color: white;
text-shadow: 3px 3px 0 var(--black161616);
position: absolute;
animation-delay: var(--animate-delay-4);
}

.bbq .en-headline,
.convinient .en-headline{
top: 50%;
right: 103%;
}
.pool .en-headline,
.photogenic .en-headline{
top: 50%;
left: 103%;
}

.bbq .about-section-img img,
.convinient .about-section-img img{
right: 5px;
}
.pool .about-section-img img,
.photogenic .about-section-img img{
left: 5px;
}

.bbq .about-section-text,
.convinient .about-section-text{
left: 25%;
}
.pool .about-section-text,
.photogenic .about-section-text{
right: 25%;
}
.about-section-text h3{
display: inline;
font-family: momochidori, sans-serif;
font-size: 30px;
line-height: 1;
}

.deco {
position: absolute;
z-index: 2;
width: 18%;
min-width: 180px;
}
/* bbq deco */
.deco-sausages {
top: calc(16% - 50px);
left: -3%;
animation-delay: var(--animate-delay-1);
}
.deco-steak1 {
width: 20%;
top: calc(20% - 50px);
right: -3%;
animation-delay: var(--animate-delay-2);
}
.deco-steak2 {
bottom: calc(20% - 50px);
left: -3%;
animation-delay: var(--animate-delay-3);
}
.deco-corn {
width: 16%;
bottom: calc(16% - 50px);
right: -5%;
animation-delay: var(--animate-delay-4);
}
/* pool deco */
.deco-donut {
min-width: 150px;
top: calc(20% - 50px);
left: 13%;
animation-delay: var(--animate-delay-1);
}
.deco-ball {
width: 14%;
min-width: 130px;
top: calc(20% - 50px);
right: 10%;
animation-delay: var(--animate-delay-4);
}
.deco-unicorn {
width: 25%;
min-width: 200px;
bottom: calc(15% - 50px);
right: 3%;
animation-delay: var(--animate-delay-2);
}
/* convinient deco */
.convinient .about-section-img img{
object-position: bottom;
}
.deco-famcar {
width: 12%;
min-width: 110px;
top: calc(20% - 50px);
left: 2%;
animation-delay: var(--animate-delay-4);
animation-duration: 2s;
}
.deco-car {
width: 20%;
top: calc(15% - 50px);
right: 8%;
animation-delay: var(--animate-delay-1);
animation-duration: 2s;
}
.deco-cart {
width: 13%;
min-width: 120px;
bottom: calc(10% - 50px);
left: 13%;
animation-delay: var(--animate-delay-4);
animation-duration: 2s;
}
.deco-basket {
width: 13%;
min-width: 120px;
bottom: calc(28% - 50px);
right: 12%;
animation-delay: var(--animate-delay-1);
animation-duration: 2s;
}
/* photogenic deco */
.deco-mock1 {
width: 12%;
min-width: 120px;
top: calc(10% - 50px);
left: 13%;
animation-delay: var(--animate-delay-1);
}
.deco-mock2 {
width: 25%;
min-width: 230px;
bottom: calc(35% - 50px);
right: 5%;
animation-delay: var(--animate-delay-2);
}
.deco-insta3d{
width: 8%;
min-width: 100px;
bottom: calc(35% - 50px);
left: 20%;
animation-delay: var(--animate-delay-4);
}

@media (max-width: 1200px){
.section-about>.section-about-wrap>section>.section-inner{
padding: 0 0 20px;
}
.bbq .about-section-text,
.convinient .about-section-text{
left: 15%;
}
.pool .about-section-text,
.photogenic .about-section-text{
right: 15%;
}
.en-headline{
font-size: 60px;
}
.bbq .en-headline,
.convinient .en-headline{
top: -40%;
right: 5%;
}
.pool .en-headline,
.photogenic .en-headline{
top: -40%;
left: 5%;
}
/* pool deco */
.deco-donut {
left: 3%;
}
.deco-unicorn {
bottom: calc(8% - 50px);
right: -5%;
}
/* convinient deco */
.deco-cart {
left: 5%;
}
.deco-basket {
bottom: calc(10% - 50px);
right: 5%;
}
/* photogenic deco */
.deco-mock1 {
left: 5%;
}
.deco-insta3d{
min-width: 80px;
bottom: calc(12% - 50px);
left: 3%;
}
}

@media (max-width: 768px){
.en-headline{
animation-delay: var(--animate-delay-1);
}
.about-section-img img{
aspect-ratio: 5 / 4;
}
.bbq .about-section-text,
.convinient .about-section-text{
left: 3%;
}
.pool .about-section-text,
.photogenic .about-section-text{
right: 3%;
}
/* bbq deco */
.deco-sausages {
top: calc(10% - 50px);
}
.deco-steak2 {
bottom: calc(10% - 50px);
}
.deco-corn {
bottom: calc(10% - 50px);
right: -10%;
}
/* pool deco */
.deco-donut {
top: calc(10% - 50px);
left: 8%;
}
.deco-ball {
top: calc(15% - 50px);
right: 5%;
}
.deco-unicorn {
bottom: calc(10% - 50px);
right: -2%;
}
/* convinient deco */
.deco-famcar {
top: calc(10% - 50px);
min-width: 100px;
}
.deco-car {
	min-width: 170px;
top: calc(13% - 50px);
right: 7%;
}
.deco-cart {
bottom: calc(10% - 50px);
}
.deco-basket {
bottom: calc(18% - 50px);
}
/* photogenic deco */
.deco-mock1 {
left: 8%;
}
.deco-mock2 {
bottom: calc(13% - 50px);
}
}

@media (max-width: 576px){
.section-about>.section-about-wrap>section{
padding: 0;
}
.section-about>.section-about-wrap>section>.section-inner{
padding: 0 0 60px;
}
.en-headline{
font-size: 50px;
}
.about-section-text{
width: 90%;
border-radius: 20px;
margin: -5px auto 0;
padding: 10px;
}
.about-section-text h3{
font-size: 24px;
}
.about-section-text p{
font-size: 14px;
}
.deco{
animation-delay: 0s;
}
}


/* ===Pricing=== */

.section-pricing{
width: 100%;
height: auto;
animation-duration: 1s;
}

.pricing-inner{
background: rgba(255, 255, 255, .8);
width: 95%;
max-width: 1140px;
margin: 0 auto 80px;
border-radius: 30px;
overflow: hidden;
padding-bottom: 50px;
}

.section-pricing  h5{
font-weight: bold;
font-size: 24px;
}

.pricing-flex{
display: flex;
justify-content: center;
align-items: start;
margin-top: 3em;
}

.price-inner{
width: 100%;
max-width: 280px;
margin: 0 auto;
}

.pricing-flex .price{
width: 50%;
max-width: 350px;
}

.pricing-flex .includes{
font-weight: bold;
width: 50%;
}

.pricing-flex .includes .price-inner
{
max-width: 350px;
}

.pricing-flex .includes ul{
padding-top: 1em;
}

.pricing-flex .includes ul li{
text-indent: -1em;
padding-left: 1em;
}

.plans table tr th,
.plans table tr td{
font-weight: bold;
}

.plans table tr td{
padding-left: 2em;
}

.BBQplan,
.BBQPOOLplan{
padding: 1em;
position: relative;
margin-top: 4em;
width: 16em;
}

.BBQplan{
background:rgba(252,109,127,.5);
animation-delay: var(--animate-delay-2);
animation-duration: 1s;
}

.BBQPOOLplan{
background:rgba(255,118,82,.5);
animation-delay: var(--animate-delay-4);
animation-duration: 1s;
}

.plan-title{
font-family: "bodega-sans", sans-serif;
font-weight: 500;
display: block;
z-index: 10;
font-size: 50px;
position: absolute;
top: -59px;
left: 2px;
}

.plan-title span{
font-family: hiragino-kaku-gothic-pron, sans-serif;
font-size: 16px;
font-weight: bold;
}

@media (max-width: 768px){
.pricing-flex{
flex-direction: column;
}
.pricing-flex .price{
width: 95%;
margin: 0 auto;
}
.pricing-flex .includes{
padding-top: 50px;
width: 95%;
margin: 0 auto;
}
}

.courses{
width: 100%;
height: auto;
}

.courses h4,
.option-rental h4{
font-size: 40px;
margin: 0 auto;
text-align: center;
}

.courses h4 span,
.option-rental h4 span{
padding: 0 5px 5px;
}

.courses h6{
font-size: 24px;
font-weight: bold;
}

.courses h6 span{
font-size: 14px;
padding-left: 1em;
}

.course-flex{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 4em;
}

.course-text ul li{
position: relative;
font-weight: bold;
margin-left: 2em;
}

.course-text ul li::before{
content: '';
position: absolute;
left: -1.5em;
top: 0.4em;
width: 0.7em;
height: 0.7em;
border-radius: 50%;
}

.variety .course-text ul li::before{
background: var(--Ichi_yellow);
}
.beef .course-text ul li::before{
background: var(--Ichi_orange);
}
.premium .course-text ul li::before{
background: var(--Ichi_coralpink);
}

.course-en{
font-family: "bodega-sans", sans-serif;
font-weight: 500;
line-height: 1;
text-shadow: 3px 3px 0 var(--black161616);
font-size: 60px;
display: inline-block;
}
.variety .course-en{
color: var(--Ichi_yellow);
}
.beef .course-en{
color: var(--Ichi_orange);
}
.premium .course-en{
color: var(--Ichi_coralpink)
}

.course-text{
padding-left: 6em;
}

.beef .course-text,
.premium .course-text{
padding-top: 1em;
}

.course-img{
width: 100%;
max-width: 600px;
filter: drop-shadow(0 5px 5px grey);
padding: 1em 0;
}

.beef{
flex-direction: row-reverse;
}

.beef .course-text{
padding-left: 0;
padding-right: 12em;
}

.premium small{
max-width: 25em;
}

@media (max-width: 1200px){
.course-text{
padding-left: 1em;
}
.beef .course-text{
padding-right: 6em;
}
}
@media (max-width: 1000px){
.course-flex{
flex-direction: column-reverse;
align-items: end;
}
.beef{
align-items: start;
}
.variety .course-text,
.premium .course-text{
align-self: center;
margin-left: -10em;
}
.beef .course-text{
align-self: center;
margin-right: -10em;
}
}
@media (max-width: 768px){
.course-en{
font-size: 40px;
text-shadow: 1px 1px 0 var(--black161616);
}
.courses h6{
font-size: 20px;
}
.variety .course-text,
.premium .course-text{
margin-left: 0;
}
}

.option-rental-flex{
display: flex;
justify-content: space-around;
align-items: start;
flex-wrap: wrap;
width: 95%;
margin: 0 auto;
}

.option-rental-flex p{
font-size: 24px;
font-weight: bold;
margin-bottom: 5px;
}

.option-menu,
.option-item,
.rental{
padding: 0 3em 2em;
}

.rental{
grid-column: span 2 / span 2;
}

.option-rental-flex table{
text-align: left;
width: 340px;
}

.option-rental-flex table tr{
border-bottom: solid 1px var(--Ichi_aqua);
}

.option-rental-flex table tr th span{
font-size: 14px;
}

.option-rental-flex table tr th,
.option-rental-flex table tr td{
padding: 5px 0 5px 5px;
}

@media (max-width: 1000px){
.courses h4,
.option-rental h4{
font-size: 30px;
}
}
@media (max-width: 768px){

.option-rental-flex p{
font-size: 20px;
padding-top: 2em;
}
.option-rental-flex table{
width: 320px;
}
.option-menu,
.option-item,
.rental{
padding: 0;
}
}

@media (max-width: 576px){
.courses h4,
.option-rental h4{
font-size: 24px;
}
}


/* ===Booking=== */

.section-booking{
width: 100%;
height: auto;
background: url(../img/RentalSpaceLP/booking_bg.webp) center / cover no-repeat;
overflow-y: hidden;
}

.booking-inner{
background: rgba(255, 255, 255, .1);
backdrop-filter: blur(30px);
border-radius: 30px;
}

.booking-text{
font-weight: bold;
}

.booking-text span{
text-shadow: 0	0	6px white;
}
.booking-text span:nth-child(1){
color: #30ad02;
}
.booking-text span:nth-child(2){
color: #02abe4;
}
.booking-text span:nth-child(3){
color: #FF566E;
}
.booking-text span:last-child{
color: #FF6600;
}

.booking-btn-grid{
max-width: 1000px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 8px;
place-items: center;
}

.booking-btn{
background: rgba(255, 255, 255, .5);
width: 100%;
max-width: 450px;
height: 140px;
border-radius: 9999px;
text-align: center;
display: block;
padding: 20px;
position: relative;
text-decoration: none !important;
color: var(--black161616) !important;
transition: all .5s ease;
}
.by-line{
border: solid 8px #38CD01;
animation-delay: var(--animate-delay-1);
}
.by-phone{
border: solid 8px #FF566E;
animation-delay: var(--animate-delay-2);
}
.by-mail{
border: solid 8px #35CBFF;
animation-delay: var(--animate-delay-3);
}
.by-jalan{
border: solid 8px #FF6600;
animation-delay: var(--animate-delay-4);
}

.booking-btn::before{
content: "";
position: absolute;
left: 2em;
top: 2em;
width: 60px;
height: 60px;
}
.by-line::before{
background: url("../img/RentalSpaceLP/icon_line.svg") center / cover no-repeat;
}
.by-phone::before{
background: url("../img/RentalSpaceLP/icon_phone.svg") center / cover no-repeat;
}
.by-mail::before{
background: url("../img/RentalSpaceLP/icon_mail.svg") center / cover no-repeat;
}
.by-jalan::before{
background: url("../img/RentalSpaceLP/icon_jalan.svg") center / cover no-repeat;
}

.booking-btn:hover{
background: white;
transform: scale(1.02);
box-shadow: 5px 5px 5px lightsteelblue;
transition: all .5s ease;
}

.booking-btn p{
font-size: 30px;
font-weight: bold;
line-height: .7;
margin: 1em auto .3em;
padding-left: 2.5em;
}

.booking-btn p span{
font-size: 14px;
}

.booking-btn::after{
position: absolute;
top: 48%;
left: 55%;
transform: translate(-50%, -50%);
font-family: "bodega-sans", sans-serif;
font-weight: bold;
font-size: 80px;
opacity: 0.15;
}
.by-line::after{
content: "LINE";
color: #38CD01;
}
.by-phone::after{
content: "PHONE";
color: #FF566E;
}
.by-mail::after{
content: "MAIL";
color: #35CBFF;
}
.by-jalan::after{
content: "JALAN";
color: #FF6600;
}
a[href^="tel:"] {
pointer-events: auto;
cursor: pointer;
}

.note{
max-width: 95%;
margin: 3em auto 0;
}

.note p{
font-size: 14px;
font-weight: bold;
text-indent: -1em;
padding-left: 1em;
}

.faq{
margin : 60px auto;
font-weight: bold;
min-height: 20em;
}

.faq-title{
text-align: center;
font-size: 24px;
text-shadow: 0px 0px 10px white;
}

.faq-title span{
font-family: "bodega-sans", sans-serif;
font-weight: 500;
font-size: 32px;
padding-right: 5px;
color: var(--Ichi_orange);
}

.faq-flex{
display: flex;
justify-content: center;
align-items: start;
}

.faq-box{
width: 330px;
background: white;
padding-left: 20px;
}

.Qs span{
font-family: "bodega-sans", sans-serif;
font-weight: 500;
font-size: 24px;
padding-right: 10px;
color: var(--Ichi_orange);
}

.As span{
color: #638AFF;
}

.As p{
line-height: 1.2;
text-indent: -1em;
padding-left: 1em;
}

/* .faq-box:hover .Qs:hover .As,
.faq-box .Qs--default .As {
height: 4em;
}
.faq-box:hover .Qs:hover .As-long,
.faq-box .Qs--default .As-long {
height: 5.5em;
}
.As,
.faq-box:hover .As {
height: 0;
overflow: hidden;
transition: height .25s;
} */

.As {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease, opacity 0.5s ease;
opacity: 0;
}
.As.open {
max-height: 6em;
opacity: 1;
}

@media (max-width: 1000px){
.faq{
min-height: 30em;
}
.faq-flex{
flex-direction: column;
justify-content: flex-start;
min-height: 26em;
}
.faq-box{
margin: 0 auto;
}
.booking-btn{
max-width: 350px;
height: 110px;
}
.booking-btn p{
font-size: 24px;
margin: .7em auto .3em;
padding-left: 2em;
}
.booking-btn::before{
left: 1em;
top: 1.2em;
width: 50px;
height: 50px;
}
.booking-btn::after{
font-size: 60px;
}
}
@media (max-width: 768px){
.booking-btn-grid{
grid-template-columns: 1fr;
grid-template-rows: repeat(4, auto);
}
.booking-btn {
transform: scale(.95);
}
}

/* ===Access=== */

.section-access{
padding: 0 !important;
}

.access-inner{
width: 100%;
height: auto;
background: url(../img/RentalSpaceLP/access_bg.webp) center / cover no-repeat;
}

.section-access .access-inner table{
font-weight: bold;
margin: 0 auto;
border-collapse: separate;
border-spacing: 5px;
margin: 5em auto 3em;
font-size: 22px;
}

.access-inner table tr th,
.access-inner table tr td{
background: rgba(255, 255, 255, .8);
padding: 5px 10px;
}

.access-inner table tr th{
white-space: nowrap;
}

.access-inner p{
color: white;
font-weight: bold;
text-shadow: 0px 0px 5px black;
}

.gmap{
padding-bottom: 100px;
animation-delay: var(--animate-delay-10);
animation-duration: 1s;
}

.gallery-bg {
background: var(--Ichi_lightpink);
padding: 1em 0;
position: relative;
}

.gallery {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1em;
padding: 0 1em;
place-items: center;
}

.gallery div {
overflow: hidden;
border-radius: 30px;
aspect-ratio: 1 / 1;
transition: transform 0.3s ease;
}

.gallery div img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}

.gallery div img:hover {
transform: scale(1.2);
}

.gallery .vertical {
grid-row: span 2;
aspect-ratio: 1 / 2.09;
}

.gallery .horizontal {
grid-column: span 2;
aspect-ratio: 2 / .96;
}

.gallery-bg .flower{
position: absolute;
width: 80px;
height: auto;
}
.gallery-bg .flower_1{
top: 23%;
left: 35%;
}
.gallery-bg .flower_2{
top: 23%;
right: 20%;
}
.gallery-bg .flower_3{
top: 48%;
left: 48%;
}
.gallery-bg .flower_4{
top: 73%;
left: 22%;
}
.gallery-bg .flower_5{
top: 73%;
right: 23%;
}

@media (max-width: 768px){
.gmap{
animation-delay: var(--animate-delay-1);
}
.section-access .access-inner table{
font-size: 16px;
}
.gallery{
grid-template-columns: repeat(2, 1fr);
}
.sp_glr1{
order: 1;
}
.sp_glr2{
order: 2;
}
.sp_glr3{
order: 3;
}
.sp_glr4{
order: 4;
}
.sp_glr5{
order: 5;
}
.sp_glr6{
order: 6;
}
.sp_glr7{
order: 7;
}
.sp_glr8{
order: 8;
}
.sp_glr9{
order: 9;
}
.sp_glr10{
order: 10;
}
.sp_glr11{
order: 11;
}
.sp_glr12{
order: 12;
}
.gallery-bg .flower_1{
top: 24%;
left: 2%;
}
.gallery-bg .flower_2{
top: 12%;
right: 5%;
}
.gallery-bg .flower_3{
top: 49%;
left: 40%;
}
.gallery-bg .flower_4{
top: 74%;
left: 10%;
}
.gallery-bg .flower_5{
top: 86%;
right: 10%;
}
}

.toTOP{
text-align: center;
width: 100px;
height: 50px;
border-radius: 9999px;
background: rgba(255, 255, 255, .8);
backdrop-filter: blur(5px);
position: absolute;
bottom: 150px;
right: 20px;
font-family: "bodega-sans", sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 50px;
color: var(--Ichi_coralpink) !important;
z-index: 1000;
text-decoration: none !important;
transition: all .5s ease;
}

.toTOP:hover{
background: var(--Ichi_coralpink);
color: white !important;
transition: all .5s ease;
}

.toHP{
background: white;
color: var(--black161616) !important;
text-align: center;
display: block;
font-weight: bold;
font-size: 20px;
padding: 1em;
text-decoration: none !important;
}

.toHP img{
width: 80%;
max-width: 300px;
height: auto;
transition: all .5s ease;
}

.toHP:hover img{
transform: scale(1.1);
transition: all .5s ease;
}

/* ===footer=== */
footer{
background: var(--Fuji_redpurple)
}

footer small{
font-family: momochidori, sans-serif;
font-weight: bold;
font-size: 12px;
color: white;
font-weight: 500;
padding: 0;
}