/* ===============================
   RESET / BASE
================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  color: #000;
  line-height: 1.8;
}

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

/* セクション共通 */
section {
  overflow-x: hidden;
}

/* ===============================
   HERO (sample like image)
================================ */
.hero2{
  position: relative;
  padding: 22px 18px;
}

.hero2-inner{
  position: relative;
  min-height: 700px;

  overflow: hidden;

  /* 背景画像 */
  background: url("../images/hero.png") center / cover no-repeat;


  /* 余白 */
  padding: 26px 26px 26px 26px;
}

/* 薄い白フィルター（写真を読みやすく） */
.hero2-inner::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.18);
}

.hero2-inner *{
  position: relative;
  z-index: 1;
}

/* 上のコピー */
.hero2-topline{
  margin: 0 0 22px;
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.25;
  color: #222;

  /* 白い帯っぽく */
  display: inline-block;
  background: rgba(255,255,255,0.85);
  padding: 10px 14px;
}

.hero2-topline-em{
  color: #0b66c3;
  font-weight: 900;
}

/* 左メイン */
.hero2-left{
  max-width: 720px;
  margin-top: 150px;
}

.hero2-title{
  margin: 0 0 18px;
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,100);
}
.hero3-title{
  margin: 0 0 18px;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,100);
  max-width: 500px;
  margin-top: 100px;
}

/* バッジ */
.hero2-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 200px;
}

.hero2-badges span{
  background: rgba(145,110,50,0.9); /* こげ茶系 */
  color: #fff;
  font-weight: 800;
  padding: 10px 14px;
  font-size: 1.2rem;
  line-height: 1.2;
  box-shadow: 0 10px 20px rgba(0,0,0,0.18);
}


/* 右下のCTA */
.hero2-cta{
  position: absolute;
  right: 22px;
  bottom: 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 18px;
  

  background: rgba(255,255,255,0.92);
  color: #111;
  font-weight: 900;
  text-decoration: none;

  box-shadow: 0 12px 24px rgba(0,0,0,0.22);
}


/* ===============================
   PROBLEM
================================ */
.problem {
  padding: 100px 20px 0;
  text-align: center;
}

.problem-bg {
  max-width: 780px;
  margin: 0 auto;
}

.problem-text {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 20px 100px;
  text-align: center;
  font-size: 1.15rem;
  line-height: 2.2;
}

.problem-text .lead {
  font-weight: 800;
  margin-bottom: 18px;
}

.marker {
  background: linear-gradient(transparent 60%, #ffd84d 60%);
  padding: 0 4px;
  font-weight: 800;
}

.blue {
  color: #0b66c3;
  font-weight: 800;
}

.arrow {
  margin: 36px 0 18px;
  font-weight: 800;
}

.arrow-icon {
  color: #ff2a2a;
  margin-right: 8px;
}

.blue-box-image {
  max-width: 860px;
  margin: 24px auto 24px;
  padding: 72px 56px;
  background: url("../images/blue-box.png") center / contain no-repeat;
}

.blue-box-image p {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.6;
}

/* ===============================
   SECTION TITLE (method/qaなどで使用)
================================ */
.section-title {
  text-align: center;
  margin-bottom: 64px;
}

.section-title .jp {
  font-size: 2rem;
  font-weight: 800;
  display: inline-block;
  padding-bottom: 12px;
  border-bottom: 3px solid #000;
}

/* ===============================
   METHOD (3カラム)
================================ */
.method-section {
  padding: 96px 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.method-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.method-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
}

.method-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.method-num {
  font-size: 3.6rem;
  font-weight: 900;
  color: #c89a2a;
  line-height: 1;
}

.method-text {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.5;
}

.method-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f3f3f3;
}

.method-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===============================
   METHOD RESULT (背景色＋チェック画像)
================================ */
.method-result-section {
  background: #eaf7ff;
  padding: 100px 20px;
}

.method-result-box {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.method-result-lead {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 2;
  margin-bottom: 40px;
}

.method-result-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 720px;
  text-align: left;
}

.method-result-list li {
  position: relative;
  padding-left: 56px;
  margin-bottom: 22px;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.7;
}

.method-result-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 40px;
  height: 40px;
  background: url("../images/check.png") center / contain no-repeat;
}

/* ===============================
   COMPARE（画像＋メダルリスト）
================================ */
.compare-section {
  text-align: center;
  padding: 100px 20px;
}

.compare-section img {
  margin: 0 auto 56px;
  width: 100%;
  max-width: 720px;
}

.result-points {
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
}

.result-points li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.7;
}

.result-points li::before {
  content: "";
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: url("../images/icon-medal.png") center / contain no-repeat;
}

/* ===============================
   CASES（PC横2 / SP縦）
================================ */
.cases-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 20px;
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px;
}

.case-item {
  display: flex;
  gap: 24px;
}

.case-quote {
  width: 40px;
  position: relative;
}

.case-quote::before {
  content: "“";
  position: absolute;
  top: -20px;
  left: 0;
  font-size: 4rem;
  color: #888;
}

.case-quote::after {
  content: "";
  position: absolute;
  top: 40px;
  left: 12px;
  width: 2px;
  height: 85%;
  background: #888;
}

.case-content {
  flex: 1;
}

.case-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 28px;
}

.case-block {
  display: flex;
  gap: 16px;
  margin-bottom: 22px;
}

.case-block .label {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-weight: 800;
  padding: 12px 8px;
  font-size: 0.95rem;
}

.case-block.before .label { background: #eee; }
.case-block.after  .label { background: #ffd84d; }

.case-block p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
}

.case-block p.strong {
  font-weight: 800;
}

.case-summary {
  margin-top: 24px;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ===============================
   FUTURE（背景＋チェック）
================================ */
.future-section {
  position: relative;
  padding: 120px 20px;
  background: url("../images/salon-bg.png") center / cover no-repeat;
}

.future-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.7);
}

.future-section * {
  position: relative;
  z-index: 1;
}

.future-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 56px;
}

.future-box {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.future-lead {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 40px;
  line-height: 1.8;
}

.future-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 48px;
  max-width: 720px;
  text-align: left;
}

.future-list li {
  position: relative;
  padding-left: 56px;
  margin-bottom: 22px;
  font-size: 1.15rem;
  font-weight: 700;
}

.future-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 40px;
  height: 40px;
  background: url("../images/check.png") center / contain no-repeat;
}

.future-result {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.9;
}

.future-result span {
  background: linear-gradient(transparent 60%, #ffd84d 60%);
  padding: 0 6px;
}

/* ===============================
   ROI（背景＋オーバーレイ）
================================ */
.roi-section {
  position: relative;
  padding: 120px 20px;
  background: url("../images/roi.png") center / cover no-repeat;
}

.roi-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.77);
}

.roi-section * {
  position: relative;
  z-index: 1;
}

.roi-inner {
  max-width: 900px;
  margin: 0 auto;
}

.roi-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 40px;
}

.roi-inner p {
  font-size: 1.1rem;
  line-height: 2;
  margin-bottom: 28px;
  text-align: center;
}



.roi-highlight {
  text-align: center;
  font-size: 1.35rem;
  font-weight: 900;
}

.roi-highlight span {
  background: linear-gradient(transparent 60%, #ffd84d 60%);
  padding: 0 8px;
}

/* ===============================
   SUBSIDY
================================ */
.subsidy-section {
  background: #eaf7ff;
  padding: 100px 20px;
  text-align: center;
}

.subsidy-title {
  font-size: 1.9rem;
  font-weight: 900;
  margin-bottom: 28px;
}

.subsidy-lead {
  font-size: 1.2rem;
  line-height: 2;
  margin-bottom: 36px;
}

.subsidy-box {
  max-width: 700px;
  margin: 0 auto 40px;
  border: 2px solid #000;
  padding: 28px 36px;
  text-align: left;
}

.subsidy-box ul {
  margin: 0;
  padding-left: 20px;
}

.subsidy-box li {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.subsidy-note {
  font-size: 1.1rem;
  line-height: 2;
}

/* ===============================
   VOICE（2枚カード）
================================ */
.voice-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 100px 20px;
}

.voice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px;
}

.voice-card {
  position: relative;
  background: #fff;
  padding: 40px 32px;
  border: 2px solid #bbb;
}

.voice-card::after {
  content: "";
  position: absolute;
  bottom: -12px;
  right: -12px;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.voice-card.blue::after   { background: #4bb6e6; }
.voice-card.orange::after { background: #f2a01f; }

.voice-card h3 {
  font-size: 1.25rem;
  font-weight: 900;
  margin: 0 0 18px;
}

.voice-card p {
  font-size: 1.05rem;
  line-height: 1.8;
  margin: 0 0 10px;
}

/* ===============================
   QA（アコーディオン）
================================ */
.qa-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 120px 20px;
}

.qa-list {
  margin-top: 48px;
}

.qa-item {
  border: 2px solid #e5e5e5;
  margin-bottom: 16px;
}

.question {
  width: 100%;
  background: #fff;
  border: none;
  padding: 20px 56px 20px 20px;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  position: relative;
}

.question::before {
  content: "Q";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffd84d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.question span {
  margin-left: 44px;
  display: block;
}

.question::after {
  content: "⌄";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  transition: transform 0.3s;
}

.qa-item.active .question {
  background: #fafafa;
}

.qa-item.active .question::after {
  transform: translateY(-50%) rotate(180deg);
}

.answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  background: #fafafa;
  border-top: 1px solid #e0e0e0;
}

.answer p {
  padding: 20px;
  font-size: 0.95rem;
  line-height: 1.8;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.answer p::before {
  content: "A";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #4b82d6;
  color: #fff;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.qa-bottom-message {
  margin-top: 80px;
  text-align: center;
}

.qa-bottom-message p {
  font-size: 1.0rem;
  line-height: 2;
  letter-spacing: 0.08em;
  margin: 0 0 28px;
}

.qa-bottom-message p:first-child {
  font-weight: 800;
}

/* ===============================
   CONTACT（アイコン画像）
================================ */
.contact-section {
  background: #f2f2f2;
  padding: 80px 20px;
  text-align: center;
}

.contact-title {
  font-size: 1.8rem;
  font-weight: 900;
  margin-bottom: 48px;
}

.contact-grid {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.contact-card {
  text-decoration: none;
  color: #000;
  background: transparent;
}

.contact-card .label {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 12px;
  font-weight: 700;
  background: transparent;
}

.contact-icon {
  width: 200px;
  height: 200px;
  border-radius: 24px;
  object-fit: cover;
  transition: transform 0.25s, box-shadow 0.25s;
}

.contact-card:hover .contact-icon {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
}

/* ===============================
   LAST MESSAGE
================================ */
.last-message {
  padding: 120px 20px;
  text-align: center;
}

.last-message p {
  font-size: 1.2rem;
  line-height: 2;
  letter-spacing: 0.08em;
  margin: 0;
}

.last-message p::first-line {
  font-size: 1.6rem;
  font-weight: 900;
}

/* ===============================
   FOOTER
================================ */
.site-footer {
  background: linear-gradient(135deg, #ffffff 0%, #ccefff 100%);
  padding: 80px 20px 40px;
  text-align: center;
}

.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.footer-nav {
  margin-bottom: 24px;
  font-size: 1rem;
}

.footer-nav a {
  color: #000;
  text-decoration: none;
  font-weight: 700;
}

.footer-nav a:hover {
  text-decoration: underline;
}

.footer-name {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.footer-address {
  font-size: 0.75rem;
  margin-bottom: 32px;
}

.footer-copy {
  font-size: 0.7rem;
  color: #333;
}

/* ===============================
   floating CTA
================================ */
.contact-pill-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999;
  background: #111;
  color: #fff;
  text-decoration: none;
  padding: 14px 18px;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(0,0,0,0.2);
}

.contact-pill-btn:hover {
  opacity: 0.9;
}
/* ===============================
   HERO スマホ版 一括調整
================================ */
@media (max-width: 768px) {

  /* 外枠 */
  .hero2 {
    padding: 12px;
  }

  .hero2-inner {
    min-height: 800px;          /* 画像は大きくしない */
    
  }

  /* 上の白帯コピー */
  .hero2-topline {
    font-size: 0.95rem;
    line-height: 1.4;
    padding: 8px 12px;
    margin-bottom: 18px;
    
  }

  /* 左メイン全体（← 文字を下げる正解ポイント） */
  .hero2-left {
    margin-top: 220px;          /* ここだけで位置調整 */
    max-width: 100%;
  }

  /* メインタイトル */
  .hero2-title {
    margin: 0 0 22px;
    font-size: 1.8rem;
    line-height: 1.45;         /* ギュッ感解消 */
    letter-spacing: 0.02em;
  }
  .hero3-title {
    margin: 0 0 22px;
    font-size: 1.2rem;
    line-height: 1.45;         /* ギュッ感解消 */
    letter-spacing: 0.02em;
  }

  /* 実績バッジ */
  .hero2-badges {
    gap: 10px;
    margin-top: 12px;
  }

  .hero2-badges span {
    font-size: 0.6rem;
    padding: 8px 12px;
    line-height: 1.4;
    background: rgba(145,110,50,0.85);
  }


}
/* =========================================
   SMARTPHONE OPTIMIZATION
   （全体SP最適化）
========================================= */
@media (max-width: 768px) {

  /* ===== 共通 ===== */
  section {
    padding: 64px 16px;
  }

  p {
    line-height: 2;
  }


  /* ===== PROBLEM ===== */
  .problem {
    padding-top: 16px;
    padding-bottom: 8px;
  }

  .problem-bg {
    width: 100%;
    max-width: 450px;
    margin: 0 auto 12px; /* 画像と文章を近づける */
    display: block;
    margin: 0 auto;
  }

  .problem-text {
    padding-top: 8px;
    padding-bottom: 32px;
    font-size: 1.05rem;
    line-height: 1.9; /* 2は少し間延び */
    padding: 16px 12px 40px; /* 上を詰める */
  }

  .problem-text .lead {
    font-size: 1.15rem;
    margin-bottom: 12px; /* 強調文の締まり */
  }

  .problem-text p {
    margin-bottom: 14px;
  }
  /* 強調マーカー（改行ズレ防止） */
  .marker {
    background: linear-gradient(transparent 68%, #ffd84d 68%);
    padding: 0 3px;
    line-height: 1.9;
  }

  .blue {
    display: inline-block;
    line-height: 1.9;
  }

  .arrow {
    margin: 24px 0;
    font-size: 0.95rem;
  }

  .blue-box-image {
    padding: 24px 16px;
    margin: 24px auto;
  }

  /* ===== METHOD ===== */
  .method-section {
    padding-top: 24px;
  }
  .method-section .section-title {
    margin-bottom: 32px;
  }
  .method-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .method-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .method-left {
      margin-bottom: 16px;
  }

  .method-num {
    font-size: 2.6rem;
    margin-bottom: 8px;
  }

  .method-text {
    font-size: 1.1rem;
    line-height: 1.6;
  }
  .method-photo img {
    width: 90%;
    max-width: 320px;
    margin: 0 auto;
  }
  /* ===== METHOD RESULT ===== */
  .method-result-section {
    padding: 72px 16px;
  }

  .method-result-lead {
    font-size: 1.15rem;
    margin-bottom: 32px;
  }

  .method-result-list li {
    font-size: 1rem;
    padding-left: 44px;
    margin-bottom: 20px;
  }

  .method-result-list li::before {
    width: 28px;
    height: 28px;
  }

  /* ===== COMPARE ===== */
  .compare-section {
    padding-top: 24px;   /* ← ここが効く */
    padding-bottom: 32px;
  }
  .compare-section img {
    width: 100%;
    max-width: 520px;
    margin: 0 auto 24px;
    display: block;
  }

  .result-points li {
    font-size: 1.05rem;
    gap: 12px;
    margin-bottom: 16px;
    line-height: 1.6;
  }

  .result-points li::before {
    width: 28px;
    height: 28px;
  }

  /* ===== CASE ===== */
  .cases-section{
    padding-top: 24px;   /* ← ここが効く */
    padding-bottom: 32px;
  }
  .cases-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .case-title {
    font-size: 1.1rem;
  }

  .case-summary {
    font-size: 0.95rem;
    line-height: 1.9;
  }

  /* ===== FUTURE ===== */
  .future-section {
    padding: 80px 16px;
  }

  .future-title {
    font-size: 1.6rem;
    margin-bottom: 32px;
  }

  .future-lead {
    font-size: 1.1rem;
    margin-bottom: 32px;
  }

  .future-list li {
    font-size: 1rem;
    padding-left: 44px;
    margin-bottom: 20px;
  }

  .future-list li::before {
    width: 28px;
    height: 28px;
  }

  .future-result {
    font-size: 1.4em;
    line-height: 2;
  }

  /* ===== ROI ===== */
  .roi-section {
    padding: 72px 16px;
  }

  .roi-highlight span {
    font-size: 1.4rem;
  }

  /* ===== SUBSIDY ===== */
  .subsidy-section {
    padding: 72px 16px;
  }

  .subsidy-title {
    font-size: 1.4rem;
  }

  .subsidy-box li {
    font-size: 1rem;
    line-height: 1.8;
  }

  /* ===== VOICE ===== */
  .voice-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .voice-card {
    padding: 24px 20px;
  }

  /* ===== QA ===== */
  .qa-section {
    padding-top: 24px;   /* ← ここが効く */
    padding-bottom: 32px;
    
  }

  .question span {
    font-size: 0.95rem;
  }

  .answer p {
    font-size: 0.95rem;
    line-height: 1.9;
  }

  /* ===== CONTACT ===== */
   .contact-section {
    padding: 56px 16px; /* 全体を少しコンパクトに */
  }

  .contact-title {
    font-size: 1.4rem;
    margin-bottom: 32px;
  }

  .contact-grid {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap; /* ← 重要：折り返させない */
  }

  .contact-card {
    width: 32%;        /* ← 3つ横並びの決定打 */
  }

  .contact-card .label {
    font-size: 0.85rem;
    margin-bottom: 8px;
  }

  .contact-icon {
    width: 100%;
    height: auto;      /* 正方形維持 */
    max-width: 110px;  /* ← スマホでの最適サイズ */
    margin: 0 auto;
    border-radius: 18px;
  }

  /* hover演出はスマホでは弱める */
  .contact-card:hover .contact-icon {
    transform: none;
    box-shadow: none;
  }
 
  /* ===== LAST MESSAGE ===== */
  .last-message {
    padding: 80px 16px;
  }

  .last-message p {
    font-size: 1rem;
    line-height: 2;
    letter-spacing: 0.04em;
  }
}

.section-title .jp {
  font-size: 1.6rem;
}