@charset "UTF-8";
/*
@font-face {
  font-family: "Cardo";
  font-weight:400;
  src: url("../fonts/Cardo-Regular_limited.woff2") format("woff2"),
  url("../fonts/Cardo-Regular_limited.woff") format("woff");
}

@font-face {
  font-family: "Cardo";
  font-weight:700;
  src: url("../fonts/Cardo-Bold_limited.woff2") format("woff2"),
  url("../fonts/Cardo-Bold_limited.woff") format("woff");
}*/
/*$breakpoint-maxw: (
  "pc": "screen and (max-width:" + $pcContentWidth + ")",
  //PCコンテンツ幅
  "tab": "screen and (max-width: 768px)",
  "sp": "screen and (max-width: 480px)",
  "sp-s": "screen and (max-width: 375px)"
) !default;*/
/*
  フォントサイズ計算
*/
/*@mixin font-vw($size) {
  font-size: $size + px;
  font-size: math.div($size, 16) + rem;
}*/
/*@mixin margin($mt, $mr, $mb, $ml) {
  margin: round(math.div($mt, $pcContentWidth) * 100%) round(math.div($mr, $pcContentWidth) * 100%)
    round(math.div($mb, $pcContentWidth) * 100%) round(math.div($ml, $pcContentWidth) * 100%); //math.div(変数,変数)は割り算の意味
}*/
/*@mixin padding($pt, $pr, $pb, $pl) {
  padding: round(math.div($pt, $pcContentWidth) * 100%) round(math.div($pr, $pcContentWidth) * 100%)
    round(math.div($pb, $pcContentWidth) * 100%) round(math.div($pl, $pcContentWidth) * 100%); //math.div(変数,変数)は割り算の意味
}*/
/*@mixin width($w) {
  width: math.div($w, $pcContentWidth) * 100%; //math.div(変数,変数)は割り算の意味
}*/
/*
:root {
  --color-default: #6d6d68;
  //--color-yellow: #fffb00;
  --color-yellow: #ffea00;
  --color-red: #ea3700;
  --color-grayborder: #909087;
  --color-graymat: #f7f7f7;
}*/
body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
}

main {
  overflow-x: hidden;
}

/*
.intro{
  overflow-x: hidden;
  overflow-y: scroll;
}
.message{
  overflow-x: hidden;
  overflow-y: scroll;
}
.history{
  overflow-x: hidden;
  overflow-y: scroll;
}
.ending{
  overflow-x: hidden;
  overflow-y: scroll;
}*/
/*
main{
  overflow-x: hidden;
  overflow-y: scroll;
}
.history{
  overflow-x: hidden;
}
body.active{
  overflow-y: auto;

  main{
    overflow-y: hidden;
  }
}*/
figure,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul,
li {
  margin: 0;
  padding: 0;
}

i,
em {
  font-style: normal;
}

ul,
li {
  list-style: none;
}

img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
}

.sp-i {
  display: inline;
}
@media screen and (min-width:961px) {
  .sp-i {
    display: none !important;
  }
}
@media screen and (min-width:1441px) {
  .sp-i {
    display: none !important;
  }
}

.sp-ib {
  display: inline-block;
}
@media screen and (min-width:961px) {
  .sp-ib {
    display: none !important;
  }
}
@media screen and (min-width:1441px) {
  .sp-ib {
    display: none !important;
  }
}

.sp-b {
  display: block;
}
@media screen and (min-width:961px) {
  .sp-b {
    display: none !important;
  }
}
@media screen and (min-width:1441px) {
  .sp-b {
    display: none !important;
  }
}

.pc-i {
  display: none;
}
@media screen and (min-width:961px) {
  .pc-i {
    display: inline !important;
  }
}
@media screen and (min-width:1441px) {
  .pc-i {
    display: inline !important;
  }
}

.pc-ib {
  display: none;
}
@media screen and (min-width:961px) {
  .pc-ib {
    display: inline-block !important;
  }
}
@media screen and (min-width:1441px) {
  .pc-ib {
    display: inline-block !important;
  }
}

.pc-b {
  display: none;
}
@media screen and (min-width:961px) {
  .pc-b {
    display: block !important;
  }
}
@media screen and (min-width:1441px) {
  .pc-b {
    display: block !important;
  }
}

.inner {
  margin: 0 auto;
  max-width: 664px;
  position: relative;
}

.intro {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  /*@keyframes mask-anime {
    0% {
      mask-position: 130% 130%; //マスクがある＝全部隠れてる
    }
    100% {
      mask-position: 0 0; //マスクがない＝全部出てる
    }
  }*/
  /*&:before {
    content: "";
    display: block;
    width: 100%;
    height: 100vh;
    animation: fiftyYears 1s 1s ease forwards;
    background: url(../images/txt_50years.svg) center center no-repeat;
    //opacity: 0;

    mask-image: linear-gradient(135deg, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
    mask-position: 0% 0%;
    mask-size: 250% 250%;
    mask-repeat: no-repeat;
    mask-position: 130% 130%;
    animation: mask-anime 1.5s linear forwards;
  }*/
  /*&.active {
    &:before{
      content:'';
      display:block;
      width:100%;
      height:100vh;
      animation: fiftyYears 1s 1s ease forwards;
      background:url(../images/txt_50years.svg) center center no-repeat;
      //opacity: 0;

      mask-image: linear-gradient(135deg, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
      mask-position:0% 0%;
      mask-size: 250% 250%;
      mask-repeat: no-repeat;
      mask-position: 130% 130%;
      animation: mask-anime 1.5s linear forwards;
    }

  }
  @keyframes fiftyYears {
    0% {
      //opacity: 0;
      mask-position: 130% 130%;	//マスクがある＝全部隠れてる
    }
    100% {
      //opacity: 1;
      mask-position: 0 0;	//マスクがない＝全部出てる
    }
  }*/
  /*&:before{
    content:'';
    display:block;
    width:100%;
    height:1px;
    background-color:#ccc;
    position:absolute;
    left:0;
    top:50%;
  }
  &:after{
    content:'';
    display:block;
    width:1px;
    height:100%;
    background-color:#ccc;
    position:absolute;
    left:50%;
    top:0;
  }*/
  /*$nengoStart-duration: 3s;
  $nengoStart-delay: 0s;
  $nengoWait: $nengoStart-duration + $nengoStart-delay;*/
}
.intro .mask-animation {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  z-index: -1;
  position: relative;
  /*&.active {
    .masked-image {
      animation: mask-anime 1.5s linear forwards;
    }
  }*/
}
.intro .mask-animation span {
  display: block;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background-color: #fff;
  width: 200%;
  height: 200%;
  position: absolute;
  left: 0%;
  top: 0%;
  transform-origin: left bottom;
  transform: translate(-50%, -50%);
}
.intro .masked-image {
  display: block;
  width: 90%;
  height: 90%;
  /*mask-image: linear-gradient(135deg, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  mask-position: 0% 0%;
  mask-size: 250% 250%;
  mask-repeat: no-repeat;
  mask-position: 130% 130%;*/
}
@media screen and (min-width:961px) {
  .intro .masked-image {
    width: 80%;
    height: 80%;
  }
}
.intro .nengo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  /*@keyframes nengoStart {
    0% {
      opacity: 0;
      transform: translate(-50%, 0%);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
  }
  @keyframes nengoEnd {
    0% {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.5);
    }
  }*/
}
.intro .nengo .nengo-inner {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 160px;
  height: 42.6666666667vw;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width:961px) {
  .intro .nengo .nengo-inner {
    height: 270px;
  }
}
.intro .nengo .nengo-inner:after {
  content: "";
  display: inline-block;
  height: 100%;
  z-index: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.intro .nengo .nengo-inner p {
  font-family: "Cardo", serif;
  line-height: 1;
  z-index: 1;
  position: relative;
  font-size: 160px;
  font-size: 42.6666666667vw;
  /*@keyframes keta1000 {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(1em);
    }
  }*/
  /*@keyframes keta100 {
    0% {
    }
    100% {
      transform: translateY(1em);
    }
  }*/
  /*@keyframes keta10a {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(1em);
    }
  }
  @keyframes keta10b {
    0% {
      transform: translateY(1em);
    }
    100% {
      transform: translateY(2em);
    }
  }
  @keyframes keta10c {
    0% {
      transform: translateY(2em);
    }
    100% {
      transform: translateY(3em);
    }
  }
  @keyframes keta10d {
    0% {
      transform: translateY(3em);
    }
    100% {
      transform: translateY(4em);
    }
  }
  @keyframes keta10e {
    0% {
      transform: translateY(4em);
    }
    100% {
      transform: translateY(5em);
    }
  }*/
  /*@keyframes keta1wait {
    0% {
    }
    100% {
    }
  }
  @keyframes keta1a {
    0% {
    }
    100% {
      transform: translateY(50em);
    }
  }*/
}
@media screen and (min-width:961px) {
  .intro .nengo .nengo-inner p {
    font-size: 270px;
  }
}
.intro .nengo .nengo-inner p:nth-child(1) {
  /*animation-name: keta1000;
  animation-duration: 0.4s; //動作にかかる時間
  animation-delay: $nengoWait + 2.4s; //始まる前の待ち時間
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;*/
}
.intro .nengo .nengo-inner p:nth-child(2) {
  /*animation-name: keta100;
  animation-duration: 0.4s; //動作にかかる時間
  animation-delay: $nengoWait + 2.4s; //始まる前の待ち時間
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;*/
}
.intro .nengo .nengo-inner p:nth-child(3) {
  /*animation:
    keta10a 0.4s $nengoWait + 0.4s ease-out forwards,
    keta10b 0.4s $nengoWait + 1.4s ease-out forwards,
    keta10c 0.4s $nengoWait + 2.4s ease-out forwards,
    keta10d 0.4s $nengoWait + 3.4s ease-out forwards,
    keta10e 0.4s $nengoWait + 4.4s ease-out forwards;*/
}
.intro .nengo .nengo-inner p:nth-child(4) {
  /*animation-name: keta1wait, keta1a;
  animation-duration: 6s; //動作にかかる時間
  animation-delay: $nengoWait + 0; //始まる前の待ち時間
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1; //実行回数*/
}
.intro .oplogo {
  width: 300px;
  width: 80vw;
  height: 43px;
  height: 11.4666666667vw;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 100;
  opacity: 0;
  transform: translate(-50%, -110%);
  /*&.active {
    animation: logoStart 1.5s 1.5s ease forwards;
    opacity: 0;
  }

  @keyframes logoStart {
    0% {
      opacity: 0;
      transform: translate(-50%, -110%);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, -160%);
    }
  }*/
}
@media screen and (min-width:961px) {
  .intro .oplogo {
    width: 430px;
    height: 62px;
  }
}
.intro .oplogo h1 {
  position: relative;
}
.intro .oplogo h1 span {
  display: block;
  text-align: center;
}
.intro .oplogo h1 span.old {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
}
.intro .oplogo h1 span.new {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
}
.intro .aniv {
  display: block;
  font-size: 40px;
  font-size: 10.6666666667vw;
  font-family: "Cardo", serif;
  line-height: 1;
  white-space: nowrap;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 30%);
  z-index: 100;
  opacity: 0;
  /*&.active {
    animation: anivStart 1.5s ease forwards;
    opacity: 0;
  }

  @keyframes anivStart {
    0% {
      opacity: 0;
      transform: translate(-50%, 30%);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, -20%);
    }
  }*/
}
@media screen and (min-width:961px) {
  .intro .aniv {
    font-size: 60px;
  }
}
.intro .aniv em {
  padding: 0 0.04em 0 0;
  font-size: 40px;
  font-size: 10.6666666667vw;
  letter-spacing: -0.06em;
}
@media screen and (min-width:961px) {
  .intro .aniv em {
    font-size: 60px;
  }
}

.letsScroll {
  position: absolute;
  right: 5%;
  bottom: 0;
  height: 145px;
  font-size: 12px;
  line-height: 1;
  z-index: 0;
  transform: translate(0, 160px);
  /*&.active {
    animation: itemMove 1s 1s ease forwards;
    //animation:(animation-name)(animation-duration)(animation-delay)(animation-iteration-count);
  }
  @keyframes itemMove {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 1;
      transform: translateY(calc(-100% - 72px));
    }
  }*/
}
@media screen and (min-width:961px) {
  .letsScroll {
    height: 155px;
    font-size: 14px;
  }
}
.letsScroll span {
  display: inline-block;
  writing-mode: vertical-rl;
  position: relative;
  height: 45px;
  letter-spacing: 0.02em;
}
@media screen and (min-width:961px) {
  .letsScroll span {
    height: 55px;
  }
}
.letsScroll span:before {
  content: "";
  width: 1px;
  height: 100px;
  background-color: #0474b6;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -100px;
  margin: auto;
  z-index: 1;
  animation: scroll-line 2s 3s infinite;
}
.letsScroll span:after {
  content: "";
  width: 1px;
  height: 100px;
  background-color: #bcd9ea;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -100px;
  margin: auto;
  z-index: 0;
}
@keyframes scroll-line {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

.message {
  padding-top: 80px;
  padding-top: 21.3333333333vw;
  padding-bottom: 80px;
  padding-bottom: 21.3333333333vw;
  position: relative;
  overflow: hidden;
  z-index: 10;
  /* スライダー全体 */
  /* スライド3枚のグループ */
  /* スライド */
  /* スライドの画像 */
  /* CSSアニメーション */
}
@media screen and (min-width:961px) {
  .message {
    padding: 150px 0;
  }
}
.message .inner {
  margin: 0 auto;
  max-width: 64vw;
}
@media screen and (min-width:961px) {
  .message .inner {
    margin: 0 auto;
    max-width: 664px;
  }
}
.message .messagelogo {
  text-align: center;
}
.message .messagelogo img {
  margin: 0 auto;
  height: 100px;
}
@media screen and (min-width:961px) {
  .message .messagelogo img {
    height: 145px;
  }
}
.message h1 {
  margin: 15px 0 0;
  height: 80px;
  height: 21.3333333333vw;
  text-align: center;
  font-size: 22px;
  font-size: 5.8666666667vw;
  font-weight: 500;
  font-family: "Zen Old Mincho", serif;
}
@media screen and (min-width:415px) {
  .message h1 {
    height: 100px;
    font-size: 30px;
  }
}
@media screen and (min-width:961px) {
  .message h1 {
    height: 130px;
    font-size: 34px;
  }
}
.message .message-box {
  position: relative;
}
.message .message-box h2.copy {
  position: absolute;
  left: -55px;
  left: -14.6666666667vw;
  top: 0;
  writing-mode: vertical-rl;
  font-size: 24px;
  font-size: 6.4vw;
  font-weight: 500;
  font-family: "Zen Old Mincho", serif;
  letter-spacing: 0.25em;
  white-space: nowrap;
  z-index: 1;
  transform-origin: center center;
}
@media screen and (max-height:768px) {
  .message .message-box h2.copy {
    left: -125px !important;
    font-size: 6.2vh !important;
  }
}
@media screen and (min-width:961px) {
  .message .message-box h2.copy {
    left: -150px;
    font-size: 60px;
  }
}
.message .message-box h2.copy i {
  opacity: 1;
}
.message h3 {
  display: block;
  margin-bottom: 40px;
  margin-bottom: 10.6666666667vw;
  font-size: 15px;
  font-size: 4vw;
  line-height: 1.6;
  font-weight: 700;
}
@media screen and (min-width:415px) {
  .message h3 {
    margin: 0 0 60px;
    font-size: 20px;
  }
}
@media screen and (min-width:961px) {
  .message h3 {
    margin: 0 0 60px;
    font-size: 22px;
  }
}
.message h3 span {
  display: inline-block;
  font-weight: 500;
  font-family: "Zen Old Mincho", serif;
  margin-left: -5px;
  margin-left: -1.3333333333vw;
  margin-right: -5px;
  margin-right: -1.3333333333vw;
  padding-left: 12px;
  padding-left: 3.2vw;
  padding-right: 10px;
  padding-right: 2.6666666667vw;
  padding-top: 2px;
  padding-top: 0.5333333333vw;
  padding-bottom: 2px;
  padding-bottom: 0.5333333333vw;
  position: relative;
}
@media screen and (min-width:961px) {
  .message h3 span {
    margin: 0;
    padding: 0 28px;
  }
}
.message h3 span:before {
  content: "";
  display: inline-block;
  width: 5px;
  width: 1.3333333333vw;
  height: 21px;
  height: 5.6vw;
  border-left: solid 1px #333;
  border-top: solid 1px #333;
  position: absolute;
  left: 0;
  top: -0.05em;
}
@media screen and (min-width:961px) {
  .message h3 span:before {
    width: 0.6em;
    height: 1.5em;
  }
}
.message h3 span:after {
  content: "";
  display: inline-block;
  width: 5px;
  width: 1.3333333333vw;
  height: 21px;
  height: 5.6vw;
  border-right: solid 1px #333;
  border-bottom: solid 1px #333;
  position: absolute;
  right: 0;
  bottom: -0.05em;
}
@media screen and (min-width:961px) {
  .message h3 span:after {
    width: 0.6em;
    height: 1.5em;
  }
}
.message h4 {
  display: block;
  text-align: center;
  margin-top: 40px;
  margin-top: 10.6666666667vw;
  margin-bottom: 40px;
  margin-bottom: 10.6666666667vw;
  font-size: 15px;
  font-size: 4vw;
  line-height: 1.7;
  font-weight: 700;
}
@media screen and (min-width:415px) {
  .message h4 {
    margin: 60px 0;
    font-size: 20px;
  }
}
@media screen and (min-width:961px) {
  .message h4 {
    margin: 60px 0;
    font-size: 24px;
  }
}
.message h4 span {
  display: inline-block;
  font-weight: 500;
  font-family: "Zen Old Mincho", serif;
  margin-left: -20px;
  margin-left: -5.3333333333vw;
  margin-right: -20px;
  margin-right: -5.3333333333vw;
  padding-left: 15px;
  padding-left: 4vw;
  padding-right: 10px;
  padding-right: 2.6666666667vw;
  position: relative;
  text-align: left;
}
@media screen and (min-width:961px) {
  .message h4 span {
    margin: 0;
    padding: 0 28px;
    text-align: center;
  }
}
.message h4 span:before {
  content: "";
  display: inline-block;
  width: 5px;
  width: 1.3333333333vw;
  height: 21px;
  height: 5.6vw;
  border-left: solid 1px #333;
  border-top: solid 1px #333;
  position: absolute;
  left: 0;
  top: -0.05em;
}
@media screen and (min-width:961px) {
  .message h4 span:before {
    width: 0.6em;
    height: 1.5em;
  }
}
.message h4 span:after {
  content: "";
  display: inline-block;
  width: 5px;
  width: 1.3333333333vw;
  height: 21px;
  height: 5.6vw;
  border-right: solid 1px #333;
  border-bottom: solid 1px #333;
  position: absolute;
  right: 0;
  bottom: -0.05em;
}
@media screen and (min-width:961px) {
  .message h4 span:after {
    width: 0.6em;
    height: 1.5em;
  }
}
.message p {
  font-size: 12px;
  font-size: 3.2vw;
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: justify;
}
@media screen and (min-width:415px) {
  .message p {
    font-size: 15px;
  }
}
@media screen and (min-width:961px) {
  .message p {
    font-size: 16px;
  }
}
.message p:nth-of-type(n + 2) {
  margin-top: 36px;
  margin-top: 9.6vw;
}
@media screen and (min-width:415px) {
  .message p:nth-of-type(n + 2) {
    margin: 50px 0 0;
  }
}
@media screen and (min-width:961px) {
  .message p:nth-of-type(n + 2) {
    margin: 50px 0 0;
  }
}
.message p.sign {
  text-align: right;
  font-weight: 700;
}
.message .block {
  position: relative;
}
.message .block.halftone1:before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 82px;
  width: 21.8666666667vw;
  height: 82px;
  height: 21.8666666667vw;
  background: url(../images/img_ball.png) right bottom/contain no-repeat;
  left: -100px;
  left: -26.6666666667vw;
  top: -58px;
  top: -15.4666666667vw;
}
@media screen and (min-width:961px) {
  .message .block.halftone1:before {
    width: 160px;
    height: 160px;
    left: -330px;
    top: -110px;
  }
}
.message .block.halftone2:before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 72px;
  width: 19.2vw;
  height: 110px;
  height: 29.3333333333vw;
  background: url(../images/img_coach.png) 0 0/contain no-repeat;
  right: -95px;
  right: -25.3333333333vw;
  top: -18px;
  top: -4.8vw;
}
@media screen and (min-width:961px) {
  .message .block.halftone2:before {
    width: 207px;
    height: 314px;
    right: -325px;
    top: -100px;
  }
}
.message .block.halftone2:after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 53px;
  width: 14.1333333333vw;
  height: 86px;
  height: 22.9333333333vw;
  background: url(../images/img_girl.png) 0 bottom/contain no-repeat;
  right: -65px;
  right: -17.3333333333vw;
  bottom: -50px;
  bottom: -13.3333333333vw;
}
@media screen and (min-width:961px) {
  .message .block.halftone2:after {
    width: 153px;
    height: 245px;
    right: -240px;
    bottom: -90px;
  }
}
.message .block.halftone3:before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 68px;
  width: 18.1333333333vw;
  height: 83px;
  height: 22.1333333333vw;
  background: url(../images/img_kid.png) right bottom/contain no-repeat;
  left: -75px;
  left: -20vw;
  top: -96px;
  top: -25.6vw;
}
@media screen and (min-width:961px) {
  .message .block.halftone3:before {
    width: 185px;
    height: 224px;
    left: -260px;
    top: -110px;
  }
}
.message .block.halftone3:after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 68px;
  width: 18.1333333333vw;
  height: 109px;
  height: 29.0666666667vw;
  background: url(../images/img_mister.png) right bottom/contain no-repeat;
  right: -78px;
  right: -20.8vw;
  bottom: -80px;
  bottom: -21.3333333333vw;
}
@media screen and (min-width:961px) {
  .message .block.halftone3:after {
    width: 207px;
    height: 314px;
    right: -310px;
    bottom: -85px;
  }
}
.message .block.halftone4:before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 85px;
  width: 22.6666666667vw;
  height: 125px;
  height: 33.3333333333vw;
  background: url(../images/img_ladies.png) left bottom/contain no-repeat;
  left: -72px;
  left: -19.2vw;
  top: -10px;
  top: -2.6666666667vw;
  bottom: auto;
}
@media screen and (min-width:961px) {
  .message .block.halftone4:before {
    width: 320px;
    height: 471px;
    left: -340px;
    bottom: -20px;
    top: auto;
  }
}
.message .slider-wrapper-wrap {
  margin-top: 60px;
  margin-top: 16vw;
  margin-bottom: 60px;
  margin-bottom: 16vw;
  position: relative;
}
@media screen and (min-width:415px) {
  .message .slider-wrapper-wrap {
    margin: 80px 0;
  }
}
@media screen and (min-width:961px) {
  .message .slider-wrapper-wrap {
    margin: 80px 0;
  }
}
.message .slider-wrapper-wrap:before {
  content: "";
  display: inline-block;
  width: 34px;
  width: 9.0666666667vw;
  height: 93px;
  height: 24.8vw;
  background: url(../images/txt_1975.svg) 0 0/contain no-repeat;
  position: absolute;
  right: 0;
  top: 0;
  margin-top: -85px;
  margin-top: -22.6666666667vw;
  z-index: 10;
}
@media screen and (min-width:961px) {
  .message .slider-wrapper-wrap:before {
    width: 110px;
    height: 300px;
    margin-top: -280px;
  }
}
.message .slider-wrapper-wrap:after {
  content: "";
  display: inline-block;
  width: 34px;
  width: 9.0666666667vw;
  height: 93px;
  height: 24.8vw;
  background: url(../images/txt_2025.svg) 0 0/contain no-repeat;
  position: absolute;
  right: 0;
  bottom: 0;
  margin-bottom: -85px;
  margin-bottom: -22.6666666667vw;
  z-index: 10;
}
@media screen and (min-width:961px) {
  .message .slider-wrapper-wrap:after {
    width: 110px;
    height: 300px;
    margin-bottom: -280px;
  }
}
.message .slider-wrapper {
  display: flex; /* スライドのグループを横並び */
  overflow: hidden; /* はみ出たスライドを隠す */
}
.message .slider {
  animation: scroll-left 36s infinite linear 0.5s forwards;
  display: flex; /* スライド3枚を横並び */
}
.message .slide {
  margin-right: 20px;
  width: 40vw; /* 最後の数字はスライドの枚数 */
}
@media screen and (min-width:961px) {
  .message .slide {
    margin-right: 30px;
    width: 20vw; /* 最後の数字はスライドの枚数 */
  }
}
.message .slide img {
  display: block;
  width: 100%;
}
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.sign {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
  gap: 4vw;
}
@media screen and (min-width:961px) {
  .sign {
    gap: 30px;
  }
}
.sign span {
  display: inline-block;
}
.sign span i {
  display: block;
  text-align: right;
  font-size: 9px;
  font-size: 2.4vw;
  line-height: 1.4;
  font-family: "Zen Old Mincho", serif;
}
@media screen and (min-width:415px) {
  .sign span i {
    font-size: 13px;
  }
}
@media screen and (min-width:961px) {
  .sign span i {
    font-size: 13px;
  }
}
.sign span em {
  display: block;
  margin-top: 10px;
  margin-top: 2.6666666667vw;
  text-align: right;
  font-size: 12px;
  font-size: 3.2vw;
  line-height: 1;
  font-family: "Zen Old Mincho", serif;
}
@media screen and (min-width:415px) {
  .sign span em {
    margin: 15px 0 0;
    font-size: 18px;
  }
}
@media screen and (min-width:961px) {
  .sign span em {
    margin: 15px 0 0;
    font-size: 18px;
  }
}
.sign img {
  max-width: 60px;
  max-width: 16vw;
}
@media screen and (min-width:961px) {
  .sign img {
    max-width: 108px;
  }
}

/*.history {
  width: 100%;
  height: 100dvh;
  background-color: #ccc;
  position: relative;

  h1 {
    position: absolute;
    left: 0;
    top: 0;
  }

  .history-inner {
    display: flex;
    align-items: center;
    padding-left: 100px;
    height: 100vh;

    .timeline {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;

      ul.list {
        display: flex;
        //gap: 50px;
        //width: 100%;
        background-color: yellow;

        li {
          padding-right: 150px;
          width: 500px;
          position: relative;

          &:nth-of-type(odd) {
            margin-top: -50px;
          }

          i {
            position: absolute;
            left: -1em;
            top: -0.5em;
            font-size: 50px;
            line-height: 1;
            font-family: "Cardo", serif;
            font-weight: 700;
          }
          figure {
            img {
            }
          }
          h3 {
            padding: 24px 0;
            text-align: center;
            font-size: 22px;
            line-height: 1.5;
          }
          p {
            margin: 0 10%;
            font-size: 15px;
            line-height: 1.8;
            letter-spacing: 0.01em;
            text-align: justify;
          }
        }
      }
    }
  }
}*/
/* 横スクロールセクション */
.history {
  position: relative;
  overflow: hidden;
}

.side-scroll {
  background: #eeebdd url(../images/bg_history.jpg) 0 0/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  /*&:before{
    content:'';
    display:block;
    width:100%;
    height:220px;
    background-color:#d4cbcb;
    position:absolute;
    left:0;
    top:240px;
    z-index:0;
  }*/
}
.side-scroll .side-scroll-container {
  width: 80vw;
}
@media screen and (min-width:415px) {
  .side-scroll .side-scroll-container {
    width: 420px;
  }
}
@media screen and (min-width:961px) {
  .side-scroll .side-scroll-container {
    width: 48vh;
  }
}
.side-scroll .side-scroll-container .side-scroll-heading {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
}
.side-scroll .side-scroll-container .side-scroll-heading h1 {
  display: none;
  /*display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 0 0;*/
}
@media screen and (min-width:961px) {
  .side-scroll .side-scroll-container .side-scroll-heading h1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 3vh;
  }
}
@media screen and (min-width:961px) {
  .side-scroll .side-scroll-container .side-scroll-heading h1 img {
    height: 6.5vh;
  }
}
.side-scroll .side-scroll-container .side-scroll-heading h1 span {
  padding: 0 0 4px 18px;
  white-space: nowrap;
  color: #000;
  font-size: 20px;
  font-size: 5.3333333333vw;
  font-weight: 500;
  font-family: "Zen Old Mincho", serif;
}
@media screen and (min-width:961px) {
  .side-scroll .side-scroll-container .side-scroll-heading h1 span {
    padding: 0 0 0.1vh 2.5vh;
    font-size: 4.5vh;
  }
}
.side-scroll .side-scroll-container .side-scroll-list-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100vh;
  position: relative;
}
.side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list {
  display: flex;
  position: absolute;
  left: 0;
  /*&:before{
    content:'';
    display:block;
    width:calc(100% - 150px - 60px - 60px);
    height:1px;
    position:absolute;
    left:60px;  //margin-left分
    bottom:-3em;
    border-bottom:1px solid #000;
  }*/
  /*.side-scroll-item {
    margin-left: 10vw;
    margin-right: 10vw;

    @include mq(pc) {
      margin-left: 60px;
      margin-right: 60px;
    }
  }*/
}
@media screen and (min-width:961px) {
  .side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list {
    top: 17vh;
  }
}
.side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item {
  align-items: center;
  justify-content: center;
  width: 60vw;
  color: #1b1717;
  font-size: 32px;
  font-weight: 700;
  z-index: 1;
  position: relative;
  margin-left: 10vw;
  margin-right: 10vw;
  /*@include mq(pc) {
    width: 300px;
  }*/
}
@media screen and (min-width:415px) {
  .side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item {
    margin-left: 60px;
    margin-right: 60px;
    width: 300px;
  }
}
@media screen and (min-width:961px) {
  .side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item {
    margin-left: 6vh;
    margin-right: 6vh;
    width: 36vh;
  }
}
.side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item:last-of-type figure:after {
  display: none;
}
.side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item i {
  position: absolute;
  left: 0;
  top: -0.75em;
  font-size: 40px;
  font-size: 10.6666666667vw;
  line-height: 1;
  font-family: "Cardo", serif;
  font-weight: 700;
  z-index: 1;
}
@media screen and (min-width:415px) {
  .side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item i {
    font-size: 4.8vh;
  }
}
@media screen and (min-width:961px) {
  .side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item i {
    font-size: 4.8vh;
  }
}
@media screen and (min-width:1441px) {
  .side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item i {
    font-size: 5.6vh;
  }
}
.side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item i small {
  font-size: 24px;
  font-size: 6.4vw;
}
@media screen and (min-width:415px) {
  .side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item i small {
    font-size: 3.2vh;
  }
}
@media screen and (min-width:961px) {
  .side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item i small {
    font-size: 26px;
  }
}
.side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item figure {
  position: relative;
}
.side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item figure .arrow {
  display: block;
  width: 13vw;
  height: 2.5vw;
  background: url(../images/line_history_dotarrow_sp.svg) 0 0/contain no-repeat;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(calc(100% + 3.5vw), -50%);
}
@media screen and (min-width:415px) {
  .side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item figure .arrow {
    width: 88px;
    height: 11px;
    background: url(../images/line_history_dotarrow.svg) 0 0/contain no-repeat;
    transform: translate(calc(100% + 17px), -50%);
  }
}
@media screen and (min-width:961px) {
  .side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item figure .arrow {
    width: 12vh;
    height: auto;
    aspect-ratio: 12/1;
    background: url(../images/line_history_dotarrow.svg) center 0/contain no-repeat;
    transform: translate(100%, -50%);
  }
}
.side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item h3 {
  margin: 0 -2em;
  padding-top: 18px;
  padding-top: 4.8vw;
  padding-bottom: 18px;
  padding-bottom: 4.8vw;
  text-align: center;
  font-size: 16px;
  font-size: 4.2666666667vw;
  font-weight: 900;
  line-height: 1.4;
}
@media screen and (min-width:415px) {
  .side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item h3 {
    padding: 3vh 0;
    font-size: 2.1vh;
  }
}
@media screen and (min-width:961px) {
  .side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item h3 {
    padding: 3vh 0;
    font-size: 2.1vh;
    line-height: 1.5;
  }
}
.side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item p {
  margin: 0 3%;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.01em;
  text-align: justify;
}
@media screen and (min-width:376px) {
  .side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item p {
    font-size: 13px;
  }
}
@media screen and (min-width:415px) {
  .side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item p {
    font-size: 1.6vh;
  }
}
@media screen and (min-width:961px) {
  .side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item p {
    margin: 0 3%;
    font-size: 1.6vh;
    line-height: 1.5;
  }
}
@media screen and (min-width:1441px) {
  .side-scroll .side-scroll-container .side-scroll-list-wrapper .side-scroll-list .side-scroll-item p {
    margin: 0 3%;
    font-size: 1.6vh;
    line-height: 1.5;
  }
}

.sp-only {
  display: block;
}
@media screen and (min-width:961px) {
  .sp-only {
    display: none;
  }
}
.sp-only h1 {
  text-align: center;
}
.sp-only h1 span {
  display: block;
  font-size: 32px;
  font-weight: 500;
  font-family: "Zen Old Mincho", serif;
}
@media screen and (min-width:415px) {
  .sp-only h1 span {
    font-size: 30px;
  }
}
@media screen and (min-width:961px) {
  .sp-only h1 span {
    font-size: 32px;
  }
}
.sp-only figure {
  margin: 20px -30px 0;
}

.tennis {
  display: none;
}
@media screen and (min-width:961px) {
  .tennis {
    display: block;
    position: relative;
  }
  .tennis:before {
    content: "";
    display: block;
    width: 56vh;
    aspect-ratio: 3/2;
    background: url(../images/illust_tennis.png) 0 0/contain no-repeat;
    position: absolute;
    left: -63vh;
    top: 13vh;
  }
}

.golf p {
  position: relative;
}
.golf p:before {
  content: "";
  display: block;
  width: 50vw;
  aspect-ratio: 3/2;
  background: url(../images/illust_golf.png) 0 0/contain no-repeat;
  position: absolute;
  left: -24vw;
  bottom: -27vw;
}
@media screen and (min-width:415px) {
  .golf p:before {
    width: 29vh;
    left: -15vh;
    bottom: -18vh;
  }
}
@media screen and (min-width:961px) {
  .golf p:before {
    width: 29vh;
    left: -15vh;
    bottom: -18vh;
  }
}

.tabletennis p {
  position: relative;
}
.tabletennis p:before {
  content: "";
  display: block;
  width: 45vw;
  aspect-ratio: 3/2;
  background: url(../images/illust_tabletennis.png) 0 0/contain no-repeat;
  position: absolute;
  left: -25vw;
  bottom: -34vw;
}
@media screen and (min-width:415px) {
  .tabletennis p:before {
    width: 29vh;
    left: -11vh;
    bottom: -27vh;
  }
}
@media screen and (min-width:961px) {
  .tabletennis p:before {
    width: 29vh;
    left: -11vh;
    bottom: -27vh;
  }
}

.soccer p {
  position: relative;
}
.soccer p:before {
  content: "";
  display: block;
  width: 45vw;
  aspect-ratio: 3/2;
  background: url(../images/illust_soccer.png) 0 0/contain no-repeat;
  position: absolute;
  left: -18vw;
  bottom: -29vw;
}
@media screen and (min-width:415px) {
  .soccer p:before {
    width: 29vh;
    left: -11vh;
    bottom: -19vh;
  }
}
@media screen and (min-width:961px) {
  .soccer p:before {
    width: 29vh;
    left: -11vh;
    bottom: -19vh;
  }
}

.pickleball p {
  position: relative;
}
.pickleball p:before {
  content: "";
  display: block;
  width: 45vw;
  aspect-ratio: 3/2;
  background: url(../images/illust_pickleball.png) 0 0/contain no-repeat;
  position: absolute;
  left: -18vw;
  bottom: -27vw;
}
@media screen and (min-width:415px) {
  .pickleball p:before {
    width: 30vh;
    left: -17vh;
    bottom: -18vh;
  }
}
@media screen and (min-width:961px) {
  .pickleball p:before {
    width: 30vh;
    left: -17vh;
    bottom: -18vh;
  }
}

.ending {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  text-align: center;
  overflow: hidden;
  position: relative;
  /*@keyframes circleMask {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(6);
    }
  }*/
}
.ending .closingword {
  transform-origin: 50% 50%;
  position: relative;
  z-index: 1;
  /*.scattering {
    transform-origin:inherit;
    li {
      transform-origin:inherit;
      width: 234px;
      height: 144px;
      position: absolute;
      left: 50%;
      top: 50%;

      &.photo_l1 {
        //margin-left: -19vh;
        //margin-top: -5vh;
        margin-left:-845px;
        margin-top:-480px;
        transform: rotate(-10deg);
      }

      &.photo_l2 {
        //margin-left: 15vh;
        //margin-top: -4vh;
        margin-left:-545px;
        margin-top:-460px;
        transform: rotate(4deg);
        z-index:1;
      }

      &.photo_l3 {
        //margin-left: -2vh;
        //margin-top: 11vh;
        margin-left:-700px;
        margin-top:-340px;
        transform: rotate(-7deg);
        z-index:2;
      }

      &.photo_l4 {
        //margin-left: -15vh;
        //margin-top: 26vh;
        margin-left:-810px;
        margin-top:-200px;
        transform: rotate(11deg);
        z-index:1;
      }

      &.photo_l5 {
        //margin-left: -13vh;
        //margin-top: 46vh;
        margin-left:-800px;
        margin-top:-40px;
        transform: rotate(-8deg);
      }

      &.photo_l6 {
        //margin-left: -5vh;
        //margin-top: 64vh;
        margin-left:-730px;
        margin-top:120px;
        transform: rotate(5deg);
      }

      &.photo_l7 {
        //margin-left: -19vh;
        //margin-top: 84vh;
        margin-left:-840px;
        margin-top:290px;
        transform: rotate(-9deg);
      }

      &.photo_l8 {
        //margin-left: 12vh;
        //margin-top: 88vh;
        margin-left:-575px;
        margin-top:330px;
        transform: rotate(10deg);
      }

      &.photo_r1 {
        //margin-right: 6vh;
        //margin-top: 0vh;
        margin-left:395px;
        margin-top:-430px;
        transform: rotate(12deg);
        z-index:1;
      }

      &.photo_r2 {
        //margin-right: -18vh;
        //margin-top: -4vh;
        margin-left:610px;
        margin-top:-460px;
        transform: rotate(5deg);
      }

      &.photo_r3 {
        //margin-right: -2vh;
        //margin-top: 16vh;
        margin-left:460px;
        margin-top:-300px;
        transform: rotate(-5deg);
      }

      &.photo_r4 {
        //margin-right: -11vh;
        //margin-top: 32vh;
        margin-left:540px;
        margin-top:-150px;
        transform: rotate(9deg);
      }

      &.photo_r5 {
        //margin-right: -9vh;
        //margin-top: 52vh;
        margin-left:520px;
        margin-top:20px;
        transform: rotate(-10deg);
      }

      &.photo_r6 {
        //margin-right: 0vh;
        //margin-top: 71vh;
        margin-left:450px;
        margin-top:180px;
        transform: rotate(5deg);
      }

      &.photo_r7 {
        //margin-right: 9vh;
        //margin-top: 89vh;
        margin-left:360px;
        margin-top:345px;
        transform: rotate(-10deg);
      }

      &.photo_r8 {
        //margin-right: -21vh;
        //margin-top: 84vh;
        margin-left:620px;
        margin-top:300px;
        transform: rotate(13deg);
      }
    }
  }*/
}
.ending .closingword h1 {
  font-size: 16px;
  font-size: 4.2666666667vw;
  font-weight: 500;
  font-family: "Zen Old Mincho", serif;
  line-height: 1.7;
}
@media screen and (min-width:376px) {
  .ending .closingword h1 {
    font-size: 19px;
    line-height: 1.6;
  }
}
@media screen and (min-width:415px) {
  .ending .closingword h1 {
    font-size: 2.5vh;
    line-height: 1.6;
  }
}
@media screen and (min-width:961px) {
  .ending .closingword h1 {
    font-size: 2.9vh;
    line-height: 1.6;
  }
}
@media screen and (min-width:1441px) {
  .ending .closingword h1 {
    font-size: 2.5vh;
    line-height: 1.6;
  }
}
.ending .closingword h2 {
  margin: 0.8em 0 0;
  font-size: 16px;
  font-size: 4.2666666667vw;
  font-weight: 500;
  font-family: "Zen Old Mincho", serif;
  line-height: 1.6;
}
@media screen and (min-width:376px) {
  .ending .closingword h2 {
    font-size: 19px;
    line-height: 1.7;
  }
}
@media screen and (min-width:415px) {
  .ending .closingword h2 {
    font-size: 2.5vh;
    line-height: 1.7;
  }
}
@media screen and (min-width:961px) {
  .ending .closingword h2 {
    font-size: 2.9vh;
    line-height: 1.7;
  }
}
@media screen and (min-width:1441px) {
  .ending .closingword h2 {
    font-size: 2.5vh;
    line-height: 1.7;
  }
}
.ending .closingword .logo {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  margin-top: 10.6666666667vw;
  width: 150px;
  width: 40vw;
}
@media screen and (min-width:415px) {
  .ending .closingword .logo {
    margin: 50px auto 0;
    width: 19.5vh;
  }
}
@media screen and (min-width:961px) {
  .ending .closingword .logo {
    margin: 70px auto 0;
    width: 19.5vw;
  }
}
.ending .mask-white {
  display: block;
  width: 100%;
  height: 100vh;
  background: url(../images/bg_ending_sp.jpg) center center/cover no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  transform: scale(1);
  /*&.active{
    animation: circleMask 1.5s linear forwards;
  }*/
}
@media screen and (min-width:415px) {
  .ending .mask-white {
    background: url(../images/bg_ending_tab.jpg) center center/cover no-repeat;
  }
}
@media screen and (min-width:961px) {
  .ending .mask-white {
    background: url(../images/bg_ending.jpg) center center/cover no-repeat;
  }
}/*# sourceMappingURL=style.css.map */