@charset "UTF-8";

/*
  contents

 - reset（編集しない）
 - base（font-familyなどの変更。fontは1.6rem＝16px）
 - link（テキストリンク関連）
 - button（ボタン関連）
 - typography（見出し・注釈・本文など共通）
 - main（各セクションごとのスタイル）
 - footer（コピーライトなどフッター関連）
 - utility（clearfix・mb10など）
 */
/* -----------------------------------------
  reset（編集しない）
----------------------------------------- */
html,
body,
div,
span,
h1,
p,
img,
i,
ol,
ul,
li,
label,
section {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  max-height: 99999px;
}

body {
  line-height: 1;
}

html,
body {
  overflow: auto;
}

section {
  display: block;
}

ol,
ul {
  list-style: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */

/* tables still need 'cellspacing="0"' in the markup */

*,
*:before,
*:after {
  box-sizing: border-box;
  /* transition: 0.5s; */
}

input,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type='radio'] {
  display: none;
}

label {
  cursor: pointer;
}

/* -----------------------------------------
  base（font-familyなどの変更。fontは1.6rem＝16px）
----------------------------------------- */
/* rem用 */
html {
  font-size: 62.5%;
}

body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "メイリオ", Meiryo, "Meiryo UI", Avenir, "Open Sans", Helvetica, "Helvetica Neue", Arial, Verdana, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-size: 1.6rem;
}

/* 解析タグの隙間対策 */
/* 画像の隙間対策 */
#wrapper img {
  max-width: 100%;
  display: block;
  font-size: 0;
  line-height: 0;
  margin: 0 auto;
}

#wrapper {
  width: 100%;
  margin: 0 auto;
}

#wrapper p {
  color: #545352;
  font-family: YakuHanJP, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "メイリオ", Meiryo, "Meiryo UI", Avenir, "Open Sans", Helvetica, "Helvetica Neue", Arial, Verdana, Roboto, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  letter-spacing: 0.005em;
}

#wrapper .mb {
  margin-bottom: min(1.33333vw, 16px);
}

#wrapper .sec_04.pb {
  padding-bottom: min(5vw, 60px);
}

.note_0_box {
  padding: 0 min(2.08333vw, 25px) min(0vw, 0px);
  max-width: 850px;
  margin: 0 auto;
}

@media screen and (max-width: 750px) {
  #wrapper .sec_04.pb {
    padding-bottom: min(8vw, 60px);
  }
  
  .note_0_box {
    padding: 0 min(0vw, 0px) min(0vw, 0px);
  }
}

#wrapper .fz18 {
  font-size: min(1.16666vw, 14px);
  padding-left: 2em;
  text-indent: -2em;
}

@media screen and (max-width: 750px) {
  #wrapper .fz18 {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 751px) and (max-width: 1100px) {
  #wrapper .fz18 {
    font-size: 1.4rem;
  }
}

#wrapper .ti_1 {
  padding-left: 1em;
  text-indent: -1em;
}

.word-b {
  word-break: break-all;
  color: #545352;
  font-weight: 300;
}

/* -----------------------------------------
  fv
----------------------------------------- */

.fv h1 {
  background-color: #cd0f30;
}

#wrapper .fv .fv_txt01 {
  width: 100%;
  padding-left: 3%;
}

#wrapper .fv_txt01 a {
  font-size: min(1.16666vw, 14px);
  display: inline-block;
  text-indent: 0;
}

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

  #wrapper .fv .fv_txt01,
  #wrapper .sec_03 .fv_txt01.only {
    font-size: max(2.2vw, 12px);
  }

  #wrapper .fv_txt01 a {
    font-size: 1.4rem;
  }
}

@media screen and (min-width: 751px) and (max-width: 1100px) {
  #wrapper .fv_txt01 a {
    font-size: 1.4rem;
  }
}

#wrapper .hr_cv_btn_nav {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  padding: min(1.66666vw, 20px) 0;
}

@media screen and (max-width: 750px) {
  #wrapper .hr_cv_btn_nav {
    max-width: 100%;
  }
}

#wrapper .sec_02 .hr_cv_btn_nav {
  padding: min(3.75vw, 45px) 0;
}

@media screen and (max-width: 750px) {
  #wrapper .sec_02 .hr_cv_btn_nav {
    padding: min(6.66666vw, 50px) min(5.33333vw, 40px) 0;
  }
}

#wrapper .hr_cv_btn_fix {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  z-index: 100;
  padding: 0;
  max-width: 640px;
}

@media screen and (max-width: 750px) {
  #wrapper .hr_cv_btn_fix {
/*     left: 0; */
/*     width: calc(98% - 35px); */
/*     padding: 0 min(5.06666vw, 38px) 0 0; */
/*     margin-left: 0; */
    max-width: 750px;
    width:90%;
  }

  #wrapper .hr_cv_btn_fix img {
    max-width: 100%;
  }

  #floaterBanner .scrollBtn {
    right: 0 !important;
  }
}

@media screen and (min-width: 751px) and (max-width: 900px) {
  #wrapper .hr_cv_btn_fix {
    padding: 0 min(7vw, 56px) 0 0;
  }
}

#wrapper .fv .notes_container{
  max-width: 960px;
  margin: 0 auto min(4.5vw, 54px);
}

#wrapper .fv .notes_container2{
  max-width: 960px;
  margin: 0 auto min(0vw, 20px);
}

#wrapper .fv .notes_container3{
  max-width: 960px;
  margin: 0 auto min(4.5vw, 0px);
  padding: 0 min(5.33333vw, 00px);
}

#wrapper .sec_04 .notes_container {
  max-width: 960px;
  margin: 0 auto min(4.5vw, 20px);
}

#wrapper .fv .notes_container.overview,
#wrapper .sec_04 .notes_container.overview {
  margin: 0;
  padding: 0;
}


@media screen and (max-width: 750px) {
  #wrapper .fv .notes_container2{
    width: 90%;
  }
  
  #wrapper .fv .notes_container3{
    padding: 0 min(5.33333vw, 40px);
  }

  #wrapper .sec_04 .notes_container,
  #wrapper .ac,
  #wrapper #sec_04 .img15000,
  #wrapper .hr_cv_btn_nav,
  #wrapper .line_bnr,
  #wrapper #sec_01 .reason_ttl,
  #wrapper .u29_bnr.w-850 {
    padding: min(1.33333vw, 10px) min(5.33333vw, 40px) 0;
  }


  #wrapper .u29_bnr.w-850 {
    padding-top: 0;
  }
}

/*
#wrapper .fv .notes_container.fv_next {
  margin-bottom: -50px!important;
}
*/

@media screen and (min-width: 751px) and (max-width: 1100px) {
  #wrapper .fv .notes_container.fv_next {
    padding: min(0.90909vw, 10px) min(3.63636vw, 40px) 0;
  }
}

#wrapper .fv,
#wrapper .sec_01,
#wrapper .sec_04 {
  background: #feede5;
}

#wrapper .sec_05 {
  background: #f0f0f0;
}

#wrapper .u29_bnr picture {
  display: block;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

#wrapper .sec_01,
#wrapper .sec_05 {
  padding: min(5.66666vw, 68px) 0;
}

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

  #wrapper .sec_01 {
    padding: min(5.33333vw, 40px) 0 min(8vw, 60px);
  }

  #wrapper .sec_05 {
    padding: min(9.33333vw, 70px) 0;
  }
}

#wrapper #sec_01 .reason_ttl img {
  max-width: 720px;
  width: 100%;
}

@media screen and (max-width: 750px) {
  #wrapper #sec_01 .reason_ttl img {
    max-width: 100%;
  }
}

.line_bnr {
  margin: min(0.83333vw, 0px) auto;
  text-align: center;
  max-width: 650px;
}

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

  #wrapper .fv .hr_cv_btn_nav,
  #wrapper .line_bnr,
  #wrapper #sec_01 .reason_ttl {
    max-width: 100%;
  }

  #wrapper .fv .hr_cv_btn_nav {
    margin: min(2.13333vw, 16px) auto 0;
  }

  #wrapper .line_bnr,
  #wrapper #sec_01 .reason_ttl {
    margin: min(2.66666vw, 20px) auto 0;
  }

  #wrapper .sec_06 .hr_cv_btn_nav {
    margin: min(6.66666vw, 50px) auto;
  }


  #wrapper #sec_01 .reason_ttl {
    margin-top: 0;
  }
}

.bnr_txt {
  padding: 0 min(2.08333vw, 25px);
}


#wrapper .reason_wrap,
#wrapper .img_0yen {
  padding: 0 min(1.66666vw, 20px);
}

@media screen and (max-width: 750px) {
  #wrapper .reason_wrap {
    padding: 0 min(3.33333vw, 25px);
  }
}

#wrapper .reason_box {
  background: #fff;
  border-radius: min(2.5vw, 30px);
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  padding: min(3.33333vw, 40px) 0;
}

@media screen and (max-width: 750px) {
  #wrapper .reason_box {
    padding: min(5.33333vw, 40px) 0;
  }
}

#wrapper .reason_box .reason_box_title img {
  width: 100%;
  max-width: 684px;
}

#wrapper .reason_box img {
  width: 100%;
  max-width: 684px;
}

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

  #wrapper .reason_box .reason_box_title img,
  #wrapper .reason_box img {
    max-width: 100%;
  }
}

#wrapper #reason_01 {
  margin: min(3.33333vw, 40px) auto min(2.5vw, 30px);
}

#wrapper #reason_01 .notes_container,
#wrapper #reason_02 .notes_container,
#wrapper #reason_05 .notes_container,
#wrapper #reason_06 .notes_container {
  width: 90%;
  margin: min(2.5vw, 30px) auto 0;
  max-width: 630px;
}

#wrapper #reason_01 .rs_img_01,
#wrapper #reason_02 .rs_img_02,
#wrapper #reason_05 .rs_img_05,
#wrapper #reason_06 .rs_img_06 {
  margin-top: min(2.5vw, 30px);
}

#wrapper #reason_01 .rs_img2_01 {
  margin-top: min(3.33333vw, 40px);
}

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

  #wrapper #reason_01 .rs_img_01,
  #wrapper #reason_02 .rs_img_02,
  #wrapper #reason_05 .rs_img_05,
  #wrapper #reason_06 .rs_img_06,
  #wrapper #reason_01 .rs_img2_01 {
    margin-top: min(5.33333vw, 40px);
  }
}

#wrapper #reason_02,
#wrapper #reason_05 {
  margin-bottom: min(2.5vw, 30px);
}

#wrapper .sec_03 {
  max-width: 950px;
  margin: 0 auto;
}

#wrapper .sec_03 .plan {
  margin: min(2.83333vw, 34px) auto;
  max-width: 786px;
}

@media screen and (max-width: 750px) {
  #wrapper .sec_03 .plan {
    margin: min(7.19999vw, 54px) auto 0;
  }
}

#wrapper .img_0yen {
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
}

#wrapper .img_0yen.negative {
  margin-top: min(2.33333vw, -28px);
}

@media screen and (max-width: 750px) {
  #wrapper .img_0yen.negative {
    margin-top: 0;
  }
}

#wrapper .sec_03 .notes_container {
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  padding: 0 min(1.66666vw, 20px);
}

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

  #wrapper .img_0yen,
  #wrapper .sec_03 .notes_container {
    max-width: 100%;
    padding: 0 min(5.33333vw, 40px);
  }
}

#wrapper .sec_03 .notes_container.ol_mt {
  margin-top: min(1.33333vw, 16px);
}

#wrapper .sec_04 {
  margin-top: min(4.5vw, 54px);
}

#wrapper .sec_04 .title_bg {
  background-color: #cb0031;
  padding: min(2.5vw, 30px) 0;
}

@media screen and (max-width: 750px) {
  #wrapper .sec_04 .title_bg {
    padding: min(4vw, 30px) 0;
  }
}

#wrapper .sec_04 .title_bg img {
  max-width: min(48vw, 576px);
}

@media screen and (max-width: 750px) {
  #wrapper .sec_04 .title_bg img {
    max-width: min(76.8vw, 576px);
  }
}

#wrapper .sec_04 .bnr {
  margin-top: min(3.33333vw, 40px);
}

@media screen and (max-width: 750px) {
  #wrapper .sec_04 .bnr {
    margin-top: min(2.66666vw, 20px);
  }
}

#wrapper .sec_04 .bnr+.bnr {
  margin-top: min(3.33333vw, 40px);
}

@media screen and (max-width: 750px) {
  #wrapper .sec_04 .bnr+.bnr {
    margin-top: min(8vw, 60px);
  }
}

#sec_04 .img15000 img {
  max-width: 800px;
  width: 100%;
}

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

  #sec_04 .img15000 img {
    max-width: 100%;
  }
}

#wrapper #sec_05 .step1 img,
#wrapper #sec_05 .step2 img,
#wrapper #sec_05 .step3 img {
  max-width: 720px;
  width: 100%;
}

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

  #wrapper #sec_05 .step1 img,
  #wrapper #sec_05 .step2 img,
  #wrapper #sec_05 .step3 img {
    max-width: min(100vw, 750px);
  }
}

#wrapper .step_ttl img {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

@media screen and (max-width: 750px) {
  #wrapper .step_ttl img {
    max-width: min(86.26666vw, 647px);
  }
}

.step1 {
  margin-top: min(2.66666vw, 32px);
}

.step2 {
  margin-top: min(3.33333vw, 40px);
}

.step3 {
  margin-top: min(1.66666vw, 20px);
}

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

  .step1,
  .step2 {
    margin-top: min(6.66666vw, 50px);
  }

  .step3 {
    margin-top: min(5.33333vw, 40px);
  }
}

#wrapper .sec_05 .notes_container {
  width: 90%;
  margin: min(1.25vw, 15px) auto 0;
  max-width: 650px;
}

/* -----------------------------------------
  link（テキストリンク関連）
----------------------------------------- */
#wrapper a {
  color: #0080ff;
  opacity: 1;
}

#wrapper a:hover {
  opacity: .8;
}

/* テキストリンク */
/* -----------------------------------------
  banner
----------------------------------------- */
#fixedBtn.fixed {
  position: absolute;
  bottom: -22%;
}


/* -----------------------------------------
  modal
----------------------------------------- */

/* JSとCSSのアニメーションが干渉してしまうためモーダル内はOFF  */
.br_750 {
  display: none;
}

.p-mv_bg {
  width: 100%;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #cd0f30 url(../../../../../contents/special/home-router/home5g_2022-2023/img/1_mv_bg_PC.png) center top repeat-x;
}

.fv_note_bg {
  width: 100%;
  background-color: #cd0f30;
}
.fv_note_bg div {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 0 20px 50px!important;
}

@media screen and (max-width: 1100px) {
  .p-mv_bg {
    height:45vw;
  }
}

@media screen and (max-width: 750px) {
  .p-mv_bg {
    height:auto;
    padding: 0;
  }
.fv_note_bg div {
  padding: 2.5% 3% 2% 10%!important;
  line-height: 1.4;
}
}

.p-mv {
  width: 100%;
  max-width: min(93.75vw, 1125px);
}

@media screen and (max-width: 750px) {
  .p-mv {
    max-width: min(100vw, 750px);
    padding-top: 0vw;
  }
}

#wrapper .u29_bnr {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 min(2.08333vw, 25px);
}

@media screen and (max-width: 750px) {
  #wrapper .u29_bnr {
    padding: 0 min(5.33333vw, 40px);
  }
}

#wrapper .u29_bnr.w-850 {
  width: 100%;
  max-width: 850px;
}

#wrapper .ac {
  padding: 0 min(2.08333vw, 25px) min(2.5vw, 30px);
  max-width: 850px;
  margin: 0 auto;
}

@media screen and (max-width: 750px) {
  #wrapper .ac {
    padding: 0 min(5.33333vw, 40px);
  }
}

#wrapper .ac.ac_pb_0 {
  padding-bottom: 0;
}



.ac ul>li {
  list-style: none;
  margin-top: min(1.66666vw, 20px);
}

.ac-label {
  cursor: pointer;
  position: relative;
  border: 1px solid #cd0f30;
  padding: min(1.25vw, 15px) 0;
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

@media screen and (max-width: 750px) {
  .ac-label {
    padding: min(2.66666vw, 20px) 0;
  }
}
@media screen and (min-width: 751px) and (max-width: 1100px) {
  .ac-label {
    padding: min(1.81818vw, 20px) 0;
  }
}

#wrapper .ac-label p {
  font-weight: bold;
  color: #cd0f30;
  font-size: min(1.83333vw, 22px);
}

@media screen and (max-width: 750px) {
  #wrapper .ac-label p {
    font-size: 4vw;
  }

  #wrapper .ac-label p.ac-label_title {
    letter-spacing: -1.1px;
    margin-right: min(4.53333vw, 34px);
  }
}

@media screen and (min-width: 751px) and (max-width: 1100px) {
  #wrapper .ac-label p {
    font-size: 2.2rem;
  }
}

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

  #wrapper .ac-label p.ac-label_title {
    margin-right: min(7.6vw, 38px);
  }
}

.ac-content {
  display: none;
  padding: min(0.83333vw, 10px);
  margin: 0 auto;
  /* transition: transform .4s; */
}

@media screen and (max-width: 470px) {
  .ac-content p {
    font-size: 3.5vw;
  }
}

.ac-content .certificate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 10% auto;
}

.ac-content .certificate .certificate_text {
  width: 100%;
  max-width: 638px;
  margin-bottom: 1.4%;
}

.ac-content .certificate .certificate_btn {
  width: 100%;
  max-width: 690px;
}

.icon-wrap {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translatey(-50%);
  width: 38px;
  height: 38px;
}

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

.icon:before,
.icon:after {
  position: absolute;
  content: "";
  display: block;
  /* transition: all 0.4s; */
  background: #cd0f30;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 2px;
  transform: translate(-50%, -50%);
}

.icon:before {
  transform: translate(-50%, -50%) rotate(90deg);
}

.icon.open:before {
  transform: translate(-50%, -50%) rotate(0deg);
}

.fonB {
  font-weight: bold;
}

.fon150 {
  font-size: 150%;
}

.txt_c {
  text-align: center;
}

.mt30 {
  margin-top: 30px!important;
}
.mb30 {
  margin-bottom: 30px!important;
}


/* ボタン用 */
.home5g-reasons {
  background: #d6081f;
  padding: 24px 12px;
  text-align: center;
}

.reasons-head img {
  width: min(95vw, 676px);
  height: auto;
  margin: 0 auto 20px;
}

.reasons-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 3vw; /* カード間の余白 */
}

.reason img {
  width: 26vw; /* 3つ並べても収まる値 */
  max-width: 232px; /* 元画像以上は伸ばさない */
  height: auto;
}

/* 万が一小さい端末でも中央揃え維持 */
@media (max-width: 360px) {
  .reason img {
    width: 28vw;
  }
}