@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

.skin-grayish.front-top-page .content .main {
  /* padding: 20px 28px; */
  padding: 0px 28px 0px 28px;
}

/* Full画面幅 */
.full-width {
	margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
	padding-top: 10px; /* 不要なら削除または、任意の数値を設定してください */
	padding-bottom: 10px; /* 不要なら削除または、任意の数値を設定してください */
}

.entry-content>*,.mce-content-body>*,.demo .entry-content p,.article dl,.article ul,.article ol,.article blockquote,.article pre,.article table,.article .toc,.body .article,.body .column-wrap,.body .new-entry-cards,.body .popular-entry-cards,.body .navi-entry-cards,.body .box-menus,.body .ranking-item,.body .rss-entry-cards,.body .widget,.body .author-box,.body .blogcard-wrap,.body .login-user-only,.body .information-box,.body .question-box,.body .alert-box,.body .information,.body .question,.body .alert,.body .memo-box,.body .comment-box,.body .common-icon-box,.body .blank-box,.body .button-block,.body .micro-bottom,.body .caption-box,.body .tab-caption-box,.body .label-box,.body .toggle-wrap,.body .wp-block-image,.body .booklink-box,.body .kaerebalink-box,.body .tomarebalink-box,.body .product-item-box,.body .speech-wrap,.body .wp-block-categories,.body .wp-block-archives,.body .wp-block-archives-dropdown,.body .wp-block-calendar,.body .ad-area,.body .wp-block-gallery,.body .wp-block-audio,.body .wp-block-cover,.body .wp-block-file,.body .wp-block-media-text,.body .wp-block-video,.body .wp-block-buttons,.body .wp-block-columns,.body .wp-block-separator,.body .components-placeholder,.body .wp-block-search,.body .wp-block-social-links,.body .timeline-box,.body .blogcard-type,.body .btn-wrap,.body .btn-wrap a,.body .block-box,.body .wp-block-embed,.body .wp-block-group,.body .wp-block-table,.body .scrollable-table,.body .wp-block-separator,.body .wp-block,.body .video-container,.comment-area,.related-entries,.pager-post-navi,.comment-respond {
  margin-bottom: 0 !important; /* 最小の相殺 */
}
/*上部に残る余白を消す設定*/
/*———————————
メインの余白を消す
——————————–*/
.main {
width: 100%;
padding: 0;
}

/*———————————
エントリーコンテンツのマージンを削除
——————————–*/
.entry-content {
margin: 0;
}
.content{
	margin-top:0;
}
#footer{
	background-color:#F4F1ED;
}
/*メインビジュアルのscroll*/
.skin-grayish.front-top-page .skinadd-topmv-scroll{
	color:#fff;
	font-weight:700 !important;
	filter: drop-shadow(0px 0px 4px black);
}

.skin-grayish.front-top-page .skinadd-topmv-scroll::before{	
	border-width: 0px 0px 4px 4px !important;
	filter: drop-shadow(0px 0px 4px black) !important;


}
/* フローティングバナー */
#dynamic-reserve-btn.fixed-booking-container {
  position: fixed !important;
  bottom: 25px; 
  right: 30px; /* 20から30へ：少し左に寄せてスクロールバーとの干渉を防ぐ */
  z-index: 99999 !important;
  transition: bottom 0.3s ease;
}

#dynamic-reserve-btn.is-raised {
  bottom: 100px !important; /* トップへ戻るボタンの上に来る高さ */
}

.fixed-booking-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: #b18c5d !important; /* 茶色 */
  color: #ffffff !important;           /* 文字は白 */
  padding: 12px 25px !important;       /* ボタンの太さ */
  border-radius: 50px !important;      /* 角丸 */
  text-decoration: none !important;    /* 下線を消す */
  font-weight: bold !important;
  font-size: 16px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important; /* 影をつける */
  white-space: nowrap !important;
}

/* 4. カレンダーアイコンの隙間 */
.fixed-booking-button i {
  margin-right: 8px !important;
}

/* 5. マウスを乗せた時の反応 */
.fixed-booking-button:hover {
  background-color: #8e6f4a !important; /* 少し濃い茶色に */
  transform: translateY(-3px);          /* 少し浮く */
  opacity: 1 !important;
}

/* --- スマホ専用の調整 (画面幅480px以下) --- */
@media screen and (max-width: 480px) {
  #dynamic-reserve-btn.fixed-booking-container {
    bottom: 0 !important; /* 下端にぴったりつける */
    right: 0 !important;  /* 右端の隙間をなくす */
    left: 0 !important;   /* 左端も固定 */
    width: 100% !important; /* 横幅いっぱい */
    z-index: 99999 !important;
  }

  /* 帯状のボタンデザイン */
  .fixed-booking-button {
    border-radius: 0 !important;    /* 角を丸くしない（帯状） */
    padding: 18px 0 !important;     /* 上下の厚みを出して押しやすく */
    font-size: 18px !important;     /* 文字を少し大きく */
    box-shadow: 0 -3px 10px rgba(0,0,0,0.15) !important; /* 上側に影 */
    width: 100% !important;
  }

  /* Cocoonの「トップへ戻る」ボタンを少し上に逃がす */
  /* ボタン同士が被らないように、Cocoon側のボタン位置を上げます */
  .go-to-top {
    bottom: 70px !important; /* 予約ボタンの厚み分だけ上に移動 */
  }

  /* スマホでは「避ける動き（is-raised）」を無効化（帯で固定するため） */
  #dynamic-reserve-btn.is-raised {
    bottom: 0 !important;
  }
}

/* フローティングバナー */

/*div.footer-widgetsの境界線　削除対応*/
/* ウィジェットエリアの境界線を消す */
.footer-widgets {
  border: none !important;
}

/* ウィジェット個別の区切り線を消す */
.footer-widgets .widget {
  border: none !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* もし「予約はこちら」というタイトルが残っている場合に非表示にする */
#dynamic-reserve-btn .widget-title {
  display: none !important;
}

/* 直線（疑似要素）が入っている場合の対策 */
.footer-widgets::before, 
.footer-widgets::after {
  content: none !important;
  display: none !important;
}

/*div.footer-widgetsの境界線　削除対応*/
#breadcrumb{
	color:#623e2a;
}



/*ここからスマホのときに言語選択ができない件の対応*/
/* 1) 言語セレクト自体を最前面へ（テスト用に強め） */
@media (max-width: 1023px) {
  .menu-item-gtranslate,
  .menu-item-gtranslate .gt_selector {
    position: relative !important;
    z-index: 99999 !important;
  }
}

/* 2) 上から被っている可能性がある要素の“その部分だけ”タップを通す
   ※クラス名はサイトに合わせて差し替え（例）*/
@media (max-width: 1023px) {
  .floating-cta,
  .sp-header-overlay,
  .sp-global-nav { 
    /* 本当に被っていたら pointer-events を切る（全無効化） */
    pointer-events: none;
  }
  .floating-cta a,
  .floating-cta button {
    /* ただしCTAの自身のボタンだけは有効に戻す */
    pointer-events: auto;
  }
}

/* 3) transform / opacity が新しいスタッキングコンテキストを作っている場合の緊急回避 */
@media (max-width: 1023px) {
  header.site-header {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* 4) iOSでselectの見た目が“細くて押しにくい”のも誤タップ要因 → タップ領域を確保 */
@media (max-width: 1023px) {
  .menu-item-gtranslate .gt_selector {
    min-height: 44px;              /* iOS推奨ヒットボックス */
    padding: 8px 12px;
    -webkit-appearance: none;       /* 必要なら矢印の重なりを防ぐ */
    background-color: #fff;         /* 背景とコントラストを確保 */
    border: 1px solid #ccc;
    border-radius: 4px;
  }
}
/*ここまでスマホのときに言語選択ができない件の対応*/

/* FrontPage MV navi-color-change */
.skin-grayish #navi-in[data-navi-active=false] {
  background-color: transparent;
}

.skin-grayish #navi-in[data-navi-active=false]>ul.menu-top.menu-header.menu-pc>li>a,
.skin-grayish #navi-in[data-navi-active=false] [class^="icon-"],
.skin-grayish #navi-in[data-navi-active=false] .search-menu-icon span::before {
  color: white;
  filter: drop-shadow(0px 0px 4px white);
}
/* ここまでFrontPage MV navi-color-change */

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}