@charset "UTF-8";
/* ==============================================
   外構工事プログレス京都 - company.css (会社概要ページ)
   PC first / breakpoints: 1200 / 960 / 568
============================================== */

/* ==============================================
   ご挨拶
============================================== */
.company_greeting { background: var(--color_bg); overflow: hidden; }
.company_greeting_grid {
	display: grid;
	grid-template-columns: minmax(0, 562px) 1fr;
	grid-template-areas: "text photo" "body photo";
	column-gap: 60px; row-gap: 0;
	max-width: 1120px; margin: 0 auto; align-items: start;
}
.company_greeting_text { grid-area: text; }
.company_greeting_photo { grid-area: photo; align-self: stretch; }
.company_greeting_body { grid-area: body; margin-top: -60px; }
.company_greeting_heading {
	font-family: var(--font_serif); font-weight: 600;
	font-size: 32px; letter-spacing: .1em; color: var(--color_green);
}
.company_greeting_heading::after {
	content: ""; display: block; width: 50px; height: 2px; margin-top: 10px; background: var(--color_green);
}
.company_greeting_lead { margin-top: 38px; font-size: 22px; letter-spacing: .1em; line-height: 1.75; color: var(--color_text); }
.company_greeting_photo img { width: 100%; height: auto; display: block; }
.company_greeting_body p { font-size: 16px; letter-spacing: .1em; line-height: 1.75; color: var(--color_text); }
.company_greeting_body p + p { margin-top: 4px; }

@media only screen and (max-width: 1200px) {
	.company_greeting { padding: 70px 0; }
	.company_greeting_grid { column-gap: 40px; }
	.company_greeting_lead { font-size: 19px; }
}
@media only screen and (max-width: 960px) {
	.company_greeting_grid {
		grid-template-columns: minmax(0, 370px) 1fr;
	}
	.company_greeting_photo { max-width: 400px; margin: 0 auto; }
	.company_greeting_body { margin-top: 0; }
}
@media only screen and (max-width: 568px) {
	.company_greeting { padding: 40px 0; }
	.company_greeting_grid {
		grid-template-columns: 1fr;
		grid-template-areas: "text" "photo" "body";
		row-gap: 24px;
	}
	.company_greeting_heading { font-size: 24px; }
	.company_greeting_heading::after { margin-top: 16px; }
	.company_greeting_lead { margin-top: 20px; font-size: 18px; }
	.company_greeting_photo { max-width: 100%; }
	.company_greeting_body p { font-size: 15px; }
}

/* ==============================================
   共通見出し（私たちが大切にしていること／会社情報）
============================================== */
.company_heading {
	position: relative; padding-bottom: 26px;
	font-family: var(--font_serif); font-weight: 600;
	font-size: 32px; letter-spacing: .1em; color: var(--color_text); text-align: center;
}
.company_heading::before {
	content: ""; position: absolute; left: 50%; bottom: 0; width: 8px; height: 8px;
	background: #DAD0BB; transform: translateX(-50%) rotate(45deg);
}
.company_heading::after {
	content: ""; position: absolute; left: 50%; bottom: 0; width: 170px; height: 8px; transform: translateX(-50%);
	background:
		linear-gradient(#DAD0BB, #DAD0BB) left center / 72px 1px no-repeat,
		linear-gradient(#DAD0BB, #DAD0BB) right center / 72px 1px no-repeat;
}
@media only screen and (max-width: 960px) {
	.company_heading { font-size: 24px; }
}
@media only screen and (max-width: 568px) {
	.company_heading { font-size: 20px; }
	.company_heading::after { width: 130px; background-size: 55px 1px, 55px 1px; }
}

/* ==============================================
   私たちが大切にしていること
============================================== */
.company_values { position: relative; padding: 80px 0; background: var(--color_bg_alt) url(../img/top/difference_bg_pc.png) top center / cover no-repeat; overflow: hidden; }
.company_values_lead { margin-top: 24px; font-size: 16px; letter-spacing: .1em; line-height: 1.75; text-align: center; color: var(--color_text); }

.company_value_list {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
	max-width: 1120px; margin: 60px auto 0;
}
.company_value_card {
	position: relative; background: #fff; border-radius: 10px; box-shadow: 0 0 4px rgba(34,34,34,.12);
	padding: 20px;
}
.company_value_number {
	position: absolute; top: 10px; right: 14px;
	font-family: var(--font_serif); font-weight: 600; font-size: 46px; letter-spacing: .1em;
	color: #e5f4e1; line-height: 1; transform: skewX(-10deg) scaleY(.98);
}
.company_value_head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; position: relative; z-index: 1; }
.company_value_icon {
	flex-shrink: 0; width: 70px; height: 70px; border-radius: 50%; background: var(--color_green_light);
	display: flex; align-items: center; justify-content: center;
}
.company_value_icon img { object-fit: contain; }
.company_value_card:nth-child(1) .company_value_icon img { width: 47px; height: 37px; }
.company_value_card:nth-child(2) .company_value_icon img { width: 34px; height: 34px; }
.company_value_card:nth-child(3) .company_value_icon img { width: 35px; height: 43px; }
.company_value_title { font-family: var(--font_serif); font-weight: 600; font-size: 20px; line-height: 1.5; color: var(--color_green); }
.company_value_photo { border-radius: 10px; overflow: hidden; aspect-ratio: 318 / 197; margin-bottom: 20px; }
.company_value_photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.company_value_text { font-size: 16px; letter-spacing: .1em; line-height: 1.75; color: var(--color_text); }

@media only screen and (max-width: 1200px) {
	.company_values { padding: 70px 0; }
}
@media only screen and (max-width: 960px) {
	.company_values { background-image: url(../img/top/difference_bg_sp.png); }
	.company_value_list { grid-template-columns: 1fr; max-width: 500px; margin-top: 44px; }
}
@media only screen and (max-width: 568px) {
	.company_values { padding: 40px 0; }
	.company_values_lead { font-size: 15px; }
	.company_value_list { gap: 20px; margin-top: 24px; }
	.company_value_card { padding: 16px; }
	.company_value_card { border-radius: 6px; }
	.company_value_photo { border-radius: 6px; }
	.company_value_number { font-size: 40px; right: 8px; }
	.company_value_icon { width: 60px; height: 60px; }
	.company_value_card:nth-child(1) .company_value_icon img { width: 45px; height: 28px; }
	.company_value_card:nth-child(2) .company_value_icon img { width: 30px; height: 34px; }
	.company_value_card:nth-child(3) .company_value_icon img { width: 45px; height: 38px; }
	.company_value_title { font-size: 17px; }
	.company_value_text { font-size: 14px; }
}

/* ==============================================
   会社情報
============================================== */
.company_info { padding: 80px 0; background:  }
.company_table {
	display: grid; grid-template-columns: 240px 1fr;
	max-width: 1120px; margin: 60px auto 0;
	background: #fff; border: 1px solid var(--color_border);
}
.company_table dt {
	display: flex; align-items: center; justify-content: center; text-align: center;
	background: var(--color_green); color: #fff;
	font-family: var(--font_serif); font-weight: 600; font-size: 17px; letter-spacing: .1em;
	padding: 15px 10px; border-bottom: 1px solid var(--color_border);
}
.company_table dd {
	font-size: 16px; letter-spacing: .1em; line-height: 1.6; color: var(--color_text);
	padding: 15px 32px; border-bottom: 1px solid var(--color_border);
}
.company_table dt:nth-last-of-type(1), .company_table dd:nth-last-of-type(1) { border-bottom: none; }
.company_table_link { color: var(--color_green); text-decoration: underline; }

@media only screen and (max-width: 1200px) {
	.company_info { padding: 70px 0; }
}
@media only screen and (max-width: 960px) {
	.company_table { margin-top: 44px; }
}
@media only screen and (max-width: 568px) {
	.company_info { padding: 40px 0; }
	.company_table { grid-template-columns: 1fr; margin-top: 24px; }
	.company_table dt { font-size: 15px; padding: 10px; }
	.company_table dd { font-size: 14px; padding: 12px 16px; line-height: 1.6; }
}