@charset "UTF-8";
.tp_mv {
  position: relative; }

div#tpslider {
  overflow: hidden;
  height: 100svh; }

.tp_mv__text {
  position: relative;
  z-index: 2; }

.tpmovBox {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }
  .tpmovBox > video {
    z-index: 0;
    position: absolute;
    width: 100vw; }
    @media (max-aspect-ratio: 16 / 9) {
      .tpmovBox > video {
        width: 100vw; } }
    @media (max-aspect-ratio: 16 / 10) {
      .tpmovBox > video {
        width: 110vw; } }
    @media (max-aspect-ratio: 16 / 11) {
      .tpmovBox > video {
        width: 120vw; } }
    @media (max-aspect-ratio: 1 / 2) {
      .tpmovBox > video {
        width: 120vw; } }

#tpaboutSection > h2 {
  text-align: center;
  color: #878787;
  font-size: 24px;
  margin: 50px 0 100px; }
@media screen and (max-width: 600px) {
  #tpaboutSection > h2 {
    font-size: 18px; } }

.tpabouttitleBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40.1vw;
  background-image: url("../img/front/shirosyoinImg01.png");
  background-size: cover;
  background-position: center center; }
  .tpabouttitleBox > img {
    width: 350px; }
  @media screen and (max-width: 600px) {
    .tpabouttitleBox {
      height: 70vw; }
      .tpabouttitleBox > img {
        width: 150px; } }

.tpaboutBox {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 100px; }
  .tpaboutBox > img {
    width: 50%; }
  .tpaboutBox > div {
    position: relative;
    width: 50%;
    padding: 0 50px; }
    .tpaboutBox > div > h3 {
      font-size: 24px;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      color: #878787;
      border-bottom: 1px solid #9f3537;
      padding-bottom: 20px;
      margin-bottom: 30px; }
    .tpaboutBox > div > img {
      position: absolute;
      width: 50px; }
      .tpaboutBox > div > img:nth-of-type(1) {
        top: -50px;
        left: -50px; }
      .tpaboutBox > div > img:nth-of-type(2) {
        bottom: -50px;
        left: 70%; }
    .tpaboutBox > div > p {
      width: 70%;
      text-align: justify; }
  @media screen and (max-width: 600px) {
    .tpaboutBox {
      display: block; }
      .tpaboutBox > img {
        width: 100%;
        margin-bottom: 20px; }
      .tpaboutBox > div {
        width: 100%;
        padding: 0 20px; }
        .tpaboutBox > div > h3 {
          margin: 0 auto 30px; }
        .tpaboutBox > div > p {
          width: 100%; } }

.tpaboutBox:nth-of-type(2) > div > img:nth-of-type(1) {
  top: -60px;
  left: 10px;
  width: 80px; }
.tpaboutBox:nth-of-type(2) > div > img:nth-of-type(2) {
  bottom: -50px;
  left: calc(70% - 50px);
  width: 50px; }
@media screen and (max-width: 600px) {
  .tpaboutBox:nth-of-type(2) > div > img:nth-of-type(1) {
    top: 5px;
    left: 30%;
    width: 50px; }
  .tpaboutBox:nth-of-type(2) > div > img:nth-of-type(2) {
    bottom: 0px;
    left: auto;
    right: 20px;
    width: 30px; } }

.tpaboutBox:nth-of-type(3) {
  flex-direction: row-reverse; }
  .tpaboutBox:nth-of-type(3) > div > h3, .tpaboutBox:nth-of-type(3) > div > p {
    margin-left: auto;
    margin-right: 0; }
  .tpaboutBox:nth-of-type(3) > div > img:nth-of-type(1) {
    left: auto;
    right: 50px;
    top: -80px;
    width: 110px; }
  .tpaboutBox:nth-of-type(3) > div > img:nth-of-type(2) {
    left: auto;
    right: 30%;
    width: 60px; }
  @media screen and (max-width: 600px) {
    .tpaboutBox:nth-of-type(3) {
      display: block; }
      .tpaboutBox:nth-of-type(3) > img {
        width: 100%;
        margin-bottom: 20px; }
      .tpaboutBox:nth-of-type(3) > div {
        width: 100%;
        padding: 0 20px; }
        .tpaboutBox:nth-of-type(3) > div > h3 {
          margin: 0 auto 30px; }
        .tpaboutBox:nth-of-type(3) > div > p {
          width: 100%; }
      .tpaboutBox:nth-of-type(3) > div > img:nth-of-type(1) {
        top: 5px;
        left: 30%;
        width: 50px; }
      .tpaboutBox:nth-of-type(3) > div > img:nth-of-type(2) {
        bottom: 0px;
        left: auto;
        right: 20px;
        width: 30px; } }

.tpaboutBox:nth-of-type(4) > div > img:nth-of-type(1) {
  top: 0;
  left: 110px;
  width: 50px; }
.tpaboutBox:nth-of-type(4) > div > img:nth-of-type(2) {
  left: 50px;
  width: 40px; }
@media screen and (max-width: 600px) {
  .tpaboutBox:nth-of-type(4) > div > img:nth-of-type(1) {
    top: 5px;
    left: 30%;
    width: 50px; }
  .tpaboutBox:nth-of-type(4) > div > img:nth-of-type(2) {
    bottom: 0px;
    left: auto;
    right: 20px;
    width: 30px; } }

#tpflowimgWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px; }
  #tpflowimgWrap > img {
    position: absolute;
    width: 90%;
    max-width: 900px;
    z-index: 2; }

.tpflowimgBox {
  position: relative;
  z-index: 1; }

/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(100%); }
  to {
    transform: translateX(0); } }
/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.d-demo {
  display: -ms-grid;
  overflow: hidden; }

/*----------------------------*/
.d-demo__wrap {
  display: flex;
  overflow: hidden; }

.d-demo__list {
  display: flex;
  list-style: none; }

.d-demo__list--left {
  animation: infinity-scroll-left 150s infinite linear 0.5s both;
  animation: infinity-scroll-left 100s infinite linear 0.5s both; }

.d-demo__item {
  width: 100vw; }

.d-demo__item > img {
  width: 120%; }
  @media screen and (max-width: 600px) {
    .d-demo__item > img {
      width: 140%; } }

.d-demo__item {
  position: relative; }

.d-demo__list {
  align-items: center;
  height: 60vw; }
  @media screen and (max-width: 600px) {
    .d-demo__list {
      height: 120vw; } }

.d-demo__list > .d-demo__item {
  position: relative;
  width: 17vw; }
  .d-demo__list > .d-demo__item.flowimgH {
    width: 21vw; }
  .d-demo__list > .d-demo__item:nth-of-type(1) {
    bottom: -17vw; }
  .d-demo__list > .d-demo__item:nth-of-type(2) {
    top: -11vw;
    left: -8vw; }
  .d-demo__list > .d-demo__item:nth-of-type(3) {
    bottom: -14vw; }
  .d-demo__list > .d-demo__item:nth-of-type(4) {
    top: -12vw;
    left: -8vw; }
  .d-demo__list > .d-demo__item:nth-of-type(5) {
    bottom: -12vw;
    left: -4vw; }
  .d-demo__list > .d-demo__item:nth-of-type(6) {
    top: -15vw;
    left: -12vw; }
  .d-demo__list > .d-demo__item:nth-of-type(7) {
    left: -5vw; }
  .d-demo__list > .d-demo__item:nth-of-type(8) {
    bottom: -12vw;
    right: -5vw; }
  .d-demo__list > .d-demo__item:nth-of-type(9) {
    top: -15vw;
    left: 0; }
  .d-demo__list > .d-demo__item:nth-of-type(9) {
    bottom: -5vw;
    left: 0; }
  .d-demo__list > .d-demo__item:nth-of-type(10) {
    bottom: -11vw;
    left: -2vw; }
  .d-demo__list > .d-demo__item:nth-of-type(11) {
    top: -11vw;
    left: -7vw; }
  .d-demo__list > .d-demo__item:nth-of-type(12) {
    left: -8vw;
    bottom: -16vw; }
  .d-demo__list > .d-demo__item:nth-of-type(13) {
    top: -5vw; }
  .d-demo__list > .d-demo__item:nth-of-type(14) {
    bottom: -15vw;
    left: -10vw; }
  .d-demo__list > .d-demo__item:nth-of-type(15) {
    top: -11vw;
    left: -7vw; }
  @media screen and (max-width: 600px) {
    .d-demo__list > .d-demo__item {
      width: 34vw; }
      .d-demo__list > .d-demo__item.flowimgH {
        width: 42vw; }
      .d-demo__list > .d-demo__item:nth-of-type(1) {
        bottom: -40vw; }
      .d-demo__list > .d-demo__item:nth-of-type(2) {
        top: -22vw;
        left: -16vw; }
      .d-demo__list > .d-demo__item:nth-of-type(3) {
        bottom: -34vw;
        right: -5vw; }
      .d-demo__list > .d-demo__item:nth-of-type(4) {
        top: -24vw;
        left: -16vw; }
      .d-demo__list > .d-demo__item:nth-of-type(5) {
        bottom: -30vw;
        left: -8vw; }
      .d-demo__list > .d-demo__item:nth-of-type(6) {
        top: -30vw;
        left: -28vw; }
      .d-demo__list > .d-demo__item:nth-of-type(7) {
        left: -7vw; }
      .d-demo__list > .d-demo__item:nth-of-type(8) {
        bottom: -30vw;
        right: -10vw; }
      .d-demo__list > .d-demo__item:nth-of-type(9) {
        top: -30vw;
        left: 0; }
      .d-demo__list > .d-demo__item:nth-of-type(9) {
        bottom: -10vw;
        left: 0; }
      .d-demo__list > .d-demo__item:nth-of-type(10) {
        bottom: -26vw;
        left: -4vw; }
      .d-demo__list > .d-demo__item:nth-of-type(11) {
        top: -22vw;
        left: -14vw; }
      .d-demo__list > .d-demo__item:nth-of-type(12) {
        left: -16vw;
        bottom: -40vw; }
      .d-demo__list > .d-demo__item:nth-of-type(13) {
        top: -18vw; }
      .d-demo__list > .d-demo__item:nth-of-type(14) {
        bottom: -40vw;
        left: -20vw; }
      .d-demo__list > .d-demo__item:nth-of-type(15) {
        top: -22vw;
        left: -14vw; } }

#topyoutubeWrap {
  width: 100%;
  padding: 0px 20px 100px; }
  #topyoutubeWrap > iframe {
    display: block;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    margin: 0 auto; }

#tpyoutubeWrap {
  position: relative;
  width: 100%;
  padding: 0px 0 50px;
  margin-bottom: 150px; }
  #tpyoutubeWrap > h2 {
    position: relative;
    z-index: 1; }
  #tpyoutubeWrap > div {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    z-index: 1; }
  #tpyoutubeWrap > img {
    width: 1920px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 0; }
  @media screen and (max-width: 600px) {
    #tpyoutubeWrap {
      margin-bottom: 50px; }
      #tpyoutubeWrap > img {
        display: none; } }

.video-thumbnail {
  display: inline-block;
  cursor: pointer; }
  .video-thumbnail :hover {
    opacity: .8; }

.video-thumbnail img {
  width: 100%;
  object-fit: cover; }

/* モーダル全体のスタイル */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  /* 背景を白に設定 */
  justify-content: center;
  align-items: center; }

.modal-content {
  position: relative;
  width: 80%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  /* 動画のアスペクト比を16:9に */
  background-color: white; }

.modal iframe {
  width: 100%;
  height: 100%;
  border: none; }

/* モーダルを表示する仕組み */
input[type="checkbox"] {
  display: none; }

input[type="checkbox"]:checked + .modal {
  display: flex; }

form input[type="checkbox"] {
  display: inline; }

/* 閉じるボタンのスタイル */
.close-btn {
  position: absolute;
  top: -30px;
  right: -30px;
  color: black;
  /* 閉じるボタンを黒に設定 */
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer; }

.close-btn:hover {
  color: red;
  /* ホバー時に赤色に変更 */ }

/* お知らせ部分上書き */
.tp_news__archive {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 1400px;
  margin-bottom: 0; }
  .tp_news__archive > a {
    width: 32%;
    display: block; }
    .tp_news__archive > a > img {
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      margin-bottom: 10px; }
    .tp_news__archive > a > p {
      margin-bottom: 10px; }
    .tp_news__archive > a > time {
      font-size: 0.8rem; }
  @media screen and (max-width: 600px) {
    .tp_news__archive {
      display: block; }
      .tp_news__archive > a {
        width: 100%;
        margin-bottom: 25px; } }

#tplinkbtnWrap {
  width: 100%;
  display: flex; }
  #tplinkbtnWrap > a {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1.9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; }
    #tplinkbtnWrap > a > div {
      position: relative;
      z-index: 2;
      text-align: center; }
      #tplinkbtnWrap > a > div > h2 {
        font-size: 24px;
        color: #fff; }
      #tplinkbtnWrap > a > div > p {
        color: #fff; }
    #tplinkbtnWrap > a::after {
      content: "";
      display: block;
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-image: url("../img/front/footbtnImg01.png");
      background-size: cover;
      background-position: center center;
      transition: 1s; }
    #tplinkbtnWrap > a:hover::after {
      transform: scale(1.1); }
    #tplinkbtnWrap > a:nth-of-type(2)::after {
      background-image: url("../img/front/footbtnImg02.png"); }
  @media screen and (max-width: 600px) {
    #tplinkbtnWrap {
      display: block; }
      #tplinkbtnWrap > a {
        width: 100%; } }