/*--common--*/

/**,*:before,*:after{-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}*/

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

a,a:hover{
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}

.body{-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: 100%;}

img{max-width:100%;}

p{font-size:1.4em;}

/*--useful--*/
.t_c{text-align:center; margin:0 auto;}
.f_l{float:left;}
.f_r{float:right;}


.mt1{margin-top:1em}
.mt2{margin-top:2em}
.mb1{margin-bottom:1em}
.mb2{margin-bottom:2em}

.red{color:#F00;}
.bold{font-weight:bold;}


.btn{margin:0;background:#fff; border-radius:10px}


/*--header sticky--*/

.header
{
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 );
    transition-timing-function: cubic-bezier( 0.215, 0.610, 0.355, 1.000 );
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
}
 
.header--hidden
{
    -webkit-transform: translateY( -100% );
    -ms-transform: translateY( -100% );
    transform: translateY( -100% );
}

/*--section panel wrap--*/
.cont{width:960px;padding:25px 0 ;line-height: 1.7; margin:0 auto; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif}

/*--section panel--*/
section.panel{cursor:pointer; position:relative;}
.sec1{background:#f9f9fb;}
.sec2{background:#fffefe;}
.sec3{background:#fefeff;}


/*--cate--*/
.cate{margin:3em .5em; text-align:center;}
.cate li{display:inline-block;width:31%; margin:0 1%}
.cate a{padding:.5em 1em;border-width:1px;border-style:solid;border-radius:5px;text-align:center;font-size:1.5em; display:block;font-weight:bold}
.cate a:hover{text-decoration:none;text-shadow:1px 1px 0 #666;color:#fff}
.c_rooter a,.order a{border-color:#0096df;color:#0096df}
.c_rooter a:hover{background:#0096df}
.c_mobile a{border-color:#e95193;color:#e95193}
.c_mobile a:hover{background:#e95193}
.c_unext a{border-color:#129b93;color:#129b93;}
.c_unext a:hover{background:#129b93}
.c_detail a{border-color:#ccc;background:#EDF0F2;color:#0B98EC;text-shadow:none}
.c_detail a:hover{background:none; text-shadow:none;color:#0B98EC;}
.c_kaga a{border-color:#F79D1A;background:#F79D1A;color:#fff;text-shadow:1px 1px 0 #666;}
.c_kaga a:hover{color:#F79D1A; background:none; text-shadow:none;}

/*--next button--*/
/*.scroll{display:block; position:absolute; bottom:1em; border:1px #ccc solid; border-radius:50%; right:15%; height:50px; width:50px; text-align:center; vertical-align:middle}*/
.scroll{display:block; position:absolute; bottom:1em; border:1px #499bea solid; border-radius:10px; right:15%; text-align:center; vertical-align:middle;color:#499bea; text-decoration:none; padding:.5em 4em .5em 1em;font-size:1.5em;font-weight:bold}
.scroll:after{content:"";height:0; width:0; border:1em transparent solid; border-top-color:#499bea; position:absolute; right:1em; top:35%}
.scroll:hover{border-color:#999; text-decoration:none}
.scroll:hover:after{border-top-color:#999;}


h2{font-size:3em; text-align:left;
/*padding:.2em 1em; border-radius:15px; color:#FFF; background:background: rgba(73,155,234,1);
background: -moz-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(32,124,229,1)));
background: -webkit-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -o-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -ms-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: linear-gradient(to bottom, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=0 ); */
font-weight:bold; margin-bottom:1em;border-bottom:1px #207ce5 solid; color:#499bea;box-shadow:1px 1px 1px #eee}

h2#rooter{border-color:#0096df; color:#0096df;}
h2#mobile{border-color:#e95193; color:#e95193;}
h2#unext{border-color:#129b93; color:#129b93;}

/*--sec2--*/

.sec2 h2{margin-bottom:5px}
.sec2 p{margin:1em auto}
.sec2 dl{font-size:1.2em;width:50%}
.sec2 dt{border-left:10px #0096df solid;border-bottom:1px #ccc solid;padding:.5em 1em;font-weight:bold;display:inline-block}
p.roota{background:#0096df; color:#FFF;padding:.2em 1em;font-weight:bold;margin-bottom:0 auto .5em;width:25%}
.sec2 dd{color:#0096df; font-weight:bold;font-size:1.1em;padding:.5em 1em;border-bottom:1px #ccc dotted; margin-bottom:5px; text-indent:1em; text-align:right}
.sec2 dd span{font-size:.9em;}


/*--sec3--*/

/*.sec3 div>div a{padding:.5em 1em;border-radius:10px; margin:.5em auto; display:inline-block; font-size:1.2em;float:right;}*/

.sec3 div>div a:hover{background:none;text-decoration:none}

.mobile{border:2px #e95193 solid;padding:0 0 1em;border-radius:10px}
.mobile p,.unext p{padding:0 2em;}
.unext ul{margin:0 2em;}
.unext{border:2px #129b93 solid; padding:0 0 1em;border-radius:10px}
.sec3 p{margin:1em auto;}

/*--order--*/
.order{margin:3em auto; width:50%}
/*.morder{text-align:center;margin:3em 0 0;}
.morder li{display:inline-block; margin:0 .5em}*/
.morder{display:-webkit-box;/*--- Androidブラウザ用 ---*/
    display:-ms-flexbox;/*--- IE10 ---*/
    display: -webkit-flex;/*--- safari（PC）用 ---*/
	display:flex;
	-webkit-box-pack:center;/*--- Androidブラウザ用 ---*/
    -ms-flex-pack:center;/*--- IE10 ---*/
    -webkit-justify-content:center;/*--- safari（PC）用 ---*/
    justify-content: center;}
.morder li{display:block; margin:1em .5em;}
.order a{border-width:1px;border-style:solid;display:block; text-align:center;border-radius:10px; padding:.5em 1em;font-size:1.4em; font-weight:bold;text-decoration:none;text-shadow:1px 1px 0 #666;border-color:#0096df;color:#fff;background:#0096df}
.morder a{border-width:1px;border-style:solid;display:block; text-align:center;border-radius:10px; padding:.5em;font-size:1.4em; font-weight:bold;text-decoration:none;text-shadow:1px 1px 0 #999;border-color:#e95193;background:#e95193;color:#fff;}
.morder a:first-line{font-size:.8em;}
.order a:hover{text-decoration:none;background:none;color:#0096df;text-shadow:none}
.morder a{border-color:#e95193;background:#e95193}
.morder a:hover{color:#e95193;text-shadow:none}
.unext .order a{border-color:#129b93;background:#129b93}
.unext .order a:hover{color:#129b93;}


/*--popup--*/
.cate li{ position:relative;}
.cate div{width:210px;height:90px;border-radius:50%; position:absolute;box-shadow:2px 2px 1px #999;bottom:-200px;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
visibility:hidden;
}

.cate div:after{content:"";height:0;width:0;border:1em transparent solid; border-top-width:3em;border-top-style: solid; position:absolute; bottom:-3em;}
.cate div p{line-height:1.2em; padding-top:30px;color:#fff}
.cate li:hover div{display:block;height:100px;width:220px;top:-125px; visibility:visible}

.c_rooter div{ background:#0096df}
.c_rooter div:after{border-top-color:#0096df}
.c_mobile div{ background:#e95193}
.c_mobile div:after{border-top-color:#e95193}
.c_unext div{ background:#129b93}
.c_unext div:after{border-top-color:#129b93}

.mobile p.docomo{border:1px #f66 solid; border-radius:5px; display:inline-block;padding:.2em 1em;margin:.5em 0 .5em 4em;font-size:1.2em}
.mobile p.uq{border:1px #39f solid; border-radius:5px; display:inline-block;padding:.2em 1em;margin:.5em 0 1em 4em;font-size:1.2em}