@charset "UTF-8";
html {
  overflow-x: hidden;
}
@media screen and (min-width: 721px) {
  html {
    font-size: 0.82vw;
  }
}
@media screen and (min-width: 1221px) {
  html {
    font-size: 10px;
  }
}
@media screen and (max-width: 720px) {
  html {
    font-size: 1.334vw;
  }
}

body {
  margin: 0;
  font-family: "Open Sans", "Arial", "メイリオ", "Meiryo", sans-serif;
  overflow-x: hidden;
}
@media screen and (min-width: 721px) {
  body {
    font-size: 16px;
  }
}
@media screen and (max-width: 720px) {
  body {
    font-size: 14px;
  }
}

img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
}
@media screen and (max-width: 720px) {
  img[src$="_pc.png"], img[src$="_pc.jpg"] {
    display: none !important;
  }
}
@media screen and (min-width: 721px) {
  img[src$="_sp.png"], img[src$="_sp.jpg"] {
    display: none !important;
  }
}

a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  opacity: 0.8;
}

h1, h2, h3, h4, h5, p, dl, dt, dd, ul, ol, li, figure {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@media screen and (max-width: 720px) {
  .pc_only {
    display: none !important;
  }
}

@media screen and (min-width: 721px) {
  .sp_only {
    display: none !important;
  }
}

* {
  box-sizing: border-box;
}
*::before, *::after {
  box-sizing: border-box;
}

figure > figcaption {
  text-align: left;
}
@media screen and (min-width: 721px) {
  figure > figcaption {
    font-size: 12px;
    line-height: 1.5em;
    margin-top: 5px;
  }
}
@media screen and (max-width: 720px) {
  figure > figcaption {
    font-size: 10px;
    line-height: 1.5;
    margin-top: 7px;
    font-feature-settings: "palt";
    letter-spacing: -0.07em;
  }
}

.wrapper {
  display: grid;
  min-height: 100vh;
  grid-template-rows: 1fr auto;
}

#main {
  padding: 0 0 0 0;
}

#km_Header {
  border-bottom: solid 1px #d7d7d7 !important;
}
#km_Header .logo img {
  /*width: 300px;*/
}
@media screen and (max-width: 720px) {
  #km_Header .logo img {
    /*width: 200px;*/
  }
}

.select-ttl {
  text-align: center;
}
.select-ttl > h3 {
  font-size: 3rem;
  position: relative;
}
@media screen and (max-width: 720px) {
  .select-ttl > h3 {
    font-size: 3.6rem;
  }
}
.select-ttl > h3::after {
  content: "";
  width: 20rem;
  height: 1px;
  border-bottom: 1.5px solid #000;
  position: absolute;
  bottom: -45%;
  left: 50%;
  transform: translate(-50%);
}
@media screen and (max-width: 720px) {
  .select-ttl > h3::after {
    width: 20rem;
    bottom: -4.5vw;
  }
}
.select-ttl > h2 {
  margin-top: 4rem;
  font-size: 4.6rem;
  position: relative;
}
@media screen and (max-width: 720px) {
  .select-ttl > h2 {
    margin-top: 6rem;
    font-size: 4.8rem;
  }
}

.visit_movie {
  opacity: 1;
  visibility: visible;
}
.visit_movie__inner {
  width: 100%;
  height: 100dvh;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
}
.visit_movie__inner _::-webkit-full-page-media, .visit_movie__inner _:future, :root .visit_movie__inner {
  height: 100vh;
}
.visit_movie__inner > video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 720px) {
  .visit_movie__inner > video {
    margin: 0 auto;
    display: block;
    -o-object-fit: contain;
       object-fit: contain;
  }
}
.visit_movie.is-remove {
  transition: all 0.3s;
  opacity: 0;
  visibility: hidden;
}

.select {
  display: flex;
}
@media screen and (max-width: 720px) {
  .select {
    flex-direction: column;
  }
}
.select__box01 {
  width: 100%;
  min-height: 46.6rem;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
@media screen and (max-width: 720px) {
  .select__box01 {
    min-height: 48.6rem;
  }
}
.select__box01::after {
  content: "";
  display: block;
  width: 100%;
  height: 46.6rem;
  background-image: url(../img/history01.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 0.3s ease-out;
  position: absolute;
  top: 0;
}
@media screen and (max-width: 720px) {
  .select__box01::after {
    height: 100%;
    background-image: url(../img/history01.jpg);
    background-size: 100% 100%;
  }
}
.select__box01:hover:after {
  opacity: 0.8;
  transform: scale(1.1);
}
.select__box02 {
  width: 100%;
  min-height: 46.6rem;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
@media screen and (max-width: 720px) {
  .select__box02 {
    min-height: 48.6rem;
  }
}
.select__box02::after {
  content: "";
  display: block;
  width: 100%;
  height: 46.6rem;
  background-image: url(../img/history02.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: all 0.3s ease-out;
  position: absolute;
  top: 0;
}
@media screen and (max-width: 720px) {
  .select__box02::after {
    height: 100%;
    background-image: url(../img/history02.jpg);
    background-size: 100% 100%;
  }
}
.select__box02:hover:after {
  opacity: 0.8;
  transform: scale(1.1);
}
.select__contents {
  padding: 6rem 0 8.5rem;
  width: 54rem;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
@media screen and (max-width: 720px) {
  .select__contents {
    padding: 7rem 0 9.5rem;
    width: 59rem;
  }
}
.select__contents > h3 {
  font-size: 2.8rem;
  position: relative;
}
@media screen and (max-width: 720px) {
  .select__contents > h3 {
    font-size: 2.8rem;
  }
}
.select__contents > h3::after {
  content: "";
  width: 15rem;
  height: 1px;
  border-bottom: 1.5px solid #000;
  position: absolute;
  bottom: -45%;
  left: 50%;
  transform: translate(-50%);
}
@media screen and (max-width: 720px) {
  .select__contents > h3::after {
    width: 15rem;
    bottom: -3vw;
  }
}
.select__contents > h2 {
  margin-top: 4rem;
  font-size: 3.8rem;
  position: relative;
}
@media screen and (max-width: 720px) {
  .select__contents > h2 {
    margin-top: 4rem;
    font-size: 3.8rem;
  }
}
.select__contents > h2::after {
  content: "";
  width: 2rem;
  height: 2rem;
  border-top: solid 2px #000;
  border-right: solid 2px #000;
  transform: rotate(135deg);
  position: absolute;
  bottom: -85.5%;
  left: 50%;
}
@media screen and (max-width: 720px) {
  .select__contents > h2::after {
    width: 2rem;
    height: 2rem;
    bottom: -104.5%;
  }
}

.start {
  padding: 7.8rem 0 9rem;
  background-image: url(../img/bg-start-pc.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}
@media screen and (max-width: 720px) {
  .start {
    padding: 10rem 0 6rem;
    background-image: url(../img/bg-start-sp.jpg);
    font-size: 2.4rem;
  }
}
.start__box01 > h2 {
  font-size: 3.4rem;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
}
@media screen and (max-width: 720px) {
  .start__box01 > h2 {
    font-size: 4.8rem;
  }
}
.start__box01 > p {
  margin-top: 3.3rem;
}
@media screen and (max-width: 720px) {
  .start__box01 > p {
    margin-top: 8rem;
  }
}
.start__box02 > a {
  margin: 5.8rem auto 0;
  padding: 1.5rem 0;
  width: 260px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 4rem;
  display: block;
  cursor: pointer;
  position: relative;
}
@media screen and (max-width: 720px) {
  .start__box02 > a {
    margin: 8rem auto 0;
    padding: 10px 0;
    width: 200px;
    border-radius: 5rem;
  }
}
.start__box02 > a::after {
  content: "";
  display: block;
  transform: scale(1.3);
  width: 10px;
  height: 10px;
  border-top: solid 1px #000;
  border-right: solid 1px #000;
  transform: rotate(135deg);
  position: absolute;
}
@media screen and (min-width: 721px) {
  .start__box02 > a::after {
    top: 38%;
    right: 12%;
  }
}
@media screen and (max-width: 720px) {
  .start__box02 > a::after {
    top: 36%;
    right: 9%;
  }
}
.start__box02 > a.is-opened::after {
  content: "";
  width: 10px;
  height: 10px;
  transform: rotate(-45deg);
}
@media screen and (min-width: 721px) {
  .start__box02 > a.is-opened::after {
    top: 48%;
    right: 12%;
  }
}
@media screen and (max-width: 720px) {
  .start__box02 > a.is-opened::after {
    top: 46%;
    right: 9%;
  }
}
.start__accordion {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 200ms linear 0ms;
}
.start__inner {
  margin-top: 5rem;
}
.start__inner > p + p {
  margin-top: 5.4rem;
}

.op {
  opacity: 1 !important;
}

.op01 {
  opacity: 0.6;
}

.op02 {
  opacity: 0.4;
}

.op03 {
  opacity: 0.2;
}

.innovation {
  margin-top: 5rem;
  padding: 5rem 0 9rem;
}
@media screen and (max-width: 720px) {
  .innovation {
    margin-top: 7.3rem;
    padding: 7.2rem 0 13.5rem;
  }
}
.innovation__text {
  text-align: center;
}
@media screen and (min-width: 721px) {
  .innovation__text {
    margin-top: 40px;
  }
}
@media screen and (max-width: 720px) {
  .innovation__text {
    margin-top: 25px;
  }
}
.innovation__story {
  margin-top: 5rem;
}
@media screen and (max-width: 720px) {
  .innovation__story {
    margin-top: 5rem;
  }
}
.innovation__story--list {
  display: flex;
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
  flex-wrap: wrap;
}
@media screen and (max-width: 720px) {
  .innovation__story--list {
    -moz-column-gap: 3.5rem;
         column-gap: 3.5rem;
  }
}
.innovation__story--list > li {
  margin-bottom: 3rem;
  width: 28.4rem;
  border: 1px solid #000;
}
@media screen and (max-width: 720px) {
  .innovation__story--list > li {
    margin-bottom: 4rem;
    width: 32rem;
  }
}
.innovation__story--list > li > a p {
  height: 6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 1.5;
}
@media screen and (max-width: 720px) {
  .innovation__story--list > li > a p {
    height: 9.5rem;
  }
}
.innovation__story--list .new-flag {
  position: relative;
}
.innovation__story--list .new-flag::before {
  content: "";
  width: 9rem;
  height: 7rem;
  background-image: url(../img/new.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 720px) {
  .innovation__story--list .new-flag::before {
    width: 10.8rem;
    height: 8.4rem;
  }
}

@media screen and (min-width: 721px) {
  .content {
    padding: 80px 0 0;
  }
}
@media screen and (max-width: 720px) {
  .content {
    padding: 40px 0;
  }
}
.content-inner {
  margin: auto;
}
@media screen and (min-width: 721px) {
  .content-inner {
    max-width: 1220px;
    width: 87.143%;
  }
}
@media screen and (max-width: 720px) {
  .content-inner {
    width: 67.5rem;
  }
}

.title-h2 {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  text-align: center;
}
@media screen and (min-width: 721px) {
  .title-h2 {
    font-size: 46px;
    line-height: 1.609em;
  }
}
@media screen and (max-width: 720px) {
  .title-h2 {
    font-size: 24px;
    line-height: 1.542em;
  }
}
.title-h2-01 {
  font-weight: 300;
}
@media screen and (min-width: 721px) {
  .title-h2-01 {
    font-size: 34px;
  }
}
@media screen and (min-width: 721px) {
  .title-h3 {
    font-size: 24px;
    line-height: 1.5em;
  }
}
@media screen and (max-width: 720px) {
  .title-h3 {
    font-size: 15px;
    line-height: 1.334em;
    font-feature-settings: "palt";
    letter-spacing: -0.05em;
  }
}

.btnNext {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0;
  position: relative;
}
@media screen and (min-width: 721px) {
  .btnNext {
    margin: 0 10px;
    width: 58rem;
    height: 12rem;
  }
}
@media screen and (max-width: 720px) {
  .btnNext {
    width: 67.5rem;
    height: 22rem;
  }
}
.btnNext-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-size: cover;
}
@media screen and (min-width: 721px) {
  .btnNext-inner {
    width: 56rem;
    height: 10rem;
  }
}
@media screen and (max-width: 720px) {
  .btnNext-inner {
    width: 65.1rem;
    height: 19.1rem;
  }
}
.btnNext-inner.pt01 {
  background-image: url(../img/bg_btn_001.jpg);
}
.btnNext-inner.pt02 {
  background-image: url(../img/bg_btn_002.jpg);
}
.btnNext-title {
  font-weight: bold;
}
@media screen and (min-width: 721px) {
  .btnNext-title {
    font-size: 24px;
    line-height: 1.167em;
  }
}
@media screen and (max-width: 720px) {
  .btnNext-title {
    font-size: 16px;
    line-height: 1.188em;
  }
}
@media screen and (min-width: 721px) {
  .btnNext-text {
    font-size: 22px;
    line-height: 1.182em;
    margin-top: 10px;
  }
}
@media screen and (max-width: 720px) {
  .btnNext-text {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.393em;
  }
}
.btnNext-bg {
  background-color: #fff;
}
.btnNext::after {
  content: "";
  background-image: url(../img/img_arrow_001.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  width: 16px;
  height: 29px;
  right: 1.875em;
  transform: translateY(-50%);
}
@media screen and (max-width: 720px) {
  .btnNext::after {
    width: 11px;
    height: 20px;
  }
}
.btnNext-ht::after {
  height: 18px;
}
.btnNext.start-btn::after {
  background-image: url(../img/start-btn.png);
  width: 35px;
  height: 35px;
}
@media screen and (max-width: 720px) {
  .btnNext.start-btn::after {
    width: 25px;
    height: 25px;
  }
}
.btnNext-border {
  border: solid 1px #000;
}
@media screen and (min-width: 721px) {
  .btnNext-border {
    margin: 0 10px;
    height: 8rem;
  }
}
@media screen and (max-width: 720px) {
  .btnNext-border {
    height: 11rem;
  }
}

@media screen and (min-width: 721px) {
  .index {
    display: flex;
    justify-content: center;
  }
}
@media screen and (max-width: 720px) {
  .index > li + li {
    margin-top: 25px;
  }
}

.history {
  overflow-x: hidden;
  text-align: center;
}
@media screen and (min-width: 721px) {
  .history {
    padding-top: 70px;
  }
}
@media screen and (max-width: 720px) {
  .history {
    padding-top: 35px;
  }
}
@media screen and (min-width: 721px) {
  .history-text {
    margin-top: 40px;
  }
}
@media screen and (max-width: 720px) {
  .history-text {
    margin-top: 25px;
  }
}
.history-slider {
  margin: auto;
}
@media screen and (min-width: 721px) {
  .history-slider {
    max-width: 1220px;
    margin-top: 50px;
  }
}
@media screen and (max-width: 720px) {
  .history-slider {
    margin-top: 25px;
  }
}
.history-slider .bg {
  background-size: cover;
}
@media screen and (min-width: 721px) {
  .history-slider .bg {
    height: 724px;
  }
}
@media screen and (max-width: 1150px) {
  .history-slider .bg {
    height: 850px;
  }
}
@media screen and (max-width: 1000px) {
  .history-slider .bg {
    height: 1000px;
  }
}
@media screen and (max-width: 850px) {
  .history-slider .bg {
    height: 1150px;
  }
}
@media screen and (max-width: 720px) {
  .history-slider .bg {
    height: 650px;
  }
}
@media screen and (min-width: 721px) {
  .history-slider .bg-01 {
    background-image: url(../img/bg-slider-001_pc.jpg);
  }
}
@media screen and (max-width: 720px) {
  .history-slider .bg-01 {
    background-image: url(../img/bg-slider-001_sp.jpg);
  }
}
@media screen and (min-width: 721px) {
  .history-slider .bg-02 {
    background-image: url(../img/bg-slider-002_pc.jpg);
  }
}
@media screen and (max-width: 720px) {
  .history-slider .bg-02 {
    background-image: url(../img/bg-slider-002_sp.jpg);
  }
}
@media screen and (min-width: 721px) {
  .history-slider .bg-03 {
    background-image: url(../img/bg-slider-003_pc.jpg);
  }
}
@media screen and (max-width: 720px) {
  .history-slider .bg-03 {
    background-image: url(../img/bg-slider-003_sp.jpg);
  }
}
@media screen and (min-width: 721px) {
  .history-slider .bg-04 {
    background-image: url(../img/bg-slider-004_pc.jpg);
  }
}
@media screen and (max-width: 720px) {
  .history-slider .bg-04 {
    background-image: url(../img/bg-slider-004_sp.jpg);
  }
}
.history-slider-title {
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
  margin: auto;
}
@media screen and (min-width: 721px) {
  .history-slider-title {
    font-size: 55px;
    width: 520px;
  }
}
@media screen and (max-width: 720px) {
  .history-slider-title {
    font-size: 22px;
    width: 260px;
    padding: 5px 0;
  }
}
.history-slider-inner {
  margin: auto;
}
@media screen and (min-width: 721px) {
  .history-slider-inner {
    padding: 45px 100px;
  }
}
@media screen and (max-width: 720px) {
  .history-slider-inner {
    padding: 25px 26px;
  }
}
.history .btnNext {
  margin: auto;
}
@media screen and (min-width: 721px) {
  .history .btnNext {
    margin-top: 50px;
  }
}
@media screen and (max-width: 720px) {
  .history .btnNext {
    margin-top: 30px;
  }
}

.slide-layout {
  display: flex;
  justify-content: space-between;
}
@media screen and (min-width: 721px) {
  .slide-layout {
    margin-top: 50px;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout {
    flex-direction: column;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout.re {
    flex-direction: column-reverse;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout.mtup {
    margin-top: 90px;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout.mtup {
    margin-top: 30px;
  }
}
.slide-layout > li {
  display: flex;
}
.slide-layout > li.text {
  flex-direction: column;
  text-align: left;
}
@media screen and (max-width: 720px) {
  .slide-layout > li.text {
    margin-top: 20px;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li.text > p {
    margin-top: 20px;
    line-height: 2;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout > li.text > p {
    margin-top: 10px;
    font-size: 11px;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout > li.img {
    margin-top: 15px;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li > figure + figure {
    margin-left: 20px;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout > li > figure + figure {
    margin-left: 10px;
  }
}
.slide-layout > li > figure > img {
  margin: auto;
}
@media screen and (max-width: 720px) {
  .slide-layout > li > figure.sp-col {
    display: flex;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout > li > figure.sp-col img {
    margin-top: 0;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout > li > figure.sp-col figcaption {
    margin-top: 0px;
    margin-left: 5PX;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li > figure.size01 {
    width: 51.991%;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout > li > figure.size01 > img {
    width: 67.887%;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li > figure.size02 {
    width: 43.035%;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout > li > figure.size02 > img {
    width: 67.887%;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li > figure.size03 {
    width: 49.254%;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout > li > figure.size03 > img {
    width: 56.098%;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li > figure.size04 {
    width: 47.762%;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout > li > figure.size04 > img {
    width: 49.085%;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li > figure.size05 {
    width: 44.361%;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout > li > figure.size05 > img {
    width: 50.897%;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li > figure.size06 {
    width: 51.379%;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout > li > figure.size06 > img {
    width: 44.296%;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li > figure.size07 {
    width: 49.005%;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout > li > figure.size07 > img {
    width: 64.228%;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li > figure.size08 {
    width: 48.01%;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout > li > figure.size08 > img {
    width: 62.602%;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li > figure.size09 {
    width: 48.599%;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout > li > figure.size09 > img {
    width: 44.405%;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li > figure.size10 {
    width: 47.664%;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout > li > figure.size10 > img {
    width: 44.405%;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li > figure.size11 {
    width: 36.253%;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li > figure.size12 {
    width: 59.675%;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li.w-t01 {
    width: 55.227%;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li.w-i01 {
    width: 32.15%;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout > li.w-i01 {
    margin: 15px auto 0;
    width: 48.469%;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li.w-i02 {
    width: 31.756%;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout > li.w-i02 {
    margin: 15px auto 0;
    width: 103.244%;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li.w-t02 {
    width: 63.511%;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li.w-t03 {
    width: 55.918%;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li.w-i03 {
    width: 39.645%;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout > li.w-i03 {
    margin: 15px auto 0;
    width: 100%;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li.w-t04 {
    width: 54.734%;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li.w-i04 {
    width: 40.928%;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout > li.w-i04 {
    margin: 15px auto 0;
    width: 100%;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li.w-t05 {
    width: 47.141%;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout > li.w-t05 > p {
    margin-top: 20px;
  }
}
@media screen and (min-width: 721px) {
  .slide-layout > li.w-i05 {
    margin-top: 50px;
    width: 48.916%;
  }
}
@media screen and (max-width: 720px) {
  .slide-layout > li.w-i05 {
    margin: 20px auto 0;
    width: 88.649%;
  }
}

.slick-prev,
.slick-next {
  position: absolute;
  z-index: 15;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  outline: none;
}
.slick-prev-his::after,
.slick-next-his::after {
  content: "";
  position: absolute;
  z-index: 15;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  outline: none;
}
@media screen and (min-width: 721px) {
  .slick-prev-his::after,
.slick-next-his::after {
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    height: 17px;
    width: 17px;
    top: 10px;
    left: 9px;
  }
}
@media screen and (max-width: 720px) {
  .slick-prev-his::after,
.slick-next-his::after {
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    height: 12px;
    width: 12px;
    top: 0px;
    left: 2px;
  }
}
@media screen and (min-width: 721px) {
  .slick-prev-kv,
.slick-next-kv {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    height: 17px;
    width: 17px;
  }
}
@media screen and (max-width: 720px) {
  .slick-prev-kv,
.slick-next-kv {
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    height: 16px;
    width: 16px;
  }
}

@media screen and (min-width: 721px) {
  .slick-next-his::after {
    top: -17px;
    left: -17px;
  }
}
@media screen and (max-width: 720px) {
  .slick-next-his::after {
    top: -10px;
    left: -6px;
  }
}
@media screen and (min-width: 721px) {
  .slick-next-his::before {
    top: -42px;
    left: -38px;
  }
}
@media screen and (max-width: 720px) {
  .slick-next-his::before {
    top: -31px;
    left: -18px;
  }
}

.slick-prev {
  transform: rotate(-135deg);
}
@media screen and (min-width: 721px) {
  .slick-prev {
    left: -4%;
  }
}
@media screen and (max-width: 720px) {
  .slick-prev {
    left: 2.5%;
  }
}
.slick-prev-kv {
  left: 2.5%;
}

.slick-next {
  transform: rotate(45deg);
}
@media screen and (min-width: 721px) {
  .slick-next {
    right: -4%;
  }
}
@media screen and (max-width: 720px) {
  .slick-next {
    right: 2.5%;
  }
}
.slick-next-kv {
  right: 2.5%;
}

.slick-disabled {
  display: none !important;
}

.modal {
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
}

.modal-bg {
  background: rgba(0, 0, 0, 0.8);
  height: 100vh;
  position: absolute;
  width: 100%;
}

.modal-content {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (min-width: 721px) {
  .modal-content {
    width: 900px;
    height: 519px;
  }
}
@media screen and (max-width: 720px) {
  .modal-content {
    width: 337px;
    height: 194px;
  }
}

.modal-video {
  width: 100%;
  height: 100%;
}

.modal-close {
  position: relative;
  display: block;
  margin: auto;
  margin-right: 0;
}
@media screen and (min-width: 721px) {
  .modal-close {
    width: 50px;
    height: 50px;
  }
}
@media screen and (max-width: 720px) {
  .modal-close {
    width: 25px;
    height: 28px;
  }
}
.modal-close::after, .modal-close::before {
  position: absolute;
  content: "";
  background-color: #fff;
}
@media screen and (min-width: 721px) {
  .modal-close::after, .modal-close::before {
    width: 34px;
    height: 2px;
    top: 50%;
    left: 50%;
  }
}
@media screen and (max-width: 720px) {
  .modal-close::after, .modal-close::before {
    width: 24px;
    height: 1px;
    top: 50%;
    left: 50%;
  }
}
.modal-close::after {
  transform: translate(-50%, -50%) rotate(45deg);
}
.modal-close::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}