@charset "UTF-8";


/* --------------------------------
DAYSページ
-------------------------------- */

/* --------------------------------
クラス紹介セクション (.class.section)
-------------------------------- */
.class.section {
    background-color: var(--main-color);
    padding: 100px 0;
}

.class-header-row {
    text-align: center;
    margin-bottom: 50px;
}



/* タイトル「クラス紹介」 */
.class-title-wrapper .title {
    font-size: var(--size-xl);
    font-weight: bold;
    color: var(--text-color);
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: 0;
    position: relative;
}


/* クラス情報のラッパー（横並び） */
.class-info-wrapper {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

/* 個別のクラスアイテム */
.class-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
}


/* --------------------------------
クラスアイコン（背景画像設定）
-------------------------------- */
.class-icon-wrapper {
    width: 250px;
    height: 280px;
    position: relative;
    margin-bottom: 10px;

    /* 背景画像の共通設定 */
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
}

.class-item-senior .class-icon-wrapper {
    background-image: url('../../img/usagi01.png');
    /* 年上組：ピンクのうさぎ */
}

.class-item-middle .class-icon-wrapper {
    background-image: url('../../img/usagi05.png');
    /* 年中組：紫のうさぎ */
}

.class-item-junior .class-icon-wrapper {
    background-image: url('../../img/usagi04.png');
    /* 年少組：オレンジのうさぎ */
}

/* --------------------------------
テキストの重ね合わせ
-------------------------------- */
.class-text-overlay {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    z-index: 10;
}

/* クラス名 */
.group-name {
    font-size: var(--size-lg);
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 5px;
    position: relative;
    display: inline-block;

    /* 点線の下線 */
    border-bottom: 2px dotted #555;
    padding-bottom: 3px;
    line-height: 1.2;
}

/* 年齢 */
.age {
    font-size: var(--size-lg);
    color: var(--text-color);
    font-weight: bold;
    margin: 0;
}



/*media Queries 767px
----------------------------------------------------*/
@media (max-width: 767px) {
    .class.section {
        padding: 60px 0;
    }

    .class-info-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .class-item {
        width: 100%;
    }

    .class-icon-wrapper {
        width: clamp(180px, 45vw, 250px);
        height: clamp(210px, 55vw, 280px);

        margin: 0 auto 10px;
    }

    .class-text-overlay {
        top: clamp(55%, calc(58% - 0.006 * 100vw), 58%);
    }

    .group-name {
        font-size: clamp(18px, 5vw, var(--size-lg));
    }

    .age {
        font-size: clamp(16px, 4.5vw, var(--size-lg));
    }
}



/* --------------------------------
一日の流れセクション (.days.section)
-------------------------------- */
.days.section {
    background-image: url('../../img/About_Back.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    padding: 350px 0 200px;
    margin-bottom: 100px;
}

/* タイトル「一日の流れ」の位置調整 */
.days-header-row {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    z-index: 5;
}

/* タイトル文字のスタイル */
.days-title-wrapper .title {
    font-size: var(--size-xl);
    font-weight: bold;
    color: var(--text-color);
    display: inline-block;
}

/* --------------------------------
コンテンツエリア（横並びと全体配置）
-------------------------------- */
.schedule-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* 上端揃え */
    gap: 40px;
}

/* --------------------------------
左側：スケジュールカード
-------------------------------- */
.schedule-card-wrapper {
    background-color: white;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 30px 40px;
    width: 40%;
    max-width: 500px;
    position: relative;
    z-index: 2;
    min-width: 380px;
}

.schedule-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.schedule-item {
    display: flex;
    align-items: flex-start;
    padding: 30px 0;
    gap: 5px;
}

.schedule-item:first-child {
    padding-top: 40px;
}

.schedule-item:last-child {
    padding-bottom: 40px;
}



/* ★時計アイコン */
.clock-icon {
    display: block;
    width: 60px;
    height: 60px;
    margin-right: 0%;
    min-width: 60px;
    min-height: 60px;
}

.schedule-text {
    flex-grow: 1;

}

.time {
    font-size: var(--size-lg);
    font-weight: bold;
    color: var(--text-color);
    width: 250px;
    max-width: 100%;
    white-space: nowrap;
    display: inline-block;
    border-bottom: 2px solid #F94769;
    padding-bottom: 5px;
    padding-left: 2px;
    padding-right: 2px;
    margin-bottom: 8px;

    line-height: 1.4;
}

.activity {
    font-size: var(--size-md);
    color: var(--text-color);
    margin: 0;
    line-height: 1.4;
}

/* --------------------------------
右側：画像エリア
-------------------------------- */
.days-image-area {
    width: 40%;
    position: relative;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
}

/* 画像アイテムの共通スタイル */
.days-image-item {
    position: static;
    width: 100%;
    height: auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* 画像が親要素に収まるように */
.days-image-item img {
    width: 100%;
    height: auto;
    display: block;
}




/*media Queries 767px
----------------------------------------------------*/
@media (max-width: 767px) {
    .clock-icon {
        width: clamp(40px, 12vw, 50px);
        height: clamp(40px, 12vw, 50px);

        min-width: 0;
        min-height: 0;
        margin-right: 3vw;
    }

    .schedule-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    .schedule-content-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
        box-sizing: border-box;
    }

    .schedule-card-wrapper {
        width: 100%;
        margin: 0;
        padding: 20px 30px;
        min-width: 0;
    }

    .schedule-item {
        gap: 2vw;
    }


    .schedule-text {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }


    .time {
        font-size: clamp(14px, 4vw, var(--size-lg));
        width: clamp(150px, 40vw, 220px);
        max-width: 100%;
        min-width: 0;
    }

    .activity {
        font-size: clamp(12px, 3.5vw, var(--size-md));
        width: clamp(150px, 40vw, 220px);
        max-width: 100%;
        min-width: 0;
    }


    .days.section {
        padding: 60px 0;
    }

    /* 画像エリア */

    .days-image-area {
        width: 100%;
        min-height: 600px;
        padding-top: 0;
    }

    /* 画像のサイズと位置を調整 */
    .days-image-item {
        width: 100%;
        margin: 20px auto;
        min-width: 300px;

    }

    .days-img-1,
    .days-img-2,
    .days-img-3 {
        /* position: static; */
        width: 80%;
        margin: 20px auto;
    }
}