@charset "utf-8";

/*PC・タブレット・スマホ共通設定*/

/*全体の設定
---------------------------------------------------------------------------*/
body { margin:0px; padding:0px; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size:16px; line-height:2; -webkit-text-size-adjust:none; background:url(img/main.jpg);}

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form { margin:0px; padding:0px; font-size:100%;}
ul { list-style-type:none;}
ol { padding-left:40px; padding-bottom:15px;}
img { border:none; max-width:100%; height:auto; vertical-align:middle;}
table { border-collapse:collapse; font-size:100%; border-spacing:0;}
iframe { width:100%;}

.center{ text-align:center;}
.right{ text-align:right;}
.left{ text-align:left;}

.title{ color:#990000; font-weight:bold;}

.in{display:none;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a { color:#666; -webkit-transition:0.5s; transition:0.5s;}

a:hover { color:#65c5f2; text-decoration:none;}

/*コンテナー（ホームページ全体を囲むブロック）
---------------------------------------------------------------------------*/
#container { overflow-x:hidden;}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
header { position:relative; width:100%; z-index:1; margin:0 auto;}

header img { width:100%;}

/*ロゴ画像*/
#logo img { width:600px; padding-top:10px; padding-bottom:5px;}

/*h2*/
h2{ width:90%; margin-left:auto; margin-right:auto; margin-bottom:20px;}

.is-fixed { position:fixed; top:0; left:0; z-index:2; width:100%;}

/*メニュー*/
ul.menu { list-style-type:none;	margin:0; padding:0; overflow:hidden; background-color:#6e7955; text-align:center;}
ul.menu li { float:left; border-right:1px solid #bbb;}
ul.menu li:last-child { border-right:none;}

ul.menu li a { display:block; color:white; text-align:center; padding:14px 16px; text-decoration:none;}
ul.menu li a:hover:not(.active) { background-color:#a9bce2;}

/*商品陳列状況*/
.syo,.syo2 { width:90%; margin:auto;}
.syo td{ width:30%;}
.syo2 td{ width:20%;}
.syo img{ width:300px; height:300px; margin:5px auto; object-fit:cover;}
.syo2 img{ width:90%; height:300px; object-fit:cover; margin:5px auto;}

.btn, a.btn, button.btn { font-size:0.9rem; font-weight:700; line-height:1.5; position:relative; display:inline-block; padding:0.25rem 1rem; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-transition:all 0.3s; transition:all 0.3s; text-align:center; vertical-align:middle; text-decoration:none; letter-spacing:0.1em; color:#212529; border-radius:0.5rem;}

.btnred,a.btnred { color:#fff; background-color:#d9333f;}
.btnred:hover,a.btnred:hover { color:#fff; background:#f56500;}

a.btnradius { border-radius:100vh;}

/*取扱一覧表*/
.list{ width:80%; margin:auto; text-align:center;}
.list li{ width:10%; float:left; font-weight:bold;}
.list a{ background:#6b8e23; color:#fff; padding:5px 30px; text-decoration:none;}
.list a:hover{ background:#cee4ae;}

.list2{width:90%; margin:auto;}

.list3{ width:100%; margin:auto; table-layout: fixed;}
.list3 th{ width:20%; padding:10px; margin:auto; background:#a8c97f; border-left:1px solid #999; border-right:1px solid #999; border-top:1px solid #999;}
.list3 td{ width:20%; padding:3px; border-left:1px solid #999; border-right:1px solid #999; border-bottom:1px solid #999;}

/*お知らせ*/
#new dl{ width:80%; padding:0 30px; margin-top:30px; margin-left:auto; margin-right:auto;}
#new dt{ letter-spacing:0.1em; color:#336600; padding-left:5px;}
#new dt span{ font-size:14px;}
#new dd{ padding-left:15px;}

hr{ border-bottom:dashed 2px #330000; margin:10px auto;}

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

#main { width:100%; margin-left:auto; margin-right:auto; /*background:#ccd1a7;*/ padding-top:30px; padding-bottom:30px;}

#main2 { width:100%; margin-left:auto; margin-right:auto; /*background:#c7d17d;*/ padding-top:30px; padding-bottom:30px;}
#main3 { width:100%; margin-left:auto; margin-right:auto; /*background:#c2d154;*/ padding-top:30px; padding-bottom:30px;}
#main4 { width:100%; margin-left:auto; margin-right:auto; /*background:#d8e698;*/ padding-top:30px; padding-bottom:30px;}

.ktable{ width:90%; margin-left:auto; margin-right:auto; background:#003300;}
.ktable th{ width:30%; height:40px; color:#fff; border-bottom:1px solid #fff; letter-spacing:3px;}
.ktable td{ width:70%; background:#fff; border-bottom:1px solid #666; padding-left:5px;}

.mtable{ width:90%; margin-left:auto; margin-right:auto; background:#003300; border:1px solid #666;}
.mtable th{ width:20%; height:40px; color:#fff; border-bottom:1px solid #fff; letter-spacing:3px;}
.mtable td{ width:40%; background:#fff; border-bottom:1px solid #666; padding-left:3px;}

#box{ width:90%; margin-left:auto; margin-right:auto;}
#box p{width:90%; margin:auto;}

/*出荷*/
.san{ width:85%; margin:15px auto;}
.fco{ color:#990000;}

/*買受*/
.kai{ width:90%; margin:auto;}
.kai dt{ font-size:18px; color:#990000; font-weight:bold; letter-spacing:2px;}
.kai dd{ margin-left:20px; margin-bottom:20px;}

/*ランキング*/
.ran{ width:90%; margin:15px auto;}
.ran th{ width:10%; background:#336600; color:#fff; border-bottom:#ccc solid 1px;}
.ran td{ border-left:#ccc solid 1px; border-bottom:#ccc solid 1px; text-align:center; background:#fff;}

/*カレンダー*/
.calen { text-align:center; margin-bottom:20px;}

.calendar{ width:90%; margin-left:auto; margin-right:auto; margin-bottom:20px; border-top:solid 2px #999; border-left:solid 2px #999; border-bottom:solid 2px #999; font-size:14px;}
.calendar th{ background:#003300; width:13%; height:40px; color:#fff; text-align:center; border-right:solid 2px #999;}
.calendar td{ background:#fff; border-bottom:solid 1px #999; border-right:solid 2px #999; font-weight:bold; padding:2px;}

.catxt{width:90%; margin:auto;}

#cal1{ float:left; width:20%; height:40px; vertical-align:text-top;}
#cal2{ float:right; width:80%;}
#cal3{ clear:none;}

.red{ color:#ff0033; font-weight:bold;}

/*お問い合わせ*/
.tf{ font-weight:bold; font-size:18px;}

/*フッター設定*/
footer { clear:both; background:#cccc66; color:#333; text-align:center;}

footer a { color:#fff; text-decoration:none;}
footer a:hover { color:#fff;}

footer .pr { display:block; font-size:80%;}

/*スマホ・タブレット*/
@media screen and (max-width: 768px) {

.in{display:block;}

/*商品陳列状況*/
.syo{ width:90%; margin:auto;}
.syo td{ width:100%; display:block;}
.syo2 td{ width:100%; display:block;}

.list{ width:100%; margin:auto; text-align:center;}
.list li{ width:auto; float:left; font-weight:bold;}
.list a{ background:#6b8e23; color:#fff; padding:5px; text-decoration:none;}
.list a:hover{ background:#cee4ae;}

table.list2{ width:100%; margin:auto;}
table.list2 th{ display:block; width:100%; padding:0;}
table.list2 td{ display:block; padding:0;}

table.list3 th{ width:100%;}
table.list3 td{ width:100%;}

}