/** Shopify CDN: Minification failed Line 343:12 Unexpected "{" Line 1321:1 "boder-style" is not a known CSS property Line 1460:1 "boder-style" is not a known CSS property Line 4853:5 Expected identifier but found "*" Line 6187:10 Expected ":" Line 6358:10 Expected ":" Line 6408:10 Expected ":" Line 6500:10 Expected ":" Line 6561:115 Unexpected "{" Line 7048:10 Expected ":" ... and 3 more hidden warnings **/ /* * * Templat BASIC form aishipR * * クラス値命名規則 * h:ヘッダー用 m:メイン用 s:サイドバー用 f:フッター用 p:汎用 * * Table Of Content * * 1-0 ALL Setting * 1-1 Webkit appearance * 1-2 Layout Setting * 2-0 Function Parts * 2-1 Clearfix * 2-2 Holizontal Item Block * 2-3 Vertical Item Block * 2-4 Facebook * 2-5 Button * 2-6 機能パーツ：商品カテゴリ * 2-7 グリッドナビ（スタイル:gridnav） * 2-8 非表示コンテンツ(FB/タグマネージャ等用) * 2-9 トグル機能アニメーション * 2-10 カテゴリ・商品詳細ページ 見出し部下線 * 2-11 機能パーツ：テキスト * 2-12 見出し * 2-13 Bootstrap Buttons UI kit * 2-14 Responsive Grid System * 3-0 Module * 3-1 Header * 3-1-1 サイトロゴ * 3-1-2 カート・マイページボタン * 3-1-3 ドロップダウンメニュー * 3-1-4 カート・ログインボタン * 3-1-5 メインメニュー * 3-1-6 検索フォーム * 3-2 Main-2-1 Main IMAGE * 3 * 3-2-2 Half Banner * 3-2-3 PICK UP Item * 3-2-4 News & SNS * 3-2-5 ShopInformation * 3-2-6 Notice * 3-3 Aside * 3-3-1 Aside Check List * 3-3-2 Aside Login Form & Search Form * 3-3-3 Aside Banner * 3-3-4 Aside Login Form * 3-4 Footer * 3-4-1 Footer Site Map * 3-4-2 Page Top Btn * 3-4-3 CopyRight * 4-0 Page-Content * 4-1 Archive Page * 4-1-1 Free Area * 4-1-2 Pankuzu List * 4-1-3 Category View Mode * 4-1-4 Item PR Setting * 4-1-5 Cart Button * 4-1-6 Archive List Item * 4-1-7 Archive Thumbnail Item * 4-2 Item Page * 4-2-1 Item IMAGE * 4-2-2 Item Name * 4-2-3 Order Area * 4-2-4 Item Page Titile * 4-2-5 Item Explanation * 4-2-6 Item BuyForm * 4-2-7 System Button * 4-2-8 Item Text * 4-2-9 Item Gallary * 4-2-10 Review * 4-3 Free Page * 4-3-1 TOP PAGE * 4-4 Form Page * 4-4-1 Cart Button Reset * 4-4-2 Form Page * 4-4-3 Form Confirm Page * 4-4-4 Item Search Form * 4-5 MyPage * 4-5-1 Mypage Index * 4-5-2 Member Profile Editor * 4-5-3 Special Point * 4-6 News * 10-0 ALL Setting[ For SmartPhone ] * 10-1 Header * 10-1-3 ドロップダウンメニュー * 12-2 Holizontal Item Block * 13-1-5 メインメニュー * 13-2-2 Half Banner * 13-2-4 News & SNS * 13-2-5 ShopInformation * 13-4-1 Footer Site Map * 13-4-2 Page Top Btn * 14-1-2 Category Pankuzu * 14-1-7 Archive Thumbnail Item * 14-2-3 Order Area * 20-0 ALL Setting[ For Tablet ] * 20-1 Header * 20-1-3 ドロップダウンメニュー * 23-3-3 Aside Banner * 23-4-2 Page Top Btn * 30-0 ALL Setting[ For PC ] * 30-1 Header * 30-1-3 ドロップダウンメニュー * 32-9 トグル機能アニメーション * 33-3-1 Aside Check List * 34-4-1 Footer Site Map * 34-4-2 Page Top Btn */ /* 1-0 ALL Setting *----------------------------------------------------------------------*/ /* 1-2 Layout Setting */ /* Responsive Grid system */ .grid-row:after { content: ""; display: table; clear: both; } .grid-row { padding-bottom: 0em; text-align: center; } .grid-row h3 { text-align: left; } /* DEFAULT COLUMN STYLES */ .grid-col { display: block; float: left; margin-left: 2%; } .grid-col:first-child { margin-left: 0; } .grid-col.col-span6:nth-child(2n+1) { margin-left: 0; } .col-span1 { width: 8.33333333333%; } .col-span2 { width: 16.6666666667%; } .col-span3 { width: 25%; } .col-span4 { width: 33.3333333333%; } .col-span5 { width: 41.6666666667%; } .col-span6 { width: 50%; } .col-span7 { width: 58.3333333333%; } .col-span8 { width: 66.6666666667%; } .col-span9 { width: 75%; } .col-span10 { width: 83.3333333333%; } .col-span11 { width: 91.6666666667%; } .col-span12 { width: 100%; } .grid-col.col-span1 { width: 6.5%; } .grid-col.col-span2 { width: 15.0%; } .grid-col.col-span3 { width: 23.5%; } .grid-col.col-span4 { width: 32.0%; } .grid-col.col-span5 { width: 40.5%; } .grid-col.col-span6 { width: 49.0%; } .grid-col.col-span7 { width: 57.5%; } .grid-col.col-span8 { width: 66.0%; } .grid-col.col-span9 { width: 74.5%; } .grid-col.col-span10 { width: 83.0%; } .grid-col.col-span11 { width: 91.5%; } .grid-col.col-span12 { width: 100%; } /* 2-0 Function Parts *----------------------------------------------------------------------*/ /* 2-1 Clearfix */ .p-clearfix:after, .clearfix:after { content: ""; clear: both; display: block; } /* 2-2 Holizontal Item Block */ .sysContent .sysItemBlock .sysHorizontal { letter-spacing: -.4em; text-align: center; } .sysContent .sysItemBlock .sysHorizontal li { width: 25%; float: none; display: inline-block; letter-spacing: normal; margin: 0; text-align: center; vertical-align: top; } /* 2-3 Vertical Item Block */ /* 2-4 Facebook */ .fbcomments, .fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], .fbcomments iframe[style], .fb_iframe_widget span, .widget_facebook_likebox iframe { width: 100%; margin-top: -5px;} /* 2-5 Button */ /* .btn { padding: 10px 20px; display: inline-block; margin-top: 10px; background-color: #aaa; color: #fff; } .btn:hover { color: #fff !important; opacity: 0.7; } .btn-info{ background: #666; color: #fff; } .btn-info:hover{ background: #999;} */ #sysMypageReminder #sysMain input[type=submit], .sysNextSubmit { /* padding: 10px 15px; カートを見るの戻るvoid*/ /* border: none; background: #ffcccc; background: -webkit-gradient(linear, left top, left bottom, from(#dc7068), to(#ffcccc)); background: -webkit-linear-gradient(top, #dc7068, #ffcccc); background: -moz-linear-gradient(top, #dc7068, #ffcccc); background: -ms-linear-gradient(top, #dc7068, #ffcccc); background: -o-linear-gradient(top, #dc7068, #ffcccc); font-weight: bolder; color: #fff; display: block; text-shadow: none; border-radius: 5px; width: 45%; height: 40px; margin: 30px auto 5px !important; */ } /* #sysMypageReminder #sysMain input[type=submit]:hover, .sysBackButton:hover, .sysBackSubmitArea:hover, .sysNextSubmit:hover { opacity: 0.7; } */ /* 2-6 機能パーツ：商品カテゴリ */ .sysFuncItemCategory a { line-height: 1.75; border-bottom: 1px dotted #999; } .sysFuncItemCategory a:hover { background: #eee; } /* 2-7 グリッドナビ（スタイル:gridnav） */ .gridnav ul li:last-child { border-right: 0;} /* 2-8 非表示コンテンツ(FB/タグマネージャ等用) */ .h-code{ display: none;} /* 2-9 トグル機能アニメーション */ .h-subMenu .sysAccordionInitialHide { display: block!Important; position: relative; opacity: 0; z-index: -1; } .h-subMenu .sysAccordionInitialHide.active{ -webkit-transition: all .5s ease-out; transition: all .5s ease-out; opacity: 1; z-index: 999; } /* 2-10 カテゴリ・商品詳細ページ 見出し部下線 */ .sysReview > span { border-bottom: 1px dashed lightgray;} /* 2-11 機能パーツ：テキスト */ #sysMain .sysHeadline { letter-spacing: normal; text-align: center; font-weight: bold; } #sysMain .sysContent h3 { border-bottom: 1px dashed lightgray; margin: 20px 0; } #sysMain .sysContent h3:before { content: "■"; padding-right: 10px; } /* 2-12 見出し */ .headline-1st { font-size: x-large; font-weight: bold; border-bottom: 1px dotted rgb(212,212,212); padding: 5px; } .headline-2nd { font-size: large; font-weight: bold; border-bottom: 1px dotted rgb(212,212,212); padding: 5px; margin-left: 15px; } .headline-3rd { font-size: medium; font-weight: bold; border-bottom: 1px dotted rgb(212,212,212); padding: 5px; margin-left: 30px; } /* 2-13 Bootstrap Buttons UI kit */ /* .btn{text-decoration:none;display:inline-block;margin-bottom:0;font-weight:400;text-align:center;vertical-align:middle;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;font-size:14px;line-height:1.42857143;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn.active:focus,.btn:active:focus,.btn:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn:focus,.btn:hover{color:#333;text-decoration:none}.btn.active,.btn:active{outline:0;background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:not-allowed;pointer-events:none;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none}.btn-default{color:#333;background-color:#fff;border-color:#ccc}.btn-default.active,.btn-default:active,.btn-default:focus,.btn-default:hover,.open .dropdown-toggle.btn-default{color:#333;background-color:#ebebeb;border-color:#adadad}.btn-default.active,.btn-default:active,.open .dropdown-toggle.btn-default{background-image:none}.btn-default.disabled,.btn-default.disabled.active,.btn-default.disabled:active,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled],.btn-default[disabled].active,.btn-default[disabled]:active,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default.active,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover{background-color:#fff;border-color:#ccc}.btn-default .badge{color:#fff;background-color:#333}.btn-primary{color:#fff;background-color:#428bca;border-color:#357ebd}.btn-primary.active,.btn-primary:active,.btn-primary:focus,.btn-primary:hover,.open .dropdown-toggle.btn-primary{color:#fff;background-color:#3276b1;border-color:#285e8e}.btn-primary.active,.btn-primary:active,.open .dropdown-toggle.btn-primary{background-image:none}.btn-primary.disabled,.btn-primary.disabled.active,.btn-primary.disabled:active,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled],.btn-primary[disabled].active,.btn-primary[disabled]:active,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-primary.active,fieldset[disabled] .btn-primary:active,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#428bca;border-color:#357ebd}.btn-primary .badge{color:#428bca;background-color:#fff}.btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.btn-success.active,.btn-success:active,.btn-success:focus,.btn-success:hover,.open .dropdown-toggle.btn-success{color:#fff;background-color:#47a447;border-color:#398439}.btn-success.active,.btn-success:active,.open .dropdown-toggle.btn-success{background-image:none}.btn-success.disabled,.btn-success.disabled.active,.btn-success.disabled:active,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled],.btn-success[disabled].active,.btn-success[disabled]:active,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success,fieldset[disabled] .btn-success.active,fieldset[disabled] .btn-success:active,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover{background-color:#5cb85c;border-color:#4cae4c}.btn-success .badge{color:#5cb85c;background-color:#fff}.btn-info{color:#fff;background-color:#5bc0de;border-color:#46b8da}.btn-info.active,.btn-info:active,.btn-info:focus,.btn-info:hover,.open .dropdown-toggle.btn-info{color:#fff;background-color:#39b3d7;border-color:#269abc}.btn-info.active,.btn-info:active,.open .dropdown-toggle.btn-info{background-image:none}.btn-info.disabled,.btn-info.disabled.active,.btn-info.disabled:active,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled],.btn-info[disabled].active,.btn-info[disabled]:active,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info,fieldset[disabled] .btn-info.active,fieldset[disabled] .btn-info:active,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover{background-color:#5bc0de;border-color:#46b8da}.btn-info .badge{color:#5bc0de;background-color:#fff}.btn-warning{color:#fff;background-color:#f0ad4e;border-color:#eea236}.btn-warning.active,.btn-warning:active,.btn-warning:focus,.btn-warning:hover,.open .dropdown-toggle.btn-warning{color:#fff;background-color:#ed9c28;border-color:#d58512}.btn-warning.active,.btn-warning:active,.open .dropdown-toggle.btn-warning{background-image:none}.btn-warning.disabled,.btn-warning.disabled.active,.btn-warning.disabled:active,.btn-warning.disabled:focus,.btn-warning.disabled:hover,.btn-warning[disabled],.btn-warning[disabled].active,.btn-warning[disabled]:active,.btn-warning[disabled]:focus,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning,fieldset[disabled] .btn-warning.active,fieldset[disabled] .btn-warning:active,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:hover{background-color:#f0ad4e;border-color:#eea236}.btn-warning .badge{color:#f0ad4e;background-color:#fff}.btn-danger{color:#fff;background-color:#d9534f;border-color:#d43f3a}.btn-danger.active,.btn-danger:active,.btn-danger:focus,.btn-danger:hover,.open .dropdown-toggle.btn-danger{color:#fff;background-color:#d2322d;border-color:#ac2925}.btn-danger.active,.btn-danger:active,.open .dropdown-toggle.btn-danger{background-image:none}.btn-danger.disabled,.btn-danger.disabled.active,.btn-danger.disabled:active,.btn-danger.disabled:focus,.btn-danger.disabled:hover,.btn-danger[disabled],.btn-danger[disabled].active,.btn-danger[disabled]:active,.btn-danger[disabled]:focus,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger,fieldset[disabled] .btn-danger.active,fieldset[disabled] .btn-danger:active,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:hover{background-color:#d9534f;border-color:#d43f3a}.btn-danger .badge{color:#d9534f;background-color:#fff}.btn-link{color:#428bca;font-weight:400;cursor:pointer;border-radius:0}.btn-link,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.btn-link,.btn-link:active,.btn-link:focus,.btn-link:hover{border-color:transparent}.btn-link:focus,.btn-link:hover{color:#2a6496;text-decoration:underline;background-color:transparent}.btn-link[disabled]:focus,.btn-link[disabled]:hover,fieldset[disabled] .btn-link:focus,fieldset[disabled] .btn-link:hover{color:#999;text-decoration:none}.btn-group-lg>.btn,.btn-lg{padding:10px 16px;font-size:18px;line-height:1.33;border-radius:6px}.btn-group-sm>.btn,.btn-sm{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.btn-group-xs>.btn,.btn-xs{padding:1px 5px;font-size:12px;line-height:1.5;border-radius:3px}.btn-block{display:block;width:100%;padding-left:0;padding-right:0}.btn-block+.btn-block{margin-top:5px} */ /* 2-14 Responsive Grid System */ /* 12 COLUMN : RESPONSIVE GRID SYSTEM DEVELOPER : DENIS LEBLANC URL : http://responsive.gs VERSION : 3.0 LICENSE : GPL & MIT */ .row:after, .col:after, { content: ""; display: table; clear: both; } .row { padding-bottom: 0em;} /* DEFAULT COLUMN STYLES */ .col { display: block; float: left; } .span_1 { width: 8.33333333333%; } .span_2 { width: 16.6666666667%; } .span_3 { width: 25%; } .span_4 { width: 33.3333333333%; } .span_5 { width: 41.6666666667%; } .span_6 { width: 50%; } .span_7 { width: 58.3333333333%; } .span_8 { width: 66.6666666667%; } .span_9 { width: 75%; } .span_10 { width: 83.3333333333%; } .span_11 { width: 91.6666666667%; } .span_12 { width: 100%; } .gutters .col { margin-left: 2%;} .gutters .col:first-child { margin-left: 0; } .gutters .span_1 { width: 6.5%; } .gutters .span_2 { width: 15.0%; } .gutters .span_3 { width: 23.5%; } .gutters .span_4 { width: 32.0%; } .gutters .span_5 { width: 40.5%; } .gutters .span_6 { width: 49.0%; } .gutters .span_7 { width: 57.5%; } .gutters .span_8 { width: 66.0%; } .gutters .span_9 { width: 74.5%; } .gutters .span_10 { width: 83.0%; } .gutters .span_11 { width: 91.5%; } .gutters .span_12 { width: 100%; } /* 3-0 Module *----------------------------------------------------------------------*/ /* 3-1 Header*/ .h-siteinfo{ height: 40px; background-color: #fff; } .h-siteinfo h1 { color: #000;} /* 3-1-1 サイトロゴ */ .h-sitelogo { margin: 0 auto; background: #fff; padding-bottom: 5px; padding-left: 5px; } .h-sitelogo .sysContent { width: 200px; max-width: 50%; } /* 3-1-2 カート・マイページボタン */ .h-utilitybtn { margin: 20px auto; } .h-utilitybtn .sysContent{ width: 30%; float: right; position: relative; bottom: 40px; height: 40px; } /* 3-1-3 ドロップダウンメニュー */ .h-subMenu { position: relative; } .h-subMenu .sysAccordionInitialHide { position: absolute; background: rgb(0,0,0); background: rgba(0,0,0,0.5); right: 0; padding: 9px 10px; width: 100%; } .h-subMenu ul li { margin: 10px auto;} .h-subMenu .sysHeadline{ color: #e5e5e5; line-height: 60px; text-align: center; background: #666; } .h-subMenu .sysAccordion:after{ content:""; } /* 3-1-4 カート・ログインボタン */ .h-utilitybtn ul li{ margin-right: 2%; width: 48%!important; height: 40px; line-height: 40px; margin-bottom: 0; } .h-utilitybtn ul li.sysText a { border: 1px solid rgb(212,212,212); line-height: 36px; height: 36px; font-size: small; margin-top: 1px; } .h-utilitybtn ul li.sysText a:hover { background: rgb(212,212,212); } .h-utilitybtn ul li.sysText a:before { content: ""; width: 15px; height: 15px; display: inline-block; vertical-align: middle; margin-right: 5px; } .h-utilitybtn ul li.sysText:nth-child(1) a:before { background: url(http://template-advance.aispr.jp/img/icon/icon-mypage.png); background-size: 100%; } .h-utilitybtn ul li.sysText:nth-child(2) a:before { background: url(http://template-advance.aispr.jp/img/icon/icon-cart.png); background-size: 100%; } /* 3-1-5 メインメニュー*/ .h-mainMenu{ margin: 0 auto; background: #999;} .h-mainMenu ul li:last-child a { border: 0; } .h-mainMenu ul { display: table; width: 100%; } .h-mainMenu ul li { display: table-cell; float: none; height: 50px; border-right: 1px solid; } .h-mainMenu ul li.sysText a { line-height: 1; border: none; white-space: normal; padding: 20px 0; margin: 0 auto; } .h-mainMenu .sysContent { margin: 0 auto; background: #fff; } /* 3-1-6 検索フォーム */ /* .h-search{ margin: 0 auto; position: relative; padding: 0 5px 0 ; } .h-search .sysItemSearchForm { display: table; width: 100%; } .h-search .sysItemSearchFormWord { display: table-cell; padding-right: 10px; width: 100%; vertical-align: top; } .h-search .sysItemSearchFormWord input{ height: 40px; border: 1px solid #c9c9c9; padding: 5px; vertical-align: bottom; } .h-search .sysSearchButton { width: 100px; padding: 6px; height: 40px; border: 1px solid #999; border-radius: 3px; margin: 0 auto; background-color: #999; } */ /* 3-1-7 Main Image */ .p-topimg{ background-color: #ddd; } .p-topimg .sysContent{ margin: 0 auto; padding: 5px; } /* 3-2 Main*/ /* 3-2-1 */ /* 3-2-2 Half Banner */ .p-banner ul { text-align: center; clear: both; margin: 10px auto; } .p-banner li { width: 49%; display: inline-block; } /* 3-2-3 PICK UP Item */ .p-pickup .sysContent { padding: 5px 0; } .p-pickup .sysContent .sysHorizontal li { padding: 0 2.5px; } /* 3-2-4 News & SNS */ .p-news .sysContent { line-height: 1.5;} .p-news li { padding-left: 10px;} /* 3-2-5 ShopInformation */ .p-shopInfo .sysContent{ text-align :center;} .shopinfo-inner { display: inline-block; width: 48%; width: -webkit-calc(50% - 10px); width: calc(50% - 10px); margin: 5px; padding-bottom: 10px; line-height: 1.5; overflow: hidden; vertical-align: top; text-align: left; } .shopinfo-inner h3 { font-size: 150%; border-bottom: 1px dotted #666; padding: 0 0 5px 0px; margin-bottom: 10px; } .shopinfo-inner .btn{ float: right; margin-right: 20px; } /* 3-2-6 Notice */ .p-notice .sysHeadline { background: #e60054; border-color: #e60054; text-align: center; font-weight: bold; } /* 3-3 Aside*/ /* 3-3-1 Aside Check List */ .s-checklist li { margin: 5px auto; padding-bottom: 10px; border-bottom: 1px dotted; } /* 3-3-2 Aside Login Form & Search Form */ .s-login { line-height: 1.75; } .s-login ul { text-align: center; } .s-login li { display: inline-block; width: 46%; line-height: 1.5; vertical-align: top; background: #666; } .s-login li a { color: #fff; text-decoration: none; padding: 10px; display: block; } .s-login input { width: 95%; margin: 5px auto; line-height: 2; display: block; } .s-login .sysLoginButton { border: none; padding: 5px; background: #666; color: #fff; margin: 10px auto; border-radius: 0; } .s-login a { text-decoration: none; display: inline-block; background: #666; text-align: center; padding: 5px 15px; margin: 5px; color: #fff; border-radius: 3px; } /* 3-3-3 Aside Banner */ .s-banner { margin-bottom: 10px;} .s-banner li { margin: 5px auto;} /* 3-3-4 Aside Login Form */ .s-search{ line-height: 1.75;} .s-search ul{ text-align: center;} .s-search input[type=search]{ width: 95%!important; margin: 5px auto; line-height: 2.5; display: block; } .s-search .sysItemSearchAndOr, .s-search .sysItemSearchFormCategory { text-align: center; } .sysSearchButton { border: none; padding: 10px; background: #666; color: #fff; width: 95%; display: block; margin: 10px auto; } /* 3-4 Footer*/ /* 3-4-1 Footer Site Map */ .f-sitemap ul li.sysText a { color: #fff; padding: 0; background: #666; display: block; border: 1px solid #ddd; text-align: center; } .f-sitemap ul li.sysText a:hover { background: #999; } /* 3-4-2 Page Top Btn */ .p-pagetop .btn { text-decoration: none; margin: 0 auto; display: block; text-align: center; padding: 20px; } /* 3-4-3 CopyRight */ .f-copyright { margin: 0 auto; text-align: center; padding: 20px 0; } .f-copyright .sysContent{ border-top: 1px solid #666; } /* 4-0 Page-Content *----------------------------------------------------------------------*/ /* 4-1 Archive Page */ /* 4-1-1 Free Area */ /* 4-1-2 Pankuzu List*/ .sysCategoryPankuzu, .sysItemCategoryPankuzu { font-size: 0.7em; margin-bottom: 5px; /* white-space: nowrap;*/ overflow: hidden; background: #fff; color: #666; padding: 10px 5px 5px 5px; /* line-height: 0.8em;*/ letter-spacing: 0.01em; text-align: left; } .sysCategoryPankuzu span { display: none; /* line-height: 1.5em;*/ } .sysCategoryPankuzu a, .sysItemCategoryPankuzu a { display: inline-block; background: #fff; padding: 0; color: #666; text-decoration: none; } .sysCategoryPankuzu a:hover, .sysItemCategoryPankuzu a:hover { background: #999; } /* 4-1-3 Category View Mode */ .sysItemCategoryCtl { font-size: small; } .sysItemCategoryCtl a { display: inline-block; padding: 2px 4px; background: #eee; border: none; border-radius: 3px; text-decoration: none; font-size: .8rem; margin: 2px 0; } /* 4-1-4 Item PR Setting */ .sysItemPr { font-size: small; padding: 0 5px; background: #fff; border: 1px solid #666; border-radius: 3px; display: inline-block; font-weight: bold; } /* 4-1-5 Cart Button */ .sysCartButton { border: none; padding: 10px; margin: 5px 0; border-radius: 5px; background-color: #aaa; color: #fff; cursor: pointer; } .sysCartButton:hover { background: #999; } .sysCartTitle { border-bottom: 2px solid #666; background-color: #fff; color: #666; font-weight: bold; padding: 5px 10px; margin: 15px 0; } /* 4-1-6 Archive List Item */ .sysItemList ul.sysList li .sysThumbnailImage { width: 40%; max-width: 200px; } /* 4-1-7 Archive Thumbnail Item */ .sysItemList ul.sysThumbnail li { display: inline-block; float: none; vertical-align: top; letter-spacing: normal; } .sysItemList ul.sysThumbnail li .sysAddVariation { font-size: 90%; padding-top: 10px; } .sysItemList ul.sysThumbnail li .sysAddVariation select { font-size: 90%; } .sysItemList ul.sysThumbnail { letter-spacing: -.4em; } .sysItemList ul.sysThumbnail input { width: 100%; padding: 0; font-weight: bold !important; margin-top: 1rem; } /* 4-1-8 Deliveries Table */ ul.SysDeliveriesTable { border-style: solid; border-width: 0px; list-style: none; display: table; margin: 0; padding: 0; } ul.SysDeliveriesTable > li { display: table-row; } ul.SysDeliveriesTable > li > div { border-style: solid; border-width: 1px; display: table-cell; padding:10px; } /* 4-2 Item Page */ /* 4-2-1 Item IMAGE */ .sysThumbnailImage > span,.sysThumbnailImage > br { display: none;} /* 追加S_0018 */ .img_area { width: 48%; padding-top: 1rem; display: inline-block; } .img_area .sysMainImage { margin-bottom: 1%; } .sysItemImages .sysImageList li { float: left; width: 32%; height: auto; margin: 1%; line-height: 0; } .sysItemImages .sysImageList li:nth-child(3n+1) { margin-left: 0; } .sysItemImages .sysImageList li:nth-child(3n) { margin-right: 0; } .sysItemImages .sysImageList li.sysCurrent img{ border: 1px solid gray; } .item_info { display: inline-block; width: 48%; margin-left: 3%; vertical-align: top; } .sysItemId, .sysItemId * { font-size: 12px; margin: 15px 0; } .sysRetailPrice, #sysItemDetail #sysMain .sysItemName { border: none; margin-bottom: 1rem; } .item_info .sysItemName span { font-weight: bold; } .item_info .sysDescription p { color: #888; margin-bottom: 1rem; } .item_info .sysRetailPrice * { color: #b22222; font-weight: bold; font-size: 16px; } .item_info #sysVariation { color: #888; } .item_info #sysVariation, .item_info #sysVariation * { font-size: 12px; } .item_info #sysNumber { padding-top: 10px; font-size: 13px; } /* 追加E_0018 */ /* 削除S_0018 */ /* .sysItemImages .sysImageList li{ display: inline-block; vertical-align: top; height: auto; width: 32%; line-height: 1; float: none; margin: 1% 0; } */ /* 削除E_0018 */ /* 4-2-2 Item Name */ .sysItemName h1 { /*font-size: x-large;削除*/ font-size: 1.3em;/*追加*/} /* 4-2-3 Order Area */ .orderArea { letter-spacing: -.4em; text-align: center; } .orderArea > div { width: 50%; display: inline-block; letter-spacing: normal; text-align: left; vertical-align: top; padding-right: 20px; } .orderArea > .orderArea > div { width: 100%; display: block; } /* 4-2-4 Item Page Titile */ .sysItemName, .sysExplanation > div > span, .sysReview > span{ display: block; margin-bottom: 10px; } .sysItemName,/*追加 topの商品名*/ .sysItemName a{ font-size: 12.5px; text-decoration:none; overflow : hidden; text-overflow: ellipsis; display: -webkit-box;/*追加 スマホで商品名が短くなる*/ -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-height: 1.6em; } .sysItemPrice { font-size: 0.9em;/*追加 topの商品価格*/ color:#900; font-weight:bold; } /* 4-2-5 Item Explanation */ #sysExplanation span { padding-top: 30px; } /* 20160610 追加 600片寄り対策 */ #sysExplanation table, #sysExplanation p, #sysExplanation div { max-width: 800px; margin: 0 auto; text-align:left; } #sysExplanation img, #sysExplanation iframe { display:block; margin: 0 auto; } .sysExplanation table, .sysExplanation th, .sysExplanation td { text-align: center; line-height: 2; } .sysExplanation thead { text-align: center; color: #fff; background: #999; } .sysExplanation td { padding-left: 10px; } .sysExplanation td, .sysExplanation td b { font-size: small; text-align: left; } .sysExplanation td[bgcolor="#eeeeee"] { background-color: #eee; } .sysExplanation td[bgcolor="#ffffff"] { background-color: #fff; } /* 4-2-6 Item BuyForm */ #sysItemDetail .sysRetailPrice { font-weight: bold;} #sysItemDetail .sysPr { text-align: center;} #sysItemDetail .sysPr > span { display: inline-block;} #sysItemDetail #sysVariation { overflow: hidden; margin: 5px auto; } #sysItemDetail #sysVariation >div { margin: 10px auto; overflow: hidden; } #sysItemDetail .sysForm select { max-width: 140px; min-width: 50px; display: inline-block; } /* 削除S_0018 */ /* #sysItemDetail .sysNumArea button { display: inline-block; width: 48%; background: #666; padding: 10px; border: 1px solid #999; border-radius: 5px; color: #fff; } #sysItemDetail .sysNumArea { padding-top: 5px; clear: both; text-align: right; } */ /* 削除S_0018 */ /* 追加S_0018 */ #sysItemDetail .sysNumArea { display:none; } #sysItemDetail .sysFormVariationTable { border: 1px solid #cccccc; margin: 0 0 5px; width: 100%; font-size: 90%; } #sysItemDetail input[type="radio"] { -webkit-transform: scale(0.7); transform: scale(0.7); margin: 5px; } #sysItemDetail .sysFormVariationName { background-color: #eee; border: 1px solid #cccccc; font-weight: normal; } #sysItemDetail .sysFormVariation, #sysItemDetail .sysFormVariationName { padding: 5px; } #sysSubmit{ margin:20px; } #sysSubmit input { height: 0; padding-top: 12%; /* background: url("http://bathlier.sakura.ne.jp/bathlier/aishipr/img/materials/inp_cart.gif") 0 0 no-repeat;*/ background: none; background-size: contain; border-radius: 0; } #sysSubmit input:hover { cursor:pointer; height: 0; padding-top: 12%; /* background: url("http://bathlier.sakura.ne.jp/bathlier/aishipr/img/materials/inp_cart_hv.gif") 0 0 no-repeat;*/ background: none; background-size: contain; border-radius: 0; } #sysSubmit input[value="今は購入できません"] { height: 0; padding-top: 12%; /* background: url("http://bathlier.sakura.ne.jp/bathlier/aishipr/img/materials/out_term.gif") 0 0 no-repeat;*/ background: none; background-size: contain; border-radius: 0; } #sysSubmit input[value="今は購入できません"]:hover { cursor:pointer; height: 0; padding-top: 12%; /* background: url("http://bathlier.sakura.ne.jp/bathlier/aishipr/img/materials/out_term_hv.gif") 0 0 no-repeat;*/ background: none; background-size: contain; border-radius: 0; } /* 追加E_0018 */ #sysWishlist .sysButton, #sysItemDetail .sysCartButton { width: 98%; margin-left: 2%; } #sysItemDetail .sysShare { max-width: 760px; margin: 0 auto; padding: 0 0 30px 5px; } #sysCartInForm { width: 100%;} #sysAside .sysShare { max-width: 600px; } #sysAside .sysShare .sysFacebook .fb_iframe_widget, #sysAside .sysShare .sysFacebook .fb_iframe_widget iframe[style], #sysMain .sysShare .sysFacebook .fb_iframe_widget, #sysMain .sysShare .sysFacebook .fb_iframe_widget iframe[style] { margin-top: -8px; margin-left: 2px; } #sysMain .sysShare { margin-top: 6rem; text-align: center; } /* 4-2-7 System Button */ .sysLoginButton, .sysButton { border: none; padding: 5px; /* マイページログイン後ボタン */ margin: 5px 0; border-radius: 5px; background-color: #aaa; color: #fff; cursor: pointer; } .sysLoginButton:hover, .sysButton:hover { opacity: 0.7; } .sysLoginButton{ display: block; width: 50%; margin: 10px auto; padding: 20px; } /* 4-2-8 Item Text */ #sysDescription *,.sysDescription,.sysImageDescription{ font-size: 12px;} /* 4-2-9 Item Gallary */ .sysImageListSimple li { margin-bottom: 10px;} /* 4-2-10 Review */ .sysReview input{ background: #666; color: #fff; text-shadow: none; border: 1px solid #999; border-radius: 3px; display: block; padding: 10px; margin: 5px auto; width: 50%; } .sysReview > br { display: none; } .sysReviewHistoryList { padding: 0 10px; border: 1px solid lightgray; } .sysReviewHistoryList li { margin-bottom: 5px; border-bottom: 1px dashed lightgray; padding: 5px 0; } .sysReviewHistoryList li:last-child { border: none;} .sysNickname, .sysEvaluation { display: inline-block; padding: 0 10px 0 0; color: #ffd200; } .sysNickname { font-size: 1.3em; font-weight: bold; color: #959595; margin-bottom: 5px; } .sysReviewDatetime { font-size: small; text-align: right; padding-right: 20px; } .sysReviewText { font-size: small;} /* 4-3 Free Page */ /* 4-3-1 TOP PAGE */ /* 4-4 Form Page */ /* 4-4-1 Cart Button Reset */ .sysCart #sysMain input[type=submit], .sysCart #sysMain button[type=submit], .sysCart #sysMain button { background: #fff; color: #444; text-shadow: none; border: 2px #444 solid; padding: 5px 15px; } .sysCartInDone{ margin: 0;} .sysCart #sysMain .sysNextSubmitArea .sysNextSubmit { border: none; background: #ffcccc; background: -webkit-gradient(linear, left top, left bottom, from(#dc7068), to(#ffcccc)); background: -webkit-linear-gradient(top, #dc7068, #ffcccc); background: -moz-linear-gradient(top, #dc7068, #ffcccc); background: -ms-linear-gradient(top, #dc7068, #ffcccc); background: -o-linear-gradient(top, #dc7068, #ffcccc); color: #fff; text-shadow: none; width: auto; font-size: 1.15em; } .sysCart #sysMain .sysNextSubmitArea .sysNextSubmit { height: 45px; } /* 追加S_0018 */ #login_sp, #cart_sp { display: none; } #page_top_ai { padding: 0; position: fixed; bottom: 3%; right: 3%; } #page_top_ai a { width: 50px; display: block; } #page_top_ai span { width: 50px; height: 50px; display: block; margin-bottom: 0px; /* background: url(http://bathlier.sakura.ne.jp/bathlier/aishipr/img/materials/to_top.gif) no-repeat;*/ background: none; } #page_top_ai span:hover { /* background: url(http://bathlier.sakura.ne.jp/bathlier/aishipr/img/materials/to_top_hv.gif) no-repeat;*/ background: none; cursor:pointer; } /* 追加E_0018 */ /* 4-4-2 Form Page */ #sysMemberRegisterRegister #sysMain h2, #sysMemberRegisterConfirm #sysMain h2, #sysMemberRegisterIndex #sysMain h2, #sysFormThanks #sysMain h2, #sysFormConfirm #sysMain h2, #sysFormIndex #sysMain h2, #sysItemSearch #sysMain h2 { border-bottom: 2px solid #666; background-color: #fff; color: #666; font-size: 120%; font-weight: bold; padding: 3px 10px; margin: 15px 0; } #sysMemberRegisterRegister #sysMain, #sysMemberRegisterConfirm #sysMain, #sysMemberRegisterIndex #sysMain, #sysFormThanks #sysMain, #sysFormConfirm #sysMain, #sysFormIndex #sysMain { /* border-color: #999; border-style: solid; border-radius: 0px; border-width: 1px; box-shadow: 1px 1px 1px gray; margin-bottom: 10px;*/ padding: 0; boder-style: none; } #sysMemberRegisterConfirm #sysMain > form, #sysMemberRegisterIndex #sysMain > form, #sysFormConfirm #sysMain > form, #sysFormIndex #sysMain > form { padding: 10px;} #sysMypageReminder #sysMain input, #sysMemberRegisterIndex #sysMain input, #sysMypageLogin #sysMain input, #sysFormIndex #sysMain input, .sysCart #sysMain input[type=text], .sysCart #sysMain input[type=password], .sysCart #sysMain input[type=email], .sysCart #sysMain input[type=number], .sysCart #sysMain input[type=tel], .sysCart #sysMain input[type=search], .sysCart #sysMain textarea { line-height: 15px; padding: 5px; margin: 5px auto; } #sysMypageReminder #sysMain input[type=submit], #sysMemberRegisterIndex #sysMain input[type=submit], #sysMypageLogin #sysMain input[type=submit], #sysMypageLogin #sysMain input[type=button], #sysFormIndex #sysMain input[type=submit] { padding: 10px 20px; } #sysMain input.sysButton { padding: 10px 20px; /* 退会するしない */ margin: 20px auto 5px; } #sysMain input.sysLoginButton { border: none; background: #ffcccc; background: -webkit-gradient(linear, left top, left bottom, from(#dc7068), to(#ffcccc)); background: -webkit-linear-gradient(top, #dc7068, #ffcccc); background: -moz-linear-gradient(top, #dc7068, #ffcccc); background: -ms-linear-gradient(top, #dc7068, #ffcccc); background: -o-linear-gradient(top, #dc7068, #ffcccc); color: #fff; text-shadow: none; font-weight: bolder; display: block; padding: 10px 15px !important; border-radius: 5px; width: 45%; height: 40px; margin: 30px auto !important; } #sysMain input.sysLoginButton:hover { opacity: 0.7; } #sysMain input[type="email"], #sysMain input[type="number"], #sysMain input[type="password"], #sysMain input[type="tel"], #sysMain input[type="url"], #sysMain input[type="text"], #sysMain textarea { width: 100%; background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#FFFFFF)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFEFEFEF', endColorstr='#FFFFFFFF'); border-radius: 5px 5px 5px 5px; border: #999999 1px solid; line-height: 3; padding-left: 5px; } #sysMain textarea { min-height: 75px;} .sysZipcode button, .sysZipcode .sysFormField { display: inline-block;} .sysZipcode .sysFormLabel { display: block;} .sysZipcode .sysFormField { width: 200px;} .sysZipcode br{ display: none;} .sysBirthday input { width: auto!important;} /* 追加S_0018 */ .sysMemberAgreement { margin: 10px; } .sysName { margin-top: 10px; } .sys1 { margin: 10px 0 10px; } .sys3 { margin-bottom: 20px; } .sysFormItem { padding-top: 10px; } /* 追加E_0018 */ /* 4-4-3 Form Confirm Page */ #sysMypageEditConfirm #sysMain .sysFormField, #sysMemberRegisterConfirm #sysMain .sysFormField, #sysFormConfirm #sysMain .sysFormField { border: 1px solid #999; line-height: 2; padding-left: 10px; font-size: small; border-radius: 3px; margin: 5px auto; min-height: 20px; } /* 4-4-4 Item Search Form */ /* .sysItemSearchForm > div { margin: 10px auto; width: 90%; text-align: left; } form.sysItemSearchForm { text-align: center; } .sysItemSearchForm > div.sysItemSearchFormWord { width: 95%; } */ /* 4-5 MyPage */ /* 4-5-1 Mypage Index */ .sysMypage #sysMain{ /* border-color: #999; border-style: solid; border-radius: 0px; border-width: 1px; box-shadow: 1px 1px 1px gray; margin-bottom: 10px;*/ padding: 0; boder-style: none; } .sysMypage #sysMain h2{ border-bottom: 2px solid #666; background-color: #fff; color: #666; font-size: 120%; font-weight: bold; padding: 3px 10px; margin: 15px 0; } .sysMypage #sysMain > form, .sysMypage #sysMain > div { padding: 5px 10px;} .sysMypageMinorHeadLine { display: none; } #sysMypageEditDeliveryinput #sysMain div.sysOtherAddress { margin-bottom: 10px; } /* 購入履歴 */ .sysOrderList { border: 1px solid rgb(212,212,212); padding: 10px; max-height: 400px; overflow-y: scroll; } .sysOrderList li { border-bottom: 1px dotted rgb(212,212,212); margin-bottom: 5px; padding-bottom: 5px; } /* マイページボタン */ .sysMypageNav > form { display: inline-block; width: 49%; vertical-align: top; } .sysMypageNav .sysButton { width: 80%; display: block; line-height: 20px; font-size: 1rem; } /* 4-5-2 Member Profile Editor */ #sysMypageEditDelivery #sysMain > form, #sysMypageEditMember #sysMain > form{ padding: 10px;} #sysMypageEditDelivery #sysMain input, #sysMypageEditMember #sysMain input { line-height: 15px; padding: 10px 5px; margin: 5px auto; } #sysMypageEditDelivery #sysMain .sysButton, #sysMypageEditMember #sysMain .sysButton, .sysBackSubmitArea, .sysBackButton { padding: 10px 15px !important; min-width: initial !important; border-radius: 5px; } #sysMypageEditConfirm #sysMain > form { padding: 10px;} /* 4-5-3 Special Point */ .sysSpecialPoint { overflow: hidden; letter-spacing: -.4em; } .sysSpecialPoint > div:nth-child(2n) { width: 60%; } .sysSpecialPoint > div { display: inline-block; letter-spacing: normal; padding: 5px 10px; border-bottom: 1px solid #d5d5d5; } .sysSpecialPoint > div:nth-child(2n+1) { width: 40%; } /* 4-5-4 Coupon List */ .sysCoupon { border: 1px solid #d5d5d5; margin: 10px; } /* 4-6 News Page */ .news-row { border-color: #999; border-style: solid; border-radius: 0px; border-width: 1px; box-shadow: 1px 1px 1px gray; margin-bottom: 10px; } .news-row > h1 { border-bottom: 1px solid #999; background-color: #999; color: #ffffff; font-size: large; padding: 5px; background: -webkit-gradient(linear, left top, left bottom, from(), to()); background: -webkit-linear-gradient(top, , ); } .sysNewsDetail { padding: 10px 20px;} /* マイページ（複数配送先編集画面）*/ .sysSelectAddress a { display: block; text-decoration: none; border: 1px solid; padding: 10px; } .sysSelectAddress { margin: 10px 0; } .sysSelectAddress a:hover { background: #eee; } /* マップ用イメージサイズを可変に--20150609追加 */ img[usemap] { border: none; height: auto; max-width: 100%; width: auto; } /*スライダーs*/ /*! * - v1.2.5 * Homepage: http://bqworks.com/slider-pro/ * Author: bqworks * Author URL: http://bqworks.com/ */ /* Core --------------------------------------------------*/ .slider-pro { position: relative; margin: 0 auto; -moz-box-sizing: content-box; box-sizing: content-box; } .sp-slides-container { position: relative; } .sp-mask { position: relative; overflow: hidden; } .sp-slides { position: relative; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } .sp-slide { position: absolute; } .sp-image-container { overflow: hidden; } .sp-image { position: relative; display: block; border: none; } .sp-no-js { overflow: hidden; max-width: 100%; } /* Thumbnails --------------------------------------------------*/ .sp-thumbnails-container { position: relative; overflow: hidden; } .sp-top-thumbnails, .sp-bottom-thumbnails { left: 0; margin: 0 auto; } .sp-top-thumbnails { position: absolute; top: 0; margin-bottom: 4px; } .sp-bottom-thumbnails { margin-top: 4px; } .sp-left-thumbnails, .sp-right-thumbnails { position: absolute; top: 0; } .sp-right-thumbnails { right: 0; margin-left: 4px; } .sp-left-thumbnails { left: 0; margin-right: 4px; } .sp-thumbnails { position: relative; } .sp-thumbnail { border: none; } .sp-thumbnail-container { position: relative; display: block; overflow: hidden; float: left; -moz-box-sizing: border-box; box-sizing: border-box; } /* Horizontal thumbnails ------------------------*/ .sp-top-thumbnails .sp-thumbnail-container, .sp-bottom-thumbnails .sp-thumbnail-container { margin-left: 2px; margin-right: 2px; } .sp-top-thumbnails .sp-thumbnail-container:first-child, .sp-bottom-thumbnails .sp-thumbnail-container:first-child { margin-left: 0; } .sp-top-thumbnails .sp-thumbnail-container:last-child, .sp-bottom-thumbnails .sp-thumbnail-container:last-child { margin-right: 0; } /* Vertical thumbnails ----------------------*/ .sp-left-thumbnails .sp-thumbnail-container, .sp-right-thumbnails .sp-thumbnail-container { margin-top: 2px; margin-bottom: 2px; } .sp-left-thumbnails .sp-thumbnail-container:first-child, .sp-right-thumbnails .sp-thumbnail-container:first-child { margin-top: 0; } .sp-left-thumbnails .sp-thumbnail-container:last-child, .sp-right-thumbnails .sp-thumbnail-container:last-child { margin-bottom: 0; } /* Right thumbnails with pointer --------------------------------*/ .sp-right-thumbnails.sp-has-pointer { margin-left: -13px; } .sp-right-thumbnails.sp-has-pointer .sp-thumbnail { position: absolute; left: 18px; margin-left: 0 !important; } .sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:before { content: ''; position: absolute; height: 100%; border-left: 5px solid #F00; left: 0; top: 0; margin-left: 13px; } .sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:after { content: ''; position: absolute; width: 0; height: 0; left: 0; top: 50%; margin-top: -8px; border-right: 13px solid #F00; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } /* Left thumbnails with pointer -------------------------------*/ .sp-left-thumbnails.sp-has-pointer { margin-right: -13px; } .sp-left-thumbnails.sp-has-pointer .sp-thumbnail { position: absolute; right: 18px; } .sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:before { content: ''; position: absolute; height: 100%; border-left: 5px solid #F00; right: 0; top: 0; margin-right: 13px; } .sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:after { content: ''; position: absolute; width: 0; height: 0; right: 0; top: 50%; margin-top: -8px; border-left: 13px solid #F00; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } /* Bottom thumbnails with pointer ---------------------------------*/ .sp-bottom-thumbnails.sp-has-pointer { margin-top: -13px; } .sp-bottom-thumbnails.sp-has-pointer .sp-thumbnail { position: absolute; top: 18px; margin-top: 0 !important; } .sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:before { content: ''; position: absolute; width: 100%; border-bottom: 5px solid #F00; top: 0; margin-top: 13px; } .sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:after { content: ''; position: absolute; width: 0; height: 0; left: 50%; top: 0; margin-left: -8px; border-bottom: 13px solid #F00; border-left: 8px solid transparent; border-right: 8px solid transparent; } /* Top thumbnails with pointer ------------------------------*/ .sp-top-thumbnails.sp-has-pointer { margin-bottom: -13px; } .sp-top-thumbnails.sp-has-pointer .sp-thumbnail { position: absolute; bottom: 18px; } .sp-top-thumbnails.sp-has-pointer .sp-selected-thumbnail:before { content: ''; position: absolute; width: 100%; border-bottom: 5px solid #F00; bottom: 0; margin-bottom: 13px; } .sp-top-thumbnails.sp-has-pointer .sp-selected-thumbnail:after { content: ''; position: absolute; width: 0; height: 0; left: 50%; bottom: 0; margin-left: -8px; border-top: 13px solid #F00; border-left: 8px solid transparent; border-right: 8px solid transparent; } /* Layers --------------------------------------------------*/ .sp-layer { position: absolute; margin: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-font-smoothing: subpixel-antialiased; -webkit-backface-visibility: hidden; } .sp-black { color: #FFF; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); } .sp-white { color: #000; background: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.7); } .sp-rounded { border-radius: 10px; } .sp-padding { padding: 10px; } /* Touch Swipe --------------------------------------------------*/ .sp-grab { cursor: url(images/openhand.cur), move; } .sp-grabbing { cursor: url(images/closedhand.cur), move; } .sp-selectable { cursor: default; } /* Caption --------------------------------------------------*/ .sp-caption-container { text-align: center; margin-top: 10px; } /* Full Screen --------------------------------------------------*/ .sp-full-screen { margin: 0 !important; background-color: #000; } .sp-full-screen-button { position: absolute; top: 5px; right: 10px; font-size: 30px; line-height: 1; cursor: pointer; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .sp-full-screen-button:before { content: '\2195'; } .sp-fade-full-screen { opacity: 0; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .slider-pro:hover .sp-fade-full-screen { opacity: 1; } /* Buttons --------------------------------------------------*/ .sp-buttons { position: relative; width: 100%; text-align: center; padding-top: 10px; } .sp-button { width: 10px; height: 10px; border: 2px solid #000; border-radius: 50%; margin: 4px; display: inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; } .sp-selected-button { background-color: #000; } @media only screen and (min-width: 781px) { .sp-button { width: 14px; height: 14px; } } @media only screen and (min-width: 481px) and (max-width: 780px) { .sp-button { width: 16px; height: 16px; } } @media only screen and (max-width: 780px) { .sp-button { width: 18px; height: 18px; } } /* Arrows --------------------------------------------------*/ .sp-arrows { position: absolute; } .sp-fade-arrows { opacity: 0; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .sp-slides-container:hover .sp-fade-arrows { opacity: 1; } .sp-horizontal .sp-arrows { width: 100%; left: 0; top: 50%; margin-top: -15px; } .sp-vertical .sp-arrows { height: 100%; left: 50%; top: 0; margin-left: -10px; } .sp-arrow { position: absolute; display: block; width: 20px; height: 30px; cursor: pointer; } .sp-vertical .sp-arrow { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .sp-horizontal .sp-previous-arrow { left: 20px; } .sp-horizontal .sp-next-arrow { right: 20px; } .sp-vertical .sp-previous-arrow { top: 20px; } .sp-vertical .sp-next-arrow { bottom: 20px; } .sp-previous-arrow:before, .sp-previous-arrow:after, .sp-next-arrow:before, .sp-next-arrow:after { content: ''; position: absolute; width: 50%; height: 50%; background-color: #FFF; } .sp-previous-arrow:before { left: 30%; top: 0; -webkit-transform: skew(145deg, 0deg); -ms-transform: skew(145deg, 0deg); transform: skew(145deg, 0deg); } .sp-previous-arrow:after { left: 30%; top: 50%; -webkit-transform: skew(-145deg, 0deg); -ms-transform: skew(-145deg, 0deg); transform: skew(-145deg, 0deg); } .sp-next-arrow:before { right: 30%; top: 0; -webkit-transform: skew(35deg, 0deg); -ms-transform: skew(35deg, 0deg); transform: skew(35deg, 0deg); } .sp-next-arrow:after { right: 30%; top: 50%; -webkit-transform: skew(-35deg, 0deg); -ms-transform: skew(-35deg, 0deg); transform: skew(-35deg, 0deg); } .ie8 .sp-arrow, .ie7 .sp-arrow { width: 0; height: 0; } .ie8 .sp-arrow:before, .ie8 .sp-arrow:after, .ie7 .sp-arrow:before, .ie7 .sp-arrow:after { content: none; } .ie8.sp-horizontal .sp-previous-arrow, .ie7.sp-horizontal .sp-previous-arrow { border-right: 20px solid #FFF; border-top: 20px solid transparent; border-bottom: 20px solid transparent; } .ie8.sp-horizontal .sp-next-arrow, .ie7.sp-horizontal .sp-next-arrow { border-left: 20px solid #FFF; border-top: 20px solid transparent; border-bottom: 20px solid transparent; } .ie8.sp-vertical .sp-previous-arrow, .ie7.sp-vertical .sp-previous-arrow { border-bottom: 20px solid #FFF; border-left: 20px solid transparent; border-right: 20px solid transparent; } .ie8.sp-vertical .sp-next-arrow, .ie7.sp-vertical .sp-next-arrow { border-top: 20px solid #FFF; border-left: 20px solid transparent; border-right: 20px solid transparent; } /* Thumbnail Arrows --------------------------------------------------*/ .sp-thumbnail-arrows { position: absolute; } .sp-fade-thumbnail-arrows { opacity: 0; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .sp-thumbnails-container:hover .sp-fade-thumbnail-arrows { opacity: 1; } .sp-top-thumbnails .sp-thumbnail-arrows, .sp-bottom-thumbnails .sp-thumbnail-arrows { width: 100%; top: 50%; left: 0; margin-top: -12px; } .sp-left-thumbnails .sp-thumbnail-arrows, .sp-right-thumbnails .sp-thumbnail-arrows { height: 100%; top: 0; left: 50%; margin-left: -7px; } .sp-thumbnail-arrow { position: absolute; display: block; width: 15px; height: 25px; cursor: pointer; } .sp-left-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow, .sp-right-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .sp-top-thumbnails .sp-previous-thumbnail-arrow, .sp-bottom-thumbnails .sp-previous-thumbnail-arrow { left: 0; } .sp-top-thumbnails .sp-next-thumbnail-arrow, .sp-bottom-thumbnails .sp-next-thumbnail-arrow { right: 0; } .sp-left-thumbnails .sp-previous-thumbnail-arrow, .sp-right-thumbnails .sp-previous-thumbnail-arrow { top: 0; } .sp-left-thumbnails .sp-next-thumbnail-arrow, .sp-right-thumbnails .sp-next-thumbnail-arrow { bottom: 0px; } .sp-previous-thumbnail-arrow:before, .sp-previous-thumbnail-arrow:after, .sp-next-thumbnail-arrow:before, .sp-next-thumbnail-arrow:after { content: ''; position: absolute; width: 50%; height: 50%; background-color: #FFF; } .sp-previous-thumbnail-arrow:before { left: 30%; top: 0; -webkit-transform: skew(145deg, 0deg); -ms-transform: skew(145deg, 0deg); transform: skew(145deg, 0deg); } .sp-previous-thumbnail-arrow:after { left: 30%; top: 50%; -webkit-transform: skew(-145deg, 0deg); -ms-transform: skew(-145deg, 0deg); transform: skew(-145deg, 0deg); } .sp-next-thumbnail-arrow:before { right: 30%; top: 0; -webkit-transform: skew(35deg, 0deg); -ms-transform: skew(35deg, 0deg); transform: skew(35deg, 0deg); } .sp-next-thumbnail-arrow:after { right: 30%; top: 50%; -webkit-transform: skew(-35deg, 0deg); -ms-transform: skew(-35deg, 0deg); transform: skew(-35deg, 0deg); } .ie8 .sp-thumbnail-arrow, .ie7 .sp-thumbnail-arrow { width: 0; height: 0; } .ie8 .sp-thumbnail-arrow:before, .ie8 .sp-thumbnail-arrow:after, .ie7 .sp-thumbnail-arrow:before, .ie7 .sp-thumbnail-arrow:after { content: none; } .ie8 .sp-top-thumbnails .sp-previous-thumbnail-arrow, .ie8 .sp-bottom-thumbnails .sp-previous-thumbnail-arrow, .ie7 .sp-top-thumbnails .sp-previous-thumbnail-arrow, .ie7 .sp-bottom-thumbnails .sp-previous-thumbnail-arrow { border-right: 12px solid #FFF; border-top: 12px solid transparent; border-bottom: 12px solid transparent; } .ie8 .sp-top-thumbnails .sp-next-thumbnail-arrow, .ie8 .sp-bottom-thumbnails .sp-next-thumbnail-arrow, .ie7 .sp-top-thumbnails .sp-next-thumbnail-arrow, .ie7 .sp-bottom-thumbnails .sp-next-thumbnail-arrow { border-left: 12px solid #FFF; border-top: 12px solid transparent; border-bottom: 12px solid transparent; } .ie8 .sp-left-thumbnails .sp-previous-thumbnail-arrow, .ie8 .sp-right-thumbnails .sp-previous-thumbnail-arrow, .ie7 .sp-left-thumbnails .sp-previous-thumbnail-arrow, .ie7 .sp-right-thumbnails .sp-previous-thumbnail-arrow { border-bottom: 12px solid #FFF; border-left: 12px solid transparent; border-right: 12px solid transparent; } .ie8 .sp-left-thumbnails .sp-next-thumbnail-arrow, .ie8 .sp-right-thumbnails .sp-next-thumbnail-arrow, .ie7 .sp-left-thumbnails .sp-next-thumbnail-arrow, .ie7 .sp-right-thumbnails .sp-next-thumbnail-arrow { border-top: 12px solid #FFF; border-left: 12px solid transparent; border-right: 12px solid transparent; } /*スライダーe*/ /* ---------------- top.css start ---------------- */ .hanbai1 { margin:30px 50px 40px 50px !important; color:#333333; text-align:left; line-height:180%; } @media only screen and (max-width: 780px) { .hanbai1 { margin:30px 30px 40px !important; } } .hanbai2 { font-size:14px; margin:30px 50px 40px 50px !important; color:#333333; text-align:left; line-height:160%; } .pch1 { margin:0px 50px 40px 50px !important; color:#333333; text-align:left; line-height:180%; } .hanbai_text { margin:20px 50px 30px 50px !important; color:#333333; line-height:150%; } .hanbai_name { font-size:18px; color:#F26D7D; font-weight:bold; height:20px; vertical-align:top; padding-bottom:5px; line-height:130%; } .hanbai_img1 { width:600px; height:600px; } .hanbai_img2 { width:270px; height:270px; margin:0px 10px 40px 20px !important; } .hanbai_img3 { width:270px; height:270px; margin:0px 20px 40px 10px !important; } .hyou td { vertical-align:top; } .hyou2 td { vertical-align:top; text-align:center !important; } .item_desc td { line-height:140%; } .shinki_frame { /* width:600px; */ line-height:180%; margin: 0 auto 60px !important; } .shinki_text { margin:40px !important; font-size:14px; } .shinki_name { font-weight:bold; color:#666666; font-size:18px; margin:15px 0 30px 0 !important; } .shinki_catch { font-weight:bold; color:#666666; font-size:14px; line-height: 150%; margin:40px 0 0 0 !important; border-bottom: 1px dashed #ccc; } .color2 A { color:#333333; font-style:normal; text-decoration:none; display:block; height:100%; padding:14px; } .color2 A:link { color:#333333; text-decoration:none; } .color2 A:VISITED { color:#333333; text-decoration:none; } .color2 A:HOVER { color:#333333; font-style:normal; text-decoration:none; } .color2 A:HOVER { background-color:#FFE8E9; } .color2 { border:1px solid #cccccc; font-size:90%; line-height:140%; background-color:#fff; } .color2 img { margin-bottom:5px !important; } .color2 span { text-align:left; padding:3px 10px; display:block; } DIV.small { font-color:#666666; font-size:80%; line-height:140%; } .small A{ color:#666666; font-style:normal; text-decoration:none; } .small A:VISITED { color:#666666; text-decoration:none; } .small A:HOVER { color:#f60; font-style:normal; text-decoration:underline; } .small2 { color:#999999; font-size:80%; line-height:160%; } .small2 A{ width:100%; color:#333333; font-style:normal; text-decoration:none; } .small2 A:VISITED { color:#333333; text-decoration:none; } .small2 A:HOVER { color:#f60; font-style:normal; text-decoration:underline; } .midasi { color:#c7b299; border-left:5px solid #c7b299; padding-left:5px; margin-bottom:5px !important; } .midasi2 { color:#F26D7D; border-left:5px solid #F26D7D; padding-left:5px; margin-bottom:5px !important; } .att1 { background-color:#FFEEEF; margin-top: 10px !important; padding:20px; font-size:18px; font-weight:bold; color:#dd0000; border:1px dashed #dd0000; line-height:140%; } .attwaku { width:600px; } .comment2 { font-size:90%; border:1px dashed #c7b299; margin:5px 0px 0px !important; padding:5px; text-align:left; background-color:#fff; color:#736357; line-height:120%; } .clear { clear:both; } /* ------------------ 関連商品 ------------------ */ table.kanren, table.kanren1, table.kanren2, table.kanren3 { width:600px; font-size:9px; line-height:130%; margin-bottom:20px !important; border-collapse:separate; border:0px; } table.kanren th, table.kanren td, table.kanren1 th, table.kanren1 td, table.kanren2 th, table.kanren2 td, table.kanren3 th, table.kanren3 td { padding:6px; } table.kanren a, table.kanren1 a, table.kanren2 a, table.kanren3 a { color: #666666; font-size: 9px; line-height:130%; text-decoration:none; } table.kanren a:LINK, table.kanren1 a:LINK, table.kanren2 a:LINK, table.kanren3 a:LINK { color:#666666; font-style:normal; text-decoration:none; } table.kanren a:VISITED, table.kanren1 a:VISITED, table.kanren2 a:VISITED, table.kanren3 a:VISITED { color:#666666; text-decoration:none; } table.kanren a:HOVER, table.kanren1 a:HOVER, table.kanren2 a:HOVER, table.kanren3 a:HOVER { color:#f60 !important; text-decoration:underline; } .text1 { line-height:160%; font-size:14px; } span.rev { background-color:#ffe4e1; font-weight:bold; font-size:1.2em } .thum3 { border-top:1px solid #cccccc; padding:10px; margin:20px !important; text-align:right !important; } .thum3 img { height:80px; display:inline !important; /* 追加 */ margin-bottom:3px !important; } /* 画像上キャプション */ .fx-caption { width: 100%; position: relative; overflow:hidden; } .fx-caption p{ position: absolute; left: 0; bottom: 0.5em; color: #fff; margin: 0 !important; padding: 2px; width: 100%; background: #000; filter: Alpha(opacity=70); opacity: 0.6; } .fx-caption a { text-decoration: none; } .fx-caption:hover img{ transition: 0.3s; } .fx-caption2 { width: 100%; position: relative; overflow:hidden; } .fx-caption2 p{ position: absolute; left: 0; top: 0.5em; color: #fff; margin: 0 !important; padding: 2px; width: 100%; background: #000; filter: Alpha(opacity=70); opacity: 0.6; } .fx-caption2 a { text-decoration: none; } .fx-caption:hover2 img{ transition: 0.3s; } /* --top.css end-- */ /* ---------------- main.css start ---------------- */ .hanb76 { width:760px; font-size:14px; margin: 0 auto; } .hb76_top3 td { padding:0px; border:0px; font-weight:bold; color:#666666; font-size:11px; line-height:150%; margin-bottom:5px !important; } .hb76_top3 td img { margin-bottom:5px !important; } .hb76_bd { width:760px; font-size:14px; line-height:170%; border:#999999 solid 1px; margin-bottom:120px !important; } .hb76_name { font-weight:bold; color:#666666; font-size:18px; margin:40px 40px 0px 40px !important; line-height:180%; } .hb76_text { font-size:14px; line-height:170%; margin:40px !important; } .hb76_nobd { width:760px; font-size:14px; line-height:170%; margin-bottom:120px !important; } .hb76_nobd2 { width:760px; font-size:14px; line-height:170%; margin-bottom:50px !important; } .hb76_nobd img{ margin-bottom:5px !important; } .hb76_nobd2 img{ margin-bottom:5px !important; } .hb76_t1 { font-weight:bold; color:#666666; font-size:18px; margin:15px 0 15px 0 !important; } .hb76_t2 { font-weight:bold; color:#666666; font-size:14px; border-bottom: 1px dashed #ccc; margin:0 !important; } .hb76_t3 { font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-weight:bold; color:#000000; font-size:40px; letter-spacing:0.1em; margin-bottom:10px !important; line-height:150%; } hr.fade { border: 0; height: 1px; margin: 30px 0; background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); } @media only screen and (max-width: 780px) { .hb76_t3 { font-size: 180%; } } .cnttitle{/*--テキストセンタリング--*/ font-weight:bold; font-size:16px; color:#666666; text-align:center; margin: 0 auto; } .cnttext { font-size:14px; text-align:center; margin: 0 auto 40px 0; } .t-cent { text-align:center; margin:0 auto; } .t-dotborder { border-bottom: 1px dashed #ccc; display: inline-block; padding: 0 3%; font-size:1.6em; font-weight:bold; color:#696969; letter-spacing: 0.1em; width:30%; margin:15px auto; } .t-cent p { margin-top:10px; font-size:1.2em; } .hr border1 { border-top: 1px dashed #ccc;width:30%; } /* --main.css end-- */ /* ---------------- parts.css start ---------------- */ /* グラデーションを付けたボックス */ div.box_effect09 { background: #505050; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#51a2c1', endColorstr='#74b5cd'); background: linear-gradient(to bottom, #51a2c1, #74b5cd); background: -moz-linear-gradient(top,#51a2c1 0%,#74b5cd); background: -webkit-gradient(linear, left top, left bottom, from(#51a2c1), to(#74b5cd)); border: 1px solid #DDD; color:#FFF; padding: 10px 10px; margin: 10px 0px; } div.box_effect09 a{ color:#FFF; } div.box_effect09 a:hover{ color:#2f4f4f; } /* オリジナルボタン_上下ボーダー(S) */ .button-borg { margin: 0 auto; text-align:center !important; } span.button-borg-s { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; font-size: 120%; font-weight:bold; padding: 5px 20px; display: inline-block; margin: 20px auto; line-height: 140%; text-align:center; } span.button-borg-s:HOVER { opacity: 0.5; } span.button-borg-s a { color: #7dc6c4 !important; } /* ---------------- parts.css end ---------------- */ /*magazineのcss p_style.cssここから*/ #magazine { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-align: center; line-height:160%; letter-spacing:0.1em; } #magazine p { padding-top:5px; padding-bottom:5px; } #magazine img { border-style: none; max-width: 100%; height: auto; vertical-align: bottom; } #magazine figure { margin:2em; } #magazine figure img { margin: 0 auto; text-align: center; } #magazine figcaption { font-size: 60%; margin: 1em 0; } #magazine h2,#magazine h3,#magazine h4 { text-align:left; margin:2em 0; } /*-----*/ #magazine header { } #magazine div[id^="max_width"] { max-width: 1000px; margin: 0px auto; } #magazine #main_img { } #magazine #main_img img { } #magazine #content1 { } #magazine #site_title { z-index: 1; position: absolute; background: url(../img/bg-content1.png); padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px; } #magazine #site_title span { font-family: "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝", serif; font-size: 35px; /*追加*/ line-height:150%; } #magazine #menu_button { position:fixed; top:0px; left:0px; cursor: pointer; z-index:3; } #magazine #nav { font-family: "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝", serif; position:fixed; top:0px; margin-left:-200px; width:200px; z-index:2; } #magazine #nav ul { padding: 0px; background-color:rgba(0,0,0,0.90); list-style-type: none; } #magazine #nav ul li { list-style-type: none; } #magazine #nav ul li a:link { padding-top: 12px; padding-right: 10px; padding-left: 11px; padding-bottom: 12px; border-bottom: 1px solid #4A4A4A; display:block; text-align:left; color: #FFFFFF; text-decoration: none; -webkit-transition: color 0.3s ease-in-out 0s; -moz-transition: color 0.3s ease-in-out 0s; -ms-transition: color 0.3s ease-in-out 0s; -o-transition: color 0.3s ease-in-out 0s; transition: color 0.3s ease-in-out 0s; } #magazine #nav ul li a:visited { color: #FFFFFF; border-bottom: 1px solid #434343; text-decoration: none; } #magazine #nav ul li a:hover { color: #B9B9B9; text-decoration: none; } #magazine #nav_copy { display: none; } #magazine .content_even { } #magazine .content_even a:link { color: #000000; -webkit-transition: color 0.3s ease-in-out 0s; -moz-transition: color 0.3s ease-in-out 0s; -ms-transition: color 0.3s ease-in-out 0s; -o-transition: color 0.3s ease-in-out 0s; transition: color 0.3s ease-in-out 0s; } #magazine .content_even a:visited { color: #000000; } #magazine .content_even a:hover { color: #767676; } #magazine .content_odd { background-color: #161616; color: #FFFFFF; } #magazine .content_odd a:link { color: #FFFFFF; -webkit-transition: color 0.3s ease-in-out 0s; -moz-transition: color 0.3s ease-in-out 0s; -ms-transition: color 0.3s ease-in-out 0s; -o-transition: color 0.3s ease-in-out 0s; transition: color 0.3s ease-in-out 0s; } #magazine .content_odd a:visited { color: #FFFFFF; } #magazine .content_odd a:hover { color: #A7A7A7; } #magazine div[class^="bg-text"] { padding-top: 30px; padding-bottom: 30px; padding-left: 5px; padding-right: 5px; z-index: 1; height:auto; overflow:hidden; } div[class^="bg-text"] h1 { font-size: 180%; font-weight: normal; padding-bottom: 5px; /*追加*/ line-height:160%; } #magazine div[class^="bg-text"] p { text-align:left; } #magazine #bg-text-footer { padding-top: 30px; padding-bottom: 30px; padding-left: 5px; padding-right: 5px; } #bg-text-footer p { } #magazine .color1 { color: #C00; } #magazine .color2 { color: #FF6600; } #magazine .color3 { color: #9900CC; } #magazine .supplement { font-size: 90%; color: #6C6C6C; } #magazine .ie6 #nav { display: none; } #magazine .img_450_left img { display: block; } #magazine .img_450_right img { display: block; } /*追加*/ /* article */ #magazine .group_wrap1 { background-image:url(../img/bg2.png); padding-top:40px; padding-bottom:40px; } #magazine .group_wrap2 { background-image:url(../img/bg3.png); padding-top:40px; padding-bottom:40px; } #magazine .group { max-width: 1000px; text-align:center; margin: 0px auto; } #magazine .group img { margin: 15px auto; display: inline-block; text-align:center; } #magazine .group a:link { color: #FFFFFF; -webkit-transition: color 0.3s ease-in-out 0s; -moz-transition: color 0.3s ease-in-out 0s; -ms-transition: color 0.3s ease-in-out 0s; -o-transition: color 0.3s ease-in-out 0s; transition: color 0.3s ease-in-out 0s; } #magazine .group a:visited { color: #464646; } #magazine .group a:hover { color: #B5B5B5; } #magazine .group h1 { margin-left: 5px; margin-right: 5px; clear: both; color:#464646; font-size:170%; } #magazine .group h2 { margin-left: 5px; margin-right: 5px; clear: both; color:#464646; font-size:140%; } #magazine .group p { margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-left: 5px; } #magazine .img_frame { -webkit-box-sizing:border-box; box-sizing:border-box; border: 1px solid #C9C9C9; background-color:#F7F7F7; padding: 4px; max-width: 100%; height: auto; vertical-align:bottom; } #magazine img { border-style: none; max-width: 100%; height: auto; vertical-align: bottom; } #magazine .column_block { } #magazine .column2_1 { } #magazine .column2_2 { } #magazine .column2_1_box { padding-bottom:15px; } #magazine .column2_2_box { padding-bottom:15px; } #magazine .column3_1 { } #magazine .column3_2 { } #magazine .column3_3 { } #magazine .column3_1_box { padding-bottom:15px; } #magazine .column3_2_box { padding-bottom:15px; } #magazine .column3_3_box { padding-bottom:15px; } #magazine .color1 { color:#FF0000; /* 赤色 */ } #magazine .color2 { color:#FF6600; /* 橙色 */ } #magazine .color3 { color:#9900CC; /* 紫色 */ } #magazine .supplement { font-size:90%; color:#6C6C6C; /* 補足 */ } #magazine .iframe-content { position: relative; width: 100%; padding: 75% 0 0 0; } #magazine .iframe-content iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media only screen and (min-width: 700px) { #magazine #block1 { height: 700px; } #magazine #content1 { position: absolute; background: url(../img/bg-content1.png); top: 0px; left: 0px; padding-top: 30px; padding-bottom: 25px; padding-left: 25px; padding-right: 25px; } #magazine #site_title { position: static; background: none; padding-top: 0px; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; } #magazine #site_title span { font-size: 42px; /*追加*/ line-height:150%; } #magazine .ie8_under #site_title{ padding-top: 10px; padding-bottom: 10px; padding-left: 15px; padding-right: 15px; } .ie8_under #site_title span { font-size: 35px; /*追加*/ line-height:150%; } #magazine #menu_button { display: none; } #magazine #nav { position: static; top: 0px; left: 0px; margin-left: 0px; width: 100%; } #magazine #nav ul { background-color:rgba(0,0,0,0); } #magazine #nav ul li { display:inline-block; } #magazine #nav ul li a:link { border-bottom: 0px solid #424242; color: #FFFFFF; padding: 5px; } #magazine #nav ul li a:visited { color: #FFFFFF; } #magazine #nav ul li a:hover { text-decoration: none; color: #B9B9B9; } #magazine .ie6 #nav ul li { display: inline; zoom: 1; padding-top: 10px; padding-right: 10px; } #magazine .ie7 #nav ul li { display: inline; zoom: 1; } #magazine #nav_copy { position: fixed; top: 0px; margin-left: 0px; width: 100%; z-index: 2; background-color: #161616; } #magazine #nav_copy ul { padding: 0px; list-style-type: none; } #magazine #nav_copy ul li { display:inline-block; list-style-type: none; } #magazine #nav_copy ul li a:link { color: #CFCFCF; padding-top: 12px; padding-right: 10px; padding-left: 10px; padding-bottom: 12px; border-bottom: 0px solid #4A4A4A; display:block; text-align:left; text-decoration: none; -webkit-transition: color 0.3s ease-in-out 0s; -moz-transition: color 0.3s ease-in-out 0s; -ms-transition: color 0.3s ease-in-out 0s; -o-transition: color 0.3s ease-in-out 0s; transition: color 0.3s ease-in-out 0s; } #magazine #nav_copy ul li a:visited { color: #CFCFCF; border-bottom: 0px solid #434343; text-decoration: none; } #magazine #nav_copy ul li a:hover { color: #A7A7A7; text-decoration: none; } #magazine .ie6 #nav_copy ul li { display: inline; zoom: 1; padding-top: 10px; padding-right: 10px; } #magazine .ie7 #nav_copy ul li { display: inline; zoom: 1; } #magazine div[class^="bg-text"] { padding-top: 40px; padding-bottom: 40px; } #magazine div[class^="bg-text"] h1 { font-size: 200%; padding-bottom: 10px; } #magazine #bg-text-footer { padding-top: 40px; padding-bottom: 40px; } /* article */ #magazine .group_wrap1 { padding-top:60px; padding-bottom:60px; } #magazine .group_wrap2 { padding-top:60px; padding-bottom:60px; } #magazine .column_block { display:block; clear:both; height:auto; overflow:hidden; margin-bottom:20px; } #magazine .column2_1 { width: 50%; float:left; } #magazine .column2_2 { width: 50%; display:inline-block; } #magazine .column2_1_box { padding-bottom: 0px; padding-right: 30px; } #magazine .column2_2_box { padding-bottom: 0px; padding-left: 30px; } #magazine .column3_1 { width: 33.3%; float:left; } #magazine .column3_2 { width: 33.3%; float:left; } #magazine .column3_3 { width: 33.4%; display:inline-block; } #magazine .column3_1_box { padding-bottom: 0px; padding-right: 30px; } #magazine .column3_2_box { padding-bottom: 0px; padding-left: 15px; padding-right: 15px; } #magazine .column3_3_box { padding-bottom: 0px; padding-left: 30px; } #magazine .ie6 .column_block { margin-bottom: 0px; } #magazine .ie6 .column2_1 { width: 100%; } #magazine .ie6 .column2_2 { width: 100%; } #magazine .ie6 .column2_1_box { padding-right: 0px; padding-bottom: 15px; } #magazine .ie6 .column2_2_box { padding-left: 0px; padding-bottom: 15px; } #magazine .ie6 .column3_1 { width: 100%; } #magazine .ie6 .column3_2 { width: 100%; } #magazine .ie6 .column3_3 { width: 100%; } #magazine .ie6 .column3_1_box { padding-right: 0px; padding-bottom: 15px; } #magazine .ie6 .column3_2_box { padding-left: 0px; padding-right: 0px; padding-bottom: 15px; } #magazine .ie6 .column3_3_box { padding-left: 0px; padding-bottom: 15px; } #magazine .img_450_left { float: left; padding-right: 5px; } #magazine .img_450_right { float: right; padding-left: 5px; } #magazine #magazine .text { margin: 5px; } } /*--- common.cssからのmarge ---*/ /* INPUTタグ用 */ #magazine .chk_div input{ margin: 5px 2px 5px 10px; vertical-align: middle; } /* タイトル表示 */ #magazine .head_line{ color: #fafad2; background: linear-gradient(#db7093,#ffb6c1); /* CSS3 */ background: -moz-linear-gradient(top, #db7093, #ffb6c1); /* FF3.6+ */ background: -webkit-linear-gradient(top, #db7093, #ffb6c1); /* Chrome10+, Safari5.1+ */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#db7093', endColorstr='#ffb6c1'); /* IE */ padding: 10px; } /* コメント表示 */ #magazine .cmnt{ display: inline; font-size: 90%; color: #666666; background-color:#ffe8e9; padding:2px 5px 2px 2px; } /* BUTTONタグ用 */ #magazine .button_stl{ background-color: #ffd6e1; width: 110px; height: 60px; cursor: pointer; margin: 5px 2px 5px 10px; vertical-align: middle; outline:none; border: 1px solid #ddd; border-radius: 8px; /* CSS3, IE */ -moz-border-radius: 8px; /* FF3.6+ */ -webkit-border-radius: 8px; /* Chrome10+, Safari5.1+ */ } #magazine .button_stl:hover{ background-color: #ffe6d1 !important; } #magazine .inp_btn_stl{ width: 100px; height: 30px; cursor: pointer; } /* ラジオテキスト回り込み防止 */ #magazine .chk_div ul,li{ margin: 0; padding: 0; } #magazine .chk_div ul{ list-style: none; } #magazine .chk_div ul.keep input[type=radio], #magazine .chk_div ul.keep input[type=checkbox] { display: block; float: left; } #magazine .chk_div ul.keep span{ display: block; overflow: hidden; /* モダンブラウザ用 */ padding: 0 10px; zoom: 1; /* IE6用 */ } /* for SmartPhone */ /* 画像横並び用 */ #magazine .section01 ul { padding-left: 0; } #magazine .itemList li a { display: block; padding: 3%; } #magazine .itemList li { list-style: none; width: 330px; float: left; overflow: hidden; line-height: 0; height: 0; position: relative; } @media only screen and (max-width: 400px) { #magazine .section01 ul { padding-left: 10px; } #magazine .itemList li { padding-bottom: 80%; } } @media only screen and (min-width: 401px) and (max-width: 500px) { #magazine .itemList li { padding-bottom: 70%; } } @media only screen and (min-width: 501px) and (max-width: 600px) { #magazine .itemList li { padding-bottom: 60%; } } @media only screen and (min-width: 601px) and (max-width: 700px) { #magazine .itemList li { padding-bottom: 50%; } } @media only screen and (min-width: 701px) and (max-width: 800px) { #magazine .itemList li { padding-bottom: 42%; } } @media only screen and (min-width: 801px) and (max-width: 950px) { #magazine .itemList li { padding-bottom: 35%; } } @media only screen and (min-width: 951px) and (max-width: 1000px) { #magazine .itemList li { padding-bottom: 30%; } } @media only screen and (min-width: 1001px) { #magazine .itemList li { padding-bottom: 27%; } } /*magazineのcss p_style.cssここまで*/ /* --見出し start-- */ .overall .selector01 { border-left:7px solid #ccc; padding:.6em .8em; font-weight:normal; margin:.5em 0; } .overall .selector02 { border-bottom:1px dashed #ccc; padding:.6em .8em; font-weight:normal; margin:.5em 0; } .overall .selector03 { background:#eee; padding:.8em .9em; font-weight:normal; margin:.5em 0; } .overall .selector04 { border-bottom:2px solid #ccc; padding:.6em .8em; font-weight:normal; margin:.5em 0; } .overall .selector05 { border:1px solid #ccc; padding:.6em .8em; font-weight:normal; margin:.5em 0; } /* --見出し end-- */ /* --magazine start-- */ figure { margin:2em; } figure img { margin: 0 auto; text-align: center; } figcaption { font-size: 60%; margin: 1em 0; } article[class^="group"] { max-width: 1000px; text-align:center; margin: 0px auto; } article[class^="group"] img { margin: 15px auto; display: inline-block; text-align:center; } article[class^="group"] a:link { color: #FFFFFF; -webkit-transition: color 0.3s ease-in-out 0s; -moz-transition: color 0.3s ease-in-out 0s; -ms-transition: color 0.3s ease-in-out 0s; -o-transition: color 0.3s ease-in-out 0s; transition: color 0.3s ease-in-out 0s; } article[class^="group"] a:visited { color: #464646; } article[class^="group"] a:hover { color: #B5B5B5; } article[class^="group"] h1 { margin: 20px auto; clear: both; color:#464646; font-size:170%; line-height:200%; } article[class^="group"] h2 { margin-left: 5px; margin-right: 5px; clear: both; color:#464646; font-size:140%; } article[class^="group"] p { margin: 10px 5px; text-align: left; } /* add start */ .updownline { padding: 0.5em 0; border-top: 1px solid #333; border-bottom: 3px solid #333; margin: 0 0 30px 0; } .updownline p { font-size:1.8em; font-weight:bold; text-align:center; letter-spacing: 0.4em; } .hanb76 ul { margin-left:1.4em; line-height:150%; } .hanb76 ul li { margin-bottom:1.4em; list-style:square; } .hanb76 h2 { font-size:140%; margin:20px 0; } /* add end */ /* CHECK TABLE用 */ table.chk_tbl{ width: 100%; color: #000; /* 黒 */ background: #fff; /* 白 */ border-collapse: collapse; } .chk_tbl tr{ /* いったんボーダーを入れ、不要なものはタグ側で削除 */ border: 1px solid #fdc2c2; /* ピンク */ } .chk_tbl th{ /* いったんボーダーを入れ、不要なものはタグ側で削除 */ border-bottom: 1px solid #fff; /* 白 */ background: #fdc2c2; /* ピンク */ } .chk_tbl tr:last-child th { border-bottom: 1px solid #fdc2c2; /* ピンク */ } .chk_tbl th, .chk_tbl td{ width: 25%; text-align: left; padding: 10px; font-size: 90%; } /* --magazine end-- */ /* Pagination 追加S_0018 */ .sysPagination ul { margin-top: 5rem; } .sysPagination a { line-height: 35px; } /* Pagination 追加E_0018 */ /* 検索フォーム 追加S_0018 */ #sysMain .sysItemSearchForm { background-color: #eee; padding: 5px; margin-bottom: 10px; } #sysMain .sysItemSearchForm input[type="search"] { height: 28px; line-height: 0; border: solid 1px; } #sysMain .sysItemSearchFormWord { display: inline-block; width: 20%; } #sysItemSearch #sysWrap { max-width: 1080px; } #sysItemSearch #sysMain form .sysItemSearchAndOr { display: inline-block; } #sysItemSearch #sysMain form .sysItemSearchAndOr input[type="radio"] { -webkit-transform: scale(0.8); transform: scale(0.8); margin-right: 0.1em; margin-left: 1.4em; vertical-align: middle; } #sysItemSearch #sysMain form .sysItemSearchFormRange { display: inline-block; margin-left: 15px; vertical-align: middle; } #sysItemSearch #sysMain form .sysItemSearchFormRange input { line-height: 0; } #sysItemSearch #sysMain form .sysItemSearchFormSort { display: inline-block; margin-left: 15px; } #sysItemSearch #sysMain form .sysSearchButton { display: inline-block; margin: 10px; width: 60px; border-radius: 5px; } #sysItemSearch #sysMain form .sysSearchButton:hover { cursor: pointer; } #sysItemSearch .sysItemListDisp label { font-size: 12px; margin: 25px 10px; } #sysItemSearch .sysItemListDisp .sysItemListViewType input[type="radio"] { -webkit-transform: scale(0.8); transform: scale(0.8); vertical-align: middle; } #sysItemSearch .sysItemList li { padding: 15px 25px 25px; width: 20%; } #sysItemSearch .sysItemList .sysList li { display: block; width: 100%; padding: 15px!important; margin: 0!important; } #sysItemSearch .sysItemList li:hover{ background-color:#f6f6f6; } #sysItemSearch .sysItemName{ font-size: 14px; height: 4.5em; line-height: 1.3em; margin: 15px 0 5px 0; overflow: hidden; text-align: left; } #sysItemSearch .sysRetailPrice { color: #a50d43; font-size: 11px; } /* 検索フォーム 追加E_0018 */ /* ヘッダー固定表示 追加S_0018 */ .header_fixing { background-color: #fff; position: relative; z-index: 800; min-width: 1000px; } .header_fixing.follow { left: 0; position: fixed; top: 0; width: 100%; z-index: 9999999; } #header_top{ background-color: #fff; height: 40px; margin: 0 auto; max-width: 1100px; } .header_top_img{ float: left; text-align: left; } .header_top_img img{ max-width:200px; } .header_top_btn li { float: right; /* border: 1px solid #ccc;*/ display: inline-block; margin-left: 3px; padding: 0; position: relative; text-align: center; width: 68px; margin-top: 12px; } .header_top_btn li img{ padding: 5px 1px 0 0; } .header_top_btn li:hover img{ opacity: 0.5; } #header_btm{ border: 1px solid #fff; background-color: #fff; padding: 0; text-align: center; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3); } .header_btm_desc { border: 1px solid #fff; list-style-type: none; margin: 0 auto; max-width: 1100px; padding: 0; width: 100%; } .header_btm_desc li { border-right: 1px solid #ccc; display: inline-block; margin: 0; padding: 0; position: relative; text-align: center; width: 11%; font-size: 11px; vertical-align: middle; } .header_btm_desc li:last-child { border-right: none; } .header_btm_desc li a{ color: #666; display: block; text-decoration: none; } .header_btm_desc li a:hover{ opacity: 0.5; } .header_btm_search{ width: 25% !important; } .header_btm_search input { margin: 10px 5px; vertical-align: middle; } .header_btm_search input[type="search"] { width: 200px; height: 28px; } .header_btm_search input[type="image"] { margin: 6px 4px; width: 24px; } .header_btm_search input[type="image"]:hover { opacity: 0.5; } .header_fixing_sp { background-color: #fff; position: relative; z-index: 800; } .header_fixing_sp.follow_sp { left: 0; top: 0; position: fixed; width: 100%; z-index: 9999999; } #header_smp { padding-top: 2px; padding-bottom: 1px; line-height: normal; } #header_smp li { background-color: #eeeeee; display: inline-block; margin: 0; padding: 0; position: relative; text-align: center; width: 18%; font-size: 80%; line-height: normal; } #header_smp a, #header_smp .menu_button span { text-decoration: none; color: #000; } #header_smp img { margin-top: 5px; vertical-align: baseline; } #header_smp li:hover a, #header_smp li:hover img, #header_smp .menu_button span:hover { opacity: 0.5; } #smp_d_btn li { background-color: #fff; display: inline-block; margin: 0; padding: 0; position: relative; text-align: center; width: 23%; } @media only screen and (min-width: 481px) and (max-width: 780px) { #smp_d_btn li { width: 15%; } } /* ヘッダー固定表示 追加E_0018 */ /* フッタ表示 追加S_0018 */ .footer_common a { text-decoration: none; } .footer_common a:hover { opacity: 0.5; } .footer_area { margin: auto; max-width: 1100px; padding: 25px 10px; position: relative; width: 100%; } .footer_area span { margin-left: -1em; font-weight: bold; font-size: 120%; } .footer_area nav { display: inline-block; vertical-align: top; } .footer_area .footer_main img{ margin-bottom: 20px; } .footer_area .footer_cat, .footer_area .footer_link, .footer_area .footer_about { padding-top: 40px; padding-left: 8%; line-height: 2; } .footer_area .footer_cat li, .footer_area .footer_link li, .footer_area .footer_about li { list-style-type: disc; } .footer_copyright { padding: 20px 0; text-align: center; } #foot_ad_sp { position: relative; z-index: 800; } .foot_ad_sp_line { font-size: 12px; line-height: 1em; background-color: #dd8c86; color: #fff; opacity: 0.9; position: fixed; left: 0; bottom: 0; text-align: center; width: 100%; padding: 5px 0; z-index: 10000; } .foot_ad_sp_line a:link { color: #ffffff; } .foot_ad_sp_line a:visited { color: #ffffff; } .foot_ad_sp_line a:hover { color: #ffffff; } .foot_ad_sp_line a:active { color: #ffffff; } /* フッタ表示 追加E_0018 */ /* 商品チェック履歴 追加S_0018 */ .item_check_history { border-style: none; margin: 10px auto; max-width: 760px; } .item_check_history .sysHeadline { border-bottom: 2px solid #666; background-color: #fff; color: #666; font-weight: bold; padding: 3px 10px; margin: 15px 0; } .item_check_history .sysContent { padding: 0; } #sysItemDetail #sysAside .item_check_history .item_check_history .sysContent .sysHorizontal li { padding: 10px 20px; } /* 商品チェック履歴 追加E_0018 */ /* マイページ－閲覧履歴、カテゴリ商品一覧 追加S_0018 */ #sysMypageAshiato #sysWrap, #sysItemCategory #sysWrap { max-width: 1080px; } #sysMypageAshiato .sysItemListDisp label, #sysItemCategory .sysItemListDisp label { font-size: 12px; margin: 25px 10px; } #sysMypageAshiato .sysItemListDisp .sysItemListViewType input[type="radio"], #sysItemCategory .sysItemListDisp .sysItemListViewType input[type="radio"] { -webkit-transform: scale(0.8); transform: scale(0.8); vertical-align: middle; } #sysMypageAshiato .sysItemList li, #sysItemCategory .sysItemList li { padding: 15px 15px 25px; width: 20%; } #sysMypageAshiato .sysItemList li div { font-size: 12.5px; } #sysMypageAshiato .sysItemList .sysList li, #sysItemCategory .sysItemList .sysList li { display: block; width: 100%; padding: 15px!important; margin: 0!important; } #sysMypageAshiato .sysItemList li:hover, #sysItemCategory .sysItemList li:hover{ background-color:#f6f6f6; } #sysItemCategory .sysItemName{ font-size: 14px; height: 4.5em; line-height: 1.3em; margin: 15px 0 5px 0; overflow: hidden; text-align: left; } #sysItemCategory .sysRetailPrice { color: #a50d43; font-size: 11px; } /* マイページ－閲覧履歴、カテゴリ商品一覧 追加E_0018 */ /* FAQページ 追加S_0018 */ div.faq_contents a { text-decoration: none; } #resp_tbl { width: 100% !important; border-collapse: collapse; } #resp_tbl td { width: 25%; padding: 10px; border: none; vertical-align: top; } #resp_tbl a:hover { opacity: 0.5; } .qa1 { line-height: 160%; border-bottom: 1px dashed #cccccc; padding: 5px 0px 30px 0px; } .qa2 { font-weight: bold; color: #F7941D; margin: 20px 0; } .qa3 { margin-bottom:5px; padding-bottom:5px; border-bottom:1px dashed #dddddd; } @media only screen and (max-width: 480px) { #resp_tbl td { display: block; text-align: center; width: auto; border-bottom: none; } } /* FAQページ 追加E_0018 */ /* --news_media start-- */ .news_media { max-width:1000px; clear:both; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; margin: 0 auto; display:block; padding: 40px 0; position:relative; } .news_media-L { float:left; width:60%; } #custom_bar { float: left; width: 100%; height: 330px; overflow: hidden; padding: 0; background: #fff; color: #000; border: none; } .news_media-R { float:right; width:35%; } .news_media-R img { width:80%; display:block; margin: 0 auto; } .news_media h3 { text-align:center; line-height:140%; font-size:24px; margin-bottom: 20px; } .list_info { max-width:550px; height: 330px; /* overflow:auto; */ line-height:130%; font-size:11px; } .list_info dt, .list_info dd { padding:10px; margin-right:10px; } .list_info dt { clear: both; float: left; width: 110px; /* 幅を指定 */ border-top: 1px solid #FFFFFF; padding-left:10px; /* dtの分、左にpaddingを取る */ } .list_info dd { padding-left: 100px; /* ddの分、左にpaddingを取る */ border-top: 1px solid #FFFFFF; border-bottom: 1px solid #666666; margin-right:30px; } /* -- news_media end-- */ /*新規会員登録「必須」s*/ .sysAcceptMailmagazine span.sysRequired { display: none; } /*新規会員登録「必須」e*/ /*PR設定 s*/ .sysItemPr { font-size: small; padding: 0 5px; background: #bfbfbf; border-radius: 3px; display: inline-block; font-weight: bold; color: white; margin-top: 5px; border:0; } /*PR設定 e*/ .tbl_fmt td { padding: 5px; } .sysFuncSslSticker.ssl_sticker { margin-right: 10px; text-align: right; } /* カート確認ページ 追加S_0018 */ #sysMain .sysNavImg { margin-bottom: 20px; } .sysItemListArea { width: 80%; margin: 0 auto; } .sysCart .sysBox .sysProduct { float: right; width: 50%; font-size: 130%; } .sysItemListArea h2.sysCartTitle { width: 125%; margin-left: -12.5%; } #sysConfirm div#sysMain { width: 80%; } .sysCart #sysMain select { max-width: 10em; } @media only screen and (max-width: 780px) { .sysCart #sysMain select { margin: 0.5em; } } .sysCart #sysMain .sysConfirmButton { text-align: center; } .sysCart #sysMain .sysConfirmButton input[type=submit] { width: 45%; } @media only screen and (max-width: 480px) { .sysCart #sysMain .sysConfirmButton input[type=submit] { width: 80%; } } /* カート確認ページ 追加E_0018 */ /* マイページリマインダー 追加S_0018 */ #sysMypageReminder #sysMain .sysFormField { margin-bottom: 30px; } /* マイページリマインダー 追加E_0018 */ /* 支払選択備考欄 追加S_0018 */ #sysPayment #sysMain .sysRemarksArea .sysRemarks .sysFormLabel { color: #da4a3f; font-weight: bold; font-size: 130%; } /* 支払選択備考欄 追加E_0018 */ /* エラーメッセージ強調 追加S_0018 */ .sysErrorMessage { font-size: 120%; font-weight: bold; } /* エラーメッセージ強調 追加E_0018 */ /* テーブルレスポンシブ（横スクロール） 追加S_0018 */ .scrl_tbl table { width: 95%; margin: 0 auto; border-collapse: collapse; border-spacing:0; } .scrl_tbl th { background: #eee; color: #333; } .scrl_tbl th, .scrl_tbl td { margin: 0; padding: 8px 10px; border: 1px solid #b9b9b9; text-align: center; } .scrl_tbl thead th:first-child { background: #fff; border-top: 1px solid #fff; border-right: 1px solid #b9b9b9; border-bottom: 1px solid #b9b9b9; border-left: 1px solid #fff; } /* テーブルレスポンシブ（横スクロール） 追加E_0018 */ /* top 追加S_0019 */ /* --bathlier_original start-- */ .bathlier_original { max-width:1000px; clear:both; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; margin: 0 auto; display:block; padding: 50px 0; position:relative; } .bathlier_original-L { float:left; width:35%; } .bathlier_original-L img { width:100%; display:block; margin: 0 auto; } .bathlier_original-R { float:right; width:60%; } .bathlier_original-R img { display:block; margin:8px 0 0 0; } .bathlier_original h3 { text-align:left; line-height:140%; font-size:24px; margin-bottom: 20px; } .bathlier_original h4 { text-align:left; line-height:140%; font-size:16px; margin-bottom:6px; color:#666; } /* -- bathlier_original end-- */ /* --furokatsu start-- */ .furokatsu { max-width:1000px; clear:both; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; margin: 0 auto; display:block; padding: 50px 0; position:relative; } .furokatsu-L { float:left; width:48%; } .furokatsu-L img { width:100%; display:block; margin: 0 auto; } .furokatsu-R { float:right; width:48%; } .furokatsu-R img { display:block; margin:8px 0 0 0; } .furokatsu h5 { text-align:left; line-height:140%; font-size:16px; margin-bottom:6px; color:#666; } .furokatsu h4 { text-align:right; font-size:11px; margin-bottom:0px; color:#bfbfbf; font-weight:lighter; } /* -- furokatsu end-- */ /* top 追加E_0019 */ /* ヘッダートップバナー 追加S_0019 */ /* --headbn start-- */ .headbn { max-width:1200px; margin: 0 auto; padding: 0 0 15px 0; } .headbn-L { float:left; width:49%; text-align:right; } .headbn-L img { display:block; margin: 0 auto; width:100%; } .headbn-R { float:right; width:49%; text-align:right; } .headbn-R img { width:100%; display:block; margin: 0 auto; } .collabo-text { font-size:90%; text-align:right; } /* -- headbn end-- */ /* ヘッダートップバナー 追加E_0019 */ /* 追加S_0019 */ .hb76_t4 { text-align:left; color:#c23a16; margin:3% 0; font-size:16px; font-weight:bold; } /* --column2 start-- */ .column2 { max-width:760px; clear:both; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; margin: 0 0 2% 0; display:block; } .column2-L { float:left; width:49%; margin:0 0 2% 0; } .column2-L img { width:100%; display:block; margin: 0 auto; } .column2-R { float:right; width:49%; margin:0 0 2% 0; } .column2-R img { width:100%; display:block; margin: 0 auto; } .column2a-L { float:left; width:45%; color:#333333; text-decoration:none; display:block; height:100%; padding:2%; border:#CCC solid 1px; margin:0 0 2% 0; } .column2a-R { float:right; width:45%; color:#333333; text-decoration:none; display:block; height:100%; padding:2%; border:#CCC solid 1px; margin:0 0 2% 0; } .column2a_t { text-align:left; line-height:170%; font-size:20px; color:#535353; font-weight:bold; } /* -- column2 end-- */ /* 追加E_0019 */ /*--- header_fixing ログイン＆カート情報 追加S_0018 ---*/ .header_parts_parent, .header_parts_parent_sp { position: relative; background-color: #fff; } .header_parts_parent.follow { left: 0; width: 100%; position: fixed; top: 140px; z-index: 99999999999999999; } .header_parts_parent_sp.follow_sp { left: 0; width: 100%; position: fixed; top: 9%; z-index: 99999999999999999; } .header_parts_wrap { max-width: 1100px; margin: 0 auto; } .p_login, .p_login_sp { float: left; } .p_login .sysContent { padding: 0 5px 5px 0; } .p_login_sp { width: 40%; } .p_login p { margin: 0 auto; } .p_login_sp p { margin: 10px auto 0; } .p_login .sysMailaddress, .p_login .sysMemberPassword, .p_login .sysLoginButton, .p_login .sysContent ul, .p_login_sp .sysMailaddress, .p_login_sp .sysMemberPassword, .p_login_sp .sysLoginButton, .p_login_sp .sysContent ul { display: none; } .p_login .sysContent div:nth-of-type(n+2), .p_login_sp .sysContent div:nth-of-type(n+2) { display: none; } .p_cart_info, .p_cart_info_sp { float: right; text-align: right; } .p_cart_info_sp { width: 60%; } .p_cart_info .sysContent, .p_cart_info_sp .sysContent { padding: 0 5px 0 0; } .header_parts_wrap dl, .header_parts_wrap_sp dl { width:210px; font-size:11px; font-weight:bolder; display: inline-block; padding-right: 5px; } .header_parts_wrap dt,.header_parts_wrap dd, .header_parts_wrap_sp dt,.header_parts_wrap_sp dd { display:inline; } .header_parts_wrap dd, .header_parts_wrap_sp dd { padding-left:10px; } .header_parts_wrap dd span, .header_parts_wrap_sp dd span { color: #dd8c86; } /*--- header_fixing ログイン＆カート情報 追加E_0018 ---*/ /*--- 画像横並び 追加S_0018 ---*/ .img_container_main { overflow: hidden; margin: 0; } .img_items { display: block; float: left; width: 32%; background: #fff; margin: 0.5%; padding: 0; border: #eee 1px solid; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .img_items img { display: block; width: 100%; margin: 0; } .img_items p { margin: 4%; font-size: 90%; line-height: 1.5em; letter-spacing: 0.1em; } .img_items H4 { margin: 6% 4% 4%; } .img-responsive-icon { overflow: auto; display: block; height: auto; width: 150px !important; margin-bottom: 3px; } @media only screen and (max-width: 1024px) { .img_items { width: 49%; } .img_items p { font-size: 90%; } } /* 一列にしたい場合、コメントを外す @media only screen and (max-width: 640px) { .img_items { width: 99%; margin-left: 0; margin-right: 0; } } */ .article_date { float: left; padding-top: 10px; padding-bottom: 0; margin-bottom: 0; font-size: 80% !important; } .img_items2 { display: block; float: left; width: 99%; background: #fff; margin: 0.5%; padding: 5px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .img_items2_l { display: block; float: left; width: 48%; margin: 10px 1% 5px 0; } .img_items2_r { display: block; float: left; width: 48%; margin: 10px 0 5px 1%; } .img_items2_l img, .img_items2_r img { width: 100%; } @media only screen and (min-width: 1025px) { .img_items2_r { width: 49%; } } @media only screen and (max-width: 640px) { .img_items2_l, .img_items2_r { width: 99%; margin-left: 0; margin-right: 0; } } /*--- 画像横並び 追加E_0018 ---*/ /*--- 共通ヘッダ_pc_top 追加S_0018 ---*/ .head_pc_top .sysContent { padding: 10px 0 0; } .head_pc_top { max-width: 1200px; margin: 3px auto; } .head_pc_top .bn_list { float: left; margin: 0 1.67% 0 0; } .head_pc_top .bn_list:last-child { margin: 0; } .header_logo { text-align: center; max-width: 1200px; margin: 0 auto; } .header_logo img { width: 30%; margin-top: 30px; } /*--- 共通ヘッダ_pc_top 追加E_0018 ---*/ /*--- 共通ヘッダ_pc_bottom 追加S_0018 ---*/ .head_pc_bottom { margin: 3px auto; } .head_pc_bottom .sysContent { padding: 0; } .head_pc_bottom_main ul { max-width: 1200px; margin: 0 auto; text-align: center; } .head_pc_tile ul, .head_pc_tile li { float: left; } .head_pc_tile li { border-right: 1px solid #ccc; width: 14%; } .head_pc_tile li:nth-child(6) { border-right: none; margin-top: 24px; margin-left: 30px; width: 25%; } .inp_form form { margin: 0; padding: 0; } .inp_form input[type="search"] { width: 250px; } .inp_form input[type="image"]:hover { opacity: 0.5; } .inp_form input { vertical-align:middle; position:relative; margin: 0 4px 2px 0; *margin-right:3px; top:-1px; height: 26px; } .head_pc_bottom_main { padding: 5px 0; border-top: solid 1px #cdcdcd; border-bottom: solid 1px #cdcdcd; } div.head_pc_bottom_main:after { content: ""; display: block; clear: both; } .head_pc_tile img { margin: 0; width: auto; } /*--- 共通ヘッダ_pc_bottom 追加E_0018 ---*/ /*--- 共通ヘッダ_sp_top 追加S_0018 ---*/ .head_sp_top .sysContent { padding: 5px 0 15px; } .menu_list ul { width: 100%; margin: 0; } .head_sp_top .sysContent ul { float: left; text-align: center; } .head_sp_top .sysContent li { display: inline-block; padding: 0 2px; font-size: 90%; } @media only screen and (max-width: 780px) { .header_logo img { width: 60%; margin: 10px 0; } .inp_form form { max-width: 550px; text-align: center; margin: 0px auto; } .inp_form input { margin-top: 20px; } .inp_form input[type="search"] { width: 60%; } } @media only screen and (min-width: 481px) and (max-width: 780px) { .head_sp_top .sysContent li { padding: 0 5px; } } /*--- 共通ヘッダ_sp_top 追加E_0018 ---*/ /*--- 共通ヘッダ_sp_bottom 追加S_0018 ---*/ .head_sp_bottom { width: 100%; } .head_sp_bottom .sysContent{ padding: 0; } div.head_sp_bottom_main { padding: 1% 0; background-color: #eee; } div.head_sp_bottom_main:after { content: ""; display: block; clear: both; } .head_sp_tile li { background-color: #eee; border-right: 1px solid #ccc; float: left; width: 20%; text-align: center; padding: 0 1%; } .head_sp_tile li:nth-child(5) { border-right: none; } .head_sp_tile img { width: 60%; } .head_sp_bottom .bn_list_1_2, .head_sp_bottom .bn_list_1_2a, .head_sp_bottom .bn_list_1_4 { float: left; margin-top: 2%; margin-right: 2%; } .head_sp_bottom .bn_list_1_2 { width: 53%; } .head_sp_bottom .bn_list_1_2a { width: 45%; margin-right: 0; } .head_sp_bottom .bn_list_1_4 { width: 21.5%; margin-bottom: 2%; } .head_sp_bottom .bn_list_1_2:last-child { margin-right: 0; } @media only screen and (max-width: 480px) { .head_sp_tile img { width: 90%; } } /*--- 共通ヘッダ_sp_bottom 追加E_0018 ---*/ /*--- 共通ヘッダ機能パーツ 追加S_0018 ---*/ .head_pc_parent { max-width: 1200px; margin: 0 auto; } .login_parts .sysContent { float: left; padding-top: 30px; } .login_parts .sysContent p, .login_parts .sysContent div { width: 350px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; } .login_parts .sysMailaddress, .login_parts .sysMemberPassword, .login_parts .sysLoginButton, .login_parts .sysContent ul { display: none; } .login_parts .sysContent div:nth-of-type(n+2) { display: none; } .head_pc_middle .sysContent { width: 60%; margin: 0 auto; padding-top: 30px; } .head_pc_middle .sysContent ul { float: left; text-align: center; } .head_pc_middle .sysContent li { display: inline-block; padding: 0 5px; } .head_pc_right { float: right; margin-top: -30px; height: auto; overflow: hidden; border: solid 3px #ddd; padding: 8px; } .cart_parts1, .cart_parts2 { float: right; } .cart_parts1 .sysContent, .cart_parts2 .sysContent { padding: 0; } .cart_parts1 dd, .cart_parts1 dl, .cart_parts1 dt, .cart_parts2 dd, .cart_parts2 dl, .cart_parts2 dt { display: inline; padding-right: 10px; } .sysCartInfoTotalPrice > dd { padding-right: 0; } .sysCartInfoItemCount > dt, .sysCartInfoTotalPrice > dt { display: none; } .head_pc_right .sysCartInfoTotalPrice, .head_pc_right .sysCartInfoRemainFreeShipping { color: transparent; font-size: 0; } .sysCartInfoTotalPrice span, .sysCartInfoRemainFreeShipping span { color: #000; font-size: 14px; } .sysCartInfoRemainFreeShipping span { font-weight: bold; } .yen_parts1, .yen_parts2 { float: right; display: inline; } .yen_parts1 p { margin: 1px 0 0 -10px; padding: 0; } .yen_parts2 p { margin: 1px 0 0 -20px; padding: 0; } .yen_parts1 .sysContent, .yen_parts2 .sysContent { padding: 0; } .view_cart { float: right; display: inline; width: 60px; margin-top: -34px; } .view_cart .sysContent { padding-right: 0; } @media only screen and (max-width: 780px) { .head_pc_parent { width: 100%; } .login_parts .sysContent p, .login_parts .sysContent div { width: 100%; } .login_parts .sysContent { padding-top: 10px; color: #999; font-weight: bold; font-size: 85%; } .head_pc_right { font-size: 85%; margin-top: 0; border: none; padding-top: 8px; } .view_cart { width: 50px; margin-top: -7px; } } @media only screen and (max-width: 480px) { .login_parts .sysContent { float: none; } .head_pc_right { padding-top: 3px; } .view_cart { width: 50px; margin-top: -12px; } } @media only screen and (min-width: 481px) and (max-width: 530px) { .login_parts .sysContent { width: 32%; } } @media only screen and (min-width: 531px) and (max-width: 620px) { .login_parts .sysContent { width: 40%; } } @media only screen and (min-width: 621px) and (max-width: 780px) { .login_parts .sysContent { width: 48%; } } /*--- 共通ヘッダ機能パーツ 追加E_0018 ---*/ /*--- 共通ヘッダ_pc_1200px固定解除対応 追加S_0018 ---*/ @media only screen and (min-width: 781px) and (max-width: 1199px) { .head_pc_middle .sysContent { margin: 0; } .login_parts .sysContent { padding: 10px; } .head_pc_tile li:nth-child(6) { margin-left: 3%; } .inp_form input[type="search"] { width: 78%; } } /*--- 共通ヘッダ_pc_1200px固定解除対応 追加E_0018 ---*/ /*--- トップスライダー 追加S_0018 ---*/ .top_slider_resp .sysContent { padding: 0; overflow: hidden; } .slide_wrap { width: 980px; padding: 0 10px; margin: 20px auto 70px; text-align: left; position: relative; } .clearfix:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; font-size: 0; line-height: 0; overflow: hidden; } .clearfix { _height: 1px; min-height: 1px; } .show_pc { display: block; } #box-main-pic { position: relative; height: 500px; } #box-main-pic a { opacity: 1; } #box-main-pic ul { position: absolute; left: 0; top: 0; } #box-main-pic ul li { float: left; } #box-main-pic ul li img { width: 100%; height: 500px; display: none; } #box-main-pic #cover-left { width: 980px; height: 500px; position: absolute; left: -980px; top: 0; background-color: rgba(15, 15, 15, 0.5); } #box-main-pic #cover-right { width: 980px; height: 500px; position: absolute; right: -980px; top: 0; background-color: rgba(15, 15, 15, 0.5); } #box-main-pic #btn-top-prev { cursor: pointer; position: absolute; left: -40px; top: 250px; } #box-main-pic #btn-top-next { cursor: pointer; position: absolute; right: -40px; top: 250px; } #box-main-pic #box-control { position: absolute; width: 100%; bottom: -20px; left: 0px; text-align: center; } #box-main-pic #box-control div { height: 3px; width: 20px; display: inline-block; margin: 0 4px; cursor: pointer; background-color: #e4c8ba; } #box-main-pic #box-control div.on { background-color: #044989; } @media only screen and (max-width: 980px) { .show_pc { display: none; } #box-main-pic { height: auto; padding-bottom: 57px; } #box-main-pic ul li img { height: 100%; } #box-main-pic #box-control { bottom: -10px; } #top_slider { margin-bottom: 0; } .slide_wrap { width: 100%; padding: 0; margin-bottom: 50px; min-width: 320px; height: 100%; right: 0; transition: right 0.25s; -moz-transition: right 0.25s; -webkit-transition: right 0.25s; -o-transition: right 0.25s; } } @media only screen and (max-width: 650px) { .slide_wrap { margin-bottom: 10px; } #top_slider { margin-bottom: 0; } #box-main-pic #box-control { bottom: 10px; } } /*--- トップスライダー 追加E_0018 ---*/ /*--- 760販売説明全店共通化S_0018 ---*/ /* 販売説明全体 */ .wrap_760 { max-width: 760px; width: 100%; margin: auto; font-size: 14px; line-height: 170%; } .wrap_760 div { font-size: 14px; } /* 囲みボックス */ #sysExplanation div.bd_box { border: solid #999 1px !important; } .bd_txt { margin: 10% 5% 5% !important; } /* タイトル */ div.t1_l, div.t1_c { font-weight: bold; font-size: 16px; color: #666; } div.t2_l, div.t2_c { font-weight: bold; color: #666; } div.t1_c, div.t2_c, .area_c > div { text-align: center !important; } div.t3_l { font-weight: bold; font-size: 18px; color: #000; line-height: 160%; } div.t4_l { font-weight: bold; font-size: 20px; color: #000; line-height: 160%; } a div.t1_l, a div.t1_c, a div.t2_l, a div.t2_c, a div.t3_l, a div.t4_l { color: #6492C3; } a:hover div.t1_l, a:hover div.t1_c, a:hover div.t2_l, a:hover div.t2_c, a:hover div.t3_l, a:hover div.t4_l { opacity: .7; } /* 文字装飾 */ .f_bold { font-weight: bold; font-size: 120%; } .f_red1 { font-weight: bold; color: #C00; } .f_red2 { color: #C00; margin: 0; } .f_min { font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hirgino Mincho Pro", serif; font-size:40px !important; font-weight: bold; letter-spacing: 0.1em; line-height: 150%; } /* 装飾・体裁 */ #sysExplanation div.bd1_c { border-bottom: 1px dashed #ccc !important; width: 30% !important; margin: 15px auto !important; } #sysExplanation div.bd1_l { border-bottom: 1px dashed #ccc !important; width: 30% !important; margin: 15px auto 15px 0 !important; } #sysExplanation div.bd2_c { border-bottom: 1px dashed #ccc !important; width: 30% !important; margin: 0 auto 5px !important; } #sysExplanation div.bd2_l { border-bottom: 1px dashed #ccc !important; width: 30% !important; margin: 0 auto 5px 0 !important; } #sysExplanation div.att_box { background-color: #ffeeef; padding: 20px; font-weight: bold; color: #cc0000; border: #cc0000 dashed 1px !important; font-size: 18px; margin: 0 30px; } @media screen and (max-width: 480px) { #sysExplanation { margin: 0 5px; } #sysExplanation div.bd1_c, #sysExplanation div.bd1_l, #sysExplanation div.bd2_c, #sysExplanation div.bd2_l { width: 50% !important; } div.att_box { font-size: 16px !important; margin: 0 15px !important; } } .area_c { text-align: center !important; } .area_r { text-align: right !important; } /* マージン */ .m_15 { margin-bottom: 15px !important; } .m_30 { margin-bottom: 30px !important; } .m_60 { margin-bottom: 60px !important; } .m_120 { margin-bottom: 120px !important; } /* 画像＆マップ */ .img_main { width: 600px; float: left; } @media screen and (max-width: 780px) { .img_main { width: 100%; } } .img_sub { float: left; } @media screen and (max-width: 780px) { #sysExplanation div.img_wrap, #sysExplanation div.img_main, #sysExplanation div.img_main img { max-width: 600px !important; width: 100% !important; } .img_sub { display: none; } } .img_600a, .img_600b, .img_380 { text-align: center; } .img_600a img, .img_600b img { width: 600px; } .img_380 img { width: 380px; } a:hover .img_600a, a:hover .img_600b, a:hover .img_380 { opacity: .7; } /* 画像付き横並びリスト */ .img_list2 ul, .img_list3 ul, .img_list4 ul, .img2_list2 ul, .img2_list3 ul, .img2_list4 ul { font-size:12px; width: 100%; line-height: normal; margin: 0; padding: 0 0 30px 0; display: -webkit-box; display: -moz-box; display: -ms-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .img_list2 ul li, .img_list3 ul li, .img_list4 ul li, .img2_list2 ul li, .img2_list3 ul li, .img2_list4 ul li { list-style: none; position: relative; padding-bottom: 1rem; margin-bottom: 0; } .img_list2 ul li img, .img_list3 ul li img, .img_list4 ul li img, .img2_list2 ul li img, .img2_list3 ul li img, .img2_list4 ul li img { width: 100%; margin: 0; padding: 0; } .img_list2 ul li, .img2_list2 ul li { width: 49%; margin-right: 2%; } .img_list3 ul li, .img2_list3 ul li { width: 32%; margin-right: 2%; } .img_list4 ul li, .img2_list4 ul li { width: 23.5%; margin-right: 2%; } .img_list2 ul li:nth-child(2n), .img2_list2 ul li:nth-child(2n), .img_list3 ul li:nth-child(3n), .img2_list3 ul li:nth-child(3n), .img_list4 ul li:nth-child(4n), .img2_list4 ul li:nth-child(4n) { margin-right: 0; } /* テキストのみ横並び */ .item_list2 ul, .item_list3 ul, .item_list4 ul { width: 100%; margin: 0 auto 30px; padding: 0; overflow: hidden; display: -webkit-box; display: -moz-box; display: -ms-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .item_list2 ul li, .item_list3 ul li, .item_list4 ul li { margin: 0 1% 8px 0; border: solid #eee 1px; list-style-type: none; padding: 5px; display: -webkit-box; /* safari, Chrome */ display: -moz-box; /* Firefox */ display: -o-box; /* Opera */ display: -ms-box; /* IE */ display: box; /* ベンダープレフィックスなし */ } .item_list2 ul li:nth-child(2n), .item_list3 ul li:nth-child(3n), .item_list4 ul li:nth-child(4n) { margin-right: 0; } .item_list2 ul li:hover, .item_list3 ul li:hover, .item_list4 ul li:hover { background-color: #ffe8e9; } .item_list2 ul li a, .item_list3 ul li a, .item_list4 ul li a { display: block; font-size: 90%; color: #555; } .item_list2 ul li a:hover, .item_list3 ul li a:hover, .item_list4 ul li a:hover { color: #555; } .item_list2 ul li, .item_list3 ul li, .item_list4 ul li { -webkit-box-align: center; /* safari, Chrome */ -moz-box-align: center; /* Firefox */ -o-box-align: center; /* Opera */ -ms-box-align: center; /* IE */ box-align: center; /* ベンダープレフィックスなし */ } .item_list2 ul li { width: 49.5%; } .item_list3 ul li { width: 32.6%; } .item_list4 ul li { width: 24.2%; } /* ラッピング横並び */ .wpg_list p { margin: 0; font-size: 12.5px; text-align: center !important; } .wpg_list img { width: 25%; margin-bottom: 5px; } .wpg_list ul { width: 100%; margin: 1px auto; padding: 0; overflow: hidden; display: table; } .wpg_list ul li { margin: 0 0 0 1%; border: solid #fff 1px; list-style-type: none; padding: 1%; width: 30%; text-align: center; background-color: #eee; display: table-cell; vertical-align: middle; } .wpg_list ul li:first-child { border-left: none; } .wpg_list ul li:nth-child(3) { border-right: none; } /*--- 760販売説明全店共通化E_0018 ---*/ /*--- お風呂レシピ楽天共通化aishipR専用cssS_0018 ---*/ body div[id^="furore"] { font-size: 125%; } div[id^="furore"] ul, div[id^="furore"] li { font-size: inherit !important; } /*--- お風呂レシピ楽天共通化aishipR専用cssE_0018 ---*/ /*--- Amazon Pay用cssS_0018 ---*/ @media only screen and (min-width: 541px) { .sysNextSubmitAreaForUseAmazon { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } /*--- Amazon Pay用cssE_0018 ---*/ .sysMypage .sysLoginForm, .sysMypage #sysMain form { max-width: 700px; margin: 0 auto; } /*--- 楽天共通化S_0018 ---*/ #new_template .login_parts .sysContent { padding-left: 0; } @media only screen and (max-width: 1220px) { #new_template .head_pc_wrap { padding: 0 5px; } } @media only screen and (min-width: 781px) and (max-width: 1199px) { #new_template .login_parts .sysContent { padding-top: 30px; } } @media only screen and (min-width: 781px) { #new_template .head_pc_parent .head_pc_right { margin-top: 25px; } #new_template .head_pc_parent .view_cart { margin-top: 20px; } } @media only screen and (max-width: 780px) { #new_template .head_pc_parent .head_pc_right { padding-top: 20px; } #new_template .head_pc_parent .view_cart { margin-top: 5px; } } #new_template #sysHeader .test_parts { max-width: 1200px; margin: -20px auto 40px; } #new_template #sysHeader .test_parts ul { width: 40%; margin: 0 auto; } #new_template #sysHeader .test_parts ul li { float: left; padding: 8px 3% 0; } #new_template #sysHeader .test_parts ul li:last-child { padding-right: 0; } #new_template #sysHeader .test_parts .inp_form { float: right; } @media only screen and (max-width: 780px) { #new_template #sysHeader .test_parts .inp_form input { margin-top: 0; } } @media only screen and (max-width: 1199px) and (min-width: 707px) { #new_template #sysHeader .test_parts .inp_form input[type="search"] { width: 250px; } #new_template #sysHeader .test_parts { margin-top: -25px; } #new_template #sysHeader .test_parts ul { width: 50%; margin: 0; } } @media only screen and (max-width: 706px) { #new_template #sysHeader .test_parts { margin: 0 0 10px 0; } #new_template #sysHeader .test_parts ul { width: 100%; float: left; text-align: center } #new_template #sysHeader .test_parts ul li { float: none; display: inline-block; } #new_template #sysHeader .test_parts .inp_form { float: none; margin-top: 50px; } } /*--- 楽天共通化E_0018 ---*/ @media screen and (max-width:480px){ /* 10-0 Only Smartphone *----------------------------------------------------------------------*/ #sysMain,#sysAside{ width: 100%!important;} #sysMain{ margin-top: 0;} .grid-col { float: none; width: 100%!important; margin-left: 0; } /* 10-1 Header */ #sysHeader{ margin-bottom: 5px;} .h-siteinfo{ height: auto;} .h-siteinfo h1 { font-size: xx-small;} .h-sitelogo{ height: 52px;} .h-sitelogo li img{ width: auto; max-height: 47px; } .h-utilitybtn{ position: relative;} .h-utilitybtn .sysContent { width: 32%; float: none; position: absolute; z-index: 999; top: 0; right: 15%; } .h-utilitybtn ul li.sysText a { line-height: 17px; height: 47px; font-size: x-small; } .h-utilitybtn ul li { height: 47px; } .h-utilitybtn ul li.sysText a:before { content: ""; width: 20px; margin: 5px auto 0; height: 20px; display: block; } .h-utilitybtn ul li.sysText:nth-child(1) a:before { background: url(http://template-advance.aispr.jp/img/icon/icon-mypage.png); background-size: 100%; } .h-utilitybtn ul li.sysText:nth-child(2) a:before { background: url(http://template-advance.aispr.jp/img/icon/icon-cart.png); background-size: 100%; } /* 10-1-3 ドロップダウンメニュー */ .h-subMenu .sysHeadline{ line-height: 47px; width: 15%; float: right; position: absolute; bottom: 4px; right: 0; } .h-subMenu ul li:nth-child(2n){ width: 49%!Important; margin-left: 1%; } .h-subMenu ul li.sysText a { line-height: 40px; font-size: larger; font-weight: bold; text-align: center; margin-top: 5px; padding: 30px 0; } /* 12-12 見出し */ .headline-2nd { margin-left: 5px; } .headline-3rd { margin-left: 10px; } /* 12-14 Responsive Grid System */ .col { float: none;} .gutters .col { margin-left: 0;} .span_1,.span_2,.span_3,.span_4,.span_5,.span_6, .span_7,.span_8,.span_9,.span_10,.span_11,.span_12{ width: 100%!Important; float: none; } /* 12-2 Holizontal Item Block */ .sysContent .sysItemBlock .sysHorizontal { font-size: small; } .sysItemList ul.sysThumbnail li{ width: 50%;} #sysItemSearch .sysItemList li { width: 50%;} #sysItemCategory .sysItemList li {width: 50%;} #sysMypageAshiato .sysItemList li {width: 50%;} /* 13-1-5 メインメニュー*/ .h-mainMenu ul li { height: 40px;} .h-mainMenu ul li.sysText a { font-size: 0.5rem; padding: 15px 0; } /* 13-1-6 検索フォーム */ .h-search .sysContent{ padding: 5px;} /* 13-2-2 Half Banner */ .p-banner li { width: 100%; margin-bottom: 5px; } /* 13-2-3 PICK UP Item */ .p-pickup .sysContent { padding: 0 0 5px; } /* 13-2-4 News & SNS */ .p-news,.p-sns { width: 100%;} /* 13-2-5 ShopInformation */ .p-shopInfo .sysContent, .shopinfo-inner, .shopinfo-row { display: block;} .shopinfo-inner { width: 100%; } /* 13-4-1 Footer Site Map */ .f-sitemap li { width: 100%!important; } .f-sitemap ul li.sysText a { padding: 10px 20px; text-align: left; } /* 13-4-2 Page Top Btn */ .p-pagetop .btn { width: 90%;} /* 14-1-2 Category Pankuzu */ .sysCategoryPankuzu { font-size: 10px; } /* 14-1-7 Archive Thumbnail Item */ .sysItemList ul.sysThumbnail { font-size: small;} .sysItemList ul.sysThumbnail input { font-size: .8rem;} /* 14-2-3 Order Area */ .orderArea { letter-spacing: normal;} .orderArea > div { width: 100%; padding-right: 0; float: none; } /* 14-5-2 MyPage*/ #sysMain .sysMypageNav input.sysButton { font-size: 0.75rem; width: 100%; padding: 10px 0; } /* 追加スタイルを無効化できるか*/ #sysExplanation, #sysExplanation table, #sysExplanation p, #sysExplanation div { max-width: 100% !important; width: auto !important; border: none !important; } #sysExplanation tr, #sysExplanation td { width: auto; height: auto; } #sysExplanation img { max-width: 100% !important; width: auto !important; height: auto !important; } #sysExplanation div.img_600b img { max-width: 80% !important; width: 80% !important; } #sysExplanation div.img_380 img { max-width: 80% !important; width: 80% !important; } /* 追加S_0018 */ #sysSubmit input { padding: 10px; text-indent: 0; font-size: 13px; line-height: 19px; height: auto; color: #fff; background: #dd8c86 none repeat scroll 0 0; border-radius: 3px; } #sysSubmit input:hover { cursor:pointer; padding-top: 10px; text-indent: 0; height: auto; background: #deb1ae none repeat scroll 0 0; border-radius: 3px; } #sysSubmit input[value="今は購入できません"] { padding-top: 10px; text-indent: 0; height: auto; background: #dd8c86 none repeat scroll 0 0; border-radius: 3px; } #sysSubmit input[value="今は購入できません"]:hover { cursor:pointer; padding-top: 10px; text-indent: 0; height: auto; background: #deb1ae none repeat scroll 0 0; border-radius: 3px; } .img_area{ width: calc(100% - 10px); margin: 0 5px; } .sysItemImages .sysImageList li { width: 18.4%; height:auto; } .sysItemImages .sysImageList li:nth-child(3n+1), .sysItemImages .sysImageList li:nth-child(3n) { margin-left: 1%; margin-right: 1%; } .sysItemImages .sysImageList li:nth-child(5n+1) { margin-left: 0; } .sysItemImages .sysImageList li:nth-child(5n) { margin-right: 0; } .item_info { width: 80%; margin : 2rem 10%; } /* -- #page_top_ai { right: 0; bottom: 142px; z-index: 99999999; } #page_top_ai span { background: url(http://bathlier.sakura.ne.jp/bathlier/aishipr/img/materials/ico_s_top.png) no-repeat; } #page_top_ai span:hover { background: url(http://bathlier.sakura.ne.jp/bathlier/aishipr/img/materials/ico_s_top.png) no-repeat; } #login_sp, #cart_sp { display: block; z-index: 99999999; padding: 0; } #cart_sp { position: fixed; right: 0; bottom: 86px; } #cart_sp a { width: 50px; height: 50px; display: block; } #cart_sp span { width: 50px; height: 50px; display: inline-block; margin-bottom: 0px; background: url(http://bathlier.sakura.ne.jp/bathlier/aishipr/img/materials/ico_s_cart.png) no-repeat; } #login_sp { position: fixed; right: 0; bottom: 30px; } #login_sp a { width: 50px; display: block; } #login_sp span { width: 50px; height: 50px; display: block; margin-bottom: 0px; background: url(http://bathlier.sakura.ne.jp/bathlier/aishipr/img/materials/ico_s_login.png) no-repeat; } -- */ /* smp 追加S_0019 */ #page_top_ai { right: 0; bottom: 86px; z-index: 99999999; } #page_top_ai span { /* background: url(http://bathlier.sakura.ne.jp/bathlier/aishipr/img/materials/ico_s_top.png) no-repeat;*/ background: none; } #page_top_ai span:hover { /* background: url(http://bathlier.sakura.ne.jp/bathlier/aishipr/img/materials/ico_s_top.png) no-repeat;*/ background: none; } #login_sp, #cart_sp { display: block; z-index: 99999999; padding: 0; } #cart_sp { position: fixed; right: 0; bottom: 30px; } #cart_sp a { width: 50px; height: 50px; display: block; } #cart_sp span { width: 50px; height: 50px; display: inline-block; margin-bottom: 0px; /* background: url(http://bathlier.sakura.ne.jp/bathlier/aishipr/img/materials/ico_s_home.png) no-repeat;*/ background: none; } /* smp 追加S_0019 */ .h-sitelogo .sysContent { width: 100%; max-width: 100%; text-align: center; } /* 追加E_0018 */ /* 検索フォーム 追加S_0018 */ #sysMain .sysItemSearchForm { background-color: #eee; padding: 0; } #sysMain .sysItemSearchForm input[type="search"] { height: 28px; line-height: 0; border: solid 1px; } #sysItemSearch #sysMain form .sysItemSearchFormWord { display: inline-block; margin: 15px 15px 10px; width: 90%; } #sysItemSearch #sysMain form .sysItemSearchAndOr { display: inline-block; font-size: 80%; } #sysItemSearch #sysMain form .sysItemSearchAndOr input[type="radio"] { -webkit-transform: scale(0.8); transform: scale(0.8); margin-right: 0.1em; margin-left: 1.4em; vertical-align: middle; } #sysItemSearch #sysMain form .sysItemSearchFormRange { display: inline-block; font-size: 80%; margin-left: 15px; vertical-align: middle; } #sysItemSearch #sysMain form .sysItemSearchFormRange input { line-height: 0; height: 25px; } #sysItemSearch #sysMain form .sysItemSearchFormSort { display: inline-block; margin-left: 15px; } #sysItemSearch #sysMain form .sysSearchButton { display: inline-block; margin-left: 15px; width: 60px; border-radius: 5px; } #sysItemSearch #sysMain form .sysSearchButton:hover { cursor: pointer; } #sysItemSearch .sysItemListDisp label { font-size: 12px; margin: 25px 10px; } #sysItemSearch .sysItemListDisp .sysItemListViewType input[type="radio"] { -webkit-transform: scale(0.8); transform: scale(0.8); vertical-align: middle; } #sysItemSearch .sysItemList .sysList li { display: block; width: 100%; padding: 15px!important; margin: 0!important; } #sysItemSearch .sysItemList li:hover{ background-color:#f6f6f6; } #sysItemSearch .sysItemName{ font-size: 14px; height: 4.5em; line-height: 1.3em; margin: 15px 0 5px 0; overflow: hidden; text-align: left; } #sysItemSearch .sysRetailPrice { color: #a50d43; font-size: 11px; } /* 検索フォーム 追加E_0018 */ /* news_media start */ .news_media { position:relative; width:100%; clear:both; overflow:auto; scrolling font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } .news_media-L { float:none; width:100%; } #custom_bar { float: none; width: 100%; } .news_media-R { float: none; width:95%; margin: 40px 10px; } .news_media-R img { width:80%; display:block; margin: 0 auto; font-size:80%; } .news_media h3 { text-align:center; line-height:140%; font-size:1.2em; margin: 20px 0; } .list_info { /* overflow:auto; */ display:block; line-height:120%; height: 300px; font-size:90%; width:90%; margin:0 auto; } .list_info dt, .list_info dd { padding:3%; margin-right:3%; } .list_info dt { clear: both; float: left; width: 30%; /* 幅を指定 */ border-top: 1px solid #FFFFFF; padding-left:1%; /* dtの分、左にpaddingを取る */ } .list_info dd { padding-left: 33%; /* ddの分、左にpaddingを取る */ border-top: 1px solid #FFFFFF; border-bottom: 1px solid #666666; } /* news_media end */ #sysMypageReminder #sysMain input[type=submit], .sysNextSubmit, #sysMypageLogin #sysMain .sysLoginButton { width: 80% !important; } .header_btm_search{ width: 100% !important; } /* 共通フッタパーツレイアウトS_0018 */ .footer_area .footer_cat, .footer_area .footer_link, .footer_area .footer_about { padding-left: 120px; } @media only screen and (min-width: 481px) and (max-width: 780px) { nav.footer_main { width: 80%; margin-left: 80px; } .footer_area .footer_cat, .footer_area .footer_link, .footer_area .footer_about { padding-left: 8%; width: 33%; } } /* 共通フッタパーツレイアウトE_0018 */ .splendy_slide { display: none; } /* テーブルレスポンシブ（横スクロール） 追加S_0018 */ .smp_attention { display: block !important; padding: 0 0 10px 10px; } #sysExplanation .scrl_tbl td > img { width: 130px !important; } .scrl_tbl table { display: block; position: relative; } .scrl_tbl thead { display: block; float: left; } .scrl_tbl tbody { display: block; position: relative; width: auto; overflow-x: auto; white-space: nowrap; } .scrl_tbl td { display: block; height: 42px !important; border-left: none; border-top: none; } .scrl_tbl td:nth-child(2) { height: 155px !important; } .scrl_tbl thead th { display: block; width: 100px; height: 42px; } .scrl_tbl thead th:last-child { height: 43px; } .scrl_tbl thead th:first-child { height: 110px; } .scrl_tbl thead th:not(:last-child) { border-bottom: none; } .scrl_tbl thead th:nth-child(2) { height: 155px; } .scrl_tbl tbody tr { display: inline-block; } .scrl_tbl tbody th { height: 110px; border-left: none; } /* テーブルレスポンシブ（横スクロール） 追加E_0018 */ /* 画像サイズfix 追加S_0018*/ #sysExplanation img.width_half { width: 50% !important; } /* 画像サイズfix 追加E_0018*/ /* top 追加S_0019 */ /* --bathlier_original start-- */ .bathlier_original { position:relative; width:100%; clear:both; overflow:auto; scrolling font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding: 20px 0; } .bathlier_original-L { float:none; width:100%; } .bathlier_original-L img { width:100%; display:block; margin: 0 auto; } .bathlier_original-R { float: none; width:100%; margin: 0 auto; font-size:85%; } .bathlier_original-R img { display:block; margin:10px 0 0 0; } .bathlier_original h3 { text-align:left; line-height:140%; font-size:1.2em; margin-bottom: 20px; } .bathlier_original h4 { text-align:left; line-height:110%; font-size:1.2em; margin-bottom:6px; color:#666; } /* -- bathlier_original end-- */ /* --furokatsu start-- */ .furokatsu { position:relative; width:100%; clear:both; overflow:auto; scrolling font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding: 20px 0; } .furokatsu-L { float:none; width:100%; } .furokatsu-L img { width:100%; display:block; margin: 0 auto; } .furokatsu-R { float: none; width:100%; margin: 0 auto; } .furokatsu-R img { display:block; margin:10px 0 0 0; } .furokatsu h5 { text-align:left; line-height:140%; font-size:16px; margin-bottom:6px; color:#666; } .furokatsu h4 { text-align:right; font-size:11px; margin-bottom:0px; color:#bfbfbf; font-weight:lighter; } /* -- furokatsu end-- */ /* top 追加E_0019 */ /* ヘッダートップバナー 追加S_0019 */ /* --headbn start-- */ .headbn { width:100%; padding: 5px 0; } .headbn-L { float:none; width:100%; text-align:right; margin: 0 auto; } .headbn-L img { width:100%; display:block; margin: 0 0 1% 0; } .headbn-R { float: none; width:100%; margin: 0 auto; text-align:right; } .headbn-R img { width:100%; display:block; margin: 0 auto; } .collabo-text { display:none; } /* -- headbn end-- */ /* ヘッダートップバナー 追加E_0019 */ /* 追加S_0019 */ .hb76_t4 { text-align:left; color:#c23a16; margin:3% 0; font-size:16px; font-weight:bold; } /* --column2 start-- */ .column2 { width:100%; clear:both; overflow:auto; scrolling font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } .column2-L { float: none; width:100%; margin:10px 0 0 0; } .column2-L img { width:100%; display:block; margin:10px 0 0 0; } .column2-R { float: none; width:100%; margin:10px 0 0 0; } .column2-R img { width:100%; display:block; margin:10px 0 0 0; } .column2a-L { float: none; width:95%; color:#333333; text-decoration:none; display:block; height:100%; padding:2%; border:#CCC solid 1px; margin:10px 0 0 0; } .column2a-R { float: none; width:95%; color:#333333; text-decoration:none; display:block; height:100%; padding:2%; border:#CCC solid 1px; margin:10px 0 0 0; } .column2a_t { text-align:left; line-height:170%; font-size:20px; color:#535353; font-weight:bold; } /* -- column2 end-- */ /* 追加E_0019 */ /* カテゴリページ説明文レスポンシブ化S_0018 */ .sysCategoryDescription, .sysCategoryDescription table, .sysCategoryDescription p, /*.sysCategoryDescription div*/ { max-width: 100%; border: none; } .sysCategoryDescription .img_items { border: #eee 1px solid; } .sysCategoryDescription tr, .sysCategoryDescription td { width: auto; height: auto; } .sysCategoryDescription img { max-width: 100%; height: auto; } /* カテゴリページ説明部分レスポンシブ化E_0018 */ /*--- お風呂レシピ楽天共通化aishipR専用cssS_0018 ---*/ .recipe-start p, .recipe-bg_b p { max-width: 100px !important; } div.recipe-start { border: #2776bd 1.5px solid !important; } .sysCategoryDescription div.box-gray { border: #ccc 1px solid !important; } .sysCategoryDescription div.att_box { border:1px dashed #dd0000 !important; } /*--- お風呂レシピ楽天共通化aishipR専用cssE_0018 ---*/ } @media screen and (min-width:481px) and (max-width:780px){ /* 20-0 Only Tablet *----------------------------------------------------------------------*/ #sysExplanation { margin: 0 5px; } #sysMain,#sysAside{ width: 100%!important;} #sysMain{ margin-top: 0;} .grid-col { float: none; width: 100%!important; margin-left: 0; } /* 10-1 Header */ #sysHeader{ margin-bottom: 5px;} .h-siteinfo{ height: auto;} .h-siteinfo h1 { font-size: xx-small;} .h-sitelogo{ height: 52px;} .h-sitelogo li img{ width: auto; max-height: 47px; } .h-utilitybtn{ position: relative;} .h-utilitybtn .sysContent { width: 32%; float: none; position: absolute; z-index: 999; top: 0; right: 15%; } .h-utilitybtn ul li.sysText a { line-height: 17px; height: 47px; font-size: x-small; } .h-utilitybtn ul li { height: 47px; } .h-utilitybtn ul li.sysText a:before { content: ""; width: 20px; margin: 5px auto 0; height: 20px; display: block; } .h-utilitybtn ul li.sysText:nth-child(1) a:before { background: url(http://template-advance.aispr.jp/img/icon/icon-mypage.png); background-size: 100%; } .h-utilitybtn ul li.sysText:nth-child(2) a:before { background: url(http://template-advance.aispr.jp/img/icon/icon-cart.png); background-size: 100%; } /* 10-1-3 ドロップダウンメニュー */ .h-subMenu .sysHeadline{ line-height: 47px; width: 15%; float: right; position: absolute; bottom: 4px; right: 0; } .h-subMenu ul li:nth-child(2n){ width: 49%!Important; margin-left: 1%; } .h-subMenu ul li.sysText a { line-height: 40px; font-size: larger; font-weight: bold; text-align: center; margin-top: 5px; padding: 30px 0; } /* 12-12 見出し */ .headline-2nd { margin-left: 5px; } .headline-3rd { margin-left: 10px; } /* 12-14 Responsive Grid System */ .col { float: none;} .gutters .col { margin-left: 0;} .span_1,.span_2,.span_3,.span_4,.span_5,.span_6, .span_7,.span_8,.span_9,.span_10,.span_11,.span_12{ width: 100%!Important; float: none; } /* 12-2 Holizontal Item Block */ .sysContent .sysItemBlock .sysHorizontal { font-size: small; } .sysContent .sysItemBlock .sysHorizontal li{ padding: 10px; } .sysItemList ul.sysThumbnail li{ width: 33%;} #sysItemSearch .sysItemList li { width: 33%;} #sysItemCategory .sysItemList li {width: 33%;} #sysMypageAshiato .sysItemList li {width: 33%;} /* 13-1-5 メインメニュー*/ .h-mainMenu ul li { height: 40px;} .h-mainMenu ul li.sysText a { font-size: 0.5rem; padding: 15px 0; } /* 13-1-6 検索フォーム */ .h-search .sysContent{ padding: 5px;} /* 13-2-2 Half Banner */ .p-banner li { width: 100%; margin-bottom: 5px; } /* 13-2-3 PICK UP Item */ .p-pickup .sysContent { padding: 0 0 5px; } /* 13-2-4 News & SNS */ .p-news,.p-sns { width: 100%;} /* 13-2-5 ShopInformation */ .p-shopInfo .sysContent, .shopinfo-inner, .shopinfo-row { display: block;} .shopinfo-inner { width: 100%; } /* 13-4-1 Footer Site Map */ .f-sitemap li { width: 100%!important; } .f-sitemap ul li.sysText a { padding: 10px 20px; text-align: left; } /* 13-4-2 Page Top Btn */ .p-pagetop .btn { width: 90%;} /* 14-1-2 Category Pankuzu */ .sysCategoryPankuzu { font-size: 10px; margin-left: 5%; } /* 14-1-7 Archive Thumbnail Item */ .sysItemList ul.sysThumbnail { font-size: small;} .sysItemList ul.sysThumbnail input { font-size: .8rem;} /* 14-2-3 Order Area */ .orderArea { letter-spacing: normal;} .orderArea > div { width: 100%; padding-right: 0; float: none; } /* 14-5-2 MyPage*/ #sysMain .sysMypageNav input.sysButton { font-size: 0.75rem; width: 100%; padding: 10px 0; } /* 追加スタイルを無効化できるか*/ #sysExplanation, #sysExplanation table, #sysExplanation p, #sysExplanation div { max-width: 100% !important; width: auto !important; border: none !important; } #sysExplanation tr, #sysExplanation td { width: auto; height: auto; } #sysExplanation img { max-width: 100% !important; width: auto !important; height: auto !important; } #sysExplanation div.img_600b img { max-width: 80% !important; width: 80% !important; } #sysExplanation div.img_380 img { max-width: 80% !important; width: 80% !important; } /* 追加S_0018 */ #sysSubmit input { padding: 10px; text-indent: 0; height: auto; color: #fff; background: #dd8c86 none repeat scroll 0 0; border-radius: 3px; } #sysSubmit input:hover { cursor:pointer; padding-top: 10px; text-indent: 0; height: auto; background: #deb1ae none repeat scroll 0 0; border-radius: 3px; } #sysSubmit input[value="今は購入できません"] { padding-top: 10px; text-indent: 0; height: auto; background: #dd8c86 none repeat scroll 0 0; border-radius: 3px; } #sysSubmit input[value="今は購入できません"]:hover { cursor:pointer; padding-top: 10px; text-indent: 0; height: auto; background: #deb1ae none repeat scroll 0 0; border-radius: 3px; } .img_area { width: 90%; margin: 0 5%; } .img_area .sysMainImage img { width: 100%; } .sysItemImages .sysImageList li { width: 18.4%; height: auto; } .sysItemImages .sysImageList li:nth-child(3n+1), .sysItemImages .sysImageList li:nth-child(3n) { margin-left: 1%; margin-right: 1%; } .sysItemImages .sysImageList li:nth-child(5n+1) { margin-left: 0; } .sysItemImages .sysImageList li:nth-child(5n) { margin-right: 0; } .item_info { width: 80%; margin : 2rem 10%; } /* -- #page_top_ai { right: 0; bottom: 142px; z-index: 99999999; } #page_top_ai span { background: url(http://bathlier.sakura.ne.jp/bathlier/aishipr/img/materials/ico_s_top.png) no-repeat; } #page_top_ai span:hover { background: url(http://bathlier.sakura.ne.jp/bathlier/aishipr/img/materials/ico_s_top.png) no-repeat; } #login_sp, #cart_sp { display: block; z-index: 99999999; padding: 0; } #cart_sp { position: fixed; right: 0; bottom: 86px; } #cart_sp a { width: 50px; height: 50px; display: block; } #cart_sp span { width: 50px; height: 50px; display: inline-block; margin-bottom: 0px; background: url(http://bathlier.sakura.ne.jp/bathlier/aishipr/img/materials/ico_s_cart.png) no-repeat; } #login_sp { position: fixed; right: 0; bottom: 30px; } #login_sp a { width: 50px; display: block; } #login_sp span { width: 50px; height: 50px; display: block; margin-bottom: 0px; background: url(http://bathlier.sakura.ne.jp/bathlier/aishipr/img/materials/ico_s_login.png) no-repeat; } -- */ /* smp 追加S_0019 */ #page_top_ai { right: 0; bottom: 86px; z-index: 99999999; } #page_top_ai span { /* background: url(http://bathlier.sakura.ne.jp/bathlier/aishipr/img/materials/ico_s_top.png) no-repeat;*/ background: none; } #page_top_ai span:hover { /* background: url(http://bathlier.sakura.ne.jp/bathlier/aishipr/img/materials/ico_s_top.png) no-repeat;*/ background: none; } #login_sp, #cart_sp { display: block; z-index: 99999999; padding: 0; } #cart_sp { position: fixed; right: 0; bottom: 30px; } #cart_sp a { width: 50px; height: 50px; display: block; } #cart_sp span { width: 50px; height: 50px; display: inline-block; margin-bottom: 0px; /* background: url(http://bathlier.sakura.ne.jp/bathlier/aishipr/img/materials/ico_s_home.png) no-repeat;*/ background: none; } /* smp 追加S_0019 */ .h-sitelogo .sysContent { width: 100%; max-width: 100%; text-align: center; } /* 追加E_0018 */ /* 検索フォーム 追加S_0018 */ #sysMain .sysItemSearchForm { background-color: #eee; padding: 0; } #sysMain .sysItemSearchForm input[type="search"] { height: 28px; line-height: 0; border: solid 1px; } #sysItemSearch #sysMain form .sysItemSearchFormWord { display: inline-block; margin: 15px 15px 10px; width: 90%; } #sysItemSearch #sysMain form .sysItemSearchAndOr { display: inline-block; font-size: 80%; } #sysItemSearch #sysMain form .sysItemSearchAndOr input[type="radio"] { -webkit-transform: scale(0.8); transform: scale(0.8); margin-right: 0.1em; margin-left: 1.4em; vertical-align: middle; } #sysItemSearch #sysMain form .sysItemSearchFormRange { display: inline-block; font-size: 80%; margin-left: 15px; vertical-align: middle; } #sysItemSearch #sysMain form .sysItemSearchFormRange input { line-height: 0; height: 25px; } #sysItemSearch #sysMain form .sysItemSearchFormSort { display: inline-block; margin-left: 15px; } #sysItemSearch #sysMain form .sysSearchButton { display: inline-block; margin-left: 15px; width: 60px; border-radius: 5px; } #sysItemSearch #sysMain form .sysSearchButton:hover { cursor: pointer; } #sysItemSearch .sysItemListDisp label { font-size: 12px; margin: 25px 10px; } #sysItemSearch .sysItemListDisp .sysItemListViewType input[type="radio"] { -webkit-transform: scale(0.8); transform: scale(0.8); vertical-align: middle; } #sysItemSearch .sysItemList .sysList li { display: block; width: 100%; padding: 15px!important; margin: 0!important; } #sysItemSearch .sysItemList li:hover{ background-color:#f6f6f6; } #sysItemSearch .sysItemName{ font-size: 14px; height: 4.5em; line-height: 1.3em; margin: 15px 0 5px 0; overflow: hidden; text-align: left; } #sysItemSearch .sysRetailPrice { color: #a50d43; font-size: 11px; } /* 検索フォーム 追加E_0018 */ /* news_media start */ .news_media { position:relative; width:100%; clear:both; overflow:auto; scrolling font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } .news_media-L { float:none; width:100%; } #custom_bar { float: none; width: 100%; } .news_media-R { float: none; width:95%; margin: 40px 10px; } .news_media-R img { width:80%; display:block; margin: 0 auto; font-size:80%; } .news_media h3 { text-align:center; line-height:140%; font-size:1.2em; margin: 20px 0; } .list_info { /* overflow:auto; */ display:block; line-height:120%; height: 300px; font-size:90%; width:90%; margin:0 auto; } .list_info dt, .list_info dd { padding:3%; margin-right:3%; } .list_info dt { clear: both; float: left; width: 30%; /* 幅を指定 */ border-top: 1px solid #FFFFFF; padding-left:1%; /* dtの分、左にpaddingを取る */ } .list_info dd { padding-left: 33%; /* ddの分、左にpaddingを取る */ border-top: 1px solid #FFFFFF; border-bottom: 1px solid #666666; } /* news_media end */ #sysMypageReminder #sysMain input[type=submit], .sysNextSubmit, #sysMypageLogin #sysMain .sysLoginButton { width: 80% !important; } .header_btm_search{ width: 100% !important; } /* 共通フッタパーツレイアウトS_0018 */ .footer_area .footer_cat, .footer_area .footer_link, .footer_area .footer_about { padding-left: 120px; } @media only screen and (min-width: 481px) and (max-width: 780px) { nav.footer_main { width: 80%; margin-left: 80px; } .footer_area .footer_cat, .footer_area .footer_link, .footer_area .footer_about { padding-left: 8%; width: 33%; } } /* 共通フッタパーツレイアウトE_0018 */ .splendy_slide { display: none; } /* テーブルレスポンシブ（横スクロール） 追加S_0018 */ .smp_attention { display: block !important; padding: 0 0 10px 10px; } #sysExplanation .scrl_tbl td > img { width: 130px !important; } .scrl_tbl table { display: block; position: relative; } .scrl_tbl thead { display: block; float: left; } .scrl_tbl tbody { display: block; position: relative; width: auto; overflow-x: auto; white-space: nowrap; } .scrl_tbl td { display: block; height: 42px !important; border-left: none; border-top: none; } .scrl_tbl td:nth-child(2) { height: 155px !important; } .scrl_tbl thead th { display: block; width: 100px; height: 42px; } .scrl_tbl thead th:last-child { height: 43px; } .scrl_tbl thead th:first-child { height: 110px; } .scrl_tbl thead th:not(:last-child) { border-bottom: none; } .scrl_tbl thead th:nth-child(2) { height: 155px; } .scrl_tbl tbody tr { display: inline-block; } .scrl_tbl tbody th { height: 110px; border-left: none; } /* テーブルレスポンシブ（横スクロール） 追加E_0018 */ /* 画像サイズfix 追加S_0018*/ #sysExplanation img.width_half { width: 50% !important; } /* 画像サイズfix 追加E_0018*/ /* top 追加S_0019 */ /* --bathlier_original start-- */ .bathlier_original { position:relative; width:100%; clear:both; overflow:auto; scrolling font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding: 20px 0; } .bathlier_original-L { float:none; width:100%; } .bathlier_original-L img { width:100%; display:block; margin: 0 auto; } .bathlier_original-R { float: none; width:100%; margin: 0 auto; font-size:85%; } .bathlier_original-R img { display:block; margin:10px 0 0 0; } .bathlier_original h3 { text-align:left; line-height:140%; font-size:1.2em; margin-bottom: 20px; } .bathlier_original h4 { text-align:left; line-height:110%; font-size:1.2em; margin-bottom:6px; color:#666; } /* -- bathlier_original end-- */ /* --furokatsu start-- */ .furokatsu { position:relative; width:100%; clear:both; overflow:auto; scrolling font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding: 20px 0; } .furokatsu-L { float:none; width:100%; } .furokatsu-L img { width:100%; display:block; margin: 0 auto; } .furokatsu-R { float: none; width:100%; margin: 0 auto; } .furokatsu-R img { display:block; margin:10px 0 0 0; } .furokatsu h5 { text-align:left; line-height:140%; font-size:16px; margin-bottom:6px; color:#666; } .furokatsu h4 { text-align:right; font-size:11px; margin-bottom:0px; color:#bfbfbf; font-weight:lighter; } /* -- furokatsu end-- */ /* top 追加E_0019 */ /* ヘッダートップバナー 追加S_0019 */ /* --headbn start-- */ .headbn { width:100%; padding: 5px 0; } .headbn-L { float:none; width:100%; text-align:right; margin: 0 auto; } .headbn-L img { width:100%; display:block; margin: 0 0 1% 0; } .headbn-R { float: none; width:100%; margin: 0 auto; text-align:right; } .headbn-R img { width:100%; display:block; margin: 0 auto; } .collabo-text { display:none; } /* -- headbn end-- */ /* ヘッダートップバナー 追加E_0019 */ /* 追加S_0019 */ .hb76_t4 { text-align:left; color:#c23a16; margin:3% 0; font-size:16px; font-weight:bold; } /* --column2 start-- */ .column2 { width:100%; clear:both; overflow:auto; scrolling font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } .column2-L { float: none; width:100%; margin:10px 0 0 0; } .column2-L img { width:100%; display:block; margin:10px 0 0 0; } .column2-R { float: none; width:100%; margin:10px 0 0 0; } .column2-R img { width:100%; display:block; margin:10px 0 0 0; } .column2a-L { float: none; width:95%; color:#333333; text-decoration:none; display:block; height:100%; padding:2%; border:#CCC solid 1px; margin:10px 0 0 0; } .column2a-R { float: none; width:95%; color:#333333; text-decoration:none; display:block; height:100%; padding:2%; border:#CCC solid 1px; margin:10px 0 0 0; } .column2a_t { text-align:left; line-height:170%; font-size:20px; color:#535353; font-weight:bold; } /* -- column2 end-- */ /* 追加E_0019 */ /* カテゴリページ説明文レスポンシブ化S_0018 */ .sysCategoryDescription, .sysCategoryDescription table, .sysCategoryDescription p, .sysCategoryDescription div { max-width: 100% !important; border: none !important; } .sysCategoryDescription .img_items { border: #eee 1px solid !important; } .sysCategoryDescription tr, .sysCategoryDescription td { width: auto; height: auto; } .sysCategoryDescription img { max-width: 100% !important; height: auto !important; } /* カテゴリページ説明部分レスポンシブ化E_0018 */ /*--- お風呂レシピ楽天共通化aishipR専用cssS_0018 ---*/ .recipe-start p, .recipe-bg_b p { max-width: 100px !important; } div.recipe-start { border: #2776bd 1.5px solid !important; } .sysCategoryDescription div.box-gray { border: #ccc 1px solid !important; } .sysCategoryDescription div.att_box { border:1px dashed #dd0000 !important; } /*--- お風呂レシピ楽天共通化aishipR専用cssE_0018 ---*/ /* 商品ページ動画挿入 追加S_0019 */ .video{ position:relative; width: 70%; padding-top: 56.25%; margin: 12% auto; } .video iframe{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; } /* 商品ページ動画挿入 追加E_0019 */ } @media screen and (min-width:781px){ /* 30-0 Only PC *----------------------------------------------------------------------*/ /* 30-1 Header */ .h-siteinfo, .h-subMenu { margin: 0 auto; } .h-siteinfo { text-align: left;} /* 30-1-3 ドロップダウンメニュー */ .h-subMenu > .sysContent { display: block!important;} .h-subMenu > .sysHeadline { display: none;} .h-subMenu .sysAccordionInitialHide { position: absolute; bottom: 1px; right: 0; z-index: 999; width: 70%; background: transparent; } .h-subMenu ul { display: table; width: 100%; } .h-subMenu ul li { display: table-cell; width: auto!important; float: none; text-align: center; } .h-mainMenu nav { width: 70%; border-right: 1px solid; } .h-search .sysContent { width: 30%; position: absolute; top: -55px; height: 50px; right: 0; padding: 5px; } /* 32-9 トグル機能アニメーション */ .h-subMenu .sysAccordionInitialHide { opacity: 1;} /* 33-3-1 Aside Check List */ .s-checklist li > div { width: 90%; margin: 0 auto; } .s-checklist .sysContent .sysVertical .sysItemImage img { width: 100%; float: none; margin: 5px auto; } /* 34-4-1 Footer Site Map */ .f-sitemap .sysContent { width: 95%; margin: 0 auto; } /* 34-4-2 Page Top Btn */ .p-pagetop .sysContent { overflow: hidden; padding: 0 2px; width: 95%; margin: 0 auto; } .p-pagetop .btn { float: right; padding: 10px 20px; } } /* 0018_add Modal Window */ .sysModalContent .sysModalBody .sysModalMainImage { max-width: 760px; margin: 0 auto .2%; } .sysModalContent .sysModalBody .sysModalMainImage img { width: 100%; } .sysModalContent .sysModalBody .sysModalImageList { max-width: 760px; margin: auto; } .sysModalItemImages .sysModalImageList li { width: 10.75556%; height: 10.75556%; margin: .2%; line-height: 0; } .sysModalItemImages .sysModalImageList li:first-child { margin-left: 0; } .sysModalItemImages .sysModalImageList li:nth-child(9) { margin-right: 0; } @media only screen and (max-width: 780px) { .sysModalItemImages .sysModalImageList li { width: 19.2%; height: 19.2%; margin: .5%; } .sysModalItemImages .sysModalImageList li:nth-child(5n+1) { margin-left: 0; } .sysModalItemImages .sysModalImageList li:nth-child(5n) { margin-right: 0; } }