@charset "utf-8";

/* common=============================================================== */

body{
    padding-top: 40px ;
}
@media (max-width: 991px){
    body{
        padding-top: 20px ;
    }
}
/* header================================================================ */

#header{
    background-color: #fff ;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
}
.navbar{
    height: 80px ;
    font-size: 15px ;
    box-shadow: 0px 1px 4px rgba( 0, 0, 0, 0.3) ;
}
.navbar-fixed-top{
    border: none ;
}
.navbar-brand{
    margin: 0 ;
    padding: 10px ;
    height: auto ;
    line-height: 1em ;
}
.navbar-brand img{
    transition: all 0.3s ;
    -webkit-transition: all 0.3s ;
    -moz-transition: all 0.3s ;
    -o-transition: all 0.3s 
}
.navbar-collapse{
    border-top: 0 ;
}
h1{
    margin: 0 ;
}
.navbar-nav li a{
    height: 80px ;
    width: 100% ;
    padding: 30px 15px 0px 35px ;
    color: #333 ;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}
.navbar-nav li a:hover,
.navbar-nav li a:focus,
.navbar-nav li a:active{
    background-color: rgba(255, 255, 255, 0) ;
}
.navbar-nav li a::after{
    content: "" ;
    position: absolute ;
    z-index: -1 ;
    left: 50% ;
    right: 50% ;
    bottom: 0px ;
    height: 5px ;
    border-radius: 3px ;
    -webkit-transition-property: left, right ;
    transition-property: left, right ;
    -webkit-transition-duration: 0.2s ;
    transition-duration: 0.2s ;
    -webkit-transition-timing-function: ease-out ;
    transition-timing-function: ease-out ;
}
.navbar-nav li a:hover::after,
.navbar-nav li a:focus::after,
.navbar-nav li a:active::after,
.navbar-nav li.active a::after{
    left: 10% ;
    right: 10% ;
}
.navbar-nav li a::before{
	position: absolute ;
	height: 18px ;
	width: 18px ;
	left: 15px ;
	background-repeat: no-repeat ;
	background-position: top left ;
	content: " " ;
}
/* TOP */
.navbar-nav li:nth-child(1) a::before{
	background-image: url(../images/ico_headnav_top.png) ;
}
.navbar-nav li:nth-child(1) a::after{
    background-color: #3582ca ;
}
/* 利用方法 */
.navbar-nav li:nth-child(2) a::before{
	background-image: url(../images/ico_headnav_guide.png) ;
}
.navbar-nav li:nth-child(2) a::after{
    background-color: #0c874a ;
}
/* 料金 */
.navbar-nav li:nth-child(3) a::before{
	background-image: url(../images/ico_headnav_payment.png) ;
}
.navbar-nav li:nth-child(3) a::after{
    background-color: #ffcf0a ;
}
/* FAQ */
.navbar-nav li:nth-child(4) a::before{
	background-image: url(../images/ico_headnav_faq.png) ;
}
.navbar-nav li:nth-child(4) a::after{
    background-color: #ce4256 ;
}
/* 問い合わせ */
.navbar-nav li:nth-child(5) a::before{
	background-image: url(../images/ico_headnav_mail.png) ;
}
.navbar-nav li:nth-child(5) a::after{
    background-color: #ff9422 ;
}
.navbar-nav li a img{
    margin-right: 5px ;
}
.navbar-toggle{
    background-color: #2379c9 ;
    margin: 0 ;
    height: 60px ;
    width: 60px ;
    border-radius: 0 ;
    color: #fff ;
    font-size: 23px ;
}

/* scroll======================== */

#header.small{
    height: 60px ;
    background-color: rgba(255, 255, 255, 0.8) ;
}
#header.small .navbar-nav li a{
    height: 60px ;
    padding: 20px 5px 0px 35px ;
}
#header.small .navbar-nav li a:hover::after,
#header.small .navbar-nav li a:focus::after,
#header.small .navbar-nav li a:active::after,
#header.small .navbar-nav li.active a::after{
    left: 15% ;
    right: 3% ;
}
#header.small .navbar-brand{
    height: 60px ;
    width: 45px ;
}
#header.small .navbar-brand img{
    transform-origin: left top;
    transform: scale(0.75);
}
#header.small .navbar{
    height: 60px ;
}

@media (max-width: 991px){
    #header,
    #header.small{
        height: 60px ;
        background-color: #fff ;
    }
    #header .container{
        width: 100% ;
        padding: 0 ;
    }
    .navbar-nav{
        margin-top: 0 ;
        margin-bottom: 0 ;
    }
    #header .navbar-brand{
        height: 60px ;
        width: 45px ;
    }
    #header .navbar-brand img{
        transform-origin: left top;
        transform: scale(0.75);
    }
    .navbar-nav li a,
	#header.small .navbar-nav li a{
        height: 60px ;
        padding: 20px 3px 0px 30px ;
    }
	#header .navbar-nav li a::before{
		left: 14px ;
		height: 16px ;
		width: 16px ;
		background-size: 100% ;
	}
	.navbar-nav li a:hover::after,
	.navbar-nav li a:focus::after,
	.navbar-nav li a:active::after,
	.navbar-nav li.active a::after{
		left: 15% ;
		right: 3% ;
	}
}

@media (max-width: 767px){
    .navbar-collapse{
        background-color: #fff ;
    }
    .navbar-nav{
        border-top: 1px solid #ddd ;
		border-bottom: 1px solid #ddd ;
    }
    .navbar-nav li{
        border-bottom: 1px solid #ddd ;
        border-left: 1px solid #ddd ;
        border-right: 1px solid #ddd ;
        width: 50% ;
        float: left ;
    }
	.navbar-nav li:last-child{
		border-bottom: none ;
	}
    .navbar-nav li:nth-child(even){
        border-left: none ;
    }
    .navbar-nav li a,
    #header.small .navbar-nav li a{
        height: 70px ;
        padding: 25px 15px 0px 35px ;
    }
	.navbar-nav li a::before{
		top: 26px ;
	}
    .navbar-nav li a::after{
        border-radius: 0 ;
    }
    .navbar-nav li a:hover::after,
    .navbar-nav li a:focus::after,
    .navbar-nav li a:active::after,
    .navbar-nav li.active a::after,
	#header.small li a:hover::after,
	#header.small .navbar-nav li a:focus::after,
	#header.small .navbar-nav li a:active::after,
	#header.small .navbar-nav li.active a::after{
        left: 0% !important ;
        right: 0% !important ;
    }
}
/* topic path=============================================================== */

#topicpath{
    background-color: #2379c9 ;
    padding: 50px 10px 10px 10px ;
}
.breadcrumb{
    padding: 0 ;
    margin-bottom: 0 ;
    background-color: #2379c9 ;
    color: #fff ;
}
.breadcrumb li a{
    color: #fff ;
}
.breadcrumb > li + li:before{
    color: rgba(255, 255, 255, 0.5) ;
	padding-left: 0 ;
	margin-right: 5px ;
    content: "\e080" ;
	font-family: 'Glyphicons Halflings';
	font-size: 0.8em ;
	font-weight: normal ;
}

/* h2==================================================== */

h2.pages{
    color: #3c668d ;
    font-size: 30px ;
    font-weight: bold ;
    line-height: 1.5em ;
    margin: 0 0 20px 0 ;
    padding: 10px 0 ;
}
@media (max-width: 767px){
    h2.pages{
        font-size: 26px ;
    }
}
/* guide================================================== */

#pages-default{
    padding-top: 50px ;
    padding-bottom: 100px ;
}
@media (max-width: 767px){
    #pages-default{
        padding-top: 30px ;
        padding-bottom: 70px ;
    }
}

/* 3step====================================== */

#guide-3step{
    padding-top: 20px ;
    padding-bottom: 20px ;
    text-align: center ;
}
#guide-3step .img-step{
    width: 30% ;
    float: left ;
}
#guide-3step .img-step-sp{
	display: none ;
}
#guide-3step .img-step img{
    margin-bottom: 10px ;
    max-width: 100% ;
}
#guide-3step .img-arrow{
    width: 5% ;
    padding: 80px 5px 0 5px ;
    float: left ;
}
#guide-3step .img-arrow img{
    max-width: 100% ;
}
@media (max-width: 767px){
    #guide-3step .img-step,
	#guide-3step .img-arrow{
        display: none ;
	}
	#guide-3step .img-step-sp{
		display: block ;
	}
	#guide-3step .img-step-sp img{
		max-width: 100% ;
	}
}

/* guide-list=========================================================== */

#guide-list{
    padding: 60px 0 ;
}

/* side nav========================= */

.guide_sidenav{
    padding-right: 25px ;
}
#guide_sidenav_affix.affix{
    top: 100px ;
}
#guide_sidenav_affix.affix-bottom {
	position: absolute;
}
.guide_sidenav ul{
    background-color: #2379c9 ;
    list-style-type: none ;
    padding: 25px 20px 20px 20px ;
    border-radius: 10px ;
    display: block ;
    width: 100% ;
    max-width: 250px ;
}
.guide_sidenav ul li.title{
	font-size: 22px ;
	margin-bottom: 20px ;
	color: #fff ;
	position: relative ;
	line-height: 1em ;
}
.guide_sidenav ul li.title::before{
	position: absolute ;
	height: 100% ;
	width: 7px ;
	background-color: #fff ;
	left: -20px ;
	top: 0 ;
	content: " " ;
}
.guide_sidenav ul li a{
    padding: 18px 10px ;
    padding-left: 23px ;
    width: 100% ;
    color: #fff ;
    display: block ;
    transition: all 0.2s ;
    position: relative ;
	border-top: rgba(255, 255, 255, 0.3) dotted 1px ;
	font-size: 0.9em ;
}
.guide_sidenav ul li a:before{
    position: absolute ;
    left: 5px ;
    top: 18px ;
    content: "\e114" ;
    font-family: 'Glyphicons Halflings';
    color: #2379c9 ;
	font-size: 0.45em ;
	height: 13px ;
	width: 13px ;
	padding-top: 1px ;
	background-color: #fff ;
	border-radius: 50% ;
	text-align: center ;
	font-weight: normal ;
	margin-right: 0 ;
}
.guide_sidenav ul li a:hover{
    background-color: rgba(255, 255, 255, 0.13) ;
}

@media (max-width: 1201px){
    .guide_sidenav ul{
        max-width: 200px ;
        padding: 20px 10px 10px 10px ;
    }
	.guide_sidenav ul li.title{
		display: none ;
	}
    .guide_sidenav ul li a{
        padding: 15px ;
        padding-left: 25px ;
		font-size: 13px ;
    }
}
/* list========================================== */

.guide_list_block{
    margin-bottom: 30px ;
    padding: 20px ;
	padding-top: 0 ;
    font-size: 10px ;
    color: #555 ;
    line-height: 1.5em ;
}
.guide_list_block p{
	line-height: 1.8em ;
}
.guide_list_block_body{
    padding: 0 30px ;
}
.guide_list_block h3{
    font-weight: bold ;
    font-size: 3em ;
    margin: 0 0 25px 0 ;
    padding-top: 20px ;
    display: block ;
	color: #555 ;
	position: relative ;
}
.guide_list_block h3::after{
	position: absolute ;
	height: 2px ;
	width: 100% ;
	content: " " ;
	background-color: #eee ;
	top: 33px ;
	left: 0 ;
	z-index: 1 ;
}
.guide_list_block h3 span{
	background-color: #fff ;
	position: relative ;
	z-index: 2 ;
	padding-right: 15px ;
	padding-left: 35px ;
}
.guide_list_block h3 span::before{
	height: 30px ;
	width: 30px ;
	display: block ;
	border-radius: 50% ;
	border: #e0e0e0 4px solid ;
	content: " " ;
	position: absolute ;
	left: 0 ;
	top: 3px ;
}
.guide_list_block p.h3under{
    margin-bottom: 20px ;
    font-size: 1.6em ;
}
.guide_list_block h4{
    font-size: 1.9em ;
    font-weight: bold ;
    margin-bottom: 20px ;
    margin-right: auto ;
    display: block ;
}
.guide_list_block h4 span{
    border-bottom: 1px #555 solid ;
}
.guide_list_block ol{
    padding-left: 30px ;
    border-left: 5px #eee solid ;
    margin-bottom: 30px ;
}
.guide_list_block ol li{
    font-size: 1.4em ;
    margin-bottom: 18px ;
    line-height: 1.65em ;
}
.p_borderleft{
    padding-left: 15px ;
    border-left: 5px #eee solid ;
    margin-bottom: 30px ;
    font-size: 1.3em ;
}
.btn_default_single a,
.btn_default_single input{
    max-width: 400px ;
}

/* btngroup_default_2======= */

ul.btngroup_default_2{
    list-style-type: none ;
    text-align: center ;
    padding: 10px ;
}
ul.btngroup_default_2 li{
    width: 50% ;
    float: left ;
    padding: 5px ;
}
ul.btngroup_default_2 li a,
ul.btngroup_default_2 li input,
.btn_default_single a,
.btn_default_single input{
	border: 0 ;
	width: 100% ;
    font-size: 1.4em ;
    display: block ;
    padding: 15px ;
    background-color: #3c668d ;
    color: #fff ;
    border-radius: 5px ;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3) ;
	transition: all 0.2s ;
	text-align: center ;
}
ul.btngroup_default_2 li a:hover,
ul.btngroup_default_2 li input:hover,
.btn_default_single a:hover,
.btn_default_single input:hover{
	background-color: #fff ;
	color: #3c668d ;
}
.btn_default_single a,
.btn_default_single input{
	max-width: 350px ;
	margin: 0 auto ;
}

/* login-status========= */

p.login-status{
	background-color: #f1f1f1 ;
	padding: 25px ;
	font-size: 1.3em ;
	text-align: center ;
	border-radius: 5px ;
	width: 100% ;
}
p.login-status span{
	font-size: 1.5em ;
	color: #2379c9 ;
	font-weight: bold ;
}

/* attention========= */

.guide_list_block p.attention{
    color: #ce4256 ;
    font-size: 1.3em ;
}
.guide_list_block span.attention{
    color: #ce4256 ;
}

/* tbpl==================== */

ul.btngroup_tbpl{
    padding: 5px 0 ;
    list-style-type: none ;
    max-width: 1000px ;
    margin: 0 auto 20px auto ;
}
ul.btngroup_tbpl li{
    width: 33% ;
    float: left ;
    padding: 5px ;
    margin: 0 auto ;
}
ul.btngroup_tbpl li a{
    width: 100% ;
    height: 60px ;
    display: block ;
    font-size: 1.3em ;
    margin: 0 auto ;
    padding-top: 23px ;
    background-color: #fff ;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3) ;
/*    border-radius: 3px ;*/
    text-align: center ;
    position: relative ;
    font-weight: bold ;
    transition: all 0.2s ;
    margin-bottom: 10px ;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    overflow: hidden;
}
ul.btngroup_tbpl li a:before{
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-style: solid;
    border-width: 0;
    -webkit-transition-property: border-width;
    transition-property: border-width;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
ul.btngroup_tbpl li a:hover:before,
ul.btngroup_tbpl li a:focus:before,
ul.btngroup_tbpl li a:active:before {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    border-width: 2px;
}
ul.btngroup_tbpl li a:after{
    content: "\e095" ;
    font-family: "Glyphicons Halflings";
    color: rgba(0, 0, 0, 0.2) ;
    position: absolute;
    right: 15px ;
    top: 50% ;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    font-size: 20px ;
}
ul.btngroup_tbpl li a.windows{
    color: #4898e3 ;
    background-image: url(../images/btn_tbp_windows.png);
    background-repeat: no-repeat ;
    background-position: top left ;
}
ul.btngroup_tbpl li a.windows:before {
    border-color: #4898e3;
}
ul.btngroup_tbpl li a.android{
    color: #6fb94e ;
    background-image: url(../images/btn_tbp_android.png);
    background-repeat: no-repeat ;
    background-position: top left ;
}
ul.btngroup_tbpl li a.android:before {
    border-color: #6fb94e ;
}
ul.btngroup_tbpl li a.ios{
    color: #e38ea8 ;
    background-image: url(../images/btn_tbp_ios.png) ;
    background-repeat: no-repeat ;
    background-position: top left ;
}
ul.btngroup_tbpl li a.ios:before{
    border-color: #e38ea8 ;
}
ul.btngroup_tbpl li a.windows span,
ul.btngroup_tbpl li a.android span,
ul.btngroup_tbpl li a.ios span{
    color: #888 ;
    font-weight: normal ;
}

/* course================== */

.guide_list_block ul.course{
    display: table ;
    width: 100% ;
}
.guide_list_block ul.course li{
    display: table-cell ;
    width: 33% ;
    border: 5px solid #fff ;
    padding: 20px ;
    background-color: #f1f1f1 ;
    border-radius: 10px ;
    list-style-type: none ;
    text-align: center ;
}
.guide_list_block ul.course li p.top{
    font-size: 2.2em ;
    margin-bottom: 5px ;
}
.guide_list_block ul.course li p.bottom{
    font-size: 1.4em ;
    margin-bottom: 0 ;
}

/* cascmethod=============== */

.guide_list_block ul.cashmethod{
    display: table ;
    width: 100% ;
}
.guide_list_block ul.cashmethod li{
    display: table-cell ;
    width: 50% ;
    border: 5px solid #fff ;
    padding: 20px ;
    border-radius: 10px ;
    background-color: #f1f1f1 ;
    list-style-type: none ;
    text-align: center ;
    font-size: 1.7em ;
}
.guide_list_block .small{
    font-size: 1.2em ;
    margin-bottom: 10px ;
}

/* store=============== */

ul.btngroup_store{
    list-style-type: none ;
    text-align: center ;
    padding: 10px 0 ;
}
ul.btngroup_store li{
    width: 50% ;
    float: left ;
    padding: 5px ;
}
ul.btngroup_store li a{
    font-size: 1.4em ;
    display: block ;
    padding: 15px ;
    width: 100% ;
    background-color: #fff ;
    border-radius: 5px ;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3) ;
    position: relative ;
    margin: 0 auto ;
    border-radius: 3px ;
    text-align: center ;
    position: relative ;
    font-weight: bold ;
    transition: all 0.2s ;
    margin-bottom: 10px ;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    overflow: hidden;
}
ul.btngroup_store li a:before{
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-style: solid;
    border-width: 0;
    border-color: #587691 ;
    -webkit-transition-property: border-width;
    transition-property: border-width;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
ul.btngroup_store li a:hover:before,
ul.btngroup_store li a:focus:before,
ul.btngroup_store li a:active:before {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    border-width: 2px;
}
ul.btngroup_store li a:after{
    position: absolute ;
    content: url(../images/ico_linkjump.png) ;
    left: 15px ;
    top: 40% ;
}
ul.btngroup_store li a img{
    max-width: 80% ;
}

@media (max-width: 767px){
    #guide-list{
        padding: 40px 0 ;
    }
	#guide-list .col-md-9{
		padding-left: 0 ;
		padding-right: 0 ;
	}
    .guide_list_block{
        font-size: 9px ;
        padding: 10px 0 ;
    }
    .guide_list_block_body{
        padding: 10px ;
    }
	.guide_list_block h3{
		font-size: 2.3em ;
		background-color: #f1f1f1 ;
		padding: 13px 10px ;
		margin-bottom: 15px ;
		border-bottom: #ddd 1px solid ;
	}
	.guide_list_block h3::after,
	.guide_list_block h3 span::before{
		content: none ;
	}
	.guide_list_block h3 span{
		background-color: rgba(0, 0, 0, 0.0) ;
		padding-left: 0 ;
	}
    ul.btngroup_tbpl li{
        width: 100% ;
        float: none ;
    }
    .guide_list_block ul.course li{
        width: 100% ;
        float: none ;
        display: block ;
        padding: 10px ;
    }
    .guide_list_block ul.course li p{
        display: inline-block ;
    }
    ul.btngroup_store li{
        width: 100% ;
        float: none ;
    }
}

/* banner erea========================================== */

.p_h2under{
    font-size: 14px ;
    text-align: center ;
    margin: 0 0 25px 0 ;
}
h2.sub_small{
    font-size: 20px ;
    font-weight: bold ;
    text-align: center ;
    margin-bottom: 5px ;
	margin-top: 0 ;
    color: #333 ;
}
h2.sub_small img{
    padding: 0 5px ;
}
@media (max-width: 991px){
    h2.sub_small{
        font-size: 15px ;
    }
    h2.sub_small img{
        max-height: 20px ;
    }
}

/* payment===================================================================== */

.payment_value{
    display: table ;
    width: 100% ;
    max-width: 800px ;
    margin: 0 auto 30px auto ;
    font-size: 10px ;
}
.payment_value .box{
    display: table-cell ;
    width: 50% ;
    border: #fff 10px solid ;
}
.payment_value .box .top{
    background-color: #2379c9 ;
    text-align: center ;
    padding: 15px 0 ;
    border-radius: 10px 10px 0 0 ;
    color: #fff ;
}
.payment_value .box .top h3{
    margin: 0 0 5px 0 ;
    font-size: 1.5em ;
    font-weight: bold ;
    padding-top: 10px ;
}
.payment_value .box .top .value{
    font-size: 3em ;
    margin: 0 ;
	line-height: 1em ;
}
.payment_value .box .top .value span{
    font-size: 0.5em ;
}
.payment_value .box .bottom{
    background-color: #f1f1f1 ;
    border-radius: 0 0 10px 10px ;
    padding: 20px 40px ;
    height: 100px ;
}
.payment_value .box .bottom ul{
    list-style-type: none ;
    font-size: 1.3em ;
    padding-left: 20px ;
    color: #555 ;
}
.payment_value .box .bottom ul li{
    margin-bottom: 10px ;
    line-height: 1.5em ;
    position: relative ;
}
.payment_value .box .bottom ul li:before{
    content: "\e084" ;
    font-family: 'Glyphicons Halflings' ;
    color: #3c668d ;
    position: absolute ;
    left: -20px ;
    top: 0 ;
}
.payment_chargemethod{
    border-top: #ccc solid 2px ;
	position: relative;
    width: 100% ;
    max-width: 900px ;
    margin: -23px auto 0 auto ;
    padding-top: 20px ;
    font-size: 10px ;
    color: #555 ;
}
.payment_chargemethod:after, .payment_chargemethod:before{
    bottom: 100% ;
    left: 72% ;
    position: absolute;
    content: " ";
    height: 0;
    width: 0;
}
.payment_chargemethod:after {
    border: 30px solid transparent ;
    border-bottom: 30px solid #fff ;
    margin-left: -30px ;
}
.payment_chargemethod:before {
    border: 32px solid transparent ;
    border-bottom: 32px solid #ccc ;
    margin-left: -32px ;
}
.payment_chargemethod_box{
    border-bottom: #ddd dotted 2px ;
    padding: 20px 0 ;
}
.payment_chargemethod h3{
    color: #2379c9 ;
    font-weight: bold ;
    font-size: 2em ;
    padding: 10px 0 ;
    margin: 0 0 5px 0 ; 
}
.payment_chargemethod p.small{
    font-size: 1.1em ;
    color: #587691 ;
}
.payment_chargemethod h3 span{
    color: rgba(35, 121, 201, 0.5) ;
}
.payment_chargemethod ul.plan li{
    float: left ;
    width: 33% ;
    text-align: center ;
    list-style-type: none ;
    border: #fff 5px solid ;
    padding: 10px ;
    border-radius: 10px ;
    background-color: #f1f1f1 ;
}
.payment_chargemethod ul.plan li .top{
    font-size: 1.5em ;
    margin-bottom: 5px ;
}
.payment_chargemethod ul.plan li .bottom{
    font-size: 2em ;
    margin-bottom: 0 ;
    color: #758d94 ;
    font-weight: bold ;
}
.payment_chargemethod ul.method li{
    float: left ;
    width: 50% ;
    text-align: center ;
    list-style-type: none ;
    border: #fff 5px solid ;
    padding: 20px 10px ;
    border-radius: 10px ;
    background-color: #f1f1f1 ;
    font-size: 1.5em ;
    line-height: 1.5em ;
}
.payment_chargemethod .schedule{
    padding: 15px ;
}
.payment_chargemethod .schedule p.title{
    color: #587691 ;
    font-size: 1.7em ;
    font-weight: bold ;
}
.payment_chargemethod .schedule p.title small{
    padding-left: 15px ;
    font-weight: normal;
}
.payment_chargemethod .schedule .img{
    text-align: center ;
}
.payment_chargemethod .schedule .img img{
    max-width: 100% ;
}
.payment_chargemethod .schedule .firstmonth{
	margin-bottom: 20px ;
}
.payment_chargemethod .schedule .firstmonth p.title{
	font-weight: bold ;
	font-size: 1.3em ;
	margin-bottom: 5px ;
	color: #db2e63 ;
}
.payment_chargemethod .schedule .firstmonth p.small{
	color: #db2e63 ;
}
.payment_chargemethod .beforeuser{
    background-color: #f1f1f1 ;
    margin-top: 30px ;
    padding: 20px 15px ;
    border-radius: 15px ;
}
.payment_chargemethod .beforeuser .title{
    color: #2379c9 ;
    font-size: 1.7em ;
    text-align: center ;
    font-weight: bold ;
}
.payment_chargemethod .beforeuser .description{
    font-size: 1.3em ;
}
@media (max-width: 767px){
    .payment_value{
        font-size: 9px ;
        display: block ;
    }
    .payment_value .box{
        display: block;
        width: 100% ;
        max-width: 500px ;
        margin: 0 auto ;
    }
    .payment_value .box .top{
        padding: 7px 0 ;
    }
    .payment_value .box .bottom{
        height: auto ;
    }
    .payment_chargemethod{
        font-size: 9px ;
        max-width: 500px ;
        margin-left: auto ;
        margin-right: auto ;
    }
    .payment_chargemethod:after, .payment_chargemethod:before{
        left: 50% ;
    }
    .payment_chargemethod ul.plan li{
        width: 100% ;
    }
    .payment_chargemethod ul.method li{
        width: 100% ;
    }
}


/* Quesution=================================================================== */

#qanda_main{
    padding-top: 50px ;
    padding-bottom: 70px ;
}
#pages-qanda_mainvisual{
    background-color: #f9dd59 ;
    color: #555 ;
    padding-top: 70px ;
    padding-bottom: 70px ;
}
h2.qanda{
    color: #555 ;
    font-size: 38px ;
    margin-bottom: 20px ;
    display: inline-block ;
}
h2.qanda:before,
h2.qanda:after{
    content: url(../images/ico_toph2_qanda.png) ;
    margin: 0 5px ;
}
p.qanda_h2under{
    font-size: 17px ;
    line-height: 1.7em ;
}
#qanda_btnbox{
    margin-top: -40px ;
}
.qanda_btnbox_body{
    padding: 20px 30px ;
    background-color: rgba(255, 255, 255, 0.7) ;
    border-radius: 10px ;
    max-width: 650px ;
    margin: 0 auto ;
    font-size: 15px ;
}
.qanda_btnbox_body p.left{
    float: left ;
    padding: 10px ;
    color: #777 ;
    width: 50% ;
    text-align: center ;
}
.qanda_btnbox_body p.left .glyphicon{
    color: rgba(0, 0, 0, 0.3) ;
}
.qanda_btnbox_body p.qanda_btn{
    width: 50% ;
    float: left ;
}
.qanda_btnbox_body p.qanda_btn a{
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3) ;
    background: linear-gradient(135deg, #1ab4b6, #0a96b9);
    padding: 10px ;
    color: #fff ;
    border-radius: 5px ;
    display: block ;
    text-align: center ;
    transition: all 0.2s ;
}
.qanda_btnbox_body p.qanda_btn a:hover{
    opacity: 0.7 ;
}

@media (max-width: 767px){
    #qanda_main{
        padding-top: 20px ;
        padding-bottom: 50px ;
    }
    #pages-qanda_mainvisual{
        padding-top: 40px ;
    }
    h2.qanda{
        font-size: 30px ;
        display: block ;
        text-align: center ;
    }
    p.qanda_h2under{
        font-size: 14px ;
    }
    .qanda_btnbox_body p.left .glyphicon{
        transform: rotate(90deg);
    }
    .qanda_btnbox_body p.left{
        padding: 0 ;
    }
    .qanda_btnbox_body p.left,
    .qanda_btnbox_body p.qanda_btn{
        width: 100% ;
    }
}

/* attention=========================== */

dl.qanda_attention{
    border: #f1f1f1 3px solid ;
    width: 100% ;
    max-width: 1000px ;
    margin: 0 auto 40px auto ;
    display: table ;
}
dl.qanda_attention dt{
    background-color: #f1f1f1 ;
    width: 20% ;
    display: table-cell;
    text-align: center ;
    padding: 10px ;
}
dl.qanda_attention dt small{
    font-weight: normal ;
}
dl.qanda_attention dd{
    width: 80% ;
    display: table-cell ;
    padding: 20px ;
}
dl.qanda_attention dd ul{
    padding-left: 20px ;
}
dl.qanda_attention dd ul li{
    margin-bottom: 5px ;
}
@media (max-width: 767px){
    dl.qanda_attention{
        display: block ;
    }
    dl.qanda_attention dt,
    dl.qanda_attention dd{
        display: block ;
        width: 100% ;
    }
}

/* form============================== */

#qanda_main .comp{
    width: 100% ;
    max-width: 900px ;
    margin: 0 auto ;
    border: 3px #eee solid ;
    border-radius: 10px ;
    padding: 20px ;
    text-align: center ;
}

#form_quesution{
    width: 100% ;
    max-width: 1000px ;
    margin: 0 auto ;
    font-size: 10px ;
    color: #555 ;
}
#form_quesution .attention{
    color: #e32626 ;
    font-size: 1.3em ;
    margin-bottom: 20px ;
}
#form_quesution dl{
    margin-bottom: 40px ;
}
#form_quesution dt{
    font-size: 2em ;
    color: #587691 ;
    margin-bottom: 10px ;
}
#form_quesution dt.kome:before{
    content: "*" ;
    color: #e32626 ;
}
#form_quesution dd p{
    font-size: 1.4em ;
}
#form_quesution dd p.assist{
    font-size: 1.3em ;
    color: #888 ;
}
#form_quesution dd p input,
#form_quesution dd p select,
#form_quesution dd p textarea{
    border-radius: 3px ;
    padding: 10px ;
    width: 100% ;
    border: 1px #ddd solid ;
    background-color: #fff ;
}
#form_quesution dd p input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
#form_quesution dd p.file input{
    background-color: #fff ;
    padding: 15px ;
    width: auto ;
    border: 0 ;
}
#form_quesution .send input{
    max-width: 200px ;
    padding: 15px ;
    display: block ;
    width: 100% ;
    margin: 0 auto ;
    color: #fff ;
    background-color: #2379c9 ;
    border: 0 ;
    border-radius: 3px;
    font-size: 1.8em ;
}

#form_quesution .send input:disabled{
    max-width: 200px ;
    padding: 15px ;
    display: block ;
    width: 100% ;
    margin: 0 auto ;
    color: #fff ;
    background-color: #79baf7 ;
    border: 0 ;
    border-radius: 3px;
    font-size: 1.8em ;
}

#form_quesution .alert{
    color: #e32626 ;
    font-size: 1.3em ;
    margin-bottom: 20px ;
}
@media (max-width: 767px){
    #form_quesution{
        font-size: 9px ;
    }
}

/* alert========================= */

#alert_qanda{
    font-size: 10px ;
    text-align: center ;
}
#alert_qanda .large{
    color: #e32626 ;
    font-size: 3em ;
}
#alert_qanda .small{
    font-size: 2em ;
}
@media (max-width: 767px){
    #alert_qanda{
        font-size: 9px ;
    }
}

/* Anser==================================================================== */

/* icon group========= */

ul.icongroup_qanda{
    border: #eee solid 3px ;
    list-style-type: none ;
    max-width: 800px ;
    margin: 0 auto 30px auto ;
}
ul.icongroup_qanda li{
    float: left ;
    width: 50% ;
    padding: 20px 10px ;
    border-right: #eee solid 2px ;
    text-align: center ;
}
ul.icongroup_qanda li:last-child{
    border: none ;
}
ul.icongroup_qanda .fa{
    font-size: 1.3em ;
}
.fa-download{
    color: #4395d5 ;
}
.fa-youtube-play{
    color: #ea4560 ;
}
.fa-play-circle-o{
    color: #27b6a7 ;
}

/* tab=========== */

.tab_qanda{
    width: 100% ;
    max-width: 1050px ;
    margin: 0 auto ;
    display: block ;
}
.tab_qanda li{
    width: 25% ;
    padding: 0 5px  ;
    margin-bottom: 0 ;
    font-size: 15px ;
}
.tab_qanda li a,
.tab_qanda li a:hover,
.tab_qanda li a:active,
.tab_qanda li a:focus,
.tab_qanda li.active a,
.tab_qanda li.active a:hover,
.tab_qanda li.active a:active,
.tab_qanda li.active a:focus{
    text-align: center ;
    border: 0 ;
    background-color: #fff ;
    transition: all 0.3s ;
}
.tab_qanda li:nth-child(1) a,
.tab_qanda li.active:nth-child(1) a,
.tab_qanda li.active:nth-child(1):hover a,
.tab_qanda li.active:nth-child(1):focus a{
    color: #3b83c6 ;
}
.tab_qanda li.active:nth-child(1) a,
.tab_qanda li:nth-child(1) a:hover{
    border-bottom: #3b83c6 5px solid ;
}
.tab_qanda li:nth-child(2) a,
.tab_qanda li.active:nth-child(2) a,
.tab_qanda li.active:nth-child(2):hover a,
.tab_qanda li.active:nth-child(2):focus a{
    color: #8c53ab ;
}
.tab_qanda li.active:nth-child(2) a,
.tab_qanda li:nth-child(2) a:hover{
    border-bottom: #8c53ab 5px solid ;
}
.tab_qanda li:nth-child(3) a,
.tab_qanda li.active:nth-child(3) a,
.tab_qanda li.active:nth-child(3):hover a,
.tab_qanda li.active:nth-child(3):focus a{
    color: #4cb2a4 ;
}
.tab_qanda li.active:nth-child(3) a,
.tab_qanda li:nth-child(3) a:hover{
    border-bottom: #4cb2a4 5px solid ;
}
.tab_qanda li:nth-child(4) a,
.tab_qanda li.active:nth-child(4) a,
.tab_qanda li.active:nth-child(4):hover a,
.tab_qanda li.active:nth-child(4):focus a{
    color: #6abf56 ;
}
.tab_qanda li.active:nth-child(4) a,
.tab_qanda li:nth-child(4) a:hover{
    border-bottom: #6abf56 5px solid ;
}
#qanda_tab .tab-pane{
    padding: 30px 0 ;
}

/* accordion========================= */

#qanda_tab .panel-heading{
    border: 0 ;
    padding: 0 ;
    height: 45px ;
    border-radius: 22px ;
}
#qanda_tab .panel-heading a{
    width: 100% ;
    display: block ;
    height: 45px ;
    color: #555 ;
    position: relative ;
    padding-top: 15px ;
    padding-right: 40px ;
    transition: all 0.3s ;
    border-radius: 22px ;
}
#qanda_tab .panel-heading a:after{
    position: absolute ;
    content: "\e114" ;
    font-family: 'Glyphicons Halflings';
    right: 15px ;
    top: 50% ;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    font-size: 20px ;
}
#qanda_tab .panel-group .panel{
    margin: 0 auto 25px auto ;
    max-width: 1000px ;
    box-shadow: none ;
}
#qanda_tab .panel-group .number{
    position: absolute ;
    float: left ;
    width: 50px ;
    color: #fff ;
    text-align: center ;
    padding-top: 15px ;
    height: 50px ;
    border-radius: 25px ;
    left: -5px ;
    top: 50% ;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    font-weight: bold ;
}
#qanda_tab .panel-group .title{
    float: left ;
    margin: 0 ;
    padding-left: 50px ;
}
#qanda_tab .panel-group ul.right{
    float: right ;
    margin: 0 ;
    list-style-type: none ;
}
#qanda_tab .panel-group ul.right:after{
    content: ".";   
    display: block;   
    height: 0;   
    clear: both;   
    visibility: hidden; 
}
#qanda_tab .panel-group ul.right li{
    float: left ;
    position: relative ;
    color: rgba(0, 0, 0, 0.4) ;
    padding-right: 5px ;
}
#qanda_tab .panel-group ul.right li:first-child:before{
    font-family: 'Glyphicons Halflings';
    content: "\e043" ;
    top: 18px ;
    left: 0 ;
    margin-right: 3px ;
}
#qanda_tab .panel-group ul.right li:last-child:before{
    font-family: 'Glyphicons Halflings';
    content: "\e008" ;
    top: 18px ;
    left: 0 ;
    margin-right: 3px ;
}
#qanda_tab .panel-body{
    border-top: 0 ;
}
#qanda_tab .panel-group .day{
    position: relative ;
    margin-bottom: 10px ;
}
#qanda_tab .panel-group .day:before{
    font-family: 'Glyphicons Halflings';
    content: "\e023" ;
    top: 20px ;
    left: 0 ;
    margin-right: 3px ;
    color: #ccc ;
    margin-right: 3px ;
}
#qanda_tab .panel-group .text{
    position: relative ;
    margin-bottom: 10px ;
}
#qanda_tab .panel-group .text:before{
    font-family: 'Glyphicons Halflings';
    content: "\e065" ;
    top: 20px ;
    left: 0 ;
    margin-right: 5px ;
    color: #ccc ;
}
#qanda_tab ul.btns li{
    float: left ;
    padding: 5px ;
    text-align: center ;
    list-style-type: none ;
}
#qanda_tab ul.btns li a{
    padding: 5px 15px 0 15px ;
    border-radius: 20px ;
    border-width: 2px ;
    border-style: solid ;
    height: 30px ;
    display: block ;
}

/* download icon============ */

#qanda_tab ul.btns li:first-child a{
    border-color: rgba(67, 149, 213, 0.3) ;
    color: #4395d5 ;
}
#qanda_tab ul.btns li:first-child a:before{
    content: "\f019" ;
    font: normal normal normal 14px/1 FontAwesome;
    left: 0 ;
    top: 20px ;
    margin-right: 5px ;
}
#qanda_tab ul.btns li:first-child a:after{
    content: "ダウンロード" ;
}

/* Youtube icon============== */

#qanda_tab ul.btns li:last-child a{
    border-color: rgba(234, 69, 96, 0.3) ;
    color: #ea4560 ;
}
#qanda_tab ul.btns li:last-child a:before{
    content: "\f16a" ;
    font: normal normal normal 14px/1 FontAwesome;
    left: 0 ;
    top: 20px ;
    margin-right: 5px ;
}
#qanda_tab ul.btns li:last-child a:after{
    content: "Youtube" ;
}

/* hs-math========================== */

#hs-math .panel-heading a:after{
    color: rgba(59, 131, 198, 0.7) ;
}
#hs-math .panel-heading a{
    background-color: #e9f1f5 ;
}
#hs-math .panel-heading a:hover{
    background-color: #cbdee8 ;
}
#hs-math .number{
    background-color: #3b83c6 ;
}

/* hs-eng========================== */

#hs-eng .panel-heading a:after{
    color: rgba(140, 83, 171, 0.7) ;
}
#hs-eng .panel-heading a{
    background-color: #f5e8fc ;
}
#hs-eng .panel-heading a:hover{
    background-color: #ead5f5 ;
}
#hs-eng .number{
    background-color: #8c53ab ;
}

/* hs-phy========================== */

#hs-phy .panel-heading a:after{
    color: rgba(76, 178, 164, 0.7) ;
}
#hs-phy .panel-heading a{
    background-color: #e9f8f6 ;
}
#hs-phy .panel-heading a:hover{
    background-color: #d0f0ec ;
}
#hs-phy .number{
    background-color: #4cb2a4 ;
}

/* hs-chem========================== */

#hs-chem .panel-heading a:after{
    color: rgba(106, 191, 86, 0.7) ;
}
#hs-chem .panel-heading a{
    background-color: #e5ffdf ;
}
#hs-chem .panel-heading a:hover{
    background-color: #d3f5cb ;
}
#hs-chem .number{
    background-color: #6abf56 ;
}

@media (max-width: 991px){
    #qanda_main .container{
        padding: 0 ;
    }
    #qanda_tab .panel-group .panel{
        margin-bottom: 0px ;
        border-bottom: #ccc solid 1px ;
    }
    #qanda_tab .panel-heading{
        border-radius: 5px ;
        border-radius: 0 ;
        height: auto ;
    }
    #qanda_tab .panel-heading a{
        background-color: #fff ;
        background-color: #fff ;
    }
    #qanda_tab .panel-heading a:hover{
        background-color: #fff ;
    }
    #qanda_tab .panel-heading a{
        height: auto ;
        padding: 15px 30px 15px 0 ;
    }
    #qanda_tab .panel-heading a:after{
        right: 5px ;
        font-size: 15px ;
    }
    #qanda_tab .panel-group .number{
        float: none ;
        width: 40px ;
        padding-top: 10px ;
        height: 40px ;
        border-radius: 20px ;
    }
    #qanda_tab .panel-body{
        border-top: #eee 1px solid ;
    }
    #qanda_tab .panel-group .title{
        padding-left: 45px ;
        float: none ;
    }
    #qanda_tab .panel-group ul.right{
        clear: both ;
        width: 100% ;
        padding-left: 40px ;
        font-size: 12px ;
        float: none ;
    }
    #qanda_tab .panel-group ul.right li{
        float: left ;
        padding: 5px ;
    }
}

/* faq================================================================== */

#faq{
    font-size: 10px ;
    color: #555 ;
    max-width: 1000px ;
}

#faq h3{
    padding: 15px 0 5px 0 ;
    margin-bottom: 15px ;
    border-bottom: #2379c9 2px solid ;
    font-weight: bold ;
    font-size: 2em ;
}
#faq dl{
    padding: 10px 0 ;
    margin-bottom: 10px ;
}
#faq dt{
    font-size: 1.5em ;
    line-height: 1.5em ;
    margin-bottom: 15px ;
}
#faq dt:before{
    content: url(../images/ico_faq_q.png) ;
    margin-right: 5px ;
}
#faq dd{
    padding: 15px 15px 15px 40px ;
    font-size: 1.4em ;
    background-color: #f1f1f1 ;
    line-height: 1.5em ;
    position: relative ;
    border-radius: 10px ;
}
#faq dd:before{
    content: url(../images/ico_faq_a.png) ;
    margin-right: 5px ;
    margin-left: -20px ;
}
#faq dd:after{
    position: absolute ;
    content: "▲" ;
    display: block ;
    color: #f1f1f1 ;
    font-size: 25px ;
    top: -15px ;
    left: 20px ;
}
#faq dd a{
    text-decoration: underline ;
    color: #2379c9 ;
}

@media (max-width: 767px){
    #faq{
        font-size: 9px ;
    }
}

/* player============================================== */

#pages-tbpl{
    background-color: #f1f1f1 ;
    text-align: center ;
    padding: 40px 20px 20px 20px ;
    margin-bottom: 70px ;
    font-size: 10px ;
}
#pages-tbpl .tbpl_top{
    font-size: 1.3em ;
}
#tbplTestContents{
    border: #ccc solid 1px ;
    padding: 30px 30px 50px 30px ;
    text-align: center ;
    font-size: 10px ;
}
#tbplTestContents .largetext{
    font-size: 3em ;
    margin: -60px auto 30px auto ;
    width: 100% ;
    max-width: 300px ;
    background-color: #fff ;
}
#tbplTestContents p{
    font-size: 1.3em ;
}
#tbplTestContents .btn_sampletest a{
    background-color: #2379c9 ;
    padding: 15px 20px ;
    color: #fff ;
    display: block ;
    max-width: 350px ;
    margin: 0 auto ;
    border-radius: 3px ;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3) ;
    font-size: 1.3em ;
}
#tbplTestContents table{
    max-width: 850px ;
    margin: 0 auto ;
    text-align: left ;
    width: 100% ;
    font-size: 1.3em ;
}
#tbplTestContents table tr{
    border-bottom: #ccc 1px solid ;
}
#tbplTestContents table th{
    background-color: #555 ;
    color: #fff ;
    padding: 10px ;
    text-align: center ;
}
#tbplTestContents table td{
    padding: 20px ;
}
#tbplTestContents table td:first-child{
    background-color: #f1f1f1 ;
    width: 20% ;
}
@media (max-width: 768px){
    #tbplTestContents{
        font-size: 9px ;
    }
}

/* login======================================================== */

#login{
    text-align: center ;
}
h2.login{
    text-align: center ;
}
div.login_formtop{
    background-color: #f1f1f1 ;
    color: #2379c9 ;
    padding: 20px ;
    max-width: 400px ;
    width: 100% ;
    margin: 0 auto 50px auto ;
    border-radius: 10px ;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3) ; 
    position: relative ;
}
div.login_formtop >*{
    position: relative ;
    z-index: 3 ;
    line-height: 1.8em ;
}
div.login_formtop:before{
    content: '' ;
    position: absolute ;
    z-index: 1 ;
    width: 20px;
    height: 20px ;
    background-color: #f1f1f1 ;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3) ;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg) skew(20deg,20deg); 
}
div.login_formtop:after{
    content: '' ;
    position: absolute ;
    z-index: 2 ;
    top: 0;
    left: 0 ;
    width: 100% ;
    height: 100% ;
    background-color: #f1f1f1 ;
}
.form_pageslogin{
    margin: 0 auto 30px auto ;
    max-width: 300px ;
}
.form_pageslogin .input input{
    margin-bottom: 20px ;
    width: 100% ;
    padding: 10px ;
}
.form_pageslogin .input input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.form_pageslogin .submit input{
    max-width: 150px ;
    width: 100% ;
    margin: 0 auto ;
    background-color: #2379c9 ;
    padding: 10px ;
    color: #fff ;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3) ;
}
#login .texterea{
    max-width: 600px ;
    margin: 0 auto ;
    text-align: left ;
}
#login .texterea .attention{
    color: #ce4256 ;
    font-weight: bold ;
}
#login .texterea a{
    text-decoration: underline ;
}
#login .texterea p.regist{
    margin-top: 40px ;
    text-align: center ;
}
#login .texterea ul.regist{
    max-width: 400px ;
    margin: 0 auto ;
    list-style-type: none ;
}
#login .texterea ul.regist li{
    width: 50% ;
    float: left ;
    text-align: center ;
}
#login .texterea ul.regist li a{
    width: 90% ;
    display: inline-block ;
    background-color: #dd7d30 ;
    border-radius: 3px ;
    padding: 15px 0 ;
    color: #fff ;
    transition: all 0.2s ;
    text-decoration: none ;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3) ;
}
#login .texterea ul.regist  li a:hover{
    opacity: 0.7;
}
/* terms & privacy ======================================================== */

#terms,
#privacy{
    font-size: 10px ;
    color: #555 ;
    max-width: 1000px ;
}
#terms h3,
#privacy h3{
    margin-top: 30px ;
    font-size: 1.8em ;
    font-weight: bold ;
    color: #758d94 ;
}
#terms p,
#terms ol,
#privacy p,
#privacy ol{
    font-size: 1.4em ;
    line-height: 1.8em ;
}
#terms ol,
#privacy ol{
    padding-left: 20px ;
}
@media (max-width: 767px){
    #terms,
    #privacy{
        font-size: 9px ;
    }
}

/* asct =========================================================== */

#asct{
    max-width: 1000px ;
    font-size: 10px ;
}
#asct dl{
    width: 100% ;
    font-size: 1.4em ;
    line-height: 1.5em ;
    color: #555 ;
    border-bottom: #ddd 1px solid ;
    margin-bottom: 0 ;
    display: table ;
}
#asct dl:after{
    content: ".";   
    display: block;   
    height: 0;   
    clear: both;   
    visibility: hidden;  
}
#asct dl dt{
    padding: 30px ;
    width: 20% ;
    background-color: #f1f1f1 ;
    display: table-cell ;
    color: #3c668d ;
}
#asct dl dd{
    padding: 20px ;
    width: 80% ;
    display: table-cell ;
}
#asct dl dd a{
    text-decoration: underline;
    color: #2379c9 ;
}
@media (max-width: 767px){
    #asct{
        font-size: 9px ;
    }
    #asct dl dt,
    #asct dl dd{
        padding: 15px ;
        width: 100% ;
        float: none ;
        display: block ;
    }
}

/* sitemap============================================= */

#sitemap_smalec{
	margin-bottom: 50px ;
}
#sitemap_smalec a{
    color: #3c668d ;
    transition: all 0.3s ;
    display: block ;
    border-radius: 18px ;
    padding: 10px 13px 0 25px ;
    line-height: 1em ;
    height: 35px ;
	position: relative ;
}
#sitemap_smalec a::before{
	content: "\e080" ;
    font-family: 'Glyphicons Halflings';
	font-size: 0.75em ;
    color: rgba(60, 102, 141, 0.3) ;
	text-decoration: none ;
	position: absolute ;
	left: 10px ;
	top: 10px ;
}
#sitemap_smalec a:hover{
    background-color: rgba(60, 102, 141, 0.1) ;
}
#sitemap_smalec ul.smalec  li{
    margin: 0 10px 10px 0px ;
    float: left ;
    list-style-type: none ;
}
#sitemap_smalec dl.category{
    padding: 15px 0 25px 0 ;
    border-bottom: #ddd solid 1px ;
}
#sitemap_smalec dl.category dt{
    padding: 10px 10px 0 0 ;
    color: #333 ;
}
#sitemap_smalec dl.category dt,
#sitemap_smalec dl.category dd{
    float: left ;
    margin: 0 10px 10px 0 ;
    display: block ;
    line-height: 1em ;
    height: 30px ;
}
#sitemap_book dl{
    padding: 25px 0 20px 20px ;
    border-bottom: #ddd solid 1px ;
    margin-bottom: 0 ;
}
#sitemap_book dl:after{
    content: ".";   
    display: block;   
    height: 0;   
    clear: both;   
    visibility: hidden;  
}
#sitemap_book dl dt,
#sitemap_book dl dd{
    float: left ;
}
#sitemap_book dl dt{
    width: 100% ;
	margin-left: -20px ;
	margin-bottom: 10px ;
}
#sitemap_book dl dt a{
    color: #555 ;
    transition: all 0.3s ;
    display: inline-block ;
    border-radius: 18px ;
    padding: 10px 13px 0 25px;
	position: relative ;
    line-height: 1em ;
    height: 35px ;
	text-decoration: underline ;
}
#sitemap_book dl dt a:before{
    content: "\e080" ;
    font-family: 'Glyphicons Halflings';
	font-size: 0.75em ;
    color: rgba(60, 102, 141, 0.3) ;
	text-decoration: none ;
	position: absolute ;
	left: 10px ;
	top: 10px ;
}
#sitemap_book dl dt a:hover{
    background-color: rgba(60, 102, 141, 0.1) ;
	text-decoration: none ;
}
#sitemap_book dl dd{
    margin: 0 5px 10px 5px ;
}
#sitemap_book dl dd a{
    color: #3c668d ;
    transition: all 0.3s ;
    display: block ;
    border-radius: 18px ;
    padding: 8px 13px 0 13px ;
    line-height: 1em ;
    border: #3c668d solid 1px ;
    height: 35px ;
}
#sitemap_book dl dd a:hover{
    background-color: #3c668d ;
	color: #fff ;
}
@media (max-width: 767px){
    #sitemap_book dl dt{
        margin-left: -5px ;
    }
    #sitemap_smalec dl.category{
        padding: 10px 0 ;
    }
    #sitemap_smalec ul.smalec li{
        margin: 0 5px 5px 5px ;
    }
    #sitemap_book dl{
        padding: 10px 0 10px 10px ;
    }
    #sitemap_book dl dd a{
        height: 25px ;
        padding: 5px 10px 0 10px ;
    }
}

/* alert pages========================-========================= */

#alert_pages{
    font-size: 10px ;
    text-align: center ;
}
#alert_pages .large{
    color: #e32626 ;
    font-size: 3em ;
}
#alert_pages .small{
    font-size: 2em ;
}
#alert_pages .alert_btn a{
    font-size: 1.5em ;
    width: 100% ;
    max-width: 350px ;
    padding: 15px ;
    display: block ;
    margin: 0 auto 10px auto ;
    background-color: #587691 ;
    color: #fff ;
    border-radius: 3px ;
}
@media (max-width: 767px){
    #alert_pages{
        font-size: 9px ;
    }
}

/* iOS13, ipadOS============================================================ */

#ios13{
    max-width: 1000px ;
    padding: 0 ;
}
h2.ios13{
    color: #3c668d;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5em;
    margin: 0 0 10px 0;
    padding: 10px 0;
    text-align: center ;
}
.ios13-top-box{
    padding-bottom: 20px;
    max-width: 900px ; 
    margin: 0 auto ;
    font-size: 1.4rem ;
    color: #587691 ;
}
.ios13-firststep{
    margin-bottom: 50px ;
    text-align: center ;
}
.ios13-firststep a{
    width: 150px ;
    display: block ;
    margin: 0 auto ;
}
.ios13-firststep a:hover{
    opacity: 0.7 ;
}
.ios13-firststep a img{
    display: inline-block ;
    width: 100% ;
}
.ios13-firststep p{
    font-size: 1.6rem ;
    color: #e32626 ;
}
.ios13-flow-box{
    padding: 40px 0 ;
    border-top: #ddd 2px dotted ;
}
.ios13-flow-box h3{
    color: #587691 ;
    font-weight: bold;
    font-size: 2.5rem;
    margin-bottom: 25px ;
    line-height: 1.5em ;
}
.ios13-flow-box .flow-ol{
    margin-top: 20px ;
    line-height: 1.5em;
    padding-left: 35px ;
    border-left: 5px #eee solid;
}
.ios13-flow-box .flow-ol li{
    margin-bottom: 10px ;
}
.ios13-flow-box .flow-ol li span.ico img{
    height: 28px ;
    width: auto ;
}
.ios13-flow-box .flow-ol li span.blue{
    color: #3582ca ;
}
.ios13-img{
    padding: 15px 0 ;
    text-align: center ;
}
.ios13-img img{
    max-width: 100% ;
}

@media (max-width: 767px){
    h2.ios13{
        font-size: 2rem ;
    }
    .ios13-top-box{
        font-size: 1.2rem;
    }
    .ios13-firststep{
        margin-bottom: 20px ;
    }
    .ios13-firststep p{
        font-size: 1.3rem ;
    }
    .ios13-flow-box h3{
        font-size: 2rem ;
    }
    .ios13-flow-box .flow-ol{
        padding-left: 25px ;
    }
    .ios13-flow-box .flow-ol li span.ico img{
        height: 23px ;
    }
}

/* colona */

#colona{
    max-width: 1000px ;
}
h2.colona{
    color: #3c668d;
    font-size: 25px;
    font-weight: bold;
    line-height: 1.5em;
    margin: 0 0 30px 0;
    padding: 10px 0;
    text-align: center;
}
#colona p.bigimage{
    margin-bottom: 30px ;
    text-align: center ;
}
#colona p.bigimage img{
    max-width: 100% ;
}
#colona p.colona-disc{
    padding-bottom: 20px ;
    margin: 0 auto 30px auto ;
    line-height: 1.7em ;
}
#colona p.colona-disc a{
    text-decoration: underline ;
}
#colona p.colona-disc span.asterisk{
    font-size: 0.5em ;
    position: relative ;
    padding: 10px 5px ;
}
#colona p.colona-disc span.asterisk::before{
    position: absolute ;
    content: "＊" ;
    top: 0 ;
    left: 0 ;
    font-size: 0.8em ;
    display: block ;
}

#colona h3.colona{
    font-size: 1.3em ;
    font-weight: bold ;
    color: #3c668d ;
    background-color: rgba(60, 102, 141, 0.1) ;
    padding: 15px ;
    margin-right: auto ;
    margin-bottom: 0 ;
    margin-top: 0 ;
}
#colona #sitemap_book{
    border: #3c668d 1px solid ;
    max-width: 90% ;
    margin: 0 auto ;
}
.colona-border{
    border-bottom: #ddd 2px dotted;
    padding-top: 20px ;
    margin-bottom: 50px ;
}
.colona-step{
    margin-bottom: 40px ;
}
p.colona-steptitle{
    color: #587691;
    font-weight: bold;
    font-size: 2.5rem;
    margin-bottom: 20px;
    line-height: 1.5em;
}

.colona-othertexts{
    padding-top: 30px ;
}
.colona-othertexts a{
    padding: 25px 15px ;
    display: block ;
    width: 100% ;
    max-width: 400px ;
    margin: 0 auto ;
    text-align: center ;
    background-color: #3582ca ;
    color: #fff ;
/*    box-shadow: 3px 3px 0 rgba(35, 121, 201, 0.30) ;*/
    letter-spacing: 0.1em ;
    font-size: 1.7rem ;
    border-radius: 40px ;
}

#colona .existing-disc{
/*    max-width: 800px ;*/
    margin: 0 auto ;
    margin-top: 60px ;
}
.colona-othertexts a span{
    font-size: 1.3em ;
}
/*
ul.colona-btns{
    display: flex ;
    list-style-type: none ;
    max-width: 800px ;
    margin: 0 auto ;
    margin-bottom: 50px ;
}
ul.colona-btns li{
    padding: 10px ;
    width: 50% ;
}
ul.colona-btns li.colona-player{
    width: 60% ;
}
ul.colona-btns li.existing{
    width: 40% ;
}
ul.colona-btns li a{
    padding: 25px 15px ;
    display: block ;
    width: 100% ;
    text-align: center ;
    background-color: #3582ca ;
    color: #fff ;
    box-shadow: 3px 3px 0 rgba(35, 121, 201, 0.30) ;
    letter-spacing: 0.1em ;
}
ul.colona-btns li a span{
    font-size: 1.3em ;
}
ul.colona-btns li.colona-player a{
    background-color: #3582ca ;
    color: #fff ;
    box-shadow: 3px 3px 0 rgba(35, 121, 201, 0.30) ;
}
ul.colona-btns li.existing a{
    background-color: #d0f0ec ;
    color: #3c668d ;
}
#colona .existing-disc p.title{
    font-size: 1.6em ;
    text-align: center ;
    position: relative ;
    margin-bottom: 20px ;
}
#colona .existing-disc p.title span{
    background-color: #fff ;
    padding: 0 5px ;
}
#colona .existing-disc p.title::before{
    position: absolute ;
    top: 15px ;
    left: 0 ;
    width: 100% ;
    height: 3px ;
    background-color: #27b6a7 ;
    content: "" ;
    z-index: -1 ;
}
#colona .existing-disc p.title br{
    display: none ;
}
*/
#colona .existing-disc dl dt{
    font-size: 1.6rem ;
    margin-bottom: 10px ;
}
#colona .existing-disc dl dt span{
    font-size: 1.2em ;
}
#colona .existing-disc dl dt::before{
    content: "■" ;
    color: #27b6a7 ;
    display: inline-block ;
    margin-right: 3px ;
}
#colona .existing-disc dl dd{
    padding-left: 18px ;
}

@media (max-width: 767px){
    h2.colona{
        font-size: 2rem ;
    }
    h2.colona br{
        display: none ;
    }
    #colona p.colona-disc{
        padding-bottom: 0 ;
    }
    #colona h3.colona{
        padding: 10px ;
    }
    p.colona-steptitle{
        font-size: 1.8rem ;
    }
    #colona #sitemap_book{
        max-width: 100% ;
    }
    .colona-othertexts a{
        font-size: 1.5rem ;
        padding: 15px ;
        letter-spacing: 0em ;
    }
    .colona-othertexts a span{
        font-size: 1.15em ;
    }
    #colona .existing-disc dl dt{
        font-size: 1.5rem ;
    }
    #colona .existing-disc p.title br{
        display: block ;
    }
    .colona-border{
        padding-top: 10px ;
        margin-bottom: 30px ;
    }
/*
    ul.colona-btns{
        display: block ;
    }
    ul.colona-btns li.colona-player,
    ul.colona-btns li.existing{
        width: 100% ;
    }
    ul.colona-btns li.existing a{
        padding: 15px ;
    }
*/
}
/*reCAPTCHA v3 バッジを左下に移動 20240513 */
.grecaptcha-badge{left:6px!important;width:70px!important;}
.grecaptcha-badge:hover{left:6px!important;width:256px!important;}