@charset "UTF-8";
/*----------------------------------------
	reset
----------------------------------------*/
body,h1,h2,h3,h4,h5,h6,p,small,ul,li {
  margin: 0;
  padding: 0;
}
header,section,aside {
  display: block;
}
nav {
  display: flex;
}
li {
  list-style: none;
}
img {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0;
  line-height: 0;
  vertical-align: bottom;
}
iframe {
  display: block;
}
/*----------------------------------------
	clearfix
----------------------------------------*/
.clearfix:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
}

/*----------------------------------------
    common
----------------------------------------*/
body {
    font-family:  "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", verdana, Osaka, "MS PGothic", Sans-Serif;
    color: #000;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 0.93em;
    line-height: 2;
}
.mobile{
        display: none;
}
h2 {
	font-family: 'Marcellus SC', "游ゴシック体",serif;
	padding-top: 50px;
	padding-bottom: 50px;
	font-weight: normal;
	text-align: center;
}
h2::after {
    content: "";
	clear: both;
	height: 0;
	display: block;
	border-bottom: 2px solid #000;
	width: 40px;
	margin: 14px auto;
}
h3 {
	font-family: 'Marcellus', "游ゴシック体",serif;
	font-weight: bold;
	letter-spacing: 1.5px;
	font-size: 1.6em;
}
h4, h5 {
	font-family: 'Agmena',"游ゴシック体",serif;
}
a {
    color: inherit;
    text-decoration: none;
    transition: 0.3s;
}
a:hover {
  transition: 0.3s;
  color: #e3d9cd;
}
hr {
  margin: 1em 0;
  padding: 0;
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
}
header {
  width: 100%;
}
header h1.logo {
  float:left;
  margin: 10px 0 10px 10px;
  width: 25%;
}
#global-nav {
  float: left;
  width: 50%;
  margin: 43px 0 0 4rem;
}
#global-nav ul {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
#global-nav ul li{
    width: 20%;
}
#global-nav li a {
  text-decoration: none;
  font-family: 'Marcellus SC', serif;
  color: #000;
  font-size: 1em;
  letter-spacing: 0.2em;
  text-align: center;
  line-height: 1.3;
  display: block;
}
#global-nav li a:hover {
	  color: #e3d9cd;
}
#global-nav li a small {
  font-size: 0.65em;
  vertical-align: baseline;
  display: block;
}
#global-nav li a b {
  display: block;
}
#global-nav ul li.ddmenu ul.gnav-child {
    display: block;
    position: absolute;
    width: 35%;
    z-index: 2;
}
#global-nav ul li.ddmenu ul.gnav-child  li {
  display: none;
  border : 1px solid #fff;
}
#global-nav ul li.ddmenu:hover ul.gnav-child  li {
    display: block;
    padding: 7px 20px;
    background-color: #000;
}
ul.gnav-child  li:hover {
    background-color: #333;
    opacity: 0.3;
}
#global-nav ul li.ddmenu ul.gnav-child li a {
    color: #fff;
}
.info {
  margin: 17px 12px 4px 8px;
}
.h_info {
  background-color: #FFF;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  /*overflow: hidden;*/
  font-family: 'Marcellus SC', serif;
}
section {
	width: 1080px;
	margin: 0 auto;
}
.link-wh-btn a {
	border: 1px solid #000;
	padding: 6px 120px;
	font-size: 0.85em;
	font-family: 'Marcellus SC', serif;
	letter-spacing: 2px;
	background-color: #FFF;
}
.link-wh-btn a:hover {
	color: #e3d9cd;
	border-color: #e3d9cd;
	background-color: #000;
}
.link-wh-btn {
	padding-top: 40px;
	padding-bottom: 90px;
}
#sq-photo_area {
	width: 100%;
	clear: both;
}
#sq-photo_area li {
    float: left;
	width: 16.66666666666667%;
	height: auto;
}
#sq-photo_area li a img {
	width: 100%;
	height: auto;
}
.bc_btn{
	position: fixed;
	z-index: 4;
	bottom: -150px;
	right:  20px;
	width: 120px;
	height: 120px;
	cursor: pointer;
	transition: 1s;
}
main {
  margin: 0 auto;
  text-align: center;
  width: 1080px;
  display: block;
}
/*----------------------------------------
    top
----------------------------------------*/
/* main_visual slider*/
.main_visual {
	clear: both;
}
.slider {
  display: none;
}
.slider.slick-initialized {
  display: block;
}
.slick-slide {
  position: relative;
  transition: .3s ease;
  width: 900px;
}
.slick-slide:not(.slick-current) {
  opacity: .5;
}
.slick-slide img {
  margin: 0;
  width: 100%;
}
.slick-slide .caption {
  position: absolute;
  left: 0px;
  bottom: 100px;
  z-index: 2;
  width: 100%;
  color: #fff;
  text-align: center;
  font-size: 3.8vw;
  font-family: serif,sans-serif;
  font-weight: bold;
  text-shadow:2px 2px 3px #000;
  opacity: 0;   /*通常はキャプションが表示されずにスライドが中央にきたときに表示されるという動きを実装*/
  transition: .3s ease;
}
.slick-current .caption {
  opacity: 1;   /*通常はキャプションが表示されずにスライドが中央にきたときに表示されるという動きを実装*/
  transition-delay: .5s;
}
/* news_area */
.left_box {
	float: left;
	padding-right: 30px;
    padding-left: 50px;
}
.box_title {
	float: left;
}
.post_box {
    width: 70%;
	margin: 0 auto;
}
.news_wap {
	margin-bottom: 30px;
}
.news_title {
	padding-bottom:30px;
}
/* about_area */
#about_area {
	width: 1080px;
	background: url("../images/about-bg02.jpg") center / cover no-repeat;
	margin: 0 auto;
}
#about_area h2::after {
  border-bottom: none;
}
#about_area .company-discription p {
	line-height: 2.5em;
	font-size: 0.95em;
	padding-top: 30px;
}
#about_area h3 small {
	font-size: 0.5em;
}
.company-history {
    padding-top: 100px;
}

/* works_area */
#works_area h2 {
    padding-top: 80px;
}
#works_area .left_block {
	width: 520px;
	float: left;
}
#works_area .right_block {
	width: 520px;
    float: right;
	margin-left: 40px;
}
#works_area .img_box {
	background: transparent;
	transition: 0.3s;
	position: relative;
	width: 100%;
    overflow: hidden;
    text-align: center;
	color: #FFF;
}
#works_area img {
	display: block;
	transition-duration: 0.3s;
}
.img_box:hover img {
	transform: scale(1.1);
	transition-duration: 0.3s;
}
#works_area .box_caption {
	position: absolute;
	background: rgba(0, 0, 0, .3);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	font-size: 1.5em;
	display: none;
}
#works_area p {
	position: relative;
	top: 10px;
}
.works_photo2 {
	float: left;
}
.works_photo3 {
	float: right;
}
#works_area .top {
	margin-top: 40px;
}
/* access_area */
#access_area {
	padding-bottom: 50px;
}
#access_area address {
	font-style: normal;
}
.address_out {
	width: 520px;
	height: 347px;
	border: solid 1px #000;
	float: left;
	padding: 5px;
}
.address_in {
	border: solid 1px #000;
    padding: 67px 0 30px;
    height: 247px;
}
.access_wrap  h3{
    font-size: 1.2em;
    margin-bottom: 30px;
}
.access_wrap {
    font-family: "游ゴシック体",serif;
    font-size: 1.1em;
}
.access_wrap .shop-address p{
    margin-bottom: 10px;
}
.map {
    float: left;
	margin-left: 40px;
}
/*----------------------------------------
    about/recruit
----------------------------------------*/

#recruit_wrap h2 {
    padding-top: 100px;
}
#recruit_wrap .company table,#about_wrap table.company-history {
    margin-top: 0;
}
#about_wrap h3 {
    padding-top: 60px;
}
#about_wrap .left,#about_wrap .center {
  float: left;
  margin-right: 45px;
}
#about_wrap .right {
  float: right;
}
#about_wrap .bottom {
  margin: 45px 0 50px;
}
#about_wrap .service {
    width: 330px;
    border: 1px solid #aaa;
    box-sizing: border-box;
}
#about_wrap h4 {
    padding: 30px 0;
}
th {
width: 300px;
background-color: #F0F0F0;
padding: 10px 0;
border: 1px solid #CCC;
}
td {
width: 780px;
padding: 12px 0 12px 40px;
border: 1px solid #CCC;
text-align: left;
}
table {
margin-top: 70px;
border-spacing: 0;
border-collapse: collapse;
}
#about_wrap,#recruit_wrap,#business_wrap p {
  font-size: 0.97em;
}
#about_wrap p.massege, #recruit_wrap p.massege{
  line-height: 2.5;
  padding:  30px 0;
}
.message {
    padding: 80px 0 10px;
}
/*----------------------------------------
    works
----------------------------------------*/
/*#works {
    background: url(../images/bg-portfolio.jpg) center top/100% auto no-repeat fixed;
}*/
#works_wrap ul {
    margin-bottom: 15px;
}
#works_wrap li {
	margin-right: 15px;
    display: inline-block;
}
#works_wrap .photograph-list li:nth-child(3n) {
	margin-right: 0px;
}
#menu_rap h2 {
	margin-bottom: 10px;
}
#works_wrap h3 {
	font-size: 1.3em;
	border-bottom: 1px double #000;
	padding: 0 150px;
	display: inline-block;
	margin-top: 80px;
}
#works_wrap h4 {
	margin: 80px 0 10px;
}
/*----------------------------------------
    business
----------------------------------------*/
#business_wrap .left,#business_wrap .center {
  float: left;
  margin-right: 45px;
}
#business_wrap .right {
  float: right;
}
#business_wrap .bottom {
  margin: 45px 0 50px;
}
#business_wrap .service {
    width: 330px;
    height: 210px;
    border: 1px solid #aaa;
    box-sizing: border-box;
}
#business_wrap h4 {
    padding: 33px 0 20px;
}
/*----------------------------------------
    access
----------------------------------------*/
.access_wrap p {
    margin-bottom: 20px;
}
.access_wrap .office-logo {
	margin: 120px auto 30px;
}
.address {
    font-style: normal;
    margin-bottom: 15px;
}
.address_out2 {
	width: 510px;
	border: solid 1px #000;
	padding: 5px;
	margin: 50px auto;
}
.address_in2 {
	width: auto;
	border: solid 1px #000;
}
.access_wrap .shop-address2 {
	padding-top: 30px;
	line-height: 2.5;
}
/*----------------------------------------
    recruit
----------------------------------------*/
/*----------------------------------------
    footer
----------------------------------------*/
footer {
    text-align: center;
    background-color: #333;
    width: 100%;
    margin-top: 5vw;
}
.footer-left {
    width: 30%;
    float: left;
    margin: 50px 0;
    color: #fff;
}
.footer-center {
    width: 40%;
    float: left;
    text-align: center;
    margin-top: 60px;
}
.footer-right {
    width: 30%;
    float: left;
    color: #fff;
    margin: 50px 0 30px;
}
#global-nav02 ul {
    align-items: center;
    font-size: 0.9em;
    text-align: left;
    width: 100%;
}
#global-nav02 li {
	float: left;
    letter-spacing: 0.2em;
    display: inline-block;
    width: 50%;
    margin-bottom: 8px;
}
#global-nav02 li a {
    text-decoration: none;
    font-family: 'Marcellus SC', serif;
    color: #fff;
}
.copyright {
    height: 30px;
    font-size: 0.8em;
    background-color: #000;
    color: #fff;
}

/*----------------------------------------
    gototop
----------------------------------------*/
#gototop {
	width: 80px;
	/*padding: 30px 0;
	border-rads: 100%;
	background-color: #FFF;*/
	text-align: center;
	position: fixed;
	z-index: 2;
	bottom: -60px;
	right: 20px;
	cursor: pointer;
	transition-duration: 0.5s;
    font-family: 'Marcellus', serif;
    color: #262626;
}
#gototop:hover {
	transform: scale(1.1);
}
#gototop p{
    margin: 0;
    padding: 0;
}
#gototop {
    margin: 0;
    padding: 0;
}
.out{
    width: 100%;
    height: 100%;
	position: absolute;
	z-index: 9;
	top: -1000px;
	left: -2400px;
	bottom: 0;
	right: 0;
    display: block;
	transition: 1s;
}
.menu-txt {
    display: none;
}

/*----------------------------------------
    レスポンシブ
----------------------------------------*/
@media screen and (max-width:1024px){

header h1.logo{
   float: none;
    }
#global-nav{
    margin: 0 auto;
    float: none;
    display: flex;
    justify-content: space-around;
    font-size: 0.8em;
    }
main,#about_area,#about_wrap .service,section{
    width: auto;
    font-size: 0.9em;
}
#works_area .left_block,#works_area .right_block,.works_photo2,.works_photo3{
    margin-left: 0;
    width: 48%;
}
#about_wrap .left,#about_wrap .center{
    width: 30.55%;
    margin-right: 4.17%;
}
#about_wrap .right{
    width: 30.55%;
}
#works_area .box img,#about_wrap,#about_wrap .left img,#about_wrap .top-right img,#about_wrap .center img,#about_wrap .right img,#about_wrap h4,#works_wrap section li img{
    width: 100%;
    height: auto;
}
#about_wrap .top-right{
    width: 65.28%;
    float: left;
}
#works_wrap section li{
    width: 32.407%;
    margin-right: 1.388%;
}
.address_out,.map {
    float: none;
    margin: 0 auto;
 }
.map {
     margin-top: 100px;
}
#recruit_wrap p.message {
    padding:  3% 10%;
}
#access_area{
     padding-bottom: 0;
    }
    #recruit_area .recruit-banner img {
     width: 100%;
    }
table{
     margin: 0 5%;
    }
.footer-center img{
    width: 80%;
    }
}
@media screen and (max-width:736px){

.logo img{
		width: 70vw;
}
header h1.logo {
	float: none;
    text-align: center;
    margin: 5vw auto 5vw;
    width: auto;
}
#global-nav {
    display: none;
}
.h_info {
	  width: auto;
	  float: none;
      position: static;
	  height: auto;
  }
.info {
	  width: auto;
	  margin: 0 auto 15px;
	  text-align: center;
  }
.left_box {
    padding: 2vw 0;
}
hr {
    margin-bottom: 0;
}
h2 {
    padding-top: 30px;
    font-size: 1.3em;
}
h2::after {
    border-bottom: 1px solid;
}
.slick-slide .caption {
	bottom: 70px;
    font-size: 2em;
}
.pc,.none{
    display: none;
}
.mobile {
    display: block;
    }
.news_wap {
    padding: 0 5%;
    }
#about_area .company-discription P {
    padding: 30px 30px 0 30px;
}
#works_area .left_block,#works_area .right_block,.access_wrap {
    width: 100%;
}
#works_area .works_photo2,.works_photo3{
    width: 48%;
}
#works_area .works_2blok{
    margin-bottom: 4%;
}
.link-wh-btn a {
    padding: 7px 50px;
    width:  80%;
}
#about_wrap,#business_wrap {
    width: 100%;
}
#about_wrap h3 {
    padding-top: 0;
    font-size: 1.2em;
}
#business_wrap .left,#business_wrap .center,#business_wrap .right {
    width: 100%;
    margin-bottom: 10%;
}
#business_wrap .right, {
    margin-bottom: 0;
}
#business_wrap .service {
    float: none;
    height: 170px;
    width: 100%;
}
#works_wrap h3,.access_wrap h3 {
    font-size: 1.1em;
    margin: 20px 0 8px;
}
#works_wrap h2 {
    padding-bottom: 0;
}
#business_area #abusiness .our-service {
    padding-bottom: 0;
}
.left_box img{
    width: 100%;
}
.address_out,.address_out2 {
    float: none;
    margin: 0 auto;
    width: 90%;
    height: auto;
}
.address_in {
    padding: 60px 10px 10px;
}
.address_in2,.address_in2 iframe,.map iframe {
     width: 100%;
     height: 360px;
}
.map {
    padding-top: 40px;
    width: 100%;
	height: 100%;
	margin: 0 auto;
}
main{
    padding-bottom: 80px;
}
#about_wrap p img,#business_wrap img,#works_wrap p img,#business_wrap .top-right img,.access_wrap .office-photo img{
    width: 100%;
    float: none;
}
#about_wrap p.massege{
    padding: 10%;
}
#works_wrap h3 {
    padding: 0;
}
#about_wrap .bottom {
    margin-top: 0;
}
#recruit_wrap .recruit-photo img {
    width: 100%;
}
.access_wrap .office-logo img {
        width: 80%;
}
#global-nav02{
    width: 100%;
}
#global-nav02 li a{
    font-size: 0.7em;
    }
#global-nav02 li {
    margin-bottom: 3vw;
}
#gototop {
    right: 0;
    width: 40px;
}
/*----------------------------------------
    ハンバーガーメニュー
----------------------------------------*/
.menu-txt {
		display: block;
		width: 20%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 14;
}
.menu-txt p{
	font-size: 2vw;
	color: #000;
    position: absolute;
	z-index: 11;
	top:1.3vw;
	left: 1.2vw;
	margin:0;
}
.menu-trigger {
  position: relative;
  z-index: 11;
  width: 4vw;
  height: 4vw;
  top: 5.5vw;
  left: 2vw;
}
.menu-trigger span{
		height: 1px;
		border-radius: 0.3vw;
}
.menu-trigger span:nth-of-type(1) {
        top: 0;
}
.menu-trigger span:nth-of-type(2) {
        top: 1.2vw;
}
.menu-trigger span:nth-of-type(3) {
        top: 2.4vw;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
  border-radius: 1px;
}

.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(1.2vw) rotate(-45deg);
  transform: translateY(1.2vw) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-1.2vw) rotate(45deg);
  transform: translateY(-1.2vw) rotate(45deg);
}
.out{
    width: 100%;
    height: 100%;
	position: absolute;
	z-index: 9;
	top: -1000px;
	left: -1200px;
	bottom: 0;
	right: 0;
    display: block;
	transition: 1s;
}
.out-nav{
    width: 100%;
    height: 100%;
	position: absolute;
	z-index: 13;
    top: 0;
	left: 0px;
	bottom:0;
	right:  0;
	text-align: center;
    background-color: #FFF;
}
.out-nav ul{
    list-style: none;
    padding-right: 2vw;
    text-align: center;
}
.out-nav li{
	margin-top: 13vw;
}
.out-logo img{
        width: 80%;
    margin-top: 18vw;
}
.out-nav li a {
  display: block;
  text-decoration: none;
  font-size: 4vw;
  color: #000;
  font-family: 'Marcellus SC', "游ゴシック体",serif;
}
.out-nav li a:hover {
  transition: 0.3s;
  color: #e3d9cd;
}
.out-nav .out-nav1{
	margin-top: 50px;
}
.active2 {
		display: block;
		left: 0;
		 top: 0;
		transition: 1s;
}
}