@charset "utf-8";
/*
Theme Name: Lightning Child
Theme URI: ★ テーマの公式サイトなどのURL（空欄でも可） ★
Template: lightning
Description: ★ テーマの説明（空欄でも可） ★
Author: ★ テーマ作成者の名前（空欄でも可） ★
Tags: 
Version: 0.1.2
*/
.container.sectionBox.copySection.text-center p:nth-child(2) {
	display: none;
}

/*--------------------------------------------------
テキストなど
--------------------------------------------------*/
.text-red {
  color:#E2515A;
}

.text-blue {
  color:#5BA6B5;
}

.text-gray {
  color:#707070;
}

.text-white-bold {
  color:white;
  font-size:1.2em;
  font-weight:bold;
}

.text-bold {
  font-size: 1.125em;
  font-weight: bold;
}

.under-line {
  background:linear-gradient(transparent 60%, #FFF7BF 0%) ;
}

.text-plus {
  color:white;
  font-size:3em;
  font-weight:bold;
  text-shadow: 1px 2px 3px #808080;
}

.wrap {
  /*width:1110px;*/
  width:100%;
  height:auto;
  margin:0 auto;
  text-align: center;
}

ul {
  list-style: none;
  padding-left:0;
}

/*--------------------------------------------------
プラン
--------------------------------------------------*/
/*グレーのボックス*/
.plan-wrap {
  background-color:#EEEEEE;
  padding: 30px 20px 50px 20px;
  margin:50px 0px 100px 0px;
}

.plan-wrap .title {
  font-size:2em;
  font-weight:bold;
  letter-spacing:0.2em;
  margin-bottom:20px;
}

.plan-wrap .text {
  font-size:16px;
  line-height: 2em;
}

/*--------------------------------------------------
料金
--------------------------------------------------*/
.price-wrap {
  display:flex;
  justify-content:center;/*水平方向：中央*/
  align-items:center;/*垂直方向：中央*/
}

/*白いボックス*/
.price-wrap .box {
  width:40%;
  background-color: #fff;
  margin:50px 20px;
  box-shadow: 0px 0px 8px gray;
  position: relative;
}

/*タイトル*/
.price-wrap .title {
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: 0.3em;
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
    line-height: 1em;
}
.price-wrap .title span{
  font-size:16px;

}

/*タイトル下線赤*/
.price-wrap .title-line-red {
  position: relative;
}

.price-wrap .title-line-red:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;/*線の上下位置*/
  display: inline-block;
  width: 50px;/*線の長さ*/
  height: 2px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #E2515A;/*線の色*/
  border-radius: 2px;/*線の丸み*/
}

/*タイトル下線青*/
.price-wrap .title-line-blue {
  position: relative;
}

.price-wrap .title-line-blue:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;/*線の上下位置*/
  display: inline-block;
  width: 50px;/*線の長さ*/
  height: 2px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #5BA6B5;/*線の色*/
  border-radius: 2px;/*線の丸み*/
}

/*白いボックスの中身*/
.price-wrap .container {
  width:90%;
  margin:0 auto;
  padding:20px 0px;
  height:500px;
  position: relative;
}
.containe_txt {
    position: absolute;
    margin-top: 10px;
    font-size: 14px;
    color: #E2515A;
}
.containe_txt_top {
    position: absolute;
    margin-top: -40px;
    font-size: 18px;
    color: #E2515A;
}
.containe_txt.pc_txt {
    margin-left: 0px;
    width: 100%;
    width: 220%;
    position: absolute;
}
.containe_txt_top.ptxt1 {
    margin-left: 158px;
    font-weight: bold;
}
.containe_txt_top.ptxt2 {
    margin-left: 210px;
    font-weight: bold;
    width: 80%;
    text-align: center;
}

/*料金テキスト*/
.price1 {
  font-size:3em;
  font-weight:bold;
  letter-spacing:0.2em;
}
.boxfream1 {
    width: 100%;
    position: absolute;
    border: 7px double #F44336;
    min-height: 500px;
    /* left: 55px; */
}
.boxfream2 {
    width: 223%;
    position: absolute;
    border: 7px double #F44336;
    min-height: 500px;
    z-index: 1;
}
.price2 {
  font-size:2em;
  font-weight:bold;
}

/*料金内容*/
.price-wrap .content {
  display:flex;
  width:90%;
  margin:0 auto;
  font-size:13px;
  align-items:center;
}

/*初期費用・月額*/
.price-wrap .content1 {
  justify-content: space-around;
  height:60px;
  padding:20px 0px;
}

/*オプション*/
.price-wrap .content2 {
  justify-content:space-between;
}

/*平行線*/
.price-wrap hr {
  border-top: 1px dotted #707070;
  border-right: none;
  border-bottom: none;
  border-left: none;
  width:90%;
}

/*--------------------------------------------------
注意書き
--------------------------------------------------*/
.caution {
  display:flex;
  justify-content: center;
  text-align: left;
  margin-bottom:50px;
}

.text-caution {
  font-size:0.85em;
}

/*--------------------------------------------------
ボタン
--------------------------------------------------*/
.btn {
  display: inline-block;
  padding:10px 20px;
}

.btn-red {
  background-color:#E2515A;
}

.btn-blue {
  background-color:#5BA6B5;
}

.plan-wrap a {
  text-decoration: none;
}

/*--------------------------------------------------
周辺機器
--------------------------------------------------*/

.device-wrap {
  display:flex;
  justify-content: center;
  margin:50px 0px 100px 0px;
}

.device-wrap .container {
  width:33%;
}

/*--------------------------------------------------
お支払い方法
--------------------------------------------------*/
.pay-wrap {
  border:2px solid #afafaf;
  margin:50px 0px 100px 0px;
}

.pay-wrap .container {
  display:flex;
  justify-content: space-between;
  align-items: center;
}

.pay-wrap .content {
  width:auto;
  padding:30px;
}

.side-line {
  border-right: 2px solid #afafaf;
}

.pay-wrap img {
  margin-bottom:10px;
}

/*--------------------------------------------------
ご解約について
--------------------------------------------------*/
.cancel-wrap {
  background-color: #EEEEEE;
  padding:30px 20px;
  margin:50px 0px 100px 0px;
}

.cancel-wrap .container {
  text-align: left;
  font-size:0.875em;
  line-height: 1.2em;
  padding-top:15px;
}

/*--------------------------------------------------
導入までの流れ
--------------------------------------------------*/
.flow-wrap .cont {
  display:flex;
  /*width:100%;*/
  border:1px solid #707070;
  align-items: center;
  margin:20px 0px 30px 0px;
}

.flow-wrap .content1 {
  background-color: #E5511C;
  color:white;
  font-weight: bold;
  font-size: 1.3em;
  padding:25px;
  width:120px;
}

.flow-wrap .content2 {
  width:auto;
  text-align: left;
  padding:0px 20px;
}

.text-center {
  margin: 0 auto;
}


/*--------------------------------------------------
レスポンシブ
--------------------------------------------------*/
@media screen and (max-width: 1200px) {
.boxfream1 {
    
}
.boxfream2 {
    width: 544px;
}
.containe_txt_top.ptxt1 {
    margin-left: 0px;
    text-align: center;
    width: 100%;
}
.containe_txt_top.ptxt2 {
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}
.containe_txt.pc_txt {
    margin-left: 0px;
    text-align: left;
}
}
@media screen and (max-width: 1000px) {
.containe_txt.pc_txt {
    margin-left: 0px;
}
.containe_txt_top.ptxt2 {
    margin-left: 0px;
}
.containe_txt_top.ptxt2 {
    margin-left:0px;
}
.boxfream1 {
    width: 100%;
    position: absolute;
    border: 7px double #F44336;
    min-height: unset;
    height: -webkit-fill-available;
}
.boxfream2 {
    width: 100%;
    position: absolute;
    border: 7px double #F44336;
    min-height: unset;
    z-index: 1;
    height: -webkit-fill-available;
}
.boxfream3 {
    width: 100%;
    position: absolute;
    border: 7px double #F44336;
    min-height: unset;
    z-index: 1;
    height: -webkit-fill-available;
}
  h1 {
    font-size:1.7em;
  }

  /*グレーのボックス*/
  .plan-wrap {
    padding: 20px;
    margin:50px 0px 100px 0px;
  }
  
  .price-wrap {
    flex-wrap: wrap;
    margin-top: 50px;
  }
    
  /*白いボックス*/
  .price-wrap .box {
    width:100%;
    margin:15px;
  }

  /*白いボックスの中身*/
  .price-wrap .container {
    height:auto;
  }

  /*タイトル*/
  .plan-wrap .title {
    font-size:1.7em;
    font-weight:bold;
    letter-spacing:0em;
    margin-bottom:15px;
  }

  /*注意書き*/
  .caution {
    margin-bottom:20px;
  }

  .text-white-bold {
    font-size:1em;
  }

  .plan-wrap .text {
    font-size:14px;
  }

  .device-wrap {
    flex-wrap: wrap;
  }

  .device-wrap .container {
    width:100%;
    padding-bottom:30px;
  }

  .side-line {
    border-right: 1px solid white;
  }
  
  .pay-wrap .container {
    flex-wrap: wrap;
  }
  
  .pay-wrap .content {
    width:100%;
    padding:20px 10px;
  }

  .pay-wrap ul {
    text-align:left;
  }


  .flow-wrap .cont {
    flex-wrap: wrap;

  }
  
  .flow-wrap .content1 {
    width:100%;
    padding:10px;
  }

  .flow-wrap .content2 {
    width:100%;
    text-align: center;
    padding:10px;
  }


}







/*--------------------------------------------------
TOP
--------------------------------------------------*/
/*
.top-wrap p.title.text-red {
    text-align: center;
}
.top-wrap p.title.title-line-red {
    text-align: center;
    display: block;
}
.top-wrap .plan-wrap .text {
    text-align: center;
}
.top-wrap p.text-bold {
    text-align: center;
}*/
.top-wrap {
    text-align: center;
}