@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** mahaRE; design system
************************************/
:root{
  --mahare-navy:#082742;
  --mahare-gold:#d4b977;
  --mahare-ivory:#f7f4ee;
  --mahare-text:#24313a;
  --mahare-radius:18px;
  --mahare-shadow:0 14px 40px rgba(8,39,66,.10);
}

.page-id-683 .entry-content{
  color:var(--mahare-text);
}

.page-id-683 .entry-content > *{
  margin-bottom:clamp(2rem,4vw,4.5rem);
}

.page-id-683 .wp-block-heading{
  letter-spacing:.06em;
  line-height:1.45;
}

.page-id-683 .wp-block-columns{
  gap:clamp(1.5rem,4vw,4rem);
  align-items:center;
}

.page-id-683 .wp-block-image img{
  display:block;
  transition:transform .55s ease, filter .55s ease, box-shadow .55s ease;
}

.page-id-683 .wp-block-image:not(.img-pc-only):not(.img-sp-only) img{
  border-radius:var(--mahare-radius);
}

@media (hover:hover){
  .page-id-683 .wp-block-image:not(.img-pc-only):not(.img-sp-only) img:hover{
    transform:scale(1.025);
  }
}

.page-id-683 .wp-block-button__link{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px !important;
  letter-spacing:.08em;
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
  box-shadow:0 8px 24px rgba(8,39,66,.10);
}

@media (hover:hover){
  .page-id-683 .wp-block-button__link:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(8,39,66,.16);
  }
}

/* HERO：横いっぱいに見せるフルブリード＋静かなズーム */
.page-id-683 .img-pc-only,
.page-id-683 .img-sp-only{
  width:100vw;
  max-width:none !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  overflow:hidden;
  border-radius:0 !important;
}

.page-id-683 .img-pc-only img,
.page-id-683 .img-sp-only img{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  border-radius:0 !important;
  animation:mahareHero 9s ease-out both;
  transform-origin:center center;
}

@keyframes mahareHero{
  from{transform:scale(1.035);}
  to{transform:scale(1);}
}

/* MENUの濃紺ブロック：一体感のあるラグジュアリーカード */
.page-id-683 .wp-block-columns.has-background[style*="background-color:#082742"]{
  position:relative;
  padding:0;
  border-radius:30px;
  box-shadow:0 18px 48px rgba(8,39,66,.16);
  overflow:hidden;
  border:1px solid rgba(212,185,119,.32);
  background:linear-gradient(145deg,#082742 0%,#0d314f 100%) !important;
}

.page-id-683 .wp-block-columns.has-background[style*="background-color:#082742"]::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}

.page-id-683 .wp-block-columns.has-background[style*="background-color:#082742"] > .wp-block-column{
  position:relative;
  z-index:1;
  min-width:0;
}

.page-id-683 .wp-block-columns.has-background[style*="background-color:#082742"] > .wp-block-column:first-child{
  align-self:stretch;
}

.page-id-683 .wp-block-columns.has-background[style*="background-color:#082742"] > .wp-block-column:first-child .wp-block-image,
.page-id-683 .wp-block-columns.has-background[style*="background-color:#082742"] > .wp-block-column:first-child .wp-block-image img{
  width:100%;
  height:100%;
  margin:0;
}

.page-id-683 .wp-block-columns.has-background[style*="background-color:#082742"] > .wp-block-column:first-child .wp-block-image img{
  border-radius:0 !important;
  object-fit:cover;
  min-height:100%;
}

.page-id-683 .wp-block-columns.has-background[style*="background-color:#082742"] > .wp-block-column:last-child{
  padding:clamp(1.6rem,3vw,3rem) clamp(1.4rem,3vw,2.6rem);
}

.page-id-683 .wp-block-columns.has-background[style*="background-color:#082742"] > .wp-block-column:last-child h2{
  background:transparent !important;
  color:#f2dfad !important;
  text-align:left !important;
  border:0 !important;
  padding:0 0 .6rem !important;
  margin:0 0 1rem !important;
  font-weight:500;
  letter-spacing:.12em;
}

.page-id-683 .wp-block-columns.has-background[style*="background-color:#082742"] > .wp-block-column:last-child p{
  background:transparent !important;
  line-height:1.95;
}

.page-id-683 .wp-block-columns.has-background[style*="background-color:#082742"] > .wp-block-column:last-child .wp-block-button__link{
  background:transparent !important;
  color:#f7f4ee !important;
  border:1px solid rgba(247,244,238,.52) !important;
  box-shadow:none;
}

/* サロン・出張など2カラムを少し上品に */
.page-id-683 .wp-block-columns > .wp-block-column{
  min-width:0;
}

/* 対応ブラウザではスクロールに合わせて静かに出現 */
@supports (animation-timeline: view()){
  .page-id-683 .entry-content > .wp-block-columns,
  .page-id-683 .entry-content > .wp-block-heading,
  .page-id-683 .entry-content > .wp-block-vk-blocks-slider{
    animation:mahareReveal linear both;
    animation-timeline:view();
    animation-range:entry 5% cover 25%;
  }
  @keyframes mahareReveal{
    from{opacity:.25;transform:translateY(24px);}
    to{opacity:1;transform:translateY(0);}
  }
}

/************************************
** responsive
************************************/
@media screen and (max-width: 1023px){
  .page-id-683 .entry-content > *{
    margin-bottom:2.75rem;
  }
}

@media screen and (max-width: 834px){
  .page-id-683 .wp-block-columns{
    gap:1.5rem;
  }

  .page-id-683 .wp-block-columns.has-background[style*="background-color:#082742"]{
    border-radius:22px;
  }

  .page-id-683 .wp-block-columns.has-background[style*="background-color:#082742"] > .wp-block-column:first-child{
    order:2;
  }

  .page-id-683 .wp-block-columns.has-background[style*="background-color:#082742"] > .wp-block-column:last-child{
    order:1;
    padding:1.5rem 1.35rem .9rem;
  }

  .page-id-683 .wp-block-columns.has-background[style*="background-color:#082742"] > .wp-block-column:first-child .wp-block-image img{
    border-radius:0 !important;
  }

  .page-id-683 .wp-block-heading{
    line-height:1.4;
  }
}

@media screen and (max-width: 480px){
  .page-id-683 .entry-content{
    font-size:16px;
  }

  /* スマホのH2/H3は、明示的な改行がない見出しを1行で見せる */
  .page-id-683 h2.wp-block-heading:not(:has(br)),
  .page-id-683 h3.wp-block-heading:not(:has(br)){
    white-space:nowrap;
    word-break:keep-all;
    overflow-wrap:normal;
    font-size:clamp(.92rem,4vw,1.15rem) !important;
    letter-spacing:.03em !important;
    line-height:1.3;
  }

  .page-id-683 .entry-content > *{
    margin-bottom:2.25rem;
  }

  .page-id-683 .wp-block-button,
  .page-id-683 .wp-block-button__link{
    width:100%;
  }

  .page-id-683 .wp-block-button__link{
    min-height:46px;
    padding:.72em 1.2em !important;
  }

  .page-id-683 .wp-block-image:not(.img-pc-only):not(.img-sp-only) img{
    border-radius:14px;
  }

  .page-id-683 .wp-block-columns.has-background[style*="background-color:#082742"]{
    border-radius:20px;
  }

  .page-id-683 .wp-block-columns.has-background[style*="background-color:#082742"] > .wp-block-column:first-child .wp-block-image img{
    border-radius:0 !important;
  }

  .page-id-683 .wp-block-columns.has-background[style*="background-color:#082742"] > .wp-block-column:last-child h2{
    font-size:1.28rem;
    margin-bottom:.65rem !important;
  }
}

/************************************
** luxury refinement
************************************/

/* CAMPAIGN：画像スライダーを"バナー感"から"ギャラリー感"へ */
.page-id-683 .wp-block-vk-blocks-slider{
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 20px 55px rgba(8,39,66,.12);
  border:1px solid rgba(212,185,119,.22);
  background:#fff;
}

.page-id-683 .wp-block-vk-blocks-slider .swiper-slide img{
  border-radius:0 !important;
}

/* CONCEPT：文章と写真を一枚の誌面のように */
.page-id-683 .wp-block-vk-blocks-slider + .wp-block-columns{
  position:relative;
  padding:clamp(2rem,5vw,4.5rem);
  border-radius:30px;
  background:
    radial-gradient(circle at 85% 15%, rgba(212,185,119,.12), transparent 28%),
    linear-gradient(145deg,#fbfaf7 0%,#f4efe6 100%);
  border:1px solid rgba(8,39,66,.08);
  box-shadow:0 18px 52px rgba(8,39,66,.08);
  overflow:hidden;
}

.page-id-683 .wp-block-vk-blocks-slider + .wp-block-columns::after{
  content:"mahaRE;";
  position:absolute;
  right:clamp(1.2rem,4vw,3.5rem);
  bottom:.2rem;
  color:rgba(8,39,66,.045);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3.6rem,10vw,8rem);
  letter-spacing:.04em;
  line-height:1;
  pointer-events:none;
}

.page-id-683 .wp-block-vk-blocks-slider + .wp-block-columns .wp-block-heading{
  background:transparent !important;
  padding:0 !important;
  border:0 !important;
  color:var(--mahare-navy);
  font-family:Georgia,"Times New Roman","Yu Mincho",serif;
  font-weight:400;
}

.page-id-683 .wp-block-vk-blocks-slider + .wp-block-columns .wp-block-paragraph{
  line-height:2;
}

/* 通常見出し：線と余白を整理 */
.page-id-683 .entry-content > .wp-block-heading:not(.has-cocoon-white-color){
  background:transparent !important;
  border:0 !important;
  color:var(--mahare-navy);
  padding:0 0 .75rem !important;
  position:relative;
  font-weight:500;
  letter-spacing:.10em;
}

.page-id-683 .entry-content > .wp-block-heading:not(.has-cocoon-white-color)::before{
  content:"";
  display:block;
  width:34px;
  height:1px;
  margin-bottom:.7rem;
  background:var(--mahare-gold);
  opacity:.9;
}

.page-id-683 .entry-content > .wp-block-heading:not(.has-cocoon-white-color)::after{
  content:"";
  display:block;
  width:88px;
  height:1px;
  margin-top:.75rem;
  background:linear-gradient(90deg,var(--mahare-gold),rgba(212,185,119,0));
}

/* サロン・出張：画像カードに静かな高級感 */
.page-id-683 .entry-content > .wp-block-heading.is-style-vk-heading-double_black + .wp-block-paragraph + .wp-block-columns{
  align-items:stretch;
}

.page-id-683 .entry-content > .wp-block-heading.is-style-vk-heading-double_black + .wp-block-paragraph + .wp-block-columns > .wp-block-column{
  padding:clamp(1rem,2vw,1.5rem);
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(8,39,66,.08);
  box-shadow:0 14px 38px rgba(8,39,66,.07);
}

.page-id-683 .entry-content > .wp-block-heading.is-style-vk-heading-double_black + .wp-block-paragraph + .wp-block-columns > .wp-block-column > p:first-child{
  color:var(--mahare-navy);
  letter-spacing:.06em;
}

/* 締めメッセージ */
.page-id-683 .is-style-vk-heading-both_ends{
  margin-top:clamp(4rem,8vw,7rem);
  font-family:Georgia,"Times New Roman","Yu Mincho",serif;
  font-weight:400;
  letter-spacing:.1em;
}

/* 予約・Instagram画像は広告バナーっぽさを弱める */
.page-id-683 .pc-only-block img{
  border-radius:16px !important;
  box-shadow:0 12px 32px rgba(8,39,66,.08);
}

@media screen and (max-width:834px){
  .page-id-683 .wp-block-vk-blocks-slider{
    border-radius:18px;
  }

  .page-id-683 .wp-block-vk-blocks-slider + .wp-block-columns{
    padding:1.5rem 1.2rem;
    border-radius:22px;
  }

  .page-id-683 .wp-block-vk-blocks-slider + .wp-block-columns::after{
    font-size:4.5rem;
    right:.8rem;
  }

  .page-id-683 .entry-content > .wp-block-heading + .wp-block-paragraph + .wp-block-columns > .wp-block-column{
    border-radius:18px;
  }
}

/* 動きを減らす設定の端末ではアニメーション無効 */
@media (prefers-reduced-motion: reduce){
  .page-id-683 *,
  .page-id-683 *::before,
  .page-id-683 *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
