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



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

.conA{
	padding-top: 84px;
}

.conA .container{
	display: flex;
	justify-content: space-around;
	margin-bottom: 20px;
	background: #C4E9CF;
	height: 150px;
	background-image: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), url("../img/price/main.jpg");
	background-position: center 50%;
	position: relative;
	background-size: cover;
}

.conA .text{
	text-align: center;
			flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
}

.conA h1{
	font-size: 24px;
	letter-spacing: 0.1em;
	font-family: "Noto Serif JP", serif;
	font-weight:600;
	text-shadow: 0px 0px 2px #fff;
	
}

@media print, screen and (min-width: 768px){
	
.conA{
	padding-top: 150px;
}	
	
.conA .container{
	
	display: flex;
	justify-content: space-around;
	height: 300px;
	margin-bottom: 50px;
	
}
	
	.conA .text{

	}
	
.conA h1{
	font-size: 34px;
}	
	
	
}


h2.flow{
	margin-bottom: 1em;
	color: #3675bb;
}


.post.qa{
	margin-bottom: 20px;
}

.post .container{
	width: 90%;
	max-width: 800px;
	margin: 0 auto 20px;
}

.post.qa .container{
	background: #fff;
	padding: 1em;
	box-sizing: border-box;
	box-shadow: 0px 0px 3px #898989;
	border-radius: 10px;
}


.post h2{
	/*font-family: "Noto Serif JP", serif;*/
	margin-bottom: 1.5em;
	/*text-align: center;*/
	/*border-bottom: 2px solid #3675bb;*/
	padding-bottom: 0.2em;
}

.post .container .mihon p{
	margin-bottom: 0.2em;
}


.post.jirei h2{
	margin-bottom: 0.2em;
}


@media print, screen and (min-width: 768px){
	
	
.post .container{
	margin-bottom: 20px;
	max-width: 900px;
}	
	
	
	
	.post .container p{
		font-size: 18px;
		line-height: 1.6em;
		margin-bottom: 1em;
	}
	
.post .container .mihon p{
	font-size: 18px;
}
	
	
	
.post h2{
	font-size: 20px;
}
	
	.post.qa h2{
		font-size: 20px;
	}
	
	
.post.qa .container{
	padding: 30px 40px;
}	
	
	

}




/*２カラム*/


.conB{
	/*padding: 30px;*/
	margin-bottom: 50px;
}


.conB .container{
	max-width: 1000px;
	margin: 0 auto;
	padding: 1em;
	box-sizing: border-box;
	background: #fff;
	/*box-shadow: 0px 0px 3px #898989;*/
	box-shadow: none;
	border-radius: 5px;
	padding: 2em;
}


.conB.shousai .container{
	width: 90%;
}

.conB h2{
	/*font-family: "Noto Serif JP", serif;*/
	margin-bottom: 1em;
}

.conB h3{
	text-align: center;
	margin-bottom: 0.5em;
	font-weight: 500;
	font-size: 20px;
}

.conB .text{
	/*margin-bottom: 20px;*/
}

.conB.service .text{
	margin-bottom: 40px;
}

.conB img{
	display: block;
	width: 100%;
	/*margin: 0 auto 10px;*/
	margin-bottom: 10px;
}


.conB p{
	margin-bottom: 1em;
}

.sm-img{
	height: 200px;
	object-fit: cover;
	overflow: hidden;
}

@media print, screen and (min-width: 768px){
	
.conB .container{
	display: flex;
	gap:10px;
	margin-bottom: 10px;
	padding: 50px 60px;
}	
	
	
	.conB .text{
		/*flex: 1;*/
		margin-bottom: 0;
	}
	
	.conB h2{
		font-size: 32px;
	}
	
	.conB h3{
		font-size: 20px;
	}
	
	.conB p{
		font-size: 18px;
	}
	

}

.conB.naiyou{
	padding: 0;
}



.conB.naiyou .container{
	display: flex;
	justify-content: center;
	max-width: 1000px;
	flex-wrap: wrap;
	gap:2%;
	background: none;
	box-shadow: none;
	padding: 10px;
}

.conB.naiyou .text{
	width: 30%;
	margin-bottom: 10px;
	text-align: center;
}


.conB.naiyou .text h3{
	color: #3675bb;
	font-weight: bold;
}

@media print, screen and (min-width: 768px){
	
.conB.naiyou .container{
	gap:20px;
	margin-bottom: 0;
}	
	
.conB.naiyou .text{
	flex: 1;
	margin-bottom: 0;
	font-size: 18px;
}
	
	
.conB.shousai .container{
	justify-content: space-between;
}	
	
	.conB.shousai .text{
		width: 46%;
		
		
	}
	
}

.price01{
	margin-bottom: 0.5em;
	text-align: right;
}

@media print, screen and (min-width: 768px){
	
	.price01{
		font-size: 24px;
}
	
}




.kakomi2{
	width: 90%;
	
	margin: 0 auto;
	padding: 1em;
	box-sizing: border-box;
	border: 1px dashed #3675bb;
}


@media print, screen and (min-width: 768px){
	
.kakomi2{
	width: 100%;
	padding: 2em;
}
	
	.post .kakomi2 p{
		font-size: 15px;
		margin-bottom: 0;
	}	
	
	
}


/*含まれるもの*/


.include{
	padding:20px;
	width: 90%;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 auto 20px;
	gap:10px;
}

.include .text{
	width: 30%;
	text-align: center;
}

@media print, screen and (min-width: 768px){
	
.include{
	gap:10px;
	margin-bottom: 20px;
}	
	
.include .text{
	flex:1;
	
}
	
	.include .text img{
		width: 90%;
	}
	
	
	
}




/*管理代行例*/

.kakomi{
	width: 90%;
	max-width: 960px;
	margin: 0 auto 50px;
	box-sizing: border-box;
	padding:20px;
	background:#e4eff9;
}


h2.ex{
	width: 90%;
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	background: #3675bb;
	font-size: 15px;
	padding: 0.5em;
	box-sizing: border-box;
}

.kakomi table{
	margin-bottom: 30px;
}


.kakomi table th{
	vertical-align: top;
	padding: 0.5em;
	text-align: left;
	white-space: nowrap;
	
}

.kakomi table td{
	vertical-align: top;
	padding: 0.5em;
}

.kakomi h3{
	text-align: center;
	margin-bottom: 1em;
}
p.hiyou{
	text-align: center;
	color:#3675bb;
	font-weight: bold;
	margin-bottom: 0.2em;
}

@media print, screen and (min-width: 768px){
	
.kakomi{
	padding:30px 60px;
	margin-bottom: 80px;
}	
	

h2.ex{
	font-size: 18px;
}
	
p.hiyou{
	font-size: 22px;
}	
	
}



/*沿革用　年表*/

.dlBlock {
  position: relative;
}
 
.dlBlock:before {
  position: absolute;
  display: block;
  content: "";
  background: #ccc;
  width: 1px;
  height: 100%;
  z-index: -1;
	left: 59px;
	top:10px;
}
 
.dlBlock .dlInner {
  display: flex;
  align-items: flex-start;/*なくても問題ない？？*/
	margin-bottom: 1em;
}
 
.dlBlock dt {
  position: relative;
  color: #1b2680;
 /* line-height: 1;*/
  box-sizing: border-box;
  word-break: break-all;
	padding-right: 1em;
}
 
.dlBlock dt:before {
  position: absolute;
  display: block;
  content: "";
  top: .7em;
  right: 0;
  width: 7px;
  height: 7px;
  background: #1b2680;
  border-radius: 50%;
  transform: translateY(-50%);
}
 
.dlBlock dd {
  line-height: 1.5;
  flex: 1;
	padding-left: 1em;
	box-sizing: border-box;
}
 
@media only screen and (min-width: 769px), print {
  .dlBlock:before {
    top: 12px;
    left: 96px;
  }
  .dlBlock .dlInner {
    padding-bottom: 10px;
  }
  .dlBlock dt {
    width: 100px;
    padding-right: 15px;
    font-size: 18px;
  }
  .dlBlock dd {
    margin-left: 20px;
    font-size: 16px;
  }
}



/*工事前工事後*/

.mihon{
	text-align: center;
	margin-bottom: 20px;
}


.mihon img{
	width: 80%;
}

.mihon p{
	margin-bottom: 0.2em;
}

.allow{
	text-align: center;
	margin: 20px auto;
}

@media print, screen and (min-width: 768px){
	
.mihon p{
	font-size: 20px;
}
	
	
}










/* ベーススタイル：スマホ用（縦並び） */


.banner{
	width: 90%;
	max-width: 1000px;
	margin: 0 auto 50px;
}


.banner-repair {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  max-width: 600px;
  margin: 0 auto;
  text-decoration: none;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  background-color: #f8f9fa;
  transition: transform 0.3s ease;
}

.banner-repair:hover {
  transform: translateY(-2px);
}

/* 画像エリア */
.banner-repair__image {
  width: 100%;
  height: 200px; /* スマホでは高さを確保して見やすく */
}

.banner-repair__image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像を歪ませず中央で切り抜く */
}

/* テキストエリア */




.banner-repair__content {
  padding: 20px;
  background-color: #3675bb; /* 基調色の青 */
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.banner-repair__sub {
  font-size: 13px;
  margin-bottom: 8px;
  opacity: 0.9;
}

.banner-repair__title {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 15px;
  font-weight: bold;
}

.banner-repair__btn {
  align-self: flex-start;
  background-color: #ffffff;
  color: #004488;
  padding: 8px 24px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}


.banner .text{
	margin-bottom: 20px;
}


/* ブレイクポイント：768px以上（PC用：左右分割・600x300相当） */
@media (min-width: 768px) {
	
	
.banner{
	max-width: 1000px;
	margin: 0 auto 50px;
	display: flex;
	justify-content:space-around;
}	
	
	.banner .text{
		width: 48%;
		margin-bottom: 0;
	}	
	
	
  .banner-repair {
    flex-direction: row; /* 横並びに変更 */
    height: 200px; /* 全体の高さを300pxに固定 */
	  
  }

  .banner-repair__image {
    width: 50%; /* 左側半分 */
    height: 100%;
  }

  .banner-repair__content {
    width: 50%; /* 右側半分 */
    padding: 30px 20px;
  }

  .banner-repair__title {
    font-size: 18px;
  }
}


.post h3{
	text-align: center;
	margin-bottom: 1em;
}

@media print, screen and (min-width: 768px){
	
.post h3{
	font-size: 20px;
}	
	
	
}

.fukidashi{
  position: relative;
  width: fit-content;
  padding: 8px 16px;
  border: 2px solid #3675bb;
  border-radius: 4px;
	margin-bottom: 1em;
	background: #3675bb;
	color: #fff;
	font-weight: bold;
}
.fukidashi::before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  background-color: #3675bb; /* 背景色と同じ色を指定 */
  rotate: 135deg;
  translate: -50%;
}
.fukidashi::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  border: 4px solid;
  border-color: #3675bb #3675bb transparent transparent;
  rotate: 135deg;
  translate: -50%;
}

@media print, screen and (min-width: 768px){
	
	.fukidashi{
		font-size: 16px;
		padding: 8px 16px;
	}	
	
	
}


.post p.price{
	font-weight: bold;
	margin-bottom: 0.5em;
	color:#3675bb;
}


@media print, screen and (min-width: 768px){
	
.post p.price{
	font-weight: bold;
	font-size: 20px;
}	
	
	
}


img.m400{
	max-width: 400px;
}

img.m500{
	max-width: 500px;
}


.conB{
	margin-bottom: 0;
}

.conB .container2{
	
}

.conB .container2 h3{
	margin-bottom: 0.5em;
	font-size: 18px;
	font-weight: bold;
}

.conB .container2 .text{
	margin-bottom: 20px;
	background: #DBEBF8;
	padding: 1em;
	box-sizing: border-box;
}

.post .conB .container2 p{
	font-size: 15px;
}

@media print, screen and (min-width: 768px){
	
.conB .container2{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
	
	.conB .container2 .text{
		width: 45%;
	}	
	
	
	
}



/*.qa01{
	display: flex;
	align-items: center;
	margin-bottom: 1em;
	font-size: 16px !important;
	font-weight: bold;
}*/

.qa02{
	display: flex;
	/*align-items: center;*/
	font-size: 15px;
}

/*.qa-q{
	width: 20%;
}*/

/*.circle01 {
	display: block;
  background: #3675bb;
  border-radius: 50%;
	border:1px solid #3675bb;
  padding: 0.5em;
	width: 14px;
	height: 14px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 14px;
	margin-right: 0.5em;
}*/






.qa01 {
    display: flex;
    /* align-items: center; だとQとAの一行目がズレる場合があるため flex-start 推奨 */
    align-items: flex-start; 
    margin-bottom: 1em;
    font-weight: bold;
    /* Snow Monkeyの計算をリセット */
    --_font-size-level: 0 !important; 
    font-size: 16px !important;
}


.qa02 {
    display: flex;
    /* align-items: center; だとQとAの一行目がズレる場合があるため flex-start 推奨 */
    align-items: flex-start; 
    margin-bottom: 1em;
    /*font-weight: bold;*/
    /* Snow Monkeyの計算をリセット */
    --_font-size-level: 0 !important; 
    font-size: 16px !important;
}




.circle01 {
    /* 重要な変更点：flexを使って中央配置にする */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3675bb;
    border-radius: 50%;
    border: 1px solid #3675bb;
    color: #fff;
    margin-right: 0.8em;
    /* サイズ固定：paddingではなくwidth/heightで円の大きさを決める */
    width: 24px;   /* Qの文字に対して14pxは小さすぎるため調整 */
    height: 24px;
    flex-shrink: 0; /* 親がflexの時に潰れないようにする */
    
    /* Snow Monkeyの変数をこの要素内で上書き */
    --_font-size-level: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
}


.circle02 {
    /* 重要な変更点：flexを使って中央配置にする */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #3675bb;
    color: #3675bb;
    margin-right: 0.8em;
    /* サイズ固定：paddingではなくwidth/heightで円の大きさを決める */
    width: 24px;   /* Qの文字に対して14pxは小さすぎるため調整 */
    height: 24px;
    flex-shrink: 0; /* 親がflexの時に潰れないようにする */
    
    /* Snow Monkeyの変数をこの要素内で上書き */
    --_font-size-level: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
	font-weight: bold;
}



@media print, screen and (min-width: 768px){
	
.circle01 {
	width: 36px;
	height: 36px;
  font-size: 20px !important;
  line-height: 30px;
}
	
.circle02 {
	width: 34px;
	height: 34px;
  font-size: 20px !important;
  line-height: 30px;
}	
	
	
.qa01{
	font-size: 20px;
}
	
.qa02{
	font-size: 16px;
}	
}


a.btn{
	max-width: 600px;
}