@charset "UTF-8";

.bg-orange {
  background-color: #E3790E;
}
.marca-yellow {
  background:linear-gradient(transparent 60%, #ff6 60%);
}
.fs-90 {
  font-size: 90px;
}
html {
  /* ヘッダーの高さ分の余白を設定 */
  scroll-padding-top: 50px;
  
  /* ついでにスムーズスクロールを有効にする場合 */
  scroll-behavior: smooth; 
}
/* Animation */
.target a {
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
  display: block;
}
@keyframes floating-y {
  0% {
    transform: translateY(-6%);
  }
  100% {
    transform: translateY(6%);
  }
}

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


#fv h1 {
  letter-spacing: normal;
  line-height: normal;
}
#fv .minus15 {
  top: 15%;
  left: 5%;
  /*max-width: 800px;*/
}
#fv .fv-mitsumori {
  bottom: 5%;
  right: 10%;
  /*max-width: 800px;*/
}

/*#onayami {
  background: #505050;
  background: linear-gradient(0deg, white 0%, white 50%, #505050 50%, #505050 100%);
}*/

#onayami {
  background: linear-gradient(0deg, black 0%, black 50%, #505050 50%, #505050 100%);
}
#onayami > div {
  background-image : url(/assets/images/syanetsu/bg-onayami-arrow-smp.png);
  background-size: 100% auto;
  background-position: bottom;
  background-repeat: no-repeat;
}
#onayami h2 {
  top: 10%;
  left: 0;
  right: 0;
}
#onayami .balloon1,
#onayami .balloon2,
#onayami .balloon3,
#onayami .balloon4 {
  background-image : url(/assets/images/syanetsu/balloon-smp.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}


#yellow-balloon .bg-grey {
  background: #E7E7E7;
}
#yellow-balloon .border {
  border: solid #CFCFCF 1px!important;
}
#yellow-balloon .table>:not(:first-child) {
  border: none;
}



/* テーブルの基本設定 */
#yellow-balloon .custom-comparison-table th,
#yellow-balloon .custom-comparison-table td {
  padding: 1rem 0.75rem;
  vertical-align: middle;
}

/* 当社塗料（右カラム）のハイライト背景色 */
#yellow-balloon .bg-highlight {
  background-color: #f0f7ff !important;
}

/* フォントカラー */
#yellow-balloon .font-dark {
  color: #0b186b;
}

/* 標準フォントウェイト戻し用 */
.font-normal {
  font-weight: normal;
}

/* モバイルでのテーブルセルのフォントサイズ微調整 */
@media (max-width: 575.98px) {
  #yellow-balloon .custom-comparison-table th,
  #yellow-balloon .custom-comparison-table td {
    padding: 0.75rem 0.5rem;
    font-size: 0.9rem;
  }
}



.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%;
}
#specification4 .lane {
  background-image: url(/assets/images/price130/bg-limited.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
#specification4 .splash {
  background-image: url(/assets/images/price130/bg-white-splash.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#plan > div {
  border-radius: 30px;
  border: #0c1977 solid 8px;
}
#plan .welcome{
  border-radius: 10px;
  border: #0c1977 solid 2px;
}





.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;
}



/* 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; }




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

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) {
html {
  /* ヘッダーの高さ分の余白を設定 */
  scroll-padding-top: 50px;
}
.fs-md-90 {
  font-size: 90px;
}
#fv .minus15 {
  top: 5%;
  left: 20%;
  /*max-width: 800px;*/
}
#onayami {
  background: linear-gradient(0deg, black 0%, black 50%, #505050 50%, #505050 100%);
}
#onayami > div {
  background-image : url(/assets/images/syanetsu/bg-onayami-arrow.png);
  background-size: 100% auto;
  background-position: bottom;
  background-repeat: no-repeat;
}

#onayami .balloon1,
#onayami .balloon2 {
  background-image : url(/assets/images/syanetsu/balloon-left.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

#onayami .balloon3,
#onayami .balloon4 {
  background-image : url(/assets/images/syanetsu/balloon-right.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}


  #cv .cv-illust {
    top: -130px;
    right: 10%;
  }
  /*#fv .fv-bg {
  height: 90vh;
  }*/
  #fv .tosou {
    top: 18%;
    left: 15%;
  }

  .pricing-table th, .pricing-table td {
  border-right: 1px solid #dee2e6;
  padding: 1rem 0.5rem !important;
  }
  #specification2 .ceiling {
  right: 5%;
  top: 15%;
  }
  .comparison-table th,
  .comparison-table td {
    width: 80px;
    padding: 20px 10px;
  }

  .cross-border-box::after {
  right: -120%; /* 右隣のセルの終わりまで伸ばす（調整可） */
  }
}

@media (min-width: 1200px) {

}