@import "style.css";

body{
	background:#FFF;
	color:#1d1b1b;
}

.container{
	overflow:hidden;
}

/************************************** title start ***************************************************/
.title{
	display:flex;
	justify-content:space-between;
}

/*********** 事業類別 icon 選單 start ***********/
.bu{
	width:71.87%;
	margin-top:1%;
}
.bu > li .icon:before{
	background-position-y:bottom;
}
.bu > li:hover .icon:before,
.bu > li.active .icon:before{ background-color:currentColor; background-position-y:top;}
.bu > li em{
	display:block;
	text-align:center;
	color:#BBB;
	font-style:normal;
	font-size:1.25em;
	line-height:1em;
	margin-top:1em;
}
.bu > li ul{
	position:absolute;
	left:0;
	top:0;
	margin:130% 0 0 10%;
	padding-top:20%;
	padding-right:1000%; /* fix IE */
	font-size:1.2em;
	display:flex;
	white-space:nowrap;
	color:#666;
	line-height:1em;
	visibility:hidden;
}
.bu > li:first-child ul{
	transform:translateX(1em);
}
.bu > li:hover ul,
.bu > li.active ul{
	visibility:visible;
}
.bu > li ul li{
	padding-left:0.5em;
	border-left:1px solid;
}
.bu > li ul li+li{
	margin-left:0.5em;
}
.bu > li ul li:last-child{
	padding-right:0.5em;
	border-right:1px solid;
}
.bu > li ul li a{
	font-weight:bold;
	transition:color 0.2s;
}
.bu > li ul li a:hover,
.bu > li ul li.active a{
	color:#000;
}
/*********** 事業類別 icon 選單 end ***********/
/************************************** title end ***************************************************/


/************************************** main start ***************************************************/
main{
	display:block; /* fix IE*/
	margin:6% 0 2%;
}

.group{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
}
.group+.group{
	margin-top:6%;
}

.group .img{
	width:58.75%;
	display:flex;
}
.group .img h3{
	font-size:0;
	width:43.61%;
	background-color:#282525;
	background-repeat:no-repeat;
	background-position:center;
	background-size:61.95%;
}
.group .img h3.casa{ background-image:url(../images/bu_casa.png);}
.group .img h3.select{ background-image:url(../images/bu_select.png);}
.group .img h3.flower{ background-image:url(../images/bu_flower.png);}
.group .img h3.nordic{ background-image:url(../images/bu_nordic.png);}
.group .img h3.domani{ background-image:url(../images/bu_domani.png);}
.group .img h3.bar{ background-image:url(../images/bu_bar.png);}
.group .img h3.oldBridge{ background-image:url(../images/bu_oldBridge.png);}
.group .img h3.dft{ background-image:url(../images/bu_dft.png);}
.group .img h3.cafe{ background-image:url(../images/bu_cafe.png);}
.group .img h3.arts{ background-image:url(../images/bu_arts.png);}
.group .img h3.mot{
	background-image:url(../images/bu_mot.png);
	background-size:78.04%;
}
.group .img h3.times{
	background-image:url(../images/bu_times.png);
	background-size:55%;
}
.group .img img{
	display:block;
	width:56.39%;
}

.group .txt{
	width:38.12%;
	margin-top:0.5em;
	font-size:1.15em;
}
.group .txt h4{
	font-size:1.125em;
}
.group .txt .info{
	margin-top:2.5em;
	display:flex;
	line-height:1.4em;
}
.group .txt .info h4{
	display:none;
}
.group .txt .info ul li{
	display:flex;
	align-items:flex-start;
}
.group .txt .info ul li+li{
	margin-top:0.8em;
}
.group .txt .info ul li em{
	font-style:normal;
	display:block;
	padding:0 0.5em 0 0;
	border:1px solid;
	border-top:none;
	border-bottom:none;
	border-left:none;
	white-space:nowrap;
}
.group .txt .info ul li span{
	margin-left:1em;
}
.group .txt .info ul li span a{
	display:inline-flex;
}
.group .txt .info ul li span a:hover{
	text-decoration:underline;
}
.group .txt .info ul li span a i{
	flex-shrink:0;
	display:inline-block;
	margin:0.2em 0 0 0.2em;
}
.group .txt .info ul li span a i:before{
	content:"";
	display:block;
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
}
.group .txt .info ul li span a.address i{
	width:0.9em;
}
.group .txt .info ul li span a.address i:before{
	background-image:url(../images/icon_marker.svg);
	padding-top:125%;
}
.group .txt .info ul li span a.tel i{
	width:1em;
}
.group .txt .info ul li span a.tel i:before{
	background-image:url(../images/icon_tel.svg);
	padding-top:100%;
}
.group .txt .cta{
	margin-top:2.5em;
	display:flex;
	align-items:center;
}
.group .txt .cta a{
	display:block;
}
.group .txt .cta a:not(:first-child){
	margin-left:1.2em;
}
.group .txt .cta a:not([class]){
	padding:0.25em 0.5em;
	border:1px solid;
	transition:all 0.2s;
}
.group .txt .cta a:not([class]):hover{
	color:#FFF;
	border-color:#1d1b1b;
	background:#1d1b1b;
}

.linkIcon{
	display:inline-flex;
	align-items:center;
}
.linkIcon span{
	margin-right:0.5em;
}

.group .txt .cta a.sns,
.linkIcon span{
	width:2.125em;
}
.group .txt .cta a.sns:before,
.linkIcon span:before{
	content:"";
	display:block;
	padding-top:100%;
	background:currentColor url(../images/sns.png) no-repeat;
	background-size:300%;
	border-radius:50%;
	transition:background-color 0.2s;
}
.group .txt .cta a.sns:hover:before,
.linkIcon:hover span:before{
	background-color:#666;
}
.group .txt .cta a.sns.link:before,
.linkIcon span:before{ background-position:left;}
.group .txt .cta a.sns.fb:before{	background-position:center;}
.group .txt .cta a.sns.ig:before{	background-position:right;}
.group .txt .cta a.sns span{
	display:none;
}
/************************************** main end ***************************************************/


@media screen and (max-width:1023px){
	
	/************************************** title start ***************************************************/
	.title{
		display:block;
	}
	/*********** 事業類別 icon 選單 start ***********/
	.bu{
		display:none;
	}
	/*********** 事業類別 icon 選單 end ***********/
	/************************************** title end ***************************************************/
	
	/************************************** main start ***************************************************/
	main{
		margin:0;
	}
	.group{
		display:block;
	}
	.group,
	.group+.group{
		margin-top:20%;
	}
	.group .img{
		width:auto;
		display:block;
	}
	.group .img h3{
		width:auto;
		padding-top:50%;
	}
	.group .img img{
		width:100%;
	}
	.group .txt{
		width:auto;
		margin-top:5%;
	}
	.group .txt .info{
		display:block;
		margin-top:1em;
	}
	.group .txt .info h4{
		margin-top:0;
	}
	.group .txt .info ul{
		margin:1em 0 0 0;
		max-width:none;
	}
	.group .txt .cta{
		margin-top:1em;
	}
	/************************************** main end ***************************************************/
	
}