@charset "UTF-8";

/* modal */

body.fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
}
/* modal body fixed */
.modal_overlay {
  background-color: rgba(0, 0, 0, 0.3);
  display: none;
  padding: 107px 0 0 0;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  overflow-y: scroll;}

/* registration way */
.modal_box {
  display: flex;
  justify-content: center;
  background-color: #f2f2f2;
  border-radius: 5px;
  margin: 0 auto;
  width: 20vw;
  max-width: 380px;
  min-width: 350px;
  height: auto;
  max-height: inherit;
  padding: 30px;
  position: relative; 
  box-sizing: border-box;
/*  overflow-y: scroll;
  -ms-overflow-style: scrollbar;*/}

.modal_box i.close {
  cursor: pointer;
  position: absolute;
  right: 0px;
  top: -30px; }
  .modal_box .close img {
  width: 22px;
  height: 22px;}

/* completed .notice */

.modal_box.notice {
  display: block;
  background-color: #fff;
  width: 300px;
  min-width: 300px;
  padding: 40px 30px 30px;
  text-align: center;
}

.modal_box.notice .icL_mochimono {display: inline-block;}
.modal_box.notice span {display: inline-block;}
.modal_box.notice i.ic_mochimono {
  display: table-cell;
  background-color: #96dc5f;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  vertical-align: middle;
  padding: 1px 6px 0 0;
}

.modal_box.notice i.ic_okaimono {
  width: 60px;
  padding: 0;
}

.modal_box.notice i.ic_mochimono.out { background-color: #b5b5b5;}
.modal_box.notice i.ic_mochimono img {
  width: 34px;
  height: 32px; 
}

.modal_box.notice i.ic_okaimono img {width: 60px;}

#web .modal_box.notice p,.modal_overlay .modal_box.notice p {
  font-weight: bold; margin: 1em 0 2em 0;}

#web .modal_box.notice.calc p,.modal_overlay .modal_box.notice.calc p {
  font-weight: bold; margin: 1em 0 0 0;} 

.modal_box.notice a.close {
  display: inline-block;
  background-color: #e8e8e8;
  color: #333;
  border-radius: 5px;
  padding: 1em 3em;
  position: static;
  font-size: .8125rem;
  font-weight: bold;}

/* .notice.delete */
.modal_box.notice.delete_item a { display: block; font-weight: bold; color: #333;}
.modal_box.notice.delete_item a.delete_ok {
  background-color: #96dc5f;
  border-radius: 5px;
  padding: 1em 1.8em;
  position: static;
  font-size: .8125rem;
  margin-bottom: 10px;}

/* narrowing .target */

.modal_box.target { width: 30vw; min-width: 380px; padding: 0;}
.modal_box.target label {font-weight: bold; display: block; margin-bottom: .2em; width: 100%; padding-left: 0;}
.modal_box.target .fieldset_wrp {padding: 20px 30px;}
.modal_box.target .fieldset {padding: .5em 0;}
.modal_box.target .fieldset {display: block;}
.modal_box.target form,.modal_box.target form .select_container {width: 100%;}
.modal_box.target .fieldset.date .inputdate_wrapper {display: flex; align-items: center;}
.modal_box.target .fieldset.date span { display: inline-block; width: 50%; margin-right: .5em;}
.modal_box.target .fieldset.date .inputdate_wrapper span:last-child { margin-right: 0;}
.modal_box.target .fieldset.date span.wave { width: auto;}

.modal_box.target .fieldset.date span.year {width: 6.5em;}
.modal_box.target .fieldset.date span.month {width: 4.5em;}
.modal_box.target .fieldset.date span.day {width: 4.5em;}
.modal_box.target .fieldset.date .select_container.yyyymmdd {flex-direction: row;}


.modal_box.target .fieldset.date span

.modal_box.target .fieldset.star i { display: inline;}
.modal_box.target .fieldset.star i img { height: 18px; margin: 0em .2em -.15em;}
.modal_box.target .fieldset.star label {min-width: auto;}


/* pointcard .target */
.modal_box.target.point .fieldset {
  border-bottom: solid 1px #e8e8e8;
  margin: 0 auto; background-color: #fff; padding: .6em 1em;}

.modal_box.target.point .formset {padding: 20px 0 0;}
.modal_box.target.point .fieldset_wrp {padding: 0 30px 1em;}
.modal_box.target.point .fieldset.date {background-color: transparent; padding: 0;}  

.modal_box.target .submit_wrp {
  width: 100%;
  background: #fff;
  border-radius: 0 0 5px 5px;
  padding: .7em 30px;}

.modal_box.target .submit_wrp .button.target {
  background-color: #96dc5f;
  margin: 0;
  width:  100%;
  font-size: .875rem;
  font-weight: bold;
}

.modal_box.target.point .fieldset label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: auto; margin-bottom: 0;}

.modal_box.target.point .fieldset label span {display: flex;width: 100%; text-align: center;justify-content: center;align-items: center;/*padding-left: 1em;*/height: 2.8em;} 
.modal_box.target.point .formset .fieldset.store span i.storename {text-align: center;}
.modal_box.target.point .formset .fieldset label span img {vertical-align: middle;} 
.modal_box.target.point .fieldset_wrp .fieldset:last-child {border-bottom: 0;}
.modal_box.target .fieldset.star {display: flex;align-items: center;}

/* check_squ style */
.modal_box.target .fieldset.star label {font-weight: normal;}
.modal_box.target .fieldset.star .check_squ_wrap{
    width: 20px;
    text-align: center;
    margin: 0 .4em .2em 0;
    min-width: initial;
}

.modal_box.target .fieldset.star .check_squ_wrap .check_squ{
    position: relative;
    display: block;
    vertical-align: bottom;
    width: 20px;
    height: 20px;
    margin: 0 auto;
}

.modal_box.target .fieldset.star .check_squ_wrap .check_squ:before,
.modal_box.target .fieldset.star .check_squ_wrap .check_squ:after{position: absolute;content: '';}

.modal_box.target .fieldset.star .check_squ_wrap .check_squ:before {
  z-index: 51;
  top: 29%;
  left: 20%;
  width: 11px;
  height: 5.5px;
  content: '';
  transform: rotate(-45deg) scale(1, 1);
  border: 2px solid rgba(51, 51, 51, .1);
  border-top-style: none;
  border-right-style: none;
}

.modal_box.target .fieldset.star .check_squ_wrap .check_squ:after {
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    content: '';
    cursor: pointer;
    border-radius: 2px;
    background: #fff;
    border: 1px solid #dbdbdb;
    box-sizing: border-box;
}


.modal_box.target .fieldset.star .check_squ_wrap input[type="checkbox"]{
    display: none;
}

.modal_box.target .fieldset.star .check_squ_wrap input[type="checkbox"]:checked + .check_squ::before {
  transform: rotate(-45deg) scale(1, 1);
  border: 2px solid #fff;
  border-top-style: none;
  border-right-style: none;}


.modal_box.target .fieldset.star .check_squ_wrap input[type="checkbox"]:checked + .check_squ::after{background: #96dc5f;border: none;}

/* end check_squ style */


/* pointcard target */
.modal_box.target .clear {
    display: block;
    background-color: #e8e8e8;
    color: #333;
    border-radius: 5px;
    text-align: center;
    padding: 1em 3em;
    position: static;
    font-size: .875rem;
    font-weight: bold;
    margin-top: 10px;
    border: none;
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
}

/* Radio Check style */
label.radio_grn {
  position      : relative;
  cursor        : pointer;
  display       : inline-block;
  overflow      : hidden;
  box-sizing    : border-box;
}

.modal_box.target.point label.radio_grn {
  /*min-height   : calc(20px + 5px);*/
  margin-right : calc(20px + 5px);
  padding-left : calc(20px + 5px);
  /*line-height  : calc(20px + 5px);*/
  font-weight: normal;
}

/** before after **/
label.radio_grn:before, label.radio_grn:after{
  content  : '';
  position : absolute;
  box-sizing : border-box;
}
label.radio_grn:before{
  border-radius    : 100%;
}

label.radio_grn:before, label.radio_grn:after{
  top              : 0px;
  bottom           : 0px;
  margin-top       : auto;
  margin-bottom    : auto;
}

label.radio_grn:before {
  width         : 20px;
  height        : 20px;
  border        : 1px solid #b0b0b0;
  left          : 0px;
  z-index       : 3;
}

label.radio_grn:after {
  width            : 10px;
  height           : 10px;
  border-radius    : 100%;
  left             : calc(((20px/2) - (10px) / 2));
  background-color : #96dc5f;
  z-index          : 1;
}

/** input **/
label.radio_grn input[type="radio"]{
  -moz-appearance: none;
  -webkit-appearance: none;
  position   : absolute;
  z-index    : 2;
  margin     : 0px;
  width      : 20px;
  height     : 20px;
  box-sizing    : border-box;
  outline       : none;
}
label.radio_grn input[type="radio"]{
  left       : calc(20px * -1);
  width      : 20px;
  height     : 20px;
  top           : 0px;
  bottom        : 0px;
  margin-top    : auto;
  margin-bottom : auto;
  border-radius : 100%;
}

label.radio_grn input[type="radio"] {
  box-shadow : 20px 0px #FFF;
}

/** checked forcus */
label.radio_grn input[type="radio"]:checked{
  box-shadow : none;
}
label.radio_grn input[type="radio"]:focus{
  opacity: 0.2;
}
label.radio_grn input[type="radio"]:focus {
  box-shadow : 20px 0px #FFF;
}


/* warranty barcode */
.modal_box.warr_barcode {width: 380px;}

.modal_box.warr_barcode figure {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 250px;
  margin-bottom: 40px;}

.modal_box.warr_barcode figure img {display: block;margin: 0 auto;}
.modal_box.warr_barcode figure img.logo {width: 150px;}
.modal_box.warr_barcode figure img.barcord {width: 93%;}
.modal_box.warr_barcode figure strong {font-size: .8125rem;}

.modal_box.warr_barcode .warranty_number {
  display: inline-flex;
  justify-content: center;
  flex-basis: auto;
  border: 1px solid #d7d7d7;
  border-radius: 3px;  
  font-size: .9375rem;
  padding: .2em .5em .1em;}

.modal_box.warr_barcode .warranty_number dt::after {content: ":";}
.modal_box.warr_barcode .warranty_number dd { 
/*  display: inline-block;
  width: auto;*/
  padding-left: .2em;}


/* Calculation */

.modal_box.calc {
    max-width: 460px;
    width: auto;
    padding: 30px;}

.modal_box.calc h1 {
    border-bottom-color: #de4525;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
    font-weight: normal;
    line-height: 2rem;
    margin: 0 auto 20px;}

.modal_box.calc span {font-size: .875rem;} 
.modal_box.calc h1 strong {font-size: 1.5rem;}
.modal_box.calc span i {font-style: normal;}
.modal_box.calc h1 img {margin-right: 0.5em;vertical-align: -7%;}
.modal_box.calc .button.apply {
  font-size: 1rem;
  background-color: #de4525;
  color: #fff;
  border: transparent;
  height: 3.1em;
  width: 100%;}
.modal_overlay .modal_box.calc p{font-weight: normal;text-align: left;margin: 1em 0 0;}


/* modal */
ul.register_selection {padding-left:0; margin-bottom: 0; width: 100%;}

.modal_register {
  background-color: #fff;
  box-sizing: border-box;
  display: block;
  width: auto;
  background-image: url(../../images/mochimono/arrow_regi_sele.svg);
  background-position: 95% center;
  background-repeat: no-repeat;
  padding: .6em 1.3em .3em .3em;
  font-size: .9375rem;
}

.modal_register img {
    display: inline-block;
    vertical-align: middle;
    width: 55px;
    margin: -.2em 1em 0 .3em;
}

ul.register_selection li {margin-bottom: 10px;}
ul.register_selection li:last-child {margin-bottom: 0px;}


.modal_overlay.btn_mochimonoGuide {background-color: rgba(0, 0, 0, 0.6)}  
.modal_box.mochimonoGuide {
  display: block;
  background-color: #fff;
  margin: 0 auto;
  width: 430px;
  max-width: none;
  min-width: none;
  height: auto;
  max-height: inherit;
  padding: 45px 40px 20px;}
.modal_overlay.btn_mochimonoGuide #btnSubmit {
  display: block;
  width: 430px;
  max-width: none;
  min-width: none;
  color: #fff;}

@media screen and (max-width: 660px) {
.modal_overlay { padding-top: 50px;}
.modal_box { 
  width: 90vw;
  min-width: inherit;
  padding: 30px 20px;}

.modal_box.notice {
    width: 90vw;
    min-width: inherit;}  

.modal_box.target {
    width: 90vw;
    min-width: inherit;
    overflow-y: visible;}

.modal_box.target.point {
    width: 90vw;
    min-width: inherit;
    min-height: auto;
    background-color: #f2f2f2;
    overflow-y: visible;}  


.modal_register {
  background-color: #fff;
  box-sizing: border-box;
  display: block;
  width: auto;
  background-image: url(../../images/mochimono/arrow_regi_sele.svg);
  background-position: 95% center;
  background-repeat: no-repeat;
  font-size: 3.73vw;}

.modal_register img {
    display: inline-block;
    vertical-align: middle;
    width: 13vw;
    margin: -.2em 1em 0 .3em;}


ul.register_selection li {font-size: 3.73vw;}

.modal_box.target .fieldset_wrp {padding: 20px 20px;background-color: #f2f2f2;border-radius: 5px 5px 0 0;}
/*.modal_box.target .formset span *{font-size: .875rem;}*/
.modal_box.target .formset label {font-size: 3.47vw; padding-left: 0;}
.modal_box.target .fieldset.star label{font-size: 3.47vw; min-width: initial;}

.modal_box.warr_barcode figure strong { font-size: 3.47vw;}
.modal_box.warr_barcode figure {height: 230px;}
.modal_box.warr_barcode figure img.logo {width: auto;}
.modal_box.warr_barcode figure img.barcord {width: auto;}
.modal_box.warr_barcode .warranty_number {font-size: 3.47vw;}

.modal_box.target.point .fieldset_wrp {padding: 0 20px 1em;}
.modal_box.target .submit_wrp {padding: .7em 20px;}

.modal_box.calc {padding: 20px;}
.modal_overlay .modal_box.calc p {font-size: 2.67vw;letter-spacing: -.01em;}

.modal_box.calc h1 {display: block;}
.modal_box.calc h1 strong {font-size: 6.93vw;}
.modal_box.calc h1 img {width: 21px;}
.modal_box.calc span {width: 100%;font-size: 3.2vw;}
.modal_box.calc .button.apply {font-size: 3.73vw;}

#web .modal_box.notice p, .modal_overlay .modal_box.notice p {font-size: 3.47vw;}
#web .modal_box.notice p, .modal_overlay .modal_box.notice.calc p {font-size: 2.67vw;}
.modal_box.notice a.close {font-size: 3.47vw;}

.modal_box.target .submit_wrp .button.target {font-size: 3.73vw;}

.modal_box.mochimonoGuide {width: 90vw; padding: 25px 20px 10px;}

.modal_overlay.btn_mochimonoGuide #btnSubmit {width: 90%;}


}/* end max-width: 660px */

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

.formset .fieldset.txtS span input{font-size: 2.93vw;}

.modal_box.notice.warr_barcode {padding: 30px 20px 20px;}  
.modal_box.warr_barcode figure {height: 200px;}

.modal_box.target {margin-bottom: 100px;}
.modal_box.target.point {margin-bottom: 100px;}

  }/* end max-width: 359px */

/* ご利用ガイドiPhoneSE 対応 20201117 */

@media screen and (max-width: 340px){
  .modal_overlay {padding-top: 10vw;}
  .modal_overlay.btn_register {padding-top: 20vw;}
  .modal_box i.close {top: -6.75vw; width: 4.5vw;}
  .modal_box.mochimonoGuide {padding: 5vw 20px 3vw;}
  .mochimonoGuide .slick-dotted.slick-slider{margin-bottom: 5vw;}
  .mochimonoGuide .slide_box .howto_box {margin-top: 1.5em;}
  .slide_box .howto_box li p {margin-bottom: .65em;}
}
  


/* 2749/2807 20201119 */
.modal_recycle .modal_box,
.modal_maker .modal_box,
.modal_manual .modal_box {min-height: 260px; align-items: center; background-color: #fff; width: 80vw;max-width: 400px;}
.modal_inner .submit_wrp .button.target {
    background-color: #96dc5f;
    margin: 0;
    width: 100%;
    font-size: .875rem;
    font-weight: bold;}
.modal_recycle .modal_box { font-size: .8125rem; margin-bottom: 2em;}
@media screen and (max-width: 660px){
.modal_inner .submit_wrp .button.target { font-size: 3.4vw;}
}

/* loading 2021.8 */
.relative-box {position: relative; display: block;}
.loading-s {  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, .5);
  z-index: 2000;}
.loading-s img {  padding-top: 2rem;
  display: block;
  position: relative;
  z-index: 2002;
  width: 32px;}