/* =========================================================
   SORA GROW Service Single v1.2
   Arkheの本文幅からサービス詳細だけ全幅化
========================================================= */

/* サービス詳細ではArkheの標準サイドバー・下部ウィジェットを非表示 */
body.single-service .l-sidebar,
body.single-service .c-sidebar,
body.single-service .p-sidebar,
body.single-service .widget-area,
body.single-service .l-widgetArea,
body.single-service .p-widgetArea,
body.single-service .l-footer__widgets,
body.single-service .p-footer__widgets,
body.single-service .l-footer__widgetArea,
body.single-service .p-footer__widgetArea {
  display: none !important;
}

/* 標準の本文カラムを1カラム扱いに */
body.single-service .l-content,
body.single-service .l-content__body,
body.single-service .l-main,
body.single-service .l-mainContent,
body.single-service .p-main {
  max-width: none !important;
}

/* 専用テンプレート本体 */
body.single-service .sgsp-single-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/*
 * Arkheのコンテンツコンテナ内から viewport 全幅へ抜け出す。
 * calc(50% - 50vw) 方式は親コンテナ幅に依存せず中央を維持する。
 */
body.single-service .sgsp-single-shell > .sg-service-detail {
  position: relative !important;
  left: auto !important;

  width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 各セクションの背景は画面幅いっぱい */
body.single-service .sg-service-detail > section {
  width: 100% !important;
  max-width: none !important;
}

/*
 * 内側コンテンツ幅。
 * ヘッダーと視覚的に揃うよう最大1200px。
 */
body.single-service .sg-service-detail .sgsd-container {
  width: min(1200px, calc(100% - 64px)) !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Arkhe標準パンくずの直後から本文を開始 */
body.single-service .sgsp-single-shell {
  margin-top: 0 !important;
}

/* サービス詳細で不要な検索・投稿系ウィジェットを念のため非表示 */
body.single-service .widget_search,
body.single-service .widget_recent_entries,
body.single-service .widget_recent_comments,
body.single-service .widget_archive,
body.single-service .widget_categories,
body.single-service .wp-block-search,
body.single-service [class*="widget_search"],
body.single-service [class*="widget_recent"],
body.single-service [class*="widget_archive"],
body.single-service [class*="widget_categories"] {
  display: none !important;
}

@media (max-width: 1000px) {
  body.single-service .sg-service-detail .sgsd-container {
    width: calc(100% - 48px) !important;
  }
}

@media (max-width: 767px) {
  body.single-service .sg-service-detail .sgsd-container {
    width: calc(100% - 36px) !important;
  }
}