@charset "UTF-8";

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

body {



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

/* 背ページ全体の指定 */
  display: flex; /* フレックスボックス */
  justify-content: center; /* 縦中央寄せ */
  align-items: center; /* 横中央寄せ*/
  flex-flow: column; /* 上から下へ縦に並べる＿基本左 */

/* 基本の文字 */
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 0.8rem;
  line-height: 1.7; /* 行の高さ */
	font-weight: 400;
	
/* body内のマージンなど */
  margin: 0px;
  padding: 220px 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;

 }


/* minchiタイトル文字_個別指定 */
.font-title {
  font-family: 'Sofia', cursive;
  font-size: 5rem;
	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; /* 縦中央寄せ */
    flex-wrap: nowrap; /* 改行しない */
    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; /* 角丸指定 */
}



/* a_親フレックスボックス_白透過_画像有 ここから
------------------------------- */

.oya {
  max-width: 650px;
  width: 100%;
  height: auto;
  margin: 0px 0px 15px 0px; /* 上右下左 */
  padding: 80px 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;

}

/* a_親フレックスボックス_白透過_画像有ここまで 
------------------------------- */

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




/* b_親フレックスボックス_白透過_画像なしここから
------------------------------- */
.oya-2 {
  max-width: 650px;
  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;

}

/* b_親フレックスボックス_白透過_画像なしここまで
------------------------------- */




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


/* 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);


}
/* a_こども_リンクグループ縦配列_背景透明100%ここまで
------------------------------- */



/* 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);

}

/* b_こども_テキスト用_背景透明100%ここまで
------------------------------- */




/* 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);

}

/* c_こども_画像など横配列_背景透明100%ここまで
------------------------------- */



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





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


/* リンクボタン基本色 sns名、title
------------------------------- */
a {
text-decoration: none;
color: #000;  /* 文字色 */
	 }

/* リンクボタン形状 snsへのリンクなど
------------------------------- */
.button {
    width: 50%; /* ボタン横幅サイズ */
    margin: 0px 30px 0px 30px; /* 上右下左 */
    padding: 4px 5px 4px 5px; /* 上右下左 ボタンサイズ */
    border-radius: 20px; /* 角丸指定 */
	text-align: center;
	margin:  0 auto; /* ブロック要素中央寄せ */
  
    
	background-color: #dfdfdf; /* 背景色 */

}

/* リンクボタンホバー指定 snsへのリンクなど
------------------------------- */
.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（title部分のみ） */
a.bbb:hover{
	background: #CCCCCC;
	border-radius: 40px; /* 角丸指定 */
	
}


	/* 画像リンクフチ基本色
------------------------------- */
	a.img:link { 
	color: #000;
	background-color: rgba(0,0,0,0); /* 透明 */
 	background-image: repeating-linear-gradient(-45deg,#fff, #fff 2px,transparent, transparent 4px); /* 角度、色、太さ、透明度、間隔 */
	 } 


	 
/* 画像からのリンクホバーエフェクト指定 */
a.img:hover{
	background: #CCCCCC;
}


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






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

/* indexグッズ画像
------------------------------- */
.img-goods {
    
    max-width: 130px;
    width: 100%;
    height: auto;

    box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.35); /* 影について_左右の位置、上下の位置、ぼかし、広がり */
    border-radius: 3px 3px 3px 3px; /* 角丸指定 */
    border: dotted 1px #8d8d8d; 
    padding: 5px 5px;
   
}


/* 親フレックスボックス_白透過_画像重ね位置指定_丸アイコン
------------------------------- */
.icon-img {
	position: absolute;
	border-radius: 150px;

	/* 上からの距離 */
	top: -170px; 

	/* 中央寄せ */
	left:0;
	right:0;
	margin: auto;

}


/* 親フレックスボックス_白透過_画像重ね位置指定_花右側
------------------------------- */
.icon-img1 {
	position: absolute;
	
	/* 上からの距離 */
	top: -170px; 
	/* 左から */
	left:59%;
	margin: auto;

}


/* 親フレックスボックス_白透過_画像重ね位置指定_花左側
------------------------------- */
.icon-img2 {
	position: absolute;
	
	/* 上からの距離 */
	top: 30px; 
	/* 右から */
	right:60%;
	margin: auto;
	transform: rotate( -180deg );  /* 2D(平面)で回転 */
}

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


/* 親フレックスボックス_白透過_画像重ね位置指定_草のみ
------------------------------- */
.icon-img4 {
	position: absolute;
	
	/* 下からの距離 */
	top: -180px; 
	/* 右から */
	right:41%;
	margin: auto;
}

/* 親フレックスボックス_白透過_画像重ね位置指定_ボックス飾り_花右側
------------------------------- */
.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(平面)で回転 */
}

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


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


/* 水平線_点線
------------------------------- */
.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;
  z-index: 1; /* 重なり順 数値大が手前 */
}

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




/* -----------------------------------------------------------------------------------
9_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: 3;  /* 重なり順 数値大が手前 */
  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);  /* 矢印傾け */
}

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

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

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


/* -----------------------------------------------------------------------------------
11_レスポンシブ_ここから
画面サイズ650px以下で適用
----------------------------------------------------------------------------------- */
@media (max-width:650px) {
	
	
/* ページ全体と背景指定 */	
body {
	padding: 220px 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閉じる */	
	
	
	
/* 親フレックスボックス_白透過_画像重ね位置指定_丸アイコン
------------------------------- */
.icon-img {
	position: absolute;
		border-radius: 150px;
		width: 80%;
		max-width: 250px;

	/* 上からの距離 */
	top: -170px; 

	/* 中央寄せ */
	left:0;
	right:0;
		margin: auto;
	}
	
	

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

 
		
/* 
メインナビ
-------------------------------- */	
	
	

  .main-nav {
    flex-direction: column; /* ナビを縦並びに変更 */
    align-items: center;    /* 中央寄せ */
    gap: 10px;
    font-size: clamp(18px, 1.2vw, 30px);/* 文字サイズを画面サイズに合わせて可変(最小値, 基準値, 最大値) */
  }
	

	

/* メインナビメニュー */
.main-nav li {
		margin : 0px 10px 0px 10px;
		white-space: nowrap;
}
	
	
	
	
	
/* a_親フレックスボックス_白透過_ヘッダー部分に画像配置
------------------------------- */
.oya {

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

	}
		
	
/* b_親フレックスボックス_白透過_ヘッダー部分に画像配置なし
------------------------------- */
.oya-2 {

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

	}
	
	
	
	





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