/* 株式会社 南九州物産 — 静的サイト用スタイル（元のスキン g_wbrown01 を再現＋スマホ対応） */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;text-align:center;color:#000;font-size:14px;
  background:#F9F1DA url('../images/skin/body_bg.jpg') repeat-x 0 0;
  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
a:link{color:navy;text-decoration:none}
a:visited{text-decoration:none}
a:hover{background-color:transparent;text-decoration:underline}
img{vertical-align:middle;border:0;max-width:100%;height:auto}
hr{border:0;border-top:2px solid #999;margin:5px 0}
strong{font-weight:700}
.small{font-size:80%}

#wrapper{width:100%;text-align:left;margin:0 auto}

/* ヘッドコピー */
#headcopy{width:100%;max-width:900px;margin:0 auto;padding-top:2px;
  background:url('../images/skin/headcopy_bg_transparent.png') no-repeat 0 0;background-color:#553126}
#headcopy h1{color:#F9F1DA;font-size:12px;font-weight:400;margin:0;padding:0 8px;line-height:18px}

/* ロゴ */
#header{width:100%;max-width:900px;margin:0 auto}
#logo{text-align:center;background:#000;font-size:0;line-height:0}
#logo a{display:block}
#logo img{width:100%;display:block}

/* ナビゲーション */
#navigator{
  width:100%;max-width:900px;margin:0 auto 10px;font-size:14px;line-height:35px;
  background:#2d1d19 url('../images/skin/navi_bg_transparent.png') no-repeat 0 0;
  border-top:1px solid #6e4e4e;border-bottom:1px solid #2f2f2f;
}
#navigator ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;min-height:35px}
#navigator ul li{margin:0;padding:0;list-style:none;background:url('../images/skin/navi_li.png') no-repeat 0 0}
#navigator ul li a{display:block;padding:0 15px;color:#fff;text-decoration:none}
#navigator ul li a:hover,#navigator ul li.focus a{color:#c6bfa9;text-decoration:none}

/* メイン */
#main{width:100%;max-width:900px;margin:0 auto}
#main_visual{font-size:0;line-height:0}
#main_visual img{width:100%;display:block}
.plugin_slideshow{position:relative;width:100%;aspect-ratio:900/350;overflow:hidden}
.plugin_slideshow img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:8;opacity:0}
.plugin_slideshow img.active{z-index:10;opacity:1}
.plugin_slideshow img.last-active{z-index:9}

#wrap_content{width:75%;float:right;overflow:hidden}
#wrap_sidebar{width:25%;float:left;overflow:hidden}
#main_dummy{clear:both}

#content{margin-top:10px;padding:0 15px 5px;background:#fff}
#body{line-height:1.5em;width:100%;word-break:normal;word-wrap:break-word;overflow-wrap:anywhere}
#body p{margin:1em 0}
#body h2{
  line-height:1em;padding:10px 0 15px 5px;margin:10px 0 5px;font-size:20px;text-align:left;color:#350000;
  background:url('../images/skin/content_h1.png') no-repeat 0 100%;background-size:100% 11px;
}
#body h3{
  line-height:1em;padding:10px 20px;margin:25px 0 5px;font-size:16px;text-align:left;color:#350000;
  background:url('../images/skin/content_h2.png') no-repeat 0 100%;background-size:100% 35px;
}
#body h4{
  line-height:1em;padding:3px 5px;margin:20px 0 0 3px;font-size:16px;text-align:left;color:#350000;
  border-bottom:2px dotted #9F8C67;
}
#body ul{margin:5px 0 5px 30px}
#body ul.list1{padding-left:16px;margin:1em 0 1em 16px;list-style-image:url('../images/skin/list_list1.png')}
#body ul.list2{padding-left:16px;margin:0 0 0 46px;list-style-image:url('../images/skin/list_list2.png')}
#body ul.list3{padding-left:16px;margin-left:16px;list-style-image:url('../images/skin/list_list3.png')}

/* 表 */
.style_table{border-collapse:separate;border-spacing:1px;margin:0 auto;background:#abd92e;text-align:left;max-width:100%}
.style_td{background:#fff;padding:5px;word-break:normal}
table.style_table{margin-top:1em;margin-bottom:1em}

/* お知らせ枠 */
.scrollbox{width:90%;height:160px;overflow:auto;border:1px solid #dcdcdc;padding:5px 10px;margin:0 auto;text-align:justify}
.scrollbox p{margin:0}
.recent_list strong{display:block;margin-top:.8em}
.recent_list ul{margin:0 0 0 20px;padding:0;list-style:disc}

/* トップページの2カラム */
.box2{padding:10px;border:1px solid #ccc;margin:1em 0}
.box2 .col{width:45%;float:left;text-align:left;padding:0 10px;display:flow-root}
.box2 .col + .col{margin-left:10px;border-left:1px solid #ccc}
.box2 .col img{float:left;margin:0 1em 0 0}
.clear{clear:both}
.box2::after{content:"";display:block;clear:both}

/* 画像の並び */
.imgrow{display:flex;flex-wrap:wrap;gap:0;align-items:flex-start}
.imgrow img{max-width:100%;height:auto}

/* 赤字・ボタン */
.red{color:red}
.btn{display:inline-block;padding:2px 12px;font-size:13px;color:#000;background:#efefef;border:1px solid #767676;border-radius:3px;text-decoration:none;cursor:pointer;font-family:inherit}
a.btn:link,a.btn:visited{color:#000}
a.btn:hover{text-decoration:none;background:#e5e5e5}

/* 採用情報の表 */
#table2671{text-align:left;border:solid 1px #ffffff;border-collapse:collapse;width:100%}
#table2671>tbody>tr>td{border:solid 1px #ffffff;padding:4px;min-width:60px}

/* 地図 */
.map{position:relative;width:100%}
.map iframe{width:100%;height:450px;border:0;display:block}

/* サイドバー（メニュー） */
#sidebar{color:#666}
#menubar{margin:10px 10px 0 0;background:#fff;border:1px solid #ccc;color:#666;line-height:1.3em;padding:5px;word-break:normal}
#menubar a{color:#666}
#menubar a:hover{color:#f99;text-decoration:none}
#menubar h2{line-height:20px;padding:0 2px 0 5px;border-bottom:2px solid #9F8C67;color:#333;text-align:center;font-size:1em;margin:10px 0 5px}
#menubar h3{line-height:1.5em;padding:0 0 0 15px;border-bottom:1px dotted #9D8A66;color:#333;text-align:left;font-size:1em;margin:5px 0;font-weight:bold}
#menubar h4{line-height:1.2em;padding:0 0 0 23px;color:#999;text-align:left;font-size:1em;margin:5px 0;font-weight:bold}
#menubar h3 a{display:block;color:#333;margin-left:-15px;padding-left:15px}
#menubar h4 a{display:block;color:#999;margin-left:-23px;padding-left:23px}
#menubar h3.focus a,#menubar h3 a:hover,#menubar h4 a:hover{color:#c6bfa9}
#menubar .qr{text-align:center;margin:8px 0}
#menubar .qr img{width:150px;max-width:100%;height:auto}

/* ナビ2・フッター */
#navigator2{width:100%;text-align:center;padding:10px 0;margin:10px auto 0;clear:both}
#navigator2 p{margin:.6em 0}
#navigator2 hr{width:100%;max-width:900px;margin:8px auto}
#footer{width:100%;color:#F9F1DA;margin:10px 0 0;padding:10px 0;background:url('../images/skin/footer_bg_wood.jpg') repeat-x 0 0;background-color:#5a3423}
#footer a{color:#F9F1DA;text-decoration:none}
#copyright{text-align:center;font-size:13px}
#copyright p{margin:0;padding:0 10px}

/* お問い合わせフォーム */
.qform{width:100%;border-collapse:separate;border-spacing:0 6px;margin:1em 0}
.qform th{width:13em;text-align:left;vertical-align:top;padding:6px 8px 0 0;font-weight:normal}
.qform td{padding:2px 0}
.qform .need{color:#d00;font-size:12px;margin-left:.4em}
.qform input[type=text],.qform input[type=email],.qform input[type=tel],.qform select,.qform textarea{font:inherit;font-size:14px;padding:4px;border:1px solid #999;border-radius:3px;max-width:100%}
.qform textarea{width:100%;min-height:10em}
.qform .note{font-size:12px;color:#555}
.form-actions{margin:1em 0;text-align:center}
.form-actions button{font:inherit;font-size:15px;padding:8px 32px;border:1px solid #6b4a3a;background:#834D3E;color:#fff;border-radius:3px;cursor:pointer}
.form-actions button:hover{background:#6f3f33}
.form-msg{margin:1em 0;padding:8px 12px;border-left:4px solid #9F8C67;background:#fbf7ea}
.form-msg.err{border-color:#d00;background:#fff0f0;color:#a00}

/* ---- スマートフォン・タブレット ---- */
@media (max-width:760px){
  body{font-size:15px}
  #navigator{line-height:40px;background-image:none}
  #navigator ul li{flex:1 1 50%;border-bottom:1px solid #1a110e;background:none;border-left:1px solid #6e4e4e}
  #navigator ul li a{padding:0 8px;text-align:center}
  #wrap_content,#wrap_sidebar{width:100%;float:none}
  #content{padding:0 12px 5px;margin-top:10px}
  #menubar{margin:10px 0 0}
  #body h2{font-size:18px}
  .box2 .col{width:100%;float:none;padding:8px 0}
  .box2 .col + .col{margin-left:0;border-left:0;border-top:1px solid #ccc;margin-top:8px}
  .scrollbox{width:100%}
  .style_td{width:auto !important;padding:5px 4px;font-size:13px}
  .qform,.qform tbody,.qform tr,.qform th,.qform td{display:block;width:100%}
  .qform th{padding:6px 0 2px}
  .qform input[type=text],.qform input[type=email],.qform input[type=tel],.qform select{width:100%}
  .map iframe{height:320px}
  .style_td{font-size:12px;padding:5px 3px}
  #table2671 td{display:block;width:100% !important;border-width:0 0 1px 0 !important}
  #table2671 tr{display:block;margin-bottom:6px}
}