@charset "utf-8";

/* ==================== ページ全体の横スクロール防止 ==================== */
/* fixedWidth Splide / 矢印外配置 / 大文字背景装飾 などが
   インナーをはみ出してもhorizontal scrollを出さない */
html,
body{
  overflow-x: clip;
}
@media screen and (min-width: 768px){
  html{
    scroll-padding-top: calc(var(--header-notice-height-pc) + var(--header-container-height-pc) + var(--header-nav-height-pc));
  }
}

/* ==================== ブライダル専用ヘッダー(b-hd) ==================== */
:root{
  --header-notice-height-pc: 35px;
  --header-container-height-pc: 75px;
  --header-nav-height-pc: 50px;
}
.b-hd{
  background-color: var(--c-white);
  z-index: 50;
}
.b-hd__notice{
  background-color: var(--c-turquoise);
  margin: 0;
  text-align: center;
}
.b-hd__notice a{
  display: block;
  color: var(--c-white);
  text-decoration: none;
  letter-spacing: 0.05em;
}
.b-hd__container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.b-hd__logo a{
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--c-gray-dark);
  line-height: 1.1;
}
.b-hd__logoEn{
  font-family: var(--ff-en);
  letter-spacing: 0.12em;
  font-weight: 500;
}
.b-hd__logoSub{
  font-family: var(--ff-en);
  letter-spacing: 0.2em;
  color: var(--c-brown);
  font-weight: 500;
  margin-top: 6px;
}
.b-hd__ctaGroup{
  display: flex;
  align-items: center;
  gap: 14px;
}
.b-hd__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 999px;
  letter-spacing: 0.05em;
  font-family: var(--ff-base);
  white-space: nowrap;
  transition: opacity .3s ease, background-color .3s ease, color .3s ease;
  position: relative;
}
.b-hd__cta--outline{
  background-color: var(--c-white);
  color: var(--c-gray-dark);
  border: 1px solid var(--c-brown);
}
.b-hd__cta--primary{
  background-color: var(--c-brown);
  color: var(--c-white);
  border: 1px solid var(--c-brown);
  font-weight: 700;
}
.b-hd__ctaBubble{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--c-red-500);
  color: var(--c-white);
  font-size: 8px;
  padding-inline: 8px;
  height: 18px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  height: 18px;
  letter-spacing: 0.05em;
  font-weight: 400;
  white-space: nowrap;
}
.b-hd__nav{
  border-top: 1px solid var(--c-gray-line);
  background-color: var(--c-white);
}
.b-hd__navList{
  display: flex;
  justify-content: center;

}
.b-hd__navList li{
  position: relative;
}
.b-hd__navList li + li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background-color: var(--c-gray-line);
}
.b-hd__navList a{
  display: inline-block;
  color: var(--c-gray-dark);
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: color .3s ease;
}
.b-hd__hamburger{
  display: none;
}

/* SPサイドナビ */
.b-hd-fatnav__list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.b-hd-fatnav__list a{
  display: block;
  padding: 14px 20px;
  color: var(--c-gray-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--c-gray-line);
}
.b-hd-fatnav__divider{
  height: 16px;
  background-color: var(--c-bg-ivory);
}
.b-hd-fatnav__cta{
  background-color: var(--c-brown);
  color: var(--c-white) !important;
  text-align: center;
  font-weight: 700;
}

/* hover */
@media (hover: hover){
  .b-hd__notice a:hover{ opacity: .85; }
  .b-hd__cta--outline:hover{ opacity: 0.7; }
  .b-hd__cta--primary:hover{ background-color: var(--c-brown-light); }
  .b-hd__navList a:hover{ color: var(--c-brown);}
}

/* PC */
@media screen and (min-width: 1301px){
  .b-hd__navList li + li{
    padding-left: var(--spc-40);
    margin-left: var(--spc-40);
  }
}
@media screen and (min-width: 768px) and (max-width: 1300px){
  .b-hd__navList li + li{
    padding-left: var(--spc-20);
    margin-left: var(--spc-20);
  }
  body.scroll .b-hd__cta--primary{
    display: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1000px){
  body.scroll .b-hd__logo{
    width: 100px;
  }
  body.scroll .b-hd__ctaGroup{
    display: none;
  }
}
@media screen and (min-width: 768px){
  body{
    padding-top: calc(var(--header-notice-height-pc) + var(--header-container-height-pc) + var(--header-nav-height-pc));
  }
  .b-hd{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
  }
  .b-hd__notice{
    font-size: var(--fz-13);
    height: var(--header-notice-height-pc);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .b-hd__container{
    height: var(--header-container-height-pc);
  }
  .b-hd__nav{
    height: var(--header-nav-height-pc);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .b-hd__logo{
    width: 124px;
  }
  .b-hd__ctaGroup{
    width: fit-content;
  }
  .b-hd__cta{
    height: 44px;
    padding-inline: 15px;
    font-size: var(--fz-14);
    font-weight: 500;
    color: var(--c-brown);
  }
  .b-hd__cta--primary{
    padding-inline: 37px;
    color: var(--c-white);
  }
  .b-hd__navList a{
    font-size: var(--fz-14);
  }
  body.scroll .b-hd{
    position: fixed;
    opacity: 0;
    animation: var(--anime-fade-in);
  }
  body.scroll .b-hd__box{
    width: var(--inner-w);
    max-width: var(--pc-maw-lg);
    margin-inline: auto;
    display: flex;
    height: 75px;
    align-items: center;
  }
  body.scroll .b-hd__container{
    display: contents;
  }
  body.scroll .b-hd__logo{
    order: 1;
  }
  body.scroll .b-hd__ctaGroup{
    order: 3;
  }
  body.scroll .b-hd__nav{
    order: 2;
    border-top: none;
  }
  body.scroll .b-hd__cta:first-child{
    display: none;
  }
  body.scroll .b-hd__nav{
    flex: 1;
    display: flex;
    justify-content: flex-end;
    margin-right: var(--spc-20);
  }
  body.scroll .b-hd__navList li + li{
    padding-left: 0;
    margin-left: var(--spc-20);
  }
  body.scroll .b-hd__navList li + li::before{
    content: none;
  }
}

/* SP */
@media screen and (max-width: 767px){
  .b-hd__notice{
    font-size: 11px;
    padding: 6px 12px;
  }
  .b-hd__container{
    height: var(--header-container-height-sp);
    padding: 0 16px;
    gap: 12px;
  }
  .b-hd__logo{
    width: 90px;
  }
  .b-hd__ctaGroup{
    display: none;
  }
  .b-hd__nav{
    display: none;
  }
  .b-hd__hamburger{
    display: block;
    display: flex;
    align-items: center;
    top: 25px;
    right: 8px;
    --hamburger-line-ps: 8px;
  }
  .b-hd__hamburger::after{
    content: none;
  }
  .hamburger__icon, .hamburger__icon:before, .hamburger__icon:after{
    width: 28px;
    height: 2px;
  }
  .hamburger .hamburger__icon:after{
    width: 60% !important;
  }
}


/* ==================== ブライダル専用フッター(b-ft) ==================== */
.b-ft{
  background-color: var(--c-bg-ivory);
}
.b-ft__main{
  padding-block: 60px 40px;
}
.b-ft__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-bottom: 1px solid var(--c-brown-150);
  padding-bottom: 30px;
  margin-bottom: 40px;
}
.b-ft__logo a{
  display: inline-block;
  text-decoration: none;
}
.b-ft__logoEn{
  font-family: var(--ff-en);
  color: var(--c-gray-dark);
  font-weight: 500;
  letter-spacing: 0.15em;
}
.b-ft__contact{
  display: flex;
  gap: 20px;
}
.b-ft__contactCol{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.b-ft__contactLabel{
  font-size: var(--fz-15);
  color: var(--c-gray-dark);
  letter-spacing: 0.05em;
  margin: 0;
}
.b-ft__contactBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: opacity .3s ease, background-color .3s ease;
  height: 50px;
  font-size: var(--fz-15);
  white-space: nowrap;
  width: clamp( 200px, 25vw, 285px);
  position: relative;
}
.b-ft__contactBtn--outline{
  background-color: var(--c-white);
  color: var(--c-brown);
  border: 1px solid var(--c-brown);
}
.b-ft__contactBtn--primary{
  background-color: var(--c-brown);
  color: var(--c-white);
  border: 1px solid var(--c-brown);
}
.b-ft__contactIcon{
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
}
.b-ft__contactIcon--mail{
  mask: var(--data-icon-mail) no-repeat center center / contain;
  -webkit-mask: var(--data-icon-mail) no-repeat center center / contain;
}
.b-ft__contactIcon--book{
  mask: var(--data-icon-book) no-repeat center center / contain;
  -webkit-mask: var(--data-icon-book) no-repeat center center / contain;
}
.b-ft__navGrid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--c-brown-150);
  margin-bottom: 30px;
}
.b-ft__navHead{
  font-family: var(--ff-en);
  font-size: var(--fz-18);
  font-weight: 500;
  color: var(--c-gray-dark);
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  position: relative;
}
/* アコーディオン body（PC は常時 1fr、SP は 0fr→1fr） */
.b-ft__navBody{
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
}
.b-ft__navBody > *{
  min-height: 0;
}
.b-ft__navList{

}
.b-ft__navList li{
  position: relative;
  padding-left: 14px;
  margin-bottom: 10px;
}
.b-ft__navList li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--c-brown);
}
.b-ft__navList a{
  color: var(--c-gray-dark);
  text-decoration: none;
  font-size: var(--fz-13);
  letter-spacing: 0.03em;
  transition: color .3s ease;
}
.b-ft__sns{
  display: flex;
  align-items: center;
  gap: 14px;
}
.b-ft__snsHead{
  font-family: var(--ff-en);
  font-size: var(--fz-18);
  letter-spacing: 0.02em;
  color: var(--c-gray-dark);
  border-right: 1px solid var(--c-gray-line);
  padding-right: 14px;
  margin: 0;
  font-weight: 500;
}
.b-ft__snsList{
  display: flex;
  gap: 12px;

}
.b-ft__snsList a{
  display: block;
  width: 40px;
  aspect-ratio: 1/1;
  	background: var(--c-brown-150) var(--this-icon) no-repeat center center / 120%;
  border-radius: 50%;
  transition: background-color .3s ease;
}
.b-ft__bottom{
  background-color: var(--c-brown-deep);
}
.b-ft__bottomInner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 14px;
}
.b-ft__policy{
  display: flex;

  gap: 30px;
}
.b-ft__policy a{
  color: var(--c-bg-ivory);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.05em;
}
.b-ft__copy{
  font-family: var(--ff-en);
  letter-spacing: 0.1em;
  font-size: 12px;
  color: var(--c-bg-ivory);
  margin: 0;
}

/* hover */
@media (hover: hover){
  .b-ft__contactBtn--outline:hover{ background-color: var(--c-brown-light); }
  .b-ft__contactBtn--primary:hover{ background-color: var(--c-brown-deep); }
  .b-ft__navList a:hover{ color: var(--c-brown); text-decoration: underline; }
  .b-ft__snsList a:hover{ background-color: var(--c-brown); }
  .b-ft__policy a:hover{ text-decoration: underline; }
}

/* PC */
@media screen and (min-width: 768px){
  .b-ft__logoEn{
    font-size: var(--fz-25);
  }
}

/* SP */
@media screen and (max-width: 767px){
  .b-ft__main{
    padding-block: 40px 24px;
  }
  .b-ft__top{
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
  }
  .b-ft__logo{ text-align: center; width: 257px; margin: 0 auto 30px;}
  .b-ft__logoEn{ font-size: 28px; font-family: var(--ff-en); letter-spacing: 0.05em; }
  /* SPでは問い合わせ2CTAを非表示（フッタの参考スクショに無いため） */
  .b-ft__contact{
    display: none;
  }

  /* === アコーディオン === */
  .b-ft__navGrid{
    grid-template-columns: 1fr;
    gap: 0;
    padding-bottom: 0;
    margin-bottom: 24px;
    border-bottom: none;
  }
  .b-ft__navCol{
    border-bottom: 1px solid var(--c-brown-150);
  }
  .b-ft__navCol:first-child{
    border-top: 1px solid var(--c-brown-150);
  }
  .b-ft__navHead{
    font-size: 14px;
    margin: 0;
    padding: 18px 36px 18px 15px;
    cursor: pointer;
    user-select: none;
  }
  /* +/- アイコン */
  .b-ft__navHead::before,
  .b-ft__navHead::after{
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 12px;
    height: 1px;
    background-color: var(--c-gray-dark);
    transition: transform .3s ease;
  }
  .b-ft__navHead::after{
    transform: rotate(90deg);
  }
  /* 展開時：縦線を回転させて消し、— だけに */
  .b-ft__navHead[aria-expanded="true"]::after{
    transform: rotate(0deg);
    opacity: 0;
  }

  .b-ft__navBody{
    grid-template-rows: 0fr;
    transition: all 0.3s ease;
    background-color: var(--c-white);
  }
  .b-ft__navHead[aria-expanded="true"] + .b-ft__navBody{
    grid-template-rows: 1fr;
      padding-block: 10px;
  }
  .b-ft__navList{
    padding-left: 20px;
  }
  .b-ft__navList li{
    padding: 5px 15px;
    margin-bottom: 0;
  }
  .b-ft__navList li::before{
    top: 15px;
  }
  .b-ft__navList a{ font-size: 13px;  }
  /* SP */
  .b-ft__sns{
    justify-content: center;
  }
  .b-ft__snsHead{
    display: none;  /* SPでは OFFICIAL SNS テキストを隠してアイコンだけに */
  }
  .b-ft__bottomInner{
    flex-direction: column;
    gap: 8px;
  }
  .b-ft__policy{ gap: 16px; }
  .b-ft__policy a,
  .b-ft__copy{ font-size: 11px; }
}


/* ==================== 共通(b-body, b-heading) ==================== */
/* セクションタイトル統一コンポーネント
   PC：横並び（EN見出し左 + JAサブタイトル右）
   SP：縦積み中央寄せ（EN見出し上 + JAサブタイトル下） */
.b-heading{
  display: flex;
  gap: 16px;
}
.b-heading .g-heading__en{
  font-family: var(--ff-en);
  color: var(--c-gray-dark);
  font-weight: 500;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}
.b-heading .g-heading__ja{
  color: var(--c-gray-dark);
  font-weight: 400;
  margin: 0;
}
.b-heading--noMargin{
  margin-bottom: 0 !important;
}

/* タブ＋見出しを並列にする時のラッパー（PC横並び/SP縦積み中央） */
.b-sectionHead{
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.b-sectionHead .b-heading{
  margin-bottom: 0;
}

/* PC */
@media screen and (min-width: 768px){
  .b-heading{
    align-items: baseline;
    margin-bottom: var(--spc-40);
  }
  .b-heading .g-heading__en{
    font-size: var(--fz-28);
  }
  .b-heading .g-heading__ja{
    font-size: var(--fz-13);
  }
}
/* SP */
@media screen and (max-width: 767px){
  .b-heading{
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    text-align: center;
  }
  .b-heading .g-heading__en{
    font-size: 22px;
  }
  .b-heading .g-heading__ja{
    font-size: 12px;
  }
  .b-sectionHead{
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
}



/* ==================== 2. カテゴリアイコン(b-catList) ==================== */
.b-catList{
  border-top: 4px solid #F2F2F2;
}
.b-catList__grid{
  --grid-cols-pc: 7;
  --grid-gap-pc: 20px 0;
  --grid-cols-sp: 4;
  --grid-gap-sp: 18px 0;

}
.b-catList__item a{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--c-text-base);
  text-align: center;
  font-family: var(--ff-base);
}
.b-catList__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-gray-150);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.b-catList__icon img{
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
}
.b-catList__item--ranking .b-catList__icon{
  background-color: var(--c-yellow-100);
}
.b-catList__name{
  font-weight: 500;
  line-height: 1.4;
}

/* hover */
@media (hover: hover){
  .b-catList__item a:hover .b-catList__name{
    color: var(--c-brown);
  }
}

/* PC */
@media screen and (min-width: 768px){
  .b-catList{
    margin-top: 20px;
  }
  .b-catList__icon{
    width: 65px;
    height: 65px;
  }
  .b-catList__name{
    font-size: var(--fz-12);
  }
}
/* SP */
@media screen and (max-width: 767px){
  .b-catList{
    margin-top: 15px;
  }
  .b-catList__icon{
    width: 50px;
    height: 50px;
  }
  .b-catList__name{
    font-size: 10px;
  }
}


/* ==================== 3. イベントスライダー(b-eventSlider) ==================== */
.splide__arrow{
  object-fit: cover;
  background: transparent;
  border: 1px solid var(--c-dark-op30);
  border-radius: 50%;
  opacity: 1;
  transition: background-color .3s ease, border-color .3s ease;
  top: 35%;
}
.splide__arrow svg{
  display: none;
}
.splide__arrow::before{
  content: "";
  display: inline-block;
  --this-mask: var(--data-icon-splide-arrow) no-repeat center center / 100%;
  mask: var(--this-mask);
  -webkit-mask: var(--this-mask);
  background-color: var(--txt-c-base);
  aspect-ratio: 1/1;
  width: 100%;
}
.splide__arrow--next::before{
  transform: scale(-1, 1);
}
.splide__arrow--prev{
  left: 0;
}
.splide__arrow--next{
  right: 0;
}
/* hover */
@media (hover: hover){
  .splide__arrow:hover{
    background-color: var(--c-white);
  }
}
@media screen and (min-width: 768px){
  .splide__arrow{
    width: 40px;
    height: 40px;
  }
  .splide__arrow--prev{
    transform: translateX(-50%);
  }
  .splide__arrow--next{
    transform: translateX(50%);
  }
}
@media screen and (max-width: 767px){
  .splide__arrow{
    width: 35px;
    height: 35px;
  }
  .splide__arrow--prev{
    left: -10px;
  }
  .splide__arrow--next{
    right: -10px;
  }
}
/* style.css の .splide{overflow:hidden} を打ち消して矢印を外側に出す */
.b-eventSlider__splide{
  position: relative;
  overflow: visible;
}
.b-eventSlider__splide .splide__track{
  overflow: hidden;
}
.b-eventSlider__slide a{
  display: block;
  text-decoration: none;
  color: var(--c-text-base);
}
.b-eventSlider__slide figure{
  margin: 0 0 16px;
  overflow: hidden;
  background-color: var(--c-gray-line);
}
.b-eventSlider__slide img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 280;
  object-fit: cover;
}
.b-eventSlider__title{
  font-weight: 700;
  margin-bottom: 8px;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}
.b-eventSlider__desc{
  color: var(--c-text-base);
  line-height: 1.7;
}


/* PC */
@media screen and (min-width: 768px){
  .b-eventSlider__title{
    font-size: var(--fz-18);
  }
  .b-eventSlider__desc{
    font-size: var(--fz-13);
  }

}
/* SP */
@media screen and (max-width: 767px){
  .b-eventSlider__title{
    font-size: 16px;
  }
  .b-eventSlider__desc{
    font-size: 12px;
  }
}


/* ==================== 4. 特集(b-featured) PC:grid / SP:Splideスライダー ==================== */
.b-featured__splide{
  position: relative;
}
.b-featured__splide .splide__track{
  overflow: hidden;
}
.b-featured__item a{
  display: block;
  position: relative;
  background-color: var(--c-gray-line);
  overflow: hidden;
  text-decoration: none;
  color: var(--c-text-base);
}
.b-featured__item img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 367 / 245;
  object-fit: cover;
}

/* PC：grid 表示（Splide destroy 後） */
@media screen and (min-width: 768px){
  .b-featured__splide{
    overflow: visible;
  }
  .b-featured__list{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .b-featured__item.splide__slide{
    width: auto !important;
    margin: 0 !important;
  }
}

/* SP：Splide スライダー時の矢印・ドット */
@media screen and (max-width: 767px){
  .b-featured__splide .splide__arrow{
    top: 45%;
  }
  .b-featured__splide .splide__arrow--prev{
    left: 10px;
  }
  .b-featured__splide .splide__arrow--next{
    right: 10px;
  }
}


/* ==================== 5. コラム(b-columnList) ==================== */
.b-columnList__grid{
  --grid-cols-pc: 2;
  --grid-gap-pc: var(--spc-30);
  --grid-cols-sp: 1;
  --grid-gap-sp: 15px;

}
.b-columnList__item a{
  display: flex;
  text-decoration: none;
  color: var(--c-text-base);
  background-color: var(--c-white);
  align-items: center;
}
.b-columnList__item figure{
  margin: 0;
  flex: 0 0 clamp( 110px, 15vw, 200px);
  background-color: var(--c-gray-line);
}
.b-columnList__item img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.b-columnList__body{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.b-columnList__date{
  font-family: var(--ff-en);
  font-size: var(--fz-13);
  color: var(--c-gray-300);
  letter-spacing: 0.1em;
}
.b-columnList__title{
  font-size: var(--fz-18);
  font-weight: 500;
  line-height: 1.6;
}
.b-columnList__title,
.b-columnList__excerpt{
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

/* hover */
@media (hover: hover){
  .b-columnList__item a:hover .b-columnList__title{
    color: var(--c-brown);
  }
}

/* PC */
@media screen and (min-width: 768px){
  .b-columnList__item a{
    gap: var(--spc-30);
  }
  .b-columnList__body{
    padding-right: var(--spc-30);
  }
  .b-columnList__title{
    font-size: var(--fz-18);
  }
  .b-columnList__excerpt{
    font-size: var(--fz-13);
  }
}

/* SP */
@media screen and (max-width: 767px){
  .b-columnList__item:nth-of-type(n+5){
    display: none;
  }
  .b-columnList__item a{
    gap: 20px;
  }
  .b-columnList__body{
    padding-right: 20px;
  }
  .b-columnList__title{
    font-size: 15px;
  }
  .b-columnList__date{
    font-size: 12px;
  }
}


/* ==================== 6. カテゴリピックアップ(b-proposalSupport) PC:grid / SP:Splideスライダー ==================== */
.b-proposalSupport__splide{
  position: relative;
}
.b-proposalSupport__splide .splide__track{
  overflow: hidden;
}
.b-proposalSupport__item a{
  display: block;
  text-decoration: none;
  color: var(--c-text-base);
}
.b-proposalSupport__img{
  margin: 0 0 12px;
  overflow: hidden;
  background-color: var(--c-gray-line);
}
.b-proposalSupport__img img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 367 / 245;
  object-fit: cover;
  transition: transform .6s ease;
}
.b-proposalSupport__title{
  font-size: var(--fz-13);
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-text-base);
  margin: 0;
}

/* hover */
@media (hover: hover){
  .b-proposalSupport__item a:hover .b-proposalSupport__img img{
    transform: scale(1.05);
  }
  .b-proposalSupport__item a:hover .b-proposalSupport__title{
    color: var(--c-brown);
  }
}

/* PC：grid 表示（Splide destroy 後） */
@media screen and (min-width: 768px){
  .b-proposalSupport__splide{
    overflow: visible;
  }
  .b-proposalSupport__list{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .b-proposalSupport__item.splide__slide{
    width: auto !important;
    margin: 0 !important;
  }
  .b-proposalSupport__title{
    font-size: var(--fz-18);
  }
}

/* SP：Splideスライダー時の矢印 */
@media screen and (max-width: 767px){
  .b-proposalSupport__title{
    font-size: 15px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
  }
  .b-proposalSupport__splide .splide__arrow{
    top: 30%;
  }
  .b-proposalSupport__splide .splide__arrow--prev{
    left: 10px;
  }
  .b-proposalSupport__splide .splide__arrow--next{
    right: 10px;
  }
}


/* ==================== 7. リングカテゴリ(b-ringCat) ==================== */
.b-ringCat{
  border-top: 1px solid var(--c-gray-line);
}
.b-ringCat__list{
  --grid-cols-pc: 4;
  --grid-gap-pc: var(--spc-30);
  --grid-cols-sp: 2;
  --grid-gap-sp: 10px;
}
.b-ringCat__item a{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: var(--bg-c-gray);
  color: var(--c-text-base);
  text-decoration: none;
  padding-bottom: 22%;
  text-align: center;
  transition: background-color .3s ease;
  position: relative;
}
.b-ringCat__icon{
  position: absolute;
  top: 15%;
  width: 49%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.b-ringCat__icon img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.b-ringCat__name{
  font-weight: 500;
  letter-spacing: 0.1em;
}
.b-ringCat__sub{
  font-family: var(--ff-en);
  letter-spacing: 0.1em;
  color: var(--c-gray-300);
  text-transform: uppercase;
}

/* hover */
@media (hover: hover){
  .b-ringCat__item a:hover{
   opacity: 0.7;
  }
}

/* PC */
@media screen and (min-width: 1201px){
  .b-ringCat__name{
    font-size: var(--fz-22);
  }
  .b-ringCat__sub{
    font-size: var(--fz-14);
    margin-top: 6px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px){
  .b-ringCat__name{
    font-size: var(--fz-18);
  }
  .b-ringCat__sub{
    font-size: var(--fz-12);
    margin-top: 3px;
  }
}
/* SP */
@media screen and (max-width: 767px){
  .b-ringCat__name{
    font-size: 13px;
  }
  .b-ringCat__sub{
    font-size: 9px;
  }
}


/* ==================== 8. 商品スライダー(b-pickup) ==================== */
.b-pickup__wrap{
  position: relative;
  overflow: hidden;
}
/* style.css の .splide{overflow:hidden} を打ち消して矢印を外側に出す */
.b-pickup__splide{
  position: relative;
  overflow: visible;
}
.b-pickup__splide .splide__track{
  overflow: visible;
}

/* 機能的スクロールバー */
.b-pickup__scrollbar{
  position: relative;
  height: 1px;
  margin-top: 30px;
  background-color: var(--c-white);
  cursor: pointer;
  user-select: none;
  touch-action: none;
}
.b-pickup__scrollbarThumb{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 60px;
  background-color: var(--c-brown);
  cursor: grab;
  /* JS の requestAnimationFrame で実位置追従させるので transition は無し */
  will-change: transform, width;
}
.b-pickup__scrollbarThumb.is-dragging{
  cursor: grabbing;
}
.b-pickup__scrollbar:focus-visible{
  outline: 2px solid var(--c-brown);
  outline-offset: 4px;
}
.b-pickup__slide a{
  display: block;
  text-decoration: none;
  color: var(--c-text-base);
}
.b-pickup__img{
  margin: 0 0 12px;
  background-color: var(--c-gray-line);
  position: relative;
}
.b-pickup__img img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.b-pickup__name{
  font-size: var(--fz-13);
  line-height: 1.6;
  color: var(--c-text-base);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 500;
}

/* PC */
@media screen and (min-width: 768px){
  .b-pickup__brand,
  .b-pickup__name{
    font-size: var(--fz-15);
  }
}
/* SP */
@media screen and (max-width: 767px){
  .b-pickup__brand,
  .b-pickup__name{
    font-size: 13px;
  }
}


/* ==================== 9. KINSYODO Bridal コンセプト(b-concept) ==================== */
.b-concept{
  position: relative;
  background-color: var(--c-white);
  overflow: hidden;
}
/* 背景大文字：横方向に流れ続けるマーキー */
.b-concept__bg{
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.b-concept__bgTrack{
  display: inline-flex;
  white-space: nowrap;
  animation: b-concept-marquee 35s linear infinite;
  will-change: transform;
}
.b-concept__bgText{
  font-family: var(--ff-en);
  font-weight: 400;
  color: var(--c-brown-100);
  font-size: clamp(80px, 11vw, 160px);
  letter-spacing: 0.05em;
  padding-right: 40px;
  line-height: 1;
}
@keyframes b-concept-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* リダクトモーション尊重 */
@media (prefers-reduced-motion: reduce){
  .b-concept__bgTrack{
    animation: none !important;
  }
}
.b-concept__inner{
  position: relative;
  z-index: 1;
}
.b-concept__title{
  text-align: center;
  font-weight: 500;
  color: var(--c-text-base);
  line-height: 1.6;
  margin-bottom: 24px;
}
.b-concept__lead{
  text-align: center;
  color: var(--c-text-base);
  line-height: 2;
  margin-bottom: 60px;
}
.b-concept__group{
  margin-bottom: 50px;
}
.b-concept__group:last-child{
  margin-bottom: 0;
}
.b-concept__groupLabel{
  font-family: var(--ff-en);
  letter-spacing: 0.15em;
  margin-bottom: 20px;
  font-weight: 500;
}
.b-concept__bnrList{
  --grid-cols-pc: 2;
  --grid-gap-pc: 40px;
  --grid-cols-sp: 1;
  --grid-gap-sp: 30px;

}
.b-concept__bnr a{
  display: block;
  text-decoration: none;
  color: var(--c-white);
  position: relative;
  overflow: hidden;
  background-color: var(--c-gray-line);
  aspect-ratio: 550 / 364;
}
.b-concept__bnrImg{
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 550 / 364;
  object-fit: cover;
  transition: transform .6s ease;
}
.b-concept__bnr a::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.b-concept__bnrTxt{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 30px;
  z-index: 1;
}
.b-concept__bnrTitle{
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 12px;
  color: var(--c-white);
}
.b-concept__bnrTitle small{
  display: block;
  width: fit-content;
  font-weight: 400;
  border-bottom: 1px solid var(--c-white);
}
.b-concept__bnrDesc{
  color: var(--c-white);
  line-height: 1.7;
  opacity: 0.9;
}

/* hover */
@media (hover: hover){
  .b-concept__bnr a:hover .b-concept__bnrImg{
    transform: scale(1.05);
  }
}

/* PC */
@media screen and (min-width: 768px){
  .b-concept__title{
    font-size: var(--fz-30);
  }
  .b-concept__lead{
    font-size: var(--fz-15);
  }
  .b-concept__bnrTitle{
    font-size: var(--fz-28);
  }
  .b-concept__bnrTitle small{
    padding-bottom: 5px;
    font-size: var(--fz-15);
    margin-bottom: 5px;
  }
  .b-concept__bnrDesc{
    font-size: var(--fz-13);
  }
  .b-concept__group{
    margin-bottom: var(--spc-45);
  }
  .b-concept__groupLabel{
    font-size: var(--fz-20);
  }
}
/* SP */
@media screen and (max-width: 767px){
  .b-concept__bg{
    top: 0px;
  }
  .b-concept__bgText{
    font-size: clamp(50px, 16vw, 80px);
    padding-right: 24px;
  }
  .b-concept__bgTrack{
    animation-duration: 25s;
  }
  .b-concept__title{
    font-size: 22px;
  }
  .b-concept__lead{
    font-size: 13px;
    text-align: left;
    margin-bottom: 40px;
  }
  .b-concept__group{
    margin-bottom: 36px;
  }
  .b-concept__bnrTitle{
    font-size: 16px;
  }
  .b-concept__bnrTitle small{
    font-size: 12px;
    padding-bottom: 4px;
    margin-bottom: 3px;
  }
  .b-concept__bnrDesc{
    font-size: 12px;
  }
  .b-concept__bnrTxt{
    padding: 16px 20px;
  }
  .b-concept__groupLabel{
    font-size: 15px;
    margin-bottom: 15px;
  }
}


/* ==================== 10. ランキング(b-ranking) ==================== */
.b-ranking{
  border-bottom: 1px solid var(--c-gray-line);
}
.b-ranking__head{
  display: flex;
  align-items: baseline;
  gap: 30px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.b-ranking__nav{
  display: flex;
  gap: 12px;

}
.b-ranking__nav .tab-btn{
  background: transparent;
  border: none;
  color: var(--c-gray-300);
  padding: 6px 14px;
  cursor: pointer;
  font-family: var(--ff-base);
  font-size: var(--fz-14);
  letter-spacing: 0.05em;
  transition: color .3s ease;
  position: relative;
}
.b-ranking__nav .tab-btn.show{
  color: var(--c-gray-dark);
  font-weight: 500;
}
.b-ranking__nav .tab-btn.show::after{
  content: "";
  position: absolute;
  left: 14px;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2px;
  height: 1px;
  background-color: var(--c-gray-dark);
  width: 100%;
}

/* hover */
@media (hover: hover){
  .b-ranking__nav .tab-btn:hover{
    color: var(--c-brown);
  }
}
.b-ranking__grid{
  display: grid;
  gap: var(--spc-20);
}
.b-ranking__item{
  position: relative;
}
.b-ranking__item a{
  display: block;
  background-color: var(--c-gray-line);
  overflow: hidden;
  text-decoration: none;
}
.b-ranking__item img{
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.b-ranking__grid{
  counter-reset: original-counter;
}
.b-ranking__item::before{
  display: inline-block;
  content: ''counter(original-counter);
  counter-increment: original-counter;
  width: 32px;
  aspect-ratio: 32/27;
  object-fit: cover;
  background-color: var(--ranking-c-other);
  clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
  padding-top: 4px;
  text-align: center;
  font-size: 13px;
  color: var(--c-white);
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 2;
}
.b-ranking__item:nth-of-type(1)::before{
  background-color: var(--ranking-c-1st);
}
.b-ranking__item:nth-of-type(2)::before{
  background-color: var(--ranking-c-2nd);
}
.b-ranking__item:nth-of-type(3)::before{
  background-color: var(--ranking-c-3rd);
}

/* PC */
@media screen and (min-width: 768px){
  /* featured 左大 + 2位～7位を3カラム×2行 */
  .b-ranking__grid{
    grid-template-columns: 2.1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "f a b c"
      "f d e g";
  }
  .b-ranking__item--featured{
    grid-area: f;
  }
  .b-ranking__item:nth-child(2){ grid-area: a; }
  .b-ranking__item:nth-child(3){ grid-area: b; }
  .b-ranking__item:nth-child(4){ grid-area: c; }
  .b-ranking__item:nth-child(5){ grid-area: d; }
  .b-ranking__item:nth-child(6){ grid-area: e; }
  .b-ranking__item:nth-child(7){ grid-area: g; }
}
/* SP：PCレイアウトのまま横スクロール（指でスワイプ） */
@media screen and (max-width: 767px){
  .b-ranking__head{
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .b-ranking__head .g-headingContainer{
    margin-bottom: 0;
  }
  .b-ranking__nav{
    justify-content: center;
  }
  .b-ranking__nav .tab-btn{
    padding: 6px 12px;
    font-size: 12px;
  }
  /* スクロールラッパー：画面端まで広げて横スクロール領域確保 */
  .b-ranking__scrollWrap{
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: calc(50% - 50vw);
    padding: 4px 20px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .b-ranking__scrollWrap::-webkit-scrollbar{
    display: none;
  }
  /* PCと同じ 4列 grid のまま min-width で横スクロール発生させる */
  .b-ranking__grid{
    grid-template-columns: 2fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "f a b c"
      "f d e g";
    gap: 12px;
    min-width: 590px;
    scroll-snap-align: start;
  }
  .b-ranking__item--featured{ grid-area: f; grid-column: auto; }
  .b-ranking__item:nth-child(2){ grid-area: a; }
  .b-ranking__item:nth-child(3){ grid-area: b; }
  .b-ranking__item:nth-child(4){ grid-area: c; }
  .b-ranking__item:nth-child(5){ grid-area: d; }
  .b-ranking__item:nth-child(6){ grid-area: e; }
  .b-ranking__item:nth-child(7){ grid-area: g; }
}


/* ==================== 11. ブランドバナースライダー(b-brandSlider) ==================== */
.b-brandSlider{
  overflow: hidden;
}
.b-brandSlider__inner{
  margin-inline: auto;
  position: relative;
}
.b-brandSlider__splide{
  position: relative;
}
.b-brandSlider__slide a{
  display: block;
  background-color: var(--c-gray-line);
  overflow: hidden;
  text-decoration: none;
  color: var(--c-text-base);
}
.b-brandSlider__slide img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 580 / 325;
  object-fit: cover;
  transition: transform .6s ease, opacity .3s ease;
}

/* PC */
@media screen and (min-width: 768px){
  .b-brandSlider{
    overflow: hidden;
  }
  .b-brandSlider__splide{
    max-width: 580px;
    margin-inline: auto;
    overflow: visible;
  }
  .b-brandSlider__splide .splide__track,
  .b-brandSlider__splide .splide__list{
    overflow: visible;
  }
  .b-brandSlider__splide .splide__arrow{
    top: 40%;
  }
}
/* SP */
@media screen and (max-width: 767px){
  .b-brandSlider .splide__arrow{
    display: none;
  }
}


/* ==================== 12. ブランド一覧(b-brandGrid) ==================== */
.b-brandGrid__list{
  --grid-cols-pc: 4;
  --grid-gap-pc: 30px 20px;
  --grid-cols-sp: 2;
  --grid-gap-sp: 24px 14px;

}
.b-brandGrid__card{
  display: flex;
  flex-direction: column;
  background-color: var(--c-white);
  text-decoration: none;
  color: var(--c-text-base);
  height: 100%;
  transition: opacity .3s ease;
}
.b-brandGrid__img{
  margin: 0;
  width: 100%;
  background-color: var(--c-gray-line);
  overflow: hidden;
}
.b-brandGrid__img img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 700 / 685;
  object-fit: cover;
  transition: transform .6s ease;
}
.b-brandGrid__name{
  font-family: var(--ff-base);
  font-weight: 500;
  text-align: center;
  color: var(--c-text-base);
  letter-spacing: 0.05em;
}
.b-brandGrid__desc{
  color: var(--c-text-base);
  line-height: 1.8;
  letter-spacing: 0.04em;
}

/* hover */
@media (hover: hover){
  .b-brandGrid__card:hover .b-brandGrid__img img{
    transform: scale(1.05);
  }
  .b-brandGrid__card:hover .b-brandGrid__name{
    color: var(--c-brown);
  }
}

/* PC */
@media screen and (min-width: 768px){
  .b-brandGrid__name{
    font-size: var(--fz-15);
    margin: 15px 20px 12px;
  }
  .b-brandGrid__desc{
    font-size: var(--fz-13);
    padding: 0 20px 20px;
  }
}
/* SP */
@media screen and (max-width: 767px){
  .b-brandGrid__card{
    padding-bottom: 14px;
  }
  .b-brandGrid__name{
    font-size: 14px;
    margin: 12px 14px 8px;
  }
  .b-brandGrid__desc{
    font-size: 12px;
    padding: 0 14px;
    line-height: 1.7;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -webkit-box;
  }
}


/* ==================== 13. カスタムリング(b-customRing) ==================== */
.b-customRing__item{
  margin-bottom: 30px;
}
.b-customRing__item:last-child{
  margin-bottom: 0;
  padding-bottom: 25px;
}
.b-customRing__item a{
  gap: 40px;
  text-decoration: none;
  color: var(--c-text-base);
  align-items: flex-start;
}
.b-customRing__img{
  flex: 0 0 400px;
  margin: 0;
  background-color: var(--c-gray-line);
  overflow: hidden;
}
.b-customRing__img img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 280;
  object-fit: cover;
  transition: transform .6s ease;
}
.b-customRing__body{
  flex: 1;
}
.b-customRing__en{
  font-family: var(--ff-en);
  font-size: 11px;
  letter-spacing: 0.15em;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.b-customRing__title{
  font-size: var(--fz-15);
  font-weight: 700;
  margin-bottom: 16px;
  text-align: center;
}
.b-customRing__desc{
  font-size: var(--fz-13);
  line-height: 1.8;
  color: var(--c-text-base);
}

/* hover */
@media (hover: hover){
  .b-customRing__item a:hover .b-customRing__img img{
    transform: scale(1.05);
  }
  .b-customRing__item a:hover .b-customRing__title{
    color: var(--c-brown);
  }
}

/* PC */
@media screen and (min-width: 768px){
  .b-customRing__list{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: var(--spc-50);
  }
  .b-customRing__title{
    text-align: center;
    margin-top: 20px;
  }
}

/* SP */
@media screen and (max-width: 767px){
  .b-customRing__item a{
    flex-direction: column;
    gap: 16px;
  }
  .b-customRing__img{
    flex: 0 0 auto;
    width: 100%;
  }
  .b-customRing__title{
    font-size: 16px;
    margin-block: 10px;
  }
  .b-customRing__desc{
    font-size: 13px;
  }
}


/* ==================== 14. About us(b-about) ==================== */
.b-about__heading{
  text-align: center;
}
.b-about__heading .g-heading__sub{
  color: var(--c-gray-300);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  display: block;
}
.b-about__heading .g-heading__en{
  display: block;
  font-family: var(--ff-en);
  letter-spacing: 0.15em;
  color: var(--c-text-base);
  font-weight: 500;
}
.b-about__heading .g-heading__ja{
  display: block;
  color: var(--c-text-base);
  font-weight: 400;
}
.b-about__body{
  display: flex;
  align-items: center;
}
.b-about__leadTitle{
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-text-base);
  margin-bottom: 30px;
}
.b-about__leadTxt{
  overflow-y: scroll;
  max-height: 300px;
  background-color: var(--c-white);
  padding: 20px;
}
.b-about__text p{
  line-height: 2;
  color: var(--c-text-base);
}
.b-about__text p + p{
  margin-top: 1em;
}
.b-about__btnContainer{
  margin-top: 30px;
}
.b-about__img{
  margin: 0;
  background-color: var(--c-gray-line);
  overflow: hidden;
}
.b-about__img img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 520 / 364;
  object-fit: cover;
}

/* PC */
@media screen and (min-width: 768px){
  .b-about__heading{
    margin-bottom: var(--spc-50);
  }
  .b-about__heading .g-heading__sub{
    font-size: var(--fz-13);
    margin-bottom: var(--spc-25);
  }
  .b-about__heading .g-heading__en{
    font-size: var(--fz-35);
    margin-bottom: var(--spc-25);
  }
  .b-about__heading .g-heading__ja{
    font-size: var(--fz-15);
  }
  .b-about__body{
    flex-direction: row;
    gap: 40px;
  }
  .b-about__text{
    flex: 1;
  }
  .b-about__leadTitle{
    font-size: var(--fz-28);
  }
  .b-about__text p{
    font-size: var(--fz-15);
  }
  .b-about__img{
    flex: 0 0 520px;
    max-width: 520px;
  }
}
/* SP */
@media screen and (max-width: 767px){
  .b-about__heading{
    margin-bottom: 30px;
  }
  .b-about__heading .g-heading__sub{
    font-size: 12px;
    margin-bottom: 14px;
  }
  .b-about__heading .g-heading__en{
    font-size: 26px;
    margin-bottom: 10px;
  }
  .b-about__heading .g-heading__ja{
    font-size: 14px;
  }
  .b-about__body{
    flex-direction: column-reverse;
    gap: 24px;
  }
  .b-about__leadTitle{
    font-size: 20px;
    margin-bottom: 18px;
    text-align: center;
  }
  .b-about__text p{
    font-size: 14px;
    line-height: 1.9;
  }
  .b-about__btnContainer .g-btn{
    margin-inline: auto;
  }
}


/* ==================== 15. SHORT VIDEO(b-videoTiles) ==================== */
.b-videoTiles__head{
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.b-videoTiles__nav{
  display: flex;
  gap: 6px;

}
.b-videoTiles__nav .tab-btn{
  background: transparent;
  border: none;
  color: var(--c-gray-300);
  padding: 6px 14px;
  cursor: pointer;
  font-family: var(--ff-base);
  font-size: var(--fz-13);
  letter-spacing: 0.05em;
  transition: color .3s ease;
  position: relative;
}
.b-videoTiles__nav .tab-btn.show{
  color: var(--c-gray-dark);
  font-weight: 700;
}
.b-videoTiles__nav .tab-btn.show::after{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -2px;
  height: 1px;
  background-color: var(--c-gray-dark);
}
/* hover */
@media (hover: hover){
  .b-videoTiles__nav .tab-btn:hover{
    color: var(--c-brown);
  }
}
.b-videoTiles__list{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;

}
.b-videoTiles__item a{
  display: block;
  background-color: var(--c-gray-line);
  overflow: hidden;
}
.b-videoTiles__item img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 270 / 480;
  object-fit: cover;
  transition: transform .6s ease;
}

/* hover */
@media (hover: hover){
  .b-videoTiles__item a:hover img{
    transform: scale(1.05);
  }
}

/* SP */
@media screen and (max-width: 767px){
  .b-videoTiles__head{
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .b-videoTiles__list{
    grid-template-columns: repeat(4, 40vw);
    grid-auto-flow: column;
    overflow-x: auto;
    padding-bottom: 10px;
    gap: 12px;
    padding-left: var(--sp-scroll-padding-left);
  }
  .b-videoTiles__item{
    scroll-snap-align: start;
  }
}


/* ==================== 16. Couple's Story(b-coupleStory) ==================== */
.b-coupleStory__inner{
  display: flex;
  gap: 60px;
  align-items: stretch;
  margin-bottom: 30px;

}
.b-coupleStory__img{
  margin: 0;
  flex: 0 0 420px;
  background-color: var(--c-gray-line);
  overflow: hidden;
}
.b-coupleStory__img img{
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 420 / 480;
  object-fit: cover;
}
.b-coupleStory__body{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.b-coupleStory__heading{
  text-align: center;
  margin-bottom: 30px;
}
.b-coupleStory__heading .g-heading__sub{
  display: block;
  text-transform: uppercase;
  color: var(--c-gray-300);
  font-size: var(--fz-11);
  letter-spacing: 0.2em;
  margin-bottom: 14px;
}
.b-coupleStory__heading .g-heading__en{
  display: block;
  font-family: var(--ff-en);
  font-size: var(--fz-28);
  font-weight: 500;
  color: var(--c-text-base);
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.b-coupleStory__heading .g-heading__ja{
  display: block;
  font-size: var(--fz-13);
  color: var(--c-text-base);
}
.b-coupleStory__review{
  text-align: center;
  background-color: var(--c-white);
  padding: 30px;
}
.b-coupleStory__stars{
  display: flex;
  justify-content: center;
  gap: 4px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  color: #F4B400;
  font-size: 20px;
}
.b-coupleStory__txt{
  font-size: var(--fz-13);
  line-height: 1.9;
  color: var(--c-text-base);
  text-align: left;
}
.b-coupleStory__shopBtns{
  --grid-cols-pc: 3;
  --grid-gap-pc: 20px;
  --grid-cols-sp: 2;
  --grid-gap-sp: 12px;

}
.b-coupleStory__shopBtns .g-btn{
  max-width: none;
}
.b-coupleStory__shopBtns .g-btn > a{
  min-height: 60px;
}
/* PC */
@media screen and (min-width: 768px){
  .b-coupleStory__inner{
    padding-inline: var(--spc-70);
    padding-bottom: var(--spc-70);
    border-bottom: 1px solid var(--c-gray-line);
    margin-bottom: var(--spc-70);
  }
  .b-coupleStory__shopBtns{
    padding-inline: var(--spc-70);
  }
}
/* SP */
@media screen and (max-width: 767px){
  .b-coupleStory__inner{
    flex-direction: column;
    gap: 0px;
  }
  .b-coupleStory__body{
    display: contents;
  }
  .b-coupleStory__img{
    flex: 0 0 auto;
    order: 2;
    margin-bottom: 20px;
  }
  .b-coupleStory__heading{
    order: 1;
  }
  .b-coupleStory__heading .g-heading__en{
    font-size: 22px;
  }
  .b-coupleStory__review{
    padding: 20px;
    order: 3;
  }
}


/* ==================== 18. Recruit(b-recruit) ==================== */
.b-recruit__body{
  display: flex;
  align-items: center;
  gap: 60px;
}
.b-recruit__text{
  flex: 1;
}
.b-recruit__title{
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-text-base);
  margin-bottom: 24px;
}
.b-recruit__desc{
  line-height: 1.9;
  color: var(--c-text-base);
}
.b-recruit__mosaic{
  flex: 0 0 530px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  height: 540px;
  overflow: hidden;
  position: relative;
  /* mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%); */
}
.b-recruit__column{
  position: relative;
  overflow: hidden;
  height: 100%;
}
.b-recruit__track{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 下方向に流れる（左列）：上から下へ */
.b-recruit__column--down .b-recruit__track{
  animation: b-recruit-down 28s linear infinite;
}
/* 上方向に流れる（右列）：下から上へ */
.b-recruit__column--up .b-recruit__track{
  animation: b-recruit-up 28s linear infinite;
}
.b-recruit__mosaic img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: var(--c-gray-line);
}

@keyframes b-recruit-down{
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}
@keyframes b-recruit-up{
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* リダクトモーション尊重 */
@media (prefers-reduced-motion: reduce){
  .b-recruit__track{
    animation: none !important;
  }
}

/* PC */
@media screen and (min-width: 768px){
  .b-recruit__title{
    font-size: var(--fz-28);
  }
  .b-recruit__desc{
    font-size: var(--fz-15);
  }
}
/* SP */
@media screen and (max-width: 767px){
  .b-recruit{
    padding-block: var(--sec-spc);
  }
  .b-recruit__body{
    flex-direction: column;
    gap: 30px;
  }
  .b-recruit__title{
    font-size: 20px;
    text-align: center;
  }
  .b-recruit__desc{
    font-size: 14px;
    padding-inline: 20px;
  }
  .b-recruit__mosaic{
    flex: 0 0 auto;
    width: 100%;
    height: 300px;
  }
}
/* ==================== 17. SHOP LIST(t-shopList 流用) ==================== */
.t-shopList__item{
  row-gap: 0;
}
.t-shopList__btns{
  display: none;
}
.t-shopList__item[data-bridal="false"]{
  display: none;
}

/* ==================== 99. 固定要素(b-stickyBook, b-stickyGroup) ==================== */
.b-stickyBook,
.b-stickyGroup{
  position: fixed;
  z-index: 100;
}

/* 来店予約クーポンバナー本体（画像を直接差替え可能） */
.b-stickyBnr{
  position: relative;
  width: 180px;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transition: opacity .4s ease, transform .4s ease;
  background-color: var(--c-gray-line);
}
.b-stickyBnr.is-hidden{
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}
.b-stickyBnr__close{
  border: none;
  -webkit-appearance: none;
  background-color: unset;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  width: 20px;
  aspect-ratio: 1/1;
  object-fit: cover;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background-color .3s ease;
}
.b-stickyBnr__link{
  display: block;
  text-decoration: none;
  color: inherit;
}

/* 店舗情報ボタン */
.b-stickyShop{
  width: 180px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  background-color: var(--c-brown-deep);
  color: var(--c-white);
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transition: background-color .3s ease;
}

/* PC */
@media screen and (min-width: 768px){
  .b-stickyBook{
    right: 0;
    top: 30%;
    width: 46px;
    background-color: var(--c-brown-light);
    color: var(--c-white);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
    border-radius: 6px 0 0 6px;
    transition: background-color .3s ease;
  }
  .b-stickyBook__icon{
    display: block;
    width: 16px;
    height: 16px;
    background-color: var(--c-white);
    --this-mask: var(--data-icon-book) no-repeat center center / 100%;
    mask: var(--this-mask);
    -webkit-mask: var(--this-mask);
    margin-bottom: 14px;
  }
  .b-stickyBook__label{
    writing-mode: vertical-rl;
    font-size: 15px;
    letter-spacing: 0.3em;
    font-weight: 500;
  }
  .b-stickyGroup{
    right: 30px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
}
/* SP */
@media screen and (max-width: 767px){
  .b-stickyBook,
  .b-stickyGroup{
    display: none;
  }
}

/* hover */
@media (hover: hover){
  .b-stickyBook:hover{
    background-color: var(--c-brown);
  }
  .b-stickyBnr__link:hover{
    opacity: 0.92;
  }
  .b-stickyShop:hover{
    background-color: var(--c-brown);
  }
}



/* お気に入り機能 */
.weddingRingListItem__img {
  position: relative;
}
.b-pickup__fav{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  aspect-ratio: 1/1;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  --fav-color: var(--c-brown-light);
}
.b-pickup__fav::before{
 content: "";
 display: inline-block;
 --this-mask: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjkuNiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDkuMDMgQnVpbGQgNTQ5ODYpICAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSLjg6zjgqTjg6Tjg7xfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IgoJIHk9IjBweCIgdmlld0JveD0iMCAwIDIwIDIwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMCAyMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNEQURBREE7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTAsMTguNmMtMC4xLDAtMC4yLDAtMC4zLTAuMUM5LjQsMTguMywwLjUsMTMuMiwwLjUsN2MwLTMuNCwyLTUsMy45LTUuNEM2LjYsMS4xLDguOCwyLjEsMTAsNAoJYzEuMi0xLjksMy40LTIuOSw1LjYtMi40YzEuOSwwLjQsMy45LDIsMy45LDUuNGMwLDYuMy04LjksMTEuMy05LjMsMTEuNUMxMC4yLDE4LjUsMTAuMSwxOC42LDEwLDE4LjZ6Ii8+Cjwvc3ZnPgo=) no-repeat center center / 100%;
 mask: var(--this-mask);
-webkit-mask: var(--this-mask);
background-color:var(--c-gray-250);
width: 100%;
aspect-ratio: 1/1;
transition: background-color .3s ease;
}
.b-pickup__fav.is-active::before,
.b-pickup__fav:hover::before{
  background-color: var(--fav-color);
}
.b-pickup__brand{
  font-family: var(--ff-en);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--c-gray-300);
  margin-bottom: 6px;
  font-weight: 500;
}
.b-pickup__fav.is-active:before {
  background-color: var(--fav-color);
}
.b-pickup__fav.is-loading {
  opacity: 0.7;
  pointer-events: none;
}
.b-pickup__fav__num {
  color: var(--c-white);
  position: absolute;
  font-size: 10px;
  letter-spacing: 0;
  line-height: 1;
  top: 51%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ksd-favorite-empty {
  padding: 40px 0;
  text-align: center;
}
.productFavoriteActions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}
.productFavoriteButton,
a.productFavoriteListLink {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 10px 20px;
  border: 1px solid var(--c-brown-light);
  background: #fff;
  color: var(--c-brown-light);
  font: inherit;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    opacity 0.2s,
    background-color 0.2s,
    color 0.2s;
}
.productFavoriteButton{
  background-color: var(--c-gray-250);
  border-color: var(--c-gray-250);
  color: var(--c-white);
}
.productFavoriteButton.is-active {
  background: var(--c-brown-light);
  border: 1px solid var(--c-brown-light);
  color: #fff;
}
.productFavoriteButton.is-loading {
  opacity: 0.7;
  pointer-events: none;
}
.productFavoriteButton:hover,
.productFavoriteListLink:hover {
  opacity: 0.75;
}
@media (max-width: 767px) {
  .productFavoriteActions {
    flex-direction: column;
  }
  .productFavoriteButton,
  .productFavoriteListLink {
    width: 85%;
    margin-inline: auto;
  }
}
.weddingRingListSort {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.weddingRingListSort__select select {
  max-width: 100%;
}
.weddingRingListSort.is-auto-submit .weddingRingListSort__submit {
  display: none;
}