@charset "UTF-8";
/*---------------------------------------------------------
Theme Name: metal-2026
Author URI: G2
Theme URI: 
Version: 1.0
Description: 2026年リニューアル
---------------------------------------------------------*/


/* ==================================================
   ベース設定（全体・スマホ対応）
================================================== */
:root{
    --moji: #333333;
    --dred: #a03d3c;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #333;

    min-width: 320px;
    /* 長いURLなどが画面からはみ出さないように強制的に折り返す */
    overflow-wrap: break-word;
    /* 画面の高さが足りなくても、最低限「画面の100%の高さ」を保つ */
    min-height: 100vh;
    /* フッターを下に固定するための準備（Flexbox） */
    display: flex;
    flex-direction: column;
}

/* メインコンテンツ部分が自動的に伸びて、フッターを押し下げる設定 */
main {
    flex: 1;
}

hr {
    border: none;              /* デフォルトの立体的な線を一旦消す */
    border-top: 1px solid #ddd; /* 上側にだけ、薄いグレーの1本線を引く */
    margin: 10px 0;
    width: 100%;
}

/* スマホ対応 */
.sp-br {
    display: none;
}
@media screen and (max-width: 767px) {
    .sp-br {
        display: inline;
    }
}

/* ==================================================
   レイアウト用の共通クラス
================================================== */
.container {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
    width: 100%;
}
.full-width {
    width: 100%;
}

/* ==================================================
   リンクとメディアの基本スタイル
================================================== */
a {
    color: var(--moji);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: var(--dred);
}
/* 画像、動画、埋め込みコンテンツのレスポンシブ設定 */
img, video, object, iframe {
    max-width: 100%;
    height: auto; /* 元の縦横比を維持する */
    vertical-align: bottom; /* 画像の下にできる謎の隙間を消す */
}
/* 特定の画像を文字と同じ行に並べたい時用の便利クラス */
.inline-img img {
    display: inline;
}

a img {
    transition: opacity 0.3s ease;
}
a:hover img {
    opacity: 0.8;
}


iframe.wp-embedded-content {
    min-height: 200px !important; /* 切れない高さ */
}


/* ==================================================
   ヘッダー＆ナビゲーション（レスポンシブ対応）
================================================== */
.site-header {
    position: relative;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 0px;
    color: #666;
}
.ctc{
    font-size: 13px;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* ▼ スマホでメニューが開いた時、下に折り返すために追加 ▼ */
    flex-wrap: wrap; 
    padding: 15px 20px;
}

/* ▼ ロゴ画像のサイズ制限 ▼ */
.site-logo {
    max-width: 330px;
    height: auto;
}
.site-title {
    order: 1;
    margin: 0;
}
@media screen and (max-width: 600px) {
    .site-logo {
        max-width: 280px;
        height: auto;
    }
}


/* -------------------------------------------
   スマホ用：ハンバーガーボタン
------------------------------------------- */
.menu-toggle {
    order: 2;
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 24px;
    position: relative;
    z-index: 100;
}

/* ハンバーガーの3本線（ズレない完璧な配置法） */
.hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--moji);
    position: absolute;
    left: 0;
    top: 11px; /* 💡3本すべてを一旦「ボタンのど真ん中」に配置します */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 通常時の3本線の位置（ど真ん中から上下に散らす） */
.hamburger-line:nth-child(1) { transform: translateY(-11px); } /* 上へ */
.hamburger-line:nth-child(2) { transform: translateY(0); }     /* そのまま */
.hamburger-line:nth-child(3) { transform: translateY(11px); }  /* 下へ */

/* ボタンが押された時（開いた時）の「×」印アニメーション */
.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(0) rotate(45deg); /* 💡ど真ん中に戻してからナナメ */
}
.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0; /* 真ん中の線を消す */
}
.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(0) rotate(-45deg); /* 💡ど真ん中に戻してから逆ナナメ */
}

/* -------------------------------------------
   スマホ用：スライドメニュー（ふわっと開くアニメーション）
------------------------------------------- */
.global-nav {
    order: 3;
    /* display: none はアニメーションできないため使用しません */
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    
    width: 100%; 
    background-color: #f8f9fa;
    margin-top: 0; /* 開く前は隙間をなくす */
    
    /* 高さ、透明度、隙間を0.4秒かけて滑らかに変化させる */
    transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease, visibility 0.4s ease;
}

/* メニューが開いた時の状態 */
.global-nav.is-open {
    max-height: 1000px; /* メニューの中身より少し大きめの高さを指定（足りない場合は数値を増やしてください） */
    opacity: 1;
    visibility: visible;
    margin-top: 15px; /* ここでロゴとの隙間を作ります */
}

.nav-list a {
    display: block;
    padding: 15px 20px;
    border-top: 1px solid #ddd;
}

/* スマホ時のサブメニュー内の画像は大きすぎるので非表示 */
.global-nav .menu-thumb-img {
    display: none;
}

/* ==================================================
   スマホ用：サブメニュー（アコーディオン）の制御
================================================== */
@media screen and (max-width: 767px) {
    .global-nav .sub-menu {
        display: none;
        width: 100%;
        background-color: #fff; /* 背景を白などにして見やすく */
        padding: 10px 0 10px 20px; /* 左側に少し余白をあけて階層感を出す */
    }
        .global-nav .sub-menu li {
        width: 100%;
    }
    .global-nav .sub-menu a {
        padding: 10px 20px;
        border: none; /* スマホ用サブメニュー内の線は消す */
    }
    .global-nav .sub-menu.is-active {
        display: block;
    }
}

/* ==================================================
   PC用（画面幅768px以上）のスタイル
================================================== */
@media screen and (min-width: 768px) {
    .menu-toggle {
        display: none;
    }
    
    .global-nav {
        display: block !important;
        background-color: transparent; 
        width: auto;
        margin-top: 0;
        
        /* ▼ これらを追加してスマホ用の「隠す設定」を解除します ▼ */
        max-height: none;
        opacity: 1;
        visibility: visible;
        overflow: visible;
    }
    .nav-list {
        display: flex;
        justify-content: flex-end; /* メニュー項目を右詰めに */
    }
    .nav-list > li > a {
        color: var(--moji);
        padding: 20px 15px;
        border: none;
    }

    /* -------------------------------------------
       PC用：全幅メガメニュー（サブメニュー）
    ------------------------------------------- */
    /* サブメニュー全体（初期は透明で少し【上】にずらしておく） */
    .sub-menu {
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        padding: 30px;
        z-index: 50;

        display: flex;
        justify-content: center;
        gap: 20px;
        
        visibility: hidden;
        opacity: 0;
        /* ▼ 変更: -15px にして、上から下に降りてくるようにする ▼ */
        transform: translateY(-15px); 
        transition: all 0.3s ease;
        pointer-events: none;
    }
    /* サブメニューが途中で消えるのを防ぐ */
    .sub-menu::before {
        content: "";
        display: block;
        position: absolute;
        top: -30px; /* 上に30pxはみ出させて橋を架ける */
        left: 0;
        width: 100%;
        height: 30px; /* はみ出させた分だけ高さを設定 */
        background-color: transparent; /* 透明にする（当たり判定だけ残る） */
    }

    /* 親メニューにマウスが乗ったら、サブメニューをフワッと表示 */
    .nav-list li.menu-item-has-children:hover .sub-menu {
        visibility: visible;
        opacity: 1;
        /* ▼ 変更: 0に戻すことで、上から下へスライドする ▼ */
        transform: translateY(0);
        pointer-events: auto;
    }

    /* サブメニュー内の各アイテム（画像＋タイトル）のスタイル */
    .sub-menu li {
        width: 240px; /* アイテムの横幅 */
    }
    .sub-menu a {
        color: var(--moji);
        padding: 0;
        transition: opacity 0.3s ease;
    }
    .sub-menu a:hover {
        color:var(--dred);
        opacity: 0.8;
    }
    
    /* 画像とタイトルの配置 */
    .menu-item-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .global-nav .menu-thumb-img {
        display: block;
        width: 100%;
        height: 140px;
        object-fit: cover; /* 画像を綺麗にトリミング */
        border-radius: 8px; /* 角を少し丸める */
        margin-bottom: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .menu-item-title {
        font-size: 14px;
        font-weight: bold;
    }
}



/* ==================================================
   共通CTAエリア（カタログ・お問い合わせ）
================================================== */
.global-cta {
    background-color: #393939; /* 少しグレーにしてコンテンツと区別する */
    padding: 60px 0;
    color: #fff;
}

.cta-inner {
    display: flex;
    justify-content: space-between;
    gap: 30px; /* 2つの箱の間の隙間 */
}

/* 2つの箱を同じ幅（50%ずつ）にする */
.cta-box {
    flex: 1;
    padding: 40px;
    text-align: center;
    border: 1px solid #fff;
}

.cta-title {
    font-size: 24px;
    margin-bottom: 15px;
}

.cta-text {
    margin-bottom: 25px;
    font-size: 15px;
}

/* ボタンの基本スタイルとホバーアクション */
.btn {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 50px; /* 丸いボタン */
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-3px); /* マウスが乗ったら少し上に浮く */
    box-shadow: 0 6px 15px rgba(0,0,0,0.15); /* 影を濃くする */
    color: var(--moji);
}

/* 各ボタンの色設定 */
.btn-catalog {
    background-color: #fff;
}
.btn-contact {
    background-color: var(--dred);
    color: #fff;
}

/* スマホ表示の調整 */
@media screen and (max-width: 767px) {
    .cta-inner {
        flex-direction: column; /* スマホでは縦並びにする */
    }
}



/* ==================================================
   フッター
================================================== */
.site-footer {
    padding: 40px 0 20px;
    margin-top: auto;
    text-align: center;
}

/* ▼ 縦並びの2段レイアウトに変更 ▼ */
.footer-inner {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* -------------------------------------------
   フッターナビゲーション
------------------------------------------- */
.footer-nav {
    width: 100%;
}
.footer-nav-list {
    display: flex;
    justify-content: flex-end; /* PCでは右寄せ */
    align-items: center;
    flex-wrap: wrap;
}

.footer-nav-list li {
    display: flex;
    align-items: center;
}

.footer-nav-list a {
    color: var(--moji);
    font-size: 14px;
}
.footer-nav-list a:hover {
    color: var(--moji);
}

/* メニュー項目の後ろの「・」 */
.footer-nav-list li::after {
    content: "・";
    color: var(--moji);
    margin: 0 15px;
}
.footer-nav-list li:last-child::after {
    content: none;
}

/* -------------------------------------------
   フッターロゴ
------------------------------------------- */
.footer-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.footer-brand {
    width: 100%;
    font-size: 14px;
}
.footer-brand a{
    text-decoration: underline;
}

/* -------------------------------------------
   SNSアイコンリンク
------------------------------------------- */
.sns-links {
    display: flex;
    justify-content: center; /* 中央寄せ */
    gap: 10px; /* アイコン同士の隙間 */
    margin-bottom: 20px;
}
.sns-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    background-color: #666; /* 丸い背景の色 */
    color: #fff; /* アイコンの色 */
    border-radius: 50%; /* 綺麗な丸にする */
    font-size: 18px; /* アイコンの大きさ */
    transition: all 0.3s ease;
}

/* ▼ ホバー（マウスオーバー）時のブランドカラー設定 ▼ */
/* Instagram */
.sns-links a[aria-label="Instagram"]:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
/* YouTube */
.sns-links a[aria-label="YouTube"]:hover {
    background-color: #ff0000;
}
/* X (Twitter) */
.sns-links a[aria-label="X (Twitter)"]:hover {
    background-color: #000000;
}
/* TikTok */
.sns-links a[aria-label="TikTok"]:hover {
    background-color: #000000;
    text-shadow: 2px 2px 0 #ff0050, -2px -2px 0 #00f2fe; /* TikTok特有のネオン風エフェクト */
}
/* Facebook */
.sns-links a[aria-label="Facebook"]:hover {
    background-color: #1877f2;
}
/* Pinterest */
.sns-links a[aria-label="Pinterest"]:hover {
    background-color: #e60023;
}

/* ホバー時に少し浮き上がる動き */
.sns-links a:hover {
    transform: translateY(-3px);
}

/* -------------------------------------------
   コピーライト
------------------------------------------- */
.copyright {
    width: 100%;
    font-size: 13px;
    color: var(--moji);
}

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

/* -------------------------------------------
   スマホ用のフッター調整（画面幅767px以下）
------------------------------------------- */
@media screen and (max-width: 767px) {
    .footer-nav-list {
        justify-content: center; /* スマホではメニューも中央寄せにする */
    }
    body {
        /* フッター固定CTAの高さ + 余白分 */
        padding-bottom: 80px !important;
    }
}

/* -------------------------------------------
   ページトップへ戻るボタン
------------------------------------------- */
/* 1. ボタン全体の配置と動き */
#page-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999; /* 他の要素より必ず上に表示 */
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}

/* 2. ボタンのデザイン（丸い土台） */
#page-top a {
    display: flex !important;
    justify-content: center;
    align-items: center;
    background: var(--dred);
    color: #ffffff !important;
    width: 50px;
    height: 50px;
    text-decoration: none !important;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* 3. Font Awesomeアイコンの強制設定 */
#page-top a i {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif !important;
    font-weight: 900 !important;
    font-size: 20px !important;
    font-style: normal !important;
    display: inline-block !important;
    line-height: 1 !important;
}

/* 4. ホバーした時の動き */
#page-top a:hover {
    background: #333333;
    transform: translateY(-5px); /* 少し上に浮く */
    color: #ffffff !important;
}

/* 5. スマホでのサイズ調整（少し小さくする） */
@media screen and (max-width: 767px) {
    #page-top {
        right: 15px;
        bottom: 80px;
    }
    #page-top a {
        width: 44px;
        height: 44px;
    }
}


/* -------------------------------------------
   右袖固定CTAボタン
------------------------------------------- */
.fixed-cta2-wrap {
    position: fixed;
    right: 0;
    top: 35%;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); /* 軽く影をつけて浮かす */
}

/* ボタンの共通設定 */
.cta2-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    width: 90px;
    height: 100px;
    color: #ffffff !important;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    padding: 10px 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* ボタン間の区切り線 */
    transition: opacity 0.3s ease;
}
.cta2-btn:last-child {
    border-bottom: none;
}
.cta2-btn:hover {
    opacity: 0.8;
}

/* 個別の背景色（王道のB2Bカラー配色） */
.cta2-catalog { background-color: #4a90e2; }
.cta2-sample  { background-color: #f39c12; }
.cta2-contact { background-color: #a03d3c; }

/* アイコンとテキストの装飾 */
.cta2-icon {
font-size: 26px;
    margin: 0 0 5px 0;
    line-height: 1;
    display: block;
}
.cta2-text {
    font-size: 11px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0;
    padding: 0;
}

/* --- スマホ対応（画面下部に横並びで固定） --- */
@media screen and (max-width: 767px) {
    .fixed-cta2-wrap {
        top: auto;
        bottom: 0;
        width: 100%;
        transform: none;
        flex-direction: row;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15); /* 影を上向きに変更 */
    }
    .cta2-btn {
        flex: 1;
        height: 65px;
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, 0.3);
        padding: 0 2px;
    }
    .cta2-btn:last-child {
        border-right: none;
    }
    .cta2-icon {
        font-size: 20px;
        margin: 0 0 3px 0;
    }
    .cta2-text {
        font-size: 10px;
    }
}






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

/* -------------------------------------------
   スーパーヒーロー画像
------------------------------------------- */
.shero-section {
    width: 100%;
    position: relative;
}
.shero-wrap {
    position: relative;
    width: 100%;
    height: 600px;

    display: flex;
    justify-content: center; /* 左右の中央 */
    align-items: center;     /* 上下の中央 */
    
    overflow: hidden;
}
.shero-wrap img {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.shero-text {
    position: relative; /* z-indexを効かせるため */
    z-index: 10;
    margin: 0;
    text-align: center;
    background: rgba(168,27,30,0.5);
    padding: 20px;

    font-size: 45px;
    font-weight: normal;
    color: #fff;
    line-height: 1.2;
}
@media screen and (max-width: 767px) {
    .shero-wrap { height: 450px; }
    .shero-text { font-size: 28px; }
}

/* -------------------------------------------
   ヒーロー画像スライダー（全幅）
------------------------------------------- */
/* ヒーローコンテンツ全体 */
.hero-section {
    width: 100%;
    margin-bottom: 80px;
    position: relative;
}
.hero-slider {
    width: 100%;
    height: 600px; /* デスクトップの高さ */
    overflow: hidden;
}
.hero-slide {
    position: relative;
    width: 100%;
    height: 100%;
}
/* 画像の設定とオーバーレイ */
.hero-image-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.hero-image-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* 文字を見やすくするための暗幕 */
    z-index: 2;
}
.hero-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* テキスト配置（左寄せ・1100px幅） */
.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 100%;
}
.hero-content-inner {
    max-width: 1100px; /* 1100pxの中に収める */
    margin: 0 auto;
    padding: 0 40px;
    text-align: left;
}
.hero-title {
    font-size: 52px;
    font-weight: normal;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 20px;
}
.hero-text {
    font-size: 18px;
    color: #fff;
    line-height: 1.8;
    margin-bottom: 40px;
}

/* ボタンデザイン */
.btn-view-more {
    display: inline-block;
    padding: 15px 45px;
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
}
.btn-view-more:hover {
    background: #fff;
    color: #333;
}

/* 矢印・ドットのカスタマイズ */
.hero-button-prev,
.hero-button-next {
    color: #fff !important;
}
.hero-slider .swiper-pagination-bullet {
    background: #fff;
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
    .hero-slider { height: 450px; }
    .hero-title { font-size: 28px; }
    .hero-text { font-size: 14px; }
    .hero-content-inner { padding: 0 20px; }
}

/* -------------------------------------------
   セクションタイトル（2段構え・中央揃え）
------------------------------------------- */
.section-title {
    text-align: center;
    display: flex;
    flex-direction: column;  /* 縦に並べる */
    align-items: center;
    margin-bottom: 50px;     /* セクション下の余白 */
}
/* 1行目：大きな英語 */
.section-title .en {
    font-size: 40px;
    font-family: 'serif';
    font-weight: normal;
    color: #333;
    letter-spacing: 0.1em;
    line-height: 1.2;
}
/* 間の横棒（擬似要素で作成） */
.section-title::after {
    content: '';
    width: 120px;
    height: 2px;
    background-color: #a72945;
    margin: 8px 0;
}
/* 2行目：小さな日本語 */
.section-title .jp {
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 0.2em;
    order: 3;                /* after（棒）の後に配置するため */
}

/* -------------------------------------------
   記事一覧（お役立ち情報）
------------------------------------------- */
.news-section {
    padding: 80px 0;
}
.entry-list {
    margin: 40px 0;
}
/* 各記事の枠組み */
.entry-item {
    border-bottom: 1px dotted #ccc;
    padding: 25px 0;
}
.entry-item:last-child {
    border-bottom: none;
}

/* リンク全体をFlexボックスにして横並びにする */
.entry-link {
    display: flex;
    gap: 20px; /* 画像とテキストの間隔 */
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}
.entry-link:hover {
    opacity: 0.7;
}
/* 左側：アイキャッチ画像（外枠） */
.entry-thumbnail {
    flex: 0 0 200px;
    height: 140px;      /* 外枠の高さを固定 */
    overflow: hidden;   /* ★重要：はみ出た画像を隠す */
    border-radius: 4px;
}
.entry-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease; 
}

/* -------------------------------------------
   マウスオーバー（ホバー）時の動き
------------------------------------------- */
/* 記事一行（entry-link）をホバーした時、中の画像を拡大させる */
.entry-link:hover .entry-thumbnail img {
    transform: scale(1.1);
}
.entry-link:hover {
    opacity: 1;
}
.entry-link:hover .entry-title {
    color: var(--dred);
}
/* 右側：記事情報 */
.entry-content {
    flex: 1; /* 残りの幅をすべて使う */
}

.entry-meta {
    margin-bottom: 10px;
    display: flex;
    gap: 15px;
}
.entry-category {
    background: var(--dred);
    padding: 2px 8px;
    border-radius: 2px;
    color: #fff;
}
.entry-category a{
    color: #fff;
}
.entry-list .entry-title {
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
    color: #333;
    font-weight: normal;
    background: transparent;
    border: none;
    padding: 0;
}
/* メタ情報の干渉を防ぐ */
.entry-list .entry-meta {
    font-size: 13px;
    margin-bottom: 10px;
    display: flex;
    gap: 15px;
    color: #888;
}

/* -------------------------------------------
   スマホ用の調整（縦並びにせず、画像を小さくして横並びを維持）
------------------------------------------- */
@media screen and (max-width: 767px) {
    .entry-thumbnail {
        flex: 0 0 100px; /* スマホでは画像を小さくする */
    }
    .entry-thumbnail img {
        height: 70px;
    }
    .entry-title {
        font-size: 15px;
    }
}


/* --- カテゴリー名一覧（｜区切り） --- */
.news-category-list-wrap {
    text-align: center;
    margin-bottom: 40px;
}
.news-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.news-category-list li {
    display: flex;
    align-items: center;
}
/* liの後ろに「｜」をつける（最後の要素にはつけない） */
.news-category-list li:not(:last-child)::after {
    content: "｜";
    margin-left: 10px;
    color: #ccc;
}
.news-category-list a {
    color: #333;
    text-decoration: none;
    font-size: 15px;
}
.news-category-list a:hover {
    color: #a72945;
}




/* -------------------------------------------
   採用事例（case）スライダーセクション
------------------------------------------- */
.case-section {
    margin: 60px auto;
    max-width: 1200px;
    overflow: hidden;
}

/* --- スライダーと矢印の配置 --- */
.case-slider-wrapper {
    position: relative;
    padding: 0 40px; /* 既存の左右のpadding */
    margin-bottom: 30px;
}
.case-slider {
    overflow: visible !important;
    padding: 20px 0;
}
/* 矢印のデザイン調整 */
.swiper-button-next,
.swiper-button-prev {
    color: #a72945;
}

/* --- カード（ボックス）のデザイン --- */
.case-card {
    background: #fff;
    border: none;
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.case-card:hover {
    transform: translateY(-5px); /* 8px上に浮かせる */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.case-thumb img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.case-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}
.case-meta {
    margin-bottom: 15px;
}
.case-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 10px 0;
    line-height: 1.4;
    
    /* ▼ 複数行の省略設定（最大2行） ▼ */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    
    /* ▼ 1行の時でも「2行分の高さ」を維持して、下の要素がズレないようにする設定 ▼ */
    min-height: 2.8em; /* line-height(1.4) × 2行分 */
}
.case-cat {
    display: inline-block;
    font-size: 12px;
    color: #a72945;
    border: 1px solid #a72945;
    padding: 3px 8px;
    border-radius: 3px;
}
.case-excerpt {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1; 
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 2行で固定したい場合 */
    overflow: hidden;
}

/* 「詳しく見る」ボタン（中央寄せ） */
.case-btn-wrap {
    text-align: center;
    margin-top: auto;
}
.case-detail-btn {
    display: inline-block;
    padding: 10px 30px;
    background: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-size: 14px;
    transition: background 0.3s;
}
.case-detail-btn:hover {
    color: #fff;
    background: #a72945;
}


/* --- カテゴリー名一覧（｜区切り） --- */
.case-category-list-wrap {
    text-align: left;
    margin-bottom: 40px;
}
.case-category-ttl{
    padding: 10px 20px;
    font-size: 1.5em;
    font-weight: bold;
    border-bottom: 3px dotted var(--dred);
}
.case-category-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.case-category-list li {
    display: flex;
    align-items: center;
}
.case-category-list a {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    background: var(--dred);
    padding: 5px 10px;
    border-radius: 5px;
}
.case-category-list a:hover {
    background: #cf6d6c;
}

/* --- 一番下の「一覧を見る」ボタン --- */
.case-all-btn-wrap {
    text-align: center;
}

.btn-all {
    display: inline-block;
    padding: 15px 50px;
    background: #a72945;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    transition: opacity 0.3s;
}
.btn-all:hover {
    color: #fff;
    opacity: 0.8;
}



/* -------------------------------------------
   製品シリーズセクション
------------------------------------------- */
.series-section {
    background: var(--dred) url('images/index/bg-products.png') no-repeat calc(50% - 400px) calc(0% + 150px) / 1148px auto;
    padding: 80px 0;
    color: #ffffff;
}

/* タイトルを白くする場合の調整 */
.section-title.white .en,
.section-title.white .jp {
    color: #ffffff;
}
.section-title.white::after {
    background-color: #ffffff;
}

/* --- グリッドレイアウト（2行並び） --- */
.series-grid {
    display: flex;
    flex-wrap: wrap; /* 折り返しを許可 */
    gap: 40px 70px;  /* 縦と横の隙間 */
    justify-content: flex-start;
}

.series-item {
    width: calc(50% - 35px);
    display: block;
    transition: all 0.3s ease !important;
}

/* リンクの色と下線を常に白・なしに固定（アニメーションとは切り離す） */
.series-item,
.series-item:visited {
    color: #ffffff !important;
    text-decoration: none;
}

/* ホバー（マウスオーバー）時のアクション */
.series-item:hover {
    opacity: 0.9 !important;
    color: #ffffff !important;
    text-decoration: none;
}

/* 画像エリアの設定 */
.series-thumb {
    overflow: hidden;
    margin-bottom: 20px;
}
.series-thumb img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.series-item:hover .series-thumb img {
    transform: scale(1.05);
}

/* ==============================================
   テキスト・装飾の設定
============================================== */
.series-item-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.series-item-desc {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* 下部のライン */
.series-line {
    width: 100%;
    height: 1px;
    background-color: #ffffff;
}

/* ==============================================
   スマホ対応（画面幅767px以下）
============================================== */
@media screen and (max-width: 767px) {
    .series-item {
        width: 100%; /* スマホでは1段並びにする */
    }
}



/* -------------------------------------------
   ショールームセクション
------------------------------------------- */
.showroom-section {
    background-image: url('images/index/bg-showroom.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: max(100%, 800px) auto; /* 大きい方を適用 */
    background-size: cover;
    min-height: 1000px;

    padding: 80px 0;
    color: #fff;
    text-align: center;
}

.showroom-section .section-title {
    color: #fff;
}
.showroom-section .section-title .en {
    color: #fff;
}
.showroom-section .section-title::after {
    background-color: #fff;
}

.showroom-section table{
    max-width: 1200px;
    width: 95%;
    margin: 50px auto;
}
.showroom-section td{
    vertical-align: top;
}

.showroom-section p{
    max-width: 1000px;
    width: 95%;
    text-align: left;
    margin: 0 auto;
}

.showroom-btn-wrap {
    margin-top: 50px;
    text-align: center;
}
.btn-show {
    display: inline-block;
    padding: 15px 50px;
    background: #fff;
    color: #a72945;
    text-decoration: none;
    font-size: 16px;
    transition: opacity 0.3s;
}
.btn-show:hover {
    color: #a72945;
    opacity: 0.8;
}






/* -------------------------------------------
   関連サイトセクション
------------------------------------------- */
.brand-section {
    padding: 80px 0;
    background-color: #f9f9f9; /* 背景を少しだけグレーにして区切る（お好みで消してください） */
}

/* --- グリッドレイアウトの設定 --- */
.brand-site-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PC：横に3列並べる */
    gap: 40px 30px; /* 縦の隙間が40px、横の隙間が30px */
}

/* --- 各ボックス（リンク全体）の設定 --- */
.brand-site-item {
    display: block; /* aタグをブロック化して全体をクリック可能に */
    text-decoration: none;
    color: #333;
    background-color: #ffffff; /* ボックス内は白背景 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px; /* 角を少し丸くする */
    overflow: hidden;   /* 丸めた角から画像がはみ出さないようにする */
}

/* ホバー時のアクション（少しフワッと浮き上がる演出） */
.brand-site-item:hover {
    transform: translateY(-5px); /* 上に5px移動 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* 影をつけて浮いたように見せる */
}

/* --- 画像の設定 --- */
.brand-site-thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* 全ての画像を横長の同じ比率に統一 */
    object-fit: cover;
    display: block;
}

/* --- テキストエリアの設定 --- */
.brand-site-body {
    padding: 20px; /* 画像の下のテキスト周りに余白を持たせる */
}

.brand-site-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.brand-site-desc {
    font-size: 14px;
    color: #666; /* 説明文は少し文字色を薄くするとメリハリが出ます */
    margin: 0;
    line-height: 1.6;
}

/* --- スマホ対応（画面幅767px以下） --- */
@media screen and (max-width: 767px) {
    .brand-section {
        padding: 50px 0;
    }

    .brand-site-grid {
        grid-template-columns: repeat(2, 1fr); /* スマホ：横に2列並べる */
        gap: 20px 15px; /* スマホでは隙間を少し狭くする */
    }

    .brand-site-body {
        padding: 15px; /* スマホではテキスト周りの余白も少し詰める */
    }

    .brand-site-title {
        font-size: 15px; /* スマホではタイトルを少し小さく */
    }

    .brand-site-desc {
        font-size: 12px;
    }
}





/* ==================================================
   記事詳細ページ（single.php）
================================================== */

/* パンくずリスト */
.breadcrumbs {
    padding: 15px 0;
    font-size: 13px;
    color: #888;
    margin-bottom: 20px;
}
.breadcrumbs a {
    color: #a72945;
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}

/* 更新日のスタイル（少し控えめにする） */
.entry-modified {
    margin-left: 10px;
    color: #999;
}

/* 前後ナビゲーションのタイトル表示対応 */
.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* 左右のボタンの間の隙間 */
    margin: 40px 0;
}
.nav-previous, 
.nav-next {
    flex: 1; /* 50%ずつ幅を取る */
    min-width: 0;
}
.post-navigation a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--moji);
    padding: 15px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}
.post-navigation a:hover {
    background-color: #f9f9f9;
}
.nav-next a {
    justify-content: flex-end;
}
.nav-arrow {
    flex-shrink: 0;
    font-weight: bold;
}
.nav-previous .nav-arrow { margin-right: 10px; }
.nav-next .nav-arrow { margin-left: 10px; }
.nav-title {
    white-space: nowrap; /* 改行させない */
    overflow: hidden;    /* はみ出た分を隠す */
    text-overflow: ellipsis; /* 隠れた部分を「・・・」にする */
}
@media screen and (max-width: 767px) {
    .post-navigation {
        flex-direction: column; /* スマホでは上下に並べる */
        gap: 10px;
    }
}



.single-post-article {
    max-width: 1000px; /* 本文は読みやすいように少し横幅を絞る */
    margin: 60px auto;
}

.entry-header {
    margin-bottom: 30px;
    text-align: center; /* タイトル周りは中央寄せがモダン */
}

.entry-header .entry-title {
    font-size: 32px;
    margin-top: 15px;
    line-height: 1.3;
}

.entry-eye-catch {
    margin-bottom: 40px;
}

.entry-eye-catch img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* -------------------------------------------
   本文内の装飾（h2やh3）
------------------------------------------- */
.entry-content {
    line-height: 1.9;
    color: #333;
}

/* 記事本文内の見出し（h2）を「本文エリア内」に限定 */
.entry-content h2 {
    position: relative;
    padding: 15px 20px;
    background: #f8f9fa;
    border-left: 5px solid #a72945; /* アクセントカラー */
    margin: 50px 0 30px;
    font-size: 24px;
    /* 一覧ページのタイトル設定が混ざらないよう上書き */
    width: auto;
    display: block;
}

/* 記事詳細のメインタイトル（h1）を限定 */
.entry-header .entry-title {
    font-size: 32px;
    margin-top: 15px;
    line-height: 1.3;
    background: none;
    border: none;
    padding: 0;
}

/* 本文内のh3（小見出し） */
.entry-content h3 {
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin: 40px 0 20px;
    font-size: 20px;
}

/* 本文内の画像 */
.entry-content img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
}

/* -------------------------------------------
   前後記事ナビゲーション
------------------------------------------- */
.post-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.post-navigation a {
    text-decoration: none;
}

/* -------------------------------------------
   関連製品
------------------------------------------- */
.related-series-area {
    margin-top: 3em;
    padding: 1.5em;
    background: #f4f6f9;
    border-radius: 8px
}

/* -------------------------------------------
   関連記事（3カラム・タイル形式）
------------------------------------------- */
.related-posts {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 2px solid #f0f0f0;
}

.related-title {
    font-size: 20px;
    margin-bottom: 25px;
    text-align: center;
    font-weight: bold;
}

/* 横に3つ並べる設定 */
.related-list {
    display: flex;
    flex-wrap: wrap; /* 追加：4個目以上になったら下に改行（折り返し）させる */
    gap: 20px;       /* 記事間の隙間 */
}

.related-item {
    /* 変更：flex:1 をやめて、横幅を常に「3等分」に固定する */
    /* 20pxの隙間が横に2箇所（計40px）あるので、100%から40pxを引いて3で割ります */
    width: calc((100% - 40px) / 3);
}

.related-item a {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: opacity 0.3s ease; /* ホバー時の滑らかさをおまけで追加 */
}

.related-item a:hover {
    opacity: 0.8;
}

/* 画像を枠内でズームさせるエフェクト */
.related-thumb {
    width: 100%;
    aspect-ratio: 16 / 9; /* 比率を固定 */
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 12px;
}

.related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.related-item a:hover .related-thumb img {
    transform: scale(1.1);
}

.related-date {
    display: block;
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
}

.related-post-title {
    font-size: 14px;
    line-height: 1.5;
    font-weight: bold;
    margin: 0;
    /* 2行で省略する設定 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* スマホでは縦に並べる */
@media screen and (max-width: 767px) {
    .related-list {
        gap: 15px; /* スマホでは隙間を少し狭める */
    }
    
    .related-item {
        width: 100%; /* スマホでは縦に1段ずつ並べる */
        
        /* もしスマホで「2列」にしたい場合は上の width: 100%; を消して、以下を使います */
        /* width: calc((100% - 15px) / 2); */
    }
}



/* ==================================================
   アーカイブページ（archive.php）
================================================== */
.archive-header {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 40px;
    border-left: 6px solid #a72945; /* アクセントカラー */
}

.archive-title {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
}

.archive-description {
    margin-top: 15px;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* ページネーションの見た目 */
.pagination {
    margin: 50px 0;
    text-align: center;
}

.pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.pagination a, .pagination span {
    padding: 8px 16px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
}

.pagination .current {
    background: #a72945;
    color: #fff;
    border-color: #a72945;
}



/* ==================================================
   固定ページ（page.php）
================================================== */
.page-article {
    max-width: 1000px;
    margin: 40px auto 80px;
}

.page-header {
    text-align: center;
    margin-bottom: 40px;
}

.page-title {
    font-size: 28px;
    font-weight: bold;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

/* タイトルの下にアクセントの短い線を引く */
.page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: #a72945; /* アクセントカラー */
}

.page-eye-catch {
    margin-bottom: 40px;
    border-radius: 8px;
    overflow: hidden;
}

.page-content {
    line-height: 2.0;
    color: #333;
}

/* 固定ページ内の見出し装飾（投稿ページと少し変えてもOK） */
.page-content h2 {
    font-size: 22px;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
    margin: 40px 0 20px;
}



/* ==================================================
   404エラーページ（404.php）
================================================== */
.error-404 {
    text-align: center;
    padding: 100px 0;
    max-width: 600px;
    margin: 0 auto;
}

.error-404 .page-title {
    font-size: 80px;
    font-weight: bold;
    color: #eee; /* 薄いグレーで背景っぽく */
    margin-bottom: 20px;
    line-height: 1;
}

.error-message {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
}

.page-content p {
    color: #666;
    margin-bottom: 40px;
}

/* 検索フォームの調整 */
.error-search {
    margin-bottom: 50px;
    padding: 30px;
    background: #f9f9f9;
    border-radius: 8px;
}

.error-search .search-form {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* ホームに戻るボタン */
.btn-home {
    display: inline-block;
    background: #a72945;
    color: #fff;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    transition: background 0.3s;
}

.btn-home:hover {
    background: #333;
}



/* ==================================================
   事例ページ (single-case.php)
================================================== */
/* 特性（チェックボックス）のタグ表示 */
.case-chara-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 5px 0;
}

.case-chara-list li {
    background-color: #f4f4f4;
    color: #333;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 4px; /* 少し丸みを持たせる */
    border: 1px solid #ddd;
}


/* ==================================================
   製品詳細ページ (single-series.php)
================================================== */
.product-single-main {
    padding-top: 50px;
    padding-bottom: 80px;
}

/* タイトル */
.product-title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 15px;
    border-bottom: 2px solid #a03d3c;
    padding-bottom: 10px;
}
.product-title span{
    font-size: 25px;
    margin-left: 5px;
}


/* 特性（チェックボックス）のタグ表示 */
.product-chara-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.product-chara-list li {
    background-color: #f4f4f4;
    color: #333;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 4px; /* 少し丸みを持たせる */
    border: 1px solid #ddd;
}

/* ギャラリー全体のレイアウト（左：大、右：小） */
.product-gallery {
    display: flex;
    gap: 20px;
    margin-bottom: 50px;
}

/* 左側：メイン画像 */
.gallery-main {
    flex: 1; /* 残りの幅をすべて使う */
    border: 1px solid #eee;
    background: #fff;
}

.gallery-main img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3; /* 必要に応じて比率を固定 */
    object-fit: contain; /* 画像が切れないように全体を表示 */
}

/* 右側：サムネイル一覧 */
.gallery-thumbnails {
    width: 120px; /* 右側の幅を固定 */
    display: flex;
    flex-direction: column; /* 縦に並べる */
    gap: 10px;
}

.thumb-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid #ccc;
    cursor: pointer; /* マウスオーバーできることを伝える */
    transition: opacity 0.3s, border-color 0.3s;
}

.thumb-item img:hover {
    opacity: 0.7;
    border-color: #a03d3c; /* ホバー時に枠線を赤くする */
}

/* スマホ対応（縦並びに変更） */
@media screen and (max-width: 767px) {
    .product-gallery {
        flex-direction: column;
    }
    .gallery-thumbnails {
        width: 100%;
        flex-direction: row; /* スマホではサムネイルを横並びに */
        flex-wrap: wrap;
    }
    .thumb-item {
        width: calc(20% - 8px); /* 5枚を横に並べる計算 */
    }
}


/* ==================================================
   製品スペック表
================================================== */
.product-spec-table {
    width: 100%;
    border-collapse: collapse; /* 枠線を重ねてスッキリさせる */
    margin-top: 40px;
    margin-bottom: 40px;
    font-size: 15px;
    line-height: 1.6;
}

/* 行の境界線 */
.product-spec-table tr {
    border-bottom: 1px solid #ddd; /* 各行の下に薄いグレーの線 */
}

/* 表の一番上 */
.product-spec-table tr:first-child {
    border-top: 1px solid #ddd;
}

/* 左側の見出し (th) の設定 */
.product-spec-table th {
    width: 25%; /* 幅を固定して揃える */
    background-color: #f9f9f9; /* 薄い背景色で項目を目立たせる */
    color: #333;
    font-weight: bold;
    text-align: left; /* 日本語は左寄せが読みやすいです */
    padding: 16px 20px;
    vertical-align: top; /* 文字が複数行になったら上に揃える */
}

/* 右側のデータ (td) の設定 */
.product-spec-table td {
    width: 75%;
    padding: 16px 20px;
    color: #444;
    vertical-align: top;
}

/* --- スマホ対応（画面幅767px以下） --- */
@media screen and (max-width: 767px) {
    /* スマホでは表の構造を解除し、縦積みのリストのように見せる */
    .product-spec-table th,
    .product-spec-table td {
        display: block;
        width: 100%;
        padding: 10px 15px;
    }
    
    .product-spec-table th {
        background-color: transparent; /* 背景色を消す */
        border-bottom: none;           /* thの下線を消す */
        padding-bottom: 2px;
        color: #a03d3c;                /* 見出しの文字色をアクセントカラーに */
    }
    
    .product-spec-table td {
        padding-top: 0;
        margin-bottom: 15px;
    }
}


/* ==============================================
   タクソノミーアーカイブのレイアウト（taxonomy-series_cat.php）
============================================== */
.series-archive-container {
    padding: 0px 20px 60px; /* 上・左右・下の余白 */
}

.series-archive-inner {
    width: 100%;
    max-width: 1000px;
    margin: 40px auto 0; /* 中央寄せ & パンくずとの間の余白(40px) */
}
/* 上部ブロックエディタエリア */
.taxonomy-top-content {
    margin-bottom: 60px;
}
/* 区切り線 */
.section-divider {
    border: none;
    border-top: 1px solid #ddd;
    margin-bottom: 60px;
}
/* 下部一覧の見出し */
.taxonomy-bottom-list .related-title {
    margin-bottom: 30px;
    text-align: left;
    font-size: 16px;
}




/* ==============================================
   サイト内検索フォームのデザイン
============================================== */
.cta-search-area {
    max-width: 600px;
    margin: 40px auto 0;
    padding: 0 20px;
}
.custom-search-form .search-form-inner {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 50px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}
/* 入力枠にフォーカス（クリック）した時に枠線の色を変える */
.custom-search-form .search-form-inner:focus-within {
    border-color: var(--dred);
}
/* 入力フィールド */
.custom-search-form .search-input {
    flex: 1;
    border: none;
    padding: 15px 25px;
    font-size: 16px;
    outline: none; /* クリック時の標準の青い枠線を消す */
    background: transparent;
    color: var(--moji);
}
.custom-search-form .search-input::placeholder {
    color: #aaa;
    font-size: 14px;
}
/* 検索（虫眼鏡）ボタン */
.custom-search-form .search-submit {
    background-color: transparent;
    border: none;
    color: var(--dred); /* 虫眼鏡の色 */
    font-size: 20px;
    padding: 0 25px;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
/* ボタンに乗せた時のアクション */
.custom-search-form .search-submit:hover {
    transform: scale(1.1);
    opacity: 0.8;
}



/* ==================================================
   個別ページ
================================================== */

/* シリーズ別 */
.single-series-grid .wp-block-group-is-layout-flex {
    background-color: #fff;
    transition: background-color 0.3s ease;
    padding: 5px;
    border: 2px solid #edf5ff;
}
.single-series-grid .wp-block-group-is-layout-flex:hover {
    background-color: #edf5ff;
}


/* ダウンロード */
.single-DL-grid .wp-block-group-is-layout-flex {
    background-color: #fff;
    transition: background-color 0.3s ease;
    padding: 10px;
    border: 1px solid var(--dred);
}
.single-DL-grid .wp-block-group-is-layout-flex h2{
    border-bottom: none;
}

.single-DL-grid .wp-block-group-is-layout-flex .wp-block-buttons{
    margin-top: auto;
}


/* ==================================================
   旧ページ装飾
================================================== */



/*ご利用案内*/
.inlink{
    padding: 2.5% 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.inlink2{
    padding: 2.5% 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.inlink .libox{
    color: #993145;
    text-align: center;
    margin: 2px 0;
    padding: 5px;
    border:1px solid #993145;
    position: relative;
    z-index: 1;
    width: 18vw;
    max-width: 195px;
    box-sizing: border-box;
}
.inlink2 .libox2{
    color: #993145;
    text-align: center;
    margin: 2px 0;
    padding: 5px;
    border:1px solid #993145;
    position: relative;
    z-index: 1;
    width: 22.5vw;
    max-width: 244px;
    box-sizing: border-box;
    margin-right: 3px;
}
.inlink .libox3{
    color: #993145;
    text-align: center;
    margin: 2px 0;
    padding: 5px;
    border:1px solid #993145;
    position: relative;
    z-index: 1;
    width: 30vw;
    max-width: 330px;
    box-sizing: border-box;
}
.inlink .libox a,.inlink2 .libox2 a,.inlink .libox3 a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent:-999px;
    z-index: 2;
}
.inlink .libox:hover,.inlink2 .libox2:hover{
    background: #fff5f7;
    zoom:1;/*IE*/
}
.wid{
    color: #993145;
    transform: scale(2, 1);
    margin-top: -25px;
}


/*download*/
.download table{
    border:2px solid #993145;
    width: 100%;
}
.download table th{
    padding-bottom: 15px;
    width: 50%;
    border: none;
    text-align: left;
    background: #fff;
    border:1px dotted #993145;
    border-top: none;
    border-bottom:1px solid #993145;
    font-size: 1em;
    vertical-align: middle;
    line-height: 1.4em;
}
.download table td{
    padding-top: 10px;
    border: none;
    text-align: center;
    background: #fff;
    border:1px dotted #993145;
    border-top:1px solid #993145;
    border-bottom: none;
    vertical-align: middle;
}
.download table th span{
    font-weight: normal;
    font-size: 0.95em;
}

.remote dt{
    font-size: 1.1em;
    font-weight: bold;
    padding: 5px 0;
}
.remote dd{
    margin-bottom: 10px;
    padding: 5px;
}



/*faq*/
.faq_q{
    margin:10px 0px 3px 0px;
    padding:10px 10px;
    background:url(images/subcon/faqf.png) 5px 7px no-repeat;
    color:#993145;
    width:100%;
    box-sizing: border-box;
    padding-left:50px;
}
.faq_a{
    margin:3px 0px 20px 0px;
    padding:10px 10px 25px 10px;
    background:url(images/subcon/faqa.png) 5px 7px no-repeat;
    width:100%;
    box-sizing: border-box;
    border-bottom:1px dotted #993145;
    padding-left:50px;
}
.faq_l{
    margin-bottom: 80px;
}


/*お問い合わせ*/
.nd{
    font-size: 0.8em;
    color: #ff0000;
}
.contact table{
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 0 10px;
    width: 100%;
}
.contact table th{
    background: #f2f3f4;
    border: 1px solid #e2e2e2;
    white-space: nowrap;
    text-align: center;
    padding: 1em 1.2em;
}
.contact table td{
    border: 1px solid #e2e2e2;
    text-align: left;
    padding: 1em 1.2em;
}
.contact table td.center{
    text-align: center;
}
@media screen and (max-width: 600px) {
    .contact table th,.contact table td{
        display: block;
    }
}
.contact table th p,.contact table td p{
    margin: 0;
}

.recap{
    margin-top: 50px;
    text-align: left;
    font-size: 0.8em;
}
.grecaptcha-badge { visibility: hidden; }




/* Form */
input:not([type=checkbox]):not([type=radio]):not([type=submit]),textarea,select {
    box-sizing:border-box;
    width:100%;
    padding:5px;
    border: solid 1px #e6e6e6;
}
.post input,.post textarea{
    border-radius:3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border:1px solid #ccc;
}
.post #search input{
    border:none;
}

/*コンタクトフォーム7の送信ボタン*/
.wpcf7-submit{
    width:200px;
    border-radius:20px;
    -webkit-border-radius: 20px;  
    -moz-border-radius: 20px;
    background:#f3f3f3;
    color:#000;
    border:none;
    margin:0 auto;
    padding:10px;
    display:block;
    box-sizing:border-box;
}

.wpcf7-submit:hover{
    opacity:0.9;
}



/*   動画一覧   */
.movie-grid{
    margin: 40px auto 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.movie-grid .movie-box{
    text-align: left;
    padding: 12px;
    line-height: 1.4em;
    max-width: 500px;
    background:#f8f8f8;
    margin:2px;
}
.movie-box .ttl{
    margin: 8px auto 10px;
    font-size: 1.1em;
}
.movie-box a{
    text-decoration:none;
}
.movie-box img{
    width:100%;
}
.movie-box .moviecomm{
    margin-top:5px;
    font-size:0.9em;
    line-height:1.2em;
}