@charset "UTF-8";
:root {
  --scrollbar-size-px: 0px;
}

.contents-wrapper {
  line-height: 1;
}

.contents-wrapper div, .contents-wrapper span, .contents-wrapper applet, .contents-wrapper object, .contents-wrapper iframe,
.contents-wrapper h1, .contents-wrapper h2, .contents-wrapper h3, .contents-wrapper h4, .contents-wrapper h5, .contents-wrapper h6, .contents-wrapper p, .contents-wrapper blockquote, .contents-wrapper pre,
.contents-wrapper a, .contents-wrapper abbr, .contents-wrapper acronym, .contents-wrapper address, .contents-wrapper big, .contents-wrapper cite, .contents-wrapper code,
.contents-wrapper del, .contents-wrapper dfn, .contents-wrapper em, .contents-wrapper img, .contents-wrapper ins, .contents-wrapper kbd, .contents-wrapper q, .contents-wrapper s, .contents-wrapper samp,
.contents-wrapper small, .contents-wrapper strike, .contents-wrapper strong, .contents-wrapper sub, .contents-wrapper sup, .contents-wrapper tt, .contents-wrapper var,
.contents-wrapper b, .contents-wrapper u, .contents-wrapper i, .contents-wrapper center,
.contents-wrapper dl, .contents-wrapper dt, .contents-wrapper dd, .contents-wrapper ol, .contents-wrapper ul, .contents-wrapper li,
.contents-wrapper fieldset, .contents-wrapper form, .contents-wrapper label, .contents-wrapper legend,
.contents-wrapper table, .contents-wrapper caption, .contents-wrapper tbody, .contents-wrapper tfoot, .contents-wrapper thead, .contents-wrapper tr, .contents-wrapper th, .contents-wrapper td,
.contents-wrapper article, .contents-wrapper aside, .contents-wrapper canvas, .contents-wrapper details, .contents-wrapper embed,
.contents-wrapper figure, .contents-wrapper figcaption, .contents-wrapper footer, .contents-wrapper header, .contents-wrapper hgroup,
.contents-wrapper menu, .contents-wrapper nav, .contents-wrapper output, .contents-wrapper ruby, .contents-wrapper section, .contents-wrapper summary,
.contents-wrapper time, .contents-wrapper mark, .contents-wrapper audio, .contents-wrapper video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

.contents-wrapper article, .contents-wrapper aside, .contents-wrapper details, .contents-wrapper figcaption, .contents-wrapper figure,
.contents-wrapper footer, .contents-wrapper header, .contents-wrapper hgroup, .contents-wrapper menu, .contents-wrapper nav, .contents-wrapper section {
  display: block;
}

.contents-wrapper ol, .contents-wrapper ul {
  list-style: none;
}

.contents-wrapper blockquote, .contents-wrapper q {
  quotes: none;
}

.contents-wrapper blockquote:before, .contents-wrapper blockquote:after,
.contents-wrapper q:before, .contents-wrapper q:after {
  content: '';
  content: none;
}

.contents-wrapper table {
  border-collapse: collapse;
  border-spacing: 0;
}

@media screen and (max-width: 1199px) {
  .contents-wrapper .pc {
    display: none !important;
  }
}

@media screen and (min-width: 1200px) {
  .contents-wrapper .sp {
    display: none !important;
  }
}

.contents-wrapper .anchor {
  position: relative;
}

.contents-wrapper .anchor .anchor-point {
  position: absolute;
}

@font-face {
  font-family: 'Catalogue LL';
  src: url("https://timberland.vfjapan.jp/font/CatalogueLL-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Catalogue Bold';
  src: url("https://timberland.vfjapan.jp/font/CatalogueLL-Bold.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'American Grotesk';
  src: url("https://timberland.vfjapan.jp/font/AmericanGrotesk-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

:root {
  --ink: #fff;
  /* 文字色 */
  --glow: #2ac1c3;
  /* グロー色（青緑）*/
  --line: rgba(42,193,195,.75);
  /* 下線色 */
  --line-blur: rgba(42,193,195,.35);
}

.contents-wrapper {
  font-family: "Noto Sans JP", sans-serif;
  color: #000;
  background-image: url(https://timberland.vfjapan.jp/lp/advince-ICONIC/20250828/img/background.webp);
  background-position: center;
  background-repeat: repeat;
  background-size: cover;
  padding-bottom: calc(120 / 1366 * 100vw - 120 / 1366 * var(--scrollbar-size-px));
  /*---モーダルボタン---*/
  /*---モーダル---*/
}

@media screen and (min-width: 1366px) {
  .contents-wrapper {
    padding-bottom: 120px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper {
    padding-bottom: calc(120 / 750 * 100vw - 120 / 750 * var(--scrollbar-size-px));
  }
}

.contents-wrapper .main-contents {
  max-width: 1366px;
  width: 100%;
  margin: auto;
}

@media screen and (max-width: 768px) {
  .contents-wrapper .main-contents {
    overflow: hidden;
  }
}

.contents-wrapper p, .contents-wrapper h1, .contents-wrapper h2, .contents-wrapper h3 {
  color: white;
}

.contents-wrapper picture {
  display: block;
}

.contents-wrapper .en {
  font-family: 'Catalogue Bold';
}

@media screen and (min-width: 769px) {
  .contents-wrapper .pc {
    display: block !important;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .pc {
    display: none !important;
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper .sp {
    display: none !important;
  }
}

.contents-wrapper .arrow-top {
  position: fixed;
  z-index: 50;
  right: 0;
  bottom: calc(60 / 1366 * 100vw - 60 / 1366 * var(--scrollbar-size-px));
  width: calc(60 / 1366 * 100vw - 60 / 1366 * var(--scrollbar-size-px));
}

@media screen and (min-width: 1366px) {
  .contents-wrapper .arrow-top {
    bottom: 60px;
  }
}

@media screen and (min-width: 1366px) {
  .contents-wrapper .arrow-top {
    width: 60px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .arrow-top {
    width: calc(80 / 750 * 100vw - 80 / 750 * var(--scrollbar-size-px));
    bottom: calc(120 / 750 * 100vw - 120 / 750 * var(--scrollbar-size-px));
  }
}

.contents-wrapper .ctaBtn {
  display: block;
  background-color: white;
  color: black;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
  font-weight: bold;
  text-align: center;
}

@media screen and (min-width: 769px) {
  .contents-wrapper .ctaBtn.one {
    margin-top: calc(30 / 1366 * 100vw - 30 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .ctaBtn.one {
    margin-top: 30px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .ctaBtn.one {
    margin-top: calc(35 / 390 * 100vw - 35 / 390 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper .ctaBtn.two {
    margin-top: calc(35 / 1366 * 100vw - 35 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .ctaBtn.two {
    margin-top: 35px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .ctaBtn.two {
    margin-top: calc(30 / 390 * 100vw - 30 / 390 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper .ctaBtn.three {
    margin-top: calc(35 / 1366 * 100vw - 35 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .ctaBtn.three {
    margin-top: 35px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .ctaBtn.three {
    margin-top: calc(30 / 390 * 100vw - 30 / 390 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper .ctaBtn {
    font-size: calc(20 / 1366 * 100vw - 20 / 1366 * var(--scrollbar-size-px));
    padding-top: calc(17 / 1366 * 100vw - 17 / 1366 * var(--scrollbar-size-px));
    padding-bottom: calc(21 / 1366 * 100vw - 21 / 1366 * var(--scrollbar-size-px));
    border-radius: calc(35 / 1366 * 100vw - 35 / 1366 * var(--scrollbar-size-px));
    width: calc(392 / 1366 * 100vw - 392 / 1366 * var(--scrollbar-size-px));
    margin-top: calc(50 / 1366 * 100vw - 50 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .ctaBtn {
    font-size: 20px;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .ctaBtn {
    padding-top: 17px;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .ctaBtn {
    padding-bottom: 21px;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .ctaBtn {
    border-radius: 35px;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .ctaBtn {
    width: 392px;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .ctaBtn {
    margin-top: 50px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .ctaBtn {
    width: calc(258 / 390 * 100vw - 258 / 390 * var(--scrollbar-size-px));
    font-size: calc(15 / 390 * 100vw - 15 / 390 * var(--scrollbar-size-px));
    padding-top: calc(16 / 390 * 100vw - 16 / 390 * var(--scrollbar-size-px));
    padding-bottom: calc(17 / 390 * 100vw - 17 / 390 * var(--scrollbar-size-px));
    border-radius: calc(35 / 390 * 100vw - 35 / 390 * var(--scrollbar-size-px));
    margin-top: calc(25 / 390 * 100vw - 25 / 390 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper a {
    transition: opacity .2s ease-in-out;
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper a:hover {
    opacity: .7;
  }
}

.contents-wrapper .modal-btn {
  position: relative;
  cursor: pointer;
}

@media screen and (min-width: 769px) {
  .contents-wrapper .lead .lead-title {
    font-size: calc(55 / 1366 * 100vw - 55 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .lead .lead-title {
    font-size: 55px;
  }
}

.contents-wrapper .lead span {
  font-weight: bold;
  line-height: 1.7;
}

@media screen and (min-width: 769px) {
  .contents-wrapper .lead span {
    font-size: calc(20 / 1366 * 100vw - 20 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .lead span {
    font-size: 20px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .lead span {
    font-size: calc(18 / 390 * 100vw - 18 / 390 * var(--scrollbar-size-px));
  }
}

.contents-wrapper .lead p {
  text-align: center;
  font-size: calc(16 / 1366 * 100vw - 16 / 1366 * var(--scrollbar-size-px));
  line-height: calc(27/18);
  margin-top: calc(26 / 1366 * 100vw - 26 / 1366 * var(--scrollbar-size-px));
  font-weight: 500;
}

@media screen and (min-width: 1366px) {
  .contents-wrapper .lead p {
    font-size: 16px;
  }
}

@media screen and (min-width: 1366px) {
  .contents-wrapper .lead p {
    margin-top: 26px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .lead p {
    margin-top: calc(16 / 750 * 100vw - 16 / 750 * var(--scrollbar-size-px));
    font-size: calc(14 / 390 * 100vw - 14 / 390 * var(--scrollbar-size-px));
    width: calc(370 / 390 * 100vw - 370 / 390 * var(--scrollbar-size-px));
    margin-left: auto;
    margin-right: auto;
    line-height: calc(21/14);
    text-align: left;
    letter-spacing: -0.01em;
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper .banner-section {
    margin-top: calc(140 / 1366 * 100vw - 140 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .banner-section {
    margin-top: 140px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .banner-section {
    margin-top: calc(70 / 390 * 100vw - 70 / 390 * var(--scrollbar-size-px));
  }
}

.contents-wrapper .banner-section .banner-title {
  text-align: center;
  font-weight: bold;
  line-height: 1.7;
}

@media screen and (min-width: 769px) {
  .contents-wrapper .banner-section .banner-title {
    font-size: calc(26 / 1366 * 100vw - 26 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .banner-section .banner-title {
    font-size: 26px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .banner-section .banner-title {
    line-height: 1.6;
    font-size: calc(20 / 390 * 100vw - 20 / 390 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper .banner-section .banner {
    margin-top: calc(17 / 1366 * 100vw - 17 / 1366 * var(--scrollbar-size-px));
    width: calc(1000 / 1366 * 100vw - 1000 / 1366 * var(--scrollbar-size-px));
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .banner-section .banner {
    margin-top: 17px;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .banner-section .banner {
    width: 1000px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .banner-section .banner {
    margin-top: calc(8 / 390 * 100vw - 8 / 390 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper .banner-section .banner.bannerTwo {
    margin-top: calc(71 / 1366 * 100vw - 71 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .banner-section .banner.bannerTwo {
    margin-top: 71px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .banner-section .banner.bannerTwo {
    margin-top: calc(65 / 390 * 100vw - 65 / 390 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper .banner-section .banner.bannerThree {
    margin-top: calc(104 / 1366 * 100vw - 104 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .banner-section .banner.bannerThree {
    margin-top: 104px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .banner-section .banner.bannerThree {
    margin-top: calc(65 / 390 * 100vw - 65 / 390 * var(--scrollbar-size-px));
  }
}

.contents-wrapper .banner-section .banner-text {
  letter-spacing: -.001em;
  font-weight: bold;
}

@media screen and (min-width: 769px) {
  .contents-wrapper .banner-section .banner-text {
    text-align: center;
    font-size: calc(20 / 1366 * 100vw - 20 / 1366 * var(--scrollbar-size-px));
    margin-top: calc(25 / 1366 * 100vw - 25 / 1366 * var(--scrollbar-size-px));
    line-height: 1.4;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .banner-section .banner-text {
    font-size: 20px;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .banner-section .banner-text {
    margin-top: 25px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .banner-section .banner-text {
    font-size: calc(15 / 390 * 100vw - 15 / 390 * var(--scrollbar-size-px));
    width: calc(365 / 390 * 100vw - 365 / 390 * var(--scrollbar-size-px));
    margin-top: calc(7 / 390 * 100vw - 7 / 390 * var(--scrollbar-size-px));
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
    letter-spacing: -.025em;
  }
}

.contents-wrapper .banner-section .banner-text span {
  white-space: nowrap;
}

.contents-wrapper .iconic-photos {
  margin-top: calc(50 / 1366 * 100vw - 50 / 1366 * var(--scrollbar-size-px));
}

@media screen and (min-width: 1366px) {
  .contents-wrapper .iconic-photos {
    margin-top: 50px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-photos {
    margin-top: calc(42 / 390 * 100vw - 42 / 390 * var(--scrollbar-size-px));
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-photos .iconic-photos-list {
    overflow: hidden;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper {
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper {
    width: calc(1200 / 1366 * 100vw - 1200 / 1366 * var(--scrollbar-size-px));
    display: flex;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper {
    width: 1200px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: calc(47 / 390 * 100vw - 47 / 390 * var(--scrollbar-size-px));
  }
}

.contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper .swiper-slide {
  transition: opacity .3s ease-in-out;
}

@media screen and (min-width: 769px) {
  .contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper .swiper-slide {
    cursor: pointer;
  }
}

.contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper .swiper-slide .img-wrapper {
  position: relative;
  display: block;
  transition: transform .25s ease-out;
}

.contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper .swiper-slide .img-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.4);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper .swiper-slide p {
  text-align: center;
  font-weight: 600;
  transition: color .25s ease-out, text-shadow .25s ease-out;
}

@media screen and (min-width: 769px) {
  .contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper .swiper-slide p {
    font-size: calc(24 / 1366 * 100vw - 24 / 1366 * var(--scrollbar-size-px));
    margin-top: calc(17 / 1366 * 100vw - 17 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper .swiper-slide p {
    font-size: 24px;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper .swiper-slide p {
    margin-top: 17px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper .swiper-slide p {
    font-size: calc(22 / 390 * 100vw - 22 / 390 * var(--scrollbar-size-px));
    margin-top: calc(7 / 390 * 100vw - 7 / 390 * var(--scrollbar-size-px));
    line-height: 1.7;
  }
}

.contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper .swiper-slide .icon-text {
  font-weight: 400;
}

@media screen and (min-width: 769px) {
  .contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper .swiper-slide .icon-text {
    font-size: calc(16 / 1366 * 100vw - 16 / 1366 * var(--scrollbar-size-px));
    margin-top: calc(10 / 1366 * 100vw - 10 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper .swiper-slide .icon-text {
    font-size: 16px;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper .swiper-slide .icon-text {
    margin-top: 10px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper .swiper-slide .icon-text {
    margin-top: 0;
    font-size: calc(16 / 390 * 100vw - 16 / 390 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper .swiper-slide:hover p {
    position: relative;
    color: var(--ink);
    font-weight: 800;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.8), 0 0 6px var(--glow), 0 0 14px var(--glow);
  }
  .contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper .swiper-slide:hover .img-wrapper::after {
    opacity: 1;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper .swiper-slide {
    transition: transform .3s linear;
  }
  .contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper .swiper-slide.swiper-slide-active {
    transform: scale(1);
  }
}

.contents-wrapper .iconic-photos .iconic-photos-list .iconic-photos-swiper .swiper-wrapper .swiper-slide img {
  display: block;
  width: 100%;
}

.contents-wrapper .iconic-photos .iconic-photos-paragraph p {
  text-align: center;
  font-size: calc(18 / 1366 * 100vw - 18 / 1366 * var(--scrollbar-size-px));
  line-height: calc(27/18);
  margin-top: calc(50 / 1366 * 100vw - 50 / 1366 * var(--scrollbar-size-px));
  font-weight: 500;
}

@media screen and (min-width: 1366px) {
  .contents-wrapper .iconic-photos .iconic-photos-paragraph p {
    font-size: 18px;
  }
}

@media screen and (min-width: 1366px) {
  .contents-wrapper .iconic-photos .iconic-photos-paragraph p {
    margin-top: 50px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-photos .iconic-photos-paragraph p {
    margin-top: calc(50 / 750 * 100vw - 50 / 750 * var(--scrollbar-size-px));
    font-size: calc(28 / 750 * 100vw - 28 / 750 * var(--scrollbar-size-px));
    padding-left: calc(40 / 750 * 100vw - 40 / 750 * var(--scrollbar-size-px));
    padding-right: calc(40 / 750 * 100vw - 40 / 750 * var(--scrollbar-size-px));
    line-height: calc(21/14);
    text-align: left;
    letter-spacing: -0.005em;
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper .iconic-yellowboot {
    margin-top: calc(54 / 1366 * 100vw - 54 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-yellowboot {
    margin-top: 54px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-yellowboot {
    margin-top: calc(77 / 390 * 100vw - 77 / 390 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper .iconic-yellowboot h2 {
    margin-bottom: calc(50 / 1366 * 100vw - 50 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-yellowboot h2 {
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-yellowboot h2 {
    padding-left: calc(40 / 750 * 100vw - 40 / 750 * var(--scrollbar-size-px));
    margin-bottom: calc(40 / 750 * 100vw - 40 / 750 * var(--scrollbar-size-px));
  }
}

.contents-wrapper .iconic-yellowboot h2 img {
  display: block;
}

@media screen and (min-width: 769px) {
  .contents-wrapper .iconic-yellowboot h2 img {
    width: calc(988 / 1366 * 100vw - 988 / 1366 * var(--scrollbar-size-px));
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-yellowboot h2 img {
    width: 988px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-yellowboot h2 img {
    width: calc(556 / 750 * 100vw - 556 / 750 * var(--scrollbar-size-px));
  }
}

.contents-wrapper .iconic-yellowboot .iconic-yellowboot-movie {
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 769px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-movie {
    width: calc(1000 / 1366 * 100vw - 1000 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-movie {
    width: 1000px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-movie {
    width: calc(750 / 750 * 100vw - 750 / 750 * var(--scrollbar-size-px));
  }
}

.contents-wrapper .iconic-yellowboot .iconic-yellowboot-movie video {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-movie video {
    transform: scale(1.1);
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc {
    margin-top: calc(60 / 1366 * 100vw - 60 / 1366 * var(--scrollbar-size-px));
    width: calc(1167 / 1366 * 100vw - 1167 / 1366 * var(--scrollbar-size-px));
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc {
    margin-top: 60px;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc {
    width: 1167px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc {
    margin-top: calc(60 / 750 * 100vw - 60 / 750 * var(--scrollbar-size-px));
    padding-left: calc(40 / 750 * 100vw - 40 / 750 * var(--scrollbar-size-px));
    padding-right: calc(40 / 750 * 100vw - 40 / 750 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider {
    width: calc(688 / 1366 * 100vw - 688 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider {
    width: 688px;
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-next,
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-prev {
    width: calc(15 / 1366 * 100vw - 15 / 1366 * var(--scrollbar-size-px));
    height: calc(30 / 1366 * 100vw - 30 / 1366 * var(--scrollbar-size-px));
    top: 0;
    margin-top: calc(280 / 1366 * 100vw - 280 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-next,
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-prev {
    width: 15px;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-next,
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-prev {
    height: 30px;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-next,
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-prev {
    margin-top: 280px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-next,
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-prev {
    width: calc(16 / 750 * 100vw - 16 / 750 * var(--scrollbar-size-px));
    height: calc(28 / 750 * 100vw - 28 / 750 * var(--scrollbar-size-px));
    top: 0;
    margin-top: calc(268 / 750 * 100vw - 268 / 750 * var(--scrollbar-size-px));
  }
}

.contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-next:after,
.contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-prev:after {
  color: black;
}

@media screen and (min-width: 769px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-next:after,
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-prev:after {
    font-size: calc(30 / 1366 * 100vw - 30 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-next:after,
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-prev:after {
    font-size: 30px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-next:after,
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-prev:after {
    font-size: calc(28 / 750 * 100vw - 28 / 750 * var(--scrollbar-size-px));
  }
}

.contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-prev {
  left: 0;
}

@media screen and (min-width: 769px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-prev {
    margin-left: calc(20 / 1366 * 100vw - 20 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-prev {
    margin-left: 20px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-prev {
    margin-left: calc(60 / 750 * 100vw - 60 / 750 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-next {
    left: 0;
    right: unset;
    margin-left: calc(660 / 1366 * 100vw - 660 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-next {
    margin-left: 660px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-slider .swiper-button-next {
    right: 0;
    margin-right: calc(60 / 750 * 100vw - 60 / 750 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-txt {
    width: calc(450 / 1366 * 100vw - 450 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-txt {
    width: 450px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-txt {
    margin-top: calc(50 / 750 * 100vw - 50 / 750 * var(--scrollbar-size-px));
  }
}

.contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-txt p {
  font-size: calc(16 / 1366 * 100vw - 16 / 1366 * var(--scrollbar-size-px));
  line-height: calc(27/16);
  font-weight: 500;
}

@media screen and (min-width: 1366px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-txt p {
    font-size: 16px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-flex .iconic-yellowboot-desc-txt p {
    font-size: calc(28 / 750 * 100vw - 28 / 750 * var(--scrollbar-size-px));
    line-height: calc(21/14);
    letter-spacing: -0.005em;
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-btn {
    margin-top: calc(60 / 1366 * 100vw - 60 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-btn {
    margin-top: 60px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-btn {
    margin-top: calc(40 / 750 * 100vw - 40 / 750 * var(--scrollbar-size-px));
  }
}

.contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-btn ul {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-btn ul li:last-child a {
  margin-right: 0;
}

.contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-btn ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #000;
  font-weight: 600;
}

@media screen and (min-width: 769px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-btn ul li a {
    width: calc(260 / 1366 * 100vw - 260 / 1366 * var(--scrollbar-size-px));
    height: calc(60 / 1366 * 100vw - 60 / 1366 * var(--scrollbar-size-px));
    font-size: calc(18 / 1366 * 100vw - 18 / 1366 * var(--scrollbar-size-px));
    margin-right: calc(30 / 1366 * 100vw - 30 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-btn ul li a {
    width: 260px;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-btn ul li a {
    height: 60px;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-btn ul li a {
    font-size: 18px;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-btn ul li a {
    margin-right: 30px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-yellowboot .iconic-yellowboot-desc .iconic-yellowboot-desc-btn ul li a {
    width: calc(316 / 750 * 100vw - 316 / 750 * var(--scrollbar-size-px));
    height: calc(100 / 750 * 100vw - 100 / 750 * var(--scrollbar-size-px));
    font-size: calc(26 / 750 * 100vw - 26 / 750 * var(--scrollbar-size-px));
    margin-right: calc(40 / 750 * 100vw - 40 / 750 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper .iconic-logo {
    margin-top: calc(130 / 1366 * 100vw - 130 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-logo {
    margin-top: 130px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-logo {
    margin-top: calc(120 / 750 * 100vw - 120 / 750 * var(--scrollbar-size-px));
  }
}

.contents-wrapper .iconic-logo a {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 769px) {
  .contents-wrapper .iconic-logo a {
    width: calc(365 / 1366 * 100vw - 365 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .iconic-logo a {
    width: 365px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .iconic-logo a {
    width: calc(340 / 750 * 100vw - 340 / 750 * var(--scrollbar-size-px));
  }
}

.contents-wrapper .iconic-logo a img {
  display: block;
  width: 100%;
}

.contents-wrapper .modal {
  transition: 0.3s cubic-bezier(0.87, 0.105, 0.615, 0.92);
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
}

@media screen and (min-width: 769px) {
  .contents-wrapper .modal {
    padding: 20px 0;
  }
}

.contents-wrapper .modal.is-show {
  opacity: 1;
  visibility: visible;
}

.contents-wrapper .modal .modal-inner {
  position: relative;
  margin: auto;
  box-sizing: border-box;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE & Edge */
  /* ★ スクロール領域を制御する */
  max-height: 100vh;
  min-height: 0;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

.contents-wrapper .modal .modal-inner::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

@media screen and (min-width: 769px) {
  .contents-wrapper .modal .modal-inner {
    width: calc(800 / 1366 * 100vw - 800 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .modal .modal-inner {
    width: 800px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .modal .modal-inner {
    overflow-y: auto;
    width: calc(700 / 750 * 100vw - 700 / 750 * var(--scrollbar-size-px));
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .modal .modal-name-container {
    width: 100%;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: calc(56 / 390 * 100vw - 56 / 390 * var(--scrollbar-size-px));
    display: flex;
    flex-direction: column-reverse;
  }
}

.contents-wrapper .modal .modal-close {
  position: absolute;
  left: 50%;
  margin-left: calc(-26.5 / 1366 * 100vw - -26.5 / 1366 * var(--scrollbar-size-px));
  width: calc(53 / 1366 * 100vw - 53 / 1366 * var(--scrollbar-size-px));
}

@media screen and (min-width: 1366px) {
  .contents-wrapper .modal .modal-close {
    margin-left: -26.5px;
  }
}

@media screen and (min-width: 1366px) {
  .contents-wrapper .modal .modal-close {
    width: 53px;
  }
}

@media screen and (min-width: 769px) {
  .contents-wrapper .modal .modal-close {
    bottom: 0;
    margin-bottom: calc(-75 / 1366 * 100vw - -75 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .modal .modal-close {
    margin-bottom: -75px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .modal .modal-close {
    bottom: calc(60 / 390 * 100vw - 60 / 390 * var(--scrollbar-size-px));
    margin-left: calc(-53 / 750 * 100vw - -53 / 750 * var(--scrollbar-size-px));
    width: calc(53 / 390 * 100vw - 53 / 390 * var(--scrollbar-size-px));
  }
}

.contents-wrapper .modal .modal-items {
  position: relative;
}

.contents-wrapper .modal .modal-items .scroll-wrapper {
  position: relative;
  overflow: hidden;
  /* ネイティブのスクロールを隠す */
}

.contents-wrapper .modal .modal-items .scroll-wrapper .custom-scrollbar {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  z-index: 10;
  background: #000;
}

@media screen and (min-width: 769px) {
  .contents-wrapper .modal .modal-items .scroll-wrapper .custom-scrollbar {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .modal .modal-items .scroll-wrapper .custom-scrollbar {
    margin-top: calc(180 / 390 * 100vw - 180 / 390 * var(--scrollbar-size-px));
    margin-left: calc(5 / 390 * 100vw - 5 / 390 * var(--scrollbar-size-px));
  }
}

.contents-wrapper .modal .modal-items .scroll-wrapper .custom-thumb {
  width: 100%;
  background: #fff;
  border-radius: 5px;
  position: absolute;
  top: 0;
  cursor: pointer;
}

@media screen and (min-width: 769px) {
  .contents-wrapper .modal .modal-items .scroll-wrapper .custom-thumb {
    display: none;
  }
}

.contents-wrapper .modal .modal-items .modal-items-img {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.contents-wrapper .modal .modal-items .modal-items-img::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
  display: none;
}

@media screen and (max-width: 768px) {
  .contents-wrapper .modal .modal-items .modal-items-img {
    margin-top: calc(180 / 390 * 100vw - 180 / 390 * var(--scrollbar-size-px));
    max-height: calc(100dvh - 180px);
  }
}

.contents-wrapper .modal .modal-items .modal-items-img img {
  display: block;
  width: 100%;
  height: auto;
}

.contents-wrapper .modal .modal-items .modal-items-name h2 {
  text-align: center;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: underline;
}

@media screen and (min-width: 769px) {
  .contents-wrapper .modal .modal-items .modal-items-name h2 {
    font-size: calc(24 / 1366 * 100vw - 24 / 1366 * var(--scrollbar-size-px));
    margin-top: calc(40 / 1366 * 100vw - 40 / 1366 * var(--scrollbar-size-px));
    height: calc(50 / 1366 * 100vw - 50 / 1366 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .modal .modal-items .modal-items-name h2 {
    font-size: 24px;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .modal .modal-items .modal-items-name h2 {
    margin-top: 40px;
  }
}

@media screen and (min-width: 769px) and (min-width: 1366px) {
  .contents-wrapper .modal .modal-items .modal-items-name h2 {
    height: 50px;
  }
}

@media screen and (max-width: 768px) {
  .contents-wrapper .modal .modal-items .modal-items-name h2 {
    margin-top: calc(73 / 390 * 100vw - 73 / 390 * var(--scrollbar-size-px));
    font-size: calc(20 / 390 * 100vw - 20 / 390 * var(--scrollbar-size-px));
  }
}