@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; } }

/* スマホ・タブレット：上部に追従するハンバーガーメニュー（Cocoon 設定 > モバイル「ヘッダーとフッター」）を使うため、
   元のヘッダー（ロゴ・キャッチ・旧メニューボタン）は表示しない */
@media screen and (max-width: 1023px) {
	#header-container { display: none; }
	#container { padding-top: 50px; } /* 追従メニューの高さ分 */
}

/* スマホ上部の追従メニュー：ロゴ左・メニューボタン右、検索ボタンなし、メニューは右から開く */
.mobile-header-menu-buttons .search-menu-button { display: none; }
.mobile-header-menu-buttons .logo-menu-button { order: 1; flex: 1 1 auto; padding-left: 12px; }
body .mobile-header-menu-buttons li.logo-menu-button { justify-content: flex-start; }
body .mobile-header-menu-buttons li.logo-menu-button a img { margin: 5px 0 0; max-height: 40px; }
.mobile-header-menu-buttons .navi-menu-button { order: 2; flex: 0 0 76px; }
#navi-menu-content { left: auto; right: 0; transform: translateX(105%); }
#navi-menu-input:checked ~ #navi-menu-content { transform: translateX(0); }

/* ===== トップ：新着情報バー（2026-10-10） ===== */
.fp-newsbar{max-width:1100px;margin:16px auto!important;padding:10px 16px;display:flex;align-items:flex-start;gap:12px;background:#fff8e1;border:1px solid #f3d27a;border-radius:10px;box-sizing:border-box}
.fp-newsbar .fp-newsbar-label{margin:0!important;flex:none;background:#e8590c;color:#fff;font-weight:700;font-size:13px;padding:2px 12px;border-radius:999px;line-height:1.9}
.fp-newsbar .wp-block-latest-posts{margin:0!important;padding:0!important;flex:1;min-width:0;list-style:none}
.fp-newsbar .wp-block-latest-posts li{margin:0 0 4px!important;padding:0;display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:baseline;gap:10px;font-size:15px;line-height:1.6;border:none}
.fp-newsbar .wp-block-latest-posts li:last-child{margin-bottom:0!important}
.fp-newsbar .wp-block-latest-posts__post-date{flex:none;color:#666;font-size:13px;margin:0}
.fp-newsbar .fp-newsbar-more{margin:0!important;flex:none;font-size:13px;line-height:1.9}
@media (max-width:600px){
.fp-newsbar{flex-wrap:wrap;margin:12px 16px!important;gap:6px}
.fp-newsbar .wp-block-latest-posts{flex-basis:100%}
.fp-newsbar .wp-block-latest-posts li{flex-direction:column-reverse;gap:0;margin-bottom:8px!important}
.fp-newsbar .fp-newsbar-more{width:100%;text-align:right}
}

/* layout-refresh-2026-10-12: header menu, footer, bands, grids */
/* header menu */
@media (min-width:1024px){
#navi{border-top:1px solid #e3ece0;border-bottom:1px solid #e3ece0;background:#fff}
#navi .menu-header{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 2px;padding:6px 0}
#navi .menu-header > li:first-child{display:none}
#navi .menu-header > li:nth-child(2) > a .item-label,#navi .menu-header > li:nth-child(2) > a{font-size:0 !important}
#navi .menu-header > li:nth-child(2) > a::after{content:"特徴";font-size:14px;font-weight:700}
#navi .menu-header > li > a{padding:10px 11px !important;font-size:14px;font-weight:700;color:#1d2a22;position:relative;border-radius:8px;transition:background .2s,color .2s}
#navi .menu-header > li > a::before{content:"";position:absolute;left:11px;right:11px;bottom:4px;height:2px;background:#1a8f45;transform:scaleX(0);transition:transform .2s}
#navi .menu-header > li > a:hover{background:#f3faf1;color:#0f5f2e}
#navi .menu-header > li > a:hover::before{transform:scaleX(1)}
}
/* footer */
#footer{background:#0d4a24 !important;color:#cfe9c8;padding:48px 0 28px;margin-top:0}
#footer .footer-bottom{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
#footer .footer-bottom-logo,#footer .footer-bottom-content{float:none !important;width:100% !important;margin:0 !important;padding:0 !important}
#footer .footer-site-logo-image{max-height:56px;width:auto;background:#fff;border-radius:14px;padding:8px 14px}
#footer .navi-footer{float:none !important;width:100%;text-align:center}
#footer .menu-footer{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 6px;margin:0 0 20px;padding:0}
#footer .menu-footer > li{border:0 !important;margin:0}
#footer .menu-footer > li > a{display:block;padding:8px 14px;border-radius:999px;font-size:13px;color:#e7f5e3;background:rgba(255,255,255,.08);transition:background .2s}
#footer .menu-footer > li > a:hover{background:rgba(255,255,255,.2);color:#fff}
#footer .source-org,#footer .copyright{float:none !important;text-align:center !important;color:#9fc7a6;font-size:12px;border-top:1px solid rgba(255,255,255,.14);padding-top:18px}

@media (min-width:1024px){
#navi .menu-header > li > a{white-space:nowrap;padding:10px 8px !important;font-size:13px !important}
#navi .menu-header > li:nth-child(2) > a::after{font-size:13px;white-space:nowrap}
#navi .menu-header > li > a::before{left:8px;right:8px}
}
#footer .footer-bottom-logo{position:static !important;order:-1;display:flex;justify-content:center}
#footer .footer-bottom-logo .logo{position:static !important;margin:0 !important;float:none !important}
#footer .footer-bottom{position:static !important}

/* mobile bottom bar */
.mobile-footer-menu-buttons{background:#0f5f2e !important;border-top:0 !important;border-radius:18px 18px 0 0;box-shadow:0 -6px 20px rgba(13,74,36,.25);padding:6px 6px calc(6px + env(safe-area-inset-bottom));}
.mobile-footer-menu-buttons .menu-item,.mobile-footer-menu-buttons > li{border:0 !important;background:transparent !important}
.mobile-footer-menu-buttons a,.mobile-footer-menu-buttons .menu-button-in{color:#e7f5e3 !important}
.mobile-footer-menu-buttons .menu-icon{color:#fff !important}
.mobile-footer-menu-buttons .menu-caption{color:#e7f5e3 !important;font-weight:700;letter-spacing:.02em}
.mobile-footer-menu-buttons > li:nth-child(3) a{background:#d9651e;border-radius:14px;margin:-18px 4px 0;box-shadow:0 4px 12px rgba(0,0,0,.25)}

/* fix: 特徴 label alignment */
@media (min-width:1024px){
#navi .menu-header > li:nth-child(2) > a{font-size:13px !important;line-height:1.8 !important}
#navi .menu-header > li:nth-child(2) > a::after{content:none !important}
#navi .menu-header > li:nth-child(2) .item-label{font-size:0 !important;line-height:1.8}
#navi .menu-header > li:nth-child(2) .item-label::after{content:"特徴";font-size:13px;font-weight:700;white-space:nowrap}
}

/* hero refresh */
.fp-hero p.fp-hero-eyebrow{background:none !important;border:0 !important;border-radius:0 !important;padding:0 0 0 16px !important;border-left:4px solid #1a8f45 !important;font-size:.9rem !important;color:#45554b !important;margin-bottom:22px !important}
.fp-hero p.fp-hero-eyebrow .fp-hero-name{display:block;font-family:var(--fp-font-head);font-size:1.35rem;color:#0f5f2e;margin-top:2px}
.fp-hero .fp-buttons{display:grid !important;grid-template-columns:1fr 1fr;gap:12px !important;max-width:460px}
.fp-hero .fp-buttons .fp-btn-primary{grid-column:1 / -1}
.fp-hero .fp-buttons .wp-block-button,.fp-hero .fp-buttons .wp-block-button__link{width:100%}
.fp-hero .fp-buttons .wp-block-button__link{min-height:56px;padding:10px 18px}
.fp-hero .fp-buttons .fp-btn-primary .wp-block-button__link{min-height:64px;font-size:1.12rem}
.fp-hero .fp-hero-visual .fp-hero-photo{border-radius:32px !important}
.fp-hero .fp-hero-visual p.fp-hero-badge{right:auto !important;left:-16px;top:-18px !important;z-index:2;border-radius:18px;background:#d9651e !important;color:#fff !important;box-shadow:0 8px 20px rgba(217,101,30,.35)}
.fp-hero .fp-hero-visual p.fp-hero-badge strong{color:#fff !important}
/* work cards */
.fp-work-grid{gap:24px !important;align-items:stretch}
.fp-work-photos{aspect-ratio:16 / 10 !important;gap:3px !important}
.fp-work-card{border:1px solid var(--fp-line);box-shadow:var(--fp-shadow-sm) !important;transition:transform .2s,box-shadow .2s}
.fp-work-card:hover{transform:translateY(-3px);box-shadow:var(--fp-shadow) !important}
.fp-work-body{padding:24px 26px 28px !important}
.fp-section .fp-work-body h3{font-size:1.25rem !important}
.fp-work-catch{margin:2px 0 14px !important;font-size:.98rem}
.fp-work-body .fp-chips{gap:6px !important;margin-bottom:14px !important}
.fp-work-body .fp-chips li{background:#fff !important;border:1px solid var(--fp-green-200) !important;color:var(--fp-green-800) !important;padding:3px 12px !important;font-size:.82rem !important;font-weight:700;border-radius:999px}
.fp-work-card.fp-is-featured .fp-work-body{padding:36px 40px !important}
.fp-work-card.fp-is-featured .fp-work-photos{aspect-ratio:auto !important}
/* bottom bar: no protrusion */
.mobile-footer-menu-buttons > li:nth-child(3) a{margin:0 4px !important;box-shadow:none !important}

/* bottom bar: uniform buttons */
.mobile-footer-menu-buttons > li:nth-child(3) a{background:transparent !important;margin:0 !important;box-shadow:none !important;border-radius:0 !important}


/* ===== 会社案内内：採用情報カード（2026-10-12） ===== */
.fp-recruit-card{max-width:760px;margin:40px auto 0!important;padding:14px 20px;display:flex;align-items:center;gap:16px;background:#fff;border:1px solid #cfe3d5;border-left:5px solid #2a7f45;border-radius:10px;box-sizing:border-box}
.fp-recruit-card .fp-recruit-card__label{margin:0!important;flex:none;color:#2a7f45;font-weight:800;font-size:14px;letter-spacing:.08em}
.fp-recruit-card .fp-recruit-card__txt{margin:0!important;flex:1;min-width:0;font-size:14px;line-height:1.7;color:#333}
.fp-recruit-card .fp-recruit-card__more{margin:0!important;flex:none;font-size:14px;font-weight:700}
.fp-recruit-card .fp-recruit-card__more a{color:#2a7f45}
@media (max-width:600px){
.fp-recruit-card{flex-wrap:wrap;gap:4px;margin:32px 0 0!important}
.fp-recruit-card .fp-recruit-card__txt{flex-basis:100%}
.fp-recruit-card .fp-recruit-card__more{width:100%;text-align:right}
}