@charset "utf-8";

/* -----------------------------------------------

	Type:5つのポイントテンプレ�Dト兆はpage-course5point.php
	     僥親?コ�`ス テンプレ�Dト兆はpage-course.php	　

----------------------------------------------- */


/* -----------------------------------------------

	5つのポイント

----------------------------------------------- */
/* ペ�`ジトップのイメ�`ジ鮫��
----------------------------------------------- */
/* vwは鮫中嫌1920pxのときで��麻 */
.course_point_top_image {
	background: url("/shodaifu2024/wp-content/themes/shodaifu/assets/images/course-point-top_bg.jpg");
	background-size: cover;
	background-position: center;
	width: 100%;
	padding-top: 5.833333333333333vw; /* 112px */
	padding-bottom: 3.6458333333333335vw; /* 70px */
}

.course_point_top_image .flex_wrap {
	display: flex;
	justify-content: center;
	align-items: center;
}
.course_point_top_image .flex_wrap img.pc_left_img {
	width: 26.041666666666668vw; /* 500px */
	height: 16.145833333333336vw; /* 310px */
	margin-left: 2.083333333333333vw; /* 40px */
	margin-right: 5.729166666666666vw; /* 110px */
}
.course_point_top_image .flex_wrap img.pc_right_img {
	width: 36.45833333333333vw; /* 700px */
	height: 21.875vw; /* 420px */
}


/* 慌宥
----------------------------------------------- */
/* セクションを顕う噫易 */
.course_point .ptb80 {
	padding-top: var(--space80);
	padding-bottom: var(--space80);
}

/* セクションごとに貧何に��を哈く */
.course_point.border_top {
	border-top: 5px solid var(--color-skyblue);
}

/* ふきだし鮫�� */
.course_point h1 img {
	max-width: 502px;
	width: 100%;
	margin-bottom: var(--space40);
}

/* 鮫�顳�畠悶�� */
.course_point img {
	display: block;
	max-width: 100%;
}

/* aタグ */
.course_point a {
	color:  var(--color-link);
	border-bottom: 1px solid var(--color-link);
}

/* テキスト、リスト��宥械の和��page.cssと揖じ�� */
.course_point p, .course_point ul, .course_point ol {
	margin-top: var(--space20_14);
}
.course_point p, .course_point li {
	font-size: var(--fz16);
}

.course_point li:not(li:last-child) {
    padding-bottom: 8px;
}

/* �\泣 */
.course_point ul {
	list-style: disc;
    padding-left: 20px;
}
/* 易泣 */
.course_point ul.li_circle li { 
	list-style: circle inside;
	padding-left: 2em;
}
/* 方忖 */
.course_point ol { 
	list-style: decimal;
    padding-left: 27px;
}


/* 01 まずは僥親?コ�`スを岑ろう��
----------------------------------------------- */
/* 嘘尚鮫�� */
.course_point_01_bg {
	background-image: url("/shodaifu2024/wp-content/themes/shodaifu/assets/images/course-point_01_bg.jpg");
}

.course_point h2 {
	font-size: var(--fz42);
	font-weight: var(--fw700);
	line-height: 1.3;
	text-align: center;
	color: var(--color-bluish-black);
	margin: var(--space40-34) auto!important;
}

.course_point .fz20 {
	font-size: var(--fz20);
	text-align: center;
}


/* 02 肝は�xぶポイントを岑ろう��
----------------------------------------------- */
/* 嘘尚鮫�� */
.course_point_02_bg {
	background-image: url("/shodaifu2024/wp-content/themes/shodaifu/assets/images/course-point_02_bg.jpg");
}

/* ------------ ポイント５つ ------------ */

/* POINTの桑催鮫�颪肇謄�ストのグル�`プと、イメ�`ジイラストを罪�Kびにする */
.point_wrap {
	display: flex;
	justify-content: space-between;
	background: var(--color-white);
	border: 2px solid var(--color-skyblue);
}
.point_wrap:not(:last-child) {
	margin-bottom: var(--space40);
}

/* POINTの桑催鮫�� */
.point_wrap img.point_number {
	max-width: 90px;
	max-height: 105px;
}

/* POINTの桑催鮫�颪函▲謄�スト罪�Kび */
/* PCのとき猟嫗が玉いと嘔に40px參貧の噫易ができてしまう。
指閲するため、桑催鮫�颪肇謄�ストのまとまりでもflexを原けている */
.point_wrap .flex_space_group {
	display: flex;
}

/* テキスト�� */
.point_wrap .flex_space_group div {
	margin: var(--space40);
}
.point_wrap .flex_space_group div h3 {
	font-size: var(--fz28);
	font-weight: var(--fw700);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--color-skyblue);
	margin-bottom: var(--space40-34);
}
.point_wrap .flex_space_group div img {
	margin-top: var(--space40-34);
	display: inline-block!important;
}

/* イメ�`ジイラスト */
.point_wrap img:last-child:not(.point_wrap div img ) {
	max-width: 240px;
	max-height: 160px;
	margin: var(--space40) var(--space40) var(--space40) 0;
}



/* 03　�櫃砲覆辰織芥`スを�xぼう��
----------------------------------------------- */
.pt80 {
	padding-top: var(--space80);
}

/* 嘘尚鮫�� */
.course_point_03_bg {
	background-image: url("/shodaifu2024/wp-content/themes/shodaifu/assets/images/course-point_03_bg.jpg");
	background-size: cover;
	background-position: center;
}

img.point03_check {
	max-width: 328px;
	width: 100%;
}

/* ボタン */
.course_point .kasou_border_btn {
	margin-bottom: 0!important;
}



@media screen and (max-width:840px) {

	/* 慌宥
	----------------------------------------------- */
	/* ふきだし鮫�� */
	.course_point h1 img {
		max-width: 300px;
	}


	/* 02 肝は�xぶポイントを岑ろう��
	----------------------------------------------- */
	/* ------------ ポイント５つ ------------ */
	.point_wrap, .point_wrap .flex_space_group {
		display: block;
	}

	/* POINTの桑催鮫�� */
	.point_wrap img.point_number {
		margin: auto;
	}

	/* イメ�`ジイラスト */
	.point_wrap img:last-child:not(.point_wrap div img ) {
		margin: var(--space40) auto;
	}


	/* 03　�櫃砲覆辰織芥`スを�xぼう��
	----------------------------------------------- */
	img.point03_check {
		max-width: 200px;
	}

}


/* スマホ */
@media screen and (max-width:480px) {

	/* ペ�`ジトップのイメ�`ジ鮫��
	----------------------------------------------- */
	/* vwは鮫中嫌480pxのときで��麻 */
	.course_point_top_image {
		background: url(/shodaifu2024/wp-content/themes/shodaifu/assets/images/course-point-top_bg_sp.jpg) center center;
        background-size: auto 100%;
	}

	.course_point_top_image .flex_wrap {
		display: block;
		text-align: center;
	}
	.course_point_top_image .flex_wrap img.pc_left_img {
		width: 52.083333333333336vw; /* 250px */
		height: 100%;
		margin: 0 0 var(--space20) 0;
	}
	.course_point_top_image .flex_wrap img.pc_right_img {
		width:72.91666666666666vw; /* 350px */
		height: 100%;
	}


	/* 慌宥
	----------------------------------------------- */
	/* ふきだし鮫�� */
	.course_point h1 img {
		max-width: 250px;
	}


	/* 01 まずは僥親?コ�`スを岑ろう��
	----------------------------------------------- */
	.course_point .fz20 {
		font-size: var(--fz16);
	}


	/* 02 肝は�xぶポイントを岑ろう��
	----------------------------------------------- */
	/* ------------ ポイント５つ ------------ */
	.point_wrap {
		display: block;
	}

	/* POINTの桑催鮫�� */
	.point_wrap img.point_number {
		max-width: 62px;
	}

	/* テキスト�� */
	.point_wrap div h3 {
		padding-bottom: 5px;
	}

}





/* -----------------------------------------------

	僥親?コ�`ス　���eペ�`ジ

----------------------------------------------- */
:root {
	--space40_33: 33px; /* fz18で噫易を40px函りたいとき */

	--color-ls-sps: #1499DA; /* 噸宥親��蒙�e�M僥�x�iコ�`ス */
	--color-ls-sp: #9766CA; /* 噸宥親��蒙�e�M僥�x�iコ�`ス */
	--color-ls-ic: #D15BA0; /* 噸宥親��蒙�e�M僥忽�Hコ�`ス */
	--color-ls: #80B21E; /* 噸宥親���M僥コ�`ス */
	--color-business-accounting: #F88F19; /* �t栽ビジネス親��氏��コ�`ス */
	--color-business-comprehensive: #E35E29; /* �t栽ビジネス親���t栽ビジネスコ�`ス */
}

@media screen and (max-width:840px) {
	:root {
		--space40_33: 14px; /* fz18(sp16)で噫易を20px函りたいとき */
	}
}


/* 光コ�`スごとに弼蛍け��H1の和��、H2とH3の����
----------------------------------------------- */

/* H1恣�箸力他�弼　慌宥 */
#ls-sps.general_content .border-container::before,
#ls-sp.general_content .border-container::before,
#ls-ic.general_content .border-container::before,
#ls.general_content .border-container::before,
#business-accounting.general_content .border-container::before,
#business-comprehensive.general_content .border-container::before {
	background-color: var(--color-bluish-black)!important;
}

/* ------------ 噸宥親��蒙�e�M僥�x�iコ�`ス ------------ */
#ls-sps.general_content .border-container::after,
#ls-sps.general_content h2::before {
	background-color: var(--color-ls-sps)!important; 
}
#ls-sps.general_content h3 {
	border-bottom: 2px solid var(--color-ls-sps)!important;
}

/* ------------ 噸宥親��蒙�e�M僥コ�`ス ------------ */
#ls-sp.general_content .border-container::after,
#ls-sp.general_content h2::before {
	background-color: var(--color-ls-sp)!important; 
}
#ls-sp.general_content h3 {
	border-bottom: 2px solid var(--color-ls-sp)!important;
}

/* ------------ 噸宥親��蒙�e�M僥忽�Hコ�`ス ------------ */
#ls-ic.general_content .border-container::after,
#ls-ic.general_content h2::before {
	background-color: var(--color-ls-ic)!important; 
}
#ls-ic.general_content h3 {
	border-bottom: 2px solid var(--color-ls-ic)!important;
}

/* ------------ 噸宥親���M僥コ�`ス ------------ */
#ls.general_content .border-container::after,
#ls.general_content h2::before {
	background-color: var(--color-ls)!important; 
}
#ls.general_content h3 {
	border-bottom: 2px solid var(--color-ls)!important;
}

/* ------------ �t栽ビジネス親��氏��コ�`ス ------------ */
#business-accounting.general_content .border-container::after,
#business-accounting.general_content h2::before {
	background-color: var(--color-business-accounting)!important; 
}
#business-accounting.general_content h3 {
	border-bottom: 2px solid var(--color-business-accounting)!important;
}

/* ------------ �t栽ビジネス親���t栽ビジネスコ�`ス ------------ */
#business-comprehensive.general_content .border-container::after,
#business-comprehensive.general_content h2::before {
	background-color: var(--color-business-comprehensive)!important; 
}
#business-comprehensive.general_content h3 {
	border-bottom: 2px solid var(--color-business-comprehensive)!important;
}


/* 蒙弼
----------------------------------------------- */
.flex2_course {
	display: flex;
}
.flex2_course img {
    max-width: 640px;
	max-height: 360px;
    width: 50%;
    height: 50%;
}

/* テキスト�� */
.flex2_course > div {
	margin-left: 80px;   
}

.flex2_course > div h4 {
	font-size: var(--fz18);
	margin-top: 0!important;
	padding: 0 0 8px 0!important; /* 8pxは15px蛍の噫易*/
	background: none!important;
}

/* 噫易は2つ朕參週のh4の貧につける。h4とpの噫易はpに慌宥でつけているmt20px(14px)で���� */
.flex2_course > div h4:nth-child(n+2) {
	margin-top: var(--space40_32)!important;
}

.flex2_course > div p {
	margin-bottom: 0!important;
}


/* --- メディアとテキストブロックを聞喘して罪�Kび --- */
/* 貧�Bえ */
.course .wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__content, .course .wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__media {
    align-self: start!important;
}

/* 鮫�� */
.course .wp-block-media-text__media img {
	max-width: 640px;
    max-height: 360px;
}

/* テキスト�� */
.course.wp-block-media-text  .wp-block-media-text__content h4 {
	font-size: var(--fz18);
	margin-top: 0!important;
	padding: 0 0 8px 0!important; /* 8pxは15px蛍の噫易*/
	background: none!important;
}
.course.wp-block-media-text  .wp-block-media-text__content h4:nth-child(n+2) {
	margin-top: var(--space40_32)!important;
}

.course.wp-block-media-text .wp-block-media-text__content {
	padding:0!important;
	margin-left: 40px;
}
.course.wp-block-media-text .wp-block-media-text__content p {
	margin-bottom: 0!important;
}




/* 光コ�`スごとに弼蛍け h4
----------------------------------------------- */

/* ------------ 噸宥親��蒙�e�M僥�x�iコ�`ス ------------ */
#ls-sps.general_content .flex2_course h4, #ls-sps .course.wp-block-media-text .wp-block-media-text__content h4 {
	color: var(--color-ls-sps); 
	border-bottom: 2px dotted var(--color-ls-sps)!important;
}

/* ------------ 噸宥親��蒙�e�M僥コ�`ス ------------ */
#ls-sp.general_content  .flex2_course h4, #ls-sp .course.wp-block-media-text .wp-block-media-text__content h4 {
	color: var(--color-ls-sp);
	border-bottom: 2px dotted var(--color-ls-sp)!important;
}

/* ------------ 噸宥親��蒙�e�M僥忽�Hコ�`ス ------------ */
#ls-ic.general_content  .flex2_course h4, #ls-ic .course.wp-block-media-text .wp-block-media-text__content h4 {
	color: var(--color-ls-ic);
	border-bottom: 2px dotted var(--color-ls-ic)!important;
}

/* ------------ 噸宥親���M僥コ�`ス ------------ */
#ls.general_content  .flex2_course h4, #ls .course.wp-block-media-text .wp-block-media-text__content h4 {
	color: var(--color-ls);
	border-bottom: 2px dotted var(--color-ls)!important;
}

/* ------------ �t栽ビジネス親��氏��コ�`ス ------------ */
#business-accounting.general_content .flex2_course h4, #business-accounting .course.wp-block-media-text .wp-block-media-text__content h4 {
	color: var(--color-business-accounting);
	border-bottom: 2px dotted var(--color-business-accounting)!important;
}

/* ------------ �t栽ビジネス親���t栽ビジネスコ�`ス ------------ */
#business-comprehensive.general_content .flex2_course h4, #business-comprehensive .course.wp-block-media-text .wp-block-media-text__content h4 {
	color: var(--color-business-comprehensive);
	border-bottom: 2px dotted var(--color-business-comprehensive)!important;
}


/* 壓丕伏の蕗
----------------------------------------------- */
.flex2_voice {
	display: flex;
	flex-wrap: wrap;
}
.flex2_voice .item {
	width: calc(50% - 40px);
    max-width: 640px;
}
.flex2_voice .item:not(:nth-child(2n)) {
	margin-right: 80px;
}
.flex2_voice .item:nth-child(n+3) { /* 3つ朕參週を塘崔するとき喘 */
	margin-top: var(--space40);
}

/* 嶄のコンテンツ */
.flex2_voice .item img {
    max-width: 150px;
	width: 100%;
	margin: auto;
}
.flex2_voice p {
	margin-bottom: 0!important;
}


/* 燕��恷寄罪嫌800px、１佩朕ヘッダ�`、その麿td��
----------------------------------------------- */
table.thead800 {
	max-width: 800px!important;
}
.thead800 thead th {
	background:var(--color-bluish-black);
	color:var(--color-white);
	font-weight: var(--fw700);
}






@media screen and (max-width:1200px) {

	/* 蒙弼
	----------------------------------------------- */
	.flex2_course > div {
		margin-left: 40px;
	}

	/* 壓丕伏の蕗
	----------------------------------------------- */
	.flex2_voice .item {
		width: calc(50% - 20px);
	}
	.flex2_voice .item:not(:nth-child(2n)) {
		margin-right: 40px;
	}
	/* 嶄のコンテンツ */
	.flex2_voice .item img {
		max-width: 120px;
	}
}


@media screen and (max-width:840px) {

	/* 蒙弼
	----------------------------------------------- */
	.flex2_course {
		flex-wrap: wrap;
	}

	.flex2_course > div {
		margin-left: 0;
	}

	.flex2_course img {
		width: 100%;
		height: 100%;
	}

	.flex2_course > div h4 {
		padding: 0 0 2px 0!important; /* 2pxはfz16のとき8px蛍の噫易*/
	}
	.flex2_course > div h4:first-child {
		margin-top: var(--space40_32)!important;
	}

	
	/* --- メディアとテキストブロックを聞喘して罪�Kび --- */

	/* 畠ペ�`ジに郡啌 */
	/* 840px參和で�k�Kび */
	.wp-block-media-text {
		grid-template-columns: 100%!important;
    }
	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
        grid-column: 1!important;
        grid-row: 2!important;
    }


	/* 鮫�顱”��Bえ */
	.course .wp-block-media-text__media img {
		width: 100%;
		height: 100%;
	}

	/* テキスト�� */
	.course.wp-block-media-text  .wp-block-media-text__content h4 {
		padding: 0 0 2px 0!important; /* 2pxはfz16のとき8px蛍の噫易*/
	}
	.course.wp-block-media-text  .wp-block-media-text__content h4:first-child {
		margin-top: var(--space40_32)!important;
	}

	.course.wp-block-media-text .wp-block-media-text__content {
		margin-left: 0;
	}


	/* 壓丕伏の蕗
	----------------------------------------------- */
	/* 嶄のコンテンツ */
	.flex2_voice .item img {
		max-width: 100px;
	}
	

}


@media screen and (max-width:650px) {

	/* 壓丕伏の蕗
	----------------------------------------------- */
	.flex2_voice {
		display: block;
	}
	.flex2_voice .item {
		width: 100%
	}
	.flex2_voice .item {
        margin-right: 0;
    }

	/* 嶄のコンテンツ */
	.flex2_voice .item img {
		max-width: 80px;
		margin-top: var(--space20);
	}

}


/* スマホ */
@media screen and (max-width:480px) {



}