/** Shopify CDN: Minification failed

Line 4268:15 Expected identifier but found whitespace
Line 4268:26 Unexpected "var("
Line 4363:4 Expected identifier but found "."
Line 5161:27 Expected identifier but found "*"

**/
/**********************
- LAYOUT / GRID
- STACKING PANEL
- HEADING
- BRIDGE SECTION
- FOOTER FIXED CTA
- BUTTON
- TABLE
- CARD
- FIRST VIEW (FV)
- FV ANIMATION
- TOP COURSE
- MOTION ANIMATION
- INTERVIEW MOVIE (SLIDER)
- RICH GALLERY
- BLOG
- CREATOR BLOCK
- SECOND VIEW
- TOP PAGE (INDEX SECTIONS)
- COMPANY
- WORKS
- ARTICLE / NAVIGATION
- ARTICLE WORKS
- WORKS GALLERY
- MODAL (YOUTUBE / LEXA)
- SIDEBAR LAYOUTS (STICKY)
- FAQ
- CTA
- MESSAGE
- SHORTS
- COURSE ITEM
- POLICY
***********************/

/* =================================================================
NEW: 2026/02/27〜
新コード
================================================================= */
/******************************************
SECTION
******************************************/
.section-head__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}

.section-title__jp {
  margin-top: var(--section-title-margin-jp);
}

.section-footer {
  margin-top: 6rem;
}

@media screen and (max-width: 960px) {
  .section-head__action {
    display: none;
  }
}

@media screen and (max-width: 560px) {
  .section-head__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-title__jp {
    margin-top: var(--section-title-margin-jp-mobile);
  }

  .section-footer {
    margin-top: 3rem;
    }
}

/******************************************
SIDEVAR SECTION
******************************************/
/*********************
追従レイアウト
*********************/
.side-sticky {
  --side-sticky-gap: 6.5rem;
  --sidebar-width: 48.5rem;
  --main-content-width: 75.8rem;
  --textarea-max-width: 59.5rem; /* デフォルト幅 */
  --nav-active-color: var(--bg-dark);
  --text-margin-top: 2.5rem;

  display: flex;
  gap: var(--side-sticky-gap);
  align-items: stretch;
  justify-content: center;
  padding-bottom: 37rem;
}
.side-sticky__block--gap-narrow {
  --text-margin-top: 1.0rem;
}

.side-sticky__sidebar-outer {
  width: var(--sidebar-width);
  flex-shrink: 1;
}

.side-sticky__sidebar {
  position: sticky;
  top: 12vh;
  /* 画面内に収まるように高さを計算 */
  height: calc(100vh - 15vh); 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.side-sticky__main {
  margin-top: 60rem;
  max-width: var(--main-content-width);
  width: 100%;
}

.side-sticky__block {
  padding-top: 12vh;
}

.side-sticky__block + .side-sticky__block {
  margin-top: 5rem;
}

.side-sticky__media {
  position: relative;
  width: 100%;
  aspect-ratio: 758 / 378;
  overflow: hidden;
}

.side-sticky__media video,
.side-sticky__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*********************
サイドナビゲーション
*********************/
.section-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.section-nav__item + .section-nav__item {
  margin-top: 0.7rem;
}

.section-nav__link {
  display: block;
  text-decoration: none;
  color: var(--text-gray);
  transition: 0.3s ease;
  letter-spacing: -0.05em;
  font-weight: var(--normal);
}

.section-nav__link.is-active {
  color: var(--nav-active-color);
}

.section-nav__link.is-active .section-nav__jp {
  font-size: 1.8rem;
}

.section-nav.is-dark .section-nav__link.is-active {
  color: #fff;
}

.section-nav__en {
    font-size: 1.8rem;
    line-height: 2;
}

.section-nav__jp {
    font-size: 1.6rem;
    line-height: 2;
    transition: 0.3s ease;
}

/* --- テキスト・コンテンツエリア --- */
.side-sticky__head {
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;   
}

.side-sticky__en {
    font-size: 3.4rem;
    font-weight: var(--light);
    line-height: 1;
    letter-spacing: -0.005em;
    gap: 0;
    margin: 0;
}

.side-sticky__en span {
    margin-right:1rem;
}

.side-sticky__jp {
    --ls: 0.12em; 

    font-size: 1.6rem;
    font-weight: var(--bold);
    line-height: 1;
    letter-spacing: var(--ls);
}

.side-sticky__heading {
  margin-top: 5rem;
  margin-bottom: 3rem;
}

.side-sticky__text {
  margin: 0;
}

.side-sticky__text-width--sm {
  --textarea-max-width: 51.5rem;
}

.side-sticky__text-width--md {
  --textarea-max-width: 57.2rem;
}

.side-sticky__lists {
    margin: 0;
}

.side-sticky__text + .side-sticky__text,
.side-sticky__lists + .side-sticky__lists,
.side-sticky__lists + .side-sticky__text,
.side-sticky__text + .side-sticky__lists {
  margin-top: var(--text-margin-top);
}

.side-sticky__text-width {
  max-width: var(--textarea-max-width);
  width: 100%;
}

@media (max-width: 960px) {
    .side-sticky {
        --side-sticky-gap: 0;
        --textarea-max-width: 100%;
        --main-content-width: 100%;
        
        flex-direction: column;
        padding-bottom: 0;
    }
    .side-sticky__block + .side-sticky__block {
        margin-top: 0;
    }

    .side-sticky__sidebar-outer {
        width: 100%;
    }

    .side-sticky__sidebar {
        position: relative;
        top: 0;
        height: auto;
    }

    .section-nav {
        display: none;
    }

    .side-sticky__main {
        margin-top: 0;
    }
}

@media screen and (max-width: 560px) {
    .side-sticky__heading {
      margin-top: 4.5rem;
    }
    .side-sticky__heading--reverse-sp {
        display: flex;
        flex-direction: column-reverse;
        gap: 1rem;
    }
    .side-sticky__en {
        font-size: 1.5rem;
    }
    .side-sticky__en span {
        margin-right:0.7rem;
    }
    .side-sticky__jp {
        font-size: 1.2rem;
        font-weight: var(--normal);
    }
}

/******************************************
STACKING
******************************************/
/*********************
動画箸休めセクション (Safari Optimized)
*********************/
/* 1. 次のセクションを上に重ねるための設定（必須） */
.video-reveal-target {
    position: relative;
    z-index: 10; /* 動画より手前に */
    margin-top: -100vh; /* JS演出が終わった後に重なる */
    background-color: var(--bg-dark-light); /* 背景色必須 */
}
@media screen and (max-width: 960px) {
    .video-reveal-target-sp {
        position: relative;
        z-index: 10; /* 動画より手前に */
        margin-top: -100vh!important; /* JS演出が終わった後に重なる */
    }
}

/* 2. 全体の器 */
.video-reveal-wrapper {
    position: relative;
    height: 350vh; /* スクロール量（演出の長さ） */
    z-index: 2;
    -webkit-perspective: 1000;
    perspective: 1000;
    overflow:clip;
}
/* 高さが必要なバージョン用 */
.video-reveal-wrapper.video-reveal-height {
    height: 750vh;
}

/* 3. 固定エリア */
.video-reveal-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
    isolation: isolate; 
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* 4. 動画背景：JS変数 --v-progress でフェード制御 */
.video-reveal-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* 進捗 0〜0.5 で 0→1 になる計算 */
    opacity: calc(var(--v-progress, 0) / 0.5);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.video-reveal-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 5. ブラーレイヤー：JS変数 --v-progress でブラー解除 */
.video-reveal-blur {
    position: absolute;
    inset: 0;
    z-index: 2;
    /* 進捗 0〜0.2 で 75px→0px になる計算（負の値を避けるためmaxを使用） */
    --blur-calc: calc((1 - (var(--v-progress, 0) / 0.2)) * 75px);
    -webkit-backdrop-filter: blur(max(0px, var(--blur-calc)));
    backdrop-filter: blur(max(0px, var(--blur-calc)));
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: -webkit-backdrop-filter, backdrop-filter;
}

/* 6. 黒フィルター：JS変数 --v-progress で進捗 0.2〜0.4 の間に 0→0.7 になる */
.video-reveal-filter {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #000;
    /* clamp(最小, 計算値, 最大) */
    --max-opacity: 0.7; /* 一番暗い時の濃さ（0〜1） */
    --early-progress: clamp(0, var(--v-progress, 0) / 0.9, 1);
    opacity: calc(sin(var(--early-progress) * 3.14159) * var(--max-opacity));
    display: block !important;
    pointer-events: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.video-reveal-wrapper.no-darken .video-reveal-filter {
  display: none!important; 
  /* あるいは、一定以上暗くしたくない場合 */
  /* opacity: calc(var(--v-progress) * 0.3); */
}

/* 7. メッセージスクロール層 */
.video-reveal-text {
    position: relative;
    z-index: 5;
    margin-top: -100vh; /* stickyの上に引き戻す */
    padding-top: 120vh; /* 動画演出を待つための余白 */
    padding-bottom: 100vh;
    pointer-events: none;
    -webkit-transform: translateZ(10px);
    transform: translateZ(10px);
}

/* 8. メッセージ本体（フェードはJSで計算して適用） */
.video-reveal-text .js-reveal-text-item {
    pointer-events: auto;
    opacity: 0;
    will-change: opacity, transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding-top: 200vh;
}

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

}

@media screen and (max-width: 560px) {
    .video-reveal-wrapper.video-reveal-height {
        height: 600vh;
    }
    .video-reveal-text .js-reveal-text-item {
        padding-top: 100vh;
    }
    .video-reveal-filter {
        --max-opacity: 0.7;
        --early-progress: clamp(0, var(--v-progress, 0) / 0.95, 1);
        opacity: calc(sin(var(--early-progress) * 3.14159) * var(--max-opacity));
    }
    .video-reveal-wrapper.no-darken .video-reveal-bg {
        opacity: calc(var(--v-progress, 0) / 0.5);
    }
    .video-reveal-bg {
        opacity: calc(var(--v-progress, 0) / 0.1);
    }
}


/******************************************
標準パーツ
******************************************/
/*********************
LIST（順序なしリスト・順序付リスト）
*********************/
.normal-lists,
.number-lists {
    list-style: none;
    padding: 0;
}

.normal-lists li,
.number-lists li {
    font-size: 1.4rem;
    letter-spacing: 0.12em;
    line-height: 1.4;
    position: relative;
}

.normal-lists li + li,
.number-lists li + li {
    margin-top: 0.6rem;
}

.normal-lists--md li,
.number-lists--md li {
    font-size: 1.6rem;
}

.normal-lists a,
.number-lists a {
    text-decoration: underline !important;
    transition: opacity 0.7s;
}

@media (hover: hover) {
    .normal-lists a:hover,
    .number-lists a:hover {
        opacity: 0.6;
    }
}

/* --- リストドット位置調整 --- */
.normal-lists li {
    padding-left: 1em;
}

.normal-lists li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em; /* 0.9remからem指定に変更（フォントサイズに追従） */
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: currentColor;
}

/* --- リスト数字位置調整 --- */
.number-lists {
    counter-reset: my-counter;
}

.number-lists li {
    padding-left: 2.2em;
    counter-increment: my-counter;
}

.number-lists li::before {
    content: counter(my-counter, decimal-leading-zero) ".";
    position: absolute;
    left: 0;
    font-weight: bold;
}

@media screen and (max-width: 560px) {
    .normal-lists li,
    .number-lists li {
        font-size: 1.3rem;
        line-height: 1.6;
    }
    
    .normal-lists li + li,
    .number-lists li + li {
        margin-top: 1.2rem;
    }

    .normal-lists--md li,
    .number-lists--md li {
        font-size: 1.3rem;
    }
}

/*********************
TABLE (Definition List)
*********************/
.info-list {
  border-top: 1px solid #eee;
  margin: 0.5rem 0 0;
}

.info-list-row {
  display: flex;
  padding: 4.8rem 0;
  border-bottom: 1px solid var(--border-gray);
}

.info-list-label,
.info-list-content {
  font-family: var(--font-main-ja);
  font-weight: var(--normal);
}

.info-list-label {
  width: 22rem;
  flex-shrink: 0;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--bg-dark);
}

.info-list-content {
  flex: 1;
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: 0.07em;
  line-height: calc(35 / 14);
}

.info-list-content a {
  transition: opacity 0.3s;
}

@media (hover: hover) {
  .info-list-content a:hover {
    opacity: .7;
  }
}

@media screen and (max-width: 560px) {
  .info-list-row {
    flex-direction: column;
  }

  .info-list-label {
    width: 100%;
    margin-bottom: 2.5rem;
    font-size: 1.3rem;
  }

  .info-list-content {
    font-size: 1.3rem;
    line-height: 1.75;
    padding-left: 0.8rem;
  }
}


/******************************************
COMPANY
******************************************/
/*********************
ANIMATION
*********************/
.js-reveal-left {
  /* --- 制御パラメーター（デフォルト値） --- */
  --reveal-speed: 0.5s;
  --reveal-delay: 0s;
  --reveal-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-zoom-scale: 1.0;
  --reveal-zoom-speed: 0.8s;

  position: relative;
  overflow: hidden;
  
  clip-path: inset(0 100% 0 0);
  
  transition: clip-path var(--reveal-speed) var(--reveal-easing);
  transition-delay: var(--reveal-delay);
  will-change: clip-path;
}

.js-reveal-left.is-animated {
  clip-path: inset(0 0 0 0);
}

.js-reveal-left img {
  transform: scale(var(--reveal-zoom-scale));
  transition: transform var(--reveal-zoom-speed) var(--reveal-easing);
  transition-delay: var(--reveal-delay);
}

.js-reveal-left.is-animated img {
  transform: scale(1);
}

/*********************
LAYOUT
*********************/
.about-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 4rem;
  margin-top: 8rem;
}

.about-intro__left {
  width: 46rem;
  max-width:100%;
  min-width: 36rem;
}

.about-intro__head {
  margin-bottom: 6rem;
}

.about-intro__text {
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.08em;
}

.about-intro__text p {
    margin: 0;
}

.about-intro__text p + p {
    margin-top: 2rem;
}

.about-intro__btn {
  margin-top: 4rem;
}

.about-intro__right {
  display: flex;
  gap: 3rem;
  width: 100%;
  max-width: 63.8rem;
  align-items: flex-end;
}

/*********************
MEMBER CARD
*********************/
.about-member {
  width: calc((100% - 6rem) / 3);
}

.about-member__image {
  width: 100%;
  margin-bottom: 2rem;
}

.about-member__image img {
  width: 100%;
}

.about-member__name {
  font-size: 1.8rem;
  font-weight: var(--normal);
  font-style: oblique;
  line-height: 1.4;
  margin-bottom: 0.4rem;
  color: var(--text-gray2);
  letter-spacing: 0.015em;
}

.is-dark .section-title__en {
    color: var(--text-gray-h);
}

.is-dark .about-intro__text,
.is-dark .about-member__name,
.is-dark .about-member__position {
    color: var(--text-gray-p);
}

.is-dark .section-title__jp {
    color: #fff;
}

.about-member__position {
  font-size: 1.4rem;
  color: var(--text-gray2);
  letter-spacing: 0;
  margin: 0;
}

/* レスポンシブ */
@media screen and (max-width: 960px) {
  .about-intro { flex-direction: column; align-items: flex-start; gap: 12.3rem; }
  .about-intro__left { width: 100%; }
  .about-intro__right { flex-direction: column; gap: 3rem; max-width: 100%; min-width:0; }
  .about-member { width: 100%; display: flex; flex-direction: column; align-items: flex-end; }
  .about-member__name, .about-member__position { text-align: right; }
}

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

 /* =================================================================
    OLD: 〜2026/02/26
    旧コード
    ================================================================= */

/*********************
LAYOUT
*********************/
/* 3つ並びグリッドレイアウト */
.grid-3-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.8rem;
  width: 100%;
}

@media screen and (max-width: 1280px) {
  .grid-3-col {
    gap: 2.5rem;
  }
}

@media screen and (max-width: 960px) {
  .grid-3-col {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 560px) {
  .grid-3-col {
    gap: 1.5rem;
  }
}


/*********************
STAKKING PANEL
*********************/
/* 土台となるパネル（画面に固定される側） */
.stacking-base {
    position: sticky!important;
    top: 0;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 上から覆いかぶさるセクション（動いてくる側） */
.stacking-cover {
    position: relative;
    z-index: 2;
    background-color: #ffffff;
}
.index-page > section {
    background-color: #ffffff;
}
.index-page > section:nth-child(1)  { z-index: 1;  }
.index-page > section:nth-child(2)  { z-index: 2;  }
.index-page > section:nth-child(3)  { z-index: 3;  }
.index-page > section:nth-child(4)  { z-index: 4;  }
.index-page > section:nth-child(5)  { z-index: 5;  }
.index-page > section:nth-child(6)  { z-index: 6;  }
.index-page > section:nth-child(7)  { z-index: 7;  }
.index-page > section:nth-child(8)  { z-index: 8;  }
.index-page > section:nth-child(9)  { z-index: 9;  }
.index-page > section:nth-child(10) { z-index: 10; }
.index-page > section:nth-child(11) { z-index: 11; }
.index-page > section:nth-child(12) { z-index: 12; }
.index-page > section:nth-child(13) { z-index: 13; }
.index-page > section:nth-child(14) { z-index: 14; }


/*********************
STACKING INTERVIEW
*********************/
:root {
    --slant-height: 140px; 
    --layer-padding: 160px;
    --stack-point: 80px;   
    --stack-gap: 40px;
}
@media screen and (max-width: 960px) {
    :root {
        --layer-padding: 166px;
        --layer-padding: 90px;
        --slant-height: 60px;
        --stack-point: 50px; 
        --stack-gap: 25px;
    }
}

@media screen and (max-width: 560px) {
    :root {
        --layer-padding: 90px;
        --slant-height: 60px;
        --stack-point: 0px; 
        --stack-gap: 25px;
    } 
}

/* スタックセクション全体のコンテナ */
.stack-section {
    position: relative;
    /* padding-bottom を大きく取ることで、
        最後のレイヤーが固定されたまま上に抜けるための「遊び」を作ります */
    padding-bottom: 20rem; 
}

.stack-section::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 200px;
    bottom: 0;
    z-index: 2;
    background: #fff;
}

.is-dark.stack-section::after {
    background: var(--bg-dark-light);
}

/* 各レイヤーの共通設定 */
.layer {
    position: sticky;
    padding: var(--layer-padding) 0;
    box-sizing: border-box;
    clip-path: polygon(0 0, 100% var(--slant-height), 100% 100%, 0 calc(100% - var(--slant-height)));
    margin-top: calc(var(--slant-height) * -1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    top: 0;
}

.layer-title {
    padding-top: 9rem;
    padding-bottom: 0;
    justify-content: flex-start;
    clip-path: none;
    margin-bottom: -10rem;
}

/* 各レイヤーの top 位置を調整 */
.layer01 {
    margin-top: 0;
    background: #FAFAFA;
    z-index: 1;
    transform: translateY(calc(var(--stack-gap) + var(--stack-point)));
    clip-path: polygon(0 0, 100% var(--slant-height), 100% 107%, 0 1540px);
}

.layer::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 60px;
    bottom: -50px;
    left: 0;
}

.layer02 {
    background: #F1F1F1;
    z-index: 2;
    transform: translateY(calc(var(--stack-gap) * 2 + var(--stack-point)));
    clip-path: polygon(0 0, 100% var(--slant-height), 100% 107%, 0 1000px);
}

.layer03 {
    background: #E6E6E6;
    z-index: 3;
    transform: translateY(calc(80px + var(--stack-gap) + var(--stack-point)));
}

.layer01::after {background: #FAFAFA;}
.layer02::after {background: #F1F1F1;}
.layer03::after {background: #E6E6E6;}

.is-dark .layer01 {background: #1A1A1A;}
.is-dark .layer02 {background: #282828;}
.is-dark .layer03 {background: #595959;}

.is-dark .layer01::after {background: #1A1A1A;}
.is-dark .layer02::after {background: #282828;}
.is-dark .layer03::after {background: #595959;}



@media screen and (max-width: 960px) {
    .stack-section {
        padding-bottom: 50rem; 
    }
    .layer-content {
        padding-inline: 6rem;
    }
    .layer-title {
        position: relative;
        margin-bottom: 0;
    }
    .layer03 {
        transform: translateY(calc(50px + var(--stack-gap) + var(--stack-point)));
    }
}

@media screen and (max-width: 560px) {
    .stack-section {
        padding-bottom: 45rem; 
    }
    .stack-section::after {
        width: 100%;
        height: 400px;
    }
    .layer-content {
        padding-inline: 0rem;
    }
    .layer-title {
        padding-top: 8.5rem;
    }
    .layer03 {
        transform: translateY(calc(50px + var(--stack-gap) + var(--stack-point)));
    }
}


/*********************
HEADING
*********************/


/* 英文字タイトル */
.heading-en {
    font-size: 3rem;
    font-weight: var(--light);
    font-family: var(--font-main-en);
    color: var(--text-gray2);
    line-height: 2;
    letter-spacing: -0.005em;
}

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

}

@media screen and (max-width: 560px) {
    .heading-en {
        font-size: 2rem;
    }
}

/* 下層ページ セクションタイトル */
.page-h2-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page-h2-en {
    font-size: var(--fs-page-h2-en);
    font-family: var(--font-main-en);
    font-weight: var(--normal);
    letter-spacing: var(--ls-page-h2-en);
    color: var(--text-gray);
    display: block;
}

.page-h2 {
    font-size: var(--fs-page-h2-jp);
    font-weight: var(--normal);
    letter-spacing: var(--ls-page-h2-jp);
    color: var(--text-gray2);
}

.page-h2 span {
    font-family: var(--font-main-en);
}

.page-h2-simple {
    display: flex;
    align-items: baseline;
    gap: 1.1rem;
}

.page-h2-simple.page-h2-simple--white .page-h2-simple__en {
    color: var(--text-gray2);
}

.page-h2-simple.page-h2-simple--white .page-h2-simple__jp {
    color: var(--text-gray);
}

.page-h2-simple__en {
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -0.005em;
    text-transform: capitalize;
    font-family: var(--font-main-en);
    font-weight: var(--normal);
}

.page-h2-simple__jp {
    font-size: 1.8rem;
    font-weight: var(--normal);
    line-height: 1;
    letter-spacing: 0.12em;
}

.page-h3-wrap {

}

.page-h3-en {
    font-size: 1.6rem;
    font-family: var(--font-main-en);
    color: var(--text-gray);
    letter-spacing: 0.12em;
    line-height: 1.5;
    margin-bottom: 1.4rem;
    display: block;
}

.page-h3 {
    font-size: 2.4rem;
    font-weight: var(--normal);
    letter-spacing: 0.12em;
    line-height: 1.5;
    margin: 0;
}

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

@media screen and (max-width: 560px) {
    .page-h3-en {
        font-size: 1.3rem;
        margin-bottom: 1.4rem;
    }

    .page-h3 {
        font-size: 1.6rem;
    }
}

/* Basicコースページタイトル */
.course-title {
    
}
.course-title__en {
    font-size: 1.4rem;
    font-family: var(--font-main-en);
    color: var(--text-gray);
    letter-spacing: 0.44em;
    line-height: 1.5;
    margin-bottom: 1.4rem;
    font-weight: var(--normal);
}
.course-title__copy {
    font-size: 2.4rem;
    font-weight: var(--normal);
    letter-spacing: 0.12em;
    line-height: 1.5;
    margin: 0;
    margin-bottom: 0.5rem;
    color: var(--text-gray2);
}
.course-title__name,
.course-title__label {
    font-size: 1.6rem;
    font-weight: var(--normal);
    color: var(--text-gray2);
    letter-spacing: 0.12em;
    line-height: 2;
}
.course-title__label {
    font-family: var(--font-main-en);
    line-height: 1.5;
    color: var(--text-gray);
}

@media screen and (max-width: 960px) {
    .course-title__en {
        font-size: 1.3rem;
        letter-spacing: 0.2em;
        margin-bottom: 1rem;
    }
    .course-title__copy {
        font-size: 1.8rem;
        margin-bottom: 0.3rem;
    }
    .course-title__name,
    .course-title__label {
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 560px) {
    .course-title__en {
        font-size: 1.3rem;
        letter-spacing: 0.2em;
        margin-bottom: 1rem;
    }
    .course-title__copy {
        font-size: 1.6rem;
        margin-bottom: 0.3rem;
    }
    .course-title__name,
    .course-title__label {
        font-size: 1.1rem;
    }
}

/* シングルページタイトル */
.single-custom-title {
    font-size: 1.4rem;
    font-family: var(--font-main-en);
    font-weight: var(--medium);
    letter-spacing: 0.05em;
    line-height: 1.7;
}

/*********************
BRIDGE SECTION
*********************/
.bridge {
    
}
.bridge.bridge01 {
    padding-bottom: 27.4rem;
}
.bridge.bridge02 {
    padding-bottom: 32.4rem;
}
.bridge__bg {
    background: var(--bg-blue);
    height: 66vh;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-bottom: 3.3rem;
}
.bridge-text {
    font-size: 2.2rem;
    font-family: var(--font-main-ja2);
    font-weight: var(--medium);
    letter-spacing: -0.04em;
    line-height: 1.67;
    position: absolute;
}
.bridge-text01 {
    top: -15.5rem;
    left: -25rem;
    transform: rotate(-1.38deg);
    text-align: right;
}
.bridge-text02 {
    top: -8.7rem;
    right: -39rem;
    transform: rotate(-7.23deg);
    width: 32.9rem;
}
.bridge-text01.bridge-text03 {
    top: -13.5rem;
    left: -23rem;
    transform: rotate(-16.38deg);
    text-align: center;
}
.bridge-text02.bridge-text04 {
    top: -7.7rem;
    right: -32rem;
    width: 24.9rem;
}
.bridge-text02 p {
    margin: 0;
}
.bridge-text02 p:nth-child(1) {
    text-align: left;
}
.bridge-text02 p:nth-child(2) {
    text-align: center;
}
.bridge-text02 p:nth-child(3) {
    text-align: right;
}
.bridge-text02.bridge-text04 p:nth-child(3) {
    text-align: center;
}
.bridge-image01 {
    position: absolute;
    bottom: 0;
    left: calc(50% + 20rem);
    transform: translateX(-50%);
}
.bridge-image02 {
    position: absolute;
    bottom: 0;
    left: -5rem;
}
.bridge-image01::before,
.bridge-image01::after,
.bridge-image02::before,
.bridge-image02::after {
    position: absolute;
    content: '';
    width: 2.35rem;
    height: 1px;
    background-color: #4D4D4D;
}
.bridge-image01::before {
    top: -4.2rem;
    left: 5rem;
    transform: rotate(95deg);
}
.bridge-image01::after {
    top: 5rem;
    left: -7rem;
    transform: rotate(5deg);
}
.bridge-image02::before {
    top: -6.2rem;
    right: 1.5rem;
    transform: rotate(95deg);
}
.bridge-image02::after {
    top: 7rem;
    right: -8.5rem;
    transform: rotate(5deg);
}
.bridge-logo {
    text-align: right;
}

/* --- 初期状態（隠しておく） --- */

/* 人の画像：下からポップに登場 */
.bridge-image01 img {
    width: 29rem;
    opacity: 0;
    transform: translateY(60px) scale(1);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.075);
    will-change: transform, opacity;
}
.bridge-image02 img {
    width: 23rem;
    opacity: 0;
    transform: translateX(-60px) scale(1);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.075);
    will-change: transform, opacity;
}

/* 吹き出しテキスト：膨らんで登場 */
.bridge-text {

}
.bridge-text01 {
    opacity: 0;
    transform: rotate(-1.38deg) scale(0);
    transform-origin: bottom right; /* 画像に近い側を起点に */
    transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 0.3s;
    will-change: transform, opacity;
}
.bridge-text02 {
    opacity: 0;
    transform: rotate(-7.23deg) scale(0);
    transform-origin: bottom left; /* 画像に近い側を起点に */
    transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 0.3s;
    will-change: transform, opacity;
}
.bridge-text01.bridge-text03 {
    transform: rotate(-16.38deg) scale(0);
}

/* 装飾線（疑似要素）：テキスト方向へ伸びる */
.bridge-image01::before,
.bridge-image01::after,
.bridge-image02::before,
.bridge-image02::after {
    opacity: 0;
    transition: opacity 0.3s ease-out, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0.3s; 
    will-change: transform, opacity;
}

/* 上の線：画像（下）を起点に、テキスト（上）へ伸びる */
.bridge-image01::before,
.bridge-image02::before {
    /* 角度95deg（垂直に近い状態）で、下側を固定 */
    transform: rotate(95deg) scaleX(0);
    transform-origin: right;
}

/* 下の線：画像（右）を起点に、テキスト（左）へ伸びる */
.bridge-image01::after {
    transform: rotate(5deg) scaleX(0);
    transform-origin: right;
}

.bridge-image02::after {
    transform: rotate(5deg) scaleX(0);
    transform-origin: left;
}

/* --- 実行状態（.is-visibleが付与された時） --- */

.bridge-image01.is-visible img {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.bridge-image02.is-visible img {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.bridge-image01.is-visible .bridge-text01 {
    opacity: 1;
    transform: rotate(-1.38deg) scale(1);
}

.bridge-image02.is-visible .bridge-text02 {
    opacity: 1;
    transform: rotate(-7.23deg) scale(1);
}

.bridge-image01.is-visible .bridge-text01.bridge-text03 {
    opacity: 1;
    transform: rotate(-16.38deg) scale(1);
}

.bridge-image01.is-visible::before,
.bridge-image02.is-visible::before {
    opacity: 1;
    transform: rotate(95deg) scaleX(1);
}

.bridge-image01.is-visible::after,
.bridge-image02.is-visible::after {
    opacity: 1;
    transform: rotate(5deg) scaleX(1);
}

@media screen and (min-width: 1920px) {
    .bridge-image02 {
        left: calc(50% - 87rem);
        transform: translateX(-50%);
    }
}

@media screen and (max-width: 960px) {
    .bridge01 {
        padding-bottom:13.4rem;
    }
    .bridge02 {
        padding-bottom:13.4rem;
    }
    .bridge__bg {
        padding-block:1.2rem;
    }
    .bridge-text {
        font-size: 1.8rem;
    }
    .bridge-image01 {
        position: absolute;
        bottom: 0;
        left: auto;
        right: 0.2rem;
        transform: none;
    }
    .bridge-image01 img {
        width: 23.3rem;
    }
    .bridge-image02 img {
        width: 16rem;
    }
    .bridge-image01::before,
    .bridge-image01::after,
    .bridge-image02::before,
    .bridge-image02::after {
        width: 1.3rem;
    }
    .bridge-image01::before,
    .bridge-image01::after {
        width: 2.9rem;
    }
    .bridge-image02::before {
        transform: rotate(65deg) scaleX(0);
    }
    .bridge-image01::before {
        top: 1.2rem;
        left: -8rem;
        transform: rotate(45deg);
    }
    .bridge-image01::after {
        top: -5rem;
        left: 12rem;
        transform: rotate(-62deg);
    }
    .bridge-image02::before {
        top: -3.2rem;
        right: 8rem;
        transform: rotate(95deg);
    }
    .bridge-image02::after {
        top: -1rem;
        right: -5.5rem;
        transform: rotate(5deg);
    }
    .bridge-image01.is-visible::before {
        transform: rotate(45deg) scaleX(1);
    }
    .bridge-image02.is-visible::before {
        transform: rotate(65deg) scaleX(1);
    }
    .bridge-image01.is-visible::after {
        transform: rotate(-62deg) scaleX(1);
    }
    .bridge-image02.is-visible::after {
        transform: rotate(-29deg) scaleX(1);
    }
    .bridge-text01 {
        top: -15.5rem;
        left: -10rem;
        transform: rotate(-3.8deg);
    }
    .bridge-text01.bridge-text03 {
        top: -14.5rem;
        left: -8rem;
        transform: rotate(-13.38deg);
    }
    .bridge-image01.is-visible .bridge-text01 {
        opacity: 1;
        transform: rotate(-3.8deg) scale(1);
    }
    .bridge-image01.is-visible .bridge-text01.bridge-text03 {
        transform: rotate(-13.38deg) scale(1);
    }
    .bridge-text02 {
        top: -13.5rem;
        right: -13rem;
        transform: rotate(-6.68deg);
        width: 20.6rem;
    }
    .bridge-text02.bridge-text04 {
        top: -12.7rem;
        right: -16rem;
    }
    .bridge-text02 p {
        margin: 0;
    }
    .bridge-text02 p:nth-child(1) {
        text-align: left;
    }
    .bridge-text02 p:nth-child(2) {
        text-align: center;
    }
    .bridge-text02 p:nth-child(3) {
        text-align: center;
    }
    .bridge-logo img {
        width: 13rem;
    }
    .bridge-logo--sp-sm {
        text-align: left;
    }
}

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

}

/*********************
FOOTER FIXED CTA
*********************/
/* 背後に隠れるCTAの設定 */
.footer-reveal-cta {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1; /* フッターの下に潜り込ませる */
  padding: 19.6rem 0 10.2rem; /* 必要に応じて調整 */
  background: var(--bg-blue);
  visibility: hidden; /* 初期状態（スクロール前）は隠す設定を推奨（後述） */
  animation: reveal-fix 0.1s forwards;
  overflow: hidden;
}

/* スクロール時にパッと表示されないための工夫 */
@keyframes reveal-fix {
  to { visibility: visible; }
}

.footer-reveal-cta__btn {
    width: 40.2rem;
    margin-left: auto;
}

.footer-reveal-cta__image {
    position: absolute;
    left: calc(50% - 27rem);
    transform: translateX(-50%);
    bottom: 0;
}
.footer-reveal-cta__image img {
    width: 21rem;
}
.footer-reveal-cta__image::before,
.footer-reveal-cta__image::after {
    position: absolute;
    content: '';
    width: 2.35rem;
    height: 1px;
    background-color: #4D4D4D;
}
.footer-reveal-cta__image::before {
    top: -3.2rem;
    right: 4.5rem;
    transform: rotate(110deg);
}
.footer-reveal-cta__image::after {
    top: 8rem;
    right: -2rem;
    transform: rotate(5deg);
}
.footer-reveal-cta__text {
    width: max-content;
    transform: rotate(-6.68deg);
    top: -4.5rem;
    right: -30rem;
    color: var(--text-gray2);
}

.footer-reveal-cta__text p {
    margin: 0;
}

.footer-reveal-cta__text p + p {
    padding-left: 2rem;
}

.footer-reveal-cta__logo {
    position: absolute;
    left: 3.7rem;
    bottom: 2.4rem;
}

@media screen and (min-width: 1920px) {
   .footer-reveal-cta__logo {
        width: 100%;
        max-width: 192rem;
        left: calc(50% + 3.7rem);
        transform: translateX(-50%);
    } 
}

@media screen and (max-width: 1280px) {
    .footer-reveal-cta__image {
        left: 0;
        transform: none;
    }
    .footer-reveal-cta__logo {
        left: auto;
        right: var(--container-side);
    }
}

@media screen and (max-width: 960px) {
    .footer-reveal-cta {
        padding: 10.9rem 0 19.5rem;
    }
    .footer-reveal-cta__image {
        left: calc(50% - 21rem);
        transform: translateX(-50%);
    }
    .footer-reveal-cta__image img {
        width: 15.5rem;
    }
    .footer-reveal-cta__text {
        top: auto;
        right: auto;
        position: relative;
        transform: rotate(-3.2deg);
        margin: 0 auto 3.8rem;
        font-size: 2.2rem;
    }
    .footer-reveal-cta__btn {
        width: 36.8rem;
        margin: 0 auto;
    }
    .footer-reveal-cta__image::before {
        top: -3.2rem;
        right: 8.5rem;
        transform: rotate(80deg);
    }
    .footer-reveal-cta__image::after {
        top: 1rem;
        right: -4rem;
        transform: rotate(-31deg);
    }
}

@media screen and (max-width: 560px) {
    .footer-reveal-cta__image {
        left: 0.6rem;
        transform: none;
    }
    .footer-reveal-cta__image::before,
    .footer-reveal-cta__image::after {
        width: 1.45rem;
    }
    .footer-reveal-cta__image::before {
        top: -1.2rem;
        right: 9.5rem;
        transform: rotate(80deg);
    }
    .footer-reveal-cta__image::after {
        top: 1.5rem;
        right: 0rem;
        transform: rotate(-41deg);
    }
    .footer-reveal-cta__text {
        transform: rotate(-3.2deg);
        top: auto;
        right: auto;
        font-size: 1.8rem;
    }
    .footer-reveal-cta__btn {
        width: 24.4rem;
        margin: 0 auto;
    }
    .footer-reveal-cta__logo {
        right: 1.4rem;
        bottom: 1.5rem;
    }
    .footer-reveal-cta__logo img {
        width: 11rem;
    }
}


/*********************
BUTTON
*********************/
/* ボタンラッパー */
.btn-wrap {
   margin-top: 1.5em;
   width: 100%;
}

/* ボタン共通（ノーマル） */
.btn {
    position: relative;
    display: block;
    width: fit-content;
    border: 1px solid var(--text-gray2);
    border-radius: 100px;
    font-size: 1.4rem;
    font-family: var(--font-main-en);
    font-weight: var(--normal);
    letter-spacing: 0.12em;
    padding: 0.8rem 6.3rem 0.8rem 2.8rem;
    color: var(--text-gray2);
    background: #fff; 
    overflow: hidden;
    z-index: 1;
    transition: all .3s cubic-bezier(.79, .17, .15, .96);
    text-decoration: none;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--text-gray2);
    transform: scaleX(0);
    transform-origin: right; 
    transition: transform 0.3s cubic-bezier(0.79, 0.17, 0.15, 0.96);
    z-index: -1;
}

.btn-icon {
    position: absolute;
    right: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    z-index: 2;
}

.btn-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: 50%;
    transform: scale(0);
    transition: transform .3s cubic-bezier(.79, .17, .15, .96);
    z-index: -1;
}

.btn-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-30%, -50%);
    border-style: solid;
    border-top: 2.5px solid transparent;
    border-bottom: 2.5px solid transparent;
    border-left: 5px solid var(--bg-dark);
    border-right: 0;
    transition: transform 0.3s cubic-bezier(0.79, 0.17, 0.15, 0.96);
}

.btn-icon.btn-icon--external {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon.btn-icon--external img {
    width: 0.9rem;
}

.btn-icon.btn-icon--external::after {
    display: none;
}

@media (hover: hover) {
    .btn:hover {
        color: #fff;
    }
    .btn:hover::before {
        transform: scaleX(1);
        transform-origin: left;
    }
    .btn:hover .btn-icon::before {
        transform: scale(1);
        transition-delay: 0.15s; 
    }
    .btn:hover .btn-icon::after {
        border-left-color: var(--bg-dark);
    }
}

/* 背景透明バリエーション */
.btn--transparent {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

.btn--transparent::before {
    background: #fff; 
}

.btn--transparent .btn-icon::before {
    background: var(--text-gray2);
}

.btn--transparent .btn-icon::after {
    border-left-color: #fff;
}
/* 透明版のみホバー時の色反転設定 */
@media (hover: hover) {
    .btn--transparent:hover {
        color: var(--text-gray2); /* テキストをグレーに */
    }
    .btn--transparent:hover::before {
        background: #fff; /* 背景が白く流れる */
    }
    .btn--transparent:hover .btn-icon::before {
        background: var(--text-gray2); /* 円がグレーになる */
    }
    .btn--transparent:hover .btn-icon::after {
        border-left-color: #fff; /* 矢印が白くなる */
    }
}

/* 背景グレー・文字白バリエーション（反転：アイコン白丸） */
/* 1. ボタン本体（背景グレー・文字白） */
.btn--reverse {
    background: var(--text-gray2);
    border-color: var(--text-gray2);
    color: #fff;
}

.btn--reverse::before {
    background: #fff; /* ホバー時に流れてくる白背景 */
}

/* 2. アイコン枠（ここは常に表示。サークルにはしない） */
.btn--reverse .btn-icon {
    background: transparent;
}

/* 3. 【初期状態の白サークル】 */
.btn--reverse .btn-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff; 
    border-radius: 50%;
    transform: scale(1); /* 最初は見えている */
    transition: transform 0.3s cubic-bezier(.79, .17, .15, .96);
    z-index: 1;
}

/* 4. 【ホバー時に出てくるグレーサークル】 */
/* 新しく擬似要素として定義し、白サークルの後ろに隠しておく */
.btn--reverse .btn-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--text-gray2);
    border-radius: 50%;
    transform: scale(0); /* 最初は小さい状態 */
    transition: transform 0.3s cubic-bezier(.79, .17, .15, .96);
    z-index: 2; /* 白サークルの上に重ねる */
}

/* 5. 【矢印アイコン】 */
/* z-indexを一番上にして、常に表示されるようにする */
.btn--reverse .btn-icon-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-30%, -50%);
    border-style: solid;
    border-top: 2.5px solid transparent;
    border-bottom: 2.5px solid transparent;
    border-left: 5px solid var(--text-gray2); /* 初期はグレー */
    transition: border-left-color 0.3s ease;
    z-index: 3;
}

/* --- ホバー時の挙動 --- */
@media (hover: hover) {
    .btn--reverse:hover {
        color: var(--text-gray2);
    }

    .btn--reverse:hover::before {
        transform: scaleX(1);
        transform-origin: left;
    }

    /* グレーのサークルを小さい状態から大きくして出現させる */
    .btn--reverse:hover .btn-icon::after {
        transform: scale(1);
        transition-delay: 0.15s; /* 背景が白くなった後に広がる */
    }

    /* 矢印を白に反転 */
    .btn--reverse:hover .btn-icon-inner {
        border-left-color: #fff;
        transition-delay: 0.15s;
    }
}

/* 背景黒バリエーション */
.btn--black {
    background: #000;
    border-color: #000;
    color: #fff;
}

/* ホバー時にスライドしてくる背景（白） */
.btn--black::before {
    background: #fff;
}

/* 1. アイコンのベース設定（初期状態：白い丸に黒い矢印） */
.btn--black .btn-icon::before {
 
}

.btn--black .btn-icon::after {
    border-left-color: #fff; /* 初期矢印は黒 */
    z-index: 3;
}

/* 2. ホバー時に出現する黒いサークル用の要素 */
/* すでに共通で after が矢印に使われているため、
   新しく span 等を追加しない場合は擬似要素の重なりで制御します */
.btn--black .btn-icon-inner {
    position: absolute;
    inset: 0;
    background: #000;
    border-radius: 50%;
    transform: scale(0); /* 初期は非表示 */
    transition: transform 0.3s cubic-bezier(.79, .17, .15, .96);
    z-index: 1;
}

/* --- 白ボーダー --- */
.btn.btn--border {
    border: 1px solid #fff;
}

/* --- 日本語ボタン --- */
.btn.btn--jp {
    font-size: 1.3rem;
    padding: .7rem 5.3rem .6rem 1.9rem;
}

/* --- 日本語ボタン --- */
.btn.btn--course {
    font-size: 1.3rem;
    padding: .9rem 4.9rem .7rem 1.9rem;  
}

/* --- ホバー時の挙動 --- */
@media (hover: hover) {
    .btn--black:hover {
        color: #000; /* テキストを黒に反転 */
    }

    .btn--black:hover::before {
        transform: scaleX(1);
        transform-origin: left;
    }

    /* 黒いサークルを少し遅れて出現させる */
    .btn--black:hover .btn-icon-inner {
        transform: scale(1);
        transition-delay: 0.15s;
    }

    /* 矢印を白く反転させる */
    .btn--black:hover .btn-icon::after {
        border-left-color: #fff;
        transition-delay: 0.15s;
    }
}

/* buttonタグ特有のリセットと微調整 */
button.btn {
    appearance: none;       /* ブラウザ標準のボタン外観を無効化 */
    -webkit-appearance: none;
    border: 1px solid var(--bg-dark); /* CSS変数が効かない場合は直接 #000 */
    cursor: pointer;
    line-height: 1.5;       /* テキストの垂直位置調整 */
    text-align: left;       /* aタグの挙動に合わせる */
}

/* ヘッダー内フォームボタン専用の調整 */
.header-form-btn {
    width: fit-content;    /* 親のformの幅に引っ張られないようにする */
    display: block;        /* 元の .btn の設定に合わせる */
}

/* 560px以下のモバイルサイズでaタグと同じパディングを強制適用 */
@media screen and (max-width: 560px) {
    button.btn.btn--sp-sm {
        padding: 0.4rem 1.8rem !important; /* 強制的に上書き */
    }
}

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

}

@media screen and (max-width: 560px) {
    .btn.btn--course {
        padding: 0.3rem 1.4rem 0.25rem 1.8rem;
        font-size: 1.2rem;
    }
}

/* ==========================================
   ノーマルボタン
   ========================================== */
.buy-button,
.buy-button-reverse,
.buy-button-outline {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 33rem;
  margin: 0 auto;
  padding: 1.4rem 2rem;
  border-radius: 999px;
  font-size: 1.6rem;
  font-family: var(--font-main-en);
  font-weight: var(--normal);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s cubic-bezier(0.79, 0.17, 0.15, 0.96), 
              border-color 0.3s ease;
  border: 1px solid #000;
  background: none; /* 基本は背景なしに統一 */
}

/* 疑似要素（スライド背景）の共通設定 */
.buy-button::before,
.buy-button-reverse::before,
.buy-button-outline::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  z-index: -1;
}

/* ホバー時の共通挙動 */
@media (hover: hover) {
  .buy-button:hover::before,
  .buy-button-reverse:hover::before,
  .buy-button-outline:hover::before {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* サイズバリエーション（共通） */
.buy-button--md,
.buy-button-reverse--md,
.buy-button-outline--md {
  padding: 1.2rem 1.8rem;
  font-size: 1.4rem;
}

/* 1. 通常版（黒背景 → 白へ） */
.buy-button {
  background-color: #000;
  color: #fff;
  border-color: #000;
}
.buy-button::before { background: #fff; }
@media (hover: hover) {
  .buy-button:hover { color: #000; }
}

/* 2. 反転版（白背景 → 黒へ） */
.buy-button-reverse {
  background-color: #fff;
  color: #000;
  border-color: #000;
}
.buy-button-reverse::before { background: #000; }
@media (hover: hover) {
  .buy-button-reverse:hover { color: #fff; }
}

/* 3. 白色アウトライン版（背景透過 → 白背景へ） */
.buy-button-outline {
  background-color: transparent;
  color: #fff;
  border-color: #fff; /* 枠線を白に */
}
.buy-button-outline::before { background: #fff; } /* ホバー時に白で塗りつぶす */
@media (hover: hover) {
  .buy-button-outline:hover { color: #000; } /* 塗りつぶされたら文字を黒に */
}

@media screen and (max-width: 560px) {
  .buy-button,
  .buy-button-reverse,
  .buy-button-outline {
    padding: 1.1rem 2rem;
    font-size: 1.4rem;
    max-width: 28rem;
  }
}

/*********************
CARD
*********************/
/* CVカード */
.link-card {
  display: flex;
  align-items: center;
  position: relative;
  padding: 2.6rem 2rem;
  background-color: #ffffff;
  border-radius: 1.2rem;
  color: #000;
  overflow: hidden;
  transition: color 0.3s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  z-index: 1;
}
.link-card.link-card--sm {

}
.link-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--text-gray2);
  transform: scaleX(0);
  transform-origin: right; 
  transition: transform 0.3s cubic-bezier(0.79, 0.17, 0.15, 0.96);
  z-index: -1;
}

.link-card__col .link-card__icon {
    margin-bottom: 1.5rem;
}

.link-card__col.link-card__col--md {
    display: flex;
    align-items: center;
}

.link-card__col.link-card__col--md .link-card__icon {
    margin-bottom: 0;
}

.link-card__icon {
    margin-right: 1.9rem;
}

.link-card__icon img {
  max-width: 100%;
  transition: filter 0.2s ease; /* ホバー時の色変化を滑らかに */
  position: relative;
  z-index: 2;
}

.link-card__icon .emoji {
  font-size: 24px;
}

.link-card__content {
    letter-spacing: 0.12em;
}

.link-card__title {
  margin-bottom: 0.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  color: #000;
  font-weight: var(--bold);
}

.link-card__text {
  margin: 0;
  font-size: 1.5rem;
  font-weight: var(--normal);
  color: var(--text-gray2);
  line-height: 1.6;
}

.link-card__arrow {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    position: relative;
    z-index: 0;
    overflow: hidden;
    background: transparent; /* 本体は透明 */
    margin-left: auto;
}
.link-card.link-card--sm .link-card__arrow {
    align-self: flex-end;
}
.link-card__arrow-gray {
    display: block!important;
    width: 4.4rem;
    height: 4.4rem;
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    background: var(--border-gray-light);
    border-radius: 50%;
    z-index: -2;
}
.link-card.link-card--sm .link-card__arrow-gray {
    top: auto;
    right: 2rem;
    bottom: 2.6rem;
    transform: none;
}
.link-card__arrow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: 50%;
    z-index: 2;
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.79, 0.17, 0.15, 0.96);
}
.link-card__arrow img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.275rem;
    z-index: 3;
}

@media (hover: hover) {
    .link-card:hover::before {
        transform: scaleX(1);
        transform-origin: left;
    }
    .link-card:hover {
        color: #fff;
    }
    .link-card:hover .link-card__icon img {
        filter: brightness(0) invert(1);
    }
    .link-card:hover .link-card__title,
    .link-card:hover .link-card__text {
        color: #fff;
    }

    .link-card:hover .link-card__arrow::before {
        transform: scale(1);
        transition-delay: 0.15s;
    }
}

/* レイアウト維持のための微調整 */
.link-card__content, 
.link-card__icon, 
.link-card__arrow {
  position: relative;
  z-index: 2; /* 背景より上に表示 */
  transition: all 0.4s ease;
}

.link-card__arrow {
  transition: background 0.3s ease;
}

@media screen and (max-width: 1280px) {
    .link-card {
        align-items: flex-end;
        padding: 2rem 1.6rem;
    }
    .link-card__col.link-card__col--md {
        flex-direction: column;
        align-items: flex-start;
    }
    .link-card__col.link-card__col--md .link-card__icon {
        margin-bottom: 1.5rem;
    }
    .link-card__title {
        font-size: 1.5rem;
    }
    .link-card__text {
        font-size: 1.4rem;
    }
    .link-card__arrow-gray {
        top: auto;
        right: 1.6rem;
        bottom: 2rem;
        transform: none;
    }
}

@media screen and (max-width: 960px) {
    .link-card {
        align-items: center;
        padding: 3.6rem 2.4rem;
    }
    .link-card.link-card--sm {
        padding: 2rem;
    }
    .link-card__col.link-card__col--md {
        flex-direction: row;
        align-items: center;
    }
    .link-card__col.link-card__col--md .link-card__icon {
        margin-bottom: 0;
    }
    .link-card__arrow-gray {
        top: 50%;
        right: 2.4rem;
        transform: translateY(-50%);
        bottom: auto;
    }
}

@media screen and (max-width: 560px) {
    .link-card {
        border-radius: 1rem;
        padding: 2rem;
    }
    .link-card.link-card--sm {
        border-radius: 0.5rem;
        padding: 1rem 1.25rem 1rem 2rem;
    }
    .link-card__col .link-card__icon {
        display: flex;
        margin-bottom: 0;
    }
    .link-card__icon img {
        width: 3rem;
    }
    .link-card.link-card--sm .link-card__icon img {
        width: 2.2rem;
    }
   .link-card__title {
        margin-bottom: 0;
        font-size: 1.4rem;
        letter-spacing: 0.1em;
        color: var(--text-black);
        margin-left: 1rem;
    }
    .link-card__arrow {
        width:  1.8rem;
        height: 1.8rem;
        border-radius: 0;
    }
    .link-card.link-card--sm .link-card__arrow {
        align-self: center;
    }
    .link-card__arrow::before,
    .link-card__arrow::after {
        display: none;
    }
    .link-card__arrow-gray {
        display:none!important;
    }
}


/*********************
LIST
*********************/
/*********************
IMAGE
*********************/
/*********************
FIRST VIEW
*********************/
/* FV全体の基本設定 */
.index-firstview {
  position: relative;
  background-color: #f5f5f7; /* ★ここに「ローディングに設定していた背景色」を指定 */
  overflow: hidden;
}

/* 幕（マスク）：最初は全画面を覆う */
.fv__mask {
  position: absolute;
  inset: 0;
  background-color: #f5f5f7; /* 背景色と同じ色 */
  z-index: 10; /* 動画より上、コピーより下 */
  transition: transform 1.2s cubic-bezier(0.86, 0, 0.07, 1);
}

/* 文字：幕よりも上に配置して、背景色の状態でも見えるようにする */
.fv__copy {
  position: relative;
  z-index: 20; /* 幕(10)よりも高く設定 */
}

/* ロード完了時：幕が上に上がる */
.index-firstview.is-loaded .fv__mask {
  transform: translateY(-100%);
}

/* 下層ページの真っ白対策：遷移中クラスのデフォルト設定 */
body.is-transitioning {
  /* 遷移演出用のスタイルがあれば記述。真っ白で止まる場合はここを確認 */
}


.fv {
    /* 無限ループの線（スクロール明示） */ 
    --fv-line-loop-easing: 3000ms cubic-bezier(0.86, 0, 0.07, 1) infinite;;
}

/* 幕：FVの最前面に配置 */
.fv__mask {
    position: absolute;
    inset: 0;
    background-color: #fff; /* 背景色 */
    z-index: 10; /* 動画(1)や文字(5)より高く設定 */
    transition: transform 1.2s cubic-bezier(0.86, 0, 0.07, 1);
    transform: translateY(0);
}

/* ロード完了：幕が上がる */
.fv.is-loaded .fv__mask {
    transform: translateY(-100%);
}

.fv__container {
    position: relative;
    width: 100%;
    /* max-width: 100%; */
    /* height: calc(100vh - var(--header-height)); */
    height: 100svh;
    padding-inline: var(--container-side)!important;
}

.fv__movie {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100svh;
    z-index: 1;
    border: 0.4rem solid #fff;
}

.fv__movie-lower {
    border: none!important;
}

.fv__movie-lower::after {
    background: rgba(0,0,0, 0.2);
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    top: 0;
    left: 0;
}

.fv__movie video {
    width: 100%;
    /* height: calc(100vh - var(--header-height)); */
    height: 100svh;
    object-fit: cover;
}

.fv__copy {
    font-family: var(--font-main-en);
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
}
.fv__copy.fv__copy-lower {
    top:auto;
    transform: none;
    bottom: 9.6rem;
}

.fv__copy-lower .fv_copy-main {
    font-size: 4.8rem;
    letter-spacing: 0.09em;
}

.fv__copy-sub {
    font-size: 1.4rem;
    font-weight: var(--normal);
    letter-spacing: 0.95em;
    line-height: 1;
    margin: 0;
    margin-bottom: 1.7rem;
    color: #fff;
}

.fv_copy-main {
    font-size: 2.4rem;
    font-weight: var(--light);
    letter-spacing: 0.42em;
    line-height: 1;
    margin: 0;
}

.fv_copy-jp {
    font-family: var(--font-main-ja);
    font-size: 1.6rem;
    font-weight: var(--bold);
    color: #fff;
    letter-spacing: 0.12em;
    line-height: 2;
}

@media screen and (min-width: 1920px) {
    .fv__copy {
        top: auto;
        transform: none;
        bottom: 8rem;
    }
}

@media screen and (max-width: 960px) {
    .fv__copy-sub {
        font-size: 1.2rem;
        margin-bottom: 1.4rem;
        /* letter-spacing: 0.23em; */
    }

    .fv_copy-main {
        font-size: 2rem;
    }

    .fv__copy-lower .fv_copy-main {
        font-size: 3.8rem;
    }
}

@media screen and (max-width: 560px) {
   .fv__copy.fv__copy-lower {
        bottom: 4.1rem;
    }
    .fv_copy-main {
        font-size: 2rem;
        letter-spacing: 0.23em;
    }
    .fv_copy-main-lower {
        font-size: 3rem;
    }
    .fv__copy-sub {
        font-size: 1rem;
        letter-spacing: 0.9em;
    }
    .fv_copy-jp-lower {
        font-size: 1.2rem;
        letter-spacing: 0.12em;
        font-weight: var(--normal);
    }
    .fv__copy-lower .fv_copy-main {
        font-size: 3rem;
    }
}

/* スクロールガイドのコンテナ */
.fv__scroll {
    position: absolute;
    right: 7.6rem;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

/* 線の通り道（右下固定のガイド） */
.fv__scroll-line {
    position: relative;
    width: 1px;
    height: 14.2rem;
    /* 画面上部から降ってくる様子を見せるため */
    overflow: visible; 
}

/* 動く棒本体 */
.fv__scroll-line::before,
.fv__scroll-line::after {
content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
}
.fv__scroll-line::before {
    opacity: 0.3;
}

.fv__scroll-line::after {
    -webkit-animation: scroll-infinite var(--fv-line-loop-easing);
    animation: scroll-infinite var(--fv-line-loop-easing);
}
/* 親要素に is-scroll-active がついたらアニメーション開始 */

@keyframes scroll-infinite {
  0% {
-webkit-transform: scale3d(1, 0, 1);
    transform: scale3d(1, 0, 1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
  50% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
  50.1% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
  }
  100% {
    -webkit-transform: scale3d(1, 0, 1);
    transform: scale3d(1, 0, 1);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
  }
}

@media screen and (min-width: 1920px) {
    .fv__scroll {
        right: calc(50% - 92rem);
        transform: translateX(50%);
    }
}

@media screen and (max-width: 960px) {
    .fv__scroll {
        right: 4.6rem;
    }
}

@media screen and (max-width: 560px) {
   .fv__scroll {
        right: 4.7rem;
        bottom: 0;
    }
    .fv__scroll-line {
        height: 14rem;
        background: none;
    }
    .fv__scroll-line::after {
        background: #d5d5d5;
    }
}

/*********************
FVアニメーション用 CSS
*********************/
/* --- Main: 1文字ずつの設定 --- */
.fv_copy-main .char {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(20px);
  transition: 
    opacity 0.4s ease, 
    filter 0.5s ease, 
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  /* 0.05s刻みで時差をつける */
  transition-delay: calc(var(--char-index) * 0.01s);
  will-change: opacity, filter, transform;
}

.is-main-active .fv_copy-main .char {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* --- Sub: 塊での設定 --- */
.fv__copy-sub {
  opacity: 0;
  transform: translateY(15px); /* 少しだけ下から */
  transition: 
    opacity 0.6s ease, 
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-sub-active .fv__copy-sub {
  opacity: 1;
  transform: translateY(0);
}

/* --- UI要素（ヘッダー・ロゴ・スクロール） --- */
.header-wrapper {
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.header-wrapper.is-header-frame-active {
  opacity: 1;
  transform: translateY(0);
}

.header__heading-logo-wrapper {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.is-logo-active .header__heading-logo-wrapper {
  opacity: 1;
}

.fv__scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}
.fv__scroll.is-scroll-active {
  opacity: 1;
  transform: translateY(0);
}



/*********************
TOP COURSE
*********************/
/* コース */
.course {
    height: 100%;
    padding: 4.5rem 3.5rem 7rem 10rem;
    position: relative;
}

.course__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    max-width: 1920px;
    margin: 0 auto;
    pointer-events: auto; /* 中身のリンクやボタンだけクリック可能にする */
}

.course__desc {
    font-size: 3.6rem;
    font-family: var(--font-main-en);
    font-weight: var(--light);
    color: var(--border-gray);
    letter-spacing: -0.005em;
    line-height: 1;
    margin: 0 2rem 0 0;
    text-align: right;
}

.course__content {
    margin-top: auto;
    margin-bottom: 10rem;
    transform: translateY(calc(30px * (1 - var(--scroll-progress, 0))));
    will-change: transform;
}

.course__type {
    font-size: 1.6rem;
    font-family: var(--font-main-en);
    font-weight: var(--light);
    color: var(--border-gray);
    letter-spacing: 0.09em;
    line-height: 1;
    margin: 0;
    margin-bottom: 2.2rem;
}

.course__copy {
    font-size: 2.4rem;
    font-family: var(--font-main-en);
    font-weight: var(--normal);
    color: var(--bg-gray);
    letter-spacing: 0.15em;
    line-height: 1.5;
    margin: 0;
    margin-bottom: 2rem;
}
.course__copy.course__copy02 {
    margin-bottom: 1rem;
}

.course__name {
    font-size: 1.6rem;
    font-family: var(--font-main-en);
    font-weight: var(--normal);
    color: #fff;
    letter-spacing: 0.12em;
    line-height: 1.5;
    margin: 0;
    margin-bottom: 0.2rem;
}

.course__text-span {
    margin-right: 1.8rem;
}

.course__kome {
    font-size: 1.4rem;
}

.course__price {
    color: #fff;
    letter-spacing: 0.015em;
    line-height: 1.5;
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    margin: 0;
}

.course__yen {
    font-size: 2.4rem;
    font-weight: var(--bold);
    display: block;
}

.course__num {
    font-size: 3.6rem;
    font-weight: var(--normal);
    font-family: var(--font-main-en);
    display: block;
    letter-spacing: 0.03em;
}

.course__tax {
    font-size: 1.2rem;
    font-weight: var(--bold);
    display: block;
    color: var(--text-gray-h);
}

.course__btn {
    margin-top: 2.8rem;
}

@media screen and (max-width: 1280px) {
    .course {
        padding: 4.5rem 3.5rem 7rem 7rem;
    }
    .course__content {
        margin-bottom: 7rem;
    }
}

@media screen and (max-width: 960px) {
    .course__desc {
        font-size: 2.4rem;
    }
}

@media screen and (max-width: 560px) {
    .course {
        padding: 3.8rem 5rem 3rem;
    }
    .course.course-sp {
        padding: 2.8rem 3.8rem 3.8rem;
    }
    .course__content {
        margin-top: 0;
    }
    .course__sp-bottom {
        margin-top: auto!important;
    }
    .course__desc {
        font-size: 1.2rem;
        position: absolute;
        left: 4.4rem;
        bottom: 14.6rem;
        writing-mode: vertical-rl;
    }
    .course__desc--sp-right {
        left: auto;
        bottom: auto;
        right: 1.5rem;
        top: 0rem;
    }
    .course__type {
        display: none;   
    }
    .course__copy {
        font-size: 2rem;
        margin-bottom: 2.4rem;
    }
    .course__copy.course__copy02 {
        margin-bottom: 2.4rem;
    }
    .course__name {
        font-size: 1.6rem;
        margin-bottom: 0.2rem;
        line-height: 1.5;
    }
    .course__text-span {
        margin-right: 0.6rem;
    }
    .course__kome {
        font-size: 1.6rem;
    }
    .course__price {
        gap: 0.6rem;
    }
    .course__yen {
        font-size: 1.9rem;
    }
    .course__num {
        font-size: 2.88rem;
    }
    .course__btn {
        margin-top: 2.5rem;
    }
}


/* アニメーション */
.motion-wrapper {
  height: 110vh;
  background-color: #000;
  padding-block: 0!important;
}
.motion-wrapper:nth-child(even) {
    background: var(--bg-dark);
}
.motion-container {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.motion-frame {
  position: relative;
  width: calc(100vw - (var(--scroll-progress, 0) * 4vw)); /* 4vw分縮む */
  height: calc(100vh - (var(--scroll-progress, 0) * 6vh)); /* 6vh分縮む */
  overflow: hidden;
  will-change: width, height, border-radius;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1; /* 画像は下 */
}
.motion-frame::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.2;
  z-index: 1;
}
.motion-bg-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  transform: translate(-50%, -50%) scale(calc(1 + (var(--scroll-progress, 0) * 0.1)));
  z-index: 1;
  will-change: transform;
}
.motion-content {
  position: relative;
  position: absolute; /* containerに対して絶対配置 */
  z-index: 2;
  width: 100%;
  height: 100%;
  transform: translateY(calc(30px * (1 - var(--scroll-progress, 0))));
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
}

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

}

@media screen and (max-width: 560px) {
    .motion-wrapper {
        height: 105vh;
    }
    .motion-frame {
        width: calc(100vw - (var(--scroll-progress, 0) * 6vw));
        height: calc(100vh - (var(--scroll-progress, 0) * 3vh));
    }
}

/*********************
INTERVIEW MOVIE
*********************/
.member-result {
    /* --- アニメーション調整用パラメーター --- */
    /* 1. アイテム出現時の速度 */
    --item-opacity-speed-result-scroll: 0.3s;
    --item-transform-speed-result-scroll: 0.4s;
    /* 2. アイテム出現時の移動量 */
    --item-slide-dist-result-scroll: 15px;
    /* 3. 緩急 */
    --item-easing-result-scroll: ease-out;

    /* ★ 出現タイミングの一括管理（1番目から順に出現） ★ */
    --result-stagger-delay: 0.3s;    /* 1つ目が動き出すまでの待ち時間 */
    --result-stagger-interval: 0.075s;   /* アイテムごとの間隔（ディレイ量） */

    background: #f5f5f7;
}

.member-result.is-top { background: #fff; }

.member-result.is-dark {
    background: var(--bg-dark-light);
    color: #fff;
}

.member-result.is-dark h2 { color: #fff; }

/* スライダー外枠 */
.member-result__slider-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    width: calc(100% + (100vw - 100%) / 2);
    margin-right: calc(50vw - 50%);
    padding: 9.5rem 4rem;
    position: relative;
    background: #fff;
}

.member-result.is-top .member-result__slider-wrapper {
    background: var(--bg-gray);
}

.member-result.is-dark .member-result__slider-wrapper {
    background: #232323;
    padding: 4.5rem 4rem;
}

.member-result__slider {
    display: inline-flex;
    min-width: 100%;
    gap: 5.2rem;
    scroll-snap-type: x mandatory;
}

/* スライダーアイテム個別の出現アニメーション */
.member-result__item {
    width: 42rem;
    min-width: 42rem;
    scroll-snap-align: start;
    
    /* 初期状態：透明で右にずらしておく */
    opacity: 0;
    transform: translateX(var(--item-slide-dist-result-scroll));
    transition: 
        opacity var(--item-opacity-speed-result-scroll) var(--item-easing-result-scroll), 
        transform var(--item-transform-speed-result-scroll) var(--item-easing-result-scroll);
}

.member-result__item:nth-child(1) .youtube-card__iframe-wrapper {
    background: transparent;
}

/* 表示状態 (.is-visible) */
.member-result__item.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* 時差（ディレイ）の設定 
   1番目がベースの数値で動き出し、後ろへ行くほど遅延が加算されます
*/
.member-result__item:nth-child(1) { transition-delay: var(--result-stagger-delay); }
.member-result__item:nth-child(2) { transition-delay: calc(var(--result-stagger-delay) + (var(--result-stagger-interval) * 1)); }
.member-result__item:nth-child(3) { transition-delay: calc(var(--result-stagger-delay) + (var(--result-stagger-interval) * 2)); }
.member-result__item:nth-child(4) { transition-delay: calc(var(--result-stagger-delay) + (var(--result-stagger-interval) * 3)); }
.member-result__item:nth-child(5) { transition-delay: calc(var(--result-stagger-delay) + (var(--result-stagger-interval) * 4)); }
.member-result__item:nth-child(6) { transition-delay: calc(var(--result-stagger-delay) + (var(--result-stagger-interval) * 5)); }

/* レスポンシブ：スライダー */
@media screen and (min-width: 1440px) {
    .member-result__item {
        width: 46rem;
        min-width: 46rem;
    }
    .member-result__slider-wrapper {
        width: calc(100% + (100vw - 100%) / 2 + 4rem);
        margin-left: -4rem;
    }
    .member-result__slider-wrapper::before {
        background: var(--bg-gray);
        position: absolute;
        content: '';
        z-index: -1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    .member-result.is-dark .member-result__slider-wrapper::before {
        background: #232323;
    }
}

@media screen and (max-width: 960px) {
    .member-result__slider-wrapper { padding: 6.5rem 4rem; }
    .member-result__slider { gap: 3.8rem; }
    .member-result__item { width: 32rem; min-width: 32rem; }
}

@media screen and (max-width: 560px) {
    .member-result {
        padding-top:15rem;
    }
    .member-result.is-dark {
        padding-bottom: 25rem;
    }
    .member-result__slider-wrapper { padding: 3.8rem 2.7rem 5.8rem; }
    .member-result__slider { gap: 4rem; }
    .member-result__item { width: 25.2rem; min-width: 25.2rem; }
}

/* --- YouTubeカード（共通コンポーネント） --- */
.youtube-card__iframe-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px; /* 12pxに統一 */
    overflow: hidden;
    cursor: pointer;
}

.youtube-card__iframe-wrapper iframe,
.youtube-card__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem; /* 内側の角丸 */
}

.youtube-card__iframe-wrapper iframe {
    position: relative;
    z-index: 0;
    pointer-events: none;
}

.youtube-card__thumb {
    z-index: 1;
    position: relative;
    transition: opacity 0.3s ease;
}

.youtube-card__iframe-wrapper:hover .youtube-card__thumb {
    opacity: 0;
}

.youtube-card__text {
    margin-top: 2rem;
    font-size: 1.6rem;
    font-weight: var(--normal);
    letter-spacing: 0.12em;
    line-height: 1.5;
}

@media screen and (max-width: 560px) {
    .youtube-card__iframe-wrapper,
    .youtube-card__thumb,
    .youtube-card__iframe-wrapper iframe {
        border-radius: 0.55rem;
    }
    .youtube-card__text {
        font-size: 1.4rem;
    }
}

/*********************
RICH GALLERY
*********************/

.rich-gallery {
    /* --- アニメーション調整用パラメーター --- */
    /* 1. スクロール出現時のカーテンアニメーション */
    --reveal-duration-gallery-scroll: 1s;
    --reveal-easing-gallery-scroll: cubic-bezier(0.77, 0, 0.175, 1);
    
    /* 2. 画像の出現とホバーズーム */
    --img-opacity-speed-gallery-scroll: 0.5s;
    --img-opacity-delay-gallery-scroll: 0.4s;
    --img-zoom-speed-gallery: 0.8s;
    --img-zoom-scale-hover: 1.05;
    --img-easing-gallery-hover: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 3. ホバー時のオーバーレイ幕 & テキスト下線 */
    --overlay-speed-gallery-hover: 0.3s;
    --underline-speed-gallery-hover: 0.3s;
    --underline-delay-gallery-hover: 0.35s;
    /* 緩急 */
    --overlay-easing-gallery-hover: cubic-bezier(0.79, 0.17, 0.15, 0.96);
    --underline-easing-gallery-hover: cubic-bezier(0.79, 0.17, 0.15, 0.96);
    
    /* 4. 1文字ずつの浮き上がり (anim-char) */
    --char-motion-delay-gallery: 0.2s;
    --char-opacity-speed-gallery: 0.4s;
    --char-transform-speed-gallery: 0.6s;
    
    /* 5. プラスアイコン (+) の描画 */
    --plus-circle-speed-gallery-hover: 0.5s;
    --plus-circle-delay-gallery-hover: 0.5s;
    --plus-line-speed-gallery-hover: 0.3s;
    /* 横線：待機時間 */
    --plus-line-h-delay-gallery-hover: 0.8s;
    /* 縦線：待機時間 */
    --plus-line-v-delay-gallery-hover: 0.9s;
}

/* レイアウト基本 */
.rich-gallery__row {
    display: flex;
    gap: 1rem;
}

.rich-gallery__row + .rich-gallery__row {
    margin-top: 1rem;
}

.rich-gallery__image {
    position: relative;
    overflow: hidden;
    transition: border-radius 0.3s ease;
    z-index: 1;
    align-self: flex-start;
}

/* 画像サイズバリエーション */
.rich-gallery__image01 { width: 91rem; }
.rich-gallery__image02 { width: 36rem; align-self: flex-end; }
.rich-gallery__image03 { width: 69.2rem; }
.rich-gallery__image04 { width: 57.7rem; }

/* 1. 出現アニメーション：カーテン */
.rich-gallery__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #fff;
    z-index: 10;
    transition: transform var(--reveal-duration-gallery-scroll) var(--reveal-easing-gallery-scroll);
}

.is-dark .rich-gallery__image::after {
    background-color: var(--bg-dark-light);
}

.reveal-left::after   { transform-origin: right; transform: scaleX(1); }
.reveal-right::after  { transform-origin: left;  transform: scaleX(1); }
.reveal-top::after    { transform-origin: bottom; transform: scaleY(1); }
.reveal-bottom::after { transform-origin: top;    transform: scaleY(1); }

/* 表示時：カーテンが開く */
.rich-gallery__image.is-visible::after { transform: scaleX(0); }
.reveal-top.is-visible::after,
.reveal-bottom.is-visible::after { transform: scaleY(0); }

/* 画像本体 */
.rich-gallery__image img {
    width: 100%;
    opacity: 0;
    transition: 
        opacity var(--img-opacity-speed-gallery-scroll) ease var(--img-opacity-delay-gallery-scroll), 
        transform var(--img-zoom-speed-gallery) var(--img-easing-gallery-hover);
}

.rich-gallery__image.is-visible img {
    opacity: 1;
}

/* 2. ホバー時：黒オーバーレイ */
.rich-gallery__image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.27);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--overlay-speed-gallery-hover) var(--overlay-easing-gallery-hover);
    z-index: 2;
}

@media (hover: hover) {
    .rich-gallery__image:hover { border-radius: 1.2rem; }
    .rich-gallery__image:hover img { transform: scale(var(--img-zoom-scale-hover)); }
    .rich-gallery__image:hover::before { transform: scaleX(1); transform-origin: left; }
    .rich-gallery__image:not(:hover)::before { transform: scaleX(0); transform-origin: right; }
}

/* 3. テキスト & 1文字アニメーション */
.rich-gallery__text {
    opacity: 1 !important; /* 親の透明度は固定、anim-charで制御 */
    position: absolute;
    top: 50%;
    transform: translateY(-50%) !important;
    left: 2rem;
    font-size: 2.2rem;
    font-weight: var(--normal);
    font-family: var(--font-main-en);
    color: #fff;
    line-height: 1;
    letter-spacing: 0.015em;
    margin: 0;
    z-index: 3;
    padding-bottom: 0.3rem;
}

/* 下線 */
.rich-gallery__text::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--underline-speed-gallery-hover) var(--underline-easing-gallery-hover);
}

@media (hover: hover) {
    .rich-gallery__image:hover .rich-gallery__text::after {
        transform: scaleX(1);
        transition-delay: var(--underline-delay-gallery-hover);
    }
    .rich-gallery__image:not(:hover) .rich-gallery__text::after {
        transform: scaleX(0);
        transform-origin: right;
        transition-delay: 0s;
    }
}

/* 1文字ずつの浮き上がり */
[data-hover-reveal] .anim-char {
    transform: translateY(5px);
}

@media (hover: hover) {
    .rich-gallery__image:hover [data-hover-reveal] .anim-char {
        opacity: 1;
        transform: translateY(0);
        transition-delay: calc(var(--char-motion-delay-gallery) + (var(--i) * 0.01s));
        transition-property: opacity, transform;
        transition-duration: var(--char-opacity-speed-gallery), var(--char-transform-speed-gallery);
    }
}

/* 4. プラスアイコン (+) */
.rich-gallery__plus {
    display: inline-flex;
    align-items: center;
    margin-left: 0.7rem;
    transform: translateY(2px);
}

.rich-gallery__plus svg {
    fill: none;
    stroke: #fff;
    stroke-width: 1;
    stroke-linecap: round;
}

.rich-gallery__plus img {
    aspect-ratio: 1 / 1!important;
}

.plus-circle {
    stroke-dasharray: 70;
    stroke-dashoffset: 70;
    transition: stroke-dashoffset var(--plus-circle-speed-gallery-hover) ease;
}

.plus-line {
    transform-origin: center;
    transform: scale(0);
    transition: transform var(--plus-line-speed-gallery-hover) cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (hover: hover) {
    .rich-gallery__image:hover .plus-circle {
        stroke-dashoffset: 0;
        transition-delay: var(--plus-circle-delay-gallery-hover);
    }
    .rich-gallery__image:hover .plus-line--h {
        transform: scale(1);
        transition-delay: var(--plus-line-h-delay-gallery-hover);
    }
    .rich-gallery__image:hover .plus-line--v {
        transform: scale(1);
        transition-delay: var(--plus-line-v-delay-gallery-hover);
    }
    /* アウト時は瞬時にリセット */
    .rich-gallery__image:not(:hover) .plus-circle,
    .rich-gallery__image:not(:hover) .plus-line {
        stroke-dashoffset: 70;
        transform: scale(0);
        transition-delay: 0s !important;
        transition-duration: 0.2s;
    }
}

/* 5. レスポンシブ調整 */
@media screen and (max-width: 960px) {
    .rich-gallery__row.rich-gallery__row-sp { display: flex; gap: 0.4rem; width: 100%; }
    .rich-gallery__row + .rich-gallery__row { margin-top: 0.4rem; }
    
    .rich-gallery__image02, .rich-gallery__image03 { width: 50%; overflow:hidden; }
    .rich-gallery__image01, .rich-gallery__image04 { width: 100%; }
    
    .rich-gallery__image img { height: 100%; object-fit: cover; }
    .rich-gallery__image01 img, .rich-gallery__image04 img { aspect-ratio: 335 / 138; }
    .rich-gallery__image02 img, .rich-gallery__image03 img { aspect-ratio: 1/ 1; }
    
    /* SP時はホバー状態をデフォルトに（または固定） */
    .rich-gallery__image:not(:hover)::before { transform: scaleX(1); }
    .rich-gallery__text {
        opacity: 1 !important;
        position: absolute;
        top: auto;
        bottom: 1rem;
        left: 1rem;
        transform: none !important;
        font-size: 1.3rem;
        padding-bottom: 0;
    }
    .rich-gallery__text::after { display: none; }
    .rich-gallery__plus { margin-left: 0.5rem; }
    .rich-gallery__plus img { width: 1.3rem; }
}


/* 【汎用アニメーション】共通：カーテンと画像の基本設定 */
[data-stagger-item] {
    position: relative;
    overflow: hidden;
    display: block;
}

/* 1. 出現アニメーション：カーテン（擬似要素） */
[data-stagger-item]::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #fff; /* 背景色に合わせて調整 */
    z-index: 10;
    transition: transform var(--reveal-duration-gallery-scroll, 0.8s) var(--reveal-easing-gallery-scroll, cubic-bezier(0.77, 0, 0.175, 1));
}

/* 方向の定義 */
.reveal-left::after   { transform-origin: right; transform: scaleX(1); }
.reveal-right::after  { transform-origin: left;  transform: scaleX(1); }
.reveal-top::after    { transform-origin: bottom; transform: scaleY(1); }
.reveal-bottom::after { transform-origin: top;    transform: scaleY(1); }

/* 表示時：カーテンが開く */
[data-stagger-item].is-visible::after { transform: scaleX(0); }
[data-stagger-item].reveal-top.is-visible::after,
[data-stagger-item].reveal-bottom.is-visible::after { transform: scaleY(0); }

/* 画像本体の初期状態 */
[data-stagger-item] img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
    transition: 
        opacity var(--img-opacity-speed-gallery-scroll, 0.4s) ease var(--img-opacity-delay-gallery-scroll, 0.2s),
        transform var(--img-zoom-speed-gallery, 0.6s) var(--img-easing-gallery-hover, ease);
}

[data-stagger-item].is-visible img {
    opacity: 1;
}


/************************************************
 * BLOG SECTION
 * * [アニメーション調整ガイド]
 * 下記の変数値を変更することで、全体の挙動を一括管理できます。
 ************************************************/
.blog-item-wrapper {
    max-width:calc(var(--container-l) + 5.6rem);
}

.blog-item {
    /* 幕（カーテン）が開く速度 */
    --reveal-speed-blog-hover: 0.3s;
    /* 幕の動きの緩急 */
    --reveal-easing-hover: cubic-bezier(0.79, 0.17, 0.15, 0.96);
    
    /* 画像が中央から広がる速度/ズーム速度 */
    --img-expand-speed-blog-scroll: 1.2s;
    --img-zoom-speed-blog-hover: 1.4s;
    /* ホバー時：ズーム動作までの待機時間 */
    --img-zoom-delay-blog-hover: 0.2s;
    /* 緩急 */
    --img-easing-blog-scroll: cubic-bezier(0.19, 1, 0.22, 1);
    --img-easing-blog-hover: cubic-bezier(0.19, 1, 0.22, 1);
    
    /* スクロール出現時/ホバー時：文字が浮き上がるまでの待機時間 */
    --char-motion-delay-blog-hover: 0.1s;
    /* スクロール出現時/ホバー時：1文字ずつの浮き上がり速度 */
    --char-opacity-speed-blog: 0.4s;
    --char-transform-speed-blog: 0.6s;
    /* 緩急 */
    --char-easing-blog: cubic-bezier(0.19, 1, 0.22, 1);
    
    /* 基本構造 */
    border-top: 1px solid #EAEAEA;
    position: relative;
}

.blog-item:last-of-type {
    border-bottom: 1px solid #EAEAEA;
}

/* --- 1. 背景画像と黒オーバーレイ（固定） --- */
.blog-item__hover-visual {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 1; 
    transition: opacity 0.3s ease;
}

.blog-item__hover-visual::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--hover-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.blog-item__hover-visual::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.8;
}

/* --- 2. 白い幕（カーテン） --- */
.blog-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 1;
    pointer-events: none;
    
    /* 初期状態：全開 */
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform var(--reveal-speed-blog-hover) var(--reveal-easing-hover);
}

@media (hover: hover) {
    /* ホバー時：右側へ剥がれる */
    .blog-item:hover::before {
        transform: scaleX(0);
        transform-origin: right center;
    }
}

/* --- 3. リンクとインナーレイアウト --- */
.blog-item__link {
    position: relative;
    z-index: 2;
    display: block;
    padding: 1.7rem 2.8rem;
}

.blog-item__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    margin-left: 0;
    position: relative; /* 子要素のabsolute基準 */
}

.blog-item__info {
    width: 46rem;
    max-width: 100%;
}

.blog-item__meta {
    display: flex;
    flex-direction: column;
    gap: 0rem;
}

/* --- 4. テキストスタイルとホバー色変化 --- */
.blog-item__date {
    font-size: 1.3rem;
    line-height: 1.5;
    letter-spacing: 0.1em;
    font-family: var(--font-main-en);
    color: var(--text-gray);
    transition: color 0.3s ease;
}

.blog-item__category {
    font-size: 1.2rem;
    line-height: 1.5;
    letter-spacing: 0.1em;
    font-family: var(--font-main-en);
    color: #000;
    transition: color 0.3s ease;
}

.blog-item__tag {
    color: var(--text-gray2);
    transition: color 0.3s ease;
}

.blog-item__tag + .blog-item__tag {
    margin-left: 1.3rem;
}

.blog-item__title {
    font-size: 1.6rem;
    font-weight: var(--normal);
    line-height: 2;
    letter-spacing: 0;
    margin-top: 2.5rem;
    color: var(--text-gray2);
    transition: color 0.3s ease;
}

@media screen and (min-width: 961px) {
    @media (hover: hover) {
        .blog-item:hover .blog-item__title,
        .blog-item:hover .blog-item__date,
        .blog-item:hover .blog-item__tag {
            color: #fff;
        }
    }
}

/* --- 5. サムネイルと画像アニメーション --- */
.blog-item__thumbnail {
    width: 43rem;
    max-width: 100%;
}

/* .blog-item__image-wrapper {
    position: relative;
    overflow: hidden;
    clip-path: inset(50% 50% 50% 50%);
    transition: clip-path var(--img-expand-speed-blog-scroll) var(--img-easing-blog-scroll);
    will-change: clip-path;
} */

.blog-item__image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1280 / 720;
    transition: transform var(--img-zoom-speed-blog-hover) var(--img-easing-blog-hover);
}

/* アニメーション発火状態 (.is-animated) */
/* .blog-item.is-animated .blog-item__image-wrapper {
    clip-path: inset(0% 0% 0% 0%);
}

.blog-item.is-animated .blog-item__image-wrapper img {
    transform: scale(1);
} */

@media (hover: hover) {
    /* ホバー時の微小なズームアップ */
    .blog-item:hover .blog-item__image-wrapper img {
        transform: scale(1.05);
        transition-delay: var(--img-zoom-delay-blog-hover);
    }
}

.blog-item__btn {
    margin-top: 4rem;
}

/* --- 6. ホバーアクション（情報切り替え） --- */

/* 通常時の情報 */
.blog-item__info.--default {
    position: relative; 
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s;
    z-index: 2;
}

/* ホバー時に現れる情報 */
.blog-item__info.--hover {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 46rem;
    max-width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 5;
    transition: opacity 0s, visibility 0.3s;
}

@media (hover: hover) {
    .blog-item:hover .blog-item__info.--default {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s;
    }

    .blog-item:hover .blog-item__info.--hover {
        opacity: 1;
        visibility: visible;
    }
}

/* 7. 1文字アニメーション (--hover側) */
.blog-item__info.--hover .anim-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(5px);
    
    /* 修正箇所：transitionの定義をより確実に */
    transition-property: opacity, transform;
    transition-duration: var(--char-opacity-speed-blog), var(--char-transform-speed-blog);
    transition-timing-function: var(--char-easing-blog);
    
    /* 修正箇所：calcの計算式をブラウザが解釈しやすい形に修正 */
    transition-delay: calc(var(--char-motion-delay-blog-hover) + (var(--i) * 0.01s));
}

@media (hover: hover) {
    /* ホバー時に浮き上がる */
    .blog-item:hover .blog-item__info.--hover .anim-char {
        opacity: 1;
        transform: translateY(0);
    }
    /* マウスアウト時は瞬時にリセット（連続ホバー対策） */
    .blog-item:not(:hover) .blog-item__info.--hover .anim-char {
        transition: none;
        opacity: 0;
        transform: translateY(5px);
    }
}

/* --- 8. レスポンシブ --- */
@media screen and (max-width: 960px) {
    .blog-item__inner {
        flex-direction: column;
        gap: 3rem;
    }
    .blog-item__link {
        padding-block: 5rem;
        padding-inline: 0;
    }
    .blog-item__hover-visual {
        display: none!important;
    }
    .blog-item__thumbnail {
        order: 1;
        width: 100%;
    }
    .blog-item__info {
        order: 2;
        width: 100%;
    }
    .blog-item__info.--hover {
        position: absolute;
        top: auto;
        left: 0;
        bottom: 0;
        transform: none;
        width: 100%;
    }
    .blog-item__title {
        margin-top: 1.4rem;
        font-size: 1.4rem;
    }
    .blog-item:first-of-type {
        border-top: none;
    }
    .blog-item:first-of-type .blog-item__link {
        padding-top: 0;
    }
    .blog-item__meta {
        flex-direction: row;
        gap: 1.4rem;
    }
}

/*********************
CREATOR BLOCK
*********************/
.creator-blocks {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.6rem;
}

.creator-blocks__image {
    width: 6.6rem;
    height: 6.6rem;
    overflow: hidden;
}

.creator-blocks__image img {
    border-radius:50%;
}

.creator-blocks__textarea time {
    margin: 0;
}

.creator-blocks__textarea {
    
}

.creator-blocks__name {
    margin: 0;
    font-size: 1.4rem;
    font-family: var(--font-main-en);
    font-weight: var(--medium);
    letter-spacing: 0;
    line-height: 1.25;
}

.creator-blocks__name-lg {
    font-size: 1.6rem;
    font-weight: var(--normal);
}

.creator-blocks__time {
    margin: 0;
    font-size: 1.4rem;
    font-family: var(--font-main-en);
    font-weight: var(--normal);
    color: var(--text-gray);
    letter-spacing: 0;
    line-height: 1.5;
    margin-top: 0.4rem;
    display: block;
}

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

@media screen and (max-width: 560px) {
    .creator-blocks__image {
        width: 4rem;
        height: 4rem;
        overflow: hidden;
    }
}

/*********************
SECOND VIEW
*********************/
.secondview {

}
.secondview__text {
    font-size: 1.4rem;
    font-weight: var(--nomarl);
    font-family: var(--font-main-en);
    line-height: 2.5;
    text-align: center;
    writing-mode: horizontal-tb;
}
.secondview__text p {
    letter-spacing: 0.32em;
}
.secondview__text .dot {
    position: relative;
    display: inline-block;
}
.secondview__text .dot::after {
    position: absolute;
    content: '';
    width: 0.25rem;
    height: 0.25rem;
    background: currentColor;
    border-radius: 50%;
    top: 0.2rem;
    left: 42%;
    transform: translateX(-50%);
    /* 初期は透明にする */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.secondview__line {
    margin:0;
}

.secondview__line + .secondview__line {
    margin-top:0.5rem;
}

[data-state=active] .dot::after {
    opacity: 1;
}

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

@media screen and (max-width: 560px) {
    .secondview__line {
        display: block;
        margin-bottom: 0.5em;
    }
    .secondview__line + .secondview__line {
        margin-top:2rem;
    }
    .secondview__text p {
        line-height:2;
    }
    .secondview__text .dot::after {
        top: 0rem;
    }
}

/* スマホ用（560px以下） */
@media screen and (max-width: 560px) {

}

/*********************
TOP PAGE
*********************/
.index-section {
    padding-block: 15rem;
    overflow: hideen;
}
.index-section.index-section--sm {
    padding-block: 12rem;
}
.index-section.index-section--md {
    padding-block: 20rem;
}
.index-section.index-section--lg {
    padding-block: 25rem;
}

/* SECOND VIEW */
.index-secondview {
    padding-block: 23.5rem;
}
/* WORKS */
.index-works {
    padding-block: 23.8rem 10rem;
}
.index-works__title {
    margin-bottom: 16rem;
}
.index-works__content {

}

@media screen and (max-width: 960px) {
    .index-works {
        padding-block: 24rem 5rem;
    }
}

@media screen and (max-width: 560px) {
    .index-secondview {
        padding-block: 30rem;
    }
    .index-works {
        padding-block: 24rem 5rem;
    }
    .index-works__title {
        margin-bottom: 4rem;
    }
}

/* INTERVIEW */
.index-interview {
    position: relative;
    background: #fff;
}
.index-interview__title {
    margin-bottom: 7rem;
}
@media screen and (max-width: 960px) {

}

@media screen and (max-width: 560px) {
    .index-interview {
        padding-block: 18rem;
    }
    .index-interview__title {
        margin-bottom: 4rem;
    }
}

/* COMPANY */
.index-company {
    padding-block: 20.8rem 12rem;
}
@media screen and (max-width: 960px) {

}

@media screen and (max-width: 560px) {
    .index-company {
        padding-block: 24.4rem 7.6rem;
    }
}

/* Lexa WORKS */
.index-lexa {
    background: #fff;
    padding-block: 10.5rem 20rem;
}
.index-lexa__title {
    margin-bottom: 3.5rem;
}
@media screen and (max-width: 960px) {

}

@media screen and (max-width: 560px) {
    .index-lexa {
        padding-block: 0 11rem;
    }
    .index-lexa__title {
        margin-bottom: 1rem;
    }
}

/* BLOG */
.index-blog {
    background: #fff;
    padding-block: 25rem 12rem;
}
.index-blog__title {
    margin-bottom: 13rem;
}

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

@media screen and (max-width: 560px) {
    .index-blog {
        background: #fff;
        padding-block: 18rem 10rem;
    }
    .index-blog__title {
        margin-bottom: 7.5rem;
    }
}

/*********************
COMPANY
*********************/
.main-company {

}

.main-company-image {
    width: 100%;
    max-width: 182rem;
    max-width: 100%;
    margin: 0 auto;
}

.main-company-image img {
    aspect-ratio: 1440 / 569;
    width: 100%;
    height: 100%;
    overflow: hidden;
    max-height: 56.9rem;
    object-fit: cover;
}

.company-intro {
    /* --- アニメーション調整用パラメーター --- */
    /* 1. マスク（白い板）がスライドする速度 */
    --mask-reveal-speed-company: 0.5s;
    /* 緩急 */
    --reveal-easing-company: cubic-bezier(.16, 1, .3, 1);
    --img-easing-company: cubic-bezier(.16, 1, .3, 1);

    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.company-intro__left {
    width: 46rem;
    max-width: 100%;
}

.company-intro__course-head {
    margin-bottom: 6rem;
}

.company-intro__text {
    font-size: 1.4rem;
    font-weight: var(--normal);
    letter-spacing: 0.12em;
    line-height: 2;
}

.company-intro__text p {
    margin: 0;
}

.company-intro__text p + p {
    margin-top: 2em;
}

.company-intro__btn {
    margin-top: 4.5rem;
}

.company-intro__right {
    width: 63.8rem;
    max-width: 100%;
    display: flex;
    gap: 3rem;
    align-items: flex-end;
}

@media screen and (max-width: 960px) {
    .company-intro {
        flex-direction: column;
        gap: 12.3rem;
        align-items: flex-start;
        max-width: 100%;
    }
    .company-intro__right {
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }
    .company-intro__left {
        width: 58rem;
        max-width: 100%;
    }
}

@media screen and (max-width: 560px) {
    .main-company-image img {
        aspect-ratio: 1440 / 669;
    }
}


/* メンバーカード */
.member-card {
    width: calc((100% - 30px * 2) / 3);
}

.member-card__image {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

/* メンバー画像本体 */
.member-card__image img {
    display: block;
    width: 100%;
    height: auto;
}

/* マスク用の白い板（初期状態で前面を覆う） */
/* .member-card__image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 101%;
    height: 101%;
    background-color: #fff;
    transform-origin: right; /* 右側へ縮む = 左から写真が出る */
    transition: transform var(--mask-reveal-speed-company) var(--reveal-easing-company);
} */

/* アニメーション発火時の状態 (.is-animated) */
/* .member-card__image.is-animated img {
    transform: scale(1);
}

.member-card__image.is-animated::after {
    transform: scaleX(0);
} */

.member-card__info {
    font-family: var(--font-main-en);
}

.member-card__name {
    font-size: 1.8rem;
    font-family: var(--font-main-en);
    letter-spacing: 0.015em;
    line-height: 1.5;
    margin-bottom: 0.5rem;
    font-weight: var(--normal);
    font-style: oblique;
    color: var(--text-gray2);
}

.is-dark .member-card__name,
.is-dark .member-card__position,
.is-dark .member-card__role {
    color: var(--text-gray-p);
}

/* .is-dark .member-card__image::after {
    background-color: var(--bg-dark-light);
} */

.member-card__position,
.member-card__role {
    font-size: 1.4rem;
    color: var(--text-gray2);
    letter-spacing: 0;
    line-height: 1.5;
    margin: 0;
}

/* 動きがある要素に付与 */
.member-card__image::after,
.member-card__image img {
    will-change: transform;
}

/* 1. 本体の設定を変更 */
.member-card__image {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    
    /* 初期状態：右側を100%削る（＝何も見えない） */
    clip-path: inset(0 100% 0 0); 
    
    /* 遷移の設定（will-changeでGPUを強制使用） */
    transition: clip-path var(--mask-reveal-speed-company) var(--reveal-easing-company);
    will-change: clip-path;
}

/* 2. アニメーション発火時 */
.member-card__image.is-animated {
    /* クリップを0にする（＝全部見える） */
    clip-path: inset(0 0 0 0);
}

/* 3. 【重要】古い「白い板」を無効化する */
.member-card__image::after {
    display: none !important;
}

/* 4. 画像自体のスケール（もし使っていれば） */
.member-card__image img {
    display: block;
    width: 100%;
    height: auto;
    /* スケールアニメーションも重い原因になるので、
       カクつく間は transition から外すか、ごくわずかな変化に留めるのが吉です */
}

@media screen and (max-width: 960px) {
    .member-card {
        width: 100%;
    }
    .member-card__name {
        font-size: 1.6rem;
        margin-bottom: 0.4rem;
    }
    .member-card__role {
    .member-card__position,
        font-size: 1.3rem;
    }
    .member-card__name,
    .member-card__position,
    .member-card__role {
        text-align: right;
    }
}

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

}

/* GALLERY */
.company-gallery-section {

}

.company-gallery__item {

}

.company-gallery__2col {
    margin-block: 3rem;
    gap: 3rem;
}

.company-gallery__2col .cell--1-2 {
    width: calc((100% - 3rem) / 2);
}

@media screen and (max-width: 560px) {
    .company-gallery__2col {
        flex-direction: row;
        gap: 1rem;
    }
    .company-gallery__2col {
        margin-block: 1rem;
    }
    .company-gallery__2col .cell--1-2 {
        margin-bottom: 0;
        width: calc((100% - 1rem) / 2);
    }
}
/* テーブル */
.company-overview {
    display: flex;
    justify-content: space-between;
    gap: 8rem;
}

.company-overview__left {
    width: 14rem;
}

.company-overview__right {
    width: 85.5rem;
    max-width: calc(100% - 14rem - 8rem);
}

@media screen and (max-width: 960px) {
    .company-overview {
        flex-direction: column;
        gap: 0;
    }

    .company-overview__left {
        width: 100%;
        margin-bottom: 8rem;
    }

    .company-overview__right {
        width: 100%;
        max-width: 100%;
    }  
}

/* トレードマーク */
.company-trademark-section {

}

.company-trademark__heading {
    margin-bottom: 4.5rem;
}

.company-trademark__text {
    text-align: center;
    max-width: 38rem;
    margin: 0 auto;
}

.company-trademark__image {
    margin-top: 4.8rem;
}

.company-trademark__image img {
    width: 600px;
    max-width: 100%;
}

/* YOUTUBE */
.company-youtube-section {

}

.company-youtube__heading {
    margin-bottom: 6rem;
}

.company-youtube__content {

}

.company-youtube__btn-wrap {
    margin-top: 5.5rem;
}

@media screen and (max-width: 560px) {
    .company-youtube__heading {
        margin-bottom: 4rem;
    }  
    .company-overview__left {
        margin-bottom: 2rem;
    }
}

/*********************
汎用スライドアニメーション（マスク）
*********************/

.js-reveal-clip {
    position: relative;
    display: block;
    /* デフォルト：左から右へ（右側を100%削る） */
    clip-path: inset(0 100% 0 0); 
    transition: clip-path 0.7s cubic-bezier(.16, 1, .3, 1);
    will-change: clip-path;
}

/* 方向オプション：初期状態を上書き */
.js-reveal-clip[data-clip-dir="up"]    { clip-path: inset(100% 0 0 0); } /* 下を削る */
.js-reveal-clip[data-clip-dir="right"] { clip-path: inset(0 0 0 100%); } /* 左を削る */
.js-reveal-clip[data-clip-dir="down"]  { clip-path: inset(0 0 100% 0); } /* 上を削る */

/* 実行状態：どの方向からでも最終的に「全開」にする */
.js-reveal-clip.is-animated {
    clip-path: inset(0 0 0 0) !important;
}

/*********************
WORKS
*********************/
/* 制作実績リンクカード */
:root {
    /* 広がる時間 */
    --expand-duration-works: 1.0s;
    --expand-transform-speed-works: 1.2s;
    /* 初期状態：30%絞って、1.1倍ズーム */
    --expand-initial-scale-works: 1.1;
    --expand-initial-inset-works: 25%;
    /* 緩急 */
    --expand-easing-works: cubic-bezier(0.19, 1, 0.22, 1);
    /* アニメーション調整用パラメーター */
    /* ポスター画像と動画のフェード入れ替わりの速さ */
    --video-fade-speed-works: 0.6s;
    --video-fade-speed-works: 0.6s;
}

.works-card {
   position: relative;
    overflow: hidden;
}

.works-card + .works-card {
    margin-top: 6.4rem;
}

.works-card__link {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 3rem;
    padding: 3rem;
    border: 1px solid var(--border-gray);
    transition: all .3s;
    z-index: 1;
    overflow: hidden;
    background-color: #fff;
    transition: color 0.3s ease;
}

.works-card__detail {
    flex-shrink: 1;
}

.works-card.works-card--archive .works-card__detail {
    width: calc(100% - 61rem - 3rem);
}

.works-card__category {
    margin-top: 3.6rem;
}

.works-card__title {
    font-weight: var(--normal)!important;
    color: var(--text-gray2)!important;
    -webkit-transform-style: preserve-3d; /* Safariのレンダリングを強制 */
    /* Safariのレンダリングを3D層に固定 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.works-card__creator {
    margin-top: 4rem;
}

.works-item {
    width: 100%;
    max-width: 61rem;
    flex-shrink: 0;
}

.works-video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 8.99;
    object-position: top;
    overflow: hidden;
}
.works-video-wrapper video {
    width: 100.5%; /* 動画の淵が映らないように */
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 8.99;
    object-position: center -1px;
    overflow: hidden;
}
.works-video-wrapper img {
    width: 100%;
}
.works-title {
    margin-top: 1.5rem;
    font-size: 1.1rem;
    font-weight: bold;
}

.works-card__hover-visual {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* 背景画像がないので黒単色 */
    opacity: 0.8; /* 好みの暗さに調整 */
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.3s cubic-bezier(0.79, 0.17, 0.15, 0.96);
    display: block !important;
}

/* テキストの初期色と遷移 */
.works-card__title, 
.works-card__category, 
.creator-blocks__name,
.article-works-title__arrow {
    transition: color 0.3s ease, stroke 0.3s ease;
}

/* ホバー時の挙動 */
@media (hover: hover) {
    .works-card__link:hover {
        color: #fff !important;
    }

    /* 幕が左から右へ（またはブログと同じく全画面）広がる */
    .works-card__link:hover .works-card__hover-visual {
        transform: scaleX(1);
        transform-origin: left center;
    }

    /* テキストを白くする */
    .works-card__link:hover .works-card__title,
    .works-card__link:hover .article-works-title,
    .works-card__link:hover .works-card__category,
    .works-card__link:hover .creator-blocks__name {
        color: #fff !important;
    }

    /* SVG矢印の色変更 */
    .works-card__link:hover .arrow-path {
        stroke: #fff;
    }

    /* ブログ風：テキストの浮き上がり（anim-charがJSで生成されている場合） */
    .works-card__link:hover .js-split-hover .anim-char {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        /* 各文字のディレイはJS側の変数 --i に依存 */
        transition-delay: calc(0.1s + (var(--i) * 0.01s));
    }
}

/* スマホ等でのリセット */
@media screen and (max-width: 960px) {
    .works-card__hover-visual {
        display: none !important;
    }
    .works-card.works-card--archive .works-card__detail {
        width: 100%;
    }
}

@media screen and (max-width: 560px) {
    .works-card__link {
        padding: 2rem;
    }
}



/* スクロール動画制御 */
.js-video-poster {
  position: relative;
  z-index: 2;
  transition: opacity var(--video-fade-speed-works) ease;
  display: block;
}

.js-video-poster img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top;
  display: block;
}

.js-injected-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--video-fade-speed-works) ease;
  z-index: 1;
  opacity: 0;
}

.js-video-poster, 
.js-injected-video {
  transition: opacity var(--video-fade-speed-works) ease-in-out !important;
}

.js-video-poster {
  z-index: 2;
  position: relative;
}

.js-injected-video {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
video.js-injected-video[style*="opacity: 1"] {
  z-index: 3;
}

/* --- 広がるアニメーションを付けたい時だけ使うクラス --- */
.js-expand-animation {
  clip-path: inset(var(--expand-initial-inset-works));
  transform: scale(var(--expand-initial-scale-works));
  transition:opacity 0.3s,  
            clip-path var(--expand-duration-works) var(--expand-easing-works), 
              transform var(--expand-transform-speed-works) var(--expand-easing-works);
    opacity: 0;
}

/* アニメーション発火状態（親に .is-active がついた時） */
/* works-card だけでなく、どの親要素でも反応するように汎用化 */
.is-active.js-expand-animation {
  clip-path: inset(0%);
  transform: scale(1);
  opacity: 1;
}

.is-active.js-expand-animation[data-delay="0.1"] {
  transition-delay: 0.1s;
}

.is-active.js-expand-animation[data-delay="0.15"] {
  transition-delay: 0.15s;
}

.is-active.js-expand-animation[data-delay="0.2"] {
  transition-delay: 0.2s;
}

.is-active.js-expand-animation[data-delay="0.25"] {
  transition-delay: 0.25s;
}

.is-active.js-expand-animation[data-delay="0.3"] {
  transition-delay: 0.3s;
}

@media screen and (max-width: 1280px) {
    .works-item {
        max-width: 55rem;
    }
}


@media screen and (max-width: 960px) {
    .works-item {
        max-width: 100%;
    }

    .works-card__category {
        margin-bottom: 0.75rem;
        margin-top: 2.5rem;
    }  
    .works-card__link {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .works-card__detail {

    }
    .works-card__creator.creator-blocks {
        display: flex;
        justify-content: flex-start;
    }
}

@media screen and (max-width: 560px) {
    .works-card__detail {
        width: 100%;
    }
    .works-card__creator {
        margin-top: 2rem;
    }
    .works-card__category {
        margin-bottom: 0.4rem;
        margin-top: 2.3rem;
    }
    .works-card__btn {
        margin-top: 4rem;
    }
}


.js-single-video-container video,
.js-modal-video-only video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

/*********************
ARTICLE
*********************/
/* 著者情報 */
.article-writer {

}

.article-writer__heading {
    font-size: 1.4rem;
    font-family: var(--font-main-en);
    font-weight: var(--normal);
    color: var(--text-gray);
    letter-spacing: 0.15rem;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.article-writer__heading:not(:first-child) {
    margin-top: 40px;
}

.article-writer__profile {

}

.article-writer__share {
    display: flex;
    gap: 7px;
}

.article-writer__keywords {
    font-size: 1.4rem;
    font-family: var(--font-main-en);
    letter-spacing: 0;
    line-height: 1;
}

.article-writer__tags {
    margin: 0;
    list-style:none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.article-writer__tags a {
    transition: all .3s;
}

@media (hover: hover) {
    .article-writer__tags a:hover {
        opacity: .7;
    }
}

/*********************
PREV/NEXT POST-LINK
*********************/
/* --- Base Container --- */
.article-navigation {
    border: 1px solid #E5E7EB;
}

.article-navigation__inner {
    display: flex;
    align-items: center;
}

.article-navigation__item,
.article-navigation__richitem {
    display: block !important;
    width: 50%;
}

.article-navigation__richitem {
    flex: 1;
}

/* --- Link Base --- */
.article-navigation__link {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 33rem;
    padding: 60px;
    overflow: hidden;
    transition: color .3s;
}

/* Hover Background Effect */
.article-navigation__link::before,
.article-navigation__link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    transition: opacity .3s, transform 1s;
}

.article-navigation__link::before {
    background-image: var(--hover-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.article-navigation__link::after {
    background: rgba(0, 0, 0, .7);
}

@media (hover: hover) {
    .article-navigation__link:hover {
        color: #fff !important;
    }
    .article-navigation__link:hover .article-works-title {
        color: #fff !important;
    }
    .article-navigation__link:hover::before,
    .article-navigation__link:hover::after {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* --- Elements --- */
.article-navigation__label {
    display: block;
    margin-bottom: 2rem;
    color: var(--text-gray);
    font-size: 1.3rem;
    font-family: var(--font-main-en);
    font-weight: var(--normal);
    line-height: 1.5;
    letter-spacing: 0.01em;
}

.article-navigation__title {
    display: -webkit-box;
    max-width: 45rem;
    overflow: hidden;
    font-size: 2rem;
    font-weight: var(--normal);
    line-height: 1.72;
    letter-spacing: 0.04em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.article-navigation__title-en {
    margin: 0;
    font-size: 1.8rem !important;
}

.article-navigation__category.article-works-category {
    font-size: 1.2rem;
    letter-spacing: 0;
}

.article-navigation__text .article-works-title {
    color: var(--text-gray2);
}

.article-navigation__creator {
    align-self: flex-start;
}

/* --- Rich Item Specifics --- */
.article-navigation__richitem .article-navigation__link {
    height: 64rem;
    padding-block: 5rem;
}

.article-navigation__content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 50rem;
}

.article-navigation__richitem .article-navigation__content {
    gap: 0;
}



.article-navigation__richitem .article-navigation__creator .creator-blocks__image {
}
.article-navigation__richitem .article-navigation__text {
    margin-top: 1rem;
}
.article-navigation__richitem .article-navigation__creator {
    margin-top: 2.2rem;
}

.article-navigation__richitem-inner {
    width: fit-content;
}

.article-navigation__image {
    width: 100%;
    aspect-ratio: 16 / 8.9;
    overflow: hidden;
}

.article-navigation__image img,
.article-navigation__image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-navigation__richitem .arrow-path {
    stroke-dashoffset: 0 !important;
}

/* --- Prev / Next Alignments --- */

/* Previous */
.article-navigation__item-prev,
.article-navigation__richitem-prev {
    border-right: 1px solid #E5E7EB;
    text-align: left;
}

.article-navigation__item-prev {
    text-align: right;
}

.article-navigation__item-prev .article-navigation__link {
    padding-left: 8rem;
}

.article-navigation__item-prev .article-navigation__title {
    margin-left: auto;
}

.article-navigation__richitem-prev .article-navigation__link {
    align-items: flex-start;
}

.article-navigation__richitem-prev .article-navigation__richitem-inner {
    margin-left: auto;
}

.article-navigation__richitem-prev .article-works-title {
    text-align: left;
    justify-self: flex-start;
}

/* Next */
.article-navigation__item-next,
.article-navigation__richitem-next {
    border-left: 1px solid #E5E7EB;
    text-align: left;
}

.article-navigation__item--next .article-navigation__link {
    padding-right: 8rem;
}

.article-navigation__richitem-next .article-navigation__link {
    text-align: right;
    align-items: flex-end;
}

.article-navigation__richitem-next .article-navigation__richitem-inner {
    margin-right: auto;
    margin-left: 0;
}

.article-navigation__richitem-next .article-works-title {
    text-align: right;
    justify-self: flex-end;
    padding-right: 0;
}

.article-navigation__richitem-next .article-navigation__creator {
    align-self: flex-end;
}

/* Has-Link Borders (Specificity handling) */
.article-navigation__item-prev:has(a),
.article-navigation__richitem-prev:has(a) {
    border-right: 1px solid var(--border-gray);
}

.article-navigation__item-next:has(a),
.article-navigation__richitem-next:has(a) {
    border-left: 1px solid var(--border-gray);
}

.article-navigation__item-prev:has(a) + .article-navigation__item-next:has(a) {
    border-left: none;
}

/* --- Media Queries --- */

@media screen and (max-width: 960px) {
    .article-navigation__richitem {
        align-self: flex-start;
    }
    .article-navigation__link {
        height: 24rem;
        padding: 2.8rem;
    }
    .article-navigation__item-prev .article-navigation__link {
        padding-left: 2.8rem;
    }
    .article-navigation__richitem .article-navigation__link {
        height: 100%;
        padding: 3.2rem;
    }
    .article-navigation__richitem-next .article-navigation__link {
        align-items: flex-start;
    }
    .article-navigation__richitem .article-navigation__content {
        display: flex;
        flex-direction: column;
    }
    .article-navigation__richitem .article-navigation__image { order: 1; }
    .article-navigation__richitem .article-navigation__creator { order: 2; flex: 1; }
    .article-navigation__richitem .article-navigation__text { order: 3; }

    .article-navigation__title {
        font-size: 1.2rem; */
        line-height: 1.4;
    }
    .article-navigation__richitem .article-works-title {
        font-size: 1.4rem !important;
    }
    .article-navigation__richitem .article-navigation__category {
        font-size: 1.2rem;
    }
    .article-navigation__richitem .article-navigation__creator .creator-blocks__name {
        font-size: 1.1rem;
    }
    .article-navigation__richitem .article-navigation__creator .creator-blocks__image {
        width: 3.5rem;
        height: 3.5rem;
    }
    .article-navigation__richitem .article-navigation__label {
        font-size: 1.3rem;
    }
    .article-navigation__richitem .article-navigation__creator {
        margin-top: 2.2rem;
    }
    .article-navigation__richitem .article-navigation__text {
        margin-top: 1rem;
    }
}

@media screen and (max-width: 560px) {
    .article-navigation.article-navigation--works {
        border: 1px solid #E5E7EB;
    }

    .article-navigation--works .article-navigation__inner {
        flex-direction: row;
    }
    .article-navigation__richitem .article-navigation__link {
        padding: 3.2rem 1.2rem;
    }
    .article-navigation__item,
    .article-navigation__richitem {
        width: 100%;
    }

    .article-navigation__item-prev {
        text-align: left;
    }
    .article-navigation__item-next {
        text-align: right;
    }

    .article-navigation__label {
        font-size: 1.2rem;
    }

    .article-navigation__link {
        padding: 3.2rem 1.2rem 4.2rem;
        height: auto;
    }
    
    .article-navigation__item-prev .article-navigation__link {
        padding-left: 1.2rem;
    }
 
    .article-navigation__content {
        max-width: 25.5rem;
    }

}

/* ナビゲーション動画用 */
.nav-video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.nav-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
  display: block;
}

.nav-video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none; /* 動画へのクリックイベントを透過 */
}

/* ホバー時の切り替え */
@media (hover: hover) {
    .nav-video-wrapper.is-hovered video {
      opacity: 1;
    }
    
    .nav-video-wrapper.is-hovered .nav-poster {
      opacity: 0;
    }
}


/*********************
ARTICLE WORKS
*********************/
:root {
    /* 1. 矢印：出現アニメーション */
    --aw-line-easing: cubic-bezier(0.22, 1, 0.36, 1);

    /* 2. 下線：ホバー時のループ（左から伸びて右へ消える） */
    --aw-line-loop-speed: 2s;            /* 1サイクルの時間（短いほど速い） */

    /* 3. 矢印：SVG描画アニメーション */
    --aw-arrow-draw-speed: 0.7s;         /* 矢印が描かれる速度 */
    --aw-arrow-draw-delay: 0.9s;         /* 下線が伸びるタイミングに合わせた遅延 */
}
/* 記事カテゴリ・タイトル */
.article-works-category {
    font-size: 1.4rem;
    font-family: var(--font-main-en);
    letter-spacing: 0.05em;
    line-height: 1.5;
    font-weight: var(--normal);
    color: var(--text-gray);
}

/* --- タイトル全体 --- */
.article-works-title {
    font-size: 1.6rem;
    font-family: var(--font-main-en);
    letter-spacing: 0.05em;
    line-height: 1.5;
    font-weight: var(--normal);
    color: var(--text-black);
    display: flex;
    align-items: center;
    position: relative;
    width: fit-content;
    word-break: break-all;
    flex-wrap: wrap;
}

.article-works-title.article-works-title--sm {
    font-size: 1.8rem;
}

/* 文字（span）がアクティブになったら、親(h3)のafterを伸ばす */
.article-works-title:has([data-state="active"]) {
    overflow: visible;
}
.article-works-title:has([data-state="active"])::after {
    transform: scaleX(1);
    opacity: 1;
}

/* --- SVG矢印：spanのアクティブ化に連動 --- */
.article-works-title__arrow {
    margin-left: 1.6rem;
    display: flex;
}
.svg-arrow {
    overflow: visible;
}

.arrow-path {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    
    /* transitionの数値をパラメーター化 */
    transition: stroke-dashoffset var(--aw-arrow-draw-speed) var(--aw-line-easing);
    transition-delay: var(--aw-arrow-draw-delay); 
}

.article-works-title:has([data-state="active"]) .arrow-path {
    stroke-dashoffset: 0;
}

.article-roll-tag {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.article-roll-tag__item {
  display: inline-block;
  background-color: #fff;
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  color: var(--text-gray);
  border: 1px solid var(--border-gray);
  line-height: 1;
  font-size: 1rem;
  font-family: var(--font-main-en);
  font-weight: var(--normal);
  letter-spacing: 0;
}

.article-roll-tag__item--lg {
    font-size: 1.2rem;
}

@media (hover: hover) {
    .works-card__link:hover .article-works-title::after {
        /* animationの数値をパラメーター化 */
        animation: lineFlowEnhanced var(--aw-line-loop-speed) cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
}

@keyframes lineFlowEnhanced {
    0% {
        transform: scaleX(0);
        transform-origin: left;
    }
    35% {
        transform: scaleX(1);
        transform-origin: left;
    }
    35.1% {
        transform-origin: right;
    }
    75%, 100% {
        transform: scaleX(0);
        transform-origin: right;
    }
}

@media screen and (max-width: 960px) {
    .article-works-category { font-size: 1.3rem; }
    .article-works-title {
        font-size: 1.8rem;
    }
    
}

@media screen and (max-width: 560px) {
    .article-works-title {
        padding-right: 3rem;
        width: 100%;
    }
    .article-works-title__arrow {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
}


/*********************
FAQ
*********************/
.faq-layout {
    
}

.faq-layout__header {
    
}

.faq-layout__header h2 {
    margin-top: 1rem;
}

.faq-layout__content {
    max-width:75.8rem;
    margin-left: auto;
}

.faq {
    list-style: none;
}

.faq__item {
    padding: 4rem 2.5rem;
    border-bottom: 1px solid var(--border-gray);
}

.faq__item.faq__item--gray {
    border-bottom: 1px solid #4e4e4e;
}

.faq__item.faq__item--gray p {
    color: var(--text-gray);
}

.faq__question {
    font-size: 1.8rem;
    font-weight:var(--normal);
    line-height: 1.5;
    letter-spacing: 0.12em;
    margin-bottom: 1.5rem;
    color: var(--text-gray-h);
}

.faq__answer {

}

.faq__answer p {
    margin: 0;
    font-size: 1.4rem;
    font-weight: var(--normal);
    line-height: 2;
    letter-spacing: 0.12em;
}

@media screen and (max-width: 960px) {
    .faq-layout__header {
        margin-bottom: 10rem;
    }
    .faq-layout__content {
        max-width:100%;
        margin-left: 0;
    }
    .faq__item {
        padding: 5.5rem 0;
    }
}

@media screen and (max-width: 560px) {
   .faq__item {
        padding: 3rem 0;
    }
    .faq__question {
        font-size: 1.6rem;
        margin-bottom: 2rem;
        font-weight:var(--normal);
    }
    .faq__answer p {
        font-size: 1.3rem;
    }
}


/*********************
WORKS GALLERY
*********************/
/* WORKS・モーダル個別記事 */
.works-gallery {
    /* 基本設定 */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.works-gallery__heading {
    margin-bottom: 9rem;
}

.works-gallery__lists {
    display: flex;
    flex-direction: column;
    gap: 15rem;
}

.works-gallery__item {
    border-bottom: 1px solid var(--border-gray-light);
    padding-bottom: 5rem;
    display: flex;
    align-items: flex-end;
    gap: 3rem;
}

.works-gallery__mockup {
    overflow: hidden;
}

.works-gallery__mockup img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 800 / 294;
}

.works-gallery__item.works-gallery__singleitem {
    padding-bottom: 0;
    border-bottom: none;
}

.is-dark.works-gallery .works-gallery__item {
    border-bottom: 1px solid #4e4e4e;
}

.works-gallery__image {
    overflow: hidden;
    width: 54%;
}

.works-gallery__image img {
    aspect-ratio: 693 / 416;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.works-gallery__textarea {
    width: 43%;
}

.works-gallery__category {
    font-size: 1.6rem;
    font-weight: var(--normal);
    font-family: var(--font-main-en);
    line-height: 1.5;
    letter-spacing: 0.05em;
    margin: 0;
    margin-bottom: 1rem;
    color: var(--text-gray);
}

.works-gallery__title {
    font-size: 2.2rem;
    line-height: 1;
    letter-spacing: 0.015em;
    text-transform: capitalize;
    font-family: var(--font-main-en);
    font-weight: var(--medium);
}

/* .works-gallery__sub {
    display: flex;
    gap: 1rem;
}

.works-gallery__sub .works-gallery__item {
    width: 50%;
} */

.works-gallery__sub {
  display: flex;
  width: 100%;
  gap: 1rem;
  align-items: stretch;
}

.works-gallery__sub .works-gallery__item {
  flex-grow: var(--img-ratio);
  flex-basis: 0;
  min-width: 0;
  margin: 0;
}

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

@media screen and (max-width: 960px) {
    .works-gallery__lists {
        gap: 8rem;
    }
    .works-gallery__category {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
    .works-gallery__title {
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 768px) {
    .works-gallery__item {
        flex-direction: column;
    }
    .works-gallery__image {
        width: 100%;
    }
    .works-gallery__category {
        text-align: right;
    }
    .works-gallery__title {
        text-align: right;
    }
    .works-gallery__textarea {
        margin-left:auto;
    }
}

@media screen and (max-width: 560px) {
    .works-gallery__lists {
        gap: 6rem;
    }
    .works-gallery__item {
        gap: 2rem;
    }
    .works-gallery__sub {
        flex-direction: column;
    }
    .works-gallery__category {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    .works-gallery__title {
        font-size: 1.4rem;
    }
    .works-gallery__btn {
        margin-top: 4rem;
    }
}


/*********************
YouTubeポップアップ（モーダル）
*********************/
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex; /* 常時flexにしておき、visibilityで制御 */
  align-items: center;
  justify-content: center;
  
  /* 初期状態：非表示 */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
}

/* モーダルが開いた時 */
.video-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.video-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  width: 100%;
  height: 100%;
  display:block!important;
}

.video-modal__content {
  position: relative;
  width: 90%;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
  z-index: 1;

  /* アニメーションの初期状態：少し小さくしておく */
  transform: scale(0.9);
  transition: transform 0.4s ease-out;
}

/* モーダルが開いた時、コンテンツを等倍に戻す */
.video-modal.is-open .video-modal__content {
  transform: scale(1);
}

.video-modal__video-wrapper iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
}

/* 閉じるボタンのデザイン維持 */
.video-modal__btn {
    text-align: right;
    margin-bottom: 2rem;
}
.video-modal__close {
    background: #fff;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    border: 1px solid var(--border-gray);
    font-size: 2.8rem;
    font-family: var(--font-main-en);
    cursor: pointer;
    color: var(--bg-dark);
}
/*********************
Lexa実績ポップアップ
*********************/
/* --- 既存のベース設定 --- */
.modal-root {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    /* 背景のフェード時間を少し調整（お好みで） */
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.modal-root.is-open {
    visibility: visible;
    opacity: 1;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
    z-index: 0;
    display: block !important;
}

/* --- 拡大アニメーションの追加エリア --- */
.modal-container {
    position: relative;
    width: 90%;
    max-width: 80rem;
    height: 100%;
    z-index: 1;
    padding-top: 10rem;
    pointer-events: none;

    /* アニメーションの初期状態：少し小さくしておく */
    transform: scale(0.8);
    opacity: 0;
    /* スムーズかつ少し弾むような動き（cubic-bezier） */
    transition: transform 0.3s ease-out, opacity 0.2s ease-out;
}

/* モーダルが開いた時、containerを等倍に戻す */
.modal-root.is-open .modal-container {
    transform: scale(1);
    opacity: 1;
}

/* -------------------------------------- */

.modal-container.modal-container--product {
    max-width: 120rem;
    display: flex;
    align-items: center;
}

.modal-content {
    pointer-events: auto;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10rem;
    scrollbar-width: none;
    border-radius: 1rem 1rem 0 0;
}

.modal-content::-webkit-scrollbar {
    display: none;
}

.modal-container.modal-container--product .modal-content {
    display: flex;
    align-items: center;
    padding-bottom: 0;
    height: auto;
    border-radius: 0.5rem;
}

.modal-inner {
    background-color: #fff;
    width: 100%;
    min-height: 100%;
    position: relative;
    margin-top: 0;
    padding: 4.5rem;
    border-radius: 1rem;
}

.modal-container.modal-container--product .modal-inner {
    min-height: auto;
    background-color: transparent;
    padding: 0 9.5rem;
    border-radius: 0.5rem;
}

.modal-close-btn {
    position: absolute;
    top: 12rem;
    right: 2.4rem;
    width: 4rem;
    height: 4rem;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    /* ボタンもふわっと出すなら transition 追加 */
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0; /* 最初は隠す */
}

/* モーダルが開いたらボタンも表示 */
.modal-root.is-open .modal-close-btn {
    opacity: 1;
}

.modal-close-btn.modal-close-btn--white {
    background: rgba(255, 255, 255, 0.45);
}

.modal-close-btn span {
    width: 4rem;
    height: 4rem;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.modal-close-btn span::before,
.modal-close-btn span::after {
    content: '';
    position: absolute;
    width: 2.3rem;
    height: 1px;
    background: #fff;
    top: 1.9rem;
    left: 0.9rem;
}

.modal-close-btn span::before {
    transform: rotate(45deg);
}

.modal-close-btn span::after {
    transform: rotate(-45deg);
}

.modal-close-btn.modal-close-btn--white span::before,
.modal-close-btn.modal-close-btn--white span::after {
    background: #000;
}

body.is-modal-open {
    overflow: hidden;
}

/* --- Responsive --- */
@media screen and (max-width: 960px) {
    .modal-container {
        padding-top: 5rem;
    }
    .modal-content {
        padding-bottom: 5rem;
    }
    .modal-container.modal-container--product .modal-inner {
        padding: 0;
    }
    .modal-close-btn {
        top: 6rem;
        right: 1.2rem;
    }
}

@media screen and (max-width: 560px) {
    .modal-inner {
        padding: 2rem 1.8rem;
    }
    .modal-container {
        padding-top: 1.5rem;
        width: calc(100% - 3.6rem);
    }
    .modal-content {
        padding-bottom: 1.5rem;
    }
    .modal-close-btn {
        top: 2.4rem;
        right: 0.9rem;
    }
}

/* モーダル内・待機アニメーション用スタイル */
.js-modal-wait-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.js-modal-wait-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}


/******************************************
WEB制作コース
******************************************/
/*********************
プロモーションムービー
*********************/
.direction-movie {
    background: var(--bg-dark-light);
    margin-top: -1px;/* 隙間対策 */
}

.direction-movie__movie {
    max-width: 88rem;
    margin-right: auto;
    margin-left: auto;
    margin-top: 7rem;
}

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

@media screen and (max-width: 560px) {
    .direction-movie {
        padding-block: 14rem 20rem!important;
    }
    .direction-movie__movie {
        margin-top: 5rem;
    }  
}

.movie-title__en {
  font-family: var(--font-main-en);
  font-size: 3.6rem;
  font-weight: var(--light);
  letter-spacing: -0.005em;
  line-height: 1;
  margin: 0;
  color: #fff;
}

.movie-title__jp {
    font-size: 1.6rem;
    font-weight: var(--normal);
    color: var(--text-gray-h);
    letter-spacing: 0.24em;
    line-height: 1.5;
    margin-top:  1.4rem;
}

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

@media screen and (max-width: 560px) {
    .movie-title__en {
        font-size: 2.6rem;
        color: var(--text-gray);
    }
    .movie-title__jp {
        font-size: 1.3rem;
        margin-top: 0.9rem;
    }
}

/* ムービーリンク */
.link-movie {
    position: relative;
    display: block;
    transition: all .3s;
    cursor: pointer;
}

.link-movie--pv video {
    aspect-ratio: 16 / 8.8;
    width: 100%;
    height: 100%;
    overflow:hidden;
    object-fit:cover;
}

.link-movie__btn {
    position: absolute;
    bottom: 3.3rem;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}

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

@media screen and (max-width: 560px) {
   .link-movie__btn {
        bottom: 2.4rem;
    } 
}

/*********************
コースの特徴
*********************/
.direction-feature {
    background: var(--bg-dark-light);
    color: #fff;
    overflow: hidden;
    margin-top: -1px;/* 隙間対策 */
}

.direction-feature__head {
    position: relative;
    width: calc(100% + (100vw - 100%) / 2);
    margin-right: calc(50vw - 50%);
}

.direction-feature__image {
    overflow: hidden;
    position: relative;
}

.direction-feature__image::after {
    display:none;
}

.direction-feature__image img,
.direction-feature__image video {
    aspect-ratio: 1325 / 702;
    width: 100%;
    height: 100%;
    min-height: 60rem;
    max-height: 75rem;
    object-fit: cover;
    display: block;
}

.direction-feature__heading {
    color: #fff;
    position: absolute;
    top: 53rem;
    right: 14rem;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: fit-content;
}
.direction-feature__heading h2 {
    color: #fff;
    font-size: 13rem;
    font-weight: var(--bold);
    letter-spacing: 0.22em;
    line-height:1;
    writing-mode: vertical-rl;
    display: flex;
}

.direction-feature__heading h2 span {
    font-size: 13rem;
    color: #fff;
    writing-mode: vertical-rl;
    display:inline-block;
}

.direction-feature__heading > span {
    font-family: var(--font-main-en);
    writing-mode: vertical-rl;
    font-size: 3.9rem;
    color: var(--text-gray);
    letter-spacing: -0.005em;
    line-height: 1.2;
    margin-top: 1rem;
    margin-left: 4rem;
    display: block;
    align-self: flex-start;
}

.direction-feature__textarea {
    margin-top: 14rem;
    width: 58%;
    max-width: 64.5rem;
}

.direction-feature__textarea h3 {
    font-size: 2.4rem;
    font-weight: var(--normal);
    line-height: 1.5;
    letter-spacing: 0.12em;
    color: #fff;
    margin-bottom: 3.6rem;
}

.direction-feature__textarea p {
    color: #fff;
    margin: 0;
}

.direction-feature__textarea p + p {
    margin-top: 3rem;
}



@media only screen and (min-width: 1920px) {
    .direction-feature__head {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

@media screen and (max-width: 1280px) {
    .direction-feature__heading {
        right: 8rem;
    }
}
@media screen and (max-width: 960px) {

    .direction-feature__image img,
    .direction-feature__image video {
        min-height: 0;
    }
    .direction-feature__heading {
        top: 26rem;
        right: 4rem;
    }
    .direction-feature__heading h2 {
        font-size: 10.6rem;
    }

    .direction-feature__heading h2 span {
        font-size: 10.6rem;
    }

    .direction-feature__heading > span {
        font-size: 2.6rem;
        margin-top: 0.2rem;
        margin-left: 1.5rem;
        display: flex;
        height: auto;
    }
    .direction-feature__textarea {
        margin-top: 20rem;
        max-width: 100%;
    }
    .direction-feature__textarea {
        margin-top: 8rem;
        max-width: 100%;
    }
}

@media screen and (max-width: 560px) {
    .direction-feature {
        padding-block: 19rem 22rem!important;
    }
    .direction-feature01 {
        padding-top: 24rem!important;
    }
    .direction-feature__image,
    .direction-feature__image {
        aspect-ratio: 335 / 276;
        width: 100%;
        height: 100%;
    }
    .direction-feature__image img,
    .direction-feature__image video {
        aspect-ratio: 335 / 276;
        width: 100%;
        height: 100%;
        min-height: 0;
    }
    .direction-feature__head {
        margin-right:0;
        width: 100%;
    }
    .direction-feature__heading h2 {
        font-size: 5.5rem;
    }
    .direction-feature__heading h2 span {
        font-size: 5.5rem;
    }

    .direction-feature__heading > span {
        font-size: 1.8rem;
        margin-top: 0.1rem;
        margin-left: 1.4rem;
    }
    .direction-feature.direction-feature01 .direction-feature__heading {
        top: -24.3rem;
        right: 0rem;
    }
    .direction-feature.direction-feature02 .direction-feature__heading {
        top: -18rem;
        right: 0rem;
    }
    .direction-feature.direction-feature03 .direction-feature__heading {
        top: -17.8rem;
        right: 0rem;
    }
    .direction-feature__textarea {
        margin-top: 10.6rem;
        width: 100%;
        max-width: 100%;
    }
    .direction-feature__textarea h3 {
        font-size: 1.6rem;
        line-height: 1.8;
        letter-spacing: 0.12em;
        font-weight: var(--normal);
    }
    .direction-feature__textarea p {
        font-size: 1.3rem;
    }
}


/*********************
MEMBER RESULT
*********************/
.direction-result {
    margin-top: -1px;/* 隙間対策 */
    padding-bottom: 45rem;
}

.direction-result__title {
    margin-bottom: 9rem;
}
@media screen and (max-width: 960px) {
    
}

@media screen and (max-width: 560px) {
    .direction-result__title {
        margin-bottom: 4rem;
    }  
}


/*********************
VIDEO BRIDGE
*********************/
.video-accent-section {
    background: #fff;
    padding-block: 0;
    z-index: 2;
    margin-top: -1px;/* 隙間対策 */
}
.video-accent-section.is-dark {
    background: var(--bg-dark-light);
}
.video-accent {
    position: relative;
    z-index: -1;
    height: 100%;
}
.video-accent::after {
    position: absolute;
    content:'';
    width: 100%;
    height: 100%;
    background: #000;
    top: 0;
    left: 0;
    opacity: 0.2;
}
.video-accent video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

@media screen and (max-width: 560px) {
    .video-accent-section {
        padding-block: 0 5rem;
    }   
    .video-accent-section.is-dark {
        padding-block: 5rem;
        background: var(--bg-dark-light);
    }
}

/*********************
CONTENT
*********************/
.direction-content {
    background: var(--bg-dark-light);
    color: #fff;
    padding-bottom: 0;
}

.direction-content h2 {
    color: #fff;
}
.direction-content__inner {
    padding-bottom: 8rem;
}

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

@media screen and (max-width: 560px) {
   .direction-content__inner {
        padding-block: 25rem!important;
    } 
}


/* コンテンツサイドバー */
.sticky-layout {
  display: flex;
  gap: 6.5rem;
  align-items: stretch;
  justify-content: center;
  padding-bottom: 37rem;
}

.sticky-layout__sidebar-outer {
    width: 48.5rem;
    flex-shrink: 1;
}

.sticky-layout__sidebar {
    position: sticky;
    top: 12vh;
    height: calc(100vh - 12vh - 3vh);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sticky-layout__main {
  margin-top: 60rem;
  /* padding-bottom: 37rem; */
  max-width: 75.8rem;
  width: 100%;
}

.sticky-layout__content-block {
    padding-top:12vh;
}

.sticky-layout__content-block + .sticky-layout__content-block {
    margin-top: 5rem;
}

.sticky-layout__content-block video,
.sticky-layout__content-block img {
    aspect-ratio: 758 / 378;
    max-width: 75.8rem;
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
}

.sticky-layout__content-block--resize {

}

.sticky-nav__list {
  list-style: none;
  padding: 0;
}

.sticky-nav__item + .sticky-nav__item {
  margin-top: 0.7rem;
}

.sticky-nav__link {
  display: block;
  text-decoration: none;
  color: var(--text-gray);
  font-size: 1.8rem;
  font-family: var(--font-main-en);
  font-weight: var(--normal);
  text-transform: none;
  line-height: 2;
  letter-spacing: -0.005em;
  transition: all 0.3s;
  position: relative;
}

.sticky-nav__link.is-active {
  color: var(--bg-dark);
}

.sticky-nav.is-dark .sticky-nav__link.is-active {
  color: #fff;
}

.sticky-nav__link.sticky-nav__link--jp {
    font-size: 1.6rem;
    font-family: var(--font-main-ja);
}

.sticky-nav__link.sticky-nav__link--jp.is-active {
    font-size: 1.8rem;
}

.sticky-nav__num {
    font-family: var(--font-main-en);
}

.sticky-layout__head {
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
}

.sticky-layout__title {
    font-size: 3.4rem;
    font-weight: var(--light);
    font-family: var(--font-main-en);
    line-height: 1;
    letter-spacing: -0.005em;
    display: flex;
    align-items: flex-end;
    gap: 0;
    margin: 0;
}

.sticky-layout__title span {
    margin-right:1rem;
}

.sticky-layout__title-jp {
    font-size: 1.6rem;
    font-weight: var(--bold);
    color: var(--text-gray2);
    line-height: 1;
    letter-spacing: 0.12em;
}

.sticky-layout__title-jp.sticky-layout__title-jp--ls-wide {
    letter-spacing: 0.52em;
}

.sticky-layout__heading {
    margin-top: 5rem;
}

.sticky-layout__text {
    margin: 0;
    margin-top: 3rem;
    font-size:1.4rem;
    line-height: 2;
}

.sticky-layout__text + .sticky-layout__text,
.sticky-layout__text + .sticky-layout__lists,
.sticky-layout__lists + .sticky-layout__text {
    margin-top: 1rem;
}


.sticky-layout__lists {
    margin: 0;
    margin-left: 1.5rem;
}

.sticky-layout__textarea {
    max-width: 59.5rem;
}


.sticky-layout__textarea.sticky-layout__textarea--md {
    max-width: 57.2rem;
}

.sticky-layout__textarea.sticky-layout__textarea--fs-sm .sticky-layout__lists {
    font-size: 1.4rem;
}

.sticky-layout__textarea.sticky-layout__textarea--sm {
    max-width: 51.5rem;
}

.sticky-layout__textarea.sticky-layout__textarea--sm .sticky-layout__text + .sticky-layout__text {
    margin-top: 2.5rem;
}

@media (max-width: 960px) {
    .sticky-layout {
        flex-direction: column;
        gap: 0;
        padding-bottom: 0;
    }
    .sticky-layout__sidebar-outer {
        width: 100%;
    }
    .sticky-layout__sidebar {
        position: relative;
        top: 0;
        width: 100%;
        margin-bottom: 0;
        height: auto;
    }
    .sticky-nav {
        display: none;
    }
    .sticky-nav__list {
        margin-top: 10rem;
        margin-bottom: 0;
    }
    .sticky-layout__main {
        margin-top: 0;
        padding-bottom: 0;
        max-width: 100%;
    }
    .sticky-layout__head {
        margin-bottom: 4rem;
    }
    .sticky-layout__content-block + .sticky-layout__content-block {
        margin-top: 0;
    }
    .sticky-layout__content-block img, 
    .sticky-layout__content-block video {
        max-width: 100%;
    }
    .sticky-layout__content-block img {
        width: 100%;
    }
}

@media screen and (max-width: 560px) {
    .sticky-nav__list {
        margin-top: 6rem;
    }
    .sticky-nav__link {
        color: var(--text-black)!important;
    }
    .sticky-nav.is-dark .sticky-nav__link {
        color: #fff!important;
    }
    .sticky-layout__heading {
        margin-top: 4.5rem;
    }
    .sticky-layout__heading.sticky-layout__heading-reverse {
        display: flex;
        flex-direction: column-reverse;
        gap: 1rem;
    }
    .sticky-layout__text,
    .sticky-layout__textarea.sticky-layout__textarea--fs-sm .sticky-layout__lists {
        font-size:1.3rem;
    }
    .sticky-layout__textarea.sticky-layout__textarea--sm .sticky-layout__text + .sticky-layout__text {
        margin-top: 1.5rem;
    }
    .sticky-layout__head {
        margin-bottom: 2rem;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .sticky-layout__title {
        font-size: 1.5rem;
    }
    .sticky-layout__title-jp {
        font-size: 1.2rem;
        font-weight: var(--normal);
    }
    .sticky-layout__lists {
        font-size: 1.3rem;
        margin-left: 1.2rem;
    }
}


/*********************
COMPANY
*********************/
.direction-company {
    position: relative;
    background:var(--bg-dark-light);
    z-index: 2;
    margin-top: -1px;/* 隙間対策 */
}

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

@media screen and (max-width: 560px) {
    .direction-company {
        padding-block: 18rem 12.3rem;
    }  
}

/*********************
WORKS
*********************/
.direction-works {
    padding-bottom: 25rem;
    background:var(--bg-dark-light);
    z-index: 2;
    margin-top: -1px;/* 隙間対策 */
}
.direction-works__title {
    margin-bottom: 3.5rem;
}

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

@media screen and (max-width: 560px) {
    .direction-works {
        padding-top: 0;
        padding-bottom: 18rem;
    }
}

/*********************
INTERVIEW
*********************/
.direction-interview {
    background:#000;
    color: #fff;
    padding-top: 25rem;
    padding-top: 45rem;
    z-index: 2;
    position: relative;
    margin-top: -1px;/* 隙間対策 */
}
.direction-interview::after {
    position: absolute;
    content: '';
    background: var(--bg-dark-light);
    width: 100%;
    height: 20%;
    bottom: 0;
    left: 0;
}
.direction-interview__title {
    text-align: right;
}
.direction-interview h2,
.direction-interview h3 {
    color: #fff;
}

@media screen and (max-width: 960px) {
    .direction-interview::after {
        height: 30%;
    }
}

@media screen and (max-width: 560px) {
    .direction-interview {
        padding-top: 20rem;
        padding-bottom: 30rem;
    }
}


/*********************
FAQ
*********************/
.direction-faq {
    padding-top: 25rem;
    background: var(--bg-dark-light);
    color: #fff;
    z-index: 2;
    margin-top: -1px;/* 隙間対策 */
}
.direction-faq h2,
.direction-faq h3 {
    color: #fff;
}

@media screen and (max-width: 960px) {
    .direction-faq {
        padding-block: 15rem 30rem;
    }   
}

@media screen and (max-width: 560px) {
    .direction-faq {
        padding-block: 15rem 30rem;
    }   
}

/*********************
MESSAGE
*********************/
.direction-message {
    background: var(--bg-dark-light);
    padding-block: 5rem 45rem;
    z-index: 2;
}

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

@media screen and (max-width: 560px) {
    .direction-message {
        padding-block: 15rem;
    }   
}

.direction-message__container {
    position: relative;
    z-index: 1;
}

.direction-message__video {
    width: 100%;
    height: 101%;
    position: absolute;
    top: 0;
    left: 0;
    clip-path: inset(0); 
    z-index: 0;
}

.direction-message__video video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.direction-message__video::after {
    width: 100%;
    height: 102%;
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    background: var(--bg-dark);
    opacity: 0.75;
    z-index: 1;
}

/* メッセージサイドバー */
.video-side-layout {
    display: flex;
    gap: 8rem;
    align-items: stretch;
    z-index: 0;
    position: relative;
}

.video-side-layout__sidebar-outer {
    width: 55.5rem;
    flex-shrink: 1;
    position: relative;
    padding-top: 48rem;
}

.video-side-layout__sidebar {
    position: sticky;
    top: 6rem;
}

.video-side-layout__sidebar video {
    aspect-ratio: 605 / 941;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.video-side-layout__main {
  margin-top: 120rem;
}

.video-side-layout__content-block {
    padding-top:12rem;
}

@media screen and (max-width: 960px) {
    .video-side-layout__main {
        margin-top: 8rem;
    }
    .video-side-layout {
        flex-direction: column;
        gap: 4rem;
        margin-top: 5rem;
    }
    .video-side-layout__sidebar-outer {
        width: 100vw;
        height: 100%;
        position: fixed;
        padding-top: 0;
        top: 0;
        left: 0;
        z-index: -1;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    .video-side-layout__sidebar{
        top: 0;
    }
    .video-side-layout__sidebar::before {
        content:'';
        position: absolute;
        background: #000;
        opacity: 0.7;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }
    .video-side-layout__sidebar video {
        width: 100%;
        height: 100vh;
        object-fit: cover;
    }
}

@media screen and (max-width: 560px) {
    .video-side-layout__main {
        margin-top: 8rem;
    }
    .video-side-layout__content-block {
        padding-top: 0;
    }
}


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

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

/* メッセージコンポーネント */
.message {
    max-width: 56rem;
}

.is-dark.message,
.is-dark.message h2 {
    color: #fff;
}

.message__title {
    font-size: 2.8rem;
    line-height: 2;
    letter-spacing: 0.12em;
    font-weight: var(--normal);
}

.message__textarea {
    margin-top: 7.5rem;
}

.message__textarea.message__textarea--mb0 {
    padding-bottom: 60rem;
}

.message__textarea.message__textarea--lh2 .message__text {
    line-height: 2;
}

.message__text {
    margin: 0;
    font-size: 1.4rem;
    font-weight: var(--normal);
    line-height: 3.5;
    letter-spacing: 0.12em;
}

.message__text + .message__text {
    margin-top: 3rem;
}

.message__text.message__text--lg {
    font-size: 2.4rem;
    line-height: 1.5;
    font-weight: var(--normal);
    margin-top: 7.5rem;
}

@media screen and (max-width: 960px) {
    .message__textarea {
        padding-bottom: 8rem;
    }
}

@media screen and (max-width: 560px) {
    .message__title {
        font-size: 1.6rem;
    }
    .message__textarea {
        margin-top: 6rem;
    } 
    .message__text {
        font-size: 1.3rem;
        line-height: 2.5;
    }
    .message__text.message__text--lg {
        font-size: 1.6rem;
        margin-top: 6rem;
    }    
}

/*********************
GALLERY
*********************/
.direction-gallery {
    background: var(--bg-dark-light);
    z-index: 2;
    padding-block: 25rem 4rem;
    margin-top: -1px;/* 隙間対策 */
}
.direction-gallery__inner {
    padding-inline: 1.2rem;
}

.direction-gallery .course-gallery__item::after {
    background: var(--bg-dark-light);
}

@media screen and (max-width: 960px) {
    .direction-gallery {
        padding-block: 2.5rem;
        background: #1A1A1A;
    }
    .direction-gallery .course-gallery__item::after {
        background: #1A1A1A;
    }
}

@media screen and (max-width: 560px) {
    .direction-gallery {
        padding-block: 1.7rem;
    }  
}

/* コンテナの設定 */
.course-gallery {
  display: grid;
  /* 列の比率はそのままに、1frなどの可変単位を推奨 */
  grid-template-columns: 462fr 489fr 432fr;
  /* 行の高さは中身（アスペクト比）に合わせて可変にする */
  grid-template-rows: auto; 
  gap: 15px;
}

/* 共通設定 */
.course-gallery__item {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

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

/* --- ここが重要：各エリアにアスペクト比を持たせる --- */

/* テキストエリアは中身に合わせて伸縮させるので aspect-ratio は不要 */
.course-gallery__text {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    padding: 20px;
}

.course-gallery__text h2 {
    color: var(--text-gray);
    font-family: var(--font-main-en);
    font-weight: var(--light);
    font-size: 3.6rem;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-size: clamp(2.4rem, 2.5vw, 3.6rem);
    letter-spacing: -0.005em;
    line-height: 1;
}



@media screen and (min-width: 961px) {
.course-gallery__item01 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  /* 横：縦の比率を指定（元の 951px : 428px 相当） */
}

.course-gallery__item02 {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
  /* 432px : 582px 相当 */
  aspect-ratio: 432 / 598;
}

.course-gallery__item03 {
  grid-column: 1 / 2;
  grid-row: 2 / 4;
  /* 462px : 453px 相当 */
  aspect-ratio: 462 / 469;
}
.course-gallery__item04 {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
}
}

@media screen and (max-width: 960px) {
  .course-gallery {
    display: grid;
    gap: 1rem;
    grid-template-columns: 239fr 100fr;
    grid-template-rows: 20.7rem 10.7rem 24.5rem 21.5rem;
  }

  /* 1段目左：画像01 */
  .course-gallery__item01 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  /* 1〜2段目右：画像02 (縦長に結合) */
  .course-gallery__item02 {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
  }

  /* 2段目左：テキストエリア */
  .course-gallery__text {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding-left: 0;
  }

  .course-gallery__text h2 {
    font-size: clamp(1.4rem, 3.8vw, 2.4rem);
    line-height: 1.2;
    color: #999; /* グレー系 */
  }

  /* 3段目：画像03 (横いっぱい) */
  .course-gallery__item03 {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
  }

  /* 4段目：画像04 (横いっぱい) */
  .course-gallery__item04 {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
  }

  /* 画像の高さ調整（必要に応じて） */
  .course-gallery__item img {
    height: 100%;
    aspect-ratio: auto;
  }
}

@media screen and (max-width: 560px) {
    .course-gallery {
        grid-template-rows: 15.7rem 7.7rem 19.5rem 16.5rem;
    }
  .course-gallery__text h2 {
    font-size: 1.8rem;
  }
}

/******************************************
ノンデザコミュニティ
******************************************/
/*********************
MESSAGE
**********************/
.community-message {
    background: #fff;
    padding-bottom:20rem;
    z-index: 2;
}

/*********************
MEMBER RESULT
**********************/
.community-result {
    overflow: hidden;
    z-index: 2;
}

/*********************
COMMUNITY DATA
**********************/
.community-data {
    background: #fff;
    padding-bottom: 25rem;
    z-index: 2;
}

.community-data__container {
    max-width: 131rem;
}

.community-data__grid {
    display: grid;
    grid-template-columns: 375fr 513fr 405fr;
    gap: 0.85rem;
    margin-top: 9rem;
    width: 100%;
}

.community-data__item {
    border: 1px solid var(--border-gray);
    padding: 4rem 3.5rem 4rem 2.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.community-data__label {
    font-size: 1.3rem;
    font-family: var(--font-main-en);
    font-weight: var(--medium);
    letter-spacing: 0.01em;
    line-height:1.5;
    color: #333;
    margin-bottom: 4rem;
}

.community-data__number-wrapper {
    font-size: 8.4rem;
    line-height:1;
    letter-spacing: -0.05em;
    font-family: var(--font-main-en);
    font-weight: var(--medium);
    margin-bottom: 4.5rem;
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex: 1;
}

.community-data__unit {
    font-size: 4.5rem;
    line-height:1;
    font-family: var(--font-main-en);
    font-weight: var(--medium);
    margin: 0 0 0 15px;
}

.community-data__yen {
    font-size:2.0rem;
    font-weight: var(--bold);
    letter-spacing: 0.13em;
    line-height: 1;
    margin-left: 1.2rem;
}

.community-data__text {
    font-size: 1.6rem;
    font-weight: var(--normal);
    letter-spacing: 0.12em;
    line-height: 2;
    margin: 0;
    text-align: right;
}

.community-data__note {
    text-align: right;
    font-size: 1.2rem;
    font-weight: var(--normal);
    margin-top: 2rem;
    letter-spacing: 0.12em;
    line-height: 2;
}

@media screen and (max-width: 1280px) {
     .community-data {
        position: relative;
        top: auto;
    }
    .community-data__label {
        margin-bottom: 4.5rem;
    }
    .community-data__grid {
        grid-template-columns: 1fr 1fr;
        margin-top: 7rem;
    }
    .community-data__item {
        padding-inline: 2.5rem;
    }

    .community-data__note {
        text-align: left;
    }
}

@media screen and (max-width: 960px) {
     .community-data {
        padding-top: 10rem;
        padding-bottom: 6rem;
        position: relative;
        top: auto;
    }
    .community-data__number-wrapper {
        font-size: 8vw;
    }
    .community-data__text {
        font-size: 1.4rem;
    }
    .community-data__note {
        text-align: left;
    }
}

@media screen and (max-width: 560px) {
    .community-data__container {
        max-width: 100%;
    }

    .community-data__grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        margin-top: 5rem;
    }
    .community-data__item {
        align-items: flex-start;
        padding: 3.5rem 3.5rem 2.5rem;
    }
    .community-data__label {
        margin-bottom:2.5rem;

    }
    .community-data__number-wrapper {
        font-size: 5.2rem;
        margin-bottom: 1.5rem;
    }
    .community-data__text {
        font-size: 1.4rem;
        text-align: left;
    }
}

/*********************
CONTENT
**********************/
.community-content {
    background: #fff;
    z-index: 2;
}

.community-content__title {
    margin-bottom: 9rem;
}

@media (max-width: 960px) {
    .community-content {
        padding-block: 20rem;
    }
}

/*********************
COMMPANY
**********************/
.community-company {
    background: #fff;
    z-index: 2;
}
@media screen and (max-width: 960px) {
    .community-company {
        padding-block: 18rem;
    }
}

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

/*********************
WOKRS
**********************/
.comunity-works {
    background: #fff;
    z-index: 2;
    margin-top:-1px;
}
@media screen and (max-width: 960px) {
    
}

@media screen and (max-width: 560px) {
    .comunity-works {
        padding-bottom: 18rem;
    }
}

/*********************
INTERVIEW
**********************/
.community-interview {
    background: #fff;
    z-index: 2;
    padding-top: 45rem;
}

.community-interview__title {
    text-align: right;
}

@media screen and (max-width: 960px) {
    .community-interview::after {
        position: absolute;
        content: '';
        background: #fff;
        width: 100%;
        height: 30%;
        bottom: 0;
        left: 0;
    }
}

@media screen and (max-width: 560px) {
    .community-interview {
        padding-top: 20rem;
    }  
}

/*********************
FAQ
**********************/
.community-faq {
    background: #fff;
    z-index: 2;
}

/*********************
GALLERY
**********************/
.community-gallery {
    background: #fff;
    padding-block: 25rem 4rem;
    z-index: 2;
}
.community-gallery__inner {
    padding-inline: 1.2rem;
}

@media screen and (max-width: 960px) {
    .direction-gallery {
        padding-block: 2.5rem;
    }  
}

@media screen and (max-width: 560px) {
    .direction-gallery {
        padding-block: 1.7rem;
    }  
}



/*********************
COURSE CTA
*********************/
.cta {
    padding-block: 23.5rem 22.5rem;
    color: #fff;
    position: relative;
    /* 修正ポイント1: clip-pathで表示領域を制限 */
    clip-path: inset(0); 
    z-index: 2;
    margin-top: -1px; /* 隙間対策 */
    will-change: unset;
}

.cta__content {
    max-width: 48.8rem;
    margin-left: auto;
    position: relative;
    z-index: 2;
}

/* 中略（既存のheading, text, btn等はそのまま） */

.cta__video {
    /* 修正ポイント2: 親要素を画面いっぱいに固定 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* コンテンツの背後に配置 */
    pointer-events: none; /* 動画上のクリックを無効化してボタン等を触れるようにする */
}

.cta__video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta__video::after {
    width: 100%;
    height: 100%;
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.6;
    z-index: 1;
}

@media screen and (max-width: 960px) {
    .cta__content {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .cta__btn a {
        margin-inline: auto;
    }
}

@media screen and (max-width: 560px) {
    /* 修正ポイント3: SPでも固定を維持する場合、ここでのposition指定を整理 */
    .cta__video {
        position: fixed;
    }
    
    .cta__heading {
        font-size: 1.6rem;
    }

    .cta__text {
        margin-top: 3rem;
        font-size: 1.3rem;
        text-align: left;
    }

    .cta__btn a {
        margin-top: 3rem;
    }
}


/******************************************
コーディングコース
******************************************/
/*********************
ファーストビュー
*********************/
.basic-course-fv {
    padding-block: 11rem 0rem;
    height: calc(100vh - 7.7rem);
}

.basic-course-fv__inner {
    padding: 0 var(--fv-container-side);
}

.basic-course-fv__inner,
.basic-course-fv__movie {
    height: calc(100vh - 42rem);
}

.basic-course-fv__movie video {
    width: 101%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    max-height: calc(100vh - 42rem);
}

.basic-course-fv__content {
    margin-top: 6.4rem;
}

@media screen and (max-width: 1280px) {
    .basic-course-fv {
        padding-block: 6rem 0rem;
    }
    .basic-course-fv__inner,
    .basic-course-fv__movie {
        height: calc(100vh - 35rem);
    }
    .basic-course-fv__movie video {
        max-height: calc(100vh - 35rem);
    } 
}

@media screen and (max-width: 990px) {
    .basic-course-fv {
        height: calc(100vh - 5.7rem);
    }
    .basic-course-fv__inner,
    .basic-course-fv__movie {
        height: calc(100vh - 30rem);
    }
    .basic-course-fv__movie video {
        max-height: calc(100vh - 30rem);
    }    
}

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

}

@media screen and (max-width: 560px) {
    .basic-course-fv {
        padding-block: 1rem 0rem;
    }
    .basic-course-fv__inner {
        padding-inline: 1rem;
    }
    .basic-course-fv,
    .basic-course-fv__inner,
    .basic-course-fv__movie {
        height: auto;
    }
    .basic-course-fv__movie video {
        height: calc(100svh - 22.3rem);
        max-height: 100%;
    }
}

/*********************
ABOUT
*********************/
.cording-about {

}
.cording-about__title {
    margin-bottom: 17rem;
}

@media screen and (max-width: 960px) {
    .cording-about {
        padding-block: 16rem!important;
    }
}

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

}

/*********************
POST-COURSE FUTURE
*********************/
.cording-future {
    background: #fff;
    z-index: 2;
}

@media screen and (max-width: 560px) {
    .cording-future {
        padding-block: 10rem!important;
    }
}

/*********************
ブリッジセクション
*********************/


/*********************
CURRICULUM
*********************/
.cording-curriculum {
    background: #fff;
    z-index: 2;
}
@media screen and (max-width: 960px) {
    .cording-curriculum {
        padding-block: 30rem 15rem;
    }
}

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

}

/*********************
BONUS
*********************/
.cording-bonus {
    background: #fff;
    z-index: 2;
}

.cording-bonus__title {
    margin-bottom: 12rem;
}

@media screen and (max-width: 960px) {
    .cording-bonus {
        padding-block: 15rem;
    }
    .cording-bonus__title {
        text-align: left;
        margin-bottom: 5rem;
    }
}

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

}

/*********************
ビジュアルコンテンツ
*********************/
/*  */
.large-content-block {

}

.large-content-block + .large-content-block {
    margin-top: 20rem;
}

.large-content-block__visual {

}

.large-content-block__body {
    margin-top: 4.7rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4rem;
}

.large-content-block__header {

}

.large-content-block__title {

}

.large-content-block__label {
    margin: 0;
    margin-top: 1.2rem;
}

.large-content-block__text {
    max-width: 63rem;
    width: 100%;
}

.large-content-block__text p {
    margin: 0;
}

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

}

@media screen and (max-width: 560px) {
    .large-content-block__body {
        margin-top: 3.5rem;
        gap: 3.5rem;
    }
    .large-content-block + .large-content-block {
        margin-top: 9rem;
    }
}

/*********************
モーダルカード
*********************/
.modal-card-2col {
    display: flex;
    justify-content: space-between;
}

.modal-card {
    aspect-ratio: 608 / 343;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    padding: 2.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.modal-card-2col .modal-card {
    width: 47.5%;
}

.modal-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
    aspect-ratio: 608 / 343;
    object-fit: cover;
    z-index: -1;
    top: 0;
    left: 0;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-card__badge {
    border: 1px solid #fff;
    color: #fff;
    border-radius: 0.3rem;
    width: fit-content;
    padding: 0.7rem 1rem;
}

.modal-card__badge-en {
    font-size: 1.2rem;
    font-family: var(--font-main-en);
    font-weight: var(--normal);
    letter-spacing: 0.09em;
    line-height: 1;
    margin: 0;
    margin-bottom: 0.4rem;
}

.modal-card__badge-jp {
    font-size: 1.4rem;
    letter-spacing: 0.65em;
    display: flex;
    justify-content:center;
    align-items:center;
    line-height: 1;
    margin: 0;
}

.modal-card__badge.modal-card__badge--black {
    border-color: var(--text-gray2);
    margin: 0 auto 2rem;
}

.modal-card__badge.modal-card__badge--black .modal-card__badge-en,
.modal-card__badge.modal-card__badge--black .modal-card__badge-jp {
    color: var(--text-gray2);
}

.modal-card__badge-jp span {
    font-family: var(--font-main-en);
    display: block;
}

.modal-card__caption {
    font-size: 1.8rem;
    font-weight: var(--normal);
    letter-spacing: 0.12em;
    line-height: 1.5;
    color: #fff;
}

.modal-card__caption h3 {
    font-weight: var(--normal);
    color: #fff;
}

.modal-card__icon {
    position: absolute;
    right: 1.9rem;
    bottom: 1.7rem;
}

.modal-card__plus-symbol {
    display: inline-flex;
    align-items: center;
    margin-left: 0.7rem;
    transform: translateY(2px);
}

.modal-card__plus-symbol svg {
    fill: none;
    stroke: #fff;
    stroke-width: 0.8;
    stroke-linecap: round;
    width: 4.5rem;
    height: 4.5rem;
}

.modal-card__plus-symbol img {
    aspect-ratio: 1 / 1!important;
}

.modal-card__plus-symbol .plus-circle {
    stroke-dasharray: 70;
    stroke-dashoffset: 70;
    transition: stroke-dashoffset 0.6s ease-in-out;
}

.modal-card__plus-symbol .plus-line {
    stroke-dasharray: 10;
    stroke-dashoffset: 10;
    transition: stroke-dashoffset 0.3s ease-in-out;
    
}

.modal-card__plus-symbol .plus-line--h,
.modal-card__plus-symbol .plus-line--v {
    transform: scale(1);
    
}

/* アニメーションの順番制御（delay） */
.modal-card__plus-symbol.is-active .plus-circle {
    stroke-dashoffset: 0;
    transition-delay: 0.5s;
}

.modal-card__plus-symbol.is-active .plus-line--v {
    stroke-dashoffset: 0;
    transition-delay: 1s;
}

.modal-card__plus-symbol.is-active .plus-line--h {
    stroke-dashoffset: 0;
    transition-delay: 1.3s;
}

.modal-card__modal-image {
    margin-bottom: 4.2rem;
}
.modal-card__modal-image img {
    width: 100%;
    border-radius: 1rem;
}
.modal-card__modal-textarea {
    margin: 5rem auto 0;
    max-width: 52.8rem;
}

.modal-card__modal-list-title {
    font-weight: var(--medium)!important;
    font-family: var(--font-main-ja);
    margin: 0;
    margin-top: 5rem;
}

.modal-card__modal-textarea p,
.modal-card__modal-textarea ul {
    font-size: 1.4rem;
    font-weight: var(--normal);
    line-height: 2;
    letter-spacing: 0.12em;
}

.modal-card__modal-textarea p + p {

}

.modal-card__modal-textarea ul {
    margin-left: 1.5rem;
    margin-block: 0;
}

@media (hover: hover) {
    .modal-card:hover .modal-card__image {
        transform: scale(1.05);
    }
}

@media screen and (max-width: 960px) {
    .modal-card-2col {
        flex-direction: column;
        max-width: 100%;
        margin-inline: auto;
        gap: 4rem;
    }
    .modal-card-2col .modal-card {
        width: 100%;
    }
}

@media screen and (max-width: 560px) {
    .modal-card {
        aspect-ratio: 335 / 298;
        padding: 1.5rem;
    }
    .modal-card__caption h3 {
        font-size: 1.6rem;
    }
    .modal-card__plus-symbol svg {
        width: 2rem;
        height: 2rem;
    }
    .modal-card__icon {
        position: absolute;
        right: 1.5rem;
        bottom: 1.2rem;
    }

    .modal-card__modal-textarea p,
    .modal-card__modal-textarea ul {
        font-size: 1.3rem;
    }
}

/*********************
プロダクトCTA
*********************/
.product-cta.cording-cta {
    position: relative;
    background: #fff;
    z-index: 2;
}

.product-cta.webcreation-cta {
    background: var(--bg-dark-light);
    position: relative;
    z-index: 2;
    margin-top: -1px;
    padding-block: 25rem 8rem;
}

.product-cta.community-cta {
    position: relative;
    background: #fff;
    z-index: 2;
    padding-block: 25rem 8rem;
}

.product-cta {
    padding-block: 15rem 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.product-cta__container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5rem;
}

/* スライダー側 */
.product-cta__slider {
    width: 69rem;
    max-width: 100%;
    display: block;
}

/* スライダー */
.slider-wrapper {
    padding-right: 5.4rem!important;
    padding-left: 5.4rem!important;
    position: relative;
}

.product-slider {
    position: relative;
}

.product-slider__item {

}
.product-slider__item img {
    aspect-ratio: 580 / 342;
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
    border-radius: 0.5rem;
}

.product-slider__item.product-slider__item--size02 img {
    aspect-ratio: 1920 / 1080;
}

.product-slider__pagination {
    text-align: center;
    margin-top: 2.0rem;
}

.product-slider__pagination .swiper-pagination-bullet {
    background: var(--text-gray);
    border-radius: 999px;
}

.product-slider__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 2.4rem;
}

.product-slider__prev,
.product-slider__next {
    position: absolute;
    top: 44%;
    transform: translateY(-50%);
    cursor: pointer;
}

.product-slider__prev {
    left: 0;
}

.product-slider__next {
    right: 0;
}

/* 商品情報側 */
.product-info {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    transform: translateZ(0); /* ハードウェアアクセラレーションを有効化 */
    will-change: transform;
    max-width: 43.7rem;
}

.product-info__sub {
    font-size: 1.6rem;
    font-weight: var(--normal);
    font-family: var(--font-main-en);
    letter-spacing: 0.09em;
    margin: 0;
    margin-bottom: 0.4rem;
    color: var(--text-gray);
}

.product-info__copy {
    font-size: 2.4rem;
    color: var(--bg-dark);
    font-weight: var(--normal);
    position: relative;
    letter-spacing: 0.12em;
    margin: 0;
    line-height: 1.5;
}

.product-info__title {
    font-size: 2rem;
    color: var(--text-gray2);
    font-weight: var(--normal);
    margin-top: 4rem;
}

.product-info__desc {
    margin: 4.5rem 0 0;
}

.product-info__price {
  margin: 3rem 0 5rem;
}

.product-info__yen {
    font-size: 2.4rem;
    color: var(--text-gray2);
    font-weight: var(--bold);
    font-family: "BIZ UDGothic", "Meiryo", sans-serif;
}

.product-info__num {
  font-size: 3.6rem;
  font-weight: var(--normal);
  font-family: var(--font-main-en);
  letter-spacing: 0.03em;
  color:#454545;
  line-height:1;
}

.product-info__tax {
  font-size: 1.2rem;
  color: var(--text-gray);
  font-weight: var(--bold);
  font-family: "BIZ UDGothic", "Meiryo", sans-serif;
}

.product-info__btn {
  margin-top: 5rem;
}

@media screen and (max-width: 960px) {
    .product-cta.webcreation-cta {
        padding-block: 0rem 14rem;
    }
    .product-cta.community-cta {
        padding-block: 0rem 14rem;
    }
    .slider-wrapper {
        padding-right: 0!important;
        padding-left: 0!important;
    }
    .product-slider__prev,
    .product-slider__next {
        display:none;
    }
}

@media screen and (max-width: 560px) {
    .product-cta.webcreation-cta {
        padding-block: 0rem 25rem;
    }
    .product-cta.community-cta {
        padding-block: 0rem 25rem;
    }
    .product-slider__pagination {
        margin-top: 1.5rem;
    }
    .product-info__sub {
        font-size: 1.1rem;
        margin-bottom: 0.4rem;
    }

    .product-info__copy {
        font-size: 1.8rem;
    }

    .product-info__title {
        font-size: 1.3rem;
        margin-top: 4rem;
    }

    .product-info__price {
        margin: 2.2rem 0 4.4rem;
    }

    .product-info__yen {
        display:none;
    }

    .product-info__num {
        font-size: 3.5rem;
    }

    .product-info__tax {
        font-size: 1.1rem;
    }
}

/*********************
VALUES
*********************/
.cording-values {
    background: #fff;
    z-index: 2;
}

.cording-values__title {
    margin-bottom: 23rem;
}

@media screen and (max-width: 960px) {
    .cording-values__title {
        margin-bottom: 17.5rem;
        text-align: left;
    }
}

@media screen and (max-width: 560px) {
    .cording-values {
        padding-block: 20rem 25rem!important;
    }
}


.value-item {

}

.value-item + .value-item {
    margin-top: 23rem;
}

.value-item__text {
    width: 100%;
    max-width: 36.5rem;
}

.value-item__desc {
}

.value-item__title {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.value-item__lead {

}

.value-item01 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: 98.8rem;
}

.value-item01__image {

}

.value-item01__image img {
    width: 44.2rem;
}

.value-item02 {
    margin-right: auto;
    margin-left: auto;
    width: fit-content;
}

.value-item03 {
  display: flex;
  justify-content: space-between;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: 110.5rem;
  gap: 6rem;
}

.value-item03__image {
    flex: 1;
    padding-top: 18.4rem;
    max-width: 55.9rem;
    width: calc(100% - 36.5rem - 6rem);
}

.value-item03__image img {
    width: 100%;
}

.value-item-image {
    max-width: 69.4rem;
    margin-inline: auto;
}
.value-item__image-left {
    margin-left: calc(50% - 50vw);
}
.value-item__image-left img {
    width: 100%;
    overflow: hidden;
    object-fit: cover;
}

@media screen and (max-width: 960px) {
    .value-item-wrapper {
        display: flex;
        flex-direction: column;
    }
    .value-item + .value-item {
        margin-top: 17.5rem;
    }
    .value-item01 {
        flex-direction: column;
        align-items: flex-start;
        gap: 6.6rem;
    }
    .value-item01__image img,
    .value-item__image-left img,
    .value-item03__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        overflow: hidden;
        aspect-ratio: 1/ 1;
    }
    .value-item-image {
        max-width: 100%;
        margin-inline: 0;
    }
    .value-item02 {
        margin-top: 6.6rem!important;
        width: 100%;
    }
    .value-item03 {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 6.6rem;
    }

    .value-item03__image {
        padding-top: 0;
        width: 100%;
        max-width: 100%;
    }
    .value-item__image-left {
        margin-left: 0;
    }
    .value-item__image-left img {
        width: 100%;
        max-width: 100%;
        min-height: 0;
        max-height: 100%;
    }
}

@media screen and (max-width: 560px) {
    .value-item__text {
        display: flex;
        flex-direction: column;
    }

    .value-item__desc {
        order: 1;
        margin: 0;
    }

    .value-item__title {
        order: 2;
    }

    .value-item__lead {
        order: 3;
        margin-top: 4rem;
    }
}

/*********************
BRIDGE
*********************/
.cording-bridge02 {
    overflow: hidden;

}
@media screen and (max-width: 960px) {
    .cording-bridge02 {
        /* background: var(--bg-dark); */
    }  
}

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

/*********************
RECOMMEND
*********************/
.cording-recommend {
    background: #fff;
    z-index: 2;
    position: relative;
    padding-block: 22rem 0;

    /* --- アニメーション速度・タイミング --- */
    --anim-duration-base: 0.2s;        /* 全体の基本速度（スライド・不透明度） */
    --anim-duration-mask: 0.6s;        /* 黒いマスクが消える速度 */
    --anim-duration-bg: 0.9s;            /* 背景画像がズームアウトする速度 */
    --anim-bezier: cubic-bezier(0.215, 0.61, 0.355, 1);
    --anim-bezier-mask: cubic-bezier(0.77, 0, 0.175, 1);
    
    /* --- レイアウト・配置 --- */
    --card-height: 80vh;               /* カードの高さ */
    --card-overlap-x: -2%;             /* カード同士の重なり（マイナス値で重なる） */
    --card-step-y: 40px;               /* 階段状の縦のズレ幅 */
    --card-initial-offset-x: -15px;    /* 出現時の横のスライド距離 */
    --card-bg-scale: 1.2;              /* 出現前の背景画像の拡大率 */
    
    /* --- 色・装飾 --- */
    --mask-color:var(--bg-dark);             /* めくれるマスクの色 */
    --bg-dark-color: #111;             /* 背景コンテナの色 */
    --clip-path-shape: polygon(0 0, 100% 0, 100% 100%, 0 5%); /* タイトルの切り抜き形状 */
}

/* --- タイトル装飾 --- */
.cording-recommend__title {
    text-align: right;
    margin-bottom: 4rem;
}

.cording-recommend__title::before {
    position: absolute;
    content: '';
    clip-path: var(--clip-path-shape);
    width: 100%;
    height: 190px;
    top: 350px;
    left: 0;
    background: #fff;
    z-index: 21;
}

@media screen and (max-width: 960px) {
    .cording-recommend__title p {
        color: var(--text-gray);
    }
    .cording-recommend__title h2 {
        color: #fff;
    }
}

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

}

/* カードレイアウトコンテナ */
.cards-container {
    display: flex;
    width: 100%;
    padding: 0;
    padding-top: 13rem;
    position: relative;
    z-index: 20;
    margin: 0;
    background: var(--bg-dark, var(--bg-dark-color));
}

/* 捲れるアニメーションの準備 */
.card-wrapper {
    position: relative;
    overflow: hidden;
    height: var(--card-height);
    min-height: 450px;
    flex: 1; /* 均等に広げる */
    opacity: 0;
    transform: translateX(var(--card-initial-offset-x));
    transition: 
        transform var(--anim-duration-base) var(--anim-bezier), 
        opacity var(--anim-duration-base) linear;
}

/* 階段状の配置（変数を使って自動計算） */
.card-wrapper:nth-child(1) { margin-top: 0; z-index: 1; }
.card-wrapper:nth-child(2) { margin-top: var(--card-step-y); margin-left: var(--card-overlap-x); z-index: 2; }
.card-wrapper:nth-child(3) { margin-top: calc(var(--card-step-y) * 2); margin-left: var(--card-overlap-x); z-index: 3; }
.card-wrapper:nth-child(4) { margin-top: calc(var(--card-step-y) * 3); margin-left: var(--card-overlap-x); z-index: 4; }

/* 黒いマスクレイヤー */
.card-image-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--mask-color);
    transform: scaleX(1);
    transform-origin: right;
    transition: transform var(--anim-duration-mask) var(--anim-bezier-mask);
    z-index: 2;
    display: block !important;
}

/* カード内部コンテンツ */
.card-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 3rem 5rem 2rem 3rem;
    color: white;
    z-index: 1;
}

.card-tratarea {
    max-width: 27rem;
    width: 100%;
}

/* 背景画像 */
.card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform var(--anim-duration-bg) var(--anim-bezier);
    transform: scale(var(--card-bg-scale));
    display: block !important;
}

/* --- 表示された時（is-visible）の状態 --- */
.cards-container.is-visible .card-wrapper,
.card-wrapper.is-visible {
    opacity: 1;
    transform: translateX(0);
}
.cards-container.is-visible .card-image-mask,
.card-wrapper.is-visible .card-image-mask {
    transform: scaleX(0);
}
.cards-container.is-visible .card-bg,
.card-wrapper.is-visible .card-bg {
    transform: scale(1.01);
}

/* グラデーションオーバーレイ（文字の視認性） */
.card-content::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
    z-index: -1;
}

/* テキスト装飾 */
.role-en { margin: 0; font-size: 3.5rem; font-weight: var(--light); letter-spacing: -0.005em; margin-bottom: 1rem; color: var(--text-gray); font-family: var(--font-main-en); line-height:1; }
.role-en strong { margin: 0; color: #fff; font-weight: var(--light); display: inline-block;}
.role-jp { margin: 0; font-size: 1.6rem; margin-bottom: 1.8rem; font-weight: var(--normal);}
.role-desc { margin:0; }

/* --- Not Recommended セクション --- */
.not-recommended-box {
    background: var(--bg-dark);
    display: flex;
    justify-content: center;
    padding-block: 12rem 28.6rem;
}

.not-recommended-box__inner {
    background: white;
    padding: 4.6rem 5rem;
    border-radius: 1rem;
    max-width: 98rem;
    width: 100%;
    text-align: center;
    margin-inline: auto;
    opacity: 0;
    transform: translateY(15px);
    transition: all 1s ease;
}
.not-recommended-box__inner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.not-recommended-box__title-en {margin: 0; color: var(--text-gray2); font-size: 3rem; letter-spacing: -0.005em; font-family: var(--font-main-en); font-weight: var(--light); margin-bottom: 1.5rem; }
.not-recommended-box__title-en strong { font-weight: var(--light); }
.not-recommended-box__title-jp {margin: 0; font-size: 1.8rem; font-weight: var(--normal); }
.not-recommended-box__title-jp strong { text-decoration: underline; font-weight: var(--normal); }

.not-recommended-box__list {
    text-align: left;
    display: inline-block;
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    line-height: 1.8;
    margin: 0;
    margin-top: 4rem;
}

@media screen and (max-width: 1280px) {
    .role-en strong {display: block;}
}

@media screen and (max-width: 960px) {
    .cording-recommend {
        background: var(--bg-dark);
    }
    .cording-recommend__title::before {
        display: none;
    }
    .cards-container {
        flex-direction: column;
        padding-top: 4rem;
    }
    .card-wrapper {
        margin: 0!important;
        clip-path: polygon(0% 0%, 100% 10%, 100% 100%, 0 90%);
        min-height: 95rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 18rem;
    }
    .card-wrapper + .card-wrapper {
        margin-top: -15rem!important;
    }
    .card-content::before {
        width: 100%;
        height: 100%;
        display:none;
    }
    .card-content {
        max-width: 46rem;
    }
    .not-recommended-box {
        padding-block: 7rem 25rem;
    }
}

@media screen and (max-width: 560px) {
    .cards-container {
        padding-top: 1rem;
    }
    .card-wrapper {
        clip-path: polygon(0% 0%, 100% 10%, 100% 100%, 0 90%);
        min-height: 64rem;
        padding-bottom: 16rem;
    }
    .card-wrapper:nth-child(4) {
        padding-bottom: 4rem;
        min-height: 50rem;
    }
    .card-content {
        display: flex;
        flex-direction: column;
    }
    .card-tratarea {
        display: flex;
        flex-direction: column;
    }
    .role-en {font-size: 1.1rem; order: 2; text-transform: capitalize; letter-spacing: 0.05em;}
    .role-jp {font-size: 1.6rem; margin-bottom: 0.8rem; order: 1;}
    .role-desc {font-size: 1.3rem; order: 3; max-width: 28.3rem; margin-top: 2rem;}
    .role-en strong {display: inline; color: var(--text-gray)!important;}

    .not-recommended-box__inner {padding:4.5rem 3rem;}
    .not-recommended-box__title-en { font-size: 1.3rem; }
    .not-recommended-box__title-jp { font-size: 1.6rem; }
    .not-recommended-box__list {margin-top: 3rem; margin-left: 2rem;}
}

/*********************
INSTRUCTOR
*********************/
.cording-instructor {
    background: #fff;
    z-index: 2;
}

.cording-instructor__title {
    margin-bottom: 6rem;
}

.cording-instructor__text {
    margin-bottom: 8rem;
    max-width: 46rem;
}

@media screen and (max-width: 960px) {
    .cording-instructor {
        padding-block: 15rem;
    }
}

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

}

/* モーダルカード */
.modal-instructor-wrapper {
    display: flex;
    gap: 6.6rem;

    --transition-speed: 0.4s;
    --transition-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

.modal-instructor {
    max-width: 27.6rem;
}

.modal-instructor__image {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
}

.modal-instructor__image img {
    aspect-ratio: 276 / 412;
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

.modal-instructor__image-normal {
    transition: transform var(--transition-speed) var(--transition-ease);
}

.modal-instructor__image-hover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--transition-speed) var(--transition-ease);
}

.modal-instructor__image::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    top: 0;
    left: 0;
    clip-path: inset(0 100% 0 0);
    z-index: 3;
    transition: clip-path var(--transition-speed) var(--transition-ease);
}

.modal-instructor__btn {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    top: 1rem;
    left: 0.4rem;
}

.modal-instructor__icon {

}

.modal-instructor__plus-symbol {
    display: inline-flex;
    align-items: center;
    margin-left: 0.7rem;
    transform: translateY(2px);
}

.modal-instructor__plus-symbol svg {
    fill: #fff;
    stroke: #fff;
    stroke-width: 0.8;
    stroke-linecap: round;
    width: 1.9rem;
    height: 1.9rem;
    transition: width var(--transition-speed) var(--transition-ease), 
                height var(--transition-speed) var(--transition-ease), 
                fill var(--transition-speed) var(--transition-ease);
}

.modal-instructor__plus-symbol img {
    aspect-ratio: 1 / 1!important;
}

.modal-instructor__plus-symbol .plus-circle {
    stroke-dasharray: 70;
    stroke-dashoffset: 70;
    transition: stroke-dashoffset 0.6s ease-in-out;
    stroke-dashoffset: 0;
}

.modal-instructor__plus-symbol .plus-line {
    stroke-dasharray: 10;
    stroke-dashoffset: 10;
    transition: stroke-dashoffset 0.3s ease-in-out;
}

.modal-instructor__plus-symbol .plus-line--h,
.modal-instructor__plus-symbol .plus-line--v {
    transform: scale(1);
    stroke-dashoffset: 0;
    stroke: #000;
    stroke-width: 0.5;
    transform-origin: center;
    transition: 
        stroke var(--transition-speed) var(--transition-ease),
        transform var(--transition-speed) var(--transition-ease);
}

.modal-instructor__plus-symbol .plus-line--h {

}

.modal-instructor__plus-symbol .plus-line--v {

}

.modal-instructor__btn-text {
    font-size: 1.2rem;
    font-family: var(--font-main-en);
    font-weight: var(--normal);
    color: #fff;
    letter-spacing: 0;
    line-height: 1;
    padding-bottom: 0.2rem;
}

.modal-instructor__meta {
    font-weight: var(--normal);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
}

.modal-instructor__name {
    font-size: 1.2rem;
    color: var(--bg-dark);
    letter-spacing: 0.1em;
    line-height: 1;
}

.modal-instructor__roll {
    font-size: 1.2rem;
    font-family: var(--font-main-en);
    color: var(--text-gray);
    letter-spacing: 0;
    line-height: 1.5;
}

/* --- ホバー時のアクションを追加 --- */
@media (hover: hover) {

    .modal-instructor:hover .modal-instructor__plus-symbol svg {
        width: 1.9rem;      /* 拡大 */
        height: 1.9rem;     /* 拡大 */
        fill: transparent;  /* 背景を透明に */
    }

    .modal-instructor:hover .modal-instructor__plus-symbol .plus-line--h,
    .modal-instructor:hover .modal-instructor__plus-symbol .plus-line--v {
        stroke: #fff;
        /* 中心を軸に1.4倍に伸ばす（数値はお好みで調整してください） */
        transform: scale(1.4);
        transform-origin: center;
        transition: 
            stroke var(--transition-speed) var(--transition-ease),
            transform var(--transition-speed) var(--transition-ease);
    }

    /* 既存のホバー処理（そのまま維持） */
    .modal-instructor:hover .modal-instructor__image-hover {
        clip-path: inset(0 0 0 0);
    }
    
    .modal-instructor:hover .modal-instructor__image::after {
        clip-path: inset(0 0 0 0);
    }
    
    .modal-instructor:hover .modal-instructor__image-normal {
        transform: scale(1.0);
    }
}

@media screen and (max-width: 960px) {
    .modal-instructor-wrapper {
        flex-direction: column;
        gap: 4.5rem;
    }
    .modal-instructor__image img {
        aspect-ratio: 325 / 183;
        object-position: top;
    }
    .modal-instructor {
        max-width: 100%;
    }
}

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

}

/* モーダル中身 */
.modal-instructor__modal-content {

}

.modal-instructor__modal-image {
    margin-bottom: 4rem;
}

.modal-instructor__modal-image img {
    width: 100%;
    border-radius: 1rem;
}

.modal-instructor__modal-head {
    padding-bottom: 3rem;
    margin-block: 3rem;
    border-bottom: 1px solid var(--border-gray);
}

.modal-instructor__modal-copy {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.modal-instructor__modal-name {
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    line-height: 1;
    font-weight: var(--normal);
}

.modal-instructor__modal-roll {
    font-size: 1.3rem;
    font-family: var(--font-main-en);
    font-weight: var(--normal);
    letter-spacing:0;
    line-height: 1.5;
}

.modal-instructor__modal-textarea {

}

.modal-instructor__modal-textarea p + p {
    margin-top: 2rem;
}

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

}

@media screen and (max-width: 560px) {
    .modal-instructor__modal-copy {
        font-size: 1.6rem;
        margin-bottom: 3rem;
    }
    .modal-instructor__modal-name {
        font-size: 1.2rem;
    }

    .modal-instructor__modal-roll {
        font-size: 1.1rem;
    }
    .modal-instructor__modal-textarea p {
        font-size: 1.3rem;
    }
}


/*********************
SUPPORT
*********************/
.cording-support { 
    background: var(--bg-dark);
    z-index: 2;
    padding-block: 25rem 0;
}
.cording-support__title {
    margin-bottom: 8rem;
}

.support-block {
    height: 43rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.support-block__heading {
    font-weight: var(--normal);
    line-height: 1.6;
    margin-bottom: 2rem;
}
.support-block__heading span {
    font-family: var(--font-main-en);
}

.support-block__text {
    font-size: 1.4rem;
    max-width: 65rem;
}

.support-block01 {
    background: url('/cdn/shop/files/cording-support-image01.jpg?v=1771394043')no-repeat center center / cover;
}

.support-block02 {
    background: url('/cdn/shop/files/cording-support-image02.jpg?v=1771394043')no-repeat center center / cover;
}

.support-block03 {
    background: url('/cdn/shop/files/cording-support-image03.jpg?v=1771394043')no-repeat center center / cover;
}

@media screen and (max-width: 960px) {
    .support-block {
        height: 45.2rem;
    }
}

@media screen and (max-width: 560px) {
    .support-block {
        height: auto;
        padding-block: 11.7rem;
    }
    .support-block__heading {
        font-weight: var(--normal);
    }
    .support-block__text {
        font-size: 1.3rem;
    }
    .support-block03 {
        background: url('/cdn/shop/files/sp_cording-support-image03.jpg?v=1772514313')no-repeat center center / cover;
    }
}

/*********************
COMPANY
*********************/
.cording-company {
    background: #fff;
    z-index: 2;
    padding-block: 10rem;
    overflow: hidden;
}
.cording-company__container {
    max-width: 101.4rem;
}

@media screen and (max-width: 960px) {
    .cording-company {
        padding-block: 30rem 15rem;
    }
}

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

}

.company {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: calc(50% - 50vw);
    gap: 6.5rem;
}

.company__image {
    width: calc(100% - 46rem - 17rem);
}

.company__image img {
    width: 100%;
    object-fit: cover;
    overflow: hidden;
    height: 90.4rem;
}

.company__body {
    width: 100%;
    max-width: 46rem;
}

.company__heaidng {
    margin-bottom: 6rem;
}

.company__body p + p {
    margin: 0;
    margin-top: 3rem;
}

@media screen and (max-width: 1280px) {
    .company__image {
        width: calc(100% - 46rem - 10rem);
    }
}

@media screen and (max-width: 960px) {
    .company {
        flex-direction: column-reverse;
        align-items: flex-start;
        margin-left: 0;
    }
    .company__image {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    .company__image img {
        height: 60.4rem;
    }
}

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

}

/*********************
FAQ
*********************/
.cording-faq {
    background: #fff;
    z-index: 2;
    padding-bottom: 6rem;
}

@media screen and (max-width: 960px) {
    .cording-faq {
        padding-block: 15rem 4rem;
    }

}

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

}

/*********************
MESSAGE
*********************/
.cording-message {
    z-index: 2;
    padding-block: 0;
    background: #fff;
}

/*********************
MESSAGE (STICKY SCROLL OPTIMIZED)
*********************/

/* スクロール演出のための長いコンテナ */
.sticky-scroll {
    height: 400vh; /* 演出をゆったりさせるため少し長めに設定 */
    position: relative;
}

/* 画面に固定される要素 */
.sticky-scroll__container {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* 動画の器：最初から全画面で待機し、透明＋ブラー状態にする */
.sticky-scroll__video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -2;
    opacity: 0;         /* JSで徐々に1へ */
    filter: blur(20px);  /* JSで徐々に0pxへ */
    will-change: opacity, filter;
}

/* 動画本体のスタイル */
.sticky-scroll__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 黒いオーバーレイ：動画がはっきりした後、文字を読みやすくするために被せる */
.sticky-scroll__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0; /* JSで制御 */
    z-index: -1;
    display: block !important;
}

/* テキスト表示領域 */
.sticky-scroll__content {
    position: absolute;
    top: 100%; /* 初期位置は画面の下端外 */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: calc(128rem + var(--container-side) * 2);
    color: white;
    z-index: 1;
    opacity: 0;
    will-change: top, opacity;
}



/*********************
DETAIL
*********************/
.cording-detail {
    background: #fff;
    z-index: 2;
}
@media screen and (max-width: 960px) {

}

@media screen and (max-width: 560px) {
    .cording-detail {
        padding-block:10rem 20rem!important;
    }
}


/*********************
SHORTS
*********************/
.shorts-video {
    display: flex;
    gap: 4rem;
}

.shorts-video__item {
    width: calc((100% - 4rem * 3) / 4);
    cursor: pointer;
    position: relative;
    aspect-ratio: 305 / 454;
    width: 100%;
    height: 100%;
}

.shorts-video__item video {
    border-radius: 1.5rem;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.shorts-video__thumbnail {
    aspect-ratio: 305 / 454;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 1.5rem;
    z-index: 2;
    transition: opacity 0.3s ease;
}
.shorts-video__item:nth-child(1) {
    
}
.shorts-video__item:nth-child(2) {
    margin-top: 50px;
}
.shorts-video__item:nth-child(3) {
    margin-top: 100px;
}
.shorts-video__item:nth-child(4) {
    margin-top: 150px;
}

@media (hover: hover) {
    .shorts-video__container:hover .shorts-video__thumbnail {
        opacity: 0;
    }
}

@media screen and (max-width: 960px) {
    .shorts-video {
        flex-wrap: wrap;
        gap: 4rem;
        padding-inline: 4rem;
        max-width: 70rem;
        margin: 0 auto;
    }
    .shorts-video__item {
        width: calc((100% - 4rem) / 2);
    } 
    .shorts-video__item:nth-child(2),
    .shorts-video__item:nth-child(3),
    .shorts-video__item:nth-child(4) {
        margin-top: 0;
    }
}

@media screen and (max-width: 560px) {
    .shorts-video {
        flex-wrap: wrap;
        gap: 2rem;
        padding-inline: 0;
    }  
    .shorts-video__item {
        width: calc((100% - 2rem) / 2);
    } 
}



/*********************
INFORMATION
*********************/
.main-information {
    padding-bottom: 8rem;
}

.information-intro {
}

.information-intro__image {
    margin-bottom: 4.5rem;
}

.information-intro__content {
    width: 100%;
}

.information-intro__block {
    width: 100%;
    max-width: 55.1rem;
}

.information-intro__block {
    margin-top: 4.5rem;
}

.information-intro__headline {
    font-size: 2rem;
    letter-spacing: 0.04em;
    line-height: 1.5;
    font-weight: var(--normal);
    margin-bottom: 4rem;
}

.information-intro__text {

}

.information-intro__text ul + p,
.information-intro__text p + p {
    margin-top: 2em;
}

.information-course {
    padding-block: 8rem 15rem;
}

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

@media screen and (max-width: 560px) {
    .main-information {
        padding-top: 4rem;
    }
}


/*********************
INFORMATION CTA
*********************/
.information-cta {
  position: relative;
  z-index: 2;
  padding-block: 15rem;
}

.information-cta__image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  overflow: hidden;
  z-index: -1;
}

.information-cta__content {
  max-width: 43.7rem;
  margin-left: auto;
}

.information-cta__title {
  margin-bottom: 2rem;
}

.information-cta__text {

}

.information-cta__btn {
  margin-top: 3.5rem;
  max-width: 40.2rem;
}

@media screen and (max-width: 960px) {
    .information-cta__content {
        max-width: 36rem;
        margin-left: 0;
    }
}

@media screen and (max-width: 560px) {
    .information-cta {
        padding-block: 12rem;
    }
    .information-cta__btn {
        margin-top: 3rem;
    } 
    .information-cta__content {
        max-width: 30rem;
    }
}


/******************************************
旧コード
******************************************/


/*********************
HEADING
*********************/
/* TOPブランドタイトル */
.brand-title {
    font-size: 14rem;
    font-size: clamp(9.6rem, 2.857rem + 6.55vw, 14rem);
    font-family: var(--font-main-en);
    font-weight: 300;
    letter-spacing: -0.005em;
    line-height:1.2;
    margin: 0;
}

.course-concept-title {
    font-size: 3.6rem;
    font-family: var(--font-main-en);
    font-weight: 300;
    letter-spacing: 0.24em;
    line-height:1.2;
    margin: 0;
    color: var(--text-gray-h);
}

@media screen and (max-width: 1080px) {
    .brand-title {
        font-size: 8vw;
    }
    .course-concept-title {
        font-size: 3.2vw;
    } 
}

@media screen and (max-width: 560px) {
    .course-concept-title {
        font-size: 1.6rem;
    }  
}

/* 下層ページタイトル */
.lower-page-header {
    position: relative;
    z-index: 1;
}

.lower-page-header--simple {
    
}

.lower-page-header--course {
    padding-block: 19.5rem 6.4rem;
}

.lower-page-header__inner {

}

.lower-page-header__content {
    display:flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    height: 44rem;
}


.lower-page-header--simple .lower-page-header__content {
    justify-content: center;
}

.lower-page-header--lg .lower-page-header__content {
    height: 66rem;
}

.lower-page-header--course .lower-page-header__content {
    justify-content:flex-end;
    height: auto;
    margin-bottom: 10.9rem;
}

.lower-page-header__title-en {
 
}

.lower-page-header--simple .lower-page-header__title-en {
    font-size: 4rem;
}

.lower-page-header--course .lower-page-header__title-en {
    text-align: right;
}

.lower-page-header__title-ja {

}

.lower-page-header__movie {
    margin-bottom: 6.4rem;
}

.lower-page-header__movie video {
    aspect-ratio: 1294 / 377;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 960px) {
    .lower-page-header--lg .lower-page-header__content {
        height: 45rem;
    }
    .lower-page-header__content {
        height: 36rem;
    }  
    .lower-page-header__movie video {
        min-height: 26.2rem;
    }
}

@media screen and (max-width: 560px) {
    .lower-page-header--lg .lower-page-header__content {
        height: 30rem;
    }
    .lower-page-header--course {
        padding-block: 12rem 6.4rem;
    }
    .lower-page-header--course .lower-page-header__content {
        margin-bottom: 8rem;
    }
    .lower-page-header__content {
        height: 28rem;
        gap: 1.2rem;
    }  
}


/*********************
BUTTON
*********************/
.btn-wrap {
   margin-top: 1.5em;
   width: 100%;
}

.btn-normal {
    display: inline-block;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: 0.04em;
    font-weight: var(--normal);
    border: 1px solid var(--bg-dark-light);
    position: relative;
    padding: 1.6rem 5.4rem 1.6rem 3.2rem ;
    text-align: center;
    border-radius:999px;
    transition: all .3s;
    min-width: 19rem;
}


.btn-normal.btn-normal--bg-white {
    background: #fff;
}

.btn-normal.btn-normal--white {
    color: #fff;
    border: 1px solid #fff;
}

.btn-normal::before {
    position: absolute;
    content: '';
    width: 1.6rem;
    height: 1.5rem;
    background: url("https://cdn.shopify.com/s/files/1/0679/1364/6234/files/btn-normal-arrow.svg?v=1767363938")no-repeat center center / contain;
    right: 3.2rem;
    transition: all .3s;
}

.btn-normal.btn-normal--white::before {
    background: url("https://cdn.shopify.com/s/files/1/0679/1364/6234/files/btn-normal-arrow-wh.svg?v=1767363933")no-repeat center center / contain;
}

.btn-normal--sm {
    font-size: 1.3rem;
    padding: 0.8rem 4rem 0.8rem 3rem;
}

.btn-normal.btn-normal--sm::before {
    width: 1.2rem;
    height: 1.1rem;
    right: 2rem;
}

@media (hover: hover) {
    .btn-normal:hover {
        color: #fff;
        background: var(--bg-dark-light);
    }
    .btn-normal:hover::before {
        background: url("https://cdn.shopify.com/s/files/1/0679/1364/6234/files/btn-normal-arrow-wh.svg?v=1767363933")no-repeat center center / contain;
        right: 2.4rem;
    }
    .btn-normal:hover.btn-normal--white {
        color: var(--bg-dark-light);
        background: #fff;
    }
    .btn-normal:hover.btn-normal--white::before {
        background: url("https://cdn.shopify.com/s/files/1/0679/1364/6234/files/btn-normal-arrow.svg?v=1767363938")no-repeat center center / contain;
    }
    .btn-normal.btn-normal--sm:hover::before {
        right: 1.6rem;
    }
}

.btn-square {
    background: #111;
    color: #fff;
    display: inline-block;
    font-size: 1.3rem;
    line-height: 1;
    letter-spacing: 0.04em;
    font-weight: var(--normal);
    border: 1px solid #111;
    position: relative;
    padding: 1.6rem 5.4rem 1.6rem 3.2rem ;
    min-width: 19rem;
    text-align: center;
    transition: all .3s;
}

.btn-square::before {
    position: absolute;
    content: '';
    width: 1.4rem;
    height: 1.3rem;
    right: 3.2rem;
    transition: all .3s;
    background: url("https://cdn.shopify.com/s/files/1/0679/1364/6234/files/btn-normal-arrow-wh.svg?v=1767363933")no-repeat center center / contain;
}

.btn-square.btn-square--white::before {
    background: url("https://cdn.shopify.com/s/files/1/0679/1364/6234/files/btn-normal-arrow.svg?v=1767363938")no-repeat center center / contain;
}

.btn-square.btn-square--no-arrow {
    padding: 1.6rem 3.2rem;
}

.btn-square.btn-square--no-arrow::before {
    display: none;
}


.btn-square.btn-square--bg-white {
    color: var(--bg-dark-light);
    background: #fff;
}

@media (hover: hover) {
    .btn-square:hover {
        color: #111;
        background: #fff;
    }
    .btn-square:hover::before {
        right: 2.4rem;
        background: url("https://cdn.shopify.com/s/files/1/0679/1364/6234/files/btn-normal-arrow.svg?v=1767363938")no-repeat center center / contain;
    }
    .btn-square:hover.btn-square--white {
        color: #fff;
        background: #111;
    }
    .btn-square:hover.btn-square--white::before {
        background: url("https://cdn.shopify.com/s/files/1/0679/1364/6234/files/btn-normal-arrow-wh.svg?v=1767363933")no-repeat center center / contain;
    }
    .btn-square.btn-square--bg-white:hover {
        color: #fff;
        background: #111;
    }
}

.btn-underline {
    font-size: 1.4rem;
    font-weight: var(--normal);
    letter-spacing: 0.12em;
    line-height: 2;
    border-bottom: 1px solid currentColor;
    position: relative;
    display: inline-block;
    padding: 1rem 3rem 0.25rem 0;
    transition: all .3s;
}

.is-dark .btn-underline {
    color: #fff;
}

.btn-underline:after {
    position: absolute;
    content: '';
    background: url('https://cdn.shopify.com/s/files/1/0679/1364/6234/files/btn-underline-arrow.svg?v=1766833487') no-repeat center center / contain;
    width: 15px;
    height: 5.5px;
    right: 0;
    top: calc(50% + 3px);
    transform: translateY(-50%);
    transition: all .3s;
}

.is-dark .btn-underline:after {
    background: url('https://cdn.shopify.com/s/files/1/0679/1364/6234/files/btn-underline-arrow-white.svg?v=1767360528') no-repeat center center / contain;
}

@media (hover: hover) {
    .btn-underline:hover {
        opacity: .7;
    } 
    .btn-underline:hover:after {
        right: -4px;
    } 
}

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

@media screen and (max-width: 560px) {
    .btn-normal {
        font-size: 1.4rem;
    }
    .btn-normal--sm {
        font-size: 1.2rem;
        padding: 0.8rem 3rem 0.8rem 2rem;
        min-width: 10rem;
    }
    .btn-normal.btn-normal--sm::before {
        right: 1rem;
    }
}




/*********************
IMAGE
*********************/
.hero-image {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.hero-image--right {
    margin-right: calc(50% - 50vw);
}
.hero-image--left {
    margin-left: calc(50% - 50vw);
}
.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media only screen and (min-width: 1920px) {
    .hero-image {
        margin-right: calc(50% - 50vw);
        margin-left: calc(50% - 50vw);
        width: 100vw;
        max-height: 84rem;
    } 
}

/*********************
COMPONENT
*********************/

/*********************
YOUTUBE
*********************/
/* YouTube動画レイアウト */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  max-width: 103rem;
  margin: 0 auto;
}

.video-item {
  position: relative;
  cursor: pointer;
  background-color: #000;
  aspect-ratio: 16 / 9;
}

.video-thumbnail-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.video-youtube-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

/* プレビューiframeの設定 */
.video-preview-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.video-preview-wrapper iframe {
  width: 100%;
  height: 100%;
}

@media (hover: hover) {
    .video-item:hover .video-youtube-poster { opacity: 0; }
    .video-item:hover .video-preview-wrapper { opacity: 1; } 
}

@media screen and (max-width: 560px) {
    .video-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 1.5rem;
    }  
}

/* YouTubeカード セクション */

.video-preview-container {
    
}

.video-preview-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    aspect-ratio: 16 / 9;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}


/* SHARE */
.share-btn {
    border-radius: 50%;
    border: 1px solid var(--border-gray);
    width: 3.6rem;
    height: 3.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: all .3s;
}

.share-btn svg,
.share-btn img {
    width: 1.8rem;
    height: 1.8rem;
}

.share-btn--x {

}

.share-btn--copy {
    position: relative;
    cursor: pointer;
}

.copy-tooltip {
    position: absolute;
    top: 50%;
    left: calc(50% + 45px);
    transform: translate(-50%, -50%);
}

.share-btn--copy .copy-tooltip {
  opacity: 0;
  transition: opacity 0.2s;
}

.share-btn--copy.is-copied .copy-tooltip {
  opacity: 1;
}

@media (hover: hover) {
    .share-btn:hover {
        opacity: .7;
    }
}


/*********************
COURSE ITEM
*********************/
/* トップ */
.course-item {
    display:flex;
    justify-content: space-between;
}

.course-item__body {
    width: 50%;
}

.course-item__video {
    width: 43.75%;
}
.course-item__video video {
    aspect-ratio: 560 / 920;
    width: 100%;
    height: 100%;
    max-height: 75vh;
    object-fit: cover;
}

.course-item__block {

}

.course-item__en {
    font-size: 1.6rem;
    font-family: var(--font-main-en);
    font-weight: var(--normal);
    letter-spacing: 0.09em;
    line-height: 1.35;
    margin: 0;
    margin-bottom: 2rem;
}
.course-item__en span {
    color: #9CA3AF;
}

.course-item__catch {
    font-size: 1.5rem;
    font-weight: var(--normal);
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin: 0;
    margin-bottom: 1.25rem;
}

.course-item__heading {
    font-size: 2.8rem;
    font-weight: var(--bold);
    letter-spacing: 0.15em;
    line-height: 1.5;
    margin: 0;
}

.course-item__heading.font-en {
    font-weight: var(--medium);
}

.course-item__name {
    font-size: 2rem;
    font-weight: var(--bold);
    letter-spacing: 0.12em;
    line-height: 1.5; 
}

.course-item__name span {
    font-size: 1.6rem;
    font-weight: var(--normal);
    letter-spacing: 0.015em;
    line-height: 1.5;
    margin: 0;
    display: inline-block;
    margin-left: 2rem;
}

.course-item__price {
    font-size: 2.4rem;
    font-weight: var(--bold);
    letter-spacing: 0.15em;
    line-height: 1.5;
    display: flex;
    align-items: baseline;
    margin: 0;
    margin-top: 3rem;
}

.course-item__yen {
    margin-right: 1rem;
}

.course-item__num {
    font-size: 3.6rem;
    font-family: var(--font-main-en);
    font-weight: var(--normal);
    letter-spacing: 0.03em;
    line-height: 1;
}

.course-item__num-jp {
    font-size:  2.4rem;
    font-weight: var(--normal);
    letter-spacing: 0.12em;
    line-height: 1;   
}

.course-item__tax,
.course-item__note {
    font-weight: var(--normal);
    font-size: 1.2rem;
    color: var(--text-gray);
    letter-spacing: 0.015em;
    margin-left: 0.3rem;
}

.course-item__note {
    margin-left: 2rem;
}

@media screen and (min-width: 769px) {
    .course-item__block + .course-item__block {
        margin-top: 4.5rem;
    }
}

@media screen and (max-width: 768px) {
    .course-item {
        flex-direction: column;
    }
    
    .course-item__body {
        display: contents;
    }
    .course-item__block {
        margin: 0;
    }
    .course-item__video {
        width: 100%;
    }
    .course-item__video video {
        aspect-ratio: 640 / 300;
        max-height: 100%;
    }
    .course-item__price {
        margin-top: 1rem;
    }
    .course-item__block-sm01 {
        order: 1;
        margin-bottom: 2.8rem;
    }
    .course-item__block-sm02 {
        order: 2;
    }
    .course-item__block-sm03 {
        order: 3;
        margin-top: 2.8rem;
    }
    .course-item__block-sm04 {
        order: 4;
        margin-top: 1.5rem;
    }
    .course-item__block-sm05 {
        order: 5;
        margin-top: 1.5rem;
    }
}

@media screen and (max-width: 560px) {
    .course-item__heading {
        font-size: 2.2rem;

    }
    .course-item__catch {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
    .course-item__en {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }
    .course-item__name {
        font-size: 1.8rem;
    }
    .course-item__price {
        margin-top: 0.5rem;
    }
    .course-item__num-jp {
        font-size: 2rem;
    }
    .course-item__note {
        font-size: 1rem;
        margin-left: 1rem;
    }
    .course-item__lists {

    }
}

/* カード */
.course-blocks {
    
}
.course-blocks + .course-blocks {
    margin-top: 8.4rem;
}
.course-lists {
    display: flex;
    flex-wrap: wrap;
    gap: 4.6rem;
    max-width: 79.4rem;
}

.course-lists.course-lists--col3 {
    max-width: 114.7rem;
}

.course-lists__item {
    width: calc((100% - 4.6rem) / 2);
}

.course-lists.course-lists--col3 .course-lists__item {
    width: calc((100% - 4.6rem * 2) / 3);
}

.course-card {
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 2px 2px 30px -18px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
}

.course-card__image {
    overflow: hidden;
}

.course-card__image img {
    aspect-ratio: 349 / 180;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.course-card__body {
   background: #fff;
   padding: 2.8rem 2rem;
   display: flex;
   flex-direction: column;
   flex: 1;
}

.course-card__copy {
    font-size: 1.6rem;
    font-weight: var(--bold);
    line-height: 1.6;
    letter-spacing: 0.12em;
    margin: 0;
    margin-bottom: 1.5rem;
    padding-right: 6.7rem;
    flex: 1;
}

.course-card__title {
    font-size: 1.5rem;
    font-weight: var(--normal);
    color: var(--text-gray);
    line-height: 1.6;
    letter-spacing: 0.12em;
    margin: 0;
    position: relative;
}

.course-card__icon {
    position: absolute;
    width: 4.4rem;
    height: 4.4rem;
    background: var(--border-gray-light);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}

.course-card__icon::before {
    content: '';
    position: absolute;
    width: 2rem;
    height: 2rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(https://cdn.shopify.com/s/files/1/0679/1364/6234/files/arrow-up-right.svg?v=1768581597)no-repeat center center / contain;
}

.course-card__icon::after {

}


@media (hover: hover) {
    .course-card:hover .course-card__image img {
        transform: scale(1.05);
    }
}

@media screen and (max-width: 960px) {
    .course-lists {
        max-width: 100%;
    }
    .course-lists.course-lists--col3 .course-lists__item {
        width: calc((100% - 4.6rem) / 2);
    }
    .course-card__copy {
        font-size: 1.5rem;
        margin-bottom: 1.2rem;
    }
    .course-card__title {
        font-size: 1.4rem;
    }
    .course-card__title::after {
        width: 2rem;
        height: 2rem;
    }
}

@media screen and (max-width: 560px) {
    .course-lists {
        flex-direction: column;
    }
    .course-lists__item,
    .course-lists.course-lists--col3 .course-lists__item {
        width: 100%;
    }
}

/*********************
POLICY
*********************/
.policy-block {
    
}
.policy-block + .policy-block {
    margin-top: 2.5rem;
}
.policy-block ul {
    margin-block: 2.5rem;
}


/*********************
TEST CODE
*********************/