/* カラー変数定義 */
:root {
	--text-color-normal: #333333;
	--accent-color-1: #00A95F;
	--accent-color-2: #F0831E;
	--yellow-color: #FFF700;
	--white-color: #ffffff;
	--light-gray-color: #f0f0f0;
	--graybox-color: #f6f5f5;
	/* セクションの背景色 */
	--border-gray: #e0e0e0;
	--primary-blue-color: #0054A7;
	/* ローダーで使用している青 */
	--background-light-color: var(--white-color);
	--kv-background-fallback-color: #f0f4f8;
}

/* 基本のフォント設定 */
body {
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", "ヒラギノ角ゴシック", Meiryo, "メイリオ", sans-serif;
	line-height: 1.6;
	color: var(--text-color-normal);
	background-color: var(--background-light-color);
	/* 背景色を少し設定 */

}

.sp_show,.mid_show{
	display: none;
}

/* PC向けフォント設定 (768px以上) */
h1,
.h1 {
	/* クラスでも指定できるように .h1 も追加 */
	font-size: 32px;
	font-weight: 600;
	line-height: 1.5;
	/* 150% */
}

h2,
.h2 {
	width: 100%;
	text-align: center;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.5;
	position: relative;
	display: inline-block;
	margin: 45px 0 27px;
}

h2::after {
	content: "";
	width: 52px;
	height: 5px;
	background-color: var(--accent-color-1);
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	bottom: -19px;
}

.button_green {
	min-width: 22rem;
	height: 84px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 20px;
	background-color: var(--accent-color-1);
	color: var(--white-color);
	text-decoration: none;
	border-radius: 50px;
	transition: all 0.3s ease;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.5;
	position: relative;
}

.button_green:hover {
	opacity: 0.8;
}

.button_green::after {
	content: '';
	background: url(../img/btn_white_arr.png) no-repeat center center;
	width: 21px;
	height: 19px;
	position: absolute;
	right: 6%;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s ease;
}

.button_green:hover::after {
	right: 5%;
}

.button_white {
	height: 43px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 20px;
	background-color: var(--white-color);
	color: var(--text-color-normal);
	border: 1px solid var(--text-color-normal);
	text-decoration: none;
	border-radius: 50px;
	transition: all 0.3s ease;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.5;
	position: relative;
	margin: 8px 13px;
}

.button_white:hover {
	opacity: 0.8;
	/* ホバー時の透明度を少し下げる */
}

.button_white::after {
	content: '';
	background: url(../img/btn_gray_arr.png) no-repeat center center;
	width: 8%;
	height: 27%;
	position: absolute;
	right: 6%;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s ease;
	background-size: contain;
}

.button_white:hover::after {
	right: 5%;
}

/* ローディングアニメーション */
#loader-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--white-color);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	transition: opacity 0.5s ease-out, visibility 0.5s ease-out 0.5s;
	/* visibilityのtransitionにdelayを設定 */
}

.loader {
	border: 8px solid var(--light-gray-color);
	/* Light grey */
	border-top: 8px solid var(--primary-blue-color);
	/* Blue */
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* ローディング完了後のスタイル */
#loader-wrapper.loaded {
	opacity: 0;
	visibility: hidden;
}

header {
	background-color: var(--white-color);
	border-radius: 0 0 16px 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 388px;
	height: 54px;
	z-index: 1000;
	/* ヘッダーを常に最前面に表示 */
	padding: 0 20px;
	font-weight: 800;
}

header p {
	font-style: normal;
	font-weight: 600;
	font-size: 20px;
	line-height: 150%;
	color: var(--text-color-normal);
	padding: 0;
	margin: 13px 4px;
}

#main-content {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

section {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

section>div {
	width: 100%;
	box-sizing: border-box;
}

#key-visual {
	background-image: url('../img/kv_bg.png');
	background-color: var(--kv-background-fallback-color);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	aspect-ratio: 1440 / 646;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	transition: aspect-ratio 0.3s ease;
}

.kv-content-wrapper {
	max-width: 1432px;
	width: 100%;
	height: 100%;
	position: relative;
}

.kv-content-wrapper img {
	transition: width 0.3s ease;
}

.kv-title-image {
	position: absolute;
	width: 54.4%;
	z-index: 1000;
	top: 18%;
	left: 12%;
}

.kv-eyecatch-image {
	width: 30.4%;
	position: absolute;
	z-index: 900;
	top: 1.8%;
	left: 57.3%;
}

.kv-desk-image {
	width: 62%;
	position: absolute;
	z-index: 900;
	bottom: 7%;
	left: 50%;
	transform: translateX(-50%);
	transition: width 0.3s ease;
}

.kv-description-box {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 16px;
	width: 62%;
	position: absolute;
	top: 74%;
	left: 50%;
	padding: 18px 24px;
	transform: translate(-50%, 0);
}

.kv-description-box p {
	font-style: normal;
	font-weight: 600;
	font-size: 20px;
	line-height: 150%;
}

.kv-description-box p span {
	font-size: 24px;
	color: var(--accent-color-1);
}

.kv-bottom-image {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 800;
	padding: 0;
	transform: translate(0, 30%);
	margin: 0;
}

/* アクセシビリティのための非表示クラス */
.visually-hidden {
	position: absolute !important;
	/* !importantで他のスタイルを上書き */
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	/* IE6, IE7対策 */
	white-space: nowrap;
	/* テキストが折り返して表示されるのを防ぐ */
}

#monitor-period {
	margin: 0 0 3px;
}

#monitor-period .monitor-piriod_container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 20px 0 0;
}

.gray_box {
	background: var(--graybox-color);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 768px;
	padding: 38px 20px 34px;
}

#monitor-period h3 {
	font-style: normal;
	font-weight: 600;
	font-size: 32px;
	line-height: 150%;
	text-align: center;
	margin: 0;
	color: var(--text-color-normal);
}

#monitor-period h4 {
	font-style: normal;
	font-weight: 600;
	font-size: 32px;
	line-height: 150%;
	text-align: center;
	color: var(--accent-color-2);
	margin: 29px 0 34px;
}

#monitor-period p {
	font-style: normal;
	font-weight: 300;
	font-size: 14px;
	line-height: 150%;
	margin: 16px 53px;
	color: var(--text-color-normal);
}

.monitor_btn {
	width: 100%;
	margin: 8px;
	padding: 0 130px;
}

#offer-details,
#notification-area {
	background-image: url('../img/bk_border.png');
	background-repeat: repeat;
	position: relative;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

#offer-details>div {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	;
}

.bg_tptwht {
	background: rgba(255, 255, 255, 0.4);
	margin: 37px 0 0;
	padding: 0px 0 59px;
}

.offer_image01 {
	padding: 17px 12% 30px;
	/* max-width: 1080px; */
	/* width: 80%; */
}

.offer_image01 img {
	max-width: 1095px;
}

.offer_detail02 {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 649px;
	background-color: var(--white-color);
}

#offer-details .offer_detail02 h3 {
	font-style: normal;
	font-weight: 600;
	font-size: 24px;
	line-height: 150%;
	color: var(--accent-color-1);
	position: relative;
	margin: 37px 0 28px;
}

#offer-details .offer_detail02 h3::after {
	content: "";
	width: 21rem;
	height: 2px;
	position: absolute;
	bottom: -3px;
	left: 50%;
	background-color: var(--accent-color-1);
	transform: translate(-50%, 0);
}

#offer-details h4 {
	width: 100%;
	font-style: normal;
	font-weight: 600;
	font-size: 20px;
	line-height: 150%;
	text-align: center;
	color: var(--text-color-normal);
	margin: 43px 0 1px;
	padding: 0;
}

.offer_note {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.offer_note ul {
	width: 768px;
	list-style-type: none;
	padding: 0;
}

.offer_note li {
	position: relative;
	padding-left: 1em;
	line-height: 1.5;
	margin-bottom: 0.25rem;
}

.offer_note li::before {
	content: '\00B7';
	position: absolute;
	left: 0;
	line-height: 1.5;
}

#offer-details .offer_detail02>p {
	padding: 0 13% 12px;
}

#offer-details .offer_detail02>img {
	padding: 0 13% 41px;
}

#application-conditions {
	margin: 19px 0 0;
}

#application-conditions>div {
	width: 100%;
	display: flex;
	justify-content: center;
}

#application-conditions p {
	font-style: normal;
	font-weight: 600;
	font-size: 20px;
	line-height: 150%;
	text-align: center;
	padding: 23px 0 0;
}

#application-conditions ol {
	font-style: normal;
	font-weight: 300;
	font-size: 16px;
	line-height: 150%;
	width: 581px;
	margin: 14px 0;
	padding: 0;
	/* padding: 0 2rem; */
}

#application-conditions ol small {
	font-size: 16px;
	line-height: 150%;
}

#application-conditions ol li {
	margin-bottom: 0.4rem;
}

#application-conditions ul {
	list-style-type: none;
	padding: 0;
}

#application-conditions ul li {
	position: relative;
	padding-left: 1em;
	margin: 0;
}

#application-conditions ul li::before {
	content: '\00B7';
	position: absolute;
	left: 0;
	line-height: 1.5;
}

#application-deadline {
	margin: 0 0 8px;
}

#application-deadline>div {
	width: 100%;
	display: flex;
	justify-content: center;
}

#application-deadline .gray_box {
	margin: 18px 0 58px;
	padding: 33px 20px 24px;
}

#application-deadline .gray_box h3 {
	font-style: normal;
	font-weight: 600;
	font-size: 32px;
	line-height: 150%;
	width: 100%;
	text-align: center;
	margin: 0;
}

#application-deadline .gray_box>div {
	width: 100%;
	padding: 25px 0 0;
	display: flex;
	justify-content: center;
}

.ddl_btn .button_green {
	min-width: 28rem;
}

#application-deadline .gray_box .ddl_note {
	width: 100%;
	text-align: center;
	padding: 13px 0;
}

#application-deadline .gray_box .ddl_note p {
	margin: 0;
	padding: 0;
}

#notification-area {
	margin: 0;
	padding: 0 0 25px;
}

#notification-area>div {
	width: 100%;
	display: flex;
	justify-content: center;
	;
}

#notification-area h3 {
	font-weight: 600;
	font-size: 24px;
	line-height: 150%;
	text-align: center;
	color: var(--yellow-color);
	background: var(--accent-color-1);
	width: 100%;
	margin: 58px 0 0;
	width: 69%;
	padding: 8px 0;
}

#notification-area ul {
	font-style: normal;
	font-weight: 600;
	font-size: 20px;
	line-height: 150%;
	margin: 14px 0;
}

.notific-imgs_outer {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.notific-imgs {
	width: 69%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 20px;
}

#notification-area p {
	font-style: normal;
	font-weight: 600;
	font-size: 20px;
	line-height: 150%;
	text-align: center;
	margin: 17px 0;
}

.notific-tools_outer {
	margin: 51px 12%;
}

.notific-tools {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	padding: 0 0 37px;
	background: var(--white-color);
}

#notification-area .notific-tools h3 {
	width: 92%;
	color: var(--white-color);
	background: var(--primary-blue-color);
	text-align: center;
	margin: 41px 0 40px;
}

.notific-tools_info {
	display: flex;
	justify-content: center;
	width: 107%;
	background: var(--white-color);
	gap: 18px;
	flex-wrap: wrap;
}

.tools_info_items {
	width: calc(30% - 25px);
}

.dot-column {
	width: 10px;
	/* 必要に応じて調整 */
	background-image: url('../img/dot_green.png');
	/* デザイナー支給の1pxドット */
	background-repeat: repeat-y;
	background-position: center;
}

#application-link {
	margin: 54px 0 74px;
}

#application-link h2 {
	margin: 0 0 19px;
}

#application-link h2 span {
	color: var(--accent-color-2);
}

#application-link h2::after {
	display: none;
}

#application-link .button_green {
	width: 28rem;
}

/* フッターの電話番号リンクの基本スタイル（PC向け） */
footer {
	padding: 32px 0;
	text-align: center;
	border-top: var(--border-gray) 1px solid;
	background-color: var(--white-color);
}

footer>div {
	width: 100%;
	display: flex;
	justify-content: center;
}

footer p {
	font-weight: 600;
	font-size: 24px;
	line-height: 150%;
	margin: 0;
	color: var(--text-color-normal);
}

.footer-tel {
	color: inherit;
	/* 親要素の文字色を継承 */
	text-decoration: none;
	/* 下線を消す */
	pointer-events: none;
	/* クリックイベントを無効化 */
}

.footer-tels {
	font-size: 21px;
	margin: 7px 0;
}

footer ul,
footer li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

footer ul {
	font-size: 14px;
	text-align: left;
}

footer li {
	padding: 0 1em;
	position: relative;
}

footer li::before {
	content: '\00B7';
	position: absolute;
	left: 0;
	line-height: 1.5;
}

.footer_note {
	font-weight: 300;
	font-size: 14px;
	margin: 4px 0;
}

@media (min-width: 768px) and (max-width: 1120px) {
	.button_white {
		font-size: 1.4vw;
	}
}

@media screen and (max-width: 1050px) {
	.kv-content-wrapper img {
		transition: width 0.3s ease;
	}

	.kv-title-image {
		width: 47%;
		top: 19%;
	}

	.kv-desk-image {
		width: 75%;

	}
}

/* SP向けフォント設定 (767px以下) */
@media screen and (max-width: 767px) {
	.sp_show {
		display: block;
	}

	h1,
	.h1 {
		font-size: 24px;
	}

	h2,
	.h2 {
		font-size: 26px;
		margin: 41px 0 25px;
	}

	h3,
	.h3 {
		font-size: 18px;
	}

	#key-visual {
		background-image: url('../img/kv_bg_sp.png');
		aspect-ratio: 375 / 820;
	}

	header {
		width: 352px;
		height: 50px;
	}

	header p {
		font-size: 18px;
		margin: 11px 3px;
	}

	.kv-content-wrapper {
		max-width: 550px;
	}

	.kv-title-image,
	.kv-eyecatch-image,
	.kv-desk-image {
		left: 50%;
		transform: translateX(-50%);
	}

	.kv-title-image {
		width: 93%;
		top: 10%;
	}

	.kv-eyecatch-image {
		width: 69%;
		top: 33%;
	}

	.kv-desk-image {
		width: 92%;
		bottom: 6%;
	}

	.gray_box {
		padding: 42px 15px 34px;
		width: 100%;
	}

	.monitor_btn {
		width: 100%;
		margin: 11px 0;
		padding: 0;
	}

	#monitor-period .monitor-piriod_container {
		padding: 20px;
	}

	#monitor-period h3 {
		font-size: 26px;
		margin: 0;
		color: var(--text-color-normal);
	}

	#monitor-period p {

		margin: 16px 0;
		color: var(--text-color-normal);
	}

	.button_green {
		min-width: unset;
		height: 78px;
		padding: 0;
		font-size: 19px;
		padding-right: 11px;
	}

	.button_green::after {
		width: 18px;
		height: 15px;
		right: 19px;
		background-size: contain;
	}

	#monitor-period h4 {
		font-size: 26px;
		margin: 11px 0 36px;
	}

	.offer_image01 {
		padding: 22px 3% 32px;
		max-width: 500px;
	}

	.offer_detail02 {
		width: 100%;
		margin: 0 14px;
		max-width: 540px;
	}

	#offer-details .offer_detail02 h3 {
		font-size: 20px;
		margin: 37px 0 28px;
	}

	#offer-details .offer_detail02 h3::after {
		width: 19rem;
	}

	#offer-details .offer_detail02>p {
		padding: 0 7% 12px;
	}

	#offer-details .offer_detail02>img {
		padding: 1px 19px 40px;
	}

	#offer-details h4 {
		font-size: 18px;
	}

	.offer_note {
		padding: 0 24px;
	}

	.offer_note li {
		margin-bottom: 0.38rem;
	}

	#application-conditions {
		margin: 11px 0 0;
	}

	#application-conditions p {
		font-size: 18px;
		padding: 23px 0px 0;
		line-height: 144%;
		margin: 0 17px;
	}

	#application-conditions ol {
		padding: 0 17px 0 37px;
	}

	#application-deadline .gray_box h3 {
		font-size: 26px;
	}

	#application-deadline .gray_box {
		width: 93%;
	}

	#application-deadline .gray_box>div {
		padding: 28px 0 7px;
	}

	.ddl_btn .button_green {
		min-width: auto;
		width: 19rem;
	}

	#notification-area {
		margin: 0;
		padding: 0 15px 28px;
	}

	#notification-area h3 {
		font-size: 20px;
		width: 100%;
		margin: 54px 0 0;
		padding: 8px 0;
	}

	#notification-area ul {
		font-size: 18px;
		margin: 15px 0;
		padding: 0 0 0 26px;
	}

	.notific-imgs_outer {
		width: 100%;
	}

	#notification-area p {
		font-size: 18px;
	}

	.notific-imgs {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 20px;
	}

	.notific-imgs2 {
		padding: 0 33px;
	}

	.notific-tools_outer {
		margin: 31px 0;
		max-width: 400px;
	}

	.notific-imgs {
		grid-template-columns: 1fr;
		max-width: 400px;
	}

	.notific-imgs_another {
		max-width: 300px;
	}

	.tools_info_items {
		width: 100%;
		padding: 0 27px;
	}

	.button_white {
		height: 43px;
		font-size: 16px;
		padding: 10px 0;
		margin: 23px 0px 8px;
	}

	.button_white::after {
		width: 21px;
		height: 19px;
		position: absolute;
		right: 29px;
		top: 50%;
		transform: translateY(-50%);
		transition: all 0.3s ease;
	}

	.dot-column {
		width: 100%;
		margin: 3px 20px;
		height: 15px;
		background-image: url('../img/dot_green_hor.png');
		background-repeat: repeat-x;
		background-position: center;
	}

	#application-link {
		margin: 54px 0 75px;
		padding: 0 12px;
	}

	#application-link .gray_box {
		padding: 33px 0 33px;
		width: 100%;
	}

	#application-link h2 {
		font-size: 20px;
		margin: 0;
		padding: 0 0 24px;
	}

	#application-link .button_green {
		width: 19rem;
	}

	footer p {
		font-size: 20px;
		margin: 0;
	}

	.footer-tels {
		font-size: 18px;
		margin-top: 4px;
	}

	.footer-tel {
		pointer-events: auto;
	}

	footer ul {
		font-size: 14px;
		text-align: left;
		margin: 7px 0;
	}

}


@media screen and (min-width: 1550px) {


	#key-visual {
		max-height: 698px;
	}
}

@media (min-width: 550px) and (max-width: 767px) {
	#key-visual {
		background-image: url(../img/kv_bg_sp.png);
		aspect-ratio: unset;
		height: 1080px;
	}

	.kv-desk-image {
		width: 75%;
		bottom: 4.5%;
	}
}
@media (max-width: 550px){
	.mid_show{display: block;}
}