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

/* reset */
*{margin:0; padding:0;}
h1,h2,h3,h4,h5,p,hr,ul,li,ol,img,form{margin:0; padding:0; border:0;}
img{border:0;}
ul li{list-style:none;}

header,footer,section,nav,figure,article,hgroup,dialog,aside{margin:0; padding:0; display:block;}

/* 共通設定 */
body{font-size:14px; line-height:1.6em;
font-family:'Muli','メイリオ',Meiryo,'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
margin:0; padding:0; color:#000; background:#111; width:100%;}
a{color:#e05757;}
a:hover{color:#111;}

#wrap{background:#fff;}



/* header */
header{width:980px; margin:0 auto; height:118px;}
header h1{display:block; float:left; width:500px; height:100%; background:url(../images/logo.png) no-repeat 0 0;}
header h1 a{display:block; height:100%; text-indent:100%; overflow:hidden; white-space:nowrap;}
nav{float:right; width:420px; height:50px;}
nav li{float:left; width:140px; height:50px; margin-top:68px;}
nav li a{display:block; height:100%; background:url(../images/nav.png) no-repeat; text-indent:100%; overflow:hidden; white-space:nowrap;}
nav li#menu1 a{background-position:0 0;}
nav li#menu2 a{background-position:-140px 0;}
nav li#menu3 a{background-position:-280px 0;}
nav li#menu1 a:hover{background-position:0 -50px;}
nav li#menu2 a:hover{background-position:-140px -50px;}
nav li#menu3 a:hover{background-position:-280px -50px;}

#menu{display:none;}

#main-image{width:100%; min-width:980px; height:440px; background:url(../images/main-image.jpg) no-repeat center top #f0f0f0;}
#main-image h2{display:block; height:100%; background:url(../images/chatch.png) no-repeat center center; text-indent:100%; overflow:hidden; white-space:nowrap; }

/* content */
/*#content{width:980px; margin:0 auto;}*/


/* article */
article{padding:60px 0 0 0;}
#intro{padding-bottom:80px; width:980px; margin:0 auto;}
#aboutus{width:980px; margin:0 auto;}
#intro h1{display:block; height:32px; background:url(../images/h1_intro.png) no-repeat 0 0; text-indent:100%; overflow:hidden; white-space:nowrap; margin-bottom:20px;}
.box{width:280px; margin-right:70px; margin-bottom:80px; float:left; border-bottom:1px solid #ccc; padding:46px 0 30px 0; background:url(../images/arrow.png) no-repeat center top;}
.box h2{display:block; border-top:1px solid #ccc; padding:30px 0; text-align:center; font-size:18px; font-weight:normal;}
.box p{padding-top:10px;}
.box section{height:390px;}
.last{margin-right:0 !important;}
#app{background: #e5fffd; margin: 0 0 80px;}
#app .inner{padding: 100px 0 100px 590px; box-sizing: border-box; background: transparent url(../images/ui_screen.png) no-repeat left bottom; height:660px; width:1100px; margin:0 auto; position: relative;}
#feliz{background: url(../images/feliz_logo.png) no-repeat; width:208px; height:67px; text-indent: 100%; overflow:hidden; white-space: nowrap; margin-bottom: 30px;}
#app h2{font-weight:500; font-size:36px; color:#666; line-height:1.4;margin-bottom: 60px;}
#app p{color:#666; margin-bottom: 40px;}
.about_feliz{display: block; color:#4eb7aa; border:1px solid #4eb7aa; text-decoration:none; width:200px; height:40px; line-height:42px; text-align: center; font-size:18px; border-radius:30px; position: absolute; bottom: 100px; right:0; -webkit-transition:all .4s ease; transition:all .4s ease;}
.about_feliz:hover{color:#fff; background: #4eb7aa;}
.about_feliz i{position: absolute; right:20px; top:0; line-height:42px;}
.contents{padding:80px 0; background:url(../images/arrow.png) no-repeat center top; width:980px; margin:0 auto;}
.contents h2{display:block; height:106px; background:url(../images/h2.png) no-repeat; text-indent:100%; overflow:hidden; white-space:nowrap;}
.contents #company h2{background-position:0 0;}
.contents #recrute h2{background-position:0 -106px;}
.contents #contact h2{background-position:0 -212px;}
.contents h3{display:block; font-weight:500; font-size:24px; line-height:1.4; margin-bottom:30px;}
.contents ul{margin-bottom:30px;}
.contents li{margin:10px 0; color:#f43b3b; border:1px solid; padding:5px 10px;}
#recrute p{padding:100px 0; text-align:center;}
.contents .inner{width:532px; margin:115px auto; padding:20px 0;}
#company .inner,#recrute .inner,.contactfrow .inner{border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
dl dt{float:left; width:110px; color:#666; clear:left; padding:5px 0;}
dl dd{float:left; padding:5px 0; width:422px;}

fieldset{border:none; padding:5px 0;}
label{display:block; float:left; width:110px;line-height:36px;}
input,select,textarea{-webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0;}
input[type="text"],textarea{padding:5px; display:table-cell; font-family:'メイリオ',Meiryo,'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif; font-size:16px; border:1px solid #ccc; width:410px;}
textarea{height:150px; max-width:410px;}
input[type="submit"],.submit{display:block; width:214px; height:40px; background:#e05757; color:#fff; font-size:14px; text-align:center; border:none; margin:0 auto; cursor:pointer;}
.submit{text-decoration:none; line-height:40px; margin-top:60px; transition:all .3s ease;}
.submit:hover{color:#fff; opacity:.8;}
.confirm{text-align:center; padding-top:30px; clear:both;}
.confirm input[type="button"]{display:inline-block; width:80px; height:40px; background:#999; color:#fff; font-size:14px; border:none; cursor:pointer;}
.confirm input[type="submit"]{display:inline-block;}

/* footer */
footer{background:#111; color:#eee; padding:40px 0 120px 0;}
footer .inner{width:980px; margin:0 auto; position:relative;}
footer h1{display:block; height:55px; background:url(../images/footer_logo.png) no-repeat 0 0; text-indent:100%; overflow:hidden; white-space:nowrap; margin-bottom:30px;}
footer address{display:block; font-style:normal; padding-top:80px;}
footer #share{position:absolute; top:0; right:0;}
footer #share li{display:block; height:50px; width:50px; float:left; margin-left:40px;}
.mark{text-indent:100%; overflow:hidden; white-space:nowrap; background:url(../images/share.png) no-repeat;}
footer #share li a{display:block; height:100%; background:url(../images/share.png) no-repeat; text-indent:100%; overflow:hidden; white-space:nowrap;}
footer #share li.facebook a{background-position:-50px 0;}
footer #share li.twitter a{background-position:-100px 0;}
footer #share li.google a{background-position:-150px 0;}


/* page top */
#page-top{position:fixed; bottom:20px; right:20px; z-index:12;}
#page-top a{display:block; height:60px; width:60px; background:transparent url(../images/page_top.png) no-repeat 0 0; text-indent:100%; white-space:nowrap; overflow:hidden;}


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

/* header */
header{width:auto; height:68px; padding:0 10px;}
header h1{float:none; width:100%; height:100%; background:url(../images/logo.png) no-repeat 0 0; background-size:auto 100%;}
nav{float:none; width:100%; height:auto; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.9); display:none; z-index:100;}
nav ul{position:absolute; top:50%; transform:translateY(-50%); -moz-transform:translateY(-50%); -webkit-transform:translateY(-50%); left:0; right:0;}
nav li{float:none; width:100%; height:50px; margin-top:0;}
nav li a{background:none; text-indent:0; text-align:center; font-size:20px; text-decoration:none; line-height:50px;}

#menu{display:block; position:fixed; top:10px; right:0; width:40px; height:40px; z-index:101; overflow:hidden;}
#menu span{display:block; height:2px; background:#000; text-indent:100%; overflow:hidden; white-space:nowrap; position:absolute; width:25px; content:""; margin:0 auto; left:0; right:0; transition:all 0.5s ease; -moz-transition:all 0.5s ease; -webkit-transition:all 0.5s ease;}
#menu span:nth-child(1){top:11px;}
#menu span:nth-child(2){top:50%; transform:translateY(-50%); -moz-transform:translateY(-50%); -webkit-transform:translateY(-50%);}
#menu span:nth-child(3){bottom:11px;}
#menu.close span:nth-child(1){top:50%; transform:translateY(-50%) rotate(45deg); -moz-transform:translateY(-50%) rotate(45deg); -webkit-transform:translateY(-50%) rotate(45deg); background:#fff;}
#menu.close span:nth-child(2){left:-200%; background:#fff;}
#menu.close span:nth-child(3){top:50%; transform:translateY(-50%) rotate(-45deg); -moz-transform:translateY(-50%) rotate(-45deg); -webkit-transform:translateY(-50%) rotate(-45deg); background:#fff;}


#main-image{width:100%; min-width:100%; height:340px; background:url(../images/main-image.jpg) no-repeat center top #f0f0f0; background-size:auto 150%;}
#main-image h2{height:100%; background:url(../images/chatch.png) no-repeat center center; background-size:auto 60%;}

/* content */
/*#content{width:auto; padding:0 10px;}*/


/* article */
article{padding:30px 0 0 0;}
#intro{padding-bottom:40px;width:auto; padding:0 10px;}
#aboutus{width:auto; padding:0 10px;}
#intro h1{background:none; height:auto; text-indent:0; white-space:normal; padding:0 10px; font-size:20px; line-height:1.3;}
#intro p{padding:10px;}
.box{width:100%; margin-right:0; margin-bottom:30px; float:none; padding:58px 0 30px 0; background:url(../images/arrow.png) no-repeat center top;}
.box section{height:auto;}
.box h2{padding:30px 0;}
.box p{padding:10px 12px 0 12px;}
.box img{display:block; margin:0 auto;}
#app{margin: 0 0 40px;}
#app .inner{padding: 20px 20px 300px; height:auto; width:auto; background-position:center bottom; background-size:300px auto;}
#feliz{width:120px; background-size:contain; margin-bottom: 0;}
#app h2{font-size:20px; margin-bottom: 20px;}
#app p{display: none;}
.about_feliz{position: relative; bottom: 0; margin: 20px auto; }
#app img{height:24px; width: auto;}
#recrute p{padding:50px 0;}
.contents{padding:40px 10px; width:auto;}
.contents h2{height:60px; background:none; text-indent:0; font-weight:normal; line-height:60px; font-size:24px;}
.contents .inner{width:100%; margin:0; padding:20px 0;}
dl dt{float:none; width:auto;}
dl dd{float:none; width:auto; padding: 10px;}
input[type="text"],textarea{padding:5px; font-size:18px; width:100%; box-sizing:border-box;}
textarea{max-width:100%;}
input[type="submit"]{width:100%;}
.confirm input[type="button"]{width:100%; margin-bottom:10px;}

/* footer */
footer{padding:20px 10px 30px 10px;}
footer .inner{width:100%;}
footer #share{position:relative; padding-top:15px;}
footer h1{height:36px; background:url(../images/footer_logo.png) no-repeat 0 0; background-size:auto 100%; margin-bottom:10px;}
footer address{font-size:10px; padding-top:15px;}
footer #share li{height:25px; width:25px; margin-left:5px;}
.mark{background:url(../images/share.png) no-repeat; background-size:auto 100%;}
footer #share li a{background:url(../images/share.png) no-repeat; background-size:auto 100%;}
footer #share li.facebook a{background-position:-25px 0;}
footer #share li.twitter a{background-position:-50px 0;}
footer #share li.google a{background-position:-75px 0;}


/* page top */
#page-top{bottom:10px; right:10px;}
#page-top a{display:block; height:38px; width:38px; background:transparent url(../images/page_top.png) no-repeat 0 0; background-size:38px;}


}


/* clearfix各バージョン */
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.clearfix {
	display: inline-table;
	min-height: 1%;
}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

/* clearfix各バージョンここまで */