@charset "utf-8";

/* =========================================================
	Sct-Main
========================================================= */
.sct-main .note {
	max-width: 758px;
	margin: 0 auto;
}
.sct-main .mark-note {
	font-size: 16px;
	margin: 35px auto;
}
/* 768px以上 */
@media only screen and (min-width: 768px) {
	.sct-main .mark-note {
		font-size: 18px;
	}
}
.sct-main .mark-note li {
	margin-left: 0.9rem;
}

/* =========================================================
	Sct-Plan
========================================================= */
.sct-plan {
	background: #F1F1F1;
	padding: 60px 0;
	border-top: 10px solid #BFEEF4;
	border-bottom: 10px solid #BFEEF4;
}

/* Box Plan
----------------------------------------------------*/
.box-plan {
	text-align: center;
	padding-bottom: 20px;
}
.box-plan > div > p {
	margin-top: 0.8rem;
	font-size: 12px;
}
/* 768px以上 */
@media only screen and (min-width: 768px) {
	.box-plan > div > p {
		font-size: 14px;
	}
}

/* PickUp Plan
----------------------------------------------------*/
.box-plan.sample figure {
	max-width: 60%;
	margin: 20px auto;
}


/* =========================================================
	Sct-Discount
========================================================= */
.sct-discount {
	background: #F1F1F1;
	padding: 60px 0;
	border-top: 10px solid #F5BFCF;
}

/* Dl info-subject
----------------------------------------------------*/
.info-subject,
.info-subject p {
	color: #0F0F0F;
	font-size: 16px;
}
@media only screen and (min-width: 768px) {
	.info-subject,
	.info-subject p {
		font-size: 18px;
	}
}

	.info-subject p + p {
		margin-top: 1rem;
	}
	.info-subject dt {
		position: relative;
		padding-right: 1rem;
	}
	.info-subject dt:after {
		position: relative;
		content: "\f063";
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-size: 18px;
		color: #8F8F8F;
		margin-left: 1rem;
	}
	/* 768px以上 */
	@media only screen and (min-width: 768px) {
		.info-subject dt:after {
			position: absolute;
			content: "\f061";
			font-size: 18px;
			right: 0;
			top: 0;
		}
	}
	.info-subject dt {
		margin-bottom: 0.5rem;
	}
	.info-subject dd {
		margin-bottom: 1.5rem;
	}
	/* 768px以上 */
	@media only screen and (min-width: 768px) {
		.info-subject dt,
		.info-subject dd {
			margin-bottom: 1rem;
		}
	}
		.info-subject .mark-note {
			margin: 0 0 1rem 0.8rem;
		}

.info-subject p + .mark-note {
	margin-top: 0.5rem;
}

/* =========================================================
	Section Sct-Nav
========================================================= */
.sct-lnav {
	background: #E4E4E4;
	/*margin-top: 20px;*/
	padding: 15px 0;
}
/* 768px以上 */
@media only screen and (min-width: 768px) {
	.sct-lnav {
	}
}
/* Local Navigation
----------------------------------------------------*/
.lnav {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}
/* 768px以上 */
@media only screen and (min-width: 768px) {
	.lnav {
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		max-width: 640px;
		margin: 0 auto;
	}
}
	.lnav a {
		font-size: 16px;
		font-weight: bold;
		color: #292929;
		display: block;
		padding: 15px 0 15px 20%;
	}
.lnav a:link {
	text-decoration: none;
}
/* 768px以上 */
@media only screen and (min-width: 768px) {
	.lnav a {
		font-size: 16px;
		padding: 15px;
	}
}
	.lnav a:after {
		content: "\f0da";
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		margin-left: 10px;
	}
.lnav li {
	line-height: 0;
}
/* 768px以上 */
@media only screen and (min-width: 768px) {
	.lnav li {
		line-height: 1;
	}
}
.lnav li:hover {
	background: #a5a5a5;
}


/* =========================================================
	Common
========================================================= */
/* h2
----------------------------------------------------*/
.sct-plan h2,
.sct-discount h2 {
	text-align: center;
	margin-bottom: 50px;
}
.sct-plan h2 + .box-plan h3,
.sct-discount h2 + .box-plan h3 {
	margin-top: 0;
}

/* h3
----------------------------------------------------*/
.sct-plan h3,
.sct-discount h3 {
	display: inline-block;
	margin: 50px auto 40px;
	padding: 16px 16px;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	border: solid 15px;
	border-image-source:url('/static/img/feature/plan-discount/border-blue.png');
	border-image-slice: 15;
	border-image-width: 1;
	border-image-outset: 0;
	border-image-repeat:repeat;
}
.sct-discount h3 {
	border-image-source:url('/static/img/feature/plan-discount/border-pink.png');
}

/* h4
----------------------------------------------------*/
.sample h4 {
	font-size: 18px;
	font-weight: bold;
}

/* Img-Fluid2
----------------------------------------------------*/
.img-fluid2 {
	width: 100%;
	height: auto;
}

/* List
----------------------------------------------------*/
/* ----- Note(※) ----- */
.mark-note {
	margin: 1rem auto 0;
}
	.mark-note li {
		text-indent: -0.9rem;
	}
	.mark-note li:before {
		content: '※';
	}
.mark-note {
	width: 90%;
}
/* 768px以上 */
@media only screen and (min-width: 768px) {
	.mark-note {
		font-size: 14px;
	}
}

/* ----- Disc ----- */
.mark-disc > li {
	list-style: disc;
	margin-left: 1.3rem;
	font-size: 14px;
}
/* 768px以上 */
@media only screen and (min-width: 768px) {
	.mark-disc > li  {
		font-size: 16px;
	}
}
.mark-disc > li + li {
	margin-top: 0.5rem;
}

/* Link
----------------------------------------------------*/
.txt-link {
	text-decoration: underline;
	margin: 1rem 0;
}
.txt-link a + i {
	margin-left: 10px;
	color: #007bff;
}

/* Button
----------------------------------------------------*/
.btn-black {
	position: relative;
}
.btn-black a:after {
	position: absolute;
	content: "\f054";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 18px;
	color: #FFF;
	margin-left: 5px;
	right: 4%;
	top: 50%;
	-webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
/* 768px以上 */
@media only screen and (min-width: 768px) {
	.btn-black a:after {
		font-size: 16px;
	}
}
.btn-black a {
	background: #0F0F0F;
	color: #fff;
	width: 100%;
	padding: 22px 24px 20px 8px;
	display: block;
	text-decoration: none;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	border: 1px solid #0F0F0F;
	border-radius: 10px;
	line-height: 1.3;
}
/* 768px以上 */
@media only screen and (min-width: 768px) {
	.btn-black a {
		font-size: 20px;
	}
}
.sct-plan .btn-black,
.sct-discount .btn-black {
	width: 90%;
	margin: 0 auto;
}
/* 768px以上 */
@media only screen and (min-width: 768px) {
	.sct-plan .btn-black {
		width: 70%;
		margin: 50px auto;
	}
}

/* Card
----------------------------------------------------*/
.box-plan .card {
	border: 3px solid #0F0F0F;
	border-radius: 10px;
	overflow: hidden;
}

	.box-plan .card-header,
	.box-plan .card-body {
		padding: 0.75rem;
	}
	.box-plan .card-header {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		font-weight: bold;
		height: 4rem;
		border-bottom: 3px solid #0F0F0F;
	}
	/* 992px以上 */
	@media only screen and (min-width: 992px) {
		.box-plan .card-header {
			font-size: 18px;
		}
	}
	.box-plan .card-body {
		font-size: 14px;
		padding-bottom: 0;
	}
	.box-plan.blue .card-body .price {
		font-size: 34px;
	}
	/* 992px以上 */
	@media only screen and (min-width: 992px) {
		.box-plan .card-body {
			font-size: 16px;
		}
	}
	.box-plan .txt-link {
		padding-left: 14px;
		padding-right: 14px;
	}

.box-plan > div {
	margin-bottom: 20px;
}
.box-plan > div > div {
	margin-bottom: 10px;
}

/* Color
----------------------------------------------------*/
/*---- Plan Cards(Blue) ----*/
.box-plan.blue .card-header {
	background: #BFEEF4;
}
.box-plan.blue .card-body {
	font-weight: bold;
	color: #FA0000;
}

/*---- Discount Cards(Pink) ----*/
.box-plan.pink .card-header {
	background: #F5BFCF;
}
.box-plan.pink .card-body {
	font-weight: normal;
	color: #0F0F0F;
	text-align: left;
}


/* Table(上段にth)
----------------------------------------------------*/
.tbl-list {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 5px solid #0F0F0F;
	border-radius: 10px;
	overflow: hidden;
}
	.tbl-list th,
	.tbl-list td {
		padding: 0.5rem 0.25rem;
		border-right: 5px solid #0F0F0F;
		border-bottom: 5px solid #0F0F0F;
		font-size: 14px;
	}
	/* 768px以上 */
	@media only screen and (min-width: 768px) {
		.tbl-list th,
		.tbl-list td {
			padding: 0.8rem 0.5rem;
			border-right: 5px solid #0F0F0F;
			border-bottom: 5px solid #0F0F0F;
			font-size: 16px;
		}
	}
	.tbl-list th {
		width: 30%;
		background: #F5BFCF;
	}
	.tbl-list th:first-child {
		width: 40%;
	}
	/* 768px以上 */
	@media only screen and (min-width: 768px) {
		.tbl-list th,
		.tbl-list th:first-child {
			width: 33.33%;
		}
	}
	.tbl-list td {
		background: #FFF;
		border-bottom: 2px dashed #0F0F0F;
	}
	

	.tbl-list tr:last-child td {
		border-bottom: none;
	}
	.tbl-list th:last-child,
	.tbl-list td:last-child {
		border-right: none;
	}

/* Font-Size
----------------------------------------------------*/
.f10 {
	font-size: 10px;
}
.f11 {
	font-size: 11px;
}
.f16 {
	font-size: 16px;
}
.f12-10 {
	font-size: 10px;
}
.f14-12 {
	font-size: 12px;
}
.f16-14 {
	font-size: 14px;
}
.f18-16 {
	font-size: 16px;
}
/* 768px以上 */
@media only screen and (min-width: 768px) {
	.f12-10 {
		font-size: 12px;
	}
	.f14-12 {
		font-size: 14px;
	}
	.f16-14 {
		font-size: 16px;
	}
	.f18-16 {
		font-size: 18px;
	}
}
/* Font-Color
----------------------------------------------------*/
.f-red {
	color: #FA0000;
}
.f-black {
	color: #000000;
}