@charset "utf-8";

body{
	height: 100%;
	margin:0 auto;
	padding:0;
	text-align:center;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"}
.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;}


.endyear{
	margin: 20px auto;
	padding: 10px 3%;
	color: #C00;
	text-align: center;
	font-size: 0.9em;
	border: #c00 1px solid;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;}


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(../lp-ordersuit/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{
	width: 60%;
	margin: 0 auto;
	padding: 0 0 30px 0;}
#form table{
	width:100%;
	max-width: 1366px;
	margin:0 auto 30px auto;
	padding:0;
	text-align: left;}
	#form table th{
		margin:0;
		padding:15px 0 10px 0;
		text-align:left;
		border-bottom:#333 1px dotted;}
		#form table th img{
			width:auto;
			margin:0 5px 0 0;}
	#form table td{
		margin:0;
		padding:10px 0;
		border-bottom:#333 1px solid;}
		#form table td span{
			color:#666;}

#form form img{
	width:auto;}

#form p{
	width: 80%;}



#form_sp{
	padding: 0 0 30px 0;}
#form_sp table{
	width:80%;
	margin:0 auto 30px auto;
	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;
			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(../lp-ordersuit/img/bg09b.jpg);}
	#jabara2{
		background-image:url(../lp-ordersuit/img/bg11b.jpg);}
	#jabara3{
		background-image:url(../lp-ordersuit/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;}




}