@charset "utf-8";

/*---------------------------------
  variables
---------------------------------*/
:root {
  --base-width: 750;
  --max-width: 768;
  --ratio: calc(var(--max-width) / var(--base-width));
  --color-text: #000000;
  --color-link: #009fe6;
  --color-primary: #fe5226;
  --color-base: #ffffff;
  --font-zen: "Zen Kaku Gothic New", sans-serif;
}

/*---------------------------------
  base
---------------------------------*/

*,
*::after,
*::before {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  box-sizing: border-box;
  color: var(--color-text);
  font-weight: 500;
  font-size: 1.6rem;
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシックMedium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "HiraginoKaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-feature-settings: "halt";
}

img {
  max-width: 100%;
  vertical-align: bottom;
  -webkit-touch-callout: none; 
  -webkit-user-select: none; 
  -webkit-user-drag: none; 
}

div:after, dl:after, ul:after{
  font-size: 0;
}

/*---------------------------------
  utilities
---------------------------------*/

.indent-1em {
  padding-left: 1em;
  text-indent: -1em;
}

.indent-2em {
  text-indent: 2em;
}

.ml-1em {
  margin-left: 1em;
}

.ml-1-7em {
  margin-left: 1.7em;
}

.mt-10 {
  margin-top: 1.333vw;
}

.mt-15 {
  margin-top: 2vw;
}

.mt-25 {
  margin-top: 3.255vw;
}

.mt-50 {
  margin-top: 6.666vw;
}

.mt-60 {
  margin-top: 8vw;
}

.mt-70 {
  margin-top: 9.333vw;
}

.mt-80 {
  margin-top: 10.666vw;
}

.mt-100 {
  margin-top: 13.333vw;
}

@media (min-width: 768px) {
  .mt-10 {
    margin-top: 10.24px;
  }

  .mt-15 {
    margin-top: 15.36px;
  }

  .mt-25 {
    margin-top: 25.6px;
  }

  .mt-50 {
    margin-top: 51.2px;
  }

  .mt-60 {
    margin-top: 61.44px;
  }

  .mt-70 {
    margin-top: 71.68px;
  }

  .mt-80 {
    margin-top: 81.92px;
  }

  .mt-100 {
    margin-top: 102.4px;
  }
}

/*---------------------------------
  layout
---------------------------------*/

.l-main{
  margin: 0;
}

.container {
  max-width: 768px;
  margin-right: auto;
  margin-left: auto;
}

.inner {
  padding-right: 3.867vw;
  padding-left: 3.867vw;
}

@media (min-width: 768px) {
  .inner {
    padding-right: 29.6px;
    padding-left: 29.6px;
  }
}

/*---------------------------------
  common-parts
---------------------------------*/

.text-link {
  color: var(--color-link);
  text-decoration: underline;
  word-break: break-all;
}

a.text-link:hover {
  color: var(--color-link);
  opacity: 0.8;
}

/* アンカーリンク位置調整用 */
.anchor-offset {
  margin-top: -100px;
  padding-top: 100px;
}

/* 黒枠 */
.content-wrapper {
  border-width: 2px;
  border-style: solid;
  border-color: var(--color-text);
}

/* オレンジ背景見出し */
.section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 10.800vw;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: var(--color-text);
  background-color: var(--color-primary);
}

.section-title-img {
  height: 6.400vw;
}

/* 注意書きリスト */
.cmn-note {
  margin-right: 2.667vw;
  margin-left: 2.667vw;
  padding-left: 1em;
  font-size: 1.867vw;
  line-height: calc(20/14);
  letter-spacing: 0.02em;
  list-style-type: none;
  text-indent: -1em;
}

.cmn-note>li::before {
  content: "※";
}

/* ボタン */
.cmn-btn {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* aspect-ratio: 645/77; */
  width: calc((645/692) * 100%);
  height: 10.267vw;
  margin-right: auto;
  margin-left: auto;
  border-width: 2px;
  border-style: solid;
  border-radius: 3.4px;
  border-color: var(--color-text);
  background-color: var(--color-primary);
  text-align: center;
}

a.cmn-btn {
  color: var(--color-text);
  font-weight: 900;
  font-size: 4.400vw;
  line-height: 1;
  font-family: var(--font-zen);
  text-decoration: none;
}

.cmn-btn::before {
  z-index: -1;
  position: absolute;
  top: 0.667vw;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(0.95);
  background: rgba(54, 54, 54, 1);
  content: "";
  filter: blur(5px);
}

.cmn-btn::after {
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 18.667vw;
  width: 4.667vw;
  height: 2.667vw;
  transform: translateY(-50%) rotate(-90deg);
  background-image: url(../img/arrow.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
}

@media (min-width: 768px) {
  .section-title {
    height: 82.944px;
  }

  .section-title-img {
    height: 49.152px;
  }

  .cmn-note {
    margin-right: 20.48px;
    margin-left: 20.48px;
    font-size: 14.336px;
  }

  .cmn-btn {
    height: 78.848px;
  }

  a.cmn-btn {
    font-size: 33.792px;
  }

  .cmn-btn::before {
    top: 5.12px;
  }

  .cmn-btn::after {
    right: 143.36px;
    width: 35.84px;
    height: 20.48px;
  }
}

/*---------------------------------
  animation
---------------------------------*/
.fade-up {
  transform: translate(0, 100px);
  -webkit-transition: all 1.5s;
  -o-transition: all 1.5s;
  opacity: 0;
  transition: all 1.5s;
  transition: 1.5s;
}

.fade-up.is-active {
  transform: translate(0, 0);
  opacity: 1;
}

/*---------------------------------
  hero
---------------------------------*/

.hero-img {
  width: 100%;
}

/*---------------------------------
  overview
---------------------------------*/

.overview {
  padding-top: 2.800vw;
  padding-bottom: 7.867vw;
}

.overview-title {
  width: 100%;
  margin-bottom: 2.533vw;
}

.overview-text {
  display: block;
  width: 92.667vw;
  margin-left: 3.467vw;
}

.overview-note {
  margin-top: 6.533vw;
  font-size: 2.133vw;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
}

@media (min-width: 768px) {
  .overview {
    padding-top: 21.504px;
    padding-bottom: 60.416px;
  }

  .overview-title {
    margin-bottom: 19.456px;
  }

  .overview-text {
    width: 711.68px;
    margin-left: 26.624px;
  }

  .overview-note {
    margin-top: 50.176px;
    font-size: 16.384px;
  }
}

/*---------------------------------
  page-nav
---------------------------------*/

.page-nav {
  margin-bottom: 6.133vw;
}

.nav-list {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  list-style-type: none;
}

.nav-item {
  position: relative;
  flex: 0 1 100%;
  border-width: 2px;
  border-style: solid;
  border-radius: 0.400vw;
  border-color: var(--color-text);
  background-color: var(--color-primary);
  text-align: center;
}

.nav-item:not(:last-child) {
  margin-right: 1.067vw;
}

.nav-item::before {
  z-index: -1;
  position: absolute;
  top: 2.000vw;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(0.8);
  background: rgba(54, 54, 54, 1);
  content: "";
  filter: blur(10px);
}

.nav-item::after {
  display: inline-block;
  position: absolute;
  bottom: 2.133vw;
  left: 50%;
  width: 4.933vw;
  height: 2.933vw;
  transform: translateX(-50%);
  background-image: url(../img/arrow.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
}


.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-top: 2.133vw;
  padding-bottom: 6.667vw;
  color: var(--color-text);
  font-weight: 900;
  font-size: 6.000vw;
  line-height: calc(50/45);
  font-family: var(--font-zen);
  text-decoration: none;
}

a.nav-link:hover {
  color: var(--color-text);
}

@media (min-width: 768px) {
  .page-nav {
    margin-bottom: 47.104px;
  }

  .nav-list {
    gap: 8.192px;
  }

  .nav-item {
    border-radius: 3.072px;
  }

  .nav-item::before {
    top: 15.36px;
  }

  .nav-item::after {
    bottom: 16.384px;
    width: 37.888px;
    height: 22.528px;
  }

  .nav-link {
    padding-top: 16.384px;
    padding-bottom: 51.2px;
    font-size: 46.08px;
  }
}

/*---------------------------------
  prize
---------------------------------*/

.prizes {
  margin-bottom: 6.267vw;
}

.prizes-wrapper {
  padding-bottom: 4.000vw;
}

.prizes-heading-img {
  width: 13.200vw;
}

.prizes-intro {
  margin-bottom: 13.867vw;
  padding-top: 8.267vw;
}

.prizes-intro-text {
  width: calc((534/692) * 100%);
  margin-bottom: 6.400vw;
  margin-left: calc((91/692) * 100%);
}

.prizes-intro-img {
  width: calc((627/692) * 100%);
  margin-left: calc((38/692) * 100%);
}

/* デザインA */
.prizes-primary {
  margin-bottom: 10.933vw;
}

.prizes-primary-text {
  width: calc((497/692) * 100%);
  margin-bottom: 3.200vw;
  margin-left: calc((110/692) * 100%);
}

.prizes-primary-img {
  width: calc((601/692) * 100%);
  margin-left: calc((50/692) * 100%);
}

/* デザインB */
.prizes-secondary {
  margin-bottom: 6.533vw;
}

.prizes-secondary-text {
  width: calc((592/692) * 100%);
  margin-bottom: 3.067vw;
  margin-left: calc((46/692) * 100%);
}

.prizes-secondary-img {
  width: calc((614/692) * 100%);
  margin-left: calc((49/692) * 100%);
}

/* サイズガイド */
.prizes-size {
  position: relative;
  margin-bottom: 4.400vw;
  text-align: center;
}

.prizes-size-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc((588/692) * 100%);
  min-height: 5.467vw;
  margin-right: auto;
  margin-bottom: 2.000vw;
  margin-left: auto;
  padding-top: 0.267vw;
  border-top: 1px solid var(--color-text);
  border-bottom: 1px solid var(--color-text);
  font-weight: 700;
  font-size: 3.333vw;
  line-height: calc(27/25);
  letter-spacing: 0.01em;
}

.prizes-size-title span {
  transform: translateY(5%);
  font-size: 2.933vw;
  letter-spacing: 0.01em;
}

.prizes-size-img {
  width: calc((588/692) * 100%);
}

.prizes-note {
  position: absolute;
  bottom: 0;
  left: calc((320/692) * 100%);
  width: -moz-fit-content;
  width: fit-content;
  margin-right: 0;
  margin-left: 0;
  text-align: left;
}

.prizes-size-btn {
  font-weight: 500;
  font-size: 2.133vw;
  letter-spacing: 0.02em;
  text-align: center;
}

@media (min-width: 768px) {
  .prizes {
    margin-bottom: 48.128px;
  }

  .prizes-wrapper {
    padding-bottom: 30.72px;
  }

  .prizes-heading-img {
    width: 101.376px;
  }

  .prizes-intro {
    margin-bottom: 106.496px;
    padding-top: 63.488px;
  }

  .prizes-intro-text {
    margin-bottom: 49.152px;
  }

  .prizes-primary {
    margin-bottom: 83.968px;
  }

  .prizes-primary-text {
    margin-bottom: 24.576px;
  }

  .prizes-secondary {
    margin-bottom: 50.176px;
  }

  .prizes-secondary-text {
    margin-bottom: 23.552px;
  }

  .prizes-size {
    margin-bottom: 33.792px;
  }

  .prizes-size-title {
    min-height: 41.984px;
    margin-bottom: 15.36px;
    padding-top: 2.048px;
    font-size: 25.6px;
  }

  .prizes-size-title span {
    font-size: 22.528px;
  }

  .prizes-size-btn {
    font-size: 16.384px;
  }
}


/*---------------------------------
  product
---------------------------------*/
.products {
  margin-bottom: 6.133vw;
}

.products-wrapper {
  padding-bottom: 3.600vw;
}

.products-body {
  margin-bottom: 4.933vw;
  padding-top: 6.933vw;
}

.products-text {
  width: calc((591/692) * 100%);
  margin-bottom: 5.067vw;
  margin-left: calc((53/692) * 100%);
}

.products-img {
  width: calc((618/692) * 100%);
  margin-left: calc((37/692) * 100%);
}

.products-note {
  margin-bottom: 3.333vw;
}

@media (min-width: 768px) {
  .products {
    margin-bottom: 47.104px;
  }

  .products-wrapper {
    padding-bottom: 27.648px;
  }

  .products-body {
    margin-bottom: 37.888px;
    padding-top: 53.248px;
  }

  .products-text {
    margin-bottom: 38.912px;
  }

  .products-note {
    margin-bottom: 25.6px;
  }
}


/*---------------------------------
  application
---------------------------------*/

.application {
  margin-bottom: 6.400vw;
}

.application-wrapper {
  padding-bottom: 3.467vw;
}

.application-title {
  margin-bottom: 8.533vw;
}

.application-steps {
  padding-right: 2.667vw;
  padding-left: 2.667vw;
}

.step-title {
  width: 100%;
  margin-bottom: 2.400vw;
}

.step-text,
.notice-text {
  font-weight: 700;
  font-size: 3.733vw;
  line-height: calc(37/28);
  text-align: center;
}

.notice-text {
  letter-spacing: 0.01em;
}


/* step1 */
.step-item:first-child {
  margin-bottom: 5.867vw;
  text-align: center;
}

.step-item:first-child .step-text {
  margin-bottom: 4.400vw;
}

.step-item:first-child .step-img {
  width: 33.467vw;
}

/* step2 */
.step-item:nth-child(2) {
  margin-bottom: 6.933vw;
}

.step-item:nth-child(2) .step-text {
  margin-bottom: 6.133vw;
}

.step-item:nth-child(2) .step-img {
  width: 41.467vw;
  margin-left: 23.467vw;
}

/* step3 */
.step-item:last-child {
  margin-bottom: 21.067vw;
}

.step-item:last-child .step-text {
  margin-bottom: 6.400vw;
}

.step-item:last-child .step-img {
  width: 43.067vw;
  margin-left: 12.000vw;
}

/* 注意点 */
.notice-title {
  display: block;
  width: 78.533vw;
  margin-right: auto;
  margin-bottom: 4.667vw;
  margin-left: auto;
}

.notice-good {
  margin-bottom: 14.667vw;
}

.notice-good .notice-item:first-child {
  margin-bottom: 11.733vw;
}

.notice-good .notice-item:first-child .notice-img {
  display: block;
  width: 62.667vw;
  margin-right: auto;
  margin-bottom: 4.000vw;
  margin-left: auto;
}

.notice-good .notice-item:first-child .notice-text {
  letter-spacing: 0.01em;
}

.notice-good .notice-item:last-child .notice-img {
  width: 42.667vw;
  margin-bottom: 1.600vw;
  margin-left: 20.000vw;
}

.notice-good .notice-item:last-child .notice-text {
  letter-spacing: 0.01em;
}

.notice-bad {
  margin-bottom: 4.400vw;
}

.notice-bad-img {
  width: 82.400vw;
  margin-bottom: 3.467vw;
  margin-left: 2.533vw;
}

@media (min-width: 768px) {
  .application {
    margin-bottom: 49.152px;
  }

  .application-wrapper {
    padding-bottom: 26.624px;
  }

  .application-title {
    margin-bottom: 65.536px;
  }

  .application-steps {
    padding-right: 20.48px;
    padding-left: 20.48px;
  }

  .step-title {
    margin-bottom: 18.432px;
  }

  .step-text,
  .notice-text {
    font-size: 28.672px;
  }

  .step-item:first-child {
    margin-bottom: 45.056px;
  }

  .step-item:first-child .step-text {
    margin-bottom: 33.792px;
  }

  .step-item:first-child .step-img {
    width: 257.024px;
  }

  .step-item:nth-child(2) {
    margin-bottom: 53.248px;
  }

  .step-item:nth-child(2) .step-text {
    margin-bottom: 47.104px;
  }

  .step-item:nth-child(2) .step-img {
    width: 318.464px;
    margin-left: 180.224px;
  }

  .step-item:last-child {
    margin-bottom: 161.792px;
  }

  .step-item:last-child .step-text {
    margin-bottom: 49.152px;
  }

  .step-item:last-child .step-img {
    width: 330.752px;
    margin-left: 92.16px;
  }

  .notice-title {
    width: 603.136px;
    margin-bottom: 35.84px;
  }

  .notice-good {
    margin-bottom: 112.64px;
  }

  .notice-good .notice-item:first-child {
    margin-bottom: 90.112px;
  }

  .notice-good .notice-item:first-child .notice-img {
    width: 481.28px;
    margin-bottom: 30.72px;
  }

  .notice-good .notice-item:last-child .notice-img {
    width: 327.68px;
    margin-bottom: 12.288px;
    margin-left: 153.6px;
  }

  .notice-bad {
    margin-bottom: 33.792px;
  }

  .notice-bad-img {
    width: 632.832px;
    margin-bottom: 26.624px;
    margin-left: 19.456px;
  }
}



/*---------------------------------
  rules
---------------------------------*/

.rules {
  margin-bottom: 5.200vw;
}

.rules-content {
  padding-top: 6.267vw;
  padding-right: 2.667vw;
  padding-bottom: 7.067vw;
  padding-left: 2.667vw;
}

.rules-content-inner {
  height: 61.067vw;
  padding-right: 2.667vw;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.rules-content-inner::-webkit-scrollbar {
  width: 1.600vw;
  height: 1.600vw;
}

.rules-content-inner::-webkit-scrollbar-track {
  border-radius: 0;
  background: #b4b4b4;
}

.rules-content-inner::-webkit-scrollbar-thumb {
  background: var(--color-text);
}

.rules-subtitle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 4.533vw;
  margin-bottom: 1.600vw;
  padding-right: 1.4em;
  padding-left: 1.4em;
  background-color: var(--color-text);
  color: var(--color-base);
  font-weight: 900;
  font-size: 2.667vw;
  letter-spacing: 0.07em;
}

.rules-text {
  font-size: 2.667vw;
  line-height: calc(30/20);
  letter-spacing: 0.05em;
}

.rules-text-small {
  font-size: 2.133vw;
  line-height: calc(28/16);
}

/* 記号付きリスト */
.rules-note {
  padding-left: 1em;
  font-size: 2.133vw;
  line-height: calc(28/16);
  list-style-type: none;
  text-indent: -1em;
}

.rules-note>li::before {
  content: "※";
}

.rules-note-secondary {
  padding-left: 0.5em;
  text-indent: -0.5em;
}

.rules-note-secondary>li::before {
  content: "・";
}


/* 番号付きリスト */
.rules-subnote {
  padding-left: 1.25em;
  font-size: 2.133vw;
  line-height: calc(28/16);
  list-style-type: none;
  text-indent: -1.25em;
  counter-reset: list;
}

.rules-subnote>li::before {
  content: "(" counter(list) ")";
  letter-spacing: 0em;
  counter-increment: list;
}

.rules-subnote-secondary {
  font-size: 2.667vw;
  line-height: calc(30/20);
  letter-spacing: 0.05em;
}

.rules-list {
  padding-left: 0.5em;
  font-size: 2.667vw;
  line-height: calc(30/20);
  letter-spacing: 0.03em;
  list-style-type: none;
  text-indent: -0.5em;
}

.rules-list>li::before {
  margin-right: 0;
  content: "・";
}

.rules-contact {
  display: flex;
  align-items: center;
}

.rules-contact-icon {
  width: 7.333vw;
  transform: translateY(12%);
}

.rules-contact-text {
  font-weight: 900;
  font-size: 4.667vw;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* お問い合わせ情報のみ */
.rules-section:last-child .rules-text {
  font-weight: 400;
}

/* サイズガイド表 */
.rules-size-img {
  width: 100%;
}

@media (min-width: 768px) {
  .rules {
    margin-bottom: 39.936px;
  }

  .rules-content {
    padding-top: 48.128px;
    padding-right: 20.48px;
    padding-bottom: 54.272px;
    padding-left: 20.48px;
  }

  .rules-content-inner {
    height: 468.992px;
    padding-right: 20.48px;
  }

  .rules-content-inner::-webkit-scrollbar {
    width: 12.288px;
    height: 12.288px;
  }

  .rules-subtitle {
    height: 34.816px;
    margin-bottom: 12.288px;
    font-size: 20.48px;
  }

  .rules-text {
    font-size: 20.48px;
  }

  .rules-text-small {
    font-size: 16.384px;
  }

  .rules-note {
    font-size: 16.384px;
  }

  .rules-subnote {
    font-size: 16.384px;
  }

  .rules-subnote-secondary {
    font-size: 20.48px;
  }

  .rules-list {
    font-size: 20.48px;
  }

  .rules-contact-icon {
    width: 56.32px;
  }

  .rules-contact-text {
    font-size: 35.84px;
  }
}

/*---------------------------------
  styles
---------------------------------*/

.styles {
  margin-bottom: 9.200vw;
}

.styles-title {
  margin-bottom: 3.333vw;
  padding-top: 2.667vw;
  padding-bottom: 2.667vw;
  border-top: 1px solid var(--color-text);
  border-bottom: 1px solid var(--color-text);
}

.styles-title-img {
  display: block;
  height: 7.733vw;
  margin-right: auto;
  margin-left: auto;
  line-height: 1;
}

.styles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -moz-column-gap: 2.800vw;
  column-gap: 2.800vw;
  row-gap: 3.333vw;
}

/* lightbox */
.lightbox {
  position: fixed;
  top: 50% !important;
  transform: translate(0, -50%);
}

.lightboxOverlay {
  opacity: 0.6;
}

.lightbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.lightbox .lb-outerContainer {
  width: 77.333vw !important;
  height: 96.667vw !important;
}

.lightbox .lb-container {
  width: 100%;
  height: 100%;
}

.lightbox .lb-image {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: 0 !important;
}

.lightbox .lb-dataContainer {
  z-index: 50 !important;
  position: fixed;
  top: 0;
  width: 100% !important;
  padding: 8px !important;
}


.lb-data .lb-close {
  width: 8.667vw !important;
  height: 8.667vw !important;
  background-image: url(../img/close.svg);
  background-position: center;
  background-size: 4.5vw !important;
  background-color: rgba(54, 54, 54, .75);
  opacity: 1;
}

.lb-loader,
.lb-nav {
  left: 50%;
  width: 130%;
  max-width: 100vw;
  max-width: 100dvw;
  padding-right: 4vw !important;
  padding-left: 4vw !important;
  transform: translate(-50%, 0);
}


.lb-nav a.lb-next {
  background-image: url(../img/next.svg);
  background-size: 2vw;
  opacity: 1;
  -webkit-tap-highlight-color: transparent;
}

.lb-nav a.lb-prev {
  background-image: url(../img/prev.svg);
  background-size: 2vw;
  opacity: 1;
  -webkit-tap-highlight-color: transparent;
}

.lb-nav a.lb-next::before,
.lb-nav a.lb-prev::before {
  display: inline-block;
  z-index: -1;
  position: absolute;
  top: 48%;
  width: 71px;
  width: 9.333vw;
  height: 71px;
  height: 9.333vw;
  transform: translate(0, -50%);
  border-radius: 50%;
  background-position: center;
  background-color: rgba(54, 54, 54, .75);
  content: "";
}

.lb-nav a.lb-next::before {
  right: 3px;
}

.lb-nav a.lb-prev::before {
  left: 3px;
}

@media (min-width: 768px) {
  .styles {
    margin-bottom: 70.656px;
  }

  .styles-title {
    margin-bottom: 25.6px;
    padding-top: 20.48px;
    padding-bottom: 20.48px;
  }

  .styles-title-img {
    height: 59.392px;
  }

  .styles-grid {
    -ms-grid-columns: 1fr 21.504px 1fr 21.504px 1fr;
    -moz-column-gap: 21.504px;
    column-gap: 21.504px;
    row-gap: 25.6px;
  }

  .lightbox .lb-outerContainer {
    width: 593.92px !important;
    height: 725px !important;
  }

  .lb-loader,
  .lb-nav {
    padding: 27px !important;
  }

  .lb-nav a.lb-next,
  .lb-nav a.lb-prev {
    background-size: auto;
  }

  .lb-nav a.lb-next::before,
  .lb-nav a.lb-prev::before {
    width: 71px;
    height: 71px;
  }

  .lb-data .lb-close {
    width: 46px !important;
    height: 46px !important;
    background-position: center;
    background-size: 30px !important;
  }
}

/*---------------------------------
  movie
---------------------------------*/

.movie {
  margin-bottom: 9.467vw;
  padding-top: 10.400vw;
  padding-bottom: 13.067vw;
  background-color: var(--color-primary);
}

.movie-title {
  margin-bottom: 9.6vw;
  text-align: center;
}

.movie-title-img {
  width: 15.467vw;
}

.movie-button {
  text-align: center;
}

.movie-button-img {
  width: 62.800vw;
}

@media (min-width: 768px) {
  .movie {
    margin-bottom: 72.704px;
    padding-top: 79.872px;
    padding-bottom: 100.352px;
  }

  .movie-title {
    margin-bottom: 73.728px;
  }

  .movie-title-img {
    width: 118.784px;
  }

  .movie-button-img {
    width: 482.304px;
  }
}

/* youtube 再生時 */
.movie-layer {
  display: none;
  z-index: 10000;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.movie-overlay {
  display: none;
  z-index: 10000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
}

.movie-close {
  display: block;
  position: fixed;
  top: 35vh;
  right: 50vw;
  width: 60px;
  height: 84px;
  margin-top: -300px;
  margin-right: -470px;
  text-align: center;
}

.movie-close:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 46px;
  height: 1px;
  margin: auto;
  transform: rotate(45deg);
  background: #fff;
  content: "";
  transition: .5s all ease;
}

.movie-close:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 46px;
  height: 1px;
  margin: auto;
  transform: rotate(-45deg);
  background: #fff;
  content: "";
  transition: .5s all ease;
}

.movie-close:hover:before {
  width: 34px;
  transition: .5s all ease;
}

.movie-close:hover:after {
  width: 34px;
  transition: .5s all ease;
}

/* close位置調整 */
@media (max-width: 1163px) {
  .movie-close {
    top: 0;
    right: 0;
    width: 30px;
    height: 42px;
    margin-top: 0;
    margin-right: 0;
  }
  .movie-close:before {
    width: 23px;
  }
  
  .movie-close:after {
    width: 23px;
  }
  
  .movie-close:hover:before {
    width: 17px;
  }
  
  .movie-close:hover:after {
    width: 17px;
  }
}


/*---------------------------------
  logo
---------------------------------*/

.logo {
  padding-top: 11.733vw;
  padding-bottom: 11.733vw;
  background-color: var(--color-text);
}

.logo-inner {
  text-align: center;
}

.logo-img {
  width: 22.800vw;
}

@media (min-width: 768px) {
  .logo {
    padding-top: 90.112px;
    padding-bottom: 90.112px;
  }

  .logo-img {
    width: 175.104px;
  }
}

/*---------------------------------
  ページTOPへ
---------------------------------*/

.page-top {
  position: fixed;
  bottom: 60px;
  left: 50%;
  width: 100%;
  padding-right: 8.667vw;
  transform: translateX(-50%);
  text-align: right;
  pointer-events: none;
}

.page-top-btn {
  display: none;
  position: relative;
  width: 13.600vw;
  height: 13.600vw;
  border: solid 2px var(--color-text);
  border-radius: 50%;
  background-color: var(--color-primary);
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
}

.page-top-btn.is-active {
  display: inline-block;
}

.page-top-btn::before {
  z-index: -1;
  position: absolute;
  top: 2.000vw;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(0.8);
  border-radius: 50%;
  background: rgba(0, 0, 0, 1);
  content: "";
  filter: blur(5px);
}

.page-top-arrow {
  width: 2.267vw;
  margin-bottom: 0.933vw;
}

.page-top-text {
  display: block;
  color: var(--color-text);
  font-weight: 900;
  font-size: 2.400vw;
  line-height: calc(23/18);
  font-family: var(--font-zen);
  letter-spacing: 0.05em;
  text-align: center;
}

@media (min-width: 768px) {
  .page-top {
    padding-right: 66.56px;
  }

  .page-top-btn {
    width: 104.448px;
    height: 104.448px;
  }

  .page-top-btn::before {
    top: 15.36px;
  }

  .page-top-arrow {
    width: 17.408px;
    margin-bottom: 7.168px;
  }

  .page-top-text {
    font-size: 18.432px;
  }
}