body, html {
            margin: 0;
            padding: 0;
            overflow-x: clip; 
            background-color: #ffffff;
            color: #06132d;
        }

        html.lenis {
          height: auto;
        }
        .lenis.lenis-smooth {
          scroll-behavior: auto !important;
        }
        .lenis.lenis-smooth [data-lenis-prevent] {
          overscroll-behavior: contain;
        }
        .lenis.lenis-stopped {
          overflow: hidden;
        }
        .lenis.lenis-scrolling iframe {
          pointer-events: none;
        }

        #canvas-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 0;
            pointer-events: none;
        }

        #interaction-layer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 10;
        }

        .content-wrapper {
            position: relative;
            z-index: 20;
            pointer-events: none;
        }
        
        .content-wrapper > * {
            pointer-events: auto;
        }

        .fade-in-section {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: opacity, transform;
        }

        .fade-in-section.is-visible {
            opacity: 1;
            transform: none;
        }
        /* サイトマップのカードはTailwindのhover:-translate-y-1で表示済み後も
           ホバー時に少し浮かせたいが、上のtransform:noneと詳細度が同じで
           負けてしまうため専用ルールで上書きする。fade-in-sectionは他の
           多数の要素（ページネーション等）でも使う共通クラスのため、
           サイトマップのカード（.group付き）だけに絞る。 */
        .fade-in-section.group.is-visible:hover {
            transform: translateY(-0.25rem);
        }

        /* テキストマーカー：左から右へ背景色が伸びるハイライト演出。
           テキスト自体は最初から表示し、背景だけをJSトリガーで伸ばす
           （background-sizeを0%→100%に遷移させ、no-repeatで左端起点にする）。 */
        .text-marker {
            background-image: linear-gradient(#0055ff, #0055ff);
            background-repeat: no-repeat;
            background-position: left center;
            background-size: 0% 100%;
            transition: background-size 0.8s ease;
        }
        .text-marker.is-marked {
            background-size: 100% 100%;
        }

        /* お問い合わせフォーム（Contact Form 7）内のプライバシーポリシー同意リンク。
           CF7のフォーム内容はDB保存でTailwindのビルド対象外のため、
           ここでのみ使うスタイルは素のCSSとして直接書く。 */
        .exceed-privacy-agree a {
            text-decoration: underline;
        }
        .exceed-privacy-agree a:hover {
            color: #00d2ff;
        }

        /* 制作実績一覧のスマホ用絞り込みプルダウン（archive-works.php）。
           検索欄と同じ見た目（半透明の角丸枠）にそろえる。文字サイズを16pxに
           しているのは、iOSで16px未満の入力欄を選ぶと画面が拡大されるため。 */
        .exceed-filter-select-wrap {
            position: relative;
            display: block;
        }
        .exceed-filter-select-wrap::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 1.25rem;
            width: 0.5rem;
            height: 0.5rem;
            border-right: 1.5px solid #9ca3af;
            border-bottom: 1.5px solid #9ca3af;
            transform: translateY(-70%) rotate(45deg);
            pointer-events: none;
        }
        .exceed-filter-select {
            width: 100%;
            appearance: none;
            -webkit-appearance: none;
            background-color: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 9999px;
            padding: 0.75rem 2.75rem 0.75rem 1.25rem;
            color: #fff;
            font-size: 16px;
            line-height: 1.5;
        }
        .exceed-filter-select:focus {
            outline: none;
            border-color: #0088ff;
            box-shadow: 0 0 0 1px #0088ff;
        }
        /* 選択肢の一覧はOS標準の白背景で出る環境があるため、文字色を濃くしておく */
        .exceed-filter-select option {
            color: #111827;
        }

        /* Initial Load Entry Animations */
        .animate-fade-in-down {
            animation: fadeInDown 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            opacity: 0;
        }
        .animate-fade-in-right {
            animation: fadeInRight 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            opacity: 0;
        }
        .animate-fade-in-left {
            animation: fadeInLeft 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            opacity: 0;
        }

        @keyframes fadeInDown {
            0% { opacity: 0; transform: translateY(-40px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeInRight {
            0% { opacity: 0; transform: translateX(-50px); }
            100% { opacity: 1; transform: translateX(0); }
        }
        @keyframes fadeInLeft {
            0% { opacity: 0; transform: translateX(50px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        /* Custom staggered animations for trigger containers */
        .fade-in-section.trigger-only {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
        }

        .anim-slide-left {
            opacity: 0;
            will-change: opacity, transform;
        }
        .is-visible .anim-slide-left {
            animation: customSlideLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        @keyframes customSlideLeft {
            0% { opacity: 0; transform: translateX(-50px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        .anim-fade-up {
            opacity: 0;
            will-change: opacity, transform;
        }
        .is-visible .anim-fade-up {
            animation: customFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        @keyframes customFadeUp {
            0% { opacity: 0; transform: translateY(50px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        @keyframes customFadeIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }

        .anim-clip-right {
            clip-path: inset(0 100% 0 0);
            will-change: clip-path;
        }
        .is-visible .anim-clip-right {
            animation: customClipRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        @keyframes customClipRight {
            0% { clip-path: inset(0 100% 0 0); }
            100% { clip-path: inset(0 0 0 0); }
        }

        .text-gradient {
            background: linear-gradient(to right, #0055ff, #00d2ff, #0055ff, #00d2ff, #0055ff);
            background-size: 300% 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: border-gradient-anim 8.5s ease-in-out -3s infinite;
        }

        .bg-gradient-anim {
            background: linear-gradient(to right, #0055ff, #00d2ff, #0055ff, #00d2ff, #0055ff);
            background-size: 300% 100%;
            animation: border-gradient-anim 8.5s ease-in-out -3s infinite;
        }

        .nav-text-gradient {
            position: relative;
            display: inline-block;
            color: inherit; /* Fallback */
        }

        .nav-text-gradient::before {
            content: attr(data-text);
            position: absolute;
            left: 0;
            top: 0;
            background-image: linear-gradient(to right, #0055ff, #00d2ff, #0055ff);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            opacity: 0;
            transition: opacity 0.4s ease-out;
            pointer-events: none;
            /* Optional: Add shimmer effect while hovered */
        }

        .group:hover .nav-text-gradient::before {
            opacity: 1;
            animation: nav-gradient-shift 3s linear infinite;
        }

        .nav-link-active {
            background-image: linear-gradient(to right, #0055ff, #00d2ff, #0055ff);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: nav-gradient-shift 3s linear infinite;
            display: inline-block;
        }

        @keyframes nav-gradient-shift {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }

        .vertical-text-gradient {
            background: linear-gradient(to bottom, #0055ff, #00d2ff, #0055ff, #00d2ff, #0055ff);
            background-size: 100% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: vertical-gradient-anim 7.5s ease-in-out -2s infinite;
        }

        #gallery-canvas-container canvas {
            width: 100% !important;
            height: 100% !important;
            display: block;
        }
        
        #cta-canvas-container canvas {
            width: 100% !important;
            height: 100% !important;
            display: block;
        }

        /* Feature Cube Styles */
        .cube {
            width: 224px;
            height: 224px;
            transform-style: preserve-3d;
            will-change: transform;
        }
        .cube-face {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #1e3a8a, #0055ff);
            /* .face-front（ロゴ面）はTailwindのbg-gradient-to-br from-gray-200
               to-whiteで白系にする想定だが、同じ詳細度のこの.cube-face自体の
               背景指定が読み込み順で勝ってしまうため、専用ルールで上書きする。 */
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: none;
            border-radius: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            box-shadow: 0 15px 50px rgba(0,85,255,0.15);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            /* 展開アニメーション用の動的Transform */
            transform: translate(calc((1 - var(--uf, 1)) * var(--ux, 0)), calc((1 - var(--uf, 1)) * var(--uy, 0))) 
                       rotateX(calc(var(--uf, 1) * var(--rotX, 0deg))) 
                        rotateY(calc(var(--uf, 1) * var(--rotY, 0deg))) 
                        translateZ(calc(var(--uf, 1) * 112px));
        }
        .cube-face.face-front {
            background: linear-gradient(135deg, #e5e7eb, #ffffff);
        }

        /* スマートフォン向け 2列x3段のグリッド配置オーバーライド */
        @media (max-width: 767px) {
            .cube-face.face-front  { --ux: -52.5% !important; --uy: -105% !important; }
            .cube-face.face-top    { --ux: 52.5% !important;  --uy: -105% !important; }
            .cube-face.face-left   { --ux: -52.5% !important; --uy: 0% !important; }
            .cube-face.face-right  { --ux: 52.5% !important;  --uy: 0% !important; }
            .cube-face.face-bottom { --ux: -52.5% !important; --uy: 105% !important; }
            .cube-face.face-back   { --ux: 52.5% !important;  --uy: 105% !important; }
        }

        /* タブレット〜小型デスクトップでは、横一列だと両端が画面外へ出るため
           展開完了時のみ3列x2段に配置する。1650px以上はHTMLの既定値（横一列）を使う。 */
        @media (min-width: 768px) and (max-width: 1649px) {
            .cube-face.face-front  { --ux: -105% !important; --uy: -52.5% !important; }
            .cube-face.face-top    { --ux: 0% !important;    --uy: -52.5% !important; }
            .cube-face.face-left   { --ux: 105% !important;  --uy: -52.5% !important; }
            .cube-face.face-right  { --ux: -105% !important; --uy: 52.5% !important; }
            .cube-face.face-bottom { --ux: 0% !important;    --uy: 52.5% !important; }
            .cube-face.face-back   { --ux: 105% !important;  --uy: 52.5% !important; }
        }
        
        .cube-face > * {
            position: relative;
            z-index: 1;
        }
        .cube-face:not(.face-front)::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' /%3E%3C/svg%3E");
            opacity: 0.6;
            mix-blend-mode: overlay;
            pointer-events: none;
            z-index: 0;
            border-radius: inherit;
        }

        .cube-face .panel-desc {
            position: absolute;
            top: calc(100% + 20px);
            left: 0;
            width: 100%;
            color: rgba(255, 255, 255, 0);
            font-size: 1.5rem;
            font-weight: 300;
            line-height: 1.6;
            text-align: center;
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            pointer-events: none;
        }
        .cube.is-unfolded .cube-face:not(.face-front) {
            cursor: pointer;
        }
        .cube.is-unfolded .cube-face:not(.face-front):hover .panel-desc {
            opacity: 1;
            color: rgba(255, 255, 255, 0.9);
            transform: translateY(0);
        }

        /* スマホ向けのパネルクリック時のテキスト表示処理 */
        @media (max-width: 1023px) {
            .cube-face .panel-desc {
                top: 50%;
                left: 50%;
                width: 90%;
                transform: translate(-50%, -40%);
                font-size: 1rem;
                line-height: 1.5;
            }
            /* スマホでホバー効果が無効になるよう上書き */
            .cube.is-unfolded .cube-face:not(.face-front):hover .panel-desc {
                opacity: 0;
                transform: translate(-50%, -40%);
            }
            /* クリックされて .is-clicked が付いた時の表示 */
            .cube.is-unfolded .cube-face:not(.face-front).is-clicked .panel-desc {
                opacity: 1 !important;
                color: #ffffff !important;
                transform: translate(-50%, -50%) !important;
            }
            /* 元のアイコンやタイトルの非表示処理 */
            .cube.is-unfolded .cube-face:not(.face-front).is-clicked > *:not(.panel-desc) {
                opacity: 0;
                pointer-events: none;
            }
            .cube-face > *:not(.panel-desc) {
                transition: opacity 0.3s ease;
            }
        }

        @media (min-width: 768px) {
            .cube {
                width: 340px;
                height: 340px;
            }
            .cube-face {
                transform: translate(calc((1 - var(--uf, 1)) * var(--ux, 0)), calc((1 - var(--uf, 1)) * var(--uy, 0))) 
                           rotateX(calc(var(--uf, 1) * var(--rotX, 0deg))) 
                           rotateY(calc(var(--uf, 1) * var(--rotY, 0deg))) 
                           translateZ(calc(var(--uf, 1) * 170px));
            }
        }

        @keyframes border-gradient-anim {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes vertical-gradient-anim {
            0% { background-position: 50% 0%; }
            50% { background-position: 50% 100%; }
            100% { background-position: 50% 0%; }
        }

        .scroll-bar-gradient {
            /* position:relativeをここで指定すると、使用箇所のTailwindの
               absolute（inset-0で高さいっぱいに広げる想定）と詳細度が同じで
               衝突し、こちらが勝って高さ0pxに潰れてしまうため指定しない
               （position:absoluteはHTML側のabsoluteクラスに任せる）。 */
            background: linear-gradient(180deg, #00d2ff, #0088ff, #00d2ff, #0088ff, #00d2ff, #0088ff, #00d2ff);
            background-size: 100% 300%;
            animation: vertical-gradient-anim 5.5s ease-in-out -1.5s infinite;
            z-index: 1; /* For stacking context of the glow */
        }

        .scroll-bar-gradient::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, #00d2ff, #0088ff, #00d2ff, #0088ff, #00d2ff, #0088ff, #00d2ff);
            background-size: 100% 300%;
            filter: blur(4px);
            opacity: 0.8;
            z-index: -1;
            animation: vertical-gradient-anim 5.5s ease-in-out -1.5s infinite;
        }

        .scroll-black-line {
            animation: scroll-line-drop-smooth 2.5s ease-in-out infinite;
        }

        @keyframes scroll-line-drop-smooth {
            0% { transform: translateY(-100%); }
            60% { transform: translateY(600%); }
            100% { transform: translateY(600%); }
        }

        .btn-gradient-border {
            --btn-bg: #000000;
            --btn-bg-hover: #1f2937;
            position: relative;
            z-index: 1; /* Creates a stacking context */
            background-color: transparent !important; /* Let pseudo-element handle the background */
        }

        /* The solid black background and sharp gradient border */
        .btn-gradient-border::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 9999px;
            border: 1px solid transparent;
            background-image: linear-gradient(var(--btn-bg), var(--btn-bg)), linear-gradient(90deg, #00d2ff, #0088ff, #00d2ff, #0088ff, #00d2ff, #0088ff, #00d2ff);
            background-size: 100% 100%, 300% 100%;
            background-origin: padding-box, border-box;
            background-clip: padding-box, border-box;
            z-index: -1; /* Stays above the blur but behind the text */
            animation: border-gradient-anim 7s ease-in-out -5s infinite;
            transition: all 0.3s ease;
        }

        /* The blurred glowing aura */
        .btn-gradient-border::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 9999px;
            background: linear-gradient(90deg, #00d2ff, #0088ff, #00d2ff, #0088ff, #00d2ff, #0088ff, #00d2ff);
            background-size: 300% 100%;
            filter: blur(5px);
            opacity: 0.4;
            z-index: -2; /* Stays at the very bottom */
            animation: border-gradient-anim 7s ease-in-out -5s infinite;
        }

        /* Hover effect applied to the ::before background */
.btn-gradient-border:hover::before {
            background-image: linear-gradient(var(--btn-bg-hover), var(--btn-bg-hover)), linear-gradient(90deg, #00d2ff, #0088ff, #00d2ff, #0088ff, #00d2ff, #0088ff, #00d2ff);
        }

        /* iPhone SE 等の390px未満では、テンプレート一覧ボタンを1行に維持する。 */
        @media (max-width: 389px) {
            .templates-mobile-btn-link {
                padding-inline: 1rem;
                font-size: 0.875rem;
                letter-spacing: 0.075em;
                white-space: nowrap;
            }

            .templates-mobile-btn-link svg {
                flex: none;
                margin-left: 0.5rem;
            }
        }

        /* Header hide elements on scroll */
        #main-header {
            transition: background-color 0.3s ease, border-color 0.3s ease;
        }
        #main-header > a:first-child,
        #main-header > nav {
            transition: opacity 0.5s ease-out, visibility 0.5s ease-out !important;
        }
        @media (max-width: 1279px) {
            #main-header > a:first-child,
            #main-header > nav {
                transition: opacity 0.2s ease-out, visibility 0.2s ease-out !important;
            }
        }
        #main-header.is-scrolled > a:first-child,
        #main-header.is-scrolled > nav {
            opacity: 0 !important;
            visibility: hidden;
            pointer-events: none !important;
        }
        /* スクロール後はロゴ・navが非表示になっても<header>要素自体の
           透明な当たり判定が残り、その下にあるコンテンツ（Advantageの
           矢印ボタン等）のクリックを奪ってしまうため、ヘッダー全体を
           クリック不可にし、常に必要なCTAボタン＋ハンバーガーメニュー
           （3つ目の直下div）だけクリックを戻す。 */
        #main-header.is-scrolled {
            pointer-events: none;
        }
        #main-header.is-scrolled > div {
            pointer-events: auto;
        }

        /* Line Growth Animations */
        .grow-line-y {
            transform: scaleY(0);
            transform-origin: top;
            will-change: transform;
        }
        .is-visible .grow-line-y {
            animation: growLineY 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        @keyframes growLineY {
            0% { transform: scaleY(0); }
            100% { transform: scaleY(1); }
        }

        .grow-line-x {
            transform: scaleX(0);
            transform-origin: left;
            will-change: transform;
        }
        .is-visible .grow-line-x {
            animation: growLineX 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        @keyframes growLineX {
            0% { transform: scaleX(0); }
            100% { transform: scaleX(1); }
        }

        .delay-fade-in {
            opacity: 0;
            will-change: opacity;
        }
        .is-visible .delay-fade-in {
            animation: customFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
        }

        /* Mobile Hamburger & Menu Animations */
        .hamburger-line {
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: currentColor;
            transition: transform 0.4s ease, opacity 0.4s ease;
            border-radius: 1px;
        }
        .top-line { top: 4px; }
        .middle-line { top: 11px; }
        .bottom-line { top: 18px; }

        #mobile-menu-btn.is-open .top-line {
            transform: translateY(7px) rotate(45deg);
        }
        #mobile-menu-btn.is-open .middle-line {
            opacity: 0;
        }
        #mobile-menu-btn.is-open .bottom-line {
            transform: translateY(-7px) rotate(-45deg);
        }

        #mobile-menu-btn.is-open {
            color: #ffffff !important;
        }

        /* Mobile Hamburger Animations */
        .hamburger-line {
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: currentColor;
            transition: transform 0.4s ease, opacity 0.4s ease;
            border-radius: 1px;
        }
        .top-line { top: 4px; }
        .middle-line { top: 11px; }
        .bottom-line { top: 18px; }

        #mobile-menu-btn.is-open .top-line {
            transform: translateY(7px) rotate(45deg);
        }
        #mobile-menu-btn.is-open .middle-line {
            opacity: 0;
        }
        #mobile-menu-btn.is-open .bottom-line {
            transform: translateY(-7px) rotate(-45deg);
        }

        #mobile-menu-btn.is-open {
            color: #ffffff !important;
        }

        /* 3D Push-back Canvas */
        body {
            background-color: #050a15; /* Deep space color behind canvas */
        }

        /* The elements to be pushed back */
        .content-wrapper {
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease, border-radius 0.8s ease;
            transform-origin: center 30%;
            will-change: transform, opacity, border-radius;
        }

        /* Active Push-back state */
        body.is-pushed > .content-wrapper {
            transform: perspective(1500px) translateZ(-250px) translateY(5vh);
            border-radius: 32px;
            overflow: hidden;
            opacity: 0.4;
            pointer-events: none;
        }

        /* Hide company logo when menu is open */
        body.is-pushed #main-header img {
            opacity: 0;
            pointer-events: none;
        }

        /* Mobile Menu Overlay Fade-in */
        #mobile-menu.is-open {
            opacity: 1;
            pointer-events: auto;
        }

        /* Menu Links Staggered Slide-up */
        #mobile-menu.is-open .mobile-nav-link {
            transform: translateY(0);
            opacity: 1;
        }


/* works.html/template.htmlのSCROLL UI用（元は各ページheadに個別記述されていたstyleブロックを統合） */
@keyframes scrollBarAnim {
    0% { transform: translateY(-30px); }
    100% { transform: translateY(70px); }
}
.animate-scroll-bar {
    animation: scrollBarAnim 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate;
}

/* archive-photo.php用（元はphoto.html headに個別記述されていたstyleブロックを統合） */
/* SwiperのCDN版CSS（swiper-bundle.min.css）はCSSカスケードレイヤー未使用のため、
   @layer utilitiesでラップされたTailwindのクラス（w-[75%]等）より読み込み順に関わらず
   常に優先されてしまう。ここは詳細度2（.photo-swiper .swiper-slide）で確実に上書きする。 */
.photo-swiper .swiper-slide {
    width: 75% !important;
}
@media (min-width: 768px) {
    .photo-swiper .swiper-slide {
        width: 65% !important;
    }
}
/* ブレット幅: 「6個並んだときの合計幅」を上限とし、7個以上（最大20個）は
   その上限幅に収まるよう1個あたりの幅を縮小する。--photo-pagination-count は
   JS側で実際のスライド数（.custom-photo-pagination要素へのインラインスタイル）
   をセットする。6個以下はmin()により常にベース幅（30px/40px）のまま。 */
.custom-photo-pagination {
    --photo-pagination-count: 6;
    --photo-pagination-gap: 6px;
    --photo-pagination-base-width: 30px;
}
@media (min-width: 768px) {
    .custom-photo-pagination {
        --photo-pagination-base-width: 40px;
    }
}
.custom-photo-pagination .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
    margin: 0 !important;
    width: min(
        var(--photo-pagination-base-width),
        calc((6 * var(--photo-pagination-base-width) + (6 - var(--photo-pagination-count)) * var(--photo-pagination-gap)) / var(--photo-pagination-count))
    ) !important;
    height: 3px !important;
    border-radius: 9999px !important;
    transition: all 0.3s;
    cursor: pointer;
}
.custom-photo-pagination .swiper-pagination-bullet-active {
    background: linear-gradient(to right, #0055ff, #00d2ff, #0055ff, #00d2ff, #0055ff) !important;
    background-size: 300% 100% !important;
    animation: border-gradient-anim 8.5s ease-in-out -3s infinite !important;
}
.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
    border-radius: 0;
}
.swiper-button-prev::after,
.swiper-button-next::after {
    display: none !important;
    content: '' !important;
}
/* スマートフォン用（初期値）：半分のサイズ */
.photo-nav-btn {
    width: 35px !important;
    height: 35px !important;
    top: 50% !important;
    margin-top: 0 !important;
    transform: translateY(-50%) !important;
}
.photo-nav-btn svg {
    width: 12px !important;
    height: 12px !important;
}
/* PC用（768px以上）：現在のサイズ */
@media (min-width: 768px) {
    .photo-nav-btn {
        width: 70px !important;
        height: 70px !important;
    }
    .photo-nav-btn svg {
        width: 24px !important;
        height: 24px !important;
    }
}

/* Contact Form 7（page-contact.php）用スタイル。
   CF7タグ内でTailwindの角括弧記法（focus:ring-[#0055FF]等）を使うと
   タグ自体の[]記法と衝突するため、専用クラス名を切って直接CSSで指定する。 */
/* CF7は各タグを<span class="wpcf7-form-control-wrap">（inline）で包むため、
   input class="w-full"相当の.exceed-inputがwrap基準で100%になり狭くなる。
   wrapをblock化して元のdiv直下と同じ挙動にする。 */
.wpcf7-form-control-wrap {
    display: block;
}
.exceed-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.exceed-input::placeholder {
    color: #6b7280;
}
.exceed-input:focus {
    outline: none;
    border-color: #0055ff;
    box-shadow: 0 0 0 1px #0055ff;
}
.exceed-textarea {
    resize: vertical;
    min-height: 150px;
}
/* ラジオボタン群: CF7が生成するwpcf7-form-control-wrap/wpcf7-list-item構造を
   元デザインのflexレイアウトに合わせる（wrap自体はブロック化済み、
   その中のコントロールをflexコンテナにする）。 */
.exceed-radio-group .wpcf7-form-control.wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
@media (min-width: 768px) {
    .exceed-radio-group .wpcf7-form-control.wpcf7-radio {
        gap: 1.5rem;
    }
}
.exceed-radio-group .wpcf7-list-item {
    margin: 0;
    /* CF7が出力するタグ間の空白テキストがページ標準のline-height(24px)を
       引き継ぎ、中身の実際のテキスト(20px)より高い「隠れた行の高さ」を
       作ってしまうため、ここでリセットする（実テキストは内側のspanで
       line-height:1.25remを別途指定済み）。 */
    line-height: 0;
}
.exceed-radio-group .wpcf7-list-item label {
    cursor: pointer;
    line-height: 0;
}
/* ネイティブのラジオボタンはテキストとの縦位置がフォント・ブラウザ依存で
   ぴったり揃わないため、実際の<input>は視覚的に隠しつつ操作可能な状態を
   保ち（クリップ手法、アクセシビリティを保持）、隣接するテキスト側の
   疑似要素で丸を描画する（参考: ulufuweb_onomichiの.form-radioと同じ手法）。
   丸はテキストの行内でtop:50%を基準に配置されるため、位置が完全に安定する。 */
.exceed-radio-group input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.exceed-radio-group .wpcf7-list-item-label {
    position: relative;
    display: inline-block;
    padding-left: 1.5rem;
    color: #d1d5db;
    font-size: 0.875rem;
    line-height: 1.25rem;
    cursor: pointer;
    transition: color 0.2s;
}
.exceed-radio-group .wpcf7-list-item-label::before,
.exceed-radio-group .wpcf7-list-item-label::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 9999px;
}
/* ::before = 常に表示される外側の丸（背景）。
   オリジナルはappearance:autoのネイティブ描画で白く見えているだけで
   background-color: rgba(255,255,255,0.05)というCSS値自体は見た目に
   反映されていない（ネイティブUIが独自に描画するため）。そのため
   ここでは実際に見えている白い丸そのものを直接再現する。 */
.exceed-radio-group .wpcf7-list-item-label::before {
    left: 0;
    width: 1rem;
    height: 1rem;
    border: 1.5px solid rgba(0, 0, 0, 0.5);
    background-color: #ffffff;
    transition: border-color 0.2s;
}
/* ::after = チェック時だけ表示される内側の丸 */
.exceed-radio-group .wpcf7-list-item-label::after {
    left: 0.1875rem;
    width: 0.625rem;
    height: 0.625rem;
    background-color: #0055ff;
    opacity: 0;
    transition: opacity 0.15s;
}
.exceed-radio-group .wpcf7-list-item:hover .wpcf7-list-item-label {
    color: #fff;
}
.exceed-radio-group .wpcf7-list-item:hover input[type="radio"]:not(:checked) + .wpcf7-list-item-label::before {
    border-color: rgba(0, 0, 0, 0.6);
}
.exceed-radio-group input[type="radio"]:checked + .wpcf7-list-item-label::before {
    border-color: rgba(0, 85, 255, 0.8);
    transition: border-color 0.2s;
}
.exceed-radio-group input[type="radio"]:checked + .wpcf7-list-item-label::after {
    background-color: rgba(0, 85, 255, 0.8);
    opacity: 1;
    transition: opacity 0.15s, background-color 0.2s;
}
.exceed-radio-group .wpcf7-list-item:hover input[type="radio"]:checked + .wpcf7-list-item-label::before {
    border-color: #0055ff;
}
.exceed-radio-group .wpcf7-list-item:hover input[type="radio"]:checked + .wpcf7-list-item-label::after {
    background-color: #0055ff;
}
.exceed-radio-group input[type="radio"]:focus-visible + .wpcf7-list-item-label::before {
    outline: 2px solid #0055ff;
    outline-offset: 2px;
}
/* CF7が自動生成する<form class="wpcf7-form">には元HTMLのform要素にあった
   class="space-y-8"（項目間の余白）が付与されないため、直接の子要素同士に
   同等の余白をCSSで再現する。 */
.wpcf7-form > div + div {
    margin-top: 2rem;
}
/* 送信ボタン: btn-gradient-borderの光る枠線は::before/::after疑似要素で
   描画するため<input>には使えない（<input>は疑似要素を持てない）。
   そのため実際に送信を担う<input>は透明にして最前面に重ね、見た目
   （黒背景・グラデーション枠・矢印）は装飾用のexceed-submit-wrap/
   exceed-submit-label側に持たせる。クリックは常に透明なinputが受ける。 */
/* position:absolute; inset:0 + shrink-to-fitの組み合わせで
   ラップの幅が意図せず広がる挙動になったため、CSS Gridで同じマス目
   （grid-area:1/1）に重ねる方式に変更する。ラベル（可視の見た目）が
   マス目のサイズを決め、input（透明・クリック担当）はwidth/height:100%で
   そのマス目にそのまま合わせるだけなので、サイズのズレが起きない。 */
.exceed-submit-wrap {
    display: inline-grid;
    width: 100%;
    min-width: 240px;
    min-height: 3.75rem;
    border-radius: 9999px;
    line-height: 0;
}
@media (min-width: 768px) {
    .exceed-submit-wrap {
        width: auto;
    }
}
.exceed-submit-label,
input.exceed-submit-input,
.exceed-submit-wrap .wpcf7-spinner {
    grid-area: 1 / 1;
}
/* CF7が送信ボタンの直後に自動追加する読み込み中スピナー。デフォルトでは
   margin:0 24pxが付いており、grid-areaで重ねてもそのmarginがグリッドの
   行の高さに影響してしまうため打ち消す。 */
.exceed-submit-wrap .wpcf7-spinner {
    margin: 0;
    z-index: 3;
    align-self: center;
    justify-self: center;
}
.exceed-submit-label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 3rem;
    color: #fff;
    font-size: 1rem;
    letter-spacing: 0.1em;
    font-weight: 500;
    pointer-events: none;
}
@media (min-width: 768px) {
    .exceed-submit-label {
        font-size: 1.125rem;
    }
}
.exceed-submit-arrow {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.5rem;
    transition: transform 0.3s;
}
.exceed-submit-wrap:hover .exceed-submit-arrow {
    transform: translateX(0.25rem);
}
input.exceed-submit-input {
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 9999px;
    opacity: 0;
    cursor: pointer;
}
.wpcf7-not-valid-tip {
    color: #ff6b6b;
    font-size: 0.8rem;
    margin-top: 0.375rem;
    display: block;
}
.wpcf7-response-output {
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    margin: 1.5rem 0 0 !important;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2) !important;
}