@charset "UTF-8";

/* activity.htmlの背景色をコンテンツ部分と合わせる */
body {
    background-color: var(--base);
}

/* 「クラブ活動」の見出しを打ち消し */
.activity-text h2{
    font-size: 20px;
}
/* 「１日の活動の流れ」テーブルの文字がタブレット版から大きく */
@media screen and (min-width:768px) {
    .schedule-table ,.activity-text p,.activity-text h2{
        font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); /* common.cssの設計に合わせる */
    }
    /* 「１日の活動の流れ」の補足説明と「クラブ活動のスケジュール」の内容の文字を小さめ */
    table span ,.activity-table td{
        font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    }
}

/* --------------------------------------
        「１日の活動の流れ」のスケジュール
----------------------------------------- */
/* -----茶色の丸と緑色の丸の装飾------ */
/* 丸の基準 */
.schedule{
    position: relative;
    overflow: hidden;
} 
/* 茶色の丸 */
.schedule > .brown-circle{
    position: absolute;
    top: 0;
    left: -80px;
}
@media screen and (min-width:768px){
    .schedule > .brown-circle{
        left: -150px;
    }
}
@media screen and (min-width:1025px){
    .schedule > .brown-circle{
        left: -200px;
    }
}
/* 緑色の丸 */
.schedule > .green-circle{
    position: absolute;
    bottom: 0;
    right: -80px;
}
@media screen and (min-width:768px){
    .schedule > .green-circle{
        right: -150px;
    }
}
@media screen and (min-width:1025px){
    .schedule > .green-circle{
        right: -200px;
    }
}



/* -----「１日の活動の流れ」のタイトルを中央揃え----- */
.schedule h2 {
    text-align: center;
}

/* -----「１日の活動の流れ」のテーブルの設定----- */
/* 時間と内容のまとまりの設定 */
.schedule-table tr{
    display: flex;
    align-items: flex-start;
    gap: 40px;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 60px;/*三角の装飾分の余白*/
    position: relative;/*間の三角の装飾の基準*/
}

/* （奇数）黄色の背景 */
.schedule-table tr:nth-child(odd){
    background-color: var(--accent-yellow);
}

/* （偶数）白色の背景 */
.schedule-table tr:nth-child(even){
    background-color:#fff;
}

/* -----スケジュールの間の三角----- */
.schedule-table tr::after {
    content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-right: 30px solid transparent;
        border-left: 30px solid transparent;
        border-top: 40px solid var(--main);
        border-bottom: 0;
    position: absolute;
    bottom: -50px;
    left:50%;
    transform: translateX(-50%);
}
/* スケジュール最後の要素の下の余白と三角を削除 */
.schedule-table tr:last-child {
    margin-bottom: 0;
}
.schedule-table tr:last-child::after {
    display: none;
}



/* --------------------------------------
        「クラブ活動」のスケジュール
----------------------------------------*/
/* -----白色背景------ */
.activity{
    background-color: #fff;
    border-radius: 0 100px 0 0;
    position: relative;
}
/* -----ダイくんとランちゃん----- */
.daikun-easer,.runtyan-run{
    display: none;
}
@media screen and (min-width:768px){
.daikun-easer,.runtyan-run{
    display: block;
    width: 50px;
    aspect-ratio: 1;
    opacity: 0;
    position: absolute;
    top: -40px;
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.daikun-easer{
    left: 10%;
    transform: translateX(-150%);
}
.runtyan-run{
    right: 10%;
    transform: translateX(150%);
}
.daikun-easer.is-visible,
.runtyan-run.is-visible{
    opacity: 1;
    transform: translateX(0);
}
}
@media screen and (min-width:1025px){
    .daikun-easer,.runtyan-run{
        width: 80px;
        top: -60px;
}
.daikun-easer{
    left: 20%;
}
.runtyan-run{
    right: 20%;
}
}
/* -----16:00~17:00クラブ活動のタイトルの設定------ */
/* 時間と内容を横並び */
.activity-text{
    display: flex;
    gap: 40px;
    padding: 0 20px;
}
/* 時間とタイトルを太字かつ大きく */
.activity-text p{
    font-weight: bold;
    white-space: nowrap;
}
/* ※の内容を赤字に */
.activity-text span:last-child{
    color: red;
}

/* ------クラブ活動のテーブル------- */
/* テーブルの外枠の線 */
.activity-table{
    width: 100%;
    max-width: 300px;
    margin: 20px auto;
    /* テーブル自体のボーダーをなくし、セル側で制御する */
    border-collapse: separate;
    border-spacing: 0;
}
/* 曜日と内容のボーダー */
.activity-table th,.activity-table td{
    border: 1px solid var(--font);
    padding: 10px 20px;
}
/* 隣接するセルのボーダーを重ねる（スマホ表示：上の線を消す） */
.activity-table tr:not(:first-child) > * {
    border-top-width: 0;
}
.activity-table tr > td {
    border-left-width: 0;
}

/* 角丸の設定（スマホ表示） */
.activity-table tr:first-child > th {
    border-top-left-radius: 10px;
}
.activity-table tr:first-child > td {
    border-top-right-radius: 10px;
}
.activity-table tr:last-child > th {
    border-bottom-left-radius: 10px;
}
.activity-table tr:last-child > td {
    border-bottom-right-radius: 10px;
}

/* th（曜日）の太字を解除&曜日の黄色の背景 */
.activity-table th{
    font-weight: normal;
    background-color: var(--accent-yellow);
}
@media screen and (min-width:768px){
    .activity-table{
        max-width: 700px;
    }
    .activity-table tbody{
        display: flex;
        flex-direction:row;
    }
    .activity-table tr{
        display: flex;
        flex-direction:column;
        width: 100%;/*内容が横幅いっぱいになるように*/
        flex: 1;
    }
    /* PC表示では隣接ボーダーの制御をリセット＆再設定 */
    /* 一旦スマホ版の打ち消しをリセット */
    .activity-table tr:not(:first-child) > * { border-top-width: 1px; }
    /* スマホ版で消したtdの左ボーダーを復活 */
    .activity-table tr > td { border-left-width: 1px; }
    /* 左側のボーダーを消す（最初の行以外） */
    .activity-table tr:not(:first-child) > * { border-left-width: 0; }

    /* 角丸のリセットと再設定（PC表示） */
    /* スマホ用のスタイルを上書きし、PC表示での正しい四隅に角丸を再設定します */
    .activity-table tr:first-child > th { border-radius: 10px 0 0 0; }      /* 左上: 月曜日 */
    .activity-table tr:last-child > th  { border-radius: 0 10px 0 0; }      /* 右上: 金曜日 */
    .activity-table tr:first-child > td { border-radius: 0 0 0 10px; }      /* 左下: 野球 */
    .activity-table tr:last-child > td  { border-radius: 0 0 10px 0; }      /* 右下: アートクラブ */


    .activity-table th{
        text-align: center;
    }

    .activity-table td{
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
}
/* -----slick slider------- */
/* スライダーを囲む要素に下部の余白を追加し、ドットの表示領域を確保します。 */
.activity-slider-wrapper { /* 例: スライダーを囲むdiv要素など */
    margin-bottom: 50px; /* ドットが表示されるのに十分な余白を確保 */
}
/* slick slider 矢印のレスポンシブ設定*/
/* デフォルト（768px未満）では矢印を非表示にする */
.activity-slider-wrapper .slick-prev,
.activity-slider-wrapper .slick-next {
    display: none;
}

/* 768px以上で矢印を表示する */
@media screen and (min-width: 768px) {
    .activity-slider-wrapper .slick-prev,
    .activity-slider-wrapper .slick-next {
        display: block;
    }
}

/* フッター上の装飾の位置調整 */
.footer-decoration {
    margin-top: -20vw; /* transformによる隙間を埋めるため上に引き上げる */
    position: relative;
    z-index: 5; /* activityセクションの白背景の上に重ねる */
}