@charset "utf-8";

/* VAR {{{ */
:root {
  --color-default-pri: #cf2a76;
  --color-default-sec: #F9E4E8;
  --color-default-ter: #F3CED5;
  --color-disabled: #929294;
  --color-grey-cc: #ccc;
  --color-grey-69: #696969;
  --color-grey-77: #777777;
  --color-grey-f7: #F7F7F7;
  --color-yellow: #FCDB00;
  --color-impt: #e00000;
  --color-white: white;
  --color-black: black;
  --color-link: #4164d9;
  --shadow60: rbga(0, 0, 0, .6);
  --radius-default: 1.6rem;
  --radius-s: .8rem;
  --radius-xs: .4rem;
  --comp-progress-line-width: 1.6rem;
  --comp-progress-line-height: .2rem;
  --comp-progress-radius: .5rem;
  --comp-progress-sprite-width: 25px;
  --comp-progress-sprite-height: 16px;
  --sprite-gutter: 10px;
  --sprite-width: 45px;
  --sprite-height: 120px;
  --sprite-path: url("/access/hikari/10g/select/images/sprite.png");
}
/* }}} */

/* Common {{{ */
body.ux2v1 h1{
  font-size: 3.6rem;
  margin-top: 1.6rem;
  text-align: center;
}

body.ux2v1 .wrapper{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

body.ux2v1 .label{
  font-size: 1.6rem;
  font-weight: normal;
  padding: .1rem 1rem;
  line-height: 1;
}
body.ux2v1 .label.required{
  background-color: var(--color-impt);
  color: var(--color-white);
}

body.ux2v1 .mod-information[data-level]:not([data-level=""]) strong{
  display: initial;
}
body.ux2v1 .mod-information{
  margin: 0;
  background-color: var(--color-white);
}
body.ux2v1 .mod-information .list{
  max-width: 100%;
}

body.ux2v1 section[class*="mod-box"] > .inner:first-child > :first-child:not(.hdg),
body.ux2v1 section[class*="mod-box"] > .inner:not(:first-child):not(section) > .hdg{
  display: inherit;
}
body.ux2v1 .mod-box > .inner > .hdg{
  font-size: 2rem!important;
}

body.ux2v1 label{
  cursor: pointer;
}
body.ux2v1 label.disabled{
  cursor: initial;
}

body.ux2v1 .scrollable{
  overflow-y: scroll;
  max-height: 24rem;
  border: 1px solid var(--color-grey-cc);
}
body.ux2v1 .scrollable > .inner{
  padding: 1.6rem;
}

body.ux2v1 .btn > a{
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

body.ux2v1 .mod-form-checkbox label{
  display: block;
  width: 100%;
  clear: both;
  float: none;
}
body.ux2v1 .mod-form-checkbox label span{
  width: 100%;
  display: block;
  padding: 1rem 2rem 1rem 5rem;
  display: block;
  box-shadow: 0 2px 0 0 var(--shadow60);
  border: 1px solid var(--color-disabled);
  border-radius: 4px;
}
body.ux2v1 .mod-form-checkbox label::after{
  min-height: auto;
}
body.ux2v1 .mod-form-checkbox label span::after,
body.ux2v1 .mod-form-checkbox label span::before{
  top: 0;
  bottom: 0;
  left: 0;
  margin-left: 1.3rem;
  margin-top: auto;
  margin-bottom: auto;
}
body.ux2v1 .mod-form-checkbox label span::after{
  margin-left: 1.4rem;
}

body.ux2v1 .mod-tgl .tgl-hook{
  color: var(--color-white);
}
body.ux2v1 .mod-tgl .tgl-hook::after{
  background-position-x: -125px;
}
/* }}} */

/* comp-estimate {{{ */
body.ux2v1 #comp-estimate .mod-tbl.summary,
body.ux2v1 #comp-estimate{
  margin-top: 1.6rem;
}

body.ux2v1 #comp-estimate .mod-tbl.summary tr th,
body.ux2v1 #comp-estimate .mod-tbl.summary tr td,
body.ux2v1 #comp-estimate .mod-tbl.summary table{
  border: none;
}
body.ux2v1 #comp-estimate .mod-tbl.summary tbody,
body.ux2v1 #comp-estimate .mod-tbl.summary tr th,
body.ux2v1 #comp-estimate .mod-tbl.summary tr td{
  background-color: transparent;
}
body.ux2v1 #comp-estimate .mod-tbl.summary tbody tr th{
  width: 20%;
  vertical-align: inherit;
}
body.ux2v1 #comp-estimate .mod-tbl.summary table caption{
  border-bottom: 2px solid var(--color-default-pri);
}

body.ux2v1 #comp-estimate .mod-box{
  margin-bottom: 0;
}
body.ux2v1 #comp-estimate .mod-box .inner{
  background-color: var(--color-white)!important;
  padding: 1.6rem;
}
body.ux2v1 #comp-estimate .mod-box,
body.ux2v1 #comp-estimate .mod-box .inner{
  border-radius: var(--radius-s);
}
body.ux2v1 #comp-estimate .modal-contents{
  display: none;
}
/* }}} */

/* comp-progress {{{ */
body.ux2v1 .comp-progress{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
body.ux2v1 .comp-progress > ol{
  display: flex;
  justify-content: center;
}
body.ux2v1 .comp-progress > ol li{
  flex: 0 0 auto;
  line-height: 1;
}
body.ux2v1 .comp-progress .label{
  background-color: var(--color-grey-cc);
  color: var(--color-grey-77);
  border-radius: var(--radius-default);
  padding: .4rem .8rem;
  font-size: 1.2rem;
  position: relative;
}
body.ux2v1 .comp-progress .label.current{
  font-weight: bold;
}

body.ux2v1 .comp-progress .label.conn-right::after,
body.ux2v1 .comp-progress .label.conn-left::before,
body.ux2v1 .comp-progress .label.conn-end::after,
body.ux2v1 .comp-progress .label.conn-start::before{
  content: "";
  display: block;
  width: var(--comp-progress-sprite-width);
  height: var(--comp-progress-sprite-height);
  background-image: var(--sprite-path);
  background-repeat: no-repeat;
  background-size: var(--sprite-width) var(--sprite-height);
  background-position-x: calc(var(--sprite-gutter) * -1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
}

body.ux2v1 .comp-progress .label.conn-right{
  margin-right: var(--comp-progress-sprite-width);
}
body.ux2v1 .comp-progress .label.conn-left{
  margin-left: var(--comp-progress-sprite-width);
}

body.ux2v1 .comp-progress .label.conn-left::before{
  left: 0;
  margin-left: calc(var(--comp-progress-sprite-width) * -1);
  background-position-y: calc((var(--sprite-gutter) * 2 + var(--comp-progress-sprite-height)) * -1);
}
body.ux2v1 .comp-progress .label.conn-right::after{
  right: 0;
  margin-right: calc(var(--comp-progress-sprite-width) * -1);
  background-position-y: calc((var(--sprite-gutter)) * -1);
}

body.ux2v1 .comp-progress .label.conn-start::before{
  left: 0;
  margin-left: calc(var(--comp-progress-sprite-width) * -1);
  background-position-y: calc((var(--sprite-gutter) * 3 + var(--comp-progress-sprite-height) * 2) * -1);
}
body.ux2v1 .comp-progress .label.conn-end::after{
  right: 0;
  margin-right: calc(var(--comp-progress-sprite-width) * -1);
  background-position-y: calc((var(--sprite-gutter) * 4 + var(--comp-progress-sprite-height) * 3) * -1);
}
/* }}} */

/* comp-fixedtel {{{ */
body.ux2v1 .comp-fixedtel{
  position: fixed;
  z-index: 9;
  right: 0;
  top: 10rem;
  color: var(--color-white);
}
body.ux2v1 .comp-fixedtel .mod-media{
  display: block;
  margin: 0;
  line-height: 0;
}
/* }}} */

/* comp-creditcard {{{ */
body.ux2v1 .comp-creditcard{
  background-color: var(--color-grey-f7);
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
}

body.ux2v1 .comp-creditcard .mod-information{
  border-color: var(--color-impt);
}
body.ux2v1 .comp-creditcard > .inner{
  padding-left: 4.8rem;
  padding-right: 4.8rem;
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
}
body.ux2v1 .comp-creditcard .box-border{
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-cc);
  padding: 1.6rem 3.2rem;
  display: inline-block;
  margin-top: 1.6rem;
}
/* }}} */

/* mod-modal {{{ */
.mod-modal-openbtn{
  background-color: transparent!important;
  border: none!important;
  border-radius: initial!important;
  box-shadow: none!important;
  color: var(--color-link)!important;
  font-weight: normal!important;
  padding: 0!important;
  margin: 0!important;
  display: inline!important;
}
.mod-modal-openbtn:has(img) > :first-of-type {
  margin-right: .8rem;
  vertical-align: text-top;
}
/* }}} */

/* Coloring {{{ */
/* h1 {{{ */
body.ux2v1 h1{
  color: var(--color-default-pri);
}
/* }}} */
/* DEFAULT ONLY {{{ */
body.ux2v1 .mod-form-radio02 > .list label input + .content::after{
  background-color: var(--color-default-pri);
}
body.ux2v1 .scrollable,
body.ux2v1 .mod-form-checkbox > .list label > span::before,
body.ux2v1 .mod-form-radio02 > .list label input + .content::before,
body.ux2v1 .mod-form-checkbox > .list label input + span,
body.ux2v1 .mod-form-radio02 > .list label input + span{
  border-color: var(--color-default-pri);
}
body.ux2v1 .mod-form-checkbox > .list label input:checked + span,
body.ux2v1 .mod-form-radio02 > .list label input:checked + span{
  background-color: var(--color-default-sec);
}
body.ux2v1 .comp-progress .label.current{
  color: var(--color-white);
  background-color: var(--color-default-pri);
}
body.ux2v1 .mod-tgl .tgl-hook{
  background-color: var(--color-default-pri);
}
body.ux2v1 .cashback{
  color: var(--color-default-pri);
}
body.ux2v1 #comp-estimate .mod-box{
  border-color: var(--color-default-ter);
}
body.ux2v1 #comp-estimate .mod-tbl.summary table caption{
  border-bottom: 2px solid var(--color-default-pri);
}
/* }}} */
/* disabled {{{ */
body.ux2v1 input[type="radio"][disabled]+.content{
  background-color: var(--color-grey-cc);
}
body.ux2v1 input[type="radio"][disabled]+.content::before{
  background-color: var(--color-grey-cc);
}
body.ux2v1 .list label input[type="radio"][disabled] + .content::before,
body.ux2v1 .list label input[type="radio"][disabled] + span{
  border-color: var(--color-disabled);
}
/* }}} */
/* }}} */

/* Show | Hide {{{ */
body.ux2v1 .group-l,
body.ux2v1 .group-m,
body.ux2v1 .group-s,
body.ux2v1.plan-l .group-m,
body.ux2v1.plan-l .group-s,
body.ux2v1.plan-m .group-l,
body.ux2v1.plan-m .group-s,
body.ux2v1.plan-s .group-l,
body.ux2v1.plan-s .group-m,
body.ux2v1 .hide
{
  display: none;
}

body.ux2v1.plan-l .group-l,
body.ux2v1.plan-m .group-m,
body.ux2v1.plan-s .group-s{
  display: inline-block;
}

body.ux2v1 #q-start .selection,
body.ux2v1 .show{
  display: block;
}
/* }}} */

/* comp-10gtel {{{ */
body.ux2v1 .comp-10gtel .str-pageTitle .inner{
  justify-content: center;
}
body.ux2v1 .comp-10gtel .tel{
  display: inline-block;
  font-size: 3.9rem;
  line-height: 1.2;
  background: linear-gradient(transparent 60%, #fcdb00 60%);
}
/* }}} */

/* Misc {{{ */
body.ux2v1 .fwn{
  font-weight: normal;
}
body.ux2v1 .fz-larger{
  font-size: 2.2rem!important;
}
body.ux2v1 .bgc-greyf7{
  background-color: var(--color-grey-f7);
}

body.ux2v1 .row{
  display: flex;
}
body.ux2v1 .col{
  flex: auto;
}
/* }}} */

/* XSP {{{ */
@media only screen and (max-width: 767px){
  body.ux2v1 .str-inner{
    margin: 0 15px;
  }
  body.ux2v1 .wrapper{
    max-width: 100%;
    margin-left: 1.6rem;
    margin-right: 1.6rem;
  }
  body.ux2v1 .mod-box{
    margin-top: 1rem;
    margin-bottom: 0;
  }
  body.ux2v1 img{
    max-width: 100%;
  }
  body.ux2v1 .row{
    display: block;
  }

  /* comp-fixedtel {{{ */
  body.ux2v1 .comp-fixedtel{
    top: auto;
    bottom: 25vh;
  }
  /* }}} */
  /* comp-estimate {{{ */
  body.ux2v1 #comp-estimate .mod-tbl.summary tbody tr th {
    width: 33%;
  }
  body.ux2v1 #comp-estimate .mod-tbl.summary tbody td span:last-child {
    display: inline-block;
}
  /* }}} */
  /* comp-creditcard {{{ */
  body.ux2v1 .comp-creditcard{
    max-width: none;
  }
  body.ux2v1 .comp-creditcard > .inner{
    padding: 1.6rem;
  }
  /* }}} */
  .btn a:link{
    color: #223;
  }
}
/* }}} */


.mod-hdg-bl2, .mod-hdg-bl3, .mod-hdg-bl4, .mod-hdg-bl5, .mod-hdg-bl6 {
    background: var(--color-default-sec);
    border-left: 4px solid var(--color-default-pri);
}
.mod-btn[data-col]{
  margin: 30px 0 30px -24px;
}
.mod-btn .disabled{
  pointer-events: none;
  opacity: .3;
  cursor: not-allowed;
}