@charset "utf-8";

/* =============================================================

	grandtop

* ============================================================= */

/* grandtop-hero
--------------------------- */

.grandtop-hero {
  position: relative;
}

html.js .grandtop-hero .c-logotype-A {
  transform: translate(-50%, 50%);
  transition: transform 0.28s 1.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
body._loadend .grandtop-hero .c-logotype-A {
  transform: translate(-50%, 0);
}

/* AIBA */
html.js .grandtop-hero .c-logotype-A > b {
  opacity: 0;
  transform: translate(0, 30px);
  transition: all 0.15s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.4);
}
body._loadend .grandtop-hero .c-logotype-A > b {
  opacity: 1;
  transform: translate(0, 0);
}

/* 100 */
html.js .grandtop-hero .c-logotype-A > strong {
  overflow: hidden;
}

html.js .grandtop-hero .c-logotype-A > strong > span {
  display: inline-block;
  color: #00964f;
  transform: translate(0, -100%);
  transition: transform 0.3s 0.53s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}
html.js .grandtop-hero .c-logotype-A > strong > span:first-child {
  color: #004d9f;
  transition-duration: 0.35s;
  transition-delay: 0.65s;
}
html.js .grandtop-hero .c-logotype-A > strong > span:last-child {
  color: #d6092f;
  transition-duration: 0.3s;
  transition-delay: 0.45s;
}
body._loadend .grandtop-hero .c-logotype-A > strong > span {
  transform: translate(0, 0);
  animation: grandtop-hero_a1 0.25s 1.7s forwards;
}

@keyframes grandtop-hero_a1 {
  100% {
    color: #1a1a1a;
  }
}

/* Story */
.grandtop-hero .c-logotype-A > span {
  width: 4em;
}

html.js .grandtop-hero .c-logotype-A > span > span {
  display: inline-block;
  opacity: 0;
  transform: translate(200px, -50px) rotate(10deg) scale(0.3);
  letter-spacing: 80px;
  transition: opacity 0.4s 0.6s, transform 0.3s 0.6s, letter-spacing 0.35s 0.6s;
}
body._loadend .grandtop-hero .c-logotype-A > span > span {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg) scale(1);
  letter-spacing: 1px;
}

/* img */
html.js .grandtop-hero__img {
  opacity: 0;
  transform-origin: 50% 50%;
  transform: translate(0, 20px);
  transition: opacity 0.6s 1.7s, transform 0.4s 1.7s;
}
body._loadend .grandtop-hero__img {
  opacity: 1;
  transform: translate(0, 0);
}

/* c-graph */
.grandtop-hero__graph > .c-graph {
  position: absolute;
}
html.js .grandtop-hero__graph > .c-graph {
  transform: scale(0.4);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}
body._loadend .grandtop-hero__graph > .c-graph {
  transform: scale(1);
  opacity: 1;
}

html.js .grandtop-hero__graph > .c-graph._img1 {
  top: 0;
  left: 20%;
  transition-delay: 1.4s;
  animation-delay: 1.7s;
}
.grandtop-hero__graph > .c-graph._img1,
body._loadend .grandtop-hero__graph > .c-graph._img1 {
  top: -50px;
  left: 10vw;
}

html.js .grandtop-hero__graph > .c-graph._img2 {
  top: 20%;
  right: 20%;
  transition-delay: 1.35s;
  animation-delay: 1.65s;
}
.grandtop-hero__graph > .c-graph._img2,
body._loadend .grandtop-hero__graph > .c-graph._img2 {
  top: 8vw;
  right: 12vw;
}

html.js .grandtop-hero__graph > .c-graph._img3 {
  bottom: 35%;
  left: 30%;
  transition-delay: 1.45s;
  animation-delay: 1.75s;
}
.grandtop-hero__graph > .c-graph._img3,
body._loadend .grandtop-hero__graph > .c-graph._img3 {
  bottom: 12vw;
  left: 18vw;
}

/* grandtop-lead
--------------------------- */

.grandtop-lead {
  margin-top: -7vw;
  position: relative;
}

html.js .grandtop-lead {
  opacity: 0;
  transform: translate(0, 30px);
  transition: opacity 0.15s 0.2s, transform 0.15s 0.2s;
}
body._loadend .grandtop-lead {
  opacity: 1;
  transform: translate(0, 0);
}

.grandtop-lead .c-txt-A {
  width: 82vw;
  max-width: 700px;
  margin: 0 auto;
}

.grandtop-lead .c-txt-A > span {
  display: inline-block;
}

/* grandtop-articlelist
--------------------------- */

.grandtop-articlelist {
  margin-top: 6vw;
}

/* =============================================================

	top

* ============================================================= */

/* top-hero
--------------------------- */

.top-hero__outer {
  position: relative;
  z-index: 1;
}

.top-hero__outer:before {
  content: "";
  width: 100%;
  height: 0;
  padding-bottom: 30%;
  background-color: #fff;
  position: absolute;
  top: -1px;
  z-index: -1;
}

.top-hero__outer:after {
  content: "";
  width: 30%;
  height: 100%;
  padding-bottom: 1px;
  background-color: #fff;
  position: absolute;
  top: -1px;
  right: 0;
  z-index: -1;
}
html.js .top-hero__outer:after {
  width: 100%;
  transition: width 0.3s 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}
body._loadend .top-hero__outer:after {
  width: 30%;
}

.top-hero {
  margin-bottom: 10vw;
  position: relative;
  z-index: 1;
}

html.js .top-hero .c-logotype-A {
  transform: translate3d(0, -15px, 0);
  opacity: 0;
  transition: opacity 0.12s 0.55s, transform 0.12s 0.55s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
body._loadend .top-hero .c-logotype-A {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

html.js .top-hero .c-graph {
  transform: scale(0.8);
  opacity: 0;
  transition: all 0.3s 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}
body._loadend .top-hero .c-graph {
  transform: scale(1);
  opacity: 1;
}
body._loadend .top-hero .c-graph:after {
  animation: c-graph_a1 8s 0.95s infinite linear;
}

.top-hero__img {
  width: 100%;
  padding-bottom: 50%;
  min-height: 500px;
  position: relative;
  z-index: -1;
  overflow: hidden;
}
html.js .top-hero__img {
  opacity: 0;
  transform-origin: 50% 50%;
  transform: translate(0, 15px);
  transition: opacity 0.3s 0.6s, transform 0.4s 0.6s;
}
body._loadend .top-hero__img {
  opacity: 1;
  transform: translate(0, 0);
}

.top-hero__item {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translate(50%, 0) scale(0.85);
  transform-origin: 50% 50%;
}
.top-hero__item._active {
  z-index: 2;
  opacity: 1;
  transform: translate(0, 0) scale(1);
  transition: opacity 0.5s 0.1s, transform 0.5s 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.top-hero__item._gone {
  opacity: 0.5;
  transform: translate(-30%, 0) scale(0.75);
  transition: opacity 0.4s 0.1s, transform 0.5s 0s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.top-hero__lead {
  width: 60%;
  max-width: 1000px;
  min-height: 35vw;
  float: right;
  margin: -15% -6vw 0 0;
  position: relative;
  z-index: 1;
}
html.js .top-hero__lead {
  opacity: 0;
  transform: translate(20px, 0);
  transition: opacity 0.25s 0.7s, transform 0.25s 0.7s;
}
body._loadend .top-hero__lead {
  opacity: 1;
  transform: translate(0, 0);
}

.top-hero__btn {
  position: absolute;
  margin: 5vw 0 0 3vw;
  transform: translateY(-50%);
}

.top-hero__btn > a {
  color: #fff;
  font-size: calc(1.067 * var(--rem-base));
  font-weight: 600;
  display: block;
}

.top-hero__btn > a:hover {
  color: #f5a900;
}
.top-hero__btn > a:hover > .c-arrow {
  border-color: #f5a900 !important;
}
.top-hero__btn > a:hover > .c-arrow:after {
  border-left-color: #f5a900 !important;
}

/* top-articlelist
--------------------------- */

.top-articlelist {
  clear: both;
}

.top-articlelist__title {
  margin: 0 auto 7.5vw 3vw;
}

/* =============================================================

	list

* ============================================================= */

/* list-hero
--------------------------- */

.list-hero {
  margin-bottom: 0;
}

html.js .list-hero .c-logotype-A {
  transform: translate3d(0, -15px, 0);
  opacity: 0;
  transition: opacity 0.15s 0.2s, transform 0.15s 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
body._loadend .list-hero .c-logotype-A {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

html.js .list-hero .c-graph {
  transform: scale(0.8);
  opacity: 0;
  transition: all 0.3s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}
body._loadend .list-hero .c-graph {
  transform: scale(1);
  opacity: 1;
}
body._loadend .list-hero .c-graph:after {
  animation: c-graph_a1 8s 0.85s infinite linear;
}

/* list-articlelist
--------------------------- */

.list-articlelist {
  margin-top: 13vw;
}

.list-articlelist .c-catnav {
  margin-bottom: -1vw;
  position: relative;
  z-index: 1;
}

/* =============================================================

	article

* ============================================================= */

/* article-hero
--------------------------- */

.article-hero__outer {
  position: relative;
  z-index: 1;
}

.article-hero__outer:before {
  content: "";
  width: 100%;
  height: 0;
  padding-bottom: 30%;
  background-color: #fff;
  position: absolute;
  top: -1px;
  z-index: -1;
}

html.js .article-hero .c-logotype-A {
  transform: translate3d(0, -15px, 0);
  opacity: 0;
  transition: opacity 0.12s 0.2s, transform 0.12s 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
body._loadend .article-hero .c-logotype-A {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

html.js .article-hero .c-graph {
  transform: scale(0.8);
  opacity: 0;
  transition: all 0.3s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}
body._loadend .article-hero .c-graph {
  transform: scale(1);
  opacity: 1;
}
body._loadend .article-hero .c-graph:after {
  animation: c-graph_a1 8s 0.8s infinite linear;
}

html.js .article-hero__img {
  opacity: 0;
  transform-origin: 50% 50%;
  transform: translate(0, 15px);
  transition: opacity 0.3s 0.35s, transform 0.4s 0.35s;
}
body._loadend .article-hero__img {
  opacity: 1;
  transform: translate(0, 0);
}

.article-hero__img > .c-img-ratio {
  min-height: 500px;
  overflow: hidden;
}
.article-hero__img > .c-img-ratio picture {
  height: 100%;
}
.article-hero__img > .c-img-ratio img {
  object-fit: cover;
  height: 100%;
}
.article-hero__txt {
  color: #fff;
  text-align: center;
  position: relative;
  padding-top: calc(4vw + 50px);
}

.article-hero__txt > .c-badge-A {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

html.js .article-hero__txt > .c-badge-A {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity 0.2s 0.4s, transform 0.2s 0.4s;
}
body._loadend .article-hero__txt > .c-badge-A {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* article-lead
--------------------------- */

.article-lead__outer {
  position: relative;
  z-index: 1;
}

.article-lead__outer:before {
  content: "";
  width: 100%;
  height: 0;
  padding-bottom: 15%;
  position: absolute;
  top: 0;
  z-index: -1;
}
#taiken .article-lead__outer:before {
  background-color: #004d9f;
}

.article-lead {
  margin-top: -3vw;
  margin-bottom: 6vw;
}

.article-lead__grids {
  margin: -1px -6vw 18vw;
}
.article-lead__grids .c-img-ratio._r3to2 {
  overflow: hidden;
}
.article-lead__grids .c-img-ratio._r3to2 picture {
  height: 100%;
}
.article-lead__grids .c-img-ratio._r3to2 img {
  object-fit: cover;
  height: 100%;
}

.article-lead__detail {
  font-size: calc(1.067 * var(--rem-base));
  line-height: 1.6;
  width: 50%;
  margin-right: 0;
  min-height: 32vw;
  float: right;
}

.article-lead__detail > dt {
  position: absolute;
}

.article-lead__detail > dd {
  padding-left: 5.5em;
  margin-bottom: 0.8vw;
}

.article-lead__detail > dt._large {
  position: static;
  margin-bottom: 0.5vw;
}

.article-lead__detail > dt._large + dd {
  padding-left: 0;
  margin-bottom: 1.5vw;
  line-height: 1.8;
}

.article-lead__detail > dd + dt._large {
  margin-top: 2vw;
}
.article-lead__detail > dd a {
  color: var(--color-base);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
}

.lead_caption {
  font-weight: 400;
  margin-top: 2.5em;
  font-size: 15px;
}

.article-lead__img {
  width: 50%;
  padding-left: 6vw;
  float: left;
}

.article-lead__lead .c-logotype-A {
  position: absolute;
  left: 0;
  transform: translate(15vw, -170%);
}

.article-lead__lead .c-logotype-A > .c-graph {
  top: -70px !important;
}

body._loadend .article-lead__lead .c-graph:after {
  animation: c-graph_a1 8s 0.4s infinite linear;
}

/* article-movie
--------------------------- */

.article-movie__item {
  direction: rtl;
}

.article-movie__item + .article-movie__item {
  margin-top: 8vw;
}

.article-movie__item > * {
  direction: ltr;
  display: inline-block;
  vertical-align: middle;
}

.article-movie__txt {
  width: 40%;
  padding-left: 5vw;
}

.article-movie__movie {
  width: 60%;
}

.article-movie__movie-canvas {
  width: 100%;
  padding-bottom: 56%; /* 16:9 */
  position: relative;
  overflow: hidden;
}

.article-movie__movie-canvas > iframe {
  position: absolute;
  width: 102%;
  height: 102%;
  margin: -1% 0 0 -1%;
}

/* article-data
--------------------------- */

.article-data__table-outer {
  margin-left: -5vw;
  margin-right: -5vw;
}

.article-data__table {
  font-size: calc(0.933 * var(--rem-base));
  line-height: 1.8;
  width: 100%;
}

.article-data__table th,
.article-data__table td {
  padding: calc(1.2 * var(--rem-base)) calc(1 * var(--rem-base)) calc(1 * var(--rem-base));
  border: 1px solid #d9d9d9;
}

.article-data__table th {
  width: 18em;
  color: #808082;
  font-size: calc(0.867 * var(--rem-base));
  padding-left: calc(4 * var(--rem-base));
}

/* article-credit
--------------------------- */

.article-credit {
  color: #999;
  font-size: calc(0.933 * var(--rem-base));
  text-align: center;
  padding-bottom: 3vw;
}

/* article-note
--------------------------- */

.article-note__img {
  width: 50%;
  float: right;
  margin-left: 2vw;
  padding-left: 2vw;
}

.article-note__txt {
  overflow: auto;
}

/* article-profile
--------------------------- */

.article-profile__item + .article-profile__item {
  margin-top: 4vw;
}

.article-profile__img {
  width: 20%;
  float: left;
  margin-right: 3vw;
}

.article-profile__txt {
  overflow: auto;
}

/* =============================================================

	about

* ============================================================= */

/* about-hero
--------------------------- */

.about-hero {
  height: 7vw;
  max-height: 90px;
  position: relative;
}

html.js .about-hero .c-logotype-A {
  transform: translate3d(0, -15px, 0);
  opacity: 0;
  transition: opacity 0.15s 0.2s, transform 0.15s 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
body._loadend .about-hero .c-logotype-A {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

html.js .about-hero .c-graph {
  transform: scale(0.8);
  opacity: 0;
  transition: all 0.3s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}
body._loadend .about-hero .c-graph {
  transform: scale(1);
  opacity: 1;
}
body._loadend .about-hero .c-graph:after {
  animation: c-graph_a1 8s 0.85s infinite linear;
}

.about-hero__img {
  width: 30%;
  max-width: 450px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  bottom: -13.5vw;
  right: 5vw;
}

@media screen and (min-width: 1400px) {
  .about-hero__img {
    bottom: -15vw;
  }
}

html.js .about-hero__img {
  transform: scale(0.8);
  opacity: 0;
  transition: opacity 0.1s 0.45s, transform 0.2s 0.45s;
}
body._loadend .about-hero__img {
  transform: scale(1);
  opacity: 1;
}

/* about-lead
--------------------------- */

.about-lead {
  color: #fff;
  text-align: center;
  max-width: 82vw;
}

.notfound-lead {
  text-align: center;
  max-width: 82vw;
}
@media screen and (max-width: 740px) {
  .notfound-lead .c-txt-A > br {
    display: none;
  }
}