@charset "UTF-8" ;

/* ボディ */
body
{
	margin: 0 ;		     /* スペース */
	padding: 0px ;		 /* 余白 */
	font-size: 13px ;	 /* 文字サイズ */
	line-height: 1.618 ;  /* 行の高さ */
}

/*
a {text-decoration: none;}            リンク先、通常時は下線なし
a:hover {text-decoration: underline;}　マウスオーバー時に下線表示
*/


/* ヘッダー */
header{
	margin-left:auto;
	margin-right:auto;
	margin-bottom: -10px;    
	padding:0;
	}

/* ヘッダーの箱の装飾 */
.header_box{
	border-bottom: 3px solid #888 ;		/* 枠線 */
	padding: 2em 0 ;			/* 上下の内側余白 */
	margin-top: -2em;           /* 上の外側余白 2025.12.17修正 */
	margin-bottom: 0.5em ;			/* 他のブロックとのスペース 1em=13px*/
	background: #E0E0E0 ;			/* 背景色(確認用) */
} 


/* パンくずリスト */
.bread{
	margin: 0;
	padding: 0;
}

.bread ul{
	padding-left: 5px;		/* 左端 */	display: flex;			/* リスト横並び */
	list-style-type: none;	/* リスト黒丸消す*/
    color:blue;
}

.bread li a{
	padding: 1px;			/* リンクの間の間隔 */
	color: blue;
	font-size: 12px;
	text-decoration: none;	/* リンク下線消す */
}

.bread li a:hover{
	background-color: chocolate;	/* カーソル時、色変わる */
}
	
.bread li::after{			/* リンク間の　＞ */
	content:">";
	margin-left: 5x;
	margin-right: 5px;
	color:brown;
}

.bread li:last-child{		/* 最後ページの装飾 */
	font-weight: bold;
	color:firebrick;
	font-style: italic;

}							

.bread li:last-child::after{	/* 最後ページの　＞なし */
	content:"";
}


/* メイン */

main
{
	margin-top: 0px;		/* 外側余白 */
	margin-bottom: 0px;		/* 外側余白 */
	margin-left: 10px;		/* 外側余白 */
	margin-right: 10px;		/* 外側余白 */
	padding: 0px 15px;       /* 内側余白 上下　左右 */
	border: none ;		    /* 枠線 */
}

/* max-widthは、箱自体を縮めるが、その中の文章はcenterに寄ってしまい、text折り返しもcenterに寄る。なので、↓の.center_box p が登場する。2025.01.05  center_boxと center_box pはセットで理解｜boxを中央に寄せて、その中のP文章は中央ではなく、左端で揃える、という意味 →参照　　https://blog.universe-web.jp/1477/　　*/

.center_box {
 	         max-width: 600px;     /* ブロック要素を中央にするために････ */
	         margin: 0 auto;     /* 上下0｜左右auto */
             text-align: center;
            }

.center_box p {                      /* →Pを数個横に並べることできる。しかしpとdivは横並びなしで改行*/               display: inline-block; /* pブロック要素をインライン化する→*/
			text-align: left;		/* P中のテキストの折り返しを左揃え */
            }

.shohinbox-center {                           /* 賞品の囲み枠 */
			border: 2px solid #333;     /*　枠線の太さ、種類solid実線,dashed破線など指定、色 */
			padding: 5px 20px;              /* 内側余白（上下左右）、指定なしは窮屈*/
			margin: 20px auto;          /* 外側余白、上下20の余白,左右は中央寄せの為auto*/
			background-color: #F7F3F3;  /* 背景色*/
			border-radius: 8px;         /* 角を丸く*/
			max-width: 400px;			/* 枠の左右の大きさを、ほどほどに*/
			}

.shohinbox-center p {
			max-width: 350px;			/* ブロック要素を中央にするために････ */
			display: inline-block;
			text-align: left;
			}



/* フッター */
footer
    {
	margin-left:auto;
	margin-right:auto;
	padding:0;
   }

.foot_box
{
	border-top: 3px solid #888 ;		/* 枠線 */
	text-align: center ;			/* テキスト、画像の真ん中寄せ */
	margin-top: 2em ;			/* 他のブロックとのスペース */
	padding: 1em 0 ;			/* 上下の余白 */
	background: #B6B6B6 ;
}