@charset "UTF-8";

/* ========================================
  LP VARIABLES
======================================== */

:root {
  --lp-bg: #fff100;
  --lp-color: #000000;
  --lp-drawer-btn: #222;
  --lp-search-btn-bg: #ea6061;
  --lp-spread-btn-bg: #5eb27b;
  --lp-info-btn-bg: #61c2e8;
  --lp-gallery-btn-bg: #8f70ae;
  --lp-btn-hover: #dfe6e5;

  /* material card colors */
  --app-card-red: #ea6061;
  --app-card-green: #5eb27b;
  --app-card-blue: #61c2e8;
  --app-card-purple: #8f70ae;
  --app-card-pink: #e781a9;
}

/* ========================================
  BASE
======================================== */

body {
  background-color: var(--lp-bg);
  color: var(--lp-color);
  font-family: 'Zen Kaku Gothic New', sans-serif;
}

/* キーボード操作時のフォーカスリング（マウス操作時は非表示のまま） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
label:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #222;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ========================================
  KV
======================================== */

.l-app-kv {
  background-color: var(--lp-bg);
  overflow: hidden;
  position: relative;
}

.l-app-kv__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: calc(270 / 1920 * 100vw) calc(221 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    padding-block: calc(51 / var(--fs) * 1rem) 0;
    align-items: stretch;
  }
}

.l-app-kv__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(21 / 1920 * 100vw);
  text-align: center;
  justify-content: center;

  @media all and (max-width: 767px) {
    gap: calc(17 / var(--fs) * 1rem);
    padding-inline: calc(16 / var(--fs) * 1rem);
  }
}

.l-app-kv__header{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    gap: calc(0 / var(--fs) * 1rem);
  }
}

.l-app-kv__badge {
 width: calc(520 / 1920 * 100vw);
 height: auto;

  @media all and (max-width: 767px) {
    width: calc(260 / var(--fs) * 1rem);
  }

  img {
   width: 100%;
   height: auto;
  }
}

.l-app-kv__title {
  font-size: calc(56 / 1920 * 100vw);
  font-weight: 900;
    line-height: 140%;
    color: var(--lp-color);
  letter-spacing: -0.03em;

  @media all and (max-width: 767px) {
    font-size: calc(32 / var(--fs) * 1rem);
    letter-spacing: -0.02em;
  }
}

.l-app-kv__text {
  font-size: calc(24 / 1920 * 100vw);
  font-weight: 900;
  line-height: 2.2;
  font-feature-settings: 'palt' on;

  @media all and (max-width: 767px) {
    font-size: calc(15 / var(--fs) * 1rem);
    
  }
}

.l-app-kv__rats {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  margin-block-start: auto;
  margin-top: calc(30 / var(--fs) * 1rem);

  @media (min-width: 768px) {
    display: none;
  }
}

.l-app-kv__rat {
  position: absolute;
  width: calc(576 / 1920 * 100vw);
  height: auto;
  aspect-ratio: 576 / 675;
  top: calc(69 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    position: relative;
    width: calc(170 / var(--fs) * 1rem);
    aspect-ratio: 170 / 200;
    top: auto;
  }

  img {
    width: 100%;
    height: auto;
  }
}

.l-app-kv__rat--left {
  left: 0;
}

.l-app-kv__rat--right {
  right: 0;
}

/* ========================================
  MATERIAL SECTION
======================================== */

.l-app-material {
  padding-block: calc(0 / 1920 * 100vw) calc(100 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    padding-block: calc(53 / var(--fs) * 1rem) calc(56 / var(--fs) * 1rem);
  }
}

.l-app-material__header {
  display: flex;
  justify-content: center;
  
}

.l-app-material__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(16 / 1920 * 100vw);
  font-size: max(16px, calc(32 / 1920 * 100vw));
  font-weight: 900;
  color: var(--lp-color);
  text-align: center;

  @media all and (max-width: 767px) {
    font-size: calc(18 / var(--fs) * 1rem);
    gap: calc(10 / var(--fs) * 1rem);
  }
}

.l-app-material__title::after,.l-app-material__title::before{
  width: calc(3 / 1920 * 100vw);
  height: calc(40 / 1920 * 100vw);
  background-color: var(--lp-color);
  content: '';

  @media all and (max-width: 767px) {
    width: calc(2 / var(--fs) * 1rem);
    height: calc(29 / var(--fs) * 1rem);
  }
}

.l-app-material__title::before{
  margin-right: calc(24 / 1920 * 100vw);
  transform: rotate(-35deg);

  @media all and (max-width: 767px) {
    margin-right: calc(16 / var(--fs) * 1rem);
  }
}

.l-app-material__title::after{
  margin-left: calc(24 / 1920 * 100vw);
  transform: rotate(35deg);

  @media all and (max-width: 767px) {
    margin-left: calc(16 / var(--fs) * 1rem);
  }
}

.l-app-material__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(57 / 1920 * 100vw);
  margin-top: calc(83 / 1920 * 100vw);
  
  

  @media all and (max-width: 767px) {
    gap: calc(40 / var(--fs) * 1rem);
    max-width: calc(288 / var(--fs) * 1rem);
    margin-inline: auto;
    margin-top: calc(42 / var(--fs) * 1rem);
  }
}

.l-app-material__row {
  display: flex;
  gap: calc(71 / 1920 * 100vw);
  justify-content: center;
  flex-wrap: wrap;

  @media all and (max-width: 767px) {
    flex-direction: column;
    width: 100%;
    gap: calc(35 / var(--fs) * 1rem);
  }
}

.l-app-material-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14 / 1920 * 100vw);
  width: calc(352 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    width: 100%;
    gap: calc(14 / var(--fs) * 1rem);
  }
}

.l-app-material-card.left-rat{
  position: relative;

  &::after{
  position: absolute;
  content: '';
  width: calc(179 / 1920 * 100vw);
  height: calc(120 / 1920 * 100vw);
  right: calc(100% - 1px);
  top: calc(197 / 1920 * 100vw);
  background: url(../img/material-rat-left.svg) no-repeat center center / cover;

  @media all and (max-width: 767px) {
    display: none;
  }
  }
}


.l-app-material-card.right-rat{
  position: relative;

  &::after{
  position: absolute;
  content: '';
  width: calc(304 / 1920 * 100vw);
  height: calc(172 / 1920 * 100vw);
  left: calc(100% - 1px);
  top: calc(144 / 1920 * 100vw);
  background: url(../img/material-rat-right.svg) no-repeat center center / cover;

  @media all and (max-width: 767px) {
    display: none;
  }
  }
}

.l-app-material-card__label {
  position: absolute;
  top: calc(-20 / 1920 * 100vw);
  left: calc(-23 / 1920 * 100vw);
  z-index: 2;
  width: calc(136 / 1920 * 100vw);
  height: calc(136 / 1920 * 100vw);
  pointer-events: none;

  @media all and (max-width: 767px) {
    width: calc(110 / var(--fs) * 1rem);
    height: calc(110 / var(--fs) * 1rem);
    top: calc(-18 / var(--fs) * 1rem);
    left: calc(-20 / var(--fs) * 1rem);
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.l-app-material-card__img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: calc(20 / 1920 * 100vw);
  border: calc(3.6 / 1920 * 100vw) solid #222;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  @media all and (max-width: 767px) {
    border-radius: calc(16 / var(--fs) * 1rem);
    border-width: calc(3 / var(--fs) * 1rem);
  }

}

.l-app-material-card__img {
  height: auto;
  margin-inline: auto;

    &.--01{
      width: calc(243 / 1920 * 100vw);
    }
    &.--02{
      width: calc(259 / 1920 * 100vw);
    }
    &.--03{
      width: calc(243 / 1920 * 100vw);
    }
    &.--04{
      width: calc(162 / 1920 * 100vw);
    }
    &.--05{
      width: calc(300 / 1920 * 100vw);
    }

  @media all and (max-width: 767px) {
    &.--01{
      width: calc(200 / var(--fs) * 1rem);
    }
    &.--02{
      width: calc(217 / var(--fs) * 1rem);
    }
    &.--03{
      width: calc(200 / var(--fs) * 1rem);
    }
    &.--04{
      width: calc(137 / var(--fs) * 1rem);
    }
    &.--05{
      width: calc(232 / var(--fs) * 1rem);
    }
  }

  img{
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

.l-app-material-card__img-wrap--red    { background-color: var(--app-card-red); }
.l-app-material-card__img-wrap--green  { background-color: var(--app-card-green); }
.l-app-material-card__img-wrap--blue   { background-color: var(--app-card-blue); }
.l-app-material-card__img-wrap--purple { background-color: var(--app-card-purple); }
.l-app-material-card__img-wrap--pink   { background-color: var(--app-card-pink); }

.l-app-material-card__format {
  font-size: calc(24 / 1920 * 100vw);
  font-weight: 900;
  color: #222;
  text-align: center;
  line-height: 160%;

  @media all and (max-width: 767px) {
    font-size: calc(18 / var(--fs) * 1rem);
  }
}

/* ========================================
  NOTES SECTION
======================================== */

.l-app-notes {
  padding-block: calc(104 / 1920 * 100vw) calc(100 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    padding-block: calc(40 / var(--fs) * 1rem) calc(121 / var(--fs) * 1rem);
  }
}

.l-app-notes__in{
  position: relative;

  @media all and (max-width: 767px) {
    padding-inline: calc(20 / var(--fs) * 1rem);
  }
}

.l-app-notes__body{
  max-width: calc(963 / 1920 * 100vw);
  margin-inline: auto;

  @media all and (max-width: 767px) {
    max-width: calc(960 / var(--fs) * 1rem);
  }
}

.l-app-notes__blocks {
  display: flex;
  flex-direction: column;
  gap: calc(56 / 1920 * 100vw);
  

  @media all and (max-width: 767px) {
    gap: calc(32 / var(--fs) * 1rem);
  }
}

.l-app-notes__block {
  display: flex;
  flex-direction: column;
  gap: calc(12 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    gap: calc(17 / var(--fs) * 1rem);
  }
}

.l-app-notes__block-title {
  font-size: max(15px, calc(24 / 1920 * 100vw));
  font-weight: 900;
  color: var(--lp-color);
  line-height: 1.8;
  text-align: center;
  white-space: pre-line;

  @media all and (max-width: 767px) {
    font-size: calc(18 / var(--fs) * 1rem);
  }
}

.l-app-notes__block-title-small {
  font-size: calc(16 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    font-size: calc(14 / var(--fs) * 1rem);
  }
}

.l-app-notes__list {
  .c-list-item::before,
  .c-list-item__in {
    font-size: max(12px, calc(15 / 1920 * 100vw));
    font-weight: 900;
    line-height: 1.8;

    @media all and (max-width: 767px) {
      font-size: calc(15 / var(--fs) * 1rem);
    }
  }

  a {
    color: var(--lp-color);
    text-decoration: underline;
  }

}

.l-app-notes__text {
  font-size: max(12px, calc(15 / 1920 * 100vw));
  font-weight: 900;
  line-height: 1.8;

  @media all and (max-width: 767px) {
    font-size: calc(15 / var(--fs) * 1rem);
  }

  a {
    color: var(--lp-color);
    text-decoration: underline;
  }
}

.l-app-notes__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(56 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    gap: calc(40 / var(--fs) * 1rem);
  }
}

.l-app-notes__agree {
  display: flex;
  align-items: center;
  gap: calc(16 / 1920 * 100vw);
  cursor: pointer;
  font-size: max(14px, calc(24 / 1920 * 100vw));
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--lp-color);
  line-height: 1.8;
  white-space: nowrap;
  margin-block-start: calc(151 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    font-size: calc(15 / var(--fs) * 1rem);
    gap: calc(12 / var(--fs) * 1rem);
    margin-block-start: calc(64 / var(--fs) * 1rem);
  }
}

.l-app-notes__checkbox {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.l-app-notes__checkbox-box {
  display: inline-block;
  width: calc(40 / 1920 * 100vw);
  height: calc(40 / 1920 * 100vw);
  border: calc(3 / 1920 * 100vw) solid var(--lp-color);
  background-color: var(--c-white);
  border-radius: calc(4 / 1920 * 100vw);
  flex-shrink: 0;
  position: relative;
  transition: background-color 0.2s ease;

  @media all and (max-width: 767px) {
    width: calc(32 / var(--fs) * 1rem);
    height: calc(32 / var(--fs) * 1rem);
    border: calc(3 / var(--fs) * 1rem) solid var(--lp-color);
    border-radius: calc(4 / var(--fs) * 1rem);
    margin-block-start: calc(2 / var(--fs) * 1rem);
  }
}

.l-app-notes__checkbox:focus-visible + .l-app-notes__checkbox-box {
  outline: 2px solid #222;
  outline-offset: 3px;
  border-radius: 2px;
}

.l-app-notes__checkbox:checked + .l-app-notes__checkbox-box {
  background-color: var(--lp-color);
}

.l-app-notes__checkbox:checked + .l-app-notes__checkbox-box::after {
  content: '';
  position: absolute;
  top: calc(-2 / 1920 * 100vw);
  left: calc(10 / 1920 * 100vw);
  width: calc(15 / 1920 * 100vw);
  height: calc(30 / 1920 * 100vw);
  border-right: calc(3 / 1920 * 100vw) solid var(--lp-bg);
  border-bottom: calc(3 / 1920 * 100vw) solid var(--lp-bg);
  transform: rotate(45deg);
  transform-origin: center center;

  @media all and (max-width: 767px) {
    border-left-width: calc(3 / var(--fs) * 1rem);
    border-bottom-width: calc(3 / var(--fs) * 1rem);
    top: calc(0 / var(--fs) * 1rem);
    left: calc(10 / var(--fs) * 1rem);
    width: calc(10 / var(--fs) * 1rem);
    height: calc(20 / var(--fs) * 1rem);
    border-right: calc(3 / var(--fs) * 1rem) solid var(--lp-bg);
    border-bottom: calc(3 / var(--fs) * 1rem) solid var(--lp-bg);
  }
}

.l-app-notes__deco{
position: absolute;

img{
  width: 100%;
  height: auto;
  object-fit: contain;
}
}

.l-app-notes__deco.--tonkachi{
width: calc(67 / 1920 * 100vw);
height: calc(91 / 1920 * 100vw);
top: calc(77 / 1920 * 100vw);
left: calc(47 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    width: calc(21 / var(--fs) * 1rem);
    height: calc(30 / var(--fs) * 1rem);
    top: calc(-74 / var(--fs) * 1rem);
    left: calc(29 / var(--fs) * 1rem);
  }
}
.l-app-notes__deco.--wrench{
width: calc(70 / 1920 * 100vw);
height: calc(100 / 1920 * 100vw);
top: calc(201 / 1920 * 100vw);
left: calc(117 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    width: calc(22 / var(--fs) * 1rem);
    height: calc(33 / var(--fs) * 1rem);
    top: calc(-49 / var(--fs) * 1rem);
    left: calc(49 / var(--fs) * 1rem);
  }
}
.l-app-notes__deco.--cup{
width: calc(98 / 1920 * 100vw);
height: calc(91 / 1920 * 100vw);
top: calc(635 / 1920 * 100vw);
left: calc(-7 / 1920 * 100vw);

  @media all and (max-width: 767px) {
   display: none;
  }
}
.l-app-notes__deco.--necklace{
width: calc(76 / 1920 * 100vw);
height: calc(145 / 1920 * 100vw);
bottom: calc(385 / 1920 * 100vw);
left: calc(55 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    display: none;
  }
}
.l-app-notes__deco.--ring{
width: calc(47 / 1920 * 100vw);
height: calc(70 / 1920 * 100vw);
bottom: calc(311 / 1920 * 100vw);
left: calc(-9 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    display: none;
  }
}

.l-app-notes__deco.--camera{
width: calc(113 / 1920 * 100vw);
height: calc(97 / 1920 * 100vw);
bottom: calc(-70 / 1920 * 100vw);
left: calc(110 / 1920 * 100vw);

  @media all and (max-width: 767px) {
   width: calc(36 / var(--fs) * 1rem);
   height: calc(32 / var(--fs) * 1rem);
   bottom: calc(-90 / var(--fs) * 1rem);
   left: calc(35 / var(--fs) * 1rem);
  }
}

.l-app-notes__deco.--cleaner{
  width: calc(160 / 1920 * 100vw);
  height: calc(146 / 1920 * 100vw);
  top: calc(-83 / 1920 * 100vw);
  right: calc(57 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    width: calc(51 / var(--fs) * 1rem);
    height: calc(48 / var(--fs) * 1rem);
    top: calc(-83 / var(--fs) * 1rem);
    right: calc(22 / var(--fs) * 1rem);
  }
}
.l-app-notes__deco.--hat{
width: calc(135 / 1920 * 100vw);
height: calc(99 / 1920 * 100vw);
top: calc(410 / 1920 * 100vw);
right: calc(-80 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    display: none;
  }
}
.l-app-notes__deco.--book{
width: calc(67 / 1920 * 100vw);
height: calc(118 / 1920 * 100vw);
top: calc(717 / 1920 * 100vw);
right: calc(93 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    display: none;
  }
}
.l-app-notes__deco.--coin{
width: calc(89 / 1920 * 100vw);
height: calc(84 / 1920 * 100vw);
bottom: calc(485 / 1920 * 100vw);
right: calc(-28 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    display: none;
  }
}
.l-app-notes__deco.--glasses{
width: calc(88 / 1920 * 100vw);
height: calc(88 / 1920 * 100vw);
bottom: calc(172 / 1920 * 100vw);
right: calc(77 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    width: calc(28 / var(--fs) * 1rem);
    height: calc(29 / var(--fs) * 1rem);
    bottom: calc(-72 / var(--fs) * 1rem);
    right: calc(39 / var(--fs) * 1rem);
  }
}



/* ========================================
  DOWNLOAD BUTTON
======================================== */

.l-app-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(16 / 1920 * 100vw);
  width: calc(480 / 1920 * 100vw);
  max-width: 100%;
  height: calc(80 / 1920 * 100vw);
  padding-inline: calc(24 / 1920 * 100vw);
  background-color: #999;
  color: #fff;
  border: none;
  border-radius: calc(40 / 1920 * 100vw);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: calc(24 / 1920 * 100vw);
  font-weight: 900;
  letter-spacing: -0.05em;
  cursor: not-allowed;
  opacity: 0.5;
  transition: background-color 0.3s ease, opacity 0.3s ease;

  @media all and (max-width: 767px) {
    width: calc(311 / var(--fs) * 1rem);
    max-width: calc(340 / var(--fs) * 1rem);
    height: calc(64 / var(--fs) * 1rem);
    gap: calc(16 / var(--fs) * 1rem);
    padding-inline: calc(24 / var(--fs) * 1rem);
    font-size: calc(18 / var(--fs) * 1rem);
    border-radius: calc(32 / var(--fs) * 1rem);
  }
}

.l-app-download-btn.is-active {
  background-color: #222;
  opacity: 1;
  cursor: pointer;

  @media (hover: hover) {
    &:hover {
      background-color: #444;
    }
  }
}

.l-app-download-btn__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;

  svg {
    width: calc(14 / 1920 * 100vw);
    height: calc(16 / 1920 * 100vw);

    @media all and (max-width: 767px) {
      width: calc(14 / var(--fs) * 1rem);
      height: calc(16 / var(--fs) * 1rem);
    }
  }
}