@charset "UTF-8";

/* * {
    outline: 1px solid magenta;
} */

body {
    font-family: "M PLUS 1", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 500;
    color: #333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    word-wrap: break-word;
    text-rendering: optimizeLegibility;
}

.manabiTop {
    height: 75vh;
    background: url(../images/manabi-bg.jpg) no-repeat center /cover;

}

#manabiTextArea {
    max-width: 45vw;
    position: fixed;
    top: 8%;
    inset-inline: 0;
    transition: all 1s ease;
    z-index: 1000;
    margin: 0 80px;
    padding: 25px 20px;
    transition: all 1s ease;
    transform-origin: left top;
}



.manabiH1-img {
    width: 180%;
    transition: width 1s ease;
}

.manabiTextP {
    font-size: 28px;
    padding: 5%;
    line-height: 1.7;
    transition: opacity 1s ease;
}




.manabiTop_list {
    display: block;
}

.manabiTop_nav {
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease;
    transition: opacity .25s ease, transform .25s ease;
}

/* スクロール後 表示 */
.manabiTop_nav--show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* スクロール時のスタイル */

.manabiTop-scrolled {
    transform: scale(.55);
}


.manabiTop-scrolled .manabiTop_list a {
    font-size: 38px;
    transition: all 0.3s ease-out;
    color: #333;
    margin: 35px 0;
    border-radius: 600px;
    padding: 40px 0 40px 80px;
}

.manabiTop-scrolled .manabiTop_list a:hover {
    color: #4a90e2;
    font-weight: 900;
    background-color: #efd9a2;
    border-radius: 50px;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);

}

.manabiTop-scrolled .manabiTextP {
    display: none;
}


#slider {
    position: absolute;
    top: 20%;
    right: 0%;
    width: 60vw;
    height: 70vh;
    min-height: 320px;
    /* 保険（お好みで） */
    border-radius: 60px 0 0 60px;
    /* border-radius: 30% 70% 53% 47% / 34% 58% 42% 66%; */

}



.manabiContainer {
    width: 65vw;
    margin: 0 0 0 auto;
}

.randomAnime {
    visibility: hidden;
}



.reportBox,
.topics {
    margin: 20% 0 0 0;
    /* width: 60vw; */
    padding-right: 50px;
}

.infoBoxImg2 {
    width: 30vw;
    animation: fluidrotate 30s ease 0s infinite;
}

@keyframes fluidrotate {

    0%,
    100% {
        border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
    }

    14% {
        border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
    }

    28% {
        border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
    }

    42% {
        border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
    }

    56% {
        border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
    }

    70% {
        border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
    }

    84% {
        border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
    }

}


.reportBox h2 {
    font-size: 64px;
    font-family: "RocknRoll One", sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: -5px;
    border-bottom: 6px solid rgb(225, 111, 24);
    padding: 100px 0 20px 60px;
    line-height: 1;
}

.moreBtn {
    padding: 20px;
    text-align: right;
}

.moreBtn a {
    display: inline-block;
    padding: 15px 60px;
    background-color: #4d4ade;
    color: #ffffff;
    font-size: 22px;
    border-radius: 10px;
}

.infoBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5%;
}

.infoBox img {
    border-radius: 20px;
}

.infotBoxText {
    flex-basis: 46%;

}

.infotBoxText h3 {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.3;
}

.infotBoxText p {
    color: #828282;
    line-height: 1.7;

}


.infoTop {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.infoP {
    margin-top: 50px;
    margin-bottom: 50px;
    flex-basis: 50%;
    position: relative;
}


/* 講座マップ */
.areaBtnToyosaka {
    position: absolute;
    top: 11%;
    right: 20%;
    font-size: 2em;
    font-weight: bold;
    text-shadow:
        2px 2px 0 #fff,
        -2px 2px 0 #fff,
        2px -2px 0 #fff,
        -2px -2px 0 #fff;
    transition: all .5s;

}

.areaBtnSaijo {
    position: absolute;
    bottom: 35%;
    left: 35%;
    font-size: 2em;
    font-weight: bold;
    text-shadow:
        2px 2px 0 #fff,
        -2px 2px 0 #fff,
        2px -2px 0 #fff,
        -2px -2px 0 #fff;
    transition: all .5s;

}

.areaBtnAkitsu {
    position: absolute;
    bottom: 15%;
    right: 33%;
    font-size: 2em;
    font-weight: bold;
    text-shadow:
        2px 2px 0 #fff,
        -2px 2px 0 #fff,
        2px -2px 0 #fff,
        -2px -2px 0 #fff;
    transition: all .5s;
}

.areaBtnKurose {
    position: absolute;
    bottom: 15%;
    left: 16%;
    font-size: 2em;
    font-weight: bold;
    text-shadow:
        2px 2px 0 #fff,
        -2px 2px 0 #fff,
        2px -2px 0 #fff,
        -2px -2px 0 #fff;
    transition: all .5s;
}

.areaBtnToyosaka:hover,
.areaBtnKurose:hover,
.areaBtnAkitsu:hover,
.areaBtnSaijo:hover {
    transform: scale(1.5);

}

/*tabの形状*/

.tab li a {
    display: block;
    margin: 0 2px;
    padding: 10px 20px;
}

/*liにactiveクラスがついた時の形状*/



/*エリアの表示非表示と形状*/
.area {
    display: none;
    /*はじめは非表示*/
    opacity: 0;
    /*透過0*/
    background: #fff;
    /* padding: 50px 20px; */
}

.aree img{
    width: 80%;
}
.areaImg li{
    margin-right: 20px;
}
.area ul {
    display: flex;
    margin-bottom: 80px;
    flex-wrap: wrap;
    

}

.area ul li {
    flex-basis: 33%;
    margin-bottom: 20px;
}

.areaEveImg  img{
  border-radius: 50%;
  width: 80%;
  transition: all .3s ease;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3)
}

.areaEveImg  img:hover{
    border-radius: 5%;
    width: 80%;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3)
  }


/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;
    /*表示*/
    animation-name: displayAnime;
    /*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/*========= 流れるテキスト ===============*/



.slide-in {
    overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
    display: inline-block;

}

/*左右のアニメーション*/
.leftAnime {
    opacity: 0;
    /*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
    animation-name: slideTextX100;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
    from {
        transform: translateX(-100%);
        /*要素を左の枠外に移動*/
        opacity: 0;
    }

    to {
        transform: translateX(0);
        /*要素を元の位置に移動*/
        opacity: 1;
    }
}

.slideAnimeRightLeft {
    animation-name: slideTextX-100;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
    from {
        transform: translateX(100%);
        /*要素を右の枠外に移動*/
        opacity: 0;
    }

    to {
        transform: translateX(0);
        /*要素を元の位置に移動*/
        opacity: 1;
    }
}


.fadeLeft {
    animation-name: fadeLeftAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeLeftAnime {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

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

/* 4-1 ふわっ（右から） */

.fadeRight {
    animation-name: fadeRightAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeRightAnime {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

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



.zoomIn {
    animation: zoomInAnime .5s forwards;
}

@keyframes zoomInAnime {
    from {
        transform: scale(0.6);
        opacity: 0;
    }

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

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
    opacity: 0;
}

/* .zoomInTrigger{
    opacity: 0;
} */


/* =========================================
   Topics セクション
========================================= */
#topics {
    position: relative;

}


/* カード配置 */
.topics-area {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 100px 0;
}

.topics-area article {
    width: 28%;
    height: 28%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px #ccc;
    overflow: hidden;
}



@media (max-width: 1020px) {
    .topics-area article {
        width: 46%;
        margin: 0 0 50px;
    }

}

@media (max-width: 550px) {
    .topics-area article {
        width: 90%;
    }

    .topics-area article:nth-of-type(2n+1) {
        top: 0;
    }
}

/* =========================================
   画像ラッパ＆ズーム演出
========================================= */
.zoomOut .mask {
    display: block;
    height: 28%;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

@media (max-width: 1020px) {
    .zoomOut .mask {
        height: 25vw;
    }
}

@media (max-width: 550px) {
    .zoomOut .mask {
        height: 45vw;
    }
}

.zoomOut img {
    transform: scale(1.1);
    transition: .3s ease-in-out;
    object-fit: cover;
}

.zoomOut:hover img {
    transform: scale(1);
}

/* =========================================
   カード本文
========================================= */
.topics-area .topics-block {
    padding: 10px 20px;
}

.topics-area .topics-block time {
    display: block;
    font-size: .9rem;
    color: #666;
    margin: 0 0 20px;
}

.topics-area .topics-block h3 {
    font-size: 1rem;
}

/* =========================================
   一覧ボタン
========================================= */
#topics .topics-btn {
    text-align: right;
    padding: 100px 0 0;
}

@media (max-width: 960px) {
    #topics .topics-btn {
        text-align: center;
        padding: 50px 0 0;
    }
}

/* =========================================
   スクロール出現アニメーション
========================================= */
/* 初期状態：非表示 */
.smoothTrigger {
    opacity: 0;
}

/* アニメーション適用時 */
.smooth {
    animation-name: smoothAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    transform-origin: left;
    opacity: 0;
}

/* キーフレーム定義 */
@keyframes smoothAnime {
    from {
        transform: translate3d(0, 100%, 0) skewY(12deg);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0) skewY(0);
        opacity: 1;
    }
}





/* ============= calendar カレンダー============= */


.calContArea {
    padding: 100px 0;
    width: 50%;
}

#data {
    text-align: center;
    font-size: 40px;
    font-family: "M PLUS 1", sans-serif;
    font-optical-sizing: auto;
    font-weight: bold;
    width: 100%;
    margin: 1rem 0 0;
}

#calendar {
    text-align: center;
    width: 100%;
}

#calendar td.has-custom {
    font-weight: bold;
}

table {
    border-collapse: separate;
    /* ここが重要 */
    border-spacing: 8px;
    /* ← 好みの余白に調整（例：8px） */
    background: #fff;
    /* ギャップに見える色 */
    width: 100%;


}

th {
    color: #000;
    border-bottom: 3px solid #ddd;
    padding: 10px 0;
    text-align: center;

}

td {
    padding: 1em 0;
    text-align: center;
    font-size: 1.2em;
    border-radius: 10px;
}


/* 日曜・祝日・土曜 */
td:first-child,
td.holiday {
    color: red;
}

td:last-child {
    color: blue;
}

/* 前後月の日付 */
td.disabled {
    color: #ccc;
}

/* 本日 */
td.today {
    background-color: #D65E72;
    border-radius: 10px;
    color: #fff;
}

/* ボタン */
#next-prev-button {
    display: flex;
    justify-content: space-between;
}

#next-prev-button button {
    cursor: pointer;
    background: #535cdf;
    color: #fff;
    border-radius: 4px;
    font-size: 1.2em;
    font-weight: bold;
    padding: 0.5rem 2rem;
    margin: 1rem 0;
}

#next-prev-button button:hover {
    background-color: #92b4d4;
}

/* モーダル */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);

}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 30px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;

}

.close-button {
    color: #aaa;
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: #333;
    text-decoration: none;
}

/* イベント詳細 */
.event-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px auto;
    border-radius: 5px;
}

.event-details p {
    margin-bottom: 15px;
    line-height: 1.6;
}

.event-details ul {
    list-style: disc;
    margin-left: 20px;
}

.event-details ul li {
    margin-bottom: 5px;
}



/* 講座マップ */