/* =======================================
共通
======================================== */

.section-box .sec-title {
  font-weight: 700;
  font-family: "Zen Maru Gothic", sans-serif;
  color: var(--main-color);
  font-size: 72px;
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 60px;
}

.section-box .sub-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  font-family: "Zen Maru Gothic", sans-serif;
  color: var(--main-color);
  margin-bottom: 5px;
  display: table;
}

.more-btn {
  padding: 22px 0;
  color: #fff;
  max-width: 300px;
  width: 100%;
  display: flex;
  margin: 60px auto 0;
  justify-content: center;
  align-items: center;
  border-radius: 40px;
  position: relative;
  font-size: 16px;
  line-height: 1;
  border: 1px solid var(--sub-color);
  background-color: var(--sub-color);
  transition: all 0.7s ease; /* ←どのプロパティを遷移させるか指定 */
}

.more-btn:hover {
  color: var(--sub-color);
  background-color: #fff;
}

/* 白丸部分 */
.more-white-icon {
  position: absolute;
  right: 16px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #fff;
  transition: background-color 0.7s ease; /* ← 追加 */
}

.more-btn:hover .more-white-icon {
  background-color: var(--sub-color);
}

/* 矢印アイコン */
.more-btn .fa-arrow-right {
  color: var(--sub-color);
  font-size: 16px;
  transition: color 0.7s ease; /* ← 追加 */
}

.more-btn:hover .fa-arrow-right {
  color: #fff;
}

@media (max-width: 1500px) {
  .section-box .sec-title {
    font-weight: 700;
    color: #00b98f;
    font-size: min(calc(48px + (72 - 48) * (100vw - 992px) / (1500 - 992)),
        72px);
    line-height: 1;
    letter-spacing: 0;
    margin-bottom: min(calc(40px + (60 - 40) * (100vw - 992px) / (1500 - 992)),
        60px);
  }

  .section-box .sub-title {
    font-size: min(calc(16px + (20 - 16) * (100vw - 992px) / (1500 - 992)),
        20px);
  }
}

@media (max-width: 991px) {
  .section-box .sec-title {
    font-size: min(calc(40px + (60 - 40) * (100vw - 320px) / (991 - 320)),
        60px);
    margin-bottom: min(calc(20px + (40 - 20) * (100vw - 320px) / (991 - 320)),
        40px);
  }

  .section-box .sub-title {
    font-size: min(calc(14px + (20 - 14) * (100vw - 320px) / (991 - 320)),
        20px);
  }

  .more-btn {
    padding: min(calc(14px + (20 - 14) * (100vw - 320px) / (991 - 320)),
        20px) 0;
    color: #fff;
    max-width: min(calc(260px + (300 - 260) * (100vw - 320px) / (991 - 320)),
        300px);
    width: 100%;
    display: flex;
    margin: min(calc(40px + (60 - 40) * (100vw - 320px) / (991 - 320)),
        60px) auto 0;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    position: relative;
    font-size: 16px;
    line-height: 1;
    background-color: var(--sub-color);
  }
}

/* =======================================
メインビジュアル
======================================== */
.main-visual-area {
  position: relative;
  margin-top: var(--header-height, 0px);
}

.main-visual-area:after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1px;
  z-index: 10;
  width: 100%;
  aspect-ratio: 2000 / 150;
  background: url(../images/top/white-bg.svg) no-repeat center bottom / 100% 100%;
}

.main-visual-area .slide-photo img {
  max-width: inherit;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.splide__slide img {
  height: auto;
  width: 100%;
}

.main-visual-area .slide-photo {
  aspect-ratio: auto;
  height: calc(100vh - var(--header-height));
  min-height: 580px;
}

.main-visual-area h2 {
  position: absolute;
  max-width: 710px;
  width: 100%;
  margin: 0 auto;
  z-index: 1000;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

@media (max-width: 1500px) {
  .main-visual-area h2 {
    position: absolute;
    max-width: min(calc(510px + (710 - 510) * (100vw - 991px) / (1500 - 992)),
        710px);
  }

}

@media (max-width: 991px) {
  .logo-flex h1 {
    font-size: min(calc(18px + (26 - 18) * (100vw - 320px) / (991 - 320)), 26px);
  }

  .logo-flex p {
    width: min(calc(40px + (51 - 40) * (100vw - 320px) / (991 - 320)), 51px);
  }

  .logo-mark {
    font-size: 0;
  }

  .main-visual-area h2 {
    position: absolute;
    max-width: min(calc(260px + (510 - 260) * (100vw - 320px) / (991 - 320)),
        510px);
  }

  /* ← ここを“比率ベース”に切り替え */
  .main-visual-area .slide-photo {
    /* 端末幅に合わせて拡大縮小（高さは比率で決まる） */
    width: 100%;
    /* 16:9前提。必要なら 3/2, 4/3 などに変更 */
    height: 55vh;
    /* 明示的に高さ固定をやめる */
    min-height: 0;
    /* PC用min-heightの影響を打ち消す */
    pointer-events: none;
  }

  .main-visual-area .slide-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* はみ出しをトリミングして見せたい場合 */
    /* 画像全体を必ず見せたいなら ↓ に変更
       object-fit: contain; background-color:#000; （余白が出ます） */
  }

}


/* =======================================
ABOUT
======================================== */
.about-us-area {
  padding: 230px 0 200px;
}

.about-us-area .sub-title {
  text-align: center;
  margin: 0 auto 10px;
}

.about-us-area .sec-title {
  text-align: center;
  margin: 0 auto 60px;
}

.about-us-area h4 {
  text-align: center;
  color: #204483;
  font-size: 32px;
  margin-bottom: 60px;
  font-weight: 700;
  line-height: 1.7;
}

.about-us-area .text {
  text-align: center;
  font-size: 16px;
}

.about-us-area .flex-box {
  display: flex;
  justify-content: center;
}

.about-pika-text {
  max-width: 366px;
  font-weight: 700;
  padding: 16px 0;
  width: 100%;
  line-height: 1;
  text-align: center;
  margin: 40px auto;
  background-color: #e59222;
}

.about-pika-text span {
  color: #fff;
}

.about-us-area .left-photo-box {
  max-width: 350px;
  width: 100%;
  margin-right: 95px;
}

.about-us-area .right-photo-box {
  max-width: 410px;
  width: 100%;
  margin-left: 85px;
  margin-top: -52px;
}

.about-us-area .sp-photo-box {
  display: none;
}

@media (max-width: 1700px) {
  .about-us-area .left-photo-box {
    max-width: min(calc(180px + (300 - 180) * (100vw - 991px) / (1700 - 991)), 300px);
    width: 100%;
    margin-right: min(calc(30px + (85 - 30) * (100vw - 991px) / (1700 - 991)), 85px);
  }

  .about-us-area .right-photo-box {
    max-width: min(calc(250px + (350 - 250) * (100vw - 991px) / (1700 - 991)), 350px);
    width: 100%;
    margin-left: min(calc(30px + (75 - 30) * (100vw - 991px) / (1700 - 991)), 85px);
    margin-top: -52px;
  }

  .about-us-area h4 {
    font-size: min(calc(24px + (32 - 24) * (100vw - 991px) / (1700 - 991)), 32px);
    margin-bottom: min(calc(30px + (60 - 30) * (100vw - 991px) / (1700 - 991)), 60px);
  }
}

@media (max-width: 1500px) {
  .about-us-area {
    padding: min(calc(140px + (230 - 140) * (100vw - 991px) / (1700 - 991)), 230px) 0 min(calc(120px + (200 - 120) * (100vw - 991px) / (1700 - 991)), 200px)
  }

  .about-us-area .container-fluid {
    padding-left: calc(15px + 50 * (100vw - 320px) / 1180);
    padding-right: calc(15px + 50 * (100vw - 320px) / 1180);
  }

  .about-us-area .text {
    text-align: center;
    font-size: min(calc(14px + (16 - 14) * (100vw - 991px) / (1700 - 991)), 16px);
  }

  .about-us-area .sec-title {
    text-align: center;
    margin: 0 auto min(calc(40px + (60 - 40) * (100vw - 991px) / (1700 - 991)), 60px);
  }

  .about-us-area h4 {
    font-size: min(calc(20px + (32 - 20) * (100vw - 991px) / (1700 - 991)), 32px);
  }
}

@media (max-width: 1280px) {
  .about-us-area .text br.pc {
    display: none;
  }
}

@media (max-width: 991px) {

  .right-photo-box.pc,
  .left-photo-box.pc {
    display: none;
  }

  .about-us-area .sp-photo-box {
    display: block;
    width: 100%;
    justify-content: center;
  }

  .about-us-area .sp-photo-box {
    margin: 0 auto min(calc(20px + (26 - 20) * (100vw - 320px) / (991 - 320)), 26px);
  }

  .about-us-area h4 {
    margin-bottom: min(calc(16px + (30 - 16) * (100vw - 320px) / (991 - 320)), 30px);
    font-size: min(calc(20px + (26 - 20) * (100vw - 320px) / (991 - 320)), 26px);
  }

  .about-pika-text {
    max-width: min(calc(280px + (366 - 280) * (100vw - 320px) / (991 - 320)), 366px);
    padding: 16px 0;
    margin: min(calc(25px + (40 - 25) * (100vw - 320px) / (991 - 320)), 40px) auto;
    background-color: #e59222;
    font-size: min(calc(14px + (18 - 14) * (100vw - 320px) / (991 - 320)), 18px);
  }
}

@media (max-width: 570px) {
  .about-us-area .text {
    font-size: 14px;
  }
}

@media (max-width: 570px) {
  .about-us-area h4 br.pc {
    display: none;
  }

}

/* =======================================
SERVICE
======================================== */

.service-area {
  background-color: #f2fffd;
  padding: 150px 0 200px;
  position: relative;
}

.service-area:after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -1px;
  z-index: 10;
  width: 100%;
  aspect-ratio: 2000 / 147;
  background: url(../images/top/service-bg.svg) no-repeat center bottom / 100% 100%;
}

.service-area .sub-title {
  text-align: center;
  margin: 0 auto 10px;
}

.service-area .sec-title {
  text-align: center;
  margin: 0 auto 60px;
}

.top-service-box {
  display: flex;
  flex-direction: column;
  /* 上から下に並べる */
  height: 100%;
  /* col の高さに合わせる */
}

.top-service-box h4 {
  color: #e59222;
  font-size: 24px;
  text-align: center;
  margin-bottom: 28px;
}

.top-service-box {
  background-color: #fff;
  padding: 50px 50px 30px;
}

.top-service-box p {
  font-size: 16px;
}

.top-service-box p {
  flex-grow: 1;
  /* 説明文部分を可変にして余白を埋める */
}

.service-more-btn {
  margin-top: auto;
  /* 一番下に押し下げる */
  display: inline-flex;
  align-items: center;
}

.service-more-btn {
  display: flex;
  margin-top: 30px;
  justify-content: flex-end;
  gap: 0 14px;
  align-items: center;
  font-size: 16px;
}

.service-icon {
  max-width: 120px;
  width: 100%;
  margin: -60px auto 0;
}

.more-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e59222;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: 0.7s;
}

.service-more-btn:hover .more-icon {
  background-color: var(--main-color);
}

.fa-arrow-right {
  font-size: 20px;
  color: #fff;
}

@media (max-width: 1500px) {
  .service-area {
    padding: min(calc(110px + (150 - 110) * (100vw - 991px) / (1700 - 991)), 150px) 0 min(calc(140px + (200 - 140) * (100vw - 991px) / (1700 - 991)), 200px)
  }

  .service-area .container {
    padding-left: calc(15px + 50 * (100vw - 320px) / 1180);
    padding-right: calc(15px + 50 * (100vw - 320px) / 1180);
  }

  .service-area .sec-title {
    text-align: center;
    margin: 0 auto min(calc(40px + (60 - 40) * (100vw - 992px) / (1500 - 992)),
        60px);
  }

  .service-icon {
    max-width: min(calc(80px + (120 - 80) * (100vw - 992px) / (1500 - 992)),
        120px);
    width: 100%;
    margin: min(calc(-60px + (-40 - -60) * (100vw - 1500px) / (992 - 1500)),
        -40px) auto 0;
  }

  .top-service-box {
    background-color: #fff;
    padding: min(calc(30px + (50 - 30) * (100vw - 991px) / (1700 - 991)), 50px) min(calc(30px + (50 - 30) * (100vw - 991px) / (1700 - 991)), 50px) min(calc(20px + (30 - 20) * (100vw - 991px) / (1700 - 991)), 30px);
  }

  .top-service-box h4 {
    color: #e59222;
    font-size: min(calc(20px + (24 - 20) * (100vw - 992px) / (1500 - 992)), 24px);
    text-align: center;
    margin-bottom: 28px;
  }

  .top-service-box p {
    font-size: min(calc(14px + (16 - 14) * (100vw - 992px) / (1500 - 992)), 16px);
  }

  .service-more-btn {
    margin-top: min(calc(22px + (30 - 22) * (100vw - 992px) / (1500 - 992)), 30px);
    gap: 0 10px;
    font-size: min(calc(14px + (16 - 14) * (100vw - 992px) / (1500 - 992)), 16px);
  }

  .more-icon {
    width: min(calc(30px + (50 - 30) * (100vw - 991px) / (1700 - 991)), 50px);
    height: min(calc(30px + (50 - 30) * (100vw - 991px) / (1700 - 991)), 50px);
  }

  .fa-arrow-right {
    font-size: min(calc(16px + (20 - 16) * (100vw - 992px) / (1500 - 992)), 20px);
    color: #fff;
  }
}

@media (max-width: 768px) {
  .service-icon {
    max-width: 80px;
    width: 100%;
    margin: -40px auto 0;
  }

  .top-service-box h4 {
    font-size: 18px;
    margin-bottom: min(calc(16px + (28 - 16) * (100vw - 992px) / (991 - 320)), 28px);
  }

  .top-service-box p {
    font-size: 14px;
  }

  .service-more-btn {
    font-size: 14px;
  }

  .more-icon {
    width: 30px;
    height: 30px;
  }
}

/* =======================================
AREA
======================================== */
.area-area {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
  background-image: url('../images/top/area-bg.png');
  padding-top: 200px;
  padding-bottom: 330px;
}

.area-area .text {
  font-weight: 700;
  font-size: 20px;
}

@media (max-width: 1500px) {
  .area-area {
    background-size: contain;
    padding: min(calc(150px + (200 - 150) * (100vw - 991px) / (1700 - 991)), 200px) 0 min(calc(200px + (330 - 200) * (100vw - 991px) / (1700 - 991)), 330px)
  }

  .area-area .container {
    padding-left: calc(15px + 50 * (100vw - 320px) / 1180);
    padding-right: calc(15px + 50 * (100vw - 320px) / 1180);
  }

  .area-area .text {
    font-size: min(calc(16px + (20 - 16) * (100vw - 991px) / (1700 - 991)), 20px);
  }
}

@media (max-width: 991px) {
  .area-area {
    background-size: contain;
    padding: min(calc(60px + (150 - 60) * (100vw - 320px) / (991 - 320)), 150px) 0 min(calc(60px + (200 - 60) * (100vw - 320px) / (991 - 320)), 200px)
  }

  .area-area .text {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .area-area {
    background-position: left top 40px;
    background-size: contain;
  }
}

/* =======================================
WORKS
======================================== */
.work-area {
  position: relative;
  padding-top: 150px;
  padding-bottom: 150px;
  background-color: #fff5e7;
}

.work-area::after {
  content: '';
  display: block;
  bottom: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1px;
  z-index: 10;
  width: 100%;
  aspect-ratio: 2000 / 150;
  background: url(../images/top/white-bg.svg) no-repeat center bottom / 100% 100%;
}

.work-area .sub-title {
  color: #e59222;
  margin: 0 auto 10px;
  text-align: center;
}

.work-area .sec-title {
  color: #e59222;
  text-align: center;
}
.works-box a {
  transition: 0.7s;
}
.works-box a:hover {
  opacity: 0.6;
}

.works-box .works-img {
  margin-bottom: 25px;
}

.works-box .date {
  font-size: 16px;
  line-height: 1;
  margin-bottom: 20px;
}

.works-box .text {
  font-weight: 700;
  font-size: 16px;
}

.works-box .works-img img {
  height: 310px;
  object-fit: cover;
  width: 100%;
}

.work-area .row {
  gap: 40px 0;
}

@media (max-width: 1500px) {
  .work-area {
    position: relative;
    padding-top: min(calc(80px + (150 - 80) * (100vw - 992px) / (1500 - 992)), 150px);
    padding-bottom: min(calc(80px + (150 - 80) * (100vw - 992px) / (1500 - 992)), 150px);
    background-color: #fff5e7;
  }

  .work-area .container {
    padding-left: calc(15px + 50 * (100vw - 320px) / 1180);
    padding-right: calc(15px + 50 * (100vw - 320px) / 1180);
  }

  .works-box .date {
    font-size: min(calc(14px + (16 - 14) * (100vw - 992px) / (1500 - 992)), 16px);
    line-height: 1;
    margin-bottom: min(calc(14px + (20 - 14) * (100vw - 992px) / (1500 - 992)), 20px);
  }

  .works-box .text {
    font-size: min(calc(14px + (16 - 14) * (100vw - 992px) / (1500 - 992)), 16px);
  }
}

@media (max-width: 1200px) {
  .works-box .works-img img {
    height: 250px;
    object-fit: cover;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .work-area {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .work-area .row {
    gap: 0;
  }

  .work-area .container .row>div+div {
    margin-top: 50px;
  }

  .works-box .date {
    font-size: 14px;
  }

  .works-box .text {
    font-size: 14px;
  }

}

@media (max-width: 480px) {
  .works-box .works-img img {
    height: 200px;
    object-fit: cover;
    width: 100%;
  }
}

/* =======================================
NEWS
======================================== */
.news-area {
  padding: 150px 0;
}

.news-area .more-btn {
  margin: 60px 0 0;
}

.news-cat-list li {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  padding-left: 38px;
  position: relative;
  color: #888888;
}

.news-cat-list {
  position: relative;
}

.news-cat-list li+li {
  margin-top: 30px;
}

.news-cat-list li a {
  color: #888888;
}

.news-cat-list li .active {
  color: #000;
}

.news-cat-list li a::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 25px;
  background-color: #888888;
  display: block;
  height: 1px;
}

.news-cat-list li a.active::after,
.news-cat-list li a:hover::after {
  background-color: var(--sub-color);
}

.news-cat-list.nav-tabs {
  border: none;
}

.news-cat-list .nav-tabs .nav-link {
  border: none;
}

.news-cat-list .nav-item.show .nav-link,
.news-cat-list .nav-link.active {
  border: none;
}

.news-cat-list .nav-link {
  padding: 0;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  border: none;
  margin: 0;
  padding: 0;
}

.news-cat-list .nav-link:focus,
.news-cat-list .nav-link:hover {
  color: #000;
}

.news-cat-list.nav-tabs .nav-link {
  margin-bottom: 0;
  border: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.news-area .news-content {
  padding-top: 20px;
  border-top: 1px solid #ccc;
  height: 565px;
  overflow-y: scroll;
}

.news-top-detail {
  display: flex;
  margin-bottom: 5px;
  align-items: center;
  gap: 0 15px;
}

.news-top-detail .cat {
  max-width: 180px;
  width: 100%;
  line-height: 1;
  text-align: center;
  border-radius: 5px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #cccccc;
}

.news-top-detail .cat span {
  font-size: 16px;
  font-weight: 700;
  transform: translateY(-0.2em);
}

.news-top-detail .date {
  font-weight: 700;
  font-size: 16px;
}

.news-top-detail .new {
  color: var(--sub-color);
  font-weight: 700;
  font-size: 16px;
}

.news-list .text {
  font-size: 16px;
  padding-right: 24px;
  font-weight: 700;
}

.news-list>li {
  padding-bottom: 24px;
  margin-bottom: 20px;
  border-bottom: 1px solid #cccccc;
}

.news-list a {
  transition: 0.7s;
}

.news-list a:hover {
  opacity: 0.6;
}

.news-area .more-btn.sp {
  display: none;
}

@media (max-width: 1500px) {
  .news-area {
    position: relative;
    padding-top: min(calc(100px + (150 - 100) * (100vw - 992px) / (1500 - 992)), 150px);
    padding-bottom: min(calc(100px + (150 - 100) * (100vw - 992px) / (1500 - 992)), 150px);
  }

  .news-area .container {
    padding-left: calc(15px + 50 * (100vw - 320px) / 1180);
    padding-right: calc(15px + 50 * (100vw - 320px) / 1180);
  }
}

@media (max-width: 991px) {
  .news-area .more-btn.sp {
    display: flex;
    margin: 40px auto;
    justify-content: center;
  }

  .news-area .more-btn.pc {
    display: none;
  }

  .news-cat-list {
    position: relative;
    margin-bottom: 30px;
  }

  .news-cat-list li {
    font-size: min(calc(14px + (20 - 14) * (100vw - 320px) / (991 - 320)), 20px);
    padding-left: min(calc(30px + (38 - 30) * (100vw - 320px) / (991 - 320)), 38px);
  }

  .news-cat-list li a::after {
    width: min(calc(17px + (25 - 17) * (100vw - 320px) / (991 - 320)), 25px);
  }

  .news-top-detail .cat {
    max-width: 180px;
    width: 100%;
    line-height: 1;
    text-align: center;
    border-radius: 5px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #cccccc;
  }

  .news-top-detail .cat span {
    font-size: min(calc(14px + (16 - 14) * (100vw - 320px) / (991 - 320)), 16px);
    font-weight: 700;
    transform: translateY(-0.2em);
  }

  .news-top-detail .date {
    font-weight: 700;
    font-size: min(calc(14px + (16 - 14) * (100vw - 320px) / (991 - 320)), 16px);
  }

  .news-top-detail .new {
    color: var(--sub-color);
    font-weight: 700;
    font-size: min(calc(14px + (16 - 14) * (100vw - 320px) / (991 - 320)), 16px);
  }

  .news-list .text {
    font-size: min(calc(14px + (16 - 14) * (100vw - 320px) / (991 - 320)), 16px);
    padding-right: 24px;
    font-weight: 700;
  }

  .news-cat-list li+li {
    margin-top: 20px;
  }
}

/* =======================================
CAUTIOUS
======================================== */
.cautious-area {
  padding: 80px 0;
  position: relative;
  margin-bottom: 150px;
}

.cautious-area .container::before {
  content: '';
  top: 0;
  left: 0;
  height: 30px;
  width: 100%;
  position: absolute;
  background-size: auto auto;
  background-color: rgba(255, 255, 255, 1);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(255, 233, 204, 1) 6px, rgba(255, 233, 204, 1) 12px);
}

.cautious-area .container::after {
  content: '';
  bottom: 0;
  left: 0;
  height: 30px;
  width: 100%;
  position: absolute;
  background-size: auto auto;
  background-color: rgba(255, 255, 255, 1);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(255, 233, 204, 1) 6px, rgba(255, 233, 204, 1) 12px);
}

.cautious-area h3 {
  font-weight: 700;
  font-size: 32px;
  color: #204483;
  text-align: center;
}

.cautious-icon {
  max-width: 50px;
  width: 100%;
  margin: 0 auto 20px;
}

.cautious-area h3 {
  margin-bottom: 50px;
}

.cautious-area .text {
  text-align: center;
  font-size: 16px;
  line-height: 2;
}

.cautious-bnr {
  max-width: 300px;
  width: 100%;
  margin: 50px auto 0;
}

.cautious-bnr a {
  transition: 0.7s;
}

.cautious-bnr a:hover {
  opacity: 0.6;
}

@media (max-width: 991px) {
  .cautious-area {
    margin-bottom: min(calc(80px + (150 - 80) * (100vw - 320px) / (991 - 320)), 150px);
  }

  .cautious-area h3 {
    line-height: 1.5;
    font-size: min(calc(22px + (32 - 22) * (100vw - 320px) / (991 - 320)), 320px);
  }

  .cautious-area .text {
    font-size: min(calc(14px + (16 - 14) * (100vw - 320px) / (991 - 320)), 16px);
  }

  .cautious-bnr {
    max-width: 300px;
    width: 100%;
    margin: min(calc(30px + (50 - 30) * (100vw - 320px) / (991 - 320)), 50px) auto 0;
  }
}