@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

        body {
            font-family: "Noto Serif JP", "游明朝", "Yu Mincho", serif;

 
        }
#header-container + #content.content {
  background: transparent !important;
}
 @media (min-width: 768px) {
#content.content {
  padding-top:30px;
}
}
#header-container, .content {background:transparent!important;}
.skin-grayish.front-top-page .content .main {padding:0 0 0 0;background:transparent!important;}


        /* カスタムトップメニューコンテナ - 既存テーマのCSSを上書き */
        #header-in .custom-top-menu-container {
            display: flex !important;
            align-items: center !important;
            gap: 20px !important;
            position: absolute !important;
            top: 50px !important;
            right: 40px !important;
            transform: translateY(-50%) !important;
            z-index: 1000001 !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        /* オンラインショップリンク */
        #header-in .custom-top-menu-container .custom-online-shop-link {
            color: #fff !important;
            text-decoration: none !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            transition: color 0.3s ease !important;
            white-space: nowrap !important;
            margin: 0 !important;
            padding: 0 !important;
            z-index: 1000002 !important;
            position: relative !important;
        }

        #header-in .custom-top-menu-container .custom-online-shop-link:hover {
            color: #ccc !important;
        }

        /* ハンバーガーメニューボタン */
        #header-in .custom-top-menu-container .custom-hamburger-menu {
            background: none !important;
            border: none !important;
            cursor: pointer !important;
            padding: 8px !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 5px !important;
            z-index: 1000003 !important;
            position: relative !important;
            margin: 0 !important;
            width: auto !important;
            height: auto !important;
            pointer-events: auto !important;
        }

        #header-in .custom-top-menu-container .custom-hamburger-menu .custom-hamburger-line {
            width: 30px !important;
            height: 3px !important;
            background-color: #fff !important;
            transition: all 0.3s ease !important;
            border-radius: 1px !important;
            display: block !important;
            margin: 0 !important;
        }

        /* ハンバーガーアニメーション */
        #header-in .custom-top-menu-container .custom-hamburger-menu.active .custom-hamburger-line:nth-child(1) {
            transform: rotate(45deg) translate(7px, 7px) !important;
        }

        #header-in .custom-top-menu-container .custom-hamburger-menu.active .custom-hamburger-line:nth-child(2) {
            opacity: 0 !important;
        }

        #header-in .custom-top-menu-container .custom-hamburger-menu.active .custom-hamburger-line:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -7px) !important;
        }

/* サイドパネルのスタイル修正 */
.custom-side-panel {
    position: fixed !important;
    top: 0 !important;
    right: -400px !important;
    width: 350px !important;
    height: 100vh !important;
    background: linear-gradient(180deg, #4a90a4 0%, #3a7a94 100%) !important;
    color: white !important;
    z-index: 999999 !important;
    transition: right 0.3s ease !important;
    padding: 80px 40px 40px !important;
    overflow-y: auto !important;
    /* シャドウ修正：パネルが開いている時のみ表示 */
    box-shadow: none !important;
}

.custom-side-panel.active {
    right: 0 !important;
    /* パネルが開いている時のみシャドウを表示 */
    box-shadow: -5px 0 15px rgba(0,0,0,0.3) !important;
}

/* メニューアイテムのスタイル */
.custom-side-panel .custom-menu-items {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.custom-side-panel .custom-menu-item {
    margin-bottom: 0px !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

.custom-side-panel .custom-menu-item a {
    color: white !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    transition: color 0.3s ease !important;
    display: block !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
}

.custom-side-panel .custom-menu-item a:hover {
    color: #b8d4dc !important;
}

.custom-side-panel .custom-menu-item.section-break {
    margin-top: 40px !important;
}

.custom-side-panel .youtube-icon a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    transition: background 0.3s ease !important;
    margin: 0 !important;
    padding: 0 !important;
}

.custom-side-panel .youtube-icon a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* オーバーレイ */
.custom-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 999998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
}

.custom-menu-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .custom-side-panel {
        width: 280px !important;
        right: -280px !important;
        padding: 70px 30px 30px !important;
    }
    
    .custom-side-panel .custom-menu-item.section-break {
        margin-top: 35px !important;
    }
}

@media (max-width: 480px) {
    .custom-side-panel {
        width: 250px !important;
        right: -250px !important;
        padding: 60px 25px 25px !important;
    }
    
    .custom-side-panel .custom-menu-item a {
        font-size: 15px !important;
    }
    
    .custom-side-panel .custom-menu-item.section-break {
        margin-top: 30px !important;
    }
    
    .custom-side-panel .youtube-icon a {
        width: 45px !important;
        height: 45px !important;
    }
}

        /* 既存コンテンツが隠れないようにz-indexを調整 */
        body {
            position: relative !important;
        }

        #header-container {
            position: relative !important;
            z-index: 1000 !important;
        }

        /* コンテンツ要素のz-indexを制御 */
        .top-catch-sec {
            z-index: 100 !important;
            position: relative !important;
        }

        .panel-layout {
            z-index: 100 !important;
            position: relative !important;
        }

        .panel-grid {
            z-index: 100 !important;
            position: relative !important;
        }

        .panel-row-style {
            z-index: 100 !important;
            position: relative !important;
        }

        /* 他のコンテンツのz-indexを下げる */
        .grayish_topmv_whovlay,
        .grayish_topmv_dot {
            z-index: 1 !important;
            pointer-events: none !important;
        }

/* 重要：Cocoonの既存スタイルを完全に上書き */
#header-container.header-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    z-index: 1000 !important;
}

/* .wrap クラスの制約を無効化 */
#header-container.header-container .wrap {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 動画要素の確実な配置 */
#header-container video,
#header-container .bg-video {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover !important;
    z-index: -10 !important;
    pointer-events: none !important;
    transform: none !important;
}

/* 動画コンテナが挿入された場合の対応 */
#header-container .video-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -10 !important;
    pointer-events: none !important;
}

/* 既存のオーバーレイ要素の調整 */
#header-container .grayish_topmv_whovlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.3) !important;
    z-index: 1 !important;
}

#header-container .grayish_topmv_dot {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
    z-index: 2 !important;
}

/* ヘッダーコンテンツを確実に前面に */
#header-container-in.header-container-in {
    position: relative !important;
    z-index: 100 !important;
    height: 100vh !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* Cocoonのヘッダーレイアウト調整 */
#header-container-in.header-container-in.hlt-center-logo-top-menu {
    flex-direction: column !important;
}

#header.header {
    position: relative !important;
    z-index: 101 !important;
    background: transparent !important;
    width: 100% !important;
    height: auto !important;
    flex-shrink: 0 !important;
}

#header-in.header-in {
    position: relative !important;
    z-index: 102 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ロゴの調整 - 左上に配置 */
.logo.logo-header {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    z-index: 100000 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

/* ナビゲーションの調整 */
#navi.navi {
    position: relative !important;
    z-index: 103 !important;
    background: transparent !important;
    width: 100% !important;
    margin-top: auto !important;
}

#navi-in.navi-in {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* スクロールインジケーターの調整 */
.skinadd-topmv-scroll {
    position: absolute !important;
    bottom: 80px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 104 !important;
    color: white !important;
    text-align: center !important;
}

.skinadd-topmv-scroll__txt {
    font-size: 14px !important;
    letter-spacing: 2px !important;
    position: relative !important;
    color: white !important;
}

/* スクロールアニメーション */
.skinadd-topmv-scroll__txt::after {
    content: '' !important;
    position: absolute !important;
    bottom: -20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 1px !important;
    height: 30px !important;
    background: white !important;
    animation: scrollIndicator 2s infinite !important;
}

/* 動画リンクボタンの追加（シンプルな画像ボタン） */
.video-link-button {
    position: fixed !important; /* absoluteからfixedに変更 */
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 105 !important;
    display: block !important;
    text-decoration: none !important;
    transition: transform 0.3s ease !important;
}

.video-link-button img {
    width: 400px !important;
    height: auto !important;
    display: block !important;
    border: none !important;
    box-shadow: none !important;
    max-width: 100% !important; /* max-width: none を修正 */
}

.video-link-button:hover {
    transform: translateX(-50%) scale(1.1) !important;
}

@keyframes scrollIndicator {
    0%, 100% {
        opacity: 0;
        transform: translateX(-50%) translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) translateY(10px);
    }
}

/* 次のセクションとの境界を明確に */
#header-container + * {
    position: relative !important;
    z-index: 1000 !important;
    background: white !important;
    margin-top: 100vh !important;
}

/* bodyにmargin-top追加（固定ヘッダーのため） */
body {
    margin-top: 0 !important;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    #header-container.header-container {
        height: 100vh !important;
        min-height: 100vh !important;
    }
    
    .logo.logo-header {
        top: 15px !important;
        left: 15px !important;
    }
    
    #header-container video,
    #header-container .bg-video {
        width: 100vw !important;
        height: 100vh !important;
    }
    
    .skinadd-topmv-scroll {
        bottom: 70px !important;
    }
    
    .video-link-button {
        bottom: 40px !important;
    }
    
    .video-link-button img {
        width: 270px !important;
    }
    
    #header-container .grayish_topmv_dot {
        background-size: 15px 15px !important;
    }
}

@media screen and (max-width: 480px) {
    #header-container.header-container {
        height: 100vh !important;
        min-height: 100vh !important;
    }
    
    .logo.logo-header {
        top: 10px !important;
        left: 10px !important;
    }
    
    .video-link-button {
        bottom: 40px !important;
    }
    
    .video-link-button img {
        width: 200px !important;
    }
}

/* 動画の向き対応 */
@media screen and (orientation: portrait) {
    #header-container video,
    #header-container .bg-video {
        width: 100vw !important;
        height: 100vh !important;
        object-fit: cover !important;
    }
}

@media screen and (orientation: landscape) {
    #header-container video,
    #header-container .bg-video {
        width: 100vw !important;
        height: 100vh !important;
        object-fit: cover !important;
    }
}

.top-catch-sec {
  background: rgba(150,165,175,0.75) !important;
}

/* =====================================
   縦書き表示 根本的修正CSS
   ===================================== */

.top-catch {
    position: relative;
    width: 1200px;
    height: auto;
    padding: 48px;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 40px;
    overflow-x: auto;
    margin: 0 auto;
    color: #fff;
}

/* =====================================
   p要素の縦書き修正（Mac Safari & Windows対応）
   ===================================== */

.top-catch p {
    /* 基本の縦書き設定 */
    writing-mode: vertical-rl !important;
    text-orientation: upright !important;
    font-size: 24px;
    line-height: 2;
    color: #fff;
    flex-shrink: 0;
    max-height: 80vh;
    
    /* Safari対応の追加設定 */
    -webkit-writing-mode: vertical-rl !important;
    -webkit-text-orientation: upright !important;
    
    /* 文字の向きを確実に制御 */
    text-combine-upright: none !important;
    -webkit-text-combine: none !important;
    
    /* Safari用の方向指定 */
    direction: ltr !important;
    unicode-bidi: normal !important;
    
    /* レイアウト安定化 */
    display: block !important;
    overflow: visible !important;
    white-space: normal !important;
    
    /* Safari特有の問題対策 */
    font-feature-settings: "vkrn" !important;
    -webkit-font-feature-settings: "vkrn" !important;
    
    /* 句読点の配置修正（Windows/Mac共通） */
    hanging-punctuation: none !important;
    text-spacing: normal !important;
    text-indent: 0 !important;
    
    /* 行揃えの統一（Windows/Mac共通） */
    text-align: start !important;
    text-align-last: start !important;
    -webkit-text-align-last: start !important;
    -moz-text-align-last: start !important;
    
    /* Windows特有の句読点問題対策 */
    text-justify: none !important;
    word-spacing: normal !important;
    letter-spacing: 0 !important;
    
    /* 日本語組版の統一 */
    text-emphasis: none !important;
    text-emphasis-position: over right !important;
    
    /* 重要：Safari用の強制縦書き */
    transform: none !important;
    -webkit-transform: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    
    /* 追加の安全対策 */
    font-style: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.top-catch p:first-of-type {
    font-size: 27px;
    font-weight: 600;
}

.top-catch-btn {
    position: absolute;
    bottom: 150px;
    left: 50px;
    writing-mode: vertical-rl !important;
    text-orientation: upright !important;
    z-index: 100;
    border: 1px solid #fff;
    background-color: transparent;
    padding: 0;
    
    /* Safari対応 */
    -webkit-writing-mode: vertical-rl !important;
    -webkit-text-orientation: upright !important;
    direction: ltr !important;
    unicode-bidi: normal !important;
}

.top-catch-btn a {
    display: block;
    padding: 20px 8px;
    color: #fff;
    text-decoration: none;
    font-size: 24px;
    letter-spacing: 0.5rem;
    font-weight: normal;
}

.top-catch-btn a:hover {
    background-color: rgb(255, 255, 255, 0.1);
}


/* =====================================
   .comp-btn-sec レスポンシブ対応
   ===================================== */

/* PC表示（デフォルト） */
.comp-btn-sec {
    display: flex;
    justify-content: space-between;
    width: 1000px;
    max-width: 100%;
    margin: 60px 0px;
    gap: 20px; /* ボタン間のスペース調整 */
    box-sizing: border-box;
}

/* ボタン要素の基本スタイル（必要に応じて） */
.comp-btn-sec > * {
    flex: 1;
    max-width: calc(50% - 10px); /* gap分を考慮 */
}

/* =====================================
   タブレット表示（768px以下）
   ===================================== */
@media screen and (max-width: 768px) {
    .comp-btn-sec {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        margin: 40px 0px;
        gap: 20px;
        padding: 0 20px;
    }
    
    .comp-btn-sec > * {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
}

/* =====================================
   スマホ表示（480px以下）
   ===================================== */
@media screen and (max-width: 480px) {
    .comp-btn-sec {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        margin: 30px 0px;
        gap: 15px;
        padding: 0 15px;
    }
    
    .comp-btn-sec > * {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
}

/* =====================================
   ボタン内の要素が画像の場合の調整
   ===================================== */
.comp-btn-sec img {
    width: 100%;
    height: auto;
    display: block;
}

/* =====================================
   ボタン内の要素がリンクの場合の調整
   ===================================== */
.comp-btn-sec a {
    display: block;
    width: 100%;
    text-decoration: none;
}

.comp-btn-sec a img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.comp-btn-sec a:hover img {
    transform: scale(1.05);
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
    /*必要ならばここにコードを書く*/

    .top-catch {
        width: 100%;
        padding: 60px 24px;
        flex-direction: column;
        gap: 24px;
    }
    
    /* スマホ：top-catch-head を横書きに強制変更 */
    .top-catch-head {
        writing-mode: horizontal-tb !important;
        -webkit-writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        -webkit-text-orientation: mixed !important;
        
        font-size: 26px;
        margin-top: 0;
	margin-bottom:30px;
        text-align: left;
        
        /* 横書き用の設定 */
        direction: ltr !important;
        unicode-bidi: normal !important;
        white-space: normal !important;
        line-height: 1.5 !important;
        letter-spacing: normal !important;
        
        /* 縦書き関連の設定をリセット */
        transform: none !important;
        -webkit-transform: none !important;
        font-feature-settings: normal !important;
        -webkit-font-feature-settings: normal !important;
    }
    
    /* スマホ：p要素も横書きに */
    .top-catch p {
        writing-mode: horizontal-tb !important;
        -webkit-writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        -webkit-text-orientation: mixed !important;
        
        font-size: 16px;
        line-height: 1.6;
        max-height: none;
        
        /* 横書き用の設定（Windows/Mac共通） */
        direction: ltr !important;
        unicode-bidi: normal !important;
        white-space: normal !important;
        text-align: left !important;
        text-align-last: left !important;
        letter-spacing: normal !important;
        
        /* 横書き時の句読点・組版設定 */
        text-indent: 0 !important;
        text-justify: none !important;
        hanging-punctuation: none !important;
        word-spacing: normal !important;
        
        /* 縦書き関連の設定をリセット */
        transform: none !important;
        -webkit-transform: none !important;
        font-feature-settings: normal !important;
        -webkit-font-feature-settings: normal !important;
        font-variant-east-asian: normal !important;
        text-spacing: normal !important;
    }
    
    .top-catch p:first-of-type {
        font-size: 20px;
    }
    
    .top-catch-btn {
        position: relative;
        bottom: auto;
        left: auto;
        writing-mode: horizontal-tb !important;
        -webkit-writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        -webkit-text-orientation: mixed !important;
        
        margin: 20px auto 0;
        align-self: center;
        
        /* 横書き用の設定 */
        direction: ltr !important;
        unicode-bidi: normal !important;
    }
    
    .top-catch-btn a {
        padding: 16px 24px;
        font-size: 18px;
        letter-spacing: 0.2rem;
    }

    /* スマホでは他の縦書き要素も横書きに */
    .tate-catch,
    .tate-catch-float,
    .tate-catch-float-left {
        writing-mode: horizontal-tb !important;
        -webkit-writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        -webkit-text-orientation: mixed !important;
        
        font-size: 20px;
        text-align: left;
        margin-top: 0;
        direction: ltr !important;
        unicode-bidi: normal !important;
        line-height: 1.5 !important;
        letter-spacing: normal !important;
        white-space: normal !important;
        
        /* 横書き時の句読点・組版設定 */
        text-indent: 0 !important;
        text-justify: none !important;
        hanging-punctuation: none !important;
        word-spacing: normal !important;
        text-align-last: left !important;
        
        /* 縦書き関連の設定をリセット */
        transform: none !important;
        -webkit-transform: none !important;
        font-feature-settings: normal !important;
        -webkit-font-feature-settings: normal !important;
        font-variant-east-asian: normal !important;
        text-spacing: normal !important;
    }
}

/*480px以下*/
@media screen and (max-width: 480px){
    /*必要ならばここにコードを書く*/
}


/* body直下のカスタムメニュー */
.custom-top-menu-container-fixed {
    position: fixed !important;
    top: 25px !important;
    right: 40px !important;
    z-index: 999999999 !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
}

.custom-top-menu-container-fixed .custom-online-shop-link {
    color: #fff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
}

.custom-top-menu-container-fixed .custom-online-shop-link:hover {
    color: #ccc !important;
}

.custom-top-menu-container-fixed .custom-hamburger-menu {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    pointer-events: auto !important;
}

.custom-top-menu-container-fixed .custom-hamburger-line {
    width: 30px !important;
    height: 3px !important;
    background-color: #fff !important;
    transition: all 0.3s ease !important;
    border-radius: 1px !important;
    display: block !important;
}

/* アニメーション */
.custom-top-menu-container-fixed .custom-hamburger-menu.active .custom-hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px) !important;
}

.custom-top-menu-container-fixed .custom-hamburger-menu.active .custom-hamburger-line:nth-child(2) {
    opacity: 0 !important;
}

.custom-top-menu-container-fixed .custom-hamburger-menu.active .custom-hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px) !important;
}
/* レスポンシブ */
@media (max-width: 768px) {
    .custom-top-menu-container-fixed {
        top: 20px !important;
        right: 15px !important;
        gap: 15px !important;
    }
    
    .custom-top-menu-container-fixed .custom-online-shop-link {
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .custom-top-menu-container-fixed {
        top: 15px !important;
        right: 10px !important;
        gap: 12px !important;
    }
    
    .custom-top-menu-container-fixed .custom-online-shop-link {
        font-size: 12px !important;
    }
}


.map-sec {max-width:100%;width:1600px;margin:0 auto;}

@media (max-width: 768px) {
	.map-sec {max-width:100%;width:100%;margin:0 auto;}
}
/* フッター表示の修正 */
#footer.footer {
    position: relative !important;
    z-index: 1001 !important;
    background: #d1c6c1 !important;
    margin-top: 0px !important;
    padding-top: 50px !important;

}
#footer p, #footer .copyright {color:#fff!important;}
#footer p {line-height:2em;}

/* フッター内の要素も確実に表示されるように */
#footer-in.footer-in {
    position: relative !important;
    z-index: 1002 !important;
	border-bottom:none;
}

/* フッターウィジェットエリア */
.footer-widgets {
    position: relative !important;
    z-index: 1003 !important;
    background: #d1c6c1 !important;
			border-bottom:none;
}

/* フッターボトム */
.footer-bottom {
    position: relative !important;
    z-index: 1003 !important;
    background: #d1c6c1 !important;
	border-bottom:none;
}

/* ページ全体のコンテンツ領域を調整 */
.content {
    position: relative !important;
    z-index: 500 !important;
}

/* メインコンテンツエリアの調整 */
main, 
.main {
    position: relative !important;
    z-index: 500 !important;

}

.footer-bottom-logo {display:none;}

/* =====================================
   footer-widgetsとfooter-bottomの間のボーダー除去
   ===================================== */

/* cfクラス（クリアフィックス）の疑似要素ボーダー除去 */
.footer-widgets.cf:before,
.footer-widgets.cf:after {
    border: none !important;
    border-bottom: none !important;
    display: none !important;
    content: none !important;
}

.footer-bottom.cf:before,
.footer-bottom.cf:after {
    border: none !important;
    border-top: none !important;
    display: none !important;
    content: none !important;
}

/* フッター内のクリアフィックス全般 */
#footer .cf:before,
#footer .cf:after {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    display: none !important;
    content: none !important;
}


/* ======================================
   フッターウィジェットエリアを画面全幅に
   ====================================== */

/* フッター全体を画面全幅に */
#footer.footer {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* フッター内部コンテナも画面全幅に */
#footer-in.footer-in {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* フッターウィジェットエリアを3カラムレイアウトに */
.footer-widgets {
    width: 80% !important;
    max-width: 80% !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

/* フッターウィジェット左側（ロゴ） */
.footer-left {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* フッターウィジェット中央（会社情報） */
.footer-center {
    flex: 1 !important;
    display: flex !important;
    justify-content: left !important;
    align-items: left !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 20px !important;
}

/* フッターウィジェット右側（YouTubeアイコン） */
.footer-right {
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items:left !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* フッターボトムも画面全幅に */
.footer-bottom {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* wrapクラスの制約を無効化（フッター内のみ） */
#footer .wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* フッターロゴの画像サイズ調整 */
.footer-left .widget_media_image img {
    max-width: 250px !important;
    height: auto !important;
    display: block !important;
}

/* 会社情報テキストのスタイル */
.footer-center .textwidget {
    color: #333 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.footer-center .textwidget p {
    margin: 0 !important;
    padding: 0 !important;
}

/* YouTubeアイコンのスタイル */
.footer-right .widget_custom_html img {
    max-width: 60px !important;
    height: auto !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

.footer-right .widget_custom_html a:hover img {
    transform: scale(1.1) !important;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    #footer-in.footer-in {
        padding-left: 15px !important;
        padding-right: 15px !important;

    }
    
    .footer-widgets {
        padding: 30px 15px !important;
        flex-direction: column !important;
        gap: 30px !important;
        text-align: center !important;
    }
    
    .footer-left,
    .footer-center,
    .footer-right {
        justify-content: center !important;
        text-align: center !important;
        padding: 0 !important;
    }
    
    .footer-bottom {
        padding: 15px !important;
    }
    
    .footer-left .widget_media_image img {
        max-width: 200px !important;
    }
    
    .footer-center .textwidget {
        font-size: 13px !important;
    }
    
    .footer-right .widget_custom_html img {
        max-width: 50px !important;
    }
	.footer-widgets-mobile {margin-bottom:-50px;}
}

@media screen and (max-width: 480px) {
    #footer-in.footer-in {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .footer-widgets {
        padding: 20px 10px !important;
        gap: 25px !important;
    }
    
    .footer-bottom {
        padding: 10px !important;
    }
    
    .footer-left .widget_media_image img {
        max-width: 180px !important;
    }
    
    .footer-center .textwidget {
        font-size: 12px !important;
    }
    
    .footer-right .widget_custom_html img {
        max-width: 45px !important;
    }
}

/* 追加：特定のCocoonテーマのボーダーパターンを除去 */
.footer-container {
    border-top: none !important;
}

.nwa {
    border: none !important;
}

/* フッターナビゲーションのボーダー除去 */
#navi-footer.navi-footer {
    border: none !important;
    border-top: none !important;
}

#navi-footer-in.navi-footer-in {
    border: none !important;
}
/* =====================================
   レスポンシブバナー表示CSS
   ===================================== */

/* PC表示：50%ずつ横並び */
.pagebottom-bn {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
	    margin-top: -50px !important;
}

/* 各バナーリンクのスタイル */
.pagebottom-bn a {
    flex: 1 !important;
    width: 50% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    text-decoration: none !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
}

/* 画像のスタイル */
.pagebottom-bn a img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* ホバーエフェクト（オプション） */
.pagebottom-bn a:hover img {
//    opacity: 0.9 !important;
    transition: opacity 0.3s ease !important;
}

/* =====================================
   タブレット表示（768px以下）
   ===================================== */
@media screen and (max-width: 768px) {
    .pagebottom-bn {
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    .pagebottom-bn a {
        width: 100% !important;
        flex: none !important;
    }
    
    .pagebottom-bn a img {
        width: 100% !important;
    }
}

/* =====================================
   スマホ表示（480px以下）
   ===================================== */
@media screen and (max-width: 480px) {
    .pagebottom-bn {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important;
    }
    
    .pagebottom-bn a {
        width: 100% !important;
        flex: none !important;
        display: block !important;
    }
    
    .pagebottom-bn a img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}

/* =====================================
   追加の調整（必要に応じて）
   ===================================== */

/* 画像が歪まないように縦横比を維持 */
.pagebottom-bn a img {
    object-fit: cover !important;
    object-position: center !important;
}


/* =====================================
   トップページ用
   ===================================== */

			.sp-br {display:none;}
        .sozai-container {
            max-width: 1540px;
            margin: 0 auto;
        }
        
        /* 第1セクション */
        .section-1 {
            position: relative;
            padding: 60px;
            min-height: 850px;
        }
        
        .section-1-image {
            position: absolute;
            left: 60px;
            top: 150px;
            width: 800px;
        }
        
        .section-1-image img {
            width: 100%;
            height: auto;
        }
        
        .section-1 .tate-catch {
            writing-mode: vertical-rl !important;
            text-orientation: upright !important;
            font-size: 32px;
            font-weight: bold;
            line-height: 1.5em;
            position: absolute;
            left: 920px;
            top: 0px;
            
            /* Safari対応 */
            -webkit-writing-mode: vertical-rl !important;
            -webkit-text-orientation: upright !important;
            direction: ltr !important;
            unicode-bidi: normal !important;
        }
        
        .section-1-text {
            position: absolute;
            left: 920px;
            top: 450px;
            max-width: 600px;
        }
        
        .yoko-catch {
            font-size: 20px;
            line-height: 2;
            margin-bottom: 30px;
        }
        
        /* 第2セクション */
        .section-2 {

            position: relative;
            min-height: 850px;
            padding: 60px;
        }
        
        .yoko-catch-left {
            width: 100%;
        }
        
        .yoko-catch-left-in {
            width: 500px;
            max-width: 100%;
            position: absolute;
            left: 270px;
            top: 210px;
        }
        
        .section-2-image {
            position: absolute;
            left: 920px;
            top: 150px;
            width: 530px;
        }
        
        .section-2-image img {
            width: 100%;
            height: auto;
        }
        
        .section-2 .tate-catch-float {
            writing-mode: vertical-rl !important;
            text-orientation: upright !important;
            font-size: 32px;
            font-weight: bold;
            line-height: 1.5em;
            position: absolute;
            right: 0px;
            top: 60px;
            
            /* Safari対応 */
            -webkit-writing-mode: vertical-rl !important;
            -webkit-text-orientation: upright !important;
            direction: ltr !important;
            unicode-bidi: normal !important;
        }
        
        .yoko-catch-btn {
            padding-top: 60px;
            margin-left: 30px;
        }
        
        .yoko-catch-btn a {
            border: 1px solid #333;
            display: inline-block;
            padding: 8px 24px;
            color: #333;
            text-decoration: none;
            font-size: 24px;
            font-weight: normal;
            transition: all 0.3s ease;
        }
        
        .yoko-catch-btn a:hover {
            background: #333;
            color: #fff;
        }
        
        /* 第3セクション */
        .section-3 {
            position: relative;
            min-height: 900px;
            padding: 60px;
        }
        
        .section-3 .tate-catch-float {
            writing-mode: vertical-lr !important;
            text-orientation: upright !important;
            font-size: 32px;
            font-weight: bold;
            line-height: 2;
            position: absolute;
            left: 150px;
            top: 60px;
            z-index: 10;
            width: auto;
            height: auto;
            
            /* Safari対応 */
            -webkit-writing-mode: vertical-lr !important;
            -webkit-text-orientation: upright !important;
            direction: ltr !important;
            unicode-bidi: normal !important;
        }
        
        .section-3-image {
            position: absolute;
            left: 270px;
            top: 150px;

        }
        
        .section-3-image img {
            width: 820px;
            max-width: 100%;
            height: auto;
        }
        
        .section-3-text {
            position: absolute;
            left: 270px;
            top: 720px;
            width: 100%;
        }
        
        .section-3-text .yoko-catch:nth-child(2) {
            float: left;
            width: 780px;
        }
        
        .section-3-text .yoko-catch-btn {
            float: left;
            margin-left: 0;
            padding-top: 0;
            margin-top: 30px;
        }
        
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        .section-comp {
            position: relative;
            padding: 0px;
            min-height: 850px;
        }
                .comp-catch {
writing-mode: vertical-rl !important;
  text-orientation: upright !important;
  font-size: 32px;
  font-weight: bold;
  line-height: 1.5em;
  position: absolute;
  right: 60px;
  top: 0px;
  
  /* Safari対応 */
  -webkit-writing-mode: vertical-rl !important;
  -webkit-text-orientation: upright !important;
  direction: ltr !important;
  unicode-bidi: normal !important;
        }


        .scroll-container {
        	padding-bottom: 50px!important;
        }

        /* スマホ対応 */
     @media screen and (max-width: 834px) {
    .pc-br {display:none;}
    .sp-br {display:block;}
    
    /* 修正: section-3p → section-3 */
    .section-1, .section-2, .section-3 {
        min-height: auto;
        padding: 40px 20px !important; /* 統一されたパディング */
        position: static;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 40px !important; /* セクション間の統一マージン */
    }
    
    .section-comp {
        min-height: auto;
        padding: 40px 20px !important; /* 他と統一 */
        position: static;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .yoko-catch {
        font-size: 14px !important;
    }
    
    /* 第1セクション */
    .section-1 .tate-catch {
        position: static;
        writing-mode: horizontal-tb !important;
        -webkit-writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        -webkit-text-orientation: mixed !important;
        font-size: 20px;
        text-align: left;
        margin-bottom: 30px;
        order: 1;
        margin-left: 0px;
        width: 100%;
        
        /* 横書き用の設定（Windows/Mac共通） */
        direction: ltr !important;
        unicode-bidi: normal !important;
        line-height: 1.5 !important;
        letter-spacing: normal !important;
        white-space: normal !important;
        
        /* 横書き時の句読点・組版設定 */
        text-indent: 0 !important;
        text-justify: none !important;
        hanging-punctuation: none !important;
        word-spacing: normal !important;
        text-align-last: left !important;
    }
    
    .section-1-image {
        position: static;
        width: 100%;
        max-width: 400px;
        margin-bottom: 30px;
        order: 2;
    }
    
    .section-1-text {
        position: static;
        max-width: 100%;
        order: 3;
    }
    
    /* 第2セクション修正 */
    .section-2 {
        margin-top: 60px !important; /* 修正: 60px → 0 */
    }
    
    .section-2 .tate-catch-float {
        position: static;
        writing-mode: horizontal-tb !important;
        -webkit-writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        -webkit-text-orientation: mixed !important;
        font-size: 20px;
        text-align: left;
        margin-bottom: 30px;
        order: 1;
        margin-left: 0px;
        display: block;
        width: 100%;
        min-width: 100%;
        white-space: normal;
        
        /* 横書き用の設定 */
        direction: ltr !important;
        unicode-bidi: normal !important;
        line-height: 1.5 !important;
        letter-spacing: normal !important;
    }
    
    .section-2-image {
        position: static;
        width: 100%;
        max-width: 400px;
        margin-bottom: 30px;
        order: 2;
    }
    
    .yoko-catch-left {
        width: 100%;
        order: 3;
    }
    
    .yoko-catch-left-in {
        position: static;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        left: auto;
        top: auto;
    }
    
    /* 第3セクション修正 */
    .section-3 {
        margin-top: 100px !important; /* 統一 */
        padding: 40px 20px !important; /* 他のセクションと統一 */
    }
    
    .section-3 .tate-catch-float {
        position: static;
        writing-mode: horizontal-tb !important;
        -webkit-writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        -webkit-text-orientation: mixed !important;
        font-size: 20px;
        text-align: left;
        margin-bottom: 30px;
        order: 1;
        width: 100%;
        min-width: 100%;
        white-space: normal;
        
        /* 横書き用の設定 */
        direction: ltr !important;
        unicode-bidi: normal !important;
        line-height: 1.5 !important;
        letter-spacing: normal !important;
    }
    
    .section-3-image {
        position: static;
        width: 100%;
        max-width: 400px;
        margin-bottom: 30px;
        order: 2;
    }
    
    .section-3-text {
        position: static;
        max-width: 100%;
        order: 3;
        left: auto;
        top: auto;
        width: 100% !important; /* 幅を確実に100%に */
    }
    
    .section-3-text .yoko-catch:nth-child(2) {
        float: none;
        width: 100%;
        margin-bottom: 20px; /* 追加: ボタンとの間隔 */
    }
    
    .section-3-text .yoko-catch-btn {
        float: none;
        margin: 30px 0 0 0;
        padding-top: 0;
        width: 100%; /* 追加: 幅を確実に指定 */
    }
    
    /* ボタン共通スタイル修正 */
    .yoko-catch-btn {
        margin-left: 0 !important;
        padding-top: 30px !important;
        width: 100% !important; /* 追加: 幅を確実に指定 */
        clear: both !important; /* 追加: floatのクリア */
    }
    
    .yoko-catch-btn a {
        padding: 16px 24px;
        font-size: 18px;
        letter-spacing: 0.2rem;
        display: inline-block;
        width: auto;
    }
    
    .comp-catch {
        position: static;
        writing-mode: horizontal-tb !important;
        -webkit-writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        -webkit-text-orientation: mixed !important;
        font-size: 20px;
        text-align: left;
        margin-bottom: 30px;
        order: 1;
        margin-left: 0px;
        width: 100%;
        right: 0px !important;
        padding: 0;
        
        /* 横書き用の設定（Windows/Mac共通） */
        direction: ltr !important;
        unicode-bidi: normal !important;
        line-height: 1.5 !important;
        letter-spacing: normal !important;
        white-space: normal !important;
        
        /* 横書き時の句読点・組版設定 */
        text-indent: 0 !important;
        text-justify: none !important;
        hanging-punctuation: none !important;
        word-spacing: normal !important;
        text-align-last: left !important;
    }
    
    /* 追加: clearfix対応 */
    .clearfix {
        clear: both;
    }
    
    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }
    
    /* 追加: float要素のクリア */
    .section-3-text .yoko-catch,
    .yoko-catch-left-in .yoko-catch {
        float: none !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }
}


        /* 縦書き見出しセクション - Mac Safari対応修正版 */

.item-feature {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 20px;
    background-color: #fff;
    min-height: 300px;
    /* 親要素のwriting-mode指定を削除（干渉の原因） */
}

.item-feature h2 {
    /* 基本の縦書き設定 */
    writing-mode: vertical-rl !important;
    text-orientation: upright !important;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.8;
    color: #333;
    letter-spacing: 0.2em;
    text-align: center !important;
    border-bottom: none !important;
    margin-bottom: 0px;
    
    /* WebKit系ブラウザ対応（Safari, Chrome, Edge） */
    -webkit-writing-mode: vertical-rl !important;
    -webkit-text-orientation: upright !important;
    -webkit-text-align-last: center !important;
    
    /* Firefox対応 */
    -moz-text-align-last: center !important;
    
    /* IE/Edge Legacy対応 */
    -ms-writing-mode: tb-rl !important;
    
    /* 基本設定 */
    direction: ltr !important;
    unicode-bidi: normal !important;
    width: auto !important;
    height: auto !important;
    min-width: 40px !important;
    
    /* レンダリング最適化 */
    transform: none !important;
    -webkit-transform: none !important;
    text-combine-upright: none !important;
    -webkit-text-combine: none !important;
    font-feature-settings: normal !important;
    -webkit-font-feature-settings: normal !important;
    
    /* フォント関連 */
    font-family: "Noto Serif JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游明朝", "Yu Mincho", serif !important;
    font-variant-east-asian: normal !important;
    -webkit-font-variant-east-asian: normal !important;
    text-rendering: optimizeLegibility !important;
    -webkit-text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    
    /* 表示設定 */
    display: block !important;
}

.item-feature h2 img {max-height:180px;}

/* 疑似要素のborderを確実に削除 */
.item-feature h2:before, 
.item-feature h2:after {
    border-bottom: none !important;
    content: none !important;
    display: none !important;
}
        @media screen and (max-width: 768px) {
.item-feature h2 img {max-height:110px;}

}

/* ===========================================
   Safari専用の縦書き修正（正確な条件分岐）
   =========================================== */





/* ===========================================
   Firefox専用設定
   =========================================== */

@-moz-document url-prefix() {
    .item-feature h2 {
        writing-mode: vertical-rl !important;
        text-orientation: upright !important;
        direction: ltr !important;
        unicode-bidi: normal !important;
        text-align: center !important;
        -moz-text-align-last: center !important;
    }
}

/* ===========================================
   Internet Explorer / Edge Legacy 対応
   =========================================== */

@supports (-ms-writing-mode: tb-rl) {
    .item-feature h2 {
        -ms-writing-mode: tb-rl !important;
        writing-mode: tb-rl !important;
        text-align: center !important;
    }
}

/* ===========================================
   Chrome/Edge（非Safari WebKit）専用設定
   =========================================== */

/* Chrome/Edge専用（Safariを除外した条件） */
@supports (-webkit-appearance: none) and (not (-webkit-touch-callout: none)) {
    .item-feature h2 {
        writing-mode: vertical-rl !important;
        text-orientation: upright !important;
        direction: ltr !important;
        unicode-bidi: normal !important;
        text-align: center !important;
        -webkit-text-align-last: center !important;
    }
}
        
        /* 無限スクロール画像セクション */

        .infinite-scroll-section {
        	padding: 0px 0;
        	overflow: hidden;
        }
	.item-btn {margin-bottom:50px!important;}
        .scroll-container {
        	width: 100%;
        	overflow: hidden;
        	position: relative;
        	margin-bottom: 50px!important;
        }
        .scroll-track {
        	display: flex;
        	width: calc(435px * 14);
        	/* 7枚 × 2セット */
        	animation: infiniteScroll 20s linear infinite;
        }
        .scroll-item {
        	width: 435px;
        	height: 435px;
        	flex-shrink: 0;
        	margin-right: 20px;
        }
        .scroll-item img {
        	width: 100%;
        	height: 100%;
        	object-fit: cover;
        }
        @keyframes infiniteScroll {
        	0% {
        		transform: translateX(0);
        	}
        	100% {
        		transform: translateX(calc(-435px * 7 - 20px * 7));
        		/* 1セット分移動 */
        	}
        }
        /* ホバー時にアニメーション一時停止 */

        .scroll-track:hover {
        	animation-play-state: paused;
        }
        /* スマホ対応 */

        @media screen and (max-width: 768px) {
        	.scroll-item {
        		width: 250px;
        		height: 250px;
        		margin-right: 15px;
        	}
        	.scroll-track {
        		width: calc(250px * 14 + 15px * 14);
        		animation: infiniteScrollMobile 15s linear infinite;
        	}
        	@keyframes infiniteScrollMobile {
        		0% {
        			transform: translateX(0);
        		}
        		100% {
        			transform: translateX(calc(-250px * 7 - 15px * 7));
        		}
        	}
        }

/* =====================================
   サブページ用
   ===================================== */
        .subpage-top {
        	width:1700px;
			max-width:100%;
			margin:0 auto;
        }
        .subpage-width {
        	width:1450px;
			max-width:100%;
			margin:0 auto;
        }
.skin-grayish .article-header {display:none!important;}

#breadcrumb,
.breadcrumb-page,
.pbp-main-before,
div[itemtype="https://schema.org/BreadcrumbList"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

.tate-title {
    display: flex;
    justify-content: flex-end; /* 右寄せに変更 */
    align-items: flex-start;   /* 上寄せに変更 */
    padding: 20px;
    background-color: #fff;
    min-height: 360px;
    margin: 0; /* marginをリセット */
}

.tate-title {
    display: flex;
    justify-content: flex-end; /* 右寄せに変更 */
    align-items: center;       /* 縦中央に配置 */
    padding: 20px;
    background-color: #fff;
    min-height: 360px;
    margin: 0; /* marginをリセット */
}

.tate-title h2 {
    writing-mode: vertical-rl !important;
    text-orientation: upright !important;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.8;
    color: #333;
    letter-spacing: 0.2em;
    text-align: center !important;
    border: none;      /* borderを完全にリセット */
    margin: 0;         /* marginを完全にリセット */
    padding: 0;        /* paddingを完全にリセット */
    
    /* Safari対応 */
    -webkit-writing-mode: vertical-rl !important;
    -webkit-text-orientation: upright !important;
    direction: ltr !important;
    unicode-bidi: normal !important;
}

/* 疑似要素のborderを確実に削除 */
.tate-title h2:before, 
.tate-title h2:after {
    content: none;
    border: none;
    display: none;
}



@media screen and (max-width: 768px) {
    .tate-title {
        min-height: auto;        /* 最小高さを解除 */
        height: auto;
        justify-content: center; /* モバイルでは中央寄せ */
        align-items: center;
        padding: 0px;           /* モバイルでは少し小さめのpadding */
	margin-top:50px;
    }
    
    .tate-title h2 {
        writing-mode: horizontal-tb !important;
        -webkit-writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        -webkit-text-orientation: mixed !important;
        
        font-size: 28px; /* モバイルでは少し小さく */
        margin: 0;      /* 負のmarginを削除 */
        text-align: center;
        
        /* 横書き用の設定（Windows/Mac共通） */
        direction: ltr !important;
        unicode-bidi: normal !important;
        line-height: 1.5 !important;
        letter-spacing: normal !important;
        white-space: normal !important;
        
        /* 横書き時の句読点・組版設定 */
        text-indent: 0 !important;
        text-justify: none !important;
        hanging-punctuation: none !important;
        word-spacing: normal !important;
        text-align-last: left !important;
    }
   .sub-top-image img {width:90%;margin-left:5%;}
  .reverse-box{
    flex-direction: column-reverse!important;
  }
  .mobile-header-menu-buttons {display:none!important;}
}
@media screen and (min-width: 768px) {
  .mobile-header-menu-buttons {display:none!important;}
}
/* =====================================
   サブページ空白修正用CSS
   既存のCSSファイルの最後に追加してください
   ===================================== */

/* サブページでのヘッダーコンテナリセット */
body:not(.home):not(.front-page) #header-container.header-container {
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    width: 100% !important;
    background: #fff !important;
    padding: 20px 0 !important;
}

/* サブページでのヘッダーコンテナ内要素のリセット */
body:not(.home):not(.front-page) #header-container-in.header-container-in {
    height: auto !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* サブページでのヘッダー要素のリセット */
body:not(.home):not(.front-page) #header.header {
    position: static !important;
    background: transparent !important;
    height: auto !important;
}

body:not(.home):not(.front-page) #header-in.header-in {
    height: auto !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
}

/* サブページでのロゴ位置調整 */
body:not(.home):not(.front-page) .logo.logo-header {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
}

/* サブページでの動画要素を非表示 */
body:not(.home):not(.front-page) #header-container video,
body:not(.home):not(.front-page) #header-container .bg-video,
body:not(.home):not(.front-page) #header-container .video-container {
    display: none !important;
}

/* サブページでのオーバーレイ要素を非表示 */
body:not(.home):not(.front-page) #header-container .grayish_topmv_whovlay,
body:not(.home):not(.front-page) #header-container .grayish_topmv_dot {
    display: none !important;
}

/* サブページでのスクロールインジケーター非表示 */
body:not(.home):not(.front-page) .skinadd-topmv-scroll,
body:not(.home):not(.front-page) .video-link-button {
    display: none !important;
}

/* 最重要：サブページのメインコンテンツのマージンをリセット */
body:not(.home):not(.front-page) #header-container + * {
    margin-top: 0 !important;
    background: #fff !important;
}

/* サブページでの背景透明化を解除 - コンテンツエリアを白背景に */
body:not(.home):not(.front-page) #header-container,
body:not(.home):not(.front-page) .content,
body:not(.home):not(.front-page) #content.content,
body:not(.home):not(.front-page) #header-container + #content.content {
    background: #fff !important;
}

/* サブページのメインコンテンツエリアも白背景に */
body:not(.home):not(.front-page) main,
body:not(.home):not(.front-page) .main,
body:not(.home):not(.front-page) .content .main {
    background: #fff !important;
    padding: 0px !important;
}

/* パンくずリストエリアの背景も確実に白に */
.breadcrumb,
.breadcrumb-list,
 #breadcrumb {
    display:none!important;
}

/* 記事・ページコンテンツエリアの背景を白に */
body:not(.home):not(.front-page) .article,
body:not(.home):not(.front-page) .post,
body:not(.home):not(.front-page) .page,
body:not(.home):not(.front-page) .entry-content,
body:not(.home):not(.front-page) .single-main,
body:not(.home):not(.front-page) .page-main {
    background: #fff !important;
}

/* サブページでのナビゲーション調整 */
body:not(.home):not(.front-page) #navi.navi {
    position: static !important;
    margin-top: 0 !important;
    background: transparent !important;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    body:not(.home):not(.front-page) #header-container.header-container {
        padding: 15px 0 !important;
    }
    
    body:not(.home):not(.front-page) #header-container-in.header-container-in {
        padding: 0 15px !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
}

@media screen and (max-width: 480px) {
    body:not(.home):not(.front-page) #header-container.header-container {
        padding: 10px 0 !important;
    }
    
    body:not(.home):not(.front-page) #header-container-in.header-container-in {
        padding: 0 10px !important;
    }
}

/* =====================================
   フローティングメニュー用の追加調整
   ===================================== */

/* サブページでフローティングメニューが表示される場合の調整 */
body:not(.home):not(.front-page) #floating-logo {
    /* 必要に応じてサブページでの位置を調整 */
}

body:not(.home):not(.front-page) #floating-custom-menu {
    /* 必要に応じてサブページでの位置を調整 */
}

/* =====================================
   私たちの想い
   ===================================== */

        .about-catch {
            font-size: 32px;
            line-height: 2;
            margin-bottom: 30px;
			padding-left:30px;
        }

        .about-text {
            font-size: 20px;
            line-height: 2;
            margin-bottom: 30px;
        }

.about-photo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}
.two-column-center {
    display: flex !important;
    align-items: stretch !important;
}

.two-column-center .panel-grid-cell {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    padding: 20px !important;
}

.two-column-center .panel-grid-cell > * {
    width: 100% !important;
}


        @media screen and (max-width: 768px) {

        .about-catch {
            font-size: 22px;
			padding-left:0;
        }

        .about-text {
            font-size: 16px
        }
}

/* =====================================
   製造工程
   ===================================== */
        .process-num {
            font-size: 60px;

            margin-bottom: 50px;

			padding-left:30px;
        }
.process-num span {			            padding-bottom:15px;border-bottom:1px solid #333;}
.process-left {
    display: flex !important;
    align-items: right !important;
    justify-content: right !important;
    width: 100% !important;
    height: 100% !important;
}
.process-right {
    display: flex !important;
    align-items: left !important;
    justify-content: left !important;
    width: 100% !important;
    height: 100% !important;
}
     @media screen and (max-width: 768px) {
.process-photo img {max-width:70%;}
		 .process-left, .process-right {
			 align-items: center !important;
    justify-content: center !important;
		 }
		 
}

/* =====================================
   ダイコクヤについて
   ===================================== */

        .company-catch {
            writing-mode: vertical-rl !important;
            text-orientation: upright !important;
            font-size: 27px;
            font-weight: bold;
            line-height: 2;
            flex-shrink: 0;
		margin-top:100px;
		
		/* Safari対応 */
		-webkit-writing-mode: vertical-rl !important;
		-webkit-text-orientation: upright !important;
		direction: ltr !important;
		unicode-bidi: normal !important;

        }
        

        
.company-ttl {color:#0063b1;
font-size:48px;
margin-bottom:30px;
font-weight:bold;
text-align:center;
font-family:sans-serif;}

.company-detail {
font-size:24px;
margin-bottom:30px;
text-align:center;font-family:sans-serif;}
       .company-overview .overview-title {
            font-size: 32x!impprtant;
				        font-weight:normal;
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 10px;
            border-bottom: none;
            position: relative;
			padding-top:50px;
		   margin-top:0px;
        }
       .company-overview .overview-title:before, .company-overview .overview-title:after {
		   background:none;
		   border-bottom:none;
}
      .history .history-title {
            font-size: 32px!impprtant;
	        font-weight:normal;
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 10px;
            border-bottom: none;
            position: relative;
			padding-top:50px;
		   margin-top:0px;
        }
.history .history-title:before {
	background-color: #333;
	width:100px;
  bottom: 0px; /* 線の位置 */
  content: "";
  height: 1px; /* 線の高さ */
  left: 50%; /* 線の中央寄せ */
  position: absolute;
  transform: translateX(-50%); /* 線の中央寄せ */
border-bottom:none;	
}
        .company-overview table {
            width: 100%;
            border-collapse: collapse;
            background: transparent !important;
        }
        
        .company-overview tr {
            background: transparent !important;
        }
        
        .company-overview tr:nth-child(odd) {
            background: transparent !important;
        }
        
        .company-overview tr:nth-child(even) {
            background: transparent !important;
        }
        
        .company-overview td {
            padding: 12px 0;
            border-bottom: 1px solid #ddd;
            vertical-align: top;
			border-left:none!important;
			background:transparent!important;
			
        }
        
        .company-overview td:first-child {
            width: 160px;
            font-weight: bold;
            padding-right: 20px;
						border-right:none!important;
			background:transparent!important;
        }
        
      .history-item {
            margin-bottom: 20px;
            line-height: 1.7;
            display: flex;
            align-items: flex-start;
        }
        
        .history-year {
            font-weight: bold;
            flex-shrink: 0;
            width: 80px;
            margin-right: 15px;
        }
        
        .history-content-wrapper {
            flex: 1;
        }
        
        .history-content {
            display: block;
            margin-bottom: 0;
        }
        
        .history-content-indent {
            display: block;
            margin-top: 5px;
            margin-left: 0;
        }
        
        @media (max-width: 768px) {
			
			
			.company-overview td, .history * {font-size:11px!important;}
			        .company-overview td:first-child {
            width: 100px;
        }
            .columns {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            
            body {
                padding: 20px;
            }
            
            .container {
                padding: 20px;
            }

.company-catch {
    /* 基本の縦書き設定 */
    writing-mode: vertical-rl !important;
    -webkit-writing-mode: vertical-rl !important;
    -ms-writing-mode: tb-rl !important;
    text-orientation: upright !important;
    -webkit-text-orientation: upright !important;
    
    /* スタイル設定 */
    font-size: 27px;
    font-weight: bold;
    line-height: 2;
    flex-shrink: 0;
    margin-top: 100px;
    
    /* 読点問題解決：行頭揃え設定 */
    text-align: left !important;
    text-align-last: left !important;
    -webkit-text-align-last: left !important;
    -moz-text-align-last: left !important;
    
    /* 句読点関連の設定を完全リセット */
    hanging-punctuation: none !important;
    -webkit-hanging-punctuation: none !important;
    text-justify: none !important;
    text-indent: 0 !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    
    /* Chrome特有の問題対策 */
    white-space: normal !important;
    word-break: normal !important;
    line-break: auto !important;
    
    /* 文字方向の確実な制御 */
    direction: ltr !important;
    unicode-bidi: normal !important;
    
    /* フォント設定のリセット */
    font-feature-settings: normal !important;
    -webkit-font-feature-settings: normal !important;
    font-variant-east-asian: normal !important;
    text-emphasis: none !important;
    text-spacing: normal !important;
    
    /* レンダリング最適化 */
    display: block !important;
    font-family: "Noto Serif JP", "游明朝", "Yu Mincho", serif !important;
    }
		 .company-ttl {font-size:30px;}
		 .company-detail {font-size:18px;}

}

/* ===== スマホ表示でのコンテンツ全幅表示修正CSS（根本的修正版） ===== */

/* トップページのメインコンテンツエリアのみにFV設定を適用 */
body.home #container:first-child:not([class*="footer"]),
body.front-page #container:first-child:not([class*="footer"]) {
    margin-top: 100vh !important;
    position: relative !important;
    z-index: 1000 !important;
    background: white !important;
}

/* より具体的な指定でメインコンテンツのみ */
body.home #content.content:first-of-type,
body.front-page #content.content:first-of-type {
    margin-top: 100vh !important;
    position: relative !important;
    z-index: 1000 !important;
    background: white !important;
}

/* 基本コンテナの全幅化（フッター要素除外） */
#container:not([id*="footer"]):not([class*="footer"]),
.container:not([id*="footer"]):not([class*="footer"]) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* メインコンテンツエリアの全幅化（フッター要素除外） */
#content:not([id*="footer"]):not([class*="footer"]),
.content:not([id*="footer"]):not([class*="footer"]),
#main:not([id*="footer"]):not([class*="footer"]),
.main:not([id*="footer"]):not([class*="footer"]),
main:not([id*="footer"]):not([class*="footer"]) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* wrapクラスの全幅化（フッター要素除外） */
.wrap:not([id*="footer"]):not([class*="footer"]):not(#header-container .wrap):not(#header-container-in .wrap) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* ===== モバイル専用設定 ===== */
@media screen and (max-width: 768px) {
    
    /* FV設定の保護（トップページのメインコンテンツのみ） */
    body.home #container:first-child:not([class*="footer"]),
    body.front-page #container:first-child:not([class*="footer"]),
    body.home #content.content:first-of-type,
    body.front-page #content.content:first-of-type {
        margin-top: 100vh !important;
        position: relative !important;
        z-index: 1000 !important;
        background: white !important;
    }
    
    /* ハンバーガーメニューのモバイル対応 */
    .custom-side-panel {
        width: 280px !important;
        right: -280px !important;
        padding: 70px 30px 30px !important;
    }
    
    /* 全幅表示（フッター要素除外）+ 位置調整 */
    #container:not([id*="footer"]):not([class*="footer"]),
    .container:not([id*="footer"]):not([class*="footer"]),
    #content:not([id*="footer"]):not([class*="footer"]),
    .content:not([id*="footer"]):not([class*="footer"]),
    #main:not([id*="footer"]):not([class*="footer"]),
    .main:not([id*="footer"]):not([class*="footer"]),
    main:not([id*="footer"]):not([class*="footer"]),
    .wrap:not([id*="footer"]):not([class*="footer"]):not(#header-container .wrap):not(#header-container-in .wrap) {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* セクション要素の幅設定とマージン保護 + 位置調整 */
    .sozai-container:not([class*="footer"]),
    .section-1,
    .section-2,
    .section-3,
    .section-comp {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box !important;
    }
    
    /* セクション間マージンの明示的設定 + 位置調整 */
    .section-1 {
        margin-top: 0 !important;
        margin-bottom: 40px !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        clear: both !important;
    }
    
    .section-2 {
        margin-top: 60px !important;
        margin-bottom: 40px !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        clear: both !important;
    }
    
    .section-3 {
        margin-top: 100px !important;
        margin-bottom: 40px !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        clear: both !important;
    }
    
    .section-comp {
        margin-top: 40px !important;
        margin-bottom: 40px !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        clear: both !important;
    }
    
    /* 内部コンテンツのpadding調整 */
    .sozai-container,
    .section-1,
    .section-2, 
    .section-3,
    .subpage-width {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* テキストコンテンツエリアのpadding */
    .about-catch,
    .about-text,
    .company-ttl,
    .company-detail {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* テーブル要素の調整 */
    .company-overview table {
        width: 100% !important;
        margin: 0 10px !important;
        max-width: calc(100vw - 20px) !important;
    }
}

@media screen and (max-width: 480px) {
    
    /* FV設定の保護（トップページのメインコンテンツのみ） */
    body.home #container:first-child:not([class*="footer"]),
    body.front-page #container:first-child:not([class*="footer"]),
    body.home #content.content:first-of-type,
    body.front-page #content.content:first-of-type {
        margin-top: 100vh !important;
        position: relative !important;
        z-index: 1000 !important;
        background: white !important;
    }
    
    /* ハンバーガーメニューのモバイル対応 */
    .custom-side-panel {
        width: 250px !important;
        right: -250px !important;
        padding: 60px 25px 25px !important;
    }
    
    /* セクション間マージン（480px以下）+ 位置調整 */
    .section-1 {
        margin-top: 0 !important;
        margin-bottom: 30px !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        clear: both !important;
    }
    
    .section-2 {
        margin-top: 50px !important;
        margin-bottom: 30px !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        clear: both !important;
    }
    
    .section-3 {
        margin-top: 80px !important;
        margin-bottom: 30px !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        clear: both !important;
    }
    
    .section-comp {
        margin-top: 30px !important;
        margin-bottom: 30px !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        clear: both !important;
    }
}

/* ===== 重要：フッター要素には一切手を加えない ===== */
/* フッター関連の設定は既存CSSに完全に委ねる */

/* ===== フッター下のヘッダー背景動画問題を解決 ===== */

/* ページ全体の高さとレイアウトを修正 */
html {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
    box-sizing: border-box !important;
    /* flex設定を削除してシンプルにする */
    display: block !important;
}

/* フッター要素の確実な背景設定とz-index */
#footer,
#footer.footer,
.footer,
.footer-container {
    background: #d1c6c1 !important;
    position: relative !important;
    z-index: 10000 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    /* フッターが確実に背景を持つようにする */
}

/* フッター内部要素も背景を確実に設定 */
#footer-in,
.footer-in,
.footer-widgets,
.footer-bottom {
    background: #d1c6c1 !important;
    position: relative !important;
    z-index: 10001 !important;
    margin-bottom: 0 !important;
}

/* コピーライト要素の背景も確実に設定 */
.source-org,
.copyright,
.source-org.copyright {
    background: #d1c6c1 !important;
    position: relative !important;
    z-index: 10002 !important;
    margin-bottom: 0 !important;
    padding-bottom: 20px !important;
}

/* ヘッダー背景動画がフッター領域に侵入しないよう制限 */
#header-container,
#header-container video,
#header-container .bg-video,
#header-container .video-container {
    /* フッター要素より下のz-indexに設定 */
    z-index: 1000 !important;
    /* 動画の表示範囲をビューポート内に制限 */
    clip: rect(0, auto, 100vh, 0) !important;
    overflow: hidden !important;
}

/* ページ全体のコンテナの下マージンを除去 */
#container,
.container,
#content,
.content,
#main,
.main,
main,
.wrap {
    margin-bottom: 0 !important;
}

/* 最後の子要素の下マージンを強制除去 */
body > *:last-child,
#footer:last-child,
.footer:last-child {
    margin-bottom: 0 !important;
}

/* ページの最小高さ調整 */
#container,
.container {
    min-height: calc(100vh - 200px) !important; /* フッターの高さ分を除く */
}

/* すべての要素の最後の子の下マージンを除去 */
*:last-child {
    margin-bottom: 0 !important;
}

/* Cocoon特有のクラスの下マージンを除去 */
.nwa,
.cf,
.wrap.cf {
    margin-bottom: 0 !important;
}

/* モバイルでも同様の設定を適用 */
@media screen and (max-width: 768px) {
    #footer,
    .footer,
    .footer-bottom,
    .source-org,
    .copyright {
        background: #d1c6c1 !important;
        z-index: 10000 !important;
        margin-bottom: 0px !important;
    }
    
    body {
        min-height: 100vh !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* ヘッダー背景動画の制限（モバイル） */
    #header-container,
    #header-container video,
    #header-container .bg-video {
        z-index: 1000 !important;
        clip: rect(0, auto, 100vh, 0) !important;
    }
}

@media screen and (max-width: 480px) {
    #footer,
    .footer,
    .footer-bottom,
    .source-org,
    .copyright {
        background: #d1c6c1 !important;
        z-index: 10000 !important;
        margin-bottom: 0 !important;
    }
    
    body {
        min-height: 100vh !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* ヘッダー背景動画の制限（480px以下） */
    #header-container,
    #header-container video,
    #header-container .bg-video {
        z-index: 1000 !important;
        clip: rect(0, auto, 100vh, 0) !important;
    }
}

/* 動画要素を確実に背景に固定 */
#header-container video,
#header-container .bg-video,
#header-container .video-container {
    z-index: -100 !important;           /* より低い値に */
    pointer-events: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover !important;
}

/* 動画関連の要素も背景に */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure {
    z-index: -50 !important;
}

.go-to-top-button span {
    margin-top: 16.5px !important;  /* 中央配置用の計算値 */
    margin-left: 19.5px !important; /* 既存値を維持 */
    margin-right: 19.5px !important; /* 既存値を維持 */
}

/* 段階的な非表示処理 */
ul.mobile-footer-menu-buttons.mobile-menu-buttons {
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    position: absolute !important;
    bottom: -100px !important;
}

/* 子要素も非表示 */
.mobile-footer-menu-buttons .menu-button {
    display: none !important;
}

/* より強力なフッター下部スペース除去 */
@media (max-width: 768px) {
    /* 全体の下部調整 */
    html, body {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        height: auto !important;
        min-height: 100vh !important;
    }
    
    /* フッター関連の完全調整 */
    #footer,
    .footer,
    .site-footer,
    .footer-container,
    .footer-wrap {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }
    
    /* ページラッパーの調整 */
    #page,
    .site,
    .wrap,
    .container,
    .main-wrapper {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Cocoon特有の調整 */
    body.mobile-footer-menu-buttons-enable,
    body[class*="mobile-footer"] {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* 最後の要素の調整 */
    body > *:last-child,
    #page > *:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* 全ての競合するCSSを上書き */
@media screen and (max-width: 768px) {
    /* 元のCSSを完全上書き */
    html body .sozai-container:not([class*="footer"]) {
        width: calc(100% - 40px) !important;
        max-width: calc(100% - 40px) !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
        box-sizing: border-box !important;
		margin-top:-50px!important;
    }
    
    /* padding も強制上書き */
    html body .sozai-container,
    html body .section-1,
    html body .section-2,
    html body .section-3 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* =====================================
   古いブラウザ対応の追加
   ===================================== */

/* IE対応（念のため） */
@media screen and (min-width: 835px) {
    .top-catch-head,
    .top-catch p,
    .tate-catch,
    .tate-catch-float,
    .tate-catch-float-left,
    .company-catch,
    .comp-catch,
    .item-feature h2,
    .tate-title h2 {
        /* IE対応（念のため） */
        -ms-writing-mode: tb-rl;
        
        /* 古いFirefox対応 */
        -moz-writing-mode: vertical-rl;
    }
}
.pc-top-catch img {max-width:100%;}	
.sp-top-catch {display:none;}
@media (max-width: 768px) {
	.pc-top-catch {display:none;}	
	.sp-top-catch {display:block;}	
}

/* =====================================
   縦書き句読点表示修正CSS
   ===================================== */

/* company-catchクラスの句読点問題修正のみ（既存デザイン保持） */
.company-catch {
    writing-mode: vertical-rl !important;
    text-orientation: upright !important;
    font-size: 27px;
    font-weight: bold;
    line-height: 2;
    flex-shrink: 0;
    margin-top: 100px;
    
    /* Safari対応 */
    -webkit-writing-mode: vertical-rl !important;
    -webkit-text-orientation: upright !important;
    direction: ltr !important;
    unicode-bidi: normal !important;
    
    /* 文頭揃えで自然な配置（既存設定を上書きしない） */
    text-align: start !important;
    text-align-last: start !important;
    -webkit-text-align-last: start !important;
    -moz-text-align-last: start !important;
    
    /* 句読点の配置修正のみ */
    hanging-punctuation: allow-end !important;
    
    /* 均等配置を無効化 */
    text-justify: none !important;
    
    /* 最小限の句読点位置調整 */
    font-feature-settings: "vkrn" 1 !important;
    -webkit-font-feature-settings: "vkrn" 1 !important;
    
    /* 改行制御のみ */
    line-break: strict !important;
    word-break: keep-all !important;
    
    /* 既存のletter-spacing、word-spacing設定は保持 */
    /* letter-spacing、word-spacingの設定は削除 */
}


/* =====================================
   Safari縦書きバグ修正CSS
   ===================================== */

.item-feature h2 {
    /* Safari対応：段階的縦書き設定 */
    writing-mode: vertical-rl !important;
    -webkit-writing-mode: vertical-rl !important;
    
    /* Safari縦書きバグ対策：文字方向を強制 */
    text-orientation: upright !important;
    -webkit-text-orientation: upright !important;
    
    /* Safari専用：レンダリング強制リセット */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    
    /* Safari専用：レイヤー作成でレンダリング修正 */
    will-change: transform !important;
    
    /* Safari専用：ハードウェアアクセラレーション */
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    
    /* Safari専用：フォントレンダリング最適化 */
    -webkit-font-smoothing: subpixel-antialiased !important;
    -webkit-text-stroke: 0.01em transparent !important;
    
    /* 基本設定の強化 */
    font-size: 32px !important;
    font-weight: bold !important;
    line-height: 1.8 !important;
    color: #333 !important;
    letter-spacing: 0.2em !important;
    
    /* レイアウト強制設定 */
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 40px !important;
    
    /* 位置関連 */
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    
    /* テキスト配置 */
    text-align: center !important;
    -webkit-text-align-last: center !important;
    
    /* 方向設定 */
    direction: ltr !important;
    unicode-bidi: normal !important;
    
    /* フォント詳細 */
    font-family: "Noto Serif JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游明朝", "Yu Mincho", serif !important;
    font-variant-east-asian: normal !important;
    -webkit-font-variant-east-asian: normal !important;
    
    /* overflow設定 */
    overflow: visible !important;
    white-space: normal !important;
}

/* Safari専用条件分岐 */
@supports (-webkit-touch-callout: none) {
    .item-feature h2 {
        /* Safari専用：より強力な縦書き設定 */
        writing-mode: vertical-rl !important;
        -webkit-writing-mode: vertical-rl !important;
        text-orientation: upright !important;
        -webkit-text-orientation: upright !important;
        
        /* Safari専用：描画最適化 */
        -webkit-perspective: 1000px !important;
        -webkit-transform-style: preserve-3d !important;
        
        /* Safari専用：フォント描画修正 */
        -webkit-font-feature-settings: "vkrn" 1 !important;
        font-feature-settings: "vkrn" 1 !important;
        
        /* Safari専用：文字間隔調整 */
        letter-spacing: 0.1em !important;
        
        /* Safari専用：行送り調整 */
        line-height: 1.6 !important;
    }
}

/* より具体的なSafari対策 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .item-feature h2 {
        /* WebKit専用の縦書き強制 */
        writing-mode: vertical-rl !important;
        -webkit-writing-mode: vertical-rl !important;
        text-orientation: upright !important;
        -webkit-text-orientation: upright !important;
        
        /* WebKit専用：レンダリング修正 */
        -webkit-transform: rotateZ(0.001deg) !important;
        transform: rotateZ(0.001deg) !important;
    }
}

/* 疑似要素の完全削除 */
.item-feature h2:before,
.item-feature h2:after {
    content: none !important;
    display: none !important;
}

/* 親要素の調整（Safari対応） */
.item-feature {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 80px 20px !important;
    background-color: #fff !important;
    min-height: 300px !important;
    
    /* Safari専用：縦書き子要素用の親設定 */
    -webkit-writing-mode: horizontal-tb !important;
    writing-mode: horizontal-tb !important;
}