@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');

/* ===== font size / color ===== */
:root {
    --color-wh: #ffffff;
    --gothic:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    --font-sm: clamp(1.2rem, 1.1vw, 1.4vw);
    --font-base: clamp(1.4rem, 1.6vw, 1.3vw);
    --font-md: clamp(1.6rem, 1.8vw, 3vw);
    --font-lg: clamp(2.4rem, 7vw, 7vw);
}
/* ===== base ===== */
html {
  font-size: 62.5%;
  height: 100%;
  position: relative;
  min-height: 100%;
}
body {
    height: 100%;
    min-height: 100%;
    font-size: var(--font-base);
    line-height: 1.6;
    color: #333;
    font-family: 'Shippori Mincho', serif;
    background:url("../images/base_bg.jpg") repeat-y top center;
    background-size: cover;
    /*background-attachment: fixed; ← 画像を画面いっぱいにカバー */
    font-weight: 600;
}
#wraper{
    position: relative;
    overflow: hidden;
    background-image:
        url("../images/deco_item01.png"),
        url("../images/deco_item02.png"),
        url("../images/deco_item03.png"),
        url("../images/deco_item04.png"),
        url("../images/deco_item05.png"),
        url("../images/deco_item06.png"),
        url("../images/deco_item07.png"),
        url("../images/deco_item04.png"),
        url("../images/deco_item08.png"),
        url("../images/deco_item04.png"),
        url("../images/deco_item09.png");
    background-repeat: no-repeat;
    background-position:
        110% 13%,
        105% 18%,
        -8% 28%,
        110% 35%,
        -5% 38%,
        110% 40%,
        -10% 55%,
        105% 65%,
        105% 87%,
        -5% 95%,
        105% 96%;
    background-size: 
        20%,
        25%,
        22%,
        22%,
        25%,
        22%,
        30%,
        30%,
        20%,
        18%,
        20%;
}
main{
    padding: 0 5vw;
}
img{
    width: 100%;
    height: auto;
}
/* ===== layout style ===== */
.center{
    text-align: center;
}
.left{
    text-align: left;
}
.right{
    text-align: right;
}
.brpc{
    display: block;
}
.brsm{
    display: block;
}
.heading{
    font-size: 10vw;
    color: var(--color-wh);
    letter-spacing: .05em;
    font-family:var(--gothic);
}
.tate{
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    white-space: nowrap;
    line-height: 1;
}

/*セクション共通横並び*/
.flex-row__sec{
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}
.flex-row__sec .flex-1 {
    flex: 1;
    padding-left: 2vw;
}

@media screen and (max-width: 768px) {
    .brpc{
        display: none;
    }
    .tate{
        -ms-writing-mode: lr-tb;
        -webkit-writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;
        white-space:break-spaces;
    }
    .heading{
        font-size: 11vw;
        text-shadow: 0 0 20px #ccc;
    }
    .flex-row__sec{
        flex-direction: column;
    }
    .flex-row__sec .flex-1 {
        padding-left: 0;
    }
}
@media screen and (max-width: 360px) {
    .brsm{
        display: none;
    }
}

/* ===== animation ===== */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}
.fade-up.active {
    opacity: 1;
    transform: translateY(0);
}
.zoom-in {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.6s ease;
}
.zoom-in.active {
    opacity: 1;
    transform: scale(1);
}

/* ===== hamburger menu ===== */
.hamburger {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1001;
    width: 60px;
    height: 48px;
    cursor: pointer;
    margin: 1em;
}
.hamburger span {
    display: block;
    height: 3px;
    background: var(--color-wh);
    margin: 10px 0;
    transition: 0.3s;
}
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(10px, 10px);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
}
.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(9px, -9px);
}
.menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    max-width: 600px;
    height: 100%;
    background:rgba(0,0,0,.8);
    transition: 0.3s;
    z-index: 1000;
    padding: 10rem 1em;
    display: flex;
    justify-content: center;
}
.menu.active {
    right: 0;
}
.menu ul {
    list-style: none;
    padding: 0;
}
.menu li {
    margin: 1.5em 0;
    border-bottom: 1px solid #aaa;
}
.menu li.entry-link {
    border-bottom: none;
    text-align: center;
}
.menu a {
    text-decoration: none;
    color: var(--color-wh);
    font-size: 2.4rem;
    display: block;
    letter-spacing: .08em;
    transition: .2s;
}
.menu a:hover{
    color: #64c5e5;
}
.menu li.entry-link a{
    border-radius: 100vw;
    background: linear-gradient(to right,  rgba(79,78,159,1) 0%,rgba(100,197,229,1) 100%);
    color: var(--color-wh);
    display: inline-block;
    padding: .5em 2em;
    margin-top: 2rem;
    font-size: 2rem;
    transition: .2s;
}
.menu li.entry-link a:hover{
    background: var(--color-wh);
    color: #64c5e5;
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 999;
}
.overlay.active {
    opacity: 1;
    visibility: visible;
}
@media screen and (max-width: 768px) {
    .hamburger {
        width: 30px;
        height: 24px;
    }
    .hamburger span {
        margin: 5px 0;
    }
    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }
    .menu {
        width: 80%;
    }
    .menu a {
        font-size: 1.8rem;
    }
    .menu li.entry-link a{
        font-size: 1.4rem;
    }
}

/* ===== TOP ===== */
/*fv*/
.fv{
    width: 100%;
    position: relative;
}
.fv__item img{
    width: 100%;
    height: auto;
}
.fv__read{
    position: absolute;
    left: 3vw;
    top: 3vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.presents{
    font-size:var(--font-sm);
    font-weight: 600;
}
.hero-title h1{
    width: 100%;
    font-size: var(--font-lg);
    line-height: 1.35;
    font-weight: bold;
}
.hero-title h1 span{
    display: block;
    color: var(--color-wh);
}
.point{
    text-align: right;
}
.point p{
    display: inline-block;
    background: var(--color-wh);
    color: #000;
    font-size:var(--font-base);
    border-radius: 12px;
    padding: .2em 2em;
}
.fv__link{
    width: 50%;
    margin-left: 10%;
}
.fv__link a{
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("../images/fv_link_bg.png") no-repeat center;
    background-size: 100% 100%;
    text-decoration: none;
    color: var(--color-wh);
    padding: 25% 0;
    transition: background-size 0.3s ease, transform 0.3s ease;
}
.fv__link a:hover{
    background: url("../images/fv_link_bg.png") no-repeat center;
    background-size: 90% 90%;
    transform: scale(1.02); /* 任意：ちょっと拡大で立体感 */
}
.fv__link a div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.fv__link .fv__link--title{
    display: block;
    width: 90%;
    margin:0 auto 1.5em;
}
.fv__link .fv__link--date{
    letter-spacing: .05em;
    line-height: 1.3;
}
.fv__link .fv__link--date time{
    font-size: var(--font-md);
}
@media screen and (max-width: 768px) {
    .point{
        text-align: left;
    }
    .fv__item{
        position: absolute;
        top:10vw;
        right: 0;
    }
    .fv__read{
        position: relative;
        padding: 5vw 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        left: 0;
        top: 0;
    }
    .hero-title h1{
        padding: 5vw 0;
        line-height: 1.75;
    }
    .fv__link{
        width: 80%;
        margin: 5% auto;
    }
}

/*intro*/
.intro{
    padding: 5vw 0;
}
.intro__title{
    margin-top: -15%;
}
.intro__instructors{
    width: 60%;
}
.intro__read{
    padding: 2.5vw 0;
    line-height: 2;
}
.intro__read h3{
    font-weight: bold;
    font-size:3vw;
}
.intro__read h4{
    margin-top: 1em;
    line-height: 1.6;
}
.intro__read .marker{
    background:linear-gradient(transparent 60%, var(--color-wh) 60%);
}
@media screen and (max-width: 768px) {
    .intro__instructors{
        width: 100%;
    }
    .intro__read h3{
        font-size:var(--font-md);
    }
}

/*schedule*/
.schedule{
    padding: 5vw 0;
    font-family:var(--gothic);
}
.schedule h3{
    font-size: var(--font-md);
}
.schedule__list{
    margin: 5% 0;
}
.schedule__list ul li{
    list-style-type: none;
}
.schedule__list-index{
    display: inline-block;
    border-radius: 100vw;
    padding: 1rem 1.5em;
    color: var(--color-wh);
    line-height: 1.3;
    background:rgba(0,169,192,0.6);
}
.schedule__list-index .flex-row{
    display: flex;
    align-items:center;
    gap: 2rem;
    flex-wrap: wrap;
}
.list-index__day{
    display: inline-block;
    width: 6em;
    text-align: center;
    border-right: 1px solid var(--color-wh);
    font-size: var(--font-sm);
}
.list-index__ttl{
    flex: 1;
    font-size: var(--font-md);
    letter-spacing: .1em;
}
.schedule__list--read{
    border-left: dashed #000 2px;
    margin-left: 3%;
    padding: 2% 0 4% 2%;
    font-size: var(--font-sm);
}
.schedule__list--read.last{
    border-left: none;
}
.schedule__list--read .box{
    background: rgba(255,255,255,0.4);
    border-radius: 24px;
    padding: 3%;
}
.schedule__list--read dl dt{
    background: var(--color-wh);
    border-radius: 100vw;
    display: inline-block;
    padding: .2em 1em;
    margin: .5em 0;
    font-size: var(--font-base);
}
.schedule__list--read dl dd{
    padding-left: 1em;
    
}
.schedule__list--read ol{
    list-style: none;
    padding-left: 1em;
}
.schedule__list--read ol li::before {
    content: '●';
    color: black;
    font-size: 0.8em;
    position: relative;
    left: -1em;
}
@media screen and (max-width: 768px) {
    .schedule__list ul li{
        margin-bottom: 10%;
    }
    .schedule__list ul li ol li{
        margin-bottom: 0;
    }
    .schedule__list-index{
        width: 100%;
        padding: 1rem 0;
    }
    .schedule__list-index .flex-row{
        gap: 1rem;
        flex-direction: column;
    }
    .list-index__day{
        width: 100%;
        border-right: none;
        font-size: var(--font-base);
    }
    .schedule__list--read{
        border-left: none;
        margin-left: 0;
        padding: 2% 0;
    }
    .schedule__list--read .box{
        border-radius: 12px;
    }
    .schedule__list--read dl dt{
        border-radius: 12px;
        display: block;
    }
}

/*instructors*/
.instructors{
    padding: 5vw 0;
    font-family:var(--gothic);
}
.instructors h3{
    font-size: var(--font-md);
}
.instructors .instructors__list{
    padding: 5% 0;
    border-radius: 24px;
    background: rgba(255,255,255,.7);
    margin: 5% 0;
}
.instructors__list ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
}
.instructors__list ul li{
    width: calc(100% / 2 - 6%);
    margin: 5% 3%;
}
.instructors__list--prof{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}
.instructors__list--prof .prof-img{
    width: calc(100% / 2 - 1rem);
}
.instructors__list--prof .prof-img img{
    border-radius: 12px;
    width: 100%;
    height:auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.instructors__list--prof .prof-name{
    width: calc(100% / 2 - 1rem);
}
.instructors__list--prof .prof-name h4{
    margin-bottom: 20px;
}
.instructors__list--prof .prof-name p{
    font-size: var(--font-sm);
}
.instructors__list--read{
    font-size: var(--font-sm);
    padding: 2rem 0;
}
@media screen and (max-width: 768px) {
    .instructors__list ul li{
        width: calc(100%);
        margin: 5%;
    }
}

/*program*/
.program{
    padding: 5vw 0;
}
.program__entry {
    min-width: 280px;
}
.program__entry .entry__list{
    width: 100%;
    margin-top: 1em;
}
.program__entry .entry__list{
    width: 100%;
}
.program__entry .entry__list th{
    display: block;
    width: 100%;
    text-align: left;
}
.program__entry .entry__list th span{
    display: inline-block;
    background: var(--color-wh);
    font-size: var(--font-md);
    border-radius: 100vw;
    text-align: center;
    padding: 0 1.5em;
}
.program__entry .entry__list td{
    padding: .5em 1em;
    display: block;
    width: 100%;
}

/*entry*/
.entry{
    padding: 5vw;
}
.entry a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    background: url("../images/fv_link_bg.png") no-repeat center;
    background-size: 100% 100%;
    text-decoration: none;
    color: var(--color-wh);
    padding: 25% 10%;
    margin: auto;
    transition: background-size 0.3s ease, transform 0.3s ease;
}
.entry a:hover{
    background: url("../images/fv_link_bg.png") no-repeat center;
    background-size: 90% 90%;
    transform: scale(1.02); /* 任意：ちょっと拡大で立体感 */
}
.entry a .entry__text{
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    font-size: 3vw;
}
.entry a .entry__text::after{
    display: inline-block;
    content: '▶︎';
    color: var(--color-wh);
}
@media screen and (max-width: 768px) {
    .entry a{
        width: 100%;
        padding: 25% 0;
        margin: auto;
        transition: background-size 0.3s ease, transform 0.3s ease;
    }
    .entry a .entry__text{
        font-size: 1.8rem;
    }
}

/*footer*/
.footer{
    padding: 5vw;
    background: var(--color-wh);
    font-size: var(--font-sm);
}
.footer__info p{
    margin-bottom: 2em;
}
.footer__info .attention{
    display: block;
    font-size: .8em;
    color: #777;
}
.footer__info .info__list li{
    list-style-type: none;
    margin-bottom: .5em;
}
.footer__info .flx2{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.footer__info .flx2 .lt{
    width: 80%;
}
.footer__info .flx2 .rt{
    width: 15%;
}
@media screen and (max-width: 768px) {
    .footer__info .flx2 .lt{
        width: 100%;
    }
    .footer__info .flx2 .rt{
        width: 100%;
        padding-top: 30px;
    }
    .footer__info .flx2 .rt img{
        width: 150px;
        display: block;
        margin: auto;
    }
}

/*to-top*/
#to-top {
    position: fixed;
    bottom: 40px;
    right: 20px;
    background: #333;
    color: var(--color-wh);
    padding: 10px 15px;
    font-size: 1.6rem;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 999;
    display: none;
}
#to-top:hover {
    background: #000;
}