.grad-wrap {
  position: relative;
}
.grad-wrap + .grad-wrap {
  margin-top: 40px;
}
.grad-btn {
  z-index: 2;
  position: absolute;
  right: 0;
  bottom: -1rem;
  left: 0rem;
  width: 150px;
  margin: auto;
  padding: .5em 0;
  border-radius: 2px;
  background: #004384;
  color: #fff;
  /* font-size: 1.3rem; */
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
  box-shadow: 0 0 3px rgba(0,0,0,.3);
  border-radius: 4rem;
}
.grad-btn::after {
  content: "もっと見る"
}
.grad-btn:hover {
  background: #fff;
  color: #41413f;
}
.grad-btn .fa {
  /* margin-right: .5em; */
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 23rem;
}
.grad-item p + p {
  margin-top: 1em;
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 40px; /*グラデーションで隠す範囲*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  z-index: 1;
}
.grad-trigger {
  display: none;
}
.grad-trigger:checked ~ .grad-btn {
  bottom: -1em;
}
.grad-trigger:checked ~ .grad-btn::after {
  content: "閉じる"
}
.grad-trigger:checked ~ .grad-btn .fa {
  transform: rotate(180deg);
}
.grad-trigger:checked ~ .grad-item {
  height: auto;
}
.grad-trigger:checked ~ .grad-item::before {
  display: none;
}



.knrn {
    margin: 5rem auto;
    border: solid 2px #81bde0;
    padding: 2rem 2rem 3rem;
    width: 95%;
    max-width: 1000px;
}
.knrn p, #contents .knrn p {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 1rem;
    text-align: center;
    padding: 0;
}
.knrn p a {
    font-size: 14px;
    text-align: left;
}
.knrn a {
    line-height: 1.5;
    display: block;
    margin: 0 0 5px;
    padding: 0;
    text-decoration: underline;
}
.knrn br {
    display: none;
}


@media screen and (max-width: 767px) {

  /* ボタン全体のラッパー */
  .sp-float-btns {
    position: fixed;
    bottom: 0;           /* 画面最下部に固定 */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 0.5rem 0;
    background: #fff;    /* 半透明にしたい場合は rgba(255,255,255,.9) など */
    z-index: 999;        /* 既存要素より前面へ */
    box-shadow: 0 -2px 8px rgba(0,0,0,.15);
  }

  /* 個々のボタン */
  .sp-float-btns .sp-float-btn {
    flex: 1 1 48%;       /* 2 つを 50% 幅で並べ、間は 4%（= 2 × 2%） */
    margin: 0 2%;        /* 左右に少し余白 */
    padding: 1rem 0.5rem;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 6px 6px 0 0;
    background: #005bac; /* デフォルト色 */
  }

  /* ボタンごとに色を変えたい場合 */
  .sp-float-btns .btn-entry { background: #0066be; } 
  .sp-float-btns .btn-line  { background: #d60000; } 
}

/* PC では表示しない */
@media screen and (min-width: 768px) {
  .sp-float-btns { display: none; }
}

@media screen and (max-width: 767px) {
  .fixBan { display: none !important; }
}


/* ===== 2択 CTA “cta-chooser” ===== */
.cta-chooser{
  margin: 4rem auto;
  text-align:center;
  max-width: 1000px;
  padding: 0 1rem;
}
.cta-chooser .cta-ttl{
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 2rem;
  line-height: 1.3;
	color:white
}

/* --- ラップ＆カード --- */
.cta-chooser .cta-cards{
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;          /* PC でも 3 列化など崩れ防止 */
}
.cta-chooser .cta-card{
  flex: 1 1 280px;          /* 280px 以上で均等伸縮 */
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  border-radius: 16px;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.cta-chooser .cta-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,.15);
}

/* --- バリエーション（面談＝talk / 応募＝recruit）--- */
.cta-chooser .cta-card.talk{
  background: #e9f6ff;         /* ライトブルー */
  border: 2px solid #60b9ff;
}
.cta-chooser .cta-card.recruit{
  background: #fff5f5;         /* ライトレッド */
  border: 2px solid #ff7d7d;
}

/* --- 見出しテキスト --- */
.cta-chooser .cta-lead{
  flex-grow: 1;
  font-size: 1.4rem;
  line-height: 1.6;
  font-weight: 500;
  color: #333;
  margin-bottom: 0px;
}

/* --- ボタン --- */
.cta-chooser .cta-btn{
  display: inline-block;
  padding: 12px 24px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  border-radius: 9999px;
  transition: filter .2s;
  margin-top:3rem;
}
.cta-chooser .cta-card.talk  .cta-btn{ background:#0090ff; }   /* グッドスピード系ライトブルー */
.cta-chooser .cta-card.recruit .cta-btn{ background:#d60000; } /* コーポレートレッド */

@media (hover:hover){
  .cta-chooser .cta-card:hover .cta-btn{ filter: brightness(1.1); }
}

/* =====================================
   ◇ CTA 全体を囲うフレーム
===================================== */
.cta-chooser{
  background:#31618e;          /* 外枠の紺色 */
  border-radius:20px;
  padding:3rem 2rem;           /* 内側余白を広めに */
  color:#fff;
  max-width:1000px;
  margin:4rem auto;
  position:relative;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
}

/* ── 下側に吹き出し“しっぽ” ───────── */
.cta-chooser::after{
  content:'';
  position:absolute;
  left:32px;                  /* お好みで調整 */
  bottom:-24px;               /* 外に突き出す */
  width:0;
  height:0;
  border:24px solid transparent;

}

/* =====================================
   ◇ 見出し & テキスト色を調整
===================================== */
.cta-chooser .cta-ttl{
  color:#fff;                 /* 白字固定 */
}

.cta-chooser .cta-head,
.cta-chooser .cta-lead{
  color:#111;                 /* カード内テキストは読みやすい濃グレー */
}

/* =====================================
   ◇ スマホ表示最適化
===================================== */
@media screen and (max-width: 767px){
  /* 吹き出しは余白を取りづらいので非表示 */
  .cta-chooser::after{ display:none; }

  /* 角丸をやや小さくして画面にフィット */
  .cta-chooser{ border-radius:12px; padding:2rem 1rem; }

  /* すでに flex-column 指定済みなので縦並びOK */
}


/* ── カード見出し ─────────────────────── */
.cta-chooser .cta-head{
  font-size: 2rem;          /* 全体バランスに合わせ調整 */
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 12px;           /* 下に少し余白 */
  color: #111;
}


/* ──────────────────────────────
   CTA 見出しだけグローバル装飾を解除
──────────────────────────────── */
.cta-chooser .cta-ttl,
.cta-chooser .cta-head{
  /* グローバル側で入っている余白・線を念のためリセット */
  padding-left: 0;
  border: none;
  position: static;   /* ドット用に relative になっている場合の保険 */
}

/* 疑似要素の赤丸・線を消す */
.cta-chooser .cta-ttl::before,
.cta-chooser .cta-ttl::after,
.cta-chooser .cta-head::before,
.cta-chooser .cta-head::after{
  content: none !important;   /* ①描画自体を無効化 */
  display: none !important;   /* ②古いブラウザ対策 */
}



@media screen and (max-width: 768px) {
.cta-chooser .cta-cards{ 
	flex-direction: column; }
.cta-chooser .cta-card{ margin-bottom: 16px; 
}

.cta-chooser .cta-ttl{
    font-size: 1.8rem;  
    line-height: 1.4;    
    margin-bottom: 1.5rem;
}
}


.cta-chooser  h3#chapter-25 {
       color: #fff;
}



@media screen and (max-width: 767px) {
    .sp-float-btns .sp-float-btn {
        flex: 1 1 48%;
        margin: 0 2%;
        padding: 1rem 0.5rem;
        font-size: 1.15rem;
}
}


/*----------------------------------------------------
    PCサイトcss
----------------------------------------------------*/
@media screen and (min-width: 481px) {
/*/////////////PC用のCSSをここに作成してください。/////////////*/
.mv .wi1200:before {
    width: 45rem;
    background-size: cover;
}
.mv .mainTit01Wrap {
    margin-left: -28rem;
    margin-bottom: 0;
}

.mv .mainTit01Wrap br {
    display: none;
}

.mv .mainTit02 {
    margin-left: -28rem;
}

.mv .mainTit02Wrap {
    overflow: unset;
}

}/*////////////////////PC用CSSここまで///////////////////*/


/*----------------------------------------------------
    SPサイトcss
----------------------------------------------------*/

@media screen and (max-width: 480px) {
/*/////////////SP用のCSSをここに作成してください。/////////////*/
/*/////////////必ず中括弧の中に作成してください。/////////////*/
.mt06 {
margin-top: 20px;
}
.mv .wi1200:before {
    right: -9rem;
}

}