/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Template: cocoon-master
Version: 1.1.3
*/
/*!
Theme Name: Cocoon Child
*/

@charset "UTF-8";

/************************************
** HEADER
************************************/
#header-container{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9999;
  padding-bottom:10px;
  background:rgba(20,15,10,0.6);
  backdrop-filter:blur(10px);
}

body.admin-bar #header-container{
  top:32px;
}

.main{
  padding-top:0 !important;
}

#content-in{
  padding-top:80px;
}
body:not(.home):not(.page-id-230) #content{
  padding-top:60px;
}
/************************************
** 固定ボタン
************************************/
.setsu-fixed-buttons{
  position:fixed;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  z-index:9999;
}

/* 共通 */
.setsu-reserve-btn,
.setsu-news-btn{
  writing-mode:vertical-rl;
  text-orientation:upright;

  display:flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;
  letter-spacing:0.08em;
  line-height:1.7;

  width:42px;
}

/* 宿泊予約 */
.setsu-reserve-btn{
  padding:14px 0 12px;   /* ←下を少し詰める */
  font-size:13px;

  background:#c8a96a;
  color:#2b1a12;

  border-radius:8px 0 0 0;
}

/* お知らせ */
.setsu-news-btn{
  padding:12px 0 14px;   /* ←上を少し詰める */
  font-size:12px;

  background:rgba(200,169,106,0.88);
  color:#2b1a12;

  border-radius:0 0 0 8px;
}

/* 境目を柔らかく */
.setsu-news-btn{
  border-top:1px solid rgba(0,0,0,0.1);
}

/* ホバー（少し動きあり・上品最適版） */
.setsu-reserve-btn,
.setsu-news-btn{
  position:relative;
  transition:
    background 0.35s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

/* ホバー */
.setsu-reserve-btn:hover,
.setsu-news-btn:hover{
  background:#d4b476;

  /* ←わずかに動く（これが肝） */
  transform:translateX(-2px) scale(1.03);

  box-shadow:
    -6px 0 16px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* 光のレイヤー */
.setsu-reserve-btn::after,
.setsu-news-btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0.12),
    rgba(255,255,255,0)
  );
  opacity:0;
  transition:opacity 0.35s ease;
  pointer-events:none;
}

.setsu-reserve-btn:hover::after,
.setsu-news-btn:hover::after{
  opacity:1;
}

/* SP */
@media (max-width:768px){

  .setsu-fixed-buttons{
    top:auto;
    bottom:80px;
    right:10px;
    transform:none;

    display:flex;
    flex-direction:column;
    gap:6px;
  }

  .setsu-reserve-btn,
  .setsu-news-btn{
    writing-mode:horizontal-tb;
    text-orientation:mixed;

    width:auto;
    min-width:90px;

    padding:10px 14px;
    font-size:13px;

    border-radius:8px;
    letter-spacing:0.05em;
  }

  .setsu-reserve-btn{
    font-size:14px;
  }
}
/************************************
** NAVI（改善版）
************************************/
#navi{
  height:20px;
  background:transparent !important;

  display:flex;
  justify-content:center;
  align-items:center;
}

/* ULを横並び＆折り返し防止 */
#navi ul{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:32px;

  margin:0;
  padding:0;
  list-style:none;

  flex-wrap:nowrap; /* ★折り返し防止 */
}

/* 各メニュー */
#navi li{
  white-space:nowrap; /* ★改行防止 */
}

/* リンク */
#navi a{
  position:relative;
  display:inline-block;

  color:#e6e0d4;
  letter-spacing:0.18em;
  font-size:14px;
  text-decoration:none;

  padding:6px 4px;
  transition:all .3s ease;
}

/* 下線（和風アクセント） */
#navi a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;

  width:100%;
  height:1px;

  background:#c8a96a;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
#navi a:hover{
  background:transparent !important;
  color:#c8a96a !important;
}
#navi a:hover::after{
  transform:scaleX(1);
}
.footer-logo img{
  filter: sepia(1) saturate(3) hue-rotate(10deg) brightness(0.7);
}
/************************************
** NAVI（SP最適化）
************************************/
@media (max-width:768px){
  #navi{
    height:56px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;

    padding:0 10px;
    box-sizing:border-box;

    scrollbar-width:none;
  }

  #navi::-webkit-scrollbar{
    display:none;
  }

  #navi ul{
    display:flex;
    justify-content:center;
    align-items:center;

    flex-wrap:nowrap;
    white-space:nowrap;

    /* ★可変gap */
    gap:clamp(10px, 3vw, 18px);
  }

  #navi li{
    white-space:nowrap;
  }

  #navi a{
    display:inline-block;

    /* ★可変フォント */
    font-size:clamp(11px, 3.2vw, 14px);

    /* ★可変文字間 */
    letter-spacing:clamp(0.08em, 0.5vw, 0.18em);

    padding:4px 2px;
  }

}
/************************************
** 共通背景
************************************/
body,
#container,
#main,
.main,
.content,
.entry-content{
  background:#2b1a12;
}

/************************************
** h2（共通・上品版）
************************************/
.entry-content h2{
  color:#e6e0d4;
  background:none;
  border:none;
  box-shadow:none;

  font-size:20px;
  letter-spacing:0.18em;

  margin:70px 0 24px;
  padding-bottom:12px;

  /* 一本線に統一 */
  border-bottom:1px solid rgba(200,169,106,0.35);
}

/* 装飾ライン削除 */
.entry-content h2::after{
  display:none;
}
/************************************
** 共通UI
************************************/
.entry-card a:hover{
  background:transparent;
}

.a-wrap:hover{
  background:rgba(255,255,255,0.05);
}

/************************************
** 予約ボタン
************************************/
.fixed-reserve{
  position:fixed;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  z-index:99999;
}

.fixed-reserve a{
  display:block;

  writing-mode:vertical-rl;
  text-orientation:upright;

  padding:18px 10px;
  background:#c8a96a;
  color:#2b1a12;

  letter-spacing:0.2em;
  font-size:14px;
  text-decoration:none;

  border-radius:10px 0 0 10px;
}
/************************************
** アニメーション
************************************/
@keyframes heroZoomSlow{
  from{ transform:scale(1.08); }
  to{ transform:scale(1.02); }
}

@keyframes fadeFloat{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
#navi .current-menu-item a,
#navi .current_page_item a{
  background:transparent !important; /* ←白消す */
  color:#c8a96a; /* ←選択中を少し強調 */
}