@charset "UTF-8";
@media screen and (max-width: 600px) {
/****************************************

          General Setting

*****************************************/
html {
  overflow: auto;

}
body {
  overflow: hidden;
}
/****************************************

          Layout

*****************************************/
	.floatL {
		float:none;
	}
	.floatR {
		float:none;
	}
	.wrapper {
		margin: 0 auto;
		width: 100%;
	}
	img {
		width:100%;
	}
  .inner {
    width: 94%;
    margin:0 3%;
    padding: 0;
  }
  .inner750 {
    width: 100%;
  }
	.pc-only {
		display: none!important;
	}
	.sp-only {
		display: block!important;
	}
  .mb10 {margin-bottom:3%;}
  .mb35 {margin-bottom:5%;}
  .mb50 {margin-bottom:10%;}
  .mb65 {margin-bottom:15%;}
  .mb80 {margin-bottom:20%;}
  .anchorlink {
    position: relative;
    top: -70px;
    display: block;
  }
/****************************************

          common

*****************************************/
/*****見出し*****/
  .maincatch {
    letter-spacing:0.2rem;
  }
  .maincatch div {
    padding:20% 0;
  }
  .maincatch h1 {
    font-size:3rem;
    margin-bottom:10%;
    line-height: 4rem;
  }
  .maincatch p {
    padding:10% 0 10% 0;
    width:90%;
  }
  h2 {
    padding: 3% 0 3%;
    font-size:2.4rem;
    letter-spacing: 2px;
    line-height: 3.2rem;
  }
  .flexBox {
    display: block;
  }
  .anchorLink {
    margin-top:-70px;
    padding-top:70px;
  }
/****************************************

          header gnav　

*****************************************/
	main:before {
	  content: "";
	  padding-top:70px;
	  display: block;
	}
  main:after {
    content: "";
    padding-top:0%;
    display: block;
  }
  #top-head {
    top: 0;
    position: fixed;
    margin-top: 0;
    background: #fff;
  	width: 100%;
  	height:70px;
  }
  #top-head .floatL {
    padding-left:3%;
    width:94%;
  }
  #top-head .floatR {
    padding-right:3%;
    width:72%;
  }
  #top-head .logo img {
    width:100px;
    height:auto;
  }

  /* Fixed reset */
  #top-head.fixed {
    padding-top: 0;
    background: transparent;
  }
  #mobile-head {
    width: 100%;
    height: 70px;
    z-index: 999;
    position: relative;
  }
	#top-head .inner {
	  position: relative;
	  padding: 0;
	}
	#top-head .inner .floatL {
	  position: static;
	  left:0px;
	}
	#top-head .inner .floatR {
	  position: static;
	  right:0px;
	}
  #top-head.fixed .logo,
  #top-head .logo {
    position: absolute;
		width:100%;
		margin:0%;
		padding:10px 0;
  }
	#top-head .siteCopy {
	  font-size: 0.8rem;
		letter-spacing:-0.1rem;
		text-align: center;
		padding: 15px 0 0 0;
	}
  #top-head .tel {
		width:60%;
		margin: 0 20% 20px;
	}

  #global-nav {
    position: absolute;
    /* 開いてないときは画面外に配置 */
    right: -120%;
    background: rgba(255,255,255,0.9);
    width: 110%;
    text-align: left;
    padding: 0;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
		border:1px solid #c8c8c8;
	  border-radius: 5px;		/* CSS3草案 */
		-webkit-border-radius: 5px;	/* Safari,Google Chrome用 */
		-moz-border-radius: 5px;	/* Firefox用 */
  }
  #global-nav ul {
    list-style: none;
    position: static;
    right: 0;
    bottom: 0;
    font-size: 1.4rem;
  }
  #global-nav ul li {
    display: block;
  	width:100%;
  	height:auto;
	  border-right:0px;
    padding:0px;
  }
	#global-nav ul li a {
	  height:auto;
	  display: block;
	  font-weight: bold;
	  color:#4b5f65;
	  font-size:1.3rem;
	  text-align: left;
	  position:	relative;
	}
	#global-nav ul li a p {
	  position: absolute;
	  width:100%;
  	top: 50%;
  	left: 58%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
	}

  #global-nav ul li i {
		display: inline-block;
		font-size:5px;
		color:#a59484;
		position: relative;
		top:-2px;
	}
  #global-nav ul li br {
		display: none;
  }
  #top-head #global-nav ul li a,
  #top-head.fixed #global-nav ul li a {
    width: 100%;
    display: block;
		margin: 0%;
    color: #4d5c61;
    padding: 22px 0;
		border-bottom:1px solid #c7c7c7;
  }
  #top-head #global-nav ul li:last-child a {
		border-bottom: 0px!important;
	}
  #nav-toggle {
    display: block;
  }
  /* #nav-toggle 切り替えアニメーション */
  .open #nav-toggle span:nth-child(1) {
    top: 18px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
  }
  .open #nav-toggle span:nth-child(2) {
    width: 0;
    left: 50%;
  }
  .open #nav-toggle span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
  }
  /* #global-nav スライドアニメーション */
  .open #global-nav {
    /* #global-nav top + #mobile-head height */
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }


/****************************************

	          top page

*****************************************/
  #top h2.ttl span {
    font-size:1.4rem;
    padding-top:5%;
  }
  #top .service .content .textBox {
    width:80%;
    display: block;
    margin:0 10%;
  }
  #top .service .content .textBox .text {
    font-size:1.5rem;
    padding:30px 0 20px;
    text-align: center;
  }
  #top .service .content .textBox .btn {
    width:60%;
    margin:0 auto;
  }
  #top .service .content .textBox .btn a {
    padding:7px 30px;
  }
  #top .service .content .box:nth-child(1) .textBox {
    position: absolute;
    top: 10%;
    left: auto;
    transform: translate(-0%,-0%);
  }
  #top .service .content .box:nth-child(2) .textBox {
    position: absolute;
    top: 60%;
    left: auto;
    transform: translate(-0%,-0%);
  }

  #top .service .content p {
    color:#fff;
  }
  #top .service .content .ttl {
    font-size:2.4rem;
  }
  #top .service .content .text {
    font-size:1.5rem;
  }
  #top .service .content img {
    width:100%;
  }
  /*****サービス*****/
  #top .service .content .box {
    width: 100%;
  }

  /*****リンク*****/
  #top .link .bg {
    padding: 10% 7%;
  }
  #top .link .box {
    border:1px solid #fff;
    padding:0px;
    position: relative;
    color:#fff;
  }
  #top .link .bg .box:nth-child(1) {
    margin-right:0px;
    margin-bottom:7%;
  }
  #top .link .bg .box:nth-child(2) {
    margin-left:0px;
  }
  #top .link .ttl {
    font-size:2.2rem;
    margin-top:20%;
    margin-bottom:20px;
  }
  #top .link .box .text {
    font-size:1.5rem;
    text-align: justify;
    margin-bottom:80px;
    width:80%;
    margin:0 auto 40%;
  }
  #top .link .btn {
    width:70%;
    position: absolute;
    top:74%;
    left:50%;
    transform: translate(-50%,-50%);
  }
  /*****実績*****/
  #top .works {
    padding: 10% 0 20% 0;
  }
  #top .swiper-container {
    margin-bottom:10%;
  }

  /*****コンテンツ*****/
  #top .contents {
    padding: 15% 0px;
  }
  #top .contents h2 {
    padding-bottom:10%;
  }
  #top .contents .box {
    width: 94%;
    background-color: #fff;
    vertical-align: top;
    margin: 0 3% 3% 3%!important;
    line-height: normal;
  }
  #top .contents .box img {
    width:30%;
  }
  #top .contents .box p {
    vertical-align: top;
    font-size:1.5rem;
    color:#7d7d7d;
    width:68%;
    display: inline-block;
    margin:1%;
    line-height: 1.8rem;
  }
  #top .contents .box p span {
    display: block;
    font-size:1.3rem;
    color:#b8b9b9;
    padding-bottom:0px;
  }
  #top .contents .box:nth-child(odd) {
    margin-right:0%;
  }
  #top .contents .box:nth-child(even) {
    margin-left:0%;
  }
  /*****コンタクト*****/
  #top .contact {
    padding:15% 0px;
    text-align: center;
  }
  #top .contact .subTtl {
    font-size:1.8rem;
    letter-spacing: 5px;
    margin-bottom:10%;
  }
  #top .contact .text {
    line-height: 3rem;
    letter-spacing: 0px;
  }
  #top .contact .btn {
    width:80%;
    margin:0 auto;
    border-radius: 30px;
  	-webkit-border-radius: 30px;
  	-moz-border-radius: 30px;
  }
  #top .contact .btn a {
    font-size:2.8rem;
  }
  #top .contact .formLink {
    margin-top:10%;
  }
  /****************************************

            about page

  *****************************************/
  #about .maincatch p {
    margin:0 auto;
    line-height: 3rem;
  }
  #about .maincatch a img {
    width:80%;
  }

  /****************************************

            service page

  *****************************************/
  #service .maincatch li {
    font-size:1.4rem;
    display: block;
    vertical-align: middle;
    border:2px solid #fff;
    width:80%;
    margin:0 10% 5%;
  }
  #service .maincatch li a {
    height:70px;
    padding:30px 0 0 0;
  }
  #service .maincatch li a i {
   margin-top:2%;
  }
  #service .maincatch .serviceBlock h2 {
    font-size:1.0em;
  }
  #service .anchorTtl {
    width:100%;
    color:#fff;
    height:150px;
    text-align: center;
  }
  #service .anchorTtl .inner .ttl {
    height:150px;
    display: block;
    width:100%;
  }
  #service .anchorTtl .inner .ttl h2 {
    font-size:2.2rem;
    line-height:4.2rem!important;
  }
  #service .anchorTtl .inner .ttl p {
    width: 100%;
    padding-top:3%;
    letter-spacing: 5px;
    font-size: 1.6rem;
  }
  #service .contents .contentsTxt {
    width:90%;
    margin: 5% 5%;
  }
  #service #strategy .contents ul {
    width:100%;
      margin:0 5%;
    text-align: left;
  }
  #service #strategy .contents li {
    width:40%;
    text-align: center;
    padding:2.5% 2.5% 0% 2.5%;
    font-size:1.1rem;
  }

  #service #production ul {
    width:90%;
    margin:0 5%;
    text-align: left;
  }
  #service #production .contents li {
    width:31.3%;
    padding: 1% 1%;
  }
  #service #shop .hotcurve {
    width:100%;
    margin:0 auto;
  	text-align: center;
  }
  #service .contents ul {
    width:100%;
  }
  /****************************************

            works

  *****************************************/
  #works {}


  /****************************************

            voice

  *****************************************/
  #voice .voiceList {
    margin-bottom:30%;
    width:90%;
    margin:0 5%;
  }
  #voice .voiceDetail {
    background-color: #f5f5f5;
    margin-bottom: 8%;
  }
  #voice .voiceDetail .box:nth-child(2) {
    vertical-align: top;
    width:90%;
    padding:5% 5% 5% 5%;
  }
  #voice .voiceDetail img {
    width:100%;
  }
  #voice .voiceDetail h3 {
    font-size: 1.6rem;
    letter-spacing: 3px;
    margin-bottom:5%;
  }
  #voice .voiceDetail .voiceName {
    height:visible;
    overflow: auto;
  }
  #voice .voiceDetail .voiceName p {
    display: block;
  }
  #voice .voiceDetail .btn {
    margin-top:5%;
  }


  /****************************************

            voice_more

  *****************************************/
  #voice_more {}

  /****************************************

            company

  *****************************************/
  #company .maincatch h2 {
    padding-top:0;
  }
  #company .maincatch table {
    border: 1px solid #7d7d7d!important;
    color: #414141;
    text-align: left;
    letter-spacing: 0.2em;
    padding: 10px;
    width:100%;
    height:auto;
    margin:10% 0 20%;
  }
  #company .maincatch table th {
    padding: 3% 0 3% 3%;
    width:25%;
    }
  #company .maincatch table td {
    padding: 3% 0 3% 3%;
    width:75%;
    font-size:3vw;
  }
  #company .acces .contents ul {
    height: auto;
    width: 100%;
    margin:10% auto 20%;
  }
  #company .acces .contents li {
    display: block;
    font-size:1.4rem;
    vertical-align: middle;
    color:#414141;
    letter-spacing: 0.3em;
    height: auto;
    width: 100%;
    margin:0 0 10%;
  }
  #company .googlemap iframe {
    width:100%;
  }
  /****************************************

            recruit

  *****************************************/
  #recruit h2.ttl span {
    display: block;
    font-size:1.2rem;
    padding-top:5%;
    letter-spacing: 2px;
    text-align: center;
  }
  #recruit h3.ttl span {
    font-size:1.6rem;
    letter-spacing: 3px;
  }
  #recruit .contents1 {
    margin:5% 3% 10%;
    width: 94%;
  }
  #recruit .contents1 p {
    width: 100%;
    text-align:justify;
  }
  #recruit .contents2 {
    margin:10% 0 20%;
  }
#recruit .contents2 li {
  font-size:1.4rem;
  letter-spacing: 0.2em;
  display: inline-block;
  border:2px solid #7d7d7d;
  height: 95px;
  width:90%;
}
  #recruit .contents2 li:nth-child(1) {
    margin-right:0;
    margin-bottom:5%;
  }
  #recruit .contents2 li:nth-child(2) {
    margin-left:0;
  }
  #recruit .guidelines table {
    width:100%;
    margin:10% auto;
  }
  #recruit .guidelines th {
    vertical-align: top;
    text-align: left;
    padding:3% 0 3% 3%;
    width:20%;
  }
  #recruit .guidelines td {
    padding:3% 0 3% 5%;
  }

  /****************************************

            contact

  *****************************************/
  #contact .maincatch h2 {
    padding-top:0;
  }
  #contact .maincatch p {
    padding:7%;
    text-align: justify;
  }
  #contact .contactForm {
    width:90%;
    margin:0 5% 15%;
  }
  #contact .contactForm th {
    width:100%;
    display: block;
    padding:7% 3% 1%;
  }
  #contact .contactForm td {
    width:94%;
    display: block;
    padding:1% 3% 7%;
  }
  #contact .contactForm input[type=text] {
    width:100%;
    padding:0;
  }
  #contact .contactForm input[type=checkbox] {
    margin:3%;
  }
  #contact .contactForm textarea {
    width:100%;
    padding:0;
  }
  #contact .contactForm input[type=submit] {
    margin-top:10%;
  }

  /****************************************

            Footer

  *****************************************/
  #footer {
    background-color: #f4efe4;
    width: 100%;
    margin: auto 0;
  }
  #pageTop  {
   position: fixed;
    bottom: 20px;
    right: 0px;
    z-index: 9999;
  }
  #pageTop a {
    display: block;
  }
  #copyright {
    color:#7d7d7d;
    font-size:1.1rem;
    text-align: center;
    padding:3% 0;
    letter-spacing:0.1rem;
  }

}/**@media**/