.np-cat-sections { margin: 32px 0; }
.np-cat-block { margin: 28px 0 40px; }
.np-sec-title { margin: 0 0 12px; font-size: 1.6rem; }
.np-sec-banner { max-width: 100%; height: auto; display: block; margin: 10px 0 18px; }



/* iPhone風 縦長フレーム */
.wp-block-video.phone-style {
  position: relative;
  display: inline-block;   /* 横に並ぶ */
  width: 390px;
  height: 693px;
  margin: 20px 30px;       /* ← 横方向に15pxの隙間を追加 */
  border: 8px solid #000;
  border-radius: 40px;
  background: #000;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  overflow: hidden;
  vertical-align: top;     /* 上揃え */
}

/* videoフィット */
.wp-block-video.phone-style video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 32px;
}

/* スピーカーホール */
.wp-block-video.phone-style::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 6px;
  background: #333;
  border-radius: 3px;
  z-index: 3;
}

/* ホームボタン */
.wp-block-video.phone-style::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: #111;
  border-radius: 50%;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.2);
  z-index: 3;
}

/* カラムの中にある動画をiPhone風に表示 */
.video-column .wp-block-video {
  margin: 0 15px; /* 動画の左右に隙間を作る */
}

/* 親：カラムの並びと隙間 */
.video-row.is-layout-flex{
  gap:32px !important;       /* 動画の間の隙間。好みで 24–40px に */
  justify-content:center;    /* 中央寄せ */
  flex-wrap:nowrap;          /* PCでは折り返さない */
}

/* 子：各カラムの内側余白（万一テーマが潰している場合の保険） */
.video-row .wp-block-column{ padding:0 !important; }

/* 動画カード：幅はカラムに合わせて可変、最大390px */
.video-row .wp-block-video.phone-style{
  width:100%;
  max-width:390px;            /* ご希望の最大幅 */
  aspect-ratio:9/16;
  height:auto;                /* 高さは比率で決定 */
  margin:0;                   /* 余白は親のgapで管理 */
}

/* videoを全面にフィット */
.video-row .wp-block-video.phone-style video{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:32px;
}

/* スマホ風の装飾（既存の before/after があるならそのままでOK） */

/* 画面が狭い時は折り返して中央に */
@media (max-width: 1024px){
  .video-row.is-layout-flex{ flex-wrap:wrap; gap:24px !important; }
  .video-row .wp-block-column{ flex:1 1 100%; }
  .video-row .wp-block-video.phone-style{ max-width:320px; margin:0 auto; }
}


/* 3カラム（任意） */
.faq-grid {
  display: grid;
  gap: 32px;
}
@media (min-width: 1024px) {
  .faq-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 見出し */
.faq-title { 
  font-weight: 700; 
  margin: 0 0 12px;
}

/* アコーディオン */
details.faq {
  border-bottom: 1px solid #e5e5e5;
  padding: 14px 0;
}
details.faq > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;      /* Safariの三角を消す */
  outline: none;
}
details.faq > summary::-webkit-details-marker { display: none; } /* Safari */
details.faq > summary::after {
  content: "›";
  display: inline-block;
  margin-left: .5em;
  transition: transform .2s ease;
}
details.faq[open] > summary::after { transform: rotate(90deg); }

.faq-body { 
  margin-top: 10px; 
  line-height: 1.8; 
  color: #444; 
}