@charset "UTF-8";
/*----------------------------------------------------------------------------*/

* {
  box-sizing: border-box;
}
body {
  font-family: "source-han-sans-japanese", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 1.5;
  display: block;
  z-index: -1;
  text-align: left;
  color:#FFF;
  width: 100%;
  background-color: black;
  margin: 0;
}

p,a {
    color: #fff!important;
}

p {
    margin: 0;
    padding: 0;
}

img {
  max-width: 100%;
}
ul {
    text-decoration: none;
    text-align: left;
    list-style: none;
    padding: 0;
    line-height: 1.5;
}
.pc {
  display: block;
}
.sp {
  display: none;
}

/* top */
#top {
    width: 100%;
    background-image: url(img/top_bg.png);
    background-size: cover;
    padding: 100px 0;
    margin: 0 0 50px;
}

#top div {
    width: 70%;
    margin: 0 auto;
    text-align: center;
}

#top div img {
    width: 70%;
    margin-bottom: 50px;
}

#top div p {
    text-align: left;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.6;
}

#info p.aera_title {
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0;
    border-bottom: 1px solid;
    border-top: 1px solid;
    border-image: linear-gradient(to right, #2453a4, #00b1bf) 1;
    text-align: center;
}

#info .inner {
    padding: 50px 0;
    width: 60%;
    margin: 0 auto;
}

#info .area_box {
    margin-bottom: 20px;
}

#info .area_box .flex {
    display: flex;
    justify-content: space-between;
}

#info .area_box .flex p:last-of-type {
    font-weight: bold;
    margin-left: 20px;
}

#info p.box_text {
    position: relative;
    font-size: 18px;
    font-weight: bold;
    padding: 0 0 0 25px;
    margin-bottom: 5px;
}

#info p.box_text::before {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    top: 3px;
    left: 0;
    background-color: #00b1bf;
}

#info .area_box .ec_area {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

#info .area_box .ec_area p {
    width: 48%;
}

#info .area_box .ec_area a {
    text-decoration: underline;
}

/* みまもりチェック */    
.ageCheck h3{color:#FFF;font-size:5vw;;text-align:center;margin-top:1em;}
.ageCheck p.txt02{color:#FFF; font-size:4vw;text-align:center;}

/* デザインC(PC) */
@media screen and (min-width: 1025px) {
/* PC用レイアウト 1,025px以上の範囲に収めるデザインはこの中に記述 */

body {
  font-size: 16px;
}   

/* みまもりチェック */    
.ageCheck h3{color:#FFF;font-size:28px;;text-align:center;margin-top:2em;}
.ageCheck p.txt02{color:#FFF; font-size:20px;text-align:center;}
    
}

@media screen and (max-width: 430px) {
    .pc {
        display: none;
      }
    .sp {
    display: block;
    }

    #top {
        padding: 50px 0;
    }

    #top div  {
    width: 80%;
    }

    #top div p {
    font-size: 15px;
    }

    #top div img {
    border-block-end-width: 100%;
    }

    #info .inner {
        width: 80%;
    }

    #info p.box_text {
        font-size: 15px;
        margin-bottom: 10px;
    }

}

@media screen and (max-width:1000px) {
    #info .area_box .flex {
        flex-direction: column;
    }

    #info .area_box .flex p {
        font-size: 15px;
    }

    #info .area_box .flex p:last-of-type {
        margin: 10px 0 0 0;
    }

    #info .area_box .ec_area {
        flex-direction: column;
        margin-bottom: 0;
    }

    #info .area_box .ec_area p {
        width: 100%;
        margin-bottom: 20px;
    }
}