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

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

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

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

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

/* スマホ：上部メニューをアコーディオン（開閉式）に（2026-09-26追加） */
@media screen and (max-width: 834px) {
	.fp-mnav-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		padding: 12px 16px;
		border: 0;
		border-top: 1px solid #e3e8e3;
		border-bottom: 1px solid #e3e8e3;
		background: #fff;
		color: #333;
		font-size: 16px;
		font-weight: 700;
		cursor: pointer;
	}
	.fp-mnav-toggle .fp-mnav-bars { font-size: 20px; line-height: 1; }
	.fp-mnav-toggle::after {
		content: "▼";
		font-size: 11px;
		transition: transform .2s;
	}
	.fp-mnav-toggle.is-open::after { transform: rotate(180deg); }
	#navi .navi-in > ul.menu-mobile { display: none; }
	#navi .navi-in > ul.menu-mobile.is-open {
		display: flex;
		flex-wrap: wrap;
		border-bottom: 1px solid #e3e8e3;
	}
}
@media screen and (min-width: 835px) {
	.fp-mnav-toggle { display: none; }
}

/* PC表示ではスマホ用メニューを隠す */
@media screen and (min-width: 835px) {
	#navi .navi-in > ul.menu-mobile { display: none; }
}

/* マンガ紹介ボタン・マンガページ（2026-09-26追加） */
.fp-manga-topbar { background: #1f2d5c; padding: 12px 16px; text-align: center; }
.fp-manga-topbar .fp-manga-cta { margin: 0; justify-content: center; }
.fp-btn-manga .wp-block-button__link {
	display: inline-block;
	background: #ffcf3f;
	color: #1f2d5c;
	border: 3px solid #1f2d5c;
	border-radius: 999px;
	padding: 14px 28px;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.4;
	box-shadow: 0 4px 0 #1f2d5c;
	transition: transform .15s, box-shadow .15s;
}
.fp-btn-manga .wp-block-button__link:hover {
	transform: translateY(2px);
	box-shadow: 0 2px 0 #1f2d5c;
	color: #1f2d5c;
}
.fp-btn-manga .fp-manga-sub { font-size: 13px; font-weight: 500; margin-left: 4px; }
@media screen and (max-width: 834px) {
	.fp-manga-cta, .fp-btn-manga { width: 100%; }
	.fp-btn-manga .wp-block-button__link { display: block; width: 100%; text-align: center; font-size: 16px; }
	.fp-btn-manga .fp-manga-sub { display: block; margin-left: 0; }
}
.fp-manga-note { font-size: 14px; color: #666; background: #f6f7f9; padding: 8px 12px; border-radius: 6px; }
.fp-manga-page { max-width: 760px; margin: 0 auto 24px; }
.fp-manga-page img { width: 100%; height: auto; box-shadow: 0 2px 10px rgba(0,0,0,.12); }

/* YouTubeショートを縦長で表示（2026-09-26追加） */
.fp-shorts { max-width: 360px; margin: 0 auto 1em; }
.fp-shorts .wp-block-embed__wrapper { position: static; padding: 0 !important; height: auto; overflow: visible; }
.fp-shorts .wp-block-embed__wrapper::before { display: none !important; }
.fp-shorts .video-container { max-width: none !important; width: 100% !important; margin: 0 !important; }
.fp-shorts .video-container .video { position: relative !important; width: 100% !important; height: 0 !important; padding-top: 177.78% !important; padding-bottom: 0 !important; overflow: hidden; border-radius: 10px; background: #000; }
.fp-shorts .video-container .video iframe, .fp-shorts iframe { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; }

/* 制作例：ショート動画3本・ギャラリー調整（2026-09-26追加） */
.fp-ai-gallery > :last-child:nth-child(4n+3) { grid-column: span 2; }
.fp-shorts-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 760px !important; margin: 0 auto !important; }
.fp-shorts-row .fp-shorts { max-width: none; margin: 0; }
.fp-short-cap { margin: 8px 0 0 !important; text-align: center; font-weight: 700; color: #fff; font-size: .95rem; }
@media screen and (max-width: 834px) { .fp-shorts-row { gap: 8px; } .fp-short-cap { font-size: .8rem; } }

.fp-tool-easy { display: inline-block; margin-top: 8px !important; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.35); font-weight: 700; }

/* 制作実績に一本化（2026-09-26） */
.fp-works-sub { text-align: center; margin: 48px 0 20px !important; font-size: 1.3rem; }
#works .fp-short-cap { color: #333; }
.fp-to-works .wp-block-button__link { color: #fff !important; border-color: rgba(255,255,255,.7) !important; }

#works .fp-sec-head { text-align: center; }
#works .fp-tool-easy { display: table; margin: 12px auto 28px !important; background: #e6f4ea; border-color: #b9dcc5; color: #2e7d4f; }

/* 駅からの道順の上に余白 */
#access .fp-sub-title { margin-top: 64px !important; }
@media screen and (max-width: 640px) { #access .fp-sub-title { margin-top: 48px !important; } }

/* トップの事業所名を大きく（2026-09-26） */
.fp-hero .fp-hero-eyebrow { font-size: 1.15rem !important; padding: 12px 28px !important; border-radius: 20px !important; border-width: 2px !important; line-height: 1.5 !important; }
.fp-hero .fp-hero-name { display: inline-block; margin-top: 4px; font-size: 1.75rem; font-weight: 800; letter-spacing: .06em; color: var(--fp-green-800); }
@media screen and (max-width: 640px) { .fp-hero .fp-hero-eyebrow { font-size: 1rem !important; padding: 10px 20px !important; } .fp-hero .fp-hero-name { font-size: 1.45rem; } }