@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');

/*-------------- common part --------------*/
body{
}
/*--------------------- intro --------------------*/
#head_contents{
display: flex;        /*** 中の文字を中央に揃えるため ***/
justify-content: center;/*** 中の文字を中央に揃えるため ***/
align-items: center;    /*** 中の文字を中央に揃えるため ***/
}
.intro_fixed_text{/*-- skipの文字 --*/
	position:absolute;
	font-size:1.2em;
	z-index:100;
	top:30px;
	left:30px;
}
.intro_fixed_text a{
	color:#fff;
}
/************** For [Slick] only ************/
/*------ 文字スライドショー ------*/
.large_box_intro{
width:100%;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
    z-index:200;
    position:absolute;
}
.slider_intro{
    opacity: 1;
    transition: opacity .50s linear;
}
.intro_slick_text{
    color:#fff;
    font-size:8em;
	font-family:'Italianno', serif;
    text-align:center;
}
/********************************************/
/*-------- humbarger_menu ----------*/
nav.globalMenuSp ul li {
  transition: .4s all;
  width:100px;
  text-align:center;
  font-size:1rem;
/*  border:solid 2px red;*/
/*    position: relative;*/
}
nav.globalMenuSp ul li:hover{
  background :#ddd;
}
nav.globalMenuSp ul li a{
/*  position:absolute;*/
}
h1{
  padding:20px;
  font-size:4rem;
  line-height:3vh;
  text-align:center;
  color:#fff;
  /*font-family: 'Courgette', cursive;*/
  font-family: 'Italianno', cursive;
}
h2{
	font-size:2.5em;
	text-align:center;
}
h3{
	margin:20px 10%;
	line-height:50px;
	font-size:1.5em;
	background-color:gray;
	color:white;
	text-align:center;
}
.content_width{
	width:60%;
	text-align:center;
	margin:0 auto;
}
/***** ヴィンテージオーナメント *****/
.lace_top_left{
	position:fixed;
	z-index:40;
	top:170px;
	left:0px;
}
.lace_top_right{
	position:fixed;
	z-index:40;
	top:170px;
	right:0px;
}
.lace_bottom_left{
	position:fixed;
	z-index:40;
	bottom:0px;
	left:0px;
}
.lace_bottom_right{
	position:fixed;
	z-index:40;
	bottom:0px;
	right:0px;
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/*** /ヴィンテージオーナメント ***/
/*---------- /common part ----------*/
/*----------header----------*/
header{
	top:0;
	width:100%;
	position:fixed;
	z-index:50;
	margin:auto;
}
header ul{/*** header menu ***/
	display: flex;
	justify-content: center;
	background-color:lightgray;
}
header li{
	margin:2vh 1vw;
}
header a{
	color:#000;
	text-decoration: none;
}
header h1 a{
	color:#fff;
	text-decoration: none;
}
/*header h1 span{
	font-size:24px;
	font-family:serif;
	float:left;
}*/
.salon_title{
	background-image:url("../images/damask_02.jpg");
	background-repeat:repeat-x;
	padding:20px;
	height:70px;
/*	border:solid 3px red;*/
}
.title_width{
	width:350px;
	margin:auto;
/*	border:dotted 3px yellow;*/
}
.title_txt1{
	font-size:24px;
	font-family:serif;
/*	line-height:50px;*/
	float:left;
}
.title_txt2{
	float:right;
}
.slider{
	text-align:center;
}
.top_blank{
	margin-top:300px;
}
.top_blank_index{
	margin-top:200px;
}
.top_blank_contact{
	margin-top:200px;
}
main{
	text-align:center;
}
/*---------- footer ----------*/
.foot-wrap .menu-center{
	display: inline-block;
	width: 80%;
	margin: 50px auto;
}
.foot-wrap {
	background-color: #333;
	color: #fff;
	text-align: center;
}
.foot-wrap ul {
	list-style: none;
	padding: 0;
	line-height:40px;
}
.foot-wrap h5 {
	border-bottom: 3px solid darkgray;
	padding: 10px;
	color: lightgray;
	font-weight:bold;
}
.foot-wrap .cmark {
	display: block;
	padding: 10px;
	border-top: 1px solid gray;
	width: 80%;
	margin: 0 auto;
	color: gray;
}
/*---------- main contents ----------*/
/*-------- index.html --------*/

/*-------- /index.html --------*/
/*-------- menu.html --------*/
.menu{
	text-align:center;
}
/*.menu h2{
	font-size:2.5em;
}*/
.menu h3{
	margin:20px 10%;
	line-height:50px;
	font-size:1.5em;
	background-color:gray;
	color:white;
}
.menu ul{
	width:40%;
	margin-left:auto;
	margin-right:auto;
}
.menu ul li{
	margin:20px auto;
}
.left{
	text-align:left;
	line-height:1.5em;
	float: left;/*---- Make the letters side by side ----*/
}
.right{
	text-align:right;
	line-height:1.5em;
}
.clear{
	clear:both;
}
/*********************/
.wrapper{
	width:70%;
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-gap: 0px; /* grid- 接頭辞付きのプロパティ（古い記述方法） */
	row-gap:0px 0px;
	column-gap:0px;
	margin:0 auto;
}
/********** ヘア画像 ***********/
.hair_catalog h4{
	font-size:1.8em;
}
.grid_wrapper{
	width:70%;
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:0px; /* grid- 接頭辞付きのプロパティ（古い記述方法） */
/*	grid-row-gap:50px;/*** 縦幅を開ける ***/
/*	grid-column-gap:50px;/*** 横幅を開ける ***/
	margin:0 auto;
	text-align:center;
}
.grid_item img{/*#############################################*/
	border:solid 10px #fff;
/*	transition:1s all;/*** 画像ホバー後ゆっくり元に戻る ***/
}

/***** menu.html *****/
/***** stylist.html *****/
.small_text{
	font-size:smaller;
}
.container {
	text-align:center;
	display:flex;
	justify-content:center;
	flex-wrap: wrap;
	margin:10px auto;
}
.stylist_text{
	margin-top:10px;
	margin-bottom:50px;
	line-height:1.5em;
}
.stylist_text span{
	font-weight:bold;
}
/***** stylist.html *****/
/*****▽ reservation.html ▽*****/
.reserve_background{
	background-image:url("../images/damask_02.jpg") !important; 
	background-repeat:repeat !important;
    background-color: rgba(255, 255, 255, 0.8);/*-- backgroundの色を薄く --*/
    background-blend-mode: lighten;/*-- backgroundの色を明るく --*/
/*    border-radius: 5px;
    background-color: #333333;*/
    vertical-align: middle;
    margin-top: 20px;
    margin-bottom: 15px;
    padding: 20px;
}
.hissu{
    color: #fff;
    background: #ff1493;
    display: inline-block;
    padding: 2px 5px;
    font-size: 1rem;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    position: absolute;
    right: 20px;
    top: 19px;
}
/******▲ reservation.html ▲*******/
/******▽ access.html ▽*******/
.center{
	text-align:center;
	margin:0 auto;
}
/******▲ access.html ▲*******/
/***** contact.html *****/
form {
	width:750px;
	margin:auto;
    padding: 30px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    margin-bottom: 50px;
}
/*form > div*/
.contact_background
 {/****** グレーの背景 ******/
    border-radius: 5px;
    background-color: #dcdcdc;
    vertical-align: middle;
    margin-top: 20px;
    margin-bottom: 15px;
    padding: 20px;
}

form > div > div {
    padding: 10px 20px;
    margin:30px auto;
}
/*form > div > div > p {
    width: 405px;
    float: left;
    margin: 0 15px;
}*/
form > div > div::before,
form > div > div::after {
    display: table;
    content: " ";
    clear: both;
}
form > div > div > input[type=text],
form > div > div > input[type=email],
form > div > div > input[type=tel],
form > div > div > textarea{
    display: block;
    min-width: 405px;
    max-width: 405px;
    float: right;/*** input float right ***/
    height: 38px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	margin: 0 15px;
}
input[type=radio] {
    margin-left: 25px;
    margin-top: 8px;
}
form > div > div > textarea {
    height: auto;
}
/*body div label*/
form div div label {
	font-weight:bold;
	float: left;
	width: 160px;
	text-align: right;
	margin-bottom: 0;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
	position: relative;
}
/*body div label span*/
form div div label span{
    color: #fff;
    background: #ff0000;
    display: inline-block;
    padding: 2px 5px;
    font-size: 1rem;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    position: absolute;
    right: 20px;
    top: 19px;
}
.desired_time{
	width:200px;
	height:25px;
}
.menu_table{/*--予約フォームのテーブルのメニュー金額--*/
border:solid 2px #a9a9a9;
margin:0 auto;
}
.menu_table tr td{
	text-align:left;
border:solid 1px #a9a9a9;
}
button {
    display: block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    margin: 0 auto;
}
button:hover {
    background: #00b0da;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1, #00a1d0), color-stop(0, #00bedf));
    background: -webkit-linear-gradient(#00bedf, #00a1d0);
}
button {
    color: #fff;
    background-color: #696969;
    border-color: #ccc;
}
/***** stylist.thml *****/
/********************** For [Slick] only **************************/
/*------ トップページ用スライダー ------*/
.large-box{
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	margin-top:20vh;
}
.slider{
/*border:solid 3px orange;*/
	opacity: 1;
	transition: opacity .50s linear;/*--------------------------*/
}
.slick-slide img{
/*	border: 20px solid #FFF;*/
	display: block;
	width: 100%;
}
.slick-slide img.slick-loading{border:0 }
.slick-slider{margin:30px auto 50px;}
/*************************************************************/
/*************************************************************/
@media screen and (max-width:1400px) and (min-width:1000px) {
/*** ヴィンテージオーナメント ***/
/*	.lace_top_left{
		top:185px;
	}
	.lace_top_right{
		top:185px;
	}*/
/********** ヘア画像 ***********/
	.grid_wrapper{
		display:grid;
		grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
		gap:0px; /* grid- 接頭辞付きのプロパティ（古い記述方法） */
/*	grid-row-gap:50px;/*** 縦幅を開ける ***/
/*	grid-column-gap:50px;/*** 横幅を開ける ***/
		margin:0 auto;
		text-align:center;
	}
.grid_item img{/*#############################################*/
	border:solid 10px #fff;
/*	transition:1s all;/*** 画像ホバー後ゆっくり元に戻る ***/
}
	.grid_item img:hover{
		transform:scale(1.3,1.3);/*** 画像ホバー時拡大 ***/
		transition:1s all;/*** 画像ホバー時ゆっくり動作 ***/
	}
}
/*************************************************************/
@media screen and (min-width:500px) and (max-width:999px) {
/*** ヴィンテージオーナメント ***/
	.lace_top_left{
		top:170px;
	}
	.lace_top_right{
		top:170px;
	}
/********** menu.html ***********/
.left{
	clear:both;
	text-align:center;
	width:100%;
}
.right{
	text-align:center;
	width:100%;
}
/********** ヘア画像 ***********/
	.grid_wrapper{
		display:grid;
		grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
		gap:0px; /* grid- 接頭辞付きのプロパティ（古い記述方法） */
/*	grid-row-gap:50px;/*** 縦幅を開ける ***/
/*	grid-column-gap:50px;/*** 横幅を開ける ***/
		margin:0 auto;
		text-align:center;
	}
.grid_item img{/*#############################################*/
	border:solid 10px #fff;
/*	transition:1s all;/*** 画像ホバー後ゆっくり元に戻る ***/
}
	.grid_item img:hover{
		transform:scale(1.3,1.3);/*** 画像ホバー時拡大 ***/
		transition:1s all;/*** 画像ホバー時ゆっくり動作 ***/
	}
/********** コンタクト ***********/
form {
	width:98%;
	padding:0;
/*border:solid 1px blue;*/
}
form > div {/*** グレーの部分 親要素 ***/
	width:90%;
	margin:20px auto;
/*border:solid 1px yellow;*/
}
form > div > div {
/*    padding: 10px 20px;*/
/*border:solid 1px red;*/
}
form div div label {
	clear:both;
	width: 100%;
/*border:solid 1px orange;*/
	text-align: center;
	margin-bottom: 10px;
/*	min-height: 1px;*/
	padding-right: 0px;
	padding-left: 0px;
/*	position: relative;*/
}
form div div label span{
    color: #fff;
    background: #ff0000;
/*    display: inline-block;*/
    padding: 2px 5px;
    font-size: 1rem;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
/*    position: absolute;*/
    right: auto;
    top: -2px;
}
form > div > div > input[type=text],
form > div > div > input[type=email],
form > div > div > input[type=tel],
form > div > div > textarea,
form > div > div > select{
	clear:both;
/*	width:100%*/
	padding: 0;
	margin: 0 0 30px 0;
	display: block;
    min-width: 100%;
}
.radio_b_area{
	margin: 0 0 30px 0;
}
}
/*************************************************************/
@media screen and (max-width:499px){
/******* ヴィンテージオーナメント *******/
/*.lace_top_left{
	width:150px;
}
.lace_top_right{
	width:150px;
}
.lace_bottom_left{
	width:150px;
}
.lace_bottom_right{
	width:150px;
}
*/
/********** menu.html ***********/
.left{
	clear:both;
	text-align:center;
	width:100%;
}
.right{
	text-align:center;
	width:100%;
}
/********** ヘア画像 ***********/
	.grid_wrapper{
		display:grid;
		grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
		gap:0px; /* grid- 接頭辞付きのプロパティ（古い記述方法） */
/*	grid-row-gap:50px;/*** 縦幅を開ける ***/
/*	grid-column-gap:50px;/*** 横幅を開ける ***/
		margin:0 auto;
		text-align:center;
	}
.grid_item img{/*#############################################*/
	border:solid 10px #fff;
/*	transition:1s all;/*** 画像ホバー後ゆっくり元に戻る ***/
}
	.grid_item img:hover{
		transform:scale(1.3,1.3);/*** 画像ホバー時拡大 ***/
		transition:1s all;/*** 画像ホバー時ゆっくり動作 ***/
	}
/********** コンタクト ***********/
	form {
		width:98%;
		padding:0;
/*border:solid 1px green;*/
	}
	form > div {/*** グレーの部分 親要素 ***/
		width:88%;
		margin:20px auto;
/*border:solid 1px yellow;*/
	}
	form > div > div {
	/*padding: 10px 20px;*/
/*border:solid 1px red;*/
	}
	form div div label {
		clear:both;
		width: 100%;
/*border:solid 1px orange;*/
		text-align: center;
		margin-bottom: 10px;
	/*	min-height: 1px;*/
		padding-right: 0px;
		padding-left: 0px;
	/*	position: relative;*/
	}
	form div div label span{
	    color: #fff;
   	 background: #ff0000;
	/*    display: inline-block;*/
	padding: 2px 5px;
	font-size: 1rem;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	/*    position: absolute;*/
	right: auto;
	top: -2px;
	}
	form > div > div > input[type=text],
	form > div > div > input[type=email],
	form > div > div > input[type=tel],
	form > div > div > textarea,
	form > div > div > select{
		clear:both;
	/*	width:100%*/
		padding: 0;
		margin: 0 0 30px 0;
		display: block;
   		min-width: 100%;
	}
	.radio_b_area{
		margin: 0 0 30px 0;
	}
	.radio_b_area input[type=radio]{
		width;100%
	}
}
@media only screen and (max-width: 1000px) {
	.intro_slick_text{/*---- intro ----*/
    color:#fff;
    font-size:3em;/*---- 1000px以下の時はslickの文字を小さく ----*/
    line-height:0.8em;
	font-family:'Italianno', serif;
    text-align:center;
	}
}
@media only screen and (max-width: 600px) {
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
	.pc { display: none !important; }
	.sp { display: block !important; }

	.salon_title{
		padding:0px;
		height:102px;
	}
	.title_width{
		width:300px;
		margin:0px auto;
		padding:0;
	}
	.title_txt1{
		font-size:18px;
		width:100%;
		line-height:18px;
		clear:both;
	}
	.title_txt2{
		width:100%;
		line-height:60px;
		clear:both;
	}
}