﻿
.head-tit {
	position: relative;
	z-index: 4;
	width: 100%;
	background-color: #fff;
	padding: 20px 0 10px 0;
	box-sizing: border-box;
}


.logo-main {
	width: 100%;
	line-height: 0;
	border-bottom: solid 3px #db61af;
	overflow: hidden;
	padding: 0 2%;
	box-sizing: border-box;
}

.logo-main img{
	width: 28%;
	margin-bottom: 10px;
}


.top-entry {
	position: absolute;
	right: 15px;
	bottom: -20%;
	width: 160px;
}

.top-entry img {
	webkit-filter:drop-shadow( 4px 4px 4px rgba(0, 0, 0, 0.3));
    -moz-filter:drop-shadow( 4px 4px 4px rgba(0, 0, 0, 0.3));
    -ms-filter:drop-shadow( 4px 4px 4px rgba(0, 0, 0, 0.3));
    filter:drop-shadow( 4px 4px 4px rgba(0, 0, 0, 0.3));
}


.top-img-box {
	position: relative;
	z-index: 2;
	width: 100%;
	overflow: hidden;
}

.top-img-case {
	position: relative;
	width: 100%;
	height: 750px;
	overflow: hidden;
	background-color: #000;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: auto;
	line-height: 0;
	background-image:url("../images/main_visual.jpg");
	background-position: center bottom 30%;
	background-repeat: no-repeat;
	background-size: cover;
	box-sizing: border-box;
}

@media (max-width:768px){
	
	.logo-main img {
		width: 35%;
	}

	
	.top-entry {
		width: 130px;
	}
	
	.top-img-case {
		height: 500px;
		background-position: center bottom 30%;
		background-size: 120%;
	}
	
}

@media (max-width:600px){
	
	.logo-main {
		text-align: left;
	}
	
	.logo-main img {
		width: 55%;
	}
	
	.top-entry {
		right: 5px;
		bottom: -15%;
		width: 120px;
	}
	
	.top-img-case {
		height: 650px;
		background-position: bottom left 70%;
		background-size: 300%;
	}
	
}

@media (max-width:350px){
	
	.logo-main img {
		width: 60%;
	}
	
	.top-entry {
		right: 0;
		bottom: -15%;
		width: 100px;
	}
	
	.top-img-case {
		height: 650px;
		background-position: bottom left 70%;
		background-size: 350%;
	}
	
}

.top-screen {
	width: 100%;
	height:100%;
	top: 0;
	left: 0;
	position:absolute;
	z-index: 0;
	background: rgba(68,0,34,0.4);
	box-sizing: border-box;
}

.top-coment-wrap {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: #db61af;
	padding: 5% 3% 5% 3%;
	background: linear-gradient(rgba(219,97,175,0),20%,rgba(219,97,175,1));
	box-sizing: border-box;
}

.top-coment {
	width: 100%;
	max-width: 1000px;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 1.6em;
}

.top-coment dd {
	width: 47%;
	color: #fff;
}

.top-coment dd div {
	border-bottom: solid 3px #fff;
	padding-bottom: 5px;
	margin-bottom: 20px;
}

.top-coment dd p {
	margin-top: 0.7em;
	text-align: left;
}

@media (max-width:768px){
	
	.top-coment dd p {
		letter-spacing: 0.03em;
	}
	
}

@media (max-width:600px){
	
	.top-coment-wrap {
		padding: 5% 4% 5% 4%;
	}
	
	.top-coment dd {
		margin-bottom: 15px;
	}
	
	.top-coment dd p {
		letter-spacing: 0.03em;
	}
	
	.top-coment dd dl,
	.top-coment dd div {
		width: 90%;
		margin: auto;
	}
	
	.top-coment dd div {
		margin-bottom: 20px;
	}
	
	.top-coment {
		display: block;
	}
	
	.top-coment dd {
		width: 100%;
	}


	
}













