@charset "utf-8";
/* CSS Document */

.f_s140{font-size: 140%;}
.line_h{line-height: 2rem;}
.txt_right{text-align: right;}
.tx_left{text-align: left;}
.f_bold{font-weight: bold;}
.under_line{background: linear-gradient(transparent 70%, #f2fa10 0%);}
.corner_img{position: absolute;left: 0px;}
/*背景ボーダー*/
.box{width:100%;height:auto; padding-bottom: 30px;}
.bg_border01 {background-color: #d8ddff; background-size: 4px 4px;}
div.h_sec{background-image:linear-gradient(#dde2ff 50%, transparent 50%,transparent 100%);border-radius:8px;position:relative;width: 90%;margin:0 auto 65px;}
.bg_border02 {background-color: #81f5af; background-size: 4px 4px;}
div.k_sec{background-image:linear-gradient(#9bf7c0 50%, transparent 50%,transparent 100%);border-radius:8px;position:relative;width: 90%;margin:0 auto 65px;}
.bg_border03 {background-color: #f1d0ff; background-size: 4px 4px;}
div.a_sec{background-image:linear-gradient(#f4dbff 50%, transparent 50%,transparent 100%);border-radius:8px;position:relative;width: 90%;margin:0 auto 40px;}

/*吹き出しエリア*/
.float_area{width: 100%; padding-top: 100px;margin:0 0 30px -85px;}
.f_l{float:left;width: 30%;text-align: right;padding-right: 50px;}
.f_r{float:right; width: 70%; text-align:left;}
/*吹き出し*/
.o_bal {position: relative;	background: #ffffff;width: 95%;/*吹き出し幅*/ padding: 20px;/*内側の余白*/ border-radius: 10px;/*角の丸み*/}
.o_bal:before {position: absolute;/*絶対配置*/content: '';/*空に*/border-top: 20px solid #ffffff;/*三角を作る*/ border-right: 20px solid transparent; border-left: 20px solid transparent; top: 50%;/*下にフィット*/ left: -3%;/*中央配置*/ transform: rotate(-24deg);/*一応ズレを補正*/}

/*動画タイトル*/
.w_bg{width: 95%;background-color: #ffffff;margin: 0 auto;border-radius:0 0 8px 8px;}
.mv_area{background-image: url("../img/no-28/img_ttl.gif"),url("../img/no-28/img_ttl.gif");width: 100%;background-repeat: no-repeat;background-size:contain;background-position:top,bottom;}
h3.ttl_mv{padding: 7% 10px 7% 150px;text-align: left;line-height: 2.5rem;font-size: 160%;}
h3.bg01{background-image: url("../img/no-28/ic_y01.gif");background-repeat:no-repeat;background-position:left 40px center;}
h3.bg02{background-image: url("../img/no-28/ic_y03.gif");background-repeat:no-repeat;background-position:left 40px center;}
h3.bg03{background-image: url("../img/no-28/ic_y04.gif");background-repeat:no-repeat;background-position:left 40px center;}
.c_b{color: #4d67ff;font-size: 110%;}.c_g{color: #0b883d;font-size: 110%;}.c_p{color: #c664ee;font-size: 110%;}
/*動画コンテンツ*/
.mv_fl{width: 100%;}
.mv_l iframe{width: 100%;}	
.mv_l{float: left;width: 50%; padding: 20px 5%;}
.mv_r{float: right;width: 50%;padding: 20px 5%;}
/*リストエリア*/
.list_area{padding-bottom: 20px;}
h5.li_ttl{padding:0 5px 15px;margin:20px;font-size: 150%;}
h5.ttl_deco01{border-bottom: #acb8ff solid 2px;}
h5.ttl_deco02{border-bottom: #81f5af solid 2px;}
h5.ttl_deco03{border-bottom:#f1d0ff solid 2px;}
.ttl_deco01:before,.ttl_deco02:before,.ttl_deco03:before{content:url("../img/no-28/ic_y02.gif");padding:0  10px;display: inline-block;vertical-align:-0.5em;}

.ttl_deco01:after,.ttl_deco02:after,.ttl_deco03:after{content:url("../img/no-28/ic_k03.png");padding:0  10px;display: inline-block;vertical-align:-0.5em;}
ul.pg_r{padding-right: 1rem;}
ul.list_mv li{padding-bottom: 10px;}
ul.o_mv li:before {content: "●";color:#4d67ff;font-size: 80%;}
ul.n_mv li:before {content: "●";color:#0b883d;font-size: 80%;}
ul.a_mv li:before {content: "●";color:#c664ee;font-size: 80%;}
/*豆知識*/
.mame_fl{width: 100%;padding:10px 0;}
.mame_l{width: 50%;float: left;}
.mame_r{width:50%;float:right;}
@media screen and (max-width:414px) {
br.sp_brn{display: none;}	
.mv_l iframe{width: 100%; height:200px!important;}	
.o_bal:before{left: -7%;/*中央配置*/}	
.float_area{width: 100%; padding-top: 50px;}
.f_l{float:left;width: 30%;text-align: right;padding-right: 18px;padding-top: 25px;padding-left: 20px;}	
h3.ttl_mv{background-image:none;padding: 8%;font-size:110%!important;line-height: 2rem;}
h5.li_ttl{font-size: 110%!important;}		
.ttl_deco01:before,.ttl_deco02:before,.ttl_deco03:before{content:none;padding:0  10px;}
.ttl_deco01:after,.ttl_deco02:after,.ttl_deco03:after{content:none;padding:0  10px;}
	
}
@media screen and  (max-width: 834px)  {
div.h_sec,div.k_sec,div.a_sec{width: 100%;}	
.float_area{margin:0 0 30px -5px;}	
h3.ttl_mv{font-size: 140%;}	
h5.li_ttl{font-size: 140%;}	
.mv_l iframe{width: 100%; height: 340px;}	
.mv_l{float: none;width: 100%;}
.mv_r{float: none;width: 100%; padding: 5px 5%;}
.list_mv{padding:0 20px;}
.mame_l{width: 100%;float:none;margin: 0%;}
.mame_r{width:100%;float:none;margin:0%; padding-top: 40px;}
.f_s140{font-size: 100%;}
}