/* RESET léger */

*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html,

body {

  margin: 0;

  padding: 0;

  /* overflow-x: hidden; */

}



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

   RESET + SYSTEME DE DESIGN GLOBAL

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



html {

  /* 1rem = 10px */

  font-size: 62.5%;

}



body {

  margin: 0;

  padding: 0;

  font-family: 'Noto Sans JP', sans-serif;

  font-size: 1.6rem; /* 16px */

  line-height: 1.7;

  color: var(--color-text, #111111);

  background-color: #ffffff;

}



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

   VARIABLES GLOBALES

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

:root {

  /* --- Couleurs principales --- */

  --color-primary: #051E57;

  --color-primary-light: #113A95;

  --color-primary-text:#021237;

  --color-secondary: #111111;

  --color-white: #ffffff;

  --color-gray-light: #f5f7fb;

  --color-gray: #cccccc;

  --color-watermark: #d8dce6;



  /* --- Typo --- */

  --font-en: 'Crimson Text', serif;

  --font-jp: 'Noto Sans JP', sans-serif;



  /* --- Layout Desktop --- */

  --container-width: 1920px;

  --gutter: 2.4rem;

  --container-padding: 2.4rem;



  /* Espacements standards */

  --section-space: 8rem;

  --section-space-lg: 12rem;



  --font-size-text-16: 1.6rem;

  --font-size-note-12: 1.2rem;



  --lh-text-16: 1.8;

  --lh-note-12: 1.5;



  --ls-text-16: 0.06em;

  --ls-note-12: 0.06em;



  --vw-desktop-min: 1024;

  --vw-desktop-max: 1920;

  --vw390: calc(100vw / 390);

  --vw-desktop-range: calc((100vw - 1025px) / (1920 - 1025)); /* = 895 */

  --vw-mobile-range: clamp(0, (100vw - 390px) / (768 - 390), 1);

}



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

   CONTAINERS

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

.op-container {

  width: 100%;

  max-width: var(--container-width);

  padding-left: var(--container-padding);

  padding-right: var(--container-padding);

  margin-left: auto;

  margin-right: auto;

}



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

   TITRES

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

.op-title-en,

.op-section__en {

  font-family: var(--font-en);

  letter-spacing: 0.15em;

  font-weight: 400;

}



.op-title-ja,

.op-section__ja {

  font-family: var(--font-jp);

  letter-spacing: 0.1em;

  color: var(--color-primary-light);

  font-size: clamp(1.2rem, calc(12px + (14 - 12) * var(--vw-desktop-range)), 1.4rem);

}



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

   BOUTONS

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

.op-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-jp);

  font-weight: 500;

  padding: clamp(0.5rem, calc(5px + (10 - 5) * var(--vw-desktop-range)), 1rem)

          clamp(1.5rem, calc(15px + (30 - 15) * var(--vw-desktop-range)), 3rem);

  font-size: clamp(1.2rem, calc(12px + (16 - 12) * var(--vw-desktop-range)), 1.6rem);

  width: clamp(18rem, calc(180px + (367 - 180) * var(--vw-desktop-range)), 36.7rem);

  height: clamp(3.1rem, calc(31px + (62 - 31) * var(--vw-desktop-range)), 6.2rem);

  line-height: 1;

  letter-spacing: 0.06em;

  text-align: center;

  border: 1px solid transparent;

  cursor: pointer;

  transition: all 0.3s ease;

  position: relative;

  z-index: 15;

}



.op-btn--primary {

  background-color: var(--color-primary-light);

  color: var(--color-white);

}

.op-btn--primary:hover {

  background-color: var(--color-white);

  color: var(--color-primary-light);

  border-color: var(--color-primary-light);

}



.op-btn--outline {

  background-color:  var(--color-primary-light);

  color: var(--color-white);

  border: 1px solid var(--color-primary-light);

}

.op-btn--outline::after {

  content: "";

}

.op-btn--outline:hover {

  background-color: var(--color-white);

  color: var(--color-primary-light);

}



.op-btn svg {

  position: absolute;

  right: 3rem;

  top: 50%;

  transform: translateY(-50%);

  z-index: 20;

  stroke: var(--color-white);

  transition: .3s;

}

.op-btn:hover svg {

  stroke: var(--color-primary-light);

}



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

   SYSTEME DE SECTION

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

.op-section {

  padding-top: var(--section-space);

  padding-bottom: var(--section-space);

}

.op-section__header {

  text-align: center;

  margin-bottom: 4rem;

}

.op-section__header--left {

  text-align: left;

}



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

   IMAGES

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

img {

  max-width: 100%;

  height: auto;

  display: block;

}



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

   HERO

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

.op-hero {

  position: relative;

  overflow: hidden;

}


.mv-wrapper {
  position: relative;
}
.video-wrapper {
  height: calc(100vh - 10.8rem);
}
.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.op-hero__text {

  align-self: center;

  position: absolute;

  /* left: calc(100 * 100vw / 1920);

  top: calc(200 * 100vw / 1920); */

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (min-width: 1025px) {
  .op-hero__text {
    white-space: nowrap;
  }
}


.op-hero__title {

  font-family: var(--font-en);

  font-weight: 400;

  font-size: clamp(8rem, calc(80px + (120 - 80) * var(--vw-desktop-range)), 12rem);

  line-height: 1.04;

  letter-spacing: 0.11em;

  text-shadow: 1px 1px 2px var(--color-primary-text);

  color: var(--color-white);

  position: relative;

  z-index: 10;

}



.op-hero__subtitle {

  font-family: var(--font-jp);

  font-weight: 600;

  /* font-size: clamp(2.4rem, calc(24px + (36 - 24) * var(--vw-desktop-range)), 3.6rem); */
  font-size: clamp(4rem, calc(50px + (80 - 40) * var(--vw-desktop-range)), 8rem);

  line-height: 1.7;

  letter-spacing: 0.22em;

  color: var(--color-white);

  /* margin: calc(70 * 100vw / 1920) 0 0; */

  text-shadow: 1px 1px 2px var(--color-primary-text);

  position: relative;

  z-index: 11;

}



/* .op-hero::before {

  content: "";

  position: absolute;

  left: 0;

  top: 25%;

  width: 60%;

  height: 65%;

  background-color: #003b73;

  z-index: -1;

} */



.op-hero__image {

  max-width: calc(1720 * 100vw / 1920);

  margin-left: auto;

  position: relative;

  margin-bottom: 10rem;

}

.op-hero__image::before {

  content: "";

  position: absolute;

  left: -20rem;

  top: 10rem;

  width: 100%;

  height: 100%;

  background: var(--color-primary);

  z-index: -1;

  max-width: 170rem;

}

.op-hero__image img {

  width: 100%;

  height: auto;

  display: block;

  max-width: calc(1720 * 100vw / 1920);

  margin-left: auto;

}



/* Barre bleue en bas du hero */

.op-hero__bar {

  background-color: var(--color-primary);

  color: var(--color-primary-text);

}



.op-hero__bar-inner {

  display: flex;

  justify-content: flex-end;

}



.op-hero__pager {

  font-size: clamp(0.6rem, calc(6px + (7.5 - 6) * var(--vw-desktop-range)), 0.75rem);

  letter-spacing: 0.1em;

}



.op-hero__pager-current {

  font-weight: 700;

}



/* Barre en bas (pickup controls) */

.op-pickup__controls .op-hero__bar {

  position: absolute;

  right: 15rem;

  bottom: 1.45rem;

  width: 13rem;

  height: 0.3rem;

  background-color: #C2C9D9;

  overflow: hidden;

  z-index: 50;

  background-size: 1450px;

  border-radius: 0.2rem;

}



.op-hero-progress,

.op-hero-progress--pickup {

  width: 0%;

  height: 100%;

  background-color: #021237;

  transition: width linear;

  z-index: 15;

  position: absolute;

  top: 0;

  max-height: 0.3rem;

  border-radius: 0.2rem;

}



/* Controls */

.op-hero-controls {

  position: relative;

  right: 4rem;

  bottom: 2rem;

  display: flex;

  gap: 1rem;

  z-index: 20;

  position: absolute;

}



.op-hero-controls button {

  background: rgba(255, 255, 255, 0.35);

  border: none;

  backdrop-filter: blur(6px);

  padding: 0.8rem 1.4rem;

  color: var(--color-primary-text);

  cursor: pointer;

  font-size: clamp(1.3rem, calc(13px + (16 - 13) * var(--vw-desktop-range)), 1.6rem);

  transition: 0.3s;

  border: 1px solid var(--color-primary-text);

}



.op-hero-controls button:hover {

  background: rgba(255, 255, 255, 0.55);

}



/* SECTIONS GENERIQUES */

.op-section {

  padding: 12rem 0 9rem;

}



.op-section__header {

  text-align: center;

}



.op-section__header--left {

  text-align: left;

}



.op-section__en {

  font-family: var(--font-en);

  font-weight: 400;

  font-size: clamp(3.5rem, calc(35px + (70 - 35) * var(--vw-desktop-range)), 7rem);

  line-height: 1;

  letter-spacing: 0.04em;

  text-align: center;

  text-transform: uppercase;

  margin: 0;

  color: var(--color-secondary);

  position: relative;

  z-index: 20;

}



.op-section__ja {

  font-family: var(--font-jp);

  font-weight: 600;

  font-size: clamp(1rem, calc(10px + (20 - 10) * var(--vw-desktop-range)), 2rem);

  line-height: 1;

  letter-spacing: 0.12em;

  text-align: center;

  margin: 0.8rem 0 0;

  color: var(--color-primary-light);

  position: relative;

  z-index: 20;

}



.op-section__header--left .op-section__en,

.op-section__header--left .op-section__ja {

  text-align: left;

}



/* BUSINESS */

.op-business {

  background-color: #ffffff;

}



.op-business__grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12rem 0;

  margin-top: 7rem;

}



.op-business__item {

  display: flex;

  flex-direction: column;

  gap: 5rem;

}

.op-business__item--down {

  margin-top: 8rem;

}



.op-business__image-wrapper {

  position: relative;

}



.op-business__image-wrapper img {

  width: 100%;

  display: block;

}



.op-business__watermark {

  position: absolute;

  top: 100%;

  right: 0;

  font-family: var(--font-en);

  font-weight: 400;

  font-size: clamp(2.7rem, calc(27px + (54 - 27) * var(--vw-desktop-range)), 5.4rem);

  /* line-height: 0.725; */

  line-height: 0.79;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  text-align: right;

  color: var(--color-watermark);

  pointer-events: none;

  user-select: none;

}



.op-business__content {

  padding-left: 10rem;

  padding-right: 10rem;

}



.op-business__title {

  font-family: var(--font-jp);

  font-weight: 500;

  font-size: clamp(2rem, calc(20px + (36 - 20) * var(--vw-desktop-range)), 3.6rem);

  line-height: 1;

  letter-spacing: 0.08em;

  text-align: left;

  margin: 0 0 4rem;

  color: var(--color-primary-text);

}



.op-business__text {

  font-family: var(--font-jp);

  font-weight: 400;

  font-size: clamp(1.6rem, calc(16px + (16 - 16) * var(--vw-desktop-range)), 1.6rem);

  line-height: 1.8;

  letter-spacing: 0em;

  color: var(--color-secondary);

  margin: 0 0 5rem;

  text-align: left;

}

.op-business__text .strong {

  font-size: 1.8rem;

}



.note_12 {

  font-family: var(--font-jp);

  font-weight: 400;

  font-size: clamp(1.3rem, calc(13px + (13 - 13) * var(--vw-desktop-range)), 1.3rem);

  line-height: 1.5;

  letter-spacing: 0.06em;

  color: var(--color-secondary);

}



.op-business__link {

  font-size: 0.8rem;

}



/* PICK UP */

.op-pickup {

  position: relative;

  padding: clamp(6rem, calc(60px + (120 - 60) * var(--vw-desktop-range)), 12rem)

           0

           clamp(4.5rem, calc(45px + (90 - 45) * var(--vw-desktop-range)), 9rem);

  overflow-x: hidden;

}



.op-pickup::before {

  content: "";

  position: absolute;

  top: 0;

  background: #F0F3F7;

  width: 100%;

  height: 100%;

  max-width: clamp(72.5rem, calc(1450 * 100vw / 1920), 145rem);

}



.op-flex {

  display: flex;

  gap: 4rem;

}



.op-pickup .op-section__header--left {

  padding-left: clamp(5rem, calc(50px + (100 - 50) * var(--vw-desktop-range)), 10rem);

  background: #F0F3F7;

  z-index: 20;

  position: absolute;

  height: calc(100% - clamp(6rem, calc(60px + (120 - 60) * var(--vw-desktop-range)), 12rem));

  padding-right: 6rem;

}



.op-pickup__lead {

  font-size: clamp(0.8rem, calc(8px + (16 - 8) * var(--vw-desktop-range)), 1.6rem);

  margin: clamp(2.5rem, calc(25px + (50 - 25) * var(--vw-desktop-range)), 5rem)

          0

          clamp(3rem, calc(30px + (60 - 30) * var(--vw-desktop-range)), 6rem);

  font-weight: 400;

  position: relative;

  z-index: 20;

}



.op-pickup__btn {

  font-size: clamp(1.2rem, calc(12px + (16 - 12) * var(--vw-desktop-range)), 1.6rem);

}



.op-pickup__cards {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 24px;

  margin-top: 16px;

}



.op-pickup__card {

  background-color: var(--color-white);

  overflow: hidden;

}

.op-pickup__card img {

  transition: .3s;

}

.op-pickup__card:hover img {

  scale: 1.15;

}



.op-pickup__thumb img {

  width: 100%;

  height: auto;

  display: block;

}



.op-pickup__pager {

  display: flex;

  justify-content: flex-end;

  margin-top: 24px;

  gap: 8px;

}



.op-pickup__pager-btn {

  width: 32px;

  height: 32px;

  border-radius: 0;

  border: 1px solid var(--color-gray);

  background-color: #ffffff;

  cursor: pointer;

  font-size: 0.8rem;

}



.op-pickup__pager-btn:hover {

  background-color: #e4e7eb;

}



.op-pickup__slider {

  position: relative;

  overflow: visible;

  width: 100%;

}



.op-pickup__card {

  width: auto;

}



.op-pickup__slider .swiper-wrapper {

  backface-visibility: hidden;

  transform: translate3d(0,0,0);

}
.op-pickup__slider .swiper-wrapper .op-pickup__card a {
  display: block;
  width: 100%;
}
.op-pickup__slider .swiper-wrapper .op-pickup__card .op-pickup__thumb .property-photo {
  width: 100%;
  aspect-ratio: 125/164;
  object-fit: cover;
}


.op-pickup__controls {

  display: flex;

  gap: 1rem;

  margin-top: 2rem;

  position: relative;

  justify-content: flex-end;

  right: 10rem;

}



.op-pickup__controls button {

  background: transparent;

  border: none;

  color: var(--color-primary-text);

  padding: 0.6rem 1.2rem;

  cursor: pointer;

  font-size: 1.6rem;

  border: 1px solid var(--color-primary-text);

  transition: .3s;

}

.op-pickup__controls button:hover {

  background: var(--color-primary-text);

  color: var(--color-white);

}



.op-pickup__slider.swiper  {

  max-width: 75%;

  left: 17%;

}



/* ABOUT */

.op-about {

  background-color: var(--color-white);

}



.op-about__slider {

  display: grid;

  grid-template-columns: 1fr 1fr;

  margin-top: 7rem;

}



article:has(.op-about__item):last-of-type {

  margin-top: 6rem;

}



.op-about__image {

  position: relative;

  overflow: hidden;

}



.op-about__image img {

  width: 100%;

  display: block;

  transition: .3s;

}

.op-about__item:hover img {

  scale: 1.15;

}



.op-about__overlay-label {

  position: absolute;

  letter-spacing: 0.2em;

  color: var(--color-white);

  font-size: clamp(1.2rem, calc(12px + (14 - 12) * var(--vw-desktop-range)), 1.4rem);

  left: clamp(3rem, calc(30px + (100 - 30) * var(--vw-desktop-range)), 10rem);

  top: 50%;

  transform: translateY(-50%) !important;

}



.op-about__overlay-label__en {

  font-family: var(--font-en);

  font-weight: 400;

  font-size: clamp(2.8rem, calc(28px + (54 - 28) * var(--vw-desktop-range)), 5.4rem);

  line-height: 1;

  letter-spacing: 0.04em;

  text-transform: uppercase;

}



.op-about__overlay-label__ja {

  font-family: var(--font-jp);

  font-weight: 600;

  line-height: 1;

  letter-spacing: 0.12em;

  font-size: clamp(1.4rem, calc(14px + (18 - 14) * var(--vw-desktop-range)), 1.8rem);

  margin-top: clamp(2.4rem, calc(24px + (40 - 24) * var(--vw-desktop-range)), 4rem);

}



.op-about__item {

  position: relative;

}



.op-about__item .square {

  background: var(--color-primary);

  width: clamp(4rem, calc(40px + (80 - 40) * var(--vw-desktop-range)), 8rem);

  height: clamp(4rem, calc(40px + (80 - 40) * var(--vw-desktop-range)), 8rem);

  position: absolute;

  right: 0;

  bottom: 0;

  z-index: 15;

  transition: .3s;

}



.op-about__item svg {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  z-index: 20;

  stroke: #fff;

}



.op-about__item:hover .square {

  width: 100%;

  height: 100%;

  opacity: 0.45;

}



.op-about__item:hover svg {

  display: none;

}



/* CTA BAND */

.op-cta {

  background-image: url("../img/top/subft.png");

  background-size: cover;

  background-position: center;

  padding: 60px 0;

  position: relative;

  z-index: 10;

}



.op-cta__inner {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  gap: 5rem;

  color: var(--color-primary-text);

}



.op-cta__text {

  margin: 0;

  font-family: var(--font-jp);

  font-weight: 500;

  font-size: clamp(1.5rem, calc(15px + (24 - 15) * var(--vw-desktop-range)), 2.4rem);

  line-height: 1.8;

  letter-spacing: 0.12em;

  text-align: center;

}



.op-cta__actions {

  display: flex;

  align-items: baseline;

  gap: 6rem;

}



.op-cta__tel-number {

  font-size: 1.5rem;

  font-family: var(--font-en);

  font-weight: 400;

  display: flex;

  align-items: center;

  gap: 0.8rem;

  font-size: clamp(2.4rem, calc(24px + (42 - 24) * var(--vw-desktop-range)), 4.2rem);

  line-height: 1;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  color: var(--color-secondary);

}



.op-cta__tel-time {

  font-family: var(--font-jp);

  font-weight: 400;

  font-size: 1.6rem;

  line-height: 1.8;

  letter-spacing: 0.12em;

  text-align: center;

  display: block;

}



.op-cta__mail {

  width: clamp(20rem, calc(200px + (400 - 200) * var(--vw-desktop-range)), 40rem);

  height: clamp(5rem, calc(50px + (80 - 50) * var(--vw-desktop-range)), 8rem);

  font-size: clamp(1.2rem, calc(12px + (20 - 12) * var(--vw-desktop-range)), 2rem);

  font-family: var(--font-jp);

  font-weight: 500;

  line-height: 1;

  letter-spacing: 0.06em;

  text-align: center;

}



.op-cta__mail .envelop {

  inset: 50% auto auto clamp(2rem, calc(20px + (30 - 20) * var(--vw-desktop-range)), 3rem);

  width: 2.9rem;

  height: 1.9rem;

}



.op-cta__mail svg {

  color: var(--color-white);

}



.op-cta__mail:hover svg {

  color: var(--color-primary-light);

}



/* TO TOP */

.to-top-btn {

  width: 4rem;

  height: 4rem;

  background: var(--color-secondary);

  border: 1px solid var(--color-secondary);

  position: fixed;

  inset: auto 3rem 3rem auto;

  z-index: 30;

  cursor: pointer;

  right: -8rem;

  opacity: 0;

  pointer-events: none;

  transition:

    right 0.35s ease,

    opacity 0.35s ease;

  z-index: 15;

}



.to-top-btn.is-visible {

  right: 3rem;

  opacity: 1;

  pointer-events: auto;

}



.to-top-btn:hover {

  background: var(--color-white);

}



.to-top-btn svg {

  stroke: var(--color-white);

  position: absolute;

  transform: translate(-50%, -50%);

  inset: 50% auto auto 50%;

  transition: .3s;

}



.to-top-btn:hover svg {

  stroke: var(--color-secondary);

}



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

   SCROLL REVEAL GENERIQUE

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

.op-reveal {

  opacity: 0;

  transition:

    opacity var(--reveal-duration, 0.6s) ease-out,

    transform var(--reveal-duration, 0.6s) ease-out,

    background-color var(--reveal-duration, 0.6s) ease-out,

    color var(--reveal-duration, 0.3s) ease-out;

  will-change: opacity, transform, background-color, color;

}



.op-reveal-up { transform: translateY(40px); }

.op-reveal-down { transform: translateY(-30px); }



.op-reveal.is-visible {

  opacity: 1;

  transform: translateY(0);

}



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

   HERO : ANIMATION sans JS

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

@keyframes op-hero-fade-down {

  0% { opacity: 0; transform: translateY(-25px); }

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

}
@keyframes op-hero-fade-up {

  0% { opacity: 0; }

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

}
@keyframes op-hero-fade-up-out {

  0% { opacity: 0; }

  5% { opacity: 1; }

  95% { opacity: 1; }

  100% { opacity: 0; }
}

.op-hero__title {
  align-items: center;
}
/* .op-hero__title::before {
  content: "";
  width: 4vw;
  aspect-ratio: 242/272;
  background: url(../img/common/logo_mark.png) no-repeat center / cover;
} */

.op-hero__title,
.op-hero__subtitle {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 10px;
  opacity: 0;
  transition: all 0.8s;
}
.op-hero__title.active,
.op-hero__subtitle.active {
  opacity: 1;
  transition: all 0.8s;
}

.op-hero__subtitle {

  /* animation: op-hero-fade-up-out 7.5s ease-out forwards; */
}



/* .op-hero__title { animation-delay: 0s; }

.op-hero__subtitle { animation-delay: 0s; } */

@media screen and (max-width: 1024px) {
  /* .op-hero__title,

  .op-hero__subtitle,

  .op-hero-controls,

  .op-hero .swiper-slide:first-child .op-hero__image {
    animation: op-hero-fade-down 0.55s ease-out forwards;
  }
  .op-hero__subtitle { animation-delay: 0.30s; }
  .op-hero__title { animation-delay: 0.15s; } */

  /* .op-hero__title::before {
    width: 120px;
  } */
}

.op-hero .swiper-slide:first-child .op-hero__image { animation-delay: 0.45s; }

.op-hero-controls { animation-delay: 0.60s; }



.op-hero__image .swiper-slide img {

  max-height: 87.2rem;

}



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

   RESPONSIVE GLOBAL (hors header/footer)

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

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

  .video-wrapper {
    height: 100vh;
  }

  .op-hero__image {

    margin-left: auto;

    position: relative;

    margin-bottom: 6rem;

    max-width: none;

    padding-left: 15%;

  }



  .op-hero__image::before {

    left: -20rem;

    top: 6rem;

  }



  .op-hero__image img {

    width: auto;

    max-width: none;

  }



  .op-hero__title { font-size: 5.6rem; }

  .op-hero__subtitle { font-size: 3.6rem; white-space: nowrap; }



  /* .op-hero__text { left: 2rem; top: 47rem; } */
  /* .op-hero__text { left: 2rem; top: 20rem; } */



  .swiper-slide img { height: 100% !important; }



  .op-hero-controls { bottom: 1rem; }

  .op-hero-controls button { width: 4rem; height: 4rem; }



  .op-business__grid {

    grid-template-columns:

      repeat(clamp(1, calc(1 + (2 - 1) * var(--vw-range-mobile)), 2), minmax(0, 1fr));

    gap: 6rem 0;

    margin-top: 0;

  }



  .op-pickup { padding: 6rem 0; }



  .op-pickup__cards {

    grid-template-columns:

      repeat(clamp(2, calc(2 + (3 - 2) * var(--vw-range-mobile)), 3), minmax(0, 1fr));

  }



  .op-about__slider {

    grid-template-columns:

      repeat(clamp(1, calc(1 + (3 - 1) * var(--vw-range-mobile)), 3), minmax(0, 1fr));

  }



  .op-about__slider article { margin-top: 0; }

  article:has(.op-about__item):last-of-type { margin-top: 0; }



  .op-flex { flex-direction: column; }



  .op-pickup .op-section__header--left {

    padding: 0;

    margin: 0;

    padding-left: 3rem;

    position: relative;

  }



  .op-section__en { font-size: 3.4rem; }

  .op-section__ja { font-size: 1.4rem; }



  .op-pickup__lead {

    font-size: 1.4rem;

    margin: 4rem 0 0;

  }



  .op-pickup__card.swiper-slide { margin-right: 3rem; }



  .op-section.op-business { padding: 6rem 0 2rem; }



  .op-business__item { gap: 3rem; }

  .op-business__item--down { margin-top: 0; }

  .op-business__watermark { font-size: 3rem; }



  .op-business__content { padding: 0 3rem; }

  .op-business__title { font-size: 2.6rem; margin-bottom: 2.5rem; }

  .op-business__text { font-size: 1.4rem; margin-bottom: 4rem; }



  .op-btn,

  .op-btn--outline {

    display: flex;

    margin: auto;

    font-size: 1.4rem;

    max-width: 28rem;

    width: 100%;

    height: 5rem;

  }



  .op-pickup__slider.swiper {

    left: auto;

    margin-left: 3rem;

    max-width: unset;

  }



  .op-about { padding: 6rem 0 6rem; }

  .op-about__slider { margin-top: 3.5rem; }



  .op-about__overlay-label { left: clamp(3rem, 3rem, 3rem); }

  .op-about__overlay-label__en { font-size: clamp(2.8rem, 2.8rem, 2.8rem); }

  .op-about__overlay-label__ja {

    font-size: clamp(1.4rem, 1.4rem, 1.4rem);

    margin-top: clamp(2.4rem, 2.4rem, 2.4rem);

  }



  .op-cta { padding: 5rem 0; }



  .op-cta__tel {

    gap: 1rem;

    display: flex;

    flex-direction: column;

  }



  .op-cta__tel-number { font-size: 3rem; gap: .8rem; }



  .op-cta__text {

    font-size: 1.5rem;

    letter-spacing: 0.05em;

  }



  .op-cta__inner { padding: 0 3rem; gap: 4rem; }



  .op-cta__actions { flex-direction: column; gap: 3rem; }



  .op-cta__mail {

    min-width: 28rem;

    height: 6rem;

    font-size: 1.6rem;

    padding: 1.8rem 2rem;

  }

}


@media screen and (max-width: 767px) {
  .video-wrapper video {
    height: 100%;
    object-fit: cover;
  }
  /* .op-hero__title::before {
    width: 80px;
  } */
  /* .op-hero__text { left: 2rem; top: unset; bottom: 5rem; } */

  .op-hero__title { font-size: 3.6rem; }

  .op-hero__subtitle { font-size: 2.0rem; }
}


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

    .op-business__watermark { font-size: 2.5rem; }

}