@charset "UTF-8";


/* =============================================================================

Base CSS

・サイト用htmlベースCSS

上記はここに記述する

============================================================================= */

/* Base CSS
============================================================================= */
html {
  font-size: 100px;
  font-feature-settings: "palt";
  -webkit-font-smoothing:subpixel-antialiased;
}
@media (width > 640px) {
  html {
    min-width:var(--pc-min-width);
    font-size: clamp(var(--pc-min-size) / var(--base-size) * 10px,10 / var(--variable-length),10px);
  }
}
@media (width <= 640px) {
  html {
    -webkit-text-size-adjust: 100%;
    font-size: calc(10 / var(--variable-length));
  }
}
@media (orientation: landscape) {
  html {
    margin-inline-start: env(safe-area-inset-left);
  }
}

body {
  padding-top:var(--header-height);
  font-family:var(--ff-default);
  font-size: var(--tg-text-A-fs);
  font-weight:var(--tg-text-A-fw);
  line-height:var(--tg-text-A-lh);
  letter-spacing:var(--tg-text-A-ls);
  color:var(--base-color);
  overflow-wrap:break-word;
  background-color:var(--base-bg);
  transition-property: opacity;
  transition-duration: 1s;
  transition-timing-function:var(--ttf-eio-quad);
  opacity:0;
}
html:is(.is-loaded) body {
  opacity:1;
}
html:is(.is-loaded) body.is-link_transition {
  width:100%;
  height:100%;
  transform:scale(1.1);
  transform-origin:50% calc(var(--top) + 50vh);
  opacity:0 !important;
  transition-property: opacity,transform;
  transition-duration: .5s;
  transition-timing-function:var(--ttf-ei-quad);
  overflow-x:hidden;
  overflow-y: scroll;

  .g-header {
    @media (width > 640px) {
      position:absolute !important;
      top:var(--top) !important;
    }
    :is(.g-header_inner,.logo) {
      @media (width <= 640px) {
        position:absolute !important;
        top:var(--top) !important;
      }
    }
  }
}


/* Scroll Margin
----------------------------------------------------------------------------- */
*[id]:target,input,textarea,select,button {
  /* scroll-margin-top:calc(var(--header-height-base-scrolled) * .1rem); */
}


/* media pointer
----------------------------------------------------------------------------- */
@media (pointer: fine), (hover: hover) {
  a[href^="tel:"] {
    pointer-events:none;
  }
}
@media not (pointer) {
  * {
    -webkit-tap-highlight-color: transparent;
  }
}


/* hover basics
----------------------------------------------------------------------------- */
@media(hover) {
  :where(a[href]:not([class],[href^="tel:"])) {
    transition:opacity var(--duration-hover-A);
  }
  :where(a[href]:not([class],[href^="tel:"])):hover {
    opacity:.6;
  }
}


/* IMG Auto Size
<!-- rem all:2.00rem / sp:1.00rem -->
<img decoding="async" loading="lazy" src="image.webp" width="200" height="100" alt="" style="--iw:200;--iw-sp:100;">

<!-- percent all:50% / sp:100% -->
<img decoding="async" loading="lazy" src="image.webp" width="200" height="100" alt="" style="--iw-per:50;--iw-per-sp:100;">
----------------------------------------------------------------------------- */
/* default */
:where(img) {
  display:block;
  max-width:100%;
  height:auto;
}

/* rem */
:where(img[style*="--iw"]:not([style*="--iw-per-pc"],[style*="--iw-per-sp"],[style*="--iw-pc"],[style*="--iw-sp"])) {
  width:calc(var(--iw) * .1rem);
}
@media (width > 640px) { /* PC */
  :where(img[style*="--iw-pc"]) {
    width:calc(var(--iw-pc) * .1rem);
  }
}
@media (width <= 640px) { /* SP */
  :where(img[style*="--iw-sp"]) {
    width:calc(var(--iw-sp) * .1rem);
  }
}

/* percent */
:where(img[style*="--iw-per"]:not([style*="--iw-per-pc"],[style*="--iw-per-sp"],[style*="--iw-pc"],[style*="--iw-sp"])) {
  width:calc(var(--iw-per) * 1%);
}
@media (width > 640px) { /* PC */
  :where(img[style*="--iw-per-pc"]) {
    width:calc(var(--iw-per-pc) * 1%);
  }
}
@media (width <= 640px) { /* SP */
  :where(img[style*="--iw-per-sp"]) {
    width:calc(var(--iw-per-sp) * 1%);
  }
}