@charset "UTF-8";

/* ==========================================================================
   Variables
   ========================================================================== */
:root {
    --color-main: #224EB1;
    --color-sub-blue: #3fb2ca;
    --color-sub-purple: #5c6bc0;
    --color-accent-y: #ffeb3b;
    --color-accent-o: #ff9800;
    --color-red: #d32f2f;
    --color-white: #ffffff;
    --font-base: "Yu Gothic Medium", "游ゴシック体", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    /* 注意: 既存のRoboto指定。Bebasを使いたい箇所はクラス .u-font-accent を付与してください */
    --font-accent: "Roboto", sans-serif; 
    --inner-width: 1000px;
}

/* ==========================================================================
   Font Definitions
   ========================================================================== */
/* 数字(0-9) と 大文字Q のみ Bebas Neue を適用 */
@font-face {
    font-family: 'BebasSubset';
    src: url('https://fonts.gstatic.com/s/bebasneue/v14/JTUSjIg69CK48gW7PXoo9WlhyyTh89Y.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0030-0039, U+0051;
}

/* ==========================================================================
   Base & Layout (Desktop Default)
   ========================================================================== */
body {
    font-family: var(--font-base);
    color: #333;
    line-height: 2;
    background-color: #fff;
    overflow-x: hidden;
    font-size:18px;

}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

br.sp{display:none;}

.l-container {
    max-width: var(--inner-width);
    margin-left: auto;
    margin-right: auto;
}

h2.dfo {
    padding: 50px 0 30px;
    margin-bottom: 45px;
    font-weight: 900;
    font-size: 32px;
    color: #224eb1;
    width: 100%;
    text-align: center;
    letter-spacing: .1em;
    position: relative;
}

h2.dfo:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 5px;
    display: inline-block;
    width: 100px;
    height: 4px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #224eb1;
}

h2.dfo span {
    font-size: 18px;
    display: inline-block;
}

.check-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background-color: #2557a7;
    border-radius: 50%;
    box-sizing: border-box;
    margin-right:5px;
}

/* チェックマークを擬似要素で作成 */
.check-icon::after {    
    content: "";
    display: block;
    box-sizing: border-box;
    width: 6px;
    height: 11px;
    border-bottom: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

/* -------------------------------------------
   2. 三角形のみのアイコン
   ------------------------------------------- */
.triangle-icon {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #249099;
    flex-shrink: 0;
}

/* -------------------------------------------
   3. リボン設定
   ------------------------------------------- */

:root {
/* --- 色の設定（グラデーション用に更新） --- */
  --ribbon-blue: #224EB1;
  
  /* グラデーションの開始色（左上・明るい） */
  --ribbon-grad-start: #ecda4c;
  /* グラデーションの終了色（右下・暗い） */
  --ribbon-grad-end: #ddca1b;
  
  /* 影の色：グラデーションの暗い色(#9a8e24)よりさらに少し暗くして自然な影にする */
  --ribbon-shadow: #bdac12; 
  
  --ribbon-text-brown: #5A4A00;
  
  /* サイズの設定 */
  --ribbon-height: 15px; /* 帯の高さ */
  --ribbon-width: 40px;  /* リボンの幅 */
  --ribbon-pop-up: 12px; /* 上への飛び出し量（少し増やして強調） */
}

/* 1. 親要素 dt（水色の帯） */
.c-ribbon-dt {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--ribbon-height);
  background-color: var(--ribbon-blue);
  color: #fff;
  font-weight: bold;
  font-size: 1.5rem;
  /* 影が隠れないように overflow は visible のままにする */
  overflow: visible;
  
  /* リボンの幅 + 余白分 */
  padding-left: calc(var(--ribbon-width) + 25px);
  padding-right: 20px;
  
  /* 上のマージン */
  margin-top: var(--ribbon-pop-up);
  margin-bottom: 0;
}

/* 2. 子要素 div（黄色のリボン数字） */
.c-ribbon-dt__num {
  position: absolute;
  top: calc(var(--ribbon-pop-up) * -1);
  left: 20px;
  z-index: 2;
  
  width: var(--ribbon-width);
  height: calc(var(--ribbon-height) + var(--ribbon-pop-up) + 15px);
  
  /* ★変更点：背景を単色からグラデーションに変更 */
  /* 135deg にすることで「左上が始点(明るい)」「右下が終点(暗い)」になります */
  background: linear-gradient(135deg, var(--ribbon-grad-start) 0%, var(--ribbon-grad-end) 100%);
  
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
  
  display: flex;
  justify-content: center;
  padding-top: 5px;
  color: var(--ribbon-text-brown);
  font-size: 3rem;
  font-weight: bold;
  font-style: italic;
  line-height: 1;
  filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.1));
}

/* 3. 【重要】リボンの折り目（裏から折れた三角形） */
.c-ribbon-dt__num::after {
  content: "";
  position: absolute;
  
  /* ★ポイント1：高さを「青い帯の上端」に合わせる */
  /* リボン本体の top がマイナスなので、その分だけ下げる */
  top: var(--ribbon-pop-up); 
  right: 0;
  z-index: -1; /* リボン本体より後ろへ */
  
  /* ★ポイント2：左下が直角の三角形を作る */
  width: 0;
  height: 0;
  border-style: solid;
  /* 上0、右[飛び出し量]、下[飛び出し量]、左0 の太さ */
  border-width: 0 var(--ribbon-pop-up) var(--ribbon-pop-up) 0;
  /* 右の辺だけ色をつけることで、左下が直角の三角になる */
  border-color: transparent var(--ribbon-shadow) transparent transparent;
  
  /* 自身の幅分だけ右にずらして配置 */
  transform: translateX(100%);
}

/* ====================================
   FAQリスト用の設定
   ==================================== */
:root {
  /* リスト用に少しサイズを調整（前の100pxだと大きすぎるため60pxに設定） */
  --faq-bubble-size: 40px;
  --faq-bg-color: #224EB1;
  --faq-tail-size: 12px; /* しっぽのサイズ */
}

/* リスト全体の余白など */
.c-faq-list {
  margin: 0;
  padding: 0;
}

/* --- 質問エリア（dt）のレイアウト --- */
.c-faq-q {
  display: flex;       /* アイコンとテキストを横並びにする */
  align-items: center; /* 上下中央揃え */
  gap: 10px;           /* アイコンと質問文の間の余白 */
  font-weight: bold;
  font-size: 1.1rem;
  margin-top: 30px;    /* 質問同士の間隔 */
  margin-bottom: 15px;
  line-height: 1.5;
}

/* 最初の要素だけ上のマージンを消す */
.c-faq-q:first-of-type {
  margin-top: 0;
}

/* --- 丸い吹き出し部分（span） --- */
.c-faq-q span {
  /* --- 円の本体 --- */
  position: relative; /* しっぽの基準点 */
  display: flex;      /* 文字をど真ん中にする */
  justify-content: center;
  align-items: center;
  
  /* 形が崩れないように固定 */
  flex-shrink: 0;     
  
  width: var(--faq-bubble-size);
  height: var(--faq-bubble-size);
  border-radius: 50%;
  background-color: var(--faq-bg-color);
  
  /* 文字スタイル */
  color: #fff;
  font-size: 23px;  /* Q1の文字サイズ */
  font-weight: normal;
  /* font-family: 'Oswald', sans-serif; */ /* 英数字用フォントがあれば */
}

/* --- 右下の三角形（しっぽ） --- */
.c-faq-q span::after {
  content: "";
  position: absolute;
  
  /* 配置：右斜め下 */
  bottom: 2px; 
  right: 0px; 
  
  /* 三角形作成（Border Hack） */
  width: 0;
  height: 0;
  border-top: var(--faq-tail-size) solid var(--faq-bg-color);
  border-left: calc(var(--faq-tail-size) / 2) solid transparent;
  border-right: calc(var(--faq-tail-size) / 2) solid transparent;
  
  /* 角度調整 (-45degで右下向き) */
  transform: rotate(-45deg);
}

.arrow_c {
  /* 設定 */
  --icon-size: 17px;
  --icon-margin-right: 5%;

  /* 絶対配置 */
  position: absolute;
  
  /* 数学的に常にど真ん中をキープする魔法の2行 */
  top: 50%;                 /* 親がどんな高さになっても、その50%の位置へ */
  transform: translateY(-50%); /* 自身の大きさの半分だけ戻す */
  
  /* 右位置固定 */
  right: var(--icon-margin-right);

  /* 形と色（変更なし） */
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
  background-color: #fff;
  pointer-events: none; /* クリックなどは親に任せる */

  /* マスク画像 */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Ccircle cx='50' cy='50' r='50' fill='white'/%3E%3Cpolygon points='40,25 75,50 40,75' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='100%25' height='100%25' mask='url(%23m)' fill='black'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Ccircle cx='50' cy='50' r='50' fill='white'/%3E%3Cpolygon points='40,25 75,50 40,75' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='100%25' height='100%25' mask='url(%23m)' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}


a:hover{
	opacity:0.8;}

/* ==========================================================================
   Header (Desktop Default)
   ========================================================================== */
.l-header {
    background-color: var(--color-main);
    color: var(--color-white);
    padding-top: 10px;
    padding-bottom: 10px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.l-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.l-header__logo img {
    height: 40px;
}

.l-header__nav {
    display: flex;
    gap: 25px;
}

.l-header__nav-pc a {
    color: var(--color-white);
    font-weight: bold;
    margin:0 5px 0 0;
}

.l-header__hamburger {
    display: none; /* PCは隠す */
}

  /* チェックボックスは常に隠す */
.l-header__nav-sp {
    display: none;
}
   

/* ==========================================================================
   CTA Area (Desktop Default)
   ========================================================================== */
section.c-cta-area {
    margin: 50px 0 0;
}

section.c-cta-area

.c-cta-banner {
    background: linear-gradient(275deg, #a8b5d5 0%, #dbe3f8 100%);
    padding-top: 0;
    text-align: center;
    margin: 0 auto 0;
    position: relative;
}

.c-cta-banner::after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-30%);
    border-top: 30px solid #C1CBE6;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
}

.c-cta-banner__note {
    background-color: #304ba4;
    color: var(--color-white);
    padding: 7px 15px;
    border-radius: 20px;
    display: inline-block;
    margin: -50px auto 15px;
    font-weight: bold;
}

.c-cta-banner__main {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.c-cta-banner__discount {
    max-width:600px;
    font-size: 62px;
    margin: -20px 30px 0 0;
    letter-spacing: 0em;
    font-weight: bold;
    font-style: italic;
    color: #304ba4;
}

.c-cta-banner__discount span.small {
    display: inline-block;
    font-size: 22px;
    line-height: 30px;
}

.c-cta-banner__discount b.big {
    font-size: 100px;
    /* .u-font-accent クラスを付与するか、以下の記述で対応 */
    font-family: 'BebasSubset', var(--font-accent);
    font-weight: 400; /* Bebas用 */
    margin-left: 2px;
    margin-right: -5px;
}

.c-cta-banner__limit {
    background-color: var(--color-white);
    width: 120px;
    height: 120px;
    margin: -25px 0 0;
    font-size:22px;
    border-radius: 50%;
    border: 2px solid #cbd9eb;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color:#556598;
    line-height: 28px;
}

.c-cta-banner__limit b{
    font-size:32px;
}
.c-cta-area .bottom {
    padding: 0px 0 30px;
    background-image: url(../images/common/cta-w.jpg);
    background-repeat: no-repeat;
    background-position: 25% bottom;
    background-size: 80px;
}
.c-cta-area .l-container .c-cta-lead {
    width: 100%;
    text-align: center;
    font-weight: bold;
    padding: 50px 0 0;
}

.c-cta-area .l-container .c-cta-lead span {
    color: #ff5e5e;
}

.c-btn-main {
    background: linear-gradient(to bottom, #ffb300, #ff8f00);
    position: relative;
    color: var(--color-white);
    font-size: 1.4rem;
    font-weight: bold;
    padding-top: 18px;
    padding-bottom: 18px;
    border-radius: 50px;
    box-shadow: 0 6px 0 #e67e00;
    display: block;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    margin-bottom: 25px;
    text-align: center;
}

.c-btn-main img{
	width:10%;
	max-width:30px;
	margin:0 20px 0 0;
	height: auto;
    vertical-align: middle;
	}

.c-cta-btns__sub {
    position: relative;
    display: flex;
    gap: 10px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.c-btn-sub {
    position: relative;
    flex: 1;
    color: var(--color-white);
    font-weight: bold;
    padding-top: 14px;
    padding-bottom: 14px;
    border-radius: 50px;
    text-align: center;
}

.c-btn-sub--blue {
    background-color: var(--color-sub-blue);
    border-bottom: 4px solid #3398ad;
}

.c-btn-sub--purple {
    background-color: var(--color-sub-purple);
    border-bottom: 4px solid #4a57a8;
}

.c-cta-info__text {
    font-size: 20px;
    text-align: center;
    width: 100%;
    margin:35px 0 0;
    font-weight: bold;
    color: #304ba4;
}

.c-cta-info__text b {
    font-size: 120%;
}

/* ==========================================================================
   Footer (Desktop Default)
   ========================================================================== */
.l-footer {
    font-size:15px;
    background-color: var(--color-main);
    color: var(--color-white);
    padding-top: 80px;
    padding-bottom: 60px;
}

.l-footer a {
    color: var(--color-white) !important;
}

.l-footer__contact {
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}

.l-footer__contact dl  {
    width:45%;
}

.l-footer__contact img  {
    width:80%;
}

.l-footer__contact dl dd{
line-height: 22px;
margin:15px 0 0;
}



div.l-footer__nav-group dl.courseWrap ul
{
    margin:0 0 0 30px;
}

div.l-footer__nav-group dl dt.midashi{
    font-size:18px;
    font-weight:bold;
    margin:15px 0 0;
}

div.l-footer__nav-group dl dt{
    font-weight:bold;
    margin:5px 0 0 10px;
}

div.l-footer__nav-group dl ul.area{
    width:500px;
    margin:10px 0  20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.l-footer__contact .c-btn-tel {
    width:40%;
    max-width:250px;
    text-align:center;
    font-size:34px;
    display: inline-flex;
    align-items: center;
    background-color: #4b86cf;
    color: var(--color-white);
    font-weight: bold;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 50px;
}
.l-footer__contact .c-btn-tel img{
	width:15%;
	margin:0 20px 0 0;
	vertical-align:middle;
	}

.icon-link::before {
  content: ""; /* 文字は空にする */
  display: inline-block; /* 回転させるために必要 */
  width: 6px;  /* アイコンのサイズ */
  height: 6px; /* アイコンのサイズ */
  
  /* 線を作る */
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  
  /* 45度回転させて「＞」の形にする */
  transform: rotate(45deg);
  
  /* 位置調整 */
  margin-right: 5px; /* テキストとの余白 */
  vertical-align: 2px; /* 上下の微調整 */
}



.l-footer__copyright {
    text-align: center;
    margin-top: 40px;
    font-size: 0.8rem;
    opacity: 0.7;
}

.c-floating-cta {
    display: none; /* PCは隠す */
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.u-marker-yellow {
    background: linear-gradient(
    transparent 60%,           /* ①書き始め：70%→60%に上げて、開始位置を高く */
    var(--color-accent-y) 60%, 
    var(--color-accent-y) 90%, /* ②書き終わり：100%→90%にして、下に隙間を作る */
    transparent 90%            /* 下の残り10%は透明（＝浮いて見える） */
    );
    font-weight: bold;
}

/* ★修正箇所: Bebas用クラス */
.u-font-accent {
    /* BebasSubsetを強制適用。数字とQ以外はsans-serifへ */
    font-family: 'BebasSubset', sans-serif !important;
    font-weight: 400 !important;
    /* font-style: normal !important; ← これを削除しました（斜体の邪魔になるため） */
    line-height: 1.4; /* 高さ調整 */
}

/* ★追加箇所: 斜体用ユーティリティ */
.italic {
    display: inline-block; 
    transform: skewX(-10deg); /* 幾何学的に斜めにする */
    font-style: normal; /* 念のためブラウザの自動斜体はOFF */
}

.u-color-blue { color: var(--color-main); }
.u-color-orange { color: var(--color-accent-o); }
.u-color-red { color: var(--color-red); }
.u-text-center { text-align: center; }
.u-font-bold { font-weight: bold; }


/* Grids */
.p-top-method__cards,
.p-top-voice__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.p-top-why__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.p-top-region__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* ==========================================================================
   MOBILE LAYOUT (max-width: 599px)
   ========================================================================= */
@media screen and (max-width: 599px) {

body{
    font-size:16px;
}

br.sp{display:block;}


h2.dfo {
    padding: 35px 0 10px;
    margin-bottom: 25px;
    font-weight: bold;
    font-size: 24px;
}

h2.dfo:before {
    width: 50px;
    height: 3px;
}

h2.dfo span {
    font-size: 18px;
    display: inline-block;
}

  /* チェックボックスは常に隠す */
.l-header__nav-sp {
    display: block;
}


.l-footer {
    font-size:15px;
    background-color: var(--color-main);
    color: var(--color-white);
    padding-top: 80px;
    padding-bottom: 60px;
}


/* ==========================================================================
   Utilities
   ========================================================================== */
.u-marker-yellow {
    background: linear-gradient(
    transparent 60%,           /* ①書き始め：70%→60%に上げて、開始位置を高く */
    var(--color-accent-y) 60%, 
    var(--color-accent-y) 90%, /* ②書き終わり：100%→90%にして、下に隙間を作る */
    transparent 90%            /* 下の残り10%は透明（＝浮いて見える） */
    );
    font-weight: bold;
}

/* ★修正箇所: Bebas用クラス */
.u-font-accent {
    /* BebasSubsetを強制適用。数字とQ以外はsans-serifへ */
    font-family: 'BebasSubset', sans-serif !important;
    font-weight: 400 !important;
    /* font-style: normal !important; ← これを削除しました（斜体の邪魔になるため） */
    line-height: 1.4; /* 高さ調整 */
}

/* ★追加箇所: 斜体用ユーティリティ */
.italic {
    display: inline-block; 
    transform: skewX(-10deg); /* 幾何学的に斜めにする */
    font-style: normal; /* 念のためブラウザの自動斜体はOFF */
}

.u-color-blue { color: var(--color-main); }
.u-color-orange { color: var(--color-accent-o); }
.u-color-red { color: var(--color-red); }
.u-text-center { text-align: center; }
.u-font-bold { font-weight: bold; }


/* Grids */
.p-top-method__cards,
.p-top-voice__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.p-top-why__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.p-top-region__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}



    .l-container {
        width: 100%;
        padding-left: 3%;
        padding-right: 3%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

  /* モバイル時のPCナビ非表示 */
.l-header__nav-pc {
    display: none;
}

/* ロゴのサイズ調整 */
.l-header__logo img {
    height: 35px;
}

/* --- ハンバーガーボタンのデザイン --- */
.l-header__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px; /* 少し調整 */
    position: relative;
    z-index: 1000; /* メニューより上に配置 */
    cursor: pointer;
}

.l-header__hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: transform 0.4s, opacity 0.4s;
}

/* --- スマホ用メニュー（ドロワー） --- */
.l-header__nav-sp {
    position: fixed;
    top: 0;
    right: -100%; /* 初期状態は画面外 */
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    transition: right 0.4s ease-in-out;
    z-index: 999;
    padding-top: 80px;
    overflow-y: auto; /* コンテンツが多い場合のスクロール */
}

/* --- ギミック：チェック時の挙動 --- */

/* メニューの表示 */
.l-header__checkbox:checked ~ .l-header__nav-sp {
    right: 0;
}

/* 1本目：斜め（translateの値はサイズに合わせて微調整） */
.l-header__checkbox:checked ~ .l-header__hamburger span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
    background:#224eb1;
}
/* 2本目：透過 */
.l-header__checkbox:checked ~ .l-header__hamburger span:nth-child(2) {
    opacity: 0;
}
/* 3本目：逆斜め */
.l-header__checkbox:checked ~ .l-header__hamburger span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
    background:#224eb1;
}

/* メニューリストの装飾 */
.l-header__menu {
    list-style: none;
    padding: 0 20px;
}
.l-header__menu li {
    border-bottom: 1px solid #eee;
}
.l-header__menu li a {
    display: flex;
    align-items: center;
    padding: 18px 0;
    text-decoration: none;
    color: #333;
    font-weight: bold;
}
.l-header__menu li a span {
    margin-left: 8px;
}


/* ==========================================================================
   CTA Area 
   ========================================================================== */
section.c-cta-area {
    margin: 50px 0 0;
}

section.c-cta-area .c-cta-banner .l-container{
    position:relative;}

.c-cta-banner__note {
    position:absolute;
    padding: 5px 10px;
    display:block;
    margin:auto;
    width:fit-content;;
    top:-20px;
    left: 0;
    right: 0;
    font-size:14px;
    border-radius: 50px;
}

.c-cta-banner__main {
    gap: 15px;
}

.c-cta-banner__discount {
    max-width:100%;
    font-size: 40px;
    margin: 0px 20px 0 0;
    letter-spacing: 0em;
}

.c-cta-banner__discount span.small {
    font-size: 16px;
    line-height: 23px;
}

.c-cta-banner__discount b.big {
    font-size: 70px;
    margin-left: 5px;
}

.c-cta-banner__limit {
    background-color: var(--color-white);
    width: 16%;
    margin: 3% 0 0;
    font-size: 15px;
    height: auto;
    aspect-ratio: 1 / 1; /* 幅と高さの比率を1:1に固定 */
    line-height: 18px;
}

.c-cta-banner__limit b{
    font-size:160%;
}
.c-cta-area .bottom {
    background-position: 3% bottom;
    background-size: 70px;
}
.c-cta-area .l-container .c-cta-lead {
    width: 100%;
    text-align: center;
    font-weight: bold;
    padding: 50px 0 0;
}

.c-cta-area .l-container .c-cta-lead span {
    color: #ff5e5e;
}

.c-btn-main {
        font-size: 1.3rem;
        padding-top: 10px;
        padding-bottom: 8px;
        border-radius: 50px;
        max-width: 90%;
        margin-top: 15px;
        margin-bottom: 25px;
}

.c-cta-btns__sub {
    max-width:90%;
    font-size: 0.9rem;
}

.c-btn-sub {
    padding-top: 8px;
    padding-bottom: 8px;
    text-indent: -1em;
}

.c-btn-sub--blue {
    background-color: var(--color-sub-blue);
    border-bottom: 4px solid #3398ad;
}

.c-btn-sub--purple {
    background-color: var(--color-sub-purple);
    border-bottom: 4px solid #4a57a8;
}

.c-cta-info__text {
    font-size: 16px;
    padding: 15px 0 0 65px;
}

.c-cta-info__text b {
    font-size: 150%;
}
/* ==========================================================================
   Footer 
   ========================================================================== */
   
   .l-footer a {
    color: var(--color-white) !important;
}

.l-footer__contact {
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}

.l-footer__contact dl  {
    width:45%;
}

.l-footer__contact img  {
    width:80%;
}

.l-footer__contact dl dd{
line-height: 22px;
margin:15px 0 0;
}



div.l-footer__nav-group dl.courseWrap ul{
    margin:0 0 0 20px;
}

div.l-footer__nav-group dl dt.midashi{
    font-size:18px;
    font-weight:bold;
    margin:15px 0 0;
}

div.l-footer__nav-group dl dt{
    font-weight:bold;
    margin:5px 0 0 10px;
}

div.l-footer__nav-group dl ul.area{
    width:500px;
    margin:10px 0  20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.l-footer__contact .c-btn-tel {
    width:40%;
    max-width:250px;
    text-align:center;
    font-size:34px;
    display: inline-flex;
    align-items: center;
    background-color: #4b86cf;
    color: var(--color-white);
    font-weight: bold;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 50px;
}

.c-btn-tel img{
	vertical-align:middle;
	width:15%;
	margin:0 10px 0 0;
	}
.icon-link::before {
  content: ""; /* 文字は空にする */
  display: inline-block; /* 回転させるために必要 */
  width: 6px;  /* アイコンのサイズ */
  height: 6px; /* アイコンのサイズ */
  
  /* 線を作る */
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  
  /* 45度回転させて「＞」の形にする */
  transform: rotate(45deg);
  
  /* 位置調整 */
  margin-right: 2px; /* テキストとの余白 */
  vertical-align: 2px; /* 上下の微調整 */
}



.l-footer__copyright {
    text-align: center;
    margin-top: 40px;
    font-size: 0.8rem;
    opacity: 0.7;
}

.c-floating-cta {
    display: none; /* PCは隠す */
}

   
.l-footer {
    font-size:14px;
    padding-top: 25px;
    padding-bottom: 60px;
}



.l-footer__contact {
    width:100%;
    margin-bottom: 50px;
}

.l-footer__contact dl  {
    width:45%;
}

.l-footer__contact img  {
    width:100%;
}

.l-footer__contact dl dd{
line-height: 22px;
text-align:left;
font-size: 12px;
margin:15px 0 0;
}

.l-footer__contact .c-btn-tel {
        width: 48%;
        box-sizing: border-box;
        font-size: 22px;
        padding-top: 7px;
        padding-bottom: 7px;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 50px;
}

.c-btn-tel img{
	vertical-align:middle;
	width:10%;
	margin:0 5px 0 0;
	}


div.l-footer__nav-group dl.courseWrap ul{
	width:100%;
    display: flex;
  	justify-content: flex-start;
    /* 要素が入り切らない場合に折り返す設定を追加 */
    flex-wrap: wrap; 
    align-items: center;
}
div.l-footer__nav-group dl.courseWrap ul li{
    width:50%;
}

div.l-footer__nav-group dl dt.midashi{
    font-size:18px;
    font-weight:bold;
    margin:15px 0 0;
}

div.l-footer__nav-group dl dt{
    font-weight:bold;
    margin:5px 0 0 10px;
}

div.l-footer__nav-group dl ul.area{
    width: 100%;
    margin: 8px 0 10px 20px;
    display: flex;
    /* justify-content を flex-start（左揃え）に変更 */
    justify-content: flex-start; 
    /* 要素が入り切らない場合に折り返す設定を追加 */
    flex-wrap: wrap; 
    align-items: center;
    /* 左揃えの際に子要素の間隔を開けたい場合は gap を使うのが便利です */
    gap: 10px;
}

div.l-footer__nav-group dl ul.area li{
    width: 20%;
    font-size: 14px;
    margin:-10px 0 0 ;
}

.l-footer__nav {
    display: block;
}

.l-footer__nav-group {
    margin-bottom: 50px;
}

.c-floating-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

.c-floating-cta__item {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 8px;
    color: var(--color-white);
    font-weight: bold;
    font-size: 0.85rem;
}



.c-floating-cta__item img{
	width:20%;
	vertical-align:middle;
	margin:0 10px 0 0;
	}

.c-floating-cta__item--tel { 
	background-color:#cfeaff;
	width:20%;
	text-align:center;
 }
 
 .c-floating-cta__item--tel img{
 	width:45%;
 	margin:auto;
}

.c-floating-cta__item--calc img{
	width:12%;
	}

 	 
.c-floating-cta__item--doc { background-color:#ffb000 ;
	width:40%;
	}
.c-floating-cta__item--calc { background-color:#2884af;
	width:40%;
	}

/* Grid elements stack on mobile */
.p-top-method__cards,
.p-top-voice__grid,
.sec3 .p-top-voice__cards, /* ★ここを追加（クラス名不一致対策） */
.p-top-why__list,
.p-top-region__grid {
    display: block;
}

/* スマホでカードが縦積みになった時の中央寄せ・余白調整 */
.sec3 .p-top-voice__cards .c-voice-card {
    width: 100%; /* または80%など任意の幅 */
    margin: 0 auto 20px;
}
}


/* 1. ページ全体の横揺れを根本から封じ込める */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* 2. はみ出しの犯人たちを個別にガードする */
.sec8, .sec9, .l-header, .l-footer {
    overflow: hidden; /* セクション外に出た要素を切り捨てる */
}

/* 3. スマホで固定幅が残っている箇所を柔軟にする */
@media screen and (max-width: 599px) {
    div.l-footer__nav-group dl ul.area {
        width: 100% !important; /* 500px固定を解除 */
    }
    
    /* 念のためコンテナの計算を狂わせない設定 */
    .l-container {
        box-sizing: border-box;
    }
}