@charset "UTF-8";
/* CSS Document */
html {
  font-size: 100%;
  overflow-x: hidden;
  scroll-behavior:smooth;
}
*, *::before, *::after {
  box-sizing: border-box;
}
:root {
  --fs-text: clamp(1rem, 0.952rem + 0.19vw, 1.125rem); /* 16~18px */
  --fs-h2: clamp(1.25rem, 1.01rem + 0.96vw, 1.875rem); /* 20~30px */
  --fs-20: clamp(1.125rem, 1.077rem + 0.19vw, 1.25rem);/* 18~20px */
  --fs-24: clamp(1.25rem, 1.154rem + 0.38vw, 1.5rem); /* 20~24px */
}
:root {
  interpolate-size: allow-keywords;
}
body {
  margin: 0;
  font-weight: 500;
  font-size: var(--fs-text);
  font-family: "Zen Maru Gothic", sans-serif;
  color: #4C4D4C;
  background-color: #fff;
  line-height: 1.6;
  overflow-x: hidden;
}
:target {
  scroll-margin-top: clamp(0px, 10vw, 100px) !important; 
}
ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.section_header{
  text-align: center;
  max-width: 90%;
  margin-inline: auto;
}
.main_title{
  font-size: var(--fs-h2);
  line-height: 1;
  color: #fff;
  background-color: #4ABBC6;
  width: fit-content;
  padding: 8px 1.2rem;
  border-radius: 5px;
  margin-inline: auto;
}
.en_title{
  font-size: clamp(2.5rem, 2.139rem + 1.44vw, 3.438rem);
  line-height: 1;
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.1em;
  -webkit-text-stroke: 6px #4ABBC6;
  paint-order: stroke fill;
  margin-bottom: 2px;
}
.title-mask-wrap {
  overflow: hidden;
  padding-bottom: 5px;
  margin-bottom: 30px;
}
.fade_up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade_up.show {
  opacity: 1;
  transform: translateY(0);
}
.delay-1 { transition-delay: 0.15s; } 
.delay-2 { transition-delay: 0.3s; } 
.delay-3 { transition-delay: 0.45s; }
.delay-4 { transition-delay: 0.5s; }
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(100%); 
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.cl_orange {
  color: #F77B3D;
}
.cl_cyan{
  color: #4ABBC6;
  font-weight: 600;
}
.cl_pink{
  color: #F33E6C;
}
.no-warap{
  white-space: nowrap;
}
/*header*/
.main_header{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10;
}
.header_inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header_logo-area{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.header_logo{
  width: clamp(173px,37vw,360px);
  height: auto;
}
.header_logo img{
  width: 100%;
  height: auto;
}
h1{
  font-size: clamp(0.75rem, 0.618rem + 0.56vw, 1.125rem);
  font-weight: 400;
  margin: 0;
}
h1 span{
  white-space: nowrap;
}
.hamburger_btn,.header_nav{
  display: none;
}
/*追従nav_pc*/
.header_pc_nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  z-index: 10000;
  box-shadow: 0 4px 15px rgba(74, 187, 198, 0.06);
  transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.header_pc_nav.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none; 
}
.pc_nav_list {
  display: flex;
  align-items: center;
  justify-content: space-between; 
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px; 
}
.pc_nav_item {
  position: relative; 
  padding: 14px clamp(8px, 1.2vw, 20px);
}
.pc_nav_item > a,
.pc_nav_parent_title {
  text-decoration: none;
  color: #4C4D4C;
  font-weight: 700;
  font-size: clamp(0.875rem, 0.625rem + 0.42vw, 1rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  white-space: nowrap; 
  transition: color 0.3s;
  cursor: default;
}
.pc_nav_item > a {
  cursor: pointer;
}
.pc_nav_item:hover > a,.pc_nav_item:hover .pc_nav_parent_title {
  color: #4ABBC6; 
}
.nav_icon {
  display: block;
  width: 42px; 
  height: 28px;
  transition: transform 0.3s ease; 
}
.nav_icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pc_nav_item:hover .nav_icon {
  transform: translateY(-2px);
}
.pc_sub_list {
  position: absolute;
  top: 100%; 
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 240px; 
  background-color: #ffffff;
  border-radius: 8px; 
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); 
  list-style: none;
  padding: 10px 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; 
}
.pc_nav_item:hover .pc_sub_list {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0); 
}
.pc_nav_item:hover > a {
  color: #4ABBC6;
}
.pc_sub_list li {
  width: 100%;
}
.pc_sub_list li a {
  display: block;
  padding: 12px 20px;
  text-decoration: none;
  color: #555555;
  font-weight: 500;
  font-size: 0.9rem;
  text-align: left;
  transition: background-color 0.2s, color 0.2s;
}
.pc_sub_list li a:hover {
  background-color: #f7fcfd; 
  color: #4ABBC6; 
}
/*追従btn*/
/*追従ボタンpc*/
.fixed_footer_cta{
  display: none;
}
.fixed_btn_tel {
  pointer-events: none;
  cursor: default;
  }
.pc_fixed_cta {
  position: fixed;
  right: 0; 
  top: 48%; 
  z-index: 9999; 
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0.4s ease;
  transform: translateY(-50%) translateX(0);
  opacity: 1;
  visibility: visible;
}
.pc_fixed_cta.is-hidden {
  transform: translateY(-50%) translateX(100%); 
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.pc_cta_btn_vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: clamp(70px,9vw,90px); 
  height: clamp(220px,25vw,250px); 
  padding: 26px 0;
  box-sizing: border-box;
  background-color: #FA8132; 
  text-decoration: none;
  border-radius: 25px 0 0 25px; 
  box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.pc_cta_btn_vertical:hover {
  transform: translateX(-8px); 
  box-shadow: -8px 8px 20px rgba(250, 129, 50, 0.4); 
}
.pc_cta-line{
  background-color: #5FC367;
  margin-top: 6px;
  padding: 20px 0;
}
.pc_cta-line:hover {
  transform: translateX(-8px); 
  box-shadow: -8px 8px 20px rgba(64, 182, 74, 0.4); 
}
.cta_v_icon {
  font-size: 28px; 
  line-height: 1;
  display: block;
  color: #ffffff;
}
.cta_v_txt {
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(0.938rem, 0.891rem + 0.13vw, 1rem); 
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-align: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
.v_txt-line{
  letter-spacing: 0;
}
.cta_v_arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #ffffff;
  border-radius: 50%;
  color: #FA8132; 
  font-size: 12px;
  text-indent: 1px; 
}
.cta_arrow_line{
  color: #5FC367;
}
@media(max-width:960px){
  .header_pc_nav {
    display: none;
  }
/* ハンバーガー */
  .hamburger_btn {
    position: fixed;
    top: 15px;  
    right: 20px;
    width: 52px;
    height: 52px;
    background-color: #4ABBC6; 
    border: none;
    border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px; 
    transition: background-color 0.3s, border-radius 0.3s, transform 0.3s;
    z-index: 1000; 
    flex-shrink: 0; 
  }
  .hamburger_btn span {
    display: block;
    width: 20px;
    height: 2px;
    background-color: #ffffff; 
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s; 
  }
  .hamburger_btn.is-open {
    transform: rotate(0deg);
  }
  .hamburger_btn.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .hamburger_btn.is-open span:nth-child(2) {
    opacity: 0; /* 真ん中の線を消す */
  }
  .hamburger_btn.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
/* ハンバーガーメニュー */
  .header_nav {
    display: none; 
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    z-index: 999;
    padding: 90px 120px 60px 50px;
    overflow-y: auto;
  }
  .header_nav.is-open {
    display: block;
  }
  .nav_menu_logo_area {
    width: clamp(160px, 35vw, 240px); 
    height: auto;
    margin-bottom: 30px; 
  }
  .nav_menu_logo_area img {
    width: 100%;
    display: block;
  }
  .nav_title_direct {
    font-size: 1.05rem;
    font-weight: 700;
    padding-bottom: 12px;
    border-bottom: 1px solid #4ABBC6; 
    position: relative; 
  }
  .nav_title_direct a {
    text-decoration: none;
    color: #4C4D4C;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .nav_title_direct a:active {
    color: #4ABBC6;
  }
  .nav_item {
    margin-bottom: 25px;
  }
  .nav_title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #4C4D4C;
    padding-bottom: 12px;
    border-bottom: 1px solid #4ABBC6;
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap:10px;
    padding-right: 30px;
  }
  .nav_title::before,
  .nav_title::after {
    content: "";
    position: absolute;
    right: 5px;
    top: calc(50% - 6px); 
    background-color: #4ABBC6; 
    transition: transform 0.3s ease, background-color 0.3s ease; 
  }
  .nav_title::before {
    width: 14px;
    height: 2px;
    transform: rotate(0deg);
  }
  .nav_title::after {
    width: 2px;
    height: 14px;
    right: 11px; 
    top: calc(50% - 12px);
    transform: rotate(0deg);
  }
  .nav_title.active::before {
    transform: rotate(180deg);
  }
  .nav_title.active::after {
    transform: rotate(90deg);
    opacity: 0;
  }
  .sp_nav_icon {
    display: block;
    width: 30px;
    height: 24px;
    flex-shrink: 0;
  }
  .sp_nav_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    display: block;
  }
  .nav_sub_list {
    display: none; 
    list-style: none;
    padding: 5px 0 0 10px; 
    margin: 0;
  }
  .nav_sub_list li a {
    display: block;
    padding: 14px 0;
    font-size: 0.95rem;
    color: #555555;
    text-decoration: none;
  }
}
@media (max-width: 600px){
  .header_nav{
      padding: 90px 24px 60px;
    }
  .pc_fixed_cta{
    display: none; 
    }
/* sp_追従btn */
  .fixed_footer_cta {
    display: flex ;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px; 
    z-index: 99999; 
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.08);
    opacity: 1;
    visibility: visible;
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s, visibility 0.45s ;
    }
  .fixed_footer_cta.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(100px); 
}
  .fixed_cta_btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    gap: 4px;
  }
  .fixed_btn_tel  { 
    width: 40%;
    pointer-events: auto !important; 
    cursor: pointer; 
    }
  .fixed_btn_web  {
    width: 30%; 
    }
  .fixed_btn_line {
    width: 30%; 
    }
  .fixed_footer_cta .fixed_cta_txt,.fixed_btn_tel .fixed_cta_txt {
    font-weight: 700;
    white-space: nowrap; 
    font-size: clamp(0.75rem, 3vw, 0.85rem); 
  }
  .fixed_btn_tel {
    background-color: #ffffff;
    color: #4ABBC6; 
    border-top: 2px solid #4ABBC6;
    border-bottom: 2px solid #4ABBC6;
  }
  .fixed_btn_web {
    background-color: #FA8132;
    color: #ffffff;
  }
  .fixed_btn_line {
    background-color: #58C55A;
    color: #ffffff;
  }
   .fixed_cta_img_wrap {
    display: block;
    width: 22px;  
    height: 22px; 
  }
  .fixed_cta_img_wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
/*mv*/
.mv{
  background-image: url("../images/mv_bg.webp");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.mv_deco{
  background-image: url("../images/mv_deco1.svg"),url("../images/mv_deco2.svg"),url("../images/mv_deco3.svg");
  background-position: 0% 0%,100% -5%,100% 110%;
  background-repeat: no-repeat,no-repeat,no-repeat;
  background-size: 30%,28%,20%;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}
.mv_wave_cover {
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 100%; 
  height: 100%;
  background-image: url("../images/mv_bottom_line.svg");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  z-index: 3; 
  pointer-events: none;
}
.mv_inner {
  max-width: 1400px;
  margin-inline: auto; 
  width: 95%;
  position: relative; 
  padding-bottom: 3%;
}
.mv_person{
  position: absolute;
  right: 0;
  top: 125px;
  width: min(64%,720px);
  height: auto;
  object-fit: contain;
  z-index: 2;
}
.hero{
  padding-top: 13rem;
  width: 100%;
  margin-bottom: 5rem;
  position: relative;
  z-index: 4;
}
.hero h2{
  font-size: clamp(1.75rem, 1.317rem + 1.73vw, 2.875rem);
  font-weight: 700;
  color: #69410D;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff;
}
.hero .size{
  font-size: clamp(2.25rem, 1.24rem + 4.04vw, 4.875rem);
  line-height: 1.2;
}
/*badge*/
.badge {
  display: flex;
  gap: 15px;
  width: 100%;
  margin-bottom: 9.5rem;
  position: relative;
  z-index: 4;
}
.badge_item {
  width: clamp(145px,16vw,160px);
  height: clamp(145px,16vw,160px);
  display: flex;
  flex-direction: column;   
  align-items: center;      
  justify-content: space-between; 
  text-align: center;
  color: #fff;
  font-weight: bold;
  padding: 15px 10px;       
  box-sizing: border-box;
}
.badge_item.cyan{
  background-color: #59b3c5; 
  border-radius: 47% 53% 63% 57% / 58% 55% 47% 54%; 
}
.badge_item.pink{ 
  background-color: #e96d87; 
  border-radius: 46% 44% 59% 46% / 45% 45% 49% 60%;
}
.badge_item.purple{ 
  background-color: #a47ca4;
  border-radius: 45% 53% 39% 40% / 45% 45% 45% 45%;
}
.badge_top_text {
  font-size: clamp(0.688rem, 0.591rem + 0.38vw, 0.938rem);
  line-height: 1.2;
  margin: 0;
  width: 100%;
}
.badge_inline_icon {
  width: clamp(20px,3vw,30px);
  height: auto;
  margin: 4px 0;
}
.badge_bottom_text {
  font-size: clamp(0.813rem, 0.692rem + 0.48vw, 1.125rem);
  line-height: 1.3;
}
.cv_btn {
  position: absolute;
  right: 0; 
  bottom: 22%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F77B3D;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  width: 360px;
  height: 70px;
  padding: 0 30px;
  border-radius: 35px;
  box-sizing: border-box;
  box-shadow: 0 4px 15px rgba(242, 116, 53, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: 4; 
}
.cv_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(242, 116, 53, 0.5);
}
.cv_icon { 
  width: clamp(31px,4.6vw,46px); 
  height: auto; 
}
.cv_text { 
  flex-grow: 1; 
  text-align: center; 
  font-size: clamp(1.125rem, 0.981rem + 0.58vw, 1.5rem); 
}
.cv_arrow {
  width: 0;
  height: 0;
  border-style: solid; 
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent #ffffff;
}
@media(max-width:960px){
  .mv_inner{
    padding-bottom: 6%;
  }
  .mv_person{
    width: min(85%,610px);
    top: 251px;
    margin-inline: auto;
  }
  .hero{
    padding-top: 17%;
    margin-bottom: 18rem;
  }
  .hero h2{
    font-size: clamp(2rem, 1rem + 4vw, 2.5rem);
    text-align: center;
    line-height: 1.4;
  }
  .badge{
    justify-content: center;
    margin-bottom: 50px;
  }
  .cv_btn{
    bottom: 0;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: min(90%,400px);
  }
}
@media(max-width:600px){
  .mv_person{
    width: min(100%,500px);
    right: -10%;
    top: clamp(251px, calc(308.86px - 14.64vw), 278px);
  }
  .mv_inner{
    padding-bottom: 5%;
  }
  .hero{
    padding-top: 120px;
    margin-bottom: 65%;
  }
  .badge{
    gap: 1%;
    margin-bottom: 0;
  }
  .badge_item{
    width: clamp(125px,24.166vw,145px);
    height: clamp(125px,24.166vw,145px);
    padding: 17px 9px 16px;
    justify-content: center;
  }
  .badge_center_icon{
    height: 36%;
    width: auto;
  }
  .pink .badge_center_icon{
    width: 32%;
  }
  .cv_btn{
    display: none;
  }
}
/*trouble_list*/
.trouble{
  background-color: #F6F1EA;
  padding-bottom: 5%;
}
.trouble_deco{
  background-image: url("../images/trouble_deco1.svg"),url("../images/trouble_deco2.svg"),url("../images/trouble_deco3.svg"),url("../images/trouble_deco4.svg"),url("../images/trouble_deco5.svg");
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  background-size: 25%,30%,35%,22%,18%;
  background-position: 0 0,0 29%,100% 45%,0% 74%,100% 88%;
  width: 100%;
  height: 100%;
}
.trouble_inner{
  width: min(90%,1040px);
  margin-inline: auto;
  position: relative;
}
.hero_text{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
  margin-bottom: 80px;
  border-bottom: 5px solid #ff6b8b;;
}
.hero_text-illust{
  width: clamp(90px,12vw,120px);
  height: auto;
  flex-shrink: 0;
}
.hero_text-illust img{
  width: 100%;
  height: auto;
}
.hero_text .sub_text{
  font-size: clamp(1.125rem, 0.949rem + 0.75vw, 1.625rem);
  font-weight: 700;
  color: #69410D;
  text-align: left;
  margin-bottom: 0;
  line-height: 1.8;
}
.sub_text{
  margin-bottom: 50px;
  text-align: left;
}
.trouble .section_header{
  margin-bottom: 65px;
}
.trouble_list-warap{
  position: relative;
  width: 100%;
}
.trouble_illust{
  position: absolute;
  width: min(18%,195px);
  height: auto;
  object-fit: contain;
  right: 0;
  bottom: 80%;
  transform: translateZ(-1px);
}
.trouble_list::after{
  content: "";
  position: absolute;
  border: solid 1px #4ABBC6;
  border-radius: 3px;
  inset: 10px;
}
.trouble_list {
  display: flex;
  flex-wrap: wrap;       
  justify-content: space-between;
  background-color: #fff;
  border: solid 3px #4ABBC6;
  border-radius: 5px;
  margin-bottom: 60px;
  gap: 20px 4%;   
  padding: 50px;
  transform-style: preserve-3d;
}
.trouble_list li {
  width: 48%; 
  list-style: none;
  display: flex;
  align-items: flex-start;
  font-size: clamp(1rem, 0.904rem + 0.38vw, 1.25rem);
  background-image: radial-gradient(#4ABBC6 30%, transparent 35%); 
  background-repeat: repeat-x;        
  background-position: left bottom;  
  background-size: 5px 5px; 
  padding-bottom: 20px; 
}
.trouble_list li:nth-last-child(-n+2) {
  background-image: none; 
  padding-bottom: 0;
}
.trouble_list li::before{
  content: "";
  width: clamp(16px,2.5vw,25px);
  height: clamp(16px,2.5vw,25px);
  background-image: url("../images/trouble_check-mark.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0; 
  margin-top: 4px;
  margin-right: 10px;
}
.trouble_list li span{
  line-height: 1.5;
}
.trouble_list-illust{
  position: absolute;
  width: min(40%,230px);
  height: auto;
  right: 5%;
  bottom: 10px;
}
.trouble_lead{
  font-size: clamp(1.125rem, 0.933rem + 0.77vw, 1.625rem);
  text-align: center;
  margin-bottom: 100px;
}
.highlight{
  background: linear-gradient(transparent 60%, rgba(74,187,198,0.4) 60%);
}
/*アニメーション*/
.trouble_list-warap .trouble_illust{
  opacity: 0;
  transform: translateZ(-1px) translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.trouble_list-warap .trouble_illust.show{
  opacity: 1;
  transform: translateZ(-1px) translateY(0);
  transition-delay: 0.4s; 
}
/* board*/
.board_inner{
  width: min(95%,1200px);
  margin-inline: auto;
  margin-bottom: 150px;
}
.message_board{
  position: relative;
  background-image: url("../images/board_bg_pc.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
  margin-inline: auto;
}
.board_label {
  position: absolute;
  top: 0;         
  left: 6%;      
  color: #fff;
  font-weight: 700;
  font-size:clamp(1.125rem, 0.949rem + 0.75vw, 1.625rem);
  text-align: center;
  width: clamp(230px, 25vw, 270px); 
  aspect-ratio: 1.5 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-10deg);
  z-index: 0;
}
.board_label::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/board_ttl_bg.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  z-index: -1;
}
.board_content {
  padding: 140px 0 120px;
  text-align: center;
  font-weight: 700;
}
.board_sub_text{
  font-size: clamp(1rem, 0.856rem + 0.58vw, 1.375rem);
}
.board_main_title{
  font-size: clamp(1.125rem, 0.817rem + 1.31vw, 2rem);
  margin-bottom: 40px;
}
.board_main-size{
  font-size: clamp(1.125rem, 0.685rem + 1.88vw, 2.375rem);
}
.board_main_title .size{
  font-size: clamp(1.5rem, 0.928rem + 2.44vw, 3.125rem);
}
.board_bottom_area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.board_desc_text {
  font-size: clamp(1rem, 0.904rem + 0.38vw, 1.25rem);
  text-align: left;
}
.board_illust1{
  width: clamp(90px,15vw,150px);
  height: auto;
}
.board_illust2{
  width: clamp(70px,9.1vw,91px);
  height: auto;
  margin-top: -30px;
}
.board_illust1 img,.board_illust2 img{
  width: 100%;
  height: auto;
}
.board_illust1,
.board_illust2 {
  opacity: 0;
  will-change: transform, opacity; 
}
.board_illust1{
  transform: translateY(20px);
}
.fade_up.show .board_illust1 {
  animation: fadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.5s forwards;
}
.board_illust2 {
  transform: scale(0.6); 
}
.fade_up.show .board_illust2 {
  animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.9s forwards;
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px); 
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.6); 
  }
  70% {
    transform: scale(1.05); 
  }
  100% {
    opacity: 1;
    transform: scale(1); 
  }
}
/*docter_concept*/
.docter_concept-inner{
  width: min(95%,1040px);
  margin-inline: auto;
  margin-bottom: 40px;
}
.concept_header {
  font-weight: 700;
  text-align: center;
  margin-bottom: 80px;
  font-size: clamp(1.25rem, 1.01rem + 0.96vw, 1.875rem);
}
.concept_title{
  font-size: clamp(1.25rem, 1.01rem + 0.96vw, 1.875rem);
}
.concept_title .sp_br{
    display: none;
  }
.concept_title .size {
  font-size: clamp(1.5rem, 1.26rem + 0.96vw, 2.125rem);
}
.brand_name{
  font-size: clamp(2.25rem, 1.865rem + 1.54vw, 3.25rem);
  color: #fff;
  -webkit-text-stroke: 6px #4C4D4C; 
  paint-order: stroke fill;  
  position: relative;
  z-index: 1;
  margin-right: 0.5rem;
}
.brand_name::before{
  content: "かねこ歯科";
  position: absolute;
  font-size: clamp(2.25rem, 1.865rem + 1.54vw, 3.25rem);
  top: 0px;
  left: 3px;
  width: 100%;
  height: 100%;
  color: #90DFE6;          
  -webkit-text-stroke: 8px #90DFE6; 
  paint-order: stroke fill;
  z-index: -1; 
}
.concept_flex{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: min(100%,900px);
  margin: 0 auto 120px;
  flex-wrap: wrap;
  gap: 3%;
}
.concept_left_content {
  font-size: clamp(1rem, 0.904rem + 0.38vw, 1.25rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  flex: 1;
  max-width: 460px;
}
.lead_text{
  margin-bottom: 20px;
}
.lead_text .sp_br{
  display: none;
}
.diagram_box{
  display: flex;
  flex-direction: column;
  column-gap: 0.85rem;
  align-items: center;
  color: #4ABBC6;
  font-weight: 700;
  margin-bottom: 20px;
  width: 100%;
  max-width: 460px;
}
.diagram_item{
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 15px;
  background-color: #fff;
  border: solid 3px #4ABBC6;
  border-radius: 5px;
  padding: 5px 20px;
  width:100%;
  font-size: clamp(1.125rem, 0.981rem + 0.58vw, 1.5rem);
}
.diagram_icon{
  height: clamp(22px,3.3vw,33px);
  width: auto;
}
.concept_right_content{
  width: 40%; 
  max-width: 360px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
}
.concept_img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.doctor_name_label{
  border-bottom: solid 1px #989898;
  margin-bottom: 60px;
}
.name_main{
  margin: 0 20px 0 12px;
  font-size: var(--fs-20);
}
.name_en{
  color: #C5AE98;
  font-size: clamp(1rem, 0.904rem + 0.38vw, 1.25rem);
  letter-spacing: 0.1em;
}
.view_btn{
  text-decoration: none;
  color: #4ABBC6;
  font-weight: 700;
  background-color: #fff;
  letter-spacing: 0.03em;
  text-align: center;
  border: solid 1px #4ABBC6;
  border-radius: 5px;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.15);
  width: 100%;
  max-width: 480px;   
  margin-inline: auto 0;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
  transition: background-color 0.3s, color 0.3s;
}
.view_btn:hover {
  background-color: #4ABBC6; 
  color: #ffffff;           
}
.view_btn .btn_arrow {           
  position: relative;
  display: inline-block;
  width: 32px; 
  height: 2px;  
  background-color: #4ABBC6; 
  transition: transform 0.3s, background-color 0.3s;
  margin-top: 3px;
}
.view_btn .btn_arrow::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 12px;
  height: 2px; 
  background-color: #4ABBC6;
  transform-origin: right center;
  transform: rotate(32deg);
  transition: background-color 0.3s;
}
.view_btn:hover .btn_arrow {
  transform: translateX(4px);
  background-color: #fff;
}
.view_btn:hover .btn_arrow::before {
  background-color: #fff;
}
.docter_concept-inner .view_btn{
  position: relative;
  max-width: 360px;
}
/*歯の寿命*/
.data_box{
  width: min(90%,1040px);
  margin-inline: auto;
  background-color: #59A4AB;
  border: solid 1px #595959;
  border-radius: 5px;
  box-shadow: 8px 8px #3A5A5D;
}
.data_deco{
  position: relative;
  width: 100%;
  height: 100%;
}
.data_deco::before{
  content: "";
  position: absolute;
  background-image: url("../images/data_bis.svg"),url("../images/data_bis.svg"),url("../images/data_bis.svg"),url("../images/data_bis.svg");
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
  background-size: clamp(16px,2.2vw,22px),clamp(16px,2.2vw,22px),clamp(16px,2.2vw,22px),clamp(16px,2.2vw,22px);
  width: 100%;
  height: 100%;
  background-position: 2% 2%,98% 98%,2% 98%,98% 2%;
  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3));
}
.data_inner{
  padding: 60px 50px;
}
.data_box_title{
  color: #fff;
  font-size: var(--fs-24);
  letter-spacing: 0.03em;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}
.deta_icon{
  background-image: url("../images/data_icon.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: clamp(42px,9vw,90px);
  height: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.data_box_title .size{
  font-size: clamp(1.5rem, 1.163rem + 1.35vw, 2.375rem);
  background-color: #fff;
  padding: 0 5px;
  margin-inline: 5px;
}
.data_content{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.data_graph-area{
  width: 50%;
}
.data_graph-area img{
  width: min(100%,400px);
  height: auto;
}
.data_text-area{
  width: 50%;
}
.data_text{
  line-height: 1.8;
  font-size: clamp(1.063rem, 1.014rem + 0.19vw, 1.188rem);
  color: #fff;
}
@media(max-width:960px){
/* trouble 960px*/
  .trouble{
    padding-top: 5%;
  }
  .trouble_illust{
    bottom: 92%;
  }
  .trouble_list{
    flex-direction: column;
    padding-bottom: 80px;
  }
  .trouble_list li{
    width: 100%;
  }
  .trouble_list li:nth-child(2n){
    background-image: radial-gradient(#4ABBC6 30%, transparent 35%);
    padding-bottom: 20px;
  }
  .trouble_list-illust {
    width: min(40%, 190px);
  }
  .trouble_lead{
    margin-bottom: 50px;
  }
/*board 960px*/
  .board_inner{
    margin-bottom: 30px;
  }
  .board_label{
    aspect-ratio: 1.5 / 0.9;
    left: clamp(0px, 16vw - 96px, 6%);
  }
  .message_board{
    background-image: url("../images/board_bg_tab.webp");
    background-size: 100% 100%;
  }
  .board_content{
    padding: 140px 0 150px;
  }
  .board_main_title{
    margin-bottom: 20px;
  }
  .board_illust2{
    display: none;
  }
  .board_bottom_area{
    gap: 10px;
    width: 90%;
    margin-inline: auto;
  }
  /*かねこ歯科では 960px*/
  .concept_header{
    margin-bottom: 50px;
  }
  .concept_flex{
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin: 0 auto 90px;
  }
  .concept_left_content{
    margin: 0 auto;
    width: 100%;
    flex: none;
    max-width: 600px;
  }
  .concept_right_content{
    margin-inline: auto;
    width: 100%;
    margin: 0;
    min-width: auto;
  }
  .docter_concept-inner .view_btn{
    width: 100%;
  }
  /*歯の寿命 960px*/
  .data_content{
    flex-direction: column;
  }
  .data_graph-area,.data_text-area{
    width: 100%;
  }
  .data_graph-area{
    display: flex;
    justify-content: center;
  }
}
@media(max-width:600px){
  /* trouble 600px*/
  .hero_text{
    border-bottom: none;
    display: block;
    margin-bottom: 20px;
    width: -webkit-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
  .hero_text-illust{
    display: none;
  }
 .hero_text .marker {
    display: inline;
    background-image: linear-gradient(#ff6b8b, #ff6b8b);
    background-repeat: no-repeat;
    background-position: left bottom 2px;
    background-size: 0px 6px; 
    box-decoration-break: slice;
    -webkit-box-decoration-break: slice;
    padding-bottom: 8px;
    animation: lineDraw 1s ease-in-out 1s forwards;
  }
  .trouble .sub_text{
    text-align: left;
    letter-spacing: 0.03em;
    width: 95%;
    margin-inline: auto;
  }
  .trouble .pc_br{
    display: none;
  }
  .trouble_list-warap{
    margin-bottom: 30px;
  }
  .trouble_illust{
    bottom: unset;
    top: clamp(-100px, -16.666vw, -67px);
  }
  .trouble_list{
    padding: 30px 20px 20%;
    gap: 10px;
  }
  .trouble_list li{
    padding-bottom: 12px;
  }
  .trouble_list li:nth-child(2n){
    padding-bottom: 12px;
  }
  .trouble_lead{
    margin-bottom: 20px;
  }
  /*board 600px*/
  .board_inner{
    margin-bottom: 40px;
  }
  .board_label{
    aspect-ratio: 1 / 0.5;
    left: -35px;
  }
  .message_board{
    background-image: url("../images/board_bg_sp.webp");
  }
  .board_content{
    padding: 120px 25px 90px;
    width: min(90%,460px);
    margin-inline: auto;
  }
  .board_main_title{
    line-height: 1.5;
    width: min(100%,360px);
    margin-inline: auto;
    margin-bottom: 10px;
  }
  .board_bottom_area{
    flex-direction: column;
    width: 100%;
    max-width: 360px;
  }
  .board_bottom_area .pc_br{
    display: none;
  }
  /*かねこ歯科では 600px*/
  .concept_header{
    margin-bottom: 25px;
  }
  .concept_title .pc_br{
    display: none;
  }
  .concept_title .sp_br{
    display: block;
  }
  .lead_text{
    text-align: center;
    margin-bottom: 10px;
  }
  .lead_text .sp_br{
    display: block;
}
  .diagram_box{
    max-width: 320px;
    margin-bottom: 10px;
  }
  .diagram_item{
    gap: 2%;
    padding: 3px 5px;
  }
  .lead_text2{
    width: min(100%,370px);
  }
  /*歯の寿命 600px*/
  .trouble{
    padding-top: 0;
    padding-bottom: 10%;
  }
  .data_inner{
    padding: 30px 20px;
  }
  .data_box_title{
    padding-right: 30px;
  }
  .deta_icon{
    top: unset;
    transform: none;
  }
}
@keyframes lineDraw{
  0% {
    background-size: 0px 6px;
  }
  100% {
    background-size: 100% 6px;
  }
}
/*checklist*/
.checklist{
  background-image: url("../images/checklist_top-wave.svg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 100%;
  padding-block: 14% 5rem;
}
.title-container {
  position: relative; 
  display: block;
  width: fit-content;
  margin-inline: auto; 
}
.checklist h2{
  padding-bottom: 12px;
}
.checklist h2 .size{
  font-size: clamp(1.75rem, 1.462rem + 1.15vw, 2.5rem);
}
.title-container::before{
  content: "";
  position: absolute;
  background-image: url("../images/check_icon.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: clamp(80px,8.833vw,106px);
  height: clamp(63px,7.083vw,85px);
  right: -30px;
  top: -70px;
  opacity: 0;
  z-index: 2;
  transform: scale(0.5); 
}
.show .title-container::before {
  animation: fadeInScale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.0s forwards;
}
@keyframes fadeInScale {
  0% { 
    opacity: 0; 
    transform: scale(0.5); 
  }
  100% { 
    opacity: 1; 
    transform: scale(1); 
  }
}
.checklist .sub_text{
  width: min(100%,670px);
  margin-inline: auto;
}
.checklist_content_area{
  width: min(90%,1040px);
  margin-inline: auto;
}
.checklist_block {
  margin-bottom: 60px;
}
.checklist_block:last-child {
  margin-bottom: 0;
}
.checklist_item_title {
  position: relative; 
  background-color: #B4DCE0; 
  color: #4C4D4C;
  margin: 0 0 30px 0;
  border-radius: 3px;
  padding: 10px 30px 10px 85px; 
  display: flex;
  align-items: center;
}
.checklist_ttl-txt {
  font-size: clamp(1.125rem, 0.981rem + 0.58vw, 1.5rem);
  font-weight: 700;
  line-height: 1.4;
}
.check_badge {
  position: absolute;
  left: 15px;      
  top: -20px;      
  width: clamp(51px,9vw,70px); 
  height: auto;
}
.badge_bg_img {
  width: 100%;
  height: auto;
  display: block;
}
.badge_text_wrap {
  position: absolute;
  inset: 0;        
  display: flex;
  flex-direction: column;   
  align-items: center;      
  justify-content: flex-start;
  padding-top: 14%;
}
.badge_check {
  color: #4ABBC6; 
  font-size: clamp(0.875rem, 0.851rem + 0.1vw, 0.938rem);
  font-weight: 700;
  line-height: 1;
}
.badge_num {
  color: #4ABBC6; 
  font-size: clamp(1.125rem, 0.885rem + 0.96vw, 1.75rem); 
  font-weight: 700; 
  line-height: 1;
}
.check_content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; 
  gap: 40px;
}
.check_txt-area {
  width: 58%;
  margin-left: 85px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.check_txt-tag {
  background-color: #4ABBC6;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  width: fit-content;
  padding: 4px 12px;
  border-radius: 3px;
  margin-bottom: 15px;
}
.check_text{
  font-weight: 500;
}
.checklist_label_area {
  margin-top: 25px;
  width: 100%;
  margin-inline: auto;
}
.checklist_label {
  display: block;
  border-top: 1.5px solid #F33E6C; 
  border-bottom: 1.5px solid #F33E6C;              
  font-weight: 700;
  font-size: clamp(1.063rem, 1.038rem + 0.1vw, 1.125rem);
  padding: 8px 10px;
  text-align: center;
}
.check_img-area {
  width: 38%;
  max-width: 340px;
  height: auto;
  aspect-ratio: 4 / 3;
}
.check_img-area img {
  width: 100%;
  height: auto;
}
.checklist_block.reverse .checklist_item_title{
  justify-content: flex-end;
}
.checklist_block.reverse .check_badge{
  left: unset;
  right: clamp(58%, 82% - 18.83vw, 66%);
}
.checklist_block.reverse .check_content {
  flex-direction: row-reverse;
}
.checklist_block.reverse .check_txt-area{
  margin-left: 0;
}
.maintenance_warap{
  background-color: #DDEFF1;
  border-radius: 3px;
  text-align: center;
  padding: 0.5rem 3% 2rem;
}
.maintenance_inner{
  width: fit-content;
  margin-inline: auto;
}
.maintenance_ttl{
  font-size: var(--fs-20);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1rem;
  padding-bottom: 6px;
  border-bottom: solid 2px #4ABBC6;
  margin-bottom: 6px;
}
.maintenance_ttl img{
  width: clamp(65px,7vw,70px);
  height: auto;
  object-fit: contain;
}
.maintenance_warap p{
  margin-bottom: 20px;
}
.checklist .view_btn{
  margin-inline: auto;
}
@media(max-width:960px){
  .checklist h2::before{
    top: -50px;
  }
  .check_content,.checklist_block.reverse .check_content{
    flex-direction: column-reverse;
    align-items: center;
  }
  .checklist_block.reverse .checklist_item_title{
    justify-content: flex-start;
  }
  .checklist_block.reverse .check_badge{
    left: 15px;
  }
  .check_badge{
    top: unset;
  }
  .check_txt-area{
    width: 100%;
    margin-inline: auto;
  }
  .check_img-area{
    width: 100%;
    max-width: 500px;
  }
  .checklist .view_btn{
    margin-inline: auto;
  }
}
@media(max-width:600px){
  .checklist{
    padding-block: 18% 5rem;
  }
  .title-container::before{
    display: none;
  }
  .sub_text{
    margin-bottom: 35px;
    text-align: left;
  }
  .checklist_block{
    margin-bottom: 40px;
  }
  .checklist_item_title,.checklist_block.reverse .checklist_item_title{
    padding: 10px 10px 10px 65px;
   margin: 0 0 15px 0;
  }
  .check_badge,.checklist_block.reverse .check_badge{
    left: 3px;
  }
  .check_content{
    gap: 10px;
  }
  .checklist_label_area{
    text-align: center;
  }
  .checklist_label{
    padding: 5px;
  }
  .label_block{
    display: block;
  }
  .label_sp_none{
    display: none;
  }
  .maintenance_warap{
    padding: 1rem 3% 1.5rem;
  }
  .maintenance_ttl{
    flex-direction: column-reverse;
    align-items: center;
    gap: 0.5rem;
  }
  .maintenance_warap p{
    text-align: left;
  }
}
/*comparison*/
.comparison{
  background-color: #F6F1EA; 
  background-image: url("../images/dot.svg");
  background-repeat: repeat; 
  background-position: left top;
  background-size: 100px 100px;
  position: relative;
  padding-block: 12% 17%;
}
.checklist_bottom-wave{
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: auto;
}
.comparison_inner{
  width: min(90%,1040px);
  margin-inline: auto;
}
.comparison_title{
  font-size: clamp(1.25rem, 0.913rem + 1.35vw, 2.125rem);
  text-align: center;
  margin-bottom: 40px;
}
.vs_nav_container {
  display: flex;
  justify-content: center;
  align-items: stretch; 
  max-width: 900px;    
  margin-inline: auto;
  position: relative;
  margin-bottom: 40px;
}
.vs_nav_card {
  background-color: #ffffff;
  width: 50%; 
  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
  position: relative;
}
.vs_card_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 15px 0;
  height: 100%;
}
.vs_nav_txt {
  font-size: clamp(1.25rem, 1.01rem + 0.96vw, 1.875rem);
  font-weight: 700;
  color: #4C4D4C;
}
.vs_card_icon {
  height: auto;
  display: block;
  flex-shrink: 0; 
  margin-top: 10px; 
}
.mouthpiece_nav .vs_card_icon {
  width: clamp(45px, 7.5vw, 75px); 
}
.wire_nav .vs_card_icon {
  width: clamp(76px, 13.5vw, 135px); 
  padding-top: 5px;
}
.mouthpiece_nav {
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
  margin-right: -25px; 
  padding-right: 20px; 
}
.wire_nav {
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
  margin-left: -25px; 
  padding-left: 20px; 
}
.vs_nav_badge {
  width: clamp(50px, 12vw, 80px); 
  background-color: #4ABBC6; 
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2; 
  transform: skewX(-15deg); 
  box-shadow: 0 4px 15px rgba(74, 187, 198, 0.2);
  flex-shrink: 0;
}
.vs_badge_txt {
  display: block;
  transform: skewX(15deg); 
  color: #ffffff;
  font-size: clamp(1.563rem, 0.962rem + 2.4vw, 3.125rem);
  font-weight: 700;
}
.comparison .sub_text{
  margin-inline: auto;
  margin-bottom: 70px;
}
.comparison_cards_flex{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 40px;
  margin-bottom: 40px;
}
.detail_card{
  width: 50%;
  border: solid 3px #4ABBC6;
  border-radius: 5px;
  position: relative;
  padding-top: 15px;
  display: flex;
  flex-direction: column;
}
.detail_card::before{
  content: "";
  position: absolute;
  inset: 8px;
  border: solid 1px #4ABBC6;
  border-radius: 3px;
}
.mouthpiece_card{
  background-color: #F9FFFF;
}
.wire_card{
  background-color: #FFFBEF;
}
.hybrid_card{
  width: 100%;
  background-color: #fff;
  margin-bottom: 40px;
}
.detail_card_title{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: clamp(1.25rem, 1.058rem + 0.77vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  background-color: #4ABBC6;
  margin-bottom: 20px;
}
.hybrid_title{
  flex-direction: row;
  justify-content: center;
  padding-block: 10px;
}
.mouthpiece_title,.wire_title{
  position: relative;
}
.hybrid_card{
  position: relative;
}
.mouthpiece_title::before{
  content: "";
  position: absolute;
  background-image: url("../images/comparison_mouthpiece.webp");
  background-repeat: no-repeat;
  background-size: 100%;
  left: -60px;
  top: -30px;
  width: clamp(87px,15.833vw,190px);
  height: clamp(49px,9.083vw,109px);
}
.wire_title::before{
  content: "";
  position: absolute;
  background-image: url("../images/comparison_wire.webp");
  background-repeat: no-repeat;
  background-size: 100%;
  width: clamp(79px,10.583vw,127px);
  height: clamp(85px,11.5vw,138px);
  right: -40px;
  top: -30px;
}
.hybrid_card::after{
  content: "";
  position: absolute;
  background-image: url("../images/comparison_hybrid.webp");
  background-repeat: no-repeat;
  background-size: 100%;
  width: clamp(154px,16.5vw,231px);
  height: clamp(69px,7.357vw,103px);
  right: 0;
  bottom: 3px;
}
.sub_title_tag{
  font-size: clamp(0.938rem, 0.865rem + 0.29vw, 1.125rem);
}
.detail_card_body{
  padding-inline: 5%;
  padding-bottom: 20px;
  flex-grow: 1;
}
.comparison_merit_label,.comparison_demerit_label{
  font-size: var(--fs-20);
  font-weight: 700;
  color: #4ABBC6;
  line-height: 1;
  display: flex;
  align-items: center;
  column-gap: 12px;
  margin-bottom: 12px;
}
.comparison_merit_label::after, .comparison_demerit_label::after{
  content: "";
  flex-grow: 1;
  height: 5px;
  background-image: radial-gradient(currentColor 30%, transparent 35%);
  background-repeat: repeat-x; 
  background-position: center; 
  background-size: 5px 5px; 
}
.comparison_merit_list,.comparison_demerit_list{
  margin-left: 20px;
}
.comparison_merit_list li,.comparison_demerit_list li{
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 12px;
  font-size: var(--fs-18);
  font-weight: 700;
}
.comparison_merit_list li::before {
  content: "◎";
  position: absolute;
  left: 0;
  font-weight: 700;
}
.comparison_demerit_list li::before {
  content: "△";
  position: absolute;
  left: 0;
  font-weight: 700;
}
.hybrid_card li{
  display: grid;
  align-items: flex-start;
  gap: 1rem;
  grid-template-columns: 215px auto;
}
.hybrid_list_main{
  white-space: nowrap;
}
.hybrid_list_sub{
  font-weight: 500;
}
.hybrid_list_last{
  width: 76%;
}
.policy_box{
  background-color: #FFEFF3;
  border-radius: 5px;
  border: solid 5px #F33E6C;
  display: flex;
  gap: 5px;
  padding-right: 10px;
  align-items: stretch;
  position: relative;
}
.policy_box::before{
  content: "";
  position: absolute;
  border: solid 1px #F33E6C;
  border-radius: 3px;
  inset:6px;
}
.policy_badge{
  width: 25%;
  background-color: #F33E6C;
  font-size: clamp(1.125rem, 0.981rem + 0.58vw, 1.5rem);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  clip-path: polygon(0 0,90% 0,100% 50%,90% 100%,0 100%);
  padding-right: 3%;
  padding-block: 10px;
  transform: scale(1.01); 
}
.polici_illust{
  background-image: url("../images/comparison_illust.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: clamp(36px,5vw,60px);
  height: clamp(48px,6.583vw,79px);
}
.policy_text{
  font-size: clamp(1rem, 0.856rem + 0.58vw, 1.375rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
}
.itero_top-wave{
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: auto
}
@media(max-width:960px){
  .vs_nav_container{
    margin-bottom: 20px;
  }
  .comparison .sub_text{
    margin-bottom: 30px;
  }
  .comparison_cards_flex{
    flex-direction: column;
  }
  .detail_card{
    width: 100%;
  }
  .hybrid_title{
    flex-direction: column;
  }
  .mouthpiece_title::before{
    left: -10px;
  }
  .wire_title::before{
    right: -10px;
  }
  .hybrid_title::before{
    right: -10px;
  }
  .hybrid_card li{
    grid-template-columns: none;
    gap: 0;
  }
  .hybrid_list_main{
    white-space: pre-wrap;
  }
  .policy_badge{
    flex-direction: column;
    gap: 0px;
    width: 45%;
  }
  .policy_text .pc_br{
    display: none;
  }
}
@media(max-width:600px){
  .comparison{
    background-size: 60px 60px;
  }
  .vs_nav_txt{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .mouthpiece_nav{
    padding-right: 10px;
  }
  .wire_nav{
    padding-left: 10px;
  }
  .comparison_merit_list, .comparison_demerit_list{
    margin-left: 10px;
  }
  .mouthpiece_title::before{
    top: -10px;
    left: -18px;
  }
  .hybrid_card .detail_card_body{
    padding-bottom: 40px;
  }
  .hybrid_list_last{
    width: 100%;
  }
  .hybrid_card::after{
    bottom: -5px;
  }

  .policy_box{
    flex-direction: column;
    padding-right: 0;
  }
  .policy_badge{
    flex-direction: column-reverse;
    width: 100%;
    clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0% 60%, 0 100%);
    padding-right: 0;
    padding-block: 8px 3px;
  }
  .policy_text{
    padding: 10px 20px 20px;
  }
}
/*itero*/
.itero{
  background-color: #F4FEFF;
  padding-bottom: 2%;
}
.itero-inner{
  width: min(90%,1040px);
  margin-inline: auto;
}
.itero_intro{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 70px;
}
.itero_machine_thumb{
  width: 40%;
  max-width: 360px;
  position: relative;
  z-index: 1;
}
.itero_machine_thumb img{
  width: 100%;
  height: auto;
}
.itero_header{
  width: 65%;
  font-size: clamp(1.25rem, 0.913rem + 1.35vw, 2.125rem);
  letter-spacing: 0.03em;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
  margin-left: -90px; 
  position: relative;
  z-index: 2;
}
.itero_copy{
  display: block;
}
.itero_logo-text{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.itero_logo-area{
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 5px;
}
.itero_logo{
  height: clamp(54px,7.1vw,71px);
  width: auto;
  display: block
}
.sp_itero_yoko,.itero_logo-sub-sp{
  display: none;
}
.itero_logo-sub-pc{
  line-height: 1;
}
.itero_logo-sub-pc .size{
  font-size: 1.5rem;
}
.itero_features{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  margin-inline: auto;
  margin-bottom: 60px;
}
.itero_feature-card{
  width: calc((100% - 4rem) / 3); 
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.feature_title{
  font-size: clamp(1.125rem, 0.993rem + 0.56vw, 1.5rem);
  font-weight: 700;
  color: #4ABBC6;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap:8px;
  line-height: 1.5;
  min-height: 3em;
  margin-bottom: 10px;
}
.check_icon{
  background-image: url("../images/itero_check.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: clamp(35px,4.5vw,45px);
  height: clamp(45px,5.8vw,58px);
}
.itero_feature-img{
  width: 255px;
  height: 230px;
  margin-bottom: 10px;
}
.itero_feature-img img{
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.itero_simulation-box{
  background-color: #fff;
  border: solid 3px #4ABBC6;
  border-radius: 5px;
  position: relative;
  padding-top: 40px;
  z-index: 1;
}
.itero_simulation-box .sp_br{
  display: none;
}
.itero_simulation-box::before{
  content: "";
  position: absolute;
  background-image: url("../images/3d_bg.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  height: 100%;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.simulation_box-title{
  font-size: clamp(1.125rem, 0.981rem + 0.58vw, 1.5rem);
  font-weight: 700;
  color: #4ABBC6;
  text-align: center;
  margin-bottom: 30px;
  display: flex;
  align-items: center; 
  justify-content: center;
  gap: 20px;
}
.simulation_box-title::before,
.simulation_box-title::after{
  content: "";
  flex-grow: 1;
  height: 20px;
  background-image: radial-gradient(#4ABBC6 35%, transparent 30%), radial-gradient(#4ABBC6 35%, transparent 30%); 
  background-repeat: repeat-x;
  background-position: center top, center bottom;
  background-size: 8px 8px;
}
.simulation_text{
  width: min(90%, 800px);
  margin-inline: auto;
  margin-bottom: 30px;
}
.simulation_images-flex {
  width: 90%;
  margin: 0 auto 10px;
  display: flex;
  justify-content: space-between;
  align-items: stretch; 
  gap: 30px;
}
.sim_video {
  width: 48%; 
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16 / 9; 
}
.itero_mp4 {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;
}
.simulation_comment{
  font-size: clamp(0.625rem, 0.529rem + 0.38vw, 0.875rem);
  width: 90%;
  margin: 0 auto 20px;
  text-align: right;
}
@media(max-width:960px){
  .itero_intro{
    flex-direction: column-reverse;
  }
  .itero_machine_thumb{
    width: 35%;
    max-width: 230px;
    margin-top: -140px;
    margin-inline: 0 auto;
  }
  .itero_header{
    width: 100%;
    margin-inline: auto;
  }
  .sp_itero_yoko,.itero_logo-sub-sp{
  display: block;
  }
  .sp_itero_yoko{
    font-size: clamp(1rem, 0.808rem + 0.77vw, 1.5rem);
  }
  .itero_logo-sub-sp{
    font-size:clamp(1.25rem, 0.913rem + 1.35vw, 2.125rem);
  }
  .itero_logo-sub-pc{
    display: none;
  }
  .itero_logo-text{
    flex-direction: column;
    align-items: center;
    padding-left: 30px;
  }
  .itero_features{
    justify-content: center;
    gap: 3rem 2rem;
  }
  .itero_feature-card {
    width: calc((100% - 2rem) / 2);
    max-width: 270px; 
  }
  .itero_simulation-box{
    padding-top: 30px;
  }
  .simulation_box-title{
    margin-bottom: 30px;
  }
  .simulation_images-flex{
    flex-direction: column;
    margin: 0 auto 5px;
  }
  .sim_video{
    width: 100%;
  }
}
@media(max-width:600px){
  .itero_intro{
    margin-bottom: 50px;
  }
  .itero_machine_thumb{
    margin-top: -120px;
  }
  .itero_logo-text{
    padding-left: 28%;
  }
  .itero_features {
    flex-direction: column;
    gap: 1.5rem; 
  }
  .itero_feature-card {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: 30% 1fr; 
    column-gap: 6px;
    row-gap: 6px;
    align-items: center;
    background-color: #ffffff; 
    border-radius: 12px;       
    padding: 16px 10px;      
    box-shadow: 0 4px 16px rgba(74, 187, 198, 0.08); 
    margin-inline: auto;
  }
  .itero_feature-img {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: clamp(85px,15.833vw,95px);
    height: clamp(85px,15.833vw,95px);
    margin-bottom: 0;
    background-color: #f0fbfc; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin: auto;
  }
  .feature_title {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-start;
    text-align: left;
    min-height: auto;
    margin-bottom: 0;
    align-items: center;
    gap: 2px;
  }
  .itero_feature-desc {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    line-height: 1.6;
  }
  .check_icon {
    width: 35px;
    height: 32px;
    flex-shrink: 0;
  }
  .itero_feature-card .pc_br{
    display: none;
  }
  .itero_simulation-box .sp_br{
  display: block;
  }
}
/*provider*/
.provider{
  background-color: #F6F1EA;
  background-image: 
    linear-gradient(#ffffff 1px, transparent 1px), 
    linear-gradient(90deg, #ffffff 1px, transparent 1px);
  background-repeat: repeat;
  background-position: left top; 
  background-size: 25px 25px;
  position: relative;
  z-index: 1;
  padding: 18rem 0 11% 0;
}
.itero_bottom-wave{
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1;
}
.provider_bottom-wave{
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: auto;
}
.provider_inner{
  width: min(90%,1040px);
  margin-inline: auto;
}
.provider_warap{
  background-color: #fff;
  border: solid 2px #4ABBC6;
  border-radius: 5px;
  position: relative;
  padding: 50px 30px 50px;
  box-shadow: 6px 6px #4ABBC6;
  margin-bottom: 60px;
}
.provider_dot{
  position: absolute;
  width: clamp(13px,1.8vw,18px);
  height: clamp(13px,1.8vw,18px);
  background-color: #4ABBC6;
  border-radius: 50%;
  box-shadow: inset 0 4px 3px rgba(32, 93, 99, 0.55);
}
.top_left{
  top: 20px;
  left: 20px;
}
.top_right{ 
  top: 20px;
  right: 20px;
}
.bottom_left{ 
  bottom: 20px; 
  left: 20px; 
}
.bottom_right{ 
  bottom: 20px; 
  right: 20px; 
}
.provider_illust{
  position: absolute;
  width: clamp(99px,20.2vw,202px);
  height: auto;
  right: 0;
  bottom: 100%;
  z-index: -1;
}
.provider_illust img{
  width: 100%;
  height: auto;
}
.provider_badge{
  position: absolute;
  left: 55px;
  top: -27px;
  width: clamp(78px,14.1vw,141px);
  height: auto;
}
.provider_badge img{
  width: 100%;
  height: auto;
}
.provider_header-area{
  text-align: center;
  margin-bottom: 30px;
  margin-left: 90px;
}
.provider_main-title{
  display: inline-block;
  background-color: #4ABBC6;
  color: #fff;
  font-size: clamp(1.25rem, 0.817rem + 1.73vw, 2.375rem);
  font-weight: 700;
  padding: 8px 2rem;
  margin-bottom: 15px;
}
.provider_sub-title{
  font-size: clamp(1.125rem, 0.885rem + 0.96vw, 1.75rem);
  font-weight: 700;
  color: #4ABBC6;
  margin: 0;
}
.provider_flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 860px;
  margin-inline: auto;
}
.provider_text{
  width: 60%;
  line-height: 1.8;
}
.provider_pyramid{
  width: 40%;
  max-width: 450px;
}
.provider_pyramid-img{
  width: 100%;
  height: auto;
  display: block;
}
@media(max-width:960px){
  .provider{
    padding: 13rem 0 20% 0;
  }
  .provider_warap{
    padding: 10% 30px 50px;
  }
  .provider_header-area{
    margin-left: 0;
  }
  .provider_badge{
    left: clamp(0px, 2.5vw, 25px);
    top: -15px;
  }
  .provider_main-title{
    padding: 8px 2rem 8px 3.5rem;
    margin-bottom: 15px;
    display: block;
  }
  .provider_flex{
    flex-direction: column;
    gap:20px;
  }
  .provider_text{
    width: 100%;
  }
  .provider_pyramid{
    width: 100%;
    max-width: 400px;
  }
  .provider .view_btn{
    margin-inline: auto;
  }
}
@media(max-width:600px){
  .provider{
    padding: 35% 0 20% 0;
    background-size: 18px 18px;
  }
  .provider_warap{
    padding: 12% 16px 55px;
    box-shadow: 4px 4px #4ABBC6;
  }
  .provider_header-area{
    margin-bottom: 15px;
  }
  .provider_badge{
    left: -1%;
    top: 0;
  }
  .provider_sub-title{
    text-align: left;
  }
  .provider_sub-title .pc_br{
    display: none;
  }
  .provider_flex{
    gap: 10px;
  }
}
/*case*/
.case{
  background-color: #FFFDF9;
  padding-block: 0 2%;
}
.case .sub_text{
  margin-bottom: 0;
  width: min(100%,890px);
  margin-inline: auto;
}
.case .notes{
  text-align: left;
  width: min(100%,890px);
  margin-inline: auto;
  font-size: clamp(0.625rem, 0.529rem + 0.38vw, 0.875rem);
  font-weight: 400;
  margin-bottom: 60px;
}
.case_inner{
  width: min(90%,1100px);
  margin-inline: auto;
}
.case_detail-list{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
}
.case_card{
  width: calc((100% - 40px) / 2);
  background-color: #F9FFFF;
  border: solid 1px #4ABBC6;
  border-radius: 3px;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  position: relative;
  transform-style: preserve-3d;
}
.case_card::after{
  content: "";
  position: absolute;
  background-color: #B4DCE0;
  border: solid 1px #4ABBC6;
  border-radius: 3px;
  right: -5px;
  left: 5px;
  top: 5px;
  bottom: -5px;
  transform: translateZ(-1px); 
}
.case_title{
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 1rem 0;
  margin-bottom: 30px;
}
.case_title::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  bottom: 6px;
  border-top: 1px solid #4ABBC6;
  border-bottom: 1px solid #4ABBC6;
}
.case_title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-top: 3px solid #4ABBC6;
  border-bottom: 3px solid #4ABBC6;
}
.case_num{
  background-color: #4ABBC6;
  color: #fff;
  font-size: clamp(0.938rem, 0.865rem + 0.29vw, 1.125rem);
  font-weight: bold;
  padding: 4px 14px;
  border-radius: 20px;
  flex-shrink: 0;
}
.case_name {
  font-size: clamp(1.125rem, 1.029rem + 0.38vw, 1.375rem);
  font-weight: 700;
  color: #4C4D4C;
}
.case_b-a_flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1px;
  margin-bottom: 24px;
}
.case_photo_box {
  width: 47%; 
}
.photo_placeholder {
  width: 100%;
  aspect-ratio: 4 / 3; 
  border-radius: 3px;
  overflow: hidden;
}
.photo_placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case1-2{
  object-position: top;
}
.case1-3{
  object-position: bottom;
}
.case_b-a_label{
  text-align: center;
  font-weight: bold;
  font-size: var(--fs-20);
  letter-spacing: 0.05em;
  padding: 6px 0;
  margin-bottom: 6px;
  border-radius: 3px;
}
.label_b{
  background-color: #C4C4C4;
}
.label_a{
  background-color: #B4DCE0;
}
.case_arrow_marker {
  color: #FAD571; 
  font-size: 25px;
  font-weight: bold;
  transform: scaleX(0.6);
  flex-shrink: 0;
}
.case_detail_accordion {
  background-color: #fff;
  border: 1px solid #4ABBC6; 
  border-radius: 3px;
  padding: 12px 14px;
}
.accordion_toggle_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  cursor: pointer; 
  position: relative;
}
.toggle_title {
  font-weight: bold;
  color: #4ABBC6; 
  letter-spacing: 0.1em;
}
.toggle_icon_minus{
  position: absolute;
  width: 16px;
  height: 16px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.toggle_icon_minus span{
  position: absolute;
  background-color: #4ABBC6;
  transition: transform 0.3s ease;
}
.toggle_icon_minus span:nth-child(1) {
  top: 7px;
  left: 0;
  width: 100%;
  height: 2px;
}
.toggle_icon_minus span:nth-child(2) {
  top: 0;
  left: 7px;
  width: 2px;
  height: 100%;
}
.accordion_toggle_btn.active .toggle_icon_minus span:nth-child(2) {
  transform: rotate(90deg);
}
.accordion_content_body {
  overflow: hidden;
  transition: height 0.3s ease-out, padding 0.3s ease-out; 
}
.detail_info_list{
  margin-block: 6px 16px;
  padding-left: 3%;
  padding-top: 24px;
  background-image: radial-gradient(#4ABBC6 30%, transparent 35%);
  background-repeat: repeat-x;
  background-position: left top;
  background-size: 5px 5px;
}
.info_item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 16px;
}
.info_item:last-child {
  margin-bottom: 0; 
}
.info_item::before,.info_risk::before {
  content: "";
  display: inline-block;
  width: clamp(23px,2.9vw,29px);
  height: clamp(23px,2.9vw,29px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}
.icon_tooth::before{ 
  background-image: url("../images/case_icon-tooth.svg"); 
}
.icon_calendar::before{
  background-image: url("../images/icon-calender.svg"); 
}
.icon_price::before{ 
  background-image: url("../images/case_icon-price.svg"); 
}
.info_risk {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
  padding-left: 3%;
}
.icon_alert::before{ 
  background-image: url("../images/case_icon-alert.svg");
}
.info_risk .info_txt,.info_risk_sub{
  font-size: var(--fs-text);
  font-weight: 500;
}
.info_risk_sub{
  margin-block: 0 5px;
}
.info_risk-warap{
  width: 100%;
  margin-bottom: 10px;
  padding-left: 3%;
}
.info_risk-warap:last-child{
  margin-bottom: 0;
}
.info_risk-list {
  list-style-type: disc;
  padding-left: 1.2rem; 
  list-style-position: outside;
}
.info_risk-list li{
  font-size: clamp(0.938rem, 0.915rem + 0.09vw, 1rem);
  margin-bottom: 1px;
  line-height: 1.5;
  font-weight: 400;
}
.info_risk-list li:last-child {
  margin-bottom: 0;
}
/*risk*/
.risk{
  position: relative;
  padding-top: 10%;
}
.faq_bottom-wave{
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  top: -1px;
}
.risk_inner{
  width: min(90%,820px);
  margin-inline: auto;
}
.risk h2{
  font-size: var(--fs-text);
  margin-bottom: 1rem;
  text-align: center;
}
.risk_box{
  background-color: #fff;
  border: solid 1px #C4C4C4;
  border-radius: 5px;
  padding: 30px 5%;
}
.risk_box p{
  margin-bottom: 15px;
  font-size: clamp(0.938rem, 0.912rem + 0.1vw, 1rem);
}
.risk_list{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  font-size: clamp(0.875rem, 0.85rem + 0.1vw, 0.938rem);
  font-weight: 400;
  list-style: disc;
  padding-left: 30px;
  margin-bottom: 15px;
}
.risk_box .risk_comment{
  font-weight: 700;
  color: #4ABBC6;
  line-height: 1.8;
  margin-bottom: 0;
}
@media(max-width:960px){
  .case .notes{
    width: 100%;
  }
  .case_detail-list{
    flex-direction: column;
  }
  .case_card{
    width: min(100%,600px);
    margin-inline: auto;
  }
  .case_b-a_flex{
    flex-direction: column;
  }
  .case_photo_box{
    width: 90%;
  }
  .photo_placeholder{
    aspect-ratio: 16 / 9;
  }
  .case_card:nth-child(2) img {
    object-position: center 80%;
}
  .detail_case_flex{
   margin-bottom: 40px;
}
  .detail_case_flex2{
   margin-bottom: 20px;
}
  .case_arrow_marker{
    transform: scaleX(1) rotate(90deg);
    line-height: 1;
  }
}
@media(max-width:600px){
  .case{
    padding-block: 5% 10%;
  }
  .case .notes{
    margin-bottom: 30px;
  }
  .case_b-a_label{
    padding: 3px 0;
  }
  .case_photo_box{
    width: 100%;
  }
  .case_detail_accordion{
    padding: 12px 8px;
  }
  .detail_info_list,.info_risk,.info_risk-warap{
    padding-left: 0;
  }
/* risk */
  .risk_list{
    padding-left: 20px;
  }
}
/*merit*/
.merit{
  background-color: #fff;
  background-image: linear-gradient(#E1E1E1 1px, transparent 1px), linear-gradient(90deg, #E1E1E1 1px, transparent 1px);
  background-repeat: repeat;
  background-position: left top;
  background-size: 25px 25px;
  position: relative;
  padding-block: 10% 15%;
}
.case_bottom-wave{
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  top: -1px;
}
.merit_bottom-wave{
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  bottom: -1px;
}
.merit_reason{
  background-color: #fff;
  position: relative;
  display: flex;
  align-items: baseline;
  padding: 1rem;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 10px;
}
.merit_reason::before{
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1px solid #4ABBC6;
  border-bottom: 1px solid #4ABBC6;
}
.merit_reason::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  bottom: 6px;
  border-top: 1px solid #4ABBC6;
  border-bottom: 1px solid #4ABBC6;
}
.reason_ttl{
  font-size: clamp(2rem, 1.712rem + 1.15vw, 2.75rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #FAD571;
  -webkit-text-stroke: 2px #595959;
  paint-order: stroke fill;
  line-height: 1;
}
.reason_sub{
  font-size: clamp(1.125rem, 0.981rem + 0.58vw, 1.5rem);
}
.merit .sub_text{
  width: min(100%,595px);
  margin-inline: auto;
}
.merit_inner{
  width: min(90%,1040px);
  margin-inline: auto;
}
.merit_list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 60px 20px;
  width: 100%;
}
.merit_item{
  width: calc((100% - 40px) / 3);
  min-width: 330px;
  position: relative;
  background-color: #fff;
  border: solid 1px #4ABBC6;
  border-radius: 3px;
  transform-style: preserve-3d;
}
.merit_item::after{
  content: "";
  position: absolute;
  background-color: #B4DCE0;
  border: solid 1px #4ABBC6;
  border-radius: 3px;
  top: 5px;
  left: 5px;
  right: -5px;
  bottom: -5px;
  transform: translateZ(-1px);
}
.merit_num{
  position: absolute;
  top: -30px;
  left: 0px;
  font-size: clamp(2.813rem, 2.356rem + 1.83vw, 4rem);
  font-weight: 700;
  color: #4ABBC6;
  line-height: 1;
}
.merit_photo_box{
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}
.merit_photo_box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.merit_title{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  margin-top: -24px;
}
.merit_title span{
  align-self: flex-start; 
  background-color: #B4DCE0;
  height: 48px;          
}
.ttl_line1{
  padding-inline: 6%;
  background-image: url("../images/merit_deco-r.svg");
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: right top;
  display: inline-flex;  
  align-items: center;
}
.ttl_line2{
  padding-inline: 6%;
  background-image: url("../images/merit_deco-l.svg");
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: left bottom;
  display: inline-flex;  
  align-items: center; 
  padding-bottom: 3px;
}
.merit_title{
  font-size: clamp(1.188rem, 1.115rem + 0.29vw, 1.375rem);
}
.merit_title span .size{
  font-size: clamp(1.375rem, 1.327rem + 0.19vw, 1.5rem);
  line-height: 1.8;
  background: transparent;
  background-color: transparent;
}
.merit_item:last-child .ttl_line1{
  padding-bottom: 3px;
  padding-inline: 3% 6%;
}
.merit_item:last-child .ttl_line2{
  padding-inline: 3%;
}
.merit_text{
  width: 90%;
  margin: 0 auto 30px;
}
@media(max-width:960px){
  .merit_list{
    gap: 50px;
  }
  .merit_item{
    width: min(100%,600px);
    min-width: unset;
    margin-inline: auto;
  }
  .merit_item:nth-child(2n){
    transform: translateY(0);
}
  .merit_item:last-child{
    margin-bottom: 0;
  }
  .merit_title span .size{
    line-height: 2;
  }
  .ttl_line1,.ttl_line2{
    padding-inline: 8%;
  }
  .merit_item:last-child .ttl_line1,.merit_item:last-child .ttl_line2{
    padding-inline: 8%;
  }
}
@media(max-width:600px){
  .merit{
    padding-block: 15% 25%;
    background-size: 18px 18px;
  }
  .merit_title span .size{
    line-height: 2;
  }
  .merit_item:last-child .ttl_line1,.merit_item:last-child .ttl_line2{
    padding-inline: clamp(2%, calc(4.5vw - 6.4px), 12%);
  }
}
/*flow*/
.flow{
  background-color: #F6F1EA;
  position: relative;
  padding-block: 0 5%;
}
.flow_deco{
  position: absolute;
  background-image: url("../images/flow_deco1.svg"),url("../images/flow_deco2.svg"),url("../images/flow_deco3.svg"),url("../images/flow_deco4.svg");
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
  background-size: 20%,20%,25%,25%;
  background-position: 0 10%,100% 0,90% 60%,3% 79%;
  width: 100%;
  height: 100%;
}
.flow_inner{
  width: min(90%,1040px);
  margin-inline: auto;
  position: relative;
}
.flow_illust1,.flow_illust2{
  position: absolute;
  top: -120px;
}
.flow_illust1{
  width: clamp(62px,14.3vw,143px);
  height: auto;
  left: 10px;
}
.flow_illust2{
  width: clamp(94px,21.4vw,214px);
  height: auto;
  right: 0;
}

.flow_illust1 img,.flow_illust2 img{
  width: 100%;
  height: auto;
}
.flow_list{
  background-color: #fff;
  border: solid 3px #4ABBC6;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 55px;
  padding-block: 60px;
  position: relative;
}
.flow_list::before{
  content: "";
  position: absolute;
  inset: 8px;
  border: solid 1px #4ABBC6;
  border-radius: 3px;
}
.flow_item{
  width: min(90%,860px);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}
.flow_content{
  width: 65%;
}
.flow_item.no-image .flow_content {
  width: 100%;
  padding-bottom: 20px;
}
.flow_title_block{
  display: flex;
  align-items: flex-end;
  margin-bottom: 1rem;
  width: 100%;
}
.flow_step_badge {
  display: flex;
  flex-direction: column; 
  align-items: center;    
  justify-content: flex-start;
  background-image: url("../images/tooth_num-bg.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: clamp(54px,7vw,70px);
  height: clamp(59px,7.5vw,75px);
  flex-shrink: 0;
  padding-top: 9px; 
}
.step_txt {
  font-size: clamp(0.875rem, 0.827rem + 0.19vw, 1rem);
  font-weight: 700;
  color: #4ABBC6;
  line-height: 1;
}
.step_num {
  font-size: clamp(1.125rem, 0.885rem + 0.96vw, 1.75rem); 
  font-weight: 700;
  color: #4ABBC6;
  line-height: 1;
}
.flow_step_title{
  font-size: clamp(1.125rem, 0.375rem + 3vw, 1.5rem);
  font-weight: 700;
  flex-grow: 1;
  padding-bottom: 12px; 
  padding-left: 1rem;
  background-image: radial-gradient(#4ABBC6 30%, transparent 35%);
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 8px 8px;
}
.flow_step_title span{
  font-size: var(--fs-text);
}
.flow_text{
  line-height: 1.7;
  padding-left: 55px;
}
.flow_img_box{
  width: 30%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
}
.flow_img_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media(max-width:960px){
  .flow_illust1{
    top: clamp(-111px, -11.1vw, -81px);
  }
  .flow_illust2{
    top: clamp(-120px, -12vw, -90px);
  }
  .flow_item{
    flex-direction: column;
    gap: 20px;
  }
  .flow_content{
    width: 100%;
  }
  .flow_text{
    width: 95%;
    margin-inline: auto;
  }
  .flow_img_box{
    width: 90%;
    margin-inline: auto;
    aspect-ratio: 3 / 2;
  }
}
@media(max-width:600px){
  .flow{
    padding-block: 5% 10%;
  }
  .flow_illust1{
    top: clamp(-131px, -13.1vw, -64px);
  }
  .flow_illust2 {
    top: clamp(-140px, -14vw, -65px);
  }
  .flow_list{
    padding-block: 30px;
  }
  .flow_text{
    padding-left: 0;
  }
  .flow_img_box{
    width: 100%;
  }
}
/*fee*/
.fee{
  background-image: 
    linear-gradient(rgba(214, 214, 214, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(214, 214, 214, 0.3) 1px, transparent 1px),
    linear-gradient(to bottom, #FFFEFC 35%, #FCF9F5 80%,#F8F1EB 100%);
  background-repeat: repeat;
  background-position: left top;
  background-size: 25px 25px, 25px 25px,100% 100%; 
  position: relative;
  padding-block: 9% 3%;
}
.flow_bottom-wave{
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  top: -1px;
}
.fee .sub_text{
  margin-bottom: 0;
  width: min(100%, 890px);
  margin-inline: auto;
}
.fee .notes {
  text-align: left;
  width: min(100%, 890px);
  margin-inline: auto;
  font-size: clamp(0.625rem, 0.529rem + 0.38vw, 0.875rem);
  font-weight: 400;
  margin-bottom: 20px;
  }
.fee_extrafee{
  width: min(90%,485px);
  margin-inline: auto;
  border-collapse: collapse; 
  border-right: 1px solid #4ABBC6;
  border-bottom: 1px solid #4ABBC6;
  margin-bottom: 40px;
}
.fee_extrafee caption{
  width: max-content; 
  font-size: clamp(0.938rem, 0.913rem + 0.1vw, 1rem);
  color: #4ABBC6;
  background-color: #fff;
  border-top: 1px solid #4ABBC6;
  border-left: 1px solid #4ABBC6;
  border-right: 1px solid #4ABBC6;
  padding: 6px 16px;
  caption-side: top;
  text-align: left;
}
.fee_extrafee th,.fee_extrafee td{
  padding: 14px 20px; 
  font-size: clamp(0.938rem, 0.913rem + 0.1vw, 1rem);
  vertical-align: middle; 
}
.fee_extrafee th{
  background-color: #4ABBC6;
  color: #fff;
  border-left: 1px solid #4ABBC6;
  width: 55%;
}
.fee_extrafee tr:first-child th {
  border-top: 1px solid #4ABBC6; 
}
.fee_extrafee tr:last-child th {
  border-top: 1px solid #ffffff;
}
.fee_extrafee td{
  background-color: #fff;
  color: #4ABBC6;
  border-top: 1px solid #4ABBC6;
  border-left: 1px solid #4ABBC6;
}
.fee_list-inner{
  width: min(90%,1040px);
  margin-inline: auto;
}
.fee_list{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 60px 40px;
  margin-bottom: 80px;
}
.fee_card_warap{
  width: calc((100% - 40px) / 2);
  position: relative;
  display: flex;
  flex-direction: column;
}
.fee_card-shadow{
  position: absolute;
  background-color: #B4DCE0;
  inset: 0;
  transform: rotate(2deg);
  transform-origin: center;
}
.card_pin{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: auto;
  z-index: 3;
}
.card_pin img{
  width: 100%;
  height: auto;
}
.page_turn_deco{
  position: absolute;
  right: -10px;
  bottom: -7px;
  width: 60px;
  height: 56px;
  z-index: 5;
}
.page_turn_deco img{
  width: 100%;
  height: 100%;
}
.fee_card{
  width: 100%;
  background-color: #fff;
  border: solid 3px #4ABBC6;
  padding: 55px 15px 45px;
  clip-path: polygon(0 0,100% 0, 100% calc(100% - 45px), calc(100% - 45px) 100%, 0 100%);
  flex-grow: 1; 
  position: relative;
}
.fee_card::before{
  content: "";
  position: absolute;
  background-color: #4ABBC6;
  width: 100%;
  height: 6px;
  top: 0;
  left: 0;
}
.fee_label{
  font-weight: 700;
  color: #fff;
  background-color: #4ABBC6;
  border-radius: 30px;
  width: fit-content;
  margin-inline: auto;
  padding: 5px 20px;
  margin-bottom: 12px;
}
.fee_card_header{
  display: flex;
  align-items: center;
  background-color: #B4DCE0;
  border-left: solid 5px #4ABBC6;
  border-radius: 5px;
  padding: 5px 15px 3px 60px;
  position: relative;
  margin-bottom: 25px;
}
.fee_card_warap:nth-of-type(2n) .fee_card_header,
.fee_card_warap:nth-of-type(3n) .fee_card_header{
  margin-bottom: 35px;
}
.fee_card_warap:last-of-type .fee_card_header{
  margin-bottom: 10px;
}
.fee_card_warap:last-of-type .card_last{
  margin-bottom: 20px;
}
.fee_icon{
  position: absolute;
  width: clamp(45px,5.4vw,54px);
  height: auto;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
}
.fee_icon img{
  width: 100%;
  height: 100%;
}
.fee_card_title{
  font-size: clamp(1.375rem, 1.303rem + 0.29vw, 1.563rem);
  line-height: 1.3;
  padding-left: 10px;
  flex-grow: 1;
  background-image: radial-gradient(#4ABBC6 30%, transparent 35%); 
  background-repeat: repeat-x; 
  background-position: left bottom;
  padding-bottom: 6px;
  background-size: 8px 8px;
}
.fee_price_box{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 5%;
  margin-bottom: 25px;
}
.fee_card_warap:nth-of-type(2n) .fee_price_box{
  margin-bottom: 35px;
}
.fee_card_warap:last-child .fee_price_box{
  margin-bottom: 20px;
}
.price_label{
  color: #F77B3D;
  font-size: var(--fs-20);
  border: solid 1px #F77B3D;
  border-radius: 30px;
  padding: 3px 12px;
  flex-shrink: 0;
}
.price_text{
  font-size: clamp(1.25rem, 1.106rem + 0.58vw, 1.625rem);
}
.price_text .num{
  font-size: clamp(2.375rem, 2.255rem + 0.48vw, 2.688rem);
  letter-spacing: 0.03em;
  line-height: 1;
}
.price_text .num .size{
  font-size: clamp(1.25rem, 1.154rem + 0.38vw, 1.5rem);
}
.dental_loan_box{
  width: 100%;
  margin-bottom: 15px;
}
.loan_badge{
  position: relative;
  background-color: #4ABBC6;
  color: #fff;
  padding: 2px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.loan_icon{
  position: absolute;
  width: clamp(28px,3.4vw,34px);
  height: auto;
  left: 15%;
}
.loan_flex {
  display: flex;
  border: 1px solid #4ABBC6;
}
.loan_left {
  width: 35%; 
  background-color: #B4DCE0; 
  font-size: clamp(0.938rem, 0.913rem + 0.1vw, 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loan_right {
  width: 65%; 
  background-color: #fff;
  color: #4C4D4C;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding-bottom: 6px;
}
.loan_num {
  font-size: clamp(1.75rem, 1.702rem + 0.19vw, 1.875rem);
  font-weight: bold;
  line-height: 1.2;
}
.loan_num .size{
  font-size: var(--fs-text);
}
.fee_card_body{
  width: 90%;
  margin-inline: auto;
}
.fee_period{
  position: relative; 
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.period_icon{
  background-image: url("../images/icon-calender.svg");
  background-repeat: no-repeat;
  background-position: center;
  width: clamp(26px,3vw,30px);
  height: clamp(27px,3.1vw,31px);
}
.target_ttl{
  color: #4ABBC6;
  font-size: clamp(0.938rem, 0.913rem + 0.1vw, 1rem);
  margin-bottom: 12px;
}
.target_list{
  display: flex;
  flex-direction: column;
  gap: 10px; 
}
.target_list li{
  position: relative;
  padding-left: 25px;
  display: flex;
  align-items: center;
}
.target_list li::before{
  content: "";
  position: absolute;
  background-image: url("../images/fee_check.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  width: 10px;
  height: 12px;
  left: 6px;
}
.fee_text{
  font-size: var(--fs-20);
  font-weight: 700;
  background-color: #F9FFFF;
  border: solid 1px #4ABBC6;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.fee_text-illust{
  background-image: url("../images/fee_text-illust.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: clamp(56px,7.1vw,71px);
  height: clamp(78px,9.9vw,99px);
  margin-block: -20px;
}
@media(max-width:960px){
  .fee .notes{
    width: 100%;
  }
  .fee_list{
    flex-direction: column;
    margin-bottom: 60px;
  }
  .fee_card_warap{
    width: min(100%,530px);
    margin-inline: auto;
  }
  .fee_text{
    padding: 15px 10px;
    gap: 15px;
  }
  .fee_text-illust{
    margin-block: 0;
  }
  .fee_text-txt{
    width: 80%;
  }
}
@media(max-width:600px){
  .fee{
    padding-block: 15% 13%;
    background-size: 18px 18px, 18px 18px, 100% 100%;
  }
  .fee_extrafee th, .fee_extrafee td{
    padding: 6px 8px;
  }
  .fee_extrafee td{
    text-align: center;
  }
  .fee_card{
    padding: 55px 8px 45px;
  }
  .fee_card_header{
    padding: 5px 1px 3px 11%;
    margin-bottom: 15px;
  }
  .fee_card_warap:nth-of-type(2n) .fee_card_header, .fee_card_warap:nth-of-type(3n) .fee_card_header{
    margin-bottom: 15px;
  }
  .fee_card_title{
    width: 100%;
    text-align: left;
    padding-left: 8px;
  }
  .fee_icon{
    left: -4px;
  }
  .fee_price_box{
    width: min(100%,260px);
    margin-inline: auto;
    flex-direction: column;
    justify-content: flex-start;
    gap: 5px;
    margin-bottom: 20px;
  }
  .price_details{
    display: flex;
    flex-direction: column;
    margin-inline: auto;
  }
  .fee_card_body{
    width: 95%;
  }
}
/*payment*/
.payment {
  width: 100%;
  position: relative;
  padding-block: 10% 12%; 
  z-index: 0;
  clip-path: inset(0 0 0 0);
  background: #EEE8E1;
}
.payment::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url("../images/payment_bg_img.webp");
  background-size: cover;
  background-position: center 55%;
  background-repeat: no-repeat;
  z-index: -1;
  pointer-events: none;
}
.fee_bottom-line {
  position: absolute;
  top: -1px;  
  left: 0;
  width: 100%; 
  padding-top: 10%; 
  z-index: 5; 
  pointer-events: none; 
  background-image: 
    linear-gradient(rgba(214, 214, 214, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(214, 214, 214, 0.3) 1px, transparent 1px),url("../images/fee_bottom-line.svg");
  background-repeat: repeat,repeat,no-repeat;
  background-position: left top,left top, top center;
  background-size:  25px 25px,25px 25px,100% auto; 
  -webkit-mask-image: url("../images/fee_bottom-line.svg");
  mask-image: url("../images/fee_bottom-line.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: top center;
  -webkit-mask-size: 100% auto; 
  mask-size: 100% auto;
}
.fee_bottom-line img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: fill; 
  display: block;
}
.faq_top-wave{
  position: absolute;
  width: 100%;
  height: auto;
  bottom: -1px;
  left: 0;
}
.payment .main_title{
  margin-bottom: 30px;
}
.payment_inner{
  width: min(90%,1040px);
  margin-inline: auto;
}
.payment_list{
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.payment_list li{
  width: calc((100% - 40px) / 3);
  background-color: #fff;
  border-radius: 5px;
  padding: 20px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
}
.payment_list li::after{
  content: "";
  position: absolute;
  inset: 8px;
  border: solid 1px #4ABBC6;
  border-radius: 3px;
}
.payment_list .icon_box {
  width: clamp(40px,6vw,60px);
  height: clamp(25px,4vw,40px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.payment_list .icon_box img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.payment_list h3{
  font-weight: bold;
  font-size: var(--fs-20);
}
.payment_loan_box {
  background-color: #fff;
  border-radius: 5px;
  padding: 30px;
  position: relative;
  z-index: 0;
  margin-bottom: 60px;
}
.payment_loan_box::after{
  content: "";
  position: absolute;
  inset: 8px;
  border: solid 1px #4ABBC6;
  border-radius: 3px;
  z-index: -1;
}
.payment_loan_intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
.payment_loan_icon{
  width: clamp(30px,4.6vw,46px);
  height: auto;
}
.payment_loan_icon img{
  width: 100%;
  height: auto;
}
.payment_loan_intro h3{
  font-size: var(--fs-20);
  font-weight: bold;
  margin-bottom: 5px;
}
.payment_loan_text{
  margin-bottom: 15px;
}
.payment .view_btn{
  margin-inline: auto;
}
.loan_accordion{
  background-color: #F9FFFF;
  border: solid 1px #c4c4c4;
  border-radius: 5px;
}
.accordion_trigger {
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-weight: bold;
  text-align: center;
  list-style: none; 
}
.accordion_trigger::after {
  content: "▼";
  font-size: 1rem;
  margin-left: 8px;
  transition: transform 0.3s;
}
.loan_accordion[open] .accordion_trigger::after {
  transform: rotate(180deg);
}
.loan_accordion::details-content {
  height: 0;               
  overflow: hidden;         
  transition: height 0.3s ease-out, content-visibility 0.3s ease-out allow-discrete;
}
.loan_accordion[open]::details-content {
  height: auto;             
}
.plan_row {
  width: 95%;
  margin-inline: auto;
  padding: 15px 0;
  background-image: radial-gradient(#4ABBC6 30%, transparent 35%);
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 5px 5px;
}
.plan_row:last-child {
  background-image: none; 
}
.plan_row-inner{
  width: min(95%,420px);
  margin-inline: auto;
}
.plan_badge {
  background-color: #B4DCE0;
  border-left: solid 5px #4ABBC6;
  padding: 5px 15px 3px 20%;;
  border-radius: 5px;
  font-weight: bold;
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 10px;
}
.plan_row:last-child .plan_badge{
  margin-bottom: 15px;
}
.plan_row:last-child .badge_last{
  margin-bottom: 10px;
}
.plan_icon{
  position: absolute;
  width: clamp(45px, 5.4vw, 54px);
  height: auto;
  left: 3%;
  top: 50%;
  transform: translateY(-50%);
}
.plan_icon img{
  width: 100%;
  height: auto;
}
.plan_price_info{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 40px;
  border-bottom: 1px dashed #4ABBC6;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.plan_price_info p .size{
  font-size: clamp(1.25rem, 1.202rem + 0.19vw, 1.375rem);
  letter-spacing: 0.03em;
}
.plan_monthly_box{
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: center;
}
.plan_monthly_box .times{
  font-size: clamp(0.938rem, 0.913rem + 0.1vw, 1rem);
}
.plan_monthly_box .circle-num{
  display: flex;
  align-items: center;
  gap: 20px;
}
.plan_monthly_box .circle_label{
  font-size: clamp(0.875rem, 0.827rem + 0.19vw, 1rem);
  width: clamp(43px,4.8vw,48px);
  height: clamp(43px,4.8vw,48px);
  border: solid 1px #4C4D4C;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.plan_monthly_box .num{
  font-size: clamp(1.75rem, 1.558rem + 0.77vw, 2.25rem);
  letter-spacing: 0.03em;
}
.plan_monthly_box .num .size{
  font-size: var(--fs-text);
}
.deducation_content{
  text-align: center;
}
.deduction{
  font-size: var(--fs-24);
  font-weight: 700;
  margin-bottom: 20px;
}
.deduction_text{
  width: min(100%,845px);
  margin-inline: auto;
  margin-bottom: 15px;
}
.deducation_content .notes{
  font-size: clamp(0.625rem, 0.529rem + 0.38vw, 0.875rem);
  font-weight: 400;
  margin-bottom: 30px;
}
@media(max-width:600px){
  .payment{
    padding-block: 17% 20%;
    background-attachment: scroll, scroll !important;
  }
  .payment_list{
    gap: 8px;
    margin-bottom: 5px;
  }
  .payment_list li{
    width: calc((100% - 16px) / 3);
    margin-bottom: 16px;
    padding: 20px 6px;
  }
  .payment_list li::after{
    inset: 4px;
  }
  .payment_loan_box{
    padding: 30px 20px;
  }
  .plan_icon{
    left: 0;
  }
  .plan_price_info{
    flex-direction: column;
    gap: 0;
    align-items: center;
  }
  .plan_monthly_box{
    flex-direction: column;
    gap: 3px;
  }
  .plan_monthly_box .circle-num{
    gap:12px;
  }
  .deduction_text{
    text-align: left;
  }
}
/*movie*/
.movies{
  background-color: #FFFDF9;
  padding-block: 3% 5%;
}
.movies_inner{
  width: min(90%,1040px);
  margin-inline:auto;
  background-color: #fff;
  box-shadow: 4px 4px 12px rgb(0 0 0 / 15%); 
  padding: 35px 3% 50px;
}
.smile_icon{
  width: clamp(80px,9vw,90px);
  margin: 0 auto 20px;
  text-align: center;
  display: block;
}
.smile_icon img{
  width: 100%;
  height: auto;
}
.movies h2{
  font-size: var(--fs-24);
  text-align: center;
  margin-bottom: 1rem;
  border-bottom: solid 2px #4ABBC6;
  border-top: solid 2px #4ABBC6;
  padding-block: 6px;
}
.movies p{
  text-align: center;
  margin-bottom: 35px;
}
.movie_area{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.movie-item h3 {
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 10px;
  padding-left: 9px;
  border-left: 3px solid #4ABBC6;
}
.movie-item_frame {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: #eeeeee;
}
.movie-item_frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@media(max-width:960px){
  .smile_icon{
    margin: 0 auto 15px;
  }
  .movies h2{
    margin-bottom: 0.5rem;
  }
  .movie_area{
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .movie-item{
    width: 100%;
    max-width: 600px;
    margin-inline: auto;
  }
}
@media(max-width:600px){
  .movies{
    padding-block: 15% 12%;
  }
  .movies_inner{
    padding: 20px 3% 30px;
  }
  .movie-item h3{
    padding-left: 6px;
  }
  .movies p{
    text-align: left;
    margin-bottom: 25px;
  }
}
/*faq*/
.faq{
  background-color: #FFFDF9;
  padding-block: 5%;
}
.faq .sub_text{
  width: fit-content;
  margin-inline: auto;
}
.faq_inner{
  width: min(90%,1040px);
  margin-inline: auto;
}
.js-accordion-trigger {
  cursor: pointer;
  user-select: none;
}
.faq_category{
  margin-bottom: 20px;
  background-color: #fff;
  border: solid 1px #C4C4C4;
  border-radius: 5px;
  padding-inline:10px;
  border-left: solid 10px #4ABBC6;
}
.faq_head_title{
  font-size: var(--fs-20);
  font-weight: 700;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap:15px;
}
.faq_head_title.is-open {
  color: #4ABBC6;
}
.faq_plus {
  position: relative;
  width: 20px;
  height: 20px;
  display: block;
  margin-right: 5px;
  flex-shrink: 0;
}
.faq_plus::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #4ABBC6; 
  transform: translateY(-50%);
}
.faq_plus::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background-color: #4ABBC6; 
  transform: translateX(-50%);
  transition: transform 0.3s ease; 
}
.faq_head_title.is-open .faq_plus::after {
  transform: translateX(-50%) rotate(90deg);
}
.faq_content {
  overflow: hidden;
  transition: height 0.3s ease-out;
}
.faq_content dl{
  padding: 20px;
  border-top: solid 1px #4ABBC6;
}
.faq_q-ttl{
  border-bottom: solid 1px #C4C4C4;
  padding: 18px 0;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.q_ttl{
  position: relative;
  padding-left: 40px;
  display: flex;
  align-items: flex-start;
}
.q_ttl::before{
  content: "Q.";
  font-size: clamp(1.375rem, 1.183rem + 0.77vw, 1.875rem);
  font-weight: 700;
  color: #4ABBC6;
  position: absolute;
  left: 0;
  line-height: 1;
}
.faq_arrow {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-top: 2px solid #4ABBC6;
  border-right: 2px solid #4ABBC6;
  transform: rotate(135deg);
  transition: transform 0.3s;
  margin-right: 5px;
  flex-shrink: 0;
}
.faq_q-ttl.is-open .faq_arrow {
  transform: rotate(-45deg); 
}
.faq_a_content {
  overflow: hidden;
  transition: height 0.3s ease-out;
  margin-left: 0; 
}
.faq_a_content > span {
  display: block;
  padding: 10px 20px 20px 35px;
  line-height: 1.8;
  font-weight: 500;
}
@media(max-width:600px){
  .faq{
     padding-block: 8%;
  }
  .faq_category{
    border-left: solid 5px #4ABBC6;
  }
  .faq_head_title{
    padding: 10px 0;
    gap: 12px;
  }
  .q_ttl{
    padding-left: 28px;
  }
  .faq_content dl{
    padding: 15px 0;
  }
  .faq_a_content > span{
    padding: 10px 20px 20px 25px;
  }
}
/*cta*/
.cta_container{
  padding-top: 12%;
  font-size: var(--fs-text);
  text-align: center;
  position: relative;
  background: linear-gradient(rgba(255, 255, 255, 0.7) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.7) 1px, transparent 1px),linear-gradient(to bottom,#fff 30%,#F7EEE1 100%);
  background-repeat: repeat,repeat,no-repeat;
  background-position: left top;
  background-size: 25px 25px,25px 25px,100% 100%;
  padding-bottom: 12%;
}
.access_top-wave{
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  bottom: -1px;
}
.cta_lead{
  position: relative;
  z-index: 3;
}
.cta_catch{
  font-size: clamp(1.375rem, 0.894rem + 1.92vw, 2.625rem);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.cta_catch .size{
  font-size: clamp(1.75rem, 1.173rem + 2.31vw, 3.25rem);
}
.cta_image_area{
  width: 100%;
  height: auto;
  margin-block: -40px 80px;
  position: relative;
  z-index: 1;
}
.cta_image_area img{
  width: 100%;
  height: auto;
}
.cta_main_box{
  text-align: center;
  background-color: #fff;
  width: min(90%,1040px);
  margin-inline: auto;
  position: relative;
  padding: 50px 0;
}
.cta_main_box::before{
  content: "";
  position: absolute;
  border-top: 3px solid #4ABBC6;
  border-bottom: 3px solid #4ABBC6;
  inset: 12px;
}
.cta_main_text{
  font-size: clamp(1rem, 0.76rem + 0.96vw, 1.625rem);
  font-weight: 700;
  margin-bottom: 35px;
}
.cta_main_text .size{
  font-size: clamp(1.125rem, 0.788rem + 1.35vw, 2rem);
}
.cta_btn-area{
  width: min(90%,810px);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.cta_tel_block {
  width: calc((100% - 40px) / 3); 
  background-color: #fff;
  border-top: 2px solid #4ABBC6; 
  border-bottom: 2px solid #4ABBC6; 
  padding: 8px 10px;
  text-align: center;
  cursor: default;
  pointer-events: none;
}
.cta_tel_label {
  font-size: var(--fs-text);
  font-weight: bold;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}
.cta_tel_number {
  font-size:clamp(2.125rem, 2.077rem + 0.19vw, 2.25rem);
  font-weight: bold;
  color: #4ABBC6;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cta_tel_number::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("../images/icon_phone.svg"); 
  background-repeat: no-repeat;
  background-size: contain;
}
.cta_btn{
  position: relative;
  width: calc((100% - 40px) / 3);
  padding: 8px 15px;
  border-radius: 15px;
  text-decoration: none;
  font-size: clamp(1.25rem, 1.106rem + 0.58vw, 1.625rem);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}
.cta_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
.btn_orange{ 
  background-image: linear-gradient(to bottom,#F39160 0%,#F39160 44%,#F77B3D 44%, #F77B3D 100%); 
}
.btn_green{ 
  background-image: linear-gradient(to bottom,#82CD88 0%,#82CD88 44%,#5FC367 44%, #5FC367 100% );
}
.btn_label {
  font-size: var(--fs-text);
  white-space: nowrap;
}
.btn_text_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.btn_icon {
  width: 30px;
  height: 30px;
}
.btn_icon img {
  width: 100%;
  height: 100%;
  object-fit: contain; 
}
.cta_btn .btn_arrow {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta_btn .btn_arrow::after {
  content: "▶︎";
  font-size: 0.75rem;
  margin-left: 1px;
}
.btn_orange .btn_arrow::after{ 
  color: #F77B3D; 
}
.btn_green .btn_arrow::after{
  color: #5FC367; 
}
@media(max-width:960px){
  .cta_container .pc_br{
    display: none;
  }
  .cta_container{
    padding-bottom: 18%;
  }
  .cta_catch{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .cta_btn-area{
    flex-direction: column;
  }
  .cta_tel_block{
    width: min(100%, 500px);
    margin-inline: auto;
  }
  .cta_btn{
    width: min(100%,500px);
    margin-inline: auto;
  }
}
@media(max-width:600px){
  .cta_image_area{
    margin-block: -15px 30px;
  }
  .cta_container{
    padding-bottom: 23%;
  }
  .cta_main_box{
    padding: 35px 0;
  }
  .cta_main_text{
    width: 90%;
    margin-inline: auto;
  }
  .cta_tel_block {
    pointer-events: auto !important; 
    cursor: pointer !important;
    position: relative;
    z-index: 5;
  }
}
/*access*/
.access{
  padding-bottom: 50px;
}
.access_map{
  width: 100%;
  height: clamp(350px, 45vh, 500px);
  margin-bottom: 50px;
}
.access_map iframe {
  width: 100% !important; 
  height: 100% !important; 
  display: block;
}
.access_info{
  width: min(90%,1040px);
  margin-inline: auto;
}
.access_info_list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: fit-content;
  margin-inline: auto;
}
.access_item {
  display: flex;
  align-items: center;
  gap: 15px; 
}
.access_item::before {
  content: "";
  display: inline-block;
  width: clamp(29px,3.9vw,39px);  
  height: clamp(23px,3vw,30px); 
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}
.icon_train::before {
  background-image: url("../images/icon_train.svg");
}
.icon_car::before {
  background-image: url("../images/icon_car.svg"); 
}
@media(max-width:600px){
  .access{
    padding-top: 10%;
  }
  .access_map{
    margin-bottom: 30px;
  }
}
/*footer*/
footer{
  background-color: #F6F1EA;
  padding-block: 60px 15px;
}
.footer_inner {
  width: min(90%, 1040px); 
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 40px;
  margin-bottom: 80px;
}
.footer_info_block {
  width: 42%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.footer_official_link_box{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  width: 100%;
  max-width: 360px;
  margin-bottom: 2px;
  transition: transform 0.3s ease; 
}
.footer_logo {
  width: 325px;
  margin-bottom: 3px;
}
.footer_logo img {
  width: 100%;
  height: auto;
}
.footer_official_btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: clamp(0.938rem, 0.913rem + 0.1vw, 1rem);
  color: #A38168;
  margin: 0;
  transition: background-color 0.3s ease, color 0.3s ease; 
}
.footer_official_btn::before,.footer_official_btn::after{
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: #e0d5cb;
  transition: background-color 0.3s ease;
}
.footer_official_btn::before{
  margin-right: 5px;
}
.footer_official_btn::after{
  margin-left: 5px;
}
.footer_official_link_box:hover{
  transform: translateY(-4px);
}
.footer_official_link_box:hover .footer_official_btn::before,.footer_official_link_box:hover .footer_official_btn::after{
  background-color: #A38168;
}
.footer_address {
  font-style: normal;
}
.footer_tel_box {
  background-color: #fff;
  border-top: 2px solid #4ABBC6; 
  border-bottom: 2px solid #4ABBC6; 
  padding: 8px 10px;
  text-align: center;
  max-width: 325px;
  transition: background-color 0.3s ease, color 0.3s ease; 
}
.tel_label {
  font-size: var(--fs-20);
  letter-spacing: 0.05em;
}
.footer_tel_box{
  pointer-events: none;
  cursor: default; 
  width: 100%;
}
.tel_number {
  font-size: clamp(2.125rem, 2.077rem + 0.19vw, 2.25rem);
  font-weight: bold;
  color: #4ABBC6; 
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.tel_number::before {
  content: "";
  width: clamp(26px,3vw,30px);
  height: clamp(26px,3vw,30px);
  background-image: url("../images/icon_phone.svg"); 
  background-repeat: no-repeat;
  background-size: contain;
}
.footer_timetable_block {
  width: 53%; 
}
.timetable {
  width: 100%;
  border-collapse: collapse; 
  text-align: center;
  margin-bottom: 8px;
}
.timetable th {
  background-color: #A38168; 
  color: #fff;
  padding: 10px 5px;
}
.timetable th:first-child {
  width: 30%;
}
.timetable td {
  padding: 12px 5px;
  border-bottom: 1px solid #A38168; 
}
.cl_brown{
  color: #A38168;
}
.timetable_notes{
  margin-left: 5%;
}
small{
  display: block;
  text-align: center;
  font-size: clamp(0.625rem, 0.577rem + 0.19vw, 0.75rem);
  width: 90%;
  margin-inline:auto;
}
@media(max-width:960px){
  .footer_inner{
    flex-direction: column;
    margin-bottom: 50px;
  }
  .footer_info_block{
    width: 100%;
  }
  .footer_logo{
    margin-bottom: 15px;
  }
  .footer_tel_box{
    width: 100%;
  }
  .footer_timetable_block{
    width: min(100%,600px);
    margin-inline: auto;
  }
}
@media(max-width:600px){
  footer{
    padding-bottom: 80px;
  }
  .footer_tel_box {
    pointer-events: auto !important; 
    cursor: pointer;                 
  }
  .timetable td{
    padding: 12px 0;
  }
  .timetable_notes{
    margin-left: 2%;
  }
}
.page_top {
  position: fixed;
  right: 10px;
  bottom: 30px;
  width: clamp(70px,9vw,90px);
  height: clamp(70px,9vw,90px);
  background-color: #fff; 
  color: #43b9ca;
  border: 2px solid #43b9ca;
  text-decoration: none;
  font-weight: bold;
  border-radius: 76% 52% 65% 52% / 76% 74% 48% 47%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.4s, visibility 0.4s, transform 0.4s, border-radius 0.6s ease-in-out, background-color 0.3s;
  z-index: 999;
}
.page_top .arrow {
  display: block;
  width: clamp(10px,1.4vw,14px);
  height: clamp(10px,1.4vw,14px);
  border-top: 2px solid #43b9ca;
  border-left: 2px solid #43b9ca;
  transform: rotate(45deg);
  margin-top: 5px;
  transition: transform 0.3s ease;
}
.page_top .text {
  font-size: clamp(0.875rem, 0.827rem + 0.19vw, 1rem);
  letter-spacing: 0.05em;
  line-height: 1.3;
}
.page_top.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
:has(#js-nav.is-open) .page_top{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none; 
}
@media (hover: hover){
  .page_top:hover {
  border-radius: 40% 60% 45% 55% / 55% 40% 60% 45%;
  background-color: #43b9ca; 
  color: #fff;
}
  .page_top:hover .arrow {
  transform: rotate(45deg) translate(-2px, -2px);
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
}
}
@media(max-width:600px){
  .page_top{
    right: 8px;
    bottom: 75px;
  }
  .page_top .text{
    line-height: 1;
  }
}