@charset UTF-8;

body {
    font-family:"游ゴシック体", "YuGothic", sans-serif, Verdana, "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	background-color:#fff;
	color:#284ef6;
	font-size:16px;
	line-height:1.5;
}

header{
	height:600px;
	width:100%;
	background-image:url(images/MVback.jpg);
	background-size:cover;
	position:relative;
}

h1{
	font-size:24px;
	font-family:"凸版文久見出しゴシックエクストラボールド", "ToppanbunkyumidashiGothic";
	padding-left:100px;
	padding-top:90px;
}

.MVtitle{
	padding-left:95px;
	width:20%;
	height:auto;
}


.name{
	font-weight:bold;
	font-size:24px;
	bottom:15%;
	right:8%;
	position:absolute;
	font-weight:bold;
}

.profile{
	margin-top:150px;
	position:relative;
	display:grid;
	grid-template-rows:85px  1fr;
	grid-template-columns:615px 1fr;

}

h2{
	font-size:26px;
	left:100px;
	padding-top:30px;
	font-weight:bold;
	text-decoration:underline;
	text-underline-offset:9px;
	z-index:1;
}

.profiletaitle{
	position:absolute;
	z-index:1;
}

.proname{
	text-align:left;
	grid-row:1/2;
	grid-column:2/3;
	padding-top:55px;
}	

.shokai{
	line-height:1.5;
	text-align:left;
	grid-row:2/3;
	grid-column:2/3;
	padding-right:100px;
}	

.HPLP{
	background-image:url(images/tukuttaback.jpg);
	background-repeat:no-repeat;
	margin-top:300px;
}	

.tukuttataitle{
	position:absolute;
	z-index:1;
	margin-top:200px;
}

.midashi{
	padding-top:25px;
	padding-left:100px;
}

.midashi span{
	font-weight:bold;
	background-color:#fff;
	border:solid 2px;
	padding: 0.5em 1em;
	position:absolute;
	z-index:1;
}

.LPbox{
	display:flex;
    margin-bottom: 58px;
	justify-content: space-around;
	margin-top:70px;
}

.LPbox img{
	width:auto;
	height:400px;
}

.LPbox a{
	text-decoration:none;
}

.LPbox p,.bagerbun p,.matchingbun p,.apribun p{
	font-weight:bold;
}

.banner{
	margin-bottom:230px;
	background-image:url(images/bannerback.jpg);
	background-repeat:no-repeat;
}

.bannergazou{
	margin-top:150px;
	position:relative;
	display:grid;
	grid-template-rows:110px 350px 1fr;
	grid-template-columns:480px 395px 1fr;
	z-index:1;
}

.bannermidashi{
	padding-left:80px;
	padding-top:50px;
	grid-row:1/2;
	grid-column:1/2;
}

.bannermidashi span{
	border:solid 2px;
	padding: 0.5em 1em;
	font-weight:bold;
	background-color:#fff;
	position:absolute;
	z-index:1;
}

.bagergazou{
	padding-left:80px;
	padding-bottom:0;
	grid-row:2/3;
	grid-column:1/2;
}

.bagerbun{
	text-decoration:none;
	padding-left:80px;
	grid-row:3/4;
	grid-column:1/2;
}

.matchinggazou{
	padding-bottom:0;
	grid-row:2/3;
	grid-column:2/3;
}

.matchingbun{
	text-decoration:none;
	grid-row:3/4;
	grid-column:2/3;
}


.fammgazou{
	padding-left:15px;
	padding-bottom:0;
	grid-row:2/3;
	grid-column:3/4;
	height:320px;
	width:auto;
	border:5px solid #e0e4f8;
}

.fammbun{
	text-decoration:none;
	font-weight:bold;
	grid-row:3/4;
	grid-column:3/4;
}

.bannerback{
	position:absolute;
	z-index:0;
}

footer{
	background-color: #dfe4f6;
	padding:40px;
	text-align:center;
}

a{
	transition-duration:.3S;
	line-height:1.5em;
}

a:hover{
	transform:scale(1.1);
}



/*ここからタブレットサイズ（画面の横幅が560px〜959px）*/

@media screen and (max-width: 959px){
	
header{
	height:450px;
	width:100%;	
}
	
header img{
	width:40%;
}

h1{
	font-size:18px;
}		

.profile img{	
	width:65%;
}	
	
.profile{
	display:block;
	position:relative;
	margin-top:150px;
}	
	
.proname{
	padding-left:100px;	
	position:absolute;
	margin-top:-160px;
}	
	
.shokai{
	width:80%;
	padding-left:100px;
}		
	
.HPLP{	
	margin:30px 0;
	padding-bottom:50px;	
	background-repeat:repeat;
}		
	
.tukuttataitle, .midashi, .bannergazou, .bannermidashi, .bagergazou, .matchinggazou, .fammgazou{
	display:block;
	position:static;
}	
	
.tukuttataitle{
	margin-left:100px;
	margin-top:80px;
}
	
	
.LPbox p, .banner p{
	text-align:center;
	margin-left:30px;
}	
	
.LPbox{
	display: block;	
	text-align:center;
}	
	
.LPbox img{
	margin-top:70px;
	width:500px;
	height:auto;
	margin-bottom:20px;
}	

.banner{
	margin-bottom:150px;
}
		
.bannermidashi{
	margin-bottom:50px;	
	margin-left:20px;
	}	
	
.banner img{
	width:400px;
	height:auto;
	margin:0 auto;
	margin-top:70px;
	}
	
.bagergazou{
	padding-left:0px;	
	}	

}




/*ここからSPサイズ（画面の横幅が559pxまで）*/

@media screen and (max-width: 559px){
	
header{
	height:320px;	
}
	
header img{
	width:50%;
}	
	
h1{
	font-size:16px;
	padding-left:50px;
	padding-top:30px;
}

.MVtitle,.midashi{
	padding-left:50px;
}

.name{
	font-size:20px;
}	
	
h2{
	font-size:20px;
	left:50px;
}	
	
.profile{
	display:block;
	position:relative;
	margin-top:100px;
	}
	
.profile img{
	width:85%;
}	
	
.proname{
	padding-left:50px;	
	position:absolute;
	margin-top:-220px;
}	
	
.shokai{
	width:80%;
	padding-left:50px;
}	
	
	
.HPLP{	
	margin:30px 0;
	padding-bottom:50px;	
	background-repeat:repeat;
	}	
	
.HPLP, .tukuttataitle,.fammygazou, .yogagazou, .bagergazou, .matchinggazou, .fammgazou{
	display:block;
	position:static;
}		
	
.tukuttataitle{
	margin-left:50px;	
}
	
.LPbox img{
	margin:0 auto;
	margin-top:70px;
	width:400px;
	height:auto;
	margin-bottom:20px;
}			
	
.banner{
	margin-bottom:150px;	
}
	
.HPLP a, .HPLP p, .banner p, .banner a,{
	text-align:center;
}			
	
.bannergazou img{
	padding-top:30px;
	width:350px;
	height:auto;
	margin:0 auto;
}		

.fammgazou{
	border:none;
}		
		
	
}