@charset "UTF-8";
html, body {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

body {
	font-family: 'Noto Sans JP', sans-serif, "メイリオ", "游ゴシック", "ヒラギノ角ゴ Pro W3", sans-serif;
	font-size: 14px;
	line-height: 1.8em;
	-webkit-text-size-adjust: 100%;
	font-weight: 500;
}

body.fixed{
	overflow: hidden;
}

.eng {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	opacity: 0.7;
}

th,td{
	box-sizing: border-box;
}

.alignleft {
	display: inline;
	float: left;
}

.alignright {
	display: inline;
	float: right;
}

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

img {
	max-width: 100%;
	height: auto;
}

.ib {
	display: inline-block;
}

.sp {
	display: none;
}

.t_c{
	text-align: center;
}

ul{
	margin: 0;
	padding: 0;
}


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

			レイアウト

-------------------------------------- */
.wrap {
	max-width: 1110px;
	margin: 0 auto;
	width: 94%;
}

.main_content {
	padding: 3em 0;
}

.main_content:last-child {
	border-bottom: none;
}

h1{
	margin: 0;
	max-width: 140px;
}

h2{
	font-size: 42px;
	line-height: 1em;
	font-weight: bold;
	color: #0249AD;
	text-align: center;
}

h2 small{
	display: block;
	font-size: 14px;
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}

h2 small::after,
h2 small::before{
	content: "●";
	padding: 1em;
	font-size: 6px;
	vertical-align: middle;
}


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

			ナビゲーション

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

.nav_content{
	z-index: 1010;
	background-color: #fff;
	width: 95%;
	height: 80px;
	position: absolute;
	top: 2%;
	right: 0;
	left: 0;
	margin: 0 auto;
	border-radius: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: 0.5s;  /* アニメーションの変化時間 */
}

/* スクロールして「scroll-navクラス」がついたときのヘッダーデザイン */
.nav_content.scroll-nav {
	width: 100%;
	position: fixed;
	top: 0;
	right: 0;
	border-radius: 0;
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
}

.sp-nav{
	display: none;
}
#hamburger{
	display: none;
}

.nav_logo{
	display: flex;
	align-items: center;
	padding: 0 1em;
}
.nav_link{
}

.nav_link_text{
	margin: 0;
	list-style: none;
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	align-items: center;
}

.nav_link_text li a{
	padding: 0 1em;
}

.nav_icon{
	border-left: 1px solid #C9CACA;
}

.kyoka{
	font-size: 11px;
	margin-left: 1em;
	line-height: 1.8em;
}
.nav_link_text{
	display: flex;
	flex-wrap: wrap;
}

.body_fixed {
    overflow: hidden;
}



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

			スライドショー

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

.main_slider {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: relative;
	max-width: 100%;
}

.main_slider div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 10;
	opacity: 0;
	animation-name: slide-fade;
	animation-duration: 30s; /* 30秒に変更 */
	animation-iteration-count: infinite;
	transform: scale(1.5); /* 最初に画像を大きくしておく */
}

@keyframes slide-fade {
	0%{
		opacity: 0;
	}
	20%{
		opacity: 1;
	}
	80%{
		opacity: 0;
		transform: scale(1); /* ここで画像サイズを1に戻す */
	}
	100%{
		opacity: 0;
		z-index: 0;
	}
}
.main_slider div:first-of-type{
	background-image: url('../img/main_01.jpg');
}

@supports (background-image: url('../img/main_01.webp')) {
  .main_slider div:first-of-type {
    background-image: url('../img/main_01.webp');
  }
}

.main_slider div:nth-of-type(2){
	background-image: url('../img/main_02.jpg');
	animation-delay: 10s; /* 秒数を変更 */
}

@supports (background-image: url('../img/main_02.webp')) {
  .main_slider div:nth-of-type(2) {
    background-image: url('../img/main_02.webp');
  }
}

.main_slider div:last-of-type{
	background-image: url('../img/main_03.jpg');
	animation-delay: 20s; /* 秒数を変更 */
}

@supports (background-image: url('../img/main_03.webp')) {
  .main_slider div:last-of-type {
    background-image: url('../img/main_03.webp');
  }
}


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

			コンセプト

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

.concept_content {
	display: flex;
	justify-content: space-between;
	margin-bottom: 4em;
}

.concept_content_title{
	font-size: 42px;
	line-height: 1.8em;
	font-weight: bold;
	color: #0249AD;	
	width: 40%;
}

.concept_content_text{
	width: 55%;
	margin-top: 5em;
}

.marker {
  background:linear-gradient(transparent 50%, rgba(243, 239, 161) 50%);
  display: inline;

  /* 背景の繰り返しを停止 */
  background-repeat: no-repeat;

  /* マーカーの横方向を0にして縮める */
  background-size: 0% 100%;

  /* マーカーが引かれる速度を指定 */
  transition:background-size 1.5s;
}

/* マーカーが引かれる際に付与するクラス */
.marker.on {
  /* 横方向を100%にして、マーカーを引く */
  background-size: 100% 100%;
}

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

			共　通

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

.content_title{
}

.content_title_text{
	text-align: center;
	margin-bottom: 4em;
}

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

			事業内容 SERVICES

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

.service{
	background-color: #F7F8F8;
	position: relative;
	width: 100%;
}

.service::before{
	content: "";
	position: absolute;
	top: -90px; /* 三角形の高さを考慮して位置を調整 */
	height: calc(tan(60deg) * 105px / 2);
	width: 100%;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	background-color: #F7F8F8;
}

.service_content{
}

.service .content_title_text{
	padding: 0 3em;
}
.service_content h3{
	font-size: 22px;
	text-align: center;
	margin: 1.5em 0;
	color: #0249AD;
}

.service_content_frex{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	column-gap: 8%;
}

.service_content_frex li{
	list-style: none;
	width: 24%;
	margin-bottom: 4em;
}

.service_content_frex img{
	width: 65%;
	margin: auto;
	display: block;
}

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

			施工事例 WORKS

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

.slick-dots {
	display: none;
}

.slick-slide {
	padding: 0 10px;
	border-radius: 10px;
}

.slick-slide img{
	border-radius: 10px;
}

.home_illust{
	margin: 5em 0 3em;
}

.slide_content{
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

.slide_content p{
	text-align: center;
}


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

			会社概要

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

.company{
	max-width: 860px;
	margin: auto;
}

.company_table{
	width: 100%;
	table-layout: fixed;
	margin-bottom: 5em;
}

.company_table th,
.company_table td{
	padding: 2.5em 1em;
	text-align: left;
	vertical-align: text-top;
}

.company_table th{
	border-bottom: 1px solid #0249AD;
	width: 100px;
}

.company_table td{
	border-bottom: 1px solid #DCDDDD;
}

.company_table_list{
	padding-left: 20px;
}

.company_table_list li{
	padding: 0.2em 0;
}

/* Google Mapを囲う要素 */
.map {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56%; /* 比率を4:3に固定 */
	margin-top: 2em;
}
 
/* Google Mapのiframe */
.map iframe {
	aspect-ratio: 16 / 9;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

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

			フッター

-------------------------------------- */
footer{
	background-color: #0249AD;
	color: #fff;
	text-align: center;
	padding: 1em 0;
}

.footer_link{
	display: flex;
	padding: 1em 0 3em;
	justify-content: center;
}

.footer_link li{
	list-style: none;
	border-left: 1px solid #fff;
}

.footer_link li a{
	display: block;
	padding: 0 2em;
}


.footer_link li:first-child{
	border-left: none;
}

.footer_address{
	margin-bottom: 2em;
}
.footer_address p {
	margin: 0;	
}
.copyright{
	font-size: 10px;
}




@media screen and (max-width: 1090px) {
	.pc-nav {
		display: none;
	}
	.sp-nav {
		z-index: 1;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		display: block;
		width: 100%;
		background: rgba(0, 0, 0, .8);
		opacity: 0;
		transform: translateY(-100%);
		transition: all .2s ease-in-out;
		overflow: auto;
	}

	#hamburger {
	   position: relative;
	   display: block;
	   width: 30px;
	   height: 25px;
	   margin: 0 1em 0;
		cursor: pointer;
	}

	#hamburger span {
	   position: absolute;
	   top: 50%;
	   left: 0;
	   display: block;
	   width: 100%;
	   height: 2px;
	   background-color: #000;
	   transform: translateY(-50%);
	}

	#hamburger::before {
	  content: '';
	  display: block;
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 2px;
	  background-color: #000;
	}
	#hamburger::after {
	  content: '';
	  display: block;
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  width: 70%;
	  height: 2px;
	  background-color: #000;
	}

	.sp-nav ul {
		padding: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		margin: auto;

	}
	.sp-nav li {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.sp-nav li span {
	}
	.sp-nav li a, .sp-nav li span {
	   display: block;
	   padding: 20px 0;
	}

	.sp_instagram_logo{
		width: 36px;
	}

	/*基準となるli要素*/
	.sp-nav .close {
	   position: relative;
	   padding-left: 20px;
		padding-right: 20px;
		cursor: pointer;
	}
	/*バツ印線1*/
	.sp-nav .close::before {
	   content: '';
	   position: absolute;
	   top: 25%;
	   left: 0;
	   display: block;
	   width: 100%;
	   height: 1px;
	   background: #fff;
	}
	/*バツ印線2*/
	.sp-nav .close::after {
	   content: '';
	   position: absolute;
	   bottom: 25%;
	   left: 0;
	   display: block;
	   width: 100%;
	   height: 1px;
	   background: #fff;
	}

	.sp-nav {
	   z-index: 1;
	   position: fixed;
	   top: 0;
	   left: 0;
	   width: 100%;
	   height: 100dvh;
	   display: block;
	   width: 100%;
	   background: rgba(0, 0, 0, .8);
	   transition: all .5s ease-in-out;
	   opacity: 0;
	   transform: translateY(-100%);
	   display: flex;
	   padding: 40px 0;
	   box-sizing: border-box;
	}

	.toggle {
	   transform: translateY( 0 );
	   opacity: 1;
	}

	.concept_content{
		display: block;
		text-align: center;
	}
	.concept_content_title,
	.concept_content_text{
		width: 100%;
	}

	.concept_content_title{
		transform: translateX(6px);
	}

	.home_illust{
		margin: 0;
	}
	
}

@media screen and (max-width: 768px) {
	h1{
		width: 100px;
	}
	.nav_content{
		height: 60px;
	}
	.kyoka{
		font-size: 9px;
	}
	.concept_content_title{
		font-size: 32px;
	}
	.main_content{
		padding: 2em 0;
	}
	.service_content_frex li{
		width: 38%;
	}
	.main_slider{
		height: 60vh;
	}

	.company_table th {
		width: 70px;
	}
	.service_content h3{
		margin: 1em 0;
	}
}

@media screen and (max-width: 480px) {
	h2{
		font-size: 32px;
	}
	.service_content_frex li{
		width: 84%;
	}
	.service_content_frex img{
		width: 50%;
	}
	.company_table th{
		border-bottom: none;
		width: 100%;
	}
	.company_table td{
		width: 100%;
		border-bottom: 1px solid #DCDDDD;
	}
	.company_table th,
	.company_table td{
		display: block;
	}
	.company_table th{
		padding-bottom: 0.5em;
	}
	.company_table td{
		padding-top: 0.5em;
	}
	.footer_link{
		display: block;
	}
	.footer_link li{
		padding: 7px;
		border-left: none;
	}
	.footer_logo{
		width: 50%;
		margin: auto;
	}
	.footer_address{
		font-size: 12px;
	}
}
@media screen and (max-height: 510px) {
	.sp-nav ul{
		justify-content: flex-start;
	}
	
	
}