@charset "Shift_JIS";

/*--------------------------------------------------------
  フルCSSスマートフォンテンプレート部品設定
--------------------------------------------------------*/
/*--------------------------------------------------------
  ユーザー設定スタイル
--------------------------------------------------------*/

/* レイアウトコンテナ　2種類
================================================== */

.hpb-parts-smt-cnt-style {
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 1em;
}

.hpb-parts-smt-cnt-02 {
	padding: 4px;
}

/* 見出し　7種類
================================================== */

.hpb-parts-smt-hl-style {
	margin-left: 10px;
	margin-right: 10px;
	border-color: #a4cbc0 !important;
	-webkit-border-radius: 0px !important;
	margin-bottom: 1em;
	font-weight: normal;
	padding: 6px 4px !important;
	font-size: 12px !important;
	text-shadow: none !important;
	background-color: #fff !important;
	background-image: none !important;
}

.hpb-parts-smt-hl-01,
.hpb-parts-smt-hl-02,
.hpb-parts-smt-hl-03,
.hpb-parts-smt-hl-04,
.hpb-parts-smt-hl-05,
.hpb-parts-smt-hl-06 {
	background-image: none !important;
}

.hpb-parts-smt-hl-05 {
	-webkit-border-radius: 5px !important;
}
.hpb-parts-smt-hl-06 {
	-webkit-border-radius: 0px !important;
}
.hpb-parts-smt-hl-06,
.hpb-parts-smt-hl-07 {
	background-color: #ecf3f1 !important;
}

.hpb-parts-smt-hl-bg-style {
	border-color: #a4cbc0 !important;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 1em;
	font-weight: normal;
	background-color: #ecf3f1 !important;
	background-image: none !important;
	padding: 6px 4px !important;
	font-size: 12px !important;
	text-shadow: none !important;
}

/* 文書枠　5種類
================================================== */

.hpb-parts-smt-cbox-style {
	border-color: #a4cbc0;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 1em;
}

/* リスト枠　4種類（2×2種類　見出しアリ・ナシ）
================================================== */

.hpb-parts-smt-sbox-style {
	border-color: #a4cbc0;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 1em;
}
.hpb-parts-smt-sbox-style ul {
	border-color: #a4cbc0;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none;
}
.hpb-parts-smt-sbox-style li {
	border-color: #a4cbc0;
	padding-top: 6px;
	padding-bottom: 6px;
}

.hpb-parts-smt-sbox-style h3 {
	border-color: #a4cbc0 !important;
	-webkit-border-radius: 0px !important;
	margin: 0 !important;
	font-weight: normal;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff),to(#ececec)) !important;
	padding: 6px 4px !important;
	font-size: 12px !important;
	text-shadow: 1px 1px 1px #fff;
}

.hpb-parts-smt-sbox-02 h3 {
	border-left: none !important;
	border-right: none !important;
}
.hpb-parts-smt-sbox-02 li:last-child 
{
    padding: 6px 12px 6px 15px;
}

/* トップページニュース */
.hpb-layoutset-02 #hpb-main #toppage-news .hpb-parts-smt-sbox-style ul {
	padding-left: 0;
	padding-right: 0;
}

.hpb-layoutset-02 #hpb-main #toppage-news .hpb-parts-smt-sbox-style li
{
	padding-left: 15px;
	margin: 0;
}

/* プライバシーポリシー */
.hpb-layoutset-02 #hpb-main #privacy .hpb-parts-smt-sbox-style ul {
	padding-left: 0;
	padding-right: 0;
}

.hpb-layoutset-02 #hpb-main #privacy .hpb-parts-smt-sbox-style li
{
	background-image: none;
	padding-left: 15px;
	margin: 0;
}

/* トップページスペシャル */
.hpb-layoutset-02 #hpb-main #toppage-special .hpb-parts-smt-sbox-style ul {
	padding-left: 0;
	padding-right: 0;
}

.hpb-layoutset-02 #hpb-main #toppage-special .hpb-parts-smt-sbox-style li
{
	background-image: none;
	padding-left: 15px;
	margin: 0;
}
/* 商品一覧 */
.hpb-layoutset-02 #hpb-main #item .hpb-parts-smt-sbox-style ul {
	padding-left: 0;
	padding-right: 0;
}

.hpb-layoutset-02 #hpb-main #item .hpb-parts-smt-sbox-style li
{
	background-image: none;
	padding-left: 15px;
	margin: 0;
}
/* リンクリスト　2種類（2×6種類　枠角・枠丸／見出しアリ・ナシ／画像アリ・ナシ）
================================================== */

.hpb-parts-smt-lbox-style {
	border-color: #a4cbc0;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 1em;
}

.hpb-parts-smt-lbox-style .en {
	display: none;
}

.hpb-parts-smt-lbox-style a {
	color: #000;
}

.hpb-parts-smt-lbox-style ul {
	border-color: #a4cbc0;
	padding: 0;
	margin: 0;
	list-style: none;
}
.hpb-parts-smt-lbox-style li {
	border-color: #a4cbc0;
	padding-top: 0px;
	padding-bottom: 0px;
}
.hpb-parts-smt-span-head {
	font-size: 100%;
}

.hpb-parts-smt-lbox-style h3 {
	border-color: #a4cbc0 !important;
	-webkit-border-radius: 0px !important;
	margin: 0 !important;
	font-weight: normal;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff),to(#ececec)) !important;
	padding: 6px 4px !important;
	font-size: 12px !important;
	text-shadow: 1px 1px 1px #fff;
}
.hpb-parts-smt-lbox-01 h3,
.hpb-parts-smt-sbox-01 h3 {
	border-bottom: none !important;
}
.hpb-parts-smt-lbox-02 h3 {	
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
}

/* トップページニュース */
.hpb-layoutset-02 #hpb-main #toppage-news .hpb-parts-smt-lbox-style ul {
	padding: 0;
	margin: 0;
}

.hpb-layoutset-02 #hpb-main #toppage-news .hpb-parts-smt-lbox-style li
{
	padding: 0;
	margin: 0;
}
/* プライバシーポリシー */
.hpb-layoutset-02 #hpb-main #privacy .hpb-parts-smt-lbox-style ul {
	padding-left: 0;
	padding-right: 0;
}

.hpb-layoutset-02 #hpb-main #privacy .hpb-parts-smt-lbox-style li
{
	background-image: none;
	padding-left: 0;
}
/* トップページスペシャル */
.hpb-layoutset-02 #hpb-main #toppage-special .hpb-parts-smt-lbox-style ul {
	padding-left: 0;
	padding-right: 0;
}

.hpb-layoutset-02 #hpb-main #toppage-special .hpb-parts-smt-lbox-style li
{
	background-image: none;
	padding-left: 0;
}

/* 商品一覧 */
.hpb-layoutset-02 #hpb-main #item .hpb-parts-smt-lbox-style ul {
	padding-left: 0;
	padding-right: 0;
}

.hpb-layoutset-02 #hpb-main #item .hpb-parts-smt-lbox-style li
{
	background-image: none;
	padding-left: 0;
	margin-bottom: 0;
}


/* リンクボタン　9種類
================================================== */

.hpb-parts-smt-lbtn-style {
	margin-bottom: 1em;
	font-size: 12px;
}

.hpb-parts-smt-lbtn-style a {
	color: #fff;
	padding: 6px 6px;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#a92e2e),to(#8d1b1b));
	border: 1px solid #740909;
	-webkit-box-shadow: 2px 2px 2px #eaeaea;
	text-shadow: 1px 1px 1px #630909;
}

p.hpb-parts-smt-lbtn-style {
	margin-left: 10px !important;
	margin-right: 10px !important;
	padding: 0 !important;
	background-image: none !important;
	background-color: #fff !important;
}

/* リンクカラー　2種類
================================================== */
/* ---- ここからスマホ見やすさ改善（A案） ---- */

/* 全体の縮小を防ぐ */
html, body { width: 100%; }
#hpb-container, #hpb-inner { width: 100%; max-width: 100%; }

/* 画像がはみ出ないように */
img { max-width: 100%; height: auto; }

/* 文字を少し大きく */
#hpb-main, #hpb-aside, #mg-top-message {
  font-size: 16px;
  line-height: 1.8;
}

/* ====== スマホナビ：2列・中央寄せ・アイコン＋文字 ====== */
#hpb-nav ul{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}

#hpb-nav ul li{
  width: calc(50% - 4px);   /* 2列 */
  margin: 0 !important;
  padding: 0 !important;
}

#hpb-nav ul li#nav-contact{
  width: 100%;              /* お問い合わせだけ1列にしたいなら */
}

#hpb-nav ul li a{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;

  box-sizing: border-box;
  width: 100% !important;
  min-height: 52px;         /* 押しやすさ */
  padding: 10px 12px !important;

  background-image: none !important;  /* 旧背景アイコン無効 */
  text-indent: 0 !important;
  text-align: center !important;
}

#hpb-nav ul li a span.en{ display: none !important; }
#hpb-nav ul li a span.ja{ display: inline !important; }

/* 疑似要素アイコン */
#hpb-nav ul li a::before{
  content: "";
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex: 0 0 22px;
}

/* アイコン割り当て */
#hpb-nav ul li#nav-toppage a::before{ background-image: url(ico_home_00_19.png); }
#hpb-nav ul li#nav-topics  a::before{ background-image: url(ico_topic_00_19.png); }
#hpb-nav ul li#nav-concept a::before{ background-image: url(ico_up_00_19.png); }
#hpb-nav ul li#nav-service a::before{ background-image: url(ico_pc_00_19.png); }
#hpb-nav ul li#nav-news    a::before{ background-image: url(ico_window_00_19.png); }
#hpb-nav ul li#nav-recruit a::before{ background-image: url(ico_person_00_19.png); }
#hpb-nav ul li#nav-contact a::before{ background-image: url(ico_contact_00_19.png); }

/* トップの古いメイン画像を無効化 */
#hpb-title{
  background-image: none !important;
  padding-top: 0 !important;
}

/* 古いトップ画像（hpb-title の背景）を無効化 */
#hpb-title{
  background-image: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* タイトル文字を通常表示に */
#hpb-title h2{
  color: #111 !important;
  margin: 12px 15px 6px 15px !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
}

/* タイトル帯の「無駄な空間」を潰す */
#hpb-title{
  padding:10px 16px 6px 16px !important;
  margin:0 !important;
  height:auto !important;
  min-height:0 !important;
  background:none !important;
}

/* タイトル帯の直後（写真ブロック）を詰める */
#mg-top-message{
  margin:0 !important;
  padding-top:12px !important; /* 必要なら 8px まで下げてOK */
}

/* ===== タイトル帯の余白を強制的に潰す ===== */
body#hpb-smt-template-01-19-01 #hpb-title,
#hpb-title,
#hpb-title.hpb-top-image{
  background-image:none !important;
  background:none !important;
  height:auto !important;
  min-height:0 !important;
  padding:8px 16px !important;   /* ここを 6px などにしてもOK */
  margin:0 !important;
}

/* h2自体の余白もゼロに */
body#hpb-smt-template-01-19-01 #hpb-title h2,
#hpb-title h2{
  margin:0 !important;
  padding:0 !important;
  line-height:1.3 !important;
}

/* 帯と写真の間（mg-top-message側）も詰める */
#mg-top-message{
  margin-top:10px !important;  /* 0〜10で調整 */
  padding-top:0 !important;
}

/* タイトル帯を整える（プロっぽく） */
#hpb-title{
  background:#f7f7f7 !important;
  padding:10px 14px !important;
  border-bottom:0 !important;      /* 線が出てるなら消す */
  text-align:left !important;      /* 中央にしたければ center */
}

#hpb-title h2{
  font-size:18px !important;
  font-weight:700 !important;
  letter-spacing:0.02em !important;
}

/* タイトル帯を復活（薄いグレーの帯＋区切り線） */
#hpb-title{
  background:#f3f3f3 !important;
  padding:12px 14px !important;
  margin:0 !important;
  border-bottom:1px solid #e2e2e2 !important;
}

/* 見出しの余白を整理 */
#hpb-title h2{
  margin:0 !important;
  line-height:1.35 !important;
}

#mg-top-message{
  margin-top:6px !important;
}

#mg-top-message img{
  margin-top:0 !important;
}

/* タイトル帯の上下余白を詰める */
#hpb-title{
  margin: 0 !important;
  padding: 10px 16px !important;  /* ここを8pxとかにもできる */
}

/* タイトル文字の余白をゼロに */
#hpb-title h2{
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* 帯の直後（=写真ブロック）の上余白を詰める */
#hpb-title + #mg-top-message{
  margin-top: 6px !important; /* 0〜8pxで好み */
}

/* 写真自体の上余白をゼロ */
#mg-top-message img{
  display:block;
  margin-top: 0 !important;
}

/* --- 帯（#hpb-title）と写真の距離を詰める最優先セット --- */

/* 帯そのものの上下余白 */
#hpb-title{
  margin: 0 !important;
  padding: 6px 16px !important;   /* まずは6px。まだ広ければ 0〜4px に */
  border: 0 !important;
}

/* 帯の中の見出しの余白 */
#hpb-title h2{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
}

/* 帯の直後に来るブロックの上余白（あなたの #mg-top-message 想定） */
#hpb-title + #mg-top-message{
  margin-top: 0 !important;
  padding-top: 8px !important;    /* ここを 0〜8px で調整 */
}

/* #mg-top-message 内の最初の画像の上余白を殺す */
#mg-top-message img{
  display:block !important;
  margin-top: 0 !important;
}

/* テンプレ側の「上に大きく空ける」系を潰す */
#hpb-inner, #hpb-wrapper{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* hpb-title の前後に入ってる区切り（hrやボーダー）っぽい余白対策 */
#hpb-title{
  border-bottom: none !important;
}

/* ナビゲーション全体 */
#hpb-nav ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

/* 各メニュー項目 */
#hpb-nav li {
  margin: 8px 12px;
}

/* リンクボタン化 */
#hpb-nav a {
  display: block;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 10px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  position: relative;
}

/* 英語表記を薄く */
#hpb-nav .en {
  display: block;
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

/* ホバー時（PC用） */
#hpb-nav a:hover {
  background: #f8f8f8;
}

/* 矢印を右側に追加 */
#hpb-nav a::after {
  content: "?";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #ccc;
  font-size: 20px;
}

/* 変な小アイコン画像を全部消す */
#hpb-nav img {
  display: none !important;
}

/* === NAV Modernize (force override) === */
#hpb-nav { margin: 18px 0 !important; }

#hpb-nav ul{
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;

  /* 2列→やめて縦にする */
  display:block !important;
}

#hpb-nav li{
  margin:10px 12px !important;
  padding:0 !important;
  float:none !important;
  width:auto !important;
  background:none !important;
  border:0 !important;
}

#hpb-nav a{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  padding:14px 16px !important;
  background:#fff !important;
  border:1px solid #ddd !important;
  border-radius:12px !important;

  text-decoration:none !important;
  color:#222 !important;
  font-weight:600 !important;
  line-height:1.2 !important;
}

/* 日本語＋英語を縦に整列 */
#hpb-nav a .ja{ display:block !important; font-size:16px !important; }
#hpb-nav a .en{ display:block !important; font-size:12px !important; color:#9aa0a6 !important; margin-top:3px !important; }

/* 右矢印を付ける（今風） */
#hpb-nav a::after{
  content:"?" !important;
  font-size:24px !important;
  color:#c9c9c9 !important;
  margin-left:12px !important;
}

/* 謎の小画像/アイコン/？を徹底排除 */
#hpb-nav img,
#hpb-nav a img,
#hpb-nav .icon,
#hpb-nav .mark,
#hpb-nav .q,
#hpb-nav .question{
  display:none !important;
}

/* もし「？」がテキストで入ってるなら消す */
#hpb-nav a { text-indent:0 !important; }
#hpb-nav a span:empty{ display:none !important; }

/* ===== ナビの「？」と左アイコンを完全に消す ===== */

/* 疑似要素（? など）を殺す */
#hpb-nav li::before,
#hpb-nav li::after,
#hpb-nav a::before,
#hpb-nav a::after{
  content: none !important;
  display: none !important;
}

/* 背景画像（左の謎線/アイコン）を殺す */
#hpb-nav,
#hpb-nav ul,
#hpb-nav li,
#hpb-nav a{
  background-image: none !important;
}

/* 左右の余計な余白（アイコン分）をリセット */
#hpb-nav a{
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* ===== 下に残ってる旧メニュー（3つの箱）を隠す ===== */
#hpb-inner .hpb-sitemap,
#hpb-inner .hpb-sitemapList,
#hpb-inner .hpb-sitemap ul,
#hpb-inner .hpb-sitemap li,
#hpb-inner .hpb-footNav,
#hpb-inner .hpb-footNav ul{
  display: none !important;
}