@charset "utf-8";
/* CSS Document */

body {
	margin: 0px;
	padding: 0px;
	color: #333;	/*全体の文字色*/
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*
	font-size: 15px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
	background: #eeeeee;	/*背景色*/
	-webkit-text-size-adjust: none;
}

table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}

/*
------------------------------------------
TOPバナー画像
------------------------------------------
*/

div#campaign {
	width:96%;
	margin:0 auto;
}

div#campaign img{
	width:100%;
	padding-top:10px;
}



/*
------------------------------------------
<div id="main"></div>で使用
------------------------------------------
*/

#main{
	width:90%;
	height:auto;
	margin:0 auto;
	padding:2% 3%;
	background-color:#FFFFFF;
	border-radius:8px;
	border:#CCC 1px solid;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.5);	
	margin-bottom:40px;
}

#main img{
	width:100%;
	height:auto;
	margin:1% auto;
	vertical-align:bottom;	
}

#main a{
	text-decoration:none;
}

#main p {
	line-height:140%;
}


#main h1 {
	clear: both;
	margin-bottom: 20px;	/*見出しの下にとるスペース*/
	padding: 6px 20px;		/*上下、左右への余白*/
	border: 1px solid #ccc;		/*枠線の幅、線種、色*/
	border-radius:5px;
	background: linear-gradient(#fff, #efefef);	/*グラデーション*/
	color:#777777;
	font-size: 14px;
	font-weight:bold;
	padding-left: 10px;
	padding-right: 10px;

}

#main h1::first-letter {
	 border-left: 3px solid #C30;	/*左側の線の幅、線種、色*/
	 padding-left: 10px;				/*左側の線と、テキストとの余白*/
}

#main h2{
	color:#fff;
	padding: 0.5em;/*文字周りの余白*/
	display: block;/*おまじない*/
	line-height: 1.0;/*行高*/
	background: #ffb400;/*背景色(デフォルトはオレンジ)*/
	vertical-align: middle;/*上下中央*/
	border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
	font-size:0.95em;
	font-weight:bold;
}

#main h2:before {
	content: '●';
	color: white;
	margin-right: 5px;
}
/*
------------------------------------------
テーブル部分
------------------------------------------
*/
/*ta1設定*/
.ta1 {
	width: 100%;
	margin: 0 auto 20px;
}
.ta1, .ta1 td, .ta1 th {
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	padding: 5px;	/*ボックス内の余白*/
	word-break: break-all;
}
/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi {
	width: auto;
	text-align: left;	/*左よせ*/
	background: #eee;	/*背景色*/
}
/*ta1の左側ボックス*/
.ta1 th {
	width: 25%;	/*幅*/
	text-align: center;	/*センタリング*/
	font-weight: normal;
	background: #FFC;
}
/*左側ボックスに画像を入れた場合の設定*/
.ta1 th img {
	width: 100%;
}

.ta1, .ta1 td, .ta1 th {
	padding: 5px;	/*ボックス内の余白*/
}


/*ta2設定*/
.ta2 {
	width: 100%;
	margin: 0 auto 20px;
}
.ta2, .ta2 td, .ta2 th {
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	padding: 5px;	/*ボックス内の余白*/
	word-break: break-all;
}
/*テーブル１行目に入った見出し部分*/
.ta2 th.tamidashi {
	width: auto;
	text-align: center;
	background: #c30;	/*背景色*/
}
/*ta2の左側ボックス*/
.ta2 th {
	width: 25%;	/*幅*/
	text-align: center;	/*センタリング*/
	font-weight: normal;
	background: #FFC;
}
/*左側ボックスに画像を入れた場合の設定*/
.ta2 th img {
	width: 100%;
}

.ta2, .ta2 td, .ta1 th {
	padding: 5px;	/*ボックス内の余白*/
}


/*ta3設定*/
.ta3 {
	width: 100%;
	margin: 0 auto 20px;
}
.ta3, .ta3 td, .ta3 th {
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	padding: 5px;	/*ボックス内の余白*/
	word-break: break-all;
}
/*テーブル１行目に入った見出し部分*/
.ta3 th.tamidashi {
	width: auto;
	text-align: left;	/*左よせ*/
	background: #eee;	/*背景色*/
}
/*ta1の左側ボックス*/
.ta3 th {
	width: 42%;	/*幅*/
	text-align: center;	/*センタリング*/
	font-weight: normal;
	background: #FFF;
}
/*左側ボックスに画像を入れた場合の設定*/
.ta3 th img {
	width: auto; !important;
}

.ta3, .ta3 td, .ta3 th {
	padding: 10px;	/*ボックス内の余白*/
}

/*
------------------------------------------
ページ内の一部文章を囲いたい時に使うやつ。<div class="box"></div>
------------------------------------------
*/
.box {
	border:#CCC 1px solid;
	border-radius:5px;
	padding:3%;
	background:#fff;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}

.box2 {
	border:#CCC 1px solid;
	border-radius:5px;
	padding:3%;
	background:#ffc;
}

.box3 {
	border:#CCC 1px solid;
	border-radius:5px;
	padding:2px 7px;
	background:#ffc;
	display:inline-block;
	margin:2px 0px;
}

.box4 {
	width: 100%;
	border:#00acee 1px solid;
	padding:2px 7px;
	background:#00acee;
	display:inline-block;
	color:#FFFFFF;
	text-align: center;
}



/*
------------------------------------------
水平な線を引く
------------------------------------------
*/
.hr_r {
	border:#C30 2px solid;
	width:auto;
	margin:3%;
}

.hr_gr {
	border:#090 1px dotted;
	width:auto;
	margin:3%;
}

.hr_bl {
	border:#000 1px dotted;
	width:auto;
	margin:3%;
}

/*
------------------------------------------
いっぱい改行する時
------------------------------------------
*/

.space_1{
	width:100%;
	height:1px;
}

.space_3{
	width:100%;
	height:3px;
}

.space_5{
	width:100%;
	height:5px;
}

.space_8{
	width:100%;
	height:8px;
}

.space_10{
	width:100%;
	height:10px;
	clear:both;
}

.space_20{
	width:100%;
	height:20px;
}

.space_40{
	width:100%;
	height:40px;
}


/*
------------------------------------------
文字の色<span class="指定の色名">文字</span>
------------------------------------------
*/

.red{
	color:#c30;
}

.white {
	color:#fff;
}

.green {
	color:#090;
}

.blue {
	color:#06F;
}

.gold {
	color:#DAA520;
}

.yuzu {
	color:#FFCC33;
}

.sky{
	color:#30d0f0;
}

.bold{
	font-weight:bold;
}



.text_s {
	font-size:0.85em;
}

.text_ss {
	font-size:0.6em;
}

.text_l {
	font-size:1.3em;
}



.line-height {
	line-height:140%;
}

/*ここから下はWeb版ページのデザイン関係かも*/
/*
------------------------------------------
ボタンが作れるらしい
------------------------------------------
*/

div#btn{
	width:95%;
	height:auto;
	margin:2% auto;
}

div#btn_left{
	width:48%;
	float:left;
}

div#btn_right{
	width:48%;
	float:right;
}

div#btn img{
	width:100%;
	border:#FFF 1px solid;
	box-shadow:#666 0px 2px 3px 0px;
}

div#btn a{
	text-decoration:none;
}



/*
------------------------------------------
�i�i�Љ�
------------------------------------------
*/


#praize_title{
	width:90%;
	height:auto;
	margin:0 auto;
	padding:2% 3%;
	background-color:#FFFFFF;
	border-radius:8px;
	border:#CCC 1px solid;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.5);	
	margin-bottom:20px;
}







/*
------------------------------------------
�J�����_�[��
------------------------------------------
*/

.prize_title {
	margin:0 auto;
	height:auto;
	font-size:16px;
	font-weight:bold;
	text-align:left;
	line-height: 1.6;
	vertical-align: middle;
}


div#Calender {
	height:100%;
}

div#Calender .the_date {
	float:left;
	display:block;
	width:5.7em;
	margin:5px 10px 0 0;
	padding:0;
	text-align:center;
	overflow:hidden;
	border-radius: 10px 10px 5px 5px;
}

div#Calender .red {
	background-color:#C00;
}

div#Calender .date_m {
	display:block;
	margin:-2px 0;
	padding:4px 0px 0px 0px;
	color:#fff;
	font-size:0.75em;
	font-weight:bold;
	text-align:center;
}

div#Calender .date_d {
	display:block;
	margin:4px;
	padding:7px 0;
	background-color:#fff;
	font-size:1.25em;
	font-weight:bold;
	text-align:center;
	color:#555;
	border-radius: 2px;
}


section{
	width: 100%;
}



.shadow{
	box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}


/*
------------------------------------------
商品タブ部分
------------------------------------------
*/

/*タブ切り替え全体のスタイル*/
.tabs {
	margin-top: 50px;
	padding-bottom: 10px;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	width: 100%;
	margin: 0 auto;
	/*
	border-left: 3px  solid #4b280b;
	border-right: 3px  solid #4b280b;
	border-bottom: 3px  solid #4b280b;
	border-top: 1px  solid #4b280b;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	*/
	
}

/*タブのスタイル*/
.tab_item {
	width: calc(99%/2);
	height: 70px;
	padding-top: 25px;
	border-left: 1px solid #C30;
	border-bottom: 3px solid #C30;
	background-color: #d9d9d9;
	line-height: 23px;
	font-size: 18px;
	text-align: center;
	color: #C30;
	display: block;
	float: left;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.7;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 0px 0px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#first:checked ~ #first_content,
#second:checked ~ #second_content,
#third:checked ~ #third_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #C30;
  color: #fff;
}


/*
--------------------------------
商品一覧
--------------------------------
*/

.float_box ul,
.float_box li,
.float_box p
{
  /* [余白をリセット] */
  margin: 0;
  padding: 5px;
}
.float_box li
{
  /* [黒点を非表示] */
  list-style-type: none;
}
.float_box li
{
  /* [要素を横並びにする] */
  float: left;
  width: 100%;
}
.float_box ul
{
  /* [縦幅を復帰。] */
  overflow: hidden;
}
.float_box .image
{
  /* [ボックス内を最大サイズにする] */
  max-width: 100%;
}
.float_box a
{
  /* [リンク文字の初期値を黒にする] */
  color: #0000ff;

  /* [リンクテキストのアンダーラインを非表示にする] */
  text-decoration: none;
}
.float_box .taste
{
  /* [商品名の文字を若干小さくする] */
  font-size: .875em;

  /* [商品名の文字をグレーにする] */
  color: #777;
}

.float_box h1 {
	width: 92%;
}



.float_box .name
{
  /* [価格を太文字にする] */
  font-weight: bold;
}

.float_box
{
  /* [はみ出ている部分を非表示] */
  overflow: hidden;
}