#mv {  }
#mv .slick-dotted.slick-slider { margin-bottom: 0; }
#mv .mv-slider .slick-dots { bottom:30px; display:none; }
#mv .mv-slider .slick-dots li { width:10px; height:10px; }
#mv .mv-slider .slick-dots li button {
  width:100%;
  height:100%;
  border-radius: 50%;
  background: #fff;
}
#mv .mv-slider .slick-dots li.slick-active button { background:var(--color-footer-bg); }
#mv .mv-slider .slick-dots li button:before { display:none; }
#mv .mv-slider__item {  }
#mv .mv-slider__item .cap { text-align:right; font-size:12px; }
#mv .mv-ac { margin-top:20px; }
#mv .mv-ac ul { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
#mv .mv-ac ul li {
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px 0;
  text-align:center;
  border-left: solid 1px var(--color-primary);
  font-size: var(--fs-md);
  letter-spacing:0.1em;
}
#mv .mv-ac ul li:last-child {
  border-right: solid 1px var(--color-primary);
}

/* mv animation */
@keyframes zoomOutSlow {
  0% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes revealFromLeft {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes fadeIn {
  0% { opacity: 0; transform:translateY(-20px); }
  100% { opacity:1; transform:translateY(0); }
}
#mv .mv-slider__item .img { position:relative; overflow: hidden; }
#mv .mv-slider__item .img img { display:block; }
#mv .mv-slider__item .img .over1 {
  position:absolute;
  top:0;
  left:0;
  z-index: 10;
  width:100%;
  height:100%;
}
#mv .mv-slider__item .img .over2 {
  position:absolute;
  top:5vw;
  left:50%;
  transform:translateX(-50%);
  z-index: 10;
  width: 50%;
  overflow:hidden;
}
#mv .mv-slider__item picture {
  display:block;
  backface-visibility: hidden;
}
#mv .mv-slider__item picture.back {
  will-change: transform;
  transform-origin: center center;
}
#mv .mv-slider__item picture img.is-animate {
  animation: zoomOutSlow 4s linear forwards;  
}
#mv .mv-slider__item .img .over1 img.is-animate {
  display:block;
  width:100%;
  clip-path: inset(0 100% 0 0);
  animation: revealFromLeft 2s linear forwards;
  animation-delay:3.8s;
}
#mv .mv-slider__item .img .over2 img.is-animate {
  display:block;
  width:100%;
  clip-path: inset(0 100% 0 0);
  animation: revealFromLeft 2s linear forwards;
  animation-delay:5.8s;
}
#mv .mv-slider__item .replay {  
  cursor:pointer;
  position:absolute;
  bottom:1vw;
  right:1vw;
  background:#2e3f9e;
  color:#fff;
  font-size:12px;
  padding:5px 1em;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.4s ease;
  z-index: 11;
}
#mv .mv-slider__item .img.is-ended .replay {
  opacity: 1;
  pointer-events: auto;
}

/*
スライドにしたときはこっちをactive
#mv .mv-slider__item img { animation: zoomOutSlow 6000ms linear forwards; }
*/


#info {
  margin:60px 0;
}
#info h2 {
  text-align: center;
  letter-spacing: 2px;
  padding-bottom: 6px;
  border-bottom: solid 1px #2E3F9E;
  margin-bottom: 25px;
}
#info h3 {
  margin-top: 25px;
  color: #2E3F9E;
  font-size: 24px;
  text-align: center;
  letter-spacing: 2px;
}
#info .b {
  margin-top: 30px;
  font-size: var(--fs-xxl);
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px;
  line-height: 135%;
}
#info .c {
  margin-top: 30px;
  font-size: var(--fs-md);
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px;
  line-height: 135%;
  border: 2px solid #aaa;
  padding: 1em;
}
#info .cta-btn {
  display:block;
  margin:25px auto;
  max-width:280px;
  width: 100%;
  height:auto;
}
#info .cta-btn a {
  display:flex;
  justify-content:center;
  align-items:center;
  font-size: var(--fs-s);
  height:50px;
}
#info .cta-btn:hover a { filter: brightness(1.1) }

#contents { margin-top:50px; }
#contents .cont-block a {
  display: flex;
}

#contents .cont-block__img {
  width: 55%;
  max-height:600px;
  overflow: hidden;
  position: relative;
}
#contents .cont-block__img:after {
  content: "";
  display:block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  opacity: .3;
}
#contents .cont-block a img {
  display:block;
  width:100%;
  height:100%;
  transform:scale(1.05);
  transition: all ease .6s;
  filter: brightness(1.2) contrast(1.1);
}
#contents .cont-block__text {
  width: 45%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
  color: #fff;
  background: #1c2338;
  padding: 80px 60px;
  overflow: hidden;
}
#contents .cont-block__text h2 {
  font-size: var(--fs-title);
  line-height:1;
  width: 100%;
  position:relative;
}
#contents .cont-block__text h2:before {
  content: "";
  display:block;
  width:150%;
  height: 1px;
  background:#fff;
  position:absolute;
  top: 95%;
  left: 0;
  transition:all ease .6s;
  transition-delay: .6;
}
#contents .cont-block__text .lead {
  font-size: var(--fs-md);
}
#contents .cont-block:nth-of-type(even) a { flex-direction: row-reverse; }
#contents .cont-block:nth-of-type(even) .cont-block__img img {
  filter: brightness(0.8) contrast(1.1);
}
#contents .cont-block:nth-of-type(even) .cont-block__img:after {
  background: #1c2338;
}
#contents .cont-block:nth-of-type(even) .cont-block__text {
  background: #f7f6f3;;
  color: #1c2338;
}
#contents .cont-block:nth-of-type(even) .cont-block__text h2:before {
  background:#1c2338;
}
#contents .cont-block:nth-of-type(even) .cont-block__text .moreBtn {
  color:#1c2338;
}
#contents .cont-block:nth-of-type(even) .cont-block__text .moreBtn:before,
#contents .cont-block:nth-of-type(even) .cont-block__text .moreBtn:after {
  background: #1c2338;
}

#contents .cont-block a:hover .moreBtn:before { width: calc(100% + 12px); }
#contents .cont-block a:hover .moreBtn:after { transform: translateX(12px) rotate(45deg); }
#contents .cont-block a:hover img { transform: scale(1.05); filter: brightness(1.1); }


@media screen and (max-width:820px){
  #mv .mv-ac ul {
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 20px;
  }
  #mv .mv-ac ul li:nth-of-type(2n) { border-right: solid 1px var(--color-primary); }
  #mv .mv-slider__item .cap { font-size:10px; }
}
@media screen and (max-width:600px){
  #mv .mv-slider__item .img .over2 { top:27%; width: 65%; }
  #mv .mv-slider__item .img .over2 img { filter:drop-shadow(0 2px 6px rgba(0,0,0,0.8) ); }
  #mv .mv-slider__item .replay { font-size:10px; }
  #mv .mv-slider__item .cap { font-size:8px; }
  
  #mv .mv-slider .slick-dots { bottom: 40px; }
  #mv .mv-ac ul li { padding:10px 0; font-size:13px; }
  #info h2 { font-size:1.3rem; margin-bottom:15px; }
  #info h3 { font-size:1.6rem; margin-top:20px; }
  #info .b { font-size:2.2rem margin-top:25px; }
  #info .c { font-size:1.5rem; }
  #info .cta-btn { max-width:240px; }
  #info .cta-btn a { font-size:1.4rem; }
  #contents .cont-block a { display:block; }
  #contents .cont-block__img,#contents .cont-block__text { width:100%; }
  #contents .cont-block__text { padding:60px 40px; }
  #contents .cont-block__text .lead { margin:30px 0; font-size:16px; }
}