html, body, span, h1, h2, h3, h4, h5, h6, p, a, img, small, i, center, dl, dt, dd, ol, ul, li, label, footer, header, section{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline}html { font-size: 62.5%;} body { font-size: 1.6rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; color: #000; line-height: 1.8; font-family: 'Avenir','Helvetica Neue','Helvetica','Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', sans-serif}*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box}
header, footer, main{ width: 100%; padding: 0; margin: 0 auto; overflow: hidden;clear: both}
section{ width: 86%; margin: 0 auto 60px; overflow: hidden; clear: both}
ul{ list-style: none}
p{ margin-bottom: 20px}
main a{ text-decoration: none; border-bottom: 2px solid #2c6bae; color: #000}
main a:hover{ color: #2c6bae}
a i:hover{ text-decoration: none}
a img:hover, label:hover{ opacity:0.7}
.cap{ font-size: small}
h4{ font-size: 1.5em; text-align: center}

/* -- Header / Footer
--------------------- */
header{ position: relative; height: 960px}
h1{ position: absolute; top: 0; left: 0; z-index: 1; }
.logo{ position: absolute; top: 2%; left: 8%; z-index: 2; max-width: 14vw}
h1 img{ width: 100%}
footer{ font-size: small; padding: 30px 5% 0/*; background: #f4f4f4; */}
footer a{ color: #000; text-decoration: none}

/* -- headline / mainvisual
--------------------- */
h2{ text-align: center; margin: 50px 0 30px; font-size: 2.5em}
.col{ display: flex; display: -webkit-flex; width: 100%; flex-wrap: wrap}

.bg3{ padding: 20px 0; background: #f4f4f4}
.aw a{ border: none}
.aw{ width: 70%; margin: 80px auto; text-align: center}
.aw img{ width: 100%; padding: 2%; background: #fff}
.aw1 img{ border: 6px solid #ccb605}
.aw2 img{ border: 4px solid #ccc}
.aw3 img{ border: 4px solid #b2ddbf}
.aw4 img{ border: 4px solid #8eb9bd}
.aw5 img{ border: 4px solid #b3c9ff}
section .aw:first-child{ margin-top: 0}

h3 span{ font-size: 1.6em}
.name{ font-size: 1.7em; font-weight: bold}

h3.gp::before { color: #ccb605}
h3.snd::before { color: #b3b3b3}
h3.trd::before { color: #b2ddbf}
h3.fth::before{ color: #8eb9bd}
h3.ns::before { color: #b3c9ff}
h3.gp span, .aw1 .comment dt{ color: #886f0e}
h3.snd span, .aw2 .comment dt{ color: #888}
h3.trd span{ color: #000}
.aw4 .comment dt{ color: #6d9fa4}
h3::before{ /*display: none; */font: var(--fa-font-sharp-solid)/*; font: var(--fa-font-regular)*/; content: "\f521"; font-size: 3em; margin-right: 10px}
.colpass{ margin: 20px 0 50px; gap: 40px 6%}
.colpass li{ width: 20.5%; line-height: 1.4}
.colpass img{ width: 100%; vertical-align: bottom; padding-bottom: 2px}
.colpass a{border: none}

.bg1, .bg2{ padding: 0 0 20px}
.bg1{ background: linear-gradient(45deg, #fff43a, #F7F098); background-size: 400% 400%; animation: GradientBackground 10s ease infinite;}
@keyframes GradientBackground {
          0% {
            background-position: 0% 50%;
          }

          50% {
            background-position: 100% 50%;
          }

          100% {
            background-position: 0% 50%;
          }

      }
/*.bg1{ background: #fff43a}
.bg3{ background: #f4f4f4} */
.bg2{ background: #dbf0f2}


.fa-solid{ font-size: 1.8em; margin-right: 5px; vertical-align: middle}

.comment{ text-align: left; font-size: .9em}
.comment dt{ font-size: .9em; letter-spacing: .1em}
.comment dd:not(dd:last-child){ margin-bottom: .7em}


.guideline{ width: 100%; margin: 20px auto 0}
.guideline dt { float: left; clear: left; width: 9em; font-weight: bold}
.guideline dd { margin-left: 9em}
.guideline dt, .guideline dd{ border-top: 1px solid #000; padding: 1.5em 0}
.guideline dt:last-child, .guideline dd:last-child{ padding-bottom: 0}
.guideline dd li{ padding-left: 1em; text-indent: -1em; margin-bottom: .7em}


@media screen and (min-width: 980px) {
header{width: 980px; margin: 0 auto; padding: 0}

section{width: 980px}
}
@media screen and (max-width: 979px) { header{ height: calc(960 / 979 * 100vw)}}
@media (max-width: 640px) {
h2{ font-size: 2em}
h3 span{ font-size: 1.7em}
h3::before{ font-size: 2em; margin-right: 5px}
.name{ font-size: 1.5em}
.bg1, .bg2{ padding: 0 0 10px}
.left img{ width: 60%}
.colpass li{ width: 47%}
	
	
.aw{ width: 100%}
.bg3{ padding-bottom: 10px}
}

@media (max-width: 768px) {
h3{ font-size: 1.1em}
.guideline dt{ float: none; padding: 1em 0 0; width: 100%}
.guideline dd{ margin: 0; padding: .5em 0 1em; border-top: 0}
.info span{ font-size: 2.6em}
}


@keyframes coming {
  0% {
  opacity: 0;
  transform: translateX(-150px);
/*    left: 1500px;*/
  }
    50% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(-15px);
  }
  100% {
    transform: translateX(0);
  }
    20%,100% {
    opacity: 1;
  }
}

#ng { animation: coming 0.5s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
/*
  animation: coming 0.5s 1;
  animation-timing-function: ease;
*/
}