@charset "UTF-8";


.bg-orange {
  background-color: #E3790E;
}


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


#fv h1 {
  letter-spacing: normal;
  line-height: normal;
}
#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 .hukidashi {
  top: 45px;
}

#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) {
  #cv .cv-illust {
    top: -95px;
    right: 10%;
  }
}

@media screen and (min-width: 769px) {

 
  #drop .drop {
    top: -1px;
    right: 4%;
    z-index: 1;
  }
  #cv .cv-illust {
    top: -130px;
    right: 10%;
  }
  #fv .fv-bg {
  height: 90vh;
  }
  #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) {

}