/*2026追加*/
:root{
  --gap: 12px;

  --shadow-dim: 0 5px 12px rgba(0,0,0,.08);
  --shadow-hi: 0 14px 28px rgba(0,0,0,.16);

  --t-med: 220ms;
  --ease-out: cubic-bezier(.2,.9,.2,1);
}

.color-bg{margin-top: -1.95em;}
.page h1{text-align: initial;}
small{line-height: 1.4;}

@media (max-width: 450px){
.wrapPankz {
  display: none;
}
}

.kvCourse .pankz {
  padding: 0.5em 0 !important;
}


/* =========================
   .kvCours
========================= */
.kvCourse{
  margin: 2em 0;
}

.kvCourse__text .kvCourse__Lead{padding-bottom: 2em;}
.kvCourse__head{
  margin-bottom: 1em;
} 

.lead{
  font-size: var(--fs-h4)!important;
  font-weight: var(--fw-bold)!important;
}

/*h1タイトル*/
.ttl{
  margin: 0;
  line-height: var(--lh-tight);
  font-weight: var(--fw-800);
  text-align: left;
}

/* 初期状態 */
.ttl-pc{
  display: block;
}

.ttl-sp{
  display: none!important;
}


.ttl-main{
  position: relative;
  display: inline-block;
  font-size: var(--fs-main);
  letter-spacing: 0.01em;
  padding: 0 0.35em 0.22em 0.06em !important;
}

/* 淡い帯 */
.ttl-main::before{
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: -0.35em;
  bottom: -0.01em;
  height: 0.55em;
  background: rgba(var(--theme-rgb), var(--alpha-30));
}

/* ライン */
.ttl-main::after{
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0.12em;
  height: 0.16em;
  width: 80%;
  background: rgba(var(--theme-rgb));
}

.ttl-main_spo::after{
  width: 92%;
}

.kvCourse .copy{
  font-size: var(--fs-mid)!important;
  font-weight: var(--fw-bold);
  margin-bottom: 0;
}

@media (max-width: 767px){
  .ttl-pc{
    display: none!important;
  }

  .ttl-sp{
    display: flex!important;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08em;
  }

  .kvCourse__head {padding: 1.6em 0 1em;}
  .kvCourse__text .kvCourse__Lead{padding-bottom: 0;}
}


/* =========================
    couTab
========================= */
/* --- TAB 全体 --- */
.couTab{
    margin: 24px 0;
    /* padding: 0 16px; */
  }
  
  .couTab__cards{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
  }

  /* --- カード（タブ）共通 --- */
  .couTab__card{
    position: relative;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border: 0;
    border-radius: 10px;
    padding: 1em 1.7em 1em 0.7em;
    background: #f2f2f2;
    box-shadow: 0 2px 0 rgba(0,0,0,.04);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  }
  
  .couTab__card .title{
    margin: 0;
    font-size: var(--fs-ss)!important;
    color: #333;
    line-height: 1.2;
  }
  
  /* 右の三角*/
  .couTab__card::after{
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-40%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #cfcfcf; /* 未選択時の三角色 */
  }

  /* .couTab__card::after:hover{
    color: #fff;
  } */
  
  /* --- 未選択- */
  .couTab__card[aria-selected="false"]{
    background: #f2f2f2;
    border: 2px solid rgb(var(--theme-rgb));
  }
  .couTab__card[aria-selected="false"] .title{
    color: #666;
  }
  .couTab__card[aria-selected="false"]::after{
    border-top-color: #cfcfcf;
  }

  /* 未選択タブのhover（PC/SP共通） */
.couTab__card[aria-selected="false"]:hover{
  background: rgb(var(--theme-rgb));
}

.couTab__card[aria-selected="false"]:hover .title{
  color: #fff;
}

  
  /* --- 選択中 --- */
  .couTab__card[aria-selected="true"]{
    background: rgb(var(--theme-rgb));
    box-shadow: 0 6px 16px rgba(0,0,0,.10);
  }

  .couTab__card[aria-selected="true"] .title{
    color: #fff;
    font-weight: var(--fw-bold);
  }

  .couTab__card[aria-selected="true"]::after{
    border-top-color: #fff;
  }
  
  /* hover（任意） */
@media (hover:hover){
  .couTab__card:hover{
      box-shadow: 0 8px 18px rgba(0,0,0,.12);
      transform: translateY(-1px);
      font-weight: var(--fw-bold);
    }
}

@media (max-width: 767px){
  .couTab{
    margin: 24px 0;
}

  .couTab__card{
    padding: 1.6em 1.8em 1.6em 0.5em;
  }

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


  /* --- panes --- */
.couTab__panes{ margin-top: 16px; }
.couTab__pane{ display:none; }
.couTab__pane.is-active{ display:block; }


.couTab__pane.is-active{
    border-radius: 10px;
    padding: 16px;
    /* border: 1px solid rgb(var(--theme-rgb)); */
}

@media (max-width: 767px){
    .couTab__pane.is-active{
    padding: 2em 0;
    }
}


/* =========================
  タブ追従
========================= */
/* ---- 追従（PC/SP共通） ---- */
.couTabWrap.is-sticky{
  position: fixed;
  left: 0;
  right: 0;
  top: 72px;
  z-index: 2;
  background: #fff;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

/* .couTabWrap.is-sticky .couTab__card::after{
  display: none;
} */

/* スペーサー */
.couTabStickySpacer{ height: 0; }

@media (min-width: 901px){
  .couTabWrap > summary{ display:none; }
}

@media (max-width: 767px){
  .couTabWrap.is-sticky{
    top: 46px;
    padding: 0;
    background: transparent;
    border-bottom: 0;
    isolation: isolate;
  }
  

  /* 追従してない時はsummaryを出さない（通常タブ表示） */
  .couTabWrap:not(.is-sticky) > summary{ display: none; }

  /* summary = tocToggle相当 */
  .couTabWrap.is-sticky > summary{
    display: flex;
    position: relative;
    z-index: 2;
    pointer-events: auto;
    width: 100%;
    min-height: 45px;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 0 1em;
    background: rgb(var(--theme-rgb));
    color: #fff;
    cursor: pointer;
    border: 0;
    font-weight: var(--fw-bold);
    text-align: right;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* details標準マーカー消し */
  .couTabWrap > summary::-webkit-details-marker{ display: none; }
  .couTabWrap > summary{ list-style: none; }

  
  .couTabSummary{
    position: relative;
    display: inline-flex; 
    align-items: center;
    justify-content: flex-end;
    color: inherit;
  }

  /* アイコン（三角） */
  .couTabSummary::after{
    content: "";
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 12px solid #fff;
    transition: transform .25s ease;
  }

  .couTabWrap[open] .couTabSummary::after{
    transform: rotate(-180deg);
  }

  /* 閉じている時はメニュー非表示 */
  .couTabWrap.is-sticky:not([open]) .couTab__cards{ display: none; }

  /* 開いたら白いリストを表示 */
  .couTabWrap.is-sticky[open] .couTab__cards{
    display: block;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    background: #fff;
  }

  /* 追従時は縦一列 */
  .couTabWrap.is-sticky[open] .couTab__card{
    display: block;
    width: 100%;
    border-radius: 0;
    text-align: right;
    font-size: 0.85rem;
    margin-bottom: 0.02em;
  }

  /* .couTabWrap.is-sticky[open] .couTab__card:last-child{
    border-bottom: 0;
  } */

  .couTabWrap.is-sticky ~ .couTab__panes{
    margin-top: 0; 
  }
}



/* =========================
    courseIntro
========================= */
.courseIntro{
    /* padding: 40px 0; */
  }
  
  /* --- 上段レイアウト --- */
  .courseIntro__top{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
  }
  
  .courseIntro__title{
    position: relative;
    margin: 1.6em 0 0.8em;
    padding-bottom: 8px!important;   
    display: flex;
    align-items: center;
    color: rgb(var(--theme-rgb));
    gap: 10px;
  }

/* 下線 */
.courseIntro__title::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: rgb(var(--theme-rgb));
  }
  
  .courseIntro__title small{
    font-size: 13px;
    font-weight: var(--fw-bold);
    margin-top: 1em;
  }
  
  /* 前の丸 */
  .courseIntro__title .dot{
    position: relative;
    top: 4px;
    left: 10px;
    width: 12px;
    height: 12px;
    margin-right: 0.3em;
    background: rgba(var(--theme-rgb),var(--alpha-80));
    border-radius: 50%;
    flex-shrink: 0;
    transform: rotate(45deg); 
  }
  
  /* 後ろの丸 */
  .courseIntro__title .dot::before{
    content: "";
    position: absolute;
    left: -10px;
    top: -2px;
    width: 17px;
    height: 17px;
    background: rgb(var(--theme-rgb));
    border-radius: 50%;
    opacity: .35;
  }
  
  .courseIntro__text .lead{
    font-weight: var(--fw-bold);
    margin-bottom: 16px;
  }
  
  .courseIntro__text p{
    margin-bottom: 12px;
  }

  .courseIntro__pickup{
    position: relative;
  }
  
  .pickupImage{
    position: relative;
  }

  figure {
    margin: 0;
}
  
  .pickupImage img{
    width: 100%;
    display: block;
  }
  
  /* 左上 */
  .pickupRibbon,.pickupTag,.courseIntro__grid .cardTitle{
    background: #fff;
    color: rgb(var(--theme-rgb));
    font-weight: var(--fw-bold);
    font-size: var(--fs-mid);
    padding: 3px 10px;
  }

  .pickupRibbon{
    position: absolute;
    top: -1px;
    left: -1px;
    background: #fff;
    z-index: 2;
    white-space: nowrap;
  }
  
  /* 右下*/
  .pickupTag{
    position: absolute;
    right: -1px;
    bottom: -1px;
  }
  
  .pickupCaption{
    margin-top: 12px;
  }
  
  
  /* --- 下段グリッド --- */
.courseIntro__grid{
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .courseIntro__grid .item:nth-child(3){
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 600px;
    width: 100%;
  }
  
  /* 各カード */
  .courseIntro__grid.item{
    position: relative;
  }
  
  .courseIntro__grid.item img{
    width: 100%;
    display: block;
  }
  

  
  @media (max-width: 767px){
    .courseIntro__top{
      grid-template-columns: 1fr;
    }
    .courseIntro__grid{
      grid-template-columns: 1fr;
    }
    .courseIntro__grid .item:nth-child(3){
      max-width: 100%;
    }
  }

/* ==== sectionTabWrap ==== */
  .sectionTabWrap {
    margin-top: 5em;
}

@media (max-width: 767px){
  .sectionTabWrap {
    margin-top: 3em;
}
}


/* ==== crossover ==== */
.crossover{
    --accent: rgb(var(--theme-rgb));
    position: relative;
    padding: 24px 0;
  }

  /* 外枠のボックス */
  .crossover__box{
    border: 2px solid var(--line);
    padding: 3em 2.5em 2em;
    position: relative;
  }

  /* 見出しを枠の上に“かぶせる” */
.crossover__heading{
    position: absolute;
    width: 290px;
    left: 18px;
    top: 31px!important;
    margin: 0!important;
    padding: 0.5em!important;
    background: #fff;
    font-size:  2rem!important;
    font-weight: var(--fw-bold);
    color: var(--accent);
    letter-spacing: .02em;
    line-height: 1;
    z-index: 2;
  }
  
  /* 横並びフロー */
  .crossover__flow{
    display: grid;
    grid-template-columns: 1fr 70px 1fr 70px 280px;
    gap: 0;
    align-items: start;
  }
  
  /* 各ステップ */
  .crossover__step{
    min-height: 140px;
  }

  .crossover__text{
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    color: #111;
  }
  
  /* 左上のラベル */
  .crossover__pill{
    --pill-color: rgb(var(--theme-rgb));
    width: 100%;
    padding: 0.3em 0!important;
    display: inline-block;
    background: var(--pill-color);
    color: #fff;
    text-align: center;
  }
  
  /* 矢印（三角） */
  .crossover__arrow{
    position: relative;
    width: 52px;
    height: 52px;
    align-self: center;
  }
  
  .crossover__arrow::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 22px solid rgb(var(--theme-rgb));
  }
  
  /* 右端（将来像） */
.crossover__step--goal{
    position: relative;
    display: grid;
    align-content: center;
    align-self: center;
    justify-items: end;
    gap: 10px;
    padding-top: 6px;
    border: 2px dotted var(--accent);
  }
  
  /* 将来像の“タブ” */
  .crossover__mini{
    color: #fff;
    background: var(--accent);
    padding: 6px 14px!important;
    display: inline-block;
    position: absolute;
    top: -23px;
    left: 50%;  
    transform: translateX(-50%);
    border-radius: 30px;
    z-index: 1;
  }
  
  /* 将来像の枠（点線） */
  .crossover__goalBox{
    width: 100%;
    padding: 2em 20px;
    text-align: center;
    z-index: 0;
  }

  .crossover__goalBox p{
    margin: 0!important;
  }


  /* pill が無い step だけ、text の上に余白を作る */
@media (min-width: 901px){
  .crossover__step:not(:has(.crossover__pill)) .crossover__text{
    margin-top: 3.2em; /* pill 高さ相当 */
  }
}
  

  @media (max-width: 767px){
    .crossover__heading{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
      }

    .crossover__flow{
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .crossover__pill{
        padding: 0.5em 0!important;
      }

      .crossover__step {
        min-height: 0;
    }
  
    .crossover__arrow{
      width: 100%;
      height: 22px;
      padding: 1em 0;
    }
  
    .crossover__arrow::before{
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) rotate(90deg);
    }

    .crossover__mini {
        top: -32px;
        width: 65%;
        text-align: center;
    }
  
    .crossover__step--goal{
      justify-items: start;
      margin: 2em 3em 0;
    }
  
    .crossover__goalBox{
      width: 100%;
    }
  }



  /* =========================
   qcaBlocks
========================= */
  .couDecor{
    --accent: rgb(var(--theme-rgb));
    padding: 2em 0 4em;
  }
  
  /* セクション間の余白 */
  .couDecor__group + .couDecor__group{
    margin-top: 5em;
  }
  
  /* 中央見出し＋左右ライン */
  .couDecor__heading{
    margin: 0 0 3em!important;
    display: grid!important;
    grid-template-columns: 1fr auto 1fr!important;
    align-items: center!important;
    gap: 18px!important;
  }
  
  .couDecor__heading::before,
  .couDecor__heading::after{
    display: block!important;
    position: initial!important;
    width: initial!important;
    content: ""!important;
    height: 2px!important;
    background: var(--accent)!important;
    opacity: .45!important;
  }

  
  .couDecor__heading > span{
    display: inline-block;
    color: var(--accent);
    letter-spacing: .04em;
    text-align: center;
  }
  
  .couDecor__grid{
    display: grid;
    gap: 32px;
    justify-items: center;
    margin: 0 1em;
  }
  
  .couDecor__grid--3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .couDecor__grid > .item{
    width: 100%;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1em;
    font-size: var(--fs-p);
    border: 1px solid var(--line);
    background: #fff;
  }

  .job_caption{
    text-align: right;
    margin-right: 1em;
  }
  
  @media (max-width: 767px){
    .couDecor{
      padding: 1em 0;
    }

    .couDecor__grid{
      gap: 15px;
    }

    .couDecor__group + .couDecor__group {
      margin-top: 3em;
  }

    .couDecor__grid--3{
      grid-template-columns: 1fr;
    }
    .couDecor__grid >.item{
      max-width: none;
    }

    .couDecor__grid--job{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .couDecor__grid--job .item{
      font-size: var(--fs-ss)!important;
    }
  }
  

/* ---- 履修モデル ---- */
.curriculum_title{
  background: rgba(var(--theme-rgb),var(--alpha-40))!important;
  text-align: center;
  margin: 0!important;
}

/*スポーツ用*/
.curriculum--narrow-year4 .curriculum-grid{
  grid-template-columns: 19% 1fr 1fr 1fr 0.43fr; /* 4年次だけ狭く */
}

.curriculum-grid {
  display: grid;
  grid-template-columns: 24% repeat(4, 1fr);
  min-width: 1100px;
  border-left: none;
  border-bottom: 1.5px solid var(--line);
  margin: 1em 0;
}

/* 共通セル */
.cell {
  padding: 1em 1.2em;
  border-top: 1.5px solid var(--line);
  border-right: 1.5px solid var(--line);
}

.cell li{
  font-size: 0.9rem;
  margin: 0.3em 0!important;
}

/* 最上部の線を消す */
.head {
  padding: 0.8em;
  border-top: none!important;
  text-align: center;
  font-weight: bold;
}


/* 左*/
.left {}

.cell .title {
  margin: 0 0 8px;
  font-size: var(--fs-mid);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.cell .title span{display: block;}

.cell .text {margin: 0;}

.subjects {
  list-style: none;
  padding: 0;
  margin: 0;
}

.subjects li {
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

/* curriculum__box */
.curriculum__box {
  display: grid;
  gap: 20px;
}

.curriculum__box .row {
  display: grid;
  grid-template-columns: 281px 1fr;
  border: 1px solid var(--line);
  background: #fff;
}

.curriculum__box .label {
  background: rgba(var(--theme-rgb),var(--alpha-40))!important;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: var(--fw-bold);
  border-right: 1px solid var(--line);
}

.curriculum__box .items {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
  padding: 18px 22px;
  flex-wrap: wrap;
  white-space: nowrap;
}

.curriculum__box .item{
  font-size: 0.9rem;
  white-space: nowrap;
}

@media (max-width: 767px){
  .curriculum-grid {
    grid-template-columns: 24% repeat(4, 1fr);
  }

  .curriculum__box .row {
    grid-template-columns: 1fr;
  }

  .curriculum__box .item {
    white-space: normal;
    word-break: break-word; 
  }

  .curriculum__box .items{
    gap: 10px!important;
  }
}


/* ---- Learning Point ---- */
.learningPoint{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
}

/* Left */
.learningPoint__title{
  font-size: var(--fs-h4)!important;
  font-weight: var(--fw-bold);
  margin: 0 0 14px;
}

.learningPoint__text{
  margin: 0 0 20px;
}

.learningPoint__collage{
  position:relative;
  height: 260px;
}

.learningPoint__photo{
  position: absolute;
  overflow: hidden;;
}

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

.learningPoint__photo--a{
  left: 0;
  top: 0;
  width: 51%;
}

.learningPoint__photo--a .pickupTag{
  right: 0.5em;
}

.learningPoint__photo--b{
  right: 0;
  top: 25%;
  width: 51%;
}


@media (max-width:900px){
  .learningPoint{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .learningPoint__collage{
    position: static;
    height: auto;
    margin: 2em 1em 0;
  }

  .learningPoint__photo{
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 2em;
  }

  .learningPoint__photo:last-child{
    margin-bottom: 0;
  }

  .learningPoint__photo img{
    height: auto;
  }

  .learningPoint__photo--a .pickupTag{
    right: -0.1em;
  }

  .learningPoint .pickupImage{
    margin: 0 1em;
  }
}

.ctaBanner-course{
  padding: 0 0 5em;
} 

@media (max-width: 767px){
  .ctaBanner-course{
    padding: 0 0 2.5em;
    margin: -2em 0 0;
  } 
}