@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
/* ===== Base ===== */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

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

p {
  margin: 0;
  padding: 0;
}

:root {
  --ink: #0b1020;
  --blue: #2959c6;
  --blue-d: #1d3e8e;
  --muted: #6e7aa2;
  --panel: #eff3f8;
  --txtcolor: #333333;
  --mainblue: #2f65a2;
  --textcolor: #333333;
  --lightblue: #f8f8f8;
  --white: #fff;
  --tri: #808080;
  --gradst: #005da3;
  --graden: #da437a;
  --offset: 7px; /* 黄レイヤーを右下へずらす量 */
  --accent: #f7cf2d; /* 黄レイヤーの色 */
  --radius: 5px;
  --pad-y: 14px;
  --pad-x: 18px;
  --tail: 10px; /* 三角のサイズ */
  --gap: 24px;
}

body {
  font-family: "Noto Sans JP", sans-serif, system-ui, -apple-system, Segoe UI, Roboto;
  color: #1a2540;
  background: #fff;
  line-height: 1.9;
  overflow-x: hidden;
}

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

figure {
  margin: 0;
}

a {
  color: var(--txtcolor);
}

.wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

@media screen and (max-width: 767px) {
  .wrap {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
}
.en {
  letter-spacing: 0.06em;
}

.title {
  margin: 0 auto;
  height: 40px;
}

.title_s {
  margin: 0 auto;
  width: 313px;
  height: auto;
}

@media (max-width: 767px) {
  .title {
    height: 25px;
  }
  .title_s {
    height: 0.85rem;
    width: auto;
  }
}
/* ===== Show/Hide utilities ===== */
/* まずは両方「表示」を初期値に（上書きの土台） */
.pc-only,
.sp-only {
  display: block;
}

/* スマホでは pc-only を隠す／ sp-only を表示 */
@media (max-width: 767px) {
  .pc-only {
    display: none !important;
  }
  .sp-only {
    display: block !important;
  } /* インライン要素にしたいなら inline に */
}
/* PC/タブレットでは sp-only を隠す／ pc-only を表示 */
@media (min-width: 768px) {
  .pc-only {
    display: block !important;
  }
  .sp-only {
    display: none !important;
  }
}
/* ===== PC/タブレット（既存維持：sticky） ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  overflow: visible;
}

.header .header-inner {
  max-width: 1700px;
  width: 85%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  min-height: 80px;
  padding-inline: 0;
}

.header .brand img {
  display: block;
  height: 41px; /* PCロゴ高さ */
  width: auto;
}

/* ===== スマホだけ absolute にする ===== */
@media (max-width: 767px) {
  .header {
    position: absolute; /* ← ここだけ切替 */
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: transparent; /* ヒーロー上に重ねる想定。必要なら半透明に */
    /* 例）background: rgba(255,255,255,.8); backdrop-filter: blur(8px); */
  }
  .header .header-inner {
    position: relative; /* absoluteは使わない：ズレ防止 */
    max-width: 100%;
    width: 100%;
    min-height: 56px; /* タップしやすい高さ */
    padding: 8px 16px; /* 左右余白 */
    margin: 0;
  }
  .header .brand img {
    height: 24px; /* SPロゴ高さを統一 */
    width: auto;
  }
  /* 以前の競合指定があれば打ち消し（例：.brand img {height:30px;}） */
  .brand img {
    height: auto;
  } /* 既存グローバルを無効化したいときだけ残す */
}
/* 保険：横スクロール防止 */
html,
body {
  overflow-x: hidden;
}

/* 画像の実寸比をここで調整できるように（既定は16:9=1080/1920） */
.fv {
  --bg-ratio: 1080/1920;
} /* 例：もし画像が 1920×1200 なら 1200/1920 に変更 */
.fv__rail {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: clamp(1280px, 100vw, 1920px);
}

@media (min-width: 768px) {
  .fv__rail {
    margin-top: -40px;
  } /* PCは全体を-80px上げ */
}
/* ✨ 画像を“切らない”設定：フレーム高さ＝幅×実寸比、背景は幅100%で縮小拡大、下端基準 */
.fv__frame {
  position: relative;
  width: 100%;
  height: calc(clamp(1280px, 100vw, 1920px) * var(--bg-ratio));
  /* aspect-ratio は保険。主要値は上の height 計算で決定 */
  aspect-ratio: calc(1 / var(--bg-ratio));
  /* ★ パスは CSS からの相対。外部CSSなら ../assets/ */
  background-image: url("../assets/img/pc/fv_bg.webp");
  background-repeat: no-repeat;
  background-size: 100% auto; /* 幅にフィット（上下に黒帯は出ない） */
  background-position: 50% 100%; /* ★中央・下端基準に変更（bottom） */
  overflow: hidden;
  /* テキスト可変用コンテナ基準 */
  container-type: inline-size;
  container-name: fv;
}

/* テキスト：横センター固定、縦位置は“画像高さ比”で追従（ズレ防止） */
.fv__txts {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  --y: 280; /* デザイン上の上からのpx（1080基準） */
  top: calc(var(--y) / 1080 * 100%); /* 画像の比率に連動して可変 */
  text-align: center;
}

/* 1280〜1920の間でだけサイズ可変 */
.fv__txt--1 {
  width: clamp(340px, 27cqw, 520px);
  margin: 0 auto;
}

.fv__txt--2 {
  width: clamp(360px, 38cqw, 680px);
  margin: 14px auto 28px;
}

.fv__lead {
  max-width: clamp(38ch, 60cqw, 70ch);
  font-size: clamp(14px, 1.1cqw, 18px);
  line-height: 2.2;
  color: #333;
  margin: 0 auto;
}

@supports not (width: 1cqw) {
  .fv__txt--1 {
    width: 520px;
  }
  .fv__txt--2 {
    width: 680px;
  }
  .fv__lead {
    max-width: 70ch;
    font-size: 18px;
  }
}
/* ===== SP修正（375px基準／重ねない・縦積み） ===== */
@media (max-width: 767px) {
  section.fv {
    /* 375px基準スケール & 余白量（px） */
    --s: calc(100vw / 375);
    --fv-gap-sp: 24;
    /* 余白は padding-bottom で確実に可視化（margin 折り畳みを無効化） */
    padding-bottom: calc(var(--s) * var(--fv-gap-sp) * 1px) !important;
    display: flow-root !important;
  }
  /* 背景ブロックの下外側余白はゼロ固定（片側に統一） */
  section.fv .fv__frame {
    margin-bottom: 0 !important;
  }
  /* 念のため：FV直後の要素に付いている margin-top を打ち消す */
  section.fv + * {
    margin-top: 0 !important;
  }
  /* SP背景の基本定義（被せて最終勝ち） */
  section.fv .fv__rail {
    left: 0 !important;
    -webkit-transform: none !important;
            transform: none !important;
    width: 100vw !important;
    margin-top: 0 !important;
  }
  section.fv .fv__frame {
    position: relative !important;
    width: 100vw !important;
    height: calc(100vw * var(--bg-ratio-sp)) !important;
    min-height: 97vh !important;
    background: url("../assets/img/sp/fv_bg.webp") 50% 0/100% auto no-repeat !important;
    overflow: hidden !important;
  }
  /* 以前に入れた frame 側の余白指定は打ち消す（片方に統一） */
  .fv__frame {
    margin-bottom: 0 !important;
  }
  .fv__rail {
    left: 0;
    -webkit-transform: none;
            transform: none;
    width: 100vw;
    margin-top: 0;
  }
  .fv__frame {
    position: relative;
    width: 100vw;
    height: calc(100vw * var(--bg-ratio-sp));
    min-height: 100vh;
    background-image: url("../assets/img/sp/fv_bg.webp");
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: 100% auto;
    aspect-ratio: auto;
    overflow: hidden;
  }
  .fv__txts {
    position: static;
    -webkit-transform: none;
            transform: none;
    text-align: center;
    margin: clamp(16px, 4vh, 28px) 16px 0;
  }
  .fv__txt--1 {
    position: static;
    width: 88vw;
    max-width: 100%;
    height: auto;
    margin: 71% auto 0;
    display: block;
  }
  .fv__txt--2 {
    position: static;
    display: block; /* 不要なら none */
    width: min(84vw, 320px);
    max-width: 100%;
    height: auto;
    margin: clamp(8px, 2.5vw, 14px) auto 0;
  }
  .fv__lead {
    position: static;
    width: 92vw;
    max-width: 100%;
    margin: 83% auto 13%;
    font-size: 4vw;
    line-height: 2;
    letter-spacing: -0.04em;
    text-align: justify;
  }
  br.pc_only,
  br.pc-only {
    display: none !important;
  }
  .fv__frame {
    margin-bottom: 0 !important;
  }
}
/* SPだけ改行 */
br.sp_only,
br.sp-only {
  display: none;
}

@media (max-width: 767px) {
  br.sp_only,
  br.sp-only {
    display: inline !important;
  }
}
html,
body {
  overflow-x: hidden;
}

/* ===== Concerns ===== */
.concerns_wrap {
  background-image: url("../assets/img/pc/bg_02.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 100px 0px 0 0px;
}
@media (max-width: 767px) {
  .concerns_wrap {
    background-image: url("../assets/img/sp/bg_02.webp");
    padding: 43px 0px 0 0px;
  }
}

.pill {
  display: block;
  width: 575px;
  margin: 0 auto;
  background: #fff;
  color: var(--mainblue);
  border-radius: 999px;
  padding: 8px 36px;
  font-weight: 500;
  font-size: 13px;
  text-align: center;
}
@media (max-width: 767px) {
  .pill {
    width: calc(100% - 40px);
  }
}
.pill--jp {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  font-size: 30px;
}

@media (max-width: 767px) {
  .pill--jp {
    font-size: 20px;
    margin-top: 16px;
    padding: 0;
  }
}
.concerns {
  padding: 22px 0 122px;
}
@media screen and (max-width: 767px) {
  .concerns {
    padding: 0px 0 50px;
  }
}

.panel {
  margin-top: 18px;
  padding-bottom: 50px;
}
@media (max-width: 767px) {
  .panel {
    padding: 0 15px;
  }
}

.fukidashi {
  --offset: 7px;
  position: relative;
  display: inline-block;
  line-height: 0; /* 画像下の隙間防止 */
}
.fukidashi__fg {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
}
.fukidashi__bg {
  position: absolute;
  mix-blend-mode: multiply;
  left: var(--offset);
  top: var(--offset);
  z-index: 1;
  width: 100%;
  height: auto;
  pointer-events: none; /* クリック妨げ防止（任意） */
  -webkit-filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
          filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
}

.fukidashi_ireg01 {
  -webkit-transform: translateX(2vh) translateY(4vh);
          transform: translateX(2vh) translateY(4vh);
  z-index: 3;
}
@media screen and (max-width: 767px) {
  .fukidashi_ireg01 {
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
}

.fukidashi_ireg02 {
  -webkit-transform: translateX(0.2vh) translateY(4vh);
          transform: translateX(0.2vh) translateY(4vh);
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .fukidashi_ireg02 {
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
}

.fukidashi_ireg03 {
  -webkit-transform: translateX(1.5vh) translateY(0);
          transform: translateX(1.5vh) translateY(0);
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .fukidashi_ireg03 {
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
}

.bubbles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.arrow {
  width: 25px;
  margin: 0 auto;
  -webkit-transform: translateY(130px);
          transform: translateY(130px);
}
@media screen and (max-width: 767px) {
  .arrow {
    -webkit-transform: translateY(35px);
            transform: translateY(35px);
    width: 3.4666666667%;
  }
}

/* 
.bubble{background:#fff;border:1px solid #e5ebf6;border-radius:10px;box-shadow:0 10px 26px rgba(18,40,90,.08);padding:12px 14px;position:relative}
.bubble:after{content:"";position:absolute;bottom:-11px;left:28px;width:26px;height:6px;border-radius:3px;background:attr(data-accent color, #e0b24d); }
.bubble{--accent:#e0b24d}
.bubble[data-accent]{--accent:initial}
.bubble:after{background:var(--accent)}
.arrow{width:1px;height:34px;background:#cbd7f2;margin:20px auto 0;position:relative}
.arrow:after{content:"";position:absolute;bottom:-6px;left:-5px;border:6px solid transparent;border-top-color:#cbd7f2}
@media(max-width:767px){
  .panel{padding:16px;border-radius:16px}
  .bubbles{grid-template-columns:1fr;gap:12px}
} 
*/
/* レイアウト：PC 3列×2行 / SP 1列 */
.bubbles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 55px;
  -webkit-column-gap: 9px;
     -moz-column-gap: 9px;
          column-gap: 9px;
  max-width: 910px;
  margin: 0 auto;
  padding: 15px 0;
}

@media (max-width: 767px) {
  .bubbles {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
}
/* 1カード */
.bubble {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}
@media (max-width: 767px) {
  .bubble {
    width: 79%;
  }
}

.bubble__fg {
  position: relative;
  z-index: 2; /* ← 白を前面に */
  background: #fff;
  color: #333333;
  border-radius: var(--radius);
  padding: var(--pad-y) var(--pad-x);
  text-align: center;
  line-height: 1.7;
  -webkit-box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 25px 0px;
  font-size: 16px;
}
@media screen and (max-width: 767px) {
  .bubble__fg {
    font-size: 3.75vw;
  }
}

.bubble__fg::after {
  content: "";
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: calc(-1 * var(--tail));
  border-left: var(--tail) solid transparent;
  border-right: var(--tail) solid transparent;
  border-top: var(--tail) solid #fff; /* 白の三角 */
}

/* 背面・黄色 */
.bubble__bg {
  position: absolute;
  inset: 0;
  -webkit-transform: translate(var(--offset), var(--offset));
          transform: translate(var(--offset), var(--offset));
  background: var(--accent);
  border-radius: var(--radius);
  z-index: 1; /* ← 黄を背面に */
  -webkit-filter: drop-shadow(7px 7px 5px rgba(160, 160, 160, 0.7));
          filter: drop-shadow(7px 7px 5px rgba(160, 160, 160, 0.7));
}

.bubble__bg::after {
  content: "";
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: calc(-1 * var(--tail));
  border-left: var(--tail) solid transparent;
  border-right: var(--tail) solid transparent;
  border-top: var(--tail) solid var(--accent); /* 黄の三角 */
}

.bubbles .bubble:nth-child(1) {
  --accent: #ffd430;
} /* yellow */
.bubbles .bubble:nth-child(2) {
  --accent: #648f6a;
} /* lime */
.bubbles .bubble:nth-child(3) {
  --accent: #24d0fc;
} /* blue */
.bubbles .bubble:nth-child(4) {
  --accent: #398681;
} /* pink */
.bubbles .bubble:nth-child(5) {
  --accent: #ffbb00;
} /* salmon */
.bubbles .bubble:nth-child(6) {
  --accent: #36bcdf;
} /* mint */
@media (max-width: 767px) {
  .bubbles > .bubble {
    justify-self: start;
  } /* 基本は左 */
  .bubbles > .bubble:nth-child(even) {
    justify-self: end;
    margin-right: 7px;
  } /* 偶数だけ右 */
}
/* ===== Solve ===== */
.solve {
  position: relative;
  background: #fff;
  margin-bottom: 100px;
}
.solve .wrap {
  padding-top: 10px;
}
.solve .title {
  width: 500px;
}
@media screen and (max-width: 767px) {
  .solve .title {
    width: 272px;
  }
}

@media screen and (max-width: 767px) {
  .solve {
    padding: 15px;
  }
}
.solve__ttl {
  text-align: center;
  color: var(--mainblue);
  margin: 0 0 18px;
  font-weight: 500;
  font-size: 30px;
  margin: 0 auto;
  text-align: center;
  font-weight: 600;
}

@media (max-width: 767px) {
  .solve__ttl {
    font-size: 25px;
    letter-spacing: 0.16rem;
    font-weight: 600;
    line-height: 2rem;
    padding-top: 8px;
  }
}
.solve__layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 28px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 1000px;
  margin: 32px auto 0;
}

.illust img {
  width: 100%;
}

.txt {
  border-left: 1px solid white;
  padding: 0 20px;
}

@media screen and (max-width: 767px) {
  .txt {
    border-top: 1px solid white;
    padding: 15px 0;
    border-left: none;
  }
}
.caption {
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

.points {
  margin-left: 30px;
}
@media screen and (max-width: 767px) {
  .points {
    margin-left: 0;
  }
}

.badge {
  display: inline;
  background: var(--mainblue);
  color: #fff;
  font-weight: 900;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-size: 24px;
  font-weight: 700;
  padding: 0.4em;
  line-height: 3;
  letter-spacing: 0.08rem;
}
@media screen and (max-width: 767px) {
  .badge {
    font-weight: 500;
    padding: 0 8px;
    line-height: 1.8;
    background: #2f65a2;
    letter-spacing: 0.06em;
    font-size: 6.7vw;
  }
}

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  padding-top: 30px;
}
.checks li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid var(--mainblue);
}
@media (max-width: 767px) {
  .checks li {
    gap: 5px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.checks li img {
  width: 20px;
  margin-top: 4px;
}
.checks li span {
  font-size: 22px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--mainblue);
  font-weight: 600;
}
@media (max-width: 767px) {
  .checks li span {
    letter-spacing: 0.01em;
    font-weight: 600;
    letter-spacing: 0.05em;
    font-size: 4.25vw;
  }
}

.curve--btm {
  height: 58px;
  background: url("assets/img/pc/bg_02.webp") no-repeat 50%/100% 100%;
  margin-top: 24px;
}

@media (max-width: 767px) {
  .solve__layout {
    grid-template-columns: 1fr;
    gap: 37px;
  }
  .illust img {
    max-width: 240px;
    margin: 0 auto;
  }
}
/* ===== What ===== */
.what {
  background: #fff;
  overflow: hidden;
  background: url("../assets/img/pc/what-bg.webp") center top/cover no-repeat;
  padding-top: 100px;
  padding-bottom: 60px;
}
@media (max-width: 767px) {
  .what {
    background: url("../assets/img/sp/sp-what-bg.webp") center top/cover no-repeat;
    padding-top: 80px;
  }
}

.what__kicker {
  text-align: center;
  color: #8a95b4;
  font-weight: 800;
  font-size: 12px;
  margin: 0;
}

.what__ttl {
  text-align: center;
  color: var(--mainblue);
  margin: 8px 0 6px;
  font-weight: 500;
  font-size: 30px;
  width: 575px;
  margin: 20px auto 30px;
  text-align: center;
  padding: 12px 16px;
  background: #fff;
  border-radius: 9999px;
  color: #2c5e9a;
  line-height: 1.2;
}
@media (max-width: 767px) {
  .what__ttl {
    width: calc(100% - 40px);
    font-size: 20px;
    padding: 4px;
    margin: 20px auto 20px;
  }
}

.what__desc {
  text-align: center;
  color: var(--mainblue);
  max-width: 760px;
  margin: 0 auto 40px;
  line-height: 2.3;
  font-size: 20px;
  font-weight: 600;
}

@media (max-width: 767px) {
  .what__ttl {
    font-size: 20px;
    line-height: 1.5;
  }
  .what__desc {
    font-size: 15px;
    text-align: justify;
    padding: 0 15px;
    line-height: 2;
    font-weight: 600;
    letter-spacing: 0.1em;
  }
}
.steps {
  display: grid;
  grid-template-columns: 1fr 20px 1fr 20px 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
.steps .en {
  color: var(--mainblue);
  font-size: 34px;
  margin: 0 0 -10px 0;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
@media (max-width: 767px) {
  .steps .en {
    font-size: 30px;
    letter-spacing: 0.02em;
  }
}
.steps .sub {
  color: var(--textcolor);
  font-size: 23px;
  padding-bottom: 20px;
  font-weight: 400;
}
@media (max-width: 767px) {
  .steps .sub {
    font-size: 20px;
    font-weight: 400;
  }
}
.steps .cont {
  color: var(--textcolor);
  font-size: 16px;
  text-align: start;
}
@media (max-width: 767px) {
  .steps .cont {
    font-size: 15px;
  }
}
.steps p {
  margin: 0;
}

.step {
  text-align: center;
  border-radius: 18px;
  padding: 14px 14px 20px;
  position: relative;
}
@media (max-width: 767px) {
  .step {
    padding: 14px 15px 20px;
  }
}
.step img {
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
  margin: 10px auto;
}
.step .num {
  position: absolute;
  top: 12px;
  left: calc(8% - 18px);
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
}
.step .num img {
  height: auto;
}
.step .y {
  -webkit-box-shadow: 5px 5px 0px 0px rgb(255, 212, 48);
          box-shadow: 5px 5px 0px 0px rgb(255, 212, 48);
}
.step .g {
  -webkit-box-shadow: 5px 5px 0px 0px rgb(202, 212, 100);
          box-shadow: 5px 5px 0px 0px rgb(202, 212, 100);
}
.step .m {
  -webkit-box-shadow: 5px 5px 0px 0px rgb(146, 209, 154);
          box-shadow: 5px 5px 0px 0px rgb(146, 209, 154);
}

.tri {
  width: 0;
  height: 0;
  border-left: 12px solid var(--tri);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin: 0 auto;
  margin-top: 150px;
}

.curve--white {
  height: 58px;
  background: url("assets/img/pc/bg_04.webp") no-repeat 50%/100% 100%;
  margin-top: 18px;
}

@media (max-width: 767px) {
  .steps {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .tri {
    display: inline;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    margin: 0 auto;
    border-left: 30px solid var(--tri);
    border-top: 25px solid rgba(0, 0, 0, 0);
    border-bottom: 25px solid rgba(0, 0, 0, 0);
  }
  .step .num {
    left: calc(18% - 18px);
  }
  .step img {
    width: auto;
    height: auto;
  }
}
@media (max-width: 767px) {
  .step .num img {
    width: 67px;
    height: 67px; /* 正円アイコンをキープしたい場合 */
    -o-object-fit: contain;
       object-fit: contain; /* 画像切れ防止。必要なければ削除可 */
  }
}
@media (max-width: 767px) {
  /* 直下の画像 or クラス付けした .step-img のみを対象にする
     → .step .num img には影響しない */
  .step > img,
  .step .step-img {
    width: 225px;
    height: 225px;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 50%;
    display: block;
    margin: 10px auto; /* 既存と同じ余白 */
  }
}
/* ===== Menu over photo ===== */
.menu {
  position: relative;
  padding: 110px 0 70px;
}
.menu .wrap {
  max-width: 1100px;
}
.menu__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media screen and (max-width: 767px) {
  .menu {
    padding: 70px 15px 40px;
  }
  .menu .title_s {
    padding-top: 20px;
    padding-bottom: 15px;
    width: 195px;
  }
}
.card {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  background: rgba(47, 101, 164, 0.9);
  color: #fff;
  border-radius: 18px;
  padding: 70px 150px;
  -webkit-box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4);
          box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4);
}

.menu__kicker {
  text-align: center;
  margin: 0;
  font-weight: 800;
  opacity: 0.9;
}

.bar {
  display: block;
  width: 575px;
  margin: 20px auto 50px;
  border: 1px solid white;
  color: white;
  border-radius: 999px;
  padding: 8px 36px;
  font-weight: 800;
  font-size: 30px;
}
.bar p {
  margin: 0;
  font-weight: 700;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .bar {
    font-size: 20px;
    padding: 0;
    margin: 0 auto 15px;
    width: auto;
  }
}
.line {
  display: grid;
  grid-template-columns: 193px 1fr;
  gap: 18px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  padding: 0;
  padding-bottom: 74px;
}
@media screen and (max-width: 767px) {
  .line {
    gap: 5px;
    padding-bottom: initial;
  }
}
.line:first-child {
  border-top: none;
}

.no {
  opacity: 0.9;
  font-size: 36px;
  font-weight: 300;
  margin: 0;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
@media (max-width: 767px) {
  .no {
    font-size: 25px;
  }
}

.tag {
  display: inline-block;
  background: #f7fbff;
  color: var(--mainblue);
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 10px 4px;
  font-size: 33px;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
@media (max-width: 767px) {
  .tag {
    padding: 2px 12px 3px;
    font-size: 25px;
    letter-spacing: 0.02em;
  }
}

.menu h2 {
  font-size: 30px;
  text-align: center;
  margin: 0;
  font-weight: 500;
}
@media (max-width: 767px) {
  .menu h2 {
    font-size: 20px;
    font-weight: 500;
  }
}
.menu h3 {
  margin: 8px 0 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.menu p {
  font-size: 16px;
}
@media (max-width: 767px) {
  .menu p {
    font-size: 15px;
    padding-bottom: 15px;
    letter-spacing: -0.6px;
    text-align: justify;
  }
}

@media (max-width: 767px) {
  .card {
    margin: 0;
    padding: 18px;
    -webkit-transform: none;
            transform: none;
  }
  .line {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
/* ===== About ===== */
.about {
  background: #fff;
  padding: 42px 0 70px;
}
.about .title_s {
  margin: 100px auto 50px;
  width: 125px;
}
@media screen and (max-width: 767px) {
  .about .title_s {
    width: 70px;
    margin: 50px auto 30px;
  }
}

@media screen and (max-width: 767px) {
  .about {
    padding: 10px 15px 40px;
  }
}
.about__ttl {
  text-align: center;
  color: #2f65a2;
  margin: 0 0 20px;
  font-weight: 900;
}

.about__wrap {
  display: grid;
  grid-template-columns: 2fr 1.5fr;
  gap: 48px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  max-width: 1100px;
  padding: 0;
}

@media screen and (max-width: 767px) {
  .about__wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    grid-template-columns: 2fr 1.5fr;
    gap: 24px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
.gallery {
  grid-column: 1/2;
  display: grid;
  gap: 12px;
}
.gallery .big {
  margin: 0;
}
.gallery .smalls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gallery img {
  border-radius: 10px;
}

.about__text {
  grid-column: 2/3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0;
}
.about__text p {
  border-bottom: 1px solid var(--mainblue);
  color: var(--textcolor);
  padding-bottom: 2.5rem;
  padding-top: 2rem;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 767px) {
  .about__text p {
    font-size: 15px;
    padding: 25px 10px 25px;
    letter-spacing: -0.3px;
    line-height: 2em;
    border: none;
  }
}
.about__text .boder-none {
  border-bottom: 1px solid #2f65a2;
}

.ma {
  width: 340px;
}

.contacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 26px;
}

.box {
  padding: initial;
  color: var(--textcolor);
}
@media screen and (max-width: 767px) {
  .box h3 {
    font-size: 22px;
    margin-bottom: 5px;
  }
  .box p {
    font-size: 15px;
  }
}

.tel .number {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 767px) {
  .tel .number {
    margin-top: 15px;
  }
}

.btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  border: 1px solid;
  color: var(--txtcolor);
  border-radius: 16px;
  padding: 20px 18px;
  font-weight: 900;
  text-decoration: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.btn img {
  width: 30px;
}

@media (max-width: 767px) {
  .about__wrap {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ma {
    width: 170px;
    margin: 0 auto;
  }
  .contacts {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
.contact {
  background: #f8f8f8;
  padding: 40px 0 60px;
}

@media screen and (max-width: 767px) {
  .contact {
    padding: 0 15px 40px;
  }
}
/* ===== Footer ===== */
.footer {
  background: -webkit-gradient(linear, left top, right top, from(var(--gradst)), to(var(--graden)));
  background: linear-gradient(90deg, var(--gradst), var(--graden));
  color: #fff;
  padding: 80px 0 60px;
}
@media screen and (max-width: 767px) {
  .footer {
    padding: 40px 0;
  }
}
.footer .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.footer .wrap img {
  display: block;
  height: 80%;
  width: auto;
}
@media (max-width: 767px) {
  .footer .wrap img {
    width: 140px;
    padding: 0px 0 20px;
  }
}
@media screen and (max-width: 767px) {
  .footer .wrap p {
    font-size: 12px;
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .footer .wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0;
  }
}
.footer__logo {
  width: 190px;
  margin: 0 auto 8px;
  -webkit-filter: brightness(200%);
          filter: brightness(200%);
}

.copy {
  opacity: 1;
}

/* PCでは改行タグを隠す */
.sp-br {
  display: none;
}

/* 767px以下だけ表示（=改行させる） */
@media (max-width: 767px) {
  .sp-br {
    display: inline-block;
  } /* または display:initial; */
}
/* PCでは改行タグを隠す */
.pc-br {
  display: inline-block;
}

/* 767px以下だけ表示（=改行させる） */
@media (max-width: 767px) {
  .pc-br {
    display: none;
  } /* または display:initial; */
}/*# sourceMappingURL=style.css.map */