@charset "UTF-8";

/**
 * 協賛企業詳細（single-sponsor.php）
 *
 * design/協賛企業詳細.svg（SP 390）と 協賛企業詳細-pc.svg（PC 1920）準拠。
 *
 *                    SP(390)                  PC(1920)
 *   コンテンツ幅      330                      1200（本文は 1004）
 *   企業名            25px w800 ls.05em        37px w800 ls.05em
 *   バッジ            81x24 rx12 / 14px #7b7b7b 226x47 rx23.5 / 20px
 *   ロゴ枠            330x205 罫#707070        412x256 罫#707070
 *     └ 中の画像      160x154 中央              200x194 中央
 *   事業内容          16px w700 ＋ 丸#eb6100 18px 1列  19px w700 ＋ 丸22px 2列
 *   紹介文            14px / 行送り 28px       18px / 行送り 32px
 *   区切り罫          —                        1200x2px #707070
 *   一覧に戻るボタン  235x54 r27 #0b53a4 ＋ 白丸左矢印(29px)
 *
 * ロゴは比率 1.61 の白フレームに contain で収める。
 * フレーム側で高さを予約するため、入稿画像の縦横比に関わらず CLS は発生しない。
 */

/* --- 土台 --------------------------------------------------------------- */
.sponsor-single {
	--sponsor-text: #535353;
	--sponsor-accent: #0b53a4;
	/* デザイン指定は #7b7b7b だが、白文字とのコントラストが 4.27:1 で
	   WCAG AA の 4.5:1 に届かない（バッジ文字は SP 14px で大きい文字扱いにもならない）。
	   見た目を保ったまま 4.61:1 になる最小限の調整をする。*/
	--sponsor-badge: #757575;
	--sponsor-marker: #eb6100;
	--sponsor-rule: #707070;

	background-color: #fffaef;
}

.sponsor-single__container {
	margin: 0 auto;
	padding-top: 30px;
}

/* PC デザインの実測値（1920 アートボード、中心 x=960）：
     区切り罫  360〜1560 … 1200px
     紹介文    556〜1364 … 808px
     ロゴ枠    754〜1166 … 412px
   見出し・ロゴ・本文はいずれも中央寄せ。*/
.sponsor-single__logo,
.sponsor-single__services,
.sponsor-single__content {
	margin-right: auto;
	margin-left: auto;
}

/* SVG: 紹介文は 808px。行長を押さえて可読性を保つ。*/
.sponsor-single__content {
	max-width: 808px;
}

/* デザインに見出しの描写は無いが、見出しの無いセクションは
   スクリーンリーダーの見出し一覧から文脈を失う。
   見た目を変えずに見出しを残す。*/
.sponsor-single__services-heading,
.sponsor-single__content-heading {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- 見出しブロック ----------------------------------------------------- */
.sponsor-single__header {
    max-width: 1004px;
   	margin-right: auto;
	margin-left: auto;
	margin-bottom: 36px;
	text-align: center;
}

/* SVG: SP 25px / PC 37px、いずれも w800 ls.05em */
.sponsor-single__title {
	margin: 0;
	color: var(--sponsor-text);
	font-weight: 800;
	font-size: clamp(1.563rem, 1.2rem + 1.8vw, 2.313rem);
	line-height: 1.5;
	letter-spacing: 0.05em;
}

/* --- ロゴ --------------------------------------------------------------- */
/* SVG: SP 330x205 / PC 412x256、いずれも白地に 1px 罫 #707070。
   比率を aspect-ratio で固定し、画像の縦横比に関わらず高さを予約して CLS を防ぐ。*/
.sponsor-single__logo {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	max-width: 412px;
	margin-top: 30px;
	padding: 16px;
	border: 1px solid var(--sponsor-rule);
	background-color: #ffffff;
	aspect-ratio: 330 / 205;
	justify-content: center;
	align-items: center;
}

/* SVG: 中のロゴは SP 160x154 / PC 200x194。
   入稿ロゴの比率は一定でないため contain で全体を収める。*/
.sponsor-single__logo-image {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* --- 事業内容 ----------------------------------------------------------- */
/* SVG: 16px(SP) / 19px(PC) w700、行頭に 18px(SP) / 22px(PC) のオレンジ丸。*/
.sponsor-single__services {
	margin-top: 30px;
}

.sponsor-single__services-list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 12px 40px;
}

.sponsor-single__service {
	position: relative;
	padding-left: 26px;
	color: var(--sponsor-text);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.6;
}

/* 丸は装飾なので疑似要素で描く。行頭の文字の中心に揃える。*/
.sponsor-single__service::before {
	position: absolute;
	top: calc(0.8em - 9px);
	left: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: var(--sponsor-marker);
	content: "";
}

/* --- 企業紹介文 --------------------------------------------------------- */
/* SVG: SP 14px / 行送り 28px、PC 18px / 行送り 32px。*/
.sponsor-single__content {
	margin-top: 30px;
	color: var(--sponsor-text);
	font-size: 14px;
	line-height: 28px;
}

.sponsor-single__content > :first-child {
	margin-top: 0;
}

.sponsor-single__content > :last-child {
	margin-bottom: 0;
}

.sponsor-single__content p {
	margin: 0 0 1.5em;
}

.sponsor-single__content a {
	color: var(--sponsor-accent);
	text-underline-offset: 0.2em;
}

.sponsor-single__content a:hover,
.sponsor-single__content a:focus-visible {
	text-decoration: none;
}

/* 本文中の写真（企業紹介画像）は横幅を超えさせない。*/
.sponsor-single__content img {
	height: auto;
	max-width: 100%;
}

/* 協賛フォーム（company_img1〜4）は紹介写真を最大 4 枚受け付け、
   エディタには 1 つの段落内に連続して挿入される。
   そのままだと 1 枚ごとに本文幅いっぱいの巨大な縦並びになるためグリッドで揃える。*/
.sponsor-single__content p:has(img) {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 入稿写真の縦横比は一定でないので、タイル側で比率を揃えて見た目を安定させる。*/
.sponsor-single__content p:has(img) img {
	width: 100%;
	height: 100%;
	border-radius: 4px;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

/* 画像が 1 枚だけの段落は引き伸ばさずに本来の比率で見せる。*/
.sponsor-single__content p:has(img:only-child) {
	grid-template-columns: minmax(0, 1fr);
}

.sponsor-single__content p:has(img:only-child) img {
	height: auto;
	aspect-ratio: auto;
}

.sponsor-single__content :is(ul, ol) {
	margin: 0 0 1.5em;
	padding-left: 1.5em;
}

.sponsor-single__content table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
	border-collapse: collapse;
}

.sponsor-single__content :is(th, td) {
	padding: 8px 12px;
	border: 1px solid #d6d0c4;
}

/* --- 区切り罫 ----------------------------------------------------------- */
/* SVG: PC のみ。本文と一覧に戻るボタンの間に入る 1200x2px の区切り線。*/
.sponsor-single__divider {
	display: none;
}

/* --- 一覧に戻る --------------------------------------------------------- */
/* SVG: 235x54 r27 #0b53a4、左に白丸(29px)の左向き矢印、文字 16px w700 ls.05em */
.sponsor-single__back {
	margin-top: 36px;
	text-align: center;
}
.suponsor-single__separator {
    display: none;
}

/* --- レスポンシブ ------------------------------------------------------- */
@media screen and (min-width: 768px) {
    .suponsor-single__separator {
        display: block;
    }
	.sponsor-single__container {
		padding-top: 56px;
	}

	.sponsor-single__logo {
		margin-top: 44px;
		padding: 24px;
	}

	.sponsor-single__services {
		margin-top: 46px;
	}

	/* SVG: 2 列。列の間隔は 304.5px ピッチで、左列 671 / 右列 975.5。
	   ブロック全体は本文幅に引き伸ばさず、内容に応じた幅で中央寄せにする。
	   （引き伸ばすと 2 列目が右に離れすぎてペアとして読めなくなる）*/
	.sponsor-single__services-list {
		width: fit-content;
		margin-inline: auto;
		grid-template-columns: repeat(2, minmax(0, auto));
		gap: 14px 40px;
		justify-content: center;
	}

	.sponsor-single__service {
		padding-left: 31px;
		font-size: 19px;
	}

	.sponsor-single__service::before {
		top: calc(0.8em - 11px);
		width: 22px;
		height: 22px;
	}

	/* SVG: PC は 18px / 行送り 32px */
	.sponsor-single__content {
		margin-top: 44px;
		font-size: 18px;
		line-height: 32px;
	}

	.sponsor-single__divider {
		display: block;
		margin: 46px 0 0;
		border: none;
		border-top: 2px solid var(--sponsor-rule);
	}
}

@media screen and (max-width: 767px) {
	.sponsor-single__container {
		padding-top: 22px;
	}

	/* SP は画面幅が狭いため紹介写真を 1 列で積む。*/
	.sponsor-single__content p:has(img) {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	/* パンくずの最終要素（長い企業名）は 1 行で省略して折り返しを防ぐ */
	.sponsor-single .breadcrumb_list {
		align-items: center;
	}

	.sponsor-single .breadcrumb_list .page-link_text {
		flex: 0 0 auto;
		height: auto;
	}

	.sponsor-single .breadcrumb_list .page-link_text[aria-current="page"] {
		overflow: hidden;
		flex: 1 1 auto;
		min-width: 0;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}