@charset "utf-8";
* {
  box-sizing: border-box;
}
html {
  color: #222222;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 400;
  background: #fbfbfb;
  font-optical-sizing: auto;
  font-feature-settings: "palt"1;
  overflow-wrap: break-word; /* 収まらない場合に折り返す */
  word-break: normal; /* 単語の分割はデフォルトに依存 */
  line-break: strict; /* 禁則処理を厳格に適用 */
  font-kerning: normal;
  vertical-align: baseline;
  line-height: 1.5;
  width: 100%;
  min-width: 320px;
  max-width: 100%;
  /* cursor: auto;状況に合わせた形状に変化 */
  overflow-x: hidden;
  scroll-behavior: smooth;
  box-sizing: border-box;
  /* scrollbar-gutter: stable; 常にスクロールバー分の余白を確保 */
}
:root {
  --main-color: #4051E1;
  --px-1: 0.0625rem; /* 1px */
  --px-2: 0.125rem; /* 2px */
  --px-3: 0.1875rem; /* 3px */
  --px-4: 0.25rem; /* 4px */
  --px-5: 0.3125rem; /* 5px */
  --px-6: 0.375rem; /* 6px */
  --px-7: 0.4375rem; /* 7px */
  --px-8: 0.5rem; /* 8px */
  --px-9: 0.5625rem; /* 9px */
  --px-10: 0.625rem; /* 10px */
  --px-11: 0.6875rem; /* 11px */
  --px-12: 0.75rem; /* 12px */
  --px-13: 0.8125rem; /* 13px */
  --px-14: 0.875rem; /* 14px */
  --px-15: 0.9375rem; /* 15px */
  --px-16: 1rem; /* 16px */
  --px-17: 1.0625rem; /* 17px */
  --px-18: 1.125rem; /* 18px */
  --px-19: 1.1875rem; /* 19px */
  --px-20: 1.25rem; /* 20px */
  --px-21: 1.3125rem; /* 21px */
  --px-22: 1.375rem; /* 22px */
  --px-23: 1.4375rem; /* 23px */
  --px-24: 1.5rem; /* 24px */
  --px-25: 1.5625rem; /* 25px */
  --px-26: 1.625rem; /* 26px */
  --px-27: 1.6875rem; /* 27px */
  --px-28: 1.75rem; /* 28px */
  --px-29: 1.8125rem; /* 29px */
  --px-30: 1.875rem; /* 30px */
  --px-31: 1.9375rem; /* 31px */
  --px-32: 2rem; /* 32px */
  --px-33: 2.0625rem; /* 33px */
  --px-34: 2.125rem; /* 34px */
  --px-35: 2.1875rem; /* 35px */
  --px-36: 2.25rem; /* 36px */
  --px-37: 2.3125rem; /* 37px */
  --px-38: 2.375rem; /* 38px */
  --px-39: 2.4375rem; /* 39px */
  --px-40: 2.5rem; /* 40px */
  --px-41: 2.5625rem; /* 41px */
  --px-42: 2.625rem; /* 42px */
  --px-43: 2.6875rem; /* 43px */
  --px-44: 2.75rem; /* 44px */
  --px-45: 2.8125rem; /* 45px */
  --px-46: 2.875rem; /* 46px */
  --px-47: 2.9375rem; /* 47px */
  --px-48: 3rem; /* 48px */
  --px-49: 3.0625rem; /* 49px */
  --px-50: 3.125rem; /* 50px */
  --px-51: 3.1875rem; /* 51px */
  --px-52: 3.25rem; /* 52px */
  --px-53: 3.3125rem; /* 53px */
  --px-54: 3.375rem; /* 54px */
  --px-55: 3.4375rem; /* 55px */
  --px-56: 3.5rem; /* 56px */
  --px-57: 3.5625rem; /* 57px */
  --px-58: 3.625rem; /* 58px */
  --px-59: 3.6875rem; /* 59px */
  --px-60: 3.75rem; /* 60px */
  --px-61: 3.8125rem; /* 61px */
  --px-62: 3.875rem; /* 62px */
  --px-63: 3.9375rem; /* 63px */
  --px-64: 4.0625rem; /* 64px */
  --px-65: 4.125rem; /* 65px */
  --px-66: 4.1875rem; /* 66px */
  --px-67: 4.25rem; /* 67px */
  --px-68: 4.3125rem; /* 68px */
}
.sp,header .flex.sp, .sp.kv-tag-sp {
  display: none;
  display: none;
}
section{
  scroll-margin-top: 4rem;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  transition: opacity 0.25s ease;
}
a:hover {
  opacity: 0.5;
  transition: opacity 0.25s ease;
}
img {
  width: 100%;
}
.flex {
  display: flex;
}
.flex.column {
  flex-direction: column;
}
.material-symbols-outlined {
  font-variation-settings:
    'FILL'0, 'wght'200, 'GRAD'0, 'opsz'24
}
.btn {
  display: block;
  padding: 0.5rem 1.5rem;
  text-align: center;
  background: var(--main-color);
  color: #fff;
  border-radius: 100px;
  font-weight: 600;
}
.btn .material-symbols-rounded {
  vertical-align: middle;
  font-size: 1.3em;
  margin-left: 0.25em;
  font-variation-settings:
    'FILL'0, 'wght'300, 'GRAD'0, 'opsz'24;
}
header {
  background: #fff;
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
 
}
#top-header{
   position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
h1 a.logo_kinmei {
  display: block;
  max-width: 120px;
}
a.logo_note {
  display: block;
  max-width: 120px;
  margin-left: 1em;
}
header .flex.max-width1200 {
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
#KV {
  width: 100%;
  height: 80vh;
  position: relative;
  aspect-ratio: 16 / 9; /* 常に16:9比率を維持 */
  background: url("../images/KV250905.jpg") center center / cover no-repeat;
  margin-top: 77px;
}
#copy {
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
  padding: 0 1rem;
}
#service-copy, #service-title {
  color: var(--main-color);
  font-weight: 700;
}
#service-copy {
  font-size: var(--px-26);
  margin-bottom: 0.5em;
}
#service-title {
  font-size: var(--px-44);
  margin-bottom: 0.5em;
}
#service-title .small {
  font-size: var(--px-36);
  display: block;
  margin-bottom: 0.25em;
}
.KV-tag-wrapper {
  gap: 1rem;
}

.KV-tag {
  font-size: var(--px-18);
  padding: 0.5em 1em;
  border-radius: 4px;
  color: #fff;
  text-shadow: 0 0 8px rgb(24 32 73 / 90%), 5px 5px 8px rgb(48 70 181 / 90%);
  box-shadow: inset 7px 8px 8px 4px rgb(83 94 139 / 50%);
  border: 1px solid rgb(219 231 255 / 57%);
  flex: 1;
  text-align: center;
  background-image: linear-gradient(149deg, rgb(30 73 209 / 90%), rgb(19 200 255 / 31%));
  backdrop-filter: blur(4px);
  position: relative;
  z-index: 0;
}
.KV-tag::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  box-shadow: inset 4px 4px 2px 0 rgb(39 128 243 / 68%), 9px 8px 6px 0px rgb(223 242 251 / 45%);
  mix-blend-mode: screen; /* ★ スクリーン合成 */
  pointer-events: none;
  background-image: linear-gradient(149deg, rgb(48 129 255 / 20%), rgb(255 255 255 / 50%));
  border: 1px solid rgb(255 255 255 / 41%);
}
.KV-tag::before {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: inset 4px 4px 2px 0 rgb(39 128 243 / 68%), -2px -1px 0px 2px rgb(27 74 179 / 25%), 0px 0px 0px 2px rgb(49 122 173 / 25%), 7px 9px 10px rgb(152 167 227 / 50%);
  mix-blend-mode: darken;
  /* pointer-events: none; */
  background: rgb(98 174 255 / 52%);
  top: 4px;
  left: 4px;
  backdrop-filter: blur(4px);
}
#PICKUP, #CONTACT {
  background: #F5F7FF;
  width: 100%;
  padding: 4rem 1rem;
}
.bg {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
  position: relative;
  max-width: 1200px;
}
#PICKUP .bg, #CONTACT .bg {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(50, 60, 100, 0.1);
}
.header-style {
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}
h3.header-style {
  font-size: var(--px-68);
}
#PICKUP h3.header-style, #CONTACT h3.header-style {
  position: absolute;
  top: -0.5em;
  left: 2rem;
}
.colorchange01 {
  color: var(--main-color);
}
h3.header-style .small {
  font-size: var(--px-18);
  font-weight: 400;
  margin-left: 1em;
}
#PICKUP h4.header-style {
  font-size: var(--px-48);
}
h4.header-style .small {
  font-size: var(--px-18);
  font-weight: 400;
  margin-left: 1em;
}
#PRODUCT h4.header-style {
  margin-bottom: 1.5rem;
}
/*.slider-wrapper{
  position: relative;
}
#PRODUCT h4.header-style{
    position: absolute;
  top: -0.5em;
  left: 2rem;
  z-index: 11;
}*/
.inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.text {
  font-size: var(--px-18);
}
.photo {
  border-radius: 8px;
  display: block;
  overflow: hidden;
}
/*PICKUP*/
#info-box {
  margin-top: 2rem;
}
#product-info h4 {
  color: var(--main-color);
  font-weight: 600;
  font-size: var(--px-24);
}
#product-info h4 .product-name {
  display: inline-block;
  background: var(--main-color);
  color: #fff;
  padding: 0.1em;
  font-size: var(--px-30);
  margin-top: 0.25em;
}
#info-box {
  gap: 1rem;
}
#info-box .photo, #info-box .text-box {
  flex: 1;
}
#info-box .text {
  margin-top: 0.5em;
}
.circle {
  border: solid 1px var(--main-color);
  border-radius: 50%;
  display: block;
  width: 80px;
  height: 80px;
  position: relative;
}
.circle p {
  text-align: center;
  color: var(--main-color);
  font-size: var(--px-16);
  font-weight: 500;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: inline-block;
  white-space: nowrap;
  line-height: 1.4;
}
#product-tags-box {
  margin-top: 1em;
  gap: 0.5em;
}
#case {
  margin-top: 2rem;
}
#case .box {
  position: relative;
  flex: 1;
}
#case-box {
  gap: 4rem;
  width: 97%;
  margin: 0 auto;
  margin-top: 1.5rem;
}
.num {
  font-family: "Montserrat", sans-serif;
  font-size: var(--px-42);
  color: var(--main-color);
  position: absolute;
  top: -0.65em;
  left: -0.3em;
  font-weight: 200;
}
#case-box h5 {
  font-size: var(--px-20);
  text-align: center;
  font-weight: 600;
  color: var(--main-color);
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
#case-box .text {
  font-size: var(--px-16);
  text-align: center;
}
#price.btn {
  background: #64667B;
  margin-bottom: 0.8rem;
  font-size: var(--px-16);
}
#price button.btn {
  width: 100%;
  border: none;
}
/*FLOW*/
#FLOW {
  background: #fff;
  /*  padding-top: 1.5rem;
 padding-bottom: 1.5rem;*/
}
#FLOW .icon {
  width: 7.48vw;
  max-width: 100px;
  flex: 1;
  aspect-ratio: 1 / 1;
}
.icon-01 {
  transform: /*translateX() */ translateY(10px);
}
.icon-02 {
  transform: scale(0.9);
}
.icon-03 {
  transform: /* translateY()*/ translateX(6px) scale(0.9);
}
.icon-04 {
  transform: /* translateX() */ translateY(-1px) scale(0.9);
}
.icon-05 {
  transform: /*translateX() */ translateY(4px);
}
#FLOW ul {
  gap: 4rem;
  width: 97%;
  margin: 0 auto;
  margin-top: 1.5rem;
  justify-content: space-between;
  align-items: center;
}
#FLOW ul li {
  position: relative;
  flex: 1;
  align-items: center;
}
#FLOW ul li::after {
  content: url("../images/arrow_right.svg");
  display: block;
  position: absolute;
  top: 50%;
  right: -3.3rem;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  z-index: 1;
}
#FLOW ul li:last-child::after {
  display: none;
}
.icon-name-flow {
  font-size: clamp(1rem, 1.464vw, 1.25rem);
  text-align: center;
  color: #2B3588;
}
/*FEATURES*/
#FEATURES {
  background: #FBFBFB;
}
#FEATURES h4 {
  font-size: var(--px-20);
  color: #2B3588;
  vertical-align: middle;
  font-weight: 600;
}
#FEATURES h4::before {
  content: url("../images/icon-checkmark.svg");
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 0.5em;
  transform: translateY(-2px);
}
#FEATURES ul {
  width: 97%;
  margin: 0 auto;
  margin-top: 1.5rem;
}
#FEATURES ul li {
  margin-bottom: 1rem;
}
.features-box {
  gap: 2rem;
  align-items: center;
}
.flex-L {
  flex: 4;
}
.flex-R {
  flex: 1;
}
.img-01 {
  transform: translateX(-12px) scale(0.9);
}
.img-02 {
  transform: scale(0.8);
}
.img-03 {
  transform: scale(0.9);
}
.flex-L .text {
  margin-top: 0.5em;
}
/*FAQ*/
#FAQ {
  background: #fff;
}
/*CONTACT*/
#CONTACT .text {
  text-align: center;
  margin-top: 1em;
  margin-bottom: 1em;
}
.profile {
  text-align: center;
  color: var(--main-color);
  margin-top: 1em;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
font-weight: 500;
}
.profile a {
  font-size: var(--px-26);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-weight: 600;
  vertical-align: middle;
  color: var(--main-color);
}
.profile a .material-symbols-rounded {
  vertical-align: middle;
}
/*banner*/
#AD-area {
  padding: 2rem;
}
#AD-area .flex {
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
}
.banner {
  flex: 1;
}
/*footer*/
footer {
  background: #2B3588;
  text-align: center;
  padding: 0.5em;
  color: #fff;
}
/*PRODUCT*/
#PRODUCT {
  margin-top: 3rem;
}
/*スライドショー*/
.product-slider {
  max-width: 1000px;
  width: 97%;
  margin: 0 auto;
  position: relative; /* ボタンの絶対配置の基準にする */
}
/* 16:9 の表示枠。中でフェードさせる */
.slider-viewport {
  width: 100%;
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  background: #f7f7f7;
}

/* フェード用：全スライドを同じ位置に重ねる */
.slides {
  list-style: none;
  margin: 0;
  padding: 0;
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none; /* 非アクティブは操作させない */
  user-select: none;
}
.slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 常に16:9で美しく見せる */
}
.arrow-wrapper{
  position: relative;
}
/* ナビボタン（左右） */
.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent; /* ★背景なし */
  padding: 4px; /* 透明の当たり判定（44px目安） */
  z-index: 10;
  cursor: pointer;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  color: var(--main-color);
}
.nav .material-symbols-rounded {
  font-variation-settings:
    'FILL'0, 'wght'100, 'GRAD'0, 'opsz'24;
  font-size: 78px;
  text-shadow: 0 0 6px rgb(255, 255, 255), 0 0 6px rgb(255, 255, 255), 0 0 8px rgb(255, 255, 255);
}
.nav.prev {
  left: -3.3em;
}
.nav.next {
  right: -3.3em;
}
/*.nav:focus {
  outline: 2px solid #4da3ff;
  outline-offset: 2px;
}*/
/* ドット */
.dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 12px 12px 6px;
}
.dot {
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #c9c9c9;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  padding: 0;
  display: inline-block;
}
.dot.is-active {
  background: var(--main-color);
}
/*.dot:focus {
  outline: 2px solid #4da3ff;
  outline-offset: 2px;
}*/
/* カテゴリ＋キャプションのラッパー（左揃え） */
.caption-wrapper {
  text-align: left;
  margin-bottom: 2rem;
}
.category {
  display: inline-block;
  font-size: var(--px-14);
  font-weight: 600;
  color: var(--main-color);
  padding: 2px 1em;
  border: 1px solid var(--main-color);
  border-radius: 999px;
  margin-bottom: 0.5em;
}
.caption {
  font-size: var(--px-16);
  margin: 2px 0 0;
}
.productname {
  color: var(--main-color);
  font-weight: 600;
  font-size: var(--px-18);
  margin-bottom: 0.25em;
}
/* アクセシビリティ用の視覚的に隠すユーティリティ */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 1px, 1px);
  white-space: nowrap;
  border: 0;
}
/*モーダル*/
/* 背景スクロールを止める */
html.modal-open, body.modal-open {
  overflow: hidden;
} /* スクロールロックの基本。 */
/* オーバーレイ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.modal-overlay.is-open {
  display: block;
  opacity: 1;
}
/* モーダル本体 */
/* === Modal base === */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none; /* is-openで表示 */
}
.modal.is-open {
  display: block;
}
.modal__overlay {
  position: absolute;
  inset: 0;
  /* 半透明の黒 */
  background: rgba(0, 0, 0, 0.5);
  /* 背景をぼかす */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); /* Safari対応 */
  opacity: 0;
  transition: opacity .25s ease;
}
.modal.is-open .modal__overlay {
  opacity: 1;
}
.modal__dialog {
  position: relative;
  background: #fff;
  border-radius: 16px; /* 全体を角丸に */
  /*overflow: hidden;       内容を角丸でクリップ */
  /*width: 80%;*/
  max-width: 85% ;
  margin: 5svh auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  max-height: 80svh;
  
}
.modal__wrapper {
  border-radius: 16px;
  overflow: hidden; /* ヘッダ角丸を保つ */
  max-height:80svh;
  overflow-y: scroll;
}
.modal.is-open .modal__dialog {
  transform: translateY(0);
  opacity: 1;
}
.modal__header, .modal__footer {
  padding: 14px 16px;
  background: #fafafa;
}
.modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}
.modal__content {
  padding: 20px;
  overflow: auto; /* 中身が増えてもスクロール */
}
/* 閉じるボタンを外に浮かせる */
.modal__close {
  position: absolute;
  top: -16px; /* モーダルの外にずらす */
  right: -16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #222222;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease;
}
.modal__close .material-symbols-rounded {
  color: #fff;
}
.modal__close:hover {
  background: #f5f5f5;
  transition: background 0.3s ease;
}
.modal__close .material-symbols-rounded:hover {
  color: #222222;
  transition: color 0.3s ease
}
.btn, button.btn:focus, [tabindex]:focus {
  outline: none; /* 黒い枠を消す */
  width: 100%;
  border: none;
}
button.btn:focus, [tabindex]:focus {
  outline: 2px solid #4da3ff;
  outline-offset: 2px;
}
.modal__close:focus-visible, [data-modal-close]:focus-visible {
  outline: none; /* 黒い枠を消す */
}
.modal__content h4{
  font-size: var(--px-32);
  font-weight: 300;
  margin-bottom: 16px;
}
.modal__content h5 .small{
  font-size: var(--px--18);
  
}
.modal__content .flex{
  gap: 10px;
  align-items: stretch;
}
.modal-box-L ,.modal-box-R{
  flex: 1;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid var(--main-color);
}

.modal-box-L h5,.modal-box-R h5{
  color: var(--main-color);
  font-weight: 500;
  font-size: var(--px-18);
  margin-bottom: 0.6em;
}
.modal__content h5 .small
{font-size: var(--px-14);  
  font-weight: 600;
}
.modal__content .category{
  min-width: 5em;
  font-weight: 500;
  display: inline-block;
  line-height: 1.5;
  text-align: center;
}

.modal__content ul li{
  display: flex;
}
.modal__content ul li p{
  width: 100%;
}
.indent{
   margin-right: 1em;
  display: block;
}
  .modal__content .info-table h5 .indent{
    display: inline;
  }
.table-wrapper{
   width: 100%;     
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch;
  margin-top: 10px;
}
.table-style{
  width: 100%;
  min-width: 768px;
}
.table-style thead{
  background: var(--main-color);
  color: #fff;
  font-weight: 500;
  
}
.table-style th,.table-style td {
  padding: 0.25em 0.5em;
  text-align: center;
  font-weight: 600;
}
.main-price{
  color: var(--main-color);
}
.option-price{
  background: #F5F7FF;
}
.table-style th .small,.table-style td .small{
  display: block;
  font-size: var(--px-14);
   text-align: center;
  font-weight: 400;
  color: #222222;
}
.info-table{
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
  font-size: var(--px-14);
  margin-top: 16px;
}
.info-table .material-symbols-rounded{
  vertical-align: middle;
  font-size: var(--px-16);
  margin-right: 0.5em;
  font-variation-settings:
  'FILL' 0,
  'wght' 500,
  'GRAD' 0,
  'opsz' 24

}
.modal__content .info-table h5{
    color: var(--main-color);
  font-weight: 500;
  font-size: var(--px-18);
}

.modal__content .info-table h5 .material-symbols-rounded{
  font-size: var(--px-20);
}

/* 背景スクロール固定用 */
.u-lock-scroll {
  overflow: hidden;
}
/*アコーディオン*/
.FAQ-list {
  margin-top: 1.5rem;
  padding: 0;
  width: 100%;
}
.FAQ-list dt {
  cursor: pointer;
  padding: 12px;
  background: transparent;
  border-top: 1px solid #ddd;
  font-size: var(--px-18);
  font-weight: 600;
}
.FAQ-list dt p::before {
  content: "Q";
  color: var(--main-color);
  font-family: "Montserrat", sans-serif;
  font-size: var(--px-20);
  vertical-align: baseline;
  margin-right: 1em;
}
.FAQ-list dt.active {
  background: #F5F7FF; /* 開いている時の色 */
}
.FAQ-list dd {
  margin: 0;
  padding: 12px;
  display: none; /* 初期状態で非表示 */
  /*border-bottom: 1px solid #ddd;*/
}
.box-small {
  display: block;
  margin: 0.5em;
}

#PICKUP small, #CONTACT small {
  font-size: var(--px-14);
  text-align: center;
  display: flex;
  /*margin-top: 0.5em;*/
  gap: 2em;
  justify-content: center;
  align-items: center;
}
#PICKUP small {
  margin-top: 0;
}
#PICKUP small a, #CONTACT small a {
  vertical-align: middle;
  display: block;
  text-decoration: underline;
  color: #64667B;
}
#PICKUP small a .material-symbols-rounded, #CONTACT small a .material-symbols-rounded {
  font-size: var(--px-14);
  vertical-align: middle;
  margin-left: 0.5em;
}
#PICKUP small:first-of-type{
  margin-bottom: 0.25em;
}

html {
  /* Firefox用（細い・自動配色） */
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.35) transparent;
}

/* WebKit（Safari/Chrome/Edge） */
::-webkit-scrollbar {
  width: 8px;             /* 縦スクロール幅 */
  height: 8px;            /* 横スクロール高さ */
  background: transparent;/* トラックは基本透明 */
}

::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.35);  /* 半透明ダーク */
  border-radius: 999px;         /* 角丸（丸薬状） */
  border: 2px solid transparent;/* 余白を作り細く見せる */
  background-clip: padding-box; /* 境界をシャープに */
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.5);
}

::-webkit-scrollbar-thumb:active {
  background: rgba(0,0,0,.6);
}

::-webkit-scrollbar-track {
  background: transparent; /* トラックは見せない */
}

/* ダーク / ライトで色味を自動調整（Appleっぽく） */
@media (prefers-color-scheme: dark) {
  html {
    scrollbar-color: rgba(255,255,255,.45) transparent; /* Firefox */
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.45);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.65);
  }
  ::-webkit-scrollbar-thumb:active {
    background: rgba(255,255,255,.8);
  }
}

/* 横スクロールも綺麗に（必要なら） */
.horizontal-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

/* スクロールコンテナを限定して適用したい場合は、クラスでスコープする */
.apple-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.35) transparent;
}
.apple-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.apple-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.modal-box-L .small{
  font-size: var(--px-14);
  line-height: 1.3;
}
.sp-kv{
  display: none;
}

@media screen and (max-width: 767px) {
  .pc{
    display: none;
  }
  .sp {
    display: inline;
  }
  .sp-kv{
    display: block;
  width: 100%;
    margin: 0 auto;
   
  aspect-ratio: 5 / 7; 
 background: #fff;
     overflow: hidden;
    position: relative;
    border-radius: 16px;
    border: 1px solid var(--main-color);
     
}

  .sp-kv::before {
content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/KV250905-sp2.jpg") bottom / cover no-repeat; 
  transform: scale(1);
  transition: transform 10s ease-in-out;
  animation: zoomLoop 20s ease-in-out infinite alternate;
  will-change: transform; /* GPU最適化 */
    z-index: 0;
}

/*@keyframes zoomLoop {
  0%   { transform: scale(1); }
  100% { transform: scale(1.1); } 
}*/
    


.sp-kv::after {
    position: absolute;
   display: block;
  width: 100%;
    margin: 0 auto;
    aspect-ratio: 5 / 7; 
    border-radius: 16px;
    height: 100%;
    content: '';
    top: 0;
    left: 0;
    z-index: 1;
   background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255,0.4), rgba(255, 255, 255,0.8));
    mix-blend-mode: screen;
    
  }
  h1 a.logo_kinmei {
    max-width: 88px;
    padding-left: 10px;
  }
 
  header {
    padding-top: 6px;
    padding-bottom: 6px;
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.1);
  }
  header .flex.sp{
    display: flex;
  }
  /*#KV {
    height: 56.25%;
    position: relative;
    z-index: -2;
    margin-top: 47px;
  }*/
/*  #KV::before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    inset: 0;
   background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    mix-blend-mode: lighten;
    /*opacity: 0.85;
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);*/ /* Safari対応 */
    /*top: 0;
    left: 0;
    z-index: -1;
  }*/
  #KV{
 background:#fdfdfd;
    height: 100%;
    
    aspect-ratio: inherit;
     margin-top: 47px;
    padding: 20px;
  /*height:inherit;
  
  
  background: #fff;
  margin-top: 77px;
        position: relative;
    z-index: -2;
   
    padding-bottom: 20px;
    padding-right: 20px;
    padding-left: 20px;*/
    
  }
  #copy.sp {
        height: min-content;
        width: 100%;
        padding: 24px 16px;
        margin: 0 auto;
        display: block;
    z-index: 1;
  }
/*  #copy .flex.column{
    margin: 10px;
     width: 80%;
    margin: 0 auto;
  }*/
  .btn {
    font-size: 14px;
    vertical-align: middle;
    display: inline-block;
  }
  .btn.CTA{
    padding: 0;
    width: 34px;
    height: 34px;
    border-radius: 100px;
    display: block;
  }
  .btn.CTA .material-symbols-rounded{
    display: inline-block;
    text-align: center;
    transform: translateY(6px);
     margin-left: 0;
  }
  .btn .material-symbols-rounded {
    font-size: 18px;
   
  }
   a.logo_note {
    max-width: 32px;
    margin-left: 10px;
  }
  .text, .caption, #FAQ p{
    font-size: var(--px-16);
      text-align: justify;
  word-break: break-all;
  }
  #CONTACT .text{
    font-weight: 500;
  }
  /*#copy {
    justify-content: center;
  }*/
  header .flex.max-width1200 {
    padding: 0 12px;
  }
  #service-copy {
    font-size: clamp(15px, 3.39vw, 24px);
            text-align: center;
     z-index: 2;
  }
  #service-title {
    font-size: clamp(24px, 5.21vw, 56px);
    text-align: center; z-index: 2
    
  }
  #service-title .small {
    font-size: clamp(20px, 4.5vw, 38px);
   text-align: center; z-index: 2;
    
  }
  .flex-L, .flex-R{
    flex: initial;
  }
  .flex-R{
    width: 100%;
    padding: 0 20px;
  }
  .KV-tag {
    font-size: clamp(14px, 2.5vw, 18px);
    padding: 0.4em;
  }
  .sp.kv-tag-sp{
    display: flex;
    flex-direction: row;
  gap: 0.5em;
  }
  .KV-tag-wrapper{
    flex-direction: column;
     gap: 0.5em;
            width: 85%;
        margin: 0 auto;
    min-width: 300px;
    z-index: 2;
  }
  .KV-tag::before {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: inset 4px 4px 2px 0 rgb(39 128 243 / 68%), -2px -1px 0px 2px rgb(27 74 179 / 25%), 0px 0px 0px 2px rgb(49 122 173 / 25%), 2px 4px 4px 0px rgb(152 167 227 / 50%);
  }
  .header-style{
    font-weight: 300;
  }
  .header-style .small{
    font-weight: 500;
  }
  h3.header-style {
    font-size: clamp(30px, 6.26vw, 64px);
  }
  h3.header-style .small {
    font-size: clamp(12px, 1.8vw, 16px);
    margin-left: 0.5em;
  }
  #PICKUP h4.header-style,.modal__content h4 {
   font-size: clamp(30px, 6.26vw, 64px);
    
  }
  h4.header-style .small {
    font-size: clamp(12px, 1.8vw, 16px);
  }
  #info-box, #case-box, .features-box {
    flex-direction: column;
  }
  .features-box {}
  #case-box {
    gap: 2rem;
    width: 90%;
  }
  #info-box, #case {
    margin-top: 1rem;
  }
  #PICKUP, #CONTACT {
    padding: 2rem 12px;
  }
  #PICKUP h3.header-style, #CONTACT h3.header-style {
    left: 18px;
    
  }

  #product-info h4 {
    font-size: clamp(16px, 3.2vw, 24px);
  }
  #product-info h4 .product-name {
    line-height: 1.4;
    display: block;
    font-size: clamp(20px, 3.2vw*1.5, 24px*1.5);
    padding: 0 0.25em;
    margin-top: 0.5em;
  }
  #PICKUP .bg, #CONTACT .bg {
    padding: 20px;
  }
  #PICKUP small, #CONTACT small {
    flex-direction: column;
    gap: 0.25em;
  }
  .photo {
    border-radius: 8px;
  }
  #FLOW ul {
    flex-direction: column;
  }
  #FLOW ul li::after {
    content: url("../images/arrow_down.svg");
    top: inherit;
    bottom: -1.75em;
    right: 50%;
    transform: translateX(0.8em) translateY(0);
  }
  #FLOW ul {
    gap: 2rem;
    align-items: flex-start;
  }
  #FLOW ul li{
    flex-direction: row;
    gap: 1rem;
    width: 100%;
    border: 1px solid #cfd3f1;
    
    border-radius: 8px;
    padding: 12px 20px;
  }
  #FLOW .icon {
    width: 100%;
    max-width: 48px;
   /* filter: invert(100%) grayscale(1);*/
  }
 .icon-01, .icon-02, .icon-03, .icon-04, .icon-05 {
    transform: translate(0);
  }
  .icon-01{
    transform: translateY(2px);
  }
    .icon-03{
    transform: translateX(2px);
  }
  /*.icon-01, .icon-05 {
    transform: translateY(14px);
  }*/
  .icon-name-flow{
    font-size: calc(clamp(16px, 1.8vw * 1.7, 16px * 1.7) );
    font-weight: 400;
    /*color: #fff;*/
  }
  .circle p {
    font-size: var(--px-12);
  }
  .circle {
    width: 60px;
    height: 60px;
  }
  .bg {
    padding: 32px;
  }
  #case-box h5{
    margin-top: 0.7em;
  }
  #FEATURES h4{
  line-height: 1.5;
  margin-left: 28px;
  }
  #FEATURES h4::before{
    margin-left: -28px;
  }
  #FEATURES ul li {
    margin-bottom: 2rem
  }
  #FEATURES ul li:last-child {
    margin-bottom: 0;
  }
  #CONTACT .text{
    margin-top: 0.6em;
    margin-bottom: 0.6em;
  }
  .features-box {
    gap: 1rem;
  }
  .modal__dialog {
    max-width: 80%;
  }
  .profile{
    margin-top: 0.5em;
    font-size: clamp(13px, 2.2vw, 20px);
  }
  .profile a {
    font-size: clamp(13px, 2.2vw, 20px);
    line-height: 1.4;
  }
  .profile a .material-symbols-rounded{
    font-size: 16px;
  }
  #AD-area {
    padding: 20px 32px;
  }
  #AD-area .flex {
    flex-direction: column;
    gap: 1rem;
  }
  .modal__content{
    padding: 16px;
  }
  .modal__content .flex{
    flex-direction: column;
  }
  .modal__content .category{
    padding-top: 0;
    padding-bottom: 0;
  }
  .modal__content h4.header-style{
    line-height: 0.8;
  }
  .modal__content h4.header-style .small{
  margin-left: 0;
}
  .scroll-icon{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--px-14);
    color: #FFFFFF;
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 5;
    text-shadow: 0 0 4px rgba(0,0,0,0.4);
  }
  .scroll-message {
    display: block;
    font-size: var(--px-16);
    margin-top: 0.8em;
  }
  
  .scroll-message .material-symbols-rounded{
    font-size: var(--px-18);
    vertical-align: middle;
    margin-right: 0.5em;
  }
  
/*  .modal__content .info-table h5 .small{
    margin-left: 30px;
  }*/
  



}

@media (max-width: 445px) {
   .modal__content .info-table h5 .indent{
    display: inline-block;
    margin: 0;
    margin-left: 2em;
  }
    .modal__content ul li{
    flex-direction: column;
    margin-bottom: 10px;
  }
  .modal__content ul li:last-of-type{
    margin-bottom: 0;
  }
  
  .modal__content .category{
    margin-bottom: 0.25em;
  }
  
}
@media screen and (max-width: 400px) {
    #service-copy {
    font-size: clamp(10px, 1.8vw, 16px);
  }
  #service-title {
    font-size: clamp(20px, 4.5vw, 40px);
  }
  #service-title .small {
    font-size: clamp(16px, 2.2vw, 20px);
  }
    .KV-tag {
    font-size: clamp(12px, 1.8vw, 16px);
    padding: 0.25em;
  }
    .KV-tag-wrapper{
      min-width: inherit;

            width: 100%;
        margin: 0;
  }

 
  
}
.pickupbtn {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: none;
}

.pickupbtn.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* SPサイズ */
@media (max-width: 767px) {
  .pickupbtn {
    width: 120px;
    height: max-content;
  }
}

/* 小さいSPサイズ */
@media (max-width: 480px) {
  .pickupbtn {
    width: 100px;
    height: max-content;
  }
}