@charset: "UTF-8";
body{
	min-width: 375px;
	overflow: scroll;
}

h1{
	margin: 0.25rem 0;
	font-size: 1rem;
	font-weight: bold;
}

/* background-color style */
.bg-pale-orange{
	background-color: #FFF8F3;
}
.bg-orange{
	background-color: #E7A100;
}
.bg-firebrick,
.bg-red{
	background-color: #CB2F2C;
}

.firebrick, .firebrick a{
	color: #CB2F2C;
}

/* button style */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-outline-grey,
.btn-outline-grey:hover,
.btn-outline-grey:focus,
.btn-outline-grey:active,
.btn-outline-dark,
.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active,
.btn-cancel,
.btn-cancel:hover,
.btn-cancel:focus,
.btn-cancel:active,
.btn-info,
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-outline-info,
.btn-outline-info:hover,
.btn-outline-info:active,
.btn-outline-info:focus{
	font-size: 0.875rem;
	font-weight: bold;
	padding: 0.625rem;
	line-height: 1.25rem;
}
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.disabled,
.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-info,
.btn-info:hover,
.btn-info:active,
.btn-info:focus
.btn-info.disabled
{
	color: white;
}
.btn-outline-primary{
	color: #FF5700;
	background-color: white;
}
.btn-outline-primary:hover{
	color: #ff681a;
    background-color: white;
    border-color: #ff681a;
}
.btn-outline-dark:hover{
    color: #212529;
    border-color: #212529;
	background-color: white;
}
.btn-lg,
.btn-lg:hover,
.btn-lg:focus,
.btn-lg:active,
.btn-lg.disabled{
	padding: 0.9375rem 1rem;
}

.btn-more,
.btn-more:hover,
.btn-more:focus,
.btn-more:active{
	font-size: 0.9375rem;
	position: relative;
}
.btn-more:after{
    content: "";
    display: inline-block;
    background-image: url(/wao_img/sp/caret-right.svg);
    position: absolute;
    width: 0.375rem;
    height: 0.75rem;
    background-repeat: no-repeat;
    right: 3%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.btn-cancel,
.btn-cancel:hover,
.btn-cancel:focus,
.btn-cancel:active{
	background-color: #919191;
	font-size: 0.9375rem;
	position: relative;
	color: white;
}

.btn-outline-grey{
    border-color: #bebebe;
}

.btn-right-arrow, .btn-left-arrow{
	position: relative;
}
.btn-right-arrow:after{
    content: "";
    display: inline-block;
    background-image: url(/wao_img/sp/caret-right.svg);
    position: absolute;
    width: 0.375rem;
    height: 0.75rem;
    background-repeat: no-repeat;
    right: 4.58%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.btn-left-arrow:after{
    content: "";
    display: inline-block;
    background-image: url(/wao_img/sp/caret-left.svg);
    position: absolute;
    width: 0.375rem;
    height: 0.75rem;
    background-repeat: no-repeat;
    left: 6.87%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* button icon style */
.btn-icon{
	position: absolute;
	left: 10%;
	top: 50%;
	transform: translate(-50%, -50%);
}
input.font-awesome{
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

/* form other style */
.form-select{
	border-color: #E6E6E6;
}
.form-control.disabled,
.form-select.disabled{
	background-color: #e9ecef;
	opacity: 1;
	pointer-events: none;
}
.form-select.text-end{
	direction: rtl; 			/* for safari */
}

/* font common class style */
.fs-10{
	font-size: 0.625rem !important;
}
.fs-11{
	font-size: 0.6875rem !important;
}
.fs-12{
	font-size: 0.75rem !important;
}
.fs-13{
	font-size: 0.8125rem !important;
}
.fs-14{
	font-size: 0.875rem !important;
}
.fs-15{
	font-size: 0.9375rem !important;
}
.fs-16{
	font-size: 1rem !important;
}
.fs-18{
	font-size: 1.125rem !important;
}
.fs-20{
	font-size: 1.25rem !important;
}
.fs-22{
	font-size: 1.375rem;
}
.fs-25{
	font-size: 1.5625rem;
}
.text-elipsis{
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.text-elipsis-2line{
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* img style */
.object-fit-cover{
	object-fit: cover;
}

/* price icon style */
.price{
	font-size: 0.6875rem;
	position: relative;
}
.price:before{
	content: url(/wao_img/sp/yen-circled.svg);
	margin-right: 0.1875rem;
	color: #FF5700;
	vertical-align: middle;
}

/* header-orange style */
.h-orange{
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: bold;
	padding: 0.5rem;
	margin: 0;
	background-color: #FACA7B;
}

/* progress bar style */
.progressbar {
	display: flex;
	flex-wrap: wrap;
}
.progressbar .item {
    position: relative;
    width: 33.333%;
	height: 2.5rem;
    text-align: center;
    align-items: center;
	padding: 0.625rem 0;
    justify-content: center;
    background: #F5F5F5;
	font-size: 0.875rem;
    color: white;
	font-weight: bold;
}
.progressbar .item:not(:last-child)::after{
	position: absolute;
	content: "";
	top: 0;
	z-index: 1;
	left: 100%;
	display: inline-block;
	border-style: solid;
	border-width: 1.25rem 0 1.25rem 1rem;
	border-color: transparent transparent transparent black;
}
.progressbar .item.active{
	background-color: #11BEAE;
}
.progressbar .item.active:not(:last-child)::after{
	border-color: transparent transparent transparent #11BEAE;
}
.progressbar .item.prev{
	background-color: #F0F0F0;
	color: #464646;
}
.progressbar .item.prev:not(:last-child)::after{
	border-color: transparent transparent transparent #F0F0F0;
}
.progressbar .item.next{
	background-color: #DCDCDC;
	color: #464646;
}
.progressbar .item.next:not(:last-child)::after{
	border-color: transparent transparent transparent #DCDCDC;
}

/* breadcrumb style */
.breadcrumb{
	padding: 0.25rem 0.5rem;
	margin: 0;
}
.breadcrumb-item,
.breadcrumb-item a{
	color: #919191;
	font-size: 0.625rem;
	text-decoration: none;
}
.breadcrumb-item + .breadcrumb-item::before{
	--bs-breadcrumb-divider: url("/wao_img/sp/chevron-right-breadcrumb.svg");
	margin-top: 0.0625rem;
}

.block{
	display: block;
}

/* hidden if empty */
.empty-hidden:empty{
	display: none;
}

/* owl carousel style */
#insertCartSlider .owl-carousel {
  padding: 0 !important;
}
#insertCartSlider .shohin_detail {
  margin: 0 !important;
}
@media (min-width: 766px) {
  #insertCartSlider .shohin_detail > .row > .col-md-6:first-of-type, #insertCartSlider .shohin_detail > .row > .col-sm-6:first-of-type {
    padding-right: 2.1875rem !important;
  }
}
#insertCartSlider .product-main-image {
  margin-bottom: 0 !important;
}
#insertCartSlider .product-other-images {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-line-pack: start;
  align-content: flex-start;
}
#insertCartSlider .product-other-images a{
  display: inline-block;
  width: 22%;
  height: auto;
  margin: 0;
}
#insertCartSlider .product-other-images a:not(:last-of-type){
  margin-right: 4%;
}
#insertCartSlider .product-other-images img {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}
#insertCartSlider .owl-controls {
  margin: auto;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#insertCartSlider .owl-controls .owl-nav{
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
#insertCartSlider .owl-nav div{
  width: 33px;
  height: 75px;
  background-color: black;
  opacity: 0.6;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#insertCartSlider .owl-nav .owl-prev{
  margin-left: 0px;
  position: relative;
}
#insertCartSlider .owl-nav .owl-prev::before{
    content: '';
    width: 23px;
    height: 23px;
    border: 0px;
    border-top: solid 4px white;
    border-right: solid 4px white;
    -webkit-transform: rotate(-128deg) skewX(16deg);
    transform: rotate(-128deg) skewX(16deg);
    position: absolute;
    top: 34%;
    left: 32%;
}
#insertCartSlider .owl-nav .owl-next{
  margin-right: 1px;
  position: relative;
}
#insertCartSlider .owl-nav .owl-next::before{
    content: '';
    width: 23px;
    height: 23px;
    border: 0px;
    border-bottom: solid 4px white;
    border-left: solid 4px white;
    /* -webkit-transform: rotate( -135deg); */
    -webkit-transform: rotate(-128deg) skewX(16deg);
    transform: rotate(-128deg) skewX(16deg);
    position: absolute;
    top: 35%;
    left: 0%;
}
#insertCartSlider .owl-nav div:hover {
    background-color: grey;
}

#insertCartSlider .cart_img.selected {
    outline-color: #5CBBAC;
    outline-style: solid;
}

.container{
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
.waopulldown{
	margin-bottom: 0.3rem;
	width: 100%;
	position: relative;
}
.waopulldown select{
	padding-left: 1em;
    padding-right: 1em;
	width: 100%;
    height: 2.5rem;
    font-size: 0.8125rem;
    border: 1px solid #C8C8C8;
    border-radius: 4px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color: #505050;
}
.waopulldown:after{
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0.375rem;
	border-top: 0.4rem solid #FF5700;
	border-right: 0.3125rem solid transparent;
	border-left: 0.3125rem solid transparent;
}
.box_with_shadow{
	margin-top: 1rem;
    margin-bottom: 1rem;
    background-color: white;
    box-shadow: 0 1px 5px 1px #ccc;
}
.pager{
	width: 49%;
	padding: 0.625rem;
	display: block;
	color: #505050;
	border: 1px solid #505050;
	border-radius: 4px;
	background-color: white;
	line-height: 1.25rem;
	text-align: center;
	font-size: 0.875rem;
	position: relative;
}
.pager:first-of-type:after{
	content: "";
	width: 0.5rem;
	height: 1rem;
	-webkit-mask-image: url("/wao_img/sp/chevron-left.svg");
	mask-image: url("/wao_img/sp/chevron-left.svg");
	-webkit-mask-size: cover;
	mask-size: cover;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	background-color: #707070;
	position: absolute;
	top: 50%;
	left: 0.75rem;
	transform: translateY(-50%);
}
.pager.disabled:first-of-type:after{
	background-color: #C8C8C8;
}
.pager:last-of-type:after{
	content: "";
	width: 0.5rem;
	height: 1rem;
	-webkit-mask-image: url("/wao_img/sp/chevron-right.svg");
	mask-image: url("/wao_img/sp/chevron-right.svg");
	-webkit-mask-size: cover;
	mask-size: cover;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	background-color: #707070;
	position: absolute;
	top: 50%;
	right: 0.75rem;
	transform: translateY(-50%);
}
.pager.disabled:last-of-type:after{
	background-color: #C8C8C8;
}
.pager.disabled{
	color: #C8C8C8;
	background-color: white!important;
	border-color: #C8C8C8;
}

.star {
  font-size: 20px;
  color: #ccc; /* デフォルト（空星） */
}
.star.full {
  color: #ff8200;
}
.star.half {
  background: linear-gradient(to right, #ff8200 50%, #ccc 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.star.empty {
  color: #e0e0e0; /* 薄い灰色 */
}

.comment-link::before {
  content: "";
  display: inline-block;
  width: 1em; /* 画像サイズに応じて調整 */
  height: 1em; /* 画像サイズに応じて調整 */
  background-image: url('/wao_img/parts/comment-dots.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 0.3em; /* 画像とテキストの間隔 */
  vertical-align: middle;
}