@charset 'UTF-8';

/* override */
body {
    font-family: var(--font-family--gothic);
    letter-spacing: normal;
    color: #666;
}

.breadcrumb {
    display: none;
}

/* products */
.list-new-products[data-v-1007699e] {
  max-width: calc(1280px + 4rem)
}

@media (min-width: 768px) {
  .list-new-products[data-v-1007699e] {
    margin: 12rem auto;
    padding: 0 2rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .list-new-products[data-v-1007699e] {
    margin: 12rem auto
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .list-new-products[data-v-1007699e] {
    margin: calc((120 / var(--vw-base-width)) * 100vw) auto
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .list-new-products[data-v-1007699e] {
    padding: 0rem 2rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .list-new-products[data-v-1007699e] {
    padding: calc((0 / var(--vw-base-width)) * 100vw) calc((20 / var(--vw-base-width)) * 100vw)
  }
}

@media (min-width: 768px) {
  .list-new-products .heading[data-v-1007699e] {
    margin-bottom: 5rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .list-new-products .heading[data-v-1007699e] {
    margin-bottom: 5rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .list-new-products .heading[data-v-1007699e] {
    margin-bottom: calc((50 / var(--vw-base-width)) * 100vw)
  }
}

.list-keyword[data-v-4297eedd] {
  background-color: #f8f8f8
}

@media (min-width: 768px) {
  .list-keyword[data-v-4297eedd] {
    padding: 12rem 3rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .list-keyword[data-v-4297eedd] {
    padding: 12rem 3rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .list-keyword[data-v-4297eedd] {
    padding: calc((120 / var(--vw-base-width)) * 100vw) calc((30 / var(--vw-base-width)) * 100vw)
  }
}

.inner[data-v-4297eedd] {
  max-width: 1000px;
  margin: 0 auto
}

@media (min-width: 768px) {
  .heading[data-v-4297eedd] {
    margin-bottom: 5rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .heading[data-v-4297eedd] {
    margin-bottom: 6rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .heading[data-v-4297eedd] {
    margin-bottom: calc((60 / var(--vw-base-width)) * 100vw)
  }
}

.form[data-v-4297eedd] {
  margin: 0 auto;
  border-bottom: 2px solid #999
}

.form[data-v-4297eedd]::before,
.form[data-v-4297eedd]::after {
  display: block;
  width: 0;
  height: 0;
  content: ""
}

.form[data-v-4297eedd]::before {
  margin-top: calc((1 - var(--line-height)) * .5em)
}

.form[data-v-4297eedd]::after {
  margin-bottom: calc((1 - var(--line-height)) * .5em)
}

@media (min-width: 768px) {
  .form[data-v-4297eedd] {
    padding: 1.3rem 0;
    margin-bottom: 5rem;
    width: 39.6rem
  }
}

@media (max-width: 767px) {
  .form[data-v-4297eedd] {
    width: 100%
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .form[data-v-4297eedd] {
    padding: 1.5rem 0rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .form[data-v-4297eedd] {
    padding: calc((15 / var(--vw-base-width)) * 100vw) calc((0 / var(--vw-base-width)) * 100vw)
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .form[data-v-4297eedd] {
    margin-bottom: 4rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .form[data-v-4297eedd] {
    margin-bottom: calc((40 / var(--vw-base-width)) * 100vw)
  }
}

.form__inner[data-v-4297eedd] {
  display: flex;
  align-items: center
}

.form button[data-v-4297eedd] {
  flex-shrink: 0
}

.form i[data-v-4297eedd] {
  display: block;
  fill: #606770
}

@media (min-width: 768px) {
  .form i[data-v-4297eedd] {
    width: 1.8rem;
    height: 1.8rem;
    margin-right: 2.7rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .form i[data-v-4297eedd] {
    width: 2.6rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .form i[data-v-4297eedd] {
    width: calc((26 / var(--vw-base-width)) * 100vw)
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .form i[data-v-4297eedd] {
    height: 2.6rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .form i[data-v-4297eedd] {
    height: calc((26 / var(--vw-base-width)) * 100vw)
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .form i[data-v-4297eedd] {
    margin-right: 4rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .form i[data-v-4297eedd] {
    margin-right: calc((40 / var(--vw-base-width)) * 100vw)
  }
}

.form input[data-v-4297eedd] {
  flex-grow: 1;
  background: none
}

@media (min-width: 768px) {
  .form input[data-v-4297eedd] {
    font-size: 1.5rem
  }
}

@media (max-width: 767px) {
  .form input[data-v-4297eedd] {
    font-size: 2.6rem
  }
}

.keyword-heading[data-v-4297eedd] {
  text-align: center
}

.keyword-heading[data-v-4297eedd]::before,
.keyword-heading[data-v-4297eedd]::after {
  display: block;
  width: 0;
  height: 0;
  content: ""
}

.keyword-heading[data-v-4297eedd]::before {
  margin-top: calc((1 - var(--line-height)) * .5em)
}

.keyword-heading[data-v-4297eedd]::after {
  margin-bottom: calc((1 - var(--line-height)) * .5em)
}

@media (min-width: 768px) {
  .keyword-heading[data-v-4297eedd] {
    font-size: 1.5rem;
    margin-bottom: 2rem
  }
}

@media (max-width: 767px) {
  .keyword-heading[data-v-4297eedd] {
    font-size: 2.4rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .keyword-heading[data-v-4297eedd] {
    margin-bottom: 3rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .keyword-heading[data-v-4297eedd] {
    margin-bottom: calc((30 / var(--vw-base-width)) * 100vw)
  }
}

.keyword-container[data-v-4297eedd] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}

@media (min-width: 768px) {
  .keyword-container[data-v-4297eedd] {
    margin-top: -.8rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .keyword-container[data-v-4297eedd] {
    margin-top: -1rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .keyword-container[data-v-4297eedd] {
    margin-top: calc((-10 / var(--vw-base-width)) * 100vw)
  }
}

.keyword[data-v-4297eedd] {
  display: block;
  background-color: #fff;
  text-decoration: none;
  border: 1px solid #ebebeb;
  transition: opacity .2s
}

.keyword[data-v-4297eedd]::before,
.keyword[data-v-4297eedd]::after {
  display: block;
  width: 0;
  height: 0;
  content: ""
}

.keyword[data-v-4297eedd]::before {
  margin-top: calc((1 - var(--line-height)) * .5em)
}

.keyword[data-v-4297eedd]::after {
  margin-bottom: calc((1 - var(--line-height)) * .5em)
}

.keyword[data-v-4297eedd]:hover {
  opacity: .7
}

@media (min-width: 768px) {
  .keyword[data-v-4297eedd] {
    font-size: 1.2rem;
    padding: .5rem 1rem;
    border-radius: .4rem;
    margin: .8rem .4rem 0 0
  }
}

@media (max-width: 767px) {
  .keyword[data-v-4297eedd] {
    font-size: 2rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .keyword[data-v-4297eedd] {
    padding: .8rem 1.5rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .keyword[data-v-4297eedd] {
    padding: calc((8 / var(--vw-base-width)) * 100vw) calc((15 / var(--vw-base-width)) * 100vw)
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .keyword[data-v-4297eedd] {
    border-radius: .4rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .keyword[data-v-4297eedd] {
    border-radius: calc((4 / var(--vw-base-width)) * 100vw)
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .keyword[data-v-4297eedd] {
    margin: 1rem .8rem 0rem 0rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .keyword[data-v-4297eedd] {
    margin: calc((10 / var(--vw-base-width)) * 100vw) calc((8 / var(--vw-base-width)) * 100vw) calc((0 / var(--vw-base-width)) * 100vw) calc((0 / var(--vw-base-width)) * 100vw)
  }
}

.list-onayami[data-v-9521d676] {
  max-width: calc(1000px + 4rem);
  margin: 0 auto
}

@media (min-width: 768px) {
  .list-onayami[data-v-9521d676] {
    margin: 12rem auto;
    padding: 0 2rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .list-onayami[data-v-9521d676] {
    margin: 12rem auto
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .list-onayami[data-v-9521d676] {
    margin: calc((120 / var(--vw-base-width)) * 100vw) auto
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .list-onayami[data-v-9521d676] {
    padding: 0rem 2rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .list-onayami[data-v-9521d676] {
    padding: calc((0 / var(--vw-base-width)) * 100vw) calc((20 / var(--vw-base-width)) * 100vw)
  }
}

@media (min-width: 768px) {
  .heading[data-v-9521d676] {
    margin-bottom: 5rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .heading[data-v-9521d676] {
    margin-bottom: 5rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .heading[data-v-9521d676] {
    margin-bottom: calc((50 / var(--vw-base-width)) * 100vw)
  }
}

.item-container[data-v-9521d676] {
  display: flex;
  flex-wrap: wrap
}

.item[data-v-9521d676] {
  display: block;
  border: 1px solid #a39187;
  letter-spacing: .1em;
  text-decoration: none;
  text-align: center;
  transition: opacity .2s
}

.item[data-v-9521d676]::before,
.item[data-v-9521d676]::after {
  display: block;
  width: 0;
  height: 0;
  content: ""
}

.item[data-v-9521d676]::before {
  margin-top: calc((1 - var(--line-height)) * .5em)
}

.item[data-v-9521d676]::after {
  margin-bottom: calc((1 - var(--line-height)) * .5em)
}

.item[data-v-9521d676]:hover {
  opacity: .7
}

@media (min-width: 768px) {
  .item[data-v-9521d676] {
    font-size: 1.5rem;
    padding: 1.5rem
  }
}

@media (min-width: 768px) and (min-width: 768px) {
  .item[data-v-9521d676] {
    width: calc((99.9% - (1.6rem * (4 - 1))) / 4)
  }

  .item[data-v-9521d676]:nth-child(n+5) {
    margin-top: 1.6rem
  }

  .item[data-v-9521d676]:not(:nth-child(4n)):not(:last-child) {
    margin-right: 1.6rem
  }
}

@media (max-width: 767px) {
  .item[data-v-9521d676] {
    font-size: 2.6rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .item[data-v-9521d676] {
    width: calc((99.9% - (2rem * (2 - 1))) / 2)
  }

  .item[data-v-9521d676]:nth-child(n+3) {
    margin-top: 2rem
  }

  .item[data-v-9521d676]:not(:nth-child(2n)):not(:last-child) {
    margin-right: 2rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .item[data-v-9521d676] {
    width: calc((99.9% - (3.125vw * (2 - 1))) / 2)
  }

  .item[data-v-9521d676]:nth-child(n+3) {
    margin-top: 3.125vw
  }

  .item[data-v-9521d676]:not(:nth-child(2n)):not(:last-child) {
    margin-right: 3.125vw
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .item[data-v-9521d676] {
    padding: 2.4rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .item[data-v-9521d676] {
    padding: calc((24 / var(--vw-base-width)) * 100vw)
  }
}

@media (min-width: 768px) {
  .list-top[data-v-4f5269c6] {
    height: 63rem;
    position: relative
  }
}

.img-container[data-v-4f5269c6] {
  position: relative
}

@media (min-width: 768px) {
  .img-container[data-v-4f5269c6] {
    height: 100%
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .img-container[data-v-4f5269c6] {
    height: 47rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .img-container[data-v-4f5269c6] {
    height: calc((470 / var(--vw-base-width)) * 100vw)
  }
}

.img-container img[data-v-4f5269c6] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: "object-fit: cover;"
}

@media (min-width: 768px) {
  .text-container[data-v-4f5269c6] {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 6rem 2rem;
    background-color: rgba(248, 248, 248, 0.8)
  }
}

@media (max-width: 767px) {
  .text-container[data-v-4f5269c6] {
    background-color: #f8f8f8
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .text-container[data-v-4f5269c6] {
    padding: 6rem 2rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .text-container[data-v-4f5269c6] {
    padding: calc((60 / var(--vw-base-width)) * 100vw) calc((20 / var(--vw-base-width)) * 100vw)
  }
}

.nav[data-v-4f5269c6] {
  display: flex;
  flex-wrap: wrap
}

@media (min-width: 768px) {
  .nav[data-v-4f5269c6] {
    max-width: 820px;
    margin: 4rem auto 0
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .nav[data-v-4f5269c6] {
    margin: 5rem auto
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .nav[data-v-4f5269c6] {
    margin: calc((50 / var(--vw-base-width)) * 100vw) auto
  }
}

@media (min-width: 768px) {
  .nav__item[data-v-4f5269c6] {
    font-size: 1.6rem
  }
}

@media (min-width: 768px) and (min-width: 768px) {
  .nav__item[data-v-4f5269c6] {
    width: calc((99.9% - (1.5rem * (4 - 1))) / 4)
  }

  .nav__item[data-v-4f5269c6]:nth-child(n+5) {
    margin-top: 1.5rem
  }

  .nav__item[data-v-4f5269c6]:not(:nth-child(4n)):not(:last-child) {
    margin-right: 1.5rem
  }
}

@media (max-width: 767px) {
  .nav__item[data-v-4f5269c6] {
    font-size: 2.4rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .nav__item[data-v-4f5269c6] {
    width: calc((99.9% - (3rem * (2 - 1))) / 2)
  }

  .nav__item[data-v-4f5269c6]:nth-child(n+3) {
    margin-top: 3rem
  }

  .nav__item[data-v-4f5269c6]:not(:nth-child(2n)):not(:last-child) {
    margin-right: 3rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .nav__item[data-v-4f5269c6] {
    width: calc((99.9% - (4.6875vw * (2 - 1))) / 2)
  }

  .nav__item[data-v-4f5269c6]:nth-child(n+3) {
    margin-top: 4.6875vw
  }

  .nav__item[data-v-4f5269c6]:not(:nth-child(2n)):not(:last-child) {
    margin-right: 4.6875vw
  }
}

.nav a[data-v-4f5269c6] {
  color: #666;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: opacity .2s
}

.nav a[data-v-4f5269c6]:hover {
  opacity: .7
}

.nav i[data-v-4f5269c6] {
  display: block;
  stroke: #a39187;
  flex-shrink: 0
}

@media (min-width: 768px) {
  .nav i[data-v-4f5269c6] {
    width: .8rem;
    height: .8rem;
    margin-right: 1.5rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .nav i[data-v-4f5269c6] {
    width: 1.2rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .nav i[data-v-4f5269c6] {
    width: calc((12 / var(--vw-base-width)) * 100vw)
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .nav i[data-v-4f5269c6] {
    height: 1.2rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .nav i[data-v-4f5269c6] {
    height: calc((12 / var(--vw-base-width)) * 100vw)
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .nav i[data-v-4f5269c6] {
    margin-right: 2rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .nav i[data-v-4f5269c6] {
    margin-right: calc((20 / var(--vw-base-width)) * 100vw)
  }
}

.nav i[data-link="true"][data-v-4f5269c6] {
  transform: rotate(-90deg)
}

.common-about-ignis[data-v-ee95254e] {
  margin: 0 auto;
  max-width: 1280px
}

@media (min-width: 768px) {
  .common-about-ignis[data-v-ee95254e] {
    margin: 12rem auto 10rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .common-about-ignis[data-v-ee95254e] {
    margin: 12rem auto 10rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .common-about-ignis[data-v-ee95254e] {
    margin: calc((120 / var(--vw-base-width)) * 100vw) auto calc((100 / var(--vw-base-width)) * 100vw)
  }
}

.common-about-ignis .item-wrapper[data-v-ee95254e] {
  display: flex
}

@media (max-width: 767px) {
  .common-about-ignis .item-wrapper[data-v-ee95254e] {
    flex-wrap: wrap
  }
}

.common-about-ignis .item[data-v-ee95254e] {
  display: block;
  position: relative;
  color: #fff;
  transition: opacity .2s;
  margin-right: .2rem
}

.common-about-ignis .item[data-v-ee95254e]:last-child {
  margin-right: 0
}

.common-about-ignis .item[aria-hidden="true"][data-v-ee95254e] {
  display: none
}

@media (min-width: 768px) {
  .common-about-ignis .item[data-v-ee95254e] {
    width: 100%
  }
}

@media (max-width: 767px) {
  .common-about-ignis .item[data-v-ee95254e] {
    width: calc(50% - .1rem);
    margin-right: 0;
    margin-bottom: .2rem
  }

  .common-about-ignis .item[data-v-ee95254e]:first-child {
    width: 100%
  }

  .common-about-ignis .item:first-child .img-container[data-v-ee95254e]::before {
    padding-top: 50%
  }

  .common-about-ignis .item[data-v-ee95254e]:nth-child(even) {
    margin-right: .2rem
  }
}

.common-about-ignis .item[data-v-ee95254e]:hover::before {
  opacity: .2
}

.common-about-ignis .item[data-v-ee95254e]::before {
  pointer-events: none;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #b1a685;
  opacity: 0;
  transition: opacity .2s;
  z-index: 1
}

.common-about-ignis .item .img-container[data-v-ee95254e] {
  position: relative
}

.common-about-ignis .item .img-container[data-v-ee95254e]::before {
  content: "";
  display: block;
  padding-top: 100%
}

.common-about-ignis .item .img-container img[data-v-ee95254e] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: "object-fit: cover;"
}

.common-about-ignis .item p[data-v-ee95254e] {
  font-weight: 600;
  color: #fff;
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  letter-spacing: .1em;
  z-index: 1
}

@media (min-width: 768px) {
  .common-about-ignis .item p[data-v-ee95254e] {
    font-size: 1.8rem;
    bottom: 1rem
  }
}

@media (max-width: 767px) {
  .common-about-ignis .item p[data-v-ee95254e] {
    font-size: 2.8rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .common-about-ignis .item p[data-v-ee95254e] {
    bottom: 2rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .common-about-ignis .item p[data-v-ee95254e] {
    bottom: calc((20 / var(--vw-base-width)) * 100vw)
  }
}

.ui-video .item[data-v-4ff1f805] {
  position: relative;
  overflow: hidden
}

.ui-video .thumbnail[data-v-4ff1f805] {
  position: relative;
  z-index: 1;
  cursor: pointer;
  overflow: hidden
}

.ui-video .thumbnail[aria-hidden="true"][data-v-4ff1f805] {
  display: none
}

.ui-video .thumbnail img[data-v-4ff1f805] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: "object-fit: cover;";
  transition: transform .5s
}

.ui-video .thumbnail[data-v-4ff1f805]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
  z-index: 1
}

.ui-video .thumbnail:hover img[data-v-4ff1f805] {
  transform: scale(1.02)
}

.ui-video .thumbnail[data-v-4ff1f805]:hover::before {
  opacity: .2
}

.ui-video .thumbnail i[data-v-4ff1f805] {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: block;
  z-index: 1
}

@media (min-width: 768px) {
  .ui-video .thumbnail i[data-v-4ff1f805] {
    width: 9.5rem;
    height: 9.5rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .ui-video .thumbnail i[data-v-4ff1f805] {
    width: 10.6rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .ui-video .thumbnail i[data-v-4ff1f805] {
    width: calc((106 / var(--vw-base-width)) * 100vw)
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .ui-video .thumbnail i[data-v-4ff1f805] {
    height: 10.6rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .ui-video .thumbnail i[data-v-4ff1f805] {
    height: calc((106 / var(--vw-base-width)) * 100vw)
  }
}

.ui-video .thumbnail i svg[data-v-4ff1f805] {
  fill: #fff
}

.ui-video .video[data-v-4ff1f805] {
  padding-top: 56.25%;
  position: relative
}

.ui-video .video>div[data-v-4ff1f805] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.ui-video .video[data-v-4ff1f805] iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.ui-video[data-column="1"][data-v-4ff1f805] {
  max-width: 750px;
  margin: 0 auto
}

@media (min-width: 768px) {
  .ui-video[data-column="1"] .item[data-v-4ff1f805]:not(:last-child) {
    margin-bottom: 3rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .ui-video[data-column="1"] .item[data-v-4ff1f805]:not(:last-child) {
    margin-bottom: 3rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .ui-video[data-column="1"] .item[data-v-4ff1f805]:not(:last-child) {
    margin-bottom: calc((30 / var(--vw-base-width)) * 100vw)
  }
}

.ui-video[data-column="1"] .item .txt-container[data-v-4ff1f805] {
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  width: 100%
}

@media (min-width: 768px) {
  .ui-video[data-column="1"] .item .txt-container[data-v-4ff1f805] {
    font-size: 2.2rem;
    padding: 1rem
  }
}

@media (max-width: 767px) {
  .ui-video[data-column="1"] .item .txt-container[data-v-4ff1f805] {
    font-size: 2.4rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .ui-video[data-column="1"] .item .txt-container[data-v-4ff1f805] {
    padding: 1rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .ui-video[data-column="1"] .item .txt-container[data-v-4ff1f805] {
    padding: calc((10 / var(--vw-base-width)) * 100vw)
  }
}

.ui-video[data-column="1"] .item .txt-container[aria-hidden="true"][data-v-4ff1f805] {
  display: none
}

.ui-video[data-column="1"] .item .time[data-v-4ff1f805] {
  flex-shrink: 0;
  font-family: var(--font-family--en);
  font-weight: 400
}

@media (min-width: 768px) {
  .ui-video[data-column="1"] .item .time[data-v-4ff1f805] {
    margin-left: 2rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .ui-video[data-column="1"] .item .time[data-v-4ff1f805] {
    margin-left: 2rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .ui-video[data-column="1"] .item .time[data-v-4ff1f805] {
    margin-left: calc((20 / var(--vw-base-width)) * 100vw)
  }
}

.ui-video[data-column="2"][data-v-4ff1f805] {
  display: flex;
  flex-wrap: wrap
}

@media (min-width: 768px) {
  .ui-video[data-column="2"] .item[data-v-4ff1f805] {
    width: calc((99.9% - (4rem * (2 - 1))) / 2)
  }

  .ui-video[data-column="2"] .item[data-v-4ff1f805]:nth-child(n+3) {
    margin-top: 4rem
  }

  .ui-video[data-column="2"] .item[data-v-4ff1f805]:not(:nth-child(2n)):not(:last-child) {
    margin-right: 4rem
  }
}

@media (max-width: 767px) and (min-width: 641px) {
  .ui-video[data-column="2"] .item[data-v-4ff1f805] {
    width: calc((99.9% - (3rem * (2 - 1))) / 2)
  }

  .ui-video[data-column="2"] .item[data-v-4ff1f805]:nth-child(n+3) {
    margin-top: 3rem
  }

  .ui-video[data-column="2"] .item[data-v-4ff1f805]:not(:nth-child(2n)):not(:last-child) {
    margin-right: 3rem
  }
}

@media (max-width: 640px) {
  .ui-video[data-column="2"] .item[data-v-4ff1f805] {
    width: calc((99.9% - (4.6875vw * (2 - 1))) / 2)
  }

  .ui-video[data-column="2"] .item[data-v-4ff1f805]:nth-child(n+3) {
    margin-top: 4.6875vw
  }

  .ui-video[data-column="2"] .item[data-v-4ff1f805]:not(:nth-child(2n)):not(:last-child) {
    margin-right: 4.6875vw
  }
}

@media (min-width: 768px) {
  .ui-video[data-column="2"] .txt-container[data-v-4ff1f805] {
    margin-top: 1.2rem;
    font-size: 1.8rem
  }
}

@media (max-width: 767px) {
  .ui-video[data-column="2"] .txt-container[data-v-4ff1f805] {
    font-size: 2.4rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .ui-video[data-column="2"] .txt-container[data-v-4ff1f805] {
    margin-top: 2.5rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .ui-video[data-column="2"] .txt-container[data-v-4ff1f805] {
    margin-top: calc((25 / var(--vw-base-width)) * 100vw)
  }
}

.ui-video[data-column="2"] .thumbnail[data-v-4ff1f805] {
  padding-top: 100%
}

.ui-video[data-column="2"] .thumbnail img[data-v-4ff1f805] {
  position: absolute;
  top: 0;
  left: 0
}

.ui-video[data-column="4"][data-v-4ff1f805] {
  display: flex;
  flex-wrap: wrap
}

@media (min-width: 768px) {
  .ui-video[data-column="4"] .item[data-v-4ff1f805] {
    width: calc((99.9% - (4rem * (4 - 1))) / 4)
  }

  .ui-video[data-column="4"] .item[data-v-4ff1f805]:nth-child(n+5) {
    margin-top: 4rem
  }

  .ui-video[data-column="4"] .item[data-v-4ff1f805]:not(:nth-child(4n)):not(:last-child) {
    margin-right: 4rem
  }
}

@media (max-width: 767px) and (min-width: 641px) {
  .ui-video[data-column="4"] .item[data-v-4ff1f805] {
    width: calc((99.9% - (3rem * (2 - 1))) / 2)
  }

  .ui-video[data-column="4"] .item[data-v-4ff1f805]:nth-child(n+3) {
    margin-top: 3rem
  }

  .ui-video[data-column="4"] .item[data-v-4ff1f805]:not(:nth-child(2n)):not(:last-child) {
    margin-right: 3rem
  }
}

@media (max-width: 640px) {
  .ui-video[data-column="4"] .item[data-v-4ff1f805] {
    width: calc((99.9% - (4.6875vw * (2 - 1))) / 2)
  }

  .ui-video[data-column="4"] .item[data-v-4ff1f805]:nth-child(n+3) {
    margin-top: 4.6875vw
  }

  .ui-video[data-column="4"] .item[data-v-4ff1f805]:not(:nth-child(2n)):not(:last-child) {
    margin-right: 4.6875vw
  }
}

@media (min-width: 768px) {
  .ui-video[data-column="4"] .item[data-v-4ff1f805] {
    font-size: 1.5rem
  }
}

@media (max-width: 767px) {
  .ui-video[data-column="4"] .item[data-v-4ff1f805] {
    font-size: 2.4rem
  }
}

.ui-video[data-column="4"] .item .thumbnail[data-v-4ff1f805] {
  position: relative;
  padding-top: 100%
}

.ui-video[data-column="4"] .item .thumbnail img[data-v-4ff1f805] {
  position: absolute;
  top: 0;
  left: 0
}

.ui-video[data-column="4"] .item .thumbnail i[data-v-4ff1f805] {
  width: 4.5rem;
  height: 4.5rem
}

@media (min-width: 768px) {
  .ui-video[data-column="4"] .item .txt-container[data-v-4ff1f805] {
    margin-top: 1.5rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .ui-video[data-column="4"] .item .txt-container[data-v-4ff1f805] {
    margin-top: 3.5rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .ui-video[data-column="4"] .item .txt-container[data-v-4ff1f805] {
    margin-top: calc((35 / var(--vw-base-width)) * 100vw)
  }
}

.ui-video[data-column="4"] .item .txt-container .title[data-v-4ff1f805] {
  font-weight: 600
}

.ui-video[data-column="4"] .item .video[data-v-4ff1f805] {
  padding-top: 100%
}

.common-aside-flow-line[data-v-f1e22c6e] {
  position: relative;
  overflow: hidden;
  background-color: #f8f7f3
}

@media (min-width: 768px) {
  .common-aside-flow-line[data-v-f1e22c6e] {
    padding: 11.5rem 0 12rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .common-aside-flow-line[data-v-f1e22c6e] {
    padding: 11.5rem 0rem 12rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .common-aside-flow-line[data-v-f1e22c6e] {
    padding: calc((115 / var(--vw-base-width)) * 100vw) calc((0 / var(--vw-base-width)) * 100vw) calc((120 / var(--vw-base-width)) * 100vw)
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .toppage-news+.common-aside-flow-line[data-v-f1e22c6e] {
    padding: 14.5rem 0rem 12rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .toppage-news+.common-aside-flow-line[data-v-f1e22c6e] {
    padding: calc((145 / var(--vw-base-width)) * 100vw) calc((0 / var(--vw-base-width)) * 100vw) calc((120 / var(--vw-base-width)) * 100vw)
  }
}

.flex-container[data-v-f1e22c6e] {
  max-width: 840px;
  margin: 0 auto;
  position: relative
}

@media (min-width: 768px) {
  .flex-container[data-v-f1e22c6e] {
    margin-top: 4.8rem;
    display: flex;
    align-items: center
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .flex-container[data-v-f1e22c6e] {
    margin-top: 5.5rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .flex-container[data-v-f1e22c6e] {
    margin-top: calc((55 / var(--vw-base-width)) * 100vw)
  }
}

.flex-container__l[data-v-f1e22c6e] {
  text-align: center
}

@media (min-width: 768px) {
  .flex-container__l[data-v-f1e22c6e] {
    width: 38rem;
    flex-shrink: 0;
    margin-right: 8rem
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .flex-container__l[data-v-f1e22c6e] {
    margin-bottom: 7.5rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .flex-container__l[data-v-f1e22c6e] {
    margin-bottom: calc((75 / var(--vw-base-width)) * 100vw)
  }
}

@media (min-width: 768px) {
  .flex-container__l .ui-video[data-column="1"][data-v-f1e22c6e] {
    max-width: 380px
  }
}

@media (min-width: 768px) {
  .flex-container__l img[data-v-f1e22c6e] {
    max-width: 340px
  }
}

@media (max-width: 767px) {
  .flex-container__l img[data-v-f1e22c6e] {
    opacity: 1
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .flex-container__l img[data-v-f1e22c6e] {
    width: 43rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .flex-container__l img[data-v-f1e22c6e] {
    width: calc((430 / var(--vw-base-width)) * 100vw)
  }
}

@media (min-width: 768px) {
  .flex-container__r .ui-button[data-v-f1e22c6e] {
    margin: 0
  }
}

@media (max-width: 767px) {
  .flex-container__r .ui-button[data-v-f1e22c6e] {
    opacity: 1
  }
}

@media (max-width: 767px) {
  .flex-container__r .text[data-v-f1e22c6e] {
    opacity: 1
  }
}

.text[data-v-f1e22c6e] {
  letter-spacing: .1em;
  line-height: 2.3
}

.text[data-v-f1e22c6e]::before,
.text[data-v-f1e22c6e]::after {
  display: block;
  width: 0;
  height: 0;
  content: ""
}

.text[data-v-f1e22c6e]::before {
  margin-top: calc((1 - 2.3) * .5em)
}

.text[data-v-f1e22c6e]::after {
  margin-bottom: calc((1 - 2.3) * .5em)
}

@media (min-width: 768px) {
  .text[data-v-f1e22c6e] {
    margin-bottom: 5rem
  }
}

@media (max-width: 767px) {
  .text[data-v-f1e22c6e] {
    text-align: center
  }
}

@media (max-width: 767px) and (max-width: 767px) and (min-width: 641px) {
  .text[data-v-f1e22c6e] {
    margin-bottom: 6rem
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  .text[data-v-f1e22c6e] {
    margin-bottom: calc((60 / var(--vw-base-width)) * 100vw)
  }
}

.ui-button[data-v-f1e22c6e] {
  margin-top: 0;
  margin-bottom: 0
}