/* Style for PCs */
@media screen and (min-width: 1025px) {

/* TopSection
---------------------------*/
.topsection {
  width:100%;
  height: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-top:135px;
  position: relative;
}
#slidemm div {
  width:100%;
  height: 100%;
  min-height: 100%;
  display: block;
  aspect-ratio: 16 / 9;
}
#slidemm_m {display:none;}

.tscc {
  width:100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding:0 5%;
  position: absolute;
  top:0;
  left:0;
  z-index:1000;
}
.tscc h2 {
  font-size: clamp(1rem, 1rem + 1.5vw, 5em);
font-weight: 400;
line-height: 1.4em;
color: var(--color-white);
font-family: var(--font-min);
text-shadow: 0px 1px 5px rgba(0,0,0,1);
margin-bottom: 0.1em;
}
.tscc p {
font-size: clamp(1rem, 0rem + 1vw, 2rem);
line-height: 2em;
color: var(--color-white);
font-family: var(--font-min);
text-shadow: 0px 1px 5px rgba(0,0,0,1);
margin-bottom: 0;
}


/* Intro
---------------------------*/
.intromm {
width:100%;
height: auto;
display: block;
}
.introtitle {
width:100%;
height: auto;
display: block;
padding:10% 8% 25%;
background-image: url(../img/index/bg-intro.webp);
background-repeat: no-repeat;
background-position: center 100.1%;
background-size: 100% auto;
}
.introtitle h2 {
font-size: clamp(1rem, 0.8em + 1vw, 3em);
font-weight: 400;
line-height: 1.4em;
color: var(--color-black);
font-family: var(--font-min);
text-align: center;
text-shadow: 0px 1px 5px rgba(255,255,255,1);
margin-bottom: 0.4em;
}
.introtitle h3 {
font-size: clamp(1rem, 1rem + 1.5vw, 5em);
font-weight: 400;
line-height: 1.4em;
color: var(--color-black);
font-family: var(--font-min);
text-align: center;
text-shadow: 0px 1px 5px rgba(255,255,255,1);
margin-bottom: 0.5em;
}
.introtitle p {
font-size: clamp(0.8rem, 0rem + 1vw, 2rem);
line-height: 2em;
text-align: center;
margin-bottom: 0;
}

.introbox {
width:100%;
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding:100px 8%;
background: #f2ede4;
background: linear-gradient(180deg, rgba(242, 237, 228, 1) 1%, rgba(255, 255, 255, 1) 51%);
}
.introcc {
  width:45%;
}
.introcc h2 {
font-size: clamp(1rem, 1rem + 1vw, 3em);
font-weight: 400;
line-height: 1.4em;
color: var(--color-black);
margin-bottom: 0.4em;
}
.introcc p {
font-size: clamp(0.8rem, 0rem + 0vw, 1.5rem);
line-height: 2em;
margin-bottom: 0;
}
.introimg {
  width:45%;
  box-shadow:0px 5px 15px rgba(0,0,0,0.1);
}
.introimg img {
  border-radius: 10px;
}


/* Models and Price
---------------------------*/
.pricemodelmm {
width:100%;
height: auto;
display: block;
padding:100px 8% 100px;
}
.pmmtitle {
width:100%;
height: auto;
display: block;
margin-bottom: 30px;
}
.pmmtitle h2 {
font-size: clamp(1rem, 1rem + 1.2vw, 5em);
font-weight: 400;
line-height: 1.4em;
color: var(--color-black);
text-align: center;
margin-bottom: 0.3em;
}
.pmmtitle p {
font-size: clamp(0.8rem, 0rem + 0vw, 1.5rem);
line-height: 2em;
font-family: var(--font-min);
color: var(--color-1st);
text-align: center;
margin-bottom: 0;
}

/* Models and Price
---------------------------*/
.carlist {
  width:100%;
  height: auto;
  display: block;
  padding:0px 0%;
}


/* Access
---------------------------*/
.accessmm {
width:100%;
height: auto;
display: block;
padding:0;
}
.mapmm, .mapmm iframe {
  width:100%;
  height: 500px;
  display: block;
}
.mapcc {
width:100%;
height: auto;
display: block;
padding:40px 0 40px 0;
}
.mapcc h2 {
font-size: clamp(1rem, 1rem + 1vw, 5em);
font-weight: 400;
line-height: 1.4em;
color: var(--color-black);
text-align: center;
margin-bottom: 0.3em;
}
.mapcc p.acctxt_add {
font-size: clamp(0.8rem, 0rem + 0vw, 1.5rem);
line-height: 2em;
text-align: center;
margin-bottom: 0;
}
.mapcc p.acctxt_tel {
  width:fit-content;
  height: 60px;
  display: block;
  margin:0 auto 0.3em;
}
.mapcc p.acctxt_tel a {
  width:100%;
  height: 60px;
  display: block;
  text-decoration: none;
  font-size: 32px;
  font-family: var(--font-min);
  line-height: 60px;
  padding:0 0 0 55px;
  background-image: url(../img/header/ic-tel_c.webp);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 50px 50px;
}
.mapcc p.acctxt_op {
font-size: clamp(1rem, 0.6rem + 0.2vw, 1.5rem);
line-height: 2em;
text-align: center;
margin-bottom: 0;
}


/* Reservation
---------------------------*/
.reservemm {
width:100%;
height: auto;
display: block;
padding:100px 8% 100px;
background-image: url(../img/index/bg-reserve_sec.webp);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.reservecc {
width:100%;
height: auto;
display: block;
margin-bottom: 30px;
}
.reservecc h2 {
font-size: clamp(1rem, 1rem + 1.2vw, 5em);
font-weight: 400;
line-height: 1.4em;
color: var(--color-white);
text-align: center;
margin-bottom: 0.3em;
}
.reservecc p {
font-size: clamp(0.8rem, 0rem + 0vw, 1.5rem);
line-height: 2em;
text-align: center;
color: var(--color-white);
margin-bottom: 0.5;
}
ul.reservebnlist {
  width:80%;
  height: auto;
  display: flex;
  justify-content: center;
  margin:0 auto;
}
ul.reservebnlist li {
flex:1;
margin:0 1%;
}
ul.reservebnlist li a {
  width:100%;
  height: auto;
  display: block;
  text-decoration: none;
  padding:0.7em 0.9em 0.7em 3em;
  font-size: clamp(1rem, 0.9rem + 0.7vw, 5em);
  font-family: var(--font-min);
font-weight: 500;
  text-align: right;
  color:var(--color-white);
  border: 1px solid var(--color-1st);
  background-color: var(--color-black);
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: auto 90%;
  border-radius: 5px;
    transition: .4s all;
}
ul.reservebnlist li a:hover {
  background-color: var(--color-3rd);
}

}


/* Style for iPad Pro */
@media screen and (min-width: 769px) and (max-width: 1024px) {


/* TopSection
---------------------------*/
.topsection {
  width:100%;
  height: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-top:135px;
  position: relative;
}
#slidemm div {
  width:100%;
  height: 100%;
  min-height: 100%;
  display: block;
  aspect-ratio: 16 / 9;
}
#slidemm_m {display:none;}

.tscc {
  width:100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding:0 5%;
  position: absolute;
  top:0;
  left:0;
  z-index:1000;
}
.tscc h2 {
  font-size: clamp(1rem, 1rem + 1.5vw, 5em);
font-weight: 400;
line-height: 1.4em;
color: var(--color-white);
font-family: var(--font-min);
text-shadow: 0px 1px 5px rgba(0,0,0,1);
margin-bottom: 0.1em;
}
.tscc p {
font-size: clamp(1rem, 0rem + 1vw, 2rem);
line-height: 2em;
color: var(--color-white);
font-family: var(--font-min);
text-shadow: 0px 1px 5px rgba(0,0,0,1);
margin-bottom: 0;
}

/* Intro
---------------------------*/
.intromm {
width:100%;
height: auto;
display: block;
}
.introtitle {
width:100%;
height: auto;
display: block;
padding:10% 8% 25%;
background-image: url(../img/index/bg-intro.webp);
background-repeat: no-repeat;
background-position: center 100.1%;
background-size: 100% auto;
}
.introtitle h2 {
font-size: clamp(1rem, 0.8em + 1vw, 3em);
font-weight: 400;
line-height: 1.4em;
color: var(--color-black);
font-family: var(--font-min);
text-align: center;
text-shadow: 0px 1px 5px rgba(255,255,255,1);
margin-bottom: 0.4em;
}
.introtitle h3 {
font-size: clamp(1rem, 1rem + 1.5vw, 5em);
font-weight: 400;
line-height: 1.4em;
color: var(--color-black);
font-family: var(--font-min);
text-align: center;
text-shadow: 0px 1px 5px rgba(255,255,255,1);
margin-bottom: 0.5em;
}
.introtitle p {
font-size: clamp(0.8rem, 0rem + 1vw, 2rem);
line-height: 2em;
text-align: center;
margin-bottom: 0;
}

.introbox {
width:100%;
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding:100px 8%;
background: #f2ede4;
background: linear-gradient(180deg, rgba(242, 237, 228, 1) 1%, rgba(255, 255, 255, 1) 51%);
}
.introcc {
  width:45%;
}
.introcc h2 {
font-size: clamp(1rem, 1rem + 1vw, 3em);
font-weight: 400;
line-height: 1.4em;
color: var(--color-black);
font-family: var(--font-min);
margin-bottom: 0.4em;
}
.introcc p {
font-size: clamp(0.8rem, 0rem + 0vw, 1.5rem);
line-height: 2em;
margin-bottom: 0;
}
.introimg {
  width:45%;
  box-shadow:0px 5px 15px rgba(0,0,0,0.1);
}
.introimg img {
  border-radius: 10px;
}


/* Models and Price
---------------------------*/
.pricemodelmm {
width:100%;
height: auto;
display: block;
padding:100px 8% 100px;
}
.pmmtitle {
width:100%;
height: auto;
display: block;
margin-bottom: 0px!important;
}
.pmmtitle h2 {
font-size: clamp(1rem, 1rem + 1.2vw, 5em);
font-weight: 400;
line-height: 1.4em;
color: var(--color-black);
text-align: center;
margin-bottom: 0.3em;
}
.pmmtitle p {
font-size: clamp(0.8rem, 0rem + 0vw, 1.5rem);
line-height: 2em;
font-family: var(--font-min);
color: var(--color-1st);
text-align: center;
margin-bottom: 0!important;
}


/* Models and Price
---------------------------*/
.carlist {
  width:100%;
  height: auto;
  display: block;
  padding:0px 0%;
}



/* Access
---------------------------*/
.accessmm {
width:100%;
height: auto;
display: block;
padding:0;
}
.mapmm, .mapmm iframe {
  width:100%;
  height: 500px;
  display: block;
}
.mapcc {
width:100%;
height: auto;
display: block;
padding:40px 0 40px 0;
}
.mapcc h2 {
font-size: clamp(1rem, 1rem + 1vw, 5em);
font-weight: 400;
line-height: 1.4em;
font-family: var(--font-min);
color: var(--color-black);
text-align: center;
margin-bottom: 0.3em;
}
.mapcc p.acctxt_add {
font-size: clamp(0.8rem, 0rem + 0vw, 1.5rem);
line-height: 2em;
text-align: center;
margin-bottom: 0;
}
.mapcc p.acctxt_tel {
  width:fit-content;
  height: 60px;
  display: block;
  margin:0 auto 0.3em;
}
.mapcc p.acctxt_tel a {
  width:100%;
  height: 60px;
  display: block;
  text-decoration: none;
  font-size: 32px;
  font-family: var(--font-min);
  line-height: 60px;
  padding:0 0 0 55px;
  background-image: url(../img/header/ic-tel_c.webp);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 50px 50px;
}
.mapcc p.acctxt_op {
font-size: clamp(1rem, 0.6rem + 0.2vw, 1.5rem);
line-height: 2em;
text-align: center;
margin-bottom: 0;
}


/* Reservation
---------------------------*/
.reservemm {
width:100%;
height: auto;
display: block;
padding:100px 8% 100px;
background-image: url(../img/index/bg-reserve_sec.webp);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.reservecc {
width:100%;
height: auto;
display: block;
margin-bottom: 30px;
}
.reservecc h2 {
font-size: clamp(1rem, 1rem + 1.2vw, 5em);
font-weight: 400;
line-height: 1.4em;
color: var(--color-white);
font-family: var(--font-min);
text-align: center;
margin-bottom: 0.3em;
}
.reservecc p {
font-size: clamp(0.8rem, 0rem + 0vw, 1.5rem);
line-height: 2em;
text-align: center;
color: var(--color-white);
margin-bottom: 0.5;
}
ul.reservebnlist {
  width:90%;
  height: auto;
  display: flex;
  justify-content: center;
  margin:0 auto;
}
ul.reservebnlist li {
flex:1;
margin:0 1%;
}
ul.reservebnlist li a {
  width:100%;
  height: auto;
  display: block;
  text-decoration: none;
  padding:0.7em 0.9em 0.7em 3em;
  font-size: clamp(1rem, 0.9rem + 0.7vw, 5em);
  font-family: var(--font-min);
font-weight: 500;
  text-align: right;
  color:var(--color-white);
  border: 1px solid var(--color-1st);
  background-color: var(--color-black);
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: auto 90%;
  border-radius: 5px;
    transition: .4s all;
}
ul.reservebnlist li a:hover {
  background-color: var(--color-3rd);
}

}

/* Style for Smartphone */
@media screen and (max-width: 768px) {


/* TopSection
---------------------------*/
.topsection {
  width:100%;
  height: 100%;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin-top:60px;
  position: relative;
}
#slidemm_m div {
  width:100%;
  height: 100%;
  min-height: 100%;
  display: block;
  aspect-ratio: 16 / 9;
}
#slidemm {display:none;}

.tscc {
  width:100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding:0 5%;
  position: absolute;
  top:0;
  left:0;
  z-index:1000;
}
.tscc h2 {
  font-size: clamp(1rem, 1rem + 1.5vw, 5em);
font-weight: 400;
line-height: 1.4em;
color: var(--color-white);
font-family: var(--font-min);
text-shadow: 0px 1px 5px rgba(0,0,0,1);
margin-bottom: 0.1em;
}
.tscc p {
font-size: clamp(1rem, 0rem + 1vw, 2rem);
line-height: 2em;
color: var(--color-white);
font-family: var(--font-min);
text-shadow: 0px 1px 5px rgba(0,0,0,1);
margin-bottom: 0;
}

/* Intro
---------------------------*/
.intromm {
width:100%;
height: auto;
display: block;
}
.introtitle {
width:100%;
height: auto;
display: block;
padding:15% 8% 30%;
background-image: url(../img/index/bg-intro.webp);
background-repeat: no-repeat;
background-position: center 100.1%;
background-size: 100% auto;
}
.introtitle h2 {
font-size: 16px;
font-weight: 400;
line-height: 1.4em;
color: var(--color-black);
font-family: var(--font-min);
text-shadow: 0px 1px 5px rgba(255,255,255,1);
margin-bottom: 0.4em;
}
.introtitle h3 {
font-size: 24px;
font-weight: 400;
line-height: 1.6em;
color: var(--color-black);
font-family: var(--font-min);
text-shadow: 0px 1px 5px rgba(255,255,255,1);
margin-bottom: 0.5em;
}
.introtitle p {
font-size: 14px;
line-height: 2em;
margin-bottom: 0;
}

.introbox {
width:100%;
height: auto;
display: flex;
flex-direction: column;
padding:100px 8%;
background: #f2ede4;
background: linear-gradient(180deg, rgba(242, 237, 228, 1) 1%, rgba(255, 255, 255, 1) 51%);
}
.introcc {
  width:100%;
  height: auto;
  display: block;
  margin-bottom: 40px;
}
.introcc h2 {
font-size: 24px;
font-weight: 400;
line-height: 1.4em;
color: var(--color-black);
font-family: var(--font-min);
margin-bottom: 0.4em;
}
.introcc p {
font-size: 14px;
line-height: 2em;
margin-bottom: 0;
}
.introimg {
  width:100%;
  box-shadow:0px 5px 15px rgba(0,0,0,0.1);
}
.introimg img {
  border-radius: 10px;
}

/* Models and Price
---------------------------*/
.pricemodelmm {
width:100%;
height: auto;
display: block;
padding:100px 8% 100px;
}
.pmmtitle {
width:100%;
height: auto;
display: block;
margin-bottom: 0px!important;
}
.pmmtitle h2 {
font-size: clamp(1rem, 1rem + 1.2vw, 5em);
font-weight: 400;
line-height: 1.4em;
color: var(--color-black);
text-align: center;
margin-bottom: 0.3em;
}
.pmmtitle p {
font-size: clamp(0.8rem, 0rem + 0vw, 1.5rem);
line-height: 2em;
font-family: var(--font-min);
color: var(--color-1st);
text-align: center;
margin-bottom: 0!important;
}


/* Models and Price
---------------------------*/
.carlist {
  width:100%;
  height: auto;
  display: block;
  padding:0px 0%;
}


/* Access
---------------------------*/
.accessmm {
width:100%;
height: auto;
display: block;
padding:0;
}
.mapmm, .mapmm iframe {
  width:100%;
  height: 500px;
  display: block;
}
.mapcc {
width:100%;
height: auto;
display: block;
padding:40px 0 40px 0;
}
.mapcc h2 {
font-size: 24px;
font-weight: 400;
line-height: 1.4em;
font-family: var(--font-min);
color: var(--color-black);
text-align: center;
margin-bottom: 0.3em;
}
.mapcc p.acctxt_add {
font-size: 14px;
line-height: 2em;
text-align: center;
margin-bottom: 0;
}
.mapcc p.acctxt_tel {
  width:fit-content;
  height: 60px;
  display: block;
  margin:0 auto 0.3em;
}
.mapcc p.acctxt_tel a {
  width:100%;
  height: 60px;
  display: block;
  text-decoration: none;
  font-size: 32px;
  font-family: var(--font-min);
  line-height: 60px;
  padding:0 0 0 55px;
  background-image: url(../img/header/ic-tel_c.webp);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 50px 50px;
}
.mapcc p.acctxt_op {
font-size: 14px;
line-height: 2em;
text-align: center;
margin-bottom: 0;
}


/* Reservation
---------------------------*/
.reservemm {
width:100%;
height: auto;
display: block;
padding:100px 8% 100px;
background-image: url(../img/index/bg-reserve_sec.webp);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.reservecc {
width:100%;
height: auto;
display: block;
margin-bottom: 30px;
}
.reservecc h2 {
font-size: 24px;
font-weight: 400;
line-height: 1.4em;
color: var(--color-white);
font-family: var(--font-min);
text-align: center;
margin-bottom: 0.3em;
}
.reservecc p {
font-size: 14px;
line-height: 2em;
text-align: center;
color: var(--color-white);
margin-bottom: 1em;
}
ul.reservebnlist {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin:0 auto;
}
ul.reservebnlist li {
width:100%;
height: auto;
display: block;
margin:0 0 10px 0;
}
ul.reservebnlist li a {
  width:100%;
  height: auto;
  display: block;
  text-decoration: none;
  padding:0.7em 0.9em 0.7em 3em;
  font-size: clamp(1rem, 0.9rem + 0.7vw, 5em);
  font-family: var(--font-min);
font-weight: 500;
  text-align: right;
  color:var(--color-white);
  border: 1px solid var(--color-1st);
  background-color: var(--color-black);
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: auto 90%;
  border-radius: 5px;
    transition: .4s all;
}
ul.reservebnlist li a:hover {
  background-color: var(--color-3rd);
}

}