@charset "utf-8";
/* ------------------------------------------------------------------------ */
/* 	全端末（PC・タブレット・スマホ）共通設定
/* ------------------------------------------------------------------------ */
body {
	margin: 0px -15px;
	padding: 0px;
	line-height: 1.8;
	background: #fff;
/*	font-weight: 300; */
	overflow-x: hidden;
	color: #848484; 
	
/*
	color: #666;
	font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
	-webkit-text-size-adjust: none;
*/
}

/* フォント系
---------------------------------------------------------------------------*/
h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}

h2 {
	clear: both;
	margin-top: 20px;
	margin-bottom: 1em;
	font-size: 30px;
	text-align: center;
	letter-spacing: 0.2em;
	line-height: 1.5;
	padding-bottom: 0.5em;
	border-bottom: 4px dotted #848484;
	
}

h3 {
	font-size: 1.4em;
	clear: both;
	padding: 0.5em 0;/*線上下の余白*/
	border-bottom: 4px dotted #006633;
	margin: 15px 0;
	color: #006633;
}

.gothic {
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

.mincho {
  font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif;
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1);
  -webkit-text-stroke-width: 0.1px;
}

.small{
	font-size: 0.5em;
}

.red {
	color: red;
}

.white {
	color: white;
}

.bk_green{
background:rgba(28,82,5,0.8);
background-size:cover;
text-shadow: 2px 2px 4px #666;
}

.naname{
	display:inline-block;
	transform: rotate(20deg);
	letter-spacing: normal;	
}

/*配置設定
---------------------------------------------------------------------------*/
 dt {
	float: left;	/*左に回り込み*/
}
 dd {
	padding-left: 7em;	/*左に空ける余白*/
}

/*画像のフロート */
img.fr {
	float: right;
	margin-left: 1.2em;
	margin-bottom: 0.2em;
	max-width: 100%;
	width: 25%;
}
img.fl {
	float: left;
	margin-right: 1.2em;
	margin-bottom: 0.2em;
	max-width: 100%;
	width: 25%;
}


/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #666;		/*リンクテキストの色*/
	transition: 0.4s;	/*マウスオン時の移り変わるまでの時間設定。0.4秒。*/
}
a:hover {
	color: #b52654;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}

/*ナビメニューの文字間 */
#Navber{
	color: #b52654!important;
	letter-spacing: 0.1em!important;	
}

#section-whatsnew,
#section-coshiabura,
#section-recipe,
#section-access{
	padding: 3em 0 0 0;
}

/*page topへ戻る
---------------------------------------------------------------------------*/
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: -50px;
  background: #ef3f98;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}



/*白背景ボックス
---------------------------------------------------------------------------*/
.box_white{
    padding: 1em 1.5em 2em 1.5em;
	border-radius: 10px;
    margin: 2em 0;
    background: white;	/*背景色（古いブラウザ用）*/
	background: rgba(255,255,255,0.9);	/*背景色。255,255,255は白の事で、0.9は色が90%ついた状態の事。*/
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
	letter-spacing: 0.1em;
}

/*フッター
---------------------------------------------------------------------------*/
#footer {
	background:rgba(28,82,5,0.8);
	background-size:cover;
	text-shadow: 2px 2px 4px #666;

	padding: 60px 0 40px;
}
#footer p {
  color: rgba(255, 255, 255, 0.7);
	margin-left: 5em;
  letter-spacing: 0.1em;
  font-size: 14px;
}
#footer p a {
  color: rgba(255, 255, 255);
}


/*背景アニメーション
---------------------------------------------------------------------------*/
.photo {
	position: fixed;z-index: -1;
	animation-duration: 2.5S;	/*アニメーションの実行時間。秒。*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを、完了後は最後のキーフレームを維持*/
	animation-timing-function: ease-in-out;	/*速度の変化パターン*/
}

.photo1 {
	left: -10%;	/*ウィンドウ左からの配置*/
	top: -20%;	/*ウィンドウ上からの配置*/
	animation-name: move1;
	animation-delay: 0.4s;	/*アニメーションを0.4s遅れて開始*/
}

.photo2 {
	right: -15%;
	bottom: -15%;
	animation-name: move1;
	animation-delay: 0.8s;
}

.photo3 {
	left: -20%;
	bottom: -20%;
	animation-name: move3;
	animation-delay: 1s;
}

.photo4 {
	right: -10%;
	top: -10%;
	animation-name: move2;
	animation-delay: 1.2s;
}

.photo5 {
	left: 20%;
	bottom: -20%;
	animation-name: move1;
	animation-delay: 1.4s;
}


/*背景アニメーション設定
---------------------------------------------------------------------------
opacityは透明度。0は色が0%、100%は色が100%出た状態。
scaleは大きさ。0はゼロ、1は100%のサイズ。
rotateは回転角度。
---------------------------------------------------------------------------*/

/*--- move1 の設定 ---*/
@keyframes move1 {
/*0コマ目*/
0% {
	opacity: 0;
	transform: scale(0) rotate(0deg);
}
/*100コマ目0.8*/
100% {
	opacity: 1;
	transform: scale(1) rotate(40deg);
}
}

/*--- move2 の設定 ---*/
@keyframes move2 {
/*0コマ目0.6*/
0% {
	opacity: 0;
	transform: scale(0) rotate(0deg);
}
/*100コマ目*/
100% {
	opacity: 1;
	transform: scale(0.85) rotate(-150deg);
}
}

/*--- move3 の設定 ---*/
@keyframes move3 {
/*0コマ目0.4*/
0% {
	opacity: 0;
	transform: scale(0) rotate(0deg);
}
/*100コマ目*/
100% {
	opacity: 1;
	transform: scale(0.7) rotate(180deg);
}
}








@keyframes test_main {
/*0コマ目*/
0% {
	opacity: 0;
	top: 10px;
}
/*100コマ目*/
100% {
	opacity: 1;
	top: 0px;
}
}
/*test_mainブロック*/
#test_main {
	animation-duration: 0.5S;	/*アニメーションの実行時間。秒。*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを、完了後は最後のキーフレームを維持する*/
	animation-name: test_main;	/*上のアニメーション設定で使っているkeyframesの名前。test_main。*/
	animation-delay: 4s;		/*アニメーションを遅れて開始させる指定。test_mainを出力するまでの待機時間。*/
	position: relative;
	width: 100%;
	height: 100%;
	overflow: auto;
}