@charset "utf-8";

/*メモ*/

/*メディアクエリは768pxはスマホ769pxはPC*/
/*PCはhover、スマホはactive*/


/*googleフォント*/


/*googleフォントここまで*/

/*ここから全体*/
body {
	//width: 100vw;
	/*↑必要なら入れる*/
	font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
}


h1,
h2,
h3,
h4,
h5,
th {
	font-weight: normal;
}

p {
	font-size: 75%;
}

h2 {
	font-size: 100%;
}

h3 {
	font-size: 95%;
}

h4 {
	font-size: 90%;
}

@media(min-width: 769px) {
	p {
		font-size: 86.5%;
	}

	h2 {
		font-size: 120%;
	}

	h3 {
		font-size: 100%;
	}

	h4 {
		font-size: 95%;
	}
}

.text_right {
	text-align: right;
}

.text_left {
	text-align: left;
	margin-top: 2em;
}

.text_center {
	text-align: center;
}

.top_border {
	border-top: 1px solid #cccccc;
}

/*PCオンリーの時*/

/*スマホオンリーの時*/
@media (min-width: 769px) {
	.sp_only {
		display: none !important;
	}
}

@media (max-width: 768px) {
	.pc_only {
		display: none !important;
	}
}


/*リンク*/
a {
	color: black;
	text-decoration: none;
}

/*フェードイン用*/
.fadeIn {
	animation-name: fadein;
	animation-duration: 2s;
	//animation-iteration-count: infinite;
}

@keyframes fadein {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/*フェードインここまで*/



/*header*/
/*ヘッダーヒーローイメージ*/
/*@media (max-width:768px) {
	body:before {
		content: "";
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -10;
		width: 100%;
		height: 100vh;
		background: url(../images/sp_top.jpg) center no-repeat;
		background-position: top left;
		background-size: cover;
	}
}*/

/*背景色付ける*/
@media (max-width:768px) {

	nav,
	main,
	article {
		background-color: white;
	}
}


header {
	height: 700px;
	/*↑スマホ用*/
	background-image: url(../images/sp_top.jpg);
	background-size: cover;
	text-align: center;
}


.hero_img {
	//background-color: rgba(255,200,0,0.5);
	padding-top: 15vh;
	text-align: center;
}


/*ロゴ仮置き*/
h1 {
	font-size: 200%;
	color: white;
	font-weight: bold;
	letter-spacing: 0.1em;
	font-family: "メイリオ", sans-serif;
}

/*仮置きここまで*/

/*h1要素のスマホ用*/
@media (max-width: 768px) {
	header h1 {
		width: 98%;
		text-align: center;
		//background-color: rgba(0,100,255,0.5);
		margin: auto;
		position: relative;
		padding-top: 40%;
	}

	header h1 img {
		width: 40vw;
		//background-color: rgba(0,255,200,0.5);
		display: inline-block;
		padding-top: 40%;
		/*真ん中に来ないので左にずらす*/
		margin-left: 0%;
	}

}

/*ヘッダーpc用*/
@media (min-width: 769px) {
	header {
		background-image: url(../images/pc_top.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		height: 700px;
	}

	header h1 {
		position: absolute;
		top: 50%;
		right: 12%;
		font-size: 300%;
	}

	header h1 img {
		width: 100%;
		/*ロゴの大きさは、画像から直す*/
	}
}


/*スマホ用のヘッダー下のアイコン*/

.space {
	background-color: white;
	display: flex;
	border-bottom: 1px solid #cccccc;
}

.space a {
	flex: 1;
	text-align: center;
	font-size: 120%;
	padding: 0.8em;
}

/*PC用のwrapper*/
@media(min-width: 769px) {
	.pc_wrapper {
		//background-color: yellow;
		width: 90%;
		max-width: 960px;
		/*↑1200にするかも*/
		margin: 0 auto;
	}

}

/*メインの文字*/
main {
	font-size: 90%;
	text-align: center;
	padding-top: 1em;
	padding-bottom: 2em;
	border-bottom: 1px solid #cccccc;
}

main p {
	margin-top: 2em;
}


/*pc用main設定*/
@media (min-width: 769px) {
	main {
		font-size: 120%;
		padding-top: 10px;
		border: none;
	}

	main p {
		margin-top: 10px;
	}

	.main_container {
		display: flex;
		text-align: left;
		//margin-top: 5px;
		margin-bottom: 2em;
		padding-top: 5px;
		padding-bottom: 5px;
		justify-content: center;
		align-items: center;
	}

	.main_header .main_left {
		//flex: 1;
		padding: 2em;
	}

	.main_header .main_right {
		flex: 1;
		padding-top: 2em;
	}

	.main_header .main_right img {}

	/* .main_figure {
		flex-wrap: wrap;
		justify-content: space-around;
		flex-grow: 20px;
	}

	.main_figure figure {
		width: 300px;
		//background-color: #0a0a0a;
		text-align: center;
	} */

	.main_footer .main_left {
		flex: 1;
		padding-left: 4em;
	}

	.main_footer .main_right {
		flex: 2;
		padding-left: 2em;
	}

	.main_footer .main_right .right_margin {
		margin-right: 8em;
	}

	/*mainのcustomer_voice*/
	.pc_gray_box {
		display: inline-block;
		width: 80%;
		max-width: 900px;
		line-height: 2;
		padding: 10px;
		padding-top: 12px;
		border: 1px solid #cccccc;
		background-color: #fafafa;
		letter-spacing: 0.1em;
	}

	.pc_gray_box h3 {
		font-size: 80%;
	}

	.pc_gray_box:hover {
		background-color: #333333;
		color: white;
	}

	.pc_gray_box i {
		margin-right: 0.5em;
	}

}


/*main設定ここまで*/

/*共通articleの設定*/
/*h2はモーダル部分の共通*/

article h2,
.modaal-container h2 {
	//font-size: 100%;
	letter-spacing: 0.1em;
	text-align: center;
	//border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	//height: 2em;
	padding-top: 2.3em;
	padding-bottom: 2.1em;
}

@media(min-width:769px) {

	article h2,
	.modaal-container h2 {
		border: none;
	}

	/*PC用のh2見出し*/
	article h2 {
		letter-spacing: 0.1em;
		position: relative;
		/* 位置調整 */
		font-weight: normal;
		/* 文字の太さ調整 */
		display: inline-block;
		/* インラインブロックにする */
		background-color: #fff;
		/* 背景色指定 */
		margin-left: 0;
		/* 周りの余白指定 */
		padding: 0 10px;
		/* 余白指定 */
	}

	article h2 {
		font-size: 120%;
	}

	.border_wrap_h2 {
		position: relative;
		/* 位置調整 */
		margin-bottom: 15px;
		/* 周りの余白指定 */
		//margin-top: 30px;
		margin-top: 4em;
		z-index: -1;
		/*↑これを入れないとモーダル時に不具合*/
	}

	.border_wrap_h2:before {
		content: '';
		/* 空白の要素を作る */
		background-color: #0a0a0a;
		/* 背景色指定 */
		display: block;
		/* ブロック要素にする */
		position: absolute;
		/* 位置調整 */
		left: 0;
		/* 位置調整 */
		width: 100%;
		/* 幅指定 */
		height: 1px;
		/* 高さ指定 */
		top: 0;
		/* 位置調整 */
		bottom: 0;
		/* 位置調整 */
		margin: auto;
		/* 位置調整 */
	}

}



/*メニューのスタイル*/
.menu_link {
	background-color: #fafafa;
	padding-top: 1.6em;
	padding-bottom: 1.4em;
	text-align: center;
	letter-spacing: 0.1em;
}

.menu_link h3 i {
	margin-right: 0.5em;
}

/*PCはhover*/
@media (min-width:769px) {
	.menu_link:hover {
		background-color: #333333;
		color: #ffffff;
	}
}

/*スマホはactive*/
@media (max-width: 768px) {
	.menu_link:active {
		background-color: #333333;
		color: #ffffff;
	}
}

/*productへのリンク*/
.product_link {
	background-color: #fafafa;
	border: 1px solid #cccccc;
	padding-top: 0.5em;
	padding-bottom: 0.3em;
	width: 80%;
	margin: auto;
	text-align: center;
	letter-spacing: 0.1em;
	margin-bottom: 2em;
	margin-top: 1em;
}

.product_link p {
	font-size: 90%;
}

.product_link i {
	margin-right: 0.5em;
}

.product_link:active {
	background-color: #333333;
	color: white;
}

@media(min-width: 769px) {
	.product_link {
		max-width: 900px;
		padding-top: 0.8em;
		padding-bottom: 0.5em;
	}

	.product_link:hover {
		background-color: #333333;
		color: white;
	}
}

/*productへのリンクここまで*/


.hair_style {
	border-bottom: 1px solid #cccccc;
}

.customer_voice {
	border-bottom: 1px solid #cccccc;
}

.menu_link h3 {
	font-weight: normal;
	//letter-spacing: 0.1em;
	//font-size: 95%;
}

.menu_link h3 i,
.square_link i {
	margin-right: 0.2em;
}

/*メニューのリンクここまで*/

/*メニューPCスタイルここから*/
@media(min-width: 769px) {

	#menu h2 {
		font-size: 150%;
	}

	.pc_menu_inner {
		//width: 95%;
		//max-width: 940px;
		padding-left: 100px;
		padding-right: 15px;
	}

	.pc_menu_h3,
	.pc_menu_h2 {
		letter-spacing: 0.1em;
		position: relative;
		/* 位置調整 */
		font-weight: normal;
		/* 文字の太さ調整 */
		display: inline-block;
		/* インラインブロックにする */
		background-color: #fff;
		/* 背景色指定 */
		margin-left: 0px;
		/* 周りの余白指定 */
		padding: 0 10px;
		/* 余白指定 */
	}

	#menu .pc_menu_h3 {
		font-size: 120%;
	}

	.border_wrap {
		position: relative;
		/* 位置調整 */
		margin-bottom: 15px;
		/* 周りの余白指定 */
	}

	.border_wrap:before {
		content: '';
		/* 空白の要素を作る */
		background-color: #cccccc;
		/* 背景色指定 */
		display: block;
		/* ブロック要素にする */
		position: absolute;
		/* 位置調整 */
		left: 0;
		/* 位置調整 */
		width: 100%;
		/* 幅指定 */
		height: 1px;
		/* 高さ指定 */
		top: 0;
		/* 位置調整 */
		bottom: 0;
		/* 位置調整 */
		margin: auto;
		/* 位置調整 */
	}

	#menu dl {
		padding: 5px;
		overflow: hidden;
	}

	dt {
		float: left;
		//width:600px;
		//flex:2;
		width: 600px;
		padding-left: 2em;
		margin-top: 5px;
		margin-bottom: 5px;
	}

	dd {
		float: left;
		//width: 300px;
		width: 200px;
		text-align: right;
		margin-top: 5px;
		margin-bottom: 5px;
	}

	/*↓これがないとｈ３不具合発生*/
	.pc_color {
		margin-top: 15px;
	}

}

/*メニューPCスタイルここまで*/

/*スタッフPCメニューここから*/
@media (min-width: 769px) {
	#staff h2 {
		font-size: 150%;
	}

	.pc_staff_inner {
		padding-left: 100px;
		padding-right: 15px;
	}

	.pc_staff figure {
		display: flex;
		justify-content: space-around;
		margin-top: 15px;
		margin-bottom: 15px;
	}

	.staff_figure_left {
		flex: 1;
		//width: 200px;
		/*↑仮*/
		//height: 200px;
		/*↑仮*/
		//background-color: gray;
		//justify-content: center;
		text-align: center;
	}

	.staff_figure_left img {
		max-width: 200px;
}

	.staff_figure_right {
		flex: 2;
		//padding-left: 2em;
	}

	.pc_staff p {
		font-size: 90%;
		line-height: 2;
	}
}

/*スタッフPCメニューここまで*/

/*インスタ部分のスタイル*/
@media(max-width: 768px) {
	.gray_color {
		background-color: #fafafa;
	}
}

.insta {
	//border-top: 1px solid #cccccc;
	text-align: center;
	letter-spacing: 0.1em;
	padding: 1.2em;
	padding-bottom: 2em;
}

.insta_p {
	font-size: 80%;
	line-height: 1.2;
}

.insta_link {
	text-align: center;
	font-size: 90%;
	letter-spacing: 0.1em;
	padding-top: 0.7em;
}

@media(min-width: 769px){
	.insta_link {
		font-size: 1rem;
	}

	.under{
		font-size: 1rem;
	}
}

.under {
	border-bottom: 1px solid #333333;
	padding-bottom: 0.3em;
}

@media(max-width: 768px) {
	.insta_link a:active {
		background-color: #cccccc;
	}
}

@media(min-width: 769px) {
	.insta_link a:hover {
		background-color: #cccccc;
	}
}

/*お店のロゴ*/
.logo {
	border-top: 1px solid #cccccc;
	background-color: #fafafa;
	text-align: center;
	border-bottom: 1px solid #cccccc;
	padding-top: 2em;
}

/*ロゴの所のホットペッパーのリンク*/
/*リクルートの所と同じ資格のところ*/
@media (max-width: 768px) {

	.logo a,
	#recruit a {
		display: inline-block;
		font-size: 95%;
		margin: 1.5em auto;
		text-align: center;
		width: 95%;
		background-color: #ffffff;
		border: 1px solid #cccccc;
		padding-top: 0.8em;
		padding-bottom: 0.7em;
		letter-spacing: 0.1em;
		//vertical-align: middle;
	}
}

@media(max-width: 768px) {

	.logo a:active,
	#recruit a:active {
		background-color: #333333;
		color: white;
	}
}

@media(min-width: 769px) {

	.logo a:hover,
	#recruit a:hover {
		background-color: #333333;
		color: white;
	}
}

#recruit a i {
	margin-right: 0.5em;
}

.logo a .square_link,
#recruit a .square_link {
	font-size: 95%;
}

/*PCサロンページここから*/
.pc_salon h2 {
	font-size: 150%;
}

.pc_salon_inner {
	padding-left: 100px;
	padding-right: 15px;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.pc_salon_inner figure {
	flex: 1;
	flex-basis: 360px;
	padding: 5px;
}

.pc_salon_inner figure img {
	width: 100%;
}

.pc_salon_inner .pc_salon_left {
	flex: 1;
	//background-color: gray;
	height: 300px;
	/*高さは仮*/
	//padding: 5px;
}

.arona_logo_size img {
	width: 80%;
}

.pc_salon_inner .pc_salon_right {
	flex: 2;
	padding-left: 2em;
	padding-top: 3em;
}

.pc_salon_right p {
	font-size: 100%;
	line-height: 2;
}

.pc_salon_right .pc_gray_box {
	text-align: center;
	width: 500px;
	min-width: 500px;
	margin: auto;
	margin-top: 15px;
}

/*PCサロンページここまで*/

/*リクルートページここから*/
#recruit {
	text-align: center;
	padding-top: 1.5em;
	padding-bottom: 3em;
}

#recruit h2 {
	border-bottom: none;
	//height: auto;
}

.setsumei {
	text-align: left;
}

@media(max-width: 768px) {
	.setsumei {
		width: 80%;
		margin: auto;
	}
}

/*PCリクルートここから*/
@media(min-width:769px) {
	#recruit {
		text-align: left;
	}

	#recruit h2 {
		font-size: 150%;
		text-align: left;
	}

	.setsumei {
		padding-left: 100px;
		padding-right: 15px;
	}

	.setsumei p {
		font-size: 100%;
	}


	.setsumei .pc_only .recruit_box {
		display: inline-block;
		width: 80%;
		border: 1px solid #cccccc;
		background-color: #fafafa;
		padding-top: 15px;
		padding-bottom: 10px;
		min-width: 500px;
		margin: auto;
		text-align: center;
		margin-top: 15px;
		margin-bottom: 15px;
		letter-spacing: 0.1em;
	}

	.top_margin {
		margin-top: 1.8em;
	}
}

/*PCリクルートここまで*/

/*ヘア写真ここから*/

	.hair_photo_flex {
		display: flex;
		/* background-color: orange; */
		justify-content: stretch;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.hair_photo_flex figure{
		margin: 0.1rem 0.2rem 0.1rem 0.2rem;
	}

	/* .hair_photo_flex figure:first-child{
		margin-left: 0;
	}

	.hair_photo_flex figure:last-child{
		margin-right: 0;
	} */

	.hair_photo_flex img{
		width: 150px;
		height: 150px;
		/* width: calc((100% - 1rem));
		height: auto; */

		object-fit: cover;
		text-align: center;
		padding: 0px 5px 5px 0px;
		/* margin: 0px 5px 5px 0px; */
	}

	.hair_photo_grid img:nth-child(1){
		width: 210px;
		height: 210px;
		/* width: calc(100% - 1rem);
		height: auto; */

		margin-bottom: 10px;
		object-fit: cover;
	}

	.hair_photo h2{
		border-bottom: none;
	}

	/*pc版のヘア写真*/
	.hair_photo_grid {
		width: 100%;
		margin: 0 auto 0 auto;
		padding: 0 0 0 100px;
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 1rem;


		flex-wrap: wrap;
		justify-content: space-around;
		flex-grow: 20px;
}
	.hair_photo_grid figure{
		margin-bottom: -0.5rem;
	}


	/*pc版のヘア写真ここまで*/

/*ヘア写真ここまで*/


/*フッターここから*/
footer {
	background-color: #333333;
	color: white;
	text-align: center;
	padding: 1.2em;
	padding-bottom: 5em;
}

footer h2 {
	font-size: 70%;
}

@media(min-width: 769px) {
	footer h2 {
		font-size: 100%;
	}
}

/*フッターの段落隙間*/
footer p {
	margin: 0.5em;
}

/*スマホ用のフッターは文字が少し小さくなるように*/
@media (max-width: 768px) {
	footer p {
		font-size: 70%;
	}
}

/*隠し文字処理*/
.hide-text {
	color: #333333;
}

footer a {
	color: white;
	display: inline-block;
}

@media(max-width: 768px) {
	footer a:active {
		opacity: 0.7;

	}
}

@media(min-width: 769px) {
	footer a:hover {
		opacity: 0.7;
	}

}

.footer_container {
	display: flex;
	padding-top: 2em;
	padding-bottom: 1.5em;
}

.footer_left {
	flex: 1;
}

.footer_right {
	flex: 1;
}

.insta_icon {
	font-size: 200%;
}

/*PCフッターここから*/
@media(min-width: 769px) {
	.footer_container {
		width: 960px;
		margin: auto;
	}

	.footer_left,
	.footer_right {
		text-align: left;
	}

	.footer_left p,
	.footer_right p {
		font-size: 100%;
		line-height: 1.2;
	}

	.sukima {
		margin-left: 1em;
	}

	.text-indent {
		text-indent: 4.5em;
	}
}

/*PCフッターここまで*/