@charset "UTF-8";

/*--------------------------------------------------------------------
business.html
business.css
--------------------------------------------------------------------*/

/*------------business---------------------------------------------------------------*/
.business * { font-family: var(--mincho); }
main article p:not(:first-of-type) { margin-top: 0; }
.business section {
	width: 100%;
	padding-bottom: 10px;
}
.business section::before {
	position: absolute;
	display: block;
	content: "";
	width: 755px;
	height: 100%;
	top: 0;
	background-repeat: no-repeat;
	z-index: -1;
}
#developer > section::before {
	right: 0;
	background-color: #fdece5;
	background-position: right top;
	background-image: url("../../img/business_p01.jpg");
	clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
}
#management > section::before {
	left: 0;
	background-color: #e6f9da;
	background-position: left top;
	background-image: url("../../img/business_p02.jpg");
	clip-path: polygon(0 0, 70% 0, 100% 100%, 0% 100%);
}
#planning > section::before {
	right: 0;
	background-color: #fff0db;
	background-position: right top;
	background-image: url("../../img/business_p03.jpg");
	clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
}

.business h3 {
	padding-bottom: 0;
	text-align: left;
	text-shadow: 
		 1px  1px 6px var(--co-white),
		-1px  1px 6px var(--co-white),
		 1px -1px 6px var(--co-white),
		-1px -1px 6px var(--co-white),
		 1px  0px 6px var(--co-white),
		 0px  1px 6px var(--co-white),
		-1px  0px 6px var(--co-white),
		 0px -1px 6px var(--co-white);
}
.business h3::before { display: none; }
.business h3 em {
	display: inline-block;
	padding-left: 1em;
	font-weight: bold;
}
.business h3 span {
	display: block;
	filter: drop-shadow(0 0 2px var(--co-white)) drop-shadow(0 0 2px var(--co-white)) drop-shadow(0 0 2px var(--co-white));
}
.business .title {
	max-width: 520px;
	padding-left: 70px;
	padding-bottom: 115px;
}
#management .title {
	max-width: 420px;
	margin-left: auto;
	padding-bottom: 80px;
}
#planning .title { padding-bottom: 60px; }
.business .title p {
	line-height: 1.9;
	font-size: 1.05em;
	font-weight: bold;
	color: var(--co-black);
	text-shadow: 
		 1px  1px 6px var(--co-white),
		-1px  1px 6px var(--co-white),
		 1px -1px 6px var(--co-white),
		-1px -1px 6px var(--co-white),
		 1px  0px 6px var(--co-white),
		 0px  1px 6px var(--co-white),
		-1px  0px 6px var(--co-white),
		 0px -1px 6px var(--co-white);
}
.FlexList {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
}
.FlexBox {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 5px;
}
.business dl { flex: 1; }
.business dl dt { margin-bottom: 5px; }
.business dl dt span {
	display: inline-block;
	padding: 5px 10px;
	line-height: 1.2;
	font-size: 1.3125em;
	font-weight: bold;
}
.business dl dd {
	line-height: 1.6;
	font-size: 1.05em;
	font-weight: bold;
	color: var(--co-black);
}
.circle {
	position: relative;
	line-height:0;
	border-radius: 50%;
	overflow: hidden;
}
.circle::after {
	position: absolute;
	display: block;
	content: "";
	top: -1px; right: -1px; bottom: -1px; left: -1px;
	box-shadow: inset 0px 0px 3px 3px rgba(255,255,255,0.9);
	border-radius: 50%;
}
.ImgHeight { padding-top: 100%; }
.ImgHeight img {
	position: absolute;
	top: 50%;
	transform: var(--tr-f-Y);
}
.square img {
	margin: 0 3px 3px 0;
	box-shadow: 3px 3px 0 #cfcfcf;
}

@media (max-width: 979px) {
	.business section { width: 98%; }
	.business section section { width: 100%; }
	.business .title .SpNo { display: block; }
}

@media (max-width: 610px) {
	.business section section { width: 96%; }
	.business .title {
		padding-top: 20px;
		padding-left: 0;
	}
}

@media (max-width: 500px) {
	.FlexList,
	.FlexBox { display: block; }
	.business .title,
	#management .title {
		max-width: 100%;
		padding-left: 20px;
	}
}

/*------------developer------------------------*/
#developer #deveList { margin-top: 50px; }
#developer dl dt span {
	background-color: #b86a67;
	color: var(--co-white);
}
#developer dl.white dt span {
	background-color: var(--co-white);
	color: #b86a67;
}
#developer #deveList dl + p {
	margin-top: 20px;
	padding-left: 20px;
}
#developer #devCirImg {
	width: 100%;
	max-width: 210px;
	margin-top: 20px;
}
#developer #devCirImg img { height: 210px; }
#developer #region {
	margin-top: 40px;
	margin-left: 40px;
}
#developer #future {
	margin-top: 30px;
	margin-left: 20px;
}

@media (max-width: 979px) {
	#developer .FlexBox { display: block; }
	#developer #dev01,
	#developer #dev02 { width: 48%; }
}

@media (max-width: 500px) {
	#developer #dev01,
	#developer #dev02 { width: 100%; }
	#developer #region {
		margin-top: 20px;
		margin-left: 0;
	}
	#developer #future {
		margin-top: 20px;
		margin-left: 0;
	}
	#developer #devCirImg {
		margin-top: 10px;
		margin-bottom: 20px;
	}
}

/*------------management------------------------*/
#management #manaList { padding-top: 80px; }
#management dl.white { margin-left: 60px; }
#management dl#plan { margin-bottom: 10px; }
#management dl#aesthetics { margin-top: -20px; }
#management dl#maintenance { margin-top: 20px; }
#management #manage02 { width: 375px; }
#management dl dt span {
	background-color: #79966e;
	color: var(--co-white);
}
#management dl.white dt span {
	background-color: var(--co-white);
	color: #79966e;
}
#management #manCirImg01 {
	width: 100%;
	max-width: 300px;
	margin-left: -40px;
}
#management #manCirImg02 {
	width: 100%;
	max-width: 300px;
	margin: 80px 0 0 -50px;
}
#management #manCirImg03 {
	width: 100%;
	max-width: 375px;
	margin-top: -80px;
}
#management #manCirImg01 img,
#management #manCirImg02 img { height: 300px; }
#management #manCirImg03 img { height: 375px; }

@media (max-width: 979px) {
	#management #manage01,
	#management #manage02 { width: 48%; }
}

@media (max-width: 500px) {
	#management #manage01,
	#management #manage02 { width: 100%; }
	#management dl.white { margin-left: 0; }
	#management dl#plan { margin-bottom: 10px; }
	#management dl#aesthetics,
	#management dl#maintenance { margin-top: 20px; }
	#management #manCirImg01 { margin-left: 0; }
	#management #manCirImg02 { margin: -40px 0 0; }
	#management #manCirImg03 { margin: 20px 0 0; }
}

/*------------planning------------------------*/
#planning #evenList { padding-top: 0; }
#planning dl dt span {
	background-color: #d2af60;
	color: var(--co-white);
}
#planning dl.white dt span {
	background-color: var(--co-white);
	color: #d2af60;
}
#planning #event01 {
	margin-top: -30px;
	margin-left: 40px;
}
#planning #event02 { margin-top: 120px; }
#planning #planPho,
#planning #culture { margin-top: 20px; }
#planning #eveCirImg { width: 540px; }
#planning #eveCirImg01 {
	width: 100%;
	max-width: 375px;
	margin-left: -20px;
}
#planning #eveCirImg02 {
	width: 100%;
	max-width: 280px;
	margin: 200px 0 0 -90px;
}
#planning #eveCirImg03 {
	width: 100%;
	max-width: 410px;
	margin-top: 80px;
}
#planning #eveCirImg01 img { height: 375px; }
#planning #eveCirImg02 img { height: 280px; }

@media (max-width: 979px) {
	#planning #plan01,
	#planning #plan02 { width: 48%; }
	#planning #eveCirImg { width: 100%; }
}

@media (max-width: 790px) {
	#planning .FlexBox { display: block; }
	#planning #event01 { margin-top: 20px; }
	#planning #eveCirImg01 { margin-left: 0; }
	#planning #eveCirImg02 { margin: -40px 0 0 0; }
}

@media (max-width: 500px) {
	#planning #plan01,
	#planning #plan02 { width: 100%; }
	#planning #event01 { margin-left: 0; }
	#planning #event02 { margin-top: 20px; }
}
/*------------studiowing------------------------*/
#studiowing {
	width: 50%;
	max-width: 300px;
	margin: 40px auto 0;
}
#studiowing a {
	position: relative;
	display: block;
	padding: 0.5em 20px 0.5em 10px;
	background-color: var(--co-navy);
	border-radius: 5px;
	transition: 1s;
	line-height: 1.2;
	text-align: center;
	font-family: var(--mincho);
	font-weight: bold;
	color: var(--co-white);
}
#studiowing a::after {
	position: absolute;
	display: block;
	content: "";
	width: 20px;
	height: 20px;
	top: 50%;
	right: 1em;
	transform: var(--tr-f-Y);
	background: url("../../img/nav_a.png") no-repeat left top / cover;
	z-index: 5;
}
#studiowing:hover {
	text-decoration: none;
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}
#studiowing a:hover { color: #ff0; }