/* Start custom CSS for html, class: .elementor-element-3e420b5 *//*
======================================================================
CUDIORA THINK STOCK
WordPress／Elementor用 CSS
日本語コメント付き・全修正保持版
======================================================================
【重要】
このCSSは、直前の完成版に含まれていた指定を削除せず、
そのまま保持したうえで、日本語の案内を追加したものです。
今回のページ順序は次のとおりです。
00 / SEARCH
01 / PURPOSE
記事一覧
WHAT THIS SITE PROVES
【現在の主な仕様】
・CUDIORA本体のヘッダーを使用
・THINK STOCK独自ヘッダーは使用しない
・THINK STOCKの位置は、ずらした現在位置のまま
・by CUDIORAと黒い説明カードは左揃え
・黒い説明カードは不透明な黒
・説明カード左側に赤い縦線
・PURPOSEの見出しを縮小
・WHAT THIS SITE PROVESの見出しを縮小
・通常本文を少し太く設定
・SEARCHをPURPOSEより上へ配置
・SEARCH全体をPC／スマートフォンで固定
・検索カテゴリを一行表示
・スマートフォンではカテゴリを横スライド
・検索カテゴリごとに異なる淡い背景色
・記事カードにnote記事の見出し画像を表示
・PC／スマートフォンの余白を調整
【注意】
00 / SEARCH、01 / PURPOSEという文字と配置順はHTML側で管理します。
CSSだけを差し替えても、番号やセクション順は変わりません。
======================================================================
*/
#cts-app {
/* サイト全体で使う色を変数としてまとめる */
--ink: #161817;
--paper: #f4f2ec;
--line: rgba(22, 24, 23, .18);
--muted: #6f736f;
--dark: #171918;
--accent: #b69a62;
/* Elementorの親幅を超えて画面いっぱいに広げる */
width: 100vw;
margin-left: calc(50% - 50vw);
/* 横方向にはみ出した要素を隠す */
overflow: hidden;
/* ページ全体の背景色と文字色 */
background: #fff;
color: var(--ink);
/* 日本語と英字の基本フォント */
font-family:
Arial,
"Hiragino Kaku Gothic ProN",
"Yu Gothic",
sans-serif;
/* 本文の基本行間 */
line-height: 1.8;
}
/* すべての要素で余白計算を安定させる */
#cts-app * {
box-sizing: border-box;
}
/* ページ内リンクは親要素の文字色を引き継ぐ */
#cts-app a {
color: inherit;
}
/* ページ内の最大横幅と左右余白 */
#cts-app .cts-container {
width: min(100%, 1240px);
margin: auto;
padding: 0 clamp(20px, 4vw, 56px);
}
/* =====================================================
02. ヒーローエリア
===================================================== */
#cts-app .cts-hero {
/* 背景装飾と文字を重ねるための基準 */
position: relative;
isolation: isolate;
/* ヒーローの最低高さ */
min-height: 760px;
/* 背景装飾が読み込めない場合の色 */
background: #d9d6ce;
}
#cts-app .cts-hero-art {
position: absolute;
inset: 0;
z-index: -2;
background-image: url("https://cudiora.com/wp-content/uploads/2026/07/contents_stock002.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* 背景の上に暗いグラデーションを重ね、文字を読みやすくする */
#cts-app .cts-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(
90deg,
rgba(13, 15, 14, .85),
rgba(13, 15, 14, .52) 43%,
rgba(13, 15, 14, .08)
);
}
/* ヒーロー内部の最大幅と余白 */
#cts-app .cts-hero-inner {
position: relative;
width: min(100%, 1440px);
min-height: 760px;
margin: auto;
padding: 90px clamp(22px, 6vw, 90px) 70px;
color: #fff;
}
/* 英字ラベル類の共通設定 */
#cts-app .cts-kicker,
#cts-app .cts-live,
#cts-app .cts-eyebrow,
#cts-app .cts-label {
font-size: 10px;
letter-spacing: .2em;
font-weight: 700;
}
/* ヒーロー右上のLIVE表示 */
#cts-app .cts-live {
position: absolute;
right: clamp(22px, 6vw, 90px);
top: 95px;
}
/* 大型タイトル上の説明文字 */
#cts-app .cts-eyebrow {
margin-top: 92px;
margin-bottom: 34px;
}
/* THINK STOCKの大型タイトル */
#cts-app .cts-hero h1 {
display: flex;
flex-direction: column;
margin: 0;
font-size: clamp(76px, 11vw, 160px);
font-weight: 300;
line-height: .77;
letter-spacing: -.07em;
}
/* STOCKだけ少し右へずらす */
#cts-app .cts-hero h1 span:last-child {
margin-left: clamp(42px, 8vw, 130px);
}
/* by CUDIORAの位置と文字設定 */
#cts-app .cts-byline {
margin-left: clamp(44px, 8vw, 135px);
font-size: 11px;
letter-spacing: .18em;
}
/* ヒーロー右下の説明ボックス */
#cts-app .cts-hero-copy {
width: min(520px, 47%);
margin: 68px 0 0 auto;
padding: 26px 28px;
/* 半透明の黒背景 */
background: rgba(17, 19, 18, .46);
/* 背景をわずかにぼかす */
backdrop-filter: blur(3px);
}
/* ヒーロー説明文 */
#cts-app .cts-hero-copy p {
margin: 0 0 18px;
font-size: 14px;
line-height: 2;
}
/* ヒーロー内の詳細リンク */
#cts-app .cts-hero-copy a {
font-size: 11px;
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 3px;
}
/* =====================================================
03. PURPOSE／サイト説明エリア
===================================================== */
#cts-app .cts-intro {
padding: 130px 0;
background: var(--paper);
}
/* 左に番号、右に本文を置く2カラム */
#cts-app .cts-intro-grid,
#cts-app .cts-proof-grid {
display: grid;
grid-template-columns: 220px 1fr;
gap: 80px;
}
/* PURPOSEと最終メッセージの大型見出し */
#cts-app .cts-intro h2,
#cts-app .cts-proof h2 {
margin: 0 0 38px;
font-size: clamp(38px, 5vw, 72px);
font-weight: 400;
line-height: 1.32;
letter-spacing: -.045em;
}
/* PURPOSEの本文 */
#cts-app .cts-intro p:last-child {
max-width: 780px;
font-size: 17px;
line-height: 2.15;
}
/* =====================================================
04. 検索・テーマ絞り込みエリア
===================================================== */
#cts-app .cts-search {
padding: 90px 0;
background: #fff;
/* 上下に細い境界線を表示 */
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
/* SEARCH番号と見出しを左右に配置 */
#cts-app .cts-search-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 46px;
}
/* 「考え方を探す」の見出し */
#cts-app .cts-search-head h2 {
margin: 0;
font-size: 38px;
font-weight: 400;
}
/* 検索入力欄、CLEAR、矢印を横並びにする */
#cts-app .cts-search-line {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 18px;
align-items: center;
padding-bottom: 15px;
border-bottom: 1px solid var(--ink);
}
/* 検索入力欄 */
#cts-app .cts-search-line input {
width: 100%;
border: 0;
outline: 0;
background: transparent;
font-size: 22px;
}
/* CLEARボタン */
#cts-app .cts-search-line button {
border: 0;
background: transparent;
font-size: 9px;
letter-spacing: .15em;
cursor: pointer;
}
/* テーマボタン群 */
#cts-app .cts-filter-list {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 30px;
}
/* 個々のテーマボタン */
#cts-app .cts-filter {
padding: 9px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: #f2efe7;
font-size: 11px;
cursor: pointer;
}
/* テーマボタンのホバー時と選択中 */
#cts-app .cts-filter:hover,
#cts-app .cts-filter.is-active {
background: var(--dark);
color: #fff;
}
/* =====================================================
05. 思想インデックス
===================================================== */
#cts-app .cts-index {
padding: 120px 0;
background: var(--paper);
}
/* インデックス見出しの左右配置 */
#cts-app .cts-index-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 30px;
margin-bottom: 54px;
}
/* 「思想を辿るための断片」の見出し */
#cts-app .cts-index-head h2 {
margin: 10px 0 0;
font-size: 50px;
font-weight: 400;
}
/* 右側のTITLE / THEME / KEY POINTS */
#cts-app .cts-index-head > p {
font-size: 9px;
letter-spacing: .18em;
color: var(--muted);
}
/* カード一覧をPCでは2列にする */
#cts-app .cts-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
border-top: 1px solid var(--line);
}
/* 各思想カード */
#cts-app .cts-card {
display: flex;
flex-direction: column;
/* カードの高さをある程度揃える */
min-height: 470px;
padding: 42px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
/* 右列カードの右側境界線を消す */
#cts-app .cts-card:nth-child(even) {
border-right: 0;
}
/* カード上部の番号と日付 */
#cts-app .cts-card-meta {
display: flex;
justify-content: space-between;
margin-bottom: 28px;
font-size: 9px;
letter-spacing: .16em;
color: var(--muted);
}
/* カードタイトル */
#cts-app .cts-card h3 {
margin: 0 0 23px;
font-size: 27px;
line-height: 1.55;
font-weight: 700;
letter-spacing: -.02em;
}
/* タグ一覧 */
#cts-app .cts-tags {
display: flex;
flex-wrap: wrap;
gap: 7px 12px;
margin-bottom: 25px;
}
/* 個々のタグ */
#cts-app .cts-tags span {
font-size: 10px;
color: var(--muted);
font-weight: 700;
}
/* タグの前に小さな丸印を表示 */
#cts-app .cts-tags span::before {
content: "•";
color: var(--accent);
margin-right: 5px;
}
/* 重要項目の箇条書き */
#cts-app .cts-card ul {
margin: 0 0 28px;
padding-left: 1.2em;
font-size: 14px;
}
/* 箇条書き同士の間隔 */
#cts-app .cts-card li + li {
margin-top: 7px;
}
/* カード下部右端の「noteで原文を読む」 */
#cts-app .cts-card > a {
/* カード下端まで押し下げる */
margin-top: auto;
/* カード右端へ寄せる */
align-self: flex-end;
/* 右端に少し余白を残す */
margin-right: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-decoration: none;
}
/* JavaScriptで検索対象外になったカードを隠す */
#cts-app .cts-card.is-hidden {
display: none;
}
/* 検索結果が0件の場合の表示 */
#cts-app .cts-empty {
padding: 40px;
text-align: center;
border: 1px solid var(--line);
}
/* =====================================================
06. WHAT THIS SITE PROVES
===================================================== */
#cts-app .cts-proof {
padding: 145px 0;
background: var(--dark);
color: #fff;
}
/* 最終メッセージ左側の英字ラベル */
#cts-app .cts-proof .cts-label {
color: rgba(255, 255, 255, .55);
}
/* 最終メッセージの大型見出し */
#cts-app .cts-proof h2 {
font-size: clamp(42px, 6vw, 82px);
font-weight: 300;
}
/* 最終メッセージ本文 */
#cts-app .cts-proof p {
max-width: 760px;
color: rgba(255, 255, 255, .73);
font-size: 16px;
line-height: 2.2;
}
/* =====================================================
07. フッター
===================================================== */
#cts-app .cts-footer {
padding: 95px 0;
background: #dedbd2;
}
/* フッター左側と右側を横並びにする */
#cts-app .cts-footer-grid {
display: flex;
align-items: end;
justify-content: space-between;
gap: 50px;
}
/* フッターのTHINK STOCK */
#cts-app .cts-footer-title {
display: flex;
flex-direction: column;
margin: 0;
font-size: clamp(60px, 8vw, 110px);
font-weight: 300;
line-height: .8;
letter-spacing: -.06em;
}
/* STOCKだけ少し右へずらす */
#cts-app .cts-footer-title span:last-child {
margin-left: 60px;
}
/* フッター右側を右揃えにする */
#cts-app .cts-footer-copy {
text-align: right;
}
/* フッター右側の英字メッセージ */
#cts-app .cts-footer-copy p {
font-size: 22px;
line-height: 1.45;
}
/* noteへのリンク */
#cts-app .cts-footer-copy a {
display: inline-block;
margin: 18px 0 32px;
font-size: 10px;
letter-spacing: .15em;
}
/* 著作権表示 */
#cts-app .cts-footer-copy small {
display: block;
font-size: 9px;
letter-spacing: .14em;
}
/* =====================================================
08. スマートフォン表示
画面幅760px以下で適用
===================================================== */
@media (max-width: 760px) {
/* -----------------------------------------
スマホ用ヒーロー
----------------------------------------- */
#cts-app .cts-hero,
#cts-app .cts-hero-inner {
min-height: 700px;
}
/* ヒーロー上部の余白 */
#cts-app .cts-hero-inner {
padding-top: 70px;
}
/* LIVE表示の位置 */
#cts-app .cts-live {
top: 72px;
}
/* 大型タイトル上の説明位置 */
#cts-app .cts-eyebrow {
margin-top: 95px;
}
/* スマホ用THINK STOCKタイトルサイズ */
#cts-app .cts-hero h1 {
font-size: clamp(70px, 22vw, 94px);
}
/* スマホではSTOCKのずらし幅を小さくする */
#cts-app .cts-hero h1 span:last-child {
margin-left: 24px;
}
/* ヒーロー説明ボックスを画面幅いっぱいにする */
#cts-app .cts-hero-copy {
width: 100%;
margin-top: 90px;
}
/* -----------------------------------------
スマホ用セクション余白
----------------------------------------- */
#cts-app .cts-intro,
#cts-app .cts-index,
#cts-app .cts-proof {
padding: 80px 0;
}
/* PURPOSEと最終メッセージを1列にする */
#cts-app .cts-intro-grid,
#cts-app .cts-proof-grid {
grid-template-columns: 1fr;
gap: 28px;
}
/* 大型見出しをスマホ向けに縮小する */
#cts-app .cts-intro h2,
#cts-app .cts-proof h2 {
font-size: 38px;
}
/* -----------------------------------------
スマホ用検索エリア
----------------------------------------- */
#cts-app .cts-search-head {
display: block;
}
#cts-app .cts-search-head h2 {
margin-top: 8px;
font-size: 28px;
}
/* スマホでは検索欄とCLEARだけを表示する */
#cts-app .cts-search-line {
grid-template-columns: 1fr auto;
}
/* 検索欄右端の矢印を非表示にする */
#cts-app .cts-search-line > span {
display: none;
}
/* -----------------------------------------
スマホ用思想インデックス
----------------------------------------- */
#cts-app .cts-index-head {
display: block;
}
#cts-app .cts-index-head h2 {
font-size: 34px;
}
/* 右側のTITLE / THEME / KEY POINTSを非表示 */
#cts-app .cts-index-head > p {
display: none;
}
/* カード一覧を1列にする */
#cts-app .cts-cards {
grid-template-columns: 1fr;
}
/* スマホ用カード余白 */
#cts-app .cts-card,
#cts-app .cts-card:nth-child(even) {
min-height: auto;
padding: 34px 4px;
border-right: 0;
}
/* カードタイトルをスマホ向けに縮小 */
#cts-app .cts-card h3 {
font-size: 22px;
}
/* -----------------------------------------
スマホ用フッター
----------------------------------------- */
#cts-app .cts-footer-grid {
display: block;
}
/* フッター右側を左揃えに変更 */
#cts-app .cts-footer-copy {
margin-top: 70px;
text-align: left;
}
}
/* =====================================================
記事カードの見出し画像
===================================================== */
/*
各note記事に設定されている正式な見出し画像を表示する。
HTML側では各カード内に次の構造を追加している。
*/
#cts-app .cts-card-image {
/* カード本文との間隔 */
margin: 0 0 28px;
/* noteの見出し画像に近い横長比率 */
aspect-ratio: 1.91 / 1;
/* 画像のはみ出しを隠す */
overflow: hidden;
/* 画像読み込み前の背景色 */
background: #e4e1d8;
}
/* カード内の見出し画像 */
#cts-app .cts-card-image img {
display: block;
width: 100%;
height: 100%;
/*
画像枠いっぱいに表示する。
元画像の縦横比が異なる場合は中央基準で少し切り取る。
*/
object-fit: cover;
object-position: center;
/* 画像の拡大縮小を滑らかにする */
transition: transform .45s ease;
}
/* カードにマウスを乗せたとき、画像をわずかに拡大する */
#cts-app .cts-card:hover .cts-card-image img {
transform: scale(1.025);
}
/* スマートフォンでは画像とタイトルの間隔を少し狭める */
@media (max-width: 760px) {
#cts-app .cts-card-image {
margin-bottom: 22px;
}
}
/* =====================================================
追加調整：2026-07
ヒーローカード、見出し、本文、検索テーマ、
スマートフォン固定検索バー
===================================================== */
/* -----------------------------------------------------
ページ全体の通常説明文を少し太くする
----------------------------------------------------- */
/*
見出し、英字ラベル、ボタンを除く通常文章の太さ。
400が標準、500が少し太め。
*/
#cts-app p,
#cts-app li {
font-weight: 500;
}
/* 英字ラベルや補助表示は従来どおり強めにする */
#cts-app .cts-label,
#cts-app .cts-kicker,
#cts-app .cts-live,
#cts-app .cts-eyebrow,
#cts-app .cts-card-meta {
font-weight: 700;
}
/* -----------------------------------------------------
ヒーロー内の黒い説明カード
----------------------------------------------------- */
#cts-app .cts-hero-copy {
/*
THINK STOCKの下へ左揃えで配置する。
右寄せに戻す場合は margin-left:auto; を使う。
*/
width: min(600px, 72%);
margin: 38px 0 0 clamp(44px, 8vw, 135px);
/* 完全に不透明な黒 */
background: #111312;
/* 左端の赤い縦バー */
border-left: 7px solid #d53b31;
/* カード内の余白 */
padding: 28px 32px 26px;
/* 不透明背景なのでぼかしは不要 */
backdrop-filter: none;
}
/* 黒い説明カードの本文 */
#cts-app .cts-hero-copy p {
margin: 0 0 18px;
/* 従来より少し大きく、太くする */
font-size: 17px;
font-weight: 700;
line-height: 1.9;
}
/* 「詳細はこちら」のリンク */
#cts-app .cts-hero-copy a {
font-size: 13px;
font-weight: 700;
}
/* -----------------------------------------------------
PURPOSEとWHAT THIS SITE PROVESの見出し
----------------------------------------------------- */
/* PURPOSEの大型見出しを少し小さくする */
#cts-app .cts-intro h2 {
font-size: clamp(32px, 3.7vw, 54px);
line-height: 1.42;
}
/* WHAT THIS SITE PROVESの大型見出しを少し小さくする */
#cts-app .cts-proof h2 {
font-size: clamp(34px, 4.2vw, 60px);
line-height: 1.4;
}
/* -----------------------------------------------------
PC表示：PURPOSEとSEARCHの上下余白を狭くする
----------------------------------------------------- */
@media (min-width: 761px) {
#cts-app .cts-intro {
padding: 82px 0;
}
#cts-app .cts-search {
padding: 58px 0 64px;
}
/* PURPOSEの左右カラム間隔も少し狭くする */
#cts-app .cts-intro-grid {
grid-template-columns: 180px 1fr;
gap: 52px;
}
}
/* -----------------------------------------------------
検索テーマボタンを淡い色で色分け
----------------------------------------------------- */
/* 共通形状 */
#cts-app .cts-filter {
border-color: rgba(22, 24, 23, .12);
font-weight: 700;
transition:
transform .2s ease,
background-color .2s ease,
color .2s ease;
}
/* 各テーマを異なる淡色にする */
#cts-app .cts-filter:nth-child(1) { background: #ece9e1; }
#cts-app .cts-filter:nth-child(2) { background: #e7eef4; }
#cts-app .cts-filter:nth-child(3) { background: #ece8f3; }
#cts-app .cts-filter:nth-child(4) { background: #e5f0ec; }
#cts-app .cts-filter:nth-child(5) { background: #f2eadf; }
#cts-app .cts-filter:nth-child(6) { background: #f4e7e8; }
#cts-app .cts-filter:nth-child(7) { background: #e8edf0; }
#cts-app .cts-filter:nth-child(8) { background: #eef0df; }
#cts-app .cts-filter:nth-child(9) { background: #eee5df; }
#cts-app .cts-filter:nth-child(10) { background: #e8e5f0; }
#cts-app .cts-filter:nth-child(11) { background: #e4eeee; }
/* マウスを乗せたとき */
#cts-app .cts-filter:hover {
transform: translateY(-1px);
}
/* 選択中だけ黒背景に統一する */
#cts-app .cts-filter.is-active,
#cts-app .cts-filter:hover.is-active {
background: var(--dark);
color: #fff;
}
/* -----------------------------------------------------
検索バー固定用プレースホルダー
----------------------------------------------------- */
#cts-app .cts-search-placeholder {
display: none;
}
/* -----------------------------------------------------
スマートフォン表示
----------------------------------------------------- */
@media (max-width: 760px) {
/* ヒーロー説明カードをタイトル下へ自然に配置 */
#cts-app .cts-hero-copy {
width: calc(100% - 24px);
margin: 36px 0 0 24px;
padding: 23px 22px 22px;
border-left-width: 6px;
}
#cts-app .cts-hero-copy p {
font-size: 15px;
line-height: 1.85;
}
/* PURPOSEと最終メッセージの見出しを小さくする */
#cts-app .cts-intro h2 {
font-size: 31px;
}
#cts-app .cts-proof h2 {
font-size: 33px;
}
/* 検索セクション本体の余白 */
#cts-app .cts-search {
padding: 58px 0 46px;
}
/*
検索テーマを一列で横スクロールさせる。
flex-wrap: nowrap が折り返しを禁止する設定。
*/
#cts-app .cts-filter-list {
display: flex;
flex-wrap: nowrap;
gap: 9px;
width: calc(100vw - 20px);
margin-top: 24px;
padding: 0 18px 8px 0;
overflow-x: auto;
overflow-y: hidden;
/* 指で横へ滑らかに動かす */
-webkit-overflow-scrolling: touch;
/* スクロール位置をボタン単位で止めやすくする */
scroll-snap-type: x proximity;
/* スクロールバーをFirefoxで非表示 */
scrollbar-width: none;
}
/* Chrome、Safariの横スクロールバーを非表示 */
#cts-app .cts-filter-list::-webkit-scrollbar {
display: none;
}
/* 横並びの各検索テーマ */
#cts-app .cts-filter {
flex: 0 0 auto;
white-space: nowrap;
scroll-snap-align: start;
}
/*
JavaScriptによって .is-search-fixed が付いたとき、
検索バーだけをサイトヘッダー直下へ固定する。
--cts-site-header-height はJavaScriptで実際の
CUDIORAヘッダー高さを取得して設定する。
*/
#cts-app.is-search-fixed .cts-search-line {
position: fixed;
top: var(--cts-site-header-height, 60px);
left: 0;
z-index: 9998;
width: 100%;
min-height: 62px;
padding: 12px 18px;
background: rgba(255, 255, 255, .98);
border-top: 1px solid rgba(22, 24, 23, .10);
border-bottom: 1px solid rgba(22, 24, 23, .22);
box-shadow: 0 8px 18px rgba(0, 0, 0, .07);
}
/* 固定された検索入力欄の文字サイズ */
#cts-app.is-search-fixed .cts-search-line input {
font-size: 16px;
}
/*
検索バーを固定した際に元の場所が詰まらないよう、
同じ高さの空間を残す。
*/
#cts-app.is-search-fixed .cts-search-placeholder {
display: block;
height: 62px;
}
}
/* =====================================================
SEARCHをPURPOSEより上に置き、
PC・スマートフォンの両方で固定する最終調整
===================================================== */
/*
旧JavaScript固定方式は使用しない。
SEARCHセクションそのものを position: sticky にする。
これにより、検索欄とカテゴリボタンが一体で固定される。
*/
#cts-app .cts-search {
position: sticky !important;
/*
JavaScriptで取得したCUDIORAヘッダーの高さを使用する。
取得できない場合はPC 78pxを仮の基準にする。
*/
top: var(--cts-site-header-height, 78px) !important;
z-index: 9000 !important;
/* 固定中に下の記事が透けないよう完全な背景色にする */
background: #f4f1e9 !important;
/* 固定中の境界を分かりやすくする */
border-bottom: 1px solid rgba(18, 20, 19, .16);
box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
/* 固定エリアを必要以上に高くしない */
padding: 22px 0 18px !important;
}
/* SEARCH見出しを横にまとめて高さを抑える */
#cts-app .cts-search-head {
display: flex !important;
align-items: baseline;
justify-content: space-between;
gap: 24px;
margin-bottom: 14px !important;
}
#cts-app .cts-search-head .cts-label,
#cts-app .cts-search-head h2 {
margin: 0 !important;
}
#cts-app .cts-search-head h2 {
font-size: clamp(22px, 2vw, 31px) !important;
line-height: 1.2;
}
/* 検索入力欄 */
#cts-app .cts-search-line {
position: relative !important;
inset: auto !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
width: 100% !important;
min-height: 54px;
margin: 0 !important;
padding: 0 !important;
background: #fff;
border: 1px solid rgba(18, 20, 19, .25);
box-shadow: none !important;
}
#cts-app .cts-search-line input {
width: 100%;
min-width: 0;
height: 52px;
padding: 0 18px;
border: 0;
outline: 0;
background: transparent;
}
#cts-app .cts-search-line button {
height: 52px;
padding: 0 16px;
}
#cts-app .cts-search-line > span {
padding-right: 16px;
}
/*
カテゴリカード列。
PCでも必要に応じて横へ動かせるため、折り返さず横スクロールに統一する。
*/
#cts-app .cts-filter-list {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center;
gap: 9px;
width: 100% !important;
max-width: 100% !important;
margin: 13px 0 0 !important;
padding: 0 4px 5px 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
touch-action: pan-x;
scrollbar-width: thin;
}
/* 各カテゴリカードは縮小・折り返しさせない */
#cts-app .cts-filter {
display: inline-flex !important;
flex: 0 0 auto !important;
align-items: center;
justify-content: center;
width: auto !important;
min-width: max-content;
white-space: nowrap !important;
scroll-snap-align: start;
cursor: pointer;
}
/* 旧固定方式の指定を完全に無効化する */
#cts-app.is-search-fixed .cts-search-line {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
}
#cts-app .cts-search-placeholder,
#cts-app.is-search-fixed .cts-search-placeholder {
display: none !important;
height: 0 !important;
}
/* SEARCHの直後に来るPURPOSEとの間隔 */
#cts-app .cts-search + .cts-intro {
padding-top: 76px !important;
}
/* =====================================================
スマートフォン
===================================================== */
@media (max-width: 760px) {
#cts-app .cts-search {
top: var(--cts-site-header-height, 60px) !important;
padding: 13px 0 11px !important;
}
/*
スマホではSEARCH見出しを一行に収め、
固定エリアの高さを最小限にする。
*/
#cts-app .cts-search-head {
gap: 12px;
margin-bottom: 9px !important;
}
#cts-app .cts-search-head .cts-label {
font-size: 10px;
white-space: nowrap;
}
#cts-app .cts-search-head h2 {
font-size: 20px !important;
white-space: nowrap;
}
#cts-app .cts-search-line {
min-height: 48px;
}
#cts-app .cts-search-line input,
#cts-app .cts-search-line button {
height: 46px;
}
#cts-app .cts-search-line input {
padding-left: 14px;
font-size: 16px;
}
#cts-app .cts-search-line button {
padding: 0 10px;
font-size: 10px;
}
#cts-app .cts-search-line > span {
padding-right: 11px;
}
/*
スマホの横スライドを確実にする。
Elementorのコンテナ幅を超えず、指の左右操作だけを受け付ける。
*/
#cts-app .cts-filter-list {
width: 100% !important;
max-width: none !important;
margin-top: 9px !important;
padding-bottom: 4px !important;
overflow-x: scroll !important;
scroll-behavior: smooth;
scrollbar-width: none;
}
#cts-app .cts-filter-list::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
#cts-app .cts-filter {
min-height: 34px;
padding: 8px 13px !important;
font-size: 11px;
}
#cts-app .cts-search + .cts-intro {
padding-top: 58px !important;
}
}
/* ==================================================================
最終修正版
00 SEARCH固定・横スクロール・検索機能
01 PURPOSEヒーロー右カード
================================================================== */
/* ------------------------------------------------------------------
stickyと横スクロールを妨げる親要素のoverflowを解除
------------------------------------------------------------------ */
#cts-app {
overflow-x: clip !important;
overflow-y: visible !important;
}
/*
ElementorのHTMLウィジェットや親コンテナにoverflow:hiddenがあると、
position:stickyが動作しないため、このページを含む部分だけ解除します。
*/
.elementor-widget-html:has(#cts-app),
.elementor-widget-html:has(#cts-app) > .elementor-widget-container,
.e-con:has(> .elementor-widget-html #cts-app),
.elementor-section:has(#cts-app),
.elementor-container:has(#cts-app) {
overflow: visible !important;
}
/* ------------------------------------------------------------------
ヒーロー内の01 PURPOSEカード
------------------------------------------------------------------ */
#cts-app .cts-hero-inner {
/*
PURPOSEカードを右側へ置くための基準。
THINK STOCKの位置やSTOCKのずらしは変更しません。
*/
position: relative;
}
#cts-app .cts-purpose-card {
position: absolute;
right: clamp(22px, 6vw, 90px);
top: 245px;
width: min(390px, 31vw);
padding: 30px 30px 28px;
color: #171918;
background: rgba(247, 244, 235, .96);
border-top: 7px solid #d53b31;
box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
}
#cts-app .cts-purpose-number {
margin: 0 0 24px;
font-size: 10px;
font-weight: 800;
line-height: 1;
letter-spacing: .2em;
}
#cts-app .cts-purpose-card h2 {
margin: 0 0 24px;
font-size: clamp(25px, 2.35vw, 38px);
font-weight: 500;
line-height: 1.42;
letter-spacing: -.035em;
}
#cts-app .cts-purpose-card > p:last-child {
margin: 0;
font-size: 14px;
font-weight: 600;
line-height: 1.9;
}
/* 旧PURPOSE独立セクションは使用しない */
#cts-app .cts-intro {
display: none !important;
}
/* ------------------------------------------------------------------
00 SEARCHの固定位置を保持する基準点
------------------------------------------------------------------ */
#cts-app .cts-search-anchor {
display: block;
width: 100%;
height: 0;
}
/* ------------------------------------------------------------------
00 SEARCHセクション
------------------------------------------------------------------ */
#cts-app .cts-search {
position: sticky !important;
top: var(--cts-site-header-height, 0px) !important;
z-index: 9990 !important;
width: 100%;
padding: 18px 0 15px !important;
background: #f4f1e9 !important;
border-top: 1px solid rgba(22, 24, 23, .16);
border-bottom: 1px solid rgba(22, 24, 23, .2);
box-shadow: 0 10px 25px rgba(0, 0, 0, .07);
}
/*
JSの固定補助クラス。
Elementor側のoverflow指定でstickyが効かない環境では、
JSがposition:fixedへ切り替えます。
*/
#cts-app .cts-search.is-fixed-fallback {
position: fixed !important;
left: 0 !important;
right: 0 !important;
top: var(--cts-site-header-height, 0px) !important;
width: 100vw !important;
margin: 0 !important;
}
/* fixedへ切り替わったとき、元の場所の高さを保持する */
#cts-app .cts-search-anchor.is-active {
height: var(--cts-search-height, 170px);
}
/* SEARCH見出し */
#cts-app .cts-search-head {
display: flex !important;
align-items: baseline;
justify-content: space-between;
gap: 24px;
margin: 0 0 12px !important;
}
#cts-app .cts-search-head .cts-label,
#cts-app .cts-search-head h2 {
margin: 0 !important;
}
#cts-app .cts-search-head h2 {
font-size: clamp(21px, 2vw, 30px) !important;
line-height: 1.2;
}
/* ------------------------------------------------------------------
検索入力欄
------------------------------------------------------------------ */
#cts-app .cts-search-line {
position: relative !important;
inset: auto !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
width: 100% !important;
min-height: 50px;
margin: 0 !important;
padding: 0 !important;
background: #fff;
border: 1px solid rgba(22, 24, 23, .28);
box-shadow: none !important;
}
#cts-app .cts-search-line input {
display: block;
width: 100%;
min-width: 0;
height: 48px;
padding: 0 16px;
color: #161817;
background: transparent;
border: 0;
outline: 0;
font-size: 16px;
}
#cts-app .cts-search-line button {
display: block;
height: 48px;
padding: 0 15px;
color: #161817;
background: transparent;
border: 0;
border-left: 1px solid rgba(22, 24, 23, .18);
font-size: 10px;
font-weight: 800;
letter-spacing: .15em;
cursor: pointer;
}
#cts-app .cts-search-line > span {
display: block;
padding: 0 15px;
}
/* ------------------------------------------------------------------
検索カテゴリカード
------------------------------------------------------------------ */
#cts-app .cts-filter-list {
/*
横スクロールを成立させるため、
子ボタンを折り返さず、親幅を超えた分だけスクロールさせます。
*/
display: flex !important;
flex-wrap: nowrap !important;
align-items: center;
gap: 9px;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 11px 0 0 !important;
padding: 0 12px 5px 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
touch-action: pan-x;
scrollbar-width: none;
cursor: grab;
}
#cts-app .cts-filter-list:active {
cursor: grabbing;
}
#cts-app .cts-filter-list::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
#cts-app .cts-filter {
display: inline-flex !important;
flex: 0 0 auto !important;
align-items: center;
justify-content: center;
width: auto !important;
min-width: max-content !important;
min-height: 36px;
padding: 8px 14px !important;
white-space: nowrap !important;
scroll-snap-align: start;
border: 1px solid rgba(22, 24, 23, .14);
border-radius: 999px;
font-size: 11px;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
#cts-app .cts-filter.is-active {
color: #fff !important;
background: #171918 !important;
border-color: #171918 !important;
}
/* ------------------------------------------------------------------
検索結果の表示／非表示
------------------------------------------------------------------ */
#cts-app .cts-card.is-hidden,
#cts-app .cts-card[hidden] {
display: none !important;
}
#cts-app .cts-empty[hidden] {
display: none !important;
}
#cts-app .cts-empty:not([hidden]) {
display: block !important;
}
/* SEARCHの直後は記事一覧になるため、余分なPURPOSE用余白を解除 */
#cts-app .cts-search + .cts-index,
#cts-app .cts-search + section.cts-index {
padding-top: 90px !important;
}
/* ------------------------------------------------------------------
タブレット
------------------------------------------------------------------ */
@media (max-width: 1100px) {
#cts-app .cts-purpose-card {
top: 270px;
width: min(350px, 36vw);
padding: 25px;
}
#cts-app .cts-purpose-card h2 {
font-size: clamp(23px, 2.7vw, 32px);
}
}
/* ------------------------------------------------------------------
スマートフォン
------------------------------------------------------------------ */
@media (max-width: 760px) {
/*
PURPOSEカードはヒーロー右側では収まらないため、
黒い説明カードの下へ通常配置します。
独立したPURPOSEセクションには戻しません。
*/
#cts-app .cts-purpose-card {
position: relative;
inset: auto;
width: calc(100% - 24px);
margin: 22px 0 0 24px;
padding: 23px 22px 22px;
border-top-width: 6px;
}
#cts-app .cts-purpose-card h2 {
font-size: 27px;
line-height: 1.42;
}
#cts-app .cts-purpose-card > p:last-child {
font-size: 14px;
line-height: 1.8;
}
/*
PURPOSEカードをヒーロー内へ追加した分、
ヒーローの高さを内容に合わせて伸ばします。
*/
#cts-app .cts-hero-inner {
min-height: auto !important;
padding-bottom: 54px !important;
}
#cts-app .cts-search {
padding: 12px 0 10px !important;
}
#cts-app .cts-search-head {
gap: 10px;
margin-bottom: 8px !important;
}
#cts-app .cts-search-head .cts-label {
flex: 0 0 auto;
font-size: 9px;
white-space: nowrap;
}
#cts-app .cts-search-head h2 {
font-size: 19px !important;
white-space: nowrap;
}
#cts-app .cts-search-line {
grid-template-columns: minmax(0, 1fr) auto;
min-height: 46px;
}
#cts-app .cts-search-line input,
#cts-app .cts-search-line button {
height: 44px;
}
#cts-app .cts-search-line input {
padding: 0 12px;
font-size: 16px;
}
#cts-app .cts-search-line button {
padding: 0 10px;
}
#cts-app .cts-search-line > span {
display: none;
}
/*
スマホで右方向へ確実にスライドできるよう、
横スクロール領域を画面右端まで広げます。
*/
#cts-app .cts-filter-list {
width: calc(100vw - 20px) !important;
max-width: none !important;
margin-top: 8px !important;
padding-right: 28px !important;
padding-bottom: 3px !important;
overflow-x: scroll !important;
}
#cts-app .cts-filter {
min-height: 33px;
padding: 7px 12px !important;
font-size: 10px;
}
#cts-app .cts-search + .cts-index,
#cts-app .cts-search + section.cts-index {
padding-top: 65px !important;
}
}
/* by CUDIORAと黒い説明カードだけ左揃え */
#cts-app .cts-hero-brand,
#cts-app .cts-hero-by {
margin-left: 0;
margin-right: 0;
text-align: left;
justify-content: flex-start;
}
#cts-app .cts-hero-copy {
margin-left: 0;
margin-right: 0;
text-align: left;
}
/* ==================================================================
PURPOSEカード調整
・横長カード
・赤い縦バーを削除
・現在位置より下へ移動
・背景をやや透明にする
================================================================== */
#cts-app .cts-purpose-card {
top: 360px !important;
right: clamp(22px, 5vw, 76px) !important;
width: min(620px, 48vw) !important;
padding: 24px 28px 25px !important;
background: rgba(247, 244, 235, 0.88) !important;
border: 0 !important;
border-top: 0 !important;
border-left: 0 !important;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16);
}
#cts-app .cts-purpose-number {
margin-bottom: 16px !important;
}
#cts-app .cts-purpose-card h2 {
margin-bottom: 16px !important;
font-size: clamp(23px, 2vw, 34px) !important;
line-height: 1.35 !important;
}
#cts-app .cts-purpose-card > p:last-child {
max-width: 58em;
font-size: 14px !important;
line-height: 1.75 !important;
}
/* タブレット */
@media (max-width: 1100px) {
#cts-app .cts-purpose-card {
top: 385px !important;
right: 26px !important;
width: min(560px, 54vw) !important;
padding: 22px 24px !important;
}
}
/* スマートフォン */
@media (max-width: 760px) {
#cts-app .cts-purpose-card {
position: relative !important;
inset: auto !important;
width: calc(100% - 24px) !important;
margin: 42px 0 0 24px !important;
padding: 22px 20px 23px !important;
background: rgba(247, 244, 235, 0.9) !important;
border: 0 !important;
border-top: 0 !important;
border-left: 0 !important;
}
#cts-app .cts-purpose-card h2 {
font-size: 25px !important;
line-height: 1.4 !important;
}
}
/* PURPOSEカードを、さらに右斜め下へ移動 */
#cts-app .cts-purpose-card {
top: 410px !important;
right: clamp(8px, 2.5vw, 36px) !important;
}
/* タブレット */
@media (max-width: 1100px) {
#cts-app .cts-purpose-card {
top: 430px !important;
right: 12px !important;
}
}
/* スマートフォン */
@media (max-width: 760px) {
#cts-app .cts-purpose-card {
margin: 58px 0 0 34px !important;
width: calc(100% - 34px) !important;
}
}
/* PURPOSEカードを、さらに右へ移動 */
#cts-app .cts-purpose-card {
right: -24px !important;
}
/* タブレット */
@media (max-width: 1100px) {
#cts-app .cts-purpose-card {
right: -18px !important;
}
}
/* スマートフォン */
@media (max-width: 760px) {
#cts-app .cts-purpose-card {
margin-left: 48px !important;
width: calc(100% - 48px) !important;
}
}
/* =========================================================
タブレット・スマホでは、
PURPOSEカードを黒い説明カードの下へ縦積みにする
========================================================= */
@media (max-width: 1100px) {
#cts-app .cts-hero-inner {
display: flex !important;
flex-direction: column !important;
}
#cts-app .cts-purpose-card {
position: relative !important;
inset: auto !important;
order: 20;
width: min(620px, calc(100% - 48px)) !important;
margin: 28px 0 0 auto !important;
padding: 24px 28px 25px !important;
background: rgba(247, 244, 235, 0.88) !important;
border: 0 !important;
border-top: 0 !important;
border-left: 0 !important;
}
#cts-app .cts-hero-copy {
order: 19;
}
}
/* スマートフォン */
@media (max-width: 760px) {
#cts-app .cts-purpose-card {
width: calc(100% - 24px) !important;
margin: 22px 0 0 24px !important;
padding: 22px 20px 23px !important;
}
}
/* =========================================================
タブレット・スマホ
PURPOSEカードを黒いカードと同じ幅・左位置に揃える
========================================================= */
@media (max-width: 1100px) {
#cts-app .cts-purpose-card {
width: 100% !important;
max-width: none !important;
margin: 24px 0 0 !important;
padding: 24px 28px 25px !important;
align-self: stretch !important;
}
}
/* スマートフォン */
@media (max-width: 760px) {
#cts-app .cts-purpose-card {
width: 100% !important;
margin: 20px 0 0 !important;
padding: 22px 20px 23px !important;
}
}
/* =========================================================
検索カテゴリの横スクロールバーを
PC・タブレット・スマホすべてで表示する
========================================================= */
#cts-app .cts-filter-list {
overflow-x: auto !important;
overflow-y: hidden !important;
/* Firefox */
scrollbar-width: auto !important;
/* スクロールバー分の余白を確保 */
padding-bottom: 10px !important;
}
/* Chrome・Edge・Safari */
#cts-app .cts-filter-list::-webkit-scrollbar {
display: block !important;
width: auto !important;
height: 8px !important;
}
#cts-app .cts-filter-list::-webkit-scrollbar-track {
background: rgba(20, 22, 21, 0.08);
border-radius: 999px;
}
#cts-app .cts-filter-list::-webkit-scrollbar-thumb {
background: rgba(20, 22, 21, 0.38);
border-radius: 999px;
}
#cts-app .cts-filter-list::-webkit-scrollbar-thumb:hover {
background: rgba(20, 22, 21, 0.58);
}
/* スマートフォンでも非表示にしない */
@media (max-width: 760px) {
#cts-app .cts-filter-list {
overflow-x: auto !important;
scrollbar-width: auto !important;
padding-bottom: 10px !important;
}
#cts-app .cts-filter-list::-webkit-scrollbar {
display: block !important;
height: 7px !important;
}
}
/* =========================================================
SEARCH固定位置を下げる
グローバルナビゲーションに重ならないよう調整
========================================================= */
/* パソコン */
#cts-app .cts-search {
top: calc(var(--cts-site-header-height, 0px) + 24px) !important;
}
/* JavaScriptのfixed補助側も同じ位置に揃える */
#cts-app .cts-search.is-fixed-fallback {
top: calc(var(--cts-site-header-height, 0px) + 24px) !important;
}
/* タブレット */
@media (max-width: 1100px) {
#cts-app .cts-search,
#cts-app .cts-search.is-fixed-fallback {
top: calc(var(--cts-site-header-height, 0px) + 18px) !important;
}
}
/* スマートフォン */
@media (max-width: 760px) {
#cts-app .cts-search,
#cts-app .cts-search.is-fixed-fallback {
top: calc(var(--cts-site-header-height, 0px) + 14px) !important;
}
}
/* =========================================================
タブレット・スマホのSEARCH固定位置をさらに下げる
========================================================= */
/* タブレット */
@media (max-width: 1100px) {
#cts-app .cts-search,
#cts-app .cts-search.is-fixed-fallback {
top: calc(var(--cts-site-header-height, 0px) + 15px) !important;
}
}
/* スマートフォン */
@media (max-width: 760px) {
#cts-app .cts-search,
#cts-app .cts-search.is-fixed-fallback {
top: calc(var(--cts-site-header-height, 0px) + 15px) !important;
}
}
/* =========================================================
SEARCHをグローバルナビより背面にする
========================================================= */
#cts-app .cts-search,
#cts-app .cts-search.is-fixed-fallback{
z-index: 90 !important;
}
/* メニューを最前面に */
header,
.l-header,
.p-header,
.c-header,
#header,
#global-header,
.drawer-menu,
.mobile-menu,
.hamburger-menu,
.menu-overlay{
z-index: 9999 !important;
}
/* =========================================================
THINK STOCKページのみ
グロナビ＋SEARCHを一体で上下させる
========================================================= */
body.cts-nav-sync {
--cts-header-height: 80px;
--cts-nav-shift: 0px;
}
/* グローバルナビ */
body.cts-nav-sync .cts-target-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
margin: 0 !important;
transform: translateY(var(--cts-nav-shift)) !important;
transition: transform 0.38s cubic-bezier(.22,.61,.36,1) !important;
z-index: 10000 !important;
will-change: transform;
}
/* SEARCHをグロナビの真下に固定 */
body.cts-nav-sync #cts-app .cts-search,
body.cts-nav-sync #cts-app .cts-search.is-fixed-fallback {
position: fixed !important;
top: var(--cts-header-height) !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
margin: 0 !important;
transform: translateY(var(--cts-nav-shift)) !important;
transition: transform 0.38s cubic-bezier(.22,.61,.36,1) !important;
z-index: 9990 !important;
will-change: transform;
}
/* スクロール中はアニメーションを少し速くする */
body.cts-nav-sync.cts-is-scrolling .cts-target-header,
body.cts-nav-sync.cts-is-scrolling #cts-app .cts-search {
transition-duration: 0.22s !important;
}
/* スマホメニューは最前面 */
body.cts-nav-sync .drawer-menu,
body.cts-nav-sync .mobile-menu,
body.cts-nav-sync .menu-overlay,
body.cts-nav-sync .p-drawer,
body.cts-nav-sync .l-drawer {
z-index: 20000 !important;
}
/* ヒーローエリア全体を少し下げる */
#cts-app .cts-hero {
padding-top: px !important;
}
/* タブレット */
@media (max-width: 1100px) {
#cts-app .cts-hero {
padding-top: 40px !important;
}
}
/* スマートフォン */
@media (max-width: 760px) {
#cts-app .cts-hero {
padding-top: 46px !important;
}
}
/* 検索バーの高さと文字サイズを小さくする */
#cts-app .cts-search input,
#cts-app .cts-search .cts-search-input {
min-height: 42px !important;
height: 42px !important;
padding: 0 14px !important;
font-size: 14px !important;
line-height: 1.2 !important;
}
/* プレースホルダー「考え方を探す」 */
#cts-app .cts-search input::placeholder,
#cts-app .cts-search .cts-search-input::placeholder {
font-size: 13px !important;
opacity: 0.72 !important;
}
/* スマートフォン */
@media (max-width: 760px) {
#cts-app .cts-search input,
#cts-app .cts-search .cts-search-input {
min-height: 38px !important;
height: 38px !important;
padding: 0 12px !important;
font-size: 13px !important;
}
#cts-app .cts-search input::placeholder,
#cts-app .cts-search .cts-search-input::placeholder {
font-size: 12px !important;
}
}
/* =========================================================
SEARCHエリア全体を低くする
========================================================= */
#cts-app .cts-search {
padding: 8px 0 7px !important;
}
#cts-app .cts-search-inner,
#cts-app .cts-search-wrap,
#cts-app .cts-search-content {
padding-top: 0 !important;
padding-bottom: 0 !important;
gap: 7px !important;
}
/* 「00 SEARCH」などの見出し */
#cts-app .cts-search-label,
#cts-app .cts-search-title {
margin: 0 0 5px !important;
font-size: 10px !important;
line-height: 1 !important;
}
/* 検索入力欄 */
#cts-app .cts-search input[type="search"],
#cts-app .cts-search input[type="text"],
#cts-app .cts-search-input {
height: 34px !important;
min-height: 34px !important;
padding: 0 12px !important;
font-size: 12px !important;
line-height: 34px !important;
}
/* 「考え方を探す」 */
#cts-app .cts-search input::placeholder {
font-size: 11px !important;
line-height: 34px !important;
}
/* 検索カード部分 */
#cts-app .cts-filter-list {
gap: 6px !important;
padding-top: 0 !important;
padding-bottom: 7px !important;
}
#cts-app .cts-filter-list button,
#cts-app .cts-filter-item,
#cts-app .cts-filter-card {
min-height: 30px !important;
padding: 6px 11px !important;
font-size: 11px !important;
line-height: 1.15 !important;
}
/* タブレット・スマホ */
@media (max-width: 1100px) {
#cts-app .cts-search {
padding: 7px 0 6px !important;
}
#cts-app .cts-search input[type="search"],
#cts-app .cts-search input[type="text"],
#cts-app .cts-search-input {
height: 32px !important;
min-height: 32px !important;
line-height: 32px !important;
}
#cts-app .cts-filter-list button,
#cts-app .cts-filter-item,
#cts-app .cts-filter-card {
min-height: 28px !important;
padding: 5px 10px !important;
}
}
#cts-app .cts-proof h2 {
font-size: clamp(2rem, 3.4vw, 3.2rem) !important;
line-height: 1.12 !important;
letter-spacing: -0.02em !important;
}
/* タブレット */
@media (max-width: 1100px) {
#cts-app .cts-proof h2 {
font-size: clamp(1.8rem, 4.5vw, 2.6rem) !important;
}
}
/* スマートフォン */
@media (max-width: 760px) {
#cts-app .cts-proof h2 {
font-size: clamp(1.55rem, 6.5vw, 2rem) !important;
line-height: 1.16 !important;
}
}
/* 追加したカードが右カラムに寄らないようにする */
#cts-app .cts-card {
grid-column: auto !important;
justify-self: stretch !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* カード一覧の先頭から通常順で配置 */
#cts-app .cts-card-grid,
#cts-app .cts-cards,
#cts-app .cts-article-grid {
grid-auto-flow: row !important;
}
/* 追加カードだけに右寄せ指定が残っている場合の解除 */
#cts-app .cts-card:last-child {
grid-column: auto !important;
justify-self: stretch !important;
align-self: stretch !important;
}/* End custom CSS */