/**
 * PC用の全ページ共通スタイル
 *
 * wp_is_mobile()でPCと判定されたページでのみ読み込まれる
 * （functions.php参照）。style.css（全端末共通）とは別ファイルにして、
 * PC専用の調整だけをここにまとめる。
 */

#container {
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
}

.site-header {
    max-width: 400px;
    margin: 0 auto;
    overflow: hidden;
}

.site-body {
    overflow: hidden;
}

/* 全幅対応 */
.site-body-container {
  position: relative;
}
.site-body-container .wp-block-vk-blocks-outer.vk_outer.vk_outer-width-full.alignfull {
  width: auto;
  max-width: none;
  margin-left: -15px;
  margin-right: -15px;
}

/* 画像 */
.wp-block-image {
  max-width: 400px;
}

/* 左ナビ・右下QRブロック（functions.phpのlightning_site_body_appendから
   出力される）。HTML上の位置に関わらず、position: fixedで
   画面上の固定位置に配置する。 */
.pc-nav-block {
  position: fixed;
  top: 40px;
  left: 40px;
  z-index: 100;
}
.pc-nav-widget-item {
  margin-bottom: 12px;
}
.pc-nav-widget-title {
  font-size: 1rem;
  margin-bottom: 8px;
}

.pc-qr-block {
  position: fixed;
  right: 24px;
  bottom: 24px;
}
.pc-qr-block .wp-block-group {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 100;
    max-width: 320px; /* 目標デザインに合わせてコンパクトにする */
    padding: 10px 10px 10px 20px;
}
.pc-qr-block::after {
    content: '';
    display: block;
    background-image: url(../../../../uploads/ico_kurobuta1.png);
    width: 72px;
    height: 66px;
    top: -47px;
    right: 4px;
    position: absolute;
    z-index: -1;
    background-size: 100%;
    transform: rotate(11deg);
}
.pc-qr-block .wp-block-columns {
    gap: 15px;
}
.pc-qr-block img {
  width: 100px; /* QR画像自体も縮小 */
  height: auto;
}
.pc-qr-block .wp-block-paragraph {
    position: relative;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
    padding: 0 0 0 47px;
}
.pc-qr-block .wp-block-paragraph::before {
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  content: "\f3cd"; /* fa-mobile-screen */
  color: #211d17;
  font-size: 50px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.pc-qr-block .wp-block-paragraph::after {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    content: "\f054";
    color: #a9822d;
    position: relative;
    left: 10px;
    bottom: 0px;
}
#page_top {
    left: 50px;
    right: auto;
}