@charset "UTF-8";

/* ========== Base ========== */
:root {
  --c-primary: #1c2b6c;
}

.main *,
.main *::before,
.main *::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

.main {
  width: 100%;
  background-color: #f0f0f0;
}

/* 全体を囲む親要素 */
.l-container {
  display: grid;
  grid-template-columns: 1fr minmax(100px, 230px);
  /* メイン：可変, サイドバー：幅280pxなど固定 */
  gap: 40px;
  /* 2カラムの間の余白 */
  width: 90%;
  max-width: 1200px;
  /* ページの最大幅 */
  margin: 0 auto;
  padding: 45px 0 90px;
}

/* 右側のサイドバー（親要素） */
.l-sidebar {
  position: relative;
  /* stickyの基準位置になります */
}

/* サイドバー全体 */
.sidebar-menu {
  position: sticky;
  top: 110px;
  width: 100%;
  max-width: 230px;
  /* 必要に応じて調整してください */
  transition: .3s;
}

/* 1. エントリー・ログインボタン（グラデーション＋右下の黒三角） */
.sidebar-entry {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 20px 5px;
  color: #000;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 15px;
  overflow: hidden;
  height: 100px;
  transition: .3s;
  text-align: center;
}

.sidebar-entry:last-child {
  margin-top: 15px;
}

.entry-red {
  background-image: linear-gradient(136deg, #ffebd4, #ffded3 56%, #e89271);
}

.entry-blue {
  background-image: linear-gradient(136deg, #dbeaff, #bfd3ff 56%, #767cf4);
}

.sidebar-entry:hover {
  opacity: .8;
}

.sidebar-entry span {
  font-size: 14px;
}

.sidebar-entry-text {
  position: relative;
  z-index: 2;
  line-height: 1.3;
}

/* 右下の黒い折り返し三角 */
.sidebar-entry::after {
  content: "";
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 15px 15px;
  border-color: transparent transparent #000 transparent;
}

.sidebar-accordion-header {
  background-image: linear-gradient(90deg, #003366, #0050c8);
  color: #fff;
  padding: 20px 8px 20px 20px;
  font-size: 15px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  border: solid 1px #003366;
}

/* 下向き矢印アイコン */
.sidebar-accordion-header .accordion-icon::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  margin-bottom: 3px;
}

/* リスト部分 */
.sidebar-accordion-body {
  list-style: none;
  padding: 0;
  margin-top: 12px;
  background-color: transparent;
}

.sidebar-accordion-body li {
  border-bottom: 1px solid #b2c1d1;
}

.sidebar-accordion-body .last-child {
  border-bottom: none;
}

.sidebar-accordion-body li a {
  display: block;
  padding: 16px 20px;
  color: #003366;
  text-decoration: none;
  font-size: 14px;
  position: relative;
  transition: .3s;
}

.sidebar-accordion-body li a:hover {
  background-color: rgba(0, 0, 0, 0.03);
  color: #003366;
}


/* 3. 募集要項などのリンクカード */
.sidebar-links {
  border: 1px solid #b2c1d1;
  margin-top: 12px;
}


/* デフォルト（PC表示）では、スマホ用の固定エリアは非表示にする */
.sp-fixed-footer {
  display: none;
}

/* --- スマホなど狭い画面（760px以下）のときの切り替え --- */
@media screen and (max-width: 760px) {
  .l-container {
    grid-template-columns: 1fr;
    /* 固定エリアの高さ分（ボタン＋募集要項2つ分）、ページ最下部に大きめの余白を確保 */
    padding-bottom: 40vw;
  }

  /* 1. PC用のサイドバー全体はスマホでは非表示にする */
  .l-sidebar {
    display: none;
  }

  /* 2. スマホ用の固定エリアを画面一番下にピタッと固定表示 */
  .sp-fixed-footer {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    background-color: #fff;
    /* 背景色（必要に応じて調整してください） */
  }

  /* 固定エリア内のエントリーボタンの調整 */
  .sp-fixed-footer .sidebar-entry {
    margin-bottom: 0;
    min-height: 13.3vw;
    height: auto;
  }

  .sp-fixed-footer .sidebar-entry-text {
    font-size: 4vw;
    padding-right: 5vw;
  }

  .sp-fixed-footer .sidebar-entry-text::after {
    width: 4vw;
    height: 3vw;
    bottom: 1vw;
  }

  .sp-fixed-footer .sidebar-entry::after {
    bottom: 1vw;
    right: 1vw;
    border-width: 0 0 2.66vw 2.66vw;
  }

  /* 固定エリア内の募集要項カード（横並びにする場合） */
  .sp-fixed-footer .sidebar-links {
    display: flex;
    border: none;
    margin-top: 0;
  }

  .sp-fixed-footer .sidebar-link-card {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    padding: 4vw;
    font-size: 3.33vw;
    font-weight: bold;
    text-align: center;
    transition: .3s;
    position: relative;
    height: 13.33vw;
  }

  .sp-fixed-footer .sidebar-link-card:last-child {
    border-right: none;
  }

  /* カードの矢印位置の調整（中央揃えにする場合、不要なら削除してOKです） */
  .sp-fixed-footer .sidebar-link-card::after {
    content: "";
    position: absolute;
    bottom: 1.33vw;
    right: 1.33vw;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 2.6vw 2.6vw;
    border-color: transparent transparent #000 transparent;
  }

  .my-custom-totop {
    bottom: 18vw;
  }
}







/* メインエリア全体の基本設定 */
.l-main {
  width: 100%;
  min-width: 0
}

@media screen and (max-width:639px) {
  .l-container {
    padding: 5.86vw 0 40vw;
  }
}



.sidebar-menu.is-absolute {
  /* PCのときの距離 */
  top: calc(var(--footer-top) - var(--el-height) - 400px) !important;
}

@media screen and (max-width: 760px) {
  .sp-fixed-footer.is-absolute {
    /* スマホのときの距離（例：フッターの直上でピタッと止めたいなら 0px） */
    top: calc(var(--footer-top) - var(--el-height) - 0px) !important;
  }

  .my-custom-totop.is-absolute {
    /* PCのときの距離 */
    top: calc(var(--footer-top) - var(--el-height) - 20vw) !important;
  }
}

@media screen and (max-width:639px) {
  .my-custom-totop.is-absolute {
    /* PCのときの距離 */
    top: calc(var(--footer-top) - var(--el-height) - 20vw) !important;
  }
}




/* 全体コンテナ */
.benefits-section {
  width: 100%;
  margin: 50px auto 0;
  padding: .1px;
}

/* 各項目の行（白背景のブロック） */
.benefit-item {
  display: flex;
  background-color: #fff;
  margin-top: 20px;
  box-sizing: border-box;
  align-items: flex-start;
}

/* 左側：タイトルとアイコン */
.benefit-header-col {
  width: 33%;
  flex-shrink: 0;
}

.benefit-title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 23px;
  font-weight: bold;
  color: #003366;
  position: relative;
  padding: 10px;
  width: 77%;
  height: 90px;
  max-width: 240px;
  margin-left: 15%;
  margin-right: 8%;
  background-color: #fcf1e6;
}

.benefit-icon {
  width: 77%;
  max-width: 240px;
  margin-left: 15%;
  margin-right: 8%;
  margin-bottom: 20px;
}

.benefit-icon img {
  width: 100%;
  height: auto;
  display: block;
}

/* 右側：詳細コンテンツエリア */
.benefit-body-col {
  flex-grow: 1;
  margin: 20px 40px 20px 0;
}

.benefit-block {
  padding: 25px 0;
  border-bottom: 1px solid #dcdcdc;
}

.benefit-block:last-child {
  border-bottom: none;
}

.benefit-subtitle {
  font-size: 20px;
  line-height: 1.5;
  font-weight: bold;
  color: #003366;
}

.benefit-text {
  font-size: 15px;
  line-height: 2;
  color: #003366;
  margin-top: 5px;
}

.text-link {
  color: #0000ee;
  text-decoration: underline;
}

.note-text {
  font-size: 12px;
  margin-top: 10px;
}

.benefit-first-text {
  margin: 25px 0 20px;
}

.bottom-bnr {
  width: 100%;
  max-width: 744px;
  margin: 90px auto 0;
}

.bottom-bnr img {
  width: 100%;
}

.bottom-bnr a {
  transition: .3s;
}

.bottom-bnr a:hover {
  opacity: .8;
}

/* レスポンシブ対応（スマホ表示：639px以下） */
@media screen and (max-width: 639px) {
  .benefits-section {
    margin: 0 auto;
  }

  .benefit-item {
    flex-direction: column;
    margin-top: 6.58vw;
  }

  .benefit-header-col {
    width: 100%;
  }

  .benefit-title {
    font-size: 4.66vw;
    padding: 1.33vw;
    width: 60%;
    height: 20.26vw;
    margin: 0 auto;
  }

  .benefit-icon {
    width: 60%;
    margin: 0 auto;
    margin-bottom: 0;
  }

  .benefit-body-col {
    flex-grow: 1;
    margin: 0 4vw;
  }

  .benefit-block {
    padding: 6vw 0;
  }

  .benefit-block-top0 {
    padding-top: 0vw !important;
  }

  .benefit-subtitle {
    font-size: 4.39vw;
  }

  .benefit-text {
    font-size: 3.59vw;
    margin-top: 1vw;
  }

  .note-text {
    font-size: 2.66vw;
    margin-top: 5.33vw;
  }

  .benefit-first-text {
    margin: 0 0 4vw;
  }

  .bottom-bnr {
    margin-top: 12vw;
  }
}