/**
 * Site Custom CSS
 *
 * このファイルは自由に編集できます。
 * ここに追加したCSSは、テーマのCSSより後にサイト全体で読み込まれます。
 * 保存後はファイルの更新日時がURLに付くため、ブラウザキャッシュも自動更新されます。
 */

/* 例：サイト全体の文字色を変更する場合
body {
  color: #222;
}
*/

/* PC：スクロール時ヘッダー（画像は「外観 → ウィジェット」で設定） */
@media (min-width: 992px) {
  /* XwriteのPCスクロール固定ヘッダー */
  .header-fix.-for-pc .header-widget .wp-block-image img {
    width: auto !important;
    max-width: none !important;
    height: 100px !important;
  }

  .header-fix.-for-pc .pc-scroll-header-image,
  .header-fix.-for-pc .pc-scroll-header-image__widget,
  .header-fix.-for-pc .pc-scroll-header-image .wp-block-image {
    height: 100%;
    margin: 0;
  }

  .site-header .pc-scroll-header-image {
    display: none;
  }

  .site-header.pc-scroll-header--compact .pc-scroll-header-image {
    display: block;
  }

  body.pc-scroll-header-active {
    padding-top: var(--pc-header-original-height, 0px);
  }

  .site-header.pc-scroll-header--compact {
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 0;
    left: 0;
    height: var(--pc-header-compact-height);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
  }

  body.admin-bar .site-header.pc-scroll-header--compact {
    top: 32px;
  }

  .site-header.pc-scroll-header--compact .header-top,
  .site-header.pc-scroll-header--compact .site-branding > :not(.pc-scroll-header-image) {
    display: none !important;
  }

  .site-header.pc-scroll-header--compact .header-bottom,
  .site-header.pc-scroll-header--compact .header-bottom .container {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }

  .site-header.pc-scroll-header--compact .header-bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .site-header.pc-scroll-header--compact .site-branding {
    height: 100%;
  }

  .pc-scroll-header-image,
  .pc-scroll-header-image__widget,
  .pc-scroll-header-image figure {
    height: 100%;
    margin: 0;
  }

  .pc-scroll-header-image img {
    display: block;
    width: auto;
    height: 100%;
    object-fit: contain;
  }

  .site-header.pc-scroll-header--compact .pc-scroll-header-image .wp-block-image img {
    width: 400px !important;
    max-width: 400px !important;
  }

  body.pc-scroll-header-active .wp-block-image img {
    width: 400px !important;
    max-width: 400px !important;
  }

  .site-header.pc-scroll-header--compact .main-navigation ul {
    margin-top: 0;
  }
}

.wp-block-image img {
    width: 1200px;
}
.header-site-name {
  display: inline !important;
  visibility: visible;
}

.header .siteInfo__title,
.header .siteInfo__title a {
  display: block;
  color: #111;
  font-weight: 700;
  line-height: 1.2;
}

.header .siteInfo__title a {
  font-size: clamp(22px, 2.2vw, 30px);
}

.header .siteInfo__desc,
.header-fix .siteInfo__desc {
  display: block !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  margin: 2px 0 0 !important;
  inset: auto !important;
  transform: none !important;
  padding: 0 !important;
  background: transparent !important;
  color: #111 !important;
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
}

.header .siteInfo,
.header-fix .siteInfo {
  display: block !important;
  overflow: visible !important;
}

/* PCナビゲーション：左端基準のままサブメニュー枠を広げる */
@media (min-width: 992px) {
  .header .gNavList > .menu-item > .sub-menu,
  .header-fix .gNavList > .menu-item > .sub-menu {
    width: 360px;
    max-width: calc(100vw - 32px);
  }

  .header .sub-menu a,
  .header-fix .sub-menu a,
  .header .sub-menu .menu-item-title,
  .header-fix .sub-menu .menu-item-title {
    white-space: nowrap;
  }
}

.header-fix .siteInfo + .header-widget-inside,
.header.is-pc-left .siteInfo + .header-widget-inside {
  padding-left: 0;
}

/* 参考画像：ロゴ・メニューの下にメインヘッダー画像を配置 */
.header .headerInfo {
  flex-wrap: wrap;
}

.header .header-widget-inside {
  order: 10;
  flex: 0 0 100%;
  width: 100%;
  margin: 12px 0 0;
  padding: 0;
}

.header .header-widget-inside .wp-block-image,
.header .header-widget-inside .wp-block-image img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  margin: 0;
}

.header .header-widget-inside .wp-block-image img {
  height: auto !important;
  object-fit: cover;
}

@media (max-width: 991px) {
  .header .headerInfo,
  .header-fix .headerInfo {
    flex-direction: column;
  }

  .header .header-widget-inside {
    display: block !important;
    align-self: stretch;
    margin-top: 10px;
  }
}