@charset "utf-8";

/* ----------------------------------------
	レッツ英会話スクール

	英会話css
	english.css

	create 20140623 T.Y
---------------------------------------- */

/* ---------------------------------------------------------
	約320px未満の画面向けスタイル モバイルファースト
--------------------------------------------------------- */
/* ----- #main_left ----- */
#main_left {
}


/* ----- #main_right ----- */
#main_right {
}
#main_right .title_box .h3_title .b-logo {
    position: absolute;
    top: -13px;
    left: -10px;
    width: 180px;
}
#main_right .title_box .h3_title .b-logo img {
    width: 100%;
}
#main_right .title_box .copy_box_b {
	width: 100%;
	text-align: right;
	font-size: 20px;
	font-weight: bold;
	color: #0081CC;
}
#main_right .text_box {
	width: 100%;
	margin: 0 auto 30px;
	text-align: left;
}
#main_right .text_box .photo_right {
	width: 100%;
	margin: 0 0 10px;
}
#main_right .text_box .photo_right img {
	width: 100%;
}
#main_right .text_box .imgBox {
	width: calc(100% - 20px);
}
#main_right .text_box .imgBox img {
	width: calc(50% - 5px);
	margin: 0 5px 10px 0;
}
#main_right .text_box h4 {
	font-size: 24px;
	font-weight: normal;
	margin: 0 0 10px;
}
#main_right .text_box h4 .comment {
	font-size: 16px;
}
#main_right .text_box .setumei_box {
	background-color: #EDEDED;
	border: 1px solid #CCCCCC;
	border-radius: 10px;
	padding: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
	float: left;
	margin-top: 5px;
}
#main_right .text_box .setumei_box p {
	margin-bottom: 5px;
}
#main_right .b_box {
	width: 670px;
	margin: 0 auto 30px;
	text-align: left;
}
#main_right .b_box h3 {
	font-size: 20px;
	color: #0081CC;
	margin: 0 0 20px;
	padding: 10px;
	border-bottom: 2px solid #0081CC;
}
#main_right .b_box .b_box_class {
	margin: 0 0 30px;
	padding: 0;
}
#main_right .b_box .b_box_class h4 {
	font-size: 20px;
	color: #0081CC;
}
#main_right .b_box .b_box_class h4 span {
	font-size: 16px;
	font-weight: normal;
	color: #333;
}

#main_right .cost_box {
	width: calc(100% - 20px);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	text-align: left;
}
#main_right .cost_box h4 {
	font-size: 20px;
	margin-bottom: 10px;
}
#main_right .cost_box .taxBox {
	font-size: 14px;
	text-align: right;
}
#main_right .cost_box table {
	border-left-color: #CCCCCC;
	border-left-width: 1px;
	border-right-style: solid;
	border-top: 1px solid #CCCCCC;
	width: 100%;
	margin-bottom: 10px;
}
#main_right .cost_box table th {
	width: calc(100% / 5);
	background-color: #0081CC;
	color: #FFFFFF;
	font-weight: normal;
	padding: 10px;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
}
#main_right .cost_box table td {
	width: calc(100% / 5);
	padding: 10px;
	text-align: center;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
}
#main_right .cost_box table.second td {
	width: calc((100% / 5) * 2);
}
#main_right .cost_box_left {
	width: 100%;
	margin: 10px 0;
}
#main_right .cost_box_left table {
	width: 100%;
	border-left-color: #CCCCCC;
	border-left-width: 1px;
	border-right-style: solid;
	border-top: 1px solid #CCCCCC;
	margin-bottom: 5px;
}
#main_right .cost_box_left table th {
	width: 150px;
	background-color: #0081CC;
	color: #FFFFFF;
	font-weight: normal;
	padding: 10px;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
}
#main_right .cost_box_left table td {
	width: calc(100% - 150px);
	line-height: 1.3;
	padding: 10px;
	text-align: center;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
}
#main_right .cost_box_left .comment {
	color: #f00;
	font-size: 85%;
}
#main_right .upicBox {
	width: 100%;
	margin: 10px 0;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 10px;
	background-color: #EDEDED;
}
#main_right .upicBox h4 {
	font-size: 20px;
	margin: 0 0 10px;
}
#main_right .b-box2 {
	width: 100%;
	margin: 0 0 10px;
	display: flex;
	justify-content: space-between;
}
#main_right .b-box2 p {
	text-align: left;
}
#main_right .b-box2 p:last-of-type {
	font-size: 12px;
	text-align: center;
}
#main_right .b-box2 iframe {
	width: 100%;
	height: 350px;
}



@media screen and (min-width: 370px){
	/*	約370px以上の画面向けスタイル */

}



@media screen and (min-width: 560px){
	/*	約560px以上の画面向けスタイル */

}



@media screen and (min-width: 740px){
	/*	約740px以上の画面向けスタイル second tablet */

	#main_right .text_box .photo_right {
		width: 50%;
		margin: 0 0 10px 10px;
		float: right;
	}
	#main_right .text_box h4 {
		margin: 0 0 15px;
	}
}



@media screen and (min-width: 980px){
	/*	約980px以上の画面向けスタイル second tablet  */

	#container .tweet_box {
		top: 178px;
	}

	/* ----- #main_left ----- */
	#main_left {
	}


	/* ----- #main_right ----- */
	#main_right {
	}
	#main_right .title_box .h3_title .b-logo {
	    position: absolute;
	    top: -13px;
	    left: -10px;
	    width: 180px;
	}
	#main_right .title_box .h3_title .b-logo img {
	    width: 100%;
	}
	#main_right .title_box .copy_box_b {
		width: 100%;
		text-align: right;
		font-size: 20px;
		font-weight: bold;
		color: #0081CC;
	}
	#main_right .text_box {
		width: 670px;
		margin: 0 auto 30px;
		text-align: left;
	}
	#main_right .text_box .imgBox {
		width: calc(100% - 20px);
	}
	#main_right .text_box .imgBox img {
		width: calc(50% - 5px);
		margin: 0 5px 10px 0;
	}
	#main_right .text_box h4 {
		font-size: 24px;
		font-weight: normal;
		margin: 0 0 10px;
	}
	#main_right .text_box h4 .comment {
		font-size: 16px;
	}
	#main_right .text_box .setumei_box {
		background-color: #EDEDED;
		border: 1px solid #CCCCCC;
		border-radius: 10px;
		padding: 10px;
		margin-bottom: 10px;
		margin-right: 10px;
		float: left;
		margin-top: 5px;
	}
	#main_right .text_box .setumei_box p {
		margin-bottom: 5px;
	}
	#main_right .b_box {
		width: 670px;
		margin: 0 auto 30px;
		text-align: left;
	}
	#main_right .b_box h3 {
		font-size: 20px;
		color: #0081CC;
		margin: 0 0 20px;
		padding: 10px;
		border-bottom: 2px solid #0081CC;
	}
	#main_right .b_box .b_box_class {
		margin: 0 0 30px;
		padding: 0;
	}
	#main_right .b_box .b_box_class h4 {
		font-size: 20px;
		color: #0081CC;
	}
	#main_right .b_box .b_box_class h4 span {
		font-size: 16px;
		font-weight: normal;
		color: #333;
	}

	#main_right .cost_box {
		width: calc(100% - 20px);
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
		text-align: left;
	}
	#main_right .cost_box h4 {
		font-size: 20px;
		margin-bottom: 10px;
	}
	#main_right .cost_box .taxBox {
		font-size: 14px;
		text-align: right;
	}
	#main_right .cost_box table {
		border-left-color: #CCCCCC;
		border-left-width: 1px;
		border-right-style: solid;
		border-top: 1px solid #CCCCCC;
		width: 100%;
		margin-bottom: 10px;
	}
	#main_right .cost_box table th {
		width: calc(100% / 5);
		background-color: #0081CC;
		color: #FFFFFF;
		font-weight: normal;
		padding: 10px;
		border-right: 1px solid #CCCCCC;
		border-bottom: 1px solid #CCCCCC;
	}
	#main_right .cost_box table td {
		width: calc(100% / 5);
		padding: 10px;
		text-align: center;
		border-right: 1px solid #CCCCCC;
		border-bottom: 1px solid #CCCCCC;
	}
	#main_right .cost_box table.second td {
		width: calc((100% / 5) * 2);
	}
	#main_right .cost_box_left {
		width: calc(100% - 300px);
		margin: 10px;
		float: left;
	}
	#main_right .cost_box_left table {
		width: 100%;
		border-left-color: #CCCCCC;
		border-left-width: 1px;
		border-right-style: solid;
		border-top: 1px solid #CCCCCC;
		margin-bottom: 5px;
	}
	#main_right .cost_box_left table th {
		width: 150px;
		background-color: #0081CC;
		color: #FFFFFF;
		font-weight: normal;
		padding: 10px;
		border-right: 1px solid #CCCCCC;
		border-bottom: 1px solid #CCCCCC;
	}
	#main_right .cost_box_left table td {
		width: calc(100% - 150px);
		padding: 10px;
		text-align: center;
		border-right: 1px solid #CCCCCC;
		border-bottom: 1px solid #CCCCCC;
	}
	#main_right .cost_box_left .comment {
		color: #f00;
		font-size: 85%;
	}
	#main_right .upicBox {
		width: calc(100% - 20px);
		margin: 10px 0;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 10px;
		background-color: #EDEDED;
	}
	#main_right .upicBox h4 {
		font-size: 20px;
		margin: 0 0 10px;
	}
	#main_right .b-box2 {
		width: 100%;
		margin: 0 0 10px;
		display: flex;
		justify-content: space-between;
	}
	#main_right .b-box2 p {
		text-align: left;
	}
	#main_right .b-box2 p:last-of-type {
		font-size: 12px;
		text-align: center;
	}
	#main_right .b-box2 iframe {
		width: 100%;
		height: 350px;
	}
}



@media screen and (min-width: 1200px){
	/*	約1200px以上の画面向けスタイル pc(HD) */

}



@media screen and (min-width: 1600px){
	/*	約1600px以上の画面向けスタイル pc(Full HD) */

}