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

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

/*グローバルナビメニューの背景（トップページのみ）*/
.skin-grayish:not(.front-top-page) .header-container {
	background-color: var(--topHeaderNaviBgColor);
}

/*グローバルナビメニューのリンク文字*/
.skin-grayish :where(.navi-in, .navi-footer-in) a {
	color: #ffffff;
}

/*グローバルナビSNSアイコン*/
.skin-grayish #navi-in [class^="icon-"], .skin-grayish #navi-in [class*=" icon-"], .skin-grayish .menu-content .menu-drawer [class^="icon-"], .skin-grayish .menu-content .menu-drawer [class*=" icon-"] {
	color: #ffffff;
}

/*グローバルナビメニューの検索アイコン*/
.skin-grayish .navi-in .search-menu-icon span::before {
	color: #ffffff;
}

/*サブメニュー*/
.skin-grayish .navi-in>ul>li>.sub-menu {
	background-color: rgba(75, 55, 42, 0.4);
}

/*サイト名*/
.site-name-text-link {
	color: #ffffff;
}

/*サイト名（トップページのみ）*/
.front-top-page .site-name-text-link {
	color: var(--cocoon-text-color);
}

/*フッター著作権情報*/
.skin-grayish .copyright {
	opacity: 1;
	color: #ffffff;
}

/*フッターの背景色*/
.skin-grayish .footer {
	background-color: rgba(75, 55, 42, 0.5);
}

/*フッターのサイト名*/
#footer .site-name-text-link {
	color: #ffffff;
}

/* YouTube レスポンシブ化 */
/* YouTubeのサイズ変更 */
.video-container {
	max-width: 100%;
	margin: 0px auto;
}

.yt {
}

.yt iframe:where([src*="https://www.youtube.com/embed/"][width="560"][height="315"]) {
	aspect-ratio: 16 / 9;
	height: 100%;
	width: 100%;
}

/* Facebook レスポンシブ化 */
.facebook-wrapper {
  max-width: 100%;
}
.facebook-wrapper > .fb-page,
.facebook-wrapper iframe {
  width: 100% !important;
}

/* Googleマップ レスポンシブ化 */
.map-container {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9のアスペクト比を維持 */
}

.map-container iframe {
	aspect-ratio: 16 / 9;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
	/*必要ならばここにコードを書く*/
	
	/*グローバルナビの背景色と被るため便宜上*/
	.skin-grayish:not(.front-top-page) .header-container {
		background-color: transparent;
	}
	
	/*グローバルナビの背景色*/
	.skin-grayish.front-top-page .mobile-header-menu-buttons.mobile-menu-buttons {
		background-color: rgba(75,55,42,0.5);
	}
	
	/*ハンバーガーメニューアイコン*/
	.skin-grayish .mobile-menu-buttons .menu-button, .skin-grayish .mobile-menu-buttons .menu-button>a, .skin-grayish .sidebar-menu-content .sidebar-menu-close-button {
		color: #ffffff;
	}
	
}

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

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