@charset "UTF-8";

.red-border {
  border: 3px solid #a80204;
}

.button-54 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 auto;
  /*padding: 0.9em 3em 0.9em 2em;*/
  border: 2px solid #a80204;
  /*background-color: #fff;*/
}

.button-54::after {
  position: absolute;
  right: -2em;
  transform: translateY(-50%);
  transform-origin: left;
  width: 3em;
  height: 0.8em;
  background-color: #a80204;
  clip-path: polygon(0 100%, 100% 100%, 70% 40%, 70% 90%, 0% 90%);
  content: "";
  transition: transform 0.3s;
}

.button-54:hover::after {
  transform: translateY(-50%) scaleX(1.4);
}
.gradation-line {
  animation: bg-gradient 5s linear infinite alternate;
  background: linear-gradient(60deg, #d8d8d8, white, white, #d8d8d8, white, white, #d8d8d8) 0 / 200% 100%;
}
@keyframes bg-gradient {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

.sandaiyouso {
  background-image: url(/assets/images/method/bg-sec04.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.alphabet-grey {
  color: #f8f8f8;
}

#sec01 .sec1-img1 {
  bottom: 0;
  right: -3%;
}
/* アコーディオン */
/* カスタムデザイン: 画像のイメージに近づける */
.custom-accordion .accordion-item {
  border: none;
  margin-bottom: 12px; /* 項目ごとの隙間 */
}
.custom-accordion .accordion-button {
  font-weight: bold;
  border-radius: 8px !important;
  padding: 0.5rem;
  line-height: 1.4;
}
/* 開いている時も背景色を維持 */
.custom-accordion .accordion-button:not(.collapsed) {
  box-shadow: none;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
/* 質問の見出し（赤文字） */
.question-label {
  font-weight: bold;
  display: block;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}
.question-label:first-child {
  margin-top: 0;
}
.reviewer-name {
  font-size: 1.2rem;
  margin-bottom: 0.2rem;
}
.obs-count {
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
/* Bootstrapの矢印の色を調整（オプション） */
.accordion-button::after {
  filter: sepia(100%) saturate(1000%) hue-rotate(320deg);
}
.accordion-button:not(.collapsed) {
  background-color: #edebec;
}

.youtube {
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

/* スライダー全体のコンテナ */
.slider-wrapper {
  max-width: 1300px; /* 4枚表示に合わせて少し広めに設定 */
  margin: 0 auto;
  position: relative;
}

/* 各スライドの間隔調整 */
.slick-slide {
  padding: 0 2px;
  transition: all 0.3s ease;
}

.slide-content {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  text-align: center;
  height: 100%;
}

.slide-image {
  width: 100%;
  height: 200px; /* 4枚表示なので高さを少し抑える */
  object-fit: cover;
  background-color: #ddd;
}

.slide-text {
  padding: 15px;
}

.slide-text h5 {
  font-size: 1rem;
  margin-bottom: 5px;
  font-weight: bold;
}

.slide-text p {
  font-size: 0.85rem;
  margin-bottom: 0;
}

/* 矢印のカスタマイズ */
.slick-prev,
.slick-next {
  z-index: 10;
  width: 40px;
  height: 40px;
  background: #a80204;
  border-radius: 50%;
}
.slick-prev:hover,
.slick-next:hover {
  background: #a80204;
}
/* 外側に配置 */
.slick-prev {
  left: -45px;
}
.slick-next {
  right: -45px;
}

/* ドット（インジケーター） */
.slick-dots {
  bottom: -40px;
}

.slick-next:before {
  content: ">" !important;
  font-weight: bold;
}
.slick-prev:before {
  content: "<" !important;
  font-weight: bold;
}
.slick-prev {
  left: 0px;
  top: auto;
  bottom: -80px;
}
.slick-next {
  left: 30%;
  top: auto;
  bottom: -80px;
}

#sec04 {
  background-image: url(/assets/images/method/bg-sec04-boshi.png);
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: bottom right;
}

@media (min-width: 720px) {
  .custom-accordion .accordion-button {
    padding: 1.2rem;
  }
}

/* レスポンシブ調整 */
@media (max-width: 1400px) {
  .slider-wrapper {
    max-width: 90%;
  }
}