@charset "UTF-8";

@media screen and (max-width:767px) {

/* 640px */

.contentsBox {
}
.contentsBox .ques {
	width: 580px;
	width: 90.6vw;
	margin: 50px auto 0;
	margin: 7.8vw auto 0;
	font-size: 24px;
	font-size: 3.8vw;
	font-weight: bold;
	text-align: left;
	line-height: 1.7;
	position: relative;
	/*text-indent: 56px;
	text-indent: 8.8vw;*/
}
.contentsBox .ques.second {
	margin: 70px auto 0;
	margin: 10.9vw auto 0;
}

.contentsBox .ans {
	width: 580px;
	width: 90.6vw;
	margin: 22px auto 0;
	margin: 3.4vw auto 0;
	font-size: 24px;
	font-size: 3.8vw;
	font-weight: 500;
	text-align: left;
	line-height: 1.5em;
}

.contentsBox .ans_note {
font-size: 22px;
font-size: 3.4vw;
}


.contentsBox .ans span {
	color: #858585;
}

.contentsBox .imgBox2 {
	width: 270px;
	width: 43.3vw;
	margin: 32px 10px 0;
	margin: 5.0vw 2.0vw 0;
	position: relative;
	float: left;
}

.contentsBox .imgBox2 img {
	width: 100%;
	height: auto;
}



.contentsBox .imgBox {
	width: 580px;
	width: 90.6vw;
	margin: 32px auto 0;
	margin: 5.0vw auto 0;
	position: relative;
}
.contentsBox .imgBox img {
	width: 100%;
	height: auto;
}

.contentsBox .choosePoint {
	margin: 70px auto 0;
	margin: 10.9vw auto 0;
	width: 580px;
	width: 90.6vw;
	text-align: left;
}

.contentsBox .choosePoint .boxInner{
	padding: 20px 20px;
	border: 2px solid #858585;
	border: 0.3vw solid #858585;
	background: #fff;
	font-size: 22px;
	font-size: 3.4vw;
	line-height: 1.7;
}

.contentsBox .choosePoint a {
    word-break: break-all;
}


.contentsBox .note {
	width: 580px;
	width: 90.6vw;
	margin: 22px auto 0;
	margin: 3.4vw auto 0;
	font-size: 18px;
	font-size: 2.8vw;
}

.contentsBox .choosePoint p{
font-size: 24px;
font-size: 3.8vw;
line-height: 1.7;
}

.contentsBox p {
font-size: 22px;
font-size: 3.4vw;
}

.contentsBox .imgBox p.cap2 {
	text-align: left;
}

.contentsBox .imgBox p.cap,
.contentsBox .imgBox2 p.cap,
.contentsBox .choosePoint span {
	font-size: 12px;
}

.contentsBox h4 {
width: 580px;
	width: 90.6vw;
	margin: 22px auto 0;
	margin: 6vw auto 0;
	font-size: 24px;
	font-size: 4.2vw;
}

.pageLinkPoint {
	font-size: 15px;
	font-weight: bold;
	vertical-align: top;
	margin: -1em 20px 0 0 !important;
	display: inline-block;
}
  
.pageLinkPoint2 {
	font-size: 15px;
	font-weight: bold;
	vertical-align: top;
	margin: -0.8em 20px 0 0 !important;
	display: inline-block;
}

.contentsBox .textLink img, 
#mainArea .point {
    top: 4px;
}

.contentsBox .inBox {
    width: 580px;
    width: 90.6vw;
    margin: 22px auto 0;
    margin: 3.4vw auto 0;
    font-size: 24px;
    font-size: 3.8vw;
    font-weight: 500;
    text-align: left;
    line-height: 1.5em;
}

.contentsBox .inBox h5.title {
    line-height: inherit;
    height: inherit;
    padding: 8px;
    font-size: 24px;
	font-size: 4.2vw;
}

.contentsBox .inBox .imgArea {
    text-align: center;
    padding: 25px 10px 43px;
}


.contentsBox .inBox .imgArea div.text,
.contentsBox .inBox .imgArea div.link {
    font-size: 24px;
	font-size: 3.8vw;
	font-weight: 500;
	line-height: 1.5em;
}


#mainArea .point {
    top: 2px !important;
    width: 15px !important;
    height: 15px !important;
}

.contentsBox .ans a,
.contentsBox .ques a {
    word-break: break-all;
}


.movieBox .sub {
	width: 580px;
	width: 90.6vw;
	margin: 50px auto 0;
	margin: 7.8vw auto 0;
	font-size: 24px;
	font-size: 3.8vw;
	font-weight: bold;
	text-align: left;
	line-height: 1.7;
	position: relative;
}


.movieBox p {
	width: 580px;
	width: 90.6vw;
	margin: 10px auto 0;
}

.movieBox p.text {
	font-size: 22px;
	font-size: 3.4vw;
}

.movieBox .youtubeBox {
	width: 580px;
	width: 90.6vw;
	margin: 32px auto 0;
	margin: 5.0vw auto 0;
}

.contentsBox .ques ol,
.contentsBox .ans ul{
  margin: 30px 0 30px 30px;
}

#mainArea .profile .left {
  text-align: left;
  padding-left: 0;
}

#mainArea .profile .left p {
  text-align: right;
  font-size: 3.4vw;
  color: #858585;
  margin-top:5px;
}

.contentsBox .voices {
  width: 90.6vw;
  margin: 7.8vw auto 0;
  font-size: 3.8vw;
  text-align: left;
  line-height: 1.7;
  position: relative;
}
.contentsBox .voices dt {
  font-weight: bold;
  margin-bottom: 20px;
}
.contentsBox .voices dd {
  clear: both;
  margin-bottom: 40px;
 }
.contentsBox .voices dd img {
  width: 40vw;
  height: auto;
  display: block;
  float: right;
  margin: 0 0 10px 10px;
 }

.contentsBox .imgBox-floatL {
  margin: 5vw;
}

.contentsBox .imgBox-floatR {
  margin: 5vw;
  float: right;
}

.contentsBox .imgBox2 p{
  font-size: 3.4vw;
  font-weight: 500;
  text-align: left;
  line-height: 1.5em;
  color: #858585;
  margin: 3.4vw 0 0;
}

.contentsBox .imgBox-floatL p {
  font-size: 3.4vw;
  font-weight: 500;
  text-align: left;
  line-height: 1.5em;
  color: #858585;
  margin: 3.4vw 0 0;
}

/******************/

.titleArea {
margin: 0;
padding: 20px 10px;
}


.titleArea p.subTitle {
margin: 0 0 5px;
font-size: 3.8vw;
display: inline-block;
padding: 0;
}

.titleArea .balloon {
display: block;
font-size: 3.4vw;
width: 5rem;
margin: 0 auto 10px;
padding:3px;
}

.titleArea .balloon:before {
  content: "";
  position: absolute;
top: 100%;
left: 50%;
  margin-top: 0;
    margin-left: -8px;
    border: 8px solid transparent;
  border-top: 8px solid #fff;
}

.titleArea h1 {
font-size: 4.4vw;
}

.mainImg {
padding-top:5px;
}

.column01 {
padding: 10px;
}

.column01 h3 {
  position: relative;
  display: block;
  padding: 0;
  text-align: center;
  font-size: 4.4vw;
  margin-bottom: 2vw;
}

.column01 h3:before,
.column01 h3:after {
  border-top: none;
  border-bottom: none;
}

.column01 img {
    max-width: 100%;
}

.ribbon {
  display: inline-block;
  position: relative;
  height: inherit;
  text-align: center;
  box-sizing: border-box;
  margin-bottom: 40px;
}

.ribbon:before {/*左側のリボン端*/
  content: '';
  position: absolute;
  width: 4px;
  bottom: -10px;
  left: -45px;
  z-index: 0;
  border: none
}

.ribbon:after {/*右側のリボン端*/
  content: '';
  position: absolute;
  width: 4px;
  bottom: -10px;
  right: -45px;
  z-index: 0;
  border: none
}

.ribbon h3 {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 10px;
  line-height: 1.2;
  font-size: 4.4vw;
  color: #FFF;
  background: #096bec;/*真ん中の背景色*/
  width: inherit;
  z-index: 1;
}

.ribbon h3:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 15px #165091;/*左の折り返し部分*/
}

.ribbon h3:after {
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-left: solid 15px #165091;/*右の折り返し部分*/
}


.profileWrap {
display: block;
width: 90.6vw;
margin: 0 auto;
overflow: hidden;
padding: 0 !important
}

.profileWrap li {
width: inherit;
display: flex;
margin-bottom: 20px;
}

.profileWrap li:first-child .txt-wrap,
.profileWrap li:nth-child(2) .txt-wrap,
.profileWrap li:first-child img,
.profileWrap li:nth-child(2) img {
float: none;
}

.profileWrap li .txt-wrap {
width: inherit;
}

.profileWrap li .name {
font-size: 4.4vw;
margin: 0;
line-height: 1.4;
}

.profileWrap li .name span {
font-size: 3.6vw;
}

.profileWrap li .txt {
font-weight: normal;
font-size: 3.4vw;
margin: 0;
}

.profileWrap li img {
width: 80px;
height: 170px;
object-fit: cover;
object-position: 0 0;
margin-right: 10px;
}

.contentsInner .box p.text {
    font-size: 3.8vw;
}

.talkLeft p b,
.talkRight p b {
font-size: 4.4vw;
}

.talkLeft p,
.talkRight p {
padding: 10px;
}

#mainArea .mainImgBox .mainImg {
	width: 100vw;
}

#mainArea .pageLink a {
width: 90vw;
padding: 3.4vw 10vw 3.4vw 3.4vw ;
box-sizing: border-box
}

#mainArea .contentsTitle {
width: 90vw;
padding: 3.4vw;
box-sizing: border-box;
line-height:1.3;
}

.titleCourse,
.titleCourse span {
font-size:4.4vw;
}

.step dt {
flex-basis: 100%;
margin-right:0;
margin-bottom:4vw;
}

.step dd {
font-size:3.8vw;
margin-bottom:10vw;
}


.contentsBox p.caption02 {
font-size:3.8vw;
margin-bottom: 10vw;
}

.step dt {
flex-basis: 100%;
margin: 0 0 4vw 0;
}
.step dd {
width: 100%;
text-align: left;
margin-bottom: 10vw;
}
.step dd p {
font-size: 3.8vw;
font-weight: normal;
margin: 0 0 4vw 0;
}

.step dd span {
font-size: 3.6vw;
line-height: 5vw;
width: 5vw;
border-radius: 2.5vw;
text-indent:-1px
}

.step dd span.double {
font-size: 3.3vw;
text-indent:-2px
}


.column02 {
border-top: 4px double #999;
width: 90.6vw;
padding: 4vw 0 0;
margin: 10vw auto 0;
display: flex;
flex-direction: column;
align-items: flex-start;
}

.column02 h4 {
font-size: 3.8vw;
margin: 0 0 10px;
display: block;
}

.column02 h4 span{
font-size: 3.4vw;
}



.column02 p {
font-size: 3.4vw;
}

.column02 img {
width:70vw;
margin: 0 auto 4vw;
}

.columnNext {
margin: 10vw 0;
display: flex;
border-radius: 6px;
border: 2px solid #c3d600;
padding: 10px;
background: #fff;
}

.columnNext .subTitle {
border-radius: 6px;
font-size: 5vw;
line-height:1.2;
display: flex;
align-items:center;
background: #c3d600;
padding: 2vw;
color: #fff;
font-weight: bold;
/*width: 7vw;*/
text-align: center;
margin-right: 4vw;
}

.columnNext .main {
background: #fff;
font-size: 4vw;
line-height:1.3;
}

.columnNext .main h3 {
font-size: 4.4vw;
}

.boxCol02 {
display: flex;
flex-direction: column;
margin: 10vw 0 0;
}

.boxCol02 li img {
width: 100%;
max-width: 400px;
}

.boxCol02 li{
width: 100%;
margin:0 ;
}


.col02 dd span {
text-indent:-1px;
margin-right:1vw;
}

.col02 dd p {
padding-left: 6vw;
text-indent: -6vw;
}

.contentsBox p.reg-caption {
font-size: 3.1vw;
}

}/* media */