﻿/* CSS Document */

@charset "utf-8";

/* ---------------------------------------------------------------- */
/* html5 */
/* ---------------------------------------------------------------- */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

/* ---------------------------------------------------------------- */
/* 全体の設定 */
/* ---------------------------------------------------------------- */

html, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/* ---------------------------------------------------------------- */
/* common */
/* ---------------------------------------------------------------- */

*{
	margin:0px;
	padding:0px;
}
body{
	font-size:12pt;
	color:#151515;
	text-align:center;
	background-color:#F2F0F0;
}

p{ line-height:20px;}


h1 {
	color:#555;
	font-size:75%;
	text-align:left;
}
h2{
	text-align:left;
	font-size:110%;
	font-weight:bold;
	color: #647520;	
	margin-top:10px;
	margin-bottom:20px;
	padding:1px 3px;
	border-bottom: dotted 3px #ccc;
}
h3{
	color:#493011 ;
	margin-top:30px;
	margin-bottom:30px;
	border-left:7px solid #222222;
	padding-left:15px;
    font-size: 150%;
}

ul li{
	list-style:none;
}

img{
	border:0;
	vertical-align:bottom;
	vertical-align：text-bottom;
}
p{
	margin-bottom:15px;
}

a{color:#900;}
a:visited{}
a:hover{text-decoration:underline;}
a:hover img{opacity: 0.7;}

/* CLEARFIX */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* ul は全てclearfix */ 

ul:before, ul:after { content: ""; display: table; }
ul:after { clear: both; }
ul { zoom: 1; }



.button_div input[type="button"], .button_div input[type="submit"], .button_div button{
  width:300px;
  display: inline-block;
  text-decoration: none;
  padding: 14px 18px;
  margin-bottom: 0;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #cccccc;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  
  -webkit-appearance: none;
}



/* ---------------------------------------------------------------- */
/* container */
/* ---------------------------------------------------------------- */

#container {
	margin-left: auto;
	margin-right: auto;
	width: 100%;

	background:#FFF;
	background-color:white;
	border-left:1px solid #aaa;
	border-right:1px solid #aaa;
}

.lt-ie9 #container {

}

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

#header{
	margin:0 ;
	background:#FFF;
	text-align:center;
	margin-bottom:30px;
}
#header img{
	width:100%;
}

#sp_header, #sp_footer{
	display:none;
}
#sp_step_flow{
	display:none;
}

header li{
	font-size:90%;
}

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

#contents{
	width:100%;
	margin:0 auto;
	text-align:left;
	background:#fff;
}
#contents:after {content:".";display:block;visibility:hidden;height:0.1px;font-size:0.1em;line-height:0;clear: both;}
#contents{zoom:1;}

/* ---------------------------------------------------------------- */
/* footer */
/* ---------------------------------------------------------------- */

#footer{
	width:100%
	margin:0;
	background:#FFF;
	text-align:left;
	position:relative;
}

footer{
	font-size:90%;
}

/* ---------------------------------------------------------------- */
/* フォーム */
/* ---------------------------------------------------------------- */


input[type="text"], input[type="password"], select, textarea {
	padding:5px;
	-webkit-appearance: none; 
	-webkit-border-radius: 5px; 
	-webkit-box-shadow: 0 2px 2px #CCC; 
}


/* ---------------------------------------------------------------- */
/* other */
/* ---------------------------------------------------------------- */

.sp_only{
	display:none;
}

#step_flow{
	text-align:left;
}
#profile_box{
	text-align:center;
}
#step_flow img{
	width:100%;
	max-width:365px;
}
#profile_box img{
	width:100%;
	max-width:780px;
}

#profile_pc_div{
	text-align:center;
	background-color:#333;
}
#profile_pc_div .inner{
	width:100%;
	max-width:960px;
	margin-left:auto;
	margin-right:auto;
}


/* ---------------------------------------------------------------- */
/* 一般 */
/* ---------------------------------------------------------------- */

b{
	font-weight:bold;
}
.bold{
	font-weight:bold;
}
.kome{
	font-weight:bold;
	color:orange;
	font-size:90%;
}
.red{
	color:#990000;
}
.small{
	font-size:85%;
	color:#555;
}
.center{
	text-align:center;
}
.w100{
	width:100%;
}
.w95{
	width:95%;
}
.w90{
	width:90%;
}
.w80{
	width:80%;
}
.w75{
	width:75%;
}
.w70{
	width:70%;
}
.w60{
	width:60%;
}
.w50{
	width:50%;
}
.w40{
	width:40%;
}
.w30{
	width:30%;
}
.w25{
	width:25%;
}
.w20{
	width:20%;
}
.fsize100{
	font-size:100%;
}
.fsize110{
	font-size:110%;
}
.fsize120{
	font-size:120%;
}
.fsize90{
	font-size:90%;
}
.fsize80{
	font-size:80%;
}

.yellow_box{
	border-top:1px solid #ccc;
	background-color:#FFFFCC;
}

.mbottom50{
	margin-bottom:50px;
}
.mbottom40{
	margin-bottom:40px;
}
.mbottom30{
	margin-bottom:30px;
}
.mbottom20{
	margin-bottom:20px;
}
.mbottom15{
	margin-bottom:15px;
}
.mbottom10{
	margin-bottom:10px;
}


/* ---------------------------------------------------------------- */
/* fbox */
/* ---------------------------------------------------------------- */

.fbox{
	clear:both;
}
.fbox ul{
	list-style:none;
	clear:both;
}
.fbox .fA{
	width:15%;
	float:left;
	text-align:center;
}
.fbox .fB{
	width:40%;
	float:left;
	text-align:left;
}
.fbox .fC{
	width:10%;
	float:left;
	text-align:right;
}
.fbox .fD{
	width:10%;
	float:left;
	text-align:right;
}
.fbox .fE, .fbox .fA3R{
	width:15%;
	float:left;
	text-align:right;
}
.fbox .fF, .fbox .fG{
	width:10%;
	float:right;
	text-align:center;
}
.fbox .fA4, .fbox .fA3L{
	width:75%;
	float:left;
	text-align:right;
}
.fbox .fA2{
	width:55%;
	float:left;
	text-align:left;
}
.fbox .fB2{
	width:20%;
	float:left;
	text-align:right;
}
.fbox .fA5{
	width:90%;
	float:left;
	text-align:center;
}
.fbox .fA5 p{
	text-align:right;
}

.fbox .colA{
	background-color:#382B27 ;
	color:white;
	padding-top:7px;
	padding-bottom:7px;
	padding-left:3px;
	line-height:170%;
}
.fbox .colB{
	padding-top:7px;
	padding-bottom:7px;
	padding-left:3px;
	line-height:170%;
	border-top:1px solid #F2EBE2;
}
.fbox .colC{
	padding-top:7px;
	padding-bottom:7px;
	font-siz:90%;
}
.fbox .colD{
	background-color:#D6C9C5 ;
	border-top:1px solid #ccc;
	font-weight:bold ;
	padding-top:7px;
	padding-bottom:7px;
}
.fbox .delete{
	cursor:pointer ;
	font-size:80%;
	border:1px solid #ccc;
	color:#777;
	padding-left:3px;
	padding-right:3px;
}

/* ---------------------------------------------------------------- */
/* fbox2 */
/* ---------------------------------------------------------------- */

.fbox2{
	border:1px solid #A09070;
	clear:both;
	margin-bottom:20px;
}

.fbox2 ul{
	list-style:none;
	clear:both;
	overflow:auto;
}

.fbox2 .colA{
	background-color:#eee ;
}

.fbox2 .fA{
	color:#333;
	padding-bottom:7px;
	padding-right:3px;
	width:25%;
	float:left;
	font-weight:bold;

}
.fbox2 .fB{
	padding-top:3px;
	padding-bottom:7px;
	padding-left:3px;
	float:left;
	width:74%;
}
.fbox2 .colA .fA{
	padding-top:13px;
	text-align:right;
}
.fbox2 .colA .fB{
	padding-top:13px;
	text-align:left;
}
.fbox2 .colB .fA{
	padding-top:10px;
	text-align:center;
}
.fbox2 .colB .fA div{
	margin-top:10px;
}
.fbox2 .colB .mbox{
	margin:7px;
	font-size:90%;
	line-height:160%;
}


.fbox2 .fA100{
	width:100%;
	text-align:center;
	padding-bottom:5px;
}

.fbox2 .fA4{
	width:75%;
	float:left;
	text-align:right;
}

/* ---------------------------------------------------------------- */
/* fbox3 */
/* ---------------------------------------------------------------- */

.fbox3{
	border:1px solid #A09070;
	clear:both;
	margin-bottom:20px;
	line-height:140%;
}

.fbox3 ul{
	list-style:none;
	clear:both;
	overflow:auto;
	background-color:#eee ;
}

.fbox3 .fA{
	padding-top:13px;
	padding-bottom:7px;
	border-top:1px solid #ccc;
	width:25%;
	float:left;
	color:#555;
	font-size:90%;
	text-align:right;
}
.fbox3 .fA span{
	margin-right:13px;
}

.fbox3 .fB{
	padding-top:13px;
	padding-bottom:7px;
	border-top:1px solid #ccc;
	float:left;
	width:75%;
	color:#333;
	font-weight:bold;
}
.fbox3 .fB span{
	margin-left:13px;
}

.fbox3 .mbox{
	font-size:90%;
	line-height:160%;
	margin:10px 30px;
	font-weight:normal;
}

.fbox3 .banchi_attention{
	font-size:85%;
	color:#990000;
	font-weight:normal;
}


/* ---------------------------------------------------------------- */
/* kagoswitch */
/* ---------------------------------------------------------------- */

.kagoswitch{
	clear:both;
	width:100%;
	height:50px;
	margin-left : auto;
	margin-right : auto;
	margin-top:30px;
	margin-bottom:30px;
}
.ks_l{
	float:left;
	padding-left:0px;
}	
.ks_r{
	width:200px;
	height:50px;
	float:right;
	padding-right:0px;
	clear: right;
	text-align:right;
}
.ks_m{
	width:300px;
	height:50px;
	float:right;
	padding-right:0px;
	text-align:right;
}
	
.btn_to_step2{
	background-image:url('../image/to_step2.gif') ;
	border:0px solid #ffffff;
	cursor:pointer;	
}

/* ---------------------------------------------------------------- */
/* その他のID class */
/* ---------------------------------------------------------------- */

#pay_icon_list{
	width:100%;
	text-align:right;
}

#cart_name{
	font-weight:bold;
	text-align:left;
	margin-bottom:15px;
	font-size:120%;
}
#cart_exp{
	clear:both; 
	width:640px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;

}
#cart_flow{
	margin-bottom:10px;
	text-align:center;
}
#cart_exp2{
	font-weight:bold;
	text-align:left;
	font-size:90%;
	margin-bottom:15px;
}
#mizuhiki_img{
	text-align:center;
}
#mizuhiki_img img{
	width:100%;
	max-width:750px;
}


.bgRED{
	background-color:red;
	color:black;
}
.nodeep{
	color:#ccc;
}
.deep{
	color:#FF4900;
}
.nodisp{
	display:none;
}
.check{
	color:#ccc;
}
.check input{
	border-style:none;
	background-color:#FFFFFF;
}

.noITEMS{
	color:red;
	font-weight:bold;
	font-size:120%;
	text-align:center;
	padding:20px;
}

.attention{
	clear:both;
	width:100%; 
	height:15px; 
	margin-top:30px; 
	margin-bottom:30px; 
	margin-left:auto;
	margin-right:auto;
	text-decoration:underline;
	text-align:center;
	color:#990000;
}

.subtitle{
	background-color:#382B27;
	color:white;
	font-weight:bold ;
	padding-top:7px;
	padding-bottom:7px;
	padding-left:7px;
	text-align:left;
	clear:both;
}
.subtitle2{
	background-color:#382B27;
	color:white;
	font-weight:bold ;
	padding-top:7px;
	padding-bottom:7px;
	padding-left:7px;
	text-align:left;
	clear:both;
}

.mark{
	color:red;
	background-color:#EEEEEE;
}


p.black{
	color:#000000;
	font-weight:bold;
}

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

p.white{
	color:#ffffff;
	font-weight:bold;
}
.otodoke{
	text-align:right;
	color:#C42E00 ;
	font-weight:bold;
	padding-right:15px;
}

.apartname{
	padding-top:24px;
	font-size:90%;
}

.hosoku{
	font-size:85%;
	color:#777;
	margin-bottom:10px;
}

.cookie_box{
	text-align:center; 
	margin-top:15px; 
	margin-bottom:15px; 
	font-size:90%;
}

.commentli .mbox{
	margin:10px;
}

/***********************************
           以下マイページ
************************************/

#sns_div ul, #sns_div li{
	list-style:none;
}
#sns_div li{
	float:left;
	width:17%;
	text-align:center;
}
#sns_div li:nth-child(3n){
	width:16%;
}
#sns_div li img{
	max-width:96%;
}


	#mp_contents{
		margin-left:80px;
		margin-right:80px;
		background-color:#fff;
		margin-top:108px;
		box-sizing:border-box;
	}
	#mp_main{
		max-width:1000px;
		margin-left:auto;
		margin-right:auto;
		padding-top:40px;
		padding-bottom:40px;
	}
	.sp_only{
		display:none;
	}
	#content_div {
		padding-left:30px;
		padding-right:30px;
		padding-bottom:30px;
		border-bottom:1px solid #ccc;
	}
	
	.bread{
		padding-top:4px;
		margin-bottom:26px;
	}
	
	#sns_div{
		width:50%;
		margin-left:auto;
		margin-right:auto;
		padding-top:40px;
		padding-bottom:40px;
	}
	#mp_main .inner-cart{
		padding-top:40px;
		padding-bottom:40px;
	}


.bread li{
	display:inline-block;
	float:left;
	margin-right:7px;
	font-size:85%;
	color:#555;
}
.bread li::after {
  content: " >";
}
.bread li:last-child::after {
 	content: "";
}

.btn_div{
	margin-top:40px;
	margin-bottom:60px;
	text-align:center;
}

.mp_h2{
	border-left:0px !important;
	border-bottom:1px solid #eeeeee;
	padding-bottom:20px !important;
}

.footnavi{
	padding-top:20px;
	padding-bottom:20px;
}


/***********************************
           login.php
************************************/

.pref_select{
	margin-bottom:10px;
}

.logbox1{
	width:55%;
	float:left;
	box-sizing:border-box;
	border:1px solid #ccc;
	padding:40px;
}
.logbox1 input[type="text"],
.logbox1 input[type="password"]{
	width:95%;
}

.logbox2{
	width:40%;
	float:right;
	box-sizing:border-box;
	border:1px solid #ccc;
	padding:40px;
}

.registbox dd{
	margin:0px;
	padding:0px;
}
.registbox dd input[type="text"], 
.registbox dd input[type="password"]{
	width:95%;
}
.registbox dd input[type="text"], 
.registbox dd input[type="password"],
.registbox dd select{
	margin-bottom:7px !important;
}

.delete_btn{
	background-color:red;
	float:left;
}
.edit_btn{
	float:right;
}

#message{
	color:red;
	font-weight:bold;
}

.table_title_div{
	background-color:#333;
	color:#fff;
	margin-bottom:0px;
	padding: 2px 10px;
}
.registbox {
	margin-bottom: 30px;
	position: relative;
}

.registbox dl{
	border-bottom: 1px solid #C5C5C5;
	background-color:#FAFAFA;
	display: flex;
    flex-wrap: wrap;
}
.registbox dt{
	width:30%;
	float:left;
	margin:0px;
	display: block;
	border-top: 1px solid #C5C5C5;
	clear:both;
	padding:15px;
}
.registbox dd{
	width:70%;
	float:left;
	margin:0px;
	border-top: 1px solid #C5C5C5;
	border-left: 1px dotted #C5C5C5;
	padding:15px;
}
.registbox dd input[name="zip"], .registbox dd input[name="dzip"]{
	width:45%;
}

.registbox a {
	text-decoration: underline;
}

.registbox a:hover {
	color: #999;
}

.btnbase {
	padding-top: 20px;
}

.registbox .delete_btn {
	position: absolute;
	left: 0;
	bottom: 0;
}

/***********************************
            アイコンほか 
*************************************/


.my_ico{
	margin-top:40px;
}
.my_ico:before{
	content: url(../img/icon_person.png);
	position: relative;
	margin-right:10px;
    vertical-align: middle;
}

.history_ico{
	vertical-align:top;
}
.history_ico:before{
	content: url(../img/icon_cart.png?1);
	position: relative;
	margin-right:10px;
    vertical-align: middle;
}
.delete_ico{
	vertical-align:top;
}
.delete_ico:before{
	content: url(../img/icon_delete.png?1);
	position: relative;
	margin-right:10px;
    vertical-align: middle;
}

.edit_ico{
	vertical-align:top;
}
.edit_ico:before{
	content: url(../img/icon_edit.png?1);
	position: relative;
	margin-right:10px;
	vertical-align: middle;
}

.deliver_ico{
	vertical-align:top;
}
.deliver_ico:before{
	content: url(../img/icon_deliver.png?1);
	position: relative;
	margin-right:10px;
	vertical-align: middle;
}
