/*
Theme Name: 出雲シティプロモーションWebサイトテーマ
Version: 1.0.0
*/
@font-face {
  font-family: "MOBO";
  src: url("./assets/fonts/mobo-bold-subset.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* フォント */
  --font-ja: "Zen Kaku Gothic New", sans-serif;
  --font-zenmaru: "Zen Maru Gothic", sans-serif;
  --font-mobo: "MOBO", sans-serif;
  --font-size-base: 16px;
  --font-lign-height-base: 1.5;
  --font-weight-regular: 400;
  --font-weight-normal: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* カラーパレット */
  --color-main: #EB703B;
  --color-font: #5B412F;
  --color-sub: #E2C672;
  --color-blue-base: #638FA0;
  --color-border-base: #B9B19B;
  --color-gold-base: #B6A068;
  --color-border-light: #CAAD96;
  --color-blue-accent: #6D8EAB;
  --color-white: #FFFFFF;

  /* 用途別カラー */
  --color-text: var(--color-font);
  --color-text-white: var(--color-white);
  --color-background: var(--color-main);
  --color-primary: var(--color-main);
  --color-accent: var(--color-sub);
  --color-border: var(--color-border-base);
  --global-nav-surface: var(--color-white);
  --global-nav-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  --noise-white-multi: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="noise-white-multi"><feTurbulence type="fractalNoise" baseFrequency="0.8 0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="120" height="120" filter="url(%23noise-white-multi)" opacity="0.15"/></svg>');
  --noise-peach-mono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="noise-peach-mono"><feTurbulence type="fractalNoise" baseFrequency="0.33 0.33" numOctaves="1" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/><feColorMatrix type="matrix" values="0.9176 0 0 0 0 0 0.8510 0 0 0 0 0 0.6549 0 0 0 0 0 1 0"/></filter><rect width="120" height="120" filter="url(%23noise-peach-mono)" opacity="0.3"/></svg>');
  --noise-cream-mono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="noise-cream-mono"><feTurbulence type="fractalNoise" baseFrequency="0.8 0.8" numOctaves="1" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/><feColorMatrix type="matrix" values="0.9176 0 0 0 0 0 0.8510 0 0 0 0 0 0.6549 0 0 0 0 0 1 0"/></filter><rect width="120" height="120" filter="url(%23noise-cream-mono)" opacity="0.3"/></svg>');
  --noise-ivory-mono: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="noise-ivory-mono"><feTurbulence type="fractalNoise" baseFrequency="0.8 0.8" numOctaves="1" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/><feColorMatrix type="matrix" values="0.9176 0 0 0 0 0 0.8510 0 0 0 0 0 0.6549 0 0 0 0 0 1 0"/></filter><rect width="120" height="120" filter="url(%23noise-ivory-mono)" opacity="0.3"/></svg>');

  /* .page-lower + .article-search の背景重なり量（兄弟結合子のため:rootで共有） */
  --article-search-overlap: 160px;
  --article-search-gap: 30px;

  @media (max-width: 1000px) {
    --article-search-overlap: 90px;
  }
}

/* レイアウト基礎 */
html {
  font-family: var(--font-ja);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-base);
  line-height: var(--font-lign-height-base);
  font-style: normal;
}

body {
  letter-spacing: 1px;
  overflow-x: hidden;
}

.page-main {
  overflow: hidden;
}


/* 1000pxで切り替え */
@media (min-width: 1001px) {
  .sp-only-1000 {
    display: none !important;
  }
}

@media (max-width: 1000px) {
  .pc-only-1000 {
    display: none !important;
  }
}

/* 600pxで切り替え */
@media (min-width: 601px) {
  .sp-only {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .pc-only {
    display: none !important;
  }
}

/* ==== 共通コンポーネント ==== */
/* サイト全体（トップページ・下層ページ共通）で使用するパーツ */

/* ヘッダー */
/* ロゴを固定追従から外すため .header 自体は absolute。ビューポート追従が必要な
   メニューボタンは個別に fixed、global-nav は元々独立 fixed。 */
.header {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;

  .header__inner {
    position: relative;
    width: 100%;
    height: 136px;

    @media (max-width: 1000px) {
      height: 108px;
    }
  }

  /* サイズ・余白は top-kv.css の .kv-logo と一致させること */
  .header__logo {
    position: absolute;
    top: 0;
    left: 46px;
    display: flex;
    align-items: center;
    width: 180px;
    padding: 15px 20px;
    background-color: var(--color-white);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.15);
    pointer-events: auto;

    @media (max-width: 1000px) {
      left: 20px;
      gap: 10px;
    }

    @media (max-width: 600px) {
      width: 115px;
      left: 20px;
    }

    &:has(> .header__logo__link) {
      padding: 0;
      margin-bottom: 0;
    }
  }

  .header__logo__link {
    padding: 15px 20px;

    @media (max-width: 600px) {
      padding: 15px;
    }
  }

  .header__logo-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;

    > img {
      width: 203px;
    }

    @media (max-width: 1000px) {
      gap: 5px;

      > img {
        width: min(170px, 100%);
      }
    }
  }

  .header__menu-button {
    position: fixed;
    top: 0;
    right: 0;
    display: block;
    width: 117px;
    height: 113px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    pointer-events: auto;
    outline: none;

    img {
      width: 100%;
      height: 100%;
    }

    @media (max-width: 1000px) {
      width: 72px;
      height: 72px;
    }
  }
}

/* グローバルナビ */
.global-nav {
  position: fixed;
  z-index: 1001;
  top: 0;
  right: 0;
  width: min(700px, 100vw);
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  color: var(--color-main);
  transform: translateX(100%);
  transition: transform 0.35s ease;
  pointer-events: auto;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.65);

  &.is-open {
    transform: translateX(0);
  }

  .global-nav__inner {
    background-color: var(--global-nav-surface);
    position: relative;
    z-index: 1;
    min-height: 100%;
    padding: 90px 90px 270px;

    @media (max-width: 1000px) {
      padding: 55px 90px 160px;
    }

    @media (max-width: 600px) {
      padding-inline: 20px;
    }

    &::before {
      content: "";
      position: absolute;
      z-index: 0;
      inset: 0;
      background-image: var(--global-nav-noise);
      background-repeat: repeat;
      background-size: 120px 120px;
      opacity: 0.08;
      pointer-events: none;
    }
  }

  .global-nav__close {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 117px;
    height: 113px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    pointer-events: auto;

    img {
      width: 100%;
      height: 100%;
    }

    @media (max-width: 1000px) {
      width: 72px;
      height: 72px;
    }

  }

  .global-nav__list,
  .global-nav__sub-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .global-nav__list {
    width: 482px;
    max-width: 100%;

    @media (max-width: 1000px) {
      width: 100%;
    }
  }

  .global-nav__item {
    position: relative;
    margin: 0;
    border-bottom: 1px solid rgba(185, 177, 155, 0.45);

    &:first-child {
      border-top: 0;
    }

    &.global-nav__item--has-children {
      padding-bottom: 25px;
    }
  }

  .global-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    padding: 25px 35px 25px 0;
    color: var(--color-main);
    font-family: var(--font-ja);
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    line-height: 1.35;
    letter-spacing: 0.044em;
    text-decoration: none;
    transition: opacity .2s;

    &:is(a):hover,
    &:is(a):focus-visible {
      opacity: .8;
    }

    &:is(a)::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 15px;
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 9px solid var(--color-sub);
      transform: translateY(-50%);
    }

    @media (max-width: 1000px) {
      font-size: 22px;
    }

    @media (max-width: 600px) {
      font-size: 20px;
      padding-block: 20px;
    }
  }

  .global-nav__sub-list {
    display: grid;
    gap: 25px;
    padding: 0 0 0 50px;

    @media (max-width: 1000px) {
      gap: 14px;
      padding-left: 38px;
    }

  }

  .global-nav__sub-item {
    position: relative;
    margin: 0;

    &::before {
      content: "-";
      position: absolute;
      top: 40%;
      left: -29px;
      color: var(--color-sub);
      font-size: 25px;
      font-weight: var(--font-weight-black);
      line-height: 1;
      transform: translateY(-50%);
    }
  }

  .global-nav__sub-item--child {
    margin-top: -5px;
    margin-bottom: 5px;

    &::before {
      display: none;
    }

    .global-nav__sub-link {
      font-weight: var(--font-weight-normal);
      font-size: 18px;

      @media (max-width: 600px) {
        font-size: 15px;
      }
    }
  }

  .global-nav__sub-link {
    display: inline-block;
    color: #7d766b;
    font-family: var(--font-ja);
    font-size: 20px;
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
    letter-spacing: 0.056em;
    text-decoration: none;
    font-weight: var(--font-weight-bold);

    &:hover,
    &:focus-visible {
      color: var(--color-main);
    }

    @media (max-width: 1000px) {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      font-size: 17px;
    }
  }

  .global-nav__instagram {
    display: block;
    width: 260px;
    max-width: 100%;
    min-height: 0;
    margin: 40px auto 0;
    text-decoration: none;
    transition: opacity .2s;

    &:hover,
    &:focus-visible {
      opacity: .8;
    }

    @media (max-width: 1000px) {
      margin-top: 42px;
      width: min(300px, 100%);
    }

    @media (max-width: 600px) {
      width: min(240px, 100%);
      margin-top: 20px;
    }

  }

  .global-nav__instagram-image {
    width: 100%;
    max-width: 370px;
  }
}

/* ボタン */
.link-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
    width: min(330px, 100%);
    padding: 20px 60px;
  color: var(--color-main);
  font-family: var(--font-ja);
  font-size: 24px;
  font-weight: var(--font-weight-black);
  line-height: 1.4;
  letter-spacing: 0.058em;
  text-align: center;
  text-decoration: none;
  background-color: var(--color-white);

  @media (max-width: 1000px) {
    padding: 76px 20px 104px;
  }
  border-radius: 84px;
  box-shadow: 0 0 22px rgba(0, 0, 0, 0.2);
  transition:
    color 0.2s ease,
    background-color 0.2s ease;

  &::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 30px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid var(--color-sub);
    transform: translateY(-50%);
  }

  &:hover,
  &:focus-visible {
    color: var(--color-white);
    background-color: var(--color-main);

    &::after {
      border-left-color: var(--color-white);
    }
  }

  @media (max-width: 1000px) {
    min-height: 82px;
    padding: 18px 70px 20px;
    font-size: clamp(24px, 6vw, 32px);

    &::after {
      right: 38px;
    }
  }
}

.link-button--orange {
  color: var(--color-white);
  background-color: var(--color-main);

  &::after {
    border-left-color: var(--color-white);
  }

  &:hover,
  &:focus-visible {
    color: var(--color-main);
    background-color: var(--color-white);

    &::after {
      border-left-color: var(--color-sub);
    }
  }
}

/* クラウド枠（背景の紙質感フレーム） */
.cloud-frame {
  position: relative;
  isolation: isolate;

  &::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background-color: var(--cloud-frame-color, #fff);
    background-image: var(--cloud-frame-noise, none);
    background-blend-mode: var(--cloud-frame-noise-blend, normal);
    background-repeat: repeat;
    background-size: 120px 120px;
    background-position: center 0;
    -webkit-mask-image: var(--cloud-frame-mask, url("./assets/images/clouds/cloud_section_mask1.svg")), linear-gradient(#000, #000);
    mask-image: var(--cloud-frame-mask, url("./assets/images/clouds/cloud_section_mask1.svg")), linear-gradient(#000, #000);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center top, center calc(var(--cloud-height) - 2px);
    mask-position: center top, center calc(var(--cloud-height) - 2px);
    -webkit-mask-size: var(--cloud-width) var(--cloud-height), 100% calc(100% - var(--cloud-height) + 2px);
    mask-size: var(--cloud-width) var(--cloud-height), 100% calc(100% - var(--cloud-height) + 2px);
    pointer-events: none;
  }
}

.cloud-frame--cream { --cloud-frame-color: #FFF1ED; --cloud-frame-noise: var(--noise-cream-mono); }
.cloud-frame--ivory {
  --cloud-frame-color: #FFFCF9;
  --cloud-frame-noise: var(--noise-ivory-mono);
}
.cloud-frame--peach { --cloud-frame-color: #FFEAEA; --cloud-frame-noise: var(--noise-peach-mono); }
.cloud-frame--warm-white { --cloud-frame-color: #FAF7EB; --cloud-frame-noise: var(--noise-white-multi); }
.cloud-frame--white { --cloud-frame-color: #fff; --cloud-frame-noise: var(--noise-white-multi); }
.cloud-frame--plain { --cloud-frame-color: #fff; }
.cloud-frame--blue { --cloud-frame-color: #638FA0; --cloud-frame-noise: var(--noise-white-multi); --cloud-frame-noise-blend: multiply; }
.cloud-frame--light-peach { --cloud-frame-color: #FFE0D6; --cloud-frame-noise: var(--noise-white-multi); --cloud-frame-noise-blend: multiply; }
.cloud-frame--mask2 { --cloud-frame-mask: url("./assets/images/clouds/cloud_section_mask2.svg"); }

/* --- パフォーマンス最適化：下層ページのみ紙質感をラスタ画像化 / 雲マスクをインライン化 --- */
/* トップページ（body.home）は従来のSVGフィルター・外部マスクのまま。見た目は同一。 */
body:not(.home) {
  --noise-white-multi: url("./assets/images/clouds/noise-white-multi.webp");
  --noise-cream-mono: url("./assets/images/clouds/noise-cream-mono.webp");
  --noise-ivory-mono: url("./assets/images/clouds/noise-ivory-mono.webp");
}

body:not(.home) .cloud-frame:not(.cloud-frame--mask2) {
  --cloud-frame-mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwMSIgaGVpZ2h0PSIxMzkiIHZpZXdCb3g9IjAgMCAyMDAxIDEzOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxtYXNrIGlkPSJtYXNrMF8zMDEwXzM0IiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIxIiB5PSItMSIgd2lkdGg9IjIwMDAiIGhlaWdodD0iMTQwIj4NCjxyZWN0IHg9IjEiIHk9Ii0xIiB3aWR0aD0iMjAwMCIgaGVpZ2h0PSIxNDAiIGZpbGw9IiNEOUQ5RDkiLz4NCjwvbWFzaz4NCjxnIG1hc2s9InVybCgjbWFzazBfMzAxMF8zNCkiPg0KPHBhdGggZD0iTTExNDEuNTUgMEMxMTU5Ljg0IDYuNjUxODVlLTA1IDExNzQuNjcgNy41OTU0NiAxMTc0LjY3IDE2Ljk0MzdDMTE3NC42NyAxOC43MzkyIDExNzQuMTIgMjAuNDYzNyAxMTczLjExIDIyLjA4ODNDMTE3My42IDIyLjA3NCAxMTc0LjA3IDIyLjA3NDMgMTE3NC41NiAyMi4wNzQzQzExOTIuODQgMjIuMDc0MyAxMjA3LjY3IDI5LjY2OTcgMTIwNy42NyAzOS4wMThDMTIwNy42NyA0MS4wNDE1IDEyMDYuOTggNDIuOTY1MyAxMjA1LjcyIDQ0Ljc2MDhDMTIwNi4xMiA0NC43NDY1IDEyMDYuNDkgNDQuNzQ2OCAxMjA2Ljg5IDQ0Ljc0NjhDMTIxMi4zNSA0NC43NDY5IDEyMTcuMzYgNDUuNjg3MyAxMjIxLjM4IDQ3LjI2OTFDMTIyNC4wOCA0Ni40OTk2IDEyMjcuMTggNDYuMDcyIDEyMzAuNDcgNDYuMDcyQzEyMzcuOTkgNDYuMDcyIDEyNDQuNTEgNDguMzM3NCAxMjQ3LjUzIDUxLjYwMDZDMTI0OS42IDUxLjQxNTMgMTI1MS43MiA1MS4zMTU5IDEyNTMuODggNTEuMzE1OUMxMjY5LjQyIDUxLjMxNiAxMjgyLjY2IDU2LjMzMjQgMTI4Ny44IDYzLjM1NzhDMTI5MC41MSA2Mi4zMTc1IDEyOTMuNjggNjEuNjQ3NiAxMjk3LjEyIDYxLjUwNTFDMTMwNy4yOSA2MS4wNjM0IDEzMTUuODkgNjUuMzM4NSAxMzE2LjMgNzEuMDM4NkMxMzE2LjY4IDc2LjE1NDQgMTMxMC4zNyA4MC42NzE1IDEzMDEuNzMgODEuODY4NkMxMzAyLjAzIDgyLjI5NjEgMTMwMi4zIDgyLjczODEgMTMwMi41NCA4My4xNzk4QzEzMDcuNTIgODEuOTk3MSAxMzEzLjA0IDgxLjMyNzEgMTMxOC44OSA4MS4zMjcxQzEzMzkuODMgODEuMzI3MSAxMzU2Ljg2IDg5Ljc3ODMgMTM1Ny40NiAxMDAuMzI0QzEzNjAuNTQgMTAwLjAyNCAxMzYzLjcxIDk5Ljg2NzQgMTM2Ni45NiA5OS44Njc0QzEzNzMuMTMgOTkuODY3NCAxMzc5LjAxIDEwMC40MjMgMTM4NC40MiAxMDEuNDQ5QzEzODkuNDcgOTcuNjg3MyAxMzk3LjQzIDk1LjI2NDQgMTQwNi40IDk1LjI2NDRDMTQyMS42NyA5NS4yNjQ0IDE0MzQuMDQgMTAyLjI5IDE0MzQuMDQgMTEwLjk1NEMxNDM0LjA0IDExMS42NjcgMTQzMy45NiAxMTIuMzY1IDE0MzMuNzkgMTEzLjA0OUMxNDM3LjE3IDExMi4zMzcgMTQ0MC44MyAxMTEuOTUyIDE0NDQuNjYgMTExLjk1MkMxNDUyLjcgMTExLjk1MiAxNDYwLjAyIDExMy42NjIgMTQ2NS42IDExNi40ODRDMTQ2OS44IDExMi40NjUgMTQ3OC40OCAxMDkuNzAxIDE0ODguNSAxMDkuNzAxQzE0ODkuMTIgMTA5LjcwMSAxNDg5LjcgMTA5LjcxNCAxNDkwLjMgMTA5LjcyOEMxNDk1LjE1IDEwMy42ODYgMTUwNy4zOSA5OS4zOTczIDE1MjEuNzEgOTkuMzk3M0MxNTMwLjE0IDk5LjM5NzMgMTUzNy44NiAxMDAuODk0IDE1NDMuNzYgMTAzLjM0NUMxNTQ3LjkgOTkuNzM5NCAxNTU0LjI1IDk3LjAwMjcgMTU2MS43NiA5Ni4wNDc5QzE1NjcuNjkgOTUuMjkyNyAxNTczLjQyIDk1Ljc3NzcgMTU3OC4yNiA5Ny4xODg1QzE1ODAuOTEgOTQuMzM4NCAxNTg1LjUzIDkyLjEyOTUgMTU5MS4xIDkxLjQxN0MxNTkyLjYxIDkxLjIxNzQgMTU5NC4xMSA5MS4xNDYxIDE1OTUuNTUgOTEuMTg4OUMxNTk1LjY4IDkxLjA2MDcgMTU5NS44MiA5MC45NDY3IDE1OTUuOTUgOTAuODMyN0MxNTk1LjQyIDkwLjA2MzIgMTU5NS4wNSA4OS4yMzY0IDE1OTQuODYgODguMzY3MUMxNTk0LjYxIDg3LjMxMjcgMTU5NC42NSA4Ni4yNTgzIDE1OTQuOTMgODUuMjQ2N0MxNTkwLjg2IDgzLjgwNzQgMTU4Ny45MyA4MS4yODQzIDE1ODcuMjQgNzguMTQ5MkMxNTg2LjA3IDcyLjgwNTQgMTU5MS44MiA2Ny41NDcxIDE2MDAuMzIgNjUuODUxM0MxNjAxLjI4IDYxLjk3NTIgMTYwNS4yIDU4LjI4NCAxNjExLjAyIDU1LjQ3NjdDMTYxMC4xOCA1NC4xMDg4IDE2MDkuNzEgNTIuNjY5MyAxNjA5LjcxIDUxLjE3MzFDMTYwOS43MSA0My4wMzYyIDE2MjMuMzQgMzYuNDM4MyAxNjQwLjE2IDM2LjQzODNDMTY1Mi4wOCAzNi40Mzg0IDE2NjIuNDEgMzkuNzQ0NiAxNjY3LjQgNDQuNTc1M0MxNjY5LjkgNDQuMDkwOCAxNjcyLjQ5IDQzLjY5MTcgMTY3NS4xNiA0My4zNzgyQzE2NzYuMTUgMzguNjc1NiAxNjgyLjIgMzQuNTI4NSAxNjkwLjI1IDMzLjUwMjVDMTY5MS41OCAzMy4zMzE1IDE2OTIuOTIgMzMuMjc1MiAxNjk0LjIxIDMzLjI3NTJDMTY5My43OCAyOS42Njk4IDE2OTguMjMgMjYuMjA2NiAxNzA0LjQzIDI1LjQyMjlDMTcwNi42NiAyNS4xMzc5IDE3MDguODQgMjUuMjUxNyAxNzEwLjc1IDI1LjY2NDlDMTcxMi40NCAyMS4xNDc2IDE3MTggMTcuMzk5NSAxNzI1LjIzIDE2LjQ4NzRDMTczMS41NCAxNS42ODk1IDE3MzcuNTQgMTcuMjI4NyAxNzQxLjM0IDIwLjIwNjhDMTc0My4wMyAxOS4yNjYzIDE3NDUuMTMgMTguNTgyOCAxNzQ3LjUgMTguMjgzNkMxNzUwLjgyIDE3Ljg1NjEgMTc1My45NyAxOC4yODMyIDE3NTYuMzggMTkuMzA5MkMxNzU5LjI3IDE3LjE4NTkgMTc2My42OCAxNS42NDcgMTc2OC43NyAxNS4yMzM3QzE3NzQuMzQgMTQuNzc3OCAxNzc5LjQ5IDE1Ljc4OTkgMTc4Mi45NCAxNy42OTkzQzE3ODQuNDEgMTcuNDcxMyAxNzg1LjkxIDE3LjI4NjEgMTc4Ny40NSAxNy4xNTc4QzE3OTAuNzMgMTYuOTAxMyAxNzkzLjk0IDE2LjkwMTMgMTc5Ni45OCAxNy4xNTc4QzE4MDIuMjggMTMuMDk2NSAxODEwLjU4IDEwLjExOCAxODIwLjIxIDkuMzM0MTlDMTgzNy42NSA3LjkyMzQ2IDE4NTIuODYgMTQuMjUwNSAxODU0LjE1IDIzLjQ4NDhDMTg1NC4zNCAyNC43NjczIDE4NTQuMjMgMjYuMDUwMyAxODUzLjg3IDI3LjMwNDNDMTg1Ny41MyAyNi4xNSAxODYxLjYxIDI1LjM1MTYgMTg2NS45NiAyNC45OTU0QzE4NzcuMyAyNC4wNjkxIDE4ODcuNyAyNi40MzQ4IDE4OTMuOTQgMzAuNzI0MkMxODk2LjM2IDMwLjExMTUgMTg5OC45MSAyOS42ODM0IDE5MDEuNiAyOS40Njk2QzE5MDMuNTcgMjkuMzEyOSAxOTA1LjUyIDI5LjI4NDQgMTkwNy40MyAyOS4zNTU2QzE5MTEuNjQgMjIuMDg4IDE5MjEuNzIgMTYuNTE2MiAxOTM0LjEzIDE1LjUwNDVDMTk0OS44MSAxNC4yMzY0IDE5NjMuODcgMjAuNjc3NCAxOTY3Ljc0IDMwLjMyNDZDMTk2OC40NSAzMC4yMTA2IDE5NjkuMTYgMzAuMTEwOSAxOTY5LjkyIDMwLjA1MzlDMTk3OS41MSAyOS4yODQ0IDE5ODguMDUgMzMuNDYgMTk4OS43NiAzOS41NDQ4QzE5ODkuOTUgMzkuNjczIDE5OTAuMTUgMzkuODE2MSAxOTkwLjM0IDM5Ljk0NDRDMTk5My40OCAzNS40MjcgMjAwMC42OSAzMi4wNjM0IDIwMDkuNTMgMzEuMDUxNkMyMDExLjk5IDI0LjA5NzUgMjAyMy41NSAxOS4wOTU4IDIwMzcuMTcgMTkuNTIzNEMyMDQ4Ljk2IDE5LjkwODEgMjA1OC43OCAyNC4yNDAxIDIwNjIuMjkgMjkuOTk3MkMyMDY0Ljk3IDI5LjM3MDMgMjA2OC4wMyAyOS4wNTY1IDIwNzEuMjYgMjkuMTU2MkMyMDgwLjY4IDI5LjQ1NTUgMjA4OC4zMSAzMy4xNzUgMjA4OS40NSAzNy43NjM0QzIxMTIuOTkgMzkuNjMwMiAyMTMxLjM0IDUwLjIxODYgMjEzMy4yNyA2Mi45NDQyQzIxMzYuNDYgNjIuNTQ1MiAyMTM5LjgyIDYyLjM3NCAyMTQzLjI4IDYyLjQ4OEMyMTYyLjc1IDYzLjEwMDkgMjE3OC4wNyA3Mi4xMDczIDIxNzcuNDkgODIuNTk1NkMyMTc3LjQzIDgzLjY2NDQgMjE3Ny4yIDg0LjcwNTEgMjE3Ni44MyA4NS43MTY4QzIxODAuMDYgODUuMDA0MyAyMTgzLjYyIDg0LjY2MTcgMjE4Ny4zNCA4NC43NzU3QzIyMDEuNDQgODUuMjE3NSAyMjEyLjU0IDkyLjExNTIgMjIxMi4wOSAxMDAuMTgxQzIyMTIuMDUgMTAwLjgwOCAyMjExLjk2IDEwMS40MDcgMjIxMS43OSAxMDEuOTkxQzIyMTQuMzggMTAxLjc5MSAyMjE3LjA0IDEwMS43MiAyMjE5Ljc4IDEwMS44MDZDMjI0MCAxMDIuNDQ3IDIyNTUuOTQgMTExLjA4MiAyMjU1LjQgMTIxLjExNUMyMjU1LjM0IDEyMS44ODQgMjI1NS4xNyAxMjIuNjQgMjI1NC45NSAxMjMuMzgxSDIyNTZWODgzLjA1OUgyMTA2LjQ1VjIwOThILTExNC4xNDVWNzk4LjE5OEgtOTkuNTEzVjE0Ny42MDdDLTExMi42OTIgMTQ2Ljg2NiAtMTIzIDE0MC40MjQgLTEyMyAxMzIuNTcyQy0xMjMgMTI0LjIzNiAtMTExLjM2IDExNy40NjcgLTk2Ljk5NzYgMTE3LjQ2N0MtOTYuMzU5MiAxMTcuNDY3IC05NS43MjA1IDExNy40ODEgLTk1LjEwMDkgMTE3LjUwOUMtOTMuODI0MiAxMTEuMzM5IC04NC43OTQxIDEwNi41NjUgLTczLjg0ODcgMTA2LjU2NUMtNzAuNDMxOSAxMDYuNTY1IC02Ny4yMDI4IDEwNy4wMjEgLTY0LjM0OTIgMTA3Ljg0OEMtNjQuMzg2NyAxMDcuNTA2IC02NC40MjQxIDEwNy4xNjMgLTY0LjQyNDEgMTA2LjgyMUMtNjQuNDI0IDEwMC44MDggLTU3LjA4MjggOTUuNzkxOCAtNDcuMzM5IDk0LjYzNzVDLTQ4LjgwMzQgOTIuOTU1OSAtNDkuNjI5NSA5MS4wNDYgLTQ5LjYyOTUgODkuMDM2NkMtNDkuNjI5MyA4Mi4xNjggLTQwLjA1NDIgNzYuNTk2IC0yOC4yMjY1IDc2LjU5NkMtMjEuNDQ5MiA3Ni41OTYgLTE1LjQyMjYgNzguNDM0NCAtMTEuNDk4OCA4MS4yODQ0Qy05LjAzOTE5IDc0LjMzMDMgMS41NDk5OCA2OS4xMDA2IDE0LjI0MTMgNjkuMTAwNkMyMi42NzA5IDY5LjEwMDYgMzAuMTYxOCA3MS40MDkzIDM0Ljk2OCA3NC45ODYxQzM4LjQ5NzYgNzIuMzY0IDQzLjAwMzcgNzAuMTk3NiA0OC4xNjY2IDY4LjY4N0M0Ny45MjI2IDY3Ljg0NjQgNDcuNzkxIDY2Ljk5MTUgNDcuNzkxIDY2LjEwODFDNDcuNzkxIDU3LjY3MTkgNTkuNTQ0IDUwLjg0NTcgNzQuMDU2NyA1MC44NDU3Qzg2Ljg5ODIgNTAuODQ1OCA5Ny41OTkxIDU2LjIwNCA5OS44NzA4IDYzLjI4NjRDMTAyLjQyNCA2Mi44MDE5IDEwNS4xNDcgNjIuNTQ1NSAxMDcuOTYzIDYyLjU0NTVDMTIyLjQ3NSA2Mi41NDU1IDEzNC4yMjggNjkuMzg1OSAxMzQuMjI4IDc3LjgwNzlDMTM0LjIyOCA3OC44NjIzIDEzNC4wNiA3OS44ODg1IDEzMy43MDMgODAuODcxN0MxMzYuNjMyIDgwLjIxNjIgMTM5Ljc4NSA3OS44NiAxNDMuMTA4IDc5Ljg2QzE1MC41NDMgNzkuODYgMTU3LjI0NSA4MS42NTUxIDE2Mi4wMTQgODQuNTMzNkMxNjQuOTggODMuNTM2MSAxNjguNDM1IDgyLjk1MTcgMTcyLjEzMyA4Mi45NTE3QzE3NC4zODYgODIuOTUxNyAxNzYuNTQ2IDgzLjE2NTYgMTc4LjU3NCA4My41NjQ2QzE3OC4xMDQgODIuNDI0NyAxNzcuODYgODEuMjQyMSAxNzcuODYgODAuMDE2N0MxNzcuODYgNzEuNDA5NCAxODkuODc2IDY0LjQyNjEgMjA0LjY4OSA2NC40MjYxQzIxOS41MDIgNjQuNDI2MSAyMzEuNTE3IDcxLjQwOTQgMjMxLjUxNyA4MC4wMTY3QzIzMS41MTcgODAuMjg3NCAyMzEuNDk5IDgwLjU1ODQgMjMxLjQ4IDgwLjgyOUMyMzEuOTg3IDgwLjgwMDUgMjMyLjUxMyA4MC44MDAzIDIzMy4wMzggODAuODAwM0MyNDcuODUxIDgwLjgwMDQgMjU5Ljg2NyA4Ny43ODI5IDI1OS44NjcgOTYuMzkwMUMyNTkuODY3IDk4LjE4NTYgMjU5LjM0MSA5OS45MSAyNTguMzg0IDEwMS41MDZDMjU5LjMyMiAxMDEuMjY0IDI2MC4yOTkgMTAxLjA5MyAyNjEuMzMxIDEwMC45NjRDMjY0LjE2NiA5OS4yMjYgMjY3LjU4MyA5Ny44MTUyIDI3MS40MTMgOTYuODg5QzI3NC4xMzUgOTEuNzE2MSAyODEuOTgzIDg3LjY1NDUgMjkxLjY1MiA4Ny4wMTMyQzI5Ni4yNyA4Ni43MTQgMzAwLjY2MyA4Ny4yMjcxIDMwNC40MTggODguMzY3MUMzMDQuOTgxIDg2Ljg3MDggMzA1Ljg0NSA4NS40NzQzIDMwNi45MzQgODQuMTc3NUMzMDQuMDk5IDgyLjY5NTUgMzAyLjEyOCA4MC42MTUgMzAxLjU4NCA3OC4xMjEzQzMwMC40MiA3Mi43Nzc0IDMwNi4xNjQgNjcuNTE4NSAzMTQuNjY5IDY1LjgyMjZDMzE1LjYyNiA2MS45NDY2IDMxOS41NTEgNTguMjU2MSAzMjUuMzcgNTUuNDQ4OEMzMjQuNTI2IDU0LjA4MDkgMzI0LjA1NiA1Mi42NDE0IDMyNC4wNTYgNTEuMTQ1MkMzMjQuMDU2IDQzLjAwODIgMzM3LjY4NyAzNi40MDk2IDM1NC41MDkgMzYuNDA5NkMzNjYuNDMgMzYuNDA5NyAzNzYuNzU2IDM5LjcxNiAzODEuNzUgNDQuNTQ2NkMzODQuMjQ3IDQ0LjA2MjEgMzg2LjgzOCA0My42NjM4IDM4OS41MDQgNDMuMzUwM0MzOTAuNDk5IDM4LjY0NzcgMzk2LjU0NSAzNC41MDA2IDQwNC41OTkgMzMuNDc0NkM0MDUuOTMyIDMzLjMwMzYgNDA3LjI2NSAzMy4yNDY1IDQwOC41NiAzMy4yNDY1QzQwOC4xMjggMjkuNjQxMSA0MTIuNTc4IDI2LjE3NzkgNDE4Ljc3NCAyNS4zOTQxQzQyMS4wMDggMjUuMTA5MiA0MjMuMTg2IDI1LjIyMyA0MjUuMTAxIDI1LjYzNjJDNDI2Ljc5MSAyMS4xMTkgNDMyLjM0NyAxNy4zNzE2IDQzOS41NzUgMTYuNDU5NUM0NDUuODg0IDE1LjY2MTUgNDUxLjg5MiAxNy4yMDA2IDQ1NS42ODQgMjAuMTc4OUM0NTcuMzc0IDE5LjIzODUgNDU5LjQ3NyAxOC41NTQxIDQ2MS44NDIgMTguMjU0OEM0NjUuMTY1IDE3LjgyNzQgNDY4LjMxOSAxOC4yNTQ2IDQ3MC43MjIgMTkuMjgwNUM0NzMuNjEzIDE3LjE1NzIgNDc4LjAyNiAxNS42MTgyIDQ4My4xMTQgMTUuMjA1QzQ4OC42ODkgMTQuNzQ5IDQ5My44MzQgMTUuNzYxMSA0OTcuMjg4IDE3LjY3MDZDNDk4Ljc1MyAxNy40NDI3IDUwMC4yNTQgMTcuMjU3MyA1MDEuNzk0IDE3LjEyOTFDNTA1LjA3OSAxNi44NzI2IDUwOC4yOSAxNi44NzI2IDUxMS4zMzIgMTcuMTI5MUM1MTYuNjI2IDEzLjA2NzggNTI0LjkyNCAxMC4wODkyIDUzNC41NTUgOS4zMDU0N0M1NTEuOTk3IDcuODk0NzcgNTY3LjIwMyAxNC4yMjE5IDU2OC40OTkgMjMuNDU2MUM1NjguNjg3IDI0LjczODYgNTY4LjU3NCAyNi4wMjE1IDU2OC4yMTcgMjcuMjc1NkM1NzEuODc4IDI2LjEyMTMgNTc1Ljk1MyAyNS4zMjI5IDU4MC4zMDggMjQuOTY2N0M1OTEuNjQ4IDI0LjA0MDQgNjAyLjA0OSAyNi40MDYxIDYwOC4yODIgMzAuNjk1NUM2MTAuNzA0IDMwLjA4MjggNjEzLjI3NiAyOS42NTU1IDYxNS45NDIgMjkuNDQxOEM2MTcuOTEzIDI5LjI4NSA2MTkuODY2IDI5LjI1NjUgNjIxLjc4MSAyOS4zMjc3QzYyNS45ODYgMjIuMDYgNjM2LjA2OSAxNi40ODc1IDY0OC40NzkgMTUuNDc1N0M2NjQuMTU1IDE0LjIwNzYgNjc4LjIxNyAyMC42NDkzIDY4Mi4wODQgMzAuMjk2N0M2ODIuNzk4IDMwLjE4MjcgNjgzLjUxMSAzMC4wODMgNjg0LjI2MiAzMC4wMjZDNjkzLjg1NiAyOS4yNTY0IDcwMi4zOTggMzMuNDMxOSA3MDQuMTA3IDM5LjUxNjlDNzA0LjI5NSAzOS42NDUxIDcwNC41MDEgMzkuNzg3NCA3MDQuNjg5IDM5LjkxNTZDNzA3LjgyNCAzNS4zOTgzIDcxNS4wMzQgMzIuMDM0NyA3MjMuODc3IDMxLjAyMjlDNzI2LjMzNiAyNC4wNjg5IDczNy45MDEgMTkuMDY3MSA3NTEuNTEyIDE5LjQ5NDZDNzYzLjMwMyAxOS44Nzk0IDc3My4xMjIgMjQuMjExNCA3NzYuNjMzIDI5Ljk2ODVDNzc5LjMxNyAyOS4zNDE2IDc4Mi4zNzggMjkuMDI4NiA3ODUuNjA3IDI5LjEyODNDNzk1LjAzMSAyOS40Mjc2IDgwMi42NTQgMzMuMTQ2OSA4MDMuNzk5IDM3LjczNTVDODI3LjM0MiAzOS42MDIzIDg0NS42ODUgNTAuMTkgODQ3LjYxOSA2Mi45MTU1Qzg1MC44MSA2Mi41MTY1IDg1NC4xNzEgNjIuMzQ2MSA4NTcuNjI1IDYyLjQ2MDFDODY3LjUzOCA2Mi43NzM3IDg3Ni4zNDMgNjUuMjY3NCA4ODIuNTU3IDY5LjAxNTJDODg0LjYwNCA2Ni42MzU0IDg4Ny41MzMgNjQuNTU0NiA4OTEuMTE5IDYyLjkwMTZWNjIuNzU4OEM4OTEuMTIgNTIuNzI2NyA5MDYuMTIgNDQuNTkwMiA5MjMuNTQyIDQ0LjU5MDFDOTQwLjk2NSA0NC41OTAxIDk1NS4xNzcgNTIuMjk5NCA5NTUuOTI4IDYxLjk2MTNDOTU3LjQxMSA2MS44MTg4IDk1OC45MzIgNjEuNzQ3MSA5NjAuNDkgNjEuNzQ3MUM5NzEuNjA0IDYxLjc0NzEgOTgxLjE0MiA2NS40OTUxIDk4NS4zMjkgNzAuODUzMkM5ODYuNDU1IDcwLjc1MzQgOTg3LjYwMSA3MC42OTY1IDk4OC43NjUgNzAuNjk2NUM5OTEuMDU1IDcwLjY5NjUgOTkzLjI3IDcwLjkxMDIgOTk1LjM3MyA3MS4yODA3Qzk5Ni4zODcgNjQuOTUzNSAxMDA2Ljc1IDU5Ljk2NTggMTAxOS40IDU5Ljk2NThDMTAxOS45NSA1OS45NjU4IDEwMjAuNDkgNTkuOTgwMiAxMDIxLjAyIDU5Ljk5NDVDMTAyMS42OCA1OS41MSAxMDIyLjM1IDU5LjAyNSAxMDIzLjAzIDU4LjU0MDVDMTAyMi42MiA1Ny42NDI4IDEwMjIuMzkgNTYuNzE2NCAxMDIyLjM5IDU1Ljc0NzVDMTAyMi4zOSA1NC45NjM4IDEwMjIuNTQgNTQuMTk0MiAxMDIyLjgyIDUzLjQ1MzNDMTAxMy42MiA1MS43MTQ4IDEwMDcuMDcgNDcuMTgzNSAxMDA3LjA3IDQxLjg4MjRDMTAwNy4wNyAzNS4wNzA3IDEwMTcuODcgMjkuNTQxIDEwMzEuMTkgMjkuNTQxQzEwMzQuOTMgMjkuNTQxMSAxMDM4LjQ4IDI5Ljk4MzEgMTA0MS42NSAzMC43NjY5QzEwNDYuNjUgMjUuMDM4MyAxMDU3Ljg1IDIxLjA0NzkgMTA3MC45IDIxLjA0NzlDMTA3My4wNiAyMS4wNDc5IDEwNzUuMTYgMjEuMTQ3NiAxMDc3LjIxIDIxLjM2MTNDMTA3Ny42MSAxNC43MjA3IDEwODguMjUgOS40MDU2NCAxMTAxLjMyIDkuNDA1NTdDMTEwNC43NSA5LjQwNTU3IDExMDggOS43NzU3IDExMTAuOTcgMTAuNDMxMkMxMTE1Ljk2IDQuMzAzNjEgMTEyNy43NyAwIDExNDEuNTUgMFoiIGZpbGw9IndoaXRlIi8+DQo8L2c+DQo8L3N2Zz4NCg==");
}

/* 雲イラスト部品・ゆれアニメーション */
@keyframes shakeRightLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -webkit-transform: translateX(-15px);
    transform: translateX(-15px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes shakeLeftRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -webkit-transform: translateX(15px);
    transform: translateX(15px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.inline-cloud-svg {
  overflow: visible;
}

.inline-cloud-part {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .shakeRightLeft {
    animation: shakeRightLeft 7.5s ease-in-out infinite;
  }

  .shakeLeftRight {
    animation: shakeLeftRight 7.5s ease-in-out infinite;
  }
}

/* 記事検索 */
.article-search {
  position: relative;
  padding-top: 70px;
  background-color: var(--color-white);
  z-index: 3;

  .article-search__surface {
    position: relative;
    padding: 104px 35px 145px;
    background-color: var(--color-main);
    border-radius: 100px 100px 0 0;

    @media (max-width: 1000px) {
      padding: 76px 20px 106px;
      border-radius: 48px 48px 0 0;
    }
  }

  .article-search__inner {
    position: relative;
    z-index: 2;
    width: min(1100px, 100%);
    margin: 0 auto;
  }

  .article-search__heading {
    color: var(--color-white);
    text-align: center;
  }

  .article-search__title {
    margin: 0;
    font-family: var(--font-mobo);
    font-size: 45px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.04em;

    @media (max-width: 1000px) {
      font-size: clamp(38px, 10vw, 51px);
    }
  }

  .article-search__subtitle {
    margin: 12px 0 0;
    font-family: var(--font-ja);
    font-size: 16px;
    font-weight: var(--font-weight-black);
    line-height: 1.5;
    letter-spacing: 0.04em;

    @media (max-width: 1000px) {
      margin-top: 8px;
      font-size: 15px;
    }
  }

  .article-search__form {
    display: grid;
    grid-template-columns: minmax(0, 615px) 155px;
    width: min(600px, 100%);
    height: 75px;
    margin: 35px auto 0;
    overflow: hidden;
    background-color: var(--color-white);
    border: 2px solid var(--color-font);
    border-radius: 80px;

    @media (max-width: 1000px) {
      grid-template-columns: minmax(0, 1fr) 129px;
      height: 63px;
      margin-top: 38px;
      border-radius: 48px;
    }

    @media (max-width: 450px) {
      grid-template-columns: minmax(0, 1fr) 59px;
    }
  }

  .article-search__input {
    width: 100%;
    min-width: 0;
    padding: 0 20px 0 45px;
    color: var(--color-font);
    font-family: var(--font-ja);
    font-size: 18px;
    font-weight: var(--font-weight-normal);
    line-height: 1.4;
    letter-spacing: 0.04em;
    background-color: var(--color-white);
    border: 0;
    outline: 0;

    &::placeholder {
      color: var(--color-font);
      opacity: 1;
    }

    @media (max-width: 1000px) {
      padding: 0 24px;
      font-size: 19px;
    }

    @media (max-width: 600px) {
      font-size: 16px;
    }

    @media (max-width: 450px) {
      font-size: 14px;
    }
  }

  .article-search__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0 28px;
    color: var(--color-white);
    font-family: var(--font-ja);
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    letter-spacing: 0.18em;
    background-color: var(--color-font);
    border: 0;
    cursor: pointer;

    @media (max-width: 1000px) {
      gap: 10px;
      padding: 0 17px;
      font-size: 18px;
      letter-spacing: 0.12em;
    }

    @media (max-width: 600px) {
      font-size: 16px;
    }

    @media (max-width: 450px) {
      > span {
        display: none;
      }
    }

    img {
      display: block;
      width: 26px;
      height: auto;

      @media (max-width: 1000px) {
        width: 24px;
      }

      @media (max-width: 600px) {
        width: 18px;
      }
    }
  }

  .article-search__tag-area {
    margin-top: 55px;
    padding-top: 40px;
    border-top: 2px solid rgba(255, 255, 255, 0.55);
    text-align: center;

    @media (max-width: 600px) {
      margin-top: 40px;
      padding-top: 30px;
    }
  }

  .article-search__tag-title {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-ja);
    font-size: 22px;
    font-weight: var(--font-weight-black);
    line-height: 1.5;
    letter-spacing: 0.04em;

    @media (max-width: 1000px) {
      font-size: 22px;
    }
  }

  .article-search__tags {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 34px 19px;
    margin-top: 40px;

    &.is-expanded {
      .article-search__tag.is-hidden {
        display: inline-flex;
      }
    }

    @media (max-width: 1000px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 13px 11px;
      margin-top: 28px;
    }

    @media (max-width: 600px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .article-search__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: 15px 20px;
    background-color: var(--color-main);
    color: var(--color-white);
    font-size: 14px;
    font-weight: var(--font-weight-black);
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--color-white);
    border-radius: 999px;
    box-shadow: 0 0 17px rgba(0, 0, 0, 0.2);

    &.is-hidden {
      display: none;
    }

    &:hover,
    &:focus-visible {
      color: var(--color-main);
      background-color: var(--color-white);
    }

    @media (max-width: 1000px) {
      font-size: 14px;
      letter-spacing: 0.06em;
    }

    @media (max-width: 600px) {
      min-width: 120px;
    }
    @media (max-width: 400px) {
      padding: 12px 10px;
      font-size: 13px;
    }
  }

  .article-search__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 36px;
    padding: 12px 36px;
    color: var(--color-main);
    font-family: var(--font-ja);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
    letter-spacing: 0.08em;
    background-color: var(--color-white);
    border: 1px solid var(--color-white);
    border-radius: 999px;
    cursor: pointer;

    &:hover,
    &:focus-visible {
      color: var(--color-white);
      background-color: var(--color-main);
    }
  }

  .article-search__deco {
    position: absolute;
    z-index: 1;
    display: block;
    height: auto;
    pointer-events: none;

    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  .article-search__deco--fishing {
    top: 0;
    right: max(0px, calc((100% - 1100px) / 2 - 262px));
    width: 181px;

    @media (max-width: 1000px) {
      top: 0;
      right: 22px;
      width: 108px;
    }

    @media (max-width: 600px) {
      right: 30px;
      width: 90px;
    }
  }

  .article-search__deco--shopping {
    bottom: 0;
    left: max(0px, calc((100% - 1100px) / 2 - 248px));
    width: 173px;
    transform: rotate(2.46deg);

    @media (max-width: 1000px) {
      left: 31px;
      bottom: auto;
      width: 100px;
      z-index: 2;
      top: 0px;
    }
  }

  .article-search__deco--cloud-left {
    top: 256px;
    left: 0;
    width: 269px;
    transform: translateX(-30%);

    @media (max-width: 1000px) {
      top: 180px;
      left: 4px;
      width: 117px;
    }
  }

  .article-search__deco--sp {
    display: none;
  }

  @media (max-width: 1000px) {
    .article-search__deco--pc {
      display: none;
    }

    .article-search__deco--sp {
      display: block;
    }
  }

  .article-search__deco--cloud-bottom-left {
    display: none;
    left: 4px;
    bottom: 20px;
    width: 109px;

    @media (max-width: 1000px) {
      display: block;
      left: 0;
      bottom: 20px;
      width: 109px;
    }
  }

  .article-search__deco--cloud-right {
    right: 0;
    bottom: 80px;
    width: 188px;
    transform: translateX(30%);

    @media (max-width: 1000px) {
      right: 1px;
      bottom: 10px;
      width: 132px;
    }

    @media (max-width: 600px) {
      bottom: 30px;
      width: 70px;
    }
  }
}

/* ==== 下層ページ共通 ==== */
/* page.php / archive-blog.php / blog_lighter.php / writer_list.php で使用 */

/* ページ下層ヒーロー背景 */
.page-hero-bg {
  position: relative;
  height: 550px;
  overflow: hidden;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 15%;
  }

  @media (max-width: 1000px) {
    height: 380px;
  }

  @media (max-width: 600px) {
    height: 350px;
  }
}

/* ページ下層コンテナ */
.page-lower {
  --cloud-width: max(2001px, 100vw);
  --cloud-height: max(139px, 6.94653vw);

  position: relative;
  margin-top: calc(0px - var(--cloud-height));
  &:not(.page-mv) {
    overflow: hidden;
  }

  &:has(+.page-lower){
    > .page-lower__inner {
      padding-bottom: 220px;
    }
  }

  &:has(+.article-search){
    > .page-lower__inner {
      padding-bottom: 220px;

      @media (max-width: 600px) {
        padding-bottom: 160px;
      }
    }
  }

  + .article-search {
    background-color: transparent;
    margin-top: calc(0px - var(--article-search-overlap));
  }
}

/* ページ見出し */
.page-heading {
  position: relative;
  color: var(--color-font);
  padding: 0 35px 51px;
  transform: translateY(-180px);
  margin-bottom: -180px;

  @media (max-width: 1000px) {
    padding-right: 20px;
    padding-left: 20px;
    transform: translateY(0);
    margin-bottom: 0;
  }

  .page-heading__inner {
    position: relative;
    z-index: 2;
    width: min(1100px, 100%);
    margin: 0 auto;
    text-align: center;
    padding-bottom: 60px;

    @media (max-width: 450px) {
      padding-bottom: 40px;
    }

    &::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 7px;
      background-image: url("./assets/images/illust/illust_border.svg");
      background-repeat: repeat-x;
      background-position: left bottom;
      background-size: auto 7px;
      pointer-events: none;
    }
  }

  .page-heading__inner:not(:has(.page-heading__lead)) {
    padding-bottom: 0;

    &::after {
      display: none;
    }
  }

  .page-heading__title-wrap {
    position: relative;
    display: grid;
    width: min(410px, 100%);
    height: 350px;
    margin: 0 auto;
    place-items: center;

    @media (max-width: 1000px) {
      width: min(300px, 100%);
      height: 260px;
    }
  }

  .page-heading__title-circle {
    position: relative;
    z-index: 2;
    display: grid;
    width: 350px;
    height: 350px;
    align-content: center;
    border-radius: 50%;
    background-color: #EB703B;
    color: #fff;
    text-align: center;

    @media (max-width: 1000px) {
      width: 260px;
      height: 260px;
    }

    &.page-heading__title-circle--long {
      .page-heading__roman {
        font-size: 43px;
        letter-spacing: -1.33px;
        line-height: 128%;

        @media (max-width: 1000px) {
          font-size: 40px;
          letter-spacing: -1px;
        }
      }

      .page-heading__title {
        color: #e1d8bc;
      }
    }

    &.title-privacy-policy {
      .page-heading__roman {
        font-size: 54px;

        @media (max-width: 1000px) {
          font-size: 45px;
        }
      }
    }
    &.title-news {
      .page-heading__roman {
        font-size: 54px;
        line-height: 1;

        @media (max-width: 1000px) {
          font-size: 45px;
        }
      }
    }

    .title--small {
      font-size: 45px;

      @media (max-width: 1000px) {
        font-size: 35px;
      }
    }
    .title--symbol {
      display: block;
    }
  }

  .page-heading__roman {
    margin: 0;
    font-family: var(--font-mobo);
    font-size: 73px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;

    @media (max-width: 1000px) {
      font-size: 52px;
    }
  }

  .page-heading__title {
    margin: 20px 0 0;
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 1.5;
    letter-spacing: 1.256px;
    color: #F3EBD1;

    @media (max-width: 1000px) {
      margin-top: 14px;
      font-size: 16px;
    }
  }

  .page-heading__lead {
    margin: 39px 0 0;
    font-family: var(--font-ja);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 1.95;
    letter-spacing: 1px;

    @media (max-width: 1000px) {
      margin-top: 30px;
      line-height: 1.8;
    }

    @media (max-width: 600px) {
      font-size: 14px;
      font-weight: var(--font-weight-normal);
    }

    @media (max-width: 450px) {
      margin-top: 40px;
    }
  }

  .page-heading__deco {
    position: absolute;
    z-index: 3;
    display: block;
    height: auto;
    pointer-events: none;
  }

  .page-heading__deco--cloud-left {
    top: 9px;
    left: -8%;
    width: 443px;

    @media (max-width: 1000px) {
      top: 0;
      width: 250px;
    }
    @media (max-width: 600px) {
      top: -40px;
      width: 140px;
      z-index: -1;
    }
  }

  .page-heading__deco--cloud-right {
    top: 180px;
    right: -8%;
    width: 312px;

    @media (max-width: 1000px) {
      top: 100px;
      width: 200px;
    }
    @media (max-width: 600px) {
      top: 110px;
      width: 150px;
      right: -80px;
      z-index: -1;
    }
  }

  .page-heading__deco--cloud-top-right {
    top: 0;
    right: -5%;
    width: 209px;

    @media (max-width: 1000px) {
      top: 0;
      width: 160px;
    }
    @media (max-width: 600px) {
      width: 90px;
      z-index: -1;
    }
  }

  .page-heading__deco--cloud-title-left {
    top: 241px;
    left: 0;
    width: 127px;
    aspect-ratio: 127 / 52;
    background: url("./assets/images/clouds/heading-cloud-left.svg") center / contain no-repeat;
    z-index: -1;

    @media (max-width: 1000px) {
      top: 176px;
      left: -20px;
      width: 110px;
    }

    @media (max-width: 600px) {
      top: 186px;
      left: -10px;
      width: 90px;
    }
  }

  .page-heading__deco--cloud-title-right {
    top: 51px;
    right: 0;
    width: 113px;
    aspect-ratio: 113 / 44;
    background: url("./assets/images/clouds/heading-cloud-right.svg") center / contain no-repeat;
    transform: rotate(180deg);

    @media (max-width: 1000px) {
      top: 21px;
      right: -20px;
      width: 110px;
    }

    @media (max-width: 600px) {
      top: 21px;
      right: 10px;
      width: 90px;
    }
  }

  .page-heading__deco--ichiziku {
    top: 356px;
    left: calc(50% - 518px);
    width: 121px;

    @media (max-width: 1000px) {
      top: 240px;
      left: 20px;
      width: 80px;
    }

    @media (max-width: 600px) {
      top: 120px;
      left: calc(50% - 240px);
      width: 60px;
    }

    @media (max-width: 450px) {
      top: 253px;
      left: calc(50% - 150px);
      width: 50px;
    }
  }

  .page-heading__deco--shijimi {
    top: 309px;
    left: calc(50% - 405px);
    width: 72px;

    @media (max-width: 1000px) {
      left: 90px;
      top: 210px;
      width: 50px;
    }

    @media (max-width: 600px) {
      left: calc(50% - 190px);
      top: 90px;
      width: 40px;
    }

    @media (max-width: 450px) {
      left: calc(50% - 110px);
      top: 235px;
      width: 30px;
    }
  }

  .page-heading__deco--vegetable {
    top: 329px;
    right: calc(50% - 524px);
    width: 106px;

    @media (max-width: 1000px) {
      top: 210px;
      right: 30px;
      width: 70px;
    }

    @media (max-width: 600px) {
      top: 200px;
      right: auto;
      width: 55px;
      left: calc(50% - -120px);
    }

    @media (max-width: 450px) {
      top: 230px;
      width: 45px;
      left: calc(50% - -90px);
    }
  }
}

.page-support-heading {
  .page-heading__title-circle {
    &.page-heading__title-circle--long {
      .page-heading__roman {
        @media (max-width: 1000px) {
          font-size: 34px;
        }
      }
    }
  }
}

/* ==== フッター ==== */
.footer {
  position: relative;
  z-index: 3;
  padding: 113px 35px 122px;
  color: var(--color-font);
  background-color: var(--color-white);

  @media (max-width: 1000px) {
    padding: 76px 20px 104px;
  }

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--noise-white-multi);
    pointer-events: none;
  }

  &::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    height: 300px;
    background-image: url("./assets/images/common/bg_footer_illust.jpg");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    pointer-events: none;
  }

  .footer__deco {
    position: absolute;
    z-index: 1;
    display: block;
    height: auto;
    pointer-events: none;

    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  .footer__deco--shopping{
    top: -210px;
    left: max(0px, calc((100% - 1100px) / 2 - 248px));
    width: 123px;
    transform: rotate(2.46deg);

    @media (max-width: 1000px) {
      left: 20px;
      width: 100px;
      top: -190px;
    }

    @media (max-width: 600px) {
      left: 10px;
      width: 68px;
      top: -160px;
    }
  }

  .footer__deco--cloud-right {
    right: 20px;
    top: 20px;
    width: 150px;

    @media (max-width: 1000px) {
      right: 1px;
      bottom: 10px;
      width: 132px;
      transform: translateX(0)
    }

    @media (max-width: 600px) {
      bottom: 30px;
      width: 70px;
    }
  }

  .footer__inner {
    position: relative;
    z-index: 1;
    width: min(1100px, 100%);
    margin: 0 auto;
    text-align: center;
  }

  .footer__logo {
    width: min(300px, 100%);
    margin: 0 auto;
    mix-blend-mode: multiply;

    img {
      display: block;
      width: 100%;
      height: auto;
    }

    @media (max-width: 1000px) {
      width: min(300px, 100%);
    }

    @media (max-width: 600px) {
      width: min(200px, 100%);
    }
  }

  .footer__address {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 9px;
    margin: 36px 0 0;
    font-family: var(--font-ja);
    font-size: 14px;
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: 1.45;
    letter-spacing: 0;

    @media (max-width: 1000px) {
      gap: 7px;
      margin-top: 30px;
      font-size: 12px;
    }
  }

  .footer__department {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: var(--font-weight-bold);
  }

  .footer__contact {
    width: min(210px, 100%);
    min-height: 0;
    margin-top: 43px;
    padding: 16px 44px;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.073em;

    &::after {
      right: 25px;
      border-top-width: 5px;
      border-bottom-width: 5px;
      border-left-width: 7px;
    }

    @media (max-width: 1000px) {
      margin-top: 34px;

      &::after {
        right: 22px;
      }
    }
  }

  .footer__sns-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin: 45px 0 0;
    padding: 0;
    list-style: none;

    @media (max-width: 1000px) {
      gap: 20px;
      margin-top: 34px;
    }
  }

  .footer__sns-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    @media (max-width: 1000px) {
      width: 42px;
      height: 42px;
    }
  }

  .footer__nav {
    margin-top: 66px;

    @media (max-width: 1000px) {
      margin-top: 48px;
    }
  }

  .footer__nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 29px;
    margin: 0;
    padding: 0;
    font-family: var(--font-ja);
    font-size: 15px;
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
    list-style: none;
    width: min(780px, 100%);
    margin-inline: auto;

    a {
      color: var(--color-main);
      text-decoration: none;

      &:hover,
      &:focus-visible {
        text-decoration: underline;
        text-underline-offset: 4px;
      }
    }

    @media (max-width: 1000px) {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, max-content));
      justify-content: center;
      gap: 14px 22px;
      font-size: 13px;
      text-align: left;
    }

    @media (max-width: 600px) {
      grid-template-columns: repeat(2, minmax(0, max-content));
    }
  }

  .footer__copyright {
    margin: 52px 0 0;
    font-family: var(--font-ja);
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    line-height: 1.5;
    letter-spacing: 0.071em;

    @media (max-width: 1000px) {
      margin-top: 38px;
      font-size: 11px;
    }
  }

  .footer__pagetop {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 900;
    display: none;
    width: 90px;
    height: 90px;
    text-decoration: none;

    img {
      display: block;
      width: 100%;
      height: auto;
    }

    @media (max-width: 1000px) {
      right: 10px;
      bottom: 22px;
      width: 70px;
      height: 70px;
    }

    @media (max-width: 500px) {
      width: 60px;
      height: 60px;
    }

    @media (max-width: 350px) {
      right: 0;
    }
  }
}

/** 下層ページ設定 **/
.page-contents {
  position: relative;
  width: 100%;
  max-width: calc(1100px + (20px * 2));
  padding-inline: 20px;
  margin-inline: auto;
  box-sizing: border-box;
}

.bg-frame-white {
  background-color: var(--color-white);
  padding: 50px 40px;
  border-radius: 13px;

  @media (max-width: 1000px) {
    padding: 40px 30px;
  }

  @media (max-width: 600px) {
    padding: 30px 20px;
  }
}

.section-block {
  > h2 {
    padding: 20px 28px;
    background: #f4f3e1;
    border-radius: 7px;
    color: var(--color-font);
    font-family: var(--font-ja);
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.26px;

    @media (max-width: 600px) {
      padding: 15px 18px;
      font-size: 20px;
    }
  }

  > p {
    padding-inline: 20px;
    margin-bottom: 0;

    @media (max-width: 600px) {
      padding-inline: 0;
    }

    + * {
      margin-bottom: 20px;
    }
  }
}

/** パンくず **/
#breadcrumbs {
  background-color: var(--color-font);
  padding-block: 10px;

  .breadcrumbs__inner {
    padding-inline: 20px;
    width: min(calc(1100px + 40px), 100%);
    margin: 0 auto;
    font-size: 12px;
    color: var(--color-white);

    > span {
      display: flex;
      flex-wrap: wrap;
      gap: 5px 10px;

      > span:has(> a) {
        position: relative;
        padding-right: 20px;
        display: block;

        &::after {
          content: "";
          position: absolute;
          top: 50%;
          right: 0;
          width: 0;
          height: 0;
          border-top: 4px solid transparent;
          border-bottom: 4px solid transparent;
          border-left: 6px solid var(--color-sub);
          transform: translateY(-50%);
        }
      }
    }

    a {
      color: var(--color-white);
      text-decoration: none;
      transition: opacity .3s ease;

      &:hover {
        opacity: .8;
      }
    }
  }
}