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

/* =========================================================
   目次
   1. 変数
   2. 共通
   3. ヘッダー
   4. グローバルメニュー
   5. 電話バナー（1024px以下で画面上部に固定表示）
   6. 埋め込みiframe（Googleマップ・YouTubeなど）
   7. レスポンシブ（1024px / 834px / 768px / 480px）
   ========================================================= */


/* =========================================================
   1. 変数
   色を変えたいときはここだけ直せばOK
   ========================================================= */
:root {
	--navi-line-hover: #246640; /* メニュー：ホバー・選択中のライン */
	--navi-line-base: #3eb370;  /* メニュー：常時表示のライン */
	--navi-bg: #ebebeb;         /* メニュー：背景色 */
	--navi-border: #4d4d4d;     /* メニュー：枠線色 */
	--navi-divider: #ffffff;    /* メニュー：項目間の区切り線 */
	--iframe-border: #ddd;      /* iframe：枠線色 */
}


/* =========================================================
   2. 共通
   ========================================================= */

/* メインエリアの左右余白（834px以下では16pxに縮小） */
.main {
	padding: 0 29px;
}

/* 固定ページのタイトルを非表示 */
.page .entry-title {
	display: none;
}

/* トップページの画像
   .media_image-2 = PC用、.media_image-3 = スマホ用
   480px以下で入れ替え（→ 7. レスポンシブ）
   左右 -30px で余白を打ち消して横幅いっぱいに表示 */
.media_image-2 {
	display: block !important;
	margin-right: -30px !important;
	margin-left: -30px !important;
	width: auto;
}

.media_image-3 {
	display: none !important;
}


/* =========================================================
   3. ヘッダー
   PC：左にロゴ、右に問い合わせボタン
   834px以下：ロゴ・問い合わせボタンを隠し、スマホ用ボタンを表示
   ========================================================= */
.logo {
	text-align: left;
}

/* ロゴと問い合わせボタンを横並びにする */
div#header-in {
	flex-direction: row;
}

/* ロゴ側を右マージンautoにして、ボタンを右端へ押し出す */
.header-in .logo-header {
	margin-right: auto;
}

.header-contact {
	padding: 10px 0;
}

/* スマホ用ヘッダー（PCでは非表示） */
div#header-sp {
	flex-direction: column;
}

.header-sp {
	display: none;
}


/* =========================================================
   4. グローバルメニュー
   ・全項目を折り返さず横一列に並べ、幅いっぱいに均等に広げる
   ・各項目の下に常時ライン（明るい緑）
   ・ホバーで濃い緑のラインが中央から左右に伸びる
   ・選択中のページは濃い緑の細いライン
   ========================================================= */
.navi {
	height: 100px !important;
}
 
/* 横一列に固定（Cocoon標準の折り返しを禁止） */
#navi .navi-in > ul {
	display: flex;
	flex-wrap: nowrap;
}
 
/* 各項目：固定幅をやめ、文字量に応じて残り幅を分け合う */
#navi .navi-in > ul > li {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 80px;
	background-color: var(--navi-bg);
	border-color: var(--navi-border);
	border-right: 2.5px solid var(--navi-divider); /* 区切り線 */
}
 
/* 最後の項目は区切り線なし */
#navi .navi-in > ul > li:last-child {
	border-right-width: 0;
}
 
/* メニュー文字
   ・文字サイズは画面幅に合わせて 14px〜21px で自動調整
   ・左右の余白を 1.6em → 1em に詰めて7項目を一列に収める
   ・項目内で文字が改行しないようにする */
#navi .navi-in > ul > li > a {
	font-size: clamp(14px, 1.6vw, 21px);
	padding: 1.6em 1em;
	white-space: nowrap;
}
 
/* アンダーライン共通（::before＝常時、::after＝ホバー） */
#navi .navi-in a::before,
#navi .navi-in a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
}
 
/* 常時表示のライン */
#navi .navi-in a::before {
	background: var(--navi-line-base);
	transform: scale(1);
}
 
/* ホバー用ライン：通常は横幅0で隠しておく */
#navi .navi-in a::after {
	background: var(--navi-line-hover);
	transform: scale(0, 1);
	transition: 0.3s;
}
 
/* ホバーで横幅100%に伸ばす */
#navi .navi-in a:hover::after {
	transform: scale(1);
}
 
/* 選択中のメニュー項目にアンダーライン（先頭＝トップは除く） */
.current-menu-item:not(:first-child)::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--navi-line-hover);
}
 
 
/* =========================================================
   5. 電話バナー
   PCでは非表示。1024px以下で画面上部に固定表示し、
   JSで .hide クラスが付くと上にスライドして隠れる
   （表示側の指定 → 7. レスポンシブの1024px以下）
   ========================================================= */
.tel-banner {
	display: none;
}
 
/* バナー内の電話画像 */
.phone-banner {
	width: 500px;
}

/* =========================================================
   5. 電話バナー
   PCでは非表示。1024px以下で画面上部に固定表示し、
   JSで .hide クラスが付くと上にスライドして隠れる
   （表示側の指定 → 7. レスポンシブの1024px以下）
   ========================================================= */
.tel-banner {
	display: none;
}

/* バナー内の電話画像 */
.phone-banner {
	width: 500px;
}


/* =========================================================
   6. 埋め込みiframe
   .wrap-iframe で囲んだ iframe を、縦横比を保ったまま
   幅に合わせて伸縮させる（padding-topで高さを確保する手法）

   padding-top の % は「親要素の幅」に対する割合
     PC        ：315 / 560 ≒ 56.25%（16:9）
     768px以下 ：600 / 560 ≒ 107.1%（縦長気味）
     480px以下 ：800 / 560 ≒ 142.9%（さらに縦長）
   ========================================================= */
.wrap-iframe {
	position: relative;
	display: block;
	width: 100%;
	max-width: 800px;   /* PCでは最大800px */
	margin: 20px auto;  /* 上下20px・左右中央 */
	padding-top: calc(315 / 560 * 100%);
}

/* iframe を親の .wrap-iframe いっぱいに広げる */
.wrap-iframe iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 1px solid var(--iframe-border);
}


/* =========================================================
   7. レスポンシブ
   大きい画面幅から順に記述
   ========================================================= */

/* ---------- 1024px以下（タブレット・スマホ） ---------- */
@media screen and (max-width: 1024px) {

	/* 電話バナーを画面上部に固定・中央表示 */
	.tel-banner {
		display: flex !important;
		justify-content: center;   /* 横方向の中央揃え */
		align-items: center;       /* 縦方向の中央揃え */
		position: fixed;
		top: 55px;                 /* 画面上端から55px */
		left: 50%;
		transform: translateX(-50%); /* left:50% と合わせて中央配置 */
		width: 99%;
		z-index: 3 !important;
		transition: 1s;            /* 隠れる・出るアニメーション時間 */
	}

	/* .hide が付いたら400px上へ移動して隠す（横の中央位置は維持） */
	.tel-banner.hide {
		transform: translate(-50%, -400px);
	}
}

/* ---------- 834px以下（タブレット縦・スマホ） ---------- */
@media screen and (max-width: 834px) {

	/* PC用のメニュー・ロゴ・問い合わせボタンを隠す */
	.navi,
	.logo,
	.header-contact {
		display: none;
	}

	/* スマホ用ボタンを縦並び・中央揃えで表示 */
	.header-sp {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px 0;
	}

	/* 左右余白を狭める */
	main.main,
	div.sidebar {
		padding: 0 16px;
	}
}

/* ---------- 768px以下 ---------- */
@media screen and (max-width: 768px) {

	/* iframe を縦長に（約107.1%） */
	.wrap-iframe {
		padding-top: calc(600 / 560 * 100%);
	}
}

/* ---------- 480px以下（スマホ） ---------- */
@media screen and (max-width: 480px) {

	/* トップ画像：PC用を隠してスマホ用を表示 */
	.media_image-2 {
		display: none !important;
	}

	.media_image-3 {
		display: block !important;
		margin-right: -30px !important;
		margin-left: -30px !important;
		width: auto;
	}

	/* iframe をさらに縦長に（約142.9%） */
	.wrap-iframe {
		padding-top: calc(800 / 560 * 100%);
	}
}