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

layer page 共通

----------------------------------------------------------*/
header{
	width: 100%;
	display: flex;
	justify-content: space-between;
	height: 100px;
	position: relative;
	background: #fff;
}
.layer{
	padding: 5em 0 8em;
}
.layer-inner{
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 2%;
}
.gmenu ul {
	display: flex;
	justify-content: space-between;
	z-index: 10;
	width: 600px;
	font-weight: 700;
	position: absolute;
	top: 50%;
	right: .67em;
	transform: translate( -2em,-50%);
}
.top_Area{
	margin-bottom: 120px;
}
h2{
	font-size: 7.7rem;
    font-family: 'brandon-grotesque', sans-serif;
    margin: 0;
	font-style: italic;
    letter-spacing: 0.01em;
	position: relative;
	font-weight: 400;
	line-height: 1;
}
h2::before{
	content: "";
	display: block;
	position: absolute;
	bottom: .8rem;
	left: 0;
	width: 100%;
	height: 2px;
	background: #333;
}
.jp-ttl{
	font-size: 2.4rem;
	font-weight: 700;
	margin-left: .5em;
}
/*--------------------------------------------------------

works

----------------------------------------------------------*/
.works .worksArea{
	display: flex;
	justify-content: space-between;
	margin-bottom: 66px;
	flex-flow: wrap;
}
.works .worksArea::after{
	  content:"";
	display: block;
	width: 30%;
}
.works .worksArea .cnt{
	width: 30%;
	height: auto;
	background: #fff;
	margin-bottom: 88px;
}

.works .worksArea .cnt .img{
	width: 100%;
	aspect-ratio: 5 / 3;
	overflow: hidden;
	margin-bottom: 10px;
		transition: all .5s ease;
	-webkit-transition: all .5s ease;
}
.works .img a img{
	width: 100%;
	height: auto;
	object-fit: cover;
		transition: all .5s ease;
	-webkit-transition: all .5s ease;
}
.works .img a img:hover{
	transform: scale(1.2);
	-webkit-transform: scale(1.2);
	transition: all .5s ease;
	-webkit-transition: all .5s ease;
	opacity: .7;
}
.works .txt{
	padding: 3%;
	background: #fcfcfc;
}
.works .tags{
	padding: 5px 10px;
	background: #333;
	font-weight: 700;
	color: #fff;
	margin-bottom: 10px;
	display: inline-block;
	font-size: 1.4rem;
}
.works .ttl{
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 10px;
	position: relative;
}
.works ul li{
	
	margin-bottom: 10px;
}
.works ul li span{
	color: #555555;
}
.pointArea{
	
}
.point-ttl{
	font-weight: 700;
	margin-bottom: 10px;
}
.point-ttl + p{
	line-height: 1.78;
}
.point-ttl::after{
	width: 100%;
	content: " ";
	height: 1px;
	display: block;
	background: #333;
}
/*--------------------------------------------------------

feature

----------------------------------------------------------*/
.feature .num{
	margin-bottom: 5px;
    font-size: 2rem;
    color: #777777;
    font-family: 'brandon-grotesque', sans-serif;
    font-style: italic;
}
.feature h3{
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 33px;
}
.feature .txt{
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.78;
}
.feature .featureArea{
	display: flex;
	justify-content: space-between;
	margin-bottom: 120px;
}

.feature .featureArea .word{
	width: 50%
}

.feature .featureArea .img{
	width: 45%
}

/*--------------------------------------------------------

service

----------------------------------------------------------*/ 
.service{
	width: 100%;
	margin: 0 auto;
}
.service .service_table:first-child{
	margin-bottom: 120px;
}
.service .num{
	margin-bottom: 5px;
	font-size: 2rem;
	color: #777777;
	 font-family: 'brandon-grotesque', sans-serif;
	font-style: italic;
}

.service h3{
	font-weight: 700;
	font-size: 4.8rem;
	margin-bottom: 33px;
	position: relative;
}
.service .serviceArea{
	display: flex;
	justify-content: space-between;
	margin-bottom: 180px;
}
.service .serviceArea .cnt:first-child{
	width: 55%;
}
.service .serviceArea .cnt:last-child{
	width: 40%;
}

.service .imgArea{
	position: relative;
}
.service .imgArea figure{
	aspect-ratio: 5 / 3;
}

.service .c-objectfit{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.service  .kind{
	margin-bottom: 33px;
}
.service h4{
	font-weight: 700;
	font-size: 3.6rem;
	margin-bottom: 10px;
	position: relative;
}
.table_design01 {
  border-collapse: collapse;
  width: 100%;
  max-width: 700px;
}
.table_design01 th, .table_design01 td {
  border: 2px solid #fff;
  background-color: #F0F0F0;
  padding: 1em;
}
.table_design01 th {
  background-color: #0F0F0F;
  color: #fff;
  font-weight: bold;
  text-align: center;
  width: 30%;
  min-width: 4em;
}

/*--------------------------------------------------------

facility

----------------------------------------------------------*/ 
.facility{
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
}
.facility h3{
	font-weight: 700;
	font-size: 3.6rem;
	margin-bottom: 44px;
	text-align: center;
}
.facility .facilityArea{
	margin-bottom: 120px;
}
.facility table{
	width: 100%;
	border-collapse: collapse;
}
.facility th {
  background: #eee;
  border: solid 1px #ccc;
  color: #333;
  padding: 10px;
}
.facility td {
  border: solid 1px #ccc;
  padding: 10px;
	background: #fff;
}
.facility_img{
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}
.facility_img div{
	width: 48%;
}
/*--------------------------------------------------------

company

----------------------------------------------------------*/ 
.company{
	margin: 0 auto;
	width: 100%;
	max-width: 750px;
}
.company table {
	font-size: 1.6rem;
	margin: 40px auto 120px;
	width: 100%;
}
.company th,td {
	padding: 20px;
	font-weight: normal;
	text-align: left;
	border-bottom: 1px solid #B7B7B7;
}
.company td span {
	font-size: 90%;
}
.company th {
	border-color: #333;
	font-weight: 700;
	width: 20%;
}
.company .map{
	width: 100%;
	height: 400px;
}
.messeageArea .txt{
	margin: 44px auto;
}
/*--------------------------------------------------------

privacy

----------------------------------------------------------*/ 

.privacy .introArea{
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	margin-bottom: 88px
}
.privacy_sec{
		width: 100%;
		max-width: 880px;
		margin: 0 auto;
	}
.privacyArea{
	margin-bottom: 20px;
}
.privacyArea h3{
	margin-bottom: 20px;
	font-weight: 700;
	font-size: 2rem;
}


@media all and (min-width: 768px) and (max-width: 1280px){
	
.top_Area{
	margin-bottom: 6vw;
}
.service .serviceArea{
	display: flex;
	justify-content: space-between;
	margin-bottom: 10vw;
}
.service h3{
	font-size: 3vw;
}
.service h4{
	font-weight: 700;
	font-size: 2.6vw;
	margin-bottom: 10px;
	position: relative;
}
.service .kind p{
		font-size: 1.6vw;
	}	
.table_design01 th, .table_design01 td {
  font-size: 1.4vw;
}
.table_design01 th {
   font-size: 1.4vw;
}
.feature h3{
	font-size: 2.6vw;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 33px;
}	
.feature .txt{
	font-size: 1.6vw;
	font-weight: 700;
	line-height: 1.78;
}

.works .ttl {
    font-size: 2vw;
}
	.works .tags {
		font-size: 1.2vw;
	}
}


@media all and (max-width: 820px) {
.layer-inner{
	width: 100%;
	margin: 0 auto;
	padding: 0 2%;
}
	
h2{
	font-size: 7.7rem;
    font-family: 'brandon-grotesque', sans-serif;
    margin: 0;
	font-style: italic;
    letter-spacing: 0.01em;
	position: relative;
	font-weight: 100;
	line-height: 1;
}
h2::before{
	content: "";
	display: block;
	position: absolute;
	bottom: .8rem;
	left: 0;
	width: 100%;
	height: 2px;
	background: #333;
}
.jp-ttl{
	font-size: 2.4rem;
	font-weight: 700;
	margin-left: .5em;
}
}
@media all and (max-width: 767px) {
/*--------------------------------------------------------

layer page 共通

----------------------------------------------------------*/
header{
	width: 100%;
	display: flex;
	justify-content: space-between;
	height: 0;
	position: relative;
	background: #fff;
}
.layer{
	padding: 2em 0 ;
}
.layer-inner{
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 5%;
}
.top_Area{
	margin-bottom: 40px;
}
h2{
	font-size: 4rem;
    font-family: 'brandon-grotesque', sans-serif;
    margin: 0;
	font-style: italic;
    letter-spacing: 0.01em;
	position: relative;
	font-weight: 100;
	line-height: 1;
}
h2::before{
	content: "";
	display: block;
	position: absolute;
	bottom: .4rem;
	left: 0;
	width: 100%;
	height: 2px;
	background: #333;
}
.jp-ttl{
	font-size: 1.8rem;
	font-weight: 700;
	margin-left: 0;
}
/*--------------------------------------------------------

works

----------------------------------------------------------*/
.works .worksArea{
	display: flex;
	justify-content: space-between;
	margin-bottom: 0;
	flex-direction: column;
}

.works .worksArea .cnt{
	width: 100%;
	height: auto;
	background: #fff;
	margin-bottom: 60px;
}

.works .worksArea .cnt .img{
	width: 100%;
	aspect-ratio: 5 / 3;
	overflow: hidden;
	margin-bottom: 10px;
		transition: all .5s ease;
	-webkit-transition: all .5s ease;
}
.works .img a img{
	width: 100%;
	height: auto;
	object-fit: cover;
		transition: all .5s ease;
	-webkit-transition: all .5s ease;
}
.works .img a img:hover{
	transform: scale(1.2);
	-webkit-transform: scale(1.2);
	transition: all .5s ease;
	-webkit-transition: all .5s ease;
	opacity: .7;
}
.works .tags{
		padding: 3px 5px;
	margin-bottom: 10px;
	display: inline-block;
	font-size: 1.2rem;
	font-weight: 700;
	color: #fff;
	background: #333;
}
.works .ttl{
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 10px;
}
.works ul li{
	
	margin-bottom: 10px;
}
.works ul li span{
	color: #555555;
}
.point-ttl{
	font-weight: 700;
	margin-bottom: 10px;
}
.point-ttl::after{
	width: 100%;
	content: " ";
	height: 1px;
	display: block;
	background: #333;
}
/*--------------------------------------------------------

feature

----------------------------------------------------------*/
.feature .num{
	margin-bottom: 5px;
    font-size: 2rem;
    color: #777777;
    font-family: 'brandon-grotesque', sans-serif;
    font-style: italic;
}
.feature h3{
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 15px;
}
.feature .txt{
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.78;
}
.feature .featureArea{
	display: flex;
	justify-content: space-between;
	flex-direction: column-reverse;
	margin-bottom: 60px;
}

.feature .featureArea .word{
	width: 100%
}

.feature .featureArea .img{
	width: 100%;
	margin-bottom: 20px;
}

/*--------------------------------------------------------

service

----------------------------------------------------------*/ 
.service{
	width: 100%;
	margin: 0 auto;
}
.service .service_table:first-child{
	margin-bottom: 60px;
}
.service .num{
	margin-bottom: 5px;
	font-size: 2rem;
	color: #777777;
	 font-family: 'brandon-grotesque', sans-serif;
	font-style: italic;
}

.service h3{
	font-weight: 700;
	font-size: 2.4rem;
	margin-bottom: 10px;
	position: relative;
}
.service .serviceArea{
	display: flex;
	justify-content: space-between;
	margin-bottom: 66px;
	flex-direction: column;
}
.service .serviceArea .cnt:first-child{
	width: 100%;
	margin-bottom: 10px;
}
.service .serviceArea .cnt:last-child{
	width: 100%;
}

.service .imgArea{
	position: relative;
}
.service .imgArea figure{
	aspect-ratio: 5 / 3;
}

.service .c-objectfit{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.service  .kind{
	margin-bottom: 33px;
}
.service  .kind p{
	text-align: justify;
	font-size: 1.4rem;
	line-height: 1.78;
}
.service h4{
	font-weight: 700;
	font-size: 2.4rem;
	margin-bottom: 5px;
	position: relative;
}
.table_design01 {
  border-collapse: collapse;
  width: 100%;
  max-width: 700px;
}
.table_design01 th, .table_design01 td {
  border: 2px solid #fff;
  background-color: #F0F0F0;
  padding: 1em;
font-size: 1.4rem;
}
.table_design01 th {
  background-color: #0F0F0F;
  color: #fff;
  font-weight: bold;
  text-align: center;
  width: 32%;
  min-width: 4em;
	font-size: 1.4rem;
}

/*--------------------------------------------------------

facility

----------------------------------------------------------*/ 
.facility{
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
}
.facility h3{
	font-weight: 700;
	font-size: 2.4rem;
	margin-bottom: 22px;
	text-align: center;
	margin-top: 33px;
}
.facility .facilityArea{
	margin-bottom: 60px;
}
.facility table{
	width: 100%;
	border-collapse: collapse;
}
.facility th {
  background: #eee;
  border: solid 1px #ccc;
  color: #333;
  padding: 10px;
font-size: 1.4rem;
}
.facility td {
  border: solid 1px #ccc;
  padding: 10px;
	background: #fff;
	font-size: 1.2rem;
}
	
.facility_img{
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	width: 100%;
}
.facility_img div{
	width: 48%;
}
/*--------------------------------------------------------

company

----------------------------------------------------------*/ 
.company{
	margin: 0 auto;
	width: 100%;
	max-width: 750px;
}
.company table {
	font-size: 1.6rem;
	margin: 40px auto 60px;
	width: 100%;
}
.company th,td {
	padding: 20px;
	font-weight: normal;
	text-align: left;
	border-bottom: 1px solid #B7B7B7;
}
.company td span {
	font-size: 90%;
}
.company th {
	border-color: #333;
	font-weight: 700;
	width: 20%;
}
.company .map{
	width: 100%;
	height: 200px;
}

/*--------------------------------------------------------

privacy

----------------------------------------------------------*/ 

.privacy .introArea{
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	margin-bottom: 88px
}
.privacy_sec{
		width: 100%;
		max-width: 880px;
		margin: 0 auto;
	}
.privacyArea{
	margin-bottom: 20px;
}
.privacyArea h3{
	margin-bottom: 20px;
	font-weight: 700;
	font-size: 2rem;
}
	
}