/* RICE CLOUD TOP モック 共通（2026-11-01）
   WPのテーマに移す前提で、素のCSSだけで組む。クラスは rc- で始める。
   方針：
   - 立原さん「業務システムの会社にしては軽い」→ 紺を地に使い、ロゴの水色は差し色だけにする
   - 箱・札・浮いたカード・矢印・ピルのボタンを使わない。見出し・地の文・罫線・写真で組む
   - 本文の周りに小さい灰色の字を散らさない。本文は16px以上 */

:root {
  --navy: #0e2740;
  --navy-2: #163556;
  --ink: #18212b;
  --ink-2: #44505c;
  --line: #d6dce2;
  --line-dark: rgba(255, 255, 255, .22);
  --paper: #f4f6f8;
  --white: #fff;
  --blue: #2b78c0;          /* ロゴの水色を濃くした差し色。リンクと強調だけに使う */
  --g: clamp(20px, 5vw, 72px);
  --max: 1240px;
  --font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: .02em;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { word-break: auto-phrase; text-wrap: balance; line-break: strict; } /* 見出しは文節で折る（Chrome）。WPでも同じ指定を使う */
h1 { text-wrap: wrap; } /* h1は<br>で区切りを決める */

.rc-wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--g); }
.rc-sec { padding: clamp(72px, 9vw, 128px) 0; }
.rc-sec--paper { background: var(--paper); }
.rc-sec--navy { background: var(--navy); color: var(--white); }

.rc-h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: .03em;
}
.rc-lead { margin-top: 20px; max-width: 760px; font-size: 17px; color: var(--ink-2); }
.rc-sec--navy .rc-lead { color: rgba(255, 255, 255, .78); }

/* ボタン：平らな面か、下線のリンク */
.rc-btn {
  display: inline-block;
  padding: 18px 36px;
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border-radius: 2px;
}
.rc-btn:hover { background: #1f6aae; }
.rc-btn--white { background: var(--white); color: var(--navy); }
.rc-btn--white:hover { background: #e9eef3; }
.rc-link { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.rc-sec--navy .rc-link { color: var(--white); }

/* ヘッダー */
.rc-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.rc-header__in {
  display: flex; align-items: center; gap: 32px;
  max-width: none; height: 76px; padding: 0 var(--g);
}
.rc-header__logo img { height: 34px; width: auto; }
.rc-header__nav { display: flex; gap: 28px; margin-left: auto; font-size: 15px; font-weight: 500; }
.rc-header__nav a { text-decoration: none; }
.rc-header__nav a:hover { color: var(--blue); }
.rc-header__tel { font-size: 15px; font-weight: 700; white-space: nowrap; }
.rc-header .rc-btn { padding: 12px 22px; font-size: 15px; }

/* パートナーの表記（本番はDriveの NS24_Partner-Lockups_Alliance に差し替える） */
.rc-partner { display: flex; align-items: center; gap: 18px; }
.rc-partner img { height: 46px; width: auto; }
.rc-partner__txt { font-size: 15px; font-weight: 700; line-height: 1.5; padding-left: 18px; border-left: 1px solid currentColor; }
.rc-partner--white img { filter: brightness(0) invert(1); }

/* 実績の数字：大きい数字を本文の大きさの言葉で受ける。小さい灰色のラベルは置かない */
.rc-facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.rc-facts > div { padding: 28px 24px 0 0; border-right: 1px solid var(--line); margin-right: 24px; }
.rc-facts > div:last-child { border-right: 0; margin-right: 0; }
.rc-facts b { display: block; white-space: nowrap; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1; font-weight: 700; letter-spacing: .01em; }
.rc-facts span { display: block; margin-top: 10px; font-size: 16px; }
.rc-sec--navy .rc-facts, .rc-sec--navy .rc-facts > div { border-color: var(--line-dark); }

/* 事例の行（カードのグリッドにしない） */
.rc-cases { margin-top: 48px; border-top: 1px solid var(--line); }
.rc-case {
  display: grid; grid-template-columns: 280px 1fr; gap: 36px;
  padding: 32px 0; border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.rc-case img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.rc-case__who { font-size: 15px; font-weight: 700; color: var(--blue); }
.rc-case h3 { margin-top: 6px; font-size: 21px; line-height: 1.6; }
.rc-case p { margin-top: 10px; color: var(--ink-2); }
.rc-case:hover h3 { text-decoration: underline; text-underline-offset: 5px; }

/* 代表 */
.rc-pres { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.rc-pres img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.rc-pres__name { margin-top: 28px; font-weight: 700; }

/* スガワラくんレーシング */
.rc-race { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.rc-race img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* お知らせ */
.rc-news { margin-top: 32px; border-top: 1px solid var(--line); }
.rc-news a { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.rc-news a:hover span:last-child { text-decoration: underline; }
.rc-news time { color: var(--ink-2); }

/* 最後の相談の帯 */
.rc-cta { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: end; }
.rc-cta ul { margin: 24px 0 0; padding: 0; list-style: none; }
.rc-cta li { padding: 12px 0; border-bottom: 1px solid var(--line-dark); }
.rc-cta__btns { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.rc-cta__tel { font-size: 28px; font-weight: 700; letter-spacing: .04em; }

/* フッター */
.rc-footer { background: #0a1d31; color: rgba(255, 255, 255, .8); padding: 64px 0 40px; font-size: 15px; }
.rc-footer__in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.rc-footer img { height: 34px; width: auto; filter: brightness(0) invert(1); }
.rc-footer h4 { margin: 0 0 12px; color: var(--white); font-size: 15px; }
.rc-footer ul { margin: 0; padding: 0; list-style: none; }
.rc-footer li { padding: 4px 0; }
.rc-footer a { text-decoration: none; }
.rc-footer a:hover { text-decoration: underline; }
.rc-footer__copy { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-dark); }

/* モックの注記（本番では消す） */
.mock-note {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  max-width: 340px; padding: 14px 16px;
  background: #fffbe6; color: #3a3000; border: 1px solid #e6d27a;
  font-size: 14px; line-height: 1.7;
}
.mock-note b { display: block; }

/* スマホ（900px以下）はここに1か所でまとめる */
@media (max-width: 900px) {
  body { font-size: 16px; }
  .rc-header__nav, .rc-header__tel { display: none; }
  .rc-header__in { height: 64px; }
  .rc-header .rc-btn { margin-left: auto; padding: 10px 14px; font-size: 14px; white-space: nowrap; }
  .rc-facts { grid-template-columns: 1fr 1fr; }
  .rc-facts > div { margin-right: 0; padding-right: 12px; border-right: 0; padding-bottom: 20px; }
  .rc-case { grid-template-columns: 1fr; gap: 16px; }
  .rc-pres, .rc-race, .rc-cta { grid-template-columns: 1fr; }
  .rc-news a { grid-template-columns: 1fr; gap: 2px; }
  .rc-footer__in { grid-template-columns: 1fr 1fr; }
  .mock-note { left: 16px; right: 16px; max-width: none; }
}

/* ===== 002：FVをトレカン（FCE）の作りにする（2026-11-01 清水さん指示）=====
   キャッチコピー＋写真のFVをやめる。FVに困りごと（事例・状況）のカードを散らし、
   見た人が「自分のはこれだ」と選ぶところまでをFVの中で起こす。中央は選び方の案内だけ。
   写真はAI生成を使わない。Canvaから取った写真を .ph の場所に入れる */

.fv-board {
  position: relative;
  height: max(700px, min(860px, calc(100svh - 76px)));
  background: linear-gradient(180deg, #eef2f6 0%, #f7f9fb 60%, #eef2f6 100%);
  overflow: hidden;
}
.fv-board__bg { position: absolute; inset: 0; }
.fv-board__bg .ph { background: none; align-items: flex-end; justify-content: flex-start; padding: 16px var(--g); color: #8a96a3; }
.fv-board__center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, 44%); text-align: center; z-index: 2;
}
.fv-board__center p { font-size: 16px; color: var(--ink-2); }
.fv-board__center h1 { margin-top: 10px; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.6; font-weight: 700; color: var(--navy); }
.fv-board__center h1 em { font-style: normal; background: linear-gradient(transparent 62%, #bfe0f7 62%); }
.fv-board__center .rc-partner { justify-content: center; margin-bottom: 18px; }

.pcard {
  position: absolute; left: var(--x); top: var(--y); z-index: 3;
  width: 330px; min-height: 140px;
  padding: 20px 108px 18px 22px;
  background: var(--white); color: var(--ink);
  border: 1.5px solid var(--navy);
  box-shadow: 6px 6px 0 var(--navy);
  transform: rotate(var(--r, 0deg));
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.pcard:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 8px 10px 0 var(--blue); }
.pcard__txt { font-size: 17px; font-weight: 700; line-height: 1.6; }
.pcard__go { display: block; width: fit-content; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.pcard__who { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.pcard__img { position: absolute; right: -16px; bottom: 0; width: 116px; height: 168px; }

/* Canvaの写真を入れる場所（仮）。中の文字はCanvaで探す時の言葉 */
.ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(45deg, #dde4eb 0 10px, #e6ecf1 10px 20px);
  color: #4a5866; font-size: 12px; font-weight: 700; line-height: 1.5; padding: 8px;
  width: 100%; height: 100%;
}
.ph--cut { background: repeating-linear-gradient(45deg, rgba(14,39,64,.10) 0 8px, rgba(14,39,64,.04) 8px 16px); border-radius: 60px 60px 0 0; }

/* FVのすぐ下：事例の帯とお知らせ（トレカンの「新着ストーリー」＋NEWSの位置） */
.fv-strip { background: var(--white); border-top: 1px solid var(--line); }
.fv-strip__in { display: flex; align-items: center; gap: 24px; padding: 18px var(--g); overflow-x: auto; }
.fv-strip__ttl { flex: none; font-weight: 700; color: var(--navy); }
.fv-strip a { flex: none; display: grid; grid-template-columns: 96px auto; gap: 12px; align-items: center; text-decoration: none; font-size: 14px; font-weight: 700; line-height: 1.5; max-width: 300px; }
.fv-strip a .ph, .fv-strip a img { width: 96px; height: 64px; object-fit: cover; }
.fv-news { background: var(--navy); color: var(--white); }
.fv-news__in { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; padding: 20px var(--g); }
.fv-news__in b { font-size: 22px; letter-spacing: .08em; }
.fv-news__in ul { margin: 0; padding: 0; list-style: none; }
.fv-news__in li { padding: 3px 0; }
.fv-news__in a { text-decoration: none; }
.fv-news__in a:hover { text-decoration: underline; }
.fv-news__in time { display: inline-block; width: 110px; color: rgba(255,255,255,.7); }

@media (max-width: 1100px) {
  .fv-board { height: auto; padding: 40px 0 32px; }
  .fv-board__center { position: static; transform: none; width: auto; padding: 0 var(--g); }
  .fv-board__cards { display: flex; gap: 18px; overflow-x: auto; padding: 32px var(--g) 18px; scroll-snap-type: x mandatory; }
  .pcard { position: relative; left: auto; top: auto; flex: none; width: 290px; transform: none; scroll-snap-align: start; }
  .fv-news__in { grid-template-columns: 1fr; gap: 8px; }
}

/* ===== 004：3案に共通の直し（2026-11-01 要望との比較表より）=====
   1 NetSuite Alliance Partner の正式ロゴ（Drive【011】サイト改修/ロゴ。小林さん「APロゴ使ってよい」）
   2 オイシル様の事例を代表の写真とロゴで大きく（立原さん「顔出しなのでトップで目立たせたい」）
   3 YouTubeの段（小林さん「トップの目立つ場所に導線を」10/28） */
.rc-ap { display: block; height: 76px; width: auto; }
.rc-ap--s { height: 52px; }

.rc-oi { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.rc-oi__photo { position: relative; }
.rc-oi__photo > img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.rc-oi__logo { position: absolute; right: -28px; bottom: -22px; padding: 12px 16px; background: #fff; border: 1.5px solid var(--navy); box-shadow: 6px 6px 0 var(--navy); }
.rc-oi__logo img { display: block; height: 34px; width: auto; }
.rc-oi__tag { display: inline-block; padding: 4px 12px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; }
.rc-oi h3 { margin-top: 14px; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.45; color: var(--navy); }
.rc-oi__who { margin-top: 10px; font-weight: 700; }
.rc-oi__num { margin-top: 24px; display: flex; align-items: baseline; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rc-oi__num b { font-size: clamp(36px, 4vw, 52px); line-height: 1; color: var(--blue); }
.rc-oi__more { display: inline-block; margin-top: 20px; color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }

.rc-yt__grid { margin-top: 40px; display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(24px, 3vw, 40px); align-items: start; }
.rc-yt__main, .rc-yt__list a, .rc-yt__shorts a { display: block; text-decoration: none; color: inherit; }
.rc-yt__thumb { position: relative; display: block; background: #000; }
.rc-yt__thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.rc-yt__thumb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; translate: -50% -50%; border-radius: 12px; background: #e62117 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='white'/%3E%3C/svg%3E") center / 30px no-repeat; }
.rc-yt__main b { display: block; margin-top: 14px; font-size: 19px; line-height: 1.5; }
.rc-yt__list { display: grid; gap: 18px; }
.rc-yt__list a { display: grid; grid-template-columns: 168px 1fr; gap: 14px; align-items: start; font-size: 15px; font-weight: 700; line-height: 1.55; }
.rc-yt__list .rc-yt__thumb::after { width: 40px; height: 28px; border-radius: 8px; background-size: 18px; }
.rc-yt__shorts-ttl { margin-top: 48px; font-size: 19px; font-weight: 700; }
.rc-yt__shorts { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rc-yt__shorts .rc-yt__thumb img { aspect-ratio: 9 / 14; }
.rc-yt__shorts .rc-yt__thumb::after { width: 44px; height: 32px; border-radius: 9px; background-size: 20px; }
.rc-yt__shorts span { display: block; margin-top: 10px; font-size: 14px; font-weight: 700; line-height: 1.55; }
.rc-yt__ch { margin-top: 36px; display: flex; align-items: center; gap: 16px; }
.rc-yt__ch img { height: 28px; width: auto; }
@media (max-width: 900px) {
  .rc-oi, .rc-yt__grid { grid-template-columns: 1fr; }
  .rc-oi__photo { max-width: 340px; }
  .rc-yt__shorts { grid-template-columns: 1fr 1fr; }
}