/* define layer */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Tangerine:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap");
/* lib/font */
@font-face {
  font-family: "FontAwesome solid";
  font-style: normal;
  font-weight: 900;
  src: url("../../_lib/font/fontAwesome/fa-solid-900.woff2") format("woff2");
}
@font-face {
  font-family: "FontAwesome regular";
  font-style: normal;
  font-weight: 400;
  src: url("../../_lib/font/fontAwesome/fa-regular-400.woff2") format("woff2");
}
@font-face {
  font-family: "FontAwesome brands";
  font-style: normal;
  font-weight: 400;
  src: url("../../_lib/font/fontAwesome/fa-brands-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 200;
  font-display: swap;
  src: url("../../_lib/font/Inter/Inter-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: normal;
  font-display: swap;
  src: url("../../_lib/font/Inter/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 700;
  font-display: swap;
  src: url("../../_lib/font/Inter/Inter-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-weight: 200;
  font-display: swap;
  src: url("../../_lib/font/NotoSansJP/NotoSansJP-ExtraLight.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-weight: normal;
  font-display: swap;
  src: url("../../_lib/font/NotoSansJP/NotoSansJP-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-weight: 700;
  font-display: swap;
  src: url("../../_lib/font/NotoSansJP/NotoSansJP-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-weight: 900;
  font-display: swap;
  src: url("../../_lib/font/NotoSansJP/NotoSansJP-Black.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif JP";
  font-weight: 300;
  font-display: swap;
  src: url("../../_lib/font/NotoSerifJP/NotoSerifJP-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif JP";
  font-weight: normal;
  font-display: swap;
  src: url("../../_lib/font/NotoSerifJP/NotoSerifJP-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif JP";
  font-weight: 700;
  font-display: swap;
  src: url("../../_lib/font/NotoSerifJP/NotoSerifJP-Bold.woff2") format("woff2");
}
@layer base;
@layer vendor;
@layer project {
  @layer layout;
  @layer parts;
  @layer content;
}
/* style */
@layer base {
  /* reset */
  * {
    box-sizing: border-box;
    margin: 0;
  }
  *::before {
    display: inline-block;
  }
  *::after {
    display: inline-block;
  }
  script, style {
    display: none !important;
  }
  html {
    font-size: var(--initial-fontSize);
    scroll-behavior: smooth;
  }
  body {
    color: var(--initial-color);
    background-color: var(--initial-bgColor);
    font-family: var(--font-sansSerif);
    font-weight: normal;
  }
  :where(h1, h2, h3, h4, h5, p, li, dt, dd, th, td, legend) {
    word-break: break-all;
    overflow-wrap: break-word;
  }
  :where(video, iframe, img) {
    max-width: 100%;
  }
  :where(ul, ol, menu) {
    padding: 0;
    list-style-type: none;
  }
  address {
    font-style: normal;
  }
  code {
    font-family: var(--font-monospace);
  }
  fieldset {
    border: 0;
    padding: 0;
  }
  legend {
    width: 100%;
  }
  :where(i, b, em, strong) {
    font-style: normal;
  }
  a {
    display: inline-block;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-decoration: none;
    transition: 0.2s;
  }
  a[href^=tel] {
    cursor: initial;
    pointer-events: none;
  }
  a[href] {
    cursor: pointer;
  }
  a[href]:hover {
    opacity: 0.8;
  }
  time {
    word-break: keep-all;
  }
  img {
    display: inline-block;
    height: auto;
    border: none;
    vertical-align: middle;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
  }
  :where(form, input, textarea, select, button) {
    font-family: var(--font-sansSerif);
    font-size: var(--initial-formFontSize);
    color: var(--initial-color);
  }
  :where(input, textarea, select, button) {
    border: 1px solid var(--color-border-gray);
    border-radius: 2px;
    vertical-align: baseline;
    padding: 0.5em;
  }
  :where(input, textarea, select, button, [type=file]) {
    max-width: 100%;
  }
  :where([type=submit], [type=button], [type=reset], button, [type=text], [type=password], [type=email], [type=number], [type=search], [type=tel]) {
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
  }
  :where(select, [type=submit], [type=button], [type=reset], button, [type=text], [type=password], [type=email], [type=number], [type=search], [type=tel]) {
    min-height: var(--input-height);
  }
  :where(label, [type=submit], [type=button], [type=reset], button) {
    cursor: pointer;
  }
  label {
    display: inline-block;
  }
  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100em var(--color-inputBg) inset;
  }
  textarea {
    width: 100%;
    min-height: 5em;
  }
  select {
    background-color: #FFF;
  }
  /* lib/class */
  .coverImage {
    background-color: rgb(242.25, 242.25, 242.25);
    background-size: 75%;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
  }
  .coverImage img {
    width: 102%;
    height: 102%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .imgBg {
    background-color: rgb(242.25, 242.25, 242.25);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
  :root {
    --width-max: 1200px;
    --width-max-m: 1000px;
    --width-min: 350px;
    --width-dialog: 300px;
    --initial-color: var(--color-gray-dark);
    --initial-bgColor: #FAFAFA;
    --initial-fontSize: 16px;
    --initial-formFontSize: 16px;
    --font-sansSerif: "Inter", "Noto Sans JP", "Yu Gothic", "YuGothic", "Meiryo";
    --img-path: "/image/";
    --radius-s: 2px;
    --radius-m: 4px;
    --radius-l: 8px;
    --layout-pc-1: "_a  _a  _a" min-content;
    --layout-pc-2: "_b  _c  _d" auto;
    --layout-pc-3: "_e  _e  _e" min-content;
    --layout-pc-colmuns: min-content 1fr min-content;
    --layout-sp-1: "_a" min-content;
    --layout-sp-2: "_b" min-content;
    --layout-sp-3: "_c" auto;
    --layout-sp-4: "_d" min-content;
    --layout-sp-5: "_e" min-content;
    --color-gray: #999999;
    --color-gray-light: #F2F2F2;
    --color-gray-dark: #4d525c;
    --color-black: #222;
    --color-ok: #5a847b;
    --color-ng: #a84444;
    --color-main: #5a847b;
    --color-main-on: white;
    --color-sub: #a84444;
    --color-sub-on: white;
    --color-sub2: #bb9a63;
    --color-sub2-on: white;
    --color-base: white;
    --color-border-gray: rgba(153, 153, 153, 0.5);
    --color-border-main: rgba(90, 132, 123, 0.5);
    --color-border-sub: rgba(168, 68, 68, 0.5);
    --color-border-beige: rgba(187, 154, 99, 0.5);
    --color-border-ok: rgba(90, 132, 123, 0.5);
    --color-border-ng: rgba(168, 68, 68, 0.5);
    --color-shadow-gray: rgba(153, 153, 153, 0.5);
    --color-initialColor: #4d525c;
  }
}
@layer project {
  @layer layout;
  @layer parts {
    ._c {
      max-width: 1200px;
      margin-right: auto;
      margin-left: auto;
    }
    body {
      font-family: "Cormorant Garamond", "Noto Serif JP", serif;
      font-weight: 300;
      letter-spacing: 0.05em;
    }
    :where(h1, h2, h3, h4) {
      font-weight: normal;
    }
  }
}
/* z-index
 *  1:
 *  2:
 *  3:
 *  4:
 *  5:
 *  6:
 *  7:
 *  8:
 *  9:
 * */