@charset "utf-8";
/* レイアウトのためのCSS */

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  line-height: 1.85;

  word-wrap: break-word;

  color: #333;
  /*background: #f0f0f0;*/
  background: #00ffe721;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

a {
  text-decoration: none;

  color: #333;
  outline: none;
}

img {
  width: 100%;
  height: auto;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* font-family */

#header,
h1,
h2,
.heading01,
.count-size {
  font-family: "Roboto", sans-serif;
}

/* header */

#header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  padding: 30px 70px 40px 130px;

  text-transform: uppercase;

  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media screen and (max-width: 960px) {
  #header {
    padding: 5px 30px 0 90px;
  }
}

@media screen and (max-width: 870px) {
  #header {
    padding: 5px 30px;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

#header h1 a {
  font-size: 1.7rem;
  font-weight: normal;

  letter-spacing: 0.05em;

  color: #1bb7c3;
}

@media screen and (max-width: 768px) {
  #header h1 a {
    font-size: 1.4rem;
  }
}

#header .header-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#header ul {
  font-weight: bold;

  margin: 0 20px 0 0;

  letter-spacing: 0.1em;
}

@media screen and (max-width: 870px) {
  #header ul {
    display: none;
  }
}

#header li,
#header dl,
#header dt,
#header dd {
  display: inline-block;
}

#header li:first-child::after {
  padding: 0 10px;

  content: "/";
}

#header .float3 {
  border-radius: 30px;
}

@media screen and (max-width: 870px) {
  #header .float3 {
    display: none;
  }
}

/* g nav */

#g-nav li:nth-of-type(1) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
#g-nav li:nth-of-type(2) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
#g-nav li:nth-of-type(3) {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}
#g-nav li:nth-of-type(4) {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}
#g-nav li:nth-of-type(5) {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
}
/* container */

#container {
  padding: 0 70px 0 130px;
}

@media screen and (max-width: 960px) {
  #container {
    padding: 0 30px;
  }
}

/* flud-area */

.fluid-area {
  position: relative;

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  height: 95vh;

  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.fluid-lead {
  padding: 0 0 0 7vw;
}

.fluid-lead h2 {
  font-size: 4vw;
  line-height: 1.4;

  margin: 0 0 40px 0;

  letter-spacing: 0.2em;

  opacity: 0;
}

body.appear .fluid-lead h2 {
  opacity: 1;
}

.fluid-lead p {
  font-size: 1.1rem;
  line-height: 2;

  margin: 0 0 0 30px;
}

.fluid-block {
  position: absolute;
  z-index: -1;
  top: 10%;
  right: 0;

  width: 45vw;
  height: 65vh;

  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

@media screen and (max-width: 960px) {
  .fluid-lead h2 {
    font-size: 2.5rem;

    letter-spacing: 0.15em;
  }
  .fluid-block {
    width: 60vw;
    height: 60vh;
  }
}

@media screen and (max-width: 768px) {
  .fluid-block {
    width: 65vw;
    height: 60vh;
  }
  .fluid-lead h2 {
    font-size: 1.8rem;
  }
  .fluid-lead {
    padding: 0;
  }
  .fluid-lead p {
    margin: 0;
  }
}

@media screen and (max-width: 550px) {
  .fluid-block {
    width: 300px;
    height: 300px;
  }

  .fluid-lead p {
    font-size: 1rem;
  }
}

@media screen and (max-width: 360px) {
  .fluid-block {
    width: 240px;
    height: 240px;
  }
}

/* heading */

.heading-block {
  padding: 0 0 0 70px;
}

@media screen and (max-width: 550px) {
  .heading-block {
    padding: 0;
  }
}

.heading01 {
  font-size: 5vw;
  font-weight: normal;
  line-height: 1;

  position: relative;

  padding: 0 0 30px 0;

  letter-spacing: 0.1em;
}

.heading01 span {
  position: absolute;
}

.heading01 span.en {
  font-size: 3vw;

  top: 1.5em;
  left: 2em;
}

#greeting .heading01 span.en {
  left: 3em;
}

#statistics .heading01 span.en {
  left: 2.5em;
}

.heading01 span.jp {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2vw;

  top: 7em;
  left: 5.5em;
}

#greeting .heading01 span.jp {
  left: 8em;
}

#statistics .heading01 span.jp {
  left: 7em;
}

.heading01:first-letter {
  font-size: 12vw;
}

@media screen and (max-width: 960px) {
  .heading01 {
    font-size: 1rem;
  }
  .heading01:first-letter {
    font-size: 8rem;
  }
  .heading01 span.en {
    font-size: 2rem;
  }
  .heading01 span.jp {
    font-size: 1rem;

    top: 6em;
  }
}

@media screen and (max-width: 768px) {
  .heading01:first-letter {
    font-size: 6rem;
  }
  .heading01 span.en {
    font-size: 1.6rem;
  }
  .heading01 span.jp {
    font-size: 0.9rem;

    top: 5em;
    left: 4em;
  }
  #greeting .heading01 span.jp {
    left: 6em;
  }
}

/* topics */

#topics {
  position: relative;

  margin: 0 0 200px 0;
}

@media screen and (max-width: 960px) {
  #topics {
    margin: 0 0 100px 0;
  }
}

.topics-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  -ms-flex-pack: distribute;
  justify-content: space-around;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.topics-area article {
  width: 20%;

  border-radius: 10px;
  background: #fff;
  -webkit-box-shadow: 0 0 10px #ccc;
  box-shadow: 0 0 10px #ccc;
}

.topics-area article:nth-of-type(1) {
  position: relative;
  top: 130px;
}

.topics-area article:nth-of-type(2) {
  position: relative;
  top: 80px;
}

.topics-area article:nth-of-type(3) {
  position: relative;
  top: 30px;
}

@media screen and (max-width: 1020px) {
  .topics-area article {
    width: 46%;
    margin: 0 0 50px 0;
  }

  .topics-area article:nth-of-type(2n + 1) {
    top: 30px;
  }
  .topics-area article:nth-of-type(2n) {
    top: 0;
  }
}

@media screen and (max-width: 550px) {
  .topics-area article {
    width: 90%;
  }

  .topics-area article:nth-of-type(2n + 1) {
    top: 0;
  }
}

.zoomOut .mask {
  border-radius: 10px 10px 0 0;
}

.topics-area .topics-block {
  padding: 10px 20px;
}

.topics-area .topics-block time {
  font-size: 0.9rem;

  margin: 0 0 20px 0;

  color: #666;
}

.topics-area .topics-block h3 {
  font-size: 1rem;
}

#topics .topics-btn {
  padding: 100px 0 0 0;

  text-align: right;
}

@media screen and (max-width: 960px) {
  #topics .topics-btn {
    padding: 50px 0 0 0;

    text-align: center;
  }
}

/* greeting */

#greeting {
  margin: 0 0 200px 0;
}

@media screen and (max-width: 960px) {
  #greeting {
    margin: 0 0 100px 0;
  }
}

.greeting-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.greeting-area p {
  margin: 0 0 30px 0;
}

.greeting-area .txt-r {
  text-align: right;
}

.greeting-lead {
  font-size: 1.2rem;
  font-weight: bold;
}

.greeting-img {
  width: 50%;
}

.greeting-img img {
  -webkit-animation: fluidrotate 30s ease 0s infinite;
  animation: fluidrotate 30s ease 0s infinite;
}

.greeting-content {
  width: 40%;
}

@media screen and (max-width: 768px) {
  .greeting-area {
    display: block;
  }
  .greeting-img {
    width: 60%;
    margin: 0 auto;
  }
  .greeting-content {
    width: 100%;
    padding: 0 30px 0 70px;
  }
}

@media screen and (max-width: 550px) {
  .greeting-content {
    padding: 0;
  }
  .greeting-img {
    width: 100%;
  }
}

/* statistic*/

.count-size {
  font-size: 5vw;
  line-height: 1.2;

  padding: 0 10px;

  color: #00b7b8;
}

#count-up-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  margin: -100px 0 100px 0;

  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

@media screen and (max-width: 768px) {
  #count-up-area {
    margin: 0 0 100px 0;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

@media screen and (max-width: 550px) {
  #count-up-area {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .count-size {
    font-size: 2rem;
  }
}

.chart-area.bar {
  position: relative;

  width: 100%;
  max-width: 600px;
  margin: 0 0 100px 0;
}

.chart-area.pie {
  /*円グラフがスマホでつぶれないようにする*/
  position: relative;

  width: 100%;
  max-width: 500px;
  height: 50vh;
  margin: 0 auto 100px auto;
}

@media screen and (max-width: 960px) {
  .chart-area.bar,
  .chart-area.pie {
    margin: 0 auto 100px auto;
  }
}

/* contact */

#contact {
  position: relative;

  margin: 0 0 100px 0;
  padding: 130px 0 0 0;

  text-align: center;
}

#contact::before {
  position: absolute;
  top: 0;
  left: 50%;

  width: 1px;
  height: 100px;

  content: "";

  background: #333;
}

#contact h2 {
  font-size: 2.5rem;

  margin: 0 0 30px 0;

  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media screen and (max-width: 960px) {
  #contact h2 {
    font-size: 2rem;
  }
}

@media screen and (max-width: 768px) {
  #contact h2 {
    font-size: 1.5rem;
  }
}

#contact h2 span {
  font-size: 1rem;

  display: block;
}

#contact ul {
  margin: 20px 0 50px 0;

  letter-spacing: 0.1em;
}

#contact li,
#contact dl,
#contact dt,
#contact dd {
  display: inline-block;
}

@media screen and (max-width: 530px) {
  #contact li {
    display: block;
  }
}

#contact dt {
  padding: 0 10px 0 0;
}

#contact dd {
  font-size: 1.5rem;
}

@media screen and (max-width: 768px) {
  #contact dd {
    font-size: 1rem;
  }
}

#contact li:first-child::after {
  padding: 0 10px;

  content: "/";
}

@media screen and (max-width: 530px) {
  #contact li:first-child::after {
    padding: 0;

    content: "";
  }
}

/* footer */

#page-top {
  display: block;

  width: 30px;
  height: 30px;
  margin: 0 auto 100px auto;

  cursor: pointer;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);

  border: 2px solid;
  border-color: #999 #999 transparent transparent;
  border-radius: 2px;
}

#waveCanvas {
  position: absolute;
  z-index: -1;
  bottom: 0;
}

small {
  display: block;

  padding: 50px 0;

  text-align: center;
}