@charset "UTF-8";


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

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;

 }


/* about & contact 文字_個別指定
------------------------------- */
.font-title {
  font-family: 'Sofia', cursive;
  font-size: 3rem;
  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: 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;

}


/* -----------------------------------------------------------------------------------
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_画像関係ここから
----------------------------------------------------------------------------------- */


/* グッズ写真サイズindexページ
------------------------------- */
.img-goods {
    
    max-width: 130px;
    width: auto;
    height: auto;

    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35); /* 影 */
    border-radius: 3px 3px 3px 3px; /* 角丸指定 */
    border: dotted 1px #8d8d8d;  /* ボーダーライン */
    padding: 5px;
    background: #fff;
}


/* 親_白透過_画像重ね位置指定_ボックス飾り_花右側
------------------------------- */
.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_firefoxでbrのみの使用無効を有効に ここから
----------------------------------------------------------------------------------- */
br.gap {
  display: block;
  margin-bottom: 1em;
}

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







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

@media (max-width:650px) {
	
	
		body {

    /* ページ全体の余白を指定（上:45px, 右:15px, 下:30px, 左:15px） */
    padding: 45px 15px 30px 15px; 
    
    margin: 0;                /* ページ外側の余白をリセット */
    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閉じる */					
		
	
	
	
	
/* about & contactタイトル文字_個別指定
------------------------------- */
.font-title {
  font-family: 'Sofia', cursive;
  font-size: 2.5rem;
		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;

}	
	
/* メールアドレス画像を横幅内におさめる
------------------------------- */
.resizeimage {
  max-width: 100%; /* ← 親より大きくならない */
  height: auto;    /* アスペクト比維持 */
		display: block;

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