@charset "utf-8";
/* CSS Document */
.fs-1 {
	font-size: calc(1.375rem + 1.5vw) !important;
}

.fs-2 {
	font-size: calc(1.325rem + .9vw) !important;
}

.fs-3 {
	font-size: calc(1.3rem + .6vw) !important;
}

.fs-4 {
	font-size: calc(1.275rem + .3vw) !important;
}

.fs-5 {
	font-size: 1.25rem !important;
}

.fs-6 {
	font-size: 1rem !important;
}

.fs-5 {
	color: var(--primary-color);
}

.head-img {
	width: 100%;
    height: 320px;
    object-fit: cover;
	border-radius: 0.8rem 0.8rem 0 0;
	object-position: 50% 50%;
}

.sub-img {
	width: 100%;
    height: 320px;
    object-fit: cover;
	border-radius: 0 0 0.8rem 0.8rem;
	object-position: 50% 50%;
}

@media(max-width:767px){
	.ob-position-right {
	    object-position: 60% 50%;
	}
}

.workplace-h3 {
	color: #333;
	padding: 15px 8px;
    display: block;
    border-bottom: 6px solid #e3e3e3;
    position: relative;
}

.workplace-h3::before {
	content: "";
    background-color: var(--primary-color);
    width: 40px;
    height: 6px;
    position: absolute;
    bottom: -6px;
    left: 0;
}

.bi.bi-check2-circle.pr-1 {
	color: var(--primary-color);
}

.back {
	width: 25%;
}

@media(max-width:767px){
	.back {
		width: 100%;
	}
}

.frown span {
	color: #0a61bc;
}

.smile span {
	color: rgba(231,71,116,1.00);
}

.ex-button {
	width: 50%;
	margin: 0 auto;
}

@media(max-width:767px){
	.ex-button {
		width: 100%;
	}
}

.ex-button a {
	display: grid;
	text-align: center;
	grid-auto-flow: row;
	grid-row-gap: 0.3em;
	justify-items: center;
	padding: 1em;
	background-color: #F75940;
	color: #fff;
	text-decoration: none;
}

.download-form {
	text-align: center;
	padding: 1em;
	background-color: #F75940;
	color: #fff;
	text-decoration: none;
	border: 1px solid #F75940;
}

.ex-button:hover,
.download-form:hover {
	color: #fff;
	background-color: #f5391b;
	border-color: #f52e0f;
}

.hr {
	padding-top: 1.5rem;
	border-top: 2px solid #e3e3e3;
}

.orange {
	font-weight: bold;
	background: linear-gradient(transparent 80%, #FFCC00 20%);
}

.green {
	font-weight: bold;
	background: linear-gradient(transparent 80%, var(--primary-color)20%);
}

.dotted-outline {
	display: grid;
	position: relative;
	border: 1px dashed var(--primary-color);
	padding: 1.2rem;
	container-type: inline-size; /* コンテナタイプを定義 */
	container-name: outline-card; /* コンテナ名を定義 (任意) */
}

.dotted-outline-item {
	margin-bottom: 0;
	position: absolute;
	top: -0.9rem;
	left: 1.2rem;
	background-color: #fff;
	padding: 0 0.5rem;
	max-width: calc(100% - 2.4rem); /* 基本の最大幅 */
}

.dotted-outline ul {
    margin-top: 0.8rem; /* 基本のマージン */
}

/* outline-cardコンテナの幅が 345px 以下の場合 */
@container outline-card (max-width: 345px) {
    .dotted-outline ul {
        margin-top: 1rem; /* h5が2-3行になることを想定してさらに広げる */
    }
}

/* テスト用: 例えば常に適用されるように、または絶対に適用されないように */
@container outline-card (max-width: 2000px) { /* または (min-width: 10px) など */
    .dotted-outline ul {
        margin-top: 5rem; /* 分かりやすい値に変更 */
        background-color: yellow; /* 適用されているか視覚的に分かりやすくする */
    }
}

.dotted-outline-nohead {
	border: 1px dashed var(--primary-color);
	padding: 1.2rem;
}