/* /assets/css/wp-core.css */
/* 出典: 旧WP コアのブロックスタイル(業者の選び方 など WP エディター本文用)。tools/capture/extract_assets.py が生成 — 直接修正する場合はこのコメントを削除して管理 */
img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}:root .has-text-align-center{text-align:center}:root .has-text-align-left{text-align:left}:root .has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{word-wrap:normal!important;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style*=border-color]){border-style:solid}html :where([style*=border-top-color]){border-top-style:solid}html :where([style*=border-right-color]){border-right-style:solid}html :where([style*=border-bottom-color]){border-bottom-style:solid}html :where([style*=border-left-color]){border-left-style:solid}html :where([style*=border-width]){border-style:solid}html :where([style*=border-top-width]){border-top-style:solid}html :where([style*=border-right-width]){border-right-style:solid}html :where([style*=border-bottom-width]){border-bottom-style:solid}html :where([style*=border-left-width]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}}
/*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
/*# sourceURL=/wp-includes/css/classic-themes.min.css */
:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}:where(body) { margin: 0; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
/*# sourceURL=global-styles-inline-css */
/* /wp-content/themes/taian-bridge-rwd/style.css */
/*
Theme Name: Daian Bridge RWD
Version: 5.0
*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--white:#fafafa;--red:#c00000;--black:#1a1a1a;--blue:#000b83;
--navy:#00064b;--blue2:#0047ab;--bg:#f8f9fb;--max-w:1920px;
/* レスポンシブ基準: 1920pxキャンバスの中身の帯は 1160px(=1920-380*2)。
ビューポートが狭まると左右余白が自動で縮み、最後は 16px まで落ちる。
--side-pad を使っている既存セクションはこの1行で流動化する。 */
--content-w:1160px;
--side-pad:clamp(16px, calc((100vw - var(--content-w)) / 2), 380px);
--gutter:clamp(16px, 4vw, 48px);
}
html{scroll-behavior:smooth;overflow-x:hidden}
/* 旧: min-width:1920px + 負マージンで 1920px キャンバスを中央寄せしていた。
レスポンシブ化に伴い固定キャンバスを解除する。 */
body{font-family:"Pretendard JP",sans-serif;color:var(--black);background:var(--bg);width:100%;min-width:0;margin-left:0;overflow-x:hidden}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
/* ═══ HEADER ═══ h=97, backdrop-blur10, bg #f8f9fb */
.site-header{position:fixed;top:0;left:0;width:100%;height:113px;z-index:1000;
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#f8f9fb;transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 2px 10px rgba(0,0,0,.08)}
/* 旧: padding 0 468px 12px 478px(1920px固定前提)。
ヘッダーの帯は本文より少し広い 964px を基準に流動化する。 */
.header-inner{max-width:var(--max-w);margin:0 auto;height:113px;display:grid;grid-template-columns:auto 1fr;align-content:center;align-items:center;column-gap:30px;row-gap:11px;padding:0 clamp(16px, calc((100vw - 964px) / 2), 468px) 12px clamp(16px, calc((100vw - 964px) / 2), 478px);box-sizing:border-box}
.header-logo{grid-column:1;grid-row:1;align-self:center;display:flex;align-items:center;flex-shrink:0;height:62px}
.header-logo img{height:50px;width:auto;object-fit:contain}
.header-nav{grid-column:1 / span 2;grid-row:2;width:100%}
.nav-list{display:flex;justify-content:space-between;align-items:center;width:100%}
.nav-item>a{font-size:13px;font-weight:700;color:#1a1a1a;white-space:nowrap;transition:color .2s}
.nav-bo-link{position:relative}
.nav-bo-sub{position:absolute;top:100%;left:50%;transform:translateX(-50%);font-size:5px;font-weight:700;color:rgba(26,26,26,.4);white-space:nowrap;line-height:1;pointer-events:none}
.nav-item>a:hover{color:var(--red)}
.header-row-top{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:flex-end;width:100%}
.header-actions{display:flex;align-items:center;gap:16px}
.header-cta{display:flex;align-items:center;gap:8px}
.header-cta .nav-item-mini-dd+.nav-item-mini-dd{margin-left:0}
.header-phone{display:inline-flex;align-items:center;gap:6px;font-family:'Pretendard JP',Pretendard,sans-serif;font-weight:600;font-size:12px;line-height:12px;color:#1A1A1A;white-space:nowrap}
.header-phone .header-phone-icon{width:10px;height:10px;display:block;flex:0 0 auto;background-color:currentColor;-webkit-mask:url('/wp-content/themes/taian-bridge-rwd/assets/images/header-phone.webp') no-repeat center/contain;mask:url('/wp-content/themes/taian-bridge-rwd/assets/images/header-phone.webp') no-repeat center/contain}
.nav-item.has-dropdown{position:relative}
.dropdown-menu{display:none;position:fixed;top:113px;left:50%;transform:translateX(-50%);width:747px;height:111px;padding:0 60px;
background:rgba(250,250,250,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:100;
flex-direction:row;align-items:center;justify-content:center;gap:60px;list-style:none;
box-shadow:0 6px 20px rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.04)}
.nav-item.has-dropdown:hover .dropdown-menu,.dropdown-menu:hover{display:none}
.dropdown-menu::before{content:"";position:absolute;top:-10px;left:0;width:100%;height:10px}
.dropdown-menu li{flex:0 0 auto}
.dropdown-menu li a{font-family:"Pretendard JP",Pretendard,sans-serif;font-size:14px;font-weight:600;color:#1A1A1A;white-space:nowrap;text-decoration:none;letter-spacing:-.3px;transition:color .15s}
.dropdown-menu li a:hover{color:#0047AB}
.header-buttons{display:flex;gap:8px;margin-left:0}
.btn-login{width:76px;height:28px;border:1px solid #1a1a1a;border-radius:7px;display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:600;color:#1a1a1a}
.btn-register{width:76px;height:28px;background:#c00000;border-radius:7px;display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:600;color:#fff}
/* ═══ HERO ═══ h=900 (per request), keeps text ratio from Figma original h=1248 */
@media (min-width:1024px){.hero-section{position:relative;height:700px;overflow:hidden;margin-top:113px}}
.hero-chart-iframe{position:absolute;left:0;top:-25px;width:100%;height:calc(100% + 50px);border:none;z-index:0;pointer-events:auto}
@media (min-width:1024px){.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,11,131,.1) 36.54%,#00142b 100%);z-index:1;pointer-events:none}}
@media (min-width:1024px){.hero-content{position:relative;z-index:3;pointer-events:none;padding:0;max-width:var(--max-w);margin:0 auto;height:700px}}
/* Figma: tag left=calc(50%-222/2-754), top=837 → ratio adjusted to 900px base */
.hero-tag{color:#f30000;font-size:24px;font-weight:600;line-height:48px;margin-top:458px;text-align:center}
/* Figma: title left=calc(50%-812/2-459), top=904, 48px 800, lh=65px */
.hero-title{color:#fafafa;font-size:36px;font-weight:800;line-height:52px;margin-top:7px}
.hero-slide:nth-child(2) .hero-title{font-size:33.6px}
/* Figma: buttons top=1081, 198x63, gap=25, rounded 15px, 24px 500 */
.hero-buttons{display:flex;gap:25px;margin-top:47px}
.btn-hero-primary{pointer-events:auto;width:158.4px;height:50.4px;background:#c00000;border-radius:12px;display:flex;align-items:center;justify-content:center;
font-size:14.4px;font-weight:600;color:#fff}
.btn-hero-secondary{pointer-events:auto;width:158.4px;height:50.4px;background:rgba(250,250,250,.2);border:2px solid #fafafa;
border-radius:12px;font-size:14.4px;font-weight:600;color:#fff}
/* ═══ TICKER ═══ Figma: white bg, border 1px rgba(0,0,0,0.2), h=112 */
.ticker-section{position:relative;background:#fff;border:1px solid rgba(0,0,0,.2)}
.ticker-wrapper{height:78px;display:flex;align-items:center;overflow:hidden}
/* -30%: items 252x39, gap=28 */
.ticker-track{display:flex;animation:ticker-scroll 240s linear infinite;width:max-content}
.ticker-track:has(.ticker-item:hover){animation-play-state:paused}
.ticker-item{min-width:252px;height:39px;margin-right:28px;flex-shrink:0;background:#000b83;border-radius:8px;
display:flex;align-items:center;gap:14px;padding:0 19px 0 25px;flex-shrink:0}
.ticker-symbol{font-size:14px;font-weight:600;color:#fff;white-space:nowrap}
.ticker-price{font-size:14px;font-weight:400;color:#fff;white-space:nowrap}
.ticker-change{font-size:14px;font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:4px}
.ticker-change.up{color:#FF7A7A;font-weight:600}
.ticker-change.down{color:#7AB8FF;font-weight:600}
@keyframes ticker-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tri-up{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:9px solid #FF7A7A}
.tri-down{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid #7AB8FF}
/* ═══ CARDS ═══ Figma: top=1505, cards at left=197/1009 → padding 0 197, gap=98 */
/* 1505-1248(hero)-112(ticker)=145px gap */
@media (min-width:1024px){.cards-section{padding:50px 0 80px}}
.cards-wrapper{max-width:var(--max-w);margin:0 auto;display:flex;justify-content:center;gap:20px;padding:0 var(--side-pad)}
/* width 520, height 620 */
@media (min-width:1024px){.status-card,.review-card{width:476px;height:600px;background:#fff;border-radius:28px;box-shadow:0 7px 30px rgba(0,0,0,.1);padding:38px 42px 52px}}
@media (min-width:1024px){.card-header-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:40px}}
/* 受付状況カードのバッジ上の線と、レビューカード1件目の上の線を揃える (2026-09-28)
レビュー側はタイトルが2行で見出しが17px高いため、その分だけ下マージンを詰める */
@media (min-width:1024px){.review-card .card-header-row{margin-bottom:23px}}
@media (min-width:1024px){.card-title-group{display:flex;flex-direction:column;gap:18px}}
/* Figma: 30px 700 */
@media (min-width:1024px){.card-title{font-size:20px;font-weight:700;color:#1a1a1a}}
@media (min-width:1024px){.card-title-line{height:2px;background:#9a9a9a;width:100%}}
/* Figma: Live dot #C00000, 11px + Live 24px 600 */
@media (min-width:1024px){.live-indicator{display:flex;align-items:center;gap:8px;padding-top:10px}}
@media (min-width:1024px){.live-dot{width:11px;height:11px;background:#c00000;border-radius:50%;animation:pulse 1.5s infinite}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@media (min-width:1024px){.live-text{font-size:16px;font-weight:600;color:#1a1a1a}}
/* Figma: "more" 20px 600 #9a9a9a */
@media (min-width:1024px){.more-link{font-size:14px;font-weight:600;color:#9a9a9a;padding-top:10px}}
/* Status rows: Figma h=65, gap=33 (250-152-65) */
@media (min-width:1024px){.status-row{display:flex;min-height:48px;margin-bottom:22px}}
/* bar 4px #1a1a1a, height 48 */
@media (min-width:1024px){.status-bar{width:4px;min-height:48px;background:#1a1a1a;flex-shrink:0}}
.status-content{display:flex;align-items:center;flex:1;padding-left:20px;position:relative;transform-style:preserve-3d;flex-wrap:nowrap}
/* Figma: type 88.87x30.43, bg #00096b, rounded 3.652, 17px 500 white */
@media (min-width:1024px){.type-badge{width:78px;height:24px;padding:0;background:#00096b;border-radius:3.652px;text-align:center;justify-content:center;
font-size:13px;font-weight:500;color:#fff;display:inline-flex;align-items:center;white-space:nowrap;flex-shrink:0}}
/* Figma: pair 75x23, bg rgba(40,173,255,0.15), 14px 500 #00064b */
.pair-badge{height:23px;padding:0 13px;background:rgba(40,173,255,.15);border-radius:3.652px;
font-size:14px;font-weight:500;color:#00064b;display:inline-flex;align-items:center;margin-left:12px;white-space:nowrap;flex-shrink:0}
.status-user{display:flex;flex-direction:column;margin-left:30px;gap:2px}
/* Figma: 19px 600, lh=29px */
@media (min-width:1024px){.status-name{font-size:15px;font-weight:600;color:#1a1a1a;line-height:22px;margin-left:12px}}
/* 13px 400, #a7a7a7, lh=20px */
@media (min-width:1024px){.status-time{font-size:13px;font-weight:400;color:#a7a7a7;line-height:20px;display:flex;align-items:center;gap:4px}}
@media (min-width:1024px){.status-time svg{flex-shrink:0;width:14px;height:14px}}
/* Figma: label 84x32, rounded 4.87, 16px 700 */
@media (min-width:1024px){.status-label{width:70px;height:26px;padding:0;border-radius:4.87px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;flex-shrink:0}}
@media (min-width:1024px){.status-label.approved{background:#e7faef;color:#027a48}}
@media (min-width:1024px){.status-label.rejected{background:#fff4f4;color:#e32929}}
@media (min-width:1024px){.status-label.processing{background:#fffaea!important;color:#efb700!important;border:2px solid transparent!important;transition:box-shadow .5s ease}}
/* Review rows: Figma type 16px 200, text 20px 500 lh=30, tags h=27 rounded 20 */
@media (min-width:1024px){.review-row{display:flex;align-items:flex-start;padding:10px 6px;text-decoration:none;color:inherit;border-radius:6px;transition:background .15s}}
@media (min-width:1024px){a.review-row:hover{background:rgba(0,11,131,.04)}}
@media (min-width:1024px){a.review-row:hover .review-text{color:#0047AB}}
@media (min-width:1024px){.review-type{font-size:13px;font-weight:200;color:#1a1a1a;line-height:20px;width:48px;flex-shrink:0;padding-top:3px}}
.review-body{margin-left:12px;flex:1;min-width:0}
@media (min-width:1024px){.review-text{font-size:15px;font-weight:500;color:#1a1a1a;line-height:24px;margin:0 0 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;transition:color .15s}}
@media (min-width:1024px){.review-snippet{font-size:13px;font-weight:400;color:rgba(26,26,26,.45);line-height:1.45;margin:-4px 0 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}}
@media (min-width:1024px){.review-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}}
@media (min-width:1024px){.review-date{margin-left:auto;font-size:12px;color:#9b9b9b;letter-spacing:.02em;flex-shrink:0}}
.review-tag{height:22px;padding:0 8px;background:rgba(40,173,255,.12);border-radius:20px;
font-size:12px;font-weight:400;color:#00064b;display:inline-flex;align-items:center}
/* Figma: divider 1px rgba(26,26,26,0.15) */
@media (min-width:1024px){.review-divider{height:1px;background:rgba(26,26,26,.15);margin:8px 0}}
/* ═══ WHY ═══ Figma: top=2482, h=980, title 40px 500 at top=167 within section */
/* 2482-1505-770(cards)=207px from cards bottom */
@media (min-width:1024px){.why-section{position:relative;padding:60px 0 0px;background:var(--bg);overflow:hidden}}
@media (min-width:1024px){.why-section::before{content:'';position:absolute;inset:0;
background:url('/wp-content/themes/taian-bridge-rwd/assets/images/why-bg.webp') center/cover;opacity:1;pointer-events:none}}
.why-inner{position:relative;max-width:var(--max-w);margin:0 auto;text-align:center;min-height:350px}
/* Figma: "Why choose Taian Bridge?" 45px 600 → corrected from figma CSS: 40px 500 */
@media (min-width:1024px){.why-title{font-size:26px;font-weight:500;color:#0047AB;line-height:1.3;margin-bottom:30px}}
/* 4 stats, gap=56, w=180 each */
@media (min-width:1024px){.why-stats{display:flex;justify-content:center;gap:24px;align-items:flex-start}}
@media (min-width:1024px){.why-stat{display:flex;flex-direction:column;align-items:center;gap:4.54px;width:180px}}
/* number 44px 700 #0047ab, lh=70px */
@media (min-width:1024px){.why-stat-number{font-size:44px;font-weight:700;color:#0047ab;line-height:70px}}
/* label 16px 400 #7d7d7d, lh=22px */
@media (min-width:1024px){.why-stat-label{font-size:16px;font-weight:400;color:#7d7d7d;line-height:22px}}
/* Figma: 24H box 259x259, bg #0047ab, rounded 30, shadow 5 5 20 */
@media (min-width:1024px){.why-stat{position:relative;cursor:pointer;transition:all .3s ease}}
@media (min-width:1024px){.why-stat:hover .why-stat-number{color:#fafafa;position:relative;z-index:2}}
@media (min-width:1024px){.why-stat:hover .why-stat-label{color:#fafafa;position:relative;z-index:2}}
@media (min-width:1024px){.why-stat::before{content:'';position:absolute;width:200px;height:200px;
background:#0047ab;border-radius:28px;box-shadow:5px 5px 20px rgba(0,0,0,.3);
top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s ease}}
/* ═══ SERVICES ═══ Figma: top=3406, content w=1525, padding 0 197 */
/* 3406-2482-980(why)= -56 → services starts ~56px before why ends, but in flow layout this is just after why */
@media (min-width:1024px){.services-section{padding:0 0 60px;background:var(--bg)}}
.services-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--side-pad)}
/* "Our Services" 26px 700 centered, lh=38 */
@media (min-width:1024px){.services-title{font-size:31px;font-weight:700;color:#1a1a1a;text-align:center;line-height:46px;margin-bottom:30px;position:relative;display:inline-block;left:50%;transform:translateX(-50%);padding-bottom:14px}}
@media (min-width:1024px){.services-title::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:180px;height:3px;background:#C00000;border-radius:2px}}
/* subtitle 14px 400 #7d7d7d, gap to cards=120px */
.services-subtitle{font-size:14px;font-weight:400;color:#7d7d7d;text-align:center;margin-top:14px;margin-bottom:120px}
/* width 560 -> 520 (a bit shorter), slightly inset within header margin */
.services-cards{display:flex;justify-content:center;gap:20px}
@media (min-width:1024px){.service-card{position:relative;width:476px;height:600px;border-radius:28px;overflow:hidden;flex-shrink:0}}
.service-card-bg{position:absolute;inset:0;background-size:cover;background-position:center}
/* Figma: gradient from transparent to black */
.service-card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 100%)}
.service-card-content{position:absolute;bottom:0;left:0;right:0;padding:0 38px 34px 38px;z-index:2;display:flex;flex-direction:column}
/* title 26px 700 white */
@media (min-width:1024px){.service-card-title{font-size:22px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:10px}}
/* sub */
@media (min-width:1024px){.service-card-sub{font-size:12px;font-weight:400;color:#fff;line-height:1.4;margin-bottom:8px}}
/* desc */
@media (min-width:1024px){.service-card-desc{font-size:13px;font-weight:400;color:#fff;line-height:19px;margin-bottom:10px;word-break:normal;overflow-wrap:anywhere}}
/* features */
@media (min-width:1024px){.service-card-features{list-style:disc;padding-left:18px}}
@media (min-width:1024px){.service-card-features li{font-size:12px;font-weight:400;color:#fff;line-height:17px}}
/* button 134x44, bg #c00000, rounded 10 */
@media (min-width:1024px){.btn-service{width:122px;flex:0 0 122px;height:42px;position:relative;right:auto;bottom:auto;margin-right:-18px;align-self:flex-end;z-index:3;flex-direction:column;line-height:1.2;background:#c00000;border-radius:7px;display:flex;align-items:center;justify-content:center;
font-size:11.2px;font-weight:700;color:#fff;text-align:center;
margin-top:0}}
/* ═══ CONTACT ═══ Figma: top=4872, h=1198, overlay rgba(0,19,83,0.45) */
/* 4872-3406-1242(services)=224px gap */
.contact-section{position:relative;min-height:730px;overflow:hidden;margin-top:0;background:none}
.contact-bg{position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,19,83,0.45), rgba(0,19,83,0.45)), url(/wp-content/themes/taian-bridge/assets/images/contact-bg-v8.webp?v=1) center 75%/cover no-repeat;z-index:0}
.contact-overlay{position:absolute;inset:0;background:transparent;z-index:1}
/* Figma: titles at y=142, padding 198 */
.contact-inner{position:relative;z-index:2;max-width:var(--max-w);margin:0 auto;padding:26px var(--side-pad) 18px}
.contact-titles{text-align:center;margin-bottom:16px}
/* title 36px 700, lh=48px, gap=20 to subtitle */
.contact-title{font-size:36px;font-weight:700;color:#fafafa;line-height:40px;margin-bottom:14px}
/* subtitle 18px 400 */
.contact-subtitle{font-size:16px;font-weight:400;color:#fafafa;line-height:28px}
/* form card 560 wide, padding 38/60/30 */
.contact-form-card{position:relative;overflow:hidden;width:560px;min-height:430px;margin:0 auto;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);background:radial-gradient(135% 115% at 50% 0%,rgba(255,255,255,.26),rgba(255,255,255,.12) 45%,rgba(255,255,255,.06) 100%);border:none;border-radius:24px;padding:36px 50px 26px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 14px 44px rgba(0,0,0,.24),0 0 46px rgba(255,255,255,.16),inset 0 0 46px rgba(255,255,255,.10)}
.contact-form-card::before{content:"";position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;background:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.12) 47%,rgba(255,255,255,.26) 50%,rgba(255,255,255,.12) 53%,rgba(255,255,255,0) 62%);background-size:220% 100%;background-repeat:no-repeat;pointer-events:none;animation:glassSheen 6.5s linear infinite}
.contact-form-card>*{position:relative;z-index:1}
@keyframes glassSheen{0%{background-position:150% 0}100%{background-position:-50% 0}}
@media (prefers-reduced-motion:reduce){.contact-form-card::before{animation:none;background-position:50% 0}}
.contact-form{display:flex;flex-direction:column}
/* Figma: label 25px 700, input underline 510x2 */
.form-group{margin-bottom:34px}
.form-group label{font-size:18px;font-weight:700;color:#fff;display:block;margin-bottom:10px}
.form-group input{width:100%;background:transparent;border:none;outline:none;color:#fff;
font-size:14px;font-family:'Pretendard JP',sans-serif;padding-bottom:8px}
.form-line{height:2px;background:#fafafa;max-width:510px}
.form-group textarea{width:100%;background:transparent;border:none;outline:none;color:#fff;font-size:14px;font-family:'Pretendard JP',sans-serif;padding-bottom:8px;resize:vertical;line-height:1.6;min-height:60px}
.form-group textarea::placeholder{color:rgba(255,255,255,.5)}
/* Figma: button 258x65, #c00000, rounded 12, 25px 700 */
.btn-contact-submit{width:198px;height:50px;margin-top:8px;display:flex;align-items:center;justify-content:center;background:#c00000;border-radius:12px;border:none;cursor:pointer;
font-size:18px;font-weight:700;color:#fff;font-family:'Pretendard JP',sans-serif;align-self:center;margin-bottom:10px}
/* note 14px 400 white */
.contact-note{font-size:16px;font-weight:400;color:#fff;text-align:center;margin-top:10px}
/* ═══ FOOTER ═══ Figma: h=352, bg #00064b */
.site-footer{background:var(--navy);color:var(--white);position:relative}
.footer-top-line{height:2px;background:var(--white)}
/* 旧: padding 40px 468px 40px 478px(1920px固定前提)。ヘッダーと同じ 964px 基準で流動化する。 */
.footer-inner{max-width:var(--max-w);margin:0 auto;padding:40px clamp(16px, calc((100vw - 964px) / 2), 468px) 40px clamp(16px, calc((100vw - 964px) / 2), 478px);width:100%;box-sizing:border-box}
.footer-row-top{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;margin-bottom:20px}
.footer-nav-primary{display:flex;flex-wrap:nowrap;gap:30px}
.footer-nav-primary a{font-size:11.5px;font-weight:500;color:var(--white);white-space:nowrap;flex:0 0 auto;transition:opacity .2s}
.footer-nav-primary a:hover{opacity:.8}
.footer-social-instagram{width:26px;height:26px;transition:opacity .2s;opacity:.75}
.footer-social-instagram:hover{opacity:1}
.footer-social-instagram img{width:26px;height:26px;filter:brightness(0) invert(1) opacity(.85)}
/* 旧: flex-wrap:nowrap。幅が狭いとリンクが 1 行に収まらず枠外へ出る。 */
.footer-nav-secondary{display:flex;flex-wrap:wrap;gap:12px 30px;margin-bottom:20px}
.footer-nav-secondary a{font-size:11.5px;font-weight:500;color:rgba(250,250,250,.6);white-space:nowrap;transition:opacity .2s}
.footer-nav-secondary a:hover{opacity:1;color:var(--white)}
.footer-divider{height:1px;background:rgba(250,250,250,.2);margin-bottom:30px}
.footer-bottom{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-end}
.footer-bottom-left{display:flex;flex-direction:column;gap:12px}
.footer-logo{width:139px;height:53px;object-fit:contain;opacity:.9}
.footer-copyright{font-size:10.92px;font-weight:200;color:var(--white)}
.footer-bottom-right{display:flex;flex-direction:column;align-items:flex-end;gap:18px}
.footer-contact-item{display:flex;align-items:center;gap:16px}
.footer-contact-text{font-size:13px;font-weight:600;color:var(--white);letter-spacing:.6px}
.footer-contact-icon{width:21.63px;height:21.63px;background:#C00000;border-radius:4.454px;display:flex;align-items:center;justify-content:center;
flex-shrink:0}
.footer-contact-icon img{filter:brightness(0) invert(1)}
.footer-contact-icon img[src*="phone-icon"]{width:12.23px;height:12.7px}
.footer-contact-icon img[src*="email-icon"]{width:12.14px;height:10.35px}
.footer-contact-icon img[src*="clock-icon"]{width:12.6px;height:12.6px}.footer-contact-icon img[src*="map-icon"]{width:12.6px;height:12.6px}.footer-contact-icon img[src*="line-icon"]{width:13.3px;height:13.3px}
/* ═══ CHAT WIDGET ═══ Figma: 108x94, #c00000, rounded 15 */
.chat-widget{position:fixed;bottom:24px;right:24px;z-index:9999;width:108px;height:94px;
background:#c00000;border-radius:15px;border:none;cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
box-shadow:0 2px 25px rgba(0,0,0,.1)}
.chat-widget img{width:35px;height:35px;filter:brightness(0) invert(1)}
.chat-widget span{font-size:15px;font-weight:700;color:#fafafa;font-family:'Pretendard JP',sans-serif}
/* ═══ RESPONSIVE ═══ */
/* ── CHATBOT (from Figma Make) ── */
.cb-window{position:fixed;bottom:170px;right:40px;width:480px;height:640px;background:#fff;border-radius:16px;
box-shadow:0 25px 50px rgba(0,0,0,.25);border:2px solid #0A1F44;z-index:9999;flex-direction:column;overflow:hidden}
.cb-header{background:linear-gradient(to right,#0A1F44,#002868);color:#fff;padding:16px;display:flex;align-items:center;justify-content:space-between}
.cb-header-left{display:flex;align-items:center;gap:12px}
.cb-avatar{width:40px;height:40px;background:#BF0A30;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.cb-title{font-size:18px;font-weight:700;color:#fff}
.cb-status{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.8)}
.cb-status-dot{width:8px;height:8px;background:#4ade80;border-radius:50%}
.cb-close{background:none;border:none;color:#fff;cursor:pointer;padding:4px;border-radius:8px;transition:background .2s}
.cb-close:hover{background:rgba(255,255,255,.2)}
.cb-body{flex:1;padding:16px;background:#f9fafb;overflow-y:auto}
.cb-message{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.cb-msg-avatar{width:32px;height:32px;background:#BF0A30;border-radius:50%;color:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cb-bubble{background:#fff;padding:12px;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.1);max-width:80%}
.cb-bubble p{font-size:14px;color:#1f2937;line-height:1.5}
.cb-time{font-size:12px;color:#9ca3af;margin-top:8px;display:block}
.cb-actions{display:flex;flex-direction:column;gap:8px}
.cb-actions-label{font-size:12px;color:#6b7280;text-align:center;margin-bottom:4px}
.cb-action-btn{width:100%;background:#fff;border:1px solid #e5e7eb;padding:12px;border-radius:8px;font-size:14px;text-align:left;cursor:pointer;transition:background .2s;font-family:inherit}
.cb-action-btn:hover{background:#f9fafb}
.cb-input-area{padding:16px;border-top:1px solid #e5e7eb;background:#fff;display:flex;gap:8px}
.cb-input{flex:1;padding:8px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;outline:none;font-family:inherit}
.cb-input:focus{border-color:#BF0A30}
.cb-send{background:#BF0A30;color:#fff;border:none;padding:8px 16px;border-radius:8px;font-size:14px;cursor:pointer;font-family:inherit;transition:background .2s}
.cb-send:hover{background:#DC143C}
.cb-float-btn{position:fixed;bottom:40px;right:40px;width:130px;height:110px;background:#C00000;color:#fff;border:none;border-radius:15px;box-shadow:0 8px 35px rgba(192,0,0,.5);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:transform .2s}
color:#fff;border:none;border-radius:50%;box-shadow:0 25px 50px rgba(0,0,0,.25);z-index:9999;cursor:pointer;transition:transform .2s}
.cb-float-btn:hover{transform:scale(1.08)}
.cb-float-btn::after{content:"";position:absolute;inset:-4px;border-radius:20px;background:rgba(192,0,0,.4);z-index:-1;animation:cb-pulse 2s ease-in-out infinite}
@keyframes cb-pulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.25);opacity:0}}
/* mobile: keep the square design, scaled down (≈2/3 of PC) */
@media (max-width:480px){
.cb-float-btn{transform:scale(.68);transform-origin:bottom right;bottom:24px;right:16px}
.cb-float-btn:hover{transform:scale(.68)}
}
/* ── HERO SLIDER ── */
.hero-slider{position:relative;width:100%;height:700px}
.hero-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:0 468px 100px 478px;box-sizing:border-box;opacity:0;transform:translateX(60px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.hero-slide.active{opacity:1;transform:translateX(0)}
.hero-slide.active .hero-buttons,.hero-slide.active .hero-buttons a{pointer-events:auto}
.hero-tag,.hero-title{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:none;-webkit-user-drag:none;cursor:default}
.hero-dot{user-select:none;-webkit-user-select:none}
/* Left-aligned slide — offsets parent padding(95) plus the center-align offset for viewports beyond 1920 */
.hero-slide .hero-tag{margin-top:0}
.hero-dots{position:absolute;bottom:30px;left:478px;transform:none;display:flex;gap:10px;z-index:10;pointer-events:auto}
.hero-dot{width:12px;height:12px;border-radius:50%;background:rgba(250,250,250,.4);cursor:pointer;transition:background .3s,transform .3s;pointer-events:auto}
.hero-dot.active{background:#fff;transform:scale(1.3)}
@keyframes flipCard{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
@media (min-width:1024px){.why-stat:hover::before{opacity:1}}
/* ── airport flip v3 ── */
@media (min-width:1024px){.status-row{perspective:600px}}
@media (min-width:1024px){.status-content .status-time{margin-left:auto;margin-right:16px;flex-shrink:0;white-space:nowrap}}
@media (min-width:1024px){.status-content .status-label{margin-left:0;flex-shrink:0}}
/* approved: slow blink (2s cycle) */
@media (min-width:1024px){.status-label.approved{animation:slow-blink 2s ease-in-out infinite}}
@keyframes slow-blink{0%,100%{opacity:1}50%{opacity:.4}}
/* processing: yellow border-light rotation */
/* service card bottom: text left + button right, side by side */
@media (min-width:1024px){.service-card-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:auto;position:relative;padding-right:0;min-height:60px}}
@media (min-width:1024px){.service-card-bottom-left{flex:1 1 auto;min-width:0}}
/* processing: light beam rotates along the border */
content:'';position:absolute;width:200%;height:200%;top:-50%;left:-50%;
background:conic-gradient(transparent 270deg,#efb700 360deg);
animation:border-rotate 3s linear infinite;
}
}
0%{top:-15px;left:-15px}
25%{top:-15px;left:calc(100% - 15px)}
50%{top:calc(100% - 15px);left:calc(100% - 15px)}
75%{top:calc(100% - 15px);left:-15px}
100%{top:-15px;left:-15px}
}
0%{top:-5px;left:10%;}
25%{top:-5px;left:calc(100% - 5px);}
26%{top:0;left:calc(100% + 1px);}
50%{top:calc(100% - 5px);left:calc(100% + 1px);}
51%{top:calc(100% + 1px);left:calc(100% - 5px);}
75%{top:calc(100% + 1px);left:0;}
76%{top:calc(100% - 5px);left:-5px;}
99%{top:-5px;left:-5px;}
100%{top:-5px;left:10%;}
}
0%{box-shadow:3px 0 4px -2px rgba(239,183,0,.8)}
25%{box-shadow:0 3px 4px -2px rgba(239,183,0,.8)}
50%{box-shadow:-3px 0 4px -2px rgba(239,183,0,.8)}
75%{box-shadow:0 -3px 4px -2px rgba(239,183,0,.8)}
100%{box-shadow:3px 0 4px -2px rgba(239,183,0,.8)}
}
content:'';
position:absolute;
top:-50%;left:-50%;
width:200%;height:200%;
background:conic-gradient(
transparent 0deg,
transparent 340deg,
#efb700 350deg,
transparent 360deg
);
animation:spin 2s linear infinite;
z-index:0;
}
z-index:1;
}
}
}
/* processing: border-light rotation */
background:#fffaea;color:#efb700;
border:2px solid transparent;
border-radius:4.87px;
}
/* processing base style */
.cb-avatar > *,.cb-msg-avatar > *{display:block;margin:0;flex-shrink:0}
/* first slide: top-left */
.hero-slide-top-left{justify-content:flex-start;padding-top:100px;padding-bottom:0}
/* long number label — prevent wrapping */
@media (min-width:1024px){.why-stat-number-sm{font-size:34px !important;white-space:nowrap;letter-spacing:-1px}}
/* 「10,000円分」の折り返し位置を固定する (2026-09-22)
rwd.css が .why-stat-number に overflow-wrap:anywhere を当てているため、
カード幅(272px)に収まらない幅では「10,000円 / 分」と割れていた。
単位側を一塊にして、折り返しを「10,000 / 円分」だけに限定する。
white-space・word-break・overflow-wrap はいずれも継承プロパティなので、
子要素に直接指定すれば親の値より優先される(!important 不要)。 */
.stat-unit-nb{white-space:nowrap;overflow-wrap:normal;word-break:keep-all}
/* MEGA MENU — all dropdown items in one panel */
.header-mega{display:none;position:fixed;top:113px;background:rgba(250,250,250,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:100;padding:20px 20px 30px;box-sizing:border-box;box-shadow:0 8px 24px rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.05)}
.header-mega.is-open{display:block}
.header-mega-grid{display:flex;width:100%;align-items:flex-start;justify-content:space-between}
.header-mega-col{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;flex:0 0 auto;min-width:0}
.header-mega-col a{font-family:"Pretendard JP",Pretendard,sans-serif;font-size:8.8px;font-weight:600;color:rgba(26,26,26,.65);text-decoration:none;white-space:nowrap;letter-spacing:-.3px;transition:color .15s;text-align:center}
.header-mega-col a:hover{color:#0047AB}
/* メガメニュー 第3階層（中分類 → 小分類）— 2026-09-28
小分類を持つ列だけ左揃えにして枝分かれが読めるようにする。
持たない列は従来どおり中央揃えのまま。 */
.header-mega{max-width:calc(100vw - 40px);box-sizing:border-box}
.header-mega-col .hm-item{display:flex;flex-direction:column;gap:6px;min-width:0}
.header-mega-col:has(.hm-sub){align-items:flex-start;text-align:left}
/* 小分類を持つ中分類は、下の ul のほうが幅広いため が列幅まで引き伸ばされる。
.header-mega-col a に text-align:center が効いているので、字だけ中央に寄って
字下げしたように見えていた。左端に揃える。 */
.header-mega-col:has(.hm-sub) .hm-item > a{align-self:flex-start;text-align:left}
.header-mega-col .hm-sub{list-style:none;margin:0;padding:0}
.header-mega-col .hm-sub li{position:relative;padding-left:10px;padding-bottom:3px}
.header-mega-col .hm-sub li::before{content:"";position:absolute;left:1px;top:0;bottom:0;border-left:1px solid rgba(26,26,26,.18)}
.header-mega-col .hm-sub li:last-child{padding-bottom:0}
.header-mega-col .hm-sub li:last-child::before{bottom:auto;height:7px}
.header-mega-col .hm-sub li::after{content:"";position:absolute;left:1px;top:7px;width:6px;border-top:1px solid rgba(26,26,26,.18)}
.header-mega-col .hm-sub a{font-size:7.6px;font-weight:500;color:rgba(26,26,26,.5);letter-spacing:-.2px}
.header-mega-col .hm-sub a:hover{color:#0047AB}
/* ========== Terms / Privacy Policy page ========== */
.page-legal { background:#fff; }
.legal-hero {
width:100%; min-height:340px; margin-top:113px; padding:60px 80px;
background:linear-gradient(120deg,#00064B 0%, #1a2466 100%);
color:#fff; display:flex; align-items:center; justify-content:center;
}
.legal-hero-content { max-width:1240px; margin:0 auto; }
.legal-hero-title { font-size:44px; font-weight:700; line-height:1.3; margin:0 0 12px; letter-spacing:-0.5px; }
.legal-hero-sub { font-size:16px; opacity:.7; letter-spacing:1px; margin:0; }
.legal-content { padding:80px 80px 120px; }
.legal-inner { max-width:960px; margin:0 auto; color:#1f2330; line-height:1.9; font-size:15px; }
.legal-intro { font-size:15px; line-height:2; color:#333; margin:0 0 48px; padding:24px 28px; background:#f6f7fb; border-left:4px solid #00064B; border-radius:4px; }
.legal-section-title { font-size:20px; font-weight:700; color:#00064B; margin:40px 0 14px; padding-bottom:8px; border-bottom:1px solid #e3e6ef; }
.legal-inner p { margin:0 0 14px; }
.legal-list { margin:0 0 14px; padding-left:22px; }
.legal-list li { margin-bottom:8px; line-height:1.85; }
.legal-contact { background:#f6f7fb; padding:18px 22px; border-radius:6px; line-height:2; font-size:14px; }
.legal-date { margin-top:60px; padding-top:24px; border-top:1px solid #e3e6ef; color:#7a8094; font-size:13px; line-height:1.9; }
@media (max-width:1023.98px){
.legal-hero { padding:80px 24px 56px; }
.legal-hero-title { font-size:30px; }
.legal-content { padding:48px 24px 80px; }
.legal-section-title { font-size:18px; }
}
.lp-concerns-title{text-align:center;font-size:30px;font-weight:700;line-height:1.32;color:#1A1A1A;margin:0 0 64px;letter-spacing:-1px}
/* speech bubble */
@media (min-width:1024px){.lp-bubbles{display:flex;flex-direction:column;gap:14px;max-width:760px;margin:0 auto 90px}}
@media (min-width:1024px){.lp-bubble{display:inline-flex;align-items:center;gap:10px;padding:13px 22px 13px 14px;background:#fff;border:1px solid #D0D5DD;border-radius:30px;width:fit-content;max-width:100%;box-shadow:0 1px 2px rgba(0,0,0,.02)}}
@media (min-width:1024px){.lp-bubble.lp-bubble-left{align-self:flex-start}}
@media (min-width:1024px){.lp-bubble.lp-bubble-right{align-self:flex-end}}
@media (min-width:1024px){.lp-bubble-avatar{flex-shrink:0;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}}
@media (min-width:1024px){.lp-bubble-avatar svg{width:24px;height:24px;display:block}}
@media (min-width:1024px){.lp-bubble-text{font-size:16px;font-weight:500;line-height:1.5;color:#4B5563;letter-spacing:-.4px;white-space:nowrap}}
@media (min-width:1024px){.lp-bubble-text em{font-style:normal;color:#1A1A1A;font-weight:600}}
/* transition */
@media (min-width:1024px){.lp-transition-title{position:relative;text-align:center;margin:0 auto 18px;display:flex;justify-content:center}}
@media (min-width:1024px){.lp-transition-title span{position:relative;display:inline-block;font-size:18px;font-weight:700;line-height:1.4;color:#1A1A1A;padding-bottom:6px}}
@media (min-width:1024px){.lp-transition-title span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#0047AB}}
@media (min-width:1024px){.lp-transition-sub{text-align:center;font-size:14px;font-weight:400;line-height:1.65;color:#4B5563;margin:0 0 90px;letter-spacing:-.3px}}
/* benefits */
.lp-benefit{text-align:center;margin-bottom:130px}
.lp-benefit p{margin:0;letter-spacing:-.5px}
.lp-benefit-line1{font-size:18px;font-weight:600;line-height:1.5;color:#1A1A1A;margin-bottom:10px !important}
.lp-benefit-line2{font-size:26px;font-weight:700;line-height:1.3;color:#1A1A1A;margin-bottom:60px !important}
.lp-benefit-line2 span{color:#0047AB}
.lp-benefit-line3{font-size:18px;font-weight:600;line-height:1.5;color:#1A1A1A;margin-bottom:14px !important}
.lp-benefit-free{font-size:26px;font-weight:800;line-height:1.3;color:#0047AB}
/* CTA banner */
@media (max-width:1023.98px){
@media (min-width:1024px){.lp-concerns{padding:60px 0 70px}}
.lp-concerns-title{font-size:22px;margin-bottom:36px}
@media (min-width:1024px){.lp-bubble-text{font-size:14px;white-space:normal}}
@media (min-width:1024px){.lp-bubble{padding:12px 18px 12px 12px}}
@media (min-width:1024px){.lp-bubbles{margin-bottom:60px}}
@media (min-width:1024px){.lp-transition-title span{font-size:16px}}
@media (min-width:1024px){.lp-transition-sub{margin-bottom:60px}}
.lp-benefit{margin-bottom:80px}
.lp-benefit-line1,.lp-benefit-line3{font-size:15px}
.lp-benefit-line2,.lp-benefit-free{font-size:22px}
@media (min-width:1024px){.lp-cta{padding:30px 24px}}
@media (min-width:1024px){.lp-cta-text{font-size:15px}}
@media (min-width:1024px){.lp-dots-tr{width:100px;height:80px;right:20px}}
@media (min-width:1024px){.lp-dots-bl{width:120px;height:160px;left:10px;bottom:100px}}
}
/* 4 speech bubbles - Figma position mapping */
@media (min-width:1024px){.lp-bubbles{position:relative;width:100%;max-width:1100px;margin:0 auto 100px;display:flex;flex-direction:column;gap:18px}}
@media (min-width:1024px){.lp-bubble{display:inline-flex;align-items:center;gap:14px;padding:22px 30px;background:#FFFFFF;border:1px solid rgba(26,26,26,0.5);border-radius:20px;width:fit-content;max-width:760px;box-sizing:border-box;box-shadow:0 1px 2px rgba(0,0,0,.02)}}
@media (min-width:1024px){.lp-bubble.lp-bubble-left{align-self:flex-start}}
@media (min-width:1024px){.lp-bubble.lp-bubble-right{align-self:flex-end}}
@media (min-width:1024px){.lp-bubble-avatar{flex-shrink:0;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center}}
@media (min-width:1024px){.lp-bubble-avatar svg{width:30px;height:30px;display:block}}
@media (min-width:1024px){.lp-bubble-text{font-size:22px;font-weight:600;line-height:1.46;color:#1A1A1A;letter-spacing:-.4px;white-space:nowrap}}
@media (min-width:1024px){.lp-bubble-text em{font-style:normal;color:#1A1A1A;font-weight:700}}
/* transition: title + blue line below (Rectangle 177) */
@media (min-width:1024px){.lp-transition-title{text-align:center;margin:0 auto;display:block}}
@media (min-width:1024px){.lp-transition-title span{display:inline-block;font-size:30px;font-weight:700;line-height:1.17;color:#1A1A1A;padding-bottom:6px;position:relative}}
@media (min-width:1024px){.lp-transition-title span::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);width:389px;height:3px;background:#0047AB;border-radius:2px}}
@media (min-width:1024px){.lp-transition-sub{text-align:center;font-size:24px;font-weight:400;line-height:1.34;color:#1A1A1A;margin:30px 0 110px;letter-spacing:-.4px}}
/* benefits — spec sizes */
.lp-benefit{text-align:center;margin-bottom:130px}
.lp-benefit p{margin:0;letter-spacing:-.5px}
.lp-benefit-line1{font-size:30px;font-weight:700;line-height:1.37;color:#1A1A1A;margin-bottom:18px !important}
.lp-benefit-line2{font-size:40px;font-weight:700;line-height:1.05;color:#0047AB;margin-bottom:80px !important}
.lp-benefit-line2 span{color:#0047AB}
.lp-benefit-line3{font-size:30px;font-weight:700;line-height:1.37;color:#1A1A1A;margin-bottom:24px !important}
.lp-benefit-free{font-size:40px;font-weight:800;line-height:1.05;color:#0047AB}
/* CTA banner — 1100x230, left Rectangle120 image + #00064B */
@media (max-width:1023.98px){
@media (min-width:1024px){.lp-concerns{padding:70px 0 80px}}
.lp-concerns-inner{padding:0 24px}
.lp-concerns-title{font-size:28px;margin-bottom:50px}
@media (min-width:1024px){.lp-bubble-text{font-size:16px;white-space:normal;line-height:1.5}}
@media (min-width:1024px){.lp-bubble{padding:16px 20px;gap:10px}}
@media (min-width:1024px){.lp-bubble-avatar,.lp-bubble-avatar svg{width:24px;height:24px}}
@media (min-width:1024px){.lp-bubbles{margin-bottom:70px}}
@media (min-width:1024px){.lp-transition-title span{font-size:20px}}
@media (min-width:1024px){.lp-transition-title span::after{width:260px}}
@media (min-width:1024px){.lp-transition-sub{font-size:16px;margin:24px 0 70px}}
.lp-benefit{margin-bottom:80px}
.lp-benefit-line1,.lp-benefit-line3{font-size:20px}
.lp-benefit-line2,.lp-benefit-free{font-size:28px}
@media (min-width:1024px){.lp-cta{padding:36px 24px;min-height:auto}}
@media (min-width:1024px){.lp-cta-text{font-size:18px}}
@media (min-width:1024px){.lp-cta-btn{width:180px;height:48px;font-size:18px}}
@media (min-width:1024px){.lp-dots-tr{width:120px;height:90px;right:20px;top:30px}}
@media (min-width:1024px){.lp-dots-bl{width:140px;height:180px;left:10px;bottom:120px}}
}
/* HEADLINE */
@media (min-width:1024px){.lp-headline{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 0 90px}}
@media (min-width:1024px){.lp-headline-pill{display:inline-flex;align-items:center;justify-content:center;background:#0047AB;border-radius:6px;padding:6px 22px;line-height:1}}
@media (min-width:1024px){.lp-headline-pill span{font-size:34px;font-weight:700;color:#FAFAFA;letter-spacing:-1px;line-height:1.3}}
@media (min-width:1024px){.lp-headline-main{margin:6px 0 0;font-size:40px;font-weight:700;line-height:1.32;color:#1A1A1A;letter-spacing:-1px;text-align:center}}
/* BUBBLES */
@media (min-width:1024px){.lp-bubbles{position:relative;width:100%;max-width:1100px;margin:0 auto 100px;display:flex;flex-direction:column;gap:18px}}
@media (min-width:1024px){.lp-bubble{display:inline-flex;align-items:center;gap:14px;padding:22px 36px;background:#FFFFFF;border:1px solid rgba(0,0,0,0.08);border-radius:40px;width:fit-content;max-width:90%;box-sizing:border-box;box-shadow:0 0 10px 5px rgba(0,0,0,.03)}}
.lp-bubble-1{align-self:flex-start;margin-left:8%}
.lp-bubble-2{align-self:flex-end;margin-right:0}
.lp-bubble-3{align-self:flex-start;margin-left:0}
.lp-bubble-4{align-self:flex-end;margin-right:5%}
.lp-bubble-oval{border-radius:60px;padding:22px 40px}
@media (min-width:1024px){.lp-bubble-avatar{flex-shrink:0;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center}}
@media (min-width:1024px){.lp-bubble-avatar svg{width:30px;height:30px;display:block}}
@media (min-width:1024px){.lp-bubble-text{font-size:22px;font-weight:600;line-height:1.46;color:#1A1A1A;letter-spacing:-.4px}}
/* TRANSITION */
@media (min-width:1024px){.lp-transition{text-align:center;margin:0 auto 90px}}
@media (min-width:1024px){.lp-transition-title{margin:0 auto;font-size:30px;font-weight:700;line-height:1.17;color:#1A1A1A;letter-spacing:-.6px}}
@media (min-width:1024px){.lp-transition-divider{width:677px;max-width:88%;height:3px;background:#0047AB;border-radius:2px;margin:14px auto 28px}}
@media (min-width:1024px){.lp-transition-sub{margin:0;font-size:24px;font-weight:400;line-height:1.46;color:#1A1A1A;letter-spacing:-.4px}}
/* VERTICAL LINE */
.lp-vert-line{display:block;width:1px;height:60px;background:rgba(0,0,0,.2);margin:0 auto 90px}
/* SERVICE INTRO */
@media (min-width:1024px){.lp-service{text-align:center;margin:0 auto 120px}}
@media (min-width:1024px){.lp-service-intro{margin:0 0 36px;font-size:30px;font-weight:700;line-height:1.37;color:#1A1A1A;letter-spacing:-.5px}}
@media (min-width:1024px){.lp-service-free{margin:0;font-size:50px;font-weight:800;line-height:1.05;color:#0047AB;letter-spacing:-1.5px}}
/* SPECIAL (さらに) */
@media (min-width:1024px){.lp-special{text-align:center;margin:0 0 60px}}
@media (min-width:1024px){.lp-more-label{margin:0 0 18px;font-size:28px;font-weight:500;color:rgba(26,26,26,.5);letter-spacing:-.4px}}
@media (min-width:1024px){.lp-special-intro{margin:0;font-size:30px;font-weight:700;line-height:1.47;color:#1A1A1A;letter-spacing:-.5px}}
/* BULLETS */
/* CTA BANNER — text left, button right */
@media (max-width:1023.98px){
@media (min-width:1024px){.lp-concerns{padding:70px 0 80px}}
.lp-concerns-inner{padding:0 24px}
@media (min-width:1024px){.lp-headline{margin-bottom:50px;gap:6px}}
@media (min-width:1024px){.lp-headline-pill span{font-size:24px}}
@media (min-width:1024px){.lp-headline-main{font-size:26px}}
@media (min-width:1024px){.lp-bubble{padding:16px 22px;border-radius:30px;max-width:100%}}
.lp-bubble-oval{border-radius:40px}
@media (min-width:1024px){.lp-bubble-text{font-size:15px;line-height:1.5}}
.lp-bubble-1,.lp-bubble-3{margin-left:0}
.lp-bubble-2,.lp-bubble-4{margin-right:0}
@media (min-width:1024px){.lp-bubbles{margin-bottom:60px}}
@media (min-width:1024px){.lp-transition-title{font-size:20px}}
@media (min-width:1024px){.lp-transition-divider{margin-top:10px;margin-bottom:22px}}
@media (min-width:1024px){.lp-transition-sub{font-size:16px}}
@media (min-width:1024px){.lp-transition{margin-bottom:60px}}
.lp-vert-line{margin-bottom:60px}
@media (min-width:1024px){.lp-service{margin-bottom:80px}}
@media (min-width:1024px){.lp-service-intro{font-size:20px}}
@media (min-width:1024px){.lp-service-free{font-size:32px}}
@media (min-width:1024px){.lp-more-label{font-size:20px;margin-bottom:14px}}
@media (min-width:1024px){.lp-special-intro{font-size:20px}}
@media (min-width:1024px){.lp-bullets{margin-bottom:70px;gap:18px}}
@media (min-width:1024px){.lp-bullets li{font-size:16px;align-items:flex-start;gap:12px}}
@media (min-width:1024px){.lp-bullet-icon{width:24px;height:24px;margin-top:2px}}
@media (min-width:1024px){.lp-cta{padding:30px 24px;flex-direction:column;text-align:center;min-height:auto;gap:20px}}
@media (min-width:1024px){.lp-cta-text{font-size:18px;text-align:center}}
@media (min-width:1024px){.lp-cta-btn{width:200px;height:52px;font-size:18px}}
@media (min-width:1024px){.lp-dots-tr{width:140px;height:100px;right:20px;top:80px}}
@media (min-width:1024px){.lp-dots-bl{width:160px;height:200px;left:10px;bottom:380px}}
}
/* ═══ 業者選び → お悩み → 特典 → CTA セクション v5 (Figma 544:758 厳密) ═══ */
@media (min-width:1024px){.lp-concerns{position:relative;background:#F8F9FB;padding:80px 0 24px;overflow:hidden}}
.lp-concerns-inner{position:relative;z-index:2;max-width:1480px;margin:0 auto;padding:0 60px;zoom:0.7}
/* dot pattern */
@media (min-width:1024px){.lp-dots{position:absolute;pointer-events:none;z-index:1;background-size:contain;background-repeat:no-repeat;background-position:center}}
@media (min-width:1024px){.lp-dots-tr{top:160px;right:0;width:322px;height:176px;background-image:url("/wp-content/themes/taian-bridge-rwd/assets/images/concerns-dots-tr.webp")}}
@media (min-width:1024px){.lp-dots-bl{top:742px;left:0;width:238px;height:369px;background-image:url("/wp-content/themes/taian-bridge-rwd/assets/images/concerns-dots-bl.webp")}}
/* HEADLINE — 業者選び、(青ピル) + こんなお悩みありませんか? */
@media (min-width:1024px){.lp-headline{display:flex;flex-direction:column;align-items:center;gap:9px;margin:0 0 70px}}
@media (min-width:1024px){.lp-headline-pill{display:inline-flex;align-items:center;justify-content:center;background:#0047AB;width:186px;height:60px;border-radius:0;box-sizing:border-box;white-space:nowrap;overflow:visible}}
@media (min-width:1024px){.lp-headline-pill span{font-size:40px;font-weight:700;line-height:53px;color:#FAFAFA;letter-spacing:-2px;white-space:nowrap;display:inline-block;transform:translateX(12px)}}
@media (min-width:1024px){.lp-headline-main{margin:0;font-size:40px;font-weight:700;line-height:53px;color:#1A1A1A;letter-spacing:-1px;text-align:center}}
/* BUBBLES — 4個、スペック幅 + 40px 間隔 */
@media (min-width:1024px){.lp-bubbles{position:relative;width:100%;max-width:1100px;margin:0 auto 100px;display:flex;flex-direction:column;gap:40px}}
@media (min-width:1024px){.lp-bubble{display:inline-flex;align-items:center;gap:14px;padding:22px 36px;background:#FFFFFF;border:1px solid rgba(0,0,0,0.08);border-radius:40px;box-sizing:border-box;box-shadow:0 0 10px 5px rgba(0,0,0,.03);min-height:80px}}
.lp-bubble-1{align-self:flex-start;width:709px;max-width:90%;margin-left:85px}
.lp-bubble-2{align-self:flex-end;width:781px;max-width:90%;margin-right:0}
.lp-bubble-3{align-self:flex-start;width:846px;max-width:96%;margin-left:85px}
.lp-bubble-4{align-self:flex-end;width:734px;max-width:90%;border-radius:60px;min-height:114px;padding:22px 40px}
@media (min-width:1024px){.lp-bubble-avatar{flex-shrink:0;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center}}
@media (min-width:1024px){.lp-bubble-avatar svg{width:30px;height:30px;display:block}}
@media (min-width:1024px){.lp-bubble-text{font-size:24px;font-weight:600;line-height:35px;color:#1A1A1A;letter-spacing:-.4px}}
@media (min-width:1024px){.lp-bubble-text .lp-emph{font-style:normal;font-weight:700;color:#C00000}}
/* TRANSITION */
@media (min-width:1024px){.lp-transition{text-align:center;margin:0 auto 56px}}
@media (min-width:1024px){.lp-transition-title{margin:0 auto;font-size:30px;font-weight:700;line-height:35px;color:#1A1A1A;letter-spacing:-.6px}}
@media (min-width:1024px){.lp-transition-divider{width:677px;max-width:88%;height:3px;background:#0047AB;border-radius:2px;margin:6px auto 21px}}
@media (min-width:1024px){.lp-transition-sub{margin:0 auto;font-size:24px;font-weight:400;line-height:35px;color:#1A1A1A;letter-spacing:-.4px}}
/* VERTICAL LINE (Vector 46) */
.lp-vert-line{display:block;width:1px;height:60px;background:rgba(0,0,0,.2);margin:0 auto 56px}
/* SERVICE INTRO */
@media (min-width:1024px){.lp-service{text-align:center;margin:0 auto 114px}}
@media (min-width:1024px){.lp-service-intro{margin:0 0 33px;font-size:30px;font-weight:700;line-height:41px;color:#1A1A1A;letter-spacing:-.5px}}
@media (min-width:1024px){.lp-service-free{margin:0;font-size:50px;font-weight:800;line-height:1;color:#0047AB;letter-spacing:-1.5px}}
/* さらに— + 特典 */
@media (min-width:1024px){.lp-special{text-align:center;margin:0 0 46px}}
@media (min-width:1024px){.lp-more-label{margin:0 0 16px;font-size:28px;font-weight:500;line-height:36px;color:rgba(26,26,26,.5);letter-spacing:-.4px}}
@media (min-width:1024px){.lp-special-intro{margin:0;font-size:30px;font-weight:700;line-height:44px;color:#1A1A1A;letter-spacing:-.5px}}
/* BULLETS */
@media (min-width:1024px){.lp-bullets{list-style:none;padding:0;margin:0 auto 64px;max-width:740px;display:flex;flex-direction:column;gap:25px}}
@media (min-width:1024px){.lp-bullets li{display:flex;align-items:center;gap:18px;font-size:24px;font-weight:500;line-height:35px;color:#1A1A1A;letter-spacing:-.4px}}
@media (min-width:1024px){.lp-bullets li strong{font-weight:700;color:#1A1A1A}}
@media (min-width:1024px){.lp-bullet-icon{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:#2BB0EE;display:inline-flex;align-items:center;justify-content:center}}
.lp-bullet-arrow{display:block;width:16px;height:11px}
/* CTA BANNER */
@media (min-width:1024px){.lp-cta{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px;background:#00064B url("/wp-content/themes/taian-bridge-rwd/assets/images/cta-bg-navy.webp") left center / cover no-repeat;border-radius:20px;padding:0 64px;width:1100px;max-width:100%;height:230px;margin:0 auto;box-sizing:border-box;overflow:hidden}}
@media (min-width:1024px){.lp-cta-text{position:relative;z-index:2;margin:0;font-size:28px;font-weight:600;line-height:35px;color:#FFFFFF;letter-spacing:-.4px;text-align:left;flex:0 0 auto;max-width:480px;white-space:normal}}
@media (min-width:1024px){.lp-cta-btn{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:12px;width:227px;height:58px;background:#FAFAFA;border-radius:10px;color:#00064B;font-size:22px;font-weight:600;text-decoration:none;flex-shrink:0;transition:transform .15s,box-shadow .2s}}
@media (min-width:1024px){.lp-cta-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.28)}}
@media (min-width:1024px){.lp-cta-arrow{display:inline-block;width:11px;height:11px;border-right:2.5px solid #00064B;border-bottom:2.5px solid #00064B;transform:rotate(-45deg);margin-top:-2px}}
/* ASSET PROTECTION BANNER (full-width, outside zoomed inner) */
.lp-asset-protection{position:relative;width:100%;height:300px;background:url("/wp-content/themes/taian-bridge-rwd/images/asset-protection-bg.webp") center -53px / 100% 300px no-repeat;display:flex;align-items:center;justify-content:center;margin:0 0 0;box-sizing:border-box;overflow:hidden}
.lp-asset-protection-inner{width:100%;text-align:center;padding:0 24px;box-sizing:border-box}
.lp-asset-protection-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#000B83;margin:0 auto 16px;line-height:0;padding:0}
.lp-asset-protection-icon img,.lp-asset-protection-shield{display:block;width:17px;height:21px;margin:0;padding:0;flex:0 0 auto}
.lp-asset-protection-title{margin:0 0 18px;font-size:30px;font-weight:700;line-height:1.35;color:#1A1A1A;letter-spacing:-.6px}
.lp-asset-protection-lead{margin:0 0 14px;font-size:18px;font-weight:600;line-height:1.6;color:#1A1A1A;letter-spacing:-.3px}
.lp-asset-protection-note{margin:0 auto;font-family:'Pretendard JP',sans-serif;font-size:11px;font-weight:300;line-height:18px;color:rgba(26,26,26,.7);letter-spacing:normal;max-width:389px;text-align:center}
.lp-asset-protection-note-tight{letter-spacing:-1px}
.lp-concerns-inner-cta{padding-top:0!important}
@media (max-width:1200px){
.lp-bubble-1{width:520px;margin-left:30px}
.lp-bubble-2{width:580px}
.lp-bubble-3{width:640px;margin-left:30px}
.lp-bubble-4{width:560px}
}
@media (max-width:1023.98px){
@media (min-width:1024px){.lp-concerns{padding:70px 0 80px}}
.lp-concerns-inner{padding:0 24px}
@media (min-width:1024px){.lp-headline{margin-bottom:60px;gap:8px}}
@media (min-width:1024px){.lp-headline-pill{width:auto;height:42px;padding:0 16px}}
@media (min-width:1024px){.lp-headline-pill span{font-size:24px;line-height:42px}}
@media (min-width:1024px){.lp-headline-main{font-size:26px;line-height:1.32}}
@media (min-width:1024px){.lp-bubble{padding:16px 22px;border-radius:30px;width:100%!important;margin:0!important;min-height:auto}}
.lp-bubble-4{border-radius:30px;min-height:auto}
@media (min-width:1024px){.lp-bubble-text{font-size:15px;line-height:1.5}}
@media (min-width:1024px){.lp-bubbles{margin-bottom:60px;gap:18px}}
@media (min-width:1024px){.lp-transition-title{font-size:20px;line-height:1.3}}
@media (min-width:1024px){.lp-transition-divider{margin-top:10px;margin-bottom:22px}}
@media (min-width:1024px){.lp-transition-sub{font-size:16px;line-height:1.5}}
@media (min-width:1024px){.lp-transition{margin-bottom:40px}}
.lp-vert-line{margin-bottom:40px}
@media (min-width:1024px){.lp-service{margin-bottom:70px}}
@media (min-width:1024px){.lp-service-intro{font-size:20px;line-height:1.4}}
@media (min-width:1024px){.lp-service-free{font-size:32px}}
@media (min-width:1024px){.lp-more-label{font-size:20px;margin-bottom:14px}}
@media (min-width:1024px){.lp-special-intro{font-size:20px;line-height:1.5}}
@media (min-width:1024px){.lp-bullets{margin-bottom:50px;gap:18px}}
@media (min-width:1024px){.lp-bullets li{font-size:16px;align-items:flex-start;gap:12px;line-height:1.5}}
@media (min-width:1024px){.lp-bullet-icon{width:24px;height:24px;margin-top:2px}}
@media (min-width:1024px){.lp-cta{padding:30px 24px;flex-direction:column;text-align:center;min-height:auto;gap:20px}}
@media (min-width:1024px){.lp-cta-text{font-size:18px;text-align:center}}
@media (min-width:1024px){.lp-cta-btn{width:200px;height:52px;font-size:18px}}
@media (min-width:1024px){.lp-dots-tr{width:140px;height:100px;right:20px;top:80px}}
@media (min-width:1024px){.lp-dots-bl{width:160px;height:200px;left:10px;bottom:560px}}
.lp-asset-protection{height:auto;padding:48px 0;margin-bottom:48px;background-size:cover}
.lp-asset-protection-inner{padding:0 20px}
.lp-asset-protection-icon{width:36px;height:36px;margin-bottom:14px}
.lp-asset-protection-icon img{width:15px;height:18px}
.lp-asset-protection-title{font-size:20px;margin-bottom:14px;line-height:1.4}
.lp-asset-protection-lead{font-size:14px;margin-bottom:12px;line-height:1.6}
.lp-asset-protection-note{font-size:10px;line-height:1.65}
}
/* ─── Mini dropdown (比較申込 / 比較状況) ─── */
.nav-item-mini-dd{position:relative}
.mini-dropdown{display:none !important;position:absolute !important;top:100% !important;left:50% !important;transform:translateX(-50%) !important;background:#F9F9F9 !important;border-radius:0 !important;padding:0 !important;box-shadow:0 8px 16px rgba(0,0,0,.2) !important;height:auto !important;z-index:200 !important;flex-direction:column !important;margin-top:0 !important;gap:0 !important;list-style:none;width:79.56px !important;min-width:0 !important;box-sizing:border-box}
.mini-dropdown::before{display:none}
.nav-item-mini-dd:hover .mini-dropdown,.mini-dropdown:hover{display:flex !important}
.mini-dropdown li{flex:0 0 auto;width:100%;list-style:none;margin:0;padding:0}
.mini-dropdown li a{display:flex;align-items:center;justify-content:center;height:25.27px;padding:2px 6px;white-space:normal;font-size:10px;font-weight:500;line-height:1.15;color:#1A1A1A;text-decoration:none;transition:background .15s,color .15s;letter-spacing:-.3px;margin:0;text-align:center;box-sizing:border-box}
.mini-dropdown li a:hover{background:#F4F6FB;color:#0047AB}
/* 比較申込 (blue) / 比較状況 (red) nav 色分け */
/* 比較申込 (RED button) / 比較状況 (BLUE button) - solid color buttons */
.nav-item-blue > a,.nav-item-red > a{display:inline-flex !important;align-items:center;justify-content:center;width:62.4px !important;height:24.56px !important;padding:0 !important;border-radius:0;line-height:1.2;color:#FFFFFF !important;font-weight:600;font-size:12px;letter-spacing:-.3px;transition:background .15s;text-decoration:none;box-sizing:border-box;pointer-events:none;cursor:default}
/* Note: class names "blue"/"red" kept for stability — 申込 uses .nav-item-blue, 状況 uses .nav-item-red */
.nav-item-blue > a{background:#C00000} /* 比較申込 — RED */
.nav-item-blue:hover > a{background:#A00000}
.nav-item-red > a{background:#0047AB} /* 比較状況 — BLUE */
.nav-item-red:hover > a{background:#003580}
.mini-dropdown-blue li a:hover{background:#C00000;color:#FFFFFF}
.mini-dropdown-red li a:hover{background:#0047AB;color:#FFFFFF}
.nav-item-mini-dd + .nav-item-mini-dd{margin-left:-10px}
/* 比較申込 / 比較状況 dropdown — ボタン幅・左右のラインに正確に一致 */
.mini-dropdown-blue{width:100% !important;left:0 !important;right:auto !important;transform:none !important}
.mini-dropdown-red{width:100% !important;left:0 !important;right:auto !important;transform:none !important}
html{max-width:100%}
/* footer disclaimer */
.footer-disclaimer{margin-top:34px;padding-top:28px;border-top:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.6);font-size:10.08px;line-height:1.9}
.footer-disclaimer-title{font-size:11.76px;font-weight:700;color:rgba(255,255,255,.88);margin:0 0 14px}
.footer-disclaimer p{margin:0 0 12px}
.footer-disclaimer-corp{margin-top:18px;color:rgba(255,255,255,.72)}
.m-footer-disclaimer{margin:14px 16px 0 25px;padding-top:14px;border-top:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.6);font-size:11.55px;line-height:1.85}
.m-footer-disclaimer h3{font-size:12.6px;font-weight:700;color:rgba(255,255,255,.88);margin:0 0 10px}
.m-footer-disclaimer p{margin:0 0 10px}
.m-footer-disclaimer .footer-disclaimer-corp{margin-top:14px}
/* footer rep names alignment */
.footer-disclaimer-corp .fdc-rep{display:inline-flex;vertical-align:top}
.footer-disclaimer-corp .fdc-rep-label{flex:0 0 auto;white-space:nowrap}
.footer-disclaimer-corp .fdc-rep-names{flex:1 1 auto}
.m-footer-disclaimer .footer-disclaimer-corp .fdc-rep{display:inline-flex}
/* ─── お問い合わせ内 共感メッセージ ─── */
.contact-quote{font-size:20px;font-weight:700;color:#fafafa;line-height:1.6;margin:16px 0 10px;letter-spacing:-0.3px}
.contact-message{font-size:15px;font-weight:400;color:#fafafa;line-height:28px;margin:0}
/* 体験談の免責 (コンプライアンス 2026-07-30) */
.rv-disclaimer{max-width:1450px;margin:20px auto 0;padding:0 24px;}
.rv-disclaimer p{margin:0;padding:14px 18px;background:#f6f7f9;border-left:3px solid #9aa6b5;color:#5a6472;font-size:13px;line-height:1.8;}
@media (max-width:1023.98px){
.rv-disclaimer{padding:0 16px;margin-top:14px;}
.rv-disclaimer p{font-size:12px;padding:12px 14px;}
}
/* ヒーロー見出しの折り返し(SEO用に長くなったH1/H2を2行に収める) */
.hub-hero-title,.hub-hero-sub,.gm-hero-title,.gm-hero-sub,.cs-hero-title,.cs-hero-sub,.fxp-hero-title,.fxp-hero-sub,.rc-hero-title,.rc-hero-sub,.pn-hero-title,.pn-hero-sub,.rv-hero-title,.rv-hero-sub,.fx-hero-title,.fx-hero-sub,.co-hero-title,.co-hero-sub,.oc-title,.oc-sub,.legal-hero-title,.legal-hero-sub{white-space:normal!important;word-break:normal!important;overflow-wrap:anywhere;line-break:strict;max-width:min(1200px,100%);min-width:0;box-sizing:border-box;text-wrap:balance}
.hub-hero-title,.gm-hero-title,.cs-hero-title,.fxp-hero-title,.rc-hero-title,.pn-hero-title,.rv-hero-title{font-size:40px!important;line-height:1.3!important;letter-spacing:0!important}
@media (max-width:1023.98px){
.hub-hero-title,.gm-hero-title,.cs-hero-title,.fxp-hero-title,.rc-hero-title,.pn-hero-title,.rv-hero-title,.fx-hero-title,.co-hero-title{font-size:21px!important;line-height:1.4!important;letter-spacing:0!important}
}
.page-safety-bridge .legal-hero-sub{font-size:19px!important;line-height:1.6}
@media (max-width:1023.98px){
.page-safety-bridge .legal-hero-sub{font-size:14px!important}
}
/* ヘッダーCTA: 「比較・申し込み」単独ボタン (2026-09-22)
旧構成は 2ボタン+ミニドロップダウンで、クラス名 blue/red は実際の色と逆。
さらに旧ボタンは pointer-events:none(ドロップダウン用)だったため、ここで上書きする。 */
.header-cta .nav-item-mini-dd > a{
width:auto !important;padding:0 14px !important;height:24.56px !important;
background:#000B83 !important;pointer-events:auto !important;cursor:pointer;
border-radius:4px;white-space:nowrap}
.header-cta .nav-item-mini-dd:hover > a{background:#C00000 !important}
/* /wp-content/themes/taian-bridge-rwd/pages.css */
/* ===================================================
Taian Bridge - Page Templates Stylesheet
=================================================== */
/* --- Hero Section (shared) --- */
.pg-hero {
position: relative;
height: 950px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
}
.pg-hero-overlay {
position: absolute;
inset: 0;
background: rgba(0, 11, 131, 0.45);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
.pg-hero-content {
position: relative;
z-index: 2;
text-align: center;
}
.pg-hero-title {
font-size: 48px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
color: #fafafa;
line-height: 1.3em;
margin: 0 0 20px;
}
.pg-hero-subtitle {
font-size: 25px;
font-weight: 400;
color: #fafafa;
line-height: 1.4em;
margin: 0;
}
/* --- Page common --- */
.pg {
background: #fff;
}
.pg-section {
padding: 100px 0;
}
.pg-section-gray {
background: #f5f7fa;
}
.pg-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.section-title-center {
text-align: center;
font-size: 32px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 60px;
line-height: 1.4em;
}
/* --- Text helpers --- */
.text-blue {
color: #0047ab;
font-weight: 700;
}
/* ===================================================
1. Company Info
=================================================== */
.company-intro {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.company-intro-text {
font-size: 18px;
line-height: 1.8em;
color: #333;
margin-bottom: 30px;
}
.company-criteria-title {
text-align: center;
font-size: 28px;
font-weight: 400;
color: #1a1a1a;
margin-bottom: 60px;
line-height: 1.5em;
}
.company-criteria-title strong {
font-weight: 700;
color: #0047ab;
}
.criteria-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
max-width: 1900px;
margin: 0 auto;
}
.criteria-card {
background: #fff;
border-radius: 25px;
padding: 35px 30px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
min-height: 247px;
width: 100%;
max-width: 432px;
}
.criteria-badge {
display: inline-block;
background: #438caf;
color: #fff;
font-size: 14px;
font-weight: 700;
padding: 4px 14px;
border-radius: 20px;
margin-bottom: 16px;
min-width: 41px;
text-align: center;
}
.criteria-card-title {
font-size: 27px;
font-weight: 700;
color: #438caf;
margin: 0 0 12px;
line-height: 1.3em;
}
.criteria-card-desc {
font-size: 18px;
font-weight: 400;
line-height: 25px;
color: #555;
margin: 0;
}
.company-bottom {
position: relative;
min-height: 500px;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.company-bottom-overlay {
position: absolute;
inset: 0;
background: rgba(0, 11, 131, 0.6);
}
.company-bottom-content {
position: relative;
z-index: 2;
text-align: center;
padding: 60px 20px;
}
.company-bottom-logo {
width: 160px;
margin-bottom: 30px;
}
.company-bottom-divider {
width: 60px;
height: 3px;
background: #e63946;
margin: 0 auto 30px;
}
.company-bottom-text {
font-size: 28px;
font-weight: 700;
color: #fafafa;
line-height: 1.4em;
margin-bottom: 15px;
}
.company-bottom-text-sub {
font-size: 18px;
color: rgba(250,250,250,0.8);
line-height: 1.6em;
}
/* ===================================================
2. Recruit
=================================================== */
.recruit-position {
display: flex;
gap: 60px;
align-items: flex-start;
margin-bottom: 100px;
}
.recruit-position:last-child {
margin-bottom: 0;
}
.recruit-reverse {
flex-direction: row-reverse;
}
.recruit-img-wrap {
flex-shrink: 0;
width: 485px;
}
.recruit-img-wrap img {
width: 100%;
border-radius: 30px;
display: block;
object-fit: cover;
}
.recruit-info {
flex: 1;
}
.recruit-icon-wrap {
margin-bottom: 16px;
}
.recruit-icon {
width: 48px;
height: 48px;
}
.recruit-position-title {
font-size: 35px;
font-weight: 800;
margin: 0 0 20px;
line-height: 1.3em;
}
.color-navy { color: #0047ab; }
.color-teal { color: #438caf; }
.recruit-desc {
font-size: 18px;
line-height: 1.7em;
color: #444;
margin-bottom: 30px;
}
.recruit-details {
display: flex;
gap: 40px;
}
.recruit-detail-col h4 {
font-size: 18px;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 12px;
line-height: 1.4em;
}
.recruit-detail-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.recruit-detail-col li {
font-size: 15px;
line-height: 1.8em;
color: #555;
padding-left: 16px;
position: relative;
}
.recruit-detail-col li::before {
content: "\00B7";
position: absolute;
left: 0;
color: #0047ab;
font-weight: 700;
}
.recruit-table-title {
font-size: 32px;
font-weight: 700;
text-align: center;
margin-bottom: 40px;
line-height: 1.3em;
}
.recruit-table-card {
background: #fff;
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
max-width: 1526px;
margin: 0 auto;
overflow: hidden;
border-top: 3px solid #000b83;
}
.recruit-table {
width: 100%;
border-collapse: collapse;
}
.recruit-table thead th {
background: #fafafa;
font-size: 15px;
font-weight: 600;
color: #333;
padding: 18px 20px;
text-align: left;
border-bottom: 1px solid #e5e5e5;
}
.recruit-table tbody td {
font-size: 15px;
padding: 16px 20px;
border-bottom: 1px solid #f0f0f0;
color: #444;
}
.status-badge {
display: inline-block;
padding: 4px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
}
.badge-green { background: #e6f9ee; color: #0a8f3c; }
.badge-blue { background: #e8f0fe; color: #0047ab; }
.badge-gray { background: #f0f0f0; color: #888; }
/* ===================================================
3 & 5. Apply Forms
=================================================== */
.apply-form-card {
max-width: 1000px;
margin: 0 auto;
background: #fff;
border-radius: 40px;
box-shadow: 0 8px 40px rgba(0,0,0,0.1);
padding: 60px 80px;
}
.apply-form-title {
font-size: 32px;
font-weight: 700;
color: #1a1a1a;
text-align: center;
margin: 0 0 10px;
line-height: 1.4em;
}
.apply-form-desc {
font-size: 16px;
color: #777;
text-align: center;
margin: 0 0 40px;
line-height: 1.5em;
}
.apply-form .form-group {
margin-bottom: 24px;
}
.apply-form label {
display: block;
font-size: 15px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
}
.apply-form input,
.apply-form select,
.apply-form textarea {
width: 100%;
padding: 14px 18px;
border: 1px solid #ddd;
border-radius: 12px;
font-size: 15px;
font-family: "Pretendard JP Variable", "Pretendard JP", sans-serif;
background: #fafafa;
transition: border-color 0.2s;
box-sizing: border-box;
}
.apply-form input:focus,
.apply-form select:focus,
.apply-form textarea:focus {
outline: none;
border-color: #0047ab;
background: #fff;
}
.apply-form .form-row {
display: flex;
gap: 20px;
}
.apply-form .form-row .form-group {
flex: 1;
}
.btn-submit-red {
display: block;
width: 258px;
height: 75px;
margin: 30px auto 0;
background: #e63946;
color: #fff;
border: none;
border-radius: 12px;
font-size: 20px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s;
font-family: "Pretendard JP Variable", "Pretendard JP", sans-serif;
}
.btn-submit-red:hover {
background: #c5303c;
}
/* Steps Vertical */
.steps-vertical {
max-width: 700px;
margin: 0 auto;
position: relative;
}
.step-item {
display: flex;
gap: 30px;
align-items: flex-start;
position: relative;
margin-bottom: 50px;
}
.step-item:last-child {
margin-bottom: 0;
}
.step-circle {
flex-shrink: 0;
width: 70px;
height: 70px;
background: #438caf;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
}
.step-circle img {
width: 32px;
height: 32px;
filter: brightness(0) invert(1);
}
.step-line {
position: absolute;
left: 35px;
top: 70px;
width: 2px;
height: calc(100% + 50px - 70px);
background: #438caf;
opacity: 0.3;
}
.step-item:last-child .step-line {
display: none;
}
.step-text {
padding-top: 12px;
}
.step-title {
font-size: 35px;
font-weight: 700;
color: #438caf;
margin: 0 0 10px;
line-height: 1.3em;
}
.step-text p {
font-size: 16px;
color: #555;
line-height: 1.6em;
margin: 0;
}
/* Notice Card */
.notice-card {
max-width: 967px;
margin: 0 auto;
background: #fff;
border-radius: 30px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
padding: 40px 50px;
}
.notice-card-title {
font-size: 24px;
font-weight: 700;
color: #e63946;
margin: 0 0 20px;
line-height: 1.3em;
}
.notice-list {
list-style: none;
padding: 0;
margin: 0;
}
.notice-list li {
font-size: 16px;
line-height: 1.8em;
color: #444;
padding: 8px 0 8px 24px;
position: relative;
}
.notice-list li::before {
content: "";
position: absolute;
left: 0;
top: 16px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #e63946;
}
/* ===================================================
4 & 6. Product Pages
=================================================== */
.product-intro {
max-width: 900px;
margin: 0 auto 50px;
text-align: center;
}
.product-intro-title {
font-size: 32px;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 20px;
line-height: 1.4em;
}
.product-intro-text {
font-size: 18px;
line-height: 1.8em;
color: #555;
}
.product-glass-card {
max-width: 900px;
margin: 0 auto;
background: rgba(0, 71, 171, 0.05);
border: 1px solid rgba(0, 71, 171, 0.15);
border-radius: 20px;
padding: 40px;
backdrop-filter: blur(10px);
}
.product-glass-card p {
font-size: 17px;
line-height: 1.8em;
color: #333;
margin: 0;
text-align: center;
}
.feature-cards-list {
display: flex;
flex-direction: column;
gap: 24px;
max-width: 1055px;
margin: 0 auto;
}
.feature-card-wide {
display: flex;
align-items: center;
gap: 30px;
background: #fff;
border-radius: 30px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
padding: 30px 40px;
min-height: 171px;
}
.feature-card-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.feature-card-icon img {
width: 48px;
height: 48px;
object-fit: contain;
}
.feature-card-body h3 {
font-size: 22px;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 8px;
line-height: 1.4em;
}
.feature-card-body p {
font-size: 16px;
color: #555;
line-height: 1.6em;
margin: 0;
}
/* Benefits Grid */
.benefits-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
max-width: 900px;
margin: 0 auto;
}
.benefit-item {
display: flex;
align-items: center;
gap: 12px;
font-size: 17px;
color: #333;
line-height: 1.5em;
}
.benefit-check {
width: 28px;
height: 28px;
flex-shrink: 0;
}
/* Timeline Horizontal */
.timeline-horizontal {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
max-width: 900px;
margin: 0 auto;
}
.timeline-step {
text-align: center;
flex-shrink: 0;
}
.timeline-num {
width: 60px;
height: 60px;
border-radius: 50%;
background: #000b83;
color: #fff;
font-size: 24px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
line-height: 1em;
}
.timeline-step p {
font-size: 15px;
color: #333;
font-weight: 600;
margin: 0;
line-height: 1.4em;
}
.timeline-line {
width: 80px;
height: 2px;
background: #000b83;
opacity: 0.3;
margin-bottom: 28px;
}
/* ===================================================
7. Reviews
=================================================== */
.review-coupon-banner {
display: flex;
align-items: center;
gap: 40px;
background: linear-gradient(135deg, #000b83, #0047ab);
border-radius: 20px;
padding: 40px 60px;
margin-bottom: 40px;
color: #fff;
}
.coupon-img {
width: 200px;
height: auto;
}
.coupon-title {
font-size: 20px;
margin: 0 0 8px;
line-height: 1.4em;
}
.coupon-amount {
font-size: 42px;
font-weight: 800;
margin: 0 0 10px;
line-height: 1.3em;
}
.coupon-unit {
font-size: 24px;
font-weight: 400;
}
.coupon-badge {
display: inline-block;
background: #e63946;
color: #fff;
font-size: 18px;
font-weight: 700;
padding: 6px 20px;
border-radius: 20px;
}
.review-contact-btns {
display: flex;
gap: 20px;
justify-content: center;
margin-bottom: 60px;
}
.btn-contact-chat {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 40px;
background: #e63946;
color: #fff;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
}
.btn-contact-chat:hover { background: #c5303c; }
.btn-contact-phone {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 40px;
background: transparent;
color: #e63946;
border: 2px solid #e63946;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
}
.btn-contact-phone:hover { background: #e63946; color: #fff; }
.review-incentive {
text-align: center;
margin-bottom: 60px;
}
.review-incentive h3 {
font-size: 28px;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 10px;
line-height: 1.4em;
}
.review-incentive p {
font-size: 18px;
color: #555;
line-height: 1.5em;
}
.review-featured {
display: flex;
gap: 30px;
margin-bottom: 60px;
}
.review-featured-card {
flex: 1;
max-width: 723px;
min-height: 344px;
background: #fff;
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
padding: 35px 40px;
display: flex;
flex-direction: column;
}
.review-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.review-type-badge {
display: inline-block;
background: #0047ab;
color: #fff;
font-size: 13px;
font-weight: 600;
padding: 4px 14px;
border-radius: 20px;
}
.review-type-badge.badge-binary {
background: #438caf;
}
.review-stars {
color: #ffc107;
font-size: 20px;
letter-spacing: 2px;
}
.review-card-title {
font-size: 22px;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 16px;
line-height: 1.4em;
}
.review-card-text {
font-size: 16px;
color: #555;
line-height: 1.7em;
flex: 1;
}
.review-card-footer {
display: flex;
justify-content: space-between;
font-size: 14px;
color: #999;
margin-top: 20px;
}
.review-list {
display: flex;
flex-direction: column;
gap: 0;
}
.review-list-item {
display: flex;
align-items: center;
padding: 24px 0;
border-bottom: 1px solid #eee;
gap: 20px;
}
.review-list-content {
flex: 1;
}
.review-list-content h4 {
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
margin: 8px 0 6px;
line-height: 1.4em;
}
.review-list-content p {
font-size: 15px;
color: #888;
margin: 0 0 8px;
line-height: 1.5em;
}
@media (min-width:1024px){.review-tags {
display: flex;
gap: 8px;
}}
@media (min-width:1024px){.review-tags span {
font-size: 13px;
color: #0047ab;
}}
.review-list-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
font-size: 14px;
color: #999;
flex-shrink: 0;
}
.review-expand-btn {
background: none;
border: none;
font-size: 24px;
color: #999;
cursor: pointer;
padding: 8px;
flex-shrink: 0;
}
/* ===================================================
8. Partnership
=================================================== */
.partnership-welcome {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.partnership-logo {
width: 160px;
margin-bottom: 30px;
}
.partnership-welcome-title {
font-size: 32px;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 20px;
line-height: 1.4em;
}
.partnership-welcome-text {
font-size: 18px;
line-height: 1.8em;
color: #444;
margin-bottom: 20px;
}
.partnership-welcome-text-en {
font-size: 16px;
line-height: 1.7em;
color: #888;
font-style: italic;
}
.file-upload-area {
border: 2px dashed #ddd;
border-radius: 12px;
padding: 30px;
text-align: center;
background: #fafafa;
position: relative;
cursor: pointer;
transition: border-color 0.2s;
}
.file-upload-area:hover {
border-color: #0047ab;
}
.file-upload-area input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
border: none;
padding: 0;
}
.file-upload-label {
font-size: 15px;
color: #888;
display: block;
pointer-events: none;
}
/* ===================================================
9. Global Market
=================================================== */
.coming-soon-section {
min-height: 400px;
}
.coming-soon-container {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.coming-soon-icon {
width: 200px;
height: auto;
margin-bottom: 40px;
}
.coming-soon-title {
font-size: 36px;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 16px;
line-height: 1.3em;
}
.coming-soon-text {
font-size: 20px;
color: #888;
margin: 0 0 40px;
line-height: 1.5em;
}
.btn-back-main {
display: inline-block;
padding: 16px 40px;
width: 216px;
background: #e63946;
color: #fff;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
text-align: center;
transition: background 0.2s;
box-sizing: border-box;
}
.btn-back-main:hover { background: #c5303c; }
/* ===================================================
10. Customer Service
=================================================== */
.cs-tabs {
display: flex;
gap: 0;
margin-bottom: 40px;
border-bottom: 2px solid #e5e5e5;
}
.cs-tab {
padding: 16px 40px;
font-size: 18px;
font-weight: 600;
color: #888;
text-decoration: none;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
transition: all 0.2s;
}
.cs-tab:hover {
color: #333;
}
.cs-tab-active {
color: #fff;
background: #000b83;
border-radius: 8px 8px 0 0;
border-bottom-color: #000b83;
}
.cs-contact-cards {
display: flex;
gap: 30px;
margin-bottom: 50px;
}
.cs-contact-card {
flex: 1;
background: #fff;
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
padding: 35px 40px;
text-align: center;
}
.cs-contact-icon {
margin-bottom: 16px;
}
.cs-contact-icon img {
width: 48px;
height: 48px;
}
.cs-contact-card h3 {
font-size: 20px;
font-weight: 700;
color: #1a1a1a;
margin: 0 0 10px;
line-height: 1.4em;
}
.cs-contact-card p {
font-size: 18px;
color: #333;
margin: 0 0 6px;
line-height: 1.5em;
}
.cs-contact-hours {
font-size: 14px !important;
color: #999 !important;
}
.cs-notice-list {
margin-top: 20px;
}
.cs-notice-table {
width: 100%;
border-collapse: collapse;
}
.cs-notice-table td {
padding: 18px 16px;
border-bottom: 1px solid #f0f0f0;
font-size: 15px;
}
.notice-badge {
display: inline-block;
background: #00064b;
color: #fff;
font-size: 12px;
font-weight: 600;
padding: 4px 12px;
border-radius: 4px;
}
.notice-title {
color: #333;
font-weight: 500;
}
.notice-date {
color: #999;
text-align: right;
white-space: nowrap;
}
.cs-pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 40px;
}
.pagination-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 15px;
color: #666;
text-decoration: none;
transition: all 0.2s;
}
.pagination-btn:hover,
.pagination-btn.active {
background: #000b83;
color: #fff;
border-color: #000b83;
}
/* ===================================================
11 & 12. FAQ
=================================================== */
.faq-categories {
display: flex;
gap: 30px;
margin-bottom: 24px;
}
.faq-cat {
font-size: 16px;
color: #666;
text-decoration: none;
padding-bottom: 4px;
transition: color 0.2s;
}
.faq-cat:hover {
color: #000b83;
}
.faq-cat-active {
color: #000b83;
font-weight: 700;
border-bottom: 2px solid #000b83;
}
.faq-search {
display: flex;
gap: 12px;
margin-bottom: 40px;
}
.faq-search-input {
flex: 1;
padding: 14px 20px;
border: 1px solid #ddd;
border-radius: 12px;
font-size: 15px;
font-family: "Pretendard JP Variable", "Pretendard JP", sans-serif;
background: #fafafa;
}
.faq-search-input:focus {
outline: none;
border-color: #0047ab;
background: #fff;
}
.faq-search-btn {
padding: 14px 30px;
background: #000b83;
color: #fff;
border: none;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
font-family: "Pretendard JP Variable", "Pretendard JP", sans-serif;
transition: background 0.2s;
}
.faq-search-btn:hover {
background: #000960;
}
.faq-list {
display: flex;
flex-direction: column;
}
.faq-item {
border-bottom: 1px solid #eee;
}
.faq-question {
display: flex;
align-items: center;
gap: 16px;
padding: 22px 0;
cursor: pointer;
}
.faq-category-label {
display: inline-block;
font-size: 18px;
color: #000b83;
font-weight: 600;
min-width: 80px;
flex-shrink: 0;
}
.faq-question h4 {
flex: 1;
font-size: 20px;
font-weight: 600;
color: #1a1a1a;
margin: 0;
line-height: 1.4em;
}
.faq-toggle {
background: none;
border: none;
font-size: 24px;
color: #999;
cursor: pointer;
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.faq-answer {
display: none;
padding: 0 0 24px 96px;
}
.faq-item-open .faq-answer {
display: block;
}
.faq-answer p {
font-size: 16px;
line-height: 1.7em;
color: #555;
margin: 0 0 12px;
}
.faq-answer ul {
padding-left: 20px;
margin: 0 0 12px;
}
.faq-answer li {
font-size: 16px;
line-height: 1.8em;
color: #555;
}
/* ===================================================
Responsive
=================================================== */
@media (max-width: 1024px) {
.pg-hero { height: 600px; }
.pg-hero-title { font-size: 36px; }
.pg-hero-subtitle { font-size: 20px; }
.criteria-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.recruit-position { flex-direction: column; gap: 30px; }
.recruit-reverse { flex-direction: column; }
.recruit-img-wrap { width: 100%; }
.review-featured { flex-direction: column; }
.benefits-grid { grid-template-columns: repeat(2, 1fr); }
.apply-form-card { padding: 40px 30px; }
.timeline-horizontal { flex-wrap: wrap; gap: 16px; }
.timeline-line { width: 40px; }
}
@media (max-width:1023.98px) {
.pg-hero { height: 450px; }
.pg-hero-title { font-size: 28px; }
.pg-hero-subtitle { font-size: 18px; }
.pg-section { padding: 60px 0; }
.criteria-grid { grid-template-columns: 1fr; }
.recruit-details { flex-direction: column; gap: 20px; }
.benefits-grid { grid-template-columns: 1fr; }
.review-coupon-banner { flex-direction: column; text-align: center; padding: 30px; }
.review-contact-btns { flex-direction: column; align-items: center; }
.cs-contact-cards { flex-direction: column; }
.apply-form .form-row { flex-direction: column; gap: 0; }
.faq-search { flex-direction: column; }
.coupon-amount { font-size: 32px; }
.timeline-horizontal { flex-direction: column; align-items: center; }
.timeline-line { width: 2px; height: 30px; }
}
/* /wp-content/themes/taian-bridge-rwd/company.css */
/* ═══ COMPANY (Taian Bridge company intro) ─ Figma 1Zd6qSv9DebJX4pq8troe8 / 144:22 ═══ */
.page-company{position:relative;width:100%;background:#f8f9fb;color:#1a1a1a;overflow:hidden;--side-pad:clamp(16px, calc((100vw - 1040px) / 2), 440px)}
/* ── 1. HERO 400px — building image background + centered title/sub ── */
.co-hero{position:relative;width:100%;height:300px;overflow:hidden;margin-top:109px;background:#f8f9fb}
.co-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center center;background-repeat:no-repeat}
.co-hero-overlay{position:absolute;inset:0;background:rgba(255,255,255,.15);backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px)}
.co-hero-content{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:0 20px}
.co-hero-title{margin:0;font-size:48px;font-weight:800;line-height:56px;letter-spacing:1px;text-transform:uppercase;color:#1A1A1A}
.co-hero-sub{margin:0;font-size:25px;font-weight:400;line-height:1.3;color:#1A1A1A}
/* ── 3. VIDEO box (rectangle) ── */
.co-video{position:relative;width:100%;background:#f8f9fb;padding:0 var(--side-pad) 0;box-sizing:border-box}
.co-video-el{display:block;width:100%;max-width:1040px;height:560px;margin:0 auto;object-fit:cover;background:#0a0e14}
/* ── 4. JAPANESE GREETING (centered) ── */
.co-greeting{position:relative;width:100%;background:#f8f9fb;padding:60px var(--side-pad) 220px;box-sizing:border-box}
.co-greeting-inner{max-width:1040px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.co-greeting-logo{display:block}
.co-greeting-logo{width:160px;height:auto;object-fit:contain;flex-shrink:0;align-self:flex-end}
.co-greeting-text{flex:1;text-align:left;font-size:17px;font-weight:600;line-height:28px;letter-spacing:-0.2px;color:#1A1A1A}
.co-greeting-text p{margin:0}
.co-greeting-text p+p{margin-top:24px}
/* ── 2. BRIDGE GRAPHIC h=836 (87px gap + bridge bg 749 + JP text centered) ── */
.co-bridge{position:relative;width:100%;height:400px;background:#FAFAFA;overflow:hidden;display:flex;align-items:center;justify-content:center}
.co-bridge-art{position:absolute;inset:0;display:block;pointer-events:none;z-index:1}
.co-bridge-bg{position:absolute;inset:0;background-size:cover;background-position:center center;background-repeat:no-repeat}
.co-bridge-gradient{display:none}
.co-bridge-text{position:relative;z-index:2;width:100%;text-align:center;padding:0}
.co-bridge-jp{font-size:48px;font-weight:700;line-height:67px;letter-spacing:0;color:#1A1A1A;margin:0}
.co-bridge-jp-sub{font-size:32px;font-weight:500;line-height:67px;color:#1A1A1A;margin:0}
/* ── 3. EXECUTIVES — photo 360×420, text bottom-aligned ── */
.co-execs{position:relative;height:500px;background:#f8f9fb;max-width:1920px;margin:0 auto}
.co-execs-photo{position:absolute;left:var(--side-pad);top:0;width:360px;height:420px;border-radius:20px;background-size:cover;background-position:center}
/* 旧: left:860px;width:620px(1920px固定)。左右を --side-pad 基準にして流動化。
1920px では left=860 / 幅=620 と同じ値になるので PC の見た目は変わらない。 */
.co-execs-text{position:absolute;left:calc(var(--side-pad) + 420px);right:var(--side-pad);bottom:80px;width:auto;max-width:620px;font-size:15.5px;font-weight:500;line-height:26px;letter-spacing:-0.3px;color:#1A1A1A}
.co-execs-text p{margin:0}
/* ── 4. CRITERIA — apricot full-width background, photo 360×420, text bottom-aligned ── */
.co-criteria{position:relative;height:540px;background:#F4F4F4;width:100%}
.co-criteria-text{position:absolute;left:calc(max(0px,(100vw - 1920px)/2) + var(--side-pad));bottom:60px;width:480px}
.co-criteria-title{font-size:20px;font-weight:700;line-height:28px;letter-spacing:-0.4px;color:#1A1A1A;margin:0 0 32px 0}
.co-criteria-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.co-criteria-list li{position:relative;padding-left:42px;min-height:26px;display:flex;align-items:center;font-size:16px;font-weight:500;line-height:26px;letter-spacing:-0.4px;color:#1A1A1A}
.co-criteria-list .co-num{position:absolute;left:0;top:50%;transform:translateY(-50%);width:26px;height:26px;background:#438CAF;border-radius:5px;color:#FAFAFA;font-size:16px;font-weight:500;display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}
/* 旧: left:calc(... + 1120px)(1920px固定)。1480px 未満の画面で右にはみ出していた。
右端を --side-pad に合わせる形に直す。1920px では right=440px で従来と同じ位置。 */
.co-team-photo{position:absolute;right:var(--side-pad);top:60px;width:360px;height:420px;border-radius:20px;background-size:cover;background-position:center}
/* ── 5. HISTORY — photo 360×420, text bottom-aligned ── */
.co-history{position:relative;height:600px;background:#f8f9fb;max-width:1920px;margin:0 auto}
.co-history-photo{position:absolute;left:var(--side-pad);top:80px;width:360px;height:420px;border-radius:20px;background-size:cover;background-position:center}
.co-history-text{position:absolute;left:calc(var(--side-pad) + 420px);right:var(--side-pad);bottom:100px;width:auto;max-width:620px}
.co-history-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.co-history-list li{position:relative;padding-left:58px;height:26px;display:flex;align-items:center;font-size:16px;letter-spacing:-0.4px;color:#1A1A1A;line-height:26px}
.co-history-list .co-year{position:absolute;left:0;top:0;color:#438CAF;font-weight:600;line-height:26px;font-size:16px}
.co-history-list .co-year-text{font-weight:500}
/* ── 6. END h=900 (bg + logo/text/red-line/text overlay) ── */
.co-end{position:relative;height:600px;overflow:hidden;background:#1a2128}
.co-end-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.co-end-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;padding:40px 20px}
.co-end-logo{width:140px;height:53px;object-fit:contain;margin-bottom:32px}
.co-end-text1{margin:0 0 28px 0;font-size:20px;font-weight:400;line-height:30px;color:#FAFAFA;letter-spacing:-1px;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.co-end-line{width:36px;height:3px;background:#C00000;margin:0 0 28px 0}
.co-end-text2{margin:0;font-size:28px;font-weight:700;line-height:38px;color:#FAFAFA;letter-spacing:-1px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
/* ── RESPONSIVE ── */
/* 7つの審査基準 → 詳細ページへの案内リンク */
.co-criteria-link{display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding-left:42px;
font-size:14.5px;font-weight:600;letter-spacing:-0.3px;color:#438CAF;text-decoration:none;
transition:color .15s ease}
.co-criteria-link:hover{color:#2E6E8E;text-decoration:underline}
.co-criteria-link i{width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;
transform:rotate(45deg);flex-shrink:0}
@media (max-width:1023.98px){
.co-criteria-link{margin-top:18px;font-size:13.5px}
}
/* /wp-content/themes/taian-bridge-rwd/recruit.css */
/* ═══ RECRUIT PAGE (recruitment) ─ Figma 1Zd6qSv9DebJX4pq8troe8 / 105:972 ═══ */
.page-recruit{position:relative;width:100%;background:#f8f9fb;color:#1a1a1a;overflow:hidden;--side-pad:clamp(16px, calc((100vw - 1040px) / 2), 440px)}
/* ── HERO 800px (background image + white blur overlay) ── */
.rc-hero{position:relative;height:300px;overflow:hidden;margin-top:109px}
.rc-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.rc-hero-overlay{position:absolute;inset:0;background:rgba(255,255,255,.20);backdrop-filter:blur(3.5px);-webkit-backdrop-filter:blur(3.5px)}
.rc-hero-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:0 20px;z-index:2}
.rc-hero-title{font-size:44px;font-weight:800;line-height:54px;letter-spacing:1px;text-transform:uppercase;color:#1a1a1a}
.rc-hero-sub{font-size:22px;font-weight:400;line-height:1.3;color:#1a1a1a}
/* ── INTRO : photo + greeting (background #f8f9fb) ── */
.rc-intro{position:relative;background:#f8f9fb;max-width:1920px;margin:0 auto;padding:60px var(--side-pad);display:flex;align-items:center;justify-content:center;gap:80px;box-sizing:border-box}
.rc-intro-photo{flex:0 0 460px;width:460px;height:480px;border-radius:22px;background-size:cover;background-position:center}
.rc-intro-text{flex:0 0 auto;font-size:14px;font-weight:600;line-height:24px;color:#1a1a1a;white-space:nowrap}
.rc-intro-text p{margin:0}
.rc-intro-text p+p{margin-top:24px}
/* ── JOB DESCRIPTIONS — full-width white background, content kept narrow ── */
.rc-jobs{background:#FFFFFF;width:100%;height:auto;margin:0 auto;padding:60px 0 90px;box-sizing:border-box}
.rc-jobs-inner{width:820px;margin:0 auto;display:flex;flex-direction:column;gap:80px}
/* each job block — scale ratio ~86% */
.rc-job{position:relative;width:820px}
.rc-jobs-inner > .rc-job:nth-child(1){height:auto}
.rc-jobs-inner > .rc-job:nth-child(2){height:auto}
.rc-jobs-inner > .rc-job:nth-child(3){height:auto}
.rc-job-head{position:relative;min-height:42px;margin:0 0 18px}
.rc-job-icon{position:absolute;left:0;top:0;width:38px;height:38px;border-radius:5px;display:flex;align-items:center;justify-content:center}
.rc-job-icon img{width:24px;height:24px;object-fit:contain;filter:brightness(0) invert(1)}
.rc-job-title{position:absolute;left:58px;top:4px;font-size:26px;font-weight:800;line-height:30px;margin:0;white-space:nowrap}
.rc-job-desc{position:static;width:100%;font-size:15px;font-weight:500;line-height:26px;color:#1A1A1A;margin:0 0 20px}
.rc-job-divider{position:static;width:820px;height:1px;background:rgba(26,26,26,.1);margin:0 0 20px}
.rc-job-body{position:static;width:100%;display:flex;gap:40px;align-items:flex-start}
.rc-job-col{position:static}
.rc-job-col-cond{display:flex;flex-direction:column;gap:10px}
.rc-jobs-inner > .rc-job:nth-child(1) .rc-job-col-cond{width:170px}
.rc-jobs-inner > .rc-job:nth-child(2) .rc-job-col-cond{width:280px}
.rc-jobs-inner > .rc-job:nth-child(3) .rc-job-col-cond{width:215px}
.rc-job-col-pay{width:440px}
.rc-job-col h4{font-size:14px;font-weight:700;line-height:24px;color:#1A1A1A;margin:0}
.rc-job-col-cond ul{list-style:disc;padding-left:20px;margin:0}
.rc-job-col-cond li{font-size:13px;font-weight:400;line-height:20px;color:#1A1A1A}
.rc-job-col-pay h4{position:static;margin:0}
.rc-job-col-pay p{position:static;width:440px;font-size:13px;font-weight:400;line-height:20px;color:#1A1A1A;margin:8px 0 0}
/* ── job listing (pattern background) ── */
.rc-list-section{position:relative;height:auto;min-height:900px;padding:60px 0 80px;background:#f8f9fb;box-sizing:border-box}
.rc-list-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.10;transform:rotate(180deg);z-index:0;pointer-events:none}
.rc-list-inner{position:relative;z-index:1;max-width:1920px;margin:0 auto;padding:0 var(--side-pad);text-align:center}
.rc-list-title{font-size:32px;font-weight:700;color:#1a1a1a;line-height:44px;margin:0 0 14px 0}
.rc-list-sub{font-size:17px;font-weight:400;color:#7d7d7d;margin:0 0 40px 0;line-height:1.2}
/* Table card */
.rc-table-card{background:#fff;border-radius:18px;box-shadow:0 4px 22px rgba(0,0,0,.12);padding:26px 36px;text-align:left;max-width:1040px;margin:0 auto}
.rc-table-row{display:grid;grid-template-columns:90px 1fr 100px 100px 80px 80px;align-items:center;padding:0 18px;min-height:38px}
.rc-table-head{min-height:auto;margin-bottom:14px}
.rc-cell{font-size:15px;font-weight:400;color:#1a1a1a;text-align:center}
.rc-table-head .rc-cell{font-size:16px;font-weight:300;color:#1a1a1a;text-align:center}
.rc-table-head .rc-cell-title{text-align:center}
.rc-cell-title{text-align:center}
.rc-td-title{font-size:17px !important;font-weight:600 !important;color:#1a1a1a;text-align:left !important;font-family:'Inter','Pretendard JP',sans-serif;padding-left:18px}
.rc-table-line{height:2.5px;background:#000b83;margin:0 0 18px 0}
.rc-status{display:inline-flex;align-items:center;justify-content:center;width:72px;height:28px;border-radius:5px;font-size:14px;font-weight:600;line-height:1}
.rc-row-divider{height:1px;background:rgba(26,26,26,.10);margin:12px 0}
/* ── RESPONSIVE ── */
/* board dropdown smooth animation */
.rc-row-wrap{cursor:pointer}
.rc-table-row[data-rc-toggle]{transition:background .15s}
.rc-row-wrap:hover .rc-table-row[data-rc-toggle]{background:rgba(0,11,131,.025)}
.rc-row-detail{max-height:0;overflow:hidden;transition:max-height .45s ease}
.rc-row-wrap.open .rc-row-detail{max-height:300px}
.rc-row-detail-inner{padding:18px 22px 4px;border-top:1px dashed rgba(26,26,26,.12);margin-top:8px}
.rc-row-detail-inner p{margin:0 0 8px;font-size:13px;line-height:22px;color:#1a1a1a}
.rc-row-detail-inner .rc-detail-meta{color:rgba(26,26,26,.7);font-size:12px}
.rc-row-detail-inner .rc-detail-meta strong{color:#1a1a1a;font-weight:600;margin-right:4px}
.rc-row-detail-inner .rc-detail-cta{font-size:13px;color:#1a1a1a}
.rc-row-detail-inner .rc-detail-cta a{color:#0047ab;text-decoration:underline}
.rc-jobs-inner > .rc-job:nth-child(3){margin-bottom:50px}
/* table-row as anchor — keep visual identical, just remove default anchor styles */
a.rc-table-row{text-decoration:none;color:inherit;cursor:pointer;transition:background .15s}
a.rc-table-row:hover{background:rgba(0,11,131,.02)}
a.rc-table-row:hover .rc-td-title{color:#0047AB}
.pn-single-info{display:flex;flex-wrap:wrap;gap:24px;padding:18px 26px;margin-bottom:30px;background:#F4F8FB;border-radius:8px;font-size:14px;color:#1A1A1A}
.pn-single-info span strong{margin-right:6px;color:#0047AB}
/* ═══ RECRUIT CARDS (Rikunabi style) ═══ */
.rc-filters{display:flex;gap:10px;margin:0 auto 36px;justify-content:center;flex-wrap:wrap;max-width:1080px}
.rc-filter{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:30px;border:1.5px solid #d6d6d6;background:#fff;color:#1a1a1a;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;font-family:inherit;line-height:1}
.rc-filter:hover{border-color:#00064B;color:#00064B}
.rc-filter.active{background:#00064B;color:#fff;border-color:#00064B}
.rc-filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:rgba(0,0,0,.06);color:#1a1a1a;font-size:12px;font-weight:700}
.rc-filter.active .rc-filter-count{background:rgba(255,255,255,.22);color:#fff}
.rc-filter-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.rc-filter-urgent .rc-filter-dot{background:#E32929}
.rc-filter-regular .rc-filter-dot{background:#00064B}
.rc-filter-rolling .rc-filter-dot{background:#0047AB}
.rc-filter-closed .rc-filter-dot{background:#9CA3AF}
.rc-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1080px;margin:0 auto}
.rc-cards-empty{padding:80px 0;text-align:center;color:#7D7D7D;font-size:15px;background:#fff;border-radius:14px;grid-column:1/-1}
.rc-card{display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:26px 28px;text-decoration:none;color:inherit;transition:all .25s ease;cursor:pointer;position:relative;overflow:hidden}
.rc-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:transparent;transition:background .25s}
.rc-card:hover{border-color:#00064B;box-shadow:0 12px 28px rgba(0,6,75,.10);transform:translateY(-3px)}
.rc-card-urgent::before{background:#E32929}
.rc-card-regular::before{background:#00064B}
.rc-card-rolling::before{background:#0047AB}
.rc-card-closed{opacity:.62}
.rc-card-closed::before{background:#9CA3AF}
.rc-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rc-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;border-radius:6px;font-size:12px;font-weight:700;letter-spacing:1px;line-height:1;flex-shrink:0}
.rc-badge-urgent{background:#FFE9E9;color:#E32929;border:1px solid #FFD0D0}
.rc-badge-regular{background:#EAEEFF;color:#00064B;border:1px solid #CFD7FF}
.rc-badge-rolling{background:#E4F0FF;color:#0047AB;border:1px solid #BFD9FF}
.rc-badge-closed{background:#F3F4F6;color:#6E6E6E;border:1px solid #D6D6D6}
.rc-card-deadline{font-size:12px;color:#6E6E6E;font-weight:500}
.rc-card-deadline-urgent{color:#E32929;font-weight:700}
.rc-card-deadline-closed{color:#9CA3AF;font-weight:600}
.rc-card-title{margin:2px 0 0;font-size:17px;font-weight:700;line-height:1.5;color:#1a1a1a;letter-spacing:-.3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:51px}
.rc-card-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:#6E6E6E;line-height:1.4}
.rc-card-meta-item{display:inline-flex;align-items:center;gap:3px;letter-spacing:-.2px}
.rc-card-desc{margin:0;font-size:13px;color:#4b4b4b;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:-.3px}
.rc-card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px;border-top:1px dashed rgba(0,0,0,.08)}
.rc-card-no{font-size:11px;color:#9CA3AF;letter-spacing:.5px;font-weight:500}
.rc-card-cta{display:inline-flex;align-items:center;color:#00064B;font-size:13px;font-weight:700;letter-spacing:-.3px;transition:transform .2s}
.rc-card-cta::after{content:"→";margin-left:6px;transition:transform .2s}
.rc-card:hover .rc-card-cta::after{transform:translateX(4px)}
.rc-card-closed .rc-card-cta{color:#9CA3AF}
@media (max-width:1023.98px){
.rc-cards{grid-template-columns:1fr}
.rc-filters{justify-content:flex-start;overflow-x:auto;padding-bottom:6px}
.rc-filter{white-space:nowrap;flex-shrink:0}
}
/* /wp-content/themes/taian-bridge-rwd/fxprod.css */
/* ═══ FX・CFD 商品説明 (page-fx-cfd-product.php) ─ Figma 189:488 ═══ */
.page-fxprod{position:relative;width:100%;background:#F8F9FB;color:#1A1A1A;overflow:hidden;--side-pad:clamp(16px, calc((100vw - 1100px) / 2), 410px)}
/* HERO 1920×400 */
.fxp-hero{position:relative;width:100%;height:300px;overflow:hidden;margin-top:109px}
.fxp-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.fxp-hero-overlay{position:absolute;inset:0;background:rgba(255,255,255,.03);backdrop-filter:blur(3.5px);-webkit-backdrop-filter:blur(3.5px)}
.fxp-hero-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:0 20px;z-index:2}
.fxp-hero-title{margin:0;font-size:48px;font-weight:800;line-height:56px;letter-spacing:1px;text-transform:uppercase;color:#FAFAFA}
.fxp-hero-sub{margin:0;font-size:25px;font-weight:400;line-height:1.3;color:#FAFAFA}
/* CONTENT — カード幅1100、左右パディング410 */
.fxp-content{position:relative;width:100%;max-width:1920px;margin:0 auto;padding:60px var(--side-pad) 100px;box-sizing:border-box}
.fxp-page-title{margin:0 0 40px;font-size:30px;font-weight:700;color:#1A1A1A;line-height:1.4}
.fxp-card{background:#FFFFFF;box-shadow:0 0 10px rgba(0,0,0,.08);border-radius:30px;padding:54px 64px;margin-bottom:40px}
.fxp-chapter{margin:0 0 36px;font-size:30px;font-weight:600;color:#00064B;line-height:1.4}
.fxp-section{margin:30px 0 16px;font-size:18px;font-weight:600;color:#0047AB;line-height:1.4}
.fxp-card p{margin:0;font-size:16px;font-weight:400;color:#1A1A1A;line-height:25px}
.fxp-card-body{font-size:16px;line-height:25px}
.fxp-closing{margin:50px 0 0;padding-top:50px;border-top:1px solid rgba(26,26,26,.1);font-size:18px;font-weight:400;color:#1A1A1A;line-height:30px}
/* Pseudo-table for Chapter 15 comparison */
.fxp-table-wrap{display:flex !important;flex-direction:column;border:1px solid rgba(0,0,0,.08);border-radius:8px;overflow:hidden;margin-top:14px}
.fxp-table-row{display:grid;grid-template-columns:180px 1fr 1fr;border-bottom:1px solid rgba(0,0,0,.08)}
.fxp-table-row:last-child{border-bottom:none}
.fxp-table-row > span{padding:14px 18px;font-size:15px;line-height:1.5;border-right:1px solid rgba(0,0,0,.08)}
.fxp-table-row > span:last-child{border-right:none}
.fxp-table-row.fxp-table-head{background:#F4F8FB}
.fxp-table-row.fxp-table-head > span{font-weight:700;color:#00064B}
/* /wp-content/themes/taian-bridge-rwd/partnership.css */
/* ═══ 提携パートナー募集 (page-partnership.php / single-partner_inquiry.php) ═══ */
.page-partnership,.page-partnership-single{position:relative;width:100%;background:#F8F9FB;color:#1A1A1A;overflow:hidden;--side-pad:clamp(16px, calc((100vw - 1100px) / 2), 410px)}
/* HERO 1920×400 */
.pn-hero{position:relative;width:100%;height:300px;overflow:hidden;margin-top:109px}
.pn-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a1230}
.pn-hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.20);backdrop-filter:blur(3.5px);-webkit-backdrop-filter:blur(3.5px)}
.pn-hero-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;padding:0 20px;z-index:2}
.pn-hero-title{margin:0;font-size:48px;font-weight:800;line-height:1.2;letter-spacing:1px;text-transform:uppercase;color:#FAFAFA}
.pn-hero-sub{margin:0;font-size:25px;font-weight:400;line-height:1.3;color:#FAFAFA}
.pn-hero-mini{height:280px}
.pn-hero-mini .pn-hero-title{font-size:42px}
/* INTRO — 円形ロゴ + ごあいさつ */
.pn-intro{padding:80px var(--side-pad);display:flex;justify-content:center;align-items:center;gap:100px;background:#F8F9FB}
.pn-intro-circles{position:relative;flex-shrink:0;width:auto;height:auto}
.pn-intro-combo{display:block;width:380px;max-width:100%;height:auto}
.pn-circle{position:absolute;top:0;width:210px;height:210px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 20px rgba(0,0,0,.10);display:flex;align-items:center;justify-content:center;z-index:2}
.pn-circle-l{left:0}
.pn-circle-r{right:0}
.pn-circle-img-logo{width:97px;height:auto;object-fit:contain;margin-top:-8px;margin-left:-5px}
.pn-circle-img-vector{width:110px;height:auto;object-fit:contain;opacity:.55}
.pn-circle-decor{position:absolute;left:50%;top:50%;width:160px;height:118px;transform:translate(-50%,-50%);z-index:1;pointer-events:none;opacity:1}
/* INTRO — ごあいさつの段落 */
.pn-intro-text{flex:1 1 475px;max-width:475px}
.pn-intro-text p{margin:0 0 28px;font-size:16px;font-weight:400;line-height:25px;color:#000000}
.pn-intro-text p:last-child{margin-bottom:0}
.pn-intro-text p.pn-intro-en{color:#8C8C8C}
.pn-intro-text p.pn-intro-en-first{margin-top:14px}
.pn-intro-text{flex:1 1 475px;max-width:475px}
.pn-intro-text p{margin:0 0 28px;font-size:16px;font-weight:400;line-height:25px;color:#000000}
.pn-intro-text p:last-child{margin-bottom:0}
.pn-intro-text p.pn-intro-en{color:#8C8C8C}
/* LIST */
.pn-list{padding:60px var(--side-pad) 100px;background:#F8F9FB}
.pn-list-inner{position:relative;width:100%;max-width:1100px;margin:0 auto}
.pn-row-empty{padding:80px 0;text-align:center;color:#7D7D7D;font-size:16px;border-top:1px solid #A8A8A8;border-bottom:1px solid #A8A8A8}
.pn-row{display:grid;grid-template-columns:60px 1fr 100px 110px 24px;align-items:center;column-gap:30px;padding:28px 8px;border-bottom:0.5px solid #A8A8A8;text-decoration:none;color:inherit;cursor:pointer;transition:background .15s}
.pn-row:first-of-type{border-top:0.5px solid #A8A8A8}
.pn-row:hover{background:rgba(0,11,131,.02)}
.pn-row:hover .pn-title{color:#0047AB}
.pn-no{font-size:15px;color:#1A1A1A;text-align:center}
.pn-title{font-size:20px;font-weight:600;color:#1A1A1A;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-author{font-size:15px;color:#A8A8A8;text-align:center}
.pn-date{font-size:15px;color:#A8A8A8;text-align:center}
.pn-arrow{display:inline-block;width:10px;height:10px;border-right:2px solid rgba(168,168,168,.6);border-bottom:2px solid rgba(168,168,168,.6);transform:rotate(-45deg);justify-self:end;transition:transform .15s,border-color .15s}
.pn-row:hover .pn-arrow{border-color:#0047AB;transform:rotate(-45deg) translate(2px,2px)}
/* PAGINATION */
.pn-pagination{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:60px}
.pn-pg-btn,.pn-pg-num{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;font-size:16px;color:#1A1A1A;padding:6px 10px;font-family:inherit;line-height:1;text-decoration:none}
.pn-pg-num{min-width:32px;height:32px;border-radius:50%}
.pn-pg-num.pn-pg-active{background:#00064B;color:#FFFFFF}
.pn-pg-num:hover:not(.pn-pg-active){color:#0047AB}
.pn-pg-dots{font-size:16px;color:#1A1A1A;padding:0 4px;line-height:32px}
/* SINGLE */
.pn-single{padding:80px var(--side-pad) 100px;background:#F8F9FB}
.pn-single-inner{max-width:900px;margin:0 auto;background:#FFFFFF;border-radius:14px;box-shadow:0 0 24px rgba(0,11,131,.06);padding:60px 70px}
.pn-single-head{padding-bottom:30px;border-bottom:1px solid rgba(168,168,168,.4);margin-bottom:36px}
.pn-single-cat{display:inline-flex;align-items:center;height:26px;padding:0 16px;border-radius:30px;background:#0047AB;color:#FFFFFF;font-size:13px;font-weight:600;margin-bottom:18px}
.pn-single-title{margin:0 0 18px;font-size:28px;font-weight:700;color:#1A1A1A;line-height:1.4}
.pn-single-meta{display:flex;align-items:center;gap:8px;font-size:14px;color:#A8A8A8}
.pn-meta-sep{color:#D6D6D6}
.pn-single-body{font-size:16px;line-height:1.85;color:#1A1A1A;letter-spacing:-.2px;min-height:200px}
.pn-single-body p{margin:0 0 18px}
.pn-single-footer{display:flex;justify-content:center;margin-top:50px}
.pn-back-btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 38px;background:#FFFFFF;border:1px solid #1A1A1A;border-radius:6px;color:#1A1A1A;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.pn-back-btn:hover{background:#1A1A1A;color:#FFFFFF}
/* /wp-content/themes/taian-bridge-rwd/hub.css */
/* ─────────────────────────────────────────────────────────────
大分類ハブページ (2026-08-03)
デザイン案: Rectangle 241/242/243/244 + Group 277/278/279
大 925×312 r50 / 小 447×236 r40 / gap 31px / 背景 #F8F9FB
hover: 画像を拡大 + わずかに明るく、矢印ボタン #1F3DFF
───────────────────────────────────────────────────────────── */
.page-hub{background:#F8F9FB}
/* ヒーローはサイト共通規格 (height:400px / margin-top:109px) */
.hub-hero{position:relative;width:100%;height:300px;overflow:hidden;margin-top:109px}
.hub-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.hub-hero-overlay{position:absolute;inset:0;background:rgba(255,255,255,.20);backdrop-filter:blur(3.5px);-webkit-backdrop-filter:blur(3.5px)}
.hub-hero-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:0 20px;z-index:2}
.hub-hero-title{margin:0;font-size:44px;font-weight:800;line-height:54px;letter-spacing:1px;text-transform:uppercase;color:#1a1a1a}
.hub-hero-sub{margin:0;font-size:22px;font-weight:400;line-height:1.3;color:#1a1a1a}
.hub-body{padding:90px 0}
.hub-wrap{width:925px;max-width:calc(100% - 40px);margin:0 auto}
.hub-row{display:flex;gap:31px;margin-top:31px}
.hub-card{
position:relative;display:block;overflow:hidden;text-decoration:none;
isolation:isolate;background:#1A1A1A;
}
.hub-card-lg{height:312px;border-radius:50px}
.hub-card-sm{flex:1 1 0;height:236px;border-radius:40px}
/* メディア (画像/動画) — 拡大はこのレイヤーのみ */
.hub-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hub-img,.hub-video,.hub-vid{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
background-size:cover;background-position:center;
transition:transform .55s cubic-bezier(.22,.61,.36,1), filter .35s ease;
}
/* デザイン案どおり常時10%暗く */
.hub-card-lg .hub-img,.hub-card-lg .hub-video{filter:brightness(.90)}
.hub-card-sm .hub-img{filter:brightness(.90)}
/* 下部のグラデーション (40%から 0 → 0.85) */
.hub-shade{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.85) 100%);
}
.hub-text{position:absolute;left:44px;bottom:38px;z-index:2;display:block;max-width:757px}
.hub-title{display:block;color:#fff;font-weight:700;letter-spacing:.01em}
.hub-desc{display:block;color:#fff;font-weight:500;margin-top:6px}
.hub-card-lg .hub-title{font-size:21px;line-height:26px}
.hub-card-lg .hub-desc{font-size:18px;line-height:22px}
.hub-card-sm .hub-text{left:32px;bottom:30px;max-width:323px}
.hub-card-sm .hub-title{font-size:17px;line-height:20px}
.hub-card-sm .hub-desc{font-size:11px;line-height:14px;margin-top:4px}
/* 矢印ボタン */
.hub-arrow{
position:absolute;z-index:2;border-radius:50%;
background:rgba(255,255,255,.5);
display:flex;align-items:center;justify-content:center;
transition:background-color .3s ease;
}
.hub-arrow i{
display:block;border:3px solid #000;border-left:0;border-bottom:0;
transform:rotate(45deg);transition:border-color .3s ease;
position:relative;left:-2px;
}
.hub-card-lg .hub-arrow{width:56px;height:56px;right:44px;bottom:38px}
.hub-card-lg .hub-arrow i{width:13.9px;height:13.9px}
.hub-card-sm .hub-arrow{width:42.39px;height:42.39px;right:32px;bottom:28px}
.hub-card-sm .hub-arrow i{width:10.52px;height:10.52px}
/* ── hover ── */
.hub-card:hover .hub-img,
.hub-card:hover .hub-video{transform:scale(1.07);filter:brightness(1.04)}
.hub-card:hover .hub-arrow{background:#1F3DFF}
.hub-card:hover .hub-arrow i{border-color:#fff}
.hub-card:focus-visible{outline:3px solid #1F3DFF;outline-offset:4px}
@media (prefers-reduced-motion:reduce){
.hub-img,.hub-video{transition:none}
.hub-card:hover .hub-img,.hub-card:hover .hub-video{transform:none}
}
/* ── タブレット・モバイル ── */
/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-hero{height:220px;margin-top:0}
.hub-hero-title{font-size:28px;line-height:34px}
.hub-hero-sub{font-size:15px}
.hub-body{padding:40px 0 60px}
.hub-wrap{width:100%;max-width:calc(100% - 32px)}
.hub-card-lg{height:250px;border-radius:32px}
.hub-card-sm{height:200px;border-radius:28px}
.hub-row{gap:18px;margin-top:18px}
.hub-text{left:28px;bottom:26px;max-width:calc(100% - 28px - 46px - 26px - 16px)}
.hub-card-lg .hub-title{font-size:18px;line-height:22px}
.hub-card-lg .hub-desc{font-size:12px;line-height:16px}
.hub-card-lg .hub-arrow{width:46px;height:46px;right:26px;bottom:26px}
.hub-card-lg .hub-arrow i{width:11px;height:11px}
}
/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-row{flex-direction:column;gap:16px;margin-top:16px}
.hub-card-lg{height:210px;border-radius:24px}
.hub-card-sm{height:170px;border-radius:24px}
.hub-card-sm .hub-text{left:22px;bottom:22px;max-width:calc(100% - 22px - 36px - 20px - 12px)}
.hub-card-sm .hub-title{font-size:17px;line-height:21px}
.hub-card-sm .hub-desc{font-size:11px;line-height:15px}
.hub-card-sm .hub-arrow{width:36px;height:36px;right:20px;bottom:20px}
.hub-card-sm .hub-arrow i{width:9px;height:9px}
.hub-card-lg .hub-text{left:22px;bottom:22px;max-width:calc(100% - 22px - 46px - 26px - 12px)}
.hub-card-lg .hub-title{font-size:19px;line-height:23px}
.hub-card-lg .hub-desc{font-size:12px;line-height:16px}
}
/* ─────────────────────────────────────────────────────────────
バイナリーオプション比較ハブ (2026-08-03) — デザイン案 Group 276
2列スタガード: 左 大(586)+小(205)+小(205) / 右 小+小+大
カード幅442・列間隔31・大 r50・小 r40
───────────────────────────────────────────────────────────── */
.hub-wrap-2col{width:915px;display:flex;gap:31px;align-items:flex-start}
.hub-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:31px}
.hub-binary .hub-card-lg{height:586px;border-radius:50px}
.hub-binary .hub-card-sm{height:205px;border-radius:40px;flex:0 0 auto}
/* カードが狭くなった分、テキスト幅も矢印の手前で止める */
.hub-binary .hub-card-lg .hub-text{max-width:calc(100% - 44px - 56px - 44px - 20px)}
.hub-binary .hub-card-sm .hub-text{max-width:calc(100% - 32px - 40px - 32px - 16px)}
/* 小カードの矢印はデザイン案どおり40px */
.hub-binary .hub-card-sm .hub-arrow{width:40px;height:40px;right:32px;bottom:28px}
.hub-binary .hub-card-sm .hub-arrow i{width:9.93px;height:9.93px}
/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-wrap-2col{width:100%;gap:18px}
.hub-col{gap:18px}
.hub-binary .hub-card-lg{height:360px;border-radius:32px}
.hub-binary .hub-card-sm{height:170px;border-radius:28px}
}
/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-wrap-2col{flex-direction:column;gap:16px}
.hub-col{gap:16px}
.hub-binary .hub-card-lg{height:260px;border-radius:24px}
.hub-binary .hub-card-sm{height:150px;border-radius:24px}
}
/* バイナリーハブ: カード幅が442pxと狭く大カードの説明が4行になる → 本文のみ縮小 */
.hub-binary .hub-card-lg .hub-title{font-size:21px;line-height:27px}
.hub-binary .hub-card-lg .hub-desc{font-size:13px;line-height:20px;margin-top:8px}
/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-binary .hub-card-lg .hub-title{font-size:17px;line-height:22px}
.hub-binary .hub-card-lg .hub-desc{font-size:13px;line-height:20px}
}
/* ─────────────────────────────────────────────────────────────
FX・CFD 比較ハブ (2026-08-03) — デザイン案 Group 274
左右対称の2列: 1行目 大(586) 2枚 / 2・3行目 小(249) 4枚
───────────────────────────────────────────────────────────── */
.hub-fxcfd .hub-card-lg{height:586px;border-radius:50px}
.hub-fxcfd .hub-card-sm{height:249px;border-radius:40px;flex:0 0 auto}
.hub-fxcfd .hub-card-lg .hub-text{max-width:calc(100% - 44px - 56px - 44px - 20px)}
.hub-fxcfd .hub-card-sm .hub-text{max-width:calc(100% - 32px - 40px - 32px - 16px)}
.hub-fxcfd .hub-card-sm .hub-arrow{width:40px;height:40px;right:32px;bottom:28px}
.hub-fxcfd .hub-card-sm .hub-arrow i{width:9.93px;height:9.93px}
/* カード幅442px基準で大カードの本文を縮小 (バイナリーハブと同基準) */
.hub-fxcfd .hub-card-lg .hub-title{font-size:21px;line-height:27px}
.hub-fxcfd .hub-card-lg .hub-desc{font-size:13px;line-height:20px;margin-top:8px}
/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-fxcfd .hub-card-lg{height:360px;border-radius:32px}
.hub-fxcfd .hub-card-sm{height:200px;border-radius:28px}
.hub-fxcfd .hub-card-lg .hub-title{font-size:17px;line-height:22px}
.hub-fxcfd .hub-card-lg .hub-desc{font-size:13px;line-height:20px}
}
/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-fxcfd .hub-card-lg{height:260px;border-radius:24px}
.hub-fxcfd .hub-card-sm{height:170px;border-radius:24px}
}
/* 利用者の声ハブ: リンク未定のカード — クリック無効、hover効果なし */
.hub-card.is-disabled{cursor:default}
.hub-card.is-disabled:hover .hub-img{transform:none;filter:brightness(.90)}
.hub-card.is-disabled:hover .hub-arrow{background:rgba(255,255,255,.5)}
.hub-card.is-disabled:hover .hub-arrow i{border-color:#000}
/* ─────────────────────────────────────────────────────────────
お客様センターハブ (2026-08-03) — デザイン案 Group 287
左: 小 375×236 r43 × 2 (縦間隔26) / 右: 大 511×498 r57
236*2 + 26 = 498 → 左右の高さを揃える
───────────────────────────────────────────────────────────── */
.hub-wrap-cs{width:921px;display:flex;gap:35px;align-items:flex-start}
.hub-cs-side{flex:0 0 375px;display:flex;flex-direction:column;gap:26px}
.hub-cs .hub-card-sm{height:236px;border-radius:43px;flex:0 0 auto}
.hub-cs .hub-card-lg{flex:0 0 511px;height:498px;border-radius:57px}
.hub-cs .hub-card-sm .hub-text{max-width:calc(100% - 32px - 42px - 32px - 16px)}
.hub-cs .hub-card-lg .hub-text{max-width:calc(100% - 44px - 56px - 44px - 20px)}
/* 大カードが511pxと狭いため本文のみ縮小 (他ハブと同基準) */
.hub-cs .hub-card-lg .hub-title{font-size:21px;line-height:27px}
.hub-cs .hub-card-lg .hub-desc{font-size:13px;line-height:20px;margin-top:8px}
/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-wrap-cs{width:100%;gap:18px}
.hub-cs-side{flex:1 1 0;gap:18px}
.hub-cs .hub-card-sm{height:190px;border-radius:28px}
.hub-cs .hub-card-lg{flex:1 1 0;height:398px;border-radius:32px}
.hub-cs .hub-card-lg .hub-title{font-size:17px;line-height:22px}
.hub-cs .hub-card-lg .hub-desc{font-size:13px;line-height:20px}
}
/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-wrap-cs{flex-direction:column;gap:16px}
.hub-cs-side{gap:16px}
.hub-cs .hub-card-sm{height:160px;border-radius:24px}
.hub-cs .hub-card-lg{height:240px;border-radius:24px}
}
/* ─────────────────────────────────────────────────────────────
タイアンブリッジレポートハブ (2026-08-03) — デザイン案 Group 288
上部 大 442×586 r50 × 2 (間隔31) / 下部 ワイド 915×249 r40
442*2 + 31 = 915 → 上下の幅を一致
───────────────────────────────────────────────────────────── */
.hub-wrap-report{width:915px}
.hub-row-lg{display:flex;gap:31px;margin-top:0}
.hub-report .hub-card-lg{flex:1 1 0;height:586px;border-radius:50px}
.hub-card-wide{position:relative;display:block;overflow:hidden;text-decoration:none;
isolation:isolate;background:#1A1A1A;height:249px;border-radius:40px;margin-top:31px}
.hub-report .hub-card-lg .hub-text{max-width:calc(100% - 44px - 56px - 44px - 20px)}
.hub-card-wide .hub-text{position:absolute;left:44px;bottom:38px;z-index:2;display:block;
max-width:calc(100% - 44px - 40px - 44px - 24px)}
.hub-card-wide .hub-title{display:block;color:#fff;font-weight:700;font-size:17px;line-height:20px}
.hub-card-wide .hub-desc{display:block;color:#fff;font-weight:500;font-size:11px;line-height:14px;margin-top:4px}
.hub-card-wide .hub-arrow{width:40px;height:40px;right:44px;bottom:38px}
.hub-card-wide .hub-arrow i{width:9.93px;height:9.93px}
/* カード幅442px基準で大カードの本文を縮小 (他ハブと同じ) */
.hub-report .hub-card-lg .hub-title{font-size:21px;line-height:27px}
.hub-report .hub-card-lg .hub-desc{font-size:13px;line-height:20px;margin-top:8px}
/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-wrap-report{width:100%}
.hub-row-lg{gap:18px}
.hub-report .hub-card-lg{height:360px;border-radius:32px}
.hub-card-wide{height:200px;border-radius:28px;margin-top:18px}
.hub-report .hub-card-lg .hub-title{font-size:17px;line-height:22px}
.hub-report .hub-card-lg .hub-desc{font-size:13px;line-height:20px}
.hub-card-wide .hub-text{left:28px;bottom:26px}
.hub-card-wide .hub-arrow{right:28px;bottom:26px}
}
/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-row-lg{flex-direction:column;gap:16px}
.hub-report .hub-card-lg{height:260px;border-radius:24px}
.hub-card-wide{height:170px;border-radius:24px;margin-top:16px}
.hub-card-wide .hub-text{left:22px;bottom:22px}
.hub-card-wide .hub-arrow{width:36px;height:36px;right:20px;bottom:20px}
.hub-card-wide .hub-arrow i{width:9px;height:9px}
}
/* カードごとの動画表示位置 — 縦長カードは cover で左右が切れるため基準点を指定 */
/* 縦長の大カード(442x586) — 横長動画の左右が切れるため右基準 */
.hub-binary .hub-card-lg .hub-vid,
.hub-fxcfd .hub-card-lg .hub-vid,
.hub-report .hub-card-lg .hub-vid{object-position:right center}
/* 利用者の声: 横に広いカード — 下端基準 */
.hub-reviews .hub-card-lg .hub-vid{object-position:center 100%}
/* お客様センター: 511x423 — 16:9 動画の左右が切れる。人物が右寄りなので 70% 基準 */
.hub-cs .hub-card-lg .hub-vid{object-position:70% center}
/* ══════════════════════════════════════════════════════════
Taian Bridge ハブ — 2カラムレイアウト (Figma Group 318)
左: 511x423 の大1枚 / 右: 幅375の小3枚を縦に配置
127 x 3 + 21(gap) x 2 = 423px → 大カードと同じ高さ
══════════════════════════════════════════════════════════ */
.hub-taian .hub-wrap{width:921px;display:flex;gap:35px;align-items:flex-start}
.hub-taian .hub-card-lg{flex:0 0 511px;height:423px;border-radius:57px}
.hub-taian .hub-row{flex:0 0 375px;flex-direction:column;gap:21px;margin-top:0}
.hub-taian .hub-row .hub-card-sm{flex:0 0 127px;height:127px;border-radius:43px}
/* テキスト (Figma仕様) */
.hub-taian .hub-card-lg .hub-title{font-size:21px;line-height:26px}
.hub-taian .hub-card-lg .hub-desc{font-size:20px;line-height:25px}
.hub-taian .hub-card-lg .hub-text{max-width:calc(100% - 44px - 56px - 44px - 20px)}
.hub-taian .hub-row .hub-card-sm .hub-title{font-size:17px;line-height:20px}
.hub-taian .hub-row .hub-card-sm .hub-desc{font-size:14px;line-height:16px}
.hub-taian .hub-row .hub-card-sm .hub-text{left:32px;bottom:26px;max-width:calc(100% - 32px - 42px - 32px - 16px)}
.hub-taian .hub-row .hub-card-sm .hub-arrow{right:32px;bottom:24px}
/* 511x579 の縦型カード — 横長動画の左右が切れるため中央基準 */
.hub-taian .hub-card-lg .hub-vid,
.hub-taian .hub-card-lg .hub-video{object-position:center center}
/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-taian .hub-wrap{width:100%;gap:18px}
.hub-taian .hub-card-lg{flex:1 1 0;height:396px;border-radius:32px}
.hub-taian .hub-row{flex:1 1 0;gap:18px}
.hub-taian .hub-row .hub-card-sm{flex:0 0 120px;height:120px;border-radius:28px}
.hub-taian .hub-card-lg .hub-desc{font-size:15px;line-height:22px}
.hub-taian .hub-row .hub-card-sm .hub-desc{font-size:13px;line-height:18px}
.hub-taian .hub-row .hub-card-sm .hub-text{left:22px;bottom:20px}
.hub-taian .hub-row .hub-card-sm .hub-arrow{right:22px;bottom:18px}
}
/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-taian .hub-wrap{flex-direction:column;gap:16px}
.hub-taian .hub-card-lg{flex:0 0 auto;height:240px;border-radius:24px}
.hub-taian .hub-row{flex:0 0 auto;width:100%;gap:16px}
.hub-taian .hub-row .hub-card-sm{flex:0 0 150px;height:150px;border-radius:24px}
}
/* ── カードをドラッグした際の灰色の残像(ドラッグゴースト・選択ハイライト)を除去 ── */
.hub-card{
-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
-webkit-user-drag:none;
-webkit-tap-highlight-color:transparent;
}
.hub-card .hub-media{border-radius:inherit}
.hub-card .hub-img,
.hub-card .hub-video,
.hub-card .hub-vid,
.hub-card img,
.hub-card video{
-webkit-user-drag:none; user-select:none;
pointer-events:none;
}
.hub-card .hub-text,
.hub-card .hub-title,
.hub-card .hub-desc{-webkit-user-select:none; user-select:none}
/* ══════════════════════════════════════════════════════════
バイナリーオプションハブ — デザイン案 Group 319
2列 × (左: 大・小・小 / 右: 小・小・大)、列幅442px
313 + 23 + 110 + 23 + 110 = 579px
フォントはデザイン案から各 -3px
══════════════════════════════════════════════════════════ */
.hub-binary .hub-col{gap:23px}
.hub-binary .hub-card-lg{height:313px;border-radius:35px;flex:0 0 auto}
.hub-binary .hub-card-sm{height:110px;border-radius:26px;flex:0 0 auto}
/* テキスト (デザイン案 25/20/20/16 → 各 -3px) */
.hub-binary .hub-card-lg .hub-title{font-size:22px;line-height:27px}
.hub-binary .hub-card-lg .hub-desc{font-size:17px;line-height:21px;margin-top:6px}
.hub-binary .hub-card-lg .hub-text{left:44px;bottom:36px;max-width:calc(100% - 44px - 42.39px - 44px - 20px)}
.hub-binary .hub-card-sm .hub-title{font-size:17px;line-height:21px}
.hub-binary .hub-card-sm .hub-desc{
font-size:13px;line-height:16px;margin-top:4px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hub-binary .hub-card-sm .hub-text{left:26px;bottom:20px;max-width:calc(100% - 26px - 32.64px - 26px - 14px)}
/* 矢印 (デザイン案仕様) */
.hub-binary .hub-card-lg .hub-arrow{width:42.39px;height:42.39px;right:44px;bottom:34px}
.hub-binary .hub-card-lg .hub-arrow i{width:10.51px;height:10.51px}
.hub-binary .hub-card-sm .hub-arrow{width:32.64px;height:32.64px;right:26px;bottom:18px}
.hub-binary .hub-card-sm .hub-arrow i{width:8.09px;height:8.09px;border-top-width:2px;border-right-width:2px;left:-1px}
/* 小カードは高さが低いためグラデーションを早めに開始 (デザイン案 17.31%) */
.hub-binary .hub-card-sm .hub-shade{background:linear-gradient(180deg, rgba(0,0,0,0) 17%, rgba(0,0,0,.85) 100%)}
/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-binary .hub-col{gap:16px}
.hub-binary .hub-card-lg{height:240px;border-radius:28px}
.hub-binary .hub-card-sm{height:96px;border-radius:22px}
.hub-binary .hub-card-lg .hub-title{font-size:18px;line-height:24px}
.hub-binary .hub-card-lg .hub-desc{font-size:14px;line-height:20px}
.hub-binary .hub-card-lg .hub-text{left:26px;bottom:24px;max-width:calc(100% - 26px - 40px - 26px - 16px)}
.hub-binary .hub-card-lg .hub-arrow{width:40px;height:40px;right:26px;bottom:22px}
.hub-binary .hub-card-sm .hub-title{font-size:15px;line-height:19px}
.hub-binary .hub-card-sm .hub-desc{font-size:12px;line-height:16px}
.hub-binary .hub-card-sm .hub-text{left:20px;bottom:16px;max-width:calc(100% - 20px - 30px - 20px - 12px)}
.hub-binary .hub-card-sm .hub-arrow{width:30px;height:30px;right:20px;bottom:15px}
}
/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-binary .hub-col{gap:14px}
.hub-binary .hub-card-lg{height:200px;border-radius:24px}
.hub-binary .hub-card-sm{height:100px;border-radius:20px}
}
/* ══════════════════════════════════════════════════════════
FX・CFD ハブ — デザイン案 Rectangle 220
2列 × (大1 + 小2)、列幅442px ※ カードの順序変更なし
313 + 23 + 110 + 23 + 110 = 579px
フォントはデザイン案から各 -3px (バイナリーハブと同じ)
══════════════════════════════════════════════════════════ */
.hub-fxcfd .hub-col{gap:23px}
.hub-fxcfd .hub-card-lg{height:313px;border-radius:35px;flex:0 0 auto}
.hub-fxcfd .hub-card-sm{height:110px;border-radius:26px;flex:0 0 auto}
/* テキスト (デザイン案 25/20/20/16 → 各 -3px) */
.hub-fxcfd .hub-card-lg .hub-title{font-size:22px;line-height:27px}
.hub-fxcfd .hub-card-lg .hub-desc{font-size:17px;line-height:21px;margin-top:6px}
.hub-fxcfd .hub-card-lg .hub-text{left:44px;bottom:36px;max-width:calc(100% - 44px - 42.39px - 44px - 20px)}
.hub-fxcfd .hub-card-sm .hub-title{font-size:17px;line-height:21px}
.hub-fxcfd .hub-card-sm .hub-desc{
font-size:13px;line-height:16px;margin-top:4px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hub-fxcfd .hub-card-sm .hub-text{left:26px;bottom:20px;max-width:calc(100% - 26px - 32.64px - 26px - 14px)}
/* 矢印 (デザイン案仕様) */
.hub-fxcfd .hub-card-lg .hub-arrow{width:42.39px;height:42.39px;right:44px;bottom:34px}
.hub-fxcfd .hub-card-lg .hub-arrow i{width:10.51px;height:10.51px}
.hub-fxcfd .hub-card-sm .hub-arrow{width:32.64px;height:32.64px;right:26px;bottom:18px}
.hub-fxcfd .hub-card-sm .hub-arrow i{width:8.09px;height:8.09px;border-top-width:2px;border-right-width:2px;left:-1px}
/* 小カードは高さが低いためグラデーションを早めに開始 (デザイン案 17.31%) */
.hub-fxcfd .hub-card-sm .hub-shade{background:linear-gradient(180deg, rgba(0,0,0,0) 17%, rgba(0,0,0,.85) 100%)}
/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-fxcfd .hub-col{gap:16px}
.hub-fxcfd .hub-card-lg{height:240px;border-radius:28px}
.hub-fxcfd .hub-card-sm{height:96px;border-radius:22px}
.hub-fxcfd .hub-card-lg .hub-title{font-size:18px;line-height:24px}
.hub-fxcfd .hub-card-lg .hub-desc{font-size:14px;line-height:20px}
.hub-fxcfd .hub-card-lg .hub-text{left:26px;bottom:24px;max-width:calc(100% - 26px - 40px - 26px - 16px)}
.hub-fxcfd .hub-card-lg .hub-arrow{width:40px;height:40px;right:26px;bottom:22px}
.hub-fxcfd .hub-card-sm .hub-title{font-size:15px;line-height:19px}
.hub-fxcfd .hub-card-sm .hub-desc{font-size:12px;line-height:16px}
.hub-fxcfd .hub-card-sm .hub-text{left:20px;bottom:16px;max-width:calc(100% - 20px - 30px - 20px - 12px)}
.hub-fxcfd .hub-card-sm .hub-arrow{width:30px;height:30px;right:20px;bottom:15px}
}
/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-fxcfd .hub-col{gap:14px}
.hub-fxcfd .hub-card-lg{height:200px;border-radius:24px}
.hub-fxcfd .hub-card-sm{height:100px;border-radius:20px}
}
/* ══════════════════════════════════════════════════════════
利用者の声ハブ — デザイン案 Group 285 ※ カードの順序変更なし
上部 大 925 × 312 (r50) / 下部 小 447 × 236 (r40) × 2
312 + 31 + 236 = 579px
══════════════════════════════════════════════════════════ */
.hub-reviews .hub-wrap{width:925px}
.hub-reviews .hub-card-lg{height:312px;border-radius:50px}
.hub-reviews .hub-row{gap:31px;margin-top:31px}
.hub-reviews .hub-card-sm{flex:1 1 0;height:236px;border-radius:40px}
/* テキスト (デザイン案仕様) */
.hub-reviews .hub-card-lg .hub-title{font-size:21px;line-height:26px}
.hub-reviews .hub-card-lg .hub-desc{font-size:20px;line-height:25px;margin-top:6px}
.hub-reviews .hub-card-lg .hub-text{left:44px;bottom:38px;max-width:calc(100% - 44px - 56px - 44px - 20px)}
.hub-reviews .hub-card-sm .hub-title{font-size:17px;line-height:20px}
.hub-reviews .hub-card-sm .hub-desc{font-size:14px;line-height:16px;margin-top:4px}
.hub-reviews .hub-card-sm .hub-text{left:32px;bottom:30px;max-width:calc(100% - 32px - 42.39px - 32px - 16px)}
/* 矢印 (デザイン案仕様 = 従来値と同じ、固定) */
.hub-reviews .hub-card-lg .hub-arrow{width:56px;height:56px;right:44px;bottom:38px}
.hub-reviews .hub-card-lg .hub-arrow i{width:13.89px;height:13.89px}
.hub-reviews .hub-card-sm .hub-arrow{width:42.39px;height:42.39px;right:32px;bottom:28px}
.hub-reviews .hub-card-sm .hub-arrow i{width:10.51px;height:10.51px}
/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-reviews .hub-wrap{width:100%}
.hub-reviews .hub-card-lg{height:250px;border-radius:32px}
.hub-reviews .hub-card-sm{height:200px;border-radius:28px}
.hub-reviews .hub-row{gap:18px;margin-top:18px}
.hub-reviews .hub-card-lg .hub-title{font-size:18px;line-height:22px}
.hub-reviews .hub-card-lg .hub-desc{font-size:15px;line-height:20px}
.hub-reviews .hub-card-sm .hub-desc{font-size:14px;line-height:18px}
}
/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-reviews .hub-row{flex-direction:column;gap:16px;margin-top:16px}
.hub-reviews .hub-card-lg{height:210px;border-radius:24px}
.hub-reviews .hub-card-sm{height:170px;border-radius:24px}
.hub-reviews .hub-card-lg .hub-title{font-size:19px;line-height:23px}
.hub-reviews .hub-card-lg .hub-desc{font-size:15px;line-height:20px}
.hub-reviews .hub-card-sm .hub-title{font-size:17px;line-height:21px}
.hub-reviews .hub-card-sm .hub-desc{font-size:11px;line-height:14px}
}
/* ══════════════════════════════════════════════════════════
レポートハブ — デザイン案 Rectangle 221 ※ カードの順序変更なし
上部 大 442 × 387 (r50) × 2 / 下部 ワイド 915 × 155 (r32)
387 + 37 + 155 = 579px
══════════════════════════════════════════════════════════ */
.hub-report .hub-wrap-report{width:915px}
.hub-report .hub-row-lg{gap:31px;margin-top:0}
.hub-report .hub-card-lg{flex:1 1 0;height:387px;border-radius:50px}
.hub-report .hub-card-wide{height:155px;border-radius:32px;margin-top:37px}
/* テキスト (デザイン案仕様) */
.hub-report .hub-card-lg .hub-title{font-size:21px;line-height:26px}
.hub-report .hub-card-lg .hub-desc{font-size:17px;line-height:20px;margin-top:6px}
.hub-report .hub-card-lg .hub-text{left:44px;bottom:38px;max-width:calc(100% - 44px - 56px - 44px - 20px)}
.hub-report .hub-card-wide .hub-title{font-size:17px;line-height:20px}
.hub-report .hub-card-wide .hub-desc{font-size:14px;line-height:16px;margin-top:4px}
.hub-report .hub-card-wide .hub-text{left:44px;bottom:32px;max-width:calc(100% - 44px - 42.39px - 44px - 24px)}
/* 矢印 (デザイン案仕様) */
.hub-report .hub-card-lg .hub-arrow{width:56px;height:56px;right:44px;bottom:38px}
.hub-report .hub-card-lg .hub-arrow i{width:13.88px;height:13.88px}
.hub-report .hub-card-wide .hub-arrow{width:42.39px;height:42.39px;right:44px;bottom:30px}
.hub-report .hub-card-wide .hub-arrow i{width:10.51px;height:10.51px}
/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-report .hub-wrap-report{width:100%}
.hub-report .hub-row-lg{gap:18px}
.hub-report .hub-card-lg{height:300px;border-radius:32px}
.hub-report .hub-card-wide{height:130px;border-radius:26px;margin-top:22px}
.hub-report .hub-card-lg .hub-title{font-size:17px;line-height:22px}
.hub-report .hub-card-lg .hub-desc{font-size:14px;line-height:18px}
.hub-report .hub-card-lg .hub-text{left:28px;bottom:26px;max-width:calc(100% - 28px - 46px - 28px - 16px)}
.hub-report .hub-card-lg .hub-arrow{width:46px;height:46px;right:28px;bottom:26px}
.hub-report .hub-card-wide .hub-title{font-size:17px;line-height:21px}
.hub-report .hub-card-wide .hub-desc{font-size:14px;line-height:18px}
.hub-report .hub-card-wide .hub-text{left:28px;bottom:24px}
.hub-report .hub-card-wide .hub-arrow{width:38px;height:38px;right:28px;bottom:22px}
}
/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-report .hub-row-lg{flex-direction:column;gap:16px}
.hub-report .hub-card-lg{height:220px;border-radius:24px}
.hub-report .hub-card-wide{height:150px;border-radius:24px;margin-top:16px}
.hub-report .hub-card-lg .hub-text{left:22px;bottom:22px}
.hub-report .hub-card-lg .hub-arrow{width:38px;height:38px;right:20px;bottom:20px}
.hub-report .hub-card-wide .hub-text{left:22px;bottom:22px}
.hub-report .hub-card-wide .hub-arrow{width:34px;height:34px;right:20px;bottom:20px}
}
/* ── カード角の外に四角がはみ出して見える問題の修正 ──
動画/画像/グラデーションがそれぞれ合成レイヤーとして描画されると
親の overflow:hidden のクリッピングが効かないブラウザのバグへの対応。
各レイヤーに直接同じ角丸を与える。 */
.hub-card .hub-media,
.hub-card .hub-shade,
.hub-card .hub-img,
.hub-card .hub-video,
.hub-card .hub-vid,
.hub-card img,
.hub-card video{border-radius:inherit}
/* カード自体も自身のレイヤーでクリッピングされるよう強制 */
.hub-card{transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}
/* ══════════════════════════════════════════════════════════
モバイル(≤640)でのカード崩れの修正 (2026-08-04)
原因: カードの子要素がすべて position:absolute のためコンテンツサイズが0。
① ラッパーが flex-direction:column に変わっても align-items:flex-start が
残っており、交差軸(幅)が shrink-to-fit → 0
② デスクトップ用の flex:1 1 0 が残り、主軸が縦になると
flex-basis:0 が height 指定を打ち消して高さ0
══════════════════════════════════════════════════════════ */
/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-wrap, .hub-wrap-2col, .hub-wrap-cs, .hub-wrap-report, .hub-taian .hub-wrap, .hub-row, .hub-row-lg, .hub-col, .hub-cs-side{align-items:stretch}
/* .hub-cs .hub-card-lg など (0,2,0) と詳細度を揃えないと flex:1 1 0 を上書きできない */
}
.page-hub .hub-card{width:100%;flex:0 0 auto}
/* ══════════════════════════════════════════════════════════
お客様センターハブ — カードの総高さ423px
左: 375 × 198 (r43) × 2、縦gap 27 / 右: 511 × 423 (r57)
198 + 27 + 198 = 423px
══════════════════════════════════════════════════════════ */
.hub-cs .hub-cs-side{gap:27px}
.hub-cs .hub-card-sm{height:198px;border-radius:43px}
.hub-cs .hub-card-lg{flex:0 0 511px;height:423px;border-radius:57px}
/* ══════════════════════════════════════════════════════════
タイアンブリッジレポートハブ — デザイン案 Group 387
左(小・大) / 右(大・小) の互い違い2列、列幅447px
397 + 32 + 150 = 579px
══════════════════════════════════════════════════════════ */
.hub-report .hub-wrap-report2{width:925px;max-width:calc(100% - 40px);margin:0 auto;display:flex;gap:31px;align-items:flex-start}
.hub-report .hub-rp2-col{flex:0 0 447px;min-width:0;display:flex;flex-direction:column;gap:32px}
.hub-report .hub-rp2-col .hub-card-lg{flex:0 0 auto;height:397px;border-radius:35px}
.hub-report .hub-rp2-col .hub-card-sm{flex:0 0 auto;height:150px;border-radius:31px}
/* テキスト (デザイン案仕様) */
.hub-report .hub-rp2-col .hub-card-lg .hub-title{font-size:21px;line-height:26px}
.hub-report .hub-rp2-col .hub-card-lg .hub-desc{font-size:17px;line-height:20px;margin-top:6px}
.hub-report .hub-rp2-col .hub-card-lg .hub-text{left:44px;bottom:36px;max-width:calc(100% - 44px - 42.87px - 44px - 20px)}
.hub-report .hub-rp2-col .hub-card-sm .hub-title{font-size:17px;line-height:20px}
.hub-report .hub-rp2-col .hub-card-sm .hub-desc{
font-size:14px;line-height:16px;margin-top:4px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hub-report .hub-rp2-col .hub-card-sm .hub-text{left:26px;bottom:22px;max-width:calc(100% - 26px - 33.01px - 26px - 14px)}
/* 矢印 (デザイン案仕様) */
.hub-report .hub-rp2-col .hub-card-lg .hub-arrow{width:42.87px;height:42.87px;right:44px;bottom:34px}
.hub-report .hub-rp2-col .hub-card-lg .hub-arrow i{width:10.57px;height:10.57px}
.hub-report .hub-rp2-col .hub-card-sm .hub-arrow{width:33.01px;height:33.01px;right:26px;bottom:20px}
.hub-report .hub-rp2-col .hub-card-sm .hub-arrow i{width:8.14px;height:8.14px;border-top-width:2px;border-right-width:2px;left:-1px}
/* 小カードは高さが低いためグラデーションを早めに開始 (デザイン案 17.31%) */
.hub-report .hub-rp2-col .hub-card-sm .hub-shade{background:linear-gradient(180deg, rgba(0,0,0,0) 17%, rgba(0,0,0,.85) 100%)}
/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-report .hub-wrap-report2{width:100%;max-width:calc(100% - 32px);gap:18px}
.hub-report .hub-rp2-col{flex:1 1 0;gap:18px}
.hub-report .hub-rp2-col .hub-card-lg{height:280px;border-radius:28px}
.hub-report .hub-rp2-col .hub-card-sm{height:120px;border-radius:24px}
.hub-report .hub-rp2-col .hub-card-lg .hub-title{font-size:17px;line-height:22px}
.hub-report .hub-rp2-col .hub-card-lg .hub-desc{font-size:15px;line-height:21px}
.hub-report .hub-rp2-col .hub-card-lg .hub-text{left:26px;bottom:24px;max-width:calc(100% - 26px - 40px - 26px - 16px)}
.hub-report .hub-rp2-col .hub-card-lg .hub-arrow{width:40px;height:40px;right:26px;bottom:22px}
.hub-report .hub-rp2-col .hub-card-sm .hub-title{font-size:17px;line-height:21px}
.hub-report .hub-rp2-col .hub-card-sm .hub-desc{font-size:11px;line-height:14px}
.hub-report .hub-rp2-col .hub-card-sm .hub-text{left:20px;bottom:18px;max-width:calc(100% - 20px - 30px - 20px - 12px)}
.hub-report .hub-rp2-col .hub-card-sm .hub-arrow{width:30px;height:30px;right:20px;bottom:16px}
}
/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-report .hub-wrap-report2{flex-direction:column;gap:16px}
.hub-report .hub-rp2-col{flex:0 0 auto;width:100%;gap:16px}
.hub-report .hub-rp2-col .hub-card-lg{height:230px;border-radius:24px}
.hub-report .hub-rp2-col .hub-card-sm{height:130px;border-radius:22px}
}
/* ══════════════════════════════════════════════════════════
利用者の声ハブ — 1行2列の大カード (2026-08-06)
FX・CFD / バイナリーオプションの口コミを2分割。
レポートハブ上部の大カード(442×387 r50)と同一規格。
══════════════════════════════════════════════════════════ */
.hub-reviews .hub-wrap-rv2{width:915px;max-width:calc(100% - 40px);margin:0 auto;display:flex;gap:31px;align-items:flex-start}
.hub-reviews .hub-wrap-rv2 .hub-card-lg{flex:1 1 0;min-width:0;height:387px;border-radius:50px}
/* テキスト */
.hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-title{font-size:21px;line-height:26px}
.hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-desc{font-size:17px;line-height:20px;margin-top:6px}
.hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-text{left:44px;bottom:38px;max-width:calc(100% - 44px - 56px - 44px - 20px)}
/* 矢印 */
.hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-arrow{width:56px;height:56px;right:44px;bottom:38px}
.hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-arrow i{width:13.88px;height:13.88px}
/* 動画のクロップ位置 — 人物が切れないよう右寄せ */
.hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-vid{object-position:right center}
/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-reviews .hub-wrap-rv2{width:100%;max-width:calc(100% - 32px);gap:18px}
.hub-reviews .hub-wrap-rv2 .hub-card-lg{height:300px;border-radius:32px}
.hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-title{font-size:17px;line-height:22px}
.hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-desc{font-size:14px;line-height:18px}
.hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-text{left:28px;bottom:26px;max-width:calc(100% - 28px - 46px - 28px - 16px)}
.hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-arrow{width:46px;height:46px;right:28px;bottom:26px}
}
/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-reviews .hub-wrap-rv2{flex-direction:column;gap:16px;align-items:stretch}
.hub-reviews .hub-wrap-rv2 .hub-card-lg{width:100%;flex:0 0 auto;height:220px;border-radius:24px}
.hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-text{left:22px;bottom:22px}
.hub-reviews .hub-wrap-rv2 .hub-card-lg .hub-arrow{width:38px;height:38px;right:20px;bottom:20px}
}
/* ══════════════════════════════════════════════════════════
小カード = アイコン + テキストの横型 (2026-08-06)
動画が入る大カードはそのままに、.hub-card-sm のみ切り替える。
構造: ![]()
+ .hub-text + .hub-arrow
アイコン: /assets/images/hub-icons/{slug}.jpg (350×350、白背景)
※ カード外形の寸法(高さ・角丸)は従来どおり → 列の高さ揃えを維持。
※ 詳細度に注意: ハブ別の .hub-text/.hub-arrow 規則が最大 (0,4,0) のため
ここでは (0,5,0) 以上で上書きする。
══════════════════════════════════════════════════════════ */
.page-hub .hub-card.hub-card-icon{
display:flex;align-items:center;gap:18px;
padding:0 22px;
background:#fff;border:1px solid #EDEFF3;
box-shadow:5px 6px 14px -4px rgba(16,24,40,.28);
/* メディアのクリッピング用マスク・レイヤー昇格はアイコンカードで影を切ってしまうため解除 */
-webkit-mask-image:none;mask-image:none;transform:none;
transition:box-shadow .25s ease,border-color .25s ease;
}
.page-hub .hub-card.hub-card-icon:hover{box-shadow:8px 10px 22px -6px rgba(16,24,40,.34);border-color:#D9E1F7}
/* アイコン */
.page-hub .hub-card.hub-card-icon .hub-ic{flex:0 0 auto;display:block;width:72px;height:72px}
.page-hub .hub-card.hub-card-icon .hub-ic img{display:block;width:100%;height:100%;object-fit:contain;border-radius:0}
/* テキスト — absolute を解除して flex アイテムに */
.page-hub .hub-card.hub-card-icon.hub-card-sm .hub-text{
position:static;left:auto;right:auto;bottom:auto;
flex:1 1 auto;min-width:0;max-width:none;
}
.page-hub .hub-card.hub-card-icon.hub-card-sm .hub-title{color:#454545;font-weight:700}
.page-hub .hub-card.hub-card-icon.hub-card-sm .hub-desc{
color:#454545;font-weight:500;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* 矢印 — absolute を解除、グレーの円 */
.page-hub .hub-card.hub-card-icon.hub-card-sm .hub-arrow{
position:relative;top:14px;right:auto;bottom:auto;flex:0 0 auto;background:#F1F3F7;
}
.page-hub .hub-card.hub-card-icon.hub-card-sm .hub-arrow i{border-color:#4B5563}
.page-hub .hub-card.hub-card-icon.hub-card-sm:hover .hub-arrow{background:#1F3DFF}
.page-hub .hub-card.hub-card-icon.hub-card-sm:hover .hub-arrow i{border-color:#fff}
/* リンク未定のカード — hover効果なし */
.page-hub .hub-card.hub-card-icon.is-disabled:hover{box-shadow:5px 6px 14px -4px rgba(16,24,40,.28);border-color:#EDEFF3}
.page-hub .hub-card.hub-card-icon.hub-card-sm.is-disabled:hover .hub-arrow{background:#F1F3F7}
.page-hub .hub-card.hub-card-icon.hub-card-sm.is-disabled:hover .hub-arrow i{border-color:#4B5563}
/* ── ハブ別のアイコンサイズ・余白 (カード高さに合わせる) ── */
.hub-binary .hub-card.hub-card-icon,
.hub-fxcfd .hub-card.hub-card-icon{gap:16px;padding:0 20px} /* 高さ110 */
.hub-binary .hub-card.hub-card-icon .hub-ic,
.hub-fxcfd .hub-card.hub-card-icon .hub-ic{width:64px;height:64px}
.hub-report .hub-rp2-col .hub-card.hub-card-icon .hub-ic{width:82px;height:82px} /* 高さ150 */
.hub-taian .hub-row .hub-card.hub-card-icon .hub-ic{width:68px;height:68px} /* 高さ173 */
.hub-cs .hub-card.hub-card-icon{gap:22px;padding:0 26px} /* 高さ271 */
.hub-cs .hub-card.hub-card-icon .hub-ic{width:88px;height:88px}
/* ── タブレット ── */
/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.page-hub .hub-card.hub-card-icon{gap:14px;padding:0 16px}
.page-hub .hub-card.hub-card-icon .hub-ic{width:60px;height:60px}
.hub-binary .hub-card.hub-card-icon .hub-ic, .hub-fxcfd .hub-card.hub-card-icon .hub-ic{width:56px;height:56px}
.hub-report .hub-rp2-col .hub-card.hub-card-icon .hub-ic{width:66px;height:66px}
.hub-taian .hub-row .hub-card.hub-card-icon .hub-ic{width:66px;height:66px}
.hub-cs .hub-card.hub-card-icon{gap:16px;padding:0 18px}
.hub-cs .hub-card.hub-card-icon .hub-ic{width:86px;height:86px}
}
/* ── モバイル ── */
/* 復元: 旧 max-width:640px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.page-hub .hub-card.hub-card-icon{gap:14px;padding:0 16px}
.page-hub .hub-card.hub-card-icon .hub-ic{width:64px;height:64px}
.hub-cs .hub-card.hub-card-icon .hub-ic{width:76px;height:76px}
.hub-taian .hub-row .hub-card.hub-card-icon .hub-ic{width:72px;height:72px}
}
/* ── 幅375pxの狭いカード(Taian Bridge・お客様センターハブ)の補正 ──
アイコン・矢印・余白が大きいとテキスト領域が170px未満になり
見出しが2行に折れて本文が切れる。アイコンを小さくし、本文は3行まで許容する。 */
.hub-taian .hub-row .hub-card.hub-card-icon{gap:14px;padding:0 18px}
.hub-taian .hub-row .hub-card.hub-card-icon .hub-ic{width:68px;height:68px}
.page-hub.hub-taian .hub-card.hub-card-icon.hub-card-sm .hub-title{font-size:15px;line-height:20px}
.page-hub.hub-taian .hub-card.hub-card-icon.hub-card-sm .hub-desc{font-size:13px;line-height:18px;-webkit-line-clamp:3}
.page-hub.hub-taian .hub-card.hub-card-icon.hub-card-sm .hub-arrow{width:36px;height:36px}
.page-hub.hub-taian .hub-card.hub-card-icon.hub-card-sm .hub-arrow i{width:9px;height:9px;border-top-width:2px;border-right-width:2px;left:-1px}
.hub-cs .hub-card.hub-card-icon{gap:16px;padding:0 20px}
.hub-cs .hub-card.hub-card-icon .hub-ic{width:96px;height:96px}
.page-hub.hub-cs .hub-card.hub-card-icon.hub-card-sm .hub-title{font-size:19px;line-height:24px}
.page-hub.hub-cs .hub-card.hub-card-icon.hub-card-sm .hub-desc{font-size:13px;line-height:18px;-webkit-line-clamp:3}
.page-hub.hub-cs .hub-card.hub-card-icon.hub-card-sm .hub-arrow{width:36px;height:36px}
.page-hub.hub-cs .hub-card.hub-card-icon.hub-card-sm .hub-arrow i{width:9px;height:9px;border-top-width:2px;border-right-width:2px;left:-1px}
/* レポートハブの小カードも見出しが2行にならないよう少し縮小 */
.page-hub.hub-report .hub-rp2-col .hub-card.hub-card-icon.hub-card-sm .hub-title{font-size:15px;line-height:20px}
.page-hub.hub-report .hub-rp2-col .hub-card.hub-card-icon.hub-card-sm .hub-desc{font-size:12px;line-height:16px}
/* 復元: 旧 max-width:980px。レスポンシブ化に伴い body.is-mobile から戻した */
@media (max-width:1023.98px){
.hub-taian .hub-row .hub-card.hub-card-icon .hub-ic{width:56px;height:56px}
.hub-cs .hub-card.hub-card-icon .hub-ic{width:72px;height:72px}
}
/* ══════════════════════════════════════════════════════════════
全ハブ モバイル: PCと同じ配置 v2 (2026-08-19)
- 列は%幅ベース(aspect-ratio+min-heightの最小幅転移によるはみ出しを回避)
- 文字/矢印は !important で最終確定(旧ルールとの詳細度競合を終結)
══════════════════════════════════════════════════════════════ */
/* ── レポート (/report/): 左(小+大) / 右(大+小) ── */
@media (max-width:1023.98px){
.hub-report .hub-wrap-report2{display:flex;flex-direction:row;gap:12px;width:100%;max-width:calc(100% - 32px)}
.hub-report .hub-rp2-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:12px}
.hub-report .hub-rp2-col .hub-card-lg{flex:0 0 auto;height:auto;min-height:0;aspect-ratio:447/397;border-radius:20px}
.hub-report .hub-rp2-col .hub-card-sm{flex:0 0 auto;height:auto;min-height:0;border-radius:16px}
}
/* ── タイアンブリッジ (/taian-bridge/): 左 大58% / 右 小3枚(大と同じ高さに分割) ── */
@media (max-width:1023.98px){
.hub-taian .hub-wrap{display:flex;flex-direction:row;gap:12px}
.hub-taian .hub-card-lg{flex:0 0 58%;max-width:58%;min-width:0;height:auto;min-height:0;aspect-ratio:511/579;border-radius:20px}
.hub-taian .hub-row{flex:1 1 0;min-width:0;width:auto;display:flex;flex-direction:column;gap:12px;margin-top:0}
.hub-taian .hub-row .hub-card-sm{flex:1 1 0;height:auto;min-height:0;border-radius:16px}
}
/* ── バイナリー / FX・CFD: 2列スタガード ── */
@media (max-width:1023.98px){
.hub-wrap-2col{display:flex;flex-direction:row;gap:12px}
.hub-col{flex:1 1 0;min-width:0;gap:12px}
.hub-binary .hub-card-lg,
.hub-fxcfd .hub-card-lg{height:auto;min-height:150px;aspect-ratio:442/438;border-radius:20px}
.hub-binary .hub-i-binary-option-apply,
.hub-fxcfd .hub-i-fx-cfd-apply{aspect-ratio:442/313;min-height:120px}
.hub-binary .hub-card-sm,
.hub-fxcfd .hub-card-sm{height:auto;min-height:0;aspect-ratio:auto;padding-top:10px;padding-bottom:10px;border-radius:14px}
}
/* ── 利用者の声 (/reviews-hub/): 上 大2枚 / 下 小2枚 ── */
@media (max-width:1023.98px){
.hub-reviews .hub-wrap-rv2{display:flex;flex-direction:row;gap:12px;align-items:stretch}
.hub-reviews .hub-wrap-rv2 .hub-card-lg{width:auto;flex:1 1 0;min-width:0;height:auto;min-height:0;aspect-ratio:442/387;border-radius:20px}
.hub-reviews .hub-row{display:flex;flex-direction:row;gap:12px;margin-top:12px}
.hub-reviews .hub-card-sm{flex:1 1 0;min-width:0;height:auto;min-height:0;aspect-ratio:447/236;border-radius:16px}
}
/* ── お客様センター (/customer-center/): 左 小42%2枚 / 右 大 ── */
@media (max-width:1023.98px){
.hub-wrap-cs{display:flex;flex-direction:row;gap:12px}
.hub-cs-side{flex:0 0 42%;max-width:42%;min-width:0;display:flex;flex-direction:column;gap:12px}
.hub-cs .hub-card-sm{flex:1 1 0;height:auto;min-height:0;border-radius:16px}
.hub-cs .hub-card-lg{flex:1 1 0;min-width:0;height:auto;min-height:0;aspect-ratio:511/423;border-radius:20px}
}
/* ── 文字(15%縮小済みの可変値・最終確定) ── */
@media (max-width:1023.98px){
.page-hub .hub-card-lg .hub-title{font-size:clamp(11px,3.4vw,17px)!important;line-height:1.3!important}
.page-hub .hub-card-lg .hub-desc{font-size:clamp(8.5px,2.4vw,12px)!important;line-height:1.4!important;margin-top:3px}
.page-hub .hub-card-sm .hub-title{font-size:clamp(9.5px,2.8vw,13.5px)!important;line-height:1.25!important}
.page-hub .hub-card-sm .hub-desc{font-size:clamp(7.5px,2.1vw,11px)!important;line-height:1.35!important;margin-top:2px}
}
/* ── 矢印: 右端に小さな余白を空けて固定 ── */
@media (max-width:1023.98px){
.page-hub .hub-card-lg .hub-arrow{width:clamp(24px,7vw,40px)!important;height:clamp(24px,7vw,40px)!important;right:clamp(10px,3vw,22px)!important;bottom:clamp(10px,3vw,22px)!important;left:auto!important}
.page-hub .hub-card-lg .hub-arrow i{width:clamp(6px,1.7vw,10px);height:clamp(6px,1.7vw,10px)}
.page-hub .hub-card-sm .hub-arrow{width:clamp(18px,5.5vw,32px)!important;height:clamp(18px,5.5vw,32px)!important;right:clamp(8px,2.5vw,18px)!important;bottom:clamp(8px,2.5vw,18px)!important;left:auto!important}
.page-hub .hub-card-sm .hub-arrow i{width:clamp(4.5px,1.3vw,8px);height:clamp(4.5px,1.3vw,8px)}
}
/* ── 本文: 矢印の幅+間隔を必ず確保(重なり禁止・最終確定) ── */
@media (max-width:1023.98px){
.page-hub .hub-card-lg .hub-text{left:clamp(12px,4vw,26px)!important;bottom:clamp(10px,3.5vw,22px)!important;max-width:calc(100% - clamp(12px,4vw,26px) - clamp(24px,7vw,40px) - clamp(10px,3vw,22px) - 8px)!important}
.page-hub .hub-card-sm .hub-text{left:clamp(10px,3vw,22px)!important;bottom:clamp(8px,2.5vw,18px)!important;max-width:calc(100% - clamp(10px,3vw,22px) - clamp(18px,5.5vw,32px) - clamp(8px,2.5vw,18px) - 8px)!important}
}
/* ── アイコン型小カード: flex配置(静的)を復元・縮小・説明文非表示 ── */
@media (max-width:1023.98px){
.page-hub .hub-card.hub-card-icon{gap:clamp(6px,2vw,14px);padding:clamp(8px,2.5vw,14px) clamp(8px,2.5vw,16px)}
.page-hub .hub-card.hub-card-icon .hub-ic{width:clamp(26px,8vw,52px)!important;height:clamp(26px,8vw,52px)!important}
.page-hub .hub-card.hub-card-icon .hub-text{position:static!important;max-width:none!important}
.page-hub .hub-card.hub-card-icon.hub-card-sm .hub-desc{display:none!important}
.page-hub .hub-card.hub-card-icon.hub-card-sm .hub-arrow{position:relative!important;top:0!important;right:auto!important;bottom:auto!important}
}
/* ── バイナリー/FX・CFD 比較ハブ v3 (2026-08-20 デザイン案): サイズ・配置のみ変更(小カードは既存アイコン式) ── */
.hub-binary .hub-body,.hub-fxcfd .hub-body{background:#F8F9FB}
.hub-binary .hub-col,.hub-fxcfd .hub-col{gap:15px}
.hub-binary .hub-card-lg,.hub-fxcfd .hub-card-lg{height:438px;border-radius:35px}
.hub-binary .hub-i-binary-option-apply,.hub-fxcfd .hub-i-fx-cfd-apply{height:313px}
.hub-binary .hub-card-sm,.hub-fxcfd .hub-card-sm{height:110px;border-radius:26px;flex:0 0 auto}
.hub-binary .hub-card-lg .hub-title,.hub-fxcfd .hub-card-lg .hub-title{font-size:25px;line-height:30px}
.hub-binary .hub-card-lg .hub-desc,.hub-fxcfd .hub-card-lg .hub-desc{font-size:20px;line-height:24px;font-weight:500}
.hub-binary .hub-card-lg .hub-text,.hub-fxcfd .hub-card-lg .hub-text{left:32px;bottom:26px;max-width:calc(100% - 32px - 42.39px - 32px - 16px)}
.hub-binary .hub-card-lg .hub-arrow,.hub-fxcfd .hub-card-lg .hub-arrow{width:42.39px;height:42.39px;right:32px;bottom:26px}
.hub-binary .hub-card-lg .hub-arrow i,.hub-fxcfd .hub-card-lg .hub-arrow i{width:10.51px;height:10.51px}
/* FX・CFDハブ — ヒーローの見出しを白抜き(背景画像が暗いため) */
.hub-fxcfd .hub-hero-title,
.hub-fxcfd .hub-hero-sub{color:#FAFAFA;text-shadow:0 2px 10px rgba(0,0,0,.35)}
/* 利用者の声ハブ・レポートハブ — ヒーローを暗いオーバーレイ(30%)にして見出しを白抜き */
.hub-reviews:not(.page-ek) .hub-hero-overlay,
.hub-report .hub-hero-overlay{background:rgba(0,0,0,.30)}
.hub-reviews:not(.page-ek) .hub-hero-title,
.hub-reviews:not(.page-ek) .hub-hero-sub,
.hub-report .hub-hero-title,
.hub-report .hub-hero-sub{color:#FAFAFA;text-shadow:0 2px 10px rgba(0,0,0,.35)}
/* 業者の選び方トップ — ヒーロー写真の上で白見出しを読みやすくする暗幕 */
.page-ek.hub-reviews .hub-hero-overlay{background:rgba(0,0,0,.35)}
.page-ek.hub-reviews .hub-hero-title,
.page-ek.hub-reviews .hub-hero-sub{text-shadow:0 2px 10px rgba(0,0,0,.45)}
/* /wp-content/themes/taian-bridge-rwd/hub-grid.css */
/* ══════════════════════════════════════════════════════════
大分類ハブ — 共通カードグリッド (2026-09-11)
既定: 細長い縦型カード 214×424 / 動画は停止(ポスター表示)
hover: カードが 342px に拡張 + 動画再生 + 隣接カードが押し出される
列数: 2→2列 / 3→3列 / 4→4列 / 5→2+3 / 6→3+3 (行は中央揃え)
══════════════════════════════════════════════════════════ */
.hgrid{
width:1320px;max-width:calc(100% - 40px);margin:0 auto;
display:flex;flex-direction:column;gap:26px;
}
.hgrid-row{display:flex;justify-content:center;gap:24px;align-items:flex-start}
.hgc{
position:relative;display:block;overflow:hidden;text-decoration:none;isolation:isolate;
flex:0 0 214px;width:214px;height:424px;border-radius:26px;
transition:flex-basis .62s cubic-bezier(.16,1,.3,1),
width .62s cubic-bezier(.16,1,.3,1),
box-shadow .45s cubic-bezier(.16,1,.3,1);
-webkit-user-select:none;user-select:none;-webkit-user-drag:none;
-webkit-tap-highlight-color:transparent;
}
.hgc:hover{flex-basis:342px;width:342px;box-shadow:0 18px 44px rgba(0,0,0,.22)}
.hgc:focus-visible{outline:3px solid #1F3DFF;outline-offset:4px}
/* メディア */
.hgc-media{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit}
.hgc-vid,.hgc-img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
background-size:cover;background-position:center;background-repeat:no-repeat;
filter:brightness(.88);transition:filter .4s ease;
-webkit-user-drag:none;pointer-events:none;
}
.hgc:hover .hgc-vid,.hgc:hover .hgc-img{filter:brightness(1)}
/* 下部グラデーション */
.hgc-shade{
position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
background:linear-gradient(180deg,
rgba(18,20,24,0) 26%, rgba(18,20,24,.55) 46%,
rgba(18,20,24,.86) 68%, rgba(18,20,24,.96) 100%);
}
/* テキスト + ボタン */
.hgc-body{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;display:block}
.hgc-title{
display:block;color:#fff;font-weight:700;font-size:16px;line-height:22px;letter-spacing:.01em;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hgc-desc{
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
color:rgba(255,255,255,.88);font-weight:400;font-size:12px;line-height:17px;margin-top:9px;
}
.hgc-btn{
position:relative;display:flex;align-items:center;justify-content:center;
height:36px;margin-top:15px;border-radius:18px;background:#FAFAFA;
transition:background-color .3s ease;
}
.hgc-btn-tx{color:#1A1A1A;font-weight:700;font-size:13px;line-height:1}
.hgc-btn-ar{
position:absolute;right:16px;width:7px;height:7px;
border-right:2px solid #1A1A1A;border-bottom:2px solid #1A1A1A;
transform:rotate(-45deg);opacity:0;transition:opacity .3s ease;
}
.hgc:hover .hgc-btn-ar{opacity:1}
/* リンク未定のカード */
.hgc.is-disabled{cursor:default}
.hgc.is-disabled:hover{flex-basis:214px;width:214px;box-shadow:none}
.hgc.is-disabled:hover .hgc-vid,.hgc.is-disabled:hover .hgc-img{filter:brightness(.88)}
@media (prefers-reduced-motion:reduce){
.hgc,.hgc-vid,.hgc-img,.hgc-btn-ar{transition:none}
}
/* 画面が狭い場合 — 行を折り返して縮小 */
@media (max-width:1200px){
.hgrid{width:auto;max-width:calc(100% - 32px)}
.hgrid-row{flex-wrap:wrap;gap:20px}
}
/* アイコン素材(明るい背景)のカード — 白文字のコントラストを確保 */
.hgc-icon .hgc-img{filter:brightness(.84)}
.hgc-icon:hover .hgc-img{filter:brightness(.96)}
.hgc-icon .hgc-shade{
background:linear-gradient(180deg,
rgba(16,18,22,0) 16%, rgba(16,18,22,.50) 36%,
rgba(16,18,22,.88) 58%, rgba(16,18,22,.97) 100%);
}
/* 横1列固定 — 画面幅に応じてカードを縮小し、hover 拡張分まで収める */
.hgrid-row{flex-wrap:nowrap}
@media (max-width:1400px){
.hgc{flex-basis:196px;width:196px}
.hgc:hover{flex-basis:312px;width:312px}
.hgc.is-disabled:hover{flex-basis:196px;width:196px}
}
@media (max-width:1240px){
.hgc{flex-basis:172px;width:172px}
.hgc:hover{flex-basis:274px;width:274px}
.hgc.is-disabled:hover{flex-basis:172px;width:172px}
.hgrid-row{gap:18px}
.hgc-title{font-size:15px;line-height:20px}
.hgc-desc{font-size:11.5px;line-height:16px}
}
/* ══════════════════════════════════════════════════════════
5枚カードのハブ(/binary-option/・/fx-cfd/) — 右3枚を正方形に
1列目・2列目は従来どおりの縦長カード、3列目は正方形カード2段、
4列目は正方形カード1段。縦長424px = 正方形200px×2 + gap24px。
══════════════════════════════════════════════════════════ */
@media (min-width:1024px){
.hgrid-n5 .hgrid-row{
display:grid;
grid-template-columns:auto auto 200px 200px;
grid-template-rows:200px 200px;
gap:24px;
justify-content:center;
align-items:start;
}
.hgrid-n5 .hgc:nth-child(1){grid-area:1/1/3/2}
.hgrid-n5 .hgc:nth-child(2){grid-area:1/2/3/3}
.hgrid-n5 .hgc:nth-child(3){grid-area:1/3/2/4}
.hgrid-n5 .hgc:nth-child(4){grid-area:2/3/3/4}
.hgrid-n5 .hgc:nth-child(5){grid-area:1/4/2/5}
/* 縦長カード(1・2列目) */
.hgrid-n5 .hgc:nth-child(-n+2){flex:none;width:214px;height:424px}
/* 正方形カード(3枚) */
.hgrid-n5 .hgc:nth-child(n+3){flex:none;width:200px;height:200px;border-radius:22px}
/* 縦長カード(1・2列目)は従来どおり hover で横に拡張する。
1・2列目のグリッドトラックは auto なので、拡張分だけ右の列が押し出される。 */
.hgrid-n5 .hgc:hover{flex-basis:auto}
.hgrid-n5 .hgc:nth-child(-n+2):hover{width:342px}
/* 正方形カードは形を保つため横拡張しない(影と明度のみ) */
.hgrid-n5 .hgc:nth-child(n+3):hover{width:200px}
/* 正方形カードの文字組み */
.hgrid-n5 .hgc:nth-child(n+3) .hgc-body{left:14px;right:14px;bottom:14px}
.hgrid-n5 .hgc:nth-child(n+3) .hgc-title{font-size:15px;line-height:20px}
.hgrid-n5 .hgc:nth-child(n+3) .hgc-desc{-webkit-line-clamp:2;font-size:11.5px;line-height:16px;margin-top:6px}
.hgrid-n5 .hgc:nth-child(n+3) .hgc-btn{height:32px;margin-top:10px;border-radius:16px}
}
@media (min-width:1024px) and (max-width:1400px){
.hgrid-n5 .hgc:nth-child(-n+2){width:196px}
.hgrid-n5 .hgc:nth-child(-n+2):hover{width:312px}
}
@media (min-width:1024px) and (max-width:1240px){
.hgrid-n5 .hgrid-row{gap:18px;grid-template-columns:auto auto 203px 203px;grid-template-rows:203px 203px}
.hgrid-n5 .hgc:nth-child(-n+2){width:172px}
.hgrid-n5 .hgc:nth-child(-n+2):hover{width:274px}
.hgrid-n5 .hgc:nth-child(n+3),
.hgrid-n5 .hgc:nth-child(n+3):hover{width:203px;height:203px}
}
/* ══════════════════════════════════════════════════════════
レポートハブ(/report/) — 3・4枚目を正方形にして3列目に2段で置く
1・2列目は従来どおりの縦長カード(424px)、3列目は正方形200px×2段。
※同じ hgrid-n4 でも業者の選び方(/erabikata/…)は従来のまま。
══════════════════════════════════════════════════════════ */
@media (min-width:1024px){
.hub-report .hgrid-n4 .hgrid-row{
display:grid;
grid-template-columns:auto auto 200px;
grid-template-rows:200px 200px;
gap:24px;
justify-content:center;
align-items:start;
}
.hub-report .hgrid-n4 .hgc:nth-child(1){grid-area:1/1/3/2}
.hub-report .hgrid-n4 .hgc:nth-child(2){grid-area:1/2/3/3}
.hub-report .hgrid-n4 .hgc:nth-child(3){grid-area:1/3/2/4}
.hub-report .hgrid-n4 .hgc:nth-child(4){grid-area:2/3/3/4}
.hub-report .hgrid-n4 .hgc:nth-child(-n+2){flex:none;width:214px;height:424px}
.hub-report .hgrid-n4 .hgc:nth-child(n+3){flex:none;width:200px;height:200px;border-radius:22px}
/* 縦長カードは従来どおり hover で横に拡張、正方形カードは形を保つ */
.hub-report .hgrid-n4 .hgc:hover{flex-basis:auto}
.hub-report .hgrid-n4 .hgc:nth-child(-n+2):hover{width:342px}
.hub-report .hgrid-n4 .hgc:nth-child(n+3):hover{width:200px}
.hub-report .hgrid-n4 .hgc:nth-child(n+3) .hgc-body{left:14px;right:14px;bottom:14px}
.hub-report .hgrid-n4 .hgc:nth-child(n+3) .hgc-title{font-size:15px;line-height:20px}
.hub-report .hgrid-n4 .hgc:nth-child(n+3) .hgc-desc{-webkit-line-clamp:2;font-size:11.5px;line-height:16px;margin-top:6px}
.hub-report .hgrid-n4 .hgc:nth-child(n+3) .hgc-btn{height:32px;margin-top:10px;border-radius:16px}
}
@media (min-width:1024px) and (max-width:1400px){
.hub-report .hgrid-n4 .hgc:nth-child(-n+2){width:196px}
.hub-report .hgrid-n4 .hgc:nth-child(-n+2):hover{width:312px}
}
@media (min-width:1024px) and (max-width:1240px){
.hub-report .hgrid-n4 .hgrid-row{gap:18px;grid-template-columns:auto auto 203px;grid-template-rows:203px 203px}
.hub-report .hgrid-n4 .hgc:nth-child(-n+2){width:172px}
.hub-report .hgrid-n4 .hgc:nth-child(-n+2):hover{width:274px}
.hub-report .hgrid-n4 .hgc:nth-child(n+3),
.hub-report .hgrid-n4 .hgc:nth-child(n+3):hover{width:203px;height:203px}
}
/* ══════════════════════════════════════════════════════════
業者の選び方トップ(/erabikata/) — 3枚目を正方形にして3列目の2段目に置く
1・2列目は従来どおりの縦長カード(424px)、3列目は正方形200pxを下段に配置。
══════════════════════════════════════════════════════════ */
@media (min-width:1024px){
.page-ek .hgrid-n3 .hgrid-row{
display:grid;
grid-template-columns:auto auto 200px;
grid-template-rows:200px 200px;
gap:24px;
justify-content:center;
align-items:start;
}
.page-ek .hgrid-n3 .hgc:nth-child(1){grid-area:1/1/3/2}
.page-ek .hgrid-n3 .hgc:nth-child(2){grid-area:1/2/3/3}
.page-ek .hgrid-n3 .hgc:nth-child(3){grid-area:2/3/3/4}
.page-ek .hgrid-n3 .hgc:nth-child(-n+2){flex:none;width:214px;height:424px}
.page-ek .hgrid-n3 .hgc:nth-child(3){flex:none;width:200px;height:200px;border-radius:22px}
.page-ek .hgrid-n3 .hgc:hover{flex-basis:auto}
.page-ek .hgrid-n3 .hgc:nth-child(-n+2):hover{width:342px}
.page-ek .hgrid-n3 .hgc:nth-child(3):hover{width:200px}
.page-ek .hgrid-n3 .hgc:nth-child(3) .hgc-body{left:14px;right:14px;bottom:14px}
.page-ek .hgrid-n3 .hgc:nth-child(3) .hgc-title{font-size:15px;line-height:20px}
.page-ek .hgrid-n3 .hgc:nth-child(3) .hgc-desc{-webkit-line-clamp:2;font-size:11.5px;line-height:16px;margin-top:6px}
.page-ek .hgrid-n3 .hgc:nth-child(3) .hgc-btn{height:32px;margin-top:10px;border-radius:16px}
}
@media (min-width:1024px) and (max-width:1400px){
.page-ek .hgrid-n3 .hgc:nth-child(-n+2){width:196px}
.page-ek .hgrid-n3 .hgc:nth-child(-n+2):hover{width:312px}
}
@media (min-width:1024px) and (max-width:1240px){
.page-ek .hgrid-n3 .hgrid-row{gap:18px;grid-template-columns:auto auto 203px;grid-template-rows:203px 203px}
.page-ek .hgrid-n3 .hgc:nth-child(-n+2){width:172px}
.page-ek .hgrid-n3 .hgc:nth-child(-n+2):hover{width:274px}
.page-ek .hgrid-n3 .hgc:nth-child(3),
.page-ek .hgrid-n3 .hgc:nth-child(3):hover{width:203px;height:203px}
}
/* ══════════════════════════════════════════════════════════
正方形カード共通 — 説明文を省略(…)せず全文表示する
対象: /binary-option/・/fx-cfd/(3〜5枚目)、/report/(3〜4枚目)、
/erabikata/(3枚目)
200px の枠に最大4行(約50文字)が収まるようにサイズを調整し、
文字が写真に重なっても読めるよう下地のグラデーションを濃くする。
══════════════════════════════════════════════════════════ */
@media (min-width:1024px){
.hgrid-n5 .hgc:nth-child(n+3) .hgc-body,
.hub-report .hgrid-n4 .hgc:nth-child(n+3) .hgc-body,
.page-ek .hgrid-n3 .hgc:nth-child(3) .hgc-body{left:12px;right:12px;bottom:12px}
.hgrid-n5 .hgc:nth-child(n+3) .hgc-title,
.hub-report .hgrid-n4 .hgc:nth-child(n+3) .hgc-title,
.page-ek .hgrid-n3 .hgc:nth-child(3) .hgc-title{font-size:14px;line-height:18px}
.hgrid-n5 .hgc:nth-child(n+3) .hgc-desc,
.hub-report .hgrid-n4 .hgc:nth-child(n+3) .hgc-desc,
.page-ek .hgrid-n3 .hgc:nth-child(3) .hgc-desc{
display:block;-webkit-line-clamp:none;overflow:visible;
font-size:10.5px;line-height:14.5px;margin-top:4px;
}
.hgrid-n5 .hgc:nth-child(n+3) .hgc-btn,
.hub-report .hgrid-n4 .hgc:nth-child(n+3) .hgc-btn,
.page-ek .hgrid-n3 .hgc:nth-child(3) .hgc-btn{height:28px;margin-top:8px;border-radius:14px}
.hgrid-n5 .hgc:nth-child(n+3) .hgc-btn-tx,
.hub-report .hgrid-n4 .hgc:nth-child(n+3) .hgc-btn-tx,
.page-ek .hgrid-n3 .hgc:nth-child(3) .hgc-btn-tx{font-size:12px}
.hgrid-n5 .hgc:nth-child(n+3) .hgc-shade,
.hub-report .hgrid-n4 .hgc:nth-child(n+3) .hgc-shade,
.page-ek .hgrid-n3 .hgc:nth-child(3) .hgc-shade{
background:linear-gradient(180deg,
rgba(18,20,24,0) 4%, rgba(18,20,24,.52) 26%,
rgba(18,20,24,.86) 50%, rgba(18,20,24,.96) 100%);
}
}
/* ══════════════════════════════════════════════════════════
5枚カードのハブ(/binary-option/・/fx-cfd/) — 縦長1枚 + 正方形2×2 (2026-09-29)
1列目: 比較申込(縦長424px) / 2列目: とは？(上)・中級者ガイド(下)
3列目: 初心者ガイド(上)・上級者ガイド(下) ※FX・CFDハブは従来どおり
══════════════════════════════════════════════════════════ */
@media (min-width:1024px){
.hgrid-n5 .hgrid-row{grid-template-columns:auto 200px 200px}
.hgrid-n5 .hgc:nth-child(1){grid-area:1/1/3/2}
.hgrid-n5 .hgc:nth-child(2){grid-area:1/2/2/3}
.hgrid-n5 .hgc:nth-child(3){grid-area:1/3/2/4}
.hgrid-n5 .hgc:nth-child(4){grid-area:2/2/3/3}
.hgrid-n5 .hgc:nth-child(5){grid-area:2/3/3/4}
/* 2枚目も正方形カードとして扱う(サイズ・文字組み・下地) */
.hgrid-n5 .hgc:nth-child(2){flex:none;width:200px;height:200px;border-radius:22px}
.hgrid-n5 .hgc:nth-child(2):hover{width:200px}
.hgrid-n5 .hgc:nth-child(2) .hgc-body{left:12px;right:12px;bottom:12px}
.hgrid-n5 .hgc:nth-child(2) .hgc-title{font-size:14px;line-height:18px}
.hgrid-n5 .hgc:nth-child(2) .hgc-desc{
display:block;-webkit-line-clamp:none;overflow:visible;
font-size:10.5px;line-height:14.5px;margin-top:4px;
}
.hgrid-n5 .hgc:nth-child(2) .hgc-btn{height:28px;margin-top:8px;border-radius:14px}
.hgrid-n5 .hgc:nth-child(2) .hgc-btn-tx{font-size:12px}
.hgrid-n5 .hgc:nth-child(2) .hgc-shade{
background:linear-gradient(180deg,
rgba(18,20,24,0) 4%, rgba(18,20,24,.52) 26%,
rgba(18,20,24,.86) 50%, rgba(18,20,24,.96) 100%);
}
}
@media (min-width:1024px) and (max-width:1240px){
.hgrid-n5 .hgrid-row{grid-template-columns:auto 203px 203px}
.hgrid-n5 .hgc:nth-child(2),
.hgrid-n5 .hgc:nth-child(2):hover{width:203px;height:203px}
}
/* ══════════════════════════════════════════════════════════
5枚カードハブの正方形カード(2〜5枚目) — 明るいイラスト素材向け調整
・素材を暗く見せないよう brightness フィルタを外す
・文字が乗る下半分だけを濃くし、上半分のイラストは明るいまま残す
══════════════════════════════════════════════════════════ */
@media (min-width:1024px){
.hgrid-n5 .hgc:nth-child(n+2) .hgc-vid,
.hgrid-n5 .hgc:nth-child(n+2):hover .hgc-vid{filter:none}
/* イラスト素材にグラデーションが焼き込まれているため、
サイト側の暗幕(.hgc-shade)は重ねない(二重に暗くなるのを防ぐ) */
.hgrid-n5 .hgc:nth-child(n+2) .hgc-shade{background:none}
}
/* レポートハブの正方形カード(グローバルチャート・週刊ニュース) — イラストに暗幕が焼き込まれているため重ねない */
@media (min-width:1024px){
.hub-report .hgrid-n4 .hgc:nth-child(n+3) .hgc-shade{background:none}
.hub-report .hgrid-n4 .hgc:nth-child(n+3) .hgc-vid,
.hub-report .hgrid-n4 .hgc:nth-child(n+3):hover .hgc-vid{filter:none}
}
/* ══════════════════════════════════════════════════════════
ハブ本文 (カード直下の案内文) — 2026-09-29
hub-grid.php の taian_hub_intro() が出力
══════════════════════════════════════════════════════════ */
.hub-intro{
width:925px;max-width:calc(100% - 40px);margin:64px auto 0;
font-size:16px;line-height:1.95;color:#333;letter-spacing:.01em;
}
.hub-intro p{margin:0 0 1.1em}
.hub-intro p:last-child{margin-bottom:0}
.hub-intro a{color:#0047ab;text-decoration:underline;text-underline-offset:3px}
.hub-intro a:hover{color:#00064b}
.hub-intro .hub-intro-note{margin-top:1.6em;font-size:13.5px;line-height:1.8;color:#777}
/* レポート(バイナリーオプション)ポータル: 中央カラム幅に合わせる */
.hub-intro.hub-intro-rp{width:auto;max-width:none;margin:28px 0 28px;font-size:15px}
@media (max-width:1024px){
.hub-intro{max-width:calc(100% - 32px);margin-top:36px;font-size:14.5px;line-height:1.9}
.hub-intro .hub-intro-note{font-size:12.5px}
.hub-intro.hub-intro-rp{max-width:none;margin:20px 0}
}
/* /wp-content/themes/taian-bridge-rwd/global-market.css */
/* ═══ グローバル市況 (page-global-market.php) ═══ */
.page-global-market{position:relative;width:100%;background:#F8F9FB;color:#1A1A1A;overflow:hidden;--side-pad:clamp(16px, calc((100vw - 1100px) / 2), 410px)}
/* HERO 1920×400 */
.gm-hero{position:relative;width:100%;height:300px;overflow:hidden;margin-top:109px}
.gm-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a1230}
.gm-hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.20);backdrop-filter:blur(3.5px);-webkit-backdrop-filter:blur(3.5px)}
.gm-hero-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;padding:0 20px;z-index:2}
.gm-hero-title{margin:0;font-size:48px;font-weight:800;line-height:1.2;letter-spacing:1px;text-transform:uppercase;color:#FAFAFA}
.gm-hero-sub{margin:0;font-size:25px;font-weight:400;line-height:1.3;color:#FAFAFA}
/* 準備中カードセクション (legacy, 未使用 — バックアップ) */
.gm-soon-section{padding:80px var(--side-pad) 100px;display:flex;justify-content:center;background:#F8F9FB}
.gm-soon-card{position:relative;width:1000px;max-width:100%;height:436px;background:#FFFFFF;box-shadow:0 4px 30px rgba(0,0,0,.10);border-radius:40px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:50px 60px;box-sizing:border-box}
.gm-soon-icon{display:block;width:73px;height:110px;margin:0 auto 30px;object-fit:contain;transform:scaleX(-1)}
.gm-soon-title{margin:0 auto 16px;font-size:40px;font-weight:700;line-height:1.2;color:#1A1A1A;text-align:center;letter-spacing:-.5px}
.gm-soon-sub{margin:0 auto 38px;font-size:20px;font-weight:400;line-height:1.4;color:#1A1A1A;text-align:center}
.gm-soon-btn{display:inline-flex;align-items:center;justify-content:center;width:184px;height:41px;background:#C00000;border-radius:10px;color:#FFFFFF;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s;box-sizing:border-box}
.gm-soon-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(192,0,0,.25);color:#FFFFFF}
/* ═══ チャートセクション ═══ */
.gm-charts-section{padding:80px var(--side-pad) 100px;background:#F8F9FB url('/wp-content/themes/taian-bridge-rwd/assets/images/pages/gm-bg-waves.webp') center bottom / 100% auto no-repeat}
.gm-charts-card{max-width:1100px;margin:0 auto;background:#FFFFFF;box-shadow:0 4px 30px rgba(0,0,0,.10);border-radius:24px;padding:40px;box-sizing:border-box}
/* カテゴリータブ */
.gm-cat-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid #E5E7EB;margin-bottom:24px}
.gm-cat-tab{appearance:none;border:none;background:transparent;color:#6B7280;font-size:16px;font-weight:600;padding:12px 20px;cursor:pointer;border-bottom:3px solid transparent;transition:color .15s,border-color .15s;font-family:inherit;margin-bottom:-1px}
.gm-cat-tab:hover{color:#1A1A1A}
.gm-cat-tab.is-active{color:#0047AB;border-bottom-color:#0047AB}
/* 銘柄ピル */
.gm-sym-rows{margin-bottom:24px}
.gm-sym-row{display:flex;gap:8px;flex-wrap:wrap}
.gm-sym-row.is-hidden{display:none}
.gm-sym{appearance:none;border:1px solid #E5E7EB;background:#FFFFFF;color:#1A1A1A;font-size:14px;font-weight:600;padding:8px 16px;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s,color .15s;font-family:inherit;line-height:1.2}
.gm-sym:hover{border-color:#0047AB;color:#0047AB}
.gm-sym.is-active{background:#0047AB;border-color:#0047AB;color:#FFFFFF}
/* チャート */
.gm-chart-wrap{position:relative;width:100%;height:600px;border-radius:12px;overflow:hidden;background:#F8F9FB;border:1px solid #E5E7EB}
.gm-chart{position:absolute;inset:0}
.gm-chart iframe{width:100%!important;height:100%!important;border:0;display:block}
/* ディスクレイマー */
.gm-disclaimer{margin:20px 0 0;font-size:12px;line-height:1.6;color:#6B7280}
/* レスポンシブ */
@media (max-width: 1440px){
.page-global-market{--side-pad:80px}
}
@media (max-width: 1024px){
.page-global-market{--side-pad:32px}
.gm-charts-section{padding:48px var(--side-pad) 72px}
.gm-charts-card{padding:28px;border-radius:20px}
.gm-chart-wrap{height:520px}
}
@media (max-width:1023.98px){
.page-global-market{--side-pad:16px}
.gm-charts-section{padding:32px var(--side-pad) 60px}
.gm-hero{height:280px;margin-top:60px}
.gm-hero-title{font-size:32px;letter-spacing:.5px}
.gm-hero-sub{font-size:15px}
.gm-charts-card{padding:20px;border-radius:16px}
.gm-cat-tab{font-size:14px;padding:10px 14px}
.gm-sym{font-size:12px;padding:6px 12px}
.gm-chart-wrap{height:440px}
.gm-disclaimer{font-size:11px}
}
/* symbol dropdown (ドロップダウン選択) */
.gm-sym-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:#fff url('data:image/svg+xml;utf8,') no-repeat right 16px center;border:1px solid #E5E7EB;border-radius:10px;color:#1A1A1A;font-size:15px;font-weight:600;padding:13px 44px 13px 18px;min-width:280px;max-width:100%;cursor:pointer;font-family:inherit;line-height:1.2;transition:border-color .15s,box-shadow .15s}
.gm-sym-select.is-hidden{display:none}
.gm-sym-select:hover{border-color:#CBD5E1}
.gm-sym-select:focus{outline:none;border-color:#0047AB;box-shadow:0 0 0 3px rgba(0,71,171,.12)}
/* ── /global-market/ 本文 (2026-08-03) — ボックスは fxprod.css の .fxp-card を再利用 ── */
.gm-body{padding-top:0}
.gm-disclaimer p{margin:0 0 6px}
.gm-disclaimer p:last-child{margin-bottom:0}
.gmb-markets{margin-top:6px}
.gmb-market{padding:18px 0;border-bottom:1px solid #E8EBF2}
.gmb-market:last-child{border-bottom:0;padding-bottom:0}
.gmb-m-name{display:block;font-size:16px;font-weight:600;color:#00064B;margin-bottom:6px}
.gmb-market p{font-size:15px;line-height:1.75;color:#4A5060}
.gmb-spaced{margin-top:44px}
.gmb-lead{color:#4A5060}
.gmb-guides{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.gmb-guide{background:#F6F7FB;border-radius:12px;padding:20px 16px;text-align:center}
.gmb-guide span{display:block;font-size:15px;font-weight:600;color:#00064B;line-height:1.5}
.gmb-compare{margin-top:36px;padding-top:26px;border-top:1px solid #E8EBF2;text-align:center}
.gmb-compare p{font-size:15px;color:#4A5060;margin:0 0 14px}
.gmb-compare-links{display:flex;justify-content:center;gap:28px;flex-wrap:wrap}
.gmb-compare-links a{font-size:15px;color:#00064B;text-decoration:underline;text-underline-offset:3px}
.gmb-compare-links a:hover{opacity:.75}
@media (max-width:1023.98px){
.gm-body .fxp-card{padding:32px 22px;border-radius:20px;margin-bottom:24px}
.gm-body .fxp-chapter{font-size:21px;margin-bottom:20px}
.gm-body .gmb-spaced{margin-top:32px}
.gm-body .fxp-section{font-size:17px}
.gmb-guides{grid-template-columns:1fr;gap:10px}
.gmb-compare-links{gap:14px;flex-direction:column}
}
/* /wp-content/themes/taian-bridge-rwd/customer-service.css */
/* ═══ お客様センター (page-customer-service.php) ═══ */
.page-customer-service{position:relative;width:100%;background:#FAFAFA;color:#1A1A1A;overflow:hidden;--side-pad:clamp(16px, calc((100vw - 1100px) / 2), 410px)}
/* HERO 1920×400 */
.cs-hero{position:relative;width:100%;height:300px;overflow:hidden;margin-top:109px}
.cs-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a1230}
.cs-hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.20);backdrop-filter:blur(3.5px);-webkit-backdrop-filter:blur(3.5px)}
.cs-hero-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;padding:0 20px;z-index:2}
.cs-hero-title{margin:0;font-size:48px;font-weight:800;line-height:1.2;letter-spacing:1px;text-transform:uppercase;color:#FAFAFA}
.cs-hero-sub{margin:0;font-size:25px;font-weight:400;line-height:1.3;color:#FAFAFA}
/* INTRO BODY COPY */
.cs-intro{position:relative;width:100%;height:416px;padding:0 var(--side-pad);text-align:center;background:#FAFAFA url("/wp-content/themes/taian-bridge-rwd/assets/images/pages/cs-wave-bg.webp") center center / cover no-repeat;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.cs-intro-wrap{margin:0 auto;max-width:720px;text-align:center}
.cs-intro-title{margin:0 0 23px;font-size:30px;font-weight:700;line-height:33px;color:rgba(26,26,26,0.5);letter-spacing:-.3px}
.cs-intro-text{margin:0;max-width:720px;font-size:22px;font-weight:500;line-height:43px;color:rgba(26,26,26,0.5);letter-spacing:-.3px;text-align:center}
/* MAP */
.cs-map{padding:0 var(--side-pad) 60px;background:#FAFAFA}
.cs-map-frame{width:100%;max-width:1100px;height:400px;margin:0 auto;background:#D9D9D9;border-radius:12px;overflow:hidden;box-shadow:0 0 16px rgba(0,0,0,.06);position:relative;z-index:1}
.cs-map-frame iframe{width:100%;height:100%;border:0;display:block}
.cs-map-addr{margin:18px auto 0;max-width:1100px;text-align:center;font-size:16px;font-weight:500;color:#1A1A1A}
/* Custom Leaflet pin — Taian blue speech bubble with logo + label */
.cs-pin-icon{background:transparent !important;border:none !important}
.cs-pin{position:relative;width:240px;height:84px;filter:drop-shadow(0 6px 14px rgba(0,6,75,.35))}
.cs-pin-bubble{position:absolute;top:0;left:0;width:240px;height:64px;background:#00064B;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 22px;box-sizing:border-box}
.cs-pin-logo{width:44px;height:44px;object-fit:contain;filter:brightness(0) invert(1);opacity:.95;flex-shrink:0}
.cs-pin-label{font-family:'Pretendard JP',Pretendard,sans-serif;font-size:20px;font-weight:700;color:#FFFFFF;letter-spacing:-.3px;line-height:1;white-space:nowrap}
.cs-pin-tail{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:20px solid #00064B}
.leaflet-popup-content-wrapper{border-radius:8px}
.leaflet-popup-content{margin:10px 14px;font-size:13px;line-height:1.5}
.leaflet-control-attribution,.leaflet-attribution-flag{display:none !important}
/* LIST (Notices / FAQ) — Figma 256:1036 / 284:471 — flat layout */
.cs-list{padding:60px var(--side-pad) 90px;background:#F8F9FB}
.cs-list-inner{max-width:1100px;margin:0 auto;position:relative}
.cs-list-count{margin:0 0 24px;padding:0 27px;font-size:16px;font-weight:500;color:#000000;line-height:1}
.cs-list-rows{border-top:1px solid rgba(168,168,168,.4)}
.cs-row{display:grid;grid-template-columns:30px 1fr 104px 16px;column-gap:48px;align-items:center;height:78px;padding:0 27px;text-decoration:none;color:inherit;cursor:pointer;transition:background .15s}
.cs-row:hover{background:rgba(0,11,131,.02)}
.cs-row:hover .cs-row-title{color:#0047AB}
.cs-row-no{font-size:15px;font-weight:400;color:#1A1A1A;text-align:center;line-height:20px}
.cs-row-title{font-size:20px;font-weight:600;color:#1A1A1A;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-row-date{font-size:15px;font-weight:400;color:#A8A8A8;text-align:center;line-height:22px}
.cs-row-arrow{display:inline-flex;align-items:center;justify-content:center;width:16px;height:8px;transition:transform .25s ease}
.cs-row-arrow svg{display:block}
.cs-row:hover .cs-row-arrow{transform:translateY(2px)}
.cs-row-wrap.is-open .cs-row-arrow{transform:rotate(180deg)}
/* Accordion drop panel */
.cs-row-wrap{position:relative;border-bottom:1px solid rgba(168,168,168,.4)}
.cs-row-detail{max-height:0;overflow:hidden;transition:max-height .35s ease;background:#FAFBFD}
.cs-row-wrap.is-open .cs-row-detail{max-height:1800px}
.cs-row-detail-inner{padding:24px 27px 28px;font-size:15px;line-height:25px;color:rgba(26,26,26,.78);letter-spacing:-.2px;white-space:pre-line}
/* FAQ — categories row (Figma top:558) */
.cs-faq-cats-section{padding:60px var(--side-pad) 0;background:#F8F9FB}
.cs-faq-cats{max-width:520px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
.cs-faq-cat{background:transparent;border:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;color:#A8A8A8;padding:4px 0;transition:color .15s}
.cs-faq-cat:hover{color:#0047AB}
.cs-faq-cat-active{color:#1A1A1A;font-weight:700}
/* FAQ — search bar (Figma 614, 454×55) */
.cs-faq-search-section{padding:42px var(--side-pad) 0;background:#F8F9FB;display:flex;justify-content:center}
.cs-faq-search{position:relative;width:454.35px;max-width:100%;height:55px;background:#F2F2F2;border-radius:9.56522px;display:flex;align-items:center;padding:0 24px}
.cs-faq-search-input{flex:1;border:none;outline:none;background:transparent;font-size:15px;font-family:inherit;color:#1A1A1A}
.cs-faq-search-input::placeholder{color:#A8A8A8}
.cs-faq-search-btn{background:transparent;border:none;cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center}
/* FAQ — list rows (Figma 284:471, 79px row, cat 446 / question 574 / arrow 1450) */
.cs-list-faq{padding-top:50px}
.cs-list-faq .cs-list-rows{border-top:none}
.cs-list-faq .cs-row-faq{grid-template-columns:150px 1fr 17px;column-gap:30px;height:79px;padding:0 36px}
.cs-row-cat{font-size:18px;font-weight:400;color:#000B83;line-height:25px;text-align:left}
.cs-list-faq .cs-row-cat{font-size:12px;white-space:nowrap;letter-spacing:-.3px}
.cs-list-faq .cs-row-title{font-size:20px;font-weight:600;color:#1A1A1A;line-height:25px}
/* PAGINATION */
.cs-pagination{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:60px}
.cs-pg-btn,.cs-pg-num{background:transparent;border:none;cursor:pointer;font-size:16px;color:#1A1A1A;padding:6px 10px;font-family:inherit;line-height:1}
.cs-pg-num{min-width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.cs-pg-num.cs-pg-active{background:#00064B;color:#FFFFFF}
.cs-pg-dots{font-size:16px;color:#1A1A1A;padding:0 4px;line-height:32px}
/* CONTACT CARDS */
.cs-cards{padding:30px var(--side-pad) 100px;background:#FAFAFA}
.cs-cards-inner{display:grid;grid-template-columns:repeat(2,1fr);gap:31px;max-width:830px;margin:0 auto}
.cs-card{position:relative;background:#FFFFFF;box-shadow:0 0 16.7544px rgba(0,0,0,.07);border-radius:16.7544px;padding:36px 33px 30px;height:191px;box-sizing:border-box}
.cs-card img{display:block;width:100%;height:100%;object-fit:contain}
.cs-card-icon{position:absolute;top:36px;left:33px;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}
.cs-card-icon{position:absolute;top:36px;left:33px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:#438CAF}
.cs-card-icon svg{display:block}
.cs-card-cat{margin:0 0 14px 33px;font-size:21px;font-weight:500;color:#1A1A1A;line-height:1}
.cs-card-title{margin:0 0 14px;font-size:28px;font-weight:600;color:#1A1A1A;line-height:1.1;letter-spacing:-.5px}
.cs-card-hours{margin:0;font-size:14px;font-weight:400;color:#1A1A1A;line-height:21px}
/* ===== Detail page (FAQ / Notices 項目詳細) ===== */
.cs-detail{padding:64px 0 96px;background:#FAFAFA}
.cs-detail-inner{max-width:1080px;margin:0 auto;padding:0 32px}
.cs-breadcrumb{font-size:14px;color:#7D7D7D;margin-bottom:24px;display:flex;align-items:center;gap:8px}
.cs-breadcrumb a{color:#7D7D7D;text-decoration:none}
.cs-breadcrumb a:hover{color:#1A1A1A;text-decoration:underline}
.cs-bc-sep{color:#C8C8C8}
.cs-detail-article{background:#FFF;border-radius:8px;padding:48px 56px;box-shadow:0 2px 12px rgba(0,0,0,.04)}
.cs-detail-cat{display:inline-block;font-size:13px;font-weight:500;color:#000B83;background:#EEF1FF;padding:5px 14px;border-radius:99px;margin-bottom:18px}
.cs-detail-title{font-size:26px;font-weight:600;color:#1A1A1A;line-height:1.45;margin:0 0 28px;padding-bottom:24px;border-bottom:1px solid #ECECEC;letter-spacing:-.3px}
.cs-detail-date{font-size:14px;color:#7D7D7D;margin-bottom:16px}
.cs-detail-body{font-size:16px;line-height:1.95;color:#333;white-space:pre-line;word-break:break-word}
.cs-detail-back{margin-top:36px;text-align:center}
.cs-detail-back-btn{display:inline-block;padding:13px 32px;border:1px solid #C8C8C8;border-radius:99px;font-size:14px;color:#1A1A1A;text-decoration:none;transition:all .15s ease}
.cs-detail-back-btn:hover{background:#1A1A1A;color:#FFF;border-color:#1A1A1A}
@media (max-width:1023.98px){
.cs-detail{padding:24px 16px 60px}
.cs-detail-inner{padding:0}
.cs-detail-article{padding:28px 20px;border-radius:6px}
.cs-detail-title{font-size:20px;margin-bottom:20px;padding-bottom:18px}
.cs-detail-body{font-size:14px;line-height:1.85}
}
/* row-wrap が に変更 — リンクのスタイルをリセット */
a.cs-row-wrap{text-decoration:none;color:inherit;display:block}
a.cs-row-wrap:hover .cs-row-title{color:#000B83}
/* row-wrap がリンクになったため、矢印を右向き(>)で表示 */
.cs-row-arrow{display:inline-flex;align-items:center;justify-content:center}
.cs-row-arrow svg{transform:rotate(-90deg)}
.cs-card-flag{display:inline-block;margin-left:6px;padding:2px 8px;background:#FEF3C7;color:#B45309;font-size:12px;font-weight:500;border-radius:999px;letter-spacing:0;vertical-align:middle}
/* /wp-content/themes/taian-bridge-rwd/fxcfd-apply.css */
/* ═══ FX・CFD 比較申込 ─ Figma 1Zd6qSv9DebJX4pq8troe8 ═══ */
/* 申込フォーム → page-fx-cfd-form.php ( .page-fxcfd-apply / .fx-* ) Figma 172:73 */
/* 一覧 → page-fx-cfd-apply.php ( .page-fxcfd / .fxl-* ) Figma 418:1402 */
/* ───────── 共通 HERO (h=800) ───────── */
.page-fxcfd-apply,.page-fxcfd{position:relative;width:100%;background:#F8F9FB;color:#1A1A1A;overflow:hidden}
.page-fxcfd{--side-pad:clamp(16px, calc((100vw - 1040px) / 2), 440px)}
.fx-hero{position:relative;height:300px;overflow:hidden;margin-top:109px}
.fx-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.fx-hero-overlay{position:absolute;inset:0;background:rgba(255,255,255,.03);backdrop-filter:blur(3.5px);-webkit-backdrop-filter:blur(3.5px)}
.fx-hero-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:0 20px;z-index:2}
.fx-hero-title{font-size:44px;font-weight:800;line-height:54px;letter-spacing:1px;text-transform:uppercase;color:#FAFAFA;margin:0}
.fx-hero-sub{font-size:22px;font-weight:400;line-height:1.3;color:#FAFAFA;margin:0}
/* ═══════════════════════════════════════════ */
/* 申込フォームページ (page-fx-cfd-form.php) */
/* ═══════════════════════════════════════════ */
.fx-form-section{position:relative;min-height:1280px;padding:120px 0 80px}
.fx-form-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.08}
.fx-form-card{position:relative;width:850px;height:1130px;margin:0 auto;background:#fff;box-shadow:0 4px 30px rgba(0,0,0,.1);border-radius:32px;z-index:2}
.fx-field{position:absolute;left:83px;width:684px}
.fx-field label{font-size:18px;font-weight:500;color:#1A1A1A;line-height:1.3;display:block;margin-bottom:18px}
.fx-req{color:#C00000}
.fx-field input,.fx-field select{width:100%;height:48px;border:0.93px solid rgba(26,26,26,.4);border-radius:8px;padding:0 19px;font-size:17px;font-family:'Pretendard JP',sans-serif;background:transparent;color:#1A1A1A;outline:none}
.fx-field textarea{width:100%;height:114px;border:0.93px solid rgba(26,26,26,.4);border-radius:8px;padding:13px 19px;font-size:17px;font-family:'Pretendard JP',sans-serif;background:transparent;color:#1A1A1A;outline:none;resize:none}
.fx-field textarea::placeholder,.fx-field input::placeholder{color:#B2B2B2;font-weight:500}
.fx-select-wrap{position:relative}
.fx-select-wrap select{appearance:none;-webkit-appearance:none;cursor:pointer;color:#1A1A1A;font-weight:500}
.fx-select-wrap select:invalid{color:#B2B2B2}
.fx-select-arrow{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:#A6A6A6;font-size:11px;pointer-events:none}
.fx-field-row{position:absolute;left:83px;display:flex;gap:22px}
.fx-field-half{width:331px}
.fx-field-half label{font-size:18px;font-weight:500;color:#1A1A1A;line-height:1.3;display:block;margin-bottom:18px}
.fx-field-half input{width:100%;height:48px;border:0.93px solid rgba(26,26,26,.4);border-radius:8px;padding:0 19px;font-size:17px;font-family:'Pretendard JP',sans-serif;background:transparent;outline:none}
.fx-submit-btn{position:absolute;left:315px;width:220px;height:64px;background:#C00000;border:none;border-radius:13px;cursor:pointer;font-size:21px;font-weight:700;color:#fff;font-family:'Pretendard JP',sans-serif;transition:transform .15s, box-shadow .15s}
.fx-submit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(192,0,0,.3)}
/* ═══════════════════════════════════════════ */
/* 一覧ページ (page-fx-cfd-apply.php) */
/* ═══════════════════════════════════════════ */
/* PROCESS — 5 circles */
.fxl-process{position:relative;padding:200px 0 84px;background:#F8F9FB}
.fxl-process::before{content:"";position:absolute;left:0;right:0;top:200px;height:84px;background-image:url('/wp-content/themes/taian-bridge-rwd/assets/images/pages/fxstep-line.webp');background-position:center;background-repeat:no-repeat;background-size:1360px 3px;pointer-events:none;z-index:0}
.fxl-process-inner{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-start;gap:110px;max-width:1920px;margin:0 auto;padding:0 var(--side-pad)}
.fxl-step{display:flex;flex-direction:column;align-items:center;width:160px;text-align:center}
.fxl-circle{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;z-index:1}
.fxl-circle img{display:block;width:40px;height:40px;object-fit:contain;margin:0}
.fxl-process-inner > .fxl-step:nth-child(1) .fxl-circle img,
.fxl-process-inner > .fxl-step:nth-child(2) .fxl-circle img{transform:translateX(3px)}
.fxl-process-inner > .fxl-step:nth-child(5) .fxl-circle img{width:46px;height:46px}
.fxl-step-no{margin-top:24px;font-size:14px;font-weight:400;line-height:18px;color:rgba(26,26,26,.4)}
.fxl-step-title{margin-top:6px;font-size:20px;font-weight:700;line-height:26px;color:#438CAF}
.fxl-step-desc{margin-top:14px;font-size:13.5px;font-weight:400;line-height:20px;color:#1A1A1A;letter-spacing:-.3px;word-break:keep-all;line-break:strict}
/* 4 STAT CARDS */
.fxl-stats{padding:40px 0 70px;background:#F8F9FB}
.fxl-stats-inner{display:flex;justify-content:center;gap:36px;max-width:1920px;margin:0 auto;padding:0 var(--side-pad)}
.fxl-stat-card{position:relative;width:218px;height:180px;background:#FFFFFF;box-shadow:0 0 16px rgba(0,0,0,.10);border-radius:18px}
.fxl-stat-label{position:absolute;left:32px;top:36px;margin:0;line-height:1;white-space:nowrap}
.fxl-stat-label span{display:inline-block;font-size:17px;font-weight:500;line-height:1;color:#1A1A1A;padding-bottom:9px;border-bottom:2px solid #1A1A1A}
.fxl-stat-num{position:absolute;left:32px;top:92px;margin:0;font-size:64px;font-weight:700;line-height:1;color:#0047AB;white-space:nowrap;display:flex;align-items:baseline;gap:5px}
.fxl-stat-num span{font-size:24px;font-weight:500;color:#0047AB}
/* SUB TEXT */
.fxl-subtext{padding:0 var(--side-pad) 56px;text-align:center;background:#F8F9FB}
.fxl-subtext p{max-width:760px;margin:0 auto;font-size:20px;font-weight:600;line-height:30px;color:#1A1A1A}
/* CTA BANNER */
.fxl-cta{padding:0 var(--side-pad) 64px;background:transparent}
.fxl-cta-card{position:relative;width:100%;max-width:1040px;height:190px;margin:0 auto;background-color:#00064B;background-image:url('/wp-content/themes/taian-bridge-rwd/assets/images/pages/fxcta-bg.webp');background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:18px;display:flex;align-items:center;justify-content:space-between;padding:0 56px 0 60px;overflow:hidden}
.fxl-cta-text h3{margin:0;font-size:24px;font-weight:700;line-height:30px;color:#FFFFFF}
.fxl-cta-text p{margin:10px 0 0;font-size:16px;font-weight:400;line-height:26px;color:#FFFFFF}
.fxl-cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:218px;height:64px;background:#FAFAFA;border-radius:9px;color:#00064B;font-size:22px;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .15s, box-shadow .15s;flex-shrink:0}
.fxl-cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.fxl-cta-arrow{display:inline-block;width:11px;height:11px;border-right:2.5px solid #00064B;border-bottom:2.5px solid #00064B;transform:rotate(-45deg);margin-left:3px}
/* APPLICATION LIST */
.fxl-list{padding:0 var(--side-pad);background:#F8F9FB;height:600px;box-sizing:border-box}
.fxl-list-inner{position:relative;width:100%;max-width:1040px;margin:0 auto}
.fxl-list-top{height:2px;background:#000B83}
.fxl-list-bottom{height:3px;background:#000B83}
.fxl-row{display:grid;grid-template-columns:90px 1fr 70px 90px;align-items:center;column-gap:36px;height:48px;border-bottom:0.5px solid rgba(26,26,26,.7)}
.fxl-row:last-of-type{border-bottom:none}
.fxl-row-no{display:none}
.fxl-row-cat{font-size:12px;font-weight:600;color:#0047AB;text-align:center;white-space:nowrap;letter-spacing:-.3px}
.fxl-row-title{font-size:17px;font-weight:600;color:#1A1A1A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxl-row-author{font-size:15px;font-weight:600;color:rgba(26,26,26,.5);text-align:center}
.fxl-row-date{font-size:14px;font-weight:400;color:rgba(26,26,26,.7);text-align:center}
.fxl-row-badge{justify-self:center;display:inline-flex;align-items:center;justify-content:center;width:72px;height:28px;border-radius:4.5px;font-size:14px;font-weight:700;line-height:1}
/* PAGINATION */
.fxl-pagination{display:flex;justify-content:center;align-items:center;gap:11px;margin-top:24px;padding-bottom:0}
.fxl-pg-btn,.fxl-pg-num{background:transparent;border:none;cursor:pointer;font-size:15px;color:#1A1A1A;padding:6px 10px;font-family:inherit;line-height:1}
.fxl-pg-num{min-width:28px;height:28px;border-radius:50%}
.fxl-pg-num.fxl-pg-active{background:#00064B;color:#FFFFFF}
.fxl-pg-dots{font-size:15px;color:#1A1A1A;padding:0 3px;line-height:28px}
/* NOTICE */
.fxl-notice{padding:0 0 80px;background:#F8F9FB}
.fxl-notice-inner{width:100%;max-width:1040px;margin:0 auto;padding:0 var(--side-pad);box-sizing:content-box}
.fxl-notice-title{margin:0;font-size:20px;font-weight:600;line-height:1;color:#1A1A1A}
.fxl-notice-list{margin:20px 0 0;padding-left:20px;list-style:disc;color:#1A1A1A;max-width:760px}
.fxl-notice-list li{font-size:16px;font-weight:400;line-height:32px;color:#1A1A1A;padding-left:4px}
.fxl-notice-list li::marker{color:#1A1A1A;font-size:14px}
.fxl-notice-body{margin:20px 0 0;max-width:580px;font-size:16px;font-weight:400;line-height:32px;color:#1A1A1A}
/* RESPONSIVE — 一覧ページ */
/* 申込受付の完了バナー */
.fx-success-banner{background:#E7FAEF;color:#027A48;border:1px solid #A6E5BD;border-radius:10px;padding:18px 24px;margin:30px var(--side-pad,440px);text-align:center;font-size:16px;line-height:1.5}
.fx-success-banner p{margin:0}
.fx-success-banner strong{color:#016B3A;margin-right:6px}
/* row as anchor */
a.fxl-row{text-decoration:none;color:inherit;cursor:pointer}
a.fxl-row:hover{background:rgba(0,11,131,.025)}
/* pagination as anchors — identical look to original buttons */
a.fxl-pg-btn,a.fxl-pg-num{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#1A1A1A}
a.fxl-pg-num.fxl-pg-active{background:#00064B;color:#FFFFFF}
a.fxl-pg-btn:hover,a.fxl-pg-num:hover{color:#000B83}
/* Step 3 icon center correction */
.fxl-process-inner > .fxl-step:nth-child(3) .fxl-circle img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) !important;width:40px;height:40px}
/* ─── パスワード保護詳細モーダル ─── */
.fxl-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}
.fxl-modal[hidden]{display:none}
.fxl-modal-overlay{position:absolute;inset:0;background:rgba(0,6,75,.55);backdrop-filter:blur(4px)}
.fxl-modal-card{position:relative;width:92%;max-width:560px;max-height:80vh;overflow:auto;background:#fff;border-radius:18px;padding:38px 42px 36px;box-shadow:0 24px 64px rgba(0,0,0,.3);z-index:1}
.fxl-modal-close{position:absolute;top:14px;right:18px;background:none;border:0;font-size:28px;color:#7d7d7d;cursor:pointer;line-height:1;padding:4px 10px}
.fxl-modal-close:hover{color:#1a1a1a}
.fxl-modal-title{margin:0 0 22px;font-size:22px;font-weight:700;color:#1a1a1a;letter-spacing:-.3px;line-height:1.4;padding-right:32px}
.fxl-detail{display:grid;grid-template-columns:120px 1fr;gap:14px 20px;margin:0;font-size:15px;color:#1a1a1a;line-height:1.6}
.fxl-detail dt{font-weight:600;color:#0047AB;margin:0}
.fxl-detail dd{margin:0;color:#1a1a1a;word-break:break-all}
.fxl-detail-content{white-space:pre-wrap;padding:12px 14px;background:#f6f7fb;border-radius:6px;font-size:14px;line-height:1.7;grid-column:1/-1}
/* anchor focus(比較状況クリック時) - visual cue */
#fxl-list:target{scroll-margin-top:132px}
#fxl-list:target .fxl-list-top,#fxl-list:target .fxl-list-bottom{background:#0047AB;animation:fxlPulse 1.2s ease-out 2}
@keyframes fxlPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,71,171,0)}50%{box-shadow:0 0 12px 4px rgba(0,71,171,.35)}}
.fx-form-notice{position:absolute;left:83px;width:684px;margin:0;padding:0;list-style:none;font-size:12px;line-height:1.65;color:rgba(26,26,26,.42)}
.fx-form-notice li{position:relative;padding-left:14px;margin:0}
.fx-form-notice li+li{margin-top:6px}
.fx-form-notice li::before{content:"•";position:absolute;left:2px;top:0;color:rgba(26,26,26,.5)}
/* /wp-content/themes/taian-bridge-rwd/reviews.css */
/* ═══ 利用者の声 (page-reviews.php) ─ Figma 206:775 ═══ */
.page-reviews{position:relative;width:100%;background:#FFFFFF;color:#1A1A1A;overflow:hidden;--side-pad:clamp(16px, calc((100vw - 1100px) / 2), 410px)}
/* HERO 1920×400 */
.rv-hero{position:relative;width:100%;height:300px;overflow:hidden;margin-top:109px}
.rv-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0a1230}
.rv-hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.30)}
.rv-hero-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:0 20px;z-index:2}
.rv-hero-title{margin:0;font-size:48px;font-weight:800;line-height:56px;letter-spacing:1px;text-transform:uppercase;color:#FAFAFA}
.rv-hero-sub{margin:0;font-size:25px;font-weight:400;line-height:1.3;color:#FAFAFA}
/* COUPON SECTION — 画像の合成 */
.rv-coupon{position:relative;padding:90px var(--side-pad) 80px;display:flex;flex-direction:column;align-items:center;text-align:center;background:#FFFFFF;overflow:hidden}
.rv-coupon-wave-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;user-select:none}
.rv-coupon > *:not(.rv-coupon-wave-img){position:relative;z-index:1}
.rv-coupon-card-img{display:block;width:580px;max-width:90%;height:auto;margin:0 auto 50px;filter:drop-shadow(0 6px 20px rgba(0,11,131,.06))}
.rv-coupon-help-img{display:block;width:auto;max-width:90%;height:auto;margin:0 auto 28px}
.rv-coupon-btn-img{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0;cursor:pointer;transition:transform .15s, filter .15s}
.rv-coupon-btn-img img{display:block;width:auto;max-width:100%;height:auto}
.rv-coupon-btn-img:hover{transform:translateY(-2px);filter:drop-shadow(0 6px 12px rgba(192,0,0,.18))}
/* WRITE INTRO */
.rv-write{padding:60px var(--side-pad) 24px;text-align:center;background:#FFFFFF}
.rv-write-title{margin:0 0 24px;font-size:30px;font-weight:700;color:#1A1A1A;line-height:1.4}
.rv-write-sub{margin:0 0 28px;font-size:20px;font-weight:400;color:#7D7D7D;line-height:1.4}
.rv-write-hl{color:#0047AB;font-weight:600}
.rv-write-btn{display:inline-flex;align-items:center;justify-content:center;width:93px;height:35px;padding:0;gap:8px;background:#C00000;border-radius:7px;color:#FFFFFF;font-family:'Pretendard JP',Pretendard,sans-serif;font-weight:700;font-size:15px;line-height:16px;text-decoration:none;cursor:pointer;border:none;box-sizing:border-box;margin:0 auto 60px;transition:transform .15s,box-shadow .15s}
.rv-write-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(192,0,0,.20);color:#FFFFFF}
/* FEATURED 2-up — 新デザイン: 右下に大きな引用符 */
.rv-featured{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1100px;margin:0 auto}
.rv-featured-card{position:relative;background:#FFFFFF;box-shadow:0 4px 24px rgba(0,11,131,.08);border-radius:18px;padding:30px 36px 28px;text-align:left;overflow:hidden}
.rv-featured-card .rv-tag{margin-bottom:18px;width:auto;padding:0 16px}
.rv-featured-recent{display:block;text-align:center;margin:0 auto 24px;max-width:1100px;font-family:'Pretendard JP',Pretendard,sans-serif;font-size:18px;font-weight:400;line-height:1.5;color:#9b9b9b}
.page-reviews .fxl-cta-card{max-width:1100px}
.rv-featured-title{margin:0 0 14px;font-size:19px;font-weight:700;color:#1A1A1A;line-height:1.45}
.rv-featured-body{margin:0 0 60px;font-size:14px;font-weight:400;color:rgba(26,26,26,.6);line-height:23px;letter-spacing:-.3px}
.rv-featured-meta{margin:0;font-size:13px;font-weight:400;color:#A8A8A8;line-height:1.4}
.rv-featured-quote{position:absolute;right:30px;bottom:24px;width:54px;height:auto;pointer-events:none;user-select:none}
/* CATEGORY TAGS */
.rv-tag{display:inline-flex;align-items:center;justify-content:center;width:71px;height:23px;padding:0;border-radius:30px;font-size:13px;font-weight:600;color:#FAFAFA;line-height:1}
.rv-tag-fx{background:#0047AB}
.rv-tag-binary{background:#438CAF}
/* LIST */
.rv-list{padding:24px var(--side-pad) 100px;background:#FFFFFF}
.rv-list-inner{position:relative;width:100%;max-width:1100px;margin:0 auto}
.rv-row-empty{padding:80px 0;text-align:center;color:#7D7D7D;font-size:16px;border-top:1px solid #A8A8A8;border-bottom:1px solid #A8A8A8}
.rv-row-wrap{border-bottom:1px solid #A8A8A8}
.rv-row-wrap:first-of-type{border-top:1px solid #A8A8A8}
.rv-row{display:grid;grid-template-columns:60px minmax(0,1fr) 175px 30px;align-items:center;gap:36px;padding:30px 0;cursor:pointer;transition:background .15s;color:inherit;text-decoration:none;outline:none}
.rv-row:hover{background:transparent}
.rv-row:focus-visible{background:rgba(0,11,131,.04)}
.rv-no{font-size:15px;font-weight:400;color:#1A1A1A;text-align:center}
.rv-content{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.rv-row-title{margin:6px 0 0;font-size:22px;font-weight:600;color:#1A1A1A;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.rv-row-body{margin:0;font-size:16px;font-weight:400;color:rgba(26,26,26,.6);line-height:1.6;letter-spacing:-1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;max-width:578px}
.rv-hashtags{display:flex;gap:14px;margin-top:4px}
.rv-hashtags span{font-size:16px;font-weight:400;color:#0047AB;letter-spacing:-1px;line-height:1.4}
.rv-name{width:64px;text-align:center;display:inline-block}
.rv-date{width:104px;text-align:center;display:inline-block}
.rv-meta{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:7px;color:#A8A8A8;font-size:15px;line-height:1.47}
.rv-arrow{display:inline-block;width:10px;height:10px;border-right:2.5px solid rgba(168,168,168,.7);border-bottom:2.5px solid rgba(168,168,168,.7);transform:rotate(-45deg);transition:transform .25s ease}
.rv-row-wrap.is-open .rv-arrow{transform:rotate(225deg)}
/* DROPDOWN */
.rv-row-detail{max-height:0;overflow:hidden;transition:max-height .35s ease;background:#F8FAFD}
.rv-row-wrap.is-open .rv-row-detail{max-height:800px}
.rv-row-detail-inner{padding:26px 80px 32px;color:rgba(26,26,26,.78);font-size:15px;line-height:1.85;letter-spacing:-.3px}
.rv-row-detail-body{margin:0 0 18px;font-size:15px;line-height:1.85;color:rgba(26,26,26,.78);white-space:pre-line}
.rv-row-detail-tags{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px}
.rv-row-detail-tags span{font-size:14px;color:#0047AB;letter-spacing:-.5px}
.rv-row-detail-meta{margin:0;font-size:13px;color:#A8A8A8}
/* PAGINATION */
.rv-pagination{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin-top:60px}
.rv-pg-btn,.rv-pg-num{background:transparent;border:none;cursor:pointer;font-size:18px;color:#1A1A1A;padding:8px 12px;font-family:inherit;line-height:1}
.rv-pg-num{min-width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.rv-pg-num.rv-pg-active{background:#00064B;color:#FFFFFF}
.rv-pg-dots{font-size:18px;color:#1A1A1A;padding:0 4px;line-height:34px}
/* SINGLE REVIEW PAGE */
.page-reviews-single{position:relative;width:100%;background:#FFFFFF;color:#1A1A1A;overflow:hidden;--side-pad:clamp(16px, calc((100vw - 1100px) / 2), 410px)}
.rv-hero-mini{height:280px}
.rv-hero-mini .rv-hero-title{font-size:42px}
.rv-single{padding:80px var(--side-pad) 100px;background:#F8F9FB}
.rv-single-inner{max-width:900px;margin:0 auto;background:#FFFFFF;border-radius:14px;box-shadow:0 0 24px rgba(0,11,131,.06);padding:60px 70px}
.rv-single-head{padding-bottom:30px;border-bottom:1px solid rgba(168,168,168,.4);margin-bottom:36px}
.rv-single-head .rv-tag{margin-bottom:18px;width:auto;padding:0 16px}
.rv-single-title{margin:0 0 18px;font-size:26px;font-weight:700;color:#1A1A1A;line-height:1.4}
.rv-single-meta{display:flex;align-items:center;gap:8px;font-size:14px;color:#A8A8A8}
.rv-meta-sep{color:#D6D6D6}
.rv-single-body{font-size:16px;line-height:1.85;color:#1A1A1A;letter-spacing:-.2px;min-height:160px}
.rv-single-body p{margin:0 0 18px}
.rv-single-tags{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;padding-top:24px;border-top:1px solid rgba(168,168,168,.3)}
.rv-single-tags span{font-size:14px;color:#0047AB;letter-spacing:-.5px}
.rv-single-footer{display:flex;justify-content:center;margin-top:50px}
.rv-back-btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 38px;background:#FFFFFF;border:1px solid #1A1A1A;border-radius:6px;color:#1A1A1A;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.rv-back-btn:hover{background:#1A1A1A;color:#FFFFFF}
/* Coupon ticket (HTML) — re-introduced for JP text */
.rv-coupon-card{position:relative;width:560px;max-width:90%;padding:64px 72px 56px;margin:0 auto 50px;text-align:center}
.rv-coupon-badge{position:absolute;top:24px;right:30px;width:54px;height:54px;background:#000B83;color:#FFFFFF;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;letter-spacing:-.4px;z-index:2}
.rv-coupon-label{margin:0;font-size:18px;font-weight:400;color:#1A1A1A;line-height:1.5}
.rv-coupon-amount{margin:22px 0 0;font-size:64px;font-weight:800;color:#000B83;line-height:1;letter-spacing:-1.5px}
.rv-coupon-amount span{font-size:30px;font-weight:600;margin-left:8px;color:#000B83}
.rv-coupon-help{margin:0 0 28px;font-size:16px;font-weight:500;color:#1A1A1A;letter-spacing:-.5px;text-align:center}
.rv-coupon-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:200px;height:54px;background:#FFFFFF;border:1px solid #C00000;border-radius:6px;color:#C00000;font-size:17px;font-weight:500;cursor:pointer;font-family:inherit;transition:transform .15s, box-shadow .15s;box-shadow:0 2px 6px rgba(192,0,0,.08)}
.rv-coupon-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(192,0,0,.15)}
.rv-coupon-btn svg{flex-shrink:0;color:#C00000}
@media (max-width:1023.98px){
.page-reviews{--side-pad:16px}
.page-reviews-single{--side-pad:14px}
.rv-hero-mini{height:160px;margin-top:60px}
.rv-hero-mini .rv-hero-title{font-size:22px}
.rv-single{padding:24px var(--side-pad) 50px}
.rv-single-inner{padding:24px 18px;border-radius:12px;box-shadow:0 2px 12px rgba(0,11,131,.05)}
.rv-single-head{padding-bottom:18px;margin-bottom:22px}
.rv-single-head .rv-tag{margin-bottom:12px;padding:0 12px;font-size:12px;height:24px;line-height:24px;display:inline-flex;align-items:center}
.rv-single-title{margin:0 0 12px;font-size:17px;line-height:1.5}
.rv-single-meta{font-size:12px;gap:6px}
.rv-single-body{font-size:14.5px;line-height:1.8;min-height:auto;letter-spacing:0}
.rv-single-body p{margin:0 0 12px}
.rv-single-tags{gap:8px;margin-top:18px;padding-top:14px}
.rv-single-tags span{font-size:12px}
.rv-single-footer{margin-top:28px}
.rv-back-btn{padding:9px 24px;font-size:13px;border-radius:6px}
}
/* admin (運営者) reply under a review */
.rv-admin-reply{margin:24px 0 4px;padding:18px 20px;background:#f4f7fb;border-left:3px solid #0047AB;border-radius:6px}
.rv-admin-reply-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rv-admin-reply-badge{font-size:12px;font-weight:700;color:#fff;background:#0047AB;padding:3px 11px;border-radius:999px;white-space:nowrap}
.rv-admin-reply-date{font-size:12px;color:#8a93a0}
.rv-admin-reply-body{font-size:14px;line-height:1.85;color:#333}
@media (max-width:1023.98px){.rv-admin-reply{margin:16px 0;padding:14px 16px}.rv-admin-reply-body{font-size:13px}.rv-admin-reply-badge{font-size:11px}}
/* admin reply — letterhead style (brand / hr / body / hr / contact) */
.rv-admin-reply-head{justify-content:space-between;align-items:flex-start;margin-bottom:0}
.rv-admin-reply-brand{display:flex;flex-direction:column;gap:3px}
.rv-reply-name{font-size:14px;font-weight:800;letter-spacing:1.5px;color:#0047AB}
.rv-reply-tag{font-size:12px;color:#8a93a0}
.rv-reply-hr{border:0;border-top:1px solid #d7deea;margin:13px 0}
.rv-admin-reply-foot{font-size:12.5px;line-height:1.75;color:#5a6470}
.rv-admin-reply-foot .rv-reply-name{font-size:13px}
@media (max-width:1023.98px){.rv-reply-name{font-size:13px}.rv-reply-tag{font-size:11px}.rv-admin-reply-foot{font-size:12px}}
/* ══════════════════════════════════════════════════════════
レビュー投稿の案内バナー — タイアンらしさを強化
ネイビー(#000B83)を基調 + レッド(#C00000)をポイントに、カードサーフェス
══════════════════════════════════════════════════════════ */
.page-reviews .rv-coupon-card{
width:680px;max-width:92%;padding:0 20px 8px;margin:0 auto 42px;
background:transparent;border:0;border-radius:0;box-shadow:none;
}
.page-reviews .rv-coupon-card::before{content:none}
.page-reviews .rv-coupon-label{
margin:0;font-size:28px;font-weight:700;color:#000B83;line-height:1.45;letter-spacing:-.6px;
}
.page-reviews .rv-coupon-amount{
margin:24px 0 0;font-size:78px;font-weight:800;color:#C00000;line-height:1;letter-spacing:-2px;
}
.page-reviews .rv-coupon-amount span{
font-size:32px;font-weight:700;color:#000B83;margin-left:10px;letter-spacing:-.5px;
}
.page-reviews .rv-coupon-help{
margin:0 0 26px;font-size:19px;font-weight:600;color:#1A1A1A;line-height:1.7;letter-spacing:-.4px;
}
.page-reviews .rv-coupon-note{
display:block;margin-top:16px;font-size:13.5px;font-weight:400;
color:#6E7687;line-height:1.9;letter-spacing:-.2px;
}
/* CTAバナー(ネイビー)内の注釈 */
.page-reviews .fxl-cta-note{
margin:10px 0 0;font-size:13px;font-weight:400;line-height:1.85;
color:rgba(255,255,255,.82);letter-spacing:-.2px;
}
@media (max-width:1023.98px){
.page-reviews .rv-coupon-card{padding:0 16px 6px}
.page-reviews .rv-coupon-label{font-size:21px}
.page-reviews .rv-coupon-amount{font-size:54px}
.page-reviews .rv-coupon-amount span{font-size:24px}
.page-reviews .rv-coupon-help{font-size:16px}
.page-reviews .rv-coupon-note{font-size:12px;line-height:1.8}
.page-reviews .fxl-cta-note{font-size:11px}
}
/* ── 「最新の投稿」カード → 口コミ詳細へ遷移 (2026-08-07) ──
でカード全体を包まず、透明レイヤーを重ねる方式。
アンカー内に h3/p などのブロックを入れると、iOS Safari がアンカーを分割してクリックが効かなくなる事例があるため
(front-page-mobile の m-review-row で起きたのと同じ問題) オーバーレイで処理する。
.rv-featured-card は既に position:relative のため、そのまま基準になる。 */
.rv-featured-card.is-linked{transition:box-shadow .2s ease, transform .2s ease}
.rv-featured-card.is-linked:hover{box-shadow:0 10px 30px rgba(0,11,131,.14);transform:translateY(-2px)}
.rv-featured-link{position:absolute;inset:0;z-index:3;display:block;border-radius:inherit;text-decoration:none}
.rv-featured-link:focus-visible{outline:3px solid #1F3DFF;outline-offset:-3px}
.rv-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* /wp-content/themes/taian-bridge-rwd/mobile.css */
/* ============================================================
Taian Bridge — MOBILE stylesheet
レスポンシブ化: 旧来は wp_is_mobile() で配信を分けていたが、
全ページを 1024px のブレイクポイントで切り替える方式に変更した。
body.is-mobile スコープはメディアクエリに置き換え済み。
Figma reference: 393px width iPhone frame.
============================================================ */
@media (max-width:1023.98px){
/* ============================================================
Taian Bridge — MOBILE stylesheet (served when wp_is_mobile())
Figma reference: 393px width iPhone frame.
============================================================ */
/* reset desktop min-width that would break mobile */
body{min-width:0!important;margin-left:0!important;margin-right:0!important;width:100%;max-width:100%;overflow-x:hidden;background:#F8F9FB;font-family:'Pretendard JP',sans-serif;-webkit-text-size-adjust:100%}
body *{box-sizing:border-box}
@media (max-width:1023.98px){.front-page{width:100%;max-width:480px;margin:0 auto;position:relative;background:#F8F9FB;overflow:hidden}}
/* ───────── HEADER ───────── */
.m-header{position:sticky;top:0;z-index:1000;height:48px;background:#F8F9FB;display:flex;align-items:center;padding:0 16px;gap:8px;border-bottom:1px solid rgba(0,0,0,.05)}
.m-logo{flex:0 0 auto;display:flex;align-items:center}
.m-logo img{height:26px;width:auto;display:block}
.m-header-badges{margin-left:auto;display:flex;gap:6px}
.m-badge{display:inline-flex;align-items:center;justify-content:center;height:20px;padding:0 9px;border-radius:3px;font-size:10px;font-weight:600;color:#fff;text-decoration:none;white-space:nowrap;line-height:1}
.m-badge-red{background:#C00000}
.m-badge-blue{background:#000B83}
.m-hamburger{flex:0 0 auto;width:22px;height:16px;display:flex;flex-direction:column;justify-content:space-between;background:none;border:0;padding:0;cursor:pointer;margin-left:2px}
.m-hamburger span{display:block;width:100%;height:2px;background:#000B83;border-radius:2px;transition:transform .25s,opacity .2s}
.m-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.m-hamburger.open span:nth-child(2){opacity:0}
.m-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* slide-out menu */
.m-menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .25s;z-index:1100}
.m-menu-overlay.open{opacity:1;visibility:visible}
.m-menu{position:fixed;top:0;right:0;width:78%;max-width:320px;height:100%;background:#fff;z-index:1200;transform:translateX(100%);transition:transform .28s ease;padding:64px 0 30px;overflow-y:auto;box-shadow:-4px 0 24px rgba(0,0,0,.15)}
.m-menu.open{transform:translateX(0)}
.m-menu-close{position:absolute;top:14px;right:18px;background:none;border:0;font-size:30px;line-height:1;color:#1A1A1A;cursor:pointer}
.m-menu ul{list-style:none;margin:0;padding:0}
.m-menu li a{display:block;padding:15px 28px;font-size:15px;font-weight:600;color:#1A1A1A;text-decoration:none;border-bottom:1px solid #f0f0f0}
/* accordion: parent toggles (not navigable) */
.m-menu-parent{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 28px;font-size:15px;font-weight:600;color:#1A1A1A;background:none;border:0;border-bottom:1px solid #f0f0f0;font-family:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.m-menu-caret{flex:0 0 auto;width:8px;height:8px;margin-left:12px;border-right:2px solid #1A1A1A;border-bottom:2px solid #1A1A1A;transform:rotate(45deg);transition:transform .25s ease}
.m-menu-group.open .m-menu-parent{color:#000B83}
.m-menu-group.open .m-menu-caret{transform:rotate(-135deg);border-color:#000B83}
.m-submenu{max-height:0;overflow:hidden;background:#f6f7fa;transition:max-height .3s ease}
/* 2026-09-29: 第3階層を出すようになり、レポート(4+8)・業者の選び方(3+8)は
600px に収まらず下が切れる。実測で最大 約520px だが余裕を見て広げる。 */
.m-menu-group.open .m-submenu{max-height:1000px}
.m-submenu li a{padding:13px 28px 13px 44px;font-size:14px;font-weight:500;color:#444;border-bottom:1px solid #ececec}
/* 第3階層（中分類の下の小分類）— 枝分かれ表示 */
.m-submenu3{list-style:none;margin:0;padding:0;background:#f1f3f7}
.m-submenu3 li{position:relative;margin:0}
.m-submenu3 li a{padding:10px 28px 10px 64px;font-size:12.5px;font-weight:400;color:#6b7280;border-bottom:1px solid #e6e8ee}
.m-submenu3 li::before{content:"";position:absolute;left:50px;top:0;bottom:0;border-left:1px solid #d3d7e0}
.m-submenu3 li:last-child::before{bottom:auto;height:19px}
.m-submenu3 li::after{content:"";position:absolute;left:50px;top:19px;width:7px;border-top:1px solid #d3d7e0}
.m-menu-cta{display:flex;gap:8px;padding:20px 28px 0}
.m-menu-cta .m-badge{height:34px;flex:1;font-size:13px;border-radius:6px}
/* ───────── HERO ───────── */
@media (max-width:1023.98px){.hero-section{position:relative;width:100%;height:300px;overflow:hidden}}
@media (max-width:1023.98px){.hero-section.is-video{height:200px}}
@media (max-width:1023.98px){.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;display:block}}
@media (max-width:1023.98px){.hero-section.is-video .hero-overlay{display:none}}
.m-hero-chart{position:absolute;inset:0;width:100%;height:100%;border:none;z-index:0;pointer-events:auto}
@media (max-width:1023.98px){.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,11,131,0) 36.54%, #00142b 100%);z-index:1;pointer-events:none}}
@media (max-width:1023.98px){.hero-content{position:absolute;inset:0;z-index:2;pointer-events:none}}
.m-hero-slider{position:absolute;inset:0}
.m-hero-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 24px 40px;opacity:0;transform:translateX(40px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.m-hero-slide.active{opacity:1;transform:translateX(0)}
.m-hero-slide.active .m-hero-cta{pointer-events:auto}
.m-hero-tag{margin:0 0 5px;font-size:13px;font-weight:600;line-height:1.2;color:#F30000}
.m-hero-title{margin:0 0 11px;font-size:18px;font-weight:800;line-height:1.28;color:#FAFAFA;letter-spacing:-.3px}
.m-hero-slide:nth-child(2) .m-hero-title{font-size:14px}
.m-hero-cta{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;height:34px;padding:0 18px;background:#C00000;border-radius:6px;color:#fff;font-size:15px;font-weight:500;text-decoration:none}
.m-hero-dots{position:absolute;bottom:11px;left:24px;display:flex;gap:8px;z-index:10;pointer-events:auto}
.m-hero-dot{width:8px;height:8px;border-radius:50%;background:rgba(250,250,250,.4);cursor:pointer;transition:background .3s,transform .3s}
.m-hero-dot.active{background:#fff;transform:scale(1.3)}
/* ───────── TICKER ───────── */
/* ───────── CONCERNS ───────── */
@media (max-width:1023.98px){.lp-concerns{position:relative;overflow:hidden;padding:30px 24px 36px;background:#F8F9FB;text-align:center}}
@media (max-width:1023.98px){.lp-concerns .lp-asset-protection{width:auto;margin:0 -24px 36px;background-position:center -63px}}
@media (max-width:1023.98px){.lp-dots{position:absolute;background-size:contain;background-repeat:no-repeat;background-position:center;pointer-events:none;z-index:0}}
@media (max-width:1023.98px){.lp-dots-tr{top:14px;right:6px;width:88px;height:48px;background-image:url("/wp-content/themes/taian-bridge-rwd/assets/images/m-dots-tr.webp")}}
@media (max-width:1023.98px){.lp-dots-bl{top:50%;left:-2px;transform:translateY(-50%);width:68px;height:123px;background-image:url("/wp-content/themes/taian-bridge-rwd/assets/images/m-dots-bl.webp")}}
@media (max-width:1023.98px){.lp-headline,.lp-bubbles{position:relative;z-index:1}}
@media (max-width:1023.98px){.lp-headline{margin-bottom:34px;text-align:center}}
@media (max-width:1023.98px){.lp-headline-pill{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 6px;background:#0047AB;color:#FAFAFA;font-size:20px;font-weight:700;line-height:1;letter-spacing:-.5px;white-space:nowrap}}
.m-pill-comma{margin-right:-9px}
@media (max-width:1023.98px){.lp-headline-main{margin:14px 0 0;font-size:20px;font-weight:700;color:#1A1A1A;line-height:1.3}}
@media (max-width:1023.98px){.lp-bubbles{display:flex;flex-direction:column;gap:11px;align-items:stretch}}
@media (max-width:1023.98px){.lp-bubble{display:flex;align-items:center;gap:9px;background:#fff;border:.3px solid rgba(0,0,0,.1);box-shadow:0 0 3px 1.5px rgba(0,0,0,.03);border-radius:21px;padding:11px 16px;text-align:left}}
@media (max-width:1023.98px){.lp-bubble-avatar{flex:0 0 auto;width:20px;height:20px}}
@media (max-width:1023.98px){.lp-bubble-avatar svg{width:20px;height:20px;display:block}}
@media (max-width:1023.98px){.lp-bubble span:last-child{font-size:10px;font-weight:600;line-height:1.3;color:#1A1A1A}}
@media (max-width:1023.98px){.lp-transition{position:relative;margin:42px 0 0}}
@media (max-width:1023.98px){.lp-transition-title,.lp-transition-divider,.lp-transition-sub{position:relative;z-index:1}}
@media (max-width:1023.98px){.lp-transition-title{margin:0;font-size:16px;font-weight:700;line-height:1.35;color:#1A1A1A}}
@media (max-width:1023.98px){.lp-transition-divider{width:205px;height:1px;background:#0047AB;margin:14px auto}}
@media (max-width:1023.98px){.lp-transition-sub{margin:0;font-size:10px;font-weight:400;line-height:1.4;color:#1A1A1A}}
@media (max-width:1023.98px){.lp-service{margin:40px 0 0}}
@media (max-width:1023.98px){.lp-service-intro{margin:0;font-size:16px;font-weight:700;line-height:1.4;color:#1A1A1A}}
@media (max-width:1023.98px){.lp-service-free{margin:18px 0 0;font-size:22px;font-weight:800;line-height:1;color:#0047AB;letter-spacing:-.5px}}
@media (max-width:1023.98px){.lp-special{margin:48px 0 0}}
@media (max-width:1023.98px){.lp-more-label{margin:0 0 10px;font-size:10px;font-weight:500;color:rgba(26,26,26,.5)}}
@media (max-width:1023.98px){.lp-special-intro{margin:0;font-size:16px;font-weight:700;line-height:1.4;color:#1A1A1A}}
@media (max-width:1023.98px){.lp-bullets{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;text-align:left}}
@media (max-width:1023.98px){.lp-bullets li{display:flex;align-items:flex-start;gap:10px;font-size:11px;font-weight:500;line-height:1.4;color:#1A1A1A}}
@media (max-width:1023.98px){.lp-bullets li strong{font-weight:700}}
@media (max-width:1023.98px){.lp-bullet-icon{flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:#2BB0EE;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}}
@media (max-width:1023.98px){.lp-bullet-icon svg{width:6px;height:4px}}
@media (max-width:1023.98px){.lp-cta{position:relative;margin:30px 0 0;background:#00064B;background-size:cover;background-position:center;border-radius:10px;padding:24px 20px;text-align:center;overflow:hidden}}
@media (max-width:1023.98px){.lp-cta-text{margin:0 0 16px;font-size:15px;font-weight:600;line-height:1.4;color:#fff}}
@media (max-width:1023.98px){.lp-cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:32px;padding:0 18px;background:#FAFAFA;border-radius:5px;color:#00064B;font-size:13px;font-weight:600;text-decoration:none}}
@media (max-width:1023.98px){.lp-cta-arrow{width:7px;height:7px;border-right:2px solid #00064B;border-bottom:2px solid #00064B;transform:rotate(-45deg)}}
/* ───────── CARD (status / reviews) ───────── */
@media (max-width:1023.98px){.cards-section{padding:14px 30px}}
@media (max-width:1023.98px){:is(.review-card,.status-card){background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.1);border-radius:10px;padding:24px 18px}}
@media (max-width:1023.98px){.card-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}}
@media (max-width:1023.98px){.card-title-group{display:flex;flex-direction:column;gap:6px}}
@media (max-width:1023.98px){.card-title{margin:0;font-size:14px;font-weight:700;color:#1A1A1A}}
@media (max-width:1023.98px){.card-title-line{display:block;width:60px;height:1px;background:#9A9A9A}}
@media (max-width:1023.98px){.live-indicator{display:flex;align-items:center;gap:4px}}
@media (max-width:1023.98px){.live-dot{width:5px;height:5px;border-radius:50%;background:#C00000}}
@media (max-width:1023.98px){.live-text{font-size:10px;font-weight:600;color:#1A1A1A}}
@media (max-width:1023.98px){.more-link{font-size:10px;font-weight:600;color:#9A9A9A;text-decoration:none}}
@media (max-width:1023.98px){.status-list{display:flex;flex-direction:column}}
@media (max-width:1023.98px){.status-row{display:flex;align-items:center;gap:8px;padding:9px 0;position:relative}}
@media (max-width:1023.98px){.status-bar{width:2px;height:20px;background:#1A1A1A;flex:0 0 auto}}
@media (max-width:1023.98px){.type-badge{flex:0 0 auto;background:#00096B;color:#fff;font-size:8px;font-weight:500;padding:3px 6px;border-radius:1.7px}}
@media (max-width:1023.98px){.status-name{font-size:10px;font-weight:600;color:#1A1A1A;flex:0 0 auto}}
@media (max-width:1023.98px){.status-time{font-size:8px;color:#A7A7A7;margin-left:auto}}
@media (max-width:1023.98px){.status-label{flex:0 0 auto;font-size:8px;font-weight:700;padding:3px 7px;border-radius:2.3px}}
@media (max-width:1023.98px){.status-label.approved{background:#E7FAEF;color:#027A48}}
@media (max-width:1023.98px){.status-label.pending{background:#FFFAEA;color:#EFB700}}
@media (max-width:1023.98px){.status-label.rejected{background:#FFF4F4;color:#E32929}}
.m-review-list{display:flex;flex-direction:column}
@media (max-width:1023.98px){.review-row{display:block;text-decoration:none;padding:12px 0;position:relative;z-index:5;cursor:pointer;-webkit-tap-highlight-color:rgba(0,71,171,.08)}}
@media (max-width:1023.98px){.review-row > *{pointer-events:none}}
@media (max-width:1023.98px){.review-divider{height:1px;background:rgba(26,26,26,.12)}}
@media (max-width:1023.98px){.review-type{display:block;font-size:8px;font-weight:200;color:#1A1A1A;margin-bottom:6px}}
@media (max-width:1023.98px){:is(.review-text,.review-title){margin:0 0 6px;font-size:12px;font-weight:500;line-height:1.3;color:#1A1A1A}}
@media (max-width:1023.98px){.review-snippet{margin:0 0 8px;font-size:9px;font-weight:400;line-height:1.4;color:rgba(26,26,26,.5)}}
@media (max-width:1023.98px){.review-tags{display:flex;gap:5px;flex-wrap:wrap;align-items:center}}
@media (max-width:1023.98px){.review-date{margin-left:auto;font-size:10px;color:#9b9b9b;letter-spacing:.02em;flex-shrink:0}}
.m-review-tag{background:rgba(40,173,255,.12);color:#00064B;font-size:8px;padding:2px 7px;border-radius:10px}
/* ───────── WHY ───────── */
@media (max-width:1023.98px){.why-section{padding:24px 24px 30px;background-color:#F8F9FB;background-size:cover;background-position:center;background-blend-mode:darken;text-align:center}}
@media (max-width:1023.98px){.why-title{margin:0 0 24px;font-size:24px;font-weight:700;line-height:28px;color:#0047AB}}
@media (max-width:1023.98px){.why-stats{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:24px}}
.m-why-row2{display:flex;align-items:center;justify-content:center;gap:22px}
.m-why-box{flex:0 0 auto;width:90px;height:90px;background:transparent;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.m-why-box.is-active{background:#0047AB;box-shadow:2px 2px 8px rgba(0,0,0,.3)}
.m-why-box-num{font-size:20px;font-weight:700;color:#0047AB;line-height:1;transition:color .25s ease}
.m-why-box-label{font-size:9px;font-weight:400;line-height:1.2;color:#7D7D7D;transition:color .25s ease}
.m-why-box.is-active .m-why-box-num,.m-why-box.is-active .m-why-box-label{color:#FAFAFA}
@media (max-width:1023.98px){.why-stat{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:14px 6px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .2s ease}}
@media (max-width:1023.98px){.why-stat::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90px;height:90px;background:#0047AB;border-radius:12px;box-shadow:2px 2px 8px rgba(0,0,0,.3);opacity:0;transition:opacity .25s ease;z-index:0}}
@media (max-width:1023.98px){.why-stat.is-active::before{opacity:1}}
@media (max-width:1023.98px){.why-stat:active{transform:scale(.95)}}
@media (max-width:1023.98px){.why-stat-number{position:relative;z-index:1;font-size:20px;font-weight:700;color:#0047AB;line-height:1;white-space:nowrap;transition:color .25s ease}}
@media (max-width:1023.98px){.why-stat-label{position:relative;z-index:1;font-size:9px;font-weight:400;line-height:1.2;color:#7D7D7D;transition:color .25s ease}}
@media (max-width:1023.98px){.why-stat.is-active .why-stat-number,.why-stat.is-active .why-stat-label{color:#FAFAFA}}
@media (max-width:1023.98px){.why-stat-number-sm{font-size:17px}}
.m-why-box{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .2s ease}
.m-why-box:active{transform:scale(.95)}
/* ───────── SERVICES ───────── */
@media (max-width:1023.98px){.services-section{padding:36px 30px 40px;text-align:center;background:#F8F9FB}}
@media (max-width:1023.98px){.services-title{margin:0;font-size:24px;font-weight:700;color:#1A1A1A}}
.m-services-underline{display:block;width:148px;height:2px;background:#C00000;margin:14px auto 26px}
@media (max-width:1023.98px){.service-card{position:relative;display:block;width:100%;height:auto;min-height:160px;border-radius:10px;overflow:hidden;background-size:cover;background-position:center;text-align:left;padding:20px 19px;margin-bottom:14px;text-decoration:none}}
@media (max-width:1023.98px){.service-card-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}}
@media (max-width:1023.98px){.service-card-bottom-left{flex:1;min-width:0}}
@media (max-width:1023.98px){.service-card-title{margin:0 0 5px;font-size:14px;font-weight:700;color:#fff}}
@media (max-width:1023.98px){.service-card-sub{margin:0 0 7px;font-size:8px;font-weight:400;color:#fff}}
@media (max-width:1023.98px){.service-card-desc{margin:0 0 7px;font-size:9px;font-weight:400;line-height:1.4;color:#fff}}
@media (max-width:1023.98px){.service-card-features{margin:0;padding-left:14px;list-style:disc;font-size:8px;font-weight:400;line-height:1.45;color:#fff}}
@media (max-width:1023.98px){.service-card-features li{font-size:8px;font-weight:400;line-height:1.45;color:#fff}}
@media (max-width:1023.98px){.btn-service{flex:0 0 auto;align-self:flex-end;display:inline-flex;align-items:center;justify-content:center;width:68px;height:30px;background:#C00000;border-radius:4px;color:#fff;font-size:8px;font-weight:700;text-align:center;line-height:1.1}}
/* ───────── CONTACT ───────── */
.m-contact-note{margin:18px 0 0;font-size:9px;font-weight:400;line-height:1.4;color:#fff}
/* ───────── FOOTER ───────── */
.m-footer{background:#00064B;padding:22px 30px 24px;border-top:1px solid #FAFAFA}
.m-footer-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:14px}
.m-footer-nav a{font-size:8.4px;font-weight:500;color:#FAFAFA;text-decoration:none}
.m-footer-nav-sub{display:flex;gap:10px;justify-content:center;margin-bottom:14px}
.m-footer-nav-sub a{font-size:8.4px;font-weight:500;color:rgba(250,250,250,.6);text-decoration:none}
.m-footer-divider{height:1px;background:rgba(250,250,250,.15);margin-bottom:18px}
.m-footer-bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.m-footer-contact{display:flex;flex-direction:column;gap:10px}
.m-footer-contact-row{display:flex;align-items:center;gap:8px}
.m-footer-icon{width:17px;height:17px;border-radius:3.6px;background:#C00000;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.m-footer-icon img{width:11px;height:11px;filter:brightness(0) invert(1)}
.m-footer-contact-row span:last-child{font-size:11.24px;font-weight:600;color:#FAFAFA;letter-spacing:.3px}
.m-footer-logo{width:56px;height:auto;object-fit:contain;opacity:.9}
.m-footer-copy{margin:18px 0 0;text-align:center;font-size:6.3px;font-weight:200;color:#FAFAFA}
@media (max-width:1023.98px){:is(.review-text,.review-title),.review-snippet,.review-tags{display:block}}
@media (max-width:1023.98px){.lp-bubble .lp-emph{font-style:normal;font-weight:700;color:#C00000}}
/* ─── お問い合わせ内 共感メッセージ (mobile) ─── */
/* モバイルメニューの大分類: ラベル(ハブリンク) + キャレット(トグル)を分離 (2026-08-04) */
.m-menu-parent{display:flex;align-items:center;justify-content:space-between;width:100%;border-bottom:1px solid #f0f0f0;background:none}
/* .m-menu li a (0,1,2) に勝つには詳細度を上げる必要がある + 重複borderを除去 */
.m-menu .m-menu-parent-link{flex:1 1 auto;display:block;padding:15px 8px 15px 28px;font-size:15px;font-weight:600;color:#1A1A1A;text-decoration:none;border-bottom:0;-webkit-tap-highlight-color:transparent}
.m-menu-toggle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:56px;align-self:stretch;padding:0;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.m-menu-toggle .m-menu-caret{margin-left:0}
.m-menu-group.open .m-menu-parent-link{color:#000B83}
.m-menu-group.open .m-menu-toggle .m-menu-caret{transform:rotate(-135deg);border-color:#000B83}
/* ── 480px 超の端末(折りたたみ・分割画面・横向き・タブレット)──────────
ヘッダーは画面いっぱい・ホームの .m-main だけ 480px という食い違いで
軸がずれていたため、幅の制御を body 一本に寄せる。 */
/* 481〜560px: .m-main の 480px 上限を外してヘッダーと同じ幅にそろえる */
}
@media (max-width:1023.98px) and (min-width:481px){
@media (max-width:1023.98px){body .front-page{max-width:none}}
}
@media (max-width:1023.98px){
/* 561px 以上: ヘッダーも本文も 560px の 1 カラムにして中央に置く。
viewport 基準で貼り付くフローティングCTAも同じ列の右端に合わせる。
(ドロワーは閉じるとき translateX(100%) = 自幅ぶんしか動かないため、
right をずらすと画面外に出きらない。画面右端のまま据え置く。) */
}
/* 561px 以上〜ブレイクポイントまで。
旧来は 1 カラム 560px を中央に置き、左右を灰色地にしていた
(モバイル配信限定だったため、大きめのスマホ・タブレットだけが該当した)。
レスポンシブ化でデスクトップのウィンドウ幅もこの区間に入るようになり、
左右の余白が目立つため、マークアップを画面幅いっぱいに広げる方針に変更した。
広げたことで崩れる箇所はこのファイルと各テンプレート側で個別に直している。 */
/* /wp-content/themes/taian-bridge-rwd/rwd.css */
/* ============================================================
Taian Bridge — RESPONSIVE SWITCH
旧来は wp_is_mobile() でテンプレート自体を出し分けていた。
レスポンシブ化に伴い、PC 用とモバイル用のマークアップを両方出力し、
表示の切り替えをこのファイルのブレイクポイントで行う。
ブレイクポイント(サイト全体で統一):
- 1024px 以上 … PC レイアウト(.rwd-pc / .site-header / .site-footer)
- 1023.98px 以下 … モバイルレイアウト(.rwd-mo / .m-header / .m-footer)
- 640px 以下 … 小さい画面向けの追い込み(各 CSS 側で定義)
読み込み順は最後。他の CSS より後に当てる前提で書いている。
============================================================ */
/* ───────── 1. マークアップの出し分け ───────── */
@media (min-width:1024px){
.rwd-mo{display:none!important}
.m-header,.m-footer,.m-menu,.m-menu-overlay{display:none!important}
/* モバイル専用のフローティング UI */
.m-float-cta,.m-bottom-bar{display:none!important}
}
@media (max-width:1023.98px){
.rwd-pc{display:none!important}
.site-header,.site-footer{display:none!important}
/* PC の固定ヘッダー(113px)ぶん空けていた余白を取り消す。
モバイルヘッダーは sticky 48px なので、この余白が残ると先頭が大きく空く。 */
.legal-hero,.page-enter,.main-content,main[class]{margin-top:0}@media (min-width:1024px){.hero-section{margin-top:0}}
@media (min-width:1024px){.hero-section.is-hidden ~ .event-bar{margin-top:0}}
}
/* ───────── 2. PC マークアップしか持たないページの流動化 ─────────
ハブ・レポート・比較など、モバイル用テンプレートを持たないページは
1023.98px 以下でも PC マークアップのまま表示される。
個別 CSS(hub.css 等)のメディアクエリで大半は追い込み済みだが、
1920px キャンバス前提で残っている固定幅をここで受け止める。 */
@media (max-width:1023.98px){
/* かつてここに [class*="-wrap"] 等へ max-width:100%!important を当てていたが、
hub.css の max-width:calc(100% - 32px) のような正しい指定まで潰してしまい、
モバイルで左右の余白が消えた。個別 CSS 側が対応済みなので撤去した。 */
/* 横に並べた固定幅カードは縦積みに倒す */
.cards-wrapper{flex-direction:column;align-items:center;gap:20px}
@media (min-width:1024px){.status-card,.review-card{width:100%;max-width:476px;height:auto}}
/* 1920px 基準の絶対配置をフローに戻す */
.co-criteria-text,.co-team-photo{position:static;width:auto;left:auto;top:auto;bottom:auto}
.co-execs,.co-history{height:auto}
}
/* 表はスクロールで逃がす(セル幅を潰して読めなくするより良い) */
@media (max-width:1023.98px){
.ek-table-wrap,.rp-table-wrap,.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* ───────── 3. 共通の安全網 ───────── */
/* 画像・動画・iframe が親をはみ出さない */
img,video,iframe{max-width:100%}
/* 長い URL や日本語以外の連続文字での横あふれを防ぐ */
@media (max-width:1023.98px){
body{overflow-x:hidden}
p,li,dd,td,th,figcaption{overflow-wrap:anywhere}
}
/* ───────── 4. mu-plugin 由来のパーツ ─────────
関連リンクナビ(mu-plugins/taian-related-nav.php)は旧テーマと共用のため
プラグイン側は触らない。body.is-mobile で書かれている指定を
ここでブレイクポイントとして再現する。
.inner-wrap は padding:0 468px 0 478px(1920px 前提)のままなので、
これを打ち消さないと画面外に 946px はみ出す。 */
/* このプラグインの CSS はページ後方の