/* body ボディ
-----------------------------------------------------*/

body {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:80%;
line-height: 160%;
background-image: url(image/bg01.png);
background-repeat: repeat;
background-position: center;
background-color:#ffffff;
color: #362e2b;
text-align: center;
margin: 0px auto;
padding: 0px;
}

a:link {
text-decoration:underline;
color: #660000;
}

a:visited {
text-decoration:underline;
color: #660000;
}

a:active {
text-decoration:underline;
color: #660000;
}

a:hover {
text-decoration: none;
color: #362e2b;
}

.clearFix{
clear:both;
}

/* container コンテナ
-----------------------------------------------------*/

#container {
width:950px;
margin: 0px auto;
background-image: url(image/bg02.png);
background-repeat: repeat;
background-position: center;
padding: 0px 0px 20px 0px;
text-align: left;
box-shadow:0px 1px 4px rgba(0, 0, 0, 0.5);
}


/* header ヘッダー
-----------------------------------------------------*/

#header {
width:100%;
height:100px;
background:#da4c62;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-bottom: 10px #d83f57 solid;
box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.5);
}

#header2 {
width:950px;
margin: 0px auto;
text-align: left;
font-size:60%;
color: #FFFFFF;
}

#header_left {
float:left;
padding: 0px 0px 10px 5px;
}

#header_right {
float:right;
padding: 25px 10px 0px 0px;
}

#header a, #header a:link, #header a:visited {
color:#FFFFFF;
text-decoration: none;
}

#header a:hover {
color:#FFFFFF;
text-decoration:underline;
}

.midasi {
font-size:10px;
font-weight:normal;
color:#FFFFFF;
height:15px;
width:890px;
margin: 0px auto;
text-align: left;
padding: 5px 0px 0px 10px;
}

/* menu メニュー
-----------------------------------------------------*/

#menu {
box-shadow: 0px 5px 0.5px rgba(0, 0, 0, 0.5) inset;
padding: 15px 0px 0px 0px;
}

#menu ul {
width:700px;
text-align:center;
list-style:none;
display:block;
margin: 0 auto;
padding: 10px;
}

#menu li {
width:160px;
height: 30px;
font-size:120%;
font-weight:bold;
color:#6a3906;
list-style:none;
float:left;
text-align:center;
background-image: url(image/bg03.jpg);
background-repeat: repeat;
background-position: center;
margin: 0px 10px 0px 0px;
padding: 5px 0px 0px 0px;
box-shadow: 2px 2px 2px #999;
transform: rotate(-1deg);
position: relative;
text-shadow:
        0 1px 0 #f7f3f1,
        1px 0 0 #f7f3f1,
        0 -1px 0 #f7f3f1,
        -1px 0 0 #f7f3f1,
        -1px -1px 0 #f7f3f1,
        1px -1px 0 #f7f3f1,
        -1px 1px 0 #f7f3f1,
        1px 1px 0 #f7f3f1;
}

.cut01 {
position: absolute;
left: 8px;
top: 5px;
}

#menu a, #menu a:link, #menu a:visited {
color: #6a3906;
text-decoration: none;
height:23px;
padding: 5px 0px 0px 0px;
display:block;
}

#menu a:hover {
color: #d7465b;
text-decoration: none;
}

/* TOP画像
-----------------------------------------------------*/

#topimage {
margin: 20px 20px 10px 20px;
padding: 20px 20px 10px 20px;
text-align:center;
}

/* main メイン
-----------------------------------------------------*/

#main {
float:right;
width:610px;
margin: 0px 0px 0px 0px;
padding: 10px 35px 0px 0px;
}

#main p {
width:500px;
margin: 20px 10px 20px 35px;
padding: 10px 10px 10px 20px;
}

h1 {
  margin: 0px; /* 上マージン0、右マージン0、下マージン30px、左マージン0 */
  font-size: 130%; /* 文字サイズを130% */
  color: #6a3906; /* 文字色を#333333 */
  padding: 5px 10px; /* 上下パディング5ピクセル、左右パディング10px */
}

/* お知らせ
-----------------------------------------------------*/

.notice{
width:520px;
margin: 10px 10px 20px 40px;
padding: 10px 10px 10px 20px;
}

.noticetext{
margin: 30px 10px 20px 10px;
}

.notice2{
width:450px;
text-align: right;
margin: 10px 10px 20px 40px;
padding: 10px 10px 10px 20px;
}

.notice h2 {
margin: 5px 0px 20px 0px;
font-size:130%;
font-weight:bold;
color:#d7465b;
}

.notice h4 {
margin: 10px 20px 10px 0px;
font-size:120%;
font-weight:bold;
}

.red {
font-weight:bold;
color:#e60012;
}

/* ご挨拶
-----------------------------------------------------*/

.greeting{
position:relative;
width:600px;
height: 320px;
}

.greetingtext{
position:absolute;
z-index: 2;
margin: 20px 10px 20px 40px;
padding: 10px 10px 10px 20px;
}

.greeting img{
position: absolute;
z-index: 1;
right: 5px;
bottom: 5px;
}


/* service /* border:1px solid #66330C;/*
-----------------------------------------------------*/

.service {
position: relative;
z-index: 1;
width: 500px;
height: 100px;
margin:5px 5px 10px 5px;
}

.service-a {
position: relative;
z-index: 1;
width: 500px;
height: 110px;
margin:5px 5px 10px 5px;
}

.service-word {
z-index: 2;
position: absolute;
bottom: 0px;
right: 0px;
width:400px;
padding: 15px 20px 10px 45px;
background: rgba(255,255,255,0.8);
text-align: left;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:90%;
line-height: 140%;
color: #6a3906;
border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}

.service-title {
z-index: 3;
position: absolute;
top: 0px;
}

.service-more {
z-index: 4;
position: absolute;
right: 5px;
bottom: 5px;
}


.service-contents {
width: 550px;
text-align: left;
margin:5px 5px 40px 5px;
}

.service-contents-box {
  display: flex;
}

.service-box01 {
text-align: left;
margin:5px 15px 0px 50px;
}

.service-box02 {
line-height: 180%;
text-align: left;
margin:5px 5px 0px 35px;
}

.service-box03 {
line-height: 120%;
font-size:80%;
font-weight:bold;
margin:0px 0px 20px 0px;
}

.service-box04 {
font-size:80%;
margin:10px;
}

.service-cut03 {
right: 5px;
top: 65px;
}
.service-cut04 {
width: 180px;
text-align: left;
left:40px;
top: 70px;
}

.service-cut05 {
width: 250px;
text-align: left;
left:40px;
top: 70px;
}


/* ボックスデザイン
-----------------------------------------------------*/
.box25{
width:200px;
margin:10px;
position: relative;
background: #fff0cd;
box-shadow: 0px 0px 0px 5px #fff0cd;
border: dashed 2px white;
padding: 10px;
color: #454545;
}
.box25:after{
position: absolute;
content: '';
right: -7px;
top: -7px;
border-width: 0 15px 15px 0;
border-style: solid;
border-color: #ffdb88 #fff #ffdb88;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}


/* main table メインのテーブル
-----------------------------------------------------*/
/*
#main table ul {
margin: 5px 0px 5px 20px;
padding: 0px 0px 0px 0px;
}

#main table {
margin: 10px 10px 10px 10px;
padding: 0px 0px 0px 0px;
width:530px;
border-collapse:collapse;
border-spacing:0;
empty-cells:show;
font-size:12px;
color: #6a3906;
letter-spacing:1.5px;
line-height:1.5em;
border-top:1px solid #66330C;
}

#main table th {
text-align:left;
padding:2px 15px;
border-left:1px solid #66330C;
border-right:1px solid #66330C;
border-bottom:1px solid #66330C;
}

#main table td {
text-align:center;
padding:2px 5px;
color: #333333;
border-right:1px solid #66330C;
border-bottom:1px solid #66330C;
background: rgba(255,255,255,0.3);
}

#main table th.label, td.label{
background: url(image/bg03.jpg) repeat;
}
*/

/* トリミング案内ページ
-----------------------------------------------------*/

.trimming {
margin: 5px 20px 5px 40px;
padding: 0px 0px 0px 0px;
}

.trimming ul li {
	position: relative;
	margin-bottom: 20px;
}

.trimming ul li::after {
	display: block;
	content: '';
	position: absolute;
	top: .3em;
	left: -1.5em;
	width: 12px;
	height: 12px;
	background-color: #d7465b;
	border-radius: 100%;
}

.trimmingtext {
margin: 20px 20px 15px 0px;
text-align: center;
font-size:120%;
font-weight:bold;
color:#d7465b;
}

.sideLL {
	width: 140px;
	text-align: left;
	float: left;
}

.sideLR {
	width: 350px;
	margin: 5px 0px 15px 10px;
	padding: 10px;
	text-align: left;
	float: left;
	background: rgba(99,140,11,0.1);
	border-radius: 20px;
	    -webkit-border-radius: 20px;
	    -moz-border-radius: 20px;
}


.trimming table ul {
margin: 5px 0px 5px 20px;
padding: 0px 0px 0px 0px;
}

.trimming table {
margin: 10px 10px 10px 10px;
padding: 0px 0px 0px 0px;
width:530px;
border-collapse:collapse;
border-spacing:0;
empty-cells:show;
font-size:12px;
color: #6a3906;
letter-spacing:1.5px;
line-height:1.5em;
border-top:1px solid #66330C;
}

.trimming table th {
text-align:left;
padding:5px 5px 5px 15px;
border-left:1px solid #66330C;
border-right:1px solid #66330C;
border-bottom:1px solid #66330C;
}

.trimming table td {
text-align:center;
padding:5px 5px 5px 15px;
color: #333333;
border-right:1px solid #66330C;
border-bottom:1px solid #66330C;
background: rgba(255,255,255,0.3);
}

.trimming table th.label, td.label{
background: url(image/bg03.jpg) repeat;
}

/* サロン案内ページ
-----------------------------------------------------*/

#salon {
margin: 5px 20px 5px 40px;
padding: 0px 0px 0px 0px;
}

#access {
margin: 20px;
}

#salon table {
margin: 10px 10px 10px 10px;
padding: 0px 0px 0px 0px;
width:530px;
border-collapse:collapse;
border-spacing:0;
empty-cells:show;
font-size:12px;
color: #6a3906;
letter-spacing:1.5px;
line-height:1.5em;
border-top:1px solid #66330C;
}

#salon table th {
text-align:left;
padding:2px 15px;
border-left:1px solid #66330C;
border-right:1px solid #66330C;
border-bottom:1px solid #66330C;
}

#salon table td {
padding:10px;
color: #333333;
border-right:1px solid #66330C;
border-bottom:1px solid #66330C;
background: rgba(255,255,255,0.3);
}

#salon table th.label, td.label{
background: url(image/bg03.jpg) repeat;
}

#trimmer {
margin: 15px 20px 5px 40px;
padding: 0px 0px 0px 0px;
overflow: hidden;
}
#trimmerphoto {
    float: left;
    margin-right: 10px;
}
#trimmersummary {
    overflow: hidden;
}
#trimmerheading {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}
#trimmertext {
margin: 20px 10px 10px 10px;
}


/* フォトギャラリー
-----------------------------------------------------*/

.gallery {
margin: 5px 20px 5px 40px;
padding: 0px 0px 0px 0px;
}

.popup-window {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
transform: translate(0, 100%);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
opacity: 0;
}
.popup-window:target {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 1;
}
.popup-window .popup-inner {
position: absolute;
top: 100px;
left: 50%;
z-index: 20;
margin-left: -120px;
width: 360px;
padding:20px;
overflow-x: hidden;
text-align:center;
border-radius: 2px;
background: #fff;
-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}
.popup-window .popup-inner p {
padding: 0 20px;
}
.popup-window .popup-close {
display: block;
text-indent: -100px;
overflow: hidden;
}
.popup-window .popup-close:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background-color: rgba(0,0,0,0.6);
}
.popup-window .popup-close:after {
content: '\00d7';
position: absolute;
top: 70px;
left: 50%;
z-index: 20;
margin-left: 260px;
background: #fff;
border-radius: 2px;
padding: 2px 15px;
font-size: 18px;
text-decoration: none;
text-indent: 0;
}
.popup-window {
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
}

/* フォトギャラリー(サイズ違い）
-----------------------------------------------------*/

.popup-window2 {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
transform: translate(0, 100%);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
opacity: 0;
}
.popup-window2:target {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 1;
}
.popup-window2 .popup-inner2 {
position: absolute;
top: 100px;
left: 50%;
z-index: 20;
margin-left: -320px;
width: 600px;
padding:20px;
overflow-x: hidden;
text-align:center;
border-radius: 2px;
background: #fff;
-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}
.popup-window2 .popup-inner2 p {
padding: 0 20px;
}
.popup-window2 .popup-close2 {
display: block;
text-indent: -100px;
overflow: hidden;
}
.popup-window2 .popup-close2:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background-color: rgba(0,0,0,0.6);
}
.popup-window2 .popup-close2:after {
content: '\00d7';
position: absolute;
top: 70px;
left: 50%;
z-index: 20;
margin-left: 260px;
background: #fff;
border-radius: 2px;
padding: 2px 15px;
font-size: 18px;
text-decoration: none;
text-indent: 0;
}
.popup-window2 {
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
}

/* 下部店舗情報
-----------------------------------------------------*/

#tenpo {
margin: 40px 0px 0px 0px;
width:950px;
text-align: center;
}


/* sub サブ
-----------------------------------------------------*/

#sub {
float:left;
font-size:12px;
width:252px;
color:#660000;
margin: 5px 5px 0px 5px;
padding: 20px 10px 0px 20px;
display: inline;
}

#sub h3 {
font-size:14px;
text-align:left;
font-weight:bold;
border-bottom:#993333 solid 3px;
margin: 5px 0px 0px 0px;
padding: 5px 5px 5px 5px;
}

#sub .category {
margin: 0px 0px 10px 0px;
padding: 20px 10px 0px 20px;
}

#sub ul {
margin: 20px 0px 15px 0px;
padding: 0px 0px 0px 0px;
}

#sub li {
width:160px;
margin: 0px 0px 5px 0px;
padding: 5px 0px 0px 5px;
font-weight:bold;
list-style:none;
border-style: solid;
border-width: 2px 0px 0px 1px;
-moz-border-image: url(image/line01.png) 2 0 0 1 repeat;
-webkit-border-image: url(image/line01.png) 2 0 0 1 repeat;
-o-border-image: url(image/line01.png) 2 0 0 1 repeat;
border-image: url(image/line01.png) 2 0 0 1 repeat
}

.face {
width:200px;
background-color:#f29b76;
text-align:center;
font-size:12px;
font-weight:bold;
color:#ffffff;
margin: 0px 0px 0px 0px;
padding: 5px 0px 5px 0px;
}

#facebook {
margin: 30px 0px 0px 15px;
padding: 0px 0px 0px 0px;
display: block;
}

#sub p {
margin: 15px 0px 0px 0px;
padding: 20px 0px 0px 15px;
}

#sub li a, #sub li a:link, #sub li a:visited {
color: #FFFFFF;
text-decoration: none;
}

#sub li a:hover {
color: #660000;
text-decoration:underline;
}



/* 完全予約制案内メモ
-----------------------------------------------------*/

.memo {
  position: relative;
  background-image: url(image/bg03.jpg);
background-repeat: repeat;
  border-left:4px dotted rgba(0,0,0,.1);
  border-right:4px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,.2);
  padding: 1em;
  color: #65513f;
  width: 200px;
text-align:center;
}
.masking-tape{
  position: absolute;
  top: -1em;
  left: 15%;
  width:100px;
  height:30px;
  background-image: linear-gradient(-45deg, rgba(227,155,140,.4) 25%, transparent 25%, transparent 50%, rgba(227,155,140,.4) 50%, rgba(227,155,140,.4) 75%, transparent 75%, transparent 100%);
  background-size: 20px 20px;
  border-left:2px dotted rgba(0,0,0,.1);
  border-right:2px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,.2);
  padding: 0.25em 2em;
  color: #65513f;
  transform: rotate(-4deg); 
}

.box {
width: 180px;
height:20px;
border-radius: 10px ;
padding: 6px 0px 4px 0px;
margin: 10px 0px 0px 10px;
background-color:#d7465b;
text-align:center;
font-size: 1.5em;
color:#fff;
}

.box-m1 {
color: #6a3906;
padding: 10px 0px 10px 0px;
font-size: 1.2em;
}

.box-m2 {
font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
color: #6a3906;
padding: 10px 0px 10px 0px;
font-size: 1.5em;
font-weight:bold;
transform: scale( 1 , 1.5 );
text-shadow:
        0 1px 0 #f7f3f1,
        1px 0 0 #f7f3f1,
        0 -1px 0 #f7f3f1,
        -1px 0 0 #f7f3f1,
        -1px -1px 0 #f7f3f1,
        1px -1px 0 #f7f3f1,
        -1px 1px 0 #f7f3f1,
        1px 1px 0 #f7f3f1;
}

/* footer フッター
-----------------------------------------------------*/

#footer {
clear:both;
background-color:#cc6666;
text-align:center;
font-size:10px;
background:#d83f57;
color:#FFFFFF;
margin: 0px 0px 0px 0px;
padding: 5px 0px 5px 0px;
}

#footer p {
margin: 5px 25px 5px 25px;
padding: 0px 0px 0px 0px;
}

#footer a, #footer a:link, #footer a:visited {
color:#FFFFFF;
text-decoration:underline;
}

#footer a:hover {
color:#FFFFFF;
text-decoration: none;
}