@charset "UTF-8";

/* ==========================================================================
   Base & Reset
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333333;
    background-color: #fff;
    /* 左右のナビゲーションは fixed のため、bodyへの flex 指定は不要になりました */
    min-height: 100vh;
}

/* ==========================================================================
   Layout
   ========================================================================== */

/* メインビジュアル（スライドショー） */
.main-visual {
    position: relative;
    width: 100%; /* 100vwは横スクロールバーの原因になるため100%に変更 */
    height: 100vh;
    overflow: hidden;
    background-color: #000;
}

/* メインビジュアル上部のグラデーション（メニュー視認性向上） */
.main-visual::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10%; /* メインビジュアルの10%の高さ */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%); /* 透明度40%の黒から透明へ */
    z-index: 5; /* スライド画像より前面、メニューより背面に配置 */
    pointer-events: none; /* クリック操作などを妨げないようにする */
}

/* メインビジュアル下部のグラデーション（黒色） */
.main-visual::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15%; /* メインビジュアルの15%の高さ */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%); /* 黒色の透明度30%から透明へ */
    z-index: 5;
    pointer-events: none;
}

/* グローバルナビゲーション（メインビジュアル右上配置） */
.global-nav {
    position: absolute;
    top: 40px;
    right: calc(110px + 60px); /* 右側の固定ナビ領域（110px）から60px離す */
    z-index: 10;
}

.global-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px; /* メニュー間の余白 */
}

.global-nav a {
    text-decoration: none;
    color: #ffffff; /* 白色のテキスト */
    font-size: 0.9375rem; /* 15px相当 */
    letter-spacing: 0.1em;
    transition: opacity 0.3s ease;
}

.global-nav a:hover {
    opacity: 0.7; /* ホバー時に少し薄くする */
}

/* メインコピー（ヒーローテキスト） */
.hero-copy {
    position: absolute;
    top: 50%;
    left: calc(110px + 6vw); /* 左側の固定ナビ領域（110px）を避けて配置 */
    transform: translateY(calc(-50% - 200px)); /* 現状よりさらに80px上（計200px上）に移動 */
    z-index: 10; /* スライド画像より手前に配置 */
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* 影をさらに薄く調整 */
}

.copy-main-wrapper {
    display: flex;
    align-items: center; /* 縦の中央揃え */
    gap: 15px; /* テキストと画像の余白（少し左に寄せるため30pxから15pxに縮小） */
    margin: 0; /* サブコピーが上に移動したため下部の余白を削除 */
}

.copy-main {
    font-size: 3rem; /* 48px相当（元の120%） */
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 0; /* 余白はwrapperに移動 */
    line-height: 1.4;
}

.copy-main-small {
    font-size: 0.8em; /* 親要素の80%の大きさ（2.4rem相当） */
}

.kizuna-text {
    font-size: 7.5rem; /* 120px相当 */
    font-weight: 900; /* 最も太い太さ */
    font-style: italic; /* 斜体にする */
    line-height: 1;
    transform: translate(-20px, 26px);
    display: inline-block;
}

.copy-sub {
    font-size: 1.2rem; /* 19.2px相当（元の120%） */
    line-height: 2; /* 読みやすいように行間を広めに */
    letter-spacing: 0.05em;
    margin: 30px 0 0 0; /* 上に30pxの余白を追加して下に移動 */
}

.copy-en {
    position: absolute;
    bottom: 60px; /* メインビジュアルの右下に配置 */
    right: calc(110px + 60px); /* 右側ナビを避けた配置 */
    text-align: right; /* 右揃え */
    font-size: 4rem; /* 64px相当に変更 */
    font-weight: bold; /* 太字にする */
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.02em; /* 文字間を2%に変更 */
    line-height: 1.2; /* 行間を120%に変更 */
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    z-index: 10;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* 背景に同化しないように影をつける */
}

/* ==========================================================================
   パララックス（視差効果）ユーティリティ
   ========================================================================== */
.parallax-wrap {
    position: relative;
    overflow: hidden;
}

.parallax-content {
    position: relative;
    z-index: 1;
}

.parallax-img {
    position: absolute;
    top: -40%; /* 上下40%ずつ余白を持たせて動く範囲を広く確保（合計180%） */
    left: 0;
    width: 100%;
    height: 180%; /* スクロール時に端が見えないように縦幅を十分に大きくする */
    object-fit: cover; /* imgタグ用 */
    background-size: cover; /* div背景用 */
    background-position: center; /* div背景用 */
    background-repeat: no-repeat; /* div背景用 */
    z-index: 0;
    /* transformはJavaScriptで動的に設定します */
    will-change: transform; /* パフォーマンス向上のため */
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* クロスフェード */
    overflow: hidden;
}

.slide.active {
    opacity: 1;
}

@keyframes zoomOut {
    0% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* スライド画像（ズームアウトアニメーション） */
.slide-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.15); /* 初期状態 */
}

/* active時およびフェードアウト中も同じアニメーションを適用することで、途中でカクつく（拡大する）現象を防ぎます */
.slide.active .slide-bg,
.slide.fade-out .slide-bg {
    animation: zoomOut 12s linear forwards; /* 12秒かけて非常にゆっくりズームアウト */
}

/* スライドナビゲーション（画面下部） */
.slide-nav {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10; /* 画像より手前 */
}

.slide-dots {
    display: flex;
    gap: 8px;
}

.dot {
    width: 30px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.4);
    transition: background-color 0.3s ease;
    position: relative; /* 数字の配置基準 */
    cursor: pointer;
}

.dot.active {
    background-color: #fff;
}

.dot-num {
    position: absolute;
    bottom: 8px; /* バーの少し上に配置 */
    left: 50%;
    transform: translateX(-50%); /* バーの中央に配置 */
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem; /* 12px相当 */
    font-family: Arial, sans-serif;
    letter-spacing: 0; /* 中央配置のため字間をリセットしてズレを防ぐ */
    transition: color 0.3s ease;
    line-height: 1;
}

.dot.active .dot-num {
    color: #fff;
}



/* 左右ナビゲーション共通 */
.side-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 110px; /* 110ピクセルの固定幅に変更 */
    background-color: #ffffff; /* 白色に変更 */
    z-index: 100;
}

/* 左側ナビゲーション */
.left-nav {
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 30px; /* 下部に余白を設ける */
}

.left-nav-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
    gap: 40px; /* 企業ロゴとテキストのスペースを拡大 */
}

.left-nav-bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* コピーライトとロゴの間隔 */
}

.nav-logo {
    width: 84%; /* 従来の1.4倍 */
    max-width: 56px;
    height: auto;
    flex-shrink: 0; /* Flexコンテナ内で勝手に縮小されないように念のため追加 */
}

.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
    margin: 0;
    font-size: 1.125rem; /* 18px相当 */
    letter-spacing: 0.15em;
    font-weight: bold;
}

.anniversary-logo {
    width: 76%; /* 先ほどよりわずかに小さく調整 */
    max-width: 60px; /* 上限サイズも少し小さく調整 */
    height: auto;
    margin-top: 0; /* 余白はコンテナのgapで管理するため削除 */
}

.copyright-text {
    writing-mode: vertical-rl;
    font-size: 0.625rem; /* 10px相当 */
    margin: 0;
    letter-spacing: 0.05em;
    color: #cccccc; /* 薄いグレーに設定 */
}

/* 右側ナビゲーション */
.right-nav {
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 下部に配置する */
}

/* ハンバーガーメニュー */
.hamburger-menu {
    width: 100%;
    margin-bottom: auto; /* 余った空間を下に押しやり、自身を一番上に配置する */
    padding-top: 40px; /* 上部の余白 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* 線の間隔 */
    cursor: pointer;
    
    /* スクロール連動の表示制御（初期状態は非表示） */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.hamburger-menu.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.hamburger-menu .line {
    width: 40%; /* 線の長さ */
    height: 2px; /* 線の太さ */
    background-color: #e90514; /* コーポレートカラー */
    transition: all 0.3s ease; /* 全ての変化をアニメーションさせる */
}

.hamburger-menu:hover .line {
    opacity: 0.7; /* ホバーで少し薄くする */
}

/* メニュー開閉時の「×」アイコンへのアニメーション */
.hamburger-menu.is-active .line:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.hamburger-menu.is-active .line:nth-child(2) {
    opacity: 0; /* 真ん中の線を消す */
}

.hamburger-menu.is-active .line:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* ==========================================================================
   ドロワーメニュー（スライドイン）
   ========================================================================== */
.drawer-menu {
    position: fixed;
    top: 0;
    right: 0; /* 画面の右端を基準にする（右ナビの裏に潜り込ませる） */
    width: 26vw; /* 元の20vw + 右ナビゲーションの6vw */
    height: 100vh;
    background-color: #e90514; /* コーポレートカラー */
    z-index: 90; /* 左右ナビゲーション（100）の下に潜り込ませる */
    transform: translateX(100%); /* 初期状態は画面外に隠す */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* スライドアニメーション */
    overflow-y: auto; /* 縦に長い場合はスクロール可能にする */
}

.drawer-menu.is-open {
    transform: translateX(0); /* クラス付与で表示 */
}

.drawer-inner {
    padding: 60px calc(6vw + 40px) 60px 40px; /* コンテンツが右ナビに被らないよう右余白に6vwを追加 */
}

.drawer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px; /* 行間を線の上下で均等にするため調整 */
}

/* メニュー大項目の境界線 */
.drawer-list > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 1ピクセルの横線 */
    padding-bottom: 16px; /* 線の上の余白 */
}
.drawer-list > li:last-child {
    border-bottom: none; /* 最後は線を引かない */
    padding-bottom: 0;
}

.drawer-list > li > a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.2rem; /* 16px相当から1.2倍（約19.2px）に拡大 */
    font-weight: normal; /* レギュラーの太さに変更 */
    letter-spacing: 0.1em;
    line-height: 1.5; /* 行間設定を追加 */
    display: flex;
    justify-content: space-between; /* テキストとアイコンを左右両端に配置 */
    align-items: center;
    transition: opacity 0.3s ease;
}

/* 右端の「＞」アイコン（CSSで作成した矢印） */
.drawer-list > li > a::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    transform: rotate(45deg);
    margin-right: 4px; /* 見た目の微調整 */
}

.drawer-list > li > a:hover {
    opacity: 0.7;
}

.drawer-sublist {
    list-style: none;
    padding-left: 16px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px; /* 行間を広めに調整（元の12pxから拡張） */
}

.drawer-sublist > li > a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 1.05rem; /* 14px相当から1.2倍（約16.8px）に拡大 */
    letter-spacing: 0.05em;
    line-height: 1.5; /* 行間設定を追加 */
    transition: color 0.3s ease;
}

.drawer-sublist > li > a:hover {
    color: #ffffff;
}

/* 言語切り替え */
.lang-switch-wrapper {
    position: relative;
    margin: 0 auto 30px auto; /* 元のJPボタンのマージンをこちらに移動 */
    width: 36px;
    height: 36px;
}

/* 現在の言語（JP） */
.lang-switch.current-lang {
    width: 100%;
    height: 100%;
    background-color: #e90514; /* コーポレートカラーの赤色 */
    color: #ffffff; /* 白文字 */
    border-radius: 50%; /* 丸くする */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem; /* 14px相当 */
    font-weight: normal; /* 普通の太さ */
    transition: opacity 0.3s ease;
    margin: 0;
    position: relative;
    z-index: 2; /* ドロップダウンより手前に */
}

/* ホバーで表示されるドロップダウン領域 */
.lang-switch-dropdown {
    position: absolute;
    bottom: 100%; /* 上に展開 */
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px; /* 丸同士の隙間 */
    padding-bottom: 8px; /* JPボタンとの隙間 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1;
}

/* ラッパーにホバーした時に表示 */
.lang-switch-wrapper:hover .lang-switch-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* EN, CHの各ボタン */
.lang-switch-item {
    width: 36px;
    height: 36px;
    background-color: #999999; /* グレー */
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    font-weight: normal;
    transition: background-color 0.3s ease;
}

.lang-switch-item:hover {
    background-color: #e90514; /* ホバーで赤色 */
}

/* 右側下部の背景（リンクボタン） */
.square-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px 0 22px 0; /* 写真上とテキスト下の余白を均等に合わせる（テキストの行間を考慮して下を微調整） */
    text-decoration: none;
    color: #ffffff;
    gap: 12px; /* アイコンとテキストの間隔 */
    transition: opacity 0.3s ease;
}

.square-box:hover {
    opacity: 0.8;
}

.box-icon {
    width: 64%; /* 指定によりさらに画像を拡大 */
    aspect-ratio: 1 / 1; /* 正方形にする */
    object-fit: cover; /* 画像の比率を保ったまま枠を埋める */
    height: auto;
    /* 写真画像のそのままの色を使うため、filter: brightness(0) invert(1); は削除しました */
}

.box-text {
    font-size: 0.875rem; /* 14px相当 */
    font-weight: normal; /* レギュラーの太さ */
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 1.4; /* 横書きで改行された時のため */
}

/* コーポレートカラー（ロゴから抽出した赤色） */
.primary-color {
    background-color: #e90514; 
}

/* コーポレートカラーより若干暗い色 */
.dark-color {
    background-color: #bd0410;
}

/* メインコンテンツ */
.main-content {
    margin-left: 110px;  /* 左ナビゲーションの幅分空ける */
    margin-right: 110px; /* 右ナビゲーションの幅分空ける */
    width: calc(100% - 220px); /* 100%から左右ナビの合計幅(220px)を引く */
    box-sizing: border-box; /* paddingを含めて幅を計算 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-inner {
    width: 100%;
}

/* ==========================================================================
   お知らせセクション (NEWS)
   ========================================================================== */
.news-section {
    width: 100%;
    background-color: #f9f9f9; /* 薄いグレーの背景 */
    padding: 120px 8%; /* 上下に120px、左右に8%の余白 */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.news-container {
    width: 100%;
    display: flex;
    flex-direction: column; /* 縦並びに変更し、記事リストが全幅に広がるようにする */
}

/* ヘッダーエリア（タイトルとフィルター） */
.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 上下方向の中央揃え */
    margin-bottom: 40px;
    width: 100%;
}

/* 左カラム（タイトル領域） */
.news-left {
    display: flex;
    align-items: baseline; /* テキストの下端を揃える */
    gap: 16px; /* 日本語と英語の隙間 */
}

.news-title-ja {
    font-size: 1.875rem; /* 30px相当（会社の強みと同じ） */
    font-weight: bold; /* 太字（会社の強みと同じ） */
    letter-spacing: 0.2em;
    margin: 0;
    line-height: 1.4;
    color: #333;
}

.news-title-en {
    font-size: 0.75rem; /* 12px相当 */
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.2em;
    color: #999;
}

/* フィルター */
.news-filters {
    display: flex;
    align-items: center;
    gap: 15px;
    /* margin-bottomはnews-headerで制御するため削除 */
}

.news-filters a,
.news-filters .active {
    text-decoration: none;
    font-size: 0.875rem; /* 14px相当 */
    letter-spacing: 0.1em;
}

.news-filters a {
    color: #999;
    transition: color 0.3s ease;
}

.news-filters .active {
    color: #e90514; /* デフォルトでコーポレートカラーの赤色に */
}

.news-filters a:hover {
    color: #e90514; /* マウスオーバーでコーポレートカラーに変更 */
}

.dot-separator {
    color: #ccc;
    font-size: 0.875rem;
}

/* スマホ用カテゴリー選択プルダウン（PCでは非表示） */
.news-filters-select-wrap {
    display: none;
}

/* 記事グリッド */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px; /* カード間の余白 */
    margin-bottom: 40px;
}

/* 各記事カード */
.news-card {
    display: flex;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0; /* 薄いグレーの下線 */
    position: relative; /* 擬似要素の基準点 */
    cursor: pointer; /* ホバー可能であることを示す */
}

/* ホバー時に左から右へ伸びる赤い線 */
.news-card::after {
    content: '';
    position: absolute;
    bottom: -1px; /* 既存のボーダーの上に重ねる */
    left: 0;
    width: 0;
    height: 1px;
    background-color: #e90514; /* コーポレートカラーの赤 */
    transition: width 0.4s ease; /* 幅の変化をアニメーション */
}

.news-card:hover::after {
    width: 100%;
    transition: width 0.15s ease; /* 表示時（ホバー時）は早くする */
}

.news-thumb {
    width: 40%; /* サムネイルの幅 */
    aspect-ratio: 1 / 1; /* 正方形 */
    overflow: hidden;
}

.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s ease-out; /* さらにゆっくり拡大させるアニメーションに変更 */
}

.news-card:hover .news-thumb img {
    transform: scale(1.1); /* ホバー時に画像を1.1倍に拡大 */
}

.news-body {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* 折り返しを有効に */
    gap: 10px;
}

.news-meta time {
    width: 100%; /* 日付を100%幅にして、タグを次の行に押しやる */
    font-size: 0.875rem; /* 14px相当 */
    color: #999;
    font-family: Arial, sans-serif;
    line-height: 1; /* 視覚的な中央揃えを正確にするために追加 */
    margin-bottom: 2px; /* タグとの間隔を少し調整 */
}

.news-tag {
    font-size: 0.75rem; /* 12px相当 */
    color: #666;
    border: 1px solid #ddd;
    padding: 4px 8px; /* line-heightを1にした分、上下のパディングを増やして高さを維持 */
    background-color: #fff;
    line-height: 1; /* 視覚的な中央揃えを正確にするために追加 */
}

.news-tag.tag-new {
    background-color: #e90514; /* コーポレートカラーの赤 */
    color: #ffffff; /* 白いテキスト */
    border-color: #e90514; /* 境界線を背景色と同じにして見えなくする（サイズを保つため） */
}

.news-title {
    font-size: 1rem; /* 16px相当 */
    font-weight: normal;
    line-height: 1.6;
    margin: 0;
    color: #333333;
}

/* 一覧へのリンク */
.news-more {
    align-self: flex-end; /* 右寄せ */
}

.news-more .btn-news-more {
    position: relative;
    text-decoration: none;
    font-size: 1rem; /* 16px相当に変更 */
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    border: 1px solid #e90514; /* 赤色の境界線（デフォルト） */
    background-color: #e90514; /* 赤色の背景（デフォルト） */
    border-radius: 50px; /* 左右を半円状に */
    overflow: hidden; /* はみ出した背景を隠す */
}

.news-more .layer-default {
    display: flex;
    align-items: center;
    gap: 8px; /* アイコンとの間隔 */
    padding: 16px 40px; /* 上下左右の余白にゆとりを持たせる */
    color: #ffffff; /* 白色のテキスト（デフォルト） */
    transition: opacity 0.4s ease;
}

.news-more .layer-hover {
    position: absolute;
    top: -1px; left: -1px; right: -1px; bottom: -1px; /* ボーダーの幅を完全に覆う */
    background-color: #ffffff; /* ホバー時の白色背景 */
    border: 1px solid #cccccc; /* ホバー時のグレー枠線 */
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease; /* 背景がふわっと現れる */
}

.news-more .layer-hover-content {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e90514; /* ホバー時の赤色テキスト（矢印も一緒に赤くなります） */
    opacity: 0;
    transition: opacity 0.3s ease; /* ホバーが外れた時はすぐに消える */
}

.news-more .btn-news-more:hover .layer-hover {
    opacity: 1; /* 背景が赤くなる（既存ボタンの上に覆い被さる） */
}

.news-more .btn-news-more:hover .layer-hover-content {
    opacity: 1;
    transition: opacity 0.4s ease 0.3s; /* 背景が現れた後（0.3秒後）にテキストが白く浮かび上がる */
}

.news-more .arrow-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease; /* 移動アニメーション */
}

.news-more .btn-news-more:hover .layer-hover-content .arrow-icon {
    transform: translateX(4px); /* ホバー時にアイコンが右にスッと動く */
    transition: transform 0.4s ease 0.3s; /* テキストと一緒に動く */
}

/* ==========================================================================
   60周年記念セクション (Anniversary)
   ========================================================================== */
.anniversary-section {
    width: calc(100% + 2px); /* 端数計算による1pxの隙間を埋めるため拡張 */
    margin: 0 -1px; /* 拡張分を左右に振り分けて隙間を完全に塞ぐ */
    background-color: #e90514; /* コーポレートカラーの赤色 */
    color: #ffffff; /* テキストは白色 */
    padding: 120px 8%; /* 左揃えにしたため、左の余白を少し多めに確保 */
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start; /* 左寄せに変更 */
    text-align: left; /* テキストを左揃えに変更 */
    position: relative; /* スクロール枠の絶対配置の基準とする */
}

.anniversary-container {
    width: 100%;
    /* 右側のスクロール領域（2カラムで計40%）と余白（40px）を考慮してテキストエリアの最大幅を制限 */
    max-width: calc(60% - 40px);
}

.anniversary-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0.2; /* 透明度20% */
    z-index: 10; /* 最も手前に配置 */
    pointer-events: none; /* マウス操作を透過させる（スクロールなどを妨げない） */
    max-width: 90%; /* 画面幅が狭い場合にもはみ出さないように */
    height: auto;
}

.anniversary-scroll-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 40%; /* 2カラム分（20% × 2） */
    height: 100%;
    overflow: hidden; /* はみ出した画像を非表示にする */
    display: flex; /* カラムを横並びにする */
    z-index: 1;
}

/* 画像スクロール領域の上下にかけるグラデーションフェード */
.anniversary-scroll-wrapper::before,
.anniversary-scroll-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 120px; /* グラデーションの高さ */
    z-index: 2; /* 画像より手前に配置 */
    pointer-events: none; /* ホバー等の操作を妨げないようにする */
}

/* 上部のグラデーション: 上が赤(100%)、下が透明(0%) */
.anniversary-scroll-wrapper::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(233, 5, 20, 1) 0%, rgba(233, 5, 20, 0) 100%);
}

/* 下部のグラデーション: 上が透明(0%)、下が赤(100%) */
.anniversary-scroll-wrapper::after {
    bottom: 0;
    background: linear-gradient(to bottom, rgba(233, 5, 20, 0) 0%, rgba(233, 5, 20, 1) 100%);
}

.anniversary-scroll-content {
    width: 50%; /* ラッパー（40%）の半分（20%） */
    height: 100%;
}

.scrolling-track {
    display: flex;
    flex-direction: column;
    gap: 0; /* 画像間のスペースはなし */
}

.track-up {
    /* 上へ永遠にスクロールするアニメーション */
    animation: scrollUp 35s linear infinite;
}

.track-down {
    /* 下へ永遠にスクロールするアニメーション */
    animation: scrollDown 35s linear infinite;
}

/* 画像の設定（縦横比を維持） */
.anniversary-img {
    width: 100%; /* 親要素（20%）に対して100%の幅 */
    height: auto;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
}

/* スクロールアニメーションのキーフレーム */
@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }
    100% {
        /* 純粋に半分の距離（4枚分）移動します */
        transform: translateY(-50%);
    }
}

@keyframes scrollDown {
    0% {
        /* 逆方向にループさせるため、-50%からスタートして0に戻す */
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(0);
    }
}

.anniversary-title {
    font-size: 2.5rem; /* 40px相当 */
    letter-spacing: 0.1em;
    margin-bottom: 16px; /* サブタイトルとの間隔のため狭める */
}

.anniversary-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 2.25rem; /* 36px相当 */
    letter-spacing: 0.02em; /* 文字間を2%に変更 */
    margin-bottom: 48px; /* リード文との間隔 */
    opacity: 0.9;
}

.anniversary-lead {
    font-size: 1.875rem; /* 30px相当 */
    font-weight: bold; /* 太字 */
    letter-spacing: 0.02em; /* 文字間を2%に設定 */
    line-height: 1.6;
    margin-bottom: 32px; /* 本文との間隔 */
}

.anniversary-text {
    font-size: 1.125rem; /* 18px相当（少し大きめに） */
    line-height: 2; /* 読みやすいように行間を広げる */
}

/* ==========================================================================
   Responsive (Smartphone)
   ========================================================================== */
/* ==========================================================================
   スマートフォン表示設定 (SP: max-width: 768px)
   ※PC表示（769px以上）には影響を与えないようメディアクエリ内に限定
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* メインコンテンツの余白調整 */
    .main-content {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding-bottom: 0; /* フッター下の白い余白を削除 */
    }

    /* --------------------------------------------------------------------------
       左側ナビゲーション領域 → スマホではヘッダーとして上部固定
       -------------------------------------------------------------------------- */
    .side-nav.left-nav {
        top: 0;
        bottom: auto;
        left: 0;
        right: 0;
        width: 100%;
        height: 60px;
        padding: 0 100px 0 12px; /* 右上の言語切替・ハンバーガーメニュー用の領域を確保 */
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 6px;
        background-color: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        z-index: 1000;
    }

    .left-nav-inner {
        width: auto;
        flex-direction: row;
        align-items: center;
        padding-top: 0;
        gap: 6px;
    }

    .left-nav-inner .nav-logo {
        width: 31px; /* 26pxの1.2倍 */
        max-width: 31px;
        height: auto;
        flex-shrink: 0;
    }

    /* 企業名テキスト（現状の80%の大きさ） */
    .left-nav-inner .vertical-text {
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        font-size: 0.75rem; /* 12px相当（従来の0.9375remの80%） */
        letter-spacing: 0.04em;
        line-height: 1;
        white-space: nowrap;
        font-weight: bold;
        margin: 0;
    }

    /* 企業テキストの右隣に記念アイコンを配置 */
    .left-nav-bottom {
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: 0;
        margin-left: 2px;
    }

    .left-nav-bottom .copyright-text {
        display: none; /* スマホヘッダー内は非表示 */
    }

    .left-nav-bottom .anniversary-logo {
        width: 34px; /* 28pxの1.2倍 */
        max-width: 34px;
        height: auto;
        flex-shrink: 0;
        display: block;
    }

    /* --------------------------------------------------------------------------
       ヘッダー右側に移動した言語選択ボタン & ハンバーガーメニュー
       -------------------------------------------------------------------------- */
    /* 言語切り替えボタン（ヘッダー右上） */
    .right-nav .lang-switch-wrapper {
        position: fixed;
        top: 0;
        right: 54px;
        width: 44px;
        height: 60px;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1002;
    }

    .right-nav .lang-switch.current-lang {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .right-nav .lang-switch-dropdown {
        top: 100%;
        bottom: auto;
        left: 50%;
        transform: translateX(-50%) translateY(-6px);
        width: auto;
        padding-top: 8px;
        padding-bottom: 0;
    }

    .right-nav .lang-switch-wrapper:hover .lang-switch-dropdown {
        transform: translateX(-50%) translateY(0);
    }

    .right-nav .lang-switch-item {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    /* ハンバーガーメニュー（ヘッダー最右上） */
    .right-nav .hamburger-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 54px;
        height: 60px;
        margin: 0;
        padding-top: 0;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        z-index: 1002;
        background: transparent;
        border: none;
    }

    .right-nav .hamburger-menu .line {
        width: 20px;
        height: 2px;
        background-color: #e90514;
    }

    .right-nav .hamburger-menu.is-active .line:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    .right-nav .hamburger-menu.is-active .line:nth-child(2) {
        opacity: 0;
    }
    .right-nav .hamburger-menu.is-active .line:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* --------------------------------------------------------------------------
       画面下部に追従する固定バー（採用情報・お問い合わせの2分割）
       -------------------------------------------------------------------------- */
    .side-nav.right-nav {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 56px;
        height: calc(56px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        flex-direction: row;
        justify-content: stretch;
        align-items: stretch;
        background-color: #ffffff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
        z-index: 1000;
        transition: background-color 0.4s ease, box-shadow 0.4s ease;
    }

    /* 採用情報・お問い合わせボタン（各50%幅で横並び） */
    .right-nav .square-box {
        flex: 1;
        width: 50%;
        height: 100%;
        padding: 0 10px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 8px;
        transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
        pointer-events: auto;
    }

    /* お問い合わせセクション到達時に下部バーの背景とボタンのみふわっと非表示（ヘッダー要素は常に表示を維持） */
    .side-nav.right-nav.is-hidden {
        background-color: transparent !important;
        box-shadow: none !important;
        pointer-events: none !important;
    }

    .side-nav.right-nav.is-hidden .square-box {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(16px) !important;
    }

    /* ヘッダーの言語切替・ハンバーガーメニューは下部バー非表示時も常に操作・表示を維持 */
    .right-nav .lang-switch-wrapper,
    .right-nav .hamburger-menu {
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .right-nav .box-icon {
        width: 31px; /* 従来の22pxから約1.4倍に拡大 */
        height: 31px;
        border-radius: 4px;
        object-fit: cover;
        flex-shrink: 0;
    }

    .right-nav .box-text {
        font-size: 0.975rem; /* 0.8125remの1.2倍（約15.6px） */
        font-weight: bold;
        white-space: nowrap;
        letter-spacing: 0.03em;
    }

    /* --------------------------------------------------------------------------
       ドロワーメニュー（ヘッダー下から画面全体に展開）
       -------------------------------------------------------------------------- */
    .drawer-menu {
        top: 60px;
        bottom: 0;
        width: 100%;
        height: calc(100vh - 60px);
        height: calc(100dvh - 60px);
        z-index: 1001;
    }

    .drawer-inner {
        padding: 30px 24px 80px 24px;
    }

    /* --------------------------------------------------------------------------
       メインビジュアル（ブラウザ表示高さと同一）
       -------------------------------------------------------------------------- */
    .main-visual {
        margin-top: 0; /* ブラウザ最上部から全画面表示 */
        height: 100vh;
        height: 100dvh;
        min-height: -webkit-fill-available;
        padding-top: 0;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
    }

    .main-visual .slide {
        height: 100%;
        top: 0;
        left: 0;
        width: 100%;
    }

    /* 写真画像をメインビジュアルの表示枠内に完全一致 & ズームアウトアニメーションを有効化 */
    .main-visual .slide-bg {
        height: 100% !important;
        top: 0 !important;
        background-size: cover;
        background-position: center;
        transform: scale(1.15); /* 初期拡大状態 */
    }

    .slide.active .slide-bg,
    .slide.fade-out .slide-bg {
        animation: zoomOut 12s linear forwards !important; /* PCと同様に12秒かけてゆっくり縮小 */
    }

    /* 各スライド写真の個別位置調整（スマートフォン用） */
    .main-visual .slide-bg[style*="mv02.jpg"] {
        background-position: calc(50% - 30px) center; /* 左方向に30px移動 */
    }

    .main-visual .slide-bg[style*="mv04.jpg"] {
        background-position: calc(50% - 200px) center; /* さらに左方向に100px移動（累計200px移動） */
    }

    .global-nav {
        display: none; /* スマホではドロワーメニューに集約 */
    }

    /* 日本語メインコピー（40px上に移動） */
    .hero-copy {
        position: absolute;
        top: calc(60px + 18px + 40px); /* 40px上に移動 */
        left: 18px;
        right: 18px;
        width: auto;
        transform: none !important;
        z-index: 10;
    }

    .copy-main-wrapper {
        display: flex;
        align-items: flex-end;
        gap: 7px;
        margin: 0;
        white-space: nowrap;
    }

    .copy-main {
        font-size: 1.86rem; /* 1.2倍に拡大 (1.55rem * 1.2) */
        line-height: 1.15; /* 行間を詰めて2行を1つのグループにする */
        letter-spacing: 0.04em;
        font-weight: bold;
        margin: 0;
        white-space: nowrap;
    }

    /* --------------------------------------------------------------------------
       「世界と食卓をつなぐ、」の配置（X: 0px, Y: 16px 固定）
       -------------------------------------------------------------------------- */
    .copy-main-small {
        display: block;
        position: relative;
        transform: translate(0px, 16px);
        font-size: 0.78em;
        line-height: 1.05;
        margin-bottom: -6px;
    }

    .kizuna-text {
        font-size: 3.96rem; /* 1.2倍に拡大 (3.3rem * 1.2) */
        line-height: 0.85;
        font-weight: 900;
        transform: none;
        display: inline-block;
        margin-bottom: 1px;
    }

    .copy-sub {
        font-size: 0.75rem;
        line-height: 1.55;
        margin-top: 10px;
        color: rgba(255, 255, 255, 0.95);
        letter-spacing: 0.02em;
    }

    /* 英文コピー（画面右寄せ・右配置・80%縮小 & 40px上に移動） */
    .copy-en {
        position: absolute;
        bottom: 235px; /* 40px上に移動 (195px + 40px) */
        right: 18px;
        left: auto;
        transform: none !important;
        text-align: right;
        font-size: 1.944rem; /* 80%に縮小 (2.43rem * 0.8) */
        line-height: 1.2;
        font-weight: bold;
        font-family: 'Poppins', sans-serif;
        color: rgba(255, 255, 255, 0.95);
        margin: 0;
        z-index: 10;
        max-width: 90%;
    }

    /* 現在地ナビゲーション（表示幅のセンター配置・さらに40px上に移動） */
    .slide-nav {
        position: absolute;
        bottom: 185px; /* 40px上に移動 (145px + 40px) */
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 10px;
        white-space: nowrap;
    }

    .slide-dots {
        display: flex;
        gap: 6px;
    }

    .dot {
        width: 20px;
        height: 2px;
    }

    .dot-num {
        display: none; /* スマホではドット数字を非表示にして省スペース化 */
    }

    .slide-counter {
        font-size: 0.75rem;
        color: #ffffff;
    }

    /* --------------------------------------------------------------------------
       お知らせセクション (NEWS)
       -------------------------------------------------------------------------- */
    .news-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 24px;
        width: 100%;
    }

    /* カテゴリーテキストリンクはスマホでは非表示 */
    .news-filters {
        display: none !important;
    }

    /* プルダウンメニューを表示 */
    .news-filters-select-wrap {
        display: block;
        width: 100%;
        position: relative;
    }

    .news-category-select {
        width: 100%;
        padding: 12px 38px 12px 14px;
        font-size: 0.9375rem;
        color: #333333;
        background-color: #ffffff;
        border: 1px solid #dcdcdc;
        border-radius: 6px;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        outline: none;
        font-family: inherit;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .news-category-select:focus {
        border-color: #e90514;
    }

    /* セレクトボックスの右側下向き矢印 */
    .news-filters-select-wrap::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translateY(-70%) rotate(45deg);
        width: 7px;
        height: 7px;
        border-right: 2px solid #666666;
        border-bottom: 2px solid #666666;
        pointer-events: none;
    }

    /* 3つのパネルを縦レイアウトに変更 */
    .news-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 30px;
        width: 100%;
    }

    .news-card {
        width: 100%;
    }

    /* --------------------------------------------------------------------------
       創業60周年記念セクション (Anniversary)
       -------------------------------------------------------------------------- */
    .anniversary-section {
        flex-direction: column; /* 上下にレイアウト */
        padding: 60px 0 0 0; /* 下の余白をなくす（画像が最下部までぴったり届く） */
        width: 100%;
        margin: 0;
        overflow: hidden;
    }

    /* テキストグループ（上段に配置） */
    .anniversary-container {
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        margin-bottom: 36px; /* 下の画像スクロールとの間隔 */
    }

    .anniversary-title {
        font-size: 1.75rem;
        letter-spacing: 0.08em;
        margin-bottom: 10px;
    }

    .anniversary-subtitle {
        font-size: 1.125rem;
        letter-spacing: 0.02em;
        margin-bottom: 24px;
    }

    .anniversary-lead {
        font-size: 1.125rem;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .anniversary-text {
        font-size: 0.875rem;
        line-height: 1.8;
    }

    .anniversary-overlay {
        opacity: 0.12;
        max-width: 80%;
    }

    /* 画像アニメーショングループ（下段に配置・余白なし） */
    .anniversary-scroll-wrapper {
        position: relative;
        top: auto;
        bottom: auto;
        right: auto;
        left: auto;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 0; /* 上下のトラック間の余白をなくす */
        overflow: hidden;
        margin-bottom: 0; /* 下の余白を完全になくす */
    }

    /* 左右のフェード余白をなくす */
    .anniversary-scroll-wrapper::before,
    .anniversary-scroll-wrapper::after {
        display: none;
    }

    .anniversary-scroll-content {
        width: 100%;
        height: 135px; /* 写真の高さ（1.5倍の135px）に固定して上下段の重なりを完全防止 */
        overflow: hidden;
    }

    /* 写真画像を横一列に並べ、左右の余白をなくす */
    .scrolling-track {
        display: flex;
        flex-direction: row;
        width: max-content;
        height: 135px; /* 写真の高さに一致 */
        gap: 0; /* 左右の余白をなくす */
    }

    /* コーナーをスクエアにし、左右余白なしで敷き詰める（1.5倍サイズ） */
    .anniversary-img {
        width: 195px; /* 1.5倍: 130px -> 195px */
        height: 135px; /* 1.5倍: 90px -> 135px */
        object-fit: cover;
        border-radius: 0; /* コーナーをスクエアに */
        flex-shrink: 0;
        display: block;
        margin: 0;
        padding: 0;
    }

    /* 横方向のアニメーション（左へスクロール） */
    .track-down {
        animation: scrollLeft 28s linear infinite;
    }

    /* 横方向のアニメーション（右へスクロール） */
    .track-up {
        animation: scrollRight 28s linear infinite;
    }
}

/* 横スクロールアニメーション用キーフレーム */
@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes scrollRight {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

/* ==========================================================================
   スクロールアニメーション (Scroll Reveal)
   ※ご要望によりアニメーションを削除（常に表示状態にする）
   ========================================================================== */
.reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
}

.reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: none;
}

/* 記事カードなど、複数並ぶ要素を順番に表示するための遅延設定（無効化） */
.news-grid .news-card:nth-child(1) { transition-delay: 0s; }
.news-grid .news-card:nth-child(2) { transition-delay: 0s; }
.news-grid .news-card:nth-child(3) { transition-delay: 0s; }

/* 絞り込みフィルターや一覧ボタンにも少し遅延をつけて順番に出るように（無効化） */
.news-filters.reveal-on-scroll { transition-delay: 0s; }
.news-more.reveal-on-scroll { transition-delay: 0s; }

/* ==========================================================================
   会社の強みセクション (Our Strengths)
   ========================================================================== */
.strengths-section {
    position: relative;
    width: 100%;
    margin-top: 120px;
}

/* スクロール追従（Sticky）ラッパー */
.strengths-sticky-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* デフォルト値。JSで動的に上書きされます */
    pointer-events: none; /* 下にあるパネルの操作を妨げない */
    z-index: 10;
}

/* 固定表示するヘッダー */
.strengths-sticky-header {
    position: sticky;
    top: 120px; /* 画面上部からの位置（スクロール追従時） */
    margin-top: 120px; /* セクション上部からの初期位置 */
    width: 44%; /* 右側の56%（グレー背景）に重ならないように幅を制限 */
    padding-left: 8%;
    padding-right: 4%; /* グレー背景との間に少し余白を設ける */
    box-sizing: border-box;
}

/* ヘッダーの中身 */
.strengths-sticky-header-inner {
    display: inline-block;
    pointer-events: auto; /* ここだけ操作可能に */
}

.strengths-title-ja {
    font-size: 1.875rem; /* 30px相当 */
    font-weight: bold;
    letter-spacing: 0.2em;
    margin: 0 0 4px 0;
    line-height: 1.4;
    color: #333;
}

.strengths-title-en {
    font-size: 0.75rem; /* 12px相当 */
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.2em;
    color: #999;
    display: block;
}

.strengths-intro {
    margin-top: 40px;
    max-width: 480px;
    color: #333;
}

.strengths-intro-lead {
    font-size: 1.625rem; /* 26px相当 */
    font-weight: bold;
    line-height: 1.6;
    margin: 0 0 20px 0;
    color: #e90514; /* コーポレートカラーの赤色に変更 */
}

.strengths-intro-text {
    font-size: 1.125rem; /* 18px相当 */
    line-height: 2;
    margin: 0;
    opacity: 0.9;
}

/* パネルのコンテナ */
.strengths-panels {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* 各パネル */
.strength-panel {
    position: relative;
    width: 100%;
    min-height: 80vh;
    background-color: #ffffff; /* 左側テキスト用の白背景 */
    display: flex;
    align-items: center;
    justify-content: center; /* 残りの56%の領域内で中央揃え */
    padding: 80px 0 80px 44%; /* 左側44%をパディングで埋め、右は0 */
    box-sizing: border-box;
}

/* 右側56%の背景（parallax-wrapとして機能） */
.strength-panel-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 56%;
    height: 100%;
    z-index: 0;
}

/* パネル内のコンテンツ */
.strength-content {
    position: relative;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 60px;
    width: 85%; /* 56%領域に対しての幅 */
    max-width: 600px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.strength-num {
    position: relative;
    font-size: 3.5rem; /* 56px相当 */
    color: #e90514; /* コーポレートカラー */
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    margin: 0 0 16px 0;
    line-height: 1;
    padding-left: 36px; /* カプセル背景用の余白 */
}

.strength-num::before {
    content: "強み";
    position: absolute;
    left: 0;
    top: 7px; /* 数字の視覚的な上端に合わせる */
    color: #000000; /* 黒色に変更 */
    font-size: 0.875rem; /* 14px相当 */
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: bold;
    letter-spacing: 0.1em;
    padding-bottom: 4px; /* テキストと線の間隔 */
    border-bottom: 2px solid #cccccc; /* 2pxのグレーの線 */
}

.strength-title {
    font-size: 1.625rem; /* 26px相当 */
    font-weight: bold;
    margin: 0 0 16px 0;
    line-height: 1.4;
    color: #333;
}

.strength-lead {
    font-size: 1.125rem; /* 18px相当 */
    font-weight: bold;
    color: #e90514;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.strength-text {
    font-size: 1.125rem; /* 18px相当 */
    line-height: 1.4;
    margin: 0;
    color: #333;
}

/* ==========================================================================
   事業内容セクション (Business)
   ========================================================================== */
.business-section {
    width: 100%;
    margin-top: 120px; /* 会社の強みセクションとの間に120pxのスペース */
    padding: 120px 8%; /* 会社の強み（8%）と余白を合わせる */
    background-color: #f0f0f0; /* 背景を少し濃いグレーに設定 */
    box-sizing: border-box;
}

.business-header {
    margin-bottom: 40px;
}

.business-title-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* ボタンが英語タイトルの下揃えになるように配置 */
}



.business-title-ja {
    font-size: 1.875rem; /* 30px相当 */
    font-weight: bold;
    letter-spacing: 0.2em;
    margin: 0 0 4px 0;
    line-height: 1.4;
    color: #333;
}

.business-title-en {
    font-size: 0.75rem; /* 12px相当 */
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.2em;
    color: #999;
    display: block;
}

.business-intro {
    margin-top: 40px;
    max-width: 480px;
}

.business-intro-lead {
    font-size: 1.625rem; /* 26px相当 */
    font-weight: bold;
    line-height: 1.6;
    margin: 0;
    color: #e90514; /* コーポレートカラーの赤色 */
}

.business-panels {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-top: 60px;
}

.business-panel {
    flex: 1;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.business-panel:hover {
    transform: translateY(-5px); /* ホバーで少し浮き上がる */
}

.business-panel-image {
    width: 100%;
    height: 240px;
    background-color: #cccccc; /* 仮の画像背景 */
    background-size: cover;
    background-position: center;
}

/* 個別の事業内容パネル写真 */
.business-panel:nth-child(1) .business-panel-image { background-image: url('image/business01.jpg'); }
.business-panel:nth-child(2) .business-panel-image { background-image: url('image/business02.jpg'); }
.business-panel:nth-child(3) .business-panel-image { background-image: url('image/business03.jpg'); }

.business-panel-content {
    padding: 24px 0 0 0; /* 左右の余白を削除、上側に少し余白 */
}

.business-panel-title {
    font-size: 1.625rem; /* 26px相当 */
    font-weight: bold;
    margin: 0 0 16px 0;
    color: #333;
}

.business-panel-lead {
    font-size: 1.125rem; /* 18px相当に変更 */
    font-weight: bold;
    margin: 0 0 12px 0;
    line-height: 1.5;
    color: #e90514; /* コーポレートカラーの赤色で強調 */
}

.business-panel-text {
    font-size: 1.125rem; /* 18px相当に変更 */
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/* ==========================================================================
   商品紹介セクション (Products)
   ========================================================================== */
.products-section {
    width: 100%;
    margin-top: 120px; /* 上のセクションとのスペース確保 */
    padding: 0; /* グリッドを端まで広げるために全体の余白を削除 */
    background-color: #e90514; /* コーポレートカラーの赤色 */
    box-sizing: border-box;
}

.products-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-direction: row-reverse; /* タイトルとグリッドの左右を入れ替える */
}

.products-header {
    width: 44%; /* 右側のタイトル領域 */
    padding: 120px 8% 120px 4%; /* タイトル側に上下と右側の余白を持たせる */
    box-sizing: border-box;
}

.products-title-group {
    display: flex;
    flex-direction: column;
}

.products-title-ja {
    font-size: 1.875rem; /* 30px相当 */
    font-weight: bold;
    letter-spacing: 0.2em;
    margin: 0 0 4px 0;
    line-height: 1.4;
    color: #ffffff; /* 白色のテキスト */
}

.products-title-en {
    font-size: 0.75rem; /* 12px相当 */
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.8); /* 白色のテキスト（少し透過） */
    display: block;
}

.products-intro {
    margin-top: 40px;
    max-width: 480px;
    color: #ffffff;
}

.products-intro-lead {
    font-size: 1.625rem; /* 26px相当 */
    font-weight: bold;
    line-height: 1.6;
    margin: 0 0 20px 0;
    color: #ffffff;
}

.products-intro-text {
    font-size: 1.125rem; /* 18px相当 */
    line-height: 2;
    margin: 0;
    opacity: 0.9;
    color: #ffffff;
}

.products-header .news-more {
    margin-top: 40px;
    align-self: flex-start;
}

/* 商品紹介ボタンの色反転（赤背景用） */
.products-header .btn-news-more {
    border: 1px solid #ffffff;
    background-color: #ffffff;
    display: inline-flex; /* 幅を広げず、テキスト幅に合わせる */
}
.products-header .layer-default {
    color: #e90514; /* デフォルトは赤文字 */
}
.products-header .layer-hover {
    background-color: transparent; /* ホバー時は透明（赤背景が見える） */
    border: 1px solid #ffffff;
}
.products-header .layer-hover-content {
    color: #ffffff; /* ホバー時は白文字 */
}

/* 商品紹介の右側グリッド（2x2） */
.products-grid {
    width: 56%; /* 右側領域 */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0; /* 商品間のスペースをなくす */
}

.product-item {
    background-color: rgba(255, 255, 255, 0.1); /* 仮の背景色 */
    border-radius: 0; /* コーナーを丸めずスクエアに */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transform: scale(1.002); /* ブラウザ特有のサブピクセルレンダリングによるグリッドの隙間（白い線）を隠すための微小な拡大 */
}

/* 個別の商品背景画像は、HTML内の .parallax-img に移行します */
.product-item .parallax-img {
    width: calc(100% + 2px); /* ブラウザのサブピクセルレンダリングによる隙間を解消するため左右に1pxずつ拡大 */
    left: -1px;
}
.product-item-content {
    z-index: 2;
    padding: 30px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 下寄せに配置（写真が入ったときに映えるように） */
    box-sizing: border-box;
}

.product-item-title {
    color: #ffffff;
    font-size: 1.5rem; /* 24px相当 */
    font-weight: bold;
    margin: 0 0 12px 0;
    line-height: 1.4;
    letter-spacing: 0.1em;
}

.product-item-desc {
    color: #ffffff;
    font-size: 1.125rem; /* 18px相当に変更 */
    line-height: 1.6;
    margin: 0;
    opacity: 0.9;
}

/* ==========================================================================
   お取引の流れセクション (Flow)
   ========================================================================== */
.flow-section {
    width: 100%;
    margin-top: 120px;
    padding: 0 8%;
    box-sizing: border-box;
}

.flow-header {
    display: inline-block;
}

.flow-title-ja {
    font-size: 1.875rem; /* 30px相当 */
    font-weight: bold;
    letter-spacing: 0.2em;
    margin: 0 0 4px 0;
    line-height: 1.4;
    color: #333;
}

.flow-title-en {
    font-size: 0.75rem; /* 12px相当 */
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.2em;
    color: #999;
    display: block;
}

.flow-intro-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 縦方向の上揃えに変更 */
    margin-top: 40px;
    gap: 40px;
}

.flow-intro-img {
    width: 40%; /* 30%から40%に変更 */
    flex-shrink: 0; /* 画像領域が潰れないようにする */
}

.flow-intro {
    flex: 1; /* 残りのスペースをテキスト領域が埋める */
    max-width: 680px; /* テキストの表示幅を少し狭く制限 */
}

.flow-intro-lead {
    font-size: 1.625rem; /* 26px相当 */
    font-weight: bold;
    line-height: 1.6;
    margin: 0 0 16px 0;
    color: #e90514; /* コーポレートカラーの赤色 */
}

.flow-intro-text {
    font-size: 1.125rem; /* 18px相当に変更 */
    line-height: 1.8;
    color: #333;
    margin: 0;
}

.flow-panels {
    display: flex;
    justify-content: space-between;
    gap: 40px; /* パネル間の隙間を広げ、パネルの幅を少し狭くする */
    margin-top: 80px; /* 上部（写真とテキスト）との距離を広げる（40px -> 80px） */
}

.flow-panel {
    flex: 1; /* 均等に横6分割 */
    position: relative; /* 矢印の配置基準 */
    background-color: #f9f9f9; /* 薄いグレー背景 */
    padding: 24px 16px;
    box-sizing: border-box;
    text-align: center; /* テキストを中央揃え */
    border-radius: 4px; /* 角を少し丸める */
}

/* パネル間の「＞」アイコン（コーポレートカラーの赤） */
.flow-panel:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -26px; /* gap 40px の中央付近に配置 */
    transform: translateY(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    border-top: 2px solid #cccccc; /* 赤色からグレーに変更 */
    border-right: 2px solid #cccccc;
}

.flow-step {
    display: block;
    font-size: 1.5rem; /* 24px相当に変更 */
    color: #e90514; /* コーポレートカラーの赤 */
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    letter-spacing: 0; /* 文字間を0%に */
    margin-bottom: 12px;
}

.flow-step-num {
    color: #333333; /* 数字部分だけ黒色（濃いグレー）に変更 */
}

.flow-panel-icon {
    width: 86px; /* 72pxの約1.2倍に拡大 */
    height: 86px;
    margin: 0 auto 16px;
    background-color: #ffffff; /* グレーから白に変更 */
    border-radius: 50%; /* 仮で丸くしておく */
    background-size: 72%; /* 現在の大きさ(80%)の90%に縮小（80% * 0.9 = 72%） */
    background-position: center;
    background-repeat: no-repeat;
}

/* 各STEPのアイコン画像設定 */
.flow-panel:nth-child(1) .flow-panel-icon { background-image: url('image/flow01.jpg'); }
.flow-panel:nth-child(2) .flow-panel-icon { background-image: url('image/flow02.jpg'); }
.flow-panel:nth-child(3) .flow-panel-icon { background-image: url('image/flow03.jpg'); }
.flow-panel:nth-child(4) .flow-panel-icon { background-image: url('image/flow04.jpg'); }
.flow-panel:nth-child(5) .flow-panel-icon { background-image: url('image/flow05.jpg'); }
.flow-panel:nth-child(6) .flow-panel-icon { background-image: url('image/flow06.jpg'); }

.flow-panel-title {
    font-size: 1rem; /* 16px相当 */
    color: #333;
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
}

/* ==========================================================================
   コンタクトセクション (Contact)
   ========================================================================== */
.contact-section {
    width: 100%;
    margin-top: 120px;
    padding: 0 0 0 8%; /* テキスト側の左余白(8%)のみ確保 */
    box-sizing: border-box;
    background-color: #e90514; /* コーポレートカラーの赤 */
}

.contact-inner {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* 画像エリアがテキストエリアの高さに追従して伸びるように変更 */
    gap: 40px;
}

.contact-text-area {
    flex: 1; /* または任意の割合 */
    padding: 80px 0; /* セクションの上下の余白をテキストエリア側で確保 */
}

.contact-header {
    display: inline-block;
}

.contact-title-ja {
    font-size: 1.875rem; /* 30px相当 */
    font-weight: bold;
    letter-spacing: 0.2em;
    margin: 0 0 4px 0;
    line-height: 1.4;
    color: #ffffff; /* 赤背景のため白文字に */
}

.contact-title-en {
    font-size: 0.75rem; /* 12px相当 */
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.7); /* 赤背景のため白系の透過に */
    display: block;
}

.contact-lead {
    color: #ffffff;
    font-size: 1.125rem; /* 18px相当に変更 */
    line-height: 1.8;
    margin-top: 24px;
    text-align: left; /* タイトルに合わせて左寄せに変更 */
}


.contact-image-group {
    display: flex;
    flex: 1; /* 右半分の領域を埋める */
}

.contact-image-wrapper {
    flex: 1; /* 2枚の画像が均等に幅を分け合う */
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    transform: scale(1.002); /* サブピクセルレンダリングによる画像間の隙間を解消するための微小拡大 */
}

/* お問い合わせセクション内のボタン：デフォルトとホバーのデザインを入れ替え（赤背景用） */
.contact-section .btn-news-more {
    background-color: #ffffff;
    border-color: #ffffff;
    transition: background-color 0.4s ease;
}

.contact-section .layer-default {
    color: #e90514;
}

.contact-section .layer-hover {
    background-color: transparent;
    border-color: #ffffff;
}

.contact-section .layer-hover-content {
    color: #ffffff;
}

.contact-section .btn-news-more:hover {
    background-color: transparent;
}

.contact-section .btn-news-more:hover .layer-default {
    opacity: 0;
}

/* ==========================================================================
   フッター (Footer)
   ========================================================================== */
.site-footer {
    width: 100%;
    background-color: #666666; /* さらに明るいグレーに変更 */
    /* 背景色(rgb:102,102,102)の90%透過を重ねて、画像を透明度10%で見せる */
    background-image: linear-gradient(rgba(102, 102, 102, 0.9), rgba(102, 102, 102, 0.9)), url('image/50th02.svg');
    background-repeat: no-repeat, no-repeat;
    background-position: center, right 4% bottom 20px; /* もう少し右下に移動 */
    background-size: cover, 360px auto; /* 画像サイズを2倍（180px→360px）に変更 */
    padding: 60px 8% 40px;
    box-sizing: border-box;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    min-height: 200px;
    justify-content: space-between;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 80px; /* コピーライトとの間隔 */
}

.footer-left {
    text-align: left;
}

.footer-right {
    text-align: left;
}

.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 48px; /* 大項目の横間隔 */
}

.footer-nav-item > a {
    color: #cccccc;
    text-decoration: none;
    font-size: 1rem; /* 16px相当 */
    font-weight: bold;
    display: inline-block;
    margin-bottom: 16px;
    transition: color 0.3s;
}

.footer-nav-item > a:hover {
    color: #ffffff;
}

.footer-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-submenu li {
    margin-bottom: 12px;
}

.footer-submenu a {
    color: #999999; /* サブメニューは少し暗め */
    text-decoration: none;
    font-size: 0.875rem; /* 14px相当 */
    transition: color 0.3s;
}

.footer-submenu a:hover {
    color: #ffffff;
}

.footer-catchphrase {
    color: #cccccc; /* すべてccccccに統一 */
    font-size: 2.25rem; /* 36px相当 */
    font-weight: bold;
    line-height: 1.5;
    margin: 0;
}

.footer-info {
    margin-top: 40px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 32px; /* ロゴと企業名テキストの間隔を広げる（16px→32px） */
    margin-bottom: 24px;
}

.footer-logo {
    width: 64px; /* 80pxの80%（64px）に変更 */
}

.footer-company-group {
    display: flex;
    flex-direction: column;
}

.footer-company-anniv {
    color: #cccccc; /* 薄いグレー（あるいは赤 #e90514 でも可） */
    font-size: 0.875rem; /* 14px相当、少し小さめ */
    font-weight: normal; /* 太字ではなく標準の太さに変更 */
    letter-spacing: 0.1em;
    margin-bottom: 0; /* 4pxから0に減らして距離を詰める */
    line-height: 1.2; /* 行の高さも詰めることでさらに距離を縮める */
}

.footer-company-name {
    color: #cccccc; /* すべてccccccに統一 */
    font-size: 1.25rem; /* 20px相当 */
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 0;
}

.footer-address,
.footer-access {
    color: #cccccc; /* 薄いグレー */
    font-size: 0.875rem; /* 14px相当 */
    line-height: 1.8;
    margin: 0 0 16px 0;
}

.footer-copyright {
    display: none; /* PCでは左側固定ナビ領域に表示されているため非表示 */
    text-align: center; /* コピーライトは中央配置 */
    color: #cccccc; /* すべてccccccに統一 */
    font-size: 0.75rem; /* 12px相当 */
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.1em;
    margin: 0;
}

@media screen and (max-width: 768px) {
    /* --------------------------------------------------------------------------
       会社の強みセクション (Our Strengths) - スマホ用レイアウト
       ・テキストグループの固定（Sticky追従）を廃止
       ・上部に「会社の強み」タイトルと本文を配置し、その下に01、02、03の各コンテナを順次縦配置
       -------------------------------------------------------------------------- */
    .strengths-section {
        margin-top: 60px;
        width: 100%;
    }

    .strengths-panels {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* テキストグループ（固定配置を解除し、通常フローで1番上に配置） */
    .strengths-sticky-wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        pointer-events: auto !important;
        padding: 0 20px;
        box-sizing: border-box;
        margin-bottom: 36px;
    }

    .strengths-sticky-header {
        position: static !important;
        top: auto !important;
        margin-top: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    .strengths-sticky-header-inner {
        display: block;
        width: 100%;
    }

    .strengths-title-ja {
        font-size: 1.75rem;
        letter-spacing: 0.08em;
        margin: 0 0 4px 0;
    }

    .strengths-title-en {
        font-size: 0.75rem;
        margin-bottom: 20px;
    }

    .strengths-intro {
        margin-top: 20px;
        max-width: 100%;
    }

    .strengths-intro-lead {
        font-size: 1.2rem;
        line-height: 1.55;
        margin: 0 0 14px 0;
        color: #e90514;
    }

    .strengths-intro-text {
        font-size: 0.875rem;
        line-height: 1.8;
        margin: 0;
        color: #333333;
    }

    /* 各強みパネル（01, 02, 03のコンテナ）写真と写真の余白なし */
    .strength-panel {
        position: relative;
        width: 100%;
        min-height: auto;
        padding: 36px 16px;
        margin-bottom: 0; /* 写真と写真の余白をなしに */
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f5f5f5;
        overflow: hidden;
    }

    .strength-panel:last-child {
        margin-bottom: 0;
    }

    /* 背景写真をパネル全体（100%）に展開 */
    .strength-panel-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    /* 白背景のコンテンツカード */
    .strength-content {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 100%;
        padding: 30px 20px;
        background-color: rgba(255, 255, 255, 0.96);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
    }

    .strength-num {
        font-size: 2.75rem;
        margin-bottom: 12px;
        padding-left: 36px;
    }

    .strength-title {
        font-size: 1.25rem;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .strength-lead {
        font-size: 0.9375rem;
        line-height: 1.5;
        margin-bottom: 14px;
    }

    .strength-text {
        font-size: 0.875rem;
        line-height: 1.7;
    }

    .business-section {
        padding: 60px 4%; /* スマホでは余白を調整 */
    }

    /* --------------------------------------------------------------------------
       事業内容セクション (Business) - スマホ用レイアウト
       ・タイトル、本文テキスト、その下に「事業内容はこちら」ボタン（右寄せ）を配置
       ・本文リード文は「成り行き改行」に設定
       -------------------------------------------------------------------------- */
    .business-header {
        display: flex;
        flex-direction: column;
        margin-bottom: 36px;
    }

    .business-title-flex {
        display: contents; /* 子要素をbusiness-headerの直接の子として扱い、順序を制御 */
    }

    .business-title-group {
        order: 1;
        margin-bottom: 20px;
    }

    .business-title-ja {
        font-size: 1.75rem;
        letter-spacing: 0.08em;
        margin: 0 0 4px 0;
    }

    .business-title-en {
        font-size: 0.75rem;
    }

    .business-intro {
        order: 2;
        margin-top: 0;
        margin-bottom: 24px;
        max-width: 100%;
    }

    .business-intro-lead {
        font-size: 1.25rem;
        line-height: 1.6;
        margin: 0;
    }

    /* 「国内外のネットワークを生かし、食品業界の発展に貢献します」の成り行き改行 */
    .business-intro-lead br {
        display: none;
    }

    /* 「事業内容はこちら」ボタンだけ右寄せに配置 */
    .business-header .news-more {
        order: 3;
        margin-top: 0;
        align-self: flex-end; /* ボタンだけ右寄せ */
        display: flex;
        justify-content: flex-end;
    }

    .business-header .news-more .btn-news-more {
        display: inline-flex;
    }

    .business-panels {
        flex-direction: column;
        gap: 30px;
    }

    /* --------------------------------------------------------------------------
       商品紹介セクション (Products) - スマホ用レイアウト
       ・ボタンだけ右寄せ
       ・4つのパネルは縦並びレイアウト
       -------------------------------------------------------------------------- */
    .products-section {
        padding: 60px 0; /* 上下余白、グリッドは画面全幅 */
    }

    .products-container {
        flex-direction: column;
        gap: 36px;
    }

    .products-header {
        width: 100%;
        padding: 0 4%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .products-title-ja {
        font-size: 1.75rem;
        letter-spacing: 0.08em;
        margin: 0 0 4px 0;
    }

    .products-title-en {
        font-size: 0.75rem;
    }

    .products-intro {
        margin-top: 20px;
        max-width: 100%;
    }

    .products-intro-lead {
        font-size: 1.25rem;
        line-height: 1.5;
        margin-bottom: 14px;
    }

    .products-intro-text {
        font-size: 0.875rem;
        line-height: 1.8;
    }

    /* 商品紹介はこちらボタンだけ右寄せ */
    .products-header .news-more {
        margin-top: 24px;
        align-self: flex-end; /* ボタンだけ右寄せ */
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }

    .products-header .btn-news-more {
        display: inline-flex;
    }

    /* 4つのパネルは縦並びレイアウト */
    .products-grid {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0;
        min-height: auto;
    }

    .product-item {
        width: 100%;
        height: 220px;
        flex-shrink: 0;
    }

    .product-item-content {
        padding: 24px 20px;
    }

    .product-item-title {
        font-size: 1.25rem;
    }

    .product-item-desc {
        font-size: 0.875rem;
    }

    /* --------------------------------------------------------------------------
       お取引の流れセクション (Flow) - スマホ用レイアウト
       ・本文テキストと写真のレイアウトは縦並び
       -------------------------------------------------------------------------- */
    .flow-section {
        padding: 60px 4%;
    }

    .flow-title-ja {
        font-size: 1.75rem;
        letter-spacing: 0.08em;
        margin: 0 0 4px 0;
    }

    .flow-title-en {
        font-size: 0.75rem;
    }

    .flow-intro-wrapper {
        flex-direction: column; /* 本文テキストと写真のレイアウトを縦並びに */
        gap: 24px;
        margin-top: 24px;
    }

    .flow-intro {
        width: 100%;
        max-width: 100%;
    }

    .flow-intro-lead {
        font-size: 1.25rem;
        line-height: 1.55;
        margin-bottom: 14px;
    }

    .flow-intro-text {
        font-size: 0.875rem;
        line-height: 1.8;
    }

    .flow-intro-img {
        width: 100%;
    }

    .flow-panels {
        flex-direction: column;
        gap: 24px;
        margin-top: 40px;
        width: 100%;
    }

    /* 各ステップのパネル：要素全体をセンター揃え（アイコン中央50%、ステップ左側、タイトル右側左揃え） */
    .flow-panel {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 14px 16px;
        width: 100%;
        box-sizing: border-box;
    }

    .flow-step {
        flex: 1;
        text-align: right;
        font-size: 1.15rem;
        margin-bottom: 0;
        line-height: 1;
        padding-right: 14px;
        box-sizing: border-box;
    }

    .flow-panel-icon {
        width: 52px;
        height: 52px;
        margin: 0;
        flex-shrink: 0;
        background-size: 72%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .flow-panel-title {
        flex: 1;
        font-size: 0.9375rem;
        line-height: 1.45;
        text-align: left; /* テキスト左合わせ */
        margin: 0;
        padding-left: 14px;
        box-sizing: border-box;
    }

    .flow-panel:not(:last-child)::after {
        top: auto;
        bottom: -18px;
        right: 50%;
        transform: translateX(50%) rotate(135deg); /* 下向き矢印 */
    }

    /* --------------------------------------------------------------------------
       お問い合わせセクション (Contact) - スマホ用レイアウト
       ・テキストのコンテナと写真のコンテナは縦並び
       ・写真のコンテナ内は写真は横並び
       -------------------------------------------------------------------------- */
    .contact-section {
        margin-top: 60px;
        padding: 60px 0 0 0;
    }

    .contact-inner {
        flex-direction: column; /* テキストコンテナと写真コンテナを縦並びに */
        gap: 36px;
    }

    .contact-text-area {
        width: 100%;
        padding: 0 4%;
        box-sizing: border-box;
    }

    .contact-title-ja {
        font-size: 1.75rem;
        letter-spacing: 0.08em;
        margin: 0 0 4px 0;
    }

    .contact-title-en {
        font-size: 0.75rem;
    }

    .contact-lead {
        font-size: 1rem;
        line-height: 1.7;
        margin-top: 16px;
    }

    /* お問い合わせセクションの本文テキストは成り行き改行（スマホのみbrタグを無効化） */
    .contact-lead br {
        display: none;
    }

    /* お問い合わせはこちらボタンだけ右寄せ */
    .contact-text-area .news-more {
        display: flex !important;
        justify-content: flex-end !important;
        width: 100% !important;
        margin-top: 24px !important;
        align-self: flex-end;
    }

    .contact-text-area .news-more .btn-news-more {
        display: inline-flex;
    }

    .contact-image-group {
        width: 100%;
        display: flex;
        flex-direction: row; /* 写真は横並び */
        height: 180px;
        gap: 0;
    }

    .contact-image-wrapper {
        flex: 1; /* 2枚が均等に横並び */
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    /* --------------------------------------------------------------------------
       フッターセクション (Footer) - スマホ用レイアウト
       ・テキストメニューは非表示（削除）
       ・PC左エリアにあったコピーライトをフッターの最後に配置
       -------------------------------------------------------------------------- */
    .site-footer {
        padding: 40px 6% calc(30px + env(safe-area-inset-bottom, 0px));
        margin: 0;
        background-position: center, right 2% bottom 10px;
        background-size: cover, 180px auto;
    }

    .footer-top {
        margin-bottom: 24px;
    }

    .footer-catchphrase {
        font-size: 1.35rem;
        line-height: 1.45;
    }

    .footer-info {
        margin-top: 24px;
    }

    .footer-brand {
        gap: 16px;
        margin-bottom: 20px;
    }

    .footer-logo {
        width: 50px;
    }

    /* フッターのテキストメニューは削除（非表示） */
    .footer-right,
    .footer-nav {
        display: none !important;
    }

    /* コピーライトテキストをフッターの最後に表示（左寄せ） */
    .footer-copyright {
        display: block !important;
        text-align: left !important;
        color: #cccccc;
        font-size: 0.6875rem;
        font-family: 'Poppins', sans-serif;
        letter-spacing: 0.08em;
        margin-top: 30px;
    }
}