@charset "utf-8";

/* CSS Document */

@import "reset.css";
@import "clearfix.css";

/* -----------------------------------------------common */

body { font-family: 游ゴシック, "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;}
 a { color:#000000; outline: none; text-decoration:none;}
 a:hover {}
 a img{ webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
 a:hover img{ filter: alpha(opacity=80); -moz-opacity:0.8; opacity:0.8;}

.owl-dots { right: 15px!important; bottom: 15px!important;}

#pagetop { position: fixed; bottom: 10px; right: 10px; background: no-repeat top center url(../img/pageTop.png); width: 30px; height: 30px; background-size: contain; z-index: 9999;}

  
/* -----------------------------------------------common */
.common-inner { padding: 0 20px;}
.common-mv { margin: 40px auto; 0 auto;}
.common-mv img { width: 100%;}
.common-cap { margin: 40px 0 0 0;}
.common-cap p { width: 90%; margin: 35px auto 0 auto; font-size: 0.9em; line-height: 1.8em; letter-spacing: 0.2em; text-align: justify;}
.common-cap img {}
.common-text { margin: 15px 0 0 0; font-size: 0.8em; line-height: 1.6em; text-align: left;}

.common-list { margin: 30px 0 0 0;}
.common-list ul {}
.common-list ul li { display: block; text-align: center; margin: 35px 0 0 0; }
.common-list ul li a { display: inline-block; width: 280px; text-align: center;}
.common-list ul li a img { width: 100%;}
.common-list ul li a span.common-list-num { display: block; width: 70%; height: 50px; margin: 20px auto 0 auto; background-position: center top; background-repeat: no-repeat; border-bottom: 4px solid #000000;}
.common-list ul li:nth-child(1) a span.common-list-num { background-image: url(../img/common-num01.png);}
.common-list ul li:nth-child(2) a span.common-list-num { background-image: url(../img/common-num02.png);}
.common-list ul li:nth-child(3) a span.common-list-num { background-image: url(../img/common-num03.png);}
.common-list ul li:nth-child(4) a span.common-list-num { background-image: url(../img/common-num04.png);}
.common-list ul li:nth-child(5) a span.common-list-num { background-image: url(../img/common-num05.png);}
.common-list ul li:nth-child(6) a span.common-list-num { background-image: url(../img/common-num06.png);}
.common-list ul li:nth-child(7) a span.common-list-num { background-image: url(../img/common-num07.png);}
.common-list ul li:nth-child(8) a span.common-list-num { background-image: url(../img/common-num08.png);}
.common-list ul li:nth-child(9) a span.common-list-num { background-image: url(../img/common-num09.png);}
.common-list ul li:nth-child(10) a span.common-list-num { background-image: url(../img/common-num10.png);}
.common-list ul li a span.common-list-title { display: block; margin: 10px 0 0 0; font-size: 1.2em; letter-spacing: 0;}
.common-list ul li a span.common-list-cap { display: block; font-size: 0.9em;}

.header { padding: 35px 0 0 0;}
.header-logo { width: 200px; margin: 0 auto 25px auto;}
.header-logo img { width: 100%;}
.header ul { display: block; text-align: center;}
.header ul li { display: inline-block; margin: 0 0 0 15px;}
.header ul li:first-child { margin: 0;}
.header ul li a { padding: 0 0 10px 0; font-size: 0.8em;}
#about .header-menu-about, #work .header-menu-work, #contact .header-menu-contact, #recruit .header-menu-recruit { background: url(../img/common-line.png) center bottom repeat-x; background-size: auto 22%;}

h2.top { margin: 50px 0 0 0; text-align: center; font-size: 1.5em; line-height: 1.6em; letter-spacing: 0.4em;}
.title-wave { margin: 90px 0 0 0; text-align: center;}
.title-wave span { display: inline-block; padding: 0 5px 25px 25px; font-size: 1.4em; letter-spacing: 0.2em; background: url(../img/common-line.png) center bottom repeat-x;}
.title-star { width: 90%; margin: 30px auto 0 auto; background: url(../img/common-icon-star.png) no-repeat right center; font-size: 0.9em; line-height: 1.6em;}
.title-common { width: 100%; margin: 60px auto 0 auto; letter-spacing: 0.4em; text-align: center; font-weight: bold; padding: 15px 0 20px 0; text-indent: 30px; line-height: 1.4em;}
.title-common.placelist { background: url(../work/img/work-title-place.png) no-repeat left top; background-size: contain;}
.title-common.shoplist { background: url(../work/img/work-title-shop.png) no-repeat left top; background-size: contain;}
.title-common.recruitlist { background: url(../recruit/img/recruit-title.png) no-repeat left top; background-size: contain;}

.title-work-place { width: 300px; margin: 50px auto 0 auto; height: 65px; padding: 16px 0 0 120px; box-sizing: border-box; background-repeat: no-repeat, no-repeat; background-position: 65px 10px, top left; background-size: 45px auto, contain; font-size: 1.1em; font-weight: bold; position: relative;}
.title-work-place span { display: block; width: 34px; height: 17px; padding:0 5px;  border-top: 2px #000000 solid; border-bottom: 2px #000000 solid; font-size: 0.4em; line-height: 1.7em; letter-spacing: 0.1em; text-align: center; position: absolute; top: 21px; left: 230px;}
.title-work-place.num01 {background-image: url(../img/common-num01.png), url(../work/img/place-title.png);}
.title-work-place.num02 {background-image: url(../img/common-num02.png), url(../work/img/place-title.png);}
.title-work-place.num03 {background-image: url(../img/common-num03.png), url(../work/img/place-title.png);}
.title-work-place.num04 {background-image: url(../img/common-num04.png), url(../work/img/place-title.png);}
.title-work-place.num05 {background-image: url(../img/common-num05.png), url(../work/img/place-title.png);}
.title-work-place.num06 {background-image: url(../img/common-num06.png), url(../work/img/place-title.png);}
.title-work-place.num07 {background-image: url(../img/common-num07.png), url(../work/img/place-title.png);}
.title-work-place.num08 {background-image: url(../img/common-num08.png), url(../work/img/place-title.png);}
.title-work-place.num09 {background-image: url(../img/common-num09.png), url(../work/img/place-title.png);}
.title-work-place.num10 {background-image: url(../img/common-num10.png), url(../work/img/place-title.png);}
.title-work-shop { width: 300px; margin: 50px auto 0 auto; height: 65px; padding: 20px 0 0 115px; box-sizing: border-box; background-repeat: no-repeat, no-repeat; background-position: 64px 12px, top left; background-size: 45px auto, contain; font-size: 0.8em; font-weight: bold; position: relative;}
.title-work-shop span { display: block; width: 34px; height: 17px; padding:0 5px;  border-top: 2px #000000 solid; border-bottom: 2px #000000 solid; font-size: 0.4em; line-height: 1.7em; letter-spacing: 0.1em; text-align: center; position: absolute; top: 21px; left: 230px;}
.title-work-shop.num01 {background-image: url(../img/common-num01.png), url(../work/img/shop-title.png);}
.title-work-shop.num02 {background-image: url(../img/common-num02.png), url(../work/img/shop-title.png);}
.title-work-shop.num03 {background-image: url(../img/common-num03.png), url(../work/img/shop-title.png);}
.title-work-shop.num04 {background-image: url(../img/common-num04.png), url(../work/img/shop-title.png);}
.title-work-shop.num05 {background-image: url(../img/common-num05.png), url(../work/img/shop-title.png);}
.title-work-shop.num06 {background-image: url(../img/common-num06.png), url(../work/img/shop-title.png);}
.title-work-shop.num07 {background-image: url(../img/common-num07.png), url(../work/img/shop-title.png);}
.title-work-shop.num08 {background-image: url(../img/common-num08.png), url(../work/img/shop-title.png);}
.title-work-shop.num09 {background-image: url(../img/common-num09.png), url(../work/img/shop-title.png);}
.title-work-shop.num10 {background-image: url(../img/common-num10.png), url(../work/img/shop-title.png);}
.title-recruit { width: 300px; margin: 50px auto 0 auto; height: 65px; padding: 23px 0 0 105px; box-sizing: border-box; background-repeat: no-repeat, no-repeat; background-position: 47px 17px, top left; background-size: 45px auto, contain; font-size: 1.1em; font-weight: bold; position: relative;}
.title-recruit span { display: block; width: 70px; height: 16px; padding:0 2px;  border-top: 2px #000000 solid; border-bottom: 2px #000000 solid; font-size: 0.4em; line-height: 1.7em; letter-spacing: 0; text-align: center; position: absolute; top: 28px; left: 200px;}
.title-recruit.num01 {background-image: url(../img/common-num01.png), url(../recruit/img/recruit-under-title.png);}
.title-recruit.num02 {background-image: url(../img/common-num02.png), url(../recruit/img/recruit-under-title.png);}
.title-recruit.num03 {background-image: url(../img/common-num03.png), url(../recruit/img/recruit-under-title.png);}
.title-recruit.num04 {background-image: url(../img/common-num04.png), url(../recruit/img/recruit-under-title.png);}
.title-recruit.num05 {background-image: url(../img/common-num05.png), url(../recruit/img/recruit-under-title.png);}
.title-recruit.num06 {background-image: url(../img/common-num06.png), url(../recruit/img/recruit-under-title.png);}
.title-recruit.num07 {background-image: url(../img/common-num07.png), url(../recruit/img/recruit-under-title.png);}
.title-recruit.num08 {background-image: url(../img/common-num08.png), url(../recruit/img/recruit-under-title.png);}
.title-recruit.num09 {background-image: url(../img/common-num09.png), url(../recruit/img/recruit-under-title.png);}
.title-recruit.num10 {background-image: url(../img/common-num10.png), url(../recruit/img/recruit-under-title.png);}





/* -----------------------------------------------top */

ul.owl-carousel { margin: 15px 0 0 0;}
ul.owl-carousel li.item {}
ul.owl-carousel li.item img {}

#top .common-cap p br { display: none;}
.top-logo { display: block; width: 90%; margin: 35px auto 0 auto;}

.top-icon { margin: 30px 0 0 0; }
.top-icon ul { overflow: hidden;}
.top-icon ul li { width: 44%; height: 200px; margin: 0 3%; text-align: center; float: left;}
.top-icon ul li img { height: 50px;}
.top-icon ul li h4 { margin: 10px 0 0 0; font-size: 1.2em}

.top-fb { width: 90%; margin: 70px auto 0 auto; text-align: center;}
.top-fb .fb-page {}



/* -----------------------------------------------under */ 

.about-link { display: block; padding: 75px 0 0 0; text-align: center;}
.about-link span { display: inline-block; width: 90%; max-width: 420px; height: 64px; margin: 0 auto 10px auto; padding: 15px 0 0 0; box-sizing: border-box; border-top: 3px solid #000000; border-bottom: 3px solid #000000; font-size: 0.8em; text-align: center;}
.about-link img {}
.about-company { width: 90%; margin: 0 auto;}
.about-company tr {}
.about-company tr td { display: block; line-height: 1.8em; vertical-align: top;}
.about-company tr td:first-child { margin: 15px 0 0 0;}
.about-company tr td a { display: inline-block; margin: 0 0 0 5px; padding: 0 10px; line-height: 1.4em; border-radius: 10px; border: 3px solid #000000;}

.work-person { margin: 25px 0 0 0; text-align: center;}
.work-person-inner { display: inline-block; font-size: 0.8em; overflow: hidden;}
.work-person-inner img { vertical-align: middle; float: left;}
.work-person-inner span { display: block; font-size: 1.4em;}

.recruit-youkou { margin: 60px 0 0 0;}
.recruit-youkou-btn span { display: none;}
.recruit-youkou-btn { width: 80%; margin: 20px auto 0 auto;}
.recruit-youkou-btn a { display: block; padding: 20px; box-sizing: border-box; border: #000000 4px solid; background: url(../img/common-arrow_black.png) 270px center no-repeat; text-align: center; letter-spacing: 0.3em; font-size: 1.4em;}
.recruit-youkou-btn a:hover { opacity: 0.8;}
.recruit-youkou-btn.off a { pointer-events : none; opacity: 0.3;}
.recruit-youkou-btn.off span { display: block; margin: 10px 0 0 0; text-align: center; letter-spacing: 0.1em;}

#contactForm table { width: 100%; margin: 60px 0 0 0;}
#contactForm th, #contactForm td { text-align: left; padding: 1.4em 0; vertical-align: top; }
#contactForm th { padding-right: 2em; width: 16em; white-space: nowrap; }
#contactForm th em { display: inline-block; font-size: 12px; color: #fff; background-color: #67b6ff; padding: 0.4em 0.8em; line-height: 1; border-radius: 4px; margin-left: 0.6em; }
#contactForm td p { display: none; }
#contactForm td p.error { display: block; padding-top: 0.5em; color: #c00; font-size: 13px; font-weight: bold; }
#contactForm label { color: #4d4d4d; display: 14px; margin-right: 2em; }
#contactForm .ra { display: inline-block; margin-right: 0.5em; }
#contactForm input[type="text"], #contactForm input[type="num"], #contactForm textarea { appearance: none; -webkit-appearance: none; font-size: 1.2em; display: block; width: 100%; margin: 5px 0 0 0; padding: 0.6em; line-height: 1.5; box-shadow: none; box-sizing: border-box; border: 4px solid #000000; }
#contactForm input[type="num"] { display: inline-block; width: 4.5em; }
#contactForm input[type="num"]:first-child { width: 3.2em; }
#contactForm #thanks { text-align: center; font-weight: bold; font-size: 18px; padding-top: 1em; color: #67b6ff; display: none; }
#contactForm input[type="submit"] { cursor: pointer; transition: all .3s ease 0s; -moz-transition: all .3s ease 0s; -webkit-transition: all .3s ease 0s; font-size: 24px; padding: 0.6em;  background-color: #000000; color: #fff; display: block; width: 100%; border: 0; appearance: none; -webkit-appearance: none; background-image: none; margin: 40px auto 0; }
#contactForm input[type="submit"]:hover { opacity: .8; text-decoration: none; }

#thanks2 { max-width: 800px; margin: 0 auto; padding: 20px; }
#thanks2 h1 { margin: 0 auto; text-align: center; width: 100%; }
#thanks2 h1 img { margin: 0 auto; }
#thanks2 > div { margin-top: 40px; text-align: center; border: 6px solid #ddd; padding: 2em; }
#thanks2 a { text-align: center; cursor: pointer; transition: all .3s ease 0s; -moz-transition: all .3s ease 0s; -webkit-transition: all .3s ease 0s; font-size: 18px; padding: 0.6em;  background-color: #000000; color: #fff; display: block; width: 100%; border: 0; appearance: none; -webkit-appearance: none; background-image: none; margin: 40px auto 0; }
#thanks2 a:hover { opacity: .8; text-decoration: none;}
  
/* -----------------------------------------------footer */


.footer-sns { padding: 60px 0 25px 0; text-align: center;}
.footer-sns .fb-like { margin: 0 5px 0 0;}
.footer-sns .fb-like iframe { margin: -6px 0 0 0;}
._2tga, ._2tga:hover { background: #000000; border: 1px solid #000000;}
.footer-sns a.twitter-share-button .btn { background: #000000;}

.footer { padding: 60px 0 30px 0; background: url( ../img/footer-line.png) repeat-x center top;}
.footer-copy { text-align: center;}