@charset "UTF-8"; /* ======================================================================= CSSの名前：style.css -------------------------------------------------------------------------- 1.リセット 2.基本設定 3.ヘッダー 4.トップページ 5.商品一覧 6.商品詳細 7.カート系 8.それ以外のページ 9.メッセージ 10.フッター 11.静的ページ（ご利用ガイド） 12.トピックス系ページ 13.お気に入り系ページ ======================================================================= */ /* ================================================================= 1.リセット 使用ファイル：すべてのファイル html5doctor.com Reset Stylesheet v1.6 Last Updated: 2010-08-18 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark =================================================================*/ html,body,div,span,object,iframe, h1,h2,h3,h4,h5,h6,p,blockquote,pre, abbr,address,cite,code, del,dfn,em,img,ins,kbd,q,samp, small,strong,sub,sup,var, b,i, dl,dt,dd,ol,ul,li, fieldset,form,label,legend, table,caption,tbody,tfoot,thead,tr,th,td, article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary, time,mark,audio,video{margin:0; padding:0; border:0; background:transparent; outline:0; font-size:100%; vertical-align:baseline;} input{padding:0;} body{line-height:1;} article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section{display:block;} li{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:''; content:none;} a{margin:0; padding:0; background:transparent; font-size:100%; vertical-align:baseline; -webkit-tap-highlight-color:rgba(0,0,0,0);} /* change colours to suit your needs -------------------------------------------------------------*/ ins{background-color:#ff9; color:#000; text-decoration:none;} /* change colours to suit your needs -------------------------------------------------------------*/ mark{background-color:#ff9; color:#000; font-style:italic; font-weight:bold;} del{text-decoration:line-through;} abbr[title], dfn[title]{border-bottom:1px dotted inherit; cursor:help;} table{border-collapse:collapse; border-spacing:0;} /* change border colour to suit your needs -------------------------------------------------------------*/ hr{display:block; height:1px; margin:1em 0; padding:0; border:0; border-top:1px solid #ccc;} input, select{vertical-align:middle;} /* ================================================================= 2.基本設定 使用ファイル：すべてのファイル =================================================================*/ html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing: grayscale;/* safariでopacityの操作をすると描画がちらつくのをおさえる */} body{font:13px/1.231 Verdana,Arial,"MS P Gothic","ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Osaka,sans-serif; *font:x-small; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica,sans-serif; -webkit-text-size-adjust:none; background-attachment:fixed; background-size:cover; position:relative; background-color:#efeee7; color:#333;} /* リンクスタイル -------------------------------------------------------------*/ a:link{color:#333; overflow: hidden; outline:none;} a:hover{text-decoration:underline; overflow: hidden; outline:none;} a:visited{color:#333; overflow: hidden; outline:none;} a:focus{text-decoration:none; overflow: hidden; outline:none;} /* Material iconsを利用 -------------------------------------------------------------*/ /* fallback */ @font-face{font-family:'Material Icons'; font-style:normal; font-weight:400; src:local('Material Icons'), local('MaterialIcons-Regular'), url(../../../../../s/materialicons/v14/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff) format('woff2');} .material-icons{font-family:'Material Icons'; font-weight:normal; font-style:normal; font-size:24px;　display:inline-block;　width:1em;　height:1em; line-height:1; text-transform:none; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; -moz-osx-font-smoothing:grayscale; font-feature-settings:'liga';} /* 背景が明るいとき用のアイコン色 */ .material-icons.md-dark{color:rgba(0, 0, 0, 0.54);} .material-icons.md-dark.md-inactive{color:rgba(0, 0, 0, 0.26);} /* 背景が暗いとき用のアイコン色 */ .material-icons.md-light{color:rgba(255, 255, 255, 1);} .material-icons.md-light.md-inactive{color:rgba(255, 255, 255, 0.3);} /* バッジ */ .icon-badge{height:auto;width:auto;position:absolute;left:40px;top:8px;padding: 0 6px; border-radius:50% ; background-color:#a30b1a ; color:#fff; font-size:11px;font-weight:normal;box-shadow: 0 1px 2px rgba(0,0,0,0.12);} .icon-badge-header{position:absolute;right:-8px;top:-8px;padding: 0 5px; border-radius:50% ; background-color:#a30b1a ; color:#fff; font-size:11px;font-weight:normal;line-height:1.6em; box-shadow: 0 1px 1px rgba(0,0,0,0.12);} /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ .icon-badge-header{position:absolute;right:0px;top:-10px;padding: 0 5px; border-radius:50% ; background-color:#a30b1a ; color:#fff; font-size:11px;font-weight:normal;line-height:1.6em;box-shadow: 0 1px 1px rgba(0,0,0,0.12);} } /* パン屑リストスタイル -------------------------------------------------------------*/ .breadcrumbs{width:100%; min-width:1020px;} .breadcrumbs .inner{width:1020px; margin:0 auto; padding:14px 5px 0 5px; font-size:11px; color:#333;} .breadcrumbs .inner a{color:#333;} .breadcrumbs .breadcrumb_arrow{color:#cfcfcf; display:inline-block; vertical-align:text-bottom; padding:0 1px;} .breadcrumbs.breadcrumb_bottom{display:none;} /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ .breadcrumbs{width:auto; min-width:768px;} .breadcrumbs .inner{width:758px;} } /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ .breadcrumbs{width:100%; padding:0 13px;} .breadcrumbs .inner{width:100%; margin:0 auto; padding:0; font-size:12px;} .breadcrumbs.breadcrumb_top{display:none;} .breadcrumbs.breadcrumb_bottom{display:block; min-width:initial; min-width:auto; margin:25px 0 0 0;} } /* イメージスタイル -------------------------------------------------------------*/ img{max-width:100%; vertical-align:top; display:block;} a img{-webkit-transition:0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;} a:hover img{opacity:0.6; filter:alpha(opacity=60);} /* 画像の縦横比調整 -------------------------------------------------------------*/ .img_box{text-align:center; position:relative;} .img_box img{width:auto; max-height:100% ;display:block; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; -moz-transition:-moz-transform 0.3s linear; -webkit-transition:-webkit-transform 0.3s linear; -o-transition:-o-transform 0.3s linear; -ms-transition:-ms-transform 0.3s linear; transition:transform 0.3s linear;} /* input系スタイル -------------------------------------------------------------*/ input:placeholder-shown{color:#ccc !important;}/* 標準色 */ input::-webkit-input-placeholder{color:#ccc !important;} input::-moz-placeholder{color:#ccc !important;} input:-moz-placeholder{color:#ccc !important;} input:-ms-input-placeholder{color:#ccc !important;} input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="search"],input[type="number"]{-webkit-appearance:none; height:36px; font-size:15px; padding:4px 8px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; background-color:#fff; -webkit-border-radius:0; border-radius:0; background-image:none; border:1px solid #ccc; -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;} input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="tel"]:focus,input[type="search"]:focus,input[type="number"]:focus{border-color:#66afe9; outline:0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);} /* ウィンドウ幅が0〜640pxの場合に適用するスタイル */ @media screen and (max-width:640px){ input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="search"],input[type="number"]{-webkit-appearance:none; width:100%; height:40px; font-size:13px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;} } /* selectスタイル -------------------------------------------------------------*/ select::-ms-expand{display:none;} /* ウィンドウ幅が641px以上の場合に適用するスタイル(PC,TB) */ @media screen and (min-width:641px){ select{margin:0;} } /* ウィンドウ幅が0〜640pxの場合に適用するスタイル(SP) */ @media screen and (max-width:640px){ select{-webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; background:#fff url(../images/common/icon_down_arrow.png) no-repeat 99% 50%; border:1px solid #ccc !important; font-size:13px; height:36px; min-height:36px !important; text-indent:.01px; text-overflow:''; padding:4px 10px; width:100%; -ms-background-size:8px 5px; -moz-background-size:8px 5px; -webkit-background-size:8px 5px; background-size:8px 5px;} } /* textareaスタイル -------------------------------------------------------------*/ textarea{-webkit-appearance:none; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; background-color: #fff; -webkit-border-radius:0; border-radius:0; background-image:none; border:1px solid #ccc; -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;} textarea:focus{border-color:#66afe9; outline:0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);} /* bootstrapスタイルの上書き -------------------------------------------------------------*/ .container{overflow:hidden;} .container .inner{background-color:#fff; min-height:450px; margin:auto;} .container .inner:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ .container.top{position:relative;} .container.top:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ .container.top .inner{background-color:inherit; min-height:initial; min-height:auto;} .container.list{padding:0;} .container.list .inner{background-color:inherit; min-height:initial; min-height:auto;} /* ボタン類 */ .btn{border:0; border-radius:2px; -webkit-transition:0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out; overflow:hidden; position:relative;} .btn:hover{opacity:0.6; filter:alpha(opacity=60); text-decoration:none !important;} .input_btn{overflow:hidden; position:relative; -webkit-transition:0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out; cursor: pointer;} .input_btn:hover{opacity:0.6; filter:alpha(opacity=60);} .input_btn input{border:0; border-radius:0; padding:11px 12px 12px 12px; font-size:14px;} .input_btn input:hover{text-decoration:none;} .input_btn .btn-primary{background-color:#a30b1a; color:#fff; -webkit-box-shadow:0px 2px 1px -1px rgba(133,1,14,1); -moz-box-shadow:0px 2px 1px -1px rgba(133,1,14,1); box-shadow:0px 2px 1px -1px rgba(133,1,14,1);} .input_btn .btn-link{background-color:#87867e; color:#fff; -webkit-box-shadow:0px 2px 1px -1px rgba(94,91,72,1); -moz-box-shadow:0px 2px 1px -1px rgba(94,91,72,1); box-shadow:0px 2px 1px -1px rgba(94,91,72,1);} /* ボタンのエフェクト要素、値の変更はエフェクト形体・サイズ・スピードに影響する */ .ripple__effect{ width:70px; height:70px; position:absolute; border-radius:100%; pointer-events:none; transform:scale(0); opacity:0; cursor: pointer;} /* ボタンのエフェクト要素の色を指定 */ .ripple__effect.is-white{background:#fff;} .ripple__effect.is-black{background:#000;} .ripple__effect.is-azmarche{background:#a30b1a;} /* classが付与されたらボタンアニメーションを実行 */ .ripple__effect.is-show{-webkit-animation:ripple 0.45s ease-out; -ms-animation:ripple 0.45s ease-out; animation:ripple 0.45s ease-out;} /* ボタンアニメーションの定義 */ @-webkit-keyframes ripple { from{opacity:1;} to{-webkit-transform:scale(2); -ms-transform:scale(2); transform:scale(2); opacity:0;} } @keyframes ripple { from{opacity:1;} to{-webkit-transform:scale(2); -ms-transform:scale(2); transform:scale(2); opacity:0;} } .btn.btn-primary{background-color:#a30b1a; color:#fff; -webkit-box-shadow:0px 2px 1px -1px rgba(133,1,14,1); -moz-box-shadow:0px 2px 1px -1px rgba(133,1,14,1); box-shadow:0px 2px 1px -1px rgba(133,1,14,1);} .btn.btn-link{background-color:#87867e; color:#fff; -webkit-box-shadow:0px 2px 1px -1px rgba(94,91,72,1); -moz-box-shadow:0px 2px 1px -1px rgba(94,91,72,1); box-shadow:0px 2px 1px -1px rgba(94,91,72,1); z-index:10;} .btn.disabled, .btn[disabled], fieldset[disabled] .btn{opacity:0.4;} /* フォーム類 */ .form-control{border:1px solid #dcdcdc; height:36px; padding:6px; font-size:15px; border-radius:0; -webkit-box-shadow:0 0 0 rgba(0, 0, 0, 0);; box-shadow:0 0 0 rgba(0, 0, 0, 0);} /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ .container{width:auto; min-width:768px;} .container .inner{width:758px;} } /* ウィンドウ幅が641px以上の場合に適用するスタイル(PC,TB) */ @media screen and (min-width:641px){ .container.list{overflow:inherit;} } /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ .container{width:100%; padding:0;} .container .inner{min-height:400px;} } /* アイコンスタイル -------------------------------------------------------------*/ .required_icon{background:#a30b1a; color:#fff; text-align:center; padding:2px 5px; font-size:12px;} /* 会員登録フロースタイル -------------------------------------------------------------*/ .regist_flow_box{margin:10px 0 20px; display:table; text-align:center; background:#fff; font-size:0; width:100%;} .regist_flow_box:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ .regist_flow_box li{width:184px; padding:11px 0 12px; display:inline-block; vertical-align:middle; font-size:14px; color:#a30b1a; border-top:1px solid #a30b1a; border-bottom:1px solid #a30b1a; border-right:1px solid #a30b1a;} .regist_flow_box li:first-child{border-left:1px solid #a30b1a;} .regist_flow_box li.here{background:#a30b1a; color:#FFF;} /* ウィンドウ幅が0〜640pxの場合に適用するスタイル(SP) */ @media screen and (max-width:640px){ .regist_flow_box{border:1px solid #a30b1a;} .regist_flow_box li{width:100%; padding:6px; font-size:12px; display:block; border:none; border-bottom:1px solid #a30b1a;} .regist_flow_box li:first-child{border-left:none;} .regist_flow_box li:last-child{border-bottom:none;} } /* カートフロースタイル -------------------------------------------------------------*/ .cart_flow_box{margin:10px 0 30px; display:table; text-align:center; background:#fff; font-size:0; width:100%;} .cart_flow_box:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ .cart_flow_box li{width:150px; padding:11px 0 12px; display:inline-block; vertical-align:middle; font-size:14px; color:#a30b1a; border-top:1px solid #a30b1a; border-bottom:1px solid #a30b1a; border-right:1px solid #a30b1a;} .cart_flow_box li:first-child{border-left:1px solid #a30b1a;} .cart_flow_box li.here{background:#a30b1a; color:#FFF;} /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ .cart_flow_box li{width:135px;} } /* ウィンドウ幅が0〜640pxの場合に適用するスタイル(SP) */ @media screen and (max-width:640px){ .cart_flow_box{border:1px solid #a30b1a;} .cart_flow_box li{width:100%; padding:6px; font-size:12px; display:block; border:none; border-bottom:1px solid #a30b1a;} .cart_flow_box li:first-child{border-left:none;} .cart_flow_box li:last-child{border-bottom:none;} } /* input_tableスタイル -------------------------------------------------------------*/ .input_table{width:100%; margin:0 !important; background:#efeee7;} .input_table th{width:25%; text-align:left;} .input_table th .required_icon{font-weight:normal;} .input_table th, .input_table td{padding:15px; border-bottom:1px solid #fff; vertical-align:middle;} .input_table td select{margin:0;} .input_table td textarea{height:70px;} .input_table td input[type="radio"], .input_table td input[type="checkbox"]{margin:0;} .input_table td .form_attention{margin:5px 0 0 0; clear:both;} .input_table #BIRTH_YEAR{width:80px;} .input_table #BIRTH_MONTH, .input_table #BIRTH_DAY{width:50px;} .input_table #PC_MAIL_CONFIRM1{width:130px;} .input_table #PC_MAIL_CONFIRM2{width:120px;} .input_table td .radio_box li{float:left; margin-right:10px;} .input_table td .radio_box li input[type="text"]{margin-right:10px;} .input_table td .radio_box li label{padding:0 0 0 6px;} .input_table td .radio_box .marks{margin:10px 10px 0 -10px;} .input_table td .radio_box:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ .input_table td .zip_box:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ .input_table td .zip_box li{float:left; margin-right:5px;} .input_table td .zip_box li input[type="button"]{padding:9px 6px;} /* ウィンドウ幅が0〜640pxの場合に適用するスタイル(SP) */ @media screen and (max-width:640px){ .input_table{display:table;} .input_table th{border-bottom:none;} .input_table th, .input_table td{padding:8px 10px; width:100%; display:block;} .input_table td [type="text"], .input_table td [type="password"], .input_table td select, .input_table td textarea{width:100%;} .input_table .HTMLFORM_ELEMENT, .input_table .HTMLFORM_LABEL_GROUP{display:block;} .input_table td input[type="radio"], .input_table td input[type="checkbox"]{-webkit-transform:scale(1.8); transform:scale(1.8); margin:0 10px;} .input_table td .radio_box li{line-height:2.5; margin-right:4px;} .input_table td .radio_box .marks{margin:6px 7px 0 -5px;} .input_table .secret_input select{margin-bottom:10px;} .input_table #BIRTH_YEAR{width:50px;} .input_table #BIRTH_MONTH, .input_table #BIRTH_DAY{width:30px;} .input_table #PC_MAIL_CONFIRM1{width:105px;} .input_table #PC_MAIL_CONFIRM2{width:105px;} .input_table td .zip_box li input[type="button"]{padding:9px 8px;} .input_table td textarea{width:100%;} } /* cartflow_tableスタイル -------------------------------------------------------------*/ .cartflow_table{width:100%; table-layout:fixed;} .cartflow_table th, .cartflow_table td{padding:10px; border:1px solid #ddd; word-break:break-all;} .cartflow_table th{background:#f4f4f4; width:13%; font-weight:normal;} .cartflow_table td{text-align:right;} .cartflow_table td:first-child{text-align:left;} /* ウィンドウ幅が0〜640pxの場合に適用するスタイル(SP) */ @media screen and (max-width:640px){ .cartflow_table{display:block; border:none; margin:0 0 20px;} .cartflow_table thead{display:block; float:left; overflow-x:scroll;} .cartflow_table tbody{display:block; width:auto; overflow-x:auto; white-space:nowrap;} .cartflow_table th{display:block; width:auto; border:none; padding-right:20px;} .cartflow_table tbody tr{display:inline-block; border:none;} .cartflow_table td{display:block; border:none; text-align:left; min-height:36px;} } /* history_tableスタイル -------------------------------------------------------------*/ .history_table{width:100%; table-layout:fixed;} .history_table th, .history_table td{padding:10px; border:1px solid #ddd; word-break:break-all;} .history_table th{background:#f4f4f4; width:13%; font-weight:normal;} .history_table td textarea{height:70px;} .history_table td .limit{text-align:center; margin:0; color:#a30b1a;} .history_table .mitsumori_button{width:1%;} .history_table .btn_area{vertical-align:middle;} .history_table td .input_btn{display:block; height:42px;} .history_table.pc_show{margin:5px 0 0;} .history_table.pc_show th{width:182px;} .history_table.pc_show td{width:840px; text-align:left;} .history_table .pc_show, .history_table.pc_show{display:block;} .history_table .sp_show{display:none;} .history_box{margin:0 0 26px;} .history_table.pc_only{display:block;} .history_table.sp_only{display:none;} .history_table .amount_ttl{width:5%;} .history_table .num_ttl{width:7%;} .history_table .kessai_ttl{width:12%;} /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ .history_table.pc_show th{width:134px;} } /* ウィンドウ幅が0〜640pxの場合に適用するスタイル(SP) */ @media screen and (max-width:640px){ .history_table{display:block; border:none; margin:0 0 20px;} .history_table thead{display:block; float:left; overflow-x:scroll;} .history_table tbody{display:block; width:auto; overflow-x:auto; white-space:nowrap;} .history_table th{display:block; width:auto; border:none; padding-right:20px;} .history_table tbody tr{display:inline-block; border:none;} .history_table td{display:block; border:none; text-align:left; min-height:36px;} .history_table td .input_btn{height:20px;} .history_table td .input_btn input{padding:2px 16px !important; font-size:12px;} .history_table .mitsumori_button{width:auto;} .history_table .pc_show, .history_table.pc_show{display:none;} .history_table .sp_show{display:block;} .history_table.pc_only{display:none;} .history_table.sp_only{display:block;} .history_table .amount_ttl{width:auto;} .history_table .num_ttl{width:auto;} .history_table .kessai_ttl{width:auto;} } /* contract_tableスタイル -------------------------------------------------------------*/ .contract_table{width:100%;} .contract_table th{background:#f4f4f4; width:8%; font-weight:normal; padding:10px; border:1px solid #ddd;} .contract_table td{text-align:right; padding:10px; border:1px solid #ddd;} .contract_table td.space_td{border-right:0 !important;} .contract_table td:first-child{text-align:left;} .contract_table td .limit{text-align:center; margin:0; color:#a30b1a;} .contract_table .btn_area{vertical-align:middle;} .contract_table td .btn{width:100%;} .contract_table.pc_show{margin:-1px 0 0;} .contract_table.pc_show th{width:auto;} .contract_table.pc_show td{text-align:left;} .contract_table .pc_show, .contract_table.pc_show{display:block;} .contract_table .sp_show{display:none;} .contract_table.pc_only{display:block;} .contract_table.sp_only{display:none;} /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ /*.contract_table.pc_show th{width:121px;}*/ } /* ウィンドウ幅が0〜640pxの場合に適用するスタイル(SP) */ @media screen and (max-width:640px){ .contract_table{display:block; border:none; margin:0 0 20px;} .contract_table thead{display:block; float:left; overflow-x:scroll;} .contract_table tbody{display:block; width:auto; overflow-x:auto; white-space:nowrap;} .contract_table th{display:block; width:auto; border:none; padding-right:20px;} .contract_table tbody tr{display:inline-block; border:none;} .contract_table td{display:block; border:none; text-align:left; min-height:36px;} .contract_table td .btn{padding:2px 16px !important; font-size:12px;} .contract_table .pc_show, .contract_table.pc_show{display:none;} .contract_table .sp_show{display:block;} .contract_table.pc_only{display:none;} .contract_table.sp_only{display:block;} } /* teiki_tableスタイル -------------------------------------------------------------*/ .teiki_table{width:100%;} .teiki_table th{width:25%; text-align:left; background:#f4f4f4; font-weight:normal;} .teiki_table th .required_icon{font-weight:normal;} .teiki_table th, .teiki_table td{padding:10px; border:1px solid #ddd;} .history_box .teiki_table{margin:10px 0 0 0;} /* ウィンドウ幅が0〜640pxの場合に適用するスタイル(SP) */ @media screen and (max-width:640px){ .teiki_table{display:table; border:none;} .teiki_table th{border-bottom:none;} .teiki_table th, .teiki_table td{padding:8px 0; width:100%; display:block; border:none;} .history_box .teiki_table{margin:0;} .history_box .teiki_table th{padding:8px 10px;} } /* ================================================================= 3.ヘッダー 使用ファイル：common/header.xhtml =================================================================*/ /* header - ヘッダー -------------------------------------------------------------*/ header p.preview{display:block; padding:5px; background:#1c8600; color:#fff; text-align:center;} header .header_top{width:100%; min-width:1020px; background-color:#fff; border-bottom:1px solid #dcdcdc;} header .header_top .inner{width:1020px; margin:0 auto; padding:14px 5px 16px;} header .header_top .inner:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ header .header_top h1{float:left;} header .header_top h1 a{display:block; background:url(../images/common/header_title.png) center no-repeat; text-indent:-9999px; -ms-background-size:158px 27px; -moz-background-size:158px 27px; -webkit-background-size:158px 27px; background-size:158px 27px; width:158px; height:27px; -webkit-transition:0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;} header .header_top h1:hover a{opacity:.6; filter:alpha(opacity=60);} header .header_top #sp_drawer, header .header_top #sp_search{display:none;} header .header_top .nav.navbar-nav{margin:7px 0 0 0; float:right;} header .header_top .nav.navbar-nav .guide{padding:0 39px 0 24px;} header .header_top .nav.navbar-nav .guide a:hover, header .header_top .nav.navbar-nav .guide a:focus{background-color:#fff !important;} header .header_top .nav.navbar-nav .contact{padding:0 0 0 27px;} header .header_top .nav.navbar-nav .contact a:hover, header .header_top .nav.navbar-nav .contact a:focus{background-color:#fff !important;} header .header_top .nav.navbar-nav .sns_fb{padding:0 19px 0 29px;} header .header_top .nav.navbar-nav .sns_tt{padding-right:16px;} header .header_top .nav.navbar-nav .blog_list.open a.dropdown-toggle{color:#a30b1a !important; background:url(../images/common/icon_down_arrow_hover.png) no-repeat 104px 7px;} header .header_top .nav.navbar-nav .about_list.open a.dropdown-toggle{color:#a30b1a !important; background:url(../images/common/icon_down_arrow_hover.png) no-repeat 101px 7px;} header .header_top .nav > li {font-size:14px; font-weight:bold;} header .header_top .nav > li > a{padding:0; color:#333;} header .header_top .nav > li > a:hover{color:#a30b1a;} header .header_top .nav .arrows_blog{background:url(../images/common/icon_down_arrow.png) no-repeat 104px 7px; padding-right:32px; color:#333;} header .header_top .nav .arrows_blog:hover{background:url(../images/common/icon_down_arrow_hover.png) no-repeat 104px 7px;} header .header_top .nav .arrows_about{background:url(../images/common/icon_down_arrow.png) no-repeat 101px 7px; padding-right:32px; color:#333;} header .header_top .nav .arrows_about:hover{background:url(../images/common/icon_down_arrow_hover.png) no-repeat 101px 7px;} header .header_top .nav .open > a, header .header_top .nav .open > a:hover, header .header_top .nav .open > a:focus{background-color:#fff !important; color:#a30b1a; border-color:none;} header .header_top .dropdown-menu{background:#57564f; width:271px; z-index:1000; padding:0; border:0; -webkit-box-shadow:0 0 0 rgba(0,0,0,0) !important; box-shadow:0 0 0 rgba(0,0,0,0) !important; -webkit-border-radius:0; border-radius:0; top:163%;} header .header_top .dropdown-menu ul{margin:8px 0;} header .header_top .dropdown-menu li{margin:0 10px; font-size:13px; display:block; border-bottom:1px solid #fff; font-weight:normal;} header .header_top .dropdown-menu li:last-child{border-bottom:none;} header .header_top .dropdown-menu li > a{color:#fff; line-height:44px; padding:0 5px; display:block;} header .header_top .dropdown-menu li > a:hover{background:#b1b1ac !important; color:#fff !important; text-decoration:none !important;} header .header_top .dropdown-menu.list1{width:240px !important;} header .header_top .dropdown-menu.list2{width:210px !important;} header .header_top .triangle{width:0; height:0; border:8px solid transparent; border-bottom:8px solid #57564f; position:absolute; top:-16px; left:18px;} header .header_bottom{width:100%; min-width:1020px; background-color:#f2f2f2; border-bottom:1px solid #dcdcdc; display:block;} header .header_bottom .inner{width:1020px; margin:0 auto; padding:0 5px; clear:both;} header .header_bottom .inner:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ header .header_bottom .drawer-toggle.pc_drawer_button{color:#333; float:left; font-weight:bold; font-size:16px; margin:12px 30px 7px 0; cursor:pointer;} header .header_bottom .drawer-toggle.pc_drawer_button:hover{cursor:pointer; color:#a30b1a;} header .header_bottom .drawer-toggle.pc_drawer_button.active{color:#a30b1a;} header .header_bottom .drawer-toggle.pc_drawer_button i{font-size:30px; vertical-align:middle; margin:-3px 3px 0 -2px;} header .header_bottom .search{float:left;} header .header_bottom .search .form-group{margin:7px 0;} header .header_bottom .search .form-group:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ header .header_bottom .search .form-group input{width:240px; float:left; border-right:none;} header .header_bottom .search .form-group button{height:36px;display:inline-block; margin-bottom:0; font-weight:normal; text-align:center; vertical-align:middle; touch-action:manipulation; cursor:pointer; background-image:none; border:0; white-space:nowrap; font-size:14px; line-height:1.42857143; border-radius:0; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; background-color:#a30b1a; color:#fff; float:left; padding:3px 5px 3px 6px; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; -webkit-transition:0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;} header .header_bottom .search .form-group button:hover{opacity:0.6; filter:alpha(opacity=60);} header .header_bottom .search .form-group button i{font-size:28px; vertical-align:middle;} header .header_bottom .search .form-group button #sp_name{display:none;} header .header_bottom .search .form-group button#newitem{margin-left:2px;} header .header_bottom .nav-main-in{float:right;} header .header_bottom .nav-main-in li{float:left; line-height:50px; font-weight:bold; font-size:14px; padding:0 12px;} header .header_bottom .nav-main-in li i{vertical-align:middle; margin:-3px 5px 0 0; font-size:20px;} header .header_bottom .nav-main-in li a{color:#333;} header .header_bottom .nav-main-in li a:hover{color:#a30b1a !important; text-decoration:none;} header .header_bottom .nav-main-in li.cart{background-color:#dcdcdc;position:relative;} /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ header .header_top .nav.navbar-nav .sns_fb, header .header_top .nav.navbar-nav .sns_tt, header .header_top .nav.navbar-nav .sns_gp{display:none;} header .header_top{width:auto; min-width:768px;} header .header_top .inner{width:768px;} header .header_top .nav .arrows_blog{padding-right:35px;} header .header_top .nav.navbar-nav .guide{padding:0 37px 0 24px;} header .header_top .nav .arrows_about{padding-right:26px;} .androidTb header .header_top .nav .arrows_about{padding-right:32px;} /* Androidタブレットのみ適用 */ header .header_bottom{width:auto; min-width:768px; display:block;} header .header_bottom .inner{width:768px;} header .header_bottom .drawer-toggle.pc_drawer_button{margin-right:20px;} header .header_bottom .search .form-group input{width:140px;} header .header_bottom .nav-main-in li{padding:0 8px;} } /* ウィンドウ幅が641px以上の場合に適用するスタイル(PC,TB) */ @media screen and (min-width:641px){ header .header_bottom{display:block !important;} /* SPのトグルの影響を受けないように641px以上は必ず表示 */ } /* ウィンドウ幅が0〜640pxの場合に適用するスタイル(SP) */ @media screen and (max-width:640px){ header{overflow:hidden; margin-bottom:43px;/* 固定した高さ分を下にマージン */} header .header_top{width:100%; min-width:initial; min-width:auto; padding:0; background-color:rgba(255, 255, 255, 0.9); border-bottom:1px solid #dcdcdc; position:fixed; left:0; top:0; z-index:1000;} header .header_top .inner{width:100%; padding:10px 13px 11px;} header .header_top h1{float:none; margin:auto; width:141px; margin-top:-3px;} header .header_top h1 a{-moz-background-size:141px 25px; -webkit-background-size:141px 25px; background-size:141px 25px; width:141px; height:25px;} header .header_top #sp_search{display:block; float:right; margin:-26px -3px -20px 0;} /* SP用検索アイコン */ header .header_top #sp_search:hover{cursor:pointer;} header .header_top #sp_search i{vertical-align:middle; font-size:31px;} header .header_top .nav.navbar-nav{display:none;} header .header_bottom{display:none; width:100%; min-width:initial; min-width:auto; padding:0; background-color:rgba(242, 242, 242, 0.9); border-bottom:none; position:fixed; left:0; top:44px; z-index:1000;} header .header_bottom .inner{width:100%; min-width:initial; min-width:auto; padding:0 13px;} header .header_bottom .pc_drawer_button{display:none;} header .header_bottom .search{float:none;} header .header_bottom .search .form-group{margin:15px 0; position:relative;} header .header_bottom .search .form-group input{width:100%; float:none;} header .header_bottom .search .form-group button{padding:10px 6px; width:45px; float:none; position:absolute; top:0; right:0; z-index:9999;} header .header_bottom .search .form-group button i{display:none;} header .header_bottom .search .form-group button #sp_name{display:block; font-size:14px;} header .header_bottom .nav-main-in{display:none;} } /* category - ドロワー商品カテゴリ（上書き） -------------------------------------------------------------*/ .drawer-header{display:none;} .drawer-left .drawer-main{left:-560px; top:0; height:100% !important;} /* IE9の時だけ重なり順がおかしくなるため左方向を調整 */ .drawer-left.drawer-open .drawer-main{left:0; top:0; height:100% !important;} /* IE9の時だけ重なり順がおかしくなるため左方向を調整 */ .drawer-default{/*width:466px;*/ height:100% !important; background-color:rgba(238,238,238,0.8);} .drawer-overlay-upper{background-color:rgba(0,0,0,0);} .drawer-nav.overScroll{height:100% !important;} .drawer-nav:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ /* ウィンドウ幅が641px以上の場合に適用するスタイル(PC,TB) */ @media screen and (min-width:641px){ .drawer-main.drawer-default{width:256px !important; box-shadow: 0 0 38px rgba(0,0,0,0.30), 0 0 12px rgba(0,0,0,0.22);} } /* ウィンドウ幅が1582px以上の場合に適用するスタイル(PC) */ @media screen and (min-width:1581px){ } #category .close-area{text-align:right; width:256px; background:rgba(239, 239, 239, 0.7); height:58px; padding-right:6px;border-bottom:solid 1px #dcdcdc;} #category .close-area:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #category .close-area .inner{float:left; margin:12px 6px 0 0 ; padding:0;} #category .close-area .inner:hover{cursor:pointer; color:#a30b1a;} #category .close-area i{font-size:40px; vertical-align:middle; } #category #mainlist_area{width:256px; height:100%; background:rgba(239, 239, 239, 0.8);} /* ドロワー商品カテゴリPC用スタイル */ #category #ac_menu_pc{clear:both; height:100%; display:block;} #category #ac_menu_pc li{display:block; line-height:44px; border-bottom:1px solid #dcdcdc; position:relative;} #category #ac_menu_pc li a{display:block; text-decoration:none; line-height:48px; padding:0 10px; color:#333;} #category #ac_menu_pc li.active_color a{background-color:#57564f; color:#fff;} #category #ac_menu_pc li a:hover{background:#57564f !important; text-decoration:none !important; color:#fff !important;} #category #ac_menu_pc li a:hover i{color:#fff !important;} #category #ac_menu_pc .slide_menu{display:none; border-top: 1px solid #dcdcdc;} #category #ac_menu_pc .slide_menu li:last-child{border-bottom:none;} /*#category #ac_menu_pc .slide_menu{z-index:2; position:fixed; top:0; left:256px; width:207px; height:100%; z-index:100; display:none; background:#57564f; padding:40px 0 0 10px; box-shadow:10px -15px 2px -9px rgba(166, 166, 166, 0.68); -webkit-box-shadow:10px -15px 2px -9px rgba(166, 166, 166, 0.68); -moz-box-shadow:10px -15px 2px -9px rgba(166, 166, 166, 0.68);}*/ #category #ac_menu_pc .slide_menu li a{background:#57564f; color:#fff; display:block;} #category #ac_menu_pc .slide_menu li a:hover{background:#b1b1ac !important; color:#fff !important; text-decoration:none !important;} #category #ac_menu_pc a.category_list{background:url(../images/common/icon_add.png) no-repeat 232px center !important; -ms-background-size:14px 14px !important; -moz-background-size:14px 14px !important; -webkit-background-size:14px 14px !important; background-size:14px 14px !important;} #category #ac_menu_pc a.category_list:hover{background:#57564f url(../images/common/icon_add_active.png) no-repeat 232px center !important; -ms-background-size:14px 14px !important; -moz-background-size:14px 14px !important; -webkit-background-size:14px 14px !important; background-size:14px 14px !important;} #category #ac_menu_pc a.active_remove{color:#333 !important; background:url(../images/common/icon_remove.png) no-repeat 232px center !important; -ms-background-size:14px 14px !important; -moz-background-size:14px 14px !important; -webkit-background-size:14px 14px !important; background-size:14px 14px !important;} #category #ac_menu_pc a.category_list.active_remove:hover{background:#57564f url(../images/common/icon_remove_active.png) no-repeat 232px center !important; -ms-background-size:14px 14px !important; -moz-background-size:14px 14px !important; -webkit-background-size:14px 14px !important; background-size:14px 14px !important;} #category #ac_menu_pc i{vertical-align:middle; font-size:20px; margin:-2px 8px 0 0;} #category #ac_menu_pc li.item_regist a{background:rgba(239, 239, 239, 0.9);} #category #ac_menu_pc li.item_log a{background:rgba(239, 239, 239, 0.9);} #category #ac_menu_pc .item_camp i{color:#8b8807; font-size:19px;} #category #ac_menu_pc .item_tri i{color:#1782db;} #category #ac_menu_pc .item_ict i{color:#e73440 !important;} #category #ac_menu_pc .item_secur i{color:#1782db !important; font-size:19px;} #category #ac_menu_pc .item_commu i{color:#c07000 !important;} #category #ac_menu_pc .item_solute i{color:#1ba12b !important;} #category #ac_menu_pc .item_industry_solute i{color:#706aba !important;} #category #ac_menu_pc .item_business_service i{color:#8b8807 !important; font-size:18px;} #category #ac_menu_pc .item_product i{color:#87867e; font-size:18px;} #category #ac_menu_pc .item_use i{font-size:18px;} #category #ac_menu_pc .item_other i{font-size:18px;} /* ドロワー商品カテゴリSP用スタイル */ #category #ac_menu_sp{clear:both; height:100%; display:none;} #category #ac_menu_sp li{display:block; line-height:44px; border-bottom:1px solid #dcdcdc; cursor:pointer; background-color:#FFFFFF;} #category #ac_menu_sp li a{display:block; text-decoration:none; line-height:54px; padding:0 0 0 10px; color:#333; font-size:14px;} #category #ac_menu_sp li a:hover{color:#333 !important;} #category #ac_menu_sp li.active{border-bottom:0;} #category #ac_menu_sp .drop_menu{display:none; border-top:1px solid #fff; border-bottom:0;} #category #ac_menu_sp .drop_menu li{background-color:#57564f;} #category #ac_menu_sp .drop_menu li a{color:#fff; padding-left:32px;} #category #ac_menu_sp .drop_menu li a:hover{color:#fff !important;} #category #ac_menu_sp li a.drop{background:url(../images/common/icon_add.png) no-repeat right center; margin-right:10px; -ms-background-size:14px 14px; -moz-background-size:14px 14px; -webkit-background-size:14px 14px; background-size:14px 14px;} #category #ac_menu_sp li a.drop.active_remove{background:url(../images/common/icon_remove.png) no-repeat right center; margin-right:10px; -ms-background-size:14px 14px; -moz-background-size:14px 14px; -webkit-background-size:14px 14px; background-size:14px 14px;} #category #ac_menu_sp i{vertical-align:middle; font-size:20px; margin:-2px 4px 0 0;} #category #ac_menu_sp li.item_wish a{background:#efeee7;} #category #ac_menu_sp li.item_cart a{background:#efeee7;} #category #ac_menu_sp li.item_regist a{background:#efeee7;} #category #ac_menu_sp li.item_log a{background:#efeee7;} #category #ac_menu_sp .item_camp i{color:#8b8807 !important; font-size:19px;} #category #ac_menu_sp .item_tri i{color:#1782db !important;} #category #ac_menu_sp .item_ict i{color:#e73440 !important;} #category #ac_menu_sp .item_secur i{color:#1782db !important; font-size:19px;} #category #ac_menu_sp .item_commu i{color:#c07000 !important;} #category #ac_menu_sp .item_solute i{color:#1ba12b !important;} #category #ac_menu_sp .item_industry_solute i{color:#706aba !important;} #category #ac_menu_sp .item_business_service i{color:#8b8807 !important; font-size:18px;} #category #ac_menu_sp .item_product i{color:#87867e !important; font-size:18px;} #category #ac_menu_sp .item_use i{color:#333 !important; font-size:18px;} #category #ac_menu_sp .item_other i{color:#333 !important; font-size:18px;} /* 下部情報エリアのスタイル */ #category .info_box{margin:28px 10px 20px;} #category .info_box h2{font-weight:normal; font-size:17px; margin:0 0 6px;} #category .info_box img{margin:0 0 9px;} #category .info_box .info_text{font-size:13px; margin:0 0 5px; line-height:1.4;} #category .info_box .sub_info_text{font-size:10px; line-height:1.4;} /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ .ie9 .drawer-main{display:block !important;} #category .close-area{display:none;} #category #mainlist_area{width:280px !important; background-color:#fff;} /* 幅の数値を変更 */ #category #ac_menu_pc{display:none;} #category #ac_menu_sp{display:block;} #hamburger_icon{font-size:30px; margin:8px 0 0 10px;} #clear_icon{display:none; z-index:9999; color:#fff; font-size:34px;} .drawer-default{width:280px !important;} /* 幅の数値を変更 */ .drawer-header{display:block; z-index:99999;} .drawer-header .sp_drawer_button{display:block; z-index:9999;} .drawer-main{background:rgba(239, 239, 239, 0.8);} .drawer-overlay-upper{background-color:rgba(0, 0, 0, 0.7);} .drawer-hamburger{width:40px; height:0px; padding:0;} .drawer-toggle.close-area{display:none;} .drawer-hamburger-icon, #category .drawer-hamburger-icon:before, .drawer-hamburger-icon:after{background-color:#fff;} .drawer-open .drawer-hamburger-icon{background-color:#fff !important;} /* 下部情報エリアのスタイル */ #category .info_box{margin:19px 10px 20px;} #category .info_box h2{font-weight:normal; font-size:15px;} #category .info_box .info_text{font-size:13px; margin:0 0 5px;} #category .info_box .info_text br{display:none;} #category .info_box .sub_info_text{font-size:12px;} } /* ================================================================= 4.トップページ 使用ファイル：top.xhtml =================================================================*/ /* keyword_box - 話題のキーワード -------------------------------------------------------------*/ #keyword_area{width:100%; min-width:1020px;} #keyword_area #keyword_box{width:1020px; margin:0 auto; padding:8px 5px;} #keyword_area #keyword_box:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #keyword_area #keyword_box dt{font-weight:normal; float:left; margin-top:7px; margin-right:23px; font-size:13px; padding-right:13px; background:url(../images/common/icon_arrow_mini_right.png) no-repeat right 3px; -ms-background-size:6px 10px; -moz-background-size:6px 10px; -webkit-background-size:6px 10px; background-size:6px 10px;} #keyword_area #keyword_box dd ul li{float:left; margin-right:16px; background-color:#fff; border:1px solid #d3d3d3; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; border-radius:2px;} #keyword_area #keyword_box dd ul li a{font-size:12px;color:#333;text-decoration:normal;background-color:#fff;} #keyword_area #keyword_box dd ul li a:hover{color:#000;text-decoration:normal;background-color:#dcdcdc;} /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ #keyword_area{width:auto; min-width:768px;} #keyword_area #keyword_box{width:768px;} #keyword_area #keyword_box dt{margin-right:8px;} #keyword_area #keyword_box dd ul li a{padding:4px 8px;} } /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ #keyword_area{display:none;} } /* bg_video, bg_still_img - 背景動画、静止画像 -------------------------------------------------------------*/ #bg_video{position:relative; margin:0; padding:0 0 25px;} .full-height{background-position:center center; background-repeat:no-repeat; min-height:550px; max-height:800px; width:100%; margin:0 auto; overflow:hidden; position:relative; display:block;} .video-bg{width:100%; height:800px; position:relative; background-attachment:fixed;} #video-bg-container{background-size:cover; position:absolute; left:0; top:0; z-index:0; overflow:hidden; width:100%; height:800px;} #background-video{background-size:cover; width:auto; height:auto; min-height:100%; min-width:100%;} .no-video{position:absolute; z-index:0; width:100%; height:100%; left:0; top:0;} #bg_still_img{display:none;} /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ #bg_video{display:none;} #bg_still_img{display:block; margin-bottom:20px;} } /* Mainvis - メインビジュアルスライダー(PC、TBのみ) -------------------------------------------------------------*/ #Mainvis{width:100%; min-width:1010px; position:relative; overflow:hidden; height:325px; clear:both;} #Mainvis #inner{max-width:1010px; margin:0 auto;} #Mainvis #mainvisual_main{position:relative; padding-top:280px;} #Mainvis #mainvisual_cont{position:absolute; left:0; top:0; width:100%; height:100%;} #Mainvis .slider{position:absolute; top:0; bottom:0; z-index:10; width:100%; padding-top:0;} #Mainvis .slider .slides{-moz-box-shadow:0 -1px 3px #CCC; -ms-box-shadow:0 -1px 3px #CCC; -webkit-box-shadow:0 -1px 3px #CCC; box-shadow:0 -1px 3px #CCC; overflow:hidden; background-color:#fff; height:280px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; border-top:1px solid #e3e2db; border-bottom:1px solid #e3e2db;} #Mainvis .slider .slides li{-webkit-box-shadow:none !important; -moz-box-shadow:none !important; -ms-box-shadow:none !important; box-shadow:none !important; position:relative;} #Mainvis .slider .slides li a{color:#333;} #Mainvis .slider .slides li a img{max-width:ini*tial; max-width:auto;} #Mainvis .slider .slides li .video{position:relative; height:280px; overflow:hidden; z-index:-1;} #Mainvis .slider .slides li .video iframe, #Mainvis .slider .slides li .video object, #Mainvis .slider .slides li .video embed{position:absolute; top:0; left:0; width:100%; height:100%;} #Mainvis .slider .flex-direction-nav{display:none;} #Mainvis .slider .flex-control-nav{width:100%; height:4.15%; position:absolute; text-align:center; z-index:10; top:106%;} #Mainvis .slider .flex-control-nav li{width:20px; height:12px; margin:0 1px; display:inline-block; zoom:1; *display:inline;} #Mainvis .slider .flex-control-paging li a{display:block; width:60%; height:100%; margin:0 auto; background:#b1b1ac; cursor:pointer; text-indent:-9999px; -webkit-border-radius:20px; -moz-border-radius:20px; -o-border-radius:20px; border-radius:20px;} #Mainvis .slider .flex-control-paging li a:hover{background:#a30b1a;} #Mainvis .slider .flex-control-paging li a.flex-active{background:#a30b1a; cursor:default;} #Mainvis .slider_left, #Mainvis .slider_right{border-top:1px solid #e3e2db; border-bottom:1px solid #e3e2db; background-color:#fff; position:absolute; top:0; bottom:0; width:100%; overflow:hidden; opacity:0.5;} #Mainvis .slider_left > div, #Mainvis .slider_right{-ms-filter:blur(5px); -webkit-filter:blur(5px); -moz-filter:blur(5px); -o-filter:blur(5px); filter:blur(5px);} #Mainvis .slider_left{left:-99.86721991%;} #Mainvis .slider_right{right:-99.86721991%;} /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ #Mainvis{width:auto; min-width:768px; height:248px;} #Mainvis #mainvisual_main{position:relative; padding-top:211px;} #Mainvis #inner{width:758px;} #Mainvis .slider .slides{height:211px;} #Mainvis .slider .slides li .video{height:211px;} } /* ウィンドウ幅が641px以上の場合に適用するスタイル(PC,TB) */ @media screen and (min-width:641px){ #Mainvis_sp, #loader-bg, #loader{display:none !important;} } /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ #Mainvis{display:none;} /* Mainvis_sp - メインビジュアルスライダー(SPのみ) -------------------------------------------------------------*/ #Mainvis_sp{visibility:hidden;} #Mainvis_sp.flexslider{background:#fff !important; border:none !important; -webkit-box-shadow:none !important; -moz-box-shadow:none !important; -o-box-shadow:none !important; box-shadow:none !important;} #Mainvis_sp .flex-direction-nav{z-index:0;} #Mainvis_sp.flexslider .slides{} #Mainvis_sp.flexslider .slides li{position:relative; margin:auto; max-width:100%; float:left !important;} #Mainvis_sp.flexslider .slides li img{margin:auto;} #Mainvis_sp.flexslider .slides li .caption{position:absolute; bottom:0; left:13px; background-color:#fff; margin:auto; min-width:100%;} #Mainvis_sp.flexslider .slides li .caption p{color:#333; font-size:12px; line-height:1.4; padding:4px 0;} #Mainvis_sp.flexslider .flex-control-paging{padding:15px 0 8px; text-align:center; background-color:#efeee7;} #Mainvis_sp.flexslider .flex-control-paging li{display:inline-block; margin:0 4.5px;} #Mainvis_sp.flexslider .flex-control-paging li a{display:block; width:10px; height:10px; margin:0 auto; background:#b1b1ac; cursor:pointer; text-indent:-9999px; -webkit-border-radius:20px; -moz-border-radius:20px; -o-border-radius:20px; border-radius:20px;} #Mainvis_sp.flexslider .flex-control-paging li a.flex-active{background:#a30b1a; cursor:default;} /* AZBOX */ #Mainvis_sp.flexslider .slides li .bnr_text_azbox{position:absolute; top:10px; left:15px;} #Mainvis_sp.flexslider .slides li .bnr_text_azbox p{margin-bottom: 7px; font-size: 12px; line-height: 1.2;} #Mainvis_sp.flexslider .slides li .bnr_text_azbox h2{font-size: 18px; line-height: 1.1;font-weight:bold;} /* AUTOCAD */ #Mainvis_sp.flexslider .slides li .bnr_text_box_autocad{position:absolute; top:15px; left:45px;} #Mainvis_sp.flexslider .slides li .bnr_text_box_autocad h2{font-size:20px; font-weight:bold; margin:0 0 0 15px;} #Mainvis_sp.flexslider .slides li .bnr_text_box_autocad .subTitle{font-size:14px; margin:2px 0 5px 15px;} #Mainvis_sp.flexslider .slides li .bnr_text_box_autocad .mainCatch{font-size:12px; margin:0px 0 10px 15px; width:155px;} #Mainvis_sp.flexslider .slides li .bnr_text_box_autocad .subCatch{font-size:12px; margin:0px 0 0 10px;} } /* important_info - 重要なお知らせ -------------------------------------------------------------*/ #important_info{margin-bottom:24px;} #important_info dl{border:2px solid #b22b30; color:#ae2734; font-size:16px; padding:16px 16px; background:#fff; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; border-radius:2px;} #important_info dl dt{float:left; font-weight:normal;} #important_info dl dd{margin-left:150px;} #important_info dl dd h2{padding:2px 0 7px;font-weight:bold;} #important_info dl dd .main_text{font-size:14px;} #important_info dl dd .main_text a{color:#ae2734;} #important_info i.material-icons.important{vertical-align:text-bottom;margin:-5px 6px 0 0;} /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ #important_info dl{padding:13px 18px;} } /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ #important_info dl{font-size:13px; padding:6px 6px 6px 6px;} #important_info dl dt{float:none;} #important_info dl dd{margin-left:0;} #important_info dl dd .main_text{font-size:11px;} #important_info i.material-icons.important{display:none;} } /* recommend-blog - おすすめランキングとおすすめブログ -------------------------------------------------------------*/ #recommend-blog{width:1010px; margin:0 auto; margin-bottom:30px;} #recommend-blog:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #recommend-blog > ul:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #recommend-blog li.box{width:320px; min-height:450px; margin:0 25px 30px 0; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.1s ease-out; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; border-radius:2px; background:#fff; float:left;} #recommend-blog li.box > a{display:block; padding:0; text-decoration:none;} #recommend-blog li.box > a:hover img{text-decoration:none !important; opacity:1 !important; filter:alpha(opacity=100) !important;} #recommend-blog li.box > a:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #recommend-blog li.box:nth-child(3n){margin:0 0 30px 0;} #recommend-blog li.box > a .head_ttl{padding:16px;} #recommend-blog li.box > a .head_ttl:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #recommend-blog li.box > a .head_ttl .icon_area{color:#fff; float:left; display:table-cell; text-align:center; vertical-align: middle;} #recommend-blog li.box > a .head_ttl .icon_area i{width:40px; height:40px; line-height:39px; text-align:center; vertical-align:middle; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%;} #recommend-blog li.box > a .head_ttl .icon_area i.item_blog{background:#a30b1a;} /* おすすめブログの色 */ #recommend-blog li.box > a .head_ttl .icon_area i.item_ict{background:#e73440;} /* ICT基盤・運用の色 */ #recommend-blog li.box > a .head_ttl .icon_area i.item_secur{background:#1782db;} /* セキュリティの色 */ #recommend-blog li.box > a .head_ttl .icon_area i.item_commu{background:#c07000;} /* コミュニケーション・情報共有の色 */ #recommend-blog li.box > a .head_ttl .icon_area i.item_solute{background:#1ba12b;} /* 業務ソリューションの色 */ #recommend-blog li.box > a .head_ttl .icon_area i.item_industry_solute{background:#706aba;} /* 業種別ソリューションの色 */ #recommend-blog li.box > a .head_ttl .icon_area i.item_business_service{background:#8b8807;} /* ビジネスサービスの色 */ #recommend-blog li.box > a .head_ttl .icon_area i.item_product{background:#87867e;} /* 製品の色 */ #recommend-blog li.box > a .head_ttl h2{margin-left:47px; padding:1px 0 0 0; line-height:1.3; font-size:16px; font-weight:bold; height:40px; overflow:hidden;} #recommend-blog li.box > a:hover .head_ttl h2{color:#a30b1a;} #recommend-blog li.box > a .img_box{height:180px; overflow:hidden; clear:both; position:relative;} #recommend-blog li.box > a .img_box img{max-height:none;} #recommend-blog li.box > a .blog_keyword{position:absolute; bottom:5px; left:16px;} #recommend-blog li.box > a .blog_keyword li{float:left; margin-right:10px; font-size:10px; background-color:rgba(50,50,50, 0.8); color:#fff; padding:2px 9px;} #recommend-blog li.box > a h3{position:absolute; bottom:0; left:0; font-size:13px; padding:7px 16px; width:100%; text-align:left; color:#fff;} #recommend-blog li.box > a h3.bg_ict{background-color:rgba(231, 52, 52, 0.9);} /* ICT基盤・運用の色 */ #recommend-blog li.box > a h3.bg_secur{background-color:rgba(23, 130, 219, 0.9);} /* セキュリティの色 */ #recommend-blog li.box > a h3.bg_commu{background-color:rgba(192, 112, 0, 0.9);} /* コミュニケーション・情報共有の色 */ #recommend-blog li.box > a h3.bg_solute{background-color:rgba(27, 161, 43, 0.9);} /* 業務ソリューションの色 */ #recommend-blog li.box > a h3.bg_industry_solute{background-color:rgba(112, 106, 186, 0.9);} /* 業務別ソリューションの色 */ #recommend-blog li.box > a h3.bg_business_service{background-color:rgba(139, 136, 7, 0.9);} /* ビジネスサービスの色 */ #recommend-blog li.box > a h3.bg_product{background-color:rgba(135, 134, 126, 0.9);} /* 製品の色 */ #recommend-blog li.box > a .text_overflow{font-size:13px; overflow:hidden; line-height:1.5;} #recommend-blog li.box > a .box_discription{padding:16px 16px 8px 16px;} #recommend-blog li.box > a .blog_date{font-size:12px; margin:6px 0 0 0;} #recommend-blog li.box > a .offer{margin: 8px 16px 0 0; color:#828282; font-size:13px; font-weight:bold;text-align:right;} #recommend-blog li.box > a .item_bottom{margin: 8px 16px 8px 16px;} #recommend-blog li.box > a .item_bottom:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #recommend-blog li.box > a .item_bottom dl{float:left; margin:0;} #recommend-blog li.box > a .item_bottom dl:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #recommend-blog li.box > a .item_bottom dl dt{float:left;} #recommend-blog li.box > a .item_bottom dl dt img{width:40px; height:40px;border-radius: 50%;} #recommend-blog li.box > a .item_bottom dl dd{font-size:15px; float:left; padding:12px 0 0 12px;} #recommend-blog li.box > a .item_bottom .under_blog_link{margin:12px 0 12px 0; font-size:14px; float:right; background:url(../images/common/icon_footer_arrow.png) no-repeat left 4px; padding-left:11px; -ms-background-size:5px 8px; -moz-background-size:5px 8px; -webkit-background-size:5px 8px; background-size:5px 8px;} #recommend-blog li.box > a .item_bottom .under_blog_link:hover{cursor:pointer; text-decoration:none !important; opacity:0.6; filter:alpha(opacity=60); -webkit-transition:0.1s ease-in-out; -moz-transition: 0.1s ease-in-out; -o-transition:0.1s ease-in-out; transition:0.1s ease-in-out;} #recommend-blog li.box .item_info_bottom{margin:8px 16px 8px 16px;} #recommend-blog li.box .item_info_bottom:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #recommend-blog li.box .item_info_bottom .under_item_link{margin:12px 0 12px 0; float:right; font-size:14px; float:right; background:url(../images/common/icon_footer_arrow.png) no-repeat left 4px; padding-left:11px; -ms-background-size:5px 8px; -moz-background-size:5px 8px; -webkit-background-size:5px 8px; background-size:5px 8px;} #recommend-blog li.box .item_info_bottom .under_item_link a:hover{text-decoration:none; opacity:0.6; filter:alpha(opacity=60); -webkit-transition:0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;} #recommend-blog li.box .item_info_bottom .buttonarea{float:left;margin-top:4px} #recommend-blog li.box .item_info_bottom .buttonarea a{background:#1782db; font-size:12px; color:#fff; padding:8px 16px 8px 16px; box-shadow:0px 0px 0px 0px rgba(16, 93, 156, 0.8); -moz-box-shadow:0px 0px 0px 0px rgba(16, 93, 156, 0.8); -webkit-box-shadow:0px 0px 0px 0px rgba(16, 93, 156, 0.8);} #recommend-blog li.box .item_info_bottom .buttonarea a:hover{text-decoration:none; opacity:0.6; filter:alpha(opacity=60); -webkit-transition:0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;} #recommend-blog li.box .item_info_bottom .btn{height:32px; line-height:1.2;} /* ウィンドウ幅が641px以上の場合に適用するスタイル(PC,TB) */ @media screen and (min-width:641px){ #recommend-blog li.box{position:relative;} #recommend-blog li.box > a .item_bottom{position:absolute;bottom:0;width:288px;} #recommend-blog li.box .item_info_bottom{position:absolute;bottom:0;width:288px;} /* カードレイアウトのhover時 */ #recommend-blog li.box:hover{ box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); -webkit-transition:all 0.1s ease-out; -moz-transition:all 0.1s ease-out; -o-transition:all 0.1s ease-out; transition:all 0.1s ease-out; -webkit-transform:scale(1.03); -moz-transform:scale(1.03); -ms-transform:scale(1.03); transform:scale(1.03);} } /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ #recommend-blog li.box{position:relative;} #recommend-blog li.box > a .item_bottom{position:absolute;bottom:0;} #recommend-blog{width:758px;} #recommend-blog > ul{width:665px; margin:auto;} #recommend-blog li.box:nth-child(3n){margin:0 25px 30px 0;} #recommend-blog li.box:nth-child(2n){margin:0 0 30px 0;} /* カードレイアウトのhover時 */ #recommend-blog li.box:hover{ box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); -webkit-transition:all 0.1s ease-out; -moz-transition:all 0.1s ease-out; -o-transition:all 0.1s ease-out; transition:all 0.1s ease-out; -webkit-transform:scale(1.03); -moz-transform:scale(1.03); -ms-transform:scale(1.03); transform:scale(1.03);} } /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ #important_info{margin-bottom:20px;} #recommend-blog{margin-bottom:11px; width:auto;} #recommend-blog li.box{width:100%; min-height:initial; min-height:auto; box-shadow:none; -webkit-border-radius:0; -moz-border-radius:0; -o-border-radius:0; border-radius:0;} #recommend-blog li.box:nth-child(1n){margin:0 0 16px;} #recommend-blog li.box > a{width:100%; min-height:initial; min-height:auto;} #recommend-blog li.box > a .img_box img:hover{-webkit-transform:scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform:scale(1); transform:scale(1);} #recommend-blog li.box > a .text_overflow{font-size:14px;overflow:auto; height:auto; line-height:1.5;} #recommend-blog li.box > a .box_discription{padding:16px 16px 8px 16px;} #recommend-blog li.box > a .blog_date{margin:10px 16px 0 16px;} #recommend-blog li.box > a .offer{margin:8px 16px 0 0; font-weight:bold;text-align:right;} #recommend-blog li.box > a .blog_keyword li{white-space:nowrap;} #recommend-blog li.box > a .item_bottom dl dd{font-size:14px;} #recommend-blog li.box > a .item_bottom{margin: 16px;} #recommend-blog li.box .item_info_bottom .buttonarea a{padding:8px 16px 8px 16px;} #recommend-blog li.box .item_info_bottom .under_item_link{margin:12px 0 12px 0;} } /* topics - 新着情報 -------------------------------------------------------------*/ #topics{margin:0 auto 61px auto; clear:both; width:1020px; padding:0 5px;} #topics h2{float:left; font-size:22px; padding:0 0 3px 0; margin-bottom:8px;} #topics h2 i{vertical-align:bottom; margin-right:5px; font-size:27px;color:#a30b1a;} #topics .more_link{font-size:14px; margin:16px 10px 0 0; float:right; background:url(../images/common/icon_footer_arrow.png) no-repeat left 4px; -ms-background-size:5px 8px; -moz-background-size:5px 8px; -webkit-background-size:5px 8px; background-size:5px 8px;} #topics .more_link a{color:#414141; padding-left:11px;} #topics .box{clear:both; padding:12px 9px; color:#414141; border-bottom:1px solid #dcdcdc;} #topics .box:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #topics .box h3{float:left; font-size:14px;} #topics .box p{margin:0 0 0 132px; font-size:15px;} /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ #topics{width:768px; min-width:768px;} #topics .more_link{margin-right:0;} } /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ #topics{width:100%; padding:0;} #topics h2{font-size:20px; margin:0 13px; border-bottom:1px solid #a30b1a;} #topics .more_link{margin:10px 13px 0 0;} #topics .box{padding:8px 0;} #topics .box h3{float:none; margin:6px 13px 0 13px; font-size:12px;} #topics .box p{margin:6px 13px 0 13px; font-size:13px;} } /* info_bnr_area - バナーエリアとFacebookタイムライン -------------------------------------------------------------*/ #info_bnr_area{margin:0 auto 61px auto; clear:both; width:1020px; padding:0 5px;} #info_bnr_area:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #info_bnr_area .fb_box{float:left; width:500px;} #info_bnr_area .bnr_pc_list_box{float:right; width:480px;} #info_bnr_area .bnr_sp_list_box{display:none;} #info_bnr_area .bnr_sp_supporters{display:none;} #info_bnr_area .left_box{width:230px; float:left; padding-bottom:20px;} #info_bnr_area .left_box li{padding-bottom:20px;} #info_bnr_area .left_box li:last-child{padding-bottom:0;} #info_bnr_area .right_box{width:230px; float:right; padding-bottom:20px;} #info_bnr_area .right_box li{padding-bottom:20px;} #info_bnr_area .right_box li:last-child{padding-bottom:0;} #info_bnr_area .under_box{clear:both;} #info_bnr_area .under_box li{float:left; padding-right:20px;} #info_bnr_area .under_box li:last-child{padding-right:0;} #info_bnr_area #supporters{clear:both;} #info_bnr_area h2{float:left;font-size:22px; margin-bottom:16px;margin-top:60px;} #info_bnr_area h2 i{vertical-align:bottom; margin-right:5px; font-size:27px;color:#a30b1a;} #info_bnr_area .bnr_supporters_box{clear:both;} #info_bnr_area ul.supporters_box{display:table;margin-top:60px;} #info_bnr_area .supporters_box li {display: table-cell;padding: 0px 15px;text-align: center;width: 510px;} #info_bnr_area .supporters_box li img {width:100%;height:auto;} /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ #info_bnr_area{width:768px; min-width:768px;} #info_bnr_area .bnr_pc_list_box{width:230px;} #info_bnr_area .left_box{float:right;} #info_bnr_area .under_box li{padding-right:34px;} } /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ #info_bnr_area{width:100%; margin:0 auto; padding:0 13px;} #info_bnr_area .fb_box{display:none;} #info_bnr_area .bnr_pc_list_box{display:none;} #info_bnr_area .under_box{display:none;} #info_bnr_area #supporters{display:none;} #info_bnr_area .bnr_sp_supporters{display:block;} #info_bnr_area .bnr_sp_supporters li{margin-top:10px;} #info_bnr_area .bnr_sp_list_box{display:block;} #info_bnr_area .bnr_sp_list_box ul{zoom:1;} #info_bnr_area .bnr_sp_list_box ul:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #info_bnr_area .bnr_sp_list_box ul a{display:block; text-decoration:none;} #info_bnr_area .bnr_sp_list_box li{float:left; width:50%; display:block; margin-bottom:10px;} #info_bnr_area .bnr_sp_list_box li .box{margin:0px 5.5px 0 0;} #info_bnr_area .bnr_sp_list_box li:nth-child(even) .box{margin-right:0; margin-left:5.5px} #info_bnr_area .bnr_sp_list_box li a:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #info_bnr_area .bnr_sp_list_box li img{display:block; margin:0 auto; width:100%;} } /* ================================================================= 5.商品一覧 使用ファイル：item_list$simple.xhtml,item_list$image.xhtml =================================================================*/ /* category_html - カテゴリHTML -------------------------------------------------------------*/ #category_html{width:100%; min-width:1020px; margin:15px 0 40px; background-color:#fff;} #category_html .inner{width:1020px; margin:0 auto; padding:20px 5px;} #category_html .category_explain{margin:10px 0; line-height:1.5;} #category_html .category_html_area{margin:10px 0; line-height:1.5;} #category_html .category_area{margin-bottom:60px;} /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ #category_html{width:auto; min-width:768px;} #category_html .inner{width:768px;} } /* ウィンドウ幅が0〜640pxの場合に適用するスタイル(SP) */ @media screen and (max-width:640px){ #category_html{width:100%; min-width:initial; min-width:auto; margin:0 0 20px; background-color:inherit;} #category_html .inner{width:100%; padding:0;} #category_html .category_explain{margin:10px 13px;} #category_html .category_html_area{margin:10px 13px;} #category_html .category_area{margin-bottom:-10px;} } /* refine_search_pc - 絞り込みカテゴリ -------------------------------------------------------------*/ /* ウィンドウ幅が641px以上の場合に適用するスタイル(PC,TB) */ @media screen and (min-width:641px){ #refine_search_sp{display:none;} #refine_search_pc{display:block;} #refine_search_pc .category_narrow_box{clear:both; margin:0 0 30px 5px;} #refine_search_pc .category_narrow_box:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #refine_search_pc .category_narrow_box dt{font-size:18px; font-weight:normal; margin-bottom:8px;} #refine_search_pc .category_narrow_box dt i{font-size:24px; vertical-align:middle; padding-right:9px;} #refine_search_pc .category_narrow_box dd ul li{float:left; font-size:14px; margin:0 1px 1px 0;} #refine_search_pc .category_narrow_box dd ul li i{color:#ccc; font-size:15px; font-weight:bold; padding-right:1px;} .androidTb #refine_search_pc .category_narrow_box dd ul li i{vertical-align:middle;} #refine_search_pc .category_narrow_box dd ul li a{display:block; background-color:#ebebe6; width:142px; height:34px; line-height:34px; padding:0 6px;} #refine_search_pc .category_narrow_box dd ul li a:hover{background-color:#a30b1a; color:#fff !important; text-decoration:none;} #refine_search_pc .category_narrow_box dd ul li .select{display:block; background-color:#a30b1a; width:142px; height:34px; line-height:34px; padding:0 6px; color:#fff !important; font-weight:bold;} #refine_search_pc .category_narrow_box dd ul li .select .material-icons{color:#fff !important;} /* 通常カテゴリ */ #category_narrow_box_area{} #category_narrow_box_area:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;} /* clearfix */ #category_narrow_box_area .category_narrow_box{clear:both; margin:0 0 30px 5px;} #category_narrow_box_area .category_narrow_box:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;} /* clearfix */ #category_narrow_box_area .category_narrow_box .category_drop.item_use{cursor:default !important; font-size:18px; font-weight:normal; margin-bottom:8px; display:block;} #category_narrow_box_area .category_narrow_box .category_drop.item_use:hover{text-decoration:none !important;} #category_narrow_box_area .category_narrow_box .category_drop.item_use i{font-size:26px; vertical-align:middle; padding-right:6px;} #category_narrow_box_area .category_narrow_box .category_drop_menu{display:table;} #category_narrow_box_area .category_narrow_box .category_drop_menu:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;} /* clearfix */ #category_narrow_box_area .category_narrow_box .category_drop_menu li{float:left; background-color:#ebebe6; font-size:14px; margin:0 1px 1px 0;} #category_narrow_box_area .category_narrow_box .category_drop_menu li a{background:url(../images/icon_category_arrow.png) no-repeat 9px center; display:block; background-color:#ebebe6; width:142px; padding:10px 0 10px 22px; line-height:1; vertical-align:middle; display:table-cell;} #category_narrow_box_area .category_narrow_box .category_drop_menu li a:hover{background:url(../images/icon_category_arrow_active.png) no-repeat 9px center; background-color:#a30b1a; color:#fff !important; text-decoration:none;} #category_narrow_box_area .category_narrow_box .category_drop_menu li a.select{background:url(../images/icon_category_arrow_active.png) no-repeat 9px center; display:block; background-color:#a30b1a; width:142px; color:#fff !important; font-weight:bold; padding:10px 0 10px 22px; line-height:1; vertical-align:middle; display:table-cell; cursor:default;} } /* ウィンドウ幅が0〜640pxの場合に適用するスタイル(SP) */ @media screen and (max-width:640px){ #refine_search_pc{display:none;} #refine_search_sp{display:block;} #refine_search_sp .category_narrow_box{margin:15px 13px 0 13px; box-shadow:0px 1px 3px -1px #b8b8b8; -moz-box-shadow:0px 1px 3px -1px #b8b8b8; -webkit-box-shadow:0px 1px 3px -1px #b8b8b8;} #refine_search_sp .category_narrow_box ul{width:100%;} #refine_search_sp .category_narrow_box li{display:block; line-height:45px; cursor:pointer; background-color:#FFFFFF;} #refine_search_sp .category_narrow_box li a{display:block; text-decoration:none; height:45px !important; line-height:45px; padding:0 0 0 10px; color:#333; font-size:15px;} #refine_search_sp .category_narrow_box li a:hover{color:#333 !important;} #refine_search_sp .category_narrow_box li.active{border-bottom:0;} #refine_search_sp .category_narrow_box .category_drop_menu{display:none; border-top:1px solid #fff; border-bottom:0;} #refine_search_sp .category_narrow_box .category_drop_menu li{background-color:#57564f; border-bottom:1px solid #dcdcdc;} #refine_search_sp .category_narrow_box .category_drop_menu li a{color:#fff; display:block;} #refine_search_sp .category_narrow_box .category_drop_menu li a:hover{color:#fff !important;} #refine_search_sp .category_narrow_box .category_drop_menu li:last-child{border-bottom:0;} #refine_search_sp .category_narrow_box li a.category_drop{background:url(../images/common/icon_add.png) no-repeat right center; height:45px !important; margin-right:10px; -ms-background-size:14px 14px; -moz-background-size:14px 14px; -webkit-background-size:14px 14px; background-size:14px 14px;} #refine_search_sp .category_narrow_box li a.category_drop.active_remove{background:url(../images/common/icon_remove.png) no-repeat right center; margin-right:10px; -ms-background-size:14px 14px; -moz-background-size:14px 14px; -webkit-background-size:14px 14px; background-size:14px 14px;} #refine_search_sp .category_narrow_box li .select{color:#fff; font-size:15px; font-weight:bold; padding-left:12px; background:#a30b1a; display:block;} #refine_search_sp .category_narrow_box i{vertical-align:middle;} #refine_search_sp .category_narrow_box .item_use i{font-size:26px; margin:-2px 4px 0 0;} #refine_search_sp .category_narrow_box .item_other i{font-size:23px; margin:-2px 5px 0 1px;} } /* pager_area - ページャ箇所 -------------------------------------------------------------*/ .pager_area{width:100%; min-width:1020px;} .pager_area .inner{width:1010px; margin:0 auto; padding:0 10px; background-color:#d5d3c0;} .pager_area .inner:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ .pager_area .pageguide{float:left; font-size:14px; margin:11px 0 8px;} .pager_area .rearrange{float:right; font-size:14px; color:#424242;} .pager_area .rearrange p{display:inline-block; margin-top:11px;} .pager_area .rearrange select{width:auto; margin:0 0 5px 7px;} .pager_area .rearrange:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ .pager_area .pagelink{padding:0 0 7px 0; clear:both; font-size:14px;} .pager_area .pagelink a{color:#333;} .pager_area .pagelink .current{color:#fff; background-color:#a30b1a; display:inline-block; padding:0 5px 0 4px; line-height:1.5;} .pager_area .pagelink #SEARCH_MAX_ROW_LIST{margin:0 0 0 10px;} /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ .pager_area{width:auto; min-width:768px;} .pager_area .inner{width:768px;} } /* ウィンドウ幅が0〜640pxの場合に適用するスタイル(SP) */ @media screen and (max-width:640px){ .pager_area{width:100%; min-width:initial; min-width:auto; padding:0;} .pager_area .inner{width:auto; padding:4px 0;} .pager_area .inner:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ .pager_area .pageguide{float:none; font-size:10px; padding:0 13px; margin:0 0 7px 0; color:#151515;} .pager_area .rearrange{float:none; font-size:14px; padding:0 13px;} .pager_area .rearrange p{float:left; margin-top:6px;} .pager_area .rearrange select{width:77%; float:right; margin:0 0 0 7px; height:28px !important; min-height:28px !important;} .pager_area .pagelink{padding:0 13px; margin:12px 0 8px; clear:both; font-size:14px;} .pager_area .pagelink a{font-size:13px;} .pager_area .pagelink #SEARCH_MAX_ROW_LIST{display:none;} } /* pager_mitsumori_area - ページャ箇所（見積もり） -------------------------------------------------------------*/ .pager_mitsumori_area{clear:both;} .pager_mitsumori_area .mitsumori_inner{margin:20px 0; padding:0 10px; background-color:#d5d3c0;} .pager_mitsumori_area .mitsumori_inner:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ .pager_mitsumori_area .pageguide{float:left; font-size:14px; margin:11px 0 8px;} .pager_mitsumori_area .rearrange{float:right; font-size:14px; color:#424242;} .pager_mitsumori_area .rearrange p{display:inline-block; margin-top:11px;} .pager_mitsumori_area .rearrange select{width:auto; margin:0 0 5px 7px;} .pager_mitsumori_area .rearrange:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ .pager_mitsumori_area .pagelink{padding:0 0 7px 0; clear:both; font-size:14px;} .pager_mitsumori_area .pagelink a{color:#333;} .pager_mitsumori_area .pagelink .current{color:#fff; background-color:#a30b1a; display:inline-block; padding:0 5px 0 4px; line-height:1.5;} .pager_mitsumori_area .pagelink #SEARCH_MAX_ROW_LIST{margin:0 0 0 10px;} /* ウィンドウ幅が0〜640pxの場合に適用するスタイル(SP) */ @media screen and (max-width:640px){ .pager_mitsumori_area{width:100%; min-width:initial; min-width:auto; padding:0;} .pager_mitsumori_area .mitsumori_inner{margin:10px 0; padding:4px 0;} .pager_mitsumori_area .mitsumori_inner:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ .pager_mitsumori_area .pageguide{float:none; font-size:10px; padding:0 13px; margin:0 0 7px 0; color:#151515;} .pager_mitsumori_area .rearrange{float:none; font-size:14px; padding:0 13px;} .pager_mitsumori_area .rearrange p{float:left; margin-top:6px;} .pager_mitsumori_area .rearrange select{width:77%; float:right; margin:0 0 0 7px; height:28px !important; min-height:28px !important;} .pager_mitsumori_area .pagelink{padding:0 13px; margin:12px 0 8px; clear:both; font-size:14px;} .pager_mitsumori_area .pagelink a{font-size:13px;} .pager_mitsumori_area .pagelink #SEARCH_MAX_ROW_LIST{display:none;} } /* itemList - 商品一覧 -------------------------------------------------------------*/ #itemList h2{display:inline-block; font-size:26px; padding:0 0 3px 0; border-bottom:2px solid #a30b1a; margin-bottom:20px;} /* 表示切り替え */ #itemList #display_area{float:right; margin:10px 3px 25px;} #itemList #display_area p{float:left; margin-right:13px; font-size:14px; line-height:1.8; color:#424242;} #itemList #display_area ul{float:right;} #itemList #display_area ul li{display:inline-block;} #itemList #display_area ul li:last-child{border-left:1px solid #cacac7; padding:0 0 0 7px; margin-left:2px;} #itemList #display_area ul li a:hover{color:#a30b1a;} #itemList #display_area ul li .active{color:#a30b1a;} #itemList #display_area ul li i{font-size:24px; vertical-align:middle;} /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ #itemList h2{font-size:20px; margin:20px 13px 0 13px; border-bottom:1px solid #a30b1a; white-space:nowrap;} #itemList #display_area{display:none;} } /* 商品画像一覧のスタイル */ #itemList #itemListImage{margin-bottom:10px; clear:both;} #itemList #itemListImage:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemList #itemListImage > ul{padding:0 5px;} #itemList #itemListImage > ul:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemList #itemListImage li.box{width:320px; min-height:450px; margin:0 25px 30px 0; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition:all 0.1s ease-out; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; border-radius:2px; background:#fff; float:left;} #itemList #itemListImage li.box div > a{display:block; padding:0; text-decoration:none;} #itemList #itemListImage li.box div > a:hover img{text-decoration:none !important; opacity:1 !important; filter:alpha(opacity=100) !important;} #itemList #itemListImage li.box div > a:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemList #itemListImage li.box:nth-child(3n){margin:0 0 30px 0;} #itemList #itemListImage li.box .head_ttl{padding:11px 16px 13px 16px;} #itemList #itemListImage li.box .head_ttl:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemList #itemListImage li.box .head_ttl h2{padding:1px 0 0 0; line-height:1.3; font-size:14px; font-weight:bold; height:37px; overflow:hidden; border:none; margin:0; display:table-cell; vertical-align:middle; white-space:inherit !important;} #itemList #itemListImage li.box a:hover .head_ttl h2{color:#a30b1a;} #itemList #itemListImage li.box .img_box{height:180px; overflow:hidden; clear:both; position:relative;} /* #itemList #itemListImage li.box .img_box img:hover{-webkit-transform:scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform:scale(1.2); transform:scale(1.2);}*/ #itemList #itemListImage li.box .keyword{position:absolute; bottom:5px; left:15px;} #itemList #itemListImage li.box .keyword li{display:inline-block; margin-right:11px; font-size:10px; background-color:rgba(50,50,50, 0.8); color:#fff; padding:2px 11px 2px 10px;} #itemList #itemListImage li.box .keyword li:last-child{margin-right:0;} #itemList #itemListImage li.box .text_overflow{font-size:12px; overflow:hidden; line-height:1.5;} #itemList #itemListImage li.box .box_discription {padding: 8px 16px 4px 16px;max-height: 134px;overflow-y: auto;} #itemList #itemListImage li.box .offer{margin:4px 16px 0 0; color:#828282; font-size:12px; font-weight:bold;text-align:right;} #itemList #itemListImage li.box .price{margin:4px 16px 0 0; text-align:right; color:#ae2734; font-size:12px; font-weight:bold;} #itemList #itemListImage .item_info_bottom{margin:8px 16px 8px 16px;} #itemList #itemListImage .item_info_bottom:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemList #itemListImage .item_info_bottom .under_item_link{margin:12px 0 12px 0; float:right; font-size:14px; float:right; background:url(../images/common/icon_footer_arrow.png) no-repeat left 4px; padding-left:11px; -ms-background-size:5px 8px; -moz-background-size:5px 8px; -webkit-background-size:5px 8px; background-size:5px 8px;} #itemList #itemListImage .item_info_bottom .under_item_link a:hover{text-decoration:none; opacity:0.6; filter:alpha(opacity=60); -webkit-transition:0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;} #itemList #itemListImage .item_info_bottom .buttonarea{float:left;margin-top:4px} #itemList #itemListImage .item_info_bottom .buttonarea a{background:#1782db; font-size:12px; color:#fff; padding:8px 16px 8px 16px; box-shadow:0px 0px 0px 0px rgba(16, 93, 156, 0.8); -moz-box-shadow:0px 0px 0px 0px rgba(16, 93, 156, 0.8); -webkit-box-shadow:0px 0px 0px 0px rgba(16, 93, 156, 0.8);} #itemList #itemListImage .item_info_bottom .buttonarea a:hover{text-decoration:none; opacity:0.6; filter:alpha(opacity=60); -webkit-transition:0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;} #itemList #itemListImage .item_info_bottom .btn{height:32px; line-height:1.2;} /* ウィンドウ幅が641px以上の場合に適用するスタイル(PC,TB) */ @media screen and (min-width:641px){ #itemList #itemListImage li.box{position:relative;} #itemList #itemListImage li.box > a .item_bottom{position:absolute;bottom:0;width:288px;} #itemList #itemListImage li.box .item_info_bottom{position:absolute;bottom:0;width:288px;} /* カードレイアウトのhover時 */ #itemList #itemListImage li.box:hover{box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); -webkit-transition:all 0.1s ease-out; -moz-transition:all 0.1s ease-out; -o-transition:all 0.1s ease-out; transition:all 0.1s ease-out; -webkit-transform:scale(1.03); -moz-transform:scale(1.03); -ms-transform:scale(1.03); transform:scale(1.03);} } /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ #itemList #itemListImage > ul{width:665px; margin:auto; padding:0;} #itemList #itemListImage li.box:nth-child(3n){margin:0 25px 30px 0;} #itemList #itemListImage li.box:nth-child(2n){margin:0 0 30px 0;} #itemList #itemListImage li.box{position:relative;} #itemList #itemListImage li.box > a .item_bottom{position:absolute;bottom:0;width:288px;} #itemList #itemListImage li.box .item_info_bottom{position:absolute;bottom:0;width:288px;} } /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ #itemList #itemListImage{margin-bottom:0;} #itemList #itemListImage > ul{padding:15px 0 0 0;} #itemList #itemListImage li.box{width:100%; min-height:initial; min-height:auto; margin:0 0 5px; box-shadow:none;} #itemList #itemListImage li.box:last-child{margin-bottom:15px} #itemList #itemListImage li.box:nth-child(1n){margin:0 0 16px;} #itemList #itemListImage li.box div > a{width:100%; min-height:initial; min-height:auto;} #itemList #itemListImage li.box .img_box img:hover{-webkit-transform:scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform:scale(1); transform:scale(1);} #itemList #itemListImage li.box .keyword{position:absolute; bottom:5px; left:0; right:0;} #itemList #itemListImage li.box .keyword li{margin-right:4px;} #itemList #itemListImage li.box .text_overflow{font-size:14px;overflow:auto; height:auto; line-height:1.5;} #itemList #itemListImage li.box > a .box_discription{padding:16px 16px 8px 16px;} #itemList #itemListImage li.box .blog_date{margin:0 16px;} #itemList #itemListImage li.box .under_item_link{margin:0 16px 10px 0;} #itemList #itemListImage li.box > a .offer{margin:4px 16px 0 0; font-weight:bold;text-align:right;} #itemList #itemListImage li.box > a .item_bottom{margin: 16px;} #itemList #itemListImage li.box .item_info_bottom .buttonarea a{padding:8px 16px 8px 16px;} #itemList #itemListImage li.box .item_info_bottom .under_item_link{margin:12px 0 12px 0;} } /* 商品シンプル一覧のスタイル */ #itemList #itemListSimple{margin-bottom:10px; clear:both;} #itemList #itemListSimple:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemList #itemListSimple > ul{padding:0 5px;} #itemList #itemListSimple > ul:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemList #itemListSimple li.box{width:100%; min-height:120px; margin:0 25px 30px 0; box-shadow:0 2px 2px #CCC; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px; background:#fff; float:left;} #itemList #itemListSimple li.box div > a{width:69%; display:block; padding:0; text-decoration:none; float:left;} #itemList #itemListSimple li.box div > a:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemList #itemListSimple li.box .keyword_pc{display:block; margin:14px 0 0 15px;} #itemList #itemListSimple li.box .keyword_pc li{display:inline-block; margin-right:4px; font-size:10px; background-color:#fff; color:#333; border:1px solid #d3d3d3; padding:2px 11px 2px 10px;} #itemList #itemListSimple li.box .head_ttl{padding:0 0 0 0;} #itemList #itemListSimple li.box .head_ttl:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemList #itemListSimple li.box .head_ttl h2{padding:1px 0 0 0; line-height:1.3; font-size:14px; font-weight:bold; height:auto; border:none; margin:0;} #itemList #itemListSimple li.box .img_box{display:none;} #itemList #itemListSimple li.box .keyword_sp{display:none;} #itemList #itemListSimple li.box .text_overflow{display:none;} #itemList #itemListSimple li.box .offer{margin:5px 15px 0 15px; color:#828282; font-size:12px; font-weight:bold;} #itemList #itemListSimple li.box .price{margin:9px 15px 8px 15px; text-align:left; color:#ae2734; font-size:15px; font-weight:bold;} #itemList #itemListSimple li.box .item_info_bottom{margin:65px 15px 0 10px; float:right;} #itemList #itemListSimple li.box .item_info_bottom:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemList #itemListSimple li.box .item_info_bottom .buttonarea{float:left;} #itemList #itemListSimple li.box .item_info_bottom .buttonarea a{width:auto; background:#1782db; font-size:14px; color:#fff; padding:9px 37px 10px 37px; box-shadow:rgba(16, 93, 93, 0.8) 0 2px 1px 0; -webkit-box-shadow:rgba(16, 93, 93, 0.8) 0 2px 1px 0; -moz-box-shadow:rgba(16, 93, 93, 0.8) 0 2px 1px 0;} #itemList #itemListSimple li.box .item_info_bottom .buttonarea > a:hover{text-decoration:none; opacity:0.6; filter:alpha(opacity=60); -webkit-transition:0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;} /* ウィンドウ幅が641px以上の場合に適用するスタイル(PC,TB) */ @media screen and (min-width:641px){ /* カードレイアウトのhover時 */ #itemList #itemListSimple li.box:hover{box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); -webkit-transition:all 0.1s ease-out; -moz-transition:all 0.1s ease-out; -o-transition:all 0.1s ease-out; transition:all 0.1s ease-out; -webkit-transform:scale(1.03); -moz-transform:scale(1.03); -ms-transform:scale(1.03); transform:scale(1.03);} } /* ウィンドウ幅が641px以上の場合に適用するスタイル(PC,TB) */ @media screen and (min-width:641px){ #itemList #itemListSimple li.box .head_ttl h2{padding:10px 15px 0 15px; line-height:1.3; font-size:14px; font-weight:bold; height:auto; border:none; margin:0;} #itemList #itemListSimple li.box .item_info_bottom .under_item_link{float:right; background:#ebebe6; margin-left:10px; font-size:14px; color:#333; padding:0; box-shadow:rgba(113, 135, 164, 0.270588) 0 2px 1px 0; -webkit-box-shadow:rgba(113, 135, 164, 0.270588) 0 2px 1px 0; -moz-box-shadow:rgba(113, 135, 164, 0.270588) 0 2px 1px 0;} #itemList #itemListSimple li.box .item_info_bottom .under_item_link a{padding:11px 14px 9px 14px; display:block;} #itemList #itemListSimple li.box .item_info_bottom .under_item_link a:hover{text-decoration:none !important; opacity:0.6; filter:alpha(opacity=60); -webkit-transition:0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;} #itemList #itemListSimple li.box .item_info_bottom .under_item_link a:active{-webkit-box-shadow:none; box-shadow:none;} } /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ #itemList #itemListSimple > ul{width:768px; margin:auto; padding:0;} #itemList #itemListSimple li.box div > a{width:60%;} } /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ #itemList #itemListSimple{margin-bottom:0;} #itemList #itemListSimple > ul{padding:15px 0 0 0;} #itemList #itemListSimple li.box{min-height:initial; min-height:auto; margin:0 0 5px; box-shadow:none;} #itemList #itemListSimple li.box:last-child{margin-bottom:15px} #itemList #itemListSimple li.box:nth-child(1n){margin:0 0 5px;} #itemList #itemListSimple li.box div > a{width:100%; min-height:initial; min-height:auto; float:none;} #itemList #itemListSimple li.box .keyword_pc{display:none;} #itemList #itemListSimple li.box .head_ttl{padding:11px 16px 13px 16px;} #itemList #itemListSimple li.box .head_ttl h2{padding:1px 0 0 0; line-height:1.3; font-size:14px; font-weight:bold; height:37px; overflow:hidden; border:none; margin:0;} #itemList #itemListSimple li.box .img_box{display:block; height:180px; overflow:hidden; clear:both; position:relative;} #itemList #itemListSimple li.box .img_box img:hover{-webkit-transform:scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform:scale(1.2); transform:scale(1.2);} #itemList #itemListSimple li.box .keyword_sp{position:absolute; bottom:5px; left:0; right:0; display:block;} #itemList #itemListSimple li.box .keyword_sp li{display:inline-block; margin-right:11px; font-size:10px; background-color:rgba(50,50,50, 0.8); color:#fff; padding:2px 11px 2px 10px;} #itemList #itemListSimple li.box .keyword_sp li:last-child{margin-right:0;} #itemList #itemListSimple li.box .text_overflow{font-size:14px; overflow:auto; height:auto; line-height:1.5; display:block;} #itemList #itemListSimple li.box .blog_date{margin:0 16px;} #itemList #itemListSimple li.box .under_item_link{margin:0 16px 10px 0;} #itemList #itemListSimple li.box .under_item_link .btn{padding:0; line-height:1;} #itemList #itemListSimple li.box .offer{margin:11px 0 0 16px; font-size:14px;} #itemList #itemListSimple li.box .price{margin:7px 16px 8px 0; text-align:right; color:#ae2734; font-size:15px; font-weight:bold;} #itemList #itemListSimple li.box .item_info_bottom{margin:6px 0 10px 10px; float:none;} #itemList #itemListSimple li.box .item_info_bottom .buttonarea{float:left;} #itemList #itemListSimple li.box .item_info_bottom .buttonarea a{padding:8px 25px 11px 24px; font-size:13px;} #itemList #itemListSimple li.box .item_info_bottom .buttonarea .btn{width:140px; height:32px;} #itemList #itemListSimple li.box .item_info_bottom .under_item_link{margin:17px 8px 0 0; font-size:14px; float:right; background:url(../images/common/icon_footer_arrow.png) no-repeat left 4px; padding-left:11px; -ms-background-size:5px 8px; -moz-background-size:5px 8px; -webkit-background-size:5px 8px; background-size:5px 8px;} } /* ================================================================= 6.商品詳細 使用ファイル：item_detail.xhtml =================================================================*/ .detail_container{background-color:#fff; margin:15px 0 40px;} .detail_container .inner{width:1020px; margin:auto;} #itemDetail{padding:20px 0 20px;} #itemDetail .left_detail_box{float:left; width:430px; margin:0 0 19px 5px;} #itemDetail .left_detail_box:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemDetail .explanation3{color:#333; font-size:13px; line-height:1.6; padding:15px 0 0 0;} #itemDetail .right_detail_box{float:right; width:544px; margin:0 5px 19px 0;} #itemDetail .right_detail_box:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemDetail .recommend_area{float:left;} #itemDetail .recommend_area ul{text-align:center;} #itemDetail .recommend_area ul:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemDetail .recommend_area ul li{float:left; margin-right:12px;} #itemDetail .recommend_area ul li a{font-size:11px; vertical-align:middle; background-color:#efeee7; color:#333; border:1px solid #dcdcdc; padding:3px 9px 4px 8px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; border-radius:2px;} #itemDetail .recommend_area ul li a:hover{text-decoration:none; opacity:0.6; filter:alpha(opacity=60); -webkit-transition:0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;} #itemDetail .recommend_area ul li .wish_icon{font-size:15px; color:#dace00; vertical-align:bottom;} #itemDetail .recommend_area ul li .friend_icon{font-size:15px; color:#b5b5a7; vertical-align:bottom;} #itemDetail .sns_area{float:left;} #itemDetail .sns_area:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemDetail .sns_area ul li{float:left; margin-right:12px;} #itemDetail .sns_area ul .facebook_icon img{width:71px; height:20px;} #itemDetail .sns_area ul .twitter_icon img{width:75px; height:20px;} #itemDetail .sns_area ul .googleplus_icon img{width:50px; height:20px;} #itemDetail .appeal{margin-top:39px; font-size:18px; clear:both; line-height:1.4;} #itemDetail h2{font-size:24px; line-height:1.45; padding:20px 0 15px; clear:both;} #itemDetail .price_here{display:none;font-size:24px; color:#a30b1a; text-align:right;} #itemDetail .price_ttl{display:inline-block; color:#414141 !important; font-size:16px !important; margin-right:5px;} #itemDetail form:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemDetail .amount_area{margin:4px 0;} #itemDetail .amount_area:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemDetail .amount_area .property{float:right;} #itemDetail .amount_area .amount{float:right; clear:both;} #itemDetail .amount_area p{display:block; float:left; margin:0 3px 0 13px;} #itemDetail .amount_area select{display:inline-block;} #itemDetail .buttonarea{margin:0 0 30px;} #itemDetail .buttonarea:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemDetail .buttonarea ul{float:right;} #itemDetail .buttonarea ul li{float:left; margin-left:10px; text-align:center;} #itemDetail .buttonarea ul li:first-child{margin-left:0;} #itemDetail .buttonarea ul li .input_btn{display:block; height:48px;} #itemDetail .buttonarea ul li a, #itemDetail .buttonarea ul li input, #itemDetail .buttonarea ul li p{width:128px; height:46px; font-size:18px; color:#fff; vertical-align:middle; display:table-cell;} #itemDetail .buttonarea ul li a:hover, #itemDetail .buttonarea ul li input:hover{color:#fff !important;} #itemDetail .buttonarea ul li .btn-download{padding:7px 0; font-size:14px; line-height:1.2; background:#8b8807; -webkit-box-shadow:0px 2px 1px -1px rgba(108,100,0,1); -moz-box-shadow:0px 2px 1px -1px rgba(108,100,0,1); box-shadow:0px 2px 1px -1px rgba(108,100,0,1);} #itemDetail .buttonarea ul li .btn-compensation{padding:12px 0 13px; font-size:18px; line-height:1.2; background:#1782db; -webkit-box-shadow:0px 2px 1px -1px rgba(16,93,156,0.7); -moz-box-shadow:0px 2px 1px -1px rgba(16,93,156,0.7); box-shadow:0px 2px 1px -1px rgba(16,93,156,0.7);} #itemDetail .buttonarea ul li .btn-free{padding:7px 0; font-size:14px; line-height:1.2; background:#1782db; -webkit-box-shadow:0px 2px 1px -1px rgba(16,93,156,0.7); -moz-box-shadow:0px 2px 1px -1px rgba(16,93,156,0.7); box-shadow:0px 2px 1px -1px rgba(16,93,156,0.7);} #itemDetail .buttonarea ul li .btn-estimate{padding:12px 0 13px; font-size:18px; line-height:1.2; background:#85826f; -webkit-box-shadow:0px 2px 1px -1px rgba(94,91,72,1); -moz-box-shadow:0px 2px 1px -1px rgba(94,91,72,1); box-shadow:0px 2px 1px -1px rgba(94,91,72,1);} #itemDetail .buttonarea ul li .btn-input{padding:12px 0 13px; font-size:18px; line-height:1.2; background:#ad0112; -webkit-box-shadow:0px 2px 1px -1px rgba(133,1,14,1); -moz-box-shadow:0px 2px 1px -1px rgba(133,1,14,1); box-shadow:0px 2px 1px -1px rgba(133,1,14,1);} #itemDetail .error_message{color:#a30b1a; margin:0 0 10px;text-align:right;margin:10px 0 10px 0;} #itemDetail .info_table{border-bottom:1px solid #dcdcdc; clear:both; width:223px; float:left; font-size:12px; line-height:1.2;} /* EDIT 20170816 START */ #itemDetail .info_table dt{border-top:1px solid #dcdcdc; float:left; width:95px; font-weight:normal; padding:7px 0 7px 5px;} #itemDetail .info_table dd{border-top:1px solid #dcdcdc; _height:1%; margin-left:95px; padding:7px 0 7px 5px;} /* EDIT 20170816 END*/ #itemDetail .into_text_area{float:right; width:291px; height:290px; min-height:290px; overflow-y:auto;overflow-x:hidden;} #itemDetail a.sales_agency{text-decoration:underline;} #itemDetail .price_table, #itemDetail .price_option_table{display:none;} #itemDetail .content_info{width:1010px; clear:both; border-top:1px solid #dcdcdc; margin:0 auto; padding:39px 0 16px 0;} #itemDetail .content_info .inner{width:auto;} #itemDetail .content_info .tag_list{margin:0 0 17px;} #itemDetail .content_info .tag_list:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemDetail .content_info .tag_list li{float:left; margin:0 12px 17px 0; background:#ebebe6; font-size:14px; color:#333; padding:6px 10px 7px 10px; box-shadow:rgba(113, 135, 164, 0.270588) 0 2px 1px 0; -webkit-box-shadow:rgba(113, 135, 164, 0.270588) 0 2px 1px 0; -moz-box-shadow:rgba(113, 135, 164, 0.270588) 0 2px 1px 0;} #itemDetail .content_info .tag_list li:hover{text-decoration:none !important; cursor:pointer; opacity:0.6; filter:alpha(opacity=60); -webkit-transition:0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;} #itemDetail .content_info .tag_list li a{padding-right:17px; background:#ebebe6 url(../images/common/icon_down_info_arrow.png) no-repeat right center; -ms-background-size:9px 5px; -moz-background-size:9px 5px; -webkit-background-size:9px 5px; background-size:9px 5px;} #itemDetail .content_info .tag_list li a:hover{text-decoration:none !important;} #itemDetail .content_info h3{background:#7e7d76; color:#fff; font-size:20px; padding:16px 16px; clear:both;} #itemDetail .content_info .info_inner{padding:30px 20px;} #itemDetail #info_07 > .info_inner {text-align:center;} #itemDetail #info_07 > .info_inner p{margin:15px 0 15px 0;} #itemDetail .content_info .info_inner:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemDetail .content_info.option_info{border-top:none !important;} /* カラーボックスプラグインスタイル */ #cboxWrapper #cboxContent{border:none; background:inherit;} #cboxWrapper #cboxLoadedContent{margin:0;} #cboxWrapper #cboxPrevious, #cboxWrapper #cboxNext, #cboxWrapper #cboxCurrent, #cboxWrapper #cboxTitle{display:none !important;} #cboxWrapper #cboxClose{bottom:3px; right:10px;} #cboxWrapper #cboxClose:hover{text-decoration:underline;} #cboxWrapper .cboxIframe{padding:0 0 25px;} /* 販売元モーダルウィンドウのスタイル */ #sales_agency_content{background:#fff; padding:20px;} #sales_agency_content h1{font-size:22px; padding:0 0 3px 0; border-bottom:2px solid #a30b1a; margin-bottom:20px;} #sales_agency_content h2{margin:5px 10px 15px 0; padding:6px; border-left:2px solid #a30b1a; font-size:18px; clear:both;} #sales_agency_content .modal_text{margin:0 10px 20px;} #sales_agency_content .input_table{background:#fff; margin-bottom:20px !important;} #sales_agency_content .input_table th, #sales_agency_content .input_table td{border-bottom:1px solid #dcdcdc;} /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ #sales_agency_content{padding:10px;} #sales_agency_content h1{font-size:18px; margin:0 0 15px; border-bottom:1px solid #a30b1a;} #sales_agency_content h2{width:auto; float:none; font-size:14px;} #sales_agency_content .input_table th{border-bottom:0;} } /* オプションセレクトページ用スタイル */ #itemDetail.itemDetail_option_select{padding:0 0 20px !important;} #itemDetail .option_status_box{padding:0 5px;} #itemDetail .option_status_box:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemDetail .option_area{width:430px; margin:12px 0 0; float:left;} #itemDetail .option_area .img_box{width:430px; height:242px; margin:0; text-align:center; position:relative; display:block;} #itemDetail .option_area .img_box img{max-width:430px; max-height:242px; width:auto; display:block; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;} #itemDetail .option_status_box .right_detail_box{margin-right:0;} #itemDetail #name_option_area h2{padding-top:12px;} #itemDetail .basic_here{text-align:right; margin-top:5px;} #itemDetail .basic_here .price_ttl{font-size:14px !important;} #itemDetail .status_box{margin:20px 0 0 0;} #itemDetail .status_box dl{border-bottom:1px solid #dcdcdc; clear:both; font-size:12px; line-height:1.2; margin:20px 0 0;} #itemDetail .status_box dt{border-top:1px solid #dcdcdc; float:left; width:149px; font-weight:normal; padding:7px 0 7px 5px; min-height:32px;} #itemDetail .status_box dd{border-top:1px solid #dcdcdc; _height:1%; margin-left:140px; padding:7px 0 7px 5px; min-height:32px;} #itemDetail .next_back_area{text-align:center; margin:25px 0 25px; clear:both;} #itemDetail .next_back_area .btn{padding:10px 25px;} #itemDetail .content_info h4{margin:20px 0 10px; font-size:16px; display:inline-block;} #itemDetail .content_info #select_area{clear:both;} #itemDetail .content_info .group_area{clear:both; margin:16px 0;} #itemDetail .content_info .group_area:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemDetail .content_info .option_box{background-color:#efeee7; padding:10px; margin:0 20px 10px 0; width:49%; float:left;} #itemDetail .content_info .option_box dl{clear:both; font-size:12px; line-height:1.4;} #itemDetail .content_info .option_box dt{float:left; width:40%; font-weight:normal; padding:7px 0 7px 5px; min-height:36px;} #itemDetail .content_info .option_box dt input{vertical-align:text-bottom; margin:0; padding:0;} #itemDetail .content_info .option_box dd{margin-left:25%; padding:7px 0 7px 5px; min-height:36px;} #itemDetail table { background-color: #fff; border: solid 1px #ccc; box-shadow: 1px 1px 2px #aaa; border-radius: 2px; } #itemDetail table .thead-default{background-color: #eee;} #itemDetail table .op_th_1{width:5;text-align:center;min-width:36px;vertical-align;middle;} #itemDetail table .op_th_2{width:65%;} #itemDetail table .op_th_3{width:10%;text-align:right;min-width:50px;white-space: nowrap;text-wrap:none;} #itemDetail table .op_th_4{width:10%;text-align:right;min-width:50px;white-space: nowrap;text-wrap:none;} #itemDetail table .op_th_5{width:10%;text-align:right;min-width:50px;white-space: nowrap;text-wrap:none;} #itemDetail table .op_th_2 .option_service_name{font-size:14px;font-weight:bold;} #itemDetail table input[type="radio"],input[type="checkbox"]{margin:0;padding:0;width:18px;height:18px;} #itemDetail table input[type="select"]{margin:0;padding:0 8px 0 0;} #itemDetail table .select_release{display:inline-block;clear:both;font-size:9px;vertical-align:bottom;margin:0 0 0 0} #itemDetail table .option_group_name{font-size:16px;display:inline-block;margin-right:16px;margin-left:16px;margin-top:6px;vertical-align:top;} #itemDetail table .option_note{margin-top:8px;} #itemDetail table .option_note > div{font-size:13px;display:table-cell;} #itemDetail table .option_note > div:nth-of-type(1){width:28px;background-color:#666;border-radius:4px 0 0 4px;vertical-align:middle;padding:0 6px;} #itemDetail table .option_note > div:nth-of-type(1) i.material-icons{color:#fff;font-size:16px;vertical-align:middle;text-align:center;} #itemDetail table .option_note > div:nth-of-type(2){background-color:#efeee7;border-radius:0 4px 4px 0;vertical-align:middle;padding:4px 8px;} /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ .detail_container{width:auto; min-width:768px;} .detail_container .inner{width:758px;} #itemDetail .left_detail_box{margin-bottom:39px; margin-left:0;} #itemDetail .right_detail_box{margin-bottom:39px; margin-right:0;} #itemDetail .sns_area{margin:10px 0 20px;} #itemDetail .appeal{font-size:16px;} #itemDetail h2{font-size:22px; padding:10px 0 15px; clear:both;} #itemDetail .buttonarea{margin:0 0 20px;} #itemDetail .buttonarea ul li{margin:0 14px 10px 0;} #itemDetail .buttonarea ul li:nth-child(2n){margin-right:0;} #itemDetail .buttonarea ul li .input_btn{height:42px;} #itemDetail .buttonarea ul li a, #itemDetail .buttonarea ul li input, #itemDetail .buttonarea ul li p{width:177px; height:40px; font-size:18px; color:#fff; vertical-align:middle; display:table-cell;} #itemDetail .buttonarea ul li a:hover, #itemDetail .right_detail_box .buttonarea ul li input:hover{color:#fff !important;} #itemDetail .buttonarea ul li .btn-download{padding:7px 0; font-size:14px; line-height:0;} #itemDetail .buttonarea ul li .btn-download br{display:none;} #itemDetail .buttonarea ul li .btn-compensation{padding:0; font-size:18px; line-height:0;} #itemDetail .buttonarea ul li .btn-free{padding:7px 0; font-size:14px; line-height:1.2;} #itemDetail .buttonarea ul li .btn-free br{display:none;} #itemDetail .buttonarea ul li .btn-estimate{padding:0; font-size:18px; line-height:0;} #itemDetail .buttonarea ul li .btn-input{padding:0; font-size:18px; line-height:0;} #itemDetail .info_table{width:166px;} #itemDetail .info_table dt{width:86px;} #itemDetail .info_table dd{margin-left:86px;} #itemDetail .into_text_area{width:187px; height:323px; min-height:323px;} /* オプションセレクトページ用スタイル */ #itemDetail .option_status_box{padding:0;} #itemDetail .option_area{width:370px; margin:33px 0 0;} #itemDetail .option_area .img_box{width:370px; height:165px;} #itemDetail .option_area .img_box img{max-width:370px; /*max-height:165px;*/} #itemDetail .next_back_area{margin:20px 0;} #itemDetail .content_info .option_box{width:48.6%;} #itemDetail .content_info .option_box dt{width:38%;} } /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ .detail_container{width:100%; padding:0 13px; margin:15px 0 10px;} .detail_container .inner{width:auto;} #itemDetail{padding:15px 0;} #itemDetail .left_detail_box{width:100%; float:none; margin:0;} #itemDetail .right_detail_box{width:100%; float:none; margin:0;} #itemDetail .appeal{margin-top:0; font-size:14px;} #itemDetail h2{font-size:15px; padding:10px 0; font-weight:bold; line-height:1.6; clear:both;} #itemDetail .explanation3{padding:0 0 16px 0;} #itemDetail .price_here{display:none;} #itemDetail .info_table{font-size:13px;} #itemDetail .info_table dt{padding:7px 0 7px 10px;} #itemDetail .info_table dd{padding:7px 0 7px 10px;} #itemDetail .price_table{display:block;} #itemDetail dt.price_table{display:none;font-size:14px; padding:9px 0 0 10px;} #itemDetail dd.price_table{display:none;font-size:18px; color:#a30b1a; padding:7px 0 7px 10px;} #itemDetail .amount_area{margin:10px 0;} #itemDetail .amount_area .property{float:none;} #itemDetail .amount_area .property:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemDetail .amount_area .property select{display:block; margin:5px 0 0;} #itemDetail .amount_area .amount{float:none;} #itemDetail .amount_area .amount:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemDetail .amount_area p{margin:0 0 5px; float:left;} #itemDetail .amount_area .amount p{margin:10px 5px 0 0;} #itemDetail .amount_area .amount select{display:block; margin:5px 0 0; /*float:left; width:20%;*/ background:#fff url(../images/common/icon_down_arrow.png) no-repeat 90% 50%;} #itemDetail .buttonarea{margin:0 0 13px;} #itemDetail .buttonarea ul{float:none;} #itemDetail .buttonarea ul li{margin:0 0 10px; width:100%; float:none;} #itemDetail .buttonarea ul li:nth-child(1n){margin-right:0;} #itemDetail .buttonarea ul li .input_btn{height:47px;} #itemDetail .buttonarea ul li a, #itemDetail .buttonarea ul li input, #itemDetail .buttonarea ul li p{width:100%; height:auto; padding:12px 0 !important; font-size:18px !important; color:#fff; display:block; vertical-align:middle;} #itemDetail .buttonarea ul li .btn-download{padding:0; line-height:1.2;} #itemDetail .buttonarea ul li .btn-download br{display:none;} #itemDetail .buttonarea ul li .btn-compensation{padding:0; line-height:1.2;} #itemDetail .buttonarea ul li .btn-free{padding:0; line-height:1.2;} #itemDetail .buttonarea ul li .btn-free br{display:none;} #itemDetail .buttonarea ul li .btn-estimate{padding:0; line-height:1.2;} #itemDetail .buttonarea ul li .btn-input{padding:0; line-height:1.2;} #itemDetail .error_message{font-size:12px;} #itemDetail .recommend_area{float:none; width:260px; margin:auto;} #itemDetail .recommend_area:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemDetail .recommend_area ul{text-align:center;} #itemDetail .recommend_area ul li{float:none; display:inline;} #itemDetail .sns_area{float:none; width:260px; margin:20px auto; padding:10px 15px; background:#efeee7;} #itemDetail .sns_area:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #itemDetail .sns_area ul li{float:left; margin-right:17px;} #itemDetail .sns_area ul li:last-child{margin-right:0;} #itemDetail .sns_area ul .facebook_icon img{width:71px; height:20px;} #itemDetail .sns_area ul .twitter_icon img{width:75px; height:20px;} #itemDetail .sns_area ul .googleplus_icon img{width:50px; height:20px;} #recommend_sns_area{border-bottom:1px solid #dcdcdc;} #itemDetail .info_table{width:100%; float:none;} #itemDetail .into_text_area{width:100%; margin:20px 0 0; padding:0 0 0; height:220px; min-height:220px; float:none; border-top:none;} /* デバイスがiphone,Androidの場合、スクロールバーを装飾する */ #itemDetail .into_text_area::-webkit-scrollbar{height:5px; width:5px;} #itemDetail .into_text_area::-webkit-scrollbar-track{background:#F1F1F1;} #itemDetail .into_text_area::-webkit-scrollbar-thumb{background:#7e7d76;} #itemDetail .into_text_area::-webkit-scrollbar-track-piece:start{background:#F1F1F1;} #itemDetail .into_text_area::-webkit-scrollbar-track-piece:end{background:#F1F1F1;} #itemDetail .content_info{width:auto; margin:20px 0 0; padding:20px 0 0;} #itemDetail .content_info .inner{width:auto;} #itemDetail .content_info .tag_list{margin:0 0 10px; width:100%;} #itemDetail .content_info .tag_list li{float:left; display:table; width:48%; margin:0 10px 15px 0; padding:0; font-size:13px; background:#ebebe6 url(../images/common/icon_down_info_arrow.png) no-repeat 90% center; -ms-background-size:9px 5px; -moz-background-size:9px 5px; -webkit-background-size:9px 5px; background-size:9px 5px;} #itemDetail .content_info .tag_list li:nth-child(2n){margin-right:0; float:right;} #itemDetail .content_info .tag_list li a{padding:12px 13px; display:table-cell; vertical-align:middle; background:transparent !important;} #itemDetail .content_info h3{font-size:18px; padding:5px 14px 6px 14px; clear:both;} /* オプションセレクトページ用スタイル */ #itemDetail .option_status_box{padding:0;} #itemDetail .option_area{width:100%; margin:0 auto; padding:10px 0 0 0; float:none;} #itemDetail .option_area .img_box{margin:0 auto;} #itemDetail .option_area .img_box{width:294px; height:165px;} #itemDetail .option_area .img_box img{max-width:294px; max-height:165px;} #itemDetail .content_info .option_box{width:auto; float:none; margin-right:0;} #itemDetail .price_option_table{display:block;} #itemDetail dt.price_option_table{font-size:14px; padding:9px 0 9px 5px;} #itemDetail dd.price_option_table{font-size:18px; color:#a30b1a; padding:7px 0;} #itemDetail .next_back_area{margin:20px 0; clear:both;} #itemDetail .content_info .option_box dt{width:auto; float:none; font-weight:bold; min-height:initial; min-height:auto;} #itemDetail .content_info .option_box dd{width:auto; margin-left:0; float:none; min-height:initial; min-height:auto;} #itemDetail .content_info .option_box input[type="radio"], #itemDetail .content_info .option_box input[type="checkbox"]{-webkit-transform:scale(1.8); transform:scale(1.8); margin:0 10px;} #itemDetail .next_back_area a{width:100%; margin:0 0 10px;} } /* ウィンドウ幅が1021px以上の場合に適用するスタイル(PC,TB) */ @media screen and (min-width:1021px){ /* 商品スライダー(flexslider使用) */ #mainvisual_box #mainslider{display:none; width:430px;} #mainvisual_box .flexslider{border:0 !important; margin:0 !important; -webkit-border-radius:0 !important; -moz-border-radius:0 !important; border-radius:0 !important; box-shadow:none !important;} #mainvisual_box .flexslider .slides li{position:relative;} #mainvisual_box .flexslider .slides li a{width:430px; /*height:242px;*/ text-align:center; display:table-cell; vertical-align:middle; /* 画像を垂直に */ line-height:0; /* ボックス内の余分な下スペースを消去 */} #mainvisual_box .flexslider .slides li a img{z-index:-1; max-width:430px; max-height:242px; width:auto; display:block; margin:auto; opacity:1 !important; filter:alpha(opacity=100) !important; -webkit-transition:0s !important; -moz-transition:0s !important; -o-transition:0s !important; transition:0s !important;} #mainvisual_box .flexslider .slides li a:hover{cursor:default; opacity:1 !important; filter:alpha(opacity=100) !important;} #mainvisual_box .flexslider .slides li .loupe{cursor:pointer !important; position:absolute; bottom:0; right:0; background-color:#85826f; color:#fff; font-size:11px; padding:10px 0 0 0; width:56px; height:22px;} #mainvisual_box .flexslider .flex-control-nav{bottom:0; left:0; right:0; margin:20px 0 0 0; width:430px;} #mainvisual_box .flexslider .flex-control-nav li{width:100px; height:56px; margin:0 10px 20px 0; text-align:center; position:relative; display:block;} #mainvisual_box .flexslider .flex-control-nav li:nth-child(4n){margin:0 0 10px 0;} #mainvisual_box .flexslider .flex-control-nav li img{max-width:100px; max-height:56px; width:auto; display:block; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;} #mainvisual_box .flex-control-thumbs img{opacity:1; filter:alpha(opacity=100);} #mainvisual_box .flex-control-thumbs img:hover{opacity:0.5 !important; filter:alpha(opacity=50) !important;} #mainvisual_box .flex-control-thumbs img.flex-active{opacity:0.5 !important; filter:alpha(opacity=50) !important;} /* 左右の矢印 */ #mainvisual_box .flex-direction-nav .flex-prev, .flex-direction-nav .flex-next{width:18px; height:30px;} #mainvisual_box .flex-direction-nav .flex-prev{left:0; background:url(../images/img_itemdetail_prev.png) no-repeat left center; -ms-background-size:18px 30px; -moz-background-size:18px 30px; -webkit-background-size:18px 30px; background-size:18px 30px; /*background-color:rgba(255, 255, 255, 0.8);*/} #mainvisual_box .flex-direction-nav .flex-next{right:0; background:url(../images/img_itemdetail_next.png) no-repeat right center; -ms-background-size:18px 30px; -moz-background-size:18px 30px; -webkit-background-size:18px 30px; background-size:18px 30px; /*background-color:rgba(255, 255, 255, 0.8);*/} #mainvisual_box .flex-direction-nav .flex-prev:hover, .flex-direction-nav .flex-next:hover{opacity:0.5 !important; filter:alpha(opacity=50) !important;} #mainvisual_box .flex-direction-nav a{text-decoration:none; display:block; width:30px; height:30px; margin:0; position:absolute; top:25%; z-index:10; overflow:hidden; opacity:1; cursor:pointer; color:#333; text-shadow:none;} #mainvisual_box .flex-direction-nav .flex-nav-prev a:before{display:inline-block; content:''; text-shadow:none;} #mainvisual_box .flex-direction-nav .flex-nav-next a:before{display:inline-block; content:''; text-shadow:none;} #mainvisual_box .flexslider:hover .flex-direction-nav .flex-prev{opacity:1; left:0; top:25%;} #mainvisual_box .flexslider:hover .flex-direction-nav .flex-prev:hover{opacity:1;} #mainvisual_box .flexslider:hover .flex-direction-nav .flex-next{opacity:1; right:0; top:25%;} #mainvisual_box .flexslider:hover .flex-direction-nav .flex-next:hover{opacity:1;} } /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ #itemDetail .left_detail_box{width:370px;} #itemDetail .right_detail_box{width:368px;} /* 商品スライダー(flexslider使用) */ #mainvisual_box #mainslider{display:none; width:370px;} #mainvisual_box .flexslider{border:0 !important; margin:0 !important; -webkit-border-radius:0 !important; -moz-border-radius:0 !important; border-radius:0 !important; box-shadow:none !important;} #mainvisual_box .flexslider .slides li{position:relative;} #mainvisual_box .flexslider .slides li a{width:370px; /*height:219px;*/ text-align:center; display:table-cell; vertical-align:middle; /* 画像を垂直に */ line-height:0; /* ボックス内の余分な下スペースを消去 */} #mainvisual_box .flexslider .slides li a img{z-index:-1; max-width:370px; max-height:219px; width:auto; display:block; margin:auto; opacity:1 !important; filter:alpha(opacity=100) !important; -webkit-transition:0s !important; -moz-transition:0s !important; -o-transition:0s !important; transition:0s !important;} #mainvisual_box .flexslider .slides li a:hover{cursor:default; opacity:1 !important; filter:alpha(opacity=100) !important;} #mainvisual_box .flexslider .slides li .loupe{cursor:pointer !important; position:absolute; bottom:0; right:0; background-color:#85826f; color:#fff; font-size:11px; padding:10px 0 0 0; width:56px; height:22px;} #mainvisual_box .flexslider .flex-control-nav{bottom:0; left:0; right:0; margin:20px 0 0 0; width:370px;} #mainvisual_box .flexslider .flex-control-nav li{width:85px; height:47px; margin:0 10px 20px 0; text-align:center; position:relative; display:block;} #mainvisual_box .flexslider .flex-control-nav li:nth-child(4n){margin:0 0 10px 0;} #mainvisual_box .flexslider .flex-control-nav li img{max-width:85px; max-height:47px; width:auto; display:block; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;} #mainvisual_box .flex-control-thumbs img{opacity:1; filter:alpha(opacity=100);} #mainvisual_box .flex-control-thumbs img:hover{opacity:0.5 !important; filter:alpha(opacity=50) !important;} #mainvisual_box .flex-control-thumbs img.flex-active{opacity:0.5 !important; filter:alpha(opacity=50) !important;} #itemDetail .content_info{width:100%; padding:39px 0 0;} /* 左右の矢印 */ #mainvisual_box .flex-direction-nav .flex-prev, .flex-direction-nav .flex-next{width:18px; height:30px;} #mainvisual_box .flex-direction-nav .flex-prev{left:0; background:url(../images/img_itemdetail_prev.png) no-repeat left center; -ms-background-size:18px 30px; -moz-background-size:18px 30px; -webkit-background-size:18px 30px; background-size:18px 30px;} #mainvisual_box .flex-direction-nav .flex-next{right:0; background:url(../images/img_itemdetail_next.png) no-repeat right center; -ms-background-size:18px 30px; -moz-background-size:18px 30px; -webkit-background-size:18px 30px; background-size:18px 30px;} #mainvisual_box .flex-direction-nav .flex-prev:hover, .flex-direction-nav .flex-next:hover{opacity:0.5 !important; filter:alpha(opacity=50) !important;} #mainvisual_box .flex-direction-nav a{text-decoration:none; display:block; width:30px; height:30px; margin:0; position:absolute; top:25%; z-index:10; overflow:hidden; opacity:1; cursor:pointer; color:#333; text-shadow:none;} #mainvisual_box .flex-direction-nav .flex-nav-prev a:before{display:inline-block; content:''; text-shadow:none;} #mainvisual_box .flex-direction-nav .flex-nav-next a:before{display:inline-block; content:''; text-shadow:none;} #mainvisual_box .flexslider:hover .flex-direction-nav .flex-prev{opacity:1; left:0; top:25%;} #mainvisual_box .flexslider:hover .flex-direction-nav .flex-prev:hover{opacity:1;} #mainvisual_box .flexslider:hover .flex-direction-nav .flex-next{opacity:1; right:0; top:25%;} #mainvisual_box .flexslider:hover .flex-direction-nav .flex-next:hover{opacity:1;} } /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ /* 商品スライダー(flexslider使用) */ #mainvisual_box{margin-bottom:20px;} #mainvisual_box #mainslider{display:none; width:100%;} #mainvisual_box .flexslider{border:0 !important; margin:0 !important; -webkit-border-radius:0 !important; -moz-border-radius:0 !important; border-radius:0 !important; box-shadow:none !important;} /* 画像の縦横比 */ #mainvisual_box .flexslider .slides{padding:10px 0; background:#efeee7;} #mainvisual_box .flexslider .slides li{width:294px; height:165px; text-align:center; position:relative; padding:10px 0; overflow:hidden;} #mainvisual_box .flexslider .slides li a{margin:0 13px; background:#efeee7; -webkit-box-shadow:0px 2px 3px #b8b8b8; box-shadow:0px 2px 3px #b8b8b8;} #mainvisual_box .flexslider .slides li a img{max-width:294px; max-height:165px; width:auto; display:block; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; opacity:1 !important; filter:alpha(opacity=100) !important; -webkit-transition:0s !important; -moz-transition:0s !important; -o-transition:0s !important; transition:0s !important;} #mainvisual_box .flexslider .slides li a:hover{cursor:default;} #mainvisual_box .flexslider .slides li .loupe{display:none;} #mainvisual_box .flexslider .flex-control-nav{width:100%; height:auto; position:absolute; text-align:center; z-index:10; bottom:-14px;} #mainvisual_box .flexslider .flex-control-nav li{margin:0 4px; display:inline-block;} #mainvisual_box .flex-control-paging li{display:inline-block; margin:0 4.5px;} #mainvisual_box .flex-control-paging li a{display:block; width:10px !important; height:10px !important; box-shadow:none !important; margin:0 auto; background:#b1b1ac; cursor:pointer; text-indent:-9999px; -webkit-border-radius:20px; -moz-border-radius:20px; -o-border-radius:20px; border-radius:20px;} #mainvisual_box .flex-control-paging li a.flex-active{background:#a30b1a !important; cursor:default !important;} /* 左右の矢印 */ #mainvisual_box .flex-direction-nav .flex-prev, .flex-direction-nav .flex-next{width:18px; height:30px;} #mainvisual_box .flex-direction-nav .flex-prev{left:13px; background:url(../images/img_itemdetail_prev.png) no-repeat left center; -ms-background-size:18px 30px; -moz-background-size:18px 30px; -webkit-background-size:18px 30px; background-size:18px 30px;} #mainvisual_box .flex-direction-nav .flex-next{right:13px; background:url(../images/img_itemdetail_next.png) no-repeat right center; -ms-background-size:18px 30px; -moz-background-size:18px 30px; -webkit-background-size:18px 30px; background-size:18px 30px;} #mainvisual_box .flex-direction-nav .flex-prev:hover, .flex-direction-nav .flex-next:hover{opacity:0.5 !important; filter:alpha(opacity=50) !important;} #mainvisual_box .flex-direction-nav a{text-decoration:none; display:block; width:30px; height:30px; margin:0; position:absolute; top:40%; z-index:10; overflow:hidden; opacity:1; cursor:pointer; color:#333; text-shadow:none;} #mainvisual_box .flex-direction-nav .flex-nav-prev a:before{display:inline-block; content:''; text-shadow:none;} #mainvisual_box .flex-direction-nav .flex-nav-next a:before{display:inline-block; content:''; text-shadow:none;} #mainvisual_box .flexslider:hover .flex-direction-nav .flex-prev{opacity:1; left:13px; top:40%;} #mainvisual_box .flexslider:hover .flex-direction-nav .flex-prev:hover{opacity:1;} #mainvisual_box .flexslider:hover .flex-direction-nav .flex-next{opacity:1; right:13px; top:40%;} #mainvisual_box .flexslider:hover .flex-direction-nav .flex-next:hover{opacity:1;} } /* responsive_slider - おすすめ商品,この商品を見た人は他にもこんな商品を見ています(slick.js使用) -------------------------------------------------------------*/ #detail_recommend{margin-bottom:30px;} .responsive_slider{display:none;} .slick_inner a:hover{text-decoration:none !important;} .slick_inner a .head_ttl{padding:5px 8px 0px 8px;} .slick_inner a .head_ttl:hover{} .slick_inner a .head_ttl:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ .slick_inner a .head_ttl .icon_area{color:#fff; float:left; display:table-cell; text-align:center; vertical-align: middle;} .slick_inner a .head_ttl .icon_area i{line-height:37px; text-align:center; vertical-align:middle;} .slick_inner a .item_ict, .slick_inner a .slick_ict .icon_area, .slick_inner a .slick_ict{color:#e73440;} /* ICT基盤・運用の色 */ .slick_inner a .item_secur, .slick_inner a .slick_secur .icon_area, .slick_inner a .slick_secur{color:#1782db;} /* セキュリティの色 */ .slick_inner a .item_commu, .slick_inner a .slick_commu .icon_area, .slick_inner a .slick_commu{color:#c07000;} /* コミュニケーション・情報共有の色 */ .slick_inner a .item_solute, .slick_inner a .slick_solute .icon_area, .slick_inner a .slick_solute{color:#1ba12b;} /* 業務ソリューションの色 */ .slick_inner a .item_industry_solute, .slick_inner a .slick_industry_solute .icon_area, .slick_inner a .slick_industry_solute{color:#706aba;} /* 業種別ソリューションの色 */ .slick_inner a .item_business_service, .slick_inner a .slick_business_service .icon_area, .slick_inner a .slick_business_service{color:#8b8807;} /* ビジネスサービスの色 */ .slick_inner a .item_product, .slick_inner a .slick_product .icon_area, .slick_inner a .slick_product{color:#87867e;} /* 製品の色 */ .slick_inner a .head_ttl h3{padding:3px 0 0 5px; line-height:1.3; font-size:12px; font-weight:bold; height:29px; overflow:hidden; display:table-cell; vertical-align:middle;} .slick_inner a .bottom_info{padding:5px 8px;} .slick_inner a .bottom_info .offer{margin:8px 0 0 0; color:#828282; font-size:12px; height:30px;} .slick_inner a .bottom_info .price{margin:0px 8px 0 0; text-align:right; color:#a30b1a; font-size:12px;} .slick-slide{min-height:initial; min-height:auto;} /* ウィンドウ幅が1021px以上の場合に適用するスタイル(PC) */ @media screen and (min-width:1021px){ .slick_inner{margin:auto; position:relative;} .slick_inner h2{display:inline-block; font-size:26px; padding:0 0 3px 0; border-bottom:2px solid #a30b1a; margin-bottom:30px;} /* 土台 */ .slick-slider{margin:0 auto;} .responsive_slider{margin:auto; width:940px; height:255px; padding:0;} .slick-list.draggable{margin:0 0 0 1px;} .slick-initialized .slick-slide{height:255px; width:236px !important;} .slick-initialized .slick-slide a{-webkit-transition:all .5s; transition:all .5s; min-height:252px; width:220px; display:block; box-shadow:0 2px 2px #CCC; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px; background:#fff; float:left;} .slick-initialized .slick-slide a:hover{box-shadow:0 2px 10px #CCC; -webkit-transition:all .5s; transition:all .5s;} .slick-initialized .slick-slide a:hover img{opacity:1 !important; filter:alpha(opacity=100) !important;} #add_width{width:944px !important;} /* 4つ以上の場合は適用しない　リスト数が４つ以下の場合はこの幅を適用 */ /*左右の矢印の位置を変える*/ .slick-prev:before, .slick-next:before{content:'';} .slick-prev, .slick-next{font-size:0; line-height:0; position:absolute; top:50%; display:block; width:24px; height:68px; margin-top:0; padding:0; cursor:pointer; color:transparent; border:none; outline:none;} .slick-prev{left:-36px; top:92px; z-index:100; background:url(../images/icon_arrow_prev.png) no-repeat left center; -ms-background-size:24px 68px; -moz-background-size:24px 68px; -webkit-background-size:24px 68px; background-size:24px 68px;} .slick-next{right:-36px; top:92px; z-index:100; background:url(../images/icon_arrow_next.png) no-repeat right center; -ms-background-size:24px 68px; -moz-background-size:24px 68px; -webkit-background-size:24px 68px; background-size:24px 68px;} .slick-prev:hover, .slick-next:hover{color:transparent; outline:none; opacity:0.6; filter:alpha(opacity=60);} .slick-slider .img_box{height:130px; overflow:hidden; clear:both; position:relative;} .slick-slider .img_box img:hover{-webkit-transform:scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform:scale(1.2); transform:scale(1.2);} } /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ .slick_inner{width:758px; margin:auto; position:relative;} .slick_inner h2{display:inline-block; font-size:26px; padding:0 0 3px 0; border-bottom:2px solid #a30b1a; margin-bottom:30px;} /* 土台 */ .slick-slider{margin:0 auto; width:758px;} .responsive_slider{margin:auto; width:726px; height:255px; padding:0;} .slick-list.draggable{margin:0 0 0 10px;} .slick-initialized .slick-slide{width:240px !important;} .slick-initialized .slick-slide a{min-height:255px; width:220px; display:block; box-shadow:0 2px 2px #CCC; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px; background:#fff; float:left;} .slick-initialized .slick-slide a{height:100%; min-height:252px; width:220px !important; display:block; box-shadow:0 2px 2px #CCC; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px; background:#fff; float:left;} .slick-list{height:289px;} /* 左右の矢印の位置を変える */ .slick-prev:before, .slick-next:before{content:'';} .slick-prev, .slick-next{font-size:0; line-height:0; position:absolute; top:50%; display:block; width:24px; height:68px; margin-top:0; padding:0; cursor:pointer; color:transparent; border:none; outline:none;} .slick-prev{left:-18px; top:92px; z-index:100; background:url(../images/icon_arrow_prev.png) no-repeat left center; -ms-background-size:24px 68px; -moz-background-size:24px 68px; -webkit-background-size:24px 68px; background-size:24px 68px;} .slick-next{right:-18px; top:92px; z-index:100; background:url(../images/icon_arrow_next.png) no-repeat right center; -ms-background-size:24px 68px; -moz-background-size:24px 68px; -webkit-background-size:24px 68px; background-size:24px 68px;} .slick-prev:hover, .slick-next:hover{color:transparent; outline:none; opacity:0.6; filter:alpha(opacity=60);} .slick-slider .img_box{height:130px; overflow:hidden; clear:both; position:relative;} .slick-slider .img_box img:hover{-webkit-transform:scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform:scale(1.2); transform:scale(1.2);} } /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ #detail_recommend{margin-bottom:15px;} .slick_inner{width:100%;} .slick_inner h2{font-size:20px; margin:20px 0 15px; border-bottom:1px solid #a30b1a; padding:0 0 3px 0; display:inline-block; line-height:1.4;} .slick_inner a .head_ttl{padding:5px 10px 0 10px;} .slick_inner a .head_ttl .icon_area i{display:none;} .slick_inner a .head_ttl h3{padding:8px 0; font-weight:normal; height:46px;} .slick_inner a .bottom_info{padding:5px 10px;} .slick_inner a .bottom_info .offer{height:35px;} .slick_inner a .bottom_info .price{font-weight:bold; color:#ae2734;} /* 土台 */ .slick-slider{width:240px; margin:auto; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px;} .slick-initialized .slick-slide{width:240px !important;} /* 横向き時の幅調整 */ .slick-initialized .slick-slide a{width:240px !important; min-height:286px ;box-shadow:0 2px 2px #CCC; margin:auto; height:auto; float:left; display:block; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px; background:#fff;} .slick-list{height:289px;} /* 左右の矢印の位置を変える */ .slick-prev:before, .slick-next:before{content:'';} .slick-prev, .slick-next{font-size:0; line-height:0; position:absolute; top:50%; display:block; width:22px; height:65px; margin-top:0; padding:0; cursor:pointer; color:transparent; border:none; outline:none;} .slick-list.draggable{margin:0;} .slick-prev{left:-29px; top:104px; z-index:100; background:url(../images/icon_arrow_prev.png) no-repeat left center; -ms-background-size:22px 65px; -moz-background-size:22px 65px; -webkit-background-size:22px 65px; background-size:22px 65px;} .slick-next{right:-29px; top:104px; z-index:100; background:url(../images/icon_arrow_next.png) no-repeat right center; -ms-background-size:22px 65px; -moz-background-size:22px 65px; -webkit-background-size:22px 65px; background-size:22px 65px;} .slick-prev:hover, .slick-next:hover{color:transparent; outline:none; opacity:0.6; filter:alpha(opacity=60);} .slick-slider .img_box{height:148px; width:239px; overflow:hidden; clear:both; position:relative;} .slick-slider .img_box img:hover{-webkit-transform:scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform:scale(1.2); transform:scale(1.2);} } /* ウィンドウ幅が1021px以上の場合に適用するスタイル(PC) */ @media screen and (min-width:1021px){ /* 見出し用スタイル */ #itemDetail .content_info .info_inner .accent{border-left: 5px solid #b22b30; padding: 2px 15px 0;} #itemDetail .content_info .line{border-bottom: 1px solid #666;} #itemDetail .content_info h4.detail{margin-top: 30px; font-size: 16px !important;} #itemDetail .content_info h5.detail{margin-top: 30px; font-size: 14px !important; padding: 0 0 8px !important;} /* 汎用スタイル */ #itemDetail .content_info .mt0{margin-top: 0 !important;} #itemDetail .content_info .detail{margin:20px 0 0; line-height: 1.45 !important;} /* リスト用スタイル */ #itemDetail .content_info .disc{margin-left: 16px !important;} #itemDetail .content_info ul.disc li{display: list-item !important; list-style: disc !important;} /* テーブル用スタイル */ #itemDetail .content_info table.tbl01 {border-collapse: collapse; border-spacing: 0px; border: solid 1px #aaa; border-radius: 0; box-shadow: none; width: 100%;} #itemDetail .content_info table.tbl01 th {padding: 10px; border: solid 1px #aaa; background-color: #f2f2f0; line-height: 1.45; vertical-align: top;} #itemDetail .content_info table.tbl01 td {padding: 10px; border: solid 1px #b8b8b8; line-height: 1.45; vertical-align: top;} #itemDetail .content_info table.notes {border-collapse: collapse; border: none !important; border-radius: 0; box-shadow: none; margin-top: 5px;} #itemDetail .content_info table.notes th {line-height: 1.3; vertical-align: top; white-space: nowrap; font-weight: normal;} #itemDetail .content_info table.notes td {line-height: 1.3; vertical-align: top;} } /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ /* 見出し用スタイル */ #itemDetail .content_info .info_inner .accent{border-left: 5px solid #b22b30; padding: 0 15px; border-bottom: none;} #itemDetail .content_info .line{border-bottom: 1px solid #666;} #itemDetail .content_info h4.detail{margin-top: 30px; margin-bottom: 0; font-size: 16px !important; font-weight: normal !important;} #itemDetail .content_info h5.detail{margin-top: 30px; margin-bottom: 0; font-size: 14px !important; padding: 0 0 8px !important; border-left: none !important; font-weight: normal !important;} /* 汎用スタイル */ #itemDetail .content_info .mt0{margin-top: 0 !important;} #itemDetail .content_info .detail{margin:20px 0 0; line-height: 1.45 !important;} /* リスト用スタイル */ #itemDetail .content_info .disc{margin-left: 16px !important; margin-bottom: 0 !important; margin-right: 0 !important; margin-top: 0 !important;} #itemDetail .content_info ul.disc li{display: list-item !important; list-style: disc !important; line-height: 1.45 !important; padding: 0 !important;} /* テーブル用スタイル */ #itemDetail .content_info table.tbl01 {border-collapse: collapse; border-spacing: 0px; border: solid 1px #aaa; border-radius: 0; box-shadow: none; width: 100%;} #itemDetail .content_info table.tbl01 th {padding: 10px; border: solid 1px #aaa; background-color: #f2f2f0; line-height: 1.45; vertical-align: top;} #itemDetail .content_info table.tbl01 td {padding: 10px; border: solid 1px #b8b8b8; line-height: 1.45; vertical-align: top;} #itemDetail .content_info table.notes {border-collapse: collapse; border: none !important; border-radius: 0; box-shadow: none; margin-top: 5px;} #itemDetail .content_info table.notes th {line-height: 1.3; vertical-align: top; white-space: nowrap; font-weight: normal;} #itemDetail .content_info table.notes td {line-height: 1.3; vertical-align: top;} } /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ /* 見出し用スタイル */ #itemDetail .content_info .info_inner .accent{border-left: 5px solid #b22b30; padding: 0 15px;} #itemDetail .content_info .line{border-bottom: 1px solid #666;} #itemDetail .content_info h4.detail{margin-top: 30px;} #itemDetail .content_info h5.detail{margin-top: 30px; font-size: 14px !important; padding: 0 0 8px !important;} /* 汎用スタイル */ #itemDetail .content_info .mt0{margin-top: 0 !important;} #itemDetail .content_info .detail{margin:20px 0 0; line-height: 1.45 !important;} /* リスト用スタイル */ #itemDetail .content_info .disc{margin-left: 16px !important;} #itemDetail .content_info ul.disc li{display: list-item !important; list-style: disc !important;} /* テーブル用スタイル */ #itemDetail .content_info table.tbl01 {border-collapse: collapse; border-spacing: 0px; border: solid 1px #aaa; border-radius: 0; box-shadow: none; width: 100%;} #itemDetail .content_info table.tbl01 th {padding: 10px; border: solid 1px #aaa; background-color: #f2f2f0; line-height: 1.45; vertical-align: top;} #itemDetail .content_info table.tbl01 td {padding: 10px; border: solid 1px #b8b8b8; line-height: 1.45; vertical-align: top;} #itemDetail .content_info table.notes {border-collapse: collapse; border: none !important; border-radius: 0; box-shadow: none; margin-top: 5px;} #itemDetail .content_info table.notes th {line-height: 1.3; vertical-align: top; white-space: nowrap; font-weight: normal;} #itemDetail .content_info table.notes td {line-height: 1.3; vertical-align: top;} } /* ================================================================= 7.カート系、定期系 使用ファイル：cart_***.xhtml teiki_***.xhtml =================================================================*/ #cartFlow{margin:20px auto 0 auto; padding:20px;} #cartFlow img{display:inline; max-width:initial; max-width:auto;} /* 必須のアイコン等 */ #cartFlow h2{display:inline-block; font-size:26px; padding:0 0 3px 0; border-bottom:2px solid #a30b1a; margin-bottom:20px;} #cartFlow h3{margin:5px 10px 5px 0; padding:6px; border-left:2px solid #a30b1a; font-size:20px; clear:both;} #cartFlow h4{margin:12px 10px 5px 0px; font-size:13px; clear:both;} #cartFlow h5{margin:5px 10px; font-size:12px; clear:both;} #cartFlow .total{margin:10px 0 40px; padding-bottom:5px; border-bottom:2px solid #CCC;} #cartFlow .total strong{color:#a30b1a;} #cartFlow .total_seisan_price{margin-top:20px; text-align:right;} #cartFlow div.sentence{padding:0 0 15px;} #cartFlow div.sentence p{line-height:1.6;} #cartFlow div.sentence p .required_icon{margin:0 3px;} #cartFlow div.sentence.clearfloat{clear:both !important; float:none;} #cartFlow div.sentenceBorder{margin:0 10px 15px; border-bottom:#999 1px dotted;} #cartFlow div.sentence p.item_name{padding:10px 0; border-top:1px solid #CCC; font-size:110%; font-weight:bold;} #cartFlow div.sentence p.comment{color:#999; font-size:90%;} #cartFlow div.sentence p.information{color:#666; font-size:90%; text-align:right;} #cartFlow div.sentence input[type="button"]{padding:7px; margin-left:10px;} #cartFlow div.sentence textarea{width:400px; height:70px;} #cartFlow div.sentence input[type="radio"], #cartFlow div.sentence input[type="checkbox"]{margin:14px 0;} #cartFlow div.sentence .HTMLFORM_LABEL_GROUP{padding:0 0 13px; display:inline-block;} #cartFlow div.sentence p.form_attention{color:#666; font-size:12px; margin-top:5px;} #cartFlow div.price{padding-top:10px; border-top:1px solid #CCC; text-align:right;} #cartFlow div.buttonarea{padding:10px 10px 20px; text-align:center; clear:both; overflow:hidden;} #cartFlow div.buttonarea input{width:25%;} #cartFlow div.buttonarea a{width:25%;} #cartFlow div.buttonarea_detail{padding:5px 10px 0 0; text-align:center; float:right;} #cartFlow div.buttonarea_detail a{display:block; margin-bottom:0;} #cartFlow div.teiki{zoom:1; padding-bottom:15px;} #cartFlow div.teiki:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #cartFlow div.teiki h4{margin:13px 10px 5px; padding-left:5px; font-size:110%; float:left;} #cartFlow .quantity{padding:0 10px 15px;} #cartFlow .point{color:#C00;} #cartFlow .error{color:#C00; font-size:90%; font-weight:bold; line-height:150%; vertical-align:middle;} #cartFlow .sentence .inner{border-bottom:1px solid #CCC; padding:5px 0 0 0;} #cartFlow .sentence .inner .img{float:left;} #cartFlow .sentence .inner .text {margin-left:84px;} #cartFlow .sentence .inner .text p.item_name{border-top:none; padding-top:0; margin-bottom:5px;} #cartFlow .setumei_text{margin:0 0 10px;} #cartFlow .radio_list:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #cartFlow .radio_list li{float:left; margin:10px 10px 10px 0;} #cartFlow .amount_table .amount_select_cell{padding:0 10px;} #cartFlow .amount_table .input_btn{display:block; height:34px;} #cartFlow .item_code{margin-bottom:10px;} #cartFlow .member_list{margin:20px 13px 12px 13px;} #cartFlow .member_list li{background:url(../images/common/icon_footer_arrow.png) no-repeat left center; font-size:13px; margin-bottom:17px; padding-left:11px; -ms-background-size:5px 8px; -moz-background-size:5px 8px; -webkit-background-size:5px 8px; background-size:5px 8px;} #cartFlow .supporter_input input[type="text"]{width:50%; float:left;} #cartFlow .supporter_input input[type="button"]{padding:9px 6px;} #cartFlow .supporter_input .input_btn{display:block; height:38px; padding-left:10px;} #cartFlow .claim_area{position:relative;} #cartFlow .claim_btn{position:absolute; top:0; right:0; padding:0 !important;} #cartFlow .claim_btn .btn{padding:6px 12px;} /* カート用ボックス */ #cartFlow .input_area_cart_box{margin:0 auto 25px auto; padding:20px 0 0; clear:both;} #cartFlow .input_area_cart_box:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #cartFlow .input_area_cart_box h3{margin:30px 10px 5px 0; padding:6px; border-left:2px solid #a30b1a; font-size:20px; clear:both;} /* 自由項目のinputを調整 */ #cartFlow .input_seikyu_busyo input{width:60%;} /* 利用規約スタイル */ #cartFlow .terms_box{display:none; margin:10px 0 30px; border:1px solid #CCC; height:150px; padding:10px; overflow:auto;} #cartFlow .terms_box p{margin:0; line-height:1.5;} #cartFlow .check_area{text-align:center; margin:0 0 20px;} #cartFlow .check_area input{vertical-align:text-bottom;} #cartFlow .check_area label{margin-left:5px;} #cartFlow .check_area label:hover{cursor:pointer;} #cartFlow .buttonarea .btn.btn-primary.disabled{width:240px; height:40px;} #cartFlow .buttonarea .btn_alert{display:inline-block;} #cartFlow .buttonarea .btn.btn-link{z-index:1;} /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ #cartFlow{width:auto;} /* 会員登録用ボックス */ #cartFlow .input_area_cart_box{margin:0 auto 25px auto; clear:both;} /* 利用規約スタイル */ #cartFlow .buttonarea .btn.btn-primary.disabled{width:174.5px;} /* デバイスがiphone,Androidの場合、スクロールバーを装飾する */ #cartFlow .terms_box::-webkit-scrollbar{height:5px; width:5px;} #cartFlow .terms_box::-webkit-scrollbar-track{background:#F1F1F1;} #cartFlow .terms_box::-webkit-scrollbar-thumb{background:#7e7d76;} #cartFlow .terms_box::-webkit-scrollbar-track-piece:start{background:#F1F1F1;} #cartFlow .terms_box::-webkit-scrollbar-track-piece:end{background:#F1F1F1;} } /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ #cartFlow{width:100%; padding:10px;} #cartFlow h2{margin-bottom:10px; font-size:20px;} #cartFlow h3{width:auto; float:none; font-size:16px;} #cartFlow h4{margin:10px 0;} #cartFlow .total{margin-bottom:10px;} #cartFlow div.sentence{padding:10px 0 15px; float:none;} #cartFlow div.buttonarea{padding:10px 0 20px;} #cartFlow div.buttonarea input{width:100%; margin:0 0 10px;} #cartFlow div.buttonarea a{width:100%; margin:0 0 10px;} #cartFlow div.sentence textarea{width:100%;} #cartFlow .member_list{margin:20px 0 12px;} #cartFlow .amount_table .amount_select_cell select{background:#fff url(../images/common/icon_down_arrow.png) no-repeat 90% 50%; -ms-background-size:8px 5px; -moz-background-size:8px 5px; -webkit-background-size:8px 5px; background-size:8px 5px;} #cartFlow .supporter_input input[type="button"]{padding:11px 6px;} #cartFlow .supporter_input .input_btn{height:42px;} #cartFlow .claim_btn .btn{padding:6px 8px;} /* 自由項目のinputを調整 */ #cartFlow .input_seikyu_busyo input{width:100%;} /* 会員登録用ボックス */ #cartFlow .input_area_cart_box{width:auto; padding:15px 0 0; margin:0;} #cartFlow .input_area_cart_box h3{width:auto; float:none; font-size:16px;} /* 利用規約スタイル */ #cartFlow .buttonarea .btn.btn-primary.disabled{width:100%;} #cartFlow .buttonarea .btn_alert{display:block; height:50px;} } /* ================================================================= 8.それ以外のページ 使用ファイル：すべてのファイル =================================================================*/ #content{padding:20px;} #content img{display:inline; max-width:initial; max-width:auto;} /* 必須のアイコン等 */ #content h2{display:inline-block; font-size:26px; padding:0 0 3px 0; border-bottom:2px solid #a30b1a; margin-bottom:20px;} #content h3{margin:5px 10px 5px 0; padding:6px; border-left:2px solid #a30b1a; font-size:20px; clear:both;} #content h3.history_ttl{width:auto;} #content h4{margin:5px 10px; font-size:13px;} #content div.sentence{padding:0 0 15px;} #content div.sentence p{line-height:1.6;} #content div.sentence p .required_icon{margin:0 3px;} #content div.sentence.clearfloat{clear:both !important;} #content div.sentence input[type="button"]{padding:7px; margin-left:10px;} #content div.sentence textarea{width:380px; height:70px;} #content div.sentence input[type="radio"], #content div.sentence input[type="checkbox"]{margin:14px 0;} #content div.sentence .link_text{text-align:center;} #content div.sentence .HTMLFORM_LABEL_GROUP{display:inline-block;} #content dl.sentence{padding:10px 10px 15px;} #content dl.sentence dt{margin:0 0 10px 0; color:#C00;} #content dl.sentence dd{margin:0 0 10px 0; color:#000080;} #content div.sentence p.form_attention{color:#666; font-size:12px; margin-top:5px;} #content div.buttonarea{padding:10px 10px 20px; text-align:center; clear:both; overflow:hidden;} #content div.buttonarea input{width:25%;} #content div.buttonarea a{width:25%;} #content div.buttonarea a.small{ width:40%; line-height:1;} #content div.buttonarea a.sSmall{ width:20%; line-height:1;} #content div.listBorder{border-bottom:#CCC 1px solid;margin-bottom:10px;} #content .pagelink .button a{display:block; width:60px; padding:8px 0; background:-webkit-gradient(linear,left top,left bottom,from(#999),to(#666)); border-radius:5px; border:1px solid #333; text-shadow:-1px 1px 1px #666; color:#FFF; font-weight:bold; text-align:center; text-decoration:none;}/* gray button */ #content .pagelink td{padding-right:10px;} #content .pagelink td:first-child{padding-left:10px;} #content .pagelink td.button{width:60px;} #content .pagelink td.link{text-align:center; letter-spacing:0.2em;} #content .pagelink{margin-bottom:0;} #content table.credit td{padding-right:5px;} #content div.buttonarea_detail{padding:5px 10px 0 0; text-align:center; float:right; overflow:hidden;} #content div.buttonarea_detail a{display:block; margin-bottom:0;} #content div.teiki{zoom:1; padding-bottom:15px;} #content div.teiki:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #content div.teiki h4{margin:13px 10px 5px; padding-left:5px; font-size:110%; float:left;} /* ================================================================= 9.マイページ 使用ファイル：すべてのファイル =================================================================*/ #content .member_list{ padding:16px 0 0px 0; border-bottom: solid 1px #ccc; margin-bottom: 32px; } #content .member_list li{ font-size: 18px; clear: both; padding: 16px 16px 16px 16px; min-height: 70px; position:relative; border-top: solid 1px #ccc; } #content .member_list a:hover{ color:#a30b1a; text-decoration:none; } #content .member_list li span{display:block;} #content .member_list .material-icons { width: 36px; height: 36px; font-size: 36px; float: left; margin-right: 16px; text-align: center; vertical-align: middle; display:block; } #content .member_list .member_list_item-text{margin-left:48px;font-weight:bold;line-height:1.2em;} #content .member_list .member_list_item-text-body{font-size:14px;font-weight:normal;} /* ウィンドウ幅が0〜640pxの場合に適用するスタイル(SP) */ @media screen and (max-width:640px){ } #content .order_attention{color:#a30b1a;} #content .regist_radio_box li{float:left; padding:8px; margin:5px 0;} /* 利用規約スタイル */ #content .terms_box{display:none; margin:10px 0 30px; border:1px solid #CCC; height:150px; padding:10px; overflow:auto;} #content .terms_box p{margin:0; line-height:1.5;} #content .agree_download_area{width:100%; background-color:#f2f2f2; text-align:center; margin-bottom:20px;} #content .agree_download_area span{background-color:#b02d34; color:#fff; padding:0.3em 0.2em 0.2em 0.2em; margin:10px 10px 10px 0; display:inline-block;} #content .check_area{text-align:center; margin:0 0 20px;} #content .check_area input{vertical-align:text-bottom;} #content .check_area label{margin-left:5px;} #content .check_area label:hover{cursor:pointer;} #content .buttonarea .btn.btn-primary.disabled{width:240px; height:40px;} #content .buttonarea .btn_regist_alert{display:inline-block;} /* 契約系スタイル */ #content .teiki_box{margin:0 0 50px;} /* 自由項目のinputを調整 */ #content .input_seikyu_busyo input{width:60%;} /* 定期購入用ボックス */ #content .teiki_area_box{margin:0 auto 25px auto; padding:20px 0 0; clear:both; position:relative;} #content .teiki_area_box:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #content .teiki_area_box h4{margin:0 0 10px; font-weight:bold;} #content .teiki_area_box p{margin:0 0 10px;} #content .teiki_area_box .detail_btn{position:absolute; top:30px; right:10px;} #content .teiki_area_box .detail_btn a{width:80px; padding:4px 0;} #content .teiki_area_box .input_table{margin-top:0px !important;} #content .teiki_area_box .teiki_list{margin:20px 13px 12px 13px; float:right;} #content .teiki_area_box .teiki_list li{font-size:13px; text-align:right; margin-bottom:10px;} #content .teiki_area_box .teiki_list li a{background:url(../images/common/icon_footer_arrow.png) no-repeat left center; padding-left:11px; -ms-background-size:5px 8px; -moz-background-size:5px 8px; -webkit-background-size:5px 8px; background-size:5px 8px;} #content .teiki_area_box.teiki_col{margin-bottom:5px;} /* 会員登録用ボックス */ #content .input_area_regist_box{margin:0 auto 25px auto; padding:20px 0 0; clear:both;} #content .input_area_regist_box:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #content .input_area_regist_box h3{font-size:20px; margin:20px 0 0 0; border-left:none; padding:6px 6px 6px 0; width:auto;} /* お問い合わせ用ボックス */ #content .input_area_apply_box{margin:0 auto 25px auto; padding:20px 0 0; clear:both;} #content .input_area_apply_box:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ /* ログイン入力系ボックス */ #content .input_area_box{width:559px; margin:20px auto; padding:0; clear:both;} #content .input_area_box input{width:80%;} #content .input_area_box:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ /* ウィンドウ幅が641px以上の場合に適用するスタイル(PC,TB) */ @media screen and (min-width:641px){ #content{width:auto; margin:15px auto 0 auto;} } /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ /* デバイスがiphone,Androidの場合、スクロールバーを装飾する */ #content .terms_box::-webkit-scrollbar{height:5px; width:5px;} #content .terms_box::-webkit-scrollbar-track{background:#F1F1F1;} #content .terms_box::-webkit-scrollbar-thumb{background:#7e7d76;} #content .terms_box::-webkit-scrollbar-track-piece:start{background:#F1F1F1;} #content .terms_box::-webkit-scrollbar-track-piece:end{background:#F1F1F1;} /* 利用規約スタイル */ #content .buttonarea .btn.btn-primary.disabled{width:174.5px; height:40px;} /* 定期購入用ボックス */ #content .teiki_area_box{margin:0 auto 25px auto; clear:both;} /* 会員登録用ボックス */ #content .input_area_regist_box{margin:0 auto 25px auto; clear:both;} /* お問い合わせ用ボックス */ #content .input_area_apply_box{margin:0 auto 25px auto; clear:both;} /* ログイン入力系ボックス */ #content .input_area_box{margin:0 auto 25px auto; clear:both;} } /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ /* 定期購入用ボックス */ #content .teiki_area_box .detail_btn{top:44px;} #content .teiki_area_box .detail_btn a{width:auto; padding:4px 6px;} #content{width:100%; padding:10px; margin-top:20px;} #content h2{margin-bottom:10px; font-size:20px;} #content h3{width:auto; float:none; font-size:16px;} #content div.sentence{padding:10px 0 15px; float:none;} #content div.buttonarea{padding:10px 0 20px;} #content div.buttonarea input{width:100%; margin:0 0 10px;} #content div.buttonarea a{width:100%; margin:0 0 10px;} #content div.sentence textarea{width:100%;} #content div.sentence .HTMLFORM_LABEL_GROUP{padding:0 0 13px;} #content div.sentence img{max-width:100%;} #content .member_list{margin:20px 0 12px;} /* 利用規約スタイル */ #content .buttonarea .btn.btn-primary.disabled{width:100%;} /* 自由項目のinputを調整 */ #content .input_seikyu_busyo input{width:100%;} /* 定期購入用ボックス */ #content .teiki_area_box{width:auto; padding:15px 0 0; margin:0 0 15px;} /* 会員登録用ボックス */ #content .input_area_regist_box{width:auto; padding:15px 0 0; margin:0 0 15px;} /* お問い合わせ用ボックス */ #content .input_area_apply_box{width:auto; padding:15px 0 0; margin:0 0 15px;} /* ログイン入力系ボックス */ #content .input_area_box{width:auto; padding:15px 0 0; margin:0 0 15px;} #content .input_area_box input{width:100%;} } /* ================================================================= 9.メッセージ 使用ファイル：common/messages.xhtml =================================================================*/ #error{padding:16px 16px 20px 16px; clear:both;} #error table{width:auto; border:0;} #error td{padding:8px; text-align:left; border:0;} #error td.ico{width:56px;} #error i.material-icons{text-align:center; vertical-align:top;font-size:40px;color:#a30b1a;} /*#error .ico img{width:27px !important; height:25px !important; max-width:initial; max-width:auto; vertical-align:middle; display:inline;}*/ #error .content{color:#a30b1a; font-size:120%; font-weight:normal; line-height:150%; vertical-align:middle;} /* ================================================================= 10.フッター 使用ファイル：common/footer.xhtml =================================================================*/ /* footer - フッター -------------------------------------------------------------*/ footer{margin-top:78px; clear:both;} footer.footer_cart{margin-top:20px;} .mt0footer { margin-top: 0;} footer .trademark{width:100%; min-width:1020px;} footer .trademark .inner{width:1020px; margin:0 auto; padding:0 5px;} footer .page_top_area{width:100%; min-width:1020px;} footer .page_top_area .inner{width:1020px; margin:0 auto; padding:0 5px;} footer .page_top_area .inner:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ footer .page_top_area #page_top{font-size:12px; padding-top:17px; margin-bottom:12px; float:right; background:url(../images/common/icon_page_top.png) no-repeat center top; -ms-background-size:20px 12px; -moz-background-size:20px 12px; -webkit-background-size:20px 12px; background-size:20px 12px;} footer .page_top_area #page_top:hover{text-decoration:none !important; cursor:pointer;} footer .page_top_area #page_top a{color:#333; -webkit-transition:0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;} footer .page_top_area #page_top:hover a{opacity:.6; filter:alpha(opacity=60); text-decoration:none !important;} footer .footer_top{width:100%; min-width:1020px; background-color:#fff; border-top:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc;} footer .footer_top .inner{width:1020px; margin:0 auto; padding:13px 5px;} footer .footer_top .inner:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ footer .footer_top .footer_top_area:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ footer .footer_top .sns_footer{float:left; margin:24px 28px 0 0;} footer .footer_top .sns_footer li{display:inline-block;} footer .footer_top .sns_footer li a{-webkit-transition:0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;} footer .footer_top .sns_footer .sns_fb a{background:url(../images/common/icon_big_fb_pc.png) no-repeat 0 0; margin:0 0 0 5px; padding:13px 0 0 14px;} footer .footer_top .sns_footer .sns_tt a{background:url(../images/common/icon_big_tt_pc.png) no-repeat 0 0; margin:0 0 0 15px; padding:13px 27px 0 0;} footer .footer_top .sns_footer .sns_gp a{background:url(../images/common/icon_big_gp_pc.png) no-repeat 0 0; margin:0 0 0 13px; padding:13px 37px 0 0;} footer .footer_top .sns_footer li a:hover{opacity:.6; filter:alpha(opacity=60); text-decoration:none !important;} footer .footer_top .footer_top_area .footer_top_text{float:left; padding:7px 19px 7px 28px; border-left:1px solid #dcdcdc;} footer .footer_top .footer_top_area .tel_catch{font-size:16px; margin-bottom:5px; letter-spacing:0.2px;} footer .footer_top .footer_top_area .tel_sub_catch{font-size:10px; letter-spacing:0.2px;} footer .footer_top .footer_top_area .tel_img{margin:10px 0 0 0; display:inline-block;} footer .footer_top .footer_top_area .buttonarea{float:right;} footer .footer_top .footer_top_area .buttonarea a{background:#ebebe6; font-size:16px; color:#333; padding:14px 15px; box-shadow:rgba(113, 135, 164, 0.270588) 0 2px 1px 0; -webkit-box-shadow:rgba(113, 135, 164, 0.270588) 0 2px 1px 0; -moz-box-shadow:rgba(113, 135, 164, 0.270588) 0 2px 1px 0;} footer .footer_main{width:100%; padding:20px 0 35px; min-width:1020px; background-color:#fff; border-bottom:1px solid #dcdcdc; clear:both;} footer .footer_main:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ footer .footer_main .inner{width:1020px; margin:0 auto; padding:0 5px; position:relative;} footer .footer_main .inner:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ footer .footer_main ul li a{color:#333;} footer .footer_main .footer_list{float:left;} footer .footer_main .footer_list li a.toggle_ttl{font-size:14px; cursor:default !important; margin-bottom:7px; display:block;} footer .footer_main .footer_list li a.toggle_ttl:hover{text-decoration:none !important; cursor:default !important;} footer .footer_main .footer_list li a.toggle_ttl:focus{text-decoration:none !important; cursor:default !important;} footer .footer_main .footer_list li.pc_guide{font-size:14px; margin:28px 0 0;} footer .footer_main p.sp_guide{display:none;} footer .footer_main .about_azmarche{font-size:14px; cursor:default !important; margin-bottom:7px; display:block;} footer .footer_main .guide:hover, footer .footer_main .about_azmarche:hover{text-decoration:none !important; cursor:default !important;} footer .footer_main .guide:focus, footer .footer_main .about_azmarche:focus{text-decoration:none !important; cursor:default !important;} footer .footer_main .guide a, footer .footer_main .about_azmarche a{color:#333;} footer .footer_main .footer_list .refine_item{display:none;} footer .footer_main .sub_menu{font-size:12px; display:block; border:0;} footer .footer_main .sub_menu li{margin-bottom:7px;} footer .footer_main .other_refine_list{float:left; margin:24px 52px 0 26px; font-size:12px;} footer .footer_main .other_refine_list li{margin-bottom:7px;} footer .footer_main .footer_list.blog{border-left:1px solid #dcdcdc; padding-left:30px; min-height:168px;} footer .footer_main .pc_azmarche_area{margin-left:20px; padding-right:30px; float:left; border-right:1px solid #dcdcdc; min-height:168px;} footer .footer_main .footer_other_list li{margin-bottom:7px; font-size:12px;} footer .footer_main .pc_azmarche_area .footer_other_list { margin-top: 27px; } footer .footer_main .site_policy_box{position:absolute; top:24px; right:5px;} footer .footer_main .site_policy_box #siteseal{margin:25px 0 0 20px; display:inline-block;} footer .footer_main .site_policy_box a:hover{text-decoration:none !important;} footer .footer_main .site_policy_box img{display:inline-block;} footer .footer_main .site_policy_box img:hover{cursor:default; opacity:1 !important; filter:alpha(opacity=100) !important; cursor:pointer;} footer .footer_bottom{width:100%; min-width:1020px; height:100px; border-bottom:1px solid #dcdcdc; background:#fff url(../images/common/bg_footer_pc.png) repeat-x center bottom;} footer .footer_bottom .inner{width:1020px; margin:0 auto; padding:0 5px; clear:both;} footer .footer_bottom .img_logo{padding:12px 0 0 0; display:inline-block;} footer .footer_bottom .img_logo img{width:223px;} footer .footer_bottom .copy{float:right; font-size:10px; margin-top:16px;} /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ footer .trademark{width:auto; min-width:768px;} footer .trademark .inner{width:768px;} footer .page_top_area{width:auto; min-width:768px;} footer .page_top_area .inner{width:768px;} footer .page_top_area #page_top{margin-bottom:10px;} footer .footer_top{width:auto; min-width:768px;} footer .footer_top .inner{width:768px; padding:13px 5px;} footer .footer_top .sns_footer{float:left; margin:24px 14px 0 0;} footer .footer_top .footer_top_area .footer_top_text{padding:0 19px 0 14px;} footer .footer_top .footer_top_area .tel_img{margin:5px 0 0 0;} footer .footer_top .footer_top_area .tel_img img{width:250px;} footer .footer_top .footer_top_area .tel_catch{font-size:14px; margin:0;} footer .footer_top .footer_top_area .tel_sub_catch{margin:0 0 5px; letter-spacing:-0.1px;} footer .footer_top .footer_top_area .buttonarea{width:300px; margin-right:16px;} footer .footer_top .footer_top_area .buttonarea a{font-size:14px; padding:4px 0; width:300px;} footer .footer_main{width:auto; min-width:768px; padding:20px 0 65px;} footer .footer_main .inner{width:768px;} footer .footer_main .sub_menu{display:block; border:0;} footer .footer_main p.guide{position:absolute; right:300px; right:362px; top:87px;} footer .footer_main .pc_azmarche_area{margin-left:20px; padding-right:0; border-right:none;} footer .footer_main .pc_azmarche_area .footer_other_list { margin-top: 27px; } footer .footer_main .site_policy_box{top:130px; right:5px;} footer .footer_bottom{width:auto; min-width:768px;} footer .footer_bottom .inner{width:768px;} } /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ footer .trademark{width:100%; min-width:initial; min-width:auto; padding:0 8px; margin-bottom:10px;} footer .trademark .inner{width:auto; line-height:1.4;} footer{margin-top:35px; overflow:hidden;} footer .page_top_area{width:100%; min-width:initial; min-width:auto; padding:0 13px;} footer .page_top_area .inner{width:auto;} footer .page_top_area #page_top{font-size:13px; float:none; text-align:center; margin-bottom:6px; -ms-background-size:24px 11px; -moz-background-size:24px 11px; -webkit-background-size:24px 11px; background-size:24px 11px;} footer .footer_top{width:100%; min-width:initial; min-width:auto; padding:0 13px;} footer .footer_top .inner{width:auto; padding:13px 0 20px;} footer .footer_top .footer_top_area .footer_top_text{float:none; padding:0 0 7px; border-left:none; text-align:center;} footer .footer_top .footer_top_area .tel_img{margin:4px 0 0 0;} footer .footer_top .footer_top_area .tel_img img{width:262px;} footer .footer_top .footer_top_area .tel_catch{font-size:14px;} footer .footer_top .footer_top_area .tel_sub_catch{font-size:9.5px; margin-bottom:13px; letter-spacing:-0.7px;} footer .footer_top .footer_top_area .buttonarea{float:none; text-align:center; margin-bottom:20px;} footer .footer_top .footer_top_area .buttonarea a{width:100%; padding:9px 0;} footer .footer_top .sns_footer{float:none; text-align:center; margin:0;} footer .footer_top .sns_footer li{margin-right:30px;} footer .footer_top .sns_footer li:last-child{margin-right:0;} footer .footer_top .sns_footer li a{display:block;} footer .footer_top .sns_footer .sns_fb a{background:url(../images/common/icon_big_fb_sp.png) no-repeat 0 0; margin:0; padding:21px 21px; -ms-background-size:42px 42px; -moz-background-size:42px 42px; -webkit-background-size:42px 42px; background-size:42px 42px;} footer .footer_top .sns_footer .sns_tt a{background:url(../images/common/icon_big_tt_sp.png) no-repeat 0 0; margin:0; padding:21px 21px; -ms-background-size:42px 42px; -moz-background-size:42px 42px; -webkit-background-size:42px 42px; background-size:42px 42px;} footer .footer_top .sns_footer .sns_gp a{background:url(../images/common/icon_big_gp_sp.png) no-repeat 0 0; margin:0; padding:21px 21px; -ms-background-size:42px 42px; -moz-background-size:42px 42px; -webkit-background-size:42px 42px; background-size:42px 42px;} footer .footer_main{width:100%; min-width:initial; min-width:auto; padding:0;} footer .footer_main .inner{width:auto; padding:0;} footer .footer_main .footer_list{float:none;} footer .footer_main .footer_list li{display:block; line-height:47px; border-bottom:1px solid #dcdcdc; cursor:pointer; background-color:#FFF;} footer .footer_main .footer_list li a{display:block; text-decoration:none; line-height:47px; padding:0 0 0 13px; color:#333; font-size:15px;} footer .footer_main .footer_list li a:hover{color:#333 !important; cursor:pointer !important;} footer .footer_main .footer_list li.active{border-bottom:0;} footer .footer_main .footer_list li a.toggle_ttl{background:url(../images/common/icon_add.png) no-repeat right center; margin-bottom:0; margin-right:10px; -ms-background-size:14px 14px; -moz-background-size:14px 14px; -webkit-background-size:14px 14px; background-size:14px 14px;} footer .footer_main .footer_list li a.toggle_ttl:hover{cursor:pointer !important;} footer .footer_main .footer_list li a.toggle_ttl.active_remove{background:url(../images/common/icon_remove.png) no-repeat right center; margin-right:10px; -ms-background-size:14px 14px; -moz-background-size:14px 14px; -webkit-background-size:14px 14px; background-size:14px 14px;} footer .footer_main .pc_azmarche_area a.toggle_ttl{background:url(../images/common/icon_add.png) no-repeat right center; margin-bottom:0; margin-right:10px; -ms-background-size:14px 14px; -moz-background-size:14px 14px; -webkit-background-size:14px 14px; background-size:14px 14px;} footer .footer_main .pc_azmarche_area a.toggle_ttl:hover{cursor:pointer !important;} footer .footer_main .pc_azmarche_area a.toggle_ttl.active_remove{background:url(../images/common/icon_remove.png) no-repeat right center; margin-right:10px; -ms-background-size:14px 14px; -moz-background-size:14px 14px; -webkit-background-size:14px 14px; background-size:14px 14px;} footer .footer_main .footer_list .refine_item{display:block;} footer .footer_main .footer_list li.pc_guide{display:none;} footer .footer_main .sub_menu{display:none; border-top:1px solid #fff; border-bottom:0;} footer .footer_main .sub_menu li{background-color:#57564f; margin-bottom:0;} footer .footer_main .sub_menu li a{color:#fff;} footer .footer_main .sub_menu li a:hover{color:#fff !important;} footer .footer_main p.guide{position:inherit; top:0; right:0;} footer .footer_main p.guide, footer .footer_main p.about_azmarche{margin-bottom:0;} footer .footer_main .pc_azmarche_area{margin-left:0; padding-right:0; float:none; border-right:none;} footer .footer_main .footer_list.blog{border-left:none; padding-left:0; min-height:initial; min-height:auto;} footer .footer_main .other_refine_list{display:none;} footer .footer_main p.sp_guide{display:block; line-height:47px; border-bottom:1px solid #dcdcdc; cursor:pointer; background-color:#FFF;} footer .footer_main p.sp_guide a{display:block; text-decoration:none; line-height:47px; padding:0 0 0 13px; color:#333; font-size:15px;} footer .footer_main .about_azmarche{display:block; line-height:47px; border-bottom:1px solid #dcdcdc; cursor:pointer; background-color:#FFF;} footer .footer_main .about_azmarche{display:block; text-decoration:none; line-height:47px; padding:0 0 0 13px; color:#333; font-size:15px;} footer .footer_main .footer_other_list{margin:20px 13px 12px 13px; float:none;} footer .footer_main .footer_other_list li{background:url(../images/common/icon_footer_arrow.png) no-repeat left center; font-size:13px; margin-bottom:17px; padding-left:11px; -ms-background-size:5px 8px; -moz-background-size:5px 8px; -webkit-background-size:5px 8px; background-size:5px 8px;} footer .footer_main .footer_other_list li a{display:block;} footer .footer_main .site_policy_box{clear:both; text-align:center; position:inherit; top:0; right:0; margin:0 0 20px;} footer .footer_main .site_policy_box img{width:70px; height:70px;} footer .footer_main .site_policy_box #siteseal{margin:11px 0 0 32px;} footer .footer_main .site_policy_box #siteseal img{width:128px; height:50px;} footer .footer_bottom{width:100%; min-width:initial; min-width:auto; height:115px; padding:0 13px; background:#fff url(../images/common/bg_footer_sp.png) repeat-x left bottom; -ms-background-size:320px 48px; -moz-background-size:320px 48px; -webkit-background-size:320px 48px; background-size:320px 48px;} footer .footer_bottom .inner{width:auto;} footer .footer_bottom .img_logo{padding:14px 0 0 0;} footer .footer_bottom .copy{float:none; margin-top:5px; font-size:10px;} } /* ================================================================= 11.静的ページ 使用ファイル：ext/guide.xhtml =================================================================*/ #content.guide .guide_box{margin:0 0 35px;} #content.guide .guide_box h3{float:none !important; margin:0 0 10px; width:auto; font-size:20px;} #content.guide .guide_box h4{margin:23px 15px 10px 15px; font-weight:bold; font-size:14px;} #content.guide .guide_box h5{margin:10px 15px; font-size:13px; font-weight:bold;} #content.guide .guide_box h5 .material-icons{vertical-align:middle; padding-right:6px;} #content.guide .guide_box p{margin:0 15px;} #content.guide .guide_box .img_area{margin:18px 15px; text-align:center;} #content.guide .guide_box .img_area img{display:block;} #content.guide .guide_box ul{margin:0 15px; list-style:circle;} #content.guide .guide_box dl{margin:0 15px;} #content.guide .guide_box dt{padding:10px 0;} #content.guide .guide_box dd{padding:10px 0;} #content.guide .guide_box .pdf_link{text-align:center; margin:0 0 35px;} #content.guide .guide_box .pdf_link a{text-decoration:underline !important;} #content.guide .guide_box .pdf_link a:hover{text-decoration:none !important;} #content.guide .guide_box .service_area{ margin:0 auto; margin-top:45px; margin-bottom:60px; zoom:1;} #content.guide .guide_box .service_area:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #content.guide .guide_box .service_area h5{font-size:14px;} #content.guide .guide_box .service_area p.service_btn{ margin:0 auto; font-size: 100%; text-align:center; margin-top:20px; padding:10px; border-radius: 8px 8px 8px 8px; width:130px;} #content.guide .guide_box .service_area a.btn.btn-primary{ background-color:#ebebe6; box-shadow: rgba(113, 135, 164, 0.270588) 0 2px 1px 0;-webkit-box-shadow: rgba(113, 135, 164, 0.270588) 0 2px 1px 0;-moz-box-shadow: rgba(113, 135, 164, 0.270588) 0 2px 1px ; color:#333;} #content.guide .guide_box .service_1 { width:230px; text-align:center; float:left; margin-bottom:20px;} #content.guide .guide_box .service_1 .material-icons{ color:#FFF; background:#e73440; font-size:40px; padding:10px; border-radius:50%;} #content.guide .guide_box .service_1 p { text-align:left;} #content.guide .guide_box .service_2 { width:230px; text-align:center; float:left; margin-bottom:20px;} #content.guide .guide_box .service_2 .material-icons{ color:#FFF; background:#1782db; font-size:40px; padding:10px; border-radius:50%;} #content.guide .guide_box .service_2 p { text-align:left;} #content.guide .guide_box .service_3 { width:230px; text-align:center; float:left; margin-bottom:20px;} #content.guide .guide_box .service_3 .material-icons{ color:#FFF; background:#c07000; font-size:40px; padding:10px; border-radius:50%;} #content.guide .guide_box .service_3 p { text-align:left;} #content.guide .guide_box .service_4 { width:230px; text-align:center; float:left; margin-bottom:20px;} #content.guide .guide_box .service_4 .material-icons{ color:#FFF; background:#1ba12b; font-size:40px; padding:10px; border-radius:50%;} #content.guide .guide_box .service_4 p { text-align:left;} #content.guide .guide_box .service_5 { width:230px; text-align:center; float:left; margin-bottom:20px;} #content.guide .guide_box .service_5 p { text-align:left;} #content.guide .guide_box .service_5 .material-icons{ color:#FFF; background:#706aba; font-size:40px; padding:10px; border-radius:50%;} #content.guide .guide_box .service_6 { width:230px; text-align:center; float:left; margin-bottom:20px;} #content.guide .guide_box .service_6 .material-icons{ color:#FFF; background:#8b8807; font-size:40px; padding:10px; border-radius:50%;} #content.guide .guide_box .service_6 p { text-align:left;} #content.guide .guide_box .service_7 { width:230px; text-align:center; float:left; margin-bottom:20px;} #content.guide .guide_box .service_7 .material-icons{ color:#FFF; background:#87867e; font-size:40px; padding:10px; border-radius:50%;} #content.guide .guide_box .service_7 p { text-align:left;} #content.guide .guide_box .service_8 { width:230px; text-align:center; float:left; margin-bottom:20px;} #content.guide .guide_box .service_8 .material-icons{ color:#FFF; background:#a30b1a; font-size:40px; padding:10px; border-radius:50%;} #content.guide .guide_box .service_8 p { text-align:left;} #content.guide .tag_list{margin:0 0 30px;} #content.guide .tag_list:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #content.guide .tag_list li{float:left !important; margin:0 12px 17px 0; background:#ebebe6; font-size:14px; color:#333; padding:6px 10px 7px 10px; box-shadow:rgba(113, 135, 164, 0.270588) 0 2px 1px 0; -webkit-box-shadow:rgba(113, 135, 164, 0.270588) 0 2px 1px 0; -moz-box-shadow:rgba(113, 135, 164, 0.270588) 0 2px 1px 0;} #content.guide .tag_list li:hover{text-decoration:none !important; cursor:pointer; opacity:0.6; filter:alpha(opacity=60); -webkit-transition:0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;} #content.guide .tag_list li a{padding-right:17px; background:#ebebe6 url(../images/common/icon_down_info_arrow.png) no-repeat right center; -ms-background-size:9px 5px; -moz-background-size:9px 5px; -webkit-background-size:9px 5px; background-size:9px 5px;} #content.guide .tag_list li a:hover{text-decoration:none !important;} /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ } /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ #content.guide .guide_box h3{font-size:16px;} #content.guide .guide_box h4{margin:23px 0 10px; font-weight:bold; font-size:14px;} #content.guide .guide_box h5{margin:10px 0; font-size:13px; font-weight:bold;} #content.guide .guide_box .img_area{margin:18px 0;} #content.guide .guide_box .img_area img{max-width:100%;} #content.guide .guide_box p{margin:0;} #content.guide .guide_box ul{margin:0;} #content.guide .guide_box dl{margin:0;} #content.guide .tag_list{margin:0 0 10px; width:100%;} #content.guide .tag_list li{float:left; display:table; width:48%; margin:0 10px 15px 0; padding:0; font-size:13px; background:#ebebe6 url(../images/common/icon_down_info_arrow.png) no-repeat 90% center; -ms-background-size:9px 5px; -moz-background-size:9px 5px; -webkit-background-size:9px 5px; background-size:9px 5px;} #content.guide .tag_list li:nth-child(2n){margin-right:0; float:right;} #content.guide .tag_list li a{padding:12px 13px; display:table-cell; vertical-align:middle; background:transparent !important;} #content.guide .guide_box .service_area{ margin:0 auto; margin-top:45px; margin-bottom:60px; zoom:1;} #content.guide .guide_box .service_area:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #content.guide .guide_box .service_area h5{font-size:14px;} #content.guide .guide_box .service_area p.service_btn{ margin:0 auto; font-size: 100%; text-align:center; margin-top:0; padding:10px; border-radius: 8px 8px 8px 8px; width:100%;} #content.guide .guide_box .service_area a.btn.btn-primary{ width:100%; background-color:#ebebe6; box-shadow: rgba(113, 135, 164, 0.270588) 0 2px 1px 0;-webkit-box-shadow: rgba(113, 135, 164, 0.270588) 0 2px 1px 0;-moz-box-shadow: rgba(113, 135, 164, 0.270588) 0 2px 1px ; color:#333;} #content.guide .guide_box .service_1{width:100%; float:none;} #content.guide .guide_box .service_1 .material-icons{ color:#FFF; background:#e73440; font-size:40px; padding:10px; border-radius:50%;} #content.guide .guide_box .service_1 p{text-align:left;} #content.guide .guide_box .service_2 {width:100%; float:none;} #content.guide .guide_box .service_2 .material-icons{ color:#FFF; background:#1782db; font-size:40px; padding:10px; border-radius:50%;} #content.guide .guide_box .service_2 p{text-align:left;} #content.guide .guide_box .service_3 { width:100%; float:none;} #content.guide .guide_box .service_3 .material-icons{ color:#FFF; background:#c07000; font-size:40px; padding:10px; border-radius:50%;} #content.guide .guide_box .service_3 p { text-align:left;} #content.guide .guide_box .service_4 { width:100%; float:none;} #content.guide .guide_box .service_4 .material-icons{ color:#FFF; background:#1ba12b; font-size:40px; padding:10px; border-radius:50%;} #content.guide .guide_box .service_4 p { text-align:left;} #content.guide .guide_box .service_5 { width:100%; float:none;} #content.guide .guide_box .service_5 p { text-align:left;} #content.guide .guide_box .service_5 .material-icons{ color:#FFF; background:#706aba; font-size:40px; padding:10px; border-radius:50%;} #content.guide .guide_box .service_6 { width:100%; float:none;} #content.guide .guide_box .service_6 .material-icons{ color:#FFF; background:#8b8807; font-size:40px; padding:10px; border-radius:50%;} #content.guide .guide_box .service_6 p { text-align:left;} #content.guide .guide_box .service_7 { width:100%; float:none;} #content.guide .guide_box .service_7 .material-icons{ color:#FFF; background:#87867e; font-size:40px; padding:10px; border-radius:50%;} #content.guide .guide_box .service_7 p { text-align:left;} #content.guide .guide_box .service_8 { width:100%; float:none;} #content.guide .guide_box .service_8 .material-icons{ color:#FFF; background:#a30b1a; font-size:40px; padding:10px; border-radius:50%;} #content.guide .guide_box .service_8 p { text-align:left;} } /* ================================================================= 12.トピックス系ページ 使用ファイル：topics_list.xhtml,topics_detail.xhtml =================================================================*/ /* topicsList - トピックスページの一覧 -------------------------------------------------------------*/ #topicsList:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #topicsList a{text-decoration:none;} #topicsList h3{width:auto; float:none; margin-bottom:15px; font-size:20px;} #topicsList h3:hover{cursor:default;} #topicsList .sentence.clearfloat{float:none;} #topicsList .sentence.clearfloat:hover{text-decoration:underline !important;} /* 絞り込みカテゴリのスタイル */ #topicsList .category_narrow_box{clear:both; margin:0 0 30px 5px;} #topicsList .category_narrow_box:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #topicsList .category_narrow_box ul li{float:left; font-size:14px; margin:0 1px 1px 0;} #topicsList .category_narrow_box ul li i{color:#ccc; font-size:15px; font-weight:bold; padding-right:1px;} .androidTb #topicsList .category_narrow_box ul li i{vertical-align:middle;} #topicsList .category_narrow_box ul li a{display:block; background-color:#ebebe6; width:142px; height:34px; line-height:34px; padding:0 6px;} #topicsList .category_narrow_box ul li a:hover{background-color:#a30b1a; color:#fff !important; text-decoration:none;} #topicsList .category_narrow_box ul li .select{display:block; background-color:#a30b1a; width:142px; height:34px; line-height:34px; padding:0 6px; color:#fff !important; font-weight:bold;} #topicsList .category_narrow_box ul li .select .material-icons{color:#fff !important;} /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ #topicsList .category_narrow_box{margin:0 0 30px;} #topicsList .category_narrow_box ul li{float:none; width:100%;} #topicsList .category_narrow_box ul li a{width:100%;} #topicsList .category_narrow_box ul li .select{width:100%;} } /* toicsDetail - トピックスページの詳細 -------------------------------------------------------------*/ #toicsDetail .topics_box{margin:0 10px;} #toicsDetail .topics_box:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #toicsDetail .topics_box h3{width:auto; float:none; font-size:20px;} #toicsDetail .sentence.clearfloat{float:none; margin-bottom:15px;} #toicsDetail .topics_box .status_box{float:left; margin:15px 0; font-weight:bold;} #toicsDetail .topics_box .img_box{width:400px; height:300px; margin:20px auto; text-align:center; position:relative; display:block; clear:both;} #toicsDetail .topics_box .img_box img{max-width:400px; max-height:300px; width:auto; display:block; position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;} /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ #toicsDetail .topics_box .status_box{float:none; margin:0 0 15px;} #toicsDetail .topics_box .img_box{width:auto; height:auto; margin:0; position:static; clear:both;} #toicsDetail .topics_box .img_box img{width:100%; max-width:initial; max-width:auto; max-height:initial; max-height:auto; position:static; margin-bottom:10px;} } /* ================================================================= 13.お気に入り系ページ 使用ファイル：wishlist.xhtml,wishkist_edit.xhtml =================================================================*/ /* wishlist - お気に入りページの一覧 -------------------------------------------------------------*/ #wish.detail_container{background-color:#fff; margin:15px 0 40px;} #wish.detail_container .inner{width:1020px; margin:auto;padding:0 16px;} #wish.wish_area .input_area_box{padding:0 0 13px;width:100%;background:transparent;} #wish.wish_area .wishlist_box{margin:0 0 20px;} #wish.wish_area .wish_list{padding:30px 0 0 0;background-color:#efeee7;} #wish.wish_head{width:100%;background-color:#fff;} #wish.wish_area{margin-bottom:10px; clear:both;} #wish.wish_area:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #wish.wish_area div.status_box{clear:both;padding: 8px 0 0 0;height:180px;} #wish.wish_area div.status_box > p.wish_regist_time{font-size:100%;padding:0 0 8px 0;text-align:center;margin-top:8px;} #wish.wish_area div.status_box > p.status_memo{overflow-y:auto;max-height:120px;font-size:100%;padding:8px;word-wrap : break-word; overflow-wrap : break-word;} #wish.wish_area div.status_box .material-icons{color: #a30b1a;vertical-align:middle;margin-right:4px;font-size:16px;} #wish.wish_area div.status_box .status_title{color: #a30b1a;vertical-align:middle;} #wish.wish_area > ul{padding:0 5px;} #wish.wish_area > ul:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #wish.wish_area li.wishlist_box{width:320px; min-height:450px; margin:0 25px 30px 0;float:left;} #wish.wish_area li.wishlist_box > a{display:block; padding:0; text-decoration:none;} #wish.wish_area li.wishlist_box > a:hover img{text-decoration:none !important; opacity:1 !important; filter:alpha(opacity=100) !important;} #wish.wish_area li.wishlist_box > a:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #wish.wish_area li.wishlist_box:nth-child(3n){margin:0 0 30px 0;} #wish.wish_area div.box{margin-bottom:10px; clear:both;} #wish.wish_area div.box:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #wish.wish_area div.box > ul{padding:0 5px;} #wish.wish_area div.box > ul:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #wish.wish_area div.box{width:320px; min-height:450px; margin:0 25px 24px 0; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); -webkit-transition:all 0.3s ease-out ; -moz-transition:all 0.3s ease-out ; -o-transition:all 0.3s ease-out ; transition: all 0.1s ease-out ; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; border-radius:2px; background:#fff; float:left; } #wish.wish_area div.box > a{display:block; padding:0; text-decoration:none;} #wish.wish_area div.box > a:hover img{text-decoration:none !important; opacity:1 !important; filter:alpha(opacity=100) !important;} #wish.wish_area div.box > a:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #wish.wish_area div.box .head_ttl{padding:11px 16px 13px 16px;} #wish.wish_area div.box .head_ttl:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #wish.wish_area div.box .head_ttl h2{padding:1px 0 0 0; line-height:1.3; font-size:14px; font-weight:bold; height:37px; overflow:hidden; border:none; margin:0; display:table-cell; vertical-align:middle; white-space:inherit !important;} #wish.wish_area div.box a:hover .head_ttl h2{color:#a30b1a;} #wish.wish_area div.box .img_box{height:180px; overflow:hidden; clear:both; position:relative;} #wish.wish_area div.box .keyword{position:absolute; bottom:5px; left:15px;height:16px;} #wish.wish_area div.box .keyword li{display:inline-block; margin-right:11px; font-size:10px; background-color:rgba(50,50,50, 0.8); color:#fff; padding:2px 11px 2px 10px;} #wish.wish_area div.box .keyword li:last-child{margin-right:0;line-height:1.5;} #wish.wish_area div.box .text_overflow{font-size:13px; overflow:hidden; line-height:1.5;} #wish.wish_area div.box .box_discription {padding: 16px 16px 8px 16px;max-height: 132px;overflow-y: auto;} #wish.wish_area div.box .offer{margin:4px 16px 0 0; color:#828282; font-size:12px; font-weight:bold;text-align:right;} #wish.wish_area div.box .price{margin:4px 0 0 0; text-align:right; color:#ae2734; font-size:12px; font-weight:bold;} #wish.wish_area .item_info_bottom{margin:8px 16px 8px 16px;} #wish.wish_area .item_info_bottom:after{content:"."; display:block; visibility:hidden; height:0.1px; font-size:0.1em; line-height:0; clear:both;}/* clearfix */ #wish.wish_area .item_info_bottom .under_item_link{margin:12px 0 12px 0; float:right; font-size:14px; float:right; background:url(../images/common/icon_footer_arrow.png) no-repeat left 4px; padding-left:11px; -ms-background-size:5px 8px; -moz-background-size:5px 8px; -webkit-background-size:5px 8px; background-size:5px 8px;} #wish.wish_area .item_info_bottom .under_item_link a:hover{text-decoration:none; opacity:0.6; filter:alpha(opacity=60); -webkit-transition:0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;} #wish.wish_area .item_info_bottom .buttonarea{float:left;margin-top:4px} #wish.wish_area .item_info_bottom .buttonarea a{background:#1782db; font-size:12px; color:#fff; padding:8px 16px 8px 16px; box-shadow:0px 0px 0px 0px rgba(16, 93, 156, 0.8); -moz-box-shadow:0px 0px 0px 0px rgba(16, 93, 156, 0.8); -webkit-box-shadow:0px 0px 0px 0px rgba(16, 93, 156, 0.8);} #wish.wish_area .item_info_bottom .buttonarea a:hover{text-decoration:none; opacity:0.6; filter:alpha(opacity=60); -webkit-transition:0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition:0.3s ease-in-out; transition:0.3s ease-in-out;} #wish.wish_area .item_info_bottom .btn{height:32px; line-height:1.2;} .wishlist_box .edit_button{clear:both;width:100%;margin:0 auto;text-align:center;} /* ウィンドウ幅が641px以上の場合に適用するスタイル(PC,TB) */ @media screen and (min-width:641px){ #wish div.detail_container .inner{width:1020px; margin:auto;padding:0;} #wish.wish_area div.box{position:relative;} #wish.wish_area div.box > a .item_bottom{position:absolute;bottom:0;width:288px;} #wish.wish_area div.box .item_info_bottom{position:absolute;bottom:0;width:288px;} /* カードレイアウトのhover時 */ #wish.wish_area div.box:hover{box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); -webkit-transition:all 0.3s ease-out ; -moz-transition:all 0.3s ease-out ; -o-transition:all 0.3s ease-out ; transition:all 0.1s ease-out ; -webkit-transform:scale(1.03); -moz-transform:scale(1.03); -ms-transform:scale(1.03); transform:scale(1.03);} } /* ウィンドウ幅が641px~1020pxの場合に適用するスタイル(TB) */ @media screen and (min-width:641px) and (max-width:1020px){ #wish div.detail_container{width:auto; min-width:768px;} #wish div.detail_container .inner{width:758px;padding:0;} #wish.wish_area > ul{width:665px; margin:auto; padding:0;} #wish.wish_area div.box:nth-child(3n){margin:0 25px 30px 0;} #wish.wish_area div.box:nth-child(2n){margin:0 0 30px 0;} #wish.wish_area div.box{position:relative;} #wish.wish_area div.box > a .item_bottom{position:absolute;bottom:0;width:288px;} #wish.wish_area div.box .item_info_bottom{position:absolute;bottom:0;width:288px;} } /* ウィンドウ幅が0px〜640pxの場合に適用するスタイル(SP) */ @media screen and (min-width:0px) and (max-width:640px){ #wish div.detail_container{width:100%; padding:0; margin:15px 0 10px;} #wish div.detail_container .inner{width:auto;padding:0;} #wish.wish_area{margin-bottom:0;} #wish.wish_area > ul{padding:15px 0 0 0;} #wish.wish_area div.box{width:100%; min-height:initial; min-height:auto; margin:0 0 5px; box-shadow:none;} #wish.wish_area div.box:last-child{margin-bottom:15px} #wish.wish_area div.box:nth-child(1n){margin:0 0 1px;} #wish.wish_area div.box div > a{width:100%; min-height:initial; min-height:auto;} #wish.wish_area div.box .img_box img:hover{-webkit-transform:scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform:scale(1); transform:scale(1);} #wish.wish_area div.box .keyword{position:absolute; bottom:5px; left:0; right:0;} #wish.wish_area div.box .keyword li{margin-right:4px;} #wish.wish_area div.box .text_overflow{font-size:14px;overflow:auto; height:auto; line-height:1.5;} #wish.wish_area div.box > a .box_discription{padding:16px 16px 8px 16px;} #wish.wish_area div.box .blog_date{margin:0 16px;} #wish.wish_area div.box .under_item_link{margin:0 16px 10px 0;} #wish.wish_area div.box > a .offer{margin:4px 16px 0 0; font-weight:bold;text-align:right;} #wish.wish_area div.box > a .item_bottom{margin: 16px;} #wish.wish_area div.box .item_info_bottom .buttonarea a{padding:8px 16px 8px 16px;} #wish.wish_area div.box .item_info_bottom .under_item_link{margin:12px 0 12px 0;} #wish.wish_area li.wishlist_box{width:100%; min-height:450px; margin:0 0 30px 0;} }