@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 {
margin-bottom:2vw;
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: 90vw;
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 .boxCol02.step p,
.contentsInner dl.col01 dd,
.contentsInner dl.col02 dd,
.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 {
flex-basis: 100%;
text-align: left;
margin-bottom: 10vw;
}
.step dd p {
font-size: 3.8vw;
font-weight: normal;
margin: 0 0 4vw 0;
}

.column01 dl.col02 dd span,
.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 4vw;
display: flex;
border-radius: 6px;
padding: 10px;
background: #fff;
}

.columnNext>img {
width: 100px;
margin-right: 2vw;
height: 200px;
}


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

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

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

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

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

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

/*.column01 dl.col02 dd p,
.col01 dd p,
.col02 dd p {
padding-left: 6vw;
text-indent: -6vw;
}*/

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

table.spec {
width: 90.6vw;
margin: 6.1vw auto 0;
}

table.spec tr th {
padding: 0 0 0 0.8vw;
height: 60px;
height: 8.0vw;
line-height: 3vw;
font-size: 3.8vw;
}

table.spec tr td {
padding: 0.8vw 1.0vw;
font-size: 3.8vw;
height: 9.4vw;
}

table.spec tr th:first-child {
width: 26%;
}

table.spec tr th:nth-child(2),
table.spec tr th:nth-child(3){
width: 37%;
}

table.spec caption {
width: 90.6vw;
height: 9.5vw;
font-size: 3.8vw;
line-height: 9.5vw;
}

table.spec tr td:first-child {
font-size: 3.8vw;
}

.column01 dl.col02 dt,
dl.col02 dt {
margin:0 0 4vw;
flex-basis:inherit;
width:100%;
}

dl.col02 dt img{
width:initial;
max-width:100%;
}
.column01 dl.col02 dd,
dl.col01 dd p,
dl.col02 dd p {
font-size: 3.8vw;
}

.float-l {
float: left;
margin-right:2vw;
width: 40vw;
}

.float-r {
float: none;
max-width: 100%;
margin-left:0;
}

ul.copyright {
margin: 8.4vw auto 0 6vw;
width: 90.6vw;
}

ul.copyright li {
font-size: 3.1vw;
}

.contentsBox h5 {
width: 90vw;
font-size: 4.4vw;
padding: 3.4vw;
}

.contentsBox p.caption01 {
font-size: 3.8vw;
margin:3.4vw 0 10vw;
}

.boxCol02 li:first-child {margin-bottom: 3.4vw;}

.col02 .textLink {
margin-top: 0;
}

.column01 .col02 dd {
width: inherit;
}

.column01 .col02 dt:last-of-type {
margin-bottom: 4vw;
}

.column01 .col02 dd:last-of-type {
margin-bottom:0;
}

dl#get_adobe {
width: 90.6vw;
padding: 4vw;
margin: 10vw auto 0;
box-sizing: border-box;
text-align: left;
display: block;
border: solid 1px #ccc;
}

dl#get_adobe dd{
margin-top: 4vw;
margin-left: 0;
font-size: 3.1vw;
font-weight: 500;
line-height: 1.6;
}

dl dt img.w-auto {width: auto;}

.col02 dd {
width: auto;
}

.spBox {
padding: 10px;
font-size: 3.8vw;
}

.spBox dt{
font-size: 4.4vw;
}

.spBox dd ul {
padding-left: 30px;
}

h3.blk {
font-size: 4.4vw;
}

.box h4 span {
padding: 0 1.5vw;
line-height: 4.6vw;
font-size: 2.8vw;
}


.w-auto {width: auto}

.zoom.p60:after{
	position:absolute; bottom:5px; left:55%;
}

}/* media */