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

html{
}

body{
    width: 100%;
/*	min-width:1300px;*/
	height: 100%;
	font-size: 1.0em;
}

*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.sp{ display:none;}

#loading{
	background:#FFF;
	min-width:100%;
	min-height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:500;
}


h1{
	margin-bottom:12px;
}

h2{
	text-align:center;
}

#wrap{
	text-align:center;
/*  margin: 20px 0 0 0;*/
    width: 100%;
}


.inner{
    width: 100%;
	max-width: 1300px;
	height:auto;
	margin:0 auto;
	text-align:left;
}


#circle_01{
	position:absolute;
	top: -50px;
	right: 80px;
}

#circle_02{
	position:absolute;
	top: -600px;
	left: -100px;
}

#gnav{
	background: url(../img/gnav_bg.png) repeat-x;
	height:84px;
	z-index:300;
	position:relative;
	margin:-5px 0;
	padding:13px 0;

}

#gnav.fixed{
	position:fixed;
	width:100%;
	top:0;
	left:0;

}

#gnav .inner{
	width:945px;
}

#gnav .logo{
	margin-right:30px;
}

#gnav #gnav_btn{
	margin-top:-23px;
}


#gnav #contact_area{
	width:195px;
	height:56px;
	background:url(../img/tel_bg.png) no-repeat;
	position:relative;
}

#gnav #contact_area #sns_btn{
}


/*sec_icatch
--------------------------------------------------------------------*/

#sec_icatch{
	background: #ffcc00;
	width: 100%;

 }

#sec_icatch .inner{
	padding-right:178px;
	z-index:100;
	position:relative;
}
#sec_icatch .inner img.pc{
	width: auto;
	height: 400px;
}

#sec_icatch .fr{
	padding:23px 0 0 0;
}

.textarea{
	position:absolute;
	top: 13%;
	left: 50%;
}


.textarea .text1,
.textarea .text2,
.textarea .text3,
.textarea .text4{
	color:#FFF;
	line-height: 1.0;
	text-align: center;
}
.textarea .text1 img{
	position: relative;
	width: 400px;
	margin: 0 0 10px;
}
.textarea .text2{
	font-size:30px;
	font-weight:bold;
	margin: 15px 0 5px 0px;
	padding: 15px 0 0 0;
	border-top: 1px solid #FFF;
    line-height: 1.3;
}
.textarea .text3{
	font-size:30px;
	font-weight:bold;
	margin: 0 0 5px 0px;
}

.textarea .text4{
	font-size:30px;
	font-weight:bold;
	margin: 0 0 5px 0px;
}

.textarea .text_doyou{
    font-size: 12px;
    text-align: center;
}




.textarea .data{
	position:absolute;
	left:30px;
	bottom:12px;
	font-size:17px;
	color:#FFF;
}

 .movie_btn{
	 margin-left:5px;
 }




/*sec_money
--------------------------------------------------------------------*/

#sec_money{
	height:auto;
	position:relative;
	background: #f6f9f8; /* Old browsers */
	background: -moz-linear-gradient(left,  #dee1e0 0%, #fbfcfe 80%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #dee1e0 0%,#fbfcfe 80%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #dee1e0 0%,#fbfcfe 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#sec_money .inner{
	background-image: url(../img/money_bg.png);
	background-position:75% bottom;
	background-repeat:no-repeat;
	padding: 20px 0 345px;
	position:relative;
	z-index:100;
}

#sec_money h2{
	display:inline;
	position:absolute;
	top:30px;
	left:40px;
}

#sec_money .fr{
    width: 45%;
	max-width:580px;
    margin-right: 180px;
}


/*sec_game
--------------------------------------------------------------------*/


#sec_game{
	background:url(../img/line_bg.gif);
}

#sec_game .inner{
	position:relative;
	padding:20px 180px 50px 0;
    background: url(/kinyugakushu/hapipro/img/sec_game_child.png) 12% top/37% no-repeat;
}

#sec_game .child{
	position:absolute;
	top:0px;
	left:100px;
	z-index:100;
}

#sec_game h2{
	margin-bottom:20px;
}


#sec_game .fr{
	color:#FFF;
}
#sec_game .fr p{
	text-align:left!important;
	padding-left:90px;
}
@media only screen and (max-width: 767px) {
    #sec_game .fr p{
        text-align:left!important;
        padding-left:0px;
    }
}

#sec_game .point{
	font-weight:normal;
	padding-left:90px;
}

#sec_game .point ul{
	list-style:disc outside;
}

/*sec_voice
--------------------------------------------------------------------*/

#sec_voice{
	background:url(../img/sec_voice_bg.gif);
	position:relative;

}

#sec_voice .inner{
    width: 80%;
	max-width:952px;
	padding:35px 0 40px 0;
}

#sec_voice .inner.bottom{
	padding:0px 0 50px 0;
}

#sec_voice .inner .fl,
#sec_voice .inner .fr{
	width:460px;
	height:305px;
	background:#FFF;
	position:relative;
	text-align:center;
	-webkit-box-shadow:0 0 2px 2px rgba(200,200,200,0.4) inset;
	-moz-box-shadow:0 0 2px 2px rgba(200,200,200,0.4) inset;
	box-shadow:0 0 2px 2px rgba(200,200,200,0.4) inset;
}

#sec_voice .inner h2{
	margin-bottom:20px;

}

#sec_voice .inner h3{
	margin-top:-30px;
	z-index:10;
}

#sec_voice .voice_area{
	width:460px;
	height:255px;
	overflow: hidden;
}

#sec_voice li{
	margin-bottom:20px;

}


#sec_voice .inner p{
	font-size:1.275em;
	color:#563d00;
	font-weight:bold;
	line-height:2.3em;
	margin:0 0 0 131px;
}

#sec_voice .inner p span{
	font-size:3.1em;
	color:#ff9e24;
}

#sec_voice #act{
	position:absolute;
	left:0px;
	bottom:90px;
	height:42px;
	width:30%;
	background:url(../img/act_end.png) no-repeat center right;
	padding-right:13px;
	text-align:right;
}

#sec_voice #act span{
	width:auto;
	color:#FFF;
	height:42px;
	font-size:1.214em;
	letter-spacing:0.2em;
	vertical-align:middle;
	display:block;
	padding:5px 10px 0 0;
	background:url(../img/act_bg.png) repeat-x;

}




@media only screen and (max-width: 1740px) {
#sec_voice #act{
	width:25%!important;
}
}

@media only screen and (max-width: 1500px) {
#sec_voice #act{
	width:20%!important;
}
}


@media only screen and (max-width: 767px) {
#sec_voice #act{
	width:40%!important;
}
}

/*sec_movie
--------------------------------------------------------------------*/

#sec_movie{
	background:url(../img/line_bg.gif);
	padding-top:100px;
	margin-top:-100px;
}

#sec_movie .inner{
	padding:50px 0;
}


#sec_movie h2{
	margin-bottom:25px;
}

#sec_movie #movie.video_wrap{
    border:8px solid #f5c863;
    box-shadow: 0 4px 4px #e59c47;
    max-width: 560px;
}



/*footer
--------------------------------------------------------------------*/

#footer{
	border-top: 3px solid #fbad00;
}

#footer .inner{
	width:945px;
	position:relative;
	padding:40px 0;
}

#footer .inner .fl{
	margin-right:40px;
}

#footer .inner #pagetop{
	position:absolute;
	top:-33px;
	right:0px;
}

#copylight{
	background:#fbad00;
	color:#FFF;
	padding:10px 0;
}


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

    .pc{display:none;}
    .sp{display:inherit;}

    #gnav{
        display:none;
    }

    body{
        min-width:inherit;
        overflow : hidden ;
        font-size:1.09em;
        line-height:1.75em;
        word-wrap: break-word;
    }

    .inner{
        width:100%!important;
        height:auto;
        padding: 0 5%;
    }

    img{
        max-width:100%;
        height:auto;
    }

    .spimg{
        width:40%;
        text-align:center;
    }
    /*sec_icatch
    --------------------------------------------------------------------*/

    #sec_icatch{
        background: #ffcc00;
        width: 100%;
        position:relative;

     }

    #sec_icatch .inner{
        padding:0;
        z-index:100;
        position:relative;
    }

    #sec_icatch .textarea {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
    }
    #sec_icatch .movie{
        position:absolute;
        right:3%;
        bottom:3%;
        width:40%;
    }

    .textarea .text1{
        position: absolute;
        top:5px;
        left:5%;
        font-size:1em;
        font-weight: normal;
    }


    .textarea .text2{
        position: absolute;
        top:38px;
        left:5%;
        font-size:1.2em;
        font-weight:bold;
    }


    .textarea .text3{
        position: absolute;
        top:60px;
        left:5%;
        font-size:1.5em;
        font-weight:bold;
        padding-bottom:5px;
    }


    .textarea .text4{
        position: absolute;
        top:90px;
        left:5%;
        font-size:1.75em;
        letter-spacing:-0.01em;
    }

    .textarea .text_doyou{
        position: absolute;
        bottom: 0;
        text-align: right;
        padding: 10px;
    }
    .textarea .text_doyou .logo{ width: 178px;}
    .textarea .text_doyou .text{
        display: block;
        background: rgb(255 255 255 / .75);
        line-height: 1.5;
        padding: 3px 8px;
        text-align: left;
        margin-top: 5px;
    }

    .textarea .data{
        position:absolute;
        display:inline;
        left:48%;
        bottom:36%;
        font-weight:bold;
        font-size:0.7em;
        line-height:1.3em;
    }




    /*sec_money
    --------------------------------------------------------------------*/


    #sec_money .inner{
        background-size:100%;
        background-position:center bottom;
        background-repeat:no-repeat;
        padding: 0 5% 45% 5%;
        position:relative;
    }

    #sec_money h2{
        position: relative;
        top:0px;
        left:0px;
        float:none;
    }

    #sec_money .fr{
        width:100%;
        float:none;
        padding-top:25px;
    }

    #sec_money .fr span br{
        display:none;

    }


    /*sec_game
    --------------------------------------------------------------------*/


    #sec_game{
        background:url(../img/line_bg.gif);

    }

    #sec_game .inner{
        background: none;
        position:relative;
        padding:0 5% 10% 5%;
        padding-right:auto;
        text-align:left;
    }


    #sec_game h2{
        margin-bottom:20px;
    }

    #sec_game p{
        color:#FFF;
        text-align:left!important;
    }

    #sec_game .point{
        padding-left:5%;
        font-weight: normal;
    }

    #sec_game .fr span br{
        display:none;

    }

    /*sec_voice
    --------------------------------------------------------------------*/

    #sec_voice{
        background:url(../img/sec_voice_bg.gif);
        position:relative;
    }

    #sec_voice .inner{
        width:100%;
        padding: 5%;
    }

    #sec_voice .inner .fl,
    #sec_voice .inner .fr{
        width:100%;
        height:auto;
        background:#FFF;
        position:relative;
        float:none;
    }

    #sec_voice .inner .fl{
        margin-bottom:80px;

    }

    #sec_voice .inner h2 img{
        width:100%;
        margin-bottom:20px;

    }

    #sec_voice .inner h3 img{
        width:100%;
    }

    #sec_voice .voice_area{
        width:100%;
        height:180px;
        overflow: scroll;
    }


    #sec_voice .inner.bottom{
        margin-top:10px;
        padding:0 5% 5% 5%;
    }

    #sec_voice .inner p{
        font-size:1em;
        color:#563d00;
        font-weight:bold;
        line-height:2.0em;
        margin:0 ;
    }

    #sec_voice .inner p span{
        font-size:2.1em;
        color:#ff9e24;
    }

    #sec_voice #act{
        position: relative;
        left:0px;
        bottom:0;
        margin-top:10px;

    }

    #sec_voice #act span{
            font-size:1em;

    }



    /*sec_movie
    --------------------------------------------------------------------*/


    #sec_movie .inner{
        padding:10%;
    }


    #sec_movie h2 img{
        width:auto;
    }




    /*footer
    --------------------------------------------------------------------*/

    #footer{
        line-height:1.3em;
    }

    #footer img{
        width:auto;
    }

    #footer .inner{
        width:100%;
        padding: 5%;
    }

    #footer .inner .fl{
        float:none;
        margin-bottom:20px;
    }


    #copylight{

        line-height:0.8em;
    }

}

@media only screen and (max-width: 400px) {
    .textarea .text_doyou .logo{ width: 130px;}
}





/*スクロールバー
--------------------------------------------------------------------*/

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{
border:none!important;
background:#ebebeb!important;
}


.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
border:none!important;
background:#fbad00!important;
}


.mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
margin:0 2px!important;
width:11px!important;
}





@media only screen and (min-width: 460px) {


.sp .textarea .text1{
	top:15px;
	font-size:1.3em;
	font-weight: normal;
}

.sp .textarea .text2{
	top:56px;
	font-size:1.9em;
	font-weight:bold;
}


.sp .textarea .text3{
	top:103px;
	font-size:2.45em;
	font-weight:bold;
}


.sp .textarea .text4{
	top:150px;
	font-size:1.08em;
	letter-spacing:-0.01em;
}



.sp .textarea .data{
	font-size:0.9em;
	line-height:1.4em;
}



}

@media only screen and (min-width: 615px) {

.sp .textarea .text1{
	top:27px;
	font-size:1.55em;
	font-weight: normal;
}

.sp .textarea .text2{
	top:72px;
	font-size:2.33em;
	font-weight:bold;
}


.sp .textarea .text3{
	top:130px;
	font-size:3em;
	font-weight:bold;
}


.sp .textarea .text4{
	top:184px;
	font-size:1.31em;
	letter-spacing:-0.01em;
}

.sp .textarea .data{
	font-size:1.3em;
	line-height:1.4em;
}


}


@media only screen and (min-width: 675px) {

.sp .textarea .text1{
	top:30px;
	font-size:1.85em;
	font-weight: normal;
}

.sp .textarea .text2{
	top:75px;
	font-size:2.63em;
	font-weight:bold;
}


.sp .textarea .text3{
	top:133px;
	font-size:3.3em;
	font-weight:bold;
	padding-bottom:10px;
}


.sp .textarea .text4{
	top:187px;
	font-size:1.45em;
	letter-spacing:-0.01em;
}

}

/* redbtn */

.red_btnbox{
	position: relative;
}

.red_btn {
  background: #eb5443;
  border: 1px solid #eb5443;
  width: 240px;
  text-align: center;
  display: block;
  margin: 20px auto 0;
  font-size: 16px;
  font-weight: 700;
  color: #fff!important;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  position:relative;

}

.red_btn:hover {
  background: #e93f2c;
}


.red_btn:after {
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	top: 9px;
	right: -30px;
	background-size: 20px 20px;
	background: url(../img/ico_blank.png) no-repeat;
}

/* dblue_btn */

.dblue_btn{
	position: relative;
}

.dblue_btn {
  background: #16528e;
  border: 1px solid #16528e;
  width: 240px;
  text-align: center;
  display: block;
  margin: 20px auto 0;
  font-size: 16px;
  font-weight: 700;
  color: #fff!important;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  position:relative;

}

.dblue_btn:hover {
  opacity: 0.7;
}


.dblue_btn:after {
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	top: 9px;
	right: -30px;
	background-size: 20px 20px;
	background: url(../img/ico_blank.png) no-repeat;
}


@media only screen and (max-width: 1024px) and (min-width: 657px) {
    #sec_icatch .inner img.pc{ margin-left: -150px;}
    .textarea{
        left: inherit;
        right: 20px;
    }
    #sec_money .fr{
        margin-right: 25px;
        margin-top: 100px;
    }
    #sec_game .inner{ padding-right: 20px;}
    #sec_game .child{
        left: 10px;
        width: 35%;
        height: auto;
    }
    #sec_game .fr{ width: 80%;}
    #sec_voice #voice_area_wrap .fl,
    #sec_voice #voice_area_wrap .fr{
        float: none;
        margin: 50px auto 80px;
    }
    #sec_voice #voice_area_wrap .fr{ margin-bottom: 0;}

}


.rbn{
/*    height: 78px;*/
    color: #fff;
    background: url(/kinyugakushu/hapipro/img/bg_rbn.png) center bottom/420px no-repeat;
    font-size: 1.6em;
    line-height: 3;
    margin-bottom: 30px;
}
.rbn .sub{
    display: block;
    color: #ff9d00;
    line-height: .8;
    font-size: .8em;
}
@media only screen and (max-width: 658px) {
    .rbn{
        height: auto;
        font-size: 1.1em;
        background: url(/kinyugakushu/hapipro/img/bg_rbn.png) center bottom/contain no-repeat;
    }
}