:root {
  --main-color1: #e12319; /*#ea5532*/
  --main-color2: #005bab; /*#54c3f1*/
  --main-color1-thin: rgba(0,91,171,.1); /*rgba(234,85,50,.1)*/
  --main-color2-thin: rgb(225,35,25,.1); /*rgba(84,195,241,.1)*/
  --color-black: #221815;
  --color-dark: #a2a2a2;
  --bg-color-white: #fff;
  --textlink-color: #268cf2;
  --font-base-family: "Noto Sans JP", sans-serif;
  --font-main-family: corpmarugo_v3;
  --font-color-main: #221815;
  --font-color-white: #fff;
  --font-size-b: clamp(2rem, 5vw ,3rem);
  --font-size-xxl: 1.75rem; /*30px*/
  --font-size-xl: 1.35rem; /*25px 1.45rem*/
  --font-size-l: 1.1rem ; /*// clamp(1.5rem, 4vw ,1.7rem)*/
  --font-size-m: 1rem; /*0.95rem*/ /*0.95168vw 1.35rem*/
  --font-size-s: 1rem; /*0.95rem*/
  --font-size-min: 0.78rem;
  --font-size-xl-sp: 16px;
  --font-size-l-sp: 0.65rem; /*// clamp(1.5rem, 4vw ,1.7rem)*/
  --font-size-m-sp: 0.945rem; /*0.95168vw 1.35rem*/
  --font-size-s-sp: 0.86rem;
  --font-size-min-sp: 0.68rem;
  --width: min(100% - 20px , 1300px);
  /* --pt-1: clamp(1rem,1rem + 2vw,4rem); */
  /* --flex-width: clamp(calc(100% / 3 - 1rem), 30% , calc(100% / 1 - 1rem)); */
}

article, aside, details, figcaption, figure, hgroup, menu, nav, section {
  display: block;
}

li, nav, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:after, blockquote:before, q:after, q:before {
  content: "";
  content: none;
}

ins {
  background-color: #ff9;
  color: var(--color-black);
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: var(--color-black);
  font-style: italic;
  font-weight: 700;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

picture {
  display: block;
}

.pc {
  display: none;
}

.sp {
  display: block;
}

@media only screen and (min-width: 900px) {
  .pc {
    display: block;
  }
  .sp {
    display: none !important;
  }
}
.br-5s {
  display: none;
}

@media screen and (max-width: 440px) {
  .br-5s {
    display: block !important;
  }
}
@media screen and (max-width: 400px) {
  .title_sub p {
    font-size: 1.05rem;
  }
}
/* base */
body {
  font-family: var(--font-base-family);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-black);
  min-height: 100%;
  font-feature-settings: "palt" 1;
  transition: opacity 0.8s ease;
  overflow: hidden;
}

.content img,
.content picture {
  border: none;
  max-width: 100%;
  height: auto;
  backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

#content_wrap {
  width: 100%;
  padding: 0;
  overflow-wrap: break-word;
}

#content_wrap_in {
  width: 100%;
  margin: 0 auto;
}

@keyframes move_left1 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes move_right1 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
/* main contents */
@media screen and (max-width: 899px) {
  body.top .wrapper .content {
    overflow: hidden;
  }
}
@media screen and (min-width: 900px) {
  body .wrapper .content {
    z-index: 3;
    position: relative;
    margin-left: 39.0571%;
    min-width: 48.3%;
    max-width: 48.3%;
  }
  body.history10 .wrapper .content,
  body.history .wrapper .content {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
}
body.history .wrapper .archiveMain,
body.history11 .wrapper .archiveMain {
  padding-top: 6.90625vh; /* 9.81567vh; */
}

@media screen and (max-width: 899px) {
  body.history10 .wrapper .archiveMain,
  body.history .wrapper .archiveMain {
    padding-top: 0; /*6.81567vh*/
  }
}
/*****************************************************/
/* History */
/*****************************************************/
.timelineEnd {
  margin-top: 10.90625vh;
  position: relative;
  overflow: hidden;
}

.bottom_marquee {
  display: flex;
  flex-wrap: nowrap;
}

.bottom_marquee .image01,
.bottom_marquee .image02 {
  margin: 0px 50px 50px 100px;
  animation: move_left1 30s linear infinite forwards;
  will-change: transform;
}

.content .bottom_marquee img {
  height: auto;
  opacity: 1;
  width: 1200px;
  max-width: 10000px;
}

.timelineEnd .c_illust {
  position: relative;
  max-width: 300px;
  margin: 1rem auto;
}

@media screen and (max-width: 899px) {
  .timelineEnd {
    margin-top: 11.90625vh;
  }
  .bottom_marquee .image01,
  .bottom_marquee .image02 {
    margin: 0px 20px 0px 40px;
  }
  .content .bottom_marquee img {
    width: 480px;
  }
  .timelineEnd .c_illust {
    padding: 0 15.33333vw;
  }
}
.timelineEnd .note p {
  margin-top: 8.90625vh;
  font-size: var(--font-size-min);
  line-height: 1.8; /*2.13*/
  text-align: center;
}

.timelineWrap {
  z-index: 2;
}

@media only screen and (max-width: 899px) {
  .timelineWrap {
    margin-top: 9.3333333333vw;
  }
}
@media only screen and (min-width: 900px) {
  .timeline_deco {
    z-index: -1;
  }
  .timeline_section {
    z-index: 1;
  }
}
.archiveMain {
  position: relative;
  padding: 0 10%;
}

@media only screen and (max-width: 899px) {
  .archiveMain {
    padding: 0;
  }
}
.episode {
  position: relative;
  border-radius: 16px;
  border-width: 2px;
  margin-top: 3.90625vh;
  padding: 3.90625vh 0;
  background: var(--bg-color-white);
}

[data-color=steel] .episode {
  border: solid var(--main-color1);
}

[data-color=soft] .episode {
  border: solid var(--main-color2);
}

[data-color=etc] .episode {
  border: solid var(--color-dark);
}

@media only screen and (max-width: 580px) {
  .episode {
    margin-top: 5.33333vw;
    border-radius: 2.6666666667vw;
    border-width: 0.8vw;
  }
}
.episode_headline {
  font-family: var(--font-main-family);
  padding: 0 6.6% 0;
  margin-top: 3.90625vh;
}

[data-color=steel] .episode_headline {
  color: var(--main-color1);
}

[data-color=soft] .episode_headline {
  color: var(--main-color2);
}

[data-color=etc] .episode_headline {
  color: var(--color-dark);
}

.episode_headline span {
  font-size: var(--font-size-xl);
  line-height: 1.4;
}

@media only screen and (max-width: 899px) {
  .episode_headline span {
    line-height: 1.2;
  }
}
@media only screen and (max-width: 540px) {
  .episode_headline span {
    font-size: var(--font-size-xl-sp);
    line-height: 1.2;
  }
}
.episode_content {
  position: relative;
  padding: 1.3333333333vw 6.6% 0 6.6%;
}

@media only screen and (max-width: 899px) {
  .episode_content {
    padding-top: 1.3333333333vw;
  }
}
@media only screen and (max-width: 540px) {
  .episode_content {
    padding-top: 3.3333333333vw;
  }
}
.explain_imageWrap + .episode_content {
  padding-top: 2.5rem;
}

@media only screen and (max-width: 899px) {
  .episode_image {
    margin: 10px auto 0;
    width: 160px;
    margin-top: 2.6666666667vw;
    width: 42.6666666667vw;
  }
}
[class*=explain] + .explain {
  margin-top: 200px;
}

@media only screen and (max-width: 899px) {
  [class*=explain] + .explain {
    margin-top: 120px;
    margin-top: 32vw;
  }
}
@media only screen and (max-width: 580px) {
  [class*=explain] + .explain {
    margin-top: 32vw;
  }
}
.explain_imageWrap {
  position: relative;
}

.explain_image {
  position: relative;
  overflow: hidden;
  line-height: 0;
  margin: 1.5rem 0 0 0;
  z-index: 1;
}

.explain_image.bod_of {
  border: none;
}

.explain_imageWrap .explain_image {
  border: none;
}

.explain_image_cap.next {
  margin-top: 3.90625vh;
}

.explain_image_cap.prev {
  padding: 0 6.6% 0 6.6%;
}

.episode .explain_image {
  margin: 1rem 6.6%;
}

.episode .top_viewmore + .explain_image,
.episode a.square_btn + .explain_image {
  margin-top: 2.5rem;
}

@media screen and (max-width: 899px) {
  .episode .top_viewmore + .explain_image,
  .episode a.square_btn + .explain_image {
    margin-top: 8.3333333vw;
  }
}
.episode .explain_image.explain_image_rad {
  border-radius: 12rem;
  margin: 1rem auto;
  max-width: 180px;
}

@media screen and (max-width: 540px) {
  .episode .explain_image.explain_image_rad {
    max-width: 140px;
  }
}
.episode .row2 .explain_image.explain_image_rad {
  margin: 1rem 17.6%;
}

.itemWrap {
  margin-top: 0;
}

.row2 {
  margin: 0 4%;
}

.row2 .item {
  width: 46%;
}

.episode .row2.explain_image.explain_image_rad {
  margin: 1rem 7.6%;
}

.timeline_main .row2 p {
  font-size: var(--font-size-min);
  line-height: 1.4;
}

@media only screen and (max-width: 540px) {
  .timeline_main .row2 p {
    font-size: var(--font-size-min-sp);
    line-height: 1.4;
  }
}
.explain_image img {
  width: 700%;
}

.explain_image_sub {
  position: relative;
  overflow: hidden;
  transition-delay: 1.2s;
}

.explain_image_sub img {
  width: 100%;
}

.explain_body {
  margin-top: 1.90625vh;
  background: rgba(255, 255, 255, 0.7);
}

.explain_body p {
  font-size: var(--font-size-s);
  line-height: 1.8; /*2.13*/
}

@media only screen and (max-width: 899px) {
  .explain_body p {
    line-height: 1.8;
  }
}
@media only screen and (max-width: 540px) {
  .explain_body p {
    font-size: var(--font-size-s-sp);
    line-height: 1.8;
  }
}
.timeline_main .explain_image_cap p {
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}

.explain_body p span {
  font-size: 14px;
}

.itemWrap {
  position: relative;
  margin-top: 1.5rem;
  display: flex;
  justify-content: center; /*space-between*/
  align-items: center;
}

@media screen and (max-width: 540px) {
  .itemWrap {
    margin-top: 0;
  }
}
.item_img img {
  width: 100%;
}

.item_body {
  font-size: 15px;
}

.timeline_section_1970 .episode .item_img {
  width: 25%;
}

.timeline_section_1970 .episode .item_body {
  width: 65%;
  margin-left: 5%;
}

.timeline_section_1977 .explain_image {
  width: 75%;
}

.timeline_section_1977 .explain_image_sub {
  position: absolute;
  top: -15px;
  right: 1.6%;
  width: 30%;
  transform: rotate(10deg);
  z-index: 1;
}

@media only screen and (max-width: 899px) {
  .timeline_section_1977 .explain_imageWrap {
    padding-bottom: 14.333333vw;
  }
}
.timeline_section_1988 .episode .explain_imageWrap .explain_image {
  width: 70%;
}

.timeline_section_1988 .episode .explain_image_sub {
  position: absolute;
  top: 20px;
  right: 7.6%;
  width: 32%;
}

.timeline_section_1986 .explain_imageWrap .explain_image {
  width: 52%;
}

.timeline_section_1986 .explain_imageWrap .explain_image_sub {
  position: absolute;
  top: 20px;
  right: 0;
  width: 52%;
}

@media only screen and (max-width: 899px) {
  .timeline_section_1986 .explain_imageWrap {
    padding-bottom: 14.333333vw;
  }
}
.timelineL {
  position: relative;
  padding: 3rem 4.8888%;
}

.timelineL:nth-child(1) {
  padding-top: 0;
}

.timelineL:nth-child(2) {
  padding-top: 0;
}

.timelineL__inner {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  border-radius: 26px;
  max-width: 1290px;
  padding: 30px 4.8888%;
  background: rgb(255, 255, 255);
}

[data-color=steel] .timelineL__inner {
  border: 4px solid var(--main-color1);
}

[data-color=soft] .timelineL__inner {
  border: 4px solid var(--main-color2);
}

[data-color=etc] .timelineL__inner {
  border: 4px solid var(--color-dark);
}

@media only screen and (max-width: 899px) {
  .timelineL {
    position: relative;
    padding: 0 5.3333vw 5.3333vw;
  }
  .timelineL__inner {
    padding: 2.3333vh 5.3333vw;
  }
}
@media only screen and (max-width: 540px) {
  .timelineL {
    position: relative;
    padding: 0 5.3333vw 8.3333vw;
  }
  .timelineL__inner {
    padding: 2.3333vh 5.3333vw;
  }
}
@media only screen and (max-width: 580px) {
  .timelineL__inner {
    border-width: 0.8vw;
    border-radius: 2.6666666667vw;
    width: 86.7vw;
  }
}
.timelineL__ttl {
  font-family: var(--font-main-family);
  font-size: 30px;
  line-height: 1.3;
  position: relative;
  display: flex;
  align-items: center;
}

[data-color=steel] .timelineL__ttl {
  color: var(--main-color1);
}

[data-color=soft] .timelineL__ttl {
  color: var(--main-color2);
}

[data-color=etc] .timelineL__ttl {
  color: var(--color-dark);
}

@media only screen and (max-width: 899px) {
  .timelineL__ttl {
    margin: 0;
  }
}
.timelineL__ttl p {
  line-height: 140%;
  font-size: 2.4rem;
  letter-spacing: 0.07em;
  font-weight: 800;
}

@media only screen and (max-width: 768px) and (min-width: 580px) {
  .timelineL__ttl p {
    font-size: 2.7rem;
  }
}
@media only screen and (max-width: 580px) {
  .timelineL__ttl p {
    font-size: 4.8vw;
  }
}
.timelineL__ttlNumber {
  font-size: 2.725rem;
  line-height: 1;
  letter-spacing: 0.05rem;
  text-shadow: 2px 2px 0 var(--color-black), -2px -2px 0 var(--color-black), -2px 2px 0 var(--color-black), 2px -2px 0 var(--color-black), 0px 2px 0 var(--color-black), -2px 0 var(--color-black), -2px 0 0 var(--color-black), 2px 0 0 var(--color-black);
}

.timelineL__ttlVal {
  font-size: 1.75rem; /*2.125rem 1.75rem*/
  line-height: 1.2;
  align-items: center;
  padding: 0 0 0 1.5rem;
}

@media only screen and (max-width: 899px) {
  .timelineL__ttl {
    align-items: start;
  }
  .timelineL__ttlNumber {
    font-size: 1.8025rem;
    line-height: 1;
  }
  .timelineL__ttlVal {
    font-size: 1.3825rem;
    padding: 0 0 0 0.8rem;
    margin-top: 3px;
  }
}
.timelineL03 .itemWrap {
  margin-top: 0;
}

.timelineL03 .timelineL__img {
  width: 15%;
}

.timelineL03 .timelineL__body {
  width: 80%;
  padding-left: 5%;
}

@media only screen and (max-width: 899px) {
  .timelineL03 .itemWrap {
    display: block;
  }
  .timelineL03 .timelineL__img {
    width: 25%;
    margin: 5.33333vw auto 0;
  }
  .timelineL03 .timelineL__body {
    width: 100%;
  }
}
.timelineL__img {
  position: relative;
  overflow: hidden;
  margin-top: 3.90625vh;
  line-height: 0;
}

.timelineL__img.bod_of {
  border: none;
}

.timelineL__body {
  margin-top: 3.90625vh;
}

.timelineL__body p {
  font-size: var(--font-size-s);
  line-height: 1.8; /*2.13*/
}

@media only screen and (max-width: 899px) {
  .timelineL__img {
    margin-top: 3.3333vw;
  }
  .timelineL__body {
    margin-top: 3.3333vw;
  }
  .timelineL__body p {
    line-height: 1.8;
  }
}
@media only screen and (max-width: 540px) {
  .timelineL__img {
    margin-top: 5.3333vw;
  }
  .timelineL__body {
    margin-top: 5.3333vw;
  }
  .timelineL__body p {
    font-size: var(--font-size-s-sp);
  }
}
.annotation {
  font-size: var(--font-size-min);
  font-weight: normal;
  line-height: 1.4;
  margin-top: 1rem;
}

@media only screen and (max-width: 899px) {
  .annotation {
    font-size: var(--font-size-min-sp);
  }
}
.timeline {
  position: relative;
  padding-bottom: 350px;
}

.headline + .timeline {
  margin-top: -116px;
}

@media only screen and (max-width: 899px) {
  .timeline {
    margin-top: 0;
    padding-bottom: 5.3333333333vw;
  }
}
@media only screen and (max-width: 580px) {
  .headline + .timeline {
    margin-top: -13.3333333333vw;
  }
}
@media only screen and (min-width: 900px) {
  .timeline:before {
    width: 34%;
    height: 100%;
    content: "";
    border-radius: 0 26px 26px 0;
    display: block;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
  }
  .timeline[data-color=steel]:before {
    background-color: var(--main-color1);
  }
  .timeline[data-color=soft]:before {
    background-color: var(--main-color2);
  }
  .timeline[data-color=etc]:before {
    background-color: var(--color-dark);
  }
}
.timelineL:after,
.timeline:after {
  opacity: 0;
  transition: 2s ease;
  transform-origin: top;
  transform: scaleY(0);
  content: "";
  width: 6px;
  height: 100%;
  background: var(--color-black);
  position: absolute;
  top: 0;
}

.timelineL:after,
.timeline:after {
  width: 3px;
  left: 8.13333%;
}

.timelineL.show:after,
.timeline.show:after {
  opacity: 1;
  transform: scaleY(1);
}

@media screen and (max-width: 899px) {
  .timelineL:after,
  .timeline:after {
    width: 2px;
    left: 11.23333%;
    z-index: 1;
  }
}
@media only screen and (min-width: 900px) {
  .timeline {
    padding-bottom: 180px;
  }
}
.timeline:last-child {
  padding-bottom: 0 !important;
}

@media only screen and (max-width: 899px) {
  .timeline[data-color=steel] .timeline_side {
    background-color: var(--main-color1);
  }
  .timeline[data-color=soft] .timeline_side {
    background-color: var(--main-color2);
  }
  .timeline[data-color=etc] .timeline_side {
    background-color: var(--color-dark);
  }
}
.timeline_section {
  position: relative;
}

@media only screen and (min-width: 900px) {
  .timeline_section {
    padding-top: 100px;
    padding-bottom: 30px;
    display: flex;
    justify-content: space-between;
  }
}
@media only screen and (max-width: 899px) {
  .timeline_section + .timeline_section {
    margin-top: 5.333333vw;
  }
}
@media only screen and (max-width: 540px) {
  .timeline_section + .timeline_section {
    margin-top: 8.333333vw;
  }
}
@media only screen and (min-width: 900px) {
  .timeline_side {
    width: 33.9%;
  }
}
@media only screen and (max-width: 899px) {
  .timeline_side {
    display: flex;
    align-items: flex-end;
    border-top-right-radius: 2.6666666667vw;
    border-bottom-right-radius: 2.6666666667vw;
    width: 93.333337vw;
    padding: 3.355555557vw 0;
  }
}
@media only screen and (max-width: 899px) {
  .timeline_main {
    padding: 0 8.5% 0 17.5%;
  }
}
@media only screen and (min-width: 900px) {
  .timeline_main {
    width: 66%;
    padding: 0 4%;
  }
}
.timeline_main p {
  font-size: var(--font-size-s);
  line-height: 1.8; /*2.13*/
}

@media screen and (max-width: 899px) {
  .timeline_main p {
    line-height: 1.8;
  }
}
@media screen and (max-width: 540px) {
  .timeline_main p {
    font-size: var(--font-size-s-sp);
    line-height: 1.8;
  }
}
.timeline_content {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}

@media only screen and (min-width: 900px) {
  .timeline_content {
    max-width: 560px;
  }
}
.timeline_number {
  position: relative;
  font-size: 3.5rem; /*2.5rem*/
  color: #fff;
  font-family: var(--font-main-family);
  line-height: 1.3;
  text-align: right;
}

.timeline_number span {
  display: block;
  font-size: 0.9rem;
}

@media only screen and (max-width: 899px) {
  .timeline_number span {
    display: inline-block;
    margin-left: 0.3rem;
  }
}
@media only screen and (min-width: 900px) {
  .timeline_year {
    position: sticky;
    top: 230px;
    display: flex;
    justify-content: flex-end;
    padding-right: 15%;
  }
}
@media only screen and (max-width: 899px) {
  .timeline_year_inner {
    display: flex;
    align-items: baseline;
    padding: 0;
    margin: 0;
    width: 93.333337vw;
  }
}
.timeline_number:before {
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--bg-color-white);
  position: absolute;
  border: solid 6px var(--color-black);
  top: 0;
  left: 0;
  z-index: 2;
}

.timeline_number:before {
  width: 15.33333px;
  height: 15.33333px;
  border-radius: 2.66667vw;
  left: -26%;
  border-width: 3px;
  top: 30px;
}

.timeline_number img {
  width: 100%;
}

@media only screen and (max-width: 899px) {
  .timeline_number {
    position: static;
    font-size: 2.025rem;
    width: 50%;
    margin-left: 18%;
    text-align: left;
  }
  .timeline_number:before {
    border: solid 2px var(--color-black);
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    left: 9.22222%;
    top: 26px;
  }
  .timeline_number span {
    font-size: 3.1333333333vw;
  }
  .timeline_cat {
    width: 40%;
    padding-right: 1rem;
  }
}
.timeline_title {
  position: relative;
}

.timeline_title h3 {
  margin-top: 17px;
  display: block;
  font-size: 1.75rem; /*2.125rem 1.75rem*/
  font-family: var(--font-main-family);
  line-height: 1.4;
}

@media only screen and (max-width: 899px) {
  .timeline_title h3 {
    margin-top: 5.333333vw;
    font-size: 1.3825rem;
  }
}
[data-color=steel] .timeline_title h3 {
  color: var(--main-color1);
}

[data-color=soft] .timeline_title h3 {
  color: var(--main-color2);
}

[data-color=etc] .timeline_title h3 {
  color: var(--color-dark);
}

.timeline_side .timeline_title h3 {
  display: none;
  font-size: var(--font-size-xl);
  padding: 10px 10px;
  border-radius: 10px;
  opacity: 1;
  position: absolute;
  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  right: 0;
}

[data-color=steel] .timeline_main .timeline_title h3 {
  color: var(--main-color1);
}

[data-color=soft] .timeline_main .timeline_title h3 {
  color: var(--main-color2);
}

[data-color=etc] .timeline_main .timeline_title h3 {
  color: var(--color-dark);
}

.timeline_cat p {
  font-size: var(--font-size-min);
  line-height: 1;
  display: inline-block;
}

@media only screen and (max-width: 899px) {
  .timeline_cat p {
    font-size: var(--font-size-min-sp);
  }
}
.timeline_side .timeline_cat p {
  color: #fff;
  display: block;
  text-align: right;
  margin-top: 1rem;
}

.timeline_main .timeline_cat p {
  display: none;
}

[data-color=steel] .timeline_main .timeline_cat p {
  color: var(--main-color1);
}

[data-color=soft] .timeline_main .timeline_cat p {
  color: var(--main-color2);
}

.timeline_deco {
  position: sticky;
  height: 0;
  width: 100%;
  display: block;
}

.timeline_deco {
  top: 220px;
}

.timeline_deco > div {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
}

@media only screen and (min-width: 900px) {
  .timeline_deco > div {
    right: 0.5%;
    width: 72.611111%;
  }
}
.timeline_deco > div img {
  display: block;
  max-width: none;
  width: 100%;
}

.timeline_deco > div {
  opacity: 0;
  transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.show .timeline_deco > div {
  opacity: 1;
}

@keyframes scrolldown {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}
.c_headline_set__head {
  font-family: var(--font-main-family);
  font-size: 5.8667vw;
  padding-left: 0.2667vw;
  text-align: center;
  line-height: 1;
}

@media screen and (min-width: 900px) {
  .c_headline_set__head {
    font-size: 4.25rem;
  }
}
.c_headline_set__head.scroll-in.show {
  height: 100%;
  opacity: 1;
}

.c_headline_set__head.scroll-in:not(.show) {
  height: 0;
}

.c_headline_set__head.scroll-in {
  overflow: hidden;
  opacity: 0;
  transition: height 1.2s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.01s cubic-bezier(0.19, 1, 0.22, 1);
  backface-visibility: hidden;
}

.txt_stroke {
  position: relative;
  display: inline-block;
  border-bottom: 3px solid var(--color-black);
  padding: 0 3.5rem 0.5rem;
}

.txt_stroke .fore {
  position: relative;
  z-index: 5;
}

.txt_stroke .fore img {
  height: 50px;
  width: auto;
}

.episode .txt_stroke {
  display: block;
  margin: 0 6.6%;
  padding: 0 3.5rem 1rem;
}

[data-color=steel] .episode .txt_stroke {
  border-bottom: 3px solid var(--main-color1);
}

[data-color=soft] .episode .txt_stroke {
  border-bottom: 3px solid var(--main-color2);
}

[data-color=etc] .episode .txt_stroke {
  border-bottom: 3px solid var(--color-dark);
}

.episode .txt_stroke .fore img {
  height: auto;
}

@media only screen and (max-width: 899px) {
  .episode .txt_stroke .fore img {
    height: 30px;
  }
}
.c_headline {
  transition-delay: 0.1s;
  font-family: var(--font-main-family);
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  margin-top: 1%;
}

.c_headline.scroll-in.show {
  width: 100%;
  opacity: 1;
}

.c_headline.scroll-in:not(.show) {
  width: 0;
}

.c_headline.scroll-in {
  overflow: hidden;
  opacity: 0;
  transition: width 1.2s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.01s cubic-bezier(0.19, 1, 0.22, 1);
  backface-visibility: hidden;
}

@media screen and (max-width: 899px) {
  .c_headline {
    margin-top: 3%;
  }
}
@media screen and (min-width: 900px) {
  .c_headline {
    font-size: 2rem;
  }
}
.c_headline__inner {
  display: block;
}

@media screen and (min-width: 900px) {
  .c_headline__inner {
    min-width: 400px;
  }
}
.c_headline__sub {
  display: block;
  line-height: 1.3;
}

@media screen and (min-width: 900px) {
  .c_headline__sub {
    font-size: 1.1625rem;
    margin-bottom: 8px;
  }
}
.c_headline__sub img {
  width: 100%;
  height: 20px;
}

.txt {
  margin: 5.33333% 4.83333% 0 4.8888%;
  font-size: var(--font-size-s);
  line-height: 1.78571;
  line-height: 1.8; /*2.13*/
  text-align: center;
}

@media screen and (max-width: 540px) {
  .txt {
    font-size: var(--font-size-s-sp);
  }
}
.st {
  font-family: var(--font-main-family);
  font-weight: bold;
}

.txt.bod {
  width: -moz-fit-content;
  width: fit-content;
  margin: 7.33333% auto 0;
  letter-spacing: 0.05em;
  background: var(--bg-color-white);
  padding: 0.3rem 0.9rem;
  border-radius: 0.3rem;
}

@media screen and (max-width: 767px) {
  .txt.bod {
    letter-spacing: 0.02em;
  }
}
#container {
  margin: 20px;
  width: 200px;
  height: 200px;
  position: relative;
  outline: 1px solid var(--color-black);
}

.oubo {
  display: block;
  position: relative;
  width: 244px;
  margin: 0 auto;
}

a.square_btn:link,
a.square_btn:visited,
.square_btn {
  display: block;
  position: relative;
  width: 244px;
  border-radius: 3rem;
  margin: 0 auto;
  color: #fff;
  font-family: var(--font-main-family);
  text-align: center;
  overflow: hidden;
  background: var(--color-black);
  transition: background 0s, color 0.3s, transform 0.3s;
  margin-top: 2rem;
}

@media screen and (max-width: 899px) {
  .episode a.square_btn:link,
  .episode a.square_btn:visited,
  .episode .square_btn {
    width: 200px;
  }
}
a.square_btn.btn_bod:link,
a.square_btn.btn_bod:visited,
.square_btn.btn_bod {
  border: 3px solid var(--color-black);
}

a.square_btn:hover,
.square_btn:hover {
  color: var(--color-black);
  background: transparent;
  transform: scale(1.08);
}

a.disabled_btn:link,
a.disabled_btn:visited,
.disabled_btn,
a.square_btn.disabled_btn.btn_bod:link,
a.square_btn.disabled_btn.btn_bod:visited,
.square_btn.disabled_btn.btn_bod {
  pointer-events: none;
  color: #efefef;
  background: #c4c4c4;
  border: 3px solid #939393;
}

a.square_btn path,
.square_btn path {
  fill: #fff;
}

a.square_btn:hover path,
.square_btn:hover path {
  fill: var(--color-black);
}

a.square_btn.btn_blue:link,
a.square_btn.btn_blue:visited,
.square_btn.btn_blue {
  background: var(--main-color2);
}

a.square_btn.btn_blue:hover,
.square_btn.btn_blue:hover {
  color: var(--main-color2);
}

a.square_btn.btn_blue:hover path,
.square_btn.btn_blue:hover path {
  fill: var(--main-color2);
}

a.square_btn.button-red:link,
a.square_btn.button-red:visited,
.square_btn.button-red {
  background: var(--main-color1);
}

a.square_btn.button-red:hover,
.square_btn.button-red:hover {
  color: var(--main-color1);
}

a.square_btn.button-red:hover path,
.square_btn.button-red:hover path {
  fill: var(--main-color1);
}

.square_btn::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 244px;
  height: 244px;
  border-radius: 50%;
  background: var(--bg-color-white);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: transform 0.4s, opacity 0.3s;
  pointer-events: none;
}

.square_btn:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.square_btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  background: var(--color-black);
}

.square_btn.btn_blue::after {
  content: "";
  background: var(--main-color2);
}

.square_btn.button-red::after {
  content: "";
  background: var(--main-color1);
}

.square_btn__txt {
  display: block;
}

.square_btn__txt.-en {
  display: block;
  padding: 0.4rem 0 0.5rem 0;
}

.square_btn:hover .square_btn__txt {
  animation: square_btn_animation 0.4s;
}

.square_btn .ico {
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -16px;
}

.square_btn .svg.replaced-svg {
  width: 11px;
  height: 11px;
  transition: all ease 0.3s;
}

@keyframes square_btn_animation {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-30%);
    opacity: 0;
  }
  50.1% {
    transform: translateY(30%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.c_txt_image__image {
  position: relative;
}

.c_txt_image__image_box {
  overflow: hidden;
  position: relative;
  border: solid 3px var(--color-black);
  z-index: 20;
  margin: 3rem auto 0;
}

.c_txt_image__image_box a {
  display: block;
}

@media screen and (min-width: 900px) {
  .c_txt_image {
    position: relative;
    width: 1060px;
    margin: 0 auto;
    display: flex;
  }
  .c_txt_image .c_headline_set {
    top: 4px;
  }
  .c_txt_image .c_headline_set.scroll-in.show {
    width: 400px;
  }
  .c_txt_image .c_headline_set {
    position: absolute;
    top: 30px;
    left: 530px;
  }
  .c_headline_set__head {
    font-size: 1.75rem; /*3.25rem*/
    line-height: 1;
  }
}
.-close .c_txt_image__image_box {
  border-color: rgba(0, 0, 0, 0.5);
}

.c_txt_image__image_box {
  margin: 2rem 4.8888% 3rem;
  width: auto;
  height: auto;
}

@media screen and (max-width: 1099px) {
  .c_txt_image__image_box {
    margin: 7rem 4.8888%;
  }
}
@media screen and (max-width: 1099px) {
  .c_txt_image__image_box {
    margin: 3rem 4.8888%;
  }
}
/* image action */
picture {
  display: block;
}

.c_txt_image .c_headline_set.scroll-in.show {
  width: 100%;
  opacity: 1;
}

.c_txt_image .c_headline_set {
  z-index: 20;
}

.scroll-in.show .c_illust.animation_pt1,
.c_illust.scroll-in.show.animation_pt1 {
  animation: kata 2.5s cubic-bezier(0.19, 1, 0.22, 1) 0s infinite normal;
  transform-origin: bottom center;
}

.c_illust {
  position: absolute;
  z-index: 15;
}

.timelineEnd .scroll-in.show .c_illust.animation_pt3,
.scroll-in.show .c_illust.animation_pt3,
.c_illust.scroll-in.show.animation_pt3 {
  animation: pyon 2.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0s infinite normal;
  -webkitanimation_delay: 0.4s;
  animation-delay: 0.4s;
  transform-origin: center center;
}

.c_illust {
  position: absolute;
  z-index: 15;
}

.scroll-in.show .c_illust img,
.c_illust.scroll-in.show img {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.scroll-in .c_illust img,
.c_illust.scroll-in img {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.02s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes kata {
  0%, 50% {
    transform: rotate(0deg);
  }
  62.5%, 87.5% {
    transform: rotate(-2deg) translateY(-3px);
  }
  75%, 100% {
    transform: rotate(0deg);
  }
}
@keyframes pyon {
  0%, 50% {
    transform: translateY(0);
  }
  62.5%, 87.5% {
    transform: translateY(-11px) scale(1.05);
  }
  75%, 100% {
    transform: translateY(0);
  }
}
body .wrapper .content .footer {
  padding: 6% 0 3.33333%;
  background: var(--bg-color-white);
  text-align: center;
}

.footer__ttl {
  margin-top: 3.90625vh;
}

.footer__ttl span {
  display: inline-block;
  position: relative;
}

.outside {
  width: calc(100% + 180px);
  transform: translateX(-90px);
}

body .wrapper .content .footer__staff_credit {
  margin-top: 1.90625vh;
  font-size: var(--font-size-m);
  line-height: 2.16667;
}

@media screen and (max-width: 899px) {
  body .wrapper .content .footer__staff_credit {
    font-size: var(--font-size-m-sp);
    line-height: 1.8;
  }
}
.fix .pagetop {
  opacity: 1;
  display: block;
  animation: zoomIn 0.2s;
  transform: scale(1, 1);
  transition: 0.2s;
}

.pagetop {
  display: none;
  opacity: 0;
  position: fixed;
  right: 25px;
  bottom: 20px;
  transition: 0.2s;
  cursor: pointer;
  z-index: 3;
}

.pagetop a {
  display: inline-block;
  position: relative;
}

.fix .pagetop a:hover {
  animation: puni 1s infinite linear;
}

.pagetop a:after {
  display: inline-block;
  content: "";
  background: url(/wp-content/themes/dartslive/img/20th_anniversary/illust_s_thunder_v.png) no-repeat 50%;
  background-size: 56px;
  width: 56px;
  height: 56px;
}

@keyframes puni {
  0% {
    transform: scale(0.9, 1.05) translateY(0);
  }
  15% {
    transform: scale(1.1, 0.9) translateY(10%);
  }
  30% {
    transform: scale(1, 1) translateY(0);
  }
  45% {
    transform: scale(1.05, 0.95) translateY(5%);
  }
  60% {
    transform: scale(1, 1) translateY(0);
  }
  75% {
    transform: scale(1.02, 0.98) translateY(2%);
  }
  80% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}
@media screen and (max-width: 899px) {
  .fix .pagetop {
    display: none;
  }
}