/* 日本語フォントセット */

html,body{
	font-family: sqmarket, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', Helvetica, Arial, 'Microsoft YaHei', Georgia, sans-serif;
}

/* 中国語フォントセット */
.jp_font{font-family: sqmarket, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', Helvetica, Arial, 'Microsoft YaHei', Georgia, sans-serif;}

.zh_font{font-family:"PingFang SC","Microsoft Yahei","PingHei","sans-serif";letter-spacing:1px;}
@font-face {
	font-family: 'wgpinsanadd';
	src: url('/Public/font/wgpinser+.ttf');
	url('/Public/font/wgpinser+.ttf') format('truetype');
	font-weight:nomal;
	font-style:nomal;
}

.py_font {font-family:'wgpinsanadd'}


/*
	色クラスの追加
*/

.bg-dark-444 {
	background-color: #444;
}

.bg-gray-eee {
	background-color: #eee;
}

.bg-navy {
	background-color: #00f;
}

/*
	高さクラスの追加
*/

.hh-100 {
	height: 116px;
}

/*
	bootstrap4 の navbar の拡張
*/

/* nav-itemの文字色 */
.navbar .navbar-nav .nav-link {
	color: #444;
}

/* nav-item activeの文字色 */
.navbar .navbar-nav .active>.nav-link {
	color: #444;
}

/* nav-item:focus、nav-item:hoverの文字色 */
.navbar .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
	color: 	#007bff;
}

/*
.nav-link:hover {
	background-color: #B10331;
}

.navbar-text:hover {
	background-color: #B10331;
}
*/

/* ドロップダウンアイテムの文字色
.dropdown-item {
    color: #444;
} */

/*
	bootstrap4 の nabvar のボタン部分のCSSの上書き（bootstrap.min.cssの下方に同様の定期あり）
*/

/* 無効化している */
.navbar .nav-item .nav-link::before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 0;
    margin: 0 auto;
    content: "";
    border-bottom-style: solid;
    border-bottom-width: 2px;
	border-color: #007bff;
    transition: width .2s;
	color: #444;
}
/* 無効化している */
.navbar .nav-item .nav-link:focus::before, .navbar .nav-item .nav-link:hover::before {
    width: 0%
}
/* 無効化している */
.navbar .nav-item.active .nav-link::before {
    width: 0%
}



/* 
	navbarのhover時ボーダーのためのコード
*/
/* 追加 */
.navbar .nav-item .nav-link span{
	display: inline-block; /* 幅を持たせる */
}
/* 追加 */
.navbar .nav-item .nav-link span::after{
    position: relative;/* relative指定 */
	display: block;/* block指定 */
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
	width: 100%;
    content: "";
    border-bottom-style: solid;
    border-bottom-width: 2px;
	border-color: #007bff;
    transition: transform .2s;/* transform指定 */
	color: #444;
	transform: scale(0, 1);/* デフォルトscale指定 */
}
/* 追加 */
.navbar .nav-item .nav-link span:hover::after {
	transform: scale(1, 1);/* 伸びる設定 */
  }
/* 
	end: navbarのhover時ボーダーのためのコード
*/


/* 追加 */
/* Breadcrumbのセパレート文字変更 */
.breadcrumb-item + .breadcrumb-item::before {
	content: ">";
}






/* 
	右からのモーダル部分
	参考：https://tomisan.com/wp-content/uploads/2019/01/modal-custom.html
*/

/* line 25, ../scss/_modal.scss */
.modal-dialog.dialog-right {
	width: 80%;
	height: auto;
	margin: 0;
	margin-left: auto;
  }
  /* line 29, ../scss/_modal.scss */
  .modal-dialog.dialog-right .modal-header,
  .modal-dialog.dialog-right .modal-content,
  .modal-dialog.dialog-right .modal-footer {
	border: none;
	border-radius: 0;
  }
  /* line 35, ../scss/_modal.scss */
  .modal.fade .modal-dialog.dialog-right {
	-webkit-transition: -webkit-transform 0.3s ease-out;
	transition: -webkit-transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
	transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
	-webkit-transform: translate(50px, 0);
	transform: translate(50px, 0);
  }
  /* line 39, ../scss/_modal.scss */
  .modal.show .modal-dialog.dialog-right {
	-webkit-transform: none;
			transform: none;
  }
  
  /* line 44, ../scss/_modal.scss */
  .modal-dialog.dialog-height-right {
	width: 80%;
	height: 100%;
	margin: 0;
	margin-left: auto;
  }
  /* line 48, ../scss/_modal.scss */
  .modal-dialog.dialog-height-right .modal-header, .modal-dialog.dialog-height-right .modal-content, .modal-dialog.dialog-height-right .modal-footer {
	border: none;
	border-radius: 0;
  }
  /* line 52, ../scss/_modal.scss */
  .modal-dialog.dialog-height-right .modal-content {
	height: inherit;
  }
  /* line 55, ../scss/_modal.scss */
  .modal-right.fade .modal-dialog.dialog-height-right {
	-webkit-transition: -webkit-transform 0.3s ease-out;
	transition: -webkit-transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
	transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
	-webkit-transform: translate(50px, 0);
	transform: translate(50px, 0);
  }
  /* line 59, ../scss/_modal.scss */
  .modal-right.show .modal-dialog.dialog-height-right {
	-webkit-transform: none;
			transform: none;
  }
  /* end: 右からのモーダル */


  /* ブレークポイント対応ボーダー、背景 */
  /* 参考URL：https://stackoverflow.com/questions/46412541/applying-borders-on-elements-depending-on-device-size-with-bootstrap */
  @media (min-width: 768px) {
	.border-md {
		border-top: 1px solid #e3e7eb !important;
		border-bottom: 1px solid #e3e7eb !important;
		border-left: 1px solid #e3e7eb !important;
		border-right: 1px solid #e3e7eb !important;
	}
	.border-md-right {
		border-top: 0 !important;
		border-bottom: 0 !important;
		border-left: 0 !important;
		border-right: 1px solid #e3e7eb !important;
	}
	.border-md-0 {
	  border-top: 0 !important;
	  border-bottom: 0 !important;
	  border-left: 0 !important;
	  border-right: 0 !important;
	}
	.bg-md-transparent{
		background-color: transparent !important;
	}
	.bg-md-white{
		background-color: white !important;
	}

	/* 最後の子要素だけ */
	.border-md-bottom-0-lastchild > *:last-child{
		border-bottom: none !important;
	}
  }
  @media (min-width: 992px) {
	.border-lg {
		border-top: 1px solid #e3e7eb !important;
		border-bottom: 1px solid #e3e7eb !important;
		border-left: 1px solid #e3e7eb !important;
		border-right: 1px solid #e3e7eb !important;
	}
	.border-lg-right {
		border-top: 0 !important;
		border-bottom: 0 !important;
		border-left: 0 !important;
		border-right: 1px solid #e3e7eb !important;
	}
	.border-lg-0 {
	  border-top: 0 !important;
	  border-bottom: 0 !important;
	  border-left: 0 !important;
	  border-right: 0 !important;
	}
  }
/* end: ブレークポイント対応ボーダー、背景 */

/* 検索窓プレースホルダー（保留） */
/* 一般設定 */
/*
input[placeholder="　"]::placeholder{
	background-repeat: no-repeat;
	background-size: 80%;
	background-position-y: 0.2em;
	background-image: url("data:image/svg+xml,<svg viewBox='0 0 150 150' fill='gray' xmlns='http://www.w3.org/2000/svg'><path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/><text x='20' y='15'>キーワード検索</text></svg>");
}
*/
/* FireFoxのみ、inputのbgimageのpaddingが異なるため、bgpositionを上書き設定 */
/*
@-moz-document url-prefix() {
    input[placeholder="　"]::placeholder{
		background-position-y: 0.5em;
		background-position-x: 0.5em;
	}
}
*/
/* end:検索窓プレースホルダー */


/* マイページアイコンサイズ調整 */
.myicon img{
	height: 2.5rem;

}
/* end: マイページアイコンサイズ調整 */


/* カラー上書き */
.bg-primary{
	background-color: rgb(0,122,255) !important;
}
.bg-secondary{
	background-color: rgb(229,229,229) !important;
}
.bg-light{
	background-color: rgb(243,243,243) !important;
}
.bg-dark{
	background-color: rgb(49,49,49) !important;
}
.btn-secondary{
	background-color: rgb(229,229,229) !important;
	border-color: rgb(229,229,229) !important;
	color:#333333;
}
.bg-midashi{
	background-color: rgb(108,117,125);
}
.bg-content{
	background-color: rgb(248, 249, 251) !important;
}
@media (min-width: 768px) {
	.bg-md-light{
		background-color: rgb(243,243,243) !important;
	}
	.bg-md-content{
		background-color: rgb(248, 249, 251) !important;
	}
	.bg-md-white{
		background-color: white !important;
	}
}
@media (min-width: 992px) {
	.bg-lg-transparent{
		background-color: transparent !important;
	}
	.bg-lg-white{
		background-color: white !important;
	}
}
/* end: カラー上書き */

/* バーガーボタン色変更 */
/* 背景色とボーダー */
.navbar-toggler{
	background-color: white;
	border-color: white;
	height: 2.5rem;
}
/* 3本線色 */
.navbar-toggler .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(91,161,248,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }
/* end: バーガーボタン色変更 */

/* dropdownトグルアイコン 開いたときに下向きにする */
.mytoggle::after {
	display: inline;
	font-size: 0.75em;
	content: "▼";
	line-height: 1.75em;
}
.mytoggle[aria-expanded="true"]::after {
	content: "▲";
}

.mytoggle-gmenu::after {
	display: inline;
	position: relative;
	top: -0.25em;
	font-size: 0.4em;
	content: "▼";
}
.mytoggle-gmenu[aria-expanded="true"]::after {
	content: "▲";
}

/* end: dropdownトグルアイコン 開いたときに下向きにする */

/* dropdownトグルアイコン 開いたときに下向きにする (color: primary)*/
.mytoggle-primary::after {
	display: inline;
	font-size: 1em;
	content: "▼";
	color: rgb(0,122,255);
	line-height: 1.75em;
}
.mytoggle-primary[aria-expanded="true"]::after {
	content: "▲";
}
@media (min-width: 768px) {
	.mytoggle-md-0::after{
		content: "";
	}
	.mytoggle-md-0[aria-expanded="true"]::after {
		content: "";
	}
}
@media (min-width: 992px) {
	.mytoggle-lg-0::after{
		content: "";
	}
	.mytoggle-lg-0[aria-expanded="true"]::after {
		content: "";
	}
}

/* end: dropdownトグルアイコン 開いたときに下向きにする */


/* shadowをレスポンシブ対応 */
.shadow-sm-sp{
	box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}
.shadow-sm-pc{
	box-shadow: none !important;
}
@media (min-width: 768px) {
	.shadow-sm-sp{
		box-shadow: none !important;
	}
	.shadow-sm-pc{/* 上下シャドウを.025remに変えてある */
		box-shadow: 0 .025rem .25rem rgba(0,0,0,.075)!important;
	}
}
/* end: shadowをレスポンシブ対応 */

/* [リスニング時事中文　詳細ページ]ピンインブルーテキスト */
.pinin{
	color: rgb(23,162,184);
}

/*
	[中国語歌詞ページ] --------------------------------------------
*/
/*  グリッド幅を5等分 
参考：https://qiita.com/yumayamada1029/items/3079f13a9bb3ed1e5371
*/
.col-1-5
{
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;

	width: 20%;
    float: left;
}

/*  nav下側ボーダー */
.nav-pills{
	border-bottom: solid 2px rgb(0,122,255);
}

/*  navテキストカラー */
.nav-pills a{
	background-color: rgb(229,229,229);
	color: rgb(174,174,174);
}


/* 灰色の星の色 */
.text-disstar{
	color: rgb(174,174,174);
}

/* カルーセルインジケーター位置 */
.carousel-indicators {
	top: 0;
	height: 0;
}

/*  カルーセルインジケーター丸型に */
.carousel-indicators li {
	border-radius: 50%;
	margin: 0px 0.5rem;
	height: 15px;
	max-width: 15px;
	background-color: rgb(229,229,229);
}

/*  カルーセルインジケーター色 */
.carousel-indicators .active {
	background-color: rgb(0,123,255);
}

/* 矢印ボタン位置 */
.carousel-control-prev{
	top:0;
}

/*  
	md以上の、コンテンツ部のボーダー切り替え
	(border-0のクラス指定があるものは、適用されない。)
*/
@media (min-width: 768px) {
	.tab-content > div:not(.border-0):not(.rounded-md-0){
		border: solid 1px #dee2e6 !important;
		border-radius: 0.25rem !important;
	}
}

/* md以上のrounded */
@media (min-width: 768px) {
	.md-rounded{
		border-radius: 0.25rem !important;
	}
	.rounded-md-0{
		border-radius: 0 !important;
	}
	.rounded-md-top{
		border-radius: 0.25rem 0.25rem 0 0 !important;
	}
	.rounded-md-bottom{
		border-radius: 0 0 0.25rem 0.25rem !important;
	}
	/* 最後の子要素 */
	.rounded-md-bottom-lastchild > *:last-child{
		border-radius: 0 0 0.25rem 0.25rem !important;
	}
}

/* bootstrap標準とは別に、黒色テキストを用意する。（:hoverの色に影響させないため） */
.text-black{
	color: #212529 !important;
}
/* md以上のテキストカラー変更 */
@media (min-width: 768px) {
	.text-md-black{
		color: #212529 !important;
	}
	.text-md-primary{
		color: rgb(0,122,255) !important;
	}
}

/* .w-50をsm以上のみに適用 */
@media (min-width: 576px){
	.w-sm-50{
		width: 50% !important;
	}
	.w-sm-75{
		width: 75% !important;
	}
}

@media (min-width: 768px){
	.w-md-25{
		width: 25% !important;
	}
	.w-md-50{
		width: 50% !important;
	}
	.w-md-75{
		width: 75% !important;
	}
	.w-md-100{
		width: 100% !important;
	}
}

/* .w-50をlg以上のみに適用 */
@media (min-width: 992px){
	.w-lg-50{
		width: 50% !important;
	}
	.w-lg-75{
		width: 75% !important;
	}
}

/* svgの右向き矢印をcss化。 */
.svg_arrow{
	display: inline-block;
	width: 11px;
	height: 16px;
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%20width%3D%220.66em%22%20height%3D%221em%22%20style%3D%22-ms-transform%3A%20rotate(360deg)%3B%20-webkit-transform%3A%20rotate(360deg)%3B%20transform%3A%20rotate(360deg)%3B%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201088%201664%22%3E%3Cg%20transform%3D%22translate(1088%200)%20scale(-1%201)%22%3E%3Cpath%20d%3D%22M1043%20301L512%20832l531%20531q19%2019%2019%2045t-19%2045l-166%20166q-19%2019-45%2019t-45-19L45%20877q-19-19-19-45t19-45L787%2045q19-19%2045-19t45%2019l166%20166q19%2019%2019%2045t-19%2045z%22%20fill%3D%22rgb(0%2C122%2C255)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat;
}
/* プログレスバーの縦幅 */
.progress{
	height: 0.6rem;
}

/* 理解度チェックのオーディオプレイヤー */
.card audio{
	width: 100%;
}

/* ピンインの各文字のパディング */
.pinin td{
	padding-left: 0.2rem;
	padding-right: 0.2rem;
	height: 1.4rem;
}

/* 中国語文法大全のカテゴリアイコン */
.grammar_icon{
	width: 2.5rem;
}

/* 中国語文法大全索引ページのnavbar */
.sakuin-nav{
	overflow-x:scroll;
	overflow-y:hidden;
	border-bottom: solid 2px rgb(0,122,255);
}

.sakuin-nav > a{
	min-width: 5.25rem;
	width: 5.25rem;
	white-space: nowrap;
}
.sakuin-nav > a:not(.bg-primary){
	background-color: rgb(229,229,229);
	color: rgb(174,174,174);
}


@media (min-width: 768px){
	.sakuin .accordion .card-header{
		/* 中国語文法大全索引ページのアコーディオンを、md以上のときには開閉させないようにする。 */
		pointer-events: none;
	}
	.sakuin .accordion .card-header h2, .grammar_midashi{
		/* 中国語文法大全索引ページの索引見出し */
		padding-left: 0.5rem;
		border-left: solid 6px rgb(0,122,255) !important;
		background-color: rgb(248, 249, 251) !important;
	}
}

/* チャイナモールの価格文字を小さく表示 */
.chinamall_price_small *{
	font-size: 80%;
}

/* チャイナモール商品画像 */
.chinamall_itemimg{
	object-fit: cover;
	width: 4rem;
	height: 4rem;
}

.chinamall_itemimg_active{
	border:1px solid rgb(0,122,255) !important;
}

/* select form */
#inputGroupSelect01 > select, .myformgp > select{
	height: 2rem;
}
/* select form のプルダウン（青背景の部分） */
#inputGroupSelect01::after, .myformgp::after{
	position: absolute;
	top:0;
	right:0;
	width:2rem;
	height:2rem;
	content: "▼";
	padding-top: 0.5rem;
	text-align: center;
	background-color: rgb(0,122,255);
	color: white;
	font-size: 50%;
	pointer-events: none;
	border-radius: 0 0.25rem 0.25rem 0;
}

/* オンラインスクールトップページ　sp限定のリンク部分 */
.os_sp_links{
	display: inline-block;
	height: 100%;
	color: white;
	background-color: rgb(7,42,125);
	width:100%;
	font-weight: bold;
	border: solid 1px white;
}
.os_sp_links:hover{
	color: white; /* hover時のテキストカラー */
}

/* オンラインスクールトップ：「正しい中国語を正しく学びたい」と思ったその日が吉日!! の背景画像 */
.os-bg1{
	background-image: url(/Public/img2022/onlineschool/top_2.jpg);
	background-size: cover;
	padding-top: 3rem;
	padding-bottom: 3rem;
}

/* online school 青色の半円とびだした部分 */
.os-midashi-primary{
	position: relative;
	width: 100%;
	text-align: center;
	background-color: rgb(0,122,255);
	padding-bottom: 1rem;
	z-index: 5;
}
.os-midashi-primary::before{
	position: absolute;
	display: inline-block;
	top: 0;
	left: 50%;
	transform: translate(-50%,-25%);
	width: 7rem;
	height: 6rem;
	background-color: rgb(0,122,255);
	border-radius: 50%;
	content: "　";
	z-index: 1;
}
.os-midashi-primary > img{
	position: relative;
	width: 2.5rem;
	margin-top: 1rem;
	z-index: 10;
}
.os-midashi-primary > p{
	position: relative;
	font-weight: bold;
	color: white;
	font-size: 125%;
	margin-top: 0.25rem;
	z-index: 10;
}

/* 半円飛び出したブロックの、コンテンツ下の部分の余白 */
.os-midashi-bottom{
	position: relative;
	height: 4rem;
}

/* yellowカラー */
.bg-yellow{
	background-color: rgb(255,170,7) !important;
}

/* online school 白色の半円とびだした部分 */
.os-midashi-white{
	position: relative;
	width: 100%;
	text-align: center;
	background-color: white;
	padding-bottom: 1rem;
	z-index: 5;
}
.os-midashi-white::before{
	position: absolute;
	display: inline-block;
	top: 0;
	left: 50%;
	transform: translate(-50%,-25%);
	width: 7rem;
	height: 6rem;
	background-color: white;
	border-radius: 50%;
	content: "　";
	z-index: 1;
}
.os-midashi-white > img{
	position: relative;
	width: 2.5rem;
	margin-top: 1rem;
	z-index: 10;
}
.os-midashi-white > p{
	position: relative;
	font-weight: bold;
	color: rgb(0,122,255);
	font-size: 125%;
	margin-top: 0.25rem;
	z-index: 10;
}

/* 黄色丸番号 */
.num-yellow {
	counter-reset:number; /*数字をリセット*/
	list-style-type: none!important; /*数字を一旦消す*/
	padding:0.5em;
	background: none;
}
.num-yellow .num span{
	position: relative;
	padding-left: 1.5rem;
	line-height: 1.0em;
}
.num-yellow .num span:before{
	/* 以下数字をつける */
	position: absolute;
	counter-increment: number;
	content: counter(number);
	/*以下数字のデザイン変える*/
	display:inline-block;
	background: rgb(255,170,7);
	color: white;
	font-family: 'Avenir','Arial Black','Arial',sans-serif;
	font-weight:bold;
	font-size: 80%;
	border-radius: 50%;
	left: 0;
	width: 1.3rem;
	height: 1.3rem;
	line-height: 1.3rem;
	text-align: center;
	/*以下 上下中央寄せのため*/
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

/* シアン系の色 */
.bg-cyan{
	background-color: rgb(223,249,255) !important;
}

/* 下向き三角形 primary */
.tri-midashi-primary{
	display: flex;
	align-items: center;
	height: 6rem;
	padding-bottom: 1rem;
	background-color: rgb(0,122,255);
	clip-path: polygon(0 0, 100% 0%, 100% 66%, 50% 100%, 0 66%);
}

/* イエローボタン（３ｄ） */
.btn-yellow-3d{
	background-color: rgb(255,170,7) !important;
	color: white !important;
	font-weight: bold;
	text-align: center;
	padding: 0.5rem;
	border-bottom: rgb(222,114,0) solid 4px;
}

/* 太さが2pxのボーダー(borderクラスと併用) */
.border-2px{
	border-width: 2px !important;
}

/* オンラインスクール講師ページ　レ点チェックマーク */
.os-checkmark-td{
	width: 1.5rem;
}
.os-checkmark-td > img{
	position: relative;
	top: -0.2rem;
	width: 1.5rem;
	height: 1.5rem;
}

/* x方向のパディング */
.px-2rem{
	padding-left: 2rem ;
	padding-right: 2rem;
}

/* オンラインスクールカリキュラムページ 下向き三角形 primary */
.tri-primary{
	display: flex;
	align-items: center;
	height: 4rem;
	padding-bottom: 0.5rem;
	background-color: rgb(0,122,255);
	clip-path: polygon(0 0, 100% 0%, 50% 100%);
}

/* オンラインスクールカリキュラムページ 下向き三角形 secondary */
.tri-secondary{
	display: flex;
	align-items: center;
	height: 4rem;
	padding-bottom: 0.5rem;
	background-color: rgb(147,147,147);
	clip-path: polygon(0 0, 100% 0%, 50% 100%);
}

/* オンラインスクールカリキュラムページ　　本アイコンの見出し */
/* sp */
.book-midashi{
	display: block;
	position: relative;
	background-color: #16a3b8;
	width: 100%;
	border-radius: 0;
	padding-left: 0;
	margin-top: 4rem;
	margin-bottom: 0rem;
	color: white;
	z-index: 10;
}
.book-midashi > div{
	position: relative;
	width: 100%;
	text-align: center;
	font-size: 120%;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	z-index: 20;
}
.book-midashi::before{
	position: absolute;
	top:-3.5rem;
	left:50%;
	transform: translate(-50%, 0);
	background-color: #16a3b8;
	border-radius: 2.5rem;
	width: 5rem;
	height:5rem;
	content:"　";
	background-image: url("/Public/img2022/onlineschool_curriculum/book_icon.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 55%;
	z-index: 5;
}
.bg-white-top::before{/* 要素の下半分だけ白背景にする */
	position: absolute;
	top:-5rem;
	content: "　";
	width: 100%;
	height: 5rem;
	background-color: white;
	z-index: 1;
}
/* pc */
@media(min-width: 768px){
	.book-midashi{
		display: flex;
		align-items: center;
		background-color: #16a3b8;
		height: 3.5rem;
		width: 100%;
		border-radius: 2.5rem 0 0 2.5rem;
		padding-left: 5rem;
		margin-top: 1rem;
		margin-bottom: 1rem;
		color: white;
	}
	.book-midashi > div{
		position: relative;
		display: block;
		text-align: left;
		width: 100%;
		font-size: 120%;
		padding-left: 0;
		padding-right: 1rem;
		padding-top: 1rem;
		padding-bottom: 1rem;
		z-index: 20;
	}
	.book-midashi::before{
		position: absolute;
		top:-0.75rem;
		left:0;
		transform: translate(0, 0);
		background-color: #16a3b8;
		border-radius: 2.5rem;
		width: 5rem;
		height:5rem;
		content:"　";
		background-image: url("/Public/img2022/onlineschool_curriculum/book_icon.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 55%;
	}

	/* 要素の下半分だけ白背景にする */
	.bg-white-md-bottom::before{
		position: absolute;
		top:50%;
		content: "　";
		width: 100%;
		height: 100%;
		background-color: white;
		z-index: 1;
	}
}


/* オンラインスクールカリキュラムページ　「レベルについて」　カラー */
.text-green{
	color: #16a3b8;
}

/* ul箇条書きのマーカーの非表示 */
.marker-none{
	list-style-type: none;
}

/* ul箇条書きのマーカーの表示 */
@media(min-width: 768px){
	.marker-none{
		list-style-type: disc;
	}	
}

/* オンラインスクールカリキュラムページ　上下ボーダー見出し */
.os-midashi-border-primary{
	text-align: center;
	font-weight: bold;
	color:#007bff;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	border-top: solid 3px #007bff;
	border-bottom: solid 3px #007bff;
}

/* テキストにアンダーラインをひく(cyan) */
.uline-cyan{
	background: linear-gradient(transparent 60%, #63e5e3 0%);
}

/* テキストカラーcyan */
.text-cyan{
	color: #63e5e3;
}

/* テキストカラーorange */
.text-orange{
	color: #f4b114;
}

/* オンラインスクールメソッドページ　底辺に下向きの三角を表示（吹き出し風）  色はcyan*/
.fukidashi-bottom-cyan{
	position: relative;
	margin-bottom: 1rem;
}
.fukidashi-bottom-cyan::after{
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1rem;
	height: 1rem;
	background-color: rgb(223,249,255);
	content: "　";
	transform: translate(-50%,100%);
	clip-path: polygon(0 0, 100% 0%, 50% 100%);
}

/* オンラインスクール料金プランページ　注意書きの文章あたまの長方形 */
.rect-inline{
	display: inline-block;
	width: 0.5rem;
	height: 1.5rem;
	content:"　";
}
.bg-yellow-orange{
	background-color: #ffd02c;
}
.bg-blue-green{
	background-color: #27c1bf;
}
.bg-blue-green-2{
	background-color: #16a2b8;
}
.bg-gray{
	background-color: #d1d1d1;
}


/* 下記のように色と構造を分ければ、コード量を減らせる。 */
/* online school 半円飛び出した見出し */
.os-midashi{
	position: relative;
	width: 100%;
	text-align: center;
	padding-bottom: 1rem;
	z-index: 5;
}
.os-midashi::before{
	position: absolute;
	display: inline-block;
	top: 0;
	left: 50%;
	transform: translate(-50%,-25%);
	width: 7rem;
	height: 6rem;
	border-radius: 50%;
	content: "　";
	z-index: 1;
}
.os-midashi > img{
	position: relative;
	width: 2.5rem;
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
	z-index: 10;
}
.os-midashi > p{
	position: relative;
	font-weight: bold;
	font-size: 125%;
	margin-top: 0rem;
	margin-bottom: 0;
	z-index: 10;
}

/* online school 半円見出しの色 */
/* 青緑 */
.os-midashi-bluegreen{
	background-color: #27c1bf;
}
.os-midashi-bluegreen::before{
	background-color: #27c1bf;
}

/* 背景色マットブルー */
.bg-matblue{
	background-color: #dfefff;
}

/* オンラインスクール受講までの流れレ点チェックマーク */
.os-attend-checkmark-td{
	width: 2rem;
}
.os-attend-checkmark-td > img{
	position: relative;
	top: -0.4rem;
	width: 2rem;
	height: 2rem;
}

/*オンラインスクール受講までの流れページ　各種ステップの見出し(左右が丸い)*/
.os-midashi-step{
	min-height: 5rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	border-radius: 2.5rem;
}
@media(min-width: 768px){
	.os-midashi-step{
		min-height: 3rem;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		border-radius: 1.5rem;
	}
}

/*文字を小さくして、上寄せにする。*/
.font-tophalf{
	font-size: 50%;
	vertical-align: top;
}

/* 文字の影 */
.text-shadow{
	text-shadow: -1px -1px 1px #ef8f04;
}

/* 高さ1rem */
.h-1rem{
	height: 1rem;
}
/* 高さ2rem */
.h-2rem{
	height: 2rem;
}

/* 高さmax30vw */
.h-max-30vw{
	max-height:30vw;
}

/* sm以上、高さmax25vw */
@media(min-width: 576px){
	.h-sm-max-20vw{
		max-height: 25vw;
	}
}

/* accordionの中の、カテゴリタイトルと要素のheightを統一（固定）する。ただし、文字が２列になる場合は適宜広がる。 */
.accordion-h-3rem .card-header, .accordion-h-3rem a {
	min-height: 3rem;
}


/* .h1などのクラスをレスポンシブに */
@media(min-width:768px){
	.md-h2{
		font-size: 2rem !important;
	}
	.md-h5{
		font-size: 1.25rem !important;
	}
}

/* 太めのボーダー */
.border2{
	border: solid 2px;
	border-radius: 0.25rem;
}
.border-green2{
	border-color: #14945c;
}
.border-red{
	border-color: #e60012;
}
.border-brown{
	border-color: #8a7f4a;
}
.border-navy{
	border-color: #1d2088;
}

.text-green2{
	color: #14945c;
}
.text-red{
	color: #e60012;
}
.text-brown{
	color: #8a7f4a;
}
.text-navy{
	color: #1d2088;
}

/* 要素の直後にスピーカー画像のリンク */
.after-speaker{
	display: flex;
	align-items: center;
	position: absolute;
	height: 100%;
	top:0;
	right:0;
	padding-left: 0.5rem;
	transform: translate(100%,0);
}

/****************************** blog modify ******************************/
.txtEA8010{color:#EA8010 !important;}
.txtEB4F38{color:#EB4F38 !important;}
.txt11CD6E{color:#11CD6E !important;}
.wavy{background:url(/Public/images/blog/wavy.jpg) repeat-x left bottom; padding-bottom:2px;}
/****************************** blog modify ******************************/
.txtr8{font-size:0.8rem; }
.txtr10{font-size:1rem !important;}
.txtr12{font-size:1.2rem; }
.txtr14{font-size:1.4rem; }
.txtr16{font-size:1.6rem; }
.txtr18{font-size:1.8rem; }
.txtr20{font-size:2rem; }

.error_str{display:none;color:#FF0000;}
.dashedtop{ border-top:1px dashed #CCC;}
.dashedbottom{ border-bottom:1px dashed #CCC;}
.hidden{ display:none;}
.dis_n{display:none;}
.dis_b{display:block;}
#navi  button {white-space: nowrap;}
.cf:before, .cf:after { content:"";display:table;}
.cf:after { clear:both;}
.cf{ zoom:1;}

/****************************** reg ******************************/
.inputobj{
	padding-left:20px;
	position:relative;
}
.error_div{
	position:absolute;
	top:-25px;
	right:0px;
	background:#FF0000;
	color:#FFFFFF;
	padding:2px 5px;
	font-size:12px;
	border-radius: 4px;-moz-border-radius: 4px; -weikit-border-radius: 4px; -o-border-radius: 4px; -khtml-border-radius: 4px; -ms-border-radius: 4px;
	z-index:2;
}
.error_div i{
	position:absolute;
	left:10px;
	bottom:-6px;
	width:10px;
	height:6px;
	background:url(/Public/images/triangle.png) top left no-repeat;
}
.inputright{
	background:url(/Public/images/main/reg_right.gif) top left no-repeat;
	background-position:0 5px;
}
.inputerror{
	background:url(/Public/images/main/reg_error.gif) top left no-repeat;
	background-position:0 3px;
}
.regtitle{ text-align:right;}
@media (max-width: 767px) {
	.regtitle{text-align:left;}
}
/****************************** reg ******************************/