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

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

/* PC用のスタイル */

/* Aile専用ヘッダー */
.aile-header-image {
  background-image: url('https://aile-zisakupc.com/wp-content/uploads/2026/06/c02d487f2b8489e3bd94764b9ac589f7.jpg'); /* 画像のパスを指定 */
  background-size: cover; /* 画像が領域を覆うようにする */
  background-position: center center; /* 画像の中央が常に表示されるようにする */
  height: 220px; /* ヘッダーの高さ */
  width: 100%; /* ヘッダーの幅 */
}

/* Aileサイドバー現在位置表示用 */
.toc li .current {/*現在位置*/
color: #333;/*文字色*/
padding: 6px 6px 6px;
background-color: #e3f2ff;/*背景色*/
}

/* Aileサイドバー見切れる対策 */
.widget-sidebar-scroll .toc-content {
  max-height: 800px; /* 目次の高さの上限を設定 */
  overflow-y: auto; /* 目次の長さが設定した目次の高さを超える場合はスクロールできるようにする */
}

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	
	/* Aile専用ヘッダー(モバイル向け) */
  .aile-header-image {
	background-image: url('https://aile-zisakupc.com/wp-content/uploads/2026/06/08bfba9d71dc797ecf0c0a0b25250fe6.png'); /* モバイル用の画像 */
    height: 140px; /* モバイルでは高さを小さくする */
    background-size: auto 220px; /* 幅は自動、高さは変わらず */
    background-position: center center; /* 中央部分を表示 */
  }

		
	/* Aile専用画像最大化ロジック(モバイル向け) */
	.aile-mobile-img-wrap {
	position: relative !important;
	display: inline-block !important;
	max-width: 100% !important;
	}

	.aile-mobile-img-wrap img {
	display: block !important;
	max-width: 100% !important;
	height: auto !important;
	}

	.aile-mobile-img-button {
	position: absolute !important;
	right: 8px !important;
	top: 8px !important;
	z-index: 9999 !important;
	padding: 7px 11px !important;
	border: none !important;
	border-radius: 999px !important;
	background: rgba(0, 0, 0, 0.75) !important;
	color: #fff !important;
	font-size: 12px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	}

	.aile-mobile-image-viewer {
	display: none;
	position: fixed !important;
	inset: 0 !important;
	z-index: 999999 !important;
	background: rgba(0, 0, 0, 0.92) !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
	}

	.aile-mobile-image-viewer.is-active {
	display: flex !important;
	}

	.aile-viewer-image {
	max-width: 94vw !important;
	max-height: 82vh !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	transition: transform 0.2s ease !important;
	}

	.aile-viewer-image.is-rotated {
	transform: rotate(90deg) !important;
	max-width: 82vh !important;
	max-height: 94vw !important;
	}

	.aile-viewer-close,
	.aile-viewer-rotate {
	position: fixed !important;
	z-index: 1000000 !important;
	border: none !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, 0.92) !important;
	color: #111 !important;
	font-size: 14px !important;
	line-height: 1 !important;
	padding: 10px 14px !important;
	cursor: pointer !important;
	}

	.aile-viewer-close {
	right: 14px !important;
	top: 14px !important;
	font-size: 22px !important;
	padding: 8px 13px !important;
	}

	.aile-viewer-rotate {
	left: 14px !important;
	top: 14px !important;
	}

	body.aile-viewer-open {
	overflow: hidden !important;
	touch-action: none !important;
	}
	

	/* 目次見切れる対策(モバイル向け) */
	/* Cocoon標準目次の本文干渉対策 */
	.article .toc,
	.entry-content .toc,
	#toc {
	display: block !important;
	position: relative !important;
	clear: both !important;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	margin: 2em 0 2.5em !important;
	padding: 1em 1.2em !important;
	}

	/* 目次の中身だけスクロールさせる */
	.article .toc-content,
	.entry-content .toc-content,
	#toc .toc-content {
	display: block !important;
	clear: both !important;
	float: none !important;
	max-height: 420px !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	box-sizing: border-box !important;
	}

	/* リスト部分のはみ出し防止 */
	.article .toc-content ol,
	.article .toc-content ul,
	.entry-content .toc-content ol,
	.entry-content .toc-content ul,
	#toc ol,
	#toc ul {
	display: block !important;
	position: static !important;
	float: none !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	overflow-wrap: anywhere !important;
	}

	/* 目次直後の本文が潜り込むのを防ぐ */
	.article .toc + *,
	.entry-content .toc + *,
	#toc + * {
	clear: both !important;
	margin-top: 2em !important;
	}
}

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