/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

/* ==========================================================================
   font-famiry CSS
   ========================================================================== */


   @font-face {
    font-family: "Yu Gothic";
    src: local("Yu Gothic Medium");
    font-weight: 100;
  }
  @font-face {
    font-family: "Yu Gothic";
    src: local("Yu Gothic Medium");
    font-weight: 200;
  }
  @font-face {
    font-family: "Yu Gothic";
    src: local("Yu Gothic Medium");
    font-weight: 300;
  }
  @font-face {
    font-family: "Yu Gothic";
    src: local("Yu Gothic Medium");
    font-weight: 400;
  }
  @font-face {
    font-family: "Yu Gothic";
    src: local("Yu Gothic Bold");
    font-weight: bold;
  }
  @font-face {
    font-family: "Helvetica Neue";
    src: local("Helvetica Neue Regular");
    font-weight: 100;
  }
  @font-face {
    font-family: "Helvetica Neue";
    src: local("Helvetica Neue Regular");
    font-weight: 200;
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
  }

  /* IE10以上 */
  @media all and (-ms-high-contrast: none) {
    body {
      font-family: Verdana, Meiryo, sans-serif;
    }
  }




/* ==========================================================================
   over resetCSS
   ========================================================================== */


   html {
    color: #222;
    font-size: 14px;
    line-height: 1;
  }

  ::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
  }

  ::selection {
    background: #b3d4fc;
    text-shadow: none;
  }

  body{
    position: relative;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: scroll;
  }


  hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
  }

  audio,
  canvas,
  iframe,
  img,
  svg,
  video {
    vertical-align: middle;
  }

  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }

  textarea {
    resize: vertical;
  }

  .browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
  }


  h1,h2,h3,h4,h5,h6,h7{margin: 0 0 2rem 0;}
  p{margin:0;}

  p{line-height: 2; text-align: justify; margin-bottom: 2rem;}

  @media only screen and (max-width: 700px) {
    h1,h2,h3,h4,h5,h6,h7{margin: 0 0 1rem 0;}
  }


/* ==========================================================================
   共通CSS
   ========================================================================== */

   img{max-width: 100%;}

   .common-wrap{
    max-width: 1280px;
    margin: 0 auto;
    display: block;
  }

  /* clearfix */
  .clear::after{
    content: " ";
    clear: both;
    display: block;
  }

  /* hidden */

  .sp,.sp img{display: none !important;}

  /* youtube responsive */
  #youtube{
    width: 80%;
    margin: 0 auto 2rem;
  }

  .youtube-resp {
    position: relative;
    height: 0;
    padding: 30px 0 56.25%;
    overflow: hidden;
  }

  .youtube-resp iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }


  @media only screen and (max-width: 700px) {
   .wrap1000{
    max-width: 100%;
    padding: 0 1rem;
  }

  img{margin:0 auto;display: block;}

  .pc,.pc img{display: none !important;}
  .sp,.sp img{display: block !important;}

}

/* ==========================================================================
   text CSS
   ========================================================================== */

   .t-justify{text-align: justify;}

/* ==========================================================================
   layout CSS
   ========================================================================== */

   .f-col{
    display: flex;
    flex-wrap: wrap;
  }

  .f-col2{width: calc(50% - 10px); margin:0 5px;}
  .f-col3{width: calc((100% / 3) - 10px); margin:10px 5px;}
  .f-col4{width: calc(25% - 10px); margin:0 5px;}

  /* margin */
  .m0{margin-bottom: 0;}
  .m1{margin-bottom: 1rem;}
  .m2{margin-bottom: 2rem;}
  .m3{margin-bottom: 3rem;}
  .m4{margin-bottom: 4rem;}



  @media only screen and (max-width: 700px) {
   .f-col{
    display: flex;
    flex-wrap: wrap;
  }

  .f-col2{width: calc(100%); margin:0 0 10px;}
  .f-col3{width: calc((100% / 2) - 10px); margin:5px 5px;}
  .f-col4{width: calc(50% - 10px); margin:0 5px;}

  /* margin */
  .m1{margin-bottom: 0.5rem;}
  .m2{margin-bottom: 1rem;}
  .m3{margin-bottom: 1.5rem;}
  .m4{margin-bottom: 2rem;}

}


/* ==========================================================================
   header CSS
   ========================================================================== */

   #logo{padding-top: 2rem;}

   @media only screen and (max-width: 700px) {
    #logo img{width: 80%;}
  }

/* ==========================================================================
   main CSS
   ========================================================================== */

   .head-title01{
    background: #00afa4;
    color: #fff;
    font-size: 40px;
    padding: 30px 0 30px 50px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: bold;
}
  }

  .main-text01{
    font-size: 18px;
  }

  .head-title02{
    background: #F8F8F7;
    padding: 20px 0 20px;
    box-shadow: 2px 2px #E2E6E9;
  }

  .head-title02 span{
    border-left: 5px solid #00afa4;
    padding-left: 10px;
    font-size: 22px;
    font-weight: normal;
  }


  @media only screen and (max-width: 700px) {

    .head-title01{
      font-size: 18px;
      padding: 14px 0 14px 20px;
    }

    .main-text01{
      font-size: 14px;
      padding: 0 10px;
    }

    .head-title02{
      padding: 10px 0 10px;
    }

    .head-title02 span{
      font-size: 14px;
    }


  }






/* ==========================================================================
   footer CSS
   ========================================================================== */

   #copyright{
    display: block;
    width: 100%;
    text-align: center;
    padding: 20px 0;
    background: #302c2c;
    color: #fff;
    font-size: 18px;
  }

   @media only screen and (max-width: 700px) {

    #copyright{font-size: 14px;}

  }



/* ==========================================================================
   Media Queries
   ========================================================================== */

   @media print,
   (-o-min-device-pixel-ratio: 5/4),
   (-webkit-min-device-pixel-ratio: 1.25),
   (min-resolution: 120dpi) {

   }

/* ==========================================================================
   Print styles
   ========================================================================== */

   @media print {
    *,
    *:before,
    *:after {
      background: transparent !important;
      color: #000 !important;
      box-shadow: none !important;
      text-shadow: none !important;
    }

    a,
    a:visited {
      text-decoration: underline;
    }

    a[href]:after {
      content: " (" attr(href) ")";
    }

    abbr[title]:after {
      content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
      content: "";
    }

    pre,
    blockquote {
      border: 1px solid #999;
      page-break-inside: avoid;
    }

    thead {
      display: table-header-group;
    }

    tr,
    img {
      page-break-inside: avoid;
    }

    img {
      max-width: 100% !important;
    }

    p,
    h2,
    h3 {
      orphans: 3;
      widows: 3;
    }

    h2,
    h3 {
      page-break-after: avoid;
    }
  }