@keyframes pulseScale {
    0%,31.04%,to {
        transform: scale(1)
    }

    17.02% {
        transform: scale(1.15)
    }

    28.04% {
        transform: scale(.98)
    }
}

@keyframes shakeImg {
    0%,to {
        transform: scale(1) translate(0,0) rotate(0deg)
    }

    10% {
        transform: scale(.95) translate(-3px,-2px) rotate(-1deg)
    }

    20% {
        transform: scale(.95) translate(3px,1px) rotate(1deg)
    }

    30% {
        transform: scale(.95) translate(-3px,2px) rotate(0deg)
    }

    40% {
        transform: scale(.95) translate(3px,-1px) rotate(1deg)
    }

    50% {
        transform: scale(.95) translate(-2px,1px) rotate(-1deg)
    }

    60% {
        transform: scale(.95) translate(2px,-2px) rotate(0deg)
    }

    70% {
        transform: scale(.95) translate(-1px,2px) rotate(1deg)
    }

    80% {
        transform: scale(.95) translate(1px,-1px) rotate(0deg)
    }

    90% {
        transform: scale(.95) translate(-1px,1px) rotate(-1deg)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes floatAnimation {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

@keyframes charaHeadBanging {
    0%,to {
        transform: translate(0,0) rotate(0deg)
    }

    15% {
        transform: translate(-5px,-8px) rotate(-3deg)
    }

    30% {
        transform: translate(6px,2px) rotate(4deg)
    }

    45% {
        transform: translate(-6px,-4px) rotate(-3deg)
    }

    60% {
        transform: translate(4px,1px) rotate(2deg)
    }

    75% {
        transform: translate(-2px,-1px) rotate(-1deg)
    }
}

@keyframes cloudFloat {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-18px)
    }
}

@keyframes charaPopSlide {
    0% {
        opacity: 0;
        transform: translateX(-2%)
    }

    70% {
        opacity: 1;
        transform: translateX(2%)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes flyEight {
    0%,to {
        transform: translate(0,0) rotate(0deg)
    }

    25% {
        transform: translate(25px,-15px) rotate(4deg)
    }

    50% {
        transform: translate(0,-30px) rotate(0deg)
    }

    75% {
        transform: translate(-25px,-15px) rotate(-4deg)
    }
}

@keyframes beyonPop {
    0% {
        transform: scale(.3);
        opacity: 0
    }

    60% {
        transform: scale(1.25);
        opacity: 1
    }

    80% {
        transform: scale(.95)
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes swayBg {
    0%,to {
        transform: translateX(0)
    }

    50% {
        transform: translateX(-15px)
    }
}

@keyframes floatSecTit {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }
}

@keyframes opTitPop {
    0% {
        opacity: 0;
        transform: scale(.5)
    }

    70% {
        opacity: 1;
        transform: scale(1.1)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes floatCloud {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-12px)
    }
}

@keyframes figureEightBird {
    0%,to {
        transform: translate(0,0) rotate(0deg)
    }

    20% {
        transform: translate(10px,-8px) rotate(2deg)
    }

    40% {
        transform: translate(15px,8px) rotate(-1deg)
    }

    60% {
        transform: translate(-10px,-8px) rotate(-2deg)
    }

    80% {
        transform: translate(-15px,8px) rotate(1deg)
    }
}

@keyframes judoShake {
    0% {
        transform: translateX(-4px) rotate(-1deg)
    }

    to {
        transform: translateX(4px) rotate(1deg)
    }
}

@keyframes trainGatanGoton {
    0%,35%,to {
        transform: translateY(0)
    }

    25% {
        transform: translateY(-4px)
    }

    75% {
        transform: translateY(-2px)
    }
}

@keyframes figureEight {
    0%,to {
        transform: translate(0,0) rotate(0deg)
    }

    25% {
        transform: translate(15px,-10px) rotate(3deg)
    }

    50% {
        transform: translate(0,-20px) rotate(0deg)
    }

    75% {
        transform: translate(-15px,-10px) rotate(-3deg)
    }
}

body,html {
    overflow-x: clip
}

body {
    background: #bbf9fc
}

.bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.content,.sec-tit {
    position: relative
}

.sec-tit {
    z-index: 20;
    width: 88rem;
    height: 16.3rem;
    background: url(../img/title-bg.svg)no-repeat center center/100%;
    text-align: center;
    font-size: 4rem;
    margin: 0 auto 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    letter-spacing: .2rem;
    animation: cloudFloat 5s ease-in-out infinite;
    will-change: transform
}

.sec-tit span {
    margin-top: -.75rem;
    white-space: nowrap
}

.sec-tit span.line {
    position: relative;
    letter-spacing: .4rem
}

.sec-tit span.line::after {
    content: "";
    display: block;
    position: absolute;
    width: calc(100% + 1rem);
    height: 4rem;
    top: 50%;
    left: -.5rem;
    background: #f3f000;
    z-index: -1;
    transform: translateY(-50%)
}

.sec-tit span.line .before-fix {
    margin-left: -3.5rem
}

.sec-txt {
    text-align: center;
    font-size: 1.8rem;
    line-height: 2
}

p {
    font-size: 1.6rem;
    line-height: 1.86
}

.symbol-fix {
    margin-right: -.6rem
}

.before-fix {
    margin-left: -.4rem
}

@media screen and (max-width:767px) {
    .sec-tit {
        width: 90.6248%;
        height: 10.7rem;
        background: url(../img/title-bg_sp.svg)no-repeat center center/100%;
        font-size: 2rem;
        margin: 0 auto 1.5rem;
        line-height: 1.4
    }

    .sec-tit span.line::after {
        width: calc(100% + .5rem);
        height: 1.6rem;
        top: 50%;
        left: -.5rem;
        transform: translateY(-42%)
    }

    .sec-txt {
        font-size: 1.4rem
    }
}

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999
}

.site-header .header-inner {
    box-sizing: border-box;
    width: 100%;
    padding: 0 4rem 0 0
}

.site-header .header-inner .flex_box {
    align-items: center
}

.site-header .header-inner .header-logo {
    width: 17.988%
}

.site-header .header-inner .header-logo a {
  transition: .3s;
}

.site-header .header-inner .header-logo a:hover {
  opacity: .7;
}

.site-header .header-inner .menu-box {
    width: 32.317%
}

.site-header .header-inner .menu-box .sns-block {
    width: 80.755%
}

.site-header .header-inner .menu-box .sns-block .sns-bubble {
    width: 61.215%
}

.site-header .header-inner .menu-box .sns-block .sns-box {
    width: 10.748%
}

.site-header .header-inner .menu-box .sns-block .sns-box a {
  transition: .3s;
}

.site-header .header-inner .menu-box .sns-block .sns-box a:hover {
  opacity: .7;
}

.site-header .header-inner .menu-box button {
    width: 8rem
}

.site-header .header-inner .menu-box .menu-btn {
    position: fixed;
    top: 1rem;
    right: 4rem;
    z-index: 1001;
    background: 0 0;
    border: 0;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-header .header-inner .menu-box .menu-btn.is-show:hover {
  opacity: .7;
}

.site-header .header-inner .menu-box .menu-btn .btn-icon img,.site-nav .btn-close img {
    width: 100%;
    height: auto;
    display: block
}

.site-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 59.75%;
    max-height: calc(100vh - 4rem);
    background-color: rgba(245,85,90,.95);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: opacity .3s ease,visibility .3s ease,transform .3s ease
}

.site-nav.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0)
}

.site-nav .btn-close {
    position: absolute;
    top: 3.44rem;
    right: 5.16rem;
    width: 4.19rem;
    cursor: pointer;
    z-index: 100;
  transition: .3s;
}

.site-nav .btn-close:hover {
  opacity: .7;
}

.site-nav .nav-inner {
    width: 100%;
    max-height: calc(100vh - 4rem);
    overflow-y: auto
}

@media screen and (max-width:767px) {
    .site-header .header-inner {
        box-sizing: border-box;
        width: 100%;
        padding: 0 2.6rem 0 0
    }

    .site-header .header-inner .header-logo {
        width: 40.25%
    }

    .site-header .header-inner .menu-box {
        width: 49.2%
    }

    .site-header .header-inner .menu-box .sns-block {
        width: 68%
    }

    .site-header .header-inner .menu-box .sns-block .sns-bubble {
        display: none
    }

    .site-header .header-inner .menu-box .sns-block .sns-box {
        width: 30%
    }

    .site-header .header-inner .menu-box button {
        width: 5.128rem
    }

    .site-header .header-inner .menu-box .menu-btn {
        top: 0;
        right: 1.5rem
    }
}

.site-nav .nav-inner {
    padding: 7.43rem 0 10.5rem;
    align-items: flex-start;
    color: #fff
}

.site-nav .nav-inner a {
  transition: .3s;
}

.site-nav .nav-inner a:hover {
  opacity: .7;
}

.site-nav .nav-menu {
    width: 41.87%;
    margin-left: 11.61%
}

.site-nav .nav-menu ul li {
    padding: 3.91rem 0 3.01rem
}

.site-nav .nav-menu ul li:not(:last-child) {
    border-bottom: .2rem dotted #fff
}

.site-nav .nav-menu ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.3rem;
    padding-left: .4rem;
    font-size: 2.3rem;
    line-height: 1;
    letter-spacing: .23rem
}

.site-nav .nav-menu ul li a span {
    margin-top: -.39rem;
    white-space: nowrap
}

.site-nav .nav-menu ul li a::after {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 3.3rem;
    height: 3.3rem;
    background: url(../img/nav-arrow.svg)no-repeat center center/100%
}

.site-nav .nav-sub {
    width: 20.52%;
    margin-right: 12.61%;
    padding-top: 4.02rem
}

.site-nav .nav-sub .nav-sub-box:not(:last-child) {
    margin-bottom: 4.21rem
}

.site-nav .nav-sub .menu-tit {
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: .16rem;
    padding-bottom: 1.91rem;
    margin-bottom: 1.98rem;
    border-bottom: .2rem solid #fff
}

.site-nav .nav-sub ul li {
    font-size: 1.5rem;
    line-height: 1
}

.site-nav .nav-sub ul li:not(:last-child) {
    margin-bottom: 1.7rem
}

.site-nav .nav-sub ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: .15rem
}

.site-nav .nav-sub ul li a span {
    white-space: nowrap
}

.site-nav .nav-sub ul li a::after {
    content: ">";
    display: block;
    letter-spacing: 0
}

.site-nav .nav-btn-box {
    width: 100%;
    margin-top: 7.65rem;
    padding: 0 12.224%0 6.505%
}

.site-nav .nav-btn-box .op-wide-btn {
    width: 44%;
    height: 6.6rem
}

.site-nav .nav-btn-box .flex_box {
    width: 53.55%
}

.site-nav .nav-btn-box .op-btn {
    width: 47.41%;
    height: 6.6rem
}

.site-nav .nav-btn-box .op-btn a,.site-nav .nav-btn-box .op-wide-btn a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: .2rem solid #000;
    border-radius: 3.3rem;
    line-height: 1;
    text-align: center
}

.site-nav .nav-btn-box .op-wide-btn a {
    background: #f3f000;
    padding-right: 2rem;
    color: #000;
    font-size: 2.12rem
}

.site-nav .nav-btn-box .op-btn.bg-black a {
    background: #000;
    padding-right: .6rem;
    color: #fff;
    font-size: 1.93rem;
    letter-spacing: .39rem
}

.site-nav .nav-btn-box .op-btn.bg-purple a {
    background: #562d94;
    padding-right: 1.19rem;
    color: #fff;
    font-size: 1.93rem
}

.site-nav .nav-btn-box .op-btn a::after,.site-nav .nav-btn-box .op-wide-btn a::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 1.78rem;
    transform: translateY(-50%)
}

.site-nav .nav-btn-box .op-btn a::after {
    width: 2.24rem;
    height: 2.24rem
}

.site-nav .nav-btn-box .op-wide-btn a::after {
    width: 2.28rem;
    height: 2.28rem;
    background: url(../img/op-btn-arrow01.svg)no-repeat center center/100%
}

.site-nav .nav-btn-box .op-btn.bg-black a::after {
    background: url(../img/op-btn-arrow02.svg)no-repeat center center/100%
}

.site-nav .nav-btn-box .op-btn.bg-purple a::after {
    background: url(../img/op-btn-arrow03.svg)no-repeat center center/100%
}

@media screen and (max-width:767px) {
    .site-nav {
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        max-height: none;
        overflow-y: auto
    }

    .site-nav .btn-close {
        top: 2.29rem;
        right: 2.9rem;
        width: 2.71rem
    }

    .site-nav .nav-inner {
        max-height: none;
        padding: 6.5rem 0 4.47rem;
        overflow-y: visible
    }

    .site-nav .nav-menu {
        order: 1;
        width: 80.8%;
        margin-left: 9.6%
    }

    .site-nav .nav-menu ul li {
        padding: 2.14rem 0 1.59rem
    }

    .site-nav .nav-menu ul li:not(:last-child) {
        border-bottom: .15rem dotted #fff
    }

    .site-nav .nav-menu ul li a {
        height: 2.47rem;
        padding-left: .3rem;
        font-size: 1.7rem;
        letter-spacing: .17rem
    }

    .site-nav .nav-menu ul li a span {
        margin-top: -.3rem
    }

    .site-nav .nav-menu ul li a::after {
        width: 2.47rem;
        height: 2.47rem
    }

    .site-nav .nav-btn-box {
        order: 2;
        margin-top: 2.48rem;
        padding: 0 9.37%
    }

    .site-nav .nav-btn-box .op-wide-btn {
        width: 100%;
        height: 4.78rem
    }

    .site-nav .nav-btn-box .flex_box {
        width: 100%;
        margin-top: 1.39rem
    }

    .site-nav .nav-btn-box .op-btn {
        width: 47.92%;
        height: 4.78rem
    }

    .site-nav .nav-btn-box .op-btn a,.site-nav .nav-btn-box .op-wide-btn a {
        border-width: .16rem;
        border-radius: 2.39rem
    }

    .site-nav .nav-btn-box .op-wide-btn a {
        padding-right: 1rem
    }

    .site-nav .nav-btn-box .op-btn.bg-black a {
        padding-right: 0
    }

    .site-nav .nav-btn-box .op-btn.bg-purple a {
        padding-right: .91rem
    }

    .site-nav .nav-btn-box .op-btn.bg-black a,.site-nav .nav-btn-box .op-btn.bg-purple a,.site-nav .nav-btn-box .op-wide-btn a {
        font-size: 1.5rem
    }

    .site-nav .nav-btn-box .op-btn.bg-black a {
        letter-spacing: .3rem
    }

    .site-nav .nav-btn-box .op-wide-btn a::after {
        right: 1.28rem
    }

    .site-nav .nav-btn-box .op-btn a::after {
        right: 1.28rem;
        width: 1.62rem;
        height: 1.62rem
    }

    .site-nav .nav-btn-box .op-wide-btn a::after {
        width: 1.62rem;
        height: 1.62rem
    }

    .site-nav .nav-sub {
        order: 3;
        width: 80.8%;
        margin: 4.08rem 0 0 9.6%;
        padding-top: 0
    }

    .site-nav .nav-sub .nav-sub-box:not(:last-child) {
        margin-bottom: 3.36rem
    }

    .site-nav .nav-sub .menu-tit {
        font-size: 1.7rem;
        letter-spacing: .17rem;
        padding-bottom: 1.63rem;
        margin-bottom: 1.56rem;
        border-bottom: .17rem solid #fff
    }

    .site-nav .nav-sub ul li:not(:last-child) {
        margin-bottom: 1.29rem
    }

    .site-nav .nav-sub ul li a::after {
        font-size: 1.31rem
    }

    .site-nav .nav-close-btn {
        order: 4;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 39.04%;
        height: 4.82rem;
        margin: 3.25rem auto 0;
        padding: 0;
        background: 0 0;
        border: .2rem solid #fff;
        border-radius: 2.41rem;
        color: #fff;
        font-size: 1.6rem;
        line-height: 1;
        letter-spacing: .32rem;
        cursor: pointer
    }

    .site-nav .nav-close-btn::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: 1.94rem;
        transform: translateY(-50%);
        width: 1.27rem;
        height: 1.27rem;
        background: url(../img/icon-close-sm.svg)no-repeat center center/100%
    }
}

.mv {
    aspect-ratio: 1640/2234.5284;
    padding: 16rem 0 0
}

.mv .bg-img {
    z-index: 10
}

.mv .mv-cloud,.mv .mv-mountain,.mv .mv-uc {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%
}

.mv .mv-cloud {
    z-index: 0;
    animation: cloudFloat 6s ease-in-out infinite
}

.mv .mv-mountain,.mv .mv-uc {
    z-index: 1
}

.mv .mv-uc {
    z-index: 2
}

.mv .content {
    z-index: 11
}

.mv .mv-catch {
    width: 24.268%;
    margin: 0 auto
}

.mv .mv-title {
    width: 20.92%;
    margin: -1rem auto 2rem
}

#item-1,#item-2,#item-3,#item-4,#item-5,#item-6,#item-7,#item-8 {
    transform-box: fill-box;
    transform-origin: center;
    animation: pulseScale 2.5s infinite
}

.mv .mv-subtit {
    width: 23.517%;
    margin: 0 auto
}

.mv .btn-open-campus {
    position: absolute;
    top: 63rem;
    right: 6.6rem;
    width: 34.4rem;
    height: 19.6rem;
    background: url(../img/btn-oc_bg02.svg)no-repeat center center/100%
}

.mv .btn-open-campus a {
    width: 100%;
    height: 100%;
    display: block;
    background: url(../img/btn-oc_bg.svg)no-repeat center center/100%;
    transform: translate(-.5rem,-.5rem);
    transition: .2s
}

.mv .btn-open-campus a:hover {
    opacity: 1;
    transform: translate(0,0)
}

.mv .btn-open-campus a::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 2.2rem;
    right: 2.4rem;
    width: 2.48rem;
    height: 2.48rem;
    background: url(../img/btn-oc_arrow.svg)no-repeat center center/100%;
    transition: .2s
}

.mv .btn-open-campus a:hover::after {
    opacity: 1;
    transform: translateX(.5rem)
}

.mv .btn-open-campus img {
    position: absolute;
    top: 1.8rem;
    right: 4rem;
    width: 9.84rem;
    height: 16.1rem
}

@media screen and (max-width:767px) {
    .mv {
        aspect-ratio: 375/886.0621
    }

    .mv .content {
        height: 100%;
        padding-top: 8.5rem
    }

    .mv .mv-catch {
        width: 62.8%
    }

    .mv .mv-title {
        width: 51%;
        margin: .5rem auto 1rem
    }

    .mv .mv-subtit {
        width: 51.7334%
    }

    .mv .btn-open-campus {
        width: 81%;
        top: 60rem;
        left: calc(50% - 40.5%);
        right: auto;
        height: 6.186rem;
        background: url(../img/btn-oc_bg02_sp.svg)no-repeat center center/100%
    }

    .mv .btn-open-campus a {
        width: 100%;
        height: 100%;
        display: block;
        background: url(../img/btn-oc_bg_sp.svg)no-repeat center center/100%;
        transform: translate(-.5rem,-.5rem);
        transition: 0s
    }

    .mv .btn-open-campus img {
        top: auto;
        right: 2.75rem;
        width: 8.5rem;
        height: 9.25rem;
        bottom: .1rem
    }

    .mv .btn-open-campus a::after {
        bottom: auto;
        right: 1rem;
        transition: 0s;
        top: 50%;
        transform: translateY(-50%)
    }
}

.about {
    position: relative;
    aspect-ratio: 1640/2022;
    margin-top: -74.5rem
}

.about .bg-img {
    z-index: 9;
    top: -31rem
}

.about .bg-img .about-bg01,.about .bg-img .about-bg02 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 0
}

.about .bg-img .about-tree01,.about .bg-img .about-tree02,.about .bg-img .about-tree03 {
    position: absolute;
    z-index: 1
}

.about .bg-img .about-tree01 {
    bottom: -38rem;
    left: -4rem;
    width: 24.47661rem
}

.about .bg-img .about-tree02 {
    bottom: -38rem;
    right: -6rem;
    width: 25.64281rem
}

.about-chara01,.about-tree03 {
    position: absolute;
    top: 206rem;
    left: -7rem;
    width: 25.64281rem;
    z-index: 100
}

.about .content {
    z-index: 11
}

.about-chara01 {
    top: 6.25rem;
    left: -2.4rem;
    width: 30.262rem;
    z-index: 21
}

.about-chara02 {
    position: absolute;
    top: 1rem;
    right: -2rem;
    width: 27.2rem;
    z-index: 21
}

.about-content {
    position: relative;
    z-index: 22;
    padding-top: 4rem
}

.about-content .about-box {
    position: relative;
    width: 30%;
    margin: 0 .5% 26rem
}

.about-content .about-box .about-txt-box {
    background: url(../img/about-box-bg.svg)no-repeat center center/100%;
    width: 100%;
    height: 48.5rem;
    padding: 5rem 4rem
}

.about-content .about-box .about-txt-box h3 {
    position: relative;
    text-align: center;
    font-size: 2.6rem;
    font-feature-settings: normal;
    letter-spacing: 0;
    width: 110%;
    margin: 0-5% 3rem
}

.about-content .about-box .about-txt-box h3 span {
    position: relative;
    z-index: 1
}

.about-content .about-box .about-txt-box h3 .txt-l {
    font-size: 4rem;
    letter-spacing: .04em
}

.about-content .about-box .about-txt-box h3::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,50%);
    background: #f3f000;
    width: 24.2rem;
    height: 1.3rem;
    z-index: 0
}

.about-content .about-box.box01 .about-txt-box h3::after {
    width: 26.2rem
}

.about-content .about-box .about-txt-box h4 {
    font-size: 2.2rem;
    letter-spacing: .02em;
    margin-bottom: 1.3rem;
    line-height: 1.61
}

.about-content .about-box .about-txt-box p {
    font-size: 1.439rem
}

.about-content .about-box.box01 figure,.about-content .about-box.box02 figure {
    position: absolute;
    bottom: -20.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 73%
}

.about-content .about-box.box02 figure {
    width: 71.58%
}

.about-content .about-box.box03 figure,.about-content .about-box.box04 figure {
    position: absolute;
    bottom: -21.7rem;
    left: 50%;
    transform: translateX(-50%);
    width: 76.615%
}

.about-content .about-box.box04 figure {
    bottom: -20.5rem;
    width: 73%
}

.about-content .about-box.box05 figure,.about-content .about-box.box06 figure {
    position: absolute;
    bottom: -20.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 71.58%
}

.about-content .about-box.box06 figure {
    bottom: -21.7rem;
    width: 76.615%
}

.about-content .about-box.box07 figure,.about-content .about-box.box08 figure {
    position: absolute;
    bottom: -20.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 73%
}

.about-content .about-box.box08 figure {
    width: 76.615%
}

.about-content .about-box.box09 figure,.about-content .about-box.box10 figure {
    position: absolute;
    bottom: -21.7rem;
    left: 50%;
    transform: translateX(-50%);
    width: 73%
}

.about-content .about-box.box10 figure {
    bottom: -20.5rem
}

.slick-next:before,.slick-prev:before {
    content: none!important
}

.slick-next,.slick-prev {
    width: 5rem!important;
    height: 5rem!important;
    z-index: 1
}

.slick-prev {
    left: 0!important
}

.slick-next {
    right: 0!important
}

.about-content .slick-prev {
    left: -6rem!important
}

.about-content .slick-next {
    right: -6rem!important
}

.spot-content .slick-prev {
    left: -6rem!important;
    top: 35rem
}

.spot-content .slick-next {
    right: -6rem!important;
    top: 35rem
}

@media screen and (max-width:767px) {
    .about {
        aspect-ratio: 375/1498.9831;
        margin-top: -7.5rem
    }

    .about .bg-img {
        z-index: 9;
        top: 5.5rem;
        width: 102%
    }

    .about-content .flex_box {
        display: block
    }

    .about-content .about-box {
        position: relative;
        width: 100%;
        margin: 0 .5% 20.5rem
    }

    .about-content .about-box .about-txt-box {
        width: 100%;
        height: 42.5rem;
        padding: 3.5rem 3rem
    }

    .about-content .about-box.box01 figure,.about-content .about-box.box02 figure {
        bottom: -17.5rem
    }

    .about-content .about-box.box03 figure {
        bottom: -18.7rem
    }

    .about-content .about-box.box04 figure,.about-content .about-box.box05 figure {
        bottom: -19.5rem
    }

    .about-content .about-box.box06 figure {
        bottom: -17.7rem
    }

    .about-content .about-box.box07 figure,.about-content .about-box.box08 figure,.about-content .about-box.box10 figure {
        bottom: -17.5rem
    }

    .about-content .about-box.box09 figure {
        bottom: -19.5rem;
        width: 70%;
    }

    .about-chara01 {
        top: -11rem;
        left: 9.6rem;
        width: 11.33817rem;
        z-index: 19
    }

    .about-chara02 {
        top: -14.5rem;
        right: 8.5rem;
        width: 11.30126rem;
        z-index: 19
    }

    .about-bg02 {
        display: none
    }

    .about-content {
        padding-top: .5rem
    }

    .about-content.slide01 {
        margin-top: .5rem
    }

    .slick-next,.slick-prev {
        width: 3rem!important;
        height: 3rem!important;
        top: 21rem!important;
        z-index: 1
    }

    .slick-prev {
        left: 0!important
    }

    .slick-next {
        right: 0!important
    }

    .about .bg-img .about-tree01 {
        bottom: 74rem;
        width: 16rem
    }

    .about .bg-img .about-tree02 {
        bottom: -3rem;
        right: -1rem;
        width: 13rem
    }

    .about .bg-img .about-tree03 {
        position: absolute;
        bottom: 65rem;
        right: -1rem;
        width: 13rem
    }

    .about-content .slick-prev {
        left: 0!important
    }

    .about-content .slick-next {
        right: 0!important
    }

    .about-content .about-box .about-txt-box h3 {
        font-size: 2.4rem
    }

    .about-content .about-box .about-txt-box h3 .txt-l {
        font-size: 3.8rem
    }

    .about-content .about-box .about-txt-box h4 {
        font-size: 2rem
    }
}

.department {
    position: relative;
    aspect-ratio: 1640/3500;
    margin-top: -15.8rem
}

.department .bg-img {
    z-index: 8
}

@media screen and (min-width:768px) {
    .department .sec-tit {
        margin-bottom: 5rem
    }
}

.department .wrap {
    padding-top: 25.2rem
}

.department .content {
    max-width: 120rem;
    z-index: 9
}

.department-chara01 {
    position: absolute;
    top: 30.8rem;
    left: 3rem;
    width: 24.5161rem;
    z-index: 21
}

.department-chara01-fukidashi {
    position: absolute;
    top: -11.8rem;
    left: -15rem;
    width: 25.5087rem;
    z-index: 22
}

.department-chara02 {
    position: absolute;
    top: 16.2rem;
    right: -6.2rem;
    width: 29.8192rem;
    z-index: 21
}

.department-box {
    z-index: 23;
    background: url(../img/department-box-bg.svg)no-repeat center center/contain;
    width: 100%;
    height: 54.1rem;
    padding: 6rem 7rem 5rem;
    margin-top: 4.2rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    cursor: pointer
}

.department-box.kokusai {
    background: url(../img/department-box-bg2.svg)no-repeat center center/contain;
    height: 59.6rem
}

.department-box:first-of-type {
    margin-top: 7.2rem
}

.department-box-link-pc.pc {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block
}

.department-box-detail ul li {
    position: relative;
    z-index: 2;
    width: calc(25% - .75rem);
    height: 5.6rem;
    margin-bottom: 1.2rem;
    margin-right: 1rem
}

.department-box-link .pc-text {
    display: inline-flex;
    align-items: center;
    font-size: 1.8rem;
    line-height: 1.666;
    letter-spacing: .1em
}

.department-box-link .pc-text .link-blank,.department-box-link a .link-blank {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    margin-left: 1.4rem
}

.department-box-gakubu {
    width: 30.8rem
}

.department-box-gakubu h3 {
    position: relative;
    font-size: 5.4rem;
    line-height: 1.277;
    padding-bottom: 1.9rem
}

.department-box-gakubu h3:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30.8rem;
    height: 1.2rem
}

.jingaku .department-box-gakubu h3:after {
    background: url(../img/tit-liner-jingaku.svg)no-repeat center center/100%
}

.kokusai .department-box-gakubu h3:after {
    background: url(../img/tit-liner-kokusai.svg)no-repeat center center/100%
}

.taiku .department-box-gakubu h3:after {
    background: url(../img/tit-liner-taiku.svg)no-repeat center center/100%
}

.iryou .department-box-gakubu h3:after {
    background: url(../img/tit-liner-iryou.svg)no-repeat center center/100%
}

.department-box-gakubu p.gakka-txt {
    font-size: 1.7rem;
    line-height: 1.882;
    margin-top: 2rem;
    letter-spacing: -.035em
}

.department-box-gakubu figure {
    margin-top: 4rem
}

.jingaku .department-box-gakubu figure img {
    max-width: 30.3rem;
    margin: 0 auto
}

.kokusai .department-box-gakubu figure {
    margin-top: 2.2rem
}

.kokusai .department-box-gakubu figure img {
    max-width: 25.7rem;
    margin: 0 auto
}

.taiku .department-box-gakubu figure img {
    max-width: 31.45rem;
    margin: 0 auto
}

.iryou .department-box-gakubu figure img {
    max-width: 31.2rem;
    margin: 0 auto
}

.department-box-detail {
    width: calc(100% - 30.8rem);
    padding-left: 7rem
}

.department-box-detail h4 {
    font-size: 2.8rem;
    line-height: 1.642;
    letter-spacing: .1em
}

.department-box-detail p {
    font-size: 1.5rem;
    line-height: 2;
    margin-top: 2.2rem;
    letter-spacing: .05em
}

.department-box-detail ul {
    margin-top: 3.5rem;
    padding-right: 4.7rem;
    display: flex;
    flex-wrap: wrap
}

.department-box-detail ul li a {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 100%;
    border: 2px solid #000;
    border-radius: 1.3rem;
    font-size: 1.5rem;
    line-height: 1.333;
    text-align: center
}

.kokusai .department-box-detail ul li a .symbol-fix {
    display: contents
}

.department-box-detail ul li:nth-child(4n) {
    margin-right: 0
}

.department-box-link {
    position: absolute;
    bottom: 4rem;
    right: 4rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  transition: .3s;
      z-index: 99;
}

.department-box-link:hover {
  opacity: .7;
}

.department-box-link a {
    display: inline-flex;
    align-items: center;
    font-size: 1.8rem;
    line-height: 1.666;
    letter-spacing: .1em;
    transition: .3s
}

.department-box-link a:hover,footer .foot-menu a:hover {
    opacity: .7
}

.department-bird,.department-sun {
    position: absolute;
    bottom: 14.6rem;
    left: 62.4rem;
    z-index: 9;
    width: 23.128rem;
    height: 19.64rem
}

.department-bird {
    bottom: 26.6rem;
    left: 43.4rem;
    width: 9.681rem;
    height: 12.102rem
}

.department-cloud {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 8;
    width: 100%;
    height: 100%
}

@media screen and (max-width:767px) {
    .department-chara01 {
        position: absolute;
        top: 17rem;
        left: 6rem;
        width: 11.5161rem;
        z-index: 21
    }

    .department-chara01-fukidashi {
        position: absolute;
        top: -9.8rem;
        left: -3rem;
        width: 15.5087rem;
        z-index: 22
    }

    .department-chara02 {
        position: absolute;
        top: 10rem;
        right: 2.8rem;
        width: 15.8192rem;
        z-index: 21
    }

    .department-box {
        position: relative;
        z-index: 23;
        background: url(../img/department-box-bg_sp.svg)no-repeat center center/contain;
        width: 100%;
        height: 50.5rem;
        padding: 3rem 4.5rem;
        margin-top: 2.1rem
    }

    .department-box.kokusai {
        background: url(../img/department-box-bg2_sp.svg)no-repeat center center/contain;
        height: 69.1rem
    }

    .department-box.iryou .department-box-gakubu h4 {
      margin-right: -1rem;
    }

    .department-box-gakubu h3 {
        font-size: 3.4rem;
        padding-bottom: 2.5rem
    }

    .department-box.kokusai .department-box-gakubu h3 {
        padding-bottom: 3rem
    }

    .department-box-gakubu h3:after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 24.4rem;
        height: 1.2rem
    }

    .department-box:first-of-type {
        margin-top: 3rem
    }

    .department-box-gakubu h4 {
        font-size: 1.7rem;
        line-height: 1.65;
        padding-top: 1.5rem
    }

    .department-box.kokusai .department-box-gakubu h4 {
        padding-top: 2rem
    }

    .jingaku .department-box-gakubu h4 {
        color: #e65247
    }

    .kokusai .department-box-gakubu h4 {
        color: #ffb43a
    }

    .taiku .department-box-gakubu h4 {
        color: #319ff5
    }

    .iryou .department-box-gakubu h4 {
        color: #17cdd4
    }

    .department-box-gakubu p.gakka-txt {
        font-size: 1.4rem;
        margin-top: 1.5rem
    }

    .department-box.kokusai .department-box-gakubu p.gakka-txt {
        margin-top: 2rem
    }

    .department-box-gakubu figure {
        width: 80%;
        margin: 1.5rem auto 0
    }

    .department-box.kokusai .department-box-gakubu figure {
        margin: 2rem auto 0
    }

.department-box-detail ul li a {
    font-size: 1.4rem;
}

    .department-box-link,.department-box-link a {
        text-align: center;
        display: block;
        position: relative
    }

    .department-box-link {
        width: 20.1rem;
        margin: 0 auto;
        bottom: auto;
        right: auto
    }

    .department-box-link a {
        width: 100%;
        background: #f3f000;
        border: .2rem solid #000;
        border-radius: 3rem;
        margin: 1rem auto 0;
        padding: 1.2rem 0;
        font-size: 1.239rem;
        line-height: 1
    }

    .department-box-link a::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: 2rem;
        transform: translateY(-50%);
        width: 1.226rem;
        height: 1.226rem;
        background: url(../img/department-icon-plus.svg)no-repeat center center/100%
    }

    .department-bird,.department-sun {
        position: absolute;
        bottom: -15.4rem;
        left: 10.4rem;
        z-index: 9;
        width: 12.128rem;
        height: 10.64rem
    }

    .department-bird {
        bottom: -11.4rem;
        left: 28.4rem;
        width: 4.681rem;
        height: 6.102rem
    }

    .department-cloud {
        bottom: -30rem
    }
}

.data {
    position: relative;
    aspect-ratio: 1640/2202;
    margin-top: -25.1rem
}

.data .bg-img {
    z-index: 10
}

.data .wrap {
    padding-top: 18.2rem
}

.data .content {
    max-width: 120rem;
    z-index: 11
}

.data .content .sec-tit-en {
    text-align: center;
    margin-bottom: 5rem
}

.data .content .sec-tit-en img {
    max-width: 57.25rem;
    margin: 0 auto
}

.data-chara01 {
    position: absolute;
    top: 45.8rem;
    left: -3.5rem;
    width: 31.25rem;
    z-index: 21
}

.data-chara01-fukidashi {
    position: absolute;
    top: -17.4rem;
    left: -6.2rem;
    width: 20.0347rem;
    z-index: 22
}

.data-chara02 {
    position: absolute;
    top: -10.6rem;
    right: -13.3rem;
    width: 64.2rem;
    z-index: 21
}

.data-chara02-fukidashi {
    position: absolute;
    top: -6rem;
    left: -3.5rem;
    width: 26.6058rem;
    z-index: 22
}

.data-box,.data-box-left .data-box-rate {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.data-box {
    z-index: 22;
    background: url(../img/data-box-bg.svg)no-repeat center center/100%;
    width: 100%;
    height: 70.8rem;
    padding: 5rem;
    margin-top: 7.5rem
}

.data-bottombox:after,.data-box-left .data-box-rate:after,.data-box:after {
    content: "";
    width: 1px;
    background: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.data-bottombox:after,.data-box:after {
    height: calc(100% - 10rem)
}

.data-box-left {
    width: 50%;
    padding-right: 4.6rem
}

.data-box-left p.data-box-msg {
    font-size: 2.8rem;
    color: #562d94;
    line-height: 1.642;
    letter-spacing: .09em
}

.data-box-left h3 {
    margin-top: 4rem;
    font-size: 2.8rem;
    color: #fff;
    background: #562d94;
    line-height: 1;
    letter-spacing: .35em;
    text-align: center;
    padding: 1.5rem;
    border-radius: 1rem
}

.data-bottombox .data-box-left h3 {
    margin-top: 0;
    letter-spacing: .1em
}

.data-box-left .data-box-rate {
    margin-top: 2rem;
    align-items: center
}

.data-box-left .data-box-rate:after {
    height: 100%
}

.data-box-left .data-box-rate p,.data-box-left h4 {
    line-height: 1;
    letter-spacing: .1em;
    text-align: center
}

.data-box-left .data-box-rate p {
    width: 50%;
    font-size: 2.4rem
}

.data-box-left .data-box-rate p span {
    display: block;
    font-size: 3rem;
    line-height: 1;
    letter-spacing: .1em
}

.data-box-left .data-box-rate p span span {
    display: inline-block;
    font-size: 7rem
}

.data-box-left h4 {
    margin-top: 3rem;
    font-size: 2rem;
    padding: 1rem;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000
}

.data-box-left p.data-box-subtit {
    margin-top: 2rem;
    font-size: 2.3rem;
    color: #562d94;
    text-align: center;
    line-height: 1.565;
    letter-spacing: .1em
}

.data-box-left p.data-box-lead {
    margin-top: 1.5rem;
    font-size: 1.6rem;
    line-height: 2
}

.data-box-right {
    width: 50%;
    padding-left: 4.6rem;
      text-align: center;
}

.data-box-right h3,.data-box-right p.data-box-bandtit {
    font-size: 2.8rem;
    line-height: 1;
    text-align: center;
    border-radius: 1rem
}

.data-box-right h3 {
    margin-top: 0;
    color: #fff;
    background: #562d94;
    letter-spacing: .2em;
    padding: 1.5rem
}

.data-box-right p.data-box-bandtit {
    border: 3px solid #000;
    background: #f3f000;
    padding: 1.5rem 1rem;
    margin-top: 2.0rem
}

.data-box-right p.data-box-bandtit:first-of-type {
    margin-top: 0
}

.data-box-right p.data-box-appeal {
    font-size: 2.4rem;
    line-height: 1;
    text-align: center;
  display: inline-block;
}

.data-box-right p.data-box-appeal span {
    font-size: 4rem;
    line-height: 1
}

.data-box-right p.data-box-appeal span span {
    font-size: 6rem
}

.data-box-right p.data-box-appeal span.f-small,.data-box-right p.data-box-appeal span.f-small span,footer .foot-menu .foot-menu-box ul li {
    font-size: 1.4rem
}

.data-box-right p.data-box-txt {
    font-size: 1.6rem;
    text-align: center;
    line-height: 1.75;
    margin-top: 1.2rem
}

.data-box-right p.data-box-appeal span.data-box-cap {
  text-align: right;
    display: block;
    font-size: 1.2rem;
    line-height: 1;
    margin-top: .5rem;
}

.data-box-right .data-box-textwrap {
    display: flex;
    justify-content: center;
    align-items: center
}

.data-box-right .data-box-textwrap p {
    font-size: 3rem;
    line-height: 1
}

.data-box-right .data-box-textwrap p span span {
    font-size: 7rem;
    line-height: 1
}

.data-box-right .data-box-textwrap p span.cap {
    display: block;
    font-size: 1.2rem;
    line-height: 1;
    margin-top: .5rem
}

.data-box-right .data-box-textwrap p.data-box-text-tit {
    font-size: 1.8rem;
    line-height: 1.75;
    margin-right: 1.5rem;
  text-align: left;
}

.data-bottombox {
    position: relative;
    background: url(../img/data-bottombox-bg.svg)no-repeat center center/100%;
    width: 100%;
    height: 26.4rem;
    padding: 4rem 5rem;
    margin-top: 4.2rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.data-qualification .data-qualification-rate {
    font-size: 2.2rem
}

.data-qualification .data-qualification-rate span {
    font-size: 5.104rem;
    display: block
}

.data-bottombox-cap {
    font-size: 1.021rem;
    line-height: 1;
    text-align: right;
    margin-top: 1rem
}

.data-bottombox .data-box-right p {
    font-size: 3rem;
    line-height: 1;
    vertical-align: middle;
    background: #d5cae4;
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 8.4rem;
    letter-spacing: .04em
}

.data-bottombox .data-box-right p span.txt-l {
    font-size: 7rem;
    line-height: 1;
    margin: -1rem 0 0 1rem
}

.data-bottombox .data-box-right p span.unit {
    font-size: 2.9rem;
    line-height: 1;
    margin: 0 0-2.5rem .5rem
}

.data-grass {
    width: 23em;
    position: absolute;
    bottom: 25rem;
    left: -1.5rem;
    z-index: 100;
    transform: scaleX(-1)
}

.data-grass.grass01 {
    bottom: auto;
    top: 64rem;
    left: -7rem
}

.data-book {
    position: absolute;
    top: 58rem;
    right: 26.7rem;
    width: 17.756rem;
    z-index: 21
}

@media screen and (max-width:767px) {
    .data {
        position: relative;
        aspect-ratio: 375/2873;
        margin-top: 10rem
    }

    .data .wrap {
        padding-top: 38.2rem
    }

    .data-chara01 {
        position: absolute;
        top: -19rem;
        left: 1.5rem;
        width: 15.25rem;
        z-index: 21
    }

    .data-chara01-fukidashi {
        position: absolute;
        top: -12.4rem;
        left: .8rem;
        width: 13.0347rem;
        z-index: 22
    }

    .data-chara02 {
        position: absolute;
        top: -30rem;
        right: -17.3rem;
        width: 39.2rem;
        z-index: 21
    }

    .data-chara02-fukidashi {
        position: absolute;
        top: -4rem;
        left: 2.5rem;
        width: 17.17476rem;
        z-index: 22
    }

    .data .content .sec-tit-en {
        margin-bottom: 2.5rem
    }

    .data .content .sec-tit-en img {
        max-width: 30.25rem
    }

    .data-box {
        position: relative;
        z-index: 22;
        background: url(../img/data-box-bg_sp.svg)no-repeat top center/100%;
        width: 100%;
        height: 109.56128rem;
        padding: 2.25rem 3rem;
        margin-top: 2rem;
        display: block;
        aspect-ratio: 43/150
    }

    .data-box-left p.data-box-msg {
        font-size: 1.8rem;
        text-align: center
    }

    .data-box-left h3 {
        margin-top: 2rem;
        font-size: 1.6rem;
        padding: 1rem
    }

    .data-box-left {
        width: 100%;
        padding-right: 0
    }

    .data-box-right {
        width: 100%;
        padding-left: 0
    }

    .data-box-left .data-box-rate p {
        font-size: 1.3rem
    }

    .data-box-left .data-box-rate p span {
        font-size: 1.8rem
    }

    .data-box-left .data-box-rate p span span {
        font-size: 3.6rem
    }

    .data-box-left h4 {
        margin-top: 1.5rem;
        font-size: 1.4rem
    }

    .data-box-left p.data-box-subtit {
        margin-top: 1rem;
        font-size: 1.8rem
    }

    .data-box-left p.data-box-lead {
        margin-top: 1rem;
        font-size: 1.4rem;
        line-height: 1.85;
    }

    .data-box-right p.data-box-bandtit {
        font-size: 1.6rem;
        margin-top: 1.6rem;
        margin-bottom: .8rem;
        padding: 1rem
    }

    .data-box-right p.data-box-bandtit:first-of-type {
        margin-top: 2rem
    }

    .data-box-right p.data-box-appeal span {
        font-size: 2.7rem
    }
  
    .data-box-right p.data-box-txt {
      line-height: 1.65;
      margin-top: .75rem;
    }

    .data-box-right .data-box-textwrap p span span,.data-box-right p.data-box-appeal span span {
        font-size: 3.375rem
    }

    .data-box-right .data-box-textwrap {
        display: block
    }

    .data-box-right .data-box-textwrap p {
        text-align: center;
        font-size: 2.025rem
    }
  
    .data-box-right .data-box-textwrap p.data-box-text-tit {
      margin-right: 0;
      text-align: center;
    }
  
    .data-box-right p.data-box-cap {
      padding-top: .5rem;
    }

    .data-box-right .data-box-textwrap p span.cap {
        margin-top: 1.0rem;          
    }
  
    .data-box-right p.data-box-appeal span.data-box-cap {
      margin-top: 1.0rem;
      text-align: center;
    }

    .data-bottombox:after,.data-box:after {
        content: none
    }

    .data-bottombox {
        position: relative;
        background: url(../img/data-bottombox-bg_sp.svg)no-repeat center center/100%;
        width: 100%;
        height: 46.79128rem;
        padding: 3rem;
        margin-top: 2.5rem;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap
    }

    .data-qualification li {
        width: 100%;
        padding: 1rem 0 1rem 1rem
    }

    .data-qualification li:first-child {
        width: 100%;
        padding: 0 0 1rem 1rem
    }

    .data-qualification .data-qualification-tit {
        font-size: 1.4rem;
        width: 46%;
        margin-right: 0
    }

    .data-qualification .data-qualification-rate {
        font-size: 2.9865rem;
        width: 50%
    }

    .data-qualification .data-qualification-rate span {
        font-size: 3.982rem;
        display: inline-block
    }

    .data-bottombox-cap {
        font-size: 1.1rem;
        line-height: 1;
        text-align: center;
        margin-top: -.5rem;
        width: 50%;
        margin-right: 0;
        margin-left: auto
    }

    .data-box-right h3 {
        margin-top: 2rem;
        font-size: 1.6rem;
        color: #fff;
        background: #562d94;
        line-height: 1;
        letter-spacing: .2em;
        text-align: center;
        padding: 1rem;
        border-radius: 1rem
    }

    .data-qualification li:not(:last-child) {
        border-bottom: .2rem dashed #000
    }

    .data-qualification li:last-child .data-qualification-tit {
        margin-bottom: -2rem
    }

    .data-bottombox .data-box-right p {
        font-size: 1.965rem;
        line-height: 1;
        vertical-align: middle;
        background: #d5cae4;
        margin-top: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 5.4rem;
        letter-spacing: .04em
    }

    .data-bottombox .data-box-right p span.txt-l {
        font-size: 3.82rem;
        line-height: 1;
        margin: -.5rem 0 0 1rem
    }

    .data-bottombox .data-box-right p span.unit {
        font-size: 1.582rem;
        line-height: 1;
        margin: 0 0-.9rem .5rem
    }

    .data-grass {
        display: none
    }
}

.spot {
    position: relative;
    aspect-ratio: 1646/1293;
    margin-top: -25.1rem;
    z-index: 100
}

.spot .bg-img {
    z-index: 10
}

.spot .wrap {
    padding-top: 17.6rem
}

.spot .content {
    max-width: 120rem;
    z-index: 11
}

.spot-chara01 {
    width: 23.55rem;
    position: absolute;
    top: -7rem;
    left: -10.5rem
}

.spot-chara02 {
    width: 44.4em;
    position: absolute;
    top: -10rem;
    right: -3rem
}

.spot-chara02-fukidashi {
    width: 24.2rem;
    margin-top: 6rem
}

.spot-chara02-chara {
    width: 19.1rem
}

.spot-tent01,.spot-tent02 {
    width: 17.3em;
    position: absolute;
    top: -5.8rem;
    left: 15.7rem
}

.spot-tent02 {
    width: 14.6em;
    top: -6.6rem;
    left: 39.4rem
}

.spot-grass {
    width: 25em;
    position: absolute;
    top: 0;
    right: -6.2rem;
    z-index: 100
}

.spot-wrap {
    margin-top: 4rem
}

.spot-box {
    width: 35.7rem;
    aspect-ratio: 357/613;
    padding: 14.5rem 4.7rem 0 4rem
}

.spot-box h3 {
    font-size: 2.8rem;
    line-height: 1.4em;
    text-align: center;
    margin: 2.2rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .1em;
    min-height: calc(2.8rem*1.4*2)
}

.spot-box p {
    letter-spacing: .08rem;
    line-height: 1.75em
}

.spot-box:nth-of-type(1) {
    background: url(../img/spot-box-bg01.png)no-repeat center center/100%
}

.spot-box:nth-of-type(2) {
    background: url(../img/spot-box-bg02.png)no-repeat center center/100%
}

.spot-box:nth-of-type(3) {
    background: url(../img/spot-box-bg03.png)no-repeat center center/100%
}

@media screen and (min-width:768px) {
  .spot .sec-tit {
    padding-left: .6rem;
  }
  .spot .sec-tit span.symbol-fix {
    margin-right: .6rem;
  }
}
@media screen and (max-width:767px) {
    .spot {
        aspect-ratio: 375/1163.37;
        margin-top: -18.1rem
    }

    .spot .bg-img {
        top: -6.5rem
    }

    .spot-chara01,.spot-grass {
        display: none
    }

    .spot-chara02 {
        width: 72%;
        position: absolute;
        top: auto;
        right: auto;
        left: 5rem;
        bottom: -30rem
    }

    .spot-chara02-fukidashi {
        width: 60%;
        margin-top: 6rem
    }

    .spot-chara02-chara {
        width: 40%
    }

    .spot .wrap {
        padding-top: 6.6rem
    }

    .spot-wrap {
        margin: 2rem 4rem 4rem
    }

    .spot-wrap .slick-prev {
        left: -4rem!important;
        top: 24rem!important
    }

    .spot-wrap .slick-next {
        right: -4rem!important;
        top: 24rem!important
    }

    .spot-box {
        width: 35.7rem;
        padding: 10.5rem 3rem 0
    }

    .spot-box h3 {
        font-size: 2rem;
        margin: .8rem 0
    }

    .spot-box p {
        font-size: 1.147rem
    }

    .spot-tent01 {
        width: 10.3em;
        position: absolute;
        top: auto;
        left: 2.7rem;
        bottom: -12rem
    }

    .spot-grass-sp,.spot-tree {
        position: absolute;
        z-index: 10
    }

    .spot-tree {
        width: 33%;
        right: -2rem;
        bottom: 11rem
    }

    .spot-grass-sp {
        bottom: 5rem;
        width: 24%;
        left: -7%
    }
}

.interview {
    position: relative;
    margin-top: -12.5rem;
    height: auto;
    padding-bottom: 35rem;
    background: #bfeee8
}

.interview .bg-img {
    z-index: 11;
    background: #bfeee8;
    height: auto
}

.interview .bg-img .interview-bg01,.interview .bg-img .interview-bg02 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    z-index: 0
}

.interview .wrap {
    padding-top: 27.6rem
}

.interview .content {
    max-width: 120rem;
    z-index: 11
}

.interview-chara01 {
    position: absolute;
    top: 25.3rem;
    left: -11rem;
    z-index: 100
}

.interview-chara01-fukidashi {
    width: 21rem;
    display: block;
    margin-bottom: 1rem
}

.interview-chara01-chara {
    width: 21.3rem;
    display: block;
    margin-left: 15rem
}

.interview-chara02 {
    width: 34.3rem;
    position: absolute;
    top: 20rem;
    right: -9rem;
    z-index: 20
}

.interview-chara02-fukidashi {
    width: 18rem;
    position: absolute;
    top: 22.4rem;
    right: 0
}

.interview-chara02-chara {
    width: 27.15rem;
    display: block
}

.interview-wrap {
    margin-top: 11rem;
    row-gap: 8.7rem
}

.interview-wrap::after {
    content: "";
    width: 35.6rem;
    display: block
}

.interview-box {
    width: 35.6rem;
    aspect-ratio: 356/494;
    position: relative;
    z-index: 1;
    cursor: pointer
}

.interview-box .fukidashi {
    width: 26.3rem;
    aspect-ratio: 263/134;
    background: url(../img/interview-box_fukidashi.svg)no-repeat center center/100%;
    position: absolute;
    top: -3rem;
    left: -3rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3rem
}

.interview-box .fukidashi p {
    line-height: 1.75em;
    padding: 0 1.6rem .75rem;
    letter-spacing: .1em;
    font-size: 1.55rem
}

.interview-box .interview-list-img {
    position: relative;
    padding-top: 3.3rem;
    width: 83.0402%;
    margin: 0 auto;
    z-index: 0
}

.interview-box .interview-deco {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1
}

.interview-box .txt-box {
    margin-top: 1.4rem;
    position: relative;
    z-index: 2
}

.interview-box.box-yellow .interview-list-img {
    background: #fff0d8
}

.interview-box.box-turquoise .interview-list-img {
    background: #d1f5f6
}

.interview-box.box-pink .interview-list-img {
    background: #fadcda
}

.interview-box.box-lightblue .interview-list-img {
    background: #d6ecfd
}

.interview-box dl {
    text-align: center;
    letter-spacing: .1em;
    margin-bottom: .9rem
}

.interview-box dt {
    font-size: 1.85rem;
    line-height: 1.35em;
}

.interview-box dd p {
    font-size: 1.85rem;
    line-height: 1.35em;
  margin: 0;
}

.interview-box .btn {
    max-width: 20.2rem;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: .1em
}

.interview-box .btn a {
    border: 2px solid #000;
    padding: 1.2rem
}

.interview-box .btn .icon {
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    position: absolute;
    top: 50%;
    right: 1.2rem;
    transform: translate(0,-50%)
}

.interview-box .btn .icon:after,.interview-box .btn .icon:before,.more-btn .icon:after,.more-btn .icon:before {
    content: "";
    width: 100%;
    height: 2px;
    display: block;
    background: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.interview-box .btn .icon:after,.more-btn .icon:after,.more-btn .icon:before {
    width: 2px;
    height: 100%
}

.interview-box .btn .btn-inner,.interview-box .btn a,.more-btn a {
    display: block;
    background: #f3f000;
    line-height: 1em;
    border-radius: 100px;
    position: relative
}

.interview-box .btn .btn-inner {
    border: 2px solid #000;
    padding: 1.2rem;
    pointer-events: none
}

.interview-box:hover {
    animation: shakeImg 1s ease-in-out
}

.more-btn {
    font-size: 2rem;
    max-width: 32.8rem;
    width: 100%;
    margin: 0 auto
}

.more-btn a {
    border: 3px solid #000;
    padding: 2rem;
    text-align: center
}

.more-btn .icon {
    display: block;
    width: 2.2rem;
    height: 2.2rem;
    position: absolute;
    top: 50%;
    right: 2.2rem;
    transform: translate(0,-50%)
}

.more-btn .icon:after,.more-btn .icon:before {
    width: 100%;
    height: 3px
}

.more-btn .icon:after {
    width: 3px;
    height: 100%
}

@media screen and (max-width:767px) {
    .interview {
        aspect-ratio: 375/1880.6415;
        margin-top: -8rem
    }

    .interview::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 20rem;
        background: #bfeee8;
        margin-top: -18rem;
        z-index: 0
    }

    .interview .wrap {
        padding-top: 5rem
    }

    .interview-wrap {
        margin-top: 6rem;
        row-gap: 4rem
    }

    .interview-box {
        width: 76%;
        aspect-ratio: 356/494;
        position: relative;
        margin: 0 auto
    }

    .interview-box .fukidashi {
        width: 20.3rem;
        aspect-ratio: 263/134;
        background: url(../img/interview-box_fukidashi.svg)no-repeat center center/100%;
        position: absolute;
        top: -2.5rem;
        left: -2.5rem
    }

    .interview-box .fukidashi p {
        line-height: 1.75em;
        padding: 1rem 0rem;
        letter-spacing: .05em;
        font-size: 1.25rem;
    }
  
    .interview-box dl {
        margin-bottom: .7rem;
    }

    .interview-box dt {
        font-size: 1.4rem;
        line-height: 1.35em;
    }

    .interview-box dd p {
        font-size: 1.4rem;
        line-height: 1.35em;
    }

    .interview-box .btn {
        max-width: 14.2rem;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        font-size: 1.2rem;
        letter-spacing: .1em
    }

    .interview-box .btn .btn-inner,.more-btn a {
        display: block;
        background: #f3f000;
        line-height: 1em;
        border-radius: 100px;
        position: relative
    }

    .interview-box .btn .btn-inner {
        border: 2px solid #000;
        padding: 1rem;
        font-size: .881rem
    }

    .interview-box .btn .icon {
        width: 1rem;
        height: 1rem
    }

    .interview-box .txt-box {
        margin-top: .8rem
    }

    .more-btn {
        font-size: 1.355rem;
        max-width: 23.8rem;
        width: 100%;
        margin: 0 auto
    }

    .more-btn a {
        border: 3px solid #000;
        padding: 1.5rem;
        text-align: center
    }

    .more-btn .icon {
        display: block;
        width: 1.5rem;
        height: 1.5rem;
        position: absolute;
        top: 50%;
        right: 2.2rem;
        transform: translate(0,-50%)
    }

    .interview-chara01 {
        position: absolute;
        top: -22.5rem;
        left: 2rem;
        z-index: 100
    }

    .interview-chara01-fukidashi {
        width: 12rem;
        display: block;
        margin-bottom: 1rem
    }

    .interview-chara01-chara {
        width: 13.3rem;
        display: block;
        margin-left: 6rem
    }

    .interview-chara02 {
        width: 14.3rem;
        position: absolute;
        top: -23.5rem;
        right: 6rem;
        z-index: 20
    }

    .interview-chara02-fukidashi {
        width: 9rem;
        position: absolute;
        top: 12.4rem;
        right: -4.5rem
    }

    .interview-chara02-chara {
        width: 16.15rem;
        display: block
    }

    .interview-box .interview-list-img {
        padding-top: 2.3rem
    }
}

.episode {
    position: relative;
    aspect-ratio: 1640/1128;
    margin-top: -17rem;
    z-index: 120;
    background: linear-gradient(to bottom,transparent 50%,#fbfab2 50%)
}

.episode .bg-img {
    z-index: 10
}

.episode .bg-img .episode-grass {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1
}

.episode .bg-img .episode-grass .episode-grass01 {
    position: absolute;
    top: -19rem;
    left: -1rem;
    width: 26.8rem
}

.episode .bg-img .episode-grass .episode-grass02 {
    position: absolute;
    top: 0;
    right: -1rem;
    width: 25.03rem
}

.episode .wrap {
    padding-top: 17.2rem
}

.episode .content {
    max-width: 120rem;
    z-index: 11
}

.episode .episode-chara01 {
    position: absolute;
    width: 22.25813rem;
    z-index: 12;
    top: -12rem;
    left: 45%;
    animation: cloudFloat 5s ease-in-out infinite;
    will-change: transform
}

.episode .episode-chara01-fukidashi {
    position: absolute;
    width: 24.069rem;
    top: 2rem;
    left: -26rem
}

.episode-content {
    position: relative;
    padding-top: 6rem
}

.episode-box {
    position: relative;
    width: 46.667%;
    height: 41rem;
    z-index: 21
}

.episode-box .episode-box-inner {
    position: relative;
    padding: 5rem;
    background: #fff;
    border: .3rem solid #000;
    border-radius: 3rem;
    margin: 0 .75rem .75rem 0;
    z-index: 1
}

.episode-box::after {
    content: "";
    position: absolute;
    background: #000;
    border: .3rem solid #000;
    border-radius: 3rem;
    z-index: 0;
    right: 1.75rem;
    bottom: 0;
    width: calc(100% - 4.5rem);
    height: calc(100% - .75rem)
}

.episode-box p {
    line-height: 2.125
}

.episode-box .episode-box-tit {
    display: inline-block;
    border-radius: 1.5rem;
    padding: 1.6rem;
    line-height: 1;
    color: #fff;
    margin-bottom: 2rem
}

.episode-box .episode-box-tit.bg-blue {
    background: #2abed4
}

.episode-box .episode-box-tit.bg-green {
    background: #44c868
}

.episode .episode-chara02 {
    position: absolute;
    width: 23.74887rem;
    z-index: 21;
    top: -17.5rem;
    left: 0
}

.episode .episode-chara03 {
    position: absolute;
    width: 17.34515rem;
    z-index: 2;
    top: -13.5rem;
    right: 1.5rem
}

.episode-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden
}

.episode-box.is-open .episode-text {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible
}

@media screen and (max-width:767px) {
    .episode {
        aspect-ratio: 375/1237.7124;
        margin-top: -3rem
    }

    .episode .bg-img .episode-grass .episode-grass01 {
        position: absolute;
        top: 3rem;
        left: -2rem;
        width: 40%
    }

    .episode .bg-img .episode-grass .episode-grass02 {
        position: absolute;
        top: -2rem;
        right: -1rem;
        width: 31.2%
    }

    .episode .sec-tit {
        letter-spacing: 0
    }

    .episode .sec-tit .line .before-fix {
        margin-left: -1.5rem
    }

    .episode .wrap {
        padding-top: 39rem
    }

    .episode .episode-chara01 {
        position: absolute;
        width: 33.333%;
        z-index: 12;
        top: 22.5rem;
        left: 32%
    }

    .episode .episode-chara01-fukidashi {
        position: absolute;
        width: 15.069rem;
        top: -11rem;
        left: 4rem
    }

    .episode-box {
        margin: 0 1%
    }

    .episode-box .episode-box-inner {
        position: relative;
        padding: 4rem 3rem
    }

    .episode-box .episode-box-tit {
        display: inline-block;
        border-radius: 1rem;
        padding: 1.25rem 2rem;
        line-height: 1;
        color: #fff;
        margin-bottom: 1rem;
        font-size: 1.084rem
    }

    .episode-box p {
        line-height: 2.125;
        font-size: 1.4rem
    }

    .episode .episode-chara02 {
        display: none
    }

    .episode-wrap .slick-list {
        padding-top: 13rem
    }

    .episode-content {
        padding-top: 0
    }

    .episode .episode-chara03 {
        position: absolute;
        width: 11.34515rem;
        z-index: 31;
        top: .5rem;
        right: auto;
        left: 50%;
        transform: translateX(-50%)
    }

    .episode-content .slick-next,.episode-content .slick-prev {
        top: 33rem!important
    }
}

.op {
    position: relative;
    aspect-ratio: 1640/1714;
    margin-top: -3rem;
    z-index: 119
}

.op .bg-img {
    z-index: 0
}

.op .bg-img .op-grass {
    z-index: 1
}

.op .bg-img .op-grass,.op .bg-img .op-grass .grass01,.op .bg-img .op-grass .grass02 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%
}

.op .op-cloud .cloud01,.op .op-cloud .cloud02,.op .op-cloud .cloud03,.op .op-cloud .cloud04 {
    position: absolute;
    display: block;
    width: 24.80143rem;
    animation: cloudFloat 6s ease-in-out infinite
}

.op .op-cloud .cloud01 {
    top: 13rem;
    left: 12rem
}

.op .op-cloud .cloud02 {
    top: 12rem;
    right: 23rem
}

.op .op-cloud .cloud03 {
    top: 33rem;
    left: -5rem
}

.op .op-cloud .cloud04 {
    top: 22rem;
    right: -7rem
}

.op .wrap {
    padding-top: 14rem
}

.op .content {
    max-width: 120rem;
    z-index: 11
}

.op .op-tit {
    text-align: center;
    font-size: 5.6rem;
    line-height: 1.4;
    margin-bottom: 4rem
}

.op .op-content {
    padding-top: 8rem
}

.op .op-box,.op .op-deco-box {
    width: 46.667%;
    height: 28rem
}

.op .op-box .op-wide-btn {
    width: 100%;
    height: 15rem;
    margin-bottom: 4rem
}

.op .op-box .op-btn {
    width: 47.14%;
    height: 8.8rem
}

.op .info-box h4,.op .op-box .op-btn a,.op .op-box .op-wide-btn a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center
}

.op .op-box .op-btn a,.op .op-box .op-wide-btn a {
    width: 100%;
    height: 100%;
    position: relative;
    letter-spacing: .4rem;
    text-align: center
}

.op .op-box .op-wide-btn a {
    background: #f3f000;
    border: .331rem solid #000;
    border-radius: 7.5rem;
    font-size: 2.8rem;
    line-height: 1.28
}

.op .op-box .op-btn.bg-black a,.op .op-box .op-btn.bg-purple a {
    border: .331rem solid #000;
    border-radius: 4.4rem;
    font-size: 2.54rem;
    color: #fff
}

.op .op-box .op-btn.bg-black a {
    background: #000
}

.op .op-box .op-btn.bg-purple a {
    background: #562d94
}

.op .op-box .op-btn a::after,.op .op-box .op-wide-btn a::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 2.5rem;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem
}

.op .op-box .op-wide-btn a::after {
    background: url(../img/op-btn-arrow01.svg)no-repeat center center/100%
}

.op .op-box .op-btn.bg-black a::after {
    background: url(../img/op-btn-arrow02.svg)no-repeat center center/100%
}

.op .op-box .op-btn.bg-purple a::after {
    background: url(../img/op-btn-arrow03.svg)no-repeat center center/100%
}

.op .op-deco-box {
    position: relative
}

.op .op-deco-box .op-chara01 {
    width: 47.2025%;
    position: absolute;
    top: 5rem;
    left: 9rem
}

.op .op-deco-box .op-chara01-fukidashi {
    width: 36%;
    position: absolute;
    top: -4.5rem;
    left: 0
}

.op .op-deco-box .op-chara02 {
    width: 51.9435%;
    position: absolute;
    top: -13rem;
    right: -6rem
}

.op .op-deco-box .op-chara02-fukidashi {
    width: 28.6%;
    height: 10.62rem;
    position: absolute;
    top: -12.5rem;
    right: 14rem
}

.op .info-box {
    background: url(../img/op-info-bg.svg)no-repeat center center/100%;
    aspect-ratio: 1204.85/905.013;
    padding: 8rem 8rem 10rem;
    margin-top: 14rem
}

.op .info-box h3 {
    width: 43%;
    margin: 0 auto 3.5rem
}

.op .info-box h4 {
    width: 44.36rem;
    height: 8.3rem;
    margin: 0 auto 6rem;
    background: url(../img/op-info-subtit-bg.svg)no-repeat center center/100%;
    font-size: 2.2rem;
    color: #fff
}

.op .info-box h4 span {
    margin-top: -.25rem
}

.op .info-detail-box {
    position: relative;
    width: 43.46%
}

.op-info-chara01 {
    position: absolute;
    width: 20.6135rem;
    height: 21.68717rem;
    top: -20rem;
    left: 5rem
}

.op-info-chara02 {
    position: absolute;
    width: 18.3606rem;
    height: 35.23533rem;
    top: -25rem;
    right: 5rem
}

.op .info-detail-box:first-child {
    width: calc(43.46% + 6.5rem);
    padding-right: 6.5rem;
    border-right: .262rem dotted #000
}

.op .info-detail-box h5 {
    width: 100%;
    height: 9.75rem;
    background: url(../img/op-info-keyword-bg.svg)no-repeat center center/100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    padding-top: 2.3rem;
    font-size: 2.533rem
}

.op .info-tab-wrap {
    width: 100%;
    margin: 0 auto
}

.op .tab-buttons {
    display: flex;
    position: relative;
    z-index: 1;
    align-items: flex-end
}

.op .tab-btn,.op .tab-content-wrapper {
    border: .3rem solid #000;
    position: relative
}

.op .tab-btn {
    flex: 1;
    padding: 1rem 0;
    font-size: 1.5rem;
    border-radius: 1.3rem 1.3rem 0 0;
    cursor: pointer;
    background-color: #a89bc9;
    bottom: -.2rem;
    z-index: 1;
    height: 3.68rem;
    box-sizing: border-box;
    transition: .3s;
    width: calc(50% + .15rem)
}

.op .tab-btn.btn01 {
    background-color: #fccccd;
    color: #f25d61;
    z-index: 3;
    margin-right: -.15rem
}

.op .tab-btn.btn02 {
    background-color: #b3a0cf;
    color: #562d94;
    z-index: 3;
    margin-left: -.15rem
}

.op .tab-btn.is-active,.op .tab-btn:hover {
    z-index: 3;
    padding: 2rem 0;
    color: #fff;
    height: 5.724rem
}

.op .tab-btn.btn01.is-active,.op .tab-btn.btn01:hover {
    background-color: #f25d61
}

.op .tab-btn.btn02.is-active,.op .tab-btn.btn02:hover {
    background-color: #562d94
}

.op .tab-content-wrapper {
    border-radius: 0 0 1.3rem 1.3rem;
    z-index: 2
}

.op .tab-content-wrapper .bg-pink {
    background-color: #fce1e5
}

.op .tab-content-wrapper .bg-navy {
    background-color: #b3a0cf
}

.op .tab-panel {
    padding: 2.4rem;
    border-radius: 0 0 1.3rem 1.3rem;
    display: none
}

.op .tab-panel.is-active {
    display: block
}

.op .btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem
}

.op .tag-btn {
    display: block;
    padding: 1.2rem;
    font-size: 1.5rem;
    color: #fff;
    text-decoration: none;
    text-align: center;
    border-radius: 1rem;
    transition: .3s;
    background-color: #562d94
}

.op .bg-pink .tag-btn {
    background-color: #f25d61
}

.op .tag-btn:hover {
  background-color: #fff;
  color: #562d94;
}

.op .bg-pink .tag-btn:hover {
    background-color: #fff;
    color: #f25d61;
}

.op .info-detail-banner {
    position: relative;
    z-index: 1;
    margin-bottom: 2.6rem
}

@media screen and (max-width:767px) {
    .op {
        position: relative;
        aspect-ratio: 375/1477.968;
        margin-top: -9rem
    }

    .op .op-tit {
        text-align: center;
        font-size: 3rem;
        line-height: 1.4;
        margin-bottom: 2rem
    }

    .op .op-content {
        padding-top: 2.5rem;
        width: 89.2%;
        margin: 0 auto
    }

    .op .op-box {
        width: 100%;
        height: auto;
        margin-bottom: 2rem
    }

    .op .op-box .op-wide-btn {
        width: 100%;
        height: 8.1rem;
        margin-bottom: 2rem
    }

    .op .op-box .op-wide-btn a {
        font-size: 1.515rem
    }

    .op .op-box .op-btn {
        height: 4.8rem
    }

    .op .op-box .op-btn a::after,.op .op-box .op-wide-btn a::after {
        right: 1rem;
        width: 2rem;
        height: 2rem
    }

    .op .op-box .op-btn a {
        font-size: 1.375rem!important
    }

    .op .op-box .op-btn a span {
        margin-left: -1rem
    }

    .op .op-box .op-btn.bg-purple a {
        letter-spacing: 0
    }

    .op .op-cloud .cloud01 {
        width: 19.8rem;
        right: -7rem;
        top: 6rem;
        left: auto
    }

    .episode .cloud01 {
        position: absolute;
        width: 19.8rem;
        right: -7rem;
        bottom: -3rem;
        left: auto;
        animation: cloudFloat 6s ease-in-out infinite;
        z-index: 100
    }

    .op .op-cloud .cloud02 {
        width: 16.8rem;
        left: -10rem;
        top: 30rem
    }

    .op .op-cloud .cloud03,.op .op-cloud .cloud04,.op-info-chara01,.op-info-chara02 {
        display: none
    }

    .op .op-deco-box {
        width: 100%;
        height: 15rem
    }

    .op .op-deco-box .op-chara01 {
        width: 43.26%;
        position: absolute;
        top: 12rem;
        left: 3rem
    }

    .op .op-deco-box .op-chara01-fukidashi {
        width: 40%;
        position: absolute;
        top: 6rem;
        left: -2rem
    }

    .op .op-deco-box .op-chara02 {
        width: 42.9435%;
        position: absolute;
        top: 2.5rem;
        right: 0
    }

    .op .op-deco-box .op-chara02-fukidashi {
        width: 33.6%;
        height: 10.62rem;
        position: absolute;
        top: .5rem;
        right: 9.5rem
    }

    .op .info-box {
        background: url(../img/op-info-bg_sp.svg)no-repeat top center/100%;
        aspect-ratio: 306/940;
        padding: 4rem 3rem;
        margin-top: 14rem;
        width: 100%
    }

    .op .info-detail-box {
        width: 100%!important;
        padding: 0
    }

    .op .info-detail-box:first-child {
        border-right: none;
        padding: 0 0 3rem
    }

    .op .info-box h3 {
        width: 100%;
        margin: 0 auto 2rem
    }

    .op .info-box h4,.op .info-detail-box h5 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center
    }

    .op .info-box h4 {
        width: 100%;
        margin: 0 auto 1.5rem;
        background: url(../img/op-info-subtit-bg_sp.svg)no-repeat center center/100%;
        align-items: center;
        font-size: 1.448rem;
        color: #fff;
        text-align: center;
        line-height: 1.33
    }

    .op .info-detail-box h5 {
        width: 88%;
        height: 5rem;
        background: url(../img/op-info-keyword-bg.svg)no-repeat center center/100%;
        align-items: flex-start;
        padding-top: 1.3rem;
        font-size: 1.148rem;
        margin: 0 auto 1rem
    }

    .op .tab-btn,.op .tab-btn.is-active,.op .tab-btn:hover {
        padding: 0;
        font-size: 1.224rem;
        height: 5.1rem;
        line-height: 1.38
    }

    .op .tab-panel {
        padding: 2rem 1.2rem
    }

    .op .tag-btn {
        padding: .6rem .8rem;
        border-radius: 1rem;
        font-size: 1.224rem;
        line-height: 1.384;
        min-height: 4.6rem;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .op .btn-grid {
        gap: .8rem
    }

    .op .info-detail-banner {
        margin-bottom: 1.3rem
    }
}

.end-block::after,footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%
}

.end-block::after {
    height: 100%;
    bottom: 0;
    background: #ee9d43;
    opacity: .6;
    mix-blend-mode: multiply;
    z-index: 0
}

.end-block {
    margin: -15rem 0-26rem;
    background: #ffe8ce
}

.end-block .bg-img {
    z-index: 0
}

.end-block .end-block-img {
    z-index: 0;
    position: relative
}

.end-block .end-block-bird {
    position: absolute;
    top: 20rem;
    left: 35rem;
    width: 6.81%;
    z-index: 10
}

@media screen and (max-width:767px) {
    .end-block {
        margin: -45.5rem 0-2.5rem
    }

    .end-block .end-block-bird {
        position: absolute;
        top: auto;
        left: 4rem;
        width: 8.81%;
        z-index: 10;
        bottom: 20rem
    }
}

footer {
    position: relative;
    background: #f5555a;
    color: #fff;
    padding: 7rem 0 14rem
}

footer::before {
    display: block;
    height: 12.3rem;
    transform: translateY(-98%);
    background: url(../img/foot-bg-deco.svg)no-repeat center center/100%
}

footer .wrap.flex_box {
    align-items: flex-end
}

footer .left-box {
    width: 19.038%
}

footer .left-box .foot-logo {
    width: 19.57162rem;
    margin-bottom: 3rem
}

footer .left-box .address {
    padding-left: 5rem
}

footer .left-box .address p {
    font-size: 1.4rem;
    line-height: 2.143;
    margin-bottom: -.75rem
}

footer .left-box .address .foot-name {
    font-size: 2rem;
    margin-bottom: .5rem
}

footer .foot-menu {
    width: 67.41667%
}

footer .foot-menu .foot-menu-box {
    width: 28.395%
}

footer .foot-menu .foot-menu-box .menu-tit {
    font-size: 1.6rem;
    padding-bottom: 1rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid #fff
}

footer .foot-menu .foot-menu-box ul li:not(:last-child) {
    margin-bottom: 2.4rem
}

footer .foot-menu a {
    transition: .3s
}

@media screen and (max-width:767px) {
    footer {
        padding: 5rem 0
    }

    footer::before {
        height: 2.75rem
    }

    footer .left-box {
        width: 80.8%;
        margin: 2rem auto 0;
        order: 2;
        text-align: center
    }

    footer .foot-menu {
        width: 80.8%;
        margin: 0 auto;
        order: 1
    }

    footer .foot-menu .foot-menu-box {
        width: 100%;
        margin-bottom: 3rem
    }

    footer .foot-menu .foot-menu-box .menu-tit {
        font-size: 1.4rem;
        padding-bottom: .5rem;
        margin-bottom: 2rem;
        border-bottom: 1px solid #fff
    }

    footer .foot-menu .foot-menu-box ul li:not(:last-child) {
        margin-bottom: 1.8rem
    }

    footer .left-box .foot-logo {
        margin: 0 auto 2rem
    }

    footer .left-box .foot-logo img {
        margin-left: -1rem
    }

    footer .left-box .address {
        padding-left: 0
    }

    footer .left-box .address .foot-name {
        margin-bottom: 1rem;
        line-height: 1
    }

    footer .left-box .address p {
        font-size: 1.4rem;
        line-height: 1.6;
        margin-bottom: -.75rem
    }
}

#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #bbf9fc;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    opacity: 1;
    visibility: visible;
    transition: opacity .5s ease,visibility .5s ease
}

#loading.is-loaded {
    opacity: 0;
    visibility: hidden
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(84,27,134,.2);
    border-top-color: #541b86;
    border-radius: 50%;
    animation: spin 1s linear infinite
}

.btn-open-campus,.header-logo,.menu-btn,.mv .bg-img,.mv .content,.sns-box,.sns-bubble {
    opacity: 0
}

.mv .bg-img,.mv .content {
    transform: translateY(40px);
    transition: opacity .8s ease,transform .8s ease
}

.mv .bg-img.is-show,.mv .content.is-show {
    opacity: 1;
    transform: translateY(0)
}

.mv .content {
    transform: translateY(30px);
    padding-top: 16.5rem
}

@media screen and (max-width:767px) {
    .mv .content {
        transform: translateY(30px);
        transition: opacity .8s ease,transform .8s ease;
        padding-top: 8.5rem
    }
}

.header-logo,.menu-btn,.sns-box,.sns-bubble {
    transform: translateY(-20px);
    transition: opacity .6s ease,transform .6s ease
}

.header-logo.is-show {
    transition-delay: 0s;
    opacity: 1;
    transform: translateY(0)
}

.sns-bubble.is-show {
    transition-delay: .1s
}

.sns-box.is-show,.sns-bubble.is-show {
    opacity: 1;
    transform: translateY(0)
}

.sns-block .sns-box:nth-of-type(1).is-show {
    transition-delay: .2s
}

.sns-block .sns-box:nth-of-type(2).is-show {
    transition-delay: .3s
}

.sns-block .sns-box:nth-of-type(3).is-show {
    transition-delay: .4s
}

.menu-btn.is-show {
    transition-delay: .5s;
    opacity: 1;
    transform: translateY(0)
}

.menu-btn.is-show:hover {
    transition-delay: 0s;
    transform: translateY(0);
    opacity: 0.7;
}

.btn-open-campus {
    transform: translateY(30px);
    transition: opacity .8s ease,transform .8s ease
}

.btn-open-campus.is-show {
    opacity: 1;
    transform: translateY(0);
    animation: floatAnimation 3s ease-in-out infinite .8s
}

.department-chara01-fukidashi,.is-anm {
    opacity: 0;
    transition: opacity .8s ease,transform .8s ease
}

.is-anm.fast {
    transition-duration: .3s!important
}

.is-anm.bottom {
    transform: translateY(40px)
}

.is-anm.top {
    transform: translateY(-40px)
}

.is-anm.left {
    transform: translateX(-40px)
}

.is-anm.right {
    transform: translateX(40px)
}

.is-anm.is-action {
    opacity: 1!important;
    transform: translate(0,0)!important
}

.about-box figure {
    overflow: hidden;
    display: block
}

.department-chara01-fukidashi {
    transform: translate(-30px,30px)
}

.department-chara01-fukidashi.is-action-fukidashi {
    opacity: 1;
    transform: translate(0,0)
}

.department-chara02.is-action-shake {
    animation: charaHeadBanging .8s ease-in-out forwards
}

.department-cloud {
    animation: cloudFloat 6s ease-in-out infinite
}

.department-box {
    position: relative
}

.department-box .department-hover-chara {
    width: 21.42061rem;
    position: absolute;
    top: 8rem;
    right: -14.42061rem;
    opacity: 0;
    transform: translateX(-100%);
    transition: opacity .4s ease,transform .5s ease;
    pointer-events: none
}

.department-box:hover .department-hover-chara {
    opacity: 1;
    animation: charaPopSlide .6s ease-out forwards
}

.department-bird {
    animation: flyEight 8s ease-in-out infinite
}

.data-qualification,.data-qualification li {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.data-qualification {
    padding-top: 1.5rem
}

.data-qualification li {
    align-items: center
}

.data-qualification .data-qualification-tit {
    font-size: 1.361rem;
    line-height: 1.375;
    margin-right: 1rem
}

.data-qualification .data-qualification-rate {
    line-height: 1;
    text-align: center;
    white-space: nowrap
}

.data-qualification .data-qualification-rate span {
    line-height: 1
}

.data-bottombox .data-box-right p span,.data-box-rate p span,.data-box-right .data-box-textwrap p span span,.data-qualification .data-qualification-rate,p.data-box-appeal span {
    display: inline-block;
    vertical-align: baseline;
    opacity: 0;
    will-change: transform,opacity;
    transform-origin: center center
}

.data-bottombox .data-box-right p span.is-animated,.data-box-rate p span.is-animated,.data-box-right .data-box-textwrap p span span.is-animated,.data-qualification .data-qualification-rate.is-animated,p.data-box-appeal span.is-animated {
    animation: beyonPop .8s cubic-bezier(.175,.885,.32,1.275) forwards
}

.js-spot-slider.flex_box,.spot-item h3 .block {
    display: block
}

.spot-slide {
    margin: 0 .25%;
    padding: 14.5rem 4.7rem 0 4rem;
    height: 100%
}

.spot-slide.bg01 {
    background: url(../img/spot-box-bg01.png)no-repeat center center/100% 100%
}

.spot-slide.bg02 {
    background: url(../img/spot-box-bg02.png)no-repeat center center/100% 100%
}

.spot-slide.bg03 {
    background: url(../img/spot-box-bg03.png)no-repeat center center/100% 100%
}

.spot-item {
    width: 100%;
    height: 48.15633rem!important
}

.spot-item figure,.spot-item h3 {
    display: flex;
    align-items: center;
    justify-content: center
}

.spot-item figure {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 2rem;
    overflow: hidden
}

.spot-item figure img {
    height: 100%;
    object-position: center
}

.spot-item h3 {
    font-size: 2.8rem;
    line-height: 1.4em;
    text-align: center;
    margin: 2.2rem 0;
    letter-spacing: .1em;
    min-height: calc(2.8rem*1.4*2)
}

.spot-item p {
    letter-spacing: .08rem;
    line-height: 1.75em
}

@media screen and (max-width:767px) {
    .spot-item h3 {
        font-size: 2rem;
        margin: 0
    }

    .spot-item p {
        font-size: 1.147rem
    }

    .spot-slide {
        aspect-ratio: 247/431;
        padding: 10rem 3rem 3rem
    }

    .spot-item figure {
        border-radius: 1rem
    }
}

.interview-bg02 {
    animation: swayBg 4s ease-in-out infinite;
    will-change: transform
}

.interview-box.is-hidden {
    display: none!important
}

.episode-content .episode-wrap.slick-slider {
    margin: 0-15px;
    display: block;
    z-index: 30
}

.episode-content .episode-wrap .slick-track {
    display: flex!important
}

.episode-content .episode-wrap .episode-box {
    padding: 0 15px;
    box-sizing: border-box;
    float: none!important;
    margin: 0 .25%
}

.episode-content .episode-box-inner {
    height: 100%;
    box-sizing: border-box
}

@media screen and (max-width:768px) {
    .episode-content .episode-wrap.slick-slider {
        margin: 0-10px
    }

    .episode-content .episode-wrap .episode-box {
        padding: 0 10px
    }
}

.op-tit {
    opacity: 0;
    transform: scale(.5);
    will-change: transform,opacity
}

.op-tit.is-action {
    animation: opTitPop .8s cubic-bezier(.34,1.56,.64,1) forwards
}

.op-deco-box .op-chara01,.op-deco-box .op-chara01-fukidashi,.op-deco-box .op-chara02,.op-deco-box .op-chara02-fukidashi {
    opacity: 0;
    transform: translateX(120px);
    transition: transform .8s cubic-bezier(.25,1,.5,1),opacity .8s ease;
    will-change: transform,opacity
}

.op-deco-box.is-action .op-chara01 {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0s
}

.op-deco-box.is-action .op-chara02 {
    opacity: 1;
    transform: translateX(0);
    transition-delay: .2s
}

.op-deco-box.is-action .op-chara01-fukidashi {
    opacity: 1;
    transform: translateX(0);
    transition-delay: .4s
}

.op-deco-box.is-action .op-chara02-fukidashi {
    opacity: 1;
    transform: translateX(0);
    transition-delay: .5s
}

@media (hover:hover) and (pointer:fine) {
    .info-detail-banner a,.more-btn a,.op-box .op-btn a,.op-box .op-wide-btn a {
        transition: transform .3s cubic-bezier(.25,1,.5,1)
    }

    .info-detail-banner a:hover,.more-btn a:hover,.op-box .op-btn a:hover,.op-box .op-wide-btn a:hover {
        transform: scale(1.05)
    }

    .info-detail-banner a {
        display: block;
        overflow: hidden
    }
}

.end-block,.mv {
    position: relative
}

.end-block .bg-img {
    animation: floatCloud 4s ease-in-out infinite;
    will-change: transform
}

.end-block .end-block-bird {
    animation: figureEightBird 6s ease-in-out infinite;
    will-change: transform
}

.mv {
    overflow: hidden
}

.mv .bg-img {
    width: 100%
}

.mv-deer,.mv-horse {
    bottom: 0;
    opacity: 0;
    transition: transform .8s cubic-bezier(.25,1,.5,1),opacity .8s ease
}

.mv-horse {
    left: 5%;
    transform: translate(-50px,80px)
}

.mv-deer,.mv-deer-back {
    right: 5%;
    transform: translate(50px,80px)
}

.mv-deer-back.is-show,.mv-deer.is-show,.mv-horse.is-show {
    opacity: 1;
    transform: translate(0,0)
}

.mv-main {
    top: 30%;
    left: 50%;
    transform: translate(0,-100px) scale(1.6);
    opacity: 0;
    z-index: 10;
    transition: transform .7s cubic-bezier(.175,.885,.32,1.275),opacity .5s ease
}

.mv-main.is-show {
    opacity: 1;
    transform: translate(0,0) scale(1)
}

.mv-main .main-eye-blink,.mv-main .main-eye-normal {
    display: block;
    width: 100%
}

.mv-main .main-eye-blink {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
}

.mv-main.is-blinking .main-eye-blink {
    opacity: 1
}

.mv-main.is-blinking .main-eye-normal {
    opacity: 0
}

.mv-judo .judo-body {
    animation: judoShake 1.8s ease-in-out infinite alternate
}

.mv-judo .judo-fuki,.mv-tanken .tanken-z {
    position: absolute;
    opacity: 0;
    transition: opacity .3s ease,transform .3s ease
}

.mv-judo .judo-fuki {
    transform: scale(.8)
}

.mv-judo .judo-fuki.is-active {
    opacity: 1;
    transform: scale(1)
}

.mv-tanken .tanken-z {
    transform: translateY(5px)
}

.mv-tanken .tanken-z.is-show {
    opacity: 1;
    transform: translateY(0)
}

.mv-deer,.mv-horse {
    position: absolute;
    z-index: 1
}

.mv-horse {
    top: 14rem;
    left: 12rem;
    width: 48rem
}

.mv-deer {
    top: 13rem;
    right: 16rem;
    width: 30rem
}

.modal-body-area .flex_box::after,.mv-main {
    position: absolute;
    transform: translateX(-50%)
}

.mv-main {
    top: 56rem;
    left: calc(50% - 15rem);
    width: 30rem
}

.mv-judo,.mv-teacher {
    position: absolute;
    z-index: 5;
    top: 67rem;
    left: 4rem;
    width: 26rem
}

.mv-teacher {
    animation: trainGatanGoton 1.2s ease-in-out infinite;
    top: 101rem;
    left: 12rem;
    width: 34rem
}

.mv-bird,.mv-tanken {
    position: absolute;
    z-index: 5;
    top: 89rem;
    right: 54rem;
    width: 28rem
}

.mv-bird {
    animation: figureEight 8s ease-in-out infinite;
    top: 18rem;
    right: 46rem;
    width: 10rem
}

@media screen and (max-width:767px) {
    .mv .mv-cloud {
        z-index: 1
    }

    .mv .mv-mountain {
        z-index: 0
    }

    .mv-horse {
        position: absolute;
        top: 27.25rem;
        left: 0;
        width: 11rem;
        z-index: 1
    }

    .mv-deer,.mv-deer-back {
        position: absolute;
        top: 26.25rem;
        right: 2rem;
        width: 9.05rem;
        z-index: 2
    }

    .mv-main {
        position: absolute;
        top: 31.5rem;
        left: calc(50% - 4.5rem);
        width: 9.189rem
    }

    .mv-judo {
        top: 42rem;
        left: 1.5rem;
        width: 6.4rem
    }

    .mv-judo,.mv-tanken,.mv-teacher {
        position: absolute;
        z-index: 5
    }

    .mv-teacher {
        top: 50.5rem;
        left: 1.5rem;
        width: 7.57rem
    }

    .mv-tanken {
        top: 46rem;
        right: 15.5rem;
        width: 6.9rem
    }

    .mv-bird {
        top: 17rem;
        right: 3rem;
        width: 3.8rem;
        left: auto
    }

    .mv-grass {
        position: absolute;
        top: 44.5rem;
        width: 6.18rem;
        left: -2rem;
        z-index: 5
    }
}

.judo-body,.tanken-body {
    position: absolute
}

.interview-modal,.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.interview-modal {
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease,visibility .3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.interview-modal.is-active {
    opacity: 1;
    visibility: visible
}

.modal-overlay {
    background-color: rgba(191,238,232,.9);
    z-index: 1
}

.modal-close-top {
    position: absolute;
    top: 3rem;
    right: 3rem;
    width: 5.9rem;
    height: 5.9rem;
    background: 0 0;
    border: 0;
    cursor: pointer;
    z-index: 10000;
  transition: .3s;
}

.modal-close-top:hover {
  opacity: .7;
}

.modal-close-top::after,.modal-close-top::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5.9rem;
    height: 2px;
    background-color: #000
}

.modal-close-top::before {
    transform: translate(-50%,-50%) rotate(45deg)
}

.modal-close-top::after {
    transform: translate(-50%,-50%) rotate(-45deg)
}

.modal-container {
    position: relative;
    z-index: 2;
    width: 80rem;
    margin: 6rem auto;
    height: auto
}

.interview-modal .modal-content.yellow {
    background: url(../img/interview-bind-bg-yellow.svg)no-repeat top 2.5rem center/93%;
    width: 100%;
    aspect-ratio: 1006.2189/1820.8985;
    position: relative
}

.interview-modal .modal-content.pink {
    background: url(../img/interview-bind-bg-pink.svg)no-repeat top 2.5rem center/93%;
    width: 100%;
    aspect-ratio: 1006.2189/1820.8985;
    position: relative
}

.interview-modal .modal-content.lightblue {
    background: url(../img/interview-bind-bg-lightblue.svg)no-repeat top 2.5rem center/93%;
    width: 100%;
    aspect-ratio: 1006.2189/1820.8985;
    position: relative
}

.interview-modal .modal-content.turquoise {
    background: url(../img/interview-bind-bg-turquoise.svg)no-repeat top 2.5rem center/93%;
    width: 100%;
    aspect-ratio: 1006.2189/1820.8985;
    position: relative
}

.interview-modal .modal-content::after {
  content: '';
  width: 100%;
  aspect-ratio: 1006.2189/1820.8985;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.interview-modal .modal-content.yellow::after {
  background: url(../img/interview-bind-yellow.svg)no-repeat top center/100%;
}

.interview-modal .modal-content.pink::after {
  background: url(../img/interview-bind-pink.svg)no-repeat top center/100%;
}

.interview-modal .modal-content.lightblue::after {
  background: url(../img/interview-bind-lightblue.svg)no-repeat top center/100%;
}

.interview-modal .modal-content.turquoise::after {
  background: url(../img/interview-bind-turquoise.svg)no-repeat top center/100%;
}

.interview-modal .modal-top-bg-color {
  content: '';
  position: absolute;
  display: block;
  width: 93%;
  aspect-ratio: 920/300;
  top: 2.5rem;
  left: 3.5%;
  background-color: #a6e4ef;
}

.interview-modal .modal-top-cloud {
  content: '';
  position: absolute;
  display: block;
  width: 93%;
  aspect-ratio: 920/558.365;
  top: 2.5rem;
  left: 3.5%;
  background: url("../img/interview-cloud.svg")no-repeat top center/100%;
  animation: cloudFloat 6s ease-in-out infinite;
}

.interview-modal .modal-top-bg {
  content: '';
  position: absolute;
  display: block;
  width: 93%;
  aspect-ratio: 920/558.365;
  top: 2.5rem;
  left: 3.5%;
  background: url("../img/interview-illust.svg")no-repeat top center/100%;
}

.interview-modal .modal-top-bird {
  content: '';
  position: absolute;
  display: block;
  width: 5.95rem;
  aspect-ratio: 69.5/85.8;
  top: 7.5rem;
  right: 21.5rem;
  background: url("../img/interview-bird.svg")no-repeat top center/100%;
  animation: figureEightBird 6s ease-in-out infinite;
  will-change: transform;
}

.modal-scroll-body {
    height: auto;
    overflow: visible;
    padding: 49rem 10rem 0;
      position: relative;
    z-index: 99;
}

.modal-inner-target {
    aspect-ratio: 600/870
}

.modal-fukidashi {
    position: absolute;
    top: 11rem;
    left: 12.5rem;
    width: 26.74606rem;
    aspect-ratio: 327.4606/183.43;
    background: url(../img/interview-main-fukidashi.svg)no-repeat center center/100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 1rem
}

.modal-fukidashi p {
    font-size: 1.8rem;
    line-height: 1.833;
    text-align: center
}

.modal-thumb {
    position: absolute;
    top: 19.6rem;
    right: 11.5rem;
    width: auto;
    height: 41rem
}

.modal-thumb img {
    width: auto;
    height: 100%
}

.modal-profile {
    padding-bottom: 3rem;
    margin-bottom: 2rem;
    background: url(../img/interview-line.svg)no-repeat bottom center/100%
}

.modal-profile dt {
    font-size: 2.2rem;
    letter-spacing: .08em;
    line-height: 1.35
}

.modal-profile dd p {
    font-size: 2.2rem;
    letter-spacing: .08em;
    line-height: 1.35
}

.modal-text {
    font-size: 1.5rem;
    line-height: 1.75;
    margin-bottom: 2.5rem
}

.modal-body-area .flex_box {
    position: relative
}

.modal-body-area .flex_box::after {
    content: "";
    display: block;
    top: 0;
    bottom: 0;
    left: 50%;
    width: .2rem;
    height: 38.3167rem;
    background: url(../img/interview-flex-line.svg)no-repeat top center/100%
}

.modal-img-box {
    width: 44.25%;
    display: flex;
    flex-wrap: wrap
}

.modal-img-box .box {
    width: 100%;
    height: 18rem;
    border-radius: 1.6rem;
    overflow: hidden
}

.modal-img-box .box img,.spot-item figure img {
    width: 100%;
    object-fit: cover
}

.modal-img-box:last-child .box {
    order: 2
}

.modal-img-box .caption {
    width: 100%;
    aspect-ratio: 330.4253/229.0586;
    font-size: 1.3rem;
    line-height: 1.6;
    display: flex;
    align-items: center;
    letter-spacing: -.03rem
}

.modal-img-box:first-child .caption {
    background: url(../img/interview-sub-fukidashi01.svg)no-repeat center center/100%;
    padding: 3rem 2.1rem 0
}

.modal-img-box:last-child .caption {
    background: url(../img/interview-sub-fukidashi02.svg)no-repeat center center/100%;
    padding: 0 2.1rem 3rem;
    order: 1
}

.modal-img-box:first-child .box,.modal-img-box:last-child .caption {
    margin-bottom: 2rem
}

.modal-links-tit {
    margin: 3.25rem auto 1.25rem;
    background: #ffe1b0;
    border: .3rem solid #000;
    border-radius: .9rem;
    display: block;
    font-size: 1.6rem;
    text-align: center;
    line-height: 2.2
}

.modal-links li {
    margin-bottom: 1rem
}

.modal-links li a {
    font-size: 1.8rem;
    line-height: 1.35;
  transition: .3s;
}

.modal-links li a:hover {
  opacity: .7;
}

.modal-links li a::after {
    content: "";
    display: inline-block;
    width: 2rem;
    height: 2rem;
    margin: -.65rem .5rem 0;
    vertical-align: middle
}

.modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 5.4rem;
    height: 5.4rem;
    cursor: pointer;
    z-index: 5;
  transition: .3s;
}

.modal-nav:hover {
  opacity: .7;
}

.modal-nav.prev-btn {
    left: -10rem;
    background: url(../img/slide-arrow-previous.svg)no-repeat center center/100%
}

.modal-links li a::after,.modal-nav.next-btn {
    background: url(../img/slide-arrow-next.svg)no-repeat center center/100%
}

.modal-nav.next-btn {
    right: -10rem
}

.modal-nav:disabled {
    opacity: .3;
    cursor: default
}

.modal-bottom-close {
    text-align: center;
    margin-top: 12rem;
  transition: .3s;
}

.modal-bottom-close:hover {
  opacity: .7;
}

.btn-close-bottom {
    display: block;
    background: #f3f000;
    border: 3px solid #000;
    padding: 1.8rem;
    border-radius: 100px;
    position: relative;
    cursor: pointer;
    width: 30.85rem;
    margin: 0 auto;
    font-size: 2.086rem;
    letter-spacing: .1em;
    line-height: 1
}

.btn-close-bottom::after {
    content: "";
    background: url(../img/modal-bottom-close.svg)no-repeat center center/100%;
    width: 1.46rem;
    height: 1.46rem;
    position: absolute;
    top: 50%;
    right: 2.5rem;
    transform: translateY(-50%)
}

@media screen and (max-width:767px) {
  .department-modal .modal-container {
    width: 80.9%
  }
  .interview-modal .modal-container {
    width: 88%
  }
  .interview-modal .modal-content {
    aspect-ratio: 300.3852/1664.8111
  }
  .modal-fukidashi {
    top: 5rem;
    width: 19.86631rem;
    aspect-ratio: 198.6631/118.2713;
    background: url(../img/interview-main-fukidashi_sp.svg)no-repeat center center/100%
  }
  .modal-fukidashi p, .modal-links li a {
    font-size: 1.4rem
  }
  .modal-fukidashi, .modal-thumb, .modal-thumb::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
  }
  .modal-thumb {
    top: 16rem;
    right: auto;
    width: auto;
    height: 24.5552rem;
    padding-bottom: .15rem
  }
  .modal-thumb::after {
    content: "";
    width: 111%;
    height: .15rem
  }
  .modal-scroll-body {
    padding: 42.5rem 4.25rem 0
  }
  .modal-profile, .modal-thumb::after {
    background: url(../img/interview-line_sp.svg)no-repeat bottom center/100%
  }
  .modal-profile {
    padding-bottom: 2.25rem;
    margin-bottom: 2.25rem
  }
  .modal-profile dt {
    font-size: 1.8rem;
    text-align: center;
  }
  .modal-profile dd p {
    font-size: 1.8rem;
    text-align: center;
  }
  .modal-text {
    font-size: 1.45rem;
    margin-bottom: 2.5rem;
    line-height: 2
  }
  .modal-img-box {
    width: 100%
  }
  .modal-img-box .box {
    height: 16rem
  }
  .modal-img-box .caption {
    font-size: 1.1rem;
    line-height: 1.75
  }
  .modal-img-box:first-child .caption {
    background: url(../img/interview-sub-fukidashi01_sp.svg)no-repeat center center/100%;
    padding: 0 2rem 2.8rem;
    order: 1;
    margin-bottom: 1rem
  }
  .modal-img-box:first-child .box {
    order: 2;
    margin-bottom: 3rem
  }
  .modal-img-box:last-child .caption {
    background: url(../img/interview-sub-fukidashi02_sp.svg)no-repeat center center/100%;
    padding: 0 1.7rem 2.8rem;
    margin-bottom: 1rem
  }
  .modal-body-area .flex_box::after {
    content: none
  }
  .modal-links li a::after {
    content: "";
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    background: url(../img/slide-arrow-next.svg)no-repeat center center/100%;
    margin-left: .5rem;
    vertical-align: bottom
  }
  .modal-bottom-close {
    margin-top: 9rem
  }
  .btn-close-bottom {
    padding: 1.4rem;
    width: 20.85rem;
    font-size: 1.239rem
  }
  .btn-close-bottom::after {
    content: "";
    background: url(../img/modal-bottom-close.svg)no-repeat center center/100%;
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%)
  }
  .modal-close-top {
    top: 2rem;
    right: 3rem;
    width: 2.5rem;
    height: 2.5rem
  }
  .modal-close-top::after, .modal-close-top::before {
    width: 2.5rem
  }
  .modal-nav {
    width: 3.6rem;
    height: 3.6rem
  }
  .modal-nav.next-btn {
    right: -1.5rem
  }
  .modal-nav.prev-btn {
    left: -1.5rem
  }
  .modal-links-tit {
    margin: 3rem auto 1.5rem;
    font-size: 1.5rem;
    text-align: center
  }
  .modal-links li {
    margin-bottom: 1rem
  }
  .interview-modal .modal-content {
    aspect-ratio: 300.3852 / 1664.8111;
  }
  .interview-modal .modal-content.yellow {
    background: url(../img/interview-bind-bg-yellow_sp.svg)no-repeat top 1.0rem center/85%;
  }
  .interview-modal .modal-content.pink {
    background: url(../img/interview-bind-bg-pink_sp.svg)no-repeat top 1.5rem center/84%;
  }
  .interview-modal .modal-content.lightblue {
    background: url(../img/interview-bind-bg-lightblue_sp.svg)no-repeat top 1.5rem center/84%;
  }
  .interview-modal .modal-content.turquoise {
    background: url(../img/interview-bind-bg-turquoise_sp.svg)no-repeat top 1.5rem center/84%;
  }
  .interview-modal .modal-content::after {
    width: 92.5%;
    aspect-ratio: 300.3852 / 1884.8111;
    position: absolute;
    left: 3.25%;
  }
  .interview-modal .modal-content.yellow::after {
    background: url(../img/interview-bind-yellow_sp.svg)no-repeat top center/100%;
  }
  .interview-modal .modal-content.pink::after {
    background: url(../img/interview-bind-pink_sp.svg)no-repeat top center/100%;
  }
  .interview-modal .modal-content.lightblue::after {
    background: url(../img/interview-bind-lightblue_sp.svg)no-repeat top center/100%;
  }
  .interview-modal .modal-content.turquoise::after {
    background: url(../img/interview-bind-turquoise_sp.svg)no-repeat top center/100%;
  }
  .interview-modal .modal-top-bg-color {
    content: '';
    position: absolute;
    display: block;
    width: 86%;
    aspect-ratio: 300/280;
    top: 1.5rem;
    left: 7%;
    background-color: #a6e4ef;
  }
  .interview-modal .modal-top-cloud {
    width: 86%;
    aspect-ratio: 300/367;
    top: 1.5rem;
    left: 7%;
    background: url("../img/interview-cloud_sp.svg")no-repeat top center/100%;
  }
  .interview-modal .modal-top-bg {
    width: 86%;
    aspect-ratio: 300/367;
    top: 1.5rem;
    left: 7%;
    background: url("../img/interview-illust_sp.svg")no-repeat top center/100%;
  }
  .interview-modal .modal-top-bird {
    width: 2.95rem;
    aspect-ratio: 69.5 / 85.8;
    top: 12.5rem;
    right: 4.5rem;
  }
  .modal-inner-target {
    aspect-ratio: auto;
    min-height: 137rem
  }
}

.department-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease,visibility .3s ease;
    overflow-y: auto;
    overflow-x: hidden!important;
    -webkit-overflow-scrolling: touch
}

.department-modal.is-active {
    opacity: 1;
    visibility: visible
}

.department-modal .modal-overlay {
    background-color: rgba(237,238,223,.9)
}

.department-modal .department-box-detail h4 {
    font-size: 1.7rem;
    line-height: 1.65;
    padding-top: 1.5rem
}

.jingaku .department-box-detail h4 {
    color: #e65247
}

.kokusai .department-box-detail h4 {
    color: #ffb43a
}

.taiku .department-box-detail h4 {
    color: #319ff5
}

.iryou .department-box-detail h4 {
  color: #17cdd4;
  margin-right: -2rem;
  letter-spacing: .05em;
}

.department-modal .department-box {
    background: url(../img/department-modal-box-bg.svg)no-repeat center center/contain;
    height: auto;
    padding: 3rem 2rem;
    margin-top: 2.1rem
}

.department-modal .department-box.kokusai {
    background: url(../img/department-modal-box-bg02.svg)no-repeat center center/contain
}
.department-modal .department-box.iryou {
    background: url(../img/department-modal-box-bg03.svg)no-repeat center center/contain;
}

.department-modal .department-box-detail {
    width: 100%;
    padding-left: 0
}

.department-modal .department-box-detail p {
    font-size: 1.15rem;
    margin-top: 1.8rem;
    line-height: 1.86
}

.department-modal .department-box-detail ul {
    margin-top: 2.5rem;
    padding-right: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.department-modal .department-box-detail ul li {
    width: 48.525%;
    height: 4.5rem;
    font-size: 1.3rem;
    margin-bottom: 1.2rem;
    margin-right: 0
}

.department-box-detail ul li a {
    transition: .3s
}

.department-box-detail ul li a:hover {
    color: #fff
}

.jingaku .department-box-detail ul li a {
    background: #fadcda
}

.kokusai .department-box-detail ul li a {
    background: #fff0d8
}

.taiku .department-box-detail ul li a {
    background: #d6ecfd
}

.iryou .department-box-detail ul li a {
    background: #d1f5f6
}

.jingaku .department-box-detail ul li a:hover {
    background: #e65247
}

.kokusai .department-box-detail ul li a:hover {
    background: #ffb43a
}

.taiku .department-box-detail ul li a:hover {
    background: #319ff5
}

.iryou .department-box-detail ul li a:hover {
    background: #17cdd4
}

.department-modal .department-box-link {
    width: 100%
}

.department-modal .department-box-link a {
    width: 100%;
    background: 0 0;
    border: 0;
    border-radius: 0;
    margin: 1rem auto 0;
    padding: 0;
    font-size: 1.239rem;
    display: flex;
    justify-content: center;
    align-items: center
}

.department-modal .department-box-link a::after {
    content: none
}

.department-modal .department-box-link a .link-blank {
    width: 3rem;
    height: 3rem;
    margin-left: .8rem
}

.department-modal .modal-bottom-close {
    margin-top: 2rem
}

.episode-box-tit.bg-pink {
    background-color: #e65247;
    color: #fff
}

.episode-box .episode-text-wrap {
    position: relative;
    max-height: 21rem;
    overflow: hidden;
    transition: max-height .4s ease
}

.episode-box.is-open .episode-text-wrap {
    max-height: 200rem
}

.btn-more-episode {
    display: block;
    margin: 15px auto 0;
    padding: 8px 20px;
    background-color: #f2f2f2;
    color: #333;
    border: 0;
    border-radius: 2rem;
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .3s ease
}

.btn-more-episode:hover {
    background-color: #e0e0e0
}

.episode-content .slick-track {
    display: flex!important;
    align-items: flex-start
}

.episode-content .slick-slide {
    height: auto!important
}

.episode-content .slick-next,.episode-content .slick-prev {
    top: 22rem!important
}

.episode-content .slick-prev {
    left: -5rem!important
}

.episode-content .slick-next {
    right: -5rem!important
}

@media screen and (max-width:767px) {
    .episode-content .slick-list {
        height: auto!important
    }

    .episode-content .slick-track {
        display: flex!important;
        align-items: flex-start!important;
        height: auto!important
    }

    .episode-box,.episode-content .slick-slide {
        height: auto!important
    }

    .episode-content .slick-next,.episode-content .slick-prev {
        top: 31rem!important
    }

    .episode-content .slick-prev {
        left: 1rem!important
    }

    .episode-content .slick-next {
        right: 1rem!important
    }

    .episode-box::after {
        content: "";
        position: absolute;
        background: #000;
        border: .3rem solid #000;
        border-radius: 3rem;
        z-index: 0;
        right: .75rem;
        bottom: 0;
        width: calc(100% - 2.5rem);
        height: calc(100% - .75rem)
    }
}

.slick-prev,.slick-next {
  transition: .3s;
}

.slick-prev:hover,.slick-next:hover {
  opacity: .7;
}