@charset "UTF-8";

/* ===================================================================
  基本設定
=================================================================== */
/* ===================================================================
  取り置きエリア
=================================================================== */
#keeping-photo{
	position: fixed;
	bottom: 80px;
	background-color: #404040;
	z-index: 500;
	width: 100%;
	text-align: center;
	left: 0;
	height: auto;
	display: block;
	margin: 0;
	padding: 0;
}
#keeping-photo .inner{
	position: relative;
	width: 100%;
}
#keeping-photo .keeping-photo-title{
	position: absolute;
	top: -40px;
	height: 40px;
	width: 920px;
	background: url(../../images/shashinkan/keeping-photo-title.png) no-repeat 0 0; /*2018.07 画像変更*/
	background-size:  484px 81px; /*2018.07 追加*/
	text-indent: -5000px;
	display: block;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	left: 0;
}
#keeping-photo .selected{
	background: url(../../images/shashinkan/keeping-photo-title-cl.png) no-repeat 0 0; /*2018.07 画像変更*/
	background-size:  484px 81px; /*2018.07 追加*/
}
#keeping-photo .inner #tab{
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: #2259ae; /*2018.07 変更*/
	width: 100%;
}
#keeping-photo .inner #keeping-area{
	width: 920px;
	margin-right: auto;
	margin-left: auto;
	display: block;
	position: relative;
	padding: 0;
}
#keeping-area .explain{
	color: black; /*2018.07 変更*/
}
*html #keeping-area .displayMetodSlide{
	width: 928px;
}
#keeping-area .displayMetodSlide{
	background-image: none;
	width: 920px;
	margin: 0;
	padding: 15px 0 0;
	height: 288px;
	text-align: center;
}
.slideShowImage{
	display: inline-table;
	border-collapse: collapse ;
	border-spacing: 0px;
	border: 0px;
	float: left;
	height: 160px;
	position: relative;
	margin: 0px;
	padding: 0px;
	left: 0px;
	top: 0px;
}
.slideAllImage{
	overflow: hidden;
	float: left;
	width: 864px;
	position: relative;
	/*margin:0px; *2018.08 コメントアウト*/
	padding:0px;
	display: block;
	height: 288px;
	position: relative; /*2018.07 追加*/
	z-index: 2; /*2018.08 追加*/
}

.photoLine {
	float: left;
	width:10px; /*2018.07 変更*/
	font-size:1px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
#keeping-area .box {
	float: left;
	width: 206px; /*2018.07 変更*/
	background-color: #eef1f6; /*2018.07 追加*/
	/*background: url(../../images/shashinkan/bg_ke.gif) repeat;  *2018.07 コメントアウト*/
	margin:auto;
	text-align: center;
	vertical-align: middle;
	height: 289px;
}
#keeping-area .box a{
    /*background-color: #E0E0E0;  *2018.07 コメントアウト*/
    /*border: 1px solid #BBBBBB;  *2018.07 コメントアウト*/
    clear: both;
    display: block;
    height: 159px;
    margin: 0 0 0 15px; /*2018.07 変更*/
    padding-left: 15px;
    padding-top: 15px;
    width: 159px;
    /padding-left: 0px;
	/width: 176px;
	float: left;
}
*html #keeping-area .box a{
	margin-left: 10px;
	padding-left: 0px;
	width: 176px;
	height: 176px;
}
.picture {
	width: 144px;
	margin:0px;
	padding:0px;
	display: block;
}
.explain {
	font-size: 12px;
	text-align: left;
	height: 70px;
	padding: 10px 17px 0;
	margin:0px;
	line-height: 16px;
	float: left;
	display: block;
}
#keeping-area .box .date{
	background-color: transparent;
	padding: 10px 15px 5px 7px; /*2018.07 修正*/
	margin: 0;
	font-size: 10px;
	height: 17px;
	line-height: 11px;
	color: white;
}
#keeping-area .box .date span{
	float: left;
	padding-left: 15px;
}
#keeping-area .box .date input{
	float: right;
	padding-right: 25px;
}

/** 矢印 */

.arrowButtonLeft, .arrowButtonRight {
	float: left;
	z-index: 10;
	position: relative;
	cursor: pointer;
	padding: 0px;
	margin: 0px;
}
.arrowleft{
	display: block;
	float: right;
	padding: 0;
	margin: 0;
}
.arrowleft img{
	float: right;
	margin: 0;
	padding: 0;
}
/**2018.08 コメントアウトここから*/
/*.arrowButtonLeft {
	float: right;
	margin: 0;
	padding: 0;
	height: 289px;
}
.arrowButtonRight {
	margin-left:0px;
	margin-right: 10px;
	width: 18px;
	float: left;
	height: 289px;
}*/
/**2018.08 コメントアウトここまで*/

/**2018.08 追加ここから*/
#top-contents .arrowleft{
	display: block;
	float: right;
	padding: 0;
	margin: 0;
}
#top-contents .arrowleft img{
	float: right;
	margin: 0;
	padding: 0;
}


#top-contents .arrowButtonLeft {
	float: right;
	margin: 0;
	padding: 0;
	width: 45px;
	height: 47px;
}
#top-contents .arrowButtonRight {
	margin-left:0px;
	margin-right: 10px;
	width: 45px;
	float: left;
	height: 47px;
}

#keeping-area .arrowButtonLeft {
	float: right;
	margin: 0;
	padding: 0;
	width: 18px; 
	height: 289px;
	position: static;
}
#keeping-area .arrowButtonRight {
	margin-left:0px;
	margin-right: 10px;
	width: 18px;
	float: left;
	height: 289px;	
}

#contents-table .photoLine {
	_width: 0;  /*2018.08 IE6以下用追加*/
}
/**2018.08 追加ここまで*/


/** コンテンツ */
#contents-body{
	margin: 10px auto; /* center on everything else */
	min-width: 920px; 
	text-align: left;
}

/**  2018.07 追加ここから */

/*モーダル用ボタン*/
#top-contents .displayMetodSlide {
	position: relative;
}
#top-contents .slideAllImage {
	margin-left: 18px;
}
/*#top-contents .arrowright {
	float: left;
	width: 45px;
	height: 47px;
	z-index: -1;
}
#top-contents .arrowleft {
	position: absolute;
	top: 0;
	right: 0;
	width: 45px;
	height: 47px;
	z-index: 3;
}
*/
#top-contents .arrowleft:after {
	content: '';
	display: inline-block;
	width: 45px;
	height: 47px;
	background: url(../../images/shashinkan/icon/play_car.png) no-repeat 0 ;
	vertical-align: middle;
	z-index: 4;
	position: absolute;
	top: 115px;
	right: 0px;
}


#top-contents .arrowright:before {
	content: '';
	display: inline-block;
	width: 45px;
	height: 47px;
	background: url(../../images/shashinkan/icon/back_car.png) no-repeat 0 ;
	vertical-align: middle;
	z-index: 5;
	position: absolute;
	top: 115px;
	left: 0px;
}

#top-contents .arrowleft:hover:after,
#top-contents .arrowright:hover:before {
			opacity: .85;
	-webkit-opacity: .85;
	-moz-opacity: .85;
	filter: alpha(opacity=85);	/* IE lt 8 */
	-ms-filter: "alpha(opacity=85)"; /* IE 8 */
}


 /* Retina用ここから*/
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
	#keeping-photo .keeping-photo-title{
		position: absolute;
		top: -40px;
		height: 40px;
		width: 920px;
		background: url(../../images/shashinkan/keeping-photo-title@2x.png) no-repeat 0 0;
		text-indent: -5000px;
		display: block;
		margin: 0 auto;
		padding: 0;
		overflow: hidden;
		left: 0;
	}
	#keeping-photo .selected{
		background: url(../../images/shashinkan/keeping-photo-title-cl@2x.png) no-repeat 0 0;
	}

	#keeping-photo .keeping-photo-title,
	#keeping-photo .selected {
		background-size: 484px 81px;
	}

	#top-contents .arrowleft::after {
		content: '';
		display: inline-block;
		width: 45px;
		height: 47px;
		background: url(../../images/shashinkan/icon/play_car@2x.png) no-repeat 0 ;
		background-size: 45px 47px;
		vertical-align: middle;
		z-index: 4;
		position: absolute;
		top: 115px;
		right: 0px;
	}



	#top-contents .arrowright::before {
		content: '';
		display: inline-block;
		width: 45px;
		height: 47px;
		background: url(../../images/shashinkan/icon/back_car@2x.png) no-repeat 0 ;
		background-size: 45px 47px;
		vertical-align: middle;
		z-index: 5;
		position: absolute;
		top: 115px;
	　　left: 0px;
	}
}

}
 /* Retina用ここまで*/


/* IE7以下用ここから*/
#top-contents .arrowright {
	/width: 18px;
	/height: 189px;
}
#top-contents .arrowleft {
	/width: 18px;
	/height: 189px;
}

#top-contents .slideAllImage {
	/margin-left: 0px;/* 20180829追加*/
}
.slideAllImage {
	/margin: 0;
}
.arrowButtonLeft {
	/width: 18px;
	/height: 189px;
}


#top-contents .arrowright {
	/float: left;
	/width: 18px;
	/height: 288px;
	/background: url(../../images/shashinkan/icon/back_ie.gif) no-repeat 0 ;
	/z-index: 2;
}
#top-contents .arrowleft {
	/position: absolute;
	/top: 0;
	/right: 0;
	/width: 18px;
	/height: 288px;
	/background: url(../../images/shashinkan/icon/play_ie.gif) no-repeat 0 ;
	/z-index: 3;
}

/** 矢印 */
.arrowButtonLeft {
	/float: right;
	/margin: 0;
	/padding: 0;
	/height: 289px;
}
.arrowButtonRight {
	/margin-left:0px;
	/margin-right: 10px;
	/width: 18px;
	/float: left;
	/height: 289px;
}
/* IE7以下用ここまで*/


/*  2018.07 追加ここまで **/

/* ===================================================================
  パンくずエリア
=================================================================== */

/** パン屑リスト全体 */
#breadlist {
	width: 100%;
	text-align: left;
	font-size: 80%;
}

/** パン屑リスト内のspan要素 */
#breadlist span {
	font-weight: bold;
}

/** パン屑リスト内のリンク */
#breadlist a{
	font-weight:normal;
	color:black;
}

/** パン屑リスト内の段落 */
#breadlist p {
	margin: 5px 10px;
}


/* ===================================================================
  共通設定
=================================================================== */

/*-------------------*/
/*orderエリア設定    */
/*-------------------*/
.order h1 {
	font-size: 16px;
	font-weight: bold;
	background-color : #264f91; /*2018.07 変更*/
	padding: 10px 15px; /*2018.07 変更*/
	color: white; /*2018.07 変更*/
	line-height: 16px;
	margin-top: 15px; /*2018.07 変更*/
}
.order h2 {
	font-size: 100%;
	font-weight: bold;
	padding-left: 15px; /*2018.07 変更*/
	padding-top: 14px;
	margin: 0 0 -14px;
}
.order .block2 h2{
	margin: 0 0 4px;
}
.order p,.order ol {
	margin           : 0;
	padding: 14px 15px; /*2018.07 変更*/
}
.order .block{
	background-color: #f4f4f4;
	font-size: 14px; /*2018.08 変更*/
	line-height: 1.5; /*2018.08 変更*/
}
.order .block2{
	background-color: #f4f4f4;
	font-size: 14px; /*2018.08 変更*/
	line-height: 1.5; /*2018.08 変更*/
}

/** 注文のテーブル表示 */

.order table {
	/*width: 795px;*/
	margin: 0;
	border-collapse: separate;
	border-spacing: 3px;
	width: 100%;
	background-color: #f4f4f4;
}
.order th {
	padding: 5px 15px;
	text-align: center;
	font-weight: normal;
	background-color : #cee7ed;
	white-space: nowrap; 
	font-size: 14px; /*2018.08 変更*/
	line-height: 18px;
}
.order th.size{
	background-color: #dcf1ae; /*2018.07 変更*/
}
.order th.color{
	background-color: #bae8e3; /*2018.07 変更*/
}
.order th.num{
	background-color: #f0cbbd; /*2018.07 変更*/
}
.order td.no{
	background-color: #949494;
	color: white;
	font-weight: bold;
}
.order td.even{
	background-color: #6d6d6d;
}
.order td.title{
	background-color: #f7e464; /*2018.07 変更*/
	width: 315px;
}
.order td.date{
	background-color: #efedc8;
}
.order td {
	padding: 5px 10px;
	background-color : #e6e6e6;
	font-size: 14px; /*2018.08 変更*/
	line-height: 18px;
}
.order ul{
	padding-left: 30px; /*2018.07 変更*/
	padding-top: 10px;
	padding-right: 30px; /*2018.07 変更*/
}
.order ul li{
	list-style-position: outside;
	list-style-type: disc;
	margin-bottom: 10px; /*2018.07 追加*/
}
.order .contact{
	padding-left: 30px;
	padding-bottom: 40px;
	padding-top: 10px;
	width: 890px;
}
.order .center{
	padding-left: 320px;
	display: block;
	clear: both;
	height: 40px;
}
*html .order .center{
	width: 920px;
}
.order input.back{
	width: 62px;
	height: 38px;
	padding: 0;
	background: url(../../images/shashinkan/btn_order.png) no-repeat 0 0; /*2018.07 画像変更*/
	background-size: 800px 86px; /*2018.07 追加*/
	text-indent: -5000px;
	overflow: hidden;
	border-style: none;
	display: block;
	margin: 0;
	float: left;
	cursor: pointer;
}
.order input.back:hover{
	background-position: 0 -38px;
	cursor: pointer;
}
.order input.submit{
	width: 224px;
	height: 38px;
	margin: 0 0 0 10px;
	padding: 0;
	background: url(../../images/shashinkan/btn_order.png) no-repeat -62px 0; /*2018.07 画像変更*/
	background-size: 800px 86px; /*2018.07 追加*/
	text-indent: -5000px;
	overflow: hidden;
	border-style: none;
	display: block;
	float: left;
	cursor: pointer;
}
.order input.submit:hover{
	background-position: -62px -38px;
	cursor: pointer;
}
.order input.ordersubmit{
	width: 224px;
	height: 38px;
	margin: 0 0 0 10px;
	padding: 0;
	background: url(../../images/shashinkan/btn_order.png) no-repeat -287px 0; /*2018.07 画像変更*/
	background-size: 800px 86px; /*2018.07 追加*/
	text-indent: -5000px;
	overflow: hidden;
	border-style: none;
	display: block;
	float: left;
	cursor: pointer;
}
.order input.ordersubmit:hover{
	background-position: -287px -38px;
}
/*
.order table.normal th {
	width            : 25%;
}
.order table.normal td {
	width            : 75%;
}
*/

.order span table {
	border-spacing: 0px;
}

/** 必須入力例 */
.must {
	font-size: 80%;
	font-weight: bold;
	color: #aa0000;
}

/** 入力例 */
.annotation {
	font-size: 80%;
}


/*2018.08 追加ここから*/
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
	.order input.back{
		width: 62px;
		height: 38px;
		margin: 0;
	}

	.order input.submit{
		width: 224px;
		height: 38px;
		margin: 0 0 0 10px;
	}

	.order input.ordersubmit{
		width: 224px;
		height: 38px;
		margin: 0 0 0 10px;
	}

	.order input.back,
	.order input.submit,
	.order input.ordersubmit {
		background-image: url(../../images/shashinkan/btn_order@2x.png);
		background-size: 800px 86px;
		background-repeat: no-repeat;
		padding: 0;
		text-indent: -5000px;
		overflow: hidden;
		border-style: none;
		display: block;
		float: left;
		cursor: pointer;
	}
}

.p-notice {
	margin: 0 15px 15px;
	padding: 5px;
	background-color: #fff;
	color: #e8412e;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
}

.sub-note {
	padding: 15px;
	margin-bottom: 15px;
}

.sub-note dl dt {
	font-size: 14px;
    font-weight: bold;
    background-color: #6a94ba;
    padding: 10px 15px;
    color: white;
    line-height: 14px;
    text-align: left;
    margin-bottom: 10px;
}

.sub-note dl dd {
	margin-left: 15px;
	position: relative;
}
/*2018.08 追加ここまで*/


/*-------------------*/
/*お問い合わせ先     */
/*-------------------*/

.contact {
	margin-top: 10px;
	text-align: left;
	position: relative;
	display: block;
}

.contact span {
	font-size        :120%; 
	font-weight      :bold;
}
.contact .gototop{
	position: absolute;
	right: 25px;
	bottom: 38px;
}

.contact .gototop img {
	width: 147px;
	height: 24px;
}

.contact .gototop a:hover {
	background: #4f7bc0;
}

/*-------------------*/
/*centerクラス       */
/*-------------------*/

.center{
	text-align: center;

}

/*-----------------------------------------------------*/
/*IEで拡大率を減らした場合に表示が崩れる問題への対応   */
/*-----------------------------------------------------*/

label {
	zoom: 1;
}

span.lbl {
	zoom: 1;
}

/*-------------------*/
/*a要素              */
/*-------------------*/

a img {
	border: 0;
}

/* ===================================================================
  注文画面設定
=================================================================== */

/** 全角 長 */
.input-long {
	ime-mode:active;
	width: 30em;
}

/** 全角 中 */
.input-middle {
	ime-mode:active;
	width: 15em;
}

/** ご注文枚数 */
.order-number {
	ime-mode:disabled;
	padding-right: 1px;
	text-align:right;
	width: 2em;
}

/** 郵便番号 */
.zipcode {
	ime-mode:disabled;
	padding-right:1px;
	width: 6em;
}

/** 電話番号・FAX番号入力欄 */
.input-phone {
	ime-mode:disabled;
	width: 8em;
}

/** 電話番号・FAX番号入力欄 */
.input-email {
	ime-mode:disabled;
	width: 30em;
}

/** 年 */
.input-year {
	margin-bottom: 2px;
	padding-right: 3px;
	text-align: right;
	width: 3em;
	ime-mode:disabled;
}

/** 年日 */
.input-monthday {
	margin-bottom: 2px;
	padding-right: 3px;
	text-align: right;
	width: 1.5em;
	ime-mode:disabled;
}

.order-size {
	width:24em;
}

/* ===================================================================
  郵便番号検索
=================================================================== */

/** 郵便番号住所検索一覧 */
.zipcodesearch {
	padding: 5px 0;
}

.zipcodesearch h1 {
	font-size: 150%;
	font-weight: bolder;
	background-color : #ffffff;
}

.zipcodesearch p {
	font-size: 80%;
	color: #3f4f76;
	line-height: 150%;
}

.zipcodesearch table {
	width: 360px;
	margin: 0 auto;
	border-collapse  : separate;
	border-spacing   : 1px;
	background-color : #7f7f7f;
}

.zipcodesearch th {
	padding: 5px;
	color: #ffffff;
	background-color : #5d90e7;
}F

.zipcodesearch td {
	padding: 5px;
	text-align: left;
	background-color : #ffffff;
}

.zipcodesearch a {
	color: #2f4f4f;
}

.latest {
	background-color: #C6ECCB;
	border-width: 2px;
	border-style: solid;
	border-color: #FFFFFF;
}

.latest img {
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
}


/* ===================================================================
  注文確認画面設定
=================================================================== */

.inform p,
.inform li {
	font-size: 80%;
}

.inform ol {
	margin-top: 5px;
}

/* ===================================================================
  エラー
=================================================================== */
.err{
	color: red;
}
.noPhoto{
	padding-top: 100px;
	padding-bottom: 200px;
	text-align: center;
	width: 920px;
}
.noPhoto .err{
	color: black;
}