/* ADD Tailwind CSS                          */
/*   Author         : infoleaf               */
/*   Created Date   : 2010.11.04             */
/*   Version        : 0.1                    */
/*   Created Detail : Create New             */
/*   Change  Date   : xxxx.xx.xx             */
/*   Change  Detail :                        */
/* �x�[�X�t�H���g�T�C�Y�F10px         */

/* �x�[�X */
html ,body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
html {
  font-size: 62.5%;
}
body {
  font-size: 4.375vw;
}
h1, h2, p {
  margin: 0;
}
#container {
  position: relative;
  min-height: 100%;
}
/* �`�F�[�����ƃJ���[ */
:root {
/*
  --search-color: rgba(230,1,22);
  --sales-floor-color: rgba(230,1,22);
  --favorite-color: 358deg;
  --button-color: rgba(230,1,22);
  --category-color: rgba(230,1,22,0.1);
  --category-bd-color: rgba(230,1,22,0.2);
  --category-select-color: rgba(230,1,22);
  --footer-color: rgba(230,1,22,0.1);
  --category-tx-color: rgba(230,1,22);
  --footer-tx-color: rgba(230,1,22);
*/
/*���E�{�E�X�g�A�l�p�^�[��*/

    --search-color: rgba(153, 44, 48);
    --sales-floor-color: rgba(153, 44, 48);
    --favorite-color: 1111deg;
    --button-color: rgba(153, 44, 48);
    --category-color: rgba(153, 44, 48,0.1);
    --category-bd-color: rgba(0,24,113, 0.1);
    --category-select-color: rgba(153, 44, 48);
    --category-tx-color: rgba(153, 44, 48);
    --footer-color: rgba(153, 44, 48,0.1);
    --footer-tx-color: rgba(0, 0, 0);

/*�~�X�^�[�}�b�N�X�l�p�^�[��1*/
/*
  --search-color: rgba(0,24,113);
  --sales-floor-color: rgba(0,24,113);
  --favorite-color: 358deg;
  --button-color: rgba(255,130,0);
  --category-color: rgba(255,130,0);
  --category-bd-color: rgba(0,24,113, 0.2);
  --category-select-color: rgba(255,255,255);
  --category-tx-color: rgba(255,255,255);
  --footer-color: rgba(255,255,255);
  --footer-tx-color: rgba(0,24,113);
*/
/*�~�X�^�[�}�b�N�X�l�p�^�[��2*/
/*
  --search-color:rgba(255,130,0);
  --sales-floor-color: rgba(0,24,113);
  --favorite-color: 358deg;
  --button-color: rgba(0,24,113);
  --category-color: rgba(255,130,0);
  --category-bd-color: rgba(255,130,0);
  --category-select-color: rgba(255,255,255);
  --footer-color: rgba(255,130,0);
  --category-tx-color: rgba(255,255,255);
  --footer-tx-color: rgba(255,255,255);

/*�~�X�^�[�}�b�N�X�l�p�^�[��3*/
/*
  --search-color: rgba(0,24,113);
  --sales-floor-color: rgba(255,130,0);
  --favorite-color: 358deg;
  --button-color: rgba(255,130,0);
  --category-color: rgba(255,130,0);
  --category-bd-color: rgba(255,130,0);
  --category-select-color: rgba(255,255,255);
  --footer-color: rgba(255,130,0);
  --category-tx-color: rgba(255,255,255);
  --footer-tx-color: rgba(255,255,255);
*/
/*
  --search-color: rgba(100,95,76);
  --sales-floor-color: rgba(100,95,76);
  --favorite-color: rgba(100,95,76);
  --button-color: rgba(100,95,76);
  --category-color: 100,95,76;
  --footer-color: rgba(100,95,76);
*/

    --search-color: rgba(230, 80, 70);
    --sales-floor-color: rgba(30, 140, 90);
    --favorite-color: 1111deg;
    --button-color: rgba(230, 80, 70);
    --category-color: rgba(230, 80, 70, 0.2);
    --category-bd-color: rgba(230, 80, 70, 0.2);
    --category-select-color: rgba(230, 80, 70);
    --category-tx-color: rgba(230, 80, 70);
    --footer-color: rgba(230, 80, 70, 0.2);
    --footer-tx-color: rgba(0, 0, 0);

}
/* �`�F�[�����ƃJ���[(�w�i�F) */
.bg-search {
  background-color: var(--search-color);
}

.bg-sales-floor {
  background-color: var(--sales-floor-color);
}

.bg-favorite {
  filter: invert(15%) sepia(95%) saturate(6932%) hue-rotate(var(--favorite-color)) brightness(95%) contrast(112%);
}

.bg-button {
  background-color: var(--button-color);
}

.bg-category {
  background-color: var(--category-color);
}

.bg-footer {
  background-color: var(--footer-color);
}

.bg-back {
  filter: invert(15%) sepia(95%) saturate(6932%) hue-rotate(250deg) brightness(95%) contrast(112%);
}

/* �`�F�[�����ƃJ���[(�����F) */
.tx-button {
  color: var(--button-color);
}
.tx-sales-floor {
  color: var(--sales-floor-color);
}
.tx-category {
  color: var(--category-tx-color);
}
.tx-footer {
  color: var(--footer-tx-color);
}
/* �`�F�[�����ƃJ���[(��) */
.bd-search {
  border: 1px solid var(--search-color);
}
.bd-button {
  border: 1px solid var(--button-color);
}
.bd-sales-floor {
  border: 1px solid var(--sales-floor-color);
}
/* �`�F�[�����ƃJ���[(����) */
.bd-b-button {
  border-bottom: 1px solid var(--search-color);
}
.bd-b-category {
  border-bottom-color:var(--category-bd-color);
  border-bottom-width:2px;
}
.bd-b-category-select {
  border-bottom-color:var(--category-select-color);
  border-bottom-width:2px;
}
/* �w�i�F */
.bg-color-gray-dark {
  background: rgba(100,95,76);
}
.bg-color-gray {
  background: rgba(100,95,76,0.2);
}
.bg-color-gray-light {
  background: rgba(100,95,76,0.1);
}
.bg-color-gray-light-more {
  background: rgba(100,95,76,0.04);
}
.bg-cart{
  background: rgb(200,6,6);
}
.bg-emergency{
  background: rgba(254,39,0);
}
.bg-color-link{	/* �F */
  background: rgba(0,124,230,1);
}

/* �� */
.bd-color-gray-dark {
  border: 1px solid rgba(100,95,76);
}
.bd-color-gray {
  border: 1px solid rgba(100,95,76,0.2);
}
.bd-color-gray-light {
  border: 1px solid rgba(100,95,76,0.1);
}
.bd-color-gray-light-more {
  border: 1px solid rgba(100,95,76,0.04);
}
.bd-emergency{
  border: 2px solid rgba(254,39,0);
}

/* ���� */
.bd-b-color-gray-dark {
  border-bottom: 1px solid rgba(100,95,76);
}
.bd-b-color-gray {
  border-bottom: 1px solid rgba(100,95,76,0.2);
}
.bd-b-color-gray-light {
  border-bottom: 1px solid rgba(100,95,76,0.1);
}
.bd-b-color-gray-light-more {
  border-bottom: 1px solid rgba(100,95,76,0.04);
}
.bd-b-0-color-gray-dark {
  border-bottom: solid rgba(100,95,76);
}
.bd-b-0-color-gray {
  border-bottom: solid rgba(100,95,76,0.2);
}
/* �����F */
.tx-color-gray-dark {
  color: rgba(100,95,76);
}
.tx-color-gray {
  color: rgba(100,95,76,0.8);
}
.tx-color-gray-light {
  color: rgba(100,95,76,0.5);
}
.tx-color-gray-light-more {
  color: rgba(100,95,76,0.2);
}
.tx-color-money { /* ��z */
  --text-opacity: 1;
  color: #FF0000;
}
.tx-color-link { /* �����N */
  --text-opacity: 1;
  color: #0000ff;
  color: rgba(0, 0, 255, var(--text-opacity));
}



.tx-color1 {
  --text-opacity: 1;
  color: #645f4c;
  color: rgba(100, 95, 76, var(--text-opacity));
}

.tx-color2 {
  --text-opacity: 1;
  color: #181818;
  color: rgba(24, 24, 24, var(--text-opacity));
}

.tx-color3 {
  --text-opacity: 1;
  color: #d9d6c3;
  color: rgba(217, 214, 195, var(--text-opacity));
}

.tx-color4 {
  --text-opacity: 1;
  color: #ff6600;
  color: rgba(255, 102, 0, var(--text-opacity));
}

.tx-color5 {
  --text-opacity: 1;
  color: #ffffff;
  color: rgba(255, 255, 255, var(--text-opacity));
}

.tx-color6 {
  --text-opacity: 1;
  color: #0000ff;
  color: rgba(0, 0, 255, var(--text-opacity));
}


.hover\:tx-color4:hover {
  --text-opacity: 1;
  color: #ff6600;
  color: rgba(255, 102, 0, var(--text-opacity));
}

.bg-color1 {
  --bg-opacity: 1;
  background-color: #f0efe7;
  background-color: rgba(240, 239, 231, var(--bg-opacity));
}

.bg-color2 {
  --bg-opacity: 1;
  background-color: #fafafa;
  background-color: rgba(250, 250, 250, var(--bg-opacity));
}

.bg-color3 {
  --bg-opacity: 1;
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
}

.bg-color4 {
  --bg-opacity: 1;
  background-color: #645f4c;
  background-color: rgba(100, 95, 76, var(--bg-opacity));
}

.bg-color5 {
  --bg-opacity: 1;
  background-color: #ff6600;
  background-color: rgba(255, 102, 0, var(--bg-opacity));
}

.hover\:bg-color5:hover {
  --bg-opacity: 1;
  background-color: #ff6600;
  background-color: rgba(255, 102, 0, var(--bg-opacity));
}
.hover\:tx-color5:hover {
  --text-opacity: 1;
  color: #ffffff;
  color: rgba(255, 255, 255, var(--text-opacity));
}

.bg-color6 {
  --bg-opacity: 1;
  background-color: #eeeeee;
  background-color: rgba(238, 238, 238, var(--bg-opacity));
}

.bg-color7 {
  --bg-opacity: 1;
  background-color: #d9d6c3;
  background-color: rgba(217, 214, 195, var(--bg-opacity));
}

/* ��z */
.bg-color8 {
  background-color: #ff6600;
}

/* �T�C�h���j���[ */
.bg-color9 {
  background-color: #f2f2f2;
}

.btn-color3 {
  --bg-opacity: 1;
  background-color: #d9d6c3;
  background-color: rgba(217, 214, 195, var(--bg-opacity));
}

.btn-color4 {
  --bg-opacity: 1;
  background-color: #ff6600;
  background-color: rgba(255, 102, 0, var(--bg-opacity));
}

.hover\:btn-color4:hover {
  --text-opacity: 1;
  color: #ffffff;
  color: rgba(255, 255, 255, var(--text-opacity));  --bg-opacity: 1;
  background-color: #ff6600;
  background-color: rgba(255, 102, 0, var(--bg-opacity));
}

.btn-color5 {
  --bg-opacity: 1;
  background-color: #99cc66;
  background-color: rgba(153, 204, 102, var(--bg-opacity));
}

.bd-color4 {
  --border-opacity: 1;
  border-color: #645f4c;
  border-color: rgba(100, 95, 76, var(--border-opacity));
}

.bd-color5 {
  --border-opacity: 1;
  border-color: #ff6600;
  border-color: rgba(255, 102, 0, var(--border-opacity));
}

.hover\:bd-color5:hover {
  --border-opacity: 1;
  border-color: #ff6600;
  border-color: rgba(255, 102, 0, var(--border-opacity));
}

/* �t�H���g�T�C�Y */
:root {
  --main-size-10: 3.125vw;
  --main-size-12: 3.75vw;
  --main-size-14: 4.375vw;
  --main-size-15: 4.6875vw;
  --main-size-16: 5vw;
  --main-size-18: 5.625vw;
  --main-size-20: 6.25vw;
  --main-size-25: 7.8125vw;
  --main-size-28: 8.75vw;
  --main-size-30: 9.375vw;
  --main-size-35: 10.9375vw;
  --main-size-40: 12.5vw;
  --main-size-50: 15.625vw;
  --main-size-80: 25vw;
  --main-size-100: 31.25vw;
  --main-size-120: 37.5vw;
  --main-size-150: 46.875vw;
  --main-size-180: 56.25vw;
  --main-size-200: 62.5vw;
}
.text-size10 {
  font-size: var(--main-size-10);
}

.text-size12 {
  font-size: var(--main-size-12);
}

.text-size14 {
  font-size: var(--main-size-14);
}

.text-size16 {
  font-size: var(--main-size-16);
}

.text-size18 {
  font-size: var(--main-size-18);
}

.text-size20 {
  font-size: var(--main-size-20);
}

.text-size28 {
  font-size: var(--main-size-28);
}

.tx-size1 {
  font-size: 36pt;
}
.tx-size10 {
  font-size: 0.8em;
}
.tx-size12 {
  font-size: 1.0em;
}
.tx-size13 {
  font-size: 14pt;
}

.p-1_5 {
  padding:0.375rem;
}

.p-sm {
  padding: 0.125rem;
}

.p-10 {
    padding: 10px;
}
.pt-5pt {
  padding-top: 5px;
}

.pt-12pt {
  padding-top: 12px;
}

.mb-5pt {
  margin-bottom: 5px;
}

.ml-10pt {
  padding-left: 10px;
}

.ml-20pt {
  padding-left: 20px;
}

.ml-45pt {
  padding-left: 45px;
}

.ml-80pt {
  padding-left: 80px;
}

.ml-150pt {
  padding-left: 150px;
}

.pr-20pt{
    padding-right: 20px;
}

.px-10-20pt {
  padding-left: 10px;
  padding-right: 20px;
}

.px-10-10pt {
  padding-left: 10px;
  padding-right: 10px;
}
.px-20pt {
  padding-left: 20px;
  padding-right: 20px;
}

.px-25pt {
  padding-left: 25px;
  padding-right: 25px;
}
.my-5pt {
  margin-top: 5px;
  margin-bottom: 5px;
}

.my-10pt {
  margin-top: 10px;
  margin-bottom: 10px;
}
.mx-10pt {
  margin-left: 10px;
  margin-right: 10px;
}

.mx-10-15pt {
  margin-left: 10px;
  margin-right: 15px;
}
.mx-20-25pt {
  margin-left: 20px;
  margin-right: 25px;
}

.py-10pt {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.px-10pt {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.px-5-10pt {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
}

.px-20pt {
  padding-left: 20px;
  padding-right: 20px;
}
.pl-5pt {
  padding-left: 5px;
}
.mx-hmenu {
  margin-left: 5px;
  margin-right: 2px;
}
.px-hmenu {
  padding-left: 6px;
  padding-right: 3px;
}

.img-wh-1 {
  width: 40px;
  height: 40px;
}
.radio-wh-1 {
  width: 20px;
  height: 20px;
}
.search-w-1 {
  width: 90%;
  height: 40px;
}
.mg-lines0 {
  height: 80px;
}

.mg-lines1 {
  height: 5px;
}
.mg-lines2 {
  height: 40px;
}

.mg-lines3 {
  height:10px;
}

.mg-lines4 {
  height: 20px;
}

.mg-lines8 {
  height: 50px;
}

.mg-lines10 {
  height: 70px;
}

.mx-10px {
  margin-left: 10px;
  margin-right: 10px;
}
.mx-20px {
  margin-left: 20px;
  margin-right: 20px;
}
.pb-5 {
  padding-bottom: 5px;
}

.pb-10 {
  padding-bottom: 10px;
}

.mg-width1 {
  padding-top: 10px;
}
.mg-width4 {
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

.mg-width5 {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
}
.mg-width8 {
  padding-top: 15px;
}
.mg-width10 {
  margin-top: -10px;
  margin-left: 10px;
}

.mg-width11 {
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 20px;
}

.org-border1 {
  border-width: 1px;
  border-color: #645f4c;
}

.org-border2 {
  border-width: 0.1px;
  border-color: #645f4c;
}

.org-border3 {
  border-right-width: 1px;
  border-color: #645f4c;
}

.position-top-center {
  top:50%;
}

/* �� */
.w-10 {
  width: var(--main-size-10);
}
.w-15 {
  width: var(--main-size-15);
}
.w-20 {
  width: var(--main-size-20);
}
.w-25 {
  width: var(--main-size-25);
}
.w-30 {
  width: var(--main-size-30);
}
.w-35 {
  width: var(--main-size-35);
}
.w-40 {
  width: var(--main-size-40);
}
.w-50 {
  width: var(--main-size-50);
}
.w-80{
  width: var(--main-size-80);
}
.w-100{
  width: var(--main-size-100);
}
.w-120{
  width: var(--main-size-120);
}
.w-150{
  width: var(--main-size-150);
}
.w-180{
  width: var(--main-size-180);
}
.w-200{
  width: var(--main-size-200);
}
.w-1_2{
  width:46%;
}
.w-1_3{
  width:32%;
}
.w-49 {
  width: 49%;
}
.max-w-100{
  max-width: var(--main-size-100);
}
/* ���� */
.h-15 {
  height: var(--main-size-15);
}
.h-20 {
  height: var(--main-size-20);
}
.h-30 {
  height: var(--main-size-30);
}
.h-40 {
  height: var(--main-size-40);
}
.h-120 {
  height: var(--main-size-120);
}
.h-full-more {
  height: 110%;
}
.max-h-2_3 {
  max-height: 60%;
}
.min-h-20 {
  min-height: var(--main-size-20);
}
.max-h-modal {
  max-height: 87.5vw;
}
.top-25{
  top:25;
}
.top-65{
  top:65;
}
.top-50{
  top:50%;
}
.left-50{
  left:50%;
}
.transform-y-50{
  transform: translateY(-50%);
}
.transform-50{
  transform: translateY(-50%) translateX(-50%);
}
.radius-10{
  border-radius: var(--main-size-10);
}

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

.webkit-box-one {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow:hidden;
}

.cartItemSumBox {
  background:#fff;
  padding:0;
/*  margin:5px 15px 10px 10px;*/
  border-top:1px solid #645f4c;
  border-left:1px solid #645f4c;
  border-right:1px solid #645f4c;
}

ul.cartItemSumList {
  width:100%;
  display:table;
  padding:0;
  background:#fff ;
  border-bottom:1px solid #645f4c;
}

ul.cartItemSumList li {
  padding-top:10px;
  padding-bottom:10px;
  margin:0;
}

ul.cartItemSumList .label	{
/*  width:25%;*/
  display:table-cell;
}
/*
ul.cartItemSumList .description1	{
  width:20%;
  display:table-cell;
  padding-right:5px;
  border-left:1px solid #645f4c;
}
*/
ul.cartItemSumList b {
    padding-right: 20px;
}

ul.cartItemSumList span {
    padding-right: 20px;
}

ul.cartItemSumList .description2	{
  width:50%;
  display:table-cell;
  border-left:1px solid #645f4c;
  padding-right:5px;
}

.cartItemList span.yen	{
  width:20%;
}

.cartItemList span.itemPrice	{
  width:30%;
}

.tbl-8per  {
  width:8%;
}

.tbl-10per	{
  width:10%;
}

.tbl-15per {
  width:15%;
}

.tbl-20per	{
  width:20%;
}

.tbl-25per	{
  width:25%;
}

.tbl-30per	{
  width:30%;
}

.tbl-35per {
  width:35%;
}

.tbl-45per	{
  width:45%;
}
.tbl-50per	{
  width:50%;
}
.tbl-55per	{
  width:55%;
}
.tbl-60per	{
  width:60%;
}
.tbl-65per	{
  width:65%;
}
.tbl-70per	{
  width:70%;
}
.tbl-75per	{
  width:75%;
}
.tbl-80per	{
  width:80%;
}
.tbl-85per	{
  width:85%;
}

.tbl-90per	{
  width:90%;
}
.tbl-95per	{
  width:95%;
}

.swiper {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.swiper > img {
  scroll-snap-align: start;
  width: 640px; height: 170px;
}

.maru {
  height:19px;
  width:30px;
  border-radius:10px;
  line-height:17px;
  font-size: 16px;
  margin-top:0px;
  margin-left:-10px;
  text-align:center;
 }

 .area-size1 {
  width: 140px;
}
.pic-size70 {   
  height: 21.88vw;
  width: 21.88vw;
}

.pic-size100 {
  max-height: 31.25vw;
  max-width: 31.25vw;
}

 .pic-size1 {
  max-height: 100px;
}

.pic-size2 {
  height: 30px;
  width: 20px;
}

.pic-size3 {
  height: 20px;
  width: 20px;
}

.pic-size4 {
  height: 20px;
  width: 30px;
}

.pic-size5 {
  height: 25px;
  width: 25px;
}

.pic-size6 {
  height: 28px;
  width: 28px;
}

.pic-size7 {
  height: 40px;
  width: 40px;
}
.pic-size-list {
  max-height: 45vw;
  max-width: 31.25vw;
}
.pic-size-order {
  max-height: 37vw;
  max-width: 31.25vw;
}
.btn-size1 {
  width: 110px;
}

.txt-size2 {
  width: 80%;
}

.z-9999{
  z-index: 9999;
}

ul.trade-name {
  width:125px;
}

ul.trade-name li {
  float:left;
  white-space: normal;
  overflow:hidden;
  height:40px;
  list-style:none;
}

.tracking-10px {
  letter-spacing: 10.0px;
}
.tracking-3px {
  letter-spacing: 3.0px;
}

.marquee {
  margin:0;
  overflow:hidden;
  white-space: nowrap;
}
.marquee p {
  margin:0;
  font-size:14px;
  color:#645f4c;
  font-weight: 700;
  animation-name:marquee; 
  animation-duration:10s; 
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  transform:translateX(100%);
}
@keyframes marquee {
  100% {
    transform:translateX(-100%);
  }
} 

.info-telop {
  display: grid;
  grid-template-columns: 26% 11% 26% 11% 26%;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 30px;
  margin-right: 35px;
  align-items: center;
  text-align:center;
}
#info-telop1 {
  display: grid;
  grid-row: 1;
  grid-column: 1;
}
#info-telop2 {
  display: grid;
  grid-row: 1;
  grid-column: 2;
}
#info-telop3 {
  display: grid;
  grid-row: 1;
  grid-column: 3;
}
#info-telop4 {
  display: grid;
  grid-row: 1;
  grid-column: 4;
}
#info-telop5 {
  display: grid;
  grid-row: 1;
  grid-column: 5;
}

.in-form {
  display: grid;
  grid-template-columns: 30% 1fr;
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 20px;
  align-items: center;
}
.in-form label {
  display: grid;
  grid-row: 1;
  grid-column: 1;
}
.in-form input {
  display: grid;
  grid-row: 1;
  grid-column: 2;
  align-items: center;
}

.in-btn {
  display: grid;
  grid-template-columns: 50% 1fr;
}
#button1 {
  display: grid;
  height:var(--main-size-40);
  margin-right:8px;
  grid-row: 1;
  grid-column: 1;
  align-items: center;
}
#button2 {
  display: grid;
  height:var(--main-size-40);
  margin-left:8px;
  grid-row: 1;
  grid-column: 2;
  align-items: center;
}

.srvc-outline {
  display: grid;
  grid-template-columns: 15% 1fr;
}
#outline0  {
  display: grid;
  margin-top: 0.25rem;
  margin-left: 0.25rem;
  height:30px;
  grid-row: 1;
  grid-column: 1;
  vertical-align: text-top;
 }
 .num {
  height:40px;
  width:40px;
  border-radius:50%;
  line-height:40px;
  font-size: 30px;
  margin-left:0px;
  text-align:center;
 }
#outline1  {
  display: grid;
  height:10px;
  margin-top:10px;
  margin-bottom:0px;
  grid-row: 1;
  grid-column: 2;
  align-items: center;
  font-weight: 700;
}
#outline2 {
  display: grid;
  grid-row: 2;
  grid-column: 2;
  align-items: center;
}
#outline3 {
  display: grid;
  margin-bottom:10px;
  grid-row: 3;
  grid-column: 2;
  align-items: center;
}

.g101-search {
  display: grid;
  grid-template-columns: 75% 12% 15%;
  padding: 0;
}
#g101-search1  {
  display: grid;
  grid-row: 1;
  grid-column: 1;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
 }
#g101-search2  {
  display: grid;
  grid-row: 1;
  grid-column: 2;
  margin-top: 10px;
  margin-left: -15px;
  margin-right: 10px;
}
#g101-search3  {
  display: grid;
  grid-row: 1;
  grid-column: 3;
  margin-top: 10px;
  margin-left: -10px;
  margin-right: 10px;
}
.g101-menu {
  display: grid;
  grid-template-columns: 28% 29% 28% 15%;
  padding: 0;
}
#g101-menu1  {
  display: grid;
  grid-row: 1;
  grid-column: 1;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 5px;
  vertical-align: text-top;
 }
#g101-menu2  {
  display: grid;
  grid-row: 1;
  grid-column: 2;
  margin-top: -25px;
  margin-right: 5px;
  vertical-align: text-top;
}
#g101-menu3  {
  display: grid;
  grid-row: 1;
  grid-column: 3;
  margin-top: 10px;
  margin-right: 10px;
  vertical-align: text-top;
}
#g101-menu4  {
  display: grid;
  grid-row: 1;
  grid-column: 4;
  margin-top: 10px;
  margin-left: -10px;
  margin-right: 10px;
}
.g101-footer {
  display: grid;
  grid-template-columns: 32% 1fr 32%;
}
#g101-footer1  {
  display: grid;
  grid-row: 1;
  grid-column: 1;
  height: 70px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
 }
#g101-footer2  {
  display: grid;
  grid-row: 1;
  grid-column: 2;
  height: 70px;
  margin-top: 10px;
  margin-bottom: 10px;
}
#g101-footer3  {
  display: grid;
  grid-row: 1;
  grid-column: 3;
  height: 70px;
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 10px;
}

.g101-footer-bin {
  display: grid;
  grid-template-columns: 50% 1fr;
}
#g101-footer-bin-1  {
  display: grid;
  grid-row: 1;
  grid-column: 1;
 }
#g101-footer-bin-2  {
  display: grid;
  grid-row: 1;
  grid-column: 2;
  margin-right: 10px;
}
#g101-footer-bin-3  {
  display: grid;
  grid-row: 2;
  grid-column: 1 / 3;
  line-height: 1;
}
#g101-footer-bin-4  {
  display: grid;
  grid-row: 3;
  grid-column: 1 / 3;
  line-height: 1;
}
.g101-footer-pay {
  display: grid;
  grid-template-columns: 100%;
}
#g101-footer-pay-1  {
  display: grid;
  grid-row: 1;
  grid-column: 1;
  margin-top: 10px;
}
#g101-footer-pay-2  {
  display: grid;
  grid-row: 2;
  grid-column: 1;
  line-height: 1;
}
.g101-footer-sum {
  display: grid;
  grid-template-columns: 50% 1fr;
}
#g101-footer-sum-1 {
  display: grid;
  grid-row: 1;
  grid-column: 1 / 2;
 }
#g101-footer-sum-2 {
  display: grid;
  grid-row: 1;
  grid-column: 2 / 3;
}
#g101-footer-sum-3 {
  display: grid;
  grid-row: 2;
  grid-column: 1 / 3;
  width: 100%;
  vertical-align: text-top;
}

.g201-info {
  display: grid;
  grid-template-columns: 12% 50% 1fr;
}
#g201-info1  {
  display: grid;
  grid-row: 1 / 3;
  grid-column: 1;
  vertical-align: text-top;
 }
#g201-info2-1  {
  display: grid;
  margin-top: 5px;
  grid-row: 1 / 2;
  grid-column: 2 / 4;
  font-size: 16px;
  font-weight: 700;
}
#g201-info2-2  {
  display: grid;
  margin-bottom: 5px;
  grid-row: 2 / 3;
  grid-column: 2 / 4;
  font-size: 14px;
  letter-spacing: -0.05em;
  line-height:1.2
}
#g201-info2-2-1 {
  display: grid;
  margin-bottom: 5px;
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  font-size: 14px;
  white-space: nowrap;
}
#g201-info2-2-2 {
  display: grid;
  margin-bottom: 5px;
  grid-row: 2 / 3;
  grid-column: 3 / 4;
  font-size: 14px;
  white-space: nowrap;
}

.status-check {
  display: grid;
  margin-left:10px;
  margin-right:10px;
  grid-template-rows: 50px;
  grid-template-columns: 35% 1fr;
  border-width: 1px;
  border-color: #ff6600;
  border-radius: 0.25rem;
  background-color: #ffffff;
}
#status-check-1  {
  display: grid;
  grid-row: 1;
  grid-column: 1;
  margin-left:10px;
  align-items: left;
 }
 #status-check-2 {
  display: grid;
  grid-row: 1;
  grid-column: 2;
  font-size: 16px;
  color: #645f4c;
  font-weight: 700;
  letter-spacing: 0.1em;
  align-items: center;
}

.expiration {
  display: grid;
  margin-left:20px;
  margin-right:25px;
  grid-template-rows: 40px;
  grid-template-columns: 38% 10% 38% 10% 1fr;
}
#expiration1  {
  display: grid;
  grid-row: 1;
  grid-column: 1;
  font-size: 24px;
  color: #645f4c;
  font-weight: 700;
  border-width: 1px;
  border-color: #645f4c;
  background-color: #ffffff;
 }
 #expiration2  {
  display: grid;
  grid-row: 1;
  grid-column: 2;
  margin-top:5px;
  margin-left:5px;
  font-size: 12px;
  align-items: center;
 }
 #expiration3  {
  display: grid;
  grid-row: 1;
  grid-column: 3;
  font-size: 24px;
  color: #645f4c;
  font-weight: 700;
  border-width: 1px;
  border-color: #645f4c;
  background-color: #ffffff;
 }
 #expiration4  {
  display: grid;
  grid-row: 1;
  grid-column: 4;
  margin-top:5px;
  margin-left:5px;
  font-size: 12px;
  align-items: center;
 }

.marquee-img p {
  margin:0; 
  padding-top:10px; 
  padding-left:50px; 
  display:inline-block; 
  white-space:nowrap;
  animation-name:marquee-img; 
  animation-timing-function:ease;
  animation-duration:10s; 
  animation-iteration-count:infinite;
  animation-direction: reverse;
  }
  @keyframes marquee-img {
    from   { transform: translate(-5%);} 
    99%,to { transform: translate(-50%);}
  }

  .pd-img {
    padding-top: 10px;
    width: 65px;
    height: auto;
  }

  .btn-101-1 {
    height:40px;
    width: 100%;
    align-items: center;
    background-color: #d9d6c3;
    font-size: 12pt;
    color: #645f4c;
    font-weight: 700;
    border-radius: 0.25rem;
  }

  .btn-101-2 {
    height:40px;
    width: 100%;
    align-items: center;
    background-color: #ff6600;
    font-size: 12pt;
    color: #ffffff;
    font-weight: 700;
    border-radius: 0.25rem;
  }


  .btn-301-1 {
    height:70px;
    width: 100%;
    align-items: center;
    background-color: #d9d6c3;
    font-size: 12pt;
    color: #645f4c;
    font-weight: 700;
  }

  .btn-301-2 {
    display: grid;
    grid-template-columns: 50% 1fr;
  }
  .btn-301-2-0 {
    align-items: center;
    background-color: #d9d6c3;
    font-size: 12pt;
    color: #645f4c;
    font-weight: 700;
  }
  #btn-301-2-1 {
    display: grid;
    height:90px;
    margin-right:5px;
    grid-row: 1;
    grid-column: 1;
  }
  #btn-301-2-2 {
    display: grid;
    height:90px;
    margin-left:5px;
    grid-row: 1;
    grid-column: 2;
  }

  .btn-301-3 {
    height:60px;
    width: 100%;
    align-items: center;
    background-color: #ffffff;
    font-size: 12pt;
    color: #645f4c;
    border-width: 1px;
    border-color: #645f4c;
    font-weight: 700;
  }

  .title-1	{
    font-size: 12pt;
    letter-spacing: 4px;
    font-weight: 900;
  }

  .btn-202-1 {
    height:40px;
    width: 100%;
    align-items: center;
    background-color: #d9d6c3;
    font-size: 12pt;
    color: #645f4c;
    font-weight: 700;
  }

.plus-button {
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translate(-100%, -50%) rotate(0deg);
	border-radius: 10%;
	cursor: pointer;
	transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1);
	pointer:default;
}
.plus-button:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 1px;
	width: 30%;
	background:#666666;
}
.plus-button:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 50%;
	width: 1px;
	background:#666666;
}
.minus-button {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0%, -50%) rotate(0deg);
	border-radius: 10%;
	cursor: pointer;
	transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1);
	pointer:default;
}

.minus-button:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 1px;
	width: 30%;
	background:#666666;
}

.arrow{
  position: absolute;
  padding-left: 20px;
}

.arrow::before{
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 1px #959a9c;
  border-right: solid 1px #959a9c;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  left: 0;
}

/* ���j���[ */

.searviceBox {
    width:100%;
    background:#fff;
    padding: 0;
    border-color: #645f4c;
    border-width: 1px;
}
.serviceList {
    display:table;
    border-color: #645f4c;
    width: 100%;
}

.serviceList li.fee{
    width: 35%;
    display: table-cell;
    border-right: 1px solid #645f4c;
    border-bottom: 1px solid #645f4c;
    padding-left: 5px;
    padding-right: 5px;
    background: rgba(100,95,76,0.1);
}

.serviceList li.content{
    width: 35%;
    display: table-cell;
    border-right: 1px solid #645f4c;
    padding-left: 5px;
    padding-right: 5px;
    background: rgba(100,95,76,0.1);
}

.serviceList li.feeDescription{
    width: 65%;
    display: table-cell;
    padding-left: 5px;
    padding-right: 5px;
    border-bottom: 1px solid #645f4c;
}

.serviceList li.contentDescription{
     width: 65%;
     display: table-cell;
     padding-left: 5px;
     padding-right: 5px;
 }

.red {
    color: #ff0000;
}

.deliveryTime {
    display: grid;
}

.box1 {
    padding: 0.2em 0.2em;
    border-radius: 0.25rem;
}

.box2 {
    padding: 0.3em 0.3em;
    border: solid 1px var(--button-color);
    padding-left: 50px;
    padding-right: 50px;
    border-radius: 0.25rem;
}

.box3 {
    padding: 0.em 0.3em;
    border: solid 1px var(--button-color);
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 0.25rem;
    background-color: var(--button-color);
}

.box4 {
    padding: 0.em 0.3em;
    border: solid 1px #000000;
    padding-left: 10px;
    padding-right: 10px;
}

.box5 {
    padding: 0.1em 0.75em;
    border-radius: 0.25rem;
}

.fixed-search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.fixed-menu {
  position: fixed;
  left: 0;
  width: 100%;
}
/*guideAreaBox*/
.guideAreaBox                                   {background:#fff;padding:0 10px 0; margin:0 auto}
.guideAreaList                                  {margin:10px auto 0;border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc}
.guideAreaList .list                    {padding:0}
.guideAreaList .label                   {background:#efefef;font-weight:bold;color:#222; padding:5px; border-bottom:1px solid #ccc}
.guideAreaList .description             {padding:5px ;border-bottom:1px solid #ccc}
.guideAreaList .subList                 {padding:0}
.guideAreaList .subList .label  {padding:3px 5px; font-weight:bold;}

ul.entryAddressList {
    width: 100%;
    padding: 5px 0;
    display: table;
}

ul.entryAddressList li {
    width: 35%;
    display: table-cell;
    text-align: left;
    padding-left: 20px;
}

input[type='radio']{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 18px;
  border: 1px solid black;
}

input[type='radio']:checked {
    border: 1px solid var(--button-color);
}

input[type='radio']:checked:after {
    width: 14px;
    height: 14px;
    border-radius: 14px;
    top: -3px;
    left: 2px;
    position: relative;
    background-color: var(--button-color);
    content: '';
    display: inline-block;
    visibility: visible;
}
/*deliveryPriceBox*/
.deliveryPriceBox	 {
    background:#fff;
    padding:5px 10px 10px;
    margin:0 auto;text-align: left;
}
.deliveryPriceList {
    margin:0 0 10px;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
}
.deliveryPriceList .list {
    width:100%;
    padding:0;
    text-align:left;
    background:#fff;
    border-bottom:1px solid #ccc;
    display:table;
}
.deliveryPriceList .list.header {
    background:rgba(100,95,76,0.1);
    text-align:center;
}
.deliveryPriceList .label {
    display:table-cell;
    width:40%;
    padding:2px 5px;
    border-right:1px solid #ccc;
    text-align:center;
}
.deliveryPriceList .content {
    display:table-cell;
    width:55%;
    padding:2px 5px;
}

.deliveryPriceList span.free	{
     color:#f00
}

.selectWrap select {
   -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  position: relative;
  z-index: 1;
  border-width: 2px;
  padding-top:10px;
  padding-bottom:10px;
  padding-right:10px;
  padding-left:10px;
}

  .selectWrap::after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-bottom: solid 2px #b4b3b3;
  border-right: solid 2px #b4b3b3;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -4px;
}

.selectWrap{
  width: 100%;
  position: relative;
  display: inline-block;
}

select::-ms-expand {
    display: none;
}

:focus {
    outline: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}


/*arrow*/
.arrow-right {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
}

.circle1 {
  width: 1.3vw;
  height: 1.3vw;
  border-radius: 50%;
  margin: 0 0.8vw;
}

.circle-text-1 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  text-align: center;
  line-height: 80px;
  text-align: center;
  font-size: 12px;
}

.circle-text-2 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  line-height: 80px;
  text-align: center;
  font-size: 14px;
}

.check-mark-white {
  content: "";
  width: 10px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.pb-10rem {
  padding-bottom: 2.5rem;
}

.container-footer-end {
  height: 100%;
  min-height: 100vh;
  position: relative; /*�����Έʒu*/
  padding-bottom: 120px; /*��footer�̍���*/
  box-sizing: border-box; /*���S�Ċ܂߂�min-height:100vh��*/
}

.footer-end {
  width: 100%;
  text-align: center;
  position: absolute; /*����Έʒu*/
  bottom: 0; /*���ɌŒ�*/
}

.content-center-outer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.flex-initial {
  flex: initial;
}

.flex-auto {
  flex: auto;
}
.ver-middle {
  vertical-align: middle;
}
ul.indent{
  text-indent:-1.5em;
  padding-left:1.5em;
}

/* loading */
#loading-overlay {
  z-index: 40;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba( 0,0,0, 0.5 );
  display:flex;
  justify-content: center;
  align-items: center;
}

#loading-overlay img {
  margin-top: -100px;
}

.loader {
  margin: -50px auto 100px auto;
  font-size: 6px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}

/* //loading */

.price-color {
  color: #f00;
}

.price-size-top {
  font-size: 4.375vw;
}

.price-size-list,
.price-size-cart,
.price-size-cmpn,
.price-size-orderEdt,
.price-size-orderEdtChk,
.price-size-orderEdtEnd,
.price-size-addOrderEdt,
.price-size-addOrderEdtChk {
  font-size: 5vw;
}

.price-size-detail,
.price-size-cmpnDetail {
  font-size: 8.75vw;
}

.price-small-size-top,
.price-small-size-list,
.price-small-size-cart,
.price-small-size-cmpn,
.price-small-size-detail,
.price-small-size-cmpnDetail,
.price-small-size-orderEdt,
.price-small-size-orderEdtChk,
.price-small-size-orderEdtEnd,
.price-small-size-addOrderEdt,
.price-small-size-addOrderEdtChk {
  font-size: 3.75vw;;
}

.price-color-zeikomi-orderEdt,
.price-color-zeikomi-historyDtl,
.price-color-orderEdt,
.price-color-historyDtl {
    color: #f00;
}

.price-size-zeikomi-orderEdt,
.price-size-zeikomi-historyDtl {
    font-size: 5vw
}

.price-weight {
  font-weight: bolder;
}

/* パスワード表示/非表示切り替え */

#input_pass {
  padding-right: 4rem;
}

.password-icon {
  top: 50%; 
  right: 1rem; 
  transform: translateY(-50%); 
  -webkit-transform: translateY(-50%); 
  -ms-transform: translateY(-50%);
}

/* アコーディオン */
.accordion-title {
  position: relative;
  padding-right: 30px;
}

.accordion-title::before{
  position: absolute;
  top: 50%;
  right: 0;
  content: '';
  width: 12px;
  height: 12px;
  border: 0px;
  margin-top: -7px;
  margin-right: 10px;
  border-top: solid 4px #ccc;
  border-right: solid 4px #ccc;
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  -ms-transition: 0.25s;
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

.accordion-open::before{
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* 注文ステップ */

.order-step {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding-left: 10px;
  font-weight: bold;
}

.order-step-item--active,
.order-step-item--disabled,
.order-step-item--none,
.order-step-item--end {
  position: relative;
  width: 23%;
  margin: 1.6rem 10px 1.6rem 0;
  padding: 4px;
  text-align: center;
}

.order-step-item--active {
  color: #fff;
  background-color: #f00;
}

.order-step-item--end {
  color: #fff;
  background-color: #f00;
}

.order-step-item--disabled {
  color:#000;
  background: rgba(100,95,76,0.04);
}

.order-step-item--none {
  color: #000;
  background: rgba(100,95,76,0.04);
}

.order-step-item--active:after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  margin-top: -4px;
  border-top: 4px solid transparent;
  border-left: 4px solid #f00;
  border-bottom: 4px solid transparent;
}

.order-step-item--disabled:after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  margin-top: -4px;
  border-top: 4px solid transparent;
  border-left: 4px solid rgba(100,95,76,0.04);
  border-bottom: 4px solid transparent;
}