@import url("style.css");

/* ####################################
 * GROW UP ADD OTHER CSS
 * #################################### */

/* 共通 */

#page-hero {
width: 100%;
background: url("../img/page-fv.jpg") top center no-repeat;
background-size: cover;
position: relative;
margin-top: 93px;
color:#FFF;
}

#page-hero h1{
	font-size:1.4rem;
	font-weight:600;
}

#page-hero p{
	font-size:4rem;
	font-weight:500;
	margin-bottom:0;
}

.page-bg {
width: 100%;
background: url("../img/page-bg.jpg") top center repeat;
background-size: contain;
position: relative;
color:#FFF;
}

#page{
	padding:0;
}

#page article{
	padding:80px 0;
}

#page article h2{
	font-size:1.4rem;
	font-weight:700;
}

#page article  h2::after {
  content: "";
  display: block;
  width: 70px;            /* 線の長さ */
  height: 2px;             /* 線の太さ */
  background-color: #BC121A;   /* 線の色 */
  margin: 15px auto 0;      /* 上に余白、中央寄せ */
}


#page article p.page-sub-title{
	font-size:4rem;
	font-weight:500;
	margin-bottom:0;
}

/* about */

.page-about .sec01 p{
	color:#BC121A;
}

.page-about .sec01 h2{
	color:#000;
}

.page-about-sec02-bg{
width: 100%;
background: url("../img/page-about-sec02-bg.jpg") top center no-repeat;
background-size: cover;
position: relative;
color:#FFF;
}

.page-about .sec02 .ja-font{
	font-size:2rem;
	margin-bottom:60px;
}

.page-about .ceo-name{
	text-align:right;
	margin-top:40px;
}

.page-about .ceo-name img{
	width:42%;
}

.greeting-philosophy{
	background-color: rgba(255, 255, 255, 0.8);
	padding:40px;
	color:#000;
	margin-top:80px;
}

.greeting-philosophy h3{
	background:#BC121A;
	color:#FFF;
	display:inline-block;
	font-size:1.4rem;
	padding:5px 10px;
}

.greeting-philosophy h3 + p{
	font-size:1.6rem;
	font-weight:700;
}

.greeting-philosophy ul li{
	border-left:solid 20px #BC121A;
	padding-left:15px;
}

.greeting-philosophy ul li h4{
	font-size:1.4rem;
	font-weight:700;	
}

.greeting-philosophy ul{
	margin:0;
	padding:0;
	margin-top:10px;
	list-style:none;
}

.com-overview{
	background:#FFF;
	padding:40px;
	color:#000;
}

.com-overview table{
	width:100%;
}

.com-overview table th{
	width:20%;
	padding:18px 25px;
	border-right:solid 2px #000;
	text-align:center;
}

.com-overview table td{
	width:80%;
	padding:18px 25px;
}

.page-about .sec03 h2{
	color:#000;
	text-align:center;
	margin-bottom:50px;
}

/* contact */

.page-contact article{
	color:#000;
}

.page-contact article h2{
	color:#000;
	text-align:center;
}

.page-contact article p.page-sub-title{
	color:#BC121A;
	text-align:center;
}

.contact-form {
	background:#FFF;
	padding:40px;
}

p.page-contact-tel{
	font-weight:800;
	font-size:3rem;
}

p.page-contact-tel a{
	color:#000;
}

.page-contact-line{
	border-bottom:solid 1px #666;
	font-weight:800;
	text-align:center;
	padding-bottom:20px;
}

div.page-contact-line{
	padding-bottom:0px;
	margin-bottom:60px;
}

div.page-contact-line p{
	padding:0 5px;
}

.contact-form{
	font-weight:500;
}

.contact-form table{
	width:100%;
}

.contact-form table th{
	width:25%;
	padding:20px;
}

.contact-form table td{
	width:75%;
	padding:10px 20px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea,
.wpcf7 input[type="tel"]{
	width:100%;
}

.wpcf7 input[type="submit"]{
	all: unset;
	width:250px;
	background:#050050;
	color:#FFF;
	padding:10px;
	border:none;
}

.personal h4{
	margin-bottom:20px;
}

.personal ul p{
	margin-bottom:0;
}

span.req{
	color:#FFF;
	background:#BC121A;
	padding:3px 5px;
	border-radius:5px;
	font-size:0.8rem;
	margin-left:5px;
}

/* works */

.page-works article{
	color:#000;
}

.page-works article h2{
	color:#000;
	text-align:center;
}

.page-works article p.page-sub-title{
	color:#BC121A;
	text-align:center;
}

.page-works h2 + p{
	text-align:center;
	font-weight:600;
	margin-top:40px;
}

.page-works .sec02 h3{
	background:#000;
}

.works-contents{
	background:#FFF;
	padding:40px;
}

.works-contents p.att{
	font-weight:600;
	font-size:1.2rem;
}

.works-contents h3{
	background:#BC121A;
	padding:8px;
	text-align:center;
	color:#FFF;
	margin-bottom:20px;
}

.page-works .sec03 ul{
	padding:0;
	margin:0;
	list-style:none;
}

.page-works .sec03 ul li{
	margin-bottom:20px;
}

.nav-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
	width:30%;
	margin:auto;
}

.results-prev,
.results-next {
  font-size: 1.8rem;
  cursor: pointer;
  user-select: none;
  padding: 5px 10px;
}

.results-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #ccc;
  opacity: 1;
  margin: 0 5px;
  border-radius: 50%;
}

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

.results-pagination .swiper-pagination-bullet-active {
  background: #333;
}

.popup {
display: none;
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 40px;
z-index: 1000;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
width:60%;
max-height: 70vh;
overflow-y: auto; /* 長文でもスクロール可能に */
}
.popup-overlay {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
z-index: 999;
}

.popup h2{
	border-bottom:solid 1px #666;
	padding-bottom:10px;
	margin-bottom:15px;
}

.popup h2 span{
	padding-left:8px;
	font-size:1.2rem;
}

.popup p{
	border-left:solid 10px #BC121A;
	padding-left:15px;
}


.popup table th{
	font-weight:normal;
	border-left:solid 10px #BC121A;
	padding:0 15px;
}

a.popup-link{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px;
  border: 2px solid #333;
  text-decoration: none;
  font-weight: 600;
	color:#000;
  transition: background-color 0.2s;
}

#closePopup{
	position:absolute;
	top:5px;
	right:15px;
	border:none;
}

#closePopup i{
	font-size:2rem;
	font-weight:600;
}

.popup-link:hover {
  background-color: #e0e0e0;
}

.popup-link .label {
  flex-grow: 1;
}

.popup-link .plus {
  font-size: 18px;
  margin-left: 10px;
}

/* ####################################
 * メディアクエリ CSS
 * #################################### */

/* xl : 〜1399.98px */
@media (max-width: 1399.98px) {
}

/* lg : 〜1199.98px */
@media (max-width: 1199.98px) {
	.page-contact table th,.page-contact table td{
		display:block;
		width:100%;
	}
	.page-contact table th{
		padding-top:0;
		padding-bottom:0;
	}
	.page-contact table th p{
		margin-bottom:0;
	}
	.page-works h2 + p{
		padding:0 20px;
	}
}

/* md : 〜991.98px */
@media (max-width: 991.98px) {
	#page-hero{
		margin-top:68px;
	}
}

/* sm : 〜767.98px */
@media (max-width: 767.98px) {
	.page-contact-line.d-flex{
		display:block!important;
	}
	.page-contact-line p{
		margin-bottom:0;
	}
	.nav-wrapper{
		width:80%;
	}
	.popup{
		width:95%;
		padding:20px;
	}
	.popup table th,.popup table td{
		display:block;
		width:100%;
		border-left: solid 10px #BC121A;
		padding: 0 15px;
	}
	.popup table td{
		padding-bottom:8px;
	}
	.page-works article.sec02{
		padding-top:0!important;
	}
	.page-about-sec02-bg{
		background: #89272D url("../img/sp-page-about-sec02-bg.jpg");
		background-size: contain;
		background-repeat:no-repeat;
	}
	.about .mt-100{
		margin-top:0!important;
	}
}

/* xs : 〜575.98px */
@media (max-width: 575.98px) {
	#page article p.page-sub-title,#page-hero p,p.section-title-eng{
		font-size:3.4rem;
	}
	.page-about .sec02 .ja-font{
		font-size:5.5vw;
	}
	.com-overview table th,.com-overview table td{
		display:block;
		width:100%;
		text-align:left;
	}
	.com-overview table th{
		padding-top:0;
		padding-bottom:0;
		border:none;
	}
	.com-overview table td{
		padding-top:0;
	}
	.com-list.d-flex{
		display:block!important;
	}
	.com-list .w-50{
		width:100%!important;
	}
	.sp-15{
		margin-top:-15px;
	}
	.works-contents{
		padding:20px;
	}
	.works-contents h3{
		font-size:5vw;
	}
	.greeting-philosophy h3 + p{
		font-size:1.4rem;
	}
	.greeting-philosophy ul li h4{
		font-size:1.2rem;
	}
	.greeting-philosophy{
		width:90%;
		margin-top:50px;
		padding:30px;
	}
}