@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Zen+Antique+Soft&family=Lato:wght@700;900&display=swap');
/* simulation用CSS */
.bootstrap p,
.bootstrap ol,
.bootstrap ul,
.bootstrap dl{
  margin: 0;
}
.bootstrap label{
  margin: 0;
  cursor: pointer;
}

main .text-underline{
  color: #272727;
  text-decoration: underline;
}
main .text-underline:hover,
main .text-underline:focus {
  color: #bc2739!important;
  text-decoration: none !important;
}

/* テキスト */
.font--lato {
  font-family: 'Lato', 'Noto Sans JP', Helvetica, Neue Haas Grotesk, Arial!important;
}

/* 注釈系 */
.note-text{
  font-size: 14px;
}
.note-text--small{
  font-size: 12px;
}
.note-text--astarisk,
.text--astarisk{
  margin-left: 1em!important;
  text-indent: -1em;
}
.note-text--astarisk::before,
.text--astarisk:before{
  content: "※";
  text-indent: 0;
  margin: 0;
}

/* input */
input[type=text]{
  height: 55px;
  border: 2px solid #E5E5E5;
  border-radius: 10px;
  text-align: center;
}
input[type=text]::placeholder{
  color: #7D7D7D;
}

/* 角丸リンク関係 */
.other-link{
  margin-top: 50px;
}
.oval-link--red.oval-link--m{
  width: 293px;
}

/* リンク */
.bootstrap a{
  color: #272727;
}
.bootstrap a:hover{
  color: #bc2739;
}

/* ---------------------------------------
	STEP
--------------------------------------- */
.step-block{
  display: flex;
  align-items: center;
  height: 200px;
  margin: 0;
  background: #F3F3F3;
}
.step-list{
  display: flex;
  justify-content: center;
  gap: 10px;
}
.step-item{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25%;
  min-height: 50px;
  padding: 10px 20px 10px 10px;
  background: #4c4c4c;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  clip-path: polygon(
    0 0,
    calc(100% - 20px) 0,
    100% 50%,
    calc(100% - 20px) 100%,
    0 100%
  );
}
/* 活性 */
.step-item--active{
  background: #cc0033;
}

@media (max-width: 768px) {
  .step-block{
    height: 150px;
  }
  .step-block .content-inner{
    padding: 0 20px;
  }
  .step-list{
    gap: 0;
  }
  .step-item{
    font-size: 14px;
  }
}

.content-block--step{
  position: relative;
  margin: 64px 0;
}
.wizard-inner{
  display: grid;
  align-items: start;
  column-gap: 24px;
  grid-template-columns: minmax(0,1fr) 392px; /* 左=可変 / 右=392px */
  margin: 24px 0 0;
}
@media (max-width: 768px) {
  .content-block--step{
    margin: 26px 0;
  }
  .wizard-inner{
    display: block;
  }
}


/* 右ブロック */
.fee-wrap{
  position: sticky;
  top: 164px;
  border-radius: 20px;
  max-height: calc(100vh - 164px - 68px);
  overflow: hidden;
  z-index: 5;
}

.fee-heading,
.bootstrap h1.fee-heading{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  margin: 0;
  background: #4C4C4C;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.fee-body{
  padding: 20px 20px 30px;
  background: #F3F3F3;
}
.fee-body__inner{
  max-height: calc(100vh - 164px - 60px - 50px - 68px);
  overflow-y: auto;
}

.fee-block + .fee-block{
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid #7D7D7D;
}
.fee-block:not(.fee-block--tag) + .fee-block--option{
  border-top: 1px dashed #7D7D7D;
}
.fee-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fee-label,
.fee-unit{
  font-size: 18px;
  font-weight: 700;
}
.fee-unit{
  margin-left: 10px;
  text-align: left;
}
.fee-value{
  text-align: right;
  font-size: 24px;
  font-weight: 900;
}
.fee-value--red{
  color: #BC2739;
}
.fee-value--red .fee-unit{
  color: #272727;
}

.fee-block--l .fee-value{
  font-size: 32px;
  font-family: 'Lato', 'Noto Sans JP', Helvetica, Neue Haas Grotesk, Arial;
  font-weight: 900;
}
.fee-block--l .fee-unit{
  display: inline-block;
  min-width: 70px;
  font-size: 14px;
}
.fee-block--l .note-text{
  margin: 3px 0 0;
  text-align: center;
}

.fee-block--tag .fee-label{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 24px;
  background: #7D7D7D;
  color: #fff;
  font-size: 16px;
  line-height: 1;
}
.fee-block--tag .fee-value{
  font-size: 26px;
}

.fee-block--option .fee-label{
  font-size: 16px;
  max-width: 172px;
}
.fee-block--option .fee-value{
  font-size: 24px;
  font-weight: 900;
}
.fee-block--option .fee-unit{
  display: inline-block;
  width: 34px;
  font-size: 14px;
}
.fee-block--option .note-text{
  margin: 3px 0 0;
}
@media (max-width: 768px) {
  .fee-wrap{
    position: relative;
    top: 0;
    max-height: unset;
    margin-top: 30px;
  }
  #cboxLoadedContent .fee-wrap{
    margin-top: 0;
  }

  .fee-body__inner{
    max-height: unset;
  }
}
@media (max-width: 420px) {
  .fee-body{
    padding: 15px;
  }
  .fee-label,
  .fee-unit{
    font-size: 16px;
  }
  .fee-unit{
    margin-left: 5px;
  }
  .fee-block--tag .fee-label{
    font-size: 14px;
  }
  .fee-block--option .fee-value{
    font-size: 22px;
  }
  .fee-block--option .fee-label{
    font-size: 14px;
  }
  .fee-block--option .fee-unit{
    font-size: 12px;
  }
  .fee-block--l .fee-value{
    font-size: 30px;
  }
}
@media (max-width: 376px) {
  .fee-block--option .fee-label{
    max-width: 164px;
  }
}

/* 右下追従ブロック */
.fixed-block{
  display: none;
}
@media (max-width: 768px) {
  .fixed-block{
    position: fixed;
    right: 16px;
    bottom: 66px;
    z-index: 15;
  }
  .fixed-block button{
    padding: 0;
    border: 0;
    background: no-repeat;
  }
  .fixed-block img{
    width: 29.5vw;
    height: 25.2vw;
  }

}



/* 左ブロック */
.wizard{
  min-width:0;
}
.wizard-text{
  margin: 20px 0 0!important;
}
.note-text + .wizard-section {
  margin-top: 30px;
}
.wizard-section + .wizard-section,
.wizard-item + .wizard-item{
  margin-top: 30px;
}
.section-heading,
.bootstrap h2.section-heading,
.bootstrap h3.section-heading{
  position: relative;
  margin: 0 0 20px;
  padding-left: 15px;
  border-left: 5px solid #CC0033;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}
.section-heading--l,
.bootstrap h2.section-heading--l,
.bootstrap h3.section-heading--l{
  margin-bottom: 50px;
  font-size: 44px;
}

.input-block{
  margin: 20px 0 0;
}
.input-block input{
  width: calc(50% - 12px);
  font-size: 24px;
  font-weight: 900;
}
@media (max-width: 768px) {
  .wizard{
    margin-top: 30px;
  }
  .section-heading--l,
  .bootstrap h2.section-heading--l,
  .bootstrap h3.section-heading--l{
    font-size: 32px;
  }
  .wizard-section + .wizard-section{
    margin-top: 50px;
  }

  .input-block input{
    width: 100%;
  }
}

/* ラジオボタン本体設定 */
.control-button {
  margin-right: 10px!important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  width: 26px;
  height: 26px;
  border: 3px solid #E5E5E5;
  border-radius: 9999px;
  cursor: pointer;
}
.control-button:checked {
  border: none;
  background: #CC0033;
}
.control-button:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 10px;
  height: 10px;
  margin: auto;
  border-radius: 9999px;
  background: #fff;
}

/* ラジオボタンを包んだブロック */
.control-block{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.control-block--col3 .control-item{
  width: calc((100% - 48px) / 3);
  text-align: left;
}
.control-block--col3 .control-item > label{
  min-height: 69px;
}
.control-item {
  position: relative;
  width: 100%;
  margin: 0!important;
  border: 2px solid #E5E5E5;
  border-radius: 20px;
  background: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.control-item label{
  width: 100%;
}
.control-item.is-checked{
  border-color: #CC0033;
}
/* control-item--separateはPC/SPで出し分け */
.control-item__main,
.control-item:not(.control-item--separate) > label{
  display: flex!important;
  align-items: center!important;
  width: 100%;
  height: 100%;
  padding: 20px;
  cursor: pointer;
}
.control-item.is-checked{
  border-color: #CC0033;
}
.control-item--has-image .control-info{
  width: calc(100% - 36px - 125px - 200px);
}
.control-item--no-image .control-button{
  margin-right: 20px!important;
}
.control-item--no-image .control-info{
  width: calc(100% - 46px - 200px);
}
.control-item--no-image .control-title + .control-info__text{
  margin-top: 10px !important;
}
.control-info__text{
  font-size: 14px;
}
.control-text{
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
}
.control-title{
  font-size: 18px;
  font-weight: 700;
}
.control-info__text.font-weight--bold + .control-info__text.font-weight--bold{
  margin-top: 20px;
}
.control-item--separate .add-box{
  width: 200px;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  text-align: right;
}
.control-item--separate .control-link{
  margin-top: 5px;
  font-weight: normal;
  text-align: right;
}

/* ラジオボタン 縦並び */
.control-item--row label{
  flex-direction: column;
  text-align: center;
}
.control-item--row span + span{
  margin-top: 6px;
}
.control-item--row .control-price{
  text-align: center;
}
.control-item--row .control-button{
  margin: 0 0 16px!important;
}
.control-item--row .note-text{
  width: 100%;
  margin-top: 10px;
  text-align: left;
  font-weight: normal;
}

/* ラジオボタン 画像 */
.control-item:not(.control-item--row) .control-image{
  width: 120px;
  margin-right: 5px!important;
}

/* 左画像付きタイトル */
.control-text--option{
  position: relative;
  width: 100%;
  min-height: 54px;
  padding-left: 59px;
  text-align: left;
}
.control-text--option .icon-option{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: inline-block;
  width: 54px;
  height: auto;
}

/* ラジオボタン 料金 */
.control-price{
  min-width: 200px;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
}
.control-price__value{
  font-size: 24px;
  font-family: 'Lato', 'Noto Sans JP', Helvetica, Neue Haas Grotesk, Arial;
  font-weight: 900;
}
.control-price__unit{
  font-size: 18px;
}
.control-price__tax{
  font-size: 14px;
}

@media (max-width: 768px) {

  /* ラジオボタンを包んだブロック */
  .control-title{
    line-height: 1.5;
  }
  .control-item__main{
    padding: 20px 20px 10px;
  }
  .control-item__bottom{
    width: 100%!important;
    padding: 0 20px 20px!important;
  }

  /* ラジオボタン 画像 */
  .control-image{
    margin-right: 10px !important;
  }

  /* ラジオボタン 料金 */
  .control-price .control-title{
    display: block;
    width: 100%;
  }
  .control-price{
    text-align: left;
  }
  .control-item--has-image .control-price{
    min-width: auto;
    width: calc(100% - 36px - 130px);
    text-align: left;
  }

}

/* ラジオボタン label上に追加 */
.add-box{
  position: absolute;
  pointer-events: none;
  width: 100%;
}
.add-box a{
  pointer-events: auto;
}

/* ラジオボタン 非活性 */
.control-item--disabled::before{
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background: rgba(0, 0, 0, .3);
  width: 100%;
  height: 100%;
  z-index: 10;
}
.control-item--disabled > label{
  cursor: default;
}

@media (max-width: 768px) {
  .control-block:not(.control-block--spcol2){
    flex-direction: column;
    gap: 18px;
  }
  .control-block--col3 .control-item{
    width: 100%;
  }
}

/* 「詳細はこちら」のリンク付き */
.control-item--more > label{
  padding-bottom: 68px!important;
}
.control-item--more .add-box{
  width: 100%;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.control-item--more .add-box a{
  color: #7D7D7D;
  font-size: 18px;
  font-weight: 700;
}

/* 個別設定 */
/* オプション選択 */
.control-item--option .control-button{
  margin: 0 0 4px!important;
}


/* モーダル設定 */
#colorbox,
#cboxWrapper,
#cboxContent{
  overflow: unset;
}
#cboxLoadedContent{
  padding: 0;
  background: none;
}
#cboxClose{
  top: -30px;
  right: -30px;
  width: 60px;
  height: 60px;
  background: url(/sites/default/files/media/service/home_5g/quotation/image/icon_close.webp) no-repeat center / 100%;
}
@media (max-width: 768px) {
  #cboxClose{
    top: -15px;
    right: -15px;
    width: 50px;
    height: 50px;
    z-index: 20;
  }
}

/* ---------------------------------------
	モーダル内スクロールバーデザイン調整
--------------------------------------- */
/* 768px以下（SP想定）の時だけスクロールバーの色・太さを変更 */
@media (max-width: 768px) {
  .modal-wrap{
    height: 100vh;
  }
  #cboxLoadedContent #modal-fee.fee-wrap{
    height: 100%;
  }
  .modal-wrap,
  #cboxLoadedContent #modal-fee.fee-wrap{
    max-height: 85vh;
  }
  .fee-inner{
    overflow-y: auto;
    height: 100%;
  }
  /* つまみ（Thumb）のデザイン */
  /* オプションは線を太く */
  #modal-option .simplebar-track.simplebar-vertical,
  #modal-fee .simplebar-track.simplebar-vertical{
    width: 10px !important;
  }
  .simplebar-track.simplebar-vertical .simplebar-scrollbar::before{
    opacity: 1 !important;
    transition: none !important;
  }
  /* オプションは色を既存に合わせる */
  #modal-option .simplebar-track.simplebar-vertical .simplebar-scrollbar::before{
    background: #bababa !important;
  }
  /* お見積もりは色を濃くする */
  #modal-fee .simplebar-track.simplebar-vertical .simplebar-scrollbar::before{
    background: #7d7d7d !important;
  }

  /* 通常表示時はスクロールバー不要 */
  .wizard-inner .fee-inner{
    height: auto;
    max-height: unset;
  }
}