@charset "UTF-8";
@layer normalize, destyle;
@layer normalize {
  /* Document
   * ========================================================================== */
  /**
   * Add border box sizing in all browsers (opinionated).
   */
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }
  /**
   * 1. Add text decoration inheritance in all browsers (opinionated).
   * 2. Add vertical alignment inheritance in all browsers (opinionated).
   */
  ::before,
  ::after {
    text-decoration: inherit; /* 1 */
    vertical-align: inherit; /* 2 */
  }
  /**
   * 1. Use the default cursor in all browsers (opinionated).
   * 2. Change the line height in all browsers (opinionated).
   * 3. Use a 4-space tab width in all browsers (opinionated).
   * 4. Remove the grey highlight on links in iOS (opinionated).
   * 5. Prevent adjustments of font size after orientation changes in
   *    IE on Windows Phone and in iOS.
   * 6. Breaks words to prevent overflow in all browsers (opinionated).
   */
  html {
    cursor: default; /* 1 */
    line-height: 1.5; /* 2 */
    -moz-tab-size: 4; /* 3 */
    -o-tab-size: 4;
    tab-size: 4; /* 3 */
    -webkit-tap-highlight-color: transparent;
    -ms-text-size-adjust: 100%; /* 5 */
    -webkit-text-size-adjust: 100%; /* 5 */
    word-break: break-word; /* 6 */
  }
  /* Sections
   * ========================================================================== */
  /**
   * Remove the margin in all browsers (opinionated).
   */
  body {
    margin: 0;
  }
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Edge, Firefox, and Safari.
   */
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  /* Grouping content
   * ========================================================================== */
  /**
   * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
   */
  dl dl,
  dl ol,
  dl ul,
  ol dl,
  ul dl {
    margin: 0;
  }
  /**
   * Remove the margin on nested lists in Edge 18- and IE.
   */
  ol ol,
  ol ul,
  ul ol,
  ul ul {
    margin: 0;
  }
  /**
   * 1. Add the correct sizing in Firefox.
   * 2. Show the overflow in Edge 18- and IE.
   */
  hr {
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  /**
   * Add the correct display in IE.
   */
  main {
    display: block;
  }
  /**
   * Remove the list style on navigation lists in all browsers (opinionated).
   */
  nav ol,
  nav ul {
    list-style: none;
    padding: 0;
  }
  /**
   * 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: 1em; /* 2 */
  }
  /* Text-level semantics
   * ========================================================================== */
  /**
   * Remove the gray background on active links in IE 10.
   */
  a {
    background-color: transparent;
  }
  /**
   * Add the correct text decoration in Edge 18-, IE, and Safari.
   */
  abbr[title] {
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  /**
   * 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: 1em; /* 2 */
  }
  /**
   * Add the correct font size in all browsers.
   */
  small {
    font-size: 80%;
  }
  /* Embedded content
   * ========================================================================== */
  /*
   * Change the alignment on media elements in all browsers (opinionated).
   */
  audio,
  canvas,
  iframe,
  img,
  svg,
  video {
    vertical-align: middle;
  }
  /**
   * Add the correct display in IE 9-.
   */
  audio,
  video {
    display: inline-block;
  }
  /**
   * Add the correct display in iOS 4-7.
   */
  audio:not([controls]) {
    display: none;
    height: 0;
  }
  /**
   * Remove the border on iframes in all browsers (opinionated).
   */
  iframe {
    border-style: none;
  }
  /**
   * Remove the border on images within links in IE 10-.
   */
  img {
    border-style: none;
  }
  /**
   * Change the fill color to match the text color in all browsers (opinionated).
   */
  svg:not([fill]) {
    fill: currentColor;
  }
  /**
   * Hide the overflow in IE.
   */
  svg:not(:root) {
    overflow: hidden;
  }
  /* Tabular data
   * ========================================================================== */
  /**
   * Collapse border spacing in all browsers (opinionated).
   */
  table {
    border-collapse: collapse;
  }
  /* Forms
   * ========================================================================== */
  /**
   * Remove the margin on controls in Safari.
   */
  button,
  input,
  select {
    margin: 0;
  }
  /**
   * 1. Show the overflow in IE.
   * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
   */
  button {
    overflow: visible; /* 1 */
    text-transform: none; /* 2 */
  }
  /**
   * Correct the inability to style buttons in iOS and Safari.
   */
  button,
  [type=button],
  [type=reset],
  [type=submit] {
    -webkit-appearance: button;
  }
  /**
   * 1. Change the inconsistent appearance in all browsers (opinionated).
   * 2. Correct the padding in Firefox.
   */
  fieldset {
    border: 1px solid #a0a0a0; /* 1 */
    padding: 0.35em 0.75em 0.625em; /* 2 */
  }
  /**
   * Show the overflow in Edge 18- and IE.
   */
  input {
    overflow: visible;
  }
  /**
   * 1. Correct the text wrapping in Edge 18- and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   */
  legend {
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    white-space: normal; /* 1 */
  }
  /**
   * 1. Add the correct display in Edge 18- and IE.
   * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
   */
  progress {
    display: inline-block; /* 1 */
    vertical-align: baseline; /* 2 */
  }
  /**
   * Remove the inheritance of text transform in Firefox.
   */
  select {
    text-transform: none;
  }
  /**
   * 1. Remove the margin in Firefox and Safari.
   * 2. Remove the default vertical scrollbar in IE.
   * 3. Change the resize direction in all browsers (opinionated).
   */
  textarea {
    margin: 0; /* 1 */
    overflow: auto; /* 2 */
    resize: vertical; /* 3 */
  }
  /**
   * Remove the padding in IE 10-.
   */
  [type=checkbox],
  [type=radio] {
    padding: 0;
  }
  /**
   * 1. Correct the odd appearance in Chrome, Edge, and Safari.
   * 2. Correct the outline style in Safari.
   */
  [type=search] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  /**
   * Correct the cursor style of increment and decrement buttons in Safari.
   */
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }
  /**
   * Correct the text style of placeholders in Chrome, Edge, and Safari.
   */
  ::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.54;
  }
  /**
   * Remove the inner padding in Chrome, Edge, and Safari on macOS.
   */
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  /**
   * 1. Correct the inability to style upload buttons in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  /**
   * Remove the inner border and padding of focus outlines in Firefox.
   */
  ::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  /**
   * Restore the focus outline styles unset by the previous rule in Firefox.
   */
  :-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  /**
   * Remove the additional :invalid styles in Firefox.
   */
  :-moz-ui-invalid {
    box-shadow: none;
  }
  /* Interactive
   * ========================================================================== */
  /*
   * Add the correct display in Edge 18- and IE.
   */
  details {
    display: block;
  }
  /*
   * Add the correct styles in Edge 18-, IE, and Safari.
   */
  dialog {
    background-color: white;
    border: solid;
    color: black;
    display: block;
    height: -moz-fit-content;
    height: fit-content;
    left: 0;
    margin: auto;
    padding: 1em;
    position: absolute;
    right: 0;
    width: -moz-fit-content;
    width: fit-content;
  }
  dialog:not([open]) {
    display: none;
  }
  /*
   * Add the correct display in all browsers.
   */
  summary {
    display: list-item;
  }
  /* Scripting
   * ========================================================================== */
  /**
   * Add the correct display in IE 9-.
   */
  canvas {
    display: inline-block;
  }
  /**
   * Add the correct display in IE.
   */
  template {
    display: none;
  }
  /* User interaction
   * ========================================================================== */
  /*
   * 1. Remove the tapping delay in IE 10.
   * 2. Remove the tapping delay on clickable elements
        in all browsers (opinionated).
   */
  a,
  area,
  button,
  input,
  label,
  select,
  summary,
  textarea,
  [tabindex] { /* 1 */
    touch-action: manipulation; /* 2 */
  }
  /**
   * Add the correct display in IE 10-.
   */
  [hidden] {
    display: none;
  }
  /* Accessibility
   * ========================================================================== */
  /**
   * Change the cursor on busy elements in all browsers (opinionated).
   */
  [aria-busy=true] {
    cursor: progress;
  }
  /*
   * Change the cursor on control elements in all browsers (opinionated).
   */
  [aria-controls] {
    cursor: pointer;
  }
  /*
   * Change the cursor on disabled, not-editable, or otherwise
   * inoperable elements in all browsers (opinionated).
   */
  [aria-disabled=true],
  [disabled] {
    cursor: not-allowed;
  }
  /*
   * Change the display on visually hidden accessible elements
   * in all browsers (opinionated).
   */
  [aria-hidden=false][hidden] {
    display: initial;
  }
  [aria-hidden=false][hidden]:not(:focus) {
    clip: rect(0, 0, 0, 0);
    position: absolute;
  }
}
@layer destyle {
  /*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */
  /* Reset box-model and set borders */
  /* ============================================ */
  *,
  ::before,
  ::after {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
    min-width: 0;
  }
  /* 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;
    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-top-width: 1px;
    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] {
    -webkit-text-decoration: underline dotted;
    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;
  }
  /* Replaced content */
  /* ============================================ */
  /**
   * Prevent vertical alignment issues.
   */
  svg,
  img,
  embed,
  object,
  iframe {
    vertical-align: bottom;
  }
  /* Forms */
  /* ============================================ */
  /**
   * Reset form fields to make them styleable.
   * 1. Make form elements stylable across systems iOS especially.
   * 2. Inherit text-transform from parent.
   */
  button,
  input,
  optgroup,
  select,
  textarea {
    -webkit-appearance: none; /* 1 */
    -moz-appearance: none;
    appearance: none;
    vertical-align: middle;
    color: inherit;
    font: inherit;
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
    text-align: inherit;
    text-transform: inherit; /* 2 */
  }
  /**
   * Correct cursors for clickable elements.
   */
  button,
  [type=button],
  [type=reset],
  [type=submit] {
    cursor: pointer;
  }
  button:disabled,
  [type=button]:disabled,
  [type=reset]:disabled,
  [type=submit]:disabled {
    cursor: default;
  }
  /**
   * Improve outlines for Firefox and unify style with input elements & buttons.
   */
  :-moz-focusring {
    outline: auto;
  }
  select:disabled {
    opacity: inherit;
  }
  /**
   * Remove padding
   */
  option {
    padding: 0;
  }
  /**
   * Reset to invisible
   */
  fieldset {
    margin: 0;
    padding: 0;
    min-width: 0;
  }
  legend {
    padding: 0;
  }
  /**
   * 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;
  }
  /**
   * 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. Fix font inheritance.
   */
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  /**
   * Fix appearance for Firefox
   */
  [type=number] {
    -moz-appearance: textfield;
  }
  /**
   * 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]:focus {
    outline: auto;
  }
  /* Tables */
  /* ============================================ */
  /**
  1. Correct table border color inheritance in all Chrome and Safari.
  */
  table {
    border-color: inherit; /* 1 */
    border-collapse: collapse;
  }
  caption {
    text-align: left;
  }
  td,
  th {
    vertical-align: top;
    padding: 0;
  }
  th {
    text-align: left;
    font-weight: bold;
  }
  .wp-block-content * {
    all: revert-layer;
  }
}
/* ============================================================
/* variables
============================================================ */
/* ============================================================
/* base
============================================================ */
:root {
  /* color */
  --color-green-primary: #387a62;
  --color-green-primary-rgb: 56, 122, 98;
  --color-green-secondary: #3a7a63;
  --color-green-secondary-rgb: 58, 122, 99;
  --color-green-tertiary: #98b354;
  --color-green-tertiary-rgb: 152, 179, 84;
  --color-green-quaternary: #b8cc81;
  --color-green-quaternary-rgb: 184, 204, 129;
  --color-green-container: #dae2c7;
  --image-green-ptn: url("../img/green/bg_ptn.png");
  --color-blue-primary: #195d76;
  --color-blue-primary-rgb: 25, 93, 118;
  --color-blue-secondary: #2aa9c6;
  --color-blue-secondary-rgb: 42, 169, 198;
  --color-blue-tertiary: #2aa9c6;
  --color-blue-tertiary-rgb: 42, 169, 198;
  --color-blue-quaternary: #dfebed;
  --color-blue-quaternary-rgb: 223, 238, 237;
  --color-blue-container: #bbe8ee;
  --image-blue-ptn: url("../img/blue/bg_ptn.png");
  --color-base: #000;
  --color-primary: var(--color-green-primary);
  --color-primary-rgb: var(--color-green-primary-rgb);
  --color-secondary: var(--color-green-secondary);
  --color-secondary-rgb: var(--color-green-secondary-rgb);
  --color-tertiary: var(--color-green-tertiary);
  --color-tertiary-rgb: var(--color-green-tertiary-rgb);
  --color-quaternary: var(--color-green-quaternary);
  --color-quaternary-rgb: var(--color-green-quaternary-rgb);
  --color-container: var(--color-green-container);
  --color-sibling-primary: var(--color-blue-primary);
  --color-sibling-primary-rgb: var(--color-blue-primary-rgb);
  --color-sibling-secondary: var(--color-blue-secondary);
  --color-sibling-secondary-rgb: var(--color-blue-secondary-rgb);
  --color-sibling-tertiary: var(--color-blue-tertiary);
  --color-sibling-tertiary-rgb: var(--color-blue-tertiary-rgb);
  --color-sibling-quaternary: var(--color-blue-quaternary);
  --color-sibling-quaternary-rgb: var(--color-blue-quaternary-rgb);
  --color-sibling-container: var(--color-blue-container);
  --image-sibling-ptn: var(--image-blue-ptn);
  --color-border: #dddddd;
  --color-caution: #ff1614;
  --color-caution-container: #fff1f1;
  --color-gray: #bcbcbc;
  --image-ptn: var(--image-green-ptn);
}

@font-face {
  font-family: "sink";
  src: url("../font/sink.otf") format("opentype"), url("../font/sink.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
body {
  font-family: "Roboto", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-base);
}
body.site-theme-green {
  --color-primary: var(--color-green-primary);
  --color-primary-rgb: var(--color-green-primary-rgb);
  --color-secondary: var(--color-green-secondary);
  --color-secondary-rgb: var(--color-green-secondary-rgb);
  --color-tertiary: var(--color-green-tertiary);
  --color-tertiary-rgb: var(--color-green-tertiary-rgb);
  --color-quaternary: var(--color-green-quaternary);
  --color-quaternary-rgb: var(--color-green-quaternary-rgb);
  --color-container: var(--color-green-container);
  --image-ptn: var(--image-green-ptn);
  --color-sibling-primary: var(--color-blue-primary);
  --color-sibling-primary-rgb: var(--color-blue-primary-rgb);
  --color-sibling-secondary: var(--color-blue-secondary);
  --color-sibling-secondary-rgb: var(--color-blue-secondary-rgb);
  --color-sibling-tertiary: var(--color-blue-tertiary);
  --color-sibling-tertiary-rgb: var(--color-blue-tertiary-rgb);
  --color-sibling-quaternary: var(--color-blue-quaternary);
  --color-sibling-quaternary-rgb: var(--color-blue-quaternary-rgb);
  --color-sibling-container: var(--color-blue-container);
  --image-sibling-ptn: var(--image-blue-ptn);
}
body.site-theme-blue {
  --color-primary: var(--color-blue-primary);
  --color-primary-rgb: var(--color-blue-primary-rgb);
  --color-secondary: var(--color-blue-secondary);
  --color-secondary-rgb: var(--color-blue-secondary-rgb);
  --color-tertiary: var(--color-blue-tertiary);
  --color-tertiary-rgb: var(--color-blue-tertiary-rgb);
  --color-quaternary: var(--color-blue-quaternary);
  --color-quaternary-rgb: var(--color-blue-quaternary-rgb);
  --color-container: var(--color-blue-container);
  --image-ptn: var(--image-blue-ptn);
  --color-sibling-primary: var(--color-green-primary);
  --color-sibling-primary-rgb: var(--color-green-primary-rgb);
  --color-sibling-secondary: var(--color-green-secondary);
  --color-sibling-secondary-rgb: var(--color-green-secondary-rgb);
  --color-sibling-tertiary: var(--color-green-tertiary);
  --color-sibling-tertiary-rgb: var(--color-green-tertiary-rgb);
  --color-sibling-quaternary: var(--color-green-quaternary);
  --color-sibling-quaternary-rgb: var(--color-green-quaternary-rgb);
  --color-sibling-container: var(--color-green-container);
  --image-sibling-ptn: var(--image-green-ptn);
}

@media screen and (min-width: 812px) {
  html {
    font-size: 62.5%;
  }
  body {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 812px) and (max-width: 1440px) {
  html {
    font-size: 0.6944444444vw;
  }
}
@media screen and (max-width: 811px) {
  html {
    font-size: 14px;
  }
  body {
    min-width: 320px;
    font-size: 1.3rem;
  }
}
@media screen and (max-width: 520px) {
  html {
    font-size: 2.67vw;
  }
}
/* ============================================================
/* module
============================================================ */
img {
  max-width: 100%;
  height: auto;
}

@media (hover: hover) {
  a[href^="tel:"] {
    pointer-events: none;
    text-decoration: none;
  }
}
a,
button {
  color: inherit;
  text-decoration: underline;
}

@media (hover: hover) {
  a:hover,
  button:hover {
    text-decoration: none;
  }
}
/* breakpoint only layout */
@media screen and (min-width: 812px) {
  .sp-only {
    display: none !important;
  }
}
@media screen and (max-width: 811px) {
  .pc-only {
    display: none !important;
  }
}
/* icon
============================================================ */
.m-icon-iti-goal, .m-icon-iti-plane, .m-icon-iti-treck, .m-icon-iti-taxi, .m-icon-iti-car, .m-icon-iti-ship, .m-icon-iti-bicycle, .m-icon-iti-train, .m-icon-iti-bus, .m-icon-iti-walk, .m-icon-iti-spot, .m-icon-search, .m-icon-curved-arrow, .m-icon-arrow-long, .m-icon-arrow, .m-icon-shell, .m-icon-coral, .m-icon-turtle, .m-icon-fish2, .m-icon-fish, .m-icon-tree, .m-icon-fox, .m-icon-leaf2, .m-icon-leaf, .m-icon-bird, .m-icon-facebook, .m-icon-instagram, .m-icon-chevron, .m-icon-lang, .m-arrow {
  position: relative;
  display: inline-block;
  width: 1em;
  aspect-ratio: 1/1;
  vertical-align: middle;
}
.m-icon-iti-goal:before, .m-icon-iti-plane:before, .m-icon-iti-treck:before, .m-icon-iti-taxi:before, .m-icon-iti-car:before, .m-icon-iti-ship:before, .m-icon-iti-bicycle:before, .m-icon-iti-train:before, .m-icon-iti-bus:before, .m-icon-iti-walk:before, .m-icon-iti-spot:before, .m-icon-search:before, .m-icon-curved-arrow:before, .m-icon-arrow-long:before, .m-icon-arrow:before, .m-icon-shell:before, .m-icon-coral:before, .m-icon-turtle:before, .m-icon-fish2:before, .m-icon-fish:before, .m-icon-tree:before, .m-icon-fox:before, .m-icon-leaf2:before, .m-icon-leaf:before, .m-icon-bird:before, .m-icon-facebook:before, .m-icon-instagram:before, .m-icon-chevron:before, .m-icon-lang:before, .m-arrow:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: inherit;
  background: no-repeat center center;
  background-size: contain;
}

.m-arrow:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_chevron.svg");
  mask-image: url("../img/common/icon_chevron.svg");
  background: currentColor;
}

.m-icon-lang:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_lang.svg");
  mask-image: url("../img/common/icon_lang.svg");
  background: currentColor;
}

.m-icon-chevron:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_chevron.svg");
  mask-image: url("../img/common/icon_chevron.svg");
  background: currentColor;
}

.m-icon-instagram:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_instagram.svg");
  mask-image: url("../img/common/icon_instagram.svg");
  background: currentColor;
}

.m-icon-facebook:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_facebook.svg");
  mask-image: url("../img/common/icon_facebook.svg");
  background: currentColor;
}

.m-icon-bird {
  aspect-ratio: 149/112;
}
.m-icon-bird:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_bird.svg");
  mask-image: url("../img/common/icon_bird.svg");
  background: currentColor;
}

.m-icon-leaf:before {
  background-image: url("../img/common/icon_leaf.svg");
}

.m-icon-leaf2 {
  aspect-ratio: 110/175;
}
.m-icon-leaf2:before {
  background-image: url("../img/common/icon_leaf2.svg");
}

.m-icon-fox {
  aspect-ratio: 20.7/9.9;
}
.m-icon-fox:before {
  background-image: url("../img/common/icon_fox.svg");
}

.m-icon-tree {
  aspect-ratio: 260/241;
}
.m-icon-tree:before {
  background-image: url("../img/common/icon_tree.svg");
}

.m-icon-fish {
  aspect-ratio: 136/65;
}
.m-icon-fish:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_fish.svg");
  mask-image: url("../img/common/icon_fish.svg");
  background: currentColor;
}

.m-icon-fish2 {
  aspect-ratio: 149/109;
}
.m-icon-fish2:before {
  background-image: url("../img/common/icon_fish2.svg");
}

.m-icon-turtle {
  aspect-ratio: 208/121;
}
.m-icon-turtle:before {
  background-image: url("../img/common/icon_turtle.svg");
}

.m-icon-coral {
  aspect-ratio: 149/188;
}
.m-icon-coral:before {
  background-image: url("../img/common/icon_coral.svg");
}

.m-icon-shell {
  aspect-ratio: 149/109;
}
.m-icon-shell:before {
  background-image: url("../img/common/icon_shell.svg");
}

.m-icon-arrow {
  aspect-ratio: 7/2.2;
}
.m-icon-arrow:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_arrow.svg");
  mask-image: url("../img/common/icon_arrow.svg");
  background: currentColor;
}

.m-icon-arrow-long {
  aspect-ratio: 11/2.2;
}
.m-icon-arrow-long:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_arrow_long.svg");
  mask-image: url("../img/common/icon_arrow_long.svg");
  background: currentColor;
}

.m-icon-curved-arrow {
  aspect-ratio: 126/35;
}
.m-icon-curved-arrow:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_curved_arrow.svg");
  mask-image: url("../img/common/icon_curved_arrow.svg");
  background: currentColor;
}

.m-icon-search {
  aspect-ratio: 16/13;
}
.m-icon-search:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_search.svg");
  mask-image: url("../img/common/icon_search.svg");
  background: currentColor;
}

.m-icon-iti-spot:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_iti_spot.svg");
  mask-image: url("../img/common/icon_iti_spot.svg");
  background: currentColor;
}

.m-icon-iti-walk:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_iti_walk.svg");
  mask-image: url("../img/common/icon_iti_walk.svg");
  background: currentColor;
}

.m-icon-iti-bus:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_iti_bus.svg");
  mask-image: url("../img/common/icon_iti_bus.svg");
  background: currentColor;
}

.m-icon-iti-train:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_iti_train.svg");
  mask-image: url("../img/common/icon_iti_train.svg");
  background: currentColor;
}

.m-icon-iti-bicycle:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_iti_bicycle.svg");
  mask-image: url("../img/common/icon_iti_bicycle.svg");
  background: currentColor;
}

.m-icon-iti-ship:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_iti_ship.svg");
  mask-image: url("../img/common/icon_iti_ship.svg");
  background: currentColor;
}

.m-icon-iti-car:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_iti_car.svg");
  mask-image: url("../img/common/icon_iti_car.svg");
  background: currentColor;
}

.m-icon-iti-taxi:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_iti_taxi.svg");
  mask-image: url("../img/common/icon_iti_taxi.svg");
  background: currentColor;
}

.m-icon-iti-treck:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_iti_treck.svg");
  mask-image: url("../img/common/icon_iti_treck.svg");
  background: currentColor;
}

.m-icon-iti-plane:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_iti_plane.svg");
  mask-image: url("../img/common/icon_iti_plane.svg");
  background: currentColor;
}

.m-icon-iti-goal {
  aspect-ratio: 83/102;
}
.m-icon-iti-goal:before {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_iti_goal.svg");
  mask-image: url("../img/common/icon_iti_goal.svg");
  background: currentColor;
}

/* btn
============================================================ */
.m-btn {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 100%;
  text-decoration: none;
}

/* title
============================================================ */
/* hover-opacity
============================================================ */
/* slider arrow
============================================================ */
/* loading
============================================================ */
/* loading animation
============================================================ */
@keyframes loading-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* ============================================================
/* layout
============================================================ */
@view-transition {
  navigation: auto;
}
/* inner
============================================================ */
.l-inner {
  margin: 0 auto;
}
@media screen and (min-width: 812px) {
  .l-inner {
    max-width: 122rem;
  }
}
@media screen and (max-width: 811px) {
  .l-inner {
    padding: 0 2rem;
    max-width: 520px;
  }
}

/* wrapper
============================================================ */
.l-wrapper {
  position: relative;
  z-index: 0;
}
@media screen and (min-width: 812px) {
  .l-wrapper {
    padding-top: 23rem;
  }
  .l-wrapper:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 23rem;
    background: var(--image-ptn) no-repeat center top/100% auto;
    background-color: var(--color-tertiary);
    z-index: -1;
  }
}
@media screen and (max-width: 811px) {
  .l-wrapper {
    padding-top: 7rem;
  }
}

/* container
============================================================ */
.l-container {
  background-color: #fff;
}

/* header
============================================================ */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  color: #fff;
  background: var(--image-ptn) no-repeat center top/100% auto;
  background-color: var(--color-tertiary);
  transition: height 0.3s ease, background-color 0.3s ease;
}
.l-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: height 0.3s ease;
}
@media screen and (min-width: 812px) {
  .l-header {
    height: 10rem;
    padding-left: clamp(4rem, 3.6vw, 5rem);
    padding-right: clamp(4rem, 3.6vw, 5rem);
  }
  .l-header__inner {
    height: 10rem;
  }
  .l-header__logo {
    width: 27.3rem;
    transition: width 0.3s ease;
  }
  body.is_fixed_header .l-header {
    padding-top: 0;
    height: 8rem;
  }
  body.is_fixed_header .l-header__inner {
    height: 8rem;
  }
  .l-header:has(.l-gnav__subnav[aria-hidden=false]) {
    height: 30rem;
  }
  .l-header .l-gnav__subnav {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease, visibility 0.5s ease;
  }
  .l-header:has(.l-gnav__subnav[aria-hidden=false]) .l-gnav__subnav {
    visibility: visible;
    opacity: 1;
    transition-delay: 0.2s;
  }
}
@media screen and (max-width: 811px) {
  .l-header {
    height: 7rem;
    padding: 0 2rem;
  }
  .l-header__inner {
    height: inherit;
  }
  .l-header__logo {
    width: 14rem;
    transition: margin-top 0.3s ease;
  }
}

/* gnav
============================================================ */
.l-gnav {
  --current-area-color: var(--color-primary);
}
.l-gnav__btn {
  position: relative;
}
.l-gnav__btn span {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  width: 2.5rem;
  height: 0.2rem;
  border-radius: 0.1rem;
  background: currentColor;
  transition: transform 0.2s ease;
}
.l-gnav__btn span:nth-child(1) {
  transform: translate(-50%, -50%);
}
.l-gnav__btn span:nth-child(2) {
  transform: translate(-50%, -1rem);
}
.l-gnav__btn span:nth-child(3) {
  transform: translate(-50%, 0.8rem);
}
.l-gnav__btn[aria-expanded=true] span:nth-child(1) {
  transform: translate(-50%, -50%) scale(0);
}
.l-gnav__btn[aria-expanded=true] span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.l-gnav__btn[aria-expanded=true] span:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.l-gnav__list a,
.l-gnav__list button {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}
.l-gnav__list a {
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .l-gnav__list a:hover {
    opacity: 0.7;
  }
}
@media (hover: hover) {
  .l-gnav__list button {
    transition: color 0.3s ease;
  }
  .l-gnav__list button:hover {
    color: var(--current-area-color);
  }
}
.l-gnav__list button[aria-expanded=true] {
  color: var(--current-area-color);
}
.l-gnav__subnav__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}
.l-gnav__subnav .is_current {
  color: var(--current-area-color);
}
.l-gnav__subnav a {
  white-space: nowrap;
}
@media (hover: hover) {
  .l-gnav__subnav a {
    transition: color 0.3s ease;
  }
  .l-gnav__subnav a:hover {
    opacity: 1;
    color: var(--current-area-color);
  }
}
.l-gnav__lang {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 500;
}
.l-gnav__lang__caption {
  display: flex;
  align-items: center;
  -moz-column-gap: 0.25em;
  column-gap: 0.25em;
}
.l-gnav__lang a,
.l-gnav__lang button {
  vertical-align: middle;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .l-gnav__lang a:hover,
  .l-gnav__lang button:hover {
    opacity: 0.7;
  }
}
@media screen and (min-width: 812px) {
  .l-gnav__logo, .l-gnav__btn {
    display: none;
  }
  .l-gnav__inner {
    display: flex;
    align-items: center;
    -moz-column-gap: min(7.2rem, 10vw);
    column-gap: min(7.2rem, 10vw);
  }
  .l-gnav__list {
    display: flex;
    align-items: center;
    -moz-column-gap: min(7.2rem, 10vw);
    column-gap: min(7.2rem, 10vw);
    font-size: 1.85rem;
  }
  .l-gnav__subnav {
    position: absolute;
    padding-top: 1rem;
    font-size: 1.5rem;
  }
  .l-gnav__subnav__inner {
    display: flex;
    -moz-column-gap: 4rem;
    column-gap: 4rem;
  }
  .l-gnav__subnav__inner > * {
    flex: 1;
  }
  .l-gnav__subnav__list li {
    margin-top: 0.5em;
  }
  .l-gnav__lang {
    position: relative;
    font-size: 1.85rem;
  }
  .l-gnav__lang__selector {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 10rem;
    padding: 1rem 0;
    margin-top: 2rem;
    text-align: center;
    color: var(--color-primary);
    background-color: #fff;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.15);
    transition: visibility 0.3s ease, opacity 0.3s ease;
  }
  .l-gnav__lang__selector[aria-hidden=false] {
    visibility: visible;
    opacity: 1;
  }
  .l-gnav__lang__selector li + li {
    margin-top: 0.5em;
  }
  .l-gnav__lang__selector a {
    font-weight: 500 !important;
  }
}
@media screen and (max-width: 811px) {
  .l-gnav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s ease, opacity 0.3s ease;
  }
  .l-gnav:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: -1;
  }
  body.site-theme-green .l-gnav {
    background-color: rgba(var(--color-primary-rgb), 0.8);
  }
  body.site-theme-blue .l-gnav {
    background-color: rgba(var(--color-secondary-rgb), 0.8);
  }
  .l-gnav[aria-hidden=false] {
    visibility: visible;
    opacity: 1;
  }
  .l-gnav__btn {
    width: 2.5rem;
    height: 2.5rem;
  }
  .l-gnav__outer {
    width: 100%;
    height: 100dvh;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .l-gnav__outer::-webkit-scrollbar {
    display: none;
  }
  .l-gnav__inner {
    padding: 4rem 4rem 4rem;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
  }
  .l-gnav__logo {
    width: 24rem;
    margin-bottom: 3rem;
  }
  .l-gnav__list {
    font-size: 3rem;
  }
  .l-gnav__list > li {
    padding: 0.8em 0;
    border-bottom: 1px dashed #fff;
  }
  .l-gnav__list > li:last-child {
    border-bottom: none;
  }
  .l-gnav__subnav {
    border-top: 1px dashed #fff;
    font-size: 1.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
  }
  .l-gnav__subnav__inner {
    display: flex;
  }
  .l-gnav__subnav__inner > * {
    flex: 1;
  }
  .l-gnav__subnav li {
    margin-top: 0.5em;
  }
  .l-gnav__lang {
    margin-top: 3rem;
    font-size: 1.7rem;
    -moz-column-gap: 0.5em;
    column-gap: 0.5em;
  }
  .l-gnav__lang__caption {
    margin-bottom: 0.5em;
  }
  .l-gnav__lang__selector ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    -moz-column-gap: 0.25em;
    column-gap: 0.25em;
  }
  .l-gnav__lang__selector li:not(:last-child):after {
    content: "/";
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.25em;
  }
  body.site-theme-blue .l-gnav__subnav .is_current {
    color: var(--color-primary);
  }
}

/* pagetop
============================================================ */
/* footer
============================================================ */
.l-footer {
  color: #fff;
  background-color: var(--color-primary);
}
.l-footer__nav a {
  text-decoration: none;
}
@media (hover: hover) {
  .l-footer__nav a:hover {
    text-decoration: underline;
  }
}
.l-footer__nav__area {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 0.5em;
  column-gap: 0.5em;
  row-gap: 0.25em;
}
.l-footer__nav__area li:not(:last-child):after {
  content: "/";
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5em;
}
.l-footer__nav__other dt {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
}
.l-footer .l-copyright {
  font-weight: 700;
}
.l-footer__bottom {
  color: var(--color-primary);
  background-color: #fff;
}
.l-footer__bottom a,
.l-footer__bottom button {
  text-decoration: none;
}
@media (hover: hover) {
  .l-footer__bottom a:hover,
  .l-footer__bottom button:hover {
    text-decoration: underline;
  }
}
.l-footer__government {
  display: flex;
  align-items: center;
}
.l-footer__government a {
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .l-footer__government a:hover {
    opacity: 0.7;
  }
}
.l-footer__government img {
  width: auto;
}
.l-footer__sns {
  display: flex;
  align-items: center;
}
.l-footer__sns a {
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .l-footer__sns a:hover {
    opacity: 0.7;
  }
}
.l-footer__lang {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 0.25em;
  column-gap: 0.25em;
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
}
.l-footer__lang li:not(:last-child):after {
  content: "/";
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.25em;
}
.l-footer__lang a {
  display: inline-block;
  vertical-align: middle;
}
@media screen and (min-width: 812px) {
  .l-footer__inner {
    display: flex;
    justify-content: space-between;
    padding: 5.4rem 0 3rem;
    height: 54.3rem;
  }
  .l-footer__logo {
    width: 24rem;
  }
  .l-footer__nav__area {
    max-width: 87.5rem;
    font-size: 2.3rem;
  }
  .l-footer__nav__other {
    margin-top: 8rem;
    display: flex;
    justify-content: space-between;
  }
  .l-footer__nav__other dl {
    min-width: 15em;
  }
  .l-footer__nav__other dt {
    font-size: 2rem;
    margin-bottom: 0.5em;
  }
  .l-footer__nav__other dd {
    line-height: 2;
  }
  .l-footer__nav__other dd a {
    font-size: 1.5rem;
  }
  .l-footer .l-copyright {
    line-height: 2;
    font-size: 1.5rem;
  }
  .l-footer__note {
    line-height: 2;
    font-size: 1.5rem;
  }
  .l-footer__bottom {
    margin-top: 3rem;
  }
  .l-footer__bottom .l-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10rem;
  }
  .l-footer__government {
    -moz-column-gap: 1rem;
    column-gap: 1rem;
  }
  .l-footer__government img {
    height: 3.5rem;
  }
  .l-footer__sns {
    font-size: 4.2rem;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    margin: 0 2.4rem 0 auto;
  }
  .l-footer__lang {
    max-width: 22rem;
    font-size: 2rem;
  }
}
@media screen and (max-width: 811px) {
  .l-footer__inner {
    padding: 2.5rem 0 2.5rem;
  }
  .l-footer__logo {
    width: 20rem;
    margin: 0 auto 2.5rem;
  }
  .l-footer__nav__area {
    row-gap: 0.5em;
  }
  .l-footer__nav__other {
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.5rem;
  }
  .l-footer__nav__other dt {
    margin-bottom: 0.25em;
    font-size: 1.5rem;
  }
  .l-footer__nav__other dd {
    line-height: 1.5;
  }
  .l-footer__nav__other dd + dd {
    margin-top: 0.25em;
  }
  .l-footer .l-copyright {
    text-align: center;
    font-size: 1.2rem;
  }
  .l-footer__note {
    margin-top: 1em;
    text-align: center;
    font-size: 1.2rem;
  }
  .l-footer__bottom {
    margin-top: 2rem;
    padding-top: 2rem;
    padding-bottom: 2.3rem;
    transform: translateY(2px);
  }
  .l-footer__bottom .l-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 1.5rem;
  }
  .l-footer__government {
    width: 100%;
    justify-content: center;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
  }
  .l-footer__government img {
    height: 2.6rem;
  }
  .l-footer__sns {
    font-size: 3.6rem;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
  }
  .l-footer__lang {
    font-size: 1.5rem;
  }
}

/* copyright
============================================================ */
/* breadcrumb
============================================================ */
.l-breadcrumb ul {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items: center;
  font-weight: 700;
}
.l-breadcrumb li {
  display: inline;
}
.l-breadcrumb li:nth-child(n+2):before {
  content: "/";
  display: inline-block;
  margin: 0 1em;
}
@media (hover: hover) {
  .l-breadcrumb li a:hover {
    text-decoration: none;
  }
}
/* ============================================================
/* project module
============================================================ */
/* more
============================================================ */
.m-more {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
}
.m-more span {
  display: block;
  border-bottom: 1px dashed;
}
.m-more .m-arrow {
  font-size: 50%;
}

/* more-box
============================================================ */
.m-more-box {
  display: flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  border: 1px solid;
}
.m-more-box span:first-child {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  padding: 0 0.5em;
  flex: 1;
}
.m-more-box span:last-child {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  aspect-ratio: 1/1;
  background: currentColor;
}
.m-more-box span:last-child em {
  font-size: 60%;
  color: #fff;
}
@media screen and (min-width: 812px) {
  .m-more-box {
    min-width: 9em;
    height: 4.1rem;
    font-size: 2rem;
  }
}
@media screen and (max-width: 811px) {
  .m-more-box {
    height: 2.5rem;
    font-size: 1.4rem;
  }
}

/* area-bnr
============================================================ */
.m-area-bnr {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .m-area-bnr:hover {
    opacity: 0.7;
  }
}
.m-area-bnr__ttl {
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  white-space: nowrap;
}
.m-area-bnr__image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.m-area-bnr__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.m-area-bnr__image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}
.m-area-bnr .m-more-box span:last-child {
  border-left: 1px solid;
  background-color: transparent;
}
@media screen and (min-width: 812px) {
  .m-area-bnr {
    width: 79.4rem;
    max-width: 100%;
    height: 23.9rem;
  }
  .m-area-bnr__ttl {
    font-size: 4.6rem;
  }
}
@media screen and (max-width: 811px) {
  .m-area-bnr {
    width: 100%;
    height: 10rem;
  }
  .m-area-bnr__ttl {
    font-size: 2.1rem;
  }
  .m-area-bnr .m-more-box {
    margin-top: 0.5em;
    font-size: 1.2rem;
  }
}

/* m-search-container
============================================================ */
.m-search-container__ttl {
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  color: var(--color-primary);
}
@media screen and (min-width: 812px) {
  .m-search-container {
    display: grid;
    grid-template-columns: 1fr auto auto;
    margin: 0 auto;
    max-width: 144rem;
    overflow: hidden;
  }
  .m-search-container__header {
    height: 100%;
    padding: 3rem 0 3rem 4rem;
    overflow: auto;
  }
  @supports not selector(*::-webkit-scrollbar) {
    .m-search-container__header {
      scrollbar-color: #aaa transparent;
      scrollbar-width: thin;
    }
  }
  @supports selector(*::-webkit-scrollbar) {
    .m-search-container__header::-webkit-scrollbar {
      inline-size: 0.5rem;
      block-size: 0.5rem;
    }
    .m-search-container__header::-webkit-scrollbar-thumb {
      background-color: #aaa;
      border-radius: 0;
    }
    .m-search-container__header::-webkit-scrollbar-thumb:hover {
      background-color: #aaa;
    }
    .m-search-container__header::-webkit-scrollbar-track {
      background-color: transparent;
      border-radius: 0;
    }
  }
  .m-search-container__ttl {
    margin-bottom: 3rem;
    font-size: 4rem;
  }
  .m-search-container__inner {
    position: relative;
    width: 27rem;
    height: 100%;
    padding: 3rem 2rem;
    box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.3);
    overflow: auto;
    z-index: 1;
  }
  @supports not selector(*::-webkit-scrollbar) {
    .m-search-container__inner {
      scrollbar-color: #c5c5c5 transparent;
      scrollbar-width: thin;
    }
  }
  @supports selector(*::-webkit-scrollbar) {
    .m-search-container__inner::-webkit-scrollbar {
      inline-size: 0.5rem;
      block-size: 0.5rem;
    }
    .m-search-container__inner::-webkit-scrollbar-thumb {
      background-color: #c5c5c5;
      border-radius: 0;
    }
    .m-search-container__inner::-webkit-scrollbar-thumb:hover {
      background-color: #c5c5c5;
    }
    .m-search-container__inner::-webkit-scrollbar-track {
      background-color: transparent;
      border-radius: 0;
    }
  }
  .m-search-container__map {
    width: 85rem;
  }
}
@media screen and (max-width: 811px) {
  .m-search-container {
    display: flex;
    flex-direction: column;
  }
  .m-search-container__header {
    padding-top: 2rem;
    padding-bottom: 1rem;
    order: 1;
  }
  .m-search-container__ttl {
    font-size: 4rem;
  }
  .m-search-container__map {
    order: 2;
  }
  .m-search-container__inner {
    order: 3;
  }
}

/* js-slider
============================================================ */
[data-slider] .swiper:not(.swiper-initialized),
[data-slider] .swiper:not(.swiper-initialized) ~ .js-slider__arrow,
[data-slider] .swiper:not(.swiper-initialized) ~ .js-slider__pagination {
  opacity: 0;
  visibility: hidden;
}

/* js-inview
============================================================ */
.js-inview {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}
.js-inview.isInviewed {
  opacity: 1;
  transform: translateY(0);
}

.js-inview-fade {
  opacity: 0;
  transition: opacity 1s ease;
}
.js-inview-fade.isInviewed {
  opacity: 1;
}

/* yt-video
============================================================ */
.yt-video {
  overflow: hidden;
  position: relative;
}
.yt-video > * {
  position: relative;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
}
.yt-video:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.yt-video.is-loading::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  display: block;
  width: 4rem;
  height: 4rem;
  transform: translate(-50%, -50%);
  border: 0.4rem solid rgba(255, 255, 255, 0.8);
  border-top-color: transparent;
  border-radius: 50%;
  background-image: none;
  animation: loading-spin 1s linear infinite;
  opacity: 0.8;
  z-index: 1;
}
.yt-video.is-loading:before {
  opacity: 0.8;
}
.yt-video.is-playing .yt-video__play, .yt-video.is-playing::before, .yt-video.is-playing .yt-video__mute {
  opacity: 0;
}
.yt-video.is-playing .yt-video__mute {
  visibility: hidden;
}
.yt-video.is-controlable {
  cursor: pointer;
}
.yt-video.is-controlable:hover .yt-video__play, .yt-video.is-controlable:hover::before, .yt-video.is-controlable:hover .yt-video__mute {
  opacity: 0.8;
  visibility: visible;
}
@media (hover: hover) {
  .yt-video.is-playing:hover .yt-video__play, .yt-video.is-playing:hover::before, .yt-video.is-playing:hover .yt-video__mute {
    opacity: 0.8;
    visibility: visible;
  }
}
.yt-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  background: url(../img/common/icon_play.svg) no-repeat center center/contain;
  z-index: 1;
  cursor: pointer;
}
.yt-video.is-playing .yt-video__play {
  background-image: url(../img/common/icon_pause.svg);
}
.yt-video.is-loading .yt-video__play {
  opacity: 0;
}
.yt-video__mute {
  position: absolute;
  top: auto;
  left: auto;
  bottom: 0;
  right: 1rem;
  width: 4rem;
  height: 3rem;
  opacity: 0.8;
  z-index: 1;
  color: #fff;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_volume_high.svg");
  mask-image: url("../img/common/icon_volume_high.svg");
  background: currentColor;
}
.yt-video__mute.is-muted {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_volume_off.svg");
  mask-image: url("../img/common/icon_volume_off.svg");
  background: currentColor;
}
@media screen and (min-width: 812px) {
  .yt-video__play {
    width: 11rem;
    height: 11rem;
  }
}
@media screen and (max-width: 811px) {
  .yt-video__play {
    width: 6rem;
    height: 6rem;
  }
}

/* loading animation
============================================================ */
@keyframes loading-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* ============================================================
/* top page
============================================================ */
.l-wrapper:has(.sc-top) {
  padding-top: 0;
}

.l-wrapper:has(.sc-top) .l-header {
  background: #fff;
}

@media screen and (min-width: 812px) {
  .l-wrapper:has(.sc-top) .l-gnav__list,
  .l-wrapper:has(.sc-top) .l-gnav__lang__caption {
    color: var(--color-base);
  }
}
@media screen and (max-width: 811px) {
  .l-wrapper:has(.sc-top) .l-header .l-gnav__btn {
    color: var(--color-base);
  }
  .l-wrapper:has(.sc-top) .l-header .l-gnav__btn[aria-expanded=true] {
    color: #fff;
  }
}
.sc-top__header {
  position: relative;
  z-index: 0;
}
.sc-top__header__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.sc-top__header__image .swiper {
  z-index: -1;
}
.sc-top__header__image .swiper,
.sc-top__header__image .swiper-wrapper,
.sc-top__header__image .swiper-slide {
  height: 100%;
}
.sc-top__header__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.sc-top__header__image__item {
  position: relative;
  height: 100%;
}
.sc-top__header__image__item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.sc-top__header__image__item figcaption {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1em;
  transform-origin: center top;
  transform: translate(50%, -50%) rotate(90deg);
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: transparent;
  background-color: var(--color-secondary);
  box-shadow: 0.5rem -0.5rem 0.4rem 0 rgba(0, 0, 0, 0.25);
  transition: color 1s ease;
}
.sc-top__header__image__item figcaption em {
  font-size: 110%;
  margin-top: 0.1em;
}
.swiper-slide-active .sc-top__header__image__item figcaption {
  color: #fff;
}
.sc-top__header__inner {
  position: relative;
  z-index: 1;
  color: #fff;
}
.sc-top__ttl {
  display: flex;
  flex-direction: column;
}
.sc-top__ttl .main {
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 0.8;
  text-transform: uppercase;
}
.sc-top__ttl .sub {
  font-weight: 400;
}
@media screen and (min-width: 812px) {
  .sc-top {
    padding-top: 10rem;
  }
  .sc-top__header {
    height: 88.4rem;
  }
  .sc-top__header .l-inner {
    max-width: 132.6rem;
    display: flex;
    flex-direction: row-reverse;
    -moz-column-gap: 5rem;
    column-gap: 5rem;
  }
  .sc-top__header__image__item:before {
    height: 40rem;
  }
  .sc-top__header__image__item figcaption {
    font-size: 2rem;
    height: 5.4rem;
    border-radius: 0 0 2rem 2rem;
  }
  .sc-top__header__inner {
    padding-top: 7.8rem;
  }
  .sc-top__ttl {
    flex: 1;
  }
  .sc-top__ttl .sub {
    font-size: 2.8rem;
  }
  .sc-top__ttl .main {
    font-size: 8rem;
  }
  .sc-top__inner {
    padding-bottom: 10rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-top {
    padding-top: 7rem;
  }
  .sc-top__header__image {
    height: 40.9rem;
  }
  .sc-top__header__image__item:before {
    height: 20rem;
  }
  .sc-top__header__image__item figcaption {
    font-size: 1rem;
    height: 2.7rem;
    border-radius: 0 0 1rem 1rem;
  }
  .sc-top__header__inner {
    padding-top: 4.1rem;
  }
  .sc-top__ttl {
    height: 19rem;
    text-align: center;
  }
  .sc-top__ttl .sub {
    font-size: 1.5rem;
  }
  .sc-top__ttl .main {
    font-size: 4.5rem;
  }
  .sc-top__inner {
    padding-bottom: 4rem;
  }
}

/* top movie
============================================================ */
.sc-top-movie {
  position: relative;
  z-index: 0;
  color: #fff;
}
.sc-top-movie:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-secondary);
  opacity: 0.8;
  z-index: -1;
}
.sc-top-movie__video {
  position: relative;
}
.sc-top-movie__video .yt-video {
  width: 100%;
  height: 100%;
}
.sc-top-movie__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.sc-top-movie__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
}
.sc-top-movie__content a {
  font-weight: 600;
}
.sc-top-movie__info .swiper-slide {
  opacity: 0 !important;
  transition: opacity 0.3s ease;
}
.sc-top-movie__info .swiper-slide.swiper-slide-active {
  opacity: 1 !important;
}
.sc-top-movie__ttl {
  transform: translateX(20px);
  transition: transform 1s ease 0.3s;
}
.sc-top-movie__info .swiper-slide-active .sc-top-movie__ttl {
  transform: translateX(0);
  transition: transform 1s ease;
}
.sc-top-movie__content {
  transform: translateX(20px);
  transition: transform 1s ease 0.3s;
}
.sc-top-movie__info .swiper-slide-active .sc-top-movie__content {
  transform: translateX(0);
  transition: transform 1s ease;
}
@media screen and (min-width: 812px) {
  .sc-top-movie {
    width: 33.5rem;
    padding: 2.9rem 3.5rem;
  }
  .sc-top-movie:before {
    opacity: 0.7;
  }
  .sc-top-movie__video {
    margin-bottom: 1.7rem;
    aspect-ratio: 26.8/40.3;
    background-color: #000;
  }
  .sc-top-movie__ttl {
    font-size: 2rem;
  }
  .sc-top-movie__content {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-top-movie {
    width: 26.2rem;
    padding: 2.2rem 2.5rem;
    margin: 0 auto 0;
  }
  .sc-top-movie__video {
    margin-bottom: 1.2rem;
    aspect-ratio: 41.9/63.1;
    background-color: #000;
  }
  .sc-top-movie__ttl {
    font-size: 1.25rem;
  }
  .sc-top-movie__content {
    font-size: 1.25rem;
  }
}

/* top lead
============================================================ */
.sc-top-lead__ttl {
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  line-height: 0.8;
  color: var(--color-secondary);
}
@media screen and (min-width: 812px) {
  .sc-top-lead .l-inner {
    display: flex;
    justify-content: space-between;
  }
  .sc-top-lead__inner {
    width: 53rem;
    margin-left: -5rem;
  }
  .sc-top-lead__ttl {
    margin: 8.7rem 0 4.7rem;
    font-size: 5.6rem;
  }
  .sc-top-lead__text {
    font-size: 2rem;
    width: 51rem;
    min-height: 26.6rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-top-lead {
    padding-top: 4rem;
  }
  .sc-top-lead__ttl {
    margin-bottom: 2rem;
    font-size: 3.8rem;
    text-align: center;
  }
  .sc-top-lead__text {
    text-align: center;
  }
}

/* top map-nav
============================================================ */
.sc-top-map-nav__caption {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.sc-top-map-nav__list {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}
.sc-top-map-nav__list li + li {
  border-top: 1px dotted var(--color-base);
}
.sc-top-map-nav__list a {
  display: block;
  align-items: center;
  text-decoration: none;
  -moz-column-gap: 0.5rem;
  column-gap: 0.5rem;
  white-space: nowrap;
  color: var(--color-tertiary);
  transition: color 0.3s ease;
}
.sc-top-map-nav__list .m-arrow {
  color: var(--color-base);
  font-size: 0.8rem;
  display: none;
}
.sc-top-map-nav__list a.active {
  color: var(--color-primary);
}
.sc-top-map-nav__list a.active .m-arrow {
  display: block;
}
.sc-top-map-nav__list .text-active {
  display: none;
}
.sc-top-map-nav__list a.active .text-active {
  display: inline-flex;
  align-items: center;
  -moz-column-gap: 0.4rem;
  column-gap: 0.4rem;
}
.sc-top-map-nav__list a.active .text-deactive {
  display: none;
}
@media screen and (min-width: 812px) {
  .sc-top-map-nav__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 3rem;
    column-gap: 3rem;
    font-size: 2rem;
  }
  .sc-top-map-nav__list a {
    padding: 0.5em 0;
  }
}
@media screen and (max-width: 811px) {
  .sc-top-map-nav {
    display: none;
  }
}

/* top map
============================================================ */
.sc-top-map__image svg {
  width: 100%;
  height: auto;
}
.sc-top-map__image svg .line {
  pointer-events: none;
}
.sc-top-map__image svg .hidden {
  opacity: 0;
}
.sc-top-map__image svg .hidden.area {
  fill: #000;
}
.sc-top-map__image svg .area {
  cursor: pointer;
}
.sc-top-map__image svg .area-image {
  transition: fill 0.3s ease;
}
.sc-top-map__image svg .area-image g,
.sc-top-map__image svg .area-image path {
  fill: inherit !important;
}
.sc-top-map__image svg .area-text {
  pointer-events: none;
  transition: fill 0.3s ease;
}
.sc-top-map__image svg .area-text text {
  fill: inherit;
  pointer-events: inherit;
}
.sc-top-map__image svg .area-balloon {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sc-top-map__image svg .area-balloon.active {
  opacity: 1;
}
body.site-theme-green .sc-top-map__image svg .area-image {
  fill: var(--color-quaternary) !important;
}
body.site-theme-green .sc-top-map__image svg .area-image.active {
  fill: var(--color-primary) !important;
}
body.site-theme-green .sc-top-map__image svg .area-text {
  fill: var(--color-primary);
}
body.site-theme-green .sc-top-map__image svg .area-text.active {
  fill: #fff;
}
body.site-theme-green .sc-top-map__image svg .area-text.active[data-name=mizuho-fussa-hamura] {
  fill: var(--color-primary);
}
body.site-theme-blue .sc-top-map__image svg .area-text,
body.site-theme-blue .sc-top-map__image svg .area-image {
  fill: var(--color-secondary) !important;
}
body.site-theme-blue .sc-top-map__image svg .area-text.active,
body.site-theme-blue .sc-top-map__image svg .area-image.active {
  fill: var(--color-primary) !important;
}
@media screen and (min-width: 812px) {
  .sc-top-map {
    padding-bottom: 27.6rem;
  }
  .sc-top-map__image {
    position: relative;
    z-index: 1;
    width: 63rem;
    margin-top: -6.4rem;
  }
  .sc-top-map__list {
    width: 54rem;
    margin: -6.5rem 0 0 -6.5rem;
  }
  .sc-top-map__list .js-slider__arrow {
    display: none;
  }
}
@media screen and (max-width: 811px) {
  .sc-top-map {
    padding-top: 4rem;
  }
  .sc-top-map__image {
    margin: 0 -2rem;
  }
  .sc-top-map__list {
    position: relative;
    margin: 0 -2rem;
  }
  .sc-top-map__list .js-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/2;
    color: var(--color-primary);
    background-color: #fff;
    box-shadow: 0 1.6rem 3.2rem rgba(0, 0, 0, 0.4);
    z-index: 1;
  }
  .sc-top-map__list .js-slider__arrow-prev {
    border-radius: 0 100% 100% 0/50%;
  }
  .sc-top-map__list .js-slider__arrow-prev .m-arrow {
    transform: scaleX(-1);
  }
  .sc-top-map__list .js-slider__arrow-next {
    border-radius: 100% 0 0 100%/50%;
  }
}
@media screen and (max-width: 811px) and (min-width: 812px) {
  .sc-top-map__list .js-slider__arrow {
    width: 4.6rem;
    font-size: 2.2rem;
  }
  .sc-top-map__list .js-slider__arrow-prev {
    left: 0;
  }
  .sc-top-map__list .js-slider__arrow-next {
    right: 0;
  }
}
@media screen and (max-width: 811px) and (min-width: 1700px) {
  .sc-top-map__list .js-slider__arrow {
    border-radius: 50%;
    width: 9.2rem;
    aspect-ratio: 1/1;
  }
  .sc-top-map__list .js-slider__arrow-prev {
    left: auto;
    right: calc(50% + 75rem);
  }
  .sc-top-map__list .js-slider__arrow-next {
    right: auto;
    left: calc(50% + 75rem);
  }
}
@media screen and (max-width: 811px) and (max-width: 811px) {
  .sc-top-map__list .js-slider__arrow {
    width: 2.3rem;
    font-size: 1.6rem;
  }
  .sc-top-map__list .js-slider__arrow-prev {
    left: 0;
    padding-right: 0.5em;
  }
  .sc-top-map__list .js-slider__arrow-next {
    right: 0;
    padding-left: 0.5em;
  }
}

.sc-top-map__item {
  background-color: #fff;
}
.sc-top-map__item__link {
  position: relative;
  display: block;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .sc-top-map__item__link:hover {
    opacity: 0.7;
  }
}
.sc-top-map__item__inner {
  position: relative;
  z-index: 0;
  color: #fff;
}
.sc-top-map__item__inner:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-primary);
  z-index: -1;
  mix-blend-mode: multiply;
}
body.site-theme-blue .sc-top-map__item__inner:before {
  opacity: 0.8;
  background-color: var(--color-blue-primary);
}
.sc-top-map__item__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.sc-top-map__item__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
@media screen and (min-width: 812px) {
  .sc-top-map__item__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    -moz-column-gap: 2.6rem;
    column-gap: 2.6rem;
    padding: 3.2rem 2.4rem 3.2rem 3.6rem;
  }
  .sc-top-map__item__image {
    width: 16.1rem;
    aspect-ratio: 16.1/16.7;
  }
  .sc-top-map__item__block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .sc-top-map__item__ttl {
    margin-bottom: 1em;
    font-size: 2rem;
  }
  .sc-top-map__item__text {
    font-size: 1.5rem;
    margin-bottom: auto;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }
}
@media screen and (max-width: 811px) {
  .sc-top-map__item__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    -moz-column-gap: 2rem;
    column-gap: 2rem;
    padding: 2.1rem 2.5rem 2.1rem 2rem;
  }
  .sc-top-map__item__image {
    width: 14rem;
    aspect-ratio: 276/318;
  }
  .sc-top-map__item__block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .sc-top-map__item__ttl {
    margin-bottom: 0.5em;
    font-size: 2rem;
  }
  .sc-top-map__item__text {
    margin-bottom: auto;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
  }
}

/* top sibling
============================================================ */
.sc-top-sibling__link {
  position: relative;
  display: block;
  text-decoration: none;
  z-index: 1;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .sc-top-sibling__link:hover {
    opacity: 0.7;
  }
}
.sc-top-sibling__inner {
  display: grid;
  grid-template-columns: 1fr auto;
}
.sc-top-sibling__image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  border-radius: 50%;
}
body.site-theme-green .sc-top-sibling__image {
  background-color: var(--color-sibling-quaternary);
}
body.site-theme-blue .sc-top-sibling__image {
  background-color: #e9f1d4;
}
.sc-top-sibling__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  color: var(--color-sibling-secondary);
}
.sc-top-sibling .m-icon-curved-arrow {
  position: absolute;
  color: var(--color-sibling-secondary);
  pointer-events: none;
  z-index: 1;
}
.sc-top-sibling .m-icon-fish {
  position: absolute;
  color: var(--color-sibling-primary);
  pointer-events: none;
  z-index: 1;
}
.sc-top-sibling .m-icon-bird {
  position: absolute;
  color: var(--color-sibling-tertiary);
  pointer-events: none;
  z-index: 1;
}
@media screen and (min-width: 812px) {
  .sc-top-sibling .l-inner {
    position: relative;
  }
  .sc-top-sibling__inner {
    position: absolute;
    right: 0;
    bottom: -6.6rem;
    width: 66rem;
    -moz-column-gap: 3.5rem;
    column-gap: 3.5rem;
    z-index: 1;
  }
  .sc-top-sibling__block {
    margin-top: 2rem;
  }
  .sc-top-sibling__ttl {
    margin-bottom: 1rem;
    font-size: 3rem;
  }
  .sc-top-sibling__text {
    font-size: 1.5rem;
  }
  .sc-top-sibling__image {
    width: 32.4rem;
  }
  .sc-top-sibling__image img {
    width: 19rem;
  }
  .sc-top-sibling .m-icon-curved-arrow {
    width: 43%;
    top: 5%;
    right: 78%;
  }
  .sc-top-sibling .m-icon-fish {
    width: 45%;
    top: -4%;
    left: 56%;
  }
  .sc-top-sibling .m-icon-bird {
    width: 45%;
    top: -15%;
    left: 60%;
  }
}
@media screen and (max-width: 811px) {
  .sc-top-sibling {
    padding: 5rem 0;
  }
  .sc-top-sibling__inner {
    -moz-column-gap: 1rem;
    column-gap: 1rem;
  }
  .sc-top-sibling__ttl {
    margin-bottom: 1rem;
    font-size: 2rem;
  }
  .sc-top-sibling__image {
    width: 13rem;
  }
  .sc-top-sibling__image img {
    width: 9rem;
  }
  .sc-top-sibling .m-icon-curved-arrow {
    width: 43%;
    top: 5%;
    right: 78%;
  }
  .sc-top-sibling .m-icon-fish {
    width: 45%;
    top: -4%;
    left: 56%;
  }
  .sc-top-sibling .m-icon-bird {
    width: 45%;
    top: -4%;
    left: 56%;
  }
}

/* top area
============================================================ */
.sc-top-area {
  position: relative;
  color: #fff;
}
.sc-top-area__wrapper {
  position: relative;
  overflow: hidden;
}
.sc-top-area__ttl {
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
}
.sc-top-area__list .js-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/2;
  color: var(--color-primary);
  background-color: #fff;
  box-shadow: 0 1.6rem 3.2rem rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.sc-top-area__list .js-slider__arrow-prev {
  border-radius: 0 100% 100% 0/50%;
}
.sc-top-area__list .js-slider__arrow-prev .m-arrow {
  transform: scaleX(-1);
}
.sc-top-area__list .js-slider__arrow-next {
  border-radius: 100% 0 0 100%/50%;
}
@media screen and (min-width: 812px) {
  .sc-top-area__list .js-slider__arrow {
    width: 4.6rem;
    font-size: 2.2rem;
  }
  .sc-top-area__list .js-slider__arrow-prev {
    left: 0;
  }
  .sc-top-area__list .js-slider__arrow-next {
    right: 0;
  }
}
@media screen and (min-width: 1700px) {
  .sc-top-area__list .js-slider__arrow {
    border-radius: 50%;
    width: 9.2rem;
    aspect-ratio: 1/1;
  }
  .sc-top-area__list .js-slider__arrow-prev {
    left: auto;
    right: calc(50% + 75rem);
  }
  .sc-top-area__list .js-slider__arrow-next {
    right: auto;
    left: calc(50% + 75rem);
  }
}
@media screen and (max-width: 811px) {
  .sc-top-area__list .js-slider__arrow {
    width: 2.3rem;
    font-size: 1.6rem;
  }
  .sc-top-area__list .js-slider__arrow-prev {
    left: 0;
    padding-right: 0.5em;
  }
  .sc-top-area__list .js-slider__arrow-next {
    right: 0;
    padding-left: 0.5em;
  }
}
.sc-top-area .m-icon-bird {
  position: absolute;
  color: #86b3e0;
  z-index: 1;
  pointer-events: none;
}
.sc-top-area .m-icon-fish {
  position: absolute;
  color: var(--color-primary);
  z-index: 1;
  pointer-events: none;
}
body.site-theme-green .sc-top-area {
  background-color: var(--color-primary);
}
body.site-theme-blue .sc-top-area {
  background-color: var(--color-secondary);
}
@media screen and (min-width: 812px) {
  .sc-top-area {
    padding: 7rem 0;
  }
  .sc-top-area__ttl {
    font-size: 5.6rem;
  }
  .sc-top-area__list {
    margin: 3.5rem -20rem 0;
  }
  .sc-top-area__list .swiper-slide {
    width: 31.9rem;
    padding: 0 2.8rem;
  }
  .sc-top-area .m-icon-bird {
    width: 15rem;
    top: -6rem;
    left: calc(50% - 25rem);
  }
  .sc-top-area .m-icon-fish {
    width: 15rem;
    top: -4.7rem;
    left: calc(50% - 25rem);
  }
}
@media screen and (max-width: 811px) {
  .sc-top-area {
    padding: 3.5rem 0;
  }
  .sc-top-area .l-inner {
    max-width: 100%;
  }
  .sc-top-area__ttl {
    font-size: 3.3rem;
  }
  .sc-top-area__list {
    margin: 2rem -2rem 0;
  }
  .sc-top-area__list .swiper-slide {
    width: 21rem;
    padding: 0 1.1rem;
    transition: opacity 0.3s ease;
  }
  .sc-top-area__list .swiper-slide:not(.swiper-slide-active) {
    opacity: 0.5;
  }
  .sc-top-area .m-icon-bird {
    width: 7.5rem;
    top: -3rem;
    left: calc(50% + 10rem);
  }
  .sc-top-area .m-icon-fish {
    width: 10rem;
    top: -1.8rem;
    left: calc(50% + 1rem);
  }
}

.sc-top-area__item__link {
  display: block;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .sc-top-area__item__link:hover {
    opacity: 0.7;
  }
}
.sc-top-area__item__image {
  position: relative;
}
.sc-top-area__item__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.sc-top-area__item__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
}
body.site-theme-green .sc-top-area__item__more {
  color: var(--color-quaternary);
}
body.site-theme-blue .sc-top-area__item__more {
  color: var(--color-primary);
}
@media screen and (min-width: 812px) {
  .sc-top-area__item__image {
    margin-bottom: 1.5rem;
    aspect-ratio: 261/465;
  }
  .sc-top-area__item__ttl {
    font-size: 2.4rem;
  }
  .sc-top-area__item__more {
    margin-top: 0.5em;
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-top-area__item__image {
    margin-bottom: 0.9rem;
    aspect-ratio: 440/465;
  }
  .sc-top-area__item__ttl {
    font-size: 1.6rem;
  }
  .sc-top-area__item__more {
    margin-top: 0.5em;
    font-size: 1.3rem;
  }
}

/* top cnav
============================================================ */
.sc-top-cnav__ttl {
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.sc-top-cnav__list {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  color: var(--color-primary);
}
.sc-top-cnav__list li + li {
  border-top: 1px dotted var(--color-base);
}
.sc-top-cnav__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .sc-top-cnav__list a:hover {
    opacity: 0.7;
  }
}
@media screen and (min-width: 812px) {
  .sc-top-cnav {
    padding: 9rem 0 12rem;
  }
  .sc-top-cnav__block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .sc-top-cnav__ttl {
    margin-bottom: 5rem;
    font-size: 5.6rem;
  }
  .sc-top-cnav__inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 7rem;
    column-gap: 7rem;
  }
  .sc-top-cnav__list {
    font-size: 3.8rem;
  }
  .sc-top-cnav__list li + li {
    margin-top: 1.6rem;
    padding-top: 1.6rem;
  }
  .sc-top-cnav__list a .m-icon-arrow-long {
    font-size: 11rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-top-cnav {
    padding-top: 3.8rem;
  }
  .sc-top-cnav__ttl {
    margin-bottom: 1.5rem;
    font-size: 3.3rem;
  }
  .sc-top-cnav__block:last-child {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem 6.8rem;
    row-gap: 2rem;
  }
  .sc-top-cnav__list {
    font-size: 2.5rem;
  }
  .sc-top-cnav__list li + li {
    margin-top: 1rem;
    padding-top: 1rem;
  }
  .sc-top-cnav__list a .m-icon-arrow-long {
    font-size: 5rem;
  }
}

/* top articles
============================================================ */
.sc-top-articles__link {
  position: relative;
  display: block;
  height: 100%;
  text-decoration: none;
  box-shadow: 0 0.4rem 2.3rem 0 rgba(0, 0, 0, 0.15);
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .sc-top-articles__link:hover {
    opacity: 0.7;
  }
}
.sc-top-articles__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 100%;
}
.sc-top-articles__image {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.sc-top-articles__tag {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1em;
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  color: #fff;
  background-color: var(--color-primary);
}
.sc-top-articles__ttl {
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: var(--color-tertiary);
}
.sc-top-articles .m-more-box {
  color: var(--color-primary);
}
body.site-theme-green .sc-top-articles__image {
  background-color: var(--color-quaternary);
}
body.site-theme-blue .sc-top-articles__image {
  background-color: #8ccbd3;
}
@media screen and (min-width: 812px) {
  .sc-top-articles {
    height: 22.2rem;
  }
  .sc-top-articles__image {
    font-size: 16rem;
  }
  .sc-top-articles__block {
    padding: 7rem 2rem 0;
  }
  .sc-top-articles__tag {
    height: 4.2rem;
    font-size: 2rem;
  }
  .sc-top-articles__ttl {
    margin-bottom: 1rem;
    font-size: 6.5rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-top-articles {
    height: 13rem;
  }
  .sc-top-articles__inner {
    grid-template-columns: 1fr auto;
  }
  .sc-top-articles__image {
    font-size: 8.5rem;
    width: 14rem;
  }
  .sc-top-articles__block {
    padding: 4.75rem 1rem 0;
  }
  .sc-top-articles__tag {
    height: 3.2rem;
    padding: 0 0.5em;
    font-size: 2rem;
  }
  .sc-top-articles__ttl {
    margin-bottom: 0.75rem;
    font-size: 3.25rem;
  }
}

/* top instagram
============================================================ */
.sc-top-insta {
  position: relative;
  background: var(--image-ptn) no-repeat center center/cover;
  background-color: var(--color-tertiary);
}
.sc-top-insta__ttl {
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  color: #fff;
}
.sc-top-insta__follow {
  position: relative;
}
.sc-top-insta__follow__link {
  display: block;
  height: 100%;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .sc-top-insta__follow__link:hover {
    opacity: 0.7;
  }
}
.sc-top-insta__follow__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: center;
  text-align: center;
  background-color: #fff;
}
.sc-top-insta__follow .m-icon-instagram {
  color: var(--color-primary);
}
.sc-top-insta__follow__ttl {
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: var(--color-tertiary);
  line-height: 0.8;
}
.sc-top-insta__follow__name {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  line-height: 0.8;
  color: var(--color-primary);
}
.sc-top-insta .m-icon-leaf2,
.sc-top-insta .m-icon-fox,
.sc-top-insta .m-icon-tree,
.sc-top-insta .m-icon-fish2,
.sc-top-insta .m-icon-turtle,
.sc-top-insta .m-icon-coral {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
@media screen and (min-width: 812px) {
  .sc-top-insta {
    padding: 8rem 0 16rem;
  }
  .sc-top-insta__ttl {
    margin-bottom: 4rem;
    font-size: 5.6rem;
  }
  .sc-top-insta__inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 7rem;
    column-gap: 7rem;
  }
  .sc-top-insta__follow {
    height: 100%;
  }
  .sc-top-insta__follow .m-icon-instagram {
    font-size: 7rem;
  }
  .sc-top-insta__follow__ttl {
    margin-top: 3rem;
    font-size: 6.8rem;
  }
  .sc-top-insta__follow__name {
    font-size: 4.4rem;
  }
  .sc-top-insta .m-icon-leaf2 {
    top: -9rem;
    right: 0;
    width: 11rem;
  }
  .sc-top-insta .m-icon-fox {
    top: calc(100% - 1rem);
    left: 0;
    width: 20.7rem;
  }
  .sc-top-insta .m-icon-tree {
    top: -14rem;
    left: calc(50% + 38rem);
    width: 26rem;
  }
  .sc-top-insta .m-icon-fish2 {
    top: 6rem;
    right: -6rem;
    width: 15rem;
  }
  .sc-top-insta .m-icon-turtle {
    top: calc(100% - 4rem);
    left: -4rem;
    width: 20.8rem;
  }
  .sc-top-insta .m-icon-coral {
    top: -6rem;
    left: calc(50% + 50rem);
    width: 15rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-top-insta {
    padding: 4rem 0;
  }
  .sc-top-insta__ttl {
    margin-bottom: 2.5rem;
    font-size: 3.3rem;
  }
  .sc-top-insta__inner {
    display: flex;
    flex-direction: column;
    row-gap: 4rem;
    padding: 0 1.5rem;
  }
  .sc-top-insta__follow__inner {
    padding: 2rem 0 5rem;
  }
  .sc-top-insta__follow .m-icon-instagram {
    font-size: 5rem;
  }
  .sc-top-insta__follow__ttl {
    margin-top: 2rem;
    font-size: 5rem;
  }
  .sc-top-insta__follow__name {
    margin-top: 1.5rem;
    font-size: 3.8rem;
  }
  .sc-top-insta .m-icon-leaf2 {
    top: -3rem;
    right: 1.5rem;
    width: 6rem;
  }
  .sc-top-insta .m-icon-fox {
    top: calc(100% - 3.3rem);
    left: -2rem;
    width: 11rem;
  }
  .sc-top-insta .m-icon-tree {
    top: -4rem;
    left: calc(50% + 7rem);
    width: 11rem;
  }
  .sc-top-insta .m-icon-fish2 {
    top: -2rem;
    right: -2rem;
    width: 7.5rem;
  }
  .sc-top-insta .m-icon-turtle {
    top: calc(100% - 3.6rem);
    left: -3rem;
    width: 9rem;
  }
  .sc-top-insta .m-icon-coral {
    top: -3rem;
    left: calc(50% + 7rem);
    width: 7.5rem;
  }
}

/* top related
============================================================ */
.sc-top-related__ttl {
  color: var(--color-secondary);
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
}
@media screen and (min-width: 812px) {
  .sc-top-related {
    padding-top: 8rem;
  }
  .sc-top-related__ttl {
    margin-bottom: 8rem;
    font-size: 5.6rem;
  }
  .sc-top-related__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 3.6rem;
    column-gap: 3.6rem;
    row-gap: 4.6rem;
    margin: 0 -4.4rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-top-related {
    padding-top: 4rem;
  }
  .sc-top-related__ttl {
    margin-bottom: 2rem;
    font-size: 3.3rem;
  }
  .sc-top-related__list {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
  }
}

.sc-top-related__item__link {
  display: block;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .sc-top-related__item__link:hover {
    opacity: 0.7;
  }
}
.sc-top-related__item__image {
  position: relative;
  aspect-ratio: 412/226;
}
.sc-top-related__item__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.sc-top-related__item__tag {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1em;
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  color: #fff;
  background-color: var(--color-primary);
}
.sc-top-related__item__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  color: var(--color-primary);
}
.sc-top-related__item__more {
  color: var(--color-tertiary);
}
@media screen and (min-width: 812px) {
  .sc-top-related__item__image {
    margin-bottom: 1.5rem;
  }
  .sc-top-related__item__tag {
    height: 4.2rem;
    font-size: 2rem;
  }
  .sc-top-related__item__ttl {
    font-size: 2rem;
  }
  .sc-top-related__item__text {
    margin-top: 0.5em;
    font-size: 1.5rem;
  }
  .sc-top-related__item__more {
    margin-top: 0.5em;
    font-size: 2rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-top-related__item__image {
    margin-bottom: 0.9rem;
  }
  .sc-top-related__item__tag {
    height: 3.2rem;
    font-size: 2rem;
  }
  .sc-top-related__item__ttl {
    font-size: 2rem;
  }
  .sc-top-related__item__text {
    margin-top: 0.5em;
    font-size: 1.3rem;
  }
  .sc-top-related__item__more {
    margin-top: 0.5em;
    font-size: 1.8rem;
  }
}

/* quiz
============================================================ */
.sc-quiz {
  position: relative;
  color: var(--color-primary);
  background-color: var(--color-quaternary);
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .sc-quiz:hover {
    opacity: 0.7;
  }
}
.sc-quiz__inner {
  position: relative;
}
.sc-quiz__tag {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1em;
  width: -moz-fit-content;
  width: fit-content;
}
.sc-quiz__ttl {
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  line-height: 0.8;
}
.sc-quiz__sub {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
}
.sc-quiz .m-icon-bird {
  position: absolute;
  color: #e3aece;
  transform: scale(-1, 1);
}
.sc-quiz button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
body.site-theme-green .sc-quiz {
  background-color: var(--color-quaternary);
}
body.site-theme-blue .sc-quiz {
  background-color: #8ccbd3;
}
body.site-theme-blue .sc-quiz__ttl {
  color: #fff;
}
@media screen and (min-width: 812px) {
  .sc-quiz {
    padding: 7rem 0 2.5rem 3.8rem;
  }
  .sc-quiz__tag {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    height: 4.2rem;
    font-size: 2rem;
    background-color: var(--color-primary);
  }
  .sc-quiz__ttl {
    font-size: 7.5rem;
  }
  .sc-quiz__sub {
    margin-bottom: 3rem;
    font-size: 3rem;
  }
  .sc-quiz__image {
    position: absolute;
    bottom: 1rem;
    right: 4rem;
    width: 18rem;
  }
  .sc-quiz .m-icon-bird {
    width: 13rem;
    top: -12rem;
    right: 4rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-quiz {
    padding: 2.5rem 0 3rem;
    text-align: center;
    margin: 0 -2rem;
  }
  .sc-quiz__tag {
    border: 1px solid;
    margin: 0 auto;
    padding: 0 0.5em;
    font-size: 2rem;
  }
  .sc-quiz__ttl {
    font-size: 3.8rem;
  }
  .sc-quiz__sub {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
  }
  .sc-quiz__image {
    width: 8.4rem;
    margin: 1rem auto;
  }
  .sc-quiz .m-more-box {
    margin: 0 auto;
  }
  .sc-quiz .m-icon-bird {
    width: 7rem;
    top: -3rem;
    right: 2rem;
  }
}

dialog[open] {
  animation: fadein 0.3s ease forwards;
}

@keyframes fadein {
  0% {
    opacity: 0;
    transform: translateY(10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.modal-quiz {
  position: relative;
  padding: 0;
}
.modal-quiz::backdrop {
  background-color: rgba(0, 0, 0, 0.3);
}
.modal-quiz .js-modal__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 4.4rem;
  height: 4.4rem;
  color: #fff;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-quiz .js-modal__close span {
  position: relative;
  display: block;
  width: 0.75rem;
  height: 1.5rem;
}
.modal-quiz .js-modal__close span:before, .modal-quiz .js-modal__close span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0.2rem;
  background-color: #fff;
  transform-origin: center center;
}
.modal-quiz .js-modal__close span:before {
  transform: rotate(45deg);
}
.modal-quiz .js-modal__close span:after {
  transform: rotate(-45deg);
}
.modal-quiz__inner {
  background-color: #fff;
}
.modal-quiz__list {
  position: relative;
}
.modal-quiz__progress {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: space-between;
  align-items: center;
  row-gap: 1.5rem;
}
.modal-quiz__progress__caption {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  font-size: 1.2rem;
  color: var(--color-tertiary);
}
.modal-quiz__progress__bar {
  position: relative;
  grid-column: span 2;
  background-color: rgba(58, 122, 99, 0.2);
  height: 0.6rem;
  border-radius: 0.6rem;
}
.modal-quiz__progress__bar__point {
  background-color: var(--color-tertiary);
  height: 100%;
}
.modal-quiz__progress__bar:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--progress-percent);
  height: 100%;
  border-radius: inherit;
  background-color: var(--color-tertiary);
  transition: width 0.5s ease;
}
.modal-quiz__progress__bar:after {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--progress-percent);
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background-color: var(--color-tertiary);
  transform: translate(-50%, -50%);
  transition: left 0.5s ease;
}
.modal-quiz.is-loading .modal-quiz__inner:before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  display: block;
  width: 4rem;
  height: 4rem;
  transform: translate(-50%, -50%);
  border: 0.4rem solid rgba(255, 255, 255, 0.8);
  border-top-color: transparent;
  border-radius: 50%;
  background-image: none;
  animation: loading-spin 1s linear infinite;
  opacity: 0.8;
  z-index: 1;
}
@media screen and (min-width: 812px) {
  .modal-quiz__inner {
    width: 44rem;
  }
  .modal-quiz__progress {
    width: 39rem;
  }
}
@media screen and (max-width: 811px) {
  .modal-quiz__inner {
    max-width: 480px;
  }
  .modal-quiz__progress {
    margin: 0 2rem;
  }
}

.swiper-slide:not(.swiper-slide-active) .modal-quiz__item__btn {
  opacity: 0;
  visibility: hidden;
}
.modal-quiz__item__header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.modal-quiz__item__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
}
.modal-quiz__item__btns {
  display: flex;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 1rem;
  column-gap: 1rem;
}
.modal-quiz__item__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid;
  color: var(--color-primary);
}
.modal-quiz__item__btn .small {
  font-size: 80%;
}
@media (hover: hover) {
  .modal-quiz__item__btn {
    transition: all 0.3s ease;
  }
  .modal-quiz__item__btn:hover {
    color: #fff;
    border-color: transparent;
    background-color: var(--color-tertiary);
  }
}
@media screen and (min-width: 812px) {
  .modal-quiz__item__header {
    height: 23rem;
  }
  .modal-quiz__item__ttl {
    font-size: 4rem;
  }
  .modal-quiz__item__btns {
    margin: 3rem 0 2rem;
  }
  .modal-quiz__item__btn {
    width: 18rem;
    height: 5rem;
    border-radius: 5rem;
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 811px) {
  .modal-quiz__item__header {
    height: 18rem;
  }
  .modal-quiz__item__ttl {
    font-size: 3rem;
  }
  .modal-quiz__item__btns {
    margin: 2rem 0 1.5rem;
  }
  .modal-quiz__item__btn {
    width: 14rem;
    height: 4rem;
    border-radius: 4rem;
    font-size: 1.6rem;
  }
}

.modal-quiz__question {
  position: relative;
  z-index: 0;
}
.modal-quiz__question:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}
.modal-quiz__question:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-image: var(--image-ptn);
  mask-image: var(--image-ptn);
  z-index: -1;
}
.modal-quiz__question__caption {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 0.75em;
  z-index: 10;
}
.modal-quiz__question__caption span {
  display: inline-block;
  padding-left: 0.25em;
}
body.site-theme-green .modal-quiz__question:before {
  background-color: var(--color-primary);
}
body.site-theme-green .modal-quiz__question:after {
  -webkit-mask-size: 50rem auto;
  mask-size: 50rem auto;
  background-color: var(--color-tertiary);
}
body.site-theme-green .modal-quiz__question__caption {
  background-color: var(--color-tertiary);
}
body.site-theme-blue .modal-quiz__question:before {
  background-color: var(--color-tertiary);
}
body.site-theme-blue .modal-quiz__question:after {
  -webkit-mask-size: 60rem auto;
  mask-size: 60rem auto;
  background-color: var(--color-primary);
}
body.site-theme-blue .modal-quiz__question__caption {
  background-color: var(--color-primary);
}
@media screen and (min-width: 812px) {
  .modal-quiz__question {
    padding-bottom: 3rem;
  }
  .modal-quiz__question:before, .modal-quiz__question:after {
    height: 23rem;
  }
  .modal-quiz__question__caption {
    height: 4.4rem;
    font-size: 2rem;
  }
}
@media screen and (max-width: 811px) {
  .modal-quiz__question {
    padding-bottom: 2.5rem;
  }
  .modal-quiz__question:before, .modal-quiz__question:after {
    height: 18rem;
  }
  .modal-quiz__question__caption {
    height: 3rem;
    font-size: 1.6rem;
  }
}

.modal-quiz__result {
  position: relative;
}
.modal-quiz__result__inner {
  text-align: center;
}
.modal-quiz__result__image {
  position: relative;
  aspect-ratio: 440/264;
}
.modal-quiz__result__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.modal-quiz__result__caption {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 0.75em;
}
.modal-quiz__result__sub {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
}
.modal-quiz__result__ttl {
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
  color: var(--color-primary);
  text-transform: uppercase;
}
.modal-quiz__result a {
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .modal-quiz__result a:hover {
    opacity: 0.7;
  }
}
.modal-quiz__result .m-more-box {
  color: var(--color-primary);
  margin: 0 auto;
}
body.site-theme-green .modal-quiz__result__caption {
  background-color: var(--color-tertiary);
}
body.site-theme-blue .modal-quiz__result__caption {
  background-color: var(--color-primary);
}
@media screen and (min-width: 812px) {
  .modal-quiz__result__inner {
    padding: 3.9rem 0 4.6rem;
  }
  .modal-quiz__result__caption {
    height: 4.4rem;
    font-size: 2rem;
  }
  .modal-quiz__result__sub {
    font-size: 2.5rem;
  }
  .modal-quiz__result__ttl {
    font-size: 4rem;
  }
  .modal-quiz__result__text {
    width: 33rem;
    font-size: 1.4rem;
    margin: 2rem auto 2.5rem;
  }
  .modal-quiz__result .m-more-box {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 811px) {
  .modal-quiz__result__inner {
    padding: 2rem 0 2.5rem;
  }
  .modal-quiz__result__caption {
    height: 3rem;
    font-size: 1.6rem;
  }
  .modal-quiz__result__sub {
    font-size: 2rem;
  }
  .modal-quiz__result__ttl {
    font-size: 3rem;
  }
  .modal-quiz__result__text {
    margin: 1.5rem auto 2rem;
    padding: 0 2rem;
  }
}

.modal-quiz.is-result .modal-quiz__question {
  display: none;
}

.modal-quiz .modal-quiz__result {
  display: none;
}

.modal-quiz.is-result .modal-quiz__result {
  display: block;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ============================================================
/* sub page
============================================================ */
.sc-subpage__header {
  border-bottom: 1px solid var(--color-border);
}
.sc-subpage__ttl {
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  color: var(--color-primary);
}
@media screen and (min-width: 812px) {
  .sc-subpage {
    padding-bottom: 6.5rem;
  }
  .sc-subpage__header {
    padding: 5rem 0 4rem;
  }
  .sc-subpage__header .l-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    -moz-column-gap: 8rem;
    column-gap: 8rem;
  }
  .sc-subpage__ttl {
    font-size: 6.5rem;
  }
  .sc-subpage__inner {
    padding-top: 6.5rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-subpage {
    padding-bottom: 4rem;
  }
  .sc-subpage__header {
    padding: 3rem 0 2rem;
  }
  .sc-subpage__ttl {
    margin-bottom: 1.5rem;
    font-size: 2.5rem;
  }
  .sc-subpage__inner {
    padding-top: 4rem;
  }
}

/* ============================================================
/* area page
============================================================ */
.l-wrapper:has(.sc-area) {
  padding-top: 0;
}

.l-wrapper:has(.sc-area) .l-header {
  background: transparent;
}

body.is_fixed_header .l-wrapper:has(.sc-area) .l-header {
  background: var(--color-primary);
}

.l-wrapper:has(.sc-area) .l-gnav {
  --current-area-color: var(--color-tertiary);
}

.sc-area__header {
  position: relative;
  z-index: 0;
}
.sc-area__header__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.sc-area__header__image:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}
.sc-area__header__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.sc-area__header__image figcaption {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1em;
  transform-origin: center top;
  transform: translate(50%, -50%) rotate(90deg);
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--color-secondary);
  box-shadow: 0.5rem -0.5rem 0.4rem 0 rgba(0, 0, 0, 0.25);
  transition: color 1s ease;
}
.sc-area__header__image figcaption em {
  font-size: 110%;
  margin-top: 0.1em;
}
.sc-area__header__inner {
  position: relative;
  z-index: 1;
  color: #fff;
}
.sc-area__ttl {
  display: flex;
  flex-direction: column;
}
.sc-area__ttl .sub {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  line-height: 1.6;
  text-transform: uppercase;
}
.sc-area__ttl .main {
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 0.8;
  text-transform: uppercase;
}
@media screen and (min-width: 812px) {
  .sc-area__header {
    height: 102.4rem;
  }
  .sc-area__header__image:before {
    height: 40rem;
  }
  .sc-area__header__image figcaption {
    font-size: 2rem;
    height: 5.4rem;
    border-radius: 0 0 2rem 2rem;
  }
  .sc-area__header__inner {
    padding-top: 35rem;
  }
  .sc-area__ttl {
    text-shadow: 0.5rem 0.5rem 5rem rgba(0, 0, 0, 0.4);
  }
  .sc-area__ttl .sub {
    font-size: 5rem;
  }
  .sc-area__ttl .main {
    font-size: 10rem;
  }
  .sc-area__inner {
    padding-bottom: 10rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-area__header {
    height: 48rem;
  }
  .sc-area__header__image:before {
    height: 20rem;
  }
  .sc-area__header__image figcaption {
    font-size: 1rem;
    height: 2.7rem;
    border-radius: 0 0 1rem 1rem;
  }
  .sc-area__header__inner {
    padding-top: 9rem;
  }
  .sc-area__ttl {
    text-shadow: 0.25rem 0.25rem 2.5rem rgba(0, 0, 0, 0.4);
  }
  .sc-area__ttl .sub {
    font-size: 2.5rem;
  }
  .sc-area__ttl .main {
    font-size: 5rem;
  }
  .sc-area__inner {
    padding-bottom: 4rem;
  }
}

/* area lead
============================================================ */
.sc-area-lead {
  position: relative;
}
.sc-area-lead__content p + p {
  margin-top: 1.2em;
}
.sc-area-lead__header {
  position: relative;
}
.sc-area-lead__ttl {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 0.88;
  letter-spacing: 0.01em;
  color: var(--color-secondary);
  text-transform: uppercase;
}
.sc-area-lead__image {
  position: relative;
}
.sc-area-lead__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
@media screen and (min-width: 812px) {
  .sc-area-lead {
    padding-top: 10rem;
  }
  .sc-area-lead .l-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .sc-area-lead__movie {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    height: 28rem;
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .sc-area-lead__header {
    grid-column: 1;
    grid-row: 2;
  }
  .sc-area-lead__image {
    left: 100%;
    width: min(50vw, 72rem);
    transform: translateX(-100%);
  }
  .sc-area-lead__ttl {
    font-size: 6rem;
  }
  .sc-area-lead:has(.sc-area-lead__movie) .sc-area-lead__ttl {
    padding-top: 7rem;
    padding-left: 1rem;
  }
  .sc-area-lead__content {
    grid-column: 2;
    grid-row: 1/span 2;
    font-size: 2rem;
  }
  .sc-area-lead .m-icon-bird {
    position: absolute;
    top: -1rem;
    left: calc(50% - 10rem);
    width: 15rem;
    height: 11rem;
    color: var(--color-secondary);
  }
  .sc-area-lead .m-icon-fish {
    position: absolute;
    top: -3.6rem;
    left: calc(50% - 11rem);
    width: 20.5rem;
    color: var(--color-secondary);
  }
}
@media screen and (max-width: 811px) {
  .sc-area-lead {
    padding-bottom: 4rem;
  }
  .sc-area-lead .l-inner {
    display: flex;
    flex-direction: column;
  }
  .sc-area-lead__movie {
    position: relative;
    order: 1;
    display: flex;
    justify-content: center;
    margin-top: -18rem;
  }
  .sc-area-lead__header {
    margin: 0 -2rem;
    order: 2;
  }
  .sc-area-lead__ttl {
    width: 100%;
    padding-top: 3.7rem;
    text-align: center;
    font-size: 3.5rem;
  }
  .sc-area-lead__content {
    font-size: 1.3rem;
    order: 3;
  }
  .sc-area-lead .m-icon-bird {
    display: none;
  }
  .sc-area-lead .m-icon-fish {
    display: none;
  }
}

/* area movie
============================================================ */
.sc-area-movie {
  position: relative;
  z-index: 0;
  color: #fff;
}
.sc-area-movie:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-secondary);
  opacity: 0.8;
  z-index: -1;
}
.sc-area-movie__video {
  position: relative;
}
.sc-area-movie__video .yt-video {
  width: 100%;
  height: 100%;
}
.sc-area-movie__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.sc-area-movie__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
}
.sc-area-movie__content a {
  font-weight: 600;
}
@media screen and (min-width: 812px) {
  .sc-area-movie {
    position: absolute;
    width: 44.7rem;
    min-height: 78.3rem;
    padding: 3.8rem 4.4rem;
  }
  .sc-area-movie__video {
    margin-bottom: 2.4rem;
    aspect-ratio: 35.8/53.8;
    background-color: #000;
  }
  .sc-area-movie__ttl {
    font-size: 2.5rem;
  }
  .sc-area-movie__content {
    font-size: 2.2rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-area-movie {
    width: 26.2rem;
    min-height: 43.6rem;
    padding: 2.2rem 2.5rem;
  }
  .sc-area-movie__video {
    margin-bottom: 1.2rem;
    aspect-ratio: 41.9/63.1;
    background-color: #000;
  }
  .sc-area-movie__ttl {
    font-size: 1.25rem;
  }
  .sc-area-movie__content {
    font-size: 1.25rem;
  }
}

/* area feature
============================================================ */
@media screen and (min-width: 812px) {
  .sc-area-feature {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 1440px;
    margin: 0 auto;
  }
}
.sc-area-map img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.sc-area-access {
  position: relative;
  color: #fff;
  background-color: var(--color-primary);
}
.sc-area-access__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  font-weight: 700;
}
.sc-area-access__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.sc-area-access .m-icon-leaf {
  position: absolute;
}
.sc-area-access .m-icon-shell {
  position: absolute;
}
@media screen and (min-width: 812px) {
  .sc-area-access {
    padding: 5rem;
  }
  .sc-area-access__ttl {
    font-size: 5rem;
  }
  .sc-area-access__list {
    -moz-column-gap: 3.4rem;
    column-gap: 3.4rem;
    row-gap: 5rem;
    margin-top: 5rem;
  }
  .sc-area-access .m-icon-leaf {
    width: 19.7rem;
    height: 23.4rem;
    top: -7.5rem;
    left: 42rem;
  }
  .sc-area-access .m-icon-shell {
    width: 12rem;
    top: -3.6rem;
    left: calc(50% + 2rem);
  }
}
@media screen and (max-width: 811px) {
  .sc-area-access {
    padding: 2.5rem 2.5rem;
  }
  .sc-area-access__ttl {
    font-size: 3rem;
    text-align: center;
  }
  .sc-area-access__list {
    -moz-column-gap: 2.5rem;
    column-gap: 2.5rem;
    row-gap: 2rem;
    margin-top: 2rem;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
  .sc-area-access .m-icon-leaf {
    width: 6rem;
    height: 7rem;
    top: -0.5rem;
    left: calc(50% + 11rem);
    transform: rotate(20deg);
  }
  .sc-area-access .m-icon-shell {
    width: 6rem;
    top: -1rem;
    left: calc(50% + 8rem);
  }
}

.sc-area-access__item:has(.sc-area-access__item__content dl:nth-child(2)), .sc-area-access__item:has(.sc-area-access__item__content .empty:nth-child(2)) {
  grid-column: span 2;
}
.sc-area-access__item__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  margin-bottom: 0.25em;
  display: flex;
  align-items: center;
  -moz-column-gap: 0.5em;
  column-gap: 0.5em;
}
.sc-area-access__item__ttl em {
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  background-color: #fff;
  color: var(--color-primary);
  width: 1.4em;
  height: 1.4em;
  font-size: 0.7em;
  border-radius: 50%;
}
.sc-area-access__item__ttl span {
  flex: 1;
}
.sc-area-access__item__content {
  border-top: 1px dashed #fff;
  border-bottom: 1px dashed #fff;
}
.sc-area-access__item__content:has(dl:nth-child(2)) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.sc-area-access__item__content dt {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  font-weight: 700;
}
.sc-area-access__item__content dt em {
  font-style: normal;
}
.sc-area-access__item__content dd {
  font-family: "Roboto", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
  font-weight: 400;
  font-variation-settings: "wdth" 75;
  font-weight: 500;
}
body.site-theme-green .sc-area-access__item__content dt {
  color: var(--color-quaternary);
}
body.site-theme-blue .sc-area-access__item__content dt {
  color: #8ccbd3;
}
@media screen and (min-width: 812px) {
  .sc-area-access__item__ttl {
    font-size: 2.7rem;
  }
  .sc-area-access__item__ttl small {
    font-size: 1.4rem;
  }
  .sc-area-access__item__content {
    -moz-column-gap: 3.4rem;
    column-gap: 3.4rem;
    padding: 1.5rem 0 2rem;
  }
  .sc-area-access__item__content dt {
    font-size: 2.7rem;
  }
  .sc-area-access__item__content dt em {
    font-size: 8rem;
  }
  .sc-area-access__item__content dd {
    font-size: 2.7rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-area-access__item__ttl {
    font-size: 1.8rem;
  }
  .sc-area-access__item__content {
    -moz-column-gap: 2.5rem;
    column-gap: 2.5rem;
    padding: 0.8rem 0 1.3rem;
  }
  .sc-area-access__item__content dt {
    font-size: 2rem;
  }
  .sc-area-access__item__content dt em {
    font-size: 5rem;
  }
  .sc-area-access__item__content dd {
    font-size: 1.4rem;
  }
}

.sc-area-planning {
  background: var(--image-ptn) no-repeat center center/cover;
  background-color: var(--color-tertiary);
  color: #fff;
}
.sc-area-planning__link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .sc-area-planning__link:hover {
    opacity: 0.7;
  }
}
.sc-area-planning__inner {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.sc-area-planning__block {
  width: 100%;
}
.sc-area-planning__caption {
  font-family: "Roboto", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
  font-weight: 400;
  font-variation-settings: "wdth" 75;
  font-weight: 700;
  text-transform: uppercase;
}
.sc-area-planning__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
}
.sc-area-planning__more {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
}
@media screen and (min-width: 812px) {
  .sc-area-planning__inner {
    padding: 4rem;
  }
  .sc-area-planning__block {
    max-width: 51.5rem;
  }
  .sc-area-planning__caption {
    font-size: 2.7rem;
  }
  .sc-area-planning__ttl {
    font-size: 5rem;
  }
  .sc-area-planning__more {
    margin-top: 1rem;
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-area-planning__inner {
    padding: 3.4rem;
    text-align: center;
  }
  .sc-area-planning__caption {
    font-size: 2rem;
  }
  .sc-area-planning__ttl {
    font-size: 3.1rem;
  }
  .sc-area-planning__more {
    margin-top: 2.5rem;
    font-size: 1.4rem;
  }
}

.sc-area-image {
  aspect-ratio: 1/1;
}
.sc-area-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* area further
============================================================ */
.sc-area-further {
  position: relative;
  overflow: hidden;
}
.sc-area-further__ttl {
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: var(--color-secondary);
}
.sc-area-further__list .js-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/2;
  color: var(--color-primary);
  background-color: #fff;
  box-shadow: 0 1.6rem 3.2rem rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.sc-area-further__list .js-slider__arrow-prev {
  border-radius: 0 100% 100% 0/50%;
}
.sc-area-further__list .js-slider__arrow-prev .m-arrow {
  transform: scaleX(-1);
}
.sc-area-further__list .js-slider__arrow-next {
  border-radius: 100% 0 0 100%/50%;
}
@media screen and (min-width: 812px) {
  .sc-area-further__list .js-slider__arrow {
    width: 4.6rem;
    font-size: 2.2rem;
  }
  .sc-area-further__list .js-slider__arrow-prev {
    left: 0;
  }
  .sc-area-further__list .js-slider__arrow-next {
    right: 0;
  }
}
@media screen and (min-width: 1700px) {
  .sc-area-further__list .js-slider__arrow {
    border-radius: 50%;
    width: 9.2rem;
    aspect-ratio: 1/1;
  }
  .sc-area-further__list .js-slider__arrow-prev {
    left: auto;
    right: calc(50% + 75rem);
  }
  .sc-area-further__list .js-slider__arrow-next {
    right: auto;
    left: calc(50% + 75rem);
  }
}
@media screen and (max-width: 811px) {
  .sc-area-further__list .js-slider__arrow {
    width: 2.3rem;
    font-size: 1.6rem;
  }
  .sc-area-further__list .js-slider__arrow-prev {
    left: 0;
    padding-right: 0.5em;
  }
  .sc-area-further__list .js-slider__arrow-next {
    right: 0;
    padding-left: 0.5em;
  }
}
.sc-area-further__list:not(:has(.swiper-slide:nth-child(3))) .js-slider__arrow {
  opacity: 0;
  visibility: hidden;
}
@media screen and (min-width: 812px) {
  .sc-area-further {
    padding-top: 7rem;
  }
  .sc-area-further__ttl {
    font-size: 5.6rem;
  }
  .sc-area-further__list {
    margin: 5rem -3.3rem 0;
  }
  .sc-area-further__list .swiper-slide {
    width: 33.34%;
    padding: 0 3.3rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-area-further {
    margin-top: 3.5rem;
  }
  .sc-area-further .l-inner {
    max-width: 100%;
  }
  .sc-area-further__ttl {
    font-size: 3.5rem;
    text-align: center;
  }
  .sc-area-further__list {
    margin: 2.4rem -2rem 0;
  }
  .sc-area-further__list .swiper-slide {
    width: 21rem;
    padding: 0 1.1rem;
    transition: opacity 0.3s ease;
  }
  .sc-area-further__list .swiper-slide:not(.swiper-slide-active) {
    opacity: 0.5;
  }
}

.sc-area-further__item__link {
  display: block;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .sc-area-further__item__link:hover {
    opacity: 0.7;
  }
}
.sc-area-further__item__image {
  position: relative;
}
.sc-area-further__item__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.sc-area-further__item__tag {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1em;
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  color: #fff;
  background-color: var(--color-primary);
}
.sc-area-further__item__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  color: var(--color-primary);
}
.sc-area-further__item__more {
  color: var(--color-tertiary);
}
@media screen and (min-width: 812px) {
  .sc-area-further__item__image {
    margin-bottom: 1.5rem;
    aspect-ratio: 363/465;
  }
  .sc-area-further__item__tag {
    height: 4.2rem;
    font-size: 2rem;
  }
  .sc-area-further__item__ttl {
    font-size: 3rem;
  }
  .sc-area-further__item__more {
    margin-top: 0.5em;
    font-size: 2rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-area-further__item__image {
    margin-bottom: 0.9rem;
    aspect-ratio: 400/465;
  }
  .sc-area-further__item__tag {
    height: 2.6rem;
    font-size: 1.4rem;
  }
  .sc-area-further__item__ttl {
    font-size: 1.6rem;
  }
  .sc-area-further__item__more {
    margin-top: 0.5em;
    font-size: 1.3rem;
  }
}

/* area other
============================================================ */
.sc-area-other__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
}
@media screen and (min-width: 812px) {
  .sc-area-other {
    margin-top: 5.2rem;
  }
  .sc-area-other__ttl {
    margin-bottom: 2rem;
    font-size: 3.5rem;
  }
  .sc-area-other__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 6.5rem;
    column-gap: 6.5rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-area-other {
    margin-top: 3.1rem;
  }
  .sc-area-other__ttl {
    margin-bottom: 1.5rem;
    font-size: 2.4rem;
    text-align: center;
  }
  .sc-area-other__list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }
}

.sc-area-other__item__link {
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .sc-area-other__item__link:hover {
    opacity: 0.7;
  }
}
.sc-area-other__item__inner {
  display: flex;
  background: var(--image-ptn) no-repeat center center/cover;
  background-color: var(--color-container);
}
.sc-area-other__item__ttl {
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.sc-area-other__item__block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--color-primary);
  flex: 1;
}
.sc-area-other__item__more {
  text-align: right;
  line-height: 0;
}
@media screen and (min-width: 812px) {
  .sc-area-other__item__block {
    padding: 3.6rem 0 2rem 3.6rem;
  }
  .sc-area-other__item__image {
    width: 50%;
  }
  .sc-area-other__item__ttl {
    font-size: 5rem;
  }
  .sc-area-other__item__more {
    padding-right: 2rem;
    font-size: 6.95rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-area-other__item__block {
    padding: 1.25rem 0.85rem;
  }
  .sc-area-other__item__image {
    width: 50%;
  }
  .sc-area-other__item__ttl {
    font-size: 2.8rem;
    text-align: center;
  }
  .sc-area-other__item__more {
    font-size: 3.4rem;
  }
}

/* ============================================================
/* article index page
============================================================ */
.l-wrapper:has(.sc-article-idx) {
  padding-top: 0;
}

.l-wrapper:has(.sc-article-idx) .l-header {
  background: transparent;
}

body.is_fixed_header .l-wrapper:has(.sc-article-idx) .l-header {
  background: var(--color-primary);
}

.l-wrapper:has(.sc-article-idx) .l-gnav {
  --current-area-color: var(--color-tertiary);
}

.sc-article-idx__header__image__slider {
  position: relative;
}
.sc-article-idx__header__image__slider .js-slider__pagination {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  width: -moz-fit-content;
  width: fit-content;
  transform: translateX(-50%);
  z-index: 1;
}
.sc-article-idx__header__image__slider .swiper-pagination-bullet {
  border: 1px solid #fff;
  background-color: transparent;
  opacity: 1;
  box-shadow: 0.4rem 0.4rem 1rem 0 rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}
.sc-article-idx__header__image__slider .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #fff;
}
.sc-article-idx__header__item {
  position: relative;
  z-index: 0;
}
.sc-article-idx__header__item__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.sc-article-idx__header__item__image:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.sc-article-idx__header__item__image:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.sc-article-idx__header__item__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.sc-article-idx__header__item__inner {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  color: #fff;
}
.sc-article-idx__header__item__ttl {
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 0.8;
}
.sc-article-idx__header__item .m-more-box span:last-child em {
  color: #a5a5a5;
  transform: translateY(0.1em) rotate(90deg);
}
.sc-article-idx__ttl {
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 4rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-primary);
}
.sc-article-idx__more {
  color: var(--color-primary);
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  text-decoration: none;
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
}
@media (hover: hover) {
  .sc-article-idx__more:hover {
    text-decoration: underline;
  }
}
.sc-article-idx__more .m-arrow {
  margin-left: 1em;
  font-size: 40%;
  transform: rotate(90deg);
}
@media screen and (min-width: 812px) {
  .sc-article-idx {
    padding-bottom: 6.5rem;
  }
  .sc-article-idx__header__image__slider .swiper-pagination-bullet {
    width: 2rem;
    height: 2rem;
  }
  .sc-article-idx__header__item {
    height: 63.2rem;
  }
  .sc-article-idx__header__item__image:before {
    height: 23rem;
  }
  .sc-article-idx__header__item__image:after {
    height: 35rem;
  }
  .sc-article-idx__header__item__inner {
    padding-bottom: 8rem;
  }
  .sc-article-idx__header__item__inner .l-inner {
    max-width: 131rem;
  }
  .sc-article-idx__header__item__ttl {
    margin-bottom: 2.5rem;
    font-size: 7rem;
  }
  .sc-article-idx__inner {
    margin-top: 7rem;
  }
  .sc-article-idx__inner .l-inner {
    max-width: 131rem;
  }
  .sc-article-idx__ttl {
    margin-bottom: 7rem;
    font-size: 6.5rem;
  }
  .sc-article-idx__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 3.7rem;
    column-gap: 3.7rem;
    row-gap: 5.8rem;
  }
  .sc-article-idx__more {
    margin-top: 6.5rem;
    font-size: 2rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-article-idx {
    padding-bottom: 4rem;
  }
  .sc-article-idx__header__image__slider .swiper-pagination-bullet {
    width: 1rem;
    height: 1rem;
  }
  .sc-article-idx__header__item {
    height: 37.7rem;
  }
  .sc-article-idx__header__item__image:before {
    height: 11rem;
  }
  .sc-article-idx__header__item__image:after {
    height: rem;
  }
  .sc-article-idx__header__item__inner {
    padding-bottom: 5rem;
  }
  .sc-article-idx__header__item__inner .l-inner {
    max-width: 131rem;
  }
  .sc-article-idx__header__item__ttl {
    margin-bottom: 1.5rem;
    font-size: 2.5rem;
  }
  .sc-article-idx__inner {
    margin-top: 4rem;
  }
  .sc-article-idx__ttl {
    margin-bottom: 2rem;
    font-size: 3.3rem;
  }
  .sc-article-idx__list {
    display: flex;
    flex-direction: column;
    row-gap: 4rem;
  }
  .sc-article-idx__more {
    margin-top: 4rem;
    font-size: 1.6rem;
  }
}

.sc-article-idx__item__link {
  display: block;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .sc-article-idx__item__link:hover {
    opacity: 0.7;
  }
}
.sc-article-idx__item__image {
  aspect-ratio: 412/226;
}
.sc-article-idx__item__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.sc-article-idx__item__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.1;
}
.sc-article-idx__item__text {
  margin-top: 0.5em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.sc-article-idx__item__more {
  color: var(--color-tertiary);
  margin-top: 0.5em;
}
@media screen and (min-width: 812px) {
  .sc-article-idx__item__image {
    margin-bottom: 1.1rem;
  }
  .sc-article-idx__item__ttl {
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-article-idx__item__image {
    margin-bottom: 0.9rem;
  }
  .sc-article-idx__item__ttl {
    font-size: 2rem;
  }
}

/* ============================================================
/* article detail page
============================================================ */
.l-wrapper:has(.sc-article-dtl) {
  padding-top: 0;
}

.l-wrapper:has(.sc-article-dtl) .l-header {
  background: transparent;
}

body.is_fixed_header .l-wrapper:has(.sc-article-dtl) .l-header {
  background: var(--color-primary);
}

.l-wrapper:has(.sc-article-dtl) .l-gnav {
  --current-area-color: var(--color-tertiary);
}

.sc-article-dtl__header {
  position: relative;
  z-index: 0;
}
.sc-article-dtl__header__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.sc-article-dtl__header__image:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.sc-article-dtl__header__image:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.sc-article-dtl__header__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.sc-article-dtl__header__inner {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  color: #fff;
}
.sc-article-dtl__ttl {
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
}
.sc-article-dtl__inner {
  overflow: hidden;
}
@media screen and (min-width: 812px) {
  .sc-article-dtl__header {
    height: 102.4rem;
  }
  .sc-article-dtl__header__image:before, .sc-article-dtl__header__image:after {
    height: 40rem;
  }
  .sc-article-dtl__ttl {
    font-size: 7rem;
    padding-bottom: 10rem;
  }
  .sc-article-dtl__inner {
    padding: 10rem 0 9rem;
  }
  .sc-article-dtl__inner > .l-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    -moz-column-gap: 9rem;
    column-gap: 9rem;
  }
  .sc-article-dtl .m-area-bnr {
    margin-top: 8rem;
  }
  .sc-article-dtl__sidebar {
    width: 34.7rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-article-dtl__header {
    height: 37.7rem;
  }
  .sc-article-dtl__header__image:before, .sc-article-dtl__header__image:after {
    height: 11rem;
  }
  .sc-article-dtl__ttl {
    padding-bottom: 2rem;
    font-size: 2.5rem;
  }
  .sc-article-dtl__inner {
    padding: 3rem 0 0;
  }
  .sc-article-dtl .m-area-bnr {
    margin-top: 5rem;
  }
  .sc-article-dtl__sidebar {
    margin-top: 4rem;
  }
}

.sc-article-relation {
  color: var(--color-primary);
  background-color: var(--color-container);
}
.sc-article-relation:not(:has(.sc-article-relation__list > *)) {
  display: none;
}
.sc-article-relation__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
  line-height: 1;
  text-align: center;
}
@media screen and (min-width: 812px) {
  .sc-article-relation {
    padding: 3rem 4rem;
    font-size: 2rem;
  }
  .sc-article-relation__ttl {
    margin-bottom: 2.5rem;
    font-size: 3rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-article-relation {
    padding: 3rem 0;
    font-size: 2rem;
    position: relative;
    z-index: 0;
  }
  .sc-article-relation:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100dvw;
    height: 100%;
    background-color: var(--color-container);
    z-index: -1;
    transform: translateX(-50%);
  }
  .sc-article-relation__ttl {
    margin-bottom: 2.5rem;
    font-size: 3rem;
  }
}

.sc-article-relation__movie__video {
  aspect-ratio: 9/16;
  position: relative;
  margin-bottom: 1.5rem;
  background-color: #000;
}
.sc-article-relation__movie__video .yt-video {
  width: 100%;
  height: 100%;
}
.sc-article-relation__movie__video .yt-video__play {
  width: 9rem;
  height: 9rem;
}
.sc-article-relation__movie__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.sc-article-relation__movie__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
}
.sc-article-relation__movie__content a {
  font-weight: 600;
}
@media screen and (max-width: 811px) {
  .sc-article-relation__movie__ttl {
    font-size: 2.5rem;
  }
}

.sc-article-relation__item:nth-child(n+2) {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px dotted;
}
.sc-article-relation__item__link {
  display: block;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .sc-article-relation__item__link:hover {
    opacity: 0.7;
  }
}
.sc-article-relation__item__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
}
.sc-article-relation__item__image {
  position: relative;
  aspect-ratio: 1/1;
  margin-bottom: 1.5rem;
}
.sc-article-relation__item__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.sc-article-relation__item__tag {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1em;
  height: 4.2rem;
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  color: #fff;
  background-color: var(--color-primary);
}

.sc-article-recommend {
  color: var(--color-primary);
}
.sc-article-recommend__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 2rem;
  font-size: 2rem;
}
@media screen and (min-width: 812px) {
  .sc-article-recommend {
    margin-top: 4rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-article-recommend {
    margin-top: 3rem;
    margin-bottom: 4rem;
  }
}

.sc-article-recommend__item:nth-child(n+2) {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px dotted;
}
.sc-article-recommend__item__link {
  display: block;
  text-decoration: none;
}
@media (hover: hover) {
  .sc-article-recommend__item__link:hover .main {
    text-decoration: none;
  }
}
.sc-article-recommend__item__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  display: flex;
  flex-direction: column;
}
.sc-article-recommend__item__ttl .sub {
  font-size: 2rem;
}
.sc-article-recommend__item__ttl .main {
  font-size: 3rem;
  text-decoration: underline;
}

/* ============================================================
/* itinerary index page
============================================================ */
.sc-itinerary-idx__header {
  border-bottom: 1px solid var(--color-border);
}
.sc-itinerary-idx__ttl {
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  color: var(--color-primary);
}
.sc-itinerary-idx__anchor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: var(--color-tertiary);
}
.sc-itinerary-idx__anchor li a {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}
@media (hover: hover) {
  .sc-itinerary-idx__anchor li a:hover {
    text-decoration: underline;
  }
}
@media screen and (min-width: 812px) {
  .sc-itinerary-idx {
    padding-bottom: 6.5rem;
  }
  .sc-itinerary-idx__header {
    padding: 5rem 0 4rem;
  }
  .sc-itinerary-idx__header .l-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    -moz-column-gap: 8rem;
    column-gap: 8rem;
  }
  .sc-itinerary-idx__ttl {
    font-size: 6.5rem;
  }
  .sc-itinerary-idx__anchor {
    -moz-column-gap: 3em;
    column-gap: 3em;
    row-gap: 0.5em;
  }
}
@media screen and (max-width: 811px) {
  .sc-itinerary-idx {
    padding-bottom: 4rem;
  }
  .sc-itinerary-idx__header {
    padding: 3rem 0 2rem;
  }
  .sc-itinerary-idx__ttl {
    margin-bottom: 1.5rem;
    font-size: 2.5rem;
  }
  .sc-itinerary-idx__anchor {
    -moz-column-gap: 2em;
    column-gap: 2em;
    row-gap: 1em;
  }
}

.sc-itinerary-idx__area:nth-child(n+2) {
  border-top: 1px dashed var(--color-border);
}
.sc-itinerary-idx__area__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
}
.sc-itinerary-idx__area__ttl > span {
  border-bottom: 0.2rem dotted;
}
.sc-itinerary-idx__area__list {
  position: relative;
}
.sc-itinerary-idx__area__list .js-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/2;
  color: var(--color-primary);
  background-color: #fff;
  box-shadow: 0 1.6rem 3.2rem rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.sc-itinerary-idx__area__list .js-slider__arrow-prev {
  border-radius: 0 100% 100% 0/50%;
}
.sc-itinerary-idx__area__list .js-slider__arrow-prev .m-arrow {
  transform: scaleX(-1);
}
.sc-itinerary-idx__area__list .js-slider__arrow-next {
  border-radius: 100% 0 0 100%/50%;
}
@media screen and (min-width: 812px) {
  .sc-itinerary-idx__area__list .js-slider__arrow {
    width: 4.6rem;
    font-size: 2.2rem;
  }
  .sc-itinerary-idx__area__list .js-slider__arrow-prev {
    left: 0;
  }
  .sc-itinerary-idx__area__list .js-slider__arrow-next {
    right: 0;
  }
}
@media screen and (min-width: 1700px) {
  .sc-itinerary-idx__area__list .js-slider__arrow {
    border-radius: 50%;
    width: 9.2rem;
    aspect-ratio: 1/1;
  }
  .sc-itinerary-idx__area__list .js-slider__arrow-prev {
    left: auto;
    right: calc(50% + 75rem);
  }
  .sc-itinerary-idx__area__list .js-slider__arrow-next {
    right: auto;
    left: calc(50% + 75rem);
  }
}
@media screen and (max-width: 811px) {
  .sc-itinerary-idx__area__list .js-slider__arrow {
    width: 2.3rem;
    font-size: 1.6rem;
  }
  .sc-itinerary-idx__area__list .js-slider__arrow-prev {
    left: 0;
    padding-right: 0.5em;
  }
  .sc-itinerary-idx__area__list .js-slider__arrow-next {
    right: 0;
    padding-left: 0.5em;
  }
}
.sc-itinerary-idx__area__list .js-slider__arrow {
  top: 15rem;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  padding: 0 !important;
  box-shadow: 0 0.8rem 1.6rem rgba(0, 0, 0, 0.4);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.sc-itinerary-idx__area__list .js-slider__arrow.swiper-button-disabled {
  opacity: 0;
  visibility: hidden;
}
.sc-itinerary-idx__area__list .js-slider__arrow-prev {
  left: 0;
  right: auto;
}
.sc-itinerary-idx__area__list .js-slider__arrow-next {
  left: auto;
  right: 0;
}
@media screen and (min-width: 812px) {
  .sc-itinerary-idx__area {
    padding: 5rem 0;
    display: grid;
    grid-template-columns: auto 1fr;
  }
  .sc-itinerary-idx__area__ttl {
    width: 27rem;
    font-size: 3.5rem;
  }
  .sc-itinerary-idx__area__list {
    margin: 0 -3.1rem;
  }
  .sc-itinerary-idx__area__list .swiper-slide {
    width: 50%;
    padding: 0 3.1rem;
  }
  .sc-itinerary-idx__area__list .js-slider__arrow {
    width: 6rem;
    height: 6rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-itinerary-idx__area {
    padding: 3rem 0;
  }
  .sc-itinerary-idx__area__ttl {
    margin-bottom: 1.5rem;
    font-size: 2rem;
  }
  .sc-itinerary-idx__area__list {
    margin: 0 -2rem;
  }
  .sc-itinerary-idx__area__list .swiper-slide {
    width: 100%;
    padding: 0 2rem;
  }
  .sc-itinerary-idx__area__list .js-slider__arrow {
    width: 4rem;
    height: 4rem;
    top: 11rem;
  }
}

.sc-itinerary-idx__item__link {
  display: block;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .sc-itinerary-idx__item__link:hover {
    opacity: 0.7;
  }
}
.sc-itinerary-idx__item__image {
  aspect-ratio: 480/320;
}
.sc-itinerary-idx__item__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.sc-itinerary-idx__item__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
}
.sc-itinerary-idx__item__more {
  color: var(--color-tertiary);
}
@media screen and (min-width: 812px) {
  .sc-itinerary-idx__item__image {
    margin-bottom: 1.5rem;
  }
  .sc-itinerary-idx__item__ttl {
    font-size: 2.5rem;
  }
  .sc-itinerary-idx__item__more {
    margin-top: 1.5rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-itinerary-idx__item__image {
    margin-bottom: 1rem;
  }
  .sc-itinerary-idx__item__ttl {
    font-size: 2rem;
  }
  .sc-itinerary-idx__item__more {
    margin-top: 1rem;
  }
}

.sc-itinerary-idx__totop {
  display: flex;
  flex-direction: column;
  align-items: center;
  -moz-column-gap: 0.5em;
  column-gap: 0.5em;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-tertiary);
  text-decoration: none;
}
@media (hover: hover) {
  .sc-itinerary-idx__totop:hover {
    text-decoration: underline;
  }
}
.sc-itinerary-idx__totop em {
  transform: rotate(-90deg);
  font-size: 50%;
}
@media screen and (min-width: 812px) {
  .sc-itinerary-idx__totop {
    margin-top: 4rem;
    font-size: 2rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-itinerary-idx__totop {
    margin-top: 3rem;
    font-size: 1.6rem;
  }
}

/* ============================================================
/* itinerary detail page
============================================================ */
.sc-itinerary-dtl__ttl {
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  color: var(--color-secondary);
}
.sc-itinerary-dtl__back {
  display: inline-flex;
  align-items: center;
  -moz-column-gap: 0.5em;
  column-gap: 0.5em;
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
}
.sc-itinerary-dtl__back span {
  border-bottom: 2px dotted;
}
.sc-itinerary-dtl__back .m-arrow {
  font-size: 50%;
  transform: scale(-1, 1);
}
@media screen and (min-width: 812px) {
  .sc-itinerary-dtl {
    padding: 3rem 0 0;
  }
  .sc-itinerary-dtl__header {
    margin-bottom: 5rem;
  }
  .sc-itinerary-dtl__back {
    margin-bottom: 3rem;
    font-size: 2rem;
  }
  .sc-itinerary-dtl__ttl {
    font-size: 6.5rem;
  }
  .sc-itinerary-dtl .m-area-bnr {
    margin: 15.5rem auto 0;
  }
  .sc-itinerary-dtl__inner {
    padding-bottom: 10rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-itinerary-dtl {
    padding: 2.5rem 0 0;
  }
  .sc-itinerary-dtl__header {
    margin-bottom: 5rem;
  }
  .sc-itinerary-dtl__back {
    margin-bottom: 2.5rem;
    font-size: 1.8rem;
  }
  .sc-itinerary-dtl__ttl {
    font-size: 3rem;
    text-align: center;
  }
  .sc-itinerary-dtl .m-area-bnr {
    margin: 5rem auto 0;
  }
  .sc-itinerary-dtl__inner {
    padding-bottom: 4rem;
  }
}

.sc-itinerary-list__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  font-weight: 700;
  color: var(--color-primary);
}
@media screen and (min-width: 812px) {
  .sc-itinerary-list:nth-child(n+2) {
    margin-top: 11.6rem;
  }
  .sc-itinerary-list__ttl {
    margin-bottom: 3rem;
    font-size: 4rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-itinerary-list:nth-child(n+2) {
    margin-top: 7rem;
  }
  .sc-itinerary-list__ttl {
    margin-bottom: 4.5rem;
    font-size: 2.5rem;
    text-align: center;
  }
}

.sc-itinerary-item {
  position: relative;
}
.sc-itinerary-item:before {
  content: "";
  position: absolute;
  width: 1rem;
  background-size: 1rem 1rem;
  height: 100%;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Ccircle cx="50" cy="50" r="20" fill="currentColor" /%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Ccircle cx="50" cy="50" r="20" fill="currentColor" /%3E%3C/svg%3E');
  background: var(--color-primary);
}
.sc-itinerary-item__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  -moz-column-gap: 2.2rem;
  column-gap: 2.2rem;
}
.sc-itinerary-item__icon:before {
  content: "";
  position: absolute;
  left: 0.4rem;
  width: calc(100% - 1rem);
  height: 1rem;
  background-size: 1rem 1rem;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Ccircle cx="50" cy="50" r="20" fill="currentColor" /%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Ccircle cx="50" cy="50" r="20" fill="currentColor" /%3E%3C/svg%3E');
  background: var(--color-primary);
}
.sc-itinerary-item__icon em {
  color: var(--color-primary);
  border: 0.2rem solid var(--color-primary);
  border-radius: 50%;
  background-color: #fff;
}
.sc-itinerary-item__content:has(figure) {
  background-color: #fff;
  box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.15);
}
.sc-itinerary-item__sub {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}
.sc-itinerary-item__time {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}
.sc-itinerary-item__header:empty, .sc-itinerary-item__content:empty {
  display: none;
}
.sc-itinerary-item__header .sc-itinerary-item__ttl {
  font-weight: 500;
}
.sc-itinerary-item__content .sc-itinerary-item__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
}
.sc-itinerary-item__image {
  aspect-ratio: 557/313;
  overflow: hidden;
}
.sc-itinerary-item__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.sc-itinerary-item.item-spot .sc-itinerary-item__icon em {
  color: #fff;
  background-color: var(--color-primary);
}
.sc-itinerary-item.item-transfer .sc-itinerary-item__header .sc-itinerary-item__ttl {
  font-style: italic;
}
.sc-itinerary-item.item-goal .sc-itinerary-item__icon em {
  border: none;
}
.sc-itinerary-item.item-goal .sc-itinerary-item__header .sc-itinerary-item__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
}
.sc-itinerary-item.item-goal:before, .sc-itinerary-item.item-transfer:last-child:before {
  content: none;
}
@media screen and (min-width: 812px) {
  .sc-itinerary-item {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: flex-start;
    align-items: flex-start;
    padding-bottom: 4rem;
    margin-left: 6rem;
  }
  .sc-itinerary-item:before {
    top: 0;
    left: 36rem;
    transform: translateX(-50%);
  }
  .sc-itinerary-item__icon {
    position: absolute;
    top: 0;
    left: 36rem;
    margin-left: -2.4rem;
  }
  .sc-itinerary-item__icon em {
    font-size: 4.8rem;
  }
  .sc-itinerary-item__header {
    width: 36rem;
    min-height: 4.8rem;
    text-align: right;
    padding-right: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .sc-itinerary-item__content {
    width: 68.5rem;
    min-height: 4.8rem;
    padding: 0 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 2rem;
  }
  .sc-itinerary-item__content:has(figure) {
    padding-top: 6rem;
    padding-bottom: 4rem;
    margin-top: 3.5rem;
  }
  .sc-itinerary-item__header .sc-itinerary-item__ttl {
    font-size: 2rem;
  }
  .sc-itinerary-item__content .sc-itinerary-item__ttl {
    font-size: 2.5rem;
  }
  .sc-itinerary-item__image {
    margin-bottom: 2rem;
  }
  .sc-itinerary-item__time {
    font-size: 2.5rem;
  }
  .sc-itinerary-item.item-start .sc-itinerary-item__icon {
    margin-left: -3.5rem;
  }
  .sc-itinerary-item.item-start .sc-itinerary-item__icon em {
    font-size: 7rem;
  }
  .sc-itinerary-item.item-start .sc-itinerary-item__content, .sc-itinerary-item.item-start .sc-itinerary-item__header {
    min-height: 7rem;
  }
  .sc-itinerary-item.item-start .sc-itinerary-item__sub {
    font-size: 2.8rem;
  }
  .sc-itinerary-item.item-start .sc-itinerary-item__time {
    font-size: 4rem;
  }
  .sc-itinerary-item.item-spot .sc-itinerary-item__icon {
    margin-left: -3.5rem;
  }
  .sc-itinerary-item.item-spot .sc-itinerary-item__icon em {
    font-size: 7rem;
  }
  .sc-itinerary-item.item-spot .sc-itinerary-item__content, .sc-itinerary-item.item-spot .sc-itinerary-item__header {
    min-height: 7rem;
  }
  .sc-itinerary-item:last-child {
    padding-bottom: 0;
  }
  .sc-itinerary-item.item-goal .sc-itinerary-item__header .sc-itinerary-item__ttl {
    font-size: 2.5rem;
  }
  .sc-itinerary-item.item-goal .sc-itinerary-item__icon {
    margin-left: -4.15rem;
  }
  .sc-itinerary-item.item-goal .sc-itinerary-item__icon em {
    font-size: 8.3rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-itinerary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    row-gap: 1rem;
    padding-bottom: 5.25rem;
  }
  .sc-itinerary-item:before {
    top: auto;
    bottom: 0;
    height: 5rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .sc-itinerary-item:last-child:before {
    content: none;
  }
  .sc-itinerary-item__header, .sc-itinerary-item__content {
    font-size: 1.5rem;
  }
  .sc-itinerary-item__icon {
    margin-left: auto;
    margin-right: auto;
  }
  .sc-itinerary-item__icon em {
    font-size: 4.8rem;
  }
  .sc-itinerary-item__time {
    font-size: 2rem;
  }
  .sc-itinerary-item__content:has(figure) {
    padding: 2.4rem 3rem;
  }
  .sc-itinerary-item__content:has(figure) .sc-itinerary-item__ttl {
    font-size: 2.5rem;
  }
  .sc-itinerary-item__image {
    margin-bottom: 2rem;
  }
  .sc-itinerary-item.item-start .sc-itinerary-item__header {
    order: 1;
  }
  .sc-itinerary-item.item-start .sc-itinerary-item__icon {
    order: 2;
  }
  .sc-itinerary-item.item-start .sc-itinerary-item__icon em {
    font-size: 7rem;
  }
  .sc-itinerary-item.item-start .sc-itinerary-item__content {
    order: 3;
  }
  .sc-itinerary-item.item-start .sc-itinerary-item__sub {
    font-size: 1.5rem;
  }
  .sc-itinerary-item.item-start .sc-itinerary-item__time {
    font-size: 2.5rem;
  }
  .sc-itinerary-item.item-start .sc-itinerary-item__content .sc-itinerary-item__ttl {
    font-size: 2rem;
  }
  .sc-itinerary-item.item-spot .sc-itinerary-item__icon em {
    font-size: 7rem;
  }
  .sc-itinerary-item:last-child {
    padding-bottom: 0;
  }
  .sc-itinerary-item.item-goal .sc-itinerary-item__header {
    order: 1;
  }
  .sc-itinerary-item.item-goal .sc-itinerary-item__icon {
    order: 2;
  }
  .sc-itinerary-item.item-goal .sc-itinerary-item__content {
    order: 3;
  }
  .sc-itinerary-item.item-goal .sc-itinerary-item__header .sc-itinerary-item__ttl {
    font-size: 2rem;
  }
  .sc-itinerary-item.item-goal .sc-itinerary-item__icon em {
    font-size: 4.1rem;
  }
}

/* itinerary other
============================================================ */
.sc-itinerary-other {
  color: #fff;
  background-color: var(--color-tertiary);
  position: relative;
  overflow: hidden;
}
.sc-itinerary-other__ttl {
  font-family: "sink", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.sc-itinerary-other__list .js-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/2;
  color: var(--color-primary);
  background-color: #fff;
  box-shadow: 0 1.6rem 3.2rem rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.sc-itinerary-other__list .js-slider__arrow-prev {
  border-radius: 0 100% 100% 0/50%;
}
.sc-itinerary-other__list .js-slider__arrow-prev .m-arrow {
  transform: scaleX(-1);
}
.sc-itinerary-other__list .js-slider__arrow-next {
  border-radius: 100% 0 0 100%/50%;
}
@media screen and (min-width: 812px) {
  .sc-itinerary-other__list .js-slider__arrow {
    width: 4.6rem;
    font-size: 2.2rem;
  }
  .sc-itinerary-other__list .js-slider__arrow-prev {
    left: 0;
  }
  .sc-itinerary-other__list .js-slider__arrow-next {
    right: 0;
  }
}
@media screen and (min-width: 1700px) {
  .sc-itinerary-other__list .js-slider__arrow {
    border-radius: 50%;
    width: 9.2rem;
    aspect-ratio: 1/1;
  }
  .sc-itinerary-other__list .js-slider__arrow-prev {
    left: auto;
    right: calc(50% + 75rem);
  }
  .sc-itinerary-other__list .js-slider__arrow-next {
    right: auto;
    left: calc(50% + 75rem);
  }
}
@media screen and (max-width: 811px) {
  .sc-itinerary-other__list .js-slider__arrow {
    width: 2.3rem;
    font-size: 1.6rem;
  }
  .sc-itinerary-other__list .js-slider__arrow-prev {
    left: 0;
    padding-right: 0.5em;
  }
  .sc-itinerary-other__list .js-slider__arrow-next {
    right: 0;
    padding-left: 0.5em;
  }
}
.sc-itinerary-other__list .js-slider__arrow.swiper-button-disabled {
  display: none;
}
@media screen and (min-width: 812px) {
  .sc-itinerary-other {
    padding: 5.5rem 0 7rem;
  }
  .sc-itinerary-other__ttl {
    font-size: 4rem;
  }
  .sc-itinerary-other__list {
    margin: 5rem -3.3rem 0;
  }
  .sc-itinerary-other__list .swiper-slide {
    width: 33.34%;
    padding: 0 3.3rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-itinerary-other {
    padding: 3.5rem 0 4.5rem;
  }
  .sc-itinerary-other .l-inner {
    max-width: 100%;
  }
  .sc-itinerary-other__ttl {
    font-size: 4rem;
    text-align: center;
  }
  .sc-itinerary-other__list {
    margin: 2.5rem -2rem 0;
  }
  .sc-itinerary-other__list .swiper-slide {
    width: calc(100% - 2rem * 2);
    max-width: 520px;
    padding: 0 2rem;
  }
  .sc-itinerary-other__list .js-slider__arrow {
    width: 5.4rem;
    height: 5.4rem;
    border-radius: 50%;
    padding: 0 !important;
  }
  .sc-itinerary-other__list .js-slider__arrow-prev {
    left: 0.5rem;
  }
  .sc-itinerary-other__list .js-slider__arrow-next {
    right: 0.5rem;
  }
}

.sc-itinerary-other__item__link {
  display: block;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .sc-itinerary-other__item__link:hover {
    opacity: 0.7;
  }
}
.sc-itinerary-other__item__image {
  position: relative;
  aspect-ratio: 1/1;
}
.sc-itinerary-other__item__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.sc-itinerary-other__item__tag {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1em;
  height: 4.2rem;
  font-size: 2rem;
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  background-color: var(--color-primary);
}
.sc-itinerary-other__item__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
}
@media screen and (min-width: 812px) {
  .sc-itinerary-other__item__image {
    margin-bottom: 2.5rem;
  }
  .sc-itinerary-other__item__ttl {
    font-size: 3rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-itinerary-other__item__image {
    margin-bottom: 1.3rem;
  }
  .sc-itinerary-other__item__ttl {
    font-size: 2rem;
  }
}

.sc-access__map img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.sc-access__transp__wrapper {
  height: 100%;
}
.sc-access__transp__wrapper > * {
  transition: opacity 0.3s ease;
}
.sc-access__transp__wrapper.is-loading::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  display: block;
  width: 4rem;
  height: 4rem;
  transform: translate(-50%, -50%);
  border: 0.4rem solid rgba(77, 77, 77, 0.8);
  border-top-color: transparent;
  border-radius: 50%;
  background-image: none;
  animation: loading-spin 1s linear infinite;
  opacity: 0.8;
  z-index: 1;
}
.sc-access__transp__wrapper.is-loading > * {
  opacity: 0;
}
.sc-access__map__wrapper {
  position: relative;
  height: 100%;
}
.sc-access__map__wrapper > * {
  transition: opacity 0.3s ease;
}
.sc-access__map__wrapper.is-loading::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  display: block;
  width: 4rem;
  height: 4rem;
  transform: translate(-50%, -50%);
  border: 0.4rem solid rgba(77, 77, 77, 0.8);
  border-top-color: transparent;
  border-radius: 50%;
  background-image: none;
  animation: loading-spin 1s linear infinite;
  opacity: 0.8;
  z-index: 1;
}
.sc-access__map__wrapper.is-loading > * {
  opacity: 0;
}
@media screen and (min-width: 812px) {
  .sc-access {
    background: linear-gradient(to right, transparent 40%, var(--color-container) 40%);
  }
  .sc-access__map {
    aspect-ratio: 850/800;
  }
  .sc-access .m-search-container {
    height: 80rem;
  }
  .sc-access .m-search-container__header,
  .sc-access .m-search-container__inner {
    background-color: #fff;
  }
}
@media screen and (max-width: 811px) {
  .sc-access .m-search-container__inner {
    padding: 0 1rem;
  }
  .sc-access__transp__wrapper.is-loading {
    position: relative;
    height: 10rem;
    overflow: hidden;
  }
}

.sc-access__selector__caption {
  color: #4d4d4d;
}
.sc-access__selector__list li button {
  display: flex;
  align-items: center;
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  color: #c4c4c4;
  width: 100%;
  text-decoration: none;
}
@media (hover: hover) {
  .sc-access__selector__list li button {
    transition: color 0.3s;
  }
  .sc-access__selector__list li button:hover {
    color: var(--color-primary);
  }
}
.sc-access__selector__list li button .m-arrow {
  font-size: 50%;
  margin-left: 1em;
}
.sc-access__selector__list li button.is-active {
  color: var(--color-primary);
}
@media screen and (min-width: 812px) {
  .sc-access__selector__list li {
    margin-top: 1.2em;
  }
  .sc-access__selector__list li button {
    font-size: 2rem;
  }
  .sc-access__selector__list li button .m-arrow {
    opacity: 0;
    transition: opacity 0.3s;
  }
  .sc-access__selector__list li button.is-active .m-arrow {
    opacity: 1;
  }
}
@media screen and (max-width: 811px) {
  .sc-access__selector {
    padding: 3rem 1rem;
  }
  .sc-access__selector__caption {
    font-size: 1.5rem;
  }
  .sc-access__selector__list {
    display: flex;
    flex-wrap: wrap;
    -moz-column-gap: 1.5em;
    column-gap: 1.5em;
    row-gap: 0.7em;
    font-size: 1.6rem;
    margin-top: 1em;
  }
  .sc-access__selector__list li button .m-arrow {
    display: none;
  }
}

.sc-access__transp {
  border-bottom: 1px solid #d9d9d9;
}
.sc-access__transp__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  color: var(--color-primary);
}
.sc-access__transp__block__header {
  display: flex;
  align-items: center;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
  border-bottom: 1px dotted;
  color: var(--color-primary);
  -moz-column-gap: 0.5em;
  column-gap: 0.5em;
}
.sc-access__transp__block__header em {
  transform: scale(1.8);
}
.sc-access__transp__block__header em.m-icon-iti-ship {
  transform: scale(2.2);
}
.sc-access__transp__block__ttl {
  font-weight: 600;
}
.sc-access__transp__block__note {
  margin-top: 0.5em;
  color: #a5a5a5;
}
@media screen and (min-width: 812px) {
  .sc-access__transp {
    padding-bottom: 2rem;
  }
  .sc-access__transp__ttl {
    font-size: 2rem;
  }
  .sc-access__transp__block {
    margin-top: 2rem;
  }
  .sc-access__transp__block__header {
    font-size: 1.5rem;
  }
  .sc-access__transp__block__note {
    font-size: 1rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-access__transp {
    padding-bottom: 4rem;
  }
  .sc-access__transp__ttl {
    font-size: 2.4rem;
  }
  .sc-access__transp__block {
    margin-top: 3rem;
  }
  .sc-access__transp__block__header {
    font-size: 1.9rem;
  }
  .sc-access__transp__block__note {
    font-size: 1.5rem;
  }
}

.sc-access__transp__item:has(.sc-access__transp__item__caption) {
  padding-left: 1.5em;
}
.sc-access__transp__item:has(.sc-access__transp__item__caption):not(:last-child) {
  padding-bottom: 0.75em;
  margin-bottom: 0.5em;
  border-bottom: 1px dotted;
}
.sc-access__transp__item__caption {
  position: relative;
}
.sc-access__transp__item__caption em {
  position: absolute;
  top: 0.6em;
  left: -1.5em;
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 1.5em;
  aspect-ratio: 1/1;
  border: 1px solid;
  border-radius: 50%;
  text-indent: 0;
  color: var(--color-primary);
  transform-origin: left center;
  transform: translateY(-50%) scale(0.75);
}
.sc-access__transp__item__caption {
  font-weight: 600;
}
.sc-access__transp__item__caption em {
  font-style: normal;
}
.sc-access__transp__item__inner + .sc-access__transp__item__inner {
  margin-top: 1.2em;
}
.sc-access__transp__item__time {
  font-weight: 600;
}
.sc-access__transp__item__time em {
  font-style: normal;
}
.sc-access__transp__item__note {
  margin-top: 0.25em;
}
.sc-access__transp__item .by_bus {
  position: relative;
  display: inline-block;
}
.sc-access__transp__item .by_bus:before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 1.5em);
  width: 1em;
  height: 1em;
  color: var(--color-primary);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-image: url("../img/common/icon_iti_bus.svg");
  mask-image: url("../img/common/icon_iti_bus.svg");
  background: currentColor;
  transform: translate(100%, -50%) scale(1.5);
}
@media screen and (min-width: 812px) {
  .sc-access__transp__item {
    font-size: 1.5rem;
  }
  .sc-access__transp__item__note {
    font-size: 1rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-access__transp__item {
    font-size: 1.9rem;
  }
  .sc-access__transp__item__note {
    font-size: 1.5rem;
  }
}

.sc-access__area__ttl {
  font-family: "Dosis", "Yu Gothic", YuGothic, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  color: var(--color-primary);
}
@media screen and (min-width: 812px) {
  .sc-access__area {
    padding-top: 1.5rem;
  }
  .sc-access__area__ttl {
    font-size: 2rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-access__area {
    padding-bottom: 3rem;
    padding-top: 4rem;
  }
  .sc-access__area__ttl {
    font-size: 2.4rem;
  }
}

.sc-access__area__item__image {
  aspect-ratio: 320/194;
}
.sc-access__area__item__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.sc-access__area__item .m-more {
  margin-top: 0.5em;
  color: var(--color-tertiary);
}
@media screen and (min-width: 812px) {
  .sc-access__area__item {
    padding-top: 1.5rem;
  }
}
@media screen and (max-width: 811px) {
  .sc-access__area__item {
    padding-top: 1rem;
  }
  .sc-access__area__item .m-more {
    font-size: 1.4rem;
  }
}