/*
 * iaas_paas_saas_layer_demo.css
 * IaaS・PaaS・SaaSの違い｜体験デモ（責任範囲レイヤーシミュレーター）
 * 既存サイトのクラスと衝突しないよう ipsl- を接頭辞にしています。
 */

#ipsl-demo {
	box-sizing: border-box;
	margin: 1.4rem 0;
	padding: 1rem 1.1rem 2.2rem;
	background: #eef1f6;
	border-radius: 1rem;
	scroll-margin-top: 90px;
}

#ipsl-demo *,
#ipsl-demo *::before,
#ipsl-demo *::after {
	box-sizing: border-box;
}

.ipsl-container {
	max-width: 640px;
	margin: 0 auto;
}

.ipsl-head {
	text-align: center;
	padding-top: 1.6rem;
	margin-bottom: 1.4rem;
}

.ipsl-badge {
	display: inline-block;
	padding: .6rem 2rem;
	border-radius: 999px;
	background: #2f4f8f;
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .06em;
	margin-bottom: .6rem;
	box-shadow: 0 0 0 0 rgba(47, 79, 143, .45);
	animation: ipsl-badge-pulse 2.2s ease-out infinite;
}

@keyframes ipsl-badge-pulse {
	0% { box-shadow: 0 0 0 0 rgba(47, 79, 143, .45); }
	70% { box-shadow: 0 0 0 .55rem rgba(47, 79, 143, 0); }
	100% { box-shadow: 0 0 0 0 rgba(47, 79, 143, 0); }
}

h3.ipsl-headline {
	display: block;
	background: none;
	margin: .7rem auto 0;
	max-width: 32rem;
	font-size: 1.24rem;
	font-weight: 800;
	line-height: 1.6;
	color: #12233f;
}

.ipsl-headline__mark {
	color: #2f4f8f;
}

.ipsl-lead {
	font-size: .86rem;
	color: #555;
	line-height: 1.9;
	margin: .6rem auto 0;
	max-width: 34rem;
}

.ipsl-panel {
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 .6rem 1.8rem rgba(0, 30, 70, .08);
	padding: 1.6rem 1.3rem 1.4rem;
}

.ipsl-tabs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .5rem;
	margin-bottom: 1.2rem;
}

.ipsl-tab {
	appearance: none;
	border: .1rem solid #d3dbe8;
	background: #f5f7fb;
	color: #445;
	padding: .55rem .3rem;
	border-radius: .5rem;
	font-size: .8rem;
	font-weight: 700;
	cursor: pointer;
}

.ipsl-tab:hover {
	background: #eaeef7;
}

.ipsl-tab.is-active {
	background: #2f4f8f;
	border-color: #2f4f8f;
	color: #fff;
}

.ipsl-stack {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
	margin-bottom: 1rem;
}

/* 物理層を起点に、依存関係の近いレイヤー同士を同じ行にペアリングする */
.ipsl-layer[data-layer="physical"] { order: 1; }
.ipsl-layer[data-layer="virtual"]  { order: 2; }
.ipsl-layer[data-layer="os"]       { order: 3; }
.ipsl-layer[data-layer="runtime"]  { order: 4; }
.ipsl-layer[data-layer="app"]      { order: 5; }
.ipsl-layer[data-layer="data"]     { order: 6; }

.ipsl-layer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .35rem;
	padding: .6rem .75rem;
	border-radius: .5rem;
	border: .1rem solid #e2e6ee;
	background: #f4f5f8;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.ipsl-layer__name {
	font-size: .78rem;
	font-weight: 700;
	color: inherit;
	line-height: 1.4;
}

.ipsl-layer__owner {
	font-size: .68rem;
	font-weight: 800;
	padding: .18rem .55rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .6);
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease;
}

.ipsl-layer.is-self {
	background: #eef1f6;
	border-color: #b9c2d6;
	color: #2c3550;
}

.ipsl-layer.is-self .ipsl-layer__owner {
	background: #2c3550;
	color: #fff;
}

.ipsl-layer.is-vendor {
	background: #eafaf0;
	border-color: #9fdcb8;
	color: #10633a;
}

.ipsl-layer.is-vendor .ipsl-layer__owner {
	background: #1f9d5c;
	color: #fff;
}

.ipsl-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin-bottom: .9rem;
	font-size: .74rem;
	color: #556;
}

.ipsl-legend__item {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

.ipsl-legend__dot {
	width: .7rem;
	height: .7rem;
	border-radius: 999px;
	display: inline-block;
}

.ipsl-legend__dot--self {
	background: #2c3550;
}

.ipsl-legend__dot--vendor {
	background: #1f9d5c;
}

.ipsl-summary {
	font-size: .82rem;
	color: #334;
	line-height: 1.9;
	background: #f5f7fb;
	border-left: .25rem solid #a9bce0;
	border-radius: .4rem;
	padding: .8rem .9rem;
	margin: 0;
	min-height: 3.4rem;
}

.ipsl-tasks {
	margin-top: 1rem;
}

.ipsl-tasks__hint {
	font-size: .76rem;
	color: #778;
	line-height: 1.8;
	margin: 0 0 .6rem;
}

.ipsl-tasks__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
}

.ipsl-task {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	padding: .55rem .65rem;
	border-radius: .5rem;
	background: #f7f8fb;
	border: .08rem solid #e6e9f0;
}

.ipsl-task__freq {
	flex-shrink: 0;
	font-size: .66rem;
	font-weight: 800;
	padding: .18rem .5rem;
	border-radius: .35rem;
	color: #fff;
	white-space: nowrap;
}

.ipsl-task__freq--periodic {
	background: #4a6fa5;
}

.ipsl-task__freq--spot {
	background: #a5764a;
}

.ipsl-task__label {
	flex-basis: 100%;
	order: 3;
	font-size: .76rem;
	color: #334;
	line-height: 1.6;
}

.ipsl-task__owner {
	flex-shrink: 0;
	font-size: .7rem;
	font-weight: 800;
	padding: .2rem .55rem;
	border-radius: 999px;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease;
}

.ipsl-task.is-self .ipsl-task__owner {
	background: #2c3550;
	color: #fff;
}

.ipsl-task.is-vendor .ipsl-task__owner {
	background: #1f9d5c;
	color: #fff;
}

@media screen and (max-width: 640px) {
	#ipsl-demo { padding: 1rem .8rem 1.8rem; border-radius: .7rem; }
	.ipsl-panel { padding: 1.1rem .9rem 1rem; border-radius: .7rem; }
	.ipsl-badge { padding: .45rem 1.2rem; font-size: 1.05rem; white-space: normal; text-align: center; }
	.ipsl-tabs { grid-template-columns: repeat(2, 1fr); }
	.ipsl-stack { grid-template-columns: 1fr; }
	.ipsl-tasks__list { grid-template-columns: 1fr; }
}