@charset "UTF-8";


/* -----------------------------------------------------------------------------------
 1_ページ全体と背景指定ここから artwork用
----------------------------------------------------------------------------------- */

body {


/* 背景画像と指定 */
  background: url(../2023_img/2023_kusamusubu_bg.jpg) center center / cover no-repeat fixed;
/* 背景画像非表示時背景色 */
  background-color:#000;


  display: flex; /* フレックスボックス */
  flex-flow: column; /* 上から下へ縦に並べる＿基本左 */
  align-items: center; /* 中央寄せ */

 

/* 基本の文字 */
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 0.8rem;
  line-height: 1.7;
	font-weight: 400;
	word-break: normal;
	
	
	/* ページ全体のマージン */	
  margin: 0px;
  padding: 70px 50px 50px 50px; /* 上右下左 */

}

/* -----------------------------------------------------------------------------------
 1_ページ全体と背景指定ここまで
----------------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------------
2_テキスト指示ここから
----------------------------------------------------------------------------------- */


/* 基本の文字_個別指定
------------------------------- */
.font1 {
  font-size: 0.8rem;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
 }

/* ボールド英語_個別指定
------------------------------- */
.font2 {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 0.8rem;
 }

/* ボールド小_日本語_個別指定
------------------------------- */
.font3 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
 }


/* 文字中央寄せ指定
------------------------------- */
.center1 {
  text-align: center;

 }


/* artworkタイトル文字_個別指定
------------------------------- */
.font-title {
  font-family: 'Sofia', cursive;
  font-size: 4rem;
  line-height: 90px;
 }


/* 2行目以降の段落下げ
------------------------------- */
p.indent-1 {
  padding-left:1em;
  text-indent:-1em;
}


/* -----------------------------------------------------------------------------------
2_テキスト指示ここまで
----------------------------------------------------------------------------------- */



/* -----------------------------------------------------------------------------------
3_ヘッダー部分
----------------------------------------------------------------------------------- */

/* メインナビ
------------------------------- */
.main-nav {
    display: flex;
    font-size: clamp(18px, 1.8vw, 26px); /* 文字サイズ画面サイズに合わせて可変(最小値, 基準値, 最大値) */
    list-style: none;
    justify-content: center; /* 縦中央寄せ */
    font-family: 'Sofia', cursive;
    font-weight: 500;
  }

/* メインナビメニュー
------------------------------- */
.main-nav li {
    margin : 0px 10px 0px 10px;
}

/* メインナビリンク指定 */
.main-nav a {
	color: #000; /* 文字色 */
	
	background-color: #dfdfdf; /* 背景色 */
	border-radius: 30px; /* 角丸指定 */
	padding: 0px 20px 0px 20px; /* 上右下左 各ボタン枠サイズ */
}

/* メインナビリンクホバーエフェクト指定 */
.main-nav a:hover {
    background: #CCCCCC;
    border-radius: 30px; /* 角丸指定 */
}


/* -----------------------------------------------------------------------------------
3_ヘッダー部分ここまで
----------------------------------------------------------------------------------- */




/* 親_白透過
------------------------------- */
.oya {
  max-width: 1000px;
  width: 100%;
  height: auto;
  margin: 0px 0px 15px 0px; /* 上右下左 */
  padding: 5px 70px 5px 70px;


/* 内部縦並び */
  display: flex; /* フレックスボックス */
  flex-flow: column; /* 上から下へ縦に並べる＿左寄せ */

 
/* 背景色透過 */
  background: #fff; /* 透過する色を先に記述 */
  background-color: rgba(255,255,255,0.9);


/* 画像重ね位置指定_position: absolute;のペア記述 */
  position: relative; 

/* 角丸指定 */
  border-radius: 30px;

}


/* -----------------------------------------------------------------------------------
3_こどもフレックスボックス指定ここから
----------------------------------------------------------------------------------- */


/* a_こども_リンク縦配列_背景透明100%
------------------------------- */
.kodomo {

  width: 100%;
  height: auto;
  margin: 30px 0px 30px 0px; /* 上右下左 */
  padding: 0px 0px 0px 0px;
 
  display: flex; /* フレックスボックス */
  flex-flow: column; /* 上から下へ縦に並べる＿基本左 */
  justify-content: center; /* 中央寄せ */
  flex-wrap: wrap; /* 折り返す上から下へ */

  /* 背景色透明 */
    background: #fff;  /* 透過する色 */
    background-color: rgba(0,0,0,0);


}



/* b_こども_テキスト用_背景透明100%
------------------------------- */
.Kodomo-2 {

  width: 100%;
  height: auto;
  margin: 30px 0px 30px 0px; /* 上右下左 */
  padding: 0px 30px 0px 30px;

  /* 背景色透明 */
    background: #fff; /* 透過する色 */
    background-color: rgba(0,0,0,0);

}



/* c_こども_画像など横配列_背景透明100%
------------------------------- */
.kodomo-3 {

  width: 100%;
  height: auto;
  margin: 0px 0px 30px 0px; /* 上右下左 */
  padding: 0px 30px 0px 30px;

  display: flex; /* フレックスボックス */
  justify-content: start;
  justify-content: flex-start;
  gap: 10px 10px; /* 要素間の余白＿上下間と左右間 */


  /* 背景色透明 */
    background: #fff; /* 透過する色 */
    background-color: rgba(0,0,0,0);

}

/* -----------------------------------------------------------------------------------
3_こどもフレックスボックス指定ここまで
----------------------------------------------------------------------------------- */




/* -----------------------------------------------------------------------------------
4_リンク関係ここから
----------------------------------------------------------------------------------- */

/* リンクボタン基本色
------------------------------- */
a {
text-decoration: none;
color: #000;

}


/* リンクボタン形状
------------------------------- */
.button {
    width: auto%;
    margin: 5px 30px 5px 30px; /* 上右下左 */
    padding: 5px 5px 5px 5px;
    border-radius: 20px; /* 角丸指定 */
    text-align: center;
  
    
    background-color: #dfdfdf; /* 背景色 */
}


/* リンクボタンホバーエフェクト指定
------------------------------- */
.button:hover{
  background: #CCCCCC;
}



	/* テキストリンク基本色a
------------------------------- */
	a.aaa:link { 
	color: #000;
	background-color: rgba(0,0,0,0);
 	background-image: repeating-linear-gradient(-45deg,#d3d3d3, #d3d3d3 2px,transparent, transparent 4px); /* 角度、色、太さ、透明度、間隔 */
	 } 

/* テキストリンクホバーエフェクト指定a */
a.aaa:hover{
  background: #CCCCCC;
}



/* （title部分のみ）テキストリンクホバーエフェクト指定b */
a.bbb:hover{
	background: #CCCCCC; /* 背景色 */
	border-radius: 40px; /* 角丸指定 */
}

/* -----------------------------------------------------------------------------------
4_リンク関係ここまで
----------------------------------------------------------------------------------- */






/* -----------------------------------------------------------------------------------
5_画像関係ここから
----------------------------------------------------------------------------------- */



/* 親_白透過_画像重ね位置指定_ボックス飾り_花右側
------------------------------- */
.icon-img-box1 {
	position: absolute;
	
	/* 上からの距離 */
	top: -2px; 
	/* 左から */
	right:-10px;
	margin: auto;

}


/* 親_白透過_画像重ね位置指定_ボックス飾り_花左側
------------------------------- */
.icon-img-box2 {
	position: absolute;
	
	/* 上からの距離 */
	top: -4px; 
	/* 右から */
	left:-12px;
	margin: auto;
		transform: rotate( -130deg );  /* 2D(平面)で回転 */
}



/* 親_白透過_画像重ね位置指定_キノコちゃん
------------------------------- */
.icon-img3-about {
	position: absolute;
	
	/* 下からの距離 */
	bottom: 40px; 
	/* 右から */
	right:54px;
	margin: auto;
	z-index: 1; /* 重なり順 数値大が手前 */
}

/* -----------------------------------------------------------------------------------
5_画像関係ここまで
----------------------------------------------------------------------------------- */




/* -----------------------------------------------------------------------------------
6_その他ここから
----------------------------------------------------------------------------------- */


/* 水平線_点線
------------------------------- */
.dotted-line {
  height: 1px;
  position: relative;
}
.dotted-line::before {
  content: "";
  background-image: linear-gradient(to right, #000, #000 3px, transparent 3px, transparent 8px);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
width: auto;
}

/* -----------------------------------------------------------------------------------
6_その他ここまで
----------------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------------
7_topに戻るボタンここから
----------------------------------------------------------------------------------- */
.pagetop {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: #dfdfdf;
  border-radius: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
}
.pagetop__arrow {
  display: block;
  height: 10px;
  width: 10px;
  border-top: 3px solid #000;
  border-right: 3px solid #000;
  transform: translateY(20%) rotate(-45deg);  /* 矢印傾け */
}

/* -----------------------------------------------------------------------------------
7_topに戻るボタンここまで
----------------------------------------------------------------------------------- */



/* -----------------------------------------------------------------------------------
8_ギャラリーここから
----------------------------------------------------------------------------------- */


/* ---------- ギャラリー（Masonry風） ---------- */
.gallery {
  column-count: 5;        /* PC: 5列 */
  column-gap: 20px;       /* 横間隔はそのまま */
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.gallery figure {
  display: inline-block;
  width: 100%;
  margin: 0 0 14px;       /* 縦間隔を少し詰めた（以前12px → 8px） */
  break-inside: avoid;
  position: relative;
  box-sizing: border-box;
}

/* ギャラリー画像の基本設定 */
.gallery img {
  width: 100%; /* 横幅をコンテナ（親要素）いっぱいに広げる */
  height: auto; /* 縦横比を保持して高さを自動調整 */
  object-fit: contain; /* はみ出さず全体を収める（トリミングなし） */
  display: block; /* 行間の余白をなくす（インライン要素対策） */
  border-radius: 6px; /* 角を少し丸める */
  cursor: pointer; /* ホバー時にポインターカーソルに変更 */
  opacity: 0; /* 初期状態は非表示（フェードイン用） */
  transition: opacity 0.4s ease; /* 読み込み時にふわっと表示 */
  -webkit-backface-visibility: hidden; /* Safariでのチラつき防止 */
  backface-visibility: hidden; /* 他ブラウザでのチラつき防止 */
}

/* ロード完了で表示 */
.gallery img.loaded {
  opacity: 1; /* フェードイン */
}

/* ホバー時（効果を抑えて安定表示） */
.gallery img:hover {
  transform: none; /* 拡大などを無効化 */
  border-radius: 6px; /* ホバー時も角丸維持 */
}


.gallery > figure > figcaption {
  display: none;
}

/* ---------- 拡大オーバーレイ ---------- */
#overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
  text-align: center;
  padding: 12px;
  box-sizing: border-box;
}

#overlay img {
  max-width: 92%;
  max-height: 80vh;
  border-radius: 8px;
  margin: 10px 0;
  display: block;
}

/* ---------- 矢印ボタン ---------- */
#prev, #next {
  position: absolute;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  padding: 6px;
  user-select: none;
  line-height: 1;
  z-index: 10001;
  top: 50%;
	transform: translateY(-50%);
	
	/* #prev, #nextボタンの薄い縁取り */
     text-shadow:
     -1px -1px 2px rgba(0,0,0,0.2),
      1px -1px 2px rgba(0,0,0,0.2),
     -1px  1px 2px rgba(0,0,0,0.2),
      1px  1px 2px rgba(0,0,0,0.2);
}

#prev { left: 8px; }
#next { right: 8px; }

#close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
	z-index: 10002;
	
		/* #closeボタンの薄い縁取り */
	     text-shadow:
     -1px -1px 2px rgba(0,0,0,0.2),
      1px -1px 2px rgba(0,0,0,0.2),
     -1px  1px 2px rgba(0,0,0,0.2),
      1px  1px 2px rgba(0,0,0,0.2);
}

#caption {
  margin-top: 10px;
  font-size: 1rem;
  color: #eee;
  text-align: center;
  max-width: 90%;
  word-wrap: break-word;
  white-space: normal;
  line-height: 1.4;
}

/* ---------- ギャラリー内のレスポンシブ：スマホは3列 ---------- */
@media (max-width: 768px) {
  .gallery { column-count: 3; column-gap: 14px; }
	.gallery figure { margin-bottom: 8px; 
		 		 	 margin: 0 0 10px;      
	}
  #prev, #next { font-size: 1.6rem; padding: 6px; }
  #close { font-size: 1.6rem; }
}


/* ---------- 画像拡大表示時に出る、キャプション（figcaption）の文字指定 ---------- */
#caption {

  font-size: 0.8rem;
  line-height: 1.7;
  font-weight: 400;
  color: #fff; /* 背景に合わせて文字色 */
  text-align: center; /* お好みで中央寄せ */


}


/* -----------------------------------------------------------------------------------
8_ギャラリーここまで
----------------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------------
9_firefoxでbrのみの使用無効を有効に ここから
----------------------------------------------------------------------------------- */
br.gap {
  display: block;
  margin-bottom: 1em;
}

/* -----------------------------------------------------------------------------------
9_firefoxでbrのみの使用無効を有効に ここまで
----------------------------------------------------------------------------------- */







/* -----------------------------------------------------------------------------------
10_レスポンシブ_ここから
画面サイズ650px以下で適用
----------------------------------------------------------------------------------- */

@media (max-width:650px) {
	
	
		body {
/* ページ全体と背景指定 */	
		padding: 45px 15px 30px 15px; /* 上右下左 */	
		margin: 0px;
		min-width: 360px; /* 最小幅 */
		
/* 背景画像 */
    background-image: url(../2023_img/2023_kusamusubu_bg.jpg);
    
    /* 横幅は120%で拡大、縦は自動比率で調整 */
    background-size: 180% auto; 
    
    /* 上端を基準に中央寄せ */
    background-position: top center;
    
    /* 縦方向に繰り返す */
    background-repeat: repeat-y;
    
    /* スマホでは固定させずスクロールに合わせる */
    background-attachment: scroll;

    /* 画像非表示時の背景色 */
    background-color: #000;
		
	
	}	/* body閉じる */					
	
	
	
	
	
/* artworkタイトル文字_個別指定
------------------------------- */
.font-title {
  font-family: 'Sofia', cursive;
  font-size: 3rem;
		line-height: 90px;
}
	
	
	
	
/* メインナビ
------------------------------- */
  .main-nav {
    flex-direction: column; /* ナビを縦並びに変更 */
    align-items: center;    /* 中央寄せ */
    gap: 10px;
    font-size: clamp(18px, 1.2vw, 30px);/* 文字サイズを画面サイズに合わせて可変(最小値, 基準値, 最大値) */
  }
	

/* 親_白透過
------------------------------- */
.oya {

  margin: 0px 0px 15px 0px; /* 上右下左 */
  padding: 5px 20px 5px 20px;

}	
	

	
	
/* -----------------------------------------------------------------------------------
10_レスポンシブここまで
----------------------------------------------------------------------------------- */	
} /* @mediaの閉じ */