@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap");

:root {
  --primary-color: #191970;
  --secondary-color: #f1f0ec;
  --white-color: #fff;
  --orange-color: #BC9900;
  --black-color: #1E1E1E;

  --shippori: "Shippori Mincho", serif !important;
  --font-awesome: "Font Awesome 6 Free";

  --fnt150-80: clamp(5rem, 2.1955rem + 5.9829vw, 9.375rem);
  --fnt100-42: clamp(2.625rem, 1.9rem + 3.625vw, 6.25rem);
  --fnt16-12: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
  --fnt24-16: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --fnt42-24: clamp(1.5rem, 1.275rem + 1.125vw, 2.625rem);
  --fnt32-18: clamp(1.125rem, 0.95rem + 0.875vw, 2rem);
}

* {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-family: "Shippori Mincho", serif;
  scroll-behavior: smooth;
  word-break: break-all;
}

body {
  overflow-x: hidden;
  line-height: 1.5;
  height: 100vh;
}

img {
  width: 100%;
  vertical-align: bottom;
}

header {
  padding-top: 5.208vw;
  /* transition: 0.3s ease-out; */
}

.burger-wrap {
  display: none;
  position: relative;
  z-index: 10;
}

.burger {
  position: relative;
  z-index: 10;
}
.menu {
  display: none;
  transition: 0.8s ease-out;
  position: relative;
  z-index: 10;
}
.menu-bg {
  display: flex;

  justify-content: space-between;
  overflow-x: auto;
}
.menu-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.menu-logo {
  display: flex;
  align-items: last baseline;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 180px;
}

.float-button {
  position: fixed;
  left: 0;
  display: grid;
  gap: 30px;
  z-index: 3;
  /* top: 39%; */
  top: 26rem;
}

.float-button-r {
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 30px;
  z-index: 3;
  /* top: 39%; */
  top: 31px;
}

.menu .social__links i {
  font-size: 42px;
  color: var(--black-color);
}
.fl-button {
  max-width: 208px;
  display: grid;
  gap: 20px;
}

.button-float a {
  display: flex;
  gap: 10px;
  align-items: center;
  background-color: #F9DC5C;
  padding: 10px 20px;
  border-radius: 5px 5px 5px 5px;
  border: 1px solid var(--Base-Color, #465840);
  border-top: 1px solid var(--Base-Color, #465840);
  border-right: 1px solid var(--Base-Color, #465840);
  border-bottom: 1px solid var(--Base-Color, #465840);
  box-shadow: 3px 3px 2px 0px #1c2319;
  transition: 0.3s ease-out;
}
.button-float a:hover {
  transition: 0.3s ease-out;
  box-shadow: inset 3px 3px 2px 0px #1c2319;
}

.float-button-r .button-float a:hover {
  transition: 0.3s ease-out;
  box-shadow: inset 1px 2px 2px 0px #1c2319;
}

.float-button-r .button-float a {
  display: inline-flex;
  align-items: center;
  border-right: none;
  border-radius: 5px 0 0 5px;
  box-shadow:
    -3px 0 2px 0px #1c2319,  /* left shadow */
     0px 3px 2px 0px #1c2319; /* bottom shadow */
}

.float-button-r .button-float {
  max-width: unset;
  display: inline-block;
  width: auto;
  white-space: nowrap;
  
}
.btn-text h1 {
  font-family: var(--shippori);
  font-size: var(--fnt14-16);
  font-weight: 500;
}
.btn-text h2 {
  font-family: var(--shippori);
  font-size: 10px;
  color: var(--black-color);
  letter-spacing: 3px;
  font-weight: 400;
}

.btn-text h3 {
  font-family: var(--shippori);
  font-size: var(--fnt14-16);
  color: var(--black-color);
  letter-spacing: 3.2px;
  font-weight: 400;
}
.back-to-top {
  position: fixed;
  right: 5%;
  bottom: 10px;
  z-index: 4;
}

.back-to-top svg {
  width: 64px;
  height: 64px;
}

body {
  
  background: 
  linear-gradient(rgba(25, 25, 112, 0.1), rgba(25, 25, 112, 0.1)), 
  url("../img/common/bg.jpg");
  height: 100%;
  width: 100%;
  background-size: cover;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
  color: var(--black-color);
  /* letter-spacing: 1px !important; */
}

p {
  font-size: 1rem;
  font-weight: 400 !important;
}

/* ========================== LAYOUT =================================== */

section {
  margin-block: 150px;
  position: relative;
  z-index: 1;
}

.pd-inline200 {
  padding-inline: 10.417vw;
}

.pd-block200 {
  padding-block: 10.417vh;
}

.pd-left200 {
  padding-left: 10.417vw;
}

.pd-right200 {
  padding-right: 10.417vw;
}

.pd-top200 {
  padding-top: 10.417vh;
}

.pd-bottom200 {
  padding-bottom: 10.417vh;
}

.pd-block150 {
  padding-block: 7.813vh;
}

/* ============================================================= */

/* ========================== TEXT =================================== */

.span-text {
  font-size: 12px;
  color: var(--black-color);
  letter-spacing: 2px;
  font-weight: 400;
}

.vertical-text {
  writing-mode: vertical-lr;
  align-self: stretch;
  letter-spacing: 5px !important;
  font-size: 10px;
}

.jp {
  letter-spacing: 3px !important;
  font-weight: 400 !important;
  margin-top: 2px;
  font-size: 16px !important;
}

.p-24 {
  color: var(--orange-color);
  font-size: var(--fnt24-16);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 4.8px;
  text-transform: uppercase;
}

.p-16 {
  color: var(--black-color);
  font-size: var(--fnt16-12);
  font-style: normal;
  font-weight: 400;
  line-height: 2;
  /* 187.5% */
  letter-spacing: 3.2px;
  text-transform: uppercase;
}

/* headline */
.Headline--v1 {
  position: relative;
  color: var(--white-color) !important;
}

.Headline--v2 {
  position: relative;
  color: var(--white-color) !important;
  display: flex;
  align-items: center;
}

.title--v1 {
  font-size: var(--fnt100-42);
  white-space: nowrap;
  text-align: center;
  font-family: var(--shippori);
  letter-spacing: 20px;
  font-weight: 800;
  color: #191970;
  background-color: transparent;
  /*text-shadow: rgb(70, 88, 64) 4px 0px 0px,
    rgb(70, 88, 64) 3.87565px 0.989616px 0px,
    rgb(70, 88, 64) 3.51033px 1.9177px 0px,
    rgb(70, 88, 64) 2.92676px 2.72656px 0px,
    rgb(70, 88, 64) 2.16121px 3.36588px 0px,
    rgb(70, 88, 64) 1.26129px 3.79594px 0px,
    rgb(70, 88, 64) 0.282949px 3.98998px 0px,
    rgb(70, 88, 64) -0.712984px 3.93594px 0px,
    rgb(70, 88, 64) -1.66459px 3.63719px 0px,
    rgb(70, 88, 64) -2.51269px 3.11229px 0px,
    rgb(70, 88, 64) -3.20457px 2.39389px 0px,
    rgb(70, 88, 64) -3.69721px 1.52664px 0px,
    rgb(70, 88, 64) -3.95997px 0.56448px 0px,
    rgb(70, 88, 64) -3.97652px -0.432781px 0px,
    rgb(70, 88, 64) -3.74583px -1.40313px 0px,
    rgb(70, 88, 64) -3.28224px -2.28625px 0px,
    rgb(70, 88, 64) -2.61457px -3.02721px 0px,
    rgb(70, 88, 64) -1.78435px -3.57996px 0px,
    rgb(70, 88, 64) -0.843183px -3.91012px 0px,
    rgb(70, 88, 64) 0.150409px -3.99717px 0px,
    rgb(70, 88, 64) 1.13465px -3.8357px 0px,
    rgb(70, 88, 64) 2.04834px -3.43574px 0px,
    rgb(70, 88, 64) 2.83468px -2.82216px 0px,
    rgb(70, 88, 64) 3.44477px -2.03312px 0px,
    rgb(70, 88, 64) 3.84068px -1.11766px 0px,
    rgb(70, 88, 64) 3.9978px -0.132717px 0px;*/
    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: rgba(25, 25, 112, 0.10);
}

.span-title {
  font-size: var(--fnt24-16);
  font-weight: 500;
  letter-spacing: 4.8px;
  text-align: center;
  color: var(--black-color);
}

/* ============================================================= */

/* =================  Button  =========================== */

.main-btn {
  max-width: 170px;
  margin-left: auto;
  width: 100%;
}

.center-btn {
  margin: auto;
}

a.primary_button {
  display: flex;
  padding: 10px 15px;
  font-family: var(--shippori);
  color: #191970;
  border: 1px solid #191970;
  border-radius: 5px;
  justify-content: center;
  transition: all 0.3s ease-out;
}

a.primary_button:hover {
  background-color: #191970;
  transition: all 0.3s ease-out;
  
}

a.primary_button:hover p {
  color: #fff;
  
}

a.primary_button p {
  font-size: var(--fnt16-12);
  color: #191970;
  font-weight: 400;
  display: flex;
  gap: 5px;
}

a.primary_button p::after {
  content: url("../img/common/arrow.svg");
  font-family: var(--font-awesome);
  font-size: var(--fnt16-12);
  font-weight: 600;
}

a.primary_button:hover p::after {
  content: url("../img/common/arrow-hover.svg");
  font-family: var(--font-awesome);
  font-size: var(--fnt16-12);
  font-weight: 600;
}

.insta-icon svg {
  width: 28px;
}

/* ============================================================= */
.header-top-container {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.head-top-left-container {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  z-index: 5 !important;
  position: relative !important;
}
.head-top-left-container a {
  z-index: 5;
  position: relative;
}

.logo-top,
.head-top-right-container,
.nav-top {
  position: relative;
  z-index: 5;
}

.logo-top img {
  width: 254px;
  height: auto;
}

.logo-sp {
    display: none;
  }

.nav-top {
  display: flex;
}

.nav-top a {
  display: flex;
  margin-left: 2vw;
}

.nav-top a:hover p {
  font-weight: 700 !important;
}

.sp_desk {
  display: none;
  visibility: hidden;
}

.MV {
  padding: 30px;
  
}

.mv_view {
  position: relative;
}

.img-fix img {
  object-fit: cover;
  height: 600px;
  border-radius: 20px;
}

.swiper-slide.slide1 {
  border-radius: 20px;
}

.image-slider img {
  object-fit: cover;
  height: 1000px;
  border-radius: 20px;
}

/* marquee */
.marquee-container {
  width: 100%;
  overflow: hidden;
  z-index: 5;
  margin-top: -150px;
  color: white;
  /* padding: 3vh 0; */
  display: flex;
  align-items: center;
  white-space: nowrap;
  position: relative;
  border-top: 2px solid var(--black-primary);
  border-bottom: 2px solid var(--black-primary);
  /* max-width: 1920px; */
  /* margin: auto; */
}

/* Marquee Content (Duplicated for Seamless Loop) */
.marquee-content {
  display: flex;
  /* gap: 50px; */
  /* Space between items */
  min-width: 50%;
  animation: marquee 80000ms linear infinite;
}

/* Duplicated Content for a Continuous Effect */
.marquee-wrapper {
  display: flex;
  width: fit-content;
}

.marquee-content p {
  /* margin: 0 20px; */

  font-size: var(--fnt150-80);

  color: rgba(25, 25, 112, 0.2);
  text-align: center;
  font-style: normal;
  font-weight: 800 !important;
  line-height: normal;
  letter-spacing: 30px;
  text-transform: uppercase;
  /* flex: 1; */
  /* max-width: 800px; */
  width: 10%;
}

/* Infinite Scroll Animation */
@keyframes marquee {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-100%);
  }
}

/* ============= */

/* ===================== SECTION 01 ===================== */

.section01 {
  display: grid;
  gap: 100px;
}

.container01 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  align-items: center;
}

.content01 {
  display: grid;
  gap: 30px;
}

.image-container01 img {
  object-fit: cover;
  height: 600px;
  border-radius: 20px;
}

/* ============= */

/* ===================== SECTION 02 ===================== */
.section02 {
  background-color: #191970;
  display: grid;
  gap: 100px;
  padding-bottom: 400px !important;
}

.section02 .title--v1 {
  -webkit-text-stroke-color: #fff;
  -webkit-text-stroke-width: 9px;
  paint-order: stroke fill;
}

.section02 .span-title {
  color: var(--white-color);
}

.section02 .p-16 {
  color: var(--white-color);
}

.section02 .primary_button {
  border: 1px solid var(--white-color);
  
}

.section02 .primary_button p {
  color: var(--white-color);
}

.section02 .primary_button ::after {
  content: url("../img/common/arrow-w.svg");
}
.content02 {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
}

.service-container-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.service-blocks {
  transition: 0.3s ease-out;
}

.sv1 {
  background: url("../img/home/service01-img.jpg");
  border-top: 1px dashed ;
}

.sv2 {
  background: url("../img/home/service02-img.jpg");
}

.sv3 {
  background: url("../img/home/service03-img.jpg");
}

.sv1 img {
  object-fit: cover;
}

.block-container {
  position: relative;
  display: flex;
  opacity: 1 !important;
  transition: 0.3s ease-out;
  align-items: center;
  padding: 95px 60px;
  gap: 30px;
  border-right: 1px dashed rgba(30, 30, 30, 0.70);
  border-bottom: 1px dashed rgba(30, 30, 30, 0.70);
  border-left: 1px dashed rgba(30, 30, 30, 0.70);
}

.block-container:nth-child(1) {
  border-top: 1px dashed rgba(30, 30, 30, 0.70);
}

.service-blocks:hover a.block-container {
  background: #353d33e4;
}

.or-arrow  {
  position: absolute;
  right: 60px;
}
.service-p1 {
  line-height: 30px;
  font-size: var(--fnt24-16);
  font-family: var(--shippori);
  white-space: nowrap;
}

.service-p2 {
  font-size: var(--fnt16-12);
  font-weight: 400;
  max-width: 990px;
}

/* ============= */

/* ========= FLOW CONTAINER ============= */

.flow-flex {
  display: flex;
}

.flow-container {
  justify-content: center;
  max-width: 500px;
  margin: auto;
  padding-inline: 28vw;

  margin-top: -270px;
  width: -webkit-fill-available;
}

.flow-background {
  position: relative;
  background-image: url("../img/home/section03-img.png");
  background-position: center;
  background-size: cover;
  border-radius: 60%;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-background::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 60%;
  z-index: 1;
}

.circle-border {
  border-radius: 50%;
  padding: 10px;
  width: 500px;
  height: 500px;
}

.circle-border a {
  display: block;
  width: 100%;
  height: 100%;
}

.flow-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 60%;
  padding-block: 40px;
  transition: 0.3s ease-out;
  z-index: 2;
  gap: 60px;
}

.flow-wrapper .title--v1 {
  font-size: 64px;
  color: #191970;
  -webkit-text-stroke-width: 5px;
  -webkit-text-stroke-color: var(--white-color);
  paint-order: stroke fill;
  letter-spacing: 12.8px;
}

.flow-wrapper .span-title {
  color: var(--white-color);
} 

.arrow-center {
  max-width: 42px;
  height: 43px;
}

.flow-wrapper:hover {
  transition: 0.3s ease-out;
 
}

/* ===================== SECTION 03 ===================== */

.section03 {
  display: grid;
  gap: 100px;
  margin: auto;
  max-width: 1520px;
}

.container03 {
  display: grid;
  gap: 60px;
}

.qa {
  max-width: 1190px;
  margin: auto;
  display: flex;
  gap: 60px;
  padding-inline: 30px;
  padding-bottom: 60px;
  border-bottom: 1px dashed var(--primary-color);
}

.Q {
  font-family: var(--shippori);
  color: var(--orange-color);
  font-weight: 800;
  font-size: clamp(1.375rem, 1.2rem + 0.875vw, 2.25rem);
}

.key-answer {
  display: grid;
  gap: 30px;
}

.key-answer p {
  color: var(--white-color) !important;
}

.content03 {
  display: flex;
  flex-direction: column;
  gap: 30px;
}


/* ===================== SECTION 03-2 ===================== */


.access-detials {
  margin-top: 60px;
  display: flex;
  align-items: center;
  gap: 60px;
}

.table-row {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.table-row:nth-child(6) {
  margin-bottom: 60px;
}

.col01 {
  width: 150px;
  font-weight: 700 !important;
}

.access-map iframe {
  width: 730px;
  height: 700px;
}

.access-table .main-btn {
  margin-left: 0;
  margin-right: auto;
}
/* ===================== SECTION 04 ===================== */
.section04 {
  /* display: flex;
  flex-direction: column;
  gap: 100px; */
  padding-left: 4vw;
}

.cen02 {
  max-width: 1520px;
  margin: auto;
  margin-bottom: 60px;
  padding-right: 4vw;
}

.pad-wip {
  overflow-x: hidden;
  max-width: 1720px;
  margin-left: auto;
  /* display: none; */
}

.wip-slider {
  width: 100%;
  max-width: 800px;
}

.blog-container {
  display: block;
  overflow-x: hidden;
  position: relative;
  padding-bottom: 30px;
  /* margin-right: 60px; */
}

.company {
  position: absolute;
  bottom: 0;
  right: 0;
}

.blog-container img {
  object-fit: cover;
  height: 300px;
  border-radius: 20px;
}

.swiper-slide.sps {
  transform: scale(0.9) !important;
  transform-origin: top right;
  /* width: 50%; */
  /* flex: 0; */
  /* gap: 60px; */
  -webkit-transition: transform 0.8s cubic-bezier(0.43, 0.05, 0.17, 1),
    -webkit-transform 0.8s cubic-bezier(0.43, 0.05, 0.17, 1);
  transition: transform 0.8s cubic-bezier(0.43, 0.05, 0.17, 1),
    -webkit-transform 0.8s cubic-bezier(0.43, 0.05, 0.17, 1);
}

.swiper-wrapper.home_caption_slider__body {
  /* gap: 60px; */
}

/* .swiper-slide.sps.swiper-slide-active,
.swiper-slide.sps {
  transform: scale(1) !important;
  transition: transform 0.8s cubic-bezier(0.43, 0.05, 0.17, 1),
    -webkit-transform 0.8s cubic-bezier(0.43, 0.05, 0.17, 1);
} */

.swiper-slide.sps.swiper-slide-active {
  transform: scale(1) !important;
  transition: transform 0.8s cubic-bezier(0.43, 0.05, 0.17, 1),
    -webkit-transform 0.8s cubic-bezier(0.43, 0.05, 0.17, 1);
}

.swiper-slide.sps.swiper-slide-active > .blog-container img {
  height: 500px;
  width: 100%;
  margin-right: 20px;
  transition: -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
    -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.swiper-slide.sps.swiper-slide-next {
  max-width: 500px !important;
  width: 100%;
  margin-left: 30px;
}

.contact-vertical-text {
  color: #191970;
  font-size: 42px;
  font-family: var(--shippori);
  font-weight: 800;
  writing-mode: vertical-lr;
  -webkit-text-stroke-width: 5px;
  -webkit-text-stroke-color:#fff;
  paint-order: stroke fill;
}

@media screen and (max-width: 1520px) {
  .swiper-slide.sps.swiper-slide-active > .blog-container img {
    height: 380px;
    width: 100%;
    margin-right: 20px;
    transition: -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
      -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .swiper-slide.sps.swiper-slide-next {
    max-width: 400px !important;
    width: 100%;
    margin-left: 30px;
  }

  .wip-slider {
    width: 100%;
    max-width: 600px;
  }
}

@media screen and (max-width: 1120px) {
  .swiper-slide.sps.swiper-slide-active > .blog-container img {
    height: 310px;
    width: 100%;
    margin-right: 20px;
    transition: -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
      -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .swiper-slide.sps.swiper-slide-next {
    max-width: 320px !important;
    width: 100%;
    margin-left: 30px;
  }

  .wip-slider {
    width: 100%;
    max-width: 500px;
  }

  .blog-container img {
    object-fit: cover;
    height: 250px;
    border-radius: 20px;
  }
}

@media screen and (max-width: 920px) {
  .swiper-slide.sps.swiper-slide-active > .blog-container img {
    height: 280px;
    width: 100%;
    margin-right: 20px;
    transition: -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
      -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .swiper-slide.sps.swiper-slide-next {
    max-width: 255px !important;
    width: 100%;
    margin-left: 30px;
  }

  .wip-slider {
    width: 100%;
    max-width: 390px;
  }

  .blog-container img {
    object-fit: cover;
    height: 200px;
    border-radius: 20px;
  }
}

@media screen and (max-width: 750px) {
  .finish--wrappers {
    flex-direction: column;
    align-items: center;
    padding-inline: 4vw;
    gap: 15px;
  }
  .finish-contain {
    align-items: center;
    text-align: center;
  }
  .bk {
    margin: auto !important;
  }
  .bg-green {
    width: 100%;
  }
  .section04 {
    padding: 0;
    padding-left: 4vw;
  }
  /* .content02 {
    padding-right: 4vw;
  } */
  .swiper-slide.sps {
    transform: scale(0.9) !important;
    transform-origin: top 20%;
    /* width: 50%; */
    /* flex: 0; */
    /* gap: 60px; */
    -webkit-transition: transform 0.8s cubic-bezier(0.43, 0.05, 0.17, 1),
      -webkit-transform 0.8s cubic-bezier(0.43, 0.05, 0.17, 1);
    transition: transform 0.8s cubic-bezier(0.43, 0.05, 0.17, 1),
      -webkit-transform 0.8s cubic-bezier(0.43, 0.05, 0.17, 1);
  }
  .swiper-slide.sps.swiper-slide-active > .blog-container img {
    height: 250px;
    width: 100%;
    margin-right: 20px;
    transition: -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
      -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .swiper-slide.sps.swiper-slide-next {
    max-width: 250px !important;
    width: 100%;
  }

  .wip-slider {
    width: 100%;
    max-width: 400px;
  }

  .blog-container img {
    object-fit: cover;
    height: 150px;
    border-radius: 20px;
  }
}

@media screen and (max-width: 620px) {
  .swiper-slide.sps.swiper-slide-active > .blog-container img {
    height: 450px;
    width: 100%;
    margin-right: 0px;
    transition: -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
      -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .swiper-slide.sps {
    transform: scale(1) !important;
    transform-origin: inherit;
    /* width: 50%; */
    /* flex: 0; */
    /* gap: 60px; */
    -webkit-transition: transform 0.8s cubic-bezier(0.43, 0.05, 0.17, 1),
      -webkit-transform 0.8s cubic-bezier(0.43, 0.05, 0.17, 1);
    transition: transform 0.8s cubic-bezier(0.43, 0.05, 0.17, 1),
      -webkit-transform 0.8s cubic-bezier(0.43, 0.05, 0.17, 1);
  }

  .blog-container img {
    object-fit: cover;
    height: 450px;
    border-radius: 20px;
  }

  .wip-slider {
    width: 100%;
    max-width: inherit;
  }
  .section04 {
    padding-inline: 4vw;
  }
  .conten02 {
    padding: 0;
  }
}

@media screen and (max-width: 480px) {

  .back-to-top a svg {
    width: 50px;
    height: 50px;
  }
  
  .float-button-r .btn-text h1 {
    font-size: 12px;
  }
  .swiper-slide.sps.swiper-slide-active > .blog-container img {
    height: 300px;
    width: 100%;
    margin-right: 0px;
    transition: -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
      -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .swiper-slide.sps {
    transform: scale(1) !important;
    transform-origin: inherit;
    /* width: 50%; */
    /* flex: 0; */
    /* gap: 60px; */
    -webkit-transition: transform 0.8s cubic-bezier(0.43, 0.05, 0.17, 1),
      -webkit-transform 0.8s cubic-bezier(0.43, 0.05, 0.17, 1);
    transition: transform 0.8s cubic-bezier(0.43, 0.05, 0.17, 1),
      -webkit-transform 0.8s cubic-bezier(0.43, 0.05, 0.17, 1);
  }

  .blog-container img {
    object-fit: cover;
    height: 300px;
    border-radius: 20px;
  }

  .wip-slider {
    width: 100%;
    max-width: inherit;
  }
  .section04 {
    padding-inline: 4vw;
  }
  .conten02 {
    padding: 0;
  }
}

.fadeDown {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  padding-top: 30px;
  z-index: 2;
  transition: 0.3s ease-out;
  background: transparent;
}
.fadeDown > .head-top-left-container {
  position: relative;
  z-index: 8;
}

/* ======================== FOOTER SECTION ===================== */

.footer__contact-section {
  position: relative;
  padding-block: 100px;
}

.footer-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../img/common/section-contact.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  transition: 0.3s ease-out;
  align-items: center;
}

.contact-button-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--white-color);
  opacity: 1;
  position: relative;
  z-index: 2;
  gap: 30px;
}

.footer__contact-section:hover > .footer-bg {
  opacity: 1;
  background: #191970;
  transition: 0.3s ease-out;
}

.footer__bottom-container {
  display: grid;
  gap: 100px;
  padding-bottom: 30px;
}

.footer__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}

.footer__content01 {
  display: flex;
  gap: 30px;
}


.footer__contact-section .span-title {
  color: var(--white-color);
}
.footer-info {
  display: grid;
  gap: 30px;
}

.ft__info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ft__info p {
  display: flex;
  align-items: center;
  letter-spacing: 4.8px;
  font-size: var(--fnt16-12);
  line-height: 1.8;
}

.social__links a {
  display: inline-block;
  margin-right: 1vw;
}

.social__links a i {
  color: var(--black-color);
  font-size: 24px;
}

.social__links {
  display: block;
}

.footer__content02 {
  display: grid;
  gap: 60px;
}

.nav-bottom {
  position: relative;
}

.nav-bottom {
  display: flex;
  gap: 30px;
}

.nav-bottom a {
  display: flex;
}

.site__policy_links {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.site__policy_links a {
  display: block;
  color: var(--orange-color);
  font-family: var(--shippori);
  font-size: var(--fnt16-12);
  font-weight: 400;
}

.copyright {
  font-family: var(--shippori);
  font-size: 14px;
  font-weight: 400;
  color: var(--black-color);
  text-align: center;
  letter-spacing: 2.8px;
}

/* =========================== ABOUT SECTION  ============================ */

/* top-headline */
.top-headline {
  margin-top: -100px;
  margin-bottom: 30px;
}

/*======================= */
.about-container {
  display: grid;
  gap: 60px;
  text-align: center;
  max-width: 1520px;
  margin: auto;
  padding-inline: 4vw;
}

.about-image-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
}

.crabs-desc03 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
}

.crabs-desc03 ul li {
  text-align: left;
  line-height: 30px;
}

.crabs-desc03 h5 {
  writing-mode: vertical-lr;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  -webkit-text-stroke-width: 5px;
  -webkit-text-stroke-color: #191970;
  paint-order: stroke fill;
  letter-spacing: 4.8px;
}

.food-sec_title {
  font-size: 32px;
  letter-spacing: 6.4px;
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 1px solid #BC9900;
}

.food-menu_row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
}

.al-r .p-16 {
  text-align: right;
}

.al-r .food-sec_title{
  text-align: right;
  margin-bottom: 30px;
}

.al-l .p-16 {
  text-align: left;
}

.al-l .food-sec_title{
  text-align: left;
  margin-bottom: 30px;
}

.food-menu-img, .food-menu-desc {
  width: 50%;
}
/* =========================== SERVICES SECTION  ============================ */

.service-wrapper {
  max-width: 1520px;
  margin: auto;
  padding-inline: 4vw;
  display: grid;
}

.txt-center {
  text-align: center;
}

.service-title {
  color: var(--black-color);
  letter-spacing: 4.8px;
  font-size: 32px;
}

.service-container {
  display: grid;
  gap: 30px;
  padding: 60px;
  border-bottom: 1px dashed rgba(30, 30, 30, 0.30);
}

.service-img_container img {
  width: auto;
}

.service-image {
  display: flex;
  align-items: center;
  gap: 32px;
}

.s-table-row {
  display: flex;
  align-items: center;
  border-top: 1px solid #9D9D9D;
  border-left: 1px solid #9D9D9D;
  border-right: 1px solid #9D9D9D;
}

.s-table-row:nth-child(3) {
  border-bottom: 1px solid #9D9D9D;
}

.s-column01 {
  max-width: 320px;
  width: 100%;
  background-color: rgba(25, 25, 112, 0.15);
  padding: 10px 15px;
  border-right: 1px solid #9D9D9D;
}

.s-column02 {
  padding-left: 30px;
}

.red-txt {
  color: #C40303;
}

.service-title-sml {
  font-size: 16px;
}

/* =========================== SPECIAL SECTION SECTION  ============================ */

.special-offer-wrapper {
  max-width: 1520px;
  margin: 0 auto;
  padding-inline: 4vw;
  display: grid;
}

.special-offer_list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.special-offer_card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 52px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(30, 30, 30, 0.50);;
}

.special-offer_img img {
  width: 350px;
}

.special-offer_card::after {
  position: absolute;
  font-family: 'FontAwesome';
  right: 0;
  content: '\f105';
  color: var(--black-color);
}

.special-offer_title {
  font-size: 24px;
  font-weight: 500;
  color: var(--black-color);
}

.special-offer_desc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* =========================== ACCESS SECTION SECTION  ============================ */

.access-wrapper, .access-wrapper02 {
  max-width: 1520px;
  margin: 0 auto;
  padding-inline: 4vw;
  display: grid;
}

.direction-desc {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 30px;
  margin-top: 60px;
}

/* =========================== INSTAGRAM SECTION  ============================ */

.company_wrapper {
  display: grid;
  gap: 100px;
}

.company__name {
  font-size: var(--fnt42-24);
  letter-spacing: 8.4px;
  text-align: center;
  color: var(--white-color);
}

.blog__grid-align {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 1520px;
  padding-inline: 4vw;
  gap: 60px;
  margin: auto;
}

.main-img-blog img {
  object-fit: cover;
  height: auto;
  border-radius: 20px;
}

/* contact-form */
.contact--headline {
  font-size: var(--fnt32-18);

  font-weight: 400;
  font-family: var(--shippori);
  color: var(--white-color);
  text-align: center;

  padding-bottom: 60px;
  padding-inline: 100px;
  border-bottom: 1px dashed var(--white-color);
  max-width: 829px;
  margin: auto;
}

.contact-wrapper {
  display: grid;
  gap: 60px;
}

.contact-text-form {
  text-align: center;
  font-size: var(--fnt24-16);
  font-weight: 600;
  color: var(--white-color);
  padding: 100px 3vw;
  line-height: 50px;
}

.form-wrapper {
  max-width: 900px;
  margin: auto;
  padding: 0 3vw;
}

.contact-table {
  max-width: 800px;
  margin: auto;
  /* padding: 0 4.545vw; */
  display: flex;
  flex-direction: column;
  margin-top: 60px;
  gap: 30px;
}

.table-card {
  display: grid;
  grid-template-columns: 1fr;
  padding-inline: 4vw;
}

.text-input {
  display: grid;
  /* grid-template-oclumns: 250px 1fr; */
  gap: 30px;
  /* padding: 0 4vw; */
  padding-bottom: 30px;
  /* border-bottom: 1px solid #d9d9d9; */
  align-items: center;
}

.text-input p {
  text-align: left;
}

.labels {
  display: flex;
  align-items: center;

  font-family: var(--shippori);
  font-size: var(--fnt14-16);
  color: var(--secondary-color);
  font-weight: 400;
  letter-spacing: 4.8px;
}

.radio {
  display: flex;
  align-items: center;
  gap: 10px;
}

.radio label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.radio label span {
  white-space: nowrap;
  color: var(--white-color);
}

.input {
  width: 88%;
  /* border: 1px solid var(--primary-blue); */
  padding: 30px;
  color: #898989;
  font-size: var(--fnt14-16);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 1.6px;
  /* border: 1px solid var(--primary-blue); */
  border-radius: 10px;
}

textarea::placeholder {
  color: #898989;
}

.textarea {
  max-width: 800px;
  width: 88%;

  padding: 30px;
  font-weight: 400;
  font-size: var(--fnt14-16);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1.6px;
  border-radius: 10px;
}

.no-br {
  /* border-bottom: 1px solid #d9d9d9; */
  margin-bottom: 60px;
}

.text_p {
  font-size: var(--fnt14-16);
  color: var(--white-color);
}

.privacy {
  display: flex;
  gap: 6px;
  align-items: center;
}

.privacy p {
  font-size: var(---fnt16-12);
}

input::placeholder {
  font-size: var(---fnt16-12);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 4.8px;
  color: #afc4d1;
}

.privacy a {
  display: block;
  color: var(--orange-color) !important;
}

.privacy a p::after {
  content: "\f0c5";
  font-family: "Font Awesome 6 Free";
  font-size: var(---fnt16-12);
  font-weight: 900;
  color: var(--orange-color);
}

a.icons {
  display: block;
  color: var(--orange-color);
  letter-spacing: 1.6px;
  font-size: var(--fnt14-16);
  font-weight: 500;
}

a.icons::after {
  content: "\f0c5";
  font-family: "Font Awesome 6 Free";
  font-size: var(--fnt14-16);
  font-weight: 900;
  color: var(--orange-color);
}

.important::after {
  content: "※必須";
  color: var(--orange-color);
  padding: 3px 10px 3px 10px;
  font-weight: 500;
}

/* ====== */
button.primary {
  display: flex;
  border: 1px solid var(--white-color);
  color: var(--white-color);
  font-size: var(--fnt14-16);
  font-weight: 400;
  font-family: var(--shippori);
  background-color: var(--orange-color);
  padding-block: 13px;
  padding-inline: 10px;
  max-width: 300px;
  margin: auto;
  width: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: 0.3s ease-out;
}

button.primary::after {
  content: "\f061";
  font-family: var(--font-awesome);
  font-size: 14px;
  font-weight: 600;
  position: absolute;
  right: 25px;
}

button.primary:hover {
  background-color: #8a4318;
  transition: 0.3s ease-out;
}

button.b_submit {
  display: flex;
  border: 1px solid var(--white-color);
  color: var(--white-color);
  font-size: var(--fnt14-16);
  font-weight: 400;
  font-family: var(--shippori);
  background-color: var(--orange-color);
  padding-block: 13px;
  padding-inline: 10px;
  max-width: 300px;
  margin: auto;
  width: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: 0.3s ease-out;
}

button.b_submit::after {
  content: "\f061";
  font-family: var(--font-awesome);
  font-size: 14px;
  font-weight: 600;
  position: absolute;
  right: 25px;
}

button.b_submit:hover {
  background-color: #8a4318;
  transition: 0.3s ease-out;
}

/* single */

.single-blog {
  max-width: 1570px;
  padding: 0 7vw;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.single-content {
  display: flex;
  flex-direction: column;
  gap: 60px;
  text-align: center;
}

.single-content h1 {
  font-size: var(--fnt24-16);
  text-align: left;
  font-weight: 400;
  color: var(--black-color);
  letter-spacing: 4.2px;
}

.single-content p {
  font-size: var(--fnt14-16);
  color: var(--black-color);
  line-height: 1.8;
  font-weight: 300;
}

.date2 {
  font-size: var(--fnt14-16);
  font-weight: 300;
  color: var(--black-color);
  letter-spacing: 4.2px;
}

.single-img img {
  object-fit: cover;
  height: 800px;
  border-radius: 10px;
}

.single-pagination {
  display: flex;
  justify-content: space-between;
}

a.prev-blog,
a.next-blog {
  display: flex;
  color: #191970 !important;
  align-items: center;
}

a.next-blog {
  margin-left: auto;
}

a.prev-blog::before {
  content: "\f0d9";
  font-family: var(--font-awesome);
  font-weight: 900;
  margin-right: 10px;
  height: 29px;
}

a.next-blog::after {
  content: "\f0da";
  font-family: var(--font-awesome);
  font-weight: 900;
  margin-left: 10px;
  height: 22px;
}

.fa-solid {
  font-family: var(--font-awesome) !important;
}

.cv {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 60px;
}

/* a.back-btn {
  display: flex;
  padding: 10px 15px;
  font-family: var(--shippori);
  color: var(--white-color);
  border: 1px solid var(--white-color);
  border-radius: 5px;
  justify-content: center;
  transition: all 0.3s ease-out;
  max-width: 250px;
  margin: auto;
  position: relative;
}

a.back-btn:hover {
  background-color: #465840;
  transition: all 0.3s ease-out;
}

a.back-btn p {
  font-size: var(--fnt16-12);
  font-weight: 400;
  display: flex;
  gap: 5px;
}

a.back-btn p::before {
  position: absolute;
  content: "\f060";
  font-family: var(--font-awesome);
  font-size: var(--fnt16-12);
  font-weight: 600;
} */

a.back-btn {
  display: flex;
  padding: 10px 15px;
  font-family: var(--shippori);
  color: var(--black-color);
  border: 1px solid var(--black-color);
  border-radius: 5px;
  justify-content: center;
  transition: all 0.3s ease-out;
  max-width: 250px;
  margin: auto;
  position: relative;
  gap: 15px;
}

.back-arrow {
  width: 20px;
  height: auto;
}

a.back-btn:hover {
  background-color: #191970;
  transition: all 0.3s ease-out;
  color: #fff;
}

.back-arrow-hover {
  display: none;
}

a.back-btn:hover .back-arrow-hover {
  display: block;
  transform: rotate(180deg);
  width: 20px;
}

a.back-btn:hover .back-arrow {
  display: none;
}

a.back-btn p {
  font-size: var(--fnt16-12);
  font-weight: 400;
  display: flex;
  gap: 5px;
}

a.back-btn p::before {
  /* position: absolute; */
  content: "\f060";
  font-family: var(--font-awesome);
  font-size: var(--fnt16-12);
  font-weight: 600;
  left: 30px;
}
.bg-green {
  margin: 0 !important;
  transition: all 0.3s ease-out;
  background-color: #465840;
}
.bg-green:hover {
  transition: all 0.3s ease-out;
  background-color: transparent;
}

/* pagination */
.pagination {
  max-width: 300px;
  width: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  font-weight: 400;
}

a.page-numbers {
  padding: 5px 16px;
  margin: 0;
  color: var(--black-color);
  font-weight: 600;
}

.page-numbers {
  display: flex;
  gap: 20px;
}

a.next > .page-numbers,
a.prev > .page-numbers {
  padding: 7px 1px;
}

.page-numbers i {
  padding: 7px 1px;
  font-weight: 600;
}

.current {
  background-color: #F9DC5C;
  padding: 6px 12px;
  color: var(--black  -color);
  border-radius: 90px;
  line-height: 1.2;
}

.finish--wrappers {
  display: flex;
  justify-content: center;
}
.finish-container {
  display: grid;
  gap: 60px;
}
.finish-contain {
  display: grid;
  gap: 30px;
}
.finish-contain h1 {
  font-size: clamp(1.875rem, 1.45rem + 2.125vw, 4rem);
  letter-spacing: 12px;
}
.finish-contain p {
  font-size: var(--fnt14-16);
  letter-spacing: 4px;
}
.logo-finish {
  display: flex;
}

/* sitemap */

.sitemap-wrapper {
  max-width: 1520px;
  margin: auto;
  padding: 0 3vw;
}

.home-site {
  font-size: clamp(1.5rem, 0.5769rem + 4.6154vw, 2.25rem);
  font-family: var(--Montserrat);
  border-left: 3px solid var(--orange-color);
  padding-left: 30px;
  color: var(--white-color);
}

.site-navigation {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-top: 60px;
}

.site-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 515px;
  gap: 10px;
  width: 100%;
  margin: auto;
}

.com {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.com h1 {
  font-size: var(--fnt24-16);
  letter-spacing: 3.2px;
  color: var(--secondary-color);
}

.com p {
  font-size: var(--fnt14-16);
  color: var(--orange-color);
  letter-spacing: 4.2px;
}

.chev::after {
  font-family: "Font Awesome 6 Free";
  content: "\f054";
  font-size: var(--fnt16-24);
  font-weight: 900;
  color: var(--orange-color);
}

/* ======================= */

/* privacy policy */

.privacy_policy-wrapper {
  max-width: 1520px;
  margin: auto;
  padding: 0 3vw;
}

.privacy_policy {
  padding: 3.947vw;

  display: flex;
  flex-direction: column;
  gap: 30px;
}

.policy-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.policy-content h1 {
  font-size: clamp(0.875rem, 0.4135rem + 2.3077vw, 1.25rem);
  color: #191970;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: 4.8px;
}

.policy-content p {
  font-size: clamp(0.6875rem, 0.3029rem + 1.9231vw, 1rem);
  /* 16 > 11*/
  color: var(--black-color);
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 3.2px;
}

.error-mv {
  text-align: center;

}
.error-mv i {
  font-size: 100px;
  color: #191970;
}

.error-headline {
  font-size: 64px;
  -webkit-text-stroke-width: 5px;
  -webkit-text-stroke-color: rgba(25, 25, 112, 0.10);
  color: #191970;
}
.error-page_content {
  max-width: 1520px;
  margin: auto;
  padding: 0 3vw;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
}

.error-desc {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.error-page_content .main-btn {
  display: inline-block;
  max-width: 300px;
  width: 100%;
  margin: 0 auto;
}

.error-page_content a.primary_button {
  position: relative;
}

.error-page_content a.primary_button p::after {
  display: none;
}

.error-page_content a.primary_button p::before {
  position: absolute;
  left: 30px;
  content: url("../img/common/error-arrow.svg")
}

/* ======================= */

/* ===================== RESPONSIVE ===================== */

@media screen and (min-width: 1920px) {
  header {
    padding-top: 100px;
  }

  .slider-outer-wrapper {
    max-width: none;
  }

  .pad-wip {
    margin: auto;
  }

  /* ========================== LAYOUT =================================== */

  section {
    margin-block: 200px;
  }

  .pd-inline200 {
    padding-inline: 200px;
  }

  .pd-block200 {
    padding-block: 200px;
  }

  .pd-left200 {
    padding-left: 200px;
  }

  .pd-right200 {
    padding-right: 200px;
  }

  .pd-top200 {
    padding-top: 200px;
  }

  .pd-bottom200 {
    padding-bottom: 200px;
  }

  .pd-block150 {
    padding-block: 150px;
  }

  /* ============================================================= */

  .flow-container {
    padding-inline: 0;
  }
}


@media screen and (max-width: 1600px) {

  .service-img_container {
    width: 33%;
  }

  .service-img_container img {
    width: 100%;
  }

  .service-container {
    padding: 60px 0;
  }
}

@media screen and (max-width: 1520px) {
  .pd-inline200 {
    padding-inline: 6.417vw;
  }

  .access-map, .access-table {
    width: 50%;
  }

  .access-map iframe {
    width: 100%;
  }
}


@media screen and (max-width: 1200px) {
  .flow-container {
    padding-inline: 0;
  }
}

@media screen and (max-width: 1190px) {
  .contact--headline {
    padding-inline: 2vw;
  }
  .open {
    display: block;
    transition: 1s ease-out;
    animation: 0.5s identifier ease-out;
    opacity: 1;
  }
  @keyframes identifier {
    100% {
      opacity: 1;
    }
    0% {
      opacity: 0;
    }
  }

  .menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }
  .menu-bg {
    position: relative;
    background-color: var(--primary-color);
    background-image: url("../img/common/bg.jpg");
    padding: 60px 30px;
    height: 90%;
  }
  .menu-nav-top {
    display: grid;
    gap: 30px;
  }
  .menu-nav-top a {
    display: flex;
    align-items: center;
  }
  .vertical-texts {
    letter-spacing: 2px !important;
    font-size: 10px;
  }
  .vertical-texts.jp {
    font-size: var(--fnt24-16);
    letter-spacing: 4.8px !important;
  }

  .head-top-right-container {
    display: none;
  }

  .burger-wrap {
    display: none;
    position: relative;
    z-index: 10;
  }

  .burger {
  }

  /* burger section */

  .burger-wrap {
    display: block;
  }
  .open2 {
    position: fixed;
    right: 30px;
    z-index: 17;
  }

  .none {
    z-index: 1 !important;
  }
  .outer-layer-burger {
    padding: 5px;
    border-radius: 90%;
    background-color: transparent;
    border: 0.5px dashed var(--white-color);
  }
  .burger-bg {
    position: relative;
    background-color: var(--white-color);
    padding: 10px 15px;
    border-radius: 90%;
    border: 1px solid var(--orange-color);
  }

  .burger {
    width: 30px;
    position: relative;
    padding: 20px 0px;
    display: block;
    z-index: 10;
  }

  .burger span {
    height: 1px;
    width: 100%;
    background-color: var(--black-color);
    /* border-radius: 25px; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.2s ease;
    z-index: 5;
  }

  .burger.active span {
    background-color: var(--primary);
  }

  .burger span:nth-child(1) {
    top: 25%;
  }

  .burger span:nth-child(2) {
    width: 70%;
  }

  .burger span:nth-child(3) {
    top: 75%;
  }

  .burger.active span:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    color: var(--white);
    background-color: var(--black-color);
  }

  .burger.active span:nth-child(2) {
    opacity: 0;
  }

  .burger.active span:nth-child(3) {
    top: 42%;
    transform: translate(-50%, 50%) rotate(-45deg);
    color: var(--white);
    background-color: var(--black-color);
  }

  .burger.active,
  .burger.active::after {
    border: none;
  }

  .burger-wrap.active {
    /* position: fixed;
    top: 30px;
    z-index: 8;
    right: 5.208vw; */
  }

  @keyframes myAnim {
    0% {
      opacity: 0;
      transform: translateY(0px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes myAnims {
    0% {
      opacity: 0;
      transform: scaleY(0.4);
      transform-origin: 100% 0%;
    }

    100% {
      opacity: 1;
      transform: scaleY(1);
      transform-origin: 100% 0%;
    }
  }

  @keyframes scale-up-ver-top {
    0% {
      transform: scaleY(0);
      transition: 1s ease-out;
    }

    100% {
      transition: 1s ease-out;
      transform: scaleY(1);
    }
  }

  @keyframes scale-back {
    0% {
      transform: scaleY(1);
      transition: 1s ease-out;
    }

    100% {
      transition: 1s ease-out;
      transform: scaleY(0);
      display: none;
    }
  }

  .navigation-wrap {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-width: 755px;
  }

  .fixed-nav {
    display: none;
  }

  .nav-container {
    position: relative;
    overflow-y: auto;
    background-color: var(--base-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    align-items: center;
    gap: 40px;
    scrollbar-width: none;
    height: 100%;
  }

  .nav {
    position: relative;
    background-color: #a9a293;
    align-items: center;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex: 1;
  }

  /* 
  .menu {
    position: relative;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #A9A293;
  } */

  /* ================= */

  .span-text {
    display: none;
  }

  .pd-inline200 {
    padding-inline: 30px;
  }

  .container01 {
    display: flex;
    flex-direction: column-reverse;
  }

  .content02 {
  }

  .footer__wrapper {
    flex-direction: column;
    align-items: center;
  }

  .nav-bottom {
    justify-content: center;
    gap: 60px;
  }

  .site__policy_links {
    text-align: center;
  }

  .title--v1 {
    letter-spacing: 8.2px;
  }

  .flow-container {
    margin-top: -220px;
  }

  .flow-wrapper {
    padding-block: 25px;
  }

  .about-image-grid {
    gap: 30px;
    flex-wrap: wrap;
  }

  .main-img-blog img {
    height: 350px;
  }

  .access-detials {
    flex-direction: column;
  }

  .access-map, .access-table {
    width: 100%;
  }

  .access-table .main-btn {
    margin: 0 auto;
  }
}

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

  .logo-pcv {
    display: none;
  }

  .logo-sp {
    display: block;
  }

  .title--v1 {
    font-size: 42px;
  }

  .span-title {
    font-size: 16px;
  }
  .adj {
    font-size: 7vw;
  }
  .logo-top img {
    height: auto;
  }
  .sideway {
    writing-mode: sideways-rl;
  }

  .float-button-r {
    top: unset;
    bottom: 20px;
  }

  .float-button-r .sideway {
    writing-mode: unset;
  }
  .sideway a {
    padding: 10px;
  }
  .float-button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  header {
    padding: 0;
  }

  .blog__grid-align {
    gap: 30px;
  }

  .special-offer_card {
    flex-direction: column;
  }

  .special-offer_img {
    width: 100%;
  }

  .special-offer_img img {
    width: 100%;
    height: auto;
  }

  .special-offer_desc {
    padding-right: 30px;
  }

  .special-offer_card::after {
    bottom: 5%;
  }
  .main-img-blog img {
    height: 300px;
  }

  .single-img img {
    height: 400px;
  }

  .input,
  .textarea {
    padding: 15px 4vw;
  }

  .about-container {
    gap: 30px;
  }

  .header-top-container {
    position: fixed;
    top: 0;
    z-index: 6;
    padding-top: 15px;
    left: 0;
    right: 0;
  }

  .marquee-wrapper {
    display: none;
  }

  .marquee-container {
    margin: 0;
  }

  a.block-container {
    flex-direction: column;
    align-items: normal;
    padding-block: 30px;
  }

  .or-arrow {
    max-width: 50px;
    margin-left: auto;
  }

  .qa {
    gap: 30px;
  }

  .image-slider {
    height: 870px;
  }

  .image-slider img {
    height: 100%;
    border-radius: 0;
    opacity: 0.8;
  }

  .MV {
    padding: 0;
    display: flex;
    flex-direction: column-reverse;
  }

  .top-headline {
    margin-top: 30px;
  }

  .section02 {
    padding-bottom: 300px !important;
  }


  .footer__contact-section {
    padding-block: 30px;
  }

  .flow__wrap-grid {
    grid-template-columns: 1fr;
  }

  .flow-reverse {
    direction: ltr;
  }

  .flow-normal {
    text-align: left;
  }

  .flow--flex-right {
    justify-content: flex-start;
  }

  .flow__image img {
    object-fit: cover;
    height: 350px;
    border-radius: 20px;
  }

  .img-fix img {
    border-radius: 0;
  }

  .service-container {
    padding: 30px 0;
  }

  .service-image img {
    object-fit: cover;
    border-radius: 20px;
  }

  .service-title {
    font-size: 24px;
  }
  .single-blog,
  .single-content {
    gap: 30px;
  }
  .company_wrapper {
    gap: 60px;
  }

  .circle-border {
    width: 350px;
    height: 350px;
    margin: 0 auto;
  }

  .flow-wrapper .title--v1 {
    font-size: 32px;
  }

  .flow-container {
    max-width: unset;
  }

  .crabs-desc03 {
    flex-direction: column;
    align-items: flex-start;
  }

  .crabs-desc03 h5 {
    writing-mode: unset;
    text-align: center;
    margin: 0 auto;
  }

  .crabs-desc03 ul {
    padding-left: 30px;
  }

  .al-r {
    flex-direction: column;

  }

  .al-l {
    flex-direction: column-reverse;
  }

  .food-menu-desc, .food-menu-img {
    width: 100%;
  }

  .al-r .food-sec_title {
    text-align: left;
    margin-bottom: 30px;
  }

  .al-r .p-16 {
    text-align: left;
  }

  .s-column01 {
    width: 30%;
  }

  .s-column02 {
    width: 70%;
  }

  .access-detials {
    margin-top: 30px;
  }

  .access-detials {
    gap: 30px;
  }

  .access-map iframe {
    height: revert-layer;
  }
}

@media screen and (max-width: 690px) {
  .nav-bottom {
    display: none;
  }

  .content02 {
    flex-direction: column;
    align-items: normal;
  }

  .blog__grid-align {
    gap: 30px;
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 480px) {

  section {
    margin-top: 60px;
    margin-bottom: 30px;
  }

  .pc-view {
    display: none;
  }

  .sp-view {
    display: block;
  }

  .section03-2 {
    padding-bottom: 0;
  }

  .section01,
  .section02,
  .section03 {
    gap: 30px;
  }

  .cen02 {
    margin-bottom: 30px;
    padding-right: 0;
  }

  .title--v1 {
    font-size: 7vw;
  }
  .contact-table {
    gap: 15px;
  }
  .burger-bg {
    padding: 5px 10px;
  }
  .fadeDown {
    padding-inline: 15px;
  }
  .image-slider {
    height: 700px;
  }
  .back-to-top {
    position: fixed;
    right: 30px;
    bottom: 10px;
    z-index: 4;
  }
  .qa {
    gap: 15px;
    padding-inline: 15px;
  }

  .image-container01 img {
    height: auto;
  }

  .section02 .title--v1 {
    -webkit-text-stroke-width: 5px;
  }

  .main-btn {
    margin: auto;
  }
  .section02 {
    padding-bottom: 150px;
  }

  .flow-container {

    margin-top: -150px;
  }

  .circle-border {
    width: 300px;
    height: 300px;
  }

  .flow-wrapper {
    gap: 15px;
  }

  .Headline--v2 {
    flex-wrap: wrap;
    justify-content: center;
  }

  .block-container {
    padding: 30px;
  }

  .access-map iframe {
    height: revert-layer;
  }

  .table-row {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 15px;
  }

  a.contact-button-footer {
    gap: 15px;
  }

  .footer-logo-container01 {
    display: flex;
    justify-content: center;
  }

  .footer-logo-container01 img {
    width: 150px;
  }

  .footer__bottom-container {
    gap: 30px;
  }

  .footer__content01 {
    flex-direction: column;
  }

  .footer-info .social__links {
    display: flex;
    justify-content: center;
  }
  .flow__image img {
    height: 250px;
    border-radius: 20px;
  }

  .service-container {
    padding: 30px 15px;
  }

  .service-image {
    flex-direction: column;
  }

  .service-img_container {
    width: auto;
  }

  .service-title {
    font-size: 18px;
  }


  .section02 {
    padding-bottom: 250px !important;
  }
  .logo-top img {
    width: 150px;
  }

  .text-input {
  display: grid;
  /* grid-template-oclumns: 250px 1fr; */
  gap: 10px;
  /* padding: 0 4vw; */
  padding-bottom: 30px;
  /* border-bottom: 1px solid #d9d9d9; */
  align-items: center;
}

.al-r .food-sec_title {
    text-align: center;
    
   
  }

  .al-l .food-sec_title {
    text-align: center;
  }

  .food-sec_title {
    font-size: 24px;
  }

  .food-menu_row {
    gap: 30px;
  }

  .menu-bg {
    flex-direction: column;
  }

  .menu-logo {
    padding-bottom: 0;
    justify-content: center;
    align-items: center;
  }

  .menu-list {
    gap: 30px;
  }

  .s-table-row {
    flex-direction: column;
  }

  .s-column01, .s-column02 {
    width: -webkit-fill-available;
    max-width: unset;
    font-size: 12px;
  }

  .s-column02 {
    padding: 15px;
  }

  .table-row:nth-child(6) {
    margin-bottom: 30px;
  }

  .direction-desc {
    margin-top: 30px;
    gap: 15px;
  }

  .special-offer_title {
    font-size: 18px;
  }

  .special-offer_card {
    gap: 30px;
  }
}

@media screen and (max-height: 700px) {
  .float-button {
    position: fixed;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    z-index: 3;
    /* top: 39%; */
    top: unset;
    bottom: 5%;
  }
}