/*
  Made by Elly Loel - https://ellyloel.com/
*/
*{margin:0;padding:0;line-height:calc(0.25rem+1em+0.25rem)}*,::before,::after{box-sizing:border-box}*:where(:not(fieldset,progress,meter)){border-width:0;border-style:solid;background-origin:border-box;background-repeat:no-repeat}
html{block-size:100%;-webkit-text-size-adjust:none}
@media(prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}
body{text-rendering:optimizeSpeed;min-block-size:100%}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(svg){stroke:none;fill:currentColor}:where(svg):where(:not([fill])){stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}:where(svg):where(:not([width])){inline-size:5rem}:where(input,button,textarea,select),:where(input[type="file"])::-webkit-file-upload-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit;word-spacing:inherit}:where(textarea){resize:vertical}
@supports(resize:block){:where(textarea){resize:block}}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}
h1{font-size:2em}:where(ul,ol){list-style:disc;list-style-position:inside !important}:where(ul,ol)[role="list"]{list-style:none}
a:not([class]){text-decoration-skip-ink:auto}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]:not([tabindex*="-"])){cursor:pointer;touch-action:manipulation}:where(input[type="file"]){cursor:auto}:where(input[type="file"])::-webkit-file-upload-button,:where(input[type="file"])::file-selector-button{cursor:pointer}
@media(prefers-reduced-motion:no-preference){:focus-visible{transition:outline-offset 145ms cubic-bezier(0.25,0,0.4,1)}:where(:not(:active)):focus-visible{transition-duration:0.25s}}:where(:not(:active)):focus-visible{outline-offset:5px}:where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"]),:where(input[type="file"])::-webkit-file-upload-button,:where(input[type="file"])::file-selector-button{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;text-align:center}:where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"])[disabled]{cursor:not-allowed}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
 font-size: 16px;
}
:root {
  --comp-w: 375;
	--comp-h: 667;
  /* color */
  --color-vivid-red: #fd0000;
  --color-dull-red: #db0404;
  --color-white: #ffffff;
  --color-black: #000000;
	/* units */
	--rem: calc(1rem / 16);
	--vw: calc(min(100vw) / var(--comp-w));
	--vh: calc(100vh / var(--comp-h));
	--vh: calc(100dvh / var(--comp-h));
	--lvh: calc(100lvh / var(--comp-h));
	/* max width */
	--max-w: calc(var(--rem) * var(--bg));
	@media screen and (min-width: 768px) {
    --comp-w: 1440;
		--vw: min(calc(100vw / var(--comp-w)), .0625rem);
	}

}
.hover-animation {
  transition: opacity 0.4s ease;
  opacity: 1;
}
@media (hover: hover) {
  .hover-animation:hover {
    opacity: 0.7;
  }
}
.sp-only {
  display: block;
  @media screen and (min-width: 960px) {
    display: none;
	}
}
.pc-only {
  display: none;
  @media screen and (min-width: 960px) {
    display: block;
	}
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.flex-col {
  display: flex;
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.w-max {
  max-width: 650px;
}
.block {
  display: block;
}
.bold {
  font-weight: bold;
}
.inline {
  display: inline;
}
.tag {
  --pad-b: calc(var(--rem) * 4); 
  --pad-i: calc(var(--rem) * 60); 
  font-size: calc(var(--rem) * 14);
  padding-block: var(--pad-b);
  padding-inline: var(--pad-i);
  height: max-content;
  width: max-content;
  @media screen and (min-width: 960px) {
    --pad-b: calc(var(--rem) * 8); 
    font-size: calc(var(--rem) * 18);
  }
}
:where(.tag) {
  &.public {
    background-color: #23262c;
  }
  &.employee {
    background-color: #c9cdd3;
  }
}
.justify-items-center {
  justify-items: center;
}
.main {
  width: 1--;
  border-style: solid;
  border-width: 17.5px;
  font-family: yu-gothic, sans-serif;
  font-size: calc(var(--rem) * 16);
  line-height: 1.6;
  padding-inline: 18px;
  font-family: "Roboto", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3",
          "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Droid Sans",
          sans-serif;
  @media screen and (min-width: 768px) {
    border-width: 30px;
    padding-inline: 0;
  }
}
.inner {
  width: 100%; 
  max-width: calc(var(--rem) * 660);
  margin-inline: auto;
  --pad-b-s: 66px;
  --pad-b-e: 42px;
  --pad-term: 70px;
  --pad-discount: 40px;
  --pad-caution: 60px;
  --pad-logo: 72px;
  display: grid;
  grid-template: 
   'title' max-content
   'scroll' max-content
   'intro' max-content
   '.' var(--pad-term)
   'term' max-content
   '.' var(--pad-discount)
   'discount-rate' max-content
   '.' var(--pad-caution)
   'caution' max-content
   'caution-when-purchasing' max-content
    'lower-container' max-content
    '.' var(--pad-logo)
    'logo' max-content
   / 100%;
   justify-self: center;
   padding-block-start: calc(var(--pad-b-s));
   padding-block-end: calc(var(--pad-b-e));
  min-height: 100vh;
  @media screen and (min-width: 960px) {
    --pad-b-s: 160px;
    --pad-b-e: 42px;
    --pad-term: 70px;
    --pad-discount: 72px;
    --pad-caution: 126px;
    --pad-logo: 98px;
  }
}
:where(.inner) {
  .target {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s 0.5s ease, transform 1s 0.5s ease;
  }
  :where(.target) {
    &.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .image {
    width: 100%;
    max-width: 100%;
    pointer-events: none;
    height: auto;
  }
  .title {
    grid-area: title;
    width: min(calc(var(--vw) * 259));
    @media screen and (min-width: 768px) {
      width: calc(var(--rem) * 500);
    }
  }
  .scroll {
    --pad-b-s: calc(var(--rem) * 100);
    --pad-b-e: calc(var(--rem) * 0);
    padding-block-start: var(--pad-b-s);
    padding-block-end: var(--pad-b-e);
    grid-area: scroll;
    display: none;
    @media screen and (min-width: 960px) {
      display: block;
      --pad-b-e: calc(var(--rem) * 88);
      padding-block-start: var(--pad-b-s);
      padding-block-end: var(--pad-b-e);
    }
  }
  .intro {
    --pad-b-s: calc(var(--rem) * 52);
    grid-area: intro;
    font-size: calc(var(--rem) * 11);
    padding-block-start: var(--pad-b-s);
    font-family: YuMincho,'Yu Mincho',serif;
    line-height: 1.6;
    @media screen and (min-width: 960px) {
      --pad-b-s: calc(var(--rem) * 0);
      font-size: calc(var(--rem) * 16);
    }
  }
  .term {
    grid-area: term;
    row-gap: calc(var(--rem) * 24);
    font-size: calc(var(--rem) * 18);
    font-weight: bold;
    line-height: 1.3;
    @media screen and (min-width: 960px) {
      font-size: calc(var(--rem) * 20);
    }
  }
  .discount-rate {
    grid-area: discount-rate;
    row-gap: calc(var(--rem) * 24);
  }
  .caution {
    grid-area: caution;
    row-gap: calc(var(--rem) * 24);
  }
  :where(.caution) {
    :where(.list) {
      max-width: calc(var(--rem) * 650);
      .item {
        font-size: calc(var(--rem) * 14);
        font-family: '游ゴシック', YuGothic, sans-serif;
      }
      @media screen and (min-width: 960px) {
        --pad-b: calc(var(--rem) * 8); 
        font-size: calc(var(--rem) * 15);
      }
      &.public {
        :where(.item) {
          &:nth-child(1) {
            color: var(--color-vivid-red);
          }
          &:nth-child(2) {
            color: var(--color-vivid-red);
          }
        }
      }
    }

  }
  .caution-when-purchasing {
    --pad-b-s: calc(var(--rem) * 54);
    grid-area: caution-when-purchasing;
    display: grid;
    grid-template: 
    'tag' max-content
    '.' calc(var(--rem) * 24)
    'list' max-content
    '.' calc(var(--rem) * 32)
    'text' max-content;
    padding-block-start: var(--pad-b-s);
  }
  :where(.caution-when-purchasing) {
    .tag {
      grid-area: tag;
    }
    .list {
      grid-area: list;
      row-gap: calc(var(--rem) * 4);
    }
    .item {
      font-size: calc(var(--rem) * 14);
      text-decoration: underline;
      @media screen and (min-width: 960px) {
        --pad-b: calc(var(--rem) * 8); 
        font-size: calc(var(--rem) * 15);
      }
    }
    :where(.item) {
      &:nth-child(1) {
        
        color: var(--color-dull-red);
      }
      &:nth-child(2) {
        
        color: var(--color-dull-red);
      }
    }
    .text {
      grid-area: text;
      font-size: calc(var(--rem) * 
      15);
      color: var(--color-dull-red);
    }
  }
  .lower-container {
    grid-area: lower-container;
    width: 100%;
  }
  :where(.lower-container) {
    .link-box {
      grid-area: link-box;
      row-gap: calc(var(--rem) * 32);
      @media screen and (min-width: 960px) {
        row-gap: calc(var(--rem) * 52);
      }
    }
    :where(.link-box) {
      :where(.heading) {
        .link {
          --pad-b-s: calc(var(--rem) * 24);
          --pad-b-e: calc(var(--rem) * 22);
          padding-block-start: calc(var(--pad-b-s));
          padding-block-end: calc(var(--pad-b-e));
          width: min(450px, 100%);
          margin-inline: auto;
          font-size: calc(var(--rem) * 14);
          text-decoration: none;
          border-radius: 4px;
          @media screen and (min-width: 960px) {
            --pad-b-s: calc(var(--rem) * 33);
            --pad-b-e: calc(var(--rem) * 31);
            font-size: calc(var(--rem) * 18);
          }
        }
      }
      .text {
        font-size: calc(var(--rem) * 14);
        @media screen and (min-width: 960px) {
          font-size: calc(var(--rem) * 15);
        }
      }
      &.public {
        padding-block-start: calc(var(--rem) * 32);
        @media screen and (min-width: 960px) {
          padding-block-start: calc(var(--rem) * 84);
        }
        :where(.heading) {
          .link {
            background-color: #fff;
            color: #101010
          }
        }

      }
      &.employee {
        padding-block-start: calc(var(--rem) * 48);
        @media screen and (min-width: 960px) {
          padding-block-start: calc(var(--rem) * 112);
        }
        :where(.heading) {
          .link {
            background-color: #24272c;
            color: var(--color-white);
          }
        }
      }
    }
    .contact {
      row-gap: calc(var(--rem) * 20);
    }
    :where(.contact) {
      &.public {
        --pad-b-s: calc(var(--rem) * 48);
        padding-block-start: var(--pad-b-s);
        .heading {
          --pad-b-s: calc(var(--rem) * 24);
          --pad-b-e: calc(var(--rem) * 22);
          padding-block-start: calc(var(--pad-b-s));
          padding-block-end: calc(var(--pad-b-e));
          width: min(450px, 100%);
          margin-inline: auto;
          font-size: calc(var(--rem) * 14);
          text-decoration: none;
          background-color: #c9cdd3;
          color: #000000;
          border-radius: 4px;
          @media screen and (min-width: 960px) {
            --pad-b-s: calc(var(--rem) * 33);
            --pad-b-e: calc(var(--rem) * 31);
            font-size: calc(var(--rem) * 18);
          }
        }
        .text {
          font-size: calc(var(--rem) * 14);
          @media screen and (min-width: 960px) {
            font-size: calc(var(--rem) * 15);
          }
        }
        @media screen and (min-width: 960px) {
          --pad-b-s: calc(var(--rem) * 88);
        }
      }
      &.employee {
        --mar-b-s: calc(var(--rem) * 48);
        --pad-b-s: calc(var(--rem) * 38);
        --pad-b-e: calc(var(--rem) * 34);
        --pad-i: calc(var(--rem) * 54);
        grid-area: contact;
        margin-block-start: var(--mar-b-s);
        padding-block-start: var(--pad-b-s);
        padding-block-end: var(--pad-b-e);
        padding-inline: var(--pad-i);
        background-color: #c9cdd3;
        width: min(650px, 100%);
        margin-inline: auto;
        @media screen and (min-width: 960px) {
          --mar-b-s: calc(var(--rem) * 120);
        }
      }
      .heading {
        font-size: calc(var(--rem) * 16);
      }
      .text {
        font-size: calc(var(--rem) * 14);
        font-family: '游ゴシック', YuGothic, sans-serif;
      }
    }
  }
  .logo {
    grid-area: logo;
    width: calc(var(--vw) * 90);
    @media screen and (min-width: 960px) {
      width: calc(var(--rem) * 150);
    }
  }
}