@charset "utf-8";
/* CSS Document */
/* トップ */
div.topbox {
	width:100%;
	height:255.55vw;
	background: url(../images/index/about_title_sp.png) no-repeat, url(../images/index/top_bg.jpg) no-repeat;
	background-position: left bottom 0, right 0 bottom 9.5vw;
	background-size: auto 15vh, 100% 153.33vw;
	position: relative;
}
	div.topimg01_sp {
		width:77.08%;
		height:123.88vw;
		position: absolute;
		left:0;
		top:0;
		z-index: 10;
	}
	div.topbox div.topimg02_pc { display: none;}
	div.topbox div.topimg02_sp {
		width:81.94vw;
		height:68.61vw;
		background: url(../images/index/top_img2_sp.webp) no-repeat;
		background-size: cover;
		background-position: center center;
		position: absolute;
		right:0;
		top:142.5vw;
		z-index: 10;
	}
	div.topbox div.message_pc { display: none; }
	div.topbox div.message_sp {
		width:60.83vw;
		height:24.02vw;
		background: url(../images/index/top_message_sp.png) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		right:5.55vw;
		top:54.16vw;
		z-index: 10;
	}
	div.topbox div.scrollbox {
		width: 1px;
		height:24.30vw;
		position: absolute;
		right:10.41vw;
		top: 104.16vw;
		z-index: 20;
		overflow: hidden;
	}
		div.topbox div.scrollbox div.scrollbtn {
			width: 1px;
			height:24.30vw;
			background: #fff;
		}
			div.topbox div.scrollbox div.scrollbtn div.scrolldown1 {
				/*描画位置※位置は適宜調整してください*/
				position:absolute;
				left:0px;
				top:0px;
				/*全体の高さ*/
				height:24.30vw;
			}
			/* 線の描写 */
			div.topbox div.scrollbox div.scrollbtn div.scrolldown1::after{
				content: "";
				/*描画位置*/
				position: absolute;
				top: -100vw;
				/*線の形状*/
				width: 1px;
				height:24.30vw;
				background: #000;
				/*線の動き1.4秒かけて動く。永遠にループ*/
				animation: pathmove 2s ease-in-out infinite;
			}
			/*高さ・位置・透過が変化して線が上から下に動く*/
			@keyframes pathmove{
				0%{
					top:-24.30vw;;
				}
				100%{
					top:48.60vw;;
				}
			}
	div.topbox div.menubox { display: none; }
	div.topbox a#about {
		position: absolute;
		bottom:15vh;
	}
/* about */
div.abountbox {
	width:90%;
	margin: 30px auto 0 auto;
}
	div.abountbox h2 {
		line-height: 26px;
		font-size: 16px;
		color: #000;
		letter-spacing: 1px;
	}
	div.abountbox p {
		line-height: 21px;
		font-size: 14px;
		color: #000;
		margin: 20px auto 0 auto;
		letter-spacing: 1px;
	}
		div.abountbox p span.pcbr { display: block; }
/* スタイル */
div.stylebox {
	width:100%;
	margin: 20vw auto 0 auto;
	box-sizing: border-box;
	background: url(../images/index/top_bg.jpg) no-repeat;
	background-size: 100% 100%;
	background-position: left top 65vw;
	position: relative;
	padding: 113.88vw 0 14.58vw;
}
	div.stylebox div.styleimg01_sp {
		width:69.02vw;
		height:69.72vw;
		position: absolute;
		top:0;
		left:0;
	}
	div.stylebox div.styleimg02_sp {
		width:59.72vw;
		height:57.22vw;
		position: absolute;
		top:41.66vw;
		right:0;	
	}
	div.stylebox div.imgbox {
		width:100%;
		margin: 0 auto;
	}
	div.stylebox div.imgbox h2 {
		display: block;
		text-align: center;
		color: #fff;
		font-size: 20px;
		letter-spacing: 2px;
	}
		div.stylebox div.imgbox h2 span {
			display: block;
			margin: 1.6vw auto 11.94vw auto;
			color: #d5d5d5;
			font-size: 14px;
			letter-spacing: 1px;
		}
	div.stylebox div.imgbox a.btn {
		display: block;
		width: 45.55vw;
		height: 45.55vw;
		float: left;
		margin-bottom: 2vw;
	}
	div.stylebox div.imgbox a.btn:nth-of-type(even) { float: right;}
	div.stylebox div.imgbox a.morebtn {
		display: block;
		width:20.83vw;
		height:20.83vw;
		background: #333334;
		border-radius: 20vw;
		text-decoration: none;
		text-align: center;
		line-height: 20.83vw;
		color: #fff;
		letter-spacing: 1px;
		font-size: 3.33vw;
		margin: 12.5vw auto 0 auto;
	}
/* salon */
div.salonbox { margin: 24.44vw auto 0 auto; }
	div.salonbox h2 {
		display: block;
		text-align: center;
		color: #000;
		font-size: 20px;
		letter-spacing: 2px;
	}
	div.salonbox div.salonbox02 {
		width:100%;
		margin: 24.44vw auto 0 auto;
	}
		div.salonbox div.salonbox02 div.salonimg01_sp {
			width:86.52vw;
			height:65.69vw;
		}
		div.salonbox div.salonbox02 div.salonimg02_sp {
			width:86.52vw;
			height:65.69vw;
			margin-top: 24.44vw;
		}
		div.salonbox div.salonbox02 div.salonmessage01 {
			width:84%;
			margin: 24.44vw auto 0 auto;
		}
		div.salonbox div.salonbox02 div.salonmessage02 {
			width:84%;
			margin: 24.44vw auto 0 auto;
		}
		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:80px 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:90vw;
		height:38vw;
		background: url(../images/index/salomb_sp.webp) no-repeat;
		background-size: 100% 100%;
		margin: 30px auto 0 auto;
	}
/* news */
div.newsbox {
	width:100%;
	margin: 24.44vw auto 0 auto;
	box-sizing: border-box;
	padding: 12.5vw 0;
	background: url(../images/index/news_bg_sp.webp) no-repeat;
	background-size: cover;
	background-position: center center;
}
	div.newsbox h2 {
		display: block;
		text-align: center;
		color: #fff;
		font-size: 20px;
		letter-spacing: 2px;
	}
	div.newsbox div.newslistbox {
		width:90%;
		margin: 12.5vw auto 0 auto;
	}
		div.newsbox div.newslistbox a.list {
			display: block;
			line-height: 20px;
			text-decoration: none;
			color: #fff;
			margin-bottom: 10px;
			border-bottom: #fff 1px solid;
			box-sizing: border-box;
			padding: 0 10px 15px 10px;
			font-size: 14px;

		}
			div.newsbox div.newslistbox a.list span { 
				display: block;
				height:20px;
				display: inline-block;
				font-size: 14px;
				vertical-align: top;
			}
			div.newsbox div.newslistbox a.list span.date {}
			div.newsbox div.newslistbox a.list span.title {
				width:100%;
				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:20.83vw;
			height:20.83vw;
			background: #333334;
			border-radius: 20vw;
			text-decoration: none;
			text-align: center;
			line-height: 20.83vw;
			color: #fff;
			letter-spacing: 1px;
			font-size: 3.33vw;
			margin: 12.5vw auto 0 auto;
		}
/* アクセス */
div.accessbox {
	margin: 24.44vw auto 0 auto;
}
	div.accessbox h2 {
		display: block;
		text-align: center;
		color: #000;
		font-size: 20px;
		letter-spacing: 2px;
	}
		div.accessbox h2 span {
			display: block;
			margin: 3.33px auto 0 auto;
			color: #000;
			font-size: 14px;
			letter-spacing: 1px;
		}
	div.accessbox iframe {
		display: block;
		width:100%;
		height:88.33vw;
		margin: 19.44vw auto 0 auto;
	}
	div.accessbox div.infobox {
		width:82%;
		margin: 14.58vw auto 36.80vw auto;
	}
		div.accessbox div.infobox p {
			width:100%;
			font-size: 14px;
			line-height: 24px;
			color: #000;
			letter-spacing: 0.5;
		}
		div.accessbox div.infobox p.info02 { margin-top:24px; }
			div.accessbox div.infobox p a {
				text-decoration: none;
				color: #000;
				font-size: 14px;
			}