@charset "utf-8";

/* ========================================================
    カラールート設定
======================================================== */
:root {
  /* インタラクション用カラー */
  --color-focus: #4a90e2;             /* キーボードフォーカス */
  --color-hover: #4a90e2;             /* マウスホバー */
  --color-accent: #4a90e2;            /* アクティブ・強調 */
  --color-accent-bg: rgba(74, 144, 226, 0.1);  /* 薄い背景 */
  
  /* テキストカラー */
  --color-text-light: #666;           /* サブテキスト */
  --color-black: #2b2b2b;                /* 濃いテキスト・ボーダー */
  --color-white: #ffffff;                /* 白 */
  
  /* リンクカラー */
  --color-link: #5fa4da;              /* リンク */
  --color-link-hover: #ff1493;        /* リンクホバー */
  
  /* 背景・シャドウ */
  --color-bg-black:#2b2b2b;
  --color-bg-white: #ffffff;
  --color-shadow: rgba(0, 0, 0, 0.1); /* 影・ボーダー */
  --color-border: rgba(0, 0, 0, 0.1); /* ボーダー */
}

/* ========================================================
    アクセシビリティ対応
======================================================== */

@media (prefers-reduced-motion: reduce) {
    /* すべてのアニメーションを最小化 */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    /* スクロールアニメーションを無効化 */
    .ksc-blt01-wrap,
    .ksc-image-stream,
    .ksc-kanji-slide,
    .ksc-kanji-image,
    .ksc-kanji-text {
        animation: none !important;
    }
    
    /* ホバーアニメーションを無効化 */
    .ksc-category01-card,
    .ksc-ranking01-card,
    .ksc-ranking01-item,
    .viewmore-button,
    .ksc-osusume01-button {
        transition: none !important;
        transform: none !important;
    }
    
    .viewmore-button:hover::before {
        animation: none !important;
    }
    
    /* アニメーションするコンテンツをすべて表示 */
    .ksc-kanji-slide {
        opacity: 1 !important;
        position: relative !important;
    }
}

/* ========================================================
    共通
======================================================== */

/* サイドバー対応 */
body {
	padding-left:40px;
}

@media (max-width: 619px) {
  body {
	padding-left:0px;
  }
}

/* ページタイトルを完全に非表示（GeneratePress用） */
.entry-header {
    display: none !important;
}

/* br調整 */
.sp_400 {
  display: none;
  }

@media screen and (max-width: 1024px) {
    .sp_400 {
      display: block;
    }
}
@media screen and (max-width: 400px) {
    .sp_400 {
      display: none;
    }
}

/* btn */

.link a{
  color: var(--color-link);
}

.link a:hover{
  color: var(--color-link-hover);
}

.txt_right{
 text-align: right;
}

/* スキップリンク */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 12px 24px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 20px;
}

/* フォーカス表示 */
*:focus-visible {
    outline: 3px solid #007acc;
    outline-offset: 2px;
}


/* view more ボタン */

.viewmore-button-container {
    padding: 0 20px 20px;
    overflow: visible;
    position: relative;
}

.viewmore-button {
    font-family: "Medula One", system-ui;
    font-size: 2rem;
    width: 100%;
    padding: 5px 15px 0px 60px;
    background: white;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    color: #f39c12;
    cursor: pointer;
    transition: all 0.4s ease;
    text-align: right;
    position: relative;
    overflow: visible;
    transform: translateX(0);
    text-decoration: none;
    display: block;
}

/* ◇デザイン */
.viewmore-button::before {
    content: '';
    position: absolute;
    left: 15px;
    bottom: -1px;
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    background: transparent;
    transform: rotate(-15deg);
    transition: all 0.4s ease;
}

.viewmore-button:hover {
    color: #e67e22;
    transform: translateX(10px);
    border-color: #f39c12;
}

.viewmore-button:hover::before {
    border-color: #f39c12;
    animation: diamondHoverSway 1.5s ease-in-out infinite;
}

/* ゆらゆらアニメーション */
@keyframes diamondHoverSway {
    0%, 100% {
        transform: rotate(-15deg) translateX(0px);
    }
    50% {
        transform: rotate(-8deg) translateX(4px);
    }
}

@media (max-width: 723px) {
    .viewmore-button-container {
        padding: 0 15px 10px;
    }
    
    .viewmore-button {
        font-size: 1.6rem;
        padding: 5px 10px 0px 40px;
    }
    
    .viewmore-button::before {
        width: 20px;
        height: 20px;
        left: 10px;
    }
}

@media (max-width: 384px) {
    .viewmore-button {
        font-size: 1.2rem;
        padding: 3px 8px 0px 35px;
    }
}

/* セクションタイトル */

.ksc-section-title{
    margin-bottom: 40px;
}

.ksc-section-title h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 40px 0 10px 60px;
}

.ksc-section-title-en h2 {
    font-family: "Libre Baskerville", serif;
    font-size: 1.2rem;
    letter-spacing: 2px;
    margin: 115px 0 10px 60px;
}

/* コンテナタイトル */
.ksc-container-title{
  font-family: "Londrina Solid", sans-serif;
  font-size: 7.5rem;
  line-height: 6rem;
  margin: 20px 0px 40px 60px;
  color:#f1f1f1;
}

/* 100%ライン */
.ksc-title-line{
    width:100%;
    border-bottom: 1px solid #2b2b2b;
}

@media (max-width: 619px) {
.ksc-section-title{
    margin-bottom: 15px;
}

.ksc-section-title h2 {
    margin: 40px 0 0 10px;
}
.ksc-section-title-en h2 {
    margin: 60px 0 10px 10px;
    }
.ksc-container-title{
    margin: 20px 0px 40px 20px;
}
}

@media (max-width: 480px) {
.ksc-section-title h2 {
    margin: 40px 0 0 10px;
}
.ksc-container-title{
  font-size: 6rem;
  line-height: 4.5rem;
}
}

@media (max-width: 349px) {
.ksc-container-title{
  font-size: 4.5rem;
  line-height: 3.5rem;
    }
}

/* ========================================================
    ヘッダー
======================================================== */
.ksc-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: transparent;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0 30px;
    box-sizing: border-box;
}

.ksc-header:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
}

.ksc-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.ksc-header-right {
    display: flex;
    align-items: center;
    gap: 25px;
    background: var(--color-white);
    backdrop-filter: blur(15px);
    border: 1px solid var(--color-border);
    border-radius: 25px 0 0 25px;
    border-right: none;
    padding: 8px 25px;
    box-shadow: 0 4px 20px var(--color-shadow);
    transition: all 0.3s ease;
    margin-right: 0;
}

.ksc-header-right:hover {
    background: var(--color-bg-white);
    box-shadow: 0 6px 25px var(--color-shadow);
}

/* ロゴ */

.ksc-logo h1{
    font-family: "Sawarabi Mincho", serif;
    font-size: 1.5rem;
    font-weight: 200;
    align-items: center;
    text-decoration: none;
}

.ksc-logo p{
  font-size: 0.9rem;
  margin-top: 0px;
}

.ksc-logo a {
    text-decoration: none;
}

.ksc-logo a:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.ksc-logo img {
    height: 35px;
    width: auto;
}


/* ========================================================
    ハンバーガーボタン
======================================================== */
.ksc-hamburger-container {
    position: fixed;
    left: 0;
    top: 130px; /* ヘッダーの高さ分下げる */
    width: 50px;
    height: 60px;
    background: var(--color-bg-white);
    backdrop-filter: blur(10px);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    z-index: 1002; /* サイドバーより前面に */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 0;
}

.ksc-hamburger-container:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    background: var(--color-bg-white);
}

/* ハンバーガーアイコンのスタイル */
.ksc-hamburger-icon {
    width: 20px;
    height: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ksc-hamburger-icon span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--color-bg-black);
    transition: all 0.3s ease;
    transform-origin: center;
}

/* クリックで開いた時のアニメーション（×マークに変化） */
.ksc-sidebar-container.ksc-clicked-open ~ .ksc-hamburger-container .ksc-hamburger-icon span:nth-child(1),
.ksc-hamburger-container.ksc-clicked-open .ksc-hamburger-icon span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.ksc-sidebar-container.ksc-clicked-open ~ .ksc-hamburger-container .ksc-hamburger-icon span:nth-child(2),
.ksc-hamburger-container.ksc-clicked-open .ksc-hamburger-icon span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.ksc-sidebar-container.ksc-clicked-open ~ .ksc-hamburger-container .ksc-hamburger-icon span:nth-child(3),
.ksc-hamburger-container.ksc-clicked-open .ksc-hamburger-icon span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.ksc-search-container {
    position: relative;
}

/* ========================================================
    言語スイッチャー
======================================================== */
.ksc-language-switcher {
    position: relative;
}

.ksc-language-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 6px 8px;
    border-radius: 4px;
    /* 修正：デフォルトのテキストカラーを明示的に設定 */
    color: var(--color-black) !important;
    font-size: 14px;
    font-weight: 500;
}

.ksc-language-button:hover {
    color: var(--color-hover) !important;
    background: var(--color-accent-bg);
}

.ksc-language-button:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    color: var(--color-focus) !important;
    background: var(--color-accent-bg);
}

.ksc-current-lang {
    color: inherit !important; /* 重要：親要素の色を確実に継承 */
    font-weight: inherit;
    white-space: nowrap;
}

.ksc-lang-arrow {
    font-size: 10px;
    transition: transform 0.3s ease;
    color: inherit !important; /* 重要：親要素の色を確実に継承 */
}

.ksc-language-button[aria-expanded="true"] .ksc-lang-arrow {
    transform: rotate(180deg);
}

/* 開いている時のボタンスタイル */
.ksc-language-button[aria-expanded="true"] {
    background: var(--color-accent-bg) !important;
    color: var(--color-accent) !important;
}

.ksc-language-button[aria-expanded="true"] .ksc-current-lang,
.ksc-language-button[aria-expanded="true"] .ksc-lang-arrow {
    color: var(--color-accent) !important;
}

.ksc-language-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color-bg-white);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    list-style: none;
    margin: 8px 0 0 0;
    padding: 8px 0;
    min-width: 140px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1003; /* より前面に表示 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.ksc-language-menu[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ksc-language-menu li {
    margin: 0;
    padding: 0;
}

.ksc-language-menu a {
    display: block;
    padding: 10px 16px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    color: var(--color-black) !important;
    border-radius: 6px;
    margin: 2px 8px;
    white-space: nowrap;
}

.ksc-language-menu a:hover {
    background: var(--color-accent-bg) !important;
    color: var(--color-hover) !important;
    transform: translateX(2px);
}

.ksc-language-menu a:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
    background: var(--color-accent-bg) !important;
    color: var(--color-focus) !important;
}

.ksc-language-menu a.current-language {
    background: var(--color-accent-bg);
    color: var(--color-accent) !important;
    font-weight: 600;
}

.ksc-header-mobile-search {
    display: none;
}

/* ========================================================
    サイドバー
======================================================== */
.ksc-sidebar-container {
    position: fixed;
    left: 0;
    top: 190px; /* ハンバーガーボタンの下から開始 */
    z-index: 1000;
}

.ksc-sidebar {
    position: fixed;
    left: 0;
    top: 190px;
    width: 50px;
    height: calc(100vh - 190px);
    background: var(--color-bg-white);
    backdrop-filter: blur(10px);
    border-right: 1px solid var(--color-border);
    z-index: 101;
    transition: width 0.3s ease;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ksc-sidebar-container:hover .ksc-sidebar {
    width: 200px;
}

.ksc-sidebar-container:hover .ksc-sidebar .ksc-sidebar-text {
    opacity: 1;
}

.ksc-sidebar-container.ksc-clicked-open .ksc-sidebar {
    width: 200px !important;
}

.ksc-sidebar-container.ksc-clicked-open .ksc-sidebar .ksc-sidebar-text {
    opacity: 1 !important;
}

.ksc-sidebar-container.ksc-clicked-open:hover .ksc-sidebar {
    width: 200px;
}

.ksc-sidebar-item {
    display: flex;
    align-items: center;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--color-border);
    min-height: 50px;
    box-sizing: border-box;
}

.ksc-sidebar-item:first-child {
    border-top: none;
}

.ksc-sidebar-item:hover {
    background: var(--color-accent-bg);
    border-left: 3px solid var(--color-hover);
}

.ksc-sidebar-item:hover .ksc-sidebar-icon {
    color: var(--color-hover);
}

.ksc-sidebar-item:hover .ksc-sidebar-text {
    color: var(--color-hover);
}

.ksc-sidebar-item:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
    background: var(--color-accent-bg);
    border-left: 3px solid var(--color-focus);
}

.ksc-sidebar-item:focus-visible .ksc-sidebar-icon {
    color: var(--color-focus);
}

.ksc-sidebar-item:focus-visible .ksc-sidebar-text {
    color: var(--color-focus);
}

.ksc-sidebar-item:focus-visible .ksc-sidebar-icon {
    color: var(--color-primary);
}

.ksc-sidebar-item:focus-visible .ksc-sidebar-text {
    color: var(--color-primary);
}

.ksc-sidebar-item .ksc-sidebar-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
}

.ksc-sidebar-text {
    margin-left: 15px;
    font-size: 0.9rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease 0.1s;
    font-weight: 500;
}

.ksc-sidebar-item.ksc-active {
    background: var(--color-accent-bg);
    border-left: 3px solid var(--color-accent);
}

.ksc-sidebar-item.ksc-active .ksc-sidebar-icon {
    color: var(--color-accent);
}

.ksc-sidebar-item.ksc-active .ksc-sidebar-text {
    color: var(--color-accent);
}

.ksc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-contrast: high) {
    .ksc-hamburger-container {
        border: 2px solid ButtonText;
        background: ButtonFace;
    }
    
    .ksc-sidebar {
        border-right: 2px solid;
    }

    .ksc-hamburger-icon span {
        background-color: ButtonText;
    }
    
    .ksc-sidebar-item {
        border-bottom: 1px solid;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ksc-sidebar,
    .ksc-sidebar-item,
    .ksc-hamburger-icon span,
    .ksc-sidebar-text,
    .ksc-hamburger-container {
        transition: none;
    }
    
    .ksc-sidebar-container.ksc-clicked-open .ksc-hamburger-icon span:nth-child(1),
    .ksc-sidebar-container.ksc-clicked-open .ksc-hamburger-icon span:nth-child(2),
    .ksc-sidebar-container.ksc-clicked-open .ksc-hamburger-icon span:nth-child(3) {
        transition: none;
    }
}

@media (max-width: 619px) {
    .ksc-header {
        top: 10px;
        height: 100px;
        flex-direction: column;
        align-items: stretch;
        padding: 10px 0 10px 20px;
        gap: 0;
        justify-content: space-between;
    }
    
    .ksc-header-left {
        justify-content: flex-start;
        align-items: center;
        order: 1;
    }
    
    .ksc-header-right {
        justify-content: flex-end;
        align-self: flex-end;
        position: absolute;
        top: 10px;
        right: 0;
        border-radius: 20px 0 0 20px;
        margin-right: 0;
        padding-right: 15px;
        height: 40px;
        order: 1;
    }
    
    .ksc-header-mobile-search {
        display: block;
        width: calc(100% - 20px);
        order: 2;
        margin-top: 10px;
    }
    
    .ksc-search-container {
        display: none;
    }
    
    .ksc-hamburger-container {
        top: 130px;
        width: 50px;
        height: 50px;
        display: flex;
    }
    
    .ksc-sidebar-container {
        top: 180px;
    }
    
    .ksc-sidebar {
        top: 180px;
        height: calc(100vh - 180px);
        display: none;
    }
    
    .ksc-sidebar-container:hover .ksc-sidebar {
        display: none !important;
    }
    
    .ksc-sidebar-container:hover .ksc-sidebar .ksc-sidebar-text {
        opacity: 0 !important;
    }
    
    .ksc-sidebar-container.ksc-clicked-open .ksc-sidebar {
        display: block !important;
        width: 100vw !important;
        top: 180px !important;
        height: calc(100vh - 180px) !important;
        left: 0 !important;
        background: var(--color-bg-white) !important;
        backdrop-filter: blur(15px) !important;
        border: none !important;
        box-shadow: 0 4px 20px var(--color-shadow) !important;
    }
    
    .ksc-sidebar-container.ksc-clicked-open .ksc-sidebar .ksc-sidebar-text {
        opacity: 1 !important;
    }
    
    .ksc-sidebar-container.ksc-clicked-open:hover .ksc-sidebar {
        display: block !important;
        width: 100vw !important;
    }
    
    .ksc-sidebar-container.ksc-clicked-open:hover .ksc-sidebar .ksc-sidebar-text {
        opacity: 1 !important;
    }
    
    .ksc-sidebar-item {
        padding: 20px 25px !important;
        min-height: 60px !important;
        border-bottom: 1px solid var(--color-border) !important;
    }
    
    .ksc-sidebar-item .ksc-sidebar-icon {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
    }
    
    .ksc-sidebar-text {
        margin-left: 20px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
    }
}

/* ========================================================
    フロントページ
======================================================== */


        /* メインコンテナ */
        .ksc-main-container {
            position: relative;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            min-height: 100vh;
            padding: 0 20px;
            overflow: visible; /* はみ出しを許可 */
        }

        /* 金色の円（画像） */
        .ksc-golden-circle {
            position: absolute;
            opacity: 0.7;
        }

        .ksc-golden-circle-1 {
            width: 300px;
            height: 300px;
            top: 50px;
            left: -50px;
        }

        .ksc-golden-circle-2 {
            width: 200px;
            height: 200px;
            bottom: 100px;
            left: 100px;
        }

        .ksc-golden-circle img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* テキストセクション */
        .ksc-text-section {
            position: relative;
            z-index: 10;
            padding: 100px 0;
            width: 50%;
        }

        /* キャッチコピー（固定表示） */
        .ksc-catchphrase {
            font-size: 18px;
            margin-bottom: 30px;
            font-weight: 300;
        }

        /* アニメーションコンテナ */
        .ksc-animation-container {
            position: relative;
            height: 300px; /* 固定高さでレイアウト安定 */
        }

        /* 柔軟なアニメーションシステム */
        /* ========================================
           言語別タイミング設定
        ======================================== */
        
        /* 日本語版（デフォルト） */
        .ksc-kanji-slide {
            position: absolute;
            width: 100%;
            opacity: 0;
            --pattern-count: 5; /* パターン数（変更可能） */
            --pattern-duration: 8s; /* 日本語：8秒 */
            --total-duration: calc(var(--pattern-count) * var(--pattern-duration)); /* 40s */
        }

        /* 多言語版（英語など） */
        .ksc-lang-en .ksc-kanji-slide,
        .ksc-lang-multi .ksc-kanji-slide {
            --pattern-duration: 16s; /* 多言語：16秒 */
            --total-duration: calc(var(--pattern-count) * var(--pattern-duration)); /* 80s */
        }

        /* 
        使用方法：
        日本語サイト：<div class="ksc-animation-container"> （デフォルト8秒）
        英語サイト：<div class="ksc-animation-container ksc-lang-en">
        その他多言語：<div class="ksc-animation-container ksc-lang-multi">
        
        または個別設定：
        .ksc-lang-es .ksc-kanji-slide { --pattern-duration: 14s; } // スペイン語：14秒
        .ksc-lang-fr .ksc-kanji-slide { --pattern-duration: 18s; } // フランス語：18秒
        */

        .ksc-kanji-slide {
            animation: ksc-slidePattern var(--total-duration) infinite;
        }

        /* パターンごとの遅延時間（nth-childで自動計算） */
        .ksc-kanji-slide:nth-child(1) { animation-delay: calc(0 * var(--pattern-duration)); }
        .ksc-kanji-slide:nth-child(2) { animation-delay: calc(1 * var(--pattern-duration)); }
        .ksc-kanji-slide:nth-child(3) { animation-delay: calc(2 * var(--pattern-duration)); }
        .ksc-kanji-slide:nth-child(4) { animation-delay: calc(3 * var(--pattern-duration)); }
        .ksc-kanji-slide:nth-child(5) { animation-delay: calc(4 * var(--pattern-duration)); }
        .ksc-kanji-slide:nth-child(6) { animation-delay: calc(5 * var(--pattern-duration)); }
        .ksc-kanji-slide:nth-child(7) { animation-delay: calc(6 * var(--pattern-duration)); }
        .ksc-kanji-slide:nth-child(8) { animation-delay: calc(7 * var(--pattern-duration)); }

        /* 1パターンのアニメーション（5パターンなので20%ずつ） */
        @keyframes ksc-slidePattern {
            0% { opacity: 0; }
            1.25% { opacity: 1; }   /* 表示開始 */
            15% { opacity: 1; }     /* 表示維持 */
            18.75% { opacity: 0; }  /* フェードアウト */
            20% { opacity: 0; }     /* 完全消失 */
            100% { opacity: 0; }    /* ループ終了まで非表示 */
        }

        /* 漢字画像のパターン（5パターンなので20%ずつ） */
        @keyframes ksc-kanjiPattern {
            0% { opacity: 0; transform: scale(0.8); }
            0.25% { opacity: 1; transform: scale(1); }  /* 表示開始 */
            15% { opacity: 1; transform: scale(1); }    /* 表示維持 */
            18.75% { opacity: 0; transform: scale(0.8); } /* フェードアウト */
            20% { opacity: 0; transform: scale(0.8); }   /* 完全消失 */
            100% { opacity: 0; transform: scale(0.8); }  /* ループ終了まで非表示 */
        }

        /* テキストのパターン（5パターンなので20%ずつ） */
        @keyframes ksc-textPattern {
            0% { width: 0; opacity: 0; }
            1% { width: 0; opacity: 1; }        /* タイピング開始 */
            18% { width: 100%; opacity: 1; }    /* タイピング完了（13.6秒で1文字1.5秒） */
            18.25% { width: 100%; opacity: 1; } /* 表示維持（読む時間：0.2秒） */
            18.75% { width: 100%; opacity: 0; } /* フェードアウト */
            20% { width: 0; opacity: 0; }       /* 完全消失 */
            100% { width: 0; opacity: 0; }      /* ループ終了まで非表示 */
        }

        /* 各要素のアニメーション */
        .ksc-main-kanji-image {
            width: 200px;
            height: auto;
            margin: 20px 0;
            opacity: 0;
            animation: ksc-kanjiPattern var(--total-duration) infinite;
        }

        .ksc-sub-text {
            font-size: 14px;
            color: var(--color-text-light);
            font-weight: 300;
            margin-top: 20px;
            opacity: 0;
            white-space: nowrap;
            overflow: hidden;
            width: 0;
            animation: ksc-textPattern var(--total-duration) infinite;
        }

        /* スライドごとに遅延を適用 */
        .ksc-kanji-slide:nth-child(1) .ksc-main-kanji-image,
        .ksc-kanji-slide:nth-child(1) .ksc-sub-text { animation-delay: calc(0 * var(--pattern-duration)); }
        
        .ksc-kanji-slide:nth-child(2) .ksc-main-kanji-image,
        .ksc-kanji-slide:nth-child(2) .ksc-sub-text { animation-delay: calc(1 * var(--pattern-duration)); }
        
        .ksc-kanji-slide:nth-child(3) .ksc-main-kanji-image,
        .ksc-kanji-slide:nth-child(3) .ksc-sub-text { animation-delay: calc(2 * var(--pattern-duration)); }
        
        .ksc-kanji-slide:nth-child(4) .ksc-main-kanji-image,
        .ksc-kanji-slide:nth-child(4) .ksc-sub-text { animation-delay: calc(3 * var(--pattern-duration)); }
        
        .ksc-kanji-slide:nth-child(5) .ksc-main-kanji-image,
        .ksc-kanji-slide:nth-child(5) .ksc-sub-text { animation-delay: calc(4 * var(--pattern-duration)); }



        /* 画像セクション */
        .ksc-image-section {
            position: absolute;
            top: 0;
            right: 0;
            width: 60%;
            height: 100vh;
            z-index: 5;
        }

        /* Explore unseen Japan テキスト（黒枠内） */
        .ksc-explore-text {
            position: absolute;
            color: white;
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 1px;
            text-transform: uppercase;
            z-index: 7;
            transform: none;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            left: 10px;
            top: 20px;
            text-shadow: 1px 1px 2px var(--color-shadow);
        }

        /* 3つの交差する枠 */
        .ksc-frame-container {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .ksc-frame {
            position: absolute;
            transform: rotate(15deg);
        }

        .ksc-frame-1 {
            width: 900px;  
            height: 700px; 
            background-color: var(--color-black);
            top: -10%;     
            left: -5%;     
            z-index: 3;
            overflow: hidden;
            position: relative;
        }

        .ksc-frame-2 {
            width: 400px;   
            height: 300px;  
            background-color: transparent;
            border: 2px solid var(--color-black);
            top: 20%;       
            left: 40%;      
            z-index: 2;
            transform: rotate(-20deg); 
        }

        .ksc-frame-3 {
            width: 300px;   
            height: 250px;  
            background-color: transparent;
            border: 2px solid var(--color-black);
            top: 60%;       
            left: 10%;      
            z-index: 1;
            transform: rotate(10deg);
        }

        /* 画像列コンテナ */
        .ksc-image-columns {
            position: absolute;
            width: 900px;
            height: 700px;
            display: flex;
            gap: 15px;
            transform: rotate(15deg);
            top: -10%;
            left: -5%;
            overflow: hidden;
            z-index:
        }

        .ksc-image-column {
            flex: 1;
            height:
            overflow: hidden;
            position: relative;
        }

        .ksc-image-stream {
            display: flex;
            flex-direction: column;
            gap: 8px;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        .ksc-column-1 .ksc-image-stream {
            animation-name: ksc-slideUp;
            animation-duration: 40s; /*ややゆっくり */
        }

        .ksc-column-2 .ksc-image-stream {
            animation-name: ksc-slideDown;
            animation-duration: 50s; /*超ゆっくり*/
        }

        .ksc-column-3 .ksc-image-stream {
            animation-name: ksc-slideUp;
            animation-duration: 45s;  /*ゆっくり */
        }

        @keyframes ksc-slideUp {
            from {
                transform: translateY(0);
            }
            to {
                transform: translateY(-50%);
            }
        }

        @keyframes ksc-slideDown {
            from {
                transform: translateY(-50%);
            }
            to {
                transform: translateY(0);
            }
        }

        /* 画像コンテナ - 固定サイズ枠 */
        .ksc-image-wrapper {
            width: 100%;
            overflow: hidden;
            border-radius: 5px;
        }

        /* ランダムサイズの枠（比率ベース） */
        .ksc-image-wrapper:nth-child(1) { aspect-ratio: 1 / 0.8; }
        .ksc-image-wrapper:nth-child(2) { aspect-ratio: 1 / 1.2; }
        .ksc-image-wrapper:nth-child(3) { aspect-ratio: 1 / 0.6; }
        .ksc-image-wrapper:nth-child(4) { aspect-ratio: 1 / 1.4; }
        .ksc-image-wrapper:nth-child(5) { aspect-ratio: 1 / 1.0; }
        .ksc-image-wrapper:nth-child(6) { aspect-ratio: 1 / 0.9; }
        .ksc-image-wrapper:nth-child(7) { aspect-ratio: 1 / 1.1; }
        .ksc-image-wrapper:nth-child(8) { aspect-ratio: 1 / 0.7; }

        /* 画像自体は100%表示 */
        .ksc-stream-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 今日のおすすめセクション */
        .ksc-recommendation-section {
            position: absolute;
            bottom: 50px;
            left: 0;
            z-index: 10;
        }

        .ksc-recommendation-title {
            font-size: 16px;
            font-weight: 500;
        }


/* ========================================================
    テロップ
======================================================== */

.ksc-telop {
    width: 100%;
    height: 60px;
    background: #333;
    color: white;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    z-index: 20;
}
        
.ksc-telop-text {
    white-space: nowrap;
    font-size: 1.4rem;
    font-weight: bold;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {
    .ksc-telop-text {
        animation: none !important;
    }
}


/* ===================================
   ksc-main-container
 =================================== */
.ksc-main-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: 800px;
    padding: 0 20px;
    margin-bottom: 0;
}

/* 金の円 */
.ksc-golden-circle {
    position: absolute;
    opacity: 0.7;
}

.golden-circle-1 {
    width: 200px;
    height: 200px;
    top: -50px;
    left: 20%;
}

.golden-circle-2 {
    width: 450px;
    height: 450px;
    bottom: 40px;
    left: -8%;
}

.ksc-golden-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* テキストセクション */
.ksc-main-text-section {
    position: relative;
    z-index: 10;
    padding: 100px 0;
    top:80px;
    left:10%;
    width: 50%;
}

.ksc-catchphrase {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 30px;
    font-weight: 700;
}

/* アニメーションコンテナ */
.ksc-main-animation-container {
    position: relative;
    height: 300px;
}

/* 日本語版(デフォルト) */
.ksc-kanji-slide {
    position: absolute;
    width: 100%;
    opacity: 0;
    --pattern-count: 5;
    --pattern-duration: 8s; /* 日本語用 */
    --total-duration: calc(var(--pattern-count) * var(--pattern-duration));
}

/* 英語版 */
.ksc-lang-en .ksc-kanji-slide {
    --pattern-duration: 16s; /* 英語用:16秒 */
    --total-duration: calc(var(--pattern-count) * var(--pattern-duration));
}

/* 他言語版 */
.ksc-lang-multi .ksc-kanji-slide {
    --pattern-duration: 12s; /* 他言語用:12秒 */
    --total-duration: calc(var(--pattern-count) * var(--pattern-duration));
}

.ksc-kanji-slide {
    animation: ksc-slidePattern var(--total-duration) infinite;
}

.ksc-kanji-slide:nth-child(1) { animation-delay: calc(0 * var(--pattern-duration)); }
.ksc-kanji-slide:nth-child(2) { animation-delay: calc(1 * var(--pattern-duration)); }
.ksc-kanji-slide:nth-child(3) { animation-delay: calc(2 * var(--pattern-duration)); }
.ksc-kanji-slide:nth-child(4) { animation-delay: calc(3 * var(--pattern-duration)); }
.ksc-kanji-slide:nth-child(5) { animation-delay: calc(4 * var(--pattern-duration)); }

@keyframes ksc-slidePattern {
    0% { opacity: 0; }
    0.5% { opacity: 0; }
    2% { opacity: 1; }
    15% { opacity: 1; }
    20% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes ksc-kanjiPattern {
    0% { opacity: 0; transform: scale(0.99); }
    0.1% { opacity: 0; transform: scale(0.99); }
    15% { opacity: 1; transform: scale(1); }
    20% { opacity: 0; transform: scale(0.99); }
    100% { opacity: 0; transform: scale(0.99); }
}

@keyframes ksc-textPattern {
    0% { width: 0; opacity: 0; }
    0.5% { width: 0; opacity: 0; }
    6% { width: 0; opacity: 1; }
    30% { width: 100%; opacity: 1; }
    40% { width: 100%; opacity: 1; }
    50% { width: 100%; opacity: 0; }
    100% { width: 0; opacity: 0; }
}

/* 多言語対応 */
.ksc-lang-en .ksc-kanji-text,
.ksc-lang-multi .ksc-kanji-text {
    font-size: 0.9rem;
    white-space: normal;
    height: auto;
    line-height: 1.3;
    max-width: 100%;
}

/* レスポンシブでの多言語調整 */
@media (max-width: 768px) {
    .ksc-lang-en .ksc-kanji-text,
    .ksc-lang-multi .ksc-kanji-text {
        font-size: 0.8rem;
        line-height: 1.2;
    }
}

@media (max-width: 320px) {
    .ksc-lang-en .ksc-kanji-text,
    .ksc-lang-multi .ksc-kanji-text {
        font-size: 9px;
        line-height: 1.1;
    }
}

.ksc-kanji-image {
    width: 200px;
    height: auto;
    margin: 20px 0;
    opacity: 0;
    animation: ksc-kanjiPattern var(--total-duration) infinite;
    transition: all 1.5s ease-in-out;
}

.ksc-kanji-text {
    font-family: "Sawarabi Mincho", serif;
    margin-left: 80px;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    animation: ksc-textPattern var(--total-duration) infinite;
    transition: all 1.2s ease-in-out;
}

@media (max-width: 1080px) {
.ksc-main-text-section {
    left:80px;
}
.ksc-kanji-text {
    margin-left: 40px;
}
}

@media (max-width: 820px) {
.ksc-kanji-text {
    margin-left: 0px;
}
}

@media (max-width: 768px) {
    .ksc-main-text-section {
        left: 5%;
        width: 90%;
        padding: 50px 0;
    }
    
    .ksc-catchphrase {
        font-size: 16px;
    }
    
    .ksc-kanji-image {
        width: 150px;
    }
    
    .ksc-kanji-text {
        font-size: 0.9rem;
        white-space: normal;
        height: auto;
        line-height: 1.4;
    }
}


@media (max-width: 480px) {
    .ksc-main-text-section {
        left: 2%;
        width: 96%;
        padding: 30px 0;
    }
    
    .ksc-catchphrase {
        font-size: 14px;
        margin-bottom: 20px;
    }
    
    .ksc-kanji-image {
        width: 120px;
    }
}

@media (max-width: 320px) {
    .ksc-main-text-section {
        left: 1%;
        width: 98%;
        padding: 20px 0;
    }
    
    .ksc-catchphrase {
        font-size: 13px;
        margin-bottom: 15px;
    }
    
    .ksc-kanji-image {
        width: 100px;
    }
    
    .ksc-kanji-text {
        font-size: 0.8rem;
    }
    
    .ksc-main-animation-container {
        height: 250px;
    }
}

/* スライドごとに遅延 */
.ksc-kanji-slide:nth-child(1) .ksc-kanji-image,
.ksc-kanji-slide:nth-child(1) .ksc-kanji-text { animation-delay: calc(0 * var(--pattern-duration)); }
.ksc-kanji-slide:nth-child(2) .ksc-kanji-image,
.ksc-kanji-slide:nth-child(2) .ksc-kanji-text { animation-delay: calc(1 * var(--pattern-duration)); }
.ksc-kanji-slide:nth-child(3) .ksc-kanji-image,
.ksc-kanji-slide:nth-child(3) .ksc-kanji-text { animation-delay: calc(2 * var(--pattern-duration)); }
.ksc-kanji-slide:nth-child(4) .ksc-kanji-image,
.ksc-kanji-slide:nth-child(4) .ksc-kanji-text { animation-delay: calc(3 * var(--pattern-duration)); }
.ksc-kanji-slide:nth-child(5) .ksc-kanji-image,
.ksc-kanji-slide:nth-child(5) .ksc-kanji-text { animation-delay: calc(4 * var(--pattern-duration)); }

/* 画像エリア */
.ksc-main-image-section {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 1150px;
    z-index: 5;
}

.ksc-main-image-container {
    position: absolute;
    width: 950px;
    height: 1000px;
    background-color: #2b2b2b;
    top: -10%;
    left: -5%;
    z-index: 3;
    overflow: hidden;
    transform: rotate(10deg);
    box-sizing: border-box;
}

.ksc-main-image-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 20px;
}

/* 文字の列 */
.ksc-main-image-text {
    width: 20px;
    height: 100%;
    overflow: hidden;
    flex-shrink: 0;
}

.ksc-main-image-text p {
    font-family: "Libre Baskerville", serif;
    color: #ffffff;
    font-size: 0.8rem;
    letter-spacing: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-orientation: mixed;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    white-space: nowrap;
    word-break: keep-all;
}

/* 画像の列 */
.ksc-main-image-column {
    flex: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.ksc-image-stream {
    display: flex;
    flex-direction: column;
    gap: 25px;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.ksc-main-image-column-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    flex-shrink: 0;
}

/* 画像自体 - aspect-ratio有効化 */
.ksc-main-image-column-wrap img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 各列で異なる速度 - カクつき防止のため微調整 */
.ksc-column-1 .ksc-image-stream {
    animation-name: ksc-slideUp;
    animation-duration: 41.7s;
}

.ksc-column-2 .ksc-image-stream {
    animation-name: ksc-slideDown;
    animation-duration: 53.2s;
}

.ksc-column-3 .ksc-image-stream {
    animation-name: ksc-slideUp;
    animation-duration: 47.8s;
}

@keyframes ksc-slideUp {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

@keyframes ksc-slideDown {
    from { transform: translateY(-50%); }
    to { transform: translateY(0); }
}

/* ランダムサイズの枠 */
.ksc-main-image-column-wrap:nth-child(1) { aspect-ratio: 1 / 0.8; }
.ksc-main-image-column-wrap:nth-child(2) { aspect-ratio: 1 / 1.2; }
.ksc-main-image-column-wrap:nth-child(3) { aspect-ratio: 1 / 0.6; }
.ksc-main-image-column-wrap:nth-child(4) { aspect-ratio: 1 / 1.4; }
.ksc-main-image-column-wrap:nth-child(5) { aspect-ratio: 1 / 1.0; }
.ksc-main-image-column-wrap:nth-child(6) { aspect-ratio: 1 / 0.9; }
.ksc-main-image-column-wrap:nth-child(7) { aspect-ratio: 1 / 1.1; }
.ksc-main-image-column-wrap:nth-child(8) { aspect-ratio: 1 / 0.7; }

/* 枠線のみの四角 - 黒い背景と同サイズ・同位置 */
.ksc-main-border {
    position: absolute;
    width: 800px;
    height: 750px;
    border: 0.2px solid #8b8a8a;
    z-index: 0;
    box-sizing: border-box;
    pointer-events: none;
}

/* 枠線1つ目 */
.ksc-main-border-1 {
    top: 0%;
    left: -10%;
    transform: rotate(-10deg);
}

/* 枠線2つ目 */
.ksc-main-border-2 {
    top: 5%;
    left: -15%;
    transform: rotate(-20deg);
}


/* ===================================
   ksc-osusume01-container
 =================================== */

.ksc-osusume01-container {
    max-width:100%;
    display: flex;
    margin: 0 auto;
    margin-top:40px;
    padding-right:5%;
}

/* 画像エリア */
.ksc-osusume01-image {
    flex: 55%;
    position: relative;
    max-width: 100%;
    height: auto;
}

.ksc-osusume01-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* テキストエリア */
.ksc-osusume01-text-wrap {
    flex: 45%;
    background: white;
    padding: 40px 0 0 40px;
}

/* Gridコンテナ */
.ksc-osusume01-grid {
    display: grid;
    grid-template-columns: 45% 55%;
    grid-template-rows: auto auto auto;
    gap: 20px;
}

.ksc-osusume01-title {
    font-family: "Londrina Solid", sans-serif;
    grid-column: 1 / -1;
    font-size: 7rem;
    font-weight: 900;
    color: #ddd;
    letter-spacing: 3px;
    margin-top:-60px;
}

.ksc-osusume01-left {
    grid-column: 1;
    grid-row: 2;
}

.ksc-osusume01-right {
    grid-column: 2;
    grid-row: 2;
}

.ksc-osusume01-bottom {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    flex-direction: row;
    background-color: #f5f5dc;
    align-items: center;
    padding: 20px 20px 10px 20px;
    gap:15px;
}

.ksc-osusume01-bottom-left {
    flex: 40%;
    display: flex;
    flex-direction: column;
    align-items: center; /* ←横方向の中央揃え（そのまま） */
    justify-content: center; /* ←縦方向の中央揃え（追加） */
}

.ksc-osusume01-bottom-right {
    flex: 60%;
}

.ksc-osusume01-left-main {
    font-size: 3rem;
    font-family: "Londrina Solid", sans-serif;
    font-weight: 900;
    margin-bottom: 5px;
}

.ksc-osusume01-left-sub {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.ksc-osusume01-subtitle-tour {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 15px;
}

.ksc-osusume01-icons {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.ksc-osusume01-icon {
    width: 30px;
    height: 30px;
}

.ksc-osusume01-icon.icon1 {
    background: #333;
}

.ksc-osusume01-icon.icon2 {
    background: #666;
}

.ksc-osusume01-icon.icon3 {
    background: #999;
}


/* 右エリア */
.ksc-osusume01-right p {
    line-height: 1.6;
    margin-bottom: 15px;
}

.ksc-osusume01-right-image {
    width: 100%;
    margin:20px 0;
}

.ksc-osusume01-right-image img{
    width: 100%;
}

/* 編集長おすすめ */
.ksc-osusume01-bottom-image {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
}

.ksc-osusume01-bottom-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* おすすめポイント */
.ksc-osusume01-point {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: -40px 0 10px 0;
}

.ksc-osusume01-point-label {
    font-size: 0.9rem;
    font-weight: 900;
}

.ksc-osusume01-point-name {
    font-family: "Londrina Solid", sans-serif;
    font-size: 1.6rem;
    line-height: 1.4rem;
    font-weight: 900;
    margin-top:0px;
}

.ksc-osusume01-point-title {
    font-size: 1.2rem;
    font-weight: 900;
    margin-bottom: 10px;
}

.ksc-osusume01-point-text {
    line-height: 1.6;
}

/* PC版：スマホ用ONSENを非表示 */
.ksc-osusume01-title-mobile {
    display: none;
}

@media (max-width: 1080px) {
.ksc-osusume01-bottom {
    flex-direction: column;
    padding: 20px 20px 10px 20px;
    gap:15px;
}

    .ksc-osusume01-bottom-left {
        flex: 100%;
        flex-direction: row;
        align-items: center;
        gap: 15px;
    }
    
    .ksc-osusume01-bottom-image {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
    }
    
    .ksc-osusume01-bottom-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .ksc-osusume01-point {
        margin: 0;
    }
    
    .ksc-osusume01-point-label {
        font-size: 0.9rem;
        font-weight: 900;
        margin-bottom: 3px;
    }
    
    .ksc-osusume01-point-name {
        font-family: "Londrina Solid", sans-serif;
        font-size: 1.6rem;
        font-weight: 900;
        color: #333;
    }
    
    .ksc-osusume01-bottom-right {
        flex: 100%;
    }
    
    .ksc-osusume01-point-title {
        margin-bottom: 4px;
    }
    .ksc-osusume01-point-text{
        font-size: 0.9rem;
        line-height: 1.4rem;
    }
}

/* --- 900px以下：grid縦並び + 画像とテキストの間隔 --- */
@media (max-width: 900px) {
    .ksc-osusume01-container {
        padding-right: 0;
    }
    
    .ksc-osusume01-text-wrap {
        padding: 10px 20px 0;
    }
    
    .ksc-osusume01-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .ksc-osusume01-title {
        grid-column: 1;
        grid-row: 1;
        margin-top: 0;
        margin-bottom: 20px;
    }
    
    .ksc-osusume01-left {
        grid-column: 1;
        grid-row: 2;
    }
    
    .ksc-osusume01-right {
        grid-column: 1;
        grid-row: 3;
    }
    
    .ksc-osusume01-bottom {
        grid-column: 1;
        grid-row: 4;
    }
}

/* --- 619px以下：レイアウト大変更 --- */
@media (max-width: 428px) {
    .ksc-osusume01-container {
        display: flex;
        flex-direction: column;
        padding-right: 0;
    }
    
    /* 1. スマホ用ONSENを表示（一番上） */
    .ksc-osusume01-title-mobile {
        display: block;
        font-family: "Londrina Solid", sans-serif;
        font-size: 4rem;
        font-weight: 900;
        color: #ddd;
        letter-spacing: 2px;
        order: 1;
        padding: 0px 20px 10px;
        margin-top: -20px;
    }
    
    /* 2. 画像（2番目） */
    .ksc-osusume01-image {
        min-height: 300px;
        order: 2;
    }
    
    /* 3. テキストエリア（3番目） */
    .ksc-osusume01-text-wrap {
        order: 3;
        padding: 20px;
    }
    
    /* PC版のONSENを非表示 */
    .ksc-osusume01-title {
        display: none;
    }
    
    .ksc-osusume01-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .ksc-osusume01-left {
        grid-column: 1;
        grid-row: 1;
    }
    
    .ksc-osusume01-right {
        grid-column: 1;
        grid-row: 2;
    }
    
    .ksc-osusume01-bottom {
        grid-column: 1;
        grid-row: 3;
        flex-direction: column;
        margin-top: 20px;
    }
}

/* --- 374px以下：さらに調整 --- */
@media (max-width: 374px) {
    .ksc-osusume01-title-mobile {
        font-size: 3rem;
        padding: 15px 15px 10px;
    }
    
    .ksc-osusume01-text-wrap {
        padding: 15px;
    }
    
    .ksc-osusume01-left-main {
        font-size: 2.5rem;
    }
    
    .ksc-osusume01-left-sub {
        font-size: 1.4rem;
    }
    
    .ksc-osusume01-bottom-image {
        width: 100px;
        height: 100px;
    }
    .ksc-osusume01-point-text{
        font-size: 0.8rem;
        line-height: 1.2rem;
    }

}

/* ===================================
   ksc-blt01-section / Bucket List Tours
 =================================== */

.ksc-blt01-container {
    width: 100%;
    overflow: hidden;
    background: white;
    padding: 40px 0;
    position: relative;
}

/* 矢尖ナビゲーション */
.ksc-blt01-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #e0e0e0;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
    color: #666;
    z-index: 10;
}

.ksc-blt01-nav:hover {
    background: rgba(255, 255, 255, 1);
    border-color: #007acc;
    color: #007acc;
    transform: translateY(-50%) scale(1.1);
}

.ksc-blt01-nav:focus {
    outline: 3px solid #007acc;
    outline-offset: 2px;
}

.ksc-blt01-nav-prev {
    left: 60px;
}

.ksc-blt01-nav-next {
    right: 60px;
}

.ksc-blt01-wrap {
    display: flex;
    align-items: flex-start;
    width: fit-content;
}

/* フォーカス内の要素があるときも停止 */
.ksc-blt01:focus-within .ksc-blt01-wrap {
    animation-play-state: paused;
}

.ksc-blt01-slide {
    flex: 0 0 auto;
    margin-right: 30px;
    height: auto;
}

.ksc-blt01-card {
    width: 260px;
    border-radius: 0;
    overflow: visible;
    transition: all 0.3s ease;
    height: auto;
    display: flex;
    flex-direction: column;
    margin:0 auto;
}

.ksc-blt01-card:hover {
    transform: translateY(-3px);
}

.ksc-blt01-card:focus-within {
    outline: 3px solid #007acc;
    outline-offset: 2px;
}

.ksc-blt01-card-text {
    padding: 20px 20px 20px;
}

.ksc-blt01-card-text h2 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.ksc-blt01-card-text p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    font-weight: normal;
}

.ksc-blt01-card-image {
    width: 80%;
    height: 400px;
    object-fit: cover;
    position: relative;
    transition: transform 0.3s ease;
    margin: 0 auto;
}

.ksc-blt01-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    position: relative;
    transition: transform 0.3s ease;
}

.ksc-blt01-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ksc-blt01-card:hover .ksc-blt01-image {
    transform: scale(1.03);
}

.ksc-blt01-btn {
    font-family: "Medula One", system-ui;
    position: absolute;
    bottom: 50px;
    right: -20px;
    background: #000000;
    color: #ffffff !important;
    padding: 10px 20px;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 0;
    transition: all 0.3s ease;
    letter-spacing: 1.2px;
    border: none;
    cursor: pointer;
    z-index: 10;
}

.ksc-blt01-btn:hover,
.ksc-blt01-btn:focus {
    background: #f39c12;
    transform: translateX(-10px);
}

@media (max-width: 619px) {
    .ksc-blt01-container {
        padding: 10px 0 20px 40px;
    }

    .ksc-blt01-nav {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .ksc-blt01-nav-prev {
        left: 20px;
    }
    
    .ksc-blt01-nav-next {
        right: 20px;
    }
    .ksc-blt01-title {
        font-size: 42px;
        letter-spacing: 2px;
    }
    
    .ksc-blt01-card {
        width: 240px;
    }
    
    .ksc-blt01-slide {
        margin-right: 20px;
    }
    
    .ksc-blt01-card-image {
        width: 85%;
        height: 320px;
    }
    
    .ksc-blt01-image {
        height: 320px;
    }
    
    .ksc-blt01-btn {
        font-size: 1.3rem;
        padding: 8px 16px;
        bottom: 40px;
        right: -15px;
    }
}

@media (max-width: 480px) {
    .ksc-blt01-container {
        padding: 0 0 20px 40px;
    }
}

@media (max-width: 374px) {
    .ksc-blt01-nav {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    
    .ksc-blt01-nav-prev {
        left: 10px;
    }
    
    .ksc-blt01-nav-next {
        right: 10px;
    }
    
    .ksc-blt01-title {
        font-size: 32px;
        letter-spacing: 1px;
    }
    
    .ksc-blt01-card {
        width: 220px;
    }
    
    .ksc-blt01-slide {
        margin-right: 15px;
    }
    
    .ksc-blt01-card-text {
        padding: 15px;
    }
    
    .ksc-blt01-card-text h2 {
        font-size: 18px;
        margin-bottom: 8px;
    }
    
    .ksc-blt01-card-text p {
        font-size: 0.85rem;
        line-height: 1.5;
    }
    
    .ksc-blt01-card-image {
        width: 90%;
        height: 280px;
    }
    
    .ksc-blt01-image {
        height: 260px;
    }
    
    .ksc-blt01-btn {
        font-size: 1.1rem;
        padding: 6px 12px;
        bottom: 30px;
        right: -10px;
        letter-spacing: 1px;
    }
}

/* ===================================
   ksc-ranking01-section
 =================================== */

.ksc-ranking01-container {
    max-width: 1200px;
    margin: 0 auto;
    margin-top: -40px;
}

.ksc-ranking01-header {
    text-align: center;
    margin-bottom: 50px;
}

.ksc-ranking01-title {
    font-size: 28px;
    font-weight: 300;
    color: #333;
    letter-spacing: 2px;
}

.ksc-ranking01-wrap {
    display: flex;
    gap: 45px;
    justify-content: center;
    align-items: flex-end;
    margin-left: 60px;
}

/* カード */
.ksc-ranking01-card {
    flex: 1;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    position: relative;
}

.ksc-ranking01-card:hover {
    transform: translateY(-8px);
}

/* NO. */
.ksc-ranking01-number {
    font-family: "Medula One", system-ui;
    color: #f39c12;
    text-align: right;
    font-size: 3.5rem;
    font-weight: 100;
    letter-spacing: 1px;
    margin-bottom: -10px;
    z-index: 2;
}

.ksc-ranking01-image {
    position: relative;
    width: 100%;
}

.ksc-ranking01-image img {
    width: 100%;
    object-fit: cover;
    display: block;
}

/* NO.1 */
.ksc-ranking01-card:nth-child(1) .ksc-ranking01-image img {
    height: 400px;
}

/* NO.2 */
.ksc-ranking01-card:nth-child(2) .ksc-ranking01-image img {
    height: 450px;
}

/* NO.3 */
.ksc-ranking01-card:nth-child(3) .ksc-ranking01-image img {
    height: 500px;
}

.ksc-ranking01-text {
    padding: 20px;
    font-size: 12px;
    color: #666;
    line-height: 1.6;
}



@media (max-width: 899px) {
    
.ksc-ranking01-wrap {
    gap: 20px;
}
/* NO.1 */
.ksc-ranking01-card:nth-child(1) .ksc-ranking01-image img {
    height: 300px;
}

/* NO.2 */
.ksc-ranking01-card:nth-child(2) .ksc-ranking01-image img {
    height: 350px;
}

/* NO.3 */
.ksc-ranking01-card:nth-child(3) .ksc-ranking01-image img {
    height: 400px;
}
}


@media (max-width: 619px) {
   .ksc-ranking01-container {
        margin-top: -10px;
    }
    .ksc-ranking01-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 30px;
        padding: 0 15px;
        margin-left: 0px;
    }
    
    .ksc-ranking01-card {
        max-width: 100%;
        width: 100%;
        display: grid;
        grid-template-columns: 55% 45%;
        gap: 15px;
    }
    
    .ksc-ranking01-image {
        display: flex;
        flex-direction: column;
    }
    
    .ksc-ranking01-card:nth-child(1) .ksc-ranking01-image img,
    .ksc-ranking01-card:nth-child(2) .ksc-ranking01-image img,
    .ksc-ranking01-card:nth-child(3) .ksc-ranking01-image img {
        height: 300px;
        object-fit: cover;
    }
    
    .ksc-ranking01-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .ksc-ranking01-text {
        padding: 10px 15px;
        font-size: 0.85rem;
        flex: 1;
        display: flex;
        align-items: center;
    }
}

@media (max-width: 374px) {
    .ksc-ranking01-wrap {
        gap: 20px;
        padding: 0 10px;
    }
    
    .ksc-ranking01-card {
        gap: 10px;
    }
    
    .ksc-ranking01-number {
        font-size: 3rem;
    }
    
    .ksc-ranking01-card:nth-child(1) .ksc-ranking01-image img,
    .ksc-ranking01-card:nth-child(2) .ksc-ranking01-image img,
    .ksc-ranking01-card:nth-child(3) .ksc-ranking01-image img {
        height: 150px;
    }
    
    .ksc-ranking01-text {
        padding: 5px 10px;
        font-size: 0.75rem;
        line-height: 1.4;
    }
}

/* ===================================
   ksc-category01-section
 =================================== */

.ksc-category01-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 0 60px;
}

.ksc-category01-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
    width: 100%;
}

.ksc-category01-card {
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 500px; /* ←PC版は500pxに戻す */
    width: 100%;
    max-width: 100%;
        min-width: 0; /* ←重要！グリッドのバグ回避 */
    box-sizing: border-box; /* ←追加 */
}

.ksc-category01-card:hover {
    transform: translateY(-5px);
}

.ksc-category01-title {
    font-family: "Londrina Solid", sans-serif;
    padding: 20px 15px 10px;
    font-size: 5rem;
    line-height: 3rem;
    color: #b1b1b1;
    letter-spacing: 2px;
    height: auto;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.ksc-category01-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ksc-category01-title-wrap span {
    display: block;
}

.ksc-category01-title.small {
    font-family: "Londrina Solid", sans-serif;
    padding: 0px 15px;
    font-size: 4rem;
    line-height: 3rem;
    color: #b1b1b1;
    letter-spacing: 1px;
    height: auto;
    text-align: left;
    overflow-wrap: normal;
    white-space: normal;
    overflow: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
}

.ksc-category01-subtitle {
    padding: 0 15px 10px;
    font-size: 12px;
    color: #666;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.ksc-category01-image {
    width: 100%;
    height: 320px; /* ←PC版は固定 */
    overflow: hidden;
    margin-bottom: 40px;
}

.ksc-category01-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- タブレット対応（620px-850px：3列維持だが調整） --- */
@media (max-width: 850px) {
    .ksc-category01-wrap {
        gap: 15px;
    }
    
    .ksc-category01-card {
        height: 450px;
        display: flex;
        flex-direction: column;
    }
    
    .ksc-category01-title {
        font-size: 4rem;
        line-height: 3rem;
        padding: 15px 10px 10px;
        flex-shrink: 0;
    }
    
    .ksc-category01-title.small {
        font-size: 3rem;
        line-height: 2.5rem;
        flex-shrink: 0;
    }
    
    .ksc-category01-subtitle {
        flex-shrink: 0;
    }
    
    .ksc-category01-image {
        height: 280px; /* ←タブレットも固定 */
    }
}

/* --- スマホ対応（619px以下：2列グリッド） --- */
@media (max-width: 619px) {
    .ksc-category01-container {
        padding: 0 15px;
    }
    
    .ksc-category01-wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .ksc-category01-card {
        max-width: none;
        height: 440px;
    }
    
    .ksc-category01-title {
        font-size: 3rem;
        line-height: 2.5rem;
        padding: 15px 10px 10px;
    }
    
    .ksc-category01-title.small {
        font-size: 2rem;
        line-height: 2rem;
        padding: 10px;
    }
    
    .ksc-category01-image {
        flex: 1; /* ←2列はflexに戻す */
        height: auto; /* ←autoに戻す */
        min-height: 0;
        margin-bottom: 30px;
    }
}

/* --- 極小スマホ対応（320px-374px：2列維持） --- */
@media (max-width: 374px) {
    .ksc-category01-container {
        padding: 0 10px;
    }
    
    .ksc-category01-wrap {
        gap: 10px;
    }
    
    .ksc-category01-card {
        height: 320px;
    }
    
    .ksc-category01-title {
        font-size: 2.2rem;
        line-height: 2rem;
        padding: 10px 8px 8px;
        letter-spacing: 1px;
    }
    
    .ksc-category01-title.small {
        font-size: 1.5rem;
        line-height: 1.6rem;
        padding: 8px;
        letter-spacing: 0.5px;
    }
    
    .ksc-category01-subtitle {
        font-size: 11px;
        padding: 0 8px 8px;
    }
    
    .ksc-category01-image {
        margin-bottom: 20px;
    }
}


/* ===================================
   NEWS Section
=================================== */
.ksc-news-section {
    padding: 80px 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.ksc-news-container {
    margin-top: 60px;
}

.ksc-news-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.ksc-news-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ksc-news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.ksc-news-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.ksc-news-image {
    width: 100%;
    height: 240px;
    overflow: hidden;
    background: #f5f5f5;
}

.ksc-news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ksc-news-card:hover .ksc-news-image img {
    transform: scale(1.05);
}

.ksc-news-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px 10px;
}

.ksc-news-category {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.news-oshirase {
    background: #ff6b6b;
    color: #fff;
}

.news-sonota {
    background: #e0e0e0;
    color: #333;
}

.ksc-news-date {
    font-size: 13px;
    color: #666;
}

.ksc-news-title {
    padding: 0 20px 20px;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .ksc-news-wrap {
        grid-template-columns: 1fr;
    }
    
    .ksc-news-section {
        padding: 60px 15px;
    }
}

/* ========================================================
	フッター
======================================================== */

.footer_container {
  width:100%;
  height:auto;
  background-color: #262626;
  color: #ffffff;
  text-align: center;
  padding: 20px 0;
  margin-top:40px;
}

.osaka-info-logo{
  width:20%;
  max-width: 100px;
  margin:0 auto;
}


@media (max-width: 900px){
.footer_container {
  padding-bottom:80px;
}
}
@media (max-width: 360px){
.footer_container {
  padding-bottom:60px;
}
}