﻿@charset "UTF-8";

/* common
---------------------------------------------------*/
.deco {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    pointer-events: none;
}
.deco::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    border-radius: 50%;
    filter: blur(11px);
    z-index: 1;
}
.deco.-pink::before {
    background-color: #DD3A76;
}
.deco.-green::before {
    background-color: #00937F;
}
.deco.-blue::before {
    background-color: #16B3EE;
}
.deco.-yellow::before {
    background-color: #FFBB15;
}
.deco.-pink::before {
    background-color: #DD3A76;
}
.deco img {
    position: relative;
    z-index: 2;
}

/* animation */
.deco {
    opacity: 0;
    animation: floating-x 7.2s ease-in-out infinite alternate-reverse;
    transition: opacity 1.0s;
}
.deco.on {
    opacity: 1;
}
.deco::before,
.deco img {
    animation: floating-y 2.4s ease-in-out infinite alternate-reverse;
}
.deco.-pink,
.deco.-pink::before,
.deco.-pink img {
    transition-delay: 0.0s;
    animation-delay: 0.0s;
}
.deco.-green,
.deco.-green::before,
.deco.-green img {
    transition-delay: 0.2s;
    animation-delay: 0.4s;
}
.deco.-blue,
.deco.-blue::before,
.deco.-blue img {
    transition-delay: 0.4s;
    animation-delay: 0.8s;
}
.deco.-yellow,
.deco.-yellow::before,
.deco.-yellow img {
    transition-delay: 0.6s;
    animation-delay: 1.2s;
}
@keyframes floating-x {
    0% {
        transform: translateX(-10px);
    }
    100% {
        transform: translateX(10px);
    }
}
@keyframes floating-y {
    0% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(10px);
    }
}

/* title */
.section-title {
    border-bottom: 4px solid var(--key-color);
    padding-bottom: min(36px, calc(36 / var(--pc-size) * 100vw));
    margin-bottom: min(46px, calc(46 / var(--pc-size) * 100vw));
}
.section-title .arial {
    display: inline-block;
    font-size: 4.0rem;
    font-weight: 700;
}
.section-title .ja {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 400;
    margin-top: 0.8em;
}
.section-title > p {
    line-height: 1.6;
    font-size: 2.0rem;
    font-weight: 400;
    margin-top: 1em;
}
/* btn */
.btn-apply {
    text-align: center;
}
.btn-apply a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: min(500px, calc(500 / var(--pc-size) * 100vw));
    height: min(90px, calc(90 / var(--pc-size) * 100vw));
    line-height: 1;
    text-align: center;
    color: var(--white-color);
    font-size: 2.0rem;
    font-weight: 700;
    background-color: var(--key-color);
    border: 1px solid var(--key-color);
    border-radius: 5px;
    margin: 0 auto;
    z-index: 10;
}
.btn-apply a::before {
    content: '';
    position: absolute;
    top: 50%;
    right: min(40px, calc(40 / var(--pc-size) * 100vw));
    translate: 0 -50%;
    width: 1px;
    height: 66.67%;
    background-color: var(--white-color);
}
.btn-apply a::after {
    content: '';
    position: absolute;
    top: 50%;
    right: min(14px, calc(14 / var(--pc-size) * 100vw));
    translate: 0 -50%;
    width: min(12px, calc(12 / var(--pc-size) * 100vw));
    height: min(12px, calc(12 / var(--pc-size) * 100vw));
    background-image: url('../../image/waas-2025/top/icon-blank.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.btn-apply a span {
    font-size: 1.6rem;
    font-weight: 400;
    margin-top: 0.5em;
}
/* download */
.download-pdf {
    text-align: center;
    margin-top: min(27px, calc(27 / var(--pc-size) * 100vw));
}
.download-pdf a {
    font-size: 1.6rem;
    padding-left: 2.3rem;
    background-image: url('../../image/waas-2025/top/icon-pdf.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: min(18px, calc(18 / var(--pc-size) * 100vw)) min(23px, calc(23 / var(--pc-size) * 100vw));
}
.download-pdf a span {
    color: var(--key-color);
}

/* 768 */
@media screen and (min-width:1px) and (max-width: 768px) {
    .deco::before {
        filter: blur(calc(11 / var(--sp-size) * 100vw));
    }
    @keyframes floating-x {
        0% {
            transform: translateX(calc(-5 / var(--sp-size) * 100vw));
        }
        100% {
            transform: translateX(calc(5 / var(--sp-size) * 100vw));
        }
    }
    @keyframes floating-y {
        0% {
            transform: translateY(calc(-5 / var(--sp-size) * 100vw));
        }
        100% {
            transform: translateY(calc(5 / var(--sp-size) * 100vw));
        }
    }

    /* title */
    .section-title {
        padding-bottom: calc(18 / var(--sp-size) * 100vw);
        margin-bottom: calc(26 / var(--sp-size) * 100vw);
    }
    .section-title .arial {
        font-size: 3.4rem;
    }
    .section-title .ja {
        margin-top: 0.5em;
    }
    .section-title > p {
        font-size: 1.8rem;
    }

    /* btn */
    .btn-apply a {
        width: calc(320 / var(--sp-size) * 100vw);
        height: calc(80 / var(--sp-size) * 100vw);
        border-radius: calc(5 / var(--sp-size) * 100vw);
    }
    .btn-apply a::before {
        right: calc(28 / var(--sp-size) * 100vw);
        height: 75%;
    }
    .btn-apply a::after {
        right: calc(10 / var(--sp-size) * 100vw);
        width: calc(12 / var(--sp-size) * 100vw);
        height: calc(12 / var(--sp-size) * 100vw);
    }

    /* download */
    .download-pdf {
        margin-top: calc(21 / var(--sp-size) * 100vw);
    }
    .download-pdf a {
        background-size: calc(18 / var(--sp-size) * 100vw) calc(23 / var(--sp-size) * 100vw);
    }
}

/* hero
---------------------------------------------------*/
#hero {
    position: relative;
    width: 100%;
    padding-top: min(106px, calc(106 / var(--pc-size) * 100vw));
    padding-bottom: min(80px, calc(80 / var(--pc-size) * 100vw));
}
#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1440 / 689;
    background: #e9f1f5;
    background: linear-gradient(180deg, #e9f1f5 0%, #e9f1f5 66.11%, #fff 100%);
}
#hero .inner {
    width: 100%;
    max-width: var(--pc-size-px);
    margin: 0 auto;
}
#hero .logo-wrap {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: min(960px, calc(960 / var(--pc-size) * 100vw));
    margin: 0 auto;
}
#hero img {
    width: 100%;
}
#hero .logo {
    width: calc(430 / 960 * 100%);
}
#hero .txt-wrap {
    width: calc(501 / 960 * 100%);
}
#hero .txt-wrap .txt01 {
    width: 100%;
    margin-bottom: min(34px, calc(34 / var(--pc-size) * 100vw));
}
#hero .txt-wrap .txt02 {
    width: 100%;
}
/* decoration */
#hero .deco01 {
    top: min(52px, calc(52 / var(--pc-size) * 100vw));
    right: calc(50% + min(522px, calc(522 / var(--pc-size) * 100vw)));
    width: min(132px, calc(132 / var(--pc-size) * 100vw));
}
#hero .deco01 img {
    width: min(53px, calc(132 / var(--pc-size) * 100vw));
}
#hero .deco02 {
    top: min(165px, calc(165 / var(--pc-size) * 100vw));
    left: calc(50% + min(528px, calc(528 / var(--pc-size) * 100vw)));
    width: min(171px, calc(171 / var(--pc-size) * 100vw));
}
#hero .deco02 img {
    width: min(64px, calc(64 / var(--pc-size) * 100vw));
}
#hero .deco03 {
    top: min(513px, calc(513 / var(--pc-size) * 100vw));
    right: calc(50% + min(527px, calc(527 / var(--pc-size) * 100vw)));
    width: min(155px, calc(155 / var(--pc-size) * 100vw));
}
#hero .deco03 img {
    width: min(84px, calc(84 / var(--pc-size) * 100vw));
}
#hero .deco04 {
    top: min(462px, calc(462 / var(--pc-size) * 100vw));
    left: calc(50% + min(531px, calc(531 / var(--pc-size) * 100vw)));
    width: min(120px, calc(120 / var(--pc-size) * 100vw));
}
#hero .deco04 img {
    width: min(54px, calc(54 / var(--pc-size) * 100vw));
}

/* 768 */
@media screen and (min-width:1px) and (max-width: 768px) {
    #hero {
        padding-top: calc(30 / var(--sp-size) * 100vw);
        padding-bottom: calc(34 / var(--sp-size) * 100vw);
    }
    #hero::before {
        aspect-ratio: 375 / 607;
    }
    #hero .logo-wrap {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    #hero .logo {
        order: 2;
        width: calc(200 / var(--sp-size) * 100vw);
        margin-bottom: calc(36 / var(--sp-size) * 100vw);
    }
    #hero .txt-wrap {
        display: contents;
    }
    #hero .txt-wrap .txt01 {
        order: 1;
        width: calc(320 / var(--sp-size) * 100vw);
        margin-bottom: calc(24 / var(--sp-size) * 100vw);
    }
    #hero .txt-wrap .txt02 {
        order: 3;
        width: calc(323 / var(--sp-size) * 100vw);
    }
    /* decoration */
    #hero .deco01 {
        top: calc(94 / var(--sp-size) * 100vw);
        right: calc(286 / var(--sp-size) * 100vw);
        width: calc(60 / var(--sp-size) * 100vw);
    }
    #hero .deco01 img {
        width: calc(24 / var(--sp-size) * 100vw);
    }
    #hero .deco02 {
        top: calc(90 / var(--sp-size) * 100vw);
        left: calc(290 / var(--sp-size) * 100vw);
        width: calc(85 / var(--sp-size) * 100vw);
    }
    #hero .deco02 img {
        width: calc(32 / var(--sp-size) * 100vw);
    }
    #hero .deco03 {
        top: calc(237 / var(--sp-size) * 100vw);
        right: calc(295 / var(--sp-size) * 100vw);
        width: calc(85 / var(--sp-size) * 100vw);
    }
    #hero .deco03 img {
        width: calc(46 / var(--sp-size) * 100vw);
    }
    #hero .deco04 {
        top: calc(255 / var(--sp-size) * 100vw);
        left: calc(295 / var(--sp-size) * 100vw);
        width: calc(65 / var(--sp-size) * 100vw);
    }
    #hero .deco04 img {
        width: calc(29 / var(--sp-size) * 100vw);
    }
}

/* navigation
---------------------------------------------------*/
#navigation {
    position: relative;
    z-index: 1;
}
#navigation ul.menu-list {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(900px, calc(900 / var(--pc-size) * 100vw));
    background-color: var(--white-color);
    border-radius: 6em;
    margin: 0 auto;
}
#navigation ul.menu-list::before,
#navigation ul.menu-list::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 6em;
    filter: blur(5px);
}
#navigation ul.menu-list::before {
    top: max(-4px, calc(-4 / var(--pc-size) * 100vw));
    left: max(-4px, calc(-4 / var(--pc-size) * 100vw));
    background: #ffbb15;
    z-index: -2;
}
#navigation ul.menu-list::after {
    bottom: max(-5px, calc(-5 / var(--pc-size) * 100vw));
    right: max(-5px, calc(-5 / var(--pc-size) * 100vw));
    background: #16B3EE;
    z-index: -1;
}
#navigation ul.menu-list li {
    position: relative;
    flex: 1;
    text-align: center;
}
#navigation ul.menu-list li.head {
    display: none;
}
#navigation ul.menu-list li::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    translate: 0 -50%;
    width: 1px;
    height: min(32px, calc(32 / var(--pc-size) * 100vw));
    background-color: #AFAFAF;
}
#navigation ul.menu-list li span,
#navigation ul.menu-list li a {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    padding: 1.167em 0.5em;
}

/* 768 */
@media screen and (min-width:1px) and (max-width: 768px) {
    #navigation ul.menu-list {
        display: block;
        width: calc(300 / var(--sp-size) * 100vw);
        border-radius: calc(25 / var(--sp-size) * 100vw);
        padding: 0.5rem 0;
    }
    #navigation ul.menu-list::before,
    #navigation ul.menu-list::after {
        width: 96%;
        height: calc(100% - calc(10 / var(--sp-size) * 100vw));
        border-radius: calc(25 / var(--sp-size) * 100vw);
        filter: blur(calc(5 / var(--sp-size) * 100vw));
    }
    #navigation ul.menu-list::before {
        top: calc(-1 / var(--sp-size) * 100vw);
        left: calc(-1 / var(--sp-size) * 100vw);
    }
    #navigation ul.menu-list::after {
        bottom: calc(-1 / var(--sp-size) * 100vw);
        right: calc(-1 / var(--sp-size) * 100vw);
    }
    #navigation ul.menu-list li::after {
        display: none;
    }
    #navigation ul.menu-list li {
        width: 80%;
        text-align: left;
        margin: 0 auto;
    }
    #navigation ul.menu-list li.head {
        display: block;
    }
    #navigation ul.menu-list li.menu {
        display: none;
    }
    #navigation ul.menu-list li span,
    #navigation ul.menu-list li a {
        width: 100%;
        font-size: 1.8rem;
        padding: 1.1rem 0;
    }
    #navigation ul.menu-list li span {
        position: relative;
    }
    #navigation ul.menu-list li span::after {
        content: '';
        position: absolute;
        top: 50%;
        right: calc(-8 / var(--sp-size) * 100vw);
        translate: 0 -50%;
        width: calc(12 / var(--sp-size) * 100vw);
        height: calc(10 / var(--sp-size) * 100vw);
        background-color: #262626;
        clip-path: polygon(0 0, 50% 100%, 100% 0);
        transition: rotate 0.5s;
    }

    /* is-active */
    #navigation ul.menu-list.is-active li:not(:last-child) {
        border-bottom: 1px solid #AFAFAF;
    }
    #navigation ul.menu-list.is-active li span::after {
        rotate: 180deg;
    }
}


/* lead
---------------------------------------------------*/
#lead {
    position: relative;
    width: 100%;
    padding-top: min(85px, calc(85 / var(--pc-size) * 100vw));
    padding-bottom: min(154px, calc(154 / var(--pc-size) * 100vw));
}
#lead .inner {
    width: 100%;
    max-width: var(--pc-size-px);
    margin: 0 auto;
}
#lead .lead-title {
    text-align: center;
    width: min(915px, calc(915 / var(--pc-size) * 100vw));
    margin: 0 auto min(24px, calc(24 / var(--pc-size) * 100vw));
}
#lead .lead-title img {
    width: 100%;
}
#lead .exp {
    width: 100%;
    margin: 0 auto min(38px, calc(38 / var(--pc-size) * 100vw));
}
#lead .exp p {
    line-height: 2em;
    font-size: 1.6rem
}
#lead .exp p + p {
    margin-top: 1.1em;
}
#lead .exp p a {
    color: var(--key-color);
}
#lead .howto {
    width: 100%;
    border-top: 4px solid var(--key-color);
    padding-top: min(56px, calc(56 / var(--pc-size) * 100vw));
    margin: 0 auto;
}
#lead .howto dl {
    display: flex;
}
#lead .howto dl dt {
    width: 29%;
}
#lead .howto dl dt span {
    font-size: 1.8rem;
    font-weight: 700;
    padding-left: 0.8em;
    border-left: 3px solid var(--key-color);
}
#lead .howto dl dd {
    width: 71%;
    line-height: 2em;
    font-size: 1.6rem;
}
#lead .btn-apply {
    margin-top: min(50px, calc(50 / var(--pc-size) * 100vw));
}

/* 768 */
@media screen and (min-width:1px) and (max-width: 768px) {
    #lead {
        padding-top: calc(38 / var(--sp-size) * 100vw);
        padding-bottom: calc(40 / var(--sp-size) * 100vw);
    }
    #lead .lead-title {
        text-align: center;
        width: calc(270 / var(--sp-size) * 100vw);
        margin-bottom: calc(16 / var(--sp-size) * 100vw);
    }
    #lead .exp {
        margin-bottom: calc(39 / var(--sp-size) * 100vw);
    }
    #lead .exp p + p {
        margin-top: 0.8em;
    }
    #lead .howto {
        padding-top: calc(30 / var(--sp-size) * 100vw);
    }
    #lead .howto dl {
        display: block;
        border-bottom: 2px dotted #AAAAAA;
        padding-bottom: calc(24 / var(--sp-size) * 100vw);
    }
    #lead .howto dl dt {
        width: 100%;
        margin-bottom: calc(14 / var(--sp-size) * 100vw);
    }
    #lead .howto dl dd {
        width: 100%;
    }

    #lead .btn-apply {
        margin-top: calc(30 / var(--sp-size) * 100vw);
    }
}

/* program
---------------------------------------------------*/
#program {
    position: relative;
    width: 100%;
    background-color: var(--background-color);
    padding-top: min(118px, calc(118 / var(--pc-size) * 100vw));
    padding-bottom: min(115px, calc(115 / var(--pc-size) * 100vw));
}
#program .inner {
    width: 100%;
    max-width: var(--pc-size-px);
    margin: 0 auto;
}
#program .program-title {
    text-align: center;
    color: var(--key-color);
    font-size: 5.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin-bottom: min(40px, calc(40 / var(--pc-size) * 100vw));
}
#program .program-list-title {
    text-align: center;
    color: var(--key-color);
    font-size: 3.6rem;
    font-weight: 700;
    margin-bottom: min(24px, calc(24 / var(--pc-size) * 100vw));
}
#program .program-list-title span {
    display: inline-block;
    font-size: 2.4rem;
    font-weight: 700;
    margin-top: 1.1em;
}
#program .program-schedule {
    text-align: center;
    font-size: 2.0rem;
    margin-bottom: min(45px, calc(45 / var(--pc-size) * 100vw));
}
#program .program-schedule sub {
    bottom: 0;
    font-size: 1.8rem;
}
#program .program-list + .program-list-title {
    margin-top: min(60px, calc(60 / var(--pc-size) * 100vw));
}
#program .program-list .program + .program {
    margin-top: min(80px, calc(80 / var(--pc-size) * 100vw));
}
#program .program-list .program-time {
    font-size: 2.4rem;
    font-weight: 400;
    border-left: 3px solid var(--key-color);
    padding-left: 0.4em;
    margin-bottom: min(15px, calc(15 / var(--pc-size) * 100vw));
}
#program .program-list .program-subject {
    line-height: 1.4;
    font-size: 2.4rem;
    font-weight: 700;
    border-bottom: 2px dotted #AAAAAA;
    padding-bottom: min(18px, calc(18 / var(--pc-size) * 100vw));
    margin-bottom: min(40px, calc(40 / var(--pc-size) * 100vw));
}
#program .program-list .program-subject.-no-border {
    border-bottom: 0;
    padding-bottom: 0;
}
#program .program-list .profile-wrap {
    display: flex;
    align-items: flex-start;
}
#program .program-list .profile-wrap .figure {
    position: relative;
    width: min(250px, calc(250 / var(--pc-size) * 100vw));
    aspect-ratio: 1 / 1;
    margin-right: min(65px, calc(65 / var(--pc-size) * 100vw));
    overflow: hidden;
}
#program .program-list .profile-wrap .figure::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: min(30px, calc(30 / var(--pc-size) * 100vw));
    aspect-ratio: 1 / 1;
    background-color: var(--key-color);
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    pointer-events: none;
}
#program .program-list .profile-wrap .figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#program .program-list .profile-wrap .profile {
    width: calc(100% - min(315px, calc(315 / var(--pc-size) * 100vw)));
}
#program .program-list .profile-wrap .profile .title {
    line-height: 1.6;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: min(14px, calc(14 / var(--pc-size) * 100vw));
}
#program .program-list .profile-wrap .profile .name {
    line-height: 1.2;
    font-size: 2.4rem;
    font-weight: 700;
}
#program .program-list .profile-wrap .profile .name sub {
    bottom: 0;
    font-size: 1.6rem;
    font-weight: 400;
}
#program .program-list .exp p,
#program .program-list .exp li {
    line-height: 1.7;
    font-size: 2.0rem;
}
#program .note {
    line-height: 1.4;
    font-size: 1.4rem;
    margin-top: min(50px, calc(50 / var(--pc-size) * 100vw));
}

/* decoration */
#program .deco01 {
    top: max(-58px, calc(-58 / var(--pc-size) * 100vw));
    right: calc(50% + min(527px, calc(527 / var(--pc-size) * 100vw)));
    width: min(136px, calc(136 / var(--pc-size) * 100vw));
}
#program .deco01 img {
    width: min(80px, calc(80 / var(--pc-size) * 100vw));
}
#program .deco02 {
    top: min(223px, calc(223 / var(--pc-size) * 100vw));
    left: calc(50% + min(533px, calc(533 / var(--pc-size) * 100vw)));
    width: min(127px, calc(127 / var(--pc-size) * 100vw));
}
#program .deco02 img {
    width: min(64px, calc(64 / var(--pc-size) * 100vw));
}
#program .deco03 {
    top: min(1346px, calc(1346 / var(--pc-size) * 100vw));
    right: calc(50% + min(566px, calc(566 / var(--pc-size) * 100vw)));
    width: min(187px, calc(187 / var(--pc-size) * 100vw));
}
#program .deco03 img {
    width: min(81px, calc(81 / var(--pc-size) * 100vw));
}
#program .deco04 {
    top: min(2390px, calc(2390 / var(--pc-size) * 100vw));
    left: calc(50% + min(524px, calc(524 / var(--pc-size) * 100vw)));
    width: min(213px, calc(213 / var(--pc-size) * 100vw));
}
#program .deco04 img {
    width: min(78px, calc(78 / var(--pc-size) * 100vw));
}
#program .deco05 {
    top: min(2725px, calc(2725 / var(--pc-size) * 100vw));
    right: calc(50% + min(566px, calc(566 / var(--pc-size) * 100vw)));
    width: min(98px, calc(98 / var(--pc-size) * 100vw));
}
#program .deco05 img {
    width: min(20px, calc(20 / var(--pc-size) * 100vw));
}
#program .deco06 {
    top: min(3490px, calc(3490 / var(--pc-size) * 100vw));
    left: calc(50% + min(578px, calc(578 / var(--pc-size) * 100vw)));
    width: min(161px, calc(161 / var(--pc-size) * 100vw));
}
#program .deco06 img {
    width: min(53px, calc(53 / var(--pc-size) * 100vw));
}
#program .deco07 {
    top: min(4206px, calc(4206 / var(--pc-size) * 100vw));
    right: calc(50% + min(578px, calc(578 / var(--pc-size) * 100vw)));
    width: min(176px, calc(176 / var(--pc-size) * 100vw));
}
#program .deco07 img {
    width: min(71px, calc(71 / var(--pc-size) * 100vw));
}
#program .deco08 {
    top: min(5134px, calc(5134 / var(--pc-size) * 100vw));
    left: calc(50% + min(544px, calc(544 / var(--pc-size) * 100vw)));
    width: min(251px, calc(251 / var(--pc-size) * 100vw));
}
#program .deco08 img {
    width: min(90px, calc(90 / var(--pc-size) * 100vw));
}

/* 768 */
@media screen and (min-width:1px) and (max-width: 768px) {
    #program {
        padding-top: calc(44 / var(--sp-size) * 100vw);
        padding-bottom: calc(40 / var(--sp-size) * 100vw);
    }
    #program .program-title {
        font-size: 3.0rem;
        margin-bottom: calc(40 / var(--sp-size) * 100vw);
    }
    #program .program-list-title {
        font-size: 2.8rem;
        margin-bottom: calc(12 / var(--sp-size) * 100vw);
    }
    #program .program-list-title span {
        line-height: 1.6;
        font-size: 2.0rem;
        margin-top: 0.7em;
    }
    #program .program-schedule {
        line-height: 1.6;
        font-size: 1.8rem;
        margin-bottom: calc(35 / var(--sp-size) * 100vw);
    }
    #program .program-list + .program-list-title {
        margin-top: calc(60 / var(--sp-size) * 100vw);
    }
    #program .program-list .program + .program {
        margin-top: calc(40 / var(--sp-size) * 100vw);
    }
    #program .program-list .program-time {
        margin-bottom: calc(14 / var(--sp-size) * 100vw);
    }
    #program .program-list .program-subject {
        line-height: 1.5;
        font-size: 2.0rem;
        padding-bottom: calc(16 / var(--sp-size) * 100vw);
        margin-bottom: calc(35 / var(--sp-size) * 100vw);
    }
    #program .program-list .profile-wrap {
        display: block;
    }
    #program .program-list .profile-wrap .figure {
        width: calc(250 / var(--sp-size) * 100vw);
        margin: 0 auto calc(20 / var(--sp-size) * 100vw);
    }
    #program .program-list .profile-wrap .figure::after {
        width: calc(30 / var(--sp-size) * 100vw);
    }
    #program .program-list .profile-wrap .profile {
        width: 100%;
    }
    #program .program-list .profile-wrap .profile .title {
        text-align: center;
        margin-bottom: calc(14 / var(--sp-size) * 100vw);
    }
    #program .program-list .profile-wrap .profile .name {
        text-align: center;
    }
    /* decoration */
    #program .deco {
        display: none;
    }
}

/* demonstration
---------------------------------------------------*/
#demonstration {
    position: relative;
    width: 100%;
    padding-top: min(110px, calc(110 / var(--pc-size) * 100vw));
    padding-bottom: min(120px, calc(120 / var(--pc-size) * 100vw));
}
#demonstration .inner {
    width: 100%;
    max-width: var(--pc-size-px);
    margin: 0 auto;
}
#demonstration .demonstration-list .demonstration + .demonstration {
    margin-top: min(80px, calc(80 / var(--pc-size) * 100vw));
}
#demonstration .demonstration-list .demonstration-subject {
    line-height: 1.4;
    font-size: 2.4rem;
    font-weight: 700;
    border-bottom: 2px dotted #AAAAAA;
    padding-bottom: min(18px, calc(18 / var(--pc-size) * 100vw));
    margin-bottom: min(40px, calc(40 / var(--pc-size) * 100vw));
}
#demonstration .demonstration-list .exp-wrap {
    display: flex;
    align-items: flex-start;
}
#demonstration .demonstration-list .exp-wrap .figure {
    position: relative;
    width: min(360px, calc(360 / var(--pc-size) * 100vw));
    aspect-ratio: 3 / 2;
    margin-right: min(50px, calc(50 / var(--pc-size) * 100vw));
    overflow: hidden;
}
#demonstration .demonstration-list .exp-wrap .figure::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: min(30px, calc(30 / var(--pc-size) * 100vw));
    aspect-ratio: 1 / 1;
    background-color: var(--key-color);
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    pointer-events: none;
}
#demonstration .demonstration-list .exp-wrap .figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#demonstration .demonstration-list .exp-wrap .exp {
    width: calc(100% - min(410px, calc(410 / var(--pc-size) * 100vw)));
}
#demonstration .demonstration-list .exp-wrap .exp p {
    line-height: 2;
    font-size: 1.5rem;
}
#demonstration .demonstration-list .exp-wrap .exp p + p {
    margin-top: 0.5em;
}

/* decoration */
#demonstration .deco01 {
    top: min(1105px, calc(1105 / var(--pc-size) * 100vw));
    right: calc(50% + min(539px, calc(539 / var(--pc-size) * 100vw)));
    width: min(199px, calc(199 / var(--pc-size) * 100vw));
}
#demonstration .deco01 img {
    width: min(69px, calc(69 / var(--pc-size) * 100vw));
}

/* 768 */
@media screen and (min-width:1px) and (max-width: 768px) {
    #demonstration {
        padding-top: calc(40 / var(--sp-size) * 100vw);
        padding-bottom: calc(47 / var(--sp-size) * 100vw);
    }
    #demonstration .demonstration-list .demonstration + .demonstration {
        margin-top: calc(40 / var(--sp-size) * 100vw);
    }
    #demonstration .demonstration-list .demonstration-subject {
        line-height: 1.5;
        font-size: 2.2rem;
        padding-bottom: calc(14 / var(--sp-size) * 100vw);
        margin-bottom: calc(30 / var(--sp-size) * 100vw);
    }
    #demonstration .demonstration-list .exp-wrap {
        display: block;
    }
    #demonstration .demonstration-list .exp-wrap .figure {
        width: 100%;
        margin: 0 auto calc(16 / var(--sp-size) * 100vw);
    }
    #demonstration .demonstration-list .exp-wrap .figure::after {
        width: calc(30 / var(--sp-size) * 100vw);
    }
    #demonstration .demonstration-list .exp-wrap .exp {
        width: 100%;
    }
    #demonstration .demonstration-list .exp-wrap .exp p + p {
        margin-top: 0.7em;
    }
    /* decoration */
    #demonstration .deco {
        display: none;
    }
}

/* panel-display
---------------------------------------------------*/
#panel-display {
    position: relative;
    width: 100%;
    background-color: var(--background-color);
    padding-top: min(120px, calc(120 / var(--pc-size) * 100vw));
    padding-bottom: min(120px, calc(120 / var(--pc-size) * 100vw));
}
#panel-display .inner {
    width: 100%;
    max-width: var(--pc-size-px);
    margin: 0 auto;
}
#panel-display ul.panel-display-list li {
    border-bottom: 2px dotted #AAAAAA;
    /*padding-bottom: min(28px, calc(28 / var(--pc-size) * 100vw));*/
    padding-bottom: min(14px, calc(14 / var(--pc-size) * 100vw));
}
#panel-display ul.panel-display-list li:not(:last-child) {
    /*margin-bottom: min(30px, calc(30 / var(--pc-size) * 100vw));*/
    margin-bottom: min(15px, calc(15 / var(--pc-size) * 100vw));
}
#panel-display ul.panel-display-list li p {
    position: relative;
    line-height: 1.5;
    font-size: 1.8rem;
    font-weight: 700;
    padding-left: 0.6em;
}
#panel-display ul.panel-display-list li p::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: 0;
    width: 3px;
    height: 2.0rem;
    background-color: var(--key-color);
}
#panel-display .note {
    line-height: 1.4;
    font-size: 1.4rem;
    margin-top: min(30px, calc(30 / var(--pc-size) * 100vw));
}

/* decoration */
#panel-display .deco01 {
    top: max(-58px, calc(-58 / var(--pc-size) * 100vw));
    left: calc(50% + min(565px, calc(565 / var(--pc-size) * 100vw)));
    width: min(116px, calc(116 / var(--pc-size) * 100vw));
}
#panel-display .deco01 img {
    width: min(46px, calc(46 / var(--pc-size) * 100vw));
}
#panel-display .deco02 {
    top: min(1446px, calc(1446 / var(--pc-size) * 100vw));
    right: calc(50% + min(559px, calc(559 / var(--pc-size) * 100vw)));
    width: min(187px, calc(187 / var(--pc-size) * 100vw));
}
#panel-display .deco02 img {
    width: min(101px, calc(101 / var(--pc-size) * 100vw));
}

/* 768 */
@media screen and (min-width:1px) and (max-width: 768px) {
    #panel-display {
        padding-top: calc(40 / var(--sp-size) * 100vw);
        padding-bottom: calc(40 / var(--sp-size) * 100vw);
    }
    #panel-display ul.panel-display-list li {
        padding-bottom: calc(12 / var(--sp-size) * 100vw);
    }
    #panel-display ul.panel-display-list li:not(:last-child) {
        margin-bottom: calc(15 / var(--sp-size) * 100vw);
    }
    #panel-display .note {
        margin-top: calc(15 / var(--sp-size) * 100vw);
    }
    /* decoration */
    #panel-display .deco {
        display: none;
    }
}

/* access
---------------------------------------------------*/
#access {
    position: relative;
    width: 100%;
    padding-top: min(120px, calc(120 / var(--pc-size) * 100vw));
    padding-bottom: min(120px, calc(120 / var(--pc-size) * 100vw));
}
#access .inner {
    width: 100%;
    max-width: var(--pc-size-px);
    margin: 0 auto;
}
#access .access-map {
    width: 100%;
    height: min(450px, calc(450 / var(--pc-size) * 100vw));
    margin-bottom: min(25px, calc(25 / var(--pc-size) * 100vw));
}
#access .access-info {
    line-height: 2;
    font-size: 1.6rem;
}
#access .access-info a {
    color: var(--key-color);
}
#access .btn-apply {
    margin-top: min(70px, calc(70 / var(--pc-size) * 100vw));
}

/* decoration */
#access .deco01 {
    top: min(313px, calc(313 / var(--pc-size) * 100vw));
    left: calc(50% + min(581px, calc(581 / var(--pc-size) * 100vw)));
    width: min(183px, calc(183 / var(--pc-size) * 100vw));
}
#access .deco01 img {
    width: min(69px, calc(69 / var(--pc-size) * 100vw));
}

/* 768 */
@media screen and (min-width:1px) and (max-width: 768px) {
    #access {
        padding-top: calc(40 / var(--sp-size) * 100vw);
        padding-bottom: calc(40 / var(--sp-size) * 100vw);
    }
    #access .access-map {
        width: 100%;
        height: calc(320 / var(--sp-size) * 100vw);
        margin-bottom: calc(20 / var(--sp-size) * 100vw);
    }
    #access .btn-apply {
        margin-top: calc(40 / var(--sp-size) * 100vw);
    }
    /* decoration */
    #access .deco {
        display: none;
    }
}
