@charset "utf-8";
/* ==========================================================================
   Right-on Corporate theme — 移管に伴う差分CSS

   旧サイトから引き継いだ CSS は編集せず、上書き・追加はすべてこのファイルに書きます。
     assets/css/default_notbackground.css  全ページ共通（約344KB）
     assets/css/news.css                   ニュース一覧・詳細
     assets/js/jqtransformplugin/jqtransform.css  絞り込みセレクトの装飾

   1. サイドナビ削除に伴う本文幅の拡張（会社概要）
   2. IR NEWS 削除に伴う NEWS RELEASE の横幅拡張（TOP）
   3. コンテンツナビの4カラム対応（TOP）
   4. ニュースカテゴリーのラベルを画像からCSSに変更
   5. ニュース一覧のページ送りをページ番号形式に変更
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. サイドナビ削除に伴う本文幅の拡張

   旧: section .box (820px) = #main-box (588px, float:left) + nav#snav (192px, float:right)
   新: サイドナビを出力しないため #main-box を枠内いっぱいに広げる
   ※ ニュースページは既存サイトどおり #side-r（絞り込みセレクト）を残すため対象外
   -------------------------------------------------------------------------- */
#main-box.main-box--full {
	width: 100%;
	float: none;
}

/* .ttl-sub は幅588px固定の画像置換なので、そのまま左寄せで表示する */
.main-box--full > .ttl-sub {
	width: 100%;
  background-color: #476b8b;
}


/* --------------------------------------------------------------------------
   2. IR NEWS 削除に伴う NEWS RELEASE の横幅拡張（TOP）

   旧: .newsbox = .news (46%) + .ir (46%) の2カラム
   新: .ir を出力しないため .news を枠内いっぱいに広げる
   -------------------------------------------------------------------------- */
.newsbox--wide {
	display: block;
}

.news--wide {
	width: 100%;
	max-width: 1016px;
}

/* 横に広がった分、記事タイトルとサムネイルの間隔を調整 */
.news--wide .news--txt {
	padding-right: 3em;
}

@media screen and (max-width: 979px) {
	.news--wide {
		margin-bottom: 0;
	}
	.news--wide .news--txt {
		padding-right: 1em;
	}
}


/* --------------------------------------------------------------------------
   3. コンテンツナビの4カラム対応（TOP）

   旧CSSは3カラム前提（li 33.333% ＋ nth-child(3n) で左右パディング調整）。
   移管後は IR・サステナビリティを除いた4項目になるため4カラムを追加。
   項目数を変える場合は template-parts/contents-navi.php の $items を編集。
   -------------------------------------------------------------------------- */
.contentsNavi--4col ul li {
	width: 25%;
}

.contentsNavi--4col ul li .contentsNavi--inner {
	padding-right: 18px;
	padding-left: 18px;
}

.contentsNavi--4col ul li:nth-child(3n+1) .contentsNavi--inner {
	padding-left: 18px;
}

.contentsNavi--4col ul li:nth-child(3n) .contentsNavi--inner {
	padding-right: 18px;
}

.contentsNavi--4col ul li:first-child .contentsNavi--inner {
	padding-left: 0;
}

.contentsNavi--4col ul li:last-child .contentsNavi--inner {
	padding-right: 0;
}

.contentsNavi--4col ul li h2 {
	font-size: 16px;
}

@media screen and (max-width: 979px) {
	.contentsNavi--4col ul li {
		width: 100%;
	}
	.contentsNavi--4col ul li .contentsNavi--inner,
	.contentsNavi--4col ul li:first-child .contentsNavi--inner,
	.contentsNavi--4col ul li:last-child .contentsNavi--inner {
		padding-right: 0;
		padding-left: 0;
	}
	.contentsNavi--4col ul li h2 {
		font-size: 14px;
	}
}


/* --------------------------------------------------------------------------
   4. ニュースカテゴリーのラベルを画像からCSSに変更

   旧サイトはカテゴリーラベルを画像置換で出していました。
     span.icon に background-image: url(../img/ico-top.png) を当て、
     text-indent: 101% で中の文字を画面外に飛ばす方式
     （「その他」「重要なお知らせ」だけは base64 の個別画像）

   これをやめて、カテゴリー名のテキストをそのまま表示し、
   色だけを CSS で付けるようにしています。

   ● 画像をやめた利点
     - カテゴリー名を変えても画像を作り直す必要がない
       （「商品・キャンペーン」はスプライトに「プロダクト」しか無く、
         画像方式では表記が合わないままでした）
     - 文字がテキストになるので検索・読み上げ・拡大に対応できる
     - 高解像度端末でも文字がぼやけない（SP用の2倍画像も不要）

   ● 色は旧スプライト assets/img/ico-top.png から抽出した実測値です
     （各セル 58×15px の最頻色。「その他」「重要なお知らせ」は base64 画像から）

   ● 文字サイズも実測に合わせています
     スプライトの文字は 漢字9.0px / カタカナ7.8px 相当、文字高9〜10px
     → font-size: 9px / line-height: 15px でほぼ同じ見た目になります
   -------------------------------------------------------------------------- */

tr.ico-company span.icon,
tr.ico-shop span.icon,
tr.ico-campaign span.icon,
tr.ico-career span.icon,
tr.ico-media span.icon,
tr.ico-brand span.icon,
tr.ico-weblimited span.icon,
tr.ico-product span.icon,
tr.ico-csr span.icon,
tr.ico-shopevent span.icon,
tr.ico-memberslimited span.icon,
tr.ico-newshop span.icon,
tr.ico-topics span.icon,
tr.ico-other span.icon,
tr.ico-notice span.icon {
	/* 画像置換の解除（ico-other / ico-notice は !important で入っているため上書き） */
	background-image: none !important;
	background-color: #94989d;
	text-indent: 0;
	overflow: visible;
	white-space: nowrap;

	/* display: table で「中身の幅にフィットしつつ、日付の下に改行して置く」を実現。
	   width: fit-content は古いブラウザで効かないため table を使っています */
	display: table;
	min-width: 58px;
	height: 15px;

	/* ラベル内の左右余白（8px）。
	   display: table は padding が箱の幅に反映されない（＝文字が端に付いてしまう）ため、
	   透明ボーダーで余白を作っています。背景は border-box まで描かれるので
	   見た目は padding と同じになり、古いブラウザでも同じように効きます。 */
	padding: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;

	font-size: 9px;
	line-height: 15px;
	text-align: center;
	letter-spacing: 0;
	color: #fff;
	-webkit-font-smoothing: antialiased;
}

/* 一覧のSP版（.news_tabSP）は th の中がラベルだけなので左寄せに揃える */
@media screen and (max-width: 479px) {
	body#p-news #main .news_tabSP th.date {
		text-align: left;
	}
}

/* ---- カテゴリーごとの色（ico-top.png から抽出）------------------------- */

/* 移管後に使用する4カテゴリー */
tr.ico-shop span.icon          { background-color: #7297a7; } /* 店舗情報 */
tr.ico-media span.icon         { background-color: #965e6c; } /* メディア */
tr.ico-product span.icon       { background-color: #6e998d; } /* 商品・キャンペーン（旧「プロダクト」の色） */
tr.ico-notice span.icon        { background-color: #bc8ea0; } /* 重要なお知らせ */

/* 旧サイトに存在したカテゴリー（旧スラッグの記事が残っている場合の受け皿） */
tr.ico-company span.icon        { background-color: #4e5f89; } /* 企業情報 */
tr.ico-campaign span.icon       { background-color: #998758; } /* キャンペーン */
tr.ico-career span.icon         { background-color: #889a68; } /* キャリア */
tr.ico-brand span.icon          { background-color: #94989d; } /* ブランド */
tr.ico-weblimited span.icon     { background-color: #886b8b; } /* WEB限定 */
tr.ico-csr span.icon            { background-color: #6a749b; } /* CSR */
tr.ico-shopevent span.icon      { background-color: #b88052; } /* 店舗イベント */
tr.ico-memberslimited span.icon { background-color: #597f73; } /* 会員限定 */
tr.ico-newshop span.icon        { background-color: #bc8ea0; } /* 新店情報 */
tr.ico-topics span.icon         { background-color: #83b1be; } /* トピックス */
tr.ico-other span.icon          { background-color: #94989d; } /* その他（未対応カテゴリーの既定色） */

/* 詳細ページ（.ico-head）は th の中がラベルだけなので、余白を旧デザインに合わせる */
.ico-head tr span.icon {
	margin-top: 1px;
}


/* --------------------------------------------------------------------------
   5. ニュース一覧のページ送りをページ番号形式に変更

   旧サイトは PREV / NEXT の2ボタンのみ（news.css の .pager / #btn-prev / #btn-next）。
   これをページ番号（＋ 末尾に「… 最終ページ」）＋ 前後の矢印ボタンに変更しています。
     出力：template-parts/news-pager.php
     確認用：_preview-news-pager.html（ブラウザで直接開けます）

   ● .pager ではなく .newsPager という別クラスにしています
     記事詳細（single.php）が .pager / .pager2 を「一覧へ戻る」「BACK」ボタンで
     使っており、news.css の .pager ul li{float:left} や #btn-prev / #btn-next の
     指定と混ざらないようにするためです。

   ● 矢印は画像を使わず CSS で描いています
     旧サイトの bg-prev.gif / bg-next.gif は文字の横に付く小さな三角で、
     枠付きボタンには使えないため。高解像度端末でもぼやけません。
   -------------------------------------------------------------------------- */

.newsPager {
	padding-top: 45px;
	text-align: center;
}

/* 番号の個数で幅が変わるので、inline-block にして中央に置く */
.newsPager ul {
	display: inline-block;
	*display: inline; /* IE7 */
	zoom: 1;
	margin: 0;
	padding: 0;
	list-style: none;
}

.newsPager li {
	float: left;
	margin: 0 3px;
	padding: 0;
	list-style: none;
	font-size: 12px;
}

/* ---- ページ番号 ---- */

.newsPager--num a,
.newsPager--num .current {
	display: block;
	min-width: 30px;
	height: 30px;
	padding: 0 5px;
	line-height: 30px;
	text-align: center;
	text-decoration: none;
	color: #6b737a;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.newsPager--num a:hover {
	background-color: #f3f5f7;
	color: #3f4953;
	text-decoration: none;
}

/* 現在のページ（グレーの塗り） */
.newsPager--num .current {
	background-color: #e2e2e2;
	color: #3f4953;
}

/* 飛ばしたページを表す「…」（クリックできない） */
.newsPager--dots span {
	display: block;
	min-width: 16px;
	height: 30px;
	line-height: 26px;
	text-align: center;
	color: #b3b8bd;
}

/* ---- 前後の矢印ボタン（枠付き） ---- */

.newsPager--prev a,
.newsPager--next a {
	position: relative;
	display: block;
	width: 52px;
	height: 30px;
	border: 1px solid #d3cec8;
	background-color: #fff;
	text-decoration: none;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.newsPager--prev a:hover,
.newsPager--next a:hover {
	background-color: #f3f5f7;
}

/* ボタンの中の文字（「前のページへ」「次のページへ」）は
   読み上げ・検索用に残したまま、見た目上は隠します */
.newsPager--prev a span,
.newsPager--next a span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* 矢印（正方形の2辺だけ残して45度回転させた「く」の字） */
.newsPager--prev a:before,
.newsPager--next a:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	border-top: 1px solid #6b737a;
	border-right: 1px solid #6b737a;
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
}

.newsPager--next a:before {
	margin: -4px 0 0 -4px;
}

.newsPager--prev a:before {
	margin: -4px 0 0 -3px;
	-webkit-transform: rotate(-135deg);
	   -moz-transform: rotate(-135deg);
	    -ms-transform: rotate(-135deg);
	        transform: rotate(-135deg);
}

.newsPager--prev a:hover:before,
.newsPager--next a:hover:before {
	border-color: #3f4953;
}

/*--------------------------------------------------
    TB
--------------------------------------------------*/
@media screen and (max-width: 979px) {

	.newsPager {
		padding-top: 40px;
	}

}

/*--------------------------------------------------
    SP
--------------------------------------------------*/
@media screen and (max-width: 479px) {

	.newsPager {
		padding-top: 25px;
		padding-bottom: 5px;
	}

	/* 指で押せる高さ（32px）を確保しつつ、
	     [<] ＋ 番号5個 ＋ … ＋ 最終ページ ＋ [>]
	   の最大構成が iPhone SE 幅（320px）でも1行に収まるようにしています。
	   左右の余白と幅はこの計算で決まっているので、変更する場合は
	   320px 幅での折り返しをご確認ください */
	.newsPager li {
		margin: 0 1px;
		font-size: 13px;
	}

	.newsPager--num a,
	.newsPager--num .current {
		min-width: 28px;
		height: 32px;
		padding: 0 2px;
		line-height: 32px;
	}

	.newsPager--dots span {
		min-width: 14px;
		height: 32px;
		line-height: 28px;
	}

	.newsPager--prev a,
	.newsPager--next a {
		width: 32px;
		height: 32px;
	}

}