/* 新規ここから */


 .buy {
	width: 62px;
	height: 28px;
	position: relative;
	margin-left: 12px;

}

.buy div {
	position: absolute;
}

h1{margin: 0;
padding: 0;}

.buy .b1 {
	left: 0;
	top: 0;
}

.first{  -webkit-mask-image: linear-gradient(
  to bottom,
  black 0%,
  black 80%,
  transparent 100%
);
mask-image: linear-gradient(
  to bottom,
  black 0%,
  black 80%,
  transparent 100%
);}



.buy .b2 {
	left: 0;
	top: 0;
  mask-image: none;
	mask-size: 0% 0%;
	overflow: clip;
	line-height: 0;
  line-height: 0;
	clip-path: inset(0% 100% 0% 0%);
	mask-position: right center;
}

.buy .b3 {
	left: 0;
	top: 0;
	transition: filter 0s ease;

}

.buy .b4 {
	left: 0;
	top: 0;
}

/* hover */
.ned:hover .b2 {
	clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
	mask-size: 110% 110%;
	transition-duration: 0.3s ;
	transition-timing-function:ease-in-out;
}

.ned:hover .b3 {
	filter: brightness(0) invert(1);
}

.ned:hover .b4 {
rotate: 10deg;
}

.tr64 .ned{color: white;}



.red{background-color: #B7100F;}

#sec2{color: white;}

.hg{width: 85%;
margin: auto;}

.c1{width: 25%;
margin: auto;
margin-bottom: 9.3%;}

#sec3{padding-top:22.9% ;}

.link-grid {
	width: 100%;
}

.link-row {
	display: flex;
	gap: 15px;
	margin-bottom: 40px;
}

.link-unit {
	display: block;
	width: calc((100% - 30px) / 3);
	color: white;
	text-decoration: none;
  text-align: center;
}

.unit1 img{animation-delay: 0s!important;}

.unit2 img{animation-delay: 0.5s!important;}

.unit3 img{animation-delay: 1s!important;}

.unit4 img{animation-delay: 1.5s!important;}

.unit5 img{animation-delay: 2s!important;}

.unit6 img{animation-delay: 2.5s!important;}

.link-unit img {
	display: block;
	width: 100%;
	height: auto;
  animation: kurumi infinite 3s;
}

.link-unit p {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.5;
}

.tree1{aspect-ratio: 1 /2.089;
width: 100%;
position: relative;
background-color: #B7100F;
}

.treein{position: absolute;
left: 0;
top: 0;
z-index: 1;}

.tr2{margin-top: -6%;}

.tr3{width: 21%;
  margin-top: 11.9%;
margin-left: 11%;}

.nedan{position: relative;
  font-family: YakuHanJP,'Zen Kaku Gothic New', sans-serif;
z-index: 2;}

.nedan a{color: black;}

.ned{display: flex;
font-size: 13px;
line-height: normal;
letter-spacing: 0.1px;
place-items:center ;
font-family: YakuHanJP, 'Zen Kaku Gothic New', sans-serif;
}

.ned span{ font-family: "DM Sans", sans-serif;}

.tree1 .ned{color: white;}

.tree1 .nedan{position: absolute;
bottom: 2%;
left: 15.2%;
}

.bell9 {
  width: 100%;
  aspect-ratio: 1 / 0.871;
  position: relative;
  overflow: hidden;
}

.bell9-slideshow {
  display: flex;
  width: 400%;
  height: 100%;
  animation: bell9-slide 3s infinite steps(3);
}

.bell9-slideshow img {
  width: 25%;
  height: 100%;
  object-fit: contain;
  flex-shrink: 0;
}

@keyframes bell9-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-75%);
  }
}

.allx{transition: all 0.2s;}
.all:hover .allx{transform: translateY(6%);}

.bell8 {
  width: 100%;
  aspect-ratio: 1 / 1.17;
  position: relative;
  padding-bottom: 2%;
  overflow-x: clip;
  margin-left: -15%;

}

.bell8-slideshow {
  display: flex;
  width: 500%;
  height: 100%;
  animation: bell8-slide 4s infinite steps(4);
}

.bell8-slideshow img {
  width: 20%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

@keyframes bell8-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-80%);
  }
}

.bell7 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}

.bell7-slideshow {
  display: flex;
  width: 300%;
  height: 100%;
  animation: bell7-slide 3s infinite steps(2);
}

.bell7-slideshow img {
  width: 33.3333%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

@keyframes bell7-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-66.6667%);
  }
}


.ned2{margin-top: 5px;}

.tree2{position: relative;
width: 100%;
aspect-ratio: 1 /1.575;}

.tr4{width: 21%;
position: absolute;
left: 62.1%;
top:8% ;}

.tree3{display: flex;
margin-left: 6.5%;
margin-top: -19%;
position: relative;
}

.tr5{width:48.4%;
flex-shrink: 0;}

.tr6{width:36% ;
  flex-shrink: 0;
  margin-top: 14.3%;
}

.tr7{margin-left: 7%;
  margin-top: 4.7%;
}

.tr9{width: 100%;
aspect-ratio: 1 / 1.145;
position: relative;
}

.tr10{width: 21%;
position: absolute;
left: 71.5%;
top:9.6% ;}


.tr11{width: 100%;
  aspect-ratio: 1 /1.591;
  position: relative;
  margin-top: 5.6%;
  }

  .tr12{width: 21%;
  position: absolute;
  left: 6.5%;
  top:7% ;}

  .tr13{width: 21%;
  margin-left: 4.7%;
  position: relative;
margin-top: 6.1%;
z-index: 2;}

.tr14{width: 86%;
margin: auto;
margin-top: -11.7%;
}

.tr15{margin-left: 15%;
margin-top: 4.7%;}

.all{width: 75.7%;
  position: relative;
  aspect-ratio: 0.75 / 0.192;
margin: auto;}

.all img{position: absolute;
left: 0;
top: 0;}

.tr16{margin-top:16.4%;
margin-bottom: 12.4%;}

.tr18{margin-top: -9%;}

.tr19{width: 100%;
aspect-ratio: 1 / 1.759;
position: relative;
}

.tr20{position: absolute;
height: 100%;
  width: 130%;
left: -5%;
top: 0;}

.tr20 img{animation: asb infinite 5s;
position: absolute;
left: 0;
top: 0;}

.tr21{width: 23.8%;
position: absolute;
left: 30%;
top: 13%;
animation: asb2 infinite 2s;
}

.tr22{width: 21%;
  position: absolute;
  left: 8%;
  top: 74%;
  animation: asb3 infinite 3s;
}

.tr23{margin-left: 9.3%;
margin-top: -5%;
}

.tr24{margin-top: 7%;}

.tr25 .ned{justify-content: center;}

.tr25{margin-top: 5%;}
.bell1 {
  width: 60%;
  aspect-ratio: 1 / 0.979;
  overflow: hidden;
  margin-left: -12%;
  margin-top: -60%;
}

.tr30xx{        margin-left: 50%;
  margin-top: -25%;
  margin-bottom: 11%;}

.tr29{margin-top: -10%;}

.bell1-slideshow {
  display: flex;
  width: 300%;
  animation: bell1-slide 3s infinite steps(2);
}

.bell1-slideshow img {
  width: 33.3333%;
  height: auto;
  flex-shrink: 0;
}

@keyframes bell1-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-66.6667%);
  }
}

.tr26{    width: 75%;
  margin-left: auto;
  margin-top: -6%;
  margin-bottom: -22%;
  margin-right: -13%;
}

.tr26x{    margin-left: 45%;
  margin-top: 13%;}

  .tr26xx{    margin-left: 5%;
    margin-top: 3%;}

  .bell2 {

    position: relative;

    width: 100%;

    aspect-ratio: 1 / 0.46;

    overflow: hidden;
    margin-top: 5%;

  }

  .bell2-slideshow {

    display: flex;

    width: 500%;

    flex-shrink: 0;

    animation: bell2-slide 4s infinite steps(4);

  }

  .bell2-slideshow img {

    width: 20%;

    height: auto;

    flex-shrink: 0;

  }

  @keyframes bell2-slide {

    from {

      transform: translateX(0);

    }

    to {

      transform: translateX(-80%);

    }

  }

/* firexが付くまで停止 */

.bell2-slideshow {
  animation-play-state: paused;
}

.bell2.firex .bell2-slideshow {
  animation-play-state: running;
}
.tr41 {
  position: relative;
  width: 50%;
  aspect-ratio: 0.551 / 0.832;
  margin-left: auto;
  margin-right: 0%;
  margin-top: -25%;
  overflow: hidden;
}

.tr41-slideshow {
  display: flex;
  width: 400%;
  flex-shrink: 0;
  animation: tr41-slide 1s infinite steps(3);
  animation-play-state: paused;
}

.tr41-slideshow img {
  width: 25%;
  height: auto;
  flex-shrink: 0;
}

.tr41.fadein .tr41-slideshow {
  animation-play-state: running;
}

@keyframes tr41-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-75%);
  }
}
.tr42 {
  position: relative;
  width: 50%;
  aspect-ratio: 0.551 / 0.832;
  margin-left: 5%;
  margin-top: -50%;
  overflow: hidden;
}

.tr42-slideshow {
  display: flex;
  width: 400%;
  flex-shrink: 0;
  animation: tr42-slide 0.8s infinite steps(3);
}

.tr42-slideshow img {
  width: 25%;
  height: auto;
  flex-shrink: 0;
}

@keyframes tr42-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-75%);
  }
}



.tr27{margin-top: 7.5%;}

.tr31{width: 77.8%;
margin-left: -10%;
margin-top: 7%;
transform-origin: center center;
position: relative;
z-index: 2;
}

.tr30x{    margin-top: -45%;
  margin-left: 4%;}

.koron{
  transform: translateX(-100%);
  animation-fill-mode: forwards;}

.koronx{animation: koron2 2s 1;
animation-fill-mode: forwards;
}

.koronx img{animation: koron 2s 1;
  animation-fill-mode: forwards;
  }

@keyframes koron{
0%{rotate: 0deg;

}

80%{rotate: 360deg;}

  90%{rotate: 330deg;}

  100%{rotate: 360deg;}

}


@keyframes koron2{
  0%{transform: translateX(-100%);

  }

  100%{transform: translateX(0%);


  }

  }

.tr69{overflow: clip;}
.tr32{width: 23.8%;
  margin-left: 72%;
  margin-top: -30%;
animation: asb2 2s infinite;
}

.tr33{margin-left: auto;
  margin-right: auto;
margin-top: -7%;}

.tr33 .nedan{justify-content: center;}

.tr34{margin-top: 6%;}

.tr34 .slideshow{flex-shrink: 0;
  animation: loop-slide-step 6s infinite steps(12);
width: 190%;}

.tr34 .content{width: 100%;}




.tr35{margin-top: 10.3%;}

.tr36{width: 112%;
  aspect-ratio: 1.229 / 1.593;
  position: relative;
margin-left: -5%;
margin-top: 5%;}

.tr36 img{position: absolute;
left: 0;
top: 0;}

.tr36x{    margin-left: 7%;
  margin-top: -10%;}

.tr37{width: 77.6%;
margin: auto;
margin-top: 10.3%;
animation: asb3 infinite 3s;
}

.tr38{width: 23.8%;
  margin-left: 5%;
  margin-top: -25%;
animation: asb2 infinite 2s;
}

#sec5{border-top: 1px solid #FF4141;
padding-bottom: 15%;
}

#sec6{border-top: 1px solid #FF4141;
padding-bottom: 10%;}

#sec7{padding-bottom: 10%;}

#sec9{border-top: 1px solid #FF4141;
  padding-bottom: 0%;}

.tr40{margin-top: -11%;}

.tr44{    margin-left: 60%;
  margin-top: -23%;}


.tr45 {
  position: relative;
  width: 102%;
  aspect-ratio: 1.21 / 1.364;
  margin-top: 12%;
  margin-left: 22%;
  overflow: hidden;
}

.tr45-slideshow {
  display: flex;
  width: 300%;
  flex-shrink: 0;
  animation: tr45-slide 3s infinite steps(2);
}

.tr45-slideshow img {
  width: 33.3333%;
  height: auto;
  flex-shrink: 0;
}

@keyframes tr45-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-66.6667%);
  }
}



@keyframes bell2SwitchA {
  0%, 33.33% {
      opacity: 1;
  }
  33.34%, 100% {
      opacity: 0;
  }
}

@keyframes bell2SwitchB {
  0%, 33.33% {
      opacity: 0;
  }
  33.34%, 66.66% {
      opacity: 1;
  }
  66.67%, 100% {
      opacity: 0;
  }
}

@keyframes bell2SwitchC {
  0%, 66.66% {
      opacity: 0;
  }
  66.67%, 100% {
      opacity: 1;
  }
}

.tr46{margin-left: 5%;
margin-top: -14%;}


.tr46x{margin-left: 6%;
margin-top: 5%;}

.tr46xx{    margin-left: 55%;
  margin-top: 12%;}


.tr47{margin-top: 15.9%;}
.bell3 {

  position: relative;

  width: 100%;

  aspect-ratio: 1 / 0.633;

  overflow: hidden;

}

.bell3-slideshow {

  display: flex;

  width: 800%;

  flex-shrink: 0;

  animation: bell3-slide 4s infinite steps(7);

}

.bell3-slideshow img {

  width: 12.5%;

  height: auto;

  flex-shrink: 0;

}

@keyframes bell3-slide {

  from {

    transform: translateX(0);

  }

  to {

    transform: translateX(-87.5%);

  }

}
.tr48{margin-top: 12.1%;}

.tr50 .content{width: 100%;}

.tr50{margin-top: 10%;}

.tr51{
width: 49.3%;
}

.take{display: flex;
justify-content: space-between;
margin-top: 5%;
}

.tr53{margin-top: -50%;
position: relative;
width: 85%;
margin-left: auto;
margin-right: 0;
}

.tr54{    width: 33%;
  margin-left: 23%;
  margin-top: -55%;
animation: asb infinite 2s;
}
.tr52{    margin-top: -85%;
  margin-left: -12%;
  flex-shrink: 0;
  width: 100%;}
.tr55{margin-top: 7.9%;}

.bell4 {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.112;
}


.bell4 img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}


/* 1枚目は固定 */
.bell4-img-a {
  opacity: 1;
}

/* 2枚目 */
.bell4-img-b {
  animation: bell4SwitchB 5s infinite;
}

/* 3枚目 */
.bell4-img-c {
  animation: bell4SwitchC 5s infinite;
}

/* 4枚目 */
.bell4-img-d {
  animation: bell4SwitchD 5s infinite;
}

/* 5枚目 */
.bell4-img-e {
  animation: bell4SwitchE 5s infinite;
}


@keyframes bell4SwitchB {
  0%, 16% {
    opacity: 0;
  }
  22%, 34% {
    opacity: 1;
  }
  40%, 100% {
    opacity: 0;
  }
}

@keyframes bell4SwitchC {
  0%, 34% {
    opacity: 0;
  }
  40%, 52% {
    opacity: 1;
  }
  58%, 100% {
    opacity: 0;
  }
}

@keyframes bell4SwitchD {
  0%, 52% {
    opacity: 0;
  }
  58%, 70% {
    opacity: 1;
  }
  76%, 100% {
    opacity: 0;
  }
}

@keyframes bell4SwitchE {
  0%, 70% {
    opacity: 0;
  }
  76%, 88% {
    opacity: 1;
  }
  94%, 100% {
    opacity: 0;
  }
}
.bell5 {
  position: relative;
  width: 86.4%;
  aspect-ratio: 1 / 1.175;
  margin-top: 10.3%;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

.bell5-slideshow {
  display: flex;
  width: 500%;
  flex-shrink: 0;
  animation: bell5-slide 3s infinite steps(4);
}

.bell5-slideshow img {
  width: 20%;
  height: auto;
  flex-shrink: 0;
}

@keyframes bell5-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-80%);
  }
}
.tr56{width: 100%;
margin-top: 15%;
margin-bottom: 10%;
}

.tr56 .slideshow{width: 120%;
flex-shrink: 0;
animation: loop-slide-step 3s infinite steps(8);
}

.tr56 .content{width: 100%;
}

.tr57{
  width: 49.3%;}


.tr58{position: relative;
width: 100%;
aspect-ratio: 1 / 2.007;}

.tr59{position: absolute;
left: 0;
top: 0;}

.tr60{position: absolute;
  left: 0;
  top: 0;}

  .tr63{margin-top: 8.9%;}

  #sec7{padding-bottom: 10%;}

  .tr64{position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.79;
  background-image: url(pic/c95x.webp);
  }

  .tr65{position: absolute;
  left: 0;
top: 0;}
.tr66{position: absolute;

  left: 0;
top: 0;}

.tree180{  -webkit-mask-image: linear-gradient(
  to bottom,
  transparent 0%,
  black 25%,
  black 100%
);
mask-image: linear-gradient(
  to bottom,
  transparent 5%,
  black 20%,
  black 50%,
  black 100%
);}
.tr67{position: absolute;
  z-index: 2;
  left: 0;
top: 0;}

.bell6 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1 / 1.234;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 20%,
    black 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 25%,
    black 100%
  );
}

.bell6 img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

.bell6-img-a {
  animation: bell6SwitchA 3s infinite;
}

.bell6-img-b {
  animation: bell6SwitchB 3s infinite;
}

@keyframes bell6SwitchA {
  0%, 49.99% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

@keyframes bell6SwitchB {
  0%, 49.99% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}

.tr64 .tr25{position: absolute;
  left: 0;
  right: 0;
  margin: auto;
bottom: 2%;}

.tr70{margin-top: -40%;
width: 45.6%;
margin-left: 3%;
animation: asb2 infinite 3s;}

.tr72{margin-top: -93%;}

.tr73{margin-left: 12%;
margin-top:20%;
z-index: 3;}

.tr74{margin-top: -31%;
  position: relative;
  z-index: 2;
  margin-left: 10%;
  width: 100%;}

  .tr73x{    margin-top: -35%;
    margin-bottom: 20%;
    margin-left: 5%;}

.tr75{margin-top: -12%;}


.tr77{ margin-top: -13%;}

.tr79{    margin-top: -25%;}

.tr80{margin-top: 7.9%;}

.tr81{margin-left: 10%;
  margin-top: 10%;
}

.viewall{width: 75.7%;
margin: auto;
margin-top: 10%;
margin-bottom: 20%;}

.tr82{width: 44.4%;
  margin-left: 55%;
  margin-top: -42%;}

  #sec10{width: 100%;
  aspect-ratio: 1 / 1.682;
background-color: #B7100F;
position: relative;
z-index: 100;
}

.tr8{margin-top: 5%;}

.tr83{position: absolute;
width: 46%;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}

.logo{position: absolute;
  width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}

.ttr1{background-color: #FF4141;
width: 100%;
aspect-ratio: 1 / 0.072;
display: grid;
place-items:center;position: absolute;
top: 0;
z-index: 2;
}

.ttr1 .slideshow {
  width: 178.5%;
  flex-shrink: 0;
  animation: loop-slide-step2 3s infinite steps(6);
}

@keyframes loop-slide-step {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }

}

@keyframes loop-slide-step2 {

  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0%);
  }

}


.ttr1  .content{width: 100%;
flex-shrink: 0;
}

.ttr2{width: 20%;
position: absolute;
animation: jump infinite 2s;
left: 73%;
top: 20%;}

.ttr3{    width: 17%;
  animation: asb2 infinite 3s;
  position: absolute;
  left: 5%;
 top: 50%;
transform: translateY(-50%);
margin-top: -33%;}

  .ttr4{position: absolute;
  left: 0;
top: 0;}

.hg{font-family: YakuHanJP,"DM Sans", 'Zen Kaku Gothic New', sans-serif;
padding-top: 5%;
}

.hg1{font-size: 15.5px;
text-align: center;}

.hg2{font-size: 13px;
  margin-top: 5%;
  line-height: 22px;
text-align: justify;}

.sides{    top: 50%;
  width: 9.3%;
  position: sticky;
  left: 100vw;
  z-index: 100;
  transform: translateY(-50%);
  margin-top: 50vh;
height: 100vh;
display: grid;
place-items: center;
align-content: center;}

  .side{margin-bottom: 2vw;}

  .sides {
    transition: transform 0.4s ease, opacity 0.4s ease;
  }

  .sides.hide {
    opacity: 0;
    pointer-events: none;
  }

  #sec4{margin-top: -150vh;}

  .back{width: 8.9vw;
 margin-top: 70%;
 margin-right: 100%;
  }

  html {
    scroll-behavior: smooth;
  }

  .tr30{position: relative;
    width: 45%;
    margin-left: auto;
    margin-right: 0;
  z-index: 2;}


 /* 新規ここまで */



 /* 動きここから */

 @keyframes kurumi{

  0%{rotate:0deg;}
  90%{rotate:0deg;}
  95%{rotate:15deg;}

  100%{rotate:0deg;}
 }

 .hanen{transform: translateX(-100%) rotate(45deg);
  transition: ease 0.5s;
  transition-delay: 0.7s;
  opacity: 0;
transform-origin: center bottom;}

.hanenx{transform: translateX(0%) rotate(0deg);
  opacity: 1;
  animation: jump1 1 0.5s 1.4s;
}

.mawaru{rotate: 360deg;
transition: ease 1s;
transition-delay: 1s;
}

.mawarux{rotate: 0deg;}
 .pyon {
  animation: pyon 8s ease-in-out infinite;
}

@keyframes pyon {
  0%, 80%, 100% {
    transform: translateY(0);
  }

  85% {
    transform: translateY(-20px);
  }

  90% {
    transform: translateY(0);
  }

  95% {
    transform: translateY(-10px);
  }
}

 .big{transform: scale(0.2) rotate(10deg);
opacity: 0;
animation:  big 1s 1 1.2s;
animation-fill-mode: forwards;}

@keyframes big{
  0%{transform: scale(0.2) rotate(10deg);
  opacity: 0;}

  50%{transform: scale(1.2) rotate(-10deg);
    opacity: 1;}

    60%{transform: scale(1.2) rotate(10deg);
      opacity: 1;}

      70%{transform: scale(0.8) rotate(-10deg);
        opacity: 1;}

        100%{transform: scale(1) rotate(0deg);
          opacity: 1;}



}

.big2{animation-delay: 1.4s;}

 .bounce{opacity: 0;
transform: translateY(-30%);
}

 .bouncex{
animation: bounce 1 1s;
animation-delay: 1s;
animation-fill-mode: forwards;
}

@keyframes bounce{

0%{transform: translateY(-100%) rotate(20deg);
opacity: 0;
}

50%{transform: translateY(10%) rotate(-20deg);
opacity: 1;
}

60%{transform: translateY(-25%) rotate(20deg);
  opacity: 1;
  }

  70%{transform: translateY(0%) rotate(-20deg);
    opacity: 1;
    }

    80%{transform: translateY(-10%) rotate(20deg);
      opacity: 1;
      }

      90%{transform: translateY(0%) rotate(-20deg);
        opacity: 1;
        }

        100%{transform: translateY(0%)rotate(0deg);
          opacity: 1;
          }

}

 .rolling{opacity: 0;
  rotate: 180deg;}

 .rollingx{animation: rolling 1 0.5s;
animation-fill-mode: forwards;}

@keyframes rolling{
  0%{rotate: 180deg;
  opacity: 0;
  }


  100%{rotate: 0deg;
  opacity: 1;
  }
}

 .daen{transform: translateX(90%) rotate(90deg);
transition: all 1s;
opacity: 0;
}

.daenx{transform: translateX(0%) rotate(0deg);
opacity: 1;}

.daen2{transform: translateX(-90%) rotate(-90deg);
  transition: all 1s;
  opacity: 0;
  }

  .daen2x{transform: translateX(0%) rotate(0deg);
  opacity: 1;}

 .zoomout{overflow: clip;}

.zoomout img{transform: scale(1.3);
transition: all 1s;}

.zoomoutx img{transform: scale(1);}

 .deru{opacity: 0;
transition: all 0.1s;
transition-delay: 1s;}

.derux{opacity: 1;}

.migikara {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 1s ease;
}

.migikarax{transform: translateX(0);
opacity: 1;}

.hidarikara{transform: translateX(-100%);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 1s ease;}

  .hidarikarax{transform: translateX(0);
    opacity: 1;
  }


  .sitakara {
    transform: translateY(100%);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
  }

  .sitakarax {
    transform: translateY(0);
    opacity: 1;
  }
.yoko{animation: yoko infinite 2s;}

.yokoni{animation: yokoni 1 1s 3s;
  animation-fill-mode: forwards;
  mask-image: none;
	mask-size: 0% 0%;
	overflow: clip;
	line-height: 0;
  line-height: 0;
	clip-path: inset(0% 100% 0% 0%);
	mask-position: right center;}

@keyframes yokoni {



0%{   mask-image: none;
	mask-size: 0% 0%;
	overflow: clip;
	line-height: 0;
  line-height: 0;
	clip-path: inset(0% 100% 0% 0%);
	mask-position: right center;

}
100% {
	clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
	mask-size: 110% 110%;
	transition-duration: 1s ;
	transition-timing-function:ease-in-out;


  }

}

    .migi{   mask-image: none;
      mask-size: 0% 0%;
      overflow: clip;
      line-height: 0;
      line-height: 0;
      clip-path: inset(0% 0% 0% 100%);

      mask-position: right center;}

      .migix {
      clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
      mask-size: 110% 110%;
      transition-duration: 1s ;
      transition-timing-function:ease-in-out;
      }

      .sita{   mask-image: none;
      mask-size: 0% 0%;
      overflow: clip;
      line-height: 0;
      line-height: 0;
      clip-path: inset(0% 0% 100% 0%);
      mask-position: right center;

    }

      .sitax {
      clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
      mask-size: 110% 110%;
      transition-duration: 1s ;
      transition-timing-function:ease-in-out;


      }

      .pos{opacity: 0;
        transform: scale(0);
        filter: blur(100px);}

      .posx{animation: pos 1 1s 0s forwards;}

      @keyframes pos {

0%{opacity: 0;
transform: scale(0);
filter: blur(100px);}

100%{opacity: 1;
  transform: scale(1);
  filter: blur(0px);}


      }

      .ue{   mask-image: none;
      mask-size: 0% 0%;
      overflow: clip;
      line-height: 0;
      line-height: 0;
      clip-path: inset(100% 0% 0% 0%);
      mask-position: right center;

    }

      .uex {
      clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
      mask-size: 110% 110%;
      transition-duration: 1s ;
      transition-timing-function:ease-in-out;
    transition-delay: 0.5s;

      }


.hidari{   mask-image: none;
	mask-size: 0% 0%;
	overflow: clip;
	line-height: 0;
  line-height: 0;
	clip-path: inset(0% 100% 0% 0%);
	mask-position: right center;

}
  .hidarix {
	clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
	mask-size: 110% 110%;
	transition-duration: 1s ;
	transition-timing-function:ease-in-out;


  }

  .manaka {
    mask-image: none;
    mask-size: 0% 0%;
    overflow: clip;
    line-height: 0;
    clip-path: inset(0% 50% 0% 50%);
  }

  .manakax {
    clip-path: inset(0% 0% 0% 0%);
    mask-size: 110% 110%;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
  }

  .circle{

	mask-image: none;
	mask-size: 0% 0%;
	overflow: clip;
	clip-path: circle(0%);
	line-height: 0;
}

.circlex{
	mask-size: 110% 110%;
	transition: all 1.5s;

	clip-path: circle(100%);
}


.flip{
opacity: 0;
	rotate: y 180deg;
	-webkit-backface-visibility: clip;
	backface-visibility: clip;
	}

	.flipx{    transition: .7s ease .7s;
		rotate: y 0deg;
  opacity: 1;}


    .osome1{transition: all 1s!important;}
    .osome2{transition: all 2s!important;}
    .osome3{transition: all 3s!important;}



.yure1{animation: yure1 infinite 2s;}

@keyframes yure1{
0%{rotate: 12deg;}
50%{rotate: 0deg;}
100%{rotate: 12deg;}

}
@keyframes yure2{
  0%{rotate: 0deg;}
  50%{rotate: 1deg;}
  100%{rotate: 0deg;}

  }

  @keyframes yure3{
    0%{rotate: 0deg;}
    65%{rotate: 0deg;}
    70%{rotate: 10deg;}
    75%{rotate: -10deg;}
    100%{rotate: 0deg;}

    }

.bunka{position: relative;
z-index: 2;}
.yure2{animation: yure2 infinite 2.1s;}

.yure3{animation: yure2 infinite 1.5s;}

.yure4{animation: yure4 infinite 3s;}

.yure5{animation: yure2 infinite 8s;}

.yure6{animation: yure2 infinite 8s;}

.anidelay1{animation-delay: 1.2s!important;}
.anidelay2{animation-delay:1.4s!important;}
.anidelay3{animation-delay: 1.6s!important;}
.anidelay4{animation-delay: 2.8s!important;}
.anidelay5{animation-delay: 3s!important;}
.anidelay6{animation-delay: 3.2s!important;}
.anidelay7{animation-delay: 3.4s!important;}
.anidelay8{animation-delay: 3.6s!important;}
.anidelay9{animation-delay: 3.8s!important;}
.anidelay10{animation-delay: 4.8s!important;}
.anidelay11{animation-delay: 5s!important;}
.anidelay12{animation-delay: 5.2s!important;}
.anidelay13{animation-delay: 5.4s!important;}
.anidelay14{animation-delay: 9.5s!important;}
.anidelay15{animation-delay: 9.7s!important;}
.anidelay16{animation-delay: 6s!important;}

.out{animation: out 1 2s 2s;
  filter: blur(10px);
transform: scale(1.1);
animation-fill-mode: forwards;}

@keyframes out {

  0%{transform: scale(1.1);
    filter: blur(10px);}

  100%{transform: scale(1);
    filter: blur(0px);}
}




@keyframes yure3{
  0%{rotate: 1deg;}
  45%{rotate: 0deg;}
  50%{rotate: 1deg;}
  65%{rotate: 0deg;}
  100%{rotate: 1deg;}

  }


@keyframes yure4{
  0%{rotate: 1deg;}
  45%{rotate: 0deg;}
  50%{rotate: 0.5deg;}
  65%{rotate: 0deg;}
  100%{rotate: 1deg;}

  }

  @keyframes yure5{
    0%{rotate: 0deg;}
    5%{rotate: 15deg;}
    25%{rotate: -15deg;}
    40%{rotate: 15deg;}
    65%{rotate: -15deg;}

    100%{rotate: 0deg;}

    }


  @keyframes yure6{
    0%{rotate: 0deg;}
    5%{rotate: 5deg;}
    25%{rotate: -5deg;}
    40%{rotate: 7deg;}
    65%{rotate: -7deg;}

    100%{rotate: 0deg;}

    }

.fadein{opacity: 0;
transition: all 1s;}

.fadeinx{opacity: 1;
  }


  .fadeinni{animation: fadeinni 1 2s;
    animation-delay: 1.8s;
    animation-fill-mode: forwards;
    opacity: 0
    }

    @keyframes fadeinni{

      0%{opacity: 0;}
      100%{opacity: 1;}

    }

    .fadeinni2{animation: fadeinni2 1 1s;
      animation-delay: 0.6s;
      animation-fill-mode: forwards;
      opacity: 0;
      transform: scale(1.2) rotate(3deg);
      filter: blur(5px);
      }

      @keyframes fadeinni2{

        0%{opacity: 0;
        transform: scale(1.2) rotate(3deg);
        filter: blur(5px);
        }

        50%{opacity: 0.5;
          transform: scale(1.1) rotate(-3deg);
          filter: blur(0px);
          }

        100%{opacity: 1;
          transform: scale(1) rotate(0deg);
          filter: blur(0px);
        }

      }



.jump1{animation: jump1 infinite 2s;}

.jump2{animation: jump2 infinite 3s;}

.jump3{animation: jump1 infinite 1s;}

@keyframes jump1{
0%{transform: translateY(0);}
50%{transform: translateY(3%);}
100%{transform: translateY(0);}

}

@keyframes jump2{
  0%{transform: translateY(0);}
  50%{transform: translateY(1%);}
  100%{transform: translateY(0);}

  }
.delay1{transition-delay: 0.2s!important;}
.delay2{transition-delay: 0.4s!important;}
.delay3{transition-delay: 0.6s!important;}
.delay4{transition-delay: 0.8s!important;}
.delay5{transition-delay: 1s!important;}
.delay6{transition-delay: 1.2s!important;}
.delay7{transition-delay: 1.4s!important;}
.delay8{transition-delay: 1.6s!important;}



.asb{animation: infinite asb 2s;}

.asb2{animation: infinite asb2 2s;}

@keyframes asb{

  0%{rotate: 0deg;}
  50%{rotate: 1deg;}
  100%{rotate: 0deg;}
}

@keyframes asb2{

  0%{rotate: 0deg;}
  50%{rotate: 12deg;}
  100%{rotate: 0deg;}
}

@keyframes asb3{

  0%{rotate: 0deg;}
  50%{rotate: 20deg;}
  100%{rotate: 0deg;}
}


@keyframes fadein{
  0%{opacity: 0;
}

  100%{opacity: 1;

  }
}


@keyframes jump {
  0%{transform:translateY(0px);}
  50%{transform:translateY(0px);}
  60%{transform:translateY(2px);}
  70%{transform:translateY(0px);}
100%{transform:translateY(0px);}

  }

  @keyframes rotate {
      0%{transform:translateY(0px);}
      50%{transform:translateY(0px);}
      60%{transform:rotate(2deg);}
      70%{transform:translateY(0px);}
  100%{transform:translateY(0px);}

      }

      @keyframes rotate2 {
        0%{transform:translateY(0px);}
        50%{transform:translateY(0px);}
        60%{transform:rotate(-1deg);}
        70%{transform:translateY(0px);}
    100%{transform:translateY(0px);}

        }

        @keyframes rotate3 {
          0%{transform:translateY(0px);}
          50%{transform:translateY(0px);}
          60%{transform:rotate(-1deg);}
          70%{transform:translateY(0px);}
      100%{transform:translateY(0px);}

          }

          @keyframes fadein {
            0%{opacity: 0;}
            100%{opacity: 1;}

            }

 /* 動きここまで */







 /* その他 */


body{margin: 0;
}

.wrapper{width: 100vw;
height: auto;
position: relative;
overflow: clip;
background-color: white;
}

.sec1{width: 100%;
}



#sec1{

  line-height: 0;
aspect-ratio:  1 / 1.682;
  overflow: clip;
width: 100%;
z-index: 5;
position: relative;
background-color: #B7100F;
}


ul{list-style: none;
margin: 0;
padding: 0;}

li{margin: 0;
    padding: 0;}
a{text-decoration: none;}
img{width: 100%;}

#pc{display: none;}
.lz{line-height: 0;}
html{overflow: visible;}




.wrap {
	display: flex;
	align-items: center;
  height: auto;
  overflow: clip;
width: 100%;

  }





  .slideshow {
	display: flex;
	padding: 0;
	margin: 0;
  width: 100%;
  }
  .content {
	width: 190.7%;
display: grid;
place-items: center;
	list-style: none;
margin-right: 0.5%;
flex-shrink: 0;
  }





  .slideshow {
	display: flex;
	animation: loop-slide 7s infinite linear  both;
  }

  .wrap2 {
	display: flex;
	align-items: center;
  height: auto;
  overflow: clip;
  margin-top: 0px;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
background-color:#F0ECE9 ;
  }



  .slideshow2 {
	display: flex;
  animation: loop-slide-step2 3s infinite steps(8);
  flex-shrink: 0;
  width: 85%;
  }
  .content2 {
	width: 200vw;

	list-style: none;

  }

  .slideshow2{
	display: flex;

  }
  @keyframes loop-slide {
	from {
	  transform: translateX(0);
	}
	to {
	  transform: translateX(-100%);
	}
  }

  @keyframes loop-slide2 {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0%);
    }
    }
 /* その他ここまで */




















/****************** pc ******************/
@media (min-width: 1100px) {


  #sec1{aspect-ratio: unset;
  height: 100vh;}

  .sides{        width: 3.6vw;
    left: 75vw;}
  .side{display: none;}
  .back{width: 3vw;
  position: absolute;
  bottom: 5%;
  margin-top: 0;
  }

.ttr4{top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}

.job{width: 20vw;
height: 100vh;
position: fixed;
top: 0;
right: 0;
display: grid;
place-items: center;
}

.ttr3{ top: 50%;
transform: translateY(-50%);}
.ttr3{margin-top: -21.5%;}

.ttr2{ top: 50%;
  transform: translateY(-50%);}

  .ttr2{margin-top: -37%;}

.job1{position: absolute;
  left: 0;
  top: 0;
height: 100%;
width: 100%;}

.job1 img{object-fit: cover;
  width: 100%;
height: 100%;}

.job .hg{width: 13vw;
position: relative;
}
.job .link-row{flex-direction: column;
  gap: 1.2vw;
  flex-shrink: 0;
margin-bottom: 0;}
.job .link-unit{width: 100%;
  flex-shrink: 0;
display: flex;}
.job .link-unit img{width: 5vw;
  max-width: 65px;
flex-shrink: 0;}

.job .link-unit p{margin: 0;
  font-size: clamp(12px, 1.3vw, 18px);
  text-align: left;
  margin-top: auto;
  flex-shrink: 0;
  margin-bottom: auto;
margin-left: 1.5vw;}

.long{position: relative;
}

#pc{display: block;}
.roll{width: 100%;
  overflow-x: hidden;
  overflow: clip;
margin:auto ;
display: flex;}
.wrapper{width: 40vw;
margin-left: 0;}
#sp{display: none;}
.broke {
  position: relative;
z-index: 100;}
.roll{
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
.gedan{width: 100%;
height: 100vh;
position: relative;

position: sticky;
top: 0;
}

.hidarino{position: sticky;
  overflow: clip;
  width: 40vw;
  height: 100vh;
left: 0;
top: 0;
object-fit: cover;
background-color: #B7100F;
}

.hidarino img{height: 100%;
object-fit: cover;}

.tree1 .nedan{bottom: 7%;}


.anidelay12{animation-delay: 2.7s!important;}
.anidelay13{animation-delay: 2.8s!important;}
.anidelay14{animation-delay: 2.9s!important;}
.anidelay15{animation-delay: 3s!important;}
.anidelay16{animation-delay: 3.1s!important;}


.tr30xx{    margin-left: 60%;
  margin-top: -20%;}
.hg1{width: 350px;
margin-left: auto;
margin-right: auto;}
  .hg{width: 65%;
width: 350px;}

}


@media (min-width: 1400px) {

  .hg{
    width: 65%;
    max-width: 450px;}
}