@charset "utf-8";
/* ============================================================
otocon.jp リニューアルCSS — TOP / SP / A案
対象: https://www.otocon.jp/s/
配信: タグマネージャーで既存CSSより後に注入
画像: このCSSと同じ階層の img/ に配置(相対パス参照)
デザイン: Figma「otoconリニューアル」⭕️確認 > A (node 500:2020)
============================================================ */
/* ------------------------------------------------------------
デザイントークン
------------------------------------------------------------ */
:root {
--otc-red: #cf201d; /* メインの赤 */
--otc-orange: #eb7d24; /* アクセントのオレンジ */
--otc-text: #333333; /* 基本テキスト */
--otc-gray: #979797; /* 注釈グレー */
--otc-line: #e2e2e2; /* カード枠線 */
--otc-bg: #f8f8f8; /* ページ背景 */
--otc-bg-warm: #fdf8f5; /* ページトップバー背景 */
--otc-blue: #0060d9; /* 男性系 */
--otc-blue-bg: #e9f3fc;
--otc-price-red: #ea2210; /* 女性系・価格 */
--otc-pink-bg: #fdeff2;
--otc-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
"Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
--otc-font-en: Avenir, "Avenir Next", Futura, "Helvetica Neue", sans-serif; /* 欧文・数字 */
}
body {
background: var(--otc-bg);
}
body #container {
padding-top: 60px; /* 30(上段) + 60(ヘッダー) */
}
/* ------------------------------------------------------------
Header: 下段バー(60px)
ハンバーガー(左・赤) + OTOCONロゴ(中央・テキスト化)
------------------------------------------------------------ */
.global-header {
top: 0px;
height: 60px;
padding: 0 20px;
background: #fff;
}
/* ------------------------------------------------------------
Header: 上段バー(30px) ※SP-TOP A案と同一デザイン
既存の .oshirase-sp-head(画像バナー)を料金訴求バーに転用。
------------------------------------------------------------ */
.oshirase-sp-head {
display:none;
}
.breadcrumbs{
display:none;
}
/* ------------------------------------------------------------
Header: 下段バー(60px)
ハンバーガー(左・赤) + OTOCONロゴ(中央・テキスト化)
------------------------------------------------------------ */
.global-header {
top: 0px;
height: 60px;
padding: 0 20px;
background: #fff;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.04);
}
/* ハンバーガー: 赤・22x16px
SVG(