@charset "UTF-8";

/*  
 ----------------------------------------
 トップページ専用css
 ----------------------------------------
*/

/* 
 ----------------------------------------
 スクロールするエリア(メイン・フッター)
 ---------------------------------------- 
*/
/* ---------- メイン ---------- */
.main-container {
    display: flex;
}

/* ----- サイドバー ----- */
.sidebar-non-scroll {
    width: auto;
    position: unset;
    order: 2;
}

/* サブナビ(トップ) */
.sub-nav_top {
    margin: 20px 0;

    /* サイドナビ：全体 */
    .side-nav-area {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2.0rem;

        a {
            text-decoration: none;
            font-size: 2.5rem;
            letter-spacing: .5rem;
        }
    }

    /* サイドナビ：カテゴリ */
    /* ボタン候補➀：影つき */
    .shadow {
        a {
            padding: 2.0rem;
            text-align: center;

            background-color: var(--color-base);
            border: 5px solid var(--color-main);
            color: var(--color-main);
            box-shadow: 12px 12px 0 var(--color-main);
        }
    }

    /* ボタン候補➁：円◯と矢印→ */
    .circle-arrow {
        a {
            /* 円の大きさの1/4 */
            padding: 2.0rem;
            text-align: left;

            position: relative;
            background: none;
            color: var(--color-main);

            /* リンク文字 */
            span.sub-nav-top-title {
                padding: 0;
                position: relative;
                top: 0;
                /* 文字をずらす */
                left: 3.0rem;
            }

            /* 矢印の"－" */
            span.arrow {
                position: absolute;
                /* 垂直方向の中央寄せ = (50% - 矢印の太さ(height))/2 */
                top: calc(50% - 6px/2);
                margin: 0 -12px;
                width: 45px;
                height: 6px;
                border-radius: 9999px;
                background-color: var(--color-main);
            }

            /* 矢印の"＞" */
            span.arrow::before,
            span.arrow::after {
                content: '';
                position: absolute;
                /* 垂直方向の中央寄せ = 50% - 矢印の太さ(height)/2 */
                top: calc(50% - 6px/2);
                right: -7px;
                width: 24px;
                height: 6px;
                background-color: var(--color-main);
                border-radius: 9999px;
                /* 基点の調整 = X方向：100% - 矢印の太さ(height)/2, Y方向：50% */
                transform-origin: calc(100% - 6px/2) 50%;
            }

            span.arrow::before {
                transform: rotate(45deg);
            }

            span.arrow::after {
                transform: rotate(-45deg);
            }
        }

        /* 円 */
        a::before {
            position: absolute;
            content: '';
            border-radius: 100%;

            top: 0;
            left: 0;
            width: 8.0rem;
            height: 8.0rem;
            background: var(--color-sub);
            opacity: 1;
        }


        /* 学内専用のリンク */
        a.in-campus {

            /* 矢印の"－" */
            span.arrow {
                background-color: var(--color-sub);
            }

            /* 矢印の"＞" */
            span.arrow::before,
            span.arrow::after {
                background-color: var(--color-sub);
            }

            /* 文字の色を変える */
            span.change-color {
                color: var(--color-sub);

                span.change-color-hover {
                    color: var(--color-main);
                }
            }
        }

        /* 学内専用のリンクの円 */
        a.in-campus::before {
            background: var(--color-main);
        }
    }

    /* ボタン候補➂：背景をずらした */
    .shift-background {
        a {
            padding: 1.0rem 2.0rem;
            text-align: center;
            height: 6rem;

            position: relative;
            color: var(--color-main);
            background: var(--color-sub);

            /* リンク文字 */
            span.sub-nav-top-title {
                padding: 1.0rem 2.0rem;
                border: 2px solid var(--color-main);
                width: calc(100% + 1px);
                height: calc(100% + 1px);
                position: absolute;
                top: 0;
                left: 0;
                transform: translateX(-15px) translateY(-15px);
            }
        }
    }

    /* 学内専用の区切り線 */
    .delimiter-line {
        position: relative;
        padding: 0;
        text-align: center;
        font-size: 1.875rem;
        color: var(--color-main);

        span {
            position: relative;
            padding: 0;
            background: var(--color-base);
        }
    }

    .delimiter-line:before,
    .delimiter-line:after {
        position: absolute;
        top: calc(50%);
        width: 40%;
        height: auto;
        margin: 0;
        content: '';
    }

    .delimiter-line:before {
        left: 0;
        margin-right: 10px;
    }

    .delimiter-line:after {
        right: 0;
        margin-left: 10px;
    }

    .delimiter-line-dotted:before,
    .delimiter-line-dotted:after {
        border-top: dotted 10px var(--color-main);
    }

    .delimiter-line-solid:before,
    .delimiter-line-solid::after {
        border-top: solid 4px var(--color-main);
    }

}

/* ----- メインコンテンツ ----- */
.maincol-scroll {
    width: auto;
    order: 1;
    margin: 0;
}