@charset "UTF-8";

/***********************************
* 03 contents lesson関連ページ個別設定	*
***********************************/
#contents-block{
	z-index: 3;
}
/* h3,p.pc-title--------------------*/
#contents-block h3{
	margin: 0;
	padding: 0;
}
	@media only screen and ( max-width : 767px ){
		#contents-block h3{
			font-size: 1.38rem; /* 22px */
			line-height: 1.5;
			text-align: center;
			margin-bottom: 0px;
		}
		#contents-block p.pc-title{
			display: none;
		}
	}
	@media print, screen and (min-width: 768px) {
		#contents-block p.pc-title{
			font-family: 'Noto Serif JP', serif;
			font-weight: 400;
			font-size: 2.25rem; /* 36px */
			margin-bottom: 40px;
			line-height: 1.2em;
		}
	}
	@media (min-width: 992px) {
		#contents-block p.pc-title{
			font-size: 2.5rem; /* 40px */
			margin-bottom: 53px;
			line-height: 1.2em;
		}
	}
/* h4,span--------------------*/
#contents-block h4{
	color:#262322;
	font-family: 'Noto Serif JP', serif;
	font-weight: 600;
}
#contents-block h4.treatment-h4{
	color:#262322;
	font-family: "Noto Sans Japanese", "Meiryo UI", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 400;
}
#contents-block span.treatment-e {
	color: #7e669a;
}
#contents-block  p.treatment-annotation {
	font-size: 70%;
}

	@media only screen and ( max-width : 767px ){
		#contents-block h4{
			font-size: 0.94rem; /* 15px */
			margin-bottom: 25px;
		}
		#contents-block h4.treatment-h4{
			font-size: 16px;
			margin-bottom: 10px;
		}
		#contents-block  p.treatment-annotation {
			padding-bottom: 20px;
		}
	}
	@media print, screen and (min-width: 768px) {
		#contents-block h4{
			font-size: 1.13rem; /* 18px */
			margin-bottom: 30px;
		}
		#contents-block h4.treatment-h4{
			font-size: 20px;
			margin-bottom: 10px;
		}
		#contents-block  p.treatment-annotation {
			padding-bottom: 40px;
		}
	}
	@media (min-width: 992px) {
		#contents-block h4{
			font-size: 1.25rem; /* ２０px */
			margin-bottom: 40px;
		}
		#contents-block h4.treatment-h4{
			font-size: 24px;
			margin-bottom: 20px;
		}
		#contents-block  p.treatment-annotation {
			padding-bottom: 50px;
		}
	}
	@media (min-width: 1200px) {
	}

/* copy-box --------------------*/
#contents-block .copy-left,
#contents-block .copy-right{
	position: relative;
	width: 100%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}
#contents-block .copy-left .copy-box,
#contents-block .copy-right .copy-box{
}
	@media only screen and ( max-width : 767px ){
		#contents-block .copy-box,
		#contents-block .copy-box{
			position: relative;
		}
		#contents-block .copy-box .pc{
			display: none;
		}
		#contents-block .copy-box .sp img{
			display: block;
			margin-bottom: 40px;
		}
		#contents-block .copy-box .sp .copy{
			width: 90%;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 40px;
		}
		#contents-block .copy-box .sp .copy p{
			font-family: 'Noto Serif JP', serif;
			font-weight: 400;
			color:#7E669A;
			font-size: 14px;
			line-height: 1.6;
			text-align: center;
		}
		#contents-block .copy-left .txt-box,
		#contents-block .copy-right .txt-box{
			padding-left: 10px;
			padding-right: 10px;
		}
	}
	@media print, screen and (min-width: 768px) {
		#contents-block .copy-box .sp{
			display: none;
		}
		#contents-block .copy-left .copy-box,
		#contents-block .copy-right .copy-box {
			position: absolute;
			width: 48%;
		}
		#contents-block .copy-left .copy-box{
			top:0;
			left:0;
		}
		#contents-block .copy-right .copy-box{
			top:0;
			right:0;
		}
		#contents-block .copy-left .txt-box{
			padding-left: 51%;
		}
		#contents-block .copy-right .txt-box{
			padding-right: 51%;
		}

		#contents-block .copy-box .pc{
			display: flex;
			justify-content:space-between;
		}
		#contents-block .copy-box .pc .copy{
			width: 18%;
			text-align: center;
		}
		#contents-block .copy-box .pc .copy img{
			width: 25px;
		}
		#contents-block .copy-box .pc .pic{
			width: 81%;
		}
		#contents-block .copy-box .pc .pic img{
			width: 100%;
		}
		#contents-block .copy-left .txt-box .md-w100,/*タブレットの時はテキスト幅100%表示 */
		#contents-block .copy-left .txt-box .lg-w100,/*中型ディスプレイの時はテキスト幅100%表示 */
		#contents-block .copy-left .txt-box .xl-w100/*大型ディスプレイの時はテキスト幅100%表示 */
		{
			margin-left: -100%;
		}
		#contents-block .copy-right .txt-box .md-w100,
		#contents-block .copy-right .txt-box .lg-w100,
		#contents-block .copy-right .txt-box .xl-w100
		{
			margin-right: -100%;
		}
		#contents-block .pic-2-ver04/*コピー写真２枚の時ver02のテキストボックスの最低限高さ*/
		{
			min-height: 890px;
		}
	}
	@media (min-width: 992px) {
		#contents-block .copy-box .pc .copy img{
			width: 31px;
		}
		#contents-block .copy-left .txt-box .md-w100{
			margin-left: 0;
		}
		#contents-block .copy-right .txt-box .md-w100{
			margin-right: 0;
		}
		#contents-block .pic-2-ver04/*コピー写真２枚の時ver02のテキストボックスの最低限高さ*/
		{
			min-height: 1110px;
		}
	}
	@media (min-width: 1200px) {
		#contents-block .copy-left .txt-box .lg-w100{
			margin-left: 0;
		}
		#contents-block .copy-right .txt-box .lg-w100{
			margin-right: 0;
		}
		#contents-block .pic-1/*コピー写真１枚の時のテキストボックスの最低限高さ*/
		{
			min-height: 710px;
		}
		#contents-block .pic-2/*コピー写真２枚の時のテキストボックスの最低限高さ*/
		{
			min-height: 890px;
		}
		#contents-block .pic-2-ver02/*コピー写真２枚の時ver02のテキストボックスの最低限高さ*/
		{
			min-height: 1189px;
		}
		#contents-block .pic-2-ver03/*コピー写真２枚の時ver02のテキストボックスの最低限高さ*/
		{
			min-height: 1306px;
		}
		#contents-block .pic-2-ver04/*コピー写真２枚の時ver02のテキストボックスの最低限高さ*/
		{
			min-height: 1306px;
		}
		#contents-block .pic-2-ver05{
			min-height: 1000px;
		}
	}

/***********************************
* 04 voice-block	*
***********************************/
#voice-block{
	background-image: url(../img/lesson/voice_bg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
#voice-block h3{
	margin: 0;
	text-align: center;
}
	@media only screen and ( max-width : 767px ){
		#voice-block{
			padding-top: 30px;
			padding-bottom: 30px;
			top:-40px;
			margin-bottom: -40px;
		}
		#voice-block h3{
			margin-bottom:20px ;
		}
	}
	@media print, screen and (min-width: 768px) {
		#voice-block{
			padding-top: 30px;
			padding-bottom: 40px;
			top:-60px;
			margin-bottom: -60px;
		}
		#voice-block h3{
			margin-bottom: 30px;
		}
	}
	@media (min-width: 992px) {
		#voice-block{
			padding-top: 50px;
			padding-bottom: 60px;
			top:-100px;
			margin-bottom: -100px;
		}
		#voice-block h3{
			margin-bottom: 50px;
		}
	}

/* banner-01,banner-02 */
#voice-block .banner-01,
#voice-block .banner-02{
	position: relative;
}
#voice-block .banner-01 span,
#voice-block .banner-02 span{
	position: absolute;
	z-index: 12;
}
#voice-block .banner-01 span{
	right:0;
}
#voice-block .banner-01 a.a-rollover:hover span,
#voice-block .banner-02 a.a-rollover:hover span{
	opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; transition:.3s;
}
	@media only screen and ( max-width : 767px ){
		#voice-block .banner-02,
		#voice-block .banner-03{
			margin-top: 25px;
		}
		#voice-block .banner-01 span{
			top:-18px;
		}
		#voice-block .banner-01 span img{
			width: 50px;
		}
		#voice-block .banner-02 span{
			top:-25px;
			left: 20px;
		}
		#voice-block .banner-02 span img{
			width: 28px;
		}
	}
	@media print, screen and (min-width: 768px) {
		#voice-block .banner-02,
		#voice-block .banner-03{
			margin-top: 40px;
		}
		#voice-block .banner-01 span{
			top:-25px;
		}
		#voice-block .banner-01 span img{
			width: 74px;
		}
		#voice-block .banner-02 span{
			top:-33px;
			left: 60px;
		}
		#voice-block .banner-02 span img{
			width: 39px;
		}
	}
	@media (min-width: 992px) {
		#voice-block .banner-02,
		#voice-block .banner-03{
			margin-top: 60px;
		}
		#voice-block .banner-01 span{
			top:-29px;
		}
		#voice-block .banner-01 span img{
			width: 84px;
		}
		#voice-block .banner-02 span{
			top:-38px;
			left: 78px;
		}
		#voice-block .banner-02 span img{
			width: 44px;
		}
	}