@charset "UTF-8";

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

html,
body {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

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

/* =========================================
   Base
   ========================================= */
:root {
  --bg-scale: 1;
  --bg-focus-x: 50%;
  --bg-ratio: calc(6387 / 1600);
  --bg-fallback-color: #fff;
  --lp-max-width: 1600px;
  --lp-effective-width: min(100vw, var(--lp-max-width));
  --card-radius: clamp(12px, calc(var(--lp-effective-width) * 0.025), 40px);
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  line-height: 1.8;
  color: #231815;
  background-color: var(--bg-fallback-color);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================
   entry-form-tab
   ========================================= */
.entry-form-tab {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;

  display: block;
  box-sizing: border-box;

  right: calc(max(0px, (100% - var(--lp-max-width)) / 2));

  width: clamp(55px, calc(var(--lp-effective-width) * 0.085), 95px);
  aspect-ratio: 2227 / 6366;

  background-image: url("../images/entry-form-tab.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* =========================================
   nav-toggle / nav-menu
   ========================================= */
.nav-toggle,
.nav-menu {
  display: none;
}

/* =========================================
   .lp
   ========================================= */
.lp {
  position: relative;
  width: 100%;
  max-width: var(--lp-max-width);
  margin: 0 auto;
  aspect-ratio: 1 / calc(var(--bg-scale) * var(--bg-ratio));
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;

  background-color: #fff;
  background-image: url("../images/lp-bg.webp");
  background-repeat: no-repeat;
  background-size: calc(var(--bg-scale) * 100%) auto;
  background-position: var(--bg-focus-x) top;
}

/* =========================================
   entry-info
   ========================================= */
.entry-info {
  position: absolute;
  top: 69.8%;
  left: 18%;
  right: 17%;

  box-sizing: border-box;
  padding: calc(var(--lp-effective-width) * 0.03);
  border-radius: var(--card-radius);
  background-color: #fff;
  box-shadow: var(--card-shadow);
  line-height: 1.4;
}

.entry-info__row,
.entry-info__block > p {
  font-size: clamp(13px, calc(var(--lp-effective-width) * 0.0125), 20px);
}

.entry-info__row {
  margin: 0 0 0.45em;
}

.entry-info__row:last-child {
  margin-bottom: 0;
}

.entry-info__label,
.entry-info__subheading {
  font-size: clamp(14px, calc(var(--lp-effective-width) * 0.0135), 21px);
}

.entry-info__label {
  display: inline-block;
  margin: 0 0.3em 0.4em 0;
  font-family: "Noto Sans JP", "Yu Gothic Medium", "YuGothic Medium",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic,
    Meiryo, sans-serif;
  font-weight: 500;
}

.entry-info__text {
  display: inline;
  margin: 0;
  letter-spacing: -0.02em;
}

.entry-info__text-nowrap {
  white-space: nowrap;
}

.entry-info__block {
  margin: 0.6em 0;
}

.entry-info__block > p {
  margin: 0 0 0.3em;
}

.entry-info__subheading {
  margin: 0 0 0.2em;
}

.entry-info__footnote {
  margin: 1.2em 0 0;
  font-size: clamp(12px, calc(var(--lp-effective-width) * 0.0115), 20px);
  word-break: break-all;
}

.entry-info__footnote a {
  color: #231815;
  white-space: nowrap;
}

.entry-info__footnote-break,
.entry-info__text-break {
  display: none;
}

/* =========================================
   about-naming
   ========================================= */
.about-naming {
  position: absolute;
  top: 87.6%;
  left: 16.8%;
  right: 14%;
  box-sizing: border-box;
}

.about-naming__heading {
  margin: 0 0 0.9em;
  text-align: center;
  font-family: "Noto Sans JP", Meiryo, "Yu Gothic Medium",
    "YuGothic Medium", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Yu Gothic", YuGothic, sans-serif;
  font-weight: bold;
  letter-spacing: 0.002em;
  font-size: clamp(20px, calc(var(--lp-effective-width) * 0.0275), 44px);
  line-height: 1.3;
}

.about-naming__text {
  margin: 0;
  text-align: justify;
  font-weight: bold;
  letter-spacing: 0.001em;
  line-height: 1.7;
  font-size: clamp(13px, calc(var(--lp-effective-width) * 0.01625), 26px);
}

.about-naming__heading-break {
  display: none;
}

/* =========================================
   official-links
   ========================================= */
.official-links {
  position: absolute;
  top: 94.6%;
  left: 16.65%;
  right: 15.3%;

  box-sizing: border-box;
  padding: 1% 2.6% 2.5%;
  border-radius: var(--card-radius);
  background-color: #fff;
  box-shadow: var(--card-shadow);
}

.official-links__divider {
  display: flex;
  align-items: center;
  gap: 3%;
  margin: 0 0 2%;
}

.official-links__divider-line {
  flex: 1 1 auto;
  height: 0.21px;
  background-color: #231815;
}

.official-links__divider-text {
  flex: 0 0 auto;
  font-family: "BIZ UDPGothic", Meiryo, "Yu Gothic Medium", "YuGothic Medium",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic,
    sans-serif;
  font-size: clamp(12px, calc(var(--lp-effective-width) * 0.017), 24px);
  font-weight: bold;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.official-links__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  gap: 2% 2.5%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.official-links__item {
  flex: 0 0 auto;
}

.official-links__item a {
  display: block;
}

.official-links__logo {
  display: block;
  height: auto;
}

.official-links__logo--kioxia {
  width: clamp(60px, calc(var(--lp-effective-width) * 0.11), 170px);
}

.official-links__logo--iwate {
  width: clamp(90px, calc(var(--lp-effective-width) * 0.2), 320px);
}

.official-links__logo--aiina {
  width: clamp(80px, calc(var(--lp-effective-width) * 0.145), 240px);
}

/* =========================================================
   Media queries
   ========================================================= */

@media (min-width: 768px) and (max-width: 900px) {
  /* entry-info */
  .entry-info {
    left: 8%;
    right: 7%;
  }
}

@media (min-width: 768px) {
  /* entry-info */
  .entry-info__block > p {
    margin-bottom: 0;
    line-height: 1.3;
  }

  .entry-info__subheading {
    margin-bottom: 0;
  }

  /* official-links */
  .official-links {
    left: 12%;
    right: 11%;
  }
}

@media (max-width: 767.98px) {
  /* entry-form-tab */
  .entry-form-tab {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    transform: none;

    width: 70%;
    margin: 0 auto;
    aspect-ratio: 1406 / 299;

    background-image: url("../images/entry-form-tab-sp.webp");
  }

  body {
    padding-bottom: calc(var(--lp-effective-width) * 0.155);
  }

  /* nav-toggle / nav-menu */
  .nav-toggle {
    display: block;
    position: fixed;
    top: 3%;
    right: 4%;
    z-index: 110;

    box-sizing: border-box;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  .nav-toggle__icon {
    display: block;
    width: clamp(24px, calc(var(--lp-effective-width) * 0.07), 32px);
    height: auto;
  }

  .nav-toggle__icon--open {
    width: clamp(34px, calc(var(--lp-effective-width) * 0.1), 46px);
  }

  .nav-toggle__icon--close {
    display: none;
  }

  .nav-toggle--open .nav-toggle__icon--open {
    display: none;
  }

  .nav-toggle--open .nav-toggle__icon--close {
    display: block;
  }

  .nav-menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;

    box-sizing: border-box;
    padding: 15vh 6% 0;
    overflow-y: auto;
    background-color: #fff;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }

  .nav-menu--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
  }

  .nav-menu__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #231815;
  }

  .nav-menu__item {
    border-bottom: 1px solid #231815;
  }

  .nav-menu__item a {
    display: block;
    padding: 1em 0.2em;
    color: #231815;
    text-decoration: none;
    font-weight: bold;
    font-size: clamp(14px, calc(var(--lp-effective-width) * 0.04), 18px);
  }

  body.nav-menu-open {
    overflow: hidden;
  }

  /* entry-info */
  :root {
    --bg-ratio: calc(15807 / 1536);
    --bg-fallback-color: rgb(208, 236, 251);
  }

  .lp {
    background-image: url("../images/lp-bg-sp.webp");
  }

  .entry-info {
    top: 55%;
    left: 13%;
    right: 13%;
    padding: calc(var(--lp-effective-width) * 0.025);
    line-height: 1.39;
  }

  .entry-info__row,
  .entry-info__block > p {
    font-size: clamp(11px, calc(var(--lp-effective-width) * 0.033), 25px);
  }

  .entry-info__row {
    margin-bottom: 1em;
  }

  .entry-info__block {
    margin: calc(var(--lp-effective-width) * 0.155) 0
      calc(var(--lp-effective-width) * 0.008);
  }

  .entry-info__block > p {
    margin-bottom: 0.2em;
  }

  .entry-info__subheading {
    margin-bottom: 0.12em;
    font-size: clamp(11px, calc(var(--lp-effective-width) * 0.034), 26px);
  }

  .entry-info__footnote {
    margin-top: 0.8em;
    font-size: clamp(12px, calc(var(--lp-effective-width) * 0.025), 20px);
  }

  .entry-info__label {
    display: block;
    margin: 0 0 0.5em;
    text-align: center;
    font-size: clamp(12px, calc(var(--lp-effective-width) * 0.035), 26px);
  }

  .entry-info__block > .entry-info__label {
    margin-bottom: 1em;
  }

  .entry-info__text {
    display: block;
  }

  .entry-info__footnote-lead {
    display: none;
  }

  .entry-info__footnote-break,
  .entry-info__text-break {
    display: inline;
  }

  .entry-info__footnote-space {
    display: none;
  }

  /* about-naming */
  .about-naming {
    top: 81.2%;
    left: 15%;
    right: 15%;
  }

  .about-naming__heading {
    margin-bottom: 0.7em;
    font-size: clamp(18px, calc(var(--lp-effective-width) * 0.062), 34px);
    line-height: 1.25;
  }

  .about-naming__heading-break {
    display: inline;
  }

  .about-naming__text {
    line-height: 1.55;
    font-size: clamp(12px, calc(var(--lp-effective-width) * 0.039), 22px);
  }

  /* official-links */
  .official-links {
    top: 92.7%;
    left: 14%;
    right: 14%;
    padding: calc(var(--lp-effective-width) * 0.05)
      calc(var(--lp-effective-width) * 0.06)
      calc(var(--lp-effective-width) * 0.09);
  }

  .official-links__list {
    flex-direction: column;
    gap: calc(var(--lp-effective-width) * 0.08) 0;
    margin-top: calc(var(--lp-effective-width) * 0.09);
  }

  .official-links__logo--kioxia {
    width: clamp(90px, calc(var(--lp-effective-width) * 0.27), 180px);
  }

  .official-links__logo--iwate {
    width: clamp(150px, calc(var(--lp-effective-width) * 0.5), 290px);
  }

  .official-links__logo--aiina {
    width: clamp(140px, calc(var(--lp-effective-width) * 0.42), 260px);
  }

  .official-links__divider {
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--lp-effective-width) * 0.025) 0;
  }

  .official-links__divider-line {
    flex: 0 0 auto;
  }

  .official-links__divider-text {
    text-align: center;
    font-size: clamp(16px, calc(var(--lp-effective-width) * 0.045), 28px);
  }
}

@media (min-width: 400px) and (max-width: 767.98px) {
  /* entry-info */
  .entry-info {
    padding: calc(var(--lp-effective-width) * 0.04);
  }

  .entry-info__row {
    margin-bottom: 1.5em;
  }
}

@media (max-width: 399.98px) {
  /* entry-info */
  .entry-info {
    left: 11%;
    right: 11%;
    padding: calc(var(--lp-effective-width) * 0.035);
    line-height: 1.32;
  }

  .entry-info__row {
    margin-bottom: calc(
      1em + (var(--lp-effective-width) - 320px) * 0.34
    );
  }

  .entry-info__block > p {
    margin-bottom: calc(
      0.2em + (var(--lp-effective-width) - 320px) * 0.08
    );
  }
}