@charset "utf-8";

/*===============================================
●style.css 画面の横幅が769px以上
===============================================*/

/****************** layout all page common ***********************/
html,body {
	height:100%;
}
body {
    line-height:1;
}
a:hover{
	color:#E0623B;
}
a:hover img{
	filter:alpha(opacity=70); /* ie */
	-moz-opacity: 0.7; /* firefox */
	opacity: 0.7; /* chorme */
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
	overflow:hidden
}

/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */

.indent {
	padding-left:1em;
	text-indent:-1em;
}
img{
	max-width: 100%;
	height: auto;
	width /***/:auto;
}
/****************** body ***********************/
body {
	text-align: center;
	/*font-family: メイリオ, Meiryo, "ＭＳ Ｐゴシック", MSPGothic, Helvetica, sans-serif, Osaka;*/
	color:#333333;
	font-size: 15px;
	line-height: 1.6em;

	letter-spacing: 0.05em;
	/* iOS4でのテキストの隙間への対応 */
	-webkit-text-size-adjust: 100%;
	/* 文字サイズの自動調整機能をキャンセル */
}

/****************** header ***********************/
#header{
	margin: 0 auto;
	max-width: 1000px;
	padding-bottom:10px;
	position: relative;
}
#header img{
	vertical-align:bottom;
}
#nav li {
	float:left;
	margin:0;
	padding:0;
	height: auto;
	width: 16.6%;
}
#header .head_btn{
	position: absolute;
	right: 0;
	top: 2px;
	width: 33%;
	max-width: 230px;
}
#header .head_btn li{
	margin: 0 0 0 2%;
	width: 43%;
}
/* CSSストライプ用のcss
#nav_all li{
	float:left;
	height: auto;
	width: 16.6%;
}
#nav_all a{
	display: block;
	width: 100%;
	height: 44px;
	background-image: url(../img/common/navi_all.gif);
	background-size: auto;
}
#nav_all .navi1 a{ background-position: 0px 0px; }
#nav_all .navi2 a{ background-position: -166px 0px; }
#nav_all .navi3 a{ background-position: -333px 0px; }
#nav_all .navi4 a{ background-position: -499px 0px; }
#nav_all .navi5 a{ background-position: -665px 0px; }
#nav_all .navi6 a{ background-position: -831px 0px; }
*/
/****************** wrapper ***********************/
div#shadow {
	margin: 0 auto;
	max-width: 1004px;
	width: 100%;
	box-shadow: 1px 1px 10px 5px #858787;
}
div#wrapper {
	margin: 0 auto;
	max-width: 1000px;
	width: 99%;
	overflow:hidden;
	padding: 6px 0.5% 0 0.1%;
	background-position-x:-1px;
}

/****************** contents ***********************/
#contents {
	width: 74%;
	max-width: 740px;
	float:right;
	padding-bottom:25px;
}
#contents section{ margin-left: 0.8%;}

/****************** contents_one_column ***********************/
#contents_one_column{
	width: 80%;
	margin: 0 auto;
}

/****************** bread ***********************/
div#bread{
	margin: 0 0 4% 2%;
	line-height:1.3em;
	text-decoration: none;
	padding-top: 3%;
}
div#bread div{ float: left; }
div#bread .spacer{ margin: 0 2%; }
div#bread a{
	text-decoration: none;
}
div#bread .current{ font-weight:bold; }
div.breads_fb{
	width:224px;
	height:50px;
	overflow:hidden;
	float:right;
}

/****************** sub_navi ***********************/
section .sub_navi{
	margin: 0 0 6% 0;
	list-style: url(https://dkshared102.ssl-sys.jp/oem-china.net/naire/img/common/left_arrow.gif);
}
section .sub_navi li{
	float: left;
	margin: 0 0 0 6%;
}

/****************** leftnav ***********************/
#leftnav{
	float:left;
	width: 26%;
	max-width:260px;
}
#leftnav li{
	width: 100%;
}
#leftnav .mypage{
	width:96%;
	max-width: 254px;
	border: 1px solid #333333;
	padding: 12px 2px;
}
#leftnav .mypage li{
	width: 48.7%;
}
#leftnav #left_contents li{
	margin-top:3px;
}
#leftnav .flame{
	width: 92%;
	max-width: 240px;
	border: solid 1px #333333;
	margin: 12px auto;
	padding-bottom: 2%;
	text-align: left;
}
#leftnav .flame dt{
	margin: 12px 0 0 -3.8%;
}
#leftnav .left_category dd{
	padding: 4% 0;
	border-bottom: dotted 1px #734100;
}
#leftnav .left_category dd div{
	width: 17%;
	float: left;
	margin:0 4%;
}
#leftnav .left_category dd span{
	padding-top: 4%;
	float: left;
	width: 70%;
	}
#leftnav .left_design dd{
	display: list-item;
	list-style-image: url(https://dkshared102.ssl-sys.jp/oem-china.net/naire/img/common/left_arrow.gif);
	margin-left: 17%;
	padding: 4px 0;
}
#leftnav .member{
	border: 1px solid #333333;
	padding: 16px 0;
	margin: 16px 0;
}
#leftnav .member p{
	color: #E65800;
}
#leftnav .kiyaku {
	margin: 12px 0 ;
	text-align: left;
	line-height: 24px;
}
#leftnav .kiyaku li{
	list-style-image: url(https://dkshared102.ssl-sys.jp/oem-china.net/naire/img/common/left_mini_arrow.gif);
	margin-left: 18%;
	text-align: left;
	width: 77%;
}
#leftnav #cale{
	margin:0 auto;
	width:95%;
}
#leftnav #cale table{ width: 98%; }

/****************** footer ***********************/
#footer {
	margin: 0 auto;
	width: 100%;
	max-width:1000px;
	clear:both;
	padding-top: 12px;
	font-size:100%;
	position: relative;
}
#footer address {
	clear:both;
	font-style:normal;
	padding-top:7px;
	background:#734001;
	color: #ffffff;
}
#footer address a {
	color: #ffffff;
}
#footer  address a:hover{
	color: #E0623B;
}
/* 角丸をつくるCSS */
#footer #home{
	max-width:140px;
	width: 16%;
	background:#734001;
	position: absolute;
	bottom: 26px;
	right: 20px;
}
#footer #home b.rtop{
	display:block;
	background: #ffffff;
}
#footer #home b.rtop b{
	display:block;
	height: 1px;
    overflow: hidden;
	background: #734001
}
#footer #home b.r1{margin: 0 5px}
#footer #home b.r2{margin: 0 3px}
#footer #home b.r3{margin: 0 2px}
#footer #home b.rtop b.r4{
	margin: 0 1px;
	height: 2px;
}
/* 角丸をつくるCSS */
#footer #home a{
	color:#FFFFFF;
	display:block;
	padding:5px 8px;
	font-weight:bold;
}
#footer #home a:hover {
	color: #E0623B;
}

/****************** sitemap ***********************/
#footer #sitemap {
	margin: 0 auto;
	width: 100%;
	max-width:1000px;
	overflow:hidden;
	background:#F7F7E8;
	font-size: 90%;
}
#footer #sitemap h3{
	float: left;
	margin:35px 0 0px 8%;
	padding:4px 4px;
	border:#666666 solid 1px;
	font-size:120%;
}
* html #footer #sitemap h3{
	margin-left:4%;
}
#footer #sitemap div{
	width: 100%;
}
#footer #sitemap dl{
	margin: 35px 0 0 3%;
	float:left;
	max-width:190px;
	width: 19%;
}
#footer #sitemap dt{
	font-weight:bold;
	padding-bottom:5px;
	border-bottom:#666666 solid 1px;
}
#footer #sitemap dd{
	text-align:left;
	line-height:165%;
	float:left;
	padding: 10px 0px 10px 4%;
}
/****************** call ***********************/
.call { margin: 0 0 0 2%;}

/****************** common style ***********************/
.float_left{ float: left;}
.float_right{ float: right;}
.no_display{ display: none; }
.align_right{ text-align: right !important; }
.margin_left20{ margin-left: 20px !important;}
.margin_left8{ margin-left: 8px;}
.margin_left_s{ margin-left: 0.5%; }
.margin_top8{ margin-top: 8px;}
.margin_top16{ margin-top: 16px; }
.margin_top40{ margin-top: 40px; }
.margin_bottom12{ margin-bottom: 12px !important;}
.margin_bottom40{ margin-bottom: 40px !important;}
.margin_right_20{ margin-right: 20px; }
.visible { overflow: visible;}
.border_none { border: none !important;}
.clear_both { clear: both; }
.line_height_1em { line-height: 1em !important; }
.bg_color_ddd { background: #dddddd; }
.bg_color_fff { background: #ffffff !important; }
.margin_top_bottom_20 { margin: 20px 0; }
.font_orange{ color: #E9481A;}
.weight_bold{ font-weight: bold; }
.img_95p { width: 95%; }

@media screen and (max-width: 699px){
body{
	font-size: 70%;
}
#leftnav #cale{
	margin-left: -2.5%;
}
#leftnav #cale table{ width: 70%; }

/* 角丸をつくるCSS */
#footer #home{
	bottom: 24px;
}
#footer #sitemap h3{
	float: none;
	margin:35px 8% 0px 8%;
}
#footer #sitemap div{
	width: 80%;
	margin: 0 auto;
}
#footer #sitemap dl{
	max-width:240px;
	width: 30%;
}
}

@media screen and (max-width: 500px){

/****************** header ***********************/
#nav li{
	width: 33.2%;
	margin:4px 0;
	padding: 0;
}
#nav .second_line{
	clear: both
}
#header .head_btn li{ width: 48%; }

/****************** body ***********************/
body {
	font-size: 14px;
}

/****************** contents ***********************/
#contents {
	max-width: 500px;
	width: 100%;
	float:none;
	padding-bottom:25px;
}
#contents section{
	margin-left: 0px;
}

/****************** sub_navi ***********************/
section .sub_navi li{ margin-left: 10%; }

/****************** leftnav ***********************/
#leftnav{
	float:none;
	width: 100%;
	max-width:260px;
	margin: 0 auto;
}
#leftnav #left_contents{
	display: none;;
}

/****************** sitemap ***********************/
#footer #sitemap dl{
	margin: 35px 0 0 1%;
	width: 48%;
}
/* 角丸をつくるCSS */
#footer #home{
	width:200px;
}
#footer address{
	font-size: 70%;
}
#footer #home{ left: 20px; }
}

/****************** WP ***********************/
/****************** one_column ***********************/
#one_column{
	width: 99%;
	max-width: 800px;
	margin: 0 auto;
}


/****************** detail.php ***********************/
/* デザインエリア全体のcss #design_area */
#design_area {
	width: 98%;
	margin: 0 auto;
}
#design_area .highlight {
	border: 2px solid red;
	box-sizing: border-box;
	border-radius: 6px;
}
#design_area .select_design_category { margin: 0 0 3em 0; }
#design_area .select_design_category ul {
	display: flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	width: 98%;
}
#design_area .select_design_category li {
	width: 46%;
	background: #ccc;
	margin: 0.5em 1%;
	padding: 1em 1%;
	border-radius: 6px;
	cursor: pointer;
}
#design_area .select_design_category li:hover { font-weight: bold; }
#design_area .select_design_category li.selected { background: red; }
#design_area form { display: none; }
/* ラジオボタンのcss */
#design_area form div.button_area {
	border: 4px solid #5A306E;
	font-size: 90%;
}
#design_area form div.button_area p:first-child {
	font-size: 140%;
	font-weight: bold;
}
#design_area form ul {
	display: flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
}
#design_area form label {
	width: 19%;
	margin: 0.5em 0.5%;
	background: #ccc;
	border-radius: 6px;
}
#design_area form label:hover {
	border: 2px #5A306E solid;
	box-sizing: border-box;
	font-weight: bold;
	border-radius: 6px;
}
#design_area form li {
	text-align: center;
	padding: 0.3em 0;
}
#design_area form ul .selected {
	background: #5A306E;
	color: #fff;
	font-weight: bold;
}
#design_area form input[type="radio"] {
	display: none;
	width: 100%;
}
/* デザイン一覧のcss */
#design {
	display: flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	margin: 0.5em auto;
}
#design li {
	width: 19.5%;
	text-align: center;
	margin: 0 0 0 0;
	display: none;
	position: relative;
}
#design li img { width: 90%; }
.design-box .button_set {
	display: none;
	width: 100%;
	height: 100%;
	background: rgba(51,51,51,0.6);
	position: absolute;
	top: 0;
	left: 0;
}
.design-box .button_set div {
	position: relative;
	top: 25%;
}
.design-box button{
	margin: 0.2em 0;
	cursor: pointer;
}
.loading { display: none; }

/* オーダーフォーム用css */
.left {
	width: 24%;
    position: fixed;
    top: 20px;
    left: 0;
    margin: 1em 3%;
}
.right {
	float: right;
	width: 70%;
	background: #F8F3ED;
	padding: 0 0 5em 2%;
}
.left .inputs .color {
    margin: 0.5em 0;
    padding: 0.3em 5%;
    border: #000 2px solid;
    font-weight: bold;
    font-size: 80%;
}
.left .inputs .hyoji1 { border-color: red; }
.left .inputs .hyoji2 { border-color: blue; }
.left .inputs .hyoji3 { border-color: green; }
.left .inputs .hyoji4 { border-color: #D8C625; }
.left .inputs .hyoji5 { border-color: purple; }
.right .product_info {
	display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    margin: 2em 0;
}
.right .product_info .thumb {
	width: 23%;
}
.right .product_info .product_detail {
	width: 70%;
	margin: 0 0 0 3%;
	line-height: 2em;
}
.right .product_info span {
	font-weight: bold;
	font-size: 130%;
}
.right .product_info .description {
	border: 2px solid #C61722;
	padding: 0.5em 3%;
	background: #fff;
	line-height: 1.6em;
}
.right #input_area {
	border: 1px solid #ccc;
	width: 98%;
	background: #fff;
}
.right .area {
	width: 90%;
	margin: 0 auto;
}
.right h2 {
	font-size: 130%;
	background: #734100;
	margin: 2em 0 1em 0;
	padding: 0.6em 3%;
	color: #fff;
}
.right .area div div:not(.step) {
    padding: 0.2em 5%;
    margin: 0.5em 0;
    width: 80%;
}
.right .area .step {
	border: 2px solid #C61722;
	background: #F8F3ED;
	padding: 0.7em 2%;
	margin: 0 0 2em 0;
}
.right .area .step li {
	margin: 0.3em;
	letter-spacing: 0.1em;
}
.right .strs {margin: 1em 0;}
.right .hyoji1 {border: red 3px solid;}
.right .hyoji2 {border: blue 3px solid;}
.right .hyoji3 {border: green 3px solid;}
.right .hyoji4 {border: #D8C625 3px solid;}
.right .hyoji5 {border: purple 3px solid;}
.right div div span { font-weight: bold; }
.right .color1 {color: red;}
.right .color2 {color: blue;}
.right .color3 {color: green;}
.right .color4 {color: #D8C625;}
.right .color5 {color: purple;}
.right .strs input[type="text"] { width: 90%; }

.right .onepoint_list dd ul {
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}
.right #gift {
	margin: 2em 0;
	border: 1px solid #ccc;
	width: 98%;
	background: #fff;
}
#gift .wrapping, #gift .noshi, #gift .message {
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    width: 94%;
    margin: 1em auto;
}
#gift .left_area {width: 39%;}
#gift .right_area {
    background: #F8F3ED;
    width: 50%;
    padding: 2em 3%;
    margin: 0 0 0 1%;
}
#order_area .right .order_button_area {
	max-width: 496px;
	width: 100%;
	margin: 0 auto;
}
#order_area .right input[type="button"] {
    background: url(../img/common/btn_cart.gif) no-repeat;
    width: 100%;
    height: 86px;
    background-size: contain;
    border: none;
}
#order_area .right input[type="button"]:hover {
    opacity: 0.8;
    cursor: pointer;
    cursor: hand;
}

/* アコーディオン用スタイルシート */
form .accordion dt{
    display:block;
    width:98%;
    padding: 0.5em 1%;
    text-align:center;
    border:#999 1px solid;
    cursor:pointer;
}
form .accordion dt span {
    text-align: left;
}
form .accordion dd{
    background:#f2f2f2;
    width:98%;
    line-height:1em;
    text-align:center;
    border:#666 1px solid;
    padding: 0.5em 1%;
    display:none;
}
form .accordion dd li {
    margin: 0.3em 0;
}

/****************** detail.php #design_check ***********************/
#design_check { text-align: center; }
#design_check h2 { margin: 1em auto; }
#design_check img {width: 50%;}
#design_check p > p {
	width: 80%;
	margin: 0.5em auto;
	text-align: left;
	line-height: 2em;
	letter-spacing: 0.08em
}