@charset "utf-8";
@import "reset.css";
@import "setup.css";

/*基本設定*/
html {
height:100%;
margin:0;
}

body {
margin:0px auto;
padding:0px;
line-height: 1.5;
color:#333333;
overflow:auto;
text-align:center;
background:url(../img/bg_01.gif) 0 0 repeat;
}
a:link{
color:#333333;
text-decoration:none;
}
a:hover{
color:#333333;
text-decoration:underline;
}
a:visited{
color:#333333;
text-decoration:none;
}
a:active{
text-decoration:underline;
}
a{
outline:none;
}

img { vertical-align: bottom;}

@media (min-width: 768px) {
/* tablet+PC用 */
    .for-tbpc { display: block;}
    .for-sp {display: none;} /*spだけ表示on*/
    .wpr {
        clear: both;
        margin:0 3%;}
.pc_fl{ float: left;}
.pc_fr{ float: right;}
.left{ float: left;}
.right{ float: right;}
}

@media (min-width: 768px) and (max-width: 1024px){
/* tablet用 */
    .for-pc { display: none !important;} /*PCだけ表示on*/
    img { max-width: 100%;}
}
@media (min-width: 1025px) {
/* PC用 */
    .for-tb {display: none;}
    .for-pc {display: block;} /*PCだけ表示on*/
    
    .wpr {
        width:1000px;
        margin:0 auto;
    }
}

@media (max-width: 767px) {
/* SP用 */
    .for-tbpc{ display: none !important;} /*tbとpcだけ表示on*/
    .for-sp{display: block;} /*spだけ表示on*/
    .for-tb{display: none !important;} /*tbだけ表示on*/
    .for-pc{display: none !important;} /*PCだけ表示on*/
    .spn{ display: none; }
    .wpr {
        clear: both;
        margin:0;
    }

    img { width: inherit;height: auto;}
    .smt30{ margin-top: 30px; }
    .smt50{ margin-top: 50px; }
    .smb10{ margin-bottom: 10px; }
    .smb30{ margin-bottom: 30px; }
    .sp_img img{ width: inherit; }

    .imga{ width: auto; }
    .img100{ width: 100%; }
    .spdn{ display: none; float: none !important; }
    .spfn{ float: none !important; }
    .sw10 img{ width: 10% !important; margin: auto; text-align: center; }
    .sw20 img{ width: 20% !important; margin: auto; text-align: center; }
    .sw30 img{ width: 30% !important; margin: auto; text-align: center; }
    .sw40 img{ width: 40% !important; margin: auto; text-align: center; }
    .sw50 img{ width: 50% !important; margin: auto; text-align: center; }
    .sw60 img{ width: 60% !important; margin: auto; text-align: center; }
    .sw70 img{ width: 70% !important; margin: auto; text-align: center; }
    .sw80 img{ width: 80% !important; margin: auto; text-align: center; }
    .spf14{ font-size: 14px !important; }
    .pd10{  padding: 10px;}
    .smb10{ margin-bottom: 10px; }
    .ttlh20{width: auto !important; height: 20px !important;}

}/* sp_end



/* css_start
--------------------------------------------------*/

/* header
-------------------------*/


#header{ width:100%; background:url(../img/bg_header.jpg) center top no-repeat;} 
#header_inner{ width:960px; margin:0 auto; height:85px; position:relative;}
#header h1,#header #title{
	position:absolute;
	top:26px;
	left:0px;
}

#header h2,#header #txt{
	position:absolute;
	top:40px;
	left:115px;
	font-size:93%;
}

#header p{
	position:absolute;
	top:17px;
	right:10px;
	font-size:93%;
	text-shadow: 1px 1px 3px #FFF; 
}
#header p#tel{
	top:37px;
	right:0px;
}

#header p#header_info{
	top:61px;
	right:0px;
}
@media (max-width: 767px) {	
#header{ background:none;} 
#header_inner{ width:94%; margin:3% auto; height:30px; position:relative;}
#header h1,#header #title{
	position:absolute;
	top:0px;
	left:10px;
}

#header_inner h2,#header #txt,
#header_inner p,
#heade_innerr p#tel,
#header_inner p#header_info{display: none;}
}

/* gnav
-------------------------*/
#gnavi.top{ width:100%; background:url(../img/bg_top_menu.jpg) center 0 no-repeat;} 
#gnavi.under{ width:100%; background:url(../img/bg_menu_u.jpg) center 0 no-repeat; height:75px;} 
#gnavi ul{ width:960px; margin:0 auto; }
#gnavi ul li{ float:left;}

@media (max-width: 767px) { #gnavi{display: none;}

nav.globalMenuSp {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    background: #fff;
    color: #000;
    text-align: center;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%;z-index: 10000000!important;
}

nav.globalMenuSp ul {
    background: #FFF;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

nav.globalMenuSp ul li {
    list-style-type: none;
    padding: 0 0 0 10px;
    width: 100%;
	text-align: left;
	border-bottom: 1px dotted #CCC;
}

nav.globalMenuSp ul li a:hover {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
	opacity: 0.5;	}

/* 最後はラインを描かない */
nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}




/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
    transform: translateY(0%);
}


.navToggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    right: 10px;
    top: 10px;
    width: 42px;
    height: 40px;
    cursor: pointer;
    z-index: 3;
    background: #663300;
    text-align: center;z-index: 1000000000;
}

.navToggle span {
    display: block;
    position: absolute;    /* .navToggleに対して */
    width: 26px;
    border-bottom: solid 3px #eee;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 8px;
}

.navToggle span:nth-child(1) {
    top: 9px;
}

.navToggle span:nth-child(2) {
    top: 18px;
}

.navToggle span:nth-child(3) {
    top: 27px;
}

.navToggle span:nth-child(4) {
    border: none;
    color: #FFF;
    font-size: 9px;
    font-weight: bold;
    top: 34px;
}


/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
    top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.globalMenuSp{ padding-top: 50px;}
nav .menu li {
list-style: none;
}
nav .menu li a{
display: table;
margin-top: 1px;
padding: 14px 10px;
width: 100%;
text-decoration: none;
text-align: left;
vertical-align: middle;
overflow: hidden;
transition:all .5s ease-out;
}

nav .menu li a:hover {
transition:all .5s ease-out;
}

ul.menu li.info{ margin: 20px auto;text-align: center;} 
ul.menu li.info	a{ width: 80%; margin: 0 auto;text-align: center;}
}


/* main
-------------------------*/
#main{
 width:100%; background:url(../img/bg_main.jpg) center 0 no-repeat; padding-top:14px; height:360px; margin-bottom:25px;}

#main_inner{
width:960px;
margin:0 auto;
}
@media (max-width: 767px) {
	#main{ padding-top:0px; height:auto;}
	#main_inner{ width: 100%;}

}


/* contents
-------------------------*/


/* h3
-----------------*/
h3.title{ margin:22px auto 10px; padding-bottom:38px; text-align:center; border-bottom:1px solid #dfdfdf;}
h3.top_ttl{ margin-bottom:4px;}

@media (max-width: 767px) {
	h3.top_ttl img{ width: inherit;}
	h3.title{ margin:40px auto 10px; }
}

/* wrap
-------------------------*/
#wrap{
width:960px;
margin:0 auto;
text-align:left;
}
@media (max-width: 767px) {
	#wrap{ width:94%; margin:3% auto;}
}

/* top_info
------------------*/

#wrap #top_info{
border-bottom:1px solid #dfdfdf;
border-top:1px solid #dfdfdf;
width:470px;
height:98px;
overflow:scroll;
padding-top:15px;
padding-bottom:15px;

}
#wrap #top_info dl{
padding-bottom:15px;
}
#wrap #top_info dl dt{
	float:left;
	width:110px;
padding: 0 0 0 10px;
font-weight:bold;
color:#441c06;
font-size:93%;
}
#wrap #top_info dl dd{
	float:left;
	width:330px;
font-size:108%;
}
@media (max-width: 767px) {
#wrap #top_info{
 width:100%;
}
}


/* box
-------------------------*/
#wrap .box{ width:292px;
border:1px solid #dfdfdf;
padding:10px 8px;
margin-right:15px;
}
#wrap .box h4{ margin-bottom:5px;}
#wrap .box p{ margin-top:10px; font-size:108%;}
#wrap .box.right{
	margin-right:0;}

@media (max-width: 767px) {
#wrap .box,#wrap .box.right
{ width:100%; padding: 10px 0;
	text-align: center;
	margin-bottom: 20px;
}
}


/* paetop
-------------------------*/

#pagetop{
	padding-top:80px;
	text-align:right;
	clear:both;}

@media (max-width: 767px) {
#pagetop{display: none!important;}
}

/* footer
-------------------------*/
#footer{
	background: #f2f2f2;
}
#footer .inner{
width:960px;
margin:0 auto;
text-align:left;
padding-bottom:20px;
}

#footer #footer_logo{
padding:20px 0 0 5px;
}
#footer .txt{
font-size:93%;
padding:10px 0 0 5px;
}

#copyright{
	width:960px;
	margin:0 auto;
	text-align:right;
	padding-top:10px;
font-size:93%;
color:#999;
padding-bottom:10px;
}
@media (max-width: 767px) {
#footer .inner{
width:94%; margin:3% auto;
}


#copyright{
width:94%; margin:3% auto;
	padding-top:0px;

}}



/* under
---------------------------------*/


/* bread
-------------------------*/
#bread{ text-align:right;}
#bread li{ display:inline; padding-left:5px; font-size:85%;}
#bread li a{ padding-right:5px;}



/* point
-------------------------*/
.photo{margin-top:15px; }
/* point
-------------------------*/
.point{ background:url(../img/bg_point.gif) center 0px no-repeat; padding-top:55px; margin: auto;}
.point_02{ background:url(../img/bg_point.gif) center bottom no-repeat; padding-bottom:70px; margin: auto auto 50px;}
.point_03{ background:url(../img/bg_point.gif) center top no-repeat; padding-top:70px; margin:auto;}

@media (max-width: 767px) {
.photo{margin:15px auto;text-align: center;}
.w540.right,.w420.left,.w470.left,.w470.right,.w420.left,.w540.right,.photo.left{width:94%; margin:3% auto;} 
.point_02{text-align: center;}
.point_02 .w540.right{ text-align: left; padding:0 20px;}
	
}


/* price_table
-------------------------*/
.price_table { border-top:1px solid #ecd2b8; width:960px; margin-top:15px;}
.price_table th{ border-bottom:1px solid #ecd2b8; padding:10px 15px; width:240px; font-size:108%; font-weight:bold; vertical-align:top;}
.price_table th span{font-size:77%;}
.price_table td{ border-bottom:1px solid #ecd2b8; border-left:1px solid #ecd2b8; padding:10px 15px;}
.price_table td.price{ border-left:none; text-align:right;}

@media (max-width: 767px) {
.price_table { width:94%; margin:3% auto;}
.price_table th{ width:50%; }
.price_table td{ width:40%; }
.price_table td:last-child{ width:10%; }
.price_table td.price{ border-left:none; text-align:right;}
}


/* dressing
-------------------------*/
@media (min-width: 768px) {
#dressing{ background:url(../../dressing/img/bg.jpg) center top no-repeat; width:960px; height:500px;  margin:30px auto 0; position:relative; margin-bottom:0px; padding:0;}
#dressing h1{ position:absolute; top:50px; left:400px;}
#dressing #dprice{ position:absolute; top:130px; left:430px; font-size:108%;}
#dressing #dprice dl{ width:450px; padding-bottom:20px;}
#dressing #dprice dt{ float:left; width:250px;}
#dressing #dprice dd{ float:left; width:200px; color:#ff0000; font-weight:bold;}
#dressing #dtxt{ position:absolute; top:310px; left:430px; font-size:153.9%}
#dressing #dtxt02{ position:absolute; top:360px; left:430px;}
#dressing #dtxt03{ position:absolute; top:390px; left:430px; font-size:120%}
}

@media (max-width: 767px) {
#dressing{ background:url(../../dressing/img/bg_sp.jpg) center bottom no-repeat; width:100%; padding-bottom: 500px; margin:30px auto 0; position: static}
#dressing h1{}
#dressing #dprice{ font-size:108%; margin:30px 0 0 20px}
#dressing #dprice dl{display: flex;padding-bottom:20px;}
#dressing #dprice dt{ float:left; width:250px;}
#dressing #dprice dd{ float:left; width:200px; color:#ff0000; font-weight:bold;}
#dressing #dtxt{  margin:30px 0 0 20px; font-size:153.9%}
#dressing #dtxt02{ margin:30px 0 0 20px;}
#dressing #dtxt03{ margin:10px 0 0 20px; font-size:120%}
}