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

*{
	box-sizing: border-box;
}

body {
	
	margin:  0;
	padding:  0;
	color: #2D2D2D;
	font-family: Yu Gothic, "Hiragino Sans", Meiryo, "sans-serif";
	font-weight: bold;
	font-size: 15px;
}

a { color: #FFF;
    text-decoration: none;
}
a:hover {
	color: #999A9A;
}
h1, h2, h3, h4, h5, h6 {margin-top: 0; }
h4 {
	line-height: 2.4;
}
p {
   margin-top: 0;
   line-height: 2.5;
}
img { vertical-align: bottom; }

/* header */
#head_wrap {
    top: -100px;
    position: relative;
    width: 100%;
    margin: 100px auto 0;
    line-height: 3;
    z-index: 999;
    height: 0px;
    text-decoration: none;
    }

	.inner {
		background-image: url("../images/header_bg.jpg");
		width: 100%;
		height: 100px;
		margin: 0 auto;
		position: relative;
	}
	.inner:after {
		content: "";
		clear: both;
		display: block;
	}
	.logo {
		width: 200px;
		padding-top: 25px;
		margin-left: 30px;
	}
	.logo img {
		display: block;
		max-width: 100%;
		height: auto;
	}

#global_nav {
	position: absolute;
	right: 0;
    top: 0;
}

#global_nav ul {
	list-style: none;
	font-size: 20px;
	margin-right: 10px;
	display: inline-flex;
}

#global_nav ul li{
	padding: 20px 10px;
}

#global_nav ul li:last-child {
	border-right: none;
}

#global_nav ul li a {
	padding: 0 5px;
	padding: 2px;
	transition : all .6s ease 0s;
	box-sizing: border-box;
	font-weight: bold;
	line-height: 0.6;
	font-family: 'Stardos Stencil', cursive;
}

#global_nav ul li:not(last-child) {
	margin-right: 20px;
}

/* Fixed */
#head_wrap .fixed {
    margin-top: 0;
    top: 0;
    position: fixed;
    height: 100px;
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
    z-index: 9999;
}
#head_wrap .fixed .logo {
  color: #FFF;
}
#head_wrap .fixed #global-nav ul li a {
  color: #FFF;
  padding: 0 20px;
}

/* Toggle Button */
#nav-toggle {
  display: none;
  position: absolute;
  right: 12px;
  top: 14px;
  width: 34px;
  height: 36px;
  cursor: pointer;
  z-index: 101;
}
#nav-toggle div {
  position: relative;
}


/* main_visual */
/*==================================================
スライダーのためのcss
===================================*/

.slide_photo { position: relative; width: 100%; height: 90vh; overflow: hidden; margin: 0 auto;
}
.mv_01, .mv_02, .mv_03 { position: absolute; top:0; left:0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat;
}
.mv_01{ animation: slide1 20s infinite;
}
.mv_02{ animation: slide2 20s infinite;
}
.mv_03{ animation: slide3 20s infinite;
}

@keyframes slide1 { 0% {opacity: 1; transform: scale(1.0);} 20% {opacity: 1;} 30% {opacity: 1;} 40% {opacity: 0; transform: scale(1.1);} 90% {opacity: 0} 100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide2 { 0% {opacity: 0;} 30% {opacity: 0; transform: scale(1.1);} 40% {opacity: 1;} 50% {opacity: 1;} 60% {opacity: 0; transform: scale(1.0);} 100% {opacity: 0;}
}
@keyframes slide3 { 0% {opacity: 0;} 50% {opacity: 0; transform: scale(1.0);} 60% {opacity: 1;} 70% {opacity: 1;} 90% {opacity: 0; transform: scale(1.1);} 100% {opacity: 0;}
}
@keyframes slide4 { 0% {opacity: 0;} 70% {opacity: 0; transform: scale(1.1);} 80% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 0; transform: scale(1.0);}
}

#main_visual {
  position: relative;
}
.slide_photo img {
		width: 100%;
	}

@media screen and (max-width: 1058px) {
	.mv {
		width: 100%;
		height: 90vh;
	}
}

@media screen and (max-width: 767px) {
	.mv {
		width: 100%;
		height: 90vh;
	}
	.wrapper #main_visual {
		margin-top: 100px;
	}
	
}


/*========= スライダーレイアウトのためのCSS ===============*/
.logo_top {
  position: absolute;
  z-index: 2;
  top: 45%;
  left: 50%;
}

.logo_top img {
	width: 60%;
	transform: translate(-50%, -50%);
}

.title_name img{
	width: 250px;
	height: auto;
}




/*=== 9-1-2 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:10px;
	left:50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:20px;
    /*テキストの形状*/
	color: #eee;
	font-weight: 400;
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:#eee;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:75px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:2px;
	height: 80px;
	background:#eee;
}

/* ABOUT US */
#about {
	background-image: url("../images/green_01.png"),url("../images/green_02.png"),url("../images/about_bg.jpg");
	background-size: 150px,110px,cover;
	background-repeat: no-repeat;
	background-position: 90% 0%,8% 10%,center;
	padding: 120px 0 120px 0;
}
.about_inner {
	width: 900px;
	margin: 0 auto;
}

.item_container {
	display: flex;
	justify-content: space-between;
	width: 700px;
	margin: 0 auto;
}

.about_item img {
	width: 225px;
	border-radius: 10px;
}

#about h3 img {
	display: block;
	width: 500px;
	margin: 0 auto;
	padding-bottom: 20px;
}
#about h4 {
	text-align: center;
	margin-bottom: 30px;
	margin-top: 10px;
}

@media screen and (max-width: 767px){
	#about {
		padding: 60px 0;
	}
	.about_inner { 
		width: 100%;
	}
	#about h4 {
		font-size: 19px;
		padding: 0 20px;
		text-align: left;
	}
	#about {
		background-size: 60px,40px,cover;
		background-repeat: no-repeat;
		background-position: 90% 0%,9% 2%,center;
		padding: 100px 0 100px 0;
	}
	.item_container {
		flex-direction: column;
		justify-content:space-between;
		width: 100%;
		height: auto;
	}
	.about_item img {
		width: 100%;
		margin: 0px auto;
		padding: 12px 20px;
	}
}


/* WORKS */
#works {
	width: 100%;
	background-image: url("../images/works_bg.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 120px 0 120px 0;
	position: relative;
}
.black {
	background-image: url("../images/works_bg_black.gif");
	background-size: 80%;
	background-position: center;
	width: 90%;
	margin: 0 auto;
	padding-bottom: 60px;
}
	
#works h3 img {
	display: block;
	width: 500px;
	margin: 0 auto;
	padding-bottom: 30px;
	padding-top: 80px;
}

/*==================================================
施工画像スライドcss
===================================*/
.slide_wrap {
	list-style: none;
	display: flex;
	justify-content: space-between;
	padding: 0;
	margin: 0 30px;
}

.slide_content {
	flex-basis: calc((100% - 90px)/4)
}

.slide_content img {
    width: 100%;
    height: auto;
}

.slide_content p {
	font-size: 14px;
	color: #fff;
	font-weight: 400;
	line-height: 1;
	margin-top:  10px;
}

div #wrap_works {
	width: 100%;
	height: auto;
	margin: 0 auto;
}

/*==================================================
moreボタンのためのcss
===================================*/

.more_button {
	display: block;
	position: relative;
	padding-left: 20px;
	width: 160px;
	color: #FFF;
	font-size: 22px;
	font-weight: 500;
	text-decoration: none;
	background-color: #2D2D2D;
	border: 2px solid #fff;
	border-radius: 12px;
	margin: 40px auto 40px auto;
	line-height: 2;
}

#works a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 60px;
	height: 2px;
	background-color: #fff;
}

@media screen and (max-width: 767px){
	#works h3 img {
		padding-top: 0;
	}
	.black {
		padding: 60px 0 10px 0;
	}
	.more_button {
		width: 80%;
		line-height: 2.5;
		font-size: 26px;
	}
		
}

/* contact */
#contact {
	background-image: url("../images/contact_bg.jpg");
	background-size: cover;
	padding-top: 80px;
}
#contact_wrap {
	text-align: center;
	max-width: 1000px;
	margin: 0 auto;
	background-image: url("../images/cat.png"),url("../images/sign.png"),url("../images/Recruit.png");
	background-position: left bottom,right bottom,left 45%;
	background-repeat: no-repeat;
	background-size: 180px,150px,180px;
}
#contact_wrap h4 {
	margin-bottom: 0;
}
#contact_wrap p {
	font-size: 13px;
	margin-top: 12px;
	margin-bottom: 20px;
}
#contact_wrap p span {
	font-weight: 500;
}
#contact_wrap img {
	width: 390px;
	margin-bottom: 3px;
}
#contact_wrap a img{
	margin-top: 15px;
	margin-bottom: 50px;
}

@media screen and (min-width: 767px){
	.recruit {
	display: none;
	}
}

@media screen and (max-width: 767px){
	#contact {
		width: 100%;
	}
	#contact_wrap h4 {
		font-size: 19px;
		padding: 0 20px;
	}
	#contact_wrap p, #contact_wrap p span {
		font-weight: 600;
		font-size: 16px;
		padding: 10px;
		line-height: 1.8;
	}
	#contact_wrap {
		background-image: none;	
	}
	#contact_wrap img {
		height: 60px;
		max-width: 100%;
	}
	#contact_wrap a img {
		margin-bottom: 22px;
	}	

	.recruit img {
		width: 100%;
		max-width: 400px;
		padding: 0 15px 0 15px;
		display: block;
		margin: 0 auto;
	}
}

/* footer */
footer {
	background-color: #2D2D2D;
	color: #FFFFFF;
}

.wrap_footer {
	width: 100%;
	max-width: 980px;
	height: auto;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 0 auto;
	padding: 0 15px;
}

.left {
	display: flex;
	align-items: center;
}

.footer_logo img {
	width: 40px;
	display: block;
	max-width: 100%;
	padding-right: 14px;
	height: auto;
	border-right: 1px solid #fff;
}

.footer_logo a {
	display: inline-block;
}

.footer_name p {
	font-size: 12px;
	font-weight: 500;
	line-height: 2;
	padding: 10px 0 0 15px;
}

.footer_nav {
	display: flex;
	justify-content: flex-end;
	list-style: none;
	padding-top: 50px;
}

.footer_nav li a {
	font-family: 'Stardos Stencil', cursive;
	font-size: 12px;
	text-align: center;
} 

.footer_nav li:not(:last-child) {
	margin-right: 30px;
}

.copy {
	margin-bottom: 0;
	padding-bottom: 10px;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.2em;
	opacity: 0.4;
	text-align: center;
}


@media screen and (max-width: 767px){
	.wrap_footer {
		width: 100%;
		flex-direction: column;
	}
	.footer {
    text-align: center;
    }
	.left {
		margin: 0 auto;
		flex-direction: column;
	}
	.footer_logo img {
		border-right: none;
		width: 70%;
		padding: 25px 0 8px 0;
	}
	
	.footer_name p {
		padding: 0;
		font-size: 18px;
		margin-bottom: 10px;
	}
	.footer_right {
		margin: 0 auto;
		width: 100%;
	}
	.footer_nav {
		flex-direction: column;
		align-content: center;
		padding: 0;
	}
 
   .footer_nav li {
    	border-top: 1px solid #555555;
    }
 
    .footer_nav li:last-child {
    	border-bottom: 1px solid #555555;
    }
	
	.footer_nav li:not(:last-child) {
		margin: 0;
	}
 
    .footer_nav li a {
    	text-align: left;
		font-size: 20px;
		line-height: 2.8;
    }
	.copy {
		font-size: 14px;
		line-height: 2;
		margin: 0;
		padding-bottom: 15px;
	}

}
	

	
	
/* 下層ページ */
.title {
	height: 90vh;
	background-image: url("../images/company_top.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
}

.title_inner {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: auto;
	text-align: center;
}

.title h2 {
	font-size: clamp(48px,5vw,68px);
	font-family: 'Stardos Stencil', cursive;
	color: #fff;
	letter-spacing: 0.3em;
}

/*==================================================
companyページ
===================================*/

.company_main {
	font-weight: 400;
	background-color: #f3f3f3;
}

div .company_main_inner {
	width: 900px;
	margin: 0 auto;
	padding: 100px 0;
}

@media screen and (max-width: 999px){
	div .company_main_inner {
		width: 100%
	}
}

.table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

.table tr th,
.table tr td {
    padding: 40px 40px;
    text-align: left;
    vertical-align: top;
}
.table tr th {
    width: 15%;
    font-weight: 600;
	border-bottom: 1px solid #CBB79A;
}
.table tr td {
    width: 75%;
	border-bottom: 1px solid #2D2D2D;
}

@media screen and (max-width: 767px){
.table tr th,
.table tr td {
    display: block;
    width: 90%;
	padding: 0;
    margin: 20px 20px;
	line-height: 2;
	font-size: 17px;
	}
.table tr th {
	border-bottom: none;
	}
.table tr td {
	border-bottom: 2px solid #CBB79A;
	}
}

/*==================================================
worksページ
===================================*/


/*==================================================
スライダーのためのcss
===================================*/

/*画像の横幅を100%にしてレスポンシブ化*/
.gallery img {
	width: 100%;
	height: auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*メイン画像下に余白をつける*/
.gallery_photo {
	margin:0 0 5px 0;
}

.gallery_photo li {
list-style:none;
}
/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc;/*矢印の色*/
    border-right: 2px solid #ccc;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*選択するサムネイル画像の設定*/

.choice-btn li{
	cursor: pointer;
	outline: none;
	list-style:none;
}

.choice-btn li img{
	opacity: 0.4;/*選択されていないものは透過40%*/
	background:#333;
}

.choice-btn li p {
	display: none;
}

.choice-btn li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}

/*========= レイアウトのためのCSS ===============*/
/*エリア全体を中央寄せ*/
.works_wrapper {
  width:94%;
  max-width:900px;
  margin:0 auto;
}

.gallery_photo ul {
  margin:0;
  padding: 0;
  list-style: none;
}

.gallery_photo li p {
	margin: 0;
	font-weight: 400;
	font-size: 18px;
}

.gallery_inner {
	margin-top: 80px;
	margin-bottom: 80px;
}

.apartment_name {
	display: flex;	
	width: 900px;
}

.apartment_name p {
	padding-left: 40px;
	text-align: center;
	font-size: 16px;
}

@media screen and (max-width:767px){	
	.apartment_name {
		width: 100%;	
		padding-left: 40px;
	}
	.apartment_name p {
		text-align: left;
		padding: 0 15px 0 0;
		
	}
	.gallery_photo {
		padding: 0 40px;
	}
	.choice-btn {
		padding: 0 40px;
	}
	
}
	

/*========= スマホ・タブレット用 767px以下 ===============*/
@media screen and (max-width:767px){	
	img {
	max-width: 100%;
	height: auto;
}
	
	h3 {
		padding: 0 10px;
	}
	h4 {
		text-align: left;
		line-height: 2.2;
	}

.logo {
	width: 150px;
	margin: 0;
	padding: 0;
}
	
#global_nav ul {
    display: block;
    margin-right: 0px;
  }
	
#global_nav ul li {
   	border-right: none;
  }
	
#head_wrap {
    top: 0;
    position: fixed;
    margin-top: 0;
    width: 100%;
    padding: 0;
}
	
/* Fixed reset */

#head_wrap .inner {
    width: 100%;
    padding: 0;
  }
  #head_wrap .fixed {
    padding-top: 0;
    background: transparent;
  }
  #mobile-head {
    background-image: url("../images/header_bg.jpg");
    width: 100%;
    height: 100px;
    z-index: 999;
    position: relative;
  }
  #head_wrap.fixed .logo, #head_wrap .logo {
    position: absolute;
    left: 13px;
    top: 13px;
    color: #FFF;
    font-size: 26px;
  }
  #global_nav {
    position: absolute;
    /* 開いてないときは画面外に配置 */
    top: -500px;
    background-color: #2D2D2D;
    width: 100%;
    text-align: center;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
  }
  #global_nav ul {
    list-style: none;
    position: static;
    right: 0;
    bottom: 0;
    font-size: 24px;
    margin-top: 30px;
	padding: 0;
  }
  #global_nav ul li {
    float: none;
    position: static;
  }
  #global_nav ul li:not(last-child) {
	margin-right: 0px;
  }
	
  #head_wrap #global_nav ul li a,
  #head_wrap.fixed #global_nav ul li a {
    width: 100%;
    display: block;
    padding: 10px 0;
  }
  #nav-toggle {
    display: block;
  }
/* #nav-toggle 切り替えアニメーション */
  #nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #FFF;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
  }
  #nav-toggle span:nth-child(1) {
    top: 0;
  }
  #nav-toggle span:nth-child(2) {
    top: 11px;
  }
  #nav-toggle span:nth-child(3) {
    top: 22px;
  }
  .open #nav-toggle span:nth-child(1) {
    top: 11px;
    -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: 11px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
  }
  /* #global-nav スライドアニメーション */
  .open #global_nav {
    /* #global-nav top + #mobile-head height */
    -moz-transform: translateY(600px);
    -webkit-transform: translateY(600px);
    transform: translateY(600px);
  }
	
.logo_top img {
  	top: 55%;
	width: 90%;
}

/* 施工画像 スワイプ */	
.slide_wrap{
      display: flex;
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      padding:0 0 1em;
      scroll-behavior: smooth;
   }
   .slide_wrap .slide_content {
      height:100%;
      flex: 0 0 88%;
      margin: 0px 5px;
      scroll-snap-align:center;
   }
}

.slide_wrap::-webkit-scrollbar{
	height: 5px;
}
.slide_wrap::-webkit-scrollbar-track{
   background-color: #fff;
}
.slide_wrap::-webkit-scrollbar-thumb{
   background-color: #cbb79a;
}