@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap");
@layer Reset {
  /*! destyle.css v1.0.14 | MIT License | https://github.com/nicolas-cusan/destyle.css */
  /* Reset box-model */
  /* ============================================ */
  * {
    box-sizing: border-box;
  }
  ::before,
  ::after {
    box-sizing: inherit;
  }
  /* Document */
  /* ============================================ */
  /**
   * 1. Correct the line height in all browsers.
   * 2. Prevent adjustments of font size after orientation changes in iOS.
   * 3. Remove gray overlay on links for iOS.
   */
  html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -webkit-tap-highlight-color: transparent; /* 3*/
  }
  /* Sections */
  /* ============================================ */
  /**
   * Remove the margin in all browsers.
   */
  body {
    margin: 0;
  }
  /**
   * Render the `main` element consistently in IE.
   */
  main {
    display: block;
  }
  /* Vertical rhythm */
  /* ============================================ */
  p,
  table,
  blockquote,
  address,
  pre,
  iframe,
  form,
  figure,
  dl {
    margin: 0;
  }
  /* Headings */
  /* ============================================ */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    margin: 0;
  }
  /* Lists (enumeration) */
  /* ============================================ */
  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* Lists (definition) */
  /* ============================================ */
  dt {
    font-weight: bold;
  }
  dd {
    margin-left: 0;
  }
  /* Grouping content */
  /* ============================================ */
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
    border: 0;
    border-top: 1px solid;
    margin: 0;
    clear: both;
    color: inherit;
  }
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: inherit; /* 2 */
  }
  address {
    font-style: inherit;
  }
  /* Text-level semantics */
  /* ============================================ */
  /**
   * Remove the gray background on active links in IE 10.
   */
  a {
    background-color: transparent;
    text-decoration: none;
    color: inherit;
  }
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  b,
  strong {
    font-weight: bolder;
  }
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: inherit; /* 2 */
  }
  /**
   * Add the correct font size in all browsers.
   */
  small {
    font-size: 80%;
  }
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  /* Embedded content */
  /* ============================================ */
  /**
   * Remove the border on images inside links in IE 10.
   */
  img {
    border-style: none;
    vertical-align: bottom;
  }
  embed,
  object,
  iframe {
    border: 0;
    vertical-align: bottom;
  }
  /* Forms */
  /* ============================================ */
  /**
   * Reset form fields to make them styleable
   */
  button,
  input,
  optgroup,
  select,
  textarea {
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
    color: inherit;
    font: inherit;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    outline: 0;
    border-radius: 0;
    text-align: inherit;
  }
  /**
   * Reset radio and checkbox appearance to preserve their look in iOS.
   */
  [type=checkbox] {
    -webkit-appearance: checkbox;
    appearance: checkbox;
  }
  [type=radio] {
    -webkit-appearance: radio;
    appearance: radio;
  }
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  button,
  input {
    /* 1 */
    overflow: visible;
  }
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  button,
  select {
    /* 1 */
    text-transform: none;
  }
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  button,
  [type=button],
  [type=reset],
  [type=submit] {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  button[disabled],
  [type=button][disabled],
  [type=reset][disabled],
  [type=submit][disabled] {
    cursor: default;
  }
  /**
   * Remove the inner border and padding in Firefox.
   */
  button::-moz-focus-inner,
  [type=button]::-moz-focus-inner,
  [type=reset]::-moz-focus-inner,
  [type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  /**
   * Restore the focus styles unset by the previous rule.
   */
  button:-moz-focusring,
  [type=button]:-moz-focusring,
  [type=reset]:-moz-focusring,
  [type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  /**
   * Remove arrow in IE10 & IE11
   */
  select::-ms-expand {
    display: none;
  }
  /**
   * Remove padding
   */
  option {
    padding: 0;
  }
  /**
   * Reset to invisible
   */
  fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
  }
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  legend {
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  progress {
    vertical-align: baseline;
  }
  /**
   * Remove the default vertical scrollbar in IE 10+.
   */
  textarea {
    overflow: auto;
  }
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  [type=number]::-webkit-inner-spin-button,
  [type=number]::-webkit-outer-spin-button {
    height: auto;
  }
  /**
   * 1. Correct the outline style in Safari.
   */
  [type=search] {
    outline-offset: -2px; /* 1 */
  }
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  [type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  /**
   * Clickable labels
   */
  label[for] {
    cursor: pointer;
  }
  /* Interactive */
  /* ============================================ */
  /*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
  details {
    display: block;
  }
  /*
   * Add the correct display in all browsers.
   */
  summary {
    display: list-item;
  }
  /*
   * Remove outline for editable content.
   */
  [contenteditable] {
    outline: none;
  }
  /* Table */
  /* ============================================ */
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  caption {
    text-align: left;
  }
  td,
  th {
    vertical-align: top;
    padding: 0;
  }
  th {
    text-align: left;
    font-weight: bold;
  }
  /* Misc */
  /* ============================================ */
  /**
   * Add the correct display in IE 10+.
   */
  template {
    display: none;
  }
  /**
   * Add the correct display in IE 10.
   */
  [hidden] {
    display: none;
  }
}
/* Settings
---------------------------------------------------------- */
/* Theme
---------------------------------------------------------- */
/* Color
---------------------------------------------------------- */
/* Font
---------------------------------------------------------- */
/* Breakpoints
---------------------------------------------------------- */
/* Bootstrap 参考 */
/**
* @ Media Query(1方向 || 範囲指定)
* params: $key : variables/breakpointsで定義しているマップのキー
* params: $option : (up/down) or (variables/breakpointsのキー)
*/
/* Base(  @layer Base )
---------------------------------------------------------- */
@layer Base {
  /**
  * Available vars:
  * @var --viewport-from: <number> - Number in pixels without the unit. Required if `--font-size` is not exist.
  * @var --viewport-to: <number> - Number in pixels without the unit. Required if `--font-size` is not exist.
  * @var --font-size-from: <number> - Number in pixels without the unit. Required if `--font-size` and `--min-font-size` is not exist.
  * @var --font-size-to: <number> - Number in pixels without the unit. Required if `--font-size` and `--max-font-size` is not exist.
  * @var --max-font-size: <number> - Number in pixels without the unit. Optional.
  * @var --min-font-size: <number> - Number in pixels without the unit. Optional.
  * @var --viewport-unit-converter: 1vw | 1vh | 1vmin | 1vmax - Optional. Default: 1vw.
  * @var --font-size: <length> | <percentage> | <absolute-size> | <relative-size> | Global values - Optional.
  */
  *,
  *::before,
  *::after {
    --viewport-unit-converter: 1vw;
    --fz-from: var(--font-size-from, var(--min-font-size));
    --fz-to: var(--font-size-to, var(--max-font-size));
    --fz-slope: (var(--fz-to) - var(--fz-from)) / (var(--viewport-to) - var(--viewport-from)) * 100;
    --fz-intercept: (var(--viewport-to) * var(--fz-from) - var(--viewport-from) * var(--fz-to)) / (var(--viewport-to) - var(--viewport-from));
    --font-size: calc(var(--fz-slope) * var(--viewport-unit-converter) + var(--fz-intercept) * 1px);
    --min-fz-px: calc(var(--min-font-size) * 1px);
    --max-fz-px: calc(var(--max-font-size) * 1px);
    --clamp: clamp(var(--min-fz-px), var(--font-size), var(--max-fz-px));
    --max: var(--has-max, var(--min));
    --min: var(--has-min, var(--font-size));
    --has-max: min(var(--max-fz-px), var(--font-size));
    --has-min: max(var(--min-fz-px), var(--font-size));
    font-size: var(--clamp, var(--max));
  }
  :root {
    --root-font-size: 16px;
    --viewport-from: 375;
    --viewport-to: 1024;
    --clr-official-primary: #2FA0E5;
    --clr-official-instagram: #F040AA;
    --fc-default: #000;
    --px: 0.26666666666666666vw;
    --link-clr-default: #0000ee;
    --link-clr-visited: #551a8b
    --link-clr-hover : #0000ee;
    --link-clr-active: #FF0000;
    --theme-side-gap: min(2.4vw, 24px);
    --theme-inline-size-min: 90%;
    --theme-inline-size-max: 1024px;
    --theme-inline-size-base: min(calc( 100% - ( var(--theme-side-gap) * 2 ) ), var(--theme-inline-size-max));
    --theme-inline-size-wide: 90%;
    --leading-trim: calc((1em - 1lh) / 2);
    --theme-bg-color: #FCF8EF;
    --fw-r: 400;
    --fw-m: 500;
    --fw-b: 700;
    --theme-header-height: clamp(4rem, 0.6414676425rem + 14.3297380586vw, 9.8125rem);
    --scroll-bar-inline-size: 15px;
    --ff-icon: "Material Icons Outlined";
    --easing-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  }
  :lang(en) {
    --leading-trim: calc((1cap - 1lh) / 2);
  }
  :where(*) {
    min-inline-size: 0;
    min-block-size: 0;
  }
  :where(html) {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }
  :where(body) {
    --min-font-size: 14;
    --max-font-size: 16;
    color: var(--fc-default);
    line-height: 1.75;
    min-block-size: 100svh;
    font-family: sans-serif;
    font-weight: var(--fw-r);
    overflow-x: hidden;
    accent-color: #080;
  }
  :where(body):has(.l-root.--drawer-open) {
    overflow: hidden;
  }
  :where(body):has(.c-dialog__wrapper[open]) {
    overflow: hidden;
  }
  :where(a, a:link) {
    color: var(--link-clr-default);
    text-decoration: none;
    cursor: pointer;
  }
  :where(a:visited) {
    color: revert;
  }
  @media (any-hover: hover) {
    :where(a:hover) {
      color: revert;
    }
  }
  :where(a:active) {
    color: revert;
  }
  :where(a:focus-visible, a:focus) {
    outline: solid currentColor;
    color: revert;
  }
  :where(textarea) {
    inline-size: 100%;
    field-sizing: content;
  }
  @supports (field-sizing: content) {
    :where(textarea) {
      resize: none;
    }
  }
  :where(img, picture, svg) {
    display: block;
    max-inline-size: 100%;
    height: auto;
  }
  :where(iframe, object, video) {
    display: block;
    max-inline-size: 100%;
    height: auto;
  }
  :where(button, [type=button], [type=reset], [type=submit]) {
    touch-action: manipulation;
  }
  :where(dialog) {
    width: unset;
    max-width: unset;
    height: unset;
    max-height: unset;
    padding: unset;
    color: unset;
    background-color: unset;
    border: unset;
    overflow: unset;
  }
}
/* Components(  @layer Base )
---------------------------------------------------------- */
@layer Components;
/* --- Components --- */
@layer Components.buttons {
  .c-btn__list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    justify-content: center;
  }
  .c-btn__list.--space {
    margin-block-start: 1lh;
  }
  .c-btn {
    display: grid;
    grid-template-columns: auto;
    place-content: center center;
    padding: 0.25lh 2.2em;
    background: #fff;
    font-weight: bold;
    column-gap: 0.5em;
    max-inline-size: fit-content;
    white-space: nowrap;
  }
  .c-btn:is(a, button) {
    color: #404040;
    border: 1px solid currentColor;
  }
  .c-btn:is(a, button):is(.--primary) {
    background: #0d6efd;
    color: #fff;
  }
  .c-btn:is(a, button):is(.--success) {
    background: #198754;
    color: #fff;
  }
  .c-btn:is(a, button):is(.--danger) {
    background: #dc3545;
    color: #fff;
  }
  .c-btn:is(a, button):is(.--cancel) {
    background: #fafafa;
    color: #808080;
    border: 1px solid currentColor;
  }
}
@layer Components.Map {
  .c-map__wrapper {
    margin-block-end: 1lh;
    display: grid;
    row-gap: 0.5lh;
  }
  .c-map {
    aspect-ratio: 240/220;
    position: relative;
  }
  .c-map:where(.l-root:has(.l-wrapper) *) {
    margin-inline: calc(var(--theme-side-gap) * -1);
  }
  .c-map.--aspect-3-2 {
    aspect-ratio: 3/2;
  }
  .c-map iframe {
    inline-size: 100%;
    block-size: 100%;
  }
}
@layer Components.PatrolContact {
  .c-patrol-contact__list {
    display: grid;
  }
  .c-patrol-contact {
    display: grid;
    gap: 0.5lh 0.5em;
    grid-template-columns: 1fr min(24vw, 100px);
    grid-template-rows: auto auto;
    grid-template-areas: "title btn" "note .";
    padding-block: 0.72lh;
    border-block-end: solid 1px #dcdcdc;
  }
  .c-patrol-contact__title {
    --min-font-size: 18;
    --max-font-size: 20;
    font-weight: var(--fw-b);
    grid-area: title;
    line-height: 1.2222222222;
    margin-block: var(--leading-trim);
  }
  .c-patrol-contact__note {
    grid-area: note;
    color: #808080;
    margin-block: var(--leading-trim);
  }
  .c-patrol-contact__btn {
    grid-area: btn;
    grid-row: 1/-1;
    background: #dc3545;
    color: #fff;
    display: grid;
    place-content: center center;
  }
}
@layer Components.Form {
  .c-form {
    display: grid;
    row-gap: 1lh;
    border-block-start: 1px solid #dcdcdc;
  }
  .c-form-field__list {
    display: grid;
  }
  .c-form-field {
    display: grid;
    grid-template-columns: min(25vw, 168px) 1fr;
    column-gap: 0.5em;
    padding-block: 0.72lh;
    justify-content: flex-start;
  }
  .c-form-field:not(:last-child) {
    border-block-end: 1px solid #dcdcdc;
  }
  .c-form-field__label {
    font-weight: var(--fw-b);
  }
  .c-form-field__label:where(.c-form-field:has(.c-form-field__input:is(input, textarea)) *) {
    padding-block-start: 0.24lh;
  }
  .c-form-field__input:is(input[type=text], input[type=tel], textarea) {
    border: 1px solid #ccc;
    padding: 0.25lh 0.5em;
    background: #fafafa;
  }
  .c-form-field__input:is(textarea) {
    min-block-size: 5lh;
  }
  .c-form-field__input:has(*) {
    display: grid;
    row-gap: 0.25lh;
  }
}
@layer Components.MessageBox {
  .c-messagebox {
    --min-font-size: 16;
    --max-font-size: 18;
    border: 1px solid currentColor;
    background: #ebf0f7;
    color: #0d6efd;
    padding: 0.25lh 1em;
    font-weight: bold;
    margin-block-end: 1lh;
  }
  .c-messagebox.--alert {
    color: #F00;
    border: 1px solid currentColor;
    background: #fdeaea;
  }
}
@layer Components.RescueList {
  .c-rescue__list {
    display: grid;
    border-block-start: 1px solid #ddd;
  }
  .c-rescue__row {
    border-block-end: 1px solid #ddd;
    padding: 0.48lh 0;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "meta action" "name ." "date .";
    row-gap: 0.56lh;
  }
  .c-rescue-meta__list {
    grid-area: meta;
    display: grid;
    grid-auto-flow: column;
    column-gap: 0.32em;
    justify-content: flex-start;
  }
  .c-rescue-meta .icon {
    --min-font-size: 10;
    --max-font-size: 12;
    background: #ddd;
    border-radius: 3px;
    font-weight: var(--fw-b);
    padding: 0.16lh 1em;
    line-height: 1.24;
  }
  .c-rescue-meta .icon:is(.--id) {
    background: #ebfbff;
    color: var(--clr-official-primary);
    border: 1px solid currentColor;
  }
  .c-rescue-meta .icon:is(.--status-0) {
    background: #dc3545;
    color: #fff;
  }
  .c-rescue-meta .icon:is(.--status-1) {
    background: #198754;
    color: #fff;
  }
  .c-rescue__name {
    grid-area: name;
    font-weight: var(--fw-b);
    margin-block: var(--leading-trim);
  }
  .c-rescue__name :is(a) {
    --min-font-size: 18;
    --max-font-size: 20;
    color: #000;
  }
  .c-rescue__date {
    --min-font-size: 12;
    --max-font-size: 14;
    grid-area: date;
    color: #808080;
    margin-block: var(--leading-trim);
  }
  .c-rescue-action__list {
    grid-area: action;
    display: grid;
    place-content: center flex-start;
    grid-auto-flow: column;
    grid-row: 1/-1;
    column-gap: 0.72em;
  }
  .c-rescue-action {
    color: #404040;
    border: 1px solid currentColor;
    padding: 0.24lh 0.5em;
    display: grid;
    place-content: center center;
    line-height: 1.24;
  }
}
@layer Components.Filter {
  .c-filter__list {
    margin-block-end: 1lh;
    display: grid;
    grid-auto-flow: column;
    justify-content: flex-end;
  }
  .c-filter-row {
    display: grid inline;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.5em;
  }
  .c-filter-heading {
    --min-font-size: 12;
    --max-font-size: 14;
    font-weight: var(--fw-b);
    color: #808080;
  }
  .c-filter-field :where(select) {
    --min-font-size: 12;
    --max-font-size: 14;
    border: 1px solid #ccc;
    padding: 0.25lh 0.5em;
    border-radius: 99em;
    text-align: center;
    inline-size: min(24vw, 120px);
  }
}
@layer Components.Filter {
  .c-filter__list {
    margin-block-end: 1lh;
    display: grid;
    grid-auto-flow: column;
    justify-content: flex-end;
  }
  .c-filter-row {
    display: grid inline;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.5em;
  }
  .c-filter-heading {
    --min-font-size: 12;
    --max-font-size: 14;
    font-weight: var(--fw-b);
    color: #808080;
  }
  .c-filter-field :where(select) {
    --min-font-size: 12;
    --max-font-size: 14;
    border: 1px solid #ccc;
    padding: 0.25lh 0.5em;
    border-radius: 99em;
    text-align: center;
    inline-size: min(24vw, 120px);
  }
}
@layer Components.Load {
  .c-load {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: grid;
    place-content: center center;
    z-index: 8888;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: grid;
    transition: 0.3s opacity ease, 0.3s visibility ease;
  }
  .c-load__text {
    color: #fff;
    display: grid;
    place-content: center center;
    font-weight: var(--fw-b);
  }
  .c-load__text::before {
    content: "";
    inline-size: min(24vw, 72px);
    aspect-ratio: 1;
    background: url(../img/load.gif) no-repeat center center/contain;
    margin-inline: auto;
    margin-block-end: 0.5lh;
  }
  .c-load:is([open]) {
    opacity: 1;
    visibility: visible;
    pointer-events: revert;
  }
}
@layer Components.Alert {
  .c-alert {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: grid;
    place-content: center center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: grid;
    transition: 0.3s opacity ease, 0.3s visibility ease;
  }
  .c-alert__body {
    inline-size: min(80%, 640px);
    margin-inline: auto;
    padding: 1lh 2em;
    background: #fff;
    border-radius: 10px;
    position: relative;
    display: grid;
  }
  .c-alert__body::before {
    content: "";
    display: block;
    inline-size: min(5.6vw, 48px);
    aspect-ratio: 1;
    background: url(../img/ic_alert.svg) no-repeat center/contain;
    margin-inline: auto;
    margin-block-end: 0.24lh;
  }
  .c-alert__body dl {
    display: grid;
    row-gap: 0.32lh;
  }
  .c-alert__body dl dt {
    font-weight: var(--fw-b);
    border: 1px solid #aaa;
    background: #fafafa;
    padding: 0.24lh 1em;
  }
  .c-alert__text {
    row-gap: 0.56lh;
    display: grid;
  }
  .c-alert__close {
    inline-size: min(4.8vw, 48px);
    aspect-ratio: 1;
    display: grid;
    place-content: center center;
    background: #808080;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    border-radius: 50%;
  }
  .c-alert:is([open]) {
    opacity: 1;
    visibility: visible;
    pointer-events: revert;
  }
  .c-alert-heading {
    font-weight: bold;
    --min-font-size: 18;
    --max-font-size: 20;
    max-inline-size: fit-content;
    margin-inline: auto;
    margin-block-end: 0.56lh;
  }
  .c-alert-notice {
    border: 1px solid currentColor;
    padding: 0.24lh 1em;
    color: #ff6666;
  }
  .c-alert-btn__group {
    display: grid;
    margin-block-start: 0.48lh;
    justify-content: center;
  }
  .c-alert-btn__group .c-alert-btn {
    padding: 0.32lh 1em;
    border-radius: 5px;
    background: #ff6666;
    color: #fff;
    min-width: 120px;
    display: grid;
    place-content: center center;
  }
}
/* Layout(  @layer Base )
---------------------------------------------------------- */
@layer Layout;
/* --- Root --- */
@layer Layout.Root {
  .l-root {
    inline-size: 100%;
    min-block-size: 100svh;
    overflow-x: hidden;
  }
  .l-root:has(.l-wrapper) {
    background: #808080;
  }
}
@layer Layout.Wrapper {
  .l-wrapper {
    inline-size: min(100%, 720px);
    block-size: 100svh;
    margin-inline: auto;
    overflow-x: hidden;
    background: #fff;
    padding-inline: var(--theme-side-gap);
  }
}
@layer Layout.Header {
  .l-header {
    --header-gap-row: min(2.4vw, 16px);
    padding-block: var(--header-gap-row);
  }
  .l-header:not(:where(.l-root:has(.l-wrapper) *)) {
    padding-block: 0;
    display: grid;
    grid-template-columns: var(--theme-side-gap) 1fr min(24vw, 120px);
    grid-template-areas: ". title link";
    margin-block-end: 1lh;
    border-block-end: 1px solid #e0e0e0;
  }
  .l-header-sitename {
    --min-font-size: 18;
    --max-font-size: 20;
    font-weight: var(--fw-b);
  }
  .l-header-sitename:not(:where(.l-root:has(.l-wrapper) *)) {
    grid-area: title;
    padding-block: var(--header-gap-row);
  }
  .l-header-sitename :is(a) {
    color: #000;
  }
  .l-header-link {
    grid-area: link;
    display: grid;
    place-content: center center;
    column-gap: 0.5em;
    grid-auto-flow: column;
    align-items: center;
  }
  .l-header-link:is(a) {
    color: #808080;
    font-weight: var(--fw-b);
  }
  .l-header-link::after {
    content: "";
    inline-size: min(4.8vw, 16px);
    aspect-ratio: 1;
    background: url(../img/ic_window.svg) no-repeat center center/contain;
  }
}
@layer Layout.Main {
  .l-main {
    display: grid;
    row-gap: 1lh;
  }
}
@layer Layout.Section {
  .l-section:not(:where(.l-root:has(.l-wrapper) *)) {
    padding-inline: var(--theme-side-gap);
  }
  .l-section:not(:where(.l-root:has(.l-wrapper) *)) .l-section__inner {
    inline-size: min(100%, 1024px);
    margin-inline: auto;
  }
  .l-section-header {
    display: grid;
    margin-block-end: 1lh;
  }
  .l-section-header:has(.c-btn) {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .l-section-heading {
    --min-font-size: 24;
    --max-font-size: 32;
    font-weight: var(--fw-b);
    display: grid;
    grid-template-columns: min(1em, 32px) 1fr;
    column-gap: 0.24em;
  }
  .l-section-heading::before {
    content: "";
    aspect-ratio: 1;
    display: block;
    border-radius: 50%;
    border: 8px solid var(--clr-official-primary);
    position: relative;
    top: 0.24lh;
  }
  .l-section-heading:where(:not(.l-section-header) > *) {
    margin-block-end: 0.48lh;
  }
}
@layer Layout.Footer {
  .l-footer {
    margin-block-start: 2.4lh;
  }
  .l-footer__inner {
    padding-block-end: 2.4lh;
    text-align: center;
    font-size: var(--fs-sm);
    color: #606060;
  }
  .l-footer__inner:not(:where(.l-root:has(.l-wrapper) *)) {
    padding-inline: var(--theme-side-gap);
  }
  .l-footer small {
    --min-font-size: 12;
    --max-font-size: 14;
    color: #808080;
  }
}
/* Projects(  @layer Base )
---------------------------------------------------------- */
@layer Projects;
/* --- Projects --- */
@layer Projects.Home {}
@layer Reset, Base, Layout, Components, Projects;

/*# sourceMappingURL=styles.css.map */