@charset "utf-8";
/* CSS Document */
.cate1 > div {
  display: grid;
  grid-template-columns: 260px 1fr;
  column-gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
/* 左：画像 */
.cate1 .imgbox { /* 見本のサイズ感 */
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.cate1 .imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 右：縦タイトル + 本文 */
.cate1 .rightbox {
  display: grid;
  grid-template-columns: 120px 1fr; /* 縦タイトル / 本文 */
  column-gap: clamp(30px, 5vw, 80px);
  align-items: center;
  min-width: 0;
}
.cate1 .txtbox {
  position: relative;
  min-width: 0;
}
.cate1 .titlebox1 {
  margin-top: -60px;
}
@media (max-width: 768px) {
  .cate1 > div {
    grid-template-columns: 1fr; /* ← 縦並び */
    row-gap: 28px; /* 縦の余白 */
    column-gap: 0;
  }
  .cate1 .titlebox1 {
    margin-top: 0px;
  }
  .cate1 .rightbox {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }
  .cate1 .title1 {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    text-align: center;
  }
  .cate1 .txtbox {
    max-width: 400px;
  }
}
.column3_f .boxwrap {
  gap: clamp(10px, 4vw, 30px);
}
@media (max-width: 1080px) {
  .column3_f .card1 {
    flex: 0 0 calc((100% - clamp(35px, 4vw, 60px)) / 2);
  }
}
@media (max-width: 576px) {
  .column3_f .card1 {
    flex: 0 0 100%;
  }
}
.column3_f .card1 {
  padding: clamp(10px, 4vw, 30px);
  background: #111731;
}
.column3_f .card1 h3 {
  color: #fff;
}
.column3_f .card1 .imgbox {
  width: 100%;
  aspect-ratio: 30 / 21; /* ← ここ */
  overflow: hidden;
}
.cate3 .plan_list {
  max-width: 1280px;
  z-index: 2;
  position: relative;
}
/* 1行 */
.cate3 .plan_item {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  background: #fff;
  padding: 26px 34px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.cate3 .plan_item:last-child {
  border-bottom: none;
}
.cate3 .plan_ttl {
  margin: 0;
  flex: 0 0 210px;
  font-size: 1.1em;
}
/* 右 */
.cate3 .plan_desc {
  margin: 0;
  flex: 1; /* ← 残り全部 */
  line-height: 1.9;
  opacity: 0.75;
  border-left: 1px solid #222;
  padding-left: 30px;
}
@media (max-width: 768px) {
  .cate3 .plan_item {
    flex-direction: column; /* ← 縦並び */
    align-items: flex-start; /* 左揃え（おすすめ） */
    gap: 12px; /* 要素間の余白 */
  }
  .cate3 .plan_ttl {
    flex: none; /* ← 固定幅解除 */
    width: 100%; /* ← 横いっぱい */
  }
  .cate3 .plan_desc {
    border-left: none;
    padding-left: 0px;
  }
}
/* ===== 必要事項 ===== */
.cate3 .estimate_section {
  margin: clamp(60px, 7vw, 100px) auto 0;
}
.cate3 .estimate_title {
  margin-bottom: 24px;
  position: relative;
  padding-right: 20px;
}
/* 横線 */
.cate3 .estimate_title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: rgba(0, 0, 0, 0.3);
}
/* 箇条書き */
.cate3 .estimate_item {
  position: relative;
  padding-left: 18px;
  margin-bottom: 12px;
}
/* ・ */
.cate3 .estimate_item::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}
.cate3 .titlebox5 {
  position: relative;
}
.cate3 .titlebox5::after {
  content: "";
  position: absolute;
  top: -90px; /* はみ出し量は好みで調整 */
  left: 120px;
  width: clamp(200px, 18vw, 340px);
  aspect-ratio: 249 / 256;
  background: url(https://saikienkahonten.co.jp/system_panel/uploads/images/icon1.svg) no-repeat center / contain;
  pointer-events: none;
  z-index: -1;
}
.cate3 {
  position: relative;
}
.cate3::after {
  content: "";
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: clamp(200px, 18vw, 340px);
  aspect-ratio: 249 / 256;
  background: url(https://saikienkahonten.co.jp/system_panel/uploads/images/icon1.svg) no-repeat center / contain;
  pointer-events: none;
}
.afterline {
  display: flex;
  align-items: center;
  gap: 10px; /* 文字と線の間 */
}
.afterline::after {
  content: "";
  flex: 1; /* ← 残り幅すべて */
  height: 2px; /* 線の太さ */
  background: #333; /* 線の色 */
}
.cate4 {
  background: url("https://saikienkahonten.co.jp/system_panel/uploads/images/fireworks7.jpg") no-repeat bottom center / cover;
}
.cate4 .boxwrap {
  width: 100%;
  display: grid;
  grid-template-columns: 180px 1fr;
  column-gap: clamp(30px, 7vw, 200px);
  align-items: start;
}
.flow_a .item {
  display: grid;
  grid-template-columns: 72px 1fr;
  column-gap: clamp(24px, 4vw, 64px);
  position: relative;
  padding-bottom: 40px;
}
.flow_a .circle {
  border: 1px solid #fff;
}
.flow_a .col-num::before {
  border-left: 2px dotted #fff;
}
.flow_a .circle p {
  font-size: 20px;
  color: #fff;
  letter-spacing: 0.1em;
}
.flow_a .col-num::before {
  bottom: -20px;
}
@media (max-width: 768px) {
  .cate4 .boxwrap {
    grid-template-columns: 1fr; /* ← 1列 */
    row-gap: 40px; /* 上下の間隔（好みで） */
  }
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px) {}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px) {}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px) {}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px) {}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px) {}