@charset "UTF-8";

/* ==========================================================================
   インポート
   ========================================================================== */
@import url('reset.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');


/* ==========================================================================
   変数・ファウンデーション（:root）
   デザイントークン：色、角丸、アニメーション時間
   ========================================================================== */
:root {
  /* メインカラー */
  --color-white: #FFFFFF;
  --color-black: #1A1A1A;
  --color-blue: #009FE8;
  --color-lightblue: #F0FBFF;
  --color-green: #679A21;
  --color-lightgreen: #F8F9F5;
  --color-orange: #BF9F35;
  --color-lightorange: #FEF9EB;

  --color-link: #1558d6;

  /* グレースケール */
  --color-darkgray: #242424;
  --color-gray: #707070;
  --color-lightgray: #E3E3E3;
  --color-lightgray2: #F3F3F3;
  --color-pankuzu: #7E7E7E;

  /* その他 */
  --color-red: #FF2800;
  --color-beige: #F4F2EF;
  --color-text: #242424;

  /* グラデーション */
  --color-gradient: linear-gradient(135deg, #F0FBFF 0%, #FFF8E8 100%);

  /* 角丸 */
  --border-radius-lg: 10px;
  --border-radius: 6px;
  --border-radius-sm: 3px;

  /* アニメーション */
  --animation-transition: 0.2s;
}

/* SNS非表示 */
.header-nav--list--item a[title="X"], .header-nav--list--item a[title="Instagram"], .header-nav--list--item a[title="YouTube"],
.footer--nav--item--sns--list li a[title="X"], .footer--nav--item--sns--list li a[title="Instagram"], .footer--nav--item--sns--list li a[title="YouTube"],
.sns-links--list li a[title="X"], .sns-links--list li a[title="Instagram"], .sns-links--list li a[title="YouTube"]{
  display: none !important;
}

/* ==========================================================================
   ベーススタイル
   html, body, 基本要素の初期スタイル
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

body {
  font-size: 18px;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--color-text);
  line-height: 2;
  font-weight: 400;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

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

h2 {
  font-size: 1.75rem;
  font-weight: 500;
}

main {
  padding-top: 120px;
  @media (max-width: 1260px) {
    padding-top: 80px;
  }
}

/* ==========================================================================
   レイアウト - コンテナ・セクション
   ========================================================================== */
.container {
  max-width: 1416px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.container-md {
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: 1rem;

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

section {
  margin-bottom: 80px;
}

article {
  margin-bottom: 80px;
}


/* ==========================================================================
   カラー - 背景・テキスト色
   ========================================================================== */
.bg-gradient {
  background: var(--color-gradient);
}

.text-red {
  color: var(--color-red);
}

.text-blue {
  color: var(--color-link) !important;
}

/* ==========================================================================
   Flexbox・Grid ユーティリティ
   ========================================================================== */
.d-flex {
  display: flex;
}

.d-flex-justify-between {
  justify-content: space-between;
}

.d-flex-justify-center {
  justify-content: center;
}

.d-flex-align-center {
  align-items: center;
}

.d-flex-column {
  flex-direction: column;
}

@media (max-width: 767.98px) {
  .d-flex-sm-column {
    flex-direction: column;
  }
}

.d-grid {
  display: grid;
}

.d-grid-cols-md-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767.98px) {
  .d-grid-cols-sm-1 {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   スペーシング - ギャップ
   ========================================================================== */
.gap-0 {
  gap: 0 !important;
}

.gap-xs {
  gap: 0.5rem !important;
}

.gap-sm {
  gap: 1rem !important;
}

.gap-md {
  gap: 1.75rem !important;
}

.gap-lg {
  gap: 2rem !important;
}

.gap-xl {
  gap: 2.5rem !important;
}


/* ==========================================================================
   スペーシング - マージン
   ========================================================================== */
.mb-0 {
  margin-bottom: 0 !important;
}

.mb-sm {
  margin-bottom: 1rem !important;
}

.mb-md {
  margin-bottom: 2rem !important;
  @media (max-width: 767.98px) {
    margin-bottom: 1rem !important;
  }
}

.mb-lg {
  margin-bottom: 3rem !important;
}

.mb-xl {
  margin-bottom: 4.5rem !important;
}

.mb-2xl {
  margin-bottom: 8rem !important;
}

.ml-sm {
  margin-left: 1rem;
}

.ml-md {
  margin-left: 1.5rem;
}

@media (max-width: 767.98px) {
  .ml-sm {
    margin-left: 0;
  }

  .ml-md {
    margin-left: 0;
  }
}

/* スマートフォン用マージン（レスポンシブ） */
@media (max-width: 767.98px) {
  .mb-sm-sm {
    margin-bottom: 1rem !important;
  }

  .mb-sm-md {
    margin-bottom: 2rem !important;
  }

  .mb-sm-lg {
    margin-bottom: 3rem !important;
  }
}


/* ==========================================================================
   スペーシング - パディング
   ========================================================================== */
.py-sm {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-md {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.py-lg {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.py-100 {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

.py-none {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 767.98px) {
  .pt-sm-1 {
    padding-top: 1rem !important;
  }
}

/* ==========================================================================
   ボタン（Button）
   ========================================================================== */
.btn-wrapper {
  gap: 1.75rem;
}

.btn {
  display: inline-block;
}

/* アウトラインボタン */
.btn-outline {
  display: inline-block;
  border: 1px solid var(--color-gray);
  color: var(--color-text);
  background-color: var(--color-white);
  text-align: center;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: var(--color-beige);
  }
}

/* 白背景ボタン（大きなCTA用） */
.btn-white {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 120px;
  text-decoration: none;
  font-feature-settings: "palt";
  width: 100%;
  height: 120px;
  background-color: var(--color-white);
  color: var(--color-text);
  transition: background-color 0.3s ease;

  &:hover {
    background-color: var(--color-beige);
  }
}

/* 外部リンク用ボタン（アイコン付き） */
.btn-site {
  flex-shrink: 0;
  border: 1px solid var(--color-gray);
  background-image: url("../images/icon-blank-bold.png");
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-left: 1rem;
  width: 160px;
  height: 42px;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: var(--color-beige);
  }
}

/* 黒背景ボタン */
.btn-black {
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 1rem 1.5rem;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  & img {
    width: 16px;
    height: 16px;
    margin-left: 0.5rem;
  }
}

/* シェブロンアイコン付きボタン */
.btn-chevron {
  background-image: url("../images/icon-circle-chevron.png");
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

/* 右下に矢印があるボタン */
.btn-botom-border {
  position: relative;

  &::after {
    position: absolute;
    content: '';
    display: block;
    width: 28px;
    height: 28px;
    border-right: 2px solid var(--color-gray);
    border-bottom: 2px solid var(--color-gray);
    bottom: 12px;
    right: 12px;
  }
}

/* ボタンサイズ */
.btn-size-sm {
  max-width: 320px;
  height: 80px;
  width: 100%;
  line-height: 80px;

  @media (max-width: 767.98px) {
    height: unset;
    line-height: unset;
    padding-block: 1rem;
    }
}

.btn-size-md {
  max-width: 480px;
  height: 120px;
  width: 100%;
}

.btn-size-lg {
  max-width: 680px;
  height: 120px;
  width: 100%;
  @media (max-width: 767.98px) {
    height: unset;
    line-height: unset;
    padding-block: 1rem;
    }
}

.btn-size-full {
  width: 100%;
  height: 120px;
  @media (max-width: 767.98px) {
    height: unset;
    line-height: unset;
    padding-block: 1rem;
    }
}

@media (max-width: 767.98px) {
  .btn-size-sm,
  .btn-size-md,
  .btn-size-lg {
    max-width: 100%;
  }
}


/* ==========================================================================
   タグ（カテゴリ・ラベル表示用）
   ========================================================================== */
.tag {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 400;
  width: max-content;
  text-align: center;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.1em;
}

.tag-sm {
  min-width: 110px;
  height: 26px;
  line-height: 26px;
  padding-inline: 1rem;
}

.tag-md {
  min-width: 206px;
  height: 45px;
  line-height: 45px;
}

/* タグの色バリエーション */
.tag-darkgray {
  background-color: var(--color-darkgray);
  color: var(--color-white);
  border: 1px solid var(--color-darkgray);
}

.tag-lightblue {
  background-color: var(--color-lightblue);
  color: var(--color-text);
  border: 1px solid var(--color-blue);
}

.tag-lightgreen {
  background-color: var(--color-lightgreen);
  color: var(--color-text);
  border: 1px solid var(--color-green);
}

.tag-lightorange {
  background-color: var(--color-lightorange);
  color: var(--color-text);
  border: 1px solid var(--color-orange);
}


/* ==========================================================================
   リンクアイコン
   PDF・矢印・外部リンクのアイコン付きリンク
   ========================================================================== */
.link-pdf {
  background-image: url("../images/icon-pdf.png");
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.link-arrow {
  background-image: url("../images/icon-arrow_right.png");
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.link-blank {
  background-image: url("../images/icon-blank.png");
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.material-symbols-outlined {
  vertical-align: middle;
  padding-bottom:2px;
  font-size: 1.25rem;
  line-height: 0;
}

/* ==========================================================================
   リスト - ニュース・お知らせなどの一覧アイテム
   ========================================================================== */
.item-link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem;
  padding-right: 3rem;
  text-decoration: none;
  color: var(--color-text);
  border-top: 1px solid var(--color-lightgray);
  transition: background-color 0.3s ease;
  cursor: pointer;

  @media (max-width: 767.98px) {
    flex-wrap: wrap;
    gap: 0 1rem;
    line-height: 1.5;
  }

  &:hover {
    background-color: var(--color-beige);
  }
}

.item-link-none {
  /* .item-link の設定から、リンクっぽい見た目を削除した設定 */
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem;
  padding-right: 3rem;
  text-decoration: none;
  color: var(--color-text);
  border-top: 1px solid var(--color-lightgray);
  transition: background-color 0.3s ease;

  @media (max-width: 767.98px) {
    flex-wrap: wrap;
  }
}

@media (max-width: 767.98px) {
  .information-item-content {
    display: contents;
  }
}

ul > li:last-of-type .item-link {
  border-bottom: 1px solid var(--color-lightgray);
}

.item-date {
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text);
}

@media (max-width: 767.98px) {
  .item-date {
    order: 1;
  }

  .item-tag {
    order: 2;
  }

  .item-title {
    order: 3;
    width: 100%;
  }

  .rules-item .item-link {
    padding-block: 0.6rem;
  }
}


/* ==========================================================================
   ユーティリティクラス
   テキスト配置・表示切替・行間
   ========================================================================== */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right !important;
}

/* PCのみ表示・SPのみ表示 */
.d-sp-none {
  display: none;

  @media (min-width: 768px) {
    display: block;
  }
}

.d-pc-none {
  display: none;

  @media (max-width: 767.98px) {
    display: block;
  }
}

/* 行間 */
.lh-sm {
  line-height: 1.5 !important;
}

.lh-md {
  line-height: 2 !important;
}

.lh-lg {
  line-height: 2.5 !important;
}

.text-underline {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ==========================================================================
   セレクトボックス（汎用）
   ========================================================================== */
.select--wrapper {
  position: relative;
  width: 240px;

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-black);
    border-bottom: 2px solid var(--color-black);
    transform: translateY(-50%) rotate(45deg);
  }
}

.select--wrapper select {
  width: 100%;
  border: 1px solid var(--color-gray);
  background-color: var(--color-white);
  padding-left: 16px;
  padding-block: 4px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;

  &:focus {
    outline: none;
  }
}


/* ==========================================================================
   ヘッダー（Header）
   PC: 130px / SP: 80px / 固定表示
   ========================================================================== */
.header {
  position: fixed;
  width: 100%;
  z-index: 200;
  background: #fff;
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

@media (min-width: 1261px) {
  .header {
    height: 130px;
  }
}

@media (max-width: 1260px) {
  .header {
    height: 80px;
  }
}

/* ロゴ */
.header-logo {
  line-height: 1;
}

@media (min-width: 1261px) {
  .header-logo {
    font-size: 40px;
    letter-spacing: 2px;
  }
}

@media (max-width: 1260px) {
  .header-logo {
    width: 100%;
    max-width: 240px;
    font-size: 25px;
    letter-spacing: 1px;
  }
}

.header-logo a {
  display: inline-block;
  color: #192753;
  text-decoration: none;
  vertical-align: top;
}

/* ハンバーガーメニュー（SPのみ） */
.header-hamburger {
  position: absolute;
  right: 8.5px;
  top: 50%;
  width: 45px;
  height: 45px;
  transform: translateY(-50%);
}

@media (min-width: 1261px) {
  .header-hamburger {
    display: none;
  }
}

.header-hamburger button {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.header-hamburger button > span {
  display: block;
  position: absolute;
  left: 11.5px;
  top: 22px;
  width: 22px;
  height: 1px;
  background: #4466ce;
}

.header-hamburger button > span:nth-child(1) {
  transform: translateY(-6px);
  transition: transform 350ms cubic-bezier(.215, .61, .355, 1);
}

.header-hamburger button > span:nth-child(2) {
  transition: opacity 350ms cubic-bezier(.215, .61, .355, 1);
}

.header-hamburger button > span:nth-child(3) {
  transform: translateY(6px);
  transition: transform 350ms cubic-bezier(.215, .61, .355, 1);
}

/* ハンバーガー開いた状態（×アイコン） */
.header-hamburger button.is-open > span:nth-child(1) {
  transform: rotate(45deg) translateY(0px);
}

.header-hamburger button.is-open > span:nth-child(2) {
  opacity: 0;
}

.header-hamburger button.is-open > span:nth-child(3) {
  transform: rotate(-45deg) translateY(0px);
}

/* グローバルナビ（PCのみ） */
.header-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  width: 100%;
}

@media (max-width: 1260px) {
  .header-nav {
    display: none;
  }
}

.header-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: end;
  flex-wrap: wrap;
  row-gap: 8px;
}

.header-nav ul li button,
.header-nav ul li a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color 300ms;
}

.header-nav ul li button:not(.search-button) {
  position: relative;
  padding-right: 24px;

  &:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-black);
    border-bottom: 2px solid var(--color-black);
    transform: translateY(-50%) rotate(45deg);
  }
}

.header-nav--list:first-child {
  & > li {
    padding-inline: 1rem;
  }
}

.header-nav--list:nth-child(2) {
  & > li {
    font-size: 1.125rem;
    border-left: 1px solid var(--color-lightgray);
    padding-inline: 1.5rem;

    &:last-child {
      border-right: 1px solid var(--color-lightgray);
    }
  }
}

/* サテライトサイトロゴ */
.header-nav--list :is(.logo--apmoa, .logo--aito) {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;

  & img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.header-nav--list {
  & .logo--apmoa {
    max-width: 210px;
  }

  & .logo--aito {
    max-width: 140px;
  }
}

.header-nav--list--item {
  display: flex;
  align-items: center;
  gap: 1rem;

  & a {
    display: flex !important;
    align-items: center;
  }
}


/* ==========================================================================
   メガメニュー（Mega Menu）
   .mega.is-open で表示／PC: ヘッダー直下 / SP: フルスクリーン
   ========================================================================== */
.mega {
  position: fixed;
  width: 100%;
  z-index: 100;
}

/* オーバーレイ（背景ぼかし） */
.mega-overlay {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: visibility 0ms 400ms, opacity 400ms linear;
}

/* メガメニュー本体 */
.mega-container {
  position: absolute;
  left: 0;
  z-index: 100;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: visibility 0ms 400ms, opacity 400ms linear;
}

@media (min-width: 1261px) {
  .mega-container {
    top: 120px;
  }
}

@media (max-width: 1260px) {
  .mega-container {
    top: 80px;
    padding: 0 20px 40px;
    height: calc(100vh - 80px);
    overflow: auto;
  }
}

/* メガメニューセクション */
@media (min-width: 1261px) {
  .mega-section {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0ms 400ms, opacity 400ms linear;
  }
}

@media (max-width: 1260px) {
  .mega-section {
    border-bottom: 1px solid #e1e1e1;
  }
}

/* メガメニュー見出し（SP: アコーディオントリガー） */
.mega-header {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

@media (min-width: 1261px) {
  .mega-header {
    display: none;
  }
}

.mega-header button,
.mega-header a {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 65px;
  margin: 0;
  padding: 0 20px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.mega-header button > span,
a.link-menu-arrow > span,
a.link-menu-blank > span {
  display: block;
  position: absolute;
  right: 20px;
  top: 50%;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
}

.mega-header button > span::before,
.mega-header button > span::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 7px;
  width: 15px;
  height: 1px;
  background: #333;
}

.mega-header button > span::after {
  transform: rotate(90deg);
  transition: transform 350ms cubic-bezier(.215, .61, .355, 1);
}

@media (max-width: 1260.98px) {
  a.link-menu-arrow > span::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    border-top: 1px solid var(--color-black);
    border-right: 1px solid var(--color-black);
    transform: rotate(45deg);
  }

  a.link-menu-blank > span {
    width: 16px;
    height: 16px;
    background-image: url("../images/icon-blank.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}

li:has(a.link-menu-blank) {
  &:after {
    border-top: none;
    border-right: none;
    transform: none;
    width: 16px;
    height: 16px;
    background-image: url("../images/icon-blank.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}

/* メガメニュー本文 */
.mega-body {
  position: relative;
}

@media (min-width: 1261px) {
  .mega-body {
    display: block !important;
  }
}

@media (max-width: 1260px) {
  .mega-body {
    display: none;
    overflow: hidden;
  }
}

.mega-form-secition,
.mega-secition-footer {
  display: none;
}

@media (max-width: 1260px) {
  .mega-form-secition,
  .mega-secition-footer {
    display: block;
  }
}

/* メガメニュー内側 */
@media (min-width: 1261px) {
  .mega-inner {
    padding: 42px 50px;
  }
}

@media (max-width: 1260px) {
  .mega-inner--list li {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 65px;
    margin: 0;
    padding: 0 20px;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    font-size: 1rem;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    border-top: 1px solid var(--color-lightgray);
  }
}

@media (max-width: 1260px) {
  .mega-section:first-child {
    border-top: 1px solid #e1e1e1;
  }
}

.mega-section.is-open {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  visibility: visible;
  opacity: 1;
  transition: visibility 0ms, opacity 400ms linear;
}

.mega-section.is-expanded .mega-header button > span::after {
  transform: rotate(0deg);
}

.mega.is-open .mega-overlay,
.mega.is-open .mega-container {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: visibility 0ms, opacity 400ms linear;
}


/* ==========================================================================
   言語選択セレクト
   ========================================================================== */
.select--language {
  position: relative;
  width: 160px;

  @media (max-width: 1260px) {
    width: 240px;
  }

  &::before {
    content: url("../images/icon-language.png");
    position: absolute;
    top: 50%;
    left: 16px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
  }

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-black);
    border-bottom: 2px solid var(--color-black);
    transform: translateY(-50%) rotate(45deg);
  }
}

.select--language select {
  width: 100%;
  height: 48px;
  border: 1px solid var(--color-gray);
  background-color: var(--color-white);
  padding-left: 48px;
  padding-block: 4px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;

  @media (max-width: 767px) {
    height: 56px;
    border: 1px solid var(--color-black);
  }

  &:focus {
    outline: none;
  }
}


/* ==========================================================================
   検索フォーム（メガメニュー内）
   ========================================================================== */
.search-form,
.search-form-google {
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--color-black);
  max-width: 1380px;
  width: 100%;
  margin-inline: auto;
}

.search-form label {
  width: 100%;
}

.search-form input {
  width: 100%;
  height: 56px;
  padding: 5px 15px;
  border: none;
  box-sizing: border-box;
  font-size: 1em;
  outline: none;
}

.search-form input::placeholder {
  color: #777777;
}

.search-form button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  border: none;
  background-color: var(--color-black);
  cursor: pointer;
}

.search-form button::after {
  width: 24px;
  height: 24px;
  background-image: url("../images/icon-search-white.png");
  background-repeat: no-repeat;
  content: '';
}

@media (max-width: 1260px) {
  .mega-form-secition {
    margin-block: 2rem;
  }
  .search-form,
  .search-form-google {
    margin-top: 2rem;
  }
}


/* ==========================================================================
   メガメニュー - SNS・APMリンク
   ========================================================================== */
.sns-links--list {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;

  & > li {
    display: flex;
    align-items: center;

    & img {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }
  }
}

.apm-links--list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;

  & > li {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-gray);
    width: min(240px, 100%);
    height: 56px;
    padding: 0 16px;

    & img {
      width: 100%;
      height: 48px;
      object-fit: contain;
    }
  }
}

@media (min-width: 1261px) {
  .mega-inner--list {
    display: flex;
    justify-content: center;
    gap: 4rem;

    & > li {
      display: flex;
      align-items: center;
      gap: 1rem;

      &:after {
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        border-top: 2px solid var(--color-black);
        border-right: 2px solid var(--color-black);
        transform: rotate(45deg);
      }
    }
  }
}


/* ==========================================================================
   ページ見出し（メインビジュアル下のタイトル）
   ========================================================================== */
.main--headding-title {
  background-image: var(--color-gradient);
  margin-bottom: 0;

  & h1 {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-align: center;
    padding-block: 80px;
  }
}

.headding--title-upper {
  font-size: 1.5rem;
  font-weight: 500;

  @media (max-width: 767.98px) {
    font-size: 1.25rem;
  }

  &::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--color-black);
    margin-bottom: 8px;

    @media (max-width: 767.98px) {
      margin-bottom: 4px;
    }
    
  }
}


/* ==========================================================================
   パンくずリスト
   ========================================================================== */
.pankuzu--list {
  padding: .4rem 0;
  font-size: .88rem;
  font-weight: 500;

  & .pankuzu--list--inner {
    display: flex;
    align-items: center;
    gap: .25rem;

    & > .pankuzu--item {
      color: var(--color-pankuzu);
      display: flex;
      align-items: center;

      &:not(:last-child) {
        &:after {
          content: '/';
          display: block;
          margin-inline: 1rem;
          color: var(--color-pankuzu);
        }
      }

      & > a {
        display: flex !important;
        align-items: center;
      }

      &.current {
        color: var(--color-text);
      }
    }
  }
}


/* ==========================================================================
   ページネーション
   ========================================================================== */
.pagenation-wrapper {
  margin-bottom: 6rem;
}

.pagenation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;

  & .pagination-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: 1px solid var(--color-darkgray);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text);
    text-decoration: none;
    transition: all 0.3s ease;

    &:hover {
      background-color: var(--color-darkgray);
      color: var(--color-white);
    }

    &.active {
      background-color: var(--color-darkgray);
      color: var(--color-white);
    }
  }
}


/* ==========================================================================
   メインコンテンツ
   汎用の本文スタイル
   ========================================================================== */
.main--contents {
  & p {
    text-align: justify;
    line-height: 2;
    margin-bottom: 1rem;

    &:last-child {
      margin-bottom: 0;
    }
  }
}


/* ==========================================================================
   投稿・詳細ページコンテンツ
   ニュース・採用・調達などの詳細表示
   ========================================================================== */
.post-contents {
  & .post-content-header {
    display: block;
    border-bottom: 1px solid var(--color-lightgray);
    padding-bottom: 1rem;
    margin-bottom: 2rem;

    & .post-content-date {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--color-text);
    }

    & .post-content-title {
      font-size: 1.25rem;
      font-weight: 600;
    }
  }

  & .post-content-body,
  & .procurement-content-body {
    & a[href$=".pdf"],
    & a[href$=".docx"] {
      display: inline-block;
      padding-right: 2rem;
      text-decoration: none;
      color: var(--color-text);
      transition: all 0.3s ease;

      &:hover {
        opacity: 0.6;
      }
    }

    & a[href$=".pdf"] {
      background-image: url("../images/icon-pdf.png");
      background-size: 1.5rem;
      background-repeat: no-repeat;
      background-position: right 0 center;
    }

    & a[href$=".docx"] {
      background-image: url("../images/icon-word.png");
      background-size: 1.5rem;
      background-repeat: no-repeat;
      background-position: right 0 center;
    }

    & table {
      width: 100%;

      & td:first-child {
        padding-right: 1rem;
      }

      & td:last-child {
        padding-left: 1rem;
      }

      @media (max-width: 767.98px) {
        & td {
          display: block;
          width: 100% !important;
          padding: 0 !important;
        }
      }
    }
  }
}

.post-content-body {
  & p:not(:has(a)) {
    margin-bottom: 3rem;
  }

  & a[href$=".pdf"],
  & a[href$=".docx"] {
    margin-bottom: 2rem;
    line-height: 2;
  }
}


/* ==========================================================================
   フッター（Footer）
   ========================================================================== */
.footer {
  background-color: var(--color-beige);
  padding-block: 6.25rem;
}

@media (max-width: 767.98px) {
  .footer--nav {
    row-gap: 2rem;
  }
}

.footer--nav--item {
  &:last-child {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: space-around;
  }
}

.footer--nav--item--logo {
  & img {
    width: 100%;
    max-width: 270px;
  }
}

.footer--nav--item--sns--list {
  gap: 1rem;

  & > li {
    display: flex;
    align-items: center;

    & img {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }
  }
}

.footer--nav--item--link {
  @media (max-width: 767.98px) {
    width: 100%;
  }

  & ul {
    display: flex;
    align-items: center;
    gap: 1.5rem;

    @media (max-width: 767.98px) {
      flex-direction: column;
      gap: 1rem;
      width: 100%;
    }

    & li {
      flex-shrink: 0;

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

      & a {
        padding-inline: 1rem;
        max-width: 360px;
        width: 30vw;
        height: 90px;
        background-color: var(--color-white);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--color-gray);

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

      &.logo--apmoa a img {
        max-width: 260px;
      }

      &.logo--aito a img {
        max-width: 210px;
      }
    }
  }
}

.footer--nav--list {
  display: flex;

  @media (max-width: 767.98px) {
    font-size: 0.875rem;
  }

  & > li {
    padding-inline: 1.5rem;
    line-height: 1;

    @media (max-width: 767.98px) {
      padding-inline: 0.5rem;
    }

    &:first-child {
      border-right: 1px solid var(--color-gray);
    }
  }
}

.footer--nav--item--copyright {
  text-align: right;

  @media (max-width: 767.98px) {
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   Google Custom Search
   ========================================================================== */

/* PC */
.mega-section.d-sp-none .search-form-google .gsc-search-box {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mega-section.d-sp-none .search-form-google td.gsc-search-button {
  display: table-cell !important;
  width: 56px !important;
}

.mega-section.d-sp-none .search-form-google button.gsc-search-button {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  border: none !important;
  background-color: var(--color-black) !important;
  margin: 0 !important;
  cursor: pointer !important;
}

/* SP */
.search-form-section .search-form-google .gsc-search-box {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.search-form-section .search-form-google td.gsc-search-button {
  display: table-cell !important;
  width: 56px !important;
}

.search-form-section .search-form-google button.gsc-search-button {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  border: none !important;
  background-color: var(--color-black) !important;
  margin: 0 !important;
  cursor: pointer !important;
}