body {
  margin: 0;
  padding: 0;
  color: #303030;
  font-family: serif, sans-serif;
  background: #ffffff;
  /* background-image: url(/img/country-quilt.png); */
}

#header {
  background: #8B060C;
  padding: 0px 0px;
  text-decoration: none;
  border-bottom: 1px solid #cccccc;
}

#header_main {
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: space-between; */
  background: #ffffff;
}
#header_main div {
  background-image: url(/img/common/head_top.png);
  height: 300px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 1200px;
  margin: 0px auto;
}
#id-top #header_main div {
  background-image: url(/img/common/head_top.png);
  height: 450px;
}
#cart-list #header_main div {
  background-image: url(/img/common/head_cart.png);
}
#id-sphinahl #header_main div {
  background-image: url(/img/common/head_spinahl.png);
}
#id-supplement #header_main div {
  background-image: url(/img/common/head_supplement.png);
}
#id-support #header_main div {
  background-image: url(/img/common/head_support.png);
}
#id-regular #header_main div {
  background-image: url(/img/common/head_regular-service.png);
}
#header_main img {
  /* width: 100%; */
}

#footer {
  background: #eeeeee;
  margin:  0px 0px 0px 0px;
  /* padding: 20px 0px; */
  /* border-top: 2px solid #d71518; */
  margin-top: 80px;
}

#main{
  margin: 0px auto;
  max-width: 1800px;
  padding: 0px 5%;
}
#main_content{
  background: #fefefe;
  padding: 10px 0 20px;
  min-height: 75vh;
}
h1 a {
  text-decoration: none;
  color: #000000;
}
#breadcrumbs ul {
  margin: 0px;
  list-style-type: none;
  font-size: 14px;
}
#breadcrumbs li {
    display: inline-block;
}
#breadcrumbs li+li:before {
    padding: 0 .5rem 0;
    content: "\203A";
}

.logout a {
    padding: 5px;
    margin: 10px;
    border: 1px solid #666666;
    color: #666666;
    font-size: 14px;
    background: #ffffff;
    text-decoration: none;
}
.logout a:hover {
    border: 1px solid #666666;
    color: #000000;
    background: #e0e0e0;
    transition-duration:0.5s;
}

/* display */
.hidden {
  display: none;
}

/* span */
span.span_note {
	color:#ff4500;
	font-size:11px;
}

/* error_list */
ul.error_list {
    border: 1px solid #FF0000;
    background-color: #FFCCCC;
    padding-top: 10px;
    padding-bottom: 10px;
}

ul.error_list li {
    color: #FF0000;
}

/* h_nav */
#h_nav{
	color:#ffffff;
}
#h_nav a {
	color:#ffffff;
	text-decoration:none;
}
#h_nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
#h_nav ul li {
  list-style-type:none;
  margin:0px 8px;
  padding: 0px 20px;
  font-size:14px;
}
#h_nav ul li.site_name {
  font-size:26px;
}
#h_nav ul li {
position: relative;
}
#h_nav ul li ul {
display:none;
margin: 0;
padding: 0;
width: 160px;
position: absolute;
top: 20px;
right: 0;
background:#8B060C;
border: solid 1px #b4b4b4;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
z-index: 1;
}
#h_nav ul li ul li {
	font-size:16px;
  padding: 0px;
  margin: 12px 0px;
  text-align: center;
}
#h_nav ul li:hover > ul {
display:block
}
#h_nav label i{
	display: none;
}
@media screen and (max-width: 988px) {
  #h_nav ul li {
    font-size:11px;
    margin:0px 4px;
    padding: 0px 10px;
  }
}

/* nav_page */
div.nav_page a {
  background: #ffffff;
  border: 1px solid #666666;
  padding: 0.4rem 0.8rem;
  margin: 0.1rem;
  border-radius: 1.5rem;
  text-decoration: none;
  color: #666666;
  display:inline-block;
  font-size:1rem;
}
div.nav_page a:hover {
  background: #bbbbbb;
  color: #ffffff;
  transition: all 0.2s ease-in-out;
}
div.nav_page a.current {
  background: #bbbbbb;
  color: #ffffff;
}

/* general table */
tr.disable-tr {
  color: #EEEEEE;
  background-color: #999999;
}
table th,
table td {
  padding:2px 4px;
}

/* general button */
button {
	border:1px solid #cccccc;
	background: #e8e8e8;
}

button.enable-button {
  color: #333333;
  background-color: #99FF33;
}
button.disable-button {
  color: #EEEEEE;
  background-color: #FF0033;
}

/* general tmb img */
img.tmb_img {
  width: 150px;
  height: 150px;
}
img.item_img {
  width: 250px;
  height: 250px;
}

/* general input */
input {
	border:1px solid #cccccc;
}
textarea {
	border:1px solid #cccccc;
}
input[type="number"] {
	width: 42px;
  padding: 4px 8px;
}

/* signin */
.signin_main,
.signup,
.passwordreset_main {
	width: 400px;
	margin:20px auto 10px;
	padding:20px 20px;
	background:#eeeeee;
	border:1px solid #cccccc;
}
.signin_main h2,
.signup h2,
.passwordreset_main h2 {
	text-align:center;
	margin:2px;
  border-bottom: 1px solid;
}
.signin_main label,
.signup label,
.passwordreset_main label {
	display: block;
	font-size:14px;
	padding:0px 0px 0px;
	color:#444444;
}
.signin_main input,
.signup input,
.passwordreset_main input {
	width: 340px;
	height:17px;
	padding:6px 12px;
	margin-bottom:10px;
}
.signin_main fieldset,
.signup fieldset,
.passwordreset_main fieldset {
	border:none;
}
.signin_main button,
.signup button,
.passwordreset_main button {
  margin-bottom: 12px;
	padding:10px;
	width:95%;
  border-style:none;
  background: #e8704f;
  color:#ffffff;
  font-size:14px;
  font-weight:bold;
}
.signin_main button:hover,
.signup button:hover,
.passwordreset_main button:hover {
	transition-duration:0.5s;
  background: #ff744d;
}
.signin_main div.btn_wrapper,
.signup div.btn_wrapper,
.passwordreset_main div.btn_wrapper {
	margin:4px;
  text-align:center;
}
.signin_main div.signin_forgot {
	text-align:center;
}
.passwordreset_main fieldset p {
  font-size: 14px;
  color: #555555;
}

/* main_content */
.content_main li a {
  text-decoration: none;
  color:#005eb8;
  font-size: 24px;
}
.content_main li a:hover {
  /* text-decoration: underline; */
}

.content_main ul {
	list-style-type: none;
}

/* report */
.report_main h2 {
    background: #1586d7;
    padding: 4px;
    color: #ffffff;
}

.report_post {

}
.report_post p.issued_date {
    margin: 0px;
    font-size: 14px;
    font-weight: bold;
}
.report_post p.reporting_date {
    margin: 0px;
    font-size: 14px;
    font-weight: bold;
}
.report_post h2 {
  margin: 0px;
	font-size: 32px;
  text-align: center;
  background: #e60004;
  color: #fff;
}
.report_post p.cl_name {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}
.report_post h3 {
	background: #666666;
    text-align: center;
    color:#ffffff;
}
.report_post table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px;
  text-align: center;
}
.report_post table th,
.report_post table td {
  padding:2px 4px;
}
.report_post table th {
  border:1px solid #bfbfbf;
  background: #0c92ec;
  color:#ffffff;
}
.report_post table td {
  border:1px solid #bfbfbf;
  background:#fcfcfc;
}
td.td-w80{
	width: 80px;
}
td.td-mw900 {
    max-width: 900px;
    overflow-x: scroll;
}
.column2{
  display: flex;
  border-top: 4px solid #999999;
}
.column2_left,
.column2_right{
	width:50%;
}
.column2 ul {
	list-style-type: none;
	font-size: 12px;
}
.report_post p.note {
    border: 1px solid #cccccc;
    height: 120px;
}

/* edit */
.edit_main {

}

.edit_main .edit_selection_heading {
  color: #0033ff;
  border-bottom: 1px solid;
}

.edit_main table {
  border-collapse: collapse;
  border-spacing: 0;
}
.edit_main table th {
  border:1px solid #bfbfbf;
  background: #e0e0e0;
}
.edit_main table td {
  border:1px solid #bfbfbf;
}

.edit_main .show_stats0 {
  background: #939498;
  color: #000000;
  font-weight: bold;
  text-align: center;
}
.edit_main .show_stats1 {
  background: #4cda64;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

/* edit view */
.view_all_currency_table {
	font-size:12px;
}

.view_all_currency_heading{
	border-top: 1px solid #999999;
    padding-top: 10px;
}

.view_all_report_table {
  width:100%;
}

.view_all_report_table th {
  font-weight:normal;
  text-align:left;
}

.view_all_report_table th:nth-child(1) {
  width:45%;
}

.view_all_report_table th:nth-child(n+2) {
  text-align:center;
}

.view_all_report_table td {
  text-align:right;
}

.view_all_report_table th:nth-child(5) {
	color:#178fe5;
	font-weight:bold;
}
.view_all_report_table td:nth-child(5) {
	color:#000000;
	background:#F0FFFF;
	font-weight:bold;
}
.view_all_report_table th:nth-child(6) {
	color:#09b1bb;
	font-weight:bold;

}
.view_all_report_table td:nth-child(6) {
	color:#000000;
}

tr.tr_top {
	border-top: 2px solid #666666;
}

tr.tr_bottom {
    border-bottom: 2px solid #666666;
}

.view_all_report_table tr {
	border-left: 2px solid #666666;
	border-right: 2px solid #666666;
}


/* layout2 */
#layout2 #header {
  background: #33FFFF;
}

#layout2 #footer {
  background: #33FFFF;
}

/* customerlistmap 階層構造用 */

.nav {
  background: #ffffff;
}

.nav ul.list,
.nav ul.list ul {
  margin:0;
  padding:0;
  list-style-type: none;

}

.nav ul.list ul {
  position:relative;
  margin-left:10px;
}

.nav ul.list ul:before {
  content:"";
  display:block;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:0;

  border-left:1px solid #ccc;
}

.nav ul.list li  {
  position:relative;
  margin:0;
  padding:3px 12px;

  color:#333333;
  text-decoration: none;
  font-size:13px;
  font-weight:normal;
  line-height:20px;
}

.nav ul.list li a {
  position:relative;

  color: rgb(0, 0, 238);
  text-decoration: none;
  font-size:14px;
  font-weight:bold;
  line-height:20px;
}

.nav ul.list li a:hover,
.nav ul.list li a:hover+ul li a {

  color: rgb(85, 26, 139);
}

.nav ul.list ul li:before {
  content:"";
  display:block;
  position:absolute;
  top:10px;
  left: 0;
  width:8px;
  height:0;

  border-top:1px solid #333333;
}

.nav ul.list ul li:last-child:before {
  top: 10px;
  bottom: 0;
  height: auto;
  background: #ffffff;
}
#nav_list span {
 font-weight:bold;
 color:#ff0000;
}

.nav ul.list li.commission_is_0 {
 color:#000000;
 font-weight:bold;
}
.nav ul.list li.commission_is_1 {
  color:#666666;
}


/* css-loaders */
.custom_load.load8 .loader {
    border-top: 1.1em solid rgba(150, 150, 150, 0.2);
    border-right: 1.1em solid rgba(150, 150, 150, 0.2);
    border-bottom: 1.1em solid rgba(150, 150, 150, 0.2);
    border-left: 1.1em solid #666666;
}

/* post */
.post-tos ul {
  list-style-type: decimal;
}

/* h */
h2 {
  margin-top: 62px;
}

/* text */
.text-gray {
  color: #dddddd;
}
.text-sgray {
  color: #707070;
}
.text-lblue {
  color: #4c6df5;
}
.text-red {
  color: #ff0000;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-size-h2 {
  font-size: 32px;
}
.text-size-min {
  font-size: 10px;
}
.text-size-1 {
  font-size: 12px;
}
.text-size-2 {
  font-size: 14px;
}
.text-size-3 {
  font-size: 18px;
}
.text-size-4 {
  font-size: 22px;
}
.text-size-5 {
  font-size: 26px;
}
.text-size-small {
  font-size: 0.8rem;
}
.text-weight-bold {
  font-weight: bold;
}
.text-weight-normal {
  font-weight: normal;
}

/*align */
.align-top {
  vertical-align: top;
}

/* display */
.display-inline-block {
  display: inline-block;
}

/* border */
.border {
  border: 1px solid #000000;
}
.border-top {
  border-top: 1px solid #000000;
}
.border-bottom {
  border-bottom: 1px solid #000000;
}
.border-top-bottom {
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
}
.border-color-theme_red {
  border-color: #8d0202;
}
.border-width-16 {
  border-width: 16px;
}

/* padding */
.padding-12 {
  padding:12px;
}
.padding-24 {
  padding:24px;
}
.padding-left-12 {
  padding-left:12px;
}
.padding-top-bottom-6 {
  padding-top: 6px;
  padding-bottom: 6px;
}
.padding-top-bottom-12 {
  padding-top: 12px;
  padding-bottom: 12px;
}
.padding-top-bottom-36 {
  padding-top: 36px;
  padding-bottom: 36px;
}


/* margin */
.margin-none {
  margin: 0px;
}

.margin-l-r-auto {
  margin-left: auto;
  margin-right: auto;
}

.margin-top-bottom-12 {
  margin-top: 12px;
  margin-bottom: 12px;
}
.margin-top-bottom-36 {
  margin-top: 36px;
  margin-bottom: 36px;
}
.margin-top-36 {
  margin-top: 36px;
}


/* col */
.col1,
.col2,
.col3 {
  display: flex;
}
.col2 div,
.col3 div {
  margin: 12px;
}
.col2 div {
  width: 45%;
}
.col3 div {
  width: 30%;
}

.col-justify-content-center {
  justify-content: center;
}

.col-center {
  /* text-align: center; */
  margin: auto;
}

.col-500w {
  width: 500px;
}

/* table */
table.t-border-collapse {
  border-collapse: collapse;
}

table.t-border {
  border-collapse: collapse;
}
table.t-border th {
  border: 1px solid #000000;
}
table.t-border td {
  border: 1px solid #000000;
}

table.t-bottom-border {
  border-collapse: collapse;
}
table.t-bottom-border th {
  border-bottom: 1px solid #000000;
}
table.t-bottom-border td {
  border-bottom: 1px solid #000000;
}

/* nav */
.nav-list {
  list-style-type: none;
}
.nav-list li {
  margin:0px 8px;
  padding: 0px 20px;
}
.nav-list li a {
  text-decoration: none;
}
.nav-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* bg */
.bg-gray {
  background: #dddddd;
}
.bg-lgray {
  background: #efefef;
}
.bg-white {
  background: #ffffff;
}

/* width */
.w-100 {
  width:100%;
}
.width-200 {
  width:200px;
}
.width-450 {
  width:450px;
}
.width-500 {
  width:500px;
}

.max-width-600 {
  max-width:600px;
}


/* img */
.img-250sq {
width: 250px;
height: 250px;
}
.img-300sq {
width: 300px;
height: 300px;
}
.img-500sq {
width: 500px;
height: 500px;
}
.img-200w {
  width: 200px;
}
.img-250w {
  width: 250px;
}
.img-500w {
  width: 500px;
}
.img-740w {
  width: 740px;
}
.img-150h {
  height: 150px;
}
/* btn */
.btn-middle {
  width: 250px;
}
.btn-small {
  width: 140px;
}

.btn-link {
  padding: 6px 36px;
  background: #9b9b9b;
  border-radius: 0.2rem;
  text-decoration: none;
  color: #ffffff;
  transition: all 0.2s ease-in-out;
}
.btn-link:hover {
  background: #efefef;
  color: #000000;
  transition: all 0.2s ease-in-out;
}
.btn-submit {
  padding: 10px 36px;
  background: #767575;
  border-radius: 0.2rem;
  text-decoration: none;
  color: #ffffff;
  transition: all 0.2s ease-in-out;
}
.btn-submit:hover {
  background: #5e5e5e;
  transition: all 0.2s ease-in-out;
}
.btn-back {
  padding: 10px 36px;
  background: #ffffff;
  border-radius: 0.2rem;
  text-decoration: none;
  color: #333333;
  border: 1px solid #999999;
  transition: all 0.2s ease-in-out;
}
.btn-back:hover {
  background: #cccccc;
  color: #333333;
  transition: all 0.2s ease-in-out;
}

.btn-select {
	border: none;
	background: #8d0202;
	color:#ffffff;
	padding:12px 24px;
	width:300px;
	border-radius:0.2rem;
	font-size:16px;
	margin:12px 0px;
  transition: all 0.2s ease-in-out;
}
.btn-select:hover {
  background: #dcb3b3;
  color:#000000;
  transition: all 0.2s ease-in-out;
}
.btn-del {
	border: 1px solid #666666;
  background: #cccccc;
}
.btn-del:hover {
  color: #f70000;
}
.btn-pay {
  padding: 10px 36px;
  width: 300px;
  background: #0173d4;
  border:none;
  border-radius: 0.2rem;
  text-decoration: none;
  color: #ffffff;
  font-size: 16px;
  transition: all 0.2s ease-in-out;
}
.btn-pay:hover {
  background: #005094;
  transition: all 0.2s ease-in-out;
}
.btn-change {
  padding: 6px 12px;
  background: #ffffff;
  border:1px solid #E16E00;
  border-radius: 0.2rem;
  text-decoration: none;
  color: #E16E00;
  transition: all 0.2s ease-in-out;
}
.btn-change:hover {
  color: #ffffff;
  background: #E16E00;
  transition: all 0.2s ease-in-out;
}

.btn-change-select {
    font-weight: bold;
    padding: 6px 12px;
    background: #E16E00;
    border: 1px solid #E16E00;
    border-radius: 0.2rem;
    text-decoration: none;
    color: #ffffff;
}

/* input */
.input-count {
  padding: 6px 0px 6px 10px;
  width: 60px;
  text-align: center;
  font-size: 16px;
  border: 2px solid #dddddd;
  margin: 0px 12px;
}


/* slider-pro */
.slider-pro .sp-next-arrow:after,
.slider-pro .sp-next-arrow:before,
.slider-pro .sp-previous-arrow:after,
.slider-pro .sp-previous-arrow:before {
  background-color: #dddddd;
}

/* mypage_nav */
.mypage_nav ul {
  display: flex;
  justify-content: center;
  padding-top:18px;
}
.mypage_nav li {
  list-style-type: none;
  text-decoration: none;
  padding:6px 6px;
  margin:0px 6px;
}
.mypage_nav li a {
  text-decoration: none;
}

/* footer-copy */
.footer-copy {
  padding: 12px 0px;
}

/* etc */
.tr-brank {
height: 32px;
}

.table-cart_list td {
  padding-left: 32px;
}

.address_label {
  background: #fff4e7;
  border-radius: 0.2rem;
  padding: 8px;
  color: #000000;
  border: 1px solid #ff9618;
}

table.t-address {
  max-width: 600px;
}
table.t-address th {
  min-width: 82px;
}

.shipping_select table {
	border-collapse: collapse;
  max-width: 520px;
}
.shipping_select table th {
  min-width: 82px;
}
.shipping_select table th,
.shipping_select table td {
  padding: 8px;
  background:#f6f6f6;
}
.shipping_select table tr.tr-first th,
.shipping_select table tr.tr-first td {
  border-top: 1px solid #cccccc;
}
.shipping_select table tr.tr-last th,
.shipping_select table tr.tr-last td {
  border-bottom: 1px solid #cccccc;
}
.shipping_select table th {
  border-left: 1px solid #cccccc;
}
.shipping_select table td {
  border-right: 1px solid #cccccc;
}
.shipping_select .tr-brank th,
.shipping_select .tr-brank td {
  background: #ffffff;
}

.delivered_flg-0 {
  padding:4px;
  color: #ffffff;
  font-size:14px;
  background: #E16E00;
  border-radius: 0.1rem;
}
.delivered_flg-1 {
  padding:4px;
  color: #666666;
  background: #eeeeee;
  font-size:14px;
  border-radius: 0.1rem;
}

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

  #id-top #header_main div {
    background-image: url(/img/common/head_top_sp.png);
    height: 200px;
  }
  #cart-list #header_main div {
    background-image: url(/img/common/head_top_sp.png);
    height: 200px;
  }
  #id-sphinahl #header_main div {
    background-image: url(/img/common/head_top_sp.png);
    height: 200px;
  }
  #id-supplement #header_main div {
    background-image: url(/img/common/head_top_sp.png);
    height: 200px;
  }
  #id-support #header_main div {
    background-image: url(/img/common/head_top_sp.png);
    height: 200px;
  }
  #id-regular #header_main div {
    background-image: url(/img/common/head_top_sp.png);
    height: 200px;
  }

	#footer ul {
		padding: 0px;
		display: block;
	}


	#h_nav label i{
		display: inline-block;
	}
	#h_nav label i{
	    font-size: 24px;
	    color: #ffffff;
	    background: #000000;
	    padding: 12px;
  }

	#h_nav ul {
	  display: none;
	}
	#h_nav input[type="checkbox"]:checked + ul{
	  display: inline;
	}
	#h_nav ul {
	  text-align:center;
	  padding:0px;
	  margin: 0px;
	}
	#h_nav ul li.site_name {
	  display: none;
	}
	#h_nav ul li.parent_list {
	  display: none;
	}
	#h_nav ul li {
	  border-bottom:1px solid #333333;
	  padding:6px 0px;
    font-size: 18px;
	}
	#h_nav ul li:hover > ul {
		display:block
	}
	#h_nav section {
	  display: inline;
	}


	.col2 {
		display:block;
	}
	.col2 div {
		width:auto;
	}
	.col3 {
		display:block;
	}
	.col3 div {
		width:auto;
	}
  .width-450 {
    width: 100%;
  }
  .width-500 {
    width: 100%;
  }
	.img-500w {
		width: 100%;
	}
	.img-740w {
		width: 100%;
	}
	.col-500w {
		width: 100%;
	}
  .img-300sq {
    width: 100%;
    height: auto;
  }
  .img-500sq {
    width: 100%;
    height: auto;
  }
  .btn-select {
    width: auto;
  }

  .table-cart_list tr.tr-first th,
  .table-cart_list tr.tr-first td {
  	display:block;
  }

  .mypage_nav {
  	display:none;
  }

  table.responsive-table th {
  	display: block;
  }
  table.responsive-table td {
  	display: block;
  }
  table.responsive-table.t-border tr:not(:first-child) th {
    border-top: none;
  }
  table.responsive-table.t-border td {
    border-top: none;
  }

  .card_form .form-row {
      width: auto;
      float: none;
  }

  table.table-subscription,
  table.table-payment {
    width: 100%;
    table-layout: fixed;
    overflow-wrap: break-word;
  }

  table.table-subscription td,
  table.table-payment td {
  	display: block;
  }
  table.table-subscription span,
  table.table-payment span {
  	display: inline;
  }
  table.table-subscription tr:first-child,
  table.table-payment tr:first-child {
  	display: none;
  }
  table.table-subscription tr td:last-child,
  table.table-payment tr td:last-child {
  	border-bottom: 1px dotted #666666;
  }

  /* signin */
  .signin_main,
  .passwordreset_main,
  .signup {
    width: 90vw;
    margin: 20px 0px;
    padding: 0px;
  }
  .signin_main input,
  .passwordreset_main input,
  .signup input {
    width: 90%;
    height: 17px;
    padding: 6px 12px;
    margin-bottom: 10px;
  }
  .signup textarea {
    width: 90%;
    height: 17px;
    padding: 6px 12px;
    margin-bottom: 10px;
  }

}