@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 {
  font-family:var(--ff-dnp_shuei-min);
  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-font-color);
  overflow-wrap:break-word;
  background-color:var(--cc-gray-A-hex);
  transition-property: opacity;
  transition-duration: var(--duration-hover-A);
  opacity:1;
}
body:not(.is-header_overlap) {
  padding-top:var(--header-height);
}
/*html:is(.wf-active,.wf-inactive) body {
  opacity:1;
}*/
@media (width <= 640px) {
  body {
  }
}


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


/* media pointer
----------------------------------------------------------------------------- */
@media (pointer) {
  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.jpg" width="200" height="100" alt="" style="--iw:200;--iw-sp:100;">

<!-- percent all:50% / sp:100% -->
<img decoding="async" loading="lazy" src="image.jpg" 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%);
  }
}