/* ========================================
   リセット & ベーススタイル
   ======================================== */
   @import url('https://fonts.googleapis.com/css2?family=Gilda+Display&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');

html {
    font-size: 0.69444444vw;
}
body {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
    background-color: #FFFBEF;
}
img {
    width: 100%;

    vertical-align: bottom;
}

/* ========================================
      SPベースのスタイル（モバイルファースト）
======================================== */
.container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* SPではサイドバーを非表示 */
.sidebar {
    display: none;
}

/* メインコンテンツ（SP用） */
.main-content {
    width: 100%;
    font-size: 16px;

    overflow: hidden;
}


/* ==============================
    ヘッダー
============================== */
.header {
    position: relative;

    overflow: hidden;
    background: linear-gradient(180deg, #F9E0DB 0%, #F9E0DB 50%, #FFFBEF 50%,#FFFBEF 100%);
}
.header .header-bg {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;
    background-image: url(../images/header-bg.png);
    background-size: 100% auto;
    background-position: center bottom 2.95vw;
    background-repeat: no-repeat;
}


.header .header-inner {
    position: relative;
    z-index: 1;
    padding-top: 5.37vw;
    padding-bottom: 43.54vw; /*162/372*/
}

.header .logo-text {
    width: 44.83%;
    margin: 0 0 0 8.86%;
}

/* 紺色背景の文字 */
.header .message {
    position: relative;
    z-index: 15;
    margin-top: 5.25vw;
    margin-left: 4.4%;

}
.message p {
    color: #F9E0DB;
    font-size: 3.7vw;

    transition: all 0.8s ease;
    transform: rotate(-5.84deg) translate(-100%);
}
.message.is-active p {
    transform: rotate(-5.84deg) translate(0);
}
.message p:nth-of-type(2) {
    transition-delay: 0.4s;
}
.header .message p:nth-of-type(n + 2) {
    margin-left: 2.64em;
}
.message p + p {
    margin-top: 0.21em;
}
.message p span {
    display: inline-block;
    padding: 0.18em 0.78em;
    background-color: #23497F;
}


.header .title {
    position: relative;
    top: -3.06vw;
    height: 82.83vw; /* 308.16/372 */
}
.header .title span {
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;

    translate: 0 50%;
    transition: 0.8s cubic-bezier(0, 1.71, 0.95, 1.4) 0.3s;
    opacity: 0;
}
.header .title .text-01 {
    top: 0;
    left: -1.6%;
    width: 90.45%;
    padding: 6.72vw 17.5vw 7.17vw 15.86vw; /* 25 65.1 26.69 59*/
    background-image: url(../images/fv-text-bg-01.png);
    z-index: 5;
}
.header .title .text-02 {
    top: 19.49vw; /*72.52/ 372 */
    left: 4.48%;
    width: 95.83%;
    padding: 7.05vw 17.65vw 5.13vw 16.75vw;
    background-image: url(../images/fv-text-bg-02.png);
    z-index: 3;

    transition-delay: 0.45s;
}
.header .title .text-03 {
    top: 43.71vw; /* 162.62/372  */
    left: 8.26%;
    width: 93.14%;
    padding: 10.98vw 18.18vw 10.01vw 20.15vw; /* 40.87 67.66 37.26 74.96*/
    background-image: url(../images/fv-text-bg-03.png);
    z-index: 1;

    transition-delay: 0.9s;
}
.header .title.is-active span {
    translate: 0 0;
    opacity: 1;
}

.header .fv-image {
    position: absolute;
    z-index: 10;
}
.header .fv-image-01 {
    /* top: 1.34vw; */
    top: 1.04vw;
    /* right: 2.41%; */
    right: 2.01%;
    width: 46.5%;
}
.header .fv-image-02 {
    top: 35.21vw ;
    right: 2.41%;
    width: 22.84%;
}
.header .fv-image-03 {
    bottom: 50.26vw; /* 187/372 */
    left: 2.6%;
    width: 25.8%;
}
.header .fv-image-04 {
    bottom: 45.16vw; /* 168/372 */
    left: 6.6%;
    width: 18.14%;
}
.header .fv-image-05 {
    bottom: 2.68vw; /* 10 / 372*/
    left: 2.41%;
    width: 46.1%;
    z-index: 5;
}
.header .fv-image-06 {
    bottom: 20.69vw;
    right: 16.68%;
    width: 34.81%;
    z-index: 6;
}
.header .fv-image-07 {
    bottom: 33.87svw; /* 126/372 */
    right: 1.91%;
    width: 17.2%;
}
.header .fv-image-08 {
    bottom: 0;
    right: 24.62%;
    width: 36.29%;
    z-index: 9;
}
.header .fv-image-09 {
    bottom: 5.91vw; /* 22 / 372 */
    right: 3.22%;
    width: 35.48%;
    z-index: 8;
}
@media (min-width: 768px) {
    .header .header-bg {
        background-position: center bottom 0.875em;
    }

    .header .header-inner {
        padding-top: 1.25em;
        padding-bottom: 10.125em;
    }

    .header .message {
        margin-top: 1.22em;
    }
    .message p {
        font-size: 14px;
    }

    .header .title {
        top: -0.8em;
        height: 19.26em;
    }
    .header .title .text-01 {
        padding: 1.56em 4.06em 1.66em 3.68em;
    }
    .header .title .text-02 {
        top: 4.53em;
        padding: 1.64em 4.1em 1.19em 3.89em;
    }
    .header .title .text-03 {
        top: 10.16em;
        padding: 2.55em 4.22em 2.32em 4.68em;
    }

    .header .fv-image-01 {
        /* top: 0.43em; */
        top: 0.23em;
    }
    .header .fv-image-02 {
        top: 8.37em;
    }
    .header .fv-image-03 {
        bottom: 11.68em;
    }
    .header .fv-image-04 {
        bottom: 10.5em;
    }
    .header .fv-image-05 {
        bottom: 0.625em;
    }
    .header .fv-image-06 {
        bottom: 5.81em;
    }
    .header .fv-image-07 {
        bottom: 7.875em;
    }
    .header .fv-image-08 {
    }
    .header .fv-image-09 {
        bottom: 1.375em;
    }
}

/* ==============================
  選択前の文章
============================== */
.first-section {
    position: relative;
    padding: 9.4vw 0 5.37vw; /*35 20*/
}

.first-section .text-wrapper {
    text-align: center;
    width: 84.4%;
    margin: 0 auto;
    color: #23497F;
    line-height: 1.8;
    font-size: 4.3vw;
}
.first-section h3 {
    font-weight: 700;
}
.first-section h3 span {
    display: inline-block;
}
.first-section h3 .bgcolor {
    display: inline-block;
    background-color: #23497F;
    color: #CBAA1B;
    padding: 0.04em 0.62em;
    margin: 0 0.75em 0.34em;

    transition: all 0.8s ease;
    opacity: 0;
    transform: translate(-100%);
}
.first-section h3 .bgcolor-02 {
    transition-delay: 0.8s;
}
.first-section .text-wrapper h3 .bgcolor.is-active {
    transform: translate(0);
    opacity: 1;
}
.first-section h3 .line-text {
    display: inline-block;
    position: relative;
    font-size: 7.25vw;
    padding: 0 0 0 0.3em;
    margin-bottom: 0.34em;

    background-image: url(../images/line-text.png);
    background-size: 100% 0.14em;
    background-position: left bottom;
    background-repeat: no-repeat;
}
.first-section  h3 .line-text::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 0.14em;

    background-size: 0%;
}
.first-section .text-wrapper h3 .line-text.is-active::after {
    animation: underLine 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    background: #FFFBEF;
    content: '';
    pointer-events: none;
    position: absolute;
    bottom: 0;
    z-index: 1;
    height: 0.14em;
}
@keyframes underLine {
    100% {
        transform: translateX(100%);
    }
}

/* カ */
.first-section h3 .color-red-01 {
    color: #CA7273;

    animation: hop 2.2s ease infinite;
}
/* ス */
.first-section h3 .color-green-01 {
    color: #96BA7E;

    animation: hop 2.2s ease infinite;
    animation-delay: 0.1s;
}
/* タ */
.first-section h3 .color-blue-01 {
    color: #83B4B8;

    animation: hop 2.2s ease infinite;
    animation-delay: 0.2s;
}
/* マ */
.first-section h3 .color-yellow-01 {
    color: #CE9732;

    animation: hop 2.2s ease infinite;
    animation-delay: 0.3s;
}
/* イ */
.first-section h3 .color-red-02 {
    color: #AF528D;

    animation: hop 2.2s ease infinite;
    animation-delay: 0.4s;
}
/* ズ */
.first-section h3 .color-green-02 {
    color: #00620F;

    animation: hop 2.2s ease infinite;
    animation-delay: 0.5s;
}

.first-section .text-wrapper .line-image {
    background-image: url(../images/line-image.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 1px;
    margin: 7.79vw 0; /*29/372*/
}

.first-section .text-wrapper p .bold {
    font-weight: 700;
}

.first-section h2 {
    margin: 15.32vw 0 8.06vw; /*57 30*/
    transition: transform 0.8s ease;
    transform: scale(0.5);
}
.first-section h2.is-active {
    transform: scale(1);
}

@media (min-width: 768px) {
    .first-section {
        padding: 3.125em 0 2.31em;
    }

    .first-section .text-wrapper {
        font-size: 16px;
    }
    .first-section h3 .line-text {
        font-size: 27px;
    }

    .first-section .text-wrapper .line-image {
        margin: 1.81em 0;
    }

    .first-section h2 {
        margin: 3.56em 0 1.9em;
    }
}
/* =========================================
   20の分野カラークラス（+アルファ用）
========================================= */

.color-eibei   { background-color: #96BA7E; } /* 英米文学 */
.color-gengo   { background-color: #CA7273; } /* 言語学 */
.color-kokusai { background-color: #83B4B8; } /* 国際 */
.color-shukyo  { background-color: #828282; } /* 宗教・哲学 */
.color-rekishi { background-color: #ED8082; } /* 歴史・文化 */
.color-seimei  { background-color: #00620F; } /* 生命科学 */
.color-fukushi { background-color: #CE9732; } /* 福祉・子ども */
.color-shakai  { background-color: #AF528D; } /* 社会学・メディア */
.color-nihongo { background-color: #9B9FC3; } /* 日本語・日本文学 */
.color-asia    { background-color: #719F2F; } /* アジア */
.color-keizai  { background-color: #8F71A6; } /* 経済 */
.color-hou     { background-color: #CBAA1B; } /* 法・政治 */
.color-music   { background-color: #C25153; } /* 音楽 */
.color-shinri  { background-color: #4D4B41; } /* 心理学 */
.color-kankyo  { background-color: #3B7566; } /* 環境・生態 */
.color-gender  { background-color: #0073A4; } /* ジェンダー・人権 */
.color-gaikoku { background-color: #7A5D1E; } /* 外国語 */
.color-it      { background-color: #E95F41; } /* ＩＴ */
.color-sports  { background-color: #35A0A3; } /* 健康・スポーツ */
.color-career  { background-color: #F3A022; } /* 資格・キャリア */



/* +アルファ用の予備クラス */
.color-alpha01 { background-color: #eee; } /* 追加用 1 */
.color-alpha02 { background-color: #eee; } /* 追加用 2 */


/* ==============================
  選択フィールド
============================== */
.choose-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 83.06%;
    margin: 0 auto 5.37vw; /* 20/372 */
}
.choose-btn {
    width: 20.38%;
    border: none;
    background-color: inherit;
    margin-bottom: 4.56vw; /* 17/372 */
    cursor: pointer;

    animation: shake-interval 3s ease 0s infinite;
}
@keyframes shake-interval {
    0% {
        rotate: -1deg
    }

    5% {
        rotate: 1deg
    }

    10% {
        rotate: -1deg
    }

    15% {
        rotate: 1deg
    }

    20% {
        rotate: 0deg
    }

    to {
        rotate: 0deg
    }
}

.result-area {
    text-align: center;
    color: #23497F;
    font-size: 3.7vw;
    line-height: 1.8;
}
.result-area p:first-of-type {
    background-image: url(../images/result-text-bg.png);
    background-size: 9.625em auto;
    background-position: center;
    background-repeat: no-repeat;
}
.result-area .gradient-box {
    position: relative;
    color: #FFF;
    font-size: 10.75vw;
    font-weight: 700;
    border-radius: 1em;
    width: 93.54%;
    margin: 0.28em auto 0.4em;
    overflow: hidden;
}
.result-area .gradient-box::before {
    position: absolute;
    content: '';
    display: inline-block;
    /* top: 11%;
    left: 0; */
    bottom: 11%;
    right: 0;
    width: 190%;
    height: 100%;
    background-color: #fff;
}
.result-area.is-show .gradient-box:before {
    animation: kiran 3s ease-in-out -1.8s infinite;
}

@-webkit-keyframes kiran {
   0%{transform:scale(0) rotate(-45deg); opacity: 0; }
   80%{transform:scale(0) rotate(-45deg); opacity: 0.5; }
   81%{transform:scale(2) rotate(-45deg); opacity: 1; }
   100%{transform:scale(8) rotate(-45deg); opacity: 0; }
}

@media (min-width: 768px) {
    .choose-container {
        margin: 0 auto 1.19em;
    }
    .choose-btn {
        margin-bottom: 1.18em;
    }

    .result-area {
        font-size: 16px;
    }
    .result-area .gradient-box {
        font-size: 40px;
    }
}

/* ==============================
      先輩
   ============================== */

.second-section {
    display: none;
    position: relative;
    background-color: #F9E0DB;
    padding-top: 9.94vw;/*37 / 372*/
}
.second-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    border-top: 9.94vw solid #FFFBEF;
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    border-bottom: 0;
    z-index: 10;
}

.second-section section {
    position: relative;

    padding: 9.13vw 8.6%;

    /* border: 1px solid #000; */
}

.second-section section .studies-bg {
    position: absolute;
    top: 21.5vw;
    right: 0;
    left: 0;
    z-index: 0;
    width: 82.79%;
    margin: 0 auto;
}

.second-section section .studies-box h4 {
    position: absolute;
    top: 9.13vw;
    left: 6.72%;
    width: 47.04%; /* 175px/372px */
}

.second-section section .studies-box ul {
    position: relative;
    z-index: 5;
    width: 51.9%;
    margin: 18.81vw 0 0;
}
.second-section section .studies-box ul li {
    width: 100%;
    border-radius: 0.5em;
    color: #FFF;
    text-align: center;
    font-size: 4.3vw;
    font-weight: 700;
    padding: 0.25em 0;

    translate: 0 50%;
    transition: 0.5s cubic-bezier(0, 1.71, 0.95, 1.4) 0.3s;
    transition-delay: 0.45s;
    opacity: 0;
}
.second-section section .studies-box ul li + li {
    margin-top: 0.25em;
}
.second-section section .studies-box ul li:nth-of-type(2) {
    transition-delay: 0.9s;
}
.second-section section .studies-box ul li:nth-of-type(3) {
    transition-delay: 1.35s;
}
.second-section section .studies-box ul li:nth-of-type(4) {
    transition-delay: 1.8s;
}

.second-section section.is-active .studies-box ul li {
    translate: 0 0;
    opacity: 1;
}

.second-section section .studies-box ul li span {
    display: block;
    font-size: 3.2vw;
    font-weight: 400;
}

.second-section section .studies-box .icon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
}
.second-section section .studies-box .photo {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;

    translate: 0 50%;
    transition: 0.5s cubic-bezier(0, 1.71, 0.95, 1.4) 0.3s;
    opacity: 0;
}
.second-section section.is-active .studies-box .photo {
    translate: 0 0;
    opacity: 1;
}

.second-section section .studies-text {
    position: relative;
    z-index: 5;
}
.second-section section .studies-text h4 {
    position: relative;
    /* margin: 0.65em 0 1.5em; */
    margin: -0.5em 0 0.5em;
    /* transform: rotate(-6.52deg); */
}
.second-section section .studies-text h4.line-02 {
    height: 20.13vw;
    /* margin: 0.5em 0 1.2em; */
    margin: 0 0 1.5em;
}

.second-section section .studies-text h4 span {
    position: relative;
    z-index: auto;
    display: block;
    color: #FFF;
    font-size: 4.8vw;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0.666em 0;
}
.second-section section .studies-text h4 span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 2.66em;
    background-color: #23497F;
}
.second-section section .studies-text h4.line-02 span {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    padding-right: 1em;
    padding-left: 1em;
}
.second-section section .studies-text h4.line-02 span:last-of-type {
    top: 1.36em;
    left: 3.72em;
}

.second-section section .studies-text p {
    font-size: 3.2vw;
    line-height: 1.5;

    /* text-align: justify;
    text-justify: inter-ideograph; */

    line-break: strict;
    overflow-wrap: break-word;
}
@media (min-width: 768px) {
    .second-section {
        padding-top: 2.31em;
    }
    .second-section::before {
        border-top: 2.31em solid #FFFBEF;
        border-left: 11.625em solid transparent;
        border-right: 11.625em solid transparent;
    }

    .second-section section {
        padding: 2.125em 8.6%;
    }

    .second-section section .studies-bg {
        top: 5em;
    }

    .second-section section .studies-box h4 {
        top: 2.125em;
    }

    .second-section section .studies-box ul {
        margin: 4.375em 0 0;
    }
    .second-section section .studies-box ul li {
        font-size: 16px;
    }
    .second-section section .studies-box ul li span {
        font-size: 12px;
    }

    .second-section section .studies-text h4 span {
        font-size: 18px;
    }
    .second-section section .studies-text h4.line-02 {
        height: 4.36em;
    }

    .second-section section .studies-text p {
        font-size: 12px;
    }
}

/*  eigo01  */
#eigo01 .studies-box .icon {
    top: 20.75vw; /* 77.21/372 */
    right: 6.2%;
    width: 6.72%; /* 25px/372px */
}
#eigo01 .studies-box .photo {
    top: 2.34vw; /* 5/372 */ /* 612で確認*/
    width: 56.98%; /* 212px/372px */
}
#eigo01 .studies-box ul li:nth-of-type(2) span {
    letter-spacing: -0.16em;
}

/*  eigo02  */
#eigo02 .studies-box .icon {
    top: 9.65vw; /* 35.93/372 */
    right: 5.9%;
    width: 8.87%; /* 33px/372px */
}
#eigo02 .studies-box .photo {
    top: 3.49vw; /* 13/372 */
    width: 57.52%; /* 214px/372px */
}

/*  eigo03  */
#eigo03 .studies-box h4 {
    top: 5.56vw; /* 20.69/372 */
}
#eigo03 .studies-box .icon {
    top: 17.2vw; /* 64/372 */
    right: 6.78%;
    width: 11.82%; /* 44px/372px */
}
#eigo03 .studies-box .photo {
    top: 6.91vw; /* 22/ 372 */ /* 612で確認*/
    right: 12.36%;
    width: 35.61%; /* 132.5px/372px */
}

/*  eigo04  */
#eigo04 .studies-box h4 {
    top: 6.11vw; /* 22.76/372 */
}
#eigo04 .studies-box .icon {
    top: 15.59vw; /* 58/372 */
    right: 4.9%;
    width: 11.55%; /* 43px/372px */
}
#eigo04 .studies-box .photo {
    top: 6.72vw; /* 25/372 */
    right: 5.64%;
    width: 51.88%; /* 193px/372px */
}

/*  eigo05  */
#eigo05 .studies-box .icon {
    top: 19.08vw; /* 71/372 */
    right: 10.01%;
    width: 8.6%; /* 32px/372px */
}
#eigo05 .studies-box .photo {
    top: 7.79vw; /* 29/372 */
    width: 56.04%; /* 208.5px/372px */
}

/*  global01  */
#global01 .studies-box .icon {
    top: 16.66vw; /* 62/372 */
    right: 8.51%;
    width: 9%; /* 33.5px/372px */
}
#global01 .studies-box .photo {
    top: 6.3vw; /* 20/372 */ /* 612で確認*/
    right: 3.68%;
    width: 50.26%; /* 187px/372px */
}

/*  global02  */
#global02 .studies-box .icon {
    top:  15.05vw; /* 56/372 */
    right: 5.06%;
    width: 10.08%; /* 37.5px/372px */
}
#global02 .studies-box .photo {
    top: 5.10vw; /* 19/372 */
    right: 4.3%;
    width: 48.11%; /* 179px/372px */
}

/*  global03  */
#global03 .studies-box h4 {
    top: 6.3vw; /* 23.46/372 */
}
#global03 .studies-box .icon {
    top: 6.82vw; /* 25.4/372 */
    right: 8.87%;
    width: 9.13%; /* 34px/372px */
}
#global03 .studies-box .photo {
    top: 6.4vw; /* 24/372 */
    right: 4.03%;
    width: 48.65%; /* 181px/372px */
}
#global03 .studies-box ul li:first-of-type span {
    letter-spacing: -0.16em;
}
#global03 .studies-box ul li:last-of-type span {
    line-height: 1.2;
}

/*  soubun01  */
#soubun01 .studies-box .photo {
    top: 6.37vw; /* 20/372 */ /* 612で確認*/
    right: 2.01%;
    width: 50.53%; /* 188px/372px */
}

/*  soubun02  */
#soubun02 .studies-box .icon {
    top: 14.49vw; /* 54.92/372 */
    right: 4.72%;
    width: 12.76%; /* 47.5px/372px */
}
#soubun02 .studies-box .photo {
    top: 8.87vw; /* 33/372 */
    right: 9.67%;
    width: 39.38%; /* 146.5px/372px */
}

/*  soubun03  */
#soubun03 .studies-box h4 {
    top: 6.19vw; /* 23.06/372 */
}
#soubun03 .studies-box .icon {
    top: 15.69vw; /* 58.4/372 */
    right: 3.69%;
    width: 11.15%; /* 41.5px/372px */
}
#soubun03 .studies-box .photo {
    top:3.49vw; /* 13/372 */
    width: 55.37%; /* 206px/372px */
}

/*  soubun04  */
#soubun04 .studies-box .icon {
    top: 14.7vw; /* 54.71/372 */
    right: 3.67%;
    width: 9.94%; /* 37px/372px */
}
#soubun04 .studies-box .photo {
    top: 4.3vw; /* 16/372 */
    right: 7.25%;
    width: 40.38%; /* 150px/372px */
}

/*  soubun05  */
#soubun05 .studies-box .icon {
    top: 16.91vw; /* 62.91/372 */
    right: 6.72%;
    width: 8.33%; /* 31px/372px */
}
#soubun05 .studies-box .photo {
    top: 6.45vw; /* 24/372 */
    right: 7.52%;
    width: 51.34%; /* 191px/372px */
}

/* music01  */
#music01 .studies-box .icon {
    top: 17.44vw; /* 64.91/372 */
    right: 5.82%;
    width: 9.95%; /* 37px/372px */
}
#music01 .studies-box .photo {
    top: 3.49vw; /* 13/372 */
    width: 58.87%; /* 219px/372px */
}

/* music02  */
#music02 .studies-box .icon {
    top: 16.93vw; /* 63/372 */
    right: 6.62%;
    width: 9.27%; /* 34.5px/372px */
}
#music02 .studies-box .photo {
    top: 4.3vw; /* 16/372 */
    right: 8.06%;
    width: 41.66%; /* 155px/372px */
}

/* shinri01  */
#shinri01 .studies-box .icon {
    top: 20.96vw; /* 78/372 */
    right: 2.95%;
    width: 9.67%; /* 36px/372px */
}
#shinri01 .studies-box .photo {
    top: 6.45vw; /* 24/372 */
    right: 8.06%;
    width: 39.51%; /* 147px/372px */
}

/* shinri02  */
#shinri02 .studies-box h4 {
    top: 6.13vw; /* 22.84/372 */
}
#shinri02 .studies-box .icon {
    top: 18.54vw; /* 69/372 */
    right: 4.56%;
    width: 8.33%; /* 31px/372px */
}
#shinri02 .studies-box .photo {
    top: 3.76vw; /* 14/372 */
    right: 2.68%;
    width: 44.63%; /* 166px/372px */
}

/* shinri03  */
#shinri03 .studies-box h4 {
    top: 6.94vw;
}
#shinri03 .studies-box .icon {
    top: 22.31vw;
    right: 6.26%;
    width: 6.72%; /* 25px/372px */
}
#shinri03 .studies-box .photo {
    top: 0.53vw;
    right: 2.95%;
    width: 49.17%; /* 183px/372px */
}

/* shinri04  */
#shinri04 .studies-box .icon {
    top: 6.45vw; /* 24/372 */
    right: 6.78%;
    width: 9.67%; /* 36px/372px */
}
#shinri04 .studies-box .photo {
    top: 2.68vw; /* 10/372 */
    width: 62.64%; /* 233px/372px */
}

/* shinri05  */
#shinri05 .studies-box h4 {
    top: 6.16vw; /* 22.95/372 */
}
#shinri05 .studies-box .icon {
    top: 13.71vw; /* 51.03/372 */
    right: 4.43%;
    width: 11.55%; /* 43px/372px */
}
#shinri05 .studies-box .photo {
    top: 7.72vw; /* 25/372 */ /* 612で確認*/
    right: 10.61%;
    width: 37.23%; /* 138.5px/372px */
}

/* seimei01  */
#seimei01 .studies-box .icon {
    top: 7.79vw; /* 29/372 */
    right: 5.97%;
    width: 11.82%; /* 44px/372px */
}
#seimei01 .studies-box .photo {
    top: 3.49vw; /* 13/372 */
    width: 63.14%; /* 235px/372px */
}

/* seimei02  */
#seimei02 .studies-box .icon {
    top: 7.52vw; /* 28/372 */
    right: 6.64%;
    width: 11.15%; /* 41.5px/372px */
}
#seimei02 .studies-box .photo {
    top: 5.91vw; /* 22/372 */
    right: 2.95%;
    width: 46.9%; /* 174.5px/372px */
}

/* seimei03  */
#seimei03 .studies-box h4 {
    top: 6.18vw; /* 23/372 */
}
#seimei03 .studies-box .icon {
    top: 13.75vw; /* 51.16/372 */
    right: 6.79%;
    width: 8.6%; /* 41.5px/372px */
}
#seimei03 .studies-box .photo {
    top: 6.18vw; /* 23/372 */
    right: 10.48%;
    width: 40.59%; /* 151px/372px */
}

/* seimei04  */
#seimei04 .studies-box .icon {
    top: 17.4vw; /* 64.74/372 */
    right: 6.33%;
    width: 10.84%; /* 40.5px/372px */
}
#seimei04 .studies-box .photo {
    top: 11.29vw; /* 42/372 */
    right: 7.25%;
    width: 45.43%; /* 169px/372px */
}
#seimei04 .studies-box ul li:nth-of-type(3) span {
    letter-spacing: -0.16em;
}


@media (min-width: 768px) {
    /*  eigo01  */
    #eigo01 .studies-box .icon {
        top: 4.51em;
    }
    #eigo01 .studies-box .photo {
        top: 0.24em;
    }

    /*  eigo02  */
    #eigo02 .studies-box .icon {
        top: 2.24em;
    }
    #eigo02 .studies-box .photo {
        top: 0.81em;
    }

    /*  eigo03  */
    #eigo03 .studies-box h4 {
        top: 1.29em;
    }
    #eigo03 .studies-box .icon {
        top: 4em;
    }
    #eigo03 .studies-box .photo {
        top: 1.375em;
    }

    /*  eigo04  */
    #eigo04 .studies-box h4 {
        top: 1.42em;
    }
    #eigo04 .studies-box .icon {
        top: 3.625em;
    }
    #eigo04 .studies-box .photo {
        top: 1.56em;
    }

    /*  eigo05  */
    #eigo05 .studies-box .icon {
        top: 4.43em;
    }
    #eigo05 .studies-box .photo {
        top: 1.81em;
    }

    /*  global01  */
    #global01 .studies-box .icon {
        top: 3.875em;
    }
    #global01 .studies-box .photo {
        top: 1.1875em;
    }

    /*  global02  */
    #global02 .studies-box .icon {
        top: 3.5em;
    }
    #global02 .studies-box .photo {
        top: 1.1875em;
    }

    /*  global03  */
    #global03 .studies-box h4 {
        top: 1.46em;
    }
    #global03 .studies-box .icon {
        top: 1.58em;
    }
    #global03 .studies-box .photo {
        top: 1.5em;
    }

    /*  soubun01  */
    #soubun01 .studies-box .photo {
        top: 1.1875em;
    }

    /*  soubun02  */
    #soubun02 .studies-box .icon {
        top: 3.37em;
    }
    #soubun02 .studies-box .photo {
        top: 2.06em;
    }

    /*  soubun03  */
    #soubun03 .studies-box h4 {
        top: 1.44em;
    }
    #soubun03 .studies-box .icon {
        top: 3.65em;
    }
    #soubun03 .studies-box .photo {
        top: 0.81em;
    }

    /*  soubun04  */
    #soubun04 .studies-box .icon {
        top: 3.41em;
    }
    #soubun04 .studies-box .photo {
        top: 1.1875em;
    }

    /*  soubun05  */
    #soubun05 .studies-box .icon {
        top: 3.93em;
    }
    #soubun05 .studies-box .photo {
        top: 1.5em;
    }

    /* music01  */
    #music01 .studies-box .icon {
        top: 4.05em;
    }
    #music01 .studies-box .photo {
        top: 0.8125em;
    }

    /* music02  */
    #music02 .studies-box .icon {
        top: 3.93em;
    }
    #music02 .studies-box .photo {
        top: 1em;
    }

    /* shinri01  */
    #shinri01 .studies-box .icon {
        top: 4.875em;
    }
    #shinri01 .studies-box .photo {
        top: 1.375em;
    }

    /* shinri02  */
    #shinri02 .studies-box h4 {
        top: 1.42em;
    }
    #shinri02 .studies-box .icon {
        top: 4.312em;
    }
    #shinri02 .studies-box .photo {
        top: 0.875em;
    }

    /* shinri03  */
    #shinri03 .studies-box h4 {
        top: 1.61em;
    }
    #shinri03 .studies-box .icon {
        top: 5.18em;
    }
    #shinri03 .studies-box .photo {
        top: 0.125em;
    }

    /* shinri04  */
    #shinri04 .studies-box .icon {
        top: 1.5em;
    }
    #shinri04 .studies-box .photo {
        top: 0.625em;
    }

    /* shinri05  */
    #shinri05 .studies-box h4 {
        top: 1.43em;
    }
    #shinri05 .studies-box .icon {
        top: 3.18em;
    }
    #shinri05 .studies-box .photo {
        top: 1.53em;
    }

    /* seimei01  */
    #seimei01 .studies-box .icon {
        top: 1.81em;
    }
    #seimei01 .studies-box .photo {
        top: 0.8125em;
    }

    /* seimei02  */
    #seimei02 .studies-box .icon {
        top: 1.75em;
    }
    #seimei02 .studies-box .photo {
        top: 1.375em;
    }

    /* seimei03  */
    #seimei03 .studies-box h4 {
        top: 1.43em;
    }
    #seimei03 .studies-box .icon {
        top: 3.19em;
    }
    #seimei03 .studies-box .photo {
        top: 1.43em;
    }

    /* seimei04  */
    #seimei04 .studies-box .icon {
        top: 4.04em;
    }
    #seimei04 .studies-box .photo {
        top: 2.625em;
    }
}

/* ==============================
  MORE! KOBE COLLEGE!
============================== */
.third-section {
    background-color: #FFFBEF;
    border: 0.625em solid #D7EBE0;
    border-right: none;
    border-left: none;
    /* padding: 2.56em 0; */
    padding: 13.7vw 0; /* 51/372*/
}

.third-section .more-kobe-college-wrapper {
    position: relative;
}

.third-section .message p {
    font-size: 4.2vw;
}
.third-section .message p span {
    padding:0.08em 0.625em 0.08em 0.875em;
}

.third-section .open_campus .more-bg {
    position: absolute;
    top: 23.38vw; /* 87/372 */
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 82.25%;
    height: 82.25vw; /* 306/372 */
    z-index: 0;
}

.third-section .open_campus h3 {
    position: relative;
    z-index: 1;
    width: 54.97%;
    margin-left: 4.3%;

    transition: all 0.8s ease;
    transform: translate(-100%);
    opacity: 0;
}
.third-section .open_campus.is-active h3 {
    transform: translate(0);
    opacity: 1;
}

.third-section .open_campus .more_text {
    position: absolute;
    top: 4.3vw; /* 16/372 */
    right: 2.95%;
    width: 36.29%;

    animation: yureru-jouge infinite 3s;
}
.third-section .open_campus .btn-open_campus {
    position: absolute;
    top: 38.7vw; /* 144/372 */
    right: 5.47%;
    width: 35.11%;
    z-index: 2;

    translate: 0 50%;
    transition: 0.5s cubic-bezier(0, 1.71, 0.95, 1.4) 0.3s;
}
.third-section .open_campus.is-active .btn-open_campus {
    translate: 0 0;
    animation: floating-btn 2s ease-in-out infinite;
}

.third-section .open_campus .message p {
    margin-top: 1.07vw; /*4/372 */

    transition: all 0.8s ease;
    transform: rotate(-5.38deg) translate(-100%);
}
.third-section .open_campus .message p:first-of-type{
    margin-left: 13.17%;
}
.third-section .open_campus .message p:nth-of-type(2){
    transition-delay: 0.4s;
    margin-left: 5.37%;
}
.third-section .open_campus .message p:last-of-type{
    transition-delay: 0.8s;
    margin-top: 0;
    margin-left: 27.15%;
}
.third-section .open_campus.is-active .message p {
    transform: rotate(-5.38deg) translate(0);
}

.third-section .open_campus .more-photo {
    position: relative;
    z-index: 1;
    width: 75.12%;
    margin-top: 4.03vw; /* 15/372 */
    margin-left: 8.06%;

    transition: all 0.8s ease;
    transform: translate(100%);
}
.third-section .open_campus.is-active .more-photo {
    transform: translate(0);
}

.third-section .check_department {
    margin-top: 16.12vw; /*60/372 */
}

.third-section .check_department .message p {
    transition: all 0.8s ease;
    transform: rotate(5.38deg) translate(-100%);
}
.third-section .check_department .message p:first-of-type{
    margin-left:25.26%;
}
.third-section .check_department .message p:last-of-type{
    margin-left:34.4%;
    transition-delay: 0.4s;
}
.third-section .check_department.is-active .message p {
    transform: rotate(5.38deg) translate(0);
}

.third-section .check_department .more-photo-02 {
    position: absolute;
    /* top: -0.705em; */
    top: -3.22vw; /* 12/372 */
    left: 3.49%;
    width: 30.37%;
    z-index: 0;

    translate: 0 50%;
    transition: 0.5s cubic-bezier(0, 1.71, 0.95, 1.4) 0.3s;
}
.third-section .check_department.is-active .more-photo-02 {
    translate: 0 0;
}
.third-section .check_department ul {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 83.06%;
    /* margin: 1.12em auto 0; */
    margin: 6.72vw auto 0; /* 25/372 */
}
.third-section .check_department ul li {
    width: calc(100% / 3);
    /* margin-bottom: 0.75em; */
    margin-bottom: 3.22vw; /* 12/372 */

    translate: 0 50%;
    transition: 0.5s cubic-bezier(0, 1.71, 0.95, 1.4) 0.3s;
}
.third-section .check_department ul li:nth-of-type(2) {
    transition-delay: 0.45s;
}
.third-section .check_department ul li:nth-of-type(3) {
    transition-delay: 0.9s;
}
.third-section .check_department ul li:nth-of-type(4) {
    transition-delay: 1.35s;
}
.third-section .check_department ul li:nth-of-type(5) {
    transition-delay: 1.8s;
}
.third-section .check_department.is-active ul li {
    translate: 0 0;
    animation: floating-btn 2.5s ease-in-out infinite;
}
.third-section .check_department.is-active ul li:nth-of-type(1) {
    animation-delay: 2.5s;
}
.third-section .check_department.is-active ul li:nth-of-type(2) {
    animation-delay: 2.95s;
}
.third-section .check_department.is-active ul li:nth-of-type(3) {
    animation-delay: 3.4s;
}
.third-section .check_department.is-active ul li:nth-of-type(4) {
    animation-delay: 3.85s;
}
.third-section .check_department.is-active ul li:nth-of-type(5) {
    animation-delay: 4.3s;
}

.third-section .check_department .more-photo-03 {
    position: absolute;
    /* top: -4.95em; */
    top: -21.5vw; /* 80/372 */
    right: 0;
    width: 25.13%;
    z-index: 0;

    translate: 0 50%;
    transition: 0.5s cubic-bezier(0, 1.71, 0.95, 1.4) 0.3s;
}
.third-section .check_department.is-active .more-photo-03 {
    translate: 0 0;
}

@media (min-width: 768px) {
    .third-section {
        padding: 3.18em 0;
    }

    .third-section .message p {
        font-size: 16px;
    }

    .third-section .open_campus .more-bg {
        top: 5.43em;
        height: 19.125em;
    }

    .third-section .open_campus .more_text {
        top: 1em;
    }
    .third-section .open_campus .btn-open_campus {
        top: 9em;
    }

    .third-section .open_campus .message p {
        margin-top: 0.25em;
    }

    .third-section .open_campus .more-photo {
        margin-top: 0.937em;
    }

    .third-section .check_department {
        margin-top: 3.75em;
    }

    .third-section .check_department .more-photo-02 {
        top: -0.75em;
    }
    .third-section .check_department ul {
        margin: 1.56em auto 0;
    }
    .third-section .check_department ul li {
        margin-bottom: 0.75em;
    }

    .third-section .check_department .more-photo-03 {
        top: -5em;
    }
}

/* ==============================
       フッター
   ============================== */
.footer {
    position: relative;
    z-index: 1;

    /* padding: 3em 0 1.5em; */
    padding: 12.9vw 0 5.37vw; /* 48 20 /372 */

    text-align: center;
    background-color: #FFF;

    border-bottom: 0.625em solid #D7EBE0;

}

.footer .bnr-wrapper {
    width: 82.79%;
    /* margin: 0 auto 1.875em; */
    margin: 0 auto 8.06vw; /* 30/372 */
}
.footer .bnr-wrapper li + li {
    /* margin-top: 0.68em; */
    margin-top: 2.95vw; /* 11/372 */
}

.footer h2 {
    width: 58.33%;
    margin: 0 auto;
}
.footer p {
    font-family: "游明朝", YuMincho, serif;
    /* margin: 1.21em 0 0; */
    margin: 4.56vw 0 0; /* 17/372 */

    letter-spacing: 0.1em;

    font-size: 3.7vw;
    line-height: 1.78;

}
@media (min-width: 768px) {
    .footer {
        padding: 3em 0 1.25em;
    }

    .footer .bnr-wrapper {
        margin: 0 auto 1.875em;
    }
    .footer .bnr-wrapper li + li {
        margin-top: 0.68em;
    }

    .footer p {
        font-size: 14px;
    }
}

.footer .sns {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 59.8%;
    margin: 5.37vw auto 2.68vw; /* 20 10 /372 */
}
.footer .sns li {
    width: 17.97%;
}

.footer .copyright {
    letter-spacing: 0;
    margin-top: 0;

    font-family:"Gilda Display", serif;
    font-size: 3.2vw;
    font-weight: 400;

}
@media (min-width: 768px) {
    .footer .sns {
        margin: 1.25em auto 0.625em;
    }

    .footer .copyright {
        font-size: 12px;
    }
}

.footer-recruit {
    background-color: #FFF;
    width: 100%;
    padding: 1vw 5vw;
    box-sizing: border-box;
}
.footer-recruit img {
    width: auto;
}
@media (min-width: 768px) {
    .footer-recruit {
        text-align: left;
        padding: 0.5% 2%;
    }
}

/* ========================================
      PC用スタイル（768px以上）
======================================== */

@media (min-width: 768px) {
    /* メインコンテンツ */
    .main-content {
        max-width: 100%;

        grid-area: main-content;
    }
}

/* ========================================
      PC用スタイル（768px以上） サイド
      ======================================== */
@media (min-width: 768px) {
    .container {
        display: grid;

        max-width: 100vw;
        min-height: 100vh;
        margin: 0 auto;

        /* grid-template-columns: minmax(0, 47.22%) 372px auto; */
        grid-template-columns: auto 372px 26.38%;
        grid-template-areas: "sidebar-left main-content sidebar-right";
    }

    /* 左サイドバー */
    .sidebar-left {
        position: sticky;
        top: 0;

        display: flex;
        overflow: hidden;
        flex-direction: column;
        /* justify-content: flex-end; */

        box-sizing: border-box;
        height: 100vh;

        grid-area: sidebar-left;

        /* ▼背景色と背景画像をまとめて指定します */
        background-color: #D7EBE0;
        background-image: url(../images/side-left-background.png); /* パスは適宜調整してください */

        /* 画像を画面全体（スクロール領域含む）にカバーさせるか、リピートさせるか */
        background-size: cover; /* またはリピートできる画像なら repeat */
        background-position: center top;

        /* imgタグで使っていた mix-blend-mode の代わり */
        background-blend-mode: multiply;
    }

    .sidebar-left .sidebar-left-contents {
        position: relative;
        width: 100%;
        margin: auto 0;
        aspect-ratio: 344 / 325;
        /* border: 1px solid #000; */
    }

    .sidebar-left .logo-wrapper {
        margin: 4.92% 0 0;
        box-sizing: border-box;

        transition: all 0.8s ease;
        transform: translate(-100%);
        opacity: 0;
    }
    .sidebar-left.is-active .logo-wrapper {
        transform: translate(0);
        opacity: 1;
    }
    .sidebar-left .logo-wrapper a  {
        display: block;
        box-sizing: border-box;
        width: 39.38%;
        padding: 2.76% 5.81% 2.61% 8.28%;
        background-image: url(../images/side-logo-bg.png);
        background-repeat: no-repeat;
        background-position: top right;
        background-size: cover;
    }


    .sidebar-left .message {
        margin: 3.32%0 1.59% 19.77%;
    }
    .sidebar-left .message p {
        font-size: 1.6rem;

        transition: all 0.8s ease;
        transform: rotate(0) translate(-100%);
    }
    .sidebar-left.is-active .message p {
        transform: rotate(0) translate(0);
    }
    .sidebar-left .message p:nth-of-type(2) {
        transition-delay: 0.4s;
    }

    .sidebar-left .side-nav {
        width: 40.98%;
        height: 41.02%;
        margin: 0 0 2.57% 19.77%;
    }
    .sidebar-left .side-nav ul {
        position: relative;
        height: 100%;
    }
    .sidebar-left .side-nav li {
        position: absolute;
        background-repeat: no-repeat;
        background-position: top left;
        background-size: cover;
        width: 100%;
        /* border: 1px solid #000; */
    }
    .sidebar-left .side-nav li.open_campus {
        background-image: url(../images/nav-open_campus-bg.png);
    }
    .sidebar-left .side-nav li.kobe-c {
        background-image: url(../images/nav-kobe-c-bg.png);
        top: 23.34%; /* 62.26/266.67 */
    }
    .sidebar-left .side-nav li.admissions {
        background-image: url(../images/nav-admissions-bg.png);
        top: 48.59%; /* 129.58/266.67 */
    }
    .sidebar-left .side-nav li.inquiry {
        background-image: url(../images/nav-inquiry-bg.png);
        top: 73.33%; /* 195.57/266.67 */
    }

    .sidebar-left .side-nav a {
        position: relative;
        z-index: 1;

        display: flex;
        align-items: center;

        width: 100%;
        padding: 0.2em 0 0.3em 0;

        text-decoration: none;

        color: #23497F;

        font-size: 1.6rem;
        font-weight: 700;
    }
    .sidebar-left .side-nav li.open_campus a {
        padding: 1.22em 0 1.5em 18.85%;
    }
    .sidebar-left .side-nav li.kobe-c a {
        padding: 1.33em 0 1.4em 17.55%;
    }
    .sidebar-left .side-nav li.admissions a {
        padding: 1.3em 0 1.45em 18.41%;
    }
    .sidebar-left .side-nav li.inquiry a {
        padding: 1.51em 0 1.32em 18.68%;
        padding-top: 9.07%; /* 24.21/266.67*/
        padding-bottom: 7.93%; /* 21.15/266.67*/
    }


    .sidebar-left .side-nav li.open_campus img {
        width: 1.68em;
        width: 9.56%; /* 26.98/281.93*/
        margin-right: 4.77%;
    }
    .sidebar-left .side-nav li.kobe-c img {
        width: 2.2em;
        width: 12.49%; /* 35.24/281.93 */
        margin-right: 3.13%;
    }
    .sidebar-left .side-nav li.admissions img {
        width: 1.75em;
        width: 9.93%; /* 28.01/281.93 */
        margin-right: 4.41%;
    }
    .sidebar-left .side-nav li.inquiry img {
        width: 1.54em;
        width: 8.76%; /* 24.71/281.93 */
        margin-right: 4.88%;
    }


    .sidebar-left .sns {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 34.88%;
        margin: 0 0 3.53% 21.51%;

        /* transition: opacity 0.8s ease; */

        /* opacity: 0; */
    }
    .sidebar-left .sns li {
        width: 20%;
    }
    .sidebar-left .sns li:last-of-type {
        margin-right: 0;
    }
    .sidebar-left .sns a {
        display: block;
    }
    .sidebar-left .sns a img {
        display: block;

        width: 100%;
        height: auto;

    }

    .sidebar-left .about-wrapper {
        position: relative;
        margin: auto 0 4.92% auto;

        background-image: url(../images/side-about-bg.png);
        background-repeat: no-repeat;
        background-position: top left;
        background-size: auto 100%;
        padding: 2.61% 0 3.07% 11.77%;
        box-sizing: border-box;

        width: 89.68%;

        font-size: 1.4rem;
        font-weight: 700;
        color: #23497F;
        line-height: 1.7;

        transition: all 0.8s ease;
        transform: translate(100%);
        opacity: 0;
    }
    .sidebar-left .about-wrapper::after {
        content: "";
        background-image: url(../images/side-about-bg.png);
        background-repeat: no-repeat;
        background-position: top right;
        background-size: auto 100%;
        width: 80%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
    }
    .sidebar-left.is-active .about-wrapper {
        opacity: 1;
        transform: translate(0);
    }

    .sidebar-left .photo-wrapper div {
        position: absolute;
        z-index: 1;
    }
    .sidebar-left .photo-wrapper .photo-01 {
        top: 3.69%;
        right: 34.59%; /* 238/688*/
        width: 18.16%;
    }
    .sidebar-left .photo-wrapper .photo-02 {
        top: 31.07%;
        left: 2.03%;
        width: 16.42%;
    }
    .sidebar-left .photo-wrapper .photo-03 {
        top: 23.1%;
        left: 12.38%;
        width: 7.92%;
    }
    .sidebar-left .photo-wrapper .photo-04 {
        top: 13.38%;
        right: 10.65%;
        width: 20.78%;
        z-index: 2;
    }
    .sidebar-left .photo-wrapper .photo-05 {
        top: 27.57%;
        right: 18.47%;
        width: 19.76%;
    }
    .sidebar-left .photo-wrapper .photo-06 {
        top: 30%;
        right: 2.39%;
        width: 15.62%;
    }
    .sidebar-left .photo-wrapper .photo-07 {
        bottom: 9.85%;
        left: 4.5%;
        width: 15.69%;

        translate: 0 50%;
        transition: 0.8s cubic-bezier(0, 1.71, 0.95, 1.4) 0.3s;
        opacity: 0;
    }
    .sidebar-left.is-active .photo-wrapper .photo-07 {
        translate: 0 0;
        opacity: 1;
    }
    .sidebar-left .photo-wrapper .photo-08 {
        bottom: 7.55%;
        right: 5.66%;
        width: 35.31%;

        translate: 0 50%;
        transition: 0.8s cubic-bezier(0, 1.71, 0.95, 1.4) 0.3s;
        opacity: 0;
    }
    .sidebar-left.is-active .photo-wrapper .photo-08 {
        translate: 0 0;
        opacity: 1;
    }

    .sidebar-left .image-wrapper div {
        position: absolute;
    }
    .sidebar-left .image-wrapper .image-01 {
        top: 4.15%;
        right: 32.53%;
        width: 7.48%;
    }
    .sidebar-left .image-wrapper .image-02 {
        top: 7.23%;
        right: 5.47%;
        width: 5.45%;
    }
    .sidebar-left .image-wrapper .image-03 {
        top: 19.53%;
        left: 2.47%;
        width: 10.1%;
    }
    .sidebar-left .image-wrapper .image-04 {
        top: 18%;
        right: 32.94%;
        width: 4.86%;
    }
    .sidebar-left .image-wrapper .image-05 {
        bottom: 37.23%;
        right: 8.22%;
        width: 6.03%;

        translate: 0 50%;
        transition: 0.8s cubic-bezier(0, 1.71, 0.95, 1.4) 0.3s;
        opacity: 0;
    }
    .sidebar-left.is-active .image-wrapper .image-05 {
        translate: 0 0;
        opacity: 1;
    }
    .sidebar-left .image-wrapper .image-06 {
        bottom: 41.48%;
        right: 3.58%;
        width: 6.03%;

        translate: 0 50%;
        transition: 0.8s cubic-bezier(0, 1.71, 0.95, 1.4) 0.3s;
        opacity: 0;
    }
    .sidebar-left.is-active .image-wrapper .image-06 {
        translate: 0 0;
        opacity: 1;
    }

    /* 右サイドバー
    ============================================ */
    .sidebar-right {
        position: sticky;
        top: 0;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow-y: auto;

        height: 100vh;


        /* aspect-ratio: 38 / 65; */
        grid-area: sidebar-right;

        /* ▼背景色と背景画像をまとめて指定します */
        background-color: #D7EBE0;
        background-image: url(../images/side-right-background.png); /* パスは適宜調整してください */

        /* 画像を画面全体（スクロール領域含む）にカバーさせるか、リピートさせるか */
        background-size: cover; /* またはリピートできる画像なら repeat */
        background-position: center top;

        /* imgタグで使っていた mix-blend-mode の代わり */
        background-blend-mode: multiply;
    }

    /* .sidebar-right .background-image {
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;

        overflow: hidden;

        width: 100%;
        height: 100%;
        mix-blend-mode: multiply;
    }

    .sidebar-right .background-image img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    } */
    .sidebar-right .sidebar-right-aspect-wrap  {
        width: 100%;
        height: 100%;
        padding: 10% 10.26% 8.94% 9.47%;
        box-sizing: border-box;
    }

    .sidebar-right .sidebar-right-contents {
        position: relative;
        width: 100%;
        display: flex;
        aspect-ratio: 38 / 65;
        margin: auto;
        padding: 0;
        box-sizing: border-box;
        /* border: 1px solid #000; */
    }

    .sidebar-right .sidebar-right-contents-inner {
        margin: auto;
        background-image: url(../images/side-right-contents-bg.png);
        background-repeat: no-repeat;
        background-position: top left;
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        padding-top: 7.89%;
        box-sizing: border-box;
    }

    /* メッセージ */
    .sidebar-right .message {
        /* margin-top: 6.25%; */
        /* margin-top: 2.18em; */
        margin-bottom: 5.26%;
        margin-bottom: 11.47%;
        margin-left: -2.45%;
    }
    .sidebar-right .message p {
        font-size: 1.6rem;

        transition: all 0.8s ease;
        transform: rotate(-7.3deg) translate(-100%);
    }
    .sidebar-right.is-active .message p {
        transform: rotate(-7.3deg) translate(0);
    }

    /* 学部ボタン */
    .sidebar-right .btns-list {
        width: 78.68%;
        margin: 0 auto;
    }
    .sidebar-right .btns-list li {
        width: 100%;
        border-radius: 0.5em;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    }
    .sidebar-right .btns-list li.item-kokusai {
        background: #44B3BF;
    }
    .sidebar-right .btns-list li.item-bungaku {
        background: #DC6D5F;
    }
    .sidebar-right .btns-list li.item-music {
        background: #9577AD;
    }
    .sidebar-right .btns-list li.item-shinri {
        background: #CD4C75;
    }
    .sidebar-right .btns-list li.item-seimei {
        background: #56B075;
    }
    .sidebar-right .btns-list li + li {
        margin-top: 0.75em;
    }

    .sidebar-right .btns-list li a {
        display: block;
        width: 100%;
        height: 100%;
        color: #FFF;
        text-decoration: none;
        padding: 0.48em 5% 0.5em;
        padding: 0.48em 4% 0.5em 5%;
        box-sizing: border-box;
    }
    .sidebar-right .btns-list li a h5 {
        display: flex;
        align-items: center;
        font-size: 1.6rem;
        border-bottom: 1px dashed #FFF;
        padding: 0 0.375em 0.5em;
        margin-bottom: 0.31em;
    }
    .sidebar-right .btns-list li.item-kokusai a .play-icon {
        width: 12.45%; /*29.89/240 */
        margin-right: 4.62%;
    }
    .sidebar-right .btns-list li.item-bungaku a .play-icon {
        width: 13.41%; /*32.19/240 */
        margin-right: 4.08%;
    }
    .sidebar-right .btns-list li.item-music a .play-icon {
        width: 10.42%; /*25.02/240 */
        margin-right: 5.4%;
    }
    .sidebar-right .btns-list li.item-shinri a .play-icon {
        width: 11.95%; /*28.68/240 */
        margin-right: 4.71%;
    }
    .sidebar-right .btns-list li.item-seimei a .play-icon {
        width: 9.16%; /*22/240 */
        margin-right: 6.25%;
    }
    .sidebar-right .btns-list li a p {
        font-size: 1.2rem;
        padding: 0 0 0 0.5em;
    }
    .sidebar-right .btns-list li.item-music a p {
        float: left;
    }
    .sidebar-right .btns-list li a .sub-text {
        font-size: 1.0rem;
        padding: 0.4em 0 0 7em;
        line-height: 1.2;
    }
    .sidebar-right .btns-list li a .sub-text li {
        box-shadow: none;
        border-radius: 0;
    }


    .sidebar-right .photo-wrapper div {
        position: absolute;
        z-index: 1;
    }
    .sidebar-right .photo-wrapper .photo-09 {
        top: 14.76%; /* 96/650 */
        right: 0;
        width: 34.81%; /* 132.28/380*/
    }
    .sidebar-right .photo-wrapper .photo-10 {
        /*bottom: 2.76%;*/ /* 11.5/650 */
        bottom: 1.76%;
        right: 18.89%; /* 71.79/380 */
        width: 34%; /* 129.21/380 */
    }

    .sidebar-right .image-wrapper div {
        position: absolute;
    }
    .sidebar-right .image-wrapper .image-07 {
        top: 3.53%;
        /* right: 23.87%; */
        right: 20.87%;
        width: 13.23%; /* 50.29/380*/
    }
    .sidebar-right .image-wrapper .image-08 {
        bottom: 29.5%;
        left: 4.12%;
        width: 12.79%; /* 48.63/380 */
    }
    .sidebar-right .image-wrapper .image-09 {
        bottom: 9.17%;
        right: 8.94%;
        width: 7.63%; /* 29/380 */
    }
}

/* ========================================
      iPadなど縦向きの場合（768px以上、縦向き）
      ======================================== */
@media (min-width: 768px) and (orientation: portrait),
   (min-width: 768px) and (max-aspect-ratio: 11/10) {
    .container {
        width: 100%;

        grid-template-columns: 372px 1fr;
        grid-template-areas: "main-content sidebar-right";
    }

    .sidebar-left {
        display: none;
    }

    .sidebar-right {
        height: 100vh;
        font-size: 2.12vw;
    }

    .sidebar-right .sidebar-right-contents {

        position: relative; /* 基準点 */

        max-width: calc(100vh * (38 / 65));
        margin: auto;
        aspect-ratio: unset;
    }

    .sidebar-right .sidebar-right-aspect-wrap {
        height: auto;
        width: 100%;
        aspect-ratio: 38 / 65; /* ここで比率を絶対死守！ */
        /* height: auto; */
        min-height: 0;
        /* overflow: hidden; */ /* 中身がはみ出しても箱を絶対に変形させない */
        /* position: relative; */ /* インナーや装飾の基準点にする */
        margin: auto;
        padding: 10% 10.26% 8.94% 9.47%;
        box-sizing: border-box;
        container-type: inline-size;
    }

    .sidebar-right .sidebar-right-contents-inner {
        padding-top: 4.95vw;
        padding-top: 9.47cqi;
    }

    .sidebar-right .message {
        margin-bottom: 5.05vw;
        margin-bottom: 13.47cqi;
    }
    .sidebar-right .message p {
        font-size: 2.12vw; /* 16/752 */
        font-size: 5.24cqi; /* 16/305 */
    }
    .sidebar-right .btns-list {
        container-type: inline-size;
    }
    .sidebar-right .btns-list li a h5 {
        font-size: 2.12vw; /* 16/752 */
        font-size: 6.66cqi; /* 16/240 */
    }
    .sidebar-right .btns-list li a p {
        font-size: 1.59vw; /* 12/752 */
        font-size: 5cqi; /* 12/240 */
    }
    .sidebar-right .btns-list li a .sub-text {
        font-size: 4.16cqi;
    }
}


@keyframes hop {
    0% {
      translate: 0;
    }
    30% {
      translate: 0;
    }
    40% {
      translate: 0 -0.5em;
    }
    50% {
      translate: 0;
    }
    100% {
      translate: 0;
    }
  }

.yureru-sayu-item {
    animation: yureru-sayu infinite 3s;
    --max-deg: 6deg;
}
@keyframes yureru-sayu {
    0%{rotate: 0deg;}

    50%{rotate: var(--max-deg, 4deg)};

    100%{rotate: 0deg;}
}

.yureru-jouge-item {
    animation: yureru-jouge infinite 3s;
}
@keyframes yureru-jouge {
	0%{translate: 0 0;}

	50%{translate: 0 -0.5em;}

	100%{translate: 0 0;}
}

@keyframes yureru-switch-fixed {
    0%   { rotate: 0deg; translate: 0 0; }
    20%  { rotate: 4deg; translate: 0 0; } /* 左右 */
    40%  { rotate: -4deg; translate: 0 0; }
    50%  { rotate: 0deg; translate: 0 0; } /* 戻る（中間地点） */

    70%  { rotate: 0deg; translate: 0 -0.5em; } /* 上下 */
    90%  { rotate: 0deg; translate: 0 0; } /* 戻る */
    100% { rotate: 0deg; translate: 0 0; }
}
.yure-decoration {
    animation: yureru-switch-fixed 4s ease-in-out infinite;
    animation-play-state: paused;
}

@keyframes floating-btn {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px); /* 8px上に浮く */
    }
    100% {
        transform: translateY(0);
    }
}