@charset "UTF-8";
/*
Theme Name: nissin-dental_en
Theme URL: 
Description: 
Author: 
Version: 
*/

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,
*::before,
*::after {
    box-sizing: border-box
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    word-wrap: break-word;
    font-size: 62.5%;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    /* 1. 【超重要】100%を固定せず、中身に合わせて伸びるようにする */
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    /* モダンなブラウザ用（ツールバー考慮） */

    position: relative;
    color: #333;
    -webkit-font-smoothing: antialiased;

    /* フォント設定：継承 */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.7;
    letter-spacing: 0.01em;
    font-weight: 400;

    /* サイズ設定 */
    -webkit-text-size-adjust: 100%;
    font-size: 1.6rem;

    /* WordPress用変数などはそのまま維持 */
    --wp--preset--font-size--small: 1.3rem;
    --wp--preset--font-size--medium: 2.0rem;
    --wp--preset--font-size--large: 3.6rem;
    --wp--preset--font-size--x-large: 4.2rem;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%
}

input,
button,
textarea,
select {
    font: inherit
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    /* 両端揃えを解除し、左揃えにする */
    text-align: left;
    /* 念のため、単語の途中で変な改行が入らないように設定 */
    word-break: normal;
    overflow-wrap: break-word;
}

#root,
#__next {
    isolation: isolate
}

body {
    text-align: left;
}

header,
main,
footer {
    width: 100%;
    margin: 0 auto;
}

aside {
    background: #e1e1e1;
}

a {
    text-decoration: none;
}

ul {
    padding: 0;
}

li {
    list-style-type: none;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.clearfix:before {
    content: "";
    display: block;
    clear: both;
}

.clearfix {
    display: block;
}

/*//////////////////////////////////////////////////////////
///common
/////////////////////////////////////////////////////////*/

/* --- 共通ルール --- */
:root {
    --nissin-blue: #0E2884;
    --text-gray: #4a4a4a;
    --light-gray: #f8f9fa;
}

.container {
    width: 1300px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
}

img {
    max-width: 100%;
}

h1 img {
    display: inline;
    text-align: center;
}

table {
    border-collapse: collapse;
}

a {
    outline: none;
    color: #333;
}

a:hover {
    text-decoration: none;
}


a,
a:hover,
a:hover img {
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    text-decoration: none;
}

a:hover {
    filter: alpha(opacity=80);
    -moz-opacity: 0.80;
    opacity: 0.80;
}

has-small-font-size {
    font-size: 1.3rem !important;
}

has-normal-font-size {
    font-size: 1.6rem !important;
}

has-medium-font-size {
    font-size: 2.0rem !important;
}

has-large-font-size {
    font-size: 3.6rem !important;
}

has-huge-font-size {
    font-size: 4.2rem !important;
}

.onlyPc {
    display: block !important;
}

.onlySp {
    display: none !important;
}

.onlyPc768 {
    display: block !important;
}

.onlySp768 {
    display: none !important;
}

.txtCenter {
    text-align: center !important;
}

.mTop2rem {
    margin-top: 2rem !important;
}

.mBottom2rem {
    margin-bottom: 2rem !important;
}

.mTop3rem {
    margin-top: 3rem !important;
}

.mTop4rem {
    margin-top: 4rem !important;
}

.mTop5rem {
    margin-top: 5rem !important;
}

.mTop6rem {
    margin-top: 6rem !important;
}

.mTop7rem {
    margin-top: 7rem !important;
}

.mTop8rem {
    margin-top: 8rem !important;
}

.mTop9rem {
    margin-top: 9rem !important;
}

.mTop10rem {
    margin-top: 10rem !important;
}

.breadcrumb-area {
    font-size: 1.4rem;
    color: #0E2884;
}

.breadcrumb-area a {
    text-decoration: underline;
    color: #0E2884;
}

@media print,
screen and (min-width : 1001px) {
    .breadcrumb-area {
        margin: 5rem 0 7rem 0;
    }

    .breadcrumb-area + .heading10-second {
        margin-top: -2rem;
    }

    .page-template-page-home main {
        padding: 0;
    }
}

@media only screen and (max-width : 1000px) {
    .breadcrumb-area {
        margin: 4rem 0;
    }

    .onlyPc {
        display: none !important;
    }

    .onlySp {
        display: block !important;
    }
}

@media screen and (max-width: 782px) {
    html {
        font-size: 57%;
    }

    .mTop3rem {
        margin-top: 1.5rem !important;
    }

    .mTop4rem {
        margin-top: 2rem !important;
    }

    .mTop5rem {
        margin-top: 2.5rem !important;
    }

    .mTop6rem {
        margin-top: 3rem !important;
    }

    .mTop7rem {
        margin-top: 3.5rem !important;
    }

    /*.mTop8rem {
		margin-top: 4rem !important;
	}

	.mTop9rem {
		margin-top: 4.5rem !important;
	}

	.mTop10rem {
		margin-top: 5rem !important;
	}*/

    .onlyPc768 {
        display: none !important;
    }

    .onlySp768 {
        display: block !important;
    }
}


@media screen and (max-width: 600px) {
    #wpadminbar {
        position: fixed !important;
    }
}

/*//////////////////////////////////////////////////////////
///popup
/////////////////////////////////////////////////////////*/
.modal {
    position: fixed;
    display: none;
    z-index: 10011;
    top: 50%;
    left: 50%;
    /*margin: 0 0 0 -25%;*/
    width: 60%;
    transform: translate(-50%, -50%);
    background: #efefef;
    padding: 3rem;
    height: auto !important;
    text-align: center;
}

.modal p {
    margin-bottom: 1rem;
}

.modal a {
    cursor: pointer;
}

.modal h3 {
    font-size: 2.8rem;
    color: #0E2884;
    font-weight: bold;
}

.modal h4 {
    font-size: 2.2rem;
    margin: 0 !important;
}

.modal {
    display: none;
}

.modal ul {
    text-align: center;
    margin: 1rem auto;
}

.modal ul {
    display: flex;
    justify-content: center;
}

.modal ul li a {
    display: block;
    padding: 1.5rem 4.5rem;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 1.8rem;
    margin: 1rem;
}


.modal ul li a.yes {
    background: #0e2884;
    color: #fff;
}

.modal ul li a.no {
    background: #333;
    color: #fff;
}

.remove_cookie {
    cursor: pointer;
}

@media only screen and (max-width : 928px) {
    .modal {
        width: 90%;
    }
}

/*//////////////////////////////////////////////////////////
///fadein
/////////////////////////////////////////////////////////*/
.js-fadeup,
.js-fadein,
.js-fadedown,
.js-fadeleft,
.js-faderight {
    /* 最初は非表示 */
    opacity: 0;
}

/* その場で */
.fadeIn {
    animation-name: fadeInAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 下から */

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 上から */

.fadeDown {
    animation-name: fadeDownAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeDownAnime {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 左から */

.fadeLeft {
    animation-name: fadeLeftAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeLeftAnime {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 右から */

.fadeRight {
    animation-name: fadeRightAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeRightAnime {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

    .fadeLeft,
    .fadeRight,
    .fadeDown,
    .fadeUp {
        animation-duration: 0.7s;
    }

    @keyframes fadeUpAnime {
        from {
            opacity: 0;
            transform: translateY(0);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }


    @keyframes fadeDownAnime {
        from {
            opacity: 0;
            transform: translateY(0);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }


    @keyframes fadeLeftAnime {
        from {
            opacity: 0;
            transform: translateX(0);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }


    @keyframes fadeRightAnime {
        from {
            opacity: 0;
            transform: translateX(0);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

}

/*//////////////////////////////////////////////////////////
///top
/////////////////////////////////////////////////////////*/

/*---------------------------------------------------------
main-top
---------------------------------------------------------*/
.topSlider {
    position: relative;
    z-index: 1;
}

.topSlider img {
    height: 100vh;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
    width: 100%;
    min-height: 550px;
}

.topSlider li:first-child img {
    object-position: top;
}


.sliderTop {
    opacity: 0;
    transition: opacity .25s ease;
}

.sliderTop.slick-initialized {
    opacity: 1;
}

.topSlider a:hover {
    filter: none;
    opacity: 1;
}

.topSlider li {
    position: relative;
    text-align: center;
}

.topSlider li:first-child .textphoto {
    display: none;
}

.textphoto {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-weight: 500;
    z-index: 100;
    font-size: clamp(2.7rem, calc(2.8vw + 1rem), 6.2rem) !important;
    font-style: italic;
    text-align: center;
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    /* 明朝は太めにすると格好いいです */
    letter-spacing: 0.05em;
    /* 明朝の見出しは少し広げると高級感が出ます */
}

.textphoto span {
    display: block;
    text-align: center;
    font-size: clamp(1.8rem, calc(1vw + 1rem), 3.2rem) !important;
}

.textphoto img {
    width: 40% !important;
    height: auto !important;
    display: block;
    margin: auto;
    min-height: auto;
}

.topSlider li:first-child .textphoto img {
    filter: drop-shadow(1.5px 1.5px 0px #fff);
    /*filter: drop-shadow(2px 2px 0px #eee);*/
}

.is-layer-dot {
    position: relative;
    object-fit: fill;
    z-index: -10;

    &:after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        content: "";
        display: block;
        background-color: rgba(0, 0, 0, .4);
        background-image: radial-gradient(#000 20%, transparent 0), radial-gradient(#000 20%, transparent 0);
        background-position: 0 0, 10px 10px;
        background-size: 4px 4px;
        min-height: 550px;
    }
}

.is-layer-filter {
    position: relative;
    object-fit: fill;
    z-index: -10;

    &:after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        content: "";
        display: block;
        background-color: rgba(255, 255, 255, .05);
        min-height: 500px;
    }
}

.is-layer-filter_black {
    position: relative;
    object-fit: fill;
    z-index: -10;

    &:after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        content: "";
        display: block;
        background-color: rgba(0, 0, 0, .4);
        min-height: 550px;
    }
}

.textphoto {
    width: 90% !important;
}

.textphoto img {
    width: 22% !important;
    max-width: 400px;
    min-width: 250px;
}

.topSlider li:nth-child(4) .textphoto img {
    width: 70% !important;
    max-width: 750px;
}

@media only screen and (max-width : 1000px) {
    .textphoto img {
        width: 30% !important;
    }

    .topSlider img,
    .topSlider video {
        height: 95vw;
        object-fit: cover;
    }

    .topSlider img {
        min-height: auto;
    }

    .is-layer-dot {
        &:after {
            min-height: auto;
            height: 95vw;
        }
    }

    .is-layer-filter {
        &:after {
            min-height: auto;
            height: 95vw;
        }
    }

    .is-layer-filter_black {
        &:after {
            min-height: auto;
            height: 95vw;
        }
    }
}

@media only screen and (max-width : 782px) {
    .textphoto img {
        width: 35% !important;
    }

    .topSlider li:first-child .textphoto img {
        filter: drop-shadow(1.5px 1.5px 0px #fff);
        /*filter: drop-shadow(2px 2px 1px #ccc);*/
    }


    .textphoto img {
        min-width: 160px;
    }
}

/*---------------------------------------------------------
main-top-campaign
---------------------------------------------------------*/
.topCamp {
    position: relative;
    z-index: 2;
}

.topProductBlock,
.topNewsBlock {
    background-color: #F8F8F8;
}

.topCamp {
    padding: 4rem 12%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.topCamp li {
    /*margin: 0 1.2rem;*/
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    width: 48.5%;
}

.topCamp li:first-child,
.topCamp li:nth-child(2) {
    margin-bottom: 2.5rem;
}

.topCamp li:nth-child(5),
.topCamp li:nth-child(6) {
    margin-top: 2.5rem;
}

.topCamp .catalogLINKBtn {
    display: flex;
}

.topCamp li img {
    width: 100%;
}

.custom-banner-layout {
    position: relative;
    display: block;
    width: 100%;
}

.base-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
    /* ふわっと変化させる */
}

/* クリックエリアをまとめる容器 */
.click-areas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 透明ボタンの共通設定 */
.click-areas a {
    position: absolute;
    bottom: 0;
    /* 画像の下からの位置（ボタンの高さに合わせる） */
    height: 100%;
    /* ボタン自体の縦幅（%で指定） */
    background: rgba(255, 0, 0, 0);
    /* 0にして完全に隠す（デバッグ時は0.3に） */
}

/* WEBボタンの位置（画像に合わせて調整） */
.area-web {
    left: 0;
    width: 63%;
}

/* PDFボタンの位置（画像に合わせて調整） */
.area-pdf {
    right: 0;
    width: 37%;
}

/* 透明ボタンにマウスが乗ったら、画像全体を薄くする */
.custom-banner-layout:has(.click-areas a:hover) .base-image img {
    opacity: 0.9;
}

/* --- 2. 1枚バナー（全体リンク）の場合 --- */

.single-link-banner:hover img {
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

@media only screen and (max-width : 1000px) {
    .topCamp {
        flex-wrap: wrap;
        padding: 4rem 0;
    }

    .topCamp-col2 li {
        width: 48.5%;
    }

    .topCamp li:first-child,
    .topCamp li:nth-child(2) {
        margin-bottom: 1.5rem;
    }

}

@media only screen and (max-width : 782px) {
    .topCamp {
        /*margin: -5rem 0 0 0;*/
        padding: 2rem 0 0 0;
        /* 折返し指定 */
    }

    .topCamp-col4 li {
        margin-bottom: 2.4rem;
        /* margin padding分を引く */
    }

    .topCamp-col2 li {
        margin: 0 0 2rem 0;
    }

    /* WEBボタンの位置（画像に合わせて調整） */
    .area-web {
        width: 50%;
    }

    /* PDFボタンの位置（画像に合わせて調整） */
    .area-pdf {
        width: 50%;
    }
}

.catalogLINKBtn a:hover {
    filter: none;
    opacity: 1;
}

/*---------------------------------------------------------
main-top-company
---------------------------------------------------------*/
.page-template-page-home h2 {
    font-weight: normal;
    font-size: 4.6rem;
    color: #0E2884;
    line-height: 4.6rem;
    letter-spacing: 0.2rem;
    border-bottom: 1px solid #CBCBCB;
    font-weight: 400 !important;
    padding: 0 0 4rem 0;
}

.page-template-page-home .topCompany h2:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 1px #0E2884;
    width: 10%;
    padding: 4rem 0 0 0;
}

.page-template-page-home h2 span {
    font-size: 1.6rem;
    color: #333;
    display: block;
}

.page-template-page-home .topCompanyBlock h2:first-letter {
    color: #0E2884;
}

.page-template-page-home h4 {
    font-size: 1.8rem;
    color: #0E2884;
    margin: 3.5rem 0;
}

.topCompanyLetf h4 {
    font-size: 3rem;
    font-weight: 600;
    text-align: start;
}

.topCompanyBlock {
    background-image: url("images/topCompanyBg.png");
    background-repeat: no-repeat;
    background-position: center left;
    background-size: cover;
}

.toumei {
    background-color: rgba(255, 255, 255, 0.85);
}

.toumei90 {
    background-color: rgba(255, 255, 255, 0.90);
}

.topCompany {
    padding: 8rem 0;
}

.topCompanyLetf {
    width: 55%;
    margin: 0 10% 0 0;
}

.topCompanyRight {
    width: 35%;
}

.topCompanyLetf,
.topCompanyRight {
    float: left;
}

.topCompanyRight {
    float: right;
}

@media only screen and (max-width : 1000px) {
    .linkBtn a {
        width: 65%;
    }

    .topCompanyLetf h4 {
        font-size: 2.8rem !important;
    }
}

@media only screen and (max-width : 782px) {
    .topCompanyLetf {
        width: 100%;
        margin: 0 0 5rem 0;
    }

    .topCompanyLetf,
    .topCompanyRight {
        float: none;
    }

    .topCompanyRight {
        width: 100%;
        margin: 0 auto;
    }

    .topCompanyRight img {
        width: 100%;
    }

    .topCompany {
        padding: 4rem 0;
    }
}

/*---------------------------------------------------------
main-top-product
---------------------------------------------------------*/
.topProductBlock {
    padding: 5.5rem 0;
}

.ttl_h2 {
    text-align: center;
    position: relative;
}

.page-template-page-home .ttl_h2 h2 {
    border-bottom: 1px solid #ddd;
    margin: 0 0 1.5rem 0;
    padding: 0 3rem 3rem 3rem;
    display: inline-block;
    letter-spacing: -0.01em;
    /* ここでギュッと引き締める */
    text-transform: uppercase;
    /* SEARCHをすべて大文字にする場合 */
}

.page-template-page-home .ttl_h2 span {
    display: block;
}

.page-template-page-home .ttl_h2:after,
#footer .ttl_h2:after {
    content: "";
    position: absolute;
    bottom: 1.5rem;
    /* ベースの線にぴったり重ねる */
    left: calc(50% - 3rem);
    width: 6rem;
    /* アクセント線の長さ */
    height: 1px;
    /* アクセント線の太さ */
    background: #0E2884;
    /* ブランドカラーがあればここを変える */
}

.topProductBlock p.txtCenter,
.topContactBlock p.txtCenter {
    width: 70%;
    margin: 0 auto;
}

.productBlockLeft,
.productBlockRight {
    position: relative;
}

.productBlockLeft .productRight {
    float: right;
}

.productBlockLeft .productLeft {
    position: absolute;
    bottom: -3rem;
    background-color: #fff;
    padding: 3.5rem;
    z-index: 10;
    width: 60%;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
}

.productLeft h3,
.productRight h3 {
    color: #0E2884;
    font-weight: 600;
    font-size: 3.4rem;
    border-bottom: 1px solid #CBCBCB;
    padding: 0 0 2rem 0;
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    /* 明朝は太めにすると格好いいです */
    letter-spacing: 0.05em;
    /* 明朝の見出しは少し広げると高級感が出ます */
}

.productLeft h3 span,
.productRight h3 span {
    color: #333;
    font-weight: 300;
    font-size: 1.6rem;
    display: block;
}

.productLeft h3:after,
.productRight h3:after {
    position: relative;
    top: 2rem;
    content: " ";
    display: block;
    border-bottom: solid 1px #0E2884;
    width: 20%;
    padding: 2rem 0 0 0;
}

.productLeft p,
.productRight p {
    margin: 2rem 0 0 0;
}

.topProductBlock {
    overflow: hidden;
    position: relative;
}

.topProductBlock .linkBtn a {
    width: 60%;
}

.topProductBlock .productLeft {
    background-color: #fff;
    padding: 4rem;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.topProductBlock section {
    display: flex;
    justify-content: space-between;
    max-width: 1300px;
    /*padding: 3.5rem;*/
    padding: 3.5rem 2rem;
    margin: auto;
}

.topProductBlock img {
    width: 100% !important;
    height: auto;
}

.reverse {
    flex-direction: row-reverse;
}

.productLeft {
    width: 48%;
}

/*右側へ要素を広げる（2カラム）*/
.column-outside-right {
    flex: 1;
    margin-right: calc(50% - 50vw);
    z-index: 1;
}

/*左側へ要素を広げる（2カラム）*/
.column-outside-left {
    flex: 1;
    margin-left: calc(50% - 50vw);
    z-index: 1;
}

/*右側へ要素を広げる（1カラム）*/
.outside-right {
    margin-right: calc(50% - 50vw);
}

/*左側へ要素を広げる（1カラム）*/
.outside-left {
    margin-left: calc(50% - 50vw);
}

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

    .topProductBlock .linkBtn a {
        width: 70%;
    }

    .topProductBlock section {
        padding: 2rem;
    }

    .topProductBlock .productLeft {
        padding: 3rem;
    }
}

@media only screen and (max-width : 782px) {
    .productBlockLeft .productRight {
        float: none;
    }

    .productBlockLeft .productLeft {
        position: inherit;
        width: 100%;
    }

    .productBlockLeft .productRight img,
    .productBlockRight .productLeft img {
        min-width: 100%;
        max-width: 100%;
    }

    .topProductBlock p.txtCenter,
    .topContactBlock p.txtCenter {
        width: 100%;
    }

    .topProductBlock section {
        display: block;
    }

    .productLeft {
        width: 100%;
    }

    .column-outside-right {
        margin-right: 0;
    }

    .column-outside-left {
        margin-left: 0;
    }

    .outside-right {
        margin-right: 0;
    }

    .outside-left {
        margin-left: 0;
    }

    .topProductBlock .linkBtn a {
        width: 65%;
    }


}

/*---------------------------------------------------------
main-top-news
---------------------------------------------------------*/
.topNewsBlock {
    padding: 8rem 0;
}

.newsTxt {
    margin-left: 5%;
}

.getPostContent {
    /*text-align: justify;*/
}

.tab_content_description ul {
    flex-wrap: wrap;
    justify-content: flex-start;
    display: flex;
}

.tab_content_description li {
    position: relative;
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    border-bottom: 1px solid #ccc;
    width: 100%;
}

.tab_content_description li .category {
    align-self: center;
}

.corporate-newsIcon,
.st-catid5 {
    background-color: #0E2884 !important;
    border: 1px solid #0E2884 !important;
    border-radius: 0 !important;
    min-width: 100px !important;
    padding: 0.4rem 1rem !important;
}

.product-newsIcon,
.st-catid3 {
    background-color: #007793 !important;
    border: 1px solid #007793 !important;
    border-radius: 0 !important;
    min-width: 100px !important;
    padding: 0.4rem 1rem !important;
}

.event-newsIcon,
.st-catid4 {
    background-color: #634A91 !important;
    border: 1px solid #634A91 !important;
    border-radius: 0 !important;
    min-width: 100px !important;
    padding: 0.4rem 1rem !important;
}

.single-post .st-catid3,
.single-post .st-catid4,
.single-post .st-catid5 {
    padding: 0.15rem 1rem !important;
}

.newsTtl .category {
    min-width: 100px;
}

.secBtn {
    margin: 3rem 0 0 0;
}

.itemWrap .secBtn.linkBtn a {
    width: 35%;
    margin: 0 auto;
}

.secBtn.linkBtn a {
    width: 25%;
    margin: 0 auto;
}

.tab_content_description li .link {
    align-self: center;
}

.tab_content_description li .category a {
    font-size: 1.4rem;
    color: #fff;
    padding: 0.4rem 2.2rem;
    display: block;
    min-width: 100px;
    text-align: center;
}

.tab_content_description .date {
    align-self: center;
}

.tab_content_description .date span {
    font-size: 1.2rem;
    margin: 0 0 5px 0;
}

.tab_content_description .date strong {
    font-size: 3.54rem;
}

.tab_content_description .date span,
.tab_content_description .date strong {
    display: block;
    line-height: 1;
    font-weight: bold;
    color: #555;
}

.tab_content_description .date strong {
    text-indent: 0.1rem;
}

.newsTtl {
    display: flex;
    margin-bottom: 1rem;
}

.cat_paging {
    border-top: 1px solid #999;
    display: flex;
    justify-content: space-between;
}

.cat_paging dl {
    width: 45%;
    margin-top: 1.5rem;
}

.cat_paging dt {
    font-size: 1.4rem;
    font-weight: 600;
}

.cat_paging .alignright {
    text-align: right;
    position: relative;
}

.cat_paging .alignright dd,
.cat_paging .alignright dt {
    padding-right: 2rem;
}

.cat_paging .alignleft dd,
.cat_paging .alignleft dt {
    padding-left: 2rem;
}

.cat_paging .alignleft {
    text-align: left;
    position: relative;
}

.cat_paging .alignright i,
.cat_paging .alignleft i {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.cat_paging .alignright i {
    right: 0;
}

.cat_paging .alignleft i {
    left: 0;
}

.page-template-page-home .newsTtl h4 {
    margin: 0 0 0 1.5rem;
}

/* カテゴリと日付を横に並べる */
.news-meta-area {
    display: flex;
    align-items: center;
    /* 上下中央を揃える */
    gap: 1rem;
    /* カテゴリと日付の間の距離 */
    flex-wrap: wrap;
    /* スマホで溢れたら折り返す */
}

/* 既存のカテゴリの見た目を維持しつつ調整 */
.cat-icon a {
    font-size: 1.4rem;
    color: #fff;
    display: inline-block;
}

/* 日付の見た目 */
.news-date {
    color: #888;
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

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

@media only screen and (max-width : 782px) {
    .cat_paging.mTop8rem {
        margin-top: 4rem !important;
    }
}

/*---------------------------------------------------------
NEWS SECTION: Modern Tab System (Gray Background Optimized)
---------------------------------------------------------*/

/* 1. 親コンテナ：タブ全体の土台と境界線 */
.tab_container {
    margin: 3.5rem 0 0 0;
    position: relative;
    /* タブとコンテンツを分けるメインの線（ニッシンブルー） */
    border-bottom: 2px solid #0E2884 !important;
    display: flow-root;
    /* float解除 */
}

/* 2. 各タブ：背景グレーに馴染むインデックス・デザイン */
.tab_item {
    width: calc(94% / 4);
    text-align: center;
    color: #888;
    /* 非選択時は控えめに */
    display: block;
    float: left;
    font-weight: 700;
    font-size: 1.4rem;
    cursor: pointer;

    /* 背景グレーより少しだけ濃い色にして「溝」を演出 */
    background-color: rgba(0, 0, 0, 0.05) !important;

    padding: 1.4rem 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* 上の角を丸めて「見出し」感を出す */

    /* 親のボーダーと重ねて隙間を消す魔法の数値 */
    margin-bottom: -2px !important;
    border-bottom: 2px solid transparent !important;
}

/* マージン微調整（現状維持） */
.tab_item2 {
    margin: 0 2% !important;
}

.tab_item3 {
    margin: 0 2% 0 0 !important;
}

/* 1. まず全タブにホバーを当てる */
.tab_item:hover {
    background-color: rgba(14, 40, 132, 0.1) !important;
    color: #0E2884 !important;
}

/* 2. ただし「チェックされているinputの直後のラベル」だけは、
      背景色を白（またはブルー）で固定してホバーを無効化する */
input[name="tab_item"]:checked + .tab_item:hover {
    background-color: #0E2884 !important;
    /* 現在位置の色をキープ */
    color: #ffffff !important;
    cursor: default;
    /* 選択済みなのでカーソルを戻す */
}

/* 3. 【選択中】純白で浮き出させ、青い下線で強調 */
input[name="tab_item"]:checked + .tab_item {
    color: #fff !important;
    background-color: #0E2884 !important;
    /* 背景グレーに対してパキッと白 */

    /* 左右と上に薄い影を入れて「浮き出し」を強調 */
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.08);

    /* 親の線と一体化させる青い線 */
    border-bottom: 2px solid #0E2884 !important;

    /* 物理的に1px浮かせる */
    transform: translateY(-1px);
    z-index: 2;
    position: relative;
}

/* 4. コンテンツエリア：ニュースリストが載る白い板 */
.tab_content {
    display: none;
    padding: 4.0rem 2.5rem !important;
    clear: both;

    /* 背景を白にしてグレー背景から完全に独立させる */
    background-color: #ffffff !important;

    /* 下側に広がる影で奥行きを出す */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

    overflow: hidden;
    vertical-align: top;
}

/* 切り替えロジック */
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content {
    display: block;
}

/* ラジオボタン自体は隠す */
input[name="tab_item"] {
    display: none !important;
}

.tab_content .secBtn {
    margin-top: 1rem !important;
}

.tab_content .linkBtn a {
    margin-top: 0 !important;
}

/*---------------------------------------------------------
main-top-contact
---------------------------------------------------------*/
.topContact {
    padding: 8rem 0;
}

.topContactBlock {
    background-image: url("images/topContactBg.png");
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
}

.flex_table {
    width: 75%;
    margin: 4rem auto;
    display: flex;
}

.flex_table .fa-phone {
    padding-right: 0.5rem;
}

.flex_table ul {
    flex-basis: calc(100% / 2);
    text-align: center;
}

.flex_table ul li:first-child {
    background: #F7F7F7;
    border: solid 1px #bbb;
    color: #333;
    padding: 0.5rem;
    font-weight: 600;
    border-bottom: none;
}

.flex_table ul li:last-child {
    background: #fff;
    border: solid 1px #bbb;
    padding: 1rem;
    background-color: #fff;
    font-size: 3.6rem;
    font-weight: 600;
}

.flex_table ul:first-child li {
    border-right: none;
}

.flex_table ul li:last-child span {
    display: block;
    font-size: 1.2rem;
    font-weight: normal;
}

@media screen and (max-width:1000px) {
    .flex_table {
        width: 90%;
        display: block;
    }

    .flex_table ul:first-child li {
        border-right: solid 1px #bbb;
    }

    .flex_table ul:first-child li:last-child {
        border-bottom: none;
    }

    .secBtn.linkBtn a {
        width: 35%;
        margin: 0 auto;
    }

    .itemWrap .secBtn.linkBtn a {
        width: 50%;
        margin: 0 auto;
    }
}

@media only screen and (max-width : 782px) {
    .itemWrap .secBtn.linkBtn a {
        width: 75%;
        margin: 0 auto;
    }

    .secBtn.linkBtn a {
        width: 65%;
        margin: 0 auto;
    }

    .heading10-second,
    .heading10-third {
        margin-top: 0;
    }
}

@media only screen and (max-width : 600px) {
    .itemWrap .secBtn.linkBtn a {
        width: 90%;
        margin: 0 auto;
    }

}

/*//////////////////////////////////////////////////////////
///archive_itemlist
/////////////////////////////////////////////////////////*/
.postProducts .archiveContents img {
    width: 100%;
    height: 30rem;
    object-fit: cover;
}

.postProducts .archiveContents .content-date {
    margin: 1.5rem 0 0 0;
}

.content-date span {
    display: block;
    margin-bottom: 1rem;
    overflow: hidden;
    /* はみ出したものを表示させない */
    white-space: nowrap;
    /* 文章を改行させない */
    text-overflow: ellipsis;
    /* はみ出した部分を省略し「・・・」で表示 */
    color: #fff;
}

.postProducts .postProducts .content-date span {
    width: 100%;
}

.postProducts .content-date span a {
    display: block;
    /* aタグをブロック要素にする */
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    /* spanの色を引き継ぐ */
    text-decoration: none;
}

/*---------------------------------------------------------
cat-link-list
---------------------------------------------------------*/
/*---------------------------------------------------------
cat-link-list (Integrated Frost Glass Design)
---------------------------------------------------------*/

/* 1. 全体コンテナ */
.catLinkBlock ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
    list-style: none;
    margin: 0;
}

/* 2. バナー土台 (li) */
.catLinkBlock ul li {
    width: 48%;
    /* 2列 */
    height: 20rem;
    position: relative;
    margin-bottom: 3rem;
    box-sizing: border-box;
    border: none !important;
    /* 古いグレー枠線を完全削除 */
    border-radius: 4px;
    /* 角丸 */
    overflow: hidden;
    /* フロストのはみ出し防止 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* 軽い浮き出し */
    background-size: cover;
    background-position: center;
    transition: filter 0.4s ease !important;
}

/* 折り返し時のマージン調整 */
.catLinkBlock ul li:nth-last-child(-n+2) {
    margin-bottom: 0;
}

/* 3. フロストガラス・テキストエリア (a) */
.catLinkBlock ul li a {
    position: absolute !important;
    bottom: 0;
    left: 0;
    width: 100%;
    display: block;
    box-sizing: border-box;

    /* ガラスの背景 */
    background: rgba(255, 255, 255, 0.7) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;

    /* テキスト装飾 */
    padding: 1.5rem 1rem 1.5rem 4rem !important;
    /* アイコン分の左余白 */
    color: #0E2884 !important;
    /* ニッシンブルー */
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-decoration: none;
    text-indent: 0 !important;
    /* 古いインデント設定をリセット */

    /* ガラスのエッジ */
    border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
    transition: all 0.4s ease !important;
}

/* 全面クリック判定用の擬似要素 */
.catLinkBlock ul li a::after {
    content: "";
    position: absolute;
    top: -20rem;
    /* aを突き抜けてli全体をカバー */
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

/* 4. アイコン (::before) */
.catLinkBlock li a::before {
    content: "\f138";
    font-family: fontawesome;
    font-weight: 400;
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.8rem;
    color: #0E2884;
    padding: 0 !important;
    transition: transform 0.3s ease !important;
}

/* 5. ホバー挙動 */
.catLinkBlock li.cat-item:hover {
    filter: brightness(1.1) !important;
    /* 画像を少し明るく */
}

.catLinkBlock li.cat-item:hover a {
    background: rgba(255, 255, 255, 0.85) !important;
    /* ガラスを白っぽく */
    color: #000 !important;
    /* 文字をパキッと */
}

.catLinkBlock li.cat-item:hover a::before {
    transform: translateY(-50%) translateX(3px);
    /* アイコンを右に微動 */
}

/* 6. 特殊パーツ非表示 */
.catLinkBlock .children,
.catLinkBlock:has(.cat-item-none),
.catLinkBlock .cat-item-47,
.catLinkBlock .cat-item-48 {
    display: none !important;
}

/* 7. レスポンシブ (スマホ対応) */
@media screen and (max-width: 782px) {
    .catLinkBlock ul li {
        width: 100% !important;
        /* 1列 */
        height: 15rem !important;
        margin-bottom: 2rem !important;
    }

    .catLinkBlock ul li:nth-last-child(-n+2) {
        margin-bottom: 2rem;
    }

    .catLinkBlock li:last-child {
        margin-bottom: 0 !important;
    }

    .catLinkBlock li a {
        font-size: 1.6rem !important;
        padding: 1.2rem 1rem 1.2rem 3.5rem !important;
    }
}

/* 8. セクション見出し (heading10) */
.heading10 {
    position: relative;
    padding-bottom: 1.5rem;
    font-size: 3.1rem;
    margin-bottom: 4rem;
    color: #0e2884;
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
    border-bottom: 3px solid #d1d1d1;
    /* ベースの下線 */
}

.heading10 span {
    position: relative;
    display: block;
}

.heading10 span::after {
    content: "";
    position: absolute;
    bottom: -1.8rem;
    /* 線に重ねる位置調整 */
    left: 0;
    width: 8rem;
    height: 3px;
    background: #0e2884;
    z-index: 2;
}

.heading10-second,
.heading10-third {
    margin-top: 6rem;
}

/*---------------------------------------------------------
cat-thum
---------------------------------------------------------*/

/*バナー画像の位置調整用
.catLinkBlock .cat-item-46 {
    background-position: 50% 50% !important;
}*/

.catLinkBlock .cat-item {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: rgba(255, 255, 255, 0);
    background-blend-mode: lighten;
}

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

    /*.catLinkBlock ul li {
		height: 15rem;
	}*/
}

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

    .catLinkBlock ul li,
    .catLinkBlock ul::after,
    .catLinkBlock ul::before {
        width: 100%;
    }

    .catLinkBlock ul li {
        height: 17rem;
    }

}

/*//////////////////////////////////////////////////////////
///single
/////////////////////////////////////////////////////////*/

.slider {
    opacity: 0;
    transition: opacity .1s linear;
}

.slider.slick-initialized {
    opacity: 1;
}

.slick-slider img {
    width: 100%;
}

.slick-track {
    margin: 0 !important;
}

/*---------------------------------------------------------
detail
---------------------------------------------------------*/
.col-3_optionParts .wp-block-group__inner-container,
.col-4_optionParts .wp-block-group__inner-container,
.picTxt-col5 .wp-block-group__inner-container,
.col-3-2_optionParts .wp-block-group__inner-container,
.picTxt-col5-3 .wp-block-group__inner-container {
    display: flex !important;
    flex-wrap: wrap !important;
    /* 折返し可 */
    justify-content: space-between !important;
}

.picTxt-col5 .picTxtBlock .wp-block-group__inner-container {
    display: block !important;
}

.col-3_optionParts .wp-block-group__inner-container div {
    width: 30%;
    flex-basis: inherit !important;
    margin-bottom: 3rem;
}

.col-3_optionParts .wp-block-group__inner-container div a,
.col-3-2_optionParts .wp-block-group__inner-container div a,
.col-4_optionParts .wp-block-group__inner-container div a {
    font-size: 1.8rem;
    font-weight: 600;
    text-decoration: none;
    color: #333;
    display: block;
    /*margin-top: 1rem;*/
}

/* 親要素の疑似要素 */
.col-3_optionParts .wp-block-group__inner-container::after {
    content: "";
    display: block;
    width: 30%;
    /* 子要素と同じ幅 */
}

.col-3_optionParts .wp-block-group__inner-container::before {
    content: "";
    display: block;
    width: 30%;
    /* 子要素と同じ幅 */
    order: 1;
    /* アイテムの並び順 */
}

.col-3-2_optionParts .wp-block-group__inner-container div {
    width: 30%;
    flex-basis: inherit !important;
    margin-bottom: 3rem;
}

.col-3-2_optionParts .wp-block-group__inner-container::after {
    content: "";
    display: block;
    width: 31%;
}

.col-3-2_optionParts .wp-block-group__inner-container::before {
    content: "";
    display: block;
    width: 31%;
    order: 1;
}

/* ==========================================================================
   5連ピクチャーテキストブロック (picTxt-col5) 最終版
   横gap: 2em / 下margin: 3rem
   1000px以下: 3列 / 782px以下: 2列
   ========================================================================== */

/* --- 1. 全体コンテナの設定 --- */
.picTxt-col5 {
    display: flow-root;
    padding-bottom: 3rem;
}

.picTxt-col5 > .wp-block-group__inner-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 2em !important;
    margin-bottom: -3rem !important;
    padding-bottom: 0.1px !important;
    /* 透明な壁 */
}

/* --- 2. 各アイテム共通 --- */
.picTxt-col5 > .wp-block-group__inner-container > .picTxtBlock {
    margin-top: 0 !important;
    display: flex;
    flex-direction: column;
}

/* 内部リセット */
.picTxt-col5 .picTxtBlock .wp-block-group__inner-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.picTxt-col5 .picTxtBlock p {
    margin: 1rem 0 0 0 !important;
}

.picTxt-col5 .picTxtBlock figure {
    margin: 0 !important;
    width: 100% !important;
}

.picTxt-col5 .picTxtBlock:not(:has(img)) {
    display: none !important;
}

/* ==========================================================================
   レスポンシブ制御
   ========================================================================== */

/* --- PC：5列並び (1001px以上) --- */
@media (min-width: 1001px) {
    .picTxt-col5 > .wp-block-group__inner-container > .picTxtBlock {
        /* 5列：(100% - 2em * 4個) / 5 */
        width: calc((100% - 8em) / 5) !important;
        flex-basis: calc((100% - 8em) / 5) !important;
    }

    .picTxt-col5 > .wp-block-group__inner-container > .picTxtBlock:nth-last-child(-n+5) {
        margin-bottom: 0 !important;
    }
}

/* --- タブレット：3列並び (1000px ～ 783px) --- */
@media (max-width: 1000px) and (min-width: 783px) {
    .picTxt-col5 > .wp-block-group__inner-container > .picTxtBlock {
        /* 3列：(100% - 2em * 2個) / 3 */
        width: calc((100% - 4em) / 3) !important;
        flex-basis: calc((100% - 4em) / 3) !important;
    }

    /* 最後の一行（最大3つ）の余白を消す */
    .picTxt-col5 > .wp-block-group__inner-container > .picTxtBlock:nth-last-child(-n+3) {
        margin-bottom: 0 !important;
    }
}

/* --- スマホ：2列並び (782px以下) --- */
@media (max-width: 782px) {
    .picTxt-col5 > .wp-block-group__inner-container > .picTxtBlock {
        /* 2列：(100% - 2em) / 2 */
        width: calc((100% - 2em) / 2) !important;
        flex-basis: calc((100% - 2em) / 2) !important;
    }

    /* 最後の一行（最大2つ）の余白を消す */
    .picTxt-col5 > .wp-block-group__inner-container > .picTxtBlock:nth-last-child(-n+2) {
        margin-bottom: 0 !important;
    }
}

/* =============================================
   1. 画像ギャラリー ver2 (figure直並び構造)
   ============================================= */
/* --- 1. 親コンテナ：WPの制限を解除してFlexboxを強制 --- */
.picTxt-col5_ver2 .wp-block-group__inner-container {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    /* 左詰め */
    max-width: none !important;
    /* WPの幅制限を解除 */
    margin-bottom: -3rem !important;
    /* 最終行の余白を底上げで消す */
}

/* --- 2. 各画像（figure）：幅と余白を固定 --- */
.picTxt-col5_ver2 .picTxtBlock {
    margin: 0 !important;
    margin-bottom: 3rem !important;
    /* 縦の隙間を死守 */
    flex-basis: auto !important;
}

/* --- 3. デバイスごとの挙動（計算済み） --- */

/* 【PC：5列】 */
@media (min-width: 1001px) {
    .picTxt-col5_ver2 .picTxtBlock {
        width: 18% !important;
        /* 隙間を考慮して18% */
        margin-right: 2.5% !important;
    }

    /* 5列の右端（5, 10...）のマージンを消す */
    .picTxt-col5_ver2 .picTxtBlock:nth-child(5n) {
        margin-right: 0 !important;
    }
}

/* 【タブレット：3列】 */
@media (max-width: 1000px) and (min-width: 783px) {
    .picTxt-col5_ver2 .picTxtBlock {
        width: 31% !important;
        margin-right: 3.5% !important;
    }

    /* 3列の右端のマージンを消す */
    .picTxt-col5_ver2 .picTxtBlock:nth-child(3n) {
        margin-right: 0 !important;
    }

    /* 端数対策：10枚目など「1個だけポツン」を非表示 */
    .picTxt-col5_ver2 .picTxtBlock:nth-child(3n+1):last-child {
        display: none !important;
    }
}

/* 【スマホ：2列】 */
@media (max-width: 782px) {
    .picTxt-col5_ver2 .picTxtBlock {
        width: 47% !important;
        margin-right: 6% !important;
    }

    .picTxt-col5_ver2 .picTxtBlock:nth-child(2n) {
        margin-right: 0 !important;
    }
}

/* --- 4. 余計なゴミ掃除 --- */
.picTxt-col5_ver2 .wp-block-group__inner-container::before,
.picTxt-col5_ver2 .wp-block-group__inner-container::after {
    display: none !important;
}

/* ==========================================================================
   ギャラリー：6列構成 (画像 + キャプション)
   --------------------------------------------------------------------------
   【構成】PC: 6列 / Tablet: 3列 / Mobile: 2列
   【特徴】ネガティブマージンによる最終行の余白相殺、
          キャプションの縦並び制御、WP標準の幅制限解除を含む
   ========================================================================== */

/* --- 1. 親：WPの幅制限と自動ギャップを完全リセット --- */
.col6_PicTxt .wp-block-group__inner-container {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    max-width: none !important;
    width: 100% !important;
    gap: 0 !important;
    /* これを0にしないと自前マージンと喧嘩する */
    margin-bottom: -3rem !important;
}

/* --- 2. 子：WPが勝手につけるマージンを上書き --- */
.col6_PicTxt figure.wp-block-image {
    /* クラスを重ねて強度を上げる */
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 3rem !important;
    flex-basis: auto !important;
}

/* --- 3. デバイスごとの「効かせる」数値設定 --- */

/* 【PC：6列】 1001px〜 */
@media (min-width: 1001px) {
    .col6_PicTxt figure.wp-block-image {
        width: 15% !important;
        /* 15% * 6 = 90% */
        margin-right: 2% !important;
        /* 2% * 5 = 10% 合計100% */
    }

    .col6_PicTxt figure.wp-block-image:nth-child(6n) {
        margin-right: 0 !important;
    }
}

/* 【タブレット：3列】 769px 〜 1000px */
@media (max-width: 1000px) and (min-width: 783px) {
    .col6_PicTxt figure.wp-block-image {
        width: 31% !important;
        margin-right: 3.5% !important;
    }

    .col6_PicTxt figure.wp-block-image:nth-child(3n) {
        margin-right: 0 !important;
    }
}

/* 【スマホ：2列】 〜 782px */
@media (max-width: 782px) {
    .col6_PicTxt figure.wp-block-image {
        width: 47% !important;
        margin-right: 6% !important;
    }

    .col6_PicTxt figure.wp-block-image:nth-child(2n) {
        margin-right: 0 !important;
    }
}

/* =============================================
   商品テーブル調整
   ============================================= */

.productTable img {
    display: inline-block;
    margin: 0 0.5rem 0 0;
}

.productTable {
    /*margin-bottom: 6rem !important;*/
}

.thumbnail-img {
    cursor: pointer;
}

.single h1 {
    margin: 1rem 0;
    font-weight: 600;
    font-size: 3.1rem;
    text-align: start;
    overflow-wrap: break-word;
}

.blogIncWrap a,
.archiveContents a {
    overflow-wrap: break-word;
}

.article-tag {
    margin: 0 0 4rem 0;
}

.archiveContents h2,
.catExLeft h2 {
    text-align: start;
}

h2.wp-block-heading {
    margin: 0 0 1.5rem 0;
    font-size: 3.0rem !important;
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    /* 明朝は太めにすると格好いいです */
    letter-spacing: 0.05em;
    /* 明朝の見出しは少し広げると高級感が出ます */
    color: rgba(34, 42, 132, 1.0);
}

h3.wp-block-heading {
    background-color: #ebf7fe !important;
    padding: 1.2rem 1.5rem;
    margin: 4rem 0 2rem 0;
    font-size: 2.4rem !important;
    font-weight: 600;
}

h4.wp-block-heading {
    font-size: 2.4rem;
    color: rgba(34, 42, 132, 1.0);
    font-weight: 600;
    margin: 0 0 1rem 0;
    border-bottom: 5px double rgba(34, 42, 132, 1.0);
}

h5.wp-block-heading {
    font-size: 2.1rem;
    margin: 2rem 0;
    color: rgba(34, 42, 132, 1.0);
    font-weight: 600;
    border-bottom: 1px solid rgba(34, 42, 132, 1.0);
}

.wp-block-column .internal_link,
.wp-element-caption {
    font-size: 1.8rem;
    margin: 1rem 0 0 0 !important;
    font-weight: 600;
    color: #333 !important;
    text-decoration: none !important;
    display: block;
    text-align: justify !important;
}

.blogIncMain {
    margin-bottom: 0.5rem !important;
}

.blogIncMain img {
    width: 100% !important;
}

.single .wp-block-column:empty {
    margin: 0 !important;
}

:where(.wp-block-columns.is-layout-flex.is-not-stacked-on-mobile) {
    gap: 2em;
}

.productPicture .has-small-font-size,
.productSlider .has-small-font-size {
    text-align: start !important;
}

.productPicture .wp-block-columns,
.productSlider .wp-block-columns {
    /*margin: 2rem 0 0 0;*/
    margin: 0 !important;
}

:where(.wp-block-columns.is-layout-flex.cal-gap0) {
    gap: 0em;
}

.productPicture .flow_4col-2col,
.productSlider .flow_4col-2col,
.productPicture .picTxt-col5-3,
.productSlider .picTxt-col5-3 {
    margin: 3rem 0 0 0;
}

.wp-block-column .wp-block-buttons:nth-child(n+2) {
    margin: 1.5rem 0;
}

.wp-block-table {
    margin: 2.5rem 0 4rem 0;
}

.mediaTxt-1col .wp-block-media-text__content {
    padding-right: 0;
}

.wp-block-columns {
    margin: 3rem 0;
}

.wp-block-table table,
.wp-block-table tr,
.wp-block-table td {
    border: 1px solid #999;
    padding: 10px;
}

.wp-block-table.productTable tr td:first-child {
    background-color: #EAEAEA;
    min-width: 20%;
}

.wp-block-table .has-fixed-layout th {
    background-color: #EAEAEA;
}

.wp-block-table thead {
    border-bottom: none !important;
}

.sizeTable .wp-block-table tr td:nth-child(2) {
    background-color: #EAEAEA;
}

.sizeTable .wp-block-table tr:nth-child(3) td:nth-child(2),
.sizeTable .wp-block-table tr:nth-child(5) td:nth-child(2) {
    background: none;
}

.kadouKeiseiTable tr td img {
    margin: auto;
}

.kadouKeiseiTable tr {
    text-align: center;
}

.kadouKeiseiTable .wp-block-table tr td:first-child {
    background-color: inherit;
}

.kadouKeiseiTable .wp-block-table tr:nth-child(2) td:first-child {
    background-color: #EAEAEA !important;
}

.kadouKeiseiTable .wp-block-table {
    margin-bottom: 0;
}

.single .articleContents .catalogBtn a,
.single .articleContents .productLinkBtn a {
    text-decoration: none;
    font-size: 1.4rem !important;
}

.single .articleContents .catalogBtn a:before {
    content: "\f1c1";
    font-family: fontawesome;
    margin-right: 10px;
    color: #fff;
}

.single .articleContents .productLinkBtn a:before {
    content: "\f08e";
    font-family: fontawesome;
    margin-right: 10px;
    color: #fff;
}

.wp-container-2.wp-container-2.catalogBtn,
.wp-container-2.wp-container-2.productLinkBtn,
.single .articleContents .catalogBtn,
.single .articleContents .productLinkBtn {
    justify-content: flex-end !important;
}

.pdf a {
    display: flex;
    justify-content: flex-end;
    margin: 1.5rem 0 0 0;
}

.wp-block-image img {
    width: 100%;
    height: auto !important;
}

.wp-block-image:not(.is-resized) img {
    width: 100% !important;
}

.blog-card-title {
    margin: 15px 0 10px 0;
}

.blog-card-thumbnail img {
    width: 100%;
}

.article-tag a {
    text-decoration: underline;
    padding: 0 5px 0 0;
    color: #777;
}

.article-tag a::before {
    content: "#";
}

.tableTags + br,
.specification + br {
    display: block;
    content: "";
    height: 1rem;
}

.wp-block-table table,
.wp-block-table tr,
.wp-block-table td {
    padding: 1.5rem;
}

.GroupPattern_1 {
    padding-left: 50%;
}

.GroupPattern_2 {
    padding-left: 67.4%;
}

.col2-33 {
    padding-left: 33.33%;
    margin-top: 3rem !important;
}

.col3-18 {
    padding-left: 18%;
    margin-top: 3rem !important;
}

.brushingFlow .GroupPattern_1 {
    padding-left: 33.33%;
}

.brushingFlowLeft .GroupPattern_1 {
    padding-left: 0;
    padding-right: 33.33%;
}

:where(.wp-block-columns.GroupPattern_1),
:where(.wp-block-columns.GroupPattern_2) {
    gap: 1em;
}

.single .wp-element-caption {
    font-size: 1.5rem;
    font-weight: 400;
}

.specificationTable th img {
    display: inline-block;
}

.specificationTable td {
    padding: 0.5rem 1.5rem;
}

.productFlow .wp-block-media-text .wp-block-media-text__content {
    align-self: auto;
}

.productFlow .wp-block-media-text .wp-block-media-text__content {
    padding: 0 0 0 1.5rem;
}

.productPicture .has-text-align-right {
    text-align: right !important;
}

.invictusGroup .wp-block-media-text__content,
.invictusGroup .wp-block-media-text__media {
    align-self: auto;
}

.invictusGroup .wp-block-media-text__content p strong {
    font-size: 1.9rem;
    color: #0e2884;
    font-weight: 600;
}

.invictusGroup .wp-block-media-text__content p strong + br {
    display: block;
    content: "";
    height: 1.5rem;
}

.single article .specification {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.single article .specification li {
    padding: 0.5rem 0.7rem;
    border: 1px solid #bbb;
}

.wp-block-flexible-table-block-table td img {
    display: block;
    margin: auto;
}

.flow_4col-2col .wp-block-columns {
    margin: 0;
}

@media screen and (max-width:1000px) {
    .wp-block-group .GroupPattern_1 {
        padding-left: 35%;
    }

    .brushingFlow .GroupPattern_1 {
        padding-left: 13.33%;
    }

    .brushingFlowLeft .GroupPattern_1 {
        padding-left: 0;
        padding-right: 13.33;
    }

    .col-3_optionParts .wp-block-group__inner-container div,
    .col-3_optionParts .wp-block-group__inner-container::after,
    .col-3_optionParts .wp-block-group__inner-container::before {
        gap: 2rem !important;
        width: 48%;
    }

    .col-3-2_optionParts .wp-block-group__inner-container div,
    .col-3-2_optionParts .wp-block-group__inner-container::after,
    .col-3-2_optionParts .wp-block-group__inner-container::before {
        width: 48%;
    }

    .picTxt-col5 .wp-block-group__inner-container div,
    .picTxt-col5 .wp-block-group__inner-container::after,
    .picTxt-col5 .wp-block-group__inner-container::before {
        width: 31%;
    }

    .btn65 .wp-block-button__width-50 {
        width: calc(67% - var(--wp--style--block-gap, .5em)*.5) !important;
    }

    :where(.wp-block-columns.is-layout-flex.is-not-stacked-on-mobile) {
        gap: 1em;
    }
}

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

    .wp-block-group .GroupPattern_1 .wp-block-column,
    .wp-block-group .GroupPattern_2 .wp-block-column {
        flex-basis: 0 !important;
    }

    .wp-block-group .GroupPattern_1 {
        padding-left: 20%;
    }

    .wp-block-group .GroupPattern_2 {
        padding-left: 30%;
    }

    .brushingFlow .GroupPattern_1 {
        padding-left: 0;
    }

    .brushingFlowLeft .GroupPattern_1 {
        padding-left: 0;
        padding-right: 0;
    }

    /* .col-3_optionParts .wp-block-group__inner-container div,
    .col-3_optionParts .wp-block-group__inner-container::after,
    .col-3_optionParts .wp-block-group__inner-container::before {
        width: 100%;
    }*/

    .picTxt-col5 .wp-block-group__inner-container div,
    .picTxt-col5 .wp-block-group__inner-container::after,
    .picTxt-col5 .wp-block-group__inner-container::before {
        width: 47%;
    }

    .picTxt-col5-3 .wp-block-group__inner-container figure,
    .picTxt-col5-3 .wp-block-group__inner-container::after,
    .picTxt-col5-3 .wp-block-group__inner-container::before {
        width: 31% !important;
    }

    .teacherBlock .wp-block-image img {
        width: 50% !important;
        margin: 0 auto;
    }

    .flow_4col-2col .wp-block-columns {
        margin: 0;
    }

    .teacherBlock .wp-block-image .wp-element-caption {
        text-align: center !important;
    }

    .col2-33 {
        padding-left: 0;
    }

    .col3-18 {
        padding-left: 0;
    }

    .picTxtBlock .wp-block-group__inner-container:empty,
    .picTxtBlock:has(.wp-block-group__inner-container:empty),
    .picTxtBlock:has(.wp-block-group__inner-container:empty) {
        height: 0;
        margin: 0;
    }

    .btnWrap .wp-block-columns {
        margin: 0;
    }

    .btn55 .wp-block-button__width-50 {
        width: calc(55% - var(--wp--style--block-gap, .5em)*.5) !important;
    }

    .wp-block-columns.col3_col2-col6 .wp-block-columns {
        margin: 0;
    }

    .col-2-pL30 {
        padding-left: 30%;
    }

    .mediaTxt-1col .wp-block-media-text__content {
        padding: 2rem 0 0 0;
    }
}

@media only screen and (max-width : 782px) {
    .is-not-stacked-on-mobile {
        padding-left: 0;
    }

    .sizeTable img {
        width: 70% !important;
        margin: 0 auto;
    }

    :where(.productFlow .wp-block-columns.is-layout-flex.is-not-stacked-on-mobile) {
        gap: 2em;
    }

    .wp-container-2.wp-container-2.catalogBtn,
    .wp-container-2.wp-container-2.productLinkBtn,
    .single .articleContents .catalogBtn,
    .single .articleContents .productLinkBtn {
        justify-content: flex-end !important;
    }

    .single .wp-block-column:empty {
        height: 0px;
    }

    .syoureiBlock .wp-block-columns > .wp-block-column:empty:nth-last-child(n+2),
    .syoureiBlock .wp-block-columns > .wp-block-column:empty:nth-last-child(n+2) ~ .wp-block-column:empty {
        display: none;
    }

    .productFlow .wp-block-column:empty,
    .productPicture .wp-block-column:empty {
        display: block;
    }

    .invictusGroup .wp-block-columns.is-layout-flex.is-not-stacked-on-mobile {
        gap: 2em;
    }
}

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

    .invictusGroup .wp-block-media-text__content,
    .productFlow .wp-block-media-text .wp-block-media-text__content {
        padding: 1.5rem 0 0 0;
    }
}

.productTable code {
    line-height: 1.8;
}

.single .productPicture p.ProductAttentionTxt,
.single .productSlider p.ProductAttentionTxt {
    margin-bottom: 2rem !important;
}

.col-2_bigPicBloc .wp-block-column p:last-child,
.col-3_bigPicBloc .wp-block-column p:last-child {
    margin-bottom: 0;
}

/* --- 2. スマホ: 782px以下 (1列) --- */
@media (max-width: 782px) {

    /* 【空対策】画像(img)が含まれないカラムを完全に非表示にする */
    .col-2_bigPicBloc > .wp-block-column:not(:has(img)),
    .col-3_bigPicBloc > .wp-block-column:not(:has(img)) {
        display: none !important;
    }
}

@media (min-width: 783px) {

    /* カラム内の右側テキスト、最後の段落だけ下の余白をゼロにする */
    .col2-Picture_TXT .wp-block-column p:last-child {
        margin-bottom: 0;
    }
}

.col2-3PicTxtBloc .wp-block-columns:nth-last-child(-n+2),
.col2-2PicTxtBloc .wp-block-columns:nth-last-child(-n+2) {
    margin-bottom: 0;
}

.col2-3PicTxtBloc .wp-block-columns p,
.col2-2PicTxtBloc .wp-block-columns p {
    margin-top: 1rem;
}

.col2-3PicTxtBloc .wp-block-columns p,
.col2-2PicTxtBloc .wp-block-columns p {
    margin-bottom: 0 !important;
}

@media (max-width: 782px) {

    .col2-3PicTxtBloc .wp-block-columns:nth-last-child(-n+2),
    .col2-2PicTxtBloc .wp-block-columns:nth-last-child(-n+2) {
        margin-bottom: 1rem;
    }

    .col2-3PicTxtBloc .wp-block-columns:last-child,
    .col2-2PicTxtBloc .wp-block-columns:last-child,
    .col2-3PicTxtBloc .wp-block-columns:last-child p,
    .col2-2PicTxtBloc .wp-block-columns:last-child p {
        margin-bottom: 0 !important;
    }

    .col2-3PicTxtBloc .wp-block-columns p,
    .col2-2PicTxtBloc .wp-block-columns p {
        margin-top: 0;
    }

    /* 2. 【ここが重要】「行(columns)」の中に1つもコンテンツがない場合だけ、その行を消す */
    .col2-2PicTxtBloc .wp-block-columns:not(:has(h4, figure, img, p)),
    .col2-3PicTxtBloc .wp-block-columns:not(:has(h4, figure, img, p)) {
        display: none !important;
    }

    /* 【空対策】h4見出し も 画像 も含まないカラムを完全に消す */
    .col2-3PicTxtBloc > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column:not(:has(h4)):not(:has(img)) {
        display: none !important;
    }
}

/* ==========================================================================
   多重カラム ver2：完全リセット（空消しはスマホのみ）
   ========================================================================== */

/* --- PC・共通：余白のリセットと3remルール --- */
.col2-3PicTxtBloc_ver2 .wp-block-group__inner-container,
.col2-2PicTxtBloc_ver2 .wp-block-group__inner-container,
.pic2-col3TxtBloc_ver2 .wp-block-group__inner-container {
    margin-bottom: -3rem !important;
    /* 【重要】相殺を防ぐための「透明な壁」を追加 */
    padding-bottom: 0.1px !important;
    overflow: hidden !important;
    /* これを入れるとマイナスマージンの計算が安定します */
}

.articleContents .col2-3PicTxtBloc_ver2 h4.wp-block-heading,
.articleContents .col2-2PicTxtBloc_ver2 h4.wp-block-heading {
    margin-top: 0 !important;
}

.articleContents .col2-3PicTxtBloc_ver2 p,
.articleContents .col2-2PicTxtBloc_ver2 p {
    margin-bottom: 0 !important;
    margin-top: 1rem;
}

.articleContents .col2-3PicTxtBloc_ver2 .wp-block-columns,
.articleContents .col2-2PicTxtBloc_ver2 .wp-block-columns,
.articleContents .pic2-col3TxtBloc_ver2 .wp-block-columns {
    margin-top: 0 !important;
    margin-bottom: 3rem !important;
}

.articleContents .col2-3PicTxtBloc_ver2 .is-not-stacked-on-mobile,
.articleContents .col2-2PicTxtBloc_ver2 .is-not-stacked-on-mobile,
.articleContents .pic2-col3TxtBloc_ver2 .is-not-stacked-on-mobile {
    margin-bottom: 0 !important;
}

.articleContents .pic2-col3TxtBloc_ver2 p {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #333 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
    padding: 0 0.2rem !important;
    word-break: break-word;
}

.articleContents .pic2-col3TxtBloc_ver2 {
    margin-top: 4rem;
}

/* --- スマホ・タブレット（782px以下） --- */
@media (max-width: 782px) {

    /* 1. 【強化】空コンテンツを物理的に消す */
    /* 外側のカラムだけでなく、内側の入れ子カラムもすべてチェック */
    .col2-3PicTxtBloc_ver2 .wp-block-columns:not(:has(h4, figure, img, p)),
    .col2-3PicTxtBloc_ver2 .wp-block-column:not(:has(h4, figure, img, p)),
    .col2-2PicTxtBloc_ver2 .wp-block-columns:not(:has(h4, figure, img, p)),
    .col2-2PicTxtBloc_ver2 .wp-block-column:not(:has(h4, figure, img, p)) {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* --- 最終行の空のカラム対策 --- */

    /* 2. 3カラム構造の中で、内側の2連画像枠が両方空の場合、その列を非表示にする */
    .pic2-col3TxtBloc_ver2 .wp-block-column:has(> .wp-block-columns .wp-block-column:empty:first-child:last-child),
    .pic2-col3TxtBloc_ver2 .wp-block-column:has(> .wp-block-columns .wp-block-column:empty + .wp-block-column:empty) {
        display: none !important;
    }

    .articleContents .pic2-col3TxtBloc_ver2 .wp-block-columns.is-not-stacked-on-mobile {
        gap: 2em !important;
    }
}

.flow_4col-2col .wp-block-column p {
    margin: 1rem 0 0 0 !important;
}

.pic2-col3TxtBloc .wp-block-columns {
    margin: 0 !important;
    row-gap: 0 !important;
    /* 縦方向の隙間をピンポイントで0に */
}

.pic2-col3TxtBloc p {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #333 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
    padding: 0 0.2rem !important;
    word-break: break-word;
}

/* 2. 一番最初の行だけに margintop 3rem をつける */
.pic2-col3TxtBloc > .wp-block-group__inner-container > .wp-block-columns:first-child {
    margin-top: 5rem !important;
}

/* 3. 2行目以降の「行の間」に margin 3rem を作る */
/* 「columnsの直後にcolumnsがある場合」にだけ適用されるので、最後には効きません */
.pic2-col3TxtBloc .wp-block-columns + .wp-block-columns {
    margin-top: 5rem !important;
}

.pic2-col3TxtBloc .wp-element-caption {
    min-height: inherit !important;
}

@media (max-width: 782px) {

    /* 1. 中身が空のカラムは「透明」にするが「場所」は確保する（レイアウト崩れ防止） */
    /* ただし、margin-bottomだけは消して余計な隙間を防ぐ */
    .pic2-col3TxtBloc .wp-block-column:not(:has(img, p, figure, h4)) {
        margin-bottom: 0 !important;
        min-height: 1px;
        /* 完全に消さないために最低限の高さを保持 */
    }

    /* 2. 【ここが重要】「行(columns)」の中に1つもコンテンツがない場合だけ、その行を消す */
    .pic2-col3TxtBloc .wp-block-columns:not(:has(img, p, figure, h4)) {
        display: none !important;
    }

    .pic2-col3TxtBloc .wp-block-columns + .wp-block-columns {
        margin-top: 0 !important;
    }

    .pic2-col3TxtBloc .wp-block-column {
        margin-bottom: 2.5rem !important;
        /* 次の項目（GBR→Sinus Liftなど）との間隔 */
    }

    .pic2-col3TxtBloc p {
        position: relative;
        top: -2.5rem;
    }

    /* 2. 一番外側の「行（columns）」の中にある、最後の「カラム」を指定 */
    /* これが Scaling や Nasal Cavity の入った最後のカタマリ */
    .pic2-col3TxtBloc > .wp-block-group__inner-container > .wp-block-columns:last-child > .wp-block-column:last-child {
        margin-bottom: 0 !important;
    }

    .pic2-col3TxtBloc > .wp-block-group__inner-container > .wp-block-columns:last-child > .wp-block-column:last-child p {
        margin-bottom: 0 !important;
    }
}

/*---------------------------------------------------------
cat-icon
---------------------------------------------------------*/
.single-post .cat-icon {
    margin: 0 0.75rem 0 0;
}

.cat-icon a {
    color: #fff;
    font-size: 1.3rem;
}

.cat-icon {
    border: solid 1px #333;
    padding: 0.15rem 1.2rem;
    /* 枠線指定 */
    background-color: #333;
    /* 背景色指定 */
    border-radius: 25px;
    min-width: 90px;
    text-align: center;
}

/*Productsアイコンは非表示*/
.st-catid6 {
    display: none !important;
}

/*【親】Dental Training Products */
.st-catid7 {
    border: solid 1px #ac5a84;
    background-color: #ac5a84;
}

/*【子】Dental Simulator (一番濃い：サイトを引き締めるダークグレー) */
.st-catid9 {
    border: solid 1px #3d4042;
    background-color: #3d4042;
}

/*【孫】Conventional Dental Training Simulator (スタート地点：これでも白文字がしっかり見える) */
.st-catid15 {
    border: solid 1px #b1b5b8;
    background-color: #b1b5b8;
}

/*【孫】Interactive Humanoid Patient Simulator (一段階深く) */
.st-catid16 {
    border: solid 1px #969a9e;
    background-color: #969a9e;
}

/*【孫】Pediatric Patient Humanoid Simulator (中間：落ち着いたトーン) */
.st-catid17 {
    border: solid 1px #7c8083;
    background-color: #7c8083;
}

/*【孫】Geriatric Patient Care Dental Simulator (深みのあるグレー) */
.st-catid18 {
    border: solid 1px #63676a;
    background-color: #63676a;
}

/*【孫】Haptic 3D Virtual Reality Dental Trainer (「子」に繋がる濃色) */
.st-catid19 {
    border: solid 1px #4e5255;
    background-color: #4e5255;
}

/*【子】Prosthetic Dentistry (新基準色：より深く重厚に) */
.st-catid10 {
    border: solid 1px #70675b;
    background-color: #70675b;
}

/*【孫】Crown & Bridge Area (スタート地点：温かみのあるベージュグレー) */
.st-catid20 {
    border: solid 1px #a7a29b;
    background-color: #a7a29b;
}

/*【孫】Partial Denture Restorative Area */
.st-catid21 {
    border: solid 1px #9c948b;
    background-color: #9c948b;
}

/*【孫】Implant Area */
.st-catid22 {
    border: solid 1px #91877b;
    background-color: #91877b;
}

/*【孫】Edentulous Jaw Area */
.st-catid23 {
    border: solid 1px #867a6b;
    background-color: #867a6b;
}

/*【孫】Stomatognathic Function Area (「子」に最も近い濃色) */
.st-catid24 {
    border: solid 1px #7b6f60;
    background-color: #7b6f60;
}

/*【子】Conservative Dentistry (基準色：#778697) */
.st-catid11 {
    border: solid 1px #778697;
    background-color: #778697;
}

/*【孫】Operative Area (白抜きが映える一歩手前の明るさ) */
.st-catid25 {
    border: solid 1px #8a97a5;
    background-color: #8a97a5;
}

/*【孫】Endodontics Area (最も明るいが、白文字の視認性を確保したライン) */
.st-catid26 {
    border: solid 1px #9da8b3;
    background-color: #9da8b3;
}

/*【子】Periodontal Areas (基準色：#8c7e88) */
.st-catid12 {
    border: solid 1px #8c7e88;
    background-color: #8c7e88;
}

/*【孫】Scaling, Root Planing Area (白抜きが映える一歩手前の明るさ) */
.st-catid27 {
    border: solid 1px #9c9099;
    background-color: #9c9099;
}

/*【孫】Periodontal Surgery Area (中間色) */
.st-catid28 {
    border: solid 1px #aca2aa;
    background-color: #aca2aa;
}

/*【孫】Plaque Control Area (最も明るいが、白文字がしっかり読めるライン) */
.st-catid29 {
    border: solid 1px #bdb5bc;
    background-color: #bdb5bc;
}

/* ==========================================================================
   【子】各専門エリア（Dental Training Productsの直下）
   ========================================================================== */

/* --- Oral Surgery Area グループ --- */
.st-catid30 {
    border: solid 1px #6d8674;
    background-color: #6d8674;
}

/* 【孫】Oral Surgery Area の直下に入る3つの新しい孫カテゴリー */
.st-catid167 {
    border: solid 1px #748d7b;
    background-color: #748d7b;
}
.st-catid166 {
    border: solid 1px #7c9582;
    background-color: #7c9582;
}
.st-catid165 {
    border: solid 1px #849d8a;
    background-color: #849d8a;
}

/*【子】Anesthesia Area */
.st-catid31 {
    border: solid 1px #7e9484;
    background-color: #7e9484;
}

/*【子】Radiography Area */
.st-catid32 {
    border: solid 1px #8fa394;
    background-color: #8fa394;
}

/*【子} Orthodontics Area */
.st-catid33 {
    border: solid 1px #a0b2a5;
    background-color: #a0b2a5;
}

/*【子】Pediatric Area */
.st-catid34 {
    border: solid 1px #a4b5a8;
    background-color: #a4b5a8;
}

/* 【子】Tooth Anatomy Area（孫から子へ昇格：オリーブ系の美しいアクセント） */
.st-catid36 {
    border: solid 1px #78906c;
    background-color: #78906c;
}

/*【孫】Gifts Area (最も明るい：白抜き文字の可読性を保ったライトオリーブ) */
.st-catid37 {
    border: solid 1px #8fa385;
    background-color: #8fa385;
}

/*【親】Patient Education Models */
.st-catid8 {
    border: solid 1px #006E69;
    background-color: #006E69;
}

/*【子】TOOTH DISEASE (TDS) */
.st-catid38 {
    border: solid 1px #8da1b9;
    background-color: #8da1b9;
}

/*【子】PROSTHODONTICS (PRO) */
.st-catid39 {
    border: solid 1px #bca886;
    background-color: #bca886;
}

/*【子】ENDODONTICS (END) */
.st-catid40 {
    border: solid 1px #b091a5;
    background-color: #b091a5;
}

/*【子】IMPLANTS (IMP) */
.st-catid41 {
    border: solid 1px #22a0b1;
    background-color: #22a0b1;
}

/*【子】PERIODONTICS (PER) */
.st-catid42 {
    border: solid 1px #d17d91;
    background-color: #d17d91;
}

/*【子】ORTHODONTICS (ORT) */
.st-catid43 {
    border: solid 1px #9184b3;
    background-color: #9184b3;
}

/*【子】PEDIATRIC DENTISTRY (PDI) */
.st-catid44 {
    border: solid 1px #8fb88d;
    background-color: #8fb88d;
}

/*【子】PREVENTION (STP) */
.st-catid45 {
    border: solid 1px #4ea0d6;
    background-color: #4ea0d6;
}

/*【子】TOOTH ANATOMY (ANA) */
.st-catid46 {
    border: solid 1px #7fa19a;
    background-color: #7fa19a;
}

/*【親】Option Parts & Replacement Parts */
.st-catid47,
.st-catid48 {
    border: solid 1px #0e2884;
    background-color: #0e2884;
}

.single article .thumbnail {
    background-color: #F7F7F7;
}

.slick-track .thumbnail-img {
    padding: 0 1px 0 0;
}

.slick-track .thumbnail-img:last-child {
    padding: 0;
}

.single article .tableTags {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.single article .tableTags li {}

.single article .tableTags a {
    color: #333 !important;
    text-decoration: none;
    display: block;
    background-color: #F2F2F2;
    padding: 0.5rem 0.7rem;
}

.single .breadcrumb-area {
    margin: 120px 0 7rem 0;
}

.single article p {
    margin-bottom: 2rem;
}

.single article .content-date span {
    display: inline-block;
    margin-bottom: 0;
}

.single .articleContents a {
    text-decoration: underline;
    color: #0E2884;

}

.single .articleContents .SubCatchphrase {
    margin-bottom: 2rem !important;
}

/* プロダクトスライダー右側カラム内の、最後の要素が SubCatchphrase の場合にマージンを消す */
.productSlider .wp-block-column p.SubCatchphrase:last-child {
    margin-bottom: 0 !important;
}

@media screen and (max-width:1000px) {
    .single .breadcrumb-area {
        margin: 110px 0 4rem 0;
    }
}


.articleContents h5 {
    text-transform: uppercase !important;
    font-size: 1.8rem;
}

/* --- タブボタンの整形（rem統一 & 下線消去） --- */
.tab-button-area .wp-block-button__link {
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0.1rem solid #ddd !important;
    /* 1pxをrem換算（環境により微調整） */
    background-color: #ffffff !important;
    color: #333333 !important;
    padding: 0.6rem 2.5rem !important;
    /* paddingをremに */
    font-weight: bold !important;
    text-decoration: none !important;
    /* 下線を消す */
    transition: background-color 0.2s ease !important;
}

.tab-button-area .wp-block-button__link:hover {
    background-color: #ffffff !important;
}

/* 選択中のボタン */
.btn-tab-upper.is-active .wp-block-button__link,
.btn-tab-lower.is-active .wp-block-button__link {
    background-color: #0e2884 !important;
    color: #ffffff !important;
    border-color: #0e2884 !important;
    text-decoration: none !important;
}

/* --- コンテンツエリア --- */
.tab-contents {
    display: none !important;
    border: 0.1rem solid #dddddd !important;
    padding: 2.0rem !important;
    /* paddingをremに */
    margin-top: -0.1rem !important;
    /* 枠線の重なり */
}

.tab-contents .JawListPartsNum img {
    display: block;
    margin: 2rem 0;
}

.custom-tabsColor .UpperJawList {
    background-color: #D9E8E8;
}

.custom-tabsColor .LowerJawList {
    background-color: #E6D9D9;
}

.UpperJawList .wp-block-columns.is-not-stacked-on-mobile:has(.JawListPartsNum):last-child {
    border-bottom: 1px solid #009999;
    margin: 0 0 2rem 0 !important;
}

.LowerJawList .wp-block-columns.is-not-stacked-on-mobile:has(.JawListPartsNum):last-child {
    border-bottom: 1px solid #CF6661;
    margin: 0 0 2rem 0 !important;
}

.custom-tabsColor .UpperJawList .wp-block-image:last-child,
.custom-tabsColor .LowerJawList .wp-block-image:last-child {
    border-bottom: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 782px) {

    /* タブコンテンツ内の、完全に空のカラムを物理的に消す */
    .custom-tabs .tab-contents .wp-block-columns > .wp-block-column:empty {
        display: none !important;
    }
}

.custom-tabs .wp-block-columns {
    margin: 0 !important;
}

/* ふわっと表示 */
@keyframes tabFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.tab-contents.is-active {
    display: flex !important;
    animation: tabFadeIn 0.4s ease-out forwards;
}

/* --- 型番（DefectNum）の調整 --- */
.DefectNum strong {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #333333;
    color: #ffffff;
    min-width: 4.5rem;
    /* remに統一 */
    height: 2.2rem;
    margin-right: 1.0rem;
    font-size: 1.1rem;
    border-radius: 0.2rem;
    line-height: 1;
}

/* 型番リンクも下線を消す */
.DefectNum a {
    text-decoration: none !important;
    color: inherit;
}

.articleContents .custom-tabsColor h4.wp-block-heading {
    border-bottom: 1px solid #bbb;
    margin-top: 0 !important;
}

.custom-tabsColor.ToothModelBloc .LowerJawList .wp-block-image {
    border-bottom: 1px solid #CF6661;
    padding: 0 0 1rem 0;
    margin: 0 0 1rem 0 !important;
}

.custom-tabsColor.ToothModelBloc .UpperJawList .wp-block-image {
    border-bottom: 1px solid #009999;
    padding: 0 0 1rem 0;
    margin: 0 0 1rem 0 !important;
}

/* ToothModelBloc の直後にある p タグの余白設定 */
.articleContents .ToothModelBloc + p {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}

/*//////////////////////////////////////////////////////////
///search ver3
/////////////////////////////////////////////////////////*/

/* 全体を囲うコンテナ */
#search-filter-wrapper {
    margin: 3.5rem 0 8rem 0;
}

/* 余計なカテゴリを非表示 */
/*
label[for="search-filter-input-undefined-1-search-filter-input-undefined-7-undefined"],
label[for="search-filter-input-undefined-0-search-filter-input-undefined-7-undefined"],
label[for="search-filter-input-undefined-1-search-filter-input-undefined-6-undefined"],
label[for="search-filter-input-undefined-0-search-filter-input-undefined-6-undefined"],
label[for="search-filter-input-undefined-2-search-filter-input-undefined-26-undefined"],
label[for="search-filter-input-undefined-1-search-filter-input-undefined-26-undefined"],
label[for="search-filter-input-undefined-2-search-filter-input-undefined-25-undefined"],
label[for="search-filter-input-undefined-1-search-filter-input-undefined-25-undefined"],
label[for="search-filter-input-undefined-3-search-filter-input-undefined-40-undefined"],
label[for="search-filter-input-undefined-3-search-filter-input-undefined-156-undefined"]{
    display: none!important;
}*/

/* 子要素のグループ（role="group"）を持っている親の input と label を非表示 */
.search-filter-input-checkbox:has(> [role="group"]) > input,
.search-filter-input-checkbox:has(> [role="group"]) > label,
.search-filter-input-checkbox:has(> .search-filter-input-group) > input,
.search-filter-input-checkbox:has(> .search-filter-input-group) > label {
    display: none !important;
}

/* 親要素：gapを消してmarginで制御できるようにする */
fieldset.search-filter-input-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    border: none !important;
}

/* 各項目の塊：ここで余白を作る */
div.search-filter-input-checkbox {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
}

/* 最後の項目の右余白は不要ならリセット（念のため） */
div.search-filter-input-checkbox:last-child {
    margin-right: 0 !important;
}

/* カウント(0)の見た目 */
.search-filter-input-checkbox__count {
    margin-left: 5px;
    color: #999;
    font-size: 0.85em;
}

/* ボーダー制御 */
.search-filter-input-group .search-filter-input-checkbox {
    display: inline-block;
    margin: 0 2rem 2rem 0;
    border-bottom: 1px solid #546e7a;
}

div[data-option-value="products"],
div[data-option-value="dental-training"],
div[data-option-value="patient-education"] {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* サブタイトル関連 */
.search-filter-label {
    font-size: 1.8rem;
    background-color: #F7F7F7 !important;
    font-weight: bold;
    border-bottom: none !important;
    padding: 1.7rem !important;
    margin: 1.5rem 0 2rem 0 !important;
    width: 100%;
}

/* 中身が空（スペースすらない）のラベルを非表示にする */
.search-filter-label:empty {
    display: none !important;
}

/* チェックボックス関連 */
.search-filter-input-checkbox div[role=group] {
    margin-left: 0 !important;
    margin-top: 0 !important;
}

.search-filter-input-checkbox {
    padding-top: 0 !important;
}

.search-filter-input-checkbox__label,
.search-filter-input-checkbox__count {
    font-size: 1.6rem !important;
}

/* アコーディオンの外枠（初期非表示） */
.searchCatBloc,
.searchTagBloc {
    display: none;
    overflow: hidden;
}

/* 見出し（クリック部分）の共通設定 */
.nav-open,
.nav-open-tag {
    cursor: pointer;
    color: #fff;
    margin: 1rem 0;
    font-weight: bold;
    border-radius: 4px;
    position: relative;
}

/* フリワード部分 */
.search-filter-input-text.search-filter-input-text.search-filter-field__input {
    width: 100%;
    border: solid 1px #D0D0D0;
    background-color: #F7F7F7;
    border-radius: 30px;
    padding: 0.5rem 1rem;
    background-repeat: no-repeat;
    background-position: 98% center;
    margin-bottom: 1.5rem;
}

.search-filter-input-text input::placeholder {
    color: #333;
}

/* 1. 階層構造による段落ちを防ぐ（基本は縦、末端だけ横） */
#search-filter-wrapper .search-filter-input-group {
    display: block !important;
    /* 全体を一旦リセット */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

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

    /* 1. 全ての「項目を包むグループ」をFlex化（カテゴリの深い階層も含む） */
    #search-filter-wrapper .search-filter-input-group,
    #search-filter-wrapper .search-filter-input-checkbox > .search-filter-input-group {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        /* columnを上書き */
        justify-content: space-between !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        /* width: 49% で制御するためgapは0 */
    }

    /* 2. 親階層（Dental Training Productsなど）は2列にせず、100%幅で一行使う */
    #search-filter-wrapper .search-filter-input-checkbox:has(> .search-filter-input-group) {
        width: 100% !important;
        display: block !important;
        border: none !important;
    }

    /* 3. 実際の選択肢（末端のアイテム）を2列にする */
    #search-filter-wrapper .search-filter-input-checkbox:not(:has(> .search-filter-input-group)) {
        width: 49% !important;
        display: inline-flex !important;
        box-sizing: border-box !important;
        margin: 0 0 1.5rem 0 !important;
        border-bottom: 1px solid #546e7a !important;
        vertical-align: top;
        min-height: 4.5rem;
    }

    /* 4. ラベル・フォント設定 */
    .search-filter-input-checkbox__container {
        display: flex !important;
        align-items: flex-start !important;
        width: 100% !important;
    }

    .search-filter-input-checkbox__label {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        overflow-wrap: break-word;
        word-break: keep-all;
        /* 英語の単語を守る */
    }

    .search-filter-input-checkbox__label {
        display: block !important;
    }

    /* 5. チェックボックス固定 */
    .search-filter-input-checkbox__control {
        flex-shrink: 0 !important;
    }

    /* 6. 表示上消している親ラベル（S&F v3.2.3対応版） */

    /* products などの親要素の input と label本体を非表示 */
    div[data-option-value="products"] > input,
    div[data-option-value="products"] > label,
    div[data-option-value="dental-training"] > input,
    div[data-option-value="dental-training"] > label,
    div[data-option-value="patient-education"] > input,
    div[data-option-value="patient-education"] > label {
        display: none !important;
    }

    /* さらに、labelの中にあるspan要素なども念のため非表示を保証 */
    div[data-option-value="products"] > .search-filter-input-checkbox__container,
    div[data-option-value="dental-training"] > .search-filter-input-checkbox__container,
    div[data-option-value="patient-education"] > .search-filter-input-checkbox__container {
        display: none !important;
    }
}

@media only screen and (max-width : 782px) {
    .search-filter-input-checkbox__label {
        line-height: 1.5 !important;
    }
}

/* 検索結果調整 */
.search-filter-query-posts hr {
    display: none;
}

.search-filter-input-group {
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
}

.search-filter-query-posts div {
    width: 22%;
}

.search-filter-query-posts p {
    display: none;
}

.search-filter-query-posts p img {
    display: block;
}

/* ページネーション微調整 */
.wp-pagenavi a,
.wp-pagenavi span {
    border: 1px solid #ddd !important;
    padding: 8px 12px !important;
}

.wp-pagenavi span.current {
    background-color: #ddd;
    border-color: #ccc !important;
}

@media only screen and (max-width : 782px) {
    div.wp-pagenavi span.extend {
        display: none;
    }

    div.wp-pagenavi span.pages {
        display: none;
    }

    div.wp-pagenavi .last {
        display: none;
    }
}

/* 検索結果の条件ボックス */
.search-result-box {
    background: #f4f4f4;
    margin-bottom: 4rem;
    padding: 1.5rem 2rem;
    line-height: 1.6;
    font-size: 1.5rem;
}

.search-result-box .condition-row {
    margin-bottom: 8px;
}

.search-result-box .label {
    font-weight: bold;
    color: #333;
}

.search-result-box .value {
    color: #333;
}

/* スマホ用の調整 */
@media screen and (max-width:1000px) {
    .search-result-box {
        font-size: 1.5rem;
    }
}

/*//////////////////////////////////////////////////////////
///search ver2からの引き継ぎ
/////////////////////////////////////////////////////////*/
#search-filter-form-162 {
    margin: 3.5rem 0 0 0;
}

.searchandfilter li ul {
    display: flex;
    flex-wrap: wrap;
}

.searchandfilter li ul li {
    margin: 0 2rem 1rem 0;
    border-bottom: 1px solid #00326e;
}

.searchandfilter h4 {
    font-size: 2.2rem;
    margin: 0.5rem 0;
}

.searchttl {
    font-size: 1.8rem;
    background-color: #F7F7F7;
    font-weight: bold;
    border-bottom: none !important;
    padding: 1.2rem !important;
    margin: 0.75rem 0 1rem 0 !important;
    width: 100%;
}

.searchttl.mTop2rem {
    margin-top: 3rem !important;
}

.post-search .entry-title {
    margin-bottom: 2rem;
}

.wp-pagenavi {
    margin-top: 5rem;
}

.sf-field-search label {
    display: block;
}

#search-filter-form-162 {
    margin-bottom: 8rem;
}

.sf-field-search {
    margin-bottom: 0.75rem !important;
}

.searchandfilter ul li.sf-field-category,
.searchandfilter ul li.sf-field-tag {
    display: none;
}

.searchResult .searchandfilter ul li.sf-field-category,
.searchResult .searchandfilter ul li.sf-field-tag {
    display: block;
}

.searchandfilter ul h4 {
    display: none;
}

.search-result {
    font-weight: 500;
    margin-bottom: 4rem;
    padding: 1.5rem 2rem;
    background-color: #F8F8F8;
    font-size: 1.5rem;

}

.search-result p {
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-open,
.nav-open-tag {
    padding: 1.5rem;
    color: #fff;
    background-image: linear-gradient(90deg, rgba(37, 69, 182, 1), rgba(49, 170, 255, 1));
    position: relative;
    cursor: pointer;
    font-size: 1.7rem;
}

.nav-open::before,
.nav-open-tag::before {
    /* 閉じている時 */
    content: "\002B";
    position: absolute;
    right: 1.5rem;
    cursor: pointer;
    font-weight: bold;
    font-size: 2.2rem;
    /* --- ここから修正・追加 --- */
    top: 50%;
    /* 親要素の高さの半分に配置 */
    transform: translateY(-54%);
    /* 自分の高さの半分だけ上にズラして「芯」を合わせる */
    line-height: 1;
    /* 行の高さを1にして余計な隙間を消す */
    /* ------------------------ */
}

.nav-open.active::before,
.nav-open-tag.active::before {
    /* 開いている時 */
    content: "\2212";
    cursor: pointer;
    font-weight: bold;
    font-size: 2.2rem;
    /* --- ここから追加 --- */
    top: 50%;
    transform: translateY(-54%);
    /* ------------------ */
}

.searchResult h1 {
    text-align: center;
    font-size: 3.4rem;
    color: #0E2884;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25rem;
    padding: 0 2rem;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.5), 0 0 40px #fff;
}

@media only screen and (max-width : 1000px) {
    .sf-field-submit input {
        width: 35%;
    }

    .searchResult h1 {
        height: 20rem;
    }
}

@media only screen and (max-width : 782px) {
    .sf-input-text {
        background-position: 96% center;
    }

    .sf-field-submit input {
        width: 65%;
    }

    #search-filter-form-162 input {
        font-size: 16px !important;
    }

    #search-filter-form-162 .sf-field-submit input {
        font-size: 1.6rem !important;
    }

    .searchandfilter li.sf-level-0 {
        width: 50%;
        margin: 0;
        padding: 10px 5px 10px 0;
    }

    .searchandfilter label {
        display: inline;
    }

    .searchandfilter li ul li {
        border-bottom: 1px solid #777;
    }
}

/*//////////////////////////////////////////////////////////
///About Us
/////////////////////////////////////////////////////////*/
.wrapCompanyInfo {
    display: flex;
}

#companyAbout dl,
.company_history_list dl {
    display: flex;
    border-bottom: 1px solid #ccc;
    padding: 2.5rem 0;
}

#companyAbout dt,
.company_history_list dt {
    width: 25%;
    padding: 0 2rem 0 0;
    font-weight: 500;
}

#companyAbout dd,
.company_history_list dd {
    padding: 0 2rem 0 0;
    width: 75%;
}

.company_history_list dt {
    width: 30%;
}

.company_history_list dd {
    padding: 0 2rem 0 0;
    width: 70%;
}

.sidebarWrap {
    width: 20%;
    position: relative;
    margin-right: 5%;
}

.sidebar_list {
    padding: 0;
}

.sidebar li {
    margin: 0 0 1rem 0;
}

.sidebar li a {
    color: rgba(58, 58, 58, 0.3);
}

.sidebar li a::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 1rem 0.2rem 0;
    background: rgba(58, 58, 58, 0.3);
    border-radius: 50%;
}

.companyInfoMain {
    width: 80%;
}

.sidebar li a.action {
    color: rgba(58, 58, 58, 1.0);
}

.sidebar li a.action::before {
    background: rgba(58, 58, 58, 1.0);
    transition: background 0.7s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
    width: 10px;
    height: 10px;
}

.is_fixed {
    position: fixed;
    top: 110px;
    width: 20%;
}

.is_absolute {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.companyInfoMain h2,
.companyPhilosophy h2,
.companyVision h2,
.companyQualityPolicy h2,
.companyMessageMain h2,
.companyCraft h2,
.companyFuture h2 {
    color: #0E2884;
    font-weight: 500;
    font-size: 3.6rem;
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.officeBlock .wp-block-table {
    margin: 0;
}

.officeBlock .newitemTtl2 {
    color: #555;
    font-weight: 600;
    font-family: 'Roboto', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'Hiragino Sans', sans-serif;
    font-size: 2.9rem !important;
}

.officeBlock iframe {
    width: 100%;
    height: 25rem;
}

.nengou {
    display: block;
    font-size: 1.3rem;
}

.companyInfoMain p span,
.companyPhilosophy p span,
.companyVision p span,
.companyQualityPolicy p span,
.companyMessageMain p span,
.companyCraft p span .companyFuture p span {
    font-size: 1.3rem;
    color: #777;
    letter-spacing: 0.1rem;
}

.company_history_list_sp {
    display: none;
}

.companyHistoryBlock {
    display: flex;
}

.company_history_list_images {
    width: 25%;
    margin: 0 0 0 5rem;
}

.company_history_list_images li {
    margin-bottom: 3rem;
}

.company_history_list_images ul {
    margin-bottom: 8rem;
}

.companyHistoryBlock figcaption {
    font-size: 1.3rem;
    color: #777;
    text-align: center;
}

.historyCopy p {
    text-align: center;
    font-size: 3.0rem;
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    /* 明朝は太めにすると格好いいです */
    letter-spacing: 0.05em;
    /* 明朝の見出しは少し広げると高級感が出ます */
    margin-bottom: 1rem;
    font-weight: 600;
}

.historyCopy figcaption {
    font-size: 1.4rem;
    color: #777;
    text-align: center;
    margin-bottom: 2rem;
}

.yazirusi {
    position: relative;
    width: 5rem;
    margin: 4rem auto;
    transform: rotate(90deg);
}

.line01 {
    height: 1px;
    background-color: #333;
}

.line02 {
    position: absolute;
    top: 0;
    right: 0;
    transform-origin: right bottom;
    width: 1.5rem;
    height: 1px;
    background-color: #333;
    transform: rotate(45deg);
}

.historyCopy img {
    max-width: 400px;
    margin: 0 auto;
}

@media(max-width:1000px) {
    .company_history_list_sp {
        display: flex;
        width: 50%;
        margin: 4rem auto 2rem auto;
        justify-content: space-between;
    }

    .company_history_list_sp figure {
        padding-right: 5%;
    }

    .company_history_list_images {
        display: none;
    }

}

@media(max-width:782px) {
    .company_history_list_sp {
        width: 75%;
    }

    #companyHistory .company_history_list_sp img {
        height: auto !important;
    }

    #companyAbout dt {
        width: 33% !important;
        font-weight: 600;
    }

    #companyAbout dd {
        width: 70% !important;
    }

    .wrapCompanyInfo {
        display: block;
    }

    .wrapCompanyInfo .wp-block-columns img {
        height: 25rem !important;
        object-fit: cover;
        object-position: 100% 0;
    }

    .sidebar_list {
        display: none;
    }

    .sidebarWrap {
        width: 0%;
    }

    .companyInfoMain {
        width: 100%;
    }

    .historyCopy img {
        max-width: 100%;
    }

    .sidebar_sp_list {
        margin-bottom: 4rem;
    }

    .sidebar_sp_list li a {
        display: block;
        width: calc(50% - 2.5px);
        float: left;
        text-align: center;
        padding: 1.5rem 0;
        background-color: #f0f3f8;
        position: relative;
    }

    .sidebar_sp_list li a .fa {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 15px;
        height: 15px;
        background-color: #b8c6cc;
        color: #fff;
    }

    .sidebar_sp_list li:nth-child(2n) a {
        margin-left: 5px;
    }

    .sidebar_sp_list li:nth-child(1) a,
    .sidebar_sp_list li:nth-child(2) a {
        margin-bottom: 5px;
    }
}

/*//////////////////////////////////////////////////////////
///message
/////////////////////////////////////////////////////////*/
.companyMessageMain {
    overflow: hidden;
    position: relative;
}

.companyMessageMain .messageLeft::before {
    content: "";
    display: block;
    position: absolute;
    /*
	background: #0e2884;
	right: -2rem;
	top: -2rem;
	*/
    top: -1.5rem;
    right: -1.5rem;
    border-top: 1.5rem solid #0e2884;
    border-right: 1.5rem solid #0e2884;
    width: 25rem;
    height: 25rem;
    z-index: -1;
}

.companyMessageMain .messageLeft {
    background: #fff;
    position: relative;
    /*padding: 0 0 0 2rem;*/
    left: 10rem;
    margin: 5rem 0 0 0;
}

.messageLeft .fadeLeft {
    background: #fff;
}

.messageLeft h3 {
    font-size: 3.5rem;
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    /* 明朝は太めにすると格好いいです */
    letter-spacing: 0.05em;
    /* 明朝の見出しは少し広げると高級感が出ます */
    color: #0e2884;
    position: relative;
    margin: 5rem 0;
    left: -8rem;
}

.messageLeft p {
    position: relative;
    padding-bottom: 3rem;
    left: -8rem;
}

.reverseMessage {
    display: flex;
    justify-content: space-between;
    max-width: 1300px;
    margin: auto;
    position: relative;
}

.reverseMessage {
    flex-direction: row-reverse;
}

.companyMessageMain .messageLeft {
    width: 52%;
}

.ceoSign {
    font-size: 2.8rem;
    font-weight: 600;
    text-align: right;
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    /* 明朝は太めにすると格好いいです */
    letter-spacing: 0.05em;
    /* 明朝の見出しは少し広げると高級感が出ます */
    padding-bottom: 0 !important;
}

.ceoSign span {
    font-size: 1.8rem !important;
}

/*右側へ要素を広げる（2カラム）*/
.reverseMessage .column-outside-right {
    flex: 1;
    margin-right: calc(50% - 60vw);
    z-index: -2;
}

.corporateMessageBlock p img {
    margin: auto;
}

.companyMessageMain h3.mTop4rem {
    font-size: 3.2rem;
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #0e2884;
    text-align: center;
    font-style: italic;
    font-weight: 500;
    line-height: 1.5;
}

.corporateMessageTxt p {
    margin-bottom: 3rem;
}

.corporateMessageTxt p:last-child {
    margin-bottom: 0;
}

.corporateMessageTxt p img {
    margin: 4rem auto;
}

@media(max-width:1000px) {
    .companyMessageMain h2 {
        margin-bottom: 4rem;
    }

    .companyMessageMain .messageLeft {
        padding: 0 2rem;
    }

    .companyMessageMain .messageLeft::before {
        display: none;
    }

    .companyMessageMain h3.mTop4rem {
        margin-top: 0 !important;
    }

    .reverseMessage {
        display: block;
    }

    .companyMessageMain .messageLeft {
        width: 100%;
        left: 0;
        margin: 0;
    }

    .messageLeft h3 {
        left: 0;
    }

    .messageLeft p {
        left: 0;
    }

    .messageLeft h3 {
        margin: 3rem 0;
        font-size: 3rem;
        text-align: center;
    }
}

/*//////////////////////////////////////////////////////////
/// Contact Form - Optimized Global Style
/////////////////////////////////////////////////////////*/
.inquiry {
    width: 100%;
    margin: 4rem auto;
    border-collapse: collapse;
    /* 隙間をなくして綺麗に */
    table-layout: fixed;
    /* レイアウト崩れ防止 */
}

.wpcf7-list-item {
    margin: 0 1.5rem 0 0 !important;
}

/* 見出し欄 - 少しフォントを締めて余白を調整 */
.inquiry th {
    text-align: left;
    width: 30%;
    background: #f7f7f7;
    border: solid 1px #d7d7d7;
    padding: 2rem 2.5rem;
    font-weight: 600;
    font-size: 1.5rem;
    color: #333;
}

/* 通常欄 */
.inquiry td {
    border: solid 1px #d7d7d7;
    padding: 2rem 2.5rem;
}

/* --- 入力要素の共通上書き --- */
.inquiry td input,
.inquiry td textarea,
.inquiry td select {
    padding: 1.2rem;
    /* 少しゆとりを */
    font-size: 1.6rem;
    border: 1px solid #d7d7d7;
    border-radius: 4px;
    /* 角をほんのり丸く */
    background-color: #fff;
    box-sizing: border-box;
    transition: all 0.3s ease;
    width: 100%;
    /* 基本100%にしてmax-widthで制御 */
    max-width: 500px;
    color: #444;
}

.inquiry td select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("./images/arrow-down.svg");
    /* パスは環境に合わせて */
    background-repeat: no-repeat;
    background-position: right 1.5rem center;
    background-size: 1.6rem;
    padding-right: 4.5rem;
    /* 矢印と文字の重なり防止 */
    cursor: pointer;
}

/* IEで純正矢印を非表示にする */
.inquiry td select::-ms-expand {
    display: none;
}

/* フォーカス時の強調 - サイトカラー #0E2884 に合わせる */
.inquiry td input:focus,
.inquiry td select:focus,
.inquiry td textarea:focus {
    outline: none;
    border-color: #0E2884;
    box-shadow: 0 0 0 3px rgba(14, 40, 132, 0.1);
}

/* 特定項目の幅微調整 */
/*.inquiry td input[name="productName"] { max-width: 70%; }*/
.inquiry td input[type="radio"],
.inquiry td input[type="checkbox"] {
    width: auto !important;
    height: auto;
    cursor: pointer;
}

.inquiry td textarea {
    max-width: 650px;
    min-height: 150px;
}

.inquiry td .wpcf7-form-control::placeholder {
    color: #aaa;
    font-size: 1.4rem;
}

.haveto,
.any {
    font-size: 1.1rem;
    padding: 0.3rem 0.8rem;
    border-radius: 2px;
    font-weight: bold;
    margin-right: 1.2rem;
    display: inline-block;
    vertical-align: middle;
}

.haveto {
    background: #F16419;
    color: #fff;
}

.any {
    background: #93c9ff;
    color: #fff;
}

.mailsp {
    margin-top: 1.5rem;
}

/* お問い合わせ送信ボタン - 矢印アイコン追加版 */
#formbtn {
    color: #fff !important;
    border: none !important;
    background-color: #0E2884 !important;
    border-radius: 50px !important;
    width: 100% !important;
    max-width: 350px !important;
    display: block !important;
    margin: 3rem auto 0 !important;
    padding: 1.6rem !important;

    /* フォント設定：細字 */
    font-size: 1.6rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    text-align: center !important;

    /* 矢印アイコンの追加（検索ボタンと統一） */
    background-image: url(images/arrow.png) !important;
    background-repeat: no-repeat !important;
    background-position: 90% center !important;
    /* 位置を揃える */
    background-size: 1.2rem !important;
    /* サイズを揃える */

    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(14, 40, 132, 0.15) !important;
}

#formbtn:hover {
    background-color: #0a1d5e !important;
    background-position: 93% center !important;
    /* ホバーで矢印を動かす */
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(14, 40, 132, 0.25) !important;
    opacity: 0.9 !important;
}

/* --- Responsive --- */
@media(max-width:782px) {

    .inquiry th,
    .inquiry td {
        display: block !important;
        width: 100% !important;
        padding: 1.5rem !important;
    }

    .inquiry th {
        border-bottom: none !important;
        background: #f1f1f1;
    }

    .inquiry td input,
    .inquiry td textarea,
    .inquiry td select {
        max-width: 100% !important;
        font-size: 16px !important;
        /* スマホのズーム防止 */
    }

    #formbtn {
        max-width: 100% !important;
    }

    .inquiry td {
        border-bottom: none !important;
    }

    .inquiry tr:last-child td {
        border-bottom: solid 1px #d7d7d7 !important;
    }
}

/* フォーム冒頭のメッセージ */
.contact-intro {
    margin-bottom: 3rem;
    line-height: 1.8;
    color: #444;
}

.contact-intro strong {
    color: #0E2884;
}

/* 注意書きのボックス */
.contact-intro .contact-notices,
.thank-you-message .contact-notices {
    background: #f8f9fa;
    border-left: 4px solid #0E2884;
    padding: 2rem !important;
    margin-top: 2rem;
    font-size: 1.5rem;
}

.contact-notices ul {
    margin: 0;
    padding-left: 20px;
}

/* メッセージ部分のリンク */
.contact-intro a,
.agreement-text a {
    color: #0E2884 !important;
    text-decoration: underline !important;
    /* 下線を引いてリンクだと明示 */
    font-weight: 600;
    transition: opacity 0.2s;
}

.contact-intro a:hover,
.agreement-text a:hover {
    opacity: 0.7;
    text-decoration: none;
    /* 下線を消して動きを出す */
}

/* --- 送信ボタン共通（PCデフォルト） --- */
#formbtn,
.search-filter-input-button {
    width: 25% !important;
    /* デフォルトは少し控えめに */
    max-width: none !important;
    min-width: 20rem;
    /* 小さくなりすぎ防止 */
    margin: 3rem auto !important;
    display: block !important;
}

/* --- 1000px以下：幅35% --- */
@media (max-width: 1000px) {

    #formbtn,
    .search-filter-input-button {
        width: 35% !important;
    }
}

/* --- 782px以下：幅65% --- */
@media (max-width: 782px) {

    #formbtn,
    .search-filter-input-button {
        width: 65% !important;
        margin: 2rem auto !important;
    }
}

.contactSubmit {
    position: relative;
}

.contactSubmit .wpcf7-spinner {
    position: absolute;
    bottom: -30px;
    left: calc(50% - 30px);
}

/* thの中のpをフレックスボックスにして上揃えに */
.inquiry th p {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    text-align: left;
}

/* 「Required」「Optional」バッジの調整 */
.inquiry th span.haveto,
.inquiry th span.any {
    flex-shrink: 0;
    /* バッジが横に潰れないように固定 */
    display: inline-block;
    padding: 0.6rem;
    font-size: 1.2rem;
    /* バッジ内の文字サイズ */
    line-height: 1.2;
    margin-top: -0.1rem;
    /* テキストの1行目と中心を合わせるための微調整 */
    border-radius: 0.3rem;
    text-align: center;
    min-width: 5.5rem;
}

/* ラベルテキスト本体 */
.inquiry th span:not(.haveto):not(.any) {
    display: block;
    line-height: 1.6;
    font-size: 1.4rem;
    font-weight: bold;
    color: #333;
}

/* 1. 全体：余計なflexを外し、エラーが下に落ちる土台を作る */
.agreement-flex {
    display: block !important;
    width: 100% !important;
}

/* 2. ラベル部分：ここでチェックボックスと1行目のテキストを揃える */
.agreement-flex .wpcf7-list-item label {
    display: flex !important;
    align-items: flex-start !important;
    /* 頭揃え */
    gap: 12px !important;
    /* ボックスと文字の間隔 */
    margin: 0 !important;
    cursor: pointer;
}

/* 3. チェックボックス本体：位置の微調整 */
.agreement-flex input[type="checkbox"] {
    flex-shrink: 0 !important;
    /* ボックスが潰れるのを防ぐ */
    margin: 0.35em 0 0 0 !important;
    /* テキスト1行目との高さ調整 */
}

/* 4. テキスト部分：ここが折り返しの肝 */
.agreement-flex .wpcf7-list-item-label {
    flex: 1 !important;
    /* 残りの幅を使い切る */
    min-width: 0 !important;
    /* これがないとはみ出る */
    white-space: normal !important;
    /* 折り返し許可 */
    word-break: break-word !important;
    /* 単語の途中で改行 */
    line-height: 1.6 !important;
    font-size: 1.6rem !important;
    color: #333;
}

/* 5. エラーメッセージ：labelの外にあるので自動で下へ */
.agreement-flex .wpcf7-not-valid-tip {
    display: block !important;
    margin-top: 1rem !important;
    color: #f00;
}

/* 1. Choices.js 標準の三角形（::after）を消す */
.inquiry td .choices[data-type*="select-one"]::after {
    display: none !important;
}

/* 2. Choices.js の枠に、元の矢印画像をセットする */
.inquiry td .choices__inner {
    padding: 1.2rem 4.5rem 1.2rem 1.2rem !important;
    /* 右側に矢印用の余白を確保 */
    background-image: url(./images/arrow-down.svg) !important;
    background-repeat: no-repeat !important;
    background-position: right 1.5rem center !important;
    background-size: 1.6rem !important;
    max-width: 500px;
    display: flex;
    align-items: center;
    background-color: #fff;
    color: #444 !important;
    font-size: 1.6rem;
}

/* 3. 検索入力欄（Choices内）のパディング調整 */
.inquiry td .choices__input {
    background-color: transparent !important;
    margin-bottom: 0 !important;
}

/* 1. ドロップダウンリストの横幅を上の入力枠（500px）に合わせる */
.inquiry td .choices__list--dropdown {
    max-width: 500px;
    width: 100%;
    word-break: break-all;
    z-index: 20;
}

/* 2. 検索入力欄（青い枠が出ているところ）の調整 */
.inquiry td .choices__list--dropdown .choices__input {
    border: 1px solid #d7d7d7 !important;
    /* 既存の線の色に合わせる */
    border-radius: 4px;
    margin: 10px !important;
    width: calc(100% - 20px) !important;
    /* 余白分を引く */
}

/* 3. 外枠の二重線を解消し、角を丸める */
.inquiry td .choices__inner {
    border: 1px solid #d7d7d7 !important;
    border-radius: 4px !important;
    overflow: hidden;
    /* 子要素がはみ出さないように */
}

.choices__list--single {
    padding: 0 !important;
}

/* 1. プレースホルダー（Select your country）の文字色を444に強制 */
.inquiry td .choices__list--single .choices__placeholder {
    color: #444 !important;
    opacity: 1 !important;
}

/* 3. ドロップダウンリスト内の各項目も444にする */
.inquiry td .choices__list--dropdown .choices__item {
    color: #444 !important;
}

/*//////////////////////////////////////////////////////////
///archive
/////////////////////////////////////////////////////////*/
/*---------------------------------------------------------
category
---------------------------------------------------------*/
.archive #search-filter-form-162,
.single #search-filter-form-162 {
    margin: 2rem 0 0 0;
}

.category .tab_content_description h2 {
    font-size: 1.8rem;
    color: #0E2884;
    font-weight: 600;
    margin: 0 0 0 1.5rem;
}

.archive-top {
    background-image: url("images/topArchiveBg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-top: 80px;
    height: 25rem;
    overflow: hidden;
}

.catEx {
    margin-bottom: 5rem;
    display: flex;
    flex-wrap: wrap;
    /* 折返し可 */
    justify-content: space-between;
    align-items: center;
    background-color: #f9f9f9;
    padding: 4rem 2rem;
}

.catEx h2 {
    color: rgba(34, 40, 132, 1.0);
    margin-bottom: 1.5rem;
    font-weight: 600;
    /*font-size: 2.9rem;*/
    font-size: clamp(2.5rem, calc(1.4vw + 0.9rem), 2.9rem) !important;
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

.catEx div {
    width: 46%;
}

.catEx div img {
    width: 100%;
}

.catExright img {
    width: 100%;
    /* 最新ブラウザ用：比率を直接指定 */
    aspect-ratio: 2 / 1;
    /* object-fitが効かない古いブラウザ用（IEなど）への対策 */
    font-family: 'object-fit: cover;';
    /* aspect-ratioが効かない古いSafari等への対策 */
    /* 最小の高さを確保しておくことで、画像が潰れて見えなくなるのを防ぐ */
    min-height: 200px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.toumei40 {
    background-color: rgba(255, 255, 255, 0.40);
}

.toumei60 {
    background-color: rgba(255, 255, 255, 0.60);
}

.elseWrap {
    display: flex;
}

.elsePic {
    flex-basis: 30%;
    margin-right: 5%;
}

.elseTxt {
    flex-basis: 65%;
    background-color: #f5f5f5;
    border-radius: 10px;
    padding: 2.5rem;
}

.elseTxt h3 {
    position: relative;
    padding-left: 4.5rem;
    font-size: 3.5rem;
    color: #0e2884;
    letter-spacing: 0.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.elseTxt h3::before,
.elseTxt h3::after {
    content: "□";
    position: absolute;
}

.elseTxt h3::before {
    left: 0;
    top: -3px;
}

.elseTxt h3::after {
    left: 5px;
    top: 3px;
    color: #A1B8D1;
}

.elseTxt h4 {
    font-size: 2.3rem;
    color: #0e2884;
    font-weight: 500;
    margin-bottom: 1rem;
}

.reverse .elsePic {
    margin-right: 0;
    margin-left: 5%;
}

@media only screen and (max-width : 1000px) {
    .archive-top {
        margin-top: 70px;
        height: 20rem;
    }

    .category h1,
    .tag h1,
    .page-template-default h1,
    .page-template-page-company h1,
    .page-template-page-company-about h1,
    .page-template-page-company-philosophy h1,
    .page-template-page-company-message h1 {
        height: 20rem;
    }
}

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

    .catEx div,
    .catEx::after,
    .catEx::before {
        width: 100%;
    }

    .catEx div:nth-child(2) {
        margin-top: 3rem;
    }

    .category h1,
    .tag h1,
    .page-template-default h1,
    .page-template-page-company h1,
    .page-template-page-company-about h1,
    .page-template-page-company-philosophy h1,
    .page-template-page-company-message h1 {
        text-align: center;
        /*font-size: 3.4rem;*/
        font-size: clamp(2.2rem, calc(2.2vw + 1.5rem), 3.4rem);
    }

    .elseWrap {
        display: block;
    }

    .elsePic {
        margin-right: 0;
        margin-left: 0;
        padding: 0 20%;
    }

    .elseTxt {
        margin-top: 3rem;
    }

    .wrapCompanyInfo .mTop4rem {
        margin-top: 4rem !important;
    }
}

/*//////////////////////////////////////////////////////////
///pagination
/////////////////////////////////////////////////////////*/
.pagination {
    list-style-type: none;
    padding-left: 0;
    margin: 6rem 0 5rem 0;
}

.pagination,
.pagination li a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.pagination a {
    font-weight: 300;
    padding-top: 1px;
    text-decoration: none;
    border: 1px solid #ddd;
    border-left-width: 0;
    min-width: 36px;
    min-height: 36px;
    color: #333;
}

.pagination li:not([class*="current"]) a:hover {
    background-color: #eee;
}

.pagination li:first-of-type a {
    border-left-width: 1px;
}

.pagination li.first span,
.pagination li.last span,
.pagination li.previous span,
.pagination li.next span {
    /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.pagination li.first a::before,
.pagination li.last a::after,
.pagination li.previous a::before,
.pagination li.next a::after {
    display: inline-block;
    font-family: Fontawesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

.pagination li.first a::before {
    content: "\f100";
}

.pagination li.last a::after {
    content: "\f101";
}

.pagination li.previous a::before {
    content: "\f104";
}

.pagination li.next a::after {
    content: "\f105";
}

.pagination li.current a {
    background-color: #ddd;
    cursor: default;
    pointer-events: none;
}

.pagination > li:first-child > a {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

.pagination > li:last-child > a {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

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

    .pagination li.first,
    .pagination li.last {
        /* screen readers only */
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .pagination li.previous a {
        border-left-width: 1px;
    }
}

@media only screen and (max-width: 500px) {
    .pagination li {
        /* screen readers only */
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .pagination li.current,
    .pagination li.first,
    .pagination li.last,
    .pagination li.previous,
    .pagination li.next {
        position: initial;
        top: initial;
        left: initial;
    }

    .pagination li.previous a {
        border-left-width: 0;
    }
}

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

    .pagination li.first,
    .pagination li.last {
        /* screen readers only */
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .pagination li.previous a {
        border-left-width: 1px;
    }
}

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

    .pagination li {
        width: 50%;
    }

    .pagination li.current {
        order: 2;
        width: 100%;
        border-left-width: 1px;
    }
}

/*//////////////////////////////////////////////////////////
///footer
/////////////////////////////////////////////////////////*/
.page-template-page-home #footer.mTop10rem {
    margin-top: 0 !important;
}

footer {
    background-color: #0E2884;
    padding: 8rem 0 2rem 0;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 300;
    /* 黄金比シャドウ */
    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -15px 15px -10px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    border-bottom: none;
}

footer a {
    color: #fff;
}

.footerNavi {
    display: flex;
    border-bottom: 1px solid #0D2064;
    padding: 0 0 2rem 0;
    justify-content: space-around;
    flex-wrap: wrap;
    /* ← これを追加 */
}

.footerNavi div {
    flex-basis: auto;
    max-width: 23%;
}

/* サブメニューも2行目揃えを適用 */
.footerNavi .sub-menu li {
    display: flex !important;
    padding: 0 0 1rem 0;
}

/* サブメニューの二重矢印も幅を固定 */
.footerNavi .sub-menu li:before {
    width: 1.5rem;
    /* ここも共通の1.5remにする */
    flex-shrink: 0;
}

.footerNavi .sub-menu {
    padding: 2rem 0 0 0;
}

.footerNavi .sub-menu li {
    padding: 0 0 1rem 0;
}

.footerNavi .sub-menu li a {
    color: #BABABA !important;
    font-size: 1.4rem;
}

.footerNavi .sub-menu li.fa {
    color: #BABABA;
}

.footerNavi li.fa {
    display: block !important;
}

.footerNavi div li {
    padding: 0 0 1.5rem 0;
}

.footerNavi li.fa::before,
.footerInfo .fa::before {
    display: inline-block;
    flex-shrink: 0;
    width: 1.5rem;
    /* 共通の1.5rem */
    text-align: left;
}

/* --- 2. 2行目揃え & サブメニューの配置修正 --- */
.footerNavi li {
    display: block !important;
    /* flexから一旦戻す（サブメニューの回り込み防止） */
    position: relative;
    padding: 0 0 1.5rem 1.5rem !important;
    /* 左側にアイコン分のスペースを固定で作る */
}

/* アイコンを絶対配置にして「2行目揃え」を物理的に解決する */
.footerNavi li::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 1.5rem;
    text-align: left;
}

/* --- 1. サブメニュー全体の枠をリセット --- */
.footerNavi .sub-menu {
    padding: 1.5rem 0 0 0;
    /* 上の余白だけ残す */
    margin: 0 0 0 -1.5rem;
    /* 親のliが持っているpadding分、左に引き戻す */
    display: block;
}

/* --- 2. サブメニュー内の各liを再整列 --- */
.footerNavi .sub-menu li {
    position: relative;
    padding: 0 0 1rem 1.5rem !important;
    /* 親と同じ1.5remを確保 */
    margin-left: 0;
    width: calc(100% + 1.5rem);
    /* 引き戻した分、横幅を補正 */
}

/* --- 3. サブメニューのアイコン（二重矢印）の位置固定 --- */
.footerNavi .sub-menu li::before {
    position: absolute;
    left: 0;
    width: 1.5rem;
    text-align: left;
}

/* リンクテキスト（ここが2行目になっても揃うように） */
.footerNavi li a {
    flex: 1;
    display: inline;
    line-height: 1.5;
    margin: 0;
    /* aタグのマージンをリセット */
}

/* --- フッターエリア全体 --- */
.footerInfo {
    border-top: 1px solid #2848BC;
    padding: 4rem 0 0 0;
    display: flex;
    justify-content: center;
    margin: 0 0 2rem 0;
}

footer address {
    font-size: 1.3rem;
    font-style: normal;
}

/* 各カラムの調整 */
.footerInfo > div {
    padding: 0 2%;
    flex: 1;
    min-width: 0;
}

/* 拠点名（親）の文字サイズが大きくてもアイコン幅に影響させない */
.footerInfoCompany {
    font-size: 1.6rem;
    /* 拠点名が大きくてもOK */
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: flex-start;
    line-height: 1.5;
}

/* 住所テキスト（アイコン分だけ左を空ける） */
.footerInfoTxt {
    font-size: 1.3rem;
    color: #BABABA;
    padding-left: 1.5rem;
    /* 下の .fa の width 1.7rem と合わせる */
    margin: 0;
    line-height: 1.5;
}

/* リスト（li）の2行目揃え */
.footerInfo div ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footerInfo div li {
    display: flex;
    /* 矢印の真下に文字をこなくする */
    align-items: flex-start;
    margin-bottom: 1rem;
}

/* アイコン自体の設定（上下共通） */
.footerNavi .fa:before,
.footerInfo .fa {
    flex-shrink: 0;
    width: 1.5rem;
    /* 下段の width と合わせる */
    display: inline-block;
    padding-top: 0.35rem;
    /* 高さを揃える */
}

/* リンクテキスト */
.footerInfo div li a {
    text-decoration: none;
    line-height: 1.5;
    display: inline-block;
    color: inherit;
}

.footerAdress address {
    padding: 1rem 0 0 0;
    text-align: center;
}

.footerAdress ul {
    display: flex;
    justify-content: center;
}

.footerAdress ul li {
    margin: 0 0 0 2rem;
}

.footerAdress ul li a {
    font-size: 2.5rem;
}

.fa-fax {
    padding-right: 0.5rem;
}

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 14px;
    line-height: 1;
    z-index: 99;
}

#page-top {
    display: none;
}

#page-top.pTopV {
    display: block;
}

#page-top a {
    background: #0E2884;
    text-decoration: none;
    color: #fff;
    width: 55px;
    padding: 17px 5px;
    text-align: center;
    display: block;
    border-radius: 90px;
    opacity: 0.9;
    transition: all .3s ease;
    font-size: 2rem;
    font-weight: 500;
}

#page-top a i {
    font-weight: 900;
}


#page-top a:hover {
    text-decoration: none;
    opacity: .5;
}

.topContact h4 {
    font-size: 1.8rem;
    color: #0E2884;
    font-weight: 600;
    margin: 3.5rem 0;
}

.topContact .ttl_h2 h2 {
    border-bottom: 1px solid #ddd;
    margin: 0 0 1.5rem 0;
    padding: 0 3rem 3rem 3rem;
    display: inline-block;
}

.topContact h2 {
    font-weight: normal;
    font-size: 4.6rem;
    color: #0E2884;
    line-height: 4.6rem;
    letter-spacing: 0.2rem;
    border-bottom: 1px solid #CBCBCB;
    padding: 0 0 4rem 0;
}

.topContact .ttl_h2 span {
    display: block;
}

.topContactBlock p.txtCenter {
    margin: 3.5rem auto 0 auto !important;
}

.topContact .ttl_h2 span:before {
    position: absolute;
    left: calc(50% - 40px);
    width: 80px;
    height: 1px;
    content: '';
    background: #0E2884;
    margin: -1.6rem 0 0 0;
}

@media only screen and (max-width : 1000px) {
    footer {
        padding: 0 0 2rem 0;
    }

    .footerNaviSp li {
        border-bottom: 1px solid #3D4B7C;
    }

    .footerNaviSp a {
        display: block;
        padding: 2rem;
        font-size: 1.4rem;
        background-image: url(images/rightArrow.png);
        background-repeat: no-repeat;
        background-position: right 2rem center;
    }

    .footerInfo {
        display: block;
        border: none;
    }

    .footerInfo p a {
        display: inline-block;
        margin-bottom: 1rem;
        text-align: center;
    }

    .footerInfo p {
        text-align: center;
    }

    .footerInfoCompany {
        display: block;
    }

}


/* --- フッターSPメニュー：CSSアコーディオン --- */

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

    /* 1. 親リンク：矢印を消してスイッチ用の余白を作る */
    .footerNaviSp .menu-item-has-children > a {
        background-image: none !important;
        position: relative;
        padding-right: 60px !important;
        color: #fff !important;
    }

    /* 2. スイッチ（＋/－）：太さ400、線を薄く */
    .footerNaviSp .menu-item-has-children > a::before {
        content: '+';
        position: absolute;
        right: 0;
        top: 0;
        width: 60px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        font-size: 2.6rem;
        font-weight: 400;
        pointer-events: none;
    }

    /* 開いた時の「－」 */
    .footerNaviSp .menu-item-has-children > a.is-open::before {
        content: '-';
        font-size: 3.2rem;
    }

    /* 3. サブメニュー全体の調整 */
    .footerNaviSp .sub-menu {
        display: none;
        list-style: none;
        padding: 0;
        background: rgba(255, 255, 255, 0.12);
        /* シックな薄い青 */
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* 4. サブメニュー内の各項目：矢印復活と二重線防止 */
    .footerNaviSp .sub-menu li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footerNaviSp .sub-menu li:last-child {
        border-bottom: none !important;
    }

    .footerNaviSp .sub-menu li a {
        color: #fff !important;
        padding: 2rem !important;
        font-size: 1.4rem;
        display: block;
        /* 子要素の矢印を復活 */
        background-image: url(images/rightArrow.png);
        background-repeat: no-repeat;
        background-position: right 2rem center;
    }
}

/* ==========================================================================
    フッター調整-パララックス化
   ========================================================================== */

/* --- 背景を「社屋」にしてパララックス化 --- */
.topContactBlock {
    /* 元の背景画像を社屋写真に変更 */
    background-image: url("images/about-us/shaku-full.png");
    background-repeat: no-repeat;
    background-position: center;
    /* センター寄せに変更 */
    background-size: cover;
    background-attachment: fixed;
    /* パララックス */
    position: relative;
    z-index: 1;
    background-position: center top;
}

/* タイトル周りの可視化（ボタンは既存のを活かす） */
.topContact .ttl_h2 h2 {
    color: #fff !important;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.topContact .txtCenter {
    color: #fff !important;
    font-weight: 500;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* --- 文字を読みやすくするための「透かし」レイヤー --- */
.toumei {
    /* .topContactBlockの上に暗い膜を張る */
    background: rgba(0, 30, 60, 0.5);
    padding: 4rem 0;
    /* 余白を調整 */
    transition: all 0.3s;
}

/* 青い擬似要素を白く上書き */
.topContactBlock .ttl_h2:after {
    display: none;
}

.topContact .txtCenter {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    /* 影を少し濃く */
    font-weight: 500;
}

/*//////////////////////////////////////////////////////////
///商品詳細ページ調整
/////////////////////////////////////////////////////////*/
.single h1 {
    line-height: 1.5;
}

.picTxt-col5 .wp-block-group__inner-container .wp-block-group__inner-container {
    margin-bottom: 0;
}

.wp-block-table.productTable {
    margin-top: 0;
}

/* 「About Articulator」リンクを10pxベースで微調整 */
.productTable a[href*="product-identification"] {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    /* 上下2px 左右8px */
    margin-top: 1.5rem;
    /* 上に5px */
    color: #0e2884 !important;
    text-decoration: none !important;
    border: 1px solid #0e2884;
    border-radius: 0.3rem;
    /* 3px */
    font-size: 1.2rem;
    /* 12px（少しだけ大きくして視認性UP） */
    font-weight: bold;
    line-height: 1.4;
    transition: all 0.2s;
}

/* ホバー時 */
.productTable a[href*="product-identification"]:hover {
    background: #0e2884;
    color: #fff !important;
}

.productTable a[href*="product-identification"] {
    /* border-widthを調整 */
    border-left: 4px solid #0e2884;
    /* 左だけ太く */
}

.productTable code + br:has(+ code a[href*="product-identification"]) {
    display: none !important;
}

.single article p + .wp-block-columns {
    margin-top: 2rem !important;
}

.single .productPicture p,
.single .productSlider p {
    margin-bottom: 0 !important;
}

h5.wp-block-heading {
    margin: 2rem 0 1.5rem 0;
}

h4.wp-block-heading {
    margin: 0 0 1.5rem 0;
}

.productPicture p + h4.wp-block-heading,
.productSlider p + h4.wp-block-heading {
    margin: 2rem 0 1.5rem 0;
}

.productPicture p + h5.wp-block-heading,
.productSlider p + h5.wp-block-heading {
    margin: 2rem 0 1.5rem 0;
}

h2.wp-block-heading {
    line-height: 1.4;
    font-size: clamp(2.7rem, calc(2.0vw + 0.6rem), 3.1rem) !important;
}

.single .productPicture h4.wp-block-heading,
.single .productSlider h4.wp-block-heading {
    font-size: 2.0rem !important;
}

.txt-pic-6col p {
    margin: 1.5rem 0 0 0 !important;
}

.txt-pic-6col .wp-block-columns {
    margin: 3rem 0 0 0;
}

.txt-pic-6col .wp-element-caption {
    font-size: 1.6rem;
}

.productPicture .GroupPattern_1,
.productPicture .GroupPattern_2,
.productSlider .GroupPattern_1,
.productSlider .GroupPattern_2 {
    margin-top: 2rem !important;
}

.error404 .breadcrumb-area {
    margin: 120px 0 7rem 0;
}

.error404 .current-item {
    text-decoration: none;
}

/*
.contactItemEx {
    word-break: break-all;
}*/

.wp-block-table th {
    border: 1px solid #999;
    padding: 10px;
}

.keitailist_table {
    margin-top: 0 !important;
}

.keitailist_table tr td:first-child {
    background-color: inherit !important;
}

.keitailist_table th {
    background-color: #EAEAEA;
}

.col4-2_2-2col .wp-block-column .wp-block-columns {
    margin: 0;
}

.col4-2_2-2col .wp-block-columns p {
    margin: 1.5rem 0 0 0;
}


.wp-block-flexible-table-block-table tr td {
    border: 1px solid #999 !important;
}

.kadouKeiseiTable .wp-block-table tr:nth-child(2) td:first-child {
    background-color: inherit !important;
}

.kadouKeiseiTable .wp-block-table th {
    background-color: #EAEAEA !important;
}

.waxTable tr:first-child td {
    background-color: #EAEAEA !important;
}

.pic3-4col-3col {
    padding-left: 25%;
}

.grecaptcha-badge {
    bottom: 100px !important;
}

#gNav .sub-menu a {
    font-size: clamp(1.4rem, calc(0.7vw + 0.6rem), 1.6rem) !important;
}

.topCamp-col5 li:last-child {
    margin: 2.5rem auto 0 auto;
}

.topCamp-col6 {
    padding: 4rem 0;
}

.topCamp-col6 li {
    width: 31.8%;
    margin-bottom: 2.5rem !important;
    margin-top: 0rem !important;
}

.topCamp-col6 li {
    width: 31.8%;
    margin-bottom: 0rem !important;
    margin-top: 0rem !important;
}

.topCamp-col6 li:nth-child(4),
.topCamp-col6 li:nth-child(5),
.topCamp-col6 li:nth-child(6) {
    margin-top: 2.5rem !important;
}

.single .thumbnail .slick-track {
    transform: unset !important;
}

.pageChildrenLink li:nth-child(2) {
    background-position: 50% 20%;
}

.error404 #search-filter-form-162 {
    margin: 2rem 0 0 0;
}

.productPicture p.has-small-font-size {
    margin-top: 0.5rem;
}

.productSlider .thumbnail {
    opacity: 0;
    transition: opacity .1s linear;
}

.productSlider .thumbnail.slick-initialized {
    opacity: 1;
}

@media only screen and (max-width: 1000px) {
    .topCamp-col5 li:last-child {
        margin-top: 1.5rem;
    }

    .topCamp-col6 li:nth-child(4),
    .topCamp-col6 li:nth-child(5),
    .topCamp-col6 li:nth-child(6) {
        margin-top: 1.5rem !important;
    }

    .topCamp-col5,
    .topCamp-col6 {
        padding: 2rem 0;
    }

    .productLeft h3,
    .productRight h3 {
        line-height: 1.5;
        font-size: 3.2rem;
    }

    .productLeft h3 span,
    .productRight h3 span {
        margin-top: 0.5rem;
    }
}

@media only screen and (max-width : 782px) {
    .single article p.active {
        margin-bottom: 1rem;
    }

    .wp-block-group .GroupPattern_1 {
        padding-left: 0%;
    }

    .tableSidePic {
        padding: 0 15%;
    }

    .pic3-4col-3col {
        padding-left: 0;
    }

    .topCamp-col6 li {
        width: 48.5%;
    }

    .topCamp-col6 li:nth-child(3) {
        margin-top: 1.5rem !important;
    }
}

@media print {
    header {
        display: none;
    }
}

body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* --- 商品詳細ページ全体 --- */
.articleContents {
    line-height: 1.8;
    /* 英語の可読性を高めるゆったりした行間 */
    color: #333;
}

/* --- カラムの調整（画像と文字の間隔） --- */
.productPicture,
.productSlider {
    gap: 4rem !important;
    margin-bottom: 6rem;
}

/* --- H4見出し：二重線をやめてアクセントライン --- */
.articleContents h4.wp-block-heading {
    font-size: 2.0rem !important;
    font-weight: 700 !important;
    color: #0e2884 !important;
    padding-bottom: 1rem;
    margin-top: 1rem !important;
    margin-bottom: 2rem !important;
    letter-spacing: 0.05rem;
    border-bottom: 1px solid #e0e0e0;
    /* 薄い下線 */
    position: relative;
}

.articleContents .productPicture h4.wp-block-heading,
.articleContents .productSlider h4.wp-block-heading {
    margin-bottom: 1rem !important;
}

/* 見出しの左端だけに濃い青のラインを重ねる */
.articleContents h4.wp-block-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 5rem;
    height: 3px;
    background-color: #0e2884;
}

.articleContents .FeaturesSteps h4.h4Lowercase:not(:first-of-type) {
    margin-top: 4rem !important;
}


/* --- 1階層目（親リスト）のデザイン --- */
.articleContents ul.wp-block-list {
    padding-left: 1.2rem;
    margin-bottom: 2.5rem;
}

.articleContents ul.wp-block-list > li {
    margin-bottom: 1.2rem;
    /* 項目間の余白 */
    list-style-type: disc !important;
    /* ここを白丸に統一 */
    color: #333;
    /* 文字色 */
}

/* --- 2階層目（子リスト）のデザイン --- */
.articleContents ul.wp-block-list li ul {
    list-style-type: none !important;
    /* 子リストの丸を消してハイフンに備える */
    padding-left: 0 !important;
    /* ハイフン用にインデントをリセット */
    margin-top: 0.8rem;
    /* 親項目との距離 */
    margin-bottom: 1rem;
}

.articleContents ul.wp-block-list li ul li {
    position: relative !important;
    padding-left: 1.5rem !important;
    /* ハイフンを置くスペース */
    margin-bottom: 0.6rem !important;
    /* 子リスト同士は少し詰める */
    list-style-type: none !important;
    /* 念押しで丸を消去 */
    font-size: 0.95em;
    /* 子リストを少し小さくして親子感を出す */
    color: #555;
    /* 子リストを少しだけ薄くして読みやすく */
}

/* 子リストのハイフン（擬似要素） */
.articleContents ul.wp-block-list li ul li::before {
    content: "–" !important;
    /* 綺麗な長めのハイフン */
    position: absolute !important;
    left: 0.2rem !important;
    /* 白丸の垂直ラインに合わせる */
    color: #0e2884 !important;
    /* ハイフンだけアクセントカラー */
    font-weight: bold !important;
}

/* リストがその親要素（カラムなど）の中で一番最後にある場合のみ、マージンを消す */
.articleContents .productSlider .wp-block-list:last-child,
.articleContents .productPicture .wp-block-list:last-child,
.articleContents .productSlider ul.wp-block-list:last-child > li:last-child,
.articleContents .productPicture ul.wp-block-list:last-child > li:last-child {
    margin-bottom: 0 !important;
}

/* カラム内の一番上の要素（H4など）の余白を消して、画像と高さを合わせる */
.productPicture .wp-block-column > *:first-child,
.productSlider .wp-block-column > *:first-child {
    margin-top: 0 !important;
}

/* カラム全体の垂直揃え（CSSで強制する場合） */
.productPicture,
.productSlider {
    align-items: flex-start;
    /* 上揃え */
}

/* 1. カラム全体の高さを揃えて、画像もそれに追従させる */
.productPicture {
    align-items: stretch !important;
    /* 左右のカラムの高さを強制一致 */
}

/* 2. 左側のメイン画像（Featured Image） */
.productPicture .wp-block-post-featured-image {
    margin: 0 !important;
    height: 100% !important;
}

.productPicture .wp-block-post-featured-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* はみ出しをカットして枠を埋める */
    aspect-ratio: 1 / 1;
    /* メインは正方形を維持 */
}

/* 3. 右側のサブ画像（Featuresの下の画像） */
.productPicture .wp-block-column:last-child,
.productSlider .wp-block-column:last-child {
    display: flex;
    flex-direction: column;
}

.productPicture .wp-block-image,
.productSlider .wp-block-image {
    margin-top: auto !important;
    /* これで画像を常に一番下に押し下げる（下揃え） */
    margin-bottom: 0 !important;
}

.productPicture .wp-block-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
    /* サブ画像は全体を見せる contain */
    vertical-align: bottom;
}

/* 親要素：マウス反応のトリガー */
.blogIncWrap,
.archiveContents {
    cursor: pointer;
}

/* ==========================================================================
   一覧・詳細 共通：窓ズーム（枠内拡大）設定
   ========================================================================== */

/* 一覧ページ & 詳細ページ共通で製品名リンクの色を制御 */
.postProducts .archiveContents h2 a,
.articleContents .blogIncWrap .internal_link {
    transition: color 0.4s ease;
    opacity: 1 !important;
}

/* ホバー時にニッシンブルーへ */
.postProducts .archiveContents:hover h2 a,
.articleContents .blogIncWrap:hover .internal_link {
    color: #0e2884 !important;
}

/* 1. 画像の親（aタグ）を「窓」にする */
.postProducts .archiveContents a:has(img),
/* 一覧ページ */
.articleContents .blogIncMain a {
    /* 詳細ページ関連商品 */
    display: block;
    overflow: hidden;
    /* はみ出しをカット */
    width: 100%;
}

/* 2. 画像自体の設定とアニメーション */
.postProducts .archiveContents img,
.articleContents .blogIncMain img {
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* 3. ホバー時のズームエフェクト（0.8統一） */
/* カード全体をホバーした時に、中の画像だけを拡大させる */
.postProducts .archiveContents:hover img,
.articleContents .blogIncWrap:hover .blogIncMain img {
    opacity: 0.8 !important;
    transform: scale(1.1) !important;
}

/* 4. 二重透過の防止（テーマのデフォルト0.8を打ち消し） */
.postProducts .archiveContents a:has(img):hover,
.articleContents .blogIncMain a:hover {
    opacity: 1 !important;
}

/* --- 以下、カテゴリアイコン除外設定（一覧ページ用） --- */
.postProducts .archiveContents:has(.content-date:hover) img {
    opacity: 1 !important;
    transform: scale(1) !important;
    /* カテゴリホバー時はズームを止める */
}

/* ==========================================================================
   ========================================================================== */

h3.wp-block-heading.has-background,
h3.wp-block-heading {
    /* 背景と文字色 */
    background-color: #ebf7fe !important;
    color: #0e2884 !important;
    /* 濃いブルーで視認性アップ */

    /* 余白設定 */
    padding: 1.5rem 2.0rem !important;
    /* 内側：上下15px、左右20px */
    margin-top: 6.0rem !important;
    /* 上のセクションとの距離：60px */
    margin-bottom: 3.0rem !important;
    /* 下のコンテンツとの距離：30px */

    /* 装飾：左側に太めのライン */
    border-left: 0.5rem solid #0e2884 !important;

    /* フォント調整 */
    font-size: 2.0rem !important;
    /* 20px */
    font-weight: bold !important;
    line-height: 1.4 !important;
    letter-spacing: 0.05rem !important;
    /* 英語タイトルを美しく */

    /* 整列 */
    display: flex !important;
    align-items: center !important;
}

.articleContents h4.h4Lowercase {
    text-transform: none !important;
    /* 強制解除 */
}

/* FeaturesSteps */
.articleContents .FeaturesSteps h4.wp-block-heading {
    margin-top: 3rem !important;
}

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

    /* 1. 一番最後の要素の余白を消す（1個のみの場合も対応） */
    .wp-block-group__inner-container > .blogIncWrap:last-child {
        margin-bottom: 0 !important;
    }

    /* 2. 最後から2番目の要素の余白を消す（2個並びの場合に対応） */
    .wp-block-group__inner-container > .blogIncWrap:nth-last-child(2) {
        margin-bottom: 0 !important;
    }
}

/* ============================================================
   Product Slider Section - Complete Alignment
   ============================================================ */

/* 1. カラム全体の高さを揃える */
.productSlider {
    align-items: stretch !important;
    /* 左右の高さを強制一致 */
    gap: 4.0rem !important;
}

/* 2. スライダーコンテナを高さ100%に */
.productSlider .wp-block-column:first-child {
    display: flex !important;
    flex-direction: column !important;
}

/* メインスライダーを親の余った高さ全体に広げる */
.product-main-slider.slick-slider {
    flex-grow: 1 !important;
}

/* スライダー内部の画像を枠いっぱいに広げる（重要！） */
.product-main-slider .slick-list,
.product-main-slider .slick-track,
.product-main-slider .slick-slide > div,
.product-main-slider .slick-img {
    height: 100% !important;
}

.product-main-slider .slick-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* これで縦長になっても画像が歪まない */
    border: 0.1rem solid #eee;
}

.single article .thumbnail {
    background-color: transparent !important;
}

/* 2. 灰色背景のエリア（画像が入る部分だけを塗る） */
.product-thumb-slider .slick-list {
    background-color: #F7F7F7 !important;
    /* ここが灰色の正体 */
}

/* 3. サムネイルは高さを固定（潰れないように） */
.product-thumb-slider {
    flex-shrink: 0 !important;
    height: 8.0rem !important;
    /* サムネイルエリアの高さ固定 */
}

/* 4. キャプション（文字）：太字で見やすく改善 */
.wp-element-caption {
    font-size: 1.5rem !important;
    /* 14px */
    font-weight: 700 !important;
    /* しっかり太字 */
    color: #333 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    /* 左揃えで読みやすく */

    margin-top: 1.0rem !important;
    /* 画像との距離 */
    padding: 0 0.2rem !important;

    word-break: break-word;
    /* 長い英単語の改行対策 */
}

.slick-track .thumbnail-img img {
    transition: transform 0.3s ease;
}

.slick-track .thumbnail-img {
    position: relative;
    /*padding-bottom: 8px !important;*/
    /* 線を出すスペース */
}

/* 選択時に下線を表示 */
.slick-track .thumbnail-img.slick-current::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 10%;
    width: 80%;
    height: 3px;
    background: #0e2884;
    border-radius: 2px;
}

/* 選択されていないサムネイル */
.thumbnail-img:not(.slick-current) {
    opacity: 0.5;
    filter: grayscale(30%);
    /* ほんの少し彩度を落とす */
    transition: all 0.3s ease;
}

/* 選択された（またはホップした）サムネイル */
.thumbnail-img.slick-current,
.thumbnail-img:hover {
    opacity: 1;
    filter: grayscale(0%);
    cursor: pointer;
}

@media only screen and (max-width : 1000px) {
    .articleContents ul.wp-block-list {
        margin-bottom: 0.5em;
    }

    .productPicture,
    .productSlider {
        margin-bottom: 3rem;
    }

    /* 3. サムネイルは高さを固定（潰れないように） */
    .product-thumb-slider {
        height: auto !important;
        /* サムネイルエリアの高さ固定 */
    }
}

/* 1. 外枠の隙間をリセット */
.wp-block-embed-youtube {
    margin: 0 !important;
    width: 100% !important;
}

/* 2. 比率を維持するWPの古い仕組み（padding-top）を上書きしてリセット */
.wp-block-embed-youtube .wp-block-embed__wrapper {
    position: relative;
    width: 100% !important;
}

.wp-block-embed-youtube .wp-block-embed__wrapper::before {
    display: none !important;
    /* WPの古い比率維持パーツを消す */
}

/* 3. iframe側で「16:9」を強制する（これが一番確実！） */
.wp-block-embed-youtube iframe {
    width: 100% !important;
    height: auto !important;
    /* 高さを固定せず比率に任せる */
    aspect-ratio: 16 / 9;
    /* どんな幅でも16:9を維持 */
}

/* テーブル全体：上下を黒線で締める */
.productTable table {
    margin: 0 !important;
}

.col2-ListSubTitle {
    border-bottom: 1px solid #333;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.col2-Picture_TXT .wp-block-columns {
    margin-top: 0 !important;
    margin-bottom: 4rem !important;
}

/* --- 2. 入れ子（画像とテキストの横並び用）のカラム自体の余白は消す --- */
.col2-Picture_TXT .wp-block-columns .wp-block-columns {
    margin-bottom: 0 !important;
}

/* --- 3. PC: 769px以上 (2列) --- */
@media (min-width: 783px) {

    /* 一番最後の「行(columns)」だけマージンを消す */
    .col2-Picture_TXT .wp-block-columns:last-child {
        margin-bottom: 0 !important;
    }
}

/* --- 4. スマホ・タブレット: 782px以下 (1列) --- */
@media (max-width: 782px) {

    /* 【スマホ限定】中身（img）がない「列(column)」を非表示にする */
    .col2-Picture_TXT .wp-block-column:not(:has(img)):not(:has(p)) {
        display: none !important;
    }

    /* スマホは全要素が縦に並ぶため、最後の一つだけマージンを消す */
    .col2-Picture_TXT .wp-block-columns:last-child {
        margin-bottom: 0 !important;
    }

    /* カラム内の右側テキスト、最後の段落だけ下の余白をゼロにする */
    .col2-Picture_TXT .wp-block-column p:last-child {
        margin-bottom: 0;
    }
}

/* ============================================================
   Product Specification Table (1rem = 10px version)
   ============================================================ */

/* テーブル全体：上下は黒、左右はグレー */
.wp-block-table.productTable table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;

    /* 上下の「締め」を少し太く（2px） */
    border-top: 2px solid #000 !important;
    border-bottom: 2px solid #000 !important;
}

/* 項目名（左側）：上揃え・太字 */
.productTable td:first-child {
    width: 25%;
    font-weight: bold;
    color: #000;
    padding: 2rem 1.2rem !important;
    vertical-align: top;
    background: transparent;
}

/* データ内容（右側）：上揃え */
.productTable td:last-child {
    padding: 2rem 1.2rem !important;
    vertical-align: top;
    line-height: 1.7;
}

/* 実習目的タグの装飾：枠線のみのシンプル版 */
.tableTags {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.tableTags li a {
    text-decoration: none;
    color: #666;
    font-size: 1.4rem;
    border: 1px solid #ddd;
    padding: 0.2rem 1rem;
    border-radius: 2px;
    background: #f9f9f9;
}

/* Articulator等のコード表記をプレーンに */
.productTable td code {
    background: transparent;
    padding: 0;
    font-family: inherit;
    color: inherit;
    font-size: inherit;
    display: block;
}

/* 5. 咬合器(Articulator)などの太字をバッジ化 */
.productTable tr td:nth-child(2) code strong {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #333333;
    color: #ffffff;
    min-width: 4.5rem;
    /* remに統一 */
    height: 2.2rem;
    margin-right: 1.0rem;
    font-size: 1.1rem;
    border-radius: 0.2rem;
    line-height: 1;
    position: relative;
    top: -2px;
}

/* ============================================================
   4カラム画像（手順など）セクションの最適化 (flow_4col-2col)
   ============================================================ */

/* 2. 画像同士の間隔（Gap）を広げる */
.flow_4col-2col .wp-block-columns {
    gap: 3.5rem !important;
    /* 画像間の余白を25pxに */
}

/* 3. キャプション（figcaption）の改善 */
.flow_4col-2col figcaption {
    /* フォント調整：太字にして視認性アップ */
    font-size: 1.5rem !important;
    /* 15px相当。少し大きく */
    font-weight: 700 !important;
    /* しっかり太字 */
    color: #333 !important;
    /* 濃いグレーでパキッと */

    /* テキストの配置 */
    text-align: left !important;
    /* 左揃えで見やすく */
    line-height: 1.4 !important;

    /* 余白 */
    margin-top: 1.2rem !important;
    /* 画像との距離 */
    padding: 0 0.5rem !important;

    /* 間伸び防止 */
    letter-spacing: 0.02rem !important;
    /* 文字間を詰め気味にして読みやすく */
}

/* 4. 画像自体の調整：すべて正方形で統一 */
.flow_4col-2col figure img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border: 0.1rem solid #eee;
    /* 薄い枠線で清潔感を */
}

/* --- 全体共通：基本のマージンを 3rem に設定 --- */
.flow_4col-2col .wp-block-column {
    margin-bottom: 3rem !important;
}

.wp-block-heading.h4Lowercase.mTop4rem {
    margin-top: 4rem !important;
}

/* --- ① PC: 783px以上 (4列) --- */
@media (min-width: 783px) {

    /* PCでは空対策をせず、最後の1行（4つ）のマージンだけ消す */
    .flow_4col-2col .wp-block-column:nth-last-child(-n+4) {
        margin-bottom: 0 !important;
    }
}

/* --- ② スマホ・タブレット: 782px以下 (2列) --- */
@media (max-width: 782px) {

    /* 【スマホ限定】空のカラムを非表示にして隙間を詰める */
    /* 1. 外側のカラム（スマホで2列になる要素）を対象にする */
    /* 偶数番目(even)かつ、中身に img も figure も p もない場合のみ非表示 */
    .flow_4col-2col > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column:nth-child(even):not(:has(img)):not(:has(figure)):not(:has(p)) {
        display: none !important;
    }

    /* 2列の時のリセット（後ろから3〜4番目は 3rem を維持） */
    .flow_4col-2col .wp-block-column:nth-last-child(-n+4) {
        margin-bottom: 3rem !important;
    }

    /* 最後の1行（2つ）だけマージンを消す */
    .flow_4col-2col .wp-block-column:nth-last-child(-n+2) {
        margin-bottom: 0 !important;
    }
}

/* --- 1. スマホ限定：YouTubeがない方のカラムを完全に消し去る --- */
@media (max-width: 782px) {

    /* カラムの中に iframe (YouTube) が存在しない場合、そのカラムを非表示 */
    .col2-YoutubeBloc .wp-block-column:not(:has(iframe)) {
        display: none !important;
    }
}

/* --- 3. 最終行のマージンリセット --- */
/* PC (2列並びのとき) */
@media (min-width: 783px) {
    .col2-YoutubeBloc .wp-block-column:nth-last-child(-n+2) {
        margin-bottom: 0 !important;
    }
}

/* スマホ (1列になったとき) */
@media (max-width: 782px) {
    .col2-YoutubeBloc .wp-block-column:last-child {
        margin-bottom: 0 !important;
    }
}

/* ============================================================
   5カラム・画像＆解説セクション (picTxt-col5)
   ============================================================ */

/* 3. 画像の調整：正方形で統一 */
.picTxt-col5 figure img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border: 0.1rem solid #eee !important;
}

/* 4. キャプション（文字）：太字で見やすく改善 */
.picTxt-col5 figcaption {
    font-size: 1.5rem !important;
    /* 14px */
    font-weight: 700 !important;
    /* しっかり太字 */
    color: #333 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    /* 左揃えで読みやすく */

    margin-top: 1.0rem !important;
    /* 画像との距離 */
    padding: 0 0.2rem !important;

    /* 文字の高さ（1行でも2行でも位置がズレないように最小高さを設定） 
    min-height: 4.0rem !important; */
    word-break: break-word;
    /* 長い英単語の改行対策 */
}

/* ============================================================
   ボタンデザイン
   ============================================================ */

/* --- 1. すべてのボタンの共通土台 --- */
#formbtn,
.search-filter-input-button,
.linkBtn a,
.linkBtn .wp-block-button__link {
    display: block !important;
    box-sizing: border-box !important;
    margin: 3rem auto 0 auto !important;
    padding: 1.9rem !important;
    border-radius: 40px !important;
    /* 全てカプセル型に統一 */

    /* フォント設定：細字で洗練 */
    font-size: 1.6rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    text-align: center !important;
    text-decoration: none !important;

    /* 矢印アイコンの共通設定 */
    background-repeat: no-repeat !important;
    background-position: 90% center !important;
    background-size: 1.2rem !important;

    cursor: pointer !important;
    transition: all 0.3s ease !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

/* 中身のaタグを親いっぱいに広げる */
.linkBtn .wp-block-button {
    width: 100% !important;
    /* 親の35%に対して100% */
}

/* --- 2. レスポンシブ幅（一括制御） --- */
#formbtn,
.search-filter-input-button,
.linkBtn a,
.linkBtn .wp-block-button__link {
    width: 35% !important;
    /* PCデフォルト */
    min-width: 220px !important;
}

@media (max-width: 1000px) {

    #formbtn,
    .search-filter-input-button,
    .linkBtn a,
    .linkBtn .wp-block-button__link {
        width: 45% !important;
    }
}

@media (max-width: 782px) {

    #formbtn,
    .search-filter-input-button,
    .linkBtn a,
    .linkBtn .wp-block-button__link {
        width: 75% !important;
    }
}

/* --- 3. 個別カラー・背景デザイン --- */

/* A. 濃紺ボタン（お問い合わせ・検索） */
#formbtn,
.search-filter-input-button {
    background-color: #0E2884 !important;
    color: #fff !important;
    border: none !important;
    background-image: url(images/arrow.png) !important;
    box-shadow: 0 4px 12px rgba(14, 40, 132, 0.15) !important;
}

/* --- B. 白抜きボタン（通常のlinkBtn）: ニッシンブルー統一仕様 --- */
.linkBtn a,
.linkBtn .wp-block-button__link {
    background-color: transparent !important;
    color: #0E2884 !important;
    /* ニッシンブルーに変更 */
    border: 1px solid #0E2884 !important;
    /* ニッシンブルーに変更 */
    border-radius: 4rem !important;
    /* 角丸を統一 */

    /* 矢印画像の設定 */
    background-image: url(images/arrowBlue.png) !important;
    background-repeat: no-repeat !important;
    background-position: 90% center !important;
    background-size: 1.2rem auto !important;

    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* C. 強調ボタン（グラデーション：itemWrap / topContact） */
.itemWrap .secBtn.linkBtn a,
.topContact .secBtn.linkBtn a {
    background-image: url(images/arrow.png), linear-gradient(90deg, #e5472b, #ffa700) !important;
    background-position: 92% center, center !important;
    background-size: 1.2rem, cover !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(229, 71, 43, 0.2) !important;
}

/* --- 4. ホバーアクション共通 --- */
#formbtn:hover,
.search-filter-input-button:hover {
    opacity: 0.9 !important;
    transform: translateY(-2px) !important;
    background-position: 93% center !important;
    /* 矢印が少し動く */
}

/* --- ホバーアクション（全ボタン共通） --- */
.linkBtn a:hover,
.linkBtn .wp-block-button__link:hover {
    opacity: 1 !important;
    /* 透過させず塗りつぶしを強調 */
    background-color: #0E2884 !important;
    /* 背景をニッシンブルーに */
    color: #fff !important;
    /* 文字を白に */
    background-image: url(images/arrow.png) !important;
    /* 白い矢印に切り替え */
    background-position: 94% center !important;
    /* 矢印を右にスライド */
    transform: translateY(-3px) !important;
    /* 既存の動きを少し強化 */
    box-shadow: 0 6px 15px rgba(14, 40, 132, 0.2) !important;
}

/* 強調ボタンのみホバー時の矢印位置を微調整 */
.itemWrap .secBtn.linkBtn a:hover,
.topContact .secBtn.linkBtn a:hover {
    background-position: 95% center, center !important;
}

/* トップページのボタンのみを微調整 */
.topProductBlock .linkBtn a,
.topCompany .linkBtn a {
    text-align: left !important;
    width: 60% !important;
    padding-left: 2.8rem !important;
    padding-right: 2.8rem !important;
    margin: inherit !important;
    max-width: 314px;
}

/* --- コンタクトボタン：共通発光ベース --- */
.itemWrap .secBtn.linkBtn a,
.topContact .secBtn.linkBtn a {
    position: relative !important;
    overflow: hidden !important;
    background-color: #f39800 !important;
    z-index: 1;
    transition: background-color 0.3s ease;
}

/* 擬似要素：キリッとした光のライン（両方に適用）*/
.itemWrap .secBtn.linkBtn a::before,
.topContact .secBtn.linkBtn a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    /* 助走距離をしっかり取る */
    width: 100%;
    height: 100%;
    background: linear-gradient(105deg,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 0.7) 50%,
            /* 光をさらにシャープに強調 */
            rgba(255, 255, 255, 0) 70%);
    transform: skewX(-25deg);
    transition: 0s;
    pointer-events: none;
    z-index: 2;
}

/* ホバー時の色変化（両方） */
.itemWrap .secBtn.linkBtn a:hover,
.topContact .secBtn.linkBtn a:hover {
    background-color: #ffaa00 !important;
}

/* ホバー時に光を突き抜けさせる */
.itemWrap .secBtn.linkBtn a:hover::before,
.topContact .secBtn.linkBtn a:hover::before {
    left: 150%;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 1000px) {

    .topProductBlock .linkBtn a,
    .topCompany .linkBtn a {
        width: 60% !important;
    }
}

@media (max-width: 782px) {

    .topProductBlock .linkBtn a,
    .topCompany .linkBtn a {
        width: 60% !important;
    }
}

/* ============================================================
   問い合わせ完了ページ
   ============================================================ */
/* 完了ページ全体のコンテナ */
.thank-you-message {
    text-align: center;
}

/* 完了ページの見出し */
.thank-you-message h2 {
    color: #0E2884;
    font-size: 3.6rem;
    text-align: center;
    letter-spacing: 0.05em;
    margin-bottom: 4.0rem;
    /* 下との余白 */
    padding-bottom: 2.5rem;
    /* 文字と線の距離 */
    position: relative;
    display: block;
}

/* 中央に配置される青いアクセントライン */
.thank-you-message h2::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    /* 中央寄せ */
    width: 6.0rem;
    /* ラインの長さ：60px */
    height: 1px;
    /* ラインの太さ */
    background-color: #0E2884;
}

/* その下のグレーの長い線 */
.thank-you-message h2::before {
    content: '';
    position: absolute;
    bottom: 1px;
    /* 青い線の少し下に配置 */
    left: 50%;
    transform: translateX(-50%);
    width: 20.0rem;
    /* 画像の下線に合わせた長さ */
    height: 1px;
    background-color: #d7d7d7;
    z-index: -1;
}

/* 送信完了の案内文 */
.thank-you-message .main-text {
    font-size: 1.6rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 4.0rem;
}

/* 注釈ボックス */
.notice-box {
    background-color: #f9f9f9;
    padding: 2.4rem 3.2rem;
    border-radius: 0.8rem;
    max-width: 70.0rem;
    margin: 2rem auto 5.0rem auto;
    /* 中央寄せ / 下50px */
    border: 1px solid #eeeeee;
}

.notice-box p {
    font-size: 1.4rem;
    /* 14px */
    line-height: 1.7;
    color: #666;
    text-align: left;
    margin: 0;
}

/* ボタン周りの余白 */
.back-to-home {
    margin-top: 5.0rem;
    /* 50px */
}

/* スマホ対応（782px以下） */
@media (max-width: 76.8rem) .notice-box {
    padding: 2.0rem;
}
}

/* ============================================================
   Legal Pages (Privacy & Terms) Structural Fix - FULL
   ============================================================ */

/* 1. 親階層のグループ（Bloc）の余計なデザインをリセット */
.pageContents .privacy-policyBloc,
.pageContents .terms-of-useBloc,
.pageContents .privacy-policyBloc > .wp-block-group__inner-container,
.pageContents .terms-of-useBloc > .wp-block-group__inner-container {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* 2. 導入文：Bloc直下の最初の段落（またはクラス指定） */
.pageContents .privacy-policyBloc .PPIntroductionTxt,
.pageContents .terms-of-useBloc > .wp-block-group__inner-container > p:first-of-type {
    font-size: 1.6rem !important;
    color: #555 !important;
    margin-bottom: 5.0rem !important;
    text-align: center !important;
    max-width: 96.0rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 2.0 !important;
}

/* 3. 各Article（孫グループ）のカードデザイン */
.privacy-policyBloc .wp-block-group__inner-container > .wp-block-group,
.terms-of-useBloc .wp-block-group__inner-container > .wp-block-group {
    background: #fff !important;
    border: 0.1rem solid #e6e6e6 !important;
    border-radius: 0.4rem !important;
    padding: 3.5rem !important;
    margin-bottom: 3.0rem !important;
    box-shadow: none !important;
}

/* 4. 各Articleのホバー効果 */
.privacy-policyBloc .wp-block-group__inner-container > .wp-block-group:hover,
.terms-of-useBloc .wp-block-group__inner-container > .wp-block-group:hover {
    border-color: #0E2884 !important;
    box-shadow: 0 0.5rem 1.5rem rgba(14, 40, 132, 0.05) !important;
}

/* 5. タイトル (H2) */
.privacy-policyBloc pageContents h2.wp-block-heading,
.terms-of-useBloc pageContents h2.wp-block-heading {
    margin: 0 0 2.0rem 0 !important;
    padding: 0 0 0 1.5rem !important;
    font-size: 2.4rem !important;
    font-weight: 700 !important;
    color: #0E2884 !important;
    border-left: 0.4rem solid #0E2884 !important;
}

/* 6. リスト共通リセット */
.pageContents ol,
.pageContents ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 2.0rem 0 !important;
}

/* 7-1. 番号付きリスト (ol) の設定 */
.pageContents .privacy-policyBloc .wp-block-group,
.pageContents .terms-of-useBloc .wp-block-group {
    counter-reset: policy-counter !important;
    /* 各カードで1から数え直す */
}

.pageContents .privacy-policyBloc ol li,
.pageContents .terms-of-useBloc ol li {
    position: relative !important;
    padding-left: 2.5rem !important;
    margin-bottom: 1.2rem !important;
}

.pageContents .privacy-policyBloc ol li::before,
.pageContents .terms-of-useBloc ol li::before {
    counter-increment: policy-counter !important;
    content: counter(policy-counter) "." !important;
    position: absolute !important;
    left: 0 !important;
    color: #0E2884 !important;
    /* ニッシンブルー */
    font-weight: 700 !important;
}

/* 7-2. 箇条書きリスト (ul) のダイヤ設定 */
.pageContents .privacy-policyBloc ul li,
.pageContents .terms-of-useBloc ul li {
    position: relative !important;
    padding-left: 2.5rem !important;
    margin-bottom: 1.2rem !important;
}

.pageContents .privacy-policyBloc ul li::before,
.pageContents .terms-of-useBloc ul li::before {
    content: "" !important;
    /* 必須 */
    position: absolute !important;
    left: 0.6rem !important;
    top: 1.1rem !important;
    /* 位置微調整 */
    width: 0.6rem !important;
    height: 0.6rem !important;
    background-color: #ccc !important;
    /* 薄い灰色 */
    transform: rotate(45deg) !important;
    /* 四角を傾けてダイヤに */
    display: block !important;
}

/* 8. 右寄せ署名：親Blocの末尾にある段落 */
.pageContents .privacy-policyBloc .has-text-align-right,
.pageContents .terms-of-useBloc .has-text-align-right {
    margin-top: 6.0rem !important;
    padding-top: 3.0rem !important;
    border-top: 0.1rem solid #eee !important;
    font-size: 1.4rem !important;
    color: #777 !important;
    text-align: right !important;
    line-height: 1.8 !important;
}

/* ============================================================
   Legal Pages (Privacy, Terms & Cookie Policy)
   Only active on pages with 'cmplz-document' class on body
   ============================================================ */

/* 1. コンテナ：白いカード型デザインの適用 */
body.cmplz-document .pageContents #cmplz-document.cmplz-document {
    background: #fff !important;
    border: 0.1rem solid #e6e6e6 !important;
    border-radius: 0.4rem !important;
    padding: 3.5rem !important;
    margin: 0 auto !important;
    max-width: 1300px !important;
    box-shadow: none !important;
}

/* 2. 導入の斜体文（更新日など）：中央寄せ・線引き */
body.cmplz-document .pageContents #cmplz-document.cmplz-document p i {
    display: block;
    font-size: 1.6rem !important;
    color: #666 !important;
    margin-bottom: 3.5rem !important;
    text-align: center !important;
    line-height: 1.8 !important;
    font-style: normal !important;
    border-bottom: 1px solid #eee;
    padding-bottom: 2.0rem;
    max-width: 80rem;
    margin: 0 auto;
    margin-top: 2rem;
}

body.cmplz-document .pageContents #cmplz-document.cmplz-document p {
    font-size: 1.6rem;
}

body.cmplz-document .pageContents .cmplz-subtitle {
    color: #0E2884 !important;
    /* ニッシンブルー */
    margin: 2.5rem 0 0.5rem 0 !important;
    font-size: 1.8rem !important;
}

/* 3. タイトル (H2)：ニッシンブルーの左線 */
body.cmplz-document .pageContents h2,
body.privacy-policy .pageContents h2 {
    font-size: 2.8rem !important;
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #0E2884 !important;
    padding: 0 !important;
}

body.cmplz-document .pageContents h2 {
    margin: 4rem 0 1.5rem 0 !important;
}

body.cmplz-document .pageContents h2:first-of-type {
    margin-top: 0 !important;
}

/* 4. 各Articleのホバー効果 */
body.cmplz-document .pageContents #cmplz-document.cmplz-document:hover {
    border-color: #0E2884 !important;
    box-shadow: 0 0.5rem 1.5rem rgba(14, 40, 132, 0.05) !important;
}

/* ============================================================
   UL/OL List Decoration Fix
   ============================================================ */

/* 1. 全体の共通設定 (ulもolも数字にする設定) */
body.cmplz-document .pageContents #cmplz-document.cmplz-document ul,
body.cmplz-document .pageContents #cmplz-document.cmplz-document ol {
    list-style: none !important;
    padding: 0 !important;
    margin: 2.0rem 0 !important;
    /* 両方のリストでカウンターを使用する準備 */
    counter-reset: global-policy-counter !important;
}

/* 2. リスト項目 (li) の共通スタイル */
body.cmplz-document .pageContents #cmplz-document.cmplz-document ul li,
body.cmplz-document .pageContents #cmplz-document.cmplz-document ol li {
    position: relative !important;
    padding-left: 2.5rem !important;
    margin-bottom: 1.2rem !important;
    line-height: 1.7 !important;
    background: none !important;
}

/* 3. 【数字】を表示させる (ulもolも共通で 1. 2. 3. にする) */
body.cmplz-document .pageContents #cmplz-document.cmplz-document ul li::before,
body.cmplz-document .pageContents #cmplz-document.cmplz-document ol li::before {
    counter-increment: global-policy-counter !important;
    content: counter(global-policy-counter) "." !important;
    /* 数字とドット */
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: #0E2884 !important;
    /* ニッシンブルー */
    font-weight: 700 !important;
    font-size: 1.6rem !important;
    display: inline-block !important;
    transform: none !important;
    /* ダイヤの時の回転を解除 */
    width: auto !important;
    height: auto !important;
    background-color: transparent !important;
    /* ダイヤの背景色を消す */
}

body.cmplz-document .pageContents #cmplz-document.cmplz-document ul li::after {
    display: none !important;
}

/* 6. Cookie詳細（details）のデザイン微調整 */
body.cmplz-document .pageContents #cmplz-document.cmplz-document details.cmplz-dropdown {
    border: 1px solid #f0f0f0 !important;
    border-radius: 4px !important;
    margin-bottom: 1.0rem !important;
    background: #fafafa !important;
}

body.cmplz-document .pageContents #cmplz-document.cmplz-document summary.cmplz-service-header {
    padding: 1.5rem !important;
    font-weight: 700 !important;
    color: #0E2884 !important;
    cursor: pointer;
    outline: none;
}

/* 7. 自動翻訳タグ(font)のカラー・サイズ干渉リセット */
body.cmplz-document .pageContents #cmplz-document.cmplz-document font {
    color: inherit !important;
    font-size: inherit !important;
    vertical-align: inherit !important;
}

/* ============================================================
   Sitemap Block Navigation Reset
   標準のドロップダウン挙動を完全に解体し、箇条書きに再構築する
   ============================================================ */

/* 1. 全体コンテナの初期化：flex解除と縦並び強制 */
.sitemapBloc .wp-block-navigation,
.sitemapBloc .wp-block-navigation__container,
.sitemapBloc .wp-block-navigation__submenu-container,
.sitemapBloc .wp-block-navigation__responsive-container-content {
    display: block !important;
    position: static !important;
    /* 浮遊を禁止 */
    visibility: visible !important;
    /* 常に表示 */
    height: auto !important;
    width: auto !important;
    min-width: unset !important;
    opacity: 1 !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: none !important;
    /* アニメーション停止 */
    text-align: left !important;
}

/* 2. 各リスト項目の設定：左寄せとダイヤ用スペース */
.sitemapBloc .wp-block-navigation-item {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 1.0rem 0 !important;
    padding: 0 0 0 2.5rem !important;
    /* ダイヤ◆のための左余白 */
    background: transparent !important;
}

/* 3. 子階層（About Usの下など）のインデント設定 */
.sitemapBloc .wp-block-navigation__submenu-container {
    padding-left: 2.0rem !important;
    /* 親階層よりさらに右へ */
    margin-top: 0.8rem !important;
    margin-bottom: 0.8rem !important;
}

/* 4. ダイヤ（◆）の擬似要素：位置を左端に固定 */
.sitemapBloc .wp-block-navigation-item::before {
    content: "" !important;
    position: absolute !important;
    left: 0.5rem !important;
    top: 1rem !important;
    /* 文字の高さに合わせて微調整 */
    width: 0.6rem !important;
    height: 0.6rem !important;
    background: #ccc !important;
    transform: rotate(45deg) !important;
    display: block !important;
    z-index: 1;
}

/* 5. リンク文字の設定：ホバー時の防止 */
.sitemapBloc .wp-block-navigation-item__content {
    display: inline-block !important;
    width: auto !important;
    padding: 0 !important;
    color: #0E2884 !important;
    /* ニッシンブルー */
    text-decoration: none !important;
    line-height: 1.5 !important;
}

.sitemapBloc .wp-block-navigation-item__content:hover {
    text-decoration: underline !important;
    background: transparent !important;
}

/* 6. 不要なパーツ（開閉ボタンなど）を完全に消去 */
.sitemapBloc .wp-block-navigation-submenu__toggle,
.sitemapBloc .wp-block-navigation__submenu-icon {
    display: none !important;
}

/* 1. 見出しのデザイン */
.sitemapBloc h2.wp-block-heading {
    font-size: 2.8rem !important;
    color: #0E2884 !important;
    border-left: 4px solid #0E2884;
    /* ニッシンブルーのアクセント */
    padding-left: 1.5rem !important;
    margin-bottom: 2.0rem !important;
    line-height: 1.1 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

@media (max-width: 782px) {
    .sitemapBloc h2.wp-block-heading {
        margin-top: 4rem !important;
    }

    .sitemapBloc:first-child h2.wp-block-heading {
        margin-top: 0rem !important;
    }
}

/* ============================================================
   Sitemap Layout Design (1rem = 10px)
   ============================================================ */

/* 1. 全体コンテナのGrid設定（PC版） */
@media (min-width: 783px) {

    /* .sitemapGridContainer の直下にある inner-container をターゲットにします */
    .sitemapGridContainer > .wp-block-group__inner-container {
        display: grid !important;
        /* 列の幅：左(Products)を少し広く、残り2列を均等に */
        grid-template-columns: 1.2fr 1fr 1fr !important;
        /* 隙間：横3.0rem(30px), 縦2.0rem(20px) */
        gap: 2.0rem 3.0rem !important;
        align-items: start !important;
    }

    /* --- 配置パズル（順番の指定） --- */

    /* [左列] Products (2番目の要素) */
    .sitemapBloc:nth-of-type(2) {
        grid-column: 1 !important;
        grid-row: span 3 !important;
        /* 縦に長く場所を確保 */
        order: 1 !important;
    }

    /* [中列] General(1番目) と News(3番目) */
    .sitemapBloc:nth-of-type(1) {
        grid-column: 2 !important;
        order: 2 !important;
    }

    .sitemapBloc:nth-of-type(3) {
        grid-column: 2 !important;
        order: 3 !important;
    }

    /* [右列] Support(4番目) と Legal(5番目) */
    .sitemapBloc:nth-of-type(4) {
        grid-column: 3 !important;
        order: 4 !important;
    }

    .sitemapBloc:nth-of-type(5) {
        grid-column: 3 !important;
        order: 5 !important;
    }

    /* Legalの箱（5番目の要素）をターゲット */
    .sitemapBloc:nth-of-type(5) {
        /* 一番下まで降りてもらう */
        align-self: end !important;
    }
}

/* 2. 階層ごとの見た目微調整（孫カテゴリ対策） */
.sitemapBloc .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 1.5rem !important;
    /* 孫は少し小さく（15px相当） */
    color: #555 !important;
    /* 少し色を落として親子差をつける */
}

/* 孫のダイヤ◆を少し小さく、控えめに */
.sitemapBloc .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item::before {
    width: 0.4rem !important;
    /* 4px相当 */
    height: 0.4rem !important;
    top: 1.1rem !important;
    /* 位置を再調整 */
    background: #ccc !important;
}

/* 3. 各カード（箱）の余白調整 */
.sitemapBloc {
    margin-bottom: 0 !important;
    /* Gridのgapで管理するのでマージン消去 */
    padding: 0 !important;
}

/* ==========================================================================
   1. Base & Hero Section (基本構造 & 演出)
   ========================================================================== */
.dealer-hero {
    width: 100%;
    background: #fff;
    position: relative;
    overflow: clip;
    /* hidden よりも強力に「はみ出し」を無視 */
}

.dealer-container {
    position: relative;
    max-width: 126.0rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.dealer-container {
    display: flex !important;
    align-items: flex-start !important;
    /* 絶対に start！ */
    position: relative;
    height: auto !important;
    /* 親の高さを中身に合わせる */
    min-height: 100%;
    /* 念のため */
}

/* リージョンリスト（ナビ内） */
.region-list {
    list-style: none;
    padding: 0;
    margin: 3.0rem 0 0;
}

.region-list li {
    border-bottom: 0.1rem solid #eee;
    position: relative;
    text-align: left !important;
}

.region-list li:first-child {
    border-top: 0.1rem solid #eee;
}

.region-list li a {
    display: flex;
    align-items: center;
    padding: 2.2rem 0;
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    text-decoration: none !important;
    letter-spacing: 0.05em;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.region-list li .num {
    font-size: 1.2rem;
    color: #ccc;
    margin-right: 2.0rem;
    font-family: serif;
}

.region-list li::after {
    content: "";
    position: absolute;
    bottom: -0.1rem;
    left: 0;
    width: 0;
    height: 0.2rem;
    background: #0e2884;
    transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.region-list li:hover::after {
    width: 100%;
}

.region-list li:hover a {
    color: #0e2884;
    transform: translateX(1.5rem);
}

/* 固定位置の基本設定 */
.dealer-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
    /* ヘッダー直下に配置 */
    align-self: flex-start;
}

/* 7個のメニューを画面内に収めるvh計算 */
.region-list li a {
    display: flex;
    align-items: center;
    /* 1. paddingがheightの内側に含まれるように */
    box-sizing: border-box;
    padding: 0.5rem 0;
    line-height: 1.3;
    /* paddingをリセットして計算で制御 */

    /* 計算式: (画面の高さ - ヘッダーやタイトルの余白) / 7項目 */
    height: calc((100vh - 32rem) / 8);
    min-height: 4rem;
    /* 潰れすぎ防止 */
    max-height: 8rem;
    /* 広がりすぎ防止 */

    font-size: 1.8rem;
    font-weight: 600;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ==========================================================================
   Dealers Worldwide: 右端配置 ＆ ゆったり演出（透過維持）
   ========================================================================== */

/* --- 共通：親要素 --- */
.dealer-visual {
    position: relative;
    flex: 1;
    pointer-events: none;
    z-index: 10;
}

/* ナビ（REGION LIST） */
.dealer-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
    z-index: 100;
}

/* アニメーション設定 */
.map-base,
.map-text {
    transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- 1. PC環境（1001px以上）：右端待機 ＆ 演出 --- */
@media screen and (min-width: 1001px) {

    .map-base {
        width: 130%;
        /* さらに広げて、右側の画面外に大きく待機させる */
        height: auto;
        opacity: 0.5;
        filter: grayscale(100%) brightness(0.95);
        /* 初期位置：さらに右(15rem)へ追いやって、ナビから遠ざける */
        transform: translateX(10.0rem) scale(1.1);
        transform-origin: center right;
    }

    /* ナビ（REGION LIST）全体にホバーした時、地図が右から中央へ */
    .dealer-container:has(.dealer-nav:hover) .map-base {
        opacity: 0.8;
        /* 右からスッと出てくる（中央付近まで寄せる） */
        transform: translateX(5.0rem) scale(1.12);
    }

    .map-text,
    .map-base_sp {
        position: absolute;
        top: 0;
        left: 0;
        width: 130%;
        opacity: 0;
        visibility: hidden;
        transform: translateX(10.0rem) scale(1.1);
        transform-origin: center right;
        z-index: 20;
    }

    /* 各エリアホバー時の個別マップ演出 */
    .dealer-container:has(.nav-africa:hover) .map-africa,
    .dealer-container:has(.nav-asia:hover) .map-asia,
    .dealer-container:has(.nav-central-south-america:hover) .map-central-south-america,
    .dealer-container:has(.nav-europe:hover) .map-europe,
    .dealer-container:has(.nav-russia-cis:hover) .map-russia-cis,
    .dealer-container:has(.nav-middle-east:hover) .map-middle-east,
    .dealer-container:has(.nav-north-america:hover) .map-north-america,
    .dealer-container:has(.nav-oceania:hover) .map-oceania,
    .dealer-container:has(.nav-central-west-asia:hover) .map-central-west-asia {
        opacity: 0.95 !important;
        visibility: visible !important;
    }
}

/* --- 2. iPad・スマホ環境（1000px以下）：全出し・固定 --- */
@media screen and (max-width: 1000px) {
    .map-base {
        opacity: 0 !important;
    }

    .map-base_sp {
        opacity: 0.3 !important;
    }

    .map-text {
        width: 100%;
        visibility: visible !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .dealer-visual {
        min-height: 250px !important;
        /* ここを auto にせず、適切な高さを数値で指定 */
        height: 40vw !important;
        margin-top: -2rem;
    }

    .dealer-section {
        padding-top: 4.0rem !important;
    }
}

/* ==========================================================================
   3. Dealer List & Card Design
   ========================================================================== */
.dealer-list-wrapper {
    width: 100%;
    padding: 0 0 0 2.0rem;
}

.dealer-section {
    padding-top: 6.0rem;
}

.pageContents.dealer-section:last-child {
    padding-top: 0 !important;
}

.area-title {
    font-size: 2.6rem;
    font-weight: 700;
    color: #333;
    border-bottom: 0.2rem solid #333;
    padding-bottom: 1.5rem;
    margin-bottom: 4.0rem;
    letter-spacing: 0.1em;
}

/* カード本体 */
.country-block {
    display: flex;
    flex-direction: column;
    background: #f9f9f9;
    padding: 2.5rem 2.0rem;
    border-radius: 0.8rem;
    border: 0.1rem solid #eee;
    transition: all 0.3s ease;
}

.country-block:hover {
    background: #fff;
    border-color: #0e2884;
    box-shadow: 0 1.0rem 3.0rem rgba(14, 40, 132, 0.08);
    transform: translateY(-0.5rem);
}

.country-name {
    font-size: 1.8rem;
    color: #0e2884;
    margin-bottom: 1.5rem;
    font-weight: 700;
    border-left: 0.3rem solid #0e2884;
    padding-left: 1.2rem;
    letter-spacing: 0.05em;
}

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

.dealer-card .company-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 1.2rem;
    line-height: 1.4;
    min-height: 4.4rem;
}

.dealer-card .contact-info {
    flex-grow: 1;
    border-top: 0.1rem solid #eee;
    padding-top: 1.5rem;
}

.dealer-card .contact-info p {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    color: #555;
    display: flex;
    /* アイコンと文字を横並びに */
    align-items: flex-start;
    /* アイコンを上揃えに（複数行になってもOK） */
    gap: 1rem;
    /* アイコンと文字の隙間 */
    /* --- 追加 --- */
    width: 100%;
    /* 親の幅いっぱいに指定 */
    box-sizing: border-box;
}

.dealer-card .sns-text {
    font-size: 1.3rem;
    line-height: 1.6;
}

/* テキスト（spanやa）を囲む要素への対策 */
.dealer-card .contact-info p span,
.dealer-card .contact-info p a {
    flex: 1;
    /* アイコン以外の余白をすべて使う */
    min-width: 0;
    /* 長いメアドを強制改行 */
    overflow-wrap: break-word;
}

/* アイコンの幅を固定して文字の位置を揃える */
.dealer-card .contact-info i {
    width: 1.8rem;
    /* アイコンの幅を揃える */
    text-align: left;
    color: #666;
    /* アイコンの色（お好みで） */
    margin-top: 0.4rem;
    /* 文字と高さを微調整 */
    /* --- 追加 --- */
    flex-shrink: 0;
}

/* ボタン周り */
.external-links {
    margin-top: 2.0rem;
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.web-link,
.sns-link {
    font-size: 1.2rem;
    color: #0e2884;
    border: 0.1rem solid #0e2884;
    padding: 0.6rem 1.0rem;
    text-decoration: none !important;
    font-weight: 600;
    border-radius: 0.4rem;
    background: #fff;
    transition: 0.3s;
    white-space: nowrap;
}

.web-link:hover,
.sns-link:hover {
    background: #0e2884;
    color: #fff;
}

/* カレント時の文字色とライン */
.region-list li.current a {
    color: #0e2884 !important;
}

.region-list li.current::after {
    width: 100% !important;
}

.dealer-notes {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed #eee;
    font-size: 1.4rem;
}

.dealer-notes p {
    margin-top: 1.5rem;
}

/* ==========================================================================
   4. Media Queries
   ========================================================================== */

/* PC：1001px以上 (Sticky追従) */
@media screen and (min-width: 1001px) {
    .dealer-container {
        display: flex !important;
        align-items: flex-start !important;
        gap: 4.0rem;
    }

    .dealer-nav {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 170px !important;
        flex: 0 0 28.0rem;
        height: fit-content !important;
        align-self: flex-start !important;
        z-index: 10;
    }

    .dealer-content-right {
        flex: 1;
        min-width: 0;
        z-index: 10
    }

    .dealer-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3.0rem 2.0rem;
        align-items: stretch;
    }
}

/* タブレット・スマホ：1000px以下 */
@media screen and (max-width: 1000px) {
    .dealer-container {
        display: block !important;
    }

    .dealer-nav {
        width: 100% !important;
        position: static !important;
        margin-bottom: 6.0rem;
    }

    .dealer-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3.0rem 2.0rem;
    }

    .map-base {
        width: 100% !important;
        transform: none !important;
        opacity: 0.8;
    }

    .dealer-list-wrapper {
        width: 100%;
        padding: 0;
    }
}

/* スマホ：782px以下 */
@media screen and (max-width: 782px) {
    .dealer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 2.0rem 1.0rem;
    }

    .company-name,
    .address,
    .mail {
        word-break: break-all;
        overflow-wrap: break-word;
    }
}

/* 地図エリアの親：ここを 0 にしない */
.dealer-visual {
    position: relative;
    width: 100%;
    height: 30vw;
    /* 画面横幅の半分くらいの高さを強制確保 */
    min-height: 400px;
    /* 最低でもこれくらいは確保 */
}

/* 中身の画像：浮いていても親の height で保護 */
.map-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   4. ipad用
   ========================================================================== */

/* サイドナビもふわっと消えるように設定 */
.dealer-nav {
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* クラスがついたら消す */
.dealer-nav.is-hidden-ipad {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
}


/* ==========================================================================
   4. ipad用
   ========================================================================== */
/* ロゴのサイズ調整 */
.custom-header .h_logo img {
    height: 40px;
    /* iPad/スマホで見やすいサイズ */
    width: auto;
    margin: 10px;
}

/* サイドCONTACTボタン：左側に常駐 */
#fixed-side-contact {
    position: fixed;
    left: 0;
    top: 55%;
    /* 真ん中より少し下 */
    transform: translateY(-50%);
    z-index: 9998;
    background: #d63638;
    color: #fff;
    padding: 15px 7px;
    writing-mode: vertical-rl;
    /* 縦書き */
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    border-radius: 0 5px 5px 0;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   Nissin Navigation Unified Edition (Home & Subpages)
   ============================================================ */

/* --- [1] ヘッダー全体：画像に重ねる --- */
#site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2.0rem 4.0rem;
    z-index: 999;
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    /* 段落ち防止 */
    gap: 5.0rem;
}

/* ロゴ */
.nissin-header-logo {
    flex-shrink: 0;
}

.nissin-header-logo img {
    height: 4.5rem;
    width: auto;
    display: none;
}

body.home:not(.is-scrolled) .logo-white {
    display: block !important;
}

body:not(.home) .logo-blue,
body.is-scrolled .logo-blue {
    display: block !important;
}

/* --- [2] PCナビ：横並び（pc-horizontal時） --- */
.nissin-main-nav {
    display: flex;
    align-items: center;
}

.pc-horizontal {
    display: flex;
    list-style: none;
    gap: 3.0rem;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.pc-horizontal > li > a {
    color: #fff;
    font-weight: bold;
    font-size: 1.5rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 8rem;
}

/* 下層ページ & スクロール時の文字色 */
body:not(.home) .pc-horizontal > li > a,
body.is-scrolled .pc-horizontal > li > a {
    color: #333;
}

/* PCサブメニュー（白い帯） */
.pc-horizontal > li {
    position: static;
}

.pc-horizontal .sub-menu {
    position: fixed;
    top: 8.0rem;
    /* ヘッダーの高さに合わせる */
    left: 0;
    width: 100vw;
    background: #fff;
    /* 影の設定を変更：垂直方向にだけ伸ばし、上方向の広がりを抑える */
    box-shadow: 0 15px 20px -10px rgba(0, 0, 0, 0.1);
    padding: 4.0rem 10%;
    display: flex;
    gap: 5.0rem;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.pc-horizontal > li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
}

.pc-horizontal .sub-menu li a {
    color: #333 !important;
    font-weight: normal;
}

.pc-horizontal .sub-menu::after {
    content: "IMAGE";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 180px;
    margin-left: auto;
    color: #ddd;
}

/* PC矢印 */
.pc-horizontal .menu-item-has-children > a::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-left: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: 0.3s;
}

/* --- [3] ハンバーガー --- */
#nissin-hamburger {
    position: fixed !important;
    right: 2.0rem;
    top: 1.5rem;
    /*上下中央配置のためピクセル指定*/
    width: 5rem;
    /*上下中央配置のためピクセル指定*/
    height: 5rem;
    /*上下中央配置のためピクセル指定*/
    background: #0E2884 !important;
    border-radius: 5px;
    z-index: 100002 !important;
    border: none;
    cursor: pointer;
    display: none !important;
}

#nissin-hamburger span {
    display: block;
    width: 2.6rem;
    height: 2px;
    background: #fff;
    margin: 6px auto;
    transition: 0.4s;
    position: relative;
}

#nissin-hamburger.active span:nth-of-type(1) {
    top: 8px;
    transform: rotate(45deg);
}

#nissin-hamburger.active span:nth-of-type(2) {
    opacity: 0;
}

#nissin-hamburger.active span:nth-of-type(3) {
    top: -8px;
    transform: rotate(-45deg);
}

/* 出現条件の統合（スマホ全般 or PCの下層・スクロール時） */
@media screen and (max-width: 1000px) {
    #nissin-hamburger {
        display: block !important;
    }

    .nissin-main-nav:not(.active) {
        display: none !important;
    }
}

@media screen and (min-width: 1001px) {

    body.is-scrolled #nissin-hamburger {
        display: block !important;
    }

    /* アクティブでない時は横並びナビを隠す */
    body.is-scrolled .nissin-main-nav:not(.active) {
        display: none !important;
    }
}

#fixed-contact-trigger:hover {
    padding-right: 1.2rem !important;
}

/* --- [5] ドロワーモード（共通・ガタつき修正） --- */
.nissin-main-nav.active {
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    width: 80% !important;
    max-width: 320px !important;
    height: 100vh !important;
    background: #fff !important;
    z-index: 100001 !important;
    display: block !important;
    padding-top: 8rem !important;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
}

.drawer-vertical {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- 1行のスタイル（高さ統一） --- */
.drawer-vertical li a {
    position: relative;
    display: flex !important;
    align-items: center;
    /* --- 高さの黄金比設定 --- */
    height: 8vh;
    /* 基本は画面比率 */
    max-height: 6.4rem;
    /* 【追加】PCなどデカい画面でも64pxで止める */
    min-height: 5.0rem;
    /* 【追加】極端に小さい画面でも50pxは確保 */
    /* ------------------------ */
    padding: 0 60px 0 2.0rem;
    /* 右にスイッチ分の余白を固定 */
    color: #333 !important;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    box-sizing: border-box;
}

.drawer-vertical .menu-item-has-children > a::before {
    content: '+';
    position: absolute;
    /* 「static」になってたら「absolute」に戻す！ */
    right: 0;
    top: 0;
    width: 60px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 2rem;
    color: #0E2884;

}

/* 開いた時に「－」に変える */
.drawer-vertical .menu-item-has-children > a.is-open::before {
    content: '\2013';
    /* En Dash (少し長めの横棒) */
    font-size: 2rem;
    /* マイナスは細く見えるので、少し大きく */
    color: #0E2884;
}

/* 一番最初のメニュー項目だけに上の境界線を入れる */
.drawer-vertical > li:first-child > a {
    border-top: 1px solid #eee;
}

/* ガタつき防止：サブメニュー設定 */
.drawer-vertical .sub-menu {
    display: none;
    background: #f9f9f9;
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}

.drawer-vertical .sub-menu li a {
    padding: 1.5rem 2.0rem 1.5rem 3.5rem !important;
    font-size: 1.5rem;
    font-weight: normal;
}

/* 項目を押した瞬間に背景を少し暗くする */
.drawer-vertical li a:active {
    background-color: #f0f0f0 !important;
    transition: background-color 0.1s;
}

/* オーバーレイ */
#nissin-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100000;
    display: none;
}

/* ============================================================
   Nissin Navigation Unified Edition (Home & Subpages)　デザイン調整
   ============================================================ */

/* --- [1] ヘッダーのレイアウト調整 --- */
.header-row {
    display: flex;
    align-items: center;
    /* ロゴとナビを両端に配置 */
    justify-content: space-between;
    width: 100%;
    gap: 2.0rem;
    /* 必要最低限の余白 */
}

/* ナビゲーション自体を右寄せにする */
.nissin-main-nav {
    display: flex;
    justify-content: flex-end;
    /* 右端に寄せる */
    flex: 1;
    /* 余ったスペースをナビが占有 */
}

/* --- [2] PCナビ項目の均一配置 --- */
.pc-horizontal {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    /* 項目間の余白を均等に（gapで調整する） */
    gap: 3.5rem;
    align-items: center;
}

/* --- サブメニューが開いている時のヘッダー背景 --- */
body.is-sub-open #site-header {
    background: #fff !important;
    transition: background 0.3s ease;
}

/* --- サブメニューが開いている時のロゴ切り替え --- */
/* 白ロゴを隠して青ロゴを出す */
body.is-sub-open #site-header .logo-white {
    display: none !important;
}

body.is-sub-open #site-header .logo-blue {
    display: block !important;
}

/* --- サブメニューが開いている時のナビ文字色 --- */
/* ホーム画面かつスクロール前でも、サブメニューが開いたら文字を青くする */
body.is-sub-open .pc-horizontal > li > a {
    color: #333 !important;
}

/* ヘッダーの高さを固定 */
#site-header {
    height: 8.0rem;
    /* 高さを指定 */
    padding: 0 4.0rem;
    /* 上下のpaddingを0にして中央揃えしやすくする */
    display: flex;
    align-items: center;
    /* 中身を縦中央に */
}

/* サブメニューをヘッダーの真下に配置 */
.pc-horizontal .sub-menu {
    position: fixed;
    top: 8.0rem;
    /* ヘッダーの高さと同じ数値 */
}

body:not(.home) #site-header {
    /* 影の設定を変更：垂直方向にだけ伸ばし、上方向の広がりを抑える */
    box-shadow: 0 15px 20px -10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    position: absolute;
}

body:not(.home):has(.archive-top) #site-header {
    top: -8rem !important;
}

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

    body:not(.home):has(.archive-top) #site-header,
    body:not(.home).page-template-page-newitem #site-header {
        /* 影の設定を変更：垂直方向にだけ伸ばし、上方向の広がりを抑える */
        /*box-shadow: none;*/
        top: -7rem !important;
    }
}

/* --- [4] コンタクトボタン（左固定） --- */
#fixed-contact-trigger {
    position: fixed !important;
    left: 0;
    top: 35%;
    background: #FF870D !important;
    /* 元のオレンジ */
    color: #fff !important;
    padding: 2.5rem 0.7rem !important;
    writing-mode: vertical-rl;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 1.3rem;
    border-radius: 0 5px 5px 0;
    z-index: 10000;

    /* 滑らかさと背景変化をセット */
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        padding-left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        /* バウンドするイーズ */
        background-color 0.3s ease;

    overflow: hidden;
    /* 光の筋をはみ出させないため */
}

/* 擬似要素で「光の筋」を作る */
#fixed-contact-trigger::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 100%);
    transition: 0s;
    /* ホバー外した時は一瞬で戻す */
}

/* ホバー時の変化 */
#fixed-contact-trigger:hover {
    padding-left: 1.5rem !important;
    background-color: #ff9d3a !important;
    /* 明るいオレンジに光る（透けない） */
}

/* ホバー時に光の筋を走らせる */
#fixed-contact-trigger:hover::before {
    top: 100%;
    transition: 0.6s ease-in-out;
}

/* 1305px以下で隠す設定は維持 */
@media screen and (max-width: 1350px),
screen and (max-height: 500px) {
    #fixed-contact-trigger {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

.menu-item-200,
.menu-item-199 {
    display: none;
}

#site-header {
    height: 8.0rem;
    padding: 0 2.0rem;
    /* 左右の40px余白 */
    display: flex;
    /* ここをflexにする */
    align-items: center;
    /* これで高さ中央を絶対死守 */
}

.header-inner {
    width: 100%;
    /* headerのpaddingの内側いっぱいに広げる */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* これで「ロゴ」と「ナビ側」を両端に */
}

.header-row {
    display: flex;
    align-items: center;
    width: 100%;
    /* これで中身が右まで行けるようにする */
}

/* ナビを右端へ押し出す */
#nissin-nav-container {
    margin-left: auto;
    /* 左側を最大まで空ける */
}

.pc-horizontal {
    display: flex;
    align-items: center;
    gap: 3.5rem;
    margin: 0;
}

.category h1,
.tag h1,
.page-template-default h1,
.page-template-page-about-us h1,
.page-template-page-company-about h1,
.page-template-page-corporate-profile h1,
.page-template-page-dealers-worldwide h1,
.page-template-page-mission-statement h1,
.page-template-page-message-from-the-president h1,
.page-template-page-product-identification-guide h1 {
    text-align: center;
    font-size: 3.8rem;
    color: #0E2884;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 23rem;
    padding: 0 2rem;
    text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
    font-family: 'Noto Serif', serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 5rem;
}

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

    .category h1,
    .tag h1,
    .page-template-default h1,
    .page-template-page-about-us h1,
    .page-template-page-company-about h1,
    .page-template-page-corporate-profile h1,
    .page-template-page-dealers-worldwide h1,
    .page-template-page-mission-statement h1,
    .page-template-page-message-from-the-president h1,
    .page-template-page-product-identification-guide h1 {
        font-size: 3.3rem;
    }
}

.nissin-header-logo img {
    height: 4.0rem;
    /* 高さを指定（8remの半分くらいが綺麗） */
    width: auto;
    /* 横は比率を維持 */
    margin: 0;
    /* 余計なマージンをリセット */
}

.archive-top {
    background-image: url("images/topArchiveBg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-top: 8rem;
    height: 23rem;
    overflow: hidden;
}

@media only screen and (max-width : 1000px) {
    .archive-top {
        margin-top: 7rem;
        height: 18rem;
    }

    .category h1,
    .tag h1,
    .page-template-default h1,
    .page-template-page-about-us h1,
    .page-template-page-company-about h1,
    .page-template-page-corporate-profile h1,
    .page-template-page-dealers-worldwide h1,
    .page-template-page-mission-statement h1,
    .page-template-page-message-from-the-president h1,
    .page-template-page-product-identification-guide h1 {
        height: 18rem;
    }

    /* --- [3] ハンバーガー --- */
    #nissin-hamburger {
        top: 1rem !important;
    }

    #site-header {
        height: 7.0rem;
    }

}

/* 文字の上をクリックした時に判定がズレないように念のため追加 */
.drawer-vertical .menu-item-has-children > a * {
    pointer-events: none;
}

/* ドロワー時の言語ボタン専用スタイル：【修正】親メニューの直下（JAPANESE / SPANISH） */
.nissin-main-nav.active #menu-gnavi > li:nth-last-child(1),
.nissin-main-nav.active #menu-gnavi > li:nth-last-child(2) {
    display: inline-block !important;
    width: 50% !important;
    float: left !important;
    box-sizing: border-box !important;
}

/* ボタン自体の装飾 */
.nissin-main-nav.active #menu-gnavi > li:nth-last-child(1) > a,
.nissin-main-nav.active #menu-gnavi > li:nth-last-child(2) > a {
    height: 6.0rem !important;
    display: flex !important;
    /* 中央寄せを効かせるため追加 */
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: #333 !important;
    color: #fff !important;
    border-bottom: none !important;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    text-decoration: none;
}

/* 右側（最後のボタン）にだけ左境界線を入れて区切る */
.nissin-main-nav.active #menu-gnavi > li:nth-last-child(1) > a {
    border-left: 1px solid #555 !important;
}

/* 押した時の反応 */
.drawer-vertical > li:nth-last-child(1) a:active,
.drawer-vertical > li:nth-last-child(2) a:active {
    background: #0E2884 !important;
}

/* floatの解除（重要：これがないと次の要素が崩れます） */
.drawer-vertical::after {
    content: "";
    display: table;
    clear: both;
}

/* スクロールしている間は、マウスが乗っていてもサブメニューを強制非表示 */
body.is-scrolling-now .pc-horizontal .sub-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* bodyの中に #site-header が「ない」場合 */
body:not(.home):not(:has(#archive-top)) #site-header {
    top: -12rem;
}

.page-template-page-newitem #site-header {
    top: -8rem !important;
}

@media screen and (max-width:1000px) {
    .single .breadcrumb-area {
        margin: 11rem 0 4rem 0;
    }

    /* bodyの中に #site-header が「ない」場合 */
    body:not(.home):not(:has(#archive-top)) #site-header {
        top: -11rem;
    }
}

@media only screen and (min-width: 1001px) {

    /* [1] 基本：下層ページ & スクロール後 & サブメニュー展開時 */
    /* クラスを重ねて優先順位を上げる */
    .pc-horizontal > li.menu-item-205 a,
    .pc-horizontal > li.menu-item-206 a,
    body.is-scrolled .pc-horizontal > li.menu-item-205 a,
    body.is-scrolled .pc-horizontal > li.menu-item-206 a,
    body.is-sub-open .pc-horizontal > li.menu-item-205 a,
    body.is-sub-open .pc-horizontal > li.menu-item-206 a {
        height: 3.0rem !important;
        padding: 0 1.2rem !important;
        font-size: 1.25rem !important;
        letter-spacing: 0.05em;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: all 0.3s ease;

        /* 通常は青枠・青文字 */
        border: 1.5px solid #0E2884 !important;
        color: #0E2884 !important;
        background: transparent !important;
    }

    /* [2] トップページ・スクロール前（背景が画像の上にある時だけ白くする） */
    /* サブメニューが開いていない時、という条件も念のため追加 */
    body.home:not(.is-scrolled):not(.is-sub-open) .pc-horizontal > li.menu-item-205 a,
    body.home:not(.is-scrolled):not(.is-sub-open) .pc-horizontal > li.menu-item-206 a {
        border-color: #fff !important;
        color: #fff !important;
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(4px);
    }

    body.home:not(.is-scrolled):not(.is-sub-open) .pc-horizontal > li.menu-item-205 a:hover,
    body.home:not(.is-scrolled):not(.is-sub-open) .pc-horizontal > li.menu-item-206 a:hover {
        color: #0E2884 !important;
        border-color: #0E2884 !important;
    }

    /* [3] ホバー時：青背景に白文字（共通） */
    .pc-horizontal > li.menu-item-205 a:hover,
    .pc-horizontal > li.menu-item-206 a:hover {
        background: #0E2884 !important;
        color: #fff !important;
        border-color: #0E2884 !important;
    }
}

/* 1001px（ドロワー切替）から 1250px（窮屈になり始め）の間を狙い撃ち */
@media only screen and (min-width: 1001px) and (max-width: 1250px) {

    /* 1. 全体の間隔をギュッと詰める */
    .pc-horizontal {
        gap: 2.5rem !important;
        /* 2remから一気に半分以下へ */
    }
}

@media only screen and (min-width: 1001px) {

    /* [1] ヘッダー、サブメニュー、ロゴの全アニメーション速度を統一 */
    #site-header,
    .pc-horizontal .sub-menu,
    .nissin-header-logo img {
        transition: all 0.0s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* 2. サブメニューの「上の線」を消して、ヘッダーと合体させる */
    .pc-horizontal .sub-menu {
        border-top: none !important;
    }
}

.sub-menu {
    z-index: 10001;
}

@media only screen and (min-width: 1001px) {

    /* [1] 外枠：画面いっぱいの白い帯 */
    .pc-horizontal .sub-menu {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        top: 8.0rem !important;
        background-color: #fff !important;
        padding: 5.0rem 0 !important;
        border-top: 1px solid #eee;
        display: block !important;
        text-align: center !important;
        min-height: 35.0rem !important;
        overflow: visible !important;
    }

    /* [2] 文字リスト：中央より「右側」へ縦に並べる */
    .pc-horizontal .sub-menu > li {
        display: block !important;
        float: none !important;
        width: 32.0rem !important;
        /* 中央(50%)から少し右(2rem)にずらして配置 */
        margin: 0 auto 0 calc(50% + 2.0rem) !important;
        text-align: left !important;
    }

    .pc-horizontal .sub-menu > li > a {
        display: block !important;
        padding: 1.5rem 0 !important;
        font-size: 1.6rem !important;
        color: #333 !important;
        border-bottom: 1px solid #f5f5f5;
    }

    /* [3] 画像枠：中央より「左側」へ絶対配置
    .pc-horizontal .sub-menu::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: auto !important;
        right: calc(50% + 2.0rem) !important;
        transform: translateY(-50%) !important;

        display: block !important;
        width: 40.0rem !important;
        height: 26.0rem !important;
        background-size: cover !important;
        background-position: center !important;
        border-radius: 5px;
        z-index: 10;
        background-color: transparent !important;
    } */


    /* --- [4] 画像出し分けロジック（iPad/タッチデバイス対応版） --- 

    .pc-horizontal li.menu-item-190:hover .sub-menu::after,
    .pc-horizontal li.menu-item-190:active .sub-menu::after,
    .pc-horizontal li.menu-item-190:focus-within .sub-menu::after {
        background-image: url("./images/gnavi/productMain.png") !important;
    }

    .pc-horizontal li.menu-item-194:hover .sub-menu::after,
    .pc-horizontal li.menu-item-194:active .sub-menu::after,
    .pc-horizontal li.menu-item-194:focus-within .sub-menu::after {
        background-image: url("./images/gnavi/companyMain.png") !important;
    }

    .pc-horizontal .sub-menu:has(li.menu-item-8411:hover)::after,
    .pc-horizontal .sub-menu:has(li.menu-item-8411:active)::after {
        background-image: url("./images/gnavi/DentalTrainingProductsGnavi.png") !important;
    }

    .pc-horizontal .sub-menu:has(li.menu-item-192:hover)::after,
    .pc-horizontal .sub-menu:has(li.menu-item-192:active)::after {
        background-image: url("./images/gnavi/PatientEducationModelsGnavi.png") !important;
    }

    .pc-horizontal .sub-menu:has(li.menu-item-1945:hover)::after,
    .pc-horizontal .sub-menu:has(li.menu-item-1945:active)::after {
        background-image: url("./images/gnavi/ProductIdentificationGuideGnavi.png") !important;
    }

    .pc-horizontal .sub-menu:has(li.menu-item-196:hover)::after,
    .pc-horizontal .sub-menu:has(li.menu-item-196:active)::after {
        background-image: url("./images/gnavi/companyAboutBg.png") !important;
    }

    .pc-horizontal .sub-menu:has(li.menu-item-197:hover)::after,
    .pc-horizontal .sub-menu:has(li.menu-item-197:active)::after {
        background-image: url("./images/gnavi/companyMessageBg.png") !important;
    }

    .pc-horizontal .sub-menu:has(li.menu-item-195:hover)::after,
    .pc-horizontal .sub-menu:has(li.menu-item-195:active)::after {
        background-image: url("./images/gnavi/companyPhilosophyBg.png") !important;
}*/
}

@media only screen and (min-width: 1001px) {

    /* [3] 画像枠：共通設定（スプライト対応） */
    .pc-horizontal .sub-menu::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        right: calc(50% + 2.0rem) !important;
        transform: translateY(-50%) !important;
        display: block !important;

        /* 枠のサイズ（1枚分）修正：幅を 40.0rem → 39.8rem (2px分) 小さくする */
        width: 39.8rem !important;
        height: 26.0rem !important;

        /* スプライト画像の設定 */
        background-image: url("./images/gnavi/gnavi-sprite.webp") !important;
        background-size: 320.0rem 26.0rem !important;
        /* 40rem × 8枚分 */
        background-repeat: no-repeat !important;
        background-color: transparent !important;

        border-radius: 5px;
        z-index: 10;
    }

    /* --- [4] 画像出し分けロジック（40remずつズラす） --- */

    /* --- Productsグループ (1枚目〜4枚目) --- */

    /* 親項目ホバー時（初期画像：1枚目） */
    .pc-horizontal li.menu-item-190:hover .sub-menu::after,
    .pc-horizontal li.menu-item-190:active .sub-menu::after {
        background-position: 0 0 !important;
    }

    /* Dental Training (2枚目) */
    .pc-horizontal .sub-menu:has(li.menu-item-8411:hover)::after,
    .pc-horizontal .sub-menu:has(li.menu-item-8411:active)::after {
        background-position: -40.0rem 0 !important;
    }

    /* Patient Education (3枚目) */
    .pc-horizontal .sub-menu:has(li.menu-item-192:hover)::after,
    .pc-horizontal .sub-menu:has(li.menu-item-192:active)::after {
        background-position: -80.0rem 0 !important;
    }

    /* Identification Guide (4枚目) */
    .pc-horizontal .sub-menu:has(li.menu-item-1945:hover)::after,
    .pc-horizontal .sub-menu:has(li.menu-item-1945:active)::after {
        background-position: -120.0rem 0 !important;
    }


    /* --- About Usグループ (5枚目〜8枚目) --- */

    /* 親項目ホバー時（初期画像：5枚目） */
    .pc-horizontal li.menu-item-194:hover .sub-menu::after,
    .pc-horizontal li.menu-item-194:active .sub-menu::after {
        background-position: -160.0rem 0 !important;
    }

    /* Message (6枚目) */
    .pc-horizontal .sub-menu:has(li.menu-item-197:hover)::after,
    .pc-horizontal .sub-menu:has(li.menu-item-197:active)::after {
        background-position: -200.0rem 0 !important;
    }

    /* Corporate Profile (7枚目) */
    .pc-horizontal .sub-menu:has(li.menu-item-196:hover)::after,
    .pc-horizontal .sub-menu:has(li.menu-item-196:active)::after {
        background-position: -240.0rem 0 !important;
    }

    /* Mission Statement (8枚目) */
    .pc-horizontal .sub-menu:has(li.menu-item-195:hover)::after,
    .pc-horizontal .sub-menu:has(li.menu-item-195:active)::after {
        background-position: -280.0rem 0 !important;
    }
}

@media only screen and (min-width: 1001px) {

    /* [1] カウンターのリセット（サブメニューが開くたびに1から数える） */
    .pc-horizontal .sub-menu {
        counter-reset: nishin-menu;
    }

    /* [2] 各項目の設定 */
    .pc-horizontal .sub-menu > li {
        counter-increment: nishin-menu;
        /* 番号を1ずつ増やす */
        display: block !important;
        width: 35.0rem !important;
        margin: 0 auto 0 calc(50% + 5.0rem) !important;
        position: relative !important;
        border-bottom: 1px solid #eee !important;
    }

    /* [3] 先頭の小さな数字 (.numの代わり) */
    .pc-horizontal .sub-menu > li::before {
        /* カウンターの値を「01」形式で表示 */
        content: "0"counter(nishin-menu) !important;

        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);

        font-size: 1.2rem !important;
        /* リージョンリストに近い小さめサイズ */
        font-family: "serif", "Times New Roman" !important;
        /* 高級感のあるセリフ体 */
        color: #ccc;
        font-weight: 400;
        transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
        z-index: 2;
    }

    /* ホバー時に数字の色を少し濃くする、または青くする */
    .pc-horizontal .sub-menu > li:hover::before {
        /*color: #0E2884;*/
        /* 文字のスライド（1.5rem）に合わせて、数字も少しだけ動かすとオシャレ */
        transform: translateY(-50%) translateX(0.5rem);
    }

    /* [4] リンクテキストの余白を数字分だけ確保 */
    .pc-horizontal .sub-menu > li > a {
        display: block !important;
        padding: 2.2rem 0 2.2rem 4.0rem !important;
        /* 左側に数字用のスペース(4.0rem)を空ける */
        font-size: 1.8rem !important;
        font-weight: 600 !important;
        color: #333 !important;
        transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    /* ホバー時のテキストスライド（数字を追い越さない程度に） */
    .pc-horizontal .sub-menu > li:hover > a {
        transform: translateX(1.0rem);
        color: #0E2884 !important;
    }

    /* [5] 下ボーダー（先ほどの設定を維持） */
    .pc-horizontal .sub-menu > li::after {
        content: "" !important;
        position: absolute !important;
        bottom: -1px;
        left: 0;
        width: 0;
        height: 0.2rem;
        background: #0E2884 !important;
        transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    .pc-horizontal .sub-menu > li:hover::after {
        width: 100%;
    }
}

@media only screen and (min-width: 1001px) {

    /* [1] 通常時：右と下のボーダーで「く」の字を作り、45度傾けて下に向ける */
    .pc-horizontal .menu-item-has-children > a::after {
        content: "" !important;
        display: inline-block !important;
        width: 6px !important;
        height: 6px !important;
        margin-left: 10px !important;
        border-right: 2px solid currentColor !important;
        border-bottom: 2px solid currentColor !important;

        /* 45度で下向き（∨） */
        transform: translateY(-2px) rotate(45deg) !important;
        transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    /* [2] ホバー時：ニッシンブルー ＋ くるっと真上へ */
    .pc-horizontal .menu-item-has-children:hover > a {
        color: #0E2884 !important;
    }

    .pc-horizontal .menu-item-has-children:hover > a::after {
        /* 45度から180度回して「-135度」にすると真上（∧）を向く */
        transform: translateY(2px) rotate(-135deg) !important;
        color: #0E2884 !important;
    }

    .pc-horizontal .sub-menu > li:first-child {
        border-top: 1px solid #eee !important;
    }
}

.pc-horizontal a:hover,
body:not(.home) .pc-horizontal > li > a:hover {
    color: #0E2884;
}

.pc-horizontal li:has(.sub-menu) a {
    padding: 0 3.5rem;
}

.pc-horizontal li:nth-child(4) a,
.pc-horizontal .menu-item-201 a {
    padding: 0 3.5rem 0 0;
}

.pc-horizontal .menu-item-205 {
    margin: 0 2rem 0 0;
}

@media only screen and (min-width: 1001px) and (max-width: 1250px) {
    .pc-horizontal {
        gap: 0 !important;
    }

    .pc-horizontal li:has(.sub-menu) a {
        padding: 0 2rem;
    }

    .pc-horizontal li:nth-child(4) a,
    .pc-horizontal .menu-item-201 a {
        padding: 0 2rem 0 0;
    }

    .pc-horizontal .menu-item-205 {
        margin: 0 2rem 0 0;
    }
}

.pc-horizontal {
    gap: 0;
}

/* 基本はJSの指示に従って隠す */
/* PC版（min-width）に限定して、AND条件で「完全に何もしない時」だけ隠す */
@media screen and (min-width: 1001px) {
    .home:not(.is-scrolled):not(.is-sub-open) .pc-horizontal .sub-menu {
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* iPadで最下部に到達した時に隠す設定 */
.is-hidden-ipad {
    opacity: 0 !important;
    pointer-events: none !important;
    /* クリックもできないように */
    transition: opacity 0.3s ease;
    /* ふわっと消す */
}

/* ============================================================
   スクロール中の「即消し」と「アニメーション」の両立
   ============================================================ */

/* 1. スクロールが始まった瞬間、JSが .is-hover をつけていても強制的に隠す */
/* クラスを連結させて詳細度を最強にします */
body.is-scrolling-now .pc-horizontal .menu-item-has-children .sub-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
    /* 隙間を見せないためにここは transition 無し */
}

/* display: none を「!important」なしにするか、hover時以外は消す設定を徹底 */
@media screen and (min-width: 1001px) {
    .pc-horizontal .sub-menu {
        display: none;
        /* !important を外す */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease;
        pointer-events: none;
    }

    /* ホバー中だけ表示（スクロール中でない時のみ） */
    body:not(.is-scrolling-now) .pc-horizontal .menu-item-has-children.is-hover > .sub-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto;
    }
}

/* ============================================================
   Product Identification Guide: Classic Table Styles
   ============================================================ */

.ModelNumberTable {
    width: 100% !important;
    overflow-x: auto;
    margin-bottom: 40px !important;
}

.ModelNumberTable table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    table-layout: fixed;
    /* テーブルの外枠は太い黒 */
    border: 2px solid #000000;
}

.ModelNumberTable td {
    border: 1px solid #000000;
    /* セル同士の境界線も黒でハッキリ */
    text-align: center;
    padding: 8px 2px;
    font-size: 16px;
    /* 数字を見やすく少し大きく */
    font-weight: normal;
    vertical-align: middle;
    color: #000;
}

/* 1行目：upper right / left（鮮やかなティール） */
.ModelNumberTable tr:first-child td {
    background-color: #009999 !important;
    color: #ffffff !important;
    font-size: 18px;
    padding: 10px;
}

/* 6行目：lower right / left（赤みのあるコーラルレッド） */
.ModelNumberTable tr:last-child td {
    background-color: #cc6666 !important;
    color: #ffffff !important;
    font-size: 18px;
    padding: 10px;
}

/* ADAの行（2行目と5行目）：非常に薄いグレー */
.ModelNumberTable tr:nth-child(2) td,
.ModelNumberTable tr:nth-child(5) td {
    background-color: #f2f2f2 !important;
    color: #999999;
    /* ADAの文字と数字はグレー */
}

/* FDIの行（3行目）：薄い水色 */
.ModelNumberTable tr:nth-child(3) td {
    background-color: #e6ffff !important;
}

/* FDIの行（4行目）：薄いピンク/パープル系 */
.ModelNumberTable tr:nth-child(4) td {
    background-color: #f2e6f2 !important;
}

/* 両端のラベル列 (ADA / FDI) の文字をハッキリさせる */
.ModelNumberTable td:first-child,
.ModelNumberTable td:last-child {
    font-weight: normal;
    color: #333333;
}

/* --- Product Identification Guide: Classic Table Styles --- */

.ModelNumberTable {
    width: 100% !important;
    overflow-x: auto;
    margin-bottom: 40px !important;
}

.ModelNumberTable table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    table-layout: fixed;
    /* テーブルの外枠は太い黒 */
    border: 2px solid #000000;
}

.ModelNumberTable td {
    border: 1px solid #000000;
    /* セル同士の境界線も黒でハッキリ */
    text-align: center;
    padding: 8px 2px;
    font-size: 16px;
    /* 数字を見やすく少し大きく */
    font-weight: normal;
    vertical-align: middle;
    color: #000;
}

/* 1行目：upper right / left（鮮やかなティール） */
.ModelNumberTable tr:first-child td {
    background-color: #009999 !important;
    color: #ffffff !important;
    font-size: 18px;
    padding: 10px;
}

/* 6行目：lower right / left（赤みのあるコーラルレッド） */
.ModelNumberTable tr:last-child td {
    background-color: #cc6666 !important;
    color: #ffffff !important;
    font-size: 18px;
    padding: 10px;
}

/* ADAの行（2行目と5行目）：非常に薄いグレー */
.ModelNumberTable tr:nth-child(2) td,
.ModelNumberTable tr:nth-child(5) td {
    background-color: #f2f2f2 !important;
    color: #999999;
    /* ADAの文字と数字はグレー */
}

/* FDIの行（3行目）：薄い水色 */
.ModelNumberTable tr:nth-child(3) td {
    background-color: #e6ffff !important;
}

/* FDIの行（4行目）：薄いピンク/パープル系 */
.ModelNumberTable tr:nth-child(4) td {
    background-color: #f2e6f2 !important;
}

/* 両端のラベル列 (ADA / FDI) の文字をハッキリさせる */
.ModelNumberTable td:first-child,
.ModelNumberTable td:last-child {
    font-weight: normal;
    color: #333333;
}

/* ==========================================================================
   Product Identification Guide: 共通レイアウト
   ========================================================================== */

/* テーブルを包むコンテナ：1000pxまで見切れを我慢させる設定 */
.ModelNumberTable {
    width: 100% !important;
    overflow-x: auto;
    margin-bottom: 40px !important;
    padding-bottom: 12px;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

/* --- スクロールバーのデザイン (PC/マウス操作用) --- */
.ModelNumberTable::-webkit-scrollbar {
    height: 4px;
    /* 極細でスマートに */
}

.ModelNumberTable::-webkit-scrollbar-track {
    background: #f5f5f5;
    /* 薄いグレーのレール */
}

.ModelNumberTable::-webkit-scrollbar-thumb {
    background: #555555;
    /* 濃いグレーのカチッとしたつまみ */
    border-radius: 0;
}

.ModelNumberTable::-webkit-scrollbar-thumb:hover {
    background: #333333;
}

/* Firefox用 */
.ModelNumberTable {
    scrollbar-width: thin;
    scrollbar-color: #555555 #f5f5f5;
}

/* ==========================================================================
   歯式テーブル本体 (Dental Notation Table)
   ========================================================================== */

.ModelNumberTable table {
    width: 100%;
    min-width: 800px;
    /* 800pxまで見切れるのを我慢させる */
    border-collapse: collapse;
    table-layout: auto;
    /* 中身に合わせて最適化 */
    border: 2px solid #000000;
    /* 外枠を太く */
}

.ModelNumberTable td {
    border: 1px solid #000000;
    text-align: center;
    padding: 8px 4px;
    font-size: 1.5rem;
    color: #000;
    vertical-align: middle;
    white-space: nowrap;
    /* セル内での改行を禁止 */
}

/* 1行目：上顎ヘッダー（ティール） */
.ModelNumberTable tr:first-child td {
    background-color: #009999 !important;
    color: #ffffff !important;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 10px;
}

/* 6行目：下顎ヘッダー（コーラルレッド） */
.ModelNumberTable tr:last-child td {
    background-color: #cc6666 !important;
    color: #ffffff !important;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 10px;
}

/* ADAの行 (2行目と5行目) */
.ModelNumberTable tr:nth-child(2) td,
.ModelNumberTable tr:nth-child(5) td {
    background-color: #f2f2f2 !important;
    color: #888;
    /* 数字を少し控えめに */
}

/* FDIの行 (3行目：薄い水色) */
.ModelNumberTable tr:nth-child(3) td {
    background-color: #e6ffff !important;
}

/* FDIの行 (4行目：薄い薄紫) */
.ModelNumberTable tr:nth-child(4) td {
    background-color: #f2e6f2 !important;
}

/* 両端のラベル列 (ADA / FDI) */
.ModelNumberTable td:first-child,
.ModelNumberTable td:last-child {
    width: 45px;
    font-weight: bold;
    background-color: #e9e9e9 !important;
}

/* --- テーブル共通：中央の縦線を引く --- */
.ModelNumberTable:has(td[colspan="9"]) td:nth-child(9) {
    border-right: 3px solid #333 !important;
}

.ModelNumberTable:has(td[colspan="6"]) td:nth-child(6) {
    border-right: 3px solid #333 !important;
}

/* --- 上下（タイトルとフッター）の横線を引く --- */
.ModelNumberTable table tr:first-child td {
    border-bottom: 3px solid #333 !important;
}

.ModelNumberTable table tr:last-child td {
    border-top: 3px solid #333 !important;
}

/* --- 左右の端も同じ #333 で締める --- */
.ModelNumberTable tr:first-child td:first-child {
    border-right: 3px solid #333 !important;
    /* cccから変更 */
    font-weight: bold;
}

.ModelNumberTable tr:last-child td:first-child {
    border-right: 3px solid #333 !important;
    /* cccから変更 */
    font-weight: bold;
}

/* --- 3. ADA/FDIの列（両端）の横の線をグレーにする --- */
.ModelNumberTable td:first-child {
    border-right: 2px solid #ccc;
    /* ADA列の右側はグレー */
    font-weight: bold;
    color: #666;
}

.ModelNumberTable td:last-child {
    border-left: 2px solid #ccc;
    /* ADA列の左側はグレー */
    font-weight: bold;
    color: #666;
}

/* ==========================================================================
   スマホ限定：Swipeヒント
   ========================================================================== */
@media (max-width: 950px) and (pointer: coarse) {

    .DTP_ExTable,
    .PEM_ExTable,
    .ModelNumberTable {
        position: relative !important;
        overflow-x: auto !important;
    }

    /* 1. ヒント本体：中央に配置 */
    .DTP_ExTable::before,
    .PEM_ExTable::before,
    .ModelNumberTable::before {
        content: "Swipe \2192";
        position: absolute;
        /* 中央固定なら一旦absoluteに戻し、JSで制御 */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* 完全にど真ん中へ */

        /* 2. 質感：半透明のニッシンブルー */
        background: rgba(14, 40, 132, 0.7);
        /* 透明度を0.7に落として「透け感」を出す */
        backdrop-filter: blur(4px);
        /* ガラス越しのような効果） */
        color: #ffffff;
        padding: 12px 24px;
        font-size: 14px;
        font-weight: bold;
        white-space: nowrap;
        z-index: 100;
        pointer-events: none;
        /* 指の邪魔をしない */

        /* 最初は隠す */
        opacity: 0;
        visibility: hidden;
    }

    /* 3. JS連動：アニメーションで自動消滅 */
    .DTP_ExTable.is-active::before,
    .PEM_ExTable.is-active::before,
    .ModelNumberTable.is-active::before {
        visibility: visible;
        animation: fadeCenterHint 3.0s ease-in-out forwards;
    }
}

/* 4. アニメーション：ふわっと出て、スーッと消える */
@keyframes fadeCenterHint {
    0% {
        opacity: 0;
        transform: translate(-50%, -30%);
    }

    /* 少し下から登場 */
    15% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    /* 定位置へ */
    80% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    /* じっと表示 */
    100% {
        opacity: 0;
        transform: translate(-50%, -60%);
        visibility: hidden;
    }

    /* 上に消える */
}

/* ==========================================================================
   Guide Page Specific Styles (衝突防止用)
   ========================================================================== */

/* --- H3見出しをガイド専用に限定 --- */
.is-guide-page .dealer-section h3.area-title {
    background-color: #ebf7fe !important;
    color: #0e2884 !important;
    padding: 1.5rem 2.0rem !important;
    margin-bottom: 3.0rem !important;
    margin-top: 6rem;
    border-left: 0.5rem solid #0e2884 !important;
    font-size: 2.0rem !important;
    font-weight: bold !important;
    line-height: 1.4 !important;
    letter-spacing: 0.05rem !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: none !important;
}

.is-guide-page .dealer-section {
    padding-top: 0rem !important;
}

.is-guide-page #guide-01 h3 {
    margin-top: 0rem !important;
}

.is-guide-page .guide-content-block h4.wp-block-heading {
    font-size: 2.0rem !important;
    font-weight: 700 !important;
    color: #0e2884 !important;
    padding-bottom: 1rem;
    margin-top: 4.0rem !important;
    /* H3との間隔を考慮して少し調整 */
    margin-bottom: 2.0rem !important;
    letter-spacing: 0.05rem;
    border-bottom: 1px solid #e0e0e0;
    /* ベースの薄い下線 */
    position: relative;
    display: block;
}

/* 左端だけに濃い青の太いラインを重ねるアクセント */
.is-guide-page .guide-content-block h4.wp-block-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    /* 親のborder-bottomにぴったり重ねる */
    width: 5rem;
    height: 3px;
    background-color: #0e2884;
}

/* --- Model ID Breakdown Styles --- */
/* 1rem = 10px 設定 */

/* 案内文（リードテキスト） */
#guide-01 .guide-content-block > p {
    margin-bottom: 3rem;
    /* 30px */
    line-height: 1.8;
}

/* グループごとの外枠（DTP / PEM 共通） */
#guide-01 .wp-block-group {
    background: #f4f9f9;
    margin-bottom: 4rem;
    /* 40px */
    padding-bottom: 4rem;
    /* 40px */
    overflow: hidden;
}

/* タイトル部分（modelNumTitle） */
#guide-01 .modelNumTitle {
    background: #ac5a84;
    /* デフォルトはDTPのピンク系 */
    color: #fff !important;
    padding: 0.5rem 2rem !important;
    /* 15px 20px */
    margin: 0 0 4rem 0 !important;
    /* 下に40px */
    font-size: 1.8rem !important;
    /* 18px */
    border: none !important;
    font-weight: bold;
}

/* タイトル部分（modelNumTitle） */
#guide-01 .modelNumTitle:after {
    display: none !important;
}

/* 2つ目のグループ（PEM）の色を上書き */
/* nth-of-type(3)は、Pタグ, 1つ目のGroupに続く、2つ目のGroupを指します */
#guide-01 .wp-block-group:nth-of-type(2) .modelNumTitle {
    background: #006E69;
    /* PEMのティールグリーン */
}

/* 画像エリアの調整 */
#guide-01 .wp-block-image {
    margin: 0 !important;
    padding: 0 2rem;
    /* 左右に20pxの遊び */
    display: flex;
    justify-content: center;
}

#guide-01 .wp-block-image img {
    width: 100%;
    max-width: 100rem;
    /* 1000px */
    height: auto;
    /* 画像自体のFuturaデザインを活かすため余計な装飾はなし */
}

/* --- ローカルの質感を再現する攻めのテーブルCSS --- */

/* 1. DTP（実習用）とPEM（教育用）共通のテーブル設計 */
.DTP_ExTable table,
.PEM_ExTable table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: #fff !important;
    font-size: 1.5rem !important;
    table-layout: fixed !important;
    border: 2px solid #0e2884 !important;
    /* 濃いネイビーの枠線 */
    margin: 2rem 0 !important;
}

/* 2. ヘッダーをネイビーで引き締める */
.DTP_ExTable th,
.PEM_ExTable th {
    background: #0e2884 !important;
    color: #fff !important;
    padding: 1.2rem !important;
    text-align: left !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: bold !important;
}

/* 3. セルのデザイン（ローカルの余白感） */
.DTP_ExTable td,
.PEM_ExTable td {
    border: 1px solid #dce6e6 !important;
    padding: 1rem 1.5rem !important;
    vertical-align: middle !important;
    color: #333 !important;
}

/* 4. 結合セル（rowspan）をローカルと同じ「row-label」風に */
.DTP_ExTable td[rowspan],
.PEM_ExTable td[rowspan] {
    background: #f0f4f8 !important;
    /* 薄いグレーブルー */
    font-weight: bold !important;
    color: #0e2884 !important;
    text-align: center !important;
}

/* 6. ローカルで好評だった装飾ルール */
.DTP_ExTable tr:nth-of-type(even),
.PEM_ExTable tr:nth-of-type(even) {
    background: #f9fbfb !important;
}

.DTP_ExTable tr:hover,
.PEM_ExTable tr:hover {
    background: #f1f7ff !important;
    /* ホバーで反応 */
}

.DTP_ExTable strong,
.PEM_ExTable strong {
    color: #0e2884 !important;
    /* 強調文字をニッシンブルーに */
}

.PEM_ExTable table,
figure.PEM_ExTable,
.ModelNumberTable,
.DTP_ExTable table {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==========================================================================
    テーブル共通コンテナ：スクロール & デザイン
   ========================================================================== */

/* クラス名を並記して共通化 */
.DTP_ExTable,
.PEM_ExTable {
    width: 100% !important;
    overflow-x: auto !important;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

/* テーブル全体設定 */
.DTP_ExTable table,
.PEM_ExTable table {
    min-width: 80rem !important;
    /* スマホの幅より確実に広く設定 */
    width: 100% !important;
}

/* --- スクロールバーのデザイン (PC用) --- */
.DTP_ExTable::-webkit-scrollbar,
.PEM_ExTable::-webkit-scrollbar {
    height: 4px;
}

.DTP_ExTable::-webkit-scrollbar-track,
.PEM_ExTable::-webkit-scrollbar-track {
    background: #f5f5f5;
}

.DTP_ExTable::-webkit-scrollbar-thumb,
.PEM_ExTable::-webkit-scrollbar-thumb {
    background: #555555;
}

.DTP_ExTable::-webkit-scrollbar-thumb:hover,
.PEM_ExTable::-webkit-scrollbar-thumb:hover {
    background: #333333;
}

/* Firefox用 */
.DTP_ExTable,
.PEM_ExTable {
    scrollbar-width: thin;
    scrollbar-color: #555555 #f5f5f5;
}

/* ==========================================================================
    スマホ限定：Swipeヒント (共通)
   ========================================================================== */

@media (max-width: 782px) {

    /* 指定したテーブル群のスクロールバーを非表示 */
    .DTP_ExTable::-webkit-scrollbar,
    .PEM_ExTable::-webkit-scrollbar,
    .ModelNumberTable::-webkit-scrollbar {
        display: none;
    }

    /* ヒントの初期状態（最初は隠しておく） */
    .DTP_ExTable::before,
    .PEM_ExTable::before,
    .ModelNumberTable::before {
        content: "Swipe \2192";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(51, 51, 51, 0.9);
        color: #ffffff;
        padding: 8px 20px;
        font-size: 12px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        border-radius: 0;
        pointer-events: none;
        z-index: 10;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

        opacity: 0;
        /* JSでクラスがつくまで隠す */
    }

    /* JSでクラスがついたテーブルだけアニメーション開始 */
    .is-active::before {
        animation: fadeOutHint 2.5s ease-in-out forwards;
    }
}

/* アニメーション共通 */
@keyframes fadeOutHint {
    0% {
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* --- Articulator Variations (4カラム) の調整 --- */
.col4-ArticulatorVariationsEx {
    gap: 2.5rem !important;
    /* 25px */
    align-items: flex-start;
}

/* 各カラム（カード風）の調整 */
.col4-ArticulatorVariationsEx .wp-block-column {
    background: #fff;
    transition: transform 0.2s ease-in-out;
}

.guide-hero .dealer-nav {
    top: 100px !important;
}

/* 各咬合器の画像枠 */
.col4-ArticulatorVariationsEx figure {
    margin: 0 0 1.5rem 0 !important;
    /* 15px */
    background: #f9f9f9;
    border: 0.1rem solid #eee;
    /* 1px */
    padding: 1.0rem;
    /* 10px */
    text-align: center;
    /* 画像の高さが違っても揃うように（250px） */
    min-height: 25.0rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.col4-ArticulatorVariationsEx img {
    max-width: 100%;
    height: auto !important;
    object-fit: contain;
}

/* 咬合器名（h5）：高さ揃え ＋ ニッシンブルーのアクセント */
.col4-ArticulatorVariationsEx h5 {
    /* フォント・色 */
    font-size: 1.8rem;
    /* 17px */
    color: #333;
    /* 文字は強い黒で信頼感を */
    font-weight: bold;
    line-height: 1.4;

    /* 高さ揃え：2行分を確保して説明文の位置を固定 */
    display: flex;
    align-items: flex-start;
    /* 上揃え（1行の時も2行の時も上が揃う） */
    min-height: 4.5rem;
    /* 45px相当 */

    /* ニッシンブルーの下線デザイン */
    border-bottom: 0.1rem solid #003399;
    /* 1px相当の細い線 */
    padding-bottom: 0.8rem;
    /* 線と文字の間の余白（8px） */
    margin-bottom: 1.5rem;
    /* 線と説明文の間の余白（15px） */
}

/* 説明文 */
.col4-ArticulatorVariationsEx p {
    font-size: 1.5rem;
    /* 13px */
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/* --- 注意書き（GuideAttention）の装飾 --- */
.GuideAttention {
    background-color: #f0f4f9;
    border-radius: 0.4rem;
    /* 4px */
    padding: 1.5rem 2.0rem;
    /* 15px 20px */
    font-size: 1.4rem;
    /* 14px */
    color: #444;
    margin-top: 2.0rem;
    /* 20px */
    line-height: 1.7;
}

.NISSINStandardStudyModelExTxt {
    margin-bottom: 2rem;
}

/* --- カラム全体の器（wp-block-group） --- */
.col2-ArticulatorVariationsEx {
    margin-top: 3.0rem;
}

/* 2カラムの行（wp-block-columns） */
.col2-ArticulatorVariationsEx .wp-block-columns {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3.0rem !important;
    /* 左右のカラムの間隔 */
    margin-bottom: 4.0rem !important;
    /* 上下の行の間隔 */
}

/* 各カラム（wp-block-column） */
.col2-ArticulatorVariationsEx .wp-block-column {
    flex: 1 !important;
    flex-basis: calc(50% - 1.5rem) !important;
    /* 782px以上は2列 */
    min-width: 30.0rem !important;
    /* 狭くなりすぎたら自動で落ちる保険 */
    margin: 0 !important;
}

/* 画像エリア */
.col2-ArticulatorVariationsEx figure {
    margin: 0 0 1.5rem 0 !important;
    background: #f9f9f9;
    border: 0.1rem solid #eee;
    padding: 1.0rem;
    text-align: center;
}

.col2-ArticulatorVariationsEx img {
    max-width: 100%;
    height: auto !important;
}

/* 咬合器タイトル（h5） */
.guide-content-block h5 {
    font-size: 1.8rem;
    color: #333;
    font-weight: bold;
    line-height: 1.4;

    /* 高さ揃え：タイトルの行数が違っても線を揃える */
    display: flex;
    align-items: flex-end;
    min-height: 4.5rem;

    /* ニッシンブルーのアクセント線 */
    border-bottom: 0.15rem solid #0e2884;
    padding-bottom: 0.8rem;
    margin-bottom: 1.5rem;
}

/* 説明文（p） */
.col2-ArticulatorVariationsEx p {
    font-size: 1.5rem;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/* --- Responsive (スマホでの見え方調整) --- */
@media (max-width: 782px) {

    /* 782px以下 */
    .col2-ArticulatorVariationsEx .wp-block-column {
        flex-basis: 100% !important;
        /* スマホではゆったり1列 */
    }

    .col2-ArticulatorVariationsEx h5 {
        min-height: auto;
        /* スマホでは高さ固定を解除 */
    }

    /* カラムの中身が空（子要素がない）場合、完全に非表示にする */
    .col2-ArticulatorVariationsEx .wp-block-column:not(:has(*)) {
        display: none !important;
    }
}

.col2-ArticulatorVariationsEx .wp-block-columns:last-child {
    margin-bottom: 0rem !important;
}

/* --- 1. 共通設定 --- */
.col3-TechnicalInformation {
    display: grid !important;
    gap: 1.5rem !important;
    row-gap: 3.0rem !important;
    /* 縦の隙間 */
    align-items: start !important;
}

.col3-TechnicalInformation .wp-block-column {
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex-basis: auto !important;
    font-size: 1.4rem !important;
    line-height: 1.5;
}

.col3-TechnicalInformation .wp-block-image img {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* --- 2. PC版（783px以上）：カラム数による比率出し分け --- */
@media (min-width: 783px) {
    .col3-TechnicalInformation {
        gap: 2.0rem !important;
    }

    .col3-TechnicalInformation .wp-block-column {
        font-size: 1.5rem !important;
    }

    /* PCの2カラム：画像1(25%) : Point3(75%) */
    .col3-TechnicalInformation:has(> .wp-block-column:nth-child(2):last-child) {
        grid-template-columns: 1fr 3fr !important;
    }

    /* 3カラム：画像1 : 画像1 : Point2(50%) */
    .col3-TechnicalInformation:has(> .wp-block-column:nth-child(3):last-child) {
        grid-template-columns: 1fr 1fr 2fr !important;
    }

    /* 4カラム：均等 1:1:1:1 */
    .col3-TechnicalInformation:has(> .wp-block-column:nth-child(4):last-child) {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* PC版のみ：通常Pointの左アイコン */
    .col3-TechnicalInformationPoint {
        position: relative;
    }

    .col3-TechnicalInformationPoint::before,
    .col3-TechnicalInformationPoint::after {
        content: "";
        position: absolute;
        top: 2.5rem;
        border: 0.5rem solid transparent;
    }

    .col3-TechnicalInformationPoint::before {
        left: -1.0rem;
        border-right: 0.5rem solid #e1f5fe;
        z-index: 2;
    }

    .col3-TechnicalInformationPoint::after {
        left: -1.1rem;
        border-right: 0.5rem solid #b3e5fc;
        z-index: 1;
    }
}

/* --- 3. スマホ・PC共通：PointUnder（上向きアイコン） --- */
.col3-TechnicalInformationPointUnder {
    position: relative;
    margin-top: 1.5rem !important;
}

.col3-TechnicalInformationPointUnder::before,
.col3-TechnicalInformationPointUnder::after {
    content: "";
    position: absolute;
    left: 1.5rem;
    border: 0.5rem solid transparent;
}

.col3-TechnicalInformationPointUnder::before {
    top: -1.0rem;
    border-bottom: 0.5rem solid #e1f5fe;
    z-index: 2;
}

.col3-TechnicalInformationPointUnder::after {
    top: -1.1rem;
    border-bottom: 0.5rem solid #b3e5fc;
    z-index: 1;
}

/* --- 4. スマホ版（782px以下）：比率の出し分け --- */
@media (max-width: 782px) {

    /* スマホは全部「半々（1:1）」で横並び */
    .col3-TechnicalInformation {
        grid-template-columns: 1fr 1fr !important;
    }

    /* 3カラム時：スマホではPointを下の行に回して全幅にする（これは残さないと3列目が狭すぎるため） */
    .col3-TechnicalInformation:has(> .wp-block-column:nth-child(3):last-child) .col3-TechnicalInformationPoint,
    .col3-TechnicalInformation:has(> .wp-block-column:nth-child(3):last-child) .col3-TechnicalInformationPointUnder {
        grid-column: span 2 !important;
    }

    /* スマホでは横アイコンのみ非表示 */
    .col3-TechnicalInformationPoint::before,
    .col3-TechnicalInformationPoint::after {
        display: none !important;
    }
}

/* --- 5. 装飾と余白 --- */
.col3-TechnicalInformationPoint,
.col3-TechnicalInformationPointUnder {
    background-color: #e1f5fe !important;
    border: 1px solid #b3e5fc !important;
    border-radius: 8px !important;
    padding: 1.0rem !important;
}

.col3-TechnicalInformationPoint strong,
.col3-TechnicalInformationPointUnder strong {
    color: #00bcd4;
    display: block;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.col3-TechnicalInformation p {
    margin-top: 0.8rem !important;
}

.col3-TechnicalInformationPoint br,
.col3-TechnicalInformationPointUnder br {
    display: none;
}

#guide-04 .wp-block-columns:last-child {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   NISSIN Corporate - 扉ページ共通 & 会社概要設計
   ========================================================================== */

/* --- 0. コンテナ設計（標準幅と100%幅の切り替え） --- */
.about-sections-fullwidth {
    width: 100%;
}

.page-id-25 #footer {
    margin-top: 0rem !important;
}

.about-row-full {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* 内部コンテンツ幅：1300px */
.full-content-inner {
    width: 100%;
    max-width: 130.0rem;
    margin: 0 auto;
    padding: 0 2.0rem;
    position: relative;
    z-index: 10;
}

/* --- 1. セクションタイプ：クリーンホワイト --- */
.section-white {
    padding: 15.0rem 0;
    background: #fff;
}

/* 横並びレイアウト（画像とテキスト） */
.msg-flex-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8.0rem;
}

.msg-text {
    width: 55%;
}

.msg-visual {
    width: 40%;
}

.msg-visual img {
    width: 100%;
    height: auto;
    /* 誠実さを出すための柔らかな影 */
    box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.1);
}

/* --- 2. セクションタイプ：パララックス --- */
.section-parallax {
    min-height: 85vh;
    padding: 25rem 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* 背景固定：パララックス */
    display: flex;
    align-items: center;
}

/* 視認性確保のためのオーバーレイ */
.section-parallax::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.05);
}

/* --- 3. 浮遊パーツ：ホワイト・フローティング・ボックス --- */
.white-floating-box {
    background: #fff;
    padding: 8.0rem;
    max-width: 75.0rem;
    box-shadow: 40px 40px 100px rgba(0, 0, 0, 0.12);
}

/* --- 4. 演出要素：巨大インデックス数字 --- */
.index-num {
    font-size: 26.0rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.05);
    /*color: rgba(14, 40, 132, 0.08);*/
    /* ニッシンブルー：極薄 */
    position: absolute;
    top: -1.0rem;
    left: 2.0rem;
    line-height: 0.8;
    z-index: 1;
    letter-spacing: -0.05em;
    font-family: 'Arial Black', sans-serif;
    pointer-events: none;
    /* テキスト選択の邪魔をしない */
}

/* パララックスセクション上では白透過に切り替え */
.section-parallax .index-num {
    color: rgba(255, 255, 255, 0.3);
}

/* --- 5. タイトル・タイポグラフィ --- */
.st-sub-en {
    display: block;
    font-size: 1.4rem;
    font-weight: bold;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    margin-bottom: 1.0rem;
}

.st-title {
    font-size: 3.6rem;
    font-weight: bold;
    border-left: 3px solid #0E2884;
    /* ★ニッシン・3px・ボーダー */
    padding-left: 2.5rem;
    margin-bottom: 4.0rem;
    line-height: 1.3;
}

/* --- 6. レスポンシブ：モバイル最適化 --- */
@media screen and (max-width: 782px) {

    /* モバイルではパララックスを解除（挙動不安定回避） */
    .section-parallax {
        background-attachment: scroll !important;
    }

    .white-floating-box {
        padding: 3rem !important;
        margin: 0 auto;
        width: 100%;
        /* 背景を少しぼかす→ブラー解除で透け感を演出に変更 */
        backdrop-filter: blur(0px) !important;
        -webkit-backdrop-filter: blur(0px) !important;
    }

    .msg-flex-layout {
        flex-direction: column;
        gap: 4.0rem;
    }

    .msg-text,
    .msg-visual {
        width: 100%;
    }

    .index-num {
        font-size: 14.0rem;
        top: -2.0rem;
    }

    .st-title {
        font-size: 2.8rem;
    }

    .index-num {
        top: 0;
        left: 1rem;
    }

    .section-white {
        padding: 8rem 0;
    }

    .section-parallax {
        padding: 15rem 0;
    }
}

/* --- 01. CEO Message用 ボタン調整 --- */
.btn-more-standard {
    /* 白抜きボタンに近い構成 */
    display: inline-block !important;
    background-color: transparent !important;
    color: #0E2884 !important;
    /* ニッシンブルー */
    border: 1px solid #0E2884 !important;
    border-radius: 4rem !important;
    /* 他のボタンに合わせた角丸 */

    /* 矢印画像（既存のarrowBlue.pngを流用） */
    background-image: url(images/arrowBlue.png) !important;
    background-repeat: no-repeat !important;
    background-position: 90% center !important;
    /* 初期位置 */
    background-size: 1.2rem auto !important;

    /* サイズ感の微調整 */
    width: 25rem !important;
    padding: 1.3rem 4rem 1.3rem 2rem !important;
    font-size: 1.6rem !important;
    text-align: left !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    margin-top: 3rem;
}

/* --- 01. ホバーアクション --- */
.btn-more-standard:hover {
    opacity: 0.8 !important;
    background-color: #0E2884 !important;
    /* ホバーで塗りつぶし */
    color: #fff !important;
    /* 矢印を白用に切り替え */
    background-image: url(images/arrow.png) !important;
    background-position: 95% center !important;
    /* 矢印が右に動く */
    transform: translateY(-2px) !important;
    /* 既存の動きに合わせる */
    box-shadow: 0 4px 12px rgba(14, 40, 132, 0.15) !important;
}

/* --- 01. Signature: サイン風・左揃え --- */
.ceo-signature-area {
    margin-top: 5rem;
    text-align: left;
    border-left: none !important;
    padding-left: 0;
    margin-left: 2.5rem;
}

.ceo-name {
    /* フォント読み込み後に有効化 
    font-family: 'Dancing Script', cursive;*/
    font-size: 4.2rem;
    /*font-weight: 600;*/
    color: #111;
    margin-bottom: 0.8rem;
    display: block;
    line-height: 1;
    /* わずかに右上がりに傾ける 
    transform: rotate(-2deg);
    transform-origin: left center;*/
    margin-bottom: 1rem;
}

.ceo-role {
    display: block;
    font-size: 1.1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #888;
    padding-left: 0.5rem;
    /* 名前とのバランス調整 */
    transform: none;
    /* 役職は傾けない */
}

/* ついでにボタンの位置調整 */
.btn-more-standard {
    margin-top: 5rem !important;
    /* 署名との間に少し余裕を */
}

.section-parallax .index-num,
.section-split-smart .index-num {
    top: 2rem;
}

/* --- 02. Table Style: 清潔感のある会社概要 --- */
.st-description-table table {
    width: 100%;
    border-collapse: collapse;
    /* 上下の余白 */
    border-top: 1px solid #0E2884;
    /* 上線だけニッシンブルーで締める */
}

.st-description-table tr {
    border-bottom: 1px solid #eee;
    /* 行間の区切り */
}

.st-description-table th,
.st-description-table td {
    padding: 2rem 1rem;
    font-size: 1.5rem;
    line-height: 1.6;
    vertical-align: top;
}

.st-description-table th {
    width: 30%;
    /* 項目名の幅を固定して縦を揃える */
    color: #111;
    font-weight: 700;
    text-align: left;
    background-color: #fafafa;
    /* 項目側に薄く色をつけて見やすく */
}

.st-description-table td {
    color: #444;
    padding-left: 3rem;
    /* 項目名との間に余白をたっぷり取る */
}

/* スマホ：表を縦並びに崩して読みやすく */
@media screen and (max-width: 782px) {

    .st-description-table th,
    .st-description-table td {
        display: block;
        width: 100%;
        padding: 1rem 0;
    }

    .st-description-table th {
        background-color: transparent;
        padding-bottom: 0;
        font-size: 1.3rem;
        color: #0E2884;
        /* スマホでは項目を青くしてアクセントに */
    }

    .st-description-table td {
        padding-left: 0;
        padding-bottom: 1.5rem;
    }
}

/* --- 02 & 03 共通：浮遊ボックスのブラッシュアップ --- */
.white-floating-box {
    /* 真っ白(#fff)ではなく、わずかに透明にする(0.9) */
    background: rgba(255, 255, 255, 0.9) !important;

    /* 背景を少しぼかす */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    padding: 4rem;
    max-width: 90rem;
    margin: 0 auto;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
    /* 影も少し柔らかく */
    position: relative;
    z-index: 10;
}

/* パララックスセクション自体の重なりを防ぐ */
.section-parallax {
    position: relative;
    z-index: 1;
    /* 02, 03それぞれに独立した階層を持たせる */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* 境目に極薄い線 */
}

/* PC（マウス操作）ならパララックスを維持 */
@media (hover: hover) {
    .section-parallax {
        background-attachment: fixed;
    }
}

/* iPadやスマホ（タッチ操作）ならパララックスを解除 */
@media (hover: none) {
    .section-parallax {
        background-attachment: scroll !important;
        background-position: center top !important;
    }
}


@media screen and (max-width: 782px) {
    .st-description-table tr {
        display: flex;
        flex-wrap: wrap;
        padding: 2rem 0;
        border-bottom: 1px dotted #ccc;
        /* 境界をドットにして軽くする */
    }

    .st-description-table th {
        width: 100%;
        /* タイトルは上に */
        background: none;
        padding: 0;
        font-size: 1.5rem;
        color: #0E2884;
        /* ニッシンブルー */
        margin-bottom: 0.5rem;
    }

    .st-description-table td {
        width: 100%;
        padding: 0;
        font-size: 1.6rem;
        color: #333;
        font-weight: 500;
    }
}

/* --- 02専用：中央寄せボックスのスタイル --- */

/* ボックス自体の配置 */
.center-box {
    margin: 0 auto !important;
    /* 強制的に中央へ */
    text-align: center;
    /* 子要素（タイトル・文字）を中央揃えに */
}

/* タイトルの装飾（中央用） */
.center-box .st-title {
    border-left: none !important;
    /* 左の縦線を消す */
    padding-left: 0 !important;
    display: inline-block;
    /* 中央寄せを維持するためにインラインブロック化 */
    position: relative;
    margin-bottom: 5.0rem !important;
}

/* 縦線の代わりに、タイトルの下にアクセントの青線を引く */
.center-box .st-title::after {
    content: "";
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 6.0rem;
    height: 3px;
    background-color: #0E2884;
    /* ニッシンブルー */
}

/* 表組み：中央寄せボックス内でも、表の中身は左揃えにして読みやすく */
.center-box .st-description-table {
    text-align: left;
    display: inline-block;
    /* 表自体を中央に集める */
    width: 100%;
    max-width: 80.0rem;
    /* 広がりすぎないようガード */
    margin: 0 auto;
}

/* ボタンの中央寄せ */
.center-box .btn-more-standard {
    margin: 5.0rem auto 0 !important;
    /* 左右autoで中央配置 */
    display: flex !important;
    justify-content: center;
}

/* --- 03. Split Smart Layout --- */
.section-split-smart {
    width: 100%;
    background-color: #fff;
    padding: 6rem 0;
    /* 上下に少し余白を設けて、全画面画像との間を作る */
}

.split-inner-flex {
    display: flex;
    max-width: 1400px;
    /* 少し絞ることで、高級感を出す */
    margin: 0 auto;
    height: 60vh;
    /* 高すぎず、低すぎない絶妙なライン */
    min-height: 500px;
    background: #fff;
}

/* 左側：画像と数字 */
.split-visual-area {
    flex: 0 0 50%;
    position: relative;
    overflow: hidden;
}

.split-visual-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 数字：ブラーなし、左下のアクセント */
.index-num-simple {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    font-size: 10rem;
    font-weight: 700;
    color: rgba(14, 40, 132, 0.1);
    /* ニッシンブルーを極薄く */
    line-height: 1;
    pointer-events: none;
}

/* 右側：テキスト */
.split-text-area {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    padding: 0 8%;
}

.split-text-inner {
    text-align: left;
}

.mission-desc {
    font-size: 1.5rem;
    line-height: 1.8;
    margin: 2.5rem 0 0 0;
    color: #444;
}

/* スマホ対応 */
@media screen and (max-width: 782px) {
    .section-split-smart {
        padding: 0;
    }

    .split-inner-flex {
        flex-direction: column;
        height: auto;
    }

    .split-visual-area,
    .split-text-area {
        width: 100%;
    }

    .split-visual-area {
        height: 40vh;
    }

    .split-text-area {
        padding: 6rem 5%;
    }

    .index-num-simple {
        font-size: 6rem;
    }

    /* 03セクションの数字（極細ラインVer.） */
    .section-split-smart .index-num {
        /* 文字自体は極薄のブルー、または透明に近い色にする */
        color: rgba(14, 40, 132, 1);

        /* 極細の白縁をつける 
        -webkit-text-stroke: 0.5px rgba(255, 255, 255, 1);*/

        /* 縁だけだとトゲトゲするので、ごくわずかに光を滲ませる 
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);*/
        right: 2rem !important;
        left: auto !important;
        /* 1. 縁取りを消す */
        -webkit-text-stroke: 0 !important;

        /* 2. 光の滲み（シャドウ）を消す */
        text-shadow: none !important;
    }

    .category h1,
    .tag h1,
    .page-template-default h1,
    .page-template-page-company h1,
    .page-template-page-company-about h1,
    .page-template-page-company-philosophy h1,
    .page-template-page-company-message h1 {
        font-size: 3.5rem !important;
    }
}

/* --- セクション数字（インデックス）の統一ルール --- */
.section-split-smart {
    position: relative;
    /* 数字の絶対配置の基準にする */
}

.section-split-smart .index-num {
    color: rgba(0, 0, 0, 0.1);
    /* 極細の白縁をつける */
    -webkit-text-stroke: 0.2px rgba(255, 255, 255, 1);

    /* 縁だけだとトゲトゲするので、ごくわずかに光を滲ませる */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* PC（マウス操作）ならパララックスを維持 */
@media (hover: hover) {
    .topContactBlock {
        background-attachment: fixed;
    }
}

/* iPadやスマホ（タッチ操作）ならパララックスを解除 */
@media (hover: none) {
    .topContactBlock {
        background-attachment: scroll !important;
        background-position: center top !important;
    }
}

/* サイズ別微調整 */
@media screen and (max-width: 1000px) {
    .toumei {
        padding: 2rem 0;
        /* iPadなどの中間サイズ */
    }
}

@media screen and (max-width: 782px) and (orientation: landscape) {
    .toumei {
        padding: 1rem 0 !important;
        /* スマホ横向き */
    }
}


/* ==========================================================================
   Corporate Profile - 会社概要設計
   ========================================================================== */
/* --- 初期化 --- */
.is-about-hero .st-title {
    position: relative;
    /* 必須：擬似要素の基準 */
    padding-left: 1.5rem;
    /* 垂直線との間隔 */
    font-size: 3.1rem;
    line-height: 1.2;
    /* line-heightで上下中央を調整 */
    font-weight: 700;
    color: #333;
    border-left: none;
}

/* 扉ページ風の垂直線を追加 */
.is-about-hero .st-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0.5rem;
    height: 100%;
    background-color: var(--nissin-blue);
}

.is-about-hero .st-sub-en {
    font-size: 1.2rem;
    color: #999;
    letter-spacing: 0.15rem;
    /* 少し文字間を広げて高級感を上げる */
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.8rem;
}

.profile-section {
    margin-top: 6rem;
}

.profile-section:first-child {
    margin-top: 0 !important;
}

/* --- 会社概要テーブル --- */
.corporate-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--nissin-blue);
}

.corporate-table th {
    width: 25%;
    padding: 1.8rem 2rem;
    /* 少しだけ上下を広げてゆとりを */
    background-color: #fafafa;
    font-size: 1.5rem;
    font-weight: 700;
    color: #444;
    border-bottom: 1px solid #eee;
    text-align: left;
    vertical-align: top;
}

.corporate-table td {
    padding: 1.8rem 2rem;
    font-size: 1.5rem;
    line-height: 1.8;
    /* 1.6から1.8へ。読みやすさを上げる */
    color: #555;
    border-bottom: 1px solid #eee;
}

/* 最後の行の線を少しだけしっかりさせる */
.corporate-table tr:last-child td,
.corporate-table tr:last-child th {
    border-bottom: 1px solid #ccc;
}

/* --- 【追加】スマホ対応の微調整 --- */
@media screen and (max-width: 782px) {

    .corporate-table th,
    .corporate-table td {
        display: block;
        width: 100%;
        padding: 1.2rem 1.5rem;
    }

    .corporate-table th {
        background-color: #f5f7f9;
        /* スマホではラベルとして見やすく */
        border-bottom: none;
    }

    .corporate-table tr:last-child th {
        border-bottom: none;
    }
}

/* 拠点ごとの間隔 */
.network-item {
    margin-bottom: 5rem;
}

/* 拠点名 */
.network-name {
    font-size: 2rem;
    font-weight: 700;
    background-color: #f4f7f9;
    /* 薄いグレーブルー */
    padding: 1.2rem 2rem;
    margin-bottom: 2rem;
    border-left: 0.5rem solid var(--nissin-blue);
    color: #333;
}

/* 横並び設定 */
.network-flex {
    display: flex;
    gap: 3rem;
    margin-bottom: 2rem;
}

.network-photo {
    flex: 0 0 35%;
    /* 写真の幅を35%に固定 */
}

.network-photo img {
    width: 100%;
    height: auto;
    border: 1px solid #eee;
}

.network-info {
    flex: 1;
}

/* 拠点内テーブル：上部に1pxの青線 */
.network-table {
    border-top: 1px solid var(--nissin-blue) !important;
}

/* Google Map */
.network-map {
    width: 100%;
    height: 300px;
    background: #f0f0f0;
    border: 1px solid #eee;
}

.network-map iframe {
    width: 100% !important;
    height: 100% !important;
}

/* スマホ対応 */
@media screen and (max-width: 782px) {
    .network-flex {
        flex-direction: column;
    }

    .network-photo {
        width: 100%;
    }
}

.network-map-visual {
    margin: 0 0 5rem 0;
    padding: 6rem 3rem;
    /* 少し広めに取って、地図をゆったり見せる */
    /* 角丸と薄い青の設定 */
    background-color: #f7faff;
    /* 清潔感のある薄い青 */
    border-radius: 20px;
    /* 柔らかい印象の角丸 */

    text-align: center;
    position: relative;
    overflow: hidden;
    /* 画像が角からはみ出さないように */
}

.network-map-visual img {
    max-width: 960px;
    width: 100%;
    height: auto;

    /* 透明PNGのドット地図をクッキリ見せるためのドロップシャドウ */
    filter: drop-shadow(0 10px 30px rgba(0, 51, 153, 0.15));
}

/* スマホでは角丸を少し小さく */
@media screen and (max-width: 782px) {
    .network-map-visual {
        margin: 3rem 0 5rem;
        padding: 3rem 1.5rem;
        border-radius: 12px;
    }
}

.network-name {
    font-size: 2rem;
    font-weight: 700;
    color: var(--nissin-blue);
    padding-bottom: 1rem;
    margin-bottom: 3rem;
    position: relative;

    /* border系はすべて無しにする */
    border: none;

    /* 背景を2枚重ねる！ */
    background:
        /* 1枚目：下線（高さ2pxで、下端に配置。右へ透明に） */
        linear-gradient(to right, var(--nissin-blue), transparent) no-repeat bottom left / 100% 2px,
        /* 2枚目：見出し全体の薄い青背景（右へ透明に） */
        linear-gradient(to right, #f7faff, transparent);
}

/* ::after は不要 */
.network-name::after {
    display: none;
}

/* 写真の親要素 */
.network-photo {
    width: 100%;
    aspect-ratio: 3 / 2;
    /* 横長に固定 */
    overflow: hidden;
}

/* 中の画像自体の動き */
.network-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 枠に合わせて自動トリミング */
    object-position: center;
    /* 真ん中を中心に切り抜き */
}

/* スマホ用の微調整 */
@media (max-width: 782px) {
    .network-photo {

        /* 高さをさらに抑えるために、横長（16:9）にする */
        aspect-ratio: 16 / 9;

        /* 「もっと高さを絞る」なら高さを直接指定する */
        /* height: 180px; */
    }
}

.network-item:last-child,
.network-item:last-child .network-flex {
    margin-bottom: 0 !important;
}

/* ページ内リンクで飛んだ時の「止まる位置」を調整 */
.network-item {
    scroll-margin-top: 10rem;
    /* ヘッダーの高さ + 少しの余白 */
}

/* 関連事業セクション全体 */
.related-business-container {
    margin-top: 3.0rem;
    /* 30px */
}

/* 各事業のアイテム */
.related-item {
    display: flex;
    align-items: center;
    gap: 4.0rem;
    margin-bottom: 5.0rem;
    background: #f9f9f9;
    padding: 4.0rem;
    border-radius: 1.0rem;
}

.related-item:last-child {
    margin-bottom: 0 !important;
}

.related-item.is-reverse {
    flex-direction: row-reverse;
}

.related-img {
    flex: 0 0 45%;
}

.related-img img {
    width: 100%;
    height: auto;
    border-radius: 0.4rem;
    /* 4px */
}

.related-content {
    flex: 1;
}

/* タイトル周りの装飾 */
.related-title-box {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.icon-square {
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    border: 0.2rem solid var(--nissin-blue);
    margin-right: 1.2rem;
}

.related-ttl {
    font-size: 2.4rem;
    color: var(--nissin-blue);
    font-weight: bold;
    margin: 0;
}

.related-catch {
    color: var(--nissin-blue);
    font-weight: bold;
    font-size: 1.7rem;
    margin-bottom: 2.0rem;
}

.related-text {
    line-height: 1.8;
}

/* スマホ対応（782px以下） */
@media screen and (max-width: 782px) {

    .related-item,
    .related-item.is-reverse {
        flex-direction: column;
        padding: 2.5rem;
        gap: 2.0rem;
    }

    .related-img {
        width: 100%;
        margin-bottom: 1rem;
    }
}


/* キャッチコピーのフォントを少し明朝体 */
.related-catch {
    font-family: "serif", "Noto Serif JP", serif;
    font-style: italic;
    /* 斜体に */
}

.related-img {
    flex: 0 0 45%;
    /* 白いフチと影の装飾 */
    background: #fff;
    /* 白いフチの正体 */
    padding: 1.20rem;
    /* フチの太さ（12px） */
    /* 垂直に4px落とし、15pxぼかす */
    box-shadow: 0 4px 15px rgba(14, 40, 132, 0.08);
    border-radius: 0.4rem;
    /* 角を少し丸く */
    line-height: 0;
    /* 画像下の謎の隙間対策 */
}

.related-img img {
    width: 100%;
    height: auto;
    /* 画像自体の角も少し丸くする */
    border-radius: 0.2rem;
}

/* 1. タイトル：装飾なし */
.related-ttl {
    font-size: 3.0rem;
    color: var(--nissin-blue);
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.07em;
    line-height: 1;
}

/* 2. キャッチコピー：タイトルのすぐ下で「添える」感じに */
.related-catch {
    color: var(--nissin-blue);
    font-weight: 600;
    font-size: 1.8rem;
    margin-top: 1.5rem;
    margin-bottom: 2.0rem;
    opacity: 0.85;
    /* ほんの少し透過させて奥行きを出す */
}

/* 3. 本文との間に薄い区切り */
.related-content {
    position: relative;
}

/* 本文の上にだけ、さりげないドットライン */
.related-text {
    border-top: 1px dotted #ccc;
    padding-top: 2.0rem;
    line-height: 2.0;
    color: #666;
}

.profile-section,
.guide-section {
    position: relative;
    padding: 0 0 6rem 0;
}

.profile-section:last-child,
.guide-section:last-child {
    padding: 0 !important;
}

.profile-section::before,
.guide-section::before {
    content: "";
    position: absolute;
    /* セクションの「上端」からさらに上に押し上げる */
    top: 0;

    /* 左右中央揃え */
    left: 0;
    right: 0;
    margin: auto;

    /* 線の長さと細さ */
    width: 60%;
    max-width: 80.0rem;
    height: 1px;

    /* 繊細なグラデーション */
    background: linear-gradient(to right, rgba(200, 200, 200, 0), rgba(200, 200, 200, 1) 50%, rgba(200, 200, 200, 0));

    /* top: 0 の位置から、さらに余白の半分（例：50px分）だけ上に */
    transform: translateY(-6rem);
}

/* 最初の項目には不要 */
.profile-section:first-of-type::before,
.guide-section:first-of-type::before {
    display: none;
}

/* -----------------------------------------------------------
   Our History Timeline (1rem = 10px)
----------------------------------------------------------- */

/* セクション全体のベース */
.nissin-history-timeline {
    position: relative;
    padding: 2.0rem 0 4.0rem;
    margin-top: 4.0rem;
}

/* 垂直の線：ニッシンブルーを20%の濃度で */
.nissin-history-timeline::before {
    content: '';
    position: absolute;
    left: 0.7rem;
    /* ドットの中心 */
    top: 0;
    bottom: 0;
    width: 0.1rem;
    background: rgba(14, 40, 132, 0.2);
}

/* 各年代のブロック */
.history-item {
    position: relative;
    padding-left: 4.5rem;
    margin-bottom: 8.0rem;
}

/* タイムラインのドット（ニッシンブルー） */
.history-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 1.6rem;
    height: 1.6rem;
    background: #fff;
    border: 0.3rem solid var(--nissin-blue);
    border-radius: 50%;
    z-index: 1;
}

/* 年号（タイトル） */
.history-year {
    display: block;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--nissin-blue);
    line-height: 1.2;
    margin-bottom: 1.5rem;
    letter-spacing: 0.02em;
}

/* 本文 */
.history-text {
    font-size: 1.6rem;
    line-height: 1.8;
    color: #333;
}

/* 画像エリア：ふんわり影 */
.history-figure {
    margin: 2.5rem 0 0;
    max-width: 32.0rem;
    /* 写真サイズを控えめに */
}

.history-image img {
    width: 100%;
    height: auto;
    border: none;
    border-radius: 0.4rem;
    /* 柔らかい影 */
    box-shadow: 0 1.0rem 3.0rem rgba(0, 0, 0, 0.1);
    display: block;
    filter: grayscale(10%);
    /* 素材を馴染ませる */
}

/* キャプション */
.history-caption {
    margin-top: 1.0rem;
    font-size: 1.3rem;
    color: #888;
    text-align: center;
    line-height: 1.4;
    font-weight: 500;
}

/* 最後の項目の余白調整 */
.history-item:last-child {
    margin-bottom: 0;
}

/* メインビジュアルのスタイル */
.history-main-visual {
    margin-bottom: 6.0rem;
    /* タイムラインとの間隔 */
}

.history-main-figure {
    margin: 0;
    text-align: center;
}

.history-main-figure img {
    width: 100%;
    max-width: 80.0rem;
    /* 少し大きめに配置 */
    height: auto;
    border-radius: 0.8rem;
    box-shadow: 0 1.5rem 4.0rem rgba(0, 0, 0, 0.12);
    /* タイムラインより少し深い影 */
    display: block;
    margin: 0 auto;
}

.history-main-caption {
    margin-top: 1.5rem;
    font-size: 1.4rem;
    color: #666;
    font-style: italic;
}

/* タイムラインの開始位置を少し調整 */
.nissin-history-timeline {
    padding-top: 0;
}

/* モバイル対応（1rem=10pxベース） */
@media screen and (max-width: 782px) {

    /* タイムライン全体の余白を詰める */
    .history-item {
        padding-left: 3.0rem;
        /* 4.5remから短縮して画面を広く */
        margin-bottom: 5.0rem;
        /* 間隔も少しタイトに */
    }

    /* タイムラインのドットを少し小さく */
    .history-item::before {
        width: 1.2rem;
        height: 1.2rem;
        top: 0.8rem;
        left: 0.15rem;
    }

    /* メイン画像の影をスマホ用に最適化 */
    .history-main-figure img {
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
    }

    /* タイムライン内の小さな写真の影も引き締める */
    .history-image img {
        max-width: 100%;
        /* スマホなら横幅いっぱいまで許容 */
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
        /* 控えめな影 */
    }

    /* 年号のサイズを調整 */
    .history-year {
        font-size: 2.0rem;
    }
}

/* タイムライン内の写真：4:3に固定 */
.history-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    /* 比率を4:3に固定 */
    object-fit: cover;
    /* 枠いっぱいに収まるように自動切り抜き */

    border: none;
    border-radius: 0.4rem;
    box-shadow: 0 1.0rem 3.0rem rgba(0, 0, 0, 0.1);
    display: block;
}

/* スマホでも比率を維持 */
@media screen and (max-width: 782px) {
    .history-image img {
        aspect-ratio: 4 / 3;
        /* スマホでも4:3をキープ */
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
    }
}

/* ==========================================================================
   Message from the President - 挨拶設計
   ========================================================================== */

/* --- キャッチコピーの装飾 --- */
.p-message-detail__catch {
    position: relative;
    padding: 2.5rem 0 2.5rem 2rem;
    margin-bottom: 3.5rem !important;
    border-top: 1px solid #eee;
    /* 上下に繊細な線を入れる */
    border-bottom: 1px solid #eee;
}

.p-message-detail__catch strong {
    font-size: 2.2rem !important;
    /* 扉ページ(1.9rem相当)より少し大きく */
    line-height: 1.5;
    color: #0E2884 !important;
    /* ニッシンブルーをアクセントに */
    display: block;
    font-weight: 700;
}

/* 引用符をCSSで追加（二重表示対策） */
.p-message-detail__catch strong::before {
    content: "“";
    font-family: serif;
    font-size: 4rem;
    position: absolute;
    top: 0;
    left: 0rem;
    opacity: 0.2;
}

/* --- 本文の読みやすさ向上 --- */
.p-message-detail-wrap .greeting-body-rich {
    font-size: 1.6rem;
    line-height: 2.0;
    /* 英語メッセージをゆったり読める様に調整 */
    color: #333;
}

/* --- 画像を右端に張り付かせる --- */
.p-message-detail-wrap .msg-flex-layout {
    align-items: stretch;
    /* 画像の高さをコンテンツに合わせる */
    gap: 0;
    /* テキストと画像の間の隙間を制御しやすくするため0に */
}

/* テキストエリア：左側にマージンを持たせて中央寄せを維持 */
.p-message-detail-wrap .msg-text {
    width: 45% !important;
    padding-right: 5%;
    /* 画像との間にゆとりを */
}

/* 画像エリア：右側を画面端まで飛ばす */
.p-message-detail-wrap .msg-visual {
    width: 50% !important;
    margin-right: calc(50% - 50vw);
    /* 右端まで突き抜けさせる */
    position: relative;
}

.p-message-detail-wrap .msg-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 枠いっぱいに画像を埋める */
    box-shadow: none !important;
    border-radius: 0;
    /* 角丸をとる */
}

/* スマホでは通常通りに戻す */
@media screen and (max-width: 782px) {
    .p-message-detail-wrap .msg-visual {
        margin-right: 0;
        width: 100% !important;
    }
}

/* --- 6:4 黄金比レイアウト：50%計算でパンくず頭と完全同期 --- */

/* 親要素の余白リセット */
.p-message-detail-wrap .full-content-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
}

.p-message-detail-wrap .msg-flex-layout {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    max-width: none !important;
    gap: 0;
}

/* 1. テキストエリア (60%) */
.p-message-detail-wrap .msg-text {
    /* vwではなく「%」を使うことでスクロールバーの幅を無視して計算 
       1300pxライン(65rem)に、微調整の 1.25rem を加算 
    */
    padding-left: calc(50% - 63.0rem);
    width: 60% !important;
    padding-right: 12.0rem;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* 2. タイトルの青い縦線をパンくずの「N」の真下に配置 */
.p-message-detail-wrap .st-title {
    margin-left: 0 !important;
    border-left: 3px solid #0E2884 !important;
}

/* 3. 画像エリア (40%) */
.p-message-detail-wrap .msg-visual {
    width: 40% !important;
    position: relative;
    flex-shrink: 0;
    /* 右端突き抜けも % 計算に統一してスクロールバー問題を回避 */
    margin-right: calc(40% - 50%);
}

.p-message-detail-wrap .msg-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* --- レスポンシブ調整（1300px以下） --- */
@media screen and (max-width: 1300px) {
    .p-message-detail-wrap .msg-text {
        padding-left: 2.0rem !important;
        padding-right: 5%;
        width: 60% !important;
    }

    .p-message-detail-wrap .msg-visual {
        width: 40% !important;
        margin-right: 0;
    }
}

/* --- レスポンシブ：スマホ --- */
@media screen and (max-width: 782px) {
    .p-message-detail-wrap .msg-flex-layout {
        flex-direction: column;
    }

    .p-message-detail-wrap .msg-text {
        width: 100% !important;
        padding: 4.0rem 2.0rem !important;
    }

    .msg-text {
        padding-top: 4rem;
    }

    .p-message-detail-wrap .msg-visual {
        width: 100% !important;
        height: 50vh;
        margin-right: 0;
    }

    .p-message-detail-wrap .ceo-signature-area {
        margin-bottom: 1rem;
    }

    .ceo-signature-area {
        margin-top: 3rem;
    }
}

/* ==========================================================================
   02 Corporate Message - コーポレートメッセージ
   ========================================================================== */
.p-message-detail-wrap .p-corporate-message-section .msg-flex-layout {
    max-width: 1300px !important;
}

.p-message-detail-wrap .section-white.p-corporate-message-section {
    padding-bottom: 0 !important;
}

/* 1300pxコンテナ内のレイアウトを解除して全幅にする */
.p-message-detail-wrap .p-corporate-message-section .msg-flex-layout {
    display: block !important;
    /* flexを解除 */
    position: relative;
    max-width: 1300px !important;
    margin: 0 auto !important;
}

/* テキストエリアを100%にしつつ、可読性のために最大幅を少し絞る */
.p-message-detail-wrap .p-corporate-message-section .msg-text {
    width: 100% !important;
    margin: 0 auto;
    /* 中央寄せ */
    position: relative;
    z-index: 10;
    /* テキストを一番上に */
}

/* 画像を「背景装飾」として背後に配置 */
.p-message-detail-wrap .p-corporate-message-section .msg-visual {
    position: absolute;
    top: -10%;
    right: 0;
    transform: translate(-50%, -50%);
    /* コンテナの真ん中に置く */
    width: 70rem;
    /* テキストを包み込むくらいのサイズ感 */
    opacity: 0.15;
    /* 薄くして文字の邪魔をしない様にする */
    z-index: 1;
    /* テキストの下 */
    margin: 0 !important;
    pointer-events: none;
    /* クリックを邪魔しない */
}

.p-message-detail-wrap .p-corporate-message-section .msg-visual img {
    width: 100%;
    height: auto;
}

/* 1. テキストエリア (60%) */
.p-message-detail-wrap .p-corporate-message-section .msg-text {
    padding: 0 !important;
}

.p-corporate-message-section .p-message-detail__catch {
    border: none;
}

/* 上の線：左から右へ透明に */
.p-corporate-message-section .p-message-detail__catch::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    /* 長さは100%にしてグラデーションで消す */
    height: 1px;
    background: linear-gradient(to right, #eee 0%, #eee 50%, transparent 100%);
}

/* 下の線（もし入れる場合）：同様にグラデーション */
.p-corporate-message-section .p-message-detail__catch::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70%;
    height: 1px;
    background: linear-gradient(to right, #eee 0%, #eee 50%, transparent 100%);
}

/* --- レスポンシブ調整（1300px以下） --- */
@media screen and (max-width: 1300px) {
    .p-message-detail-wrap .p-corporate-message-section .msg-text {
        padding: 0 2.0rem !important;
    }

    .p-message-detail-wrap .p-corporate-message-section .msg-visual {
        top: -4%;
    }
}

/* --- レスポンシブ：スマホ --- */
@media screen and (max-width: 782px) {
    .p-message-detail-wrap .p-corporate-message-section .msg-text {
        padding: 4.0rem 2.0rem !important;
    }
}

/* --- レスポンシブ：スマホ対応 --- */
@media screen and (max-width: 782px) {

    /* 1. コンテナの重ね合わせを解除 */
    .p-message-detail-wrap .p-corporate-message-section .msg-flex-layout {
        display: flex !important;
        flex-direction: column;
        /* 縦並びに変更 */
    }

    /* 3. 画像を「テキストの下」に再配置 */
    .p-message-detail-wrap .p-corporate-message-section .msg-visual {
        position: relative;
        /* 絶対配置を解除して流れに組み込む */
        top: 0;
        right: 0;
        transform: none;
        /* 位置調整のリセット */
        width: 80% !important;
        /* スマホで程よいサイズ感に変更 */
        margin: 0 auto !important;
        /* 中央寄せ */
        opacity: 0.4;
        height: auto !important;
    }

    /* 4. 徐々に消えるボーダーの長さをスマホ用に調整 */
    .p-corporate-message-section .p-message-detail__catch::before,
    .p-corporate-message-section .p-message-detail__catch::after {
        display: none;
    }

    .p-corporate-message-section .p-message-detail__catch {
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }
}

/* ==========================================================================
   Statement - 理念設計 (.philosophy-layout 限定)
   ========================================================================== */

.philosophy-layout *,
.philosophy-layout *::before,
.philosophy-layout *::after {
    box-sizing: inherit;
}

/* --- 共通コンポーネント --- */
.philosophy-layout .vertical-line {
    width: 1px;
    height: 12.0rem;
    background: linear-gradient(to bottom, var(--nissin-blue), transparent);
    margin: 0 auto;
}

/* --- Hero Section --- */
.philosophy-layout .hero {
    height: 25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, #ffffff 0%, var(--light-gray) 30%, var(--light-gray) 100%);
    text-align: center !important;
    padding: 0 2rem 2rem 2rem;
}

.philosophy-layout .hero .label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    font-size: 1.2rem;
    color: var(--nissin-blue);
    margin-bottom: 2.0rem;
    font-weight: 600;
}

.philosophy-layout .craft-title {
    text-align: center !important;
}

.philosophy-layout .hero h2 {
    font-family: 'Playfair Display', serif;
    font-size: 5.5rem;
    margin: 0;
    color: #4A4A4A;
    line-height: 1.2;
    font-weight: 400;
    text-align: center !important;
}

/* --- Mission Section (中央揃え) --- */
.philosophy-layout .statement-diagram {
    padding: 8.0rem 2.0rem;
    text-align: center !important;
}

.philosophy-layout .statement-diagram img {
    display: inline-block;
    /* text-alignを効かせるため */
    max-width: 80.0rem;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 1.0rem 2.0rem rgba(0, 0, 0, 0.05));
}

.philosophy-layout .mission-text {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    line-height: 1.6;
    max-width: 90.0rem;
    margin: 0 auto;
    font-style: italic;
    color: #000;
    text-align: center !important;
    padding: 10.0rem 2.0rem;
    font-weight: bold;
}

/* WPのWYSIWYG対策：中のpタグもセンターへ */
.philosophy-layout .mission-text p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- Core Values Wide (左右色違い) --- */
.philosophy-layout .core-values-wide {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.philosophy-layout .value-split-card {
    flex: 1;
    min-width: 50%;
    padding: 12.0rem 8%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.philosophy-layout .value-split-card.creation {
    background-color: #ebebeb;
}

.philosophy-layout .value-split-card.family {
    background-color: #f2f2f2;
}

.philosophy-layout .value-inner {
    max-width: 50.0rem;
}

.philosophy-layout .value-inner h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.8rem;
    color: var(--nissin-blue);
    margin-bottom: 2.5rem;
    position: relative;
    font-weight: 800;
    text-align: left;
}

.philosophy-layout .value-inner h3::after {
    content: '';
    position: absolute;
    bottom: -1.2rem;
    left: 0;
    width: 5.0rem;
    height: 0.2rem;
    background: var(--nissin-blue);
}

.philosophy-layout .v-desc {
    font-size: 1.6rem;
    line-height: 1.8;
}

/* --- Craftsmanship (Black) --- */
.philosophy-layout .craft-section {
    background-color: #000;
    color: #fff;
    padding: 12.0rem 0;
}

.philosophy-layout .craft-header {
    text-align: center !important;
    margin-bottom: 10.0rem;
}

.philosophy-layout .craft-header .quote-mark {
    font-family: 'Playfair Display', serif;
    font-size: 8.0rem;
    color: var(--nissin-blue);
    opacity: 0.8;
    display: block;
    margin-bottom: -3.0rem;
    line-height: 1;
}

.philosophy-layout .craft-title {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 4.8rem;
    padding: 0 2rem;
}

.philosophy-layout .craft-block {
    display: flex;
    align-items: center;
}

.philosophy-layout .craft-block.reverse {
    flex-direction: row-reverse;
}

.philosophy-layout .craft-image {
    flex: 1.2;
    height: 55.0rem;
    background-size: cover;
    background-position: center;
    filter: grayscale(1);
}

.philosophy-layout .craft-text {
    flex: 1;
    padding: 0 8%;
}

.philosophy-layout .craft-text h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.4rem;
    margin-bottom: 2.5rem;
}

/* --- Quality Policy (中央揃え) --- */
.philosophy-layout .quality-policy-box {
    margin: 12.0rem auto 0;
    padding: 8.0rem 2.0rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center !important;
    max-width: 100.0rem;
}

.philosophy-layout .policy-label {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.3em;
    font-size: 1.2rem;
    color: var(--nissin-blue);
    margin-bottom: 3.0rem;
    display: block;
    font-weight: 600;
    text-transform: uppercase;
}

.philosophy-layout .policy-text,
.philosophy-layout .policy-text p {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    line-height: 1.8;
    font-weight: 400;
    font-style: italic;
    color: #ffffff;
    max-width: 80.0rem;
    margin: 0 auto;
    text-align: center !important;
}

/* --- Vision --- */
.philosophy-layout .vision-section {
    padding: 15.0rem 0;
    background: #fff;
}

.philosophy-layout .container-vision {
    max-width: 120.0rem;
    margin: 0 auto;
    padding: 0 4.0rem;
}

.philosophy-layout .vision-block {
    display: flex;
    align-items: center;
    gap: 8.0rem;
    margin-bottom: 10.0rem;
}

.philosophy-layout .vision-block.reverse {
    flex-direction: row-reverse;
}

.philosophy-layout .vision-image-group {
    flex: 1.2;
    position: relative;
}

.philosophy-layout .vision-image-simodont {
    position: relative;
}

.philosophy-layout .simodont-main {
    width: 85%;
    z-index: 2;
    position: relative;
    filter: drop-shadow(0 2.0rem 4.0rem rgba(0, 0, 0, 0.1));
}

/* サブ画像（液晶画面） */
.philosophy-layout .simodont-sub {
    position: absolute !important;
    width: 65% !important;

    /* 【ここがポイント】上から80%の位置に固定 */
    top: 60% !important;
    right: 0 !important;
    /* 画像の中心ではなく、少しだけ上に重心を置くために -50% で調整 */
    transform: translateY(-50%) !important;

    z-index: 1;
    filter: grayscale(100%) brightness(1.1) !important;
    opacity: 0.4 !important;
    border-radius: 0.8rem;
}

.philosophy-layout .vision-text {
    flex: 1;
}

.philosophy-layout .vision-tag {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    color: var(--nissin-blue);
    letter-spacing: 0.2em;
    display: block;
    margin-bottom: 1.5rem;
}

.philosophy-layout .vision-text h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.6rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 3.0rem;
}

/* --- Quality Policy (枠線発光版) --- */
.philosophy-layout .quality-policy-box {
    margin: 12.0rem auto 0;
    padding: 10.0rem 4.0rem;
    /* 枠線を少し青みのある白に */
    border: 1px solid rgba(14, 40, 132, 0.4);
    text-align: center !important;
    max-width: 100.0rem;
    position: relative;
    z-index: 1;

    /* 枠の外側と内側に光を漏らす */
    box-shadow:
        0 0 20px rgba(14, 40, 132, 0.2),
        /* 外側への淡い光 */
        inset 0 0 15px rgba(14, 40, 132, 0.1);
    /* 内側への柔らかな光 */

    /* 背景に少しだけ濃淡をつける */
    background: radial-gradient(circle at center, rgba(14, 40, 132, 0.08) 0%, transparent 70%);
}

.philosophy-layout .policy-label {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.4em;
    font-size: 1.8rem;
    color: var(--nissin-blue);
    margin-bottom: 4.0rem;
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    /* ラベル文字自体も少し光らせる */
    text-shadow: 0 0 8px rgba(14, 40, 132, 0.6);
}

.philosophy-layout .policy-text,
.philosophy-layout .policy-text p {
    font-family: 'Playfair Display', serif !important;
    font-size: 2.6rem;
    line-height: 1.8;
    font-weight: 400;
    font-style: italic !important;
    color: #ffffff;
    max-width: 85.0rem;
    margin: 0 auto;
    text-align: center !important;
    /* 文字の可読性を上げるためのシャドウ */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.vision-block.reverse {
    margin-bottom: 0 !important;
}

/* 2つ目の画像用スタイル */
.philosophy-layout .vision-image-simple img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

@media (max-width:1300px) {
    .philosophy-layout .quality-policy-box {
        max-width: 90% !important;
    }

    .philosophy-layout .hero h2 {
        font-size: 4.5rem;
    }
}

@media (max-width: 1000px) {
    .philosophy-layout .craft-title {
        font-size: 4.3rem;
        line-height: 1.4;
    }
}

@media (max-width: 782px) {

    .philosophy-layout .core-values-wide,
    .philosophy-layout .vision-block,
    .philosophy-layout .craft-block {
        display: block;
    }

    .philosophy-layout .value-split-card {
        min-width: 100%;
        padding: 6.0rem 2rem;
    }

    .philosophy-layout .craft-image,
    .philosophy-layout .vision-image-simple,
    .philosophy-layout .vision-image-simodont {
        height: 35.0rem;
        width: 100%;
    }

    .philosophy-layout .craft-text,
    .philosophy-layout .vision-text,
    .philosophy-layout .value-item {
        padding: 4.0rem 2.0rem;
    }

    .philosophy-layout .hero h1 {
        font-size: 3.2rem;
    }

    .philosophy-layout .quality-policy-box {
        margin: 6rem auto 0 !important;
        padding: 5rem 2.0rem !important;
    }

    .philosophy-layout .mission-text {
        padding: 5rem 2rem 10rem 2rem;
    }

    .philosophy-layout .statement-diagram {
        padding: 4rem 2rem;
    }

    .philosophy-layout .craft-section {
        padding: 6.0rem 0;
    }

    /* 1. 全体を一列にスタック（画像が常に上） */
    .philosophy-layout .vision-block,
    .philosophy-layout .vision-block.reverse {
        display: flex;
        flex-direction: column;
        /* 縦一列に */
        gap: 3.0rem;
        margin-bottom: 8.0rem;
        text-align: left !important;
        /* 勝手にセンターにならないように強制 */
    }

    /* 2. Simodontの画像グループの重なり修正 */
    .philosophy-layout .vision-image-simodont {
        height: auto;
        min-height: 40.0rem;
        /* 画像が重なっても崩れない高さを確保 */
        position: relative;
        display: block;
        margin-bottom: 2.0rem;
    }

    /* メイン画像（本体） */
    .philosophy-layout .simodont-main {
        width: 80% !important;
        /* 少し小さくして余白を作る */
        height: auto;
        display: block;
        margin: 0;
        /* 左寄せ */
    }

    /* 3. テキスト周りの調整 */
    .philosophy-layout .vision-text {
        width: 100%;
        padding: 0;
        /* 余計なパディングをリセット */
        text-align: left !important;
        /* 左寄せを徹底 */
    }

    /* タグ（Dental Educationなど）が勝手にセンターにならないように */
    .philosophy-layout .vision-tag {
        display: inline-block;
        text-align: left !important;
        margin-bottom: 1.0rem;
        width: 100%;
    }

    .philosophy-layout .vision-text h2 {
        font-size: 2.8rem;
        line-height: 1.2;
        margin-bottom: 2.0rem;
        text-align: left !important;
    }

    /* 4. 二つ目の画像（Care Beyond the Clinic）も高さを調整 */
    .philosophy-layout .vision-image-simple {
        height: 30.0rem;
        width: 100%;
        border-radius: 1.2rem;
    }

    .philosophy-layout .vision-block.reverse {
        display: block;
    }

    .philosophy-layout .vision-section {
        padding: 7.5rem 0;
        background: #fff;
    }

    .philosophy-layout .vision-image-simple {
        height: auto !important;
        /* imgタグなので自動計算に任せる */
        margin-bottom: 2.0rem;
    }

    .philosophy-layout .container-vision {
        padding: 0 2.0rem;
    }

    /* --- 共通コンポーネント --- */
    .philosophy-layout .vertical-line {
        height: 8.0rem;
    }
}

/* ============================================================
   新商品LPセクション (.pageContentsNewitem) 全体設定
   ============================================================ */

.pageContentsNewitem {
    margin-top: 8rem;
}

.pageContentsNewitem .container {
    margin: 0 auto !important;
}

.newitem-3col {
    overflow: hidden;
    position: relative;
    background-image: linear-gradient(181deg, rgba(255, 255, 255, 1), rgba(248, 248, 248, 1));

}

.newitem-3col .wp-block-group__inner-container {
    max-width: 1300px;
    margin: auto;
    padding: 2rem;
}

.newitem-3col {
    padding: 0 0 6rem 0;
}

.newitem-3col h3.wp-block-heading {
    margin: 0 0 1.5rem 0;
    color: #0e2884;
}

.newitem-3col .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: auto;
    flex-grow: 0;
}

.newitem-3col .wp-block-columns img {
    max-height: 45rem;
    object-fit: cover;
}

:where(.newitem-3col .wp-block-columns.is-layout-flex) {
    gap: 0;
}

.pageContentsNewitem .newitem-3col .wp-block-group__inner-container div.wp-block-columns:nth-child(2) {
    margin: 10rem 0;
}

.pageContentsNewitem .newitem-3col .wp-block-group__inner-container div.wp-block-columns:first-child div:nth-child(1),
.pageContentsNewitem .newitem-3col .wp-block-group__inner-container div.wp-block-columns:nth-child(2) div:nth-child(1),
.pageContentsNewitem .newitem-3col .wp-block-group__inner-container div.wp-block-columns:nth-child(3) div:nth-child(1) {
    width: 48%;
    background-color: #fff;
    padding: 2rem;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

.pageContentsNewitem .newitem-3col .wp-block-group__inner-container div.wp-block-columns:first-child div:nth-child(2),
.pageContentsNewitem .newitem-3col .wp-block-group__inner-container div.wp-block-columns:nth-child(3) div:nth-child(2) {
    flex: 1;
    margin-right: calc(50% - 50vw);
    z-index: 1;
}

.pageContentsNewitem .newitem-3col .wp-block-group__inner-container div.wp-block-columns:nth-child(2) div:nth-child(2) {
    flex: 1;
    margin-left: calc(50% - 50vw);
    z-index: 1;
}

.newitemComponent .wp-block-image {
    width: 100%;
}

.newitemWrap iframe {
    width: 100%;
}

.newitemWrap h3.wp-block-heading {
    margin: 0 0 1.5rem 0;
    color: #0e2884;
}

@media only screen and (max-width : 1000px) {
    .pageContentsNewitem {
        margin-top: 70px;
    }
}

@media only screen and (max-width : 782px) {
    .reverseNewitem {
        flex-direction: row-reverse;
    }

    .pageContentsNewitem h2.newitemCopy br {
        display: none;
    }

    .pageContentsNewitem .newitemTtl2 {
        font-size: 3.5rem !important;
    }

    .pageContentsNewitem .newitem-3col .wp-block-group__inner-container div.wp-block-columns:first-child div:nth-child(1),
    .pageContentsNewitem .newitem-3col .wp-block-group__inner-container div.wp-block-columns:nth-child(2) div:nth-child(1),
    .pageContentsNewitem .newitem-3col .wp-block-group__inner-container div.wp-block-columns:nth-child(3) div:nth-child(1) {
        width: 100%;
    }

    .pageContentsNewitem .newitem-3col .wp-block-group__inner-container div.wp-block-columns:first-child div:nth-child(2),
    .pageContentsNewitem .newitem-3col .wp-block-group__inner-container div.wp-block-columns:nth-child(3) div:nth-child(2) {
        margin-right: 0;
    }

    .pageContentsNewitem .newitem-3col .wp-block-group__inner-container div.wp-block-columns:nth-child(2) div:nth-child(2) {
        margin-left: 0;
    }

    .pageContentsNewitem .newitem-3col .wp-block-group__inner-container div.wp-block-columns:nth-child(2) {
        margin: 5rem 0;
    }
}

@media only screen and (max-width: 600px) {
    .newitemWrap .wp-block-media-text .wp-block-media-text__content {
        padding: 0;
    }

    :where(.newitem-4col .wp-block-columns.is-layout-flex.is-not-stacked-on-mobile) {
        gap: 0;
    }
}

/* ============================================================
   MANABOT 特長セクション (3col) デザイン
   ============================================================ */

/* 1. 白いテキストボックスの基本デザイン */
.pageContentsNewitem .newitem-3col .wp-block-group__inner-container div.wp-block-columns > div:nth-child(1) {
    width: 48% !important;
    background-color: #fff;
    padding: 3.5rem !important;
    box-shadow: 0 15px 45px rgba(14, 40, 132, 0.06) !important;
    border-top: 5px solid #0e2884;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 中身を上下中央に */
}

/* 2. ラベル（＜BODY＞など）のデザイン */
.pageContentsNewitem .newitem-3col .wp-block-column p:first-child {
    color: #0e2884 !important;
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid #0e2884;
    display: inline-block;
    width: fit-content;
    /* 英字の強調設定 */
    font-family: 'Roboto', 'Arial', sans-serif !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase;
}

/* 3. H3見出しのリセットと装飾（縦ライン） */
.pageContentsNewitem .newitem-3col h3.wp-block-heading {
    /* 共通スタイルのリセット */
    background-color: transparent !important;
    border-left: none !important;
    padding: 0 0 0 2rem !important;
    /* 左にライン用の余白を確保 */
    margin: 0 0 2rem 0 !important;
    display: block !important;
    text-align: left !important;

    /* マナボット専用フォントスタイル */
    font-size: 2.4rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.02em !important;
    position: relative;
}

/* H3の装飾：太いメインライン */
.pageContentsNewitem .newitem-3col h3.wp-block-heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5%;
    height: 90%;
    width: 3px;
    background: #0e2884;
    border-radius: 2px;
}

/* H3の装飾：細いサブライン */
.pageContentsNewitem .newitem-3col h3.wp-block-heading::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(14, 40, 132, 0.3);
}

/* 4. 本文テキストの調整 */
.pageContentsNewitem .newitem-3col .wp-block-column p:last-child {
    line-height: 1.8;
    color: #666;
}

.pageContentsNewitem .newitem-3col .wp-block-group__inner-container div.wp-block-columns:first-child {
    margin-top: 0 !important;
}

/* スマホ対応：少しサイズを調整 */
@media only screen and (max-width : 782px) {
    .pageContentsNewitem .newitem-3col .wp-block-group__inner-container div.wp-block-columns > div:nth-child(1) {
        border-top: 3px solid #0e2884;
    }
}


/* ============================================================
   お問い合わせボタン (Contact Us) - 汎用グレーシャドウ & 光沢エフェクト
   ============================================================ */

/* 1. ボタン外側のコンテナ（余白調整） */
.newitemContactBtn {
    margin: 4rem auto 2rem !important;
    text-align: center;
    width: 100%;
}

/* 2. ボタン本体のデザイン */
.newitemContactBtn a.wp-block-button__link {
    position: relative;
    display: inline-flex !important;
    /* 文字と矢印を横並びに */
    align-items: center;
    justify-content: center;
    min-width: 320px;
    /* ボタンの存在感を出すための最小幅 */
    padding: 1.7rem 4rem !important;
    border-radius: 50px !important;
    border: none !important;
    font-size: 2.3rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase;
    color: #fff !important;

    /* 滑らかな動きの設定 */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;

    /* 汎用グレーシャドウ */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden;
    /* 光るエフェクト（::before）を中におさめる */
}

/* 3. 矢印アイコンの追加（疑似要素） */
.newitemContactBtn a.wp-block-button__link::after {
    font-family: 'FontAwesome';
    /* ファイル内の定義に合わせる */
    content: "\f178";
    /* fa-long-arrow-right のコード */
    margin-left: 15px;
    font-size: 1em;
    font-weight: 400;
    transition: transform 0.4s ease;
}

/* 4. ホバー時のアクション（浮き上がる・影を強調） */
.newitemContactBtn a.wp-block-button__link:hover {
    transform: translateY(-5px);
    /* 上にふわっと浮く */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
    /* 影を深くして立体感を出す */
    filter: brightness(1.1);
    /* ボタンの色自体を少し明るくして発光感を出す */
    text-decoration: none !important;
}

/* 矢印をさらに右にスライドさせる */
.newitemContactBtn a.wp-block-button__link:hover::after {
    transform: translateX(8px);
}

/* 5. フラッシュエフェクト（疑似要素） */
.newitemContactBtn a.wp-block-button__link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    transition: none;
    pointer-events: none;
    /* クリックの邪魔をしない */
}

/* ホバーした瞬間だけ光が左から右へ駆け抜ける */
.newitemContactBtn a.wp-block-button__link:hover::before {
    left: 150%;
    transition: all 0.8s ease;
}

/* スマホ対応：少しサイズを調整 */
@media only screen and (max-width : 782px) {
    .newitemContactBtn a.wp-block-button__link {
        min-width: 90%;
        padding: 1.5rem 2rem !important;
        font-size: 1.6rem !important;
    }
}

/* ============================================================
   キャッチコピー・ブロック (右上透かし文字 ＋ 鉤括弧)
   ============================================================ */

/* 1. 親コンテナ：全体を包むグループ */
.newitemCopyBloc {
    position: relative;
    padding: 6rem 2rem !important;
    margin: 8rem auto !important;
    text-align: center;
    overflow: hidden !important;
    /* 透かしのはみ出しをカット */
    background: transparent !important;
    width: 100%;
}

.newitemCopyBloc .wp-block-group__inner-container {
    position: relative;
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 6rem 4rem !important;
}

/* 2. 右上に配置する透かし文字 */
.newitemWatermark {
    position: absolute;
    top: 0;
    right: -12rem;
    /* デスクトップでは右へ */
    transform: none;
    z-index: 1;

    /* デザイン設定 */
    font-size: 12rem !important;
    font-weight: 900 !important;
    color: rgba(14, 40, 132, 0.055) !important;
    white-space: nowrap;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif !important;
    line-height: 0.8 !important;
    pointer-events: none;
    margin: 0 !important;
}

/* 3. メインのキャッチコピー (H2) */
.pageContentsNewitem h2.newitemCopy {
    position: relative;
    z-index: 2;
    display: inline-block;
    border: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    background: transparent !important;

    /* タイポグラフィ */
    font-size: 3.8rem !important;
    font-weight: 800 !important;
    color: #0e2884 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.02em !important;
    max-width: 900px;
    font-family: 'Roboto', sans-serif !important;
}

/* 4. 鉤括弧のデザイン (疑似要素) */
/* 左上 */
.newitemCopy:after {
    content: '';
    position: absolute;
    top: -4.5rem;
    left: -4.5rem;
    width: 80px;
    height: 80px;
    border-top: 2px solid #0e2884 !important;
    border-left: 2px solid #0e2884 !important;
}

/* 右下 */
.newitemCopy:before {
    content: '';
    position: absolute;
    bottom: -4.5rem;
    right: -4.5rem;
    width: 80px;
    height: 80px;
    border-right: 2px solid #0e2884 !important;
    border-bottom: 2px solid #0e2884 !important;
}

/* --- 5. レスポンシブ：タブレット (1300px以下) --- */
@media only screen and (max-width : 1300px) {
    .newitemWatermark {
        font-size: 8rem !important;
        top: 1rem;
        right: -1rem;
        /* 見切れすぎないよう内側へ */
        letter-spacing: 0.05em;
    }
}

/* --- 6. レスポンシブ：スマホ (782px以下) --- */
@media only screen and (max-width : 782px) {
    .newitemCopyBloc {
        padding: 3rem 2rem !important;
        /* 余白をコンパクトに */
        margin: 4rem auto !important;
    }

    .newitemCopyBloc .wp-block-group__inner-container {
        padding: 4rem 2rem !important;
    }

    .newitemWatermark {
        font-size: 5rem !important;
        top: 1rem;
        right: -1rem;
    }

    .pageContentsNewitem h2.newitemCopy {
        font-size: 2.2rem !important;
        line-height: 1.5 !important;
    }

    /* スマホ用の鉤括弧調整 */
    .newitemCopy:after,
    .newitemCopy:before {
        width: 40px;
        height: 40px;
    }

    .newitemCopy:after {
        top: -2.5rem;
        left: -1rem;
    }

    .newitemCopy:before {
        bottom: -2.5rem;
        right: -1rem;
    }
}


/* ============================================================
   セクション共通見出し：FEATURES / STUDY MODELS etc.
   ============================================================ */

/* 1. 見出し本体の基本スタイル */
.pageContentsNewitem h2.newitemTtl2 {
    position: relative;
    text-align: center;

    /* タイポグラフィ */
    font-size: 3.5rem !important;
    font-weight: 900 !important;
    color: #0e2884 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif !important;

    /* 余白：基本はセクション区切りとして大きく取る */
    margin: 15rem auto 8rem !important;
    padding: 0 0 3.5rem 0 !important;
    /* 下線との距離 */
    border: none !important;
    overflow: visible !important;
}

/* 2. 一番最初の見出しだけ上の余白を消す */
.newitemCopyBloc + h2.newitemTtl2 {
    margin-top: 0 !important;
}

/* 3. 【1本目：土台】画面幅いっぱいのロングライン（透過グラデーション） */
.pageContentsNewitem h2.newitemTtl2::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    /* 安全を考慮した90%幅 */
    height: 1px;
    background: linear-gradient(to right,
            transparent,
            rgba(14, 40, 132, 0.2) 20%,
            rgba(14, 40, 132, 0.2) 80%,
            transparent);
    z-index: 1;
}

/* 4. 【2本目：アクセント】中心の濃いライン（土台に重ねる） */
.pageContentsNewitem h2.newitemTtl2::after {
    content: '';
    position: absolute;
    bottom: -1px;
    /* 土台の1pxにピッタリ重ねる */
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #0e2884;
    z-index: 2;
    border-radius: 2px;
}

/* --- 5. レスポンシブ (スマホ対応) --- */
@media only screen and (max-width : 782px) {
    .pageContentsNewitem h2.newitemTtl2 {
        margin: 8rem auto 4rem !important;
        font-size: 2.8rem !important;
        width: 100%;
        padding-bottom: 2.5rem !important;
    }

    /* 最初の見出しのマージンもスマホ用に調整 */
    .newitemCopyBloc + h2.newitemTtl2 {
        margin-top: 0 !important;
    }

    .pageContentsNewitem h2.newitemTtl2::before {
        width: 100%;
        /* スマホは画面いっぱいでOK */
    }

    .pageContentsNewitem h2.newitemTtl2::after {
        width: 40px;
        /* スマホではアクセントを少し短く */
    }
}

/* ============================================================
   OPTIONAL PRODUCTS：左右ボーダーレス・モダンデザイン
   ============================================================ */
.newitemTable table {
    width: 100%;
    border-collapse: collapse;
    border-left: none !important;
    border-right: none !important;
    /* 上下のメインライン：上はブランドカラー、下は落ち着いたグレー */
    border-top: 2px solid #0e2884 !important;
    border-bottom: 2px solid rgba(14, 40, 132, 0.1) !important;
    background-color: transparent !important;
    border-spacing: 0;
}

/* 既存のボーダーを徹底リセット */
.newitemTable table,
.newitemTable table tr,
.newitemTable table td {
    border: none;
}

/* セルの基本スタイル */
.newitemTable td {
    padding: 2.5rem 1rem !important;
    border-bottom: 1px solid #eee !important;
    /* 行間の区切り：優しいグレー */
    font-size: 1.5rem;
    line-height: 1.8;
    vertical-align: top;
    color: #444;
}

/* 左側：項目名（INDIVIDUAL ITEMS） */
.newitemTable td:first-child {
    width: 25%;
    color: #0e2884;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif !important;
    background-color: rgba(14, 40, 132, 0.04) !important;
    /* 柱としての存在感 */
    padding-left: 2rem !important;
}

/* 右側：リスト内容 */
.newitemTable td:last-child {
    width: 75%;
    padding-left: 4rem !important;
}

/* テーブル最下部の余計な線を消す（外枠のborder-bottomと重なるため） */
.newitemTable tr:last-child td {
    border-bottom: none !important;
}

/* --- スマホ対応：さらにミニマルに --- */
@media only screen and (max-width : 782px) {
    .newitemTable td {
        display: block;
        width: 100% !important;
        padding: 2rem 1rem !important;
    }

    .newitemTable td:first-child {
        border-bottom: 1px solid #0e2884 !important;
        /* 項目名の下にアクセント */
    }

    .newitemTable table {

        border-top: 1px solid #eee !important;
        /* 濃い紺で締める */
        border-bottom: none !important;
    }

    .newitemTable td:last-child {
        padding: 2rem 1.5rem 4rem 1.5rem !important;
    }

    .newitemTable tr:last-child td:first-child {
        border-bottom: 1px solid #0e2884 !important;
    }

    .newitemTable tr:last-child td:last-child {
        padding-bottom: 0 !important;
    }
}

/* ============================================================
   LAYOUT: 1300px 4列グリッド完全固定 
   ============================================================ */

/* 1. コンテナ設定 */
.pageContentsNewitem .newitem-col4 {
    max-width: 1300px !important;
}

/* 2. グリッド統合：1行目と2行目を一つの4列グリッドとして扱う */
.newitem-col4 .wp-block-group__inner-container {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 3rem !important;
}

/* 既存の「行」の概念を消して「列」を直接グリッドへ流し込む */
.newitem-col4 .wp-block-columns {
    display: contents !important;
}

/* 3. 各カード（列）：枠固定・正方形維持 */
.newitem-col4 .wp-block-column {
    position: relative;
    cursor: zoom-in;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    flex-basis: auto !important;
    aspect-ratio: 1 / 1;
    /* 正方形を死守 */
    overflow: hidden;
    line-height: 0;

    /* 初期は枠線なし（空枠対策） */
    border: none !important;
    background: transparent !important;
    transition: box-shadow 0.4s ease;
}

/* 画像があるカードだけ、白背景と枠線を付ける */
.newitem-col4 .wp-block-column:has(img) {
    border: 1px solid #f0f0f0 !important;
    background: #fff !important;
}

.newitem-col4 .wp-block-column:has(img):hover {
    box-shadow: 0 15px 40px rgba(14, 40, 132, 0.2);
    z-index: 10;
}

/* 画像がない空のカラムは完全に非表示 */
.newitem-col4 .wp-block-column:not(:has(img)) {
    display: none !important;
}

/* ============================================================
   ANIMATION: インナーズーム & フロストガラス
   ============================================================ */

/* 4. 画像：枠内で拡大 */
.newitem-col4 figure.wp-block-image {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.newitem-col4 figure.wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    /* 枠をきっちり埋める */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.newitem-col4 .wp-block-column:hover figure img {
    transform: scale(1.12);
}

/* 5. フロストガラス（画像がある時だけ青グラデを出す） */
.newitem-col4 .wp-block-column:has(img):before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: linear-gradient(0deg,
            rgba(14, 40, 132, 0.85) 0%,
            rgba(14, 40, 132, 0.4) 60%,
            rgba(14, 40, 132, 0) 100%);
    -webkit-mask-image: linear-gradient(to top, black 25%, transparent 100%);
    mask-image: linear-gradient(to top, black 25%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

/* 6. キャプション（常時表示） */
.newitem-col4 figcaption.wp-element-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem 1rem !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    letter-spacing: 0.05em !important;
    font-family: 'Roboto', sans-serif !important;
    background: none !important;
    z-index: 3;
    pointer-events: none;
    transition: padding-bottom 0.4s ease;
}

.newitem-col4 .wp-block-column:hover figcaption {
    padding-bottom: 2.2rem !important;
}

/* ============================================================
   LAYOUT: 1300px 5列グリッド完全固定 (ver3)
   ============================================================ */

/* 1. コンテナ設定：5列グリッド化 */
.picTxt-col5_ver3 .wp-block-group__inner-container {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    /* 5列固定 */
    gap: 3rem !important;
    /* 5列なので少し隙間を調整 */
    max-width: 1300px !important;
    margin: 0 auto !important;
}

/* 2. 各フィギュア（カード）：枠固定・正方形維持 */
.picTxt-col5_ver3 figure.picTxtBlock {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    /* 正方形を死守 */
    overflow: hidden;
    cursor: zoom-in;
    border: 1px solid #f0f0f0 !important;
    background: #fff !important;
    transition: box-shadow 0.4s ease;
}

.picTxt-col5_ver3 figure.picTxtBlock:hover {
    box-shadow: 0 15px 40px rgba(14, 40, 132, 0.2);
    z-index: 10;
}

/* ============================================================
   ANIMATION: インナーズーム & フロストガラス (継承)
   ============================================================ */

/* 3. 画像：枠内で拡大 */
.picTxt-col5_ver3 figure.picTxtBlock img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.picTxt-col5_ver3 figure.picTxtBlock:hover img {
    transform: scale(1.12);
}

/* 4. フロストガラス（青グラデーション） */
.picTxt-col5_ver3_caption figure.picTxtBlock:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: linear-gradient(0deg,
            rgba(14, 40, 132, 0.85) 0%,
            rgba(14, 40, 132, 0.4) 60%,
            rgba(14, 40, 132, 0) 100%);
    -webkit-mask-image: linear-gradient(to top, black 25%, transparent 100%);
    mask-image: linear-gradient(to top, black 25%, transparent 100%);
    pointer-events: none;
    z-index: 2;
    opacity: 0.8;
    /* デフォルトの濃さを少し調整 */
}

/* 5. キャプション */
.picTxt-col5_ver3 figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.2rem 0.5rem !important;
    color: #fff !important;
    font-size: 1.3rem !important;
    /* 5列なので少し小さく */
    font-weight: 700 !important;
    text-align: center !important;
    z-index: 3;
    pointer-events: none;
}


@media only screen and (max-width : 1000px) {
    .picTxt-col5_ver3 .wp-block-group__inner-container {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2.5rem !important;
    }
}

/* 1000px以下：2列 */
@media only screen and (max-width : 782px) {
    .picTxt-col5_ver3 .wp-block-group__inner-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }
}

/* ============================================================
   LIGHTBOX: 拡大表示設定 (900px固定)
   ============================================================ */

#nissin-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999999;
}

#nissin-lightbox.is-active {
    opacity: 1;
    visibility: visible;
}

.lb-content {
    width: 900px !important;
    max-width: 92% !important;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

#nissin-lightbox.is-active .lb-content {
    transform: scale(1);
}

.lb-content img {
    width: 100% !important;
    height: auto !important;
    max-height: 70vh !important;
    object-fit: contain;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
}

.lb-caption {
    color: #fff;
    margin-top: 2.5rem;
    font-size: 1.8rem;
    font-weight: 700;
    font-family: 'Roboto', sans-serif !important;
    text-align: center;
}

/* ============================================================
   RESPONSIVE: スマホ・タブレット
   ============================================================ */

/* 1300px以下：3列 */
@media only screen and (max-width : 1300px) {
    .newitem-col4 .wp-block-group__inner-container {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2.5rem !important;
    }
}

/* 1000px以下：2列 */
@media only screen and (max-width : 1000px) {
    .newitem-col4 .wp-block-group__inner-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }
}

/* ============================================================
   LINEUP SECTION: Frost-to-Blue Color Flip (Minimal)
   ============================================================ */

/* 1. カード全体の構造 */
.col-3_optionParts .blogIncWrap {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eee;
    transition: border-color 0.4s ease;
}

/* 2. 画像：インナーズーム */
.col-3_optionParts .blogIncMain {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0;
    overflow: hidden;
}

.col-3_optionParts .blogIncMain img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ホバー：画像ズーム */
.col-3_optionParts .blogIncWrap:hover .blogIncMain img {
    transform: scale(1.1);
}

/* 3. キャプション：白フロスト→紺反転 */
.col-3_optionParts a.internal_link {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem !important;
    /* 高さ固定 */

    /* 【初期】白っぽい曇りガラス ＋ 紺文字 */
    background: rgba(255, 255, 255, 0.55) !important;
    /* 白フロスト */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    font-size: 1.6rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    font-family: 'Roboto', sans-serif !important;
    text-decoration: none !important;

    display: flex;
    align-items: center;
    justify-content: center;

    /* 色の変化を滑らかに */
    transition: all 0.4s ease-in-out;
    z-index: 5;
}

/* ホバー：紺背景→白文字に反転 */
.col-3_optionParts .blogIncWrap:hover a.internal_link {
    background: rgba(14, 40, 132, 0.95) !important;
    /* 紺 */
    color: #fff !important;
    /* 白文字 */
    backdrop-filter: blur(5px);
}

/* ============================================================
   OPTION PARTS: STABLE & ACCURATE L-BRACKET
   ============================================================ */

/* 1. 器の設定：マウスが乗る対象 */
.col-3_optionParts .blogIncWrap {
    position: relative !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 2. 画像コンテナ（ここにL字を紐付ける） */
.col-3_optionParts .blogIncMain {
    position: relative !important;
    margin-bottom: 10px !important;
    overflow: visible !important;
    /* L字がはみ出せるように */
}

/* 3. L字の初期状態（常時表示）*/
.col-3_optionParts .blogIncMain::after {
    content: "" !important;
    position: absolute;
    /* --- 右上に --- */
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-top: 3px solid #0e2884;
    border-right: 3px solid #0e2884;

    /* アニメーション設定 */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 10;
    pointer-events: none;
    /* マウスイベントを透過させる */
}

/* --- PC：ホバー演出 (783px以上) --- */
@media only screen and (min-width: 783px) {

    /* 「カード全体」にマウスが乗ったら「L字」を動かす */
    .col-3_optionParts .blogIncWrap:hover .blogIncMain::after {
        width: 40px;
        height: 40px;
        border-color: #0e2884;
        opacity: 1 !important;
        /* 消えないように念押し */
        visibility: visible !important;
    }
}

/* --- スマホ：固定 (782px以下) --- */
@media only screen and (max-width: 782px) {
    .col-3_optionParts .blogIncMain::after {
        top: 0;
        right: 0;
        width: 15px;
        height: 15px;
        border-width: 2px;
    }
}

/* ============================================================
   LINEUP: 幅リセット & 3列グリッド完全制御
   ============================================================ */

/* 1. 親コンテナ：既存の幅指定をリセットしてGrid化 */
.col-3_optionParts .wp-block-group__inner-container {
    display: grid !important;
    /* 3列を均等に。既存のflex指定を無効化 */
    grid-template-columns: repeat(3, 1fr) !important;
    /* ここで間隔を自由に指定（2rem = 約32px） */
    gap: 3rem !important;

    /* 既存のflex設定を打ち消し */
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
}

/* 2. 子要素（各カード）：既存のwidth指定をすべて解除 */
.col-3_optionParts .blogIncWrap {
    /* 既存の「width: 33.3%」や「flex: 0 0 30%」などを強制上書き */
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
    /* gapで管理するのでmarginは不要 */

    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    /* 正方形を維持 */
}

/* ============================================================
   RESPONSIVE: スマホ・タブレット対応
   ============================================================ */

/* タブレット：1000px以下で2列 */
@media only screen and (max-width : 1000px) {
    .col-3_optionParts .wp-block-group__inner-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
        /* 隙間を少し狭く */
    }

    .col-3_optionParts a.internal_link {
        padding: 1.5rem !important;
        /* 高さ固定 */
    }
}

.col-3_optionParts .wp-block-group__inner-container::before,
.col-3_optionParts .wp-block-group__inner-container::after {
    content: none !important;
    /* コンテンツを消す */
    display: none !important;
    /* 存在自体を消す */
    width: 0 !important;
    /* 幅も念のため0に */
}

/* ============================================================
   YOUTUBE SECTION: newitem-col-3_youtube
   ============================================================ */

/* 1. 親コンテナ：Gridで3列を完璧に制御 */
.newitem-col-3_youtube {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3rem !important;
    /* 動画同士のゆったりした間隔 */
}

/* 2. 各カラム（動画＋テキスト）：中身を垂直に並べる */
.newitem-col-3_youtube .wp-block-column {
    margin: 0 !important;
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 中央揃え */
}

/* 3. 動画プレイヤー（iframe）の装飾 */
.newitem-col-3_youtube .wp-block-embed {
    margin: 0 0 1.5rem 0 !important;
    /* 下の文字との間隔 */
    width: 100%;
    /* ほんの少し角を丸めて、影をつける */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease;
}

/* ホバーで動画を少しだけ浮かせ、視聴を促す */
.newitem-col-3_youtube .wp-block-embed:hover {
    transform: translateY(-5px);
}

/* 4. 動画タイトル：可読性とデザイン性をアップ */
.newitem-col-3_youtube p {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #444 !important;
    /* 濃いグレーで読みやすく */
    line-height: 1.5 !important;
    text-align: center;
    margin: 0 !important;
    padding: 0 1rem !important;

    /* フォントをRoboto等に合わせる */
    font-family: 'Roboto', sans-serif;
}

/* ============================================================
   RESPONSIVE: スマホ対応
   ============================================================ */
@media only screen and (max-width : 782px) {
    .newitem-col-3_youtube {
        grid-template-columns: 1fr !important;
        /* スマホは1列 */
        gap: 3rem !important;
    }
}

/* ============================================================
   MANABOT® SAMPLE TOOLS: TOTAL FINAL CODE
   ============================================================ */

/* --- 1. 見出し(H3): シンプル・モダン・ニッシンブルー --- */
.sampleToolsBlock h3.wp-block-heading {
    background: transparent !important;
    border-left: 6px solid #0e2884 !important;
    padding: 0.2rem 0 0.2rem 1.5rem !important;
    margin-bottom: 2.5rem !important;
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: #0e2884 !important;
    display: block !important;
    margin-top: 0 !important;
}

.sampleToolsBlock h3.wp-block-heading::before {
    content: none !important;
    /* ■を消去 */
}

.sampleToolsBlock .col-3_newitemDownloadBlock,
.sampleToolsBlock .col-3_newitemDownloadBlock,
.sampleToolsBlock .wp-block-columns {
    margin-top: 0 !important;
}

/* --- 2. 共通設定: カードデザインの土台 --- */
.sampleToolsBlock figure {
    position: relative !important;
    margin: 0 !important;
    overflow: hidden !important;
    height: 100% !important;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform-style: preserve-3d !important;
    /* 物理消滅防止 */
}

.sampleToolsBlock figure img {
    width: 100% !important;
    height: 250px !important;
    /* 高さを統一 */
    object-fit: cover !important;
    display: block !important;
    transform: none !important;
    /* 拡大なし */
    transition: opacity 0.4s ease;
}

/* --- 3. 上段（downloadZip）: 右肩アイコン付きDLカード --- */
.downloadZip {
    position: relative !important;
}

/* 常時表示の右肩ダウンロードアイコン */
.downloadZip::after {
    content: "↓" !important;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: #0e2884;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.downloadZip:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(14, 40, 132, 0.15);
}

.downloadZip:hover::after {
    transform: scale(1.1);
    background: #1a3fb5;
}

.downloadZip figcaption {
    background: #f9f9f9 !important;
    color: #0e2884 !important;
    padding: 1.2rem 1rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    border-top: 1px solid #eee;
    font-size: 1.5rem !important;
}

/* --- 4. 下段（col-3_newitembigPicBloc）: 物理消去回避型フロストガラス --- */
.col-3_newitembigPicBloc .wp-block-column {
    position: relative !important;
}

/* 青グラデ：figureの中に配置し高さを35%に調整 */
.col-3_newitembigPicBloc figure::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: linear-gradient(0deg, rgba(14, 40, 132, 0.85) 0%, rgba(14, 40, 132, 0.4) 60%, rgba(14, 40, 132, 0) 100%);
    -webkit-mask-image: linear-gradient(to top, black 25%, transparent 100%);
    mask-image: linear-gradient(to top, black 25%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

/* 下段文字：絶対消えないようにZ軸で最前面へ */
.col-3_newitembigPicBloc figcaption {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1.5rem 1rem !important;
    color: #ffffff !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    text-align: center !important;

    z-index: 10 !important;
    transform: translateZ(5px) !important;
    /* 物理救出  */

    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none;
    transition: padding-bottom 0.4s ease !important;
}

/* 下段ホバー演出 */
.col-3_newitembigPicBloc .wp-block-column:hover figure {
    transform: translateY(-8px) translateZ(0) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
}

.col-3_newitembigPicBloc .wp-block-column:hover figcaption {
    padding-bottom: 2.2rem !important;
}

/* --- 5. 仕上げの共通設定 --- */
.downloadZip img {
    cursor: pointer !important;
}

.col-3_newitembigPicBloc figure img {
    cursor: zoom-in !important;
}

/* --- 5. RESPONSIVE: スマホ・タブレット対応 --- */

/* 1000px以下：上段を「テキスト(1列) ＋ 画像(2列)」に */
@media only screen and (max-width: 1000px) {
    .col-3_newitemDownloadBlock {
        flex-direction: column !important;
    }

    /* テキスト列 */
    .col-3_newitemDownloadBlock > .wp-block-column:first-child {
        width: 100% !important;
        margin-bottom: 2rem !important;
    }

    /* 画像を包む列 */
    .col-3_newitemDownloadBlock > .wp-block-column:last-child {
        width: 100% !important;
    }

    /* 画像2枚の横並びを守る */
    .col-3_newitemDownloadBlock .wp-block-columns {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 2rem !important;
    }

    .col-3_newitemDownloadBlock .wp-block-columns .wp-block-column {
        width: 50% !important;
        flex-basis: 50% !important;
    }
}

/* 782px以下：下段を「1列」に */
@media only screen and (max-width: 782px) {
    .col-3_newitembigPicBloc {
        display: flex !important;
        flex-direction: column !important;
        gap: 3rem !important;
    }

    .col-3_newitembigPicBloc .wp-block-column {
        width: 100% !important;
    }

    .sampleToolsBlock figure img {
        height: 200px !important;
        /* スマホでは少し低く */
    }
}

/* ============================================================
   LAYOUT: .newitem-col3_ver 3列 4:3 完全統合版
   ============================================================ */

/* 1. コンテナ：WordPressの標準カラム設定をリセットしてグリッド化 */
.newitem-col3_ver {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    /* 3列 */
    gap: 3rem !important;
    max-width: 1300px !important;
    margin: 4rem auto !important;
    flex-wrap: wrap !important;
    /* スマホ用 */
}

/* WP標準のflex挙動を解除 */
.newitem-col3_ver.wp-block-columns {
    flex-wrap: wrap !important;
}

/* 2. 各カード（列）：4:3比率と角丸 */
.newitem-col3_ver .wp-block-column {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    flex-basis: auto !important;
    /* WPの計算を無効化 */

    /* 【黄金比に近い安定感：4:3】 */
    aspect-ratio: 4 / 3 !important;

    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    background: #fff;
    transition: box-shadow 0.4s ease !important;
}

/* 3. 画像：枠内でズーム */
.newitem-col3_ver .wp-block-image {
    margin: 0 !important;
    width: 100%;
    height: 100%;
}

.newitem-col3_ver .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.newitem-col3_ver .wp-block-column:hover figure img {
    transform: scale(1.12) !important;
    /* 1.12倍ズーム */
}

/* 4. フロストガラス（青グラデ） */
.newitem-col3_ver .wp-block-column::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 45%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: linear-gradient(0deg,
            rgba(14, 40, 132, 0.85) 0%,
            rgba(14, 40, 132, 0.4) 60%,
            rgba(14, 40, 132, 0) 100%);
    -webkit-mask-image: linear-gradient(to top, black 25%, transparent 100%);
    mask-image: linear-gradient(to top, black 25%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

/* 5. キャプション（常時表示） */
.newitem-col3_ver figcaption.wp-element-caption {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 2rem 1.5rem !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    line-height: 1.3 !important;
    z-index: 3;
    pointer-events: none;
    transition: padding-bottom 0.4s ease !important;
}

/* ホバーで文字を少しせり上げる */
.newitem-col3_ver .wp-block-column:hover figcaption {
    padding-bottom: 2.8rem !important;
}

.newitem-col3_ver .wp-block-column:hover {
    box-shadow: 0 15px 40px rgba(14, 40, 132, 0.2) !important;
}

/* ============================================================
   RESPONSIVE: レスポンシブ調整
   ============================================================ */

/* 1000px以下：2列 */
@media only screen and (max-width : 1000px) {
    .newitem-col3_ver {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }
}

/* 782px以下：1列（スマホ特化） */
@media only screen and (max-width : 782px) {
    .newitem-col3_ver {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }

    .newitem-col3_ver .wp-block-column {
        aspect-ratio: 4 / 3 !important;
        /* スマホでも4:3を維持 */
    }
}

/*//////////////////////////////////////////////////////////
/// Complianz
/////////////////////////////////////////////////////////*/

.cmplz-manage-consent {
    font-size: 1.5rem !important;
}

/* ============================================================
   商品詳細ページ最終調整
   ============================================================ */

.ProductH1_title {
    margin-bottom: 2rem !important;
}

.postProducts p.productsListName a,
.col-4_optionParts a.internal_link {
    font-size: 1.7rem !important;
    line-height: 1.6 !important;
    font-weight: 700 !important;
    color: #333 !important;
}

.productSlider h2,
.productPicture h2 {
    font-size: 2.6rem !important;
}

.articleContents h4.wp-block-heading {
    line-height: 1.4;
}

/* 咬合器セクションの着地位置をヘッダー分下げる */
[id="Articulator"] {
    scroll-margin-top: 200px !important;
    /* ヘッダーの高さに合わせて微調整 */
}

.productAttentionBloc {
    background-color: #f0f4f9;
    border-radius: 0.4rem;
    padding: 1.5rem 2.0rem;
    font-size: 1.4rem;
    color: #444;
    margin-top: 2.0rem;
    line-height: 1.7;
}

.productPicture em,
.productSlider em,
.productTable td em{
    font-size: 1.5rem;
}


.articleContents ul.wp-block-list > li:last-child {
    margin-bottom: 0;
}

.productTable:has(+ .productAttentionBloc) {
    margin-bottom: 0 !important;
}

@media screen and (max-width: 782px) {
    .custom-tabsColor :where(.wp-block-columns.is-layout-flex) {
        row-gap: 0 !important;
    }
}

@media screen and (min-width: 783px) {
    .col2-3PicTxtBloc .wp-block-group__inner-container .wp-block-columns:first-child h4 {
        margin-top: 0 !important;
    }

    .col2-3PicTxtBloc .wp-block-group__inner-container .wp-block-columns:first-child p:last-child {
        margin-bottom: 1rem !important;
    }
}

.linkBtn_100 .wp-block-button__link {
    width: 100% !important;
}

@media (max-width: 782px) {
   .linkBtn_100 .wp-block-button__link {
        width: 100% !important;
    }
}

.col-2_bigPicBloc_link a{
    display: block;
}

/* ============================================================
    Option Parts: 4列グリッド完全制御（Grid採用版）
   ============================================================ */

/* 1. 親コンテナ：Gridで4列を定義 */
.col-4_optionParts .wp-block-group__inner-container {
    display: grid !important;
    /* 4列を均等に配置  */
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    /* 縦横の間隔を指定 */
    gap: 5rem 3.0rem !important;

    /* 既存のFlexbox設定を完全に無効化 */
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    width: 100% !important;
    max-width: 1300px !important;
    /* サイト全体の幅に合わせて調整 */
    margin: 0 auto !important;
}

/* 2. 子要素（各カード）：幅指定を解除してGridに任せる */
.col-4_optionParts .blogIncWrap {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;

    /* 縦に並べて、高さを揃えるための設定 */
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* 3. 商品名：底を揃える */
.col-4_optionParts a.internal_link {
    display: block !important;

    /* 長文タイトルもすべて表示 */
    word-break: break-word !important;
    overflow: visible !important;

    /* これでカード内の余白を埋めて、全体の高さを揃える */
    flex-grow: 1 !important;
}

/* ============================================================
    RESPONSIVE: 4列 → 3列 → 2列 → 1列 の精密遷移
   ============================================================ */

/* [2] iPad横 / 小さめPC（1000px以下）：3列  */
@media only screen and (max-width : 1000px) {
    .col-4_optionParts .wp-block-group__inner-container {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4rem 2rem !important;
    }
}

/* [3] iPad縦 / タブレット（782px以下）：2列 */
@media only screen and (max-width : 782px) {
    .col-4_optionParts .wp-block-group__inner-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 4rem 2.0rem !important;
    }
}

/*//////////////////////////////////////////////////////////
/// archive_itemlist : Grid Modernized Version
/////////////////////////////////////////////////////////*/

/* 1. 親コンテナ：Gridで4列を定義 */
.postProducts {
    display: grid !important;
    /* 4列を均等に配置  */
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    /* 縦横の間隔を指定（お好みで調整） */
    gap: 5rem 3.0rem !important;

    /* 既存のFlexbox設定を完全に無効化 */
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    width: 100% !important;
    max-width: 1300px !important;
    /* サイト全体の幅に合わせて調整 */
    margin: 0 auto !important;
}

.postProducts .archiveContents img {
    /* 1. 横幅は親の箱（Gridの1カラム）目いっぱい */
    width: 100% !important;

    /* 2. 【最重要】高さを指定せず、アスペクト比を1:1（正方形）に固定 */
    height: auto !important;
    /* 既存の 30rem を解除 */
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}

/* ============================================================
    2. タブレット（1000px以下）：3列
   ============================================================ */
@media screen and (max-width: 1000px) {
    .postProducts {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4rem 2rem !important;
    }
}

/* ============================================================
    3. スマホ（782px以下）：2列
   ============================================================ */
@media screen and (max-width: 782px) {
    .postProducts {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 4rem 2rem !important;
    }
}

/* --- YouTube埋め込みエリア全体 --- */
.col2-YoutubeBloc figure.wp-block-embed-youtube {

    /* 1. カテゴリーバナーと合わせた12px */
    border-radius: 12px !important;

    /* 2. 製品が浮いているような影 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;

    /* 3. 角丸をiframeにも強制適用 */
    overflow: hidden !important;

    /* 4. 滑らかなアニメーション */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
        box-shadow 0.4s ease !important;

    background-color: #000;
    /* 読み込み前のチラつき防止 */
}

/* --- ホバー時に少し浮き上がる演出 --- */
.col2-YoutubeBloc figure.wp-block-embed-youtube:hover {
    /* ほんの少し浮かせる */
    transform: translateY(-5px) scale(1.01);

    /* 浮いた分、影を深くする */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

/* --- iframe自体の調整 --- */
.col2-YoutubeBloc .wp-block-embed__wrapper iframe {
    border: none !important;
    display: block;
}

/* --- 動画の上に極薄の境界線 --- */
.col2-YoutubeBloc figure.wp-block-embed-youtube::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* 内側にうっすら白い線 */
    pointer-events: none;
    /* クリックを邪魔しない */
    z-index: 2;
}

/* --- スマホ対応：余白の調整 --- */
@media screen and (max-width: 782px) {
    .col2-YoutubeBloc figure.wp-block-embed-youtube {
        border-radius: 8px !important;
        /* スマホでは角丸を少し控えめに */
    }
}

/* ============================================================
    Complianz
   ============================================================ */
.network-container .cmplz-placeholder-parent {
    height: 300px !important;
}

#cmplz-document a:focus{
    border: none;
    padding: 0;
}

@media only screen and (max-width: 782px) {
        #cmplz-cookies-overview .cmplz-dropdown summary h3{
            padding: 0;
            font-size: 1.7rem;
        }

        #cmplz-document .cmplz-dropdown summary div:after{
                margin-left: -7px;
        }
    }
/* ============================================================
    Top Header調整
   ============================================================ */
/* 対象の3項目（193, 198, 201）のホバー時のみ適用 */
.home .nissin-main-nav ul.pc-horizontal > li > a:hover {

    text-shadow:
        0 0 5px rgba(255, 255, 255, 1),
        /* 広範囲のぼんやりした光 */
        0 0 12px rgba(255, 255, 255, 0.7),
        /* 中間の光 */
        0 0 3px rgba(255, 255, 255, 0.5);
    /* 文字のすぐ裏側の微かな光 */
}

.pc-horizontal > li > a {
    font-size: 1.6rem !important;
}

/* ============================================================
    Top調整
   ============================================================ */
.no-posts {
    margin-bottom: 3rem;
}

.topCamp-only-extra li:first-child,
.topCamp-only-extra li:nth-child(2) {
    margin-bottom: 0;
}

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

    .topCamp-only-extra li:first-child,
    .topCamp-only-extra li:nth-child(2) {
        margin-bottom: 2rem;
    }
}