@charset "utf-8";

/* CSS Document */
html,
body {
  width: 100%;
  height: auto;
}

#wrapper {
  width: 100%;
  min-height: calc(100vh - 400px);
}

a {
  color: #333;
}

a:hover {
  color: #477DC5;
  text-decoration: none;
}

h4 {
  position: relative;
  text-align: center;
}

h4 span {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 0 2.5em;
  padding: 0 1em;
  background-color: #fff;
  text-align: left;
}

h4::before {
  position: absolute;
  top: 50%;
  z-index: 1;
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
}

ul li {
  font-size: 1.1em;
  line-height: 1.8em;
}



/* バックグラウンドカラー */
.bg-white {
  background-color: #fff;
  padding: .3em;
}

.bg-glay {
  background-color: #e9e9e9;
}

.bg-lightglay {
  background-color: #efefef;
}

.bg-danger {
  background-color: #ebccd1;
}

.navbar-collapse {
  background-color: #fff;
}

.bg-midnightblue {
  background-color: #003d66;
}

.bg-darkblue {
  background-color: #060f12;
}

.bg-lightblue {
  background-color: #E8F7FC;
}

/* バックグラウンドイメージ */
.bg-img {
  background-image: url(../img/navy_blue.png);
  background-repeat: repeat;
}

.bg-img02 {
  background-image: url(../img/subtle_freckles.png);
  background-repeat: repeat;
}

.bg_coupon {
  background-image: url(../img/background_coupon.png);
  background-position: center;
  background-repeat: repeat;
}

.bg_kenkou {
  background-image: url(../img/background_kenkou.png);
  background-position: center;
  background-repeat: repeat;
}

.bg_security {
  background-image: url(../img/background_security.png);
  background-position: center;
  background-repeat: repeat;
}

.bg_kaketsuke {
  background-image: url(../img/background_kaketsuke.png);
  background-position: center;
  background-repeat: repeat;
}

.bg_smartbox {
  background-image: url(../img/bg-smartbox.png);
  background-position: center;
  background-repeat: repeat;
}

/* テキストカラー */

.text-darkblue {
  color: #001f33;
}

.text-white {
  color: #FFF;
}


/*================================================
 *  マージン設定
 ================================================*/
/* margin-top */
.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 1em;
}

.mt-2 {
  margin-top: 2em;
}

.mt-3 {
  margin-top: 3em;
}

/* margin-bottom */
.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 1em;
}

.mb-2 {
  margin-bottom: 2em;
}

.mb-3 {
  margin-bottom: 3em;
}

.mb-4 {
  margin-bottom: 4em;
}

.mb-5 {
  margin-bottom: 5em;
}


/* margin-left */
.ml-0 {
  margin-left: 0;
}

.ml-1 {
  margin-left: 1em;
}

.ml-2 {
  margin-left: 2em;
}

.ml-3 {
  margin-left: 3em;
}



/*================================================
 *  パディング設定
 ================================================*/
/* padding */
.pd-0 {
  padding: 0;
}

.pd-1 {
  padding: 1em;
}

.pd-2 {
  padding: 2em;
}

.pd-3 {
  padding: 3em;
}

/* padding-top */
.pt-0 {
  padding-top: 0;
}

.pt-1 {
  padding-top: 1em;
}

.pt-2 {
  padding-top: 2em;
}

.pt-3 {
  padding-top: 3em;
}

.pt-4 {
  padding-top: 4em;
}

.pt-5 {
  padding-top: 5em;
}

/* padding-bottom */
.pb-0 {
  padding-bottom: 0;
}

.pb-1 {
  padding-bottom: 1em;
}

.pb-2 {
  padding-bottom: 2em;
}

.pb-3 {
  padding-bottom: 3em;
}

.pb-4 {
  padding-bottom: 4em;
}

.pb-5 {
  padding-bottom: 5em;
}

.well02 {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

.well02::before,
.well02::after {
  position: absolute;
  bottom: 100%;
  left: 26%;
  content: '';
  height: 0;
  width: 0;
  border: 12px solid transparent;
}

.well02::before {
  border-bottom: 16px solid #ccc;
}

.well02::after {
  border-bottom: 16px solid #f5f5f5;
  margin-bottom: -2px;
}


/*================================================
 *  NAV設定
 ================================================*/
.navbar {
  height: 51px;
}

.navbar-default {
  border-bottom: #272e88 1px solid;
  background-color: #fff;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #555;
  cursor: default;
  background-color: #a7eaf4;
  border: 1px solid #a7eaf4;
  border-bottom-color: transparent;
}

/* ロゴ */
.navbar-brand {
  padding: 10px 15px;
}

.navbar-brand > img {
  height: 30px;
}



/*================================================
 *  ボタン設定
 ================================================*/
.disable-btn:hover {
  background: #fff;
  border-color: #ccc;
  cursor: default;
}



/*================================================
 *  パネル設定
 ================================================*/
.panel {
  padding: 1em;
}

/* パネル内タイトル＿空白 */
blockquote {
  margin: 0;
}

.panel-lightblue {
  background-color: #E8F7FC;
}

.panel-warning {
  background-color: #FFBE00;
}

.panel-border-info {
  border-color: #A2C9ED;
}

.media-heading {
  padding: .3em;
}




/*================================================
 *  メディアオブジェクト設定
 ================================================*/
.btn {
  white-space: normal;
}

.blue-btn .btn:hover,
.blue-btn .btn:focus,
.btn.focus {
  color: #FFFD00;
  text-decoration: none;
}




/*================================================
 *  テーブル設定
 ================================================*/
table.table01,
table.table02,
table.table03 {
  width: 100%;
  border-right: #a7eaf4 solid 1px;
  border-collapse: collapse;
}

table.table01 thead th,
table.table02 thead th,
table.table03 thead th {
  background: #a7eaf4;
  color: #333;
  padding: 10px 15px;
  border-right: #FFF solid 1px;
  border-bottom: #FFF solid 1px;
}

table.table01 thead th:last-child,
table.table02 thead th:last-child,
table.table03 thead th:last-child {
  border-right: #a7eaf4 solid 1px;
}

table.table01 tbody th,
table.table02 tbody th,
table.table03 tbody th {
  background: #a7eaf4;
  color: #FFF;
  padding: 10px 15px;
  border-bottom: #FFF solid 1px;
  vertical-align: top;
}

table.table01 tbody tr:last-child th,
table.table02 tbody tr:last-child th,
table.table03 tbody tr:last-child th {
  border-bottom: #a7eaf4 solid 1px;
}

table.table01 tbody td,
table.table02 tbody td,
table.table03 tbody td {
  background: #FFF;
  padding: 10px 15px;
  border-left: #a7eaf4 solid 1px;
  border-bottom: #a7eaf4 solid 1px;
  vertical-align: top;
}

table.table02,
table.table03 {
  width: 100%;
  border-right: #ccc solid 1px;
  margin-bottom: 5em;
}

table.table02 thead th,
table.table03 thead th {
  background: #ccc;
}

table.table02 thead th:last-child,
table.table03 thead th:last-child {
  border-right: #ccc solid 1px;
}

table.table02 tbody th,
table.table03 tbody th {
  background: #ccc;
  color: #000;
}

table.table02 tbody tr:last-child th,
table.table03 tbody tr:last-child th {
  border-bottom: #ccc solid 1px;
}

table.table02 tbody td,
table.table03 tbody td {
  border-left: #ccc solid 1px;
  border-bottom: #ccc solid 1px;
}



/*================================================
 *  会社概要/プライバシーポリシー/
 ================================================*/
#about h3 {
  position: relative;
  padding-bottom: .5em;
  border-bottom: 4px solid #ccc;
}

#about h3:after {
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 4px;
  background-color: #003d66;
}

#privacy {
  margin-bottom: 5em;
}

#privacy h3 {
  position: relative;
  padding-bottom: .5em;
  border-bottom: 4px solid #ccc;
  font-size: 1.5rem;
}

#privacy h3:after {
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 4px;
  background-color: #003d66;
}

#privacy ol li {
  list-style: none;
}


/*================================================
 *  トップへ戻るボタン
 ================================================*/
.topBtn {
  position: fixed;
  /*固定*/
  bottom: 20px;
  /*場所を右下に移動*/
  right: 20px;
  /*場所を右下に移動*/
  display: block;
  /*aタグをblock要素に変更*/
  background-color: rgba(0, 0, 0, 0.5);
  /*以下、デザインはご自由に！！*/
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 11px;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 22px;
  border-radius: 30px;
  padding-top: 30px;
  box-sizing: border-box;
  z-index: 10;
}

.topBtn:before {
  content: '\25B2';
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 20px;
}

.topBtn:hover {
  opacity: 0.7;
}


/*================================================
ご利用の流れ
 ================================================*/
#nagare {
  counter-reset: number 0;
  width: 80%;
  margin: 0 auto;
}

#nagare .nagare_box {
  position: relative;
  padding: 2em 2.5em .5em;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
  margin: 2em 0 .5em 1.1em;
}

#nagare .nagare_box:before {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: -15px;
  width: 40px;
  height: 30px;
  vertical-align: middle;
  text-align: center;
  color: #FFF;
  font-size: 22px;
  line-height: 30px;
  background: #a94442;
  box-shadow: 0 2px 2px rgba(26, 26, 26, 0.14);
  counter-increment: number 1;
  content: counter(number) " ";
}

#nagare .nagare_box:after {
  position: absolute;
  content: '';
  top: 40px;
  left: -15px;
  border: none;
  border-bottom: solid 8px transparent;
  border-right: solid 15px #24140e;
}

#nagare .nagare_box p {
  position: relative;
  padding: 0;
  margin: .5em 0;
  z-index: 3;
  line-height: 1.7;
}

#nagare .box01 {
  position: relative;
  padding: 2em 2.5em .5em;
  box-sizing: border-box;
  background: #8b0000;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
  margin: 2em 0 .5em 1.1em;
  color: #fff;
}

#contentbox #nagare .box01 h9 {
  text-align: center;
}

.paper {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(128, 128, 128, 0.1) inset;
  border-color: #dedede;
}


/*================================================
ご利用の流れ矢印
 ================================================*/

.arrow {
  width: 100%;
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
}

.arrow::before {
  content: '';
  width: 15px;
  height: 15px;
  border: 0px;
  border-right: solid 2px #a94442;
  border-bottom: solid 2px #a94442;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  left: 47%;
}


/* お問い合せ
-------------------------------------------------- */
#contact .container {
  max-width: 960px;
}

#contact .lh-condensed {
  line-height: 1.25;
}

#contact .required {
  font-size: .7em;
  margin-left: .7em;
  padding: .2em .5em;
  color: #fff;
  background-color: #d70035;
  border-radius: 5px;
}

#contact .contact-form {
  margin-bottom: 2em;
}




/*================================================
フッター
 ================================================*/
footer {
  color: #fff;
  background: #003d66;
}





/*================================================
 *  タブレット・スマホ設定
 ================================================*/
@media screen and (max-width: 768px) {

  /* テーブル設定 */
  table.table01 thead {
    display: none;
  }

  table.table01 tbody th {
    display: block;
  }

  table.table01 tbody td {
    display: block;
  }

  table.table01 tbody td::before {
    content: attr(label);
    float: left;
    clear: both;
    font-weight: bold;
  }

  table.table02 thead {
    display: none;
  }

  table.table02 tbody th {
    display: block;
  }

  table.table02 tbody td {
    display: block;
  }

  table.table02 tbody td::before {
    content: attr(label);
    float: left;
    clear: both;
    font-weight: bold;
  }

  .col-xs-9 {
    margin-left: 20%;
  }

  .caption ul {
    width: 35%;
    margin: 0 auto;
  }

  .tablet-text-center {
    text-align: center;
  }

  hr {
    margin: 0;
  }
}

@media screen and (max-width: 425px) {
  h2 {
    font-size: 1.5em;
  }

  h3 {
    font-size: 1.2em;
  }

  h4 span {
    position: noen;
    display: block;
    margin: 0;
    padding: 0;
    background-color: none;
    text-align: left;
    line-height: 1.2em;
  }

  h4::before {
    position: none;
    top: none;
    content: none;
    width: 100%;
    height: none;
    background-color: none;
  }

  .col-xs-6 {
    padding: 0 5px;
  }

  .col-xs-9 {
    width: 100%;
    margin-left: 0;
  }

  .mobile-small {
    width: 30%;
  }

  .caption ul {
    width: 55%;
  }

  .tablet-text-center {
    text-align: left;
  }

  .panel {
    padding: .5em;
  }

  .media-object {
    width: 50px;
  }

  #wrapper .style3 {
    padding: 1em;
  }
}


/* 2019-09-13 追加 */
.n-line-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.n-line-box .media-body.text-left {
  max-width: 319px;
}

@media screen and (max-width: 768px) {
  .n-line-box {
    justify-content: flex-start;
  }

  .n-line-box .media-body.text-left {
    max-width: none;
  }
}


/* HOME Nライン光ならでは！充実のオプション */

.nline-options {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
}

.nline-options li {
  width: 47.5%;
  list-style-type: none;
  margin-bottom: 2rem;
}

.nline-options__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 100%;
  border: solid 1px #999;
  border-radius: 8px;
}

.nline-options__inner img {
  margin: 0.5rem;
  display: block;
  width: 25%;
}

.nline-options__inner--text {
  width: 70%;
}

.nline-options__inner--text h4:before {
  display: none;
}

.nline-options__inner--text h4 {
  font-size: 21px;
  text-align: left;
}

a.nline-options__inner:hover {
  background-color: #ddd;
}

a.nline-options__inner:hover:hover h4,
a.nline-options__inner:hover p {
  color: #000;
}

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

  .nline-options li {
    width: 100%;
  }
}

/* HOME Nライン光ならでは！充実のオプション ここまで */