/**
 * トップページのブロック
 *
 * 収録用（live.css）とは別物。あちらは撮影用に暗い配色・vh基準だが、
 * こちらはサイト本体に馴染む明るい配色で、スマホでも読めることを優先する。
 */

.ipof-hero,
.ipof-now,
.ipof-guide { margin: 0 0 2.4em; }

/* ---- ヒーロー ---- */
.ipof-hero {
	padding: 1.6em 1.4em;
	border-radius: 14px;
	background: linear-gradient(135deg, #1b2547 0%, #2b3358 100%);
	color: #fff;
}

.ipof-hero__top { display: flex; gap: .9em; align-items: flex-start; margin: 0 0 1.1em; }

.ipof-hero__icon {
	flex: 0 0 auto;
	width: 54px; height: 54px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .35);
	background: #fff center/cover no-repeat;
}

.ipof-hero__lead { margin: 0; font-size: 1.02em; line-height: 1.75; color: #e6ebff; }
.ipof-hero__lead b { color: #ffc07a; }
.ipof-hero__lead small { display: block; margin-top: .4em; font-size: .82em; color: #b9c1de; }

.ipof-hero__counts { display: flex; gap: .8em; flex-wrap: wrap; }

.ipof-count {
	flex: 1 1 0;
	min-width: 6.5em;
	padding: .8em .6em;
	border-radius: 10px;
	background: rgba(255, 255, 255, .08);
	text-align: center;
}
.ipof-count b {
	display: block;
	font-size: 2.1em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.ipof-count span { font-size: .82em; color: #ccd2e6; }
.ipof-count.-open b { color: #5fe0a0; }
.ipof-count.-soon b { color: #ffc07a; }
.ipof-count.-all b { color: #fff; }

.ipof-hero__note { margin: 1em 0 0; font-size: .88em; color: #ccd2e6; }

/* ---- 見出し ---- */
.ipof-h2 {
	margin: 0 0 .8em;
	padding: 0 0 .35em;
	font-size: 1.28em;
	font-weight: 700;
	border-bottom: 3px solid #2b3358;
}
.ipof-h2::before, .ipof-h2::after { content: none; }

/* ---- 銘柄カード ---- */
.ipof-cards {
	list-style: none;
	margin: 0 0 1.2em;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1em;
}

.ipof-card { margin: 0; }

.ipof-card__link {
	display: block;
	height: 100%;
	padding: 1.1em 1.2em 1.2em;
	border: 1px solid #e2e6f0;
	border-left: 5px solid #b9c1de;
	border-radius: 12px;
	background: #fff;
	text-decoration: none !important;
	color: inherit;
	transition: box-shadow .15s ease, transform .15s ease;
}
.ipof-card__link:hover {
	box-shadow: 0 6px 18px rgba(27, 37, 71, .12);
	transform: translateY(-2px);
}
.ipof-card.-open .ipof-card__link { border-left-color: #26a76c; }
.ipof-card.-soon .ipof-card__link { border-left-color: #e8912a; }

.ipof-card__head { display: flex; align-items: center; gap: .5em; margin: 0 0 .5em; }

.ipof-card__state {
	padding: .2em .7em;
	border-radius: 999px;
	font-size: .76em;
	font-weight: 700;
	background: #eef1f7;
	color: #56607d;
}
.ipof-card.-open .ipof-card__state { background: #e3f6ec; color: #1c7f52; }
.ipof-card.-soon .ipof-card__state { background: #fdf0dd; color: #a35f10; }

.ipof-card__market { font-size: .8em; color: #6b7490; }

.ipof-card__name { margin: 0 0 .35em; font-size: 1.08em; font-weight: 700; line-height: 1.45; }

.ipof-card__days { margin: 0 0 .7em; font-size: .88em; color: #56607d; }
.ipof-card__days b { margin-left: .3em; font-size: 1.15em; color: #c0392b; }
.ipof-card.-soon .ipof-card__days b { color: #a35f10; }

.ipof-card__facts {
	margin: 0 0 .9em;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .35em .9em;
	font-size: .9em;
}
.ipof-card__facts dt { color: #6b7490; white-space: nowrap; }
.ipof-card__facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.ipof-card__facts dd.-cap { font-weight: 700; font-size: 1.12em; }
.ipof-card__facts dd.-cap small { margin-left: .15em; font-size: .7em; color: #6b7490; }

.ipof-card__more {
	display: inline-block;
	font-size: .86em;
	font-weight: 700;
	color: #2b3358;
}
.ipof-card__more::after { content: " →"; }

.ipof-more { margin: 0; text-align: right; }
.ipof-more a { font-weight: 700; }

/* ---- はじめての方へ ---- */
.ipof-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .7em; }

.ipof-step a {
	display: flex;
	align-items: center;
	gap: .9em;
	padding: .9em 1.1em;
	border: 1px solid #e2e6f0;
	border-radius: 12px;
	background: #fff;
	text-decoration: none !important;
	color: inherit;
}
.ipof-step a:hover { background: #f7f9fd; }

.ipof-step__no {
	flex: 0 0 auto;
	width: 2em; height: 2em;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: #2b3358;
	color: #fff;
	font-weight: 700;
}
.ipof-step__body b { display: block; font-size: 1.02em; }
.ipof-step__body small { color: #6b7490; }

.ipof-note { color: #6b7490; }

/* ---- データで見るIPO ---- */
/* 4枚を3+1に折り返すと座りが悪いので、2列で2段に置く */
.ipof-data__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7em; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.ipof-data__item a {
	display: block;
	height: 100%;
	padding: .95em 1.1em;
	border: 1px solid #e2e6f0;
	border-top: 4px solid #2b3358;
	border-radius: 10px;
	background: #fff;
	text-decoration: none !important;
	color: inherit;
}
.ipof-data__item a:hover { background: #f7f9fd; }
.ipof-data__item b { display: block; font-size: 1em; line-height: 1.5; }
.ipof-data__item small { display: block; margin-top: .3em; color: #6b7490; }

/* ---- 収録用リンク ----
 * 撮影のための道具なので、読み物の邪魔をしない大きさ・色にする。
 * 管理画面にログインしないと辿り着けないのが面倒、という理由で置いている。
 */
.ipof-livelinks {
	margin: 2.5em 0 0;
	padding-top: 1em;
	border-top: 1px dashed #d8dee9;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4em .9em;
	font-size: .82em;
}
.ipof-livelinks__label {
	padding: .1em .6em;
	border-radius: 999px;
	background: #eef1f7;
	color: #8b93a8;
	font-size: .9em;
}
.ipof-livelinks a { color: #8b93a8; text-decoration: none; }
.ipof-livelinks a:hover { color: #2b3358; text-decoration: underline; }

/* ---- スマホ ---- */
@media (max-width: 599px) {
	.ipof-hero { padding: 1.2em 1em; }
	/* 3つを1行に収める。2+1で折り返すと座りが悪い */
	.ipof-count { min-width: 0; padding: .7em .3em; }
	.ipof-count b { font-size: 1.55em; }
	.ipof-count span { font-size: .74em; }
	.ipof-hero__icon { width: 44px; height: 44px; }
	.ipof-cards { grid-template-columns: 1fr; }
	.ipof-card__facts { grid-template-columns: 1fr; gap: .15em; }
	.ipof-card__facts dt { font-size: .85em; }
}


/* ============================================================
 *  企業概要ページ（[ipo_profile]）
 * ============================================================ */

.ipop-picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6em .9em;
	margin: 0 0 1.8em;
	padding: 1em 1.2em;
	border-radius: 12px;
	background: #f3f6fb;
}
.ipop-picker label { font-weight: 700; }
.ipop-picker select {
	flex: 1 1 18em;
	max-width: 100%;
	padding: .5em .7em;
	border: 1px solid #c9d2e3;
	border-radius: 8px;
	background: #fff;
	font-size: 1em;
}

.ipop__name { margin: 0 0 .5em; font-size: 1.5em; font-weight: 700; line-height: 1.4; }
.ipop__name::before, .ipop__name::after { content: none; }

/* チップは間隔を空ける。指定が無いと「グロース市場607A上場予定…」と繋がって読める */
.ipop__chips { display: flex; flex-wrap: wrap; gap: .5em; margin: 0 0 1.6em; }
.ipop__chips span {
	padding: .25em .8em;
	border-radius: 999px;
	background: #eef1f7;
	color: #56607d;
	font-size: .85em;
	white-space: nowrap;
}

.ipop__h3 {
	margin: 1.8em 0 .6em;
	padding: 0 0 .3em;
	font-size: 1.12em;
	font-weight: 700;
	border-bottom: 2px solid #2b3358;
}
.ipop__h3::before, .ipop__h3::after { content: none; }

.ipop__biz { margin: 0; line-height: 1.9; }
.ipop__src { margin: .5em 0 0; font-size: .82em; color: #8b93a8; }

.ipop__facts { display: grid; grid-template-columns: auto 1fr; gap: .5em 1.2em; margin: 0; }
.ipop__facts dt { color: #6b7490; white-space: nowrap; }
.ipop__facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.ipop__facts dd b { font-size: 1.25em; }

.ipop__lead { margin: 0 0 .8em; font-weight: 700; }
.ipop__lead span {
	display: inline-block;
	margin-right: .7em;
	padding: .2em .7em;
	border-radius: 6px;
	background: rgba(255, 192, 122, .22);
	color: #a35f10;
	font-size: .8em;
	vertical-align: middle;
}

.ipop__chiplist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5em; }
.ipop__chiplist li {
	padding: .35em .8em;
	border-radius: 8px;
	background: #eef1f7;
	font-size: .9em;
	white-space: nowrap;
}
.ipop__chiplist li.-lead { background: #fdf0dd; color: #a35f10; font-weight: 700; }

.ipop__more { margin: 1.8em 0 0; }
.ipop__more a { font-weight: 700; }

@media (max-width: 599px) {
	.ipop__facts { grid-template-columns: 1fr; gap: .15em; }
	.ipop__facts dt { font-size: .88em; margin-top: .5em; }
}