@charset "utf-8";

/* ============================================================
   z-r-style.css  ---  racoon レスポンシブ用 追加CSS
   ------------------------------------------------------------
   ・default.css は一切変更せず、このファイルで上書きする
   ・PC（768px以上）のデザインは据え置きのため、ルールを書かない
   ・SP（767px以下）のみレイアウトを1カラム化する
   ・HTML側のインラインstyleを打ち消す箇所のみ !important を使用
   ============================================================ */


/* ============================================================
   SP  (max-width:767px)
   ============================================================ */
@media screen and (max-width: 767px) {

/* ------------------------------------------------------------
   base
   ------------------------------------------------------------ */
body{
	font-size:15px;
	line-height:1.7;
	letter-spacing:0.04em;
	-webkit-text-size-adjust:100%;
}
img{
	max-width:100%;
	height:auto;
}
/* a_s.gif は 1x1 のスペーサー画像。HTMLで width="690" height="1" のように
   指定されている箇所があり、上の height:auto が効くと本来の縦横比（1:1）で
   計算されて巨大な正方形になってしまうため、常に1pxに固定する */
img[src$="a_s.gif"]{
	width:1px;
	height:1px;
}

/* ------------------------------------------------------------
   h1  ページ最上部の赤帯（a_bk.gif は高さ60px／赤い部分は約20px）
   1行に収める必要があるため SP では文字を小さくする
   ------------------------------------------------------------ */
h1{
	width:auto;
	padding:3px 10px 0;
	font-size:10px;
	line-height:15px;
	letter-spacing:0;
}

/* ------------------------------------------------------------
   #contents 直下の p の左右パディングを解除（共通）
   rakuten / yahooshopping にインラインで padding-left:40px が入っており、
   SPだと画像が右に寄って右端に余白が無くなる（左40px / 右0）。
   SPでは #contents 自体が左右10pxを持つので、インラインの左右指定は不要
   ------------------------------------------------------------ */
#contents > p{
	padding-left:0 !important;
	padding-right:0 !important;
}

/* ------------------------------------------------------------
   h2  見出し（共通）
   PCの32pxは広すぎるため縮小し、左寄せにする（PCは右寄せのまま）。
   下線(h2.gif)はそのまま活かす
   ------------------------------------------------------------ */
h2{
	margin:15px 0 0;
	padding:0 0 8px;
	font-size:20px;
	line-height:1.4;
	text-align:left;
}

/* ------------------------------------------------------------
   h3.h3green  緑帯の見出し（admin / func / point で使用）
   背景色と箇条アイコン(h3bk.gif 10x10)はそのまま活かし、
   文字サイズと余白だけ詰める。アイコンのY位置は1行目の中央に合わせる
   （padding-top 8px + 行高25.5px の中心 20.75 - アイコン半分5 ≒ 16px）
   ------------------------------------------------------------ */
h3.h3green{
	margin:28px 0 0;
	padding:8px 10px 8px 28px;
	font-size:17px;
	line-height:1.5;
	background-position:12px 16px;
}

/* ------------------------------------------------------------
   header  ロゴ中央＋グローバルメニューを2列テキストボタンに
   ------------------------------------------------------------ */
#head{
	width:auto;
	margin:0;
	padding:0 10px 8px;
}
#head p{
	float:none;
	width:auto;
	padding:6px 0 0;
	text-align:center;
}
#head ul{
	float:none;
	width:auto;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:6px;
	padding:20px 0 0;
}
#head ul li{
	float:none;
	width:auto;
	padding:0;
}
#head ul li a{
	display:flex;
	align-items:center;
	justify-content:center;
	height:auto;
	min-height:44px;
	padding:6px 4px;
	background:#FFF;
	border:solid 1px #CCC;
	border-radius:4px;
	font-size:13px;
	line-height:1.3;
	letter-spacing:0;
}
#head ul li a:hover{
	background:#F5F5F5;
	color:#C00;
}

/* ------------------------------------------------------------
   h3.h3red  赤下線の見出し（voice/ 配下・inquiry/ 配下で使用）
   アイコン h3.gif(14x14) のY位置を1行目の中央に合わせる
   （padding-top 0 + 行高 17px x 1.5 = 25.5px の中心 12.75 - 半分7 ≒ 6px）
   ------------------------------------------------------------ */
h3.h3red{
	margin:28px 0 0;
	padding:0 0 4px 20px;
	font-size:17px;
	line-height:1.5;
	background-position:0 6px;
}

/* ------------------------------------------------------------
   breadcrumb
   ------------------------------------------------------------ */
.racoon-bread{
	width:auto;
	padding:6px 10px 4px;
}

/* ------------------------------------------------------------
   container / contents / left menu
   PCは #contents・#left とも float:right（左メニューが左側）
   SPは float を解除し、DOM順の コンテンツ → 左メニュー で縦積み
   ------------------------------------------------------------ */
#container{
	width:auto;
	background:none;
}
#contents{
	float:none;
	width:auto;
	padding:10px 10px 30px;
}

#left{
	float:none;
	width:auto;
	margin:0;
	padding:0 10px 25px;
	border-top:solid 3px #CCC;
}
#left p{
	text-align:center;
}
#left #lLogo{
	padding:20px 0 10px;
}
/* 「ショッピングサイト向けシステム」の見出し画像（ul直後のp）の上に余白を追加。
   lt_menu.gif の p は #lLogo の直後なので対象外 */
#left ul + p{
	margin-top:20px;
}
#left ul li a{
	display:flex;
	align-items:center;
	height:auto;
	min-height:44px;
	padding:10px 5px 10px 24px;
	background:url(../img/a_a.gif) 7px center no-repeat;
	line-height:1.4;
}

/* ------------------------------------------------------------
   index : キャッチコピー
   ------------------------------------------------------------ */
p.indCatch{
	padding:15px 0 0;
	font-size:20px;
	line-height:1.5;
}

/* ------------------------------------------------------------
   index : 2枚並びの小バナー（HTMLのインラインstyleを打ち消す）
   ------------------------------------------------------------ */
.indSbnr{
	padding:15px 0 0;
}
.indSbnr p{
	float:none;
	padding-left:0 !important;
}
.indSbnr p + p{
	padding-top:12px;
}
.indSbnr p img{
	width:100%;
	height:auto;
}

/* ------------------------------------------------------------
   index : ラクーンの特長10項目
   背景アイコン（ind001-010.gif = 350x118）をボックス幅に合わせて縮小し、
   左パディングも % 指定にして追従させる
   ------------------------------------------------------------ */
#indCm{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
	column-gap:20px;
}
#indCm div{
	float:none;
	width:auto;
	max-width:350px;
	min-height:125px;
	margin:22px 0 0 !important;
	padding:15px 0 10px 33%;
	box-sizing:border-box;
	background-size:100% auto;
}
#indCm div p.indCmTl{
	font-size:18px;
	line-height:1.4;
}
/* 背景画像の右側にある装飾イラストに本文が重ならないよう、
   PCと同じ比率（155px / 235px = 約66%）で本文幅を確保する */
#indCm div p.indCmTx{
	width:66%;
	font-size:14px;
	line-height:1.6;
}

/* ------------------------------------------------------------
   index : 下部の導入事例／お問い合わせバナー
   ------------------------------------------------------------ */
div.ftGoInq{
	padding:25px 0 0;
}
div.ftGoInq p img{
	width:100%;
	height:auto;
}

/* ------------------------------------------------------------
   point / voice詳細 : 画像の回り込み（.bodyR / .bodyL）
   PCは .bodyR img{float:right} / .bodyL img{float:left} で本文が回り込む。
   SPは画像幅（161-490px）に対して本文の残り幅が足りず読めなくなるので
   回り込みを解除し、画像を中央寄せのブロックとして本文の上に置く。
   画像は原寸のまま（拡大するとボケるため width:100% にはしない）
   ------------------------------------------------------------ */
div.bodyR img,
div.bodyL img{
	float:none;
	display:block;
	margin:0 auto 12px;
}

/* ------------------------------------------------------------
   customer / yahooshopping : ストア一覧（PCは3カラムのfloat）
   .cust3clm（customer / 画像231px）と .ys3clm（yahooshopping / 画像220px）は
   構造が同じなので同じルールで扱う。
   float を flex に置き換えて2カラム化する。
   グループの区切りに使われている p.clear（幅690pxのスペーサー画像入り）は
   flex-basis:100% で1行占有させ、区切りとしての役割を維持する
   ------------------------------------------------------------ */
div.cust3clm,
div.ys3clm{
	display:flex;
	flex-wrap:wrap;
	padding:15px 0 0;
}
div.cust3clm > div,
div.ys3clm > div{
	float:none;
	width:50%;
	padding:0 5px 15px;
	box-sizing:border-box;
}
div.cust3clm > p,
div.ys3clm > p{
	flex:0 0 100%;
	width:auto;
	height:auto;
}
div.cust3clm div img,
div.ys3clm div img{
	width:100%;
	height:auto;
}
div.cust3clm div p,
div.ys3clm div p{
	font-size:13px;
	line-height:1.5;
}
div.cust3clm div p span,
div.ys3clm div p span{
	padding:3px 0 0 16px;
	background-position:2px 7px;
}
div.cust3clm div p a,
div.ys3clm div p a{
	line-height:1.5;
}

/* yahooshopping : ストア一覧の見出し */
p.ysRsltTtl{
	padding:30px 0 10px;
	font-size:15px;
	line-height:1.5;
}

/* ------------------------------------------------------------
   submit : キャッチコピー・見出しの縮小
   PCは28-38pxの大きな文字なのでSPでは1/2弱まで落とす。
   .sbmt2ctch の letter-spacing:-0.05em（38pxを詰めるための指定）は
   小さい文字では詰まりすぎるので 0 に戻す
   ------------------------------------------------------------ */
p.sbmtCtch{
	padding:20px 0 0;
	font-size:18px;
	line-height:1.5;
}
p.sbmt2ctch{
	padding:20px 0 25px;
	font-size:20px;
	line-height:1.4;
	letter-spacing:0;
}
p.sbmtSbT{
	padding:28px 0 5px;
	font-size:19px;
	line-height:1.4;
}
p.sbmtCtchFt{
	padding:15px 0 0;
	font-size:17px;
	line-height:1.5;
}
p.bodyM{
	padding:20px 0 0;
}

/* ------------------------------------------------------------
   voice : 導入事例リスト
   PCは「テキスト266px（左） ＋ 写真433px（右）」の2カラムfloat。
   SPは float を解除して DOM順（テキスト → 写真）の縦積みにする
   ------------------------------------------------------------ */
#voiceTtl{
	padding:15px 0 0;
	font-size:18px;
	line-height:1.5;
}
div.vlist{
	margin:20px 0 0;
}
div.vlist div{
	float:none;
	width:auto;
	padding:8px 10px;
}
p.vListPic{
	float:none;
	width:auto;
}
p.vlistCtch{
	font-size:15px;
	line-height:1.6;
}

/* ------------------------------------------------------------
   voice詳細（voice/002.html など）
   上部の「写真360px ＋ お客様情報340px」の2カラムテーブルを縦積みにする。
   #contents 直下の table を一律に block 化すると index.html の
   プライバシーマークのテーブルまで崩れるため、
   HTML側に class="voiceHead" を1つだけ足して対象を限定している
   ------------------------------------------------------------ */
table.voiceHead,
table.voiceHead > tbody,
table.voiceHead > tbody > tr,
table.voiceHead > tbody > tr > td{
	display:block;
	width:auto;
}
table.voiceHead > tbody > tr > td{
	padding:0 !important;      /* インラインの padding-right:30px を打ち消す */
}
table.voiceHead > tbody > tr > td + td{
	padding-top:15px !important;
}

/* voice詳細 : お客様情報テーブル（PCは width:340px 固定） */
table.voice{
	width:100%;
	margin:12px 0 0;
}
table.voice tr th,
table.voice tr td{
	padding:6px 8px;
}

/* voice詳細 : 左メニュー下部のバナー */
#lBanner{
	padding:0 0 20px;
}

/* ------------------------------------------------------------
   inquiry（index.php / yahoo.php）: お問い合わせフォーム
   PCは table.inqTbl（width:730px）の「項目名 ＋ 入力欄」2カラム。
   SPは th / td を縦積みにして入力欄を全幅にする。
   罫線(border-bottom)は th・td の両方に付いているため、縦積みにすると
   1行に2本出てしまう。tr 側に付け替えて1行1本にしている
   （「ストア情報」の行は th だけの colspan 行なので td 側には寄せられない）
   ------------------------------------------------------------ */
table.inqTbl,
table.inqTbl > tbody{
	display:block;
	width:auto;
}
table.inqTbl{
	margin-top:12px;
}
table.inqTbl > tbody > tr{
	display:block;
	padding:10px 0;
	border-bottom:solid 2px #CCC;
}
table.inqTbl > tbody > tr > th,
table.inqTbl > tbody > tr > td{
	display:block;
	width:auto;
	border-bottom:none;
}
table.inqTbl > tbody > tr > th{
	padding:0;
	white-space:normal;   /* PCは nowrap。SPは折り返しを許可する */
	line-height:1.5;
}
table.inqTbl > tbody > tr > td{
	padding:4px 0 0;
}
/* 入力欄の上に出る補足説明（「（例） 700〜1000万円」など） */
table.inqTbl > tbody > tr > td p{
	padding:0 0 4px;
	font-size:13px;
	line-height:1.6;
}

/* 入力欄はPCが固定px幅（input.nrr:100 / input.mid:300 / input.wid:500）。
   SPは全幅にする。textarea はHTML側にインラインで width:500px が
   入っているため !important で打ち消す */
table.inqTbl input[type="text"],
table.inqTbl textarea{
	width:100% !important;
	box-sizing:border-box;
	padding:8px;
	font-size:16px;       /* iOSは15px以下の入力欄にフォーカスすると自動ズームする */
	line-height:1.5;
}
/* 出店年数は数文字しか入れないので全幅にはしない */
table.inqTbl input.nrr{
	width:10em !important;
}

/* 個人情報の取り扱い（PCは max-height:130px のスクロールボックス）。
   SPは1行の文字数が減って中身が縦に伸びるので、枠を少し高くする */
div.privacybox{
	max-height:220px;
	padding:10px 12px;
}
div.privacybox p{
	font-size:13px;
	line-height:1.7;
}
/* yahoo.php の「【個人情報の取り扱いについて】」見出し。
   インラインの padding:30px 0 5px 20px の左20pxを解除する
   （この p は table の中に書かれていて foster parenting で form 直下に出るため、
     #contents > p の解除ルールが効かない。HTML側に class を1つ追加している） */
p.inqPmarkTtl{
	padding:20px 0 5px !important;
}

/* ボタン。「上記に同意して問い合わせる」はインラインで width:350px が入っており
   本文355px幅からはみ出すので打ち消す。
   確認画面は「戻る」「送信する」の2つが並ぶので flex で等分する。
   （同じ div の中にある type="hidden" の input は display:none のまま） */
div.inqBtn{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:10px;
	padding:20px 0 35px;
}
div.inqBtn input{
	flex:1 1 auto;
	width:auto !important;
	max-width:340px;
	min-height:48px;
	margin:0;
	padding:10px;
	box-sizing:border-box;
	font-size:16px;
	line-height:1.4;
}

/* index.php の赤枠の注意書き。上の #contents > p（4-6）で左右パディングが
   0にされると枠線に文字が接するため、この1箇所だけ戻す。
   ID付きセレクタに勝つ必要があるので #contents > p.xxx の形にしている */
#contents > p.inqNotice{
	padding:8px 10px !important;
	line-height:1.6 !important;
}

/* ------------------------------------------------------------
   footer
   ------------------------------------------------------------ */
#footer{
	padding:20px 10px;
}
#footer div{
	width:auto;
}
#fLogo{
	float:none;
	width:auto;
	text-align:center;
	line-height:1.5;
}
#fLink{
	float:none;
	width:auto;
	padding:10px 0 0;
	text-align:center;
	line-height:2;
}
/* リンク文言の途中で改行されないようにする */
#fLink a{
	display:inline-block;
	white-space:nowrap;
}
#fLast{
	width:auto;
	margin:15px 0 0;
}

}
/* === SP ここまで =========================================== */


/* ============================================================
   SP のうち幅に余裕がある範囲（520-767px）
   customer / yahooshopping のストア一覧は PC と同じ3カラムにする。
   画像は原寸231px / 220px なので、この範囲なら拡大率が約1.04倍に収まりボケない
   ============================================================ */
@media screen and (min-width:520px) and (max-width:767px) {

div.cust3clm > div,
div.ys3clm > div{
	width:33.3333%;
}

}


/* ============================================================
   submit.html の画像マップ（sbmt_features.gif 461x146 / usemap="#Map"）
   ------------------------------------------------------------
   img{max-width:100%} で縮小すると <area coords> が縮小に追従せず、
   3つ目の円「在庫連動」をタップすると #submitlist に飛ぶ誤リンクが起きる。
   zoom は当たり判定も一緒に縮小されるため、zoom で縮小する。
   （検証: max-width では円3→AREA#submitlist、zoom では円3→AREA#zaikorendo）
   481px以上は原寸461pxがそのまま収まるので縮小不要
   ============================================================ */
@media screen and (max-width:480px) {

img[src$="sbmt_features.gif"]{
	max-width:none;
	zoom:0.65;          /* 461 x 0.65 = 300px : 320px幅の端末でも収まる */
}

}

@media screen and (min-width:375px) and (max-width:480px) {

img[src$="sbmt_features.gif"]{
	zoom:0.77;          /* 461 x 0.77 = 355px : 375px幅にちょうど収まる */
}

}


/* ============================================================
   PC (min-width:768px) : 現状維持のためルールなし
   ============================================================ */
@media screen and (min-width: 768px) {}

/* ============================================================
   タブレット (768px-1420px) : 未使用（PCレイアウトのまま）
   ============================================================ */
@media screen and (min-width:768px) and (max-width:1420px) {}