/* PC、タブレット、スマホ共通 */
.exhibition,
a.exhibition,
a[href="exhibition.html"],
li:has(> a.exhibition) {
    display: none;
    padding: 0;
    margin: 0;
    height: 0;
    width: 0;
    opacity: 0;
    visibility: hidden;
    /* 消す場合は「メニューの強制改行」を1370pxに変更 */
}

/* SEO用の非表示テキスト */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

 /*=======================================================================================================================================================================================================================================================================================================================*/ 
@media screen and (min-width : 1100px){
html		{overflow-y: scroll;}

body			{font-family:'Arial',
			'メイリオ',
			'Hiragino Kaku Gothic Pro',
			'sans-serif';			
			margin-left: auto;
			margin-right: auto;
			margin-top: 0px;
			background-color: #f9f9f8;
			padding-right: 50px;
			padding-left: 50px;
			min-height: 100vh;
    		display: flex;
    		flex-direction: column;
   			margin: 0;}

h1			{text-align: center;
			color: #696969;
			margin-top: 0px;
			margin-bottom: 70px;
			margin-left: 70px;}
		
a			{text-decoration: none;}

li			{list-style-type: none;}

#container			{width: 100%;
						max-width: 1200px;
						min-width: 920px;
						margin-left: auto;
						margin-right: auto;
						flex: 1;  /* 残りのスペースを全て使用 */
							display: flex;
							flex-direction: column;}
			
#content					{width: 100%;
							max-width: 1200px;
							min-width: 920px;
							padding-top: 0px;
							float: left;
							flex: 1;
							display: flex;
							flex-direction: column;}

footer		{width: 1200px;
			clear: both;
			margin: 0px auto 0px auto;
			padding-left: 15px;
			color: #555555;
			box-sizing: border-box;}
    		
#pad					{display: none;}
#pad-scroll			{display: none;}
#pad-logo			{display: none;}
#padnext				{display: none;}
#slide-menu			{display: none;}
#hamburger-button		{display: none;}
#tablet-logo		{display: none;}
 .slide-menu 	{display: none; /* PC表示では非表示 */	}




/*　テーブル　*/
table						{width: 100%;
							min-width: 920px;
							max-width: 1200px;
							margin: 0px 0px 0px 0px;
							box-sizing: border-box;}
table.illust			{margin-top:10px ;}
tr							{width: 100%;
							min-width: 920px;
							max-width: 1200px;
					box-sizing: border-box;}
td					{max-width: 300px;
					min-width: 210px;
					height: auto;
					padding: 10px 10px 10px 10px;
					margin: 0px;
					box-sizing: border-box;}
td.top 			{width: 25%; /* 4列の均等配分 */
					max-width: 300px;
					min-width: 210px;
					box-sizing: border-box;
					padding: 10px;}
					
#content img.top		{margin-top: 0px;}
#content img.design {margin: 20px auto 0px auto;}
#content img.design-right-top {margin: 280px auto 0px auto;}
td.design-top				{vertical-align: top;}


/* 最後のテーブルには線を表示しない */
table.illust:last-of-type {
  border-bottom: none;
}

/*　ホバーテキスト　*/
.image-container 			{position: relative;
  									overflow: hidden;}

.image-container img.ichiran {display: block;
												width: 100%;
												height: auto;
												transition: transform 0.1s ease;}
.image-container img.ichiran:not(.logo) {display: block;
												width: 100%;
												height: auto;
												transition: transform 0.1s ease;}

.image-container .hover-text 	{position: absolute;
					top: 0;
					left: 0;
  					right: 0;
  					bottom: 0;
  					background: rgba(0, 0, 0, 0.5);
  					color: white;
  					display: flex;
  					align-items: center;
  					justify-content: center;
  					opacity: 0;
  					transition: opacity 0.1s ease;
  					text-align: center;
  					padding: 20px;}

.hover-text p {margin: 0;
  					font-size: 16px;
  					font-weight: normal;}

/* ホバー時のエフェクト */
.image-container:hover .hover-text	 	{opacity: 1;}

					


#content table img			{width: 100%;
										max-width: 300px;
										min-width: 210px;
										height: auto;}	

/*　ナビ　*/

nav li				{margin: 4px 10px 0 10px;
						font-size: 17px;
						line-height: 21px;
						letter-spacing: 0.0em;
						text-align: left;}

/* メニューの改行制御 */
.separator {
    display: inline;
}

/* カテゴリーメニューのスタイル */
nav.category 	{margin-top: 70px; /* 上部メニューの下に配置 */
   						 margin-left: 10px; /* 左揃えのための余白 */
   						 width: 100%;}

nav.category ul.illust 	{display: flex; /* 横並びに */
									 justify-content: flex-start; /* 左揃え */
   									 gap: 20px; /* 項目間の間隔 */
    									position: static; /* position: fixedを解除 */
    									padding: 0;
    									margin: 0;
										width: 100%;
       									max-width: 1200px;
										list-style: none;
    									background: transparent; /* 背景を透明に */
    									box-shadow: none; /* 影を削除 */
    									clip-path: none; /* ジグザグを削除 */}

nav.category ul.illust li 		{margin: 0; /* マージンをリセット */}

nav.category ul.illust a 	{ color: ;
										 text-decoration: none;
    									 font-size: 16px;}

nav.category ul.illust a:hover {background-color: #2f2725; color: #e4e2d4;}

nav.pc img		{max-width: 300px;
						margin-top: 4px;
						margin-right: 10px;}			
nav.pc ul			{
						display: flex;
						position: fixed;
        				top: 0;
        				left: 0;
       					width: 100%;
						/* 背景色を透明から開始 */
        				background-color: rgba(187, 180, 163, 0);
        				padding: 20px 0 30px 50px; /* 下部にジグザグのためのスペース */
        				margin: 0px;
        				z-index: 1000;
        				 box-sizing: border-box;
        				box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        				/* ジグザグ線の追加 */
        clip-path: polygon(
            0 0,
            100% 0, 100% calc(100% - 10px),
            99% 100%, 98% calc(100% - 10px),
            97% 100%, 96% calc(100% - 10px),
            95% 100%, 94% calc(100% - 10px),
            93% 100%, 92% calc(100% - 10px),
            91% 100%, 90% calc(100% - 10px),
            89% 100%, 88% calc(100% - 10px),
            87% 100%, 86% calc(100% - 10px),
            85% 100%, 84% calc(100% - 10px),
            83% 100%, 82% calc(100% - 10px),
            81% 100%, 80% calc(100% - 10px),
            79% 100%, 78% calc(100% - 10px),
            77% 100%, 76% calc(100% - 10px),
            75% 100%, 74% calc(100% - 10px),
            73% 100%, 72% calc(100% - 10px),
            71% 100%, 70% calc(100% - 10px),
            69% 100%, 68% calc(100% - 10px),
            67% 100%, 66% calc(100% - 10px),
            65% 100%, 64% calc(100% - 10px),
            63% 100%, 62% calc(100% - 10px),
            61% 100%, 60% calc(100% - 10px),
            59% 100%, 58% calc(100% - 10px),
            57% 100%, 56% calc(100% - 10px),
            55% 100%, 54% calc(100% - 10px),
            53% 100%, 52% calc(100% - 10px),
            51% 100%, 50% calc(100% - 10px),
            49% 100%, 48% calc(100% - 10px),
            47% 100%, 46% calc(100% - 10px),
            45% 100%, 44% calc(100% - 10px),
            43% 100%, 42% calc(100% - 10px),
            41% 100%, 40% calc(100% - 10px),
            39% 100%, 38% calc(100% - 10px),
            37% 100%, 36% calc(100% - 10px),
            35% 100%, 34% calc(100% - 10px),
            33% 100%, 32% calc(100% - 10px),
            31% 100%, 30% calc(100% - 10px),
            29% 100%, 28% calc(100% - 10px),
            27% 100%, 26% calc(100% - 10px),
            25% 100%, 24% calc(100% - 10px),
            23% 100%, 22% calc(100% - 10px),
            21% 100%, 20% calc(100% - 10px),
            19% 100%, 18% calc(100% - 10px),
            17% 100%, 16% calc(100% - 10px),
            15% 100%, 14% calc(100% - 10px),
            13% 100%, 12% calc(100% - 10px),
            11% 100%, 10% calc(100% - 10px),
            9% 100%, 8% calc(100% - 10px),
            7% 100%, 6% calc(100% - 10px),
            5% 100%, 4% calc(100% - 10px),
            3% 100%, 2% calc(100% - 10px),
            1% 100%, 0 calc(100% - 10px) );}
            
#content nav ul.illust			{margin-top: 70px;
											margin-left: 3px;    }

nav a.works-hover					{background-color: #2f2725; color: #e4e2d4;}
nav a.personal-hover				{background-color: #2f2725; color: #e4e2d4;}
nav a.client-hover					{background-color: #2f2725; color: #e4e2d4;}
nav a.collaboration-hover		{background-color: #2f2725; color: #e4e2d4;}
nav a.book-hover						{background-color: #2f2725; color: #e4e2d4;}
nav a.exhibition-hover				{background-color: #2f2725; color: #e4e2d4;}
nav a.about-hover					{background-color: #2f2725; color: #e4e2d4;}
nav a.shop-hover						{background-color: #2f2725; color: #e4e2d4;}
nav a.contact-hover					{background-color: #2f2725; color: #e4e2d4;}
nav a.category-hover				{background-color: #d8d8d4; color: #2f2725;}
				
nav a				{color: #2f2725;
						text-decoration: none;}
nav a:hover		{background-color: #2f2725; color: #e4e2d4;}

#logo .logo	 {display: block;
						max-width: 300px; /* ロゴ画像用の別スタイル */
						margin-top: 4px;
    					margin-right: 10px;}
								
/* SNSアイコン */
.social-links 		{margin-left: auto;
						display: flex;
    					align-items: start;
    					gap: 22px;
    					padding-right: 50px;}

.social-icon 		{display: flex;
						align-items: center;
						width: 20px; /* アイコンと同じ幅に制限 */
    					height: 20px; /* アイコンと同じ高さに制限 */
    					padding: 0px 3px 4px 3px;}

.social-img 	{width: 20px;
    				height: 20px;
    			/* SVGの色を変更するためのフィルター */
   					 filter: invert(15%) sepia(6%) saturate(566%) hue-rotate(314deg) brightness(94%) contrast(91%); /* #2f2725の色 */
   					 transition: filter 0s ease;}

.social-icon:hover .social-img 	{/* ホバー時に#e4e2d4の色に変更 */
    				filter: invert(93%) sepia(8%) saturate(101%) hue-rotate(356deg) brightness(93%) contrast(91%);}
								

/* 作品詳細ページのスタイル */
.work-detail {
    width: 100%;
    max-width: 1200px;
    margin: 100px auto 60px;
    padding: 0 10px;
    box-sizing: border-box;
}

.work-detail .main-image {
    width: 95%;
    margin: 0 auto;
    padding: 0 100px; /* 左右に余白を追加 */
    box-sizing: border-box;
    position: relative;
}

.work-detail .main-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* 固定画像用のスタイル */
.work-detail .static-image {
  width: 95%;
    margin: 0 auto;
    padding: 0 100px; /* 左右に余白を追加 */
    box-sizing: border-box;
    position: relative;
}

.work-detail .static-image img {
  width: 100%;
  height: auto;
  display: block;
}

.static-image figcaption {
  margin: 20px 0;
  padding: 0;
  color: #555555;
  width: 100%;
}

/* 縦長画像用のスタイル */
.work-detail .main-image img.portrait {
    max-height: 80vh; /* ビューポートの高さの85%に制限 */
    width: auto;
    max-width: 100%; /* 横幅が溢れないように */
    margin: 0 auto; /* 中央揃え */
}

.portrait-container {
  display: block;
  text-align: center;
  width: 100%;
  position: relative;
}

#portrait-image {
  display: inline-block;
  max-height: 80vh;
  width: auto;
}

#portrait-caption {
  display: block;
  text-align: left;
  margin-top: 20px;
}

.work-detail figcaption {
    margin: 0 0 20px 0;
    padding: 0;
    color: #555555;
    width: 100%;
}

.work-detail h1 {
    font-size: 24px;
    margin: 20px 0 10px 0;
    color: #2f2725;
}

.work-detail .description {
    font-size: 16px;
    line-height: 1.6;
    margin: 15px 0;
}

.work-detail .specs {
    font-size: 14px;
    line-height: 1.5;
    color: #555555;
}

.additional-images {
    width: 100%;
    max-width: 1200px;
    margin: 0px auto 0;
    padding: 0 10px;
    box-sizing: border-box;
}

.additional-images figure {
    width: 95%;
    margin: 0 auto;
    padding: 0 100px; /* 左右に余白を追加 */
    box-sizing: border-box;
    position: relative;
}

.additional-images img {
    width: 70%;
    height: auto;
    display: block;
}

.additional-images figcaption {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
}

/* すべてのfigcaptionを左揃えに固定 */
figcaption, figure figcaption, .main-image figcaption, 
.work-detail figcaption, .work-detail .main-image figcaption {
  text-align: left !important; /* 最優先で左揃えを適用 */
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* テキスト中央揃えをコンテナレベルではなく、画像要素のみに適用 */
.work-detail .main-image, .static-image, .additional-images figure {
  text-align: center; /* 画像コンテナは中央揃え */
}

.work-detail .main-image img, .static-image img {
  margin: 0 auto; /* 画像自体も中央揃え */
}

/* portraitクラスのあるfigcaptionの特別対応 */
.portrait-container figcaption {
  text-align: left !important;
  display: inline-block;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* サムネイルギャラリー用のスタイル */
.thumbnail-gallery {
  margin-top: 30px;
  width: 100%;
}

.gallery-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px;
  font-size: 0;
}

.gallery-item {
  width: calc(25% - 15px); /* 4つまで並ぶようにする */
  margin-bottom: 0px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.thumbnail {
  width: 100%;
  height: auto;
  display: block;
}

/* 絵本ページのスタイル */
table.book {
    width: 100%;
    max-width: 1200px;
    margin: 100px auto 0 auto;
    border-collapse: collapse;
    table-layout: fixed;
}

/* 2番目のテーブル（カテゴリーの後）のマージン調整 */
nav.category-pc + table.book {
    margin-top: 10px;  /* または任意のpx値（例：margin-top: 20px;） */
}

/* カテゴリーナビのマージン調整 */
table.book + nav.category-pc {
    margin-top: 50px;  /* または任意のpx値 */
}

nav.category-pc 	{margin-top: 100px; /* 上部メニューの下に配置 */
   						 margin-left: 10px; /* 左揃えのための余白 */
   						 width: 100%;}

nav.category-pc ul.illust 	{
	display: flex; /* 横並びに */
	justify-content: flex-start; /* 左揃え */
    padding: 0;
	margin: 0px 0px -10px 0px;
	width: 100%;
	max-width: 1200px;
	list-style: none;
}

nav.category-pc ul.illust li {
	margin: 0; /* マージンをリセット */
}

nav.category-pc ul.illust a { 
	color: ;
	text-decoration: none;
	font-size: 16px;}

nav.category-pc ul.illust a:hover	{background-color: #d8d8d4; color: #2f2725;}

 /*  pc用、コラボのカテゴリ  */
#content nav.category-collabo-pc 	{
	margin-top: 0px; /* 既存の値 */
    margin-left: 10px; /* 既存の値 */
    margin-bottom: 0px; /* 追加：下マージンを0に */
    width: 100%;;}
   						 				
#content nav.category-collabo-pc ul.illust 	{
	margin: 30px 0px 0px 0px; /* 既存の値 */
    padding: 0;
    padding-bottom: 0px; /* 追加：下パディングを0に */}

#content nav.category-collabo-pc ul.illust a:hover	{background-color: #d8d8d4; color: #2f2725;}
																	
#content nav.category-collabo-pc li.illust 	{font-size: 16px;
																	line-height: 21px;
																	margin: 0 0 0 2px;}

#content nav.category-collabo-pc + table.illust {
    margin-top: 0px; /* 追加：テーブルの上マージンを0に */
    padding-top: 0px; /* 追加：テーブルの上パディングを0に */
}

.book-col {
    width: 25%;
    padding: 10px;
    vertical-align: top;
    box-sizing: border-box;
}

.book-item {
    margin-bottom: 20px;
    width: 100%;
}

.book-item:last-child {
    margin-bottom: 0;
}

.book-item .image-container {
    width: 100%;
    margin: 0;
}

.book-item .image-container img {
    width: 100%;
    height: auto;
    display: block;
}

 /*  pc用、コラボのカテゴリ  */
#content nav.category-book 	{
	margin-top: 0px; /* 既存の値 */
    margin-left: 10px; /* 既存の値 */
    margin-bottom: 0px; /* 追加：下マージンを0に */
    width: 100%;;}
   						 				
#content nav.category-book ul.illust 	{
	margin: 30px 0px 0px 0px; /* 既存の値 */
    padding: 0;
    padding-bottom: 0px; /* 追加：下パディングを0に */}

#content nav.category-book ul.illust a:hover	{background-color: #d8d8d4; color: #2f2725;}
																	
#content nav.category-book li.illust 	{font-size: 16px;
																	line-height: 21px;
																	margin: 0 0 0 2px;}

#content nav.category-book + table.book {
    margin-top: 0px; /* 追加：テーブルの上マージンを0に */
    padding-top: 0px; /* 追加：テーブルの上パディングを0に */
}

/* Safariの×印を非表示（空のgallery-itemを隠す） */
.gallery-item:empty {
  display: none !important;
}

/* 念のため、空のgallery-rowも非表示 */
.gallery-row:empty {
  display: none !important;
}

/*　アバウトページ　*/
.about-content {
    width: 100%;
    max-width: 900px;
    margin: 150px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
}

.about-content section {
    margin-bottom: 50px;
}

.about-content h2 {
	display: inline;
    font-size: 17px;
    margin: 0 0 0;
    padding-bottom: 0px;
	font-weight: normal;
    color: #2f2725;
    text-align: left;
    background-color: #d8d8d4;
    
    }


.about-content p {
    text-align: left;  /* 左揃えに変更 */
    padding-top: 10px;
    line-height: 1.5;
    margin: 0;
    color: #555555;
    font-size: 15px;
}

/* プロフィール画像とテキストのレイアウト */
.profile-content {
  display: flex;
  margin-bottom: 30px;
  align-items: flex-end; /* 要素を下揃えにする */
}

.author-image {
  margin-right: 30px;
  flex-shrink: 0;
}

.author-image img {
  width: 180px;
  height: auto;
  display: block;
}

.profile-text {
  flex: 1;
  padding-bottom: 20px; /* 微調整用のパディング */
}

/* 年と内容の間にスペースを入れる */
.about-content p br {
    margin-bottom: 15px;
    display: block;
}

.history-list {
    text-align: left;
}

.year {
    display: inline-block;
    width: 4em; /* 年の幅を固定 */
}

.year2 {
    display: inline-block;
    width: 3.3em; /* 年の幅を固定 */
}

.history-list .sp-only  {
    display: none;
}
    
/* コンタクトフォームのスタイル */
.contact-form {
    width: 100%;
    max-width: 800px;
    margin: 150px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
}

.contact-form p {
    text-align: left;  /* 左揃えに変更 */
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.5;
    margin: 0;
    color: #555555;
    font-size: 15px;
}

.form-group {
    margin-bottom: 30px;
}

.form-group label {
    display: inline;
    margin-bottom: 10px;
    color: #2f2725;
    background-color: #d8d8d4;
    font-size: 16px;
    }
    


.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    background-color: #fff;
    font-family: 'Arial', 'メイリオ', 'Hiragino Kaku Gothic Pro', 'sans-serif';
    font-size: 16px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #bbb;
}

.form-group textarea {
    height: 200px;
    resize: vertical;
    font-family: 'Arial', 'メイリオ', 'Hiragino Kaku Gothic Pro', 'sans-serif';
    font-size: 16px;
}

.submit-button {
    display: block;
    width: 200px;
    margin: 40px auto 0;
    padding: 15px;
    background-color: #2f2725;
    color: #e4e2d4;
    border: none;

    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.s;
}

.submit-button:hover {
    background-color: #bbb4a3;
}

.privacy-policy {
    margin: 20px 0;
    text-align: center;
}

.checkbox-container {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    margin-right: 15px;
    cursor: pointer;
}

.policy-link {
    color: #2f2725;
    text-decoration: underline;
}

p .email	{background-color: #d8d8d4;
				color: #2f2725;}
	




 /*=======================================================================================================================================================================================================================================================================================================================*/ 
 /* レスポンシブ対応 */
@media screen and (max-width: 1100px) {
.social-links 		{padding-right: 15px;}
}
 
/*=======================================================================================================================================================================================================================================================================================================================*/ 
 /* メニューの強制改行 */
@media screen and (max-width: 1250px) {
.separator {
        display: none;
    }
    
nav.pc li a {
        display: inline-block;
        margin-right: 5px;
        margin-left: 8px;
    }
    
    .en, .jp {
        display: block; /* 強制的に改行 */
        padding: 0; /* 上下の余白 */
    }
    
    /* 英語と日本語の間に空白を追加 */
    .en {
        margin-right: 4px;
    }
    
    .jp {
        margin-left: 4px;
    }
    
.social-links 		{margin-left: auto;
						display: flex;
    					align-items: start;
    					gap: 5px;
    					padding-right: 50px;}

.social-icon 		{display: flex;
						align-items: center;
						width: 20px; /* アイコンと同じ幅に制限 */
    					height: 20px; /* アイコンと同じ高さに制限 */
    					padding: 0px 3px 8px 3px;}

}
}
/*=======================================================================================================================================================================================================================================================================================================================*/
/* レスポンシブ設定 - タブレット・スマホ共通 */
@media screen and (max-width: 1099px) {
    /* 基本設定 */
body			{font-family:'Arial',
			'メイリオ',
			'Hiragino Kaku Gothic Pro',
			'sans-serif';
			
			margin-left: auto;
			margin-right: auto;
			margin-top: 0px;
			background-color: #f9f9f8;
			padding-right: 0px;
			padding-left: 0px;
			padding-top: 10px;
			width: 100%;
			box-sizing: border-box;
			min-height: 100vh;
    		display: flex;
    		flex-direction: column;
   			margin: 0;}

h1			{text-align: center;
			color: #696969;
			margin-top: 0px;
			margin-bottom: 70px;
			margin-left: 70px;}
		
a			{text-decoration: none;}

li			{list-style-type: none;}  

footer {
        width: 100%;
        margin-top: auto;
        padding: 15px;
        box-sizing: border-box;
    }    

    /* メニュー関連 */
    nav.pc ul {
        display: none;
    }

.exhibition		{display: none}  /* 展示ページ無効化 */
    
    /* アニメーション無効化 */
    .floating-container,
    .ship-container,
    .peek-container,
    .peek-container2,
    .airplane-container	 {display: none;}

 /* 基本コンテナ設定 */
    #container {
        width: 100%;
        min-width: auto;
        max-width: 100%;
        margin: 0;
        padding: 0px;
        box-sizing: border-box;
        flex: 1;  /* 残りのスペースを全て使用 */
        display: flex;
		 flex-direction: column;
        
    }

    #content {
        width: 100%;
        min-width: auto;
        max-width: 100%;
        padding: 0;
        margin: 0;
        float: none;
    }
    
#content nav.category		{display: none;}

 /* テーブル設定 */
table, table.illust {
        width: 100%;
        min-width: auto;
        max-width: 100%;
        margin: 0;
        padding: 2.5px;
        box-sizing: border-box;
        table-layout: fixed;
    }

    tr {
        width: 100%;
        min-width: auto;
        max-width: 100%;
        display: table-row;
    }

    td, td.top {
        width: 25%;
        min-width: auto;
        max-width: 25%;
        box-sizing: border-box;
        vertical-align: top;
    }

    /* 画像設定 */
    .image-container {
        width: 100%;
        position: relative;
    }

    .image-container img.ichiran,
    img.ichiran,
    #content img.ichiran,
    #content table img {
        width: 100%;
        height: auto;
        min-width: auto;
        max-width: 100%;
    }
    
/* サムネイルギャラリー用のスタイル */
.thumbnail-gallery {
  margin-top: 30px;
  padding: 0 7px;
}

.gallery-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 0;
}

.gallery-item {
  width: 24.3%; /* 4枚並べる場合 */
  margin-bottom: 7px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.gallery-item:hover {
}

.thumbnail {
  width: 100%;
  height: auto;
  display: block;
}

/* Safariの×印を非表示（空のgallery-itemを隠す） */
.gallery-item:empty {
  display: none !important;
}

/* 念のため、空のgallery-rowも非表示 */
.gallery-row:empty {
  display: none !important;
}

    /* ハンバーガーメニュー */
.hamburger-menu 	{display: block;
								position: fixed;
								width: 30px;
								height: 24px;
								z-index: 2000; /* より大きな値に設定 */
								cursor: pointer;
								background: none;
								pointer-events: auto; /* クリックを確実に有効化 */}

    .hamburger-menu span {
        display: block;
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: #2f2725;
        transition: .3s ease-in-out;
        pointer-events: none; /* spanにはクリックイベントを無効化 */
    }
    
    /* 透明オーバーレイのスタイル */
#menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; /* 完全に透明 */
    z-index: 1500; /* スライドメニュー(1900)より下、通常コンテンツより上 */
    display: none; /* 初期状態は非表示 */
}

/* オーバーレイがアクティブ時 */
#menu-overlay.active {
    display: block;
}
    
.hamburger-menu::before {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  /* 背景色と境界線を透明に */
  background-color: transparent;
  z-index: 1;
}

    .hamburger-menu span:nth-child(1) {
        top: 0;
    }

    .hamburger-menu span:nth-child(2) {
        top: 11px;
    }

    .hamburger-menu span:nth-child(3) {
        bottom: 0;
    }

    /* ハンバーガーメニューがアクティブ時 */
.hamburger-menu.active span:nth-child(1) 		{top: 11px;
																		transform: rotate(-45deg);}

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

    .hamburger-menu.active span:nth-child(3) {
        bottom: 11px;
        transform: rotate(45deg);
    }

    /* スライドメニュー */
.slide-menu 		{display: block;
						position: fixed;
						top: -100vh; /* 画面外に配置 */
						left: 0;
						width: 100%;
						height: 97vh;
						background-color: #bbb4a3;
						transition: transform 0.3s ease;
						z-index: 1900;
						padding-top: 0px;
						transform: translateY(-100%);}

/* スライドメニューアクティブ時 */
    .slide-menu.active {
        transform: translateY(100%);
    }
    
    /* スライドメニューの内容のスタイリング */
.slide-menu ul 		{list-style: none;
							padding: 0;
							margin: 0;
							text-align: right;}



.slide-menu ul li a {
    color: #2f2725;
    text-decoration: none;
    font-size: 18px;
}

.slide-menu ul li a.works-hover				{background-color: #2f2725; color: #e4e2d4;}
.slide-menu ul li a.personal-hover			{background-color: #2f2725; color: #e4e2d4;}
.slide-menu ul li a.client-hover					{background-color: #2f2725; color: #e4e2d4;}
.slide-menu ul li a.collaboration-hover		{background-color: #2f2725; color: #e4e2d4;}
.slide-menu ul li a.book-hover					{background-color: #2f2725; color: #e4e2d4;}
.slide-menu ul li a.exhibition-hover			{background-color: #2f2725; color: #e4e2d4;}
.slide-menu ul li a.about-hover				{background-color: #2f2725; color: #e4e2d4;}
.slide-menu ul li a.shop-hover					{background-color: #2f2725; color: #e4e2d4;}
.slide-menu ul li a.contact-hover				{background-color: #2f2725; color: #e4e2d4;}

#slide-category			{margin-top: -15px;}
.slide-menu ul #slide-category li 	{margin: 10px 17px;
													padding: 0px;}
#slide-category li.illust::after {
    content: " ─┘";
    font-weight: 200;        /* 細いウェイト */
    font-size: 0.8em;       /* 少し小さく */
    color: #2f2725; 
    margin-left: 4px;        /* テキストとの間隔 */
    margin-right: 4px
}

nav.category 	{margin-top: 30px; /* 上部メニューの下に配置 */
   						 width: 100%;}

nav.category ul.illust 	{display: flex; /* 横並びに */
									 justify-content: flex-start; /* 左揃え */
   									 gap: 20px; /* 項目間の間隔 */
    									position: static; /* position: fixedを解除 */
    									padding: 0;
    									margin: 0;
										width: 100%;
       									max-width: 1200px;
										list-style: none;
    									background: transparent; /* 背景を透明に */
    									box-shadow: none; /* 影を削除 */
    									clip-path: none; /* ジグザグを削除 */}

nav.category ul.illust li 		{margin: 0; /* マージンをリセット */}

nav.category ul.illust a 	{ color: ;
										 text-decoration: none;
    									 font-size: 16px;}

#tablet-logo ul li a.works-hover					{background-color: #2f2725; color: #e4e2d4;}
#tablet-logo ul li a.personal-hover				{background-color: #2f2725; color: #e4e2d4;}
#tablet-logo ul li a.client-hover						{background-color: #2f2725; color: #e4e2d4;}
#tablet-logo ul li a.collaboration-hover			{background-color: #2f2725; color: #e4e2d4;}
#tablet-logo ul li a.book-hover						{background-color: #2f2725; color: #e4e2d4;}
#tablet-logo ul li a.exhibition-hover				{background-color: #2f2725; color: #e4e2d4;}
#tablet-logo ul li a.about-hover					{background-color: #2f2725; color: #e4e2d4;}
#tablet-logo ul li a.shop-hover						{background-color: #2f2725; color: #e4e2d4;}
#tablet-logo ul li a.contact-hover					{background-color: #2f2725; color: #e4e2d4;}
ul li a.category-hover				{background-color: #d8d8d4; color: #2f2725;}

#tablet-logo img		{max-width: 300px;
								margin-top: 4px;
								margin-right: 10px;
								margin-left: 15px;}	

#tablet-logo ul	{padding-inline-start: 0px;}
						
#tablet-logo .logo	 	{width: 50%; /* ロゴ画像用の別スタイル */
								margin-top: 10px;
    							margin-right: 10px;}

#tablet-logo a	{}

    					
/* SNSアイコンのスタイリング */
.slide-menu .social-links {
    position: absolute;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 30px;
    box-sizing: border-box;
}

.slide-menu .social-links a.social-icon {
    padding: 0;
    background-color: transparent;
}

.slide-menu .social-links .social-img {
    width: 20px;
    height: 20px;
    filter: invert(15%) sepia(6%) saturate(566%) hue-rotate(314deg) brightness(94%) contrast(91%);
}

/* アバウトページ */
.about-content h2 {
        background-color: #d8d8d4; 
        color: #2f2725;
    }
    
.profile-content {
    flex-direction: column;
  }
  
  .author-image {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .author-image img {
    width: 150px;
  }

    /* ホバーテキストの調整 */
    .hover-text {
        display: none;
    }

nav.category-pc 	{margin-top: 30px; /* 上部メニューの下に配置 */
   						 margin-left: 10px; /* 左揃えのための余白 */
   						 width: 100%;}

nav.category-pc ul.illust 	{
	display: flex; /* 横並びに */
	justify-content: flex-start; /* 左揃え */
    padding: 0;
	margin: 0px 0px -10px 0px;
	width: 100%;
	max-width: 1200px;
	list-style: none;
}

nav.category-pc ul.illust li {
	margin: 0; /* マージンをリセット */
}

nav.category-pc ul.illust a { 
	text-decoration: none;
	font-size: 16px;
}

nav.category-pc ul.illust a:hover	{background-color: #d8d8d4; color: #2f2725;}

 /*  コラボのカテゴリ  */
#content nav.category-collabo-pc 	{
	margin-top: 25px; /* 既存の値 */
    margin-left: 5px; /* 既存の値 */
    margin-bottom: 0px; /* 追加：下マージンを0に */
    width: 90%;;}
   						 				
#content nav.category-collabo-pc ul.illust 	{
	margin: 10px 0px 0px 0px; /* 既存の値 */
    padding: 0;
    padding-bottom: 0px; /* 追加：下パディングを0に */}

#content nav.category-collabo-pc ul.illust a:hover	{background-color: #d8d8d4; color: #2f2725;}
																	
#content nav.category-collabo-pc li.illust 	{font-size: 16px;
																	line-height: 21px;
																	margin: 0;}

#content nav.category-collabo-pc + table.illust {
    margin-top: 0px; /* 追加：テーブルの上マージンを0に */
    padding-top: 0px; /* 追加：テーブルの上パディングを0に */
}

 /* 絵本ページのカテゴリ  */
#content nav.category-book 	{
	margin-top: 25px; /* 既存の値 */
    margin-left: 5px; /* 既存の値 */
    margin-bottom: 0px; /* 追加：下マージンを0に */
    width: 90%;;}
   						 				
#content nav.category-book ul.illust 	{
	margin: 10px 0px 0px 0px; /* 既存の値 */
    padding: 0;
    padding-bottom: 0px; /* 追加：下パディングを0に */}

#content nav.category-book ul.illust a:hover	{background-color: #d8d8d4; color: #2f2725;}
																	
#content nav.category-book li.illust 	{font-size: 16px;
																	line-height: 21px;
																	margin: 0;}

#content nav.category-book + table.book {
    margin-top: 0px; /* 追加：テーブルの上マージンを0に */
    padding-top: 0px; /* 追加：テーブルの上パディングを0に */
}

/* 2番目のテーブル（カテゴリーの後）のマージン調整 */
nav.category-book + table.book {
    margin-top: 0px;  /* または任意のpx値（例：margin-top: 20px;） */
}

/* カテゴリーナビのマージン調整 */
table.book + nav.category-book {
    margin-top: 0px;  /* または任意のpx値 */
}

/* コンタクトフォームのスタイル */
.contact-form {
    width: 100%;
    max-width: 800px;
    margin:50px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
}

.contact-form p {
    text-align: left;  /* 左揃えに変更 */
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 1.5;
    margin: 0;
    color: #555555;
    font-size: 14px;
}

.form-group {
    margin-bottom: 30px;
}

.form-group label {
    display: inline;
    margin-bottom: 10px;
    color: #2f2725;
    background-color: #d8d8d4;
    font-size: 16px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    background-color: #fff;
    font-family: 'Arial', 'メイリオ', 'Hiragino Kaku Gothic Pro', 'sans-serif';
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #bbb;
}

.form-group textarea {
    height: 200px;
    resize: vertical;
    font-family: 'Arial', 'メイリオ', 'Hiragino Kaku Gothic Pro', 'sans-serif';
    font-size: 16px;
}

.submit-button {
    display: block;
    width: 200px;
    margin: 40px auto 0;
    padding: 15px;
    background-color: #2f2725;
    color: #e4e2d4;
    border: none;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.s;
}

.submit-button:hover {
    background-color: #bbb4a3;
}

.privacy-policy {
    margin: 20px 0;
    text-align: center;
}

.checkbox-container {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    margin-right: 15px;
    cursor: pointer;
}

.policy-link {
    color: #2f2725;
    text-decoration: underline;
}
p .email	{background-color: #d8d8d4;
				color: #2f2725;}

#to-top {
    display: none !important;
  }

/*=======================================================================================================================================================================================================================================================================================================================*/
/* タブレット専用*/
@media screen and (max-width: 1099px) and (min-width: 500px) {
td.top, td 		{padding: 2.5px;}
table, table.illust 	{padding: 20px 2.5px 2.5px 2.5px;}
    
    /* ハンバーガーメニュー */
.hamburger-menu 	{top: 30px;
								right: 30px; }   

    /* スライドメニューの内容のスタイリング */
.slide-menu-content {
    padding: 20px;
    margin-top: 120px;
    height: calc(100% - 120px); /* 高さを設定 */
    position: relative; /* 子要素の絶対配置の基準に */
    display: flex;
    flex-direction: column;}

.slide-menu ul li 	{margin: 20px 0;
							padding: 10px;}
    
.slide-menu {
        width: 100%;
    }
    
.slide-menu .social-links {
    bottom: 5vh; /* 下からの距離 */
        padding-right: 30px;
    }   


/* 作品詳細ページのスタイル */
    .work-detail {
        width: 100%;
        margin-top: 80px;
        padding: 0 ;
        box-sizing: border-box;
    }

    .work-detail .main-image {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .work-detail .main-image img {
        width: 100%;
        height: auto;
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }

/* 固定画像用のスタイル */
.work-detail .static-image {
  		width: 100%;
        margin: 0;
        padding: 0;
}

.work-detail .static-image img {
  		width: 100%;
        height: auto;
        max-width: 100%;
        display: block;
        margin: 0 auto;
}

.static-image figcaption {
  		margin: 0 0 30px 0;
        margin: 0;
}

.work-detail figcaption {
        margin: 0 0 30px 0;
        padding: 0 10px;
    }

    .work-detail h1 {
        font-size: 22px;
        margin: 20px 0 0 0;
        text-align: left;
        color: #2f2725;
        letter-spacing: 0.05em;
    }

    .work-detail .description {
        font-size: 15px;
        line-height: 1.8;
        margin: 0 0 10px 0;
    }

    .work-detail .specs {
        font-size: 13px;
        line-height: 1.5;
        color: #555555;
        margin: 0 0 20px 0;
    }

    .additional-images {
        width: 100%;
        margin-top: 30px;
    }

    .additional-images figure {
        width: 70%;
        margin: 20px 0;
    }

    .additional-images img {
        width: 100%;
        height: auto;
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }

    .additional-images figcaption {
        margin-top: 10px;
        font-size: 13px;
        color: #666;
        padding: 0 10px;}
       

/* 絵本ページ */        
.book-col {
        padding: 2.5px;
    }
    .book-item {
        margin-bottom: 5px;
    }

 footer {
        width: 100%;
       	clear: both;
        min-width: auto;
        box-sizing: border-box;
        margin: auto auto 0px auto;
        padding: 15px 15px 0px 10px;
       	color: #555555;
    }
    
/* アバウトページ */  
.about-content {
        margin-top: 20px;
        padding: 0 15px;
    }

    .about-content section {
        margin-bottom: 40px;
    }

    .about-content h2 {
        font-size: 15px;
        margin-bottom: 0px;
        font-weight: normal;
        display: inline;
    }

    .about-content p {
    	line-height: 1.5;
        font-size: 14px;
        color: #555555;  
    }


/* 年と内容の間にスペースを入れる */
.history-list {
    text-align: left;
}

    
.history-list .year {
    display: inline-block;
    width: 4em; /* 年の幅を固定 */
    vertical-align: top;  /* コンテンツが改行されても年の位置を上部に固定 */
}
.year2 {
    display: inline-block;
    width: 3.3em; /* 年の幅を固定 */
}

.history-list .content {
        display: inline-block;
        width: calc(100%);
        padding-left: 5em;  /* 年の幅(4em) + 追加スペース(1em) */
        text-indent: -1em;  /* 追加スペース分を戻す（1行目のみ） */
        margin-left: -4em;  /* 年の幅分を戻す */
        box-sizing: border-box;
        word-wrap: break-word;
    
}
.history-list .sp-only {
    display: none;
}





}

/*=======================================================================================================================================================================================================================================================================================================================*/
/* スマートフォン専用 */
@media screen and (max-width: 499px) {


td.top, td		{padding: 2px;}
table, table.illust 	{padding: 20px 0px 2.5px 0px;}

 /* ハンバーガーメニュー */
.hamburger-menu 	{top: 25px;
								right: 25px;}

 /* スライドメニューの内容のスタイリング */
.slide-menu-content 	{padding: 20px;
									margin-top: 15%;
									height: calc(100% - 120px); /* 高さを設定 */
									position: relative; /* 子要素の絶対配置の基準に */
									display: flex;
									flex-direction: column;} 

.slide-menu 			{width: 100%;
							max-width: none;}

.slide-menu ul li 	{margin: 10px 0;
							padding: 10px;}
    
.slide-menu .social-links 		{bottom: 3vh; 
											padding-right: 10%;}   


/* 作品詳細ページのスタイル */
    .work-detail {
        width: 100%;
        margin-top: 60px;
        padding: 0 0px;
        box-sizing: border-box;
    }

    .work-detail .main-image {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .work-detail .main-image img {
        width: 100%;
        height: auto;
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }

/* 固定画像用のスタイル */
.work-detail .static-image {
  		width: 100%;
        margin: 0;
        padding: 0;
}

.work-detail .static-image img {
  		width: 100%;
        height: auto;
        max-width: 100%;
        display: block;
        margin: 0 auto;
}

.static-image figcaption {
  		margin: 10px 0 20px 0;
        padding: 0 5px;
}

    .work-detail figcaption {
        margin: 10px 0 20px 0;
        padding: 0 5px;
    }

.work-detail h1 	{font-size: 15px;
							margin: 0 0 15px 0;
							text-align: left;
							color: #2f2725;
							letter-spacing: 0.0em;}

    .work-detail .description {
        font-size: 14px;
        line-height: 1.7;
        margin: 0;
    }

.work-detail .specs 	{font-size: 11px;
								line-height: 1.3;
								color: #555555;
								margin: 12px 0;}

    .additional-images {
        width: 70%;
        margin-top: 20px;
    }

    .additional-images figure {
        width: 100%;
        margin: 20px 0;
    }

    .additional-images img {
        width: 100%;
        height: auto;
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }

    .additional-images figcaption {
        margin-top: 10px;
        font-size: 12px;
        color: #666;
        padding: 0 5px;}

/* 絵本ページ */        
.book-col {
        padding: 2px;
    }
    .book-item {
        margin-bottom: 4px;
    }
    
nav.category-book ul.illust a { 
	text-decoration: none;
	font-size: 13px;}

#content nav.category-collabo-pc li.illust 	{font-size: 13px;
																	margin: 0;}

    /* PCメディアクエリで追加されていた左マージンを削除 */
h1	{
        margin-left: 0;
        text-align: left;
    }
footer {
        width: 100%;
       	clear: both;
        min-width: auto;
        box-sizing: border-box;
        margin: auto auto 0px auto;
        padding: 15px 15px 0px 10px;
       	color: #555555;
    }
    
/* アバウトページ */ 
.about-content {
        margin-top: 20px;
        padding: 0 10px;
    }

.about-content section {
        margin-bottom: 30px;
    }

    .about-content h2 {
        font-size: 15px;
        margin-bottom: 0px;
        font-weight: normal;
        display: inline;
    }

    .about-content p {
        font-size: 13px;
        line-height: 1.6;
        color: #555555;
    }

.about-content p br {
        margin-bottom: 12px;
    }
    
    /* 年と内容の間にスペースを入れる */
.about-content p br {
    margin-bottom: 15px;
    display: block;
}

.history-list {
    text-align: left;
}

.history-list p {
        margin: 0 0 1em 0;
    }

.history-list .year {
    display: inline-block;
    width: 4em; /* 年の幅を固定 */
    vertical-align: top;  /* コンテンツが改行されても年の位置を上部に固定 */
}
.year2 {
    display: inline-block;
    width: 3.3em; /* 年の幅を固定 */
    vertical-align: top;  /* コンテンツが改行されても年の位置を上部に固定 */
}

.history-list .content {
        display: inline-block;
        width: calc(100%);
        padding-left: 5em;  /* 年の幅(4em) + 追加スペース(1em) */
        text-indent: -1em;  /* 追加スペース分を戻す（1行目のみ） */
        margin-left: -4em;  /* 年の幅分を戻す */
        box-sizing: border-box;
        word-wrap: break-word;
}

.sp-only {
        display: block;  /* スマホでのみ改行を表示 */
    }
.history-list .indent {
        display: inline-block;
        width: 1em;  /* 追加スペース(1em) */
    }
    
.author-image img {
    width: 120px;
  }

/* コンタクトフォームのスタイル */
.contact-form {
    margin:30px auto 0;
    padding: 0 15px;
}

.contact-form p {
	padding-top: 0px;
}

.form-group label {
    font-size: 15px;
}

.form-group input,
.form-group textarea {
    font-size: 15px;}

.form-group {
        margin-bottom: 20px;
    }

.submit-button {
        width: 100%;
    }

   
}
}

/*=======================================================================================================================================================================================================================================================================================================================*/
/* サムネイルのスタイル */
.thumbnail {
  border: 1.5px solid transparent; /* 透明な枠線（初期状態） */
  box-sizing: border-box;
}

/* 選択中のサムネイル */
.thumbnail.active {
  border-color: #2f2725; /* 選択時の枠線色 */
}

/* ホバー時のサムネイル */
.thumbnail:hover {
  border-color: #2f2725; /* ホバー時の枠線色 - メニュー背景色と同じ */
}

.main-image {
  position: relative; /* 必要であれば追加 */
  padding: 0; /* 70pxから0pxに変更 */
  box-sizing: border-box;
}

.main-image img {
  max-width: 100%; /* 余白を除いた部分を最大幅に */
}

/* 画像コンテナを相対位置に設定 */
.main-image .image-container {
  position: relative;
  width: 100%;
}

.main-image-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none; /* ボタン以外はクリックイベントを通過させる */
  z-index: 10;
}

.main-prev-btn,
.main-next-btn {
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  pointer-events: auto; /* ボタンはクリック可能に */
  transition: background-color 0.1s;
  border: none;
  outline: none;
  position: relative;
}

.main-prev-btn:hover,
.main-next-btn:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* 左右の矢印を屋根型に変更 */
.main-prev-btn::before,
.main-next-btn::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border-width: 4px;
  border-style: solid;
  border-color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
}

/* 左矢印の位置 */
.main-prev-btn {
    margin-left: -100px; /* 左側の余白からの距離 */
}

/* 右矢印の位置 */
.main-next-btn {
    margin-right: -100px; /* 右側の余白からの距離 */
}

/* 左矢印 - 左と下の境界線を表示 */
.main-prev-btn::before {
  border-right: none;
  border-top: none;
  transform: translate(-30%, -50%) rotate(45deg);
}

/* 右矢印 - 右と下の境界線を表示 */
.main-next-btn::before {
  border-left: none;
  border-top: none;
  transform: translate(-70%, -50%) rotate(-45deg);
}

@media screen and (max-width: 1099px) {

  .main-prev-btn,
  .main-next-btn {
    width: 40px;
    height: 40px;
  }
  
.main-prev-btn::before,
.main-next-btn::before {
  width: 13px;
  height: 13px;
  border-width: 3px;
}

/* 左矢印の位置 */
.main-prev-btn {
    margin-left: 10px; /* 左側の余白からの距離 */
}

/* 右矢印の位置 */
.main-next-btn {
    margin-right: 10px; /* 右側の余白からの距離 */
}
	
/* ホバーエフェクトを明示的に無効化 */
  .main-prev-btn:hover,
  .main-next-btn:hover {
    background: rgba(0, 0, 0, 0.3) !important; /* !importantで強制 */
  }
  
.main-image-nav {
  top: 30px;
}


/* モバイル向けのスタイル調整 */
@media screen and (max-width: 499px) {
  .main-prev-btn,
  .main-next-btn {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0);
  }
  
  .main-prev-btn::before,
  .main-next-btn::before {
    width: 13px;
    height: 13px;
    border-width: 3px;
    border-color: #2f2725;
  }
  
.main-prev-btn:hover,
.main-next-btn:hover {
  background: rgba(0, 0, 0, 0) !important; /* !importantで強制 */
}

.main-image-nav {
  top: 0;
}

/* 左矢印の位置 */
.main-prev-btn {
    margin-left: 0px; /* 左側の余白からの距離 */
}

/* 右矢印の位置 */
.main-next-btn {
    margin-right: 0px; /* 右側の余白からの距離 */
}

}
}

/* 一覧に戻るボタンのスタイル */
.back-to-list {
  width: 100%;
  text-align: center;
  margin-top: 0;
}

.back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 25px;
  background-color: #eaeae8; /* #d8d8d4より少し薄い色 */
  color: #2f2725;
  border: none; /* 輪郭線なし */
  transition: all 0.1s ease;
  text-decoration: none;
  font-size: 16px;
}

.back-button:hover {
  background-color: #d8d8d4;
  color: #2f2725;
}

.back-arrow {
  margin-right: 10px;
  width: 10px;
  height: 10px;
  border-left: 2px solid #777;
  border-bottom: 2px solid #777;
  transform: rotate(45deg);
  display: inline-block;
  transition: all 0.1s ease;
}

.back-button:hover .back-arrow {
  border-color: #2f2725;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .back-button {
    padding: 8px 16px;
    font-size: 13px;
  }
  
  .back-arrow {
    width: 7px;
    height: 7px;
  }
}

/*=======================================================================================================================================================================================================================================================================================================================*/
/* ナビゲーション要素を下部に配置するためのコンテナ */
.bottom-navigation-container {
    margin-top: auto; /* 上のスペースを自動的に埋める */
    padding: 40px 0 20px 0; /* 上下に適切な余白 */
}

/* ナビゲーションコンテナ */
.artwork-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto -45px auto;
  max-width: 80%;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 個別のナビゲーションリンク */
.artwork-nav {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #2f2725;
  padding: 0px 20px;
  max-width: 300px;
  min-height: 48px;
}

.artwork-nav:hover {
  background-color: #eaeae8;
  border-color: #2f2725;
}

/* 前の作品（左側） */
.artwork-nav-prev {
  flex-direction: row;
}

/* 次の作品（右側） */
.artwork-nav-next {
  flex-direction: row-reverse;
  text-align: right;
}

/* 矢印 */
.nav-arrow {
  width: 12px;
  height: 12px;
  border: 2px solid #2f2725;
  flex-shrink: 0;
}

.nav-arrow-left {
  border-right: none;
  border-top: none;
  transform: rotate(45deg);
  margin-right: 15px;
}

.nav-arrow-right {
  border-left: none;
  border-top: none;
  transform: rotate(-45deg);
  margin-left: 15px;
}


/* コンテンツエリア */
.nav-content {
  flex: 1;
  min-width: 0; /* flexboxでのオーバーフロー防止 */
}

/* 方向ラベル */
.nav-direction {
  font-size: 14px;
  color: #2f2725;
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
}

/* タイトル */
.nav-title {
  display: none;
}

/* 片方しかない場合の調整 */
.artwork-navigation:has(.artwork-nav-prev):not(:has(.artwork-nav-next)) {
  justify-content: flex-start;
}

.artwork-navigation:has(.artwork-nav-next):not(:has(.artwork-nav-prev)) {
  justify-content: flex-end;
}

/* タブレット・スマホ対応 */
@media screen and (max-width: 1099px) {
	.bottom-navigation-container {
        padding: 30px 0 15px 0;
    }
	
  .artwork-navigation {
    margin: 30px auto -62px;
    padding: 0 15px;
  }
  
  .artwork-nav {
    padding: 12px 15px;
    max-width: 250px;
    min-height: 50px;
  }
  
  .nav-arrow {
    width: 10px;
    height: 10px;
  }
  
  .nav-arrow-left {
    margin-right: 12px;
  }
  
  .nav-arrow-right {
    margin-left: 12px;
  }
  
  .nav-direction {
    font-size: 14px;
  }
  
}

/* スマートフォン専用 */
@media screen and (max-width: 499px) {
	.bottom-navigation-container {
        padding: 20px 0 10px 0;
    }
	
  .artwork-navigation {
    gap: 15px;
    margin: 20px auto -54px;
    padding: 0 10px;
  }
  
  .artwork-nav {
    max-width: none;
    justify-content: center;
    padding: 12px ;
  }
  
  .artwork-nav-prev,
  .artwork-nav-next {
    flex-direction: row;
    text-align: center;
  }
  
  .nav-arrow-left {
    margin-right: 0;
  }
  
  .nav-arrow-right {
    margin-left: 0;
    transform: rotate(-45deg);
  }
  
  .nav-content {
    display: none;
  }
  
  .nav-direction {
    display: none;
  }
  
  .nav-title-en {
    font-size: 12px;
  }
  
  .nav-title-jp {
    font-size: 11px;
  }
  
  /* スマホで片方しかない場合は左右に配置（中央揃えしない） */
  .artwork-navigation:has(.artwork-nav-prev):not(:has(.artwork-nav-next)) {
    justify-content: flex-start;
  }
  
  .artwork-navigation:has(.artwork-nav-next):not(:has(.artwork-nav-prev)) {
    justify-content: flex-end;
  }
}

/* キーボードナビゲーションのヒント（オプション） */
.keyboard-hint {
  text-align: center;
  margin: 10px 0;
  font-size: 12px;
  color: #999;
}

@media screen and (max-width: 499px) {
  .keyboard-hint {
    display: none;
  }
}

/*=======================================================================================================================================================================================================================================================================================================================*/
/* GIF遅延ローディング用のスタイル */
.gif-lazy-container {
  position: relative;
  text-align: center;
}

/* GIF用ローディングスクリーン - index.htmlと同じスタイル */
#gif-loading-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f9f9f8;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

#gif-loading-screen.loaded {
  opacity: 0;
  transition: opacity 0s ease-out;
}

.gif-container {
  position: relative;
}

/* 気球のアニメーション（index.htmlから再利用） */
#gif-loading-screen .loading-icon {
  margin-bottom: 10px;
  animation: float 1s ease-in-out infinite alternate;
}

#gif-loading-screen .loading-icon img {
  width: 150px;
  height: auto;
}

#gif-loading-screen .loading-logo {
  margin: 20px auto 0;
}

#gif-loading-screen .loading-logo img {
  max-width: 200px;
  height: auto;
}

@media screen and (max-width: 499px) {
  #gif-loading-screen .loading-icon img {
    width: 100px;
    height: auto;
  }
  
 #gif-loading-screen .loading-logo img {
    max-width: 150px;
    height: auto;
  }
}

.gif-lazy-container {
  position: relative;
  text-align: center;
  border: 1px solid #2f2725; /* サイトのメニュー色と同じ色で枠線を追加 */
  background-color: #f9f9f8; /* サイトの背景色と同じ色 */
  transition: border-color 0s ease-out;
}

/* ローディング終了時に枠線を消す */
.gif-lazy-container.loading-complete {
  border-color: transparent;
}

/*=======================================================================================================================================================================================================================================================================================================================*/
/* カテゴリーナビの中のタグフィルター位置調整 */
nav.category ul.illust {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
}

/* タグで探すを右端に配置 */
nav.category ul.illust .tag-filter-toggle {
  margin-left: auto !important; /* 優先度を上げる */
  margin-right: 20px;
}


/* タグで探すボタンのスタイル */
#toggle-tag-filter {
  cursor: pointer;
  position: relative;
  white-space: nowrap; /* テキストの折り返しを防止 */
}

/* タグで探すボタンのホバー/アクティブ状態 */
#toggle-tag-filter:hover,
#toggle-tag-filter.active {
  background-color: #2f2725; 
  color: #e4e2d4;
}



/* タグフィルターコンテナの位置調整 */
.tag-filter-wrapper {
  position: relative;
  margin: 0;
  padding: 0;
  z-index: 100;
}

/* フィルターコンテナの上ボーダーを調整 */
.tag-filter-container.open {
  display: block;
  margin-top: -1.5px; /* 微調整：ボタンと重ねる */
  border-top-right-radius: 0; /* 右上角を尖らせる */
}

/* フィルターコンテナのスタイル */
.tag-filter-container {
  display: none;
  position: absolute;
  margin-right: 7px;
  right: 0;
  top: -1.5px;
  background-color: #f9f9f8;
  border: 1.5px solid #2f2725;
  padding: 15px;
  z-index: 100;
}

/* フィルター表示時のスタイル */
.tag-filter-container.open {
  display: block;
}

/* アクティブ時の上部ボーダー */
#toggle-tag-filter.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
}

/* 左側ボーダーのスタイル */
.tag-filter-wrapper.has-open-filter::before {
  content: '';
  position: absolute;
  top: 35px;
  right: 0;
  width: 2px;
  height: calc(100% - 35px);
  background-color: #2f2725;
}

/* タグボタンコンテナ */
.tag-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}

/* タグボタンのスタイル */
.tag-button {
  background-color: #f9f9f8;
  border: none;
  color: #2f2725;
  padding: 0px 10px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 0; /* 角を尖らせる */
}

.tag-button:hover {
  background-color: #eaeae8;
}

/* アクティブなタグボタン */
.tag-button.active {
  background-color: #2f2725;
  color: #e4e2d4;
}

/* フィルタリングされた作品のスタイル */
td.top.filtered-out {
  opacity: 0.3;
  filter: grayscale(70%);
  transition: opacity 0.3s, filter 0.3s;
}

td.top.filtered-in {
  opacity: 1;
  filter: grayscale(0%);
  transition: opacity 0.3s, filter 0.3s;
}

/* モバイル向けメディアクエリ */
@media screen and (max-width: 1099px) {
  /* PCのタグフィルターを非表示、モバイル用を表示 */
  .tag-filter-container {
    display: none;
  }
}


/* モバイル専用フィルターアイコンと浮き出るフィルターウィンドウのスタイル */
.mobile-filter-icon-container {
  position: fixed;
  bottom: 10dvh; /* ページ上部に戻るボタンの上 */
  right: 30px;
  z-index: 900;
  display: none; /* 初期状態（PC）では非表示 */
}

#mobile-filter-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(47, 39, 37, 0.9); /* サイトのメニュー色と合わせる */
  border: none;
  color: #e4e2d4; /* 明るい色のアイコン */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, background-color 0.2s;
}

/* タップ領域拡大のための擬似要素 */
#mobile-filter-icon-btn::before {
  content: '';
  position: absolute;
  top: -10px;  /* 上に10px拡大 */
  right: -10px; /* 右に10px拡大 */
  bottom: -10px; /* 下に10px拡大 */
  left: -10px;  /* 左に10px拡大 */
  background-color: transparent; /* 完全透明 */
  border-radius: 50%; /* 丸く */
  z-index: -1; /* ボタンの下に配置 */
}

/* ボタン自体は相対配置に */
#mobile-filter-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  /* 他のスタイルは変更なし */
}

/* フィルターポップアップウィンドウ */
.mobile-filter-popup {
  position: absolute;
  right: 50px;
  bottom: 0;
  width: 350px;
  background: #f9f9f8; /* サイトの背景色と合わせる */
  border: 1.5px solid #2f2725;
  box-shadow: 0 3px 15px rgba(0,0,0,0.2);
  display: none;
  z-index: 950;
  overflow: hidden;
  transition: opacity 0.3s, transform 0.3s;
}

.mobile-filter-popup.open {
  display: block;
  animation: mobilePopupFadeIn 0.3s ease-out;
}

@keyframes mobilePopupFadeIn {
  from {
    opacity: 0;
    transform: translateY(0px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-filter-popup-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 15px;
  background-color: #f9f9f8; /* サイトのメニュー色と合わせる */
  color: #2f2725;
  font-size: 18px;
  position: relative;
}

.mobile-popup-close {
	background: none;
	cursor: pointer;
	position: absolute;
	bottom: 3px; /* ポップアップの外側に配置 */
	right: 3px; /* フィルターアイコンと同じ位置に */
	width: 40px;
	height: 40px;
	border: none;
	color: #2f2725;
	font-size: 30px;
	z-index: 960; /* ポップアップより上に */
	/* フィルターアイコンと同様にタップ領域を拡大 */
  padding: 15px;
  margin: -15px;
  box-sizing: content-box;
}

.mobile-filter-popup-content {
  padding: 10px 30px 20px 30px;
}

.mobile-popup-tag-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mobile-popup-tag-buttons .tag-button {
  background-color: #eaeae8;
  border: none;
  color: #2f2725;
  padding: 0px 10px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 0;
  margin: 5px 5px;
}

.mobile-popup-tag-buttons .tag-button:hover {
  background-color: #d8d8d4;
}

.mobile-popup-tag-buttons .tag-button.active {
  background-color: #2f2725;
  color: #e4e2d4;
}

/* タブレット・スマホでのみフィルターアイコンを表示 */
@media screen and (max-width: 1099px) {
  .mobile-filter-icon-container {
    display: block; /* タブレット・スマホでは表示 */
  }
  
  /* 既存のモバイル用タグフィルターを非表示に */
  .mobile-tag-filter {
    display: none;
  }
}

/* タブレット向けのスタイル調整 */
@media screen and (max-width: 1099px) and (min-width: 500px) {
  .mobile-filter-icon-container {
    bottom: 5dvh;
    right: 30px;
  }
  
  #mobile-filter-icon-btn {
    width: 42px;
    height: 42px;
  }
  
  #mobile-filter-icon-btn svg {
    width: 19px;
    height: 19px;
  }
  
  .mobile-filter-popup {
    width: 500px;
  }
}

/* スマホ向けのスタイル調整 */
@media screen and (max-width: 499px) {
  .mobile-filter-icon-container {
    bottom: 7dvh;
    right: 20px;
  }
  
  #mobile-filter-icon-btn {
    width: 35px;
    height: 35px;
  }
  
  #mobile-filter-icon-btn svg {
    width: 14px;
    height: 14px;
  }
  
  .mobile-filter-popup-content {
  padding: 10px 15px 15px 15px;
}

.mobile-popup-tag-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
  
  .mobile-filter-popup {
    width: 90vw;
    right: -3px;
    bottom: -3px;
  }
  
  .mobile-popup-tag-buttons .tag-button {
    padding: 0px 10px;
    font-size: 13px;
    margin: 3px 3px;
  }
  
  .mobile-filter-popup-header {
  font-size: 14px;
}

.mobile-popup-close {
	bottom: 0px; /* ポップアップの外側に配置 */
	right: 0px; /* フィルターアイコンと同じ位置に */
	font-size: 20px;}  

}

/*=======================================================================================================================================================================================================================================================================================================================*/
/* もっと見るボタンは削除されました（プログレッシブ読み込みにより不要） */

/*=======================================================================================================================================================================================================================================================================================================================*/
/* アニメーションの制御 */
/*　ページ上部へ戻る　*/
#to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 50px;
    height: 50px;
    background-color: #2f2725;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.4s;
    z-index: 1000;
    visibility: hidden;
}

#to-top svg {
    color: #e4e2d4;
}

#to-top:hover {
    transform: translateY(-5px);
}

#to-top.visible {
    opacity: 1;
    visibility: visible; /* 追加 */
    transition: opacity 0.4s ease, transform 0.3s ease, visibility 0s;
}

.roof-arrow {
    margin-top: 5px;
    width: 15px;
    height: 15px;
    display: block;
    border-left: 4px solid #e4e2d4;
    border-bottom: 4px solid #e4e2d4;
    transform: rotate(135deg); /* 45度ずつ回転させて屋根型に */
}

/* とぶ家のアニメーション */
.floating-container 	{
	position: fixed;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;  /* はみ出した部分を隠す */}

.floating-image 	{
	position: absolute;
    width: 150px;

    animation: 
        floating 15s linear infinite,
        swaying 3s ease-in-out infinite alternate;}
        
@keyframes floating {
    from {
        bottom: -200px;
    }
    to {
        bottom: 100vh;
    }
}

@keyframes swaying {
    from {
        margin-left: -20px;
    }
    to {
        margin-left: 20px;
    }
}

/* 船のアニメーション */
.ship-container {
    position: fixed;
    bottom: 60px;
    left: 0;
    width: 100%;
    z-index: 1000;
    pointer-events: none;
}

.ship-image {
    position: absolute;
    width: 100px;
    height: auto;
    animation: 
        moveShip 50s linear infinite,
        bobbing 3s ease-in-out infinite alternate;
}

@keyframes moveShip {
    from {
        left: -100px;
    }
    to {
        left: 100%;
    }
}

@keyframes bobbing {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-5px);
    }
}
/* 犬のアニメーション */
.peek-container {
    position: fixed;
    right: -200px; /* 画像を最初は隠しておく */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    transition: right 0.3s ease-in-out;
}

.peek-image {
    width: 180px; /* 画像サイズに応じて調整 */
    height: auto;
}

/* スクロールで表示される際のクラス */
.peek-container.peek {
    right: -20px; /* 少しだけ覗かせる */
}

/* 花のアニメーション */
.peek-container2 {
    position: fixed;
    left: -200px; /* 画像を最初は隠しておく */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    transition: left 0.3s ease-in-out;
}

.peek-image2 {
    width: 200px; /* 画像サイズに応じて調整 */
    height: auto;
}

/* スクロールで表示される際のクラス */
.peek-container2.peek {
    left: -20px; /* 少しだけ覗かせる */
    }

/* 紙飛行機のアニメーション */
.airplane-container {
    position: fixed;
    top: 40%;
    left: 0;
    width: 100%;
    height: 00px;
    pointer-events: none;
    z-index: 1000;
}

.airplane-image {
    position: absolute;
    width: 150px;
    animation: 
        flyAcross 20s linear infinite,
        paperFloating 3s ease-in-out infinite alternate;
}

@keyframes flyAcross {
    from {
        left: -100px;
    }
    to {
        left: calc(100% + 100px);
    }
}

@keyframes paperFloating {
    from {
        transform: rotate(2deg) translateY(-10px);
    }
    to {
        transform: rotate(-1deg) translateY(10px);
    }
}


/* ローディングスクリーン */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f9f9f8;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.loading-container {
  text-align: center;
}

/* 気球のアニメーション */
.loading-icon {
  margin-bottom: 10px;
  animation: float 1s ease-in-out infinite alternate;
}

.loading-icon img {
  width: 150px;
  height: auto;
}

/* ロゴ（アニメーションなし） */
.loading-logo {
  margin: 20px auto 0;
}

.loading-logo img {
  max-width: 200px;
  height: auto;
}

/* レスポンシブ対応 */
@media screen and (max-width: 499px) {
.loading-icon img {
  width: 100px;
  height: auto;
}
  
.loading-logo img {
  max-width: 150px;
  height: auto;
}
}

/* 気球用の浮遊アニメーション */
@keyframes float {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-15px);
  }
}

/* ローディング完了時のフェードアウト */
#loading-screen.loaded {
  opacity: 0;
  visibility: hidden;
}

/* アニメーション要素をクリック可能にするCSS */

/* 気球のアニメーション - クリック可能に */
.floating-image {
    position: absolute;
    width: 150px;
    cursor: pointer; /* カーソルを手の形に */
    pointer-events: auto; /* クリックイベントを有効に */
    user-select: none; /* テキスト選択を無効に */
    
    animation: 
        floating 15s linear infinite,
        swaying 3s ease-in-out infinite alternate;
        
    /* ホバー時の効果 */
    transition: transform 0.3s ease;
}

.floating-image:hover {
    transform: scale(1.1) !important;
}

/* 船のアニメーション - クリック可能に */
.ship-image {
    position: absolute;
    width: 100px;
    height: auto;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    
    animation: 
        moveShip 50s linear infinite,
        bobbing 3s ease-in-out infinite alternate;
        
    transition: transform 0.3s ease;
}

.ship-image:hover {
    transform: scale(1.1) translateY(-5px) !important;
}

/* 犬のアニメーション - クリック可能に */
.peek-image {
    width: 180px;
    height: auto;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    transition: transform 0.3s ease;
}

.peek-image:hover {
    transform: scale(1.1) !important;
}

/* 花のアニメーション - クリック可能に */
.peek-image2 {
    width: 200px;
    height: auto;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    transition: transform 0.3s ease;
}

.peek-image2:hover {
    transform: scale(1.1) !important;
}

/* 紙飛行機のアニメーション - クリック可能に */
.airplane-image {
    position: absolute;
    width: 150px;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    
    animation: 
        flyAcross 20s linear infinite,
        paperFloating 3s ease-in-out infinite alternate;
        
    transition: transform 0.3s ease;
}

.airplane-image:hover {
    transform: scale(1.1) !important;
}

/* すべてのアニメーション要素共通 */
.floating-image,
.ship-image,
.peek-image,
.peek-image2,
.airplane-image {
    /* アクセシビリティのためのフォーカス表示 */
    outline: none;
}

.floating-image:focus,
.ship-image:focus,
.peek-image:focus,
.peek-image2:focus,
.airplane-image:focus {
    outline: 2px solid #2f2725;
    outline-offset: 2px;
}

/* ========================================
   プログレッシブ画像読み込み用CSS
   ======================================== */

/* 粗い画像表示中のブラー効果 */
img.progressive-blur {
  filter: blur(5px);
  transform: scale(1.05); /* ブラー時の縁を隠すため少し拡大 */
  transition: filter 0.5s ease, transform 0.5s ease;
}

/* 高解像度画像読み込み完了後 */
img.progressive-loaded {
  filter: blur(0);
  transform: scale(1);
}

/* アニメーション用 */
img.ichiran {
  transition: filter 0.5s ease, transform 0.5s ease;
  will-change: filter, transform;
}

/*=======================================================================================================================================================================================================================================================================================================================*/

/*=======================================================================================================================================================================================================================================================================================================================*/
/* サンクスページ (thanks.html) */
/*=======================================================================================================================================================================================================================================================================================================================*/

.thanks-message {
  max-width: 800px;
  margin: 200px auto;
  padding: 40px;
  text-align: center;
}

/* 気球アイコン */
.thanks-icon {
  margin-bottom: 30px;
  animation: float 1.5s ease-in-out infinite alternate;
}

.thanks-icon img {
  width: 170px;
  height: auto;
}

.thanks-message h1 {
  color: #2f2725;
  font-size: 22px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  font-weight: normal;
  line-height: 1.7;
}

.thanks-text {
  color: #555555;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 50px;
}

/* 「一覧に戻る」と同じスタイルを使用 */
.thanks-message .back-to-list {
  width: 100%;
  text-align: center;
  margin-top: 80px;
}

/* タブレット・スマホ対応 */
@media screen and (max-width: 1099px) {
  .thanks-message {
    margin: 60px auto;
    padding: 30px 20px;
  }
  
  .thanks-icon img {
    width: 150px;
  }
  
  .thanks-message h1 {
    font-size: 20px;
    margin-bottom: 25px;
    text-align: center;
    line-height: 1.8;
  }
  
  .thanks-text {
    font-size: 15px;
    margin-bottom: 40px;
  }
}

/* スマートフォン専用 */
@media screen and (max-width: 499px) {
  .thanks-message {
    margin: 50px auto;
    padding: 20px 15px;
  }
  
  .thanks-icon img {
    width: 120px;
  }
  
  .thanks-message h1 {
    font-size: 17px;
    margin-bottom: 20px;
  }
  
  .thanks-text {
    font-size: 14px;
    margin-bottom: 30px;
  }
}