@charset "utf-8";

/*////////////////////
 各講座詳細用CSS
///////////////////////*/
body {
	background: none;
}

section h3 {
    text-align: initial;
    color: inherit;
    background-color: transparent;
    font-size: inherit;
    line-height: normal;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    padding: 0;
}

.text-center {
	text-align: center;
}

@media only screen and (max-width: 799px) {
	.sec_area {
		padding: 0 3%;
	}
}

@media only screen and (min-width: 800px) {
	.container {
		padding: 0;
	}

	.container .sec_area {
		width: 72%;
	}

	.inner.inner--lg {
		max-width: 1200px;
		padding: 0 20px;
	}
}

/* btn
/* -------------------------------------------------- */
.application-btn {
    color: #fff;
    background-color: #5D6276;
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
    min-width: 260px;
    min-height: 60px;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-right: 10px;
    box-sizing: border-box;
    position: relative;
    transition: opacity 0.3s;
    padding: 10px 5%;
    text-align: left;
	gap: 10px;
}

.application-btn::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 13px solid #ffffff;
    border-right: 0;
}

.application-btn:hover {
    opacity: 0.7;
    text-decoration: none;
}

.application-btn.application-btn--white {
    background-color: #fff;
    color: #4A4A4A;
    border: 1px solid #707070;
}

.application-btn.application-btn--white::after {
    border-left: 13px solid #4A4A4A;
}

@media only screen and (min-width: 800px) {
	.application-btn {
		padding: 10px 25px;
    	font-size: 20px;
	}

	.application-btn::after {
		right: 40px;
	}
}

/* courses-about
/* -------------------------------------------------- */
.courses-about {
	padding: 30px 0 30px;
}

.courses-about__wrap {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.courses-about__ttl {
	color: var(--color-written-exam-course);
	font-weight: 600;
}

.courses-about__ttl.courses-about__ttl--practical  {
	color: var(--color-practical-exam-course);
}

.courses-about__ttl.courses-about__ttl--lang  {
	color: #F08D32;
}

.courses-about__txt {
	line-height: 1.5;
}

.courses-about__img {
	text-align: center;
}

@media only screen and (min-width: 800px) {
	.courses-about__ttl {
		font-size: 16px;
	}

	.courses-about__txt {
		font-size: 16px;
	}

	.courses-about__wrap {
		display: flex;
		align-items: flex-start;
		flex-direction: row;
	}

	.courses-about__body {
		flex: 1;
	}

	.courses-about__img {
		width: 36.4%;
	}
}

/* course-box
/* -------------------------------------------------- */
.course-box {
    background-color: #F8F4F4;
    border-radius: 10px;
    padding: 10px 5%;
}

.course-box__ttl {
	font-size: 18px;
	font-weight: 600;
	text-align: left;
	color: var(--color-written-exam-course);
}

.course-box__ttl.course-box__ttl--practical {
	color: var(--color-practical-exam-course);
}

.course-box__ttl.course-box__ttl--lang {
	color: #F08D32;
}

.course-box__content {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
}

.course-box__price {
	font-size: 21px;
	font-weight: 600;
	text-align: right;
}

.course-box__price-sub {
	font-size: 0.762em;
	font-weight: 600;
}

@media only screen and (min-width: 800px) {
	.course-box {
        padding: 10px 20px 15px;
	}
}


/* course-detail
/* -------------------------------------------------- */
.course-detail dt {
	font-weight: 600;
	background-color: #F8F4F4;
	padding: 10px 10px;
	text-align: left;
}

.course-detail dd {
	line-height: 1.5;
	padding: 20px 0 30px;
	text-align: left;
}

.course-detail__note {
	font-size: 13px;
}

.course-detail-schedule-wrap {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.course-detail-schedule-wrap .course-detail-schedule {
	flex: 1;
}

.course-detail-schedule-ttl {
	color: var(--color-written-exam-course);
	font-weight: 600;
}

.course-detail-schedule-ttl.course-detail-schedule-ttl--practical  {
	color: var(--color-practical-exam-course);
}

.course-detail-schedule {
	line-height: 1.5;
}

.course-detail-schedule.course-detail-schedule--border {
    border-bottom: 1px solid #DBDDDC;
    border-top: 1px solid #DBDDDC;
    padding: 12px 0 20px;
    margin: 7px 0 17px;
}

.course-detail-schedule li {
	display: flex;
	align-items: flex-start;
	gap: 4%;
    border-top: 1px solid #DBDDDC;
    padding: 7px 5px;
}

.course-detail-schedule li:last-of-type {
    border-bottom: 1px solid #DBDDDC;
}

.course-detail-schedule__head {
	display: flex;
	flex-direction: column;
	flex: 0 1 35%;
	gap: 10px 0;
}

.course-detail-schedule__txt {
	flex: 1;
}

.course-detail-schedule__img {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: end;
}

.course-detail-schedule__img ul {
	flex: 1 1 auto;
}

.course-detail-flow li:not(:last-of-type) {
	margin-bottom: 15px;
}

.course-detail-flow__ttl {
	font-weight: 600;
}

.course-detail-flow__no {
	color: #DA6A82;
}

.course-detail-flow__strong {
	color: #DA6A82;
	font-weight: 600;
}

.course-detail-schedule__thumb {
	max-width: 108px;
}

.course-detail-schedule__thumb img {
	width: 100%;
}

@media only screen and (min-width: 800px) {
	.course-detail dt {
		font-size: 16px;
	}

	.course-detail dd {
		font-size: 16px;
		line-height: 1.5;
		padding: 20px 10px 30px;
		text-align: left;
	}

	.course-detail__date {
		font-size: 16px;
	}

	.course-detail-schedule-wrap {
		align-items: center;
		flex-direction: row;
	}

	.course-detail-schedule__head {
		padding-left: 0;
		flex: 0 0 120px;
		flex-direction: row;
		align-items: center;
		gap: 15px;
	}

	.course-detail-schedule li {
		gap: 2%;
	}

	.course-detail-schedule__txt {
		flex-shrink: 0;
	}

	.course-detail-schedule_left_img img {
		width: 100%;
	}

	.course-detail-schedule li.course-detail-schedule__item--thumb {
		align-items: center;
	}

	.course-detail-schedule__item--thumb .course-detail-schedule__head {
		justify-content: space-between;
		flex: 0 0 218px;
	}

}

.course-detail-emphasis {
    color: #EA6082;
    font-weight: 500;
}

.course-detail-emphasis.course-detail-emphasis--lang  {
	color: #F08D32;
}

.course-detail-recommend {
    padding: 14px 10px 0;
}

@media only screen and (min-width: 800px) {
	.course-detail-emphasis {
		color: #EA6082;
		font-weight: 500;
	}
}


/* course-access
/* -------------------------------------------------- */

.courses-access {
    border: 1px solid #AAA9A9;
    padding: 15px min(5%, 20px);
}

.courses-access__ttl {
    color: #333333;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 3px;
}

.courses-access__main_office {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0;
    background-color: transparent;
    padding-top: 10px;
}

.courses-access__main_office_body {
    flex: 1 1 61%;
}

.courses-access__venue {
    font-size: 20px;
    font-weight: bold;
}

.courses-access__address {
    line-height: 1.76;
    margin-bottom: 20px;
}

.courses-access__img {
    flex: 1 1 35%;
    min-width: 250px;
	padding: 0;
	margin: 0;
}

.courses-access__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
}

.courses-access-catch {
	display: flex;
	justify-content: center;
	font-size: min(6vw, 24px);
	text-align: center;
	color: #EB5F83;
	font-weight: bold;
	margin-bottom: 5px;
	gap: 15px;
}

.courses-access-catch::before {
	content: "";
	display: block;
	width: 2px;
	background-color: #EB5F83;
	transform: rotate(-40deg);
}

.courses-access-catch::after {
	content: "";
	display: block;
	width: 2px;
	background-color: #EB5F83;
	transform: rotate(40deg);
}

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

	.courses-access__ttl {
		font-size: 20px;
	}
}


/* other-courses
/* -------------------------------------------------- */

.other-courses {
    border: 1px solid #AAA9A9;
    padding: 20px 5%;
}

.other-courses__ttl {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

.other-courses__txt {
    line-height: 1.29;
}

@media only screen and (min-width: 800px) {
	.other-courses {
		padding: 20px 25px;
	}

	.other-courses__ttl {
		font-size: 20px;
	}

	.other-courses__txt {
		line-height: 1.29;
	}
}


/* courses-payment
/* -------------------------------------------------- */

.courses-payment {
	padding: 30px 5% 45px;
	border-radius: 20px;
	background-color: #FFF5E2;
}

.courses-payment .course-ttl {
	margin-bottom: 20px;
}

.courses-payment__ttl {
	font-size: 25px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 23px;
}

.courses-payment__lead {
	font-size: 16px;
	margin-bottom: 15px;
	font-weight: 600;
}

.courses-payment__description {
	margin-bottom: 25px;
	flex: 1;
}

.courses-payment__description-item {
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 0;
    margin-bottom: 1px;
}

.courses-payment__description-item--main {
    margin-bottom: 1em;
	display: block;
}

.courses-payment__description dt {
    display: flex;
    gap: 5px;
}

.courses-payment__description dt::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background: url(../img/common/icon/icon_check.svg) no-repeat;
    background-size: contain;
}

.courses-payment__note {
	font-size: 13px;
	line-height: 1.46;
	margin-bottom: 35px;
}

.courses-payment__note li {
	padding-left: 1em;
	text-indent: -1em;
}

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

	.courses-payment__lead {
		font-size: 18px;
	}

	.courses-payment {
		padding: 30px 4% 45px;
	}

	.courses-payment__description {
		margin-bottom: 20px;
		padding-left: 15px;
	}

	.courses-payment__description-item {
		font-size: 16px;
	}
}

/* price-box
/* -------------------------------------------------- */

.price-box {
	max-width: 463px;
	background-color: #FFFFFF;
	border-radius: 10px;
	padding: 10px 15px;
	display: flex;
	flex-wrap: wrap;
	gap: 0 15px;
	align-items: baseline;
	box-sizing: border-box;
	font-size: clamp(1.625rem, 1.534rem + 0.45vw, 1.875rem);
}

.price-box__main {
	font-weight: 600;
	color: var(--color-practical-exam-course);
}

.price-box__sub {
	font-size: 0.533em;
}

/* credit-box
/* -------------------------------------------------- */

.credit-box {
	background-color: #fff;
	padding: 25px 5% 30px;
}

.credit-box__ttl {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 10px;
	text-align: center;
}

.credit-box__note {
    font-weight: bold;
    color: #2F69A9;
    margin-bottom: .5em;
    margin-top: 1em;
}

.credit-box__img {
	text-align: center;
}

.credit-box__img img {
    width: 64%;
}

@media only screen and (min-width: 800px) {
	.credit-box {
		padding: 25px 3% 30px;
	}
}

/* reason
/* -------------------------------------------------- */
.course .reason {
    padding: 30px 5% 5px;
	border-radius: 20px;
}

.course .section-ttl {
    font-size: clamp(1.25rem, 1.136rem + 0.57vw, 1.563rem);
}

.course .section-lead {
	margin-bottom: 0;
}

.course .reason .section-ttl::before,
.course .reason .section-ttl::after {
	width: 1.6em;
	height: 1.6em;
}

.course .reason__ttl {
	font-size: 18px;
}

.course .reason-point {
    padding: 55px 0 25px;
}

.course .reason-point__ttl {
	font-size: 18px;
}

.course .reason-point__icon {
	width: auto;
	max-width: none;
	text-align: center;
}

.course .reason-point__list li {
	padding: 30px 3% 40px;
}

.course .reason-point__icon {
	margin-bottom: 3px;
}

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

	.course .reason {
		padding-left: 0;
		padding-right: 0;
	}

	.course .reason-point__list {
        gap: min(3vw, 20px);
	}

	.course .reason-point__list li {
		width: calc((100% - 20px) / 2);
		padding: 30px 2% 40px;
	}
}

/* reason
/* -------------------------------------------------- */

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

	.course .reason .award {
		padding-left: 16%;
	}

	.course .reason .award::after {
		left: 10px;
		top: 45%;
	}

	.course .award-list li {
		width: 190px;
	}

	.course .award-ttl {
        font-size: min(2vw, 17px);
	}

}

/* successful
/* -------------------------------------------------- */

.course .successful__list {
	padding-top: 35px;
}

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

    .course .successful__list {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 24px;
	}

    .course .successful__list > li {
        padding: 30px 6%;
    }

	.course .successful-card__category-list {
		margin-bottom: 11px;
	}
}