/* ==========================================================================
ULTRA THEORY｜トップページ専用CSS（SEE / THINK / VERIFY版）
読み方
--------------------------------------------------------------------------
00｜共通色 金色・和紙色・文字色をまとめて変更
01｜最上部メッセージ 「形は変わる。構造は、繰り返す。」
02｜ヒーロー 3枚共通の金色見出し・本文・金色ボタン
03｜カルーセル見出し UT WORKOUTの2段見出し
04｜ニュース帯 LATEST・日付・記事タイトル
05｜3行スタガー 下層セクションのスクロール連動演出
06｜スマホ 750px以下の上書き
07｜動きを減らす設定 OS設定へのアクセシビリティ対応
よく触る場所
--------------------------------------------------------------------------
・サイト全体の金色 → 00 の --ut-copy-gold
・ヒーロー大見出しの大きさ → 02 の .catch / font-size
・ヒーロー本文の行間 → 02 の .desc p / line-height
・ボタンと本文の距離 → 02 の .button / margin-top
・カルーセル2段目の文言 → 03 の ::after / content
・ニュース帯の背景色 → 00 の --ut-copy-paper
・スマホだけ変更 → 06
========================================================================== */
/* ==========================================================================
00｜共通色
========================================================================== */
body.home {
--ut-copy-gold: #c3a052; /* 明るい金：見出し・細線 */
--ut-copy-gold-muted: #ad8940; /* 落ち着いた金：日付・LATEST */
--ut-copy-ivory: #f3efe6; /* 生成り：フォーカス枠 */
--ut-copy-paper: #f2efe8; /* 和紙色：ニュース帯 */
--ut-copy-ink: #26231e; /* 墨色：ニュースタイトル */
}
/* ==========================================================================
01｜最上部メッセージ
対象：「形は変わる。構造は、繰り返す。」
========================================================================== */
body.home #site_description span {
display: flex;
align-items: center;
gap: 12px; /* 金線と文字の距離 */
padding-right: 20px;
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.14em;
font-feature-settings: "palt" 1;
}
/* 文言の左に置く短い金線 */
body.home #site_description span::before {
content: "";
display: block;
flex: 0 0 16px;
width: 16px;
height: 1px;
background: var(--ut-copy-gold);
opacity: 0.82;
}
/* ==========================================================================
02｜ヒーロー
========================================================================== */
/* 02-A｜SEE / THINK / VERIFY 共通
配置・画像・登場アニメーションはANTHEMの設定を使用。
PCは左／右／左、モバイルは現在の左／右／中央を維持。 */
body.home #header_slider_content :is(.item1, .item2, .item3) .catch {
width: 100%;
max-width: 680px;
color: #d8bc7a;
font-size: clamp(28px, 2.7vw, 38px) !important;
font-weight: 500;
line-height: 1.5 !important;
letter-spacing: 0.025em;
font-feature-settings: "palt" 1;
overflow-wrap: break-word;
text-wrap: balance;
text-shadow: 0 2px 18px rgba(0,0,0,.72), 0 1px 2px rgba(0,0,0,.9);
}
body.home #header_slider_content :is(.item1, .item2, .item3) .desc {
width: 100%;
max-width: 640px;
margin-top: 26px !important;
}
body.home #header_slider_content :is(.item1, .item2, .item3) .desc p {
width: 100% !important;
margin: 0;
color: #d7d7d7;
font-size: clamp(16px, 1.4vw, 18px) !important;
font-weight: 400;
line-height: 1.9 !important;
letter-spacing: 0.035em;
font-feature-settings: "palt" 1;
overflow-wrap: break-word;
text-shadow: 0 2px 14px rgba(0,0,0,.78), 0 1px 2px rgba(0,0,0,.95);
}
/* THINK：幅を制限したブロック自体も右へ寄せる。 */
@media screen and (min-width: 751px) {
body.home #header_slider_content .item2 .catch,
body.home #header_slider_content .item2 .desc {
margin-left: auto;
margin-right: 0;
}
}
/* 02-B｜金色CTA：3枚共通。長いラベルは折り返せる高さにする。 */
body.home #header_slider_content :is(.item1, .item2, .item3) .button {
box-sizing: border-box;
min-width: min(280px, 100%);
max-width: 100%;
height: auto !important;
min-height: 56px;
margin-top: 28px !important;
padding: 16px 30px !important;
line-height: 1.6 !important;
white-space: normal;
overflow-wrap: anywhere;
vertical-align: top;
border: 1px solid #c4a85e !important;
border-radius: 2px;
background-color: #b09444 !important;
background-image: linear-gradient(90deg, #9c7e36 0%, #b09444 50%, #c4a85e 100%) !important;
color: #19160f !important;
box-shadow: 0 8px 22px rgba(0,0,0,.24);
transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* テーマの斜めワイプと金グラデが競合しないように統一。 */
body.home #header_slider_content :is(.item1, .item2, .item3) .button::before {
display: none;
}
body.home #header_slider_content :is(.item1, .item2, .item3) .button span {
color: inherit !important;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
font-feature-settings: "palt" 1;
}
body.home #header_slider_content :is(.item1, .item2, .item3) .button:hover,
body.home #header_slider_content :is(.item1, .item2, .item3) .button:focus-visible {
background-image: linear-gradient(90deg, #ab8c3e 0%, #c2a24e 50%, #d4ba6c 100%) !important;
border-color: #f3efe6 !important;
box-shadow: 0 10px 26px rgba(0,0,0,.3);
}
body.home #header_slider_content :is(.item1, .item2, .item3) .button:focus-visible {
outline: 2px solid var(--ut-copy-ivory);
outline-offset: 4px;
}
/* ==========================================================================
03｜UT WORKOUTカルーセル見出し
========================================================================== */
/* 03-A｜1段目
対象：「トレード・トレーニングGYM【UT WORKOUT】」 */
body.home #header_carousel_wrap > h2.headline {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
row-gap: 6px; /* 1段目と2段目の距離 */
box-sizing: border-box;
height: auto !important;
min-height: 84px;
padding: 12px 20px 10px;
font-size: 24px;
line-height: 1.25 !important;
letter-spacing: 0.045em;
font-feature-settings: "palt" 1;
text-align: center;
box-shadow: inset 0 1px 0 rgba(195, 160, 82, 0.18);
}
/* 03-B｜2段目
注意：この文言だけはWordPress管理画面ではなく、下のcontentで変更する。 */
body.home #header_carousel_wrap > h2.headline::after {
content: "いま鍛える｜6 メンタルと哲学";
display: block;
color: var(--ut-copy-gold);
font-size: 11px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.16em;
font-feature-settings: "palt" 1;
}
/* ==========================================================================
04｜ニュース帯
対象：LATEST・日付・記事タイトル
========================================================================== */
/* 04-A｜帯全体 */
body.home #index_news {
background: var(--ut-copy-paper);
border-top: 1px solid rgba(173, 137, 64, 0.2);
border-bottom: 1px solid rgba(38, 35, 30, 0.08);
}
/* 04-B｜左端の「LATEST」 */
body.home #index_news_inner::before {
content: "LATEST";
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: flex;
align-items: center;
height: 60px;
color: var(--ut-copy-gold-muted);
font-size: 10px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.2em;
pointer-events: none;
}
/* 04-C｜流れる記事1件の共通文字組み */
body.home #index_news_slider .item a {
letter-spacing: 0.035em;
font-feature-settings: "palt" 1;
}
/* 日付 */
body.home #index_news_slider .date {
margin-right: 18px;
color: var(--ut-copy-gold-muted);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
}
/* 記事タイトル */
body.home #index_news_slider .title {
color: var(--ut-copy-ink);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.055em;
transition: color 0.2s ease;
}
body.home #index_news_slider a:hover .title {
color: var(--ut-copy-gold-muted);
}
/* ==========================================================================
05｜3行スタガー表示（スクロール連動）
対象HTML：.ut-stagger の中に .ut-stagger__line を3本置く箇所。
JSが動いた時だけ非表示にし、画面へ入ると順番に表示する。
JS不発時は最初から通常表示される。
========================================================================== */
body.home .ut-stagger {
margin: 0 20px 30px;
text-align: center;
}
body.home .ut-stagger__line {
margin: 0 0 4px !important;
line-height: 1.9 !important;
}
/* WordPressが中にを自動生成した場合の余白リセット */
body.home .ut-stagger__line p {
margin: 0 !important;
line-height: inherit !important;
}
/* JS準備完了後だけ、登場前の状態へ移す */
body.home .ut-stagger.is-ready .ut-stagger__line {
opacity: 0;
transform: translateY(20px);
will-change: opacity, transform;
}
/* 画面へ入ったら表示 */
body.home .ut-stagger.is-visible .ut-stagger__line {
animation: ut-stagger-up 1.1s cubic-bezier(.22, 1, .36, 1) both;
}
body.home .ut-stagger.is-visible .ut-stagger__line--1 {
animation-delay: 0s;
}
body.home .ut-stagger.is-visible .ut-stagger__line--2 {
animation-delay: 0.42s;
}
body.home .ut-stagger.is-visible .ut-stagger__line--3 {
animation-delay: 0.84s;
}
@keyframes ut-stagger-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================
05-B｜問い・飲まれ・立て 3カラムカード
対象HTML：.ut-footer-carousel の中に .ut-fc-card を3枚
ANTHEMがflexを潰すためinline-blockで組む
============================================ */
body.home .ut-footer-carousel {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
font-size: 0;
}
body.home .ut-footer-carousel .ut-fc-card {
display: inline-block !important;
width: 31.5% !important;
vertical-align: top;
margin-right: 2.5%;
font-size: 14px;
box-sizing: border-box;
}
body.home .ut-footer-carousel .ut-fc-card:nth-child(3n) {
margin-right: 0;
}
body.home .ut-footer-carousel .ut-fc-card a {
overflow: hidden;
}
body.home .ut-footer-carousel .ut-fc-card img {
transition: transform 0.4s ease, opacity 0.4s ease !important;
}
body.home .ut-footer-carousel .ut-fc-card a:hover img {
transform: scale(1.08);
opacity: 0.8;
}
/* 空の
（wpautop生成）を消す */
body.home .ut-footer-carousel .ut-fc-card p:empty {
display: none !important;
}
/* design-plus の .post_content p（line-height:2.2 / margin-bottom:2em）を打ち消す */
body.home .ut-footer-carousel .ut-fc-card p {
line-height: 1.7 !important;
margin: 0 0 6px 0 !important;
}
body.home .ut-footer-carousel .ut-fc-card .ut-fc-title {
margin-top: 14px !important;
}
body.home .ut-footer-carousel .ut-fc-card p:last-child {
margin-bottom: 0 !important;
}
/* ============================================
05-B-2｜問い・飲まれ・立て カード：スクロール連動フェードイン
JS側で .ut-footer-carousel も .ut-stagger と同じ仕組みで監視する前提
============================================ */
body.home .ut-footer-carousel.is-ready .ut-fc-card {
opacity: 0;
transform: translateY(20px);
will-change: opacity, transform;
}
body.home .ut-footer-carousel.is-visible .ut-fc-card {
animation: ut-stagger-up 1.1s cubic-bezier(.22, 1, .36, 1) both;
}
body.home .ut-footer-carousel.is-visible .ut-fc-card:nth-child(1) {
animation-delay: 0s;
}
body.home .ut-footer-carousel.is-visible .ut-fc-card:nth-child(2) {
animation-delay: 0.42s;
}
body.home .ut-footer-carousel.is-visible .ut-fc-card:nth-child(3) {
animation-delay: 0.84s;
}
/* ==========================================================================
06｜スマホ調整（750px以下）
ここにある同名セレクタは重複ではなく、PC版をスマホ用に上書きする指定。
========================================================================== */
@media screen and (max-width: 750px) {
/* 06-A〜C｜3枚共通。テーマのモバイル配置と画像位置を維持。 */
body.home #header_slider_content :is(.item1, .item2, .item3) .catch {
width: 100%;
max-width: none;
font-size: clamp(22px, 6vw, 27px) !important;
line-height: 1.5 !important;
letter-spacing: 0.015em;
}
/* VERIFYはコピーが長いため少し小さくする。 */
body.home #header_slider_content .item3 .catch {
font-size: clamp(21px, 5.6vw, 25px) !important;
}
body.home #header_slider_content :is(.item1, .item2, .item3) .desc {
width: 100%;
max-width: none;
margin-top: 20px !important;
}
body.home #header_slider_content :is(.item1, .item2, .item3) .desc p {
font-size: 14px !important;
line-height: 1.85 !important;
letter-spacing: 0.02em;
}
body.home #header_slider_content :is(.item1, .item2, .item3) .button {
min-width: min(220px, 100%);
min-height: 48px;
margin-top: 20px !important;
padding: 13px 22px !important;
}
body.home #header_slider_content :is(.item1, .item2, .item3) .button span {
font-size: 12px;
letter-spacing: 0.06em;
}
/* 06-D｜カルーセル見出し */
body.home #header_carousel_wrap > h2.headline {
min-height: 78px;
padding: 10px 14px 9px;
row-gap: 5px;
font-size: 17px;
line-height: 1.35 !important;
letter-spacing: 0.025em;
}
body.home #header_carousel_wrap > h2.headline::after {
font-size: 9.5px;
line-height: 1.4;
letter-spacing: 0.11em;
}
/* 06-E｜ニュース帯
スマホでは横幅が狭いため、左端のLATESTを非表示にする。 */
body.home #index_news_inner::before {
display: none;
}
body.home #index_news_slider .date {
margin-right: 0;
color: var(--ut-copy-gold-muted);
font-size: 10px;
letter-spacing: 0.08em;
}
body.home #index_news_slider .title {
font-size: 12.5px;
line-height: 1.5;
letter-spacing: 0.035em;
}
/* 06-F｜問い・飲まれ・立て カード：モバイルは縦積み */
body.home .ut-footer-carousel .ut-fc-card {
display: block !important;
width: 100% !important;
margin-right: 0 !important;
margin-bottom: 24px !important;
}
body.home .ut-footer-carousel .ut-fc-card:last-child {
margin-bottom: 0 !important;
}
}
/* ==========================================================================
07｜動きを減らす設定
OSで「視差効果を減らす」等が有効な場合、演出を停止する。
========================================================================== */
@media (prefers-reduced-motion: reduce) {
body.home .ut-stagger.is-ready .ut-stagger__line,
body.home .ut-stagger.is-visible .ut-stagger__line,
body.home .ut-footer-carousel.is-ready .ut-fc-card,
body.home .ut-footer-carousel.is-visible .ut-fc-card {
opacity: 1;
transform: none;
animation: none;
}
}
/* 08｜既存のモバイル背景位置 */
body.home #header_slider .image.mobile {
background-position: center top !important;
}
/* CTAの装飾遷移のみ抑制。スライダーの自動再生はテーマ側で管理。 */
@media (prefers-reduced-motion: reduce) {
body.home #header_slider_content :is(.item1, .item2, .item3) .button {
transition: none;
}
}