@charset "UTF-8";

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 100%;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 100%;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 100%;
  }
}
@media (min-width: 1500px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1440px;
  }
}

/*フロント*/

.front_page{
	width:100%;
	height: 100vh;
	min-width:350px;
	background-image: url(../img/front_bg.jpg);
	background-position: center 0;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-color: #FFF;
}

/*ショッピングカート*/

.cart{
	width:100%;
	max-width:900px;
}

/*ステップバー*/

.stepBar {
  position: relative;
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
  text-align: center;
  width: 100%;
  overflow: hidden;
  *zoom: 1;
  font-size: 0.8em;
  font-weight:800;
  display: flex;
  
}
.stepBar .step {
  position: relative;
  display: inline-block;
  line-height: 40px;
  padding: 0 20px 0 0px;
  background-color: #eee;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.stepBar .step:before, .stepBar .step:after {
  position: absolute;
  left: -15px;
  display: block;
  content: '';
  background-color: #eee;
  border-left: 4px solid #FFF;
  width: 20px;
  height: 20px;
}
.stepBar .step:after {
  top: 0;
  -moz-transform: skew(30deg);
  -ms-transform: skew(30deg);
  -webkit-transform: skew(30deg);
  transform: skew(30deg);
}
.stepBar .step:before {
  bottom: 0;
  -moz-transform: skew(-30deg);
  -ms-transform: skew(-30deg);
  -webkit-transform: skew(-30deg);
  transform: skew(-30deg);
}
.stepBar .step:first-child {
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.stepBar .step:first-child:before, .stepBar .step:first-child:after {
  content: none;
}
.stepBar .step:last-child {
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.stepBar .step.current {
  color: #FFF;
  background-color: #0096E5;
}
.stepBar .step.current:before, .stepBar .step.current:after {
  background-color: #0096E5;
}
.stepBar.step2 .step {
  width: 50%;
}
.stepBar.step3 .step {
  width: 33.333%;
}
.stepBar.step4 .step {
  width: 25%;
}
.stepBar.step5 .step {
  width: 20%;
}

/*価格表示*/

table.customtable1 {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

table.customtable1 th {
	vertical-align:middle;
	text-align:center;
	font-size:0.875em;
	background:#F2F2F2;
	padding:8px;
	white-space:nowrap;
}

table.customtable1 td {
	padding:8px;
	vertical-align:middle;
	font-size:0.875em;
}

table.customtable1 td input {
	position:static;
	font-size:16px;
	height: 1.6rem;
	padding: 1rem;
	width:90px;
	max-width:90px;
	z-index:999;
}

table.customtable1 th select {
	min-width:100px;
}

table.customtable1 td textarea {
	position:static;
	font-size:12px;
	height: 1.6rem;
	padding: 0.3rem;
	z-index:999;
	text-align:left;
	border-radius: 0px;
}

table.customtable1 td div.sp_price {
	display:none;
}

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

table.customtable1 th.pride_col {
	display:none;
}

table.customtable1 td.pride_col {
	display:none;
}

table.customtable1 td div.sp_price {
	display:block;
}

}


.price_detail {
	width:100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	border: solid 1px #0096E5;
	background-color:#F2F9FF;
	padding:10px;
}

.price_detail div {
	display: flex;
	justify-content: flex-end;
}

.price_detail div.soryo {
	margin-left: 1rem;
}

.price_detail div.total{
	margin-left: 1rem;
}

.price_detail div p {
	margin:0;
	padding:0;
}

.price_detail div span {
	font-size: 0.875em;
}

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

.price_detail {
	width:100%;
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	align-items: center;
	border: solid 1px #0096E5;
	background-color:#F2F9FF;
	padding:10px;
}

.price_detail div {
	display: flex;
	width:100%;
	justify-content: space-between;
}

.price_detail div.soryo {
	margin-left: 0;
}

.price_detail div.total{
	margin-left: 0;
}

}

.point_detail {
	width:100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	border: solid 1px #F90;
	background-color:#FFC;
	padding:10px;
	margin-top:15px;
}

.point_detail div {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.point_detail div p {
	margin:0;
	padding:0;
}

.point_detail div span {
	font-size: 0.875em;
}

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

.point_detail {
	justify-content: center;
}

}

.snav {
  display: flex;
  width: 100%;
  padding:10px;
  font-size:13px;
  justify-content: center;
}

.snav a {
  font-weight:bold;
  margin: 0 8px;
}

.sidenav-dark {
	background-color:#454B4B !important;
}

.sidenav-dark .sidenav-menu .nav-link {
    color: rgba(255, 255, 255, 0.8);
}

.header-simple {
	background-color:#000 !important;
}

.card:not([class*=bg-]) .card-header {
  color: #333;
  font-weight:bold;
}

/*フォーム*/
form select.form-control {
  font-size:16px;
  height: calc(1em + 1.75rem + 2px);
  padding: 0.2rem 1.125rem 0.2rem 0.7rem;
}

form input.form-control {
  font-size:16px;
}

form textarea.form-control {
  font-size:16px;
}

form input.fileup {
  height: calc(1em + 1.75rem);
}

input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
} 

input[type="number"] { 
  -moz-appearance:textfield; 
} 

/*パネル*/

.control_panel {
  border: 1px solid #ccc;
  padding: 1rem;
  background-color:#FAFAFA;
}

/*要素調整*/

.list_select{
	font-size:14px !important;
	height:auto !important;
	padding:5px 8px !important;
}

.list_input{
	font-size:14px !important;
	height:auto !important;
	padding:6px 10px !important;
}

.confirm dl {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.confirm dt {
  font-weight:bold;
  flex-basis: 25%;
  padding: 15px;
  margin:0;
  background-color: #f1f1f1;
  border-bottom: 1px solid #ccc;
}
.confirm dd {
  font-size:1em;
  flex-basis: 75%;
  padding: 15px;
  margin:0;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}
@media screen and (max-width: 768px) {
.confirm dl {
  flex-flow: column;
}
}

/*テーブル*/
.table-responsive table th {
  white-space:nowrap;
  background:#F2F2F2;
}

.table-responsive table td {
  white-space:nowrap;
}

/*価格表示*/

table.customtable2 {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

table.customtable2 input,
table.customtable2 select,
table.customtable2 textarea{
	border:none;
	border-radius:0px;
}


table.customtable2 th {
	vertical-align:middle;
	text-align:center;
	font-size:0.8em;
	background:#F2F2F2;
	padding:8px;
	white-space:nowrap;
}

table.customtable2 td {
	padding:0;
}

table.customtable2 td input {
	position:static;
	font-size:0.9em;
	padding: 0.3rem 1rem;
	width:100%;
	min-width:80px;
	z-index:999;
}

table.customtable2 td select {
	position:static;
	font-size:0.9em;
	width:100%;
	min-width:80px;
}

/*価格表示*/

table.customtable3 {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

table.customtable3 th {
	vertical-align:middle;
	text-align:center;
	font-size:0.8em;
	background:#F2F2F2;
	padding:8px;
	white-space:nowrap;
}

table.customtable3 td {
	padding:8px;
	font-size:0.9em;
}

/*モーダル調整*/

.modal-dialog-fluid {
  max-width: 1100px;
}

/*ローダー*/

#loader-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: rgba(255,255,255,0.8);
  z-index: 2000;
  display:none;

}

#loader {
  height:auto;
  text-align: center;
  color: #af9b65;
  margin-top:-50px;
  font-size: 18px;
  font-weight: 700;
}


/*汎用*/

.min100 {
  min-width:100%;
}

.small2 {
    font-size: 0.875em;
    font-weight: 800;
}

.bg_pink {
	background-color:#FCF;
}

.bg_orange {
	background-color:#FFF1EA;
}

.bg_gray {
	background-color:#E8E8E8 !important;
}

.fixed_lr {
  display: flex;
  justify-content: space-between;
  width:70px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding:5px 10px;
  background-color:#FFF;
  border: solid 1px #CCC;
}

.tit_line {
  display: flex;
  align-items: center;
}
.tit_line:after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: #999;
  margin:0 .4em;
}


  .regulation-container {
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
    height: 8em;         /* 約5行分の高さ（調整可能） */
    overflow-y: auto;    /* 縦スクロールを有効にする */
  }
  .regulation-title {
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: bold;
  }


.font-weight-bold {
  font-weight: 600 !important;
}

.user_memo {
  font-size: 14px !important;
}