@charset "UTF-8";

/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
WP Maruso Group Theme
	ver.2023.08.16.Custom-
	固定ページ「グループ概要」　スタイルシート
────────────────────────────────────────
FileName:		/marusogroupTheme/assets/css/style-page-about_us.css
Editor:			TRUSTEC
Description:	固定ページ「グループ概要」　スタイルシート。
────────────────────────────────────────
2023/07/25:		アイキャッチの表示をイメージに合わせて更新。
2023/07/25:		公開。
2023/05/31:		固定ページ名変更に伴う更新。
					会社概要→グループ概要
2022/12/01:		開発開始。
2022/11/01:		サンプル開発開始。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/





/* ::::: [COMMON] ::::: */





/* ::::: [COMMON-PARTS] ::::: */

/* Nav: Category Menu
--------- --------- --------- ------- */
/**		*/
#category-menu {
}
.category-menu-wrapper {
}


/* Media Query
--------- --------- --------- ------- */
/*	DisplayWidth > XL	*/
@media (min-width: 1400px) {
}

/*	DisplayWidth < SM	*/
@media (max-width: 767px) {
}

/*	DisplayWidth < XS	*/
@media (max-width: 575px) {

	/* Nav: Category Menu
	--------- --------- --------- ------- */
	/**		*/
	#category-menu {
	}
	.category-menu-wrapper {
		padding-left: var(--page-layout-space-width);
		padding-right: var(--page-layout-space-width);
	}
}






/* Buttons: Btn Category Menu
--------- --------- --------- ------- */
/*		*/
.btn-category-menu {
	background-color: #fff4f4;
	color: var(--common-color);
/*	font-size: 2.55rem;*/
	/*font-size: clamp(1.2rem, 2.4vw, 2.55rem);		--title-font-size-46	*/
	font-size: 2.4vw;	/*	--title-font-size-46	*/
	font-size: max(1.2rem, 2.4vw);	/*	--title-font-size-46	*/
	font-family: var(--common-font-family);
	font-weight: var(--common-font-weight);
	font-style: var(--common-font-style);
	text-align: left;
	width: 100%;
	padding: 0.4em 1.4em;
	border: solid max(2px, 0.16vw) var(--common-pointed-color-1);
	border-radius: 4em;
	position: relative;
}
.btn-category-menu::after {
	content: "";
	background: url("../images/common/icon-circle-red-hole.svg") no-repeat center center;
	background-size: cover;
	width: 0.8em;
	height: 0.8em;
	display: inline-block;
	position: absolute;
	top: 35%;

	top: 50%;
	right: 1em;
	transform: translateY(-50%);
}
.btn-category-menu .title {
	font-size: inherit;
	font-family: inherit;
/*	font-weight: var(--common-font-weight-medium);*/
	font-weight: var(--common-font-weight-black);
	font-style: inherit;
	letter-spacing: 0.1em;
	display: block;
}
.btn-category-menu .title-small {
	color: var(--common-pointed-color-1);
	font-family: var(--common-font-an-family);
	font-weight: var(--common-font-an-weight-bold);
	font-style: var(--common-font-an-style);
	font-size: 0.5em;
	letter-spacing: 0.1em;
	display: block;
}


/* Media Query
--------- --------- --------- ------- */
/*	DisplayWidth > XL	*/
@media (min-width: 1400px) {
}

/*	DisplayWidth < SM	*/
@media (max-width: 767px) {
}

/*	DisplayWidth < XS	*/
@media (max-width: 575px) {
}




/* Side Menu
--------- --------- --------- ------- */
.sidemenu {
	background-color: var(--sidebar-background-color);
	color: var(--sidebar-color);
/*	font-size: smaller;*/
	font-size: max(0.83rem, 0.94vw);
}

.sidemenu-wrapper {
	position: sticky;
	top: var(--magazin-layout-space-height-half);
	padding: var(--magazin-layout-space-height-half) 2em;
/*	background-color: rgba(255, 255, 255, 0.2);*/
}

/*	アンカーリンクメニューリスト	*/
.anchor-list {
	list-style-type: none;
	margin: 0;
	padding: 2rem 0 0 0;
}
.anchor-list li {
	color: inherit;
	margin: 0;
	padding: 0;
	display: block;
}
.anchor-list li:not(:first-child):not(:last-child) {
	margin: 2em 0;
}

.anchor-list li a {
	color: currentColor;
	text-decoration: inherit;
/*	padding: 0.5em 0;*/
	display: block;
}
.anchor-list li a::before {
	content: "";
	background: url("../images/common/icon-circle-small-gray.svg") no-repeat center top;
	background-size: contain;
	vertical-align: top;
    width: 1.2em;
    height: 1.2em;
	margin-top: 0.3em;
	margin-right: 0.5em;
	display: inline-block;
}

.anchor-list li.current a {
}
.anchor-list li.current a::before {
	background-image: url("../images/common/icon-circle-small-red.svg");
}


/* Media Query
--------- --------- --------- ------- */
/*	DisplayWidth > XL	*/
@media (min-width: 1400px) {
}

/*	DisplayWidth < SM	*/
@media (max-width: 767px) {

	/* Side Menu
	--------- --------- --------- ------- */
	.sidemenu {
		font-size: 0.8em;
		position: sticky;
		top: 6rem;
	}

	.sidemenu-wrapper {
		padding: 2vw var(--header-padding-x);
		position: relative;
		top: auto;
	}

	/*	アンカーリンクメニューリスト	*/
	.anchor-list {
		padding: 0;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.anchor-list li:not(:first-child):not(:last-child) {
		margin: 0;
	}

	/* Layout
	--------- --------- --------- ------- */
	html, body {
		-ms-scroll-padding-top: 8rem;
		-webkit-scroll-padding-top: 8rem;
		-moz-scroll-padding-top: 8rem;
		-o-scroll-padding-top: 8rem;
		scroll-padding-top: 8rem;
	}
}

/*	DisplayWidth < XS	*/
@media (max-width: 575px) {

	/* Layout
	--------- --------- --------- ------- */
	html, body {

		-ms-scroll-padding-top: 9rem;
		-webkit-scroll-padding-top: 9rem;
		-moz-scroll-padding-top: 9rem;
		-o-scroll-padding-top: 9rem;
		scroll-padding-top: 9rem;
	}
}





/* ::::: [OVER-WRITES : STYLE-COMMON] ::::: */

/* Intro
--------- --------- --------- ------- */
.intro {
	background-position-x: 60%;
}





/* ::::: [SECTION : INTRODUCTION-VIDEO] ::::: */

/* Setting
--------- --------- --------- ------- */
#introduction-video {
	margin-left: auto;
	margin-right: auto;
	/*background-color: rgba(0, 0, 0, 0.2);*/
}
.introduction-video-wrapper {
	background-color: var(--common-pointed-color-1);
	width: 100%;
	height: 100%;
	position: relative;
}

/* Titles
--------- --------- --------- ------- */
#introduction-video .video-title {
	--title-color: #5c5c5c;
	--title-small-color: var(--common-pointed-color-1);
	--title-border-color: var(--common-border-color-1);
	--title-font-size: max(0.8rem, 1.78vw);				/*	--title-font-size-36	*/
	--title-font-size-small: max(0.8rem, 1.78vw);		/*	--title-font-size-34	*/

	background-color: rgba(255, 0, 0, 0.1);
	font-size: var(--title-font-size);
	line-height: 1em;
}

#introduction-video .video-title .title {
	background-color: #ffffff;
	color: var(--title-color);
	font-size: var(--title-font-size);
	font-weight: var(--common-font-weight-medium);
	font-style: var(--common-font-style);
	line-height: 1em;
	letter-spacing: 0.1em;
	width: 70%;
	height: 20%;
	padding-left: 1em;
	padding-right: 1em;
	display: flex;
	align-items: flex-end;
	position: absolute;
	bottom: 0;
	right: 0;
}
#introduction-video .video-title .title::before {
	content: "";
	margin-right: 1em;
	margin-bottom: 0.5em;
	border-top: 1px solid var(--section-title-border-color);
	flex-grow: 1;
}

#introduction-video .video-title .title-small {
	background-color: #ffffff;
	color: var(--title-small-color);
	font-size: var(--title-font-size-small);
	font-family: var(--common-font-an-family);
	font-weight: var(--common-font-an-weight-medium);
	font-style: var(--common-font-an-style);
	line-height: 1em;
	letter-spacing: 0.1em;
	width: 70%;
	height: 20%;
	padding-left: 1em;
	padding-right: 1em;
	display: flex;
	align-items: flex-start;
	position: absolute;
	top: 0;
	left: 0;
	right: auto;
}
#introduction-video .video-title .title-small::after {
	content: "";
	margin-left: 1em;
	margin-top: 0.5em;
	border-top: 1px solid var(--section-title-border-color);
	flex-grow: 1;
}

/* Video
--------- --------- --------- ------- */
#introduction-video .video-object {
	width: 100%;
	line-height: 1em;
	padding: var(--title-font-size);
	position: relative;
	z-index: auto;
}

#introduction-video .video-object figure {
    margin: 0;
    padding: 0;
}

#introduction-video .video-object video {
	width: 100%;
}


/* Media Query
--------- --------- --------- ------- */
/*	DisplayWidth > XL	*/
@media (min-width: 1400px) {
}

/*	DisplayWidth < SM	*/
@media (max-width: 767px) {
}

/*	DisplayWidth < XS	*/
@media (max-width: 575px) {

	#introduction-video.ml-px {
		padding-left: 0;
		padding-right: 0;
	}

	#introduction-video.ml-mt-half {
		padding-left: 0;
		padding-right: 0;
	}

	/* Titles
	--------- --------- --------- ------- */
	#introduction-video .video-title {
		--title-font-size: 1.07rem;				/*	--title-font-size-15	*/
		--title-font-size-small: 1.07rem;		/*	--title-font-size-15	*/
	}
}





/* ::::: [SECTION : TOP-MESSAGE] ::::: */

/* Setting
--------- --------- --------- ------- */
#top-message {
	/*background-color: rgba(255, 0, 255, 0.1);*/
}
/*.top-message-wrapper {
	background-color: rgba(255, 0, 255, 0.1);
}*/


/* Over Writes: Message
--------- --------- --------- ------- */
/*	Message	*/
#top-message .message:not(:last-of-type) {
	margin-bottom: 2em;
}

/*	Signature	*/
#top-message .signature {
	font-size: inherit;
	line-height: 1.5em;
}
#top-message .signature-post {
	font-size: inherit;
}
#top-message .signature-name {
	font-size: 2.23em;
	line-height: 1.5em;
}


/* Media Query
--------- --------- --------- ------- */
/*	DisplayWidth > XL	*/
@media (min-width: 1400px) {
}

/*	DisplayWidth < SM	*/
@media (max-width: 767px) {
}

/*	DisplayWidth < XS	*/
@media (max-width: 575px) {


	/* Over Writes: Message
	--------- --------- --------- ------- */
	/*	Message	*/
	#top-message .message {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	/*	Signature	*/
	#top-message .signature-name {
		font-size: 1.3em;
	}
}





/* ::::: [SECTION : COMPANY-OVERVIEW] ::::: */

/* Setting
--------- --------- --------- ------- */
#company-overview {
	--block-space-width: 1.36vw;				/*	--title-font-size-26	*/
	--lead-font-size: max(1.6rem, 1.56vw);		/*	title-font-size-30	*/

	/*background-color: rgba(255, 0, 255, 0.1);*/
}
/*.company-overview-wrapper {
	background-color: rgba(255, 0, 255, 0.1);
}*/

#company-overview .pattern-title-rounded {
}

#company-overview .lead {
	font-size: var(--lead-font-size);
	font-weight: var(--common-font-weight-black);
/*	font-feature-settings: "palt";*/
	line-height: 1.8em;
	letter-spacing: 0.1em;
	margin-bottom: 1em;
}

/*	経営理念	*/
#company-overview .philosophy {
}
#company-overview .philosophy .philosophy-wrapper {
	margin-left: calc(var(--block-space-width) * 2);
	/*background-color: rgba(0, 0, 255, 0.1);*/
}
#company-overview .philosophy .lead {
	/*font-feature-settings: "palt";*/
	letter-spacing: initial;
}

/*	マルソーの三誓	*/
#company-overview .promise {
}
#company-overview .promise .promise-wrapper {
	margin-left: calc(var(--block-space-width) * 2);
	/*background-color: rgba(0, 0, 255, 0.1);*/
}

#company-overview .promise ol {
	list-style-type: cjk-ideographic;
	margin-bottom: 1em;
}
#company-overview .promise ol li {
	margin-left: 1em;
}

/*	概要	*/
#company-overview .information {
}
#company-overview .information .information-wrapper {
	margin-left: calc(var(--block-space-width) * 2);
	/*background-color: rgba(0, 0, 255, 0.1);*/
}

#company-overview .information table {
	--th-font-size: max(1rem, 1.15vw);	/*	title-font-size-22;	*/
	--td-font-size: max(1rem, 1.04vw);	/*	title-font-size-20;	*/
	width: 100%;
}
#company-overview .information table tbody {
}
#company-overview .information table tr {
	border-bottom: solid 1px var(--common-border-color-1);
}
#company-overview .information table tr:not(:last-of-type) {
}
#company-overview .information table th {
	font-size: var(--th-font-size);
	font-weight: var(--common-font-weight-black);
	vertical-align: top;
	padding: 1.5em 2em;
}
#company-overview .information table td {
	font-size: var(--td-font-size);
	vertical-align: top;
	padding: 1.5em 2em;
}

#company-overview .information table th > p:last-of-type,
#company-overview .information table td > p:last-of-type,
#company-overview .information table td > ul:last-of-type {
	margin-bottom: 0;
}


/* Media Query
--------- --------- --------- ------- */
/*	DisplayWidth > XL	*/
@media (min-width: 1400px) {
}

/*	DisplayWidth < SM	*/
@media (max-width: 767px) {
}

/*	DisplayWidth < XS	*/
@media (max-width: 575px) {

	/* Setting
	--------- --------- --------- ------- */
	#company-overview {
		--lead-font-size: 1.14rem;		/*	title-font-size-16	*/
	}

	/*	経営理念	*/
	#company-overview .philosophy {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
	#company-overview .philosophy.ml-mb-half {
		margin-bottom: calc(var(--magazin-layout-space-height-half) / 2);
	}

	#company-overview .philosophy .lead {
		text-align: center;
	}
	#company-overview .philosophy .philosophy-wrapper {
		margin-left: 0;
	}

	/*	マルソーの三誓	*/
	#company-overview .promise {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
	#company-overview .promise.ml-mb-half {
		margin-bottom: calc(var(--magazin-layout-space-height-half) / 2);
	}

	#company-overview .promise ol li {
		margin-left: 0;
	}

	/*	概要	*/
	#company-overview .information {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
	#company-overview .information .information-wrapper {
		margin-left: 0;
	}

	#company-overview .information table {
		--th-font-size: 0.86rem;	/*	title-font-size-12;	*/
		--td-font-size: 1rem;		/*	title-font-size-14;	*/
	}

	#company-overview .information table th,
	#company-overview .information table td {
		width: 100%;
		padding: 0.5em;
		border: none;
		display: block;
	}
	#company-overview .information table tr:first-child th {
		/*border-top: solid 2px var(--common-border-color-1);*/
	}

	#company-overview .information table th {
		padding: 0.5em 0;
	}
	#company-overview .information table td {
		padding: 1em 0.5em;
		padding: 0 0 0.5em 0;
	}

	#company-overview .font-size-smaller {
		font-size: inherit;
	}
}

/*	グループのマップ	*/

#googlemap-group {
}
.map {
	background-color: rgba(0, 0, 0, 0.05);
	color: #a0a0a0;
	width: 100%;
	min-height: 600px;
	height: 60vh;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	border-radius: 5px;
}

.custom-info {
	color: #000000;
}
.custom-info .custom-info-item,
.custom-info-item {
}
.custom-info-item.name {
	font-size: initial;
	font-weight: var(--common-font-weight-bold);
}
.custom-info-item.address {
}
.custom-info-item.website {
}







/* ::::: [SECTION : HISTORY] ::::: */

/* History
--------- --------- --------- ------- */
#history {
	--block-space-width: 1.36vw;						/*	--title-font-size-26	*/
	--timeline-date-font-size: max(1rem, 1.15vw);		/*	title-font-size-22;	*/
	--timeline-content-font-size: max(1rem, 1.04vw);	/*	title-font-size-20;	*/
	/*background-color: rgba(255, 0, 255, 0.1);*/
}
/*.history-wrapper {
	background-color: rgba(255, 0, 255, 0.1);
}*/

.timeline {
	margin: 0;
	margin-left: var(--block-space-width);
	padding: 0;
	/*background-color: rgba(255, 255, 0, 0.1);*/
}

.timeline-list {
	margin: 0 0 0 1em;
	padding: 0;
	/*background-color: rgba(255, 255, 0, 0.1);*/
}

.timeline-list-item {
	display: flex;
}
.timeline-list-item::before {
	content: "";
	background-color: var(--common-pointed-color-1);
	width: 0.8em;
	height: 0.8em;
	margin-left: -0.4em;
	margin-right: 1em;
	border-radius: 100%;
	display: block;
	flex: 0 0 0.8em;
}
.timeline-list-item:not(:last-child) {
	padding-bottom: 2em;
	border-left: 1px solid #cbcbcb;
}

.timeline-list-item .date {
	font-size: var(--timeline-date-font-size);
	font-weight: var(--common-font-weight-bold);
	width: 10em;
	margin-top: -0.5em;
	flex: 1 0 10em;
	/*background-color: rgba(255, 0, 255, 0.5);*/
}

.timeline-list-item .content {
	font-size: smaller;
	font-size: var(--timeline-content-font-size);
	width: 80%;
	margin-top: -0.6em;
	position: relative;
	flex: 1 1 80%;
	/*background-color: rgba(255, 0, 255, 0.5);*/
}


/* Media Query
--------- --------- --------- ------- */
/*	DisplayWidth > XL	*/
@media (min-width: 1400px) {
}

/*	DisplayWidth < SM	*/
@media (max-width: 767px) {
}

/*	DisplayWidth < XS	*/
@media (max-width: 575px) {

	/* History
	--------- --------- --------- ------- */
	#history {
		--block-space-width: 0;
		--timeline-date-font-size: 1.14rem;			/*	title-font-size-16;	*/
		--timeline-content-font-size: 0.93rem;		/*	title-font-size-13;	*/
	}

	.timeline {
		padding-right: 1rem;
	}

	.timeline-list-item {
		display: block;
	}

	.timeline-list-item::before {
		/*display: inline-block;*/
	}

	.timeline-list-item .date {
/*		width: calc(100% - 2em);*/
		width: 100%;
		margin-top: -1.2em;
		margin-left: 1em;
	}

	.timeline-list-item .content {
/*		width: calc(100% - 2em);*/
		width: 100%;
		margin-top: 0;
		margin-left: 1em;
	}
}






/* ::::: [OVER-WRITES : ] ::::: */