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

*,
::before,
::after{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

ul{
    list-style: none;}
ol{
    margin-left: 1.25rem;
    line-height: 2rem;
}
a{
	color: inherit;
	text-decoration: none;
}

body{
	background-color: #ECECEC;
	font-size: 15px;
	color: #3b4043;
}

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


/*文字装飾-------------------------------------------------*/

h1{
	font-size: 2rem;
    line-height: 3rem;
	margin-bottom: 64px;
}
h2{
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}
h3{
    font-size: 1.25rem;
	margin-bottom: 1.5rem;
}
p{
    line-height: 2rem;
}

.bottom{
    margin-bottom: 1rem;
}
.bottom02{
    margin-bottom: 64px;
}

.small{
    font-size: 1rem;
    font-weight: 400;
}

.caption-under{
    font-weight: 600;
    border-bottom: 2px solid #5F5F5F;
    margin-bottom: 2rem;
}

.caption{
    padding: .5rem 0;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}

.caption-span{
    padding: .5rem 0;
    margin-bottom: 48px;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
}

.caption-left{
    padding: .5rem 0;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
}

.center-text{
	text-align: center;
}

/*ボタン-----------------------------------------------*/

.button-on{
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 250px;
    max-width: 300px;
	margin: 32px auto 0 auto;
	padding: .9rem 2rem;
	border: none;
	border-radius: 25px;
	background-color: #5f5f5f;
	color: #fff;
	font-weight: 500;
	font-size: .75rem;
}
.button-on:hover{
    background-color: #3B4043;
    transition: 0.5s;
}

.button-off{
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 250px;
	margin: 32px auto 0 auto;
	padding: .9rem 2rem;
	border: 2px solid #CDD6DD;
	color: #CDD6DD;
	border-radius: 25px;
	font-weight: 500;
	font-size: .75rem;
}

.button-group{
    margin: 65px auto;
    display: flex;
    flex-wrap: wrap;
    column-gap: 15px;
    row-gap: 15px;
    justify-content: center;
}

.button-row{
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 250px;
	padding: .9rem 2rem;
	border: none;
	border-radius: 25px;
	background-color: #5f5f5f;
	color: #fff;
	font-weight: 500;
	font-size: .75rem;
}
.button-row:hover{
    background-color: #3B4043;
    transition: 0.5s;
}

/*コンテンツ-------------------------------------------*/

.bg{
	background-color: #D9D9D9;
}

.container01{
	max-width: 1000px;
	width: 90%;
	padding: 64px 0;
	margin: 0 auto;
}

.container02{
	max-width: 1000px;
	width: 90%;
	padding: 64px 0 200px 0;
	margin: 0 auto;
}

.container02 h2{
    margin-top: 4rem;
}

/*画像＋テキスト--------------------------------------*/

.flex{
    margin-bottom: 35px;
    display: flex;
    flex-direction: row;
}
.flex .left-image{
    width: 15%;
    margin-right: 15px
}
.flex .left{
    margin: 0 5% 0 0;
    flex-grow: 1;
}
.flex .right{
    width: 85%;
}
.flex .title{
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 1.25rem;
}


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

.flexbox-group{
    display: flex;
    margin: 45px auto;
}
.flexbox01{
    width: 40%;
    margin: 0 48px 0 0;
}
.flexbox02{
    width: 60%;
    margin: 0;
}
.flexbox-group img{
    width: 100%;
    margin: 0 auto 32px auto;
}

.flexbox-group .title{
    font-weight: 600;
    font-size: 1.25rem;
}
.flexbox-group .text{
    line-height: 1.5rem;
    margin: 1rem 0 2rem 0;
}

@media screen and (max-width: 750px) {
     .flexbox-group {
         display: block;
     }
     .flexbox01 {
         width: 100%;
         margin: 0 auto;
     }
     .flexbox02 {
         width: 100%;
         margin: 0 auto;
     }
 }


/*カード--------------------------------------------*/

.card-group{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	column-gap: 45px;
	row-gap: 45px;
}
.card-group img{
    margin-bottom: 1.25rem;
}
.card-group .title{
    font-size: 1.25rem;
    font-weight: 600;
}
.card{
	display:flex;
	flex-direction: column;
	width:250px;
}
.card02{
	display:flex;
	flex-direction: column;
	width:300px;
}
.card03{
    display: flex;
    flex-direction: column;
    width: 350px;
    flex-grow: 1;
}
.card03 p{
    font-weight: 600;
}

.card-box{
	background-color: #fff;
	border-radius: 20px;
	display:flex;
	flex-direction: column;
	width:250px;
	padding: 35px 25px;
    flex-grow: 1;
}
.card-img{
    flex-grow: 1;
    object-fit: contain;
    object-position: bottom;
}
.card-item{
	flex:1 1 auto;
	display: flex;
	flex-direction: column;
}
.card-text{
	flex-grow: 1;
}

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

.card-group-w{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 15px;
    row-gap: 15px;
}

.card-group-w .title{
    margin: 0 0 1.25rem 0;
    padding: 0;
    font-weight: 600;
    font-size: 1.25rem;
}
.card-group-w .text{
    line-height: 1.75rem;
    margin: 0;
}
.card-group-w .item{
    margin: 0 0 1.25rem 0;
    padding: 0;
    font-weight: 600;
    font-size: 1.5rem;
    text-align: center;
    color: #98A6B5;
    letter-spacing: 0.2rem;
}
.card-group-w .value{
    font-weight: 700;
    font-size: 2.5rem;
    text-align: center;
    margin: 0 0 0.5rem 0;
}
.card-group-w .unit{
    margin: 0;
    font-size: 0.75rem;
    text-align: center;
}
.card-group-w .below{
    text-align: center;
    margin: 1rem 0 0 0;
}
.card-group-w .border{
    border-bottom: 1px solid #CDD6DD;
    margin: 15px 0;
}

/*テーブル---------------------------------------*/

.table-group{
    margin: 15px 0 48px 0;
}
.table-box{
    display: flex;
    margin: 0 auto;
    column-gap: 1.5rem;
    padding: 1rem 0;
    border-top: 1px solid #CDD6DD;
    align-items: center;
    line-height: 1.5rem;
    background-color: #F0F3F5;
}
.table-item{
    font-weight: 500;
    letter-spacing: 0.25rem;
    width: 30%;
    padding: 0 1rem;
}
.table-list{
    flex-grow: 1;
    width: 70%;
}
.table-list ul{
    list-style: disc;
    line-height: 2rem;
    margin-left: 1.25rem;
}

/*---*/

.table-box2{
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    padding: 0.1rem 0;
}
.table-item02{
    font-weight: 500;
    width: 30%;
}
.lineup-table-item{
    width: 30%;
}

/*お問合せ---------------------------------------*/

.inquiry-box{
	display: flex;
	flex-direction: column;
	text-align: center;
	background-color: #F0F3F5;
	border: 1px solid #707070;
	padding: 10%;
	margin: 65px 0;
}
.inquiry-text{
	font-size: 1.25rem;
	font-weight: 600;
    line-height: 3rem;
    letter-spacing: 0.1rem;
    margin: 0;
}

/*お問合せフォーム----------------------------------*/


.contact-table{
    width: 100%;
    margin-bottom: 20px;
}

.contact-item,
.contact-body{
    padding: 0.5rem 0;
}
.contact-item{
    text-align: left;
    width: 30%;
}
.contact-body{
    width: 70%;
}

.form-text{
    width: 100%;
    height: 45px;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.form-textarea{
    white-space: pre-wrap;
    width: 100%;
    height: 200px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.contact-radio{
    margin: 1rem;
}
.contact-radio-txt{
    margin-left: 5px;
}
.contact-body label{
    display: block;
}

/*リンクボックス-----------------------------------*/

.link-box-group{
    display: flex;
    column-gap: 15px;
    row-gap:15px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.link-box{
    display: flex;
    border: 1px solid #98A6B5;
    flex-grow: 1;
    min-width: 260px;
    padding: 5%;
}

.link-box:hover{
    background-color: #CDD6DD;
    transition: 0.5s;
}
.link-box .text{
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0;
    padding: 0;
}
.link-box-img{
    margin: 0 0 0 auto;
}

.link-box02{
    display: flex;
    border: 1px solid #98A6B5;
    flex-grow: 1;
    min-width: 320px;
    padding: 5%;
}
.link-box02:hover{
    background-color: #CDD6DD;
    transition: 0.5s;
}
.link-box02 .text{
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0;
    padding: 0;
}

/*ニュース-----------------------------------------*/

.news-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 45px;
    row-gap: 65px;
}
.news{
    flex-grow: 1;
}
.news-group{
    border-top: 3px solid #98A6B5;
    margin-bottom: 65px;
}
.news-item{
    display: flex;
    column-gap: 25px;
    padding: 5% 0;
    border-bottom: 2px solid #CDD6DD;
    align-items: center;
}

.news-item:hover{
    background-color: #CDD6DD;
    transition: 0.5s;
}

.news-date{
    font-weight: 700;
}

.news-container{
	max-width: 1000px;
	width: 90%;
	padding: 64px 0;
	margin: 0 auto;
    min-height: 100vh;
}
.facebook{
    width: 375px;
}

/*メインビジュアル----------------------------------*/

.mv-bg{
    background-color: #3B4043;
    display: flex;
    justify-content: center;
}

.mv{
    max-width: 900px;
    max-height: 350px;
    margin: 0 auto 0 0;
}
.mv-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.product-mv{
    position: relative;
	max-width: 1000px;
    max-height: 350px;
	width: 90%;
}
.product-mv-text{
    max-width: 400px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    text-align: center;
    text-shadow: 0 0 5px #000;
    letter-spacing: 0.2rem;
}

.product-mv-text .title{
    font-size: 1.25rem;
}
.product-mv-text .caption{
    font-size: 1.5rem;
    margin: 1rem 0;
}
.product-mv-text .text{
    font-weight: 400;
}

.product-mv-img{
    max-width: 550px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    float: right;
}


/*TOPスライドショー----------------------------------*/


 /*=== 画像の表示エリア ================================= */
.slide {
  position   : relative;
  overflow   : hidden;
    max-width: 900px;
    width: 100%;
    height: 350px;
  margin     : auto;      /* サンプルは中央寄せ */
}
 
 /*=== 画像の設定 ======================================= */
.slide img {
  display    : block;
  position   : absolute;  /* 画像のサイズを表示エリアに合せる */
  width      : 100%;
  height     : 100%;
    object-fit: cover;
    object-position: top;
  opacity    : 0;
  animation  : slideAnime 16s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 8s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { opacity: 0 }
   5% { opacity: 1 }
  45% { opacity: 1 }
  50% { opacity: 0 }
 100% { opacity: 0 }
}

/*GoogleMap--------------------------------------*/

.location{
    padding-top: 45px;
    display: flex;
    justify-content: center;
}
iframe{
    width: 100%;
}
.location-map{
    width: 100%;
}

/*導入事例-----------------------------------------*/

/*帯-------------------------------------*/
.works-bg{
    background-color: #fff;
}
.works-label{
	max-width: 1000px;
	width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.works-category{
    text-align: center;
    font-weight: 400;
    flex-grow: 1;
}
.works-category:hover{
    background-color: #CDD6DD;
    transition: 0.5s;
}
.works-label .on{
    font-weight: 700;
    padding: 1rem;
    border-bottom: 4px solid #3B4043;
}
.works-label .off{
    padding: 1rem;
    color: #98A6B5;
}
/*工事概要-------------------------------------*/
.works-group{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 25px;
    margin: 45px 0;
    row-gap: 30px;
}
.works-box{
    flex-grow: 1;
    width: 351px;
    min-width: 350px;
}

.works-box-card{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-bottom: 2rem;
}

.works-box .title{
    font-size: 1.5rem;
    font-weight: 600;
}

/*吹き出し----------------------------------------*/

.balloon {
    display: flex;
    justify-content: center;
    position: relative;
    margin-bottom: 15px;
    padding: .8em 1.2em;
    border-radius: 5px;
    background-color: #98A6B5;
    color: #ffffff;
    font-weight: 500;
    letter-spacing: 0.1rem;
}

.balloon::before {
    position: absolute;
    bottom: -15px;
    width: 30px;
    height: 15px;
    background-color: #98A6B5;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

/*サイトマップ-------------------------------------*/

.sitemap-group{
    display: flex;
	justify-content: center;
	flex-wrap: wrap;
	column-gap: 45px;
	row-gap: 45px;
    padding: 5% 0;
}

.sitemap-group li{
    line-height: 3rem;
}

.sitemap-card{
    display:flex;
	flex-direction: column;
	width:200px;
    flex-grow: 1;
}

.sitemap-card a:hover{
    color: #98A6B5;
    transition: all .3s;
}

.sitemap-card li{
}


/*ナビメニュー-------------------------------------*/

.header-inner{
	max-width: 1200px;
	height: 65px;
	margin-left: auto;
	margin-right: auto;
	padding: 40px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.toggle-menu-button{
	display: none;
}

.header-logo{
	display: block;
	max-width: 250px;
}

.site-menu ul{
	display: flex;
}
.site-menu ul li{
	font-size: 15px;
	margin: 0px 15px;
}


/* フッター--------------------------------------- */

.footer{
	color: #fff;
	background-color: #3B4043;
    margin-top: auto;
}
.footer-inner{
    max-width: 1000px;
    width: 90%;
	padding: 30px 0px;
    margin: 0 auto;
	display: flex;
	flex-direction: column;
}
.footer-menu ul{
	display: flex;
}
.footer-menu ul li{
	font-size: 12px;
	margin: 0px 15px;
}

.footer a:hover{
    color: #98A6B5;
    transition: 0.5s;
}

@media (max-width: 750px){
	.footer-menu ul{
		display: block;
	}
	.footer-menu ul li{
		margin: 15px 0px;
	}
}