.card-slider {
    display: flex;
    width: 100%;
    padding: 20px 0;
    --scroll-gap: var(--scroll-gap);
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: auto; /* IE用 */
    scrollbar-width: auto; /* Firefox用 */
    scroll-padding-left: 20px; /* 初期スクロール位置を20px後ろに */
}

/* スクロールバーのデザイン */
.card-slider::-webkit-scrollbar {
    height: 8px; /* 横スクロールバーの高さ */
}

.card-slider::-webkit-scrollbar-thumb {
    background: #aaa; /* スクロールバーの色 */
    border-radius: 4px; /* 角を丸める */
}

.card-slider::-webkit-scrollbar-track {
    background: #f1f1f1; /* スクロールバーの背景色 */
}

.card-wrapper {
    flex: 0 0 auto;
    width: 300px;
    margin-right: 1px;
    margin-left: 1px;
}

.card {
    width: 300px;
    height: 330px;
}

.scrolling-wrapper, .card-slider {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding: 20px 0;
    scroll-snap-type: x mandatory;
}

.col-6, .card-wrapper {
    flex: 0 0 auto;
    width: 300px;
    margin-right: 30px;
    scroll-snap-align: start;
}

.card-wrapper:first-child {
    margin-left: 20px; /* 最初のカードだけ左側に余白をつける */
}


:root {
    --card-width: 300px;
    --card-margin: 10px;
    --scroll-gap: calc(var(--card-width) + var(--card-margin) * 2);
    --transform-100: calc(-1 * var(--scroll-gap) * 6);
}



.card-wrapper {
    width: var(--card-width);
    flex-shrink: 0;
    animation: infinity-scroll 100s linear infinite;
    margin: 0 var(--card-margin);
}


.card {
    width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} 

.card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-text {
    flex-grow: 1; /* 空いたスペースを埋める */
}

.text-center {
    margin-top: auto; /* ボタンを下に固定 */
}

.card-text-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.5em; /* 1行の高さ * 3行分 (1.5em * 3) */
    line-height: 1.5em;
}

.intern-know-item {
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 0 5px 0 #ddd;
    border-radius: 10px;
    margin: 30px 0;
    padding: 10px 25px 25px;
    font-family: "Noto Sans JP" !important;
}

.intern-know-item .question {
    font-weight: bold;
    margin: 15px 0 15px 25px;
    font-size: 20px;
    color: #198754;
}

.intern-know-item .answer {
    font-size: 14.5px;
    line-height: 27px;
}


.intern-know-item {
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 0 5px 0 #ddd;
    border-radius: 10px;
    margin: 30px 0;
    padding: 10px 25px 25px;
    font-family: "Noto Sans JP" !important;
}

.what-is-kokoshiro-body {
    font-size: 14.5px;
    line-height: 27px;
}

.carousel-wrapper.column-wrapper {
    height: 420px;
}

.carousel-wrapper {
    margin-top: 30px;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: scroll;
    height: 410px;
}

.carousel-menu {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
* {
    margin: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
}

.carousel-menu .carousel-nav {
    display: flex;
    flex-wrap: nowrap;
    padding: 20px 10px 0;
    font-size: 2em;
}

.intern-image {
    width: 100%;
    float: none;
    height: auto;
    position: relative;
    object-fit: cover;
    background: transparent;
    z-index: 0;
}

a.intern-image img {
    height: 150px;
}

.intern-image img {
    border-top-right-radius: 50px;
}
.intern-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

.carousel-wrapper.column-wrapper .intern-sentence {
    height: 150px;
}

.intern-sentence {
    width: 100%;
    padding: 15px 0 15px 4px;
    background: none;
    height: auto;
}

.carousel-wrapper.column-wrapper .column-title {
    height: auto;
}

.intern-sentence .column-title {
    padding: 0 10px;
    margin-bottom: 10px;
    font-size: 0.9em;
}
.column-title {
    font-size: 1em;
    font-weight: bold;
}

.carousel-wrapper.column-wrapper .column-cathcopy {
    height: auto;
}

.intern-sentence .column-cathcopy {
    padding: 0 10px;
    font-size: 0.8em;
    height: 40px;
}

a.intern-item {
    box-shadow: none;
    width: 290px;
    height: 40px;
    margin: 0px auto 0;
    padding: 9px;
    font-size: 0.9em;
    position: relative;
    background: #313131;
    color: #fff;
    border-radius: 20px;
    text-align: center;
}

.intern-item {
    display: block;
    box-shadow: 5px 5px 5px rgb(255 173 55 / 25%);
    height: 145px;
    position: relative;
    margin: 0 0 30px 0;
    overflow: hidden;
    background: #eee;
    z-index: 0;
}

.carousel-item2 {
    min-width: 320px;
    width: 320px;
    box-shadow: 5px 5px 5px -5px #aaa;
    padding-bottom: 3px;
    margin: 0 15px 0 0;
    height: 390px;
    border-radius: 10px;
    border-top-right-radius: 50px;
}

.carousel-menu .carousel-nav .carousel-left {
    margin-right: 20px;
}

.carousel-right, .carousel-left {
    cursor: pointer;
}

a.archive {
    border-radius: 20px;
    box-shadow: 2px 1px 5px -2px #aaa;
    padding: 7px 30px;
    margin: 20px 0;
    display: inline-block;
}

a {
    text-decoration: none;
    color: #000;
}

.custom-bg {
    background-image: url('top.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 995.98px) {
    .custom-bg {
        background-image: url('top_sp_文字なし.png');
        background-position: top center; /* 上部を揃える */
        background-repeat: no-repeat; /* 画像の繰り返しを防ぐ */
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: flex-end !important; /* justify-content-center を強制上書き */
        align-items: flex-end; /* スマホ時に上寄せ */
        padding-top: 20px; /* 上部に少し余白を持たせる */
    }
    .custom-bg .btn {
        width: 100%;
    }
}

@media (max-width: 995.98px) {
    .mobile-heading {
        display: block;
        font-size: 1.5rem; /* メインのタイトルサイズ */
        font-weight: bold;
        text-align: center;
        line-height: 1.4;
        color: black;
        text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8); /* 白い縁取り */
        margin-bottom: 10px;
    }

    .highlight {
        font-size: 2.6rem; /* 1,000種類以上の文字を大きく */
        font-weight: bold;
    }

    .sub-text {
        font-size: 1.3rem;
        font-weight: normal;
        text-align: center;
        color: black;
        text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
        margin-bottom: 20px;
    }
}

@media (min-width: 996px) {
    .mobile-heading,
    .sub-text {
        display: none;
    }
}




.text-button {
    background: none;
    border: none;
    color: #007bff;
    font-size: 14px;
    cursor: pointer;
    padding: 5px;
    text-decoration: none; /* アンダーバーを非表示 */
    white-space: nowrap; /* 改行を防ぐ */
    display: inline-flex;
}

.text-button:hover {
    color: #0056b3;
}

.divider {
    width: 90%;
    margin: 15px auto;
    border: none;
    border-top: 1px solid #ddd; /* 区切り線のデザイン */
}

.icon {
    width: 16px;
    height: 16px;
    margin-left: 5px;
}