/*
Theme Name: 河淳PBサイト
Theme URL: テーマのサイトのURI
Description: テーマの説明
Author: 作者の名前
Version: テーマのバージョン
Tags: テーマの特徴を表すタグ（カンマ区切り/オプション）
License: テーマのライセンス
License URI: テーマのライセンスのURI
*/
/* この下に通常のcssを書いていく */

/* resset.dev • v5.0.2 */

/* # =================================================================
   # Global selectors
   # ================================================================= */

html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
    word-break: normal;
    -moz-tab-size: 4;
    tab-size: 4;
}

*,
::before,
::after {
    background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
    box-sizing: inherit;
}

::before,
::after {
    text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
    vertical-align: inherit;
}

* {
    padding: 0; /* Reset `padding` and `margin` of all elements */
    margin: 0;
}

/* # =================================================================
   # General elements
   # ================================================================= */

hr {
    overflow: visible; /* Show the overflow in Edge and IE */
    height: 0; /* Add the correct box sizing in Firefox */
    color: inherit; /* Correct border color in Firefox. */
}

details,
main {
    display: block; /* Render the `main` element consistently in IE. */
}

summary {
    display: list-item; /* Add the correct display in all browsers */
}

small {
    font-size: 80%; /* Set font-size to 80% in `small` elements */
}

[hidden] {
    display: none; /* Add the correct display in IE */
}

abbr[title] {
    border-bottom: none; /* Remove the bottom border in Chrome 57 */
    /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
    text-decoration: underline;
    text-decoration: underline dotted;
}

a {
    background-color: transparent; /* Remove the gray background on active links in IE 10 */
}

a:active,
a:hover {
    outline-width: 0; /* Remove the outline when hovering in all browsers */
}

code,
kbd,
pre,
samp {
    font-family:
        monospace, monospace; /* Specify the font family of code elements */
}

pre {
    font-size: 1em; /* Correct the odd `em` font sizing in all browsers */
}

b,
strong {
    font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */
}

/* https://gist.github.com/unruthless/413930 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

table {
    border-color: inherit; /* Correct border color in all Chrome, Edge, and Safari. */
    text-indent: 0; /* Remove text indentation in Chrome, Edge, and Safari */
}

iframe {
    border-style: none;
}

/* # =================================================================
   # Forms
   # ================================================================= */

input {
    border-radius: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */
}

[type="search"] {
    -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
    outline-offset: -2px; /* Correct the outline style in Safari */
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS */
}

textarea {
    overflow: auto; /* Internet Explorer 11+ */
    resize: vertical; /* Specify textarea resizability */
}

button,
input,
optgroup,
select,
textarea {
    font: inherit; /* Specify font inheritance of form elements */
}

optgroup {
    font-weight: bold; /* Restore the font weight unset by the previous rule */
}

button {
    overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
}

button,
select {
    text-transform: none; /* Firefox 40+, Internet Explorer 11- */
}

/* Apply cursor pointer to button elements */
button,
[type="button"],
[type="reset"],
[type="submit"],
[role="button"] {
    cursor: pointer;
}

/* Remove inner padding and border in Firefox 4+ */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/* Replace focus style removed in the border reset above */
button:-moz-focusring,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    outline: 1px dotted ButtonText;
}

button,
html [type='button'], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
[type='reset'],
[type='submit'] {
    -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
}

/* Remove the default button styling in all browsers */
button,
input,
select,
textarea {
    background-color: transparent;
    border-style: none;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline-width: 0;
}

/* Style select like a standard input */
select {
    -moz-appearance: none; /* Firefox 36+ */
    -webkit-appearance: none; /* Chrome 41+ */
}

select::-ms-expand {
    display: none; /* Internet Explorer 11+ */
}

select::-ms-value {
    color: currentColor; /* Internet Explorer 11+ */
}

legend {
    border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
    color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
    display: table; /* Correct the text wrapping in Edge and IE */
    max-width: 100%; /* Correct the text wrapping in Edge and IE */
    white-space: normal; /* Correct the text wrapping in Edge and IE */
    max-width: 100%; /* Correct the text wrapping in Edge 18- and IE */
}

::-webkit-file-upload-button {
    /* Correct the inability to style clickable types in iOS and Safari */
    -webkit-appearance: button;
    color: inherit;
    font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
}

/* Replace pointer cursor in disabled elements */
[disabled] {
    cursor: default;
}

/* # =================================================================
   # Specify media element style
   # ================================================================= */

img {
    border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
}

/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
    vertical-align: baseline;
}

/* # =================================================================
   # Accessibility
   # ================================================================= */

/* Specify the progress cursor of updating elements */
[aria-busy="true"] {
    cursor: progress;
}

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
    cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled="true"] {
    cursor: default;
}

/* カタログ請求フォーム関連 */

.wpcf7 {
    width: 100%;
    padding: 0 50px;
}
.wpcf7-form {
    max-width: 1446px;
    margin: 0 auto;
    .catalog-form-heading-bg {
        position: fixed;
        z-index: 1;
        top: 0;
        width: 100%;
        left: 0;
        height: 201px; /* catalog-form-headingから実測 */
        background-color: #fff;
        margin: 0;
    }
    .catalog-form-heading {
        position: fixed;
        z-index: 2;
        top: 0;
        width: 100%;
        /* スぺ統=60px,ヘッダー=100px, ロゴ画像=26px */
        padding-top: calc(100px + 60px - (100px - 26px) / 2);
        padding-bottom: 60px;
        background-color: #fff;
        max-width: 1446px;
        line-height: 1;
        margin: 0 auto;
        font-size: 18px;
        font-weight: bold;
        .logo {
            font-size: 60px;
            font-weight: bold;
            color: #666;
        }
    }
    .catalog-form-position-reset {
        /* catalog-form-heading - header */
        height: calc(201px - 100px);
    }
    .contact-form-heading-bg {
        position: fixed;
        z-index: 1;
        top: 0;
        width: 100%;
        left: 0;
        height: 261px; /* contact-form-headingから実測 */
        background-color: #fff;
        margin: 0;
    }
    .contact-form-heading {
        position: fixed;
        z-index: 2;
        top: 0;
        width: 100%;
        /* スぺ統=60px,ヘッダー=100px, ロゴ画像=26px */
        padding-top: calc(100px + 60px - (100px - 26px) / 2);
        padding-bottom: 60px;
        background-color: #fff;
        max-width: 1446px;
        line-height: 1;
        margin: 0 auto;
        font-size: 18px;
        font-weight: bold;
        .logo {
            font-size: 60px;
            font-weight: bold;
            color: #666;
        }
        .subheading {
            font-weight: normal;
        }
    }
    .contact-form-position-reset {
        /* contact-form-heading - header */
        height: calc(261px - 100px);
    }
    .required-form {
        display: inline-block;
        color: #fff;
        font-weight: bold;
        background-color: #dc3545;
        border: 1px solid #dc3545;
        border-radius: 4px;
        font-size: 14px;
        padding: 0 3px;
        margin-left: 6px;
        height: 22px;
        min-width: 38px;
    }
    #submit-button,
    #submit-spinner {
        input {
            padding: 2px 100px;
            color: #fff;
            background-color: #888;
            border: 1px solid #888;
            border-radius: 2px;
            font-weight: bold;
        }
        p {
            display: flex;
            width: 100%;
            min-width: 100%;
            flex-direction: row;
            justify-content: center;
            input {
                padding: 2px 100px;
                color: #fff;
                background-color: #888;
                border: 1px solid #888;
                border-radius: 2px;
                font-weight: bold;
            }
        }
    }
    #submit-spinner {
        position: relative;
        height: 0px;
        p {
            height: 24px;
        }
    }
    .wpcf7-response-output {
        color: #856404;
        background-color: #fff3cd;
        border-color: #ffeeba !important;
        text-align: center;
        margin: 0 50px 60px 50px;
        padding: 2px;
    }
    .cmn-mt {
        margin-top: 60px;
    }
    .cmn-mb {
        margin-bottom: 60px;
    }
    .cmn-pt {
        padding-top: 60px;
    }
    .cmn-pb {
        padding-bottom: 60px;
    }
}

.form-row {
    display: flex;
    flex-direction: row;
    @media (max-width: 768px) {
        flex-direction: column;
        margin-bottom: 15px;
    }
    justify-content: space-between;
    width: 100%;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px #ddd solid;
    p {
        display: inline-block !important;
    }
    .form-label {
        max-width: 33%;
        min-width: 33%;
        @media (max-width: 768px) {
            max-width: 100%;
            min-width: 100%;
            margin-bottom: 15px;
        }
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }
    .form-full {
        display: inline-block;
        max-width: 66%;
        min-width: 66%;
        @media (max-width: 768px) {
            max-width: 100%;
            min-width: 100%;
        }
        color: #777;
        p {
            display: inline-block;
            width: 100%;
        }
    }
    .form-half2 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        max-width: 66%;
        min-width: 66%;
        @media (max-width: 768px) {
            flex-direction: column;
            max-width: 100%;
            min-width: 100%;
        }
        color: #777;
        .form-half {
            max-width: 49%;
            min-width: 49%;
            display: inline-block;
            @media (max-width: 768px) {
                max-width: 100%;
                min-width: 100%;
                &.first {
                    margin-bottom: 15px;
                }
            }
            p {
                width: 100%;
            }
        }
    }
    input {
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 8px;
        width: 100%;
    }
    select {
        border: 1px solid #ccc;
        /* padding: 1px 5px 1px 10px; */
        background-color: #f8f8f8;
        font-size: medium;
    }
    textarea {
        border: 1px solid #ccc;
        padding: 1px 5px 1px 10px;
        background-color: #f8f8f8;
        width: 99% !important;
        height: 5rem !important;
    }
    .text-gray {
        input {
            color: #777;
            font-size: medium;
        }
    }
    .compact-label {
        color: #111;
        span {
            display: inline;
            margin-left: 0;
            margin-right: 12px;
            input {
                display: inline-block;
                width: auto;
            }
            span {
                display: inline;
            }
        }
        .wpcf7-list-item:not(:first-child) {
            @media (max-width: 768px) {
                margin-top: 18px;
            }
        }
        input {
            display: inline;
        }
        @media (max-width: 768px) {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin: 10px;
        }
    }
    /*.multicheckbox {
        display: flex;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-bottom: 10px;
        color: #111 !important;
        span {
            display: block;
            min-width: 50px;
            margin: 0 10px 0 0 !important;
            input {
                border: 1px solid #ccc;
                display: inline-block;
                width: auto !important;
                margin-right: 4px;
            }
            span {
                display: inline-block;
            }
        }
        label {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
            input {
                margin-right: 5px;
            }
        }
        .wpcf7-list-item {
            @media (max-width: 768px) {
                margin-top: 18px;
            }
        }
        @media (max-width: 768px) {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin: 10px;
        }
    }*/
    .multicheckbox {
        line-height: 2;
    }
    .note-about-multi-choice, .note-about-pp {
        margin-top: 5px;
    }
    .em {
        color: #111;
    }
    .with-underline {
        text-decoration: underline;
    }
}

.toggle-display {
    p {
        display: flex !important;
        flex-direction: column;
        justify-content: flex-end;
        width: 100%;
    }
    #toggle {
        display: none;
    }
    #details {
        display: none;
        padding: 5px 5px;
        border: 1px solid #ccc;
        margin-top: 0;
        margin-bottom: 10px;
        background: #f8f8f8;
        color: #333;
    }
    #toggle:checked + label + #details {
        display: block;
    }
    label {
        text-decoration: none;
        svg {
            position: relative;
            top: 3px;
        }
        &.toggle-button {
            @media (max-width: 768px) {
                font-size: 90%;
            }
            @media (min-width: 769px) {
                position: relative;
                top: -24px;
            }
            width: 100%;
            text-align: right;
        }
    }
}

/* カタログ請求フォーム関連 */

/* 問い合わせフォーム関連 */

/* 問い合わせフォーム関連 */

/* ページレイアウト(共通) */

.site-main {
    max-width: 1446px;
    padding: 0px 50px;
    margin: 0 auto;
}

/* ヘッダーレイアウト */

/* =========================
   HEADER BASE
========================= */
:root {
    --pfi-header-height: 64px;
}

.pfi-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    width: 100%;
    font-family: "Noto Sans JP", sans-serif;
    /* overflow: hidden; */
    height: var(--pfi-header-height);
    padding: 0px 50px;
}

.pfi-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1446px;
    margin: 0 auto;
    height: 100%;
    padding: 0;
}

/* ロゴ */
.pfi-header__logo img {
    /* display: block; */
    /* height: 26px; */
    width: 280px;
    /* min-width: 280px; */
}

/* =========================
   グローバルナビ（English 含む）
========================= */
.pfi-header__nav {
    flex: 1;
    margin: 0 40px;
    /* overflow: hidden; */
    transform: translateY(0);
    transition: transform 0.18s ease-out;
}

.pfi-header__nav-list {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 通常のナビリンク */
.pfi-header__nav-list li a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Support+ の + 記号用 */
.pfi-header__plus {
    position: relative;
    top: -2px;
    left: 2px;
}

.pfi-header__english {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.pfi-header__ext-icon {
    flex: 0 0 auto;
    display: block;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    margin-top: 5px;
}

.pfi-header__nav-list li a:hover,
.pfi-header__english:hover {
    opacity: 0.6;
    text-decoration: underline;
}

/* =========================
   Support のサブメニュー
========================= */

/* Support 親 li をサブメニューの基準位置にする */
.pfi-header__nav-item--support {
    position: relative;
}

/* サブメニュースタイル（初期は非表示） */
.pfi-header__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    list-style: none;
    margin: 0;

    border-radius: 0;

    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition:
        opacity 0.18s ease-out,
        transform 0.18s ease-out;
}

.pfi-header__submenu-inner {
    width: max-content;
    background: rgba(0, 0, 0, 0.6);
    padding-left: 0px;
    padding-right: 10px;
    padding-bottom: 10px;
}

/* 各サブメニュー項目 */
.pfi-header__submenu > li {
    margin-bottom: 20px;
}

.pfi-header__submenu > li:last-child {
    margin-bottom: 0;
}

.pfi-header__submenu > li > a {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.06em;
}

/* ホバーで半調 */
.pfi-header__submenu > li > a:hover {
    opacity: 0.5;
}

/* Support にホバーしたときにサブメニューを表示 */
.pfi-header__nav-item--support:hover .pfi-header__submenu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* =========================
   右側（Menu ボタンのみ）
========================= */
.pfi-header__right {
    display: flex;
    align-items: center;
    margin-left: 24px;
}

.pfi-header__menu-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    border: none;
    color: #111;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
}

.pfi-header__menu-icon {
    width: 18px;
    height: 2px;
    background: currentColor;
    box-shadow:
        0 6px 0 currentColor,
        0 -6px 0 currentColor;
    margin-bottom: 10px;
}

.pfi-header__menu-label {
    font-size: 11px;
    color: #111;
}

/* =========================
   スクロールでナビ + English を上に隠す
========================= */
.pfi-header.is-scrolled .pfi-header__nav {
    transform: translateY(-300%);
    pointer-events: none;
}

/* 初期状態だけトランジションを無効化するためのクラス */
.pfi-header--no-transition .pfi-header__nav {
    transition: none !important;
}

/* =================================
   オーバーレイメニュー
================================= */

/* 枠：ヘッダー下から画面下まで。これは動かさない */
.pfi-menu-overlay {
    position: fixed;
    height: min(600px, calc(100vh - var(--pfi-header-height)));
    top: var(--pfi-header-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    pointer-events: none;
    overflow: hidden;
    visibility: hidden;
}

/* 上下に動く黒いパネル */
.pfi-menu-overlay__panel {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;

    transform: translateY(-100%);
    opacity: 1;
    transition: transform 0.35s ease;

    display: flex;
    overflow-y: auto;
}

/* 開いた状態 */
.pfi-menu-overlay.is-open {
    pointer-events: auto;
    visibility: visible;
}

.pfi-menu-overlay.is-open .pfi-menu-overlay__panel {
    transform: translateY(0);
}

/* 内側コンテンツ（右側に寄せる） */
/* .pfi-menu-overlay__inner {
  max-width: 1446px;
  margin: 0 auto;
  padding: 40px 40px 40px;
  display: flex;
  justify-content: flex-end;
  position: relative;
} */
/* ================================
   Overlay Inner Layout（PC用）
================================ */

.pfi-menu-overlay__inner {
    max-width: 1446px;
    margin: 0 auto;
    /* padding: 40px 24px 40px; */
    padding: 0px 24px 40px;
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    height: 100%;
}

/* 左コラム（English website） */
.pfi-left-overlay__column {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

/* 右コラム（メニュー） */
.pfi-right-overlay__column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
}

/* English website のスタイル */
.pfi-menu-overlay__english {
    margin-top: auto;
    display: flex;
    align-items: center;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
}

.pfi-menu-overlay__english svg {
    margin-left: 6px;
}

/* 右側のカラム（メイン + Support ブロック） */
.pfi-menu-overlay__column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 共通：リストのリセット */
.pfi-menu-overlay__list {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-right: 133px;
}

/* メインメニュー（Service〜Catalog） */
.pfi-menu-overlay__list--main > li {
    margin-bottom: 10px;
}

.pfi-menu-overlay__list--main > li > a {
    display: inline-block;
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* Support ブロック（ラベル＋線＋サブメニューを横並び） */
.pfi-menu-overlay__support-row {
    display: flex;
    align-items: flex-start;
    margin-top: 0px;
}

.pfi-menu-overlay__support-row + .pfi-menu-overlay__support-row {
    margin-top: 8px;
    position: relative;
    right: 33px;
}

/* Support ラベル（左側・小さめ） */
.pfi-menu-overlay__support-label {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin-right: 24px;
    padding-top: 6px; /* Contact の行と縦位置を合わせるための微調整 */
}

/* 縦の仕切り線 */
.pfi-menu-overlay__support-divider {
    width: 1px;
    height: auto;
    align-self: stretch;
    min-height: 78px;
    background: #fff !important;
    margin-right: 24px;
}

.pfi-menu-overlay__support-heading {
    display: none;
}

/* Support のサブメニュー側（Contact / FAQ / Showroom & Office） */
.pfi-menu-overlay__support-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pfi-menu-overlay__support-list > li {
    margin-bottom: 10px;
}

.pfi-menu-overlay__support-list > li > a {
    display: inline-block;
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* オーバーレイ左下の English website リンク */
.pfi-menu-overlay__english {
    /* position: absolute; */
    position: static;
    bottom: 32px;
    left: 0px;
    display: inline-flex;
    align-items: center;

    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fff;
    text-decoration: none;
}

/* アイコン */
.pfi-menu-overlay__ext-icon {
    flex: 0 0 auto;
    display: block;
    width: 20px;
    height: 20px;
    margin-left: 8px;
}

/* ホバー時の半調（他メニューと統一） */
.pfi-menu-overlay__english:hover {
    opacity: 0.6;
}

/* ホバーで半調（オーバーレイ内） */
.pfi-menu-overlay__list--main > li > a:hover,
.pfi-menu-overlay__support-list > li > a:hover {
    opacity: 0.6;
}

/* 閉じるボタン（※今は使わない想定だが残しておく） */
.pfi-menu-overlay__close {
    position: absolute;
    top: 18px;
    right: 24px;
    border: none;
    background: none;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

/* スクロールでナビ + English を上に隠す */
.pfi-header.is-scrolled .pfi-header__nav {
    transform: translateY(-300%);
    pointer-events: none;
}

/* ★ Menu オーバーレイ表示中は、スクロール位置に関係なくナビを隠す */
.pfi-header.is-menu-open .pfi-header__nav {
    transform: translateY(-300%);
    pointer-events: none;
}

/* オーバーレイ表示中：ヘッダー背景を不透明に */
.pfi-header.is-menu-open {
    background: #000 !important;
}

/* オーバーレイ表示中：パネル背景も不透明に */
.pfi-header.is-menu-open ~ .pfi-menu-overlay .pfi-menu-overlay__panel {
    background: #000 !important;
}

/* =========================
   Menuボタン → 横長の「×」
========================= */

/* メニューオープン時：ハンバーガー非表示 */
.pfi-header.is-menu-open .pfi-header__menu-icon {
    display: none;
}

/* メニューオープン時：Menuテキスト非表示 */
.pfi-header.is-menu-open .pfi-header__menu-label {
    display: none;
}

/* オープン時は丸背景も消す */
.pfi-header.is-menu-open .pfi-header__menu-btn {
    background: none;
    border: none;
    box-shadow: none;
}

/* 擬似要素で横長の×を描画 */
.pfi-header__menu-btn {
    position: relative;
}

.pfi-header.is-menu-open .pfi-header__menu-btn::before,
.pfi-header.is-menu-open .pfi-header__menu-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 2px;
    background: #fff;
    transform-origin: center;
}

/* 1本目（右上 → 左下） */
.pfi-header.is-menu-open .pfi-header__menu-btn::before {
    transform: translate(-50%, -50%) rotate(25deg);
}

/* 2本目（左上 → 右下） */
.pfi-header.is-menu-open .pfi-header__menu-btn::after {
    transform: translate(-50%, -50%) rotate(-25deg);
}

/* ヘッダーレイアウト */

/* フッターレイアウト */
.pfi-footer__logo {
    margin-bottom: 3rem;
}

.pfi-footer__logo img {
    width: 230px;
}

.pfi-footer {
    background: #fff;
    color: #000;
    font-family:
        "Noto Sans JP",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
    font-size: 13px;
}

.pfi-footer a {
    color: inherit;
    text-decoration: none;
}

.pfi-footer a:hover {
    text-decoration: underline;
}

.pfi-footer__menu {
    font-size: 17px;
    font-weight: 600;
}

.pfi-footer__inner {
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 40px 24px 24px;
}

/* ===== 上段レイアウト ===== */
.pfi-footer__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

/* 左側：ロゴ＋4カラム */
.pfi-footer__left {
    /* display: flex; */
    gap: 40px;
    flex: 1 1 auto;
}

/* ロゴ部分 */
.pfi-footer__brand {
    margin-right: 32px;
}

.pfi-footer__logo {
    width: 230px;
}

.pfi-footer__tagline {
    font-size: 12px;
    margin-top: 4px;
}

/* 4カラムナビ */
.pfi-footer__nav {
    display: flex;
    gap: 70px;
}

.pfi-footer__nav-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pfi-footer__nav-col ul li + li {
    margin-top: 8px;
}

/* Support / Related 見出し */
.pfi-footer__heading {
    font-weight: 600;
    margin: 0 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #999;
}

/* メインとサブのテキスト */
.pfi-footer__link-main {
    font-size: 17px;
    font-weight: 600;
}

.pfi-footer__link-main--underline {
    text-decoration: underline;
}

.pfi-footer__nav-col--related ul li a {
    display: inline-flex;
    align-items: flex-end;
    white-space: nowrap;
}

.pfi-related-link {
    display: inline-flex;
    align-items: flex-end;
    white-space: nowrap;
    position: relative;
}

/* 各要素の余白を詰める */
.pfi-footer__link-sub,
.pfi-footer__link-main,
.pfi-footer__icon {
    display: inline-flex;
    align-items: flex-end;
    line-height: 1;
}

.pfi-related-link::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    background-image: url("/wp-content/themes/kawajiun-pfi/assets/img/square-double.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    align-self: flex-end;
}

.pfi-footer__link-main img.external-service-inline {
    display: block;
    height: auto;
}

.pfi-footer__link-sub {
    font-size: 12px;
    margin-right: 1rem;
}

.pfi-footer__link-sub-2 {
    font-size: 13px;
    margin-right: 1rem;
    line-height: 12px;
}

.letter-sp-2 {
    letter-spacing: 0.2rem;
}

.pfi-footer__icon {
    font-size: 11px;
    margin-left: 4px;
}

/* 右側：SDGs ＋ SNS */
.pfi-footer__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    flex: 0 0 auto;
}

.pfi-footer__sdgs {
    font-size: 11px;
    text-align: right;
}

.pfi-footer__sns {
    list-style: none;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.pfi-footer__sns a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid #000;
    font-size: 11px;
}

/* ===== 下段：法務リンク＋コピーライト ===== */
.pfi-footer__bottom {
    margin-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 12px;
}

.pfi-footer__legal {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
    padding: 0;
}

.pfi-footer__legal li::after {
    /* content: "｜"; */
    margin-left: 6px;
}

.pfi-footer__legal li:last-child::after {
    content: "";
    margin: 0;
}

.pfi-footer__copy {
    white-space: nowrap;
}

/* ===== SPレイアウト ===== */
@media (max-width: 767px) {
    .pfi-footer__inner {
        padding: 32px 16px 20px;
    }

    .pfi-footer__top {
        flex-direction: column;
        gap: 24px;
    }

    .pfi-footer__left {
        flex-direction: column;
    }

    .pfi-footer__nav {
        flex-wrap: wrap;
        gap: 24px;
    }

    .pfi-footer__right {
        align-items: flex-start;
    }

    .pfi-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .pfi-footer__copy {
        white-space: normal;
    }
}

.pfi-footer__link-main {
    filter: invert(1);
}

/* フッターレイアウト */

/* レスポンシブ対応 */
.pc-only {
    display: inherit;
}
.sp-only {
    display: none;
}

/* 1024px 以下（タブレット縦・小さめノートPC） */
@media screen and (max-width: 1170px) {
    .pc-only {
        display: none;
    }

    .sp-only {
        display: block;
    }

    .pfi-header__nav {
        display: none;
    }

    /* オーバーレイ全体：ヘッダー下から下端まで */
    .pfi-menu-overlay__panel {
        overflow-y: scroll;
    }

    .pfi-right-overlay__column {
        align-items: flex-start;
        gap: 32px;
    }

    .pfi-menu-overlay {
        top: var(--pfi-header-height);
        height: 100%;
    }

    /* 中身は左寄せ・1カラム */
    .pfi-menu-overlay__inner {
        max-width: none;
        padding: 0px 24px;
        display: block;
    }

    /* 上側のメインメニュー（Service〜Catalog） */
    .pfi-menu-overlay__block--main {
        margin: 0 0 40px;
    }

    .pfi-menu-overlay__list {
        margin: 0;
        padding: 0;
    }

    .pfi-menu-overlay__list > li {
        margin-bottom: 18px;
    }

    .pfi-menu-overlay__list > li > a {
        font-size: 24px;
        line-height: 1.3;
    }

    /* 下側の Support ブロック（左にラベル＋縦線、右に Contact / FAQ / Showroom…） */
    .pfi-menu-overlay__block--support {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 32px;
        align-items: flex-start;
    }

    .pfi-menu-overlay__support-label {
        margin: 0;
        font-size: 12px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        align-self: flex-start;
    }

    .pfi-menu-overlay__support-row {
        display: none;
        margin-top: 0;
    }

    .pfi-menu-overlay__support-row + .pfi-menu-overlay__support-row {
        margin-top: 32px;
        position: static;
        right: auto;
    }

    .pfi-menu-overlay__support-heading {
        display: block;
        margin: 0 0 14px;
        font-size: 12px;
        font-weight: 800;
        color: #fff;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .pfi-menu-overlay__support-list {
        list-style: none;
        margin: 0;
        padding-left: 0px;
        border-left: none;
    }

    .pfi-menu-overlay__support-list > li {
        margin-bottom: 16px;
    }

    .pfi-menu-overlay__support-list > li > a {
        display: inline-block;
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 0.06em;
    }

    /* English website を左下に固定 */
    .pfi-menu-overlay__english {
        position: absolute;
        left: 28px;
        bottom: 32px;
        font-size: 16px;
    }

    .pfi-menu-overlay__english-icon {
        width: 18px;
        height: 18px;
        margin-left: 6px;
    }

    .pfi-menu-overlay__english {
        position: static;
        margin-top: 30px;
    }
}

/* 768px 以下（スマホ〜小さめタブレット） */
@media screen and (max-width: 768px) {
    .pc-only {
        display: none;
    }

    .sp-only {
        display: block;
    }

    .pfi-header__nav {
        display: none;
    }
}

/* 480px 以下（小さいスマホ） */
@media screen and (max-width: 480px) {
    .pc-only {
        display: none;
    }

    .sp-only {
        display: block;
    }

    .pfi-header__nav {
        display: none;
    }
}

/* レスポンシブ対応 */