@charset "utf-8";
/* ========================================
   リセット & ベーススタイル
======================================== */
:root {
    --font-SMincho: "Sawarabi Mincho", serif;
    --font-GDisplay: "Gilda Display", serif;
    --font-Ryumin: 'A-OTF Ryumin Pr6N KL', serif;
    --font-YMincho: "游明朝体", "Yu Mincho", YuMincho, serif;
}

html {
    font-size: 62.5%;
    font-weight: 400;
}

body {
    width: 100%;

    font-family: "Sawarabi Gothic", sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
}
main {
    overflow: hidden;
    min-width: 1440px;
}
main .inner {
    width: 1440px;
    margin: 0 auto;
}
.mincho {
    font-family: "Gilda Display", "Sawarabi Mincho", serif;
}

.sp {
    display: none;
}
img {
    width: 100%;

    vertical-align: bottom;
}
a {
    text-decoration: none;
    transition: opacity .5s ease;
}
a:hover {
    opacity: 0.5;
}
.column-wrap {
    display: flex;
}
.accent-red { 
    color: #AD4242;
}
.accent-org { 
    color: #C27B3A;
}
.accent-blue { 
    color: #1A9798;
}
.accent-grn { 
    color: #6E9F51;
}

@media print, screen and (max-width: 768px) {
    main  {
        min-width: auto;
    }
    main .inner {
        width: auto;
    }
    .sp {
        display: block;
    }
    .pc {
        display: none;
    }
}
/* ========================================
  追従ボタン
======================================== */
.follow {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 10;
    background-color: transparent;
}
.follow ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.follow ul li {
    width: 12.366vw;
    box-shadow: 0px 4.8px 4.8px rgba(0,0,0,0.25);
}
.follow ul li + li {
    margin-top: 10%;
}
.follow ul li a {
    font-family: "Sawarabi Mincho", serif;
    border: 1.2px solid #AF1838;
    background-color: #FFFFFF;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #AF1838;
   -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    word-break: break-all;
    font-size: 4.194vw;
    font-weight: 400;
    letter-spacing: 0.09em;
    padding: 3.495vw 0;
    box-sizing: border-box;
    line-height: 1.06;
    vertical-align: middle;
    width: 100%;
    display: flex;
}
.follow ul li.open_campus a img {
    width: 3.64vw;
    height: 39.051vw;
    aspect-ratio: auto;
    flex-shrink: 0;
}
.follow ul li + li a {
    border-color: #731A33;
    background-color: #731A33;
    color: #FFFFFF;
    letter-spacing: 0.19em;
    line-height: 1.32;
}
@media (min-width: 769px) {
    .follow {
        position: fixed;
        bottom: 0;

        right: 0;
    }
    .follow ul li {
        width: 56px;
    }
    .follow ul li.open_campus a img {
        width: 16.44px;
        height: 182.91px;
        flex-shrink: 0;
    }
    .follow ul li + li {
        margin-top: 10%;
    }
    .follow ul li a {
        /*font-size: 1.319vw;*/
        font-size: 19px;
        /*padding: 1.319vw 0;*/
        padding: 13px 0;
        line-height: 1.1;
    }
}
/* ========================================
  メインビジュアル
======================================== */
#mv {
    position: relative;
}
#mv .lead-wrap {
    position: absolute;
    bottom: 40.591vw;
    left: 9.946vw;
}
#mv picture {
    opacity: 0;
    filter: blur(10px); 
    animation: blurInImg 1.8s forwards;  
}
@keyframes blurInImg {
    to {
        opacity: 1;
        filter: blur(0);
    }
}
#mv .lead-wrap .lead-wrap-jp {
    font-family: var(--font-SMincho);
}
#mv .lead-wrap .lead-wrap-jp span {
    font-size: 11.828vw;
    line-height: 1.43;
    letter-spacing: 0.08em;
    color: #000000;
}
#mv .lead-wrap .lead-wrap-en img:first-child {
    width: 50.508vw;
    margin-top: 10.054vw;
    margin-left: 8.871vw;
}
#mv .lead-wrap .lead-wrap-en img:last-child {
    width: 51.129vw;
    margin-top: 1.28vw;
    margin-left: -7.718vw;
}
@media (min-width: 769px) {
    #mv {
        min-width: 1440px;
        width: auto;
    }
    #mv .lead-wrap {
        bottom: auto;
        left: max(7.083vw,102px);
        top: max(18.611vw,268px);
    }
    #mv .lead-wrap .lead-wrap-jp span {
        font-size: max(4.444vw,6.4rem);
        line-height: 1.4;
        letter-spacing: 0.02em;
    }

    #mv .lead-wrap .lead-wrap-en img:first-child {
        width: max(19.572vw,281.84px);
        margin-top: max(3.722vw,53.6px);
        margin-left: max(4.496vw,64.74px);
    }
    #mv .lead-wrap .lead-wrap-en img:last-child {
        width: max(19.823vw,285.45px);
        margin-top: max(-0.372vw,-138.64px);
        margin-left: max(-1.2vw,-39.51px);
    }
}

/* ========================================
  TOP コンテンツ
======================================== */
#top {
    /*position: relative;*/
}
#top .column-wrap {
    flex-direction: column;
    position: relative;
}
#top .column-wrap:first-child .column-item:last-child {
    height: 77.151vw;
}
#top .column-wrap:last-child {
    flex-direction: column-reverse;
}
#top .content-wrap {
    display: flex;
    padding-left: 12.634vw;
    min-height: 49.462vw;
}
#top .content-wrap .text-content {
    padding-left: 5.376vw;
}

#top .column-wrap:last-child .text-content {
    margin-top: 10.753vw;
    padding-left: 14.785vw;
}
#top h2 {
    font-family: var(--font-SMincho);
    font-size: 6.989vw;
    line-height: 1.6;
    letter-spacing: -0.02em;
    color: #AF1838;

    margin-top: 14.247vw;
}
#top .text {
    font-family: var(--font-SMincho);
    font-size: 3.226vw;
    line-height: 2.5;
    letter-spacing: 0;
}

#top h2 + .text {
    margin-top: 4.032vw;
}
#top .img-wrap {
    position: absolute;
}
#top .img-wrap.img01 {
    width: 44.624vw;
    top: 61.29vw;
    right: 0;
    z-index: -1;
}
#top .img-wrap.img02 {
    width: 42.204vw;
    bottom: 0;
}
#top .img-wrap.img03 {
    width: 57.527vw;
    bottom: -4.301vw;
    left: 26.344vw;
}
#top .img-wrap.img04 {
    position: static;
    width: 68.817vw;
}

/* 垂直の線 */
#top .scroll-line {
    position: relative;
    width: 1px;
    background-image: linear-gradient(to bottom, #65182E, #FD3970); /* 線の色 */

    height: 0;
    transition: height 1s ease-out;
}
#top .column-wrap:first-child .scroll-line.is-visible {
    height: 71.102vw;
}
#top .column-wrap:last-child .scroll-line.is-visible {
    height: 49.462vw;
}
/* 上から下に流れる「点」 */
.moving-dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 1.613vw;
    height: 1.613vw;
    background-color: #AF1838;
    border-radius: 50%;
    animation: slideDown 10s ease-in-out infinite;
}
/* 垂直線横のテキスト */
.scroll-text {
    font-family: var(--font-GDisplay);
    font-size: 14px;
    line-height: 2.5;
    letter-spacing: 0.1em;
    color: #902040;
    writing-mode:vertical-lr;

    margin-top: 4.032vw;
    height: 49.462vw;
}
/* 点の移動アニメーション */
@keyframes slideDown {
    /* 0%から20%の間は、top: 0で透明のまま待機（約0.8秒の遅延） */
    0%, 20% { 
        top: 0; 
        opacity: 0; 
    }
    /* 30%で表示される */
    30% { 
        opacity: 1; 
    }
    /* 80%まで表示を維持しながら移動 */
    80% { 
        opacity: 1; 
    }
    /* 100%で下（100%の位置）に到達して消える */
    100% { 
        top: 100%; 
        opacity: 0; 
    }
}
@media (min-width: 769px) {
    #top .column-wrap {
        flex-direction: row;
    }
    #top .column-wrap:first-child .column-item:last-child {
        height: auto;
    }
    #top .column-wrap:first-child .column-item:first-child .content-wrap {
        height: 490px;
    }
    #top .column-wrap:first-child .column-item:last-child .content-wrap {
        height: 333px;
    }
    #top .content-wrap {
        padding-left: 113px;
        min-height: auto;
    }
    #top .content-wrap .text-content {
        padding-left: 49px;
    }
    #top .column-wrap:last-child {
        flex-direction: row;
        margin-top: 63px;
        padding-left: 113px;
    }
    #top .column-wrap:last-child .content-wrap {
        padding-left: 71px;
    }
    #top .column-wrap:last-child .text-content {
        margin-top: 163px;
        padding-left: 125px;
    }
    #top h2 {
        font-size: 44px;
        line-height: 1.59;
        letter-spacing: 0.01em;

        margin-top: 106px;
    }
    #top .text {
        font-size: 20px;
        line-height: 2.15;
        letter-spacing: 0;
    }
    #top h2 + .text {
        margin-top: 48px;
    }
    #top .img-wrap.img01 {
        width: 361px;
        top: 60px;
        right: 110px;
        z-index: -1;
    }
    #top .img-wrap.img02 {
        width: 244px;
        top: 229px;
        bottom: auto;
        right: 533px;
    }

    #top .img-wrap.img03 {
        width: 356px;
        top: 455px;
        bottom: auto;
        left: auto;
        right: 227px;
    }
    #top .img-wrap.img04 {
        position: static;
        width: 550px;
    }
    /* 垂直の線 */
    #top .column-wrap:first-child .scroll-line.is-visible {
        height: 490px;
    }
    #top .column-wrap:last-child .scroll-line.is-visible {
        height: 333px;
    }
    /* 上から下に流れる「点」 */
    .moving-dot {
        width: 6px;
        height: 6px;
    }
    /* 垂直線横のテキスト */
    .scroll-text {
        font-size: 25px;
        line-height: 2;
        letter-spacing: 0.1em;

        margin-top: 77px;
    }
}

/* ========================================
 READING STORIES
======================================== */
#stories {
    margin-top: 16.398vw;
}
#stories .scroll-line {
    height: 11.022vw;
}
#stories .scroll-line::before {
    content: "";
    display: block;
    width: 1px;
    margin: 0 auto;
    height: 0;
    background-image: linear-gradient(to bottom, #65182E, #FD3970);
    transition: height 1s ease-out;
    transition-delay: 2s;
}
#stories .scroll-line.is-visible::before {
    height: 100%;
}
#stories h2 {
    font-family: var(--font-GDisplay);
    font-size: 10.215vw;
    line-height: 1.3;
    letter-spacing: 0.1em;
    color: #AF1838;

    text-align: center;
}
#stories .item {
    position: relative;
    padding-bottom: 29.032vw;
}
#stories .item.story01 {
    margin-top: 2.957vw;
}
#stories .item::after {
    content: "";
    display: block;
    width: 100%;
    height: 94.086vw; /* 各帯の高さ */
    position: absolute;
    z-index: -1;
    top: -13.978vw;
    opacity: 0;
    /* transformとopacityをアニメーションさせる */
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1), 
                opacity 1.2s ease;
}
/* --- 奇数番目：左からスライドイン --- */
#stories .item.story01::after,
#stories .item.story03::after {
    left: 0;
    transform: translate(-100%, -30%);
    clip-path: polygon(0 0, 100% 13%, 100% 100%, 0 87%);
}
/* --- 偶数番目：右からスライドイン --- */
#stories .item.story02::after,
#stories .item.story04::after {
    right: 0;
    transform: translate(100%, -30%);
    clip-path: polygon(0 13%, 100% 0, 100% 87%, 0 100%);
}
/* 画面に入った時：定位置(0,0)に戻る */
#stories .item.is-active::after {
    opacity: 0.1;
    transform: translate(0, 0);
}

#stories .item.story01::after { 
    background-color: #AD4242;
}
#stories .item.story02::after { 
    background-color: #C27B3A;
}
#stories .item.story03::after { 
    background-color: #1A9798;
}
#stories .item.story04::after { 
    background-color: #6E9F51;
}
#stories .item .detail-wrap {
    position: absolute;
    top: 24.462vw;
    padding: 0 4.839vw;
}

#stories .faculty {
    font-size: 3.226vw;
    font-weight: bold;
    line-height: 1.58;
    letter-spacing: 0;
    margin: 0 4.301vw;

    position: relative;
    opacity: 0;
    will-change: opacity, filter, transform;
    text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.25);
}
#stories .faculty::after {
    content: "";
    position: absolute;
    top: 0;
    width: 0.806vw;
    height: 0;
    transition: height 1s ease-out;
}
#stories .story01 .faculty {
    color: #FE4848;
    padding-left: 2.957vw;
}
#stories .story01 .faculty::after {
    left: 0;
    background: linear-gradient(to bottom, #ad4242, #fe4848);
}
#stories .faculty.is-visible {
    opacity: 1;
    animation: BlurFadeIn 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
#stories .faculty.is-visible::after {
    height: 100%;      /* 高さを全開にする */
}
#stories .story02 .faculty {
    color: #FF9C42;
    text-align: right;
    padding-right: 2.957vw;
}
#stories .story02 .faculty::after {
    right: 0;
    background: linear-gradient(to bottom, #C27B3A, #FF9C42);
}
#stories .story03 .faculty {
    color: #1A9798;
    padding-left: 2.957vw;
}
#stories .story03 .faculty::after {
    left: 0;
    background: linear-gradient(to bottom, #1A9798, #2CD3D4);
}
#stories .story04 .faculty {
    color: #94DF68;
    text-align: right;
    padding-right: 2.957vw;
}
#stories .story04 .faculty::after {
    right: 0;
    background: linear-gradient(to bottom, #6E9F51, #94DF68);
}
#stories .name {
    font-family: var(--font-Ryumin);
    font-size: 5.108vw;
    line-height: 2.2;
    letter-spacing: 0.01em;
    font-weight: 300;
    color: #FFFFFF;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    margin: 0 4.301vw;
}
#stories .story02 .name,
#stories .story04 .name {
    text-align: right;
}
#stories .name span {
    font-size: 3.495vw;
    margin-left: 1.495vw;
}
#stories .story-card {
    display: flex;
    align-items: center;
}

#stories .story-circle {
    position: relative;
    width: 24.462vw;
    height: 24.462vw;
    border-radius: 50%;
    z-index: 2;
    /* transitionを追加して、ホバー時に円ごと動かす準備 */
    transition: transform 0.3s ease;
}
#stories .story01 .story-circle {
    background: linear-gradient(to bottom, #ad4242, #fe4848);
}
#stories .story02 .story-circle {
    background: linear-gradient(to bottom, #C27B3A, #FF9C42);
}
#stories .story03 .story-circle {
    background: linear-gradient(to bottom, #1A9798, #2CD3D4);
}
#stories .story04 .story-circle {
    background: linear-gradient(to bottom, #6E9F51, #94DF68);
}
#stories .story-circle a {
    font-family: var(--font-GDisplay);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    text-decoration: none; /* 下線を消す */
    color: #fff; /* 文字色を白に固定 */
    border-radius: 50%; /* クリック範囲も円形に */
}
#stories .label-story {
    font-size: 3.495vw;
    line-height: 1.6;
    letter-spacing: 0.1em;
    margin-bottom: -5px;
}
#stories .number { 
    font-size: 10.215vw;
    line-height: 0.8;
    letter-spacing: -0.08em;
    margin-left: -0.08em;
    margin-top: 1vw;
}

/* V字矢印の実装 */
#stories .arrow {
    width: 2.855vw;
    height: 2.223vw;
    margin-top: 2vw;
    margin-bottom: 2.616vw;
    background-image: url(../images/arrow-icon.png);
    background-repeat: no-repeat;
    background-size: contain;
}

/* 円の下のCHECK! */
#stories .label-check {
    position: absolute;
    bottom: -5.497vw;
    letter-spacing: 0.1em;
    line-height: 1;
    font-size: 3.495vw;
    font-weight: bold;
    text-shadow: 1px 4px 4px rgba(0,0,0,0.25);
}
#stories .story01 .label-check {
    color: #AD4242;
}
#stories .story02 .label-check {
    color: #C27B3A;
}
#stories .story03 .label-check {
    color: #1A9798;
}
#stories .story04 .label-check {
    color: #6E9F51;
}
/* テキストボックス */
#stories .lead-box {
    font-family: var(--font-SMincho);
    margin-left: -8.86vw; /* 重なりを作る */
    z-index: 1;
    flex: 1;
}
#stories .story02 .lead-box,
#stories .story04 .lead-box {
    margin-right: -11.559vw;
    margin-left: 0;
    text-align: right;
}
#stories .lead-box p {
    background: #FFFFFF;
    padding: 0 4.57vw 0 11.559vw;
    margin: 0;
    font-size: 5.645vw;
    line-height: 1.47;
    letter-spacing: 0.13em;
    display: inline-block;
    text-shadow: 1px 4px 4px rgba(0,0,0,0.25);
}
#stories .story02 .lead-box p,
#stories .story04 .lead-box p {
    padding: 0 12.559vw 0 4.57vw;
}

@media (min-width: 769px) {
    #stories {
        margin-top: 150px;
    }
    #stories .scroll-line {
        height: 60px;
    }
    #stories h2 {
        font-size: 38px;
        line-height: 1.35;
    }

    #stories .item {
        position: relative;
        padding-bottom: 155px;
    }
    #stories .item::after {
        min-width: 1440px;
    }
    #stories .item.story01 {
        margin-top: 47px;
    }
    #stories .item.story02 {
        margin-top: -355px;
    }
    #stories .item.story03 {
        margin-top: -50px;
    }
    #stories .item.story04 {
        margin-top: -355px;
    }
    #stories .item::after {
        height: 756px; /* 各帯の高さ */
    }
    /* --- 奇数番目：左からスライドイン --- */
    #stories .item.story01::after,
    #stories .item.story03::after {
        transform: translate(100%, -30%);
        clip-path: polygon(0 40%, 100% 0, 100% 60%, 0 100%);
    }

    /* --- 偶数番目：右からスライドイン --- */
    #stories .item.story02::after,
    #stories .item.story04::after {
        transform: translate(-100%, -30%);
        clip-path: polygon(0 0, 100% 40%, 100% 100%, 0 60%);
    }
    #stories .item.story01::after {
        top: -280px;
    }
    #stories .item.story02::after {
        top: -253px;
    }
    #stories .item.story03::after {
        top: -123px;
    }
    #stories .item.story04::after {
        top: -235px;
    }
    #stories .item.is-active::after {
        opacity: 0.1;
        transform: translate(0, 0);
    }
    #stories .item .item-inner {
        width: 1237px;
        padding: 0 103px;
        margin: 0 auto;
    }
    #stories .item .item-cont {
        width: 558px;   
        position: relative; 
    }
    #stories .item.story02 .item-cont,
    #stories .item.story04 .item-cont {
        margin-left: auto;
    }
    #stories .item .detail-wrap {
        position: absolute;
        top: 136px;
        padding: 0 30px;
    }
    #stories .faculty {
        font-size: 18px;
        margin: 0 18px;
    }
    #stories .faculty::after {
        width: 4.5px;
    }
    #stories .story01 .faculty,
    #stories .story03 .faculty {
        padding-left: 17.5px;
    }
    #stories .story02 .faculty,
    #stories .story04 .faculty {
        padding-right: 17.5px;
    }
    #stories .name {
        font-size: 28.5px;
        line-height: 2.6;
        margin: 0 18px;
    }
    #stories .name span {
        font-size: 19.5px;
        margin-left: 0.6em;
    }
    #stories .story-circle {
        width: 136.5px;
        height: 136.5px;
    }
    #stories .label-story {
        font-size: 19.5px;
    }
    #stories .number { 
        font-size: 57px;
        margin-top: 0;
    }
    /* V字矢印の実装 */
    #stories .arrow {
        width: 14px;
        height: 10.52px;
        margin-top: 14.98px;
        margin-bottom: 14.98px;
    }
    #stories .story-circle a:hover .arrow {
        /* アニメーションの名前、時間、タイミング、回数 */
        animation: arrow-bounce 0.6s ease-in-out;
        animation-iteration-count: 2;
        animation-delay: 1s; 
        animation-play-state: running;
    }

    /* 円の下のCHECK! */
    #stories .label-check {
        bottom: -30px;
        font-size: 19.5px;
    }
    /* テキストボックス */
    #stories .lead-box {
        margin-left: -54px; /* 重なりを作る */
    }
    #stories .story02 .lead-box,
    #stories .story04 .lead-box {
        margin-right: -66.5px;
        margin-left: 0;
    }
    #stories .lead-box p {
        padding: 0 12px 0 60px;
        font-size: 31.5px;
    }
    #stories .story02 .lead-box p,
    #stories .story04 .lead-box p {
        padding: 0 66.5px 0 12px;
    }
    #stories .lead-box p:first-child {
        padding-top: 6px;
    }
    #stories .lead-box p:last-child {
        padding-top: 3px;
    }
}
/* ========================================
 ストーリー詳細 
======================================== */
.story-content {
    margin-top: 16.935vw;
    position: relative;
}
.story-content::before {
    content: "";
    display: block;
    width: 100%;
    height: 98.118vw; /* 各帯の高さ */
    position: absolute;
    z-index: -1;
    top: 4.032vw;
    opacity: 0;right: 0;
    transform: translate(100%, -30%);
    /* transformとopacityをアニメーションさせる */
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1), 
                opacity 1.2s ease;
    clip-path: polygon(0 0, 100% 0, 100% 87%, 0 100%);
}
.story-content.is-active::before {
    opacity: 0.1;
    transform: translate(0, 0);
}
.story-content .story-detail {
    position: relative;
    padding-top: 7.796vw;
}
.story-content .story-detail .inner {
    padding: 0 9.14vw;
}
.story-content .story-detail .story-card {
    font-family: var(--font-GDisplay);
    position: absolute;
    z-index: 1;
    top: 0;
    width: 46.505vw;
    padding: 3.495vw 0 3vw;
    text-align: center;
    color: #FFFFFF;
    margin-left: -9.14vw;
}
.story-content .story-detail .story-card .label-story {
    font-size: 3.495vw;
    letter-spacing: 0.1em;
}
.story-content .story-detail .story-card .number {
    font-size: 10.215vw;
    line-height: 0.84;
    letter-spacing: -0.08em;
    margin-left: -0.08em;
}
.story-content .story-detail .story-top {
    position: relative;
}
.story-content .story-detail .story-top .img-wrap {
    margin: 0 -9.14vw;
}
.story-content .story-detail .story-top .lead-box {
    position: absolute;
    top: 12.097vw;
    right: 0;
    writing-mode: vertical-rl;
    font-family: var(--font-SMincho);
    font-size: 8.602vw;
    line-height: 1.28;
    letter-spacing: 0.29em;
    height: 113.71vw;
}
.story-content .story-detail .story-top .lead-box p {
    text-shadow: 1px 1px 4px rgba(255, 255, 255,1);
}
.story-content .story-detail .story-top .lead-box p + p { 
    padding-top: 1.25em;
}
.story-content .story-detail .story-top .faculty {
    font-size: 4.032vw;
    font-weight: bold;
    line-height: 1.33;
    letter-spacing: 0;
    padding-top: 5.645vw;
    padding-left: 2.957vw;

    position: relative;
}
.story-content .story-detail .story-top .faculty::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0.806vw;
    height: 0;
    transition: height 1s ease-out;
}
.story-content .story-detail .story-top .faculty.is-visible::before {
    height: 100%;
}
.story-content .story-detail .story-top .name {
    font-family: var(--font-Ryumin);
    font-size: 6.452vw;
    font-weight: 300;
    margin-top: auto;
    padding-left: 2.957vw;
}

.story-content .story-detail .story-top .name span {
    font-size: 4.839vw;
}
.story-content .story-detail .story-btm {
    margin-top: 21.624vw;
}
.story-content .story-detail .story-btm .column-wrap {
    flex-direction: column;
}
.story-content .story-detail .story-btm .column-wrap .title {
    font-family: var(--font-SMincho);
    font-size: 4.839vw;
    line-height: 1.83;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}
.story-content .story-detail .story-btm .column-wrap .text {
    font-size: 3.226vw;
    line-height: 2.16;
    letter-spacing: -0.05em;

    margin-top: 5.914vw;
}
.story-content .story-detail .story-btm .column-wrap .hand-writing {
    position: absolute;
    opacity: 0;
    filter: blur(15px); /* テキストより少し強めのぼかし */
    transform: translateY(15px) scale(0.95); /* 下から浮き上がりつつ、少し拡大させる */
    transition: 
        opacity 1.2s ease, 
        filter 1.2s ease, 
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 1s;
    will-change: opacity, filter, transform; /* パフォーマンス向上のため */
}
.story-content .story-detail .story-btm .column-wrap .hand-writing.is-active {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
}


.story-content .story-detail .story-btm .content01 {
    position: relative;
}

.story-content .story-detail .story-btm .content02 {
    margin-top: 23.925vw;
    position: relative;
}
.story-content .story-detail .story-btm .content02.is-active {
    transition-delay: 1s;
}
.story-content .story-detail .story-btm .content02::before {
    content: "";
    display: block;
    width: 100vw;
    margin: 0 -9.14vw;
    height: 139.516vw; /* 各帯の高さ */
    position: absolute;
    z-index: -1;
    top: -12.903vw;
    left: 0;
    opacity: 0;
    transform: translate(-100%, -30%);
    /* transformとopacityをアニメーションさせる */
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1), 
                opacity 1.2s ease;
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
}
.story-content .story-detail .story-btm .content02.is-active::before {
    opacity: 0.1;
    transform: translate(0, 0);
}
.story-content .story-detail .story-btm .content02 .img-wrap {
    position: absolute;
    width: 38.71vw;
    top: -16.667vw;
    left: -9.14vw;
}
.story-content .story-detail .story-btm .content02 .title {
    text-align: right;
}
.story-content .story-detail .story-btm .content02 .hand02 {
    position: absolute;
}
.story-content .story-detail .story-btm .content02 .text {
    margin-top: 10.484vw;
}
.story-content .story-detail .story-btm .content03 {
    position: relative;
    margin-top: 8.602vw;
}
.story-content .story-detail .story-btm .content03 .img-wrap:first-child {
    margin: 0 -2.688vw;
}
.story-content .story-detail .story-btm .content03 .img-wrap:last-child {
    position: absolute;
    top: 40.591vw;
    right: -9.14vw;
    width: 38.71vw;
}
.story-content .story-detail .story-btm .content03 .title {
    margin-top: 9.677vw;
}
.story-content .story-detail .story-btm .content03 .text {
    margin-top: 12.903vw;
}
.story-content .btn-wrap {
    position: relative;
    margin-top: 22.043vw;
}
.story-content .btn-wrap::before {
    content: "";
    display: block;
    width: 100vw;
    height: 142.516vw; /* 各帯の高さ */
    position: absolute;
    z-index: -1;
    top: -19.355vw;
    right: 0;
    opacity: 0;
    transform: translate(100%, -30%);
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1), 
                opacity 1.2s ease;
    clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
}
.story-content .btn-wrap.is-active::before {
    opacity: 0.1;
    transform: translate(0, 0);
}
.story-content .btn-wrap ul li {
    width: 75.538vw;
    margin: 0 auto;
    position: relative;
}
.story-content .btn-wrap ul li:last-child {
    margin-top: 3.763vw;
}
.story-content .btn-wrap ul li a {
    height: 20.43vw;
    border-radius: 13.441vw;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-align: center;
    color: #FFFFFF;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    font-family: var(--font-SMincho);
    font-size: 5.376vw;
    line-height: 1.5;
    letter-spacing: -0.02em;
}
.story-content .btn-wrap ul li:last-child a {
    background: #FFFFFF;
    border: 2px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    font-size: 5.914vw;
    line-height: 1;
    letter-spacing: 0;
}
.story-content .btn-wrap ul li .arrow {
    width: 2.151vw;
    height: 4.505vw;
    /*position: absolute;*/
    margin-left: 7.258vw;
}
.story-content .btn-wrap ul li:first-child .arrow {
    background-image: url(../images/btn_arrow.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.story-content .prof-wrap {
    width: 79.032vw;
    margin: 14.86vw auto 0;
}
.story-content .prof-wrap .column-wrap {
    flex-direction: column;
}
.story-content .prof-wrap h3 {
    font-family: var(--font-GDisplay);
    font-size: 30px;
    line-height: 1.66;
    letter-spacing: 0.1em;
    text-align: center;
}
.story-content .prof-wrap .prof-detail {
    margin-top: 3.495vw;
}

.story-content .prof-wrap .prof-detail .prof-text {
    text-align: center;
    font-weight: 300;
}
.story-content .prof-wrap .prof-detail .prof-text .faculty {
    font-family: var(--font-Ryumin);
    font-size: 3.226vw;
    line-height: 1.6;
    letter-spacing: 0.05em;
}
.story-content .prof-wrap .prof-detail .prof-text .name {
    font-family: var(--font-Ryumin);
    font-size: 4.839vw;
    line-height: 1.72;
    letter-spacing: 0.05em;
}

.story-content .prof-wrap .prof-detail .prof-text .name span {
    font-size: 2.957vw;
    letter-spacing: 0.05em;
}

.story-content .prof-wrap .prof-detail .prof-text .school {
    font-family: var(--font-Ryumin);
    font-size: 2.957vw;
    line-height: 1.9;
    letter-spacing: 0.05em;
}
.story-content .prof-wrap .prof-detail .message {
    font-size: 3.226vw;
    line-height: 1.9;
    letter-spacing: -0.05em;

    margin-top: 3.226vw;
    text-align: left;
}
.story-content .story-list {
    margin: 13.978vw 6.72vw 0;
}
.story-content .story-list ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 2.688vw;
}
.story-content .story-list .img-wrap {
}
.story-content .story-list .img-wrap img {
    height: 15.591vw;
    object-fit: cover;
    object-position: top center;
}
.story-content .story-list .story-card {
    position: relative;
    font-family: var(--font-GDisplay);
    color: #FFFFFF;
    text-align: center;
    padding: 2.151vw 0 3.495vw;
}
.story-content .story-list .story-card .label-story {
    font-size: 3.495vw;
    letter-spacing: 0.02em;
}
.story-content .story-list .story-card .number {
    font-size: 6.72vw;
    letter-spacing: -0.08em;
}
.story-content .story-list .story-card .arrow {
    position: absolute;
    background-image: url(../images/btn_arrow.png);
    background-repeat: no-repeat;
    background-size: contain;
    transform: rotate(90deg);
    width: 2.151vw;
    height: 4.032vw;
    right: 50%;
    left: 50%;
    bottom: 0.5vw;
}
.story-content .story-list  ul li.story01{
    background: linear-gradient(to bottom, #AD4242, #FE4848);
}
.story-content .story-list  ul li.story02{
    background: linear-gradient(to bottom, #C27B3A, #F29541);
}
.story-content .story-list  ul li.story03{
    background: linear-gradient(to bottom, #1A9798, #2CD3D4);
}
.story-content .story-list  ul li.story04{
    background: linear-gradient(to bottom, #6E9F51, #94DF68);
}


@media (min-width: 769px) {
   .story-content {
        margin-top: 78px;
    }
    .story-content + .story-content {
        margin-top: 378px;
    }
    .story-content::before {
        height: 839px; /* 各帯の高さ */
        min-width: 1440px;
        top: 372px;
    }
    .story-content .story-detail {
        padding-top: 60px;
    }
    .story-content .story-detail .inner {
        padding: 0 228px;
        width: 984px;
        margin: 0 auto;
    }
    .story-content .story-detail .story-card {
        top: 0;
        width: 346px;
        padding: 26px 0 24px;
        margin-left: -229px;
    }
    .story-content .story-detail .story-card .label-story {
        font-size: 26px;
    }
    .story-content .story-detail .story-card .number {
        font-size: 76px;
    }
    .story-content .story-detail .story-top .img-wrap {
        width: 886.54px;
        margin: 0 -229px;
    }
    .story-content .story-detail .story-top .lead-box {
        top: 18px;
        right: 0;
        font-size: 64px;
        height: 846px;
    }
    .story-content .story-detail .story-top .lead-box p + p {
        padding-top: 1.29em;
    }
    .story-content .story-detail .story-top .faculty {
        font-size: 30px;
        line-height: 1.33;
        padding-top: 36px;
        padding-left: 17px;
    }
    .story-content .story-detail .story-top .faculty::before {
        width: 3px;
    }
    .story-content .story-detail .story-top .name {
        font-size: 48px;
        margin-left: 45px;
        padding-left: 0;
    }
    .story-content .story-detail .story-top .detail-wrap {
        display: flex;
    }
    .story-content .story-detail .story-top .name span {
        font-size: 36px;
    }

    .story-content .story-detail .story-btm {
        margin-top: 226px;
    }
    .story-content::before {
        clip-path: polygon(0 0, 100% 0, 100% 68%, 0 100%);
    }
    .story-content .story-detail .story-btm .column-wrap {
        flex-direction: row;
        column-gap: 39px;
    }
    .story-content .story-detail .story-btm .column-wrap:first-child .img-wrap {
        width: 347px;
    }
    .story-content .story-detail .story-btm  .column-wrap .title {
        font-size: 22px;
        line-height: 1.72;
    }
    .story-content .story-detail .story-btm  .column-wrap .text {
        font-size: 14px;
        line-height: 1.85;
        letter-spacing: -0.01em;

        margin-top: 9px;
    }
    .story-content .story-detail .story-btm .content02 {
        margin-top: 30px;
    }
    .story-content .story-detail .story-btm .content02::before {
        content: none;
    }
    .story-content .story-detail .story-btm .content02 .title {
        text-align: left;
    }
    .story-content .story-detail .story-btm .content02 .text {
        margin-top: 9px;
    }

    .story-content .story-detail .story-btm .content03 {
        margin-top: 45px;
    }
    .story-content .story-detail .story-btm .content03 .column-wrap {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
    .story-content .story-detail .story-btm .content03 .column-item:last-child {
        width: 436px;
    } 
    .story-content .story-detail .story-btm .content03 .img-wrap:first-child {
        margin: 0;
        width: 486px;
    }
    .story-content .story-detail .story-btm .content03 .img-wrap:last-child {
        top: 226.5px;
        right: 0;
        width: 213px;
    }
    .story-content .story-detail .story-btm .content03 .title {
        margin-top: 0;
    }
    .story-content .story-detail .story-btm .content03 .text {
        margin-top: 19px;
    }
    .story-content .btn-wrap {
        margin: 146px auto 0;
        max-width: 984px;
        padding: 0 228px;
    }
    .story-content .btn-wrap::before {
        content: none;
    }
    .story-content .btn-wrap ul {
        display: flex;
    }
    .story-content .btn-wrap ul li {
        width: 281px;
        margin: 0;
    }
    .story-content .btn-wrap ul li:last-child {
        margin-left: 29px;
        margin-top: 0;
    }
    .story-content .btn-wrap ul li a {
        height: 76px;
        font-size: 20px;
        line-height: 1.65;

    }
    .story-content .btn-wrap ul li:last-child a {
        font-size: 22px;
    }
    .story-content .btn-wrap ul li .arrow {
        width: 8px;
        height: 16.76px; 
        margin-left: 23px;
    }
    .story-content .btn-wrap ul li a:hover .arrow {
        /* アニメーションの名前、時間、タイミング、回数 */
        animation: arrow-bounce2 0.6s ease-in-out;
        animation-iteration-count: 2;
        animation-delay: 1s; 
        animation-play-state: running;
    }
 
    .story-content .prof-wrap {
        position: relative;
        width: auto;
        margin: 105px auto 0;
    }
    .story-content .prof-wrap::before {
        content: "";
        display: block;
        width: 100%;
        height: 783px; /* 各帯の高さ */
        min-width: 1440px;
        position: absolute;
        z-index: -1;
        top: 63px;
        opacity: 0;
        left: 0;
        transform: translate(-100%, -30%);
        /* transformとopacityをアニメーションさせる */
        transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1), 
                    opacity 1.2s ease;
        clip-path: polygon(0 0, 100% 31%, 100% 100%, 0 68%);
    }
    .story-content .prof-wrap.is-active::before {
        opacity: 0.1;
        transform: translate(0, 0);
    }
    .story-content .prof-wrap .column-wrap {
        flex-direction: row;
        column-gap: 70px;
        width: 984px;
        margin: 0 auto;
        padding: 0 228px;
    }
    .story-content .prof-wrap .prof-img {
        width: 477px;
    }
    .story-content .prof-wrap h3 {
        font-size: 30px;
        line-height: 1;
    }
    .story-content .prof-wrap .prof-detail {
        margin-top: 0;
        width: 454px;
    }
    .story-content .prof-wrap .prof-detail .prof-text {
        margin-top: 23px;
    }
    .story-content .prof-wrap .prof-detail .prof-text .faculty {
        font-size: 18px;
        line-height: 1.86;
    }
    .story-content .prof-wrap .prof-detail .prof-text .name {
        font-size: 25px;
        line-height: 1.6;
    }

    .story-content .prof-wrap .prof-detail .prof-text .name span {
        font-size: 16.5px;
        margin-left: 0.6em;
    }

    .story-content .prof-wrap .prof-detail .prof-text .school {
        font-size: 16.5px;
        line-height: 1.6;
    }
    .story-content .prof-wrap .prof-detail .message {
        font-size: 15px;
        line-height: 1.733;
        letter-spacing: -0.05em;

        margin-top: 8.5px;
    }
    .story-content .story-list {
        width: 800px;
        margin: 63px auto 0;
        padding: 0 320px;
    }
    .story-content .story-list ul {
        grid-column-gap: 34px;
    }
    .story-content .story-list ul li {
        padding: 3px;
    }

    .story-content .story-list .img-wrap img {
        height: auto;
    }
    .story-content .story-list .story-card {
        padding: 12px 0 2px;
    }
    .story-content .story-list .story-card .label-story {
        font-size: 19.5px;
        letter-spacing: 0.05em;
    }
    .story-content .story-list .story-card .number {
        font-size: 37.5px;
        letter-spacing: 0.05em;
    }
    .story-content .story-list .story-card .arrow {
        transform: rotate(90deg);
        width: 6px;
        height: 11px;
        right: 47px;
        left: auto;
        top: 50%;
        bottom: 50%;
    }
    .story-content .story-list li a:hover .arrow {
        /* アニメーションの名前、時間、タイミング、回数 */
        animation: arrow-bounce3 0.6s ease-in-out;
        animation-iteration-count: 2;
        animation-delay: 1s; 
        animation-play-state: running;
    }
}
/* story01 */
#story01.story-content::before {
    background-color: #AD4242;
}
#story01.story-content .story-detail .story-card {
    background: #AD4242;
}
#story01.story-content .story-detail .story-top .faculty {
    color: #AD4242;
}
#story01.story-content .story-detail .story-top .faculty::before {
    background-color: #AD4242;
}
#story01.story-content .story-detail .story-btm .content02::before {
    background-color: #AD4242;
}
#story01.story-content .story-detail .story-btm .column-wrap .hand-writing.hand01 {
    width: 35.282vw;
    top: 19vw;
    left: 29.032vw;
}
#story01.story-content .story-detail .story-btm .content02 .hand02 {
    top: 20vw;
    right: -4.965vw;
    width: 52.642vw;
}

#story01.story-content .story-detail .story-btm .content03 .hand03 {
    width: 31.575vw;
    top: 31.957vw;
    right: 32.548vw;
}
#story01.story-content .btn-wrap::before {
    background-color: #AD4242;
}
#story01.story-content .btn-wrap ul li a {
    padding-right: 0;
}
#story01.story-content .btn-wrap ul li:first-child a {
    background: linear-gradient(to right, #ad4242, #fe4848);
}

#story01.story-content .btn-wrap ul li:last-child a {
    color: #FE4848;
    background-image: linear-gradient(#fff, #fff),  linear-gradient(to right, #ad4242, #fe4848);
}

#story01.story-content .btn-wrap ul li:last-child .arrow {
    background-image: url(../images/story01-btn_arrow.png);
    background-repeat: no-repeat;
    background-size: contain;
}
#story01.story-content .prof-wrap h3 {
    color: #AD4242;
}


@media (min-width: 769px) {
    #story01.story-content .story-detail .story-top .lead-box {
        top: 53px;
    }
    #story01.story-content .story-detail .story-btm .column-wrap .hand-writing.hand01 {
        width: 183.75px;
        top: 21.51px;
        left: auto;
        right: 50.59px;
    }
    #story01.story-content .story-detail .story-btm .content02 .hand02 {
        top: 8.36px;
        right: -39.44px;
        width: 274.15px;
    }
    #story01.story-content .story-detail .story-btm .content03 .hand03 {
        width: 164.44px;
        top: -9px;
        right: auto;
        left: 313px;
    }
    #story01.story-content .btn-wrap ul li a {
        padding-right: 0;
    }
    #story01.story-content .prof-wrap::before {
        background-color: #AD4242;
    }
}
/* story02 */
#story02.story-content::before {
    background-color: #C27B3A;
}
#story02.story-content .story-detail .story-card {
    background: #C27B3A;
}
#story02.story-content .story-detail .story-top .faculty {
    color: #C27B3A;
}
#story02.story-content .story-detail .story-top .faculty::before {
    background-color: #C27B3A;
}
#story02.story-content .story-detail .story-btm .column-wrap .hand-writing.hand01 {
    width: 46.527vw;
    top: 17.473vw;
    right: 7.387vw;
    left: auto;
}
#story02.story-content .story-detail .story-btm .content02::before {
    background-color: #C27B3A;
}

#story02.story-content .story-detail .story-btm .content02 .hand02 {
    top: 21.532vw;
    right: 22.527vw;
    width: 25.196vw;
}

#story02.story-content .story-detail .story-btm .content03 .hand03 {
    width: 42.589vw;
    top: 34.677vw;
    right: 13.978vw;
}
#story02.story-content .story-detail .story-btm .content03 .text {
    margin-top: 12.903vw;
}
#story02.story-content .btn-wrap::before {
    background-color: #C27B3A;
}
#story02.story-content .btn-wrap ul li:first-child a {
    line-height: 1.35;
    background: linear-gradient(to right, #C27B3A, #FF9C42);
}
#story02.story-content .btn-wrap ul li:last-child a {
    color: #F29541;
    background-image: linear-gradient(#fff, #fff),  linear-gradient(to right, #C27B3A, #FF9C42);
}
#story02.story-content .btn-wrap ul li:last-child .arrow {
    background-image: url(../images/story02-btn_arrow.png);
    background-repeat: no-repeat;
    background-size: contain;
}
#story02.story-content .prof-wrap h3 {
    color: #C27B3A;
}
@media (min-width: 769px) {
    #story02.story-content .story-detail .story-top .lead-box {
        top: 18px;
    }
    #story02.story-content .story-detail .story-top .lead-box p + p {
        padding-top: 0;
    }
    #story02.story-content .story-detail .story-btm .column-wrap .hand-writing.hand01 {
        width: 242.31px;
        top: 21.56px;
        right: 7.31px;
        left: auto;
    }

    #story02.story-content .story-detail .story-btm .content02 .hand02 {
        top: 25.1px;
        right: 111.76px;
        width: 131.22px;
    }

    #story02.story-content .story-detail .story-btm .content03 .hand03 {
        width: 158.43px;
        top: 30.13px;
        right: auto;
        left: 210px;
    }
    #story02.story-content .story-detail .story-btm .content03 .text {
        margin-top: 22px;
    }
    #story02.story-content .prof-wrap::before {
        background-color: #C27B3A;
    }
}
/* story03 */
#story03.story-content::before {
    background-color: #1A9798;
}
#story03.story-content .story-detail .story-card {
    background: #1A9798;
}
#story03.story-content .story-detail .story-top .faculty {
    color: #1A9798;
}
#story03.story-content .story-detail .story-top .faculty::before {
    background-color: #1A9798;
}
#story03.story-content .story-detail .story-btm .column-wrap .hand-writing.hand01 {
    width: 46.527vw;
    top: 17.473vw;
    right: -7.317vw;
    left: auto;
}
#story03.story-content .story-detail .story-btm .content02 {
    margin-top: 26.882vw;
}
#story03.story-content .story-detail .story-btm .content02::before {
    background-color: #1A9798;
}

#story03.story-content .story-detail .story-btm .content02 .hand02 {
    top: 17.312vw;
    right: 20.065vw;
    width: 37.844vw;
}

#story03.story-content .story-detail .story-btm .content03 .hand03 {
    width: 35.798vw;
    top: 36.559vw;
    right: 20.667vw;
}

#story03.story-content .story-detail .story-btm .content02 .text {
    margin-top: 16.398vw;
}
#story03.story-content .btn-wrap::before {
    background-color: #1A9798;
}
#story03.story-content .btn-wrap ul li:first-child a {
    font-size: 5.376vw;
    line-height: 1.13;
    letter-spacing: -0.02em;
    background: linear-gradient(to right, #1A9798, #2CD3D4);
}
#story03.story-content .btn-wrap ul li:last-child a {
    font-size: 5.376vw;
    line-height: 1.65;
    letter-spacing: 0;
    color: #2CD3D4;
    background-image: linear-gradient(#fff, #fff),  linear-gradient(to right, #1A9798, #2CD3D4);
}
#story03.story-content .btn-wrap ul li:last-child .arrow {
    background-image: url(../images/story03-btn_arrow.png);
    background-repeat: no-repeat;
    background-size: contain;
}
#story03.story-content .prof-wrap h3 {
    color: #1A9798;
}


@media (min-width: 769px) {
    #story03.story-content .story-detail .story-top .lead-box {
        top: -52px;
    }
    #story03.story-content .story-detail .story-top .lead-box p + p {
        padding-top: 2.55em;
    }
    #story03.story-content .story-detail .story-btm .column-wrap .hand-writing.hand01 {
        width: 242.31px;
        top: 8px;
        right: 0;
        left: auto;
    }
    #story03.story-content .story-detail .story-btm .content02 {
        margin-top: 30px;
    }
    #story03.story-content .story-detail .story-btm .content02 .hand02 {
        top: 8.26px;
        right: 37.72px;
        width: 197.1px;
    }

    #story03.story-content .story-detail .story-btm .content03 .hand03 {
        width: 186.44px;
        top: 28.16px;
        right: auto;
        left: 210px;
    }

    #story03.story-content .story-detail .story-btm .content02 .text {
        margin-top: 10px;
    }
    #story03.story-content .btn-wrap ul li:first-child a {
        font-size: 20px;
        line-height: 1.25;
        padding-right: 10px;
    }
    #story03.story-content .btn-wrap ul li:last-child a {
        font-size: 20px;
    } 
    #story03.story-content .prof-wrap::before {
        background-color: #1A9798;
    }
}
/* story04 */
#story04.story-content::before {
    background-color: #6E9F51;
}
#story04.story-content .story-detail .story-card {
    background: #6E9F51;
}
#story04.story-content .story-detail .story-top .lead-box p + p {
    padding-top: 3.8em;
}
#story04.story-content .story-detail .story-top .faculty {
    color: #6E9F51;
}
#story04.story-content .story-detail .story-top .faculty::before {
    background-color: #6E9F51;
}
#story04.story-content .story-detail .story-btm .column-wrap .hand-writing.hand01 {
    width: 47.522vw;
    top: 17.903vw;
    right: -2.8vw;
    left: auto;
}
#story04.story-content .story-detail .story-btm .content02::before {
    background-color: #6E9F51;
}
#story04.story-content .story-detail .story-btm .content02 .text {
    margin-top: 19.355vw;
}
#story04.story-content .story-detail .story-btm .content02 .hand02 {
    top: 15.473vw;
    right: 0;
    width: 56.677vw;
}
#story04.story-content .story-detail .story-btm .content03 {
    margin-top: 15.591vw;
}
#story04.story-content .story-detail .story-btm .content03 .title {
    margin-top: 14.516vw;
}
#story04.story-content .story-detail .story-btm .content03 .text {
    margin-top: 16.935vw;
}
#story04.story-content .story-detail .story-btm .content03 .hand03 {
    width: 35.798vw;
    top: 31.989vw;
    right: 19.505vw;
}
#story04.story-content .btn-wrap::before {
    background-color: #6E9F51;
}
#story04.story-content .btn-wrap ul li:first-child a {
    background: linear-gradient(to right, #6E9F51, #94DF68);
}

#story04.story-content .btn-wrap ul li:last-child a {
    color: #94DF68;
    background-image: linear-gradient(#fff, #fff),  linear-gradient(to right, #6E9F51, #94DF68);
}

#story04.story-content .btn-wrap ul li:last-child .arrow {
    background-image: url(../images/story04-btn_arrow.png);
    background-repeat: no-repeat;
    background-size: contain;
}
#story04.story-content .prof-wrap h3 {
    color: #6E9F51;
}
@media (min-width: 769px) {
    #story04.story-content {
        padding-bottom: 122px;
    }
    #story04.story-content .story-detail .story-top .lead-box p + p {
        padding-top: 3.85em;
    }
    #story04.story-content .story-detail .story-btm .column-wrap .hand-writing.hand01 {
        width: 247.5px;
        top: 11.68px;
        right: -13px;
        left: auto;
    }
    #story04.story-content .story-detail .story-btm {
        margin-top: 183px;
    }
    #story04.story-content .story-detail .story-btm .content02 .text {
        margin-top: 10.14px;
    }
    #story04.story-content .story-detail .story-btm .content02 .hand02 {
        top: 11px;
        right: -60.71px;
        width: 295.17px;
    }
    #story04.story-content .story-detail .story-btm .content03 {
        margin-top: 70.14px;
    }
    #story04.story-content .story-detail .story-btm .content03 .title {
        margin-top: 0;
    }
    #story04.story-content .story-detail .story-btm .content03 .text {
        margin-top: 21.14px;
    }
    #story04.story-content .story-detail .story-btm .content03 .hand03 {
        width: 186.44px;
        top: 28.29px;
        right: auto;
        left: 210px;
    }
    #story04.story-content .prof-wrap::before {
        background-color: #6E9F51;
        height: 690px;
        top: -27px;
        clip-path: polygon(0 0, 100% 40%, 100% 100%, 0 100%);
    }
}
/* ========================================
 関連リンク
======================================== */
#links {
    margin: 21.774vw auto 14.247vw;
    width: 75.538vw;
}

#links h2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    font-family: var(--font-GDisplay);
    font-size: 9.409vw;
    line-height: 1.11;
    letter-spacing: 0.1em;
    color: #AF1838;
}

#links h2 span {
    font-family: var(--font-YMincho);
    font-size: 3.763vw;
    font-weight: 600;
    line-height: 1.42;
    letter-spacing: 0.05em;

    color: #000;
}

#links .bnr-wrap {
    margin-top: 5.914vw;
    display: flex;
    flex-direction: column;
    row-gap: 3.763vw;
}

@media (min-width: 769px) {
    #links {
        margin: 149px auto 76px;
        width: 890px;
    }

    #links h2 {
        align-items: center;
        flex-direction: column;

        font-size: 35px;
    }

    #links h2 span {
        font-size: 14px;
    }

    #links .bnr-wrap {
        margin-top: 47px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 24px;
        grid-row-gap: 24px;
    }
    #links .bnr-wrap li.bnr01 { grid-area: 1 / 1 / 2 / 4; }
    #links .bnr-wrap li.bnr02 { grid-area: 2 / 1 / 3 / 2; }
    #links .bnr-wrap li.bnr03 { grid-area: 2 / 2 / 3 / 3; }
    #links .bnr-wrap li.bnr04 { grid-area: 2 / 3 / 3 / 4; }
    #links .bnr-wrap li + li {
        margin-top: 0;
    }
}
/* ========================================
 Footer
======================================== */
.footer {
    text-align: center;
}

.footer h2 {
    width: 66.398vw;
    margin: 0 auto;
}

.footer .address {
    font-family: var(--font-YMincho);
    font-size: 3.763vw;
    line-height: 1.78;
    letter-spacing: 0.1em;
    text-align: center;
    margin-top: 5.108vw;
}

.footer .address a {
    color: #000;
    text-decoration: underline;
}

.footer .sns {
    display: flex;
    justify-content: center;
    column-gap: 5.645vw;

    margin-top: 5.914vw;
}
.footer .sns li {
    width: 10.753vw;
}
.footer .copyright {
    font-family: var(--font-GDisplay);
    font-size: 3.226vw;
    line-height: 2.25;
    text-align: center;

    margin-top: 8.871vw;
    margin-bottom: 5.559vw;
}
.footer .footer-recruit {
    padding: 15px;    
}
.footer .footer-recruit img {
    width: auto;
}

@media (min-width: 769px) {
    .footer h2 {
        width: 379px;
    }

    .footer .address {
        font-size: 14px;
        margin-top: 0;
        padding-left: 70px;
    }

    .footer .sns {
        column-gap: 20px;

        margin-top: 80px;
    }
    .footer .sns li {
        width: 40px;
    }
    .footer .copyright {
        font-size: 12px;

        margin-top: 22px;
        margin-bottom: 32px;
    }
    .footer .footer-recruit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.2rem 2rem;
    }
}



/* ========================================
 アニメーション設定
======================================== */
.is-BlurInText span {
    display: inline-block;
    white-space: pre;
    opacity: 0;
    /*filter: blur(10px);*/
    transform: translateX(-15px);
    /* animation: BlurIn 1.8s forwards; ← ここを消す */
}

/* クラスがついた時だけアニメーションを発火 */
.is-BlurInText.is-active span {
    animation: BlurIn 1.8s forwards;
    /* animation-delay はJS側で付与される style="animation-delay:..." が優先されます */
}

.is-BlurInText2 span {
    display: inline-block;
    white-space: pre;
    opacity: 0;
    /*filter: blur(10px);*/
    transform: translateX(-15px);
}

/* スクロールして is-active がついたら発火 */
.is-BlurInText2.is-active span {
    animation: BlurIn 1.8s forwards; /* 先ほど作成した BlurIn アニメーションを流用 */
}
/* テキストブラーイン（左から右へ） */
@keyframes BlurIn {
  0% {
    opacity: 0;
    /*filter: blur(8px);*/
    transform: translateX(-15px);
  }
  100% {
    opacity: 1;
    /*filter: blur(0);*/
    transform: translateX(0);
  }
}

/* 初期状態：すべての文字spanを隠す */
.is-BlurInTextVertical p span {
    display: inline-block;
    white-space: pre;
    opacity: 0;
    /*filter: blur(10px);*/
    transform: translateY(20px);
}

/* pタグが画面内に入って .is-active がついたら、その中のspanを動かす */
.is-BlurInTextVertical p.is-active-text span {
    animation: BlurInVertical 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* 2行目（2つ目のp）の全spanに 0.5s の下駄を履かせる */
.is-BlurInTextVertical p:nth-child(2).is-active-text span {
    /* JSでついた delay + 0.5s のタイミングで動き出す */
    animation: BlurInVertical 1.8s forwards;
    animation-delay: calc(var(--delay, 0s) + 0.5s); 
}
@keyframes BlurInVertical {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

#mv .lead-wrap .lead-wrap-en {
    position: absolute;
    top: 0;
    right: 0;
}
#mv .lead-wrap .lead-wrap-en img {
    opacity: 0;
    /*filter: blur(15px);*/ /* テキストより少し強めのぼかし */
    transform: translateY(15px) scale(0.95); /* 下から浮き上がりつつ、少し拡大させる */
    transition: 
        opacity 1.2s ease, 
        filter 1.2s ease, 
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, filter, transform; /* パフォーマンス向上のため */
}
/* JSでクラスがついた時の状態 */
#mv .lead-wrap .lead-wrap-en img.is-active {
    opacity: 1;
    /*filter: blur(0);*/
    transform: translateY(0) scale(1);
}
/* ブラーフェードイン */
.is-BlurFadeIn {
    opacity: 0;
    will-change: opacity, filter, transform; /* パフォーマンス向上 */
}
.is-BlurFadeIn.is-active {
    animation: BlurFadeIn 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes BlurFadeIn {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* フェードイン */
.is-FadeIn {
    opacity: 0;
    will-change: opacity, filter, transform; /* パフォーマンス向上 */
}
.is-FadeIn.is-active {
    animation: FadeIn 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes FadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 矢印が跳ねる動き */
/* 下に5px跳ねる */
@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); } 
}
/* 右に5px跳ねる */
@keyframes arrow-bounce2 {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); } 
}
/* 矢印を回転させたまま下に5px跳ねる */
@keyframes arrow-bounce3 {
  0%, 100% { transform: rotate(90deg) translateX(0); }
  50% { transform: rotate(90deg) translateX(5px); }
}



/* ストーリー一覧のリード部分のアニメーション */
#stories .lead-box {
    opacity: 0;
    /*filter: blur(10px);*/
    transform: translateY(30px); /* 下側に配置 */
    transition: 
        opacity 1.8s ease-out,
        filter 1.8s ease-out,
        transform 1.8s cubic-bezier(0.25, 1, 0.5, 1);
}
#stories .lead-box.is-active-box {
    opacity: 1;
    /*filter: blur(0);*/
    transform: translateY(0);
}

/* --- テキスト（1文字ずつ）：左から右へ --- */
#stories .lead-box p span {
    display: inline-block;
    opacity: 0;
    /*filter: blur(8px);*/
    transform: translateX(-15px); /* 左側に配置 */
    /* アニメーションはJSでクラスがついてから */
}
/* テキスト発火用クラス */
#stories .lead-box p.is-active-text span {
    /*animation: BlurInLeftToRight 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;*/
    animation: BlurInLeftToRight 1.8s forwards;
    animation-delay: var(--char-delay, 0s);
}
/* 文字用のキーフレーム（横移動） */
@keyframes BlurInLeftToRight {
  0% {
    opacity: 0;
    /*filter: blur(8px);*/
    transform: translateX(-15px);
  }
  100% {
    opacity: 1;
    /*filter: blur(0);*/
    transform: translateX(0);
  }
}