@charset "utf-8";
/* ==================================================================
CSS information
style info :レッスンのご案内　＞　レッスンの流れ
================================================================== */

#gNavi li.btn2 a { background-position:left -159px bottom -5px;}

/* --------------------------------------------------------
#main
-------------------------------------------------------- */
@media screen and (min-width: 768px) { /* 768px以上の記述 */
#main h2 { background:url(../_img/flow/maintitle_b.jpg) no-repeat 0 0; }
#main .catchcopy { background:url(../_img/flow/catchcopy.png) no-repeat 0 0; height:26px; margin-bottom:20px; }
#sideMenu dd.btn1 a { background-color:#ecf59d; }
}

@media screen and (max-width: 767px) { /* スマートフォン用の記述 */
#main .catchcopy { }
}


/* --------------------------------------------------------
#movieBox
-------------------------------------------------------- */
@media screen and (min-width: 768px) { /* 768px以上の記述 */
#movieBox { margin-top:30px; margin-bottom:30px; }

#movieBox h3 { background:url(../_img/flow/movie_ti.png) no-repeat 0 0; width:704px; height:34px; margin-bottom:15px; }
#movieBox h3 span { display:block; text-indent: 100%; white-space: nowrap; overflow: hidden; }
#movieBox .movieArea {border-top: #C9C9C9 solid 1px;}
}

@media screen and (max-width: 767px) { /* スマートフォン用の記述 */
#movieBox { margin-top:30px; margin-bottom:30px; }
#movieBox h3 { background:#c1d614; border-top:1px solid #94a507; border-bottom:1px solid #94a507; margin-bottom:10px; }
#movieBox h3 div { border-top:1px solid #eff593; border-bottom:1px solid #eff593; padding:0 10px; }
#movieBox h3 .title { font-size:123.1%; line-height:1; display:block; margin-top:6px; margin-bottom:2px; 
text-shadow: rgba(255,255,255,0.8) 1px 1px 2px;
-ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#fff,offx=1,offy=1)"; /* IE7以下は不可 */
zoom: 1;
}
#movieBox h3 .sub { color:#4b3223; font-size:93%; display:block; font-weight:normal; padding-bottom:3px; }

#movieBox .pic { margin:0 10px; }
}


#movieBox .movieArea {
position: relative;
margin-top: 1.2em;
margin-bottom: 1.2em;
padding-bottom: 50%;
padding-top: 69px;
overflow: hidden;
}
#movieBox .movieArea iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}




/* --------------------------------------------------------
#flowBox
-------------------------------------------------------- */
@media screen and (min-width: 768px) { /* 768px以上の記述 */
#flowBox { margin-bottom:10px;}
#flowBox h3 { background:url(../_img/flow/flow_ti.png) no-repeat 0 0; width:704px; height:34px; margin-bottom:15px; }
#flowBox h3 span { display:block; text-indent: 100%; white-space: nowrap; overflow: hidden; }

.icon-sp , .pic-sp { display:none;}
.icon { margin-bottom:10px; }

.box1 { background:url(../_img/flow/pic01_b.jpg?v20230301) no-repeat right top; min-height:230px; }
.box1 .icon { padding-top:15px; }
.box1 .textBox { width:380px; }

.boxSet_2-3 { background:url(../_img/flow/pic02_b.jpg?v20230301) no-repeat right 50px; /*min-height:400px;*/ margin-bottom:40px; }
.box2 .textBox { width:330px; margin-bottom:40px; }
.box3 .textBox { width:330px; }

.boxSet_4-5 { background:url(../_img/flow/pic03_b.jpg?v20230301) no-repeat right top; /*min-height:420px;*/ margin-bottom:40px; }
.box4 .textBox { width:360px; margin-bottom:40px; }
.box5 .textBox { width:360px; }

.homework { background:url(../_img/flow/pic_homework.jpg?20191228) no-repeat left top; min-height:210px; margin-bottom:30px; }
.homework .read2 { margin-left:20px; padding-top:60px; }
.homework .textBox { width:380px; margin-left:20px; }
.homework .read2 img { display:none; }

.btn_next { text-align:right; margin-bottom:40px; }
.btn_next a:hover img { filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; }
}

@media screen and (max-width: 767px) { /* スマートフォン用の記述 */
#flowBox { margin-bottom:20px;}
#flowBox h3 { background:#c1d614; border-top:1px solid #94a507; border-bottom:1px solid #94a507; margin-bottom:10px; }
#flowBox h3 div { border-top:1px solid #eff593; border-bottom:1px solid #eff593; padding:0 10px; }
#flowBox h3 .title { font-size:123.1%; line-height:1; display:block; margin-top:6px; margin-bottom:4px; 
text-shadow: rgba(255,255,255,0.8) 1px 1px 2px;
-ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#fff,offx=1,offy=1)"; /* IE7以下は不可 */
zoom: 1;
}
#flowBox h3 .sub { color:#4b3223; font-size:93%; display:block; font-weight:normal; padding-bottom:3px; }

.boxSet_4-5 {margin-bottom:40px; }

.icon { display:none; }
.pic-sp { text-align:center; margin-bottom:10px; }
.icon-sp , .read , .textBox { margin:0 10px; }

.icon-sp { margin-bottom:5px; }
.textBox { margin-bottom:30px; }

.homework { margin:0 10px 30px; }
.homework .read2 { text-align:center; margin-bottom:0; }
.homework .read2 span{ display:none; }
.homework .read2 img { width:100%; }
.homework .textBox { background:#dee8f5; margin:0; padding:10px; }

.btn_next { display:none; }
}


.read { color:#f18d00; font-size:116%; font-weight:bold; margin-bottom:0.7em; }
.read2 { color:#64aadc; font-size:123.1%; margin-bottom:0.5em; font-weight:bold; }

.textBox { line-height:1.61; }