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

/************************************
** 子テーマ用のスタイルを書く
************************************/
html {
  font-family: 'M PLUS Rounded 1c', sans-serif;
}


body {
	background: #fff !important;
}
main {
	padding: 36px 0 !important;
}
.section-title {
	font-family: 'M PLUS Rounded 1c', sans-serif;
}
.custom-hamburger,
#overlay-menu {
	display: none;
}
.sns-nav {
	display: flex;
	gap: 20px;
	padding-left: 10px;

	li {
		list-style-type: none
	}
	li a i {
		color: #000;
	}
}
.pc-nav {
	display: flex;
	text-align: center;
	padding: 10px 0;
	margin-right: 20px;
}

.pc-menu li {
	display: inline-block;
	margin: 0 15px;
}

.pc-menu a {
	text-decoration: none;
	color: #333;
	font-weight: bold;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size: 16px;
}

.pc-menu a:hover,
.sns-nav li a:hover i{
	color: #bfa27a;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: scale(1.02);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* PC用メニューのサブメニュー（ホバーで表示） */
.pc-menu li.menu-item-has-children {
	position: relative;
}

.pc-menu li.menu-item-has-children .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	padding: 10px 0;
	min-width: 160px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	z-index: 999;
}

.pc-menu li.menu-item-has-children:hover .sub-menu {
	display: block;
}

.pc-menu .sub-menu li {
	display: block;
	margin: 0;
	padding: 5px 20px;
}

.pc-menu .sub-menu li a {
	color: #333;
	font-size: 14px;
	text-decoration: none;
}

.pc-menu .sub-menu li a:hover {
	color: #bfa27a;
}

#header-container {
	box-shadow: 0 5px 10px 0 rgba(50, 50, 50, 0.06);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	background-color: #fff;
	transition: transform 0.4s ease, opacity 0.4s ease;
}
.header-container-in.hlt-top-menu .logo-header img {
	max-width: 300px;
}
#header-container.hide {
	transform: translateY(-100%);
	opacity: 0;
}

#header-container.show {
	transform: translateY(0);
	opacity: 1;
}

.search-menu-button {
	display: none !important;
}

.mobile-menu-buttons .menu-caption {
	display: none;
}

#mobile-search {
	display: none !important;
}

.navi-in>ul .caption-wrap>div {
	width: 100%;
	font-family: 'Oswald', 'Public Sans', 'Noto Sans JP', sans-serif !important;
	font-size: 13px;
	font-weight: 500;
	padding: 0.2rem 1rem;
}

.hlt-tm-right .navi-in>ul {
	justify-content: flex-end;
	gap: 20px;
}

.navi-in .has-icon {
	display: none;
}

.navi-in>ul li {
	width: fit-content;
}

.navi-in>ul .sub-menu li {
	width: fit-content;
}

.navi-menu-content {
	right: 0;
	left: inherit;
	-webkit-transform: translateX(105%);
	transform: translateX(105%);
}

#mobile-menu.active {
	right: 0;
}

.mobile-menu-buttons .menu-content {
	overflow: auto;
}

.page-title h1,
.archive-title {
	font-size: 2.4rem;
	font-weight: bold;
	background: linear-gradient(275deg, #20b1db, #0f6693);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
	letter-spacing: 2px;
	text-align: center;
	margin: 2rem 0;
	text-transform: uppercase;
	font-family: 'M PLUS Rounded 1c', sans-serif;
}
.ect-vertical-card {
	max-width: 1200px;
	margin: 0 auto;
}
.wrap {
	width: 100%;
}

.breadcrumb-block {
	background: #fff;
	margin-top: 60px;
}

.breadcrumb {
	background: #fff;
	margin: 20px auto;
	max-width: 1200px;
}

.content {
	margin: 0;
}

.site-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}
footer {
	background: #13394D !important;
}
.footer-in {
	margin: 1rem auto;
}
.footer-bottom {
	margin-top: 0;
}
.footer-social-icons {
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;

	a i {
		font-size: 2rem;
		color: #fff;
	}
}
.copyright {
	color: #fff;
}
.new-entry-card-date {
	display: inline !important;
}

.new-entry-card-update-date {
	display: none !important;
}

.cat-label {
	display: none !important;
}

#archive-title {
	font-size: 2.2rem;
	font-weight: 600;
	color: #3e3e3e;
	text-align: center;
	padding: 20px;
	margin-bottom: 40px;
	letter-spacing: 1px;
}

/* フォルダーアイコン（秋っぽいアクセント） */
#archive-title .fas {
	display: none;
}

#menu-toggle,
#overlay-menu {
	display: none !important;
}
.entry-card-wrap {
	transition: transform 0.3s;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {
	.pc-nav {
		display: none;
	}
	.overlay-nav .sns-nav {
		padding: 0;
		justify-content: center;
	}
	.sns-nav li a i {
		color: #fff;
	}
	#menu-toggle,
	#overlay-menu {
		display: flex !important;
	}

	.mobile-menu-buttons {
		display: flex;
		align-items: stretch;
		flex-direction: row-reverse;
	}

	.menu-content .menu-drawer {
		padding: 30px 1em 30px;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.menu-drawer a {
		color: var(--cocoon-text-color);
		text-decoration: none;
		padding: 6px;
		display: block;
		font-size: 1.2rem;
		text-align: center;
	}

	.custom-hamburger {
		display: block;
		font-size: 28px;
		z-index: 1100;
		color: #000000;
		padding: 8px 12px;
		border-radius: 5px;
		cursor: pointer;
	}

	/* ========== ハンバーガー ========== */
	.hamburger {
		z-index: 1100;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 30px;
		height: 24px;
		cursor: pointer;
	}

	.hamburger span {
		display: block;
		height: 3px;
		background: #000000;
		border-radius: 3px;
		transition: all 0.4s ease;
	}

	.hamburger.open span {
		background: #fff;
	}

	.hamburger.open span:nth-child(1) {
		transform: rotate(45deg) translate(5px, 5px);
	}

	.hamburger.open span:nth-child(2) {
		opacity: 0;
	}

	.hamburger.open span:nth-child(3) {
		transform: rotate(-45deg) translate(10px, -10px);
	}

	/* ========== オーバーレイ ========== */
	#overlay-menu {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		backdrop-filter: blur(10px);
		background: rgba(10, 10, 10, 0.85);
		opacity: 0;
		visibility: hidden;
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: opacity 0.5s ease, visibility 0.5s ease;
	}

	#overlay-menu.active {
		opacity: 1;
		visibility: visible;
	}

	/* 背景クリック領域 */
	.overlay-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
	}

	/* ========== メニュー本体 ========== */
	.overlay-nav {
		position: relative;
		z-index: 1001;
	}

	.overlay-nav ul {
		list-style: none;
		padding: 0;
		margin: 0;
		text-align: center;
	}

	.overlay-nav li {
		margin: 20px 0;
		opacity: 0;
		transform: translateY(20px);
		animation: fadeInUp 0.6s ease forwards;
		animation-delay: calc(var(--i) * 0.1s);
	}

	.overlay-nav a {
		font-size: 24px;
		color: #fff;
		text-decoration: none;
		font-family: 'M PLUS Rounded 1c', sans-serif;
	}

	.overlay-nav a:hover,
	.sns-nav li a:hover i {
		color: #ffd700;
	}

	/* サブメニュー：非表示時 */
	.overlay-nav .sub-menu {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.4s ease;
		padding-left: 0;
		margin-top: 10px;
	}

	/* 表示時 */
	.overlay-nav .sub-menu.open {
		max-height: 500px;
	}
	.overlay-nav .menu-item-has-children > a::after {
		content: ' ▼';
		font-size: 0.6em;
		position: absolute;
		top: 8px;
		right: -8px;
	}
	.overlay-nav .menu-item-has-children > a.active::after {
		content: ' ▲';
	}
	/* アニメーション */
	@keyframes fadeInUp {
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	.logo-menu-button img {
		margin-left: 20px;
		max-width: 270px;
	}
}

/*834px以下*/
@media screen and (max-width: 834px) {
	.page-title h1,
	.archive-title {
		font-size: 1.8rem !important;
	}
	.wp-block-heading {
		margin-bottom: 0.6rem;
	}
	.wp-block-heading span {
		font-size: 1.2rem;
	}
	main {
		padding: 0 0.4rem !important;
	}
}

/*480px以下*/
@media screen and (max-width: 480px) {
	/*必要ならばここにコードを書く*/
}
/*------------------------------------ hover*/
@media (hover: hover) {
	.entry-card-wrap:hover {
		transition: 0.3s;
		transform: scale(1.03);
	}
	a:hover {
		color: #f6a204 !important;
	}
}
