@charset "UTF-8";
body,html{
  /* font-family:  "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif */
}

/* --------- 共通 --------- */
.section_title{
  position: relative;
  width: 100%;
  font-size: 18px;
  border-bottom: solid 2px #ddd;
  padding-left: 3%;
  padding-bottom: 0.5%;
  margin-bottom: 3%;
  line-height: 1.5;
}
.section_title::before{
  content: url("../images/ttl_monbo.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 26px;
  height: 18px;
  position: absolute;
  bottom: 15px;
  left: 0;
}
/* --------- header --------- */
.header{
  width: 100%;
  margin: 0 auto;
  background: #fff;
}
.header_inner{
  width: 1000px;
  margin: 0 auto;
}
.header h1{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2% 0 4%;
}

/* --------- mainvisual --------- */

.messageImage{
  width:100%;
  margin-bottom:30px;
  margin-top:30px;
  /* padding:0 10px; */
}
.main{
  width: 100%;
  background: url("../images/bg.png");
}
.mainvisual{
  width: 1000px;
  margin: 0 auto;
  padding: 4% 0;
}

/* --------- title-main --------- */

.title-main{
  width: 90%;
  margin: 0 auto;
  /* font-weight: bold; */
}
.title-main img{
  width: 100%;
}
.title-main h2{
  width: 1000px;
  margin: 0 auto;
}

/* --------- summary --------- */

.summary{
  width: 1000px;
  margin: 0 auto;
  padding: 2% 0;
  overflow-x: hidden;
}
.summary p{
  text-align: center;
  font-size: 30px;
  line-height: 1.5;

}
.summary dl{
  width: 100%;
  margin: 2% auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  line-height: 1.5;
}
.summary dl dt{
  width: 20%;
  padding: 2%;
  border-bottom: solid 2px #ddd;
}
.summary dl dd{
  width: 76%;
  padding: 2% 0;
  border-bottom: solid 2px #ddd;
}
.summary dl dd img{
  width: 100%;
}
.summary dl dt:last-of-type{
  border: none;
}
.summary dl dd:last-of-type{
  border: none;
}
.summary dl dt:first-of-type{
  padding-top: 0;
}
.summary dl dd:first-of-type{
  padding-top: 0;
}


.company{
  width: 1000px;
  margin: 0 auto;
  overflow-x: hidden;
}
.company ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.company ul li{
  width: 100%;
  text-align: left;
  font-weight: bold;
  margin: 0.7% 0;
  width: 45%;
  display: block;
  padding-left: 0.8em;
  text-indent: -0.8em;
}
.company ul li::before{
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: #F40405;
  vertical-align: middle;
  margin-right:2%;
}
/* --------- live_area --------- */

.live_area{
  max-width: 1000px;
  width: 90%;
  margin: 0 auto;
  padding:8% 0;
  overflow-x: hidden;
}
.live_area ul{
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}
.live_area ul li{
  width: 45%;
}
.live_area ul li a{
  display: block;
  font-size: 0;
}
.live_area ul li a img{
  width: 100%;
}

/* --------- regulation --------- */

.regulation{
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  overflow-x: hidden;
}
.regulation dl dt{
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 3%;
}
.regulation dl dt span{
  display: block;
}
.regulation dl dd{
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 5%;
}
.red{
  padding-bottom: 1%;
  color: #f00;
}
.gotoForm{
  display: block;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding:0 5% 5%;
}
.gotoForm a{
  font-size: 0;
}
.gotoForm a:hover{
  opacity: 0.7;
}

.indent{
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}

@media screen and (max-width:768px) {
  /* --------- 共通 --------- */
  .section_title{
    font-size: 18px;
    padding-left: 10%;
    padding-bottom: 1%;
    margin-bottom: 3%;
  }
  .section_title::before{
    bottom: 50%;
    left: 0;
  }
  .header{
    width: 100%;
  }
  .header_inner{
    width: 100%;
  }
  .header_inner h1 img{
    width: 90%;
  }
  .main{
    width: 100%;
  }
  .mainvisual{
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .mainvisual img{
    width: 90%;
  }
  .live_area{
    padding: 15% 0;
  }
  .live_area ul{
    flex-wrap: wrap;
    justify-content: center;
  }
  .live_area ul li{
    width: 70%;
    margin: 5% 0;
  }
  .live_area ul li img{
    width: 100%;
  }
  .summary{
    width: 90%;
  }
  .summary p{
    font-size: 18px;
  }
  .summary dl{
    font-size: 14px;
  }

  .title-main h2{
    width: 95%;
  }
  .company{
    width: 90%;
  }
  .company ul{
    justify-content: center;
  }
  .company ul li{
    width: 90%;
    margin: 1.7% auto;
    padding-left: 0.6em;
    text-indent: -0.6em;
  }
  .regulation dl dd{
    margin-bottom: 10%;
  }
  .regulation dl dt{
    font-size: 24px;
  }
  .gotoForm{
    padding: 5% 0 15%;
  }
  .gotoForm a{
    /* width: 70%; */
  }
  .gotoForm a img{
    width: 100%;
  }
}