@charset "utf-8";
/*2018夏CP*/

body{font-family: Arial, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif !important;line-height: 1.7em;}
#cms_block{max-width: 1050px;}
#contents{font-size: 1.1rem;}
div{line-height: 2rem;}
@media(min-width: 700px){
    .dis-non{display: none;}
}

.font_red{color: red}

.tsishin_red_title{background: url(img/back.jpg);background-size:cover;padding: 50px 0px 30px;}
.tsishin_red_title div{display: inline-block;margin-top: 30px;font-size: 1.3em;font-weight: bold;}
.tsishin_red_title div p{background: #000;color: #fff;padding: 7px 30px;border-radius: 50px 0 0 50px;display: inline-block;vertical-align: top}
.tsishin_red_title div span{display: inline-block;padding: 7px 30px;background: #fff;border-radius: 0 50px 50px 0;}

/*タイトルエリア*/
.tsishin_red_title{background: url(img/cp_top_bg_n.jpg); background-size:cover; background-repeat: no-repeat;}
h1{padding: 0 25px 30px 0;max-width: 550px;}
.top_come1{max-width: 500px;padding: 10px 30px;}
.top_come2{max-width: 450px;padding: 20px 50px;}

.tsishin_red_sec1 {background: #e4d6d6;padding: 50px;text-align: center;}
.tsishin_red_sec2 {
    max-width: 800px;
    padding: 50px;
    background: rgba(255, 255, 255, 0.9);
    text-align: left;
    display: inline-block;
    }
.tsishin_red_sec2 p{margin-bottom: 50px;}

/*通信制説明*/
.system_block {border: 30px solid #86d1cb;padding: 30px;}

.system_block .system_box{text-align: center;}
.system_block .system_box span{display: block;}
.system_block h3{ display: inline-block;font-size: 2rem; border-bottom: 7px solid #fecc15; padding-bottom: 5px;margin-bottom:25px}
.system_block h3 span{display: block;font-size: 1rem;margin-bottom: 15px;}
.list_red{color: #FF0000; font-weight: bold;}

@media(max-width: 650px){
    .tsishin_red_title div{font-size: 1.1em}
    .tsishin_red_title div p,.tsishin_red_title div span{padding: 5px 20px}
    .spring18-cp4 a{max-width: 310px;}
    .tsishin_red_title{background-position: center;}
}



.btn,
a.btn,
button.btn {
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 0.3rem 2rem;
  cursor: pointer;
  user-select: none;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
}

a.btn-gradient {
      font-weight: 700;
      line-height: 1.5;
      position: relative;
      display: inline-block;
      padding: 1rem 3rem;
      cursor: pointer;
      user-select: none;
      text-align: center;
      vertical-align: middle;
      text-decoration: none;
      letter-spacing: 0.1em;
      font-size: 1.5rem;
      color: #fff;
      border-radius: 50px;
      background-image: linear-gradient(to right, #ee4075 0%, #eccc1b 100%);
      margin: 30px 0;
}

a.btn-gradient span {
    background-image: linear-gradient(
    -225deg,
    #000000 0%,
    #000000 29%,
    #000000 67%,
    #000000 100%
  );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }

a.btn-gradient:hover {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#fee140),
    to(#fee140)
  );
  background: linear-gradient(to right, #fee140 0%, #fee140 100%);
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);

}

a.btn-border {border: 2px solid #000;border-radius: 0;background: #fff;font-size: 1rem;/* -webkit-transform-style: preserve-3d; *//* transform-style: preserve-3d; */}
a.btn-border:before { position: absolute;  top: 0;left: 0; width: 5px;  height: 100%;  content: ''; background: #000;}
a.btn-border:hover { color: #fff;background: #000;}
a.btn-border:hover:before {background: #fff;}

.tsushin_box1 {margin-bottom: 70px;}
.tsushin_box1 table{ max-width: 800px;margin: auto; border-spacing:0;}
.tsushin_box1 table th{width: 50%;}
.tsushin_box1 table td{padding: 10px}
.tsushin_box1 table td ul{padding: 10px;}
.tsushin_box1 table th p{background:#636363;color: #fff;padding:5px}



.tsushin_box1 li{font-size: 1.4rem;margin-top: 10px;}
.tsushin_box1 div{text-align: left;font-size: 1.2rem;/* display: inline-block; */font-weight: 500;}

.tsushin_box2 {background: #efebdb;border-radius: 20px; padding: 30px;max-width: 800px;margin: 0 auto 30px;box-sizing: border-box;}
.tsushin_box2 th{width: 47%;vertical-align: top; padding: 10px}

.tsushin_box2 table small{padding-left: 19px;}


.tsushin_box1 h2 {margin: 20px 10px 40px;
  position: relative;
  padding: 0.5rem 3rem ;
  background:  #ffdf2b;max-width: 800px;
}

.tsushin_box1 h2:before {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 99%;
  height: 99%;
  content: '';
  border: 4px solid #000;
}
.tsushin_box1 h2 small{font-size: 1rem !important;display: inline-block;padding: 10px 20px 0;vertical-align:top;}

.tsushin_box2 td{padding: 0 0 0 20px;vertical-align: top;}
.tsushin_box2 li{font-size: 1.1rem;margin-bottom: 0px}

.dis_non-p2{display: none;}

.column_text2{line-height: 1.5;padding: 10px;background: #dad5ba;font-weight: normal;}
.column_text div{font-size: 0.9rem;text-align: left;line-height: 1.5;border: dashed 1px;padding: 18px;margin: 20px 0 0;}
.column_text h4{display: inline-block;background: #000;color: #fff;padding: 0 5px;margin: 5px 0;}

@media(min-width: 800px){
    .dis_non-p{display: none;}
    h2{font-size: 3em !important;}
    .award_section1{max-width: 85%;margin:auto;}
}

@media(max-width: 376px){
    .dis_non-p2{display: inline;}
    .system_block h3{font-size: 1.5rem;}
    .system_block h3 span{line-height: 1.5rem}
}
@media(max-width: 700px){
    h1{padding: 0 25px 0px 0;}
    .top_come1{padding: 10px 30px;}
    .top_come2{padding: 10px 50px;}
    /*2*/
    .tsishin_red_sec1{padding: 20px}
    .tsishin_red_sec2{padding: 20px}
    /*3*/
    .system_block{padding: 20px;border:20px solid #86d1cb;}
    .tsushin_box1 h2{padding: 0.5rem 1rem; font-size: 3rem !important;}
    .tsushin_box1 h2 small{padding: 10px 10px 0;margin: 0;}

    .tsushin_box1 table th,.tsushin_box1 table td,.tsushin_box2 table th,.tsushin_box2 table td{display: block;width: 100%;box-sizing: border-box;}
    a.btn-gradient{padding: 1rem 2rem;font-size: 1rem;}

    .tsushin_box2 {padding:30px 10px}
    .tsushin_box2 td{padding: 0 0 0 10px;}
    .tsushin_box2 ul{padding: 20px 0 !important;}
}