@charset "UTF-8";

@import "../../../files/css/common/layout.css";

/*-------------------------------------------------------------------------
	Main Image
/*-----------------------------------------------------------------------*/
#main-image {
	background-image:url(../img/main_about2.jpg);
}

/*-------------------------------------------------------------------------
	Sub Image
/*-----------------------------------------------------------------------*/
html {
  overflow: hidden;
}

body {
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

#sub-image {
	position:relative;
	width: 100%;
	height: 300px;
	box-sizing: border-box;
	background: url(../img/sub.jpg) no-repeat;
	transform-style: inherit;
	background-attachment: fixed;
	background-size:100%;
}

	#sub-image h4 {
		position: absolute;
		top: 50%;
		width: 100%;
		font-size:30px;
		font-weight: normal !important;
	}

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

	#sub-image {
		height: 240px;
		font-size:18px;
		background-attachment: scroll;
	}

}

/*-------------------------------------------------------------------------
	Main Content
/*-----------------------------------------------------------------------*/
#main-content {
}

	#main-content .section {
		padding:60px 0;
	}

	#main-content .section#lead {
		padding-top:0;
	}

	#main-content .section#concept {
		color:#fff;
		background:#0e2c59;
	}

	#main-content .section#welcome {
		padding-bottom:0;
	}

		#main-content .section .text,
		#main-content .section .img {
			width:460px;
		}

		#main-content .section .text {
			line-height: 28px;
			letter-spacing: 0.15em;
		}

		#main-content .section .text p.btn{ line-height: 28px; letter-spacing: 0.15em; width: 50%; text-align: center; margin-top: 30px; }
		#main-content .section .text p.btn a { display: block; padding: 10px; background-color: #0d2d5a; color: #FFF; }

		#main-content .section:nth-child(odd) .text,
		#main-content .section:nth-child(even) .img {
			float:right;
		}

		#main-content .section:nth-child(even) .text,
		#main-content .section:nth-child(odd) .img {
			float:left;
		}

		#main-content .section .text h3 {
			margin-bottom:20px;
			text-align:center;
			font-size:30px;
			color: #fff !important;
		}

			#main-content .section .text h3 img {
				max-width:260px;
			}

			#main-content .section .text p span {
				display: block;
				margin-top:20px;
				font-size:18px;
			}
			#main-content .section .text table {
				margin-bottom: 30px;
				font-family:'Josefin Sans', sans-serif;
				letter-spacing:0.2em;
			}

			#main-content .section .text table td:first-child {
				padding-right: 30px;
			}


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

	#main-content .section {
		padding:40px 0;
	}

	#main-content .section .text,
	#main-content .section .img {
		float:none;
		width:100%;
	}

	#sub-image h4 {
		font-size:18px;
	}

	#main-content .section .text h3 {
		font-size: 24px;
	}

	#main-content .section .text p span {
		font-size:14px;
		text-align:left;
	}

	#main-content .section .img {
		margin-bottom:30px;
	}

}


/*-------------------------------------------------------------------------
	Staff-Index
/*-----------------------------------------------------------------------*/
#archive {
	/*margin:0 -20px 60px 0;*/
}

	#archive li.staffs {
		position: relative;
		float: left;
		width: 288px;
		min-height:540px;
		padding: 15px 15px 50px 15px;
		margin:0 20px 20px 0;
		border: 1px solid #0e2c59;
	}

	#archive li.staffs:nth-child(3n) {
		margin-right: 0;
	}

		#archive li.staffs p.profile {
			width: 288px;
			height: 400px;
			margin-bottom: 20px;
			overflow: hidden;
		}

			#archive li.staffs p.profile img {
				width: 288px;
				height:auto;
			}

		#archive li.staffs ul.spec {
			margin-bottom: 10px;
			text-align: center;
		}

			#archive li.staffs ul.spec li.position,
			#archive li.staffs ul.spec li.reading {
				font-family:'Josefin Sans', sans-serif;
				letter-spacing:0.2em;
				font-weight: bold;
				color: #0e2c59;
			}

			#archive li.staffs ul.spec li.name {
				font-size: 24px;
			}

		#archive li.staffs .text {
			min-height:160px;
			margin-bottom: 10px;
			float: none!important;
			width: auto;
		}

		#archive li.staffs .other {
			margin-bottom: 20px;
		}

		#archive li.staffs ul.sns {
			position: absolute;
			bottom: 20px;
			left: 35%;
		}

			#archive li.staffs ul.sns li {
				float: left;
			}

			#archive li.staffs ul.sns li.blog a {
				display:inline-block;
				margin-right: 10px;
				padding: 0 15px;
				text-align:center;
				font-size:14px;
				font-weight: bold;
				line-height:30px;
				vertical-align:bottom;
				color:#fff;
				background:#0e2c59;
				font-family:'Josefin Sans', sans-serif;
				letter-spacing:0.2em;
			}

			#archive li.staffs ul.sns li.blog a:hover {
				color:#0e2c59;
				background:#ffff00;
			}

			#archive li.staffs ul.sns li.facebook {
			}

			#archive li.staffs ul.sns li.facebook:hover {
				opacity: .6;
			}

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

	#archive {
		margin:0 0 30px 0;
	}

	#archive li.staffs {
		float: none;
		width: 94%;
		padding: 3% 3% 12% 3%;
		margin:0 0 20px 0;
	}

		#archive li.staffs p.profile {
			width: 100%;
			height: auto;
		}

			#archive li.staffs p.profile img {
				width: 100%;
				height: auto;
			}

}

/*-------------------------------------------------------------------------
	Instagram
/*-----------------------------------------------------------------------*/
	#instagram h2 {
		margin-bottom:30px;
		text-align: center;
		font-size:20px;
		font-weight: bold;
		line-height:60px;
		color: #0e2c59;
		border-top:1px solid #0e2c59;
		border-bottom:1px solid #0e2c59;
	}

		#instagram h2 span {
			margin-left:8px;
			font-size:16px;
		}

	#instagram iframe.wide {
		height: 235px;
	}

	#instagram iframe.narrow {
		display: none;
	}

	#instagram p.more {
		display: inline-block;
		float: right;
		font-family:'Josefin Sans', sans-serif;
		letter-spacing:0.2em;
		font-size: 18px;
		font-weight: bold;
		border-bottom: 1px dotted #000;
	}

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

	#instagram iframe.wide {
		display: none;
	}

	#instagram iframe.narrow {
		display: block;
		min-height: 300px;
	}

}


/*-------------------------------------------------------------------------
	HairStyle-Index
/*-----------------------------------------------------------------------*/
#archive {
}

	#archive li.hairstyles {
		position: relative;
		overflow: hidden;
		float: left;
		width: 320px;
		height: 320px;
		margin:0 20px 20px 0;
		cursor: pointer;
	}

	#archive li.hairstyles:nth-child(3n) {
		margin-right: 0;
	}

		#archive li.hairstyles p.thumb {
			position:relative;
			width: 100%;
		}

			#archive li.hairstyles p.thumb img {
				position:absolute;
				width: auto;
				height: 320px;
				/*left:-80px;*/
			}

		#archive li.hairstyles .info {
			position:absolute;
			text-align: center;
			left:0;
			opacity:0;
			background:rgba(255,255,255,0.6);
			font-family:'Josefin Sans', sans-serif;
			letter-spacing:0.2em;
		}

			#archive li.hairstyles .info ul {
				padding-top: 140px;
			}

				#archive li.hairstyles .info ul li.title {
					font-size: 20px;
				}

				#archive li.hairstyles .info ul li.staff {
					font-size: 14px;
				}

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

	#archive li.hairstyles {
		width: 48%;
		margin:0 4% 10px 0;
	}

	#archive li.hairstyles:nth-child(2n) {
		margin-right: 0;
	}

	#archive li.hairstyles:nth-child(3n) {
		margin:0 4% 10px 0;
	}

}

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

	#archive li.hairstyles {
		height: 160px;
	}

	#archive li.hairstyles .info ul {
		padding-top: 60px;
	}

	#archive li.hairstyles .info ul li.title {
		font-size: 16px;
	}
	#archive li.hairstyles p.thumb img {
		position:absolute;
		width: auto;
		height: 160px;
		/*left:-80px;*/
	}
	#archive li.hairstyles:nth-child(even) {
		margin-right: 0;
	}

	#archive li.hairstyles:nth-child(odd) {
		margin:0 4% 10px 0;
	}
}

/*-------------------------------------------------------------------------
	HairStyle-Single
/*-----------------------------------------------------------------------*/
#article {
	margin-bottom:30px;
}

#article #return {
	display: inline-block;
	font-family:'Josefin Sans', sans-serif;
	letter-spacing:0.2em;
	border-bottom: 1px dotted #000;
}

	#article #return span {
		margin-right: 5px;
		font-size: 10px;
	}

	#article #return a {
		color: #000;
	}

	#article #return a:hover {
		color: #999;
	}

	#article #gallery,
	#article #text {
		float: left;
	}

	#article #gallery {
		width: 600px;
		margin-right: 30px;
	}

    	#article #gallery img {
			width:600px;
			height:auto;
    	}

		#article #gallery ul.thumb {
			margin-bottom: 30px;
		}

			#article #gallery ul.thumb li {
				float: left;
				margin-right: 10px;
				cursor:pointer;
			}

			#article #gallery ul.thumb li:last-child{
				margin-right: 0;
			}

			#article #gallery ul.thumb li,
			#article #gallery ul.thumb li img {
				width: 112px;
				height: 112px;
			}

		#article #gallery ul.img {
			position: relative;
			width: 600px;
		}

			#article #gallery ul.img li {
				opacity:0;
				position:absolute;
				left:0;
				top:0;
				width:100%;
				background:#fff;
			}

			#article #gallery ul.img li:first-child {
				opacity: 1;
			}

				#article #gallery ul.img li img {
				}

	#article #text {
		width: 370px;
		margin-top: 134px;
	}

		#article #text h3,
		#article #text h4 {
			font-family:'Josefin Sans', sans-serif;
			letter-spacing:0.2em;
			font-weight: normal;
		}

			#article #text h3 {
				font-size: 30px;
			}

			#article #text h4 {
				margin-bottom: 20px;
				font-size: 16px;
			}

			#article #text p {
				margin-bottom: 20px;
			}

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

	#article #gallery,
	#article #gallery ul.img,
	#article #gallery ul.img li,
	#article #gallery ul.img li img,
	#article #text {
		float: none;
		width: 100%;
		margin: 0;
	}

		#article #gallery ul.thumb {
			margin-bottom: 10px;
		}

			#article #gallery ul.thumb li {
				width: 19%;
				height: auto;
				margin-right: 1.2%;
			}

				#article #gallery ul.thumb li img {
					width: 100%;
					height: auto;
				}

}

.pagelink li {
	font-size:12px;
	font-family:'Josefin Sans', sans-serif;
	letter-spacing:0.2em;
	font-weight: normal;
}

.pagelink li.next {
	float:left;
}

.pagelink li.prev {
	float:right;
}