/*! 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;
  line-height: 1.2;
}

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

/* 限定公開の注記（本文と同じ書式で赤字） */
.limited-note {
  color: #ff0000;
  margin-bottom: 0;
}

.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;
  }
}