@charset "UTF-8";

/* basic
------------------------------------------------------------ */
#selfstudying{
	--color-white: #fff;
	--color-black: #323232;
	--color-gray: #d6d6d6;
	--color-gray-light: #f1f1f1;
	--color-yellow: #fdd601;
	--color-pink: #e62e8b;
	--color-pink-light: #fff3f9;
	--color-green: #58b531;
	--color-green-light: #f2ffec;
	--color-cyan: #1bb8ce;
	--color-blue-dark: #142f5c;
	--color-red: #cc111a;
	--color-red-light: #f4696a
}

#selfstudying{
	box-sizing: border-box;
	background-color: var(--color-white);
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

#selfstudying .spOnly{ display: block; }
#selfstudying .pcOnly{ display: none; }
#selfstudying .br{ display: block; }

#selfstudying .wrap{
	max-width: calc( 100% - 2rem );
	margin-inline: auto;
}

#selfstudying .grid{
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 1rem;
}
#selfstudying .grid.grid_btn{
	gap: 8px;
}

#selfstudying ul, #selfstudying ol{
	list-style: none;
}
#selfstudying li{
	line-height: 1;
}

#selfstudying ul.list{
	padding-left: 0.5em;
}
#selfstudying ul.list li{
	padding-left: 1em;
	line-height: 1.4;
	text-indent: -1em;
}
#selfstudying ul.list li:before{
	content: '・';
}
#selfstudying ul.list + p{
	margin-top: 10px;
}
#selfstudying p + ul.list{
	margin-top: -5px;
}

#selfstudying img,
#selfstudying iframe{
	display: block;
	max-width: 100%;
	width: 100%;
	height: auto;
	margin-inline: auto;
}
#selfstudying iframe{
	height: 100%;
	background-color: #000;
}

#selfstudying a{
	color: inherit;
}
#selfstudying [target='_blank']{
	color: #2a6be3;
	text-decoration: none;
}
#selfstudying a:hover img{
	opacity: 0.7;
}

#selfstudying em{
	display: inline;
	padding-inline: 2px;
	background: linear-gradient( 180deg, #fff 0%, #fff 60%, #fff100 60%, #fff100 90%, #fff 90%, #fff 100%);
	font-style: normal;
	line-height: 1;
}

#selfstudying table{
	table-layout: fixed;
	border-collapse: collapse;
}

#selfstudying .btn{
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	width: 100%;
	padding: 12px 49px 12px 21px;
	border-radius: 4px;
	border: none;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	line-height: 1.2;
	cursor: pointer;
}

#selfstudying .btn_pink{
	background-color: var(--color-pink);
	color: var(--color-white);
}
#selfstudying .btn_green{
	background-color: var(--color-green);
	color: var(--color-white);
}
#selfstudying .btn_cyan{
	background-color: var(--color-cyan);
	color: var(--color-white);
}
#selfstudying .btn_red{
	background-color: var(--color-red);
	background: linear-gradient( 180deg, #EC1C26 0%, #AF0F17 100%);
	color: var(--color-white);
}
#selfstudying .btn_gray{
	background-color: var(--color-gray-light);
}

#selfstudying a.btn:hover{
	filter: brightness(1.1) drop-shadow(0 3px 2px rgb(0 0 0 / 0.3));
}

#selfstudying .btn:after{
	content: '';
	display: block;
	width: 15px;
	height: 9px;
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 10"><path fill="white" d="M7.875 9.54224L15.7031 2.01099L14.1094 0.323487L7.90625 6.32349L1.875 0.323486L0.34375 2.02661L7.875 9.54224Z" /></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: absolute;
	right: 21px;
}

#selfstudying .btn_cyan:after{
	rotate: -90deg;
}

#selfstudying .btn_red{
	border-radius: 50px;
	box-shadow: 0 2px 2px 0 rgb(0 0 0 / 0.25);
}
#selfstudying .btn_red:after{
	rotate: -90deg;
}

#selfstudying .btn_gray{
	border-radius: 0;
	border: 6px solid #fff;
	font-size: 12px;
}
#selfstudying .btn_gray:after{
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 14 9"><path fill="%23A0A0A0" d="M7 8.40137L0.0717957 0.151368L13.9282 0.151367L7 8.40137Z" /></svg>');
}

#selfstudying .fz_xs{ font-size: 12px; }
#selfstudying .fz_m{ font-size: 14px; }
#selfstudying .fz_l{ font-size: 16px; }
#selfstudying .fz_xl{ font-size: 22px; }
#selfstudying .fz_xxl{ font-size: 26px; }

#selfstudying .bold{ font-weight: 700; }
#selfstudying .underline{ display: inline; text-decoration: underline;}

#selfstudying .center{ text-align: center; }
#selfstudying .right{ text-align: right; }

#selfstudying .pink{ color: var(--color-pink); }
#selfstudying .blue{ color: var(--color-blue); }
#selfstudying .red{ color: var(--color-red); }
#selfstudying .yellow{ color: var(--color-yellow); }


/* common
------------------------------------------------------------ */
#selfstudying section h2{
	font-weight: 700;
	text-align: center;
}


/* breadcrumbs
------------------------------------------------------------ */
#breadcrumb-box{
	margin-top: 0 !important;
	padding-top: 104px;
	border-bottom: 1px solid #d0cec9;
	-webkit-box-shadow: hsla(0, 0%, 95%, 0.8) 0 2px 5px 2px;
	box-shadow: 0 2px 5px 2px hsla(0, 0%, 95%, 0.8);
	font-size: 0.75rem;
	line-height: 1.6;
}
#breadcrumb-box .inner {
	width: 100%;
	margin: 0 auto;
	padding: 0 3.125%;
}
#breadcrumb{
	min-height: 37px;
	overflow: hidden;
	white-space: nowrap;
}
#breadcrumb .breadcrumb-list{
	letter-spacing: -0.4em;
	padding-bottom: 8px;
	padding-top: 10px;
}
#breadcrumb .breadcrumb-list li{
	letter-spacing: normal;
	vertical-align: middle;
}
.breadcrumb-list > li.show {
display: inline-block;
}
.breadcrumb-list > li.ellipsis {
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
}
#breadcrumb .breadcrumb-list li a{
	line-height: 1.3;
	margin-right: 8px;
	text-decoration: none;
	color: #2a6be3;
	cursor: pointer;
}
#breadcrumb .breadcrumb-list li a:after{
	color: #333;
	content: ">";
	display: inline-block;
	margin-left: 8px;
	margin-top: -2px;
	vertical-align: middle;
	line-height: 1.3;
	margin-right: 8px;
}


/* kv
------------------------------------------------------------ */
#selfstudying #kv h2{
	position: relative;
	padding: 9px 12px 9px 24px;
	background-color: var(--color-blue-dark);
	color: var(--color-white);
	font-size: 19px;
	font-weight: 700;
	text-align: left;
}
#selfstudying #kv h2:before{
	content: '';
	display: block;
	width: 2px;
	background-color: #a9b9d5;
	position: absolute;
	top: 9px;
	bottom: 9px;
	left: 12px;
}


/* about
------------------------------------------------------------ */
#selfstudying #about{
	padding-top: 40px;
	padding-bottom: 40px;
}

#selfstudying #about h2{
	margin-bottom: 12px;
	font-size: 26px;
	line-height: 1.4;
}
#selfstudying #about h2 small{
	display: block;
	margin-bottom: 2px;
	color: var(--color-gray);
	font-size: 16px;
	text-transform: uppercase;
	line-height: 1.2;
}

#selfstudying #about h2 + p{
	margin-bottom: 12px;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}

#selfstudying #about .box{
	display: grid;
	gap: 12px;
	margin-top: 12px;
}
#selfstudying #about .box li{
	position: relative;
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 12px;
	align-items: center;
	justify-items: start;
	padding-inline: 22px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}
#selfstudying #about .box li:before,
#selfstudying #about .box li:after{
	content: '';
	display: inline-block;
	border-color: var(--color-black);
	border-style: solid;
	width: 8px;
	position: absolute;
	top: 0;
	bottom: 0;
}
#selfstudying #about .box li:before{
	left: 0;
	border-width: 2px 0 2px 2px;
}
#selfstudying #about .box li:after{
	right: 0;
	border-width: 2px 2px 2px 0;
}
#selfstudying #about .box li img{
	display: block;
	width: 48px;
	height: 48px;
}

#selfstudying #about .box + .text{
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	line-height: 1.4;
}
#selfstudying #about .box + .text:before{
	content: '▼';
	display: block;
	margin-block: 12px;
	font-size: 13px;
	scale: 1 0.65;
}

#selfstudying #about img[src$='about-img-02.png']{
	margin-block: 12px 8px;
}

#selfstudying #about .grid_btn{
	grid-template-columns: repeat(2, 1fr);
	margin-top: 12px;
}


/* boki3
------------------------------------------------------------ */
#selfstudying #boki3{
	background-color: var(--color-pink-light);
	padding-bottom: 40px;
}

#selfstudying #boki3 h2{
	padding: 12px;
	background-color: var(--color-pink);
	color: var(--color-white);
	font-size: 26px;
	line-height: 1.2;
}
#selfstudying #boki3 h2 small{
	display: block;
	font-size: 14px;
}

#selfstudying #boki3 .grid{
	display: grid;
	gap: 20px;
	padding-block: 40px 20px;
	text-align: center;
}
#selfstudying #boki3 .grid .grid_item{
	height: 100%;
	min-height: 200px;
}

#selfstudying #boki3 .grid .btn_cyan{
	display: inline-grid;
	width: auto;
	margin-top: 20px;
	margin-inline: auto;
}

#selfstudying .demo{
	margin-block: 12px;
}

#selfstudying .price_list ul{
	display: grid;
	gap: 20px;
}
#selfstudying .price_list li{
	background-color: var(--color-white);
	border: 2px solid var(--color-pink);
	text-align: center;
}
#selfstudying .price_list li .title{
	padding: 8px;
	background-color: var(--color-pink);
	color: var(--color-white);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}
#selfstudying .price_list li .title small{
	display: block;
	font-size: 14px;
}
#selfstudying .price_list li .content{
	padding: 12px;
}
#selfstudying .price_list li .price{
	color: var(--color-red);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
}
#selfstudying .price_list li .price small{
	display: inline-block;
	padding-left: 5px;
	font-size: 16px;
}
#selfstudying .price_list li .text{
	margin-block: 8px;
	font-size: 12px;
	font-weight: 700;
}

#selfstudying .price_list + .accordion{
	margin-top: 20px;
	border: 1px solid #e6e6e6;
}

#selfstudying .price_list + .accordion .acc_btn{
	cursor: pointer;
}
#selfstudying .price_list + .accordion .acc_btn:after{
	transition: rotate 0.3s ease-in-out;
}
#selfstudying .price_list + .accordion.open .acc_btn:after{
	rotate: -180deg;
}

#selfstudying .price_list + .accordion .acc_cts{
	background-color: var(--color-white);
	font-size: 16px;
	line-height: 1.4;
}
#selfstudying .price_list + .accordion .acc_cts .inner{
	padding: 12px;
	font-size: 14px;
}
#selfstudying .price_list + .accordion .acc_cts p{
	margin-bottom: 8px;
}


/* boki2
------------------------------------------------------------ */
#selfstudying #boki2{
	background-color: var(--color-green-light);
	padding-bottom: 40px;
}

#selfstudying #boki2 h2{
	padding: 12px;
	background-color: var(--color-green);
	color: var(--color-white);
	font-size: 26px;
	line-height: 1.2;
}
#selfstudying #boki2 h2 small{
	display: block;
	font-size: 14px;
}

#selfstudying #boki2 .grid{
	display: grid;
	gap: 20px;
	padding-block: 40px 20px;
	text-align: center;
}
#selfstudying #boki2 .grid .grid_item{
	height: 100%;
	min-height: 200px;
}

#selfstudying #boki2 .grid .btn_cyan{
	display: inline-grid;
	width: auto;
	margin-top: 20px;
	margin-inline: auto;
}

#selfstudying .price_list.boki2 li{
	border: 2px solid var(--color-green);
}
#selfstudying .price_list.boki2 li .title{
	background-color: var(--color-green);
}


/* discount
------------------------------------------------------------ */
#selfstudying #discount{
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: var(--color-yellow);
}

#selfstudying #discount h2{
	font-size: 26px;
	text-align: center;
}
#selfstudying #discount h2 small{
	display: block;
	font-size: 12px;
}

#selfstudying #discount .grid{
	margin-top: 20px;
}
#selfstudying #discount .grid > .grid_item:nth-of-type(2){
	font-size: 14px;
	line-height: 1.8;
}

#selfstudying #discount img[src$='discount-img-01.png']{
	width: 200px;
}
#selfstudying #discount img[src$='discount-img-02.png']{
	margin-top: 20px;
}
#selfstudying #discount .notes{
	margin-top: 20px;
}

#selfstudying .notes li{
	padding-left: 1em;
	font-size: 12px;
	line-height: 1.4;
	text-align: justify;
	text-align-last: left;
}
#selfstudying .notes li:before{
	content: '※';
	margin-left: -1em;
}


/* flow
------------------------------------------------------------ */
#selfstudying #flow{
	background-color: var(--color-gray-light);
}

#selfstudying #flow h2{
	padding-block: 16px;
	background-color: var(--color-blue-dark);
	color: var(--color-white);
	font-size: 20px;
	line-height: 1.2;
}

#selfstudying #flow .box{
	display: grid;
	gap: 20px;
	padding-block: 20px;
}
#selfstudying #flow .box > li{
	padding: 20px;
	border-radius: 16px;
	border: 2px solid var(--color-black);
	background-color: var(--color-white);
}
#selfstudying #flow .box .title{
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}
#selfstudying #flow .box img{
	margin-block: 20px 8px;
}
#selfstudying #flow .box img[src*='flow-list-01']{
	width: 230px;
}
#selfstudying #flow .box img[src*='flow-list-02']{
	width: 183px;
}
#selfstudying #flow .box img[src*='flow-list-03']{
	width: 218px;
}
#selfstudying #flow .box img[src*='flow-list-04']{
	width: 180px;
}
#selfstudying #flow .box .text{
	font-size: 14px;
	line-height: 1.8;
	text-align: justify;
	text-align-last: left;
}
#selfstudying #flow .box .text .notes{
	margin-top: 8px;
	color: var(--color-red);
	line-height: 1.4;
}
#selfstudying #flow .box .btn{
	margin-top: 8px;
}


/* rules
------------------------------------------------------------ */
#selfstudying #notes h2{
	padding-block: 16px;
	background-color: var(--color-blue-dark);
	color: var(--color-white);
	font-size: 20px;
	line-height: 1.2;
}

#selfstudying #notes .wrap{
	padding-block: 20px;
}

#selfstudying #notes .top_text{
	padding-bottom: 20px;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}
#selfstudying #notes .top_text a{
	display: inline-block;
	margin-top: 20px;
	font-size: 16px;
	font-weight: 500;
}

#selfstudying #notes .limit{
	padding-bottom: 16px;
	background-color: var(--color-gray-light);
	color: var(--color-red);
	font-size: 22px;
	font-weight: 700;
	text-align: center;
}
#selfstudying #notes .limit h3{
	margin-bottom: 16px;
	padding: 8px 8px 6px;
	background-color: var(--color-red);
	color: var(--color-white);
	font-size: 18px;
}
#selfstudying #notes .limit h3 small{
	display: block;
	font-size: 14px;
}

#selfstudying #notes dl{
	margin-top: 20px;
}
#selfstudying #notes dt{
	margin-top: 20px;
}
#selfstudying #notes dt h3{
	margin-bottom: 4px;
	padding: 2px;
	background-color: var(--color-red-light);
	color: var(--color-white);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}
#selfstudying #notes dd{
	font-size: 12px;
	line-height: 1.4;
}
#selfstudying #notes dd li{
	padding-left: 1.25em;
	font-size: 12px;
	line-height: 1.4;
	text-align: justify;
	text-align-last: left;
}
#selfstudying #notes dd li:before{
	content: '・';
	display: inline-block;
	margin-left: -1em;
	margin-right: 0.25em;
	transform: scale(1.5);
}


/* price
------------------------------------------------------------ */
#selfstudying #price h2{
	padding-block: 16px;
	background-color: var(--color-blue-dark);
	color: var(--color-white);
	font-size: 20px;
	line-height: 1.2;
}

#selfstudying #price h3{
	font-size: 26px;
	font-weight: 700;
	text-align: center;
	line-height: 1.4;
}
#selfstudying #price h3 small{
	margin-top: 8px;
	display: block;
	font-size: 14px;
}
#selfstudying #price .limit{
	display: block;
	margin-top: 8px;
	color: var(--color-red);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

#selfstudying #price .sec_boki3{
	padding-block: 40px;
	background-color: var(--color-pink-light);
}
#selfstudying #price .sec_boki3 h3{
	color: var(--color-pink);
}

#selfstudying #price .sec_boki2{
	padding-block: 40px;
	background-color: var(--color-green-light);
}
#selfstudying #price .sec_boki2 h3{
	color: var(--color-green);
}

#selfstudying #price .price_list{
	margin-top: 20px;
}


/* faq
------------------------------------------------------------ */
#selfstudying #faq{
	background-color: var(--color-gray-light);
}

#selfstudying #faq h2{
	padding-block: 16px;
	background-color: var(--color-blue-dark);
	color: var(--color-white);
	font-size: 20px;
	line-height: 1.2;
}

#selfstudying #faq .wrap{
	padding-block: 20px;
}

#selfstudying #faq .faq > li{
	border-radius: 10px;
	border: 1px solid #ccc;
	background-color: var(--color-white);
	font-size: 14px;
	overflow: hidden;
}
#selfstudying #faq .faq > li + li{
	margin-top: 8px;
}

#selfstudying #faq .faq .faq_q{
	display: grid;
	grid-template-columns: 17px 1fr 75px;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px;
	line-height: 1.8;
	text-align: justify;
	text-align-last: left;
	cursor: pointer;
}
#selfstudying #faq .faq .faq_q:before{
	align-self: self-start;
	content: '';
	display: block;
	width: 15px;
	height: 100%;
	background: url(./images/faq_q.svg) no-repeat left top 5px;
}
#selfstudying #faq .faq .faq_q:after{
	content: '見る＋';
	display: grid;
	justify-content: center;
	margin-left: 3px;
	padding: 4px 8px;
	border-radius: 50px;
	background-color: var(--color-yellow);
	font-size: 14px;
	line-height: 1.4;
}
#selfstudying #faq .faq > li.open .faq_q:after{
	content: '閉じるー';
}

#selfstudying #faq .faq .faq_a{
	max-height: 0;
	padding-inline: 25px 12px;
	line-height: 1.8;
	text-align: justify;
	text-align-last: left;
}
#selfstudying #faq .faq .faq_a .inner{
	padding-bottom: 20px;
}
#selfstudying #faq .faq .faq_a a{
	color: #2a6be3;
}

#selfstudying #faq a.indent{
	display: inline-block;
	padding-left: 1em;
	text-decoration: none;
}
#selfstudying #faq a.indent:before{
	content: '\03e';
	display: inline-block;
	margin-right: 5px;
	color: var(--color-black);
}
#selfstudying #faq a.indent + a{
	margin-left: 0.5em;
}

#selfstudying #faq .notes{
	margin-top: 8px;
}
#selfstudying #faq .notes li{
	font-size: inherit;
}
#selfstudying #faq .notes li + li{
	margin-top: 5px;
}


/* licences
------------------------------------------------------------ */
#selfstudying #licences{
	padding-block: 80px;
	background-color: var(--color-gray-light);
	font-size: 12px;
	text-align: justify;
	text-align-last: left;
	line-height: 1.5;
}





/* media
------------------------------------------------------------ */
@media (min-width: 768px){
.breadcrumb-list > li.ellipsis {
	overflow: initial;
	-o-text-overflow: initial;
	text-overflow: initial;
}
#selfstudying .spOnly{ display: none; }
#selfstudying .pcOnly{ display: block; }
#selfstudying .br{
	display: inline-block;
	margin-left: 0.5em;
}
	#selfstudying .wrap{
		max-width: 720px;
		margin-inline: auto;
	}
	#selfstudying .grid{
		grid-template-columns: repeat(2, auto);
	}

	#selfstudying .btn{
		font-size: 18px;
		padding-left: 12px;
		padding-right: 29px;
	}
	#selfstudying .btn:after{
		right: 11px;
	}

	#selfstudying #kv h2{
		padding-left: 44px;
		font-size: 24px;
	}
	#selfstudying #kv h2:before{
		left: 22px;
	}

	#selfstudying #about h2{
		margin-bottom: 20px;
		font-size: 40px;
	}
	#selfstudying #about h2 small{
		font-size: 16px;
	}
	#selfstudying #about h2 + p{
		font-size: 18px;
	}
	#selfstudying #about img[src$='about-img-01.png']{
		width: 394px;
	}
	#selfstudying #about .box{
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
		margin-top: 20px;
	}
	#selfstudying #about .box li{
		grid-template-columns: 1fr;
		grid-template-rows: 120px 1fr;
		justify-items: center;
		padding-inline: 10px;
		font-size: 14px;
		text-align: center;
	}
	#selfstudying #about .box li img{
		width: 120px;
		height: 120px;
	}
	#selfstudying #about .box + .text:before{
		margin-block: 20px 15px;
	}
	#selfstudying #about img[src$='about-img-02.png']{
		margin-block: 20px;
		width: 520px;
	}
	#selfstudying #about .grid_btn{
		gap: 24px;
	}

	#selfstudying #boki3 h2,
	#selfstudying #boki2 h2{
		padding: 16px;
		font-size: 40px;
		line-height: 1.4;
	}
	#selfstudying #boki3 h2 small,
	#selfstudying #boki2 h2 small{
		font-size: 18px;
	}
	#selfstudying #boki3 .grid,
	#selfstudying #boki2 .grid{
		grid-template-columns: auto 322px;
		gap: 38px;
		padding-block: 40px;
	}
	#selfstudying #boki3 .grid > .grid_item:nth-of-type(1),
	#selfstudying #boki2 .grid > .grid_item:nth-of-type(1){
		grid-column: 2 / 3;
		grid-row: 1;
	}
	#selfstudying #boki3 .grid > .grid_item:nth-of-type(2),
	#selfstudying #boki2 .grid > .grid_item:nth-of-type(2){
		grid-column: 1 / 2;
		grid-row: 1;
	}

	#selfstudying .demo{
		margin-block: 40px;
	}

	#selfstudying .price_list ul{
		grid-template-columns: repeat(2, 1fr);
	}
	#selfstudying .price_list + .accordion .acc_btn{
		font-size: 14px;
	}

	#selfstudying #discount h2{
		font-size: 40px;
	}
	#selfstudying #discount h2 small{
		font-size: 18px;
	}
	#selfstudying #discount .grid{
		grid-template-columns: auto 204px;
		gap: 40px;
		margin-top: 40px;
	}
	#selfstudying #discount .grid > .grid_item:nth-of-type(1){
		grid-column: 2 / 3;
		grid-row: 1;
	}
	#selfstudying #discount .grid > .grid_item:nth-of-type(2){
		grid-column: 1 / 2;
		grid-row: 1;
		font-size: 18px;
	}
	#selfstudying #discount img[src$='discount-img-02.png']{
		width: 520px;
	}
	#selfstudying #discount .notes{
		margin-top: 40px;
	}

	#selfstudying .notes li{
		font-size: 14px;
	}

	#selfstudying #flow h2{
		font-size: 22px;
	}
	#selfstudying #flow .wrap{
		max-width: min( 1024px, 90vw);
	}
	#selfstudying #flow .box{
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
		padding-block: 40px;
	}
	#selfstudying #flow .box .title{
		font-size: 22px;
	}
	#selfstudying #flow .box img{
		width: auto !important;
		height: 120px;
	}
	#selfstudying #flow .box .text,
	#selfstudying #flow .box .text .notes li{
		font-size: 16px;
	}
	#selfstudying #flow .box .btn{
		font-size: 12px;
	}

	#selfstudying #notes h2{
		font-size: 22px;
	}
	#selfstudying #notes .wrap{
		padding-block: 40px;
	}
	#selfstudying #notes .top_text{
		font-size: 22px;
	}
	#selfstudying #notes dt h3{
		font-size: 18px;
	}
	#selfstudying #notes dd li{
		font-size: 14px;
	}

	#selfstudying #price h3{
		font-size: 40px;
	}
	#selfstudying #price h3 small{
		font-size: 18px;
	}
	#selfstudying #price .limit{
		font-size: 18px;
	}

	#selfstudying #faq .wrap{
		padding-block: 40px;
	}
	#selfstudying #faq .faq li{
		font-size: 16px;
	}
	#selfstudying #faq .faq .faq_q:before{
		background-position: left center;
	}
	#selfstudying #faq .faq .faq_a{
		padding-left: 37px;
	}

	#selfstudying #licences .wrap{
		max-width: min( 1024px, 90vw);
	}

} /* @media (sp)*/





/* ------------------------------------------------------------
　以下、公開時に iframe を非表示にするスタイル
------------------------------------------------------------ */
#selfstudying #boki3 .grid > .grid_item:nth-of-type(1),
#selfstudying #boki2 .grid > .grid_item:nth-of-type(1){
	grid-column: 1 / 3;
	max-width: 80%;
	margin-inline: auto;
}
#selfstudying #boki3 .grid > .grid_item:nth-of-type(2),
#selfstudying #boki2 .grid > .grid_item:nth-of-type(2){
	display: none;
}
#selfstudying #boki3 .grid .btn_cyan,
#selfstudying #boki2 .grid .btn_cyan{
	min-width: 50%;
}
/* ------------------------------------------------------------
ここまで
------------------------------------------------------------ */