/* media query */
body {
  background-color: #FFFDE5;
}

.textimg {
  background: url(../images/textimg.png) no-repeat center/contain;
  padding: 0 !important;
}

.chartPageTitle {
  background: url(../images/title_bg.png) no-repeat center/auto 100% #fff793;
  text-align: center;
  padding: 100px 30px;
}
@media screen and (max-width: 960px) {
  .chartPageTitle {
    padding: 50px 30px;
  }
}
@media screen and (max-width: 668px) {
  .chartPageTitle {
    padding: 40px 20px;
  }
}
.chartPageTitle h2 {
  font-size: 7rem;
  font-weight: 700;
  margin-bottom: 10px;
}
@media screen and (max-width: 960px) {
  .chartPageTitle h2 {
    font-size: 4rem;
  }
}
@media screen and (max-width: 668px) {
  .chartPageTitle h2 {
    font-size: 3rem;
  }
}
.chartPageTitle p {
  font-size: 3rem;
  font-weight: 700;
  line-height: 150%;
}
@media screen and (max-width: 960px) {
  .chartPageTitle p {
    font-size: 2rem;
  }
}
@media screen and (max-width: 668px) {
  .chartPageTitle p {
    font-size: 1.6rem;
  }
}

.topicPath {
  margin-bottom: 0 !important;
}

.title10 {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
}
@media screen and (max-width: 1260px) {
  .title10 {
    max-width: 100%;
    margin-left: 30px;
    margin-right: 30px;
  }
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .title10 {
    max-width: 100%;
    margin-left: 25px;
    margin-right: 25px;
  }
}
@media screen and (max-width: 668px) {
  .title10 {
    flex-direction: column-reverse;
    margin-top: 30px;
  }
}
.title10 > p {
  width: 41.67%;
}
@media screen and (max-width: 668px) {
  .title10 > p {
    width: 100%;
  }
}
.title10 > div {
  width: 57%;
  padding-bottom: 30px;
}
@media screen and (max-width: 668px) {
  .title10 > div {
    width: 100%;
    padding-bottom: 0;
  }
}
.title10 > div * {
  line-height: 100%;
  font-weight: 700;
}
.title10 > div p {
  text-align: right;
}
.title10 > div p.text01 {
  font-size: 54px;
  margin-bottom: 20px;
}
@media all and (max-width: 1200px) {
  .title10 > div p.text01 {
    font-size: 4.5vw;
  }
}
@media screen and (max-width: 668px) {
  .title10 > div p.text01 {
    font-size: 8.0838323353vw;
  }
}
.title10 > div p.text01 small {
  font-size: 35px;
}
@media all and (max-width: 1200px) {
  .title10 > div p.text01 small {
    font-size: 2.9166666667vw;
  }
}
@media screen and (max-width: 668px) {
  .title10 > div p.text01 small {
    font-size: 5.2395209581vw;
  }
}
.title10 > div p.text02 {
  position: relative;
  font-size: 130px;
}
@media all and (max-width: 1200px) {
  .title10 > div p.text02 {
    font-size: 10.8333333333vw;
  }
}
@media screen and (max-width: 668px) {
  .title10 > div p.text02 {
    font-size: 19.4610778443vw;
  }
}
.title10 > div p.text02 span {
  font-size: 220px;
  letter-spacing: -5px;
  color: #3071B9;
  position: absolute;
  right: 1.6em;
  bottom: -20px;
  display: block;
}
@media all and (max-width: 1200px) {
  .title10 > div p.text02 span {
    font-size: 18.3333333333vw;
  }
}
@media screen and (max-width: 960px) {
  .title10 > div p.text02 span {
    bottom: -10px;
  }
}
@media screen and (max-width: 668px) {
  .title10 > div p.text02 span {
    bottom: 0;
    font-size: 32.9341317365vw;
  }
}
.title10 > div p.text02 small {
  font-size: 96px;
}
@media all and (max-width: 1200px) {
  .title10 > div p.text02 small {
    font-size: 8vw;
  }
}
@media screen and (max-width: 668px) {
  .title10 > div p.text02 small {
    font-size: 14.371257485vw;
  }
}

.mainArea {
  max-width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width: 1260px) {
  .mainArea {
    max-width: 100%;
    margin-left: 30px;
    margin-right: 30px;
  }
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .mainArea {
    max-width: 100%;
    margin-left: 25px;
    margin-right: 25px;
  }
}
.mainArea > div.col1 {
  margin: 0;
}
.mainArea > div.col2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.mainArea > div.col2 > section {
  width: calc(50% - 25px);
}
@media screen and (max-width: 960px) {
  .mainArea > div.col2 > section {
    width: calc(50% - 10px);
  }
}
@media screen and (max-width: 668px) {
  .mainArea > div.col2 > section {
    width: 100%;
  }
}
.mainArea > div.col2v {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.mainArea > div.col2v > div {
  width: calc(50% - 25px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media screen and (max-width: 960px) {
  .mainArea > div.col2v > div {
    width: calc(50% - 10px);
  }
}
@media screen and (max-width: 668px) {
  .mainArea > div.col2v > div {
    width: 100%;
  }
}
.mainArea > div.col2v > div.l > section {
  height: 100%;
}
.mainArea > div section {
  box-shadow: 2px 2px 0px 0px #898989;
  background-color: #fff;
  padding: 25px;
  margin-bottom: 40px;
}
@media screen and (max-width: 960px) {
  .mainArea > div section {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 668px) {
  .mainArea > div section {
    padding: 20px;
  }
}
.mainArea > div section h3 {
  text-align: center;
  font-size: 3.3rem;
  font-weight: 700;
  padding: 10px;
  color: #fff;
  line-height: 120%;
  background-color: #3071B9;
  position: relative;
  z-index: 2;
}
@media all and (max-width: 1200px) {
  .mainArea > div section h3 {
    font-size: 2.75vw;
  }
}
@media screen and (max-width: 668px) {
  .mainArea > div section h3 {
    font-size: 4.9401197605vw;
  }
}
.mainArea > div section > div * {
  line-height: 100%;
}

.chart01 {
  padding-top: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chart01 .pict {
  width: 26%;
  margin: 0 auto;
}
.chart01 .text {
  text-align: center;
}

.chart02 {
  padding-top: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chart02 .pict {
  width: 48%;
  margin: 0 auto;
}
.chart02 .text {
  text-align: center;
  width: 50%;
}

.chart03 {
  text-align: center;
  position: relative;
}
.chart03 .pict {
  width: 80%;
  margin: -20px 0 0 auto;
}
@media screen and (max-width: 960px) {
  .chart03 .pict {
    width: 90%;
    margin: 0 0 0 auto;
  }
}
.chart03 .no1 {
  position: absolute;
  left: 0;
  top: 40px;
  width: 26%;
}
.chart03 .blu {
  padding-left: 30px;
}
@media all and (max-width: 1200px) {
  .chart03 .blu {
    padding-left: 0;
  }
}

.chart04 {
  position: relative;
  padding-top: 25px;
  text-align: center;
}
.chart04 .pict {
  width: 36%;
  margin: 0 auto 20px;
}
.chart04 .no1 {
  position: absolute;
  left: 0;
  top: 20px;
  width: 26%;
}
.chart04 .blu .shuffle * {
  font-size: 10rem;
  font-weight: 700;
}
@media screen and (max-width: 960px) {
  .chart04 .blu .shuffle * {
    font-size: 9.25vw;
  }
}
@media screen and (max-width: 668px) {
  .chart04 .blu .shuffle * {
    font-size: 16.6167664671vw;
  }
}

.chart05 {
  padding-top: 25px;
  text-align: center;
}
.chart05 .pict {
  width: 50%;
  margin: 0 auto 20px;
}

.chart06 {
  display: flex;
  flex-wrap: wrap;
}
.chart06 .l {
  width: calc(50% - 50px);
  text-align: center;
  display: flex;
  flex-flow: column;
}
@media screen and (max-width: 960px) {
  .chart06 .l {
    width: calc(50% - 20px);
  }
}
@media screen and (max-width: 668px) {
  .chart06 .l {
    width: 100%;
    margin-bottom: 20px;
  }
}
.chart06 .l > div {
  flex-grow: 3;
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.chart06 .r {
  width: calc(50% + 50px);
}
@media screen and (max-width: 960px) {
  .chart06 .r {
    width: calc(50% + 20px);
  }
}
@media screen and (max-width: 668px) {
  .chart06 .r {
    width: 100%;
  }
}

.chart07 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.chart07 .l {
  width: calc(50% - 50px);
  text-align: center;
  display: flex;
  flex-direction: column;
  position: relative;
}
@media screen and (max-width: 960px) {
  .chart07 .l {
    width: calc(50% - 20px);
  }
}
@media screen and (max-width: 668px) {
  .chart07 .l {
    width: 100%;
    margin-bottom: 20px;
  }
}
.chart07 .l .text10yearsago {
  text-align: left;
  position: absolute;
  left: 8%;
  top: 90px;
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .chart07 .l .text10yearsago {
    top: 60px;
  }
}
.chart07 .l .blu.mb10 {
  padding: 20px 0 0;
}
@media screen and (max-width: 960px) {
  .chart07 .l .blu.mb10 {
    padding: 0;
  }
}
@media screen and (max-width: 668px) {
  .chart07 .l .blu.mb10 {
    padding: 60px 0 0;
  }
}
@media screen and (max-width: 668px) and (orientation: portrait) {
  .chart07 .l .blu.mb10 {
    padding: 20px 0 0;
  }
}
.chart07 .l .sub {
  display: flex;
  position: relative;
  margin: auto 0 0;
}
.chart07 .l .sub > div {
  display: flex;
  align-items: flex-end;
  position: relative;
  justify-content: space-between;
}
.chart07 .l .sub > div.s01 {
  width: 40%;
}
.chart07 .l .sub > div.s01 p {
  width: 17%;
}
.chart07 .l .sub > div.s01 dl {
  width: calc(83% - 10px);
}
.chart07 .l .sub > div.s02 {
  width: calc(60% - 15px);
  margin-left: 15px;
}
.chart07 .l .sub > div.s02 p {
  width: 25%;
}
.chart07 .l .sub > div.s02 dl {
  width: calc(75% - 10px);
}
.chart07 .l .sub > div.s02 dl dd.blu .shuffle * {
  font-size: 5rem;
  font-weight: 700;
}
@media screen and (max-width: 960px) {
  .chart07 .l .sub > div.s02 dl dd.blu .shuffle * {
    font-size: 4.1666666667vw;
  }
}
@media screen and (max-width: 668px) {
  .chart07 .l .sub > div.s02 dl dd.blu .shuffle * {
    font-size: 7.4850299401vw;
  }
}
.chart07 .l .sub > div dl dd {
  white-space: nowrap;
}
.chart07 .l .sub > p.no1_f {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 26%;
}
.chart07 .r {
  width: 50%;
}
@media screen and (max-width: 668px) {
  .chart07 .r {
    width: 100%;
  }
}
.chart07 .r p {
  max-width: 450px;
  margin: 0 auto;
}
@media all and (max-width: 1200px) {
  .chart07 .r p {
    margin: 0 0 0 auto;
  }
}
@media screen and (max-width: 668px) {
  .chart07 .r p {
    margin: 0 auto;
  }
}

.chart08 {
  padding-top: 30px;
}
.chart08 .pict {
  max-width: 460px;
  margin: 0 auto 20px;
}
.chart08 .blu {
  text-align: center;
}
.chart08 .blu .shuffle * {
  font-size: 14rem;
  font-weight: 700;
}
@media screen and (max-width: 960px) {
  .chart08 .blu .shuffle * {
    font-size: 11.6666666667vw;
  }
}
@media screen and (max-width: 668px) {
  .chart08 .blu .shuffle * {
    font-size: 20.9580838323vw;
  }
}

.chart09 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 50px;
}
@media screen and (max-width: 668px) {
  .chart09 {
    padding-top: 20px;
  }
}
.chart09 > p.pict {
  width: 42%;
}
.chart09 > p.blu {
  width: 58%;
  text-align: center;
}
.chart09 > p.blu small {
  display: block;
  font-weight: 700;
  letter-spacing: 3px;
}

.chart10 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}
.chart10 .l {
  width: calc(50% - 50px);
  text-align: center;
  display: flex;
  flex-flow: column;
}
@media screen and (max-width: 960px) {
  .chart10 .l {
    width: calc(50% - 20px);
  }
}
@media screen and (max-width: 668px) {
  .chart10 .l {
    width: 100%;
  }
}
.chart10 .l > div {
  flex-grow: 3;
  display: flex;
  flex-flow: column;
  justify-content: center;
}
@media screen and (max-width: 960px) {
  .chart10 .l > div {
    margin-top: 20px;
  }
}
.chart10 .c {
  width: 28%;
  position: absolute;
  right: calc(25% + 30px);
  bottom: 0;
}
@media screen and (max-width: 960px) {
  .chart10 .c {
    width: 33%;
    right: calc(25% + 10px);
  }
}
@media screen and (max-width: 668px) {
  .chart10 .c {
    position: static;
    width: 100%;
    margin-top: -40px;
  }
}
.chart10 .r {
  width: 27%;
}
@media screen and (max-width: 668px) {
  .chart10 .r {
    margin-top: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.chart10 .r .pict {
  width: 28%;
  margin: 0 auto;
}
@media screen and (max-width: 668px) {
  .chart10 .r .pict {
    width: 20%;
    margin: 0;
  }
}
.chart10 .r dl {
  text-align: center;
}
@media screen and (max-width: 668px) {
  .chart10 .r dl {
    width: calc(85% - 10px);
  }
}
.chart10 .r dl dt {
  color: #3071B9;
  margin: 25px 0 8px;
}
@media screen and (max-width: 960px) {
  .chart10 .r dl dt {
    margin: 15px 0 5px;
  }
}
.chart10 .r dl dd strong {
  font-size: 1.4em;
}

.mb10 {
  margin-bottom: 10px;
}

.blu {
  color: #3071B9;
}

.fontS {
  font-size: 2.2rem;
}
@media all and (max-width: 1200px) {
  .fontS {
    font-size: 1.8333333333vw;
  }
}
@media screen and (max-width: 668px) {
  .fontS {
    font-size: 3.2934131737vw;
  }
}

.fontM {
  font-size: 3.3rem;
}
@media all and (max-width: 1200px) {
  .fontM {
    font-size: 2.75vw;
  }
}
@media screen and (max-width: 668px) {
  .fontM {
    font-size: 4.9401197605vw;
  }
}

.fontL {
  font-size: 5.5rem;
}
@media screen and (max-width: 960px) {
  .fontL {
    font-size: 4.5833333333vw;
  }
}
@media screen and (max-width: 668px) {
  .fontL {
    font-size: 8.2335329341vw;
  }
}

.fontNum50 {
  font-size: 5rem;
  font-weight: 700;
}
@media screen and (max-width: 960px) {
  .fontNum50 {
    font-size: 4.1666666667vw;
  }
}
@media screen and (max-width: 668px) {
  .fontNum50 {
    font-size: 7.4850299401vw;
  }
}

.fontNum100 {
  font-size: 10rem;
  font-weight: 700;
}
@media screen and (max-width: 960px) {
  .fontNum100 {
    font-size: 9.25vw;
  }
}
@media screen and (max-width: 668px) {
  .fontNum100 {
    font-size: 16.6167664671vw;
  }
}

.fontNum140 {
  font-size: 14rem;
  font-weight: 700;
}
@media screen and (max-width: 960px) {
  .fontNum140 {
    font-size: 11.6666666667vw;
  }
}
@media screen and (max-width: 668px) {
  .fontNum140 {
    font-size: 20.9580838323vw;
  }
}

.fontNum165 {
  font-size: 16.5rem;
  font-weight: 700;
}
@media screen and (max-width: 960px) {
  .fontNum165 {
    font-size: 13.75vw;
  }
}
@media screen and (max-width: 668px) {
  .fontNum165 {
    font-size: 24.7005988024vw;
  }
}

.fontNum200 {
  font-size: 21rem;
  font-weight: 700;
}
@media screen and (max-width: 960px) {
  .fontNum200 {
    font-size: 16.6666666667vw;
  }
}
@media screen and (max-width: 668px) {
  .fontNum200 {
    font-size: 29.9401197605vw;
  }
}

.move__p.start {
  animation: poyo 2.5s;
  animation-delay: 1s;
  opacity: 1;
  animation-iteration-count: infinite;
}

.move__k.start {
  animation: kuru 4s ease-out;
  opacity: 1;
  animation-iteration-count: infinite;
}

.move__d.start {
  animation: don 3s cubic-bezier(0.12, 0, 0.39, 0);
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
}

@keyframes poyo {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}
@keyframes kuru {
  0% {
    transform: rotateY(0);
    opacity: 0;
  }
  5% {
    transform: rotateY(360deg);
    opacity: 1;
  }
  10% {
    transform: rotateY(0);
    opacity: 0;
  }
}
@keyframes don {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  10% {
    transform: translateY(0);
  }
  12% {
    transform: translateY(-10px);
  }
  15% {
    transform: translateY(0);
  }
  20%, 100% {
    opacity: 1;
  }
}/*# sourceMappingURL=index.css.map */