@charset "utf-8";
/* CSS Document */

/*
--------------------------------------------------
［Doux Hair］サイト設定スタイルシート
更新日：2019年9月20日
--------------------------------------------------
目次：
・トップ
・コンセプト
・サロン紹介
・メニュー・料金表
・オリジナル商品
・お客様の声
・よくあるご質問
・ショップ情報
--------------------------------------------------
*/



/* トップ
-------------------------------------------------- */

#top {
float: right;
width: 715px;
}

#t-catch{
margin-left: 25px;
}

/* トップメインイメージ */

#top-pic {
width: 680px;
height: 405px;
margin-bottom: 20px;
overflow: hidden;
position: relative;
}

#carousel{
width:680px;
position:relative;
}

.carousel img {
display: block;
float: left;
}

/* ピックアップ3並び */

#t-pickup{
overflow: hidden;
width: 630px;
height: 125px;
margin-top: 20px;
margin-left: 25px;
margin-bottom: 30px;
}

#t-pickup ul li{
list-style: none;
float: left;
height: 125px;
text-indent: -9999px;
overflow: hidden;
}

#t-pickup ul li a{
display: block;
height: 125px;
}

#t-pickup ul li.pickup1 a{
width: 200px;
margin-right: 15px;
background: url(../images/m-concept.png);
}

#t-pickup ul li.pickup2 a{
width: 200px;
margin-right: 15px;
background: url(../images/m-menu.png);
}

#t-pickup ul li.pickup3 a{
width: 200px;
background: url(../images/m-shop.png);
}

#t-pickup ul li a:hover{
background-position: 0 -125px;
}


/* お知らせ（バナー） */

.t-banner{
  overflow: hidden;
	width: 630px;
	margin-top: 10px;
	margin-left: 25px;
	}

/* お知らせ（twitter） */

.t-bl{
	float: left;
	width: 310px;
	margin-right: 10px;
	}

/* お知らせ（オリジナル商品） */

.t-br{
	float: right;
	width: 310px;
	}

/* お知らせ（新規のお客様） */

.t-newcustomers{
	float: left;
	width: 310px;
	margin-right: 10px;
	}

/* お知らせ（通常） */

#t-news{
overflow: hidden;
width: 630px;
margin-top: 30px;
margin-left: 25px;
margin-bottom: 20px;
}

#t-news h2 {
margin-bottom: 10px;
}

#t-news dl {
position: relative;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
overflow: auto;
background-image: url(../images/line-news.png);
background-repeat: no-repeat;
}

#t-news dt {
position: absolute;
left: 0;
width: 110px;
padding-left: 10px;
font-size: 13px;
}

#t-news dd {
padding: 0 10px 8px 120px;
background-image: url(../images/line-news.png);
background-repeat: no-repeat;
background-position: bottom;
margin-bottom: 10px;
font-size: 13px;
line-height: 22px;
}


/* お知らせの変更 */

.n-red{
color: #BF0003;
}

.n-link{
color: #f96400;
}

.n-red02{
color: #BF0003;
font-size: 16px;
}

.n-mt10{
margin-top: 10px;
}

.n-14{
font-size: 14px;
font-weight: bold;
}

/* お知らせプチ脱毛 */

#t-hairremoval {
overflow: hidden;
width: 630px;
margin-left: 25px;
}

#t-hairremoval h2 {
margin-bottom: 20px;
padding: 6px 0 4px 0;
border: solid 1px #a00202;
background-color: #e6dabb;
text-align: center;
font-size: 16px;
}

.h-removal {
overflow: hidden;
width: 590px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
}

.h-r-l {
 float: left;
 width: 400px;
 margin-right: 30px;
}

.h-r-r {
 float: right;
 width: 160px;
 text-align: center;
font-size: 12px;
}

.h-r-r img {
margin-bottom: -4px;
}

.h-t {
color: #a00202;
}

/* Instagram */

#instagram {
overflow: hidden;
width: 630px;
margin-top: 40px;
margin-left: 25px;
margin-bottom: 30px;
}

#instagram h2 {
margin-bottom: 10px;
}

#instafeed {
margin-top: 10px;
margin-bottom: 20px;
}

#instafeed img {
margin-left: 6px;
}


/* コンセプト
-------------------------------------------------- */

#concept {
float: right;
width: 640px;
margin-top: 24px;
margin-right: 55px;
}

#concept h2 {
margin-bottom: 30px;
}

.c-catch {
text-align: center;
}

#c-proposal {
overflow: hidden;
width: 640px;
margin-top: 40px;
}

.c-flowchart {
float: right;
margin-left: 30px;
margin-right: 10px;
}

#c-reservation {
overflow: hidden;
width: 640px;
margin-top: 40px;
}

#c-reservation h4 {
margin-top: 20px;
font-size: 16px;
color: #b22222;
}

#c-merit {
width: 640px;
}

#c-merit ul {
list-style-type: none;
margin-top: 5px;
margin-bottom: 14px;
}

#c-merit li {
background-image: url(../img/point-brown.png);
background-repeat: no-repeat;
background-position: 5px 12px;
margin-bottom: 6px;
padding-left: 18px;
font-size: 16px;
}

.c-ornament {
background: linear-gradient(transparent 40%, #ddd6a5 40%);
}

#c-contact {
width: 640px;
margin-top: 30px;
}

.c-tel {
margin-top: 10px;
margin-bottom: 5px;
font-size: 26px;
}

#c-contact ul {
list-style-type: none;
margin-top: 10px;
}

#c-contact li {
background-image: url(../img/point-red.png);
background-repeat: no-repeat;
background-position: 5px 10px;
padding-left: 18px;
}

#c-stylist {
overflow: hidden;
width: 640px;
margin-top: 40px;
}

#c-stylist h3 {
margin-bottom: 10px;
}

#c-stylist h4 {
margin-bottom: 5px;
font-size: 16px;
border-bottom: 1px solid #c5c1a4;
}

#c-owner {
width: 640px;
}

.c-staff {
width: 640px;
margin-top: 40px;
}

.c-comment {
width: 592px;
margin-top: 25px;
padding: 18px 24px;
border-radius: 20px;
background-color: #ddd7aa;
}

.c-comment h5 {
background-color: #9b9672;
color: #ffffff;
margin-bottom: 5px;
padding: 2px 0 0 10px;
}

.c-sp10 {
margin-top: 10px;
}

.c-sp20 {
margin-top: 20px;
}


/* サロン紹介
-------------------------------------------------- */

#introduction {
float: right;
width: 640px;
margin-top: 24px;
margin-right: 55px;
}

#introduction h2 {
margin-bottom: 20px;
}

#introduction h3 {
border-bottom: dotted 4px #d8a9a9;
margin-top: 40px;
margin-bottom: 10px;
}

#i-salon {
width: 640px;
margin-top: -20px;
}

#i-salon ul {
list-style-type: none;
margin-top: 5px;
}

#i-salon li {
background-image: url(../img/point-brown.png);
background-repeat: no-repeat;
background-position: 25px 10px;
margin-bottom: 10px;
padding-left: 38px;
padding-right: 30px;
font-size: 16px;
color: #700f0f;
}

#i-workers {
overflow: hidden;
width: 640px;
margin-top: 30px;
}

#i-workers img {
float: right;
margin-top: 4px;
margin-left: 10px;
}

#i-workers dt {
font-weight: bold;
}

#i-owner {
float: left;
width: 262px;
padding: 16px 24px;
border-radius: 10px;
background-color: #d9cfb0;
}

#i-staff {
float: right;
width: 262px;
padding: 16px 24px;
border-radius: 10px;
background-color: #d9cfb0;
}

#i-up {
overflow: hidden;
width: 640px;
margin-top: 30px;
text-align: center;
}


#i-up h4 {
margin-bottom: 5px;
font-size: 18px;
}

/* 一覧 */

#i-list {
overflow: hidden;
width: 360px;
margin-top: 10px;
margin-left: 150px;
}

.i-item {
width: 40px;
float: left;
margin-top: 10px;
margin-right: 20px;
text-align: center;
}

/* 一覧ここまで */

.i-tel {
margin-bottom: 5px;
font-size: 26px;
}

#i-sns {
overflow: hidden;
width: 640px;
margin-top: 20px;
line-height: 22px;
}

.i-twitter {
float: left;
width: 310px;
}

.i-instagram {
float: right;
width: 310px;
}

#i-sns img {
float: left;
margin-top: 4px;
margin-right: 10px;
}

#i-sns a:hover {
opacity: 0.8;
}



/* メニュー・料金表
-------------------------------------------------- */

#menu {
float: right;
width: 640px;
margin-top: 24px;
margin-right: 55px;
}

#menu h2 {
margin-bottom: 20px;
}

#menu ul{
list-style-type: none;
margin-bottom: 25px;
}

#menu li{
background-image: url(../img/point-brown.png);
background-repeat: no-repeat;
background-position: 5px 10px;/*背景画像の基準位置右方向への距離と下方向への距離*/
padding-left: 18px;
}


/* 各メニュー・1行に1つの項目*/

.m-type01 {
	width: 640px;
	margin-top: 30px;
	}

.m-type01 h3 {
	font-size: 16px;
	color: #e36101;
	border-left: 9px solid #e36101;
	padding-left: 6px;
	}

.m-type01 table {
	border-collapse: collapse;
	border-top: solid 1px #c5c1a4;
	margin: 15px 15px 20px 15px;
	color: #1a0b00;
	}

.m-type01 table p {
	font-size: 18px;
}
 
.m-type01 th {
	width: 370px;
	border-bottom: solid 1px #c5c1a4;
	padding: 10px 0 8px 40px;
	text-align: left;
	}

.m-type01 td {
	width: 140px;
	border-bottom: solid 1px #c5c1a4;
	padding: 10px 60px 8px 0;
	text-align: right;
	vertical-align: top;
	}

.m-supplement {
	font-size: 12px;
}

/* ピールバックトリートメント */

.m-peel {
width: 625px;
margin-top: 15px;
}

#m-peel-intro {
width: 610px;
margin-top: 20px;
margin-left: 15px;
}

#m-peel-intro h4 {
width: 290px;
height: 27px;
background-image: url(../menu/images/peel-back.png);
background-repeat: no-repeat;
margin-bottom: 10px;
padding-left: 15px;
color: #fff;
font-size: 14px;
font-weight: normal;
}

.m-peel-m {
margin-top: 25px;
margin-bottom: 20px;
font-size: 16px;
color: #b22222;
font-weight: normal;
text-align: center;
}

.m-peel {
width: 625px;
margin-top: 15px;
}

#m-peel-pic {
overflow: hidden;
width: 625px;
margin-bottom: 30px;
margin-left: 15px;
}

#m-peel-pic img {
float: left;
}

.m-peel-txt {
margin-top: -10px;
margin-left: 15px;
margin-bottom: 10px;
}

#m-peel-ba {
overflow: hidden;
width: 640px;
margin-left: -30px;
padding-left: 15px;
}

.m-peel-ba-detail {
float: left;
width: 290px;
margin-left: 30px;
margin-bottom: 20px;
display: block;
}

.m-peel-ba-detail img {
margin-bottom: 10px;
}

.m-peel-handling {
margin-left: 15px;
font-size: 16px;
color: #8f0449;
text-align: center;
}


/* エステティック */

#m-aesthetic {
width: 640px;
margin-top: 15px;
}

/* プチ脱毛 */

#m-hairremoval {
width: 640px;
margin-top: 15px;
}

#m-hr-intro {
width: 610px;
margin-left: 15px;
margin-bottom: 20px;
}


/* 着付け */

.m-kitsuke-t {
text-align: center;
}

#m-kitsuke-pic {
overflow: hidden;
width: 635px;
margin-top: 10px;
margin-bottom: 30px;
margin-left: -15px;
padding-left: 15px;
}

/* 着付け一覧 */

.m-item {
width: 140px;
float: left;
margin-left: 15px;
}

/* 成人式 */

#m-ceremony {
width: 640px;
margin-top: 15px;
}

.m-ceremony-m {
margin-top: 25px;
margin-bottom: 20px;
font-size: 16px;
color: #b22222;
font-weight: normal;
text-align: center;
}

#m-ceremony-pic {
overflow: hidden;
width: 625px;
padding-top: 20px;
margin-bottom: 60px;
margin-left: 15px;
}


/* お問い合わせ */

.m-toiawase {
margin-top: 60px;
padding: 6px;
border: solid 1px #a00202;
text-align: center;
}


/* キャンセル */

#m-cancel {
width: 640px;
margin-top: 40px;
}

#m-cancel h3 {
background-color: #837e57;
margin-bottom: 10px;
padding: 6px 0 4px 20px;
font-size: 16px;
font-weight: normal;
color: #fff;
}


/* 消費税 */

.m-tax {
border-bottom: solid 1px #a00202;
}


/* オリジナル商品
-------------------------------------------------- */

#original {
float: right;
width: 640px;
margin-top: 24px;
margin-right: 55px;
}

#original h2 {
margin-bottom: 20px;
}

/* 商品イメージと基本情報 */

#o-title {
overflow: hidden;
width: 640px;
}

.o-mainpic {
float: left;
width: 220px;
}

.o-maininfo {
float: right;
width: 390px;
}

.o-maininfo h3 {
margin-top: 10px;
}

.o-maininfo ul {
margin-top: 40px;
margin-bottom: 10px;
}

.o-name {
font-size: 16px;
}

.o-price {
font-size: 24px;
}

.o-tax {
margin-bottom: 20px;
}

/* コンセプト */

#o-info {
width: 640px;
margin-top: 40px;
}

#o-info h3 {
margin-bottom:20px;
font-size: 22px;
color: #e36101;
line-height: 30px;
}

#o-info h4 {
margin-top: 30px;
margin-bottom: 10px;
font-size: 16px;
border-bottom: 1px solid #c5c1a4;
}

/* こだわり */

#o-kodawari {
overflow: hidden;
width: 640px;
margin-top: 40px;
}

#o-kodawari h3 {
text-align: center;
}

#o-k-list {
overflow: hidden;
width: 640px;
margin-left: -40px;
padding-left: 20px;
}

.o-k-detail {
float: left;
width: 280px;
margin-top: 20px;
margin-left: 40px;
display: block;
line-height: 22px;
}

.o-k-detail dt {
margin-bottom: 8px;
}

.o-k-detail dd {
padding: 0 14px;
}

/* 商品紹介 */

#o-intro {
overflow: hidden;
width: 640px;
margin-top: 40px;
}

#o-intro h3 {
margin-bottom: 20px;
}

.o-shampoo {
float: left;
width: 310px;
background-image: url(../original/images/intro-back.png);
background-repeat: no-repeat;
}

.o-treatment {
float: right;
width: 310px;
background-image: url(../original/images/intro-back.png);
background-repeat: no-repeat;
}

.o-shampoo h4,.o-treatment h4 {
margin-bottom: 10px;
text-align: center;
}

.o-itempic {
float: left;
margin-right: 20px;
}

.o-i-space {
margin-top: 30px;
}

/* 詰め替え用 */

#o-refill {
overflow: hidden;
width: 590px;
border: dotted 2px #d18282;
margin-top: 30px;
padding: 20px;
}

#o-refill h3 {
margin-bottom: 10px;
}

.o-refill-pic {
float: right;
margin-top: 4px;
margin-bottom: 4px;
margin-left: 20px;
margin-right: 30px;
}


/* プレゼント */

#o-present {
overflow: hidden;
width: 590px;
border: dotted 2px #f6a76d;
margin-top: 30px;
padding: 20px;
}

#o-present h3 {
margin-bottom: 10px;
}

.o-pre-pic {
float: right;
margin-top: 4px;
margin-bottom: 4px;
margin-left: 20px;
}

/* オリジナルミスト */

#om-title {
overflow: hidden;
width: 640px;
margin-top: 60px;
}

.om-mainpic {
float: left;
width: 220px;
}

.om-maininfo {
float: right;
width: 390px;
}

.om-maininfo h3 {
margin-top: 10px;
}

.om-maininfo ul {
margin-top: 40px;
margin-bottom: 10px;
}

.om-name {
font-size: 16px;
}

.om-price {
font-size: 24px;
}

.om-tax {
margin-bottom: 20px;
}

/* オリジナルミスト紹介 */

#om-info {
width: 640px;
margin-top: 40px;
}

#om-info h3 {
margin-bottom:20px;
font-size: 22px;
color: #e36101;
line-height: 30px;
}

/* オリジナルミストこだわり */

#om-kodawari {
width: 640px;
}

#om-kodawari h3 {
text-align: center;
}

#om-k-list {
overflow: hidden;
width: 640px;
margin-left: -40px;
padding-left: 20px;
}

.om-k-detail {
float: left;
width: 280px;
margin-top: 20px;
margin-left: 40px;
display: block;
line-height: 22px;
}

.om-k-detail dt {
margin-bottom: 8px;
}

.om-k-detail dd {
padding: 0 14px;
}

/* オリジナルミスト商品紹介 */

#om-intro {
overflow: hidden;
width: 640px;
margin-top: 40px;
}

#om-intro h3 {
margin-bottom: 20px;
}

.om-mist-b {
float: left;
width: 310px;
background-image: url(../original/images/intro-back.png);
background-repeat: no-repeat;
}

.om-mist-r {
float: right;
width: 310px;
background-image: url(../original/images/intro-back.png);
background-repeat: no-repeat;
}

.om-mist-b h4,.om-mist-r h4 {
margin-bottom: 10px;
text-align: center;
}

.om-itempic {
float: left;
margin-right: 20px;
}

.om-i-space {
margin-top: 30px;
}











/* お客様の声 */

#o-voice {
width: 640px;
margin-top: 60px;
}

.o-v-list {
overflow: hidden;
width: 640px;
margin-top: 20px;
}

.o-v-list dt {
float: left;
width: 100px;
}

.o-v-list dd {
float: right;
width: 500px;
padding: 20px;
-moz-border-radius: 20px;    /* 古いFirefox */
-webkit-border-radius: 20px; /* 古いSafari,Chrome */
border-radius: 20px;         /* CSS3 */
}

.o-v-bg01 {
background-color: #dfd9c7;   /* 背景色 */
}

.o-v-bg02 {
background-color: #eaddb7;   /* 背景色 */
}


/* お客様の声
-------------------------------------------------- */

#voice {
float: right;
width: 640px;
margin-top: 24px;
margin-right: 55px;
}

#voice h2 {
margin-bottom: 20px;
}

.voice-d {
overflow: hidden;
width: 610px;
margin-top: 35px;
margin-left: 15px;
}

.voice-d img {
border: solid 1px #907549;
}

.v-d-l01 {
float :left;
width: 270px;
text-align: center;
}

.v-d-r01 {
float :right;
width: 310px;
}

.v-d-pic01 {
margin-bottom: 35px;
}

.v-d-pic-r {
text-align :right;
}

.v-d-l02 {
float :left;
width: 400px;
}

.v-d-r02 {
float :right;
width: 180px;
}

.v-d-l03 {
float :left;
width: 220px;
}

.v-d-r03 {
float :right;
width: 360px;
}

.v-d-l04 {
float :left;
width: 290px;
}

.v-d-r04 {
float :right;
width: 290px;
}

.voice-t {
overflow: hidden;
width: 610px;
margin-top: 35px;
margin-left: 15px;
text-align: center;
}


#v-thanks{
margin-top: 40px;
color: #1a0b00;
}


/* よくあるご質問
-------------------------------------------------- */

#faq {
float: right;
width: 640px;
margin-top: 24px;
margin-right: 55px;
}

#faq h2 {
margin-bottom: 20px;
}

.f-info {
margin-bottom: -10px;
}

#faq h3 {
margin-top: 40px;
}

.f-faq {
width: 640px;
margin-top: 30px;
}

.f-faq-top {
margin-top: 10px;
}

.f-faq dt {
background-color: #f5dc91;
background-image: url(../faq/images/point-q.png);
background-position: 15px 10px;/*背景画像の基準位置右方向への距離と下方向への距離*/
background-repeat: no-repeat;
padding: 10px 15px 8px 40px;
font-size: 16px;
color: #e36101;
}

.f-faq dd {
background-color: #fff;
background-image: url(../faq/images/point-a.png);
background-position: 15px 15px;/*背景画像の基準位置右方向への距離と下方向への距離*/
background-repeat: no-repeat;
padding: 15px 15px 15px 40px;
}

.f-tel {
font-size: 26px;
}

.f-sp {
margin-top: 10px;
}


/* サロン情報
-------------------------------------------------- */

#salon {
float: right;
width: 640px;
margin-top: 24px;
margin-right: 55px;
}

#salon h2 {
margin-bottom: 20px;
}

#salon h3 {
margin-top: 40px;
}

#s-info {
overflow: hidden;
width: 640px;
margin-top: 30px;
}

#s-info table {
border-collapse: collapse;
border-top: solid 1px #c5c1a4;
}

#s-info th {
width: 100px;
border-bottom: solid 1px #c5c1a4;
padding: 8px 0 6px 20px;
text-align: left;
vertical-align: top;
font-weight: normal;
}

#s-info td {
width: 500px;
border-bottom: solid 1px #c5c1a4;
padding: 8px 20px 6px 0;
}

#salon ul {
list-style-type: none;
margin-top: 10px;
}

#salon li {
background-image: url(../img/point-brown.png);
background-repeat: no-repeat;
background-position: 5px 10px;/*背景画像の基準位置右方向への距離と下方向への距離*/
padding-left: 18px;
}

#s-map-detail {
width: 640px;
margin-top: 20px;
}

#s-calendar {
width: 640px;
}

#s-calendar-detail {
width: 640px;
margin-top: 10px;
}

.s-calendar-sp {
margin-top: 15px;
}


/* 15周年
-------------------------------------------------- */

#anniversary {
float: right;
width: 640px;
margin-top: 24px;
margin-right: 55px;
}

#anniversary h2 {
margin-bottom: 10px;
}

#greeting {
width: 640px;
background-image: url(../15anniversary/images/title-back.png);
background-repeat: no-repeat;
}

#greeting h3 {
margin-bottom: 10px;
padding-top: 100px;
font-size: 22px;
text-align: center;
}

.anniversary-notice {
width: 620px;
background-color: #eaddb7;
margin: 20px 0;
padding: 6px 10px;
text-align: center;
color: #ab2619;
}

/* 一覧 */

#list {
overflow: hidden;
width: 660px;
margin-top: -20px;
margin-left: -20px;
}

.item {
width: 143px;
float: left;
margin-top: 20px;
margin-left: 20px;
border: 1px solid #ffffff;
text-align: center;
}


/* 20周年
-------------------------------------------------- */

#anniversary20 {
float: right;
width: 640px;
margin-top: 24px;
margin-right: 55px;
}

#anniversary20 h2 {
margin-bottom: 20px;
}

#anniversary20 h3 {
margin-bottom: 20px;
}