@charset "UTF-8";

section.content_bg {
	max-width: inherit;
	padding: 0;
}
section.content_bg .content {
	position: relative;
	max-width: 1920px;
    padding: 0 max(24px, 4vw);
}
@media (max-width: 750px) {
	section.content_bg {
		margin-bottom: max(40px, 10.666vw);
	}
}

/* パンくず、下層タイトル　KVありのため調整 */
.breadcrumb,
.subpage_heading {
	position: relative;
	z-index: 10;
}
/* KV */
.about_kv {
	margin: -260px auto 0;
	position: relative;
	z-index: 1;
	/* max-width: 1746px;
	background-image: url(../img/about/company_kv_bg_pc.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center; */
	overflow: hidden;
}
.about_kv::before {
	content: "";
	width: 100vw;
	height: 100%;
	background-image: url(../img/about/company_kv_bg_pc.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
	opacity: 0;
	animation: 1s kv_in forwards;
}
@keyframes kv_in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.about_kv_text {
	width: 100%;
	padding: 240px 0 min(200px, 20vw);
	position: relative;
	z-index: 3;
}
.about_kv_text picture {
	max-width: 720px;
	min-width: 450px;
    width: 48vw;
    display: block;
    margin: auto;
}
.about_kv_text p {
	text-align: center;
	line-height: 2.5;
	font-size: clamp(16px, 1.7vw, 20px);
	font-feature-settings: normal;
	margin-top: 2em;
}
.about_kv_text p span {
	font-size: clamp(16px, 1.7vw, 20px);
	color: var(--color-brandGr);
	background:linear-gradient(transparent 60%, rgba(97, 136, 92, 0.3) 0);
}


.about_kv::after {
	content: "";
    width: 100%;
    height: 20%;
    background: #f5f1eb;
    background: linear-gradient(0deg, rgb(245 241 235) 0%, rgba(250, 248, 244, 0) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
}


@media (max-width: 750px) {
	.about_kv {
    	margin: min(-33vw,-70px) auto 0;
	}
	.about_kv::before {
		background-image: url(../img/about/company_kv_bg_sp.png);
	}
	.about_kv::after {
		background: #faf8f4;
		background: linear-gradient(0deg, rgb(250 248 244) 0%, rgba(250, 248, 244, 0) 100%);
	}
	.about_kv_text {
		padding: min(35vw,260px) 4vw min(90px, 30vw);
	}
	.about_kv_text picture {
		max-width: 550px;
		min-width: inherit;
		width: 100%;
	}
	.about_kv_text p,
	.about_kv_text p span {
    	font-size: clamp(16px, 3vw, 36px);
	}
}


/* メッセージ */
.about_message {
	padding: max(80px, 5vw) 0;
	background-color: #F5F1EB;
}
.about_message .low_clm2_cont {
	display: grid;
	grid-template-columns: 5fr 2fr;
	gap: 5rem;
}
.about_message .low_clm2_cont p {
	margin-bottom: 2.5em;
}
.about_message .low_clm2_cont picture {
	max-width: 300px;
}
.president_sign {
	display: flex;
	align-items: center;
}
.president_sign p {
	margin: 0 1em 0 0!important;
}
.president_sign picture {
	max-width: 165px!important;
}
@media (max-width: 750px) {
	.about_message {
		padding: max(40px, 10.666vw) 0;
		background-color: inherit;
	}
	.about_message .low_clm2_cont {
		flex-wrap: wrap;
		grid-template-columns: inherit;
    	gap: 1.5rem;
	}
	.about_message .low_clm2_cont > picture {
		order: 1;
		width: 50%;
        margin: auto;
	}
	.about_message .low_clm2_cont > div {
		order: 2;
	}
}


/* 経営理念 */
.about_philosophy .low_clm2_ttl h2 span,
.about_philosophy .low_clm2_ttl h2 {
	color: #fff;
}
.about_philosophy {
	background-color: var(--color-brandGr);
	padding: max(80px, 5vw) 0;
	margin-bottom: 0!important;
}
.about_philosophy .flexBox {
    gap: 1px;
    background-color: #80A27C;
    padding: 1px;
}
.about_philosophy .flexBox li {
	width: 33.333%;
	padding: 2em 1.5em;
	background-color: #61885c;
}
.about_philosophy .flexBox * {
	color: #fff!important;
}
.about_philosophy .flexBox span.en {
	display: block;
	text-align: center;
	font-size: var(--font-size12px);
	margin-bottom: 3.4em;
}
.about_philosophy .flexBox span.en strong {
	display: block;
	font-size: var(--font-size24px);
	line-height: 1.2;
}
.about_philosophy .flexBox h3 {
	text-align: center;
	font-size: var(--font-size28px);
	line-height: 1.5;
}
.about_philosophy .flexBox p {
	margin-top: 1em;
}
@media (max-width: 750px) {
	.about_philosophy {
		padding: max(40px, 10.666vw) 0;
	}
	.about_philosophy .flexBox {
		flex-wrap: wrap;
	}
	.about_philosophy .flexBox li {
		width: 100%;
	}
	.about_philosophy .flexBox p {
		max-width: max-content;
		margin-left: auto;
		margin-right: auto;
	}
}


/* 企業情報 */
.about_overview .low_clm2_ttl h2 span,
.about_overview .low_clm2_ttl h2 {
	color: #fff;
}
.about_overview {
	background-color: var(--color-brandGr_dark);
	padding: max(80px, 5vw) 0;
	margin-bottom: 0!important;
}
.about_overview .info_clm dl,
.about_overview .info_clm dl:last-child  {
	border-color: #61885C;
}
.about_overview .info_clm dl::before,
.about_overview .info_clm dl:last-child::after {
    background-color: #80A27C;
}
.about_overview .info_clm dt,
.about_overview .info_clm dd {
	color: #fff;
}
.about_overview .info_clm ul {
	padding-left: 1.2em;
}
.about_overview .info_clm li {
	color: #fff;
	list-style: disc;
	margin-bottom: .5em;
}
.about_overview .info_clm li:last-child {
	margin-bottom: 0;
}
.about_overview .info_clm li .flexBox {
	color: #fff;
	align-items: center;
}
.about_overview .info_clm li a {
	display: inline-block;
    vertical-align: middle;
    margin-left: 1em;
}
.about_overview .btn_bgWh_op01 {
	margin-top: 2.5em;
}
.about_overview .btn_bgWh_op01 a {
	margin-left: auto;
	border: 1px solid rgba(255, 255, 255, 0);
}
.about_overview .btn_bgWh_op01 span::after {
	content: "";
	width: 1em;
	height: 1em;
	display: inline-block;
	margin-left: 1em;
	background-image: url(../img/icon/icon_blank_wh.svg)!important;
	background-size: 90%;
	background-position: center;
	background-repeat: no-repeat;
}
@media (min-width: 1024px) {
    .about_overview .btn_bgWh_op01 a:hover {
        border: 1px solid #fff;
    }
	.about_overview .btn_bgWh_op01 a:hover span::after {
		background-image: url(../img/icon/icon_blank_wh.svg)!important;
	}
}
@media (max-width: 750px) {
	.about_overview {
		padding: max(40px, 10.666vw) 0;
	}
	.about_overview .btn_bgWh_op01 a {
		margin: auto;
	}
	.about_overview .info_clm dt {
		padding-top: 1.7em;
	}
	.about_overview .info_clm dd {
		padding-bottom: 1.7em;
	}
}


/* 沿革 */
.about_history {
	padding: max(80px, 5vw) 0;
	background-color: #F5F1EB;
}
#history dl {
	display: flex;
}
#history dl:nth-child(odd) {
	background-color: #FAF8F4;
}
#history dt {
	letter-spacing: 0!important;
	width: 7.5em;
	padding-right: 3.5em;
	font-family: "Marcellus", serif;
    font-weight: 400;
    font-style: normal;
	font-size: var(--font-size20px);
    letter-spacing: 0.08em;
	color: var(--color-brandGr);
	padding: 1.2em 2.7em 1.2em 1.2em;
}
#history dd {
    position: relative;
    padding: 1.5em 1.5em 1.5em 3.5em;
    width: calc(100% - 7.5em);
    display: flex;
    flex-wrap: wrap;
	align-items: center;
}
#history dd::before {
	content: "";
	min-width: .75em;
	width: .75em;
	height: .75em;
	background-color: var(--color-brandGr);
	display: block;
	position: absolute;
	top: 2em;
	left: 0;
	border-radius: 50%;
	transform: translateX(-50%);
}
#history dd::after {
	content: "";
	width: 1px;
	height: 100%;
	background-color: var(--color-brandGr);
	position: absolute;
	top: 0;
	left: 0;
}
#history dl:first-child dd::after {
	top: 2em;
}
#history dl:last-child dd::after {
	top: 0;
	height: 2em;
}
#history dd span {
	width: 4em;
	display: inline-block;
}
#history dd picture {
	width: 100%;
	margin-top: 1em;
	display: block;
}
#history dd p {
	width: 100%;
}
#history dd p + p {
	margin-top: 1em;
}
@media (max-width: 750px) {
	.about_history {
		padding: max(40px, 10.666vw) 0;
	}
	#history dt {
		width: 5.5em;
		padding: 1rem 1.5rem 1rem 1rem;
	}
	#history dd {
		padding: 1rem 1rem 1rem 1.5rem;
		width: calc(100% - 5.5em);
		display: block;
	}
	#history dd span {
		display: block;
	}
}


/* 営業所 / ショールーム */
.off_show_map {
	position: relative;
	max-width: 1170px;
	margin: auto;
}
.off_show_map img {
	margin: auto;
}
.off_show_map .modal_btn {
	position: absolute;
}
.off_show_map .modal_btn a {
	display: block;
	background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 2px;
	padding: min(1.3vw, 0.9em) min(1.9vw, 1.2em);
}
.off_show_map .modal_btn span {
	color: var(--color-brandGr);
	line-height: 1;
}
.off_show_map .modal_btn .offices_name {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: min(1.5vw, 16px);
}
.off_show_map .modal_btn .offices_name::after {
	content: "";
	width: 1em;
	height: 1em;
	background-image: url(../img/icon/icon_modal_gr.svg);
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	margin-left: .5em;
}
.off_show_map .modal_btn a.active {
	border-color: var(--color-brandGr);
	border-width: 3px;
}
.off_show_map .modal_btn .showroom {
	font-size: min(1.2vw, 12px);
    background-color: var(--color-brandGr_thin);
    border-radius: 99px;
    padding: 0.3em 1.2em 0.5em;
    margin-top: 0.8em;
    display: block;
}

.modal_btn.sapporo {
    top: 14.5%;
    left: 41%;
}
.modal_btn.tsukuba {
    top: 60%;
    left: 60.2%;
}
.modal_btn.tokyo {
    top: 76.6%;
    left: 49.8%;
}
.modal_btn.osaka {
    top: 46%;
    left: 32.5%;
}
.modal_btn.honsya {
	top: 58.4%;
	left: 12.8%;
}
.modal_btn.seibu {
    top: 84%;
    left: 5.8%;
}
.modal_btn.kurume {
    top: 78.2%;
    left: 26%;
}
.modal_btn.okinawa {
    top: 77%;
    left: 75.5%;
}

.sp_modal {
	display: none;
}

@media (min-width: 1024px) {
	.off_show_map .modal_btn a:hover {
		border-color: var(--color-brandGr);
	}
}

@media (min-width: 751px) {
	.off_show_map .modal_btn {
		min-width: max-content;
	}
	.modal_btn.honsya .offices_name {
		font-size: min(2vw, 20px);
	}
	.modal_btn.honsya .showroom {
		font-size: min(1.5vw, 14px);
	}
}

@media (max-width: 1600px) {
	.modal_btn.sapporo {
		top: 14.5%;
		left: inherit;
        right: 48%;
	}
	.modal_btn.tsukuba {
		top: 60%;
		left: 60.2%;
	}
	.modal_btn.tokyo {
		top: 76.6%;
		left: 49.8%;
	}
	.modal_btn.osaka {
		top: 46%;
		left: 31.8%;
	}
	.modal_btn.honsya {
		top: 58%;
        left: inherit;
        right: 72%;
	}
	.modal_btn.seibu {
		top: 84%;
		left: 5.2%;
	}
	.modal_btn.kurume {
		top: 78.2%;
		left: 25.4%;
	}
	.modal_btn.okinawa {
		top: inherit;
		bottom: 12%;
		left: 75%;
	}
}

@media (max-width: 750px) {
	.off_show_map .pc_modal .modal_btn {
		position: relative;
		top: inherit;
		left: inherit;
		bottom: inherit;
		right: inherit;
	}
	.off_show_map .pc_modal .modal_btn a {
		background-color: transparent;
		border: 0;
		border-bottom: 1px solid #ddd;
		padding: 1.4em  1.4em 1.4em 3em;
	}
	.off_show_map .pc_modal .modal_btn a::after {
		content: "";
		min-width: 1.2em;
		width: 1.2em;
		height: 1.2em;
		background-image: url(../img/icon/icon_modal_gr.svg);
		background-size: 100%;
		background-position: center;
		background-repeat: no-repeat;
		margin-left: .5em;
		position: absolute;
		top: 50%;
        right: 0;
        transform: translateY(-50%);
	}

	.off_show_map .modal_btn .offices_name {
		font-size: var(--font-size18px);
		color: #333;
	}
	.off_show_map .modal_btn .showroom {
		font-size: 12px
	}
	.pc_modal .modal_btn::before {
		content: "1";
		font-family: "Marcellus", serif;
		font-weight: 400;
		font-style: normal;
		font-size: var(--font-size16px);
		color: var(--color-brandGr);
		line-height: 1;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);

		min-width: 1.5em;
		width: 1.5em;
        height: 1.5em;
        border: 1px solid;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
	}
	.pc_modal .modal_btn.active::before {
		background-color: var(--color-brandGr);
		color: #fff;
	}
	.pc_modal .modal_btn.tsukuba::before {
		content: "2";
	}
	.pc_modal .modal_btn.tokyo::before {
		content: "3";
	}
	.pc_modal .modal_btn.osaka::before {
		content: "4";
	}
	.pc_modal .modal_btn.honsya::before {
		content: "5";
	}
	.pc_modal .modal_btn.seibu::before {
		content: "6";
	}
	.pc_modal .modal_btn.kurume::before {
		content: "7";
	}
	.pc_modal .modal_btn.okinawa::before {
		content: "8";
	}

	.off_show_map .pc_modal .modal_btn .offices_name {
    	justify-content: left;
	}
	.off_show_map .pc_modal .modal_btn .offices_name::after {
		content: none;
	}
	.off_show_map .pc_modal .modal_btn .showroom {
		display: inline-block;
	}

	/* sp_modal */
	.sp_modal {
		display: block;
	}
	.sp_modal_wrap {
		position: relative;
		margin-bottom: 1.75em;
	}
	.off_show_map .sp_modal .modal_btn a {
		min-width: 5vw;
		width: 5vw;
        height: 5vw;
		border: max(1px, 0.1em) solid var(--color-brandGr);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: var(--color-brandGr);
		font-family: "Marcellus", serif;
		font-weight: 400;
		font-style: normal;
		font-size: 3.3vw;
		line-height: 1;
		padding: 0;
		background-color: #FAF8F4;
	}
	.off_show_map .sp_modal .modal_btn.active a {
		background-color: var(--color-brandGr);
		color: #fff;
	}
	.sp_modal .modal_btn.sapporo {
		top: 15.5%;
		left: 58.2%;
	}
	.sp_modal .modal_btn.tsukuba {
		top: 54.8%;
		left: 55.3%;
	}
	.sp_modal .modal_btn.tokyo {
		top: 62.8%;
		left: 52.3%;
	}
	.sp_modal .modal_btn.osaka {
		top: 67.8%;
		left: 36%;
	}
	.sp_modal .modal_btn.honsya {
		top: 71.4%;
		left: 18.5%;
	}
	.sp_modal .modal_btn.seibu {
		top: 77.4%;
		left: 13.5%;
	}
	.sp_modal .modal_btn.kurume {
		top: 81%;
		left: 19.2%;
	}
	.sp_modal .modal_btn.okinawa {
		top: 82.1%;
		left: 79.3%;
	}
}



/* 関係会社 */
.about_relatedBox {
	display: flex;
	background-color: #F5F1EB;
	padding: 2.5em;
}
.about_relatedBox > div {
	padding-left: 2.5em;
}
.about_relatedBox h3 {
	font-size: var(--font-size18px);
	color: #660000;
}
.about_relatedBox h3 + p {
	font-size: var(--font-size14px);
	color: #660000;
	margin-bottom: 1.7em;
}
.about_relatedBox table {
	margin-top: .5em;
	text-align: left;
}
.about_relatedBox th {
	min-width: 10em;
	padding: 0.3em 1em 0.3em 0;
	line-height: 1.4;
}
.about_relatedBox td {
	padding: 0.3em 0;
	line-height: 1.4;
}
.map_btn.btn_bgGr {
	margin-top: 1.5em;
}
.map_btn.btn_bgGr a span::after {
	min-width: 1em;
	background-image: url(../img/icon/icon_blank_wh.svg)!important;
	transition: 0.3s cubic-bezier(0, 0.55, 0.45, 1);
}
@media (min-width: 1024px) {
	.map_btn.btn_bgGr a:hover span::after {
		background-image: url(../img/icon/icon_blank_gr.svg)!important;
	}
}
@media (max-width: 1279px) {
	.about_relatedBox th {
		min-width: 5em;
	}
}
@media (max-width: 750px) {
	.about_relatedBox {
		flex-wrap: wrap;
        justify-content: center;
		padding: 1.75em;
	}
	.about_relatedBox > div {
		padding: 1em 0 0;
        max-width: 420px;
        width: 100%;
	}
}


/* モーダル */
.modal a[x-apple-data-detectors],
.modal a[x-apple-data-detectors] *,
.modal a[href^="tel"],
.modal a[href^="tel"] * {
  text-decoration: none !important;
  border-bottom: none !important;
}
.modal__content {
    width: 90%;
    max-width: 1000px;
}
.modal__inner {
	display: flex;
    align-items: center;
    padding: 4em;
	gap: 2.5em;
}
.modal__inner iframe {
	border-radius: 4px;
	width: 100%;
    max-width: 500px;
}
.modal__inner h3 {
	font-size: var(--font-size18px);
	margin-bottom: 1em;
}
.modal__inner p {
	margin-bottom: 1em;
}
.modal__inner th {
	padding: .5em 2em .5em 0;
	line-height: 1.2;
}
.modal__inner td {
	line-height: 1.2;
}
.modal__inner .btnBox.flexBox {
	flex-wrap: wrap;
}
.modal__inner .btnBox {
	gap: 1em;
	margin-top: 1.5em;
}
.modal__inner .btnBox .map_btn.btn_bgGr {
	margin-top: 0;
}
@media (max-width: 750px) {
	.modal__inner {
		display: block;
		padding: max(24px, 6vw);
	}
	.modal__inner iframe {
		max-width: 100%;
		height: 50vw;
	}
	.modal__inner h3 {
		margin-top: 1em;
	}
	.modal__content .js-modal-close {
		top: -20px;
		right: -20px;
	}
}