@charset "UTF-8";
/*
top.css
*/
@media (min-width: 576px) { /*sm*/}
@media (min-width: 768px) { /*md*/}
@media (min-width: 992px) { /*lg*/}
@media (min-width: 1200px) { /*xl*/}
@media (min-width: 1400px) { /*xxl*/}


/* ---------- ↓ トップページ #home ↓ ---------- */
#home {}

/*---↓ カルーセル ↓ ---*/
/* カルーセルテキストのスタイル */
.carousel-text {
	position: absolute;
    left: 50%;
    /* 親要素の上から50%の位置に、さらにヘッダー高さ60pxの半分下へ移動する */
    top: calc(50% + 30px); /* スマホ時: ヘッダーの高さ60px / 2 = 30px) */
    transform: translate(-50%, -50%);
    z-index: 200;
    width: 100%;
    max-width: 835px;
}

/* カルーセルテキストの画像 */
.carousel-text img {
    width: 100%;
    height: auto;
    display: block;
}

/* カルーセルスライド内の画像 */
.carousel-item img {
    object-fit: cover;
    aspect-ratio: 375 / 380;
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    #carousel-top,
    .carousel-inner {
        height: 800px;
        overflow: hidden;
    }
    .carousel-text {
        width: 835px;
        top: calc(50% + 58px); /* ヘッダー(116px)の高さの半分(116px / 2 = 58px) */
    }
    .carousel-item img {
        height: 800px; 
        width: 100%; 
        aspect-ratio: auto; 
    }  
}


/*---↓ ショートカット ↓ ---*/
.shortcut-list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 24px;
    margin: 0 auto;
    padding-left: 0;
    width: 100%;
    list-style: none;
}

.shortcut-list li {
    display: flex;
    flex: 0 0 100%;/* 初期表示は1列 */
    flex-direction: column;
    min-width: 150px;
    border: 1px solid var(--c-k3);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
}

@media (min-width: 768px) {
    .shortcut-list li {
        flex: 0 0 calc(50% - 12px);/* 2列表示 */
    }
}

@media (min-width: 992px) {
    .shortcut-list li {
        flex: 0 0 calc(33.333% - 16px); /* 3列表示 */
    }
}


/*---↓ リンクサイト ↓ ---*/
.link-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 1rem;
    margin: 0 auto;
    padding-left: 0;
    width: 100%;
    list-style: none;  
}

.link-list li {
    display: flex;
    flex: 0 0 100%; /* 初期表示は1列 */
    flex-direction: column;
    min-width: 150px;
    text-align: center;  
}

@media (min-width: 768px)  {
    .link-list： {
        gap: 1.5rem;
    }
}

@media (min-width: 768px)  {
    .link-list li {
        flex: 0 0 calc(50% - 12px); /* 2列表示 (50% - gapの半分) */
    }
}

@media (min-width: 992px) {
    .link-list li {
        flex: 0 0 calc(33.333% - 16px); /* 3列表示 (33.333% - gapの2/3を引く) */
       
    }
}

/* ---------- ↑ トップページ #home ↑ ---------- */