/* newproduct.css 2010.6.25 */
/* 製品ごとに使うスタイル */
/*============目次============
　最終更新日：2025/2/26
　1.
　2.

============================*/

/*===========================
■1. ClearFix
-----------------------------
フロート要素の高さをクリアする。
============================*/
#ContentsMenu .EachBox:after,
.Section#fbform dl:after,
#starfax.ContentInner ol li:after,
#myhome.ContentInner ol li:after,
#3doff.ContentInner ol li:after,
.Section:after,
.ClearFix:after
{  
	content: ".";  
	display: block;  
	visibility: hidden;  
	height: 0.1px;  
	font-size: 0.1em;  
	line-height: 0;  
	clear: both;  
}
#ContentsMenu .EachBox,
.Section#fbform dl,
#starfax.ContentInner ol li,
#myhome.ContentInner ol li,
#3doff.ContentInner ol li,
.Section,
.ClearFix
{  
	display: inline-block;  
	zoom: 100%;  
}

/*===========================
■2. 上書きスタイル
============================*/
/* 「h1」の背景画像を変更する場合 */
.Contents h1.TitleBlank {
	background-image: url(/common/img/title/title_blank_default.gif);
}

/* ３Ｄ飲食店プランナー用テキスト間隔 */
.ContentInner .Section p,
.ContentInner .Section ul {
	margin: 0 18px 0.5em;
}

/* ３Ｄ飲食店プランナー用テキストサイズ */
.ContentInner .Section p {
	font-size: 80%;
}

/* 製品ロゴ下の空白を拡張 */
.Contents .LogoBlock {
	margin: 0px 0px 10px;
	padding: 0px;
}
/* 製品説明内の左右振り */
.ContentInner .Section .Capture {
	text-align:center;
	float: none;
	margin: 0 0 10px 10px;
}
.ContentInner .Section .Capture.Left {
	float: left;
	margin: 0 10px 10px 18px;
}
.ContentInner .Section .Capture.Right {
	float: right;
	margin: 0 18px 10px 10px;
}
.ContentInner .Section li .Capture.Left {
	float: left;
	margin: 0 10px 10px 0;
}
.ContentInner .Section .Capture {
	text-align:left;
	padding: 0;
}
.ContentInner .Section .Capture img {
	padding: 0;
	margin: 0;
}
.ContentInner#product .Section p.Caption {
	font-size: 80%;
	font-weight:bold;
	color: #666666;
	line-height: 120%;
	margin: 0;
	text-align: left;
	padding: 2px 0;
	display: block;
}


/*===========================
■3. 製品ごとに追加したクラス
============================*/
/*--------------------------
□共通要素
--------------------------*/

h3.ProductT {
	margin-top: 0px;
	padding-top: 10px;
	}

.ProductPager {
	padding: 0;
	position: relative;
}
.ProductPager .TopBox {
	width: 120px;
	padding-left: 140px;
	float: left;
	margin: 2px;
}
.ProductPager .PrevBox {
	width: 120px;
	padding-left: 19px;
	float: left;
	margin: 2px;
}
.ProductPager .NextBox {
	width: auto;
	float: right;
	margin: 2px;
}
.ProductPager ul.NextBox2 {
	width: 139px;
	float: right;
	margin: 0px;
	list-style-type: none;
	line-height: 80%;
}

.ProductPager .NumberBox {
	width: 240px;
	padding-left: 25px;
	padding-top: 10px;
	float: left;
}

.ProductPager ul.InfoList {
	margin: 0 auto;
}
.ProductPager ul.InfoList li {
	font-weight: bold;
	color: #999999;
	font-size: 87.5%;
}
.ProductPager ul.InfoList li a {
	font-weight: normal;
	font-size: 86.2%;
}

#vup .Section.TopPager,
.Section.TopPager {
	padding: 0;
	margin: 10px 0
}

.TopPager .PrevBox {
	width: 120px;
	padding-left: 0px;
	float: left;
}
.TopPager .NextBox {
	width: auto;
	float: right;
}


/*===========================
■CSSボタン
============================*/
/* 基本設定 */
div.CssBtn,
a.CssBtn {
	border: 0;
	float: left;
	text-align: center;
	padding: 0;
	margin: 0 0 5px 0;
	cursor: pointer;
	text-decoration: none;
}
div.CssBtn input,
a.CssBtn span {
	font: bold 12px/23px Verdana;
	color: #333333;
	display: block;
	float: left;
	white-space: nowrap;
	height: 41px;   /* 画像（縦）サイズに合わせる */
	line-height: 41px; /* 画像（縦）サイズに合わせる */
	margin-left: 1px;
	padding: 0 12px 0 11px;
	border: none;
}
div.CssBtn:hover,
a.CssBtn:hover {
	text-decoration: none;
}
div.CssBtn:visited,
a.CssBtn:visited {
	text-decoration: none;
}


/* Type A */
div.CssBtn.MetalBtn.TypeA input,
a.CssBtn.MetalBtn.TypeA span {
	background: url("img/btn/metal1_right.gif") no-repeat right top;
	width: auto;
	font-size: 90%;
}
div.CssBtn.MetalBtn.TypeA,
a.CssBtn.MetalBtn.TypeA {
	background:url("img/btn/metal1_left.gif") no-repeat 0 0;
}
div.CssBtn.MetalBtn.TypeA input:hover,
a.CssBtn.MetalBtn.TypeA:hover span {
	background:url("img/btn/metal1_right.gif") no-repeat right bottom;
}
div.CssBtn.MetalBtn.TypeA:hover,
a.CssBtn.MetalBtn.TypeA:hover {
	background:url("img/btn/metal1_left.gif") no-repeat -272px 0;
}


/* 上部小さいボタン */

a.CssBtn.Next span {
	height: 28px;
	line-height: 28px;
	color: #333333;
	margin-left: 2px;
	padding: 0px 17px 0 8px;
	font-size: 90%;
}
a.CssBtn.Next span {
	background: url("img/btn/btn_next.gif") no-repeat right top;
}
a.CssBtn.Next {
	background:url("img/btn/btn_next.gif") no-repeat 0 0;
}
a.CssBtn.Next:hover span {
	background:url("img/btn/btn_next.gif") no-repeat right bottom;
}
a.CssBtn.Next:hover {
	background:url("img/btn/btn_next.gif") no-repeat left bottom;
}

a.CssBtn.Prev span {
	height: 28px;
	width: 38px;
	line-height: 28px;
	color: #333333;
	margin-left: 2px;
	padding: 0px 8px 0 13px;
	font-size: 90%;
}
a.CssBtn.Prev span {
	background: url("img/btn/btn_back.gif") no-repeat right top;
}
a.CssBtn.Prev {
	background:url("img/btn/btn_back.gif") no-repeat 0 0;
}
a.CssBtn.Prev:hover span {
	background:url("img/btn/btn_back.gif") no-repeat right bottom;
}
a.CssBtn.Prev:hover {
	background:url("img/btn/btn_back.gif") no-repeat left bottom;
}
a.GoPrice {
	background-image: url(img/btn/btn_foot_goshop.gif);
	background-position: left top;
	background-repeat: no-repeat;
	display: block;
	width: 150px;
	height: 25px;
	text-indent: -9999px;
	overflow: hidden;
}
a.GoPrice:hover {
	background-position: left bottom;
}


.Paging p.GoNext a {
	display: block;
	float: right;
	background: url(img/btn/btn_go_next.gif) no-repeat right top;
	padding: 0;
	height: 35px;
	overflow: hidden;
	width: 84px;
	text-indent: -9999px;
}
.Paging p.GoNext a:hover {
	background-position: right bottom;
}
.Paging p.GoPrev a {
	display: block;
	float: left;
	background: url(img/btn/btn_go_prev.gif) no-repeat left top;
	padding: 0;
	height: 35px;
	width: 84px;
	overflow: hidden;
	text-indent: -9999px;
}
.Paging p.GoPrev a:hover {
	background-position: left bottom;
}


.Paging p.GoTop {
	width: 116px;
	height: 20px;
	line-height: 20px;
	margin: 0 auto;
	padding: 7px 0;
}
.Paging p.GoTop a {
	display: block;
	background: url(img/btn/paging_btn_top.gif) no-repeat 0 0;
	padding: 0 0 0 26px;
	height: 20px;
	position: relative;
	width: auto;
	margin: 0 auto;
	width: 90px;
	overflow: visible;
	white-space: nowrap;
	overflow: hidden;
}
.Paging p.GoTop a:hover {
	background-position: left bottom;
}

/* 見出し下の説明文 */
.ContentInner .Section.Description p {
	margin: 0 0 0.5em;
}

a.GoRed.GoRedBox {
	width: auto;
	border: 1px solid #ccc;
	margin: 0;
	padding: 5px 15px 5px 25px;
	background-position: 5px 6px;
}

/*--------------------------
□製品トップ
--------------------------*/
/* メインイメージ */
.MainImage {
	margin: 0 0 25px 0;
}
.MainImage h1,
.MainImage .main_image
 {
	text-align:left;
	margin: 0;
	padding: 0;
}
.MainImage p {
	font-size: 75%;
	line-height: 140%;
}


/* メインイメージ下のコンテンツ紹介 */
#ContentsMenu.Section .SectionHalf.Left {
	margin: 0 5px 0 0;
}
#ContentsMenu.Section .SectionHalf.Right {
	margin: 0 0 0 5px;
}
#ContentsMenu.Section .SectionHalf {
	padding: 7px 0 0 0;
	background: transparent url(img/top/bg_topmenu_top.jpg) no-repeat 0 0;
}
#ContentsMenu.Section .SectionHalf .Bottom {
	padding: 7px 0 0 0;
	margin: 0 0 8px;
	background: transparent url(img/top/bg_topmenu_bottom.gif) no-repeat 0 0;
}
#ContentsMenu .EachBox {
	margin: 0;
	padding: 0;
	background: transparent url(img/top/bg_topmenu.gif) repeat-y 0 0;
}
#ContentsMenu h2 {
	font-size: 80%;
	font-family:"メイリオ";
	color: #FFFFFF;
	margin: 0 33px 0;
	padding: 3px 0 0 2px;
	height: 24px;
}
#ContentsMenu h2 a,
#ContentsMenu h2 a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
#ContentsMenu h2 a:hover,
#ContentsMenu h2 a:active {
	text-decoration: underline;
}

#ContentsMenu .EachBox h2 img {
	float: left;
	margin: -3px 4px 0 0;
}
#ContentsMenu .EachBox p {
	margin: 5px 10px 0;
}

/* お知らせ 2025/2/26追記 */
.ContentInner .NewsArea {
	padding: 10px;
	border: 1px solid #5C96CF;
	margin-bottom: 10px;
}
.ContentInner .NewsArea .Emphasis {
	font-weight: 700;
	margin: 0;
}


/*--------------------------
□よくあるご質問
--------------------------*/
.ContentInner#faq {
}

/* 質問リスト */
#faq .Section.Question{

}
#faq .Section.Question ul{
	list-style: none;
	margin: 0 18px;
	padding: 0;
}
#faq .Section.Question ul li{
	font-size: 75%;
	margin: 0 0 0.5em;
	padding: 0 0 0 20px;
	background: url(/common/img/navi/navi_yaji_b.gif) no-repeat 0 2px;
}
/* 回答 */
#faq .Section.Answer {
	clear:both;
	padding-top: 10px;
}
#faq .Section.Answer h3 {
	color: #000;
	background: url(/common/img/tool/q.gif) no-repeat 0 0;
	padding: 0 0 0 25px;
	line-height: 21px;
}
#faq .Section.Answer h3.Long {  /* 質問が長く1行に収まらない場合 */
	color: #000;
	background: url(/common/img/tool/q.gif) no-repeat 0 0;
	padding: 2px 0 2px 25px;
}
#faq .Section.Answer .AnswerBox {
	margin: 0 0 5px;
	background: url(/common/img/tool/a.gif) no-repeat 0 0;
	padding: 2px 0 2px 25px;
	border-bottom: 1px solid #999;
}
#faq .GoPageTop a {
	display: block;
	background: url(img/tool/page_top_s.gif) no-repeat 0 0;
	width: 108px;
	height: 12px;
	float: right;
	text-indent: -9999px;
	overflow: hidden;
}

/*--------------------------
□導入のメリット
--------------------------*/
#merit .Section .Description {
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	margin: 10px 5px;
	padding: 10px;
	width: 530px;
	border: 1px solid #5C96CF;
}


#merit .Section ul{
	list-style-type:none;
	font-size:120%;
}

#merit .Section li{ 
	text-indent:0px;
    background-repeat:no-repeat;
    background-position:left center;
	margin-left:0px;
	padding-left:30px;
	padding-top:10px;
}

#merit .Section li{ 
	 background-image:url(merit/img/miss01.gif);
}


#merit .Section p.big{
	font-size: 100%;
	margin: 10px 40px;
	font-weight:bold;
}
	
/*--------------------------
□機能と特長
--------------------------*/
#product {
}
#product .Section {
	margin: 0 5px 5px;
	padding: 0;
	width: 560px;
}

#product.ContentInner h4 {
	font-size: 87.5%;
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	line-height: 30px;
	height: 30px;
	background: #EFF9E1 url(product/img/st_bg.gif) no-repeat left top;
	margin: 0 0 13px;
	padding: 0 2px 0 18px;
	width: 525px;
	color: #663300;
}


/*--------------------------
□サンプルダウンロード
--------------------------*/
/* 共通 */


/* 一覧 */
#sample .Section#list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#sample .Section#list li {
	width: 270px;
	float: left;
	margin: 0;
	padding: 0 4px 20px;
}
#sample .Section#list li em {
	margin: 0 0 3px;
	display: block;
	font-weight: bold;
	color: #666;
	font-style: normal;
	padding: 0 0 0 10px;

	line-height: 120%;
}
#sample .Section#list li.new em {

}
#sample .Section#list li a.Thumb {
	display: block;
	border: 1px solid #ccc;
	text-align: center;
	padding: 4px;
	width: 250px;
	overflow: hidden;
}
#sample .Section#list li a.Thumb:hover {
	background-color: #FEF2CF;
}
#sample .Section#list li div.Title {
	border: 1px solid #ccc;
	border-top: none;
	background-color: #FDECD0;
	display: block;
	height: auto;
	overflow: hidden;
	text-align: center; 
	padding: 4px;
	width: 250px;
}


/* 詳細 */
.Section#sampledetail h3 {
	color: #666;
}
.Section#sampledetail .sampleimage {
	margin: 0;
	width: 568px;
	border: 1px solid #bfbfbf;
	text-align: center;
	padding: 18px 0;
}

.Section#sampledetail .sampleimage img {
	margin: 0 auto;
	border: 1px solid #999;
}
.Section#sampledetail .sampleimage p {
	margin: 5px 18px 0 18px;
	text-align: left;
}

#sample .Section.Description p.Info {
	background-color: #FFFFCC;	
	padding: 3px 10px;
}


/*--------------------------
□収録パーツ
--------------------------*/
/* 共通 */


/* 一覧 */
.ContentInner .Section.Description2 {
	margin: 30px 5px;
	padding: 10px;
	width: 550px;
	border: 1px solid #ccc;
}


#parts .Section#list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#parts .Section#list li {
	width: 105px;
	float: left;
	margin: 5px;
	padding: 0 4px 20px;
}

#parts .Section#list li div.Title {
	background-color: #FDECD0;
	display: block;
	height: auto;
	overflow: hidden;
	text-align: center; 
	padding: 4px;
	width: 105px;
}
	
/*--------------------------
□収録パーツ分類表
--------------------------*/

table#table-01 {
    width: 550px;
    border: 1px #999999 solid;
    border-collapse: collapse;
    border-spacing: 0;
    color: #333333;
}
table#table-01 th {
    padding: 5px;
    border: #999999 1px solid;
    background: #FEE9D1;
    font-weight: bold;
    line-height: 120%;
	text-align: left;
}
table#table-01 td {
    padding: 5px;
    border: #999999 solid;
    border-width: 0 1px 0 1px;
}
table#table-01 tr.even {
    background: #F5F5F5;
    text-align: left;
}


/*--------------------------
□活用事例
--------------------------*/

.Report h1{
	margin: 0px;
	padding: 0px;
}

.Report{
	background-color:#CC9966;
	font-size:120%;
	width:570px;
	line-height:120%;
	padding: 0px;
	margin: 0px;
}

.Report p.descript{
	color:#FFF;
	margin: 10px 30px;
}

.Report DIV.inn{
	margin: 10px 30px;
}

.Report h2{
	color:#FFF;
	background-image:url(report/img/st_bc.jpg);
	font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:90%;
	padding: 10px 0 0 10px;
	margin: 10px;
	height:27px;
}

.Report .Point{
	background-color:#FFCC99;
	font-weight:bold;
	}
	
.Report DIV.pharsebox01{
	width:480px;
	margin:15px 50px;
	padding: 0px;
}

.Report DIV.pharsebox02{
	width:560px;
	margin:15px 7px;
	padding: 0px;
}

.Report DIV.pharse01{
	float:left;
	margin:0 5px 0 0;
	padding: 0px;
}

.Report DIV.pharse02{
	float:left;
	margin:0px;
	padding: 0px;
}

.Report P.caption{
	font-size:65%;
	font-weight:bold;
	text-align:center;
	padding: 0px;
	margin:10px;
}

.Report DIV.PointBox{
	background-image:url(report/img/point_bc.gif);
	margin:10px;
	font-size:100%;
	}
	
.Report DIV.PointBox DIV.list{
	padding:0 30px;
	}

.Report DIV.PointBox ul{
	list-style:none;
	margin:0;
	padding:0;
	}
	
.Report DIV.PointBox li{
	background:url(report/img/list_image.gif) no-repeat;
	margin:5px 0;
	padding:0 0 0 20px;
	}

/*===========================
■FootNavi
============================*/
.Section.FootNavi {
	background: url(/common/img/tool/footnavi_bg_top.jpg) no-repeat left top;
	width: 570px;
	padding: 15px 0 0 0;
	margin: 15px 0 0 0;
}
.FootNavi .Inner {
	background: url(/common/img/tool/footnavi_bg_bottom.jpg) no-repeat left bottom;
	width: 570px;
	padding: 0 0 15px 0;
}
.FootNavi .Inner .BoxLeft {
	width: 261px;
	padding: 0 0 0 10px;
	float: left;
}
.FootNavi .Inner .BoxRight {
	width: 261px;
	padding: 0 10px 0 0;
	float: right;
}
.FootNavi .Inner .Hr {
	border-top: 1px solid #999999;
	border-bottom: 1px solid #ECECEC;
	width: 251px;
	height: 0px;
	margin: 5px 0 10px 0;
	clear: both;
}
.FootNavi .Inner h2 {
	margin: 0 0 5px 0;
	padding: 0;
	border: none;
	color: #616161;
	font-size: 87.5%
}
.FootNavi .Inner h2 a {
	color: #000099;
	text-decoration: none;
}
.FootNavi .Inner h3,
.FootNavi .Inner h4 {
	margin: 0 0 5px 0;
	padding: 0;
	border: none;
	color: #000000;
	font-weight: bold;
	font-size: 87.5%;
	background: none;
}
.FootNavi .Inner p {
	margin: 0 0 5px 0;
	padding: 0;
}
.FootNavi a {
	color: #000099;
	text-decoration: none;
}
.FootNavi a:hover, .FootNavi a:active {
	color: #003399;
	text-decoration: none;
}
.FootNavi a:visited {
	color: #663366;
	text-decoration: none;
}
a.GoPrice {
	background-image: url(img/btn/btn_foot_goshop.gif);
	background-position: left top;
	background-repeat: no-repeat;
	display: block;
	width: 150px;
	height: 25px;
	text-indent: -9999px;
	overflow: hidden;
}
a.GoPrice:hover {
	background-position: left bottom;
}