@charset "UTF-8";
/* 気になる景色CSSファイル */

body.samplebody {
	font-family: "meiryo", "メイリオ", "ヒラギノ角ゴPro W3", "Hiragino KaKu Gothic Pro", "ＭＳ Ｐゴシック", verdana, Osaka, "trebuchet ms", sans-serif;
	font-size: 80%;
	margin: 0px;
	padding: 0px;
	text-align: center; /* bodyのtext-alignをcenterとし、#container の横marginをautoとすることで、ページコンテンツ全体のセンタリングが出来ます */
	color: #333333;
	background-image: url(../../img/bg/bg_main_hottopic.gif); /* 全体の背景イメージをここで設定しています */
	background-repeat: repeat; /* 背景画像自体は 48px x 48px の大きさしかないので、繰り返し表示（タイリング）により、画面全体に適用しています */
}

.samplebody #container {
	width: 960px; /* メインエリアの幅は現在、1024px（モニタのVGA表示）に合わせることが主流です。スクロールバーやアプリケーションの枠幅を考慮し、1024よりも多少小さめの設定をします */
	margin: 0 auto; /* bodyのtext-alignをcenterとし、#container の横marginをautoとすることで、ページコンテンツ全体のセンタリングが出来ます */
	text-align: left;
	background: #fff;/* #ffffff（白）の短縮形　*/
	border-left: 10px solid #fff; /* コンテナ左に白の余白を作ります。デザイン上の措置です */
	border-right: 10px solid #fff; /* コンテナ右に白の余白を作ります。デザイン上の措置です */
	border-bottom: 20px solid #fff; /* コンテナ下、フッターとの境界に白の余白を作ります。デザイン上の措置です */
}


/* 共通クラス */

.clearfloat { /* このクラスは、div またはブレークエレメントに適用される必要があり、また、フローティングエレメントが完全に含まれているコンテナの末尾の直前にある最後のエレメントである必要があります */
	clear: both;
	height: 0;
	font-size: 1px;
	line-height: 0px;
}


/* ヘッダー */

.samplebody #header {
	margin: 0;
	padding: 2px 0 0 0; /* 上側のみの余白を作ります。 */
	width: 100%;
}

.samplebody #header .logo { /* ロゴ */
	margin: 5px 0 0 0;
	padding: 0;
	float: left;
	width: 300px;
	height: 50px;
	background: url(../img/img/logo_e.png) no-repeat left top;
}

.samplebody #header .logo a {
	width: 300px;
	height: 50px;
	overflow: hidden;
	display: block;
	outline: none;
	text-indent: -9999px; /* text-indentをマイナスの値とすることで、画像上にテキストが表示されることを防げます */
}

.samplebody #header h1 {
	margin: 10px 0 5px 25px;
	padding: 0;
	float: left;
	width: 150px;
	height: 50px;
	line-height: 16px;
	font-size: 14px;
	font-weight: normal; /* h1タグは標準で太字設定になるので、標準のフォントの太さに変更します */
	color: #666666;
}

.samplebody #header .freedial { /* フリーダイヤル */
	margin: 5px 0 0 15px;
	padding: 0;
	float: left;
	width: 250px;
	height: 50px;
	background: url(../img/img/header_e.png) no-repeat;
	border: 0;
	text-indent: -9999px;
}

/*　追加　*/
.samplebody #header .freedial a:hover {
	background: url(../img/img/header_e.png) no-repeat;
}

.samplebody #header .freedial a {
	width: 250px;
	height: 50px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}
/*　追加　*/

.samplebody #header .btn_reservation { /* お申し込み（リザベーション）ボタン */
	float: left;
	width: 93px;
	height: 50px;
	margin: 5px 0 0 18px;
	padding: 0;
	background: url(../img/btn/btn_header_rsv_e.jpg) no-repeat; /* 画像ボタンの一番簡単な設定方法は、divの背景にボタン画像を配置することです */
}

.samplebody #header .btn_reservation a:hover {
	background: url(../img/btn/btn_header_rsv_over_e.jpg) no-repeat; /* マウスオーバーでボタン画像を切り替える場合は、a:hover の背景にマウスオーバー時の画像を設定します */
}

.samplebody #header .btn_reservation a {
	width: 93px;
	height: 50px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #header .btn_contact { /* お問い合わせ（コンタクト）ボタン */
	float: right;
	width: 93px;
	height: 50px;
	margin: 5px 0 0 0px;
	padding: 0;
	background: url(../img/btn/c_btn_header_contact.gif) no-repeat;
}

.samplebody #header .btn_contact a:hover {
	background: url(../img/btn/c_btn_header_contact_over.gif) no-repeat;
}

.samplebody #header .btn_contact a {
	float: right;
	width: 93px;
	height: 50px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

.samplebody #header .btn_catalog { /* 資料請求（カタログ）ボタン */
	float: right;
	width: 93px;
	height: 50px;
	margin: 5px 0 0 0px;
	padding: 0;
	background: url(../img/btn/btn_header_catalog.jpg) no-repeat;
}

.samplebody #header .btn_catalog a:hover {
	background: url(../img/btn/btn_header_catalog_over.jpg) no-repeat;
}

.samplebody #header .btn_catalog a {
	width: 93px;
	height: 50px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	outline: none;
}

/* メニュー */

.samplebody #menu {
	margin: 0;
	padding: 0;
	width: 100%;
}

/* メインビジュアル */

.samplebody #mainvisual {
	margin: 0;
	padding: 0;
	width: 100%;
}

/* メインコンテナ */
/* サイドメニューとメインコンテンツの高さが異なる場合、直接サイドメニューとメインコンテンツのdivをfloatで設定すると、高さの低い方に背景画像が表示されてしまいます。*/
/* メインコンテナでサイドメニュー・メインコンテンツ双方を格納する「器」を用意することで、どちらの高さにも左右されず、ここで設定する背景（今回は白）が表示されます。*/
/* 今回のケースでは全体のコンテナの背景も白ですので影響はありませんが、もしサイドメニューの背景色と全体の背景色が異なる場合には、カバーを設置する方が良いです。 */

.samplebody #maincontainer {

	margin: 5px 0 0 0;  /*サブナビからの上下マージンを15pxに設定 */
	padding: 0;
	background: #fff; /* chapter3-1で修正 */

}


/* サイドメニュー */

.samplebody #sidemenu {
	margin: 5px 0 0 0;
	padding: 0;
	float: right;
	width: 220px;
	background: #E2E2E2;
}

.samplebody #sidemenu a:link { color: #333333; text-decoration: none; } /* text-decoration を none に設定することで、リンクの下線を非表示に出来ます */
.samplebody #sidemenu a:visited { color: #333333; text-decoration: none;  }
.samplebody #sidemenu a:hover { color: #ff3333; text-decoration: underline;  } /* マウスオーバー時にはリンクの下線を表示するように、underline設定をしています */
.samplebody #sidemenu a:active { color: #333333; text-decoration: none;  }



/* メインコンテンツ */

.samplebody #maincontent {
	float: left; /* float:right とすることにより、メインコンテンツ領域の右端を960px（全体のページ幅）にぴったり合わせることが出来ます。*/
	width: 740px;
	margin: 0 0 0 0;
	padding: 0;
}


/* メインコンテンツ下側 1列本文表示 */

.samplebody #maincontent .main_header { /* メインコンテンツ本文のタイトル＋表示切り替えタブ表示用ヘッダー */
	margin: 5px 0 0 0;
	float: left;
	padding: 0;
	border-bottom: 2px solid #4B4B4B; /* タブ下側の下線をここで描画します */
}

.samplebody #maincontent .main_header a {
	text-decoration: underline;
	color: #FF0000;
}

.samplebody #maincontent .main_header a:hover {
	text-decoration: underline;
	color: #00cc66;
}

.samplebody #maincontent .main_header h3 { /* メインコンテンツ本文のタイトルをh3タグで実装します */
	background: url(../img/bg/bg_main_topicicon.gif) no-repeat left top;
	margin: 0;
	padding: 6px 0 6px 0;
	width: 730px;
	height: 18px;
	float: left;
	font-size: 18px;
	line-height: 18px;
	border-bottom: 1px solid #4B4B4B;
	text-indent: 20px;
	text-decoration: none;
	overflow: hidden;
	color: #666666;
}

.samplebody #maincontent .main_header TH { /* メインコンテンツ本文のタイトルをTHタグで実装します */
  font-size         : 10pt;
/*  background        : #ffffd9;
  border            : 1px solid #666666;
  padding           : 3px;*/
}

.samplebody #maincontent .main_header TD { /* メインコンテンツ本文のタイトルをTDタグで実装します */
  font-size         : 10pt;
/*  background        : #ffffd9;
  border            : 1px solid #666666;
  padding           : 3px;*/
}

.samplebody #maincontent .main_header .top_more { /* メインコンテンツ本文に対する「別のコンテンツ」へのリンク場所をh3タグ領域の右側に用意します */
	background: url(../img/lst/list_arrow_blue_normal.gif) 0.5em center no-repeat;
	margin: 0;
	padding: 0;
	width: 240px;
	height: 30px;
	float: left;
	font-size: 14px;
	line-height: 30px;
	border-bottom: 1px solid #4B4B4B;
	text-indent: 22px;
	text-decoration: none;
	overflow: hidden;
}
.samplebody #maincontent .main_header ul.tab { /* コンテンツのタブ切り替えをリストで実装します */
	list-style-type: none;
	margin: 15px 0 0 0;
	padding: 0;
}

.samplebody #maincontent .main_header ul.tab li.normal { /* 非選択のタブ表示設定 */
	background: url(../img/btn/btn_main_tab.jpg) no-repeat;
	text-indent: 28px;
	width: 227px;
	height: 38px;
	margin: 0 0 0 15px;
	padding: 13px 0 0 0;
	float: left;
	font-size: 14px;
	line-height: 38px;
}

.samplebody #maincontent .main_header li.selected { /* 選択中のタブ表示設定 */
	background: url(../img/btn/btn_main_tab_selected.jpg) no-repeat;
	text-indent: 30px;
	width: 227px;
	height: 45px;
	margin: 0 0 0 15px;
	padding: 6px 0 0 0;
	font-size: 16px;
	float: left;
	color: #ffffff;
	line-height: 45px;
}

.samplebody #maincontent p.main_textarea { /* メインコンテンツ本文領域 */
	margin: 10px 20px 0 20px;
	padding: 0;
	width: 720px;
	font-size: 14px;
	line-height: 22px;
	color: #333;
}

.samplebody #maincontent .btn_pagetop { /* 「このページの先頭へ」ボタンを画面に対して右揃えで表示します */
	background: url(../img/lst/list_arrow_blue_up.gif) 0 0.6em no-repeat;
	font-size: 12px;
	line-height: 20px;
	height: 20px;
	text-indent: 15px;
	margin: 0 20px 0 20px;
	padding: 0;
	float: right;
}

.samplebody #maincontent .btn_pagetop_cover {
	margin: 5px 0 0 0;
	padding: 0;
	width: 100%;
}

.samplebody #maincontent .btn_pagetop_cover a {
	text-decoration: none;
	color: #333;
}

.samplebody #maincontent .btn_pagetop_cover a:hover {
	text-decoration: underline;
	color: #4B4B4B;
}



/* chapter6-1で修正・追加 */

/* フッター */

.samplebody #footer {
	background: #000000;
	padding: 12px 0 10px 0;
	margin: 0;
	width: 100%;
	color: #FFFFFF;
	font-size: 12px;
	text-align: center;
	line-height: 22px;
}

.samplebody #footer a {
	color: #ffffff;
	text-decoration: none;
}

.samplebody #footer a:hover {
	text-decoration: underline;
}

.samplebody #footer ul {
	display: inline; /* display: inline を設定することで、横方向表示リスト（一行表示リスト）を作成できます */
	margin: 0;
	padding: 0;
	border-left: 1px solid #ffffff; /* ul の左側境界線と、li の右側境界線により、表示項目間のセパレータ（境界線）を描画します */
}

.samplebody #footer li {
	display: inline; /* display: inline を設定することで、横方向表示リスト（一行表示リスト）を作成できます */
	padding-left: 7px;
	padding-right: 7px;
	border-right: 1px solid #ffffff; /* ul の左側境界線と、li の右側境界線により、表示項目間のセパレータ（境界線）を描画します */
}

.samplebody #footer p {
	margin: 0;
	padding: 5px 0;
}



/* プルダウンメニューの追加 */

#dropmenu {
  list-style-type: none;
  width: 960px;
  margin: 0px auto 0px;
  padding: 0;
    
  position: fixed; /*relative→fixed */
z-index: 100 /*一番前に持ってきた */
    
}
#dropmenu li {
  position: relative;
  width: 20%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
#dropmenu li a {
  display: block;
  margin: 0;
  padding: 16px 0;
  background: #ff9900;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
}
#dropmenu li ul {
  list-style: none;
  position: absolute;
  z-index: 100;
  top: 100%;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}
#dropmenu li ul li {
  overflow: hidden;
  width: 100%;
  height: 0;
  color: #fff;
  transition: .2s;
}
#dropmenu li ul li a {
  padding: 13px 15px;
  background: #ff0000;
  text-align: left;
  font-size: 12px;
  font-weight: normal;
}
#dropmenu > li:hover > a {  background: #ff0000 }
#dropmenu > li:hover li:hover > a {  background: #cc0000 }
#dropmenu > li:hover > ul > li {
  overflow: visible;
  height: 38px;
}
#dropmenu li ul li ul {
  top: 0;
  left: 100%;
}
#dropmenu li:last-child ul li ul {
  left: -100%;
  width: 100%;
}
#dropmenu li ul li ul:before {
  position: absolute;
  content: "";
  top: 13px;
  left: -20px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left-color: #cc9900;
}
#dropmenu li:last-child ul li ul:before {
  position: absolute;
  content: "";
  top: 13px;
  left: 200%;
  margin-left: -20px;
  border: 5px solid transparent;
  border-right-color: #cc9900;
}
#dropmenu li ul li:hover > ul > li {
  overflow: visible;
  height: 38px;
}
#dropmenu li ul li ul li a {  background: #616d0b }
#dropmenu li:hover ul li ul li a:hover {  background: #005ebb }


/* CSS追加記述 */
#toiawase{
	position:fixed;
	bottom:30px;
	left:30px;
	z-index:999;
	}

#cartlook{
	position:fixed;
	bottom:30px;
	left:160px;
	z-index:999;
	}


/* メイン画像のスライドCSS追加記述 */
.cp_cssslider {
	width: 960px;
	height: 200px;
	overflow: hidden;
	margin: 0em auto;
	border: 0px solid #ffffff;
	box-shadow:0px 0px 0px 0px rgba(0,0,0,0.0);
}
.cp_slide_item {
	width: 960px;
	height: 200px;
	float: left;
	position: relative;
}
.cp_slidewrapper {
	width: 500%;/* slideの枚数×100% */
	position: relative;
	left: 0;
	animation: slider 40s infinite ease;/* スピード */
}
@-webkit-keyframes slider {
	/* 100%を枚数で割った%に割り振る */
	0% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
	20% {
	-webkit-transform: translateX(-960px);
	transform: translateX(-960px);
	}
	40% {
	-webkit-transform: translateX(-1920px);
	transform: translateX(-1920px);
	}
	60% {
	-webkit-transform: translateX(-2880px);
	transform: translateX(-2880px);
	}
	80% {
	-webkit-transform: translateX(-3840px);
	transform: translateX(-3840px);
	}
	100% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
}
@keyframes slider {
	/* 100%を枚数で割った%に割り振る */
	0% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
	20% {
	-webkit-transform: translateX(-960px);
	transform: translateX(-960px);
	}
	40% {
	-webkit-transform: translateX(-1920px);
	transform: translateX(-1920px);
	}
	60% {
	-webkit-transform: translateX(-2880px);
	transform: translateX(-2880px);
	}
	80% {
	-webkit-transform: translateX(-3840px);
	transform: translateX(-3840px);
	}
	100% {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
}