/* =========================================================
   page-top.css
   トップページ専用スタイル
========================================================= */
/* =========================
     youtube
   ========================= */


/* YouTube動画を中央寄せ */
.wp-block-embed-youtube .wp-block-embed__wrapper .video-container,
.wp-block-embed-youtube .wp-block-embed__wrapper .video{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* iframeも中央基準に */
.wp-block-embed-youtube .wp-block-embed__wrapper iframe{
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100%;
}

/* YouTube全体をコンテンツ幅いっぱいに */
.wp-block-embed-youtube {
  width: 100%;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

/* wrapperも全幅 */
.wp-block-embed-youtube .wp-block-embed__wrapper {
  width: 100%;
}

/* ここが重要：video-container の固定幅と中央マージンを解除 */
.wp-block-embed-youtube .wp-block-embed__wrapper .video-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* iframeを親いっぱいに */
.wp-block-embed-youtube iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  display: block;
}




/* =========================
   TOPページ　NEWS
   ========================= */

/* NEWS欄全体の余白調整 */
.info-list {
  padding: 0 !important;
}

/* タイトルの余白 */
.info-list-item-content {
    margin-bottom: 0;
}

.info-list-item {
    padding: 8px 0;
    font-size: 16px;
    line-height: 1.5;
}




/* =========================
   インスタフィード
   ========================= */

/* instagramフィード調整*/
#sb_instagram .sbi_follow_btn a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0px;
}

#sb_instagram .sbi_follow_btn svg.fa-instagram {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  vertical-align: middle !important;
}





/* =========================================================
note RSS カルーセル
PC：3件表示 / スマホ：2件表示
========================================================= */

.note-carousel{
  position: relative;
  width: 100%;
}

.note-track{
  overflow: hidden !important;
  width: 100%;
}

.note-card-grid{
  --note-gap: 18px;

  display: flex !important;
  gap: var(--note-gap) !important;
  overflow: visible !important;

  padding: 0 !important;
  margin: 0 !important;

  transform: translate3d(0,0,0);
  transition: transform .35s ease;
  will-change: transform;
}

/* PC：3件表示 */
.note-card{
  flex: 0 0 calc((100% - var(--note-gap) * 2) / 3) !important;
  max-width: calc((100% - var(--note-gap) * 2) / 3) !important;

  display: block !important;
  text-decoration: none !important;
  color: inherit !important;

  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;

  transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}


/* スマホ：2件表示 */
@media (max-width: 600px){
  .note-card-grid{
    --note-gap: 12px;
  }

  .note-card{
    flex-basis: calc((100% - var(--note-gap)) / 2) !important;
    max-width: calc((100% - var(--note-gap)) / 2) !important;
  }
}

.note-card-thumb{
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 10;
  background-size: cover !important;
  background-position: center !important;
  background-color: #f2f5f5;
}

.note-card-thumb.is-noimg{
  background-image: linear-gradient(135deg, rgba(158,202,203,0.20), rgba(216,230,232,0.15));
}

.note-card-body{
  display: block;
  padding: 5px 10px 10px 12px;
}

.note-card-date{
  display: block;
  font-size: 12px;
  opacity: .65;
  margin-bottom: 1px;
}

.note-card-title{
  display: block;
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.3;
}

.note-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

.note-card:hover .note-card-title,
.note-card:hover .note-card-date{
  color: #666666 !important;
}

/* 少ない時は中央寄せ */
.note-carousel.is-few .note-card-grid{
  justify-content: center !important;
  transform: none !important;
}

.note-carousel.is-few .note-nav-btn,
.note-carousel.is-few .note-dots{
  display: none !important;
}

/* 矢印 */
.note-nav-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
  cursor: pointer;

  display: grid;
  place-items: center;
  padding: 0;
}

.note-nav-btn.is-prev{
  left: -10px;
}

.note-nav-btn.is-next{
  right: -10px;
}

.note-nav-btn svg{
  width: 16px;
  height: 16px;
  opacity: .75;
}

.note-nav-btn:disabled{
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

/* ドット非表示 */
.note-carousel .note-dots{
  display: none !important;
}


/* =========================
   　スライダー
   ========================= */

/* Smart Slider下の余白を消す */
.entry-content > .n2_clear {
  margin-bottom: 0 !important;
}


/* =========================
    faq調整
   ========================= */

/* Q（質問） */
.faq-question.faq-item {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Q（質問）の背景を透明に */
.faq-question.faq-item {
  background: transparent !important;
}

/* A（回答） */
.faq-answer.faq-item {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Q・Aを小さく＆軽く */
.faq-question-label,
.faq-answer-label {
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* テーブル内の文字色を統一 */
.wp-block-table,
.wp-block-table *,
.wp-block-flexible-table-block-table,
.wp-block-flexible-table-block-table * {
  color: #5B4B45 !important;
}


/* =========================
    トグル調整
   ========================= */


/* トグル全体を1px枠で統一 */
.toggle-button {
  border: 1px solid #d8d8d8 !important;
  border-bottom: none !important;
}

.toggle-content {
  border: 1px solid #d8d8d8 !important;
  border-top: none !important;
}

/* 閉じている時は下線も表示 */
.toggle-checkbox:not(:checked) + .toggle-button {
  border-bottom: 1px solid #d8d8d8 !important;
}

/* 開いている時はボタンとコンテンツを繋げる */
.toggle-checkbox:checked + .toggle-button {
  border-bottom: none !important;
}