@charset "UTF-8";
/* ========
  text-color
================ */
.black { color: #302d2c;}
.white { color: white;}
.pink { color: #d02979;}
.green { color: #0b9530;}
.indigo { color: #0d1977;}
.blue { color: #1d51a5;}
.aqua-blue { color: #0062dc;}
.light-blue {color: #f3f7ff;}
.light-blue2 {color: #00A0FF;}
.yellow { color: #fbeb07;}
.orange { color: #FEB829;}
.gray { color: #888888;}

/* ========
  background-color
================ */
.bg-black { background-color: #302d2c;}
.bg-white { background-color: white;}
.bg-pink { background-color: #d02979;}
.bg-green { background-color: #0b9530;}
.bg-indigo { background-color: #0d1977;}
.bg-indigo2 { background-color: #132034;}
.bg-blue { background-color: #1d51a5;}
.bg-aqua-blue { background-color: #0062dc;}
.bg-light-blue { background-color: #effaff;}
.bg-yellow { background-color: #fbeb07;}
.bg-gray { background-color: #888888;}
.bg-light-gray { background-color: #efefef !important;}
/* ========
  smp-font-szie
================ */
.fs-12 { font-size: 12px !important;}
.fs-14 { font-size: 14px !important;}
.fs-16 { font-size: 16px !important;}
.fs-18 { font-size: 18px !important;}
.fs-20 { font-size: 20px !important;}
.fs-22 { font-size: 22px !important;}
.fs-24 { font-size: 24px !important;}
.fs-30 { font-size: 30px !important;}
.fs-35 { font-size: 35px !important;}
.fs-40 { font-size: 40px !important;}
.fs-50 { font-size: 50px !important;}

/* ========
  padding-margin
================ */
.w-1280 { max-width: 98%;}
.w-1000 { max-width: 90%;}
.w-720 { max-width: 90%;}
.w-580 { max-width: 90%;}
.my-100 { margin: 100px 0;}
.py-100 { padding: 100px 0;}
.pb-100 { padding-bottom: 100px;}
.pt-80 { padding-top: 80px;}
.pb-80 { padding-bottom: 80px;}
.mt-80 { margin-top: 80px;}
.pt-100 { padding-top: 100px;}
.pb-100 { padding-bottom: 100px;}
.my-80 {  
  margin-top: 80px;
  margin-bottom: 80px;
}
.py-80 {  
  padding-top: 80px;
  padding-bottom: 80px;
}
/* ========
  共通設定
================ */
main * {
  line-height: 1.2;
  letter-spacing: normal;
}
a {
  text-decoration: none;
  transition: 0.5s all;
}
a:hover {
  opacity: 0.7;
}
li {
  list-style: none;
}
.ls-2 {
  letter-spacing: 0.2rem;
}
.lh-lg {
  line-height: 1.8 !important;
}
.object-fit {
  object-fit: cover;
}
.text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-overflow-multiple {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: initial;
}

/* ========
  link
================ */
.link {
  position: relative;
}
.link a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}
.img_wrap a:hover {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  transform: translateY(-10px);
  transition-duration: 0.5s;
  opacity: 1 !important;
}
.fixed_btn {
  display: none;
}

/* ========
  font
================ */
@import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap");
.oswald {
  font-family: "Oswald", sans-serif;
}

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@800&display=swap");
.mincho {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

/* ========
  LPのCSS
================ */
#fv .fv-bg {
  height: 60vh;
}
#fv .fv-bg img {
  height: 100%;
}


#fv h1 {
  letter-spacing: 0.3rem;
  line-height: 1.8;
}
#fv .jumyou {
  top: 0;
  left: 0;
  right: 0;
  /*max-width: 800px;*/
}
#fv .tosou {
  top: 22%;
  left: 0;
  right: 0;
}
#fv .price {
  width: 100%;
  bottom: 2%;
  left: 0;
  right: 0;
  /*max-width: 1300px;*/
}

.fade-up-target {
  /* 初期状態：透明で少し下に配置 */
  opacity: 0;
  transform: translateY(30px);

  /* アニメーションの設定 */
  /* 名前 | 実行時間 | タイミング | 待ち時間 | 終了時の状態維持 */
  animation: fadeUp 0.8s ease-out 1s forwards;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#cv .border {
  border: solid #0062dc 2px !important;
  border-radius: 10px;
}
#limited {
  background-image: url(/assets/images/price130/bg-limited.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
}
#limited .text {
  top: 15%;
}
#limited .text h2:before,
#limited .text h2:after {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
}
#limited .text h2:before {
  background-image: url(/assets/images/price130/limited-left.png);
}
#limited .text h2:after {
  background-image: url(/assets/images/price130/limited-right.png);
}

#limited .bg-limited-arrow .text div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.hake-blue {
  background-image: url(/assets/images/price130/hake-blue.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.hake-white {
  background-image: url(/assets/images/price130/hake-white.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#specification2 .ceiling {
  right: 1%;
  top: 3%;
}
#specification3 .lane {
  background-image: url(/assets/images/price130/bg-limited.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
#specification3 .splash {
  background-image: url(/assets/images/price130/bg-white-splash.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#guarantee .table-custom {
  border-collapse: collapse;
}

#guarantee .table-custom th,
#guarantee .table-custom td {
  border: 1px solid #7188b0 !important; /* 細い青色の枠線 */
  padding: 20px 12px;
  vertical-align: middle;
}
/* 保証期間内の点線仕切り */
.border-dotted-start {
  border-left: 1.5px dotted #7188b0 !important;
}

.comparison-table {
  border-collapse: separate;
  border-spacing: 0;
}

/* 共通のセル設定 */
.comparison-table th,
.comparison-table td {
  padding: 16px 6px;
  text-align: center;
  vertical-align: middle;
  border: none;
  position: relative;
  width: 50px;
}

/* 縦の区切り線 */
.border-v {
  border-left: 1px solid #333 !important;
  border-right: 1px solid #333 !important;
}

/* ヘッダー部分 */
/* 左端のラベル列 */
.label-col {
  font-weight: bold;
  width: 25%;
  border-right: 1px solid #333 !important;
}

/* 強調枠（ピンク） */
.pink-box {
  border: 3px solid #ff60a5;
  background: #fff;
  padding: 10px;
  display: inline-block;
  width: 100%;
}

/* 吹き出しラベル */
.badge-callout {
  background-color: #ff60a5;
  color: #fff;
  padding: 8px 12px;
  font-size: 0.8rem;
  position: absolute;
  right: -130px; /* テーブルの外側に出す */
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  border-radius: 4px;
  line-height: 1.4;
}
/* 吹き出しの三角部分 */
.badge-callout::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid #ff60a5;
}

.price-large {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
}

.circle-mark {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 2px solid #0056b3;
  border-radius: 50%;
}

/* ② 耐用年数の越境ピンク枠 */
/* 中央のセルを基準に、右側まで突き抜ける枠を擬似要素で作る */
.cross-border-box::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: -110%; /* 右隣のセルの終わりまで伸ばす（調整可） */
  bottom: 10px;
  border: 3px solid #ff60a5;
  z-index: 0;
  pointer-events: none;
}
.cross-border-box span {
  position: relative;
  z-index: 1; /* 文字が枠の下に隠れないように */
}
#standard {
  background-image: url(/assets/images/price130/bg-standard.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#faq .qa {
    height: 30px;
    width: 30px;
    padding: 0px !important;
}

/* slider */
.slider-container {
  width: 90%;
  margin: 0 auto;
  padding: 40px 0;
}
.property-slider .slick-track {
  display: flex !important;
  align-items: stretch; /* カード全体の高さを揃える */
}
.card {
  background: #fff;
  border-radius: 10px;
  margin: 0 10px; /* カード間の余白 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  overflow: hidden;
  height: auto; /* カード自体の高さは中身に合わせる */
  display: flex !important;
  flex-direction: column;
  width: auto !important; /* ★幅を固定しない */
}
.image-wrapper {
  position: relative;
  height: 200px; /* JSでの計算基準となる高さ */
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  width: 100%;
  height: 300px; /* ★ここでお好みの高さを指定（例: 200px） */
  object-fit: cover; /* 比率を保ったまま枠いっぱいに表示 */
  object-position: center; /* 中央を基準に切り抜き */
  height: 100%;    /* 親の200pxに合わせる */
  width: auto;     /* 横幅は比率を維持 */
  max-width: 100%; /* ★iPhoneでの拡大を防止 */
  object-fit: contain;
  /* 画像のぼやけ・拡大バグ対策 */
  image-rendering: -webkit-optimize-contrast;
}
/* 矢印のカスタマイズ */
.slick-prev:before, .slick-next:before {
  color: #64b5f6; /* 青い矢印の色 */
  font-size: 40px;
}
.slick-prev { left: -45px; }
.slick-next { right: -45px; }


/* ---
 価格表
 --------- */
/* テーブル全体の境界線設定 */
.pricing-table th, .pricing-table td {
  border-right: 1px solid #dee2e6;
  padding: 0.5rem !important;
}
.pricing-table th:last-child, .pricing-table td:last-child {
  border-right: none;
}
/* ラベル列（一番左）のスタイル */
.row-label {
  background-color: #fff !important;
  text-align: left;
  padding-left: 1.5rem !important;
  font-weight: bold;
}
/* ヘッダーの装飾 */
.header-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.tag {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
    position: relative;
    padding: 0.8rem 0;
    margin-bottom: 1rem;
    border-bottom: 1.2px solid;
}
.tag:before,
.tag:after {
    position: absolute;
    top: 100%;
    left: 50%;
    content: "";
    height: 0;
    width: 0;
}
.tag:before {
    border: 12px solid;
    border-color: transparent;
    border-top-color: #0d6efd;
    margin-left: -12px;
}
.tag.text-danger:before {
    border-top-color: #dc3545;
}
.tag:after {
    border: 10px solid;
    border-color: transparent;
    border-top-color: white;
    margin-left: -10px;
}

.plan-name {
  font-size: 0.95rem;
  font-weight: bold;
  margin-bottom: 0;
}
.price-display {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
}
/* 星評価の色 */
.stars {
  letter-spacing: 2px;
  font-size: 0.9rem;
}
/* ボタンの調整 */
.btn-primary {
  background-color: #3167d1;
  border-color: #3167d1;
  font-size: 0.9rem;
  white-space: nowrap;
}
/* テーブルが横に潰れないように最小幅を指定します */
.pricing-table {
  min-width: 1000px; /* 全体の最低幅を固定することでスクロールを発生させる */
}
/* スクロールバーの見た目を少し整える（任意） */
.table-responsive::-webkit-scrollbar {
  height: 8px;
}
.table-responsive::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

/* ラベル列を左に固定したい場合（オプション） */
.row-label {
  background-color: #fff !important;
  border-right: 2px solid #dee2e6 !important;
  text-align: center;
}
#vs table {
  width: 720px;
}
#voice h2 {
  background-image: url(/assets/images/price130/voice-h2.png);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 300px;
}

/*------------------*/

footer div section,
footer hr,
footer .footer-btn {
  display: none !important;
}
.js-page-top {
  display: none;
  width: 50px;
}
.js-page-top a {
  position: fixed;
  right: 10px;
  bottom: 20px;
  width: 150px;
  display: block;
}
#pageTop {
  display: none !important;
}

/* 表示前の状態 */
.fade-in2 {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 表示された時（JSで追加されるクラス） */
.fade-in2.is-visible {
  opacity: 1;
  transform: translateY(0);
}






/* じわっと画像が表示される */
.fade-in {
  animation: fadeIn 1.5s ease 0s 1 normal;
  -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
}
/* じわっと画像が表示される */
@keyframes fadeIn {
  /*上のbody内で呼び出しているアニメーションと名前をそろえる*/
  0% {
    opacity: 0;
  } /* 始め */
  100% {
    opacity: 1;
  } /* 終わり */
}
/*古いブラウザ用*/
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media screen and (min-width: 600px) and (max-width: 768px) {
  /* ========
    padding-margin
  ================ */
  .w-1280 { max-width: 1280px;}
  .w-1000 { max-width: 1000px;}
  .w-720 { max-width: 720px;}
  .w-590 { max-width: 590px;}
  .my-md-100 {
    margin-top: 100px !important;
    margin-bottom: 100px !important;
  }
  .py-md-100 {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
  }
  .mt-md-100 { margin-top: 100px !important;}
  .pt-md-100 { padding-top: 100px !important;}
  .mb-md-100 { margin-bottom: 100px !important;}
  .pb-md-100 { padding-bottom: 100px !important;}
  .my-md-80 { margin: 80px 0 !important;}
  .py-md-80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .mt-md-80 { margin-top: 80px !important;}
  .pt-md-80 { padding-top: 80px !important;}
  .mb-md-80 { margin-bottom: 80px !important;}
  .pb-md-80 { padding-bottom: 80px !important;}
  #cv .cv-illust {
    top: -95px;
    right: 10%;
  }
}

@media screen and (min-width: 769px) {
  /* ========
    font-szie
  ================ */
  .fs-md-12 { font-size: 12px !important;}
  .fs-md-14 { font-size: 14px !important;}
  .fs-md-16 { font-size: 16px !important;}
  .fs-md-18 { font-size: 18px !important;}
  .fs-md-20 { font-size: 20px !important;}
  .fs-md-22 { font-size: 22px !important;}
  .fs-md-24 { font-size: 24px !important;}
  .fs-md-30 { font-size: 30px !important;}
  .fs-md-35 { font-size: 35px !important;}
  .fs-md-40 { font-size: 40px !important;}
  .fs-md-45 { font-size: 45px !important;}
  .fs-md-50 { font-size: 50px !important;}
  .fs-md-55 { font-size: 55px !important;}
  .fs-md-60 { font-size: 60px !important;}
  .fs-md-70 { font-size: 70px !important;}
  .fs-md-80 { font-size: 80px !important;}
  .fs-md-100 { font-size: 100px !important;}

  /* ========
    padding-margin
  ================ */
  .w-1280 { max-width: 1280px;}
  .w-1000 { max-width: 1000px;}
  .w-720 { max-width: 720px;}
  .w-590 { max-width: 590px;}
  .my-xl-100 {
    margin-top: 100px !important;
    margin-bottom: 100px !important;
  }
  .py-xl-100 {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
  }
  .mt-xl-100 { margin-top: 100px !important;}
  .pt-xl-100 { padding-top: 100px !important;}
  .mb-xl-100 { margin-bottom: 100px !important;}
  .pb-xl-100 { padding-bottom: 100px !important;}
  .my-xl-80 { margin: 80px 0 !important;}
  .py-xl-80 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .mt-xl-80 { margin-top: 80px !important;}
  .pt-xl-80 { padding-top: 80px !important;}
  .mb-xl-80 { margin-bottom: 80px !important;}
  .pb-xl-80 { padding-bottom: 80px !important;}

  #drop .drop {
    top: -1px;
    right: 4%;
    z-index: 1;
  }
  #cv .cv-illust {
    top: -130px;
    right: 10%;
  }
  #fv .fv-bg {
  height: 78vh;
  }
  #fv .tosou {
    top: 18%;
    left: 15%;
  }
  #limited .text h2:before,
  #limited .text h2:after {
  width: 80px;
  height: 80px;
  }
  .pricing-table th, .pricing-table td {
  border-right: 1px solid #dee2e6;
  padding: 1rem 0.5rem !important;
  }
  #faq .qa {
      height: 50px;
      width: 50px;
      padding: 0px !important;
  }
  #specification2 .ceiling {
  right: 5%;
  top: 15%;
  }
  .comparison-table th,
  .comparison-table td {
    width: 80px;
    padding: 20px 10px;
  }
  #vs table {
  width: 1050px;
  }
  .cross-border-box::after {
  right: -120%; /* 右隣のセルの終わりまで伸ばす（調整可） */
  }
}

@media (min-width: 1200px) {
  .fs-xl-16 { font-size: 16px !important;}
  .fs-xl-18 { font-size: 18px !important;}
  .fs-xl-20 { font-size: 20px !important;}
  .fs-xl-22 { font-size: 22px !important;}
  .fs-xl-24 { font-size: 24px !important;}
  .fs-xl-30 { font-size: 30px !important;}
  .fs-xl-35 { font-size: 35px !important;}
  .fs-xl-40 { font-size: 40px !important;}
  .fs-xl-45 { font-size: 45px !important;}
  .fs-xl-50 { font-size: 50px !important;}
  .fs-xl-55 { font-size: 55px !important;}
  .fs-xl-70 { font-size: 70px !important;}
  .fs-xl-80 { font-size: 80px !important;}
  .fs-xl-100 { font-size: 100px !important;}
}