/*** for PC Browser ***/
@media (min-width:401px)
{
/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */

/* Reset box-model and set borders */
/* ============================================ */

*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  min-width: 0;
}

/* Document */
/* ============================================ */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */

/**
 * Prevent vertical alignment issues.
 */

svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */

/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none; /* 1 */
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
}

/**
 * Correct cursors for clickable elements.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
}

button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
  cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * Remove padding
 */

option {
  padding: 0;
}

/**
 * Reset to invisible
 */

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the outline style in Safari.
 */

[type="search"] {
  outline-offset: -2px; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Fix appearance for Firefox
 */
[type="number"] {
  -moz-appearance: textfield;
}

/**
 * Clickable labels
 */

label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */

[contenteditable]:focus {
  outline: auto;
}

/* Tables */
/* ============================================ */

/**
1. Correct table border color inheritance in all Chrome and Safari.
*/

table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}



@import "destyle.scss";

$breakpoints: (
  "xs": "(min-width: 390px)",
  "sm": "(min-width: 640px)",
  "md": "(min-width: 768px)",
  "lg": "(min-width: 1024px)",
  "xl": "(min-width: 1280px)",
  "2xl": "(min-width: 1536px)",
);

@mixin breakPoint($key) {
  @media #{map-get($breakpoints, $key)} {
    @content;
  }
}

@mixin responsive-value($property, $value) {
  #{$property}: calc(#{$value}vw / 1440 * 100);
}

@mixin hover-opacity-down {
  transition: opacity 0.15s ease-out;

  &:hover {
    opacity: 0.7;
  }
}

@mixin hover-brightness-down {
  transition: filter 0.15s ease-out;

  &:hover {
    filter: brightness(0.9);
  }

  &:active {
    filter: brightness(0.75);
  }
}

$primary-color: #0a51a1;
$secondary-color: #cedcec;
$tertiary-color: #0a83a1;

#nara-open-factory {
  font-family: "Noto Sans JP", serif;
  color: #000;
  font-weight: 400;
  line-height: 2.1875;
  background-color: #f5f5f5;
  padding-top: 48px;

  @include breakPoint("md") {
    padding-top: 60px;
  }

  img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    pointer-events: none;
  }

  .site-branding {
    &__link {
      display: block;
      width: 100%;
      max-width: fit-content;
      @include hover-opacity-down;
    }

    &__logo {
      display: block;
    }
  }

  .pc-navigation {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 16px;

    &__link {
      display: block;
      width: 100%;
      max-width: fit-content;
      @include hover-opacity-down;
    }

    &__txt {
      &--en {
        @include breakPoint("md") {
          max-height: 18px;
        }

        @include breakPoint("lg") {
          max-height: 100%;
        }
      }
    }
  }

  .language-select {
    background-color: #fff;
    position: relative;
    z-index: 1;

    &__label,
    &__list-item-link {
      max-width: fit-content;
      @include hover-brightness-down;
    }

    &__checkbox {
      display: none;
    }

    &__list {
      background-color: #fff;
      position: absolute;
      top: 100%;
      left: 0;
      opacity: 0;
      visibility: hidden;
    }

    &:has(.language-select__checkbox:checked) {
      .language-select {
        &__list {
          opacity: 1;
          visibility: visible;
          box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
        }
      }
    }
  }

  .mobile-navigation {
    &__btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 48px;
      aspect-ratio: 1;
      @include hover-opacity-down;
    }

    &__btn-input {
      display: none;
    }

    &__btn-icon {
      display: block;
      width: 32px;

      &--close {
        display: none;
      }
    }

    &__list {
      display: none;
      width: 100%;
      padding: 16px 0;
      background-color: $primary-color;
      position: absolute;
      top: 48px;
      left: 0;
    }

    &__link {
      display: block;
      padding: 8px;
      @include hover-opacity-down;
    }

    &__txt {
      width: 100%;
      max-width: fit-content;
      margin: 0 auto;
    }

    &:has(.mobile-navigation__btn-input:checked) {
      .mobile-navigation {
        &__btn-icon {
          &--open {
            display: none;
          }

          &--close {
            display: block;
          }
        }

        &__list {
          display: block;
        }
      }
    }
  }

  .main-navigation {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 0px;

    @include breakPoint("md") {
      column-gap: 16px;
    }

    @include breakPoint("lg") {
      column-gap: 20px;
    }

    &__pc-navigation {
      display: none;

      @include breakPoint("md") {
        display: flex;
      }
    }

    &__language {
      flex-shrink: 0;
      max-width: 120px;

      @include breakPoint("lg") {
        flex-shrink: 1;
        max-width: 100%;
      }
    }

    &__mobile-navigation {
      flex-shrink: 0;

      @include breakPoint("md") {
        display: none;
      }
    }
  }

  .header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    background-color: $primary-color;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;

    @include breakPoint("md") {
      height: 60px;
      padding: 10px 0;
    }

    &__in {
      display: flex;
      justify-content: space-between;
      align-items: center;
      column-gap: 12px;
      width: 100%;
      padding-left: 12px;

      @include breakPoint("md") {
        padding-right: 16px;
        padding-left: 16px;
      }

      @include breakPoint("lg") {
        column-gap: 16px;
        padding-right: 20px;
        padding-left: 20px;
      }

      @include breakPoint("xl") {
        padding-left: 165px;
      }
    }

    &__navigation {
      flex-shrink: 0;
    }
  }

  .hero {
    background-color: $secondary-color;
    position: relative;
    overflow: hidden;

    &__bg {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      inset: 0;

      @include breakPoint("md") {
        position: relative;
        inset: auto;
      }
    }

    &__img {
      max-width: 95%;
      position: absolute;
      right: 0;
      bottom: 0;

      @include breakPoint("xs") {
        max-width: 80%;
      }

      @include breakPoint("sm") {
        max-width: 66.6666%;
      }

      @include breakPoint("md") {
        @include responsive-value(width, 912);
        max-width: 100%;
      }

      &--en {
        max-width: 80%;

        @include breakPoint("xs") {
          max-width: 70%;
        }

        @include breakPoint("sm") {
          max-width: 66.6666%;
        }

        @include breakPoint("md") {
          @include responsive-value(width, 912);
          max-width: 100%;
        }
      }
    }

    &__in {
      padding: 48px 16px;
      position: relative;

      @include breakPoint("md") {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        @include responsive-value(padding-top, 118);
        @include responsive-value(padding-right, 50);
        @include responsive-value(padding-bottom, 137);
        @include responsive-value(padding-left, 50);
        position: absolute;
        inset: 0;
      }
    }

    &__desc {
      display: flex;
      flex-direction: column;
      align-items: center;

      @include breakPoint("md") {
        display: block;
      }
    }

    &__heading {
      display: flex;
      flex-direction: column;
      max-width: 496px;

      @include breakPoint("md") {
        @include responsive-value(width, 743);
        max-width: 100%;
      }

      &--en {
        max-width: 422px;

        @include breakPoint("md") {
          @include responsive-value(width, 633);
          max-width: 100%;
        }
      }
    }

    &__heading-speech-bubble {
      filter: drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.08)) drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.04));
    }

    &__heading-ttl {
      margin-top: max(-5vw, -24px);

      @include breakPoint("md") {
        @include responsive-value(margin-top, -35);
      }

      &--en {
        margin-top: 0;

        @include breakPoint("md") {
          @include responsive-value(margin-top, -2);
        }
      }
    }

    &__btn-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: fit-content;
      margin-top: 4px;

      @include breakPoint("md") {
        @include responsive-value(margin-top, 30);
        @include responsive-value(margin-left, 163);
      }
    }

    &__btn-txt {
      max-width: 160px;
      margin-bottom: 12px;

      @include breakPoint("md") {
        @include responsive-value(width, 250);
        max-width: 100%;
        @include responsive-value(margin-bottom, 20);
      }

      &--en {
        max-width: 220px;

        @include breakPoint("md") {
          @include responsive-value(width, 330);
          max-width: 100%;
        }
      }
    }

    &__btn {
      display: block;
      max-width: 240px;
      border-radius: 50vw;
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
      @include hover-brightness-down;

      @include breakPoint("md") {
        @include responsive-value(width, 350);
        max-width: 100%;
      }
    }

    &__map {
      display: flex;
      flex-direction: column;
      align-items: center;
      row-gap: 12px;
      margin-top: 32px;

      @include breakPoint("md") {
        @include responsive-value(row-gap, 20);
      }
    }

    &__map-txt {
      max-width: 174px;

      @include breakPoint("md") {
        @include responsive-value(width, 261);
        max-width: 100%;
      }

      &--en {
        max-width: 258px;

        @include breakPoint("md") {
          @include responsive-value(width, 387);
          max-width: 100%;
        }
      }
    }

    &__map-txt-img {
      &--primary-color {
        @include breakPoint("md") {
          display: none;
        }
      }

      &--white {
        display: none;

        @include breakPoint("md") {
          display: block;
        }
      }
    }

    &__map-img {
      max-width: 320px;
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px rgba(0, 0, 0, 0.08);

      @include breakPoint("md") {
        @include responsive-value(width, 500);
        max-width: 100%;
      }
    }
  }

  @keyframes infinity-scroll-left {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }

  .infinity-slider {
    display: flex;
    column-gap: 8px;
    overflow: hidden;
    margin-top: 20px;

    @include breakPoint("md") {
      @include responsive-value(column-gap, 20);
    }

    @include breakPoint("lg") {
      margin-top: 30px;
    }

    &__list {
      flex-shrink: 0;
      display: flex;
      column-gap: 8px;
      animation: infinity-scroll-left 30s infinite linear 0.5s both;

      @include breakPoint("md") {
        @include responsive-value(column-gap, 20);
      }
    }

    &__item {
      width: calc(100vw / 3);

      @include breakPoint("md") {
        width: calc(100vw / 4);
      }

      @include breakPoint("lg") {
        width: calc(100vw / 6);
      }
    }

    &__img {
      width: 100%;
    }
  }

  .anchor-target {
    padding-top: 48px;
    margin-top: -48px;

    @include breakPoint("md") {
      padding-top: 60px;
      margin-top: -60px;
    }
  }

  .bs-container {
    padding-right: 20px;
    padding-left: 20px;
    position: relative;
    margin-right: auto;
    margin-left: auto;

    @include breakPoint("sm") {
      max-width: calc(640px + 20px * 2);
    }

    @include breakPoint("md") {
      max-width: calc(768px + 20px * 2);
    }

    @include breakPoint("lg") {
      max-width: calc(1024px + 20px * 2);
    }

    @include breakPoint("xl") {
      max-width: calc(1110px + 20px * 2);
    }
  }

  .with-en-heading {
    line-height: normal;
    text-align: center;

    &__en-txt {
      display: flex;
      justify-content: center;
      align-items: center;
      column-gap: 8px;
      font-size: 14px;
      color: $primary-color;
      margin-bottom: 8px;

      @include breakPoint("lg") {
        column-gap: 10px;
        font-size: 16px;
        margin-bottom: 10px;
      }

      &::before,
      &::after {
        content: "";
        display: block;
        width: 8px;
        height: 1px;
        background-color: $primary-color;
        flex-shrink: 0;

        @include breakPoint("lg") {
          width: 10px;
        }
      }
    }

    &__ja-txt {
      font-size: 20px;
      font-weight: 500;

      @include breakPoint("lg") {
        font-size: 25px;
      }
    }
  }

  .dashed-line-box {
    max-width: 850px;
    padding: 32px 20px;
    background-color: rgba($primary-color, 0.1);
    position: relative;
    margin-right: auto;
    margin-left: auto;

    @include breakPoint("sm") {
      padding: 32px 40px;
    }

    @include breakPoint("lg") {
      padding: 50px 60px;
    }

    &::before {
      content: "";
      display: block;
      background-image: linear-gradient(to right, $primary-color, $primary-color 5px, transparent 5px, transparent 9px), linear-gradient(to bottom, $primary-color, $primary-color 5px, transparent 5px, transparent 9px), linear-gradient(to left, $primary-color, $primary-color 5px, transparent 5px, transparent 9px), linear-gradient(to top, $primary-color, $primary-color 5px, transparent 5px, transparent 9px);
      background-size: 9px 1px, 1px 9px, 9px 1px, 1px 9px;
      background-position: left top, right top, right bottom, left bottom;
      background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
      position: absolute;
      inset: 0;
      translate: -8px -8px;
      pointer-events: none;

      @include breakPoint("lg") {
        translate: -10px -10px;
      }
    }

    &__ilust {
      width: 54px;
      position: absolute;
      right: 20px;
      bottom: calc(100% - 1px);

      @include breakPoint("lg") {
        width: 80px;
        right: 30px;
      }
    }

    &__txt {
      font-size: 14px;
      line-height: 2.5;

      @include breakPoint("lg") {
        font-size: 16px;
      }
    }
  }

  .movie-area {
    &__txt {
      font-size: 18px;
      letter-spacing: 0.1em;
      line-height: normal;
      color: $primary-color;
      text-align: center;
      margin-bottom: 8px;

      @include breakPoint("lg") {
        font-size: 20px;
        margin-bottom: 10px;
      }
    }

    &__movie {
      display: block;
      width: 100%;
      max-width: 560px;
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
      margin-right: auto;
      margin-left: auto;
    }
  }

  .about-section {
    padding-top: 46px;
    padding-bottom: 80px;

    @include breakPoint("lg") {
      padding-top: 70px;
      padding-bottom: 120px;
    }

    &__box {
      margin-top: 56px;

      @include breakPoint("sm") {
        margin-top: 40px;
      }

      @include breakPoint("lg") {
        margin-top: 60px;
      }
    }

    &__movie {
      margin-top: 40px;

      @include breakPoint("lg") {
        margin-top: 60px;
      }
    }
  }

  .btn-area {
    &__txt {
      font-size: 18px;
      letter-spacing: 0.1em;
      line-height: normal;
      color: $primary-color;
      text-align: center;
      margin-bottom: 8px;

      @include breakPoint("lg") {
        font-size: 20px;
        margin-bottom: 10px;
      }
    }

    &__btn {
      display: block;
      max-width: 240px;
      @include hover-brightness-down;
      margin-right: auto;
      margin-left: auto;

      @include breakPoint("lg") {
        max-width: 350px;
      }
    }
  }

  .tab-area {
    &__list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 12px;
      row-gap: 12px;
      max-width: 970px;
      margin-right: auto;
      margin-left: auto;

      @include breakPoint("sm") {
        grid-template-columns: repeat(4, 1fr);
        column-gap: 16px;
      }

      @include breakPoint("lg") {
        column-gap: 30px;
        row-gap: 20px;
      }
    }

    &__input {
      display: none;

      &:checked + .tab-area {
        &__label {
          background-color: $tertiary-color;
          pointer-events: none;
          box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px rgba(0, 0, 0, 0.08);

          .tab-area {
            &__label-txt {
              color: #fff;
            }

            &__label-icon {
              filter: brightness(0) invert(1);
            }
          }
        }
      }
    }

    &__label {
      display: flex;
      align-items: center;
      min-height: 48px;
      padding: 8px;
      background-color: #fff;
      border-radius: 5px;
      @include hover-brightness-down;
      transition: background-color 0.15s ease-out, filter 0.15s ease-out;

      @include breakPoint("md") {
        padding: 8px 12px;
      }

      @include breakPoint("lg") {
        min-height: 60px;
        padding: 10px 15px;
      }
    }

    &__label-txt {
      flex-grow: 1;
      font-size: 16px;
      line-height: normal;
      color: $tertiary-color;
      text-align: center;
      transition: color 0.15s ease-out;

      @include breakPoint("sm") {
        font-size: 14px;
      }

      @include breakPoint("md") {
        font-size: 18px;
      }

      @include breakPoint("lg") {
        font-size: 20px;
      }
    }

    &__label-icon {
      width: 24px;
      aspect-ratio: 1 / 1;
      flex-shrink: 0;

      @include breakPoint("lg") {
        width: 40px;
      }
    }

    &__contents {
      margin-top: 40px;

      @include breakPoint("lg") {
        margin-top: 60px;
      }
    }

    &__content {
      display: none;
      height: 400px;
      padding: 20px 20px 40px;
      background-color: #fff;
      overflow: hidden;
      position: relative;
      transition: height 0.15s ease-out;

      @include breakPoint("lg") {
        height: 610px;
        padding: 30px 30px 60px;
      }

      &:has(.tab-area__hidden-btn-input:checked) {
        height: auto;

        .tab-area__hidden-btn {
          display: none;
        }
      }
    }

    &__content-in {
      max-width: 920px;
      margin-right: auto;
      margin-left: auto;
    }

    &__figure {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      row-gap: 16px;
      max-width: 850px;
      margin-right: auto;
      margin-left: auto;

      @include breakPoint("sm") {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 16px;
      }

      @include breakPoint("lg") {
        column-gap: 50px;
      }
    }

    &__desc {
      margin-top: 20px;

      @include breakPoint("lg") {
        margin-top: 30px;
      }
    }

    &__heading {
      padding: 4px 0 4px 10px;
      border-left: 4px solid $tertiary-color;
      font-size: 18px;
      font-weight: 500;
      line-height: normal;
      margin-bottom: 12px;

      @include breakPoint("lg") {
        padding: 6px 0 5px 20px;
        border-left-width: 8px;
        font-size: 20px;
        margin-bottom: 20px;
      }
    }

    &__txt {
      font-size: 14px;

      @include breakPoint("lg") {
        font-size: 16px;
      }

      & + .tab-area__txt {
        margin-top: 24px;

        @include breakPoint("lg") {
          margin-top: 35px;
        }
      }
    }

    &__hidden-btn {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 10;
    }

    &__hidden-btn-in {
      position: relative;
      background: linear-gradient(to bottom, rgba(#fff, 0) 0%, rgba(#fff, 0.5) 100%);
      @include hover-opacity-down;

      &::before {
        content: "";
        display: block;
        width: 100%;
        height: 20px;
        background: linear-gradient(to bottom, rgba(#fff, 0) 0%, rgba(#777, 1) 100%);
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;

        @include breakPoint("lg") {
          height: 30px;
        }
      }
    }

    &__hidden-btn-input {
      display: none;
    }

    &__hidden-btn-label {
      display: flex;
      justify-content: center;
      align-items: center;
      column-gap: 8px;
      padding: 10px;
      position: relative;

      @include breakPoint("lg") {
        column-gap: 13px;
        padding: 15px;
      }
    }

    &__hidden-btn-label-txt {
      font-size: 18px;
      font-weight: 500;
      line-height: normal;
      text-decoration: underline;
      color: $tertiary-color;
      text-align: center;

      @include breakPoint("lg") {
        font-size: 20px;
      }
    }

    &__hidden-btn-label-arrow {
      width: 4px;

      @include breakPoint("lg") {
        width: 6px;
      }
    }

    &:has(#tab-socks:checked) #content-socks,
    &:has(#tab-sushi:checked) #content-sushi,
    &:has(#tab-somen:checked) #content-somen,
    &:has(#tab-plastic:checked) #content-plastic,
    &:has(#tab-wood:checked) #content-wood,
    &:has(#tab-medicine:checked) #content-medicine,
    &:has(#tab-leather:checked) #content-leather,
    &:has(#tab-brushes:checked) #content-brushes {
      display: block;
    }
  }

  .column-section {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: $secondary-color;

    @include breakPoint("lg") {
      padding-top: 90px;
      padding-bottom: 90px;
    }

    &__in {
      padding-right: 20px;
      padding-left: 20px;
      position: relative;
      margin-right: auto;
      margin-left: auto;
      max-width: calc(1110px + 20px * 2);
    }

    &__tab {
      margin-top: 40px;

      @include breakPoint("lg") {
        margin-top: 60px;
      }
    }

    &__btn {
      margin-top: 40px;

      @include breakPoint("lg") {
        margin-top: 60px;
      }
    }
  }

  .map-section {
    padding-top: 54px;
    padding-bottom: 64px;
    position: relative;

    @include breakPoint("lg") {
      padding-top: 80px;
      padding-bottom: 96px;
    }

    &::before {
      content: "";
      width: 100%;
      height: 50%;
      background-color: #fff;
      position: absolute;
      bottom: 0;
      left: 0;

      @include breakPoint("lg") {
        height: 550px;
      }
    }

    &__txt {
      max-width: 730px;
      font-size: 14px;
      margin-right: auto;
      margin-left: auto;
      margin-top: 24px;

      @include breakPoint("lg") {
        font-size: 16px;
        margin-top: 40px;
      }
    }

    &__map-area {
      max-width: 800px;
      aspect-ratio: 800 / 436;
      position: relative;
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
      margin-top: 24px;
      margin-right: auto;
      margin-left: auto;

      @include breakPoint("lg") {
        margin-top: 40px;
      }
    }

    &__map {
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
    }

    &__btn {
      margin-top: 40px;

      @include breakPoint("lg") {
        margin-top: 60px;
      }
    }
  }

  .txt-site-branding {
    &__link {
      display: block;
      width: fit-content;
      padding-bottom: 4px;
      border-bottom: 1px solid #fff;
      font-size: 14px;
      color: #fff;
      line-height: normal;
      text-align: center;
      @include hover-opacity-down();
      margin-right: auto;
      margin-left: auto;

      @include breakPoint("lg") {
        padding-bottom: 5px;
        font-size: 16px;
      }
    }
  }

  .footer-navigation {
    &__list {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      column-gap: 12px;
      row-gap: 8px;

      @include breakPoint("sm") {
        flex-direction: row;
      }

      @include breakPoint("lg") {
        column-gap: 16px;
      }
    }

    &__link {
      display: block;
      width: fit-content;
      font-size: 14px;
      color: #fff;
      line-height: normal;
      font-weight: 500;
      text-align: center;
      @include hover-opacity-down();

      @include breakPoint("lg") {
        font-size: 16px;
      }
    }
  }

  .copyright {
    font-size: 12px;
    color: #fff;
    line-height: normal;
    text-align: center;

    @include breakPoint("lg") {
      font-size: 14px;
    }
  }

  .footer {
    padding-top: 24px;
    padding-bottom: 24px;
    background-color: $primary-color;

    @include breakPoint("lg") {
      padding-top: 35px;
      padding-bottom: 34px;
    }

    &__navigation {
      margin-top: 20px;

      @include breakPoint("lg") {
        margin-top: 30px;
      }
    }

    &__copyright {
      margin-top: 20px;

      @include breakPoint("lg") {
        margin-top: 30px;
      }
    }
  }
}



#nara-open-factory {
  /*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */
  /* Reset box-model and set borders */
  /* ============================================ */
  /* Document */
  /* ============================================ */
  /**
  * 1. Correct the line height in all browsers.
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  * 3. Remove gray overlay on links for iOS.
  */
  /* Sections */
  /* ============================================ */
  /**
  * Remove the margin in all browsers.
  */
  /**
  * Render the `main` element consistently in IE.
  */
  /* Vertical rhythm */
  /* ============================================ */
  /* Headings */
  /* ============================================ */
  /* Lists (enumeration) */
  /* ============================================ */
  /* Lists (definition) */
  /* ============================================ */
  /* Grouping content */
  /* ============================================ */
  /**
  * 1. Add the correct box sizing in Firefox.
  * 2. Show the overflow in Edge and IE.
  */
  /**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
  /* Text-level semantics */
  /* ============================================ */
  /**
  * Remove the gray background on active links in IE 10.
  */
  /**
  * 1. Remove the bottom border in Chrome 57-
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  */
  /**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */
  /**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
  /**
  * Add the correct font size in all browsers.
  */
  /**
  * Prevent `sub` and `sup` elements from affecting the line height in
  * all browsers.
  */
  /* Replaced content */
  /* ============================================ */
  /**
  * Prevent vertical alignment issues.
  */
  /* Forms */
  /* ============================================ */
  /**
  * Reset form fields to make them styleable.
  * 1. Make form elements stylable across systems iOS especially.
  * 2. Inherit text-transform from parent.
  */
  /**
  * Correct cursors for clickable elements.
  */
  /**
  * Improve outlines for Firefox and unify style with input elements & buttons.
  */
  /**
  * Remove padding
  */
  /**
  * Reset to invisible
  */
  /**
  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
  /**
  * Remove the default vertical scrollbar in IE 10+.
  */
  /**
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
  /**
  * Correct the outline style in Safari.
  */
  /**
  * Remove the inner padding in Chrome and Safari on macOS.
  */
  /**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Fix font inheritance.
  */
  /**
  * Fix appearance for Firefox
  */
  /**
  * Clickable labels
  */
  /* Interactive */
  /* ============================================ */
  /*
  * Add the correct display in Edge, IE 10+, and Firefox.
  */
  /*
  * Add the correct display in all browsers.
  */
  /*
  * Remove outline for editable content.
  */
  /* Tables */
  /* ============================================ */
  /**
  1. Correct table border color inheritance in all Chrome and Safari.
  */
}
#nara-open-factory *,
#nara-open-factory ::before,
#nara-open-factory ::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  min-width: 0;
}
#nara-open-factory html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}
#nara-open-factory body {
  margin: 0;
}
#nara-open-factory main {
  display: block;
}
#nara-open-factory p,
#nara-open-factory table,
#nara-open-factory blockquote,
#nara-open-factory address,
#nara-open-factory pre,
#nara-open-factory iframe,
#nara-open-factory form,
#nara-open-factory figure,
#nara-open-factory dl {
  margin: 0;
}
#nara-open-factory h1,
#nara-open-factory h2,
#nara-open-factory h3,
#nara-open-factory h4,
#nara-open-factory h5,
#nara-open-factory h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}
#nara-open-factory ul,
#nara-open-factory ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
#nara-open-factory dt {
  font-weight: bold;
}
#nara-open-factory dd {
  margin-left: 0;
}
#nara-open-factory hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}
#nara-open-factory pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}
#nara-open-factory address {
  font-style: inherit;
}
#nara-open-factory a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}
#nara-open-factory abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}
#nara-open-factory b,
#nara-open-factory strong {
  font-weight: bolder;
}
#nara-open-factory code,
#nara-open-factory kbd,
#nara-open-factory samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}
#nara-open-factory small {
  font-size: 80%;
}
#nara-open-factory sub,
#nara-open-factory sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
#nara-open-factory sub {
  bottom: -0.25em;
}
#nara-open-factory sup {
  top: -0.5em;
}
#nara-open-factory svg,
#nara-open-factory img,
#nara-open-factory embed,
#nara-open-factory object,
#nara-open-factory iframe {
  vertical-align: bottom;
}
#nara-open-factory button,
#nara-open-factory input,
#nara-open-factory optgroup,
#nara-open-factory select,
#nara-open-factory textarea {
  -webkit-appearance: none; /* 1 */
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
}
#nara-open-factory button,
#nara-open-factory [type=button],
#nara-open-factory [type=reset],
#nara-open-factory [type=submit] {
  cursor: pointer;
}
#nara-open-factory button:disabled,
#nara-open-factory [type=button]:disabled,
#nara-open-factory [type=reset]:disabled,
#nara-open-factory [type=submit]:disabled {
  cursor: default;
}
#nara-open-factory :-moz-focusring {
  outline: auto;
}
#nara-open-factory select:disabled {
  opacity: inherit;
}
#nara-open-factory option {
  padding: 0;
}
#nara-open-factory fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}
#nara-open-factory legend {
  padding: 0;
}
#nara-open-factory progress {
  vertical-align: baseline;
}
#nara-open-factory textarea {
  overflow: auto;
}
#nara-open-factory [type=number]::-webkit-inner-spin-button,
#nara-open-factory [type=number]::-webkit-outer-spin-button {
  height: auto;
}
#nara-open-factory [type=search] {
  outline-offset: -2px; /* 1 */
}
#nara-open-factory [type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
#nara-open-factory ::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
#nara-open-factory [type=number] {
  -moz-appearance: textfield;
}
#nara-open-factory label[for] {
  cursor: pointer;
}
#nara-open-factory details {
  display: block;
}
#nara-open-factory summary {
  display: list-item;
}
#nara-open-factory [contenteditable]:focus {
  outline: auto;
}
#nara-open-factory table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}
#nara-open-factory caption {
  text-align: left;
}
#nara-open-factory td,
#nara-open-factory th {
  vertical-align: top;
  padding: 0;
}
#nara-open-factory th {
  text-align: left;
  font-weight: bold;
}


/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */*,::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box;border-style:solid;border-width:0;min-width:0}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{margin:0}main{display:block}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}ul,ol{margin:0;padding:0;list-style:none}dt{font-weight:bold}dd{margin-left:0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}a{background-color:rgba(0,0,0,0);text-decoration:none;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}svg,img,embed,object,iframe{vertical-align:bottom}button,input,optgroup,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:rgba(0,0,0,0);padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit}button,[type=button],[type=reset],[type=submit]{cursor:pointer}button:disabled,[type=button]:disabled,[type=reset]:disabled,[type=submit]:disabled{cursor:default}:-moz-focusring{outline:auto}select:disabled{opacity:inherit}option{padding:0}fieldset{margin:0;padding:0;min-width:0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=number]{-moz-appearance:textfield}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]:focus{outline:auto}table{border-color:inherit;border-collapse:collapse}caption{text-align:left}td,th{vertical-align:top;padding:0}th{text-align:left;font-weight:bold}#nara-open-factory{font-family:"Noto Sans JP",serif;color:#000;font-weight:400;line-height:2.1875;background-color:#f5f5f5}#nara-open-factory img{display:block;width:100%;max-width:100%;height:auto}#nara-open-factory .site-branding__link{display:block;width:100%;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out}#nara-open-factory .site-branding__link:hover{opacity:.7}#nara-open-factory .site-branding__logo{display:block}#nara-open-factory .pc-navigation{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}#nara-open-factory .pc-navigation__link{display:block;width:100%;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out}#nara-open-factory .pc-navigation__link:hover{opacity:.7}@media(min-width: 768px){#nara-open-factory .pc-navigation__txt--en{max-height:18px}}@media(min-width: 1024px){#nara-open-factory .pc-navigation__txt--en{max-height:100%}}#nara-open-factory .language-select{background-color:#fff;position:relative;z-index:5}#nara-open-factory .language-select__label,#nara-open-factory .language-select__list-item-link{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;-webkit-transition:-webkit-filter .15s ease-out;transition:-webkit-filter .15s ease-out;transition:filter .15s ease-out;transition:filter .15s ease-out, -webkit-filter .15s ease-out}#nara-open-factory .language-select__label:hover,#nara-open-factory .language-select__list-item-link:hover{-webkit-filter:brightness(0.9);filter:brightness(0.9)}#nara-open-factory .language-select__label:active,#nara-open-factory .language-select__list-item-link:active{-webkit-filter:brightness(0.75);filter:brightness(0.75)}#nara-open-factory .language-select__checkbox{display:none}#nara-open-factory .language-select__list{background-color:#fff;position:absolute;top:100%;left:0;z-index:1;opacity:0;visibility:hidden}#nara-open-factory .language-select:has(.language-select__checkbox:checked) .language-select__list{opacity:1;visibility:visible;-webkit-box-shadow:0px 0px 4px 0px rgba(0,0,0,.04),0px 8px 16px 0px rgba(0,0,0,.08);box-shadow:0px 0px 4px 0px rgba(0,0,0,.04),0px 8px 16px 0px rgba(0,0,0,.08)}#nara-open-factory .mobile-navigation__btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:48px;aspect-ratio:1;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out}#nara-open-factory .mobile-navigation__btn:hover{opacity:.7}#nara-open-factory .mobile-navigation__btn-input{display:none}#nara-open-factory .mobile-navigation__btn-icon{display:block;width:32px}#nara-open-factory .mobile-navigation__btn-icon--close{display:none}#nara-open-factory .mobile-navigation__list{display:none;width:100%;padding:16px 0;background-color:#0a51a1;position:absolute;top:48px;left:0;z-index:1}#nara-open-factory .mobile-navigation__link{display:block;padding:8px;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out}#nara-open-factory .mobile-navigation__link:hover{opacity:.7}#nara-open-factory .mobile-navigation__txt{width:100%;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;margin:0 auto}#nara-open-factory .mobile-navigation:has(.mobile-navigation__btn-input:checked) .mobile-navigation__btn-icon--open{display:none}#nara-open-factory .mobile-navigation:has(.mobile-navigation__btn-input:checked) .mobile-navigation__btn-icon--close{display:block}#nara-open-factory .mobile-navigation:has(.mobile-navigation__btn-input:checked) .mobile-navigation__list{display:block}#nara-open-factory .main-navigation{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:0px;-moz-column-gap:0px;column-gap:0px}@media(min-width: 768px){#nara-open-factory .main-navigation{-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}}@media(min-width: 1024px){#nara-open-factory .main-navigation{-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px}}#nara-open-factory .main-navigation__pc-navigation{display:none}@media(min-width: 768px){#nara-open-factory .main-navigation__pc-navigation{display:-webkit-box;display:-ms-flexbox;display:flex}}#nara-open-factory .main-navigation__language{-ms-flex-negative:0;flex-shrink:0;max-width:120px}@media(min-width: 1024px){#nara-open-factory .main-navigation__language{-ms-flex-negative:1;flex-shrink:1;max-width:100%}}#nara-open-factory .main-navigation__mobile-navigation{-ms-flex-negative:0;flex-shrink:0}@media(min-width: 768px){#nara-open-factory .main-navigation__mobile-navigation{display:none}}#nara-open-factory .header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:48px;background-color:#0a51a1;-webkit-box-shadow:0px 0px 4px 0px rgba(0,0,0,.04),0px 8px 16px 0px rgba(0,0,0,.08);box-shadow:0px 0px 4px 0px rgba(0,0,0,.04),0px 8px 16px 0px rgba(0,0,0,.08);position:relative}@media(min-width: 768px){#nara-open-factory .header{height:60px;padding:10px 0}}#nara-open-factory .header__in{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px;width:100%;padding-left:12px}@media(min-width: 768px){#nara-open-factory .header__in{padding-right:16px;padding-left:16px}}@media(min-width: 1024px){#nara-open-factory .header__in{-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px;padding-right:20px;padding-left:20px}}@media(min-width: 1280px){#nara-open-factory .header__in{padding-left:165px}}#nara-open-factory .header__navigation{-ms-flex-negative:0;flex-shrink:0}@media(min-width: 768px){#nara-open-factory .hero__img--sp{display:none}}#nara-open-factory .hero__img--pc{display:none}@media(min-width: 768px){#nara-open-factory .hero__img--pc{display:block}}@-webkit-keyframes infinity-scroll-left{from{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes infinity-scroll-left{from{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}#nara-open-factory .infinity-slider{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;overflow:hidden;margin-top:20px}@media(min-width: 768px){#nara-open-factory .infinity-slider{-webkit-column-gap:calc(20vw/1440*100);-moz-column-gap:calc(20vw/1440*100);column-gap:calc(20vw/1440*100)}}@media(min-width: 1024px){#nara-open-factory .infinity-slider{margin-top:30px}}#nara-open-factory .infinity-slider__list{-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;-webkit-animation:infinity-scroll-left 30s infinite linear .5s both;animation:infinity-scroll-left 30s infinite linear .5s both}@media(min-width: 768px){#nara-open-factory .infinity-slider__list{-webkit-column-gap:calc(20vw/1440*100);-moz-column-gap:calc(20vw/1440*100);column-gap:calc(20vw/1440*100)}}#nara-open-factory .infinity-slider__item{width:33.3333333333vw}@media(min-width: 768px){#nara-open-factory .infinity-slider__item{width:25vw}}@media(min-width: 1024px){#nara-open-factory .infinity-slider__item{width:16.6666666667vw}}#nara-open-factory .infinity-slider__img{width:100%}#nara-open-factory .anchor-target{padding-top:48px;margin-top:-48px}@media(min-width: 768px){#nara-open-factory .anchor-target{padding-top:60px;margin-top:-60px}}#nara-open-factory .bs-container{padding-right:20px;padding-left:20px;position:relative;margin-right:auto;margin-left:auto}@media(min-width: 640px){#nara-open-factory .bs-container{max-width:680px}}@media(min-width: 768px){#nara-open-factory .bs-container{max-width:808px}}@media(min-width: 1024px){#nara-open-factory .bs-container{max-width:1064px}}@media(min-width: 1280px){#nara-open-factory .bs-container{max-width:1150px}}#nara-open-factory .with-en-heading{line-height:normal;text-align:center}#nara-open-factory .with-en-heading__en-txt{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;font-size:14px;color:#0a51a1;margin-bottom:8px}@media(min-width: 1024px){#nara-open-factory .with-en-heading__en-txt{-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;font-size:16px;margin-bottom:10px}}#nara-open-factory .with-en-heading__en-txt::before,#nara-open-factory .with-en-heading__en-txt::after{content:"";display:block;width:8px;height:1px;background-color:#0a51a1;-ms-flex-negative:0;flex-shrink:0}@media(min-width: 1024px){#nara-open-factory .with-en-heading__en-txt::before,#nara-open-factory .with-en-heading__en-txt::after{width:10px}}#nara-open-factory .with-en-heading__ja-txt{font-size:20px;font-weight:500}@media(min-width: 1024px){#nara-open-factory .with-en-heading__ja-txt{font-size:25px}}#nara-open-factory .dashed-line-box{max-width:850px;padding:32px 20px;background-color:rgba(10,81,161,.1);position:relative;margin-right:auto;margin-left:auto}@media(min-width: 640px){#nara-open-factory .dashed-line-box{padding:32px 40px}}@media(min-width: 1024px){#nara-open-factory .dashed-line-box{padding:50px 60px}}#nara-open-factory .dashed-line-box::before{content:"";display:block;background-image:linear-gradient(to right, #0a51a1, #0a51a1 5px, transparent 5px, transparent 9px),linear-gradient(to bottom, #0a51a1, #0a51a1 5px, transparent 5px, transparent 9px),linear-gradient(to left, #0a51a1, #0a51a1 5px, transparent 5px, transparent 9px),linear-gradient(to top, #0a51a1, #0a51a1 5px, transparent 5px, transparent 9px);background-size:9px 1px,1px 9px,9px 1px,1px 9px;background-position:left top,right top,right bottom,left bottom;background-repeat:repeat-x,repeat-y,repeat-x,repeat-y;position:absolute;inset:0;translate:-8px -8px;pointer-events:none}@media(min-width: 1024px){#nara-open-factory .dashed-line-box::before{translate:-10px -10px}}#nara-open-factory .dashed-line-box__ilust{width:54px;position:absolute;right:20px;bottom:calc(100% - 1px)}@media(min-width: 1024px){#nara-open-factory .dashed-line-box__ilust{width:80px;right:30px}}#nara-open-factory .dashed-line-box__txt{font-size:14px;line-height:2.5}@media(min-width: 1024px){#nara-open-factory .dashed-line-box__txt{font-size:16px}}#nara-open-factory .movie-area__txt{font-size:18px;letter-spacing:.1em;line-height:normal;color:#0a51a1;text-align:center;margin-bottom:8px}@media(min-width: 1024px){#nara-open-factory .movie-area__txt{font-size:20px;margin-bottom:10px}}#nara-open-factory .movie-area__movie{display:block;width:100%;max-width:560px;-webkit-box-shadow:0px 0px 4px 0px rgba(0,0,0,.04),0px 8px 16px 0px rgba(0,0,0,.08);box-shadow:0px 0px 4px 0px rgba(0,0,0,.04),0px 8px 16px 0px rgba(0,0,0,.08);margin-right:auto;margin-left:auto}#nara-open-factory .about-section{padding-top:46px;padding-bottom:80px}@media(min-width: 1024px){#nara-open-factory .about-section{padding-top:70px;padding-bottom:120px}}#nara-open-factory .about-section__box{margin-top:56px}@media(min-width: 640px){#nara-open-factory .about-section__box{margin-top:40px}}@media(min-width: 1024px){#nara-open-factory .about-section__box{margin-top:60px}}#nara-open-factory .about-section__movie{margin-top:40px}@media(min-width: 1024px){#nara-open-factory .about-section__movie{margin-top:60px}}#nara-open-factory .btn-area__txt{font-size:18px;letter-spacing:.1em;line-height:normal;color:#0a51a1;text-align:center;margin-bottom:8px}@media(min-width: 1024px){#nara-open-factory .btn-area__txt{font-size:20px;margin-bottom:10px}}#nara-open-factory .btn-area__btn{display:block;max-width:240px;-webkit-transition:-webkit-filter .15s ease-out;transition:-webkit-filter .15s ease-out;transition:filter .15s ease-out;transition:filter .15s ease-out, -webkit-filter .15s ease-out;margin-right:auto;margin-left:auto}#nara-open-factory .btn-area__btn:hover{-webkit-filter:brightness(0.9);filter:brightness(0.9)}#nara-open-factory .btn-area__btn:active{-webkit-filter:brightness(0.75);filter:brightness(0.75)}@media(min-width: 1024px){#nara-open-factory .btn-area__btn{max-width:350px}}#nara-open-factory .tab-area__list{display:grid;grid-template-columns:repeat(2, 1fr);-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px;row-gap:12px;max-width:970px;margin-right:auto;margin-left:auto}@media(min-width: 640px){#nara-open-factory .tab-area__list{grid-template-columns:repeat(4, 1fr);-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}}@media(min-width: 1024px){#nara-open-factory .tab-area__list{-webkit-column-gap:30px;-moz-column-gap:30px;column-gap:30px;row-gap:20px}}#nara-open-factory .tab-area__input{display:none}#nara-open-factory .tab-area__input:checked+.tab-area__label{background-color:#0a83a1;pointer-events:none;-webkit-box-shadow:0px 0px 4px 0px rgba(0,0,0,.04),0px 8px 16px 0px rgba(0,0,0,.08);box-shadow:0px 0px 4px 0px rgba(0,0,0,.04),0px 8px 16px 0px rgba(0,0,0,.08)}#nara-open-factory .tab-area__input:checked+.tab-area__label .tab-area__label-txt{color:#fff}#nara-open-factory .tab-area__input:checked+.tab-area__label .tab-area__label-icon{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}#nara-open-factory .tab-area__label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:48px;padding:8px;background-color:#fff;border-radius:5px;-webkit-transition:-webkit-filter .15s ease-out;transition:-webkit-filter .15s ease-out;transition:filter .15s ease-out;transition:filter .15s ease-out, -webkit-filter .15s ease-out;-webkit-transition:background-color .15s ease-out,-webkit-filter .15s ease-out;transition:background-color .15s ease-out,-webkit-filter .15s ease-out;transition:background-color .15s ease-out,filter .15s ease-out;transition:background-color .15s ease-out,filter .15s ease-out,-webkit-filter .15s ease-out}#nara-open-factory .tab-area__label:hover{-webkit-filter:brightness(0.9);filter:brightness(0.9)}#nara-open-factory .tab-area__label:active{-webkit-filter:brightness(0.75);filter:brightness(0.75)}@media(min-width: 768px){#nara-open-factory .tab-area__label{padding:8px 12px}}@media(min-width: 1024px){#nara-open-factory .tab-area__label{min-height:60px;padding:10px 15px}}#nara-open-factory .tab-area__label-txt{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-size:16px;line-height:normal;color:#0a83a1;text-align:center;-webkit-transition:color .15s ease-out;transition:color .15s ease-out}@media(min-width: 640px){#nara-open-factory .tab-area__label-txt{font-size:14px}}@media(min-width: 768px){#nara-open-factory .tab-area__label-txt{font-size:18px}}@media(min-width: 1024px){#nara-open-factory .tab-area__label-txt{font-size:20px}}#nara-open-factory .tab-area__label-icon{width:24px;aspect-ratio:1/1;-ms-flex-negative:0;flex-shrink:0}@media(min-width: 1024px){#nara-open-factory .tab-area__label-icon{width:40px}}#nara-open-factory .tab-area__contents{margin-top:40px}@media(min-width: 1024px){#nara-open-factory .tab-area__contents{margin-top:60px}}#nara-open-factory .tab-area__content{display:none;height:400px;padding:20px 20px 40px;background-color:#fff;overflow:hidden;position:relative;-webkit-transition:height .15s ease-out;transition:height .15s ease-out}@media(min-width: 1024px){#nara-open-factory .tab-area__content{height:610px;padding:30px 30px 60px}}#nara-open-factory .tab-area__content:has(.tab-area__hidden-btn-input:checked){height:auto}#nara-open-factory .tab-area__content:has(.tab-area__hidden-btn-input:checked) .tab-area__hidden-btn{display:none}#nara-open-factory .tab-area__content-in{max-width:920px;margin-right:auto;margin-left:auto}#nara-open-factory .tab-area__figure{display:grid;grid-template-columns:repeat(1, 1fr);row-gap:16px;max-width:850px;margin-right:auto;margin-left:auto}@media(min-width: 640px){#nara-open-factory .tab-area__figure{grid-template-columns:repeat(2, 1fr);-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}}@media(min-width: 1024px){#nara-open-factory .tab-area__figure{-webkit-column-gap:50px;-moz-column-gap:50px;column-gap:50px}}#nara-open-factory .tab-area__desc{margin-top:20px}@media(min-width: 1024px){#nara-open-factory .tab-area__desc{margin-top:30px}}#nara-open-factory .tab-area__heading{padding:4px 0 4px 10px;border-left:4px solid #0a83a1;font-size:18px;font-weight:500;line-height:normal;margin-bottom:12px}@media(min-width: 1024px){#nara-open-factory .tab-area__heading{padding:6px 0 5px 20px;border-left-width:8px;font-size:20px;margin-bottom:20px}}#nara-open-factory .tab-area__txt{font-size:14px}@media(min-width: 1024px){#nara-open-factory .tab-area__txt{font-size:16px}}#nara-open-factory .tab-area__txt+.tab-area__txt{margin-top:24px}@media(min-width: 1024px){#nara-open-factory .tab-area__txt+.tab-area__txt{margin-top:35px}}#nara-open-factory .tab-area__hidden-btn{position:absolute;right:0;bottom:0;left:0;z-index:10}#nara-open-factory .tab-area__hidden-btn-in{position:relative;background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.5)));background:linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out}#nara-open-factory .tab-area__hidden-btn-in:hover{opacity:.7}#nara-open-factory .tab-area__hidden-btn-in::before{content:"";display:block;width:100%;height:20px;background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#777777));background:linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #777777 100%);position:absolute;right:0;bottom:0;left:0}@media(min-width: 1024px){#nara-open-factory .tab-area__hidden-btn-in::before{height:30px}}#nara-open-factory .tab-area__hidden-btn-input{display:none}#nara-open-factory .tab-area__hidden-btn-label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;padding:10px;position:relative}@media(min-width: 1024px){#nara-open-factory .tab-area__hidden-btn-label{-webkit-column-gap:13px;-moz-column-gap:13px;column-gap:13px;padding:15px}}#nara-open-factory .tab-area__hidden-btn-label-txt{font-size:18px;font-weight:500;line-height:normal;text-decoration:underline;color:#0a83a1;text-align:center}@media(min-width: 1024px){#nara-open-factory .tab-area__hidden-btn-label-txt{font-size:20px}}#nara-open-factory .tab-area__hidden-btn-label-arrow{width:4px}@media(min-width: 1024px){#nara-open-factory .tab-area__hidden-btn-label-arrow{width:6px}}#nara-open-factory .tab-area:has(#tab-socks:checked) #content-socks,#nara-open-factory .tab-area:has(#tab-sushi:checked) #content-sushi,#nara-open-factory .tab-area:has(#tab-somen:checked) #content-somen,#nara-open-factory .tab-area:has(#tab-plastic:checked) #content-plastic,#nara-open-factory .tab-area:has(#tab-wood:checked) #content-wood,#nara-open-factory .tab-area:has(#tab-medicine:checked) #content-medicine,#nara-open-factory .tab-area:has(#tab-leather:checked) #content-leather,#nara-open-factory .tab-area:has(#tab-brushes:checked) #content-brushes{display:block}#nara-open-factory .column-section{padding-top:60px;padding-bottom:60px;background-color:#cedcec}@media(min-width: 1024px){#nara-open-factory .column-section{padding-top:90px;padding-bottom:90px}}#nara-open-factory .column-section__in{padding-right:20px;padding-left:20px;position:relative;margin-right:auto;margin-left:auto;max-width:1150px}#nara-open-factory .column-section__tab{margin-top:40px}@media(min-width: 1024px){#nara-open-factory .column-section__tab{margin-top:60px}}#nara-open-factory .column-section__btn{margin-top:40px}@media(min-width: 1024px){#nara-open-factory .column-section__btn{margin-top:60px}}#nara-open-factory .map-section{padding-top:54px;padding-bottom:64px;position:relative}@media(min-width: 1024px){#nara-open-factory .map-section{padding-top:80px;padding-bottom:96px}}#nara-open-factory .map-section::before{content:"";width:100%;height:50%;background-color:#fff;position:absolute;bottom:0;left:0}@media(min-width: 1024px){#nara-open-factory .map-section::before{height:550px}}#nara-open-factory .map-section__txt{max-width:730px;font-size:14px;margin-right:auto;margin-left:auto;margin-top:24px}@media(min-width: 1024px){#nara-open-factory .map-section__txt{font-size:16px;margin-top:40px}}#nara-open-factory .map-section__map-area{max-width:800px;aspect-ratio:3/4;position:relative;-webkit-box-shadow:0px 0px 4px 0px rgba(0,0,0,.04),0px 8px 16px 0px rgba(0,0,0,.08);box-shadow:0px 0px 4px 0px rgba(0,0,0,.04),0px 8px 16px 0px rgba(0,0,0,.08);margin-top:24px;margin-right:auto;margin-left:auto}@media(min-width: 640px){#nara-open-factory .map-section__map-area{aspect-ratio:800/436;margin-top:40px}}#nara-open-factory .map-section__map{width:100%;height:100%;position:absolute;inset:0}#nara-open-factory .map-section__btn{margin-top:40px}@media(min-width: 1024px){#nara-open-factory .map-section__btn{margin-top:60px}}#nara-open-factory .txt-site-branding__link{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding-bottom:4px;border-bottom:1px solid #fff;font-size:14px;color:#fff;line-height:normal;text-align:center;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out;margin-right:auto;margin-left:auto}#nara-open-factory .txt-site-branding__link:hover{opacity:.7}@media(min-width: 1024px){#nara-open-factory .txt-site-branding__link{padding-bottom:5px;font-size:16px}}#nara-open-factory .footer-navigation__list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px;row-gap:8px}@media(min-width: 640px){#nara-open-factory .footer-navigation__list{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}@media(min-width: 1024px){#nara-open-factory .footer-navigation__list{-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}}#nara-open-factory .footer-navigation__link{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:14px;color:#fff;line-height:normal;font-weight:500;text-align:center;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out}#nara-open-factory .footer-navigation__link:hover{opacity:.7}@media(min-width: 1024px){#nara-open-factory .footer-navigation__link{font-size:16px}}#nara-open-factory .copyright{font-size:12px;color:#fff;line-height:normal;text-align:center}@media(min-width: 1024px){#nara-open-factory .copyright{font-size:14px}}#nara-open-factory .footer{padding-top:24px;padding-bottom:24px;background-color:#0a51a1}@media(min-width: 1024px){#nara-open-factory .footer{padding-top:35px;padding-bottom:34px}}#nara-open-factory .footer__navigation{margin-top:20px}@media(min-width: 1024px){#nara-open-factory .footer__navigation{margin-top:30px}}#nara-open-factory .footer__copyright{margin-top:20px}@media(min-width: 1024px){#nara-open-factory .footer__copyright{margin-top:30px}}
}


/*** for Smart Phone ***/
@media (max-width:400px)
{
/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */

/* Reset box-model and set borders */
/* ============================================ */

*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  min-width: 0;
}

/* Document */
/* ============================================ */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */

/**
 * Prevent vertical alignment issues.
 */

svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */

/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none; /* 1 */
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
}

/**
 * Correct cursors for clickable elements.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
}

button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
  cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * Remove padding
 */

option {
  padding: 0;
}

/**
 * Reset to invisible
 */

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the outline style in Safari.
 */

[type="search"] {
  outline-offset: -2px; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Fix appearance for Firefox
 */
[type="number"] {
  -moz-appearance: textfield;
}

/**
 * Clickable labels
 */

label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */

[contenteditable]:focus {
  outline: auto;
}

/* Tables */
/* ============================================ */

/**
1. Correct table border color inheritance in all Chrome and Safari.
*/

table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}



@import "destyle.scss";

$breakpoints: (
  "xs": "(min-width: 390px)",
  "sm": "(min-width: 640px)",
  "md": "(min-width: 768px)",
  "lg": "(min-width: 1024px)",
  "xl": "(min-width: 1280px)",
  "2xl": "(min-width: 1536px)",
);

@mixin breakPoint($key) {
  @media #{map-get($breakpoints, $key)} {
    @content;
  }
}

@mixin responsive-value($property, $value) {
  #{$property}: calc(#{$value}vw / 1440 * 100);
}

@mixin hover-opacity-down {
  transition: opacity 0.15s ease-out;

  &:hover {
    opacity: 0.7;
  }
}

@mixin hover-brightness-down {
  transition: filter 0.15s ease-out;

  &:hover {
    filter: brightness(0.9);
  }

  &:active {
    filter: brightness(0.75);
  }
}

$primary-color: #0a51a1;
$secondary-color: #cedcec;
$tertiary-color: #0a83a1;

#nara-open-factory {
  font-family: "Noto Sans JP", serif;
  color: #000;
  font-weight: 400;
  line-height: 2.1875;
  background-color: #f5f5f5;
  padding-top: 48px;

  @include breakPoint("md") {
    padding-top: 60px;
  }

  img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    pointer-events: none;
  }

  .site-branding {
    &__link {
      display: block;
      width: 100%;
      max-width: fit-content;
      @include hover-opacity-down;
    }

    &__logo {
      display: block;
    }
  }

  .pc-navigation {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 16px;

    &__link {
      display: block;
      width: 100%;
      max-width: fit-content;
      @include hover-opacity-down;
    }

    &__txt {
      &--en {
        @include breakPoint("md") {
          max-height: 18px;
        }

        @include breakPoint("lg") {
          max-height: 100%;
        }
      }
    }
  }

  .language-select {
    background-color: #fff;
    position: relative;
    z-index: 1;

    &__label,
    &__list-item-link {
      max-width: fit-content;
      @include hover-brightness-down;
    }

    &__checkbox {
      display: none;
    }

    &__list {
      background-color: #fff;
      position: absolute;
      top: 100%;
      left: 0;
      opacity: 0;
      visibility: hidden;
    }

    &:has(.language-select__checkbox:checked) {
      .language-select {
        &__list {
          opacity: 1;
          visibility: visible;
          box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
        }
      }
    }
  }

  .mobile-navigation {
    &__btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 48px;
      aspect-ratio: 1;
      @include hover-opacity-down;
    }

    &__btn-input {
      display: none;
    }

    &__btn-icon {
      display: block;
      width: 32px;

      &--close {
        display: none;
      }
    }

    &__list {
      display: none;
      width: 100%;
      padding: 16px 0;
      background-color: $primary-color;
      position: absolute;
      top: 48px;
      left: 0;
    }

    &__link {
      display: block;
      padding: 8px;
      @include hover-opacity-down;
    }

    &__txt {
      width: 100%;
      max-width: fit-content;
      margin: 0 auto;
    }

    &:has(.mobile-navigation__btn-input:checked) {
      .mobile-navigation {
        &__btn-icon {
          &--open {
            display: none;
          }

          &--close {
            display: block;
          }
        }

        &__list {
          display: block;
        }
      }
    }
  }

  .main-navigation {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 0px;

    @include breakPoint("md") {
      column-gap: 16px;
    }

    @include breakPoint("lg") {
      column-gap: 20px;
    }

    &__pc-navigation {
      display: none;

      @include breakPoint("md") {
        display: flex;
      }
    }

    &__language {
      flex-shrink: 0;
      max-width: 120px;

      @include breakPoint("lg") {
        flex-shrink: 1;
        max-width: 100%;
      }
    }

    &__mobile-navigation {
      flex-shrink: 0;

      @include breakPoint("md") {
        display: none;
      }
    }
  }

  .header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    background-color: $primary-color;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;

    @include breakPoint("md") {
      height: 60px;
      padding: 10px 0;
    }

    &__in {
      display: flex;
      justify-content: space-between;
      align-items: center;
      column-gap: 12px;
      width: 100%;
      padding-left: 12px;

      @include breakPoint("md") {
        padding-right: 16px;
        padding-left: 16px;
      }

      @include breakPoint("lg") {
        column-gap: 16px;
        padding-right: 20px;
        padding-left: 20px;
      }

      @include breakPoint("xl") {
        padding-left: 165px;
      }
    }

    &__navigation {
      flex-shrink: 0;
    }
  }

  .hero {
    background-color: $secondary-color;
    position: relative;
    overflow: hidden;

    &__bg {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      inset: 0;

      @include breakPoint("md") {
        position: relative;
        inset: auto;
      }
    }

    &__img {
      max-width: 95%;
      position: absolute;
      right: 0;
      bottom: 0;

      @include breakPoint("xs") {
        max-width: 80%;
      }

      @include breakPoint("sm") {
        max-width: 66.6666%;
      }

      @include breakPoint("md") {
        @include responsive-value(width, 912);
        max-width: 100%;
      }

      &--en {
        max-width: 80%;

        @include breakPoint("xs") {
          max-width: 70%;
        }

        @include breakPoint("sm") {
          max-width: 66.6666%;
        }

        @include breakPoint("md") {
          @include responsive-value(width, 912);
          max-width: 100%;
        }
      }
    }

    &__in {
      padding: 48px 16px;
      position: relative;

      @include breakPoint("md") {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        @include responsive-value(padding-top, 118);
        @include responsive-value(padding-right, 50);
        @include responsive-value(padding-bottom, 137);
        @include responsive-value(padding-left, 50);
        position: absolute;
        inset: 0;
      }
    }

    &__desc {
      display: flex;
      flex-direction: column;
      align-items: center;

      @include breakPoint("md") {
        display: block;
      }
    }

    &__heading {
      display: flex;
      flex-direction: column;
      max-width: 496px;

      @include breakPoint("md") {
        @include responsive-value(width, 743);
        max-width: 100%;
      }

      &--en {
        max-width: 422px;

        @include breakPoint("md") {
          @include responsive-value(width, 633);
          max-width: 100%;
        }
      }
    }

    &__heading-speech-bubble {
      filter: drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.08)) drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.04));
    }

    &__heading-ttl {
      margin-top: max(-5vw, -24px);

      @include breakPoint("md") {
        @include responsive-value(margin-top, -35);
      }

      &--en {
        margin-top: 0;

        @include breakPoint("md") {
          @include responsive-value(margin-top, -2);
        }
      }
    }

    &__btn-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: fit-content;
      margin-top: 4px;

      @include breakPoint("md") {
        @include responsive-value(margin-top, 30);
        @include responsive-value(margin-left, 163);
      }
    }

    &__btn-txt {
      max-width: 160px;
      margin-bottom: 12px;

      @include breakPoint("md") {
        @include responsive-value(width, 250);
        max-width: 100%;
        @include responsive-value(margin-bottom, 20);
      }

      &--en {
        max-width: 220px;

        @include breakPoint("md") {
          @include responsive-value(width, 330);
          max-width: 100%;
        }
      }
    }

    &__btn {
      display: block;
      max-width: 240px;
      border-radius: 50vw;
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
      @include hover-brightness-down;

      @include breakPoint("md") {
        @include responsive-value(width, 350);
        max-width: 100%;
      }
    }

    &__map {
      display: flex;
      flex-direction: column;
      align-items: center;
      row-gap: 12px;
      margin-top: 32px;

      @include breakPoint("md") {
        @include responsive-value(row-gap, 20);
      }
    }

    &__map-txt {
      max-width: 174px;

      @include breakPoint("md") {
        @include responsive-value(width, 261);
        max-width: 100%;
      }

      &--en {
        max-width: 258px;

        @include breakPoint("md") {
          @include responsive-value(width, 387);
          max-width: 100%;
        }
      }
    }

    &__map-txt-img {
      &--primary-color {
        @include breakPoint("md") {
          display: none;
        }
      }

      &--white {
        display: none;

        @include breakPoint("md") {
          display: block;
        }
      }
    }

    &__map-img {
      max-width: 320px;
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px rgba(0, 0, 0, 0.08);

      @include breakPoint("md") {
        @include responsive-value(width, 500);
        max-width: 100%;
      }
    }
  }

  @keyframes infinity-scroll-left {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }

  .infinity-slider {
    display: flex;
    column-gap: 8px;
    overflow: hidden;
    margin-top: 20px;

    @include breakPoint("md") {
      @include responsive-value(column-gap, 20);
    }

    @include breakPoint("lg") {
      margin-top: 30px;
    }

    &__list {
      flex-shrink: 0;
      display: flex;
      column-gap: 8px;
      animation: infinity-scroll-left 30s infinite linear 0.5s both;

      @include breakPoint("md") {
        @include responsive-value(column-gap, 20);
      }
    }

    &__item {
      width: calc(100vw / 3);

      @include breakPoint("md") {
        width: calc(100vw / 4);
      }

      @include breakPoint("lg") {
        width: calc(100vw / 6);
      }
    }

    &__img {
      width: 100%;
    }
  }

  .anchor-target {
    padding-top: 48px;
    margin-top: -48px;

    @include breakPoint("md") {
      padding-top: 60px;
      margin-top: -60px;
    }
  }

  .bs-container {
    padding-right: 20px;
    padding-left: 20px;
    position: relative;
    margin-right: auto;
    margin-left: auto;

    @include breakPoint("sm") {
      max-width: calc(640px + 20px * 2);
    }

    @include breakPoint("md") {
      max-width: calc(768px + 20px * 2);
    }

    @include breakPoint("lg") {
      max-width: calc(1024px + 20px * 2);
    }

    @include breakPoint("xl") {
      max-width: calc(1110px + 20px * 2);
    }
  }

  .with-en-heading {
    line-height: normal;
    text-align: center;

    &__en-txt {
      display: flex;
      justify-content: center;
      align-items: center;
      column-gap: 8px;
      font-size: 14px;
      color: $primary-color;
      margin-bottom: 8px;

      @include breakPoint("lg") {
        column-gap: 10px;
        font-size: 16px;
        margin-bottom: 10px;
      }

      &::before,
      &::after {
        content: "";
        display: block;
        width: 8px;
        height: 1px;
        background-color: $primary-color;
        flex-shrink: 0;

        @include breakPoint("lg") {
          width: 10px;
        }
      }
    }

    &__ja-txt {
      font-size: 20px;
      font-weight: 500;

      @include breakPoint("lg") {
        font-size: 25px;
      }
    }
  }

  .dashed-line-box {
    max-width: 850px;
    padding: 32px 20px;
    background-color: rgba($primary-color, 0.1);
    position: relative;
    margin-right: auto;
    margin-left: auto;

    @include breakPoint("sm") {
      padding: 32px 40px;
    }

    @include breakPoint("lg") {
      padding: 50px 60px;
    }

    &::before {
      content: "";
      display: block;
      background-image: linear-gradient(to right, $primary-color, $primary-color 5px, transparent 5px, transparent 9px), linear-gradient(to bottom, $primary-color, $primary-color 5px, transparent 5px, transparent 9px), linear-gradient(to left, $primary-color, $primary-color 5px, transparent 5px, transparent 9px), linear-gradient(to top, $primary-color, $primary-color 5px, transparent 5px, transparent 9px);
      background-size: 9px 1px, 1px 9px, 9px 1px, 1px 9px;
      background-position: left top, right top, right bottom, left bottom;
      background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
      position: absolute;
      inset: 0;
      translate: -8px -8px;
      pointer-events: none;

      @include breakPoint("lg") {
        translate: -10px -10px;
      }
    }

    &__ilust {
      width: 54px;
      position: absolute;
      right: 20px;
      bottom: calc(100% - 1px);

      @include breakPoint("lg") {
        width: 80px;
        right: 30px;
      }
    }

    &__txt {
      font-size: 14px;
      line-height: 2.5;

      @include breakPoint("lg") {
        font-size: 16px;
      }
    }
  }

  .movie-area {
    &__txt {
      font-size: 18px;
      letter-spacing: 0.1em;
      line-height: normal;
      color: $primary-color;
      text-align: center;
      margin-bottom: 8px;

      @include breakPoint("lg") {
        font-size: 20px;
        margin-bottom: 10px;
      }
    }

    &__movie {
      display: block;
      width: 100%;
      max-width: 560px;
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
      margin-right: auto;
      margin-left: auto;
    }
  }

  .about-section {
    padding-top: 46px;
    padding-bottom: 80px;

    @include breakPoint("lg") {
      padding-top: 70px;
      padding-bottom: 120px;
    }

    &__box {
      margin-top: 56px;

      @include breakPoint("sm") {
        margin-top: 40px;
      }

      @include breakPoint("lg") {
        margin-top: 60px;
      }
    }

    &__movie {
      margin-top: 40px;

      @include breakPoint("lg") {
        margin-top: 60px;
      }
    }
  }

  .btn-area {
    &__txt {
      font-size: 18px;
      letter-spacing: 0.1em;
      line-height: normal;
      color: $primary-color;
      text-align: center;
      margin-bottom: 8px;

      @include breakPoint("lg") {
        font-size: 20px;
        margin-bottom: 10px;
      }
    }

    &__btn {
      display: block;
      max-width: 240px;
      @include hover-brightness-down;
      margin-right: auto;
      margin-left: auto;

      @include breakPoint("lg") {
        max-width: 350px;
      }
    }
  }

  .tab-area {
    &__list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 12px;
      row-gap: 12px;
      max-width: 970px;
      margin-right: auto;
      margin-left: auto;

      @include breakPoint("sm") {
        grid-template-columns: repeat(4, 1fr);
        column-gap: 16px;
      }

      @include breakPoint("lg") {
        column-gap: 30px;
        row-gap: 20px;
      }
    }

    &__input {
      display: none;

      &:checked + .tab-area {
        &__label {
          background-color: $tertiary-color;
          pointer-events: none;
          box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px rgba(0, 0, 0, 0.08);

          .tab-area {
            &__label-txt {
              color: #fff;
            }

            &__label-icon {
              filter: brightness(0) invert(1);
            }
          }
        }
      }
    }

    &__label {
      display: flex;
      align-items: center;
      min-height: 48px;
      padding: 8px;
      background-color: #fff;
      border-radius: 5px;
      @include hover-brightness-down;
      transition: background-color 0.15s ease-out, filter 0.15s ease-out;

      @include breakPoint("md") {
        padding: 8px 12px;
      }

      @include breakPoint("lg") {
        min-height: 60px;
        padding: 10px 15px;
      }
    }

    &__label-txt {
      flex-grow: 1;
      font-size: 16px;
      line-height: normal;
      color: $tertiary-color;
      text-align: center;
      transition: color 0.15s ease-out;

      @include breakPoint("sm") {
        font-size: 14px;
      }

      @include breakPoint("md") {
        font-size: 18px;
      }

      @include breakPoint("lg") {
        font-size: 20px;
      }
    }

    &__label-icon {
      width: 24px;
      aspect-ratio: 1 / 1;
      flex-shrink: 0;

      @include breakPoint("lg") {
        width: 40px;
      }
    }

    &__contents {
      margin-top: 40px;

      @include breakPoint("lg") {
        margin-top: 60px;
      }
    }

    &__content {
      display: none;
      height: 400px;
      padding: 20px 20px 40px;
      background-color: #fff;
      overflow: hidden;
      position: relative;
      transition: height 0.15s ease-out;

      @include breakPoint("lg") {
        height: 610px;
        padding: 30px 30px 60px;
      }

      &:has(.tab-area__hidden-btn-input:checked) {
        height: auto;

        .tab-area__hidden-btn {
          display: none;
        }
      }
    }

    &__content-in {
      max-width: 920px;
      margin-right: auto;
      margin-left: auto;
    }

    &__figure {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      row-gap: 16px;
      max-width: 850px;
      margin-right: auto;
      margin-left: auto;

      @include breakPoint("sm") {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 16px;
      }

      @include breakPoint("lg") {
        column-gap: 50px;
      }
    }

    &__desc {
      margin-top: 20px;

      @include breakPoint("lg") {
        margin-top: 30px;
      }
    }

    &__heading {
      padding: 4px 0 4px 10px;
      border-left: 4px solid $tertiary-color;
      font-size: 18px;
      font-weight: 500;
      line-height: normal;
      margin-bottom: 12px;

      @include breakPoint("lg") {
        padding: 6px 0 5px 20px;
        border-left-width: 8px;
        font-size: 20px;
        margin-bottom: 20px;
      }
    }

    &__txt {
      font-size: 14px;

      @include breakPoint("lg") {
        font-size: 16px;
      }

      & + .tab-area__txt {
        margin-top: 24px;

        @include breakPoint("lg") {
          margin-top: 35px;
        }
      }
    }

    &__hidden-btn {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 10;
    }

    &__hidden-btn-in {
      position: relative;
      background: linear-gradient(to bottom, rgba(#fff, 0) 0%, rgba(#fff, 0.5) 100%);
      @include hover-opacity-down;

      &::before {
        content: "";
        display: block;
        width: 100%;
        height: 20px;
        background: linear-gradient(to bottom, rgba(#fff, 0) 0%, rgba(#777, 1) 100%);
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;

        @include breakPoint("lg") {
          height: 30px;
        }
      }
    }

    &__hidden-btn-input {
      display: none;
    }

    &__hidden-btn-label {
      display: flex;
      justify-content: center;
      align-items: center;
      column-gap: 8px;
      padding: 10px;
      position: relative;

      @include breakPoint("lg") {
        column-gap: 13px;
        padding: 15px;
      }
    }

    &__hidden-btn-label-txt {
      font-size: 18px;
      font-weight: 500;
      line-height: normal;
      text-decoration: underline;
      color: $tertiary-color;
      text-align: center;

      @include breakPoint("lg") {
        font-size: 20px;
      }
    }

    &__hidden-btn-label-arrow {
      width: 4px;

      @include breakPoint("lg") {
        width: 6px;
      }
    }

    &:has(#tab-socks:checked) #content-socks,
    &:has(#tab-sushi:checked) #content-sushi,
    &:has(#tab-somen:checked) #content-somen,
    &:has(#tab-plastic:checked) #content-plastic,
    &:has(#tab-wood:checked) #content-wood,
    &:has(#tab-medicine:checked) #content-medicine,
    &:has(#tab-leather:checked) #content-leather,
    &:has(#tab-brushes:checked) #content-brushes {
      display: block;
    }
  }

  .column-section {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: $secondary-color;

    @include breakPoint("lg") {
      padding-top: 90px;
      padding-bottom: 90px;
    }

    &__in {
      padding-right: 20px;
      padding-left: 20px;
      position: relative;
      margin-right: auto;
      margin-left: auto;
      max-width: calc(1110px + 20px * 2);
    }

    &__tab {
      margin-top: 40px;

      @include breakPoint("lg") {
        margin-top: 60px;
      }
    }

    &__btn {
      margin-top: 40px;

      @include breakPoint("lg") {
        margin-top: 60px;
      }
    }
  }

  .map-section {
    padding-top: 54px;
    padding-bottom: 64px;
    position: relative;

    @include breakPoint("lg") {
      padding-top: 80px;
      padding-bottom: 96px;
    }

    &::before {
      content: "";
      width: 100%;
      height: 50%;
      background-color: #fff;
      position: absolute;
      bottom: 0;
      left: 0;

      @include breakPoint("lg") {
        height: 550px;
      }
    }

    &__txt {
      max-width: 730px;
      font-size: 14px;
      margin-right: auto;
      margin-left: auto;
      margin-top: 24px;

      @include breakPoint("lg") {
        font-size: 16px;
        margin-top: 40px;
      }
    }

    &__map-area {
      max-width: 800px;
      aspect-ratio: 800 / 436;
      position: relative;
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
      margin-top: 24px;
      margin-right: auto;
      margin-left: auto;

      @include breakPoint("lg") {
        margin-top: 40px;
      }
    }

    &__map {
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
    }

    &__btn {
      margin-top: 40px;

      @include breakPoint("lg") {
        margin-top: 60px;
      }
    }
  }

  .txt-site-branding {
    &__link {
      display: block;
      width: fit-content;
      padding-bottom: 4px;
      border-bottom: 1px solid #fff;
      font-size: 14px;
      color: #fff;
      line-height: normal;
      text-align: center;
      @include hover-opacity-down();
      margin-right: auto;
      margin-left: auto;

      @include breakPoint("lg") {
        padding-bottom: 5px;
        font-size: 16px;
      }
    }
  }

  .footer-navigation {
    &__list {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      column-gap: 12px;
      row-gap: 8px;

      @include breakPoint("sm") {
        flex-direction: row;
      }

      @include breakPoint("lg") {
        column-gap: 16px;
      }
    }

    &__link {
      display: block;
      width: fit-content;
      font-size: 14px;
      color: #fff;
      line-height: normal;
      font-weight: 500;
      text-align: center;
      @include hover-opacity-down();

      @include breakPoint("lg") {
        font-size: 16px;
      }
    }
  }

  .copyright {
    font-size: 12px;
    color: #fff;
    line-height: normal;
    text-align: center;

    @include breakPoint("lg") {
      font-size: 14px;
    }
  }

  .footer {
    padding-top: 24px;
    padding-bottom: 24px;
    background-color: $primary-color;

    @include breakPoint("lg") {
      padding-top: 35px;
      padding-bottom: 34px;
    }

    &__navigation {
      margin-top: 20px;

      @include breakPoint("lg") {
        margin-top: 30px;
      }
    }

    &__copyright {
      margin-top: 20px;

      @include breakPoint("lg") {
        margin-top: 30px;
      }
    }
  }
}



#nara-open-factory {
  /*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */
  /* Reset box-model and set borders */
  /* ============================================ */
  /* Document */
  /* ============================================ */
  /**
  * 1. Correct the line height in all browsers.
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  * 3. Remove gray overlay on links for iOS.
  */
  /* Sections */
  /* ============================================ */
  /**
  * Remove the margin in all browsers.
  */
  /**
  * Render the `main` element consistently in IE.
  */
  /* Vertical rhythm */
  /* ============================================ */
  /* Headings */
  /* ============================================ */
  /* Lists (enumeration) */
  /* ============================================ */
  /* Lists (definition) */
  /* ============================================ */
  /* Grouping content */
  /* ============================================ */
  /**
  * 1. Add the correct box sizing in Firefox.
  * 2. Show the overflow in Edge and IE.
  */
  /**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
  /* Text-level semantics */
  /* ============================================ */
  /**
  * Remove the gray background on active links in IE 10.
  */
  /**
  * 1. Remove the bottom border in Chrome 57-
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  */
  /**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */
  /**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
  /**
  * Add the correct font size in all browsers.
  */
  /**
  * Prevent `sub` and `sup` elements from affecting the line height in
  * all browsers.
  */
  /* Replaced content */
  /* ============================================ */
  /**
  * Prevent vertical alignment issues.
  */
  /* Forms */
  /* ============================================ */
  /**
  * Reset form fields to make them styleable.
  * 1. Make form elements stylable across systems iOS especially.
  * 2. Inherit text-transform from parent.
  */
  /**
  * Correct cursors for clickable elements.
  */
  /**
  * Improve outlines for Firefox and unify style with input elements & buttons.
  */
  /**
  * Remove padding
  */
  /**
  * Reset to invisible
  */
  /**
  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
  /**
  * Remove the default vertical scrollbar in IE 10+.
  */
  /**
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
  /**
  * Correct the outline style in Safari.
  */
  /**
  * Remove the inner padding in Chrome and Safari on macOS.
  */
  /**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Fix font inheritance.
  */
  /**
  * Fix appearance for Firefox
  */
  /**
  * Clickable labels
  */
  /* Interactive */
  /* ============================================ */
  /*
  * Add the correct display in Edge, IE 10+, and Firefox.
  */
  /*
  * Add the correct display in all browsers.
  */
  /*
  * Remove outline for editable content.
  */
  /* Tables */
  /* ============================================ */
  /**
  1. Correct table border color inheritance in all Chrome and Safari.
  */
}
#nara-open-factory *,
#nara-open-factory ::before,
#nara-open-factory ::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  min-width: 0;
}
#nara-open-factory html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}
#nara-open-factory body {
  margin: 0;
}
#nara-open-factory main {
  display: block;
}
#nara-open-factory p,
#nara-open-factory table,
#nara-open-factory blockquote,
#nara-open-factory address,
#nara-open-factory pre,
#nara-open-factory iframe,
#nara-open-factory form,
#nara-open-factory figure,
#nara-open-factory dl {
  margin: 0;
}
#nara-open-factory h1,
#nara-open-factory h2,
#nara-open-factory h3,
#nara-open-factory h4,
#nara-open-factory h5,
#nara-open-factory h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}
#nara-open-factory ul,
#nara-open-factory ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
#nara-open-factory dt {
  font-weight: bold;
}
#nara-open-factory dd {
  margin-left: 0;
}
#nara-open-factory hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}
#nara-open-factory pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}
#nara-open-factory address {
  font-style: inherit;
}
#nara-open-factory a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}
#nara-open-factory abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}
#nara-open-factory b,
#nara-open-factory strong {
  font-weight: bolder;
}
#nara-open-factory code,
#nara-open-factory kbd,
#nara-open-factory samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}
#nara-open-factory small {
  font-size: 80%;
}
#nara-open-factory sub,
#nara-open-factory sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
#nara-open-factory sub {
  bottom: -0.25em;
}
#nara-open-factory sup {
  top: -0.5em;
}
#nara-open-factory svg,
#nara-open-factory img,
#nara-open-factory embed,
#nara-open-factory object,
#nara-open-factory iframe {
  vertical-align: bottom;
}
#nara-open-factory button,
#nara-open-factory input,
#nara-open-factory optgroup,
#nara-open-factory select,
#nara-open-factory textarea {
  -webkit-appearance: none; /* 1 */
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
}
#nara-open-factory button,
#nara-open-factory [type=button],
#nara-open-factory [type=reset],
#nara-open-factory [type=submit] {
  cursor: pointer;
}
#nara-open-factory button:disabled,
#nara-open-factory [type=button]:disabled,
#nara-open-factory [type=reset]:disabled,
#nara-open-factory [type=submit]:disabled {
  cursor: default;
}
#nara-open-factory :-moz-focusring {
  outline: auto;
}
#nara-open-factory select:disabled {
  opacity: inherit;
}
#nara-open-factory option {
  padding: 0;
}
#nara-open-factory fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}
#nara-open-factory legend {
  padding: 0;
}
#nara-open-factory progress {
  vertical-align: baseline;
}
#nara-open-factory textarea {
  overflow: auto;
}
#nara-open-factory [type=number]::-webkit-inner-spin-button,
#nara-open-factory [type=number]::-webkit-outer-spin-button {
  height: auto;
}
#nara-open-factory [type=search] {
  outline-offset: -2px; /* 1 */
}
#nara-open-factory [type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
#nara-open-factory ::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
#nara-open-factory [type=number] {
  -moz-appearance: textfield;
}
#nara-open-factory label[for] {
  cursor: pointer;
}
#nara-open-factory details {
  display: block;
}
#nara-open-factory summary {
  display: list-item;
}
#nara-open-factory [contenteditable]:focus {
  outline: auto;
}
#nara-open-factory table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}
#nara-open-factory caption {
  text-align: left;
}
#nara-open-factory td,
#nara-open-factory th {
  vertical-align: top;
  padding: 0;
}
#nara-open-factory th {
  text-align: left;
  font-weight: bold;
}


/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */*,::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box;border-style:solid;border-width:0;min-width:0}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{margin:0}main{display:block}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}ul,ol{margin:0;padding:0;list-style:none}dt{font-weight:bold}dd{margin-left:0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}a{background-color:rgba(0,0,0,0);text-decoration:none;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}svg,img,embed,object,iframe{vertical-align:bottom}button,input,optgroup,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:rgba(0,0,0,0);padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit}button,[type=button],[type=reset],[type=submit]{cursor:pointer}button:disabled,[type=button]:disabled,[type=reset]:disabled,[type=submit]:disabled{cursor:default}:-moz-focusring{outline:auto}select:disabled{opacity:inherit}option{padding:0}fieldset{margin:0;padding:0;min-width:0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=number]{-moz-appearance:textfield}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]:focus{outline:auto}table{border-color:inherit;border-collapse:collapse}caption{text-align:left}td,th{vertical-align:top;padding:0}th{text-align:left;font-weight:bold}#nara-open-factory{font-family:"Noto Sans JP",serif;color:#000;font-weight:400;line-height:2.1875;background-color:#f5f5f5}#nara-open-factory img{display:block;width:100%;max-width:100%;height:auto}#nara-open-factory .site-branding__link{display:block;width:100%;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out}#nara-open-factory .site-branding__link:hover{opacity:.7}#nara-open-factory .site-branding__logo{display:block}#nara-open-factory .pc-navigation{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}#nara-open-factory .pc-navigation__link{display:block;width:100%;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out}#nara-open-factory .pc-navigation__link:hover{opacity:.7}@media(min-width: 768px){#nara-open-factory .pc-navigation__txt--en{max-height:18px}}@media(min-width: 1024px){#nara-open-factory .pc-navigation__txt--en{max-height:100%}}#nara-open-factory .language-select{background-color:#fff;position:relative;z-index:5}#nara-open-factory .language-select__label,#nara-open-factory .language-select__list-item-link{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;-webkit-transition:-webkit-filter .15s ease-out;transition:-webkit-filter .15s ease-out;transition:filter .15s ease-out;transition:filter .15s ease-out, -webkit-filter .15s ease-out}#nara-open-factory .language-select__label:hover,#nara-open-factory .language-select__list-item-link:hover{-webkit-filter:brightness(0.9);filter:brightness(0.9)}#nara-open-factory .language-select__label:active,#nara-open-factory .language-select__list-item-link:active{-webkit-filter:brightness(0.75);filter:brightness(0.75)}#nara-open-factory .language-select__checkbox{display:none}#nara-open-factory .language-select__list{background-color:#fff;position:absolute;top:100%;left:0;z-index:1;opacity:0;visibility:hidden}#nara-open-factory .language-select:has(.language-select__checkbox:checked) .language-select__list{opacity:1;visibility:visible;-webkit-box-shadow:0px 0px 4px 0px rgba(0,0,0,.04),0px 8px 16px 0px rgba(0,0,0,.08);box-shadow:0px 0px 4px 0px rgba(0,0,0,.04),0px 8px 16px 0px rgba(0,0,0,.08)}#nara-open-factory .mobile-navigation__btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:48px;aspect-ratio:1;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out}#nara-open-factory .mobile-navigation__btn:hover{opacity:.7}#nara-open-factory .mobile-navigation__btn-input{display:none}#nara-open-factory .mobile-navigation__btn-icon{display:block;width:32px}#nara-open-factory .mobile-navigation__btn-icon--close{display:none}#nara-open-factory .mobile-navigation__list{display:none;width:100%;padding:16px 0;background-color:#0a51a1;position:absolute;top:48px;left:0;z-index:1}#nara-open-factory .mobile-navigation__link{display:block;padding:8px;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out}#nara-open-factory .mobile-navigation__link:hover{opacity:.7}#nara-open-factory .mobile-navigation__txt{width:100%;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;margin:0 auto}#nara-open-factory .mobile-navigation:has(.mobile-navigation__btn-input:checked) .mobile-navigation__btn-icon--open{display:none}#nara-open-factory .mobile-navigation:has(.mobile-navigation__btn-input:checked) .mobile-navigation__btn-icon--close{display:block}#nara-open-factory .mobile-navigation:has(.mobile-navigation__btn-input:checked) .mobile-navigation__list{display:block}#nara-open-factory .main-navigation{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:0px;-moz-column-gap:0px;column-gap:0px}@media(min-width: 768px){#nara-open-factory .main-navigation{-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}}@media(min-width: 1024px){#nara-open-factory .main-navigation{-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px}}#nara-open-factory .main-navigation__pc-navigation{display:none}@media(min-width: 768px){#nara-open-factory .main-navigation__pc-navigation{display:-webkit-box;display:-ms-flexbox;display:flex}}#nara-open-factory .main-navigation__language{-ms-flex-negative:0;flex-shrink:0;max-width:120px}@media(min-width: 1024px){#nara-open-factory .main-navigation__language{-ms-flex-negative:1;flex-shrink:1;max-width:100%}}#nara-open-factory .main-navigation__mobile-navigation{-ms-flex-negative:0;flex-shrink:0}@media(min-width: 768px){#nara-open-factory .main-navigation__mobile-navigation{display:none}}#nara-open-factory .header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:48px;background-color:#0a51a1;-webkit-box-shadow:0px 0px 4px 0px rgba(0,0,0,.04),0px 8px 16px 0px rgba(0,0,0,.08);box-shadow:0px 0px 4px 0px rgba(0,0,0,.04),0px 8px 16px 0px rgba(0,0,0,.08);position:relative}@media(min-width: 768px){#nara-open-factory .header{height:60px;padding:10px 0}}#nara-open-factory .header__in{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px;width:100%;padding-left:12px}@media(min-width: 768px){#nara-open-factory .header__in{padding-right:16px;padding-left:16px}}@media(min-width: 1024px){#nara-open-factory .header__in{-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px;padding-right:20px;padding-left:20px}}@media(min-width: 1280px){#nara-open-factory .header__in{padding-left:165px}}#nara-open-factory .header__navigation{-ms-flex-negative:0;flex-shrink:0}@media(min-width: 768px){#nara-open-factory .hero__img--sp{display:none}}#nara-open-factory .hero__img--pc{display:none}@media(min-width: 768px){#nara-open-factory .hero__img--pc{display:block}}@-webkit-keyframes infinity-scroll-left{from{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes infinity-scroll-left{from{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}#nara-open-factory .infinity-slider{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;overflow:hidden;margin-top:20px}@media(min-width: 768px){#nara-open-factory .infinity-slider{-webkit-column-gap:calc(20vw/1440*100);-moz-column-gap:calc(20vw/1440*100);column-gap:calc(20vw/1440*100)}}@media(min-width: 1024px){#nara-open-factory .infinity-slider{margin-top:30px}}#nara-open-factory .infinity-slider__list{-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;-webkit-animation:infinity-scroll-left 30s infinite linear .5s both;animation:infinity-scroll-left 30s infinite linear .5s both}@media(min-width: 768px){#nara-open-factory .infinity-slider__list{-webkit-column-gap:calc(20vw/1440*100);-moz-column-gap:calc(20vw/1440*100);column-gap:calc(20vw/1440*100)}}#nara-open-factory .infinity-slider__item{width:33.3333333333vw}@media(min-width: 768px){#nara-open-factory .infinity-slider__item{width:25vw}}@media(min-width: 1024px){#nara-open-factory .infinity-slider__item{width:16.6666666667vw}}#nara-open-factory .infinity-slider__img{width:100%}#nara-open-factory .anchor-target{padding-top:48px;margin-top:-48px}@media(min-width: 768px){#nara-open-factory .anchor-target{padding-top:60px;margin-top:-60px}}#nara-open-factory .bs-container{padding-right:20px;padding-left:20px;position:relative;margin-right:auto;margin-left:auto}@media(min-width: 640px){#nara-open-factory .bs-container{max-width:680px}}@media(min-width: 768px){#nara-open-factory .bs-container{max-width:808px}}@media(min-width: 1024px){#nara-open-factory .bs-container{max-width:1064px}}@media(min-width: 1280px){#nara-open-factory .bs-container{max-width:1150px}}#nara-open-factory .with-en-heading{line-height:normal;text-align:center}#nara-open-factory .with-en-heading__en-txt{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;font-size:14px;color:#0a51a1;margin-bottom:8px}@media(min-width: 1024px){#nara-open-factory .with-en-heading__en-txt{-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;font-size:16px;margin-bottom:10px}}#nara-open-factory .with-en-heading__en-txt::before,#nara-open-factory .with-en-heading__en-txt::after{content:"";display:block;width:8px;height:1px;background-color:#0a51a1;-ms-flex-negative:0;flex-shrink:0}@media(min-width: 1024px){#nara-open-factory .with-en-heading__en-txt::before,#nara-open-factory .with-en-heading__en-txt::after{width:10px}}#nara-open-factory .with-en-heading__ja-txt{font-size:20px;font-weight:500}@media(min-width: 1024px){#nara-open-factory .with-en-heading__ja-txt{font-size:25px}}#nara-open-factory .dashed-line-box{max-width:850px;padding:32px 20px;background-color:rgba(10,81,161,.1);position:relative;margin-right:auto;margin-left:auto}@media(min-width: 640px){#nara-open-factory .dashed-line-box{padding:32px 40px}}@media(min-width: 1024px){#nara-open-factory .dashed-line-box{padding:50px 60px}}#nara-open-factory .dashed-line-box::before{content:"";display:block;background-image:linear-gradient(to right, #0a51a1, #0a51a1 5px, transparent 5px, transparent 9px),linear-gradient(to bottom, #0a51a1, #0a51a1 5px, transparent 5px, transparent 9px),linear-gradient(to left, #0a51a1, #0a51a1 5px, transparent 5px, transparent 9px),linear-gradient(to top, #0a51a1, #0a51a1 5px, transparent 5px, transparent 9px);background-size:9px 1px,1px 9px,9px 1px,1px 9px;background-position:left top,right top,right bottom,left bottom;background-repeat:repeat-x,repeat-y,repeat-x,repeat-y;position:absolute;inset:0;translate:-8px -8px;pointer-events:none}@media(min-width: 1024px){#nara-open-factory .dashed-line-box::before{translate:-10px -10px}}#nara-open-factory .dashed-line-box__ilust{width:54px;position:absolute;right:20px;bottom:calc(100% - 1px)}@media(min-width: 1024px){#nara-open-factory .dashed-line-box__ilust{width:80px;right:30px}}#nara-open-factory .dashed-line-box__txt{font-size:14px;line-height:2.5}@media(min-width: 1024px){#nara-open-factory .dashed-line-box__txt{font-size:16px}}#nara-open-factory .movie-area__txt{font-size:18px;letter-spacing:.1em;line-height:normal;color:#0a51a1;text-align:center;margin-bottom:8px}@media(min-width: 1024px){#nara-open-factory .movie-area__txt{font-size:20px;margin-bottom:10px}}#nara-open-factory .movie-area__movie{display:block;width:100%;max-width:560px;-webkit-box-shadow:0px 0px 4px 0px rgba(0,0,0,.04),0px 8px 16px 0px rgba(0,0,0,.08);box-shadow:0px 0px 4px 0px rgba(0,0,0,.04),0px 8px 16px 0px rgba(0,0,0,.08);margin-right:auto;margin-left:auto}#nara-open-factory .about-section{padding-top:46px;padding-bottom:80px}@media(min-width: 1024px){#nara-open-factory .about-section{padding-top:70px;padding-bottom:120px}}#nara-open-factory .about-section__box{margin-top:56px}@media(min-width: 640px){#nara-open-factory .about-section__box{margin-top:40px}}@media(min-width: 1024px){#nara-open-factory .about-section__box{margin-top:60px}}#nara-open-factory .about-section__movie{margin-top:40px}@media(min-width: 1024px){#nara-open-factory .about-section__movie{margin-top:60px}}#nara-open-factory .btn-area__txt{font-size:18px;letter-spacing:.1em;line-height:normal;color:#0a51a1;text-align:center;margin-bottom:8px}@media(min-width: 1024px){#nara-open-factory .btn-area__txt{font-size:20px;margin-bottom:10px}}#nara-open-factory .btn-area__btn{display:block;max-width:240px;-webkit-transition:-webkit-filter .15s ease-out;transition:-webkit-filter .15s ease-out;transition:filter .15s ease-out;transition:filter .15s ease-out, -webkit-filter .15s ease-out;margin-right:auto;margin-left:auto}#nara-open-factory .btn-area__btn:hover{-webkit-filter:brightness(0.9);filter:brightness(0.9)}#nara-open-factory .btn-area__btn:active{-webkit-filter:brightness(0.75);filter:brightness(0.75)}@media(min-width: 1024px){#nara-open-factory .btn-area__btn{max-width:350px}}#nara-open-factory .tab-area__list{display:grid;grid-template-columns:repeat(2, 1fr);-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px;row-gap:12px;max-width:970px;margin-right:auto;margin-left:auto}@media(min-width: 640px){#nara-open-factory .tab-area__list{grid-template-columns:repeat(4, 1fr);-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}}@media(min-width: 1024px){#nara-open-factory .tab-area__list{-webkit-column-gap:30px;-moz-column-gap:30px;column-gap:30px;row-gap:20px}}#nara-open-factory .tab-area__input{display:none}#nara-open-factory .tab-area__input:checked+.tab-area__label{background-color:#0a83a1;pointer-events:none;-webkit-box-shadow:0px 0px 4px 0px rgba(0,0,0,.04),0px 8px 16px 0px rgba(0,0,0,.08);box-shadow:0px 0px 4px 0px rgba(0,0,0,.04),0px 8px 16px 0px rgba(0,0,0,.08)}#nara-open-factory .tab-area__input:checked+.tab-area__label .tab-area__label-txt{color:#fff}#nara-open-factory .tab-area__input:checked+.tab-area__label .tab-area__label-icon{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}#nara-open-factory .tab-area__label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:48px;padding:8px;background-color:#fff;border-radius:5px;-webkit-transition:-webkit-filter .15s ease-out;transition:-webkit-filter .15s ease-out;transition:filter .15s ease-out;transition:filter .15s ease-out, -webkit-filter .15s ease-out;-webkit-transition:background-color .15s ease-out,-webkit-filter .15s ease-out;transition:background-color .15s ease-out,-webkit-filter .15s ease-out;transition:background-color .15s ease-out,filter .15s ease-out;transition:background-color .15s ease-out,filter .15s ease-out,-webkit-filter .15s ease-out}#nara-open-factory .tab-area__label:hover{-webkit-filter:brightness(0.9);filter:brightness(0.9)}#nara-open-factory .tab-area__label:active{-webkit-filter:brightness(0.75);filter:brightness(0.75)}@media(min-width: 768px){#nara-open-factory .tab-area__label{padding:8px 12px}}@media(min-width: 1024px){#nara-open-factory .tab-area__label{min-height:60px;padding:10px 15px}}#nara-open-factory .tab-area__label-txt{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-size:16px;line-height:normal;color:#0a83a1;text-align:center;-webkit-transition:color .15s ease-out;transition:color .15s ease-out}@media(min-width: 640px){#nara-open-factory .tab-area__label-txt{font-size:14px}}@media(min-width: 768px){#nara-open-factory .tab-area__label-txt{font-size:18px}}@media(min-width: 1024px){#nara-open-factory .tab-area__label-txt{font-size:20px}}#nara-open-factory .tab-area__label-icon{width:24px;aspect-ratio:1/1;-ms-flex-negative:0;flex-shrink:0}@media(min-width: 1024px){#nara-open-factory .tab-area__label-icon{width:40px}}#nara-open-factory .tab-area__contents{margin-top:40px}@media(min-width: 1024px){#nara-open-factory .tab-area__contents{margin-top:60px}}#nara-open-factory .tab-area__content{display:none;height:400px;padding:20px 20px 40px;background-color:#fff;overflow:hidden;position:relative;-webkit-transition:height .15s ease-out;transition:height .15s ease-out}@media(min-width: 1024px){#nara-open-factory .tab-area__content{height:610px;padding:30px 30px 60px}}#nara-open-factory .tab-area__content:has(.tab-area__hidden-btn-input:checked){height:auto}#nara-open-factory .tab-area__content:has(.tab-area__hidden-btn-input:checked) .tab-area__hidden-btn{display:none}#nara-open-factory .tab-area__content-in{max-width:920px;margin-right:auto;margin-left:auto}#nara-open-factory .tab-area__figure{display:grid;grid-template-columns:repeat(1, 1fr);row-gap:16px;max-width:850px;margin-right:auto;margin-left:auto}@media(min-width: 640px){#nara-open-factory .tab-area__figure{grid-template-columns:repeat(2, 1fr);-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}}@media(min-width: 1024px){#nara-open-factory .tab-area__figure{-webkit-column-gap:50px;-moz-column-gap:50px;column-gap:50px}}#nara-open-factory .tab-area__desc{margin-top:20px}@media(min-width: 1024px){#nara-open-factory .tab-area__desc{margin-top:30px}}#nara-open-factory .tab-area__heading{padding:4px 0 4px 10px;border-left:4px solid #0a83a1;font-size:18px;font-weight:500;line-height:normal;margin-bottom:12px}@media(min-width: 1024px){#nara-open-factory .tab-area__heading{padding:6px 0 5px 20px;border-left-width:8px;font-size:20px;margin-bottom:20px}}#nara-open-factory .tab-area__txt{font-size:14px}@media(min-width: 1024px){#nara-open-factory .tab-area__txt{font-size:16px}}#nara-open-factory .tab-area__txt+.tab-area__txt{margin-top:24px}@media(min-width: 1024px){#nara-open-factory .tab-area__txt+.tab-area__txt{margin-top:35px}}#nara-open-factory .tab-area__hidden-btn{position:absolute;right:0;bottom:0;left:0;z-index:10}#nara-open-factory .tab-area__hidden-btn-in{position:relative;background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.5)));background:linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out}#nara-open-factory .tab-area__hidden-btn-in:hover{opacity:.7}#nara-open-factory .tab-area__hidden-btn-in::before{content:"";display:block;width:100%;height:20px;background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#777777));background:linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #777777 100%);position:absolute;right:0;bottom:0;left:0}@media(min-width: 1024px){#nara-open-factory .tab-area__hidden-btn-in::before{height:30px}}#nara-open-factory .tab-area__hidden-btn-input{display:none}#nara-open-factory .tab-area__hidden-btn-label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;padding:10px;position:relative}@media(min-width: 1024px){#nara-open-factory .tab-area__hidden-btn-label{-webkit-column-gap:13px;-moz-column-gap:13px;column-gap:13px;padding:15px}}#nara-open-factory .tab-area__hidden-btn-label-txt{font-size:18px;font-weight:500;line-height:normal;text-decoration:underline;color:#0a83a1;text-align:center}@media(min-width: 1024px){#nara-open-factory .tab-area__hidden-btn-label-txt{font-size:20px}}#nara-open-factory .tab-area__hidden-btn-label-arrow{width:4px}@media(min-width: 1024px){#nara-open-factory .tab-area__hidden-btn-label-arrow{width:6px}}#nara-open-factory .tab-area:has(#tab-socks:checked) #content-socks,#nara-open-factory .tab-area:has(#tab-sushi:checked) #content-sushi,#nara-open-factory .tab-area:has(#tab-somen:checked) #content-somen,#nara-open-factory .tab-area:has(#tab-plastic:checked) #content-plastic,#nara-open-factory .tab-area:has(#tab-wood:checked) #content-wood,#nara-open-factory .tab-area:has(#tab-medicine:checked) #content-medicine,#nara-open-factory .tab-area:has(#tab-leather:checked) #content-leather,#nara-open-factory .tab-area:has(#tab-brushes:checked) #content-brushes{display:block}#nara-open-factory .column-section{padding-top:60px;padding-bottom:60px;background-color:#cedcec}@media(min-width: 1024px){#nara-open-factory .column-section{padding-top:90px;padding-bottom:90px}}#nara-open-factory .column-section__in{padding-right:20px;padding-left:20px;position:relative;margin-right:auto;margin-left:auto;max-width:1150px}#nara-open-factory .column-section__tab{margin-top:40px}@media(min-width: 1024px){#nara-open-factory .column-section__tab{margin-top:60px}}#nara-open-factory .column-section__btn{margin-top:40px}@media(min-width: 1024px){#nara-open-factory .column-section__btn{margin-top:60px}}#nara-open-factory .map-section{padding-top:54px;padding-bottom:64px;position:relative}@media(min-width: 1024px){#nara-open-factory .map-section{padding-top:80px;padding-bottom:96px}}#nara-open-factory .map-section::before{content:"";width:100%;height:50%;background-color:#fff;position:absolute;bottom:0;left:0}@media(min-width: 1024px){#nara-open-factory .map-section::before{height:550px}}#nara-open-factory .map-section__txt{max-width:730px;font-size:14px;margin-right:auto;margin-left:auto;margin-top:24px}@media(min-width: 1024px){#nara-open-factory .map-section__txt{font-size:16px;margin-top:40px}}#nara-open-factory .map-section__map-area{max-width:800px;aspect-ratio:3/4;position:relative;-webkit-box-shadow:0px 0px 4px 0px rgba(0,0,0,.04),0px 8px 16px 0px rgba(0,0,0,.08);box-shadow:0px 0px 4px 0px rgba(0,0,0,.04),0px 8px 16px 0px rgba(0,0,0,.08);margin-top:24px;margin-right:auto;margin-left:auto}@media(min-width: 640px){#nara-open-factory .map-section__map-area{aspect-ratio:800/436;margin-top:40px}}#nara-open-factory .map-section__map{width:100%;height:100%;position:absolute;inset:0}#nara-open-factory .map-section__btn{margin-top:40px}@media(min-width: 1024px){#nara-open-factory .map-section__btn{margin-top:60px}}#nara-open-factory .txt-site-branding__link{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding-bottom:4px;border-bottom:1px solid #fff;font-size:14px;color:#fff;line-height:normal;text-align:center;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out;margin-right:auto;margin-left:auto}#nara-open-factory .txt-site-branding__link:hover{opacity:.7}@media(min-width: 1024px){#nara-open-factory .txt-site-branding__link{padding-bottom:5px;font-size:16px}}#nara-open-factory .footer-navigation__list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px;row-gap:8px}@media(min-width: 640px){#nara-open-factory .footer-navigation__list{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}@media(min-width: 1024px){#nara-open-factory .footer-navigation__list{-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}}#nara-open-factory .footer-navigation__link{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:14px;color:#fff;line-height:normal;font-weight:500;text-align:center;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out}#nara-open-factory .footer-navigation__link:hover{opacity:.7}@media(min-width: 1024px){#nara-open-factory .footer-navigation__link{font-size:16px}}#nara-open-factory .copyright{font-size:12px;color:#fff;line-height:normal;text-align:center}@media(min-width: 1024px){#nara-open-factory .copyright{font-size:14px}}#nara-open-factory .footer{padding-top:24px;padding-bottom:24px;background-color:#0a51a1}@media(min-width: 1024px){#nara-open-factory .footer{padding-top:35px;padding-bottom:34px}}#nara-open-factory .footer__navigation{margin-top:20px}@media(min-width: 1024px){#nara-open-factory .footer__navigation{margin-top:30px}}#nara-open-factory .footer__copyright{margin-top:20px}@media(min-width: 1024px){#nara-open-factory .footer__copyright{margin-top:30px}}
}