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

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


/*------------------------------------
コンテンツ最大幅無効
------------------------------------*/
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: initial;
}


/*------------------------------------
横幅いっぱいコンテンツ
------------------------------------*/
.full-width {
	margin: 0 calc(50% - 50vw);
}

.full-width.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 100%;
}


/*------------------------------------
header
------------------------------------*/


/*------------------------------------
main
------------------------------------*/
main {
	padding-bottom: 50px !important;
}

/*------------------------------------
footer
------------------------------------*/

#footer {
	position: relative;
	margin: 0;
}

#footer::before {
	content: "";
	position: absolute;
	top: -90px;
	width: 100%;
	height: 100px;
	background:
		url("https://gac-web.com/wp-content/uploads/2026/01/kuwa.png") no-repeat left 0 bottom 0 / auto 100%,
		url("https://gac-web.com/wp-content/uploads/2026/01/machine.png") no-repeat left 50px bottom 0 / auto 60%;
z-index: 1;
pointer-events: none;
}

#footer::after {
	content: "";
	position: absolute;
	top: -60px;
	width: 100%;
	height: 75px;
	background:
		url("https://gac-web.com/wp-content/uploads/2026/01/footer_bg2.png") no-repeat right 2% bottom 3px / auto 80%,
		url("https://gac-web.com/wp-content/uploads/2026/01/footer_bg1.png") repeat-x left 0 bottom 10px / auto 100%;
pointer-events: none;
}

#footer .footer-bottom {
	margin: 10px 0 18px;
}

#footer .footer-bottom .footer-bottom-logo img {
	height: 35px;
}

/*------------------------------------
モバイルメニュー
------------------------------------*/
.mobile-menu-buttons {
	background: #000;
	box-shadow: none;
	color: #fff;
}

.mobile-menu-buttons .menu-button > a {
	color: #fff;
}

.navi-menu-content {
	background: #000;
	color: #fff;
}

.navi-menu-close-button {
	display: none;
}

.menu-drawer {
	margin-top: 60px;
}

.menu-drawer .menu-item a {
	diplay: block;
	padding: 10px 5px;
	color: #fff;
}

/* 外部リンクにアイコンを追加するCSS */
.menu-drawer .menu-item a[target="_blank"]::after {
	content: "\f08e"; /* Font Awesomeの外部リンクアイコンのUnicode */
	font-family: FontAwesome; /* 使用するアイコンフォントの指定 */
	margin-left: 5px; /* テキストとの余白 */
	vertical-align: middle; /* 位置調整 */
}

.menu-drawer .menu-item a:hover {
	color: #f90;
	background: transparent;
}

.menu-drawer > .menu-item > a {
	font-weight: bold;
}

.menu-drawer .menu-item .sub-menu a {
	font-size: 15px;
}


/*------------------------------------
home
------------------------------------*/
.home .content {
	padding-top: 0;
}

.home main {
	padding-top: 0;
	border: 0;
}

.home .entry-content {
	margin-top: 0;
	margin-bottom: 3em;
}

/*タイトルと日時 HOMEでは不要なので消す*/
.home .entry-header {
	display: none;
}


/*メインアニメ*/
@keyframes rotateAnimation {
	from {
		transform: translateX(-50%) rotate(0deg);
	}
	to {
		transform: translateX(-50%) rotate(-360deg);
	}
}
@keyframes skyCycle {
	0% {
		background-color: #c1f0ff; /* 青空 */
	}
	30% {
		background-color: #c1f0ff; /* 青空 */
	}
	35% {
		background-color: #ffb347; /* 夕焼け */
	}
	60% {
		background-color: #ffb347; /* 夕焼け */
	}
	65% {
		background-color: #2c3e50; /* 夜 */
	}
	95% {
		background-color: #2c3e50; /* 夜 */
	}
	100% {
		background-color: #c1f0ff; /* 青空 */
	}
}

.home .mainanim {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	margin-bottom: 0;
	background: #c1f0ff;
	animation: skyCycle 20s infinite linear;
}

.home .mainanim .animmap {
	position: absolute;
	padding-top: 5%;
}

.home .mainanim .animmap img {
	display: block;
	position: relative;
	left: 50%;
	width: 180%;
	height: auto;
	max-width: initial !important;
	transform: translateX(-50%) rotate(0deg);
	animation: rotateAnimation 40s linear infinite;
}

.home .mainanim .animcloud {
	position: absolute;
	margin-top: 5%;
}

.home .mainanim .animcloud img {
	display: block;
	position: relative;
	left: 50%;
	width: 180%;
	height: auto;
	max-width: initial !important;
	transform: translateX(-50%) rotate(0deg);
	animation: rotateAnimation 150s linear infinite;
}

.home .mainanim .animchara {
	position: absolute;
	top: 30%;
	left: 50%;
	width: 14%;
	height: auto;
	transform: translateX(-50%);
	transform-origin: center bottom; /* 接地感 */
	animation: bikeIdle 0.3s infinite ease-in-out;
}

@keyframes bikeIdle {
	0%   { transform: translateX(-50%) translateY(0) rotate(0deg); }
	20%  { transform: translateX(-50%) translateY(1px) rotate(0.1deg); }
	40%  { transform: translateX(-50%) translateY(-1px) rotate(-0.1deg); }
	60%  { transform: translateX(-50%) translateY(1.5px) rotate(0.08deg); }
	80%  { transform: translateX(-50%) translateY(-1px) rotate(-0.08deg); }
	100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
}

.home .mainanim .animchara img {
	display: block;
}

.home .mainanim .logo_wave {
	display: flex;
	align-items: flex-end;
	position: absolute;
	top: 66%;
	left: 50%;
	width: 50%;
	max-width: 814px;
	transform: translateX(-50%);
}

.home .mainanim .logo_wave figure{
	margin: 0;
	animation: jump 1.2s infinite ease-in-out;
}

.home .mainanim .logo_wave img {
	display: block;
	width: 100%;
	height: auto;
}

/* 左 → 中 → 右 のディレイ */
.home .mainanim .logo_wave figure:nth-child(1) { animation-delay: 0s; }
.home .mainanim .logo_wave figure:nth-child(2) { animation-delay: 0.1s; }
.home .mainanim .logo_wave figure:nth-child(3) { animation-delay: 0.2s; }
.home .mainanim .logo_wave figure:nth-child(4) { animation-delay: 0.3s; }
.home .mainanim .logo_wave figure:nth-child(5) { animation-delay: 0.4s; }
.home .mainanim .logo_wave figure:nth-child(6) { animation-delay: 0.5s; }
.home .mainanim .logo_wave figure:nth-child(7) { animation-delay: 0.6s; }
.home .mainanim .logo_wave figure:nth-child(8) { animation-delay: 0.7s; }
.home .mainanim .logo_wave figure:nth-child(9) { animation-delay: 0.8s; }
.home .mainanim .logo_wave figure:nth-child(10) { animation-delay: 0.9s; }

@keyframes jump {
	0%   { transform: translateY(0); }
	15%  { transform: translateY(-30px); } /* 飛び上がる */
	30%  { transform: translateY(0); }     /* 着地 */
	100% { transform: translateY(0); }
}


.home .mainanim .message {
	position: absolute;
	top: 80%;
	left: 50%;
	width: 50%;
	max-width: 814px;
	padding: 10px;
	border-radius: 5px;
	border: solid 3px #fff;
	background: #000;
	background-clip: padding-box;
	line-height: 130%;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	color: #fff;
	transform: translateX(-50%);
}

/* スズメ */
.sparrow {
  position: absolute;
  top: 10%; /* 軌道の高さ */
  right: -120px;

  /* === スプライト設定 === */
  width: 120px;   /* ← 1コマの幅 */
  height: 90px;   /* ← 1コマの高さ */
  background-image: url("https://gac-web.com/wp-content/uploads/2026/01/sparrow.png");
  background-repeat: no-repeat;
  background-size: 480px 90px; /* 120px × 4コマ */

  /* アニメーション */
  animation:
    fly-move 15s linear infinite,
    fly-frames 0.3s steps(4) infinite;
}

/* 移動（右 → 左） */
@keyframes fly-move {
	0% {
		transform: translateX(0) translateY(0) scale(0.5, 0.5);
	}
	10% {
		transform: translateX(-50vw) translateY(-30px) scale(0.5, 0.5);
	}
	20% {
		transform: translateX(-100vw) translateY(15px) scale(0.5, 0.5);
	}
	30% {
		transform: translateX(-150vw) translateY(0) scale(0.5, 0.5);
	}
	100% {
		transform: translateX(-150vw) translateY(0) scale(0.5, 0.5);
	}
}

/* 羽ばたき（スプライト） */
@keyframes fly-frames {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -480px 0;
  }
}







/*見出し*/
.home .wp-block-heading {
	position: relative;
	width: 280px;
	margin: 0 auto;
	padding: 10px 20px;
	border-top: solid 2px black;
	border-bottom: solid 2px black;
	text-align: center;
	letter-spacing: 0.5em;
	color: #000;
}

.home .wp-block-heading:before, 
.home .wp-block-heading:after {
	content: '';
	position: absolute;
	top: -14px;
	width: 2px;
	height: calc(100% + 21px);
	background-color: black;
}

.home .wp-block-heading:after {
	top: -9px;
}

.home .wp-block-heading:before {
	left: 7px;
}

.home .wp-block-heading:after {
	right: 7px;
}

/*アバウト*/
.home .aboutbox .bb-profile {
	width: 96%;
	padding: 10px;
}

/*コラム*/
.home .columnlist {
	padding-top: 50px;
}

.home .columnlist ul {
	display: flex;
	width: 96%;
	margin: 20px auto 0;
	padding: 0 0 30px;
}

.home .columnlist ul li {
	width: 33.33%;
	margin: 20px 0 0 0;
	padding: 0.5%;
}

.home .columnlist ul li a {
	display: block;
	width: 100%;
	text-decoration: none;
	color: #fff;
}

.home .columnlist ul li a img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
}

.home .columnlist ul li .wp-block-latest-posts__post-title {
	margin-top: 5px;
}

.home .columnlist ul li .wp-block-latest-posts__post-date {
	text-align: right;
	font-size: 12px;
}

/*Xタイムライン*/
.home .xtimeline .wp-block-embed__wrapper {
	width: 96%;
	margin: 30px auto;
}

.home .xtimeline .wp-block-embed__wrapper .twitter-timeline {
	margin: 0 auto;
}

.home .xtimeline .wp-block-embed__wrapper a.twitter-timeline {
	display: block;
	text-align: center;
}



/*地面下側*/
.home .image-bottom img {
	display: block;
	width: 100%;
	height: auto;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1700px以上*/
@media screen and (min-width: 1700px){
	/*必要ならばここにコードを書く*/

/*------------------------------------
home
------------------------------------*/
	.home .mainanim .message {
		top: 77%
	}

}

/*1024px以上*/
@media screen and (min-width: 1024px){
	/*必要ならばここにコードを書く*/

/*------------------------------------
header
------------------------------------*/
	.header-container {
		position: fixed;
		top: 30px;
		width: 100%;
		padding: 0 20px;
		background: transparent !important;
		z-index: 10;
	}

/*site-name*/
	.header-container .header .site-name {
		display: block;
		height: 60px;
		padding: 0 30px;
		border-radius: 100px;
		background: #000;
		line-height: 60px;
		color: #fff;
		transition: all 0.2s ease-in;
	}

	.header-container .header .site-name img {
		max-height: 35px !important;
	}

/*navi*/
	.header-container .navi {
		background: transparent !important;
	}

	.header-container .navi-in > ul {
		justify-content: flex-end;
	}

	.header-container .navi-in > ul > .menu-item  a {
		background: #f9f9f9;
		color: #000 !important;
	}

	.header-container .navi-in > ul > .menu-item  a:hover {
		background: #000 !important;
		color: #fff !important;
	}

	.header-container .navi-in > ul > .menu-item:first-child > a {
		border-radius: 50px 0 0 50px;
	}

	.header-container .navi-in > ul > .menu-item:last-child > a {
		border-radius: 0 50px 50px 0;
	}

	.header-container .navi-in .sub-menu {
		overflow: hidden;
		border-radius: 5px;
		width: auto;
	}

	.content {
		margin-top: 0;
		padding-top: 120px;/*固定にしたヘッダー分 contentをずらす*/
	}

/* 外部リンクにアイコンを追加するCSS */
.menu-item a {
	align-items: center;
}
.menu-item a[target="_blank"]::after {
display: block;
    content: "\f08e"; /* Font Awesomeの外部リンクアイコンのUnicode */
    font-family: FontAwesome; /* 使用するアイコンフォントの指定 */
    margin-left: -30px; /* テキストとの余白 */
#    font-weight: 900; /* アイコンの太さ（必要に応じて） */
#    font-size: 0.8em; /* アイコンのサイズ */
    vertical-align: middle; /* 位置調整 */
}

/*------------------------------------
home
------------------------------------*/
	.home .columnlist ul {
		width: 75%;
	}

}

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

/*------------------------------------
header
------------------------------------*/
	.header-container {
		position: fixed;
		top: 30px;
		width: 100%;
		padding: 0 20px;
		background: transparent !important;
		z-index: 10;
	}

	.header-container-in {
		flex-direction: row !important;
	}

/*site-name*/
	.header-container .header .site-name {
		display: block;
		height: 60px;
		padding: 0 30px;
		border-radius: 100px;
		background: #000;
		line-height: 60px;
		color: #fff;
		transition: all 0.2s ease-in;
	}

	.header-container .header .site-name img {
		max-height: 35px !important;
	}

	.content {
		margin-top: 0;
		padding-top: 80px;/*固定にしたヘッダー分 contentをずらす*/
		background: #fff;
	}

	main {
		border: 0;
	}

/*------------------------------------
モバイルメニュー
------------------------------------*/

.menu-drawer {
	margin-top: 100px;
}

/*------------------------------------
home
------------------------------------*/
	.home .mainanim .logo_wave {
		top: 70%;
	}

	.home .mainanim .message {
		top: 84%;
		font-size: 15px;
	}
}

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

/*------------------------------------
header
------------------------------------*/
	.header-container {
		top: 20px;
	}

/*------------------------------------
home
------------------------------------*/
/*アニメ*/
	.home .mainanim .message {
		top: 84%;
		padding: 5px;
		font-size: 15px;
	}

/*見出し*/
	.home .wp-block-heading {
		width: 60%;
		margin-bottom: 40px;
	}

/*アバウト*/
	.home .aboutbox {
		padding-top: 30px !important;
	}

}

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

/*------------------------------------
header
------------------------------------*/
	.header-container {
		top: 10px;
		padding: 0 
	}

/*site-name*/
	.header {
		height: 40px;
		padding-left: 10px;
	}

	.header div.header-in {
		min-height: 40px;
	}

	.header-container .header .site-name {
		height: 30px;
		padding: 0 20px 0 20px;
		border-radius: 5px;
		line-height: 30px;
	}

	.header-container .header .site-name img {
		max-height: 20px !important;
	}

	.content {
		padding-top: 50px;/*固定にしたヘッダー分 contentをずらす*/
	}

	main {
		margin-top: 0 !important;
	}

	.entry-title{
		padding: 0.6em 0;
	}

/*------------------------------------
モバイルメニュー
------------------------------------*/

.menu-drawer {
	margin-top: 60px;
}

/*------------------------------------
home
------------------------------------*/
	.home .mainanim .logo_wave {
		top: 71%;
	}

	.home .mainanim .message {
		top: 86%;
		width: 80%;
		padding: 5px;
		border: solid 1px #fff;
		text-align: center;
		font-size: 10px;
	}

	@keyframes fly-move {
		0% {
			transform: translateX(0) translateY(0) scale(0.2, 0.2);
		}
		10% {
			transform: translateX(-40vw) translateY(-30px) scale(0.2, 0.2);
		}
		20% {
			transform: translateX(-80vw) translateY(15px) scale(0.2, 0.2);
		}
		30% {
			transform: translateX(-120vw) translateY(0) scale(0.2, 0.2);
		}
		100% {
			transform: translateX(-120vw) translateY(0) scale(0.2, 0.2);
		}
	}

	.home .aboutbox .bb-profile p {
		font-size: 15px;
	}
	.home .aboutbox .bb-profile p strong {
		font-size: 17px;
	}

	.home .columnlist ul {
		display: block;
		width: 90%;
	}

	.home .columnlist ul li {
		width: 100%;
		padding: 2%;
	}

}