@charset "utf-8";
@import"base.css";
@import"contents.css";

.dlarea { padding: 20px 14px; background-color: #ffffec; border: 1px dashed #ff9933; }
.dlarea .center { text-align: center; }		
.dlarea .dlarea_ttl {
	height:1.5em; margin-bottom:10px; padding-left:0;
	color:#ff6600; font-weight:bold; font-size:larger; background-image:none; }
.dlarea .dlarea_ttl img{ width:23px; height:100%; margin-right:0.5em; vertical-align:middle; }
.dlarea ul { text-align:center; }
.dlarea .next_year { padding-top: 15px; }

.attention {
	padding: 10px; color: #F32156; text-align: center; font-style: normal; font-weight: normal;
	background-color: #FFF4F8; border: 3px double #FF8EAB; }
.box_tokuwari { margin: 15px; padding:20px 30px 30px;  background-color: #FBFBF9; border: 2px solid #D5D5D5; }
.zemi_table .tbl_charge{width:100%;}
#charge .koumoku {
	margin:25px 0 10px; padding:0 5px 0 1.5em;
	color: #FF6600; font-weight: bold; text-transform: none; font-size: larger; border-bottom:1px dashed #FF9900; position:relative; }
.zemi_table h3{position:relative; padding-left:1.7em; margin:2em 0 0.5em;}
#charge .koumoku:before,.zemi_table h3:before{
	content:'●';
	width:1em;
	height:1em;
	position:absolute;
	left:0.4em;
}
#charge .menu { margin: 5px 0; }

.tbl_charge { margin-bottom:15px; border-collapse:collapse; }
.tbl_charge th, .tbl_charge td { border:1px solid #999; }
.tbl_charge td { background:#fff; padding:5px 10px; font-size: 90%; text-align: center; }
.tbl_charge .td_y { background:#FFFFCC; min-height:18px; }
.tbl_charge .td_g { background:#ddd; min-height:18px; }
.tbl_charge .center { text-align: center; white-space:nowrap; }
.tbl_charge .left   { text-align: left; }
.tbl_charge .td_num  { color: #666666; }
.tbl_charge .td_once { font-weight: bold; }
.tbl_charge .td_toku { font-weight: bold; color:#FF3366; background:#FFF4F8; }

.tbl_tokuwari th { background:#ff7700; color:#fff; }
.tbl_tokuwari th, .tbl_tokuwari td { border:1px solid #ff7700; }


/* 映像講座 */
#main .table_scroll .tbl_option td { width: auto; }
#main .table_scroll .tbl_option td.td_1 { width:6em; }
#main .table_scroll .tbl_option td.td_2 { width:6em; }
#main .table_scroll .tbl_option td.td_3 { width:auto; }
#main .table_scroll .tbl_option td.td_4 { width:7em; }
#main .table_scroll .tbl_option td.td_5 { width:7em; }



#charge .comment { margin-left: 1em; }
#charge .comment li { text-indent: -1em; margin-bottom: 3px; }
#charge .comment li:before { content: "※"; }

#charge .comment_count { margin-left: 2em; }
#charge .comment_count li { text-indent: -2em; counter-increment: number; }
#charge .comment_count li:before { content: "※"counter(number)" "; }

#charge ul.liststyle_disc {
	margin-left: 1.5em;
}
#charge ul.liststyle_disc > li {
	list-style: disc;
}

.toggle .br{display:inline-block; margin-left:1em;}
.calculation{
	background:#f7c8dc;
	padding:1em;
	margin-bottom:2.5em;
	font-size: 90%;
}

.calculation div{
	display:inline-block;
	margin-right:4.6%;
	vertical-align:top;
	position:relative;
	box-sizing:border-box;
}
.calculation div:after{
	width:1em;
	height:1em;
	position:absolute;
	top:1em;
	right:-1.4em;
	font-weight:bold;
	color:#191919;
	font-size:150%;
}
.calculation .entry {width: 20%;}
.calculation.ex_tax .entry {width: 15%;}

.calculation .year {width: 20%;}
.calculation.ex_tax .year {width: 15%;}

.calculation .overhead {width:14%; text-align:right;}

.calculation .overhead2 { width: 20%; }
.calculation.ex_tax .overhead2,
.calculation .tax{ width: 15%; }

.calculation .option{width:32%;}

.calculation .plus:after{ content:'＋'; }
.calculation .equal:after{ content:'＝'; }

.calculation .total{ width: 23%; margin-right: 0;}
.calculation.ex_tax .total{ width: 18%; margin-right: 0;}

.ch_j .calculation .entry,
/*.ch_j .calculation .year{ width:12%; }*/
.ch_j .calculation .option{width:20%;}
/*.ch_j .calculation div { margin-right:2.8%; }
.ch_j .calculation div:after {right:-1.1em; }*/
.ch_j .calculation .total{ width:23%; margin-right:0;}

.tsudai .calculation .entry {width: 28%;}
.tsudai .calculation .year {width: 28%;}
.tsudai .calculation .total {width: 28%;}



.calculation div dl{ border:solid 1px #abaeab; margin-bottom:0.5em; }
.calculation div dt,
.calculation div .price{
	padding:0.5em 0;
	text-align:center;
	background:#efefef;
	border-bottom:solid 1px #abaeab;
	box-sizing:border-box;
}
.calculation div dt {
	line-height: 1.2;
}
.calculation div .price{
	background:#fff;
	border:none;
}
.calculation .total dl{
	border:solid 3px #1b1b1b;
}
.calculation div .price span{
	font-weight:bold;
	display:inline-block;
	margin-right:0.25em;
}

.calculation .year .price,
.calculation .total .price,
.calculation .tax .price,
.calculation .overhead .price,
.calculation .overhead2 .price,
.calculation .option .price{
	text-align:right;
	padding-right:0.5em;
}
.cap{
	text-align:left;
	padding-left:1em;
	font-size:80%;
	position:relative;
	margin-bottom:0;
}
.cap:before{
	content:'＊';
	width:1em;
	height:1em;
	position:absolute;
	left:0;
}
.calculation .cap {
	line-height: 1.3;
}

#main .zemi_table p{margin-bottom:0.5em;}
#main .zemi_table .cap{margin-bottom:0.5em;}
#charge #charge_intro { margin-bottom: 20px; border: solid 1px #ccc; font-size: 90%; }
#charge #charge_intro h5 { padding: 5px; background: #dfdfdf; text-align: center; font-size: 100%; }
.pricebox{background:none; border:1px #000 solid; font-size:100%;font-weight:bold; display:inline-block; padding: 0.5em; margin-bottom:0.5em; line-height: 1;}
#tanka_pc, #tanka_sp { width:100%; }
#tanka_sp { display: none; }
#cfc { margin-bottom: 30px; }

.bnr_wteacher {
    margin-top: 20px;
    text-align: center;
}


.pinkbox {
	margin-top: 20px;
	padding: 20px 20px 10px;
	background-color: #FFE8F3;
}
.pinkbox h4 {
	margin-bottom: 10px;
	font-size: 110%;
}

/* 映像でも視聴できます */
#charge #online {
	margin-bottom: 40px;
	padding: 20px;
	/*background-color: #ffffec; */
	background-color: #FFF6ED;
/*	border: 1px dashed #ff9933; */
}
#charge #online .ttl {
	margin-bottom: 0.8em;
	color: #f60;
	font-size: larger;
	font-weight: bold;
}
#charge #online .ttl span {
	display: inline-block;
	margin-right: 0.5em;
	padding: 5px;
	background-color: #f60;
	color: #fff;
	font-weight: bold;
	line-height: 1;
	border-radius: 5px;
}
#charge #online img {
	width: 33%;
}
#charge #online #online_wrapper {
	display: flex;
}

#kitei {
	margin-bottom: 30px;
/*	border: 2px solid #f93; */
}


@media (max-width:480px){
	.dlarea .dlarea_ttl {
		margin-bottom:10px;
		height:auto;
		font-size:1.5rem;
	}
	.dlarea .dlarea_ttl img {
		margin-right: 0;
	}
	
	#charge .menu { margin: 5px auto !important; }
	.tbl_charge td { padding:5px; }
	#tanka_pc { display: none; }
	#tanka_sp { display: block; margin:0 auto; width:90%;}

	.tbl_charge td {
		font-size: 100%;
	}

	.zemi_table h3{
		font-size: 1.8rem;
	}


	.pinkbox h4 {
		font-size: 1.8rem;
		line-height: 1.5;
	}

	/* 映像でも視聴できます */
	#charge #online {
		padding: 20px 14px;
	}
	#charge #online img {
		width: 100%;
		float: none;
		margin: 0 0 0.8em;
	}

}

/*----------------- レスポンシブ統合用のCSS */
#main .con_h2 span#sub_h2 {
	border-left: none;
	height: auto;
	letter-spacing: 1px;
	padding: 0;
}
/* タブレット以下*/
@media (max-width: 768px) {
	#main .con_h2 {
		padding-bottom: 10px;
	}
	#main .g12 div.con_h2{
		background: #eef9df none repeat scroll 0 0;
		border-top:4px solid #8ec643;
	}
	#main .g3 div.con_h2{
		background: #e9f2f7 none repeat scroll 0 0;
		border-top:4px solid #6bb6d9;
	}
	#main .ch_j div.con_h2{
		background: #ffecf6 none repeat scroll 0 0;
		border-top:4px solid #ea7bb3;
	}
	#main .tsudai div.con_h2{
		background: #f3f4ff none repeat scroll 0 0;
		border-top:4px solid #6d78d3;
	}
	#main div.con_h2 span#sub_h2 {
		font-size:16px;
		display:block;
	}
	#main .top div.con_h2 .main_ttl {
		background-image: url("/charge/images/carge_head_bg.jpg");
	}
	#main .top div.con_h2 .main_ttl span{
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		margin:auto 0;
		line-height:1.5em;
		height:1.5em;
		padding:0.5em 2em 0.5em 1em;
		background: -moz-linear-gradient(left,  rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 80%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 80%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 80%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
		color:#0e357f;
		text-shadow:0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #fff;
		font-size:120%;
	}
	
	
	#main .con_h2 span:first-child {
		font-size:28px;
	}
	
	#main .con_h2 p {
		background: none;
	}
	.attention{
		border:none;
		background:none;
		font-weight:bold;
		text-align:left;	
	}
	#charge .koumoku{
	  padding: 4% 6%;
    background-color: #0e357f;
    color: #FFF;
    font-size: 116%;
    font-weight: bold;
    clear: both;
		border:none;
		margin-bottom:1em;
	}
	#charge .koumoku:before{
		content:none;
	}
	#charge p{padding:0 1em;}
	.tbl_charge{width:90%; margin:0 auto 10px;}
	.pricebox{font-size:110%; margin-left:0.7em;}
	.tbl_charge td{
		text-align: center;
    width: 50%;
		border: 1px solid #333;
    padding-top: 1%;
    padding-bottom: 1%;
	}
	
	.charge_list {
		text-align: center;
	}
	
	.tbl_tokuwari th { width: 2em; border:1px solid #ff7700; }
	.tbl_tokuwari td { width: auto; border:1px solid #ff7700; }

	#charge .comment { padding: 0 1em; }
	
	.tbl_55speaking td.td_y { width:25%; }
	.tbl_55speaking td.td_num { width: 50%; }
	
	.tbl_j_shokeihi td.td_g { width: auto; }
	.tbl_j_shokeihi td.td_y,
	.tbl_j_shokeihi td.td_num { width: 25%; }
	
	#main .zemi_table{padding:0 1em;}
	#main .zemi_table p{padding:0;}
	#main .zemi_table .cap{padding-left:1em;}
	#main .zemi_table .tbl_charge td.td_g{background: #ddd;}
	#main .zemi_table .tbl_charge td{width:33%;}
	#main .zemi_table .tbl_charge td.td_y { width: 40%; }
	.toggle{position:relative;}
	.toggle .br{display:block; margin-left:0;}
	
	
	#main .toggle .no-pc{margin-bottom:0;}
	.toggle .btn{
		width:1.5em;
		height:1.5em;
		display:block;
		position:absolute;
		right:1em;
		top:0;
		bottom:0;
		margin:auto 0;
		background:url(/common/images/sp/icon_ttl_arrow_off.png) no-repeat center;
		background-size:contain;
		cursor:pointer;
	}
	.toggle .on .btn{background:url(/common/images/sp/icon_ttl_arrow_on.png) no-repeat center; background-size:contain;}
	.sltoggle{display:none;}
	.calculation{background:none; padding:1em;margin-bottom: 0;}
	.calculation div{display:block; background:#E6EFFF; padding:1em 1em 0; width:100%; border:solid 1px #000;}
	
	.calculation .entry,
	.calculation.ex_tax .entry,
	.ch_j .calculation .entry,
	.tsudai .calculation .entry {
		width: 100%;
		border-bottom:none;
	}
	
	.calculation .year,
	.calculation.ex_tax .year,
	.ch_j .calculation .year {
		width: 100%;
		border-top:none;
		border-bottom:none;
	}
	.tsudai .calculation .year {
		border-bottom: 1px solid #000;
	}
	.calculation .overhead {
		width: 100%;
		margin-bottom:0;
		border-top:none;
		border-bottom:none;
	}
	.calculation .overhead2,
	.calculation.ex_tax .overhead2,
	.calculation .option,
	.ch_j .calculation .option,
	.tsudai .calculation .year {
		width: 100%;
		margin-bottom:3.6em;
		padding-bottom: 1em;
		border-top:none;
	}
	.calculation .tax {
		width: 100%;
		margin-bottom:5em;
		padding-bottom: 1em;
	}
	
	.calculation .plus:after {
		content: none;
	}
	.calculation .plus_sp:after {
		content: '＋';
		font-size:200%;
		width:2.5em;
		text-align:center;
		height:1em;
		top:inherit;
		left:0;
		right:0 !important;
		bottom:-1.5em;
		margin:0 auto;
	}
	.calculation .equal:after {
		content:'| |';
		font-size:200%;
		width:2.5em;
		text-align:center;
		height:1em;
		top:inherit;
		left:0;
		right:0 !important;
		bottom:-1em;
		margin:0 auto;
	}
	.calculation div dl{ border:#000 solid 1px; background:#fff; padding:0.5em; display:table; width:100%; margin:0; box-sizing:border-box;}
	.calculation .total,
	.calculation.ex_tax .total,
	.ch_j .calculation .total,
	.tsudai .calculation .total {
		width: 100%;
		border:none; padding:0; background:none;
	}
	.calculation .total dl{background:#E6EFFF; width:100%; padding:1em 2em; border:solid 1px #000;}
	.calculation div dt,.calculation div .price{display:inline-block; display:table-cell; margin:0; background:none; border:none;}
	.calculation div dt{text-align:left; font-weight:bold;}
	.calculation div .price{text-align:right; padding:0;}
	.calculation div .price span{font-weight:normal;}
	#main .calculation .cap{
		margin: 5px 0 0;
	}

	#cfc {margin:0 1em 2em;/* border: 1px solid #333;*/}
	#charge_intro{margin:0 1em 1em;}
	#main #cfc .pht_left{float:none; display:block; text-align:center; margin:0 auto 0.5em; width:auto;}
	
	.yr_box{background:#f9f5cd; padding-bottom:1em; margin-bottom:3em;}
	.yr_box .wrap_600{width:78%; margin:0 auto;}
	.yr_box .wrap_600 .mv{margin-bottom:1em;}
	.yr_box .yr_btn_box{text-align:center; margin:0 1em;}
	.yr_box .yr_btn_box a{margin-bottom:1em; display:inline-block;}
	.nounyu{margin-bottom:8%;}
	
	
	.calculation .nounyu h4 {
		padding: 10px;
		background-color: #0e357f;
		color: #fff;
	}
	
		/* 映像でも視聴できます */
	#charge #online {
		margin: 0 1em 1em;
	}

}


/* スマホ以下 */
@media (max-width:480px){
	
	#main .top div.con_h2 .main_ttl {
		height: 5em !important;
	}
	#main .con_h2 span:first-child {
		font-size: 2.8rem;
	}
	#main .tsudai div.con_h2 span:first-child{
		line-height: 1.2;
	}
	#main .tsudai div.con_h2 span#sub_h2 {
		line-height: 1.7;
	}
	
	#main .top div.con_h2 p {
		text-align: left;
	}
	
	#charge .koumoku{
		padding: 4%;
		font-size: 2rem;
	}
	
	/* 映像講座 */
	#main .table_scroll {
		width: 90%;
		margin: 0 auto;
		overflow: auto;
		white-space: nowrap;
	}
	#main .table_scroll .tbl_option {
		width: auto;
	}
	#main .table_scroll .tbl_option td {
		font-size: 90%;
		line-height: 1.2;
	}	
	
	.calculation {
		padding: 0 1em 1em;
		font-size: 100%;
	}
	#charge .calculation p:first-child {
		padding: 0;
	}
	
	#charge #online .comment {
		padding: 0;
	}

}
@media (max-width:370px){

	#charge .koumoku{
		font-size: 100%;
	}
}