/* ************************************************
 *	共通設定
 * ************************************************ */
* {
	margin: 0px;
	padding: 0px;
}
/*　font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳ ゴシック", "Osaka‐等幅";　*/
body {
	color: #000000;
	font-size: small;
	font-family:'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','ＭＳ Ｐ明朝','MS PMincho',serif;
	line-height: 1.6em;
	background-color: #ffffff;
	text-align:center;
}
/*　<br class="clear">タグを使うと<br style="clear:both">としなくても回り込み解除できる　*/
br.clear {
	clear: both;
	font: 0pt/0pt sans-serif;
}
/*　画像に境界線を付けない　*/
img {
	border: 0px;
}
/*　未訪問のリンク、クリック中のリンク、訪問済のリンクに関する設定（何もしない）。,は複数セレクタを繋ぐ　*/
a,a:link,a:active,a:visited{
    color: #000;
    text-decoration: none;
}
/*　リンクにカーソルが乗ったらアンダーラインを引く　*/
a:hover{
    color: #000;
    text-decoration: underline;
}
/*　ページ全体の幅、レイアウトをセンタリング（<div id="container">に全て含まれる必要があるのでは？mainも含まれてなかった...）オーバーフローした場合は切れる設定　*/
#container {
	margin:0 auto;
	width:980px;
	text-align:left;
	overflow: hidden;
}
/*　ヘッダー（ページタイトル、グローバルメニュー）　*/
.header {
	width:100%;
	height:180px;
	clear:left;
	background: url(https://file001.shop-pro.jp/PA01244/384/toppage/kks_headerLine.gif) no-repeat center bottom;
}
/*　ここで縦長のロゴ画像をbackgroundに設定して、javascriptでマウスオーバーする度にずらす事で羽の色を変化させている　*/
.header h2{
	font-size: 18px;
	height: 118px; margin: 0;padding: 34px 0 0;
	background: url(https://file001.shop-pro.jp/PA01244/384/toppage/kks_logobg.jpg) no-repeat center 0;
	overflow: hidden;
}
/*　display: block;とはインライン要素でもブロック要素にする設定　*/
.header h2 a{
    height:118px;
    display: block;
    margin: 0;
    padding: 0;
}
/*　画面左側メニューの幅　*/
.side {
	float: left;
	width:200px;
	margin: 20px 0 0;
}
/*　どこで使われているclassか不明　*/
.subtotal {
	padding:5px 0;
}
.stotal {
	text-align:right;
}
.total {
	padding:5px 0;
	border-top:1px solid #C3C3C3;
	text-align:right;
}
.postage {
	border-top:1px dotted #C3C3C3;
	border-bottom:1px dotted #C3C3C3;
	list-style-type:none;
	margin-bottom:5px;
}
.postage li {
	margin:5px 0;
	color:red;
	text-align:left;
}
.viewcart {
	padding:5px 0;
	text-align:center;
}
/*　画面右側の幅　*/
.main {
	float: right;
	width: 750px;
	margin: 10px 0 0;
}
/* 特定商取引法に基づく表示（返品など）ボタン */
p#sk_link_other {
	text-align:left;
	margin-top:10px;
}
p#sk_link_other a {
	font-size:12px;
}
/*　フッター（コピーライト）　*/
.footer {
    overflow: auto;
    width: 100%;
    padding: 80px 0 20px;
    clear: both;
}
/*　どこで使われているclassか不明　*/
#group-list {
	border-top:#838383 dotted 1px;
	padding:5px 0px 0px;
	margin:10px 20px 0px 0px;
}
/* -------------------------------------
*     商品オプション 表形式
*　border-collapseは表 の中のセルが境界を共有する設定
*　solidは１本の実線
* ------------------------------------- */
#option_tbl {
     border-collapse:collapse;
     border-top:1px solid #ccc;
     border-left:1px solid #ccc;
}
#option_tbl th{
     border-bottom:1px solid #ccc;
     border-right:1px solid #ccc;
}
#option_tbl td {
     border-bottom:1px solid #ccc;
     border-right:1px solid #ccc;
}
/* 　ページ上部のGUIDE,LOGIN,CARTの設定　*/
/* 　position: relative;は元々居た場所を基準に動くという設定。親要素にも設定する必要あり　*/
#hNav{
    float:right;
    width: 622px;
    padding: 0;
    position: relative;
}
#hNav li{
    float:left;
}
#hNavInfo {
    display: block;
    float:left;
    width:205px;
    margin: 0 0 0 2px;
    position: relative;
}
#hNavLogin {
    display: block;
    float:left;
    width:205px;
    margin: 0 0 0 2px;
    position: relative;
}
#hNavCart {
    display: block;
    float:left;
    width:205px;
    margin: 0 0 0 2px;
    position: relative;
}
/* 　セレクタ　セレクタ　と書く場合は、下の階層の子孫要素　*/
#hNavInfo ul,#hNavLogin ul,#hNavCart ul{
    display: none;
    position: absolute;
    top: 40px;
    left: -10px;
    padding: 50px -0px 0;
}
#hNavCart ul{
    left: -25px;
}
#hNavInfoTitle,#hNavLoginTitle,#hNavCartTitle{
    width:205px;
    height: 50px;
    display: block;
}
#hNavInfoTitle{
    background: url(https://file001.shop-pro.jp/PA01244/384/toppage/kks_btnGuide.gif) no-repeat 0 0;
}
#hNavCartTitle{
    background: url(https://file001.shop-pro.jp/PA01244/384/toppage/kks_btnCart.gif) no-repeat 0 0;
}
/* 　span要素の表示を消す（h3にLOGINやCARTなどを設定しているが文字がないと変だからログインなどの文字をspan内に書いて非表示にしている）　*/
#hNavInfoTitle span, #hNavLoginTitle span, #hNavCartTitle span {
    display: none;
}
/* 　GUIDE用のでかい吹き出し画像。position: absolute;は絶対位置指定。z-index:が大きい値の画像が上に表示されるので吹き出しが上に被るように表示されている　*/
#hNavInfo ul{
    width: 232px;
    height: 349px;
    position: absolute;
    z-index: 1000;
    background: url(https://file001.shop-pro.jp/PA01244/384/toppage/hNavFadeBg01.png) 0 bottom no-repeat;
}
/* 　LOGIN用の小さい吹き出し画像　*/
#hNavLogin ul{
    width: 232px;
    height: 116px;
    position: absolute;
    z-index: 1000;
    background: url(https://file001.shop-pro.jp/PA01244/384/toppage/hNavFadeBg02.png) 0 bottom no-repeat;
}
/* 　CART用の中くらいの吹き出し画像　*/
#hNavCart ul{
    width: 232px;
    height: 214px;
    position: absolute;
    z-index: 1000;
    background: url(https://file001.shop-pro.jp/PA01244/384/toppage/hNavFadeBg03.png) 0 bottom no-repeat;
}
#hNavInfo ul,#hNavLogin ul,#hNavCart ul{
    list-style: none;
    margin: 0;
}
#hNavInfo li,#hNavLogin li,#hNavCart li{
    width: 232px;
    font-size: 15px;
    text-align: center;
    margin: 0 0 27px;
}
#sideNav .nav_bloglink ul li{
    margin:0 0 15px;
}
#sideNav .nav_bloglink ul li a{
    width: 200px;
    height: auto;
}
/* 　opacityは不透明度。１は不透明。０は透明。　*/
#sideNav a:hover{
    opacity: .6;
}
#hNavCart li.cartNum{
    width: 200px;
    margin: 0 14px 29px;
}
#hNavCart li.cartNum .cartNumL{
    width: 70px;
    text-align: left;
    float:left;
}
#hNavCart li.cartNum .cartNumR{
    width: 130px;
    text-align: right;
    float:right;
}
/*　side　*/
#sideNav .side ul{
    list-style-type:none;
}
.search{
    width: 200px;
    margin: 0 0 20px;
}
/*　送料の画像設定（他の画像系もこのように設定する必要あり）　*/
.sideBnr{
    padding:0 0 20px;
}
.sideBnr a {
    display: block;
    width: 200px;
    height: 120px;
    background: url(https://file001.shop-pro.jp/PA01244/384/souryou/souryou-top.jpg) no-repeat 0 0;
}
#sideNav{
    padding:0;
}
#sideNav a {
    display: block;
    width: 200px;
    height: 60px;
}
/*　他の画像系もこちらの設定方法で良いかも　*/
#sideNav .nav_home a {
    background: url(https://file001.shop-pro.jp/PA01244/384/toppage/button-home.jpg) no-repeat 0 0;
}
#sideNav .nav_about a {
    background: url(https://file001.shop-pro.jp/PA01244/384/toppage/kks_menuAbout.gif) no-repeat 0 0;
}
#sideNav .nav_shop a {
    background: url(https://file001.shop-pro.jp/PA01244/384/toppage/kks_menuShop.gif) no-repeat 0 0;
}
#sideNav .nav_blog a {
    background: url(https://file001.shop-pro.jp/PA01244/384/toppage/kks_menuBlog.gif) no-repeat 0 0;
}
#sideNav .nav_qa a {
    background: url(https://file001.shop-pro.jp/PA01244/384/toppage/menu_qa.gif) no-repeat 0 0;
}
/*　display: inline-block;は要素の並びはインラインの様に横に並び、ブロックの様に幅や高さ、上下左右のマージンなどが設定できる　*/
#sideNav .nav_home a span, #sideNav .nav_about a span, #sideNav .nav_shop a span, #sideNav .nav_blog a span, #sideNav .nav_qa a span{
    display: inline-block;
    width: 100%;
    text-indent: -9000px;
}
#sideNav .nav_qa a {
    display: inline-block;
    width: 100%;
    text-indent: -9000px;
    background: url(https://file001.shop-pro.jp/PA01244/384/toppage/kks_menuQA.gif) no-repeat right top;
}
/*　nav_shopはリストをネストしてテキスト等のCSSを適用している。heightはこちらで設定　*/
#sideNav .nav_shop{
    height: 3900px;
    overflow: hidden;
}
#sideNav .nav_shop li{
    text-align: center;
    margin: 5px 0;
}
#sideNav .nav_shop li a{
    background: none;
    width: auto;
    height: auto;
}
#sideInfo{
    padding:0 0 20px;
    font:10px/1.5 Georgia,Times,serif;
    text-align: right;
}
#sideInfo span{
    color: #d35900;
}
#sideFb{
    padding:0 0 20px;
}
#sideFb a {
    display: block;
    width: 200px;
    height: 60px;
    margin: 0 auto;
    background: url(https://file001.shop-pro.jp/PA01244/384/toppage/kks_facebook-blue.jpg) no-repeat center center;
}
#sideFoot{
    padding:0 0 20px;
    font-size:11px;
    text-align: right;
}
.sideBnr a span, #sideFb a span {
    display: none;
}
#sideFoot a,#sideFoot a:link,#sideFoot a:active,#sideFoot a:visited{
    color: #d35900;
    text-decoration: none;
}
#sideFoot a:hover{
    color: #d35900;
    text-decoration: underline;
}
.cartNum{
    text-align: left;
    margin: 0 0 29px 17px;
}
#calendarText p{
    text-align: right;
}
#calendarArea{
    width: 200px;
    margin: 0 0 30px;
}
.tbl_calendar {
    width: 200px;
    border: none !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 0 20px;
}
.tbl_calendar th, .tbl_calendar td {
    padding: 4px !important;
    text-align: center !important;
    border-bottom: 1px solid #ccc !important;
}
#calendarArea .side_cal_memo{
    font-size: 10px;
}
#calendarText{
    font-size: 9px;
    line-height: 1.6;
    background: #EEE;
    padding: 10px;
    border: 1px #DDD solid;
}
#calendarText dl{
    margin: 0 0 10px;
}
#calendarText dt{
    display: block;
}
#calendarText dd{
    display: block;
}
#calendarText p{
    margin: 0 0 10px;
}
/*　footer　*/
.footer ul{
    list-style-type:none;
    padding: 0 0 20px;
}
#footerL{
    float:left;
    padding: 10px 0 0;
}
#footerL li{
    display:inline;
    padding:0 2em 0 0;
    font:11px;
}
#footerR{
    float:right;
    font:10px/2 Georgia,Times,serif;
    text-align:right;
}

/*　about　これは使ってない様なので、コメントアウトする　*/
/*
#about{width: 750px;overflow: hidden;}
#about h2{height: 40px;display: block;}
#aboutTop{width: 750px;overflow: hidden;}
#aboutTopL{width: 360px;float: left;}
#aboutTopR{width: 360px;float: right;}
#aboutBottom{width: 750px;overflow: hidden;}
*/
/*　これも使ってない様なので、コメントアウトする　*/
/*
#memberArea{margin: 0 0 40px; text-align: center;}
*/
/*　tableを共通CSSで設定すると商品オプション部分が縦書きに崩れるため各必要ページのcssにて設定する　*/
/*
table {
    border: 0;
    width: 320px;
    table-layout: auto;
}
a > p {
    text-align: center;
}
*/
/*　お米のオプション表示　*/
.ptoduct_name{
    margin: 5px 0 10px;
}
.table_option table{
    border-collapse: collapse;
    margin: 0 0 20px;
    border-top: solid 1px #ccc;
}
.table_option tr{
    border-bottom: #ccc 1px solid;
}
.table_option th{
    padding: 0 1em;
    background: #eee;
    font-weight: normal;
}
.table_option td{
    padding: .7em 1em;
    background: #fefefe;
    margin: 0;
    border-right: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
}
/*　商品一覧　*/
#item{
    overflow: hidden;
}
/*　ここは変な記述になっている部分。何故こんな書き方にしないと行けないのか不明　*/
*/
#container .item_box{
    width: 220px;
    height: 220px;
    float: left;
    margin: 0 5px;
    padding: 10px;
}
*/
/*#container .item_box img{width: 220px;}*/
#container .pager{
    width: 750px;
    clear: both;
}
#container .search_result{
    margin: 0 0 10px;
}
#container .search_result h2{
    font-size: 14px;
}
#container .categoty_title h2{
    font-size: 14px;
}
.item_box {
    width: 250px;
    height: 270px;
    margin: 0;
    padding: 0;
    float: left;
    overflow:hidden;
}
/*　商品一覧の枠画像　*/
.item_photo {
    width: 250px;
    height: 156px;
    padding: 14px 0 0;
    background: url(https://file001.shop-pro.jp/PA01244/384/toppage/kks_productBG.gif) no-repeat center center;
}
.item_photo img {
    display: block;
    margin: 0 auto;
}
.item_detail {
    padding: 0 15px;
    font-size: 12px;
}
.item_box img{
    width: 220px;
}
/*　商品一覧タイトル・ソート・パンくず　*/
.box .sort {
    margin: 0 0 5px;
}
.box .sort strong {}
.box .sort span {
    color:#666666;
}
.box .sort span, .box .sort a {
    display: inline-block;
    margin: 0 1em;
}
.categoty_title h2 {
    margin: 0;
}
/*　ITEMSという画像　*/
.categoty_title {
    padding: 0 0 0 95px;
    background: url(https://file001.shop-pro.jp/PA01244/384/toppage/kks_productTittle_ITEM.gif) no-repeat left center;
}
.next,.prev{
    margin: 0 20px;
}
h1 {
    font-size: 18px;
}
/*　pagetopに行く画像（自作）　*/
#pageTop {
  position: fixed;
  bottom: 50px;
  right: 15px;
}
/*　後から自分で作ったものたち（色やフォントサイズを数値化する方が良い）　*/
.list-margin {
    padding-top:1em;
}
.img-right {
    text-align:right;
}
.mediumtext{
    font-size: medium;
    line-height: 150%;
    margin-bottom: 2em;
}
.blog-title{
    font-size: 19px;
    font-weight: bold;
}
.blog-text{
    font-size: medium;
    line-height: 200%;
    margin-bottom: 2em;
}
.mediumcaption{
    font-size: medium;
}
.smalltext{
    font-size: small;
    line-height: 150%;
    margin-bottom: 2em;
}
.smallcaption{
    font-size: small;
}
.columnblack{
    font-weight: bold;
}
.column-under{
    font-weight: bold;
    text-decoration: underline;
}
.columnsalmon{
    color: salmon;
    font-weight: bold;
}
.columngreen{
    color: green;
    font-weight: bold;
}
.image-right{
    float:right;
    margin: 0 0 0 30px;
}
.image-left{
    float:left;
    margin: 0 30px 0 0;
}
.columnwaku{
    border-style:none ;
    padding: 10px 5px 10px 20px;
    border-color: maroon;
    background-color: mistyrose;
    border-width: 1px;
    border-radius: 10px;
    font-size: medium;
    line-height: 150%;
}
p.halfsizeimage img {
    width: 32%;
    height: auto;
}
.half-image img {
    width: 32%;
    height: auto;
}
p.wsizeimage img {
    width: 49%;
    height: auto;
}
p.blogsizeimage1 img {
    width: 0%;
    height: 0%;
}
p.blogsizeimage2 img {
    width: 100%;
    height: 100%;
}
/* 003 */
.button003 a {
    background: rgb(251, 219, 219);
    border-radius: 10px;
    position: relative;
    display: inline-block;
    justify-content: space-around;
    align-items: center;
    margin: 2px 2px;
    max-width: 260px;
    padding: 5px 25px;
    color: #313131;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
.button003 a:hover {
    background: #f97070;
    color: #FFF;
}
.button003 a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #313131;
    border-right: 3px solid #313131;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.button003 a:hover:after {
    border-color: #FFF;
}