/* =========================================
   Prime Gear：スマホ枠
   拡大中YouTube操作対応 最終版

   通常：
   - 最大237px

   YouTube Shorts：
   - 1179 / 2556
   - PC：ホバーで拡大アイコン
   - SP：拡大アイコン常時表示

   拡大：
   - PC：237px × scale
   - SP：最大320px直接指定
   - iframeはそのまま操作可能
   - 背面は上下左右4方向で操作遮断
========================================= */


/* =========================================
   変数
========================================= */

.is-style-smartphone-gray,
.is-style-smartphone-black,
.is-style-smartphone-gray-nocam,
.is-style-smartphone-black-nocam {

  --frame-color:
    #ced1d5;

  --smartphone-width:
    0;

  --border-rd:
    0;

  --camera-width:
    0;

  --camera-height:
    0;

  --pg-expand-scale:
    1;

  --pg-expanded-width:
    237px;
}


.is-style-smartphone-black,
.is-style-smartphone-black-nocam {

  --frame-color:
    #3c3c3c;
}


/* =========================================
   通常ブロック幅
========================================= */

.wp-block-image.is-style-smartphone-gray,
.wp-block-image.is-style-smartphone-black,
.wp-block-image.is-style-smartphone-gray-nocam,
.wp-block-image.is-style-smartphone-black-nocam,

.wp-block-video.is-style-smartphone-gray,
.wp-block-video.is-style-smartphone-black,
.wp-block-video.is-style-smartphone-gray-nocam,
.wp-block-video.is-style-smartphone-black-nocam,

.wp-block-embed.is-style-smartphone-gray,
.wp-block-embed.is-style-smartphone-black,
.wp-block-embed.is-style-smartphone-gray-nocam,
.wp-block-embed.is-style-smartphone-black-nocam {

  width:
    100%;

  max-width:
    237px;

  margin-left:
    auto;

  margin-right:
    auto;
}


/* =========================================
   スマホ外枠
========================================= */

.is-style-smartphone-gray,
.is-style-smartphone-black,
.is-style-smartphone-gray-nocam,
.is-style-smartphone-black-nocam {

  border:
    solid
    calc(
      var(--smartphone-width) *
      .015
    )
    var(--frame-color);

  width:
    fit-content;

  background:
    var(--frame-color);

  position:
    relative;

  border-radius:
    var(--border-rd);

  box-shadow:
    0 12px 24px -2px
    rgb(0 0 0 / 25%);

  margin:
    0 auto 3em;
}


/* =========================================
   figure余白
========================================= */

.is-style-smartphone-gray figure,
.is-style-smartphone-black figure,
.is-style-smartphone-gray-nocam figure,
.is-style-smartphone-black-nocam figure {

  margin-bottom:
    0 !important;
}


/* =========================================
   画像
========================================= */

.is-style-smartphone-gray img,
.is-style-smartphone-black img,
.is-style-smartphone-gray-nocam img,
.is-style-smartphone-black-nocam img {

  width:
    100%;

  height:
    auto;

  display:
    block;

  box-shadow:
    0 2px 24px -2px
    rgb(0 0 0 / 25%);

  clip-path:
    inset(
      2px
      round
      calc(
        var(--border-rd) *
        .85
      )
    );
}


/* =========================================
   通常動画
========================================= */

.wp-block-video.is-style-smartphone-gray,
.wp-block-video.is-style-smartphone-black,
.wp-block-video.is-style-smartphone-gray-nocam,
.wp-block-video.is-style-smartphone-black-nocam {

  padding:
    2px;

  line-height:
    0;
}


.is-style-smartphone-gray video,
.is-style-smartphone-black video,
.is-style-smartphone-gray-nocam video,
.is-style-smartphone-black-nocam video {

  width:
    100%;

  height:
    auto;

  display:
    block;

  margin:
    0 !important;

  vertical-align:
    top;

  box-shadow:
    0 2px 24px -2px
    rgb(0 0 0 / 25%);

  clip-path:
    inset(
      0
      round
      calc(
        var(--border-rd) *
        .85
      )
    );
}


/* =========================================
   YouTube Shorts
========================================= */

.wp-block-embed.is-style-smartphone-gray,
.wp-block-embed.is-style-smartphone-black,
.wp-block-embed.is-style-smartphone-gray-nocam,
.wp-block-embed.is-style-smartphone-black-nocam {

  padding:
    2px;

  line-height:
    0;
}


/* WordPress標準比率を無効化 */

.wp-block-embed.is-style-smartphone-gray
.wp-block-embed__wrapper::before,

.wp-block-embed.is-style-smartphone-black
.wp-block-embed__wrapper::before,

.wp-block-embed.is-style-smartphone-gray-nocam
.wp-block-embed__wrapper::before,

.wp-block-embed.is-style-smartphone-black-nocam
.wp-block-embed__wrapper::before {

  content:
    none !important;

  display:
    none !important;

  padding-top:
    0 !important;
}


/* wrapper */

.wp-block-embed.is-style-smartphone-gray
.wp-block-embed__wrapper,

.wp-block-embed.is-style-smartphone-black
.wp-block-embed__wrapper,

.wp-block-embed.is-style-smartphone-gray-nocam
.wp-block-embed__wrapper,

.wp-block-embed.is-style-smartphone-black-nocam
.wp-block-embed__wrapper {

  width:
    100% !important;

  aspect-ratio:
    1179 / 2556 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    hidden;

  border-radius:
    calc(
      var(--border-rd) *
      .85
    );
}


/* iframe */

.wp-block-embed.is-style-smartphone-gray
iframe,

.wp-block-embed.is-style-smartphone-black
iframe,

.wp-block-embed.is-style-smartphone-gray-nocam
iframe,

.wp-block-embed.is-style-smartphone-black-nocam
iframe {

  position:
    static !important;

  width:
    100% !important;

  height:
    auto !important;

  aspect-ratio:
    1179 / 2556 !important;

  max-width:
    none !important;

  display:
    block;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0;

  box-shadow:
    0 2px 24px -2px
    rgb(0 0 0 / 25%);

  border-radius:
    calc(
      var(--border-rd) *
      .85
    );

  pointer-events:
    auto !important;

  touch-action:
    manipulation;
}


/* =========================================
   ノッチ
========================================= */

.is-style-smartphone-gray p,
.is-style-smartphone-black p,
.is-style-smartphone-gray-nocam p,
.is-style-smartphone-black-nocam p {

  width:
    calc(
      var(--camera-width) *
      .8
    );

  height:
    var(--camera-height);

  position:
    absolute;

  top:
    calc(
      var(--border-rd) *
      .5
    );

  left:
    calc(
      var(--smartphone-width) /
      2
    );

  transform:
    translate(
      -50%,
      -50%
    );

  -webkit-transform:
    translate(
      -50%,
      -50%
    );

  background:
    var(--frame-color);

  border-radius:
    calc(
      var(--camera-width) /
      3.4
    );

  margin:
    0 !important;

  padding:
    0 !important;

  line-height:
    0 !important;

  font-size:
    0 !important;

  letter-spacing:
    0 !important;

  display:
    block;

  pointer-events:
    none;
}


.is-style-smartphone-gray-nocam p,
.is-style-smartphone-black-nocam p {

  display:
    none;
}


/* =========================================
   エディター：Core Columns
========================================= */

.editor-styles-wrapper
.wp-block-columns
.wp-block-image.is-style-smartphone-gray,

.editor-styles-wrapper
.wp-block-columns
.wp-block-image.is-style-smartphone-black,

.editor-styles-wrapper
.wp-block-columns
.wp-block-image.is-style-smartphone-gray-nocam,

.editor-styles-wrapper
.wp-block-columns
.wp-block-image.is-style-smartphone-black-nocam,

.editor-styles-wrapper
.wp-block-columns
.wp-block-video.is-style-smartphone-gray,

.editor-styles-wrapper
.wp-block-columns
.wp-block-video.is-style-smartphone-black,

.editor-styles-wrapper
.wp-block-columns
.wp-block-video.is-style-smartphone-gray-nocam,

.editor-styles-wrapper
.wp-block-columns
.wp-block-video.is-style-smartphone-black-nocam,

.editor-styles-wrapper
.wp-block-columns
.wp-block-embed.is-style-smartphone-gray,

.editor-styles-wrapper
.wp-block-columns
.wp-block-embed.is-style-smartphone-black,

.editor-styles-wrapper
.wp-block-columns
.wp-block-embed.is-style-smartphone-gray-nocam,

.editor-styles-wrapper
.wp-block-columns
.wp-block-embed.is-style-smartphone-black-nocam {

  max-width:
    237px !important;

  width:
    100% !important;

  flex:
    0 0 auto;

  align-self:
    center;

  margin-left:
    auto !important;

  margin-right:
    auto !important;
}


.editor-styles-wrapper
.wp-block-columns
.wp-block-image.is-style-smartphone-gray
img,

.editor-styles-wrapper
.wp-block-columns
.wp-block-image.is-style-smartphone-black
img,

.editor-styles-wrapper
.wp-block-columns
.wp-block-image.is-style-smartphone-gray-nocam
img,

.editor-styles-wrapper
.wp-block-columns
.wp-block-image.is-style-smartphone-black-nocam
img,

.editor-styles-wrapper
.wp-block-columns
.wp-block-video.is-style-smartphone-gray
video,

.editor-styles-wrapper
.wp-block-columns
.wp-block-video.is-style-smartphone-black
video,

.editor-styles-wrapper
.wp-block-columns
.wp-block-video.is-style-smartphone-gray-nocam
video,

.editor-styles-wrapper
.wp-block-columns
.wp-block-video.is-style-smartphone-black-nocam
video {

  width:
    100% !important;

  height:
    auto !important;

  display:
    block;
}


.editor-styles-wrapper
.wp-block-columns
.wp-block-embed.is-style-smartphone-gray
iframe,

.editor-styles-wrapper
.wp-block-columns
.wp-block-embed.is-style-smartphone-black
iframe,

.editor-styles-wrapper
.wp-block-columns
.wp-block-embed.is-style-smartphone-gray-nocam
iframe,

.editor-styles-wrapper
.wp-block-columns
.wp-block-embed.is-style-smartphone-black-nocam
iframe {

  width:
    100% !important;

  height:
    100% !important;

  max-width:
    100% !important;

  display:
    block;
}


/* =========================================
   エディター：SWELL リッチカラム
========================================= */

.editor-styles-wrapper
.swell-block-columns
.wp-block-image.is-style-smartphone-gray,

.editor-styles-wrapper
.swell-block-columns
.wp-block-image.is-style-smartphone-black,

.editor-styles-wrapper
.swell-block-columns
.wp-block-image.is-style-smartphone-gray-nocam,

.editor-styles-wrapper
.swell-block-columns
.wp-block-image.is-style-smartphone-black-nocam,

.editor-styles-wrapper
.swell-block-columns
.wp-block-video.is-style-smartphone-gray,

.editor-styles-wrapper
.swell-block-columns
.wp-block-video.is-style-smartphone-black,

.editor-styles-wrapper
.swell-block-columns
.wp-block-video.is-style-smartphone-gray-nocam,

.editor-styles-wrapper
.swell-block-columns
.wp-block-video.is-style-smartphone-black-nocam,

.editor-styles-wrapper
.swell-block-columns
.wp-block-embed.is-style-smartphone-gray,

.editor-styles-wrapper
.swell-block-columns
.wp-block-embed.is-style-smartphone-black,

.editor-styles-wrapper
.swell-block-columns
.wp-block-embed.is-style-smartphone-gray-nocam,

.editor-styles-wrapper
.swell-block-columns
.wp-block-embed.is-style-smartphone-black-nocam {

  max-width:
    237px !important;

  width:
    100% !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  justify-self:
    center;

  align-self:
    center;
}


.editor-styles-wrapper
.swell-block-columns
.wp-block-image.is-style-smartphone-gray
img,

.editor-styles-wrapper
.swell-block-columns
.wp-block-image.is-style-smartphone-black
img,

.editor-styles-wrapper
.swell-block-columns
.wp-block-image.is-style-smartphone-gray-nocam
img,

.editor-styles-wrapper
.swell-block-columns
.wp-block-image.is-style-smartphone-black-nocam
img,

.editor-styles-wrapper
.swell-block-columns
.wp-block-video.is-style-smartphone-gray
video,

.editor-styles-wrapper
.swell-block-columns
.wp-block-video.is-style-smartphone-black
video,

.editor-styles-wrapper
.swell-block-columns
.wp-block-video.is-style-smartphone-gray-nocam
video,

.editor-styles-wrapper
.swell-block-columns
.wp-block-video.is-style-smartphone-black-nocam
video {

  width:
    100% !important;

  height:
    auto !important;

  display:
    block;
}


.editor-styles-wrapper
.swell-block-columns
.wp-block-embed.is-style-smartphone-gray
iframe,

.editor-styles-wrapper
.swell-block-columns
.wp-block-embed.is-style-smartphone-black
iframe,

.editor-styles-wrapper
.swell-block-columns
.wp-block-embed.is-style-smartphone-gray-nocam
iframe,

.editor-styles-wrapper
.swell-block-columns
.wp-block-embed.is-style-smartphone-black-nocam
iframe {

  width:
    100% !important;

  height:
    100% !important;

  max-width:
    100% !important;

  display:
    block;
}


/* =========================================
   拡大ボタン
========================================= */

.pg-smartphone-expand {

  position:
    absolute;

  top:
    10px;

  right:
    10px;

  width:
    34px;

  height:
    34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  margin:
    0;

  border:
    0;

  border-radius:
    50%;

  background:
    rgb(18 18 18 / 82%);

  color:
    #fff;

  font-size:
    18px;

  line-height:
    1;

  cursor:
    pointer;

  box-shadow:
    0 4px 14px
    rgb(0 0 0 / 22%);

  opacity:
    0;

  visibility:
    hidden;

  transform:
    scale(.92);

  transition:
    opacity .18s ease,
    visibility .18s ease,
    transform .18s ease,
    background-color .18s ease;

  z-index:
    30;

  -webkit-tap-highlight-color:
    transparent;

  touch-action:
    manipulation;
}


.pg-smartphone-expand__icon {

  display:
    block;

  line-height:
    1;
}


/* =========================================
   PC：ホバー時
========================================= */

@media
(hover: hover)
and
(pointer: fine) {

  .wp-block-embed.is-style-smartphone-gray:hover
  > .pg-smartphone-expand,

  .wp-block-embed.is-style-smartphone-black:hover
  > .pg-smartphone-expand,

  .wp-block-embed.is-style-smartphone-gray-nocam:hover
  > .pg-smartphone-expand,

  .wp-block-embed.is-style-smartphone-black-nocam:hover
  > .pg-smartphone-expand {

    opacity:
      1;

    visibility:
      visible;

    transform:
      scale(1);
  }


  .pg-smartphone-expand:hover {

    background:
      rgb(18 18 18 / 96%);
  }
}


/* =========================================
   SP：拡大ボタン常時表示
========================================= */

@media
(hover: none),
(pointer: coarse) {

  .wp-block-embed
  > .pg-smartphone-expand {

    top:
      10px;

    right:
      10px;

    width:
      36px;

    height:
      36px;

    opacity:
      1;

    visibility:
      visible;

    transform:
      scale(1);

    pointer-events:
      auto;

    z-index:
      30;
  }
}


/* =========================================
   拡大時：
   親制約解除
========================================= */

.pg-smartphone-expand-ancestor {

  transform:
    none !important;

  filter:
    none !important;

  -webkit-filter:
    none !important;

  perspective:
    none !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;

  contain:
    none !important;

  will-change:
    auto !important;

  overflow:
    visible !important;

  overflow-x:
    visible !important;

  overflow-y:
    visible !important;
}


.pg-smartphone-expand-ancestor::before,
.pg-smartphone-expand-ancestor::after {

  transform:
    none !important;

  filter:
    none !important;

  -webkit-filter:
    none !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;
}


/* =========================================
   拡大中：
   ページ固定
========================================= */

body.pg-smartphone-expanded-open {

  overflow:
    hidden !important;

  overscroll-behavior:
    none;
}


/* =========================================
   4方向 背面操作遮断

   スマホ枠中央部分には
   レイヤーを置かないため
   iframeを直接操作できる
========================================= */

.pg-smartphone-clickblocker-zone {

  position:
    fixed !important;

  display:
    block;

  margin:
    0;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  opacity:
    0;

  visibility:
    visible;

  pointer-events:
    auto !important;

  touch-action:
    none;

  z-index:
    2147483645 !important;

  -webkit-tap-highlight-color:
    transparent;
}


.pg-smartphone-clickblocker-zone.is-visible {

  opacity:
    1;
}


/* =========================================
   拡大中：
   SWELL固定UI
========================================= */

body.pg-smartphone-expanded-open
.p-fixBtnWrap,

body.pg-smartphone-expanded-open
#fix_tocbtn,

body.pg-smartphone-expanded-open
#pagetop,

body.pg-smartphone-expanded-open
.c-fixBtn {

  opacity:
    0 !important;

  visibility:
    hidden !important;

  pointer-events:
    none !important;
}


/* =========================================
   ヘッダーを背面へ
========================================= */

body.pg-smartphone-expanded-open
#header,

body.pg-smartphone-expanded-open
.l-header,

body.pg-smartphone-expanded-open
.l-header__inner,

body.pg-smartphone-expanded-open
.l-header__bar {

  z-index:
    0 !important;
}


/* =========================================
   拡大表示
========================================= */

.wp-block-embed.pg-smartphone-expanded {

  position:
    fixed !important;

  top:
    50% !important;

  left:
    50% !important;

  width:
    var(--pg-expanded-width) !important;

  min-width:
    var(--pg-expanded-width) !important;

  max-width:
    var(--pg-expanded-width) !important;

  margin:
    0 !important;

  transform:
    translate(
      -50%,
      -50%
    )
    scale(1);

  transform-origin:
    center center;

  opacity:
    0;

  transition:
    transform .2s ease,
    opacity .18s ease;

  z-index:
    2147483646 !important;

  float:
    none !important;

  /*
   * 背景暗転は
   * スマホ枠自身の巨大shadow
   */
  box-shadow:
    0 0 0 100vmax
    rgb(0 0 0 / 88%),
    0 12px 24px -2px
    rgb(0 0 0 / 25%) !important;
}


.wp-block-embed.pg-smartphone-expanded.is-expanded-visible {

  transform:
    translate(
      -50%,
      -50%
    )
    scale(
      var(--pg-expand-scale)
    );

  opacity:
    1;
}


/* =========================================
   拡大中：
   YouTube操作可能
========================================= */

.wp-block-embed.pg-smartphone-expanded
.wp-block-embed__wrapper {

  width:
    100% !important;

  max-width:
    none !important;

  aspect-ratio:
    1179 / 2556 !important;

  pointer-events:
    auto !important;
}


.wp-block-embed.pg-smartphone-expanded
iframe {

  width:
    100% !important;

  height:
    auto !important;

  aspect-ratio:
    1179 / 2556 !important;

  pointer-events:
    auto !important;

  touch-action:
    manipulation;
}


/* 拡大中は⛶を非表示 */

.wp-block-embed.pg-smartphone-expanded
> .pg-smartphone-expand {

  display:
    none !important;
}


/* =========================================
   閉じるボタン
========================================= */

.pg-smartphone-close {

  position:
    fixed !important;

  top:
    calc(
      env(
        safe-area-inset-top
      )
      + 14px
    ) !important;

  right:
    calc(
      env(
        safe-area-inset-right
      )
      + 14px
    ) !important;

  width:
    40px;

  height:
    40px;

  padding:
    0;

  margin:
    0;

  border:
    0;

  background:
    transparent;

  opacity:
    0;

  cursor:
    pointer;

  pointer-events:
    auto !important;

  z-index:
    2147483647 !important;

  transition:
    opacity .18s ease;

  -webkit-tap-highlight-color:
    transparent;

  touch-action:
    manipulation;
}


.pg-smartphone-close.is-visible {

  opacity:
    1;
}


.pg-smartphone-close::before,
.pg-smartphone-close::after {

  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    22px;

  height:
    1.5px;

  background:
    #fff;

  border-radius:
    999px;

  pointer-events:
    none;
}


.pg-smartphone-close::before {

  transform:
    translate(
      -50%,
      -50%
    )
    rotate(
      45deg
    );
}


.pg-smartphone-close::after {

  transform:
    translate(
      -50%,
      -50%
    )
    rotate(
      -45deg
    );
}


.pg-smartphone-close:hover::before,
.pg-smartphone-close:hover::after {

  opacity:
    .7;
}


.pg-smartphone-close:focus-visible {

  outline:
    1px solid
    rgb(255 255 255 / 70%);

  outline-offset:
    2px;

  border-radius:
    50%;
}


/* =========================================
   SP拡大表示
========================================= */

@media
(max-width: 600px) {

  .wp-block-embed.pg-smartphone-expanded {

    top:
      50dvh !important;

    transform:
      translate(
        -50%,
        -50%
      )
      scale(1);

    box-shadow:
      0 0 0 100vmax
      rgb(0 0 0 / 82%),
      0 12px 30px -4px
      rgb(0 0 0 / 35%) !important;
  }


  .wp-block-embed.pg-smartphone-expanded.is-expanded-visible {

    transform:
      translate(
        -50%,
        -50%
      )
      scale(1);
  }


  .pg-smartphone-close {

    top:
      calc(
        env(
          safe-area-inset-top
        )
        + 14px
      ) !important;

    right:
      calc(
        env(
          safe-area-inset-right
        )
        + 14px
      ) !important;

    width:
      38px;

    height:
      38px;
  }


  .pg-smartphone-close::before,
  .pg-smartphone-close::after {

    width:
      20px;
  }


  /* =====================================
     SP拡大中：
     パンくず非表示
  ===================================== */

  body.pg-smartphone-expanded-open
  #breadcrumb,

  body.pg-smartphone-expanded-open
  .p-breadcrumb,

  body.pg-smartphone-expanded-open
  .breadcrumb,

  body.pg-smartphone-expanded-open
  .c-breadcrumb,

  body.pg-smartphone-expanded-open
  .c-pankuzu,

  body.pg-smartphone-expanded-open
  .pankuzu {

    opacity:
      0 !important;

    visibility:
      hidden !important;

    pointer-events:
      none !important;
  }
}


/* =========================================
   prefers-reduced-motion
========================================= */

@media
(prefers-reduced-motion: reduce) {

  .pg-smartphone-expand,
  .pg-smartphone-close,
  .wp-block-embed.pg-smartphone-expanded {

    transition:
      none !important;
  }
}