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

body {
	background-image:none;
}
html, body, div, span, object, iframe, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, hr, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	font-family:'mugen_r';
}
ul li {
	list-style:none;
}


section {
	width:100%;
	position:relative;
	background-color:white;
}

.animated {
	transform: translate3d(0,0,0)
}
.btns_smt {display:none;}

/* font
* --------------------------------------- */
@font-face { font-family: 'mugen_r'; src: url('../fonts/mgenplus-1c-regular.ttf'); }
@font-face { font-family: 'mugen_m'; src: url('../fonts/mgenplus-1c-medium.ttf'); }
@font-face { font-family: 'mugen_b'; src: url('../fonts/mgenplus-1c-bold.ttf'); }


p.title {
	font-size:200%;
	padding:2em 0;
	letter-spacing:.3em;
}
p.title img {
	display:inline-block;
	vertical-align:bottom;
}
img.title {
	width:100%;
	max-width:800px;
}

/* MAIN
* --------------------------------------- */
.pre {
	background-color:#BFDFFF;
}
.pre img {
	width:100%;
	max-width:300px;
	display:block;
	margin:1em auto;
	margin-bottom:0;
}
#main {
	width:100%;
	height:680px;
	border:15px solid #BFDFFF;
	box-sizing:border-box;
	background-image:url(../images/anytimes/main_bg1.jpg);
	background-size:auto 680px;
	background-position:center left;
	background-attachment:fixed;	
	background-repeat:no-repeat;
	z-index:1;
	position:relative;
	overflow:hidden;
}
#main .mainbg1 {
	width:100%;
	background-image:url(../images/anytimes/main_bg3.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:100% 650px;
	z-index:3;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
#main .mainbg2 {
	width:70%;
	background-image:url(../images/anytimes/main_bg2.jpg);
	background-position:center right;
	background-size:auto 100%;
	background-attachment:fixed;
	background-repeat:no-repeat;
	z-index:2;
	position:absolute;
	top:0;
	right:50%;
	bottom:0;
	left:50%;
}
#main div {
	width:100%;
	height:100%;
	position:relative;
	left:0;
	top:50%;
}
#main .logo img {
	width:200px;
	height:200px;
	position:absolute;
	top:-100px;
	left:0;
	right:0;
	z-index:4;
}
#main .img1, #main .img2 {
	width:80%;
	max-width:480px;
	position:absolute;
	top:10%;
	left:50%;
}
#main .img2 {
	top:450px;
}
#main .img1 img, #main .img2 img {
	width:90%;
	max-width:480px;
	position:absolute;
	left:-45%;
	z-index:4;
}

/* project
* --------------------------------------- */
#project {
	background-color:#BFDFFF;
	position:relative;
	padding:3em 0 2em 0;
	z-index:5;
}
#project .img {
	width:90%;
	max-width:810px;
	display:block;
}
#project .illust {
	width:100%;
	max-width:600px;
}
#project pre {
	width:90%;
	line-height:180%;
	font-size:130%;
}
#project font {
	border-bottom:2px solid white;
}
#project a {
	width:240px;
	height:40px;
	margin:1em auto;
	background-image:url(../images/anytimes/btn_anytimes_bg.png);
	background-size:auto 40px;
	background-position:top center;
	background-repeat:no-repeat;
	display:block;
}
#project a img {
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.5s;
	margin:0 auto;
	padding:0;
}
#project a:hover img {
	
	transform:translate(-40px,0);
}
#project .taidan {
	padding:2em 0 0 0;
	position:relative;
	z-index:4;
}
#project .taidan, 
#project .movie .waku {
	width:90%;
	max-width:720px;
	margin:0 auto;
}
#project .movie {
	position:relative;
	top:-20px;
	margin:0 auto;
	text-align:center;
	height:400px;
	overflow:hidden;
}
#project #sample01 {
	border-radius: 20px; 
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}

/* MERIT
* --------------------------------------- */
#merit {
	background-image:url(../images/anytimes/merit_line.png);
	background-repeat:repeat-x;
	background-position:top left;
	background-color:white;
	position:relative;
	padding:0;
	z-index:5;
}
#merit .title {
	width:;
	max-width:500px;
}
#merit ul {
	max-width:1200px;
	list-style:none;
	margin:2em auto;
}
#merit ul.img1 {
	width:90%;
}
#merit ul.img2 {
	width:70%;
}
#merit ul li {
	float:left;
}
#merit ul li img {
	width:90%;
	max-width:300px;
}
#merit ul.img1 li {
	width:33.3%;
}
#merit ul.img2 li {
	width:50%;
}
#merit div {
	background-image:url(../images/anytimes/merit_line2.png);
	background-repeat:repeat-x;
	background-position:bottom left;
}
#merit .free {
	width:80%;
	max-width:455px;
	max-height:70px;
}
#merit .pc {
	max-width:146px;
}
#merit article {
	padding:3em 0;
}



/* EXAM
* --------------------------------------- */
#exam {
	background-color:#C1FFEB;
	padding:3.5em 0;
}
#exam ul {
	width:90%;
	padding:2em 0;
}
#exam ul li {
	padding:2.5em 0;
	margin:2em auto;
	background-attachment:fixed;
	border-image: url("../images/anytimes/exam_bg.png") 50;
	border-style:solid; border-width:25px; 
}
#exam ul li img {
	width:80%;
	max-width:560px;
}
#exam ul li.e1 {
	background-image:url(../images/anytimes/exam1.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
}
#exam ul li.e2 {
	background-image:url(../images/anytimes/exam2.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
}
#exam ul li.e3 {
	background-image:url(../images/anytimes/exam3.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
}
#exam ul li.e4 {
	background-image:url(../images/anytimes/exam4.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
}
#exam ul li img {
	display:block;
	vertical-align:bottom;
}



/* HOWTO
* --------------------------------------- */
#howto {
	position:realtive;
	background-image:url(../images/anytimes/howto_bg1.png);
	background-position:top left;
	background-repeat:repeat-x;
	padding:4em 0 0 0;
}
#howto article {
	background-image:url(../images/anytimes/howto_bg2.jpg);
	background-position:bottom left;
	background-repeat:repeat-x;
	padding:0 0 4em 0;
}
#howto ul {
	width:100%;
	margin:2em auto;
}
#howto ul li {
	float:left;
	width:46%;
	position:relative;
	margin:0 2%;
}
#howto ul li img {
	width:100%;
	max-width:600px;
}
#howto ul li .img1, 
#howto ul li .img2 {
	width:50%;
	max-width:202px;
	position:absolute;
	top:-15%;
}
#howto ul li .img1 {
	left:5%;
}
#howto ul li .img2 {
	right:5%;
}
#howto .img3 {
	width:90%;
	max-width:800px;
	margin:1em auto;
}


/* SHOP
* --------------------------------------- */
#shop {
	background-color:#efefef;
	mrgin:0;
	padding:3em 0 4em 0;
	position:relative;
	z-index:5;
	
}
#shop ul {
	width:80%;
	margin:0 auto;
	padding-left:1%;
}
#shop ul li {
	float:left;
	width:28%;
	margin:1%;
	padding:1em;
	background-color:white;
}
#shop ul li:3th-child {
	margin-right:0;
}
#shop ul li img {
	float:left;
	width:20%;
	margin-right:1em;
}
#shop ul li p {
	text-align:left;
	font-size:90%;
	float:right;
	width:74%;
}
#shop ul li p span {
	font-size:120%;
	line-height:120%;
	display:block;
	text-align:left;
}
#shop ul li:hover {
	cursor:pointer;
	background-color:rgba(255,255,255,0.7);
}




/* ABOUT
* --------------------------------------- */
#about {
	background-image:url(../images/anytimes/anytimes_line.png);
	background-repeat:repeat-x;
	background-position:top left;
	background-color:white;
	padding:3em 0;
}
#about .img {
	width:90%;
	max-width:960px;
	display:block;
}
#about .img1 {
	padding:3em 0 0 0;
}
#about .img2 {
	padding:1em 0 3em 0;
}
#about .movie {
	position:relative;
}


#about a.apl img {
	width:80%;
	max-width:212px;
	margin:3em 1em;
}
#about a.apl img, 
#info .pagetop img, 
.btn_info img, 
.btn_entry img, 
.gotop2:hover img, 
#howto a img.img3 {
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.5s;
}
#about .apl img.link:hover, 
#info .pagetop img:hover {
	-moz-transform: scale(1.1,1.1);
	-webkit-transform: scale(1.1,1.1);
	-o-transform: scale(1.1,1.1);
	-ms-transform: scale(1.1,1.1);
}
#about a.apl:hover img, 
.btn_info:hover img, 
.btn_entry:hover img, 
.gotop2:hover img, 
#howto a:hover img.img3 {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}
#about a.txt {
	display:block;
	width:240px;
	background-image:url(../images/anytimes/btn_anytimes_link.png);
	background-size:240px 40px;
	background-position:top center;
	background-repeat:no-repeat;
	margin:2em auto;
}
#about a.txt img {
	opacity:0;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.5s;
}
#about a.txt:hover img{
	opacity:1;
}


/* ACTION
* --------------------------------------- */
.btn_anytimes {
	display:none;
	/*
	position:fixed;
	right:1em;
	bottom:1em;
	width:20%;
	max-width:150px;
	z-index:99;*/
}
.btns_smart {display:none;}
.btns_pc {
	margin:0;
	padding:0;
	position:fixed;
	right:-1.3em;
	top:1em;
	z-index:99;
	text-align:right;
	display:block;
}
.btns_pc img {
	width:100%;
	max-width:170px;
	position:relative;
	right:0;
}
.btns_pc img:hover {
	right:1em;
}
.gotop2 {
	position:fixed;
	bottom:1em;
	right:-1.3em;
	z-index:99;
	cursor:pointer;
}



.form_btn, .back_btn {
	border:none;
	border-radius:20% 20%;
	padding:1.5em;
	font-size:100%;
}


/*--------------------------------------------------------------
Form
----------------------------------------------------------- */
#form {
	width:100%;
}
#request {
	padding:3em 0;
	width:100%;
	max-width:900px;
}
.formTable {
	margin:0 auto;
	width:100%;
	max-width:900px;
	background-color:white;
	padding:20px;
	 border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
}
.formTable tr td, 
.formTable tr th {
	padding:1em;
	text-align:left;
	vertical-align:top;
	border-bottom:1px dashed #ccc;
	font-size:100%;
	color:black;
}
.formTable td.php_left, 
.formTable th {
	width:20%;
	text-align:right;
}
.formTable td.php_right {
	width:80%;
}
.formTable .mark {
	width:10%;
}
.formTable .bg_color {
	background-color:;
}
.formTable .mark div {
	background-color:#AA2200;
	color:white;
	font-weight:bold;
	font-size:80%;
	padding:0;
	border-radius: 3px;        /* CSS3草案 */  
    -webkit-border-radius: 3px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 3px;   /* Firefox用 */
}
.formTable input,
.formTable select,
.formTable option,
.formTable textarea {
	margin:0;
	padding:5px;
	text-align:left;
	border:1px solid #ccc;
	font-size:90%;
	width:100%;
	max-width:400px;
}
.formTable textarea {
	height:100px;
}
.formTable .check input {
	width:auto;
}
.formTable tr:last-child td, 
.formTable tr:last-child th {
	border:none;
}
.formTable td span {
	color:#aaa;
	font-size:80%;
}
.formTable .english {
	width:40%;
}
input.form_btn {
	margin:3em auto;
	color:white;
	background-color:#AA2200;
	padding:1em 2em;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	cursor:pointer;
}
input.back_btn {
	margin:0 auto;
	color:black;
	background-color:#bbb;
	padding:1em 2em;
	border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	cursor:pointer;
}
input.form_btn, 
input.back_btn {
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.5s;
}
.form_btn:hover {
	background-color:#FFBFBF;
	color:black;
}
.back_btn:hover {
	background-color:#eee;
}
.error_messe {
	padding:1em;
	border-bottom:1px dashed #ccc;
}

/*--------------------------------------------------------------
Info
----------------------------------------------------------- */
#info {
	padding:3em 0 1em 0;
	background-image:url(../images/anytimes/foot_bg.png);
	background-repeat:repeat-x;
	background-position:top center;
	background-color:#BFDFFF;
}
#info pre {
	padding:1em 0;
}
#info .logo {
	width:60%;
	max-width:600px;
}
#info a {
	color:grey;
	text-decoration:none;
}
#info a:hover {
	text-decoration:underline;
}
#info a.gotop img {
	width:25%;
	max-width:64px;
	transform: translate3d(0,0,0);
}
#info p {
	border:none;
}

header {
	padding:1em 0 0 0;
	margin-bottom:100px;
	height:100px;
	background-image:url(../images/anytimes/head_bg.png);
	background-repeat:repeat-x;
	background-position:bottom center;
	background-color:#BFDFFF;
	position:relative;
}
header img {
	position:relative;
}



@media screen and (min-width:1550px) {
#main {
	background-image:url(../images/anytimes/main_bg.jpg);
	background-size:cover;
}
#main .mainbg2 {
	display:none;
}	
}
@media screen and (max-width:1199px ) {
#main p {
	top:1%;
	left:0;
	z-index:99;
}
#main p img {
	width:100%;
}
#shop ul li {
	width:40%;
	margin-left:1.5em;
	overflow:hidden;
}
}
@media screen and (max-width:800px) {
#main {
	height:500px;
	background-image:url(../images/anytimes/main_bg1_smt.jpg);
	background-size:auto 500px;
	background-position:left top;
	background-attachment:scroll;
}
#main .mainbg1 {
	background-image:url(../images/anytimes/main_bg3_smt.png);
}
#main .mainbg2 {
	display:none;
}
#shop {
	overflow:hidden;
}
#shop ul {
	width:100%;
}
}
@media screen and (max-width:640px) {
.pc {display:none;}

#main {
	z-index:100;
}
#main .mainbg1 {
	background-image:url(../images/anytimes/main_bg3_smt.png);
	background-size:100% 60%;
	background-repeat:no-repeat;
}
#main .img2 {
	top:330px;
}
#main .logo img {
	width:160px;
	height:160px;
	position:absolute;
	top:-80px;
	left:0;
	right:0;
	z-index:4;
}
#merit ul.img1, 
#merit ul.img2 {
	width:100%;
	margin:0 auto;
}
#merit ul.img1 li, 
#merit ul.img2 li {
	width:100%;
	float:none;
	margin:0 auto;
}
#merit ul li img {
	margin-bottom:1em;
	width:60%;
	max-width:300px;
	margin:0 auto;
}


#exam ul {
	width:100%;
	padding: 0;
}
#exam ul li {
	padding:0;
	margin:0 auto;
	border:5px solid #C1FFEB;
}
#exam ul li img {
	width:100%;
	max-width:560px;
	margin:0 auto;
	display:block;
	vertical-align:bottom;
}
#exam ul li.e1 {
	background-size:100% auto;
	background-position:top center;
}
#exam ul li.e1, 
#exam ul li.e2, 
#exam ul li.e3, 
#exam ul li.e4 {
	background-size:100% auto;
	background-repeat:no-repeat;
	background-position:center center;
	background-attachment:scroll;
}

#howto ul li {
	float:none;
	width:90%;
	margin:0 auto;
	margin-top:6em;
}
#howto ul li .img1, 
#howto ul li .img2 {
	width:30%;
}
#shop ul li {
	width:80%;
	margin:1px auto;
	float:none;
}
#about a.apl img {
	margin:1em auto;
}
.btns_pc {display:none;}
.btns_smt {
	margin:0;
	padding:0;
	position:fixed;
	right:-1em;
	bottom:1em;
	z-index:99;
	text-align:right;
	display:block;
}
.btns_smt img {
	width:80%;
}
}