@charset "UTF-8";


/*=======================================================*/
/*      		セクション毎のCSS   			  		  */
/*======================================================*/


/*======= 共通 ======*/

/* 親要素からはみ出して画面いっぱいに */
.full {
	margin: 0 calc(50% - 50vw);
	width: 100vw;
}



/*======= TOP ======*/
/*ご挨拶*/
.greeting {
	padding: clamp(40px, 6vw, 90px) 0 var(--v-space);
	background-color: var(--base-color);
	position: relative; /* sectionの位置を相対的にする*/
	z-index: 1; /* 背景画像より上に表示 */
}

.greeting-spot {
	color: var(--accent-color1);
	font-size: 1.2em;
}


/*チェックボックス*/
    .custom-list {
      list-style: none; /* デフォルトのリストマーカーを非表示 */
      padding: 0;
    }

    .custom-list li {
      position: relative;
      padding-left: 30px; /* チェックボックスの幅分だけ余白を確保 */
      line-height: 1.5; /* 行の高さを調整 */
      font-size: 16px; /* 文字サイズ */
      margin-bottom: 10px; /* リストアイテム間の間隔 */
    }

    /* チェックボックス（ボックス） */
    .custom-list li::after {
      content: "";
      position: absolute;
      top: 0.2em;
      left: 0;
      width: 15px; /* ボックスのサイズ */
      height: 15px;
      border: 1px solid #9c9c9c; /* ボックスの枠線 */
      border-radius: 2px; /* 角を少し丸く */
    }

    /* チェックマーク */
    .custom-list li::before {
      content: "";
      position: absolute;
      width: 9px; /* 参考より少し長くして、ボックスからはみ出させる */
      height: 18px; /* 参考より少し長くして、はみ出させる */
      top: -0.1em; /* ボックスの上部からはみ出させる */
      left: 4px; /* ボックス内で調整 */
      transform: rotate(50deg); /* 参考と同じ角度 */
      border-right: 3px solid var(--accent-color1); /* チェックマークの右線 */
      border-bottom: 3px solid var(--accent-color1); /* チェックマークの下線 */
      z-index: 1; /* ボックスの上に表示 */
    }

    /* テキストの下線 */
    .custom-list li {
      position: relative;
    }

    .custom-list li > span::after {
      content: "";
      position: absolute;
      left: 25px; /* チェックボックスとの間隔 */
      bottom: 0;
      width: calc(100% - 35px); /* テキストの下線の長さ */
      border-bottom: 1px dashed #999; /* 下線 */
    }



/*======= コンテンツ ======*/


/*======= 工事内容 ======*/
/*section1*/
.secS {
	padding: var(--v-space) 0;
    background-color: #FFF;
}

/*======= ABOUT ======*/
/*section1*/
.sec1 {
	padding: var(--v-space) 0;
    background-color: #FFF;
    background-color:#edfbff;
}


/*======= FAQ ======*/
.faq_sec1 {
	padding: var(--v-space) 0;
	background-color: #FFF;
	
	position: relative; /* sectionの位置を相対的にする*/ 
	z-index: 1; /* 背景画像より上に表示 */ 
}
div.faq2 p.b {
	font-weight: bold;
	color: #444;
}
div.faq2 p.b::first-letter {
	color: var(--main-color);
	font-size: 130%;
}
div.faq2 p {
	margin-top: 5px;
	line-height: 1.4;
	text-align: left;
	text-indent: -1.4em;
	padding-left: 1.4em;
	display: block;
}
div.faq2 p::first-letter {
	color: var(--accent-color1);
	font-size: 130%;
	font-weight: bold;
}
hr.faqHr{
	height: 0px;
	border: 1px dashed var(--accent-color2);
	margin: 20px auto;
}


/*======= 会社案内ページ ======*/
/*会社案内*/
.info_sec1{
	padding: var(--v-space) 0;
	background-color: #FFF;
	background-image: url(../img/bg_04.jpg);
	background-size:cover;
	background-position: bottom;

	position: relative; /* sectionの位置を相対的にする*/ 
	z-index: 1; /* 背景画像より上に表示 */ 
}

@media screen and (max-width: 568px) { 
	.info_sec1{
		padding: var(--v-space) 0;
		background-color: #FFF;
		background-image: url(../img/bg_04.jpg);
		background-size:cover;
		background-position:right 65% center ;

		position: relative; /* sectionの位置を相対的にする*/ 
		z-index: 1; /* 背景画像より上に表示 */ 
	}

}

/* 概要・アクセス部分のテーブル */
.info1 {
	font-weight: bold;
	border-bottom: 1px dashed var(--accent-color2);
	padding: 5px;
	width: 5.25em;
}
.info2 {
	border-bottom: 1px dashed var(--accent-color2);
	padding: 5px;
	width: 400px;
}
@media screen and (max-width: 568px) {
	.info1 {
		display: block;
		padding: 8px 2px 2px 2px;
		width: 100%;
		border-bottom: 1px solid rgba(255,255,255,0);
	}
	.info2 {
		display: block;
		padding: 2px;
		width: 99%;
	}
}

.info-sec1-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px 5px;
}

@media (min-width: 568px) {
	.info-sec1-container {
		grid-template-columns: repeat(6, 1fr);
	}
}

/*会社概要*/
.bg_b{
	background: rgba(0, 0, 0, 0.8);
	padding:40px;
	border-radius: 0px;
}
@media screen and (max-width: 568px) {
	.bg_b {
		padding: 20px;
	}
}

.access_sec1{
	padding: var(--v-space) 0;
	background-color: #FFF;
	
	position: relative; /* sectionの位置を相対的にする*/ 
	z-index: 1; /* 背景画像より上に表示 */ 
}






/*======= 調整 ======*/
.l-c {
    margin-right: auto;
    margin-left: auto;
}


/*その他*/
strong{
	font-weight:normal;
}

/*------------------------*/
/*-------施工の流れ-------*/
/*------------------------*/

.secF {
	padding: var(--v-space) 0;
	background-color: #FFF;
	background-image: url(../img/bg_03.jpg);
	background-size:cover;
	background-position: bottom;
	position: relative; /* sectionの位置を相対的にする*/ 
	z-index: 1; /* 背景画像より上に表示 */ 

    background-color: rgba(255, 255, 255, 0.5) !important;
    background-blend-mode: overlay;
}

/*--------------------*/
/*全体の画像大に適用*/
/*--------------------*/
.imgtext-container.w-container.reverse figure.img img {
	box-shadow: 7px 7px 0px rgba(0, 0, 0, 0.07);
}

.imgtext-container.w-container figure.img img {
	box-shadow: 7px 7px 0px rgba(0, 0, 0, 0.07);
}

/*======= 弊社の強み ======*/
.secP {
	padding: var(--v-space) 0;
    background-color: #FFF;
    background-color:#edfbff;
}


/*カード*/
.secP-card__item{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap:10px;
}
@media only screen and (max-width: 968px) {
	.secP-card__item{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}
@media only screen and (max-width: 568px) {
	.secP-card__item{
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}
}
.secP-card__item div{
	/*子要素のそれぞれのdivの高さを揃える記述*/
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	/*ここまで*/

	padding: 10px;
	background-color: white;
	box-sizing: border-box;
	border: solid 1px #ccc;
}
.secP-card__item H4{
	padding: 5px 0;
	font-size: clamp(18px,1.5vw,20px);
	line-height: 1.3;
	text-align: center;
	border-bottom: 2px dotted var(--accent-color1);
	font-weight:700;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif,"Noto Serif JP";
}
.secP-card__item p{
	display: inline-block;
    font-size: 15px;
    line-height: 1.5;
}