@charset "UTF-8";

/* ============================================
   1. デザインの定義（変数）
   ============================================ */
:root {
    /* --- カラー --- */
    --clr-text: #3e3a39ff;
    --clr-beige: #efe8d6ff;
    --clr-lightbeige: #f7f4ebff;
    --clr-orange: #c36933ff;
    --clr-lightorange: #e6aa83ff;
    --clr-blue: #247276ff;
    --clr-lightblue: #a3cecfff;

    --clr-ansou: #D28F47;
    --clr-subansou: #ffc991;
    --clr-josen: #4BAB9A;
    --clr-subjosen: #b5e1d7;
    --clr-fes: #9f87bd;
    --clr-subfes: #c6b8d8;
    --clr-simpo: #8bab63;
    --clr-subsimpo: #b0c695;
    /* --- フォント --- */
    --font-base: "Noto Serif JP", "Zen Old Mincho", sans-serif;
    /* --- フォントサイズ --- */
    --fnt-s: 12px;
    --fnt-m: 18px;
    --fnt-l: 20px;
}

/* ============================================
   2. リセット & 基本設定
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-base);
    line-height: 1.6;
    color: var(--clr-text);
    background-color: var(--clr-beige);
}

main {
    padding-top: 90px;
    /*header分高さ下げる*/
}

header {
    position: absolute !important;
}

/* リンク・リスト・画像のリセット */
a {
    text-decoration: none;
    color: inherit;
}

ul,
ol {
    list-style: none;
}

img {
    max-width: 100%;
    vertical-align: bottom;
}


/* ============================================
   3. 共通レイアウト
   ============================================ */

/*ページタイトル*/
.pagetitle {
    display: flex;
    justify-content: start;
    align-items: center;
    background-color: var(--clr-lightbeige);
    width: 100%;
    height: 60px;
    gap: 10px;
    position: relative;
    z-index: 100;
    margin-bottom: 30px;
    margin-top: 10px;
    padding-left: 10px;
}

.pagetitle::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 80%;
    top: auto;
    left: 0;
    outline: 1px solid var(--clr-text);
    z-index: -1;
}

.pagetitle>* {
    position: relative;
    z-index: 1;
}

.pagetitle .pt-number {
    flex: 0 0 auto;
    padding: 0 10px;
    font-size: var(--fnt-m);
    font-weight: 400;
    color: var(--clr-text);
}

.pagetitle .pt-division {
    flex: 0 0 auto;
    width: 1px;
    height: 24px;
    background-color: var(--clr-text);
}

.pagetitle .pt-title {
    flex: 0 0 auto;
    padding: 0 10px;
    font-size: var(--fnt-l);
    font-weight: 500;
    color: var(--clr-text);
}

.pagetitle .pt-english {
    flex: 0 0 auto;
    padding: 0 10px;
    font-family: 'Dancing Script', cursive;
    font-size: var(--fnt-m);
    font-weight: 400;
    color: var(--clr-text);
}

/*詳細はこちらボタン*/
.detail-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    isolation: isolate;
    /* ボタン内で使う「共通の色変数」を定義（初期値はオレンジ） */
    --current-main: var(--clr-orange);
    --current-sub: var(--clr-lightorange);
}

.detail-btn.is-blue {
    --current-main: var(--clr-blue);
    --current-sub: var(--clr-lightblue);
}

.detail-text {
    color: var(--clr-text);
    font-size: 14px;
    z-index: 10;
}

.detail-decoration {
    display: flex;
    align-items: center;
    height: 0px;
    position: relative;
    left: 40px;
}

.detail-decoration::before {
    content: "";
    width: 5px;
    height: 5px;
    background-color: var(--current-main);
    border-radius: 50%;
}

.detail-line {
    border-bottom: 1.5px dashed var(--current-main);
    margin: 0 2px;
    width: 50px;
}

.detail-circle {
    width: 25px;
    height: 25px;
    background-color: var(--current-sub);
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 10px;
    z-index: -1;
}

.detail-circle::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 1.5px;
    background-color: var(--current-main);
    transform: rotate(45deg);
    transform-origin: center;
    left: 2px;
    top: 7px;
}

.detail-btn,
.detail-text {
    transition: all 0.2s ease-out;
}

.detail-btn:hover {
    transform: translateX(5px);
}

.detail-btn:hover .detail-text {
    color: var(--current-main);
    text-shadow: 1px 1px 1px var(--current-sub);
}

/*コンパスタイトル*/
.compus-title{
    position: relative;
    margin: 0 auto;
}

.compus{
    position: absolute;
    height: 20px;
    width: 20px;
}

.compus-font {
   font-weight: bold;
   padding-left: 25px;
   font-size: 16px;
   color: var(--clr-text);
   border-bottom: solid var(--clr-lightorange) 2px;
   width: 100%;
}

/*viewmoreボタン*/
.viewmore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--clr-lightorange);
    border: 4px solid var(--clr-lightorange);
    border-radius: 10px;
    position: relative;
    box-shadow: 0 0 0 1px #fff inset;
    padding: 3px;
    transition: all 0.2s ease;
}

.viewmore-btn.is-blue {
    background-color: var(--clr-lightblue);
    border: 4px solid var(--clr-lightblue);
}

.viewmore-text {
    font-size: 11px;
    margin-left: 10px;
}

.viewmore-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 3px 0 3px 5px;
    border-color: transparent transparent transparent var(--clr-text);
    margin-right: 10px;
    margin-left: 5px;
    transition: all 0.2s ease;
}

.viewmore-btn:hover {
    background-color: var(--clr-orange);
    border: 4px solid var(--clr-orange);
    color: white;
}

.viewmore-btn.is-blue:hover {
    background-color: var(--clr-blue);
    border: 4px solid var(--clr-blue);
}

.viewmore-btn:hover .viewmore-arrow {
    border-color: transparent transparent transparent white;
}


/*ピン見出し*/
.title-pin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
}

.pin-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.pin-icon {
    background-image: url('https://ikkyosai.com/shinkan/57/img/common/pin_orange.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
}

.pin-icon.is-blue {
    background-image: url('https://ikkyosai.com/shinkan/57/img/common/pin_blue.svg');
}

.pin-text {
    font-size: 18px;
    font-weight: 500;
}

.pin-bar {
    border: 1px dashed var(--clr-lightorange);
    width: 100%;
}

.pin-bar.is-blue {
    border: 1px dashed var(--clr-lightblue);
}

/*丸見出し*/
.title-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
    isolation: isolate;

    --current-main: var(--clr-orange);
    --current-sub: var(--clr-lightorange);
}

.title-circle.is-blue {
    --current-main: var(--clr-blue);
    --current-sub: var(--clr-lightblue);
}

.circle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
}

.circle-icon {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 1px solid var(--current-main);
    position: relative;
}

.circle-icon::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 4px;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    background-color: var(--current-sub);
    z-index: -1;
}

.circle-text {
    font-weight: 500;
    margin-left: 5px;
}

.circle-bar {
    border: 1px dashed var(--current-sub);
    width: 100%;
}

/*動画*/
.PV-container {
    position: relative;
    padding: 20px 30px;

    .white-card {
        width: 250px;
        aspect-ratio: 16 / 9;
        background-color: #ffffff;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 2;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;

        .youtube-wrap {
            position: relative;
            width: calc(100% - 5px);
            height: calc(100% - 5px);

            iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: none;
            }
        }
    }

    .corner-line {
        position: absolute;
        width: 50px;
        height: 30px;
        border: 2px solid #ffffff;
        z-index: 1;
        filter: drop-shadow(1px 1px 3px var(--clr-lightblue));

        &.top-left {
            top: 0;
            left: 0;
            border-right: none;
            border-bottom: none;
        }

        &.top-right {
            top: 0;
            right: 0;
            border-left: none;
            border-bottom: none;
        }

        &.bottom-left {
            bottom: 0;
            left: 0;
            border-right: none;
            border-top: none;
        }

        &.bottom-right {
            bottom: 0;
            right: 0;
            border-left: none;
            border-top: none;
        }
    }
}

/* ページに戻るボタン */
.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    height: 35px;
    padding: 0 10px;
    margin: 30px auto 30px;
    text-decoration: none;
    background-color: var(--clr-lightbeige);
    border: 1px solid var(--clr-blue);
    outline: solid 3px var(--clr-lightbeige);
    border-radius: 10px;
    color: var(--clr-blue);
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.back-btn::before {
    content: "";
    width: 6px;
    height: 6px;
    border-top: 1.5px solid currentColor;
    border-left: 1.5px solid currentColor;
    transform: rotate(-45deg);
    margin-right: -2px;
    transition: all 0.3s ease;
}

.back-btn:hover {
    border: 1px solid var(--clr-orange);
    color: var(--clr-orange);
    transform: translateY(-2px);
}

.back-btn:hover::before {
    border-top: 1.5px solid var(--clr-orange);
    border-left: 1.5px solid var(--clr-orange);
}

/*==========================================
   ローディング画面
   ========================================*/

.loading {
    /*ローディング画面の縦横幅を画面いっぱいになるように指定*/
    width: 100%;
    height: 100%;
    /*ローディング画面の表示位置を固定*/
    position: fixed;
    top: 0;
    left: 0;
    background: var(--clr-beige);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /*ローディング画面を0.5秒かけて非表示にする*/
    transition: all 0.5s linear;
    z-index: 1000;
}

/*ローディング画面を非表示にする*/
.loading.loaded {
    /*0.5秒かけてopacityを0にする*/
    opacity: 0;
    visibility: hidden;
}

.loading-text {
    color: var(--clr-text);
    font-size: 20px;
    font-weight: 700;
    font-family: serif, system-ui;
    margin-bottom: 30px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 5px;
}

@media screen and (min-width:750px) {
    .loading-text {
        font-size: 30px;
    }
}



.loading span {
    animation-name: bounce;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}

.loading span:nth-child(2) {
    animation-delay: .1s;
}

.loading span:nth-child(3) {
    animation-delay: .2s;
    color: var(--clr-orange);
}

.loading span:nth-child(4) {
    animation-delay: .3s;
}

.loading span:nth-child(5) {
    animation-delay: .4s;
}

.loading span:nth-child(6) {
    animation-delay: .5s;
}

.loading span:nth-child(7) {
    animation-delay: .6s;
    color: var(--clr-blue);
}

.loading span:nth-child(8) {
    animation-delay: .7s;
}

.loading span:nth-child(9) {
    animation-delay: .8s;
}

.loading span:nth-child(10) {
    animation-delay: .9s;
}

@keyframes bounce {
    0% {
        transform: translateY(0) scale(1);
    }

    40% {
        transform: translateY(-10px) scale(1.2);
    }

    80%,
    100% {
        transform: translateY(0) scale(1);
    }
}

/*カレンダー*/
/* =========================================
   1. カレンダー全体レイアウト
   ========================================= */
.carender {
    text-align: center;
    margin-top: 30px;
    position: relative;

    .carender-midashi {
        display: inline-block;
        border-bottom: 1.2px dashed #ebac81;
        padding-top: 30px;
        color: #cb6620;
        filter: drop-shadow(1px 1px 1px #ebac81);
        mix-blend-mode: multiply;
        text-underline-offset: 3px;
        font-size: 4vw;
    }

    .check {
        font-size: clamp(12px, 3vw, 16px);
        margin: 10px auto 25px auto;
        width: 85%;

        .tappu {
            text-decoration: underline dashed black 0.5px;
            text-underline-offset: 0px;
        }
    }

    .carender-wrapper {
        position: relative;
        width: 95%;
        max-width: 800px;
        margin: 0 auto;

        .carender-frame {
            width: 100%;
            display: block;
        }

        .plan {
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 88%;

            .fix {
                position: relative;
                width: 100%;
                max-width: 700px;
                margin: 0 auto;
            }
        }
    }
}

/* =========================================
   2. カレンダー本体（テーブル構造と中身）
   ========================================= */
.calendar {
    margin: 0 auto;
    width: 100%;
    table-layout: fixed;

    /* ------------------------------
       共通のマス目設定
    ------------------------------ */
    th,
    td {
        border-right: 3px solid var(--clr-beige);
        border-left: 3px solid var(--clr-beige);
        width: calc(100% / 7);
        max-width: 100px;
        height: 5px;

        /* 一番外側の罫線は消す */
        &:first-child {
            border-left: none;
        }

        &:last-child {
            border-right: none;
        }
    }

    th {
        font-size: 12px;
        color: var(--clr-text);
        padding-bottom: 3.5px;
        height: 20px;
    }

    td {
        background-color: var(--clr-lightbeige);
        vertical-align: top;
        text-align: left;
    }

    .underline_table {
        border-bottom: 3px solid var(--clr-beige);
        height: 3px;
    }

    /* ------------------------------
       日付・曜日のテキスト
    ------------------------------ */
    .sunday {
        color: #ca6621;
    }

    .saturday {
        color: #007075;
    }

    .day {
        font-size: 11px;
        height: 20px;
        vertical-align: top;
        text-align: left;
        padding-left: 3px;
    }

    .month {
        font-size: 9px;
        vertical-align: top;
        text-align: left;
    }

    .star_day {
        position: relative;

        &::after {
            content: "";
            background-image: url("https://ikkyosai.com/shinkan/57/img/event/star.svg");
            position: absolute;
            width: 15px;
            height: 15px;
            right: 5px;
            top: 2px;
        }
    }

    /* ------------------------------
       イベントラベル関連
    ------------------------------ */
    .event_box {
        height: 27px;
        font-weight: 700;
    }

    .event_link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        text-decoration: underline 0.75px solid #fff;
        text-underline-offset: 1px;
        color: #fff;
        font-weight: 400;
        transition: all 0.2s ease-out;

        &:hover {
            text-decoration-color: transparent;
        }
    }

    .event,
    .event_small,
    .entry {
        color: var(--clr-lightbeige);
        text-align: center;
        padding-bottom: 1px;
        position: relative;
        /* 背景色ではなく、背景の位置をアニメーションさせる */
        transition: background-position 0.3s ease;
        /* 背景の幅を2倍（200%）にして、通常時は右半分を見せる */
        background-size: 200% 100%;
        background-position: right bottom;

        &:hover {
            /* ホバー時に背景位置を左にずらすことで、左から右へ色が流れるように見せる */
            background-position: left bottom;
        }
    }

    .event,
    .event_small {
        /* 左半分：ホバー時の色（オレンジ）、右半分：通常時の色（lightslategray） */
        background-image: linear-gradient(to right, var(--clr-lightblue) 50%, lightslategray 50%);
        border-bottom: 2px solid var(--clr-lightbeige);
    }

    .event {
        font-size: 10px;

        &::before,
        &::after {
            right: 2px;
        }
    }

    .event_small {
        font-size: 8px;
    }

    .entry {
        /* 左半分：ホバー時の色（オレンジ）、右半分：通常時の色（青） */
        background-image: linear-gradient(to right, var(--clr-orange) 50%, var(--clr-blue) 50%);
        font-size: 10px;

        &::before,
        &::after {
            right: 10px;
        }
    }

    /* ------------------------------
       その他の特殊なマス目
    ------------------------------ */
    .schoolevent {
        background-color: lightgrey;
        font-size: 6.5px;
        text-align: center;
        vertical-align: middle;
        color: var(--clr-text);
    }

    .notification {
        font-size: 10px;
        color: var(--clr-text);
        text-align: center;
        vertical-align: top;
    }

    .enrollmentdate {
        font-size: 11px;
        color: var(--clr-text);
        text-align: center;
        vertical-align: top;
        position: relative;
    }

    .name_white {
        color: white;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-58%, -50%);
        white-space: nowrap;
        font-weight: 700;
    }
}

@media screen and (min-width: 1024px) {

    /* 1. 見出しや注意書き */
    .carender .carender-midashi {
        font-size: 24px;
    }

    .carender .check {
        font-size: 16px;
    }

    /* 2. カレンダー全体の幅と重ね合わせ */
    .carender .carender-wrapper .plan {
        width: 88%;
        /* スマホと同じく、枠画像に対して88%の幅を維持する */
    }

    /* 3. マス目と日付のサイズアップ */
    .calendar th {
        font-size: 16px;
        height: 30px;
        padding-bottom: 5px;
    }

    .calendar .day {
        font-size: 15px;
        height: 35px;
        padding-left: 5px;
    }

    .calendar .month {
        font-size: 13px;
    }

    /* 星マークも少し大きく */
    .calendar .star_day::after {
        width: 20px;
        height: 20px;
        background-size: cover;
        top: 7px;
        right: 6px;
    }

    /* 4. イベントラベルのサイズアップ */
    .calendar .event_box {
        height: 40px;
        /* イベントが入る行の余白を広げる */
    }

    .calendar .event,
    .calendar .entry {
        font-size: 15px;
        /* 文字を大きく */
    }

    .calendar .event_small {
        font-size: 12px;
        /* サークル紹介などの小さな文字も大きく */
    }

    /* 5. その他の要素 */
    .calendar .schoolevent {
        font-size: 13px;
        height: 25px;
    }

    .calendar .notification,
    .calendar .enrollmentdate {
        font-size: 15px;
    }

    .calendar .underline_table {
        height: 3px;
    }
}



/* ============================================
   4. レスポンシブ (Media Queries)
   ============================================ */

/* タブレット・PC向け (1024px以上) */
@media (min-width: 1024px) {

    main {
        padding-top: 60px;
    }

    .pagetitle {
        height: 90px;
        gap: 20px;
        margin-bottom: 30px;
        margin-top: 15px;
        padding-left: 90px;
    }

    .pagetitle::before {
        height: 75%;
    }

    .pagetitle .pt-number,
    .pagetitle .pt-english {
        font-size: 24px;
    }

    .pagetitle .pt-title {
        font-size: 28px;
    }

    .viewmore-btn {
        border-radius: 16px;
        padding: 5px;
        box-shadow: 0 0 0 2px #fff inset;
    }

    .viewmore-text {
        font-size: 18px;
    }

    .viewmore-arrow {
        border-width: 4px 0 4px 7px;
        margin-left: 9px;
    }

    .pin-icon {
        width: 35px;
        height: 35px;
    }

    .pin-text {
        font-size: 26px;
    }

    .circle-container {
        font-size: 17px;
    }

    .detail-text {
        font-size: 20px;
        font-weight: 600;
    }

    .detail-decoration {
        left: 60px;
        top: 3px;

        &::before {
            width: 6px;
            height: 6px;
        }

        .detail-line {
            width: 60px;
        }

        .detail-circle {
            width: 30px;
            height: 30px;

            &::after {
                top: 9px;
                left: 4px;
            }
        }
    }

    .PV-container {
        padding: 30px 50px;

        .white-card {
            width: 460px;

            .youtube-wrap {
                width: calc(100% - 15px);
                height: calc(100% - 15px);
            }
        }

        .corner-line {
            width: 80px;
            height: 50px;
            border-width: 4px;
        }
    }


    .back-btn {
        height: 45px;
        padding: 0 20px;
        font-size: 16px;
        gap: 15px;
        border-radius: 12px;
        margin: 50px auto 70px;
    }

    .back-btn::before {
        width: 8px;
        height: 8px;
    }

    /*コンパスタイトル*/
    .compus-title{
        margin-bottom: 40px;
        width: 80%;
    }

    .compus{
        height: 30px;
        width: 30px;
    }

    .compus-font {
        padding-left: 35px;
        font-size: 20px;
    }
}