@charset "UTF-8";


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

Base CSS

・サイト用htmlベースCSS

上記はここに記述する

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

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

body {
  padding-top:var(--header-height);
  font-family:var(--ff-zen);
  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:anywhere;
  word-break:normal;
  line-break:strict;
  background-color:var(--base-bg);
  overflow-x: hidden;
  position:static !important;

  &::before, &::after {
    content:"";
    background-color:rgb(from #cacaca r g b / .1);
    height:calc(100% - var(--header-height));
    position:fixed;
    top:var(--header-height);
    z-index: -1;
    pointer-events: none;
    @media (width > 767px) {
      width:calc(50% - 70.0rem);
    }
    @media (width <= 767px) {
      width:2.0rem;
    }
  }
  &::before {
    border-right:1px solid var(--cc-gray-A);
    left:0;
  }
  &::after {
    border-left:1px solid var(--cc-gray-A);
    right:0;
  }
}


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


/* 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 default
----------------------------------------------------------------------------- */
img {
  display:block;
  max-width:100%;
  height:auto;
}