@charset "utf-8";

/*===============================================
	title
===============================================*/


/*body {
	background: url("../images/cases/bg.png") no-repeat;
	background-size: 1200px auto;
	background-position: center top;
}*/
main {
	background: url("../images/cases/bg.svg") no-repeat;
	background-size: 1200px auto;
	background-position: center top;
}

#title {
	position: relative;
	margin-bottom: 120px;
	padding:90px 0 0;
}
#title .mainImg {
	position: absolute;
	top:40px;
	right: -60px;
	width:500px;
}
#title h2 {
	margin-bottom: 250px;
	color: #FFF;
}
#title h2 span {
	color:#FFF;
}

@media screen and (max-width:900px){
main {

	background-size: 900px;
	background-position: center top;
}
#title {
	overflow: hidden;
	margin: 0 0 50px 5%;
	}
}
#title h2 {
	margin-bottom: 200px;
}
#title .mainImg {
	position: absolute;
	top:40px;
	right: -10px;
	width:400px;
}
#title .mainTxt {
	margin-right: 5%;
}
@media screen and (max-width:600px){
main {

	background-size: 600px;
	background-position: center top;
}
#title {
	margin-bottom: 70px;
	padding:70px 0 0;
}
#title h2 {
	margin-bottom: 100px;
	color: #FFF;
}
#title .mainImg {
	position: absolute;
	top:70px;
	right: -10px;
	width:250px;
}
	#title .mainTxt {
		margin-top: 17vh;
		font-size:0.9rem;
	}
}
@media screen and (max-width:600px){
main {

	background-size: 700px;
	background-position: center top;
}
#title .mainImg {
	position: absolute;
	top:110px;
	right: -10px;
	width:250px;
}
	#title .mainTxt {
		margin-top: 20vh;
	}
}

@media screen and (max-width:600px){

#title .mainTxt {
		margin-top: 22vh;
}
}
@media screen and (max-width:430px){

#title .mainTxt {
		margin-top: 24vh;
}
}


/*===============================================
	cases
===============================================*/
#cases {
	max-width: var(--main-wid);
	margin: 0 auto 100px;
}
#cases h3 {
	position: relative;
	margin: 0 0 30px;
}
#cases h3 img {
	border-radius: 10px;
}

#cases h3 span {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	font-size:1.9rem;
	white-space: nowrap;
}
#cases .cases {
	position: relative;
	margin: 0 0 80px;
}
#cases .cases .summary {
	display: flex;
	flex-flow: row wrap;
	justify-content:space-between;
}
#cases .cases .summary dl {
	width:28%;
	margin: 0 0 35px;
	padding:3px 0 3px 2%;
	border-left: 1px solid var(--main-bg);
}
#cases .cases .summary dl dt {
	margin: 0 0 5px;
	line-height: 1.6;
	font-weight: 500;
}
#cases .cases .summary dl dd {
	font-size:0.8rem;
	line-height: 1.6;
}
#cases .cases .summary::after {
	display: block;
	content:"";
	width:28%;
}
@media screen and (max-width:900px){
#cases {
	margin: 0 5% 60px;
}
#cases .cases {
	margin: 0 0 60px;
}
#cases h3 span {
	font-size:1.4rem;
text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px;
}
#cases .cases .summary dl {
	width:45%;
}
#cases .cases .summary dl dt {
	font-size:0.9rem;
}
}


/* production ------------------ */
#cases .production .ic {
	position: absolute;
	top:-80px;
	right:-30px;
	z-index: 100000;
	width:150px;
}


/* event ------------------ */
#cases .event h3 span {
	color:#FFF;
}
#cases .event .ic {
	position: absolute;
	top:-60px;
	left:-40px;
	z-index: 100000;
	width:120px;
}

/* pr ------------------ */
#cases .pr .ic {
	position: absolute;
	top:-80px;
	right:-30px;
	z-index: 100000;
	width:150px;
}


@media screen and (max-width:900px){
/* event ------------------ */
#cases .event h3 span {
text-shadow: #705235 2px 0, #705235 -2px 0, #705235 0 -2px, #705235 0 2px, #705235 2px 2px, #705235 -2px 2px, #705235 2px -2px, #705235 -2px -2px, #705235 1px 2px, #705235 -1px 2px, #705235 1px -2px, #705235 -1px -2px, #705235 2px 1px, #705235 -2px 1px, #705235 2px -1px, #705235 -2px -1px;
}
/* production ------------------ */
#cases .production .ic {
	top:-50px;
	right:-2%;
	width:100px;
}


/* event ------------------ */

#cases .event .ic {
	position: absolute;
	top:-60px;
	left:-8%;
	width:80px;
}

/* pr ------------------ */
#cases .pr .ic {
	position: absolute;
	top:-20px;
	right:-5%;
	width:100px;
}
}