/*------------------------------------------------------------------------------ Created:2010.11.20 Last Up Date: Copyright; 2010 Digitalmix inc. All rights reserved. ------------------------------------------------------------------------------*/ /***************************************************************************** 基本CSS ・リセット(YUI 2: Reset CSS) ・スクロールバーを常に表示 ・上つき下つきをベースラインにあわす ・font.css(YUI2.8.1) ・基準のフォント指定12pxとIE6の半角英数字折り返しする レイアウトCSS ・共通ページスタイル(body) ・共通ヘッダー部分(header) ・共通メイン部分(main) ・メインコンテンツ(右)(section) ・メインコンテンツ(左)(sidemenu) ・共通フッター部分(footer) ・商品詳細ページ(entry) ・商品一覧ページ(itiranpage) ・商品検索(kensaku) ・特定商取引(tokutei) ・お支払い方法(osiharai) ・配送方法・送料について(haisou) ・プライバシーポリシー(privacy) ・フリーページスタイル(free) 共通スタイル(ex) *****************************************************************************/ /* Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 2.8.1 1.YUI 2: Reset CSS -----------------------------------------*/ html{ color:#000; background:#FFF; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{ margin:0; padding:0; } table{ border-collapse:collapse; border-spacing:0; } fieldset,img{ border:0; } address,caption,cite,code,dfn,em,strong,th,var,optgroup{ font-style:inherit; font-weight:inherit; } del,ins{ text-decoration:none; } li{ list-style:none; } caption,th{ text-align:left; } h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal; } q:before,q:after{ content:''; } abbr,acronym{ border:0; font-variant:normal; } sup{ vertical-align:baseline; } sub{ vertical-align:baseline; } legend{ color:#000; } input,button,textarea,select,optgroup,option{ font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit; } input,button,textarea,select{ *font-size:100%; } /* スクロールバーを常に表示 -----------------------------------------*/ html{ overflow-y:scroll; } /* 上つき下つきをベースラインにあわす -----------------------------------------*/ sup{ vertical-align: text-top; } sub{ vertical-align: text-bottom; } /* font.css(YUI2.8.1) -----------------------------------------*/ /* Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 2.8.1 10px = 77% 11px = 85% 12px = 93% 13px = 100% 14px = 108% 15px = 116% 16px = 123.1% 17px = 131% 18px = 138.5% 19px = 146.5% 20px = 153.9% 21px = 161.6% 22px = 167% 23px = 174% 24px = 182% 25px = 189% 26px = 197% */ body{ font: 13px/1.231 arial,helvetica,clean,sans-serif; *font-size: small; *font: x-small; } select, input, button, textarea, button { font: 99% arial,helvetica,clean,sans-serif} table{ font-size: inherit; font: 100%; } pre, code, kbd, samp, tt{ font-family: monospace; *font-size: 108%; line-height: 100%; } /*日本語用追加フォント指定*/ body { font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS P Gothic", "Osaka", Verdana, Geneva, Trebuchet, Arial, Helvetica, sans-serif; line-height:1.6; word-break:break-all;/*IE6の半角英数字折り返しする以下*/ } /*基準本文12px(足らずがあれば順次追加)*/ dt,dd,li,h1,h2,h3,h4,h5,h6,pre,fieldset,input,textarea,p,blockquote,th,td{ font-size:93%; } /***************************************************************************** ■共通ページスタイル *****************************************************************************/ body{ color:#666666; } /*ページ全体の文字リンクの指定↓*/ body a:link {color:#666666; text-decoration:none;} body a:visited {color:#666666; text-decoration:none;} body a:hover {color:#666666; text-decoration:underline;} body a:active {color:#666666; text-decoration:underline;} /***************************************************************************** ■共通ヘッダー部分 *****************************************************************************/ #area_header{ margin:0 auto; width:880px; margin-top:28px; } .mod_header_box{ width:880px; margin:0 0 20px 0; } .mod_header_box_toplogo{ float:left; } .mod_header_box_minilogo{ float:right; padding:10px 0 0 10px; } .mod_header_box_text{ float:right; text-align:right; padding:7px 0 0 0; line-height:1.2; font-size:85%; } /*リンクの指定をするなら↓*/ .mod_header_box_text a:link {text-decoration:underline;} .mod_header_box_text a:visited {text-decoration:underline;} .mod_header_box_text a:hover {text-decoration:none;} .mod_header_box_text a:active {text-decoration:none;} .mod_headerlist_box_left{ float:left; } .mod_headerlist_box_left ul{ width:300px; } .mod_headerlist_box_left ul li{ height:16px; padding:0 0 0 20px; background:transparent url("https://img16.shop-pro.jp/PA01098/568/etc/Gnavi_000.gif?20101207203224") no-repeat scroll; font-size:85%; float:left; } .mod_headerlist_box_right{ float:right; } .mod_headerlist_box_right ul{ width:auto; } .mod_headerlist_box_right ul li{ height:16px; float:left; padding:0 0 0 20px; margin:0 0 0 20px; font-size:85%; } .mod_headerlist_box_right ul li.g01{ background:transparent url("https://img16.shop-pro.jp/PA01098/568/etc/Gnavi_001.gif?20101121122216") no-repeat scroll left top; white-space: nowrap;/*IE6文章途中で折り返さない*/ } .mod_headerlist_box_right ul li.g02{ background:transparent url("https://img16.shop-pro.jp/PA01098/568/etc/Gnavi_002.gif?20101121122327") no-repeat scroll left top; white-space: nowrap;/*IE6文章途中で折り返さない*/ } .mod_headerlist_box_right ul li.g03{ background:transparent url("https://img16.shop-pro.jp/PA01098/568/etc/Gnavi_003.gif?20101121122336") no-repeat scroll left top; white-space: nowrap;/*IE6文章途中で折り返さない*/ } /*mod_slidelink */ .mod_slidelink{ padding:13px 0 0 0; position:relative; } .mod_slidelink ul.slidebtn{ position:absolute; top:-20px; left:200px; } .mod_slidelink ul.slidebtn li{ float:left; width:162px; height:22px; margin:0 14px 0 0; padding:0 0 10px 0; cursor:pointer; text-decoration:underline; } .mod_slidelink ul.slidebtn li#panel01{ margin:0; } .mod_slidelink ul.slidebtn li.open{ text-decoration:none; background:transparent url('../img/bg_panelopen.gif') no-repeat bottom center; /*background:transparent url('https://img16.shop-pro.jp/PA01098/568/etc/bg_panelopen.gif?20130928145236') no-repeat bottom center;*/ } .mod_slidelink_panel{ } .mod_slidelink_panel_entry{ display:none; border:solid 4px #D7D1C1; } .mod_slidelink_panel_entry ul{ margin:10px 0 15px 30px; } .mod_slidelink_panel_entry ul li { float:left; width:140px; margin:5px 0 0 0; } .mod_slidelink_panel_entry ul li a{ display:block; padding:0 0 0 18px; background:transparent url("https://img16.shop-pro.jp/PA01098/568/etc/navi_marker_01.jpg?20101121122405") no-repeat scroll 0px 50%; } /*リンクの指定をするなら↓*/ .mod_headerlist_box ul li a:link {text-decoration:underline;} .mod_headerlist_box ul li a:visited {text-decoration:underline;} .mod_headerlist_box ul li a:hover {text-decoration:none;} .mod_headerlist_box ul li a:active {text-decoration:none;} /***************************************************************************** ■共通メイン部分 *****************************************************************************/ #area_main{ margin:0 auto; width:880px; margin-top:18px; } * html #area_main{ margin-top:16px; } #area_main_box{ width:880px; } #area_main_box_left{ float:left; width:220px; } #area_main_box_right{ float:right; width:600px; } /* .メインコンテンツ(右)--*/ .mod_toptitle h1{ } .mod_section{ padding:22px 0 0 0; } .mod_section h3{ font-weight:bold; border-bottom:1px solid #CCC; margin:0 0 13px 0; } .mod_section p{ margin:0 0 17px 0; } .mod_section ol{ padding:0 0 17px 0; } .mod_section ol li{ line-height:1.8; } /*リンクの指定をするなら↓*/ .mod_section ol li a:link {text-decoration:underline;} .mod_section ol li a:visited {text-decoration:underline;} .mod_section ol li a:hover {text-decoration:none;} .mod_section ol li a:active {text-decoration:none;} /* mod_banner */ .mod_banner{ width:600px; overflow:hidden; padding:22px 0 0 0; } .mod_banner ul{ width:615px; margin-right:-15px; } .mod_banner li{ width:190px; float:left; padding:0 15px 15px 0; } .mod_banner li a{ display:block; } .mod_utuwalist{ padding:30px 0 0 0; } .mod_utuwalist h3{ font-weight:bold; border-bottom:1px solid #CCC; margin:0 0 13px 0; } .mod_utuwalist_box{ margin-right:-8px; } .mod_utuwalist_box dl{ width:144px; text-align:justify; float:left; padding:0 8px 20px 0; line-height:1.2; } .mod_utuwalist_box dt{ margin:0 0 3px 0; } .mod_utuwalist_box dd{ font-size: 85%; } /* .メインコンテンツ(左)--*/ .mod_sidemenu{ margin:0 0 17px 0; width:220px; } .mod_sidemenu h2{ margin:0 0 4px 0; } .mod_sidemenu ul{ width:220px; } .mod_sidemenu ul li{ background:transparent url("https://img16.shop-pro.jp/PA01098/568/etc/list_line.gif?20101121122349") no-repeat bottom; margin:-1px 0 0 0; padding:1px 0 0 0; line-height:2.5; } .mod_sidemenu ul li a{ width:169px; display:block; padding:0 0 0 31px; background:transparent url("https://img16.shop-pro.jp/PA01098/568/etc/navi_marker_01.jpg?20101121122405") no-repeat scroll 11px 50%; } /*リンクの指定をするなら↓*/ .mod_sidemenu ul li a:link {} .mod_sidemenu ul li a:visited {} .mod_sidemenu ul li a:hover {} .mod_sidemenu ul li a:active {} .mod_search{ padding:0 0 20px 2px; } .mod_search input.mod_inputbox{ width:170px; } .mod_search input.mod_inputtext{ margin:0 0 0 3px; } .mod_sidelist{ margin:0 0 17px 0; } .mod_sidelist ul li{ background:transparent url("https://img16.shop-pro.jp/PA01098/568/etc/navi_marker_02.gif?20101121122427") no-repeat scroll left 50%; line-height:2.0; margin: 0 0 0 16px; padding:0 0 0 15px; } /*リンクの指定をするなら↓*/ .mod_sidelist ul li a:link {color:; text-decoration: ;} .mod_sidelist ul li a:visited {color:; text-decoration: ;} .mod_sidelist ul li a:hover {color:; text-decoration: ;} .mod_sidelistf ul li a:active {color:; text-decoration: ;} #area_pagatop{ margin:0 auto; width:880px; padding:20px 0 20px 0; } #area_pagatop p{ float:right; width:90px; height:22px; overflow:hidden; } #area_pagatop p a{ display:block; height:22px; } /*リンクの指定をするなら↓*/ #area_pagatop p a:link {} #area_pagatop p a:visited {} #area_pagatop p a:hover {margin-top:-22px;} #area_pagatop p a:active {margin-top:-22px;} /***************************************************************************** ■共通フッター部分 *****************************************************************************/ #area_footer{ margin:0 auto; width:880px; background-color:#EAEAEA; margin-bottom:30px; } #area_footer address{ line-height:3.0; padding:0 0 0 20px; font-style:normal; /*12px→11px*/ font-size:85%; font-family:Georgia, serif; } /***************************************************************************** ■商品詳細ページ *****************************************************************************/ .mod_entry form{ font-size:100%; } .mod_entry p.photo img{ margin:0 0 15px 0; } .mod_entry h1{ font-weight:bold; font-size:116%; margin:9px 0 15px 0; } .mon_entry_spec{ margin:15px 0 0 0; background:transparent url("https://img16.shop-pro.jp/PA01098/568/etc/list_line.gif?20101121122449") repeat-x scroll left bottom; } .mon_entry_spec dl{ background:transparent url("https://img16.shop-pro.jp/PA01098/568/etc/list_line.gif?20101121122449") repeat-x scroll left top; line-height:2.8; } .mon_entry_spec dt{ font-weight:bold; color:#999999; padding:0 0 0 10px; } .mon_entry_spec dd{ margin:-2.8em 0 0 18.5em; } .mod_entry_kounyuu{ position: relative; padding:28px 0 26px 0; background:transparent url("https://img16.shop-pro.jp/PA01098/568/etc/list_line.gif?20101121122449") repeat-x scroll left bottom; } .mod_entry_kounyuu dl{ } .mod_entry_kounyuu dt{ font-weight:bold; color:#999999; padding:0 0 0 10px; } .mod_entry_kounyuu dd{ margin:-1.6em 0 0 6em; *margin:-1.7em 0 0 6em;/*IE6,7用*/ } .mod_entry_kounyuu dd span{ display:block; float:left; } .mod_entry_kounyuu dd span.btn{ margin: -3px 0 0 0; *margin:-2px 0 0 0;/*IE6,7用*/ } .mod_entry_kounyuu dd span input{ width:50px; height:16px; margin:0; } .mod_entry_kounyuu p.btn{ height:25px; width:155px; overflow:hidden; clear: both; position: absolute; top:25px; left:222px; } .mod_entry_kounyuu p.text{ display:block; padding:0 0 0 20px; background:transparent url("https://img16.shop-pro.jp/PA01098/568/etc/Gnavi_001.gif?20101121122216") no-repeat scroll left 50%; position: absolute; top:27px; left:400px; } /*リンクの指定をするなら↓*/ .mod_entry_kounyuu p.text a:link {text-decoration:underline;} .mod_entry_kounyuu p.text a:visited {text-decoration:underline;} .mod_entry_kounyuu p.text a:hover {text-decoration:none;} .mod_entry_kounyuu p.text a:active {text-decoration:none;} /***************************************************************************** ■商品一覧ページ *****************************************************************************/ .mod_itiranpage h1{ font-weight:bold; font-size:116%; margin:30px 0 15px 0; border-bottom: solid 1px #CCC; } .mod_itiranpage_sort{ font-size:85%; margin:0 0 23px 0; } .mod_itiranpage_sort dl{ line-height: 1.5; } .mod_itiranpage_sort dt, .mod_itiranpage_sort dd{ float: left; } /*リンクの指定をするなら↓*/ .mod_itiranpage_sort dd a:link {text-decoration:underline;} .mod_itiranpage_sort dd a:visited {text-decoration:underline;} .mod_itiranpage_sort dd a:hover {text-decoration:none;} .mod_itiranpage_sort dd a:active {text-decoration:none;} .mod_itiranpage_pagenext{ padding:3px; text-align: center; background-color:#EAEAEA; } /***************************************************************************** ■商品検索 *****************************************************************************/ .mod_kensaku h1{ font-weight:bold; font-size:116%; margin:30px 0 15px 0; border-bottom: solid 1px #CCC; } .mod_kensaku_kekka dl{ font-size:85%; line-height: 1.5; } .mod_kensaku_kekka dt, .mod_kensaku_kekka dd{ float: left; } /***************************************************************************** ■特定商取引法に基づく表記 *****************************************************************************/ /* .特定商取引 -----------------------------------------*/ .mod_tokutei h1{ font-weight:bold; font-size:116%; margin:30px 0 15px 0; border-bottom: solid 1px #CCC; } * html .mod_tokutei h1 {margin-top:33px; } .mod_tokutei_tbl{ padding:24px 20px 24px 20px; border:solid 1px #CCC; } .mod_tokutei_tbl table{ width:100%; } .mod_tokutei_tbl tr{ } .mod_tokutei_tbl th{ font-weight: bold; width:35%; padding:10px 0 12px 17px; vertical-align: top; border-bottom:solid 1px #CCC; } .mod_tokutei_tbl td{ width:65%; padding:11px 7px 11px 0px; border-bottom:solid 1px #CCC; } /* .お支払い方法 -----------------------------------------*/ .mod_osiharai h1{ font-weight:bold; font-size:116%; margin:30px 0 15px 0; border-bottom: solid 1px #CCC; } .mod_osiharai_tbl{ padding:24px 20px 24px 20px; border:solid 1px #CCC; } .mod_osiharai_tbl table{ width:100%; } .mod_osiharai_tbl tr{ } .mod_osiharai_tbl th{ font-weight: bold; width:35%; padding:10px 0 12px 17px; vertical-align: top; border-bottom:solid 1px #CCC; } .mod_osiharai_tbl td{ width:65%; padding:11px 7px 11px 0px; border-bottom:solid 1px #CCC; } /* .配送方法・送料について -----------------------------------------*/ .mod_haisou{ margin:0 0 30px 0; } .mod_haisou h1{ font-weight:bold; font-size:116%; margin:30px 0 15px 0; border-bottom: solid 1px #CCC; } .mod_haisou_tbl{ padding:24px 20px 24px 20px; border:solid 1px #CCC; } .mod_haisou_tbl table{ width:100%; } .mod_haisou_tbl tr{ } .mod_haisou_tbl th{ font-weight: bold; width:35%; padding:10px 0 12px 17px; vertical-align: top; border-bottom:solid 1px #CCC; } .mod_haisou_tbl td{ width:65%; padding:11px 7px 11px 0px; border-bottom:solid 1px #CCC; } /***************************************************************************** ■プライバシーポリシー *****************************************************************************/ .mod-privacy{ margin:0 0 30px 0; } .mod-privacy h1{ font-weight:bold; font-size:116%; margin:30px 0 15px 0; border-bottom: solid 1px #CCC; } .mod-privacy_inner{ } .mod-privacy_inner p{ padding:5px 0 15px 0; line-height:1.5; } .mod-privacy_inner dl dt{ border-top:solid 1px #DDDDDD; padding:15px 0 0 5px; font-weight:bold; } .mod-privacy_inner dl dd{ padding:5px 0 15px 15px; } /***************************************************************************** ■フリーページスタイル(free) *****************************************************************************/ /* 2カラム(50/50) -----------------------------------------*/ .mod_column02{ width:616px; margin:0 -16px 0 0; overflow:hidden; } .mod_column02_inner{ float:left; width:292px; margin:0 16px 0 0; } /* 3カラム -----------------------------------------*/ .mod_column03{ width:615px; margin:0 -15px 0 0; overflow:hidden; } .mod_column03_inner{ float:left; width:190px; margin:0 15px 0 0; } /* 3/2 */ .mod_column03_inner02{ float:left; width:395px; margin:0 15px 0 0; } /***************************************************************************** /*■共通便利スタイルCSS *****************************************************************************/ /* マージントップ -----------------------------------------*/ .ex_margintop30{ margin-top:30px; } .ex_margintop20{ margin-top:20px; } .ex_marginB17{ margin-bottom:17px!important; } .ex_marginB0{ margin-bottom:0px!important; } /* 文字サイズ -----------------------------------------*/ .ex_font14{/*12px→14px*/ font-size:108%; } .ex_font11{/*12px→11px*/ font-size:85%; } .ex_font10{/*12px→10px*/ font-size:77%; } * html .ex_font10 {font-size:9px; line-height: 200%; } .ex_font12{/*14px→12px*/ font-size:93%; } /* 重要文字マーカー -----------------------------------------*/ .ex_fontred{ color: #f00; } /* 英語時のフォント指定 -----------------------------------------*/ .ex_en{ font-family: Verdana, Geneva, Trebuchet, Arial, Helvetica, sans-serif; } /* 等幅フォント指定 -----------------------------------------*/ .ex_mono{ font-family: "MS ゴシック", "MS Gothic", "Osaka一等幅","Osaka-mono", Verdana, Geneva, Trebuchet, Arial, Helvetica, sans-serif; } /* 強調は太字 -----------------------------------------*/ strong{font-weight:bold;} /* ex_opaity -----------------------------------------*/ .ex_opaity a:link {} .ex_opaity a:visited {} .ex_opaity a:hover {opacity:0.8;} .ex_opaity a:active {opacity:0.8;} /* IE用 ↓*/ .ex_opaity a:hover img {-ms-filter: "alpha( opacity=80 )";} .ex_opaity a:hover img {filter:alpha(opacity=80);} /* clearfix:float解除&親要素に高さを算出させる -----------------------------------------*/ /*.ex-clearfix {overflow:hidden;}DW表示用*/ .ex_clearfix:after { content: "."; /* 新しい要素を作る */ display: block; /* ブロックレベル要素に */ clear: both; height: 0; visibility: hidden; } .ex_clearfix { min-height: 1px; } * html .ex_clearfix { height: 1px; /*\*//*/ height: auto; overflow: hidden; /**/ } /*------------End-------------*/