@charset "utf-8";
/* monitor Page CSS */
html{
    font-size: 62.5%;
}
body{
    font-size:1.6rem;/* 16px*/
    line-height: 2;
}



/* メインビジュアル
------------------------------------------------------- */
@media (max-width: 768px) {
.bg-main {
width: 100%;
height: 0;
padding-top: 53.33%;
background-image: url("../../reviews/img/mainImg_sp.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
}
@media (min-width: 769px) {
.bg-main {
width: 100%;
height: 0;
padding-top: 29.16%;
background-image: url("../../reviews/img/mainImg_pc.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
}


.bg-main {
position: relative;
}
.bg-main h1 {
position: absolute;
background-color: #ef6262;
padding: 5px 10px;
color: #FFF;
font-weight: bold;
font-size: 1.8rem;/* 18px*/
bottom: 40px;
left: 30px;
margin-right: 30px; 
}
.bg-main h1 span {
display: block;
font-size: 1.2rem;/* 12px*/
}


@media (min-width: 769px) {
.bg-main h1 {
font-size: 2.4rem;/* 24px*/
bottom: 40px;
left: 10%;
}
.bg-main h1 span {
font-size: 1.2rem;/* 12px*/
left: 10%;
}
}
@media (max-width: 320px) {
.bg-main h1 {
font-size: 1.4rem;/* 14px*/
}
}

/* コンテンツエリア設定
------------------------------------------------------- */
#monitorPage .contents-wrap {
background-image: url("../../reviews/img/pink_bg.jpg");
}

.contents-box {
width: 100%;
padding: 40px 30px; /* 上下左右　whiteエリア余白 */
background-color: #FFF;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.contents-box-inner,
.contents-box-inner-re {
display: flex;
flex-wrap: wrap;
margin-bottom: 40px;
}

.contents-box p.txt-lead {
margin-bottom: 40px;
}

.text-box {
width: 100%;
}

.img-box {
width: 100%;
}
.img-box img {
width: 100%;
}

@media (min-width: 981px) {
.contents-box-inner,
.contents-box-inner-re {
justify-content:space-between;
margin-bottom: 60px;
}
.contents-box-inner-re {
flex-direction: row-reverse;
}


.contents-box {
width: 980px;
padding: 60px 100px;
background-color: #FFF;
margin: 0 auto;
}

.contents-box p.txt-lead {
margin-bottom: 60px;
}
.text-box {
width: 440px;
}
.img-box {
width: 300px;
}

}


/* 見出し
------------------------------------------------------- */
#monitorPage h2 {
position: relative;
border: 6px double #fad0d0;
padding: 5px;
font-size: 2.0rem;/* 20px*/
font-weight: 900;
color: #ef6262;
margin-bottom: 20px;
}

#monitorPage h2 span {
font-family: 'Roboto', sans-serif;
background-color: #f17878;
border-radius: 50%;
padding: 5px 12px;
font-size: 2.0rem;/* 20px*/
color: #fff;
font-weight: 900;
margin-top: 5px;
margin-right: 10px;
}


@media (min-width: 981px) {
#monitorPage h2 {
font-size: 2.6rem;/* 26px*/
padding: 8px;
margin-bottom: 40px;
}
#monitorPage h2 span {
font-size: 2.4rem;/* 24px*/
}
}
@media (max-width: 320px) {
#monitorPage h2 {
font-size: 1.6rem;/* 16px*/
}
#monitorPage h2 span {
font-size: 1.2rem;/* 12px*/
padding: 5px 8px;
margin-right: 5px;
}
}
/* テキスト装飾
------------------------------------------------------- */
.text-box .t-red {
color: #ef6262;
font-weight: 900;
}
.text-box .t-blue {
color: #6287ef;
font-weight: 900;
}


.ttl-teacher,.ttl-monitor {
  position: relative;
  line-height: 1.4;
  padding: 10px;
  border-radius: 0 5px 5px 5px;
	margin-top: 40px;
}

.ttl-teacher:after,.ttl-monitor:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: 900;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 5px 10px;
  font-size: 1.2rem;/* 12px*/
  line-height: 1;
	text-align: center;
}
.ttl-teacher {
  background: #fef1f1;
}
.ttl-monitor {
  background: #eff3fd;
}
.ttl-teacher:after {
  content: '先生';
  background: #f17878;
}
.ttl-monitor:after {
  content: 'モニター';
  background: #6287ef;
}



.contents-box p {
margin-bottom: 20px;
}

h3.txt-impress {
color: #eda104;
font-size: 1.4rem;/* 14px*/
font-weight: 900;
border-bottom: 2px solid #eda104;
margin-bottom: 10px;
}
h3.txt-impress i {
margin-right: 5px;
}

@media (min-width: 981px) {
.ttl-teacher,.ttl-monitor {
margin-top: 20px;
}
.contents-box p {
margin-bottom: 40px;
} 
}


/* 体験後の感想
------------------------------------------------------- */
.view {
padding: 40px 20px 20px 20px;
position: relative;
border: solid 2px #ef6262;
display: flex;
flex-wrap: wrap;
}

.view .view-title {
position: absolute;
display: inline-block;
top: -13px;
left: 20px;
padding: 5px;
line-height: 1;
font-size: 1.6rem;/* 16px*/
background: #FFF;
color: #ef6262;
font-weight: bold;
border-bottom: 14px solid #fbeccd;
}
.view i {
margin-right: 5px;
}

.img-view img {
width: 100%;
}
@media (min-width: 981px) {
.view {
justify-content:space-between;
flex-direction: row-reverse;
padding: 20px 40px 10px;
margin-bottom: 60px;
}

.txt-view {
width: 360px;
margin-top: 40px;
}
.img-view {
width: 300px;
margin-top: 40px;
}
.view .view-title  {
font-size: 1.8rem;/* 18px*/
padding-bottom: 10px;
left: 50%;
transform: translateX(-50%);
-webkit- transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
}