/**
 * Theme Name:     crescent
 * Author:         oto-productions
 * Template:       yootheme
 * Text Domain:    crescent
 * Description:    WordPress theme exclusive for 株式会社CRESCENT
 * Version:        0.9
 */

/*
 * YOOthemeの theme.1.css は子テーマのCSSより後に読み込まれるため、
 * クラス1つ分の詳細度では負けてしまう。上書きしたい指定は !important を付ける。
 */

/* ==========================================================================
   ビルダーの固定幅（uk-width-large / xlarge / 2xlarge）を画面幅で頭打ちにする
   ==========================================================================
   ビルダーでテキストに「幅：Large」などを付けると、UIkitの
   uk-width-large（450px）/ xlarge（600px）/ 2xlarge（750px）が付く。
   これは width を固定するので、**スマートフォンでは画面より広くなり、
   文章が右端で切れる。** ページ全体には overflow-x: clip が掛かっているので
   横スクロールは出ず、切れていることに気づきにくい。

   事業紹介ページのSTRENGTHで、600pxの文章が360pxの画面に置かれ
   右端が切れていた（2026-09-23）。以前もヒーローのリードで同じことがあり、
   そのときはヒーローだけ直していた。

   **max-width では直らない。** 下層セクション共通のリード文の指定が
   `.uk-panel` に max-width: 720px を特定度 (0,7,0) で当てていて、
   こちらの max-width: 100% が負ける（実測で600pxのまま）。
   max-width の取り合いを避け、width のほうを min() で頭打ちにする。
   PCでは指定どおりの幅、狭い画面では親の幅になる。                 */

main .uk-width-small   { width: min(150px, 100%) !important; }
main .uk-width-medium  { width: min(300px, 100%) !important; }
main .uk-width-large   { width: min(450px, 100%) !important; }
main .uk-width-xlarge  { width: min(600px, 100%) !important; }
main .uk-width-2xlarge { width: min(750px, 100%) !important; }

/* ==========================================================================
   ビルダーの枠に付ける余白は、classを2回書いて特定度を上げる
   ==========================================================================
   YOOthemeの theme.1.css に

     * + .uk-margin { margin-top: 20px !important; }

   がある。ビルダーが置いた要素にはほぼ必ず .uk-margin が付くので、
   `.crescent-xxx { margin-top: 32px !important; }` と書いても
   **特定度が同じ (0,1,0) で、あちらのほうが後に読まれるため負ける。**
   `!important` を付けても変わらない。読み込み順は

     crescent/style.css  →  yootheme/css/theme.1.css

   なので、こちらが先。

   そこで `.crescent-xxx.crescent-xxx` と同じclassを2回書いて (0,2,0) にする。
   親セクションのclassを前に付ける手もあるが、
   その要素がどのセクションにあるかに依存しない分こちらが安全。

   **margin-top だけを別ルールに切り出してある。** 他の指定まで特定度を
   上げると、意図しないところで別のルールに勝ってしまう。
   2026-09-20に同じ理由で3件の事故があった。

   2026-09-22に19か所で効いていないのを見つけて直した。
   新しく余白を書くときもこの形にすること。
   ========================================================================== */

/* ==========================================================================
   共通パーツ：日本語の禁則処理
   ==========================================================================
   ブラウザの既定（line-break: auto）は日本語の禁則がゆるく、
   小書きのかな（ァィゥェォャュョッ）や長音符が行頭に来ることがある。
   BUSINESSページのリードで「デ」で折り返して「ィルミー」が行頭に立った。

   strict にすると、これらを行頭に置かない本来の組版規則になる。
   本文だけでなく見出しにも効かせたいので body に当てている。
   ========================================================================== */

body {
	line-break: strict !important;
}

/* ==========================================================================
   共通パーツ：CTAボタン
   ==========================================================================
   YOOthemeのButton要素の「Style」で切り替えて使う。

     Default   … 白地＋細い枠線（詳しく見る）
     Primary   … 黒（お問い合わせ・事業内容を見る）
     Secondary … グラデーション（エントリー・採用情報を見る）

   矢印は各Button要素の設定でアイコン（arrow-right / 右寄せ）を付ける。

   グラデーションはロゴのブランドカラー（inbox/logo/logo.pdf の色指定）から
   オレンジ→マゼンタ→パープル→ブルーの4色を使う。
   ========================================================================== */

.uk-button {
	height: auto !important;
	padding: 14px 32px !important;
	line-height: 1.4 !important;
	border-radius: 6px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-transform: none !important;
	transition: opacity 0.2s ease, background-color 0.2s ease !important;
}

.uk-button-default {
	background: #ffffff !important;
	color: #111111 !important;
	border: 1px solid #dddddd !important;
}

.uk-button-default:hover,
.uk-button-default:focus {
	background: #f5f5f5 !important;
	color: #111111 !important;
}

.uk-button-primary {
	background: #111111 !important;
	color: #ffffff !important;
	border: 1px solid #111111 !important;
}

.uk-button-primary:hover,
.uk-button-primary:focus {
	background: #333333 !important;
	border-color: #333333 !important;
	color: #ffffff !important;
}

.uk-button-secondary {
	background: linear-gradient(90deg, #f39800 0%, #e4007f 40%, #920783 70%, #0068b7 100%) !important;
	color: #ffffff !important;
	border: none !important;
}

.uk-button-secondary:hover,
.uk-button-secondary:focus {
	opacity: 0.88 !important;
	color: #ffffff !important;
}

/* ボタンの大きさ（2026-10-02 平山さま指示）---------------------------------------
   ページ本文のボタンは、採用ページで決めた大きさにそろえる。
   ただし各ページ最下部のCTAセクション（.crescent-page-cta／TOPの .crescent-cta）は
   目立たせたいので対象外（今までの大きさのまま）。

     高さ 38px／文字 12px／左右の余白 18px／文字間隔 1px／矢印 20px

   ■ 対象は #tm-main の中の .uk-button（ビルダーのButtons要素）。
   ■ 対象外
     ・ヘッダーのボタン（お問い合わせ／エントリー。もともと高さ36〜38px・文字11px）
     ・フォームの送信ボタン（Contact Form 7 の input。.uk-button ではない）
     ・各ページ最下部のCTAセクション
     ・採用ページのCTA帯だけは、別の指定で同じ大きさにしている（下の採用ページの項）

   ■ 高さは min-height で持たせる。固定にすると、狭い画面でボタンの文字が
     2行に折り返したときにはみ出す。枠線のあるボタン（白・黒）と枠線のない
     グラデーションのボタンも、min-height ならそろう（box-sizing: border-box）。
   ■ ページ個別の指定（.crescent-content .uk-button など）に勝つよう #tm-main で
     特定度を上げている。                                                       */
#tm-main .uk-button:not(.crescent-page-cta *, .crescent-cta *) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: auto !important;
	min-height: 38px !important;
	min-width: 0 !important;
	padding: 0 18px !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	letter-spacing: 1px !important;
}

/* ==========================================================================
   グローバルメニュー
   ==========================================================================
   メニュー項目は「英語＋日本語」の2行。WordPressのメニュー項目の
   ナビゲーションラベルに <br><span class="nav-sub">日本語</span> を入れる
   （YOOthemeはメニューの「説明」欄を出力しないため、ラベルにHTMLを入れる）。
   ========================================================================== */

.uk-navbar-nav > li > a {
	flex-direction: column !important;
	line-height: 1.35 !important;
	text-align: center !important;
	/* 右側にCTAボタン2つ分のスペースを残すため、項目間は詰める */
	padding: 0 5px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
}

.nav-sub {
	display: block !important;
	font-size: 9px !important;
	font-weight: 400 !important;
	opacity: 0.75 !important;
	letter-spacing: 0 !important;
}

/*
 * ドロップダウン内の項目も、メニュー本体と同じ「英語＋日本語」の組み合わせに揃える。
 * Builderのどのフィールドに日本語を入れたかで el-meta / el-content に分かれるため
 * 両方を対象にする。英語の上に横長画像を置く想定なので、画像は幅いっぱいにする。
 */
.uk-navbar-dropdown .el-title {
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	margin: 0 !important;
	color: #111111 !important;
}

.uk-navbar-dropdown .el-meta,
.uk-navbar-dropdown .el-content {
	font-size: 10px !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	opacity: 0.75 !important;
	margin: 2px 0 0 !important;
	color: #111111 !important;
}

.uk-navbar-dropdown .el-image {
	width: 100% !important;
	margin-bottom: 10px !important;
	border-radius: 4px !important;
}

/*
 * ハンバーガーメニュー側も2行にする。
 * UIkitのナビはリンクがflex配置のため、<br>だけでは改行されない。
 */
.uk-nav > li > a:has(.nav-sub) {
	flex-direction: column !important;
	align-items: flex-start !important;
	line-height: 1.4 !important;
}

/*
 * ヘッダーのCTAボタンは本文中のものより小さくする。
 * 既定のサイズだと横幅が足りず、ナビゲーションの2行目に折り返してしまう。
 */
.tm-header .uk-button {
	padding: 8px 12px !important;
	font-size: 11px !important;
}

.tm-header .widget_builderwidget .uk-margin {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* 画面が狭いほどヘッダーは折り返しやすいので、さらに詰める */
@media (max-width: 1279px) {
	.uk-navbar-nav > li > a {
		padding: 0 2px !important;
		font-size: 11px !important;
	}

	/* ヘッダー内だけに効かせる。スコープを外すとオフキャンバスの
	   メニューまで8pxになってしまう */
	.tm-header .nav-sub {
		font-size: 8px !important;
	}

	.tm-header .uk-button {
		padding: 7px 8px !important;
		font-size: 10px !important;
	}
}

/* ==========================================================================
   TOPページ セクション間の余白
   ==========================================================================
   セクション上下の余白（padding）は、2026-10-02 に平山さまの指示で CSS から外した。
   TOPはセクションごとに背景色を変え、区切りが分かるようになったため、
   余白はビルダー（Section の Padding）で決める。
   （それまでは「上40px・下0」「959px以下は上32px」に !important で揃えていた。
   更にその前は 100px／SP 60px。）

   このファイルで指定しているのは、ラベル（ABOUT など）から中身までの間隔だけ
   （下の「ラベル → 中身」）と、最下部CTA帯（.crescent-cta）の上下84pxのみ。
   ========================================================================== */

/* ラベル → 中身も詰める（2026-10-02）------------------------------------------
   ラベルの下（24＋行の間40＝64px）が広いと、ラベルが中身から離れて
   前のセクションの尻尾に見えてしまう。ラベルから中身までを16pxにそろえる。
   （セクション上下の余白とは別で、こちらは残している。）

     ラベルの下            24 → 0px
     ラベルの次の行        40 → 16px（ラベルだけの行のとき）
     ラベルと同じ列の次    RECRUIT の見出し 40 → 12px／NEWS の一覧 32 → 16px

   セクションごとの見出し指定（特定度 (0,3,1)）に勝つよう、
   .uk-section とラベルの二重指定で (0,4,1) にしている。 */
:is(.crescent-about, .crescent-business, .crescent-content, .crescent-products, .crescent-culture, .crescent-recruit, .crescent-news, .crescent-message).uk-section .crescent-section-label.crescent-section-label {
	margin-bottom: 0 !important;
}

:is(.crescent-about, .crescent-business, .crescent-content, .crescent-products, .crescent-culture, .crescent-recruit, .crescent-news, .crescent-message).uk-section .tm-grid-expand:has(> * > .crescent-section-label:last-child) + .tm-grid-expand {
	margin-top: 16px !important;
}

:is(.crescent-recruit, .crescent-news).uk-section .crescent-section-label.crescent-section-label + :is(h1, h2, h3, h4) {
	margin-top: 12px !important;
}

:is(.crescent-recruit, .crescent-news).uk-section .crescent-section-label.crescent-section-label + div {
	margin-top: 16px !important;
}

/* ==========================================================================
   共通パーツ：セクションへのアンカーリンク
   ==========================================================================
   ヘッダーは高さ80pxで、スクロールすると uk-sticky-fixed で固定される。
   そのまま #id へ飛ぶとセクションの頭がヘッダーの下に潜るので、
   scroll-margin-top で飛び先を手前に寄せる（80px ＋ 余白30px）。
   ========================================================================== */

.uk-section[id],
[id].crescent-anchor {
	scroll-margin-top: 110px !important;
}

/* ==========================================================================
   共通パーツ：セクション見出しのラベル
   ==========================================================================
   各セクションの頭に置く「ABOUT／CRESCENTについて」のような英日2行のラベル。
   Text要素に crescent-section-label を付け、日本語を
   <span class="label-ja"> で囲む（メニューと同じ組み立て）。
   ========================================================================== */

.crescent-section-label {
	font-family: Montserrat, sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	line-height: 1.4 !important;
	color: #111111 !important;
	margin-bottom: 24px !important;
}

.crescent-section-label .label-ja {
	display: block !important;
	font-family: "Noto Sans JP", sans-serif !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	letter-spacing: 0.04em !important;
	opacity: 0.7 !important;
}

/* ラベルの頭の番号（2026-10-02）-----------------------------------------------
   資料11・12の「01 EVALUATION CYCLE」のように、ラベルの左に大きめの番号を置く。
   ビルダーでは次のように入力する。

     <span class="crescent-header-num">01</span>ABOUT<br><span class="label-ja">CRESCENTについて</span>

   番号は左に絶対配置し、ラベルの左に57pxの余白をとって英日2行を置く。
   最初は float で回り込ませていたが、
     ・数字の幅が 01（40px）と 04（45.5px）で違い、英語の書き出しがページ内でずれる
     ・スマホで長い英語（CAREER AFTER INTERNSHIP）が2行になると、
       日本語が番号の下に回り込んでしまう
   ため、余白を固定にした（2026-10-02）。
   色は資料と同じく上がオレンジ・下が赤寄りのピンクのグラデーション。
   数字は資料に寄せて細身の Oswald 43px（functions.php で数字だけ読み込み）。
   番号つきのラベルだけ英語を 14 → 16px に上げている（平山さま指示）。
   番号のないラベルは今までどおりで何も変わらない。 */
.crescent-section-label.crescent-section-label:has(.crescent-header-num) {
	position: relative !important;
	min-height: 38px !important;
	padding-left: 57px !important;
	font-size: 16px !important;
}

/* 360px幅のスマホで「CAREER AFTER INTERNSHIP」（インターン）が2行に折り返すので、
   スマホだけ文字の間隔を 0.12 → 0.08em に詰める（280 → 266px、置ける幅は273px） */
@media (max-width: 639px) {
	.crescent-section-label.crescent-section-label:has(.crescent-header-num) {
		letter-spacing: 0.08em !important;
	}
}

.crescent-section-label .crescent-header-num {
	position: absolute;
	top: -2px;
	left: 0;
	font-family: Oswald, Montserrat, sans-serif;
	/* 46pxだと数字の上が行の箱（38px）からはみ出し、グラデーションが
	   届かずに上端が欠けた。43pxで箱の中に収める。
	   念のため上に2pxだけ背景をのばす（top: -2px で位置は動かさない）。 */
	font-size: 43px;
	font-weight: 600;
	line-height: 38px;
	padding-top: 2px;
	letter-spacing: 0;
	background: linear-gradient(180deg, #f05a16 0%, #e4007f 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ==========================================================================
   TOP page
   ========================================================================== */

/*
 * ヒーローが見出しを兼ねるページでは、標準のページタイトルは出さない。
 * フロントページ限定にすると制作用の別ページで効かなくなるため、
 * ヒーローを含むページ全般を対象にする。
 */
.uk-article-title:has(~ * .crescent-hero),
body:has(.crescent-hero) .uk-article-title {
	display: none !important;
}

/*
 * ヒーロー左カラムの本文。
 * モバイルでは背景のレインボーに重なるので、後ろをぼかして可読性を上げる。
 * （PCでは背後が白いため見た目は変わらない）
 */
.crescent-hero-content {
	max-width: 560px !important;
	font-size: 17px !important;
	font-weight: 500 !important;
	line-height: 1.9 !important;
	background-color: rgba(255, 255, 255, 0.3) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	backdrop-filter: blur(12px) !important;
}

/*
 * ヒーローの高さ。中身は見出し・本文・ボタンだけで背が低いため、
 * 背景画像（2400x1000）が見える高さを確保する。
 *
 * 高さはコンテナに与える。背景画像はその親（uk-section）に乗っていて、
 * 中身の高さで伸びるため、コンテナを伸ばせば背景・統計バーの基準も揃う。
 */
.crescent-hero .uk-container {
	min-height: 600px !important;
}

/*
 * ヒーローの見出し。
 * 本文ブロックの右端より外に出す意図で、カラム幅を超えるサイズにしている。
 * 改行は<br>で明示されているので、折り返しは禁止して意図した2行を保つ。
 *
 * セレクタはGridの比率クラス（uk-width-1-2@m など）に依存させない。
 * Builder側で比率を変えるとクラス名が変わり、指定が全部外れてしまうため、
 * セクションに付けた crescent-hero を起点にする。
 */
.crescent-hero h1 {
	position: relative !important;
	z-index: 2 !important;
	font-size: 72px !important;
	font-weight: 900 !important;
	line-height: 1.25 !important;
	letter-spacing: 0.08em !important;
	white-space: nowrap !important;
}

/*
 * 統計バー（創業／従業員数／取引実績／年間プロモーション数）
 *
 * 1:2 Grid の下に兄弟要素として置いたうえで、絶対配置でヒーローの下部に
 * 重ねる（コンセプトボードの元デザインに合わせる）。フローから外すことで、
 * 次のセクションとの間に余計な余白を作らずに済む。
 */
.uk-container:has(.crescent-stats-grid) {
	position: relative !important;
}

/* 統計バーを絶対配置にすると、元の行は空のまま余白だけが残るので潰す */
.uk-grid-margin:has(.crescent-stats-grid) {
	margin-top: 0 !important;
}

.crescent-stats-grid {
	position: absolute !important;
	z-index: 1 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 24px !important;
	max-width: 80% !important;
	margin: 0 auto !important;
	background: rgba(17, 17, 17, 0.92) !important;
	padding: 12px 32px !important;
	border-radius: 6px !important;
}

/*
 * スマホ（〜639px）は、統計バーを絶対配置でヒーローの下端へ寄せる指定（上の
 * bottom: 24px）をやめ、ビルダーで置いた位置（通常の流れ）に戻す。
 * スマホ用ヒーロー（crescent-hero-sp）ではコンテナの高さが0になり、絶対配置のままだと
 * バーが660pxも上へ飛んでしまうため。2026-10-15 平山さまの指示で「一旦0」にした。
 * その上で、幅を画面の90%、文字を小さく（ラベル11px・数字20px・アイコン28px）した。
 */
@media (max-width: 639px) {
	.crescent-stats-grid {
		position: static !important;
		bottom: auto !important;
		/* 幅は画面の90%。コンテナの内側（左右15px）より広いので、
		   親の中央を基準に 45vw だけ左へ出して、画面の中央に置く。 */
		width: 90vw !important;
		max-width: 90vw !important;
		margin: 0 0 0 calc(50% - 45vw) !important;
	}

	/* 文字と数字を少し小さく（2026-10-15 平山さま指示）。
	   下にある通常の指定（同じ特定度）に負けないよう .el-item を挟んで上げている。 */
	.crescent-stats-grid .el-item .el-title {
		font-size: 11px !important;
		margin-bottom: 2px !important;
	}

	.crescent-stats-grid .el-item .el-content {
		font-size: 20px !important;
	}

	.crescent-stats-grid .el-item .el-image {
		width: 28px !important;
		height: 28px !important;
		margin-right: 8px !important;
	}
}

/*
 * アイコンは uk-svg でインライン展開されるため、stroke="currentColor" が
 * ここの color を拾う。指定しないと本文色（#555555）のまま暗く沈む。
 */
.crescent-stats-grid .el-item {
	color: #fff !important;
	text-align: center !important;
	padding: 4px 8px !important;
}

/* アイコンと文字を横並びのまま縦中央で揃え、全体をセルの中央に置く */
.crescent-stats-grid .el-item > .uk-grid {
	align-items: center !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
}

.crescent-stats-grid .el-item > .uk-grid > * {
	width: auto !important;
	flex: 0 0 auto !important;
}

.crescent-stats-grid .el-image {
	width: 34px !important;
	height: 34px !important;
	margin-right: 12px !important;
}

/* ラベルと数値はアイコンの右で左揃え（グループ自体はセルの中央のまま） */
.crescent-stats-grid .el-item > .uk-grid > .uk-width-expand {
	text-align: left !important;
}

/* 数値に付く単位（社超・名・件以上など）は数値の半分のサイズにする */
.crescent-stats-grid .el-content .text-small {
	font-size: 0.5em !important;
	font-weight: 700 !important;
	margin-left: 0.15em !important;
}

.crescent-stats-grid .el-content {
	margin-top: 0 !important;
}

.crescent-stats-grid .el-title {
	font-size: 13px !important;
	font-weight: 400 !important;
	opacity: 0.8 !important;
	margin: 0 0 4px !important;
	color: #fff !important;
	white-space: normal !important;
}

.crescent-stats-grid .el-content {
	font-size: 24px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	color: #fff !important;
	white-space: normal !important;
}

/*
 * 統計が2段になる幅（このサイトのブレークポイント設定では1200px未満）では、
 * 1枚の帯ではなく上下2本の帯に分ける。線での区切りは使わない。
 */
@media (max-width: 1199px) {
	.crescent-stats-grid {
		background: none !important;
		padding: 0 !important;
		border-radius: 0 !important;
	}

	/*
	 * 段の中は隙間なく繋げて1本の帯に見せる。
	 * Grid側が uk-flex-middle（中央揃え）なので、左右で中身の高さが違うと
	 * 帯の上端がずれる。stretchにして高さを揃える。
	 */
	.crescent-stats-grid .uk-grid {
		margin-left: 0 !important;
		align-items: stretch !important;
	}

	.crescent-stats-grid .uk-grid > * {
		padding-left: 0 !important;
	}

	.crescent-stats-grid .uk-grid > * > .el-item {
		height: 100% !important;
		display: flex !important;
		align-items: center !important;
	}

	/*
	 * 区切り線は、項目が背景を持つ構成に合わせて右側項目の左ボーダーで引く。
	 * UIkit標準のdivider（セルの::before）は項目の背景に隠れるため使わない。
	 */
	.crescent-stats-grid .uk-grid > :not(.uk-first-column)::before {
		display: none !important;
	}

	.crescent-stats-grid .uk-grid > :not(.uk-first-column) .el-item {
		border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
	}

	/* 上下の段の間 */
	.crescent-stats-grid .uk-grid > .uk-grid-margin {
		margin-top: 2px !important;
	}

	.crescent-stats-grid .el-item {
		background: rgba(17, 17, 17, 0.92) !important;
		padding: 12px 8px !important;
	}

	.crescent-stats-grid .uk-grid > .uk-first-column .el-item {
		border-radius: 6px 0 0 6px !important;
	}

	.crescent-stats-grid .uk-grid > :not(.uk-first-column) .el-item {
		border-radius: 0 6px 6px 0 !important;
	}
}

/* ヒーロー（スマートフォン用の設定）― 2026-10-15 削除
   TOPのヒーローをPC用とスマホ用の別セクションで作る方針にしたため、PC用ヒーローから
   スマホ用の指定（959px以下）を削除した。
     ・背景を縦位置のスマホ用画像（03-hero-mobile.jpg）に差し替え、contain・下寄せ
     ・縦積み用のコンテナの高さ（91.2vw ＋ 202px）
     ・見出し 36px／本文の幅 72%／CTAボタンの大きさと絶対配置
     ・統計バーを画面幅いっぱいで最下部に置く指定（640〜959px の左右余白30pxも）
   スマホ用ヒーロー（crescent-hero-sp）は、ビルダーで制御する。 */

/* ヒーローの見出し「人生を、もっと面白く。」― タブレットは最大限に大きくする
   --------------------------------------------------------------------------
   2026-10-15 平山さまの指示で、PC・タブレット用のヒーロー（crescent-hero-pc）の
   h1 を、タブレット（640〜1199px）で大きくした（最初は、いちばん長い行
   「もっと面白く。」がコンテナの幅いっぱい）。
   2026-10-16 「少し小さく。その行が画面幅の60%くらい」との指示で、60% にした。
     1字の幅 ＝ 文字の大きさ ＋ 字間（0.08em）→ 7字で 7.56em。
     画面幅の60% ÷ 7.56 ＝ 文字の大きさ（60vw / 7.56）。
   折り返さない（nowrap）。改行は <br> の位置どおりの2行。
   PC（1200px以上）はビルダーの設定のまま。 */
@media (min-width: 640px) and (max-width: 1199px) {
	.crescent-hero-pc h1 {
		font-size: calc(60vw / 7.56) !important;
		line-height: 1.25 !important;
		letter-spacing: 0.08em !important;
		white-space: nowrap !important;
	}
}

/* ==========================================================================
   TOP page ─ ABOUT
   ==========================================================================
   構成（YOOthemeビルダー側）:

     Section .crescent-about
       └ Grid 2:1
           左 2/3 … .crescent-about-visual（背景にレインボー）
                    Text .crescent-section-label
                    ＋ 見出し ＋ 本文 ＋ Button（Default）
           右 1/3 … Grid .crescent-values（1カラム・4アイテム）
                    各アイテム … Title=英語 / Meta=日本語 / Content=ひとこと
   ========================================================================== */

/*
 * 背景のレインボーは Section ではなく「左カラム」に設定する。
 * 画像は左半分が白・右半分がブラシという作りなので、コラムに敷けば
 * テキストは白側、ブラシは右側に自然に収まり、積まれても比率が保たれる。
 * 少し拡大して上下を見切れさせ、はみ出し分は左へ逃がす。
 */
/* YOOthemeはコラムに背景を付けると内側に .uk-tile を作り、そちらに背景を置く */
.crescent-about-visual .uk-tile {
	background-size: auto 118% !important;
	background-position: right center !important;
	padding: 0 !important;
}

/* 見出し … セクションラベルと理念の英語見出しは除外する */
.crescent-about :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
	font-size: 48px !important;
	font-weight: 700 !important;
	line-height: 1.45 !important;
	letter-spacing: 0.08em !important;
	color: #111111 !important;
	margin-bottom: 32px !important;
}

/* PC（1200px以上）の見出しを、03 CONTENT の見出し（32px・行の高さ1.6・下余白20px）に
   揃える（2026-10-17 平山さま指示。01 ABOUT → 次に 02 BUSINESS の予定）。
   タブレット（960〜1199px＝40px、959px以下＝28px）は、今までどおり。 */
@media (min-width: 1200px) {
	.crescent-about :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
		font-size: 32px !important;
		line-height: 1.6 !important;
		margin-bottom: 20px !important;
	}
}

/* 本文 … Text要素は p ではなく div.uk-panel で出力される */
.crescent-about p,
.crescent-about .uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label) {
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 2 !important;
	color: #555555 !important;
	max-width: 28em !important;
}

/* 各カラムの先頭要素は上の余白を消して上端を揃える */
.crescent-about .uk-grid > * > .uk-margin:first-child {
	margin-top: 0 !important;
}

/* --------------------------------------------------------------------------
   理念（右カラムに縦並び）
   -------------------------------------------------------------------------- */

.crescent-values .el-item {
	border-top: 1px solid #dddddd !important;
	padding-top: 18px !important;
}

.crescent-values .uk-grid > * {
	margin-top: 28px !important;
}

.crescent-values .uk-grid > :first-child {
	margin-top: 0 !important;
}

/* 英語見出し */
.crescent-values .el-title {
	font-family: Montserrat, sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	line-height: 1.4 !important;
	color: #111111 !important;
	margin: 0 !important;
}

/* 日本語の小見出し */
.crescent-values .el-meta {
	font-family: "Noto Sans JP", sans-serif !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	letter-spacing: 0.04em !important;
	line-height: 1.4 !important;
	color: #111111 !important;
	opacity: 0.7 !important;
	margin: 2px 0 0 !important;
}

/* ひとこと */
.crescent-values .el-content {
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.8 !important;
	color: #111111 !important;
	margin: 10px 0 0 !important;
}

/*
 * 1200px未満は左カラムが細くなる。背景の高さ基準（auto 118%）のままだと
 * 画像が横に伸びて白い側がコラムの外へ出てしまい、本文がブラシに埋まる。
 * この幅はコラム幅基準にして、白い側が左半分に残るようにする。
 */
@media (min-width: 640px) and (max-width: 1199px) {
	.crescent-about-visual .uk-tile {
		background-size: 105% auto !important;
		background-position: right center !important;
	}
}

/* 左カラムが細くなるぶん見出しを詰める */
@media (min-width: 960px) and (max-width: 1199px) {
	.crescent-about :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
		font-size: 40px !important;
	}
}

/*
 * ABOUT のスマホ（639px以下）用の指定（ブラシ背景を170%に拡大して右下へ寄せる指定、
 * .crescent-values の上余白48px）は、2026-10-17 に削除した。
 * スマホ用は別セクション（crescent-hero-sp）で、ビルダーが制御する。
 */

@media (max-width: 959px) {
	.crescent-about :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
		font-size: 28px !important;
		margin-bottom: 24px !important;
	}

	.crescent-about p,
	.crescent-about .uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label) {
		font-size: 15px !important;
		line-height: 1.9 !important;
		max-width: none !important;
	}
}

/* ==========================================================================
   フッター（全ページ共通）
   ==========================================================================
   構成（YOOthemeビルダー側）:

     Section .crescent-footer   … 背景 #111111
       └ Grid 4カラム（ゆるく 2:1:1:1）
           1 … ロゴ（白）／会社名・住所／コピーライト
           2 … Menu（ABOUT・BUSINESS・ディルミー・取扱商材）
           3 … Menu（COMPANY・RECRUIT・NEWS・お問い合わせ）
           4 … FOLLOW US ＋ SNSアイコン

   メニューのラベルはヘッダーと同じ書き方:
     ABOUT<br><span class="nav-sub">CRESCENTについて</span>
   ========================================================================== */

.crescent-footer {
	background-color: #111111 !important;
	padding-top: 64px !important;
	padding-bottom: 32px !important;
	color: #ffffff !important;
}

.crescent-footer a {
	color: #ffffff !important;
}

/*
 * ブロックの区切り線。
 * 全幅1カラムの行（コピーライト）はUIkitが uk-first-column を付けないので、
 * .uk-width-1-1 も除外しないと行頭に線が出てしまう。
 */
.crescent-footer .uk-grid > :not(.uk-first-column):not(.uk-width-1-1) {
	border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* --------------------------------------------------------------------------
   左カラム（ロゴ・会社情報）
   -------------------------------------------------------------------------- */

.crescent-footer .footer-company {
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	color: #ffffff !important;
	margin: 24px 0 6px !important;
}

.crescent-footer .footer-address {
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.8 !important;
	color: #ffffff !important;
	opacity: 0.7 !important;
	margin: 0 !important;
}

.crescent-footer .footer-copyright {
	font-size: 11px !important;
	font-weight: 400 !important;
	letter-spacing: 0.04em !important;
	color: #ffffff !important;
	opacity: 0.5 !important;
	margin: 0 !important;
}

/* --------------------------------------------------------------------------
   フッターメニュー（ヘッダーと同じ英日2行）
   -------------------------------------------------------------------------- */

.crescent-footer .uk-nav > li > a {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	padding: 0 !important;
	font-family: Montserrat, sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	line-height: 1.4 !important;
	color: #ffffff !important;
}

.crescent-footer .uk-nav > li > a:hover {
	opacity: 0.7 !important;
}

.crescent-footer .uk-nav > li + li {
	margin-top: 18px !important;
}

.crescent-footer .nav-sub {
	font-family: "Noto Sans JP", sans-serif !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	letter-spacing: 0.04em !important;
	opacity: 0.7 !important;
}

/* --------------------------------------------------------------------------
   FOLLOW US
   -------------------------------------------------------------------------- */

.crescent-footer .footer-follow {
	font-family: Montserrat, sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	color: #ffffff !important;
	margin: 0 0 20px !important;
}

.crescent-footer .uk-icon svg {
	width: 20px !important;
	height: 20px !important;
}

.crescent-footer .uk-icon {
	color: #ffffff !important;
}

/*
 * Social要素の既定は uk-icon-button（白い丸）。黒背景では丸だけが見えて
 * アイコンが消えるので、丸を消して白いグリフだけにする。
 */
.crescent-footer .uk-icon-button {
	background-color: transparent !important;
	color: #ffffff !important;
	width: auto !important;
	height: auto !important;
	border-radius: 0 !important;
}

.crescent-footer .uk-icon-button:hover,
.crescent-footer .uk-icon-button:focus {
	background-color: transparent !important;
	color: #ffffff !important;
	opacity: 0.7 !important;
}

/* --------------------------------------------------------------------------
   積まれる幅
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.crescent-footer {
		padding-top: 48px !important;
	}

	/* 縦並びになると縦線は成立しないので消す */
	.crescent-footer .uk-grid > * {
		border-left: none !important;
	}
}

/* ==========================================================================
   TOP page ─ BUSINESS
   ==========================================================================
   構成（YOOthemeビルダー側）:

     Section .crescent-business
       └ Grid 1:2（@s＝640pxで左右に分かれる。ABOUTと同じ）
           左 1/3 … ラベル BUSINESS／事業紹介 ＋ .crescent-values（2事業）
           右 2/3 … 写真

   DOM順は「テキスト → 写真」。640px以上はその順で左右に並ぶので写真が右、
   640px未満で積まれたときだけ order で写真を上に出す。
   ========================================================================== */

/*
 * 見出し。左カラムが1/3（PCで約475px）なので、ABOUTの48pxでは折り返しすぎる。
 * 28pxにしていたが、2026-10-17 に平山さまの指示で、PC（1200px以上）は
 * 03 CONTENT と同じ32pxに揃えた。タブレット以下は28pxのまま。
 */
.crescent-business :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.08em !important;
	color: #111111 !important;
	margin-bottom: 20px !important;
}

@media (min-width: 1200px) {
	.crescent-business :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
		font-size: 32px !important;
	}
}

/* 本文。Text要素は div.uk-panel で出力されるので、そちらにも当てる */
.crescent-business p,
.crescent-business .uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label) {
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.9 !important;
	color: #555555 !important;
}

/* 本文と事業リストの間隔 */
.crescent-business .crescent-values {
	margin-top: 32px !important;
}

/* 事業リストとCTAの間隔（既定の20pxだと罫線に対して詰まって見える） */
.crescent-business .crescent-values + .uk-margin {
	margin-top: 32px !important;
}

/*
 * 640px未満は1カラムに積まれる。写真を上に。
 * UIkitは2番目の子に uk-grid-margin（上余白）を付けるので、
 * 入れ替えたあとに余白も付け替える。
 */
@media (max-width: 639px) {
	.crescent-business .tm-grid-expand > :nth-child(2) {
		order: -1 !important;
		margin-top: 0 !important;
	}

	/* ラベルだけの行には当てない（当たるとラベルの上に30px空く） */
	.crescent-business .tm-grid-expand:not(:has(.crescent-section-label)) > :nth-child(1) {
		margin-top: 30px !important;
	}
}

/* ==========================================================================
   TOP page ─ CONTENT（ディルミー）
   ==========================================================================
   構成（YOOthemeビルダー側）:

     Section .crescent-content（幅Large）
       └ Grid 1:1（**Mediumのみ指定＝1200pxで左右に分かれる**）
           左 … キービジュアル（top-dealme-bg.png）
           右 … ラベル CONTENT／ディルミー ＋ DealMeロゴ
                ＋ 見出し ＋ 本文 ＋ Button（Secondary）

   1200px未満で積むのは、1:1だとテキストカラムが370px程度になり、
   16文字の見出しが「使える、」だけの行を作ってしまうため。
   DOM順が「画像 → テキスト」なので、積むと自動で画像が上に来る。
   ========================================================================== */

/*
 * キービジュアルは左カラムの幅にそのまま収める（2026-10-02 平山さま指示ではみ出しをやめた）。
 * 以前は 135%・左に -27% で、左は画面の端、右は右カラムにはみ出させていた。
 * 1200px未満では画面の右にもはみ出していた（1000pxで約56px）。
 */

/* DealMeのロゴ。見出しの上に置く */
.crescent-content .crescent-dealme-logo {
	width: 200px !important;
	margin-bottom: 24px !important;
}

/* 見出し */
.crescent-content :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
	font-size: 32px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.08em !important;
	color: #111111 !important;
	margin-bottom: 20px !important;
}

/* 本文。Text要素は div.uk-panel で出力される */
.crescent-content p,
.crescent-content .uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label) {
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.9 !important;
	color: #555555 !important;
}

/* 本文とCTAの間隔 */
.crescent-content .uk-button {
	margin-top: 12px !important;
}

/* --------------------------------------------------------------------------
   640〜1199px（左右のままだがテキストカラムが約370pxしかない）
   --------------------------------------------------------------------------
   見出しは16文字あるので、32pxのままだと「使える、」だけの行ができる。
   カラム幅から逆算した大きさに落として、途中で割れないようにする。
   ※ビルダーでカラム幅のSmall指定を外して1200px未満は積む形にすれば、
   　 見出しをもっと大きく出せる。
   -------------------------------------------------------------------------- */

@media (min-width: 640px) and (max-width: 1199px) {
	.crescent-content :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
		font-size: min(32px, calc((50vw - 70px) / 17)) !important;
	}

	.crescent-content .crescent-dealme-logo {
		width: 150px !important;
	}

	.crescent-content p,
	.crescent-content .uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label) {
		font-size: 15px !important;
	}
}

/* --------------------------------------------------------------------------
   640px未満（スマホ）
   --------------------------------------------------------------------------
   CONTENT のスマホ（639px以下）用の指定（見出し min(26px, 5.2vw)・字間0.04em、
   ロゴ170px、画像と本文の間隔30px）は、2026-10-17 に削除した。
   スマホ用は別セクション（crescent-hero-sp）で、ビルダーが制御する。
   -------------------------------------------------------------------------- */

/* ==========================================================================
   TOP page ─ PRODUCTS（取扱商材・ブランド）
   ==========================================================================
   構成（YOOthemeビルダー側）:

     Section .crescent-products（幅Large）
       └ Text  .crescent-section-label   … PRODUCTS／取扱商材・ブランド
       └ Headline                        … 信頼できるサービスを、最適なカタチでお届けする。
       └ Text                            … 本文
       └ Text（HTML）                     … <ul class="crescent-brands"> のブランド一覧
       └ Button（Default）                … 取扱商材を見る →

   全幅・中央揃えのバンド。ABOUT／BUSINESS／CONTENTが左右2カラムなので、
   ここを中央組みにしてリズムを変える。
   ブランドはロゴ支給まで文字組。届いたら <li> の中身を <img> に差し替えるだけ。
   ========================================================================== */

/*
 * 左揃え。ミニヘッダーを全セクション左端に統一したため、
 * このセクションだけ中央組みだとラベルと本体がずれて見える。
 */
.crescent-products {
	text-align: left !important;
}

/*
 * 背景のブラシは画面の横半分ほどを占める大きさで右側に。
 * ブランドカードの裏まで届くので、カードは白地にして文字を読めるようにする。
 */
.crescent-products .uk-tile {
	background-size: 50% auto !important;
	background-position: right top !important;
}

.crescent-products :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
	max-width: 640px !important;
	font-size: 32px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.08em !important;
	color: #111111 !important;
	margin-bottom: 20px !important;
}

.crescent-products p,
.crescent-products .uk-panel:not(.crescent-section-label) {
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.9 !important;
	color: #555555 !important;
	max-width: 560px !important;
}

/* --------------------------------------------------------------------------
   ブランド一覧
   --------------------------------------------------------------------------
   Grid（Class: crescent-brands / Columns 4）＋ Item要素 × 8。
     Image   … ロゴ（未支給の項目は空のまま）
     Title   … ブランド名（ロゴがある項目は自動で隠す）
     Content … カテゴリー

   ロゴが届いたらImageに入れるだけで、文字組→ロゴに切り替わる。
   -------------------------------------------------------------------------- */

.crescent-brands {
	text-align: center !important;
}

.crescent-brands.crescent-brands {
	margin-top: 48px !important;
}

/*
 * カードを2段組みにする（上段＝ロゴ／ブランド名、下段＝カテゴリー）。
 * 上段を 1fr にしておくと、ロゴの高さがバラついても上段の中で上下中央に
 * 収まり、下段のカテゴリーは常に同じ位置に並ぶ。
 * → ロゴ画像を同じ縦横比で作り直す必要がない。
 * Gridの Match Height（uk-grid-match）でカード自体の高さは揃っている前提。
 */
.crescent-brands .el-item {
	display: grid !important;
	grid-template-rows: 64px auto !important;
	justify-items: center !important;
	align-items: center !important;
	height: 100% !important;
	padding: 20px 12px !important;
	background-color: #ffffff !important;
	border: 1px solid #e5e5e5 !important;
	border-radius: 6px !important;
}

/*
 * ロゴの大きさ合わせ。
 * 縦横比が 1.7:1（DMM TV＋Disney+）〜 6.5:1（MANOMA）までバラつくので、
 * 高さを固定したうえで幅の上限でクランプする。
 *   - height を指定しないと、元画像が小さいロゴ（NURO光 127x26）が
 *     拡大されず一つだけ小さく見える
 *   - object-fit: contain を併せると、幅で頭打ちになっても縦横比が保たれる
 */
.crescent-brands .el-image {
	height: 42px !important;
	width: auto !important;
	max-width: 180px !important;
	object-fit: contain !important;
}

/* ブランド名。ロゴが入っている項目では隠す */
.crescent-brands .el-title {
	font-size: 17px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	line-height: 1.4 !important;
	color: #111111 !important;
	margin: 0 !important;
}

.crescent-brands .el-item:has(.el-image) .el-title {
	display: none !important;
}

/* カテゴリー */
.crescent-brands .el-content {
	font-size: 11px !important;
	font-weight: 400 !important;
	letter-spacing: 0.02em !important;
	line-height: 1.4 !important;
	color: #555555 !important;
	margin: 10px 0 0 !important;
}

.crescent-products .uk-button {
	margin-top: 40px !important;
}

@media (max-width: 959px) {
	.crescent-products :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
		font-size: min(26px, 5.2vw) !important;
		letter-spacing: 0.04em !important;
	}

	.crescent-products p,
	.crescent-products .uk-panel:not(.crescent-section-label) {
		font-size: 15px !important;
	}

	/*
	 * この幅ではテキストが全幅になるため、右上にブラシを置くと必ず重なる。
	 * CTAの横（右下）に小さく逃がす。
	 */
	.crescent-products .uk-tile {
		background-size: auto 150px !important;
		background-position: right bottom !important;
	}

	.crescent-brands {
		margin-top: 32px !important;
	}

	.crescent-brands .el-item {
		grid-template-rows: 56px auto !important;
		min-height: 0 !important;
		padding: 16px 10px !important;
	}

	.crescent-brands .el-title {
		font-size: 15px !important;
	}

	.crescent-brands .el-image {
		height: 34px !important;
		max-width: 130px !important;
	}

	.crescent-products .uk-button {
		margin-top: 32px !important;
	}
}

/* ==========================================================================
   TOP page ─ CULTURE（働く環境・カルチャー）
   ==========================================================================
   構成（YOOthemeビルダー側）:

     Section .crescent-culture（幅Large）
       └ Grid 1:1（Small・Medium both = 640pxで左右に分かれる）
           左 … 写真（社員が写っているもの）
           右 … ラベル CULTURE／働く環境・カルチャー
                ＋ 見出し ＋ Grid .crescent-culture-list（1カラム・Item×5）
                     Title   = 項目名
                     Content = 説明文

   番号（01〜05）はCSSカウンタで自動採番。項目を増減しても振り直し不要。
   ========================================================================== */

.crescent-culture :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
	font-size: 32px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.08em !important;
	color: #111111 !important;
	margin-bottom: 28px !important;
}

.crescent-culture p,
.crescent-culture .uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label) {
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.9 !important;
	color: #555555 !important;
}

/* 左の写真の大きさ・縦位置の指定（幅100%・上下中央）は、2026-10-06 に削除した。
   ビルダーで制御する。 */

/* --------------------------------------------------------------------------
   働く魅力のリスト（番号つき）
   -------------------------------------------------------------------------- */

.crescent-culture-list .uk-grid {
	counter-reset: culture !important;
}

.crescent-culture-list .el-item {
	display: grid !important;
	grid-template-columns: 38px 1fr !important;
	align-items: baseline !important;
	padding: 16px 0 !important;
	border-top: 1px solid #e5e5e5 !important;
}

.crescent-culture-list .uk-grid > :last-child .el-item {
	border-bottom: 1px solid #e5e5e5 !important;
}

.crescent-culture-list .el-item::before {
	counter-increment: culture !important;
	content: counter(culture, decimal-leading-zero) !important;
	grid-column: 1 !important;
	grid-row: 1 !important;
	font-family: Montserrat, sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	color: #111111 !important;
	opacity: 0.45 !important;
}

.crescent-culture-list .el-title {
	grid-column: 2 !important;
	grid-row: 1 !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	line-height: 1.5 !important;
	color: #111111 !important;
	margin: 0 !important;
}

.crescent-culture-list .el-content {
	grid-column: 2 !important;
	grid-row: 2 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.8 !important;
	color: #555555 !important;
	margin: 6px 0 0 !important;
}

/* 項目間の余白はカードの padding で取るので、グリッド側は詰める */
.crescent-culture-list .uk-grid > * {
	margin-top: 0 !important;
}

@media (max-width: 959px) {
	.crescent-culture :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
		font-size: min(26px, 5.2vw) !important;
		letter-spacing: 0.04em !important;
		margin-bottom: 20px !important;
	}

	.crescent-culture-list .el-item {
		grid-template-columns: 32px 1fr !important;
		padding: 14px 0 !important;
	}

	.crescent-culture-list .el-title {
		font-size: 15px !important;
	}

	.crescent-culture-list .el-content {
		font-size: 13px !important;
	}
}

/* PRODUCTS のスマホ（639px以下）用の指定（ブラシ背景170%・下余白62%）は、
   2026-10-17 に削除した。スマホ用は別セクション（crescent-hero-sp）で、ビルダーが制御する。 */

/* ==========================================================================
   TOP page ─ RECRUIT（採用情報）
   ==========================================================================
   構成（YOOthemeビルダー側）:

     Section .crescent-recruit（幅Large）
       └ Text .crescent-section-label   … RECRUIT／採用情報
       └ Headline                       … 挑戦を、全国へ。未来を、もっと広く。
       └ Text                           … 本文
       └ Grid 2カラム .crescent-recruit-cards
             各カラム … Image ＋ Headline ＋ Text ＋ Button（Primary）

   このセクションの役割はエントリー導線。CONTENT・CULTUREが
   「画像左＋テキスト右」で続くので、ここは2枚のカードを横並びにして変化をつける。
   ========================================================================== */

.crescent-recruit :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
	font-size: 32px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.08em !important;
	color: #111111 !important;
	margin-bottom: 20px !important;
}

.crescent-recruit p,
.crescent-recruit .uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label) {
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.9 !important;
	color: #555555 !important;
	max-width: 720px !important;
}

/* --------------------------------------------------------------------------
   採用カード2枚
   -------------------------------------------------------------------------- */

.crescent-recruit-cards {
	margin-top: 48px !important;
}

/*
 * 支給されたのは背景透過の切り抜き（人物＋ブラシ／1536x1024）。
 * トリミングするとブラシの先端が切れるので、比率はそのまま使う。
 * 角丸も付けない（背景が無いので意味がなく、ブラシが不自然に切れる）。
 */
.crescent-recruit-cards .el-image {
	width: 100% !important;
}

/*
 * フレームに占める人物の大きさが違い、インターン側だけ人物が大きく見える。
 * 2026-09-17に社員側の写真を引きの構図に差し替えたので、0.85では下げすぎて
 * カードが内側に寄って見えるようになった。0.93に緩めている。
 * transform なら見た目だけ縮み、枠の高さは変わらないので
 * 見出し・本文・ボタンの位置が左右でずれない。
 * 下端を基準にして、見出しとの間隔も保つ。
 *
 * ※ .crescent-recruit-cards はGrid要素そのものに付く（ラッパーではない）。
 *    `.crescent-recruit-cards .uk-grid` では一致しないので直下の子を指定する。
 */
.crescent-recruit-cards > :nth-child(2) .el-image {
	transform: scale(0.93) !important;
	transform-origin: center bottom !important;
}

/* カード内の見出し */
.crescent-recruit-cards :is(h1, h2, h3, h4) {
	font-size: 22px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	line-height: 1.5 !important;
	color: #111111 !important;
	margin: 24px 0 10px !important;
}

.crescent-recruit-cards p,
.crescent-recruit-cards .uk-panel {
	font-size: 15px !important;
	line-height: 1.8 !important;
	color: #555555 !important;
	max-width: none !important;
	margin: 0 !important;
}

.crescent-recruit-cards .uk-button {
	margin-top: 20px !important;
}

@media (max-width: 959px) {
	.crescent-recruit :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
		font-size: min(26px, 5.2vw) !important;
		letter-spacing: 0.04em !important;
	}

	.crescent-recruit p,
	.crescent-recruit .uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label) {
		font-size: 15px !important;
	}

	.crescent-recruit-cards {
		margin-top: 32px !important;
	}

	.crescent-recruit-cards :is(h1, h2, h3, h4) {
		font-size: 19px !important;
		margin-top: 18px !important;
	}

	.crescent-recruit-cards p,
	.crescent-recruit-cards .uk-panel {
		font-size: 14px !important;
	}
}

/* ==========================================================================
   TOP page ─ NEWS（ニュース）
   ==========================================================================
   構成（YOOthemeビルダー側）:

     Section .crescent-news（幅Large）
       └ Grid 1カラム
             └ Text .crescent-section-label   … NEWS／ニュース
       └ Grid 1カラム .crescent-news-list     … 動的コンテンツ（投稿・3件・日付降順）
             項目 … Meta=日付（Y.m.d）／Content=カテゴリー（リンク有り）／Title=記事タイトル
       └ Button（Primary）.crescent-news-more … ニュース一覧を見る

   1行＝1記事。PCは「日付／カテゴリ／タイトル／矢印」の横一列、
   640px未満は「日付＋カテゴリ」を1行目、タイトルを2行目に折り返す。
   罫線はItem側の border-bottom で引き、リスト上端だけGridに border-top を置く。
   ========================================================================== */

.crescent-news-list {
	border-top: 1px solid #e5e5e5 !important;
}

.crescent-news-list.crescent-news-list {
	margin-top: 32px !important;
}

/*  Gridをコラムの中に置くと、class は Grid 本体ではなく外側の .uk-margin に付く。
    セクション直下に置いた場合は Grid 本体に付く。どちらでも効くように両対応にする。
    uk-grid は margin-left が負・カラムに padding-left があるので、
    打ち消さないとリストだけ左にずれて罫線が端まで届かない。                    */
.crescent-news-list > .uk-grid,
.crescent-news-list.uk-grid {
	margin-left: 0 !important;
	margin-top: 0 !important;
}

.crescent-news-list > .uk-grid > *,
.crescent-news-list.uk-grid > * {
	padding-left: 0 !important;
	margin-top: 0 !important;
}

/*  ビルダーの出力順は タイトル → 日付 → カテゴリ なので、grid-row を明示しないと
    自動配置でタイトルだけ1行目・日付とカテゴリが2行目に落ちる。               */
.crescent-news-list .el-item {
	display: grid !important;
	grid-template-columns: 80px 124px 1fr 20px !important;
	align-items: center !important;
	column-gap: 16px !important;
	padding: 20px 0 !important;
	border-bottom: 1px solid #e5e5e5 !important;
}

/* 行全体をリンクにしているので、ホバーは行ごと反応させる */
.crescent-news-list .el-item:hover .el-title {
	opacity: 0.55 !important;
}

/* 日付 ------------------------------------------------------------------ */
.crescent-news-list .el-meta {
	grid-column: 1 !important;
	grid-row: 1 !important;
	margin: 0 !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.06em !important;
	font-variant-numeric: tabular-nums !important;
	color: #555555 !important;
}

/* カテゴリのバッジ ------------------------------------------------------- */
.crescent-news-list .el-content {
	grid-column: 2 !important;
	grid-row: 1 !important;
	margin: 0 !important;
	font-size: 0 !important; /* インライン要素間の余白を消す */
}

.crescent-news-list .el-content > * {
	margin: 0 !important;
}

.crescent-news-list .el-content a {
	display: inline-block !important;
	/* padding を含めた幅で揃えたいので border-box にする。
	   これが無いと min-width に左右10pxが足されて列からはみ出す */
	box-sizing: border-box !important;
	min-width: 124px !important;
	padding: 4px 10px !important;
	border-radius: 3px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.04em !important;
	text-align: center !important;
	text-decoration: none !important;
	/* 既定は無彩色。以下でカテゴリごとに上書きする */
	background-color: #f0f0f0 !important;
	color: #555555 !important;
}

/*  ブランドカラーをそのまま白抜きにするとオレンジ・グリーンが
    コントラスト不足になるため、淡い色面＋濃い文字にしている。
    いずれも文字と背景で 4.5:1 以上。                                     */
.crescent-news-list .el-content a[href*="/category/press/"] {
	background-color: #fce0f0 !important;
	color: #cb0071 !important;
}

.crescent-news-list .el-content a[href*="/category/info/"] {
	background-color: #e0edf6 !important;
	color: #0068b7 !important;
}

.crescent-news-list .el-content a[href*="/category/media/"] {
	background-color: #f2e1f0 !important;
	color: #920783 !important;
}

.crescent-news-list .el-content a[href*="/category/event/"] {
	background-color: #fef3e0 !important;
	color: #9e6300 !important;
}

.crescent-news-list .el-content a[href*="/category/other/"] {
	background-color: #e0f3e9 !important;
	color: #007d38 !important;
}

/* タイトル --------------------------------------------------------------- */
.crescent-news-list .el-title {
	grid-column: 3 !important;
	grid-row: 1 !important;
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.7 !important;
	letter-spacing: 0.04em !important;
	color: #111111 !important;
	transition: opacity 0.2s ease !important;
}

.crescent-news-list .el-title a {
	color: inherit !important;
	text-decoration: none !important;
}

/* 矢印 ------------------------------------------------------------------- */
.crescent-news-list .el-item::after {
	content: "" !important;
	grid-column: 4 !important;
	grid-row: 1 !important;
	width: 20px !important;
	height: 10px !important;
	background-color: #111111 !important;
	/* 右向き矢印。currentColor が使えないので mask で色を持たせる */
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5h18M14 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5h18M14 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform 0.2s ease !important;
}

.crescent-news-list .el-item:hover::after {
	transform: translateX(4px) !important;
}

/* 一覧へのボタン --------------------------------------------------------- */
.crescent-news-more.crescent-news-more {
	margin-top: 40px !important;
}

/* タブレット（〜1199px）：日付とカテゴリの幅を詰める --------------------- */
@media (max-width: 1199px) {
	.crescent-news-list .el-item {
		grid-template-columns: 76px 124px 1fr 20px !important;
		column-gap: 12px !important;
	}

	.crescent-news-list .el-content a {
		min-width: 124px !important;
	}

	.crescent-news-list .el-title {
		font-size: 15px !important;
	}
}

/* スマートフォン（〜639px）：日付＋カテゴリを1行目、タイトルを2行目へ ---- */
@media (max-width: 639px) {
	.crescent-news-list {
		margin-top: 24px !important;
	}

	/* 1列目=日付 2列目=カテゴリ 3列目=矢印。タイトルは2行目で1〜2列をまたぐ */
	.crescent-news-list .el-item {
		grid-template-columns: auto 1fr 20px !important;
		grid-template-rows: auto auto !important;
		row-gap: 8px !important;
		column-gap: 12px !important;
		padding: 18px 0 !important;
	}

	.crescent-news-list .el-meta {
		grid-column: 1 !important;
		grid-row: 1 !important;
	}

	.crescent-news-list .el-content {
		grid-column: 2 !important;
		grid-row: 1 !important;
		justify-self: start !important;
	}

	.crescent-news-list .el-title {
		grid-column: 1 / 3 !important;
		grid-row: 2 !important;
		font-size: 15px !important;
		line-height: 1.6 !important;
	}

	.crescent-news-list .el-item::after {
		grid-column: 3 !important;
		grid-row: 1 / 3 !important;
		align-self: center !important;
	}

	.crescent-news-list .el-content a {
		min-width: 0 !important;
		padding: 3px 8px !important;
		font-size: 10px !important;
	}

	.crescent-news-more {
		margin-top: 28px !important;
	}
}

/* ==========================================================================
   TOP page ─ MESSAGE（代表メッセージ）
   ==========================================================================
   構成（YOOthemeビルダー側）:

     Section .crescent-message（幅Large）
       └ Grid 1カラム
             └ Text .crescent-section-label   … MESSAGE／代表メッセージ
       └ Grid 2カラム .crescent-message-body（左3-5・右2-5）
             左 … Headline ＋ Text（リード）＋ Text .crescent-message-sign ＋ Button
             右 … Image .crescent-message-photo（代表の写真）

   見出しの一部だけ色を変える指定は、指示書のFONT指定（見出し＝Noto Sans JP Black）
   のまま文字色だけを動かす方式。INTERNページの「"圧倒的な成長"を手に入れる。」と
   同じ考え方で、筆文字は使わない。
   ========================================================================== */

.crescent-message :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
	font-size: 40px !important;
	font-weight: 900 !important;
	line-height: 1.55 !important;
	letter-spacing: 0.06em !important;
	color: #111111 !important;
	margin-bottom: 24px !important;
}

/*  見出しの一部をブランドカラーのグラデーションにする。
    background-clip: text は背景を文字の形で切り抜くので、
    span が2〜3文字だとグラデーションの幅もその分しかない。
    4色使うと変化が細かすぎて濁るため、2色に絞っている。

    2026-09-19: トップのMESSAGE専用だったが、下層ページのヒーローでも
    資料が同じ表現を使っている（セールスプロモーションの「体験」、
    COMPANYの「全国」「もっと広く」）ため、class1つで全ページ共通にした。   */
.accent {
	background: linear-gradient(100deg, #f39800 0%, #e4007f 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
}

/*  class は Text要素が出力する .uk-panel 自身に付く。
    この汎用ルールは特定度が (0,5,0) あるので、除外しておかないと
    .crescent-message-close (0,1,0) では !important 同士でも勝てない。        */
.crescent-message p,
.crescent-message .uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label):not(.crescent-message-close):not(.crescent-message-sign) {
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 2 !important;
	color: #555555 !important;
	max-width: 640px !important;
}

/* 結びの2行 --------------------------------------------------------------
   資料では本文より一段大きく、「全力」「面白い未来」に色が入っている。
   見出しの40pxとの中間に置いて、本文 → 結び → 署名 の順に段を作る。       */
.crescent-message-close.crescent-message-close {
	margin-top: 32px !important;
}

.crescent-message-close,
.crescent-message-close p,
.crescent-message-close .uk-panel {
	font-size: 26px !important;
	font-weight: 900 !important;
	line-height: 1.7 !important;
	letter-spacing: 0.04em !important;
	color: #111111 !important;
	max-width: none !important;
}

/*  2カラムを上下中央で揃える。写真のほうが背が高いので、
    これが無いと左のテキストが上に張り付く。
    class が Grid本体・ラッパー・カラムのどれに付いても効くよう、
    写真のほうから :has() で親のGridを特定している。                          */
.crescent-message :is(.uk-grid):has(> * > .crescent-message-photo) {
	align-items: center !important;
}

/* 署名 ------------------------------------------------------------------- */
.crescent-message-sign.crescent-message-sign {
	margin-top: 32px !important;
}

/* 署名の上に短い罫線を引いて、本文と切り離す */
.crescent-message-sign::before {
	content: "" !important;
	display: block !important;
	width: 40px !important;
	height: 1px !important;
	background-color: #111111 !important;
	margin-bottom: 18px !important;
}

.crescent-message-sign,
.crescent-message-sign p,
.crescent-message-sign .uk-panel {
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.8 !important;
	letter-spacing: 0.1em !important;
	color: #111111 !important;
}

/* 署名のローマ字。資料では手書きサインだが、ここは英字書体で小さく添える */
.crescent-message-sign .en {
	display: block !important;
	margin-top: 4px !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	font-style: italic !important;
	letter-spacing: 0.08em !important;
	color: #555555 !important;
}

/* 写真 ------------------------------------------------------------------- */
.crescent-message-photo img,
.crescent-message-photo .el-image {
	width: 100% !important;
	height: auto !important;
	display: block !important;
	/* 縦2:3の切り抜きなので、カラム幅いっぱいにすると背が高くなりすぎる */
	max-width: 460px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* CTAボタン -------------------------------------------------------------- */
.crescent-message-more.crescent-message-more {
	margin-top: 36px !important;
}

/* タブレット（〜1199px） -------------------------------------------------- */
@media (max-width: 1199px) {
	.crescent-message :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
		font-size: 32px !important;
	}

	.crescent-message p,
	.crescent-message .uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label) {
		font-size: 15px !important;
		line-height: 1.9 !important;
	}
}

/* スマートフォン（〜639px） ----------------------------------------------- */
@media (max-width: 639px) {
	.crescent-message :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
		font-size: 26px !important;
		letter-spacing: 0.04em !important;
		margin-bottom: 20px !important;
	}

	/* 写真は本文の下。幅いっぱいだと間延びするので抑えて中央に置く */
	.crescent-message-photo {
		margin-top: 36px !important;
	}

	.crescent-message-photo img,
	.crescent-message-photo .el-image {
		max-width: 400px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.crescent-message-close {
		margin-top: 26px !important;
	}

	.crescent-message-close,
	.crescent-message-close p,
	.crescent-message-close .uk-panel {
		font-size: 20px !important;
		line-height: 1.65 !important;
	}

	.crescent-message-sign {
		margin-top: 28px !important;
	}

	.crescent-message-more {
		margin-top: 28px !important;
	}
}

/* --------------------------------------------------------------------------
   COMPANYページのMESSAGE（代表メッセージ・全文）
   --------------------------------------------------------------------------
   トップのMESSAGEは抜粋で、「メッセージを読む」→ /company/#message に飛ばす。
   その飛び先がここ。資料は `21_代表メッセージ.png`。

   構成（YOOthemeビルダー側）:

     Section .crescent-message.crescent-company-message（id: message）
       └ Row  … ラベル
       └ Row（2-5 / 3-5）
            左 … Image .crescent-message-photo
            右 … Headline(H2) ＋ Text(本文) ＋ Text .crescent-message-close
                 ＋ Text .crescent-message-sign

   見た目はトップのMESSAGEをそのまま使うので、セクションに
   `crescent-message` を併記してある。ここは並び順の違いだけを吸収する。

   トップは「テキスト左・写真右」、こちらは資料に合わせて「写真左・テキスト右」。
   写真が先に来るぶん、スマートフォンでの余白の向きが逆になる。
   ========================================================================== */

/*  本文中の強調語。
    資料は語ごとに色を変えているが、あれはボード上の演出で、
    実際のページは640px幅に5段落が入る。4〜5色が混ざると視線が散って
    読みづらくなるため、1色に統一している（平山さま指定 #E5004F）。
    結びの2行だけ .accent（2色グラデーション）で締める。                     */
.crescent-message .key {
	color: #e5004f !important;
	font-weight: 700 !important;
}

/*  スマートフォンでは写真が本文の「上」に来る。
    トップ用の指定（写真が下なので margin-top: 36px）は向きが逆になる。      */
@media (max-width: 639px) {
	.crescent-company-message .crescent-message-photo {
		margin-top: 0 !important;
		margin-bottom: 36px !important;
	}
}

/* ==========================================================================
   下層ページ ─ ページヒーロー（NEWSで先行導入）
   ==========================================================================
   子テーマの templates/crescent-news-hero.php から出力している。
   他の下層ページでも同じ見た目を使えるよう crescent-page-hero* で命名した。
   get_header() が uk-container まで開いているので、ここはコンテナの内側。
   ========================================================================== */

.crescent-page-hero {
	padding: 40px 0 48px !important;
}

.crescent-page-hero-en {
	font-family: "Montserrat", sans-serif !important;
	font-size: 72px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.02em !important;
	color: #111111 !important;
}

.crescent-page-hero-ja {
	font-size: 24px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.06em !important;
	color: #111111 !important;
}

/*  英字（72px）→ 日本語ページ名（24px）→ メッセージ（32px）→ リード。
    日本語ページ名より下の段のほうが大きいのは、資料どおり。
    大きな英字が実質の見出しで、日本語は読みの添え物、
    その下の1文がページの主張、という組み立てになっている。

    NEWSのヒーローには無い段なので、使うページだけ置けばよい。       */
.crescent-page-hero-msg {
	font-size: 32px !important;
	font-weight: 900 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.04em !important;
	color: #111111 !important;
}

.crescent-page-hero-lead {
	font-size: 15px !important;
	line-height: 1.9 !important;
	color: #555555 !important;
	max-width: 640px !important;
}

/*  ヒーローの文字どうしの間隔（margin）。NEWS（.crescent-news-hero）だけに残す。
    NEWSのヒーローはテーマのテンプレート出力でビルダーでは触れないため。
    ほかのページのヒーローは、2026-10-07 の指示で外した。ビルダーの余白
    （uk-margin など）で決める。                                            */
.crescent-page-hero-en:where(.crescent-news-hero *) {
	margin: 0 0 12px !important;
}

.crescent-page-hero-ja:where(.crescent-news-hero *) {
	margin: 0 0 20px !important;
}

.crescent-page-hero-msg:where(.crescent-news-hero *) {
	margin: 28px 0 18px !important;
}

.crescent-page-hero-lead:where(.crescent-news-hero *) {
	margin: 0 !important;
}

/* ==========================================================================
   NEWS一覧 ─ カテゴリータブ・記事行・ページ送り
   ==========================================================================
   行の構造はトップページのNEWSセクションと揃えている。
   トップはビルダー出力なのでカテゴリをURLで判定しているが、
   こちらは自前の出力なので data-cat にスラッグを持たせて属性セレクタで拾う。
   ========================================================================== */

.crescent-news-tabs {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin-bottom: 40px !important;
}

.crescent-news-tab {
	display: inline-block !important;
	padding: 9px 20px !important;
	border: 1px solid #e5e5e5 !important;
	border-radius: 3px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
	line-height: 1.5 !important;
	color: #555555 !important;
	text-decoration: none !important;
	transition: border-color 0.2s ease, color 0.2s ease !important;
}

.crescent-news-tab:hover {
	border-color: #111111 !important;
	color: #111111 !important;
}

.crescent-news-tab.is-current {
	background-color: #111111 !important;
	border-color: #111111 !important;
	color: #ffffff !important;
}

/* 記事の行 ---------------------------------------------------------------- */
.crescent-news-rows {
	border-top: 1px solid #e5e5e5 !important;
}

.crescent-news-row {
	display: grid !important;
	grid-template-columns: 80px 124px 1fr 20px !important;
	align-items: center !important;
	column-gap: 16px !important;
	padding: 20px 0 !important;
	border-bottom: 1px solid #e5e5e5 !important;
	text-decoration: none !important;
}

.crescent-news-date {
	grid-column: 1 !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.06em !important;
	font-variant-numeric: tabular-nums !important;
	color: #555555 !important;
}

.crescent-news-title {
	grid-column: 3 !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.7 !important;
	letter-spacing: 0.04em !important;
	color: #111111 !important;
	transition: opacity 0.2s ease !important;
}

.crescent-news-row:hover .crescent-news-title {
	opacity: 0.55 !important;
}

/* 行末の矢印。トップのNEWSと同じ形 */
.crescent-news-row::after {
	content: "" !important;
	grid-column: 4 !important;
	width: 20px !important;
	height: 10px !important;
	background-color: #111111 !important;
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5h18M14 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5h18M14 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform 0.2s ease !important;
}

.crescent-news-row:hover::after {
	transform: translateX(4px) !important;
}

/* カテゴリのバッジ。色の考え方はトップのNEWSと同じ（淡い色面＋濃い文字） */
.crescent-news-cat {
	grid-column: 2 !important;
	box-sizing: border-box !important;
	min-width: 124px !important;
	padding: 4px 10px !important;
	border-radius: 3px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.04em !important;
	text-align: center !important;
	background-color: #f0f0f0 !important;
	color: #555555 !important;
}

.crescent-news-cat[data-cat="press"] { background-color: #fce0f0 !important; color: #cb0071 !important; }
.crescent-news-cat[data-cat="info"]  { background-color: #e0edf6 !important; color: #0068b7 !important; }
.crescent-news-cat[data-cat="media"] { background-color: #f2e1f0 !important; color: #920783 !important; }
.crescent-news-cat[data-cat="event"] { background-color: #fef3e0 !important; color: #9e6300 !important; }
.crescent-news-cat[data-cat="other"] { background-color: #e0f3e9 !important; color: #007d38 !important; }

/* ページ送り -------------------------------------------------------------- */
.crescent-news-pagination {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 6px !important;
	margin-top: 48px !important;
}

.crescent-news-pagination .page-numbers {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 38px !important;
	height: 38px !important;
	padding: 0 10px !important;
	border: 1px solid #e5e5e5 !important;
	border-radius: 3px !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #555555 !important;
	text-decoration: none !important;
}

.crescent-news-pagination .page-numbers:hover {
	border-color: #111111 !important;
	color: #111111 !important;
}

.crescent-news-pagination .page-numbers.current {
	background-color: #111111 !important;
	border-color: #111111 !important;
	color: #ffffff !important;
}

.crescent-news-pagination .page-numbers.dots {
	border-color: transparent !important;
}

.crescent-news-empty {
	padding: 48px 0 !important;
	font-size: 15px !important;
	color: #555555 !important;
}

/* タブレット（〜1199px） -------------------------------------------------- */
@media (max-width: 1199px) {
	.crescent-page-hero-en {
		font-size: 56px !important;
	}

	.crescent-page-hero-msg {
		font-size: 28px !important;
	}

	.crescent-page-hero-ja {
		font-size: 21px !important;
	}

	.crescent-news-row {
		grid-template-columns: 76px 124px 1fr 20px !important;
		column-gap: 12px !important;
	}

	.crescent-news-title {
		font-size: 15px !important;
	}
}

/* スマートフォン（〜639px） ----------------------------------------------- */
@media (max-width: 639px) {
	.crescent-page-hero {
		padding: 24px 0 36px !important;
	}

	.crescent-page-hero-en {
		font-size: 44px !important;
	}

	.crescent-page-hero-ja {
		font-size: 18px !important;
		letter-spacing: 0.04em !important;
	}

	.crescent-page-hero-msg {
		font-size: 22px !important;
		letter-spacing: 0.02em !important;
	}

	.crescent-page-hero-msg:where(.crescent-news-hero *) {
		margin: 20px 0 14px !important;
	}

	.crescent-page-hero-lead {
		font-size: 14px !important;
	}

	.crescent-news-tabs {
		gap: 6px !important;
		margin-bottom: 28px !important;
	}

	.crescent-news-tab {
		padding: 7px 14px !important;
		font-size: 12px !important;
	}

	/* トップのNEWSと同じ折り返し。日付＋カテゴリが1行目、タイトルが2行目 */
	.crescent-news-row {
		grid-template-columns: auto 1fr 20px !important;
		grid-template-rows: auto auto !important;
		row-gap: 8px !important;
		column-gap: 12px !important;
		padding: 18px 0 !important;
	}

	.crescent-news-date {
		grid-column: 1 !important;
		grid-row: 1 !important;
	}

	.crescent-news-cat {
		grid-column: 2 !important;
		grid-row: 1 !important;
		justify-self: start !important;
		min-width: 0 !important;
		padding: 3px 8px !important;
		font-size: 10px !important;
	}

	.crescent-news-title {
		grid-column: 1 / 3 !important;
		grid-row: 2 !important;
		font-size: 15px !important;
		line-height: 1.6 !important;
	}

	.crescent-news-row::after {
		grid-column: 3 !important;
		grid-row: 1 / 3 !important;
		align-self: center !important;
	}

	.crescent-news-pagination {
		margin-top: 36px !important;
	}
}

/* ==========================================================================
   共通パーツ：パンくず
   ==========================================================================
   ビルダーで作ったページにはテーマのパンくずが出ない（header.php が
   app.isBuilder のときコンテナごと飛ばすため）。
   それらのページではビルダーのBreadcrumbs要素を置く。
   どちらも .uk-breadcrumb を出すので、このCSSで両方に効く。
   ========================================================================== */

/*  ビルダーのページでは子テーマの page.php からコンテナに入れて出している。
    ヘッダーの直下に詰まるので上に余白を足す。                              */
.crescent-breadcrumbs {
	padding-top: 28px !important;
}

/* --------------------------------------------------------------------------
   ヒーロー内のパンくず（ビルダーのBreadcrumbs要素）
   --------------------------------------------------------------------------
   2026-10-07 平山さまの指示で、ヒーロー内のパンくずの位置の指定（上へ-44px引き上げ、
   スマホの調整、箱がないときの調整）をすべて削除した。パンくずは別のセクションに
   移す方針で、位置・余白はビルダーで決める。
   （この引き上げは、ヒーローの余白を変えるとパンくずがヘッダーの裏に隠れる原因だった。）
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   下層ヒーローの文字（スマートフォン）
   --------------------------------------------------------------------------
   360pxの画面で英字44pxは大きすぎるうえ、背景画像の白い範囲に
   収まらない。全ヒーロー共通で一段小さくする。

   ページごとに書いていたら、セールスプロモーションで入れ忘れて
   文字が70pxはみ出した（2026-09-21）。共通にして取りこぼしを防ぐ。

   リードのText要素には uk-width-large（幅450px固定）が付くことがある。
   max-width では解除できないので width も戻す。
   ========================================================================== */

@media (max-width: 639px) {
	[class*="-hero"] .crescent-page-hero-en {
		font-size: 34px !important;
	}

	[class*="-hero"] .crescent-page-hero-ja {
		font-size: 19px !important;
	}

	[class*="-hero"] .crescent-page-hero-msg {
		font-size: 19px !important;
	}

	/* 文字どうしの間隔（NEWSのヒーローだけ。ほかはビルダーで決める） */
	[class*="-hero"] .crescent-page-hero-en:where(.crescent-news-hero *) {
		margin-bottom: 4px !important;
	}

	[class*="-hero"] .crescent-page-hero-ja:where(.crescent-news-hero *) {
		margin-bottom: 10px !important;
	}

	[class*="-hero"] .crescent-page-hero-msg:where(.crescent-news-hero *) {
		margin: 0 0 8px !important;
	}

	[class*="-hero"] .crescent-page-hero-lead {
		font-size: 13px !important;
		line-height: 1.7 !important;
		width: auto !important;
		max-width: none !important;
	}
}

.uk-breadcrumb {
	margin-bottom: 28px !important;
	font-size: 0 !important; /* li 間の空白文字を消す */
}

.uk-breadcrumb > * {
	font-size: 12px !important;
	letter-spacing: 0.04em !important;
	line-height: 1.6 !important;
}

.uk-breadcrumb > * > * {
	font-size: 12px !important;
	color: #555555 !important;
	text-decoration: none !important;
}

.uk-breadcrumb > * > a:hover {
	color: #111111 !important;
	text-decoration: underline !important;
}

/* 現在地 */
.uk-breadcrumb > :last-child > span {
	color: #111111 !important;
}

.uk-breadcrumb > * + *::before {
	margin: 0 8px !important;
	color: #cccccc !important;
}

@media (max-width: 639px) {
	.uk-breadcrumb {
		margin-bottom: 20px !important;
	}

	.uk-breadcrumb > *,
	.uk-breadcrumb > * > * {
		font-size: 11px !important;
	}
}

/* ==========================================================================
   NEWS ─ 個別記事
   ==========================================================================
   子テーマの single.php から出力している。
   日付とカテゴリのバッジは一覧と同じ .crescent-news-date / .crescent-news-cat を
   使い回しているので、色分けの指定はそちらに書いてある。
   ========================================================================== */

/*  読みやすさのため1行の幅を抑えるが、中央に置くとパンくずや
    他のセクションと頭が揃わないので左に寄せる。
    ABOUT・MESSAGEの本文（max-width 640〜720px・左揃え）と同じ考え方。      */
.crescent-post {
	max-width: 760px !important;
	margin: 0 !important;
	padding: 8px 0 0 !important;
}

.crescent-post-meta {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	margin-bottom: 18px !important;
}

/* 一覧では列幅を揃えるために固定幅にしているが、単体ではその必要がない */
.crescent-post-meta .crescent-news-cat {
	min-width: 0 !important;
}

.crescent-post-title {
	margin: 0 0 32px !important;
	font-size: 30px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.04em !important;
	color: #111111 !important;
}

.crescent-post-thumb {
	margin: 0 0 36px !important;
}

.crescent-post-thumb img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
}

/* 本文 -------------------------------------------------------------------- */
.crescent-post-body {
	font-size: 16px !important;
	line-height: 2 !important;
	color: #555555 !important;
}

.crescent-post-body > * + * {
	margin-top: 1.8em !important;
}

.crescent-post-body :is(h2, h3, h4) {
	margin-top: 2.4em !important;
	margin-bottom: 0.8em !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.04em !important;
	color: #111111 !important;
}

.crescent-post-body h2 { font-size: 22px !important; }
.crescent-post-body h3 { font-size: 19px !important; }
.crescent-post-body h4 { font-size: 17px !important; }

/* 見出しの直後は間隔を詰める（above の > * + * が効くため打ち消す） */
.crescent-post-body :is(h2, h3, h4) + * {
	margin-top: 0 !important;
}

.crescent-post-body a {
	color: #0068b7 !important;
	text-decoration: underline !important;
}

.crescent-post-body a:hover {
	color: #111111 !important;
}

.crescent-post-body :is(ul, ol) {
	padding-left: 1.4em !important;
}

.crescent-post-body li + li {
	margin-top: 0.6em !important;
}

.crescent-post-body img {
	max-width: 100% !important;
	height: auto !important;
}

.crescent-post-body blockquote {
	margin-left: 0 !important;
	padding: 4px 0 4px 20px !important;
	border-left: 2px solid #e5e5e5 !important;
	font-size: 15px !important;
}

/* 関連ニュース ------------------------------------------------------------ */
.crescent-post-related {
	max-width: 760px !important;
	margin: 72px 0 0 !important;
}

.crescent-post-related .crescent-news-rows {
	margin-top: 4px !important;
}

/* 一覧へ戻る -------------------------------------------------------------- */
.crescent-post-back {
	max-width: 760px !important;
	margin: 56px 0 0 !important;
}

/* タブレット（〜1199px） -------------------------------------------------- */
@media (max-width: 1199px) {
	.crescent-post-title {
		font-size: 26px !important;
	}
}

/* スマートフォン（〜639px） ----------------------------------------------- */
@media (max-width: 639px) {
	.crescent-post-title {
		font-size: 21px !important;
		margin-bottom: 24px !important;
	}

	.crescent-post-meta {
		gap: 10px !important;
		margin-bottom: 14px !important;
	}

	.crescent-post-body {
		font-size: 15px !important;
		line-height: 1.95 !important;
	}

	.crescent-post-body h2 { font-size: 19px !important; }
	.crescent-post-body h3 { font-size: 17px !important; }
	.crescent-post-body h4 { font-size: 16px !important; }

	.crescent-post-related {
		margin-top: 56px !important;
	}

	.crescent-post-back {
		margin-top: 44px !important;
	}
}

/* ==========================================================================
   TOP page ─ CTA（お問い合わせ・エントリー）
   ==========================================================================
   構成（YOOthemeビルダー側）:

     Section .crescent-cta（幅Large）
       └ Buttons要素（2つ）
             お問い合わせはこちら … Primary（黒）  → /contact/
             エントリーはこちら   … Default（白）  → /entry/

   セクションの背景そのものがブランドのグラデーション。
   背景がグラデーションなので、エントリー側にいつもの Secondary
   （グラデーション）は使えない。ボードどおり黒＋白の2つにしている。

   このセクションだけ中央揃え。サイト全体は左揃えで統一しているが、
   ここは帯の中に導線を2つ置くだけのブロックなので中央がおさまる。

   ラベル（crescent-section-label）は置かない。
   ========================================================================== */

.crescent-cta {
	/* 帯として上下対称にする */
	padding-top: 84px !important;
	padding-bottom: 84px !important;
	background: linear-gradient(100deg, #f39800 0%, #e4007f 100%) !important;
}

/* Buttons要素は .uk-grid（flex）で出るので、そのまま中央に寄せる */
.crescent-cta .uk-grid {
	justify-content: center !important;
}

.crescent-cta .uk-button {
	min-width: 320px !important;
	padding: 18px 36px !important;
	font-size: 16px !important;
}

/* 白ボタンの枠線はグラデーションの上では濁って見えるので外す */
.crescent-cta .uk-button-default {
	border-color: transparent !important;
}

.crescent-cta .uk-button-default:hover,
.crescent-cta .uk-button-default:focus {
	background: #f5f5f5 !important;
	border-color: transparent !important;
}

/* タブレット（〜1199px） -------------------------------------------------- */
@media (max-width: 1199px) {
	.crescent-cta {
		padding-top: 72px !important;
		padding-bottom: 72px !important;
	}

	.crescent-cta .uk-button {
		min-width: 280px !important;
	}
}

/* スマートフォン（〜639px） ----------------------------------------------- */
@media (max-width: 639px) {
	.crescent-cta {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}

	/* 2つを縦に積んで、幅を揃える */
	.crescent-cta .uk-grid {
		flex-direction: column !important;
		align-items: center !important;
	}

	.crescent-cta .uk-button {
		min-width: 0 !important;
		width: 280px !important;
		padding: 16px 28px !important;
		font-size: 15px !important;
	}
}

/* ==========================================================================
   モバイルメニュー（オフキャンバス）
   ==========================================================================
   ビルダーのオフキャンバス領域に、上から
   ロゴ → CTA（お問い合わせ・エントリー）→ Menu要素 → SNS の順で置いている。

   メニューは Nav要素＋動的コンテンツではなく **Menu要素** を使う。
   動的コンテンツは平坦なコレクションを返すため、サブメニューを持てない。
   Menu要素は ul.uk-nav > li.uk-parent > ul.uk-nav-sub を出す。
   ========================================================================== */

/* 親項目。ヘッダーより文字を大きくして読みやすさを優先する */
.uk-offcanvas-bar .uk-nav > li > a {
	padding: 11px 0 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	color: #111111 !important;
}

.uk-offcanvas-bar .nav-sub {
	margin-top: 2px !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	letter-spacing: 0.04em !important;
	opacity: 0.6 !important;
}

/* 子項目 */
.uk-offcanvas-bar .uk-nav-sub {
	padding-left: 14px !important;
}

.uk-offcanvas-bar .uk-nav-sub > li > a {
	padding: 6px 0 !important;
	font-size: 13px !important;
	letter-spacing: 0.04em !important;
	color: #555555 !important;
}

/*  CTAボタン。パネルの内寸が230pxしかないので、本文用の
    左右32pxのままだと「お問い合わせはこ／ちら」と3行に折り返す。          */
.uk-offcanvas-bar .uk-button {
	padding: 14px 16px !important;
	font-size: 14px !important;
	white-space: nowrap !important;
}

/*  SNSは既定が uk-icon-button（白い丸）。白背景では丸が見えず
    グレーのアイコンだけが浮くので、フッターと同じ扱いにする。            */
.uk-offcanvas-bar .uk-icon-button {
	width: auto !important;
	height: auto !important;
	background-color: transparent !important;
	border-radius: 0 !important;
	color: #111111 !important;
}

.uk-offcanvas-bar .uk-icon-button:hover {
	background-color: transparent !important;
	color: #555555 !important;
}

/*  各項目の右端に矢印を出す。
    リンクは英日2行を縦に積むため flex-direction: column にしてある。
    矢印を子要素として足すと3つめの行になってしまうので、絶対配置にして
    レイアウトから外す。色は currentColor で親子それぞれの文字色に追従させる。 */
.uk-offcanvas-bar .uk-nav > li > a,
.uk-offcanvas-bar .uk-nav-sub > li > a {
	position: relative !important;
	padding-right: 28px !important;
}

.uk-offcanvas-bar .uk-nav > li > a::after,
.uk-offcanvas-bar .uk-nav-sub > li > a::after {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	right: 0 !important;
	width: 18px !important;
	height: 9px !important;
	background-color: currentColor !important;
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5h18M14 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5h18M14 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
	opacity: 0.4 !important;
	transform: translateY(-50%) !important;
	transition: transform 0.2s ease, opacity 0.2s ease !important;
}

/* 子項目は文字が小さいので矢印も一段小さく */
.uk-offcanvas-bar .uk-nav-sub > li > a::after {
	width: 15px !important;
	height: 8px !important;
}

.uk-offcanvas-bar .uk-nav > li > a:hover::after,
.uk-offcanvas-bar .uk-nav-sub > li > a:hover::after {
	opacity: 1 !important;
	transform: translate(3px, -50%) !important;
}

/* モバイルのヒーロー：すりガラスの端をぼかす指定（≤639px の .crescent-hero-content）は、
   2026-10-15 に削除した。スマホ用ヒーローはビルダーで制御する。 */

/* ==========================================================================
   共通パーツ：フォーム（Contact Form 7）
   ==========================================================================
   エントリーフォームとお問い合わせフォームで共用する。
   フォーム本体のマークアップはCF7側（管理画面 → お問い合わせ）にあり、
   .crescent-form でくるんで各項目に .crescent-form-item を振ってある。

   CF7はHTMLのrequired属性を使わず、独自に検証する。
   必須の目印は aria-required と .wpcf7-validates-as-required。
   ========================================================================== */

.crescent-form {
	max-width: 640px !important;
}

.crescent-form-item {
	margin: 0 0 20px !important;
}

/*  CF7は各項目の <p> の中に自動で改行（<br>）を入れる（ラベルの前と後ろ）。
    ラベルは display: block なので改行は不要で、1本につき1行ぶん
    （約26px）ずつ余計な空白になっていた。ラベルの上に26px、ラベルと
    入力欄の間に26px＋8px（2026-09-29 実測）。フォーム内の改行はすべて消す。 */
.crescent-form-item > br,
.crescent-form-row br,
.crescent-form-consent > br,
.crescent-form-submit > br {
	display: none !important;
}

/*  生年月日と年齢を横に並べる。
    年齢は生年月日から計算される値なので、離すより隣に置くほうが
    関係が分かる。行そのものが下の余白を持ち、中の2つは0にする。

    幅は入る文字数で決めている。日付は「年/月/日＋カレンダー」で
    260px、年齢は2桁なので140px。                                      */
.crescent-form-row {
	display: flex !important;
	gap: 24px !important;
	align-items: flex-start !important;
	margin: 0 0 20px !important;
}

.crescent-form-row > .crescent-form-item {
	margin: 0 !important;
}

.crescent-form-row .crescent-form-birthday {
	flex: 0 1 260px !important;
}

.crescent-form-row .crescent-form-age {
	flex: 0 1 140px !important;
}

/*  親で幅を決めたので、中の入力欄は枠いっぱいに戻す。
    単独で置いたときの max-width が効いたままだと二重に効く。         */
.crescent-form-row input[type="date"],
.crescent-form-row input[type="number"] {
	max-width: none !important;
}

.crescent-form-item label {
	display: block !important;
	margin-bottom: 8px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	line-height: 1.6 !important;
	color: #111111 !important;
}

/* 必須・任意のしるし。ラベルの文字に続けて置く */
.crescent-form-required,
.crescent-form-optional {
	display: inline-block !important;
	margin-left: 10px !important;
	padding: 2px 8px !important;
	border-radius: 3px !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	vertical-align: 2px !important;
}

.crescent-form-required {
	background-color: #fce0f0 !important;
	color: #cb0071 !important;
}

.crescent-form-optional {
	background-color: #f0f0f0 !important;
	color: #555555 !important;
}

/* 入力欄 -----------------------------------------------------------------
   **入力の種類ごとに書くこと。** date と number を足し忘れて、
   生年月日が125px、年齢が27pxのまま出ていた（2026-09-23）。
   ブラウザの既定幅がそのまま出るので、指定が無いと他の欄と揃わない。  */
.crescent-form input[type="text"],
.crescent-form input[type="email"],
.crescent-form input[type="tel"],
.crescent-form input[type="date"],
.crescent-form input[type="number"],
.crescent-form select,
.crescent-form textarea {
	box-sizing: border-box !important;
	width: 100% !important;
	padding: 13px 14px !important;
	border: 1px solid #dddddd !important;
	border-radius: 6px !important;
	background-color: #ffffff !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: #111111 !important;
	transition: border-color 0.2s ease !important;
}

.crescent-form textarea {
	min-height: 170px !important;
	resize: vertical !important;
}

/*  生年月日と年齢は入る文字数が決まっているので、全幅だと間延びする。
    他の欄と高さ・枠は揃えたまま、幅だけ抑える。                        */
.crescent-form input[type="date"] {
	max-width: 260px !important;
}

.crescent-form input[type="number"] {
	max-width: 140px !important;
}

/*  年齢は生年月日から計算して埋める（functions.php）。
    触れない欄だと分かるよう下地を落とす。
    JSが動かない環境では readonly が付かないので、この見た目にもならない。 */
.crescent-form input[readonly] {
	background-color: #f5f5f5 !important;
	color: #555555 !important;
	cursor: default !important;
}

.crescent-form input[readonly]:focus {
	border-color: #dddddd !important;
}

.crescent-form input:focus,
.crescent-form select:focus,
.crescent-form textarea:focus {
	border-color: #111111 !important;
	outline: none !important;
}

.crescent-form ::placeholder {
	color: #aaaaaa !important;
}

/* select は矢印が消えるブラウザがあるので自前で付ける */
.crescent-form select {
	appearance: none !important;
	-webkit-appearance: none !important;
	padding-right: 40px !important;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 12px 8px !important;
}

/* 同意チェック ----------------------------------------------------------- */
.crescent-form-consent {
	margin: 0 0 28px !important;
	font-size: 14px !important;
	line-height: 1.8 !important;
	color: #555555 !important;
}

.crescent-form-consent input[type="checkbox"] {
	width: 17px !important;
	height: 17px !important;
	margin-right: 8px !important;
	vertical-align: -3px !important;
	accent-color: #111111 !important;
}

.crescent-form-consent .wpcf7-list-item {
	margin: 0 !important;
}

.crescent-form-consent a {
	color: #0068b7 !important;
	text-decoration: underline !important;
}

/* 送信ボタン ------------------------------------------------------------- */
.crescent-form-submit {
	margin: 0 !important;
}

.crescent-form input[type="submit"] {
	min-width: 280px !important;
	padding: 17px 36px !important;
	border: 1px solid #111111 !important;
	border-radius: 6px !important;
	background-color: #111111 !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	color: #ffffff !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease !important;
}

.crescent-form input[type="submit"]:hover {
	background-color: #333333 !important;
}

.crescent-form input[type="submit"]:disabled {
	opacity: 0.5 !important;
	cursor: default !important;
}

/* CF7からのメッセージ ----------------------------------------------------- */
.crescent-form .wpcf7-not-valid-tip {
	margin-top: 6px !important;
	font-size: 13px !important;
	color: #cb0071 !important;
}

.crescent-form .wpcf7-form-control.wpcf7-not-valid {
	border-color: #cb0071 !important;
}

.wpcf7 form .wpcf7-response-output {
	max-width: 640px !important;
	margin: 28px 0 0 !important;
	padding: 14px 16px !important;
	border-width: 1px !important;
	border-radius: 6px !important;
	font-size: 14px !important;
	line-height: 1.7 !important;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: #cb0071 !important;
	color: #cb0071 !important;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #007d38 !important;
	color: #007d38 !important;
}

/* スマートフォン（〜639px） ----------------------------------------------- */
@media (max-width: 639px) {
	.crescent-form-item {
		margin-bottom: 18px !important;
	}

	.crescent-form input[type="text"],
	.crescent-form input[type="email"],
	.crescent-form input[type="tel"],
	.crescent-form input[type="date"],
	.crescent-form input[type="number"],
	.crescent-form select,
	.crescent-form textarea {
		/* 16px未満だとiOSが入力時に拡大するので下げない */
		font-size: 16px !important;
		padding: 12px 13px !important;
	}

	/*  360pxでは260+140+24が入らないので詰める。
	    日付は「年/月/日」が出る幅が要るので、年齢のほうを削る。      */
	.crescent-form-row {
		gap: 12px !important;
	}

	.crescent-form-row .crescent-form-birthday {
		flex: 1 1 auto !important;
	}

	.crescent-form-row .crescent-form-age {
		flex: 0 0 96px !important;
	}

	.crescent-form input[type="submit"] {
		width: 100% !important;
		min-width: 0 !important;
		padding: 16px 24px !important;
		font-size: 15px !important;
	}
}

/*  Turnstile（迷惑メール対策）。
    CF7はフォームに [turnstile] が無いと先頭に自動挿入するので、
    フォーム側で送信ボタンの手前に明示的に置いている。                      */
.crescent-form .cf-turnstile,
.crescent-form-turnstile {
	margin: 0 0 24px !important;
}

/* ==========================================================================
   共通パーツ：下層ページの共通CTA（crescent-page-cta）
   ==========================================================================
   ボタンのデザインは資料の COMMON PARTS / CTA BUTTON で決まっている。

     お問い合わせはこちら … 黒ベース        → .uk-button-primary
     エントリーはこちら   … グラデーション  → .uk-button-secondary
     詳しく見る           … 白＋枠線        → .uk-button-default

   3つともサイト共通の指定（このファイル冒頭）があるので、
   ここでは帯の見た目だけを作る。

   トップのCTA（.crescent-cta）は帯そのものがグラデーションだが、
   同じものを下層10ページの最下部に置くと、黒いフッターと連なって
   ページの終わりが重くなる。下層は資料のカラー #F5F5F5 の帯にして、
   上端にブランドのグラデーションを4pxだけ入れる。
   エントリー側は帯が白系なので、資料どおりグラデーションのボタンが使える
   （トップは帯がグラデーションなので白ボタンにしてある）。

   構成（YOOthemeビルダー側）:

     Section .crescent-page-cta（幅Default）
       └ Row → Column
            Headline（H2）… 締めの見出し
            Text          … リード1行
            Buttons要素（2つ）
                お問い合わせはこちら … Primary   → /contact/
                エントリーはこちら   … Secondary → /entry/

   ページ個別のclass（.crescent-about-cta など）はビルダー側に残しているが、
   見た目はこのclassだけで決まる。個別に変えたいページが出たときの逃げ道。

   中央揃えにしているのはトップのCTAと同じ理由で、
   帯の中に導線を2つ置くだけのブロックだから。
   ========================================================================== */

.crescent-page-cta {
	position: relative !important;
	background-color: #f5f5f5 !important;
	text-align: center !important;
}

/*  帯の上下の余白（PC 92px・タブレット 76px・スマホ 56px）。
    採用情報ページ（.crescent-recruit-cta）は、2026-10-15 に平山さまの指示で外した。
    帯の中に背景つきのセクションを入れ子にして、余白はそちらで決めるため。
    ABOUTページ（.crescent-about-cta）も、2026-10-17 に平山さまの指示で外した。
    ほかのページは今までどおり。                                              */
.crescent-page-cta:where(:not(.crescent-recruit-cta, .crescent-about-cta)) {
	padding-top: 92px !important;
	padding-bottom: 92px !important;
}

/* 上端のブランドライン。セクションの区切りと、帯であることの合図を兼ねる */
.crescent-page-cta::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 4px !important;
	background: linear-gradient(
		90deg,
		#f39800 0%,
		#e4007f 40%,
		#920783 70%,
		#0068b7 100%
	) !important;
}

/* 見出し ------------------------------------------------------------------
   本文の締めなので、セクション見出し（32px）と同じ大きさに揃える。       */
.crescent-page-cta :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
	font-size: 32px !important;
	font-weight: 900 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.06em !important;
	color: #111111 !important;
	margin-bottom: 14px !important;
}

/* リード ------------------------------------------------------------------
   class は Text要素が出力する .uk-panel 自身に付くので、
   他のセクションと同じ形（:not() で除外）で書いておく。                   */
.crescent-page-cta p,
.crescent-page-cta .uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label) {
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.9 !important;
	color: #555555 !important;
	max-width: none !important;
	margin-bottom: 40px !important;
}

/* ボタン ------------------------------------------------------------------
   Buttons要素は .uk-grid（flex）で出る。ビルダー側でも中央寄せにしているが、
   ページをまたいで揃えたいのでCSSでも押さえておく。                       */
.crescent-page-cta .uk-grid {
	justify-content: center !important;
}

.crescent-page-cta .uk-button {
	min-width: 320px !important;
	padding: 18px 36px !important;
	font-size: 16px !important;
}

/* タブレット（〜1199px） -------------------------------------------------- */
@media (max-width: 1199px) {
	.crescent-page-cta:where(:not(.crescent-recruit-cta, .crescent-about-cta)) {
		padding-top: 76px !important;
		padding-bottom: 76px !important;
	}

	.crescent-page-cta :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
		font-size: 28px !important;
	}

	.crescent-page-cta .uk-button {
		min-width: 280px !important;
	}
}

/* スマートフォン（〜639px） ----------------------------------------------- */
@media (max-width: 639px) {
	.crescent-page-cta:where(:not(.crescent-recruit-cta, .crescent-about-cta)) {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}

	.crescent-page-cta :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
		font-size: 22px !important;
		letter-spacing: 0.04em !important;
	}

	.crescent-page-cta p,
	.crescent-page-cta .uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label) {
		font-size: 14px !important;
		margin-bottom: 28px !important;
	}

	/* 2つを縦に積んで、幅を揃える（トップのCTAと同じ） */
	.crescent-page-cta .uk-grid {
		flex-direction: column !important;
		align-items: center !important;
	}

	.crescent-page-cta .uk-button {
		min-width: 0 !important;
		width: 280px !important;
		padding: 16px 28px !important;
		font-size: 15px !important;
	}
}

/* ==========================================================================
   共通パーツ：下層ページのセクション（余白・見出し・本文）
   ==========================================================================
   下層ページのセクションは、どのページでも同じ骨格をしている。

     上の余白72px（スマホ48px）・下は0
     見出し 32px / Black（スマホ22px）
     本文  15px / 行間1.9 / 幅720pxまで

   ページごとに書いていたものを1つにまとめた（2026-09-19）。
   4ページぶん同じ指定をコピーしていて、1つだけ直して他を忘れる事故が
   起きうる状態だった。新しいページを足すときは、下のリストに
   セクションのclassを追加するだけでよい（余白は含まない）。

   ヒーロー（crescent-*-hero）は別の骨格なので入れていない。
   見た目は crescent-page-hero-* が持っている。

   2026-10-06 セクションの余白（上下のpadding）の指定は、全ページぶんここから外した。
   以前は「上72px（スマホ48px）・下0」を !important で固定し、CTAの直前のセクションだけ
   下72px（スマホ48px）にしていた。これが残っていると、ビルダーで x-small〜x-large の
   どれを選んでも同じ見え方になるため。余白は平山さまがビルダー（Section の Padding）で
   決める。文字の大きさなどの指定は残している。

   除外しているもの:
     .crescent-section-label  セクションのラベル
     .el-title / .el-content / .el-item  Grid要素の中身（各ページで指定）
     .note                    制作メモ
     .crescent-company-table  会社概要の表（本文幅720pxに縛られると困る）
   ========================================================================== */

:is(
	.crescent-business-promotion,
	.crescent-business-content,
	.crescent-business-flow,
	.crescent-business-strength,
	.crescent-company-profile,
	.crescent-company-network,
	.crescent-company-field,
	.crescent-content-scene,
	.crescent-content-feature,
	.crescent-content-coupon,
	.crescent-sp-overview,
	.crescent-sp-event,
	.crescent-sp-field,
	.crescent-sp-support,
	.crescent-sp-alliance,
	.crescent-products-list,
	.crescent-products-area,
	.crescent-recruit-about,
	.crescent-recruit-field,
	.crescent-recruit-data,
	.crescent-recruit-people
) :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title):not(.note) {
	font-size: 32px !important;
	font-weight: 900 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.04em !important;
	color: #111111 !important;
}

/*  見出しの下の間隔16px。BUSINESS ページの4セクションだけ、
    2026-10-06 に平山さまの指示で外した（ビルダーで決める）。
    ほかのページは今までどおり。                                      */
:is(
	.crescent-company-profile,
	.crescent-company-network,
	.crescent-company-field,
	.crescent-content-scene,
	.crescent-content-feature,
	.crescent-content-coupon,
	.crescent-sp-overview,
	.crescent-sp-event,
	.crescent-sp-field,
	.crescent-sp-support,
	.crescent-sp-alliance,
	.crescent-products-list,
	.crescent-products-area,
	.crescent-recruit-about,
	.crescent-recruit-field,
	.crescent-recruit-data,
	.crescent-recruit-people
) :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title):not(.note) {
	margin-bottom: 16px !important;
}

/*  class は Text要素が出力する .uk-panel 自身に付くので、
    :not() で中身の要素を外している。                                    */
:is(
	.crescent-business-promotion,
	.crescent-business-content,
	.crescent-business-flow,
	.crescent-business-strength,
	.crescent-company-profile,
	.crescent-company-network,
	.crescent-company-field,
	.crescent-content-scene,
	.crescent-content-feature,
	.crescent-content-coupon,
	.crescent-sp-overview,
	.crescent-sp-event,
	.crescent-sp-field,
	.crescent-sp-support,
	.crescent-sp-alliance,
	.crescent-products-list,
	.crescent-products-area,
	.crescent-recruit-about,
	.crescent-recruit-field,
	.crescent-recruit-data,
	.crescent-recruit-people
) :is(p, .uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label):not(.note):not(.crescent-company-table)) {
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.9 !important;
	color: #555555 !important;
}

/*  本文の幅の上限720px。採用ページの DATA セクション（.crescent-recruit-data）は、
    2026-10-09 に平山さまの指示で外した。幅はビルダーで決める。
    （注記 .crescent-recruit-data-note の「max-width: none」は、この上限に負けて
    効いていなかった。）ほかのセクションは今までどおり。                      */
:is(
	.crescent-business-promotion,
	.crescent-business-content,
	.crescent-business-flow,
	.crescent-business-strength,
	.crescent-company-profile,
	.crescent-company-network,
	.crescent-company-field,
	.crescent-content-scene,
	.crescent-content-feature,
	.crescent-content-coupon,
	.crescent-sp-overview,
	.crescent-sp-event,
	.crescent-sp-field,
	.crescent-sp-support,
	.crescent-sp-alliance,
	.crescent-products-list,
	.crescent-products-area,
	.crescent-recruit-about,
	.crescent-recruit-field,
	.crescent-recruit-people
) :is(p, .uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label):not(.note):not(.crescent-company-table)) {
	max-width: 720px !important;
}

/* スマートフォン（〜639px） ----------------------------------------------- */
@media (max-width: 639px) {
	:is(
	.crescent-business-promotion,
	.crescent-business-content,
	.crescent-business-flow,
	.crescent-business-strength,
	.crescent-company-profile,
	.crescent-company-network,
	.crescent-company-field,
	.crescent-content-scene,
	.crescent-content-feature,
	.crescent-content-coupon,
	.crescent-sp-overview,
	.crescent-sp-event,
	.crescent-sp-field,
	.crescent-sp-support,
	.crescent-sp-alliance,
	.crescent-products-list,
	.crescent-products-area,
	.crescent-recruit-about,
	.crescent-recruit-field,
	.crescent-recruit-data,
	.crescent-recruit-people
	) :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title):not(.note) {
		font-size: 22px !important;
		letter-spacing: 0.02em !important;
	}

	:is(
	.crescent-business-promotion,
	.crescent-business-content,
	.crescent-business-flow,
	.crescent-business-strength,
	.crescent-company-profile,
	.crescent-company-network,
	.crescent-company-field,
	.crescent-content-scene,
	.crescent-content-feature,
	.crescent-content-coupon,
	.crescent-sp-overview,
	.crescent-sp-event,
	.crescent-sp-field,
	.crescent-sp-support,
	.crescent-sp-alliance,
	.crescent-products-list,
	.crescent-products-area,
	.crescent-recruit-about,
	.crescent-recruit-field,
	.crescent-recruit-data,
	.crescent-recruit-people
	) :is(p, .uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label):not(.note):not(.crescent-company-table)) {
		font-size: 14px !important;
	}
}

/* ==========================================================================
   下層 BUSINESS ページ
   ==========================================================================
   セクションは6つ。ヒーロー／セールスプロモーション／コンテンツ事業／
   ビジネスの流れ／強み／CTA。

   資料は `05_BUSINESS.png` と、追加資料の `14_BUSINESS-FLOW.jpg`・
   `15_STRENGTH.jpg`。追加資料は独立したページの設計書だが、
   サイト内で同じことを何度も言う形になるため、
   重複するブロックを落としてこのページのセクションに収めている（2026-09-18 判断）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   05 STRENGTH ─ 強みの3要素と締め
   --------------------------------------------------------------------------
   資料15の「02 SALES × MARKETING」を3要素の式として見せる。
   営業力 × マーケティング力 = 成果、という並びなので、
   列のあいだに × を置いて式に見えるようにしている。
   資料では各要素に丸いアイコンが乗るが、素材が無いので文字だけで組む。

   締めの「営業会社から、事業を創る会社へ。」は資料15の05から。
   ここだけ段を変えて、ページ全体の結びに見せる。
   ========================================================================== */

.crescent-business-power .el-item {
	padding: 28px 20px !important;
	background-color: #fafafa !important;
	text-align: center !important;
}

.crescent-business-power .el-title {
	margin: 0 0 6px !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.04em !important;
	color: #111111 !important;
}

/*  補足の語。資料では（現場力）のように括弧付きなので、
    括弧はCSSで足す。入力欄には語だけを入れてもらう。                  */
.crescent-business-power .el-content {
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	color: #555555 !important;
}

.crescent-business-power .el-content::before { content: "（" !important; }
.crescent-business-power .el-content::after  { content: "）" !important; }

/*  列のあいだの ×。3列に並ぶ1200px以上でだけ出す。
    1列に積まれたときは式に見えないので出さない。                      */
@media (min-width: 1200px) {
	:is(.crescent-business-power > .uk-grid, .crescent-business-power.uk-grid) > :not(:first-child) .el-item {
		position: relative !important;
	}

	:is(.crescent-business-power > .uk-grid, .crescent-business-power.uk-grid) > :not(:first-child) .el-item::after {
		content: "×" !important;
		position: absolute !important;
		left: -30px !important;
		top: 50% !important;
		width: 20px !important;
		margin-top: -14px !important;
		font-size: 18px !important;
		font-weight: 400 !important;
		line-height: 1 !important;
		text-align: center !important;
		color: #999999 !important;
	}
}

/* 締めの見出し・本文（crescent-business-next／-lead）の指定は、ビルダーで
   組み直されてclassが使われなくなったため削除した（2026-10-06）。 */

/* --------------------------------------------------------------------------
   04 BUSINESS FLOW ─ 価値が生まれる流れ（crescent-business-steps）
   --------------------------------------------------------------------------
   5つのステップを横に並べる。資料14はシェブロン（矢羽根）で連結しているが、
   5枚を矢羽根にすると文字の入る幅が狭くなり、日本語だと2〜3行に割れる。
   番号と細い区切り線で「順番がある」ことを示し、
   列と列のあいだに小さな矢印を置く形にした。

   Grid要素は Title だけ使っている（Contentは空）。
   番号は入力させず、02の4領域と同じくCSSカウンタで振る。
   ========================================================================== */

.crescent-business-steps {
	counter-reset: crescent-step !important;
}

.crescent-business-steps .el-item {
	counter-increment: crescent-step !important;
	padding-top: 20px !important;
	border-top: 2px solid #eeeeee !important;
}

.crescent-business-steps .el-item::before {
	content: counter(crescent-step, decimal-leading-zero) !important;
	display: block !important;
	margin-bottom: 10px !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.02em !important;
	/* 進むほど色が変わる。ブランドのグラデーションを5つに分けた */
	color: #e5004f !important;
}

/*  上の罫線も番号に合わせて色を変え、左から右へ流れて見えるようにする。
    Gridの列を数えて当てる（classはラッパーにもGrid本体にも付きうる）。 */
:is(.crescent-business-steps > .uk-grid, .crescent-business-steps.uk-grid) > :nth-child(1) .el-item { border-top-color: #f39800 !important; }
:is(.crescent-business-steps > .uk-grid, .crescent-business-steps.uk-grid) > :nth-child(2) .el-item { border-top-color: #e5004f !important; }
:is(.crescent-business-steps > .uk-grid, .crescent-business-steps.uk-grid) > :nth-child(3) .el-item { border-top-color: #920783 !important; }
:is(.crescent-business-steps > .uk-grid, .crescent-business-steps.uk-grid) > :nth-child(4) .el-item { border-top-color: #4b2bb0 !important; }
:is(.crescent-business-steps > .uk-grid, .crescent-business-steps.uk-grid) > :nth-child(5) .el-item { border-top-color: #0068b7 !important; }

:is(.crescent-business-steps > .uk-grid, .crescent-business-steps.uk-grid) > :nth-child(1) .el-item::before { color: #f39800 !important; }
:is(.crescent-business-steps > .uk-grid, .crescent-business-steps.uk-grid) > :nth-child(2) .el-item::before { color: #e5004f !important; }
:is(.crescent-business-steps > .uk-grid, .crescent-business-steps.uk-grid) > :nth-child(3) .el-item::before { color: #920783 !important; }
:is(.crescent-business-steps > .uk-grid, .crescent-business-steps.uk-grid) > :nth-child(4) .el-item::before { color: #4b2bb0 !important; }
:is(.crescent-business-steps > .uk-grid, .crescent-business-steps.uk-grid) > :nth-child(5) .el-item::before { color: #0068b7 !important; }

/*  ステップ名。見出し扱いだが、ここでは項目名なので本文に近い大きさにする。
    Grid要素のTitleは .el-title なので、セクション共通の見出し指定
    （:not(.el-title) で除外済み）とはぶつからない。                   */
.crescent-business-steps .el-title {
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.7 !important;
	letter-spacing: 0.02em !important;
	color: #111111 !important;
}

/*  列と列のあいだの矢印。5列に並ぶ1200px以上でだけ出す。
    1列に積まれたときは、上下の並びで順番が分かるので要らない。         */
@media (min-width: 1200px) {
	:is(.crescent-business-steps > .uk-grid, .crescent-business-steps.uk-grid) > :not(:first-child) .el-item {
		position: relative !important;
	}

	:is(.crescent-business-steps > .uk-grid, .crescent-business-steps.uk-grid) > :not(:first-child) .el-item::after {
		content: "" !important;
		position: absolute !important;
		/* 列の余白（uk-grid の padding-left）の中央に置く */
		left: -28px !important;
		top: 42px !important;
		width: 6px !important;
		height: 6px !important;
		border-top: 1px solid #bbbbbb !important;
		border-right: 1px solid #bbbbbb !important;
		transform: rotate(45deg) !important;
	}
}

/* --------------------------------------------------------------------------
   01 FIRST VIEW ─ 写真パネルの上に文字を置く
   --------------------------------------------------------------------------
   資料どおり、ヒーローの背景に写真のコラージュを敷いている。

   **白のかぶせは使わない。** 背景画像を実測したところ
   左半分（0〜50%）は白でない画素が0〜2%、つまりほぼ純白で、
   虹と写真は60%より右にある。文字を白い範囲に収めれば読める。
   かぶせを足すと、せっかくの写真まで白く濁る。

   文字が収まる幅は、タイルの内側40pxから白が終わる50%手前まで。
   1040pxのタイルで約460px。
   ========================================================================== */

.crescent-business-hero .crescent-page-hero-lead {
	max-width: 460px !important;
}

/*  2026-10-07 メッセージ（.crescent-page-hero-msg）の横幅制限（460px／44%）は
    平山さまの指示で削除した。幅はビルダーで決める。リード文だけ残している。

    タイルが狭くなると白い範囲も比例して狭くなる。
    px固定だと文字がはみ出すので、割合で指定する。
    44% ＋ 内側の余白40px で、白が終わる50%の手前に収まる。            */
@media (max-width: 1199px) {
	.crescent-business-hero .crescent-page-hero-lead {
		max-width: 44% !important;
	}
}

/*  スマートフォン（〜639px）。
    2026-10-07 スマホ用の背景画像（business-hero-mobile-02.jpg）への差し替えと、
    それに合わせていた縦横比・最小の高さ・下余白の指定を削除した。
    スマホの背景は、ビルダーのclass（crescent-hero-bg-tablet）で非表示にする。
    文字の幅は、背景の白い範囲に収める必要がなくなったので解除する。       */
@media (max-width: 639px) {
	.crescent-business-hero .crescent-page-hero-lead {
		max-width: none !important;
	}

	/*  リードのText要素には uk-width-large（幅450px固定）が付いている。
	    max-width では解除できず、360pxの画面で105pxはみ出して
	    文字が切れていた。width を戻す必要がある。                    */
	.crescent-business-hero .crescent-page-hero-lead {
		width: auto !important;
	}
}

/* --------------------------------------------------------------------------
   03 BUSINESS FLOW ─ 事業の全体像（crescent-business-overview）
   --------------------------------------------------------------------------
   2つの事業を左右に置き、あいだに「相互に価値を高め合う」を挟む。

   真ん中は箱にしない。3等分だと真ん中が広すぎるので、
   両脇を可変・真ん中を固定幅にする（uk-child-width-1-3@m の33.3%を上書き）。

   枠の色は資料14に合わせて左＝ピンク、右＝青。
   どちらもCRESCENTのグラデーションから取った色で、
   フローの5ステップ（#f39800→#0068b7）の両端と同じ。

   コンテンツ事業に #fc2900（ディルミー）を使わないのは、
   あれはサービスの色であって事業の色ではないため。
   ピンクと近い色でもあり、左右の区別がつかなくなる。
   ========================================================================== */

.crescent-business-overview.crescent-business-overview {
	margin-top: 32px !important;
}

/* 両脇＝事業の箱 */
:is(.crescent-business-overview > .uk-grid, .crescent-business-overview.uk-grid) > :nth-child(1) .el-item,
:is(.crescent-business-overview > .uk-grid, .crescent-business-overview.uk-grid) > :nth-child(3) .el-item {
	padding: 26px 24px !important;
	background-color: #ffffff !important;
	border: 2px solid #e5004f !important;
	border-radius: 6px !important;
	text-align: center !important;
}

:is(.crescent-business-overview > .uk-grid, .crescent-business-overview.uk-grid) > :nth-child(3) .el-item {
	border-color: #0068b7 !important;
}

.crescent-business-overview .el-title {
	margin: 0 0 8px !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.02em !important;
	color: #111111 !important;
}

:is(.crescent-business-overview > .uk-grid, .crescent-business-overview.uk-grid) > :nth-child(1) .el-title {
	color: #e5004f !important;
}

:is(.crescent-business-overview > .uk-grid, .crescent-business-overview.uk-grid) > :nth-child(3) .el-title {
	color: #0068b7 !important;
}

.crescent-business-overview .el-content {
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.9 !important;
	color: #555555 !important;
}

/*  真ん中。箱にせず、双方向の矢印とひとことだけ置く。
    矢印は mask なので色は background で決まる。
    左のピンクから右の青へ流すと、両脇の枠の色とつながる。            */
:is(.crescent-business-overview > .uk-grid, .crescent-business-overview.uk-grid) > :nth-child(2) .el-item {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	text-align: center !important;
}

:is(.crescent-business-overview > .uk-grid, .crescent-business-overview.uk-grid) > :nth-child(2) .el-item::before {
	content: "" !important;
	display: block !important;
	width: 72px !important;
	height: 34px !important;
	margin: 0 auto 10px !important;
	background-image: linear-gradient(90deg, #e5004f 0%, #6e11ae 50%, #0068b7 100%) !important;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 34' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11 H58'/%3E%3Cpath d='M50 4 L58 11 L50 18'/%3E%3Cpath d='M66 27 H14'/%3E%3Cpath d='M22 20 L14 27 L22 34'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 34' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11 H58'/%3E%3Cpath d='M50 4 L58 11 L50 18'/%3E%3Cpath d='M66 27 H14'/%3E%3Cpath d='M22 20 L14 27 L22 34'/%3E%3C/svg%3E");
}

:is(.crescent-business-overview > .uk-grid, .crescent-business-overview.uk-grid) > :nth-child(2) .el-title {
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #777777 !important;
}

/*  並び方は置かれた幅で変える（2026-09-23）。
    この枠は一時BUSINESS FLOWの左右2カラムの片側（533〜680px）に入り、
    横3列では両脇が116〜190pxしか残らず見出しが2〜5行に折れたため
    縦積みにしていた。全幅に戻したので横並びに戻す。

      〜959px   … 縦積み（セールスプロモーション → ⇅ → コンテンツ）
      960px〜   … 横3列。真ん中は矢印だけの細い列

    uk-grid の子は padding-left が溝で box-sizing 込みなので、
    幅は溝を含めて指定し、合計が100%になるようにする。
    真ん中の列は、1200px以上では「相互に価値を高め合う」が
    1行に収まる180px、それ未満は120px（2行に折れる）。                 */
:is(.crescent-business-overview > .uk-grid, .crescent-business-overview.uk-grid) > * {
	width: 100% !important;
}

:is(.crescent-business-overview > .uk-grid, .crescent-business-overview.uk-grid) > :not(:first-child) {
	margin-top: 12px !important;
}

/*  縦に積んでいるあいだは、矢印も縦向き（⇅）にする。
    transform は配置の箱を変えないので、回した分の余白を margin で取る。 */
:is(.crescent-business-overview > .uk-grid, .crescent-business-overview.uk-grid) > :nth-child(2) .el-item::before {
	transform: rotate(90deg) !important;
	margin: 22px auto 24px !important;
}

@media (min-width: 960px) {
	:is(.crescent-business-overview > .uk-grid, .crescent-business-overview.uk-grid) > :nth-child(1),
	:is(.crescent-business-overview > .uk-grid, .crescent-business-overview.uk-grid) > :nth-child(3) {
		width: calc((100% - 120px) / 2) !important;
	}

	:is(.crescent-business-overview > .uk-grid, .crescent-business-overview.uk-grid) > :nth-child(2) {
		width: 120px !important;
	}

	:is(.crescent-business-overview > .uk-grid, .crescent-business-overview.uk-grid) > :not(:first-child) {
		margin-top: 0 !important;
	}

	:is(.crescent-business-overview > .uk-grid, .crescent-business-overview.uk-grid) > :nth-child(2) .el-item::before {
		transform: none !important;
		margin: 0 auto 10px !important;
	}

	/*  2行に折れたときに行の長さを揃える */
	:is(.crescent-business-overview > .uk-grid, .crescent-business-overview.uk-grid) > :nth-child(2) .el-title {
		text-wrap: balance;
	}
}

@media (min-width: 1200px) {
	:is(.crescent-business-overview > .uk-grid, .crescent-business-overview.uk-grid) > :nth-child(1),
	:is(.crescent-business-overview > .uk-grid, .crescent-business-overview.uk-grid) > :nth-child(3) {
		width: calc((100% - 180px) / 2) !important;
	}

	:is(.crescent-business-overview > .uk-grid, .crescent-business-overview.uk-grid) > :nth-child(2) {
		width: 180px !important;
	}
}

/*  両脇の枠に入れた写真（16:9）。枠の上部に置き、内側の余白に合わせる。
    枠の角丸（6px）より一段小さい角丸にして、内側に収まって見えるように。 */
.crescent-business-overview .el-image {
	display: block !important;
	width: 100% !important;
	aspect-ratio: 16 / 9 !important;
	object-fit: cover !important;
	border-radius: 4px !important;
	margin: 0 0 18px !important;
}

/* --------------------------------------------------------------------------
   03 BUSINESS FLOW ─ 生み出す価値（crescent-business-impact）
   --------------------------------------------------------------------------
   資料14-04。箱にせず、アイコン・項目名・ひとことを縦に積んで4つ並べる。
   列のあいだは細い縦線で区切る（資料もこの形）。

   アイコンは支給がないので作った。色は同じページの4領域と揃えている。
   線だけの図形で、取扱商材やディルミーと同じ mask-image の敷き方。
   ========================================================================== */

.crescent-business-impact.crescent-business-impact {
	margin-top: 40px !important;
}

.crescent-business-impact .el-item {
	padding: 4px 16px !important;
	text-align: center !important;
}

.crescent-business-impact .el-item::before {
	content: "" !important;
	display: block !important;
	width: 46px !important;
	height: 46px !important;
	margin: 0 auto 14px !important;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

.crescent-business-impact .el-title {
	margin: 0 0 6px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.02em !important;
	color: #111111 !important;
}

.crescent-business-impact .el-content {
	margin: 0 !important;
	font-size: 12px !important;
	line-height: 1.8 !important;
	color: #777777 !important;
}

/*  列と列の区切り。640px以上で横に並ぶので、そこから出す。            */
@media (min-width: 640px) {
	:is(.crescent-business-impact > .uk-grid, .crescent-business-impact.uk-grid) > :not(:first-child) .el-item {
		border-left: 1px solid #eeeeee !important;
	}
}

/* 人の成長 */
:is(.crescent-business-impact > .uk-grid, .crescent-business-impact.uk-grid) > :nth-child(1) .el-item::before {
	background-color: #e5004f !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='20' r='9'/%3E%3Cpath d='M8 52c0-9 7-15 16-15s16 6 16 15'/%3E%3Cpath d='M46 34 V14'/%3E%3Cpath d='M39 21 L46 14 L53 21'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='20' r='9'/%3E%3Cpath d='M8 52c0-9 7-15 16-15s16 6 16 15'/%3E%3Cpath d='M46 34 V14'/%3E%3Cpath d='M39 21 L46 14 L53 21'/%3E%3C/svg%3E");
}

/* 企業の成長 */
:is(.crescent-business-impact > .uk-grid, .crescent-business-impact.uk-grid) > :nth-child(2) .el-item::before {
	background-color: #f05a32 !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 54V22l16-8v40'/%3E%3Cpath d='M26 54V28l18 7v19'/%3E%3Cpath d='M16 28h4M16 36h4M16 44h4M33 39h4M33 46h4'/%3E%3Cpath d='M6 54h52'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 54V22l16-8v40'/%3E%3Cpath d='M26 54V28l18 7v19'/%3E%3Cpath d='M16 28h4M16 36h4M16 44h4M33 39h4M33 46h4'/%3E%3Cpath d='M6 54h52'/%3E%3C/svg%3E");
}

/* 社会への貢献 */
:is(.crescent-business-impact > .uk-grid, .crescent-business-impact.uk-grid) > :nth-child(3) .el-item::before {
	background-color: #0a9d55 !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='23'/%3E%3Cpath d='M9 32h46'/%3E%3Cpath d='M32 9c7 7 10 15 10 23s-3 16-10 23c-7-7-10-15-10-23S25 16 32 9Z'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='23'/%3E%3Cpath d='M9 32h46'/%3E%3Cpath d='M32 9c7 7 10 15 10 23s-3 16-10 23c-7-7-10-15-10-23S25 16 32 9Z'/%3E%3C/svg%3E");
}

/* 未来への挑戦 */
:is(.crescent-business-impact > .uk-grid, .crescent-business-impact.uk-grid) > :nth-child(4) .el-item::before {
	background-color: #6e11ae !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 42c-6 0-11-4.5-11-10s5-10 11-10c9 0 11 20 20 20 6 0 11-4.5 11-10s-5-10-11-10c-9 0-11 20-20 20Z'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 42c-6 0-11-4.5-11-10s5-10 11-10c9 0 11 20 20 20 6 0 11-4.5 11-10s-5-10-11-10c-9 0-11 20-20 20Z'/%3E%3C/svg%3E");
}

/* スマートフォン（〜639px） ----------------------------------------------- */
@media (max-width: 639px) {
	.crescent-business-overview .el-title {
		font-size: 15px !important;
	}

	.crescent-business-impact .el-item {
		padding: 4px 8px !important;
	}

	.crescent-business-impact .el-item::before {
		width: 38px !important;
		height: 38px !important;
		margin-bottom: 10px !important;
	}

	.crescent-business-impact .el-title {
		font-size: 14px !important;
	}
}

/* --------------------------------------------------------------------------
   04 STRENGTH ─ ユーザーの声を、新しい価値へ（crescent-business-voice）
   --------------------------------------------------------------------------
   資料15-03。現場で聞いた声が企画に回り、また現場へ戻る循環。

   **上のビジネスの流れ（5ステップ）と見た目を分けている。**
   同じページに矢印つきの横並びが2つあるので、同じ調子だと繰り返しに見える。
   ステップ側は番号つき・5色・上罫線と賑やかなので、
   こちらは番号も色も枠も無しの地味な作りにして、役割の違いを出す。

   最後の「再び現場へ」だけ文字をピンクにしている。
   直線ではなく輪であることが、これで分かる。

   列数はビルダー側で持っている（1200px以上が6列、それ未満は3列）。
   スマートフォンで3列×2段になるのは、縦に6段積むより収まりがよい。
   ここでは列のあいだの矢印だけを足す。
   ========================================================================== */

.crescent-business-voice.crescent-business-voice {
	margin-top: 28px !important;
}

.crescent-business-voice .el-item {
	padding: 0 8px !important;
	text-align: center !important;
}

.crescent-business-voice .el-title {
	margin: 0 0 4px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.02em !important;
	color: #111111 !important;
}

.crescent-business-voice .el-content {
	margin: 0 !important;
	font-size: 11px !important;
	line-height: 1.8 !important;
	color: #888888 !important;
}

/*  輪の終わり＝始まりに戻るところ。 */
:is(.crescent-business-voice > .uk-grid, .crescent-business-voice.uk-grid) > :nth-child(6) .el-title {
	color: #e5004f !important;
}

@media (min-width: 1200px) {
	:is(.crescent-business-voice > .uk-grid, .crescent-business-voice.uk-grid) > :not(:first-child) .el-item {
		position: relative !important;
	}

	/*  列のあいだの矢印。ステップ側と同じ位置の取り方だが、
	    こちらは文字が上から始まるので少し上に置く。                   */
	:is(.crescent-business-voice > .uk-grid, .crescent-business-voice.uk-grid) > :not(:first-child) .el-item::after {
		content: "" !important;
		position: absolute !important;
		left: -24px !important;
		top: 9px !important;
		width: 6px !important;
		height: 6px !important;
		border-top: 1px solid #cccccc !important;
		border-right: 1px solid #cccccc !important;
		transform: rotate(45deg) !important;
	}
}

@media (max-width: 639px) {
	.crescent-business-voice .el-title {
		font-size: 13px !important;
	}
}

/* --------------------------------------------------------------------------
   03 CONTENT BUSINESS ─ ディルミーの予告（crescent-business-dealme）
   --------------------------------------------------------------------------
   このセクションは説明文とボタンだけで、上のSALES PROMOTION（705px）に対し
   382pxしかなく、2つの軸と謳っているのに片方が半分の高さだった。
   子ページ（/business/content/）の3つの特徴を持ってきて列を作る。

   **枠の見た目は子ページと共有している。** 上の 03 FEATURE の指定に
   `.crescent-business-dealme` を並べて書いてあるので、ここには書かない。
   `:is()` の中に足しているぶんも特定度は変わらない（:is は引数の最大値）。

   子ページとの違いは説明文の有無。
   親はアイコンとタイトルだけ、子は説明文つき。
   親で予告して子で説明する形にして、「ディルミーを見る」を押す理由を残す。

   色は #fc2900（ディルミーのロゴ）。このページの他の色
   （4領域の #e5004f 系、フローの5色）はCRESCENTのグラデーションから
   取った会社の色なので、サービスの色が入ると区別がつく。
   ========================================================================== */

.crescent-business-dealme-logo.crescent-business-dealme-logo {
	margin-top: 24px !important;
}

.crescent-business-dealme-logo .el-image {
	display: block !important;
	width: 100% !important;
	max-width: 240px !important;
	height: auto !important;
}

/*  親ページのカードには説明文が無いので、タイトル下の10pxが余る。
    枠の中で文字が上に寄って見えるため詰める。                          */
.crescent-business-dealme .el-title {
	margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   02 SALES PROMOTION ─ 4つのサービス領域（crescent-business-areas）
   --------------------------------------------------------------------------
   ここは領域の名前だけを見せて、子ページ（/business/sales-promotion/）へ送る。
   3行の説明文は資料06にあるが、それは子ページ側に置く。

   番号は入力させず、CSSカウンタで振る（ABOUTのVALUESと同じ）。
   色はブランドの7色グラデーションから取った5色（2026-10-27 に UKON WEST. を
   05 として追加し、4色→5色に変えた。採用ページ02 DATA・「CRESCENTで働く魅力」と
   同じ5色を同じ順で使う）。
   ========================================================================== */

/*  ビルダーはclassを .uk-margin のラッパーに付けることも、
    Grid本体に付けることもある。どちらでも効くように両方書く。         */
.crescent-business-areas {
	counter-reset: crescent-area !important;
}

.crescent-business-areas.crescent-business-areas {
	margin-top: 32px !important;
}

.crescent-business-areas .el-item {
	counter-increment: crescent-area !important;
	padding-top: 22px !important;
	border-top: 1px solid #e5e5e5 !important;
}

.crescent-business-areas .el-item::before {
	content: counter(crescent-area, decimal-leading-zero) !important;
	display: block !important;
	margin-bottom: 14px !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 30px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0.02em !important;
}

/* 番号の色は5色。Gridの列を数えて当てる（01 赤→02 橙赤→03 橙→04 緑→05 紫） */
:is(.crescent-business-areas > .uk-grid, .crescent-business-areas.uk-grid) > :nth-child(1) .el-item::before { color: #e5004f !important; }
:is(.crescent-business-areas > .uk-grid, .crescent-business-areas.uk-grid) > :nth-child(2) .el-item::before { color: #f05a32 !important; }
:is(.crescent-business-areas > .uk-grid, .crescent-business-areas.uk-grid) > :nth-child(3) .el-item::before { color: #f39800 !important; }
:is(.crescent-business-areas > .uk-grid, .crescent-business-areas.uk-grid) > :nth-child(4) .el-item::before { color: #0a9d55 !important; }
:is(.crescent-business-areas > .uk-grid, .crescent-business-areas.uk-grid) > :nth-child(5) .el-item::before { color: #6e11ae !important; }

/* 英字はMontserrat。サイト全体で英字に使っている書体に揃える */
.crescent-business-areas .el-title {
	margin: 0 0 6px !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.02em !important;
	color: #111111 !important;
}

.crescent-business-areas .el-content {
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	color: #555555 !important;
}

/* スマートフォン（〜639px） ----------------------------------------------- */
@media (max-width: 639px) {
	.crescent-business-areas .el-item::before {
		font-size: 26px !important;
		margin-bottom: 10px !important;
	}

	.crescent-business-steps .el-item {
		padding-top: 16px !important;
	}

	.crescent-business-steps .el-item::before {
		font-size: 20px !important;
		margin-bottom: 8px !important;
	}

	.crescent-business-steps .el-title {
		font-size: 14px !important;
	}

	.crescent-business-power .el-item {
		padding: 22px 16px !important;
	}

	.crescent-business-power .el-title {
		font-size: 16px !important;
	}
}

/* ==========================================================================
   下層 セールスプロモーション事業ページ
   ==========================================================================
   資料は `06_SALES-PROMOTION.png`。
   ヒーロー／サービス概要／4サービスの詳細／CTA。

   02 サービス概要の4項目（.crescent-sp-services）の指定は
   「下層 COMPANY ページ」の節にある。COMPANYの4カードと同じ形なのでまとめた。

   03〜06（各サービスの詳細）は**資料に本文が無い**。
   一覧に「サービス内容の詳細。」とあるだけで、原稿はクライアント待ち。
   いまはラベルだけの枠。
   ========================================================================== */

/* ==========================================================================
   下層 COMPANY ページ
   ==========================================================================
   資料は `09_COMPANY.png`。
   ヒーロー／会社概要／拠点ネットワーク／事業領域と姿勢／代表メッセージ／CTA。

   資料のセクション一覧では 04＝4枚のカードのうち1枚目、
   05＝残り3枚（信頼・挑戦・チーム）に分かれているが、
   05は代表メッセージに使うと決めたので、4枚まとめて04に置いている。
   資料のPCデザインでも4枚は1行に並んでいる。

   05 MESSAGE のCSSは「COMPANYページのMESSAGE」の節にある（トップの流用）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   02 COMPANY PROFILE ─ 会社概要の表
   --------------------------------------------------------------------------
   Text要素にHTMLの表を直接書いている。
   ビルダーに表の要素が無く、6行の定型データにGridを使うと
   項目名と値の対応が崩れやすいため。
   このセクションにH2は置かない。ラベルが「会社概要」と出るので重複する。
   ========================================================================== */

.crescent-company-table table {
	width: 100% !important;
	max-width: 860px !important;
	margin: 0 !important;
	border-collapse: collapse !important;
	border-top: 1px solid #eeeeee !important;
}

.crescent-company-table th,
.crescent-company-table td {
	padding: 16px 18px !important;
	border-bottom: 1px solid #eeeeee !important;
	font-size: 15px !important;
	line-height: 1.8 !important;
	text-align: left !important;
	vertical-align: top !important;
}

.crescent-company-table th {
	width: 180px !important;
	/* 項目名のセル。セクションの背景（muted #fcfaf8）と同じ暖かい色味で、少し濃くした
	   （白との差を約2.4倍。2026-10-09 平山さま指示）。セクションの色を変えたら見直す。 */
	background-color: #f8f3ee !important;
	font-weight: 700 !important;
	color: #111111 !important;
	white-space: nowrap !important;
}

.crescent-company-table td {
	font-weight: 400 !important;
	color: #555555 !important;
}

/* --------------------------------------------------------------------------
   03 OFFICE NETWORK ─ 3拠点
   --------------------------------------------------------------------------
   資料は日本地図に3拠点をプロットしたイラスト。素材が未入手なので、
   いまは住所の3カラムで組む。地図が来たら上に足せる。
   ========================================================================== */

.crescent-company-offices.crescent-company-offices {
	margin-top: 32px !important;
}

.crescent-company-offices .el-item {
	padding: 28px 24px !important;
	background-color: #fafafa !important;
}

/* 都市名。英字なのでサイト共通のMontserratで大きく見せる */
.crescent-company-offices .el-title {
	margin: 0 !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.04em !important;
	color: #111111 !important;
}

.crescent-company-offices .el-meta {
	margin: 6px 0 14px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.06em !important;
	color: #888888 !important;
}

.crescent-company-offices .el-content {
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.9 !important;
	color: #555555 !important;
}

/* --------------------------------------------------------------------------
   04 BUSINESS FIELD ─ 事業領域と姿勢の4枚
   --------------------------------------------------------------------------
   英字の見出し＋日本語＋説明、という形は
   セールスプロモーションのサービス概要と同じなので、指定をまとめている。
   （列数はビルダー側の設定。COMPANYは4列、セールスプロモーションは2列）
   ========================================================================== */

.crescent-company-values.crescent-company-values,
.crescent-sp-services.crescent-sp-services {
	margin-top: 32px !important;
}

.crescent-company-values .el-item,
.crescent-sp-services .el-item {
	padding-top: 22px !important;
	border-top: 1px solid #e5e5e5 !important;
}

.crescent-company-values .el-title,
.crescent-sp-services .el-title {
	margin: 0 !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.02em !important;
	color: #111111 !important;
}

.crescent-company-values .el-meta,
.crescent-sp-services .el-meta {
	margin: 5px 0 12px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	color: #e5004f !important;
}

.crescent-company-values .el-content,
.crescent-sp-services .el-content {
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.8 !important;
	color: #555555 !important;
}

/* スマートフォン（〜639px） ----------------------------------------------- */
@media (max-width: 639px) {
	/*  表は2列のままだと項目名で幅を取られて値が潰れるので縦に積む。
	    規約ページの表と同じ考え方。                                    */
	.crescent-company-table th,
	.crescent-company-table td {
		display: block !important;
		width: auto !important;
		padding: 12px 14px !important;
		font-size: 14px !important;
		white-space: normal !important;
	}

	.crescent-company-table th {
		border-bottom: 0 !important;
		padding-bottom: 4px !important;
	}

	.crescent-company-offices .el-item {
		padding: 22px 20px !important;
	}

	.crescent-company-offices .el-title {
		font-size: 20px !important;
	}
}

/* ==========================================================================
   下層 CONTENT BUSINESS（ディルミー）ページ
   ==========================================================================
   資料は `07_CONTENT-BUSINESS.png`。
   ヒーロー／利用シーン／ディルミーの特徴／クーポンカテゴリー／CTA。

   資料のセクション一覧にある「02 SERVICE OVERVIEW」は
   クライアント確認で不要（2026-09-14・09-18）。

   このページだけ淡いオレンジ（#fcf1ed）を使っている。
   資料のアイコンの丸から取った色で、ディルミーのロゴ（#fc2900）に合う。
   他の下層ページはグレーの面（#fafafa）なので、
   プロダクトのページであることが色で分かる。

   文字色は他ページと同じ #111 / #555 のまま。
   ロゴの赤は白地で3.9:1しかなく、本文サイズの文字には使えない。
   ========================================================================== */

/* 01 ヒーローのディルミーロゴ --------------------------------------------
   他ページがメッセージ行を置く位置にロゴが入る。前後の余白もそれに揃える。 */
.crescent-content-logo {
	margin: 26px 0 18px !important;
}

/* 大きさはPC・タブレットだけ指定。スマホ（〜639px）はビルダーで決める
   （2026-10-06 平山さま指示で、スマホの大きさ制御を解除した）。 */
@media (min-width: 640px) {
	.crescent-content-logo img,
	.crescent-content-logo .el-image {
		display: block !important;
		width: 100% !important;
		max-width: 360px !important;
		height: auto !important;
	}
}

/* 02 SCENE ─ 利用シーンの写真 ---------------------------------------------
   資料は縦長の写真を4枚横に並べる。写真の縦横比がまちまちでも
   並びが崩れないよう、比率を決めて切り抜く。                               */
.crescent-content-scene .el-image {
	display: block !important;
	width: 100% !important;
	aspect-ratio: 4 / 5 !important;
	object-fit: cover !important;
}

/*  写真の下のキャプション。
    ビルダーのTitle（H3）に入っているので素のままだと28pxの見出しになる。
    これは見出しではなく写真の補足なので、本文より小さく落とす。

    ジャンル名ではなく「使う場面」の一文にしてある。
    すぐ下のCOUPON CATEGORYが8ジャンルを並べているので、
    ここにジャンル名を置くと同じ情報が2回続く。

    13pxなら15文字前後が343pxの中で1行に収まる。
    中央揃えにせず左に寄せているのは、写真の左端と揃うため。             */
.crescent-content-scenes .el-title {
	margin: 12px 0 0 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.7 !important;
	letter-spacing: 0.02em !important;
	color: #555555 !important;
	text-align: left !important;
	/*  2行になるときに行の長さを揃える。
	    スマートフォンの2列だと「ランチのお店を、クーポンで／探す」と
	    最後の2文字だけが落ちる。balance なら読点のところで割れる。
	    未対応のブラウザでは素の折り返しに戻るだけ。                    */
	text-wrap: balance;
}

@media (max-width: 639px) {
	.crescent-content-scenes .el-title {
		margin-top: 10px !important;
		font-size: 12px !important;
	}
}

/* 03 FEATURE ─ 3つの特徴 -------------------------------------------------- */
.crescent-content-features.crescent-content-features,
.crescent-business-dealme.crescent-business-dealme {
	margin-top: 32px !important;
}

/*  白地に色付きの下線という枠は、取扱商材のブランド一覧と同じ作り。
    淡いピンクの面だけだと締まらないので、輪郭と下線を足して枠にする。
    下線の色はディルミーのロゴと同じ #fc2900 で、アイコンとも揃う。

    下のクーポンカテゴリー（8枚）は淡いピンクの面のまま残している。
    こちらは3つの特徴＝読ませる枠、あちらは一覧＝並べるタイル、と
    役割が違うので、見え方も分けたほうが区別がつく。                    */
.crescent-content-features .el-item,
.crescent-business-dealme .el-item {
	padding: 30px 26px !important;
	background-color: #ffffff !important;
	border: 1px solid #eeeeee !important;
	border-bottom: 3px solid #fc2900 !important;
	text-align: center !important;
}

/*  3つの特徴のアイコン（支給。1080x1080のSVG、塗りの指定なし）。
    クーポンカテゴリーと同じく mask-image で敷き、色は #fc2900。

    資料07ではこの3つはアイコンを上にした中央揃えなので、
    カードも左揃えから中央揃えに変えた。下のクーポンカテゴリーとも揃う。

    2番目の `icon_insurance-2.svg` は盾。
    クーポンカテゴリーの `icon_insurance.svg`（箱）とは別物なので注意。   */
.crescent-content-features .el-item::before,
.crescent-business-dealme .el-item::before {
	content: "" !important;
	display: block !important;
	width: 52px !important;
	height: 52px !important;
	margin: 0 auto 14px !important;
	background-color: #fc2900 !important;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

/* お得に使えるクーポン */
:is(.crescent-content-features > .uk-grid, .crescent-content-features.uk-grid,
    .crescent-business-dealme > .uk-grid, .crescent-business-dealme.uk-grid) > :nth-child(1) .el-item::before {
	-webkit-mask-image: url("/wp-content/uploads/2026/09/icon_coupon.svg");
	        mask-image: url("/wp-content/uploads/2026/09/icon_coupon.svg");
}

/* 安心をプラス、置き配保険 */
:is(.crescent-content-features > .uk-grid, .crescent-content-features.uk-grid,
    .crescent-business-dealme > .uk-grid, .crescent-business-dealme.uk-grid) > :nth-child(2) .el-item::before {
	-webkit-mask-image: url("/wp-content/uploads/2026/09/icon_insurance-2.svg");
	        mask-image: url("/wp-content/uploads/2026/09/icon_insurance-2.svg");
}

/* 会員限定サービス */
:is(.crescent-content-features > .uk-grid, .crescent-content-features.uk-grid,
    .crescent-business-dealme > .uk-grid, .crescent-business-dealme.uk-grid) > :nth-child(3) .el-item::before {
	-webkit-mask-image: url("/wp-content/uploads/2026/09/icon_member.svg");
	        mask-image: url("/wp-content/uploads/2026/09/icon_member.svg");
}

.crescent-content-features .el-title,
.crescent-business-dealme .el-title {
	margin: 0 0 10px !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.02em !important;
	color: #111111 !important;
}

.crescent-content-features .el-content {
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.9 !important;
	color: #555555 !important;
}

/* 04 COUPON CATEGORY ─ 8ジャンル ------------------------------------------
   資料は丸いアイコン＋ラベル。アイコンが未入手なのでラベルだけ。
   アイコンが来たら Grid の Image に入れれば、この指定のまま上に乗る。      */
.crescent-content-categories.crescent-content-categories {
	margin-top: 32px !important;
}

/*  上に写真、下に「小さいアイコン＋タイトル」（2026-10-02 平山さま指示）。
    以前は薄いグレーの丸にアイコンを入れて上に置いていたが、写真が入ったので
    写真を上にし、アイコンはタイトルの左に小さく置く。

    ■ アイコンの出し方は2通り
      ① 何も書かない … 下の nth-child の対応表（1番目＝グルメ…）で自動で出る
      ② ビルダーに書く … タイトル欄・メタ欄・コンテンツ欄のどれかに次のコードを入れる。
           <span class="crescent-cat-icon crescent-cat-icon--gourmet"></span>
         ②を書いたカードは①を出さない（二重にならない）。順番を入れ替えても
         ②なら崩れない。使える名前は gourmet／travel／beauty／leisure／shopping／
         fitness／life／insurance。
         新しいアイコンは名前の代わりに画像のURLを渡す。
           <span class="crescent-cat-icon" style="--cat-icon:url('/wp-content/uploads/2026/10/icon_xxx.svg')"></span>

    ■ 置く場所
      メタ欄  … タイトルの左（アイコン用の列）。いちばんおすすめ
      タイトル欄 … 文字の頭にインラインで並ぶ
      コンテンツ欄 … 写真・タイトルの下に1行で出る（文章を入れる欄）
    グリッドの列と行を class で決めているので、ビルダーでメタをタイトルの
    上に置く設定でも下に置く設定でも、見た目は同じ。                      */
.crescent-content-categories .el-item {
	display: grid !important;
	grid-template-columns: auto 1fr !important;
	/* start にしないと、同じ行のほかのカードが高い（文章が長い）とき、
	   余った高さが写真の上下に配られて写真とタイトルの間が開く（uk-grid-match の影響） */
	align-content: start !important;
	align-items: center !important;
	column-gap: 8px !important;
	padding: 0 !important;
	background-color: transparent !important;
	text-align: left !important;
}

/* 写真は2列ぶちぬき・16:9 */
.crescent-content-categories .el-item > picture {
	grid-column: 1 / -1 !important;
	grid-row: 1 !important;
	display: block !important;
	margin: 0 0 12px !important;
}

.crescent-content-categories .el-item .el-image {
	display: block !important;
	width: 100% !important;
	aspect-ratio: 16 / 9 !important;
	object-fit: cover !important;
	border-radius: 8px !important;
}

/* 行2：アイコン（左）とタイトル（右） */
.crescent-content-categories .el-item > .el-meta {
	grid-column: 1 !important;
	grid-row: 2 !important;
	margin: 0 !important;
	line-height: 1 !important;
}

.crescent-content-categories .el-item > .el-title {
	grid-column: 2 !important;
	grid-row: 2 !important;
}

/* 行3：コンテンツ欄（アイコンのコードや補足の文）は幅いっぱいで下に */
.crescent-content-categories .el-item > .el-content {
	grid-column: 1 / -1 !important;
	grid-row: 3 !important;
	margin: 4px 0 0 !important;
	font-size: 12px !important;
	line-height: 1.7 !important;
	color: #555555 !important;
}

/* ビルダーに文字だけ入れたメタ（アイコンでないもの）は2列ぶちぬきで下に */
.crescent-content-categories .el-item > .el-meta:not(:has(.crescent-cat-icon)) {
	grid-column: 1 / -1 !important;
	grid-row: 3 !important;
	margin-top: 2px !important;
	font-size: 12px !important;
	line-height: 1.7 !important;
	color: #555555 !important;
}

/* 丸は使わない */
.crescent-content-categories .el-item::before {
	content: none !important;
	display: none !important;
}

/* ① 自動のアイコン（②を書いていないカードだけ）。タイトルの左・行2の1列目 */
.crescent-content-categories .el-item:not(:has(.crescent-cat-icon))::after {
	content: "" !important;
	grid-column: 1 !important;
	grid-row: 2 !important;
	display: block !important;
	width: 26px !important;
	height: 26px !important;
	background-color: #fc2900 !important;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

.crescent-content-categories .el-item:has(.crescent-cat-icon)::after {
	content: none !important;
	display: none !important;
}

/* ② ビルダーに書くアイコン。色はタイトルのアクセントと同じ #fc2900 */
.crescent-cat-icon {
	display: inline-block;
	width: 26px;
	height: 26px;
	vertical-align: -7px;
	margin-right: 6px;
	background-color: #fc2900;
	-webkit-mask: var(--cat-icon) center / contain no-repeat;
	        mask: var(--cat-icon) center / contain no-repeat;
}

.el-meta > .crescent-cat-icon {
	display: block;
	margin: 0;
	vertical-align: baseline;
}

.crescent-cat-icon--gourmet   { --cat-icon: url("/wp-content/uploads/2026/09/icon_groumet.svg"); }
.crescent-cat-icon--travel    { --cat-icon: url("/wp-content/uploads/2026/09/icon_travel.svg"); }
.crescent-cat-icon--beauty    { --cat-icon: url("/wp-content/uploads/2026/09/icon_beauty.svg"); }
.crescent-cat-icon--leisure   { --cat-icon: url("/wp-content/uploads/2026/09/icon_leisure.svg"); }
.crescent-cat-icon--shopping  { --cat-icon: url("/wp-content/uploads/2026/09/icon_shopping.svg"); }
.crescent-cat-icon--fitness   { --cat-icon: url("/wp-content/uploads/2026/09/icon_fitness.svg"); }
.crescent-cat-icon--life      { --cat-icon: url("/wp-content/uploads/2026/09/icon_life.svg"); }
.crescent-cat-icon--insurance { --cat-icon: url("/wp-content/uploads/2026/09/icon_insurance.svg"); }

/* ① の対応表（並び順で決まる）。②で書けば不要 */

/* グルメ */
:is(.crescent-content-categories > .uk-grid, .crescent-content-categories.uk-grid) > :nth-child(1) .el-item::after {
	-webkit-mask-image: url("/wp-content/uploads/2026/09/icon_groumet.svg");
	        mask-image: url("/wp-content/uploads/2026/09/icon_groumet.svg");
}

/* トラベル */
:is(.crescent-content-categories > .uk-grid, .crescent-content-categories.uk-grid) > :nth-child(2) .el-item::after {
	-webkit-mask-image: url("/wp-content/uploads/2026/09/icon_travel.svg");
	        mask-image: url("/wp-content/uploads/2026/09/icon_travel.svg");
}

/* ビューティー */
:is(.crescent-content-categories > .uk-grid, .crescent-content-categories.uk-grid) > :nth-child(3) .el-item::after {
	-webkit-mask-image: url("/wp-content/uploads/2026/09/icon_beauty.svg");
	        mask-image: url("/wp-content/uploads/2026/09/icon_beauty.svg");
}

/* レジャー */
:is(.crescent-content-categories > .uk-grid, .crescent-content-categories.uk-grid) > :nth-child(4) .el-item::after {
	-webkit-mask-image: url("/wp-content/uploads/2026/09/icon_leisure.svg");
	        mask-image: url("/wp-content/uploads/2026/09/icon_leisure.svg");
}

/* ショッピング */
:is(.crescent-content-categories > .uk-grid, .crescent-content-categories.uk-grid) > :nth-child(5) .el-item::after {
	-webkit-mask-image: url("/wp-content/uploads/2026/09/icon_shopping.svg");
	        mask-image: url("/wp-content/uploads/2026/09/icon_shopping.svg");
}

/* フィットネス */
:is(.crescent-content-categories > .uk-grid, .crescent-content-categories.uk-grid) > :nth-child(6) .el-item::after {
	-webkit-mask-image: url("/wp-content/uploads/2026/09/icon_fitness.svg");
	        mask-image: url("/wp-content/uploads/2026/09/icon_fitness.svg");
}

/* ライフサポート */
:is(.crescent-content-categories > .uk-grid, .crescent-content-categories.uk-grid) > :nth-child(7) .el-item::after {
	-webkit-mask-image: url("/wp-content/uploads/2026/09/icon_life.svg");
	        mask-image: url("/wp-content/uploads/2026/09/icon_life.svg");
}

/* 置き配保険 */
:is(.crescent-content-categories > .uk-grid, .crescent-content-categories.uk-grid) > :nth-child(8) .el-item::after {
	-webkit-mask-image: url("/wp-content/uploads/2026/09/icon_insurance.svg");
	        mask-image: url("/wp-content/uploads/2026/09/icon_insurance.svg");
}

.crescent-content-categories .el-title {
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.04em !important;
	color: #111111 !important;
}

/* スマートフォン（〜639px） ----------------------------------------------- */
@media (max-width: 639px) {
	.crescent-content-features .el-item,
	.crescent-business-dealme .el-item {
		padding: 24px 20px !important;
	}

	.crescent-content-features .el-item::before,
	.crescent-business-dealme .el-item::before {
		width: 44px !important;
		height: 44px !important;
		margin-bottom: 12px !important;
	}

	.crescent-content-categories .el-item {
		column-gap: 6px !important;
	}

	.crescent-content-categories .el-item:not(:has(.crescent-cat-icon))::after,
	.crescent-cat-icon {
		width: 24px !important;
		height: 24px !important;
	}

	.crescent-content-categories .el-title {
		font-size: 13px !important;
	}
}

/* ==========================================================================
   下層 取扱商材・ブランドページ
   ==========================================================================
   資料は `08_PRODUCTS.png`。
   ヒーロー／ブランド一覧（8件）／サービス領域（4件）／CTA。

   資料のセクション一覧にある「TRUST MESSAGE｜信頼のメッセージ」は
   クライアント確認で不要（2026-09-14・09-18）。

   カード下端の色はブランドごとに変える。**ロゴのファイルから拾った値**で、
   ボードの低解像度から目測するより正確。
   U-NEXT・NURO光・MANOMAは支給されたロゴがモノクロなので黒にしている。
   ========================================================================== */

/* ブランド一覧 ------------------------------------------------------------ */
.crescent-products-brands.crescent-products-brands {
	margin-top: 32px !important;
}

.crescent-products-brands .el-item {
	padding: 28px 20px 24px !important;
	background-color: #ffffff !important;
	border: 1px solid #eeeeee !important;
	/* 下端だけ太くしてブランドの色を出す */
	border-bottom: 3px solid #111111 !important;
	text-align: center !important;
}

/*  ロゴの箱の高さを固定する。1行のロゴと2行のロゴ（DMM TV＋Disney+）が
    混ざるので、高さを決めないと説明文の頭が8枚でばらつく。
    object-fit: contain なので、比率の違うロゴも歪まず中央に収まる。      */
.crescent-products-brands .el-image {
	display: block !important;
	width: 100% !important;
	max-width: 180px !important;
	height: 52px !important;
	margin: 0 auto 18px !important;
	object-fit: contain !important;
}

/* ブランド名はロゴが担うので、Title要素は出さない（altに入れてある） */
.crescent-products-brands .el-title {
	display: none !important;
}

.crescent-products-brands .el-content {
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.9 !important;
	color: #555555 !important;
}

/* 下端の色。Gridの列を数えて当てる（classはラッパーにも本体にも付きうる） */
:is(.crescent-products-brands > .uk-grid, .crescent-products-brands.uk-grid) > :nth-child(2) .el-item { border-bottom-color: #00606e !important; } /* DMM TV・Disney+ */
:is(.crescent-products-brands > .uk-grid, .crescent-products-brands.uk-grid) > :nth-child(3) .el-item { border-bottom-color: #3b990c !important; } /* グルーポン */
:is(.crescent-products-brands > .uk-grid, .crescent-products-brands.uk-grid) > :nth-child(4) .el-item { border-bottom-color: #20a464 !important; } /* サポセレ */
:is(.crescent-products-brands > .uk-grid, .crescent-products-brands.uk-grid) > :nth-child(5) .el-item { border-bottom-color: #f1b401 !important; } /* まねきでんき */
:is(.crescent-products-brands > .uk-grid, .crescent-products-brands.uk-grid) > :nth-child(6) .el-item { border-bottom-color: #fc2900 !important; } /* ディルミー */
:is(.crescent-products-brands > .uk-grid, .crescent-products-brands.uk-grid) > :nth-child(7) .el-item { border-bottom-color: #262626 !important; } /* NURO 光 */

/* 商標の注記 --------------------------------------------------------------
   他社のロゴを8点並べるページなので必ず出す。資料にも同じ文言がある。   */
/*  共通のリード指定が (0,7,0) あるので、class1つでは勝てない。
    同じ形に合わせて (0,8,0) にしている。                              */
.crescent-products-list .crescent-products-note.uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label):not(.note):not(.crescent-company-table) {
	margin-top: 20px !important;
	font-size: 12px !important;
	line-height: 1.8 !important;
	color: #888888 !important;
	text-align: right !important;
	max-width: none !important;
}

/* サービス領域 ------------------------------------------------------------ */
.crescent-products-areas.crescent-products-areas {
	margin-top: 32px !important;
}

.crescent-products-areas .el-item {
	padding: 26px 20px !important;
	background-color: #fafafa !important;
	text-align: center !important;
}

/*  4つの領域にアイコンを置く。
    資料はアイコン＋ラベルの形だが、アイコンそのものは支給がないので作った。
    線だけの図形にして、色でBUSINESSページの4領域と揃えている
    （#e5004f / #f05a32 / #0a9d55 / #6e11ae）。

    画像ではなく **mask-image** で描いている。
    そうすると形はSVG1つ、色は background-color で変えられるので、
    4色ぶんのSVGを持たずに済む。
    SVGの線の色（黒）は使われない。maskは不透明度しか見ないため。

    順番に依存するので、ビルダーで並べ替えたら色とアイコンがずれる。
    領域を増減するときはこの4つのルールも直すこと。                       */
.crescent-products-areas .el-item::before {
	content: "" !important;
	display: block !important;
	width: 44px !important;
	height: 44px !important;
	margin: 0 auto 14px !important;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

/* エンタメ・通信 */
:is(.crescent-products-areas > .uk-grid, .crescent-products-areas.uk-grid) > :nth-child(1) .el-item::before {
	background-color: #e5004f !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='15' width='38' height='28' rx='5'/%3E%3Cpath d='M20 23.5 L32 29 L20 34.5 Z' fill='%23000' stroke='none'/%3E%3Cpath d='M49 21 A12 12 0 0 1 49 37'/%3E%3Cpath d='M53 15 A20 20 0 0 1 53 43'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='15' width='38' height='28' rx='5'/%3E%3Cpath d='M20 23.5 L32 29 L20 34.5 Z' fill='%23000' stroke='none'/%3E%3Cpath d='M49 21 A12 12 0 0 1 49 37'/%3E%3Cpath d='M53 15 A20 20 0 0 1 53 43'/%3E%3C/svg%3E");
}

/* ライフスタイル */
:is(.crescent-products-areas > .uk-grid, .crescent-products-areas.uk-grid) > :nth-child(2) .el-item::before {
	background-color: #f05a32 !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20 h40 l2 32 H10 Z'/%3E%3Cpath d='M24 20 v-4 a8 8 0 0 1 16 0 v4'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20 h40 l2 32 H10 Z'/%3E%3Cpath d='M24 20 v-4 a8 8 0 0 1 16 0 v4'/%3E%3C/svg%3E");
}

/* エネルギー */
:is(.crescent-products-areas > .uk-grid, .crescent-products-areas.uk-grid) > :nth-child(3) .el-item::before {
	background-color: #0a9d55 !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M36 6 L16 36 h13 l-3 22 L48 28 H35 Z'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M36 6 L16 36 h13 l-3 22 L48 28 H35 Z'/%3E%3C/svg%3E");
}

/* スマートホーム */
:is(.crescent-products-areas > .uk-grid, .crescent-products-areas.uk-grid) > :nth-child(4) .el-item::before {
	background-color: #6e11ae !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 29 L32 10 L55 29'/%3E%3Cpath d='M16 26 V52 a2 2 0 0 0 2 2 h28 a2 2 0 0 0 2 -2 V26'/%3E%3Cpath d='M24 41 A12 12 0 0 1 40 41'/%3E%3Cpath d='M28.5 46.5 A6 6 0 0 1 35.5 46.5'/%3E%3Ccircle cx='32' cy='51.5' r='1.9' fill='%23000' stroke='none'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 29 L32 10 L55 29'/%3E%3Cpath d='M16 26 V52 a2 2 0 0 0 2 2 h28 a2 2 0 0 0 2 -2 V26'/%3E%3Cpath d='M24 41 A12 12 0 0 1 40 41'/%3E%3Cpath d='M28.5 46.5 A6 6 0 0 1 35.5 46.5'/%3E%3Ccircle cx='32' cy='51.5' r='1.9' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

.crescent-products-areas .el-title {
	margin: 0 0 8px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.04em !important;
	color: #111111 !important;
}

/*  どのブランドがその領域に属するかを並べる。
    資料はアイコンとラベルだけだが、8ブランドを見せた直後なので
    対応が分からないと「NURO光はどこ？」になる。                        */
.crescent-products-areas .el-content {
	margin: 0 !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.8 !important;
	color: #777777 !important;
}

/* スマートフォン（〜639px） ----------------------------------------------- */
@media (max-width: 639px) {
	.crescent-products-brands .el-item {
		padding: 22px 16px 20px !important;
	}

	.crescent-products-brands .el-image {
		max-width: 150px !important;
		height: 44px !important;
		margin-bottom: 14px !important;
	}

	.crescent-products-list .crescent-products-note.uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label):not(.note):not(.crescent-company-table) {
		text-align: left !important;
	}
}

/* --------------------------------------------------------------------------
   セールスプロモーション事業ページ ─ ヒーロー
   --------------------------------------------------------------------------
   2026-10-06 ヒーローが「背景画像」から「画像を置く形」に組み直されたため、
   スマホ用の背景（sales-hero-mobile.jpg）と縦横比・余白の指定を削除した。
   画像の大きさはビルダーで制御する。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   COMPANYページ ─ ヒーロー
   --------------------------------------------------------------------------
   背景は3拠点の日本地図（資料09のファーストビューと同じ構成）。
   絵柄を大きく見せるために高さが要るので、会社概要をヒーローに入れている。

   ヒーローの会社概要は**List要素**で、02セクションの表とは別物。
   同じ class（crescent-company-table）が付いているため、
   ヒーロー内に限定して指定する。

     li.el-item
       .el-title  項目名
       .el-meta   値
   ========================================================================== */

/*  会社概要は2か所にある。
    ・ヒーロー内（地図の左に置いた表）… PCとタブレットで表示。モバイルは地図に重なって読めないので隠す
    ・02セクション「COMPANY PROFILE」… 全画面で表示（2026-10-02 平山さま指示でPCも表示に変更。
      以前はPCで隠して、ヒーローの表と二重に出ないようにしていた）            */
@media (max-width: 639px) {
	.crescent-company-hero .crescent-company-table {
		display: none !important;
	}
}

.crescent-company-hero .crescent-company-table {
	max-width: 520px !important;
	margin-bottom: 0 !important;
}

.crescent-company-hero .crescent-company-table > li {
	padding: 9px 0 !important;
	margin: 0 !important;
	/*  地図の上に乗るので、罫線は黒の薄いものにする。
	    #eeeeee のような明るい線だと背景に溶けて見えない。            */
	border-top: 1px solid rgba(17, 17, 17, 0.12) !important;
}

.crescent-company-hero .crescent-company-table > li:last-child {
	border-bottom: 1px solid rgba(17, 17, 17, 0.12) !important;
}

/* 項目名。02の表の項目名（15px/700）より一段小さくする */
.crescent-company-hero .crescent-company-table .el-title {
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.7 !important;
	letter-spacing: 0.06em !important;
	color: #111111 !important;
}

.crescent-company-hero .crescent-company-table .el-meta {
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	color: #333333 !important;
	margin: 0 !important;
}

/* スマートフォン ---------------------------------------------------------- */
@media (max-width: 639px) {
	.crescent-company-hero .uk-background-cover,
	.crescent-company-hero .uk-tile {
		background-image: url("/wp-content/uploads/2026/09/company-hero-mobile.jpg") !important;
		background-size: cover !important;
		background-position: center top !important;
		aspect-ratio: 1200 / 2000 !important;
		padding-bottom: 32px !important;
	}

	.crescent-company-hero .crescent-company-table {
		max-width: none !important;
	}

	.crescent-company-hero .crescent-company-table > li {
		padding: 7px 0 !important;
	}

	.crescent-company-hero .crescent-company-table .el-title {
		font-size: 12px !important;
	}

	.crescent-company-hero .crescent-company-table .el-meta {
		font-size: 13px !important;
	}
}

/* --------------------------------------------------------------------------
   ABOUTページ ─ ヒーロー
   --------------------------------------------------------------------------
   2026-09-29 ヒーローを作り直し、背景ではなく画像（Image要素）を置く形になった。
   スマートフォン用の背景（about-hero-mobile.jpg）と、ヒーロー内の画像を
   240pxに抑える指定は削除。画像の大きさ（筆文字を含む）はビルダーで制御する。
   ========================================================================== */

/* --------------------------------------------------------------------------
   長期インターン ─ ヒーローのスマートフォン背景
   --------------------------------------------------------------------------
   2026-10-07 スマホ用の背景画像（intern-hero-mobile.jpg）への差し替えと、
   それに合わせた「幅いっぱい・下揃え＋下余白80%＋24px」の指定を削除した。
   スマホの背景は、ビルダーのclass（crescent-hero-bg-tablet）で非表示にする。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   キャリア・評価制度ページ ─ ヒーロー
   --------------------------------------------------------------------------
   2026-10-06 ヒーローが「背景画像」から「画像を置く形」に組み直されたため、
   スマホ用の背景（employee-hero-mobile.jpg）と余白の指定を削除した。
   画像の大きさはビルダーで制御する。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   ディルミーページ ─ ヒーロー（スマートフォン）
   --------------------------------------------------------------------------
   2026-10-06 ヒーローが「背景画像」から「画像を置く形」に組み直されたため、
   スマホ用の背景（contents-hero-mobile.jpg）・ヒーロー内の画像の大きさ
   （ロゴ 200px／165px）と上下の余白・360px以下の下限の指定を削除した。
   画像の大きさはビルダーで制御する。
   -------------------------------------------------------------------------- */

/* ==========================================================================
   下層 採用情報ページ
   ==========================================================================
   資料10。ヒーロー／エントリー導線／働く魅力／活躍できるフィールド／
   数字で見るCRESCENT／先輩社員紹介／CTA。

   このページはCTAがエントリーのみ。お問い合わせボタンは置かない
   （採用系4ページ共通の方針）。
   ========================================================================== */

/* ヒーローのボタン（社員採用／インターン採用） --------------------------------
   2026-10-02 ヒーローを「左に文章とボタン・右に画像」の形に組み直した。
   これに伴い、以前ここにあったエントリー導線のカード（crescent-recruit-entries／
   crescent-recruit-hero-entries）と、その出し分けの指定は削除した。

   ボタンにclassが付いていないため、ヒーロー内の Buttons の並び順で色を当てる
   （1番目＝社員＝橙→ピンク、2番目＝インターン＝紫→青。トップのエントリー
   ボタンの4色グラデーション #f39800→#e4007f→#920783→#0068b7 を前半・後半に
   切り分けたもの）。大きさ・矢印・形はビルダーのまま。色だけ変える。
   並び順を入れ替えると色も入れ替わる。                                    */
.crescent-recruit-hero .uk-flex-middle.uk-grid-small.uk-grid > :nth-child(1) .uk-button,
.crescent-recruit-hero .uk-flex-middle.uk-grid-small.uk-grid > :nth-child(2) .uk-button {
	color: #ffffff !important;
	border: none !important;
}

.crescent-recruit-hero .uk-flex-middle.uk-grid-small.uk-grid > :nth-child(1) .uk-button {
	background: linear-gradient(90deg, #f39800 0%, #e4007f 100%) !important;
}

.crescent-recruit-hero .uk-flex-middle.uk-grid-small.uk-grid > :nth-child(2) .uk-button {
	background: linear-gradient(90deg, #920783 0%, #0068b7 100%) !important;
}

.crescent-recruit-hero .uk-flex-middle.uk-grid-small.uk-grid > :nth-child(-n+2) .uk-button:is(:hover, :focus) {
	opacity: 0.88 !important;
	color: #ffffff !important;
}

/* 採用ページ：下のエントリー帯のボタン --------------------------------------
   ほかのページの帯（.crescent-page-cta）は今までの大きさだが、採用ページの帯だけは
   平山さまの指示（2026-10-02）で本文のボタンと同じ大きさにしている。
   .crescent-page-cta は全ページ共通なので、ヒーローがあるページに絞っている。
   本文のボタンの大きさは、上の「ボタンの大きさ」（#tm-main .uk-button）に集約した。 */
body:has(.crescent-recruit-hero) .crescent-page-cta .uk-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: auto !important;
	min-height: 38px !important;
	min-width: 0 !important;
	padding: 0 18px !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	letter-spacing: 1px !important;
}

/* 03 CRESCENTで働く魅力（crescent-recruit-merits） ---------------------------
   5つ。アイコンは支給がないので作った。色はサイト共通のグラデーションから。 */
.crescent-recruit-merits.crescent-recruit-merits {
	margin-top: 16px !important;
}

/*  角丸枠がビルダー側で付いた。以前は左右だけの余白（カードの
    輪郭が無い前提）だったので、枠の中に窮屈に収まっていた。
    上下も含めて枠らしい余白にする。                                   */
.crescent-recruit-merits .el-item {
	padding: 32px 20px !important;
	text-align: center !important;
}

.crescent-recruit-merits .el-item::before {
	content: "" !important;
	display: block !important;
	width: 46px !important;
	height: 46px !important;
	margin: 0 auto 14px !important;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

.crescent-recruit-merits .el-title {
	margin: 0 0 8px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.02em !important;
	color: #111111 !important;
}

.crescent-recruit-merits .el-content {
	margin: 0 !important;
	font-size: 12px !important;
	line-height: 1.9 !important;
	color: #666666 !important;
}

/*  圧倒的な成長環境。以前はここに描いたインラインSVGを敷いていたが、
    支給のアイコン（recruit-rocket-icon.svg）に差し替えた（2026-09-23）。
    他の支給アイコン（icon_coupon.svg など）と同じくファイルをURLで
    参照する形に揃えている。塗りの指定は無いSVGなので、
    mask で不透明度だけ見て background-color で色を付ける。          */
:is(.crescent-recruit-merits > .uk-grid, .crescent-recruit-merits.uk-grid) > :nth-child(1) .el-item::before {
	background-color: #e5004f !important;
	-webkit-mask-image: url("/wp-content/uploads/2026/09/recruit-rocket-icon.svg");
	        mask-image: url("/wp-content/uploads/2026/09/recruit-rocket-icon.svg");
}

/* チームの力 */
:is(.crescent-recruit-merits > .uk-grid, .crescent-recruit-merits.uk-grid) > :nth-child(2) .el-item::before {
	background-color: #f05a32 !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='20' r='8'/%3E%3Cpath d='M18 48c0-8 6-13 14-13s14 5 14 13'/%3E%3Ccircle cx='12' cy='26' r='6'/%3E%3Cpath d='M4 46c0-6 4-9 8-9'/%3E%3Ccircle cx='52' cy='26' r='6'/%3E%3Cpath d='M60 46c0-6-4-9-8-9'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='20' r='8'/%3E%3Cpath d='M18 48c0-8 6-13 14-13s14 5 14 13'/%3E%3Ccircle cx='12' cy='26' r='6'/%3E%3Cpath d='M4 46c0-6 4-9 8-9'/%3E%3Ccircle cx='52' cy='26' r='6'/%3E%3Cpath d='M60 46c0-6-4-9-8-9'/%3E%3C/svg%3E");
}

/* 多様なキャリア */
:is(.crescent-recruit-merits > .uk-grid, .crescent-recruit-merits.uk-grid) > :nth-child(3) .el-item::before {
	background-color: #f39800 !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 52h48'/%3E%3Cpath d='M16 44V32'/%3E%3Cpath d='M28 44V24'/%3E%3Cpath d='M40 44V34'/%3E%3Cpath d='M52 44V16'/%3E%3Cpath d='M14 24 L28 12 L38 20 L54 6'/%3E%3Cpath d='M44 6h10v10'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 52h48'/%3E%3Cpath d='M16 44V32'/%3E%3Cpath d='M28 44V24'/%3E%3Cpath d='M40 44V34'/%3E%3Cpath d='M52 44V16'/%3E%3Cpath d='M14 24 L28 12 L38 20 L54 6'/%3E%3Cpath d='M44 6h10v10'/%3E%3C/svg%3E");
}

/* 全国へ広がるフィールド */
:is(.crescent-recruit-merits > .uk-grid, .crescent-recruit-merits.uk-grid) > :nth-child(4) .el-item::before {
	background-color: #0a9d55 !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='23'/%3E%3Cpath d='M9 32h46'/%3E%3Cpath d='M32 9c7 7 10 15 10 23s-3 16-10 23c-7-7-10-15-10-23S25 16 32 9Z'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='23'/%3E%3Cpath d='M9 32h46'/%3E%3Cpath d='M32 9c7 7 10 15 10 23s-3 16-10 23c-7-7-10-15-10-23S25 16 32 9Z'/%3E%3C/svg%3E");
}

/* 自分たちで創る */
:is(.crescent-recruit-merits > .uk-grid, .crescent-recruit-merits.uk-grid) > :nth-child(5) .el-item::before {
	background-color: #6e11ae !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 8a16 16 0 0 0-9 29v6h18v-6a16 16 0 0 0-9-29Z'/%3E%3Cpath d='M26 49h12'/%3E%3Cpath d='M28 55h8'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 8a16 16 0 0 0-9 29v6h18v-6a16 16 0 0 0-9-29Z'/%3E%3Cpath d='M26 49h12'/%3E%3Cpath d='M28 55h8'/%3E%3C/svg%3E");
}

/* 04 活躍できるフィールド（crescent-recruit-fields） -------------------------
   2つの事業。事業紹介ページの「事業の全体像」と同じ枠の作りにして、
   サイト内で2事業の見せ方を揃えている。                                 */
.crescent-recruit-fields.crescent-recruit-fields {
	margin-top: 40px !important;
}

.crescent-recruit-fields .el-item {
	padding: 26px 24px !important;
	background-color: #ffffff !important;
	border: 2px solid #e5004f !important;
	border-radius: 6px !important;
	text-align: center !important;
}

:is(.crescent-recruit-fields > .uk-grid, .crescent-recruit-fields.uk-grid) > :nth-child(2) .el-item {
	border-color: #0068b7 !important;
}

.crescent-recruit-fields .el-title {
	margin: 0 0 8px !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.02em !important;
	color: #e5004f !important;
}

:is(.crescent-recruit-fields > .uk-grid, .crescent-recruit-fields.uk-grid) > :nth-child(2) .el-title {
	color: #0068b7 !important;
}

.crescent-recruit-fields .el-content {
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.9 !important;
	color: #555555 !important;
}

/*  ロゴ群（crescent-recruit-brands）。
    取扱商材ページと同じ素材だが、あちらは商材そのものの紹介なので
    説明文を出している。ここは「こういうサービスに関われる」を
    ひと目で見せるのが役目なのでロゴだけにする。

    色の下線も外した。すぐ上の2枠が赤と青で色を持っているので、
    その下に8色が並ぶと競る。                                         */
.crescent-recruit-brands.crescent-recruit-brands {
	margin-top: 28px !important;
}

.crescent-recruit-brands .el-item {
	padding: 20px 16px !important;
	background-color: #ffffff !important;
	border: 1px solid #eeeeee !important;
	text-align: center !important;
}

.crescent-recruit-brands .el-image {
	display: block !important;
	width: 100% !important;
	max-width: 160px !important;
	height: 44px !important;
	margin: 0 auto !important;
	object-fit: contain !important;
}

/*  ロゴに名前が入っているので、文字は出さない。
    読み上げは画像のaltが受け持つ。                                   */
.crescent-recruit-brands .el-title,
.crescent-recruit-brands .el-content {
	display: none !important;
}

@media (max-width: 639px) {
	.crescent-recruit-brands .el-item {
		padding: 16px 12px !important;
	}

	.crescent-recruit-brands .el-image {
		max-width: 130px !important;
		height: 36px !important;
	}
}

/* 04 活躍できるフィールド（2カラム） ----------------------------------------
   PCは左にセールスプロモーション、右にコンテンツ事業。モバイルは上下。
   カラムに `crescent-rec-twofields-sp` / `-contents`、
   中身はカード（uk-card）で包まれている。

   **横に並ぶのは1200px以上。** このテーマの `@m` は960pxではなく1200px
   （UIkitの既定と違う）。`uk-width-1-2@m` もそこで効く。
   960pxで書いていて、960〜1199pxで縦積みなのに横並び用の指定が
   当たっていた（2026-09-23）。

   **各事業の見出しは素の h3 で、下層セクション共通の指定に拾われて
   32px・900 になる。** 共通指定は `:not(.el-title)` で除外しているが、
   これは素の h3 なので当たる。共通指定の特定度は (0,4,1) なので、
   `.uk-container` を挟んで (0,5,1) にして上書きする。
   ------------------------------------------------------------------------- */

/*  枠の太さ・色を上の見本（crescent-recruit-fields）に合わせる。
    実体はUIkitの .uk-card-default（1px #e5e5e7、角丸なし）なので、
    見本と同じ 2px・角丸6pxを上書きする。色は見本と同じ
    セールスプロモーション＝ピンク、コンテンツ＝青（2026-09-23）。   */
.crescent-rec-twofields-sp .uk-card {
	border: 2px solid #e5004f !important;
	border-radius: 6px !important;
}

.crescent-rec-twofields-contents .uk-card {
	border: 2px solid #0068b7 !important;
	border-radius: 6px !important;
}

/*  文字の大きさは見本（crescent-recruit-fields .el-title / .el-content）
    と同じにする。見出し17px、リード13px・500ウェイト（2026-09-23）。   */
.crescent-recruit-field .uk-container .crescent-rec-twofields-sp h3:not(.el-title),
.crescent-recruit-field .uk-container .crescent-rec-twofields-contents h3:not(.el-title) {
	margin: 0 !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.04em !important;
}

/*  リード文。共通の下層セクション指定（:is(p, .uk-panel:not(...)) ）が
    特定度 (0,7,0) で 15px/400 を当てているため、それを超える形で
    書く必要がある。.uk-card を挟んで (0,10,0)〜 にして上書きする。     */
.crescent-recruit-field .uk-container .crescent-rec-twofields-sp .uk-card p,
.crescent-recruit-field .uk-container .crescent-rec-twofields-sp .uk-card .uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label):not(.note):not(.crescent-company-table),
.crescent-recruit-field .uk-container .crescent-rec-twofields-contents .uk-card p,
.crescent-recruit-field .uk-container .crescent-rec-twofields-contents .uk-card .uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label):not(.note):not(.crescent-company-table) {
	font-size: 13px !important;
	font-weight: 500 !important;
}

/*  色は事業紹介ページの「事業の全体像」と同じ、
    セールスプロモーション＝ピンク、コンテンツ＝青。                    */
.crescent-recruit-field .uk-container .crescent-rec-twofields-sp h3:not(.el-title) {
	color: #e5004f !important;
}

.crescent-recruit-field .uk-container .crescent-rec-twofields-contents h3:not(.el-title) {
	color: #0068b7 !important;
}

/*  左右で中身の高さが違うので、そのままだとボタンの位置が揃わない。
    カードを縦のflexにして、最後の要素＝ボタンを下端に寄せる。
    カラムに Match height が付いているのでカードは同じ高さになる。     */
@media (min-width: 1200px) {
	.crescent-rec-twofields-sp > .uk-card,
	.crescent-rec-twofields-contents > .uk-card {
		display: flex !important;
		flex-direction: column !important;
		flex: 1 1 auto !important;
	}

	.crescent-rec-twofields-sp > .uk-card > :last-child,
	.crescent-rec-twofields-contents > .uk-card > :last-child {
		margin-top: auto !important;
	}
}

/*  カードの中の間隔。
    **flexにするとマージンの相殺が起きない。** 見出し下10＋リード上20、
    リード下20＋ロゴ上32 のように上下のマージンが足し算になり、
    1200px以上だけ要素の間が30〜52px空いて間延びしていた（2026-09-24 実測）。
    子要素のマージンを一度0にして、間隔は「次の要素の上」だけで作る。
    見出し→リード 8px、それ以降 24px、ボタンの上は最低 32px。          */
.crescent-recruit-field :is(.crescent-rec-twofields-sp, .crescent-rec-twofields-contents) > .uk-card > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.crescent-recruit-field :is(.crescent-rec-twofields-sp, .crescent-rec-twofields-contents) > .uk-card > * + * {
	margin-top: 24px !important;
}

.crescent-recruit-field :is(.crescent-rec-twofields-sp, .crescent-rec-twofields-contents) > .uk-card > h3 + * {
	margin-top: 8px !important;
}

.crescent-recruit-field :is(.crescent-rec-twofields-sp, .crescent-rec-twofields-contents) > .uk-card > :last-child {
	margin-top: 32px !important;
}

@media (min-width: 1200px) {
	.crescent-recruit-field :is(.crescent-rec-twofields-sp, .crescent-rec-twofields-contents) > .uk-card {
		padding: 32px !important;
	}

	/* ボタンは下端に寄せる。最低32pxは直前の要素の下マージンで確保する */
	.crescent-recruit-field :is(.crescent-rec-twofields-sp, .crescent-rec-twofields-contents) > .uk-card > :nth-last-child(2) {
		margin-bottom: 32px !important;
	}

	.crescent-recruit-field :is(.crescent-rec-twofields-sp, .crescent-rec-twofields-contents) > .uk-card > :last-child {
		margin-top: auto !important;
	}
}

/* 採用ページ全体の縦の余白 ---------------------------------------------------
   「全体にスペースが多くて間延びして見える」との指摘で詰めた（2026-09-24）。
   参考資料（img/10.png）は見出しの上下もセクションの間も詰まった
   にぎやかな作りなので、その密度に寄せている。
   下層共通の値（セクション上72px、ラベル→見出し40px、行の間40px）は
   他ページに影響するので触らず、採用ページのセクションだけ上書きする。

     セクションの上      72 → 40px（スマートフォン 48 → 32px）
                         ※2026-10-06 に余白の固定をやめた。ビルダーで決める。
     ラベル → 見出し     40 → 12px（ラベルの下24pxを0にしている）
     見出しの行の高さ    1.6 → 1.4
     見出し → 中身       56 → 28px（見出しの下12＋行の間16）
                         DATAは見出しと同じ行にカードがあるので 20 → 16px
     ラベル → 魅力の5枠  40 → 16px（crescent-recruit-merits 側で指定）

   見出しの指定は下層共通（特定度 (0,4,1)）を超えるため
   `.uk-container` と :not() を重ねて (0,5,1) にしている。h2 だけに当てる。
   h3 まで含めると「活躍できるフィールド」のカード内の事業名に当たる。 */
:is(.crescent-recruit-about, .crescent-recruit-field, .crescent-recruit-data, .crescent-recruit-people) .crescent-section-label {
	margin-bottom: 0 !important;
}

:is(.crescent-recruit-about, .crescent-recruit-field, .crescent-recruit-data, .crescent-recruit-people) .crescent-section-label + :is(h1, h2, h3) {
	margin-top: 12px !important;
}

:is(.crescent-recruit-about, .crescent-recruit-field, .crescent-recruit-data, .crescent-recruit-people) .uk-container h2:not(.el-title):not(.crescent-section-label):not(.note) {
	margin-bottom: 12px !important;
	line-height: 1.4 !important;
}

.crescent-recruit-data .uk-container h2 + .uk-margin.uk-margin {
	margin-top: 16px !important;
}

:is(.crescent-recruit-field, .crescent-recruit-data, .crescent-recruit-people) .uk-grid.tm-grid-expand + .uk-grid.tm-grid-expand {
	margin-top: 16px !important;
}

/*  ブランドの下線色。取扱商材ページのclassを流用しているが、
    あちらは8点を1つのGridに並べ、色を並び順（nth-child）で決めている。
    こちらは左6点・右2点に分かれるので**割り当てがずれる**。

    実測のずれ（2026-09-23）:
      左6番目 NURO 光  … ディルミーの #fc2900 が出る
      右1番目 ディルミー … U-NEXTの #111111 が出る
      右2番目 MANOMA   … DMM TVの #00606e が出る

    ずれる3つだけ上書きする。
    **並べ替えたらまた狂う。** ロゴの順を変えるときはここも直すこと。   */
.crescent-rec-twofields-sp .crescent-products-brands .uk-grid > :nth-child(6) .el-item {
	border-bottom-color: #262626 !important;
}

.crescent-rec-twofields-contents .crescent-products-brands .uk-grid > :nth-child(1) .el-item {
	border-bottom-color: #fc2900 !important;
}

.crescent-rec-twofields-contents .crescent-products-brands .uk-grid > :nth-child(2) .el-item {
	border-bottom-color: #111111 !important;
}

/*  コンテンツ事業側のカテゴリー。ディルミーページのclassを流用していて、
    アイコンは並び順（nth-child）で決まる。あちらは8項目、こちらは
    ビューティー・フィットネス・ライフサポートを抜いた5項目なので、
    3番目以降が**ずれる**（実測：レジャーにビューティー、ショッピングに
    レジャー、置き配保険にショッピングのアイコンが出ていた。2026-09-23）。

    ずれる3つだけ上書きする。並べ替えや増減をしたらまた狂うので、
    そのときはここも直すこと。                                         */
.crescent-rec-twofields-contents .crescent-content-categories .uk-grid > :nth-child(3) .el-item::after {
	-webkit-mask-image: url("/wp-content/uploads/2026/09/icon_leisure.svg") !important;
	        mask-image: url("/wp-content/uploads/2026/09/icon_leisure.svg") !important;
}

.crescent-rec-twofields-contents .crescent-content-categories .uk-grid > :nth-child(4) .el-item::after {
	-webkit-mask-image: url("/wp-content/uploads/2026/09/icon_shopping.svg") !important;
	        mask-image: url("/wp-content/uploads/2026/09/icon_shopping.svg") !important;
}

.crescent-rec-twofields-contents .crescent-content-categories .uk-grid > :nth-child(5) .el-item::after {
	-webkit-mask-image: url("/wp-content/uploads/2026/09/icon_insurance.svg") !important;
	        mask-image: url("/wp-content/uploads/2026/09/icon_insurance.svg") !important;
}

@media (max-width: 639px) {
	.crescent-recruit-field .uk-container .crescent-rec-twofields-sp h3:not(.el-title),
	.crescent-recruit-field .uk-container .crescent-rec-twofields-contents h3:not(.el-title) {
		font-size: 18px !important;
	}
}

/* 数字で見るCRESCENT ― アイコンに色を付ける -------------------------------
   アイコンは統計（従業員数・拠点数・事業領域・資本金）のアイコン画像を、ビルダーの
   Image に割り当てて表示する（2026-10-27）。創業だけは統計に無いので、ビルダーで
   01-established.svg を直接置いている。

   アイコンは黒の線画なので、functions.php が出す SVG フィルター（#cre-tint-1〜5）で
   形はそのまま色だけを塗り替える。以前は mask-image でアイコンのURLをここに直接
   書いていたため、統計のアイコンを差し替えても表示が変わらなかった。

   色は項目の位置（1番目＝創業…5番目＝資本金）で決まる。
   すぐ上の「CRESCENTで働く魅力」5項目と同じ5色を同じ順で使う
   （サイト全体で使っている虹の帯からピックアップした色）。
   **`.crescent-recruit-numbers` のclassは今のグリッドに付いていない。**
   アイコンの指定は、確実に残っているセクションclass（crescent-recruit-data）と、
   この項目だけが持つ `uk-grid-column-small` を頼りに書く。                  */
.crescent-recruit-data .uk-grid-column-small .el-item .el-image {
	display: block !important;
	width: 38px !important;
	height: 38px !important;
	object-fit: contain;
}

.crescent-recruit-data .uk-grid-column-small > :nth-child(1) .el-item .el-image { filter: url(#cre-tint-1) !important; }
.crescent-recruit-data .uk-grid-column-small > :nth-child(2) .el-item .el-image { filter: url(#cre-tint-2) !important; }
.crescent-recruit-data .uk-grid-column-small > :nth-child(3) .el-item .el-image { filter: url(#cre-tint-3) !important; }
.crescent-recruit-data .uk-grid-column-small > :nth-child(4) .el-item .el-image { filter: url(#cre-tint-4) !important; }
.crescent-recruit-data .uk-grid-column-small > :nth-child(5) .el-item .el-image { filter: url(#cre-tint-5) !important; }

/* 05 数字で見るCRESCENT（crescent-recruit-numbers） --------------------------
   項目名をTitle、値をContentに入れてもらっている。
   見出しらしく見せたいのは値のほうなので、大きさを逆にする。           */
.crescent-recruit-numbers.crescent-recruit-numbers {
	margin-top: 40px !important;
}

.crescent-recruit-numbers .el-item {
	padding: 20px 10px !important;
	background-color: #fafafa !important;
	text-align: center !important;
}

.crescent-recruit-numbers .el-title {
	margin: 0 0 8px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.06em !important;
	color: #888888 !important;
}

.crescent-recruit-numbers .el-content {
	margin: 0 !important;
	font-family: "Montserrat", "Noto Sans JP", sans-serif !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.02em !important;
	color: #111111 !important;
}

.crescent-recruit-data-note.crescent-recruit-data-note {
	margin-top: 16px !important;
}

.crescent-recruit-data-note {
	font-size: 11px !important;
	line-height: 1.8 !important;
	color: #999999 !important;
	text-align: right !important;
	max-width: none !important;
}

/* スマートフォン（〜639px） ----------------------------------------------- */
@media (max-width: 639px) {
	.crescent-recruit-merits .el-item {
		padding: 24px 16px !important;
	}

	.crescent-recruit-merits .el-item::before {
		width: 38px !important;
		height: 38px !important;
		margin-bottom: 10px !important;
	}

	.crescent-recruit-merits .el-title {
		font-size: 14px !important;
	}

	.crescent-recruit-fields .el-item {
		padding: 22px 18px !important;
	}

	.crescent-recruit-numbers .el-item {
		padding: 16px 8px !important;
	}

	.crescent-recruit-numbers .el-content {
		font-size: 19px !important;
	}

	.crescent-recruit-data-note {
		text-align: left !important;
	}
}

/* 06 先輩社員紹介（crescent-recruit-voices） --------------------------------
   写真を左、右にタイトル・社歴・本文。これを1段として5人分を縦に並べる。

   資料10は写真5枚を横に並べて特設ページへ送る形だったが、
   サムネイルだけでは特設ページを開く動機にならないので、
   このセクションだけで読み切れる形にした（2026-09-22）。

   1段ずつ区切り線を引いている。写真と文章が横に並ぶと、
   どこまでが一人分か分かりにくくなるため。                             */
.crescent-recruit-voices.crescent-recruit-voices {
	margin-top: 32px !important;
}

.crescent-recruit-voices .el-image {
	display: block !important;
	width: 100% !important;
	max-width: 240px !important;
	aspect-ratio: 4 / 3 !important;
	object-fit: cover !important;
	border-radius: 4px !important;
	/*  仮画像が白に近く、枠が見えないため下地と輪郭を置く。
	    実写真に差し替えたあとも、薄い輪郭として残して問題ない。      */
	background-color: #f5f5f5 !important;
	border: 1px solid #ececec !important;
}

.crescent-recruit-voices .el-title {
	margin: 0 0 8px !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.02em !important;
	color: #111111 !important;
}

/*  社歴。名前ではなく所属と入社年を出す。
    人物写真の横に置くので、肩書きとして読める大きさに抑える。         */
.crescent-recruit-voices .el-meta {
	margin: 0 0 12px !important;
	font-size: 12px !important;
	line-height: 1.6 !important;
	letter-spacing: 0.06em !important;
	color: #888888 !important;
}

.crescent-recruit-voices .el-content {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1.95 !important;
	color: #555555 !important;
	max-width: 760px !important;
}

:is(.crescent-recruit-voices > .uk-grid, .crescent-recruit-voices.uk-grid) > :not(:first-child) .el-item {
	padding-top: 36px !important;
	border-top: 1px solid #eeeeee !important;
}

/* スマートフォン（〜639px） */
@media (max-width: 639px) {
	.crescent-recruit-voices .el-image {
		max-width: 160px !important;
	}

	.crescent-recruit-voices .el-title {
		font-size: 16px !important;
	}

	.crescent-recruit-voices .el-content {
		font-size: 13px !important;
		line-height: 1.9 !important;
	}

	:is(.crescent-recruit-voices > .uk-grid, .crescent-recruit-voices.uk-grid) > :not(:first-child) .el-item {
		padding-top: 28px !important;
	}
}

/* ==========================================================================
   共通パーツ：規約ページ（crescent-legal）
   ==========================================================================
   プライバシーポリシーなど、本文が長く続くページ。
   ビルダーを使わず、固定ページの本文にHTMLを直接書く。
   親テーマの templates/post/content-page.php が
   #tm-main > .uk-container の中にタイトルと本文を出す。

   コンテナは1200pxあるが、この幅で法務の文章を流すと1行が長すぎて読めない。
   本文だけ800pxに絞っている。

   他の規約（特定商取引法に基づく表記など）が増えても同じclassで足りる。
   ========================================================================== */

.crescent-legal {
	max-width: 800px !important;
	margin-top: 8px !important;
}

.crescent-legal-lead {
	margin-bottom: 48px !important;
}

/* 見出し ------------------------------------------------------------------
   条番号が頭に付くので、他ページの見出しより控えめにして本文と馴染ませる。 */
.crescent-legal h2 {
	margin-top: 48px !important;
	margin-bottom: 16px !important;
	padding-bottom: 10px !important;
	border-bottom: 1px solid #e5e5e5 !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.04em !important;
	color: #111111 !important;
}

.crescent-legal h3 {
	margin-top: 28px !important;
	margin-bottom: 10px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	color: #111111 !important;
}

/* 本文 -------------------------------------------------------------------- */
.crescent-legal p,
.crescent-legal li {
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 2 !important;
	color: #555555 !important;
}

.crescent-legal p {
	margin: 0 0 16px !important;
}

.crescent-legal ul {
	margin: 0 0 16px !important;
	padding-left: 1.2em !important;
	list-style: none !important;
}

/*  行頭の記号。list-style だと2行目が記号の下に回り込むので、
    ぶら下げインデントにしている。                                           */
.crescent-legal li {
	position: relative !important;
	margin-bottom: 6px !important;
	padding-left: 1em !important;
}

.crescent-legal li::before {
	content: "・" !important;
	position: absolute !important;
	left: -0.2em !important;
	color: #999999 !important;
}

.crescent-legal a {
	color: #e5004f !important;
	text-decoration: underline !important;
}

/* 表 ----------------------------------------------------------------------
   事業者情報・取得する情報・窓口の3か所で使う。                            */
.crescent-legal-table {
	width: 100% !important;
	margin: 0 0 16px !important;
	border-collapse: collapse !important;
}

.crescent-legal-table th,
.crescent-legal-table td {
	padding: 14px 16px !important;
	border-bottom: 1px solid #eeeeee !important;
	font-size: 15px !important;
	line-height: 1.9 !important;
	text-align: left !important;
	vertical-align: top !important;
}

.crescent-legal-table th {
	width: 210px !important;
	font-weight: 700 !important;
	color: #111111 !important;
	background-color: #fafafa !important;
	white-space: nowrap !important;
}

.crescent-legal-table td {
	font-weight: 400 !important;
	color: #555555 !important;
}

/* 制定日 ------------------------------------------------------------------ */
.crescent-legal-date {
	margin-top: 48px !important;
	text-align: right !important;
	font-size: 14px !important;
	color: #777777 !important;
}

/* スマートフォン（〜639px） ----------------------------------------------- */
@media (max-width: 639px) {
	.crescent-legal h2 {
		margin-top: 36px !important;
		font-size: 18px !important;
	}

	.crescent-legal p,
	.crescent-legal li {
		font-size: 14px !important;
		line-height: 1.9 !important;
	}

	/*  2列のままだと項目名で幅を取られて値が潰れるので、縦に積む。
	    white-space: nowrap も解除しないと横に溢れる。                       */
	.crescent-legal-table th,
	.crescent-legal-table td {
		display: block !important;
		width: auto !important;
		padding: 12px 14px !important;
		font-size: 14px !important;
		white-space: normal !important;
	}

	.crescent-legal-table th {
		border-bottom: 0 !important;
		padding-bottom: 4px !important;
	}
}

/* ==========================================================================
   サイトマップ（crescent-sitemap）
   ==========================================================================
   固定ページ「サイトマップ」の本文に [crescent_sitemap] を置いて出す。
   中身は functions.php が固定ページの構成から組み立てる。

   規約ページと同じく、ビルダーを使わず
   #tm-main > .uk-container の中に出る。こちらはリンクの一覧なので
   幅を絞らず、1200pxの中で2列に流す。
   ========================================================================== */

.crescent-sitemap {
	margin-top: 8px !important;
}

/* TOPへの1行。グループの外に置いて、入口であることを示す */
.crescent-sitemap-home {
	margin: 0 0 40px !important;
	padding-bottom: 24px !important;
	border-bottom: 1px solid #e5e5e5 !important;
}

.crescent-sitemap-home a {
	font-size: 18px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	color: #111111 !important;
	text-decoration: none !important;
}

.crescent-sitemap-ja {
	margin-left: 14px !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	letter-spacing: 0.04em !important;
	color: #777777 !important;
}

/* グループ ----------------------------------------------------------------
   2列に流す。段組みなら、グループの数が増えても指定を変えなくてよい。     */
@media (min-width: 640px) {
	.crescent-sitemap-group {
		break-inside: avoid !important;
	}

	.crescent-sitemap > .crescent-sitemap-group:first-of-type {
		margin-top: 0 !important;
	}
}

.crescent-sitemap-group {
	margin-bottom: 44px !important;
}

.crescent-sitemap-group .crescent-section-label {
	margin-bottom: 16px !important;
}

.crescent-sitemap-group ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.crescent-sitemap-group li {
	margin: 0 !important;
	border-bottom: 1px solid #eeeeee !important;
}

.crescent-sitemap-group li a {
	display: block !important;
	position: relative !important;
	padding: 14px 32px 14px 0 !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.6 !important;
	color: #111111 !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
}

/* 下層のページは字下げして、親子が見て分かるようにする */
.crescent-sitemap-group li.is-child a {
	padding-left: 22px !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: #555555 !important;
}

/* 字下げした行の頭に短い罫線。字下げだけだと親子か迷う */
.crescent-sitemap-group li.is-child a::before {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	top: 50% !important;
	width: 12px !important;
	height: 1px !important;
	background-color: #cccccc !important;
}

/* 行末の矢印 */
.crescent-sitemap-group li a::after {
	content: "" !important;
	position: absolute !important;
	right: 6px !important;
	top: 50% !important;
	width: 7px !important;
	height: 7px !important;
	margin-top: -4px !important;
	border-top: 1px solid #999999 !important;
	border-right: 1px solid #999999 !important;
	transform: rotate(45deg) !important;
	transition: transform 0.2s ease, border-color 0.2s ease !important;
}

.crescent-sitemap-group li a:hover {
	color: #e5004f !important;
}

.crescent-sitemap-group li a:hover::after {
	border-color: #e5004f !important;
	transform: rotate(45deg) translate(3px, -3px) !important;
}

/* 2列（640px以上） -------------------------------------------------------- */
@media (min-width: 640px) {
	.crescent-sitemap-groups,
	.crescent-sitemap {
		column-count: 2 !important;
		column-gap: 64px !important;
	}

	/* TOPの行は段組みの外に出したいので、全幅で回り込ませない */
	.crescent-sitemap-home {
		column-span: all !important;
	}
}

/* スマートフォン（〜639px） ----------------------------------------------- */
@media (max-width: 639px) {
	.crescent-sitemap-home {
		margin-bottom: 32px !important;
	}

	.crescent-sitemap-group {
		margin-bottom: 36px !important;
	}

	.crescent-sitemap-group li a {
		padding: 13px 28px 13px 0 !important;
		font-size: 14px !important;
	}
}

/* ==========================================================================
   下層 ABOUT ページ（crescent-about-concept）
   ==========================================================================
   ヒーローの下に、経営理念・存在意義・目指す未来・行動指針を並べる。
   上段は3枚のカード（PHILOSOPHY／PURPOSE／VISION）、
   下段はVALUESを左テキスト・右絵柄の横長パネルにしている。

   資料は4つを縦に積む構成だが、1項目あたりの文量が少なく縦に間延びしたため、
   2段組に変更した（2026-09-17）。資料どおりの単独セクション用CSSは
   このコミットで削除している。

   各カードはコラムの背景に写真かブラシを敷いている。

   コラムの背景は内側に生成される .uk-tile に付く（コラムのdivではない）。
   写真の上に直接文字を置くと読みづらいので、白のグラデーションを一枚かぶせ、
   左（文字側）を濃く、右（絵柄側）を薄くしている。
   ========================================================================== */

.crescent-about-concept .uk-tile {
	position: relative !important;
	isolation: isolate !important;
	padding: 36px !important;
}

/*  3枚並びのとき（1200px以上）はカードを正方形にする。
    aspect-ratio なら幅に追従するので、画面幅ごとに高さを決め打ちしなくてよい。
    中身は330px程度で460pxの正方形に十分収まる。                             */
@media (min-width: 1200px) {
	.crescent-about-concept [class*="uk-width-1-3"] .uk-tile {
		aspect-ratio: 1 / 1 !important;
	}
}

/*  文字を読ませるための白のかぶせ。
    左を濃く・右を薄くして、絵柄が右から覗く形にする。                       */
.crescent-about-concept .uk-tile::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: -1 !important;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0.95) 0%,
		rgba(255, 255, 255, 0.88) 42%,
		rgba(255, 255, 255, 0.35) 78%,
		rgba(255, 255, 255, 0.1) 100%
	) !important;
}

/*  [一時停止 2026-10-17] 04 VALUES（全幅1枚のパネル）の背景に対するCSS。
    平山さまの指示で、VALUESのタイルに白のかぶせ（上の ::before）を出さない。
    3枚のカード（uk-width-1-3 のコラム内のタイル）には、かぶせを残す。
    戻すとき：この下のルール（.uk-tile:not(...)::before）を丸ごと削除する。
    （下の「VALUESの行」の .crescent-about-values-left の指定は、今のページでは
    タイルがそのclassの外にあるため、もともと当たっていない。）               */
.crescent-about-concept .uk-tile:not([class*="uk-width-1-3"] .uk-tile)::before {
	display: none !important;
}

/* 見出しと本文 ------------------------------------------------------------ */
.crescent-about-concept :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
	font-size: 24px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.04em !important;
	color: #111111 !important;
	margin-bottom: 16px !important;
}

.crescent-about-concept p,
.crescent-about-concept .uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label) {
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.9 !important;
	color: #555555 !important;
	/* カードの幅で折り返すので上限は要らない */
	max-width: none !important;
}

/* ラベルはカードの中なので少し詰める */
.crescent-about-concept .crescent-section-label {
	margin-bottom: 18px !important;
}

/*  3枚並びの行だけ、見出しに2行ぶんの高さを確保する。
    見出しが1行のカードと2行のカードが混ざると、本文の頭がずれて
    行として揃わないため。3行になる見出しが出たら伸びる。                   */
.crescent-about-concept [class*="uk-width-1-3"]
	:is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
	/* 24px × 行間1.6 × 2行 = 3.2em。2.6emだと2行ぶんに足りず、
	   1行の見出しと2行の見出しで本文の頭が15pxずれていた */
	min-height: 3.2em !important;
}

/* 行動指針のリスト --------------------------------------------------------
   カードの中なので、下層ABOUTの3列ではなく2列（番号／項目名・説明）に戻す。 */
.crescent-about-concept .crescent-culture-list .el-item {
	grid-template-columns: 34px 1fr !important;
	padding: 11px 0 !important;
}

.crescent-about-concept .crescent-culture-list .el-title {
	grid-column: 2 !important;
	grid-row: 1 !important;
	font-size: 14px !important;
}

.crescent-about-concept .crescent-culture-list .el-content {
	grid-column: 2 !important;
	grid-row: 2 !important;
	margin: 3px 0 0 !important;
	font-size: 13px !important;
	line-height: 1.7 !important;
}

.crescent-about-concept .crescent-culture-list .el-item::before {
	font-size: 11px !important;
}

/* 1カラムになったとき（〜1199px） -----------------------------------------
   このテーマの @m は1200px。それ未満でカードは縦に積まれる。
   横長になるので、絵柄を右端に寄せて左から白をかけ、
   文字は左半分で読ませる。                                                 */
@media (max-width: 1199px) {
	.crescent-about-concept .uk-tile {
		min-height: 260px !important;
		padding: 28px !important;
		background-position: right center !important;
	}

	/*  3枚のカードは、横長になると cover で縦が大きく切り取られ、
	    人物や矢印が枠の外に出てしまう。
	    幅1045pxのときcoverは画像を高さ900〜1050px相当まで拡大するので、
	    260pxでは元画像の1/4程度しか見えていなかった。
	    450px確保すると46%が見えるようになり、
	    いちばん縦に長い主役（1枚目の人物・元画像の44〜88%）が収まる。     */
	.crescent-about-concept [class*="uk-width-1-3"] .uk-tile {
		min-height: 450px !important;
	}

	/*  見せどころ（主役の縦位置）は絵柄ごとに違うので個別に指定する。
	    ※ このグリッドの子はカード3枚だけ。nth-child で足りる。            */

	/* 経営理念：スーツの人物は元画像の上から44〜88%の位置 */
	.crescent-about-concept [class*="uk-width-1-3"]:nth-child(1) .uk-tile {
		background-position: right 79% !important;
	}

	/* 存在意義：3人は元画像の下端まで写っているので下寄せ */
	.crescent-about-concept [class*="uk-width-1-3"]:nth-child(2) .uk-tile {
		background-position: right bottom !important;
	}

	/* 目指す未来：矢印は元画像の上から60〜94%の位置 */
	.crescent-about-concept [class*="uk-width-1-3"]:nth-child(3) .uk-tile {
		background-position: right 94% !important;
	}

	/*  絵柄が見えるようになっても、白が濃いままだと写真が沈む。
	    文字が乗る左6割は白を残し、右は素の絵柄まで抜く。
	    基本の指定（0,2,1）より特定度を上げてある。                        */
	.crescent-about-concept [class*="uk-width-1-3"] .uk-tile::before {
		background: linear-gradient(
			100deg,
			rgba(255, 255, 255, 0.96) 0%,
			rgba(255, 255, 255, 0.93) 44%,
			rgba(255, 255, 255, 0.55) 62%,
			rgba(255, 255, 255, 0.1) 80%,
			rgba(255, 255, 255, 0) 92%
		) !important;
	}

	/*  横長になるとテキストが幅いっぱいに伸びて、右端が絵柄に重なる。
	    白が残っている範囲に収める。3枚のカードだけが対象で、
	    VALUESの行（左は絵柄なし）は幅いっぱいのままにする。

	    ※ 上で本文に max-width: none を当てており、そちらは
	      :not() が3つで特定度 (0,5,0)。同じか上の特定度で書かないと勝てない。 */
	.crescent-about-concept [class*="uk-width-1-3"] .uk-tile > *,
	.crescent-about-concept [class*="uk-width-1-3"]
		.uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label) {
		max-width: 56% !important;
	}

	.crescent-about-concept :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
		font-size: 21px !important;
	}
}

/* スマートフォン（〜639px） -----------------------------------------------
   1カラムに積まれるので、背景は上から下へ薄くする。                        */
@media (max-width: 639px) {
	.crescent-about-concept .uk-tile {
		min-height: 220px !important;
		padding: 26px 22px !important;
	}

	/*  スマートフォンでは幅が狭いぶん画像の拡大率も小さく、
	    300pxあれば元画像のほぼ全体が入る。1199px用の450pxは高すぎる。      */
	.crescent-about-concept [class*="uk-width-1-3"] .uk-tile {
		min-height: 300px !important;
	}

	/*  幅が狭いぶん、白を残す範囲を広げないと文字に絵柄がかかる。
	    横方向という考え方は1カラム共通のまま、比率だけ変える。
	    ※ 1199px用のかぶせが (0,3,1) なので、こちらも同じ形で書く。         */
	.crescent-about-concept [class*="uk-width-1-3"] .uk-tile::before,
	.crescent-about-concept .uk-tile::before {
		background: linear-gradient(
			100deg,
			rgba(255, 255, 255, 0.96) 0%,
			rgba(255, 255, 255, 0.92) 58%,
			rgba(255, 255, 255, 0.45) 88%,
			rgba(255, 255, 255, 0.15) 100%
		) !important;
	}

	.crescent-about-concept :is(h1, h2, h3, h4):not(.crescent-section-label):not(.el-title) {
		font-size: 19px !important;
		margin-bottom: 12px !important;
	}

	/* 幅が狭いので、文字に使える範囲を少し広げる */
	.crescent-about-concept [class*="uk-width-1-3"] .uk-tile > *,
	.crescent-about-concept [class*="uk-width-1-3"]
		.uk-panel:not(.el-content):not(.el-item):not(.crescent-section-label) {
		max-width: 76% !important;
	}
}

/* --------------------------------------------------------------------------
   VALUESの行（全幅1枚のパネル）
   --------------------------------------------------------------------------
   上の3枚と違い、横長のパネル1枚で見せる。
   背景のブラシは右へ流れ、テキストは左半分で読ませる（かぶせは共通のもの）。

   当初は左＝テキスト／右＝絵柄の2カラムで組んでいたが、
   2026-09-18に全幅1カラムへ変更した。右カラム用の指定はここで削除している。
   -------------------------------------------------------------------------- */

.crescent-about-values-left .uk-tile,
.crescent-about-values-left {
	padding: 36px !important;
}

/*  絵柄の右上をコラムの右上に合わせる。
    cover で横幅は枠と一致するので、効くのは縦方向。
    素材は絵柄が上半分にあるため、上端基準にすると枠いっぱいに使える。      */
.crescent-about-values-left .uk-tile {
	background-position: right top !important;
}

/*  このパネルは横長で、テキストは左44%程度にしか乗らない。
    3枚のカードと同じ濃さだと絵柄が白く飛ぶので、
    文字のある範囲だけ白を残して、その先は早く抜く。                        */
.crescent-about-values-left .uk-tile::before {
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0.94) 0%,
		rgba(255, 255, 255, 0.86) 44%,
		rgba(255, 255, 255, 0.2) 66%,
		rgba(255, 255, 255, 0) 84%
	) !important;
}


/* 行動指針のリストは横長パネルなので、3列に戻して資料の並びにする */
.crescent-about-values-left .crescent-culture-list .el-item {
	grid-template-columns: 34px 1fr !important;
}

/* タブレット（〜1199px） -------------------------------------------------- */
@media (max-width: 1199px) {
	.crescent-about-values-left .uk-tile,
	.crescent-about-values-left {
		padding: 28px !important;
	}
}

/* スマートフォン（〜639px） -----------------------------------------------
   縦に積まれるので、右の絵柄は高さを持たせて帯として見せる。               */
@media (max-width: 639px) {
	.crescent-about-values-left .uk-tile,
	.crescent-about-values-left {
		padding: 26px 22px !important;
	}
}

/* ==========================================================================
   制作メモ（.note）── 納品前に消す
   ==========================================================================
   平山さまが制作中の覚え書きとして置いている要素。
   「ここにキービジュアルを配置」のような、完成したら消すメモ。

   **わざと目立つ見た目にしている。** 本文と見分けがつく色でないと、
   セクションを本番ページへ移すときに一緒に付いていっても気づけない。

   特定度について：
   セクション見出しの指定が :is(...) :is(h1〜h4):not():not() で (0,3,1) ある。
   .note だけ (0,1,0) では !important を付けても負けて、
   メモが見出しの大きさで表示されてしまう。同じ形に合わせて (0,4,1) にしてある。
   ========================================================================== */

.note,
[class*="crescent-"] :is(h1, h2, h3, h4, p, div).note:not(.el-title):not(.crescent-section-label) {
	display: block !important;
	position: relative !important;
	margin: 14px 0 !important;
	padding: 10px 14px 10px 86px !important;
	background-color: #fffbe6 !important;
	border: 1px dashed #dcb400 !important;
	border-radius: 2px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.7 !important;
	letter-spacing: 0 !important;
	color: #7a5c00 !important;
	max-width: none !important;
}

/*  uk-heading-line などが併記されると ::after で罫線が出る。
    メモにその装飾は要らないので消す。                                  */
.note::after {
	content: none !important;
}

.note::before {
	content: "制作メモ" !important;
	position: absolute !important;
	left: 14px !important;
	top: 11px !important;
	padding: 2px 8px !important;
	background-color: #dcb400 !important;
	border-radius: 2px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	letter-spacing: 0.04em !important;
	color: #ffffff !important;
}

/* ==========================================================================
   長期インターンページ（/recruit/intern/）
   ==========================================================================
   ヒーローは採用情報と同じ組み立て（英字→日本語ページ名→…→リード）。
   採用情報で筆文字画像が入る段に、ここは文字のキャッチ
   「学生時代に、“圧倒的な成長”を手に入れる。」が入る（2026-09-24）。
   縦の量を採用情報の筆文字（PCで高さ194px）と揃えるため、
   キャッチは大きめにしている。
   ========================================================================== */

.crescent-intern-hero .crescent-intern-hero-catch {
	width: auto !important;
	max-width: 640px !important;
	font-size: 56px !important;
	font-weight: 900 !important;
	line-height: 1.35 !important;
	letter-spacing: 0.04em !important;
	color: #111111 !important;
}

/*  「“圧倒的な成長”」を虹色にする。ビルダーで <span class="accent"> で囲む。
    .accent はサイト共通の2色（オレンジ→ピンク）だが、資料のこの箇所は
    赤→橙→緑→青→紫の虹なので、ここだけ5色にする。色は採用ページの
    「CRESCENTで働く魅力」と同じ虹の帯からの5色。                      */
.crescent-intern-hero .crescent-intern-hero-catch .accent {
	background: linear-gradient(90deg, #e5004f 0%, #f39800 30%, #0a9d55 55%, #0068b7 78%, #6e11ae 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
}

@media (max-width: 1199px) {
	.crescent-intern-hero .crescent-intern-hero-catch {
		font-size: 40px !important;
	}
}

@media (max-width: 639px) {
	.crescent-intern-hero .crescent-intern-hero-catch {
		font-size: 30px !important;
		letter-spacing: 0.02em !important;
	}
}

/*  タブレット（640〜1000px）のスマホ用背景への差し替え（intern-hero-mobile.jpg、
    幅いっぱい・下揃え・下余白80%＋24px）は、2026-10-07 に削除した。
    タブレットはPC用の背景画像のまま出る（ヒーローの高さに対して画面幅が狭いほど、
    cover で左から切り詰められて人物と筆が左に寄る。見え方はビルダーのclassと
    画像・高さの設定で決める）。                                              */

/*  ヒーロー右下の筆文字「本気の環境で、圧倒的に変わる。」は、
    テキスト（Potta One）→ 透過PNGの重ね → **背景画像への焼き込み**
    （intern-hero-pc-text-04.jpg、背景位置は右寄せ）と変遷して、
    最後の形に落ち着いた（2026-09-24）。重ね用の指定は削除済み。       */

/* --------------------------------------------------------------------------
   長期インターン ─ 01 WHAT YOU WILL GET（10枚のカード）
   --------------------------------------------------------------------------
   配色は資料11（11_INTERN.png）の WHAT YOU WILL GET どおり（2026-09-26）。
     ・名前の文字とアイコン … 項目ごとの色（下の10色）
     ・枠線 … 同じ色をごく薄くした色（資料のパステル調の枠）、1px・角丸8px

   **色は並び順（nth-child）で決めている。** アイコンは差し替える可能性が
   あるとのことなので、ファイル名に頼らない。資料の並び順（思考力 → …
   → ビジネス基礎力）を変えたら、ここも直すこと。

   アイコンは Inline SVG でページに埋め込み、線の色と太さをCSSで決める
   （下の「アイコン」の項）。SVG自体の色・太さに関係なく上の色になる。
   -------------------------------------------------------------------------- */

.crescent-intern-get .uk-grid:has(> * > .el-item.uk-card) > * > .el-item {
	--get-color: #333333;
	border: 1px solid color-mix(in srgb, var(--get-color) 28%, #ffffff) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	background: #ffffff !important;
}

.crescent-intern-get .uk-grid:has(> * > .el-item.uk-card) > :nth-child(1)  > .el-item { --get-color: #e6005b; }
.crescent-intern-get .uk-grid:has(> * > .el-item.uk-card) > :nth-child(2)  > .el-item { --get-color: #f05a16; }
.crescent-intern-get .uk-grid:has(> * > .el-item.uk-card) > :nth-child(3)  > .el-item { --get-color: #13843e; }
.crescent-intern-get .uk-grid:has(> * > .el-item.uk-card) > :nth-child(4)  > .el-item { --get-color: #f39800; }
.crescent-intern-get .uk-grid:has(> * > .el-item.uk-card) > :nth-child(5)  > .el-item { --get-color: #64159e; }
.crescent-intern-get .uk-grid:has(> * > .el-item.uk-card) > :nth-child(6)  > .el-item { --get-color: #64159e; }
.crescent-intern-get .uk-grid:has(> * > .el-item.uk-card) > :nth-child(7)  > .el-item { --get-color: #174fa8; }
.crescent-intern-get .uk-grid:has(> * > .el-item.uk-card) > :nth-child(8)  > .el-item { --get-color: #13878b; }
.crescent-intern-get .uk-grid:has(> * > .el-item.uk-card) > :nth-child(9)  > .el-item { --get-color: #174fa8; }
.crescent-intern-get .uk-grid:has(> * > .el-item.uk-card) > :nth-child(10) > .el-item { --get-color: #64159e; }

.crescent-intern-get .uk-grid:has(> * > .el-item.uk-card) .el-title {
	font-weight: 700 !important;
	color: var(--get-color) !important;
}

/*  アイコン。Grid要素の画像設定で「Inline SVG」をオンにしてあり
    （2026-09-26）、UIkit が <img> を <svg class="el-image uk-svg"> に置き換えて
    ページに埋め込む。埋め込まれた図形の線をCSSで直接塗る。
    **ビルダーでアイコンを差し替えても、色と太さはここで決まる**ので、
    CSSを直す必要はない（以前はファイルごとのURLをCSSに書いていた）。

    線の太さもここで決める。**画面上で3.2px**（vector-effect:
    non-scaling-stroke で、SVGの viewBox の大きさに関係なく同じ太さになる。
    64の枠で作ったものと128の枠で作ったものが混ざっても揃う）。
    80px表示で viewBox 64 の 2.6 に相当。SVGファイル側の太さは関係ない。stroke="none" の図形（塗りだけの形）には線を付けず、
    塗りのある図形は塗りも同じ色にする。                               */
/*  UIkit は埋め込んだSVG（.uk-svg）に fill: currentcolor を当てる。
    SVG側の fill="none" が負けて、線画の内側が文字色（#555）で塗りつぶされた。
    SVG全体は塗りなしに戻す。                                           */
.crescent-intern-get .uk-grid:has(> * > .el-item.uk-card) svg.el-image {
	color: var(--get-color) !important;
	fill: none !important;
}

.crescent-intern-get .uk-grid:has(> * > .el-item.uk-card) svg.el-image :is(g, path, circle, ellipse, rect, line, polyline, polygon):not([stroke="none"]) {
	stroke: var(--get-color) !important;
	stroke-width: 3.2px !important;
	vector-effect: non-scaling-stroke;
}

.crescent-intern-get .uk-grid:has(> * > .el-item.uk-card) svg.el-image :is(path, circle, ellipse, rect, polygon)[fill]:not([fill="none"]) {
	fill: var(--get-color) !important;
}

/*  「評価は点数の合計だけではなく、…総合的に判断します。」の帯（2026-09-28）。
    資料11どおり、グラデーションの帯に白文字。
    WHAT YOU WILL GET セクションの最後の行（1カラムにTextが1つだけ）に
    置かれているので、その形で拾う。classは付いていない。
    色はサイトの虹の帯の青〜紫（トップのエントリーボタンのグラデーションの右半分）。 */
.crescent-intern-get .uk-container > .tm-grid-expand:last-child:not(:first-child) > .uk-width-1-1 > .uk-panel:only-child {
	margin: 0 !important;
	padding: 14px 24px !important;
	border-radius: 6px !important;
	background: linear-gradient(90deg, #0068b7 0%, #6e11ae 55%, #920783 100%) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.7 !important;
	letter-spacing: 0.04em !important;
	text-align: center !important;
	color: #ffffff !important;
}

@media (max-width: 639px) {
	.crescent-intern-get .uk-container > .tm-grid-expand:last-child:not(:first-child) > .uk-width-1-1 > .uk-panel:only-child {
		padding: 12px 16px !important;
		font-size: 14px !important;
		text-align: left !important;
	}
}

/* --------------------------------------------------------------------------
   長期インターン ─ 02 CRESCENT 5 MINDS（WHAT YOU WILL GET の右カラム）
   --------------------------------------------------------------------------
   資料11どおり、色付きの丸枠にアイコン、名前もその色（2026-09-28）。
   アイコンはGrid要素で設定した画像をそのまま出す（mind-01〜05.svg、色付き）。

   色は**並び順**で決める（成長意欲＝青、コミット力＝赤、視点高さ＝オレンジ、
   自責思考＝緑、主体性＝紫。支給SVGの線の色に合わせた）。
   リストは区切り線付きのGrid（uk-grid-divider）で、WHAT YOU WILL GET の
   カードのGridには無いクラスなので、それで見分けている。

   ビルダー側の要素のCSS（#page\#1 .el-image { border: 1px solid #000;
   padding: 15px }）はIDを含んで特定度が高いため、ここは !important で上書き。 */
.crescent-intern-get .uk-grid-divider > * > .el-item { --mind-color: #333333; }
.crescent-intern-get .uk-grid-divider > :nth-child(1) > .el-item { --mind-color: #1554b7; }
.crescent-intern-get .uk-grid-divider > :nth-child(2) > .el-item { --mind-color: #e60046; }
.crescent-intern-get .uk-grid-divider > :nth-child(3) > .el-item { --mind-color: #ef551e; }
.crescent-intern-get .uk-grid-divider > :nth-child(4) > .el-item { --mind-color: #00894b; }
.crescent-intern-get .uk-grid-divider > :nth-child(5) > .el-item { --mind-color: #6a1ca4; }

.crescent-intern-get .uk-grid-divider .el-item .el-image {
	box-sizing: border-box !important;
	width: 72px !important;
	height: 72px !important;
	padding: 17px !important;
	border: 1.5px solid var(--mind-color) !important;
	border-radius: 50% !important;
	background: color-mix(in srgb, var(--mind-color) 5%, #ffffff) !important;
	object-fit: contain !important;
}

.crescent-intern-get .uk-grid-divider .el-item > .uk-grid {
	align-items: center !important;
}

.crescent-intern-get .uk-grid-divider .el-item .el-title {
	color: var(--mind-color) !important;
}

@media (max-width: 639px) {
	.crescent-intern-get .uk-grid-divider .el-item .el-image {
		width: 60px !important;
		height: 60px !important;
		padding: 14px !important;
	}
}

/* --------------------------------------------------------------------------
   長期インターン ─ 03 EVALUATION CYCLE（毎月のサイクル）
   --------------------------------------------------------------------------
   Grid要素（1行5つ）。資料11どおり、色付きの丸枠の中にアイコン、
   下に名前、項目の間に矢印（1200px以上のみ）。

   **アイコンはGrid要素で設定した画像をそのまま出す**（2026-09-26〜）。
   支給のSVG（icon_monthly-*.svg）が最初から資料の色で描かれているため、
   CSSでは塗らない。差し替えてもCSSの修正は要らない。
   以前はファイル名ごとに mask で塗っていたので、ファイル名が変わると
   アイコンが消え、色も既定の青だけになった（2026-09-26 実際に起きた）。

   丸枠と矢印の色は**並び順（nth-child）**で決める。資料の順
   （青→紫→ピンク→オレンジ→黄みのオレンジ）。並べ替えたらここも直すこと。
   どれもサイトの虹の帯（トップのエントリーボタンのグラデーション）の色。
   -------------------------------------------------------------------------- */

.crescent-intern-evaluation .uk-child-width-1-5\@m > * > .el-item {
	--eval-color: #0068b7;
	position: relative;
	text-align: center !important;
}

.crescent-intern-evaluation .uk-child-width-1-5\@m > :nth-child(1) > .el-item { --eval-color: #0068b7; }
.crescent-intern-evaluation .uk-child-width-1-5\@m > :nth-child(2) > .el-item { --eval-color: #6e11ae; }
.crescent-intern-evaluation .uk-child-width-1-5\@m > :nth-child(3) > .el-item { --eval-color: #e4007f; }
.crescent-intern-evaluation .uk-child-width-1-5\@m > :nth-child(4) > .el-item { --eval-color: #f05a32; }
.crescent-intern-evaluation .uk-child-width-1-5\@m > :nth-child(5) > .el-item { --eval-color: #f39800; }

/*  丸枠（::after）。アイコンの画像はその上に重ねる。 */
.crescent-intern-evaluation .uk-child-width-1-5\@m .el-item::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	width: 88px;
	height: 88px;
	margin-left: -44px;
	border: 2px solid var(--eval-color);
	border-radius: 50%;
	box-sizing: border-box;
	background: color-mix(in srgb, var(--eval-color) 5%, #ffffff);
	z-index: 0;
}

.crescent-intern-evaluation .uk-child-width-1-5\@m .el-item > .el-image {
	display: block !important;
	position: relative;
	z-index: 1;
	width: 48px !important;
	height: 48px !important;
	margin: 20px auto 20px !important;
}

.crescent-intern-evaluation .uk-child-width-1-5\@m .el-title {
	margin-top: 12px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	letter-spacing: 0.04em !important;
	color: #333333 !important;
}

/*  項目の間の矢印。5つが1行に並ぶ1200px以上だけ。
    列の右端（隣の丸との中間）に置き、色は次の項目ではなく自分の色。 */
@media (min-width: 1200px) {
	.crescent-intern-evaluation .uk-child-width-1-5\@m > :not(:last-child) {
		position: relative;
	}

	.crescent-intern-evaluation .uk-child-width-1-5\@m > :not(:last-child) > .el-item .el-title::after {
		content: "→";
		position: absolute;
		top: 30px;
		right: -12px;
		width: 24px;
		font-size: 20px;
		font-weight: 400;
		line-height: 1;
		text-align: center;
		color: var(--eval-color);
		transform: translateX(50%);
	}
}

/*  小見出し「MONTHLY（毎月のサイクル）」「QUARTERLY（3ヶ月ごと）」。
    2026-10-09 ビルダーの組み替えで「次の行にアイコンのGridがある行」という
    構造での指定が当たらなくなったため、classで指定する形に変えた。
    ビルダーでは、この小見出しの Text 要素の「Class」に次を入れる。

      MONTHLY    … crescent-eval-monthly     （青 #0068b7）
      QUARTERLY  … crescent-eval-quarterly   （紫 #6e11ae）

    色は資料どおり MONTHLY＝青、QUARTERLY＝紫。
    括弧の部分は <span> で囲み、そこだけ小さく細くする。
      MONTHLY <span>（毎月のサイクル）</span>
    class は Text 要素の .uk-panel 自身に付く。ほかの指定に負けないよう、
    セクションの class を前に付けて特定度を上げている。                    */
.crescent-intern-evaluation :is(.crescent-eval-monthly, .crescent-eval-quarterly) {
	margin: 0 !important;
	font-family: "Montserrat", "Noto Sans JP", sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	letter-spacing: 0.06em !important;
}

.crescent-intern-evaluation .crescent-eval-monthly,
.crescent-intern-evaluation .crescent-eval-monthly p {
	color: #0068b7 !important;
}

.crescent-intern-evaluation .crescent-eval-quarterly,
.crescent-intern-evaluation .crescent-eval-quarterly p {
	color: #6e11ae !important;
}

.crescent-intern-evaluation :is(.crescent-eval-monthly, .crescent-eval-quarterly) p {
	margin: 0 !important;
	font: inherit !important;
	letter-spacing: inherit !important;
}

.crescent-intern-evaluation :is(.crescent-eval-monthly, .crescent-eval-quarterly) span {
	font-family: "Noto Sans JP", sans-serif !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
}

/*  QUARTERLY の行。左＝丸枠のアイコン＋「3ヶ月ごとに昇格査定」、
    中＝説明文、右＝評価の視点（チェック付きの6項目）。
    行は「評価の視点のリスト（.uk-list）を含む行」で拾う（2026-09-26〜）。
    以前はアイコンのファイル名で拾っていたので、差し替えで行ごと崩れた。
    アイコンは設定した画像をそのまま丸枠の上に重ねる（色はSVG側）。 */
.crescent-intern-evaluation .tm-grid-expand:has(.uk-list) > :first-child .el-item {
	--eval-color: #6e11ae;
}

.crescent-intern-evaluation .tm-grid-expand:has(.uk-list) > :first-child .el-item > .uk-grid-small {
	flex-wrap: nowrap !important;
	align-items: center !important;
}

.crescent-intern-evaluation .tm-grid-expand:has(.uk-list) > :first-child .el-item > .uk-grid-small > :first-child {
	flex: none !important;
	width: auto !important;
}

.crescent-intern-evaluation .tm-grid-expand:has(.uk-list) > :first-child .el-item > .uk-grid-small > :first-child::before {
	content: "";
	display: block;
	width: 88px;
	height: 88px;
	box-sizing: border-box;
	border: 2px solid var(--eval-color);
	border-radius: 50%;
	background: color-mix(in srgb, var(--eval-color) 5%, #ffffff);
}

/*  丸の中のアイコン。丸（::before）の上に重ねるため、画像のカラムを
    基準に絶対配置する。                                              */
.crescent-intern-evaluation .tm-grid-expand:has(.uk-list) > :first-child .el-item > .uk-grid-small > :first-child {
	position: relative !important;
}

.crescent-intern-evaluation .tm-grid-expand:has(.uk-list) > :first-child .el-item > .uk-grid-small > :first-child .el-image {
	position: absolute !important;
	top: 20px;
	left: calc(100% - 68px);
	width: 48px !important;
	height: 48px !important;
}

.crescent-intern-evaluation .tm-grid-expand:has(.uk-list) > :first-child .el-item .el-title {
	margin: 0 !important;
	font-size: 24px !important;
	font-weight: 900 !important;
	line-height: 1.5 !important;
	letter-spacing: 0.06em !important;
	color: #111111 !important;
}

.crescent-intern-evaluation .tm-grid-expand:has(.uk-list) {
	align-items: center !important;
}

/*  中央の説明文。PCは左に区切り線。 */
.crescent-intern-evaluation .tm-grid-expand:has(.uk-list) > :nth-child(2) > .uk-panel {
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.9 !important;
	color: #333333 !important;
}

@media (min-width: 1200px) {
	.crescent-intern-evaluation .tm-grid-expand:has(.uk-list) > :nth-child(2) > .uk-panel {
		padding: 8px 0 8px 32px !important;
		border-left: 1px solid #dddddd !important;
	}
}

/*  評価の視点。薄い紫の囲みに、紫の丸チェック付きで6項目。 */
.crescent-intern-evaluation .tm-grid-expand:has(.uk-list) .uk-list {
	margin: 0 !important;
	padding: 20px 24px !important;
	border-radius: 8px !important;
	background: #f5f0fa !important;
}

.crescent-intern-evaluation .tm-grid-expand:has(.uk-list) .uk-list > li {
	position: relative;
	margin: 0 !important;
	padding: 5px 0 5px 26px !important;
	break-inside: avoid;
}

.crescent-intern-evaluation .tm-grid-expand:has(.uk-list) .uk-list > li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	border-radius: 50%;
	background: #6e11ae url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
}

.crescent-intern-evaluation .tm-grid-expand:has(.uk-list) .uk-list .el-content {
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	color: #333333 !important;
}

@media (max-width: 639px) {
	.crescent-intern-evaluation .tm-grid-expand:has(.uk-list) > :first-child .el-item > .uk-grid-small > :first-child::before {
		width: 72px;
		height: 72px;
	}

	.crescent-intern-evaluation .tm-grid-expand:has(.uk-list) > :first-child .el-item > .uk-grid-small > :first-child .el-image {
		top: 17px;
		left: calc(100% - 55px);
		width: 38px !important;
		height: 38px !important;
	}

	.crescent-intern-evaluation .tm-grid-expand:has(.uk-list) > :first-child .el-item .el-title {
		font-size: 20px !important;
	}

	.crescent-intern-evaluation .tm-grid-expand:has(.uk-list) > :nth-child(2) > .uk-panel {
		font-size: 14px !important;
	}
}

/*  右側の囲み「毎月のサイクルで、…」。同じ行にアイコンのGridがある
    カラムのTextだけに当てる（下の QUARTERLY の行にも 1/3 のTextがあるため）。 */
.crescent-intern-evaluation .tm-grid-expand:has(.uk-child-width-1-5\@m) > .uk-width-1-3\@m > .uk-panel {
	padding: 24px 28px !important;
	border-radius: 8px !important;
	background: #eef4fb !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.9 !important;
	color: #0068b7 !important;
}

@media (max-width: 639px) {
	.crescent-intern-evaluation .uk-child-width-1-5\@m .el-item::after {
		width: 72px;
		height: 72px;
		margin-left: -36px;
	}

	.crescent-intern-evaluation .uk-child-width-1-5\@m .el-item > .el-image {
		width: 38px !important;
		height: 38px !important;
		margin: 17px auto 17px !important;
	}

	.crescent-intern-evaluation .uk-child-width-1-5\@m .el-title {
		font-size: 12px !important;
	}

	.crescent-intern-evaluation .tm-grid-expand:has(.uk-child-width-1-5\@m) > .uk-width-1-3\@m > .uk-panel {
		padding: 18px 20px !important;
		font-size: 14px !important;
	}
}

/* --------------------------------------------------------------------------
   長期インターン ─ 04 CAREER AFTER INTERNSHIP ＋ 05 RECRUITMENT INFO
   --------------------------------------------------------------------------
   資料11では左右2カラムだが、文字組がきつかったため縦に並べ直した
   （2026-09-25）。キャリアは crescent-intern-career（全幅で4枚）、
   募集要項は crescent-intern-info（PCは左＝表、右＝画像の2カラム）。

   どちらのアイコンも、要素で設定した画像（色付きのSVG）をそのまま出す。
   差し替えてもCSSの修正は要らない（2026-09-28〜）。
   -------------------------------------------------------------------------- */

/*  見出しラベルの下の間隔。既定のままだと60px以上空いていた。 */
:is(.crescent-intern-career, .crescent-intern-info) .crescent-section-label + * {
	margin-top: 20px !important;
}

/*  表の右の画像。角を少し丸め、カラム幅いっぱいに。 */
.crescent-intern-info .tm-grid-expand:not(:has(.crescent-section-label)) .el-image:not(.uk-preserve-width) {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	border-radius: 8px !important;
}

/*  タブレット（640〜1199px）は表の下に全幅で出るので、16:10のままだと
    1199pxで高さ716pxになり大きすぎる。2:1に切り抜く。                */
@media (min-width: 640px) and (max-width: 1199px) {
	.crescent-intern-info .tm-grid-expand:not(:has(.crescent-section-label)) > :last-child .el-image {
		aspect-ratio: 2 / 1 !important;
		object-fit: cover !important;
	}
}

/*  PC（1200px以上・左右2カラム）では、画像の高さを表＋注記の高さに揃える。
    画像（1440x900、16:10）をそのまま出すと表より約70px高く、
    右だけ下に飛び出していた（2026-09-26）。
    画像のカラムの中身を絶対配置にして行の高さを表のカラムだけで決め、
    画像はその高さいっぱいに object-fit: cover で切り抜く。
    left: 40px はグリッドの列間（このテーマの1200px以上の既定値）。  */
@media (min-width: 1200px) {
	.crescent-intern-info .tm-grid-expand:not(:has(.crescent-section-label)) > :last-child {
		position: relative !important;
	}

	.crescent-intern-info .tm-grid-expand:not(:has(.crescent-section-label)) > :last-child > * {
		position: absolute !important;
		inset: 0 0 0 40px !important;
		margin: 0 !important;
	}

	.crescent-intern-info .tm-grid-expand:not(:has(.crescent-section-label)) > :last-child .el-image {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center !important;
	}

	.crescent-intern-info .tm-grid-expand:not(:has(.crescent-section-label)) > :last-child picture {
		display: block;
		height: 100%;
	}
}

/* キャリアの4枚 ----------------------------------------------------------- */
.crescent-intern-career .uk-child-width-1-4\@m .el-item {
	--career-color: #0068b7;
	display: flex !important;
	flex-direction: column !important;
	height: 100%;
	box-sizing: border-box;
	padding: 18px 14px 20px !important;
	border: 1px solid color-mix(in srgb, var(--career-color) 35%, #ffffff) !important;
	border-radius: 6px !important;
	background: #ffffff !important;
}

/*  カードの色は並び順で決める（青・緑・オレンジ・紫）。
    以前はアイコンのファイル名（cai_01〜04）で決めていたので、
    アイコンを差し替えたら色が全部青になり、アイコンも消えた（2026-09-28）。
    並べ替えたらここも直すこと。                                        */
.crescent-intern-career .uk-child-width-1-4\@m > :nth-child(1) > .el-item { --career-color: #0068b7; }
.crescent-intern-career .uk-child-width-1-4\@m > :nth-child(2) > .el-item { --career-color: #0a9d55; }
.crescent-intern-career .uk-child-width-1-4\@m > :nth-child(3) > .el-item { --career-color: #f05a32; }
.crescent-intern-career .uk-child-width-1-4\@m > :nth-child(4) > .el-item { --career-color: #6e11ae; }

/*  アイコンはGrid要素で設定した画像をそのまま出す（SVG側で色付き）。
    差し替えてもCSSの修正は要らない。画像は要素の先頭にあるが、
    order でカードの下端に回し、margin-top: auto で下に揃える
    （本文の長さが違っても横一列で並ぶ）。                                */
.crescent-intern-career .uk-child-width-1-4\@m .el-item > .el-image {
	display: block !important;
	order: 99;
	width: auto !important;
	height: 44px !important;
	margin: auto auto 0 !important;
}

.crescent-intern-career .uk-child-width-1-4\@m .el-title {
	margin: 0 !important;
	font-family: "Montserrat", "Noto Sans JP", sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.02em !important;
	text-align: center !important;
	color: var(--career-color) !important;
}

.crescent-intern-career .uk-child-width-1-4\@m .el-meta {
	margin: 6px 0 0 !important;
	padding-bottom: 12px !important;
	border-bottom: 1px solid #e5e5e5 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	letter-spacing: 0.02em !important;
	text-align: center !important;
	text-transform: none !important;
	color: var(--career-color) !important;
}

.crescent-intern-career .uk-child-width-1-4\@m .el-content {
	margin: 12px 0 0 !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	line-height: 1.8 !important;
	color: #333333 !important;
}

.crescent-intern-career .uk-child-width-1-4\@m .el-content + * ,
.crescent-intern-career .uk-child-width-1-4\@m .el-item > :last-child {
	margin-bottom: 16px !important;
}

/* 募集要項の表 ------------------------------------------------------------ */
.crescent-intern-info .uk-table {
	margin: 0 !important;
	border-top: 1px solid #e5e5e5 !important;
}

.crescent-intern-info .uk-table tr {
	border-bottom: 1px solid #e5e5e5 !important;
}


.crescent-intern-info .uk-table td {
	padding: 12px 8px !important;
	vertical-align: middle !important;
}

/*  アイコンは Table要素で設定した画像（icon_r-info-*.svg、ピンクの線画）を
    そのまま出す（2026-09-26）。以前はファイル名ごとに mask で塗っていたが、
    アイコンの色・太さはSVGファイル側で決める形に変えた。
    Inline SVG がオンなので <svg class="el-image uk-svg"> として埋め込まれる。 */
.crescent-intern-info .uk-table td:first-child {
	width: 32px !important;
	padding-left: 4px !important;
}

/*  UIkit は元の <img> に hidden を付けて残し、その後ろに <svg> を足す。
    .el-image にまとめて display を当てると、隠れていた <img> まで出て
    アイコンが二重になった。<svg> だけに当てる。                        */
.crescent-intern-info .uk-table td:first-child svg.el-image {
	display: block !important;
	width: 32px !important;
	height: 32px !important;
}

/*  項目名。右に細い区切り線（資料どおり）。 */
.crescent-intern-info .uk-table td:nth-child(2) {
	padding-right: 16px !important;
	border-right: 1px solid #e5e5e5;
}

.crescent-intern-info .uk-table .el-title {
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	color: #e5004f !important;
}

.crescent-intern-info .uk-table td:nth-child(3) {
	padding-left: 16px !important;
}

.crescent-intern-info .uk-table .el-content {
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.7 !important;
	color: #333333 !important;
}

/*  表の下の注記「※ 詳細は面接時にご説明します。」 */
.crescent-intern-info .uk-overflow-auto + .uk-panel {
	margin-top: 12px !important;
	font-size: 12px !important;
	color: #666666 !important;
}

/*  スマートフォン：キャリアは2列のまま、文字を一段小さく。 */
@media (max-width: 639px) {
	.crescent-intern-career .uk-child-width-1-4\@m .el-item {
		padding: 16px 12px 18px !important;
	}

	.crescent-intern-career .uk-child-width-1-4\@m .el-title {
		font-size: 14px !important;
	}

	.crescent-intern-career .uk-child-width-1-4\@m .el-meta {
		font-size: 11px !important;
	}

	.crescent-intern-career .uk-child-width-1-4\@m .el-content {
		font-size: 12px !important;
	}

	.crescent-intern-career .uk-child-width-1-4\@m .el-item > .el-image {
		height: 38px !important;
	}

	.crescent-intern-info .uk-table td {
		padding: 10px 6px !important;
	}

	.crescent-intern-info .uk-table td:nth-child(2) {
		padding-right: 10px !important;
	}

	.crescent-intern-info .uk-table td:nth-child(3) {
		padding-left: 10px !important;
	}

	.crescent-intern-info .uk-table .el-title,
	.crescent-intern-info .uk-table .el-content {
		font-size: 13px !important;
	}
}

/* ==========================================================================
   NEWS（/news/ とカテゴリー一覧）― ヒーローの背景画像
   ==========================================================================
   ヒーローはビルダーではなく templates/crescent-news-hero.php から出している
   （投稿ページはビルダーの内容が表示されないため）。他の下層ページの
   ヒーロー（ビルダーのタイル）と同じ見た目になるよう、ここで合わせる
   （2026-09-25）。

     ・メニューの直下から始める（メインの上余白を0に）
     ・幅は他ページのタイルと同じ 1400px。ヒーローは既定幅（1200px）の
       コンテナの中にあるので、画面が広いときだけ左右に最大100pxはみ出させる
       （100vw にはスクロールバーが含まれるので 1296px で計算して余裕を持たせた）
     ・パンくずはヒーローの中。テーマのパンくずは index.php / archive.php で
       止め、パーツの中で出し直している
     ・960px以上は news-hero-pc.jpg（2400x1000）を比 2.4 の箱に右寄せ。
       絵柄は左から42%（薄い飛沫）〜48%から始まるので、見出しとリードは
       幅40%までに収める
     ・959px以下は news-hero-mobile.jpg（1375x1146）を、採用・インターンと
       同じく「幅いっぱい・下揃え」で文字の下に敷く。画像の上15%ほどは
       ほぼ白なので、その分は文字と重ねてよい
       （下余白＝画像の高さ 83.3% × 0.85 ≒ 71%。700px前後でリードの右端が
       飛沫に触れたので 74% にした）
   ========================================================================== */

.tm-main:has(.crescent-news-hero) {
	padding-top: 0 !important;
}

.crescent-page-hero.crescent-news-hero {
	margin: 0 calc(-1 * clamp(0px, (100vw - 1296px) / 2, 100px)) 48px !important;
	padding: 26px 40px 56px !important;
	aspect-ratio: 2400 / 1000;
	background: #ffffff url("/wp-content/uploads/2026/09/news-hero-pc.jpg") no-repeat right center / cover !important;
}

.crescent-news-hero > nav {
	margin: 0 0 26px !important;
}

.crescent-news-hero .uk-breadcrumb {
	margin-bottom: 0 !important;
}

.crescent-news-hero .crescent-page-hero-en {
	margin-top: 0 !important;
}

.crescent-news-hero .crescent-page-hero-ja,
.crescent-news-hero .crescent-page-hero-lead {
	max-width: 40% !important;
}

@media (max-width: 959px) {
	.crescent-page-hero.crescent-news-hero {
		margin-bottom: 32px !important;
		padding: 16px 15px calc(74% + 16px) !important;
		aspect-ratio: auto;
		background: #ffffff url("/wp-content/uploads/2026/09/news-hero-mobile.jpg") no-repeat center bottom / 100% auto !important;
	}

	.crescent-news-hero > nav {
		margin-bottom: 10px !important;
	}

	.crescent-news-hero .crescent-page-hero-ja,
	.crescent-news-hero .crescent-page-hero-lead {
		max-width: none !important;
	}
}

/* ==========================================================================
   キャリア・評価制度ページ ─ RECRUITMENT INFO（募集要項・社員）
   ==========================================================================
   資料20（20_rectuitment_info（社員）.jpg）を統合したセクション（2026-09-28）。
   左＝条件の画像4枚（Grid）、右＝募集要項10項目（Grid 2列・区切り線）＋選考フロー。
   右の各項目は アイコン／日本語の項目名（el-title）／英字（el-meta）／内容（el-content）。
   アイコンの丸枠と項目の下線はビルダー側の要素CSS（#page\#0）で付けてある。
   色はアイコン（recruitment-20-icons-v1_*.svg）の紫 #4b098a に揃えた。
   ========================================================================== */

.crescent-career-info .uk-grid-divider .el-title,
.crescent-career-info .uk-grid-column-small .el-title {
	margin-top: 0 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	letter-spacing: 0.06em !important;
	color: #4b098a !important;
}

.crescent-career-info .uk-grid-divider .el-meta {
	margin-top: 2px !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: #8b6bb5 !important;
}

.crescent-career-info .uk-grid-divider .el-content {
	margin-top: 6px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.7 !important;
	color: #333333 !important;
}

/*  選考フロー（SELECTION | 選考フロー　一次面接 → 最終面接 → 内定） */
.crescent-career-info .uk-grid-column-small .el-content {
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.04em !important;
	color: #333333 !important;
}

@media (max-width: 639px) {
	/*  2列のままだと1列が120px前後しかなく、内容が6〜7行に折れていた。
	    スマートフォンは1列にする（区切り線はUIkitが並びに合わせて付け直す）。 */
	.crescent-career-info .uk-grid-divider > * {
		width: 100% !important;
	}

	.crescent-career-info .uk-grid-divider .el-title,
	.crescent-career-info .uk-grid-column-small .el-title {
		font-size: 14px !important;
	}

	.crescent-career-info .uk-grid-divider .el-content {
		font-size: 13px !important;
	}

	.crescent-career-info .uk-grid-column-small .el-content {
		font-size: 14px !important;
	}
}

/*  締めの一文「経験より、可能性。経歴より、これから。」（2026-09-28）。
    資料20の最下部どおり、濃い帯に白の大きな文字、「可能性」を紫・
    「これから」をオレンジ（ビルダーでそれぞれ <span> で囲んである）。
    濃い地の上なので、紫・オレンジはサイトの色より明るめにして読めるようにした。
    RECRUITMENT INFO の最後の行（1カラムにTextが1つだけ）の形で拾っている。 */
.crescent-career-info .uk-container > .tm-grid-expand:last-child:not(:first-child) > .uk-width-1-1 > .uk-panel:only-child {
	margin: 0 !important;
	padding: 22px 24px !important;
	border-radius: 6px !important;
	background: linear-gradient(90deg, #140a2a 0%, #2b1455 50%, #140a2a 100%) !important;
	font-size: 30px !important;
	font-weight: 900 !important;
	line-height: 1.5 !important;
	letter-spacing: 0.06em !important;
	text-align: center !important;
	color: #ffffff !important;
}

.crescent-career-info .uk-container > .tm-grid-expand:last-child:not(:first-child) > .uk-width-1-1 > .uk-panel:only-child span:nth-of-type(1) {
	color: #c18cff !important;
}

.crescent-career-info .uk-container > .tm-grid-expand:last-child:not(:first-child) > .uk-width-1-1 > .uk-panel:only-child span:nth-of-type(2) {
	color: #ff9a3c !important;
}

@media (max-width: 959px) {
	.crescent-career-info .uk-container > .tm-grid-expand:last-child:not(:first-child) > .uk-width-1-1 > .uk-panel:only-child {
		font-size: 22px !important;
	}
}

@media (max-width: 639px) {
	.crescent-career-info .uk-container > .tm-grid-expand:last-child:not(:first-child) > .uk-width-1-1 > .uk-panel:only-child {
		/* 17pxだと「これか／ら。」で折れた。20文字が1行に収まる15pxにする */
		padding: 16px 10px !important;
		font-size: 15px !important;
		letter-spacing: 0 !important;
	}
}

/* ==========================================================================
   キャリア・評価制度ページ ─ PROMOTION SYSTEM（昇格制度）
   ==========================================================================
   資料12どおり、PLAYER → LEADER → MANAGER → SENIOR MANAGER → BUSINESS の
   5段を横に並べ、段の間に矢印（1200px以上のみ）。
   **アイコンはGrid要素で設定した画像をそのまま出す**（2026-09-28）。
   CSSはファイル名を見ないので、ビルダーで差し替えれば反映される。
   大きさだけCSSで揃える（高さ56px。64枠・128枠どちらのSVGでも同じ大きさ）。
   ========================================================================== */

.crescent-career-promotion .uk-width-1-1 > .uk-panel:first-child {
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.9 !important;
	color: #333333 !important;
}

.crescent-career-promotion .uk-child-width-1-5\@m > * > .el-item {
	position: relative;
	text-align: center !important;
}

.crescent-career-promotion .uk-child-width-1-5\@m .el-image {
	display: block !important;
	width: auto !important;
	height: 56px !important;
	margin: 0 auto !important;
}

.crescent-career-promotion .uk-child-width-1-5\@m .el-title {
	margin-top: 14px !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.06em !important;
	color: #111111 !important;
}

.crescent-career-promotion .uk-child-width-1-5\@m .el-content {
	margin-top: 4px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	color: #666666 !important;
}

/*  段の間の矢印。5つが1行に並ぶ1200px以上だけ。
    アイコンの高さの中ほど（上から28px）に、列の右端＝隣との中間に置く。 */
@media (min-width: 1200px) {
	.crescent-career-promotion .uk-child-width-1-5\@m > :not(:last-child) > .el-item::after {
		content: "→";
		position: absolute;
		top: 16px;
		right: 0;
		width: 24px;
		font-size: 22px;
		line-height: 1;
		text-align: center;
		color: #6e11ae;
		transform: translateX(50%);
	}
}

@media (max-width: 639px) {
	.crescent-career-promotion .uk-width-1-1 > .uk-panel:first-child {
		font-size: 14px !important;
	}

	.crescent-career-promotion .uk-child-width-1-5\@m .el-image {
		height: 44px !important;
	}

	.crescent-career-promotion .uk-child-width-1-5\@m .el-title {
		font-size: 12px !important;
		letter-spacing: 0.02em !important;
	}

	.crescent-career-promotion .uk-child-width-1-5\@m .el-content {
		font-size: 11px !important;
	}
}

/*  「昇格＝“卒業型”ではなく“入学型”」の行（2026-09-28）。
    左＝見出し、中＝ステップ1・2（Grid 1列、チェックのアイコン＋札）、右＝「昇格（入学）」。
    行は「1/2幅のカラムを含む行」で拾う（このセクションでそこだけ3カラム）。
    チェックのアイコンはGrid要素の画像をそのまま出す（差し替え可）。
    ステップの札の色は並び順（1＝オレンジ、2＝ピンク。アイコンの色に合わせた）。 */
.crescent-career-promotion .tm-grid-expand:has(> .uk-width-1-2\@m) {
	align-items: center !important;
}

.crescent-career-promotion .tm-grid-expand:has(> .uk-width-1-2\@m) > :first-child > .uk-panel {
	font-size: 22px !important;
	font-weight: 900 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.04em !important;
	text-align: center !important;
	color: #111111 !important;
}

.crescent-career-promotion .tm-grid-expand:has(> .uk-width-1-2\@m) > :first-child > .uk-panel span {
	font-size: 26px;
	color: #e4007f !important;
}

/*  中：ステップ1・2を枠で囲み、間に区切り線。 */
.crescent-career-promotion .uk-width-1-2\@m > .uk-margin {
	padding: 6px 24px !important;
	border: 1px solid #e5e5e5 !important;
	border-radius: 8px !important;
	background: #ffffff !important;
}

.crescent-career-promotion .uk-width-1-2\@m .uk-grid > * + * {
	margin-top: 0 !important;
}

/*  区切り線は項目（.el-item）に付ける。Gridの子に付けると列間の余白の分
    （左へ40px）まで線がはみ出した。 */
.crescent-career-promotion .uk-width-1-2\@m .uk-grid > * + * > .el-item {
	border-top: 1px solid #eeeeee;
}

.crescent-career-promotion .uk-width-1-2\@m .el-item {
	--step-color: #f39800;
	padding: 14px 0 !important;
}

.crescent-career-promotion .uk-width-1-2\@m .uk-grid > :nth-child(2) .el-item {
	--step-color: #e4007f;
}

.crescent-career-promotion .uk-width-1-2\@m .el-item > [uk-grid],
.crescent-career-promotion .uk-width-1-2\@m .el-item > .uk-grid {
	flex-wrap: nowrap !important;
	align-items: center !important;
}

.crescent-career-promotion .uk-width-1-2\@m .el-item > .uk-grid > .uk-width-auto\@m {
	flex: none !important;
	width: auto !important;
}

.crescent-career-promotion .uk-width-1-2\@m .el-image {
	width: 32px !important;
	height: 32px !important;
}

/*  右側：タイトルと札を横に、本文をその下に。 */
.crescent-career-promotion .uk-width-1-2\@m .el-item .uk-width-expand {
	display: grid !important;
	grid-template-columns: 1fr auto;
	column-gap: 12px;
	align-items: center;
}

.crescent-career-promotion .uk-width-1-2\@m .el-title {
	grid-column: 1;
	grid-row: 1;
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	color: #111111 !important;
}

.crescent-career-promotion .uk-width-1-2\@m .el-meta {
	grid-column: 2;
	grid-row: 1;
	margin: 0 !important;
	padding: 2px 10px !important;
	border-radius: 3px !important;
	background: var(--step-color) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.06em !important;
	text-transform: none !important;
	color: #ffffff !important;
}

.crescent-career-promotion .uk-width-1-2\@m .el-content {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 4px 0 0 !important;
	font-size: 13px !important;
	line-height: 1.7 !important;
	color: #555555 !important;
}

/*  右：「昇格（入学）」。グラデーションの枠（ピンク→紫）。 */
.crescent-career-promotion .tm-grid-expand:has(> .uk-width-1-2\@m) > :last-child {
	position: relative;
}

.crescent-career-promotion .tm-grid-expand:has(> .uk-width-1-2\@m) > :last-child > .uk-panel {
	padding: 26px 16px !important;
	border: 2px solid transparent !important;
	border-radius: 8px !important;
	background:
		linear-gradient(#ffffff, #ffffff) padding-box,
		linear-gradient(135deg, #e4007f 0%, #920783 50%, #6e11ae 100%) border-box !important;
	font-size: 28px !important;
	font-weight: 900 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.08em !important;
	text-align: center !important;
	color: #e4007f !important;
}

/*  中→右の矢印（横に並ぶ1200px以上）。右カラムの左の余白（列間）の中ほど。 */
@media (min-width: 1200px) {
	.crescent-career-promotion .tm-grid-expand:has(> .uk-width-1-2\@m) > :last-child::before {
		content: "→";
		position: absolute;
		top: 50%;
		left: 20px;
		font-size: 24px;
		line-height: 1;
		color: #e4007f;
		transform: translate(-50%, -50%);
	}
}

/*  下の一文。 */
.crescent-career-promotion .tm-grid-expand:last-child:not(:first-child) > .uk-width-1-1 > .uk-panel:only-child {
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.9 !important;
	text-align: center !important;
	color: #333333 !important;
}

@media (max-width: 1199px) {
	.crescent-career-promotion .tm-grid-expand:has(> .uk-width-1-2\@m) > :last-child > .uk-panel {
		max-width: 320px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

@media (max-width: 639px) {
	.crescent-career-promotion .tm-grid-expand:has(> .uk-width-1-2\@m) > :first-child > .uk-panel {
		font-size: 18px !important;
	}

	.crescent-career-promotion .tm-grid-expand:has(> .uk-width-1-2\@m) > :first-child > .uk-panel span {
		font-size: 22px;
	}

	.crescent-career-promotion .uk-width-1-2\@m > .uk-margin {
		padding: 4px 16px !important;
	}

	.crescent-career-promotion .uk-width-1-2\@m .el-title {
		font-size: 14px !important;
	}

	.crescent-career-promotion .tm-grid-expand:has(> .uk-width-1-2\@m) > :last-child > .uk-panel {
		padding: 18px 16px !important;
		font-size: 22px !important;
	}

	.crescent-career-promotion .tm-grid-expand:last-child:not(:first-child) > .uk-width-1-1 > .uk-panel:only-child {
		font-size: 13px !important;
		text-align: left !important;
	}
}

/* ==========================================================================
   キャリア・評価制度ページ ─ CAREER PATHS（コース5枚）
   ==========================================================================
   資料12どおり、コースごとの色の薄い枠と地、タイトルもその色、アイコンは下（2026-09-28）。
   アイコン（Grid要素の画像）の大きさ・位置は、2026-10-09 からビルダーで制御する。
   枠と文字の色は並び順（青・緑・オレンジ・ピンク・紫）。並べ替えたらここも直す。
   スマートフォンはビルダーの設定だと3列（1列100px前後）で詰まるので2列にする。
   ========================================================================== */

.crescent-career-paths .uk-child-width-1-5\@m > * > .el-item {
	--path-color: #0068b7;
	height: 100%;
	box-sizing: border-box;
	padding: 20px 16px 22px !important;
	border: 1px solid color-mix(in srgb, var(--path-color) 30%, #ffffff) !important;
	border-radius: 8px !important;
	background: color-mix(in srgb, var(--path-color) 4%, #ffffff) !important;
}

.crescent-career-paths .uk-child-width-1-5\@m > :nth-child(1) > .el-item { --path-color: #0068b7; }
.crescent-career-paths .uk-child-width-1-5\@m > :nth-child(2) > .el-item { --path-color: #0a9d55; }
.crescent-career-paths .uk-child-width-1-5\@m > :nth-child(3) > .el-item { --path-color: #f39800; }
.crescent-career-paths .uk-child-width-1-5\@m > :nth-child(4) > .el-item { --path-color: #e4007f; }
.crescent-career-paths .uk-child-width-1-5\@m > :nth-child(5) > .el-item { --path-color: #6e11ae; }

.crescent-career-paths .uk-child-width-1-5\@m .el-title {
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	letter-spacing: 0.04em !important;
	text-align: center !important;
	color: var(--path-color) !important;
}

.crescent-career-paths .uk-child-width-1-5\@m .el-content {
	margin: 10px 0 16px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.8 !important;
	color: #333333 !important;
}

/*  パネル内の画像（アイコン）の指定（高さ48px・カードの下端へ回す order など）は、
    2026-10-09 に平山さまの指示で削除した。大きさ・位置はビルダーで制御する。 */

.crescent-career-paths .uk-width-1-1 > .uk-panel.uk-margin {
	font-size: 15px !important;
	line-height: 1.9 !important;
	color: #333333 !important;
}

@media (max-width: 639px) {
	.crescent-career-paths .uk-child-width-1-5\@m > * {
		width: 50% !important;
	}

	.crescent-career-paths .uk-child-width-1-5\@m > * > .el-item {
		padding: 16px 12px 18px !important;
	}

	.crescent-career-paths .uk-child-width-1-5\@m .el-title {
		font-size: 14px !important;
	}

	.crescent-career-paths .uk-child-width-1-5\@m .el-content {
		font-size: 12px !important;
	}

	.crescent-career-paths .uk-width-1-1 > .uk-panel.uk-margin {
		font-size: 14px !important;
	}
}

/* ==========================================================================
   キャリア・評価制度ページ ─ EVALUATION POINTS（評価の考え方・5項目）
   ==========================================================================
   資料12どおり、5項目を1行に並べ、間に縦の区切り線（2026-09-28）。
   ビルダーのGridは「PCで3列」（uk-child-width-1-3@m）なので、
   1200px以上は5等分に上書きしている。ビルダー側で5列にしてもそのまま動く。
   アイコンはGrid要素の画像をそのまま出す（差し替え可）。
   スマートフォンは1列で、アイコンを左・名前を右にした横長の行にする。
   ========================================================================== */

.crescent-career-points .el-item {
	text-align: center !important;
}

.crescent-career-points .el-image {
	display: block !important;
	width: auto !important;
	height: 56px !important;
	margin: 0 auto !important;
}

.crescent-career-points .el-title {
	margin-top: 14px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.04em !important;
	color: #111111 !important;
}

@media (min-width: 1200px) {
	.crescent-career-points .uk-grid:has(> * > .el-item) > * {
		width: 20% !important;
	}

	.crescent-career-points .uk-grid:has(> * > .el-item) > * + * > .el-item {
		border-left: 1px solid #e5e5e5;
	}

	.crescent-career-points .uk-grid:has(> * > .el-item) > * > .el-item {
		padding: 4px 12px !important;
	}
}

@media (max-width: 639px) {
	.crescent-career-points .uk-grid:has(> * > .el-item) > * + * {
		margin-top: 0 !important;
	}

	.crescent-career-points .el-item {
		display: flex !important;
		align-items: center !important;
		gap: 16px;
		padding: 12px 0 !important;
		border-bottom: 1px solid #eeeeee;
		text-align: left !important;
	}

	.crescent-career-points .el-image {
		flex: none;
		height: 40px !important;
		margin: 0 !important;
	}

	.crescent-career-points .el-title {
		margin: 0 !important;
		font-size: 14px !important;
	}
}

/*  締めの一文「これらを総合的に評価し、一人ひとりの成長を支援します。」
    5項目のGridのすぐ後ろのText（2026-09-28）。 */
.crescent-career-points .uk-margin:has(> .uk-grid) + .uk-panel {
	margin-top: 36px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.8 !important;
	letter-spacing: 0.04em !important;
	text-align: center !important;
	color: #111111 !important;
}

@media (max-width: 639px) {
	.crescent-career-points .uk-margin:has(> .uk-grid) + .uk-panel {
		margin-top: 24px !important;
		font-size: 14px !important;
	}
}

/* ==========================================================================
   エントリーページ（/entry/）― 募集要項（2026-09-29）
   ==========================================================================
   資料19（インターン）・20（社員）をもとに、INTERNSHIP（crescent-entry-requirements）と
   CAREER（crescent-entry-career）の2セクションを縦に並べた構成（Switcher は中に要素を入れられないため）。
   2026-10-01 に社員採用を別セクションに分け、class を付けてもらった。両方に同じ指定を当てる。
   各ブロック：左2/5＝画像・説明・「エントリーフォーム ↓」、右3/5＝項目リスト（Grid 1列・区切り線）。
   アイコンはGrid要素の画像をそのまま出す（インターン＝ピンク、社員＝紫のSVG）。
   項目名・内容の文字は両方とも黒（2026-10-01 平山さま指定。以前はブロックごとにピンク／紫）。
   ========================================================================== */

/*  小見出し → 中身の間。既定の行間40px＋ラベル下24pxで64px空いていた。
    ラベル下の24pxだけにする（他ページの小見出し→中身と同じ）。 */
:is(.crescent-entry-requirements, .crescent-entry-career) .tm-grid-expand:has(.crescent-section-label) + .tm-grid-expand {
	margin-top: 0 !important;
}

:is(.crescent-entry-requirements, .crescent-entry-career) .uk-width-2-5\@m .el-image {
	border-radius: 8px !important;
}

:is(.crescent-entry-requirements, .crescent-entry-career) .uk-width-2-5\@m > .uk-panel {
	font-size: 15px !important;
	line-height: 1.9 !important;
	color: #333333 !important;
}

:is(.crescent-entry-requirements, .crescent-entry-career) .uk-grid-divider .el-title {
	--req-color: #111111;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.04em !important;
	color: var(--req-color) !important;
}

:is(.crescent-entry-requirements, .crescent-entry-career) .uk-grid-divider .el-content {
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.7 !important;
	color: #111111 !important;
}

@media (max-width: 639px) {
	:is(.crescent-entry-requirements, .crescent-entry-career) .uk-width-2-5\@m > .uk-panel {
		font-size: 14px !important;
	}

	:is(.crescent-entry-requirements, .crescent-entry-career) .uk-grid-divider .el-title {
		font-size: 14px !important;
	}

	:is(.crescent-entry-requirements, .crescent-entry-career) .uk-grid-divider .el-content {
		font-size: 13px !important;
	}
}

/* ==========================================================================
   お問い合わせページ（/contact/）― フォームとアクセス（2026-10-01）
   ==========================================================================
   各セクションの頭は他ページと同じ小見出し（crescent-section-label。ここは
   Headline要素H2に付けている）。文字部分には次のclassを付けてある。
     crescent-contact-heading     … 小さな見出し（「お気軽にご相談ください。」「株式会社CRESCENT」）
     crescent-contact-lead        … 見出しの下の説明
     crescent-contact-subheading  … 「こんなご相談をお待ちしています」
     crescent-contact-list        … ご相談の種類のリスト
     crescent-contact-address     … 住所
     crescent-contact-map         … Googleマップを入れたText
   ========================================================================== */

:is(.crescent-contact-form, .crescent-contact-access) h2.crescent-section-label {
	margin-top: 0 !important;
}

:is(.crescent-contact-form, .crescent-contact-access) .crescent-contact-heading {
	margin: 0 0 12px !important;
	font-size: 22px !important;
	font-weight: 900 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.04em !important;
	color: #111111 !important;
}

.crescent-contact-form .crescent-contact-lead {
	width: auto !important;
	max-width: 420px !important;
	margin-top: 0 !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.9 !important;
	color: #555555 !important;
}

.crescent-contact-form .crescent-contact-subheading {
	margin: 28px 0 10px !important;
	padding-left: 10px !important;
	border-left: 3px solid #e4007f !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	letter-spacing: 0.04em !important;
	color: #111111 !important;
}

.crescent-contact-form .crescent-contact-list {
	margin-top: 0 !important;
}

.crescent-contact-form .crescent-contact-list > li {
	margin-top: 4px !important;
}

.crescent-contact-form .crescent-contact-list > li::marker {
	color: #e4007f;
}

.crescent-contact-form .crescent-contact-list .el-content {
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.8 !important;
	color: #333333 !important;
}

.crescent-contact-access .crescent-contact-address {
	margin-top: 0 !important;
	font-size: 15px !important;
	line-height: 1.9 !important;
	color: #555555 !important;
}

/*  地図。埋め込みの width/height 属性に頼らず、カラム幅いっぱい・4:3 にする。 */
.crescent-contact-access .crescent-contact-map p {
	margin: 0 !important;
}

.crescent-contact-access .crescent-contact-map iframe {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3;
	border: 0 !important;
	border-radius: 8px !important;
}

@media (max-width: 639px) {
	:is(.crescent-contact-form, .crescent-contact-access) .crescent-contact-heading {
		font-size: 19px !important;
	}

	.crescent-contact-form .crescent-contact-lead,
	.crescent-contact-access .crescent-contact-address {
		font-size: 14px !important;
	}

	.crescent-contact-access .crescent-contact-map iframe {
		aspect-ratio: 1 / 1;
	}

	/*  縦に並ぶと、リストのすぐ下にフォームの最初の項目が来て詰まって見える。 */
	.crescent-contact-form .crescent-contact-list {
		margin-bottom: 32px !important;
	}
}

/*  エントリーページの募集要項リスト（インターン・社員の両方）で、
    アイコン・項目名・内容の1行目の高さを揃える（2026-10-01）。

    ずれていた原因（実測）:
      ・社員側は文字の入れ物に uk-padding-small（上15px）が付き、文字だけ下がっていた
      ・項目名と内容の行の高さが違う（22.4px／26px）
      ・アイコンは30px、文字の1行は24〜26px
    → 文字の入れ物の上下の余白を0にし（行の間隔は項目側で取る）、項目名・内容の行の高さを
      26pxに揃え、アイコンを2px上げて、アイコンの中心＝1行目の中心にする。 */
:is(.crescent-entry-requirements, .crescent-entry-career) .uk-grid-divider .el-item .uk-padding-small {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

:is(.crescent-entry-requirements, .crescent-entry-career) .uk-grid-divider .el-item .el-title,
:is(.crescent-entry-requirements, .crescent-entry-career) .uk-grid-divider .el-item .el-content {
	margin-top: 0 !important;
	line-height: 26px !important;
}

:is(.crescent-entry-requirements, .crescent-entry-career) .uk-grid-divider .el-item .el-image {
	display: block !important;
	width: 30px !important;
	height: 30px !important;
	margin-top: -2px !important;
}

:is(.crescent-entry-requirements, .crescent-entry-career) .uk-grid-divider .el-item .uk-grid > * {
	align-self: flex-start !important;
}

/* ==========================================================================
   ヒーロー背景の表示切り替え（ビルダーのClassで選ぶ）― 2026-10-07
   ==========================================================================
   トップ以外のヒーローで、背景画像を出す画面幅を選ぶための2つのclass。
   ヒーローの背景を設定したカラム（またはセクション）の「Class」に入れる。

     crescent-hero-bg-pc       … PCだけ表示（タブレット・スマホは非表示）
     crescent-hero-bg-tablet   … PCとタブレットで表示（スマホは非表示）

   どちらも付けなければ、ビルダーの設定どおり全画面で表示される。
   スマホでも表示したいときは、classを付けない。
   画面幅:  PC 1200px以上／タブレット 640〜1199px／スマホ 639px以下

   ■ classの置き場所
     ビルダーのColumnの「Class」は外側のdivに付き、背景は内側の箱
     （.uk-tile／.uk-background-*）に付く。そのため、classの要素そのものと
     子孫の背景の両方を対象にしている。Sectionに背景を設定した場合も、
     Sectionのclassに入れれば効く。
   ■ 背景を消すのは background-image のみ。背景色は残る。
   ■ ページ個別のスマホ背景指定（business・company・intern など）より後に
     書いてあり、class2つ重ねで特定度も上げているので、classを付ければ必ず勝つ。
   ■ 取扱商材・お問い合わせ・エントリーの個別CSS（スマホ／タブレット以下で非表示）は、
     class指定が済んだので 2026-10-07 に削除した。
   ■ 対象外: PEOPLE・ニュース・会社情報（平山さま指定）と、トップ。            */
@media (max-width: 1199px) {
	:is(
		.crescent-hero-bg-pc.crescent-hero-bg-pc,
		.crescent-hero-bg-pc.crescent-hero-bg-pc .uk-tile,
		.crescent-hero-bg-pc.crescent-hero-bg-pc .uk-background-cover,
		.crescent-hero-bg-pc.crescent-hero-bg-pc [class*="uk-background-"]
	) {
		background-image: none !important;
	}
}

@media (max-width: 639px) {
	:is(
		.crescent-hero-bg-tablet.crescent-hero-bg-tablet,
		.crescent-hero-bg-tablet.crescent-hero-bg-tablet .uk-tile,
		.crescent-hero-bg-tablet.crescent-hero-bg-tablet .uk-background-cover,
		.crescent-hero-bg-tablet.crescent-hero-bg-tablet [class*="uk-background-"]
	) {
		background-image: none !important;
	}
}

/* ==========================================================================
   ヒーローのPC用／スマホ用の出し分け（別セクションで作る場合）― 2026-10-07
   ==========================================================================
   ヒーローをPC用とスマホ用に別々のセクションで作るときの表示切り替え。
   各セクションの「Class」に入れる。タブレットはPC用を流用する。

     crescent-hero-pc   … PC・タブレット（640px以上）で表示、スマホ（639px以下）で非表示
     crescent-hero-sp   … スマホ（639px以下）で表示、PC・タブレット（640px以上）で非表示

   非表示は display:none。画像は読み込まれず、読み上げソフトにも出ない。
   ビルダーのVisibility（Section）でも同じことができる。こちらはclassで
   統一したいとき用。境目 640px はサイトの Small（@s）と同じ。
   ■ h1とパンくずは、どちらか片方だけに置くか、片方を div にして重複させない。
   ■ ヒーロー背景の出し分け（crescent-hero-bg-pc／-tablet）とは別もの。
     背景だけ切り替えたいときはそちらを使う。                               */
@media (max-width: 639px) {
	.crescent-hero-pc {
		display: none !important;
	}
}

@media (min-width: 640px) {
	.crescent-hero-sp {
		display: none !important;
	}
}

/* ==========================================================================
   共通の見出しclass：cre-h3 ― 2026-10-16（2026-10-17 に画面幅ごとの大きさに拡張）
   ==========================================================================
   サイト全体で見出しの大きさをそろえる共通class。
   ビルダーの Headline 要素の「Class」に cre-h3 を入れ、HTML要素は h3 にする。
   PC・タブレット・スマホで、1つのclassのまま大きさが切り替わる。

     画面幅           大きさ  行の高さ  字間    下の余白
     PC 1200px以上     32px    1.6      0.08em  20px
     タブレット 960〜1199px  40px   1.45   0.08em  32px
     タブレット 640〜959px   28px   1.45   0.08em  24px
     スマホ 639px以下        22px   1.6    0.04em  16px

     フォント Noto Sans JP（サイトの本文フォント）／太さ 700／色 #111111

   PC の 32px は 03 CONTENT の見出しに、タブレットは 01 ABOUT の見出しに、
   スマホは下層ページのスマホの見出し（22px）の系統に合わせた。
   （以前の cre-h3 は PC・タブレット・スマホとも 28px 固定だった。使っているページは無かった。）

   セクションごとの見出しの指定（.crescent-business など、特定度 (0,3,1)〜(0,4,1)）や、
   ビルダーが要素ごとに書き出すスタイル（#page#n）より必ず勝つよう、
   ID（#tm-main）を含む特定度にしている。:is(#tm-main, body) は特定度が ID 分になり、
   #tm-main の外（フッターなど）でも当たる。
   上の余白（margin-top）は指定しない。UIkit の標準（見出しの前に要素があれば40px）か、
   ビルダーの設定に任せる。
   スマホ専用の cre-h3-sp は、cre-h3 だけで足りるので、2026-10-17 に削除した。 */
:is(#tm-main, body) .cre-h3 {
	font-family: "Noto Sans JP", sans-serif !important;
	font-size: 32px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.08em !important;
	color: #111111 !important;
	margin-bottom: 20px !important;
}

@media (max-width: 1199px) {
	:is(#tm-main, body) .cre-h3 {
		font-size: 40px !important;
		line-height: 1.45 !important;
		margin-bottom: 32px !important;
	}
}

@media (max-width: 959px) {
	:is(#tm-main, body) .cre-h3 {
		font-size: 28px !important;
		margin-bottom: 24px !important;
	}
}

@media (max-width: 639px) {
	:is(#tm-main, body) .cre-h3 {
		font-size: 22px !important;
		line-height: 1.6 !important;
		letter-spacing: 0.04em !important;
		margin-bottom: 16px !important;
	}
}

/* ==========================================================================
   共通の番号class：cre-number ― 2026-10-22
   ==========================================================================
   タイトルの頭に付ける番号（01・02…）。他のページの大きい番号
   （.crescent-header-num）と同じ、Oswald・太さ600・オレンジ→ピンクのグラデーション。
   ビルダーでは、タイトルに <span class="cre-number">01</span>EVENT PROMOTION のように書く。

     大きさ  タイトルの 1.8倍（16px のタイトルで約29px）。変えるときは font-size だけ
     余白    右に10px
     色      上 #f05a16 → 下 #e4007f（文字の色は透明で、グラデーションを文字で切り抜く）

   ビルダーが要素ごとに書き出すスタイル（#page#n .cre-number { color: red } など）や
   タイトルの色に負けないよう、色・大きさ・余白は !important にしている。
   Oswald は functions.php で数字（0〜9）だけ読み込んでいる。                     */
:is(#tm-main, body) .cre-number {
	display: inline-block !important;
	padding-right: 10px !important;
	font-family: Oswald, Montserrat, sans-serif !important;
	font-size: 1.8em !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	vertical-align: -0.06em;
	background: linear-gradient(180deg, #f05a16 0%, #e4007f 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
}

/* ==========================================================================
   共通の見出し・本文class：cre-h4 / cre-text ― 2026-10-22
   ==========================================================================
   ABOUT の 01 PHILOSOPHY（crescent-about-concept）のカードの見出しと本文を基準にした、
   ビルダーで付けるためのclass。ビルダーの Headline / Text 要素の「Class」に書く。

     cre-h4    見出し  PC(1200px〜) 24px → タブレット(640〜1199px) 21px → スマホ(〜639px) 19px
                       太さ700・行の高さ1.6・字間0.04em・色#111・下余白 16px（スマホ12px）
     cre-text  本文    14px・太さ400・行の高さ1.9・色#555（全画面共通）

   上余白・幅は付けない（ビルダーで決める）。
   .crescent-about などの見出し・本文の指定や、ビルダーが要素ごとに書き出すスタイルに
   負けないよう、ID付きの :is(#tm-main, body) と !important を使う。          */
:is(#tm-main, body) .cre-h4 {
	font-family: "Noto Sans JP", sans-serif !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.04em !important;
	color: #111111 !important;
	margin-bottom: 16px !important;
}

:is(#tm-main, body) :is(.cre-text, .cre-text p) {
	font-family: "Noto Sans JP", sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.9 !important;
	letter-spacing: normal !important;
	color: #555555 !important;
}

@media (max-width: 1199px) {
	:is(#tm-main, body) .cre-h4 {
		font-size: 21px !important;
	}
}

@media (max-width: 639px) {
	:is(#tm-main, body) .cre-h4 {
		font-size: 19px !important;
		margin-bottom: 12px !important;
	}
}