/* =========================================================
   実践型AI学習スクール — メインビジュアル
   モバイルファースト（SPデフォルト → min-width でPCを上書き）
   ---------------------------------------------------------
   ブレークポイント
     base            : スマホ（〜599px を想定した初期値）
     min-width:600px : タブレット
     min-width:861px : PC（旧 max-width:860px の境界を反転）
   ---------------------------------------------------------
   フォントサイズは rem 指定（ユーザーのブラウザ文字サイズ設定を尊重）。
   基準は 1rem = 16px。clamp() 内の vw はそのまま維持。
   ========================================================= */

:root{
  --ink:        #1a2430;   /* 見出しの濃色 */
  --accent:     #0071e3;   /* シアン系アクセント（40代・強調語） */
  --accent-deep:#0071e3;   /* CTA濃いめ */
  --body-text:  #3a4553;   /* 本文グレー */
  --border:#c0d0dc;
  --pale-blue:  #eff8ff;
  --white:  #fff;
  --font-family-base: 'Minion Variable Concept', 'Noto Sans JP', sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%;
	scroll-behavior: smooth;}

body{
  font-family:var(--font-family-base);
  color:var(--body-text);
  background:#fff;
  line-height:1.6;
}

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


/* =========================================================
   HERO ─ ベース（＝スマホ）
   1カラム縦積み：テキスト → 写真2枚
   ========================================================= */
.hero{
display:flex;
flex-direction:column;
background:
radial-gradient(
  circle at 20% 20%,
  rgba(255,255,255,0.9) 0%,
  rgba(255,255,255,0) 32%
),
linear-gradient(
  135deg,
  #f4fbff 0%,
  #dcefff 45%,
  #c7e4fa 100%
);
}

/* --- 左：テキスト側 --- */
.hero__left{
  position:relative;
  padding:60px 6% 30px;   /* 上部はロゴぶんの余白を確保 */
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.logo{
  position:absolute;
  top:0; left:0;
  background:#fff;
  padding:14px 22px 15px;
  border-bottom-right-radius:14px;
}
.logo img{ height:24px; width:auto; }

.hero__inner{ max-width:620px; }

/* --- 右：写真側（スマホでも横並び2枚。高さを抑えて横長に） --- */
.hero__right{
  /*display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr;*/
  height: 100%;
  overflow: hidden;
}
.hero__righ img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.headline{
  font-size: clamp(2.25rem, 1.5rem + 2.8vw, 4.5rem);
  font-weight:800;
  line-height:1.2;
  letter-spacing:.01em;
  margin-bottom:15px;
}
.headline .em{ color:var(--accent); }

.lead{
  color:var(--body-text);
  font-size:0.9rem;
  line-height:1.6;
  font-weight:500;
}
.lead .quote{font-weight:700; }
.lead__note{ margin-top:14px; font-weight:600; }

.gmo-logo {
  margin-top: 24px;
  max-width: 500px; 
  width: 100%;
}

.gmo-logo img {
  width: 100%;
  height: auto;
  display: block;
}


/* --- CTA --- */
.cta-wrap{
  margin-top:34px;
  position:relative;
  display:block;
  text-align:center;
}
.cta-badge{
  position:absolute;
  top:-15px; left:50%;
  transform:translateX(-50%);
  background:#fff;
  color:var(--ink);
  font-size:0.8125rem;  /* 13px */
  font-weight:700;
  padding:5px 20px;
  border-radius:999px;
  white-space:nowrap;
  box-shadow:0 2px 8px rgba(20,60,90,.12);
  z-index:2;
}
.cta-badge .num{ color:var(--accent); }

.cta{
  display:block;
  background:var(--accent);
  color:#fff;
  font-size:clamp(0.9375rem,4.4vw,1.125rem); /* 15–18px */
  font-weight:800;
  letter-spacing:.01em;
  white-space:nowrap;
  text-decoration:none;
  padding:22px 24px;
  border-radius:999px;
  box-shadow:0 10px 24px rgba(14, 61, 148, 0.3);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cta:hover{
  background:#0b2181;
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(14, 63, 148, 0.38);
}
.cta:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

.sp-only{ display:block; }


/* =========================================================
   習得スキルセクション ─ ベース（＝スマホ）
   ========================================================= */
.skills{
  position:relative;
  background:var(--white);
  padding:30px 0 44px;
  overflow:visible;              /* ▼がはみ出せるように */
}
.skills__inner{
  width:90%;
  max-width:1200px;
  margin:0 auto;
}
.skills__title{
  text-align:center;
  color:var(--body-text);
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem);
  font-weight:800;
  line-height:1.5;
  margin-bottom:28px;
}
.skills__title span{
font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
}
.skills__title strong{
color: var(--accent);
}

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

.skill-card{
  position:relative;
  background:var(--pale-blue);
  border-top: var(--accent) solid 2px;
  border-radius:6px;
  padding:16px 16px;
  /*box-shadow:0 6px 16px rgba(10,30,60,.14);
  display:flex;*/
  align-items:center;
}

.skill-card h3{
font-size: clamp(1.125rem, 1rem + 0.45vw, 1.5rem);
  line-height: 1.4;
  min-height: 2.8em;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.skill-card p{
font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  line-height: 1.4;
}
.skill-card img{
width: 70%;
display: block;
margin: 0 auto 14%;
}

/* 次セクションへ繋ぐ▼
   濃紺セクションの下辺から白いセクションに向かって突き出す。
   絶対配置で下へはみ出させることで、白背景の上に濃紺の三角が見える。 */
.skills__arrow{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translate(-50%,100%);   /* 下辺から下へ100%ぶん出す */
  width:0; height:0;
  border-left:44px solid transparent;
  border-right:44px solid transparent;
  border-top:26px solid var(--white);
  z-index:2;
}


/* =========================================================
   年収セクション ─ ベース（＝スマホ）
   ========================================================= */
.income{
  position:relative;
  background:#d9edff;
  padding:44px 0;
  overflow:visible;              /* ▼がはみ出せるように */
}
.income__inner{
  width:90%;
  max-width:1200px;
  margin:0 auto;
}

.income__title{
  text-align:center;
  color:var(--body-text);
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem);
  font-weight:800;
  line-height:1.5;
  margin-bottom:28px;
}
.income__title span{
font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
}
.income__title strong{
color: var(--accent);
}

.income__txt{
font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
margin-bottom: 6%;
}

/* =========================
   グラフ全体
========================= */

.income__graph {
  display: grid;
  gap: 30px;
  width:90%;
  max-width:800px;
  margin:0 auto;
  background: var(--white);
  border-radius: 6px;
  padding: 6%;
}


/* =========================
   1項目
========================= */

.income__row {
  display: grid;
  gap: 10px;
}

.income__row + .income__row {
  margin-top: 0;
}

.income__label {
  margin: 0;
  color: var(--body-text);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  font-weight: 700;
  line-height: 1.5;
}

/* =========================
   バー
========================= */

.income__bar {
  position: relative;
  width: var(--bar-width);
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 10px;

  box-sizing: border-box;

  /* 初期状態 */
  transform: scaleX(0);
  transform-origin: left center;

  transition:
    transform 0.9s cubic-bezier(.22, 1, .36, 1);

  will-change: transform;
}


/* 左端の縦線 */

.income__bar::before {
  content: "";

  position: absolute;
  left: 0;
  top: 50%;

  width: 1px;
  height: 66px;

  background:var(--body-text);

  transform: translateY(-50%);
}


/* 色 */

.income__bar--gray {
  background:#8592a3;
}

.income__bar--blue {
  background:#e37500;
}


/* =========================
   金額
========================= */

.income__value {
  position: relative;
  z-index: 1;

  margin: 0;

  white-space: nowrap;
  line-height: 1;

  opacity: 0;

  transition:
    opacity 0.3s ease;
}

.income__value strong {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);
  font-weight: 700;
}

.income__value span {
  margin-left: 2px;

  font-size: 0.72rem;
  font-weight: 400;
}


/* グレーのバー */

.income__bar--gray .income__value {
  color: var(--white);
}


/* 青いバー */

.income__bar--blue .income__value {
  color: #fff;
}


/* =========================
   表示されたとき
========================= */

.income.is-visible .income__bar {
  transform: scaleX(1);
}

.income.is-visible .income__value {
  opacity: 1;
}


/* =========================
   バーのアニメーション遅延
========================= */

.income__row:nth-child(1) .income__bar {
  transition-delay: 0s;
}

.income__row:nth-child(2) .income__bar {
  transition-delay: 0.12s;
}

.income__row:nth-child(3) .income__bar {
  transition-delay: 0.24s;
}


/* =========================
   金額表示の遅延
========================= */

.income__row:nth-child(1) .income__value {
  transition-delay: 0.7s;
}

.income__row:nth-child(2) .income__value {
  transition-delay: 0.82s;
}

.income__row:nth-child(3) .income__value {
  transition-delay: 0.94s;
}


/* =========================
   下の矢印・切り込み
   必要な場合
========================= */


/* 次セクションへ繋ぐ▼
   濃紺セクションの下辺から白いセクションに向かって突き出す。
   絶対配置で下へはみ出させることで、白背景の上に濃紺の三角が見える。 */
.income__arrow{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translate(-50%,100%);   /* 下辺から下へ100%ぶん出す */
  width:0; height:0;
  border-left:44px solid transparent;
  border-right:44px solid transparent;
  border-top:26px solid #d9edff;
  z-index:2;
}
.income__source{
  width:86%;
  max-width:800px;
  margin:20px auto 0; 
  font-size: clamp(0.625rem, 0.59rem + 0.12vw, 0.75rem);
  line-height: 1.7;
  color: #667085;
}



/* =========================================================
   ビフォーアフターセクション ─ ベース（＝スマホ）
   ========================================================= */

.change {
  padding: 44px 0;
  background: #fff;
}

.change__inner {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto 24px;
}

.change__title {
  text-align: center;
  color: var(--body-text);
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem);
  font-weight: 800;
  line-height: 1.5;
  margin-bottom: 28px;
}
.change__title span {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
}
.change__title strong {
  color: var(--accent);
}


/* =========================
   viewport
========================= */

.change__viewport {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 4px 5% 12px;
}


/* =========================
   track
   最初だけ左余白をつくる
========================= */

.change__track {
  display: flex;
  gap: 14px;
  width: max-content;
}



/* =========================
   card
========================= */

.change-card {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: 76vw;
  max-width: 320px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);

  border-radius: 6px;
}


/* =========================
   title
========================= */

.change-card__title {
  margin: 0;
  padding: 20px 22px 18px;

  color: #24364d;
  background: #fff;

  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 700;
  line-height: 1.4;
}


/* =========================
   compare
========================= */

.change-card__compare {
  position: relative;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* =========================
   item
========================= */

.change-card__item {
  min-width: 0;
  background: #fff;
}

.change-card__item--before {
  border-right: 1px solid #edf2f7;
}


/* =========================
   label
========================= */
.change-card__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.change-card__label {
position: absolute;
  top: 0;
  left: 0;
  z-index: 2;

  margin: 0;
  padding: 8px 12px;

  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;

  /* 左上に密着させるなら丸みも基本なし */
  border-radius: 0 0 8px 0;
}

.change-card__item--before .change-card__label {
  background: rgba(111, 125, 143, 1);
}

.change-card__item--after .change-card__label {
  background: rgba(23, 119, 232, 1);
}

/* =========================
   visual
========================= */

.change-card__visual {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.change-card__item--before .change-card__visual {
  background: #d4d7dc;
}

.change-card__item--after .change-card__visual {
  background: #eef5fc;
}

.change-card__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =========================
   text
========================= */

.change-card__text {
  margin: 0;
  padding: 16px;

  color: #24364d;
  background: #fff;

  font-size: clamp(0.9375rem, 0.88rem + 0.18vw, 1rem);
  line-height: 1.7;
}


/* =========================
   arrow
========================= */

.change-card__arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;

  width: 46px;
  height: 46px;

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

  border: 1px solid #dce7f2;
  border-radius: 999px;
  background: #fff;

  box-shadow: 0 6px 16px rgba(20, 45, 78, 0.12);

  transform: translate(-50%, -50%);
}

.change-card__arrow svg {
  width: 22px;
  height: 22px;
  stroke: #1777e8;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}



/* =========================================================
   解決（活用事例）セクション ─ ベース（＝スマホ）
   ========================================================= */
.solution{
  background:#fff;
  padding:0 0 44px;
}
.solution__inner{
  width:90%;
  max-width:1200px;
  margin:0 auto 24px;
}
.solution__title{
  text-align:center;
  color:var(--body-text);
  font-size:clamp(1.25rem,4.8vw,1.875rem);
  font-weight:800;
  line-height:1.5;
}

.cases{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding:0 5% 12px;
}
.cases__track{
  display:flex;
  gap:14px;
  width:max-content;
}

.case-card{
  scroll-snap-align:center;
  flex:0 0 auto;
  width:76vw;
  max-width:320px;
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 3px 5px rgba(10,30,60,.1);
}
.case-card img{
  width:100%;
  height:auto;
  display:block;
}

/* =========================================================
   特長セクション ─ ベース（＝スマホ）
   ========================================================= */
.feature{
  position:relative;
  background:var(--white);
  padding:30px 0 44px;
  overflow:visible;              /* ▼がはみ出せるように */
}
.feature__inner{
  width:90%;
  max-width:1200px;
  margin:0 auto;
}
.feature__title{
  text-align:center;
  color:var(--body-text);
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem);
  font-weight:800;
  line-height:1.5;
  margin-bottom:28px;
}
.feature__title span{
font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
}
.feature__title strong{
color: var(--accent);
}
.feature__info h3{
line-height: 1.6;
margin-bottom: 3%;
color: var(--accent);
}
.feature__info{
background: var(--pale-blue);
border-radius: 8px;
padding: 4% 8% 4%;
font-size: clamp(0.875rem, 0.82rem + 0.2vw, 1rem);
line-height: 1.6;
border-top:solid 2px var(--accent) ;
margin:0 auto 5%;
max-width:800px;
}
.feature__info p{
margin-bottom: 3%;
}
.feature__info span{
font-size: clamp(0.6875rem, 0.66rem + 0.12vw, 0.8125rem);
display: inline-block;
background:var(--accent);
border-radius: 999px;
padding: 1% 4% 1.5%;
color: var(--white);
font-weight: 700;
}

.feature__latest{
width: 100%;
padding: 10% 8%;
background-color: var(--ink);
color: var(--white);
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)), url(../images/feature_01.jpg) ;
background-position:bottom;
background-size:100%;
background-repeat: no-repeat;
}
.feature__latest h3{
font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem);
margin-bottom: 5%;
}
.feature__latest p{
margin-bottom: 75%;
font-size: clamp(0.875rem, 0.82rem + 0.2vw, 1rem);
}
.feature__latest h3 span{
font-size: clamp(0.875rem, 0.82rem + 0.2vw, 1rem);
display: block;
color: var(--accent);
}


.feature__onsite{
width: 100%;
padding: 10% 8%;
background-color: var(--white);
color: var(--body-text);
background-image:url(../images/feature_02.jpg) ;
background-position:bottom;
background-size:100%;
background-repeat: no-repeat;
}
.feature__onsite h3{
font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem);
margin-bottom: 5%;
}
.feature__onsite p{
margin-bottom: 75%;
font-size: clamp(0.875rem, 0.82rem + 0.2vw, 1rem);
}
.feature__onsite h3 span{
font-size: clamp(0.875rem, 0.82rem + 0.2vw, 1rem);
display: block;
color: var(--accent);
}


/* =========================================================
   受講スタイルセクション ─ ベース（＝スマホ）
   ========================================================= */
.style{
  background:var(--pale-blue);
  padding:30px 0 44px;
}
.style__inner{
  width:90%;
  max-width:1080px;
  margin:0 auto;
}
.style__title{
  text-align:center;
  color:var(--body-text);
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem);
  font-weight:800;
  line-height:1.5;
  margin-bottom:28px;
}
.style__title span{
font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
}
.style__title strong{
color: var(--accent);
}
.style__info h3{
line-height: 1.6;
margin-bottom: 3%;
color: var(--accent);
}
.style__txt{
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  margin-bottom: 6%;
  text-align: center;
}
.style__txt{
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  margin-bottom: 6%;
  text-align: center;
}
.style__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.style__list__card {
  display: grid;
  grid-template-columns: 1fr 42%;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  background: var(--white);
  border-radius: 6px;
}
.style__list__card h3 {
padding: 4% 0 4% 10%;
font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);

  line-height: 1.6;
}
.style__list__card h3 span {
  display: inline-block;
  margin-bottom: 2%;
  padding: 0 4%;
  color:var(--accent);
font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  font-weight: 700;
  background: var(--white);
  border:solid var(--accent) 1px;
}
.style__list__card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 140px;
  object-fit: cover;
}




/* =========================================================
   カウンセリング ─ ベース（＝スマホ）
   ========================================================= */
.counseling {
  background-color: var(--accent); 
  color: #fff;
  padding: 40px 0;
}

.counseling__inner {
  width: 90%;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.counseling__label {
  display: inline-block;
  background-color: #b58900;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 6px;
  margin-bottom: 15px;
}

.counseling__title {
  font-size: clamp(1.25rem, 4.8vw, 1.875rem);
  font-weight: 800;
  line-height: 1.45;
  margin-bottom: 15px;
}

.counseling__text {
  font-size: 0.875rem;
  line-height: 1.85;
  margin-bottom: 30px;
  text-align: justify;
  font-feature-settings: "palt";
  text-spacing-trim: trim-start;
}
.counseling__image {
  max-width: 520px;
  margin: 0 auto 36px;
}
.counseling__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- CTAボタンの配色上書き --- */
.counseling__cta {
  margin-top: 30px;
}
.counseling__cta-badge {
  background-color: #3b5c7e; /* 紺色バッジ */
  color: #fff;
}
.counseling__cta-badge .num {
  color: #fff;
}
.counseling__cta-btn {
  background-color: #fff; /* 白ボタン */
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}
.counseling__cta-btn .em {
  color: var(--accent);
  font-weight: 800;
}
.counseling__cta-btn:hover {
  background-color: #f7fcff;
}


/* =========================================================
   コースセクション ─ ベース（＝スマホ）
   ========================================================= */

.courses {
  background:var(--white);
  padding:44px 0;
}
.courses__inner {
  width:90%;
  max-width:900px;
  margin:0 auto;
}

/* =========================
   Title
========================= */

.courses__title {
  margin: 0 0 36px;
  text-align: center;
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem);
  line-height: 1.4;
}

.courses__title .em {
  display: block;
  font-size: 0.65em;
}


/* =========================
   Tabs
========================= */

.courses__tabs {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.courses__tabs::-webkit-scrollbar {
  display: none;
}
.courses__tab {
  appearance: none;
  border: 0;
  border-top: solid 2px #eee;
  flex: 0 0 auto;
  min-width: 150px;
  padding: 16px 20px;
  color:var(--body-text);
  background: #eee;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease;

}

.courses__tab + .courses__tab {
  border-left: 4px solid #fff;
     box-shadow: none;
}


/* 選択中 */
.courses__tab.is-active {
  background: var(--pale-blue);
  color:var(--accent);
  border-top: solid 2px var(--accent) ;
}


/* =========================
   Panel
========================= */

.courses__panel {
  background: var(--pale-blue);
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  line-height: 1.4;
}

.courses__content {
  padding: 28px 5% 32px;
}


/* =========================
   Intro
========================= */

.courses__intro {
  display: grid;
  gap: 24px;
}

.courses__visual {
  width: 100%;
  aspect-ratio: 16 / 9;

  background: #fff;
}


/* =========================
   Blocks
========================= */

.courses__block + .courses__block {
  margin-top: 32px;
}

.courses__heading {
  position: relative;

  margin: 0 0 12px;
  padding-left: 1.1em;

  font-size: 1rem;
  line-height: 1.5;


}

.courses__heading::before {
  content: "✓";
  position: absolute;
  top: 0;
  left: 0;

  width: 0.65em;
  height: 0.65em;
  color: var(--accent);
}


/* =========================
   Recommend
========================= */

.courses__recommend {
  margin: 0;
  padding-left: 1.4em;
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  line-height: 1.4;
}
.courses__recommend li{
  padding-bottom: 0.6em;
}


/* =========================
   Description
========================= */

.courses__description {
  margin: 20px 0 30px;

  font-size: 0.9rem;
  line-height: 1.8;
}


/* =========================
   Tags
========================= */

.courses__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.courses__tags li {
  padding: 7px 10px;

  background: var(--white);

  font-size: clamp(0.875rem, 0.82rem + 0.2vw, 1rem);
  font-weight: 600;
  line-height: 1.4;

  border-radius: 999px;

  color: #7d8793;
}


/* =========================
   Summary
========================= */

.courses__summary {
  display: grid;
  gap: 24px;
  margin-top: 32px;
  padding: 24px 20px;
  background: #fff;
  border-radius: 6px;
}

.courses__summaryLabel {
  margin: 0 0 12px;
  font-weight: 700;
  display: inline;
    color: var(--accent);
}

.courses__price,
.courses__period {
  margin: 0;
  display: inline;

}

.courses__price small {
  margin-right: 8px;
  font-size: 0.9rem;

}

.courses__price strong,
.courses__period strong {
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
}

.courses__note {
  margin: 8px 0 0;

  color: #666;
  font-size: 0.7rem;
  line-height: 1.5;
}
.courses a {
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: var(--white);
  font-weight: 700;
  padding: 6% 6%;
  margin: 20px auto 0;
  display: block;
background: var(--accent);
border-radius: 999px;
}


/* =========================================================
   FAQセクション ─ ベース（＝スマホ）
   ========================================================= */
.faq{
  background:var(--white);
  padding:44px 0;
  border-bottom: 2px solid var(--accent);
}

.faq-title{
	margin-bottom: 20px;
  text-align: center;
}

.faq-item{
	background-color: var(--pale-blue);
  width: 90%;
  max-width: 900px;
  margin: auto;
	border-radius: 6px;
	padding: 40px 35px;
	margin-bottom: 15px;

}
.faq-item:last-child{
margin-bottom: 0;
}

.faq-row {
display: flex;
align-items: flex-start;
row-gap: 20px;
column-gap: 10px;
}
.faq-q {
margin-bottom: 10px;
}
.faq-icon {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 800;
flex-shrink: 0;
line-height: 1;
padding-bottom: 2px;
transform: translateY(-5px);
}
.faq-icon.q {
     background: #fff;
	padding-bottom: 4px;
  color: var(--accent);
       }
.faq-icon.a {
     background: var(--accent);
     color: #fff;
	       }
.faq-text {
    font-weight: 700;
    margin-top: 4px;
    line-height: 1.6;
    text-align: justify;
    font-variant-ligatures: no-common-ligatures; 
    font-feature-settings: "palt";
    text-spacing-trim: trim-start;
	margin: 0;
       }
.faq-a .faq-text {
font-weight: 300;
line-height: 1.5;
font-feature-settings: "palt";
}


/*----------↑ここまで----------*/


footer{
  font-size:0.7rem;
  padding: 20px 0 110px;
  text-align: center;
}
/* 下から出てくるPOPUPバナー */
.popup-bnr{
position: fixed;
z-index: 20;
bottom: 0;
left: 50%;
transform: translateY(100%) translateX(-50%);
width: 94%;
text-align: center;
font-weight: bold;
line-height: 120%;
visibility: hidden;
transition: opacity 0.4s, transform 0.4s;
}
	
.popup-bnr.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0%) translateX(-50%) ;
pointer-events: auto;
display: block; 
margin: 0 auto 15px;
}
.popup-bnr span{
position:relative;
display:block;
margin:auto;
width:75%;
z-index:1;
text-align:center;
color: var(--body-text);
font-size: 0.86rem;
background-color:#fff;
padding:8px 0;
border-radius: 100vmax;
line-height: 1;
border: solid 1px var(--accent-deep);
}
.popup-bnr span span{
	display: inline;
	color: var(--accent-deep);
	border: none;
	background-color:transparent;
}
	
.popup-bnr a{
display: block;
height: auto;
padding: 28px 0 24px 0;
text-decoration: none;
color:#fff;
filter: drop-shadow(0 0 6px rgba(0,67,118,0.2));
transition: all 0.3s ease;
border-radius: 100vmax;
background: #0b5f9d;
margin-top: -18px;
font-size: clamp(1.125rem,4vw,1.5625rem);
letter-spacing: 0.075rem;
line-height: 1;
width:100%;
border:solid 2px #fff;

	}

.shine {
  overflow: hidden;
}
.shine::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0.75) 32%, rgba(255, 255, 255, 0.75) 78%, rgba(255, 255, 255, 0) 82%);
  animation: shine-loop 2.2s linear infinite;
mix-blend-mode:screen;
	opacity: 0.5;
}
@keyframes shine-loop {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(200%);
  }
}




/* =========================================================
   600px〜：タブレット
   ========================================================= */
@media (min-width:600px){
  .hero__right{
    grid-template-columns:1fr 1fr;
    grid-template-rows:none;
    min-height:340px;
  }
  .cta-wrap{ display:inline-block; text-align:left; }
  .cta{ display:inline-block; padding:24px 56px; }


  .skills{ padding-top:56px; }
  .skills__grid{ gap:18px; }
  .skill-card{ padding:20px; }

	

	
/*------↑ここまで--------------------------------------	*/	
	
	
/*----------POPUPバナー　タブレット・PC用----------*/

.popup-bnr{
	width: 80%;
	max-width:800px;
}
.popup-bnr span{
	font-size: clamp(1rem,2vw,1.125rem);
	max-width: 320px;
}
.popup-bnr a{
	font-size: clamp(1.25rem,3.1vw,1.5625rem);
	padding:30px 0 25px 0; 
	}
footer{
  padding: 30px 0 130px;
}	
	
	
}


/* =========================================================
   861px〜：PC（旧デフォルトの見た目に復帰）
   ========================================================= */
@media (min-width:861px){

  .sp-only{ display:none; }
  
  .hero{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;   /* 画像を横長に、テキストも広く */
    height:520px;                        /* FVの高さを抑える */
  }
  .hero__left{
    padding:0 6% 0 18%;
  }
  .hero__right{
  height: 100%;
  overflow: hidden;             
  }
 .hero__right img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% top;
}

  .logo{ padding:18px 34px 20px; }
  .logo img{ height:34px; }
  .hero__inner{ margin-top:50px; }
  .headline{
    font-size:clamp(2.5rem,4.4vw,3.4rem);
    line-height:1.2;
    margin-bottom:15px;
  }
  .lead{
    font-size:clamp(1rem,1.15vw,1.125rem);
    line-height:1.7;
  }

  .cta-wrap{ margin-top:40px; }
  .cta{
    font-size:clamp(1.25rem,1.5vw,1.4375rem);
    padding:26px 64px 24px;
  }

.counseling{
	padding: 60px 0;
	}	
.counseling__cta-badge{
width: auto;
padding:5px 60px;
text-align: center;
}


.skills{ padding:64px 0; }
.skills__title{
font-size:clamp(1.5rem,2.4vw,2rem);
margin-bottom:40px;
}
.skills__grid{
grid-template-columns:repeat(4,1fr);
gap:24px;
}
.skill-card{ padding:24px; border-radius:10px; }
.skill-card__text{ font-size:1.0625rem; }
.skills__arrow{
border-left-width:54px;
border-right-width:54px;
border-top-width:30px;
}

.income__graph {
gap: 40px;
width: 90%;
max-width: 880px;
margin: 0 auto;
padding: 4% 4% 0;
}
.income__label {
font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
}

.change__viewport {
  max-width: 1200;
}
.change-card__title {
font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
}
.change-card__text {
font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 1rem);
 line-height: 1.4;
 }

.feature__info {
padding: 2% 3%;
}
.feature__info {
padding: 2% 3%;
}
.feature__info span {
  padding: 0.5% 2% 0.5%;
  margin-bottom: 8px;
}


.feature__latest,.feature__onsite {
  position: relative;
  display: grid;
  padding: 4% 8%;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
  overflow: hidden;
}
/* 左側：テキスト */
.feature__latest h3,
.feature__latest p,
.feature__onsite h3,
.feature__onsite p{
  position: relative;
  z-index: 2;
  grid-column: 1;
  width: min(100%, 560px);
  margin-left: auto;
  margin-right: 60px;
}

.feature__latest h3,.feature__onsite h3  {
  align-self: end;
  margin-top: 0;
  margin-bottom: 24px;
}

.feature__latest h3 span,.feature__onsite h3 span {
  display: block;
  margin-bottom: 16px;
}

.feature__latest p,.feature__onsite p {
  margin-bottom: 0;
}

.feature__latest,.feature__onsite{
background-image: none;
}
/* 右側：背景画像 */
.feature__latest::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background:
    linear-gradient(
      90deg,
      #1a2430 0%,
      rgba(7, 26, 51, 0.45) 18%,
      rgba(7, 26, 51, 0) 42%
    ),
    url("../images/feature_01.jpg") center center / cover no-repeat;
}
.feature__onsite::after {
  content: "";
  position: absolute;
  top: 5%;
  right: 0;
  width: 50%;
  height: 100%;
  background:
    url("../images/feature_02.jpg") center center /  86% no-repeat;
}


.courses a {
  padding: 3% 6%;
  margin: 20px auto 0;
  display: block;
  background: var(--accent);
  border-radius: 999px;
}




  .solution{ padding:20px 0 72px; }

  .solution__inner{ margin-bottom:36px; }
  .cases{
    overflow:visible;
    padding:0;
    width:90%;
    max-width:1200px;
    margin:0 auto;
  }
  .cases__track{
    width:auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
  }
  .case-card{ width:auto; max-width:none; }

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

  .style__list__card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .style__list__card img {
    order: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    min-height: 0;
    object-fit: cover;
  }

  .style__list__card h3 {
    order: 2;
    padding: 20px;
  }


/*----------↓カウンセリングのご案内の部分----------*/	
.counseling__inner {
    max-width: 1100px; 
    display: grid;
    grid-template-columns: 1.05fr 0.95fr; /* 左右の幅比率（左テキスト : 右画像） */
    column-gap: 40px;
    align-items: center;
    text-align: left;
  }

  /* --- 左側：テキストエリアの指定 --- */
  .counseling__label {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    margin-bottom: 16px;
  }

  .counseling__title {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
    margin-bottom: 16px;
  }

  .counseling__text {
    grid-column: 1;
    grid-row: 3;
    text-align: left;
    margin-bottom: 0;
	  font-size: 1rem;
  }

  /* --- 右側：画像エリアの指定 --- */
  .counseling__image {
    grid-column: 2;
    grid-row: 1 / span 3;
    max-width: 100%;
    margin: 0;
  }

  /* --- 下部：CTAボタンエリアの指定 --- */
  .counseling__cta {
    grid-column: 1 / -1; 
	width: 100%;
  	text-align: center;
    margin-top: 40px;
  }	
	
	
/*----------↑カウンセリングのご案内ここまで----------*/	


  .hero__inner {
    margin-top: 30px; /* 全体が上がりすぎないよう微調整 */
  }
/* ========== ヘッダーエリア（ロゴ＋ボタン） ========== */
.header-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}

/* ロゴ部分 */
.header-group .logo {
  position: static;
  background: #fff;
  padding: 10px 16px;
  border-bottom-right-radius: 12px;
}
.header-group .logo img {
  height: 22px;
  width: auto;
}

  .header-group .logo {
    padding: 14px 28px;
  }
  .header-group .logo img {
    height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .income__bar,
  .income__value {
    transition: none;
  }

  .income__bar {
    transform: scaleX(1);
  }

  .income__value {
    opacity: 1;
  }
}