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

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

/*各ページの大見出し*/
.page-hero-title{
  text-align:center;
  margin: 0 0 40px; /* ← 上余白を詰める */
  padding-bottom: 24px;
  border-bottom: 1px solid #e5e5e5;
}

.page-hero-title .jp{
  display:block;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  color:#2f4f6f; /* ← 日本語タイトル色変更 */
  letter-spacing: 0.03em;
}

.page-hero-title .en{
  display:block;
  margin-top:12px;
  font-size:15px;
  letter-spacing:0.15em;
  color:#5f8fbf;
  text-transform:uppercase;
}

/* ========================================
   固定ナビ
======================================== */

.floating-search-nav{
	position:fixed;
	top:0;
	left:0;
	width:100%;

	background:#fff;
	z-index:9999;

	box-shadow:0 2px 10px rgba(0,0,0,.08);

	transform:translateY(-100%);
	transition:.3s;
}

.floating-search-nav.show{
	transform:translateY(0);
}

/* ========================================
   内側コンテンツ幅
======================================== */

.floating-search-nav-inner{
	display:flex;
	align-items:center;

	width:100%;
	max-width:1200px;

	margin:0 auto;
}

/* ========================================
   ロゴ
======================================== */

.floating-logo{
	display:flex;
	align-items:center;

	padding-left:24px;

	flex-shrink:0;
}

.floating-logo img{
	height:42px;
	width:auto;
	display:block;
}

/* ========================================
   メニュー
======================================== */

.floating-menu{
	display:flex;
	justify-content:flex-start;

	list-style:none;

	margin:0 0 0 80px;
	padding:0;
}

.floating-menu > li{
	position:relative;
}

/* 親リンク */
.floating-menu > li > a{
	display:flex;
	align-items:center;

	height:60px;
	padding:0 24px;

	color:#333;
	font-size:16px;
	font-weight:700;
	text-decoration:none;
}

/* hover */
.floating-menu > li:hover > a{
	background:#f5f5f5;
}

/* ========================================
   ▼ 親矢印
======================================== */

.floating-menu > li.menu-item-has-children > a::after{
	content:"";

	display:inline-block;

	margin-left:8px;

	width:0;
	height:0;

	border-left:4px solid transparent;
	border-right:4px solid transparent;
	border-top:5px solid rgba(0,0,0,.45);
}

/* ========================================
   サブメニュー
======================================== */

.floating-menu .sub-menu{
	display:none;

	position:absolute;
	top:100%;
	left:0;

	min-width:260px;

	background:rgba(37, 159, 230, .95);

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

	box-shadow:0 4px 12px rgba(0,0,0,.12);
}

/* 表示 */
.floating-menu li:hover > .sub-menu{
	display:block;
}

/* サブメニュー項目 */
.floating-menu .sub-menu li{
	position:relative;
}

/* サブメニューリンク */
.floating-menu .sub-menu a{
	display:block;

	padding:16px 20px;

	color:#fff;
	font-size:15px;
	font-weight:700;
	text-decoration:none;

	line-height:1.4;
}

/* hover */
.floating-menu .sub-menu a:hover{
	background:rgba(255,255,255,.08);
}

/* ========================================
   3階層
======================================== */

.floating-menu .sub-menu .sub-menu{
	top:0;
	left:100%;
}

/* ========================================
   ▶ 子矢印（三角）
======================================== */

.floating-menu .sub-menu li.menu-item-has-children > a::after{
	content:"";

	position:absolute;
	right:16px;
	top:50%;

	transform:translateY(-50%);

	width:0;
	height:0;

	border-top:4px solid transparent;
	border-bottom:4px solid transparent;
	border-left:5px solid rgba(255,255,255,.8);
}

/* ========================================
   1180px以下
======================================== */

@media screen and (max-width:1180px){

	/* フローティング検索 非表示 */
	.floating-search-nav{
		display:none;
	}

	/* モバイルフッター */
	.mobile-footer-menu-buttons{
		display:flex !important;
		justify-content:space-around !important;
		align-items:center;
		width:100%;
		left:0;
		right:0;
	}

	.mobile-footer-menu-buttons .menu-button{
		flex:1;
	}

	/* 上に戻るボタン 非表示 */
	.go-to-top-button{
		display:none;
	}

}

/* フッターの画像を全部小さく */
#footer img {
  max-width: 250px !important;
  height: auto !important;
}

/* PCのみページ内リンク下に移動 */
@media (min-width:769px){
:target{
scroll-margin-top:80px;
}
}

/* ページ内リンクスムーズスクロール */
html{
  scroll-behavior:smooth;
}

/* Datepicker共通（PC用ベース） */
#ui-datepicker-div {
  position: fixed !important;
  z-index: 9999 !important;
  max-width: calc(100vw - 20px);
}

/* カーソル・ポインタ */
.checkin-datepicker,
.checkout-datepicker{
cursor:pointer;
}

/* カレンダーにIN・OUT */
#ui-datepicker-div::before {
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 16px;
  line-height: 1.2;
  font-weight: 600;

  padding: 4px 8px;
  margin-bottom: 6px;

  background: #e6f0ff;
  color: #1e3a8a;

  border-bottom: 1px solid #dbeafe;
  border-radius: 6px;
}

/* チェックイン */
#ui-datepicker-div.is-checkin::before {
  content: "チェックイン";
}

/* チェックアウト */
#ui-datepicker-div.is-checkout::before {
  content: "チェックアウト";
}

/* =========================
   入力デフォルト枠（ズレ防止）
========================= */
.wpcf7-form input,
.wpcf7-form select,
.wpcf7-form textarea {
  border: 2px solid #ccc;
}

/* =========================
   フォーカス時
========================= */
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border: 2px solid #1e50a2;
  box-shadow: 0 0 0 2px rgba(30, 80, 162, 0.2);
}

/* レビューを閉じて移動 */
.accordion-close{
text-align:center;
margin-top:30px;
}

.accordion-close button{
padding:12px 28px;
border-radius:30px;
border:1px solid #333;
background:#fff;
cursor:pointer;
font-weight:600;
font-size:16px;
width:30%;
}

/* 横スクロール防止 */
.entry-content{
overflow-x:hidden;
}

/* カテゴリー本文の余白を消す */
.archive .entry-content p{
margin-top:0;
margin-bottom:0;
}

.entry-content p:has(.select-row){
margin:0;
}

/* セレクト横並び */
.select-row{
display:flex;
gap:10px;
margin:10px 0 3px 0;
max-width:100%;
}

/* ラベル＋セレクト */
.select-box{
  display:flex;
  flex-direction:column;
  flex:0 0 380px;
  max-width:380px;
  padding:3px;
  margin-top:15px;
}

/* ラベル */
.select-box label{
  font-weight:700;
}

/* セレクト */
.select-row select{
  width:100%;
  margin:0;
}

/* テーブルのストライプ（グレー）を完全に消す */
.wp-block-table tbody tr:nth-child(even) td,
.wp-block-table tbody tr:nth-child(odd) td{
  background-color:#ffffff !important;
}

/* フォーム全体の最大幅を制限し、中央に配置する */
.wpcf7 {
    max-width: 800px; /* お好みの幅に調整 */
    width: 100%;       /* スマホなどの小画面では画面幅いっぱいに */
    margin: 0 auto;    /* フォームを中央に配置 */
}

/* Contact Form 7の入力項目がスマホでズームするのを防ぐ */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea {
    font-family: inherit; /* テーマのフォントを引き継ぐ */
	font-size: 16px !important; /* 16px以上に設定 */
	padding: 10px; /* パディングを調整して入力しやすくする */
    margin: 5px 0;
	-webkit-appearance: none; /* iOSのデフォルトスタイルを解除 */
    appearance: none;
}

/* バリデーションメッセージを非表示 */
.wpcf7-form-control-wrap .wpcf7-not-valid-tip {
  display: none;
}

.wpcf7-form-control-wrap.is-show .wpcf7-not-valid-tip {
  display: block;
}

/* 自動入力されるPタグを無効にする */
.inquiry p {
  margin: 0;
}

/*テーブル下に余白.枠線・テキストの行間 */
table.inquiry {
   margin-bottom: 30px;
   border:solid 1px #d7d7d7;
   line-height:1.2;
   vertical-align:middle;
}

/* テーブルの行 */
.inquiry tr {
  border: 0 !important;
}

/* テーブルの見出し側 */
.inquiry th{
   text-align:left;
   font-size:16px;
   color:#444;
   padding:1em 0.5em;
   width:30%;/*横幅*/
   background:#efefef;
   border:solid 1px #d7d7d7;
   white-space: nowrap;
   vertical-align: middle;
}

/* 必須と任意タグ */
.haveto,.any{
   font-size:13px;
   padding:3px;
   background:#ff9393;
   color:#fff;
   border-radius:2px;
   margin-right:5px;
   margin-left:5px;
   font-weight:normal;
}

/* 任意タグの背景カラー */
.any{
   background:#bdbdbd;
}

/* テーブルフォーム側 */
.inquiry td{
   border:solid 1px #d7d7d7;
   background:#FFFFFF;
}

/* 横並びレイアウト用 */
.form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* 2列 */
.form-row-2 .form-col {
  flex: 1 1 calc(50% - 6px);
}

/* 横並び内の入力欄を幅いっぱいにする */
.form-col input,
.form-col select,
.form-col textarea {
  width: 100%;
  box-sizing: border-box;
}

/* td内の余白調整 */
.inquiry td {
  padding: 12px;
  vertical-align: middle;
}

/* 大人人数 + お名前 の入力欄を調整 */
.wpcf7 input[name="adult"],
.wpcf7 input[name="your-name"] {
  max-width: 260px;
  width: 100%;
}

/* 送信ボタンのスタイル */
.wpcf7-form input[type="submit"] {
  font-size: 20px;
  font-weight: bold;
  width: 200px;
  padding: 10px;
  border-radius: 10px;
  background-color: #1e50a2;
  border: none;
  color: #fff;
  cursor: pointer;

  display: block;
  margin: 0 auto;
}

/* スピナー中央 */
.wpcf7-spinner {
  display: block;
  margin: 0 auto;
}

.wpcf7-form input[type="submit"]:hover {
  background-color: #527BBE;
}

/* 送信完了メッセージのメッセージボックスを非表示 */
.wpcf7-form.sent .wpcf7-response-output {
  display: none;
}

/* hrタグ（横線）を点線にする */
hr {
  border: none; /* 元の線を消す */
  border-top: 1px dashed #ccc; /* 上部に点線を引く */
  height: 0; /* hr要素自体の高さをなくす */
}

/* 物件ナビメニュー */
#nav_house {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
}

#nav_house li {
  position: relative;
  margin-right: -4px;
  padding: 0 10px;
  border-right: 1px solid #ccc;
}

/* 下線 */
#nav_house li::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  height: 2px;
  width: 100%;
  background: transparent;
  transition: all 0.3s ease;
}

/* hover */
#nav_house li:hover::after {
  background: red;
}

#nav_house li a {
  text-decoration: none;
  font-weight: bold;
}

/* 最後の線を消す */
#nav_house li:last-child {
  border-right: none;
}

/* 条件のリスト表示カスタマイズ */
#terms li:last-child {
  list-style-type: none;
}

#cancel li:first-child {
  list-style-type: none;
}

#bathroom li {
  list-style-type: decimal;
}

/* 画像リンクの基本設定 */
.wp-image-3431 {
  transition: opacity 0.3s ease; /* 変化を滑らかにする */
}

/* マウスホバー時の設定 */
.wp-image-3431:hover {
  opacity: 0.7; /* 不透明度を下げて色味を変える */
}

/************************************
** アコーディオンの見出しのアイコンを変更する
************************************/
.toggle-button::before {
  content: '\f067'; /*クリック前のアイコン*/
  font-size: 1.2em; /*アイコンの大きさ*/
  color: #000;
}

.toggle-checkbox:checked ~ .toggle-button::before {
  content: '\f068'; /*クリック後のアイコン*/
}

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

/*834px以下*/
@media screen and (max-width:834px){
table.inquiry th,
table.inquiry td{
display:block;
width:100%;
padding:0.7em!important;
border:none;
}
}

/* ===== トップ カバーブロック スマホ最適化 ===== */
@media screen and (max-width: 768px) {

  /* カバー全体の高さ */
  .wp-block-cover {
    min-height: 420px !important;
  }

  /* 背景画像 */
  .wp-block-cover img {
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* 上の文字 */
  .wp-block-cover p {
    font-size: 20px !important;
    line-height: 1.6 !important;
    padding: 0 16px;
  }

  /* メインタイトルだけ */
  .wp-block-cover p strong {
    font-size: 26px !important;
    line-height: 1.4 !important;
  }

/*各ページの大見出し*/
.page-hero-title{
  margin: 0 0 30px;
}

.page-hero-title .jp{
  font-size:24px;
}

.page-hero-title .en{
  font-size:12px;
}

/* レビュー閉じる */
.accordion-close button{
width:80%;
}

.select-row{
gap:2px;
flex-wrap:nowrap;
}

/* 横スクロール防止 */
.select-box{
flex:1;
min-width:0;
max-width:none;
}

.select-row select{
min-width:0;
}

/* Flexibleテーブルのフォントサイズ */
  .wp-block-flexible-table-block-table{
    font-size: 18px !important;
  }

/* 通常テーブルのフォントサイズ */
  .entry-content table,
  .entry-content table th,
  .entry-content table td {
    font-size: 18px !important;
  }

/* 大人人数 + お名前 の入力 スマホではフル幅に戻す */
  .wpcf7 input[name="adult"],
  .wpcf7 input[name="your-name"] {
    max-width: 100%;
  }
}

/* スマホ向けのメディアクエリ (600px以下) */
@media only screen and (max-width: 600px) {
  /* Datepicker全体を大きくする */
  .ui-datepicker {
    width: 90% !important; /* 画面幅に合わせて拡大 */
    font-size: 18px !important; /* 文字サイズを大きく */
  }
  
  /* 日付のセルを大きくしてタップしやすくする */
  .ui-datepicker td a, .ui-datepicker td span {
    padding: 10px !important; /* セルの余白を増やしてタップエリアを拡大 */
    text-align: center;
  }

/* 前後の月矢印のコンテナを大きくする */
.ui-datepicker-prev,
.ui-datepicker-next {
    width: 2.0em !important; /* 幅を広げる */
    height: 2.0em !important; /* 高さを広げる */
    top: 2px !important; /* 位置調整 */
}

}

/*480px以下*/
@media screen and (max-width: 480px){
/* Flexibleテーブルのフォントサイズ */
  .wp-block-flexible-table-block-table{
    font-size: 16px !important;
  }

/* 通常テーブルのフォントサイズ */
  .entry-content table,
  .entry-content table th,
  .entry-content table td {
    font-size: 16px !important;
  }

/* スマホだけ中央固定 */
  #ui-datepicker-div {
    top: 180px !important; /* ←好きな位置に調整 */
    left: 50% !important;
    transform: translateX(-50%) !important; /* ←縦方向は消す */
  }
}