/*------- スマホ用 -----------------*/ @CHARSET "UTF-8"; @media screen and (max-width:640px){ * { margin:0; padding:0; font-style:normal; font-weight:normal; text-decoration:none; line-height:1.5; word-break:break-all; } body { background-color:#FFFFFF; background-repeat:repeat-x; color:#000000; margin:0; padding:0; line-height:1.5; font-size:11px; font-family:"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Arial, sans-serif; } div, h1, h2, h3, h4, h5, h6, p, blockquote, pre { margin:0; padding:0; display:block;} h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal;} ul, ol, li { display:block; list-style-image:none; list-style-position:outside; list-style-type:none;} em { font-style:normal; font-weight:normal;} hr { border:0; clear:both;} a { text-decoration:none;} a:hover { text-decoration:underline;} img { border:0; vertical-align: text-bottom;} form { margin:0; padding:0; display:block; line-height:1; padding:0.0em;} strong { font-weight:bold; color:#8f0101; line-height:100%;} input {vertical-align:middle;} div:after { content:" "; display:block; visibility:hidden; clear:both; height:0.1px; font-size:0.1em; line-height:0; overflow:hidden;} h1 { font-family: 'ＭＳ Ｐゴシック', Osaka, sans-serif; font-size: 16pt; font-weight: bold; } h2 { font-family: 'ＭＳ Ｐゴシック', Osaka, sans-serif; font-size: 14pt; font-weight: bold; } h3 { font-family: 'ＭＳ Ｐゴシック', Osaka, sans-serif; font-size: 12pt; font-weight: bold; } /*== Base =======================*/ /* Wrapper */ #wrapper { width: 100%; margin: 0 auto; padding: 0; } #wrap_head { clear: both; display: block; width: 100%; margin: 0 auto; padding: 0; background-color: #FDF4E9; } #wrap_contents { clear: both; display: block; width: 100%; margin: 0 auto; padding: 10px 0; text-align: center; } /* Footer */ #wrap_footer { clear: both; display: block; width: 100%; margin: 0 auto; padding: 10px 0; text-align: center; } div#header{ width: 100%; margin: 0 auto; text-align: left; padding: 10px 4px 0; } div#footer{ width: 100%; margin: 10px auto 0 auto; background: #222; text-align: center; padding: 10px 0; } div#mainImgBox{ width: 100%; margin: 10px auto; text-align: center; } div#mainImgBox img{ width: 100%; margin: 0 auto; text-align: center; } div#mainContents{ width: 98%; margin: 0 auto; text-align: left; } /* ３つのトピックス */ div#mainContents div.topicsBox{ width: 90%; float: left; margin-left: 4px; margin-bottom: 10px; } div.wrapBox{ width: 95%; border-top: 1px solid #ccc; margin: 0 auto; padding: 10px 0 ; margin-top: 15px; } div#leftContents{ display: none; } /*== wrap_head =======================*/ #header { clear: both; margin: 10px; } #header .logo { margin: 0; padding:0; text-align: center; font-size:28px; font-weight:bold; } #header .info { margin: 0; padding:10px 0; text-align: center; vertical-align: bottom; } .tel strong{ font-size:14px; font-weight:bold; } /* navi */ #gnavi{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; display: none; } #gnavi li{ display: block; float: left; width: 100%; margin: 0; padding: 0; } #gnavi li a{ display: block; padding: 12px 0 10px; background: #CCCCCC; color: #000000; text-align: center; text-decoration: none; font-size:14px; font-weight:bold; } #gnavi li a:hover{ background: #444444; color: #FFFFFF; } #toggle{ display: block; position: relative; width: 100%; background-image: -moz-linear-gradient(#A4E9FF, #00008b); background-image: -webkit-linear-gradient(#A4E9FF, #00008b); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#A4E9FF', endColorstr='#00008b'); font-size:16px; font-weight:bold; } #toggle a{ display: block; position: relative; padding: 4px 0 10px; border-bottom: 1px solid #444; color: #fff; text-align: center; text-decoration: none; } #toggle:before{ display: block; content: ""; position: absolute; top: 50%; left: 10px; width: 20px; height: 20px; margin-top: -10px; background: #fff; } #toggle a:before, #toggle a:after{ display: block; content: ""; position: absolute; top: 50%; left: 10px; width: 20px; height: 4px; background: #666666; } #toggle a:before{ margin-top: -6px; } #toggle a:after{ margin-top: 2px; } /*== wrap_footer =======================*/ #footer_service_area{ clear: both; text-align: center; font-family: 'ＭＳ Ｐゴシック', Osaka, sans-serif; font-size: 9pt; font-weight:bold; color:#8B0000; background-color:#FFE4E1; border: solid 1px #8F0000; padding:10px 4px; margin: 10px; } #footer_copyritht{ clear: both; text-align: center; font-weight:bold; font-size: 9pt; margin: 10px 0 0 0; padding: 5px 0 0 0; border-top: solid 3px #0000FF; } /*== wrap_contents =======================*/ #contents_area1 { clear: both; display: block; margin: 0; padding:0 5px; } #contents_area2 { clear: both; display: block; margin: 0; padding:0 5px; } /*** top ***/ #prodct_list_top{ clear: both; display: block; text-align: left; margin: 10px 0; padding: 10px 0; font-size: 11pt; border-bottom: 1px solid #666666; } #prodct_list_top .title{ font-size: 14pt; font-weight:bold; color:#FFFFFF; text-align: left; background: #272672; padding: 1px 4px; } #product_search_top{ clear: both; display: block; text-align: left; margin: 10px 0; padding: 10px 0; font-size: 11pt; border-bottom: 1px solid #666666; } #product_search_top .title{ font-size: 14pt; font-weight:bold; color:#FFFFFF; text-align: left; background: #272672; padding: 1px 4px; } #search_btn{ margin: 4px auto; text-align: center; } #search_btn button{ width: 100px; } #site_info_top{ clear: both; display: block; text-align: left; margin: 30px 4px 0 4px; padding:0; font-size: 11pt; } #site_info_top .title{ font-size: 14pt; font-weight:bold; color:#8f0101; text-align: center; text-decoration:underline; } #companyinfo { clear: both; display: block; text-align: left; margin: 0 0 20px 0; padding:0; border: 1px solid #000000; } #contact_notice { text-align: center; margin: 20px 10px; padding:5px; border: 1px solid #000000; font-size: 10pt; } #contactinfo { clear: both; display: block; width: 100%; margin: 0; padding:0; } #contactinfo .title { margin: auto; padding: 4px 0; text-align:center; width:95%; border:1px solid #CCCCCC; background-color: #CCCCCC; } #contactinfo .detail { margin: auto; padding: 10px 15px; text-align:left; width:90%; } #contactinfo .link { margin: 10px auto; text-align:center; width:95%; } #step_info { clear: both; display: block; width: 100%; margin: 0 0 20px 0; padding:0; } #step_info .caption { padding: 10px 0; text-align:center; width:100%; font-weight:bold; font-size:16px; } #step_info .title { padding: 4px 6px; text-align:left; width:95%; border:1px solid #4169e1; background-color: #4169e1; color: #FFFFFF; } #step_info .step { font-weight:bold; font-size:14px; } #step_info .detail { padding: 4px 6px; text-align:left; width:95%; border:1px solid #999999; } #step_info .img { width:95%; text-align:center; margin: 4px auto; } #step_info img { width:40px; } #corprate_info{ clear: both; display: block; width: 100%; margin: 0 0 20px 0; padding:0; } #corprate_map{ clear: both; display: block; margin: 0 0 20px 0; padding:0 5px; } /*** itemlist ***/ #producLlist { clear: both; display: block; width: 100%; margin: 0 0 20px 0; padding:0 ; } #producLlist ul.productItem{ clear: both; padding: 0; margin: 0; width: 100%; } #producLlist li.productDetail { padding:0; margin: 0; float: left; width: 100%; box-sizing:border-box; display: block; text-align: left; } #producLlist li.productDetail div.product { width: 90%; padding:10px 10px; margin: 4px; display: block; text-align: left; border: 1px solid #c8c8ff; border-radius: 5px; /* CSS3草案 */ -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ -moz-border-radius: 5px; /* Firefox用 */ } #producLlist li.productDetail div.product .productName { font-size:12px; font-weight: bold; } #search_area { clear: both; display: block; width: 90%; margin:0 auto 10px auto; padding: 5px; font-size: 10px; border: 1px solid #AAAAAA; } #search_title { clear: both; display: block; width: 90%; margin:0 auto; padding: 2px 6px; font-size: 12px; background-color: #AAAAAA; color:#FFFFFF; } table.productInfo .list_img { width:40%; } table.productInfo .list_info { width:60%; } table.productInfo .list_img img{ width:100%; } table.productInfo { margin: 3px 0; border-collapse: separate; border-spacing: 1px; font-size: 9pt; width:100%; } table.productInfo caption { margin-top: 2px; text-align: left; } table.productInfo th { background: #272672; font-color: #FFFFFF; color: #FFFFFF; text-align: left; text-valign: middle; vertical-align: middle; white-space: bold; padding: 2px 4px; } table.productInfo td { background: #FFFFFF; text-align: left; text-valign: middle; vertical-align: top; padding: 2px 2px; white-space: normal; } table.productAbstruct { margin:0 3px; border-collapse: separate; border-spacing: 1px; font-size: 9pt; width:100%; } table.productAbstruct caption { margin-top: 2px; text-align: left; } table.productAbstruct th { border-bottom: solid 1px #B2B2B2; background: #DDDDDD; color: #000000; text-align: left; text-valign: middle; vertical-align: middle; white-space: bold; padding: 2px 4px; } table.productAbstruct td { border-bottom: solid 1px #B2B2B2; background: #FFFFFF; text-align: left; text-valign: middle; vertical-align: middle; padding: 2px 4px; white-space: normal; } /*** itemdetail ***/ #contents_area0 .carname { margin: 1px 10px; font-size: 16px; font-weight: bold; } #contents_area0 .price { margin: 1px 10px; font-size: 16px; font-weight: bold; color: #FF0000; } #product_image { clear: both; display: block; width: 100%; margin: 0 0 4px 0; padding:0; } #product_detail { clear: both; display: block; width: 100%; margin: 0 0 20px 0; padding:0; } #photo_main { width:100%; } #photo_main img{ vertical-align:bottom; border:0; width:100%; } #photo_navi { clear: both; padding:4px 0 0 0; margin: 0; width: 100%; } #photo_navi img{ vertical-align:bottom; border: 4px solid #FFFFFF; width:100%; } #photo_navi a.over img{ filter:alpha(opacity=75); opacity:0.75; border: 4px solid #FF0000; width:100%; } #photo_navi ul{ clear: both; padding:0 0; margin: 0; width: 100%; } #photo_navi li{ display: block; float:left; list-style:none; margin:1px 0; padding:0 ; width: 19.8%; } table.product_detail_info { margin: 3px; border-collapse: separate; border-spacing: 1px; font-size: 10pt; width: 95%; } table.product_detail_info caption { margin-top: 2px; text-align: left; } table.product_detail_info th { border-bottom: solid 1px #B2B2B2; background: #DDDDDD; color: #000000; text-align: left; text-valign: middle; vertical-align: middle; white-space: bold; font-size: 10pt; width: 30%; padding: 6px 0 6px 15px; } table.product_detail_info td { border-bottom: solid 1px #B2B2B2; background: #FFFFFF; text-align: left; text-valign: middle; vertical-align: middle; padding: 4px 0 0 15px; white-space: normal; width: 70%; } /*** privacy ***/ #privacy{ clear: both; display: block; width: 100%; margin: 10px 0; padding:0; font-size:12px; } #privacy .privacyCategory{ clear: both; display: block; margin: 2px 5px; padding: 2px 5px; font-size:14px; font-weight:bold; } #privacy .privacyDetail{ clear: both; display: block; margin: 4px 5px 8px 5px; padding: 2px 5px 2px 10px; } /*** faq ***/ #faqlist{ clear: both; display: block; width: 100%; margin: 10px 0; padding:0 ; font-size:12px; } #faqlist .faqCategory{ clear: both; display: block; margin: 2px 5px; padding: 4px 5px; font-size:16px; font-weight:bold; text-align:center; border:1px solid #CCCCCC; background-color: #CCCCCC; } #faqlist .faqQuestion{ clear: both; display: block; margin: 2px 5px; padding: 2px 5px; font-size:14px; font-weight:bold; text-decoration:underline; } #faqlist .faqAnswer{ clear: both; display: block; margin: 4px 5px 8px 5px; padding: 2px 5px 2px 10px; } /*** inquery ***/ #inquery{ clear: both; display: block; width: 100%; margin: 10px 0; padding:0; font-size:12px; } #inquery_btn{ margin: 4px auto; padding: 10px 0; text-align: center; } #inquery_btn input[type="submit"]{ width: 100px; } #inquery_btn input[type="reset"]{ width: 100px; } #inquery ul{ clear: both; padding: 4px 0; margin: 0; width: 100%; } #inquery li { padding:2px 4px; margin: 0; float: left; width: 90%; box-sizing:border-box; display: block; text-align: left; } #inquery li input { padding:2px 4px; } #inquery li.title{ font-weight:bold; } #inquery li.detail{ padding-left: 10px; } /* 各種テーブル */ /* Table companylist */ table.companylist { margin: 3px; border-collapse: separate; border-spacing: 1px; font-size: 10pt; } table.companylist caption { margin-top: 2px; text-align: left; } table.companylist th { border-bottom: solid 1px #B2B2B2; background: #272672; color: #FFFFFF; text-align: left; text-valign: middle; vertical-align: middle; white-space: bold; font-size: 10pt; width: 640px; padding: 6px 0 6px 15px; } table.companylist td { border-bottom: solid 1px #B2B2B2; background: #FFFFFF; text-align: left; text-valign: middle; vertical-align: middle; padding: 4px 0 0 15px; white-space: normal; } /* Table corprate_list */ table.corprate_list { margin: 3px; border-collapse: separate; border-spacing: 1px; font-size: 10pt; width: 95%; } table.corprate_list caption { margin-top: 2px; text-align: left; } table.corprate_list th { border: solid 1px #B2B2B2; background: #272672; font-color: #FFFFFF; color: #FFFFFF; text-align: left; text-valign: middle; vertical-align: middle; white-space: bold; font-size: 10pt; width: 30%; padding: 6px 0 6px 15px; } table.corprate_list td { border: solid 1px #B2B2B2; background: #FFFFFF; text-align: left; text-valign: middle; vertical-align: middle; padding: 4px 0 0 15px; white-space: normal; width: 70%; } /* Table corprate_list */ table.corprate_list { margin: 3px; border-collapse: separate; border-spacing: 1px; font-size: 10pt; width: 95%; } table.corprate_list caption { margin-top: 2px; text-align: left; } table.corprate_list th { border: solid 1px #B2B2B2; background: #272672; font-color: #FFFFFF; color: #FFFFFF; text-align: left; text-valign: middle; vertical-align: middle; white-space: bold; font-size: 10pt; width: 30%; padding: 6px 0 6px 15px; } table.corprate_list td { border: solid 1px #B2B2B2; background: #FFFFFF; text-align: left; text-valign: middle; vertical-align: middle; padding: 4px 0 0 15px; white-space: normal; width: 70%; } /* Table search_condition_top */ table.search_condition_top { margin: 3px; border-collapse: separate; border-spacing: 1px; font-size: 12pt; } table.search_condition_top caption { margin-top: 2px; text-align: left; } table.search_condition_top th { text-align: left; text-valign: middle; vertical-align: middle; white-space: bold; font-size: 11pt; width: 70px; padding: 2px 2px; } table.search_condition_top td { text-align: left; text-valign: middle; vertical-align: middle; padding: 2px 2px; white-space: normal; } /* Table recommendlist */ table.recommendlist { margin: 3px; border-collapse: separate; border-spacing: 1px; font-size: 12pt; } table.recommendlist caption { margin-top: 2px; text-align: left; } table.recommendlist th { text-align: left; text-valign: middle; vertical-align: middle; white-space: bold; font-size: 11pt; width: 70px; padding: 2px 2px; } table.recommendlist td { text-align: left; text-valign: middle; vertical-align: middle; padding: 2px 2px; white-space: normal; border-bottom: dotted 1px #666666; } table.recommendlist .list_img { width: 74px } table.recommendlist .list_img img { width: 70px } table.recommendlist .list_price { width: 70px; text-align:right } #product_search_top input[name="search_car_name"] { width: 70%; } #product_search_top input[name="search_price_lower"] { width: 20%; } #product_search_top input[name="search_price_Upper"] { width: 20%; } #inquery input[name="name"] { width: 50%; } #inquery input[name="tel"] { width: 50%; } #inquery input[name="mail"] { width: 100%; } #inquery input[name="address"] { width: 100%; } #inquery textarea { width:100%; height:80px; padding-right: 10px; display: table; } }