@charset "utf-8";
/* CSS Document */
/* トップ */
div.topbox {
	width:100%;
	height:115vh;
	background: url(../images/index/about_title_pc.png) no-repeat, url(../images/index/top_bg.jpg) no-repeat;
	background-position: left 15vw bottom 0, right 0 bottom 0;
	background-size: auto 15vh, 70% 64vh;
	position: relative;
}
	div.topimg01_pc {
		width:44.49%;
		height:75vh;
		position: absolute;
		left:0;
		top:0;
		z-index: 10;
	}
	div.topbox div.topimg02_pc {
		width:44.57vw;
		height:85vh;
		background: url(../images/index/top_img2_pc.webp) no-repeat;
		background-size: cover;
		background-position: center center;
		position: absolute;
		right:0;
		top:15vh;
		z-index: 10;
	}
	div.topbox div.topimg02_sp { display: none;}
	div.topbox div.message_pc {
		width:317px;
		height:109px;
		background: url(../images/index/top_message_pc.png) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		left:50%;
		top:27vh;
		z-index: 10;
	}
	div.topbox div.message_sp { display: none; }
	div.topbox div.scrollbox {
		width: 1px;
		height:80px;
		position: absolute;
		right:50px;
		bottom: 20vh;
		z-index: 20;
		overflow: hidden;
	}
		div.topbox div.scrollbox div.scrollbtn {
			width:1px;
			height:80px;
			background: #fff;
		}
			div.topbox div.scrollbox div.scrollbtn div.scrolldown1 {
				/*描画位置※位置は適宜調整してください*/
				position:absolute;
				left:0px;
				top:0px;
				/*全体の高さ*/
				height:80px;
			}
			/* 線の描写 */
			div.topbox div.scrollbox div.scrollbtn div.scrolldown1::after{
				content: "";
				/*描画位置*/
				position: absolute;
				top: -80px;
				/*線の形状*/
				width: 1px;
				height: 80px;
				background: #000;
				/*線の動き1.4秒かけて動く。永遠にループ*/
				animation: pathmove 2s ease-in-out infinite;
			}
			/*高さ・位置・透過が変化して線が上から下に動く*/
			@keyframes pathmove{
				0%{
					top:-100px;
				}
				100%{
					top:120px;
				}
			}
	div.topbox div.menubox {
		width:100%;
		height:20px;
		box-sizing: border-box;
		padding-left: 10vw;
		position: absolute;
		left:0;
		bottom: 25vh;
		z-index: 20;
	}
		div.topbox div.menubox a {
			text-decoration: none;
			color: #a0a0a0;
			font-size: 16px;
			margin: 0 30px;
			letter-spacing: 1px;
		}
	div.topbox a#about {
		position: absolute;
		bottom: 25vh;
	}
/* about */
div.abountbox {
	width:80vw;
	margin: 50px auto 0 auto;
	box-sizing: border-box;
	padding-left: 8vw;
}
	div.abountbox h2 {
		line-height: 26px;
		font-size: 16px;
		color: #000;
		letter-spacing: 1px;
	}
	div.abountbox p {
		line-height: 24px;
		font-size: 14px;
		color: #000;
		margin: 40px auto 0 auto;
		letter-spacing: 1px;
	}
		div.abountbox p span.pcbr { display: block; }
/* スタイル */
div.stylebox {
	width:100%;
	height:140vw;
	margin: 100px auto 0 auto;
	box-sizing: border-box;
	background: url(../images/index/top_bg.jpg) no-repeat;
	background-size: 68.77vw 117.04vw;
	background-position: left bottom;
	position: relative;
	padding-top: 45vw;
}
	div.stylebox div.styleimg01_pc {
		width:55.27vw;
		height:28.05vw;
		position: absolute;
		top:0;
		left:0;
	}
	div.stylebox div.styleimg02_pc {
		width:32.42vw;
		height:31.07vw;
		position: absolute;
		top:8.67vw;
		left:46.75vw;	
	}
	div.stylebox div.imgbox {
		width:54.67vw;
		margin: 0 auto;
	}
	div.stylebox div.imgbox h2 {
		color: #fff;
		font-size: 24px;
		letter-spacing: 2px;
	}
		div.stylebox div.imgbox h2 span {
			display: block;
			margin: 10px auto 3.54vw auto;
			color: #d5d5d5;
			font-size: 14px;
			letter-spacing: 1px;
		}
	div.stylebox div.imgbox a.btn {
		display: block;
		width: 24.73vw;
		height:24.73vw;
		float: left;
		margin-bottom: 0.75vw;
	}
	div.stylebox div.imgbox a.btn:nth-of-type(even) { float: right;}
	div.stylebox div.imgbox a.morebtn {
		display: inline-block;
		text-decoration: none;
		color: #d5d5d5;
		letter-spacing: 2px;
		font-size: 16px;
		padding-bottom: 3px;
		border-bottom: #d5d5d5 1px solid;
		margin-top: 3.5vw;
	}
/* salon */
div.salonbox { margin: 75px auto 0 auto; }
	div.salonbox h2 {
		display: block;
		text-align: center;
		color: #000;
		font-size: 24px;
		letter-spacing: 2px;
	}
	div.salonbox div.salonbox02 {
		width:100%;
		height:100vw;
		/*height:105.58vw;*/
		position: relative;
		margin: 75px auto 0 auto;
	}
		div.salonbox div.salonbox02 div.salonimg01_pc {
			width:69.90vw;
			height:40.72vw;
			position: absolute;
			right:0;
			top:0;
		}
		div.salonbox div.salonbox02 div.salonimg02_pc {
			width:69.90vw;
			height:40.72vw;
			position: absolute;
			left:0;
			top:49.77vw;;	
		}
		div.salonbox div.salonbox02 div.salonmessage01 {
			width:35.44vw;
			height:35.44vw;
			background: #fff;
			box-sizing: border-box;
			padding: 6.78vw 4.52vw 0 4.52vw;
			position: absolute;
			left:15vw;
			top:10vw;
		}
		div.salonbox div.salonbox02 div.salonmessage02 {
			width:35.44vw;
			height:35.44vw;
			background: #fff;
			box-sizing: border-box;
			padding: 6.78vw 4.52vw 0 4.52vw;
			position: absolute;
			right:15vw;
			top:59.77vw;
		}
		div.salonbox div.salonbox02 h3 {
			font-size: 16px;
			line-height: 26px;
			color: #000;
		}
		div.salonbox div.salonbox02 p {
			font-size: 14px;
			line-height: 24px;
			color: #000;
			margin-top: 25px;
		}
/* salombのリンク */
div.salombbox {
	margin:0 auto 80px auto;
	text-align: center;
}
	div.salombbox h2 {
		font-size: 16px;
	}
	div.salombbox p {
		font-size: 14px;
		margin: 30px auto 0 auto;
	}
	div.salombbox a.banner {
		display: block;
		width:442px;
		height:188px;
		background: url(../images/index/salomb_pc.webp) no-repeat;
		background-size: 100% 100%;
		margin: 30px auto 0 auto;
	}
/* news */
div.newsbox {
	width:100%;
	margin: 75px auto 0 auto;
	box-sizing: border-box;
	padding: 60px 0;
	background: url(../images/index/news_bg_pc.webp) no-repeat;
	background-size: cover;
	background-position: center center;
}
	div.newsbox h2 {
		display: block;
		text-align: center;
		color: #fff;
		font-size: 24px;
		letter-spacing: 2px;
	}
	div.newsbox div.newslistbox {
		width:760px;
		min-height:225px;
		margin: 60px auto 0 auto;
	}
		div.newsbox div.newslistbox a.list {
			display: block;
			height:40px;
			line-height: 20px;
			text-decoration: none;
			color: #fff;
			margin-bottom: 35px;
			border-bottom: #fff 1px solid;
			box-sizing: border-box;
			padding: 0 50px;
			font-size: 14px;

		}
			div.newsbox div.newslistbox a.list span { 
				height:40px;
				display: inline-block;
				font-size: 14px;
				vertical-align: top;
			}
			div.newsbox div.newslistbox a.list span.date {
				width:100px;
			}
			div.newsbox div.newslistbox a.list span.title {
				width:550px;
				overflow: hidden;
				text-overflow: ellipsis;   /* 溢れた部分を「...」にする */
				white-space: nowrap; 
			}
		div.newsbox div.newslistbox p.nodata {
			font-size: 14px;
			color: #fff;
		}
		div.newsbox div.newslistbox a.morebtn {
			display: block;
			width:70px;
			height:70px;
			border: #fff 1px solid;
			border-radius: 45px;
			line-height: 70px;
			text-align: center;
			text-decoration: none;
			color: #fff;
			font-size: 16px;
			margin: 60px auto 0 auto;
		}
/* アクセス */
div.accessbox {
	margin: 75px auto 0 auto;
}
	div.accessbox h2 {
		display: block;
		text-align: center;
		color: #000;
		font-size: 24px;
		letter-spacing: 2px;
	}
		div.accessbox h2 span {
			display: block;
			margin: 10px auto 0 auto;
			color: #000;
			font-size: 14px;
			letter-spacing: 1px;
		}
	div.accessbox iframe {
		display: block;
		width:720px;
		height:350px;
		margin: 60px auto 0 auto;
	}
	div.accessbox div.infobox {
		width:720px;
		margin: 45px auto 45px auto;
	}
		div.accessbox div.infobox p {
			width:50%;
			float: left;
			font-size: 14px;
			line-height: 24px;
			color: #000;
			letter-spacing: 0.5;
		}
			div.accessbox div.infobox p a {
				text-decoration: none;
				color: #000;
				font-size: 14px;
			}