/* ==========================================================
 * 迷える羊のぐっすり案内所｜下層ページ専用 v2.4.2
 *
 * ヘッダー・フッターの見た目は home.css をそのまま共用。
 * このファイルは「固定背景」と「白いコンテンツ面」だけを担当します。
 * ========================================================== */

/* ----------------------------------------------------------
 * Fixed page background (front page is not affected because
 * this stylesheet is loaded only through the normal header.php)
 * ---------------------------------------------------------- */
html {
  min-height: 100%;
  background: #dfe6f5;
}

body {
  min-height: 100vh;
  background-color: #dfe6f5 !important;
  background-image: var(--mh-inner-page-bg) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

#body_wrap {
  min-height: 100vh;
  background: transparent !important;
}

/* SWELLカスタマイザー側の旧背景を無効化。 */
#body_wrap::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

/*
 * 親header.php由来で残るSWELL専用の固定ヘッダー・スマホメニューは使わない。
 * #header / #footer はPHP側でトップと同じものへ置換されます。
 */
#sp_menu,
#fix_header {
  display: none !important;
}

/* 置換に失敗した場合の二重表示防止。 */
#header.l-header,
#footer.l-footer {
  display: none !important;
}

/* ----------------------------------------------------------
 * Reading surfaces
 * 背景イラストは左右に見せ、本文・固定ページの内容は白面で保護。
 * ---------------------------------------------------------- */
#content.l-content {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.l-mainContent {
  background: rgba(255, 255, 255, .985) !important;
  border: 1px solid rgba(48, 61, 96, .08);
  border-radius: 22px !important;
  box-shadow: 0 18px 55px rgba(12, 25, 57, .13) !important;
}

/* SWELLのフレーム設定に左右されず白い本文面を確保。 */
.l-mainContent:not(.-frame-off),
.-frame-off .l-mainContent,
.-frame-on .l-mainContent {
  padding: clamp(24px, 3vw, 40px) !important;
}

/* パンくずも背景へ直載せしない。 */
.p-breadcrumb {
  background: transparent !important;
}

.p-breadcrumb__list {
  margin-top: 18px;
  margin-bottom: 14px;
  padding: 10px 18px !important;
  border: 1px solid rgba(48, 61, 96, .07);
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 24px rgba(12, 25, 57, .07);
  backdrop-filter: blur(6px);
}

/* サイドバー使用時も白いカード面。 */
#sidebar .c-widget,
.l-sidebar .c-widget {
  background: rgba(255, 255, 255, .98) !important;
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(12, 25, 57, .10);
}

.l-articleBottom,
.p-pnLinks,
.p-relatedPosts {
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------- */
@media (max-width: 959px) {
  body {
    /* iOS等のbackground-attachment:fixed不具合を避ける。 */
    background-attachment: scroll !important;
    background-size: cover !important;
  }

  .l-mainContent {
    border-radius: 16px !important;
  }
}

@media (max-width: 599px) {
  body {
    /* スマホでは左右余白がほぼ無いため、読みやすさを優先。 */
    background-image: none !important;
    background-color: #f5f4f8 !important;
  }

  .p-breadcrumb__list {
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 8px 12px !important;
    border-radius: 10px;
  }

  .l-mainContent,
  .l-mainContent:not(.-frame-off),
  .-frame-off .l-mainContent,
  .-frame-on .l-mainContent {
    padding: 20px 16px !important;
    border-radius: 12px !important;
  }
}