@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Noto+Serif+JP:wght@900&display=swap');
/*==================================================*/
/* base
/*==================================================*/
  *{margin:0px;padding:0px;margin:0px;}
  *, :after, :before {box-sizing: border-box;}
  html{overflow-y:scroll;font-size:62.5%;}
  body{
    background-color:#fff;
    font-size: 1.5rem;
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;
    letter-spacing: .1em;
    line-height: 1.8;
    color: #333;
    word-break: break-word;
    -webkit-text-size-adjust: 100%;
    background-image: url(../img/img_bk.jpg);
    background-repeat: no-repeat;
    background-position: bottom center;
  }
  dl, ol, ul{margin: 0;}
  dl dt{width: 30%;}
  dl dd{width: 70%;}
  p, dt, dd, li, th, td{font-size: 1em;}
  p{margin-bottom: 1em;}
  a{
    text-decoration: none;
    color: #333;
    transition-duration: 0.5s;
    opacity: 1;
  }
  a:active, a:focus {outline: 0;}
  a:hover{
    color: #ff659e;
    opacity: 0.6;
  }
  ul li{list-style: none;line-height: 1.4;}
  img{
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: top;
  }
  figure{
    margin: 0; line-height: 0;
    vertical-align: top;
  }
  table{width: 100%; border-collapse: collapse;}
  table tr th, table tr td{
    padding: 2em 0.4em;
  }
  table tr th{
    width: 10em;
    text-align: center;
    vertical-align: middle;
    font-weight: 500;
    letter-spacing: 0.2em;
  }
  table tr{
    border-bottom: solid 1px #ddd;
  }
  table tr:first-of-type{
    border-top: solid 1px #ddd;
  }
  .row_midle{
    display: inline-flex;
    align-items: center;
  }
  .row_midle small{
    margin-right: 1em;
  }
  .sp{display: none!important;}
  .objectfit{
    object-fit: cover;
    font-family: 'object-fit: cover;';
    width: 100%;
    height: 100%;
  }
  .flex{
  	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .flex-w{
  	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .f-sb{
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .f-c{
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .f-aic{
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
  }
  .container{
    position: relative;
    width: 90%;
    max-width: 1070px;
    margin: 1em auto;
    border: solid 1px #00b9ef;
    box-shadow: 0px 1px 4px 12px #ddd;
    outline: solid 10px #fff;
  }
  .wrapper{
    position: relative;
    width: 90%;
    max-width: 620px;
    margin: 2em auto 12em;
  }
  h1{
    text-align: center;
    border-bottom: solid 2px #ddd;
    font-size: 2.2em;
    font-weight: 500;
    max-width: 800px;
    width: 90%;
    margin: 2em auto 0;
  }
  .ul_box{
    margin: 0.2em 0 4em;
  }
  .ul_box li{
    font-size: 0.9em;
    font-weight: 500;
    width: calc(100% / 3 - 4px);
    margin-bottom: 0.6em;
    text-align: center;
  }
  .ul_box li:first-of-type{
    width: 100%;
  }
  .ul_box li p{
    margin-top: 0.4em;
  }
  .ul_box li img{
    border-radius: 4px;
  }
  @media(min-width:769px){
    body{font-size: 1.3vw;}
  }
  @media(min-width:1250px){
    body{font-size: 1.8em;}
  }
  @media(max-width:768px){
    ul li, ol li{font-size: 1em;}
    .pc{display: none!important;}
    .sp{display: block!important;}
    .flex{display: block;}
    .container {
      width: 100%;
      margin: 0 auto;
      border: 0;
      box-shadow: none;
      outline: 0;
  }
    h1 {
      margin: 1em auto 0;
    }
    .wrapper {
      margin: 2em auto 6em;
    }
    table tr th,table tr td{
      width: 100%;
      display: block;
      padding: 0.4em 1em;
    }
    table tr th{
      background-color: #f2f7f0;
      border-bottom: solid 1px #ddd;
      text-align: left;
    }
    table tr td{
      margin-bottom: 1em;
    }
    table tr td i{
      text-align: center;
      display: block;
      margin: 0.4em auto 1em;
    }
    table tr:last-of-type td{
      margin-bottom: 0;
    }
  }
  @media(max-width:500px){
    th,td {margin: 0;border: 0;}
    th {width: 100%;}

  }