/* 設定：基準となる画面幅 */
:root {
  --fluid-min-w: 375;
  --fluid-max-w: 1381;
}
/* 仕組み：全ての要素に計算式を適用 */
body * {
  /* 変数が指定されていない時のデフォルト値（16px） */
  --f-min: 16;
  --f-max: 16;

  font-size: max(
    calc(var(--f-min) * 1px),
    calc(
      var(--f-min) * 1px + 
      (var(--f-max) - var(--f-min)) * (100vw - var(--fluid-min-w) * 1px) / 
      (var(--fluid-max-w) - var(--fluid-min-w))
    )
  );

/* =================================================================
    Margin 計算機
    初期値: 0 / 挙動: 375px以下は固定、1366px以上は無限拡大
    ================================================================= */

  /* --- Margin Top --- */
  --mt-min: 0; --mt-max: 0;
  --mt-val: calc(var(--mt-min) * 1px + (var(--mt-max) - var(--mt-min)) * (100vw - var(--fluid-min-w) * 1px) / (var(--fluid-max-w) - var(--fluid-min-w)));

  /* --- Margin Right --- */
  --mr-min: 0; --mr-max: 0;
  --mr-val: calc(var(--mr-min) * 1px + (var(--mr-max) - var(--mr-min)) * (100vw - var(--fluid-min-w) * 1px) / (var(--fluid-max-w) - var(--fluid-min-w)));

  /* --- Margin Bottom --- */
  --mb-min: 0; --mb-max: 0;
  --mb-val: calc(var(--mb-min) * 1px + (var(--mb-max) - var(--mb-min)) * (100vw - var(--fluid-min-w) * 1px) / (var(--fluid-max-w) - var(--fluid-min-w)));

  /* --- Margin Left --- */
  --ml-min: 0; --ml-max: 0;
  --ml-val: calc(var(--ml-min) * 1px + (var(--ml-max) - var(--ml-min)) * (100vw - var(--fluid-min-w) * 1px) / (var(--fluid-max-w) - var(--fluid-min-w)));

  /* --- Padding Top --- */
  --pt-min: 0; --pt-max: 0;
  --pt-val: calc(var(--pt-min) * 1px + (var(--pt-max) - var(--pt-min)) * (100vw - var(--fluid-min-w) * 1px) / (var(--fluid-max-w) - var(--fluid-min-w)));

  /* --- Padding Right --- */
  --pr-min: 0; --pr-max: 0;
  --pr-val: calc(var(--pr-min) * 1px + (var(--pr-max) - var(--pr-min)) * (100vw - var(--fluid-min-w) * 1px) / (var(--fluid-max-w) - var(--fluid-min-w)));

  /* --- Padding Bottom --- */
  --pb-min: 0; --pb-max: 0;
  --pb-val: calc(var(--pb-min) * 1px + (var(--pb-max) - var(--pb-min)) * (100vw - var(--fluid-min-w) * 1px) / (var(--fluid-max-w) - var(--fluid-min-w)));

  /* --- Padding Left --- */
  --pl-min: 0; --pl-max: 0;
  --pl-val: calc(var(--pl-min) * 1px + (var(--pl-max) - var(--pl-min)) * (100vw - var(--fluid-min-w) * 1px) / (var(--fluid-max-w) - var(--fluid-min-w)));
}
/* =================================================================
   PC幅 (1367px以上) の拡大ブースト設定
   -----------------------------------------------------------------
   今の計算式のままだと大画面での拡大率が低いため、
   1366pxを超えたら「純粋な比率（vw）」での拡大に切り替えて
   もっと大きく表示されるように上書き
   ================================================================= */
@media screen and (min-width: 1367px) {
  body * {
    /* 計算式： (最大値 ÷ 1366) × 100vw
      これで1366px時点のサイズは維持しつつ、それ以降はウィンドウ幅に完全比例して拡大
    */

    /* フォントサイズ */
    font-size: calc(var(--f-max) / var(--fluid-max-w) * 100vw);

    /* Margin の上書き */
    --mt-val: calc(var(--mt-max) / var(--fluid-max-w) * 100vw);
    --mr-val: calc(var(--mr-max) / var(--fluid-max-w) * 100vw);
    --mb-val: calc(var(--mb-max) / var(--fluid-max-w) * 100vw);
    --ml-val: calc(var(--ml-max) / var(--fluid-max-w) * 100vw);

    /* Padding の上書き */
    --pt-val: calc(var(--pt-max) / var(--fluid-max-w) * 100vw);
    --pr-val: calc(var(--pr-max) / var(--fluid-max-w) * 100vw);
    --pb-val: calc(var(--pb-max) / var(--fluid-max-w) * 100vw);
    --pl-val: calc(var(--pl-max) / var(--fluid-max-w) * 100vw);
  }
}
/* ==========================================================================
   全体
   ========================================================================== */

/* 中間層：コンテンツエリア 
   背景(1)より高く、ヘッダー(999)より低くする */
.header_main,
.content_box,
.l-footer {
    position: relative;
    z-index: 10;
}

/* 最前面：ヘッダー
   コンテンツ(10)よりも確実に上にする */
#wrapper .l-header {
    z-index: 9999 !important;
}


/* 背景の装飾 */
#wrapper {
    position: relative;
}
#wrapper:not(.is-loaded) .l-header {
  opacity: 0;
  filter: blur(10px);
}
#wrapper::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    display: block;
    background: linear-gradient(160deg, #95c4e0 0%, #dbe4e8 50%);
    z-index: 1;
}
#wrapper:not(.is-loaded) .l-header {
  opacity: 1;
  filter: none;
}
@media screen and (min-width: 769px) {
    #wrapper::before {
        height: 146.3396778917vw;
    }
}
@media screen and (max-width: 768px) {
  #wrapper::before {
    height: 320vw;
  }
}


/* ==========================================================================
   ヘッダー
   ========================================================================== */
.header_main {
  position: relative;
  width: 100%;
  display: flex;
  gap: 5px;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  background-image: url(../img/csr/top.png);
  background-repeat: no-repeat;
  background-position: right 5% top 28%;

  --pt-min: 202;
  --pt-max: 200;
  padding-top: var(--pt-val);

  --pr-min: 106;
  --pr-max: 106;
  padding-right: var(--pr-val);

  --pb-min: 160;
  --pb-max: 158;
  padding-bottom: var(--pb-val);

  --pl-min: 110;
  --pl-max: 104;
  padding-left: var(--pl-val);

}
.header_main .head_box .head{
    margin-left: -20px;
    margin-bottom:0px;
}
.header_main .head_box .head .en{
    display: flex;
    align-items: center;

    --mb-min: 2;
    --mb-max: 0;
    margin-bottom: var(--mb-val);

    margin-left: -2px;
    color: #21436F;
}
.header_main .head_box .head .en__txt {
  font-family: "Zen Kaku Gothic New", sans-serif;
  --f-min: 15;
  --f-max: 18;
  font-weight: 700;
}
.header_main .kv__head {
  color: #21436F;
  font-family: 'Albert Sans';
  font-weight: bold;
  --f-min: 53;
  --f-max: 85;
  position: relative;
  --mb-min: 85;
  --mb-max: 83;
  margin-bottom: var(--mb-val);
  line-height: 1;
  letter-spacing: -0.5px;
}
@media screen and (min-width: 769px) {
    .head_box .head .en {
        gap: 0.7vw;
    }
}
@media screen and (max-width: 768px) {
  .header_main{
    background-image: url(../img/csr/top_sp.png);
    background-position: right -195% top 10%;
    padding: 40.8vw 5.3333333333vw 26vw;
    padding-top: 170px;
    gap: 8px;
  }
  .header_main .head_box{
    margin-bottom: 10px;
  }
  .header_main .head_box .head{
    margin-left: 0px;
  }
  .header_main .head_box .head .en {
    font-size: 15px;
    gap: 8px;
    margin-left: 0px;
  }
  .header_main .en__icn{
    width: 12px;
  }
  .header_main .kv__head{
      margin: 0 0 42px 21px;
      line-height: 58px;
      letter-spacing: 0;
    }
}

/* ==========================================================================
   上部コンテンツ
   ========================================================================== */

.l-main .head_box{
  --mb-min: 66;
  --mb-max: 69;
  margin-bottom: var(--mb-val);
}
.l-main .head_box .head {
    --mb-min: 26;
    --mb-max: 44;
    margin-bottom: var(--mb-val);
}
.l-main .head_box .head .en{
    font-size: 15px;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 0.3953147877vw;
    margin-left: -3px;
    color: #21436F;
    --mb-min: 26;
    --mb-max: 52;
    margin-bottom: var(--mb-val);
}
.l-main .head_box .head .en .en__txt{
  font-weight: 700;
  letter-spacing: 1px;
}

.l-main .head_box .head .jp {
    display: block;
    font-weight: 700;
    color: #21436F;
    letter-spacing: 1.4px;
    --f-min: 28;
    --f-max: 35;
}
.head_box .head .en__icn {
    display: block;
    max-width: 14px;
}
@media screen and (max-width: 768px) {
  .l-main {
    overflow: hidden;
  }
  .l-main .head_box .head .jp,
  .l-main .head_box .head .en{
    letter-spacing: 1.5px;
  }
  .l-main .head_box .head .en{
    gap: 2.3vw;
  }
}
@media screen and (min-width: 769px) {
  .l-main {
    width: auto !important;
    flex: 1;
    min-width: 0;
    overflow: hidden; 
  }
    .head_box .head .en__icn {
        width: 0.9970717423vw;
    }
}


/* ==========================================================================
   目次
   ========================================================================== */
.content_box {
  display: flex;
  overflow: visible !important;
  --mb-min: 47;
  --mb-max: 80;
  margin-bottom: var(--mb-val);
}
.asside_nav {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 120px !important;
  display: flex;
  justify-content: center;
}
.menu-container {
  text-align: center;
  background: white;
  border-radius: 30px;
  padding: 49px 0 25px;
  width: 250px;
  position: relative;
}
.menu-list {
  list-style: none;
  padding: 0;
  margin-inline: auto;
  text-align: left;
  width: fit-content;
  position: relative;
}
.menu-list li {
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #728AA8;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.15px;
  margin-bottom: 25px;
  cursor: pointer;
  transition: opacity 0.2s;
  position: relative;
}
.menu-list li.active {
  color: #21436F;
}

/* JSで自動生成される「動く点」 */
.menu-marker {
  display: block;
  position: absolute;
  left: -18px;
  width: 3px;
  height: 3px;
  background-color: #fff;
  border: 5px solid #1F3B62;
  border-radius: 50%;
  box-sizing: content-box;
  opacity: 0;
  transition: top 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  pointer-events: none;
}
.menu-marker.is-visible {
  opacity: 1;
}
#js-sidebar-track{
    margin-left: 6%;
    margin-right: 4%;
}
@media screen and (min-width: 769px) {
  .menu-container{
    width: 18.11vw;
    min-width: 251px;
  }
}
@media screen and (min-width: 1100px) {
  .menu-container{
    min-width: 251px;
  }
}
@media screen and (max-width: 1000px) {
  .sidebar_track{
    display: none;
  }
  .content_box{
    padding-inline: 20px;
  }
}
@media screen and (max-width: 768px) {
  .content_box{
    display: block;
  }
  .sidebar_track{
    display: none;
  }
}


/* ==========================================================================
   パンくずリスト
   ========================================================================== */
.uc-breadcrumb-nav {
  --uc-text-color: #1F3C65;
  --uc-dot-color: #8EB5D5;
  width: 100%;
  box-sizing: border-box;
  color: #0f2d52;
}
.uc-breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
.uc-breadcrumb-item {
  display: flex;
  align-items: center;
  color: var(--uc-text-color);
  font-weight: 500;
  letter-spacing: 0px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 2px;
}
.uc-breadcrumb-list li:nth-child(3) {
    letter-spacing: 0px;
}
.uc-breadcrumb-item a,
.uc-breadcrumb-item span{
  --f-min: 10;
  --f-max: 12;
}
.uc-breadcrumb-item a {
  text-decoration: none;
  color: var(--uc-text-color);
  transition: opacity 0.2s;
  font-weight: 500;
}
.uc-breadcrumb-item a:hover {
  opacity: 0.7;
  text-decoration: underline;
}
.uc-breadcrumb-item span[aria-current="page"] {
  font-weight: 500;
}
.uc-breadcrumb-separator {
  display: flex;
  align-items: center;
  margin: 0 10px;
  gap: 6px;
}
@media (max-width: 600px) {
  .uc-breadcrumb-item{
    letter-spacing: 0px;
  }
  .uc-breadcrumb-list li:nth-child(3){
    letter-spacing: 0.5px;
  }
  .uc-breadcrumb-nav {
    margin-left: 22px;
  }
  .uc-breadcrumb-separator {
    gap: 4px;
  }
}

/* ==========================================================================
   footer
   ========================================================================== */
.l-footer__recruit:not(.is-complete){
    opacity: 1;
    translate: none;
    filter: none;
}