@import url(style.css);

/* 共通 */

main{
	background-image: url('img/bg-img/page-bg.png');
	background-size: 100% auto;
	background-repeat: no-repeat;   /* 繰り返しなし */
	background-position: top center;    /* 中央に配置 */
}

.page-single-header{
	padding-top:20px;
}

.breadcrumbs-area p ,
.breadcrumbs-area a{
	font-size:0.8rem;
}

.page-single-title p{
	font-weight:700;
	font-size:1.4rem;
	letter-spacing:0.1rem;
	margin-bottom:0;
}

.page-single-title h2{
	font-weight:700;
	font-size:2.8rem;
	color:#0058A2;
}

.page-single-content h3{
	font-weight:700;
	margin-bottom:40px;
	font-size:2.4rem;
}

.page-single-content h4{
	font-weight:700;
	font-size:1.8rem;
	margin-bottom:60px;
}

.page-single-content h4 span{
	font-size:1rem;
	display:block;
	color:#00B0F0;
}

.page-single-content h5{
	font-weight:700;
	font-size:1.6rem;	
}

/* works */

.works-area .sec01{
	text-align:center;
}

.works-area .sec01 p{
	font-size:1.6rem;
	font-weight:600;
}

.works-area .sec02 img{
	width:30%;
}

.works-area .sec02 p{
	margin-bottom:30px;
}

.works-area .sec02 p span{
	display:inline-block;
	padding:5px 10px;
	background:#00B0F0;
	color:#FFF;
	margin-bottom:5px;
	border-radius:4px;
	margin:0 2px;
}

.works-area .sec03 h5.page-sec-title,.works-area .sec04 h5.page-sec-title{
	border:solid 1px #00B0F0;
	color:#00B0F0;
	padding:8px 12px;
	display:inline-block;
	margin:0 auto;
	margin-bottom:30px;
	border-radius:4px;
}

.dot-line {
  display: flex;
  align-items: center;
  margin-bottom: 1.5em; /* h2との間のスペース */
}

.dot-line::before {
  content: '';
	width: 8px;
	height: 8px;
  background-color: #00B0F0; /* ●の色 */
  border-radius: 50%;
  margin-right: 8px;
}

.dot-line::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: #ccc; /* 線の色 */
}

.works-area .sec04 img{
	width:80%;
}

/* contact */

.contact-area .sec01 p.top-tel,.contact-area .sec01 p.top-fax{
	font-size:1.6rem;
	font-weight:800;
	letter-spacing:0.1rem;
	margin:0;
	padding:0;
	color:#00569E;
}

.contact-time-day{
	margin-top:10px;
}

.contact-wapper{
	padding:15px 30px;
	border:solid 1px #00569E;
	border-radius:5px;
	display:inline-block;
}

span.tel-name{
	font-size:1.4rem;
}

.wpcf7-spinner{
	display:block;
}

.form-area{
	width: 75%;
}
.form-area p{
	color:#000;
	margin-top:30px;
}

.form-area input,.form-area textarea{
	width:100%;
	padding:10px;
	border-radius:5px;
	background:#ECECEC;
	border:none;
}

.form-area input[type="submit"]{
	background:#00749f;
	width:250px;
	color:#FFF;
}

.form-area p span.req{
background: #00B0F0;
  font-size: 0.8rem;
  padding: 5px 10px;
  border-radius: 3px;
  color: #FFF;
  margin-left: 10px;
}

/* company */

.com-area .sec01 ul{
	display:flex;
flex-wrap: wrap;              /* ← 折り返しを許可 */
justify-content: space-evenly; /* 子要素の間隔を均等にする */
gap: 5px;       
}

.com-area .sec01 ul li{
 width: 218px;
	height: 218px;
  border-radius: 50%;        /* 正円 */
  background: #00B0F0;       /* 任意の色 */
  color: white;
  display: flex;
  align-items: center;       /* 垂直方向中央 */
  justify-content: center;   /* 水平方向中央 */
  font-size: 1.2em;
font-weight:700;
}

.com-area .sec01 ul li span{
	display:block;
	font-size:1.2rem;
	border:solid 1px #FFF;
	margin-right: 8px;
    padding: 0 4px;
}

.com-area table{
	width:100%;
	margin:0 auto;
	font-size:1rem;
}

.com-area table th{
	width:20%;
	padding:20px 40px;
	border-bottom:solid 1px #EDEDED;
}

.com-area table td{
	width:80%;
	padding:20px 30px;
	border-bottom:solid 1px #EDEDED;
}

.com-area table td .map-left{
	padding:15px;
	margin:0;
	border-left:solid 4px #0058A2;
}

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

@media only screen and (max-width: 991px) {
	
}

@media only screen and (max-width: 767px) {
	.com-area table th,.com-area table td{
		display:block;
		width:100%;
	}
	.com-area table th{
		padding-bottom:0;
		border-bottom:none;
	}
	.works-area .sec04 img{
		width:100%;
	}
	.form-area{
		width:100%;
	}
}

@media only screen and (max-width: 525px) {
	.page-single-title h2{
		font-size:2rem;
	}
	.page-single-content h3{
		font-size:1.8rem;
	}
	.works-area .sec01 p,.page-single-content h4,.page-single-content h5{
		font-size:1.4rem;
	}
}