/*
Theme Name: D Link Theme
Theme URI: https://www.inc-d-link.jp/
Author: 株式会社D-Link
Version: 1.0
*/
@font-face {
  font-family: 'Source Han Sans';
  src: url('fonts/SourceHanSansJP-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Chillax';
  src: url('fonts/Chillax-Semibold.woff2') format('woff2'),
    url('fonts/Chillax-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'Noto Sans JP', 'Source Han Sans', sans-serif;
  font-style: normal;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: 1.6px;
  color: #1D2D42;
  overflow-x: hidden;
  /* max-width: 1360px; */
  margin: 0 auto;
  position: relative;
}

html {
  overflow-x: hidden;
}

/* scroll reveal（2画面目以降をFadeIn） */
.reveal-target {
  opacity: 0;
  transition: opacity 2s ease;
  will-change: opacity;
}

.reveal-target.is-revealed {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-target {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* doctor: SP Features subtitle spacing */
@media (max-width: 768px) {
  .features-section .doctor-feature-sub-title-sp {
    margin-bottom: 35px !important;
  }
}

/* doctor: SP Voice header spacing */
@media (max-width: 768px) {
  .voice-section .doctor-voice-header {
    margin-top: 55px;
  }
}

body p {
  color: #1D2D42;
}

.only-pc {
  display: block !important;
}
.only-sp {
  display: none !important;
}

.section-padding {
  padding: 100px 0;
}

.bg-soft {
  background: #f5f7f8;
}

.text-teal {
  color: #17b3a3;
}

.btn-teal {
  background: #17b3a3;
  color: #fff;
  border-radius: 50px;
  padding: 10px 25px;
}

.btn-teal:hover {
  background: #139688;
  color: #fff;
}

/* Smartphone-only line break: <br class="br-sp"> — no break from 769px up */
@media (min-width: 769px) {
  br.br-sp {
    display: none;
  }
}

/* PC: front Solution header padding-left */
@media (min-width: 769px) {
  .solution-section .solution-header-main .solution-sub-title,
  .solution-section .solution-header-main .p-heading,
  .solution-section .solution-header-main .solution-lead-row {
    padding-left: 50px;
  }
}

/* PC: front Solution lead text slight indent */
@media (min-width: 769px) {
  .solution-section .solution-header-main .solution-lead-row > p {
    padding-left: 10px;
  }
}

/* PC: front Solution slider area horizontal padding */
@media (min-width: 769px) {
  .solution-section .solution-swiper-layout {
    padding-left: 70px !important;
    padding-right: 0 !important;
  }
}

 .breadcrumb-small {
   font-size: 12px;
   line-height: 24px;
   letter-spacing: 1.2px;
   white-space: nowrap;
   text-align: right;
 }
.breadcrumb-small-first {
  color: #959CA3;
}
.breadcrumb-small-second{
  width: 32px;
  height: 1px;
  background-color: #959CA3;
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  margin-right: 8px;
}
.breadcrumb-small-third {
  color: #1D2D42;
}

/* ===== Header ===== */
.navbar {
  padding: 0px 50px;
  /* background: transparent; */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  /* max-width: 1360px; */
  z-index: 10000;
  background-color: rgba(255, 255, 255, 0);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: background-color 200ms ease, backdrop-filter 200ms ease, box-shadow 200ms ease;
  overflow: visible;
}

.navbar.is-after-mv {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* .navbar .navbar-container {
  width: 90%;
  max-width: 90%;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
} */
.navbar-nav {
  gap: 32px;
}
.nav-item {
  font-family: "Source Han Sans", sans-serif;
  font-weight: bold;
  font-size: 14px;
  line-height: 22px;

  letter-spacing: 1.4px;
  color: #1D2D42;
  text-align: center;

  opacity: 1;
}

/* Nav links: global baseline (SP + PC). Do not gate padding/typography on min-width — keeps SP layout stable. */
.nav-item .nav-link {
  position: relative;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  border-top: 2px solid transparent;
}
.nav-item .nav-link.company-link {
  padding-top: 29px !important;
  padding-bottom: 29px !important;
}
.nav-item .nav-link svg {
  margin-top: 1px;
}

.navbar-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.4px;
  color: #1D2D42;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-top: 2px solid transparent;
  transition: color 220ms ease;
}

.nav-item.active .nav-link {
  color: #2BB7B3 !important;
  border-top: #2BB7B3 2px solid;
}

/* Desktop only: animated top line via ::before (no navbar flex / collapse changes) */
@media (min-width: 769px) {
  .nav-item.active .nav-link {
    border-top: none;
  }

  .navbar-nav .nav-link {
    border-top: none;
  }

  .navbar-nav .nav-item.active .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    width: 100%;
    background-color: #2BB7B3;
    transform: scaleX(1);
    transform-origin: left center;
    z-index: 1;
    transition: none;
  }

  .navbar-nav .nav-item:not(.active) .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    width: 100%;
    display: block;
    pointer-events: none;
    background-color: #2BB7B3;
    z-index: 2;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 320ms cubic-bezier(.2, .8, .2, 1),
      opacity 320ms cubic-bezier(.2, .8, .2, 1);
  }

  /* LINE: single-line + icon sits lower in align-items:center row — use translateY (not large negative top) to avoid clip */
  .navbar-nav .nav-link.nav-link-line {
    overflow: visible;
  }

  .navbar-nav .nav-item.active .nav-link.nav-link-line::before {
    transform: translateY(-11px) scaleX(1);
  }

  .navbar-nav .nav-item:not(.active) .nav-link.nav-link-line::before {
    transform: translateY(-11px) scaleX(0);
  }

  .navbar-nav .nav-item:not(.active) .nav-link:hover {
    color: #2BB7B3 !important;
  }

  .navbar-nav .nav-item:not(.active):hover > .nav-link::before,
  .navbar-nav .nav-item:not(.active) .nav-link:focus-visible::before {
    opacity: 1;
    transform: scaleX(1);
  }

  .navbar-nav .nav-item:not(.active):hover > .nav-link.nav-link-line::before,
  .navbar-nav .nav-item:not(.active) .nav-link.nav-link-line:focus-visible::before {
    transform: translateY(-11px) scaleX(1);
  }
}

@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
  .navbar-nav .nav-item:not(.active) .nav-link::before {
    transition: none;
  }

  .navbar-nav .nav-item:not(.active) .nav-link.nav-link-line::before {
    transform: translateY(-11px) scaleX(0);
  }

  .navbar-nav .nav-item:not(.active):hover > .nav-link.nav-link-line::before,
  .navbar-nav .nav-item:not(.active) .nav-link.nav-link-line:focus-visible::before {
    transform: translateY(-14px) scaleX(1);
  }
}

.btn-contact {
  color: #fff !important;
  padding: 8px 24px;
  font-size: 100%;
  position: relative;
}
.btn-contact::before {
  content: "";
  position: absolute;
  border-radius: 30px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2bb7b3;
  z-index: -1;
  transition: transform 0.3s ease;
  transform-origin: center;
}
.btn-contact:hover::before {
  transform: scaleX(0.9) scaleY(0.9);
  background: rgba(43,183,179, 0.8);
}
.btn-contact img {
  width: auto;
  height: 13px;
  margin: 0 0 2px 2px;
  object-fit: contain;
  flex-shrink: 0;
}
/* ===== Hero Slider ===== */
/* Slide image zoom out animation */
@keyframes zoomIn {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.15);
  }
}

@keyframes scrollLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 0.5ch));
  }
}

@keyframes dlinkMoveLeft {
  from {
    left: 100%;
  }
  to {
    left: -100%;
  }
}

.m-text-split-wrapper {
  overflow: hidden;
}

.m-text-split {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  animation: letterIn 0.6s ease forwards;
}

.m-text-split.space {
  width: 0.5em;
  /* adjust this value for bigger/smaller gap */
}

/* stagger each letter */
.m-text-split:nth-child(1) {
  animation-delay: 0.05s;
}

.m-text-split:nth-child(2) {
  animation-delay: 0.10s;
}

.m-text-split:nth-child(3) {
  animation-delay: 0.15s;
}

.m-text-split:nth-child(4) {
  animation-delay: 0.20s;
}

.m-text-split:nth-child(5) {
  animation-delay: 0.25s;
}

.m-text-split:nth-child(6) {
  animation-delay: 0.30s;
}

.m-text-split:nth-child(7) {
  animation-delay: 0.35s;
}

.m-text-split:nth-child(8) {
  animation-delay: 0.38s;
}

.m-text-split:nth-child(9) {
  animation-delay: 0.41s;
}

.m-text-split:nth-child(10) {
  animation-delay: 0.46s;
}

.m-text-split:nth-child(11) {
  animation-delay: 0.51s;
}

.m-text-split:nth-child(12) {
  animation-delay: 0.54s;
}

.m-text-split:nth-child(13) {
  animation-delay: 0.57s;
}

.m-text-split:nth-child(14) {
  animation-delay: 0.62s;
}

.m-text-split:nth-child(15) {
  animation-delay: 0.67s;
}

.m-text-split:nth-child(16) {
  animation-delay: 0.72s;
}

.m-text-split:nth-child(17) {
  animation-delay: 0.77s;
}

.m-text-split:nth-child(18) {
  animation-delay: 0.82s;
}

.m-text-split:nth-child(19) {
  animation-delay: 0.87s;
}

@keyframes letterIn {
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

.carousel-item {
  height: 87.5vh;
  min-height: 700px;
  background-size: cover;
  background-position: center;
  position: relative;
  transition: transform 0.8s ease-in-out !important;
}

.mv-overlay-text {
  font-family: "Chillax", sans-serif;
  position: absolute;
  bottom: 55px;
  left: 0;
  font-size: 120px;
  font-weight: bold;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 1ch;
  color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  z-index: 2;
  animation: scrollLeft 16s linear infinite;
}

.mv-overlay-text::after {
  content: attr(data-text);
}

.carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
}

/* Pseudo element holds the background and animates */
.carousel-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  z-index: 0;
}

/* Trigger zoom out only on active slide */
.carousel-item.active::after {
  animation: zoomIn 6s ease-out forwards;
}

.hero-content {
  z-index: 2;
  position: relative;
}

.hero-content {
  position: absolute;
  top: 43.5%;
  transform: translateY(-50%);
  z-index: 2;
  max-width: 600px;
}

.hero-content h1 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.6;
}

.hero-content p {
  font-size: 16px;
  line-height: 32px;
  letter-spacing: 3.2px;
  margin-top: 37px;
  font-weight: 500;
}



.hero-carousel-wrap {
  display: flex;
  flex-direction: column;
}

.carousel-indicators-wrap {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 14px 0;
  background: #fff;
  /* or match your section bg */
}

.carousel-indicators-wrap button {
  width: 32px;
  height: 4px;
  border-radius: 3px;
  border: none;
  background-color: #F0F4F8;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.3s, width 0.3s;
}

.carousel-indicators-wrap button.active {
  background-color: #D4F1F0;
  /* width: 56px; */
}

/* Default — no blur (transparency 0) */
.carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  opacity: 1;
  transform: scale(1.1); 
  transition: transform 6s ease-out;
  /* transition: opacity 6s ease-in-out; */
  z-index: 1;
}

/* Active slide — blur on (transparency 20) */
.carousel-item.slide-blur::before {
  /* opacity: 0.2; */
  transform: scale(1);
}
.service-card-p-small-title {
  font-size: 22px;
  line-height: 32px;
  letter-spacing: 2.2px;
  font-weight: bold;
  margin-top: 23px;
}
.service-card-p-heading {
  font-size: 36px;
  line-height: 52px;
  letter-spacing: 3.6px;
  font-weight: bold;
  margin-top: 16px;
  margin-bottom: 24px;
}
.service-card-p {
  font-size: 16px;
  line-height: 32px;
  letter-spacing: 1.6px;
}
.contact-p-small-title{
  font-size: 22px !important;
  letter-spacing: 2.2px !important;
  line-height: 40px !important;
}
@media (min-width: 768px) {
  .service-btn {
    margin-top: 30px;
    margin-bottom: 61px;
  }
}
/* Responsive */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 28px;
  }
     .breadcrumb-small {
     font-size: 11px;
     margin-top: 0;
     width: auto;
     /* remove full-width override */
   }
}

/* Section background */
.strengths-section {
  padding: 30px 0;
  position: relative;
  overflow: hidden;
}

/* PC: ScrollTrigger の pin が親の overflow で破綻しやすいので緩める（背景の横はみ出しは子の clip で調整） */
@media (min-width: 769px) {
  .strengths-section.strengths-section-full {
    overflow: visible;
  }
}

/* PC: TOP Strengths をフル幅&左寄せに */
@media (min-width: 769px) {
  .strengths-section.strengths-section-full > .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }

  /* TOP Strengths 冒頭説明は読みやすい左右余白を戻す */
  .strengths-section.strengths-section-full > .container.strengths-desc-container {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0px;
    padding-right: 0px;
  }
}

.strength-heading {
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 3.64px;
  color: #1D2D42;
  padding-left: 116px;
}

.strength-body {
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 1.6px;
  color: #1D2D42;
}

/* medical: Solution カードへのアンカー時、固定ナビの被りを避ける */
#solution [id^="solution-card-"] {
  scroll-margin-top: 100px;
}

/* medical: Solution 背景の横流れテキスト（PCのみ） */
@media (min-width: 769px) {
  /* overlay より手前にコンテンツを出す */
  #solution {
    position: relative;
    z-index: 1;
  }

  #solution .medical-voice-container {
    position: relative;
    z-index: 2;
  }

  #solution .medical-overlay-text {
    position: fixed;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-family: 'Chillax', sans-serif;
    font-weight: 600;
    font-size: 180px;
    line-height: 1;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.9);
    animation: dlinkMoveLeft 18s linear infinite;
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
    /* Featureセクション等の背景より必ず後ろに沈める */
    z-index: 0;
  }

  #solution .medical-overlay-text::before {
    content: "Implementation Record Implementation Record Implementation Record Implementation Record Implementation Record Implementation Record Implementation Record Implementation Record";
  }

  #solution .medical-overlay-text.is-visible {
    opacity: 1;
  }

  /* fixed overlay が前に出るケース対策：Solutionの実コンテンツを常に前面へ */
  #solution .medical-voice-container > :not(.medical-overlay-text) {
    position: relative;
    z-index: 5;
  }
}

/* medical: Feature(青背景)を overlay より手前に */
@media (min-width: 769px) {
  .features-section {
    position: relative;
    z-index: 2;
  }
}

/* Big background word */
.bg-strengths {
  position: absolute;
  top: -200px;
  left: 0;
  font-family: 'Chillax', sans-serif;
  font-weight: 600;
  font-size: 180px;
  line-height: 251px;

  letter-spacing: 0;
  text-align: left;
  opacity: 1;
  color: #D4F1F0;
  z-index: 1000;
  white-space: nowrap;
}

/* Ensure content appears above background text */
.strengths-content {
  position: relative;
  z-index: 2;
  /* max-width: 1920px; */
}
.service-heading {
  font-size: 26px !important;
  float: right;
}


/* Strength item */
.strength-item {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #2BB7B3;
}

.strength-number {
  font-family: 'Chillax', sans-serif;
  color: #00b4aa;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
  letter-spacing: 1.6px;
}
.strength-number::before {
  content: "";
  margin-bottom: 3px;
  display: inline-block;
  width: 14px;   /* adjust to match your image size */
  height: 14px;
  vertical-align: middle;
  margin-right: 6px;
  background-image: url("images/plus.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.strength-title {
  font-weight: bold;
  font-size: 22px;
  margin-bottom: 15px;
  letter-spacing: 2.2px;
}
.row.custom-gap {
  column-gap: 88px;
}
/* ===== SECTION BASE ===== */
.service-section {
  position: relative;
  padding: 30px 0 210px;
  overflow: hidden;
}


/* Content must be above background */
.service-content {
  margin-top: 60px;
  position: relative;
  z-index: 2;
  text-align: center;
}

.service-content .section-sub-title {
  margin-top: 0px;
}





/* ===== SERVICE CARDS ===== */
.service-card {
  background: #fff;
  overflow: hidden;
}
.service-card-1 {
  border-radius: 95px 95px 0 0;
  margin-bottom: 16px;
  margin-top: 56px;
}
.service-card-2 {
  border-radius: 0 0 95px 95px;
}

.service-card .card-body {
  padding: 20px 0px 58px 58px;
}
.service-card .card-body2 {
  padding: 0px 0px 15px 58px;
  margin-top: 0px;
}
.service-top-heading {
  margin-top: 33px;
  margin-bottom: 33px !important;
}
.service-top-heading-desc {
  text-align: left;
  padding: 0 100px;
}
/* Button */
.common-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 1.6px;
}

.service-btn {
  color: #008e88;
  margin-top: 20px;
  margin-bottom: 0;
}
.service-card .card-body2 .service-btn {
  margin-top: 0px;
}

.company-btn {
  color: #fff;
  margin-top: 20px;
}

.company-btn .btn-text {
  background-image: linear-gradient(to right, #ffffff 100%, #ffffff 100%);
}

.company-btn:hover .btn-text {
  background-image: linear-gradient(to right, #ffffff 0%, #ffffff 100%);
}

.youtube-btn {
  color: #fff;
}

.youtube-btn .btn-text {
  background-image: linear-gradient(to right, #ffffff 100%, #ffffff 100%);
}

.youtube-btn:hover .btn-text {
  background-image: linear-gradient(to right, #ffffff 0%, #ffffff 100%);
}

.youtube-btn-circle {
  background: #ffffff;
}


.contact-btn {
  color: #000000;
}

.contact-btn .btn-text {
  background-image: linear-gradient(to right, #000000 100%, #000000 100%);
}

.contact-btn:hover .btn-text {
  background-image: linear-gradient(to right, #000000 0%, #000000 100%);
}
.contact-card:hover .common-btn-circle {
  transform: scale(0.85);
}
.contact-card:hover .btn-text {
  background-size: 0% 2px;
  /* instantly collapse */
  animation: underline-flow 0.4s ease forwards;
}

.contact-btn-circle {
  background: #2BB7B3;
  width: 68px !important;
  height: 68px !important;
}

@keyframes underline-flow {
  from {
    background-size: 0% 2px;
  }

  to {
    background-size: 100% 2px;
  }
}

/* Animated underline on the text */
.btn-text {
  position: relative;
  margin: 0;
  padding-bottom: 8px;
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.01s;
  /* instant reset */
}

.service-btn .btn-text {
  background-image: linear-gradient(to right, #2d3748 100%, #2d3748 100%);
}

.service-btn:hover .btn-text {
  background-image: linear-gradient(to right, #2d3748 0%, #2d3748 100%);
}

.common-btn:hover .btn-text {
  background-size: 0% 2px;
  /* instantly collapse */
  animation: underline-flow 0.4s ease forwards;
}

.common-btn:hover .btn-text::after {
  width: 100%;
}

.common-btn-circle {
  display: inline-flex;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.service-card:hover .btn-text {
  background-size: 0% 2px;
  animation: underline-flow 0.4s ease forwards;
}

.service-card:hover .common-btn-circle {
  transform: scale(0.85);
}
.service-btn-circle {
  background: #2bb3ad;
  color: #fff;
}

.company-btn-circle {
  background-image: url("images/exclusion_arrow.png");
  background-repeat: no-repeat;
  background-position: center;
}

.common-btn:hover .common-btn-circle {
  transform: scale(0.85);
}

/* Image styling */
.service-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solution-section {
  padding-bottom: 30px;
  background: transparent;
  position: relative;
}

.solution-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;          /* align to right edge */
  width: 94%;        /* 90% of screen */
  height: 100%;
  background: #F0F4F8;
  border-radius: 80px 0 0 0; /* rounded on left side only */
  z-index: 0;
}
.solution-section > * {
  position: relative;
  top: -53px;
  z-index: 1;
}
.solutionSwiper {
  padding-bottom: 50px;
}

/* Swiper */
.solution-section .swiper {
  margin-left: 40px !important;
  overflow: hidden !important;
  /* IMPORTANT for partial next slide */
}

.swiper-wrapper {
  /* margin-left: 50px; */
  margin-top: 48px;
}

.swiper-slide {
  width: 60%;
  transition: all .4s ease;
}

.slide-card {
  position: relative;
  border-radius: 20px;
}

.slide-card img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 20px;
}

/* Smaller side slides */
.swiper-slide:not(.swiper-slide-active) {
  transform: scale(.85);
  /* opacity: .6; */
}

.solution-image {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.solution-image img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

/* Solutions label (outside white box) */
.solution-label {
  position: absolute;
  bottom: 75px;
  left: 136px !important;
  color: #fff;
  font-size: 16px;
  font-family: 'Chillax', sans-serif;
  font-weight: 700;
  letter-spacing: 1.6px;
}
.swiper-slide-active .slide-card .solution-label img.plus-white-btn {
  width: auto;
  height: 11px;
  margin-top: -2px;
  display: inline;
}

/* Caption box */
.caption {
  position: absolute;
  bottom: -75px;
  right: -20px;
  background: rgba(255, 255, 255, .95);
  padding: 15px 20px;
  border-bottom-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  width: 80%;
  height: 150px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.tags span {
  background: #F3F6F9;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1D2D42;
}

/* Custom Arrows */
.slider-nav {
  /* margin-top: -25px; */
  height: 100px;
  position: relative;
  /* display: flex; */
  /* justify-content: flex-end; */
}

.slider-btn {
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 15px;
  background: #1f2d3d;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  transition: .3s;
}

.slider-btn:hover {
  background: #2bb3a8;
}




.cta-btn {
  background: #2bb3a8;
  color: #fff;
  border-radius: 50px;
  padding: 15px 30px;
  text-decoration: none;
}

/* Cards */
.shadow-soft {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.company-section {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
  margin-top: 100px;
  margin-bottom: 100px;
}

/* Green background layer */
.company-bg-green {
  position: absolute;
  top: 0;
  right: 0;
  width: 110%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  margin-right: 136px;
  z-index: 1;
}
.company-section .container.position-relative {
  margin-top: -30px;
}

/* 手前の写真レイヤー（奥は .company-bg-green） */
.company-bg-image {
  position: absolute;
  top: 96px;
  right: 0;
  width: 100%;
  height: calc(100% - 96px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  margin-right: 67px;
  z-index: 2;
}

/* Content wrapper */
.company-content {
  position: relative;
  z-index: 3;
  color: white;
  max-width: 544px;
}

/* PCのみ: 先頭要素の margin-top が潰れないようにする（company-sub-title 等） */
@media (min-width: 769px) {
  .company-section {
    margin-bottom: 10px;
  }

  /* COMPANY 背景ブロックの縦幅（SP は下の max-width 内で従来どおり） */
  .company-section .company-bg-green {
    height: 650px;
  }

  .company-section .company-bg-image {
    height: calc(650px - 96px);
  }

  .company-content {
    max-width: 650px;
    padding-top: 24px;
    padding-left: 110px;
  }
  .company-content > div {
    display: flow-root;
  }
  .company-content .company-about-heading {
    margin-bottom: 1.25rem !important; /* mb-5(3rem) をこの見出しだけ縮小 */
  }
}
.company-title-wrap {
  position: relative;
  z-index: 3;
}




/* YouTube Section */
.youtube-section {
  position: relative;
  padding: 100px 0 120px;
  overflow: hidden;
  color: #fff;
  background: #1D2D42;
}
.youtube-section .overlay-text {
  font-family: "Chillax", sans-serif;
  position: absolute;
  left: 0;
  font-size: 150px;
  font-weight: bold;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 1ch;
  color: #304053;
  pointer-events: none;
  z-index: 2;
  will-change: transform;
  animation: scrollLeft 16s linear infinite;
}

/* MV と同じ: 本文 + data-text の複製で幅が2単位になり、-50% で継ぎ目なくループ */
.youtube-section .overlay-text::after {
  content: attr(data-text);
}

.youtube-section .section-sub-title {
  margin-top: -24px;
  margin-bottom: 20px;
}

.fw-small {
  letter-spacing: 2.24px;
  font-weight: bold;
}

.fw-bold {
  font-size: 36px;
  letter-spacing: 3.6px;
}

.youtube-content {
  position: relative;
  z-index: 2;
  padding: 0 68px;
}
.w-80 {
  max-width: 80%;
   margin: 0 auto;
}
.w-90 {
  max-width: 90%;
  margin: 0 auto;
}


/* 共通（PC/SP 共通） */
.youtube-card {
  background: #F0F4F8;
}

/* PC: 同一行のカードで外枠の高さを揃える（最も高いカードに合わせる） */
@media (min-width: 769px) {
  .youtube-section .row > [class*="col-"] {
    display: flex;
  }

  .youtube-section .youtube-card {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 48px;
    min-height: 0;
    aspect-ratio: unset;
  }

  .youtube-section .youtube-thumb {
    flex-shrink: 0;
  }

  .youtube-section .youtube-card p {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* YouTube カード: 要素ごとに角丸の位置（PC 80px） */
  .youtube-section .youtube-card--round-tl {
    border-top-left-radius: 80px;
  }
  .youtube-section .youtube-card--round-tr {
    border-top-right-radius: 80px;
  }
  .youtube-section .youtube-card--round-tltr {
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
  }
}

.youtube-thumb {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-bottom: 10px;
}

.youtube-thumb iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}
.youtube-card:hover .youtube-thumb iframe {
  transform: scale(1.1);
}

.youtube-card p {
  color: #2c2c2c;
  font-weight: bold;
  margin: 0;
  line-height: 25px; /* 行間はここ（旧 30px、約 3px 詰め） */
  font-size: 16px;
}

/* JS 未実行時: 行ごと clone 下線（フォールバック） */
.youtube-card__title {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: 4px;
  background-image: linear-gradient(to right, currentColor, currentColor);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.4s ease;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}

.youtube-card:hover .youtube-card__title {
  background-size: 100% 2px;
}

/* JS 分割後: 1行目→2行目→…と順に下線（--line で transition-delay） */
.youtube-card__lines {
  display: block;
}

.youtube-card__line {
  display: block;
  /* block のままだと親幅いっぱいになり、下線が「…」の先まで伸びる */
  width: fit-content;
  max-width: 100%;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  padding-bottom: 4px;
  box-sizing: border-box;
  background-image: linear-gradient(to right, currentColor, currentColor);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.35s ease;
  transition-delay: 0s;
}

.youtube-card:hover .youtube-card__line {
  background-size: 100% 2px;
  transition-delay: calc(var(--line, 0) * 0.12s);
}

.youtube-card:not(:hover) .youtube-card__line {
  background-size: 0% 2px;
  transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
  .youtube-card__title {
    transition: none;
  }

  .youtube-card__line {
    transition: none;
  }

  .youtube-card:hover .youtube-card__line {
    background-size: 100% 2px;
    transition-delay: 0s;
  }
}

/* CTA */
.youtube-cta {
  margin-top: 48px;
  text-align: center;
}

.youtube-btn {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}






.contact-card {
  background: #ffffff;
  border-radius: 25px;
  padding: 40px 30px;
  height: 100%;
  text-align: center;
}

.contact-icon {
  font-size: 40px;
  color: #243447;
  margin-bottom: 20px;
}



.contact-small {
  color: #959CA3;
}


.circle-btn {
  width: 55px;
  height: 55px;
  background: #1fb5a9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
}

hr {
  margin-top: 44px;
  opacity: 0.2;
  border-top: 2px solid;
}

.footer {
  background-color: #F0F4F8;
  padding: 60px 0 30px;
}

/* PC: 左カラムを col-lg-5（約41.7%）より広く（約45%） */
@media (min-width: 992px) {
  .footer .footer_part .footer-left.col-lg-5 {
    flex: 0 0 45%;
    width: 45%;
    max-width: 45%;
    margin-right: 30px;
  }
}

.footer-address{
  text-align: left;
  font-weight: bold;
  letter-spacing: 1.76px;
  margin-bottom: 0;
}
.footer-logo {
  max-width: 229px;
}

.footer a {
  text-decoration: none;
  color: #1D2D42;
  position: relative;
  text-decoration: none;
}

.footer .menu_footer a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: #1D2D42;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.footer .menu_footer a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.footer .menu_footer a:not(:hover)::after {
  transform: scaleX(0);
  transform-origin: right;
}

.footer-trademark {
  letter-spacing: -0.32px;
}

.menu_footer {
  font-weight: bold;
  letter-spacing: 2.24px;
  margin-top: 80px;
}

.social-icons {
  margin: 20px 0 40px 0;
}

.social-icons a {
  font-size: 22px;
  margin-right: 15px;
}

/* フッター: 上方向への移動をトランジションでなめらかに（リデュースドモーション時は無効） */
@media (prefers-reduced-motion: no-preference) {
  .page-top,
  .social-icons a img {
    transition: transform 0.28s ease;
  }

  .social-icons a:hover img,
  .page-top:hover {
    transform: translateY(-5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-top,
  .social-icons a img {
    transition: none;
  }

  .social-icons a:hover img,
  .page-top:hover {
    transform: none;
  }
}

.page-top {
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

.page-top i {
  margin-right: 5px;
}

.sp_strength01,
.sp_strength02 {
  display: none;
}

.p-heading {
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 16px;
  color: #1D2D42;
  line-height: 48px;
  letter-spacing: 3.64px;
}

.p-sub-title {
  font-size: 1rem;
  font-weight: bold;
  color: #1D2D42;
  letter-spacing: 1.4px;
}

.p-title {
  color: #2BB7B3;
  font-family: "Chillax", sans-serif;
  font-weight: 700;
  font-size: 50px;
  letter-spacing: 0px;
}

.flow-small {
  font-size: 14px !important;
  font-weight: bold;
  letter-spacing: 1.4px !important;
}

.section-title {
  font-family: 'Chillax', sans-serif !important;
  font-size: 100px !important;
  font-weight: 600 !important;
  letter-spacing: 0px !important;
  color: #1D2D42 !important;
  text-align: left;
}

.section-sub-title {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 2.24px;
  margin-top: 30px;
  margin-bottom: 50px;
  text-align: center;
}

/* PCのみ: section-sub-title の下余白を詰める */
@media (min-width: 769px) {
  .section-sub-title {
    margin-bottom: 15px;
  }
}

.contact-desc {
  text-align: center;
}

.section-sub-title::before, .feature-label::before {
  content: "";
  margin-bottom: 4px;
  display: inline-block;
  width: 14px;   /* adjust to match your image size */
  height: 14px;
  vertical-align: middle;
  margin-right: 6px;
  background-image: url("images/plus.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}
.plus-white::before {
  background-image: url("images/plus-white.png");
}
.green-color {
  color: #2BB7B3 !important;
}

.white-color {
  color: #ffffff !important;
}

.p-small-title {
  font-size: 15.5px;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.p-medium-title {
  font-size: 26px;
  line-height: 48px;
  font-weight: bold;
  letter-spacing: 5.2px;
}

.contact-phone {
  font-size: 40px;
  line-height: 22px;
  font-weight: bold;
  letter-spacing: 0.8px;
  margin-top: 16px;
  margin-bottom: 0px;
}

/* contact_button.php（PCカード）: 電話番号の上余白だけ小さく */
@media (min-width: 769px) {
  a.contact-phone.contact-phone-pc {
    display: inline-block;
    margin-top: 10px;
  }
}

a.contact-phone {
  text-decoration: none;
  color: inherit;
}

.contact-time {
  font-size: 16px;
  line-height: 24px;
  color: #959CA3;
  letter-spacing: 1.6px;
}

.strengths-div {
  margin-top: 215px;
}

.contact-section {
  background: #F0F4F8;
  overflow: hidden;
}
.contact-section .section-sub-title {
  margin-top: 36px;
  margin-bottom: 39px;
}

/* Contact 英字タイトル（contact_button.php）— PC/SP で上マージン分割 */
.section-title.contact-main-title {
  margin-top: 100px;
  text-align: center !important;
}

.front-page-section-title {
  font-size: 180px !important;
}
.front-page-section-title {
  margin-left: 0;
}
@media (min-width: 769px) {
  .front-page-section-title {
    margin-left: 25px;
  }
}
.service-section .front-page-section-title {
  margin-top: 50px;
}

.company-sub-title {
  text-align: left !important;
  margin-top: 50px;
}
.contact-detail-text {
  text-align: left;
}
.text-inline {
  display: inline-block !important;
}
.page-top-icon {
  rotate: 180deg;
  height: 11px;
  margin-bottom: 3px;
  margin-right: 3px;
}
.star {
  color: #2BB7B3;
}
/* SP: TOP以外はデフォルトで白背景 20%（透過） */
body:not(.home):not(.front-page) .navbar {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
@media (max-width: 1200px) {
  .service-card .card-body {
    padding: 20px 0px 27px 20px;
  }
  .service-card-p {
    margin-bottom: 0;
  }
  .service-card .card-body2 {
    padding: 0px 0px 20px 20px;
    margin-top: 0px;
  }
  .service-card-p-heading {
    margin-bottom: 20px;
  }
}
@media (max-width: 768px) {
.only-pc {
  display: none !important;
}
.only-sp {
  display: block !important;
}

  /* SP: パンくずがスクロール追従しないようにする（fixed を使わない） */
  .company-hero .breadcrumb-small,
  .contact-head .breadcrumb-small,
  .doctor-hero .breadcrumb-small {
    position: static;
    top: auto;
    right: auto;
    margin: 0;
    z-index: auto;
  }

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .contact-title,
  .company-title,
  .solution-title,
  .bg-strengths {
    font-size: 70px;
  }
  .section-title {
    text-align: center;
  }
  body p {
    font-size: 12px !important;
    letter-spacing: 0.6px !important;
    line-height: 24px !important;
    color: #1D2D42;
  }

  .p-heading {
    font-weight: 700;
    letter-spacing: 2.52px;
    font-size: 18px;
    margin-bottom: 16px;
    line-height: 32px;
  }

  .qol-nav-heading {
    font-size: 18px;
  }

  .strength-item p {
    padding-top: 16px;
  }

  .p-title {
    font-size: 32px;
    letter-spacing: 0.64px;
  }

  .p-small-title {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1.4px;
  }

  .contact-phone {
    font-size: 22px;
    line-height: 36px;
    font-weight: bold;
    letter-spacing: 2.2px;
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .contact-time {
    font-size: 9px;
    line-height: 15px;
    font-weight: bold;
    letter-spacing: 0.45px;
  }

  .p-medium-title {
    font-size: 16px;
    line-height: 32px;
    font-weight: bold;
    letter-spacing: 1.6px;
    margin-top:40px;
  }

  .section-title {
    font-size: 70px !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

  .section-sub-title {
    margin-top: 20px;
    font-size: 12px;
    text-align: center;
  }
  .service-content .section-sub-title {
    margin-top: 20px;
    margin-bottom: 0px;
  }
  .company-content .section-sub-title {
    margin-bottom: 20px;
  }
.service-top-heading-desc {
  padding: 0;
}
.service-btn {
  margin-top: 0px;
  margin-bottom: 10px;
}
.service-section {
  padding-bottom: 130px;
}
.cm-circle {
  height: 100%;
}

.cm-circle__body {
  width: 230% !important;
  height: 100%;
}

  .contact-desc {
    text-align: left;
  }
  .service-heading {
    margin-left: 0px;
    margin-bottom: -2px;
    float: left;
    line-height: 1.8;
    font-size:18px !important;
  }
  .service-top-heading {
  margin-top: 16px;
  margin-bottom: 24px !important;
}
  .flow-small {
    font-size: 10px !important;
    font-weight: bold;
    letter-spacing: 1px !important;
  }

  .front-page-section-title {
    font-size: 70px !important;
    margin-left: -11px;
  }
  .service-section .front-page-section-title {
    margin-top: 0px;
  }
  .service-card {
    border-radius: 23px;
  }
  .service-img-wrap img {
    width: 100%;
    height: auto;
  }
  .solution-section .front-page-section-title {
    text-align: left;
  }
  /* Position tuned for 40px-wide buttons (was 60px; same right + narrower width shifts group right) */
  .solution-section .swiper-button-next {
    right: calc(50% - 50px);
  }
  .solution-section .swiper-button-prev {
    right: calc(50% + 10px);
  }
  .bg-strengths {
    position: absolute;
    top: -70px;
    left: 10px;
  }
.footer-address{
  text-align: left;
  font-weight: normal;
  letter-spacing: 1.32px;
}
  .sp_strength01,
  .sp_strength02 {
    display: block;
  }

  .solution-section::before {
    width: 100%;
    border-radius: 40px 0 0 0;
    margin-top: -22px;
  }
  .sp_strength01 {
    height: 300px;
  }

  .carousel-inner {
    height: 480px;
  }

  .mv-overlay-text {
    font-size: 60px;
  }

  .hero-content {
    top: 170px;
    padding: 0.6rem;
  }
  .hero-content p {
    font-weight: normal;
  }
.carousel-indicators-wrap{
  display: none;
}
  .hero-desc {
    max-width: 143px;
  }

  .strengths-div {
    margin-top: 100px;
  }

  .strengths-section {
    padding-top: 30px;
    margin-top: 30px;
  }

  .company-section {
    margin-top: 0px;
    margin-bottom: 40px;
    padding-bottom: 50px;
    padding-top: 88px;
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
    overflow: hidden;
  }

  .tags span {
    white-space: nowrap;
    background: #eef1f6;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #2e3a4a;
    letter-spacing: 0.3px;
  }

  .carousel-item {
    height: auto;
    min-height: 494px;
    /* Important */
    background-size: 100% auto;
    /* Fit to width */
    background-position: top center;
    background-repeat: no-repeat;
  }

  .solution-card {
    position: relative;
    bottom: 0;
    width: 100%;
    margin-top: -60px;
  }
.sp-w-95 {
  max-width: 95%;
  margin: 0 auto;
}
.sp-w-100 {
  max-width: 100%;
}
.sp-w-90 {
  max-width: 90%;
  margin: 0 auto;
}
  .solution-label {
    bottom: 30px;
    left: 100px !important;
  }

  .swiper {
    width: 100%;
  }

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

  .slide-card {
    width: 100%;
    padding: 0;
  }

  .slide-card img,
  .solution-image img {
    width: 100%;
    height: auto;
    display: block;
  }
  .swiper-slide-active .slide-card img {
      height: auto !important;
  }
  .solution-section .swiper {
    margin: 0 auto !important;
  }
  .solution-section .swiper-wrapper {
    margin: 20px auto;
  }
  .solution-section .slide-card {
    max-width: 95%;
    margin: 0 auto;
  }
  .service-btn-circle.common-btn-circle {
    width: 60px;
    height: 60px;
  }
  .tags span {
    padding: 0px;
  }

  .slider-nav {
    margin-top: 100px;
    justify-content: center;
  }
  .solution-section .slider-nav {
    margin-top: 64px;
  }

  .company-section .company-bg-green {
    margin-right: 19px;
    top: 20px;
    height: calc(100% - 20px);
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
  }
  .company-section .company-bg-image {
    margin-right: 0px;
    top: 80px;
    height: calc(100% - 80px);
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
  }

  .company-section .company-btn.common-btn {
    margin-top: 0px;
  }

  .company-content .company-about-heading {
    font-size: 18px !important;
  }

  .youtube-section {
    padding-bottom: 48px;
  }
  .youtube-section .overlay-text {
    font-size: 60px;
    top: 40px;
  }

  /* SP: コンパクト余白・縦はコンテンツ任せ。角丸の位置は PC と同じ、サイズのみ 40px */
  .youtube-section .youtube-card {
    padding: 24px;
    aspect-ratio: auto;
    padding-top: 30px;
    overflow: hidden;
  }
  .youtube-section .youtube-card--round-tl {
    border-top-left-radius: 40px !important;
  }
  .youtube-section .youtube-card--round-tr {
    border-top-right-radius: 40px !important;
  }
  .youtube-section .youtube-card--round-tltr {
    border-top-left-radius: 40px !important;
    border-top-right-radius: 40px !important;
  }

  .contact-section {
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  .contact-section .section-sub-title {
    margin-top: 20px;
    margin-bottom: 15px;
  }

  .section-title.contact-main-title {
    margin-top: 80px;
  }

  .contact-hr {
    margin-top: 25px;
    margin-bottom: 0px;
  }

  .contact-title {
    font-size: 70px;
    line-height: 1.1;
  }


  .contact-cards {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .contact-card.horizontal {
    background: #ffffff;
    border-radius: 20px;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left:15px;
    padding-right:15px;
  }

  a.contact-card.horizontal.contact-card-line-link,
  a.contact-card.horizontal.contact-card-tel-link,
  a.contact-card.horizontal.contact-card-mail-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }

  .card-left {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .card-left img {
    width: 35px;
  }


  .contact-small {
    font-size: 12px;
    color: #7b8794;
  }

  .circle-btn {
    width: 60px;
    height: 60px;
    background: #1fb5a9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
    transform: translateX(1px);
  }
  .common-btn-circle {
    width: 60px !important;
    height: 60px !important;
  }

  /* Footer Mobile */

  .footer {
    text-align: center;
    padding: 0px 20px;
    background: #eef2f5;
  }

  .footer_part::before,
  .footer_part::after {
    content: "";
    display: block;
    height: 1px;
    background: #ffffff;
    margin-bottom: 20px;
  }

  .footer .row {
    flex-direction: column;
  }

  .footer-logo {
    display: block;
    margin: 0 auto 20px;
    width: 150px;
  }

  .social-icons {
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }

  .footer .d-flex {
    flex-direction: column;
    order: -1;
    justify-content: center !important;
    gap: 15px;
  }
  .footer .d-flex.justify-content-between.align-items-center.pt-3 {
    padding-top: 0px !important;
    padding-bottom: 1rem !important;
  }

  .page-top {
    display: block;
    padding-top: 15px;
    margin-bottom: 15px;
  }

  .footer .small {
    text-align: center;
    margin-top: 20px;
  }

  .menu_footer {
    display: none;
  }

  body.is-nav-open {
    overflow: hidden;
  }

  .navbar {
    position: fixed;
    top: 0;
    /* background: transparent; */
    width: 100%;
    left: 0;
    transform: none;
    padding: 15px 0;
    /* backdrop-filter: none;
    -webkit-backdrop-filter: none; */
    z-index: 10000;
  }

  /* SP: スクロール後の状態だけ背景を乗せる */
  .navbar.is-after-mv {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .navbar .navbar-container {
    /* padding-left: var(--bs-gutter-x, 0.75rem);
    padding-right: var(--bs-gutter-x, 0.75rem); */
    width: 100%;
    max-width: 100%;
    padding: 0 1rem;
  }

  .navbar-brand {
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Group mail icon + toggler on the right */
  .navbar-right-icons {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    /* z-index: 10000; */
  }

  .mail-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
    /* removes inline spacing gap */
  }

  .navbar-nav {
    align-items: flex-start !important;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    gap: 0px;
  }

  .nav-item {
    width: 100%;
    border-bottom: 1px solid #484b4f;
    padding: 0px 0;
  }

  .navbar-nav .nav-item:last-child {
    border-bottom: none;
  }

  .navbar-nav .nav-link {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    height:65px;
  }

  .navbar-toggler {
    border: none;
    background: #1d2d42;
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    width: 40px;
    height: 40px;
    min-width: 40px;
    /* prevents shrinking */
    min-height: 40px;
    /* prevents shrinking */
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    /* prevents flex layout shift */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
  }

  .navbar-toggler:focus {
    box-shadow: none;
    outline: none;
  }

  .navbar-toggler:focus-visible {
    outline: 2px solid #2bb7b3;
    outline-offset: 2px;
  }

  .navbar-toggler .navbar-toggler-icon {
    display: none;
  }

  /* 3本線 → ✗（背景画像の切替ではトランジション不可のため描画でアニメ） */
  .navbar-toggler-bars {
    position: relative;
    width: 22px;
    height: 16px;
    display: block;
    flex-shrink: 0;
  }

  .navbar-toggler-bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background-color: currentColor;
    transition: transform 0.3s ease, opacity 0.25s ease, top 0.3s ease;
  }

  .navbar-toggler-bar:nth-child(1) {
    top: 0;
  }

  .navbar-toggler-bar:nth-child(2) {
    top: 7px;
  }

  .navbar-toggler-bar:nth-child(3) {
    top: 14px;
  }

  .navbar-toggler[aria-expanded="true"] .navbar-toggler-bar:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
  }

  .navbar-toggler[aria-expanded="true"] .navbar-toggler-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .navbar-toggler[aria-expanded="true"] .navbar-toggler-bar:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .navbar-toggler-bar {
      transition-duration: 0.01ms;
    }
  }

  .navbar-brand img {
    max-width: 167px;
    /* adjust to fit your logo size */
    height: auto;
  }

  .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0px 0 16px 0;
    margin-bottom: 8px;
  }

  .mobile-menu-header .navbar-brand {
    margin-right: 0;
  }

  .mobile-menu-header .mail-icon,
  .mobile-menu-header .navbar-toggler {
    position: relative;
    z-index: 10001;
  }

  .navbar-collapse {
    position: fixed;
    top: 0;
    /* starts from very top */
    left: 0;
    right: 0;
    inset: 0; 
    width: 100vw;
    height: auto;
    max-height: none;
    background: #ffffff;
    padding: 15px 1rem;
    z-index: 10001;
    overflow-y: auto;
    transition: 0.3s ease;
    box-sizing: border-box;
  }

  /* SPメニューは開いた後だけ全画面（アニメーションは Bootstrap に任せる） */
  .navbar-collapse.show {
    height: 100dvh;
    max-height: 100dvh;
  }

  /* SP: メニューが閉じてる時に背面の操作/スクロールを邪魔しない */
  .navbar-collapse:not(.show) {
    pointer-events: none;
  }
  .navbar-collapse.show {
    pointer-events: auto;
  }

  .mobile-contact {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .menu_text_link {
    margin-top: 20px;
  }

  /* SP メニュー内テキストのみ行間（body p の !important を上書き） */
  .menu_text_link p {
    line-height: 10px !important;
  }

  .menu_text_link a {
    text-decoration: none;
    color: black;
  }

  .menu-circle-btn {
    width: 30px;
    height: 30px;
    background: #1fb5a9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
    flex-shrink: 0;
    font-weight: bold;
  }

  .menu-circle-btn .menu-nav-arrow {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .mobile-btn {
    display: flex;
    float: left;
    width: 90%;
    padding: 7px;
    border-radius: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    padding-left: 25px;
    margin-left: auto;
    margin-right: auto;
    padding-right: 20px;
  }
  .mobile-btn > img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    margin-top: 6px;
  }

  .mobile-btn-arrow {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .mobile-btn-arrow-img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    display: block;
  }
  .mobile-btn.phone {
    background: #1D2D42;
  }

  .mobile-btn.line {
    background: #07C755;
  }

  .mobile-btn.mail {
    background: #2BB7B3;
  }

  .mobile-social {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    padding-bottom: 10px;
  }

  .mobile-social-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
  }

  .mobile-social img {
    width: 28px;
  }

  .solution-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    color: #000;
    text-decoration: none;
    font-weight: 500;
    float: right;
    margin-top: 20px;
  }

  .solution-btn-text {
    border-bottom: 2px solid #000000;
    /* change color */
    padding-bottom: 4px;
    font-size:12px;
  }
  
}