/*----------------------------------------------------------------------------*/
/* 	SAVIORS  スクール料お支払い  SCHOOL PAYMENT			CSS      */
/*----------------------------------------------------------------------------*/
	main {
		background-color:#fff;
	}

/* ■ introduction section（注意事項）-------------------------------*/

	#introduction {
		margin:0 auto 0 auto;
		width:100%;
		padding-bottom:0;
		background-color:#FFF;
		position:relative;
	}
	#introduction .cont {
		margin:120px auto 0 auto;
		width:100%;
	}
	#introduction .cont h2 {
		display:block;
		margin:0 auto 30px auto;
		width:50%;
		font-size:2.8vw;
		text-align:center;
		line-height:1.0em;
		letter-spacing:1px;
		font-weight:bold;
		font-family: "Athelas-Regular";
		font-display: swap;
		color:#BDC3C7;
		padding-bottom:20px;
		border-bottom: 1px solid #0c3484;	/* svs-blue */
	}
	#introduction .cont h2 span {
		font-size:1.6vw;
		line-height:1.0em;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight:700;
		font-style: normal;
		font-display: swap;
		color: #444;
	}
	#introduction .cont .comment {
		margin:0 auto 0 auto;
		width:70%;
		padding:20px 0 20px 0;
	}
	#introduction .cont .comment p {
		margin:0 auto 0 auto;
		width:70%;
		font-size:18px;
		line-height:1.9em;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal;
		font-display: swap;
		color:#222;
		padding:0 0 30px 0;
	}
	#introduction .cont .concept {
		margin:20px auto 50px auto;
		width:100%;
		text-align:center;	/* 内側の inline-block ul を中央寄せ */
	}
	#introduction .cont .concept h2 {
		font-size:1.8vw;
		text-align:center;
		line-height:1.8em;
		letter-spacing:1.0px;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 700;
		font-style: normal;
		font-display: swap;
		color: #0c3484;		/* svs-blue */
		padding-bottom:20px;
		border-bottom: 1px solid #d03c1b;	/* svs-red01 */
	}
	#introduction .cont .concept>ul {
		display:inline-block;	/* ブロックを中央寄せにするためinline-block化 */
		text-align:left;	/* 中身のテキストは左寄せ */
		margin:30px auto 0 auto;
		max-width:75%;	/* 1行が長くなりすぎないよう上限を設定 */
		padding:0 0 30px 0;
		vertical-align:top;
	}
	#introduction .cont .concept>ul li {
		margin:0;
		width:100%;
		font-size:17px;
		line-height:1.8em;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 400;
		font-style: normal;
		font-display: swap;
		color:#222;
		padding:0 0 20px 0;
		padding-left:1em;
	}
	#introduction .cont .concept>ul li span {
		font-size:18px;
		font-weight: 600;
		color:#0c3484;		/* svs-blue */
		padding-right:25px;
	}
	#introduction .symbl02 {
		position:absolute;
		top:0px;
		right:8%;
		width:302px;
		height:334px;
		z-index:1;
	}
	#introduction .symbl02 img {
		display:block;
	}

	@media screen and (max-width:992px) {		/* ◇SP layout ----------  */

		#introduction {
			width:100%;
			padding-bottom:0;
		}
		#introduction .cont {
			margin:30px auto 30px auto;
			width:100%;
		}
		#introduction .cont h2 {
			margin:20px auto 20px auto;
			width:90%;
			font-size:4.2vw;
			line-height:1.4em;
			padding-bottom:7px;
		}
		#introduction .cont h2 span {
			font-size:3.2vw;
			color:#222;
		}
		#introduction .cont .comment {
			width:90%;
		}
		#introduction .cont .comment p {
			width:100%;
			font-size:13px;
			line-height:1.7em;
			padding:0 0 10px 0;
		}
		#introduction .cont .concept {
			margin:0 auto 30px auto;
			width:90%;
			text-align:center;
		}
		#introduction .cont .concept h2 {
			font-size:14px;
			line-height:1.7em;
			padding-bottom:10px;
		}
		#introduction .cont .concept>ul {
			display:inline-block;
			text-align:left;
			max-width:100%;
			padding:10px 0 10px 0;
		}
		#introduction .cont .concept>ul li {
			width:100%;
			font-size:12px;
			line-height:1.8em;
			padding:0 0 10px 0;
		}
		#introduction .cont .concept>ul li span {
			font-size:13px;
			padding-right:10px;
		}
		#introduction .symbl02 {
			position:absolute;
			top:95%;
			right:5%;
			width:76px;
			height:84px;
			z-index:1;
		}
		#introduction .symbl02 img {
			zoom:0.2;
		}
	}

/* ■ Section base（sectitle 等は academy.css と統一）------------------- */

	#paylist,
	#paylist-onetime {
		margin:0 auto 0 auto;
		padding-top:0;
		padding-bottom:30px;
		position:relative;
	}
	#paylist .sectitle,
	#paylist-onetime .sectitle {
		margin: 0 auto 0 auto;
		width: 100%;
		padding-top:0;
		padding-bottom:0;
	}
	#paylist .sectitle .sectsub,
	#paylist-onetime .sectitle .sectsub {
		display:block;
		margin: 0 auto 0 auto;
		width: 100%;
		text-align:center;
		font-size:3.0vw;
		letter-spacing:8px;
		font-weight:bold;
		font-family: "Athelas-Regular";
		font-display: swap;
		color:#BDC3C7;
		padding-top:50px;
		padding-bottom:20px;
	}
	#paylist .sectitle h2,
	#paylist-onetime .sectitle h2 {
		display:block;
		margin: 0 auto 0 auto;
		width: 73%;
		text-align:center;
		font-size:30px;
		letter-spacing:1px;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 700;
		font-style: normal;
		font-display: swap;
		color:#555;
		padding-top:0px;
		padding-bottom:10px;
	}
	#paylist .sectitle .h2line,
	#paylist-onetime .sectitle .h2line {
		margin: 20px auto 50px auto;
		width: 65%;
		height:1px;
		background:linear-gradient(90deg,#d03c1b 0%,#d03c1b 2%,#CCCCCC 2%,#CCCCCC 100%);
	}
	#paylist .comment,
	#paylist-onetime .comment {
		margin:0 auto 30px auto;
		width:70%;
		padding:0 0 20px 0;
	}
	#paylist .comment p,
	#paylist-onetime .comment p {
		margin:0 auto 0 auto;
		width:75%;
		text-align:center;
		font-size:17px;
		line-height:1.9em;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal;
		font-display: swap;
		color:#222;
	}

	@media screen and (max-width:992px) {
		#paylist .sectitle .sectsub,
		#paylist-onetime .sectitle .sectsub {
			font-size:20px;
			letter-spacing:1px;
			padding-top:30px;
			padding-bottom:10px;
		}
		#paylist .sectitle h2,
		#paylist-onetime .sectitle h2 {
			width: 90%;
			font-size:16px;
			line-height:1.7em;
			padding-bottom:5px;
		}
		#paylist .sectitle .h2line,
		#paylist-onetime .sectitle .h2line {
			margin: 10px auto 25px auto;
			width: 90%;
		}
		#paylist .comment,
		#paylist-onetime .comment {
			width:90%;
			padding:0 0 10px 0;
		}
		#paylist .comment p,
		#paylist-onetime .comment p {
			width:100%;
			font-size:12px;
			line-height:1.7em;
		}
	}

/* ■ Payment Cards ----------------------------------------- */

	.pay-cards {
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		gap:40px;
		margin:0 auto 0 auto;
		width:80%;
		padding-bottom:30px;
	}
	.pay-card {
		display:flex;
		flex-direction:column;
		align-items:center;
		width:360px;
		max-width:100%;
		padding:30px 25px 25px 25px;
		background:#FFF;
		border:1px solid #E5E5E5;
		border-radius:12px;
		box-shadow:0 2px 10px rgba(0,0,0,0.05);
		transition:transform .25s ease, box-shadow .25s ease;
	}
	.pay-card:hover {
		transform:translateY(-3px);
		box-shadow:0 6px 18px rgba(0,0,0,0.08);
	}
	.pay-card__head {
		text-align:center;
		width:100%;
		padding-bottom:15px;
		border-bottom:1px solid #EEE;
	}
	.pay-card__category {
		margin:0 auto 8px auto;
		font-size:13px;
		letter-spacing:2px;
		font-family: "Athelas-Regular";
		font-display: swap;
		color:#BDC3C7;
	}
	.pay-card__title {
		margin:0 auto 0 auto;
		font-size:18px;
		line-height:1.5em;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 700;
		font-style: normal;
		font-display: swap;
		color:#222;
	}
	.pay-card__title span {
		display:block;
		margin-top:6px;
		font-size:20px;
		color:#0c3484;		/* svs-blue */
	}
	.pay-card__price {
		display:flex;
		align-items:baseline;
		justify-content:center;
		gap:6px;
		margin:18px auto 18px auto;
		padding:0;
	}
	.pay-card__price .amount {
		font-size:36px;
		line-height:1em;
		font-family: "Noto Sans JP", serif;
		font-weight:700;
		color:#0c3484;		/* svs-blue */
	}
	.pay-card__price .unit {
		font-size:14px;
		font-family: "Noto Sans JP", serif;
		font-weight:500;
		color:#444;
	}
	.pay-card__qr {
		margin:0 auto 0 auto;
		width:100%;
		text-align:center;
	}
	.pay-card__qr img {
		display:block;
		margin:0 auto 8px auto;
		width:240px;
		max-width:100%;
		height:auto;
		padding:10px;
		background:#FFF;
		border:1px solid #EEE;
		border-radius:6px;
	}
	.pay-card__qr figcaption {
		font-size:12px;
		line-height:1.6em;
		font-family: "Noto Sans JP", serif;
		color:#666;
	}
	/* ◇ Square決済リンクボタン（主にスマホユーザー向けCTA） */
	.pay-card__cta {
		margin:16px auto 0 auto;
		width:100%;
		text-align:center;
	}
	.pay-card__cta a {
		display:block;
		position:relative;
		width:100%;
		padding:14px 12px;
		font-size:15px;
		line-height:1.4em;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 700;
		font-style: normal;
		font-display: swap;
		text-align:center;
		color:#FFF;
		background-color:#d03c1b;	/* svs-red01 - 目を引くCTAカラー */
		border:none;
		border-radius:6px;
		text-decoration:none;
		box-shadow:0 2px 6px rgba(208,60,27,0.25);
		transition:background-color .25s ease, transform .15s ease, box-shadow .25s ease;
	}
	.pay-card__cta a span {
		display:inline-block;
		position:relative;
		padding-right:22px;
	}
	.pay-card__cta a span::after {
		content: "\f08e";	/* external-link icon (Font Awesome 4) */
		position:absolute;
		top:50%;
		right:0;
		transform:translateY(-50%);
		font-family: "FontAwesome";
		font-size:13px;
		font-weight:normal;
	}
	.pay-card__cta a:hover {
		background-color:#0c3484;	/* svs-blue */
		box-shadow:0 4px 10px rgba(12,52,132,0.3);
		transform:translateY(-1px);
	}
	.pay-card__cta a:active {
		transform:translateY(0);
		box-shadow:0 1px 3px rgba(0,0,0,0.15);
	}

	.pay-card__note {
		margin:18px auto 0 auto;
		width:100%;
		padding:15px 0 0 0;
		border-top:1px solid #EEE;
	}
	.pay-card__note li {
		font-size:13px;
		line-height:1.7em;
		font-family: "Noto Sans JP", serif;
		font-weight:500;
		color:#444;
		padding-left:1em;
		text-indent:-1em;
		padding-bottom:5px;
	}
	.pay-card__note li::before {
		content:"・";
		color:#d03c1b;		/* svs-red01 */
		padding-right:3px;
	}

	/* COMING SOON placeholder */
	.pay-card--placeholder {
		justify-content:center;
		align-items:center;
		min-height:300px;
		background:#FAFAFA;
		border:1px dashed #CCC;
		box-shadow:none;
	}
	.pay-card--placeholder:hover {
		transform:none;
		box-shadow:none;
	}
	.pay-card__placeholder-label {
		margin:0 auto 10px auto;
		font-size:18px;
		letter-spacing:4px;
		font-family: "Athelas-Regular";
		font-display: swap;
		color:#BDC3C7;
	}
	.pay-card__placeholder-text {
		margin:0 auto 0 auto;
		font-size:13px;
		line-height:1.7em;
		text-align:center;
		font-family: "Noto Sans JP", serif;
		color:#888;
	}

	@media screen and (max-width:992px) {
		.pay-cards {
			flex-direction:column;
			align-items:center;
			gap:30px;
			width:90%;
		}
		.pay-card {
			width:100%;
			max-width:340px;
			padding:22px 18px 20px 18px;
		}
		.pay-card__title {
			font-size:15px;
		}
		.pay-card__title span {
			font-size:17px;
		}
		.pay-card__price .amount {
			font-size:30px;
		}
		.pay-card__qr img {
			width:200px;
		}
		.pay-card__cta a {
			padding:13px 10px;
			font-size:14px;
			line-height:1.4em;
		}
		.pay-card__cta a span {
			padding-right:18px;
		}
		.pay-card__cta a span::after {
			font-size:12px;
		}
		.pay-card--placeholder {
			min-height:200px;
		}
	}

/* ■ #paylist は svcont01 のグラデ背景を打ち消し ------------------- */

	#paylist.svcont01,
	#paylist-onetime.svcont01 {
		background:#FFF;
		padding-bottom:60px;
		margin: 30px auto 30px auto;
	}
	#paylist-onetime.svcont01 {
		background:linear-gradient(180deg,#FAFAFA 0%,#FAFAFA 100%);
	}

/* ■ Entry (Contact CTA) - academy.css と同等の見た目 ----- */

	#entry {
		margin:0 auto 0 auto;
		padding-top:0;
		padding-bottom:60px;
		position:relative;
	}
	#entry .sectitle {
		margin: 0 auto 0 auto;
		width: 100%;
	}
	#entry .sectitle .sectsub {
		display:block;
		margin: 0 auto 0 auto;
		width: 100%;
		text-align:center;
		font-size:3.0vw;
		letter-spacing:1px;
		font-family: "Athelas-Regular";
		font-display: swap;
		color:#BDC3C7;
		padding-top:30px;
		padding-bottom:30px;
	}
	#entry .sectitle h2 {
		display:block;
		margin: 0 auto 0 auto;
		width: 73%;
		text-align:center;
		font-size:1.5vw;
		letter-spacing:1px;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 700;
		font-style: normal;
		font-display: swap;
		color:#444;
		padding-bottom:10px;
	}
	#entry .sectitle .h2line {
		margin: 20px auto 50px auto;
		width: 70%;
		height:1px;
		background:linear-gradient(90deg,#d03c1b 0%,#d03c1b 2%,#CCCCCC 2%,#CCCCCC 100%);
	}
	#entry .content {
		margin:0 auto 0 auto;
		width: 70%;
		padding-bottom:30px;
	}
	#entry .content .cont01 {
		margin:30px auto 50px auto;
		width: 100%;
	}
	#entry .content .cont01 h2 {
		margin:10px auto 30px auto;
		width: auto;
		text-align:center;
		font-size:24px;
		line-height:1.5em;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight:700;
		font-style: normal;
		font-display: swap;
		letter-spacing:1px;
		color: #0c3484;		/* svs-blue */
		position: relative;
		display: inline-block;
		left: 50%;
		transform: translateX(-50%);
	}
	#entry .content .cont01 h2:before {
		position: absolute;
		content: "";
		width: 34px;
		height: 32px;
		left: -40px;
		top: 50%;
		transform: translateY(-50%);
		background: url( "../images/icon/logo-icon01.svg" ) no-repeat;
		background-size: 34px 32px;
	}
	#entry .content .cont01 .txt01 {
		margin:30px auto 30px auto;
		width: 67.5%;
		font-size:17px;
		line-height:1.8em;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal;
		font-display: swap;
		color:#222;
	}
	#entry .content .nlall {
		display: block;
		margin: 20px auto 0 auto;
		position:relative;
	}
	#entry .content .nlall a {
		display: block;
		position:absolute;
		top:0;
		left:0;
		right:0;
		margin:auto;
		width:35%;
		font-size:17px;
		font-weight:600;
		line-height:1.5em;
		color: #FFF;
	}
	#entry .symbl {
		position:absolute;
		top:0;
		right:5%;
		width:315px;
		height:334px;
		z-index:1;
	}
	#entry .symbl img {
		display:block;
	}

	@media screen and (max-width:992px) {
		#entry {
			padding-top:20px;
		}
		#entry .sectitle {
			width: 90%;
		}
		#entry .sectitle .sectsub {
			font-size:14px;
			letter-spacing:1px;
			padding-top:0;
			padding-bottom:7px;
		}
		#entry .sectitle h2 {
			width: 100%;
			font-size:14px;
			line-height:1.7em;
			color: #222;
			padding-bottom:5px;
		}
		#entry .sectitle .h2line {
			margin: 0 auto 20px auto;
			width: 100%;
		}
		#entry .content {
			width: 95%;
			padding-bottom:20px;
		}
		#entry .content .cont01 {
			margin:20px auto 20px auto;
		}
		#entry .content .cont01 h2 {
			margin:0 auto 20px auto;
			font-size:14px;
			padding-left:2em;
		}
		#entry .content .cont01 h2:before {
			left: -0.75em;
		}
		#entry .content .cont01 .txt01 {
			margin:10px auto 0 auto;
			width: 85%;
			font-size:12px;
			line-height:1.8em;
			font-weight:normal;
		}
		#entry .content .nlall a {
			width:80%;
			font-size:12px;
			font-weight:bold;
			line-height:1.5em;
		}
		#entry .symbl {
			top:-30px;
			right:2%;
			width:76px;
			height:84px;
		}
		#entry .symbl img {
			zoom:0.2;
		}
	}