@charset "utf-8";

body{
	height: 100%;
	margin:0;
	padding:0;
	text-align:center;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"}
#test_head img{
	width: 100%;
	max-width: 100%;
	margin:0;
	padding:0;
	vertical-align:bottom;}
.usp{
	width: 100%;
	margin: 0;
	padding: 0;
	background: #000;}
.usp ul{
	width: 100%;
	max-width: 1094px;
	margin: 0 auto;}
.usp ul li{
	width: 33.333%;
	margin: 0;
	padding: 0;
	float: left;}
img{
	width: 80%;
	max-width: 1094px;
	margin:0;
	padding:0;
	vertical-align:bottom;}
/* clearfix */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix { display: inline-block; }

.sp{
	display:none;}
.pc{
	display:block;}

ul{
	list-style:none;}

header{
	width: 100%;
	margin: 0;
	padding: 3px 0;
	text-align: center;
	background: #000;}

.w80{
	width: 80%;
	margin-right: 10%;
	margin-left: 10%;
	text-align: center;}

.bg_black{
	background: #000;}
.bg_black2{
	width: 80%;
	max-width: 1094px;
	margin: 0 auto;
	padding: 0 0 40px 0;
	background: rgba(0,0,0,0.90);}
.bg_gray{
	background: #f0f0f0;}
.m0p0{
	margin:0;
	padding: 0;}
.m0p20{
	margin:0;
	padding: 20px 0;}
.m0p40{
	margin:0;
	padding: 40px 0;}
.m0p80{
	margin:0;
	padding: 80px 0;}
.mb10{
	margin-bottom: 10px;}
.mb20{
	margin-bottom: 20px;}
.mb30{
	margin-bottom: 30px;}
.mb40{
	margin-bottom: 40px;}

.bgimg-w{
	width: 100%;
	background-size:100% auto;
	background-repeat: no-repeat;}
.bgimg-h{
	width: 100%;
	background-size:auto 100%;
	background-repeat: no-repeat;}
.basic{
	margin: 0;
	padding: 0;
	text-align: center;}
.button{
	width:70%;
	max-width: 640px;
	margin:20px auto;}
.bg_black2{}

#main{
	background-image: url(img/bg01.jpg);
	background-position: top center;}
#main02{
	background-image: url(img/bg01b.jpg);
	background-position: top center;}
#main03{
	background-image: url(img/bg01c.jpg);
	background-position: top center;}
#main04{
	background-image: url(img/bg01d.jpg);
	background-position: top center;}
#main05{
	background-image: url(img/bg01e.jpg);
	background-position: top center;}
#main06{
	background-image: url(img/bg01f.jpg);
	background-position: top center;}
#main07{
	background-image: url(img/bg01g.jpg);
	background-position: top center;}
#main08{
	background-image: url(img/bg01h.jpg);
	background-position: top center;}
#main09{
	background-image: url(img/bg01i.jpg);
	background-position: top center;}
#spec{
	padding-top: 50px;
	padding-bottom: 50px;
	background-image:url(img/bg02.jpg);
	background-position: top center;
	background-color: #000;}
#silhouette{
	background-image:url(img/bg03.jpg);
	background-position: center;}
#gallery{
	padding-top:30px;
	padding-bottom:50px;
	margin: 0 auto 50px auto;
	background: #F2F2F2;}
#tech01{
	background-image:url(img/bg04.jpg);
	background-position: top center;}
#tech02{
	background-image:url(img/bg05.jpg);
	background-position: top center;}
#tech03{
	background-image:url(img/bg06.jpg);
	background-position: top center;}
#mastertailor{
	background-image:url(img/bg07.jpg);
	background-position: center;
	background-repeat: repeat-y;}
#chara{
	background-image:url(img/bg08.jpg);
	background-position:top;}
#chara1_t,#chara2_t,#chara3_t{
	min-height: 600px;
	border-top: #900 6px solid;}
#chara1_t{
	background-image:url(img/bg09.jpg);
	background-position: bottom center;}
#chara1_p{
	padding-bottom: 40px;
	background:url(img/bg_chara.jpg) repeat;}
#chara2_t{
	background-image:url(img/bg11.jpg);
	background-position: bottom center;}
#chara2_p{
	padding-bottom: 40px;
	background:url(img/bg_chara.jpg) repeat;}
#chara3_t{
	background-image:url(img/bg13.jpg);
	background-position: bottom center;}
#chara3_p{
	background:url(img/bg_chara.jpg) repeat;}
#chara3_price{
	padding-bottom: 20px;
	background-image:url(img/bg_price.jpg);}
#flow{
	background-image:url(img/bg14.jpg);
	background-position:top center;}
#fin{
	background-image:url(img/bg15.jpg);
	background-position:top center;}
#voice{
	background:url(img/bg_chara.jpg) repeat;}

#chara ul{
	width:100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 10px 0 90px 0;}
#shop{
	padding-bottom:20px;}
#shop ul{
	width:100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 0 0 40px 0;}
#chara ul li,#shop ul li{
	width:31%;
	margin: 0 1%;
	float: left;}
#chara ul li img,#shop ul li img{
	width:100%;}
#chara ul li img{
	cursor:pointer;}

#form{
	margin:0;
	padding: 0 0 40px 0;
}
#form form img{
	width:auto;
margin: 0 10px 0 0;}
#form table{
	width:80%;
	max-width:1094px;
	margin: 0 auto 30px auto;
	text-align: left;}
#form table th{
	width: 30%;
	padding:16px 0 8px 0;
	border-bottom: #666 1px solid;}
#form table td{
	padding:16px 0 8px 0;
	border-bottom: #CCC 1px solid;}
#form h1{
	font-size:1.4em;}
#form p{
	width: 80%;
	max-width: 1094;
	margin: 0 auto 20px auto;
	text-align: left;}
#form p a{
	color:#333;}


#form table dl{
	width: 100%;
	margin: 12px 0 0 0;
	padding: 0;
	font-size: 0.9em;}
#form table dl dt{
	margin: 0 0 8px 0;
	padding: 5px;
	background: #666;
	color: #FFF;
	text-align: center;
	line-height: 1.0em;}
#form table dl dd{
	width: 33.33333%;
	margin: 0;
	float: left;}
#form table dl dd a{
	text-decoration: underline;
	color: #666;}
#form table dl dd a:hover{
	text-decoration: none;
	color: #222;}
#form table dl dd img{
	vertical-align: middle;
	margin: 0 2px 0 0;
}


/* 店舗紹介
----------------------------------------------------------------------*/

.tab-content input[type="radio"] {
  display: none;}

.tab-content .tab-box {
	width: 920px;
	margin: 0 auto;}

.tab-content{
	width:80%;
	max-width: 1094px;
	margin: 0 auto 15px auto;}

.tab-content label{
	display:table-cell;
	width:31%;
	max-width: 337px;
	height: 95px;
	margin: 0 1% 15px 1%;}
.tab-content label img{
	width:100%;
	cursor: pointer;}

.tab-content > .tab-box > div {
  display: none;}

#tab1:checked ~ .tab-box > #tabView1 {
  display: block;}

#tab2:checked ~ .tab-box > #tabView2 {
  display: block;}

#tab3:checked ~ .tab-box > #tabView3 {
  display: block;}

#tabView1,#tabView2,#tabView3{
	width:650px;
	padding: 506px 0 0 270px;
	background-repeat: no-repeat;
	background-position: top;}
#tabView1 img,#tabView2 img,#tabView3 img{
	width:100%;}
#tabView1{
	background-image:url(img/shop_ginza.jpg);}
#tabView2{
	background-image:url(img/shop_tokyo.jpg);}
#tabView3{
	background-image:url(img/shop_shinjuku.jpg);}

.totop{
	width:80%;
	max-width: 1094px;
	margin: 0 auto;
	padding: 15px 0;
	text-align: right;
	background-image:url(img/pc_copy.png);
	background-repeat: no-repeat;
	background-position: left center;}
.totop img{
	width:160px;
	cursor:pointer;}



/* SP
----------------------------------------------------------------------*/
@media(max-width: 768px) {

.sp{
	display:block;}
.pc{
	display:none;}

img{
	width: 100%;}

input[type="text"],
textarea {
    padding: 0.8em;
    outline: none;
    border: 1px solid #DDD;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 16px;}
textarea {
    width: 80%;}
select{
	font-size: 16px;}


p.button{
	width:70%;
	margin:0 auto;}
p.button2{
	width:70%;
	margin:0 auto;
	padding: 30px 0;}

p.bg_black2{
	width: 90%;
	margin: 0;
	padding: 0 5% 20px 5%;}

#chara1_t,#chara2_t,#chara3_t{
	min-height: 100px;
	border-top: none;
	background-image:none;}

#chara ul{
	width:100%;
	margin: 0 auto;
	padding:0;}
#chara ul li{
	display: table-cell;
	width:auto;
	margin: 0;
	float: none;}
#chara ul li img,#shop ul li img{
	width:100%;}
#chara ul li img{
	cursor:pointer;}
#fin{
	padding-bottom: 70px !important;}
#spprice{
	width:90%;
	margin: 0 5%;}

#access{
	margin: 0 0 30px 0;
	padding: 30px 0;
	background: #F2F2F2;}
	#access h2{
		margin:0;
		padding: 5px 0;
		text-align: center;
		color: #FFF;
		background: #333;}
	#access a{
		color: #000;}

#sptop{
	width: 60%;
	margin: 0 20%;
	padding: 0 0 80px 0;}

#chara1_p,#chara2_p,#chara3_p{
	margin: 0;
	padding:30px 0 40px 0;
	background-image:url(img/bg_chara.jpg);}

ul.shopcol3{
	width:90%;
	margin: 0 5%;
	padding: 0;
	font-weight: bolder;
	font-size: 0.9em;}
ul.shopcol3 li{
	width: 29%;
	margin: 0 2%;
	padding: 0;
	float: left;}
ul.shopcol3 li a{
	display:block;
	padding: 10px 0;
	text-align: center;
	text-decoration: none;
	color: #FFF;
	border: #CCC 1px solid;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	background: -webkit-linear-gradient(#EEE 0%, #999 88%);
	background: -o-linear-gradient(#EEE 0%, #999 88%);
	background: linear-gradient(#EEE 0%, #999 88%);}
table.access{
	width:90%;
	margin:0 5% 15px 5%;
	padding:0;
	font-size:1.0em;
	text-align: left;}
	table.access th{
		width:30%;
		margin:0;
		padding:8px 0 5px 0;
		text-align:left;
		border-bottom:#CCC 1px solid;}
	table.access td{
		margin:0;
		padding:8px 0 5px 0;
		border-bottom:#CCC 1px dotted;}
p.map{
	width: 90%;
	margin: 0 5% 15px 5%;
	padding: 0;
	text-align: left;}
p.w94{
	margin: 0;
	padding: 0;}

p.mapbutton{
	width:90%;
	margin: 0 5% 10px 5%;
	padding: 10px 0;
	font-weight: bolder;
	font-size: 0.9em;
	border: #999 1px solid;
	border-radius: 8px;
	text-align: center;
	background: -webkit-linear-gradient(#EEE 0%, #999 88%);
	background: -o-linear-gradient(#EEE 0%, #999 88%);
	background: linear-gradient(#EEE 0%, #999 88%);}
	p.mapbutton a{
		text-decoration:none;}




#form_sp{
	padding: 0 0 30px 0;}
#form_sp table{
	width:80%;
	margin:0 10% 30px 10%;
	padding:0;
	text-align: left;}
	#form_sp table th{
		display:block;
		margin:0;
		padding:15px 0 10px 0;
		text-align:left;
		border-bottom:#333 1px dotted;}
		#form_sp table th img{
			width:auto;
			max-width: 60px;
			margin:0 5px 0 0;}
	#form_sp table td{
		display:block;
		margin:0;
		padding:10px 0;
		border-bottom:#333 1px solid;}
		#form_sp table td span{
			color:#666;}

#form_sp form img{
	width:auto;}

#form_sp p{
	width: 80%;}



/* モーダルウィンドウ */
/* ContentsArea
-------------------------- */
#contents {
	margin: 0 auto;
	padding: 10px 0 50px 0;
	width: 100%;
}

#contents p {
	padding: 10px;
}

#open01,
#open02 {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	position: absolute;}

.close_overlay {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	text-indent: -9999px;
	position: absolute;
	background: #000;
	opacity: 0.8;
	z-index: 5;}

.modal_window {
	top: 2%;
	left: 50%;
	margin: 0 0 0 -200px;
	padding:20px 0;
	width: 360px;
	text-align: center;
	display: block;
	position: absolute;
	z-index: 10;
	font-size: 0.9em;
	color:#000;}
	.modal_window ul{
		list-style:none;}
.modal_window ul li{
	margin:0 auto;
	padding: 10px 0;
	border-top: #CCC 1px dotted;}
	.modal_window ul li a{
		color: #FFF;}
.modal_window h2 {
	color: #fff;
	font-size: 1.1em;
	font-weight: bold;}
.modal_window strong{
	margin:0 0 0 40px;
	font-size:1.4em;}
.modal_window p {
	font-size: 0.8em;
	line-height: 160%;
	margin:0 0 0 20px;
	color: #FFF;}

/* CSS3 ModalWindow SET
-------------------------- */
@-webkit-keyframes modalFadeIn {
	0% {opacity:0;display:block;}
	100% {opacity:1;}
}
div#modal div:target,div#modal2 div:target {
	-webkit-animation-name: modalFadeIn; 
  	-webkit-animation-duration: 1s;
  	-webkit-animation-iteration-count: 1;
	opacity: 1;
	display:block;}


footer{
	display:block;
	width:100%;
	margin:0;
	padding:0;
	position:fixed;
	left:0;
	bottom:0;
	z-index: 999;}
	footer img{
		width:100%;
		margin: 0;
		padding: 0;
		vertical-align: bottom;}
	footer ul{
		width:100%;
		margin:0;
		padding:0;}
		footer ul li{
			width:25%;
			margin:0;
			padding:0;
			float:left;}
	footer p{
		width:100%;
		margin:0;
		padding:0;}
	footer.sp div.fb_gmenu,footer.sp div.fb_tel{
		width: 20%;
		height: auto;
		margin:0;
		padding:0;
	float: left;}
	footer.sp div.fb_order{
		width: 60%;
		height: auto;
		margin:0;
		padding:0;
	float: left;}
	footer p a{
		margin: 0;
		padding: 0;
		border: none;}

div.patternorder{
	padding-bottom: 30px;
	background: #000;}
div.patternorder dl{
	width: 80%;
	margin: 0 5%;
	padding:5% 13px;
	color: #FFF;
	border: #FFF 1px solid;
	border-radius: 8px;}
div.patternorder dl dt{
	width:100%;
	margin: 0 0 8px 0;
	padding: 0 0 8px 0;
	font-weight: bolder;
	font-size: 1.2em;
	border-bottom: #FFF 1px solid;}
div.patternorder dl dd{
	width:100%;
	text-align: left;
	margin: 0;
	padding: 0;}
	div.patternorder dl dd strong{
		color: #FF0;}

/*Jabara*/
#jabara{
	width:90%;
	margin:0;
	padding:0 5% 20px 5%;
	background: #000;}
#jabara4{
	width:90%;
	margin:0;
	padding:0 5%;
	background:rgba(0,0,0,0.90);}
#jabara1,#jabara2,#jabara3{
	width:100%;
	margin:0;
	padding:0;
	background-repeat: repeat;}
	#jabara1{
		background-image:url(img/bg09b.jpg);}
	#jabara2{
		background-image:url(img/bg11b.jpg);}
	#jabara3{
		background-image:url(img/bg13b.jpg);}
dl#acMenu{
	width:100%;
	margin:0;
	padding:0;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;}
#acMenu dt{
    display:block;
    width:100%;
	margin:0;}
	#acMenu dt img{
		width:100%;}
#acMenu dd{
	width:100%;
	margin:0;
	padding:0 0 20px 0;
    display:none;}
#jabara #acMenu dd,#jabara4 #acMenu dd{
	width:90%;
	margin:10px 0 0 0;
	padding:10px 5%;
	border: #FFF 1px solid;
	color: #FFF;
	border-radius: 10px;
	text-align: left;
    display:none;}
#jabara #acMenu dt,#jabara4 #acMenu dt{
    display:block;
    width:90%;
	margin:0 5%;}


}

@media (min-width:721px) {

img{
	width: auto;
	max-width: auto;}

#form_sp table{
	width:60%;
	margin:0 20% 30px 20%;
	padding:0;
	text-align: left;}
	#form_sp table th{
		margin:0;
		padding:15px 0 10px 0;
		text-align:left;
		border-bottom:#333 1px dotted;}
		#form_sp table th img{
			width:50px;
			margin:0 5px 0 0;}
	#form_sp table td{
		margin:0;
		padding:10px 0;
		border-bottom:#333 1px solid;}
		#form_sp table td span{
			color:#666;}




}