@charset "UTF-8"; /* ============================================================ Sales Index — コーポレートページ共通デザインシステム - 既定パレット＝ネイビー（コーポレート本体） - body.lp-line でティール/ゴールド（LINEマーケ詳細）に切替 - 寸法はフルード（1440pxで1rem=10px / 900px以下は375px基準） ============================================================ */ /* ---- フルード寸法（rem は必ず html を基準に解決されるため html に指定） ---- コーポレートページののみ .si-fluid を付与。ブログ(SWELL)には影響しない。 */ html.si-fluid { font-size: calc(100vw*(10/1440)); } @media screen and (max-width:900px){ html.si-fluid { font-size: calc(100vw*(10/375)); } } /* ---- コーポレートページの基本設定 ---- */ body.si-corp *, body.si-corp *::before, body.si-corp *::after { box-sizing: border-box; } body.si-corp { margin:0; font-family:"Noto Sans JP", sans-serif; color: var(--ink); background:#fff; font-feature-settings:'pwid' on, 'palt' on; line-height:1.6; overflow-x:hidden; } body.si-corp img { display:block; max-width:100%; } body.si-corp a { color:inherit; text-decoration:none; } /* ---- ルート寸法・パレット ---- */ :root { --navy:#004EA2; --navy-d:#00306A; --navy-dd:#001E45; --cyan:#00A6DA; --ink:#121212; --mute:#5A6B7D; --line:#E4EAF1; --mist:#F5F8FB; --grad:linear-gradient(126deg,#00306A 0%,#004EA2 33.17%,#0069CE 66.83%,#004EA2 100%); /* アクセント抽象化（LPで上書き） */ --accent:var(--cyan); --dark:var(--navy); --dark2:var(--navy-d); --darkest:var(--navy-dd); --deco:var(--navy); --deco-op:.13; } /* LINEマーケ詳細ページ：ティール/ゴールド */ body.lp-line { --navy:#123744; --navy-d:#0E2C36; --navy-dd:#123744; --cyan:#2E7D8C; --ink:#10262E; --mute:#5E7076; --line:#E2EAEA; --mist:#F5F8F8; --grad:linear-gradient(126deg,#0E2C36 0%,#123744 34%,#1A4A57 67%,#123744 100%); --accent:#2E7D8C; --gold:#C69A5B; --dark:#123744; --dark2:#0E2C36; --darkest:#123744; --deco:#123744; --deco-op:.07; } .en { font-family:"Geist", sans-serif; } .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; } /* ---- 共通タイポ ---- */ .lbl { font-family:"Geist",sans-serif; font-size:1.2rem; font-weight:600; letter-spacing:.24em; color:var(--accent); display:inline-block; } .h2 { font-size:6.6rem; font-weight:900; line-height:1.2; letter-spacing:-.04em; } .h3 { font-size:2.8rem; font-weight:900; line-height:1.3; letter-spacing:-.03em; } .p { font-size:1.6rem; font-weight:500; line-height:1.6; letter-spacing:-.02em; color:var(--mute); text-wrap:pretty; } .sp-br { display:none; } @media screen and (max-width:900px){ .sp-br { display:inline; } } .sec { padding:15rem 6rem 12rem; position:relative; overflow:hidden; } .sec > *:not(.deco-en){ position:relative; z-index:1; } .marker { display:inline-block; width:2.6rem; height:2px; background:var(--accent); margin-bottom:1.4rem; } .note { font-size:1.2rem; color:#9AA5B1; letter-spacing:-.02em; } @media screen and (max-width:900px){ .h2{font-size:2.5rem} .h3{font-size:2.2rem} .p{font-size:1.4rem} .sec{padding:9rem 2.4rem 7rem} .cta .h2{font-size:2.6rem!important} .bnr .h3{font-size:2.6rem!important} #recruit .h3{font-size:2.6rem!important} } .deco-en { position:absolute; font-family:"Geist",sans-serif; font-weight:900; font-size:24rem; line-height:.8; letter-spacing:-.04em; color:var(--deco); opacity:var(--deco-op); z-index:0; pointer-events:none; user-select:none; white-space:nowrap; } .deco-en--w { color:#fff; opacity:.16; } @media screen and (max-width:900px){ .deco-en{ font-size:12rem; } } .arrow { font-size:1.4rem; font-weight:700; color:var(--dark); display:inline-flex; align-items:center; gap:1.2rem; } .arrow i { display:block; width:2.4rem; height:1px; background:var(--dark); transition:width .4s cubic-bezier(.76,0,.24,1); } /* ============ アニメーション ============ */ .a-reveal { clip-path:inset(0 100% 0 0); } .a-reveal.on { clip-path:inset(0 0 0 0); transition:clip-path .9s cubic-bezier(.76,0,.24,1) var(--d,0s); } .a-clip { position:relative; padding-left:4.6rem; } .a-clip::before { content:""; position:absolute; left:0; top:50%; width:3.2rem; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left center; } body.lp-line .a-clip::before { background:var(--gold); } .a-clip.on::before { transform:scaleX(1); transition:transform .5s cubic-bezier(.76,0,.24,1) var(--d,0s); } .a-clip > span { display:inline-block; clip-path:inset(0 100% 0 0); } .a-clip.on > span { clip-path:inset(0 0 0 0); transition:clip-path .5s cubic-bezier(.76,0,.24,1) calc(var(--d,0s) + .35s); } .a-maskwrap { overflow:hidden; } .a-mask { transform:translateY(105%); } .a-mask.on { transform:none; transition:transform .9s cubic-bezier(.22,1,.36,1) var(--d,0s); } .a-up { opacity:0; transform:translateY(3rem); } .a-up.on { opacity:1; transform:none; transition:opacity .8s ease var(--d,0s), transform .8s cubic-bezier(.22,1,.36,1) var(--d,0s); } .a-scale { opacity:0; transform:scale(.94); } .a-scale.on { opacity:1; transform:none; transition:opacity .8s ease var(--d,0s), transform .9s cubic-bezier(.22,1,.36,1) var(--d,0s); } @media (prefers-reduced-motion: reduce){ .a-reveal,.a-clip>span{clip-path:none}.a-clip::before{transform:none}.a-mask,.a-up,.a-scale{opacity:1;transform:none} } /* ============ ヘッダー ============ */ .hdr { position:fixed; inset:0 0 auto; z-index:60; display:flex; align-items:center; justify-content:space-between; padding:2.6rem 6rem; transition:background .4s,padding .4s; } .hdr.solid { background:var(--dark2); } .hdr.stuck { background:rgba(0,48,106,.92); backdrop-filter:blur(12px); padding:1.6rem 6rem; } body.lp-line .hdr.stuck { background:rgba(18,55,68,.92); } .hdr__logo { height:5.6rem; width:auto; } .hdr__nav { display:flex; align-items:center; gap:4rem; } .hdr .hdr__nav a { font-family:"Geist",sans-serif; font-size:1.4rem; font-weight:500; color:rgba(255,255,255,.92); position:relative; } .hdr__nav a.jp { font-family:"Noto Sans JP",sans-serif; font-size:1.3rem; } .hdr__nav a:not(.hdr__cta)::after { content:""; position:absolute; left:0; bottom:-.6rem; width:100%; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right center; transition:transform .4s cubic-bezier(.76,0,.24,1); } .hdr__nav a:not(.hdr__cta):hover::after { transform:scaleX(1); transform-origin:left center; } .hdr__cta { background:var(--accent); color:#fff!important; padding:1.4rem 2.8rem; font-size:1.3rem; font-weight:700; } body.lp-line .hdr__cta { background:var(--gold); } /* ドロップダウン（Service） */ .hdr__has-sub { position:relative; display:flex; align-items:center; } .hdr__caret { display:inline-block; margin-left:.6rem; font-size:1rem; transition:transform .3s; } .hdr__has-sub:hover .hdr__caret { transform:rotate(180deg); } .hdr__sub { position:absolute; top:100%; left:50%; transform:translateX(-50%); padding-top:1.8rem; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; z-index:60; } .hdr__has-sub:hover .hdr__sub { opacity:1; visibility:visible; } .hdr__sub-inner { background:#fff; min-width:24rem; padding:1rem 0; border-radius:.4rem; box-shadow:0 2rem 5rem rgba(0,20,50,.18); } .hdr .hdr__nav .hdr__sub-inner a { display:block; color:var(--ink); font-family:"Noto Sans JP",sans-serif; font-size:1.4rem; font-weight:600; padding:1.4rem 2.6rem; white-space:nowrap; transition:background .25s,color .25s; } .hdr .hdr__nav .hdr__sub-inner a::after { display:none; } .hdr .hdr__nav .hdr__sub-inner a:hover { background:var(--mist); color:var(--navy); } @media screen and (max-width:900px){ .hdr__has-sub { flex-direction:column; } .hdr__caret { display:none; } .hdr__sub { position:static; transform:none; padding-top:1.2rem; opacity:1; visibility:visible; } .hdr__sub-inner { background:transparent; box-shadow:none; padding:0; min-width:0; } .hdr .hdr__nav .hdr__sub-inner a { color:rgba(255,255,255,.7); font-size:1.5rem; text-align:center; padding:.8rem; } .hdr .hdr__nav .hdr__sub-inner a:hover { background:transparent; color:#fff; } } /* ハンバーガー（モバイル用） */ .hdr__burger { display:none; width:4.8rem; height:4.8rem; position:relative; background:none; border:0; cursor:pointer; z-index:70; } .hdr__burger span { position:absolute; left:1rem; right:1rem; height:2px; background:#fff; transition:transform .4s,opacity .3s; } .hdr__burger span:nth-child(1){ top:1.6rem; } .hdr__burger span:nth-child(2){ top:2.35rem; } .hdr__burger span:nth-child(3){ top:3.1rem; } body.nav-open .hdr__burger span:nth-child(1){ transform:translateY(.75rem) rotate(45deg); } body.nav-open .hdr__burger span:nth-child(2){ opacity:0; } body.nav-open .hdr__burger span:nth-child(3){ transform:translateY(-.75rem) rotate(-45deg); } @media screen and (max-width:900px){ .hdr,.hdr.stuck{ padding:2rem 2.4rem; } .hdr__burger{ display:block; } .hdr__nav{ position:fixed; inset:0; flex-direction:column; justify-content:center; gap:3.2rem; background:var(--dark2); opacity:0; visibility:hidden; transition:opacity .4s,visibility .4s; } body.nav-open .hdr__nav{ opacity:1; visibility:visible; } .hdr__nav a{ font-size:2rem; } .hdr__nav a.jp{ font-size:1.8rem; } .hdr__cta{ padding:1.6rem 3.2rem; font-size:1.6rem; } } /* ============ ページ見出し（下層共通） ============ */ .phead { background:var(--grad); color:#fff; padding:22rem 6rem 10rem; position:relative; overflow:hidden; } .phead--sm { padding:16rem 6rem 10rem; } .phead__sym { position:absolute; right:-10rem; top:-12rem; width:56rem; opacity:.07; } .phead__ttl { font-size:7.2rem; font-weight:900; letter-spacing:-.045em; line-height:1.1; transform:skewX(-8deg); transform-origin:left bottom; } .phead__ttl--sm { font-size:6rem; } .a-maskwrap .phead__ttl.a-mask { transform:translateY(105%) skewX(-8deg); } .a-maskwrap .phead__ttl.a-mask.on { transform:translateY(0) skewX(-8deg); } .crumb { font-size:1.2rem; opacity:.6; display:flex; gap:1rem; margin-top:4rem; } @media screen and (max-width:900px){ .phead,.phead--sm{ padding:14rem 2.4rem 7rem; } .phead__ttl{ font-size:3.8rem; } .phead__ttl--sm{ font-size:3.4rem; } } /* ============ 斜体インパクト見出し（イントロ等） ============ */ .intro-ttl { font-size:6.4rem; font-weight:900; letter-spacing:-.04em; line-height:1.2; color:var(--navy); transform:skewX(-8deg); transform-origin:left bottom; } .a-maskwrap .intro-ttl.a-mask { transform:translateY(105%) skewX(-8deg); } .a-maskwrap .intro-ttl.a-mask.on { transform:translateY(0) skewX(-8deg); } .intro-lead { font-size:1.7rem; } @media screen and (max-width:900px){ .intro-ttl{ font-size:2.5rem; white-space:nowrap; } .intro-lead{ font-size:1.5rem; text-wrap:wrap; } } /* ============ トップFV ============ */ .mv { min-height:100vh; background:var(--grad); color:#fff; position:relative; overflow:hidden; display:flex; align-items:center; padding:0 6rem; } .mv__sym { position:absolute; right:-14rem; top:-16rem; width:82rem; opacity:0; transform:translateX(-58vw); } .mv__sym.on { opacity:.07; transform:translateX(0); transition:transform 1.6s cubic-bezier(.22,1,.36,1) .2s, opacity 1.1s ease .2s; } .mv__inner { position:relative; z-index:2; padding-top:6rem; } .mv__head { font-size:11rem; font-weight:900; line-height:1.06; letter-spacing:-.045em; transform:skewX(-8deg); transform-origin:left bottom; } .a-maskwrap .mv__head.a-mask { transform:translateY(105%) skewX(-8deg); } .a-maskwrap .mv__head.a-mask.on { transform:translateY(0) skewX(-8deg); } .mv__sub { font-size:2.8rem; font-weight:700; line-height:1.5; letter-spacing:-.03em; opacity:.92; transform:skewX(-8deg); transform-origin:left bottom; } .a-maskwrap .mv__sub.a-mask { transform:translateY(105%) skewX(-8deg); } .a-maskwrap .mv__sub.a-mask.on { transform:translateY(0) skewX(-8deg); } .mv__scroll { position:absolute; left:6rem; bottom:4rem; display:flex; align-items:center; gap:1.2rem; font-family:"Geist",sans-serif; font-size:1.1rem; letter-spacing:.2em; opacity:.6; z-index:2; } .mv__scroll i { display:block; width:6rem; height:1px; background:#fff; position:relative; overflow:hidden; } .mv__scroll i::after { content:""; position:absolute; inset:0; background:var(--accent); animation:si-sc 2.2s cubic-bezier(.76,0,.24,1) infinite; } @keyframes si-sc { 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} } @media screen and (max-width:900px){ .mv{padding:0 2.4rem} .mv__head{font-size:5rem} .mv__sub{font-size:1.7rem} .mv__sym{right:-8rem;top:-6rem;width:44rem} .mv__scroll{left:2.4rem} } /* ============ 画像FV（LINEマーケ） ============ */ .mv-img { position:relative; line-height:0; background:var(--dark); } .mv-img__pic { width:100%; height:auto; display:block; } .mv-img__pic.pc { display:block; } .mv-img__pic.sp { display:none; } @media screen and (max-width:900px){ .mv-img__pic.pc{display:none} .mv-img__pic.sp{display:block} .mv-img{ padding-top:10rem; } } /* Lステップ等の2カラム（モバイルで縦積み） */ .tool-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:6rem; align-items:center; } @media screen and (max-width:900px){ .tool-grid{ grid-template-columns:1fr; gap:3rem; } } .mv-img__scroll { position:absolute; left:6rem; bottom:2.4rem; display:flex; align-items:center; gap:1.2rem; font-family:"Geist",sans-serif; font-size:1.1rem; letter-spacing:.2em; color:#fff; opacity:.85; z-index:3; line-height:1; } .mv-img__scroll i { display:block; width:6rem; height:1px; background:rgba(255,255,255,.5); position:relative; overflow:hidden; } .mv-img__scroll i::after { content:""; position:absolute; inset:0; background:var(--gold,#C69A5B); animation:si-sc 2.2s cubic-bezier(.76,0,.24,1) infinite; } @media screen and (max-width:900px){ .mv-img__scroll{ left:2.4rem; } } /* ============ カード（トップ Service） ============ */ .cards { display:grid; grid-template-columns:1fr 1fr; gap:3.2rem; } .card { background:#fff; padding:5.6rem 4.8rem; position:relative; overflow:hidden; border-top:.4rem solid var(--navy); transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease; } .card:hover { transform:translateY(-.8rem); box-shadow:0 3rem 6rem rgba(0,48,106,.12); } .card--cy { border-top-color:var(--cyan); } .card__no { font-family:"Geist",sans-serif; font-size:5.6rem; font-weight:900; line-height:.8; letter-spacing:-.04em; color:var(--navy); opacity:.13; } .card--cy .card__no { color:var(--cyan); opacity:.2; } .card:hover .arrow i { width:4.4rem; } @media screen and (max-width:900px){ .cards{grid-template-columns:1fr;gap:2rem} .card{padding:3.2rem 2.4rem} } /* ============ 3カラム（why / strength） ============ */ .g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:4rem; } .g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:2.4rem; } .col-top { border-top:1px solid var(--line); padding-top:3.2rem; } .col-no { font-family:"Geist",sans-serif; font-size:1.2rem; font-weight:700; letter-spacing:.2em; color:var(--accent); } body.lp-line .col-no { color:var(--gold); } @media screen and (max-width:900px){ .g3,.g4{grid-template-columns:1fr;gap:2.4rem} } /* ============ 帯バナー ============ */ .bnr { background:var(--navy-d); color:#fff; padding:8rem 6rem; display:flex; align-items:center; justify-content:space-between; position:relative; overflow:hidden; } .bnr__sym { position:absolute; right:4rem; bottom:-10rem; width:28rem; opacity:.09; } .btn-w { background:#fff; color:var(--dark); padding:1.8rem 3.6rem; font-size:1.4rem; font-weight:700; display:inline-flex; align-items:center; gap:1.2rem; position:relative; z-index:2; transition:gap .4s cubic-bezier(.76,0,.24,1); } body.si-corp a.btn-w { color:var(--dark); } /* body.si-corp a の inherit(白)より優先。白背景に白文字化を防ぐ */ .btn-w:hover { gap:2rem; } @media screen and (max-width:900px){ .bnr{padding:5rem 2.4rem;flex-direction:column;align-items:flex-start;gap:3rem} } /* ============ 課題ボックス / データ（LINEマーケ） ============ */ .box { background:#fff; border:1px solid var(--line); padding:4rem 3.2rem; position:relative; } body.lp-line .box::before { content:""; position:absolute; left:0; top:0; width:100%; height:.3rem; background:var(--gold); } .qno { font-family:"Geist",sans-serif; font-size:4rem; font-weight:900; color:var(--navy); opacity:.16; line-height:.8; } body.lp-line .qno { color:var(--gold); opacity:.5; } .stat { background:#fff; border:1px solid var(--line); padding:4rem 3.2rem; text-align:center; } .stat__n { font-family:"Geist",sans-serif; font-size:6.4rem; font-weight:900; color:var(--gold,var(--navy)); letter-spacing:-.04em; line-height:1; } .stat__n small { font-size:2rem; margin-left:.4rem; } .stat__t { font-size:1.3rem; font-weight:700; color:var(--mute); letter-spacing:.06em; margin-bottom:2rem; } .bars { display:flex; flex-direction:column; gap:1.2rem; margin-top:1rem; } .bar { display:flex; align-items:center; gap:1.2rem; font-size:1.2rem; } .bar__l { width:7rem; text-align:left; color:var(--mute); font-weight:600; } .bar__t { flex:1; height:.8rem; background:var(--line); position:relative; overflow:hidden; } .bar__f { position:absolute; inset:0 auto 0 0; background:var(--accent); width:0; transition:width 1.2s cubic-bezier(.22,1,.36,1) var(--d,0s); } .on .bar__f { width:var(--w); } .bar__v { width:5rem; text-align:right; font-family:"Geist",sans-serif; font-weight:700; } /* 日本地図の背景（国内ユーザー数カード） */ .stat--map { position:relative; overflow:hidden; } .stat--map > *:not(.stat__map){ position:relative; z-index:1; } .stat__map { position:absolute; left:50%; top:54%; transform:translate(-50%,-50%); width:78%; height:auto; opacity:.5; z-index:0; } /* PUSH型メディアのイラスト */ .stat__push { display:flex; justify-content:center; margin:2rem 0 1.4rem; } .stat__push svg { width:12rem; height:auto; } /* 開封率の円グラフ */ .donuts { display:flex; align-items:flex-end; justify-content:center; gap:2.8rem; margin:1.6rem 0 .6rem; } .donut { text-align:center; } .donut svg { display:block; margin:0 auto; } .donut__label { font-size:1.2rem; font-weight:700; color:var(--mute); margin-top:1rem; } /* ============ 提供内容 / メニュー ============ */ .feat { border-top:1px solid var(--line); } .feat__i { display:grid; grid-template-columns:16rem 1fr 1.4fr; gap:4rem; padding:6rem 0; border-bottom:1px solid var(--line); align-items:start; } .feat__no { font-family:"Geist",sans-serif; font-size:1.2rem; font-weight:700; letter-spacing:.2em; color:var(--accent); } body.lp-line .feat__no { color:var(--gold); } .badge { display:inline-block; background:var(--navy); color:#fff; font-size:1.2rem; font-weight:700; padding:.8rem 1.6rem; margin-top:1.6rem; } body.lp-line .badge { background:var(--gold); } @media screen and (max-width:900px){ .feat__i{grid-template-columns:1fr;gap:1.6rem;padding:4rem 0} } .menu { display:grid; grid-template-columns:repeat(2,1fr); gap:0; border:1px solid var(--line); } .menu__i { padding:3rem 3.2rem; border-bottom:1px solid var(--line); display:flex; gap:1.6rem; align-items:flex-start; } .menu__i:nth-child(odd){ border-right:1px solid var(--line); } /* 最終行の下線は外枠と重なるので消す。PCは2列なので末尾2つ、SPは1列なので末尾のみ */ .menu__i:last-child, .menu__i:nth-child(odd):nth-last-child(2) { border-bottom:0; } .check { width:2rem; height:2rem; border-radius:50%; background:var(--accent); flex-shrink:0; position:relative; margin-top:.2rem; } .check::after { content:""; position:absolute; left:.6rem; top:.45rem; width:.5rem; height:.9rem; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); } @media screen and (max-width:900px){ .menu{grid-template-columns:1fr} .menu__i:nth-child(odd){border-right:0} .menu__i:nth-child(odd):nth-last-child(2){ border-bottom:1px solid var(--line); } } /* ============ フロー ============ */ .flow { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; } .flow__i { background:#fff; border-top:.3rem solid var(--accent); padding:2.6rem 1.8rem 2.2rem; position:relative; } .flow__i--goal { border-top-color:var(--gold); background:#FBF7F1; } /* 番号: 左上に食い込む塗りバッジ */ .flow__n { position:absolute; left:-.9rem; top:-1.4rem; width:3.8rem; height:3.8rem; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:700; letter-spacing:.02em; } .flow__i--goal .flow__n { background:var(--gold); } .flow__h { font-size:1.9rem; font-weight:900; letter-spacing:-.03em; margin:1rem 0 1.6rem; white-space:nowrap; } /* 期間バッジ: 主役 */ .flow__d { background:#EEF4F4; border-left:.3rem solid var(--accent); padding:1rem 1.4rem; display:flex; align-items:baseline; gap:.3rem; position:relative; } .flow__d b { font-size:3.8rem; font-weight:700; color:var(--navy); letter-spacing:-.04em; line-height:1; } .flow__d small { font-size:1.2rem; font-weight:700; color:var(--mute); } .flow__d--goal { background:var(--gold); border-left-color:#8F6C36; justify-content:center; padding:1.7rem 1.4rem; } .flow__d--goal small { font-size:1.5rem; color:#fff; letter-spacing:.06em; } .flow__t { font-size:1.15rem; line-height:1.95; color:#7A8B90; margin-top:1.4rem; } .flow__t strong { color:var(--ink); font-weight:700; } /* 矢印: 期間バッジを基準にgap中央へ。見出しの行高に依存しない */ .flow__i:not(:last-child) .flow__d::after { content:""; position:absolute; right:-3.3rem; top:50%; transform:translateY(-50%); border-top:.7rem solid transparent; border-bottom:.7rem solid transparent; border-left:1rem solid var(--accent); } .flow__sum { display:flex; align-items:baseline; gap:1rem; margin-top:3rem; padding:1.6rem 2.6rem; background:var(--navy); color:#fff; font-size:1.3rem; font-weight:700; } .flow__sum b { font-size:3rem; letter-spacing:-.03em; } .flow__sum span { margin-left:auto; font-size:1.2rem; font-weight:500; color:#9FBAC1; } @media screen and (max-width:900px){ .flow { grid-template-columns:1fr; gap:0; padding-left:4.4rem; } .flow__i { border-top:0; background:none; padding:0 0 2.6rem; } .flow__i--goal { background:none; } /* 縦線: バッジ下端から次のバッジ上端まで個別に引く */ .flow__i:not(:last-child)::before { content:""; position:absolute; left:calc(-2.8rem - 1px); top:3.4rem; bottom:-.2rem; width:2px; background:#D5E2E2; } .flow__i:not(:last-child) .flow__d::after { display:none; } .flow__n { left:-4.4rem; top:0; width:3.2rem; height:3.2rem; font-size:1.3rem; } .flow__head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line); padding-bottom:.8rem; } .flow__h { font-size:1.5rem; margin:0; } .flow__d { background:none; border-left:0; padding:0; flex-shrink:0; } .flow__d b { font-size:2.8rem; } .flow__d--goal { background:var(--gold); padding:.5rem 1.1rem; } .flow__d--goal small { font-size:1.1rem; } .flow__t { font-size:1.25rem; margin-top:1rem; } .flow__sum { margin-top:1rem; padding:1.4rem 1.8rem; font-size:1.15rem; flex-wrap:wrap; } .flow__sum b { font-size:2.4rem; } .flow__sum span { margin-left:0; flex-basis:100%; } } /* ============ 料金 ============ */ .price { background:#fff; border:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; } .price__i { padding:6rem 4.8rem; } .price__i:first-child { border-right:1px solid var(--line); background:var(--grad); color:#fff; } .price__i:first-child .h3 { color:#fff; } .price__n { font-family:"Geist",sans-serif; font-size:9rem; font-weight:900; letter-spacing:-.05em; line-height:1; color:var(--gold,var(--navy)); } .price__n small { font-size:2.4rem; margin-left:.8rem; font-family:"Noto Sans JP"; } @media screen and (max-width:900px){ .price{grid-template-columns:1fr} .price__i{padding:4rem 2.4rem} .price__i:first-child{border-right:0;border-bottom:1px solid var(--line)} } /* ============ テーブル（会社概要） ============ */ .tbl { width:100%; border-collapse:collapse; font-size:1.5rem; letter-spacing:-.02em; } .tbl th { text-align:left; padding:2.4rem 0; width:16rem; font-weight:600; color:var(--mute); border-bottom:1px solid var(--line); vertical-align:top; } .tbl td { padding:2.4rem 0; font-weight:500; border-bottom:1px solid var(--line); } @media screen and (max-width:900px){ .tbl,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block;width:auto} .tbl th{border:0;padding:2rem 0 .6rem;font-size:1.2rem} .tbl td{padding:0 0 2rem} } .map { width:100%; aspect-ratio:16/6; border:1px solid var(--line); background:var(--mist); overflow:hidden; } .map iframe { width:100%; height:100%; border:0; display:block; } @media screen and (max-width:900px){ .map{ aspect-ratio:4/3; } } /* ============ CTA ============ */ .cta { background:var(--grad); color:#fff; padding:15rem 6rem; text-align:center; position:relative; overflow:hidden; } .cta .h2 { color:#fff; } .cta__sym { position:absolute; left:-6rem; bottom:-12rem; width:36rem; opacity:.08; } .btn-cy { background:var(--accent); color:#fff; padding:2.2rem 5rem; font-size:1.5rem; font-weight:700; display:inline-flex; align-items:center; gap:1.2rem; transition:gap .4s cubic-bezier(.76,0,.24,1); border:0; font-family:inherit; cursor:pointer; } body.lp-line .btn-cy { background:var(--gold); } .btn-cy:hover { gap:2rem; } @media screen and (max-width:900px){ .cta{padding:8rem 2.4rem} } /* ============ プレフッターCTAバナー（人物写真） ============ */ .cta-banner { position:relative; background:var(--grad); color:#fff; overflow:hidden; padding:7rem 6rem 7rem 50rem; min-height:42rem; display:flex; align-items:center; } .cta-banner__figure { position:absolute; left:9rem; bottom:0; width:34rem; z-index:1; } .cta-banner__photo { display:block; width:34rem; height:auto; pointer-events:none; user-select:none; } .cta-banner__credit { position:absolute; right:28rem; top:.5rem; margin:0; z-index:3; writing-mode:vertical-rl; font-size:1.15rem; font-weight:500; line-height:2; letter-spacing:.06em; color:rgba(255,255,255,.72); white-space:nowrap; pointer-events:none; } .cta-banner__inner { position:relative; z-index:2; width:100%; text-align:center; } .cta-banner__ttl { font-size:4rem; font-weight:900; letter-spacing:-.03em; line-height:1.45; } .cta-banner__btns { display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; margin-top:4rem; } .cta-banner__btn { display:inline-flex; align-items:center; gap:2.4rem; background:#fff; padding:1.8rem 3.2rem; transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease; } .cta-banner__btn:hover { transform:translateY(-.4rem); box-shadow:0 2rem 4rem rgba(0,0,0,.18); } .cta-banner__btn--gold { background:var(--gold,#C69A5B); } .cta-banner__btn-text { display:flex; flex-direction:column; align-items:flex-start; } .cta-banner__btn-main { font-size:1.8rem; font-weight:800; color:var(--navy); letter-spacing:-.02em; } .cta-banner__btn--gold .cta-banner__btn-main { color:#fff; } .cta-banner__btn-sub { font-size:1.15rem; font-weight:600; color:var(--mute); margin-top:.4rem; } .cta-banner__btn--gold .cta-banner__btn-sub { color:rgba(255,255,255,.85); } .cta-banner__btn i { font-family:"Geist",sans-serif; font-size:1.8rem; font-weight:700; color:var(--navy); } .cta-banner__btn--gold i { color:#fff; } @media screen and (max-width:900px){ .cta-banner { display:flex; flex-direction:column; padding:6rem 2.4rem 0; min-height:0; text-align:center; } .cta-banner__inner { order:1; } .cta-banner__ttl { font-size:2.4rem; } .cta-banner__btns { flex-direction:column; align-items:stretch; margin-top:3rem; } .cta-banner__btn { justify-content:space-between; } .cta-banner__figure { order:2; position:relative; left:auto; right:auto; bottom:auto; width:22rem; margin:3.5rem auto 0; } .cta-banner__photo { width:22rem; } .cta-banner__credit { right:100%; bottom:auto; top:.5rem; margin:0 .3rem 0 0; font-size:.95rem; line-height:1.7; } } /* ============ FAQ（サービス別タブ + アコーディオン） ============ */ .tabs { display:flex; border-bottom:1px solid var(--line); margin-bottom:5rem; } .tabs__b { flex:1; padding:2rem 2.4rem; font-family:inherit; font-size:1.6rem; font-weight:700; color:var(--mute); background:none; border:0; border-bottom:.3rem solid transparent; margin-bottom:-1px; cursor:pointer; transition:color .25s ease, border-color .25s ease; } .tabs__b:hover { color:var(--ink); } .tabs__b[aria-selected="true"] { color:var(--navy); border-bottom-color:var(--accent); } .tabp[hidden] { display:none; } .qa-cat { font-size:1.2rem; font-weight:700; letter-spacing:.14em; color:var(--accent); margin:5rem 0 1.6rem; } .tabp > .qa-cat:first-child { margin-top:0; } .qa-list { border-top:1px solid var(--line); } .qa { border-bottom:1px solid var(--line); } .qa summary { display:flex; gap:1.6rem; align-items:flex-start; padding:2.4rem 5rem 2.4rem 0; position:relative; font-size:1.6rem; font-weight:700; line-height:1.6; color:var(--ink); cursor:pointer; list-style:none; transition:color .2s ease; } .qa summary::-webkit-details-marker { display:none; } .qa summary::before { content:"Q"; font-family:"Geist",sans-serif; font-weight:700; color:var(--accent); flex-shrink:0; } .qa summary::after { content:"＋"; position:absolute; right:.4rem; top:2.4rem; font-size:1.8rem; font-weight:400; color:var(--navy); line-height:1.6; } .qa[open] summary::after { content:"−"; } .qa summary:hover { color:var(--navy); } .qa-a { display:flex; gap:1.6rem; padding:0 5rem 2.8rem 0; } .qa-a::before { content:"A"; font-family:"Geist",sans-serif; font-weight:700; color:var(--mute); flex-shrink:0; } .qa-a p { font-size:1.45rem; line-height:1.95; color:var(--mute); margin:0; } .qa-a a { color:var(--navy); text-decoration:underline; text-underline-offset:.3rem; } @media screen and (max-width:900px){ .tabs { margin-bottom:3.4rem; } .tabs__b { padding:1.6rem .8rem; font-size:1.3rem; } .qa-cat { margin:3.4rem 0 1.2rem; font-size:1.1rem; } .qa summary { padding:1.8rem 3.4rem 1.8rem 0; font-size:1.4rem; gap:1rem; } .qa summary::after { top:1.8rem; right:0; font-size:1.6rem; } .qa-a { padding:0 0 2rem 0; gap:1rem; } .qa-a p { font-size:1.3rem; } } /* ============ フッター ============ */ .ftr { background:var(--darkest); color:rgba(255,255,255,.5); padding:6rem; display:flex; justify-content:space-between; align-items:flex-start; font-size:1.2rem; } .ftr__brand { display:flex; flex-direction:column; align-items:flex-start; gap:2.4rem; } .ftr__project { width:26rem; } .ftr__project-img { display:block; width:100%; height:auto; border-radius:.6rem; } .ftr__project-txt { margin:1rem 0 0; font-size:1.1rem; line-height:1.7; color:rgba(255,255,255,.45); } .ftr__nav { display:flex; gap:3rem; flex-wrap:wrap; align-items:flex-start; } .ftr__nav a:hover { color:#fff; } .ftr__group { display:flex; flex-direction:column; gap:1.2rem; } .ftr__sub { display:flex; flex-direction:column; gap:.9rem; } .ftr__sub a { font-size:1.1rem; opacity:.75; padding-left:1.4rem; position:relative; } .ftr__sub a::before { content:""; position:absolute; left:0; top:.7rem; width:.6rem; height:1px; background:currentColor; } @media screen and (max-width:900px){ .ftr{padding:4rem 2.4rem;flex-direction:column;align-items:flex-start;gap:2.4rem} .ftr__nav{gap:1.6rem} .ftr__brand{gap:2rem} .ftr__project{width:28rem} .ftr__project-txt{font-size:1.15rem} } /* ============ お問い合わせフォーム（Contact Form 7 を独自装飾） ============ */ .contact-wrap { display:grid; grid-template-columns:1fr 1.3fr; gap:8rem; align-items:start; } @media screen and (max-width:900px){ .contact-wrap{grid-template-columns:1fr;gap:4rem} } .lead__t { font-size:2.8rem; font-weight:900; letter-spacing:-.03em; line-height:1.4; margin-bottom:2.4rem; } .alt { margin-top:5rem; border-top:1px solid var(--line); padding-top:4rem; } .alt__k { font-size:1.2rem; font-weight:700; color:var(--mute); letter-spacing:.1em; margin-bottom:1.2rem; } .alt__v { font-family:"Geist",sans-serif; font-size:2rem; font-weight:700; color:var(--navy); } .field { margin-bottom:3.2rem; } .field__l { display:flex; align-items:center; gap:1.2rem; font-size:1.4rem; font-weight:700; margin-bottom:1.2rem; } .req { background:var(--navy); color:#fff; font-size:1rem; font-weight:700; padding:.3rem .8rem; letter-spacing:.05em; } .opt { background:var(--line); color:var(--mute); font-size:1rem; font-weight:700; padding:.3rem .8rem; letter-spacing:.05em; } .si-form input[type=text],.si-form input[type=email],.si-form input[type=tel],.si-form textarea,.si-form select { width:100%; font-family:inherit; font-size:1.5rem; color:var(--ink); border:1px solid var(--line); background:var(--mist); padding:1.8rem 2rem; transition:border-color .3s,background .3s; border-radius:0; -webkit-appearance:none; appearance:none; } .si-form input:focus,.si-form textarea:focus,.si-form select:focus { outline:0; border-color:var(--accent); background:#fff; } .si-form textarea { resize:vertical; min-height:16rem; line-height:1.7; } .si-form select { cursor:pointer; padding-right:5rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235A6B7D' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 2rem center; background-size:1.4rem; } .agree { display:flex; align-items:flex-start; gap:1.4rem; background:var(--mist); border:1px solid var(--line); padding:2.4rem; margin-bottom:3.2rem; font-size:1.4rem; line-height:1.7; } .agree input { width:2rem; height:2rem; margin-top:.2rem; flex-shrink:0; accent-color:var(--navy); } .agree a { color:var(--navy); font-weight:700; text-decoration:underline; } .si-form .wpcf7-submit { background:var(--navy); color:#fff; border:0; font-family:inherit; font-size:1.6rem; font-weight:700; padding:2.2rem 5rem; cursor:pointer; transition:background .3s; } .si-form .wpcf7-submit:hover { background:var(--navy-d); } .si-form .wpcf7-spinner { margin:2rem auto 0; display:block; } .wpcf7-response-output { margin:2rem 0 0!important; padding:1.8rem 2rem!important; font-size:1.4rem; border-width:1px!important; } /* ============ プライバシーポリシー（文書ページ） ============ */ .doc { max-width:96rem; margin:0 auto; padding:12rem 6rem; } @media screen and (max-width:900px){ .doc{padding:8rem 2.4rem} } .doc__lead { font-size:1.6rem; line-height:2; color:var(--mute); letter-spacing:-.02em; margin-bottom:6rem; padding-bottom:6rem; border-bottom:1px solid var(--line); } .doc__item { margin-bottom:5.6rem; } .doc__h { font-size:2.2rem; font-weight:900; letter-spacing:-.03em; margin-bottom:2.4rem; padding-left:2rem; position:relative; line-height:1.4; } .doc__h::before { content:""; position:absolute; left:0; top:.4rem; width:.5rem; height:2.2rem; background:var(--accent); } .doc__item p { font-size:1.5rem; line-height:2; color:#333; letter-spacing:-.02em; margin-bottom:1.6rem; } .doc__item ul { list-style:none; margin:2rem 0; } .doc__item li { font-size:1.5rem; line-height:1.9; color:#333; letter-spacing:-.02em; padding-left:2.4rem; position:relative; margin-bottom:1.2rem; } .doc__item li::before { content:""; position:absolute; left:0; top:1rem; width:.8rem; height:.8rem; background:var(--accent); } .doc__box { background:var(--mist); border:1px solid var(--line); padding:4rem; margin-top:2rem; } .doc__box p { margin-bottom:.8rem; font-size:1.5rem; line-height:1.9; } .doc__rev { font-size:1.3rem; color:var(--mute); margin-top:2rem; } /* ============ 汎用 ============ */ .draft { display:inline-flex; align-items:center; gap:.8rem; background:#FFF4E5; border:1px dashed #E8A33D; color:#8A5A00; font-size:1.2rem; font-weight:700; padding:.8rem 1.6rem; border-radius:.4rem; margin-bottom:2.4rem; } .msg { display:grid; grid-template-columns:1fr 1.5fr; gap:6rem; align-items:start; } .msg__photo { background:var(--mist); border:1px solid var(--line); aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; } @media screen and (max-width:900px){ .msg{grid-template-columns:1fr;gap:3rem} .msg__photo{aspect-ratio:4/3;max-width:60%} } /* ============ MVV（ミッション・ビジョン・バリュー） ============ */ /* ミッション/ビジョンの大見出し（斜体・行マスク） */ .mvv-head { font-size:5rem; font-weight:900; letter-spacing:-.03em; line-height:1.4; color:var(--ink); transform:skewX(-8deg); transform-origin:left bottom; } .a-maskwrap .mvv-head.a-mask { transform:translateY(105%) skewX(-8deg); } .a-maskwrap .mvv-head.a-mask.on { transform:translateY(0) skewX(-8deg); } @media screen and (max-width:900px){ .mvv-head{ font-size:2.8rem; } } /* VALUE 5項目（左揃え・番号インライン・斜体・コンパクト） */ .vals { border-top:1px solid var(--line); } .val { padding:2.2rem 0; border-bottom:1px solid var(--line); } .val__t { display:flex; align-items:baseline; gap:1.6rem; font-size:2.4rem; font-weight:900; letter-spacing:-.03em; line-height:1.3; margin-bottom:.8rem; } .val__n { font-family:"Geist",sans-serif; font-size:2rem; font-weight:900; color:var(--cyan); opacity:.5; line-height:1; flex-shrink:0; } .val__ph { display:inline-block; transform:skewX(-8deg); } .val .p { font-size:1.4rem; } @media screen and (max-width:900px){ .val__t{font-size:2rem;gap:1.2rem} .val__n{font-size:1.7rem} } /* ============================================================ ブログ（LINEマーケ研究所）— 一覧・個別記事 ============================================================ */ /* ---- 一覧：フィルタ（カテゴリ＋検索） ---- */ .blog-filter { display:flex; align-items:center; justify-content:space-between; gap:3rem; padding:5rem 6rem 0; position:sticky; top:0; background:#fff; z-index:20; flex-wrap:wrap; } .blog-cats { display:flex; gap:1.2rem; flex-wrap:wrap; } .blog-cat { font-size:1.3rem; font-weight:700; padding:1.2rem 2.4rem; border:1px solid var(--line); border-radius:100px; color:var(--mute); transition:.3s; } .blog-cat:hover { border-color:var(--navy); color:var(--navy); } .blog-cat.on { background:var(--navy); color:#fff; border-color:var(--navy); } .si-search { position:relative; flex-shrink:0; } .si-search input { width:28rem; font-family:inherit; font-size:1.4rem; color:var(--ink); border:1px solid var(--line); background:var(--mist); padding:1.4rem 4.8rem 1.4rem 2rem; border-radius:100px; transition:.3s; } .si-search input:focus { outline:0; border-color:var(--cyan); background:#fff; } .si-search input::placeholder { color:#9AA5B1; } .si-search button { position:absolute; right:.6rem; top:50%; transform:translateY(-50%); width:3.6rem; height:3.6rem; border:0; background:var(--navy); border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; } .si-search button svg { width:1.6rem; height:1.6rem; stroke:#fff; fill:none; stroke-width:2.4; } @media screen and (max-width:900px){ .blog-filter { padding:3rem 2.4rem 0; flex-direction:column-reverse; align-items:stretch; gap:1.6rem; } .si-search input { width:100%; } .blog-cats { overflow-x:auto; flex-wrap:nowrap; } .blog-cat { white-space:nowrap; font-size:1.2rem; padding:1rem 2rem; } } /* ---- 一覧：記事カード ---- */ .blog-wrap { padding:5rem 6rem 10rem; } .blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4rem 3.2rem; } @media screen and (max-width:900px){ .blog-wrap{padding:4rem 2.4rem 7rem} .blog-grid{grid-template-columns:1fr;gap:4rem} } .pcard { display:flex; flex-direction:column; transition:transform .5s cubic-bezier(.22,1,.36,1); } .pcard:hover { transform:translateY(-.6rem); } .pcard__img { aspect-ratio:16/9; background:var(--mist); border:1px solid var(--line); overflow:hidden; position:relative; } .pcard__img img { width:100%; height:100%; object-fit:cover; } .pcard__ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#B7C2CE; font-size:1.2rem; } .pcard__cat { position:absolute; left:1.4rem; top:1.4rem; background:var(--navy); color:#fff; font-size:1.1rem; font-weight:700; padding:.6rem 1.4rem; z-index:2; } .pcard__body { padding:2.4rem 0 0; } .pcard__date { font-family:"Geist",sans-serif; font-size:1.2rem; color:#9AA5B1; letter-spacing:.04em; } .pcard__ttl { font-size:1.9rem; font-weight:800; line-height:1.5; letter-spacing:-.02em; margin:1.2rem 0 0; transition:color .3s; } .pcard:hover .pcard__ttl { color:var(--navy); } /* ---- ページ送り ---- */ .si-pager { display:flex; justify-content:center; gap:1rem; margin-top:8rem; flex-wrap:wrap; } .si-pager a, .si-pager span { min-width:4.8rem; height:4.8rem; padding:0 1rem; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); font-family:"Geist",sans-serif; font-weight:700; font-size:1.4rem; color:var(--mute); transition:.3s; } .si-pager .current, .si-pager a:hover { background:var(--navy); color:#fff; border-color:var(--navy); } /* ---- 個別記事 ---- */ .ahead { padding:16rem 6rem 4rem; max-width:118rem; margin:0 auto; } .ahead__cat { background:var(--navy); color:#fff; font-size:1.2rem; font-weight:700; padding:.7rem 1.6rem; display:inline-block; } .ahead__ttl { font-size:3.6rem; font-weight:900; line-height:1.5; letter-spacing:-.02em; margin:2.4rem 0 2rem; } .ahead__meta { font-family:"Geist",sans-serif; font-size:1.3rem; color:#9AA5B1; letter-spacing:.04em; } .ahead__img { max-width:118rem; margin:4rem auto 0; aspect-ratio:16/9; background:var(--mist); border:1px solid var(--line); overflow:hidden; } .ahead__img img { width:100%; height:100%; object-fit:cover; } @media screen and (max-width:900px){ .ahead{padding:13rem 2.4rem 3rem} .ahead__ttl{font-size:2.4rem} } /* 本文＋サイドバーの2カラム。minmax(0,1fr) と min-width:0 で SWELL記事でも列が崩れないように */ .abody { max-width:118rem; margin:0 auto; padding:5rem 6rem 8rem; display:grid; grid-template-columns:minmax(0,1fr) 28rem; gap:7rem; } .content { min-width:0; width:100%; } .content > * { max-width:100%; margin-left:0; margin-right:0; } @media screen and (max-width:900px){ .abody{grid-template-columns:1fr;padding:4rem 2.4rem 6rem;gap:0} } /* 目次（冒頭） */ .toc { border:1px solid var(--line); padding:3rem 3.4rem; background:var(--mist); margin:0 0 4.5rem; } .toc__t { font-size:1.4rem; font-weight:800; letter-spacing:.06em; margin-bottom:2rem; padding-left:1.6rem; position:relative; } .toc__t::before { content:""; position:absolute; left:0; top:.3rem; width:.4rem; height:1.6rem; background:var(--cyan); } .toc ol { list-style:none; counter-reset:toc; } .toc li { counter-increment:toc; margin-bottom:1.4rem; font-size:1.4rem; line-height:1.6; } .toc li:last-child { margin-bottom:0; } .toc li a { color:var(--mute); display:flex; gap:1rem; transition:color .3s; } .toc li a::before { content:counter(toc,decimal-leading-zero); font-family:"Geist",sans-serif; font-weight:700; color:var(--cyan); flex-shrink:0; } .toc li a:hover { color:var(--navy); } /* サイドバー */ .side { display:flex; flex-direction:column; gap:4.5rem; } .side-fixed { position:sticky; top:12rem; } .side__t { font-size:1.4rem; font-weight:800; letter-spacing:.06em; margin-bottom:2rem; padding-left:1.6rem; position:relative; } .side__t::before { content:""; position:absolute; left:0; top:.3rem; width:.4rem; height:1.6rem; background:var(--cyan); } .rec { display:flex; flex-direction:column; gap:2.2rem; } .rec a { display:grid; grid-template-columns:9rem 1fr; gap:1.6rem; align-items:center; } .rec a:hover .rec__ttl { color:var(--navy); } .rec__img { aspect-ratio:16/9; background:var(--mist); border:1px solid var(--line); overflow:hidden; } .rec__img img { width:100%; height:100%; object-fit:cover; } .rec__date { font-family:"Geist",sans-serif; font-size:1.1rem; color:#9AA5B1; margin-bottom:.4rem; } .rec__ttl { font-size:1.3rem; font-weight:700; line-height:1.5; transition:color .3s; } .tags { display:flex; flex-wrap:wrap; gap:1rem; } .tags a { font-size:1.2rem; font-weight:600; padding:.8rem 1.6rem; border:1px solid var(--line); border-radius:100px; color:var(--mute); transition:.3s; } .tags a:hover { border-color:var(--navy); color:var(--navy); } .side-banner { display:block; width:100%; border-radius:.8rem; overflow:hidden; transition:transform .4s cubic-bezier(.22,1,.36,1); } .side-banner:hover { transform:translateY(-.4rem); } .side-banner img { width:100%; height:auto; display:block; } .side-cta { background:var(--grad); color:#fff; padding:3rem 2.8rem; border-radius:.8rem; margin-top:2rem; text-align:center; } .side-cta__t { font-size:1.9rem; font-weight:900; letter-spacing:-.02em; line-height:1.4; } .side-cta__p { font-size:1.25rem; opacity:.85; margin:1.2rem 0 2.2rem; line-height:1.7; } .side-cta__btn { display:block; background:var(--cyan); color:#fff!important; font-size:1.4rem; font-weight:700; padding:1.6rem; border-radius:100px; transition:.3s; } .side-cta__btn:hover { background:#fff; color:var(--navy)!important; } @media screen and (max-width:900px){ .side{margin-top:5rem} .side-fixed{position:static;top:auto} } /* 記事本文タイポ */ .content { font-size:1.6rem; line-height:2; color:#2b2b2b; letter-spacing:.01em; } .content > h2 { font-size:2.6rem; font-weight:900; line-height:1.5; letter-spacing:-.02em; color:var(--ink); margin:6rem 0 2.4rem; padding:1.6rem 0 1.6rem 2.4rem; border-left:.5rem solid var(--navy); background:linear-gradient(90deg,var(--mist),transparent); } .content > h3 { font-size:2rem; font-weight:800; line-height:1.5; margin:4.4rem 0 1.8rem; padding-bottom:1.2rem; border-bottom:2px solid var(--line); } /* 本文タイポは「.content の直接の子」だけに限定し、SWELLブロックの中身は SWELL自身のスタイルに任せる（干渉して崩れるのを防ぐ）。 */ .content > p { margin:0 0 2.8rem; } .content > p strong { font-weight:800; color:var(--ink); background:linear-gradient(transparent 60%,rgba(0,166,218,.22) 60%); } .content > p a { color:var(--navy); font-weight:700; text-decoration:underline; text-underline-offset:.3rem; } .content > ul, .content > ol { margin:0 0 2.8rem 0; padding-left:0; list-style:none; } .content > ul > li, .content > ol > li { position:relative; padding-left:3rem; margin-bottom:1.2rem; } .content > ul > li::before { content:""; position:absolute; left:.6rem; top:1.1rem; width:.9rem; height:.9rem; background:var(--cyan); } .content > ol { counter-reset:li; } .content > ol > li { counter-increment:li; } .content > ol > li::before { content:counter(li); position:absolute; left:0; top:.1rem; width:2rem; height:2rem; background:var(--navy); color:#fff; font-family:"Geist",sans-serif; font-size:1.2rem; font-weight:700; border-radius:50%; display:flex; align-items:center; justify-content:center; } .content > blockquote { margin:3.6rem 0; padding:2.8rem 3.2rem; background:var(--mist); border-left:.5rem solid var(--cyan); font-size:1.5rem; color:var(--mute); } .content > figure { margin:3.6rem 0; } .content > figure img, .content > p img { height:auto; } /* シェア */ .share { display:flex; align-items:center; gap:1.6rem; margin:6rem 0 0; padding-top:4rem; border-top:1px solid var(--line); } .share__t { font-size:1.3rem; font-weight:700; color:var(--mute); } .share a { width:4.4rem; height:4.4rem; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.3s; } .share a:hover { background:var(--navy); border-color:var(--navy); } .share a svg { width:1.9rem; height:1.9rem; fill:var(--mute); transition:.3s; } .share a:hover svg { fill:#fff; } /* 記事末CTA */ .acta { background:var(--grad); color:#fff; padding:6rem; position:relative; overflow:hidden; max-width:104rem; margin:6rem auto 0; border-radius:.8rem; } .acta__sym { position:absolute; right:-4rem; bottom:-8rem; width:24rem; opacity:.1; } .acta h3 { font-size:2.6rem; font-weight:900; line-height:1.4; letter-spacing:-.02em; position:relative; } .acta p { font-size:1.4rem; opacity:.85; margin:1.6rem 0 3rem; line-height:1.8; position:relative; } .acta .btn-w { position:relative; } @media screen and (max-width:900px){ .acta{padding:4rem 2.4rem} .acta h3{font-size:2rem} } .si-narrow { max-width:104rem; margin:0 auto; padding:0 6rem; } @media screen and (max-width:900px){ .si-narrow{padding:0 2.4rem} } /* 関連記事 */ .related { background:var(--mist); padding:8rem 6rem; } .related__in { max-width:110rem; margin:0 auto; } .related > .related__in > h2 { font-size:2.8rem; font-weight:900; letter-spacing:-.03em; margin-bottom:4rem; } .rgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:3.2rem; } @media screen and (max-width:900px){ .related{padding:6rem 2.4rem} .rgrid{grid-template-columns:1fr;gap:3rem} } .rcard__img { aspect-ratio:16/9; background:#fff; border:1px solid var(--line); overflow:hidden; position:relative; } .rcard__img img { width:100%; height:100%; object-fit:cover; } .rcard__date { font-family:"Geist",sans-serif; font-size:1.2rem; color:#9AA5B1; margin:1.6rem 0 .8rem; } .rcard__ttl { font-size:1.6rem; font-weight:800; line-height:1.5; }