@charset "utf-8";

.floating-banner {
  position: fixed;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: 9999;
}

#acordion_box {
  background-color: #cdeaf0;
}

.trigger_b {
  margin-top: 5%;
}

.trigger_c {
  margin-top: 5%;
}

.trigger_d {
  margin-top: 5%;
}

.cta_a {
  width: 100%;
}

.cta_b {
  width: 100%;
}

.cta_c {
  width: 100%;
}

.floating-banner a img:hover {
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

@media (min-width: 754px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

#myElement {
  transform-origin: center;
  animation: randomScaleAnimation 2s infinite; /* アニメーションを適用 */
}

@keyframes randomScaleAnimation {
  0% { transform: scale(1); }
  25% { transform: scale(0.8); }
  50% { transform: scale(1.2); }
  75% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

#image1 {
  position: absolute;
  z-index: 1;
}

#myElement_bg {
  width: 100%;
  background-image: url("../img/point_conclusion_bg.jpg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  overflow: hidden;
}

.tel-link img {
  display: block;
  max-width: 100%;
  height: auto;
}

#slideArea {
  width: 100%;
  position: relative; /* å­è¦ç´ ã®position: absolute;のために必要 */
  padding-top: 75.46%; /* 画像のアスペクト比に合わせて調整 (例: 16:9ã®å ´åˆ 9/16 * 100 = 56.25%) */
  background-image: url("/cms/kenkotai/lp/hokin_supportex/images/continuous_bg.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

#slideArea .slider {
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  height: 100%;
  /* ã“ã“ã«ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã®ã‚¹ã‚¿ã‚¤ãƒ«ã‚’è¿½åŠ  */
}

.slick-dots {
  position: absolute;
  bottom: initial; /* 上書き */
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

@media only screen and (max-width:754px) {
	.slick-dots {
    bottom: initial; /* 上書き */
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
	}
}

.slick-prev {
  left: 4%;
  background-image: url('../img/btn_l.png');
	background-size: 25px 25px;
  top: 24%;
}

.slick-next {
  right: 4%;
  background-image: url('../img/btn_r.png');
	background-size: 25px 25px;
  top: 24%;
}

.img-overlay-container {
  /* è¦ªè¦ç´ ã‚’åŸºæº–ã«å­è¦ç´ ã‚’é…ç½®ã§ãã‚‹ã‚ˆã†ã«ã™ã‚‹ */
  position: relative;
  /* コンテンツの横幅の90%に設定 */
  width: 100%;
  /* コンテナを中央に配置 */
  margin: 0 auto;
  /* 画像と画像・動画を重ねるためにflexboxを使用 */
  display: flex;
  justify-content: center; /* 水平方向の中央揃え */
  align-items: center; /* 垂直方向の中央揃え */
  /* ç”»åƒãŒè¦ªè¦ç´ ã«ãƒ•ã‚£ãƒƒãƒˆã™ã‚‹ã‚ˆã†ã«èª¿æ•´ */
  overflow: hidden; /* ã¯ã¿å‡ºã—ãŸã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã‚’éš ã™ */
}

.img-overlay-container_layer_a {
  /* 画像がコンテナの幅いっぱいに広がるようにする */
  width: 100%;
  /* 画像がコンテナの高さに合わせて自動調整されるようにする */
  height: auto;
  /* 画像をコンテナの背景のように配置 */
  display: block;
}

.img-overlay-container_layer_b {
  /* 画像・動画を画像の上に重ねる */
  position: absolute;
  /* è¦ªè¦ç´ ã®å¹…ã«åˆã‚ã›ã¦ç”»åƒãƒ»å‹•ç”»ã®å¹…ã‚’èª¿æ•´ */
  width: 90%;
  /* ç”»åƒãƒ»å‹•ç”»ã®ç¸¦æ¨ªæ¯”ã‚’ç¶­æŒã—ãªãŒã‚‰ã€è¦ªè¦ç´ ã®å¹…ã«åŽã¾ã‚‹ã‚ˆã†ã«ã™ã‚‹ */
  height: auto;
  /* ç”»åƒãƒ»å‹•ç”»ã®ç¸¦æ¨ªæ¯”ã«ã‚ˆã£ã¦ã¯ã€ä¸Šä¸‹ã¾ãŸã¯å·¦å³ã«ä½™ç™½ãŒã§ãã‚‹å ´åˆãŒã‚ã‚Šã¾ã™ã€‚
     ã“ã®å ´åˆã¯ã€object-fit: cover; を使用すると、画像・動画がコンテナ全体を覆うように拡大されますが、
     画像・動画の一部が切り取られる可能性があります。
     今回は横幅を全て表示したいとのことなので、object-fit: contain; が適切です。 */
  object-fit: contain;
  /* 画像・動画を中央に配置 (flexboxのjustify-contentとalign-itemsで既に中央揃えされていますが、
     absoluteé…ç½®ã®å ´åˆã«ã‚‚å¿µã®ãŸã‚è¨˜è¿°ã—ã¦ãŠãã¨å®‰å…¨ã§ã™) */
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.stairs-img {
  border: 3px solid transparent;
  border-image: linear-gradient(to left bottom, #fff780, #7b3c0c) 1;
}