:root{
  --blue:#103976;
  --blue-soft:#2e7dc1;
  --light:#eaf4fc;
  --border:#103976;
  --text:#0f172a;

  /* 追加（STEP7/アドバイス用） */
  --green:#3a7f1d;
  --green-light:#e6f4df;
  --yellow:#f2c200;
  --yellow-light:#fff6cc;
}

body{
  background:#f8fbff;
  font-size:18px; /* 全体をやや大きめ */
  color:var(--text);
}

.wrap{
  max-width:760px;
  margin:30px auto 60px;
  padding:0 18px;
}

h1{
  font-weight: 800;
  text-align: center;
  font-size: 32px;
  letter-spacing: .05em;
  margin: 10px 0 28px;
  color: var(--text);
  position: relative;
}

h1::after{
  content:"";
  display:block;
  width: 120px;
  height: 4px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: var(--blue);
  opacity: .9;
}

/* 共通ボックス */
.panel, .kakomi{
  border:2px solid var(--border);
  border-radius:18px;   /* 角丸 */
  overflow:hidden;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.panel{
  margin-top: 6px;
}

.head{
  background:var(--blue);
  color:#fff;
  font-weight:700;
  text-align:center;
  padding:12px 16px;
  font-size:18px;
}

/* 心得部分 */
.panel .body{
  padding:18px 20px;
  line-height:1.8;
}

.panel .body p{
  margin-bottom:14px;
}

.panel b{
  color:var(--blue);
}

/* 各ステップ */
.kakomi{
  margin-top:20px;
}

.kakomi .main{
  padding:22px 20px 14px;
  display:flex;
  align-items:center;
  gap:18px;
}

.kakomi .lead{
  font-size:22px; /* メイン見出しを大きく */
  font-weight:600;
  line-height:1.6;
  margin:0;
}

.kakomi .detail{
  background:var(--light);
  padding:16px 20px 18px;
  font-size:17px;
  line-height:1.8;
}

/* STEP5 強調（赤系） */
.kakomi.k-important{
  border-color:#c62828;
}

.kakomi.k-important .head{
  background:#c62828;
  color:#fff;
}

.kakomi.k-important .detail{
  background:#fdecea;
}

/* 箇条書きドット */
.dot{
  display:inline-block;
  width:10px;
  height:10px;
  background:#1e293b;
  border-radius:999px;
  margin-right:8px;
  position:relative;
  top:1px;
}

/* イラスト差し替え枠 */
.illus{
  width:100px;
  height:80px;
  border-radius:14px;
  --border:1px dashed #9ca3af;
  --background:#f1f5f9;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  color:#64748b;
  flex-shrink:0;
}

.illus img{
  width:100%;
  height:100%;
  object-fit:contain;  /* はみ出さず中央配置 */
}


/* 矢印 */
.arrow{
  display:flex;
  justify-content:center;
  margin:18px 0;
}

.arrow .shaft{
  width:0;
  height:0;
  border-left:40px solid transparent;
  border-right:40px solid transparent;
  border-top:48px solid #2e7dc1;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.08));
}

/* 追加：STEP7（緑）/アドバイス（黄） */
.kakomi.k-green{
  border-color: var(--green);
}
.kakomi.k-green .head{
  background: var(--green);
}
.kakomi.k-green .detail{
  background: var(--green-light);
}

.kakomi.k-yellow{
  border-color: var(--yellow);
}
.kakomi.k-yellow .head{
  background: var(--yellow);
  color:#000;
}
.kakomi.k-yellow .detail{
  background: var(--yellow-light);
}

/* 心得とフローの区切り */
.flow-start{
  text-align:center;
  margin:40px 0 10px;
  position:relative;
}

.flow-start span{
  background:#f8fbff;
  padding:0 18px;
  font-weight:600;
  color:#103976;
  letter-spacing:.05em;
}

.flow-start:before{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(to right, transparent, #c9dff3, transparent);
  z-index:0;
}

.flow-start span{
  position:relative;
  z-index:1;
}

.step-number{
  display:inline-block;
  background:#fff;
  color:var(--blue);
  font-weight:800;
  border-radius:999px;
  padding:4px 12px;
  margin-right:8px;
}

/* 通常（青ヘッダー） */
.kakomi .head .step-number{ color: var(--blue); }

/* STEP5（赤ヘッダー） */
.kakomi.k-important .head .step-number{ color:#c62828; }

/* STEP7（緑ヘッダー） */
.kakomi.k-green .head .step-number{ color: var(--green); }

/* ===== 連絡先エリア ===== */
.contact-area{
  margin-top:50px;
  padding:26px 18px;
  background:#fff;
  border:2px solid #d8e8f6;
  border-radius:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}

.contact-title{
  text-align:center;
  font-weight:700;
  font-size:20px;
  margin-bottom:18px;
  color:var(--blue);
}

.contact-list{
  display:flex;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
}

.contact-item{
  width:180px;
  text-decoration:none;
  color:var(--text);
  text-align:center;
  padding:10px 8px;
}

.contact-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 10px;
  font-size:28px;
  color:#fff;
}

.icon-phone{ background:var(--blue); }
.icon-mail{ background:var(--blue-soft); }
.icon-line{ background:#06C755; }

.contact-label{
  font-weight:700;
  font-size:16px;
  margin-bottom:4px;
}

.contact-sub{
  font-size:14px;
  color:#334155;
  word-break:break-word;
}

/* ホバー無し（スマホ前提） */
.contact-item:hover{
  transform:none;
}

/* スマホ対応 */
@media (max-width:600px){
  .contact-item{ width:46%; min-width:150px; }
  .contact-icon{ width:60px; height:60px; font-size:26px; }
}

/* ===== スマホ用：下部固定コンタクトバー ===== */
.mobile-contact-bar{
  display:none; /* デフォルトは非表示（PCでは出さない） */
}

@media (max-width: 600px){
  /* 固定バーの分、本文下に余白を確保 */
  body{
    padding-bottom: 84px;
  }

  /* PC用の「お問い合わせカード」はスマホでは隠す（固定バーと二重になるため） */
  .contact-area{
    display:none;
  }

  .mobile-contact-bar{
    display:block;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:9999;
    background:#ffffff;
    border-top:1px solid #d8e8f6;
    box-shadow:0 -8px 20px rgba(0,0,0,.08);
    padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  }

  .mobile-contact-grid{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:10px;
  }

  .mobile-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:54px;
    border-radius:14px;
    font-weight:700;
    text-decoration:none;
    color:#fff;
    font-size:16px;
    -webkit-tap-highlight-color: transparent; /* タップ時のハイライト抑制 */
  }

  .mobile-btn i{
    font-size:20px;
    line-height:1;
  }

  .mobile-btn.phone{ background: var(--blue); }
  .mobile-btn.mail{ background: var(--blue-soft); }
  .mobile-btn.line{ background: #06C755; }

  /* 押下時の見た目（ホバーではない） */
  .mobile-btn:active{
    filter: brightness(.95);
  }
}

/* スクロール時に見出しが隠れないように（固定バーがあるため） */
#report-box{
  scroll-margin-top: 16px;
}

/* スマホ下部固定バーに隠れない余白（600px以下のみ） */
@media (max-width:600px){
  #report-box{
    scroll-margin-top: 16px;
    scroll-margin-bottom: 110px;
  }
}


/* サイト専用CTAボタン */
.btn-cta{
  background: var(--blue);
  border: none;
  color:#fff;
  font-weight:700;
  border-radius:12px;
  padding:14px 20px;
  transition: all .15s ease;
  box-shadow: 0 4px 10px rgba(31,111,178,.25);
}

.btn-cta:hover{
  background:#195c93;
  color:#fff;
}

.btn-cta:active{
  background:#154d7a;
}

/* ===== 画面を閉じるボタン ===== */
.close-area{
  display:flex;
  justify-content:center;   /* ← 横方向中央 */
  margin:50px 0 30px;
}

.close-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  height:56px;
  min-width:260px;
  padding:0 32px;
  font-size:18px;
  font-weight:700;
  border-radius:16px;
  border:2px solid var(--blue);
  background:#ffffff;
  color:var(--blue);
  cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.15);
  transition:all .15s ease;
}

.close-btn:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 rgba(0,0,0,.15);
}

.close-btn{
  box-shadow:0 4px 0 #cbd5e1;   /* 下に影で立体感 */
}

.close-btn:hover{
  background:#f1f5f9;
}

.close-btn:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 #cbd5e1;   /* 押し込み表現 */
}

/* スマホでは少し大きめ */
@media (max-width:600px){
  .close-btn{
    width:100%;
    max-width:420px;
    font-size:18px;
    padding:16px;
  }
}