/******* Do not edit this file ******* Simple Custom CSS and JS - by Silkypress.com Saved: May 31 2026 | 05:43:27 */ /*! * c3i株式会社 カスタムCSS * WordPress（SWELL）カスタマイズ > 追加CSS へ貼り付け * * 目次 * ───────────────────────────────────────────────────────── * 01. CSS変数 * 02. 共通 - リセット・基本 * 03. 共通 - 文字アニメーション（.char / .text） * 04. 共通 - フェードアニメーション（.animated） * 05. 共通 - 見出し（h2・h3） * 06. 共通 - ボタン（.btn-effect-5） * 07. ヘッダー * 08. フッター * 09. トップ - メインビジュアル (.top-mv) * 10. トップ - 会社紹介 (.top-about) * 11. トップ - サービス内容 (.top-service) * 12. トップ - ご支援事例 (.top-case) * 13. トップ - 新着情報 (.top-topics) * 14. トップ - 採用情報 (.top-recruit) * 15. 共通 - お問い合わせ * 16. ページ共通（内部ページ） * 17. サービスページ（ナビ・セクション・カード） * 18. ブログ（single） * 19. 子ページ * 20. 会社概要ページ * 21. 採用情報ページ * 22. お問い合わせページ * 23. 自治体DXページ * 25. お知らせページ（topics） * ───────────────────────────────────────────────────────── */ /* ========================================================= 01. CSS変数 ========================================================= */ :root { /* カラー */ --color_accent: #ED7700; --color_logoyellow: #F9BE02; --color_lightorange: #F4BA92; --color_bgorange: #FBF3EE; --color_lightpink: #eab7d3; --color_blue: #00adaf; --color_ash: #B5A59A; --color_white: #ffffff; --color_black: #333333; /* スペーシングトークン（fluid: clamp(min, vw, max)） */ --space-s: 80px; /* about/recruit 下: 固定80px */ --space-m: clamp(100px, 10vw, 120px); /* 100px SP → 120px PC */ --space-l: clamp(100px, 13vw, 160px); /* 100px SP → 160px PC */ --space-xl: clamp(100px, 17vw, 200px); /* 100px SP → 200px PC */ /* サービスページ用スペーシング */ --service-spacing-xs: 0.5rem; --service-spacing-sm: 1rem; --service-spacing-md: 2rem; --service-spacing-lg: 3rem; --service-spacing-xl: 4rem; /* サービスページ用ボーダー半径 */ --service-radius-sm: 8px; --service-radius-md: 12px; --service-radius-lg: 16px; } /* ========================================================= 02. 共通 - リセット・基本 ========================================================= */ * { box-sizing: border-box; } body { font-feature-settings: "palt"; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; font-style: normal; letter-spacing: 0.06em; background-color: transparent !important; } .l-container { max-width: unset !important; } /* ---- フォントユーティリティクラス ---- */ .zen-kaku-gothic-new-light { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 300; } .zen-kaku-gothic-new-regular { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 400; } .zen-kaku-gothic-new-medium { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; } .zen-kaku-gothic-new-bold { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; } .zen-kaku-gothic-new-black { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900; } /* ---- スクリーンリーダー専用非表示 ---- */ .visuallyHidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; } /* ---- コンテナ ---- */ .container { width: 100%; display: flex; justify-content: center; align-items: center; } /* ---- 本文テキスト ---- */ .main-p { font-size: 1.1rem; letter-spacing: 0.25px; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; font-style: normal; line-height: 2rem; } /* SP用改行（PC時は非表示） */ @media (min-width: 960px) { .br-sp { display: none; } } /* ========================================================= 03. 共通 - 文字アニメーション（.char / .text） ───────────────────────────────────────────────────────── JS で .text に .is-active を付与すると 各 .char が下からスライドインします ========================================================= */ .headline { display: flex; flex-direction: column; align-items: flex-start; width: fit-content; margin: 0 auto; } .text { overflow: hidden; display: flex; justify-content: flex-start; color: #333; font-size: 5vw; font-weight: 700; line-height: 1.2; padding-bottom: 0.2em; } .text.is-active { --y: 0; } .char { display: inline-block; transform: translateY(var(--y, 110%)); transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc( 0.1s + (var(--line-index) * 0.3s) + (var(--char-index) * 0.04s) ); } /* ハイライト文字（C / I など） */ .char.highlight { color: var(--color_accent); } /* ========================================================= 04. 共通 - フェードアニメーション（.animated） ───────────────────────────────────────────────────────── JS で .is-visible を付与することで発火します ========================================================= */ .animated { opacity: 0; transform: scale(0.8); transform-origin: center center; /* animation は使わず transition に統一（SWELLのanimationとの競合を防ぐ） */ animation: none !important; /* SWELLが .hidden-animated { visibility: hidden } を付与するため上書き */ visibility: visible !important; transition: opacity 0.8s cubic-bezier(0.65, 0.05, 0.36, 1), transform 0.8s cubic-bezier(0.65, 0.05, 0.36, 1); } .animated.slow { transition-duration: 1.4s; } .animated.is-visible { opacity: 1; transform: scale(1); visibility: visible !important; } /* ========================================================= 05. 共通 - 見出し（h2・h3） ========================================================= */ /* ---- h2 ---- */ .post_content h2 { font-size: 1.8rem !important; color: #333; margin: 0 auto 1rem !important; letter-spacing: 0.1rem !important; border: none !important; background: none !important; padding: 0 !important; overflow: hidden; display: flex; justify-content: center; width: 100%; } .post_content h2 .text { font-size: inherit; font-weight: inherit; color: inherit; justify-content: center; } .post_content h2 .char { transition-delay: calc( 0s + (var(--line-index) * 0.4s) + (var(--char-index) * 0.04s) ) !important; } .post_content h2::before, .post_content h2::after { content: none !important; } @media (max-width: 959px) { .post_content h2 { font-size: 1.4rem !important; } } /* ---- h3（英字ラベル、六角形アイコン付き） ---- */ .post_content h3 { height: 1.4rem; font-size: 1rem; font-family: "Google Sans Flex", sans-serif; font-weight: 700; color: var(--color_accent) !important; letter-spacing: 0.1rem !important; margin: 0 auto 0.5rem; display: inline-block; background-image: url(https://c3i.jp/wordpress/wp-content/uploads/2026/02/c3i-hexagon.png) !important; background-repeat: no-repeat !important; background-position: left center !important; background-size: 20px 20px !important; padding-left: 30px !important; padding-bottom: 0; overflow: hidden; vertical-align: bottom; /* SWELLデフォルトをリセット */ border: none !important; background-color: transparent !important; /* 六角形を文字アニメーションと同じタイミングで出現させる */ opacity: 0; transition: opacity 0.4s ease; } /* .text に .is-active が付いたとき h3 ごと出現（六角形を含む） */ .post_content h3:has(.text.is-active) { opacity: 1; } .post_content h3 .text { font-size: inherit; font-weight: inherit; color: inherit; text-transform: none; } .post_content h3 .char { transition-delay: calc( 0s + (var(--line-index) * 0.4s) + (var(--char-index) * 0.04s) ) !important; vertical-align: bottom; } .post_content h3::before, .post_content h3::after { content: none !important; display: none !important; } /* ========================================================= 06. 共通 - ボタン（.btn-effect-5） ========================================================= */ .btn-container { display: flex; justify-content: center; align-items: center; margin: 0; } .btn-effect-5 { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 12px 30px; font-size: 1rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; border-radius: 50px; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; text-decoration: none; z-index: 2; /* ボタンが次セクション等に被られてもホバー判定を確保 */ border: 2px solid var(--color_accent); background: transparent; } .btn-effect-5 span { position: relative; z-index: 2; color: var(--color_accent); transition: color 0.4s ease; } .btn-effect-5::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--color_accent); z-index: 0; transition: width 0.5s ease; } @keyframes ctaArrowReenter { 0% { transform: scale(1) translate(0, 0); } 35% { transform: scale(0) translate(6px, -6px); } 36% { transform: scale(0) translate(-6px, 6px); } 100% { transform: scale(1) translate(0, 0); } } .btn-effect-5:hover { transform: translateY(-2px); box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.10); } .btn-effect-5:hover span { color: #ffffff !important; } .btn-effect-5:hover::before { width: 100%; } .btn-effect-5:hover .cta-arrow { animation: ctaArrowReenter 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .btn-effect-5:hover .cta-arrow polyline, .btn-effect-5:hover .cta-arrow line { stroke: #ffffff; } /* CF7 用：[submit] は を出力するため、SVG を子要素に 入れられず ::before も使えない。矢印は background-image、塗りつぶし アニメーションは linear-gradient で再現する。 */ input[type="submit"].btn-effect-5 { padding: 12px 56px 12px 30px; /* 右側に矢印分の余白 */ color: var(--color_accent); -webkit-appearance: none; appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 203.27 203.27'%3E%3Cpolyline points='43.99 15 166.17 37.1 188.27 159.28' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3Cline x1='166.15' y1='37.12' x2='15' y2='188.27' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3C/svg%3E") no-repeat right 20px center / 18px, linear-gradient(to right, var(--color_accent) 50%, transparent 50%) no-repeat 100% 0 / 200% 100%; } input[type="submit"].btn-effect-5:hover { color: #fff; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 203.27 203.27'%3E%3Cpolyline points='43.99 15 166.17 37.1 188.27 159.28' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3Cline x1='166.15' y1='37.12' x2='15' y2='188.27' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3C/svg%3E") no-repeat right 20px center / 18px, linear-gradient(to right, var(--color_accent) 50%, transparent 50%) no-repeat 0 0 / 200% 100%; } @media (max-width: 959px) { .btn-effect-5 { padding: 10px 20px; font-size: 1rem; font-weight: 700; /* SP：テキストを太字に */ } input[type="submit"].btn-effect-5 { padding: 10px 48px 10px 24px; } } /* ========================================================= 07. ヘッダー ========================================================= */ #header { /* ヘッダー全体 */ .l-header__inner { position: fixed; top: 0; display: flex; align-items: center; justify-content: space-between; padding-left: 0; width: 100vw; z-index: 1000; } /* ロゴ：左上・白背景・右下角丸 */ .l-header__logo { padding: 20px 20px 30px 30px; height: auto; background-color: #ffffff; border-radius: 0px 0px 40px 0px; box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.10); } /* グローバルナビ（PC） */ #gnav { display: block !important; margin: 0 0 0 35px; border-radius: 30px; padding: 0; /* 左右0：両端の項目（ホーム/お問い合わせ）でスライダーがピル端まで届くように */ height: auto; background-color: #ffffff; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10); } .c-gnav { display: flex; text-align: left; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; gap: 4px; letter-spacing: 0.15em; align-items: center; position: relative; /* スライダー位置の基準 */ } /* カレントスライダー：現在ページの項目を黄色いピルでハイライト common.js が --gnav-slider-x / --gnav-slider-w を更新する */ .c-gnav::before { content: ''; position: absolute; top: 50%; left: var(--gnav-slider-x, 0); width: var(--gnav-slider-w, 0); height: 100%; background-color: var(--color_logoyellow); border-radius: 30px; transform: translateY(-50%); transition: left 0.35s cubic-bezier(0.65, 0.05, 0.36, 1), width 0.35s cubic-bezier(0.65, 0.05, 0.36, 1), opacity 0.2s ease; opacity: 0; pointer-events: none; z-index: 0; } .c-gnav.is-slider-ready::before { opacity: 1; } .c-gnav.is-slider-no-anim::before { transition: none; } /* メニュー項目をスライダーの上に重ねる */ .c-gnav > .menu-item { position: relative; z-index: 1; } .c-gnav > .menu-item > a { display: block; padding: 20px 24px; transition: .4s all ease; } .c-gnav > .menu-item > a:hover { color: var(--color_accent); background-color: transparent !important; } .c-gnav > .menu-item > a .ttl { font-size: 1rem !important; } /* 現在ページの項目：黄色ピル上で読みやすく */ .c-gnav > .menu-item.current-menu-item > a { color: var(--color_black); font-weight: 700; } .c-gnav > .menu-item.current-menu-item > a:hover { color: var(--color_black); /* ピル上はホバーでもダーク維持 */ } /* ドロップダウン：上端基準で配置し、項目数に依存せずバーの下に出す */ .c-gnav > .menu-item > .sub-menu { top: calc(100% + 28px); bottom: unset; } .c-gnav .sub-menu { box-shadow: unset; border-radius: 30px; padding: 10px 8px 10px 5px; width: 250px; overflow: hidden; background-color: var(--color_bgorange); } /* 左の「>」を非表示 */ .c-gnav .sub-menu li::before, .c-gnav .sub-menu a::before { display: none !important; content: none !important; } .c-gnav .sub-menu a { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; } /* 右側にホバーで矢印 */ .c-gnav .sub-menu a::after { content: '' !important; display: inline-block !important; width: 11px; height: 11px; background-color: transparent !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 203.27 203.27'%3E%3Cpolyline points='43.99 15 166.17 37.1 188.27 159.28' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3Cline x1='166.15' y1='37.12' x2='15' y2='188.27' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3C%2Fsvg%3E") !important; background-size: contain; background-repeat: no-repeat; background-position: center; border: none !important; flex-shrink: 0; opacity: 0; transform: translateX(-4px); transition: opacity 0.2s ease, transform 0.2s ease; } .c-gnav .sub-menu a:hover { color: var(--color_accent); background-color: transparent !important; } .c-gnav .sub-menu a:hover::after { opacity: 1; transform: translateX(0); } /* 検索ボタン非表示 */ .l-header__customBtn.sp_ { display: none !important; } } /* ---- SPメニュー（下からスライドイン） ---- */ #sp_menu { display: block !important; .p-spMenu__inner { padding: 0; width: 100%; transition: all 0.6s; position: fixed; bottom: -120%; left: 0; } .p-spMenu__closeBtn { position: fixed; top: 0; right: 0; left: unset; background-image: url(https://c3i.jp/wordpress/wp-content/uploads/2026/02/c3i-hexagonx4-yl.png); background-size: contain; width: 60px; height: 60px; } .icon-close-thin:before { color: var(--color_white); } .p-spMenu__body { display: flex; flex-direction: column; } .p-spMenu__nav { display: none; } .c-widget__title.-spmenu { display: none; } #sp_menu_bottom { margin: 100px auto 0; order: 1; } #sp_menu_bottom img { margin-bottom: 40px; vertical-align: bottom; max-width: 300px !important; } .sp-menu-a { display: flex; flex-direction: column; align-items: center; } .sp-menu-link { margin-bottom: 0; } .sp-menu-a:hover { opacity: 0.7; } } .p-spMenu__inner { box-shadow: unset; } .-left .p-spMenu__inner { transform-origin: top; transform: translateX(0); } .p-spMenu__inner::before { transform: scale(0); bottom: -50px; left: calc(50% - 50px); transition: all 1s; width: 100px; height: 100px; } [data-spmenu=opened] #sp_menu .p-spMenu__inner { bottom: 0; } [data-spmenu=opened] #sp_menu .p-spMenu__inner::before { transform: scale(50); } /* ヘッダーのボーダーを削除 */ .l-header { box-shadow: unset !important; } /* ---- SP / タブレット ---- */ @media screen and (max-width: 1100px) { #header #gnav, #header .c-gnav { display: none !important; } /* ハンバーガーボタン：六角形アイコン */ .l-header__menuBtn.sp_ { display: block !important; position: fixed; top: 0; right: 0; margin: 35px 35px 0 0; background-image: url(https://c3i.jp/wordpress/wp-content/uploads/2026/02/c3i-hexagonx4-yl.png); background-size: contain; width: 60px; height: 60px; filter: drop-shadow(4px 4px 12px rgba(0, 0, 0, 0.10)); } .icon-menu-thin:before { content: "" !important; background-image: url('https://c3i.jp/wordpress/wp-content/uploads/2026/05/hum.png'); background-size: contain; width: 40px; height: 7px; } } @media screen and (max-width: 959px) { #header .l-header__logo { padding: 20px; border-radius: 0px 0px 20px 0px; } .l-header__menuBtn.sp_ { margin: 15px 15px 0 0; } #sp_menu .p-spMenu__closeBtn { margin: 20px 20px 0 0; } } /* ========================================================= 07-B. ドロワーメニュー（SP ハンバーガー） ========================================================= */ /* SWELLのデフォルトSPメニューを非表示 */ #sp_menu { display: none !important; } /* 透明トリガーボタン：PCでは非表示。 ハンバーガーボタン（max-width:1100px で表示）と同じブレークポイントに揃える。 */ .drawer-trigger { display: none; } @media (max-width: 1100px) { .drawer-trigger { display: block; } } .drawer { position: fixed; inset: 0; z-index: 99998; visibility: hidden; pointer-events: none; transition: visibility 0s 0.6s; /* 閉じるとき：アニメーション完了後に非表示 */ } .drawer.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s 0s; /* 開くとき：即座に表示 */ } /* 六角形：静的表示（アニメーションなし） */ .drawer-hex-1 { opacity: 0.5; } .drawer-hex-2 { opacity: 0.35; } .drawer-panel { position: absolute; inset: 0; background: var(--color_bgorange); display: flex; flex-direction: column; padding: 32px 40px 60px; overflow: hidden; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transition: clip-path 0.55s cubic-bezier(0.4, 0, 0.2, 1); } .drawer.is-open .drawer-panel { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } .drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 48px; position: relative; z-index: 1; opacity: 0; transition: opacity 0.3s ease; } .drawer.is-open .drawer-header { opacity: 1; transition-delay: 0.38s; } .drawer-logo { height: 36px; width: auto; } .drawer-close { width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; position: relative; /* 44pxボタン内で×が中央配置のため、矢印（コンテンツ右端）と揃うよう右へ寄せる */ margin-right: -12px; } .drawer-close span { display: block; width: 28px; height: 2px; background: var(--color_accent); position: absolute; top: 50%; left: 50%; } .drawer-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); } .drawer-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); } .drawer-nav { flex: 1; min-height: 0; /* flex子がはみ出さずスクロールできるように */ overflow-y: auto; /* メニューが長い場合はナビ部分だけスクロール */ overflow-x: hidden; scrollbar-width: none; /* Firefox：スクロールバー非表示（矢印との重なり回避） */ position: relative; z-index: 1; } .drawer-nav::-webkit-scrollbar { display: none; } /* Safari/Chrome：同上 */ /* SWELL が .post_content ul に付ける余白を打ち消す（!important で確実に） */ .drawer-nav-list { list-style: none; padding: 0 !important; margin: 0 !important; } .drawer-nav-list > li { opacity: 0; transform: translateX(-24px); transition: opacity 0.35s ease, transform 0.35s ease; list-style: none; } .drawer.is-open .drawer-nav-list > li:nth-child(1) { transition-delay: 0.46s; opacity: 1; transform: none; } .drawer.is-open .drawer-nav-list > li:nth-child(2) { transition-delay: 0.52s; opacity: 1; transform: none; } .drawer.is-open .drawer-nav-list > li:nth-child(3) { transition-delay: 0.58s; opacity: 1; transform: none; } .drawer.is-open .drawer-nav-list > li:nth-child(4) { transition-delay: 0.64s; opacity: 1; transform: none; } .drawer.is-open .drawer-nav-list > li:nth-child(5) { transition-delay: 0.70s; opacity: 1; transform: none; } .drawer-nav-list > li > a { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid rgba(237, 119, 0, 0.2); font-size: 1.4rem; font-weight: 700; color: var(--color_black); text-decoration: none; font-family: "Zen Kaku Gothic New", sans-serif; } .drawer-nav-list > li > a::after { content: ''; display: inline-block; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 203.27 203.27'%3E%3Cpolyline points='43.99 15 166.17 37.1 188.27 159.28' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3Cline x1='166.15' y1='37.12' x2='15' y2='188.27' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3C%2Fsvg%3E"); background-size: contain; background-repeat: no-repeat; flex-shrink: 0; } /* 子メニュー（自治体DXなど） */ .drawer-nav-list .sub-menu { list-style: none; padding: 0 !important; margin: 0 !important; } .drawer-nav-list .sub-menu > li > a { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 12px 1.2em; font-size: 1.05rem; font-weight: 500; color: var(--color_black); text-decoration: none; border-bottom: 1px solid rgba(237, 119, 0, 0.15); font-family: "Zen Kaku Gothic New", sans-serif; opacity: 0.85; } .drawer-nav-list .sub-menu > li > a::after { content: ''; display: inline-block; width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 203.27 203.27'%3E%3Cpolyline points='43.99 15 166.17 37.1 188.27 159.28' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3Cline x1='166.15' y1='37.12' x2='15' y2='188.27' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3C%2Fsvg%3E"); background-size: contain; background-repeat: no-repeat; flex-shrink: 0; } .drawer-cta { margin-top: 32px; text-align: center; position: relative; z-index: 1; opacity: 0; transition: opacity 0.3s ease; } .drawer.is-open .drawer-cta { opacity: 1; transition-delay: 0.72s; } .drawer-cta-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--color_logoyellow); color: var(--color_black); padding: 16px 40px; border-radius: 50px; font-size: 1.1rem; font-weight: 700; text-decoration: none; font-family: "Zen Kaku Gothic New", sans-serif; transition: opacity 0.2s ease; } .drawer-cta-btn:hover { opacity: 0.85; color: var(--color_black); } .drawer-cta-btn::after { content: ''; display: inline-block; width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 203.27 203.27'%3E%3Cpolyline points='43.99 15 166.17 37.1 188.27 159.28' fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3Cline x1='166.15' y1='37.12' x2='15' y2='188.27' fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3C%2Fsvg%3E"); background-size: contain; background-repeat: no-repeat; flex-shrink: 0; } .drawer-hex { position: absolute; pointer-events: none; z-index: 0; } .drawer-hex-1 { width: 120px; right: 0px; bottom: 60px; } .drawer-hex-2 { width: 70px; right: 100px; bottom: 36px; } /* ========================================================= 08. フッター ========================================================= */ /* SWELLデフォルトフッターを非表示 */ #footer { display: none; } .footer { border-radius: 30px 30px 0 0; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; background: transparent; padding: 60px 60px; position: relative; overflow: hidden; } /* 背景アニメーション：下から上へ広がる */ .footer-bg { position: absolute; inset: 0; background: var(--color_bgorange); border-radius: 30px 30px 0 0; z-index: 0; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transition: clip-path 1.4s cubic-bezier(0.4, 0, 0.2, 1); } .footer-bg.is-revealed { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } /* フッター右下の浮遊六角形（共通） */ .footer-hex { position: absolute; pointer-events: none; z-index: 0; will-change: transform; /* Safariスクロールジャンク回避：独立した合成レイヤーに昇格 */ } /* 大きめ・ぼかし弱め */ .footer-hex-1 { width: 180px; right: 100px; bottom: 100px; opacity: 0.75; filter: blur(1px); } .footer-hex-1.is-active { animation: pmhEnter 0.8s ease forwards, pmhFloat1 5s ease-in-out 0.8s infinite; } /* 小さめ・ぼかし強め・opacity強め */ .footer-hex-2 { width: 100px; right: 260px; bottom: 80px; opacity: 0.65; filter: blur(1.5px); } .footer-hex-2.is-active { animation: pmhEnter 0.8s ease forwards, pmhFloat2 4s ease-in-out 0.8s infinite; } .footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; max-width: 1100px; margin: 0 auto; padding-bottom: 40px; position: relative; z-index: 1; } .footer-col-left, .footer-col-right { transition: opacity 1.0s ease, transform 1.0s ease; } .footer-col-left > a { display: inline-block; } .footer-logo { max-width: 160px; height: auto; margin-bottom: 16px; } .footer-company-name { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; } .footer-address { font-size: 0.95rem; line-height: 1.8; font-style: normal; color: #555; margin-bottom: 16px; } .footer-nav-group { display: flex; gap: 40px; } .footer-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .footer-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 12px; color: var(--color_black); } .footer-nav-list a { color: #333; text-decoration: none; font-size: 1.1rem; display: inline-flex; align-items: center; gap: 10px; transition: color 0.3s ease, opacity 0.3s ease; } .footer-nav-list a::after { content: ''; display: inline-block; width: 12px; height: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 203.27 203.27'%3E%3Cpolyline points='43.99 15 166.17 37.1 188.27 159.28' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3Cline x1='166.15' y1='37.12' x2='15' y2='188.27' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3C%2Fsvg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; transform: scale(0); transform-origin: right top; /* ホバーアウト：右上に消える */ transition: transform 0s; } .footer-nav-list a:hover { color: var(--color_accent); opacity: 0.8; } .footer-nav-list a:hover::after { transform: scale(1); transform-origin: left bottom; /* ホバーイン：左下から出現 */ transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } /* フッター 子メニュー（サービス配下など） */ .footer-nav-list .sub-menu { list-style: none; padding: 0 0 0 14px; margin: 12px 0 0 0; display: flex; flex-direction: column; gap: 12px; border-left: 2px solid rgba(237, 119, 0, 0.3); } .footer-nav-list .sub-menu a { opacity: 0.8; } .footer-nav-list .sub-menu a:hover { opacity: 1; } .footer a { color: #333; text-decoration: none; font-size: 1rem; } .footer-bottom { padding: 20px 0; text-align: center; max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; transition: opacity 0.8s ease; } .footer-copy { font-size: 1rem; font-family: "Google Sans Flex", sans-serif; color: #888; } .footer-privacy { margin-bottom: 12px; } @media (max-width: 959px) { .footer { padding: 40px 0 0; } .footer-inner { flex-direction: column; gap: 32px; width: 84%; max-width: 100%; } .footer-nav-group { flex-direction: column; gap: 32px; width: 100%; } .footer-nav ul { flex-direction: row; flex-wrap: wrap; gap: 10px 24px; } /* SP: 事業メニューは縦並び、サービスの子は2列インデント （法務リンクの ul は :has(.sub-menu) で対象外＝横並びのまま） */ .footer-nav-list:has(.sub-menu) { flex-direction: column; flex-wrap: nowrap; gap: 14px; } .footer-nav-list > li.menu-item-has-children { display: block; width: 100%; } .footer-nav-list .sub-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 10px 0 0; padding-left: 14px; border-left: 2px solid rgba(237, 119, 0, 0.3); } .footer-nav-list .sub-menu > li > a { padding-left: 0; opacity: 1; } .footer-column { padding: 0; } .footer-privacy { display: flex; justify-content: flex-start; } .footer-copy { text-align: left; } .footer-bottom { width: 84%; max-width: 100%; } /* SP: フッターのフォントサイズを1回り大きく */ .footer-nav-list a { font-size: 1.2rem; } .footer a { font-size: 1.1rem; } .footer-company-name { font-size: 1.15rem; } .footer-address { font-size: 1.05rem; } .footer-copy { font-size: 1.05rem; } .footer-title { font-size: 1.3rem; } } @media (max-width: 600px) { /* 600px以下：サービスの子メニューを1列（縦並び）に */ .footer-nav-list .sub-menu { grid-template-columns: 1fr; } .footer-hex-1 { width: 120px; right: 0px; bottom: 80px; } .footer-hex-2 { width: 70px; right: 110px; bottom: 60px; } } /* ========================================================= 09. トップ - メインビジュアル (.top-mv) ========================================================= */ .home #content { position: relative; } .top #content { padding-top: 0; } .top-mv { height: 100vh; position: relative; } /* 背景：左＝薄オレンジ単色 / 右＝ハニカムSVG */ .top-mv::before { content: ""; display: block; position: absolute; top: 0; left: 0; background-color: var(--color_bgorange); margin: 20px; border-radius: 16px; height: calc(100% - 40px); width: calc(100% - 40px); box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.10); z-index: -1; } .top-mv::after { content: ""; position: absolute; top: 20px; right: 20px; left: 52%; height: calc(100% - 40px); background-color: var(--color_bgorange); /* background-image: url('/wp-content/uploads/2026/04/bg-honeycomb.svg'); */ /* background-size: cover; */ /* background-position: left center; */ border-radius: 0 16px 16px 0; z-index: -1; } /* MV 登場シーケンス ① 背景フェードイン → ② テキスト → ③ イラスト Scale Up */ @keyframes mvBgScale { from { transform: scale(0.88); } to { transform: scale(1); } } @keyframes mvBgOpacity { from { opacity: 0; } to { opacity: 1; } } @keyframes mvIllustIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } /* ① 背景：スケールアップしながらフェードイン（caseセクションと同タイミング） */ .top-mv::before { opacity: 0; transform: scale(0.88); transform-origin: center center; animation: mvBgScale 0.9s cubic-bezier(0.65, 0.05, 0.36, 1) forwards, mvBgOpacity 0.7s ease forwards; } .top-mv::after { opacity: 0; transform: scale(0.88); transform-origin: center center; animation: mvBgScale 0.9s cubic-bezier(0.65, 0.05, 0.36, 1) 0.1s forwards, mvBgOpacity 0.7s ease 0.1s forwards; } /* ② テキスト：背景が出てから開始（baseを0.8sに） */ .top-mv .char { transition-delay: calc( 0.8s + (var(--line-index) * 0.3s) + (var(--char-index) * 0.04s) ); } .top-mv-column > .swell-block-columns__inner { display: flex; flex-wrap: nowrap; gap: 0; height: 100vh; align-items: center; padding: 0 40px; /* コンテンツをビューポートの垂直中央（50vh）に配置 */ } .top-mv-column > .swell-block-columns__inner > .swell-block-column:first-child { flex: 0 0 47%; } .top-mv-column > .swell-block-columns__inner > .swell-block-column:last-child { flex: 0 0 53%; } /* 右カラム：イラストを収める */ .top-mv-column .swell-block-column:last-child { min-width: 0; padding: 0; } .top-mv-illust { width: 90%; max-width: 90%; display: block; } /* キャッチコピーのフォントサイズ */ .top-mv-copy span { font-size: 4rem !important; font-family: "Google Sans Flex", sans-serif; font-weight: 500; } @media (max-width: 959px) { .top-mv { height: 100svh; } /* 右半分の背景は1カラムでは不要 */ .top-mv::after { display: none; } .top-mv-column > .swell-block-columns__inner { flex-direction: column; height: auto; padding: 18svh 12px 10svh; gap: 32px; align-items: center; } /* 両カラムを全幅に */ .top-mv-column > .swell-block-columns__inner > .swell-block-column:first-child, .top-mv-column > .swell-block-columns__inner > .swell-block-column:last-child { flex: 0 0 100%; width: 100%; } /* イラストを中央揃え */ .top-mv-illust { width: 75%; max-width: 340px; margin: 0 auto; } .top-mv-copy span { font-size: 3.4rem !important; } /* headline テキスト拡大 */ .top-mv .text { font-size: clamp(2rem, 10vw, 3rem); } } /* ========================================================= 09-B. MV イラスト フローティングアニメーション ========================================================= */ @keyframes mvIllustFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-14px); } } /* ③ イラスト：登場（Scale Up）→ そのままふわふわ */ .top-mv-illust { animation: mvIllustIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 2s both, mvIllustFloat 5.0s ease-in-out 2.4s infinite; } /* ▲ MV イラスト フローティング ここまで ================ */ /* ========================================================= 09-C. Safariスクロール改善：スクロール中はフローティング装飾を一時停止 ───────────────────────────────────────────────────────── common.js が scroll 中に body に is-scrolling を付与・除去する。 Mac Safariで連続@keyframesがスクロール描画と競合してカクつくのを軽減。 ========================================================= */ body.is-scrolling .pmh, body.is-scrolling .footer-hex { animation-play-state: paused; } /* ========================================================= 09-D. page-mv フローティング六角形（サービスページ） ───────────────────────────────────────────────────────── ▼ 元に戻す場合：このブロック（09-D）をまるごと削除 あわせて service.html の div.page-mv-floats も削除してください ========================================================= */ .page-mv-floats { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .pmf { position: absolute; } /* 右上・大 */ .pmf--1 { width: 120px; top: 10%; right: 6%; opacity: 0.12; animation: kvFloat1 5.2s ease-in-out infinite; } /* 右下・小 */ .pmf--2 { width: 60px; bottom: 15%; right: 18%; opacity: 0.08; animation: kvFloat2 4.4s ease-in-out infinite 1.3s; } /* 左上・中 */ .pmf--3 { width: 80px; top: 8%; left: 4%; opacity: 0.10; animation: kvFloat3 6.0s ease-in-out infinite 0.7s; } /* 左下・極小 */ .pmf--4 { width: 44px; bottom: 20%; left: 12%; opacity: 0.07; animation: kvFloat1 4.8s ease-in-out infinite 2.0s; } /* ▲ page-mv フローティング六角形 ここまで ================ */ /* ========================================================= 09-E. page-mv 3D六角形フロート（サービスページ） ───────────────────────────────────────────────────────── ▼ 元に戻す場合：このブロック（09-E）をまるごと削除 あわせて service.html の div.page-mv-3d-floats も削除してください ========================================================= */ /* オレンジボックスと同じ範囲でクリップするコンテナ */ .page-mv-3d-floats { position: absolute; top: 56px; left: 20px; right: 20px; bottom: 56px; border-radius: 16px; overflow: hidden; pointer-events: none; z-index: 1; } .pmh { position: absolute; will-change: transform; /* Safariスクロールジャンク回避：ブラー要素を独立レイヤーに */ } /* 出現アニメーション：左下からスライドイン + フェードイン */ @keyframes pmhEnter { from { transform: translate(-60px, 80px); opacity: 0; } to { transform: translate(0, 0); } } /* ふわふわ：縦揺れ（大・中・小） */ @keyframes pmhFloat1 { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-14px); } } @keyframes pmhFloat2 { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes pmhFloat3 { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } } /* 最前面・最大：右上 */ .pmh--1 { width: 180px; top: 5%; right: 3%; opacity: 0.82; animation: pmhEnter 0.9s cubic-bezier(0.34, 1.0, 0.64, 1) 0.0s both, pmhFloat1 5.5s ease-in-out 0.9s infinite; } /* 中間・中サイズ：右中上、わずかにブラー */ .pmh--2 { width: 130px; top: 20%; right: 17%; opacity: 0.75; filter: blur(1.5px); animation: pmhEnter 0.9s cubic-bezier(0.34, 1.0, 0.64, 1) 0.25s both, pmhFloat2 5.0s ease-in-out 1.15s infinite; } /* 奥・中サイズ：右下 */ .pmh--3 { width: 95px; bottom: 8%; right: 7%; opacity: 0.44; filter: blur(3px); animation: pmhEnter 0.9s cubic-bezier(0.34, 1.0, 0.64, 1) 0.5s both, pmhFloat3 6.0s ease-in-out 1.4s infinite; } /* 遠景・小：右中 */ .pmh--4 { width: 62px; top: 52%; right: 22%; opacity: 0.32; filter: blur(5px); animation: pmhEnter 0.9s cubic-bezier(0.34, 1.0, 0.64, 1) 0.75s both, pmhFloat1 4.4s ease-in-out 1.65s infinite; } /* 最遠・極小：右端 */ .pmh--5 { width: 46px; bottom: 18%; right: 28%; opacity: 0.22; filter: blur(7px); animation: pmhEnter 0.9s cubic-bezier(0.34, 1.0, 0.64, 1) 1.0s both, pmhFloat2 4.8s ease-in-out 1.9s infinite; } /* ▲ page-mv 3D六角形フロート ここまで =================== */ /* ========================================================= 10. トップ - 会社紹介 (.top-about) ========================================================= */ .top-about { position: relative; overflow: hidden; padding: var(--space-l) 0 120px !important; text-align: left !important; } /* ウォーターマーク：非表示 */ .top-about::before { display: none !important; } .top-about-inner { display: flex !important; flex-direction: row !important; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 60px; gap: 0; } /* 見出しエリア：中央揃え */ .top-about-heading { text-align: center; margin-bottom: 40px; } .top-about-heading h3 { margin-bottom: 8px; } .top-about-heading h2 { margin-bottom: 0; } /* 見出し内の .text を中央揃えに */ .top-about-heading .text { justify-content: center; } /* 左カラム：本文＋ボタン */ .top-about-text { flex: 0 0 35% !important; min-width: 0; text-align: left; padding-bottom: 80px; } .top-about-text .main-p { margin-bottom: 32px; } .top-about-text .btn-container { justify-content: center; } /* 右カラム：イラスト */ .top-about-illust { flex: 0 0 65% !important; min-width: 0; display: flex; align-items: flex-end; opacity: 0; transform: scale(0.8); transform-origin: center center; transition: opacity 0.8s cubic-bezier(0.65, 0.05, 0.36, 1), transform 0.8s cubic-bezier(0.65, 0.05, 0.36, 1); } .top-about-illust.is-visible { opacity: 1; transform: scale(1); } /* イラスト：入場後にふわふわ浮遊（コンテナ側でscale-upするためimgはfloatのみ） */ .about-illust { width: 90%; max-width: 100%; display: block; margin: 0 auto; animation: mvIllustFloat 5.0s ease-in-out 0.8s infinite; } @media (max-width: 959px) { .top-about { padding: 120px 0 80px !important; } .top-about-inner { flex-direction: column !important; padding: 0 24px; } .top-about-text { flex: none !important; width: 100%; padding-bottom: 40px; } .top-about-illust { flex: none !important; width: 100%; } } /* ========================================================= 11. トップ - サービス内容 (.top-service) ========================================================= */ .top-service { text-align: center; padding: 120px 0; } .service-column { margin: 40px 20px; } /* トップサービス：section-inner の幅・余白 */ .top-service .section-inner { max-width: 1100px; margin: 0 auto; padding: 0 60px; } /* ---- トップページ サービスグリッド（カスタムHTML版） ---- */ .top-service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 40px 0; } .top-service-card { position: relative; display: block; text-decoration: none; background: var(--color_bgorange); border: 2px solid var(--color_accent); border-radius: 16px; padding: 30px; text-align: center; overflow: hidden; /* 出現アニメーション初期状態（.animated と同じパターン、transition競合を防ぐため直接定義） */ opacity: 0; transform: scale(0.8); transform-origin: center center; transition: box-shadow 0.3s ease, opacity 0.8s cubic-bezier(0.65, 0.05, 0.36, 1), transform 0.8s cubic-bezier(0.65, 0.05, 0.36, 1); } .top-service-card.is-visible { opacity: 1; transform: scale(1); } .top-service-card:hover { box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.10); } /* 右下：オレンジ四角（左から出現・右に消える） */ .top-service-card::after { content: ''; position: absolute; bottom: 16px; right: 16px; width: 52px; height: 52px; background: var(--color_accent); border-radius: 16px; transform: scale(0); transform-origin: right top; /* ホバーアウト：右上に向かって縮む */ transition: transform 0.3s ease 0.15s; z-index: 1; } /* 右下：白矢印（左下から出現・右上に縮む） */ .top-service-card::before { content: ''; position: absolute; bottom: 16px; right: 16px; width: 52px; height: 52px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 203.27 203.27'%3E%3Cpolyline points='43.99 15 166.17 37.1 188.27 159.28' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3Cline x1='166.15' y1='37.12' x2='15' y2='188.27' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3C%2Fsvg%3E"); background-size: 50%; background-repeat: no-repeat; background-position: center; transform: scale(0); transform-origin: right top; /* ホバーアウト：右上に向かって縮む */ transition: transform 0.15s ease 0s; z-index: 2; } .top-service-card:hover::after { transform: scale(1); transform-origin: left bottom; /* ホバーイン：左下から広がる */ transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0s; } .top-service-card:hover::before { transform: scale(1); transform-origin: left bottom; /* ホバーイン：左下から広がる */ transition: transform 0.3s ease 0.2s; } .top-service-card__name { font-size: 1.3rem; font-family: "Zen Kaku Gothic New", sans-serif; color: #333; margin-bottom: 10px; } .top-service-card__img-wrap { overflow: hidden; } .top-service-card__img-wrap img { width: 100%; max-width: 400px; height: auto; display: block; margin: 0 auto; transition: transform 0.4s ease; } .top-service-card:hover .top-service-card__img-wrap img { transform: scale(1.1); } @media (max-width: 959px) { .top-service { padding: 80px 0; } .top-service-grid { grid-template-columns: 1fr; } /* SP：カード右下の矢印（オレンジ四角＋白矢印）を1回り小さく */ .top-service-card::after, .top-service-card::before { width: 40px; height: 40px; } } /* ========================================================= 12. トップ - ご支援事例 (.top-case) ========================================================= */ .top-case { text-align: center; position: relative; margin: 40px 0 !important; padding: var(--space-l) 0; } /* section-inner の幅・余白 */ .top-case .section-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* 背景：薄オレンジ + 角丸 + シャドウ */ .top-case::before { content: ""; display: block; position: absolute; top: 0; left: 0; background-color: var(--color_bgorange); margin: 20px; border-radius: 16px; height: calc(100% - 40px); width: calc(100% - 40px); box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.10); z-index: -1; /* 初期状態：縮んで非表示 */ opacity: 0; transform: scale(0.88); transform-origin: center center; transition: transform 0.9s cubic-bezier(0.65, 0.05, 0.36, 1), opacity 0.7s ease; } .top-case.is-revealed::before { transform: scale(1); opacity: 1; } .top-case-list .p-postList__thumb { box-shadow: unset; } .p-postList__thumb::before { background: unset; } /* ---- 主なプロジェクト（.top-projects） ---------------------- ご支援事例セクション内、お客様の声カードの上に配置する白パネル */ .top-projects { width: calc(100% - 96px); /* 左右に余白を確保し、ご支援事例のオレンジ背景を覗かせる */ max-width: 960px; margin: 56px auto 0; padding: 40px 44px; background: #fff; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); text-align: left; } /* ヘッダー全体の下に、リストと同じ幅の1px下線（アクセントカラー） */ .top-projects-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--color_accent); } /* タイトル：黒字 */ .top-projects-title { margin: 0; font-size: 1.4rem; font-weight: 700; color: var(--color_black); } .top-projects-note { font-size: 0.8rem; font-weight: 500; color: #777777; } .top-projects-list { list-style: none; /* SWELL が .post_content ul に付ける余白を打ち消し、見出し下線と左端を揃える */ margin: 0 !important; padding: 0 !important; } .top-project { padding: 20px 0; border-bottom: 1px dashed #E8DACF; } .top-project:last-child { padding-bottom: 0; border-bottom: none; } .top-project-cat { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.05rem; font-weight: 700; color: var(--color_accent); } /* カテゴリ名の前の縦バー（シンプルな見出しマーカー） */ .top-project-cat::before { content: ""; flex-shrink: 0; width: 4px; height: 1.1em; border-radius: 2px; background: var(--color_accent); } /* 実績先：多段組グリッド（プレーンテキスト） SWELL の .post_content ul 余白を打ち消し、カテゴリ見出しの下に控えめにインデント */ .top-project-clients { list-style: none; margin: 0 !important; padding: 0 0 0 14px !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 24px; } .top-project-clients li { position: relative; padding-left: 14px; font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--color_black); /* SWELL が入れ子ul の li に付けるネイティブマーカー（白丸）を打ち消す */ list-style: none !important; } /* 各実績先の頭の小さなドット（リストであることを示す控えめな印） */ .top-project-clients li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--color_lightorange); } /* 長い項目（補足説明つき）は全幅で1行使う */ .top-project-clients li.is-wide { grid-column: 1 / -1; } /* 「…等」など補足表記は控えめに（ただし読める濃さに）・右寄せ */ .top-project-clients li.is-more { grid-column: 1 / -1; text-align: right; padding-left: 0; color: #777777; } .top-project-clients li.is-more::before { content: none; } @media (max-width: 959px) { .top-projects { width: calc(100% - 16px); /* スマホは余白を小さめに */ margin-top: 40px; padding: 26px 20px; } .top-projects-title { font-size: 1.2rem; } .top-project { padding: 16px 0; } .top-project-cat { font-size: 1.05rem; } .top-project-clients { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 16px; } .top-project-clients li { font-size: 1rem; } } /* ---- 支援実績マップ（.top-case-map） ---------------------- 主なプロジェクトパネルの最下部に置く鳥瞰図画像。 タップで拡大表示（lightbox）— JSは common.js の 4-E。 */ .top-case-map { margin: 28px 0 0; } /* 画像トリガー：ボタンとしてのデフォルト装飾を消し、画像のみ表示 */ .top-case-map-trigger { position: relative; display: block; width: 100%; padding: 0; margin: 0; background: transparent; border: none; cursor: zoom-in; transition: opacity 0.2s ease; } .top-case-map-trigger:hover { opacity: 0.92; } .top-case-map-trigger img { display: block; width: 100%; height: auto; border-radius: 8px; } /* 拡大ヒント：PCではホバー時に右下表示、スマホでは常時表示 */ .top-case-map-zoom-hint { position: absolute; right: 12px; bottom: 12px; padding: 6px 14px; background: rgba(237, 119, 0, 0.92); color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; border-radius: 100px; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .top-case-map-trigger:hover .top-case-map-zoom-hint { opacity: 1; } @media (max-width: 959px) { .top-case-map { margin-top: 20px; } .top-case-map-zoom-hint { opacity: 1; } /* スマホは常時表示 */ } /* ---- 画像ライトボックス（.c3i-image-lightbox） --------------- common.js の 4-E で動的に body 直下に作成・削除される */ .c3i-image-lightbox { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center; padding: 60px 24px 24px; } .c3i-image-lightbox-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.85); cursor: zoom-out; } .c3i-image-lightbox img { position: relative; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #fff; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); animation: c3i-lightbox-in 0.25s ease; } .c3i-image-lightbox-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; background: #fff; border: none; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1; transition: opacity 0.2s ease; } .c3i-image-lightbox-close:hover { opacity: 0.85; } @keyframes c3i-lightbox-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* ---- ご支援事例スライダー（Splide） ---- */ .c3i-slider-wrapper { margin: 40px auto 0; max-width: 1200px; padding: 0 20px; position: relative; overflow: hidden; /* ループクローンのはみ出しを防ぐ */ } /* ページネーション用の底部余白 */ .c3i-slider-wrapper .splide { padding-bottom: 40px; } /* SWELLのCSSがトラックのoverflowを上書きする場合に備えて明示指定 */ .c3i-slider-wrapper .splide__track { overflow: hidden !important; } /* 六角形マスク */ .c3i-slide-thumb { width: 100%; aspect-ratio: 1 / 1; position: relative; overflow: hidden; -webkit-mask-image: url('https://c3i.jp/wordpress/wp-content/uploads/2026/02/c3i-hexagonx4.png'); mask-image: url('https://c3i.jp/wordpress/wp-content/uploads/2026/02/c3i-hexagonx4.png'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transform: translateZ(0); } .c3i-slide-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .c3i-slide-link:hover .c3i-slide-thumb img { transform: scale(1.1); } .c3i-slide-body { margin-top: 15px; text-align: center; } .c3i-slide-title { font-size: 1.2rem; font-weight: 500; line-height: 1.5; color: #333; letter-spacing: 0.1px; margin: 0; } /* ---- Splide 矢印カスタマイズ ---- */ /* 矢印：スライドタイトル下・ページネーション上に配置 */ .c3i-slider-wrapper .splide__arrow { position: absolute !important; top: auto !important; bottom: 44px !important; transform: none !important; background: transparent !important; border: 2px solid var(--color_accent) !important; width: 50px !important; height: 50px !important; border-radius: 50% !important; opacity: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background 0.3s ease !important; } .c3i-slider-wrapper .splide__arrow:hover { background: rgba(237, 119, 0, 0.1) !important; } .c3i-slider-wrapper .splide__arrow svg { fill: var(--color_accent) !important; width: 18px !important; height: 18px !important; transition: fill 0.3s ease !important; } /* ========================================================= 13. トップ - 新着情報 (.top-topics) ========================================================= */ .top-topics { text-align: center; padding: 120px 0; } .top-topics .section-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 60px; } .top-topics-list { border: 2px solid var(--color_accent); border-radius: 16px; padding: 36px 40px; margin-bottom: 1rem !important; } /* SWELLデフォルトのボーダーを非表示 */ .p-postList.-type-simple { border-top: unset; } .-type-simple .p-postList__link { border-bottom: unset; letter-spacing: 0.1px; } /* 時計アイコン非表示 */ .icon-posted::before { content: unset; } /* 日付幅・横並び */ .p-postList__meta { width: 200px; } .p-postList__body { display: flex; align-items: center; } .p-postListWrap, .c-postTimes__posted { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; font-size: 1.1rem !important; } .p-postList__cat { font-weight: 500; font-size: 1rem; color: var(--color_accent); } /* タイトルのすぐ右に矢印（inline-block で文末に配置） */ .top-topics-list .p-postList__title::after { content: ''; display: inline-block; vertical-align: middle; margin-left: 8px; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 203.27 203.27'%3E%3Cpolyline points='43.99 15 166.17 37.1 188.27 159.28' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3Cline x1='166.15' y1='37.12' x2='15' y2='188.27' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3C%2Fsvg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; transform: scale(0); transform-origin: right top; /* ホバーアウト：右上に消える */ transition: transform 0.3s; /* ホバーアウト */ } .-type-simple .p-postList__link:hover { background-color: transparent !important; opacity: 0.8 !important; } .p-postList__link:hover .p-postList__title { color: var(--color_accent); } .top-topics-list .p-postList__link:hover .p-postList__title::after { transform: scale(1); transform-origin: left bottom; /* ホバーイン：左下から出現 */ transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } /* 「もっと見る」ボタンを右寄せ（フロー内で配置） */ .btn-topics { justify-content: flex-end; margin-top: 16px; margin-bottom: 0; } @media (max-width: 959px) { .top-topics { padding: 80px 0; } .top-topics .section-inner { padding-inline: 24px; } .top-topics-list { padding: 20px 20px; } .p-postList__body { align-items: flex-start; flex-direction: column; } .p-postList__meta { flex-direction: row; width: unset; } .p-postList__title { text-align: left; } .btn-topics { justify-content: center; } } /* ========================================================= 14. トップ - 採用情報 (.top-recruit) ========================================================= */ .top-recruit { padding: 120px 0; } /* 見出しエリア：中央揃え（カラムの外） */ .top-recruit-heading { text-align: center; padding: 0 60px; margin-bottom: 40px; } .top-recruit-heading h3 { margin-bottom: 8px; } .top-recruit-heading h2 { margin-bottom: 0; } .top-recruit-heading .text { justify-content: center; } .top-recruit-inner { display: flex; align-items: center; max-width: 1100px; margin: 0 auto; padding: 0 60px; gap: 20px; } .top-recruit-text { flex: 0 0 35%; min-width: 0; } .top-recruit-text .main-p { margin-bottom: 32px; } .top-recruit-text .btn-container { justify-content: center; } .top-recruit-illust { flex: 0 0 65%; min-width: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.8); transform-origin: center center; transition: opacity 0.8s cubic-bezier(0.65, 0.05, 0.36, 1), transform 0.8s cubic-bezier(0.65, 0.05, 0.36, 1); } .top-recruit-illust.is-visible { opacity: 1; transform: scale(1); } .recruit-illust { width: 90%; max-width: 90%; display: block; margin: 0 auto; animation: mvIllustFloat 5.0s ease-in-out 0.8s infinite; } @media (max-width: 959px) { .top-recruit { padding: 80px 0; } .top-recruit-heading { padding: 0 24px; } .top-recruit-inner { flex-direction: column; padding: 0 24px; gap: 32px; } .top-recruit-text, .top-recruit-illust { flex: none; width: 100%; } .top-recruit-illust .recruit-illust { width: 100%; max-width: 420px; } .top-recruit-text .main-p { text-align: center; } } /* ========================================================= 15. 共通 - お問い合わせ ========================================================= */ /* reCAPTCHAバッジ非表示 */ .grecaptcha-badge { visibility: hidden; } #cf-tbl { width: 800px; font-weight: 400; } #cf-tbl table tr th, #cf-tbl table tr td { text-align: left; vertical-align: middle; } #cf-tbl table tr th { width: 35%; } .post_content td, .post_content th { border: unset; background-color: unset; } input.wpcf7-text, textarea.wpcf7-textarea { border-radius: 15px; border: 1px solid #333; color: #333; background-color: unset; padding: 5px 10px; width: 100%; max-width: 400px; } span.wpcf7-not-valid-tip, .wpcf7-response-output.wpcf7-validation-errors { color: red; font-weight: 600; } @media screen and (max-width: 768px) { #cf-tbl { width: 100%; } #cf-tbl table, #cf-tbl table tbody, #cf-tbl table tr, #cf-tbl table tr th, #cf-tbl table tr td { display: block; } #cf-tbl table { width: 100%; } #cf-tbl table tr th, #cf-tbl table tr td { width: 100%; padding: 3% 5%; } input.wpcf7-text, textarea.wpcf7-textarea { max-width: 100%; } } /* ========================================================= 16. ページ共通（内部ページ） ========================================================= */ .l-mainContent__inner > .post_content { margin: 0; } .c-pageTitle { display: none; } /* ページトップボタン非表示 */ .p-fixBtnWrap { display: none !important; } /* ページMV */ .page-mv { min-height: 400px; height: auto; position: relative; padding: 160px 0 !important; overflow: hidden; } .page-mv::before { content: ""; display: block; position: absolute; top: 0; left: 0; background-color: var(--color_bgorange); margin: 56px 20px; border-radius: 16px; height: calc(100% - 112px); width: calc(100% - 40px); z-index: -1; box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.10); } .page-mv h2 { justify-content: flex-start !important; } .page-mv-lead { margin-top: 20px; font-size: 1rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: var(--color_black); line-height: 1.8; } /* ページMV インナー（各ページ共通） */ .page-mv-inner, .page-mv .contact-inner, .page-mv .recruit-inner, .page-mv .corp-inner { width: 84%; max-width: 1400px; margin: 0 auto; padding: 0; position: relative; z-index: 2; } /* ---- タブレット（〜959px） ---- */ @media (max-width: 959px) { .page-mv { height: fit-content; padding: 120px 0 100px !important; } .page-mv::before { margin: 40px 16px; height: calc(100% - 80px); width: calc(100% - 32px); } .page-mv-3d-floats { top: 40px; bottom: 40px; left: 16px; right: 16px; } .page-mv-inner, .page-mv .recruit-inner, .page-mv .contact-inner, .page-mv .corp-inner { width: 84%; padding: 0 28px; } /* 六角形：縮小して右下に集める */ .pmh--1 { width: 120px; top: auto; bottom: 2%; right: 2%; } .pmh--2 { width: 88px; top: auto; bottom: 18%; right: 16%; } .pmh--3 { width: 66px; top: auto; bottom: 4%; right: 18%; } .pmh--4 { width: 44px; top: auto; bottom: 30%; right: 24%; } .pmh--5 { width: 32px; top: auto; bottom: 22%; right: 30%; } } /* ---- スマートフォン（〜599px） ---- */ @media (max-width: 599px) { /* 長い page-mv h2（自治体DX等）は .text を縦積みにして見切れを防ぐ （.text が1つだけのページは単純に1行のまま） */ .page-mv h2 { flex-direction: column; align-items: flex-start; } .page-mv { padding: 120px 0 100px !important; } .page-mv::before { margin: 32px 12px; height: calc(100% - 64px); width: calc(100% - 24px); } .page-mv-3d-floats { top: 32px; bottom: 32px; left: 12px; right: 12px; } .page-mv-inner, .page-mv .recruit-inner, .page-mv .contact-inner, .page-mv .corp-inner { width: 84%; padding: 0 24px; } /* 六角形：大が右上・小が左下で「右上へ上昇」の対角配置 */ .pmh--1 { width: 88px; top: auto; bottom: 28%; right: 2%; opacity: 0.7; } .pmh--2 { width: 60px; top: auto; bottom: 6%; right: 18%; opacity: 0.55; } .pmh--3 { display: none; } .pmh--4 { display: none; } .pmh--5 { display: none; } } /* ========================================================= 17. サービスページ（ナビ・セクション・カード） ========================================================= */ /* ---- スティッキーナビ ---- */ .service-nav { background: var(--color_white); position: sticky; top: 0; z-index: 100; } .service-nav-inner { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px 16px; width: 84%; max-width: 1400px; margin: 0 auto; padding: 14px 0; } .service-nav-btn { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; font-size: 0.95rem; font-weight: 700; font-family: "Zen Kaku Gothic New", sans-serif; color: var(--color_accent); background: transparent; border: 2px solid var(--color_accent); cursor: pointer; white-space: nowrap; letter-spacing: 0.05em; overflow: hidden; border-radius: 50px; transition: transform 0.3s ease; z-index: 1; } .service-nav-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--color_accent); z-index: 0; transition: width 0.5s ease; } .service-nav-btn span { position: relative; z-index: 1; color: var(--color_accent); transition: color 0.4s ease; } .nav-arrow { position: relative; z-index: 1; width: 14px; height: 14px; display: block; flex-shrink: 0; transition: transform 0.3s ease; } .nav-arrow polyline, .nav-arrow line { stroke: var(--color_accent); transition: stroke 0.4s ease; } .service-nav-btn:hover { transform: translateY(-2px); } .service-nav-btn:hover::before { width: 100%; } .service-nav-btn:hover span { color: #ffffff; } .service-nav-btn:hover .nav-arrow { transform: translateX(6px); } .service-nav-btn:hover .nav-arrow polyline, .service-nav-btn:hover .nav-arrow line { stroke: #ffffff; } .service-nav-btn.active { background: transparent; } /* ---- セクション共通 ---- */ .service-section { padding: var(--space-l) 0; } /* 最初のセクション：上は他ページ先頭セクションと統一 */ #it.service-section { padding: var(--space-m) 0 var(--space-l); } /* 最後のセクション：下を小さく */ #media.service-section--alt { padding: var(--space-l) 0 var(--space-s); } /* 偶数セクションに薄オレンジ背景 */ .service-section--alt { background-color: var(--color_bgorange); } .service-section-inner { width: 84%; max-width: 1400px; margin: 0 auto; padding: 0; } /* ---- セクション見出しを左揃えに（ページ内共通設定を上書き） ---- */ .service-section h2 { justify-content: flex-start !important; } .service-section h2 .text { justify-content: flex-start !important; } /* ---- セクションヘッダー（アイコン + 見出しテキスト） ---- */ .service-section-head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 0; padding-bottom: 0; } .service-section-icon { flex-shrink: 0; width: 64px; height: 64px; } .service-section-icon svg { width: 100%; height: 100%; } .service-section-text { flex: 1; } .service-section-desc { font-size: 1rem; color: #666; line-height: 1.8; margin-top: 16px; margin-bottom: 36px; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; width: 100%; } /* ---- カードグリッド ---- */ .service-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } /* ---- カード ---- */ .service-card { background: var(--color_white); border: 2px solid var(--color_accent); border-radius: 16px; padding: 52px; position: relative; overflow: hidden; display: grid; grid-template-columns: 80px 1fr; column-gap: 40px; align-items: center; opacity: 0; transform: scale(0.88) translateY(12px); transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .service-card.is-scaled { opacity: 1; transform: scale(1) translateY(0); } /* カード左端のオレンジライン */ .service-card::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--color_accent); border-radius: 14px 0 0 14px; } /* 薄オレンジ背景セクション内のカードは白背景で浮かせる */ .service-section--alt .service-card { background: var(--color_white); box-shadow: 0 4px 20px rgba(237, 119, 0, 0.08); } /* カードアイコン（六角形SVG） */ .service-card-icon { width: 80px; height: 80px; flex-shrink: 0; transition: transform 0.35s ease; } /* カードテキストグループ */ .service-card-body { min-width: 0; } .service-card-icon svg { width: 100%; height: 100%; } /* ホバー時：アイコンをふわっと拡大 */ .service-card:hover .service-card-icon { transform: scale(1.12); } .service-card-title { font-size: 32px; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_black); line-height: 1.4; letter-spacing: 0.06em; transition: color 0.3s ease; /* SWELLデフォルトのh4装飾をリセット */ padding: 0 !important; border-left: none !important; margin: 0 !important; } /* ホバー時：タイトルをオレンジに */ .service-card:hover .service-card-title { color: var(--color_accent); } .service-card-description { font-size: 15px; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: #666; line-height: 1.9; letter-spacing: 0.04em; margin-top: 10px; } /* ---- カード内リンク（ドローン事業など） ---- */ .service-card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.9rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: var(--color_accent); text-decoration: none; } .service-card-link::after { content: ''; display: inline-block; width: 18px; height: 18px; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 203.27 203.27'%3E%3Cpolyline points='43.99 15 166.17 37.1 188.27 159.28' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3Cline x1='166.15' y1='37.12' x2='15' y2='188.27' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3C%2Fsvg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; transform: scale(0); transform-origin: right top; transition: transform 0.3s; } .service-card-link:hover::after { transform: scale(1); transform-origin: left bottom; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ---- 自治体DX：フィーチャーカード（横長・全幅・リンク） ---- */ .service-card--featured { background: var(--color_white); text-decoration: none; color: inherit; cursor: pointer; transition: background 0.3s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .service-card--featured:hover { background: #FFF8F2; } .service-card--featured .service-card-title { font-size: 1.3rem; display: flex; align-items: center; gap: 8px; } .service-card--featured .service-card-title::after { content: ''; display: inline-block; width: 22px; height: 22px; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 203.27 203.27'%3E%3Cpolyline points='43.99 15 166.17 37.1 188.27 159.28' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3Cline x1='166.15' y1='37.12' x2='15' y2='188.27' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3C%2Fsvg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; transform: scale(0); transform-origin: right top; transition: transform 0.3s; } .service-card--featured:hover .service-card-title::after { transform: scale(1); transform-origin: left bottom; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ---- CTAバナー ---- */ .service-cta { background: var(--color_accent); padding: 80px 24px; text-align: center; position: relative; overflow: hidden; } /* 3D六角形デコレーション */ .service-cta-hex { position: absolute; pointer-events: none; user-select: none; } .service-cta-hex--1 { width: 280px; top: -60px; right: -40px; opacity: 0.25; transform: rotate(15deg); } .service-cta-hex--2 { width: 180px; bottom: -50px; right: 15%; opacity: 0.18; transform: rotate(-10deg); } .service-cta-hex--3 { width: 120px; top: 20px; left: 5%; opacity: 0.15; transform: rotate(25deg); } .service-cta-inner { position: relative; z-index: 1; } .service-cta-title { font-size: clamp(1.3rem, 3vw, 1.8rem); font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_white); margin-bottom: 12px; } .service-cta-desc { font-size: 0.95rem; font-family: "Zen Kaku Gothic New", sans-serif; color: rgba(255, 255, 255, 0.88); margin-bottom: 32px; } .service-cta .btn-effect-5 { border-color: var(--color_white); } .service-cta .btn-effect-5 span { color: var(--color_white); } .service-cta .btn-effect-5::before { background: var(--color_white); } .service-cta .btn-effect-5:hover span { color: var(--color_accent) !important; } /* ---- レスポンシブ ---- */ @media (max-width: 959px) { .service-section { padding: 80px 0; } #it.service-section { padding: 80px 0 100px; } .service-section-inner, .service-nav-inner { width: 92%; } .service-section-head { gap: 14px; } .service-section-icon { width: 44px; height: 44px; } .service-card { grid-template-columns: 60px 1fr; column-gap: 20px; padding: 28px 24px 28px 28px; } .service-card-icon { width: 60px; height: 60px; } .service-nav-btn { padding: 10px 14px; font-size: 0.95rem; } .service-cta { padding: 56px 24px; } } @media (max-width: 450px) { .service-card { grid-template-columns: 1fr; row-gap: 16px; padding: 24px 20px; } .service-card-icon { width: 56px; height: 56px; margin: 0 auto; } .service-card .btn-effect-5 { margin: 0 auto; } } @keyframes serviceFadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= 18. ブログ（single） ========================================================= */ /* パンくずリスト・記事下カテゴリーを非表示 */ #breadcrumb, .p-articleFoot { display: none; } /* モーダル */ body.modal-open { overflow: hidden; } #news { z-index: 9999; } .modal-wata__wrap input { display: none; } .modal-wata__open-label, .modal-wata__close-label { cursor: pointer; } .modal-wata__open-label { display: flex; justify-content: flex-start; align-items: center; margin: 10px 0 5px 150px; padding: .8em 2em; border: none; color: #ffffff; font-weight: 600; font-size: 14px; } .modal-wata__open-label:hover { opacity: 0.7; } .modal-wata { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; display: none; } .modal-wata__open-input:checked + label + input + .modal-wata { display: block; animation: modal-wata-animation .6s; } .modal-wata__content-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60%; max-width: 650px; background-color: #ffffff; z-index: 999; border-radius: 5px; } .modal-wata__close-label { background-color: #A5A9AA; color: #fff; border: 2px solid #fff; border-radius: 20px; width: 36px; height: 36px; line-height: 1.6; text-align: center; display: table-cell; position: fixed; top: -15px; right: -2%; z-index: 99999; font-size: 1.3em; } .modal-wata__content { max-height: 64vh; overflow-y: auto; padding: 39px 45px 40px; font-size: 14px; } .modal-wata__background { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.45); z-index: 998; } @keyframes modal-wata-animation { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 599px) { .modal-wata__open-label { max-width: 100%; margin: 10px 0 5px 0; padding: .5em; } .modal-wata__content-wrap { width: 80vw; } .modal-wata__content { padding: 33px 21px 35px; max-height: 70vh; max-width: 100%; } .modal-wata__close-label { top: -17px; right: -4%; font-size: unset; } } /* ========================================================= 18-B. お知らせ記事ページ（single - topics） page-mv（一覧と同じヒーロー）+ 白背景の記事レイアウト ※ page-mv は common.js から自動挿入される ========================================================= */ /* page-mv：.l-content の左右パディング分だけネガティブマージンで拡張。 .l-content 自体がほぼ可視領域全幅なので、これで visible 全幅になる。 .post_content クラス由来の max-width: 100% も打ち消す。 単一記事（.p-articleHead）と タームアーカイブ（.p-termContent）の両方に適用。 */ .l-content:has(:is(.p-articleHead, .p-termContent)) > .page-mv { width: calc(100% + 96px); /* l-content の左右 padding 48px × 2 ぶん広げる */ max-width: none; margin-left: -48px; margin-right: -48px; } /* 記事ページ・アーカイブの .l-content 上余白を削除（page-mv をヘッダー直下に詰める） */ .l-content:has(:is(.p-articleHead, .p-termContent)) { padding-top: 0 !important; } /* page-mv が JS で挿入される前にフッターが一瞬見えるのを防ぐ。 page-mv が DOM に追加された瞬間に :not(:has(.page-mv)) が外れ、 この min-height ルールは自動的に解除される。 */ .l-content:has(:is(.p-articleHead, .p-termContent)):not(:has(.page-mv)) { min-height: 100vh; } /* カテゴリーアーカイブの main を .l-content の左右パディングぶん広げて、 topics ページと同じ「visible 全幅」を基準に 84%/1400px を取れるようにする。 page-mv と同じネガティブマージン breakout 手法。 PCのサイドバーレイアウト時のみ必要なので min-width: 960px で囲む。 */ @media (min-width: 960px) { .l-mainContent.l-article:has(.p-termContent) { width: calc(100% + 96px) !important; /* l-content の左右 padding 48px × 2 */ margin-left: -48px !important; margin-right: -48px !important; max-width: none !important; padding: 0 !important; } .l-mainContent.l-article:has(.p-termContent) .c-tabBody, .l-mainContent.l-article:has(.p-termContent) .c-tabBody__item { width: 100%; max-width: none; padding-left: 0; padding-right: 0; } } @media (max-width: 959px) { /* モバイルでは .l-content の左右 padding が小さくなる想定 */ .l-content:has(:is(.p-articleHead, .p-termContent)) > .page-mv { width: calc(100% + 48px); margin-left: -24px; margin-right: -24px; } /* SPでは main の breakout を一切適用せず、SWELLデフォルトのままにする。 これで .l-mainContent の幅／padding が ALLページの /topics/ と一致し、 .p-termContent 92% も .topics-inner 92% と同じ視覚幅になる。 */ } /* 記事本体：白背景、中央寄せ、最大幅。表示順を flex order で入れ替え */ .l-article:has(.p-articleHead) .l-mainContent__inner { display: flex; flex-direction: column; max-width: 880px; margin: 0 auto; padding: 60px 24px var(--space-m); } .l-article:has(.p-articleHead) .p-articleMetas.-top { order: 1; } .l-article:has(.p-articleHead) .p-articleHead { order: 2; } .l-article:has(.p-articleHead) .l-mainContent__inner .post_content { order: 3; } .l-article:has(.p-articleHead) .l-articleBottom { order: 4; } /* 上部メタ：カテゴリピル + 日付 */ .l-article:has(.p-articleHead) .p-articleMetas.-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0 0 14px; } /* メタの並び順：日付 → カテゴリ（topics 一覧と同じ順序） */ .l-article:has(.p-articleHead) .p-articleMetas__times { order: 1; } .l-article:has(.p-articleHead) .p-articleMetas__termList { order: 2; } /* 日付：topics 一覧と同じ装飾（プレーンテキスト、SWELLのアイコンは非表示） */ .l-article:has(.p-articleHead) .p-articleMetas__times { display: flex; align-items: center; gap: 14px; margin: 0; font-size: 1rem; color: var(--color_black); font-weight: 500; font-family: "Zen Kaku Gothic New", sans-serif; } .l-article:has(.p-articleHead) .c-postTimes__posted::before { content: none !important; margin: 0 !important; } .l-article:has(.p-articleHead) .c-postTimes__modified { font-size: 0.85rem; color: #999; } .l-article:has(.p-articleHead) .c-postTimes__modified::before { content: "更新 " !important; margin: 0 !important; background: none !important; width: auto !important; height: auto !important; } /* カテゴリ：ピル装飾を解除して topics 一覧と同じテイスト （オレンジ文字 + フォルダアイコン。アイコンは SWELL が親要素の .p-articleMetas__termList::before で出力済みなので追加不要） */ .l-article:has(.p-articleHead) .p-articleMetas__termList { margin: 0; padding: 0; transition: opacity 0.2s ease; cursor: pointer; } /* フォルダアイコン：SWELL の Font Awesome を上書きして、丸みのあるカスタムSVGに差し替え。 単一記事ページ・お知らせ一覧（.topics-inner）・カテゴリーアーカイブ（.p-termContent） の3か所すべてに同じアイコンを適用。 */ .l-article:has(.p-articleHead) .p-articleMetas__termList::before, .topics-inner .p-postList__cat.icon-folder::before, .p-termContent .p-postList__cat.icon-folder::before { content: '' !important; display: inline-block !important; width: 18px !important; height: 18px !important; font-size: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' fill='%23ed7700'%3E%3Cpath d='M2 4c0-1.105.895-2 2-2h5l2 2h9c1.105 0 2 .895 2 2v10c0 1.105-.895 2-2 2H4c-1.105 0-2-.895-2-2V4z'/%3E%3C/svg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; vertical-align: middle !important; } /* 単一記事ページ：アイコンとカテゴリ名はぴったり */ .l-article:has(.p-articleHead) .p-articleMetas__termList::before { margin-right: 0 !important; } /* 一覧ページ：アイコンとカテゴリ名の間に少し余白 + 上下中央寄せ （SWELL の .p-postList__cat が baseline 揃いになるのを inline-flex で打ち消す） */ .topics-inner .p-postList__cat.icon-folder, .p-termContent .p-postList__cat.icon-folder { display: inline-flex !important; align-items: center !important; } .topics-inner .p-postList__cat.icon-folder::before, .p-termContent .p-postList__cat.icon-folder::before { margin-right: 4px !important; } /* フォルダアイコン部分にホバーしてもリンクと同じ動きに */ .l-article:has(.p-articleHead) .p-articleMetas__termList:hover { opacity: 0.7; } .l-article:has(.p-articleHead) .c-categoryList__link, .l-article:has(.p-articleHead) .c-categoryList__link:hover, .l-article:has(.p-articleHead) .c-categoryList__link.hov-flash-up, .l-article:has(.p-articleHead) .c-categoryList__link.hov-flash-up:hover { display: inline-flex; align-items: center; padding: 0 !important; font-size: 1rem; font-weight: 500; color: var(--color_accent) !important; letter-spacing: 0; line-height: 1.5; border: none !important; background: transparent !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; font-family: "Zen Kaku Gothic New", sans-serif; transition: opacity 0.2s ease; overflow: visible !important; } /* SWELL の hov-flash-up（背景フラッシュ）pseudo を完全に消す */ .l-article:has(.p-articleHead) .c-categoryList__link::before, .l-article:has(.p-articleHead) .c-categoryList__link::after, .l-article:has(.p-articleHead) .c-categoryList__link:hover::before, .l-article:has(.p-articleHead) .c-categoryList__link:hover::after, .l-article:has(.p-articleHead) .c-categoryList__link.hov-flash-up::before, .l-article:has(.p-articleHead) .c-categoryList__link.hov-flash-up::after, .l-article:has(.p-articleHead) .c-categoryList__link.hov-flash-up:hover::before, .l-article:has(.p-articleHead) .c-categoryList__link.hov-flash-up:hover::after { display: none !important; content: none !important; background: none !important; border: none !important; box-shadow: none !important; opacity: 0 !important; } .l-article:has(.p-articleHead) .c-categoryList__link:hover { opacity: 0.7 !important; } /* タイトル */ .l-article:has(.p-articleHead) .p-articleHead { margin: 0 0 48px; padding-bottom: 24px; border-bottom: 1px solid var(--color_accent); display: block; } .l-article:has(.p-articleHead) .c-postTitle__ttl { font-size: 1.6rem; font-weight: 700; color: var(--color_black); line-height: 1.55; margin: 0; padding: 0; border: none; text-align: left; } /* 年月日の縦並び表示は非表示 */ .l-article:has(.p-articleHead) .c-postTitle__date { display: none; } /* 本文 */ .l-article:has(.p-articleHead) .l-mainContent__inner .post_content { margin: 0; font-size: 1rem; line-height: 1.9; color: var(--color_black); } .l-article:has(.p-articleHead) .l-mainContent__inner .post_content p { margin: 0 0 1.5em; } .l-article:has(.p-articleHead) .l-mainContent__inner .post_content p:last-child { margin-bottom: 0; } /* 前後記事ナビ：3カラムグリッド（前 / 一覧へ戻る / 次） */ .l-article:has(.p-articleHead) .l-articleBottom { margin-top: 80px; padding-top: 40px; border-top: 1px solid #E8DACF; } .l-article:has(.p-articleHead) .p-pnLinks { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: 1fr auto 1fr !important; gap: 12px !important; align-items: center !important; } .l-article:has(.p-articleHead) .p-pnLinks__item { margin: 0 !important; padding: 0 !important; list-style: none !important; width: auto !important; } .l-article:has(.p-articleHead) .p-pnLinks__item.-prev { grid-column: 1 !important; justify-self: stretch !important; max-width: 320px !important; } .l-article:has(.p-articleHead) .c3i-back-to-list { grid-column: 2 !important; justify-self: center !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } .l-article:has(.p-articleHead) .p-pnLinks__item.-next { grid-column: 3 !important; justify-self: stretch !important; max-width: 320px !important; margin-left: auto !important; } /* SWELL のデフォルト矢印（オレンジの縦帯）は非表示 */ .l-article:has(.p-articleHead) .p-pnLinks__item::before, .l-article:has(.p-articleHead) .p-pnLinks__item::after { display: none !important; content: none !important; } .l-article:has(.p-articleHead) .p-pnLinks__link { position: relative !important; display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 16px 24px !important; width: 100% !important; min-width: 200px !important; background: var(--color_bgorange) !important; border-radius: 12px !important; color: var(--color_black) !important; text-decoration: none !important; transition: background 0.2s ease !important; } .l-article:has(.p-articleHead) .p-pnLinks__item.-prev .p-pnLinks__link { padding-left: 48px !important; } .l-article:has(.p-articleHead) .p-pnLinks__item.-next .p-pnLinks__link { padding-right: 48px !important; text-align: right; } .l-article:has(.p-articleHead) .p-pnLinks__link:hover { background: #F4E5D8 !important; } /* 矢印アイコン（共通の data URL SVG。next はそのまま右向き、prev は 180度回転で左向き） */ .l-article:has(.p-articleHead) .p-pnLinks__item.-prev .p-pnLinks__link::before, .l-article:has(.p-articleHead) .p-pnLinks__item.-next .p-pnLinks__link::before { content: '' !important; position: absolute; top: 50%; width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 243.79 234.04'%3E%3Cpolyline points='158.02 15 228.79 117.02 158.02 219.04' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3Cline x1='228.76' y1='117.02' x2='15' y2='117.02' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; font-size: 0; /* ラベル文字を無効化 */ } .l-article:has(.p-articleHead) .p-pnLinks__item.-prev .p-pnLinks__link::before { left: 16px; transform: translateY(-50%) rotate(180deg); /* 左向き */ } .l-article:has(.p-articleHead) .p-pnLinks__item.-next .p-pnLinks__link::before { right: 16px; transform: translateY(-50%); /* 右向き（デフォルト） */ } .l-article:has(.p-articleHead) .p-pnLinks__title { font-size: 0.92rem; font-weight: 500; line-height: 1.5; color: var(--color_black); } /* 中央：お知らせ一覧へ戻るボタン（common.js で挿入） */ .l-article:has(.p-articleHead) .c3i-back-to-list__link { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: var(--color_accent); border-radius: 100px; color: #fff; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.05em; text-decoration: none; transition: opacity 0.2s ease, transform 0.2s ease; } .l-article:has(.p-articleHead) .c3i-back-to-list__link:hover { opacity: 0.88; transform: translateY(-1px); } @media (max-width: 959px) { .l-article:has(.p-articleHead) .l-mainContent__inner { padding: 60px 20px 80px; } .l-article:has(.p-articleHead) .c-postTitle__ttl { font-size: 1.25rem; } .l-article:has(.p-articleHead) .p-pnLinks { grid-template-columns: 1fr; gap: 10px; } .l-article:has(.p-articleHead) .p-pnLinks__item.-prev, .l-article:has(.p-articleHead) .c3i-back-to-list, .l-article:has(.p-articleHead) .p-pnLinks__item.-next { grid-column: 1; justify-self: stretch; } .l-article:has(.p-articleHead) .p-pnLinks__link { max-width: none; text-align: left !important; } .l-article:has(.p-articleHead) .c3i-back-to-list__link { width: 100%; justify-content: center; } } /* ========================================================= 19. 子ページ ========================================================= */ .page .l-content { padding-top: 0; } .c-pageTitle[data-style=b_bottom] { border-bottom: unset !important; } .c-pageTitle__inner { border-bottom: unset !important; } /* ========================================================= 20. 会社概要ページ ========================================================= */ /* ---- 共通インナー ---- */ .corp-inner { width: 84%; max-width: 1400px; margin: 0 auto; padding: 0; } /* ---- MVV（最初のセクション：下paddingなし） ---- */ .corp-mvv { padding: var(--space-s) 0 var(--space-l); background: var(--color_white); text-align: center; } .corp-mvv-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 40px auto 0; max-width: 1000px; } /* ブランドメッセージ：経営理念とMVVカードの間に表示 */ .corp-brand-message { margin: 32px auto 0; text-align: center; font-size: 1.6rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_accent); letter-spacing: 0.05em; line-height: 1.6; } /* 「Progress as One」だけ少し大きく（em指定でPC/SP共通） */ .corp-brand-message-lead { font-size: 1.15em; } /* ロゴ紹介ブロック：LOGOラベル（上・中央）+ 画像と説明文の2カラム */ .corp-logo-block { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "label label" "image desc"; gap: 24px 48px; align-items: center; margin: 64px auto 0; max-width: 1000px; padding: 0 8px; } /* 「LOGO」ラベル：左右に短いアクセントカラーの線を入れた装飾 */ .corp-logo-label { grid-area: label; justify-self: center; display: flex; align-items: center; gap: 14px; margin: 0; font-size: 1rem; font-family: "Google Sans Flex", "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_accent); letter-spacing: 0.25em; } .corp-logo-label::before, .corp-logo-label::after { content: ''; display: inline-block; width: 32px; height: 1px; background: var(--color_accent); } .corp-logo-image { grid-area: image; width: 240px; } .corp-logo-image img { display: block; width: 100%; height: auto; } .corp-logo-desc { grid-area: desc; margin: 0; text-align: left; font-size: 1rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: var(--color_black); line-height: 1.9; } @media (max-width: 959px) { .corp-brand-message { font-size: 1.2rem; } .corp-logo-block { grid-template-columns: 1fr; grid-template-areas: "label" "image" "desc"; gap: 16px; margin-top: 48px; padding: 0; } .corp-logo-image { width: 180px; justify-self: center; margin: 16px 0; } } .corp-mvv-card { background: var(--color_white); border: 2px solid var(--color_accent); border-radius: 16px; padding: 36px 24px 32px; text-align: center; position: relative; overflow: hidden; opacity: 0; transform: scale(0.88) translateY(12px); transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .corp-mvv-card.is-scaled { opacity: 1; transform: scale(1) translateY(0); } .corp-mvv-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--color_accent); border-radius: 14px 14px 0 0; } .corp-mvv-card:hover { transform: translateY(-3px); transition: transform 0.3s ease; } .corp-mvv-icon { width: 56px; height: 56px; margin: 0 auto 16px; transition: transform 0.35s ease; } .corp-mvv-icon svg { width: 100%; height: 100%; } .corp-mvv-card:hover .corp-mvv-icon { transform: scale(1.12); } .corp-mvv-label { font-size: 1.3rem; font-family: "Google Sans Flex", sans-serif; font-weight: 700; color: var(--color_accent); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 5px; } .corp-mvv-text { font-size: 1.05rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_black); line-height: 1.7; } /* Value カード：5つの項目を横並びに（・なし、項目間に余白） */ .corp-mvv-text--values { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; } .corp-mvv-text--values > span { display: inline-block; } /* ---- ごあいさつ ---- */ .corp-greeting { padding: var(--space-l) 0; background: var(--color_bgorange); text-align: center; } .corp-greeting-layout, .corp-greeting-catch, .corp-greeting-text, .corp-greeting-ceo, .corp-profile-box { text-align: left; } .corp-greeting-layout { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: flex-start; margin-top: 40px; } .corp-photo { width: 100%; aspect-ratio: 1 / 1; background: #ffffff; border-radius: 50%; overflow: hidden; box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.10); display: flex; align-items: center; justify-content: center; color: var(--color_lightorange); font-size: 0.82rem; font-family: "Zen Kaku Gothic New", sans-serif; transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); } .corp-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .corp-greeting-catch { font-size: 1.5rem; font-weight: 700; font-family: "Zen Kaku Gothic New", sans-serif; color: var(--color_black); line-height: 1.7; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 2px solid #EEDFD4; } .corp-greeting-text { font-size: 1.05rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: #555; line-height: 2.1; margin-bottom: 28px; } .corp-greeting-ceo { font-size: 1rem; font-weight: 700; font-family: "Zen Kaku Gothic New", sans-serif; color: var(--color_black); text-align: right; margin-bottom: 24px; } .corp-profile-box { background: var(--color_white); border-radius: 12px; padding: 20px 24px; } .corp-profile-label { font-size: 0.75rem; font-family: "Google Sans Flex", sans-serif; font-weight: 700; color: var(--color_accent); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; } .corp-profile-text { font-size: 0.88rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: #666; line-height: 1.9; } /* ---- 会社概要テーブル ---- */ .corp-overview { padding: var(--space-l) 0; background: var(--color_white); text-align: center; } .corp-table { margin-top: 40px; text-align: left; width: 100%; } .corp-table-row { display: grid; grid-template-columns: 180px 1fr; border-top: 1px solid #EEDFD4; padding: 18px 0; } .corp-table-row:last-child { border-bottom: 1px solid #EEDFD4; } .corp-table-row dt { font-size: 1rem; font-weight: 700; font-family: "Zen Kaku Gothic New", sans-serif; color: var(--color_accent); padding-right: 24px; padding-top: 2px; } .corp-table-row dd { font-size: 1.05rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: var(--color_black); line-height: 1.9; } /* ---- アクセス ---- */ .corp-access { padding: var(--space-l) 0; background: var(--color_white); text-align: center; } .corp-access-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 40px; text-align: left; } .corp-map-wrap { background: var(--color_white); border-radius: 16px; overflow: hidden; border: 2px solid var(--color_accent); } .corp-map-frame { width: 100%; height: 220px; background: #e8e0d8; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 0.82rem; font-family: "Zen Kaku Gothic New", sans-serif; } .corp-map-frame iframe { width: 100%; height: 100%; border: none; display: block; } .corp-map-info { padding: 20px 24px 24px; } .corp-map-title { font-size: 1rem; font-weight: 700; font-family: "Zen Kaku Gothic New", sans-serif; color: var(--color_black); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .corp-map-title::before { content: ''; display: inline-block; width: 10px; height: 10px; background: var(--color_accent); border-radius: 50%; flex-shrink: 0; } .corp-map-address { font-size: 0.88rem; font-style: normal; color: #666; line-height: 1.9; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; } /* ---- CTA（service-ctaを流用） ---- */ .corp-cta { padding: var(--space-m) 24px var(--space-s); background: linear-gradient(135deg, var(--color_accent) 0%, var(--color_logoyellow) 100%); text-align: center; position: relative; overflow: hidden; } .corp-cta::before { content: ''; position: absolute; top: -40px; right: -40px; width: 240px; height: 240px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpolygon points='100,10 168,50 168,130 100,170 32,130 32,50' fill='white' opacity='0.08'/%3E%3C/svg%3E") center/contain no-repeat; } .corp-cta-title { font-size: clamp(1.3rem, 3vw, 1.8rem); font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_white); margin-bottom: 12px; position: relative; z-index: 1; } .corp-cta-desc { font-size: 0.95rem; font-family: "Zen Kaku Gothic New", sans-serif; color: rgba(255, 255, 255, 0.88); margin-bottom: 32px; position: relative; z-index: 1; } .corp-cta .btn-effect-5 { border-color: var(--color_white); position: relative; z-index: 1; } .corp-cta .btn-effect-5 span { color: var(--color_white); } .corp-cta .btn-effect-5::before { background: var(--color_white); } .corp-cta .btn-effect-5:hover span { color: var(--color_accent) !important; } /* ---- レスポンシブ ---- */ @media (max-width: 959px) { .corp-mvv { padding: 80px 0 100px !important; } .corp-inner { width: 92%; } /* SP：ロゴ説明・社長挨拶・会社概要は圧迫感軽減のため他より少し幅を絞る */ .corp-greeting .corp-inner, .corp-overview .corp-inner { width: 86%; } .corp-logo-block { width: 86vw; } /* 親 .corp-inner(92%) 内のため vw で直接指定 */ .corp-mvv-grid { grid-template-columns: 1fr; gap: 16px; } .corp-greeting-layout { grid-template-columns: 1fr; gap: 32px; } .corp-photo { aspect-ratio: 1 / 1; max-width: 400px; margin: 0 auto; } .corp-access-grid { grid-template-columns: 1fr; } .corp-table-row { grid-template-columns: 100px 1fr; gap: 8px; } } /* ========================================================= 21. 採用情報ページ ========================================================= */ /* ---- 共通インナー ---- */ .recruit-inner { width: 84%; max-width: 1400px; margin: 0 auto; padding: 0; } /* ---- イントロ（最初のセクション：下paddingなし） ---- */ /* ---- 求人一覧（見出し＋カード統合セクション） ---- */ .recruit-jobs { padding: var(--space-s) 0 var(--space-l); background: var(--color_white); text-align: center; } .recruit-jobs-grid { display: flex; flex-direction: column; gap: 32px; } /* 求人準備中メッセージ */ .recruit-jobs-comingsoon { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 40px auto 0; max-width: 720px; padding: 60px 40px; text-align: center; background: var(--color_white); border: 2px dashed var(--color_accent); border-radius: 16px; } .recruit-jobs-comingsoon-title { margin: 0; font-size: 1.5rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_accent); letter-spacing: 0.05em; } .recruit-jobs-comingsoon-sub { margin: 0; font-size: 1rem; color: #555; } /* ---- 求人カード（横並び） ---- */ .recruit-job-card { border: 2px solid var(--color_accent); border-radius: 20px; overflow: hidden; background: var(--color_white); display: flex; flex-direction: row; opacity: 0; transform: scale(0.88) translateY(12px); transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease; } .recruit-job-card.is-scaled { opacity: 1; transform: scale(1) translateY(0); } .recruit-job-card.is-scaled:hover { box-shadow: 6px 6px 32px rgba(0, 0, 0, 0.13); transform: translateY(-3px); } /* 左：ソリッドオレンジのヘッダー列 */ .recruit-job-header { background: var(--color_accent); width: 280px; flex-shrink: 0; padding: 36px 32px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; } /* 背景の c3i 六角形（装飾） */ .recruit-job-header::before { content: ''; position: absolute; top: -20px; right: -30px; width: 160px; height: 160px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160.04 160.04'%3E%3Cpath d='M96.17,159.78c3.1.83,7.48-.35,9.75-2.61l51.25-51.25c2.27-2.27,3.44-6.66,2.61-9.75l-18.76-70c-.83-3.1-4.04-6.31-7.14-7.14L63.88.27c-3.1-.83-7.48.35-9.75,2.61L2.88,54.13c-2.27,2.27-3.44,6.66-2.61,9.75l18.76,70c.83,3.1,4.04,6.31,7.14,7.14l70,18.76Z' fill='white' fill-opacity='0.12'/%3E%3C/svg%3E") center/contain no-repeat; pointer-events: none; } .recruit-job-icon { width: 64px; height: 64px; position: relative; z-index: 1; flex-shrink: 0; } .recruit-job-icon svg { width: 100%; height: 100%; } .recruit-job-en { font-size: 0.78rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: rgba(255, 255, 255, 0.75); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; margin-top: auto; position: relative; z-index: 1; } .recruit-job-title { font-size: 1.4rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_white); line-height: 1.5; position: relative; z-index: 1; } /* 右：詳細ボディ（2グリッド） */ .recruit-job-body { flex: 1; padding: 36px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; align-content: start; text-align: left; /* .recruit-jobs の text-align: center を打ち消す */ } /* 勤務先はフル幅 */ .recruit-location { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid #EEDFD4; display: flex; align-items: center; gap: 8px; } /* 各セクション（業務内容・募集要件） */ .recruit-detail-label { font-size: 0.88rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_accent); letter-spacing: 0.08em; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #EEDFD4; } .recruit-detail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .recruit-detail-list li { font-size: 0.95rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: #555; line-height: 1.8; padding-left: 18px; position: relative; } .recruit-detail-list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; background: var(--color_accent); border-radius: 50%; flex-shrink: 0; } .recruit-location-label { font-size: 0.88rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_accent); letter-spacing: 0.06em; } .recruit-location-value { font-size: 0.95rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_black); } /* ---- お問い合わせCTA（2カラム） ---- */ .recruit-contact { background: var(--color_bgorange); padding: 80px 0; } .recruit-contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 40px; } .recruit-contact-text { font-size: 0.95rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: #555; line-height: 2; margin-bottom: 32px; } .recruit-contact-image { width: 100%; aspect-ratio: 4 / 3; background: var(--color_lightorange); border-radius: 16px; overflow: hidden; } .recruit-contact-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---- レスポンシブ ---- */ @media (max-width: 959px) { .recruit-jobs { padding: 80px 0 60px !important; } .recruit-inner { width: 92%; } .recruit-job-card { flex-direction: column; } .recruit-job-header { width: auto; } .recruit-job-icon { margin-bottom: 24px; } .recruit-job-body { grid-template-columns: 1fr; padding: 28px 24px; } .recruit-contact-layout { grid-template-columns: 1fr; gap: 32px; } .recruit-contact-image { aspect-ratio: 16 / 9; } } /* ========================================================= 22. お問い合わせページ ========================================================= */ .contact-inner { max-width: 900px; margin: 0 auto; padding: 0 40px; } /* ---- イントロ（電話番号） ---- */ .contact-intro { padding: var(--space-s) 0 32px; background: var(--color_white); text-align: center; } .contact-intro-lead { font-size: 1rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: #555; line-height: 2; margin-bottom: 32px; } .contact-tel-block { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; background: var(--color_bgorange); border: 1.5px solid #EEDFD4; border-radius: 14px; padding: 24px 48px; text-decoration: none; color: inherit; transition: box-shadow 0.3s ease, transform 0.3s ease; } .contact-tel-block:hover { box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.10); transform: translateY(-2px); } .contact-tel-label { font-size: 0.85rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: #777; } .contact-tel-number { font-size: 1.7rem; font-family: "Google Sans Flex", sans-serif; font-weight: 700; color: var(--color_accent); letter-spacing: 0.05em; text-decoration: none; } .contact-tel-hours { font-size: 0.82rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: #999; } /* ---- フォームセクション ---- */ .contact-form-section { padding: 48px 0 64px; background: var(--color_white); } .contact-form-box { background: var(--color_white); border: 2px solid #EEDFD4; border-radius: 20px; padding: 48px 48px 40px; box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.10); } /* ---- フィールド ---- */ .contact-field { margin-bottom: 24px; } .contact-label { display: block; font-size: 0.9rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_black); margin-bottom: 8px; } .contact-label .required, #cf-tbl th .required { font-size: 0.7rem; font-weight: 700; color: var(--color_white); background: var(--color_accent); border-radius: 4px; padding: 2px 7px; margin-left: 8px; vertical-align: middle; } /* 姓・名の2カラム */ .contact-name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* インプット */ .contact-input, .contact-textarea { width: 100%; border: 1.5px solid #D8CABB; border-radius: 10px; padding: 12px 16px; font-size: 0.95rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: var(--color_black); background: #FEFAF7; transition: border-color 0.2s ease, background 0.2s ease; box-sizing: border-box; appearance: none; } .contact-input:focus, .contact-textarea:focus { outline: none; border-color: var(--color_accent); background: var(--color_white); } .contact-input::placeholder, .contact-textarea::placeholder { color: #bbb; font-weight: 400; } .contact-textarea { height: 160px; resize: vertical; } /* ---- プライバシーポリシー ---- */ .contact-privacy-wrap { margin: 8px 0 32px; } .contact-privacy-label { font-size: 0.88rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_black); margin-bottom: 12px; } .contact-privacy-box { background: var(--color_bgorange); border: 1px solid #EEDFD4; border-radius: 12px; padding: 20px 24px; max-height: 180px; overflow-y: auto; font-size: 0.82rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: #666; line-height: 2; } .contact-privacy-box::-webkit-scrollbar { width: 4px; } .contact-privacy-box::-webkit-scrollbar-track { background: #EEDFD4; border-radius: 2px; } .contact-privacy-box::-webkit-scrollbar-thumb { background: var(--color_lightorange); border-radius: 2px; } /* ---- 送信ボタン ---- */ .contact-submit-wrap { text-align: center; margin-top: 40px; padding-top: 32px; border-top: 1px solid #EEDFD4; } .contact-submit-note { font-size: 0.9rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: #888; margin: 0 auto 20px; text-align: center; } /* CF7 submit: .btn-container > p をボタン本体として使用 */ .contact-submit-wrap .btn-container > p { position: relative; display: inline-flex; align-items: center; padding: 0; margin: 0; border: 2px solid var(--color_accent); border-radius: 50px; overflow: hidden; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; background: transparent; line-height: 1; } /* ホバー塗りつぶし */ .contact-submit-wrap .btn-container > p::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--color_accent); z-index: 0; transition: width 0.5s ease; } /* 矢印アイコン（CSS mask） */ .contact-submit-wrap .btn-container > p::after { content: ''; display: block; flex-shrink: 0; width: 16px; height: 16px; margin-right: 28px; position: relative; z-index: 2; background-color: var(--color_accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 203.27 203.27'%3E%3Cpolyline points='43.99 15 166.17 37.1 188.27 159.28' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3Cline x1='166.15' y1='37.12' x2='15' y2='188.27' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 203.27 203.27'%3E%3Cpolyline points='43.99 15 166.17 37.1 188.27 159.28' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3Cline x1='166.15' y1='37.12' x2='15' y2='188.27' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3C/svg%3E") no-repeat center / contain; transition: background-color 0.4s ease; } /* ホバー時 */ .contact-submit-wrap .btn-container > p:hover { transform: translateY(-2px); box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.10); } .contact-submit-wrap .btn-container > p:hover::before { width: 100%; } .contact-submit-wrap .btn-container > p:hover::after { background-color: #fff; animation: ctaArrowReenter 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } /* wpcf7-spinner をボタン外に出してレイアウトに影響させない */ .contact-submit-wrap .btn-container > p .wpcf7-spinner { position: absolute; right: -36px; top: 50%; transform: translateY(-50%); } /* をラッパー内でテキストのみ担当させる。 のボタンと content 高さを揃えるため line-height: 1.5 を指定。 */ .contact-submit-wrap .btn-container > p input.wpcf7-submit { position: relative; z-index: 2; display: inline-block; width: auto !important; height: auto !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 10px 12px 30px; font-size: 1rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; line-height: 1.5; color: var(--color_accent); cursor: pointer; margin: 0 !important; -webkit-appearance: none; appearance: none; transition: color 0.4s ease; } .contact-submit-wrap .btn-container > p:hover input.wpcf7-submit { color: #fff; } /* （旧 .contact-form-box .wpcf7-submit ルールは削除：上の .contact-submit-wrap ラッパーパターンと競合し、input 単独の :hover で transform が二重に効いて 「テキストだけ動く」不具合の原因になっていたため。submit のスタイルは .contact-submit-wrap .btn-container > p に集約。） */ /* ---- レスポンシブ ---- */ @media (max-width: 959px) { .contact-inner { width: 92%; padding: 0; } .contact-intro { padding: 80px 0 24px !important; } .contact-form-section { padding: 32px 0 48px; } .contact-name-grid { grid-template-columns: 1fr; gap: 12px; } .contact-form-box { padding: 32px 20px; } .contact-tel-block { padding: 20px 24px; width: 100%; box-sizing: border-box; } .contact-tel-number { font-size: 1.4rem; } } /* ========================================================= 23. 自治体DXページ（service-dx.html） ========================================================= */ /* ---- 共通インナー ---- */ .dx-inner { width: 84%; max-width: 1400px; margin: 0 auto; padding: 0; } /* ---- 共感セクション ---- */ .dx-empathy { padding: var(--space-s) 0 var(--space-l); background: var(--color_white); } .dx-empathy-lead { font-size: 1.1rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: #666; margin-bottom: 40px; text-align: center; } /* 悩みリスト */ .dx-pain-list { list-style: none; padding: 0; margin: 0 0 48px; } .dx-pain-item { padding: 18px 0 18px 36px; border-bottom: 1px solid #EEDFD4; font-size: 1.05rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: #444; line-height: 1.7; position: relative; transition-delay: calc(var(--item-index, 0) * 0.08s); } .dx-pain-item:first-child { border-top: 1px solid #EEDFD4; } .dx-pain-item::before { content: ''; position: absolute; left: 0; top: 20px; width: 18px; height: 18px; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='1' y='1' width='18' height='18' rx='3' fill='none' stroke='%23ed7700' stroke-width='1.5'/%3E%3Cpolyline points='4.5,10.5 8.5,14.5 15.5,6' fill='none' stroke='%23ed7700' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } /* 「これらの悩みは」テキスト */ .dx-empathy-bridge { font-size: 1.2rem; font-weight: 700; color: var(--color_black); margin-top: 120px; margin-bottom: 80px; font-family: "Zen Kaku Gothic New", sans-serif; line-height: 1.8; text-align: center; position: relative; } .dx-empathy-bridge-text { display: inline-block; position: relative; padding-bottom: 10px; } .dx-empathy-bridge-text::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: var(--color_accent); border-radius: 2px; transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s; } .dx-empathy-bridge.is-visible .dx-empathy-bridge-text::after { width: 100%; } /* ---- 大きなメッセージブロック（nomal.jp inspired）---- */ .dx-message-block { background: var(--color_bgorange); border-radius: 20px; padding: 64px 56px; margin-bottom: 0; } /* 2カラムレイアウト（テキスト左・画像右） */ .dx-message-layout { display: flex; align-items: center; gap: 56px; } .dx-message-text { flex: 1; min-width: 0; } .dx-message-image { flex: 0 0 44%; max-width: 44%; opacity: 0; transform: scale(0.8); transform-origin: center center; transition: opacity 0.8s cubic-bezier(0.65, 0.05, 0.36, 1), transform 0.8s cubic-bezier(0.65, 0.05, 0.36, 1); } .dx-message-image.is-visible { opacity: 1; transform: scale(1); } .dx-message-image img { width: 100%; height: auto; display: block; } .dx-message-eyebrow { font-size: 0.88rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: #888; margin-bottom: 12px; letter-spacing: 0.05em; } .dx-message-hero { font-size: clamp(2.4rem, 5.5vw, 4rem); font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900; color: var(--color_black); line-height: 1.25; margin-bottom: 4px; } .dx-message-hero-sub { font-size: clamp(1.3rem, 2.8vw, 2rem); font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_black); margin-bottom: 36px; } .dx-accent { color: var(--color_accent); } .dx-message-divider { width: 40px; height: 2px; background: var(--color_accent); margin-top: 36px; margin-bottom: 28px; } .dx-message-body { font-size: 1.05rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: #555; line-height: 2.1; margin-bottom: 28px; } .dx-message-body:last-child { margin-bottom: 0; } /* BPR強調ブロック */ .dx-bpr-block { margin-top: 56px; padding-top: 48px; border-top: 1px solid #EEDFD4; } .dx-bpr-label { font-size: 0.78rem; font-family: "Google Sans Flex", sans-serif; font-weight: 700; color: var(--color_accent); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 16px; } .dx-bpr-catch { font-size: clamp(1.1rem, 2.5vw, 1.6rem); font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900; color: var(--color_black); line-height: 1.6; margin-bottom: 20px; } /* 締めの言葉 */ .dx-empathy-close { text-align: center; padding: 80px 0 0; font-size: 1.15rem; font-weight: 700; font-family: "Zen Kaku Gothic New", sans-serif; line-height: 1.8; } @keyframes charColorOn { from { color: var(--color_black); } to { color: var(--color_accent); } } .dx-empathy-close .cchar { color: var(--color_black); } .dx-empathy-close.is-visible .cchar { animation: charColorOn 0.4s ease forwards; animation-delay: calc(var(--ci, 0) * 0.07s + 0.5s); } /* ---- 事業内容 ---- */ .dx-services { padding: var(--space-l) 0; position: relative; overflow: hidden; } .dx-services::before { content: ''; position: absolute; inset: 0; background: var(--color_bgorange); z-index: 0; opacity: 0; transform: scale(0.88); transform-origin: center center; transition: transform 0.9s cubic-bezier(0.65, 0.05, 0.36, 1), opacity 0.7s ease; } .dx-services.is-revealed::before { transform: scale(1); opacity: 1; } .dx-services .dx-inner { position: relative; z-index: 1; } .dx-service-cards { margin-top: 48px; display: flex; flex-direction: column; gap: 32px; } .dx-service-card { background: var(--color_white); border-radius: 16px; border: 2px solid #EEDFD4; overflow: hidden; opacity: 0; transform: scale(0.88) translateY(12px); transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .dx-service-card.is-scaled { opacity: 1; transform: scale(1) translateY(0); } /* ヘッダー：ソリッドオレンジ（グラデーションなし） */ .dx-service-header { background: var(--color_accent); padding: 50px; display: flex; align-items: center; gap: 20px; } .dx-service-icon { width: 64px; height: 64px; flex-shrink: 0; } .dx-service-icon svg { width: 100%; height: 100%; } .dx-service-name-en { font-size: 0.9rem; font-family: "Google Sans Flex", sans-serif; font-weight: 700; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.14em; text-transform: uppercase; margin: 0; padding-left: 2px; /* 和文「ア」の字面に英字「A」を光学的に揃える */ } .dx-service-name-ja { font-size: 32px; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_white); margin: 0; line-height: 1; /* 余分な行間を詰めて英字ラベルとの間隔を縮める */ } .dx-service-body { padding: 56px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; font-size: 18px; } .dx-service-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .dx-service-list li { font-size: 1rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: #555; line-height: 1.75; padding-left: 18px; position: relative; } .dx-service-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; background: var(--color_accent); border-radius: 50%; flex-shrink: 0; } .dx-service-cta { text-align: center; margin-top: 0; margin-bottom: 24px; } /* CTAボタン：矢印スライド＋ホバーリフト */ .dx-service-cta .btn-effect-5 { transition: transform 0.3s ease; display: inline-flex; align-items: center; gap: 10px; } .cta-arrow { width: 16px; height: 16px; display: block; flex-shrink: 0; } .cta-arrow polyline, .cta-arrow line { stroke: #ed7700; transition: stroke 0.4s ease; } .dx-service-cta .btn-effect-5:hover { transform: translateY(-2px); } .dx-service-cta .btn-effect-5:hover .cta-arrow { animation: ctaArrowReenter 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .dx-service-cta .btn-effect-5:hover .cta-arrow polyline, .dx-service-cta .btn-effect-5:hover .cta-arrow line { stroke: #ffffff; } /* ---- 新着情報 ---- */ .dx-news { padding: var(--space-l) 0; background: var(--color_white); } .dx-news .p-postList.-type-simple, .dx-news-list { border: 2px solid var(--color_accent); border-radius: 16px; padding: 36px 40px; margin-top: 40px; margin-bottom: 1rem !important; } .dx-news .p-postList.-type-simple .p-postList__title::after, .dx-news-list .p-postList__title::after { content: ''; display: inline-block; vertical-align: middle; margin-left: 8px; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 203.27 203.27'%3E%3Cpolyline points='43.99 15 166.17 37.1 188.27 159.28' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3Cline x1='166.15' y1='37.12' x2='15' y2='188.27' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3C%2Fsvg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; transform: scale(0); transform-origin: right top; transition: transform 0.3s; } .dx-news .p-postList.-type-simple .p-postList__link:hover .p-postList__title::after, .dx-news-list .p-postList__link:hover .p-postList__title::after { transform: scale(1); transform-origin: left bottom; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } @media (max-width: 959px) { .dx-news-list { padding: 20px 20px; } } /* ---- ご支援事例 ---- */ .dx-cases { padding: var(--space-l) 0; background: var(--color_bgorange); } /* ---- 支援事例カードグリッド ---- */ .case-cards { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 48px; justify-content: center; } /* トップ - ご支援事例セクション内では .top-projects と 同じ幅に揃える（左右にオレンジ背景が見える形に） */ .top-case .case-cards { width: calc(100% - 96px); max-width: 960px; margin-left: auto; margin-right: auto; } @media (max-width: 959px) { .top-case .case-cards { width: calc(100% - 16px); } } .case-card { flex: 1 1 320px; max-width: 480px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 36px 32px; background: #fff; border: none; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); cursor: pointer; text-align: left; transition: transform 0.25s ease, box-shadow 0.25s ease; } .case-card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12); } /* カード：横並びレイアウト */ .case-card-top { display: flex; align-items: center; gap: 20px; width: 100%; } /* 正円アバター（写真 or シルエット） */ .case-card-avatar { width: 72px; height: 72px; border-radius: 50%; background: #FBF3EE; overflow: hidden; flex-shrink: 0; display: flex; align-items: flex-end; justify-content: center; } .case-card-avatar svg, .case-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .case-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .case-card-tag { font-size: 0.78rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_accent); letter-spacing: 0.08em; margin: 0; padding: 4px 20px; border: 1.5px solid var(--color_accent); border-radius: 100px; align-self: flex-start; /* テキスト幅に合わせる（横いっぱいに伸ばさない） */ } .case-card-name { font-size: 1.1rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_black); line-height: 1.5; margin: 0; } .case-card-more { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: var(--color_accent); margin-top: auto; padding-top: 8px; align-self: flex-end; /* カード内で右寄せ */ } .case-card-more .cta-arrow { width: 20px; height: 20px; flex-shrink: 0; transform: scale(0); transform-origin: right top; transition: transform 0s; } .case-card:hover .case-card-more .cta-arrow { transform: scale(1); transform-origin: left bottom; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ---- モーダル ---- */ .case-modal { display: none; position: fixed; inset: 0; /* #news{z-index:9999} や .page-curtain{z-index:10000} より上に出す */ z-index: 12000; align-items: center; justify-content: center; padding: 80px 24px 24px; /* 上80px = 固定ヘッダーの高さ分を確保 */ } .case-modal.is-open { display: flex; } .case-modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); cursor: pointer; } .case-modal-dialog { position: relative; background: #fff; border-radius: 20px; max-width: 680px; width: 100%; max-height: 80vh; overflow: hidden; /* overflow-y:auto をここから外すことで角丸を保持 */ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both; } /* スクロール領域（ここで overflow を管理） */ .case-modal-scroll { overflow-y: auto; max-height: 80vh; padding: 48px 48px 52px; text-align: left; } @keyframes modalIn { from { opacity: 0; transform: scale(0.92) translateY(16px); } to { opacity: 1; transform: scale(1) translateY(0); } } .case-modal-close { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #ffffff; border: 1px solid currentColor; /* ×と同じ色で細枠（color変更に追従） */ cursor: pointer; color: #888; border-radius: 50%; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .case-modal-close:hover { background: #f5f5f5; color: #333; } .case-modal-close svg { width: 20px; height: 20px; } .case-modal-header { display: flex; align-items: center; gap: 24px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid #EEDFD4; } /* モーダル内の正円アバター */ .case-modal-avatar { width: 88px; height: 88px; border-radius: 50%; background: #FBF3EE; overflow: hidden; flex-shrink: 0; display: flex; align-items: flex-end; justify-content: center; } .case-modal-avatar svg, .case-modal-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .case-modal-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .case-modal-tag { font-size: 0.78rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_accent); letter-spacing: 0.08em; margin: 0 0 10px; padding: 4px 12px; display: inline-block; align-self: flex-start; /* flex 子の stretch を打ち消し、内容幅に */ border: 1.5px solid var(--color_accent); border-radius: 100px; } .case-modal-name { font-size: 1.3rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_black); margin: 0; line-height: 1.5; } .case-modal-body p { font-size: 0.93rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: #555; line-height: 2.0; margin-bottom: 16px; } /* WPブロックエディターの見出し出力にも同スタイルを適用 */ .case-modal-section, .case-modal-body h2, .case-modal-body h3, .case-modal-body h4, .case-modal-body h5 { font-size: 1rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_black); margin: 24px 0 10px; padding-left: 12px; border-left: 3px solid var(--color_accent); line-height: 1.5; } .case-modal-attr { font-size: 0.82rem !important; color: #888 !important; text-align: right; margin-top: 20px !important; } /* WPブロックエディターの ul/ol 出力にも同スタイルを適用 */ .case-modal-list, .case-modal-body ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .case-modal-list li, .case-modal-body ul li { font-size: 0.93rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: #555; line-height: 1.8; padding-left: 20px; position: relative; } .case-modal-list li::before, .case-modal-body ul li::before { content: "・"; position: absolute; left: 0; color: var(--color_accent); } @media (max-width: 959px) { .case-card { flex: 1 1 100%; max-width: 100%; } .case-modal-scroll { padding: 32px 24px 36px; } } /* ---- よくあるご質問 ---- */ .dx-faq { padding: var(--space-l) 0; background: var(--color_white); } .dx-faq-list { margin-top: 48px; } .dx-faq-item { border-bottom: 1px solid #EEDFD4; } .dx-faq-item:first-child { border-top: 1px solid #EEDFD4; } .dx-faq-q { width: 100%; display: flex; align-items: center; gap: 16px; padding: 22px 4px; background: none; border: none; cursor: pointer; text-align: left; font-size: 0.95rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_black); line-height: 1.6; transition: color 0.2s ease; } .dx-faq-q:hover { color: var(--color_accent); } .dx-faq-q-mark { flex-shrink: 0; width: 28px; height: 28px; background: var(--color_accent); color: var(--color_white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-family: "Google Sans Flex", sans-serif; font-weight: 700; } .dx-faq-q-text { flex: 1; } .dx-faq-toggle { flex-shrink: 0; width: 22px; height: 22px; position: relative; } .dx-faq-toggle::before, .dx-faq-toggle::after { content: ''; position: absolute; background: var(--color_accent); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } .dx-faq-toggle::before { width: 100%; height: 2px; top: 10px; left: 0; } .dx-faq-toggle::after { width: 2px; height: 100%; top: 0; left: 10px; } .dx-faq-item.is-open .dx-faq-toggle::after { transform: scaleY(0); opacity: 0; } .dx-faq-a { overflow: hidden; max-height: 0; transition: max-height 0.4s ease; } .dx-faq-item.is-open .dx-faq-a { max-height: 500px; } .dx-faq-a-inner { padding: 0 4px 24px 44px; font-size: 0.9rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: #555; line-height: 2; } /* ---- DX専用フォーム ---- */ .dx-form-section { padding: var(--space-m) 0 var(--space-s); background: var(--color_white); } /* selectフィールド */ .contact-select { width: 100%; border: 1.5px solid #D8CABB; border-radius: 10px; padding: 12px 16px; font-size: 0.95rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: var(--color_black); background: #FEFAF7; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ED7700' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; cursor: pointer; transition: border-color 0.2s ease; box-sizing: border-box; } .contact-select:focus { outline: none; border-color: var(--color_accent); } /* ---- レスポンシブ ---- */ @media (max-width: 959px) { .dx-empathy { padding: 80px 0 100px !important; } .dx-inner { width: 92%; padding: 0; } .dx-message-block { padding: 40px 24px; } .dx-message-layout { flex-direction: column; gap: 32px; } .dx-message-image { flex: none; max-width: 100%; width: 100%; } .dx-message-hero { font-size: 2.2rem; } .dx-message-hero-sub { font-size: 1.2rem; } .dx-bpr-catch { font-size: 1.1rem; } .dx-service-body { grid-template-columns: 1fr; gap: 24px; } .dx-service-cta { margin-top: 0; } .dx-service-header { padding: 24px 20px; } .dx-service-body { padding: 24px 20px 28px; } .dx-service-name-ja { font-size: 21px; } /* SP：カード名を縮小（32px→21px） */ .dx-service-list li { font-size: 1.1rem; } /* SP：内容リストを拡大 */ } /* ---- DX セクション見出し 中央揃え ---- */ /* h3 は SWELL が inline-block にするので親に text-align: center が必要 */ .dx-services, .dx-news, .dx-cases, .dx-faq, .dx-form-section { text-align: center; } /* カード・リスト等のコンテンツは左揃えに戻す */ .dx-service-card, .dx-service-list, .dx-news-list, .dx-faq-list, .dx-form-section form, .dx-form-section .contact-lead { text-align: left; } /* h2 の .text（flex コンテナ）を中央揃え */ .dx-empathy h2 .text, .dx-services h2 .text, .dx-news h2 .text, .dx-cases h2 .text, .dx-faq h2 .text, .dx-form-section h2 .text { justify-content: center; } /* ---- SWELLに干渉されないスケールアップ（.dx-scale-in） ---- */ .dx-scale-in { opacity: 0; transform: scale(0.92); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.34, 1.2, 0.64, 1); } .dx-scale-in.is-revealed { opacity: 1; transform: scale(1); } /* ========================================================= 24. ページトランジション（入場・退場） ───────────────────────────────────────────────────────── ▼ 元に戻す場合：このブロックをまるごと削除し、 common.js のセクション 7 も削除してください ========================================================= */ /* 入場カーテン（薄オレンジが下→上にスイープ） */ .page-curtain { position: fixed; inset: 0; background: var(--color_bgorange); z-index: 10000; pointer-events: none; transform: translateY(100%); } .page-curtain.is-in { animation: curtainEnter 1.0s cubic-bezier(0.76, 0, 0.24, 1) forwards; } @keyframes curtainEnter { 0% { transform: translateY(100%); } 42% { transform: translateY(0%); } 100% { transform: translateY(-100%); } } /* 退場フェード（ヘッダー以外） */ @keyframes contentFadeOut { to { opacity: 0; } } .is-leaving { animation: contentFadeOut 0.35s ease-in forwards; } /* ▲ ページトランジション ここまで ====================== */ /* ========================================================= 24. Contact Form 7（#cf-tbl） ========================================================= */ /* ---- ラッパー ---- */ #cf-tbl { background: var(--color_white); border: 2px solid #EEDFD4; border-radius: 20px; padding: 48px 48px 40px; margin-bottom: 32px; } /* ---- テーブル ---- */ #cf-tbl table { width: 100%; border-collapse: collapse; table-layout: fixed; } #cf-tbl tr { border-bottom: 1px solid #EEDFD4; } #cf-tbl tr:first-child { border-top: 1px solid #EEDFD4; } /* ---- ラベル（th） ---- */ #cf-tbl th { width: 220px; padding: 20px 24px 20px 0; font-size: 0.9rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: var(--color_black); vertical-align: middle; text-align: left; white-space: nowrap; } /* ---- 入力セル（td） ---- */ #cf-tbl td { padding: 14px 0; vertical-align: middle; overflow: hidden; } /* CF7が

を挿入する場合のリセット */ #cf-tbl td p { margin: 0; padding: 0; display: block; width: 100%; } /* CF7のラッパーspanをblock化してwidthが効くようにする */ #cf-tbl .wpcf7-form-control-wrap { display: block; width: 100%; } /* ---- 入力フィールド共通 ---- */ #cf-tbl .wpcf7-form-control:not(.wpcf7-submit) { width: 100%; max-width: 100%; border: 1.5px solid #D8CABB; border-radius: 10px; padding: 12px 16px; font-size: 0.95rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: var(--color_black); background: #FEFAF7; transition: border-color 0.2s ease, background 0.2s ease; box-sizing: border-box; -webkit-appearance: none; appearance: none; } #cf-tbl .wpcf7-form-control:not(.wpcf7-submit):focus { outline: none; border-color: var(--color_accent); background: var(--color_white); } #cf-tbl input::placeholder, #cf-tbl textarea::placeholder { color: #bbb; font-weight: 400; } /* ---- select（ドロップダウン矢印） ---- */ #cf-tbl .wpcf7-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23B5A59A'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 10px 6px; padding-right: 38px; } /* ---- textarea ---- */ #cf-tbl .wpcf7-textarea { height: 160px; resize: vertical; } /* ---- バリデーションエラー ---- */ #cf-tbl .wpcf7-not-valid { border-color: #e74c3c !important; background: #fff5f5 !important; } .wpcf7-not-valid-tip { display: block; color: #e74c3c; font-size: 0.78rem; font-family: "Zen Kaku Gothic New", sans-serif; margin-top: 6px; } /* ---- 送受信メッセージ ---- */ .wpcf7-response-output { border: none !important; text-align: center; font-family: "Zen Kaku Gothic New", sans-serif; font-size: 0.88rem; margin-top: 16px !important; padding: 12px 20px !important; border-radius: 8px !important; } .wpcf7-validation-errors, .wpcf7-acceptance-missing { background: #fff0f0 !important; color: #e74c3c !important; } .wpcf7-mail-sent-ok { background: var(--color_bgorange) !important; color: var(--color_accent) !important; } /* ---- 送信ボタン ---- */ .wpcf7 input[type="submit"].wpcf7-submit { display: inline-block; padding: 12px 40px; font-size: 1rem; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; color: var(--color_accent); background: transparent; border: 2px solid var(--color_accent); border-radius: 50px; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; -webkit-appearance: none; appearance: none; } .wpcf7 input[type="submit"].wpcf7-submit:hover { background: var(--color_accent); color: #fff; transform: translateY(-2px); box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.10); } /* 送信ボタン中央寄せ */ .wpcf7 > form > p:last-of-type { text-align: center; margin-top: 32px; } /* contact-form-box 内では #cf-tbl の独自ボックスを無効化 */ .contact-form-box #cf-tbl { background: transparent; border: none; border-radius: 0; padding: 0; margin-bottom: 0; box-shadow: none; width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; } /* CF7ラッパーが contact-form-box のパディングを突き破らないよう制約 */ .contact-form-box .wpcf7, .contact-form-box .wpcf7-form { width: 100%; max-width: 100%; box-sizing: border-box; } /* ---- 縦並びレイアウト（PC・モバイル共通） ---- */ #cf-tbl table { display: block; } #cf-tbl tbody { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; } #cf-tbl tr { display: block; border-bottom: none; border-top: none; margin-bottom: 20px; } #cf-tbl tr:first-child { border-top: none; } /* 3行目以降（姓・名以外）はフル幅 */ #cf-tbl tr:nth-child(n+3) { grid-column: 1 / -1; } #cf-tbl th { display: block; width: 100%; padding: 0 0 8px 0; white-space: normal; } #cf-tbl td { display: block; width: 100%; padding: 0; overflow: hidden; } /* ---- モバイル：1カラムに戻す ---- */ @media (max-width: 959px) { #cf-tbl { padding: 32px 20px; } #cf-tbl tbody { display: block; } #cf-tbl tr { margin-bottom: 16px; } #cf-tbl tr:nth-child(n+3) { grid-column: unset; } #cf-tbl th { padding: 0 0 6px; } } /* ========================================================= プライバシーポリシーページ (.privacy-page) ========================================================= */ .privacy-section { padding: 60px 0; background: var(--color_white); } .privacy-inner { max-width: 860px; margin: 0 auto; padding: 0 40px; } /* 冒頭：代表者・日付 */ .privacy-meta { font-size: 0.95rem; color: var(--color_text); margin-bottom: 48px; line-height: 2; } /* 大見出し（個人情報の取得と利用目的 等） */ .privacy-section-title { /* .post_content h3 の !important 群をすべて上書き */ font-size: 1.3rem !important; font-weight: 700 !important; color: var(--color_text) !important; height: auto !important; display: block !important; background-image: none !important; overflow: visible !important; letter-spacing: normal !important; border-left: 4px solid var(--color_accent) !important; border-top: none !important; border-right: none !important; border-bottom: none !important; padding-left: 12px !important; padding-bottom: 0 !important; margin: 96px 0 20px !important; } /* 中見出し（1.個人情報の取り扱い 等） */ .privacy-sub-title { font-size: 1rem; font-weight: 700; color: var(--color_accent); margin: 32px 0 10px; /* SWELLのh4デフォルト縦線を削除 */ border-left: none !important; padding-left: 0 !important; } /* 本文 */ .privacy-inner p { font-size: 0.95rem; line-height: 1.9; color: var(--color_text); margin-bottom: 16px; } /* リスト */ .privacy-inner ul, .privacy-inner ol { font-size: 0.95rem; line-height: 1.9; color: var(--color_text); padding-left: 1.5em; margin-bottom: 16px; } .privacy-inner li { margin-bottom: 6px; } /* ネストされたリスト */ .privacy-inner ul ul, .privacy-inner ol ol, .privacy-inner ul ol, .privacy-inner ol ul { margin-top: 6px; margin-bottom: 4px; } /* アクセントカラー（旧サイトの赤字部分） */ .text-accent { color: var(--color_accent); } /* 問い合わせ窓口ブロック */ .privacy-contact-block { background: var(--color_bgorange); border-radius: 12px; padding: 28px 32px; margin-top: 24px; font-size: 0.95rem; line-height: 2; } .privacy-contact-block p { margin-bottom: 0 !important; } /* 末尾「以上」 */ .privacy-end { text-align: right; font-size: 0.95rem; margin-top: 48px; color: var(--color_text); } @media (max-width: 959px) { .privacy-inner { width: 86%; padding: 0; } .privacy-section { padding: 60px 0; } /* SP: コンテンツのフォントサイズを1回り大きく */ .privacy-meta, .privacy-inner p, .privacy-inner ul, .privacy-inner ol, .privacy-contact-block, .privacy-end { font-size: 1.05rem; } .privacy-sub-title { font-size: 1.1rem; } } @media (max-width: 599px) { .privacy-contact-block { padding: 20px; } } /* ========================================================= 派遣法に基づく情報提供ページ (.hakenho-*) ========================================================= */ /* 実績データ（定義リスト風） */ .hakenho-data { background: var(--color_bgorange); border-radius: 12px; padding: 28px 32px; margin-bottom: 24px; } .hakenho-data-row { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 0.95rem; line-height: 1.7; } .hakenho-data-row:last-child { border-bottom: none; } .hakenho-data-label { flex: 0 0 240px; font-weight: 700; color: var(--color_text); } .hakenho-data-value { color: var(--color_text); } .hakenho-data-value strong { font-size: 1.1rem; color: var(--color_accent); } /* 教育訓練テーブル */ .hakenho-table-wrap { overflow: hidden; overflow-x: auto; margin-bottom: 16px; border-radius: 12px; /* 外周ボーダーはwrapperが担う（cellのborderが角でクリップされないよう） */ border: 1px solid #EEDFD4; -webkit-overflow-scrolling: touch; } .hakenho-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; line-height: 1.7; min-width: 560px; } .hakenho-table th { background: var(--color_accent); color: #fff; font-weight: 700; padding: 10px 14px; text-align: center; /* 列間のみボーダー（外周はwrapperに任せる） */ border-right: 1px solid rgba(255,255,255,0.3); } .hakenho-table th:last-child { border-right: none; } .hakenho-table td { padding: 10px 14px; border-right: 1px solid #EEDFD4; border-bottom: 1px solid #EEDFD4; color: var(--color_text); text-align: center; vertical-align: middle; } .hakenho-table td:last-child { border-right: none; } .hakenho-table tr:last-child td { border-bottom: none; } .hakenho-table tr:nth-child(even) td { background: var(--color_bgorange); } .hakenho-table td:first-child { text-align: left; font-weight: 500; } /* 許可番号 */ .hakenho-license { font-size: 0.9rem; color: var(--color_text); margin-top: 48px; padding-top: 24px; border-top: 1px solid #EEDFD4; } @media (max-width: 959px) { .hakenho-data-label { flex: 0 0 180px; } } @media (max-width: 599px) { .hakenho-data { padding: 20px; } .hakenho-data-row { flex-direction: column; gap: 4px; } .hakenho-data-label { flex: none; } } /* ========================================================= 25. お知らせページ（topics.html） ========================================================= */ .topics-list-section { /* page-mv 直後に余白を作らないよう padding-top: 0（サービスページに合わせる） */ padding: 0 0 80px; } /* ---------------------------------------------------------- お知らせ一覧 (.topics-inner) / カテゴリーアーカイブ (.p-termContent) 共通の投稿リストレイアウト。両方で同じ見た目になるよう統合。 ※ カテゴリーアーカイブで SWELL がデフォルト表示する .c-pageTitle （オレンジ角丸ボックス）はグローバルの display: none を活かして非表示。 page-mv とカテゴリー切替ナビは common.js から自動挿入される。 ---------------------------------------------------------- */ /* コンテナ：サービスページと統一（84% / 最大1400px センター） */ .topics-inner, .p-termContent { width: 84%; max-width: 1400px; margin: 0 auto; padding: 0; } /* リスト本体：グローバルの border-top: unset を上書き */ .topics-inner .p-postList.-type-simple, .p-termContent .p-postList.-type-simple { border-top: 1px solid var(--color_accent) !important; } /* 各リンク行：グローバルの border-bottom: unset / hover opacity を上書き */ .topics-inner .-type-simple .p-postList__link, .p-termContent .-type-simple .p-postList__link { border-bottom: 1px solid var(--color_accent) !important; padding: 22px 8px; opacity: 1 !important; } /* メタ列を少し広く（カテゴリ名が長いため） */ .topics-inner .p-postList__meta, .p-termContent .p-postList__meta { width: 240px; } /* タイトル：カテゴリーは h2 で出力されるためサイズリセット。 topics（div）にも適用して両ページの見た目を統一 */ .topics-inner .p-postList__title, .p-termContent .p-postList__title { font-size: 1.1rem; font-weight: 500; margin: 0; } /* 矢印アニメーション（カードのもっと見るボタンと同じテイスト） */ .topics-inner .p-postList__title::after, .p-termContent .p-postList__title::after { content: ''; display: inline-block; vertical-align: middle; margin-left: 8px; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 203.27 203.27'%3E%3Cpolyline points='43.99 15 166.17 37.1 188.27 159.28' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3Cline x1='166.15' y1='37.12' x2='15' y2='188.27' fill='none' stroke='%23ed7700' stroke-linecap='round' stroke-linejoin='round' stroke-width='30'/%3E%3C%2Fsvg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; transform: scale(0); transform-origin: right top; transition: transform 0.3s; } .topics-inner .p-postList__link:hover .p-postList__title::after, .p-termContent .p-postList__link:hover .p-postList__title::after { transform: scale(1); transform-origin: left bottom; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } @media (max-width: 959px) { .topics-list-section { padding: 40px 0 60px; } /* カテゴリーページにも topics-list-section 相当の縦padding を付与 */ .p-termContent.l-parent { padding: 40px 0 60px; } /* topicsページは 92%（topics-list-section内で左右余白を作る）／ カテゴリーページは 100%（SWELL の .l-mainContent デフォルト側方paddingで余白を作る） */ .topics-inner { width: 92%; } .p-termContent { width: 100%; } .topics-inner .p-postList__meta, .p-termContent .p-postList__meta { width: unset; } } /* ---------------------------------------------------------- カテゴリー切替ナビ（/topics/ と /category/{slug}/ で post リスト上に common.js が自動挿入。サービスナビ（.service-nav）と統一したテイスト） ---------------------------------------------------------- */ .c3i-cat-nav { /* 親（.topics-inner / .p-termContent）が既に 84% / 1400px に絞られているので ここでは幅指定せず、親の幅を素直に使う */ display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px 16px; margin: 0 0 40px; padding: 14px 0; } .c3i-cat-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; /* 文字と矢印の間隔 */ padding: 10px 24px; font-size: 0.95rem; /* サービスナビボタンと統一 */ font-weight: 700; font-family: "Zen Kaku Gothic New", sans-serif; color: var(--color_accent); background: transparent; border: 2px solid var(--color_accent); border-radius: 50px; letter-spacing: 0.05em; text-decoration: none; white-space: nowrap; overflow: hidden; transition: transform 0.3s ease, color 0.4s ease; z-index: 1; } /* 下向き矢印（chevron-down）— currentColor で文字色に追従 */ .c3i-cat-arrow { position: relative; z-index: 1; width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.3s ease; } .c3i-cat-btn:hover .c3i-cat-arrow { transform: translateX(6px); /* サービスナビと同じく右にスライド */ } /* ホバー / アクティブ時の塗りつぶし（左から伸びる）*/ .c3i-cat-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--color_accent); z-index: 0; transition: width 0.4s ease; } .c3i-cat-btn__text { position: relative; z-index: 1; } .c3i-cat-btn:hover { transform: translateY(-2px); color: #ffffff; } .c3i-cat-btn:hover::before { width: 100%; } /* 現在のカテゴリーは塗りつぶし表示 */ .c3i-cat-btn.is-active { color: #ffffff; } .c3i-cat-btn.is-active::before { width: 100%; } @media (max-width: 959px) { .c3i-cat-nav { gap: 8px 10px; margin-bottom: 28px; } .c3i-cat-btn { padding: 8px 18px; font-size: 0.95rem; /* サービスナビボタンと統一（PC/SP 共通） */ } } /* ---------------------------------------------------------- ページネーション：四角→丸ボタン（topics と category 共通） SWELL 標準（.wp-pagenavi）と WP Core（.page-numbers）の両方を想定。 ---------------------------------------------------------- */ .wp-pagenavi a, .wp-pagenavi span, .page-numbers { border-radius: 50% !important; aspect-ratio: 1; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; }