@charset "UTF-8"; @import url("slick.css"); @import url("slick-theme.css"); /* ======================================================================= CSSの名前：style.css 最終更新日時：2018/●/● -------------------------------------------------------------------------- 1.reset 2.base 3.コンテナ・サイドバー・メインコンテンツ 4.ヘッダ 5.サイドバー 6.extファイル用 7.トップページ 8.カートの中身～注文完了まで、プレゼント応募～完了まで 9.定期購入商品履歴照会・変更 10.フッタ 11.商品詳細・一覧、プレゼント詳細・一覧 12.レビュー 13.購入履歴 14.サブウインドウで表示するページ用 15.エラーページ 16.クレジットカード登録画面 17.お気に入り 18.アドレス帳 ======================================================================= */ /* ================================================================= 1.reset =================================================================*/ *{box-sizing: border-box;} body{background: #FFF; color: #333; line-height: 1.5; font-family: "Noto Sans Japanese", 'Noto Sans', sans-serif; word-wrap: break-word; position: relative; -webkit-text-size-adjust:none;} /* すべてのタグのマージン・パディングの設定をリセット -------------------------------------------------------------*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,hr{margin: 0; padding: 0;} li{list-style-type: none;} table{border-collapse: collapse; border-spacing: 0;} img{border: 0;} /* ================================================================= 2.base =================================================================*/ /* clear -------------------------------------------------------------*/ .clear {clear: both; } .clearfloat {clear: both; height: 0; font-size: 1px; line-height: 0; } .clearfix {zoom: 1; } .clearfix:after {content: ""; display: block; clear: both; } *:first-child+html .clearfix {zoom: 1; } /* IE7 */ /* 基本のlink color -------------------------------------------------------------*/ a:link {color: #666; text-decoration: none; } a:visited {color: #666; } a:hover, a:active {color: #666;text-decoration: underline; } /* ボタンデザイン -------------------------------------------------------------*/ /*基本デザイン-下記クラスに加えpositive　negative等のクラスを合わせて付与する*/ a.button{border: none; display: block; line-height: 1; text-align: center; padding: 10px; text-decoration: none; font-size: 13px; -webkit-border-radius: 3px;/* for Safari and Chrome */ -moz-border-radius: 3px; /* for Firefox */ -o-border-radius: 3px; /* for opera */ border-radius: 3px; width: 100%;} input.button{border: none; display: block; line-height: 1; text-align: center; padding: 10px; text-decoration: none; font-size: 13px; -webkit-border-radius: 3px;/* for Safari and Chrome */ -moz-border-radius: 3px; /* for Firefox */ -o-border-radius: 3px; /* for opera */ border-radius: 3px; width: 100%;} /*マウスホバー時*/ a.button:hover{opacity: 0.7; cursor: pointer; transition: all .3s; text-decoration: none;} input.button:hover{opacity: 0.7; cursor: pointer; transition: all .3s; text-decoration: none;} /*次へ・入力内容を確認する・注文する・ログイン・登録する・送信・検索・ご注文手続きへ進む等*/ a.positive{background: #D21E21; color: #FFFFFF;} input.positive{background: #D21E21; color: #FFFFFF;} /*戻る・クリア・削除・ログアウト等*/ a.negative{background: #262626; color: #FFFFFF;}/*戻る・クリア・削除・ログアウト等*/ input.negative{background: #262626; color: #FFFFFF;} /*上記以外のボタン*/ a.normal{background: #f7f7f7; color: #333333; border: 1px solid #adadad;} input.normal{background: #f7f7f7; color: #333333; border: 1px solid #adadad;} .medium.normal{ padding:9px !important;} .small.normal{ padding:5px 9px !important;} /*押せないボタン*/ .not_click{border: none; display: block; line-height: 1; text-align: center; padding: 10px; text-decoration: none; font-size: 12px; -webkit-border-radius: 3px;/* for Safari and Chrome */ -moz-border-radius: 3px; /* for Firefox */ -o-border-radius: 3px; /* for opera */ border-radius: 3px; background: #d2d2d2; color: #a5a5a5;} .not_click.medium{max-width: 230px; min-width: 200px;} /*普通サイズの時にはクラスに下記を追加*/ .medium{ min-width: 200px; font-size: 16px;} a.medium{max-width: 230px; min-width: 200px; font-size: 16px;} input.medium{max-width: 230px; min-width: 200px; font-size: 16px;} /*小さいサイズの時にはクラスに下記を追加*/ .small{padding: 6px 10px; font-size: 12px;} a.small{padding: 6px 10px; font-size: 12px;} input.small{padding: 6px 10px; font-size: 12px;} /* 画像の縦横比調整 -------------------------------------------------------------*/ .img_box {text-align: center; position: relative; } .img_box img {width: auto; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } /* カートフローチャート -------------------------------------------------------------*/ .cart_step {position: relative; overflow: hidden; } .cart_step:after {content: ""; clear: both; display: block; }/* clearfix */ .cart_step ul {position: relative; left: 50%; float: left; margin-bottom: 45px; } .cart_step ul li {position: relative; left: -50%; float: left; text-align: center; width: 140px; line-height: 1.2; color: #CDCDCD; } .cart_step ul li.active {color: #000000; font-weight: bold; } .cart_step ul li strong {font-size: 35px; display: block; } /*画像の場合*/ .step {display: block; margin: 25px auto 45px auto; } /* Amazonペイメントのスタイル -------------------------------------------------------------*/ #AmazonPayButton {min-height: 80px; } /* ローディング表示のスタイル -------------------------------------------------------------*/ #loading {position: fixed; top: 50%; left: 50%; padding-top: 100px; width: 100px; background-image: url("../images/loader_icon_pc.gif"); background-position: center center; background-repeat: no-repeat; } /* 商品一覧、商品詳細ページアイコン類 -------------------------------------------------------------*/ .item_icon {color: #FFFFFF; display: inline-block; font-size: 10px; font-weight: normal; line-height: 1; padding: 5px 5px; vertical-align: text-bottom; }/*アイコン共通設定*/ .item_short {background: #D21E21; }/*品切*/ .item_soldout {background: #666666; }/*品薄*/ .item_new {background: #ffcc00; }/*NEW*/ .item_before {background: #ff9900; }/*COMING SOON*/ .item_download {background: #00cccc; }/*ダウンロード商品*/ .item_yoyaku {background: #000000; }/*予約商品*/ .item_discount {background: #cc0000; }/*会員割引あり*/ .item_timesale {background: #cc0000; }/*タイムセール中*/ .item_teiki_together {background: #a52ead; }/*定期にまとめて注文可能*/ .item_volume_discount {background: #ff6699; }/*ボリュームディスカウントあり*/ /* Javascriptで使用 -------------------------------------------------------------*/ span.valid_error {color: #C00; font-weight: bold;} /* ================================================================= 3.コンテナ・サイドバー・メインコンテンツ 使用ファイル：すべてのファイル =================================================================*/ /* container - サイドバー・メインコンテンツを格納するコンテナ -------------------------------------------------------------*/ #container{width: 980px; margin: 0 auto; padding-top: 20px;} #container:after {content: ""; clear: both; display: block; }/* clearfix */ /* main - コンテナ内メインコンテンツ -------------------------------------------------------------*/ #main{ float: none; width: 690px; margin: 0 0 0 auto; padding-bottom: 20px; } #main h2{font-size: 30px; font-weight: bold; text-align: center; padding-bottom: 14px; margin-bottom: 30px; position: relative;} #main h2:after{content: ""; height: 6px; width: 100px; display: inline-block; position: absolute; z-index: 1; top: 90%; right: 0; bottom: 0; left: 0; border-radius: 3px; margin: 0 auto; background: #1747a2;} #main p {margin: 5px 10px; font-size: 90%; line-height: 150%; } #main .attention{color: #C00;} #main table {width: 750px; margin: 10px; font-size: 90%; border: 1px solid #CCC; line-height: 200%; border-collapse: collapse; border-spacing: 0;} #main th {padding: 10px; border: 1px solid #d5d5d5; background: #f3f3f3; vertical-align: top; font-weight: normal; text-align: left; } #main th.title {width: 160px; text-align: left; } #main th.address {width: 55px; } #main td {padding: 10px; border: 1px solid #d5d5d5; vertical-align: top; } #main .buttonarea {margin: 10px; padding-top: 40px; text-align: center; } #main .buttonarea .button {display: inline-block; margin: 0 10px; } #main .buttonarea .attention {color: #C00; font-size: 90%; } #main .buttonareaFR {margin: 0 0 0px; float: right; } #main .buttonareaFR:after {content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both; }/* clearfix */ #main .member_buttonarea .button {display: inline-block; margin: 0 10px; } #main .hissu {color: #C00; font-weight: bold; } #main #breadcrumbs {margin-bottom: 20px; font-size: 80%; } #main .amazon_comment {color: #C00; font-weight: bold; } #main .expiration_date {padding-left: 10px; } #main .apply_area { width: 750px; margin: auto; font-size: 90%; border: 1px solid #CCC; line-height: 200%; border-collapse: collapse; border-spacing: 0; } #category_html div,#category_html dl,#category_html dt,#category_html dd,#category_html ul,#category_html ol, #category_html li,#category_html h1,#category_html h2,#category_html h3,#category_html h4,#category_html h5,#category_html h6, #category_html pre,#category_html form,fieldset,#category_html input,#category_html textarea,#category_html p,#category_html blockquote, #category_html th,#category_html td,#category_html hr{margin: 0; padding: 0; font-size: 100%; line-height: 1; border: 0px; background: none;} #category_html li{list-style-type: none;} #category_html table{border-collapse: collapse; border-spacing: 0;} #category_html img{border: 0;} /* フォーム類部品 -------------------------------------------------------------*/ input[type="text"] {border: solid 1px #ccc; -moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.25); -webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.25); box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.25); padding: 4px; } input[type="email"] {border: solid 1px #ccc; -moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.25); -webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.25); box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.25); padding: 4px; } input[type="password"] {border: solid 1px #ccc; -moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.25); -webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.25); box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.25); padding: 4px; } input[type="tel"] {border: solid 1px #ccc; -moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.25); -webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.25); box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.25); padding: 4px; } input[type="number"] {border: solid 1px #ccc; -moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.25); -webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.25); box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.25); padding: 4px; } input[type="text"].err,input[type="email"].err,input[type="password"].err,input[type="number"].err,input[type="tel"].err{background-color:#FFC0CB;} #main .message.err{color: #fff;font-weight: bold;margin-left: 20px;background: #C00;padding: 4px 10px;position: absolute;z-index: 5;border-radius: 5px;} #main .message.err:after{content:"";display:block;width: 0;height: 0;border-style: solid;border-width: 0 7px 10px 7px;border-color: transparent transparent #cc0000 transparent;position:absolute;top: -10px;z-index: 10;} #main span.note{text-indent: -1em;padding-left: 1em;display: block;} select {height: 30px; vertical-align: middle; } textarea {border: solid 1px #ccc; -moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.25); -webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.25); box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.25); } input, textarea, select, button {font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, 'MS PGothic', 'ＭＳ Ｐゴシック', sans-serif !important; font-size: 13px; } @media all and (-ms-high-contrast:none) { input, textarea, select, button { font-family: "メイリオ", Meiryo,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'MS PGothic', 'ＭＳ Ｐゴシック', sans-serif !important; } } /* #main.no-sidebar - サイドバーの無いメインコンテンツ -------------------------------------------------------------*/ #main.no-sidebar {float: none !important; width: 980px !important; min-height: 500px; margin: auto !important; } #main.no-sidebar table {width: 980px !important; margin-left: 0px; margin-right: 0px;} #main.no-sidebar th {padding: 10px !important; } #main.no-sidebar td {padding: 10px !important; } /* #main.cart - カートフロー中のメインコンテンツ -------------------------------------------------------------*/ #main.cart {float: none; width: 980px; min-height: 500px; margin : 0 auto;} /* ================================================================= 4.ヘッダ 使用ファイル：common/common_header.xhtml, common_searchbar.xhtml, localheader_palshop.xhtml, localheader_ippin.xhtml =================================================================*/ /* loccal_header - ショップ別ヘッダ -------------------------------------------------------------*/ /*↓全ショップ共通部分*/ #local_header {border-bottom: 1px solid #1747a2;} #local_header h1{margin: 10px 0 13px;} #local_header h1 img{display: block;} #local_header .logo {width: 172px; float: left;} #local_header .guestname {height: 20px; background-color: #1747a2;} #local_header .guestname p {width: 980px; font-size: 12px; color: #FFF; text-align: right; line-height: 20px; vertical-align: middle; margin: 0 auto; } #local_header .local_header_inner {width: 980px; margin: 0 auto; } #local_header .local_header_inner:after {content: ""; clear: both; display: block;}/* clearfix */ #local_header .rightbox{width: 430px; float: right;} #local_header .rightbox:after {content: ""; clear: both; display: block;}/* clearfix */ #local_header .loginarea {text-align: right; padding-top: 4px; } #local_header .loginarea ul {margin: 0; } #local_header .loginarea li {font-size: 12px; line-height: 16px; height: 16px; display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-position: left top; background-size: 16px; padding-left: 20px; margin-left: 20px;} #local_header .loginarea li a {color: #262626; } #local_header .loginarea li.user {background-image: url(../images/icon_user.png);} #local_header .loginarea li.signin {background-image: url(../images/icon_signin.png);} #local_header .loginarea li.login {background-image: url(../images/icon_login.png);} #local_header .loginarea li.logout {background-image: url(../images/icon_logout.png);} #local_header .loginarea li.mail {background-image: url(../images/icon_mail.png);} #local_header .search_cart{position: relative;} #local_header .search_cart a.button {width: 118px; display: inline-block; font-size: 13px; height: 30px; line-height: 30px; padding: 0; background-color: #262626;} #local_header .search_cart a.button:before{content: ''; display: inline-block; width: 18px; height: 18px; background-size: contain; margin-right: 4px; position: relative; top: 4px; background-image: url(../images/icon_cart.png);} #local_header .search_cart {width: auto; float: right; text-align: right; padding-top: 10px; } #local_header .search_cart form {display: inline-block; padding: 0; } #local_header .search_cart input.form {height: 24px; width: 210px; display: inline-block; box-shadow: none; border: none; border-bottom: 1px solid #cfcfcf; } #local_header .search_cart input.button {width: 15px; height: 15px; padding: 0; display: block; float: right; background: none; margin: 4px; } #local_header .header_itemcount {float: right; z-index: 100; width: 21px; height: 21px; border-radius: 50%; text-align: center; position: absolute; top: 0px; right: -10px; background-color: #c9140b; color: #262626;} #local_header .header_itemnumber {font-size: 10px; font-weight: bold; text-align: center; display: inline-block; color: #ffffff; line-height: 1; top: -5px; position: relative;} /* important_news - 重要なお知らせ -------------------------------------------------------------*/ #important_news {width: 100%; background-color: #ea0000; padding: 10px; text-align: center; color: #fff; font-size: 14px; } #important_news h2, #important_news p {display: inline; font-size: 14px; } #important_news a {color: #fff; text-decoration: underline; } #important_news strong {font-size: 18px; font-weight: bold; } /* searchbar - メイン下検索バー -------------------------------------------------------------*/ #searchbar {width: 100%; background-color: #f3f3f3; padding: 30px 0; text-align: center; margin-bottom: 70px;} #searchbar .searchbar_inner {width: 680px; margin: 0 auto; } #searchbar .searchbar_inner:after {content: ""; clear: both; display: block;}/* clearfix */ #searchbar .searchbar_inner input.form {width: 592px; height: 40px; font-size: 22px; vertical-align: middle; float: left; border-radius: 0; } #searchbar .searchbar_inner input.button {width: 88px; height: 40px; background-color: #262626; font-size: 20px; float: right; margin: 0; border-radius: 0; border: none; } /* ================================================================= 5.サイドバー 使用ファイル：common/sidebar.xhtml =================================================================*/ /* sidebar - コンテナ内サイドバー -------------------------------------------------------------*/ #sidebar {float: left; width: 210px; } /*　sidebar - サイドバー共通 -------------------------------------------------------------*/ #sidebar{margin-bottom: 20px; width: 210px;} #sidebar h2{width:210px; font-size:14px; padding: 6px; margin: 0 0 10px 0; background: #f3f3f3;} #sidebar ul{margin:0;padding: 0} #sidebar li{margin-bottom: 0px;line-height: 1.2em;font-size: 13px;} #sidebar li a{display: block; width: 210px; padding: 7px 12px; color: #333; font-size: 13px;} /* side_banner_area - バナーエリア -------------------------------------------------------------*/ .side_banner_area{margin-bottom: 20px;} .side_banner_area img{display: block;} /* side_search - 商品検索 -------------------------------------------------------------*/ #side_search{margin-bottom: 20px;} #side_search:after {content: ""; clear: both; display: block;}/* clearfix */ #side_search input.form {width: 180px; height: 30px; font-size: 13px; vertical-align: middle; float: left; border-radius: 0; } #side_search input.button {width: 30px; height: 30px; background-color: #262626; float: right; margin: 0; padding: 7px; border-radius: 0; border: none; } /* side_category - 商品カテゴリ -------------------------------------------------------------*/ #side_category{margin-bottom: 20px;} #side_category h2{margin-bottom: 6px;} #side_category li a{display: block; width: 210px; padding: 7px 12px; color: #333; font-size: 13px; text-decoration: none; background-image: url(../images/svg/sidemarker_posi.svg) ; background-repeat: no-repeat; background-position: 198px;} #side_category li a:hover{color: #fff; background-image: url(../images/svg/sidemarker_nega.svg); background-color: #2f63c7;} #side_category .categoryBox{margin-bottom:16px; font-size:13px;} #side_category .categoryBoxArrow{position:absolute; top:7px; left:200px; z-index:111; display:none;} #side_category .categoryBoxArrow2{position:absolute; top:0px; left:-10px; z-index:113; display:none;} #side_category ul.nav{margin-bottom: 10px;} #side_category ul.nav li:hover .categoryBoxArrow2, #side_category ul.nav li:hover .categoryBoxArrow{display:block;} #side_category ul.nav > li > a{display: block; width:210px; padding: 7px 12px; text-decoration: none;} #side_category ul.nav ul {display:none; position:absolute; z-index:100; top:-7px; left:210px; padding:11px; font-size:13px; width:240px; box-shadow:rgba(0, 0, 0, 0.2) 0px 1px 3px 0px; -webkit-box-shadow:rgba(0, 0, 0, 0.2) 0px 1px 3px 0px; -moz-box-shadow:rgba(0, 0, 0, 0.2) 0px 1px 3px 0px; background-color:#fff;} #side_category ul.nav ul li{float:none; margin-bottom:8px;} #side_category ul.nav ul li a{width:auto; height:auto; padding-left:10px; display:block;} #side_category ul.nav li:hover {position:relative;} #side_category ul.nav li:hover ul{display:block; position:absolute; z-index:110;} #side_category ul.nav li .box{display:none; width:208px;} #side_category ul.nav ul li:hover .box{display:block; position:absolute; z-index:1000; top:-10px; left:135px;} #side_category ul.nav ul li{float:none; margin-bottom:8px;} #side_category ul.nav ul li:last-child{margin-bottom:0px;} #side_category ul.nav ul li a{width:auto; height:auto; text-indent:0px; font-size:13px; background: none;} #side_category ul.nav ul li a:hover {background-color: #fff; text-decoration: underline; color: #333333;} #side_category ul.nav ul li:hover {position:relative;} #side_category ul.nav ul li:hover .box{display:block; position:absolute; z-index:1000; top:0px;left:136px;} #side_category ul.nav .box ul {left:0px; top:-11px;} /* side_column - コラム -------------------------------------------------------------*/ #side_column{margin-bottom: 20px;} #side_column .golist{text-align: right;font-size: 13px;} #side_column .golist a{color:#1a86b9; } /* side_related_media - 関連メディアサイト -------------------------------------------------------------*/ #side_related_media{margin-bottom: 20px;} #side_related_media h2{background: none; border-top: 0px; padding: 0px 0px 0px 4px;} #side_related_media li{margin-bottom: 10px;} / #side_related_media li img{width:49px; margin-right:8px;} *#side_related_media li a{background-color: #f3f3f3; border:1px solid #d5d5d5; height: 36px;display: flex;align-items: center;} #side_related_media li a:hover{background-color: #f3f3f3; opacity: 0.7; transition: all .3s;} */ #side_related_media li img{width:auto; margin:auto;} #side_related_media li a{background-color: #f3f3f3; border:1px solid #d5d5d5; height: auto;display: flex;align-items: center;padding: 0;width: 212px;} #side_related_media li a:hover{background-color: #f3f3f3; opacity: 0.7; transition: all .3s;} /* mail_magazine - メールマガジン枠 -------------------------------------------------------------*/ #mail_magazine{margin-bottom: 20px;} #mail_magazine h3{font-weight: normal; font-size: 12px; width: 200px; margin: 0 auto 5px;} #mail_magazine .text{display: block; width: 200px; height: 30px; margin: 0 auto 0px;} #mail_magazine .select_area{margin-bottom: 10px;} #mail_magazine label{font-size: 13px;} #mail_magazine .radio{margin: 5px 2px 5px 5px;} #mail_magazine p{margin: 0 5px 2px; font-size: 80%;} #mail_magazine .error{margin: 5px; color: #C00; font-weight: bold;} #mail_magazine .free{margin: 10px auto;} #mail_magazine .buttonarea{padding-top: 10px;} #mail_magazine .buttonarea:after {content: ""; clear: both; display: block;}/* clearfix */ #mail_magazine .buttonarea li{float: left; width: 50%; text-align: center;} #mail_magazine .buttonarea li input{display: inline-block; width: 50px;} #apply_form{margin-bottom: 20px;} #apply_form img{border: solid 1px #d5d5d5;} /* ================================================================= 6.extファイル用 使用ファイル：ext/company.html 　　　　　　　ext/tokushou.html 　　　　　　　ext/guide.html 　ext/social_provider.xhtml =================================================================*/ #ext{max-width: 980px;} #ext h3{display: block; font-size: 110%; margin: 30px 10px 10px; border-bottom: 1px dashed #cccccc; padding-bottom: 5px;} #ext th{text-align: left;} #ext ul{padding-bottom: 10px;} #ext li{list-style: disc; margin: 5px 40px; font-size: 90%;} #ext #sitemap ul:after {content: ""; clear: both; display: block;}/* clearfix */ #ext #sitemap li{width: 216px; float: left; list-style-type: none; margin: 5px 20px;} /* social_provider.xhtml -------------------------------------------------------------*/ #ext.social_provider tr th{background: #FFF;} #ext.social_provider tr th a{text-decoration: none;} #ext.social_provider tr.title th{background: #F6F6F6;} #ext.social_provider th.service{width: 220px;} #ext.social_provider th div{width: 220px; height: 44px; font-size: 14px; display: block;} #ext.social_provider th div p{padding: 14px 0 14px 25px; border: 1px solid #cdcdcd; border-left: 0px; margin: 0 0 0 53px; display: block; background: #FFF; line-height: 1; font-size: 14px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px;} #ext.social_provider th.yahoo div{background: url("../images/social_yahoo.png") no-repeat; color: #e71017;} #ext.social_provider th.facebook div{background: url("../images/social_facebook.png") no-repeat; color: #3b5998;} #ext.social_provider th.twitter div{background: url("../images/social_twitter.png") no-repeat; color: #55acee;} #ext.social_provider th.google div{background: url("../images/social_google.png") no-repeat; color: #dc4e41;} #ext.social_provider th.mixi div{background: url("../images/social_mixi.png") no-repeat; color: #d1ad59;} #ext.social_provider th.rakuten div{background: url("../images/social_rakuten.png") no-repeat; color: #bf0000;} #ext.social_provider th.line div{background: url("../images/social_line.png") no-repeat; color: #00b300;} #ext.social_provider th.paypal div{background: url("../images/social_paypal.png") no-repeat; color: #293e7f;} #ext.social_provider th.yahoo div.off{background: url("../images/social_yahoo_off.png") no-repeat; color: #cdcdcd;} #ext.social_provider th.facebook div.off{background: url("../images/social_facebook_off.png") no-repeat; color: #cdcdcd;} #ext.social_provider th.twitter div.off{background: url("../images/social_twitter_off.png") no-repeat; color: #cdcdcd;} #ext.social_provider th.google div.off{background: url("../images/social_google_off.png") no-repeat; color: #cdcdcd;} #ext.social_provider th.mixi div.off{background: url("../images/social_mixi_off.png") no-repeat; color: #cdcdcd;} #ext.social_provider th.rakuten div.off{background: url("../images/social_rakuten_off.png") no-repeat; color: #cdcdcd;} #ext.social_provider th.line div.off{background: url("../images/social_line_off.png") no-repeat; color: #cdcdcd;} #ext.social_provider th.paypal div.off{background: url("../images/social_paypal_off.png") no-repeat; color: #cdcdcd;} #ext.social_provider td{vertical-align: middle;} /* ================================================================= 7.トップページ 使用ファイル：top.xhtml =================================================================*/ /* mainvisual - メインビジュアル -------------------------------------------------------------*/ #mainvisual{width:100%; height: 360px; overflow: hidden; position: relative; z-index:1;} #mainvisual .wrap{ height: 360px;} #mainvisual img{display: block;} #mainvisual .flexslider{width: 718px; margin: 0 auto; box-shadow: none; border-radius: 0px; border: none;} #mainvisual .flex-viewport{overflow:visible !important;} #mainvisual .flex-direction-nav a{opacity:1; width:25px; height:44px; text-indent:20px !important; top:50%; } #mainvisual .thumbArea .flex-direction-nav a:before{ content:inherit; font-family:inherit; font-size:10px; display:none;} #mainvisual .flex-direction-nav .flex-next{right:-39px !important; background:url("../images/svg/arrow_next.svg") no-repeat;color: transparent;} #mainvisual .flexslider:hover .flex-next {right: -39px !important;} #mainvisual .flex-direction-nav .flex-prev{left:-39px !important; background:url("../images/svg/arrow_prev.svg") no-repeat;color: transparent;} #mainvisual .flexslider:hover .flex-prev {left: -39px !important;} #mainvisual .left_cover{ background:url(../images/main_cover.png); position:absolute;top:0; left:-980px; height:360px; width:980px; z-index:3;} #mainvisual .right_cover{background:url(../images/main_cover.png); position:absolute;top:0; right:-980px; height:360px; width:980px; z-index:3;} /* #important_info_top -------------------------------------------------------------*/ #important_info_top{ margin: 0 auto 50px; padding: 1em; width: 980px; text-align: center; border: solid 1px #ccc; } /* #top_banner -------------------------------------------------------------*/ #top_banner{width: 980px; margin: 0 auto 50px; padding-top: 10px;} #top_banner ul{position: relative;} #top_banner ul:after {content: ""; clear: both; display: block; }/* clearfix */ #top_banner li{float: left; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3); width: 475px; height: 197px; margin: 0 30px 30px 0;} #top_banner .nocaption li{height: auto;} #top_banner li:nth-child(odd){margin-right: 0px;} #top_banner li img{display: block;} #top_banner h3{margin: auto;} #top_banner li#ippin_top{ width: 100%; display: flex; flex-wrap: wrap; } #top_banner li#ippin_top > a{ } #top_banner li#ippin_top > p{ width: 100%; } #top_banner #ippin_2nd{ margin: auto; width: 434px; display: flex; flex-wrap: wrap; } #top_banner #ippin_2nd li{ margin: 0 0 5px 0; width: 210px; height: 70px; box-shadow: none; } #top_banner #ippin_2nd li:nth-child(odd){ margin: 0 14px 5px 0; } #top_banner #ippin_2nd li:nth-child(n+3){ margin-bottom: 0; } #top_banner ul + h3{ margin: 30px auto; position: relative; text-align: center; } #top_banner ul + h3 span{position: relative; z-index: 2; display: inline-block; margin: 0 20px; padding: 0 15px; background-color: #fff; text-align: left;} #top_banner ul + h3:after{content: ""; height: 1px; width: 100%; background: #d5d5d5; display: block; position: absolute; z-index: 1; top: 13px;} /* #magazine - 雑誌から探す -------------------------------------------------------------*/ #magazine{margin-bottom: 70px;} #magazine li{display: inline-block;margin-right: 12px;} #magazine li a{display:inline-block;position: relative;height: 63px;width:174px;border:1px solid #d5d5d5;float:left;} #magazine ul.row3{margin-top: 18px;} #magazine ul.row3 li a{width:238px; } #magazine ul.row3 li{margin-right: 12px;} #magazine li a img{position: absolute;top:0;right:0;bottom:0;left:0;margin:auto;} /* item-row - 商品表示部分 -------------------------------------------------------------*/ #main .item a{display: block;margin-bottom: 40px;position: relative;} #main .item a:hover{text-decoration: underline;} #main .item-ph img {width: 100%;display: block;margin-bottom: 10px;} #main .item-row li {display: inline-block} #main .item-row .row2 li {margin-right:20px;} #main .item-row .row3 li {margin-right:24px;} #main .item-row .row4 li {margin-right:16px;} #main .item-row .row5 li {margin-right:13px;} #main .item-row .item-name {font-size:15px;color: #c9140b;display: block;font-weight: bold;} #main .item-row .item-cap {font-size:13px;color: #262626;display: block;line-height: 1.4em;font-weight: normal;} #main .item-row .item-price {font-size:14px;color: #262626;text-align: right; display: block;} #main .item-row .item-price span{font-size: 11px;} #main .item-row .row2 .item {width: 365px; } #main .item-row .row3 .item {width: 230px; } #main .item-row .row4 .item {width: 171px; } #main .item-row .row5 .item {width: 135px; } /* #pickup- 注目商品 -------------------------------------------------------------*/ #pickup {margin-bottom: 70px;} #pickup .item-name {height:24px; } #pickup .item-cap {height:32px;overflow: hidden;margin-bottom: 6px;} #pickup .item-price {height:14px;} #pickup .item .item-new {display: inline-block; position: absolute; top: -2px; left: 4px; margin: 0; z-index: 2; width: 18px; height: 24px; filter: drop-shadow(0px 1px 0px rgba(0, 0, 0, 0.3));} #pickup .item .item-new:after{content: ''; position: absolute; left: 0; top: 100%; height: 0; width: 0; border-bottom: 13px solid transparent;} /* #recommend - おすすめ商品 -------------------------------------------------------------*/ #recommend {margin-bottom: 70px;} #recommend .item-name {height:24px; } #recommend .item-cap {height:36px; overflow: hidden; margin-bottom: 6px;} #recommend .item-price {height:14px;} /* #latest_issue - 最新号掲載商品 -------------------------------------------------------------*/ #latest_issue　{margin-bottom: 70px;} #latest_issue .item-ph{height:190px;display: block;overflow: hidden;} #latest_issue .item-cap {height:28px;color: #2f56a6;} /* #special_contents - スペシャルコンテンツ -------------------------------------------------------------*/ #special_contents {margin-bottom: 70px;} #special_contents .item a{margin-bottom: 0;} #special_contents .item {display: inline-block;} #special_contents li{display: block;float: left;margin-bottom:20px; box-shadow: 0 0 2px rgba(0,0,0,0.3);} #special_contents .item-ph{height:133px;display: block;} #special_contents .item-ph img{margin-bottom:0;} #special_contents .item-cap {padding:10px;font-size:14px;display: block;} #special_contents .button{padding: 20px; color: #fff; font-size: 18px; background-color: #624c3d; border-radius: 3px; width: 364px; margin: 10px auto; background-image: url(../images/svg/icon_plus.svg); background-repeat: no-repeat; background-position: 94% 50%; cursor: pointer;} #special_contents .close{background-image: url(../images/svg/icon_minus.svg); text-align: center;} #special_contents .row2:after {content: ""; clear: both; display: block; }/* clearfix */ /* #ranking - 人気商品ランキング -------------------------------------------------------------*/ #ranking h3{font-size: 22px;color: #105170; margin:0;} #ranking .ranking_number {background-color: #2a2a2a;border-radius: 12px;width: 25px;height: 25px;float:left;position: relative;top: 30px;left: 5px;font-size: 15px;font-family: serif;font-weight: bold;color: #fff;text-align: center;padding-top: 2px;} #ranking .rank1{background-color:#e6b73a;color:#3c312d;} #ranking .rank2{background-color:#dbdbdb;color:#3c312d;} #ranking .rank3{background-color:#694618;} #ranking .item-row .item {width: 135px; } #ranking .item-row li {margin-right:13px; } #ranking .item {width:135px; margin-left: 8px;margin-bottom: 0;} #ranking .item .item-name{font-size: 13px;height: 36px;} #ranking .item .item-price{font-size: 13px;} #ranking .articleslider {padding-top:30px;} #ranking #ranking_no1 .ranking_number{ background-color:#e6b73a;color:#3c312d; } #ranking #ranking_no2 .ranking_number{ background-color:#dbdbdb;color:#3c312d; } #ranking #ranking_no3 .ranking_number{ background-color:#694618; } /* topics - トピックス -------------------------------------------------------------*/ #topics{margin-bottom: 70px;} #topics h3 {font-size: 13px; display: inline-block; width: 100px;height: 19px; font-weight: normal; line-height: 13px; margin:0;padding: 0;} #topics p{display: inline-block;margin:0;font-size: 13px;line-height: 13px;} /* new - 新着商品 -------------------------------------------------------------*/ #new {margin-bottom: 20px; width: 100%; } #new ul {margin-top: 10px; } #new ul:after {content: ""; clear: both; display: block; }/* clearfix */ #new .box {float: left; width: 185px; margin: 0 10px 10px 0; border: #d4d4d4 1px solid; padding: 20px 0 0px; } #new .img_box {width: 140px; height: 140px; margin: 0px auto 10px; } #new .img_box img {max-width: 140px; max-height: 140px; } #new .text {width: 140px; margin: 0 auto; } #new .appeal {color: #F60; font-size: 70%; } #new h3 {margin: 0px 0px 20px; font-size: 90%; font-weight: normal; line-height: 140%; min-height: 60px; } #new .price {margin: 0px 0px 20px; font-size: 80%; color: #C00; text-align: right; } /* itemAccessLog - 閲覧履歴 -------------------------------------------------------------*/ #itemAccessLog {margin-bottom: 20px; clear: both; } #itemAccessLog:after {content: ""; clear: both; display: block; }/* clearfix */ #itemAccessLog h2 a{font-size: 12px;} #itemAccessLog .img_box {width: 85px; height: 85px; float: left; margin:0 10px 10px 0;} #itemAccessLog .img_box:nth-of-type(8n){margin-right: 0px;} #itemAccessLog .img_box img {max-width: 85px; max-height: 85px; } /* ニュース一覧 -------------------------------------------------------------*/ #top_news{margin-bottom: 20px; width: 100%; }} #top_news h2{} #top_news #news{margin: auto;padding: 0 1em;max-width: 980px;} #top_news #news li{margin: auto auto 1em;padding: 0 0 1em 7em;padding-bottom: 1em;list-style: none;border-bottom: solid 1px #ccc;position: relative;} #top_news #news li span{margin-right: 0.5em;display: inline-block;font-weight: bold;position: absolute;left: 0;} /* ================================================================= 8.カートの中身～注文完了まで、プレゼント応募～完了まで 使用ファイル：cart_index.xhtml, cart_login.xhtml 　　　　　　　cart_seisan.xhtml, cart_confirm.xhtml 　　　　　　　cart_pre.xhtml, cart_result.xhtml 　　　　　　　present_login.xhtml, present_input.xhtml 　　　　　　　present_confirm.xhtml, present_result.xhtml =================================================================*/ /* cartSidebar - カートフロー内サイドバー -------------------------------------------------------------*/ #cartSidebar{width: 210px; float: right;} #cartSidebar #sideInner{width: 210px;} #cartSidebar .total_box{border: #CCC 1px solid; padding: 10px; background: #F6F6F6;} #cartSidebar .total_box .box{border: none; margin-bottom: 10px;} #cartSidebar .total_box .box:after {content: ""; clear: both; display: block;}/* clearfix */ #cartSidebar .total_box h3{margin: 0; background: none; padding: 0px; border: 0px; font-size: 14px; float: left;} #cartSidebar .total_box p.price{font-size: 16px; float: right; margin: 0px; font-weight: bold;} #cartSidebar .total_box img{margin: 0px auto 10px; display: block;} #cartSidebar .total_box .totalpricebox{border: none; margin-bottom: 10px; padding-top: 10px; border-top: 1px #CCCCCC solid;} #cartSidebar .total_box .totalpricebox:after {content: ""; clear: both; display: block;}/* clearfix */ #cartSidebar .total_box .teiki_text{margin: 0; font-size: 12px;} #cartSidebar .cartButtonArea a{display: block; margin: 0 auto 10px; min-width: 180px;; max-width: 180px;} #cartSidebar .cartButtonArea img{display: block;} #cartSidebar .cartButtonArea input{display: block; margin: 0 auto 10px; min-width: 180px;; max-width: 180px;} #cartSidebar .tax{font-size: 9px; color: #666;} /* cartIndex - 買い物かごの中身 -------------------------------------------------------------*/ #cartIndex{width: 980px; padding-bottom: 20px; margin: 0 auto;} #cartIndex .content{width: 750px; float: left; margin-right: 20px;} #cartIndex:after {content: ""; clear: both; display: block;}/* clearfix */ #cartIndex table{width: 750px; margin: 0px 0 10px;} #cartIndex table th.itemname{width: 500px;} #cartIndex .img_box{width: 80px; height: 80px; text-align: center; position: relative; float: left;} #cartIndex .img_box img{width: auto; max-width: 80px; max-height: 80px; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} #cartIndex .text_box{padding-left: 90px;} #cartIndex .text_box p{margin: 0 0 10px; font-size: 100%;} #cartIndex .text_box p.code{font-size: 80%;} #cartIndex .text_box p.last{margin-bottom: 0px;} #cartIndex .empty{margin: 20px 0;} #cartIndex .price{color: #C00; text-align: right;} #cartIndex .tax{font-size: 9px; color: #666;} #cartIndex .amount{text-align: center;} #cartIndex .delete .button{width: 50px;} #cartIndex .total{margin: 0px 0 30px; padding: 0px 0 5px; font-weight: bold; text-align: right; border-bottom: #CCC 1px solid; float: left; width: 750px;} #cartIndex .total p{margin: 0px; font-size: 90%;} #cartIndex h3{margin-bottom: 15px; padding: 1px 20px; border-bottom: 1px solid #CCC; background: url("../images/marker.gif") 7px 7px no-repeat #EEE; font-size: 85%;} #cartIndex .box{border: 1px solid #CCC; margin-bottom: 30px; clear: both;} #cartIndex .box .buttonarea.amazon_btn{margin: 10px; padding: 10px 0 0; text-align: center;} #cartIndex .box .buttonarea.amazon_btn .button.medium{max-width: 270px; width: 270px;} /* cartLogin - 買い物かご・プレゼントログイン -------------------------------------------------------------*/ #cartLogin:after {content: ""; clear: both; display: block;}/* clearfix */ #cartLogin table{margin: 0 auto 20px auto; width: 428px;} #cartLogin .supplement{font-size: 13px; color: #C00; line-height: 150%; margin-top: 10px} #cartLogin h3{margin-bottom: 15px; padding: 1px 20px; border-bottom: 1px solid #CCC; background: url("../images/marker.gif") 7px 7px no-repeat #EEE; font-size: 85%;} #cartLogin .box{border: 1px solid #CCC; width: 468px; float: left; margin: 0 10px 30px; position: relative;} #cartLogin .box .buttonarea{width: 100%; margin: 20px 0; padding: 0;} #cartLogin .box table{margin: 10px; width: 446px;} #cartLogin .box .link_text{text-align: right; padding: 15px 0 10px;} #cartLogin .box .regist_non_area{width: 442px; margin: 0 auto;} #cartLogin .box .regist_non_area p{margin: 0 0 10px;} #cartLogin .box .amazon_area{width: 442px; margin: 0 auto; border-top: 1px solid #ccc;} #cartLogin .box .amazon_area p{margin: 10px 0;} #cartLogin .widebox{border: 1px solid #CCC; width: 960px; margin: 0 10px 30px; clear: both;} #cartLogin .widebox .link{text-align: right;} #cartLogin .widebox table{width: 920px;} #cartLogin input[type='text'],#cartLogin input[type='password']{width: 200px;} #cartLogin .social_provider ul{margin: 10px 19px 20px;} #cartLogin .social_provider ul:after {content: ""; clear: both; display: block;}/* clearfix */ #cartLogin .social_provider ul li{width: 220px; height: 44px; font-size: 14px; display: block; float: left; margin: 10px 5px;} #cartLogin .social_provider ul li a{display: block; text-decoration: none;} #cartLogin .social_provider ul li a span{padding: 14px 0 14px 25px; border: 1px solid #cdcdcd; border-left: 0px; margin: 0 0 0 53px; display: block; background: #FFF; line-height: 1; font-size: 14px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; } #cartLogin .social_provider li.yahoo a{background: url("../images/social_yahoo.png") no-repeat; color: #e71017;} #cartLogin .social_provider li.facebook a{background: url("../images/social_facebook.png") no-repeat; color: #3b5998;} #cartLogin .social_provider li.twitter a{background: url("../images/social_twitter.png") no-repeat; color: #55acee;} #cartLogin .social_provider li.google a{background: url("../images/social_google.png") no-repeat; color: #dc4e41;} #cartLogin .social_provider li.mixi a{background: url("../images/social_mixi.png") no-repeat; color: #d1ad59;} #cartLogin .social_provider li.rakuten a{background: url("../images/social_rakuten.png") no-repeat; color: #bf0000;} #cartLogin .social_provider li.line a{background: url("../images/social_line.png") no-repeat; color: #00b300;} #cartLogin .social_provider li.paypal a{background: url("../images/social_paypal.png") no-repeat; color: #293e7f;} /* cartFlow - 買い物かご・プレゼント注文情報入力～注文完了まで -------------------------------------------------------------*/ #cartFlow{width: 980px; padding-bottom: 20px; margin: 0 auto;} #cartFlow:after {content: ""; clear: both; display: block;}/* clearfix */ #cartFlow .content{width: 750px; float: left; margin-right: 20px;} #cartFlow td input{vertical-align: baseline;} #cartFlow table.newCreditCard{width: 547px; font-size: 100%; margin: 10px auto;} #cartFlow .point_info{margin-bottom: 20px;} #cartFlow .teiki ul{margin: 5px 10px;} #cartFlow .teiki ul:after {content: ""; clear: both; display: block;}/* clearfix */ #cartFlow .teiki ul li{float: left; font-size: 13px; margin-right: 1em;} #cartFlow table{width: 750px; margin: 0px 0 20px;} #cartFlow table.change_data{margin-top: -21px;} #cartFlow table.member_regist{margin-top: -21px;} #cartFlow table td.short input{width: 120px;} #cartFlow .text_box{padding-left: 90px;} #cartFlow .text_box p{margin: 0 0 10px; font-size: 100%;} #cartFlow .text_box p.code{font-size: 80%;} #cartFlow .text_box p.last{margin-bottom: 0px;} #cartFlow h3{display: block; font-size: 110%; margin: 30px 0px 10px; padding-bottom: 5px;} #cartFlow h3 img{vertical-align: middle;} #cartFlow h3 .lock{position:relative; top:-3px;} #cartFlow .price{color: #C00; text-align: right;} #cartFlow .total{margin: 0px 0 30px; padding: 0px 0 5px; font-weight: bold; text-align: right; border-bottom: #CCC 1px solid; width: 700px;} #cartFlow .total p{margin: 0px; font-size: 90%;} #cartFlow .point{color: #F60; font-weight: bold;} #cartFlow .attention{color: #C00; font-weight: bold; font-size: 110%;} #cartFlow .attention_message{color: #C00; font-weight: bold;} #cartFlow .sendCopyButton{margin-bottom: 10px;} #cartFlow .sendCopyButton:after {content: ""; clear: both; display: block;}/* clearfix */ #cartFlow .sendCopyButton .button{width: auto; display: inline-block;} #cartFlow .multi_send .buttonarea{background: #EEE; margin: 0px 0 20px; padding: 30px 0;} #cartFlow .multi_send table.delivery{margin-top: -21px;} #cartFlow .multi_send .sendAddressButton a{width: auto; display: inline-block; margin-bottom: 10px;} #cartFlow #reCAPTCHA{margin: 20px auto 40px auto;} #cartFlow #reCAPTCHA iframe{width: 158px; height: 138px;} #cartFlow #reCAPTCHA .g-recaptcha{display: block; -webkit-transform: scale(1.19); -ms-transform: scale(1.19); transform: scale(1.19); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0;} #cartFlow .cartitem{margin-top: 20px; width: 210px; padding: 10px; border: #CCC 1px solid;} #cartFlow .cartitem h3{margin: 0 0 10px; padding: 0px; border: none; background: none;} #cartFlow .cartitem li{margin-bottom: 10px; padding-bottom: 0px; border-bottom: 1px solid #CCC;} #cartFlow .cartitem .img_box{ width: 25px; height: 25px; float: left; margin-right: 5px; text-align: center; position: relative;} #cartFlow .cartitem .img_box img{width: auto; max-width: 25px; max-height: 25px; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} #cartFlow .cartitem .text_box{padding-left: 0px; margin-bottom: 5px;} #cartFlow .cartitem .text_box:after {content: ""; clear: both; display: block;}/* clearfix */ #cartFlow .cartitem .text_box p{margin: 0px; font-size: 70%; line-height: 130%;} #cartFlow .cartitem p.price{font-size: 70%; margin: 0px; float: left;} #cartFlow .cartitem p.amount{font-size: 70%; margin: 0px; float: right;} #cartFlow .cartresult table{width: 920px; margin: 0 auto 20px;} #cartFlow .cartresult .total{width: 920px; margin: 0 10px 30px;} #cartFlow .cartconfirm table{width: 920px; margin: 0 auto 20px;} #cartFlow .cartconfirm .total{width: 920px; margin: 0 10px 30px;} #cartFlow .error{clear: both; margin: 5px 10px; color: #C00; font-weight: bold; text-align: center; font-size: 80%;} #cartFlow .card-supplement{font-size:12px; color:#368bc6; font-weight:bold;} #cartFlow .note{font-size: 90%;text-indent: -1em;padding-left:1em;display: block;line-height: 1.5;} /* クーポンラジオボタン制御に仕様 */ .couponHide{display: none;} /* cartResult - カート完了画面 -------------------------------------------------------------*/ #cartResult .number{margin: 30px 0px; text-align: center; line-height: 200%;} #cartResult .number strong{ font-size: 20px;} /* cartRecommend - カートおすすめ -------------------------------------------------------------*/ #cartRecommend{margin-top: 20px; width: 210px; padding: 10px; border: #CCC 1px solid; } #cartRecommend .box{margin: 0px 0 40px; border: 0px;} #cartRecommend .box:after {content: ""; clear: both; display: block;}/* clearfix */ #cartRecommend .text{margin-left: 70px; min-height: 60px;} #cartRecommend h3{margin-bottom: 10px; height: auto; background: none; padding: 0px; border-bottom: none;} #cartRecommend h3 a{float: right;} #cartRecommend h4{display: block; margin: 0px 0px 10px; background: none; padding: 0px; font-size: 70%; border-bottom: none;} #cartRecommend .appeal{display: block; margin: 0; color: #F60; font-size: 70%;} #cartRecommend .price{display: block; margin: 0; color: #C00;} #cartRecommend .price .teika{font-weight: bold; font-size: 100%;} #cartRecommend .price .other{font-size: 90%;} #cartRecommend .explanation1{display: block; margin: 5px 0px 0 0; padding: 10px 0; border-top: #CCC 1px solid; font-size: 80%; line-height: 120%;} #cartRecommend .buttonarea{display: block; margin: 0px; padding-top: 10px; text-align: left;} #cartRecommend .buttonarea .button{display: block; margin: 0 0 10px;} #cartRecommend .property{ margin: 0 0 10px; color: #AAA; font-size: 75%;} #cartRecommend .img_box{width: 60px; height: 60px; text-align: center; position: relative; float: left;} #cartRecommend .img_box img{width: auto; max-width: 60px; max-height: 60px; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} /* presentFlow - 買い物かご・プレゼント注文情報入力～注文完了まで -------------------------------------------------------------*/ #presentFlow #cartLogin table{width: 446px !important;} /* ================================================================= 9.定期購入商品履歴照会・変更 使用ファイル：teiki_index.xhtml, teiki_detail.xhtml 　　　　　　　teiki_renew.xhtml, teiki_renew_confirm.xhtml =================================================================*/ /* teikiIndex - 定期購入商品一覧 -------------------------------------------------------------*/ #teikiIndex h3{margin: 5px; padding-left: 8px; border-left: 6px solid #373737; font-size: 110%;} #teikiIndex h4{display: block; margin: 30px 0px 20px; padding-left: 15px; border-bottom: 1px solid #CCC; background: url("../images/marker.gif") 2px 8px no-repeat; font-size: 100%;} #teikiIndex .box{margin: 10px; padding: 10px; border: 1px solid #CCC; background: #FFF;} #teikiIndex .head{padding: 5px; background: #F1F1F1;} #teikiIndex .headDetail{padding-left: 15px; background: url("../images/marker_on.gif") 0 5px no-repeat;} #teikiIndex .head_renew .button{display: inline-block; width: auto; margin-bottom: 10px;} #teikiIndex .price{color: #C00; text-align: right;} #teikiIndex table{width: 728px; margin: 10px 0px 30px;} #teikiIndex table:last-child{margin-bottom: 0px;} #teikiIndex th{padding: 5px 10px;} #teikiIndex td{text-align: center;} #teikiIndex td.month{background: #F9F9F9; font-weight: bold; color: #960;} #teikiIndex .status {float: right; margin-right: 20px;} #teikiIndex .cancel_oder{text-align: right;} #teikiIndex .cancel_oder .button{display: inline-block; width: auto;} #teikiIndex .cancel_oder form{height: 20px;} /* teikiDetail - 定期購入商品照会・変更・確認画面 -------------------------------------------------------------*/ #teikiDetail h3{margin: 5px; padding-left: 8px; border-left: 6px solid #373737; font-size: 110%;} #teikiDetail h4{display: block; margin: 30px 0px 20px; padding-left: 15px; border-bottom: 1px solid #CCC; background: url("../images/marker.gif") 2px 8px no-repeat; font-size: 100%;} #teikiDetail h5{margin: 20px 0px 0; font-size: 16px;} #teikiDetail .box{margin: 10px; padding: 10px; border: 1px solid #CCC; background: #FFF;} #teikiDetail .head{padding: 5px; background: #F1F1F1;} #teikiDetail .headDetail{margin-right: 20px; padding-left: 5px; border-left: 12px groove #333;} #teikiDetail .price{color: #C00;} #teikiDetail table{width: 728px; margin: 10px 0px 30px;} #teikiDetail table:last-child{margin-bottom: 0px;} #teikiDetail td.month{background: #F9F9F9; font-weight: bold; color: #960;} /* ================================================================= 11.商品詳細・一覧、プレゼント詳細・一覧、トピックス詳細・一覧 使用ファイル：item_list$detail.xhtml, item_list$image.xhtml 　　　　　　　item_list$simple.xhtml, item_detail.xhtml 　　　　　　　present_list.xhtml, present_detail.xhtml 　　topics_list.xhtml,topics_detail.xhtml =================================================================*/ /* category_html - カテゴリHTML -------------------------------------------------------------*/ #category_html{margin-bottom: 20px;} #category_html img{display: block; margin-bottom: 10px;} /* itemListCategory - 一覧画面共通のメニュー -------------------------------------------------------------*/ #itemListCategory .more_box{background: #f4f4f4; padding: 10px; width: 750px; margin: 0px 0 30px;} #itemListCategory .more_box{border: none; border-collapse: inherit !important;} #itemListCategory .more_box th{vertical-align: middle; border: none; border-right: 1px solid #b3b3b3; width: 142px; padding: 0px 0px; font-size: 13px; font-weight: bold;} #itemListCategory .more_box th img{vertical-align: middle; margin-right: 6px; font-size: 13px;} #itemListCategory .more_box td{ border: none; padding: 0px; font-size: 13px;} #itemListCategory .more_box td ul{padding: 10px 20px;} #itemListCategory .more_box td ul li{display: inline-block; margin-right: 20px;} #itemListCategory .more_box a.select{color: #e75700;} /* list - 一覧画面共通のメニュー -------------------------------------------------------------*/ #list{padding-bottom: 20px;} #list ul{margin-bottom: 20px; background: url("../images/list_bg.gif") bottom repeat-x;} #list ul:after {content: ""; clear: both; display: block;}/* clearfix */ #list li{float: left;} #list li a{display: block; margin-right: 5px; padding: 5px 10px 5px 25px; border-top: 1px solid #DDD; border-left: 1px solid #DDD; border-right: 1px solid #DDD; border-bottom: 1px solid #CCC; font-size: 80%; color: #333;} #list .detail{background: url("../images/icon_list_detail.png") 7px 7px no-repeat #DDD;} #list .image{background: url("../images/icon_list_image.png") 7px 7px no-repeat #DDD;} #list .simple{background: url("../images/icon_list_simple.png") 7px 7px no-repeat #DDD;} #list .detail.select{border: 1px solid #CCC; border-bottom: 1px solid #FFF; background-color: #FFFFFF; color: #333; text-decoration: none;} #list .image.select{border: 1px solid #CCC; border-bottom: 1px solid #FFF; background-color: #FFFFFF; color: #333; text-decoration: none;} #list .simple.select{border: 1px solid #CCC; border-bottom: 1px solid #FFF; background-color: #FFFFFF; color: #333; text-decoration: none;} #list .pageguide{float: left; width: 550px; font-size: 85%; padding-top: 4px;} #list .rearrange{float: left; width: 200px; font-size: 85%; text-align: right;} #list .rearrange select{margin-left: 10px;} #list .pagelink{clear: both; font-size: 85%; padding: 10px 0;} #list .nolink{color: #999;} /* itemListDetail - 商品詳細一覧・プレゼント一覧 -------------------------------------------------------------*/ #itemListDetail{margin-bottom: 20px; clear: both;} #itemListDetail .box{margin-top: 10px; border: #CCC 1px solid; padding-top: 10px;} #itemListDetail .box:after {content: ""; clear: both; display: block;}/* clearfix */ #itemListDetail .text{margin-left: 140px;} #itemListDetail .sale_date{margin: 0px 10px 10px 0px;} #itemListDetail h3{display: block; margin: 0px 10px 10px 0; font-size: 95%;} #itemListDetail .appeal{display: block; margin: 0; color: #F60; font-size: 70%;} #itemListDetail .price{display: block; margin: 0 10px 10px 0; color: #C00;} #itemListDetail .price .teika{font-weight: bold; font-size: 110%;} #itemListDetail .price .other{font-size: 90%;} #itemListDetail .explanation1{display: block; margin: 10px 10px 0px 0px; padding: 10px 0; border-top: #CCC 1px solid; font-size: 80%; line-height: 120%;} #itemListDetail .button_area{margin: 0px 10px 20px 0px; padding-top: 20px; border-top: #CCC 1px solid; text-align: right;} #itemListDetail .button_area:after {content: ""; clear: both; display: block;}/* clearfix */ #itemListDetail .button_area .button{width: auto; display: inline-block;} #itemListDetail .property{float: right; margin: 0; color: #AAA; font-size: 75%; padding: 3px;} #itemListDetail .img_box{width: 120px; height: 120px; margin: 10px; float: left; text-align: center; position: relative;} #itemListDetail .img_box img{width: auto; max-width: 120px; max-height: 120px; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} /* itemListSimple - 商品簡易一覧 -------------------------------------------------------------*/ #itemListSimple{margin-bottom: 20px;} #itemListSimple .box{margin-top: 10px; border: #CCC 1px solid;} #itemListSimple .box:after {content: ""; clear: both; display: block;}/* clearfix */ #itemListSimple h3{display: block; margin: 10px; font-size: 95%;} #itemListSimple .appeal{display: block; margin: 0 0 0 10px; color: #F60; font-size: 70%;} #itemListSimple .price{display: block; margin: 0 0 0 10px; color: #C00;} #itemListSimple .price .teika{font-weight: bold; font-size: 110%;} #itemListSimple .price .other{font-size: 90%;} #itemListSimple .explanation1{display: block; margin: 5px 10px 0; padding: 10px 0; border-top: #CCC 1px solid; font-size: 80%; line-height: 120%;} #itemListSimple .button_area{margin: 0px 10px 20px; padding-top: 20px; border-top: #CCC 1px solid; text-align: right;} #itemListSimple .button_area:after {content: ""; clear: both; display: block;}/* clearfix */ #itemListSimple .button_area .button{float: right; width: auto; margin-left: 10px;} #itemListSimple .button_area .not_click{float: right; width: auto; margin-left: 10px;} #itemListSimple .property{float: right; margin: 0; color: #AAA; font-size: 75%; padding: 3px;} /* itemListImage - 商品画像一覧 -------------------------------------------------------------*/ #itemListImage{margin-bottom: 20px;} #itemListImage:after {content: ""; clear: both; display: block;}/* clearfix */ #itemListImage .box{margin: 0px 22px 35px 0; width: 171px; float: left; position: relative;} #itemListImage .text{width: 171px; margin-right: 10px;} #itemListImage h3{display: block; margin: 10px 0px 20px 0; font-size: 13px; line-height: 150%; font-weight: normal; height: 38px;} #itemListImage h3 a{color: #c9140b;} #itemListImage .price{text-align: right; font-size: 14px; margin: 0px;} #itemListImage .price .tax{ font-size: 11px;} #itemListImage .icon{display: block; line-height: 120%; position: absolute; z-index: 1000; top: 20px; left: 21px;} #itemListImage .img_box{width: 171px; height: 171px; text-align: center; position: relative;} #itemListImage .img_box img{width: auto; max-width: 171px; max-height: 171px; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} /* topicsList - トピックス一覧 -------------------------------------------------------------*/ .news_re { text-align: center; } #topicsList {margin-bottom: 20px;} #topicsList .box { margin-top: 30px; margin-left: auto; margin-right: auto; padding: 10px; border: #CCC 1px solid; max-width: 960px; } #topicsList .box:after {content: ""; clear: both; display: block;}/* clearfix */ #topicsList .box h3{font-size: 100%; display: block; margin: 10px 10px 0 0px;} #topicsList .box p { display: block; max-width: 960px; margin: 0; padding: 15px 10px; font-size: 90%; font-weight: normal; color: #333; line-height: 2em; } #topicsList .img_box{width: 120px; height: 120px; float: right; margin: 0 0 10px 10px; text-align: center; position: relative;} #topicsList .img_box img{width: auto; max-width: 120px; max-height: 120px; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} #topicsList .box .pdf{ text-align: right; margin: 10px 10px 10px 0; } #topicsList .box a.btn-pdf { display: inline-block; padding: 0.3em 1em; text-decoration: none; color: #1747a2; border: solid 2px #1747a2; border-radius: 3px; transition: .4s; } #topicsList .box a.btn-pdf:hover { background: #1747a2; color: white; } /* itemDetail - 商品詳細・プレゼント詳細 -------------------------------------------------------------*/ #itemDetail{margin-bottom: 20px;} #itemDetail .box{margin-top: 10px;} #itemDetail .box:after {content: ""; clear: both; display: block;}/* clearfix */ /* 商品画像の切り替え */ #itemDetail .item_image_area{float: left; width: 348px; outline:none; position: relative;} #itemDetail .item_image_area #main_box{position: relative; overflow: hidden; height: 432px;} #itemDetail .item_image_area #main_box:after {content: ""; clear: both; display: block;}/* clearfix */ #itemDetail .item_image_area .slick-list{overflow: visible;} #itemDetail .item_image_area .img_box{ width: 348px; height: 348px;} #itemDetail .item_image_area .img_box img{max-width: 348px; max-height: 348px;} #itemDetail .item_image_area .img_box p{position: absolute; top: 358px; margin: 0px; font-size: 13px; height: 6em; overflow: hidden; line-height: 1.4; text-align: left; cursor: text;} #itemDetail .item_image_area .slick-arrow{background: #000000; opacity: 0.33; height: 50px; width: 30px; pointer-events: all; top: 170px; z-index:1001;} #itemDetail .item_image_area .slick-prev{left: 0px;} #itemDetail .item_image_area .slick-next{right: 0px;} #itemDetail .item_image_area .icon_zoom {position: absolute; z-index: 1001; right: 5px; top: 5px; cursor: pointer;} #itemDetail .slide-item {outline:none;} #itemDetail #thumbnail-list{margin: 10px 0 20px;} #itemDetail #thumbnail-list:after {content: ""; clear: both; display: block;}/* clearfix */ #itemDetail #thumbnail-list .thumbnail-item{margin: 0 6px 5px 0; float: left; } #itemDetail #thumbnail-list .thumbnail-item:nth-child(6n){margin-right: 0;} #itemDetail #thumbnail-list .thumbnail-item{border: 1px solid #ccc; width: 53px; height: 53px; display: block; text-align: center; position: relative;cursor: pointer;} #itemDetail #thumbnail-list img{max-width: 51px; max-height: 51px; width: auto; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} #itemDetail #thumbnail-list .thumbnail-item.thumbnail-current{border: 1px solid #cc3333; display: block;} #itemDetail .property_image_area{ clear: both;} #itemDetail .propertyImg{width: 80px; float: left; margin-right: 15px;} #itemDetail .propertyImg .propertyimg_box{width: 80px; height: 80px; text-align: center; position: relative; margin: 0 10px 0px 0;} #itemDetail .propertyImg .propertyimg_box img{width: auto; max-width: 80px; max-height: 80px; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} #itemDetail .propertyImg p{margin: 0; text-align: center;} #itemDetail p{margin: 0 0 10px;} #itemDetail .text{float: right; width: 382px;} #itemDetail .tex_bottom{clear: both;} #itemDetail .appeal{display: block; margin: 10px 0px 0 0; color: #d23b34; font-size: 14px; font-weight: bold;} #itemDetail h3{margin: 0px 0px 5px 0; font-size: 18px; color: #262626; padding-top: 30px} #itemDetail .price{margin: 20px 0px; font-size: 13px; color: #262626;} #itemDetail .price strong{font-size: 18px; font-weight: normal;} #itemDetail .explanation{margin: 0px 0px 20px 0; font-size: 13px; line-height: 150%;} #itemDetail .explanation table{width: 100%;} #itemDetail .item_icon_area img{max-width: 140px; margin-bottom: 10px;} #itemDetail h4{margin: 0 0 10px;} #itemDetail table{border-collapse: collapse; border-spacing: 0; font-size: 12px; margin: 0px;} #itemDetail th{background: #f3f3f3; border: solid 1px #d5d5d5;} #itemDetail td{border: solid 1px #d5d5d5;} #itemDetail .spec{width: 382px; margin: 0 0 0px;} #itemDetail .spec th{padding: 5px 10px; text-align: left; width: 92px;} #itemDetail .spec td{padding: 5px 10px;} #itemDetail .button{margin-bottom: 10px;} #itemDetail .button.small{max-width: 160px;} #itemDetail .property{width: 100%; border: 0px; font-size: 12px; margin-bottom: 20px;} #itemDetail .property th{border: 0px; border-top: solid 1px #d5d5d5; border-bottom: solid 1px #d5d5d5; text-align: center;} #itemDetail .property td{border: 0px; border-bottom: solid 1px #d5d5d5; vertical-align: middle; text-align: center;} #itemDetail .property td .medium{max-width: 150px; min-width: 150px; height: 29px; padding: 0px !important; font-size: 13px; display: inline-block; margin-bottom: 0px;} @media all and (-ms-high-contrast:none) { #itemDetail .property td .medium{padding: 2px 0px 0px 0px !important} } #itemDetail .property td a.medium{padding: 7px !important; margin-bottom: 0px;} #itemDetail .property td span.medium{padding: 7px !important; margin-bottom: 0px;} #itemDetail .property th.color{padding: 10px;} #itemDetail .property td.color{width: 152px; padding: 3px 10px; text-align: left;} #itemDetail .property .color img{vertical-align: middle; margin-right: 10px; display: block; float: left;} #itemDetail .property .size{width: 55px;} #itemDetail .property .zaiko{width: 55px;} #itemDetail .property .kakaku{width: 98px;} #itemDetail .property .button_area{padding: 10px 0px; width: 150px;} #itemDetail .property input.button{background-repeat: no-repeat; background-position: 14px 6px; text-indent: 20px;} #itemDetail .property .wishbutton{background-repeat: no-repeat; background-position: 8px 5px; text-indent: 20px;} #itemDetail .sizeguide{float: left; margin-bottom: 50px;} #itemDetail .sizeguide_html table{width: 100%; margin-bottom: 20px;} #itemDetail .zaikoguide{float: right; margin-bottom: 50px;} #itemDetail .zaikoguide table{width: 382px; border: 0px; font-size: 12px; line-height: 1.4; margin-bottom: 0px;} #itemDetail .zaikoguide table th{border: none; background: #f3f3f3; white-space: nowrap; font-weight: bold; padding: 10px;} #itemDetail .zaikoguide table td{border: none; background: #f3f3f3; padding:10px 0px 0px;} #itemDetail .zaikoguide table tr:last-child td{padding-bottom: 10px;} #itemDetail .free_html{clear: both;} /* itemDetail - 商品詳細カートに入った報告ポップアップ -------------------------------------------------------------*/ #itemDetail .cartSubmitButton{position: relative;} #itemDetail .cartSubmitButton .cartMessage{position: absolute; top: -85px; left: 50%; margin-left: -122px; padding: 10px; background-color: #fff; border: #ccc 2px solid; width: 270px; z-index: 10; display: none;} #itemDetail .cartSubmitButton .cartMessage:after{content: ""; display: block; position: absolute; top: 100%; left: 50%; margin-left: -3px; width: 6px; height: 5px;} #itemDetail .cartSubmitButton .cartMessage .title{text-align: center; font-size: 100.0%; font-weight: bold; color: #000;} #itemDetail .cartSubmitButton .cartMessage .mainclose{background-color: #fff; cursor: pointer; text-align: center; margin-bottom: 0;} #itemDetail .cartSubmitButton .cartMessage .link{background-color: #fff; text-align: center;} #itemDetail .cartSubmitButton .cartMessage .link a{display: inline-block;} #itemDetail .cartSubmitButton .cartMessage .close{position: absolute; top: 3px; right: 3px; cursor: pointer;} /* itemDetail - 商品詳細お気に入りリストに入った報告ポップアップ -------------------------------------------------------------*/ #itemDetail .wishlistSubmitButton{position: relative;} #itemDetail .wishlistSubmitButton .wishlistMessage{position: absolute; top: -85px; left: 50%; margin-left: -122px; padding: 10px; background-color: #fff; border: #ccc 2px solid; width: 270px; z-index: 10; display: none;} #itemDetail .wishlistSubmitButton .wishlistMessage:after{content: ""; display: block; position: absolute; top: 100%; left: 50%; margin-left: -3px; width: 6px; height: 5px;} #itemDetail .wishlistSubmitButton .wishlistMessage .title{text-align: center; font-size: 100.0%; font-weight: bold; color: #000;} #itemDetail .wishlistSubmitButton .wishlistMessage .mainclose{background-color: #fff; cursor: pointer; text-align: center; margin-bottom: 0;} #itemDetail .wishlistSubmitButton .wishlistMessage .link{background-color: #fff; text-align: center;} #itemDetail .wishlistSubmitButton .wishlistMessage .close{position: absolute; top: 3px; right: 3px; cursor: pointer;} /* itemDetail - トピックス詳細 -------------------------------------------------------------*/ #itemDetail .topics_img h3,#itemDetail .topics_noimg h3{margin: 10px 10px 5px 0px; display: block; font-size: 105%;} #itemDetail .topics_img p,#itemDetail .topics_noimg p{font-size: 90%; margin: 5px 0px;} #itemDetail .topics_img img{display: block;} #itemDetail .topics_img .img_box{width: 140px; height: 140px; margin: 10px 10px 10px 0; text-align: center; position: relative; float: left;} #itemDetail .topics_img .img_box img{width: auto; max-width: 140px; max-height: 140px; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} #itemDetail .topics_img .topics_text{overflow: auto;} #itemDetail .topics_img,#itemDetail .topics_noimg{padding: 10px;} #itemDetail .topics_noimg p img{float: right; margin: 0 0 10px 10px;} /* present_detail.xhtml - プレゼント詳細 -------------------------------------------------------------*/ #itemDetail.present .item_image_area #targetarea{visibility: visible;} #itemDetail.present .item_image_area .img_box{display:block; width: 268px; height: 268px;} /* ================================================================= 12.レビュー 使用ファイル：item_detail.xhtml, member_review.xhtml =================================================================*/ #review{margin-bottom: 40px;} #review p{margin: 0 0px;} #review p.item_name{font-size: 95%; font-weight: bold;} #review h3{float: left; margin: 0 10px 0 0; font-size: 80%;} #review .review_box{margin-bottom: 20px;} #review .box{margin: 10px 0 5px; padding: 10px; border: #CCC 1px solid;} #review .box h3{float: none; font-size: 90%;} #review .box p{margin: 0;} #review .box p.name{padding: 5px 0; margin-bottom: 10px; border-bottom: 1px dashed #CCC; color: #666; font-size: 75%;} #review p.goodButton{margin-bottom: 5px; color: #666; font-size: 75%;} #review p.goodButton .button{margin-left: 5px; vertical-align: middle; display: inline-block; width: auto;} #review p.goodNumber{margin-bottom: 20px; color: #666; font-size: 75%;} #review p.more{margin-bottom: 20px; font-size: 75%; text-align: right;} #review p.pageguide{margin: 10px;} #review p.pagelink{text-align: center; padding-top: 40px;} #review ul.star{float: left;} #review ul.star li{display: block; float: left; width: 15px; height: 15px; text-indent: -9999px;} #review ul.star li.good{background: url("../images/review_good.gif") no-repeat;} #review ul.star li.bad{background: url("../images/review_bad.gif") no-repeat;} #review .contribution{margin-top: 10px; padding: 10px 10px 10px 10px; background: #F1F1F1;} #review .contribution #error{background: #F1F1F1;} #review .contribution table{margin: 0; border: none;} #review .contribution th{width: 140px; padding: 5px 10px; border: none; background: none; font-weight: normal; text-align: left;} #review .contribution td{padding: 5px 10px; border: none;} #review .contribution h3{float: none; margin:0 0 10px 0; padding:0px; font-size: 120%;} #review .review-image{padding-top: 20px;} #review .review-image:after {content: ""; clear: both; display: block;}/* clearfix */ #review .review-image .img_box{width: 80px; height: 80px; margin-right: 10px; margin-bottom: 10px; text-align: center; position: relative; float: left;} #review .review-image img{width: auto; max-width: 80px; max-height: 80px; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} /* ================================================================= 13.購入履歴 使用ファイル：member_history.xhtml =================================================================*/ #history .infoarea{display: block; margin: 40px 10px 0; font-size: 80%; font-weight: bold;} #history .infoarea:after {content: ""; clear: both; display: block;}/* clearfix */ #history .infoarea .status_icon{color: #FFFFFF; float: left; font-weight: normal; margin-right: 10px;} #history .cancel{float: right; margin-left: 10px;} #history .payment_change{float: right; margin-left: 10px;} #history .infoarea .date{clear: both; padding-top: 3px;} #history .preparing .status_icon{background: #336600; padding: 3px 5px;}/* 手配中 */ #history .delivered .status_icon{background: #ff9900; padding: 3px 5px;}/* 配送中 */ #history .delivering .status_icon{background: #000066; padding: 3px 5px;}/* 配送済 */ #history .canceled .status_icon{background: #cc0000; padding: 3px 5px;}/* 取消済 */ #history .yoyaku .status_icon{background: #000000; padding: 3px 5px;}/* 予約済 */ #history .teiki_together .status_icon{background: #996633; padding: 3px 5px;}/* 定期にまとめて */ #history .price{color: #C00; text-align: right;} #history .cart{width: 230px; text-align: center;} #history .cart .button{margin-bottom: 10px; width: auto; display: inline-block;} #history .cart .delivery_slip{margin-bottom: 0px;} #history .code{width: 80px;} #history .amount{width: 30px; text-align: center;} #history .property{display: block; color: #AAA; font-size: 90%;} #history .img_box{width: 80px; height: 80px; margin-right: 10px; margin-bottom: 10px; text-align: center; position: relative; float: left;} #history .img_box img{width: auto; max-width: 80px; max-height: 80px; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} #history .pageguide{float: left; width: 500px; font-size: 75%;} #history .rearrange{float: left; width: 200px; font-size: 75%; text-align: right;} #history .pagelink{clear: both; font-size: 75%;} #history .nolink{color: #999;} /* =================================================================== 14：サブウインドウで表示するページ用 使用ファイル：item_detail_other_image.xhtml 　　　　　　　item_friend_mail.xhtml,item_friend_mail_result.xhtml 　　　　　　　item_itemproperty_zaiko.xhtml 　　　　　　　present_friend_mail.xhtml,present_friend_mail_result.xhtml =================================================================== */ #subwindow{width: 500px; margin: auto;} #subwindow #header{background: none;} #subwindow #header h1 a{float: none;} #subwindow #content h2{margin-bottom: 20px; font-weight: normal;border-bottom: solid 3px #cccccc; position: relative;} #subwindow #content h2:after{position: absolute; content: " "; display: block; border-bottom: solid 3px #373737; bottom: -3px; width: 20%;} #subwindow #content table{font-size: 80%;line-height: 160%;margin: 10px 0px;width: 100%;border: 1px solid #CCCCCC;} #subwindow #content th{padding: 10px; border: 1px solid #CCC; background: #F6F6F6; vertical-align: top; font-weight: normal; text-align: left;} #subwindow #content th.zaiko{width: auto;text-align: center;} #subwindow #content td{padding: 10px; border: 1px solid #CCC; vertical-align: top;} #subwindow #content td.number{text-align: right;} #subwindow #content .hissu{color: #CC0000;font-weight: bold;} #subwindow #content .close{margin: 10px 0; font-size: 80%; line-height: 150%; text-align: right;} #subwindow .buttonarea{text-align: center; margin: 10px; padding-top: 40px;} #subwindow .buttonarea .button{display: inline-block; margin: 0 10px;} #subwindow #content #products{width: 500px; position: relative;} #subwindow #content #products .slides_container{overflow: hidden; position: relative; border: 1px solid #ccc; margin: 10px 0 0 0;} #subwindow #content #products .slides_container .ima_box{width: 498px; height: 498px; position: relative; text-align: center;} #subwindow #content #products .slides_container img{width: auto; margin: auto; max-width: 498px; max-height: 498px; display: block; position: absolute; bottom: 0; left: 0; right: 0; top: 0;} #subwindow #content #products .slides_container a{width: 400px; height: 400px; display: block;} #subwindow #content #products .thumbox{clear: both; margin: 15px 0 0; padding: 0;} #subwindow #content #products .thumbox:after {content: ""; clear: both; display: block;}/* clearfix */ #subwindow #content #products .thumbox .pagination li{margin: 0 10px 10px 0; float: left;} #subwindow #content #products .thumbox .pagination li.last{margin-right: 0;} #subwindow #content #products .thumbox .img_box{border: 1px solid #ccc; width: 92px; height: 92px; display: block;} #subwindow #content #products .thumbox .img_box img{max-width: 90px; max-height: 90px;} #subwindow #content #products .thumbox .img_box img:hover{filter: alpha(opacity=60); -moz-opacity: .6; -khtml-opacity: .6; opacity: .6;} #subwindow #content #products .thumbox .current .img_box{border: 1px solid #cc3333; display: block; filter: alpha(opacity=100) !important; -moz-opacity: 1 !important; -khtml-opacity: 1 !important; opacity: 1 !important;} #subwindow #content #products .thumbox .current .img_box img:hover{cursor: default; filter: alpha(opacity=100) !important; -moz-opacity: 1 !important; -khtml-opacity: 1 !important; opacity: 1 !important;} #subwindow #content #products .prev{display: block; background: url(../images/detail_prev_button.png) no-repeat; text-indent: -9999px; width: 60px; height: 60px; top: 35%; left: -26px; position: absolute; z-index: 1000;} #subwindow #content #products .next{display: block; background: url(../images/detail_next_button.png) no-repeat; text-indent: -9999px; width: 60px; height: 60px; top: 35%; right: -26px; position: absolute; z-index: 1000;} #subwindow #content #products .arrowOn:hover .prev, #subwindow #content #products .arrowOn:hover .next{display: block;} #subwindow #content #products .arrowOn:hover .prev:hover, #subwindow #content #products .arrowOn:hover .next:hover{filter: alpha(opacity=80); -moz-opacity: .8; -khtml-opacity: .8; opacity: .8;} /* ================================================================= 15.エラーページ 使用ファイル：common/messages.xhtml 　　　　　　　ext/social_provider.xhtml =================================================================*/ #error{width: 100%; padding: 10px 0px;} #error table{margin: auto; border: none !important; font-size: 85%;} #error td{padding: 10px; border: none !important;} #error .ico{width: 40px; vertical-align: top; text-align: center;} #error .content{padding: 5px; color: #C00; font-weight: bold; vertical-align: middle; line-height: 150%; float: none;} #error .buttonarea{margin: 10px; padding-top: 40px; text-align: center;} #error ul{background: none;} #error li{float: none; font-size: 100%; border: 0px; padding: 0px; margin-right: 0px; margin-bottom: 0px; width: auto; line-height: 150%;} /* social_provider.xhtmlのエラー部分 -------------------------------------------------------------*/ #social_plus_error{width: 100%; padding: 10px 0px;} #social_plus_error table{margin: 0px 0 10px; border: none !important; font-size: 85%;} #social_plus_error td{padding: 10px; border: none !important;} #social_plus_error .ico{width: 40px; vertical-align: top; text-align: center;} #social_plus_error .content{padding: 5px; color: #C00; font-weight: bold; vertical-align: middle; line-height: 150%; float: none;} #social_plus_error .buttonarea{margin: 10px; padding-top: 10px; border-top: #CCC 1px dashed; text-align: center;} #social_plus_error ul{background: none;} #social_plus_error li{float: none; font-size: 100%; border: 0px; padding: 0px; margin-right: 0px; margin-bottom: 0px; width: auto; line-height: 150%;} /* ================================================================= 16.クレジットカード登録画面 使用ファイル：member_credit_entry_input.xhtml =================================================================*/ #credit td.button_area{text-align: center;} #credit td.button_area .button{display: inline-block; width: auto;} #credit .can_regist{padding-top: 30px;} #credit .error{clear: both; margin: 5px 10px; color: #C00; font-weight: bold; text-align: center; font-size: 80%;} /* ================================================================= 17.お気に入り 使用ファイル：wishlist.xhtml 　　　　　　　wishlist_edit.xhtml =================================================================*/ #wishList{margin-bottom: 20px;} #wishList .box{margin-top: 10px; border: #CCC 1px solid;} #wishList .box:hover{border: #8CC329 1px solid;} #wishList .box:after {content: ""; clear: both; display: block;}/* clearfix */ #wishList .provisional{margin: 0px;} #wishList .text{margin-left: 140px;} #wishList h3{display: block; margin: 10px 10px 0 0; font-size: 95%;} #wishList .appeal{display: block; margin: 0; color: #F60; font-size: 70%;} #wishList .price{display: block; margin: 0; color: #C00;} #wishList .price .teika{font-weight: bold; font-size: 110%;} #wishList .price .other{font-size: 90%;} #wishList .explanation1{display: block; margin: 5px 10px 0 0; padding: 10px 0px; border-top: #CCC 1px solid; font-size: 80%; line-height: 120%;} #wishList .explanation1 h4{margin-bottom: 10px;} #wishList .explanation1 h4 a{display: inline-block; width: auto; font-weight: normal;} #wishList .explanation1 p{margin: 0px;} #wishList .button_area{margin: 0px 10px 20px 0px; padding-top: 20px; border-top: #CCC 1px solid; text-align: right;} #wishList .button_area:after {content: ""; clear: both; display: block;}/* clearfix */ #wishList .button_area .button{width: auto; display: inline-block;} #wishList .property{display: inline; margin: 0; color: #AAA; font-size: 75%;} #wishList .img_box{width: 120px; height: 120px; margin: 10px; float: left; text-align: center; position: relative;} #wishList .img_box img{width: auto; max-width: 120px; max-height: 120px; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} /* ================================================================= 18.アドレス帳 使用ファイル：address_add.xhtml 　　　　　　　address_input.xhtml =================================================================*/ #addressList{padding-bottom: 20px;} #addressList h3{margin-bottom: 15px; padding: 7px 0px 7px 20px; border-bottom: 1px solid #CCC; background: url("../images/marker.gif") 7px 11px no-repeat; font-size: 85%; margin-top: 30px;} #addressList ul{padding: 20px 0 10px;} #addressList ul:after {content: ""; clear: both; display: block;}/* clearfix */ #addressList li{float: left; font-size: 80%; border: 1px solid #CCC; padding: 10px 10px 40px 10px; margin-right: 10px; margin-bottom: 10px; width: 348px; line-height: 180%; position: relative;} #addressList li strong{font-size: 18px;} #addressList li .button_area{margin: 0px 0px 0; position: absolute; bottom: 10px;} #addressList li .button_area .button{width: auto; display: inline-block;} #addressList .widebox li{width: 485px;} #addressList .pageguide{float: left; width: 500px; font-size: 75%;} #addressList .rearrange{float: left; width: 200px; font-size: 75%; text-align: right;} #addressList .pagelink{clear: both; font-size: 75%;} #addressList .nolink{color: #999;} #addressList .newaddress{margin-top: 20px;} /* ================================================================= 19.会員関係 使用ファイル：member_mypage.xhtml =================================================================*/ #member.mypage h3{margin: 10px 0 10px 0px;} #member.mypage h3 a{ float: right; width: auto;} #member.mypage ul{margin: 0 0 50px 0px;} #member.mypage ul:after {content: ""; clear: both; display: block;}/* clearfix */ #member.mypage ul li{float: left; width: 326px; padding: 0 0 10px;} #member.mypage ul li h4{font-size: 16px; background: #F6F6F6; font-weight: normal; padding: 6px 10px; margin: 0 0px 15px 0;} #member.mypage ul li .box{border: 1px solid #CCCCCC; margin-right: 10px; padding: 0px 0px 10px;} #member.mypage ul li p{font-size: 12px;} #member.mypage ul li a{font-size: 12px;} #member.mypage ul li a:hover {color:#000; text-decoration:none; outline:none;} #member.mypage #social_plus tr th{background: #FFF;} #member.mypage #social_plus tr th a{text-decoration: none;} #member.mypage #social_plus tr.title th{background: #F6F6F6;} #member.mypage #social_plus th.service{width: 220px;} #member.mypage #social_plus th div{width: 220px; height: 44px; font-size: 14px; display: block;} #member.mypage #social_plus th div p{padding: 14px 0 14px 25px; border: 1px solid #cdcdcd; border-left: 0px; margin: 0 0 0 53px; display: block; background: #FFF; line-height: 1; font-size: 14px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; } /*#member.mypage #social_plus th{width: 100px;}*/ #member.mypage #social_plus th.yahoo div{background: url("../images/social_yahoo.png") no-repeat; color: #e71017;} #member.mypage #social_plus th.facebook div{background: url("../images/social_facebook.png") no-repeat; color: #3b5998;} #member.mypage #social_plus th.twitter div{background: url("../images/social_twitter.png") no-repeat; color: #55acee;} #member.mypage #social_plus th.google div{background: url("../images/social_google.png") no-repeat; color: #dc4e41;} #member.mypage #social_plus th.mixi div{background: url("../images/social_mixi.png") no-repeat; color: #d1ad59;} #member.mypage #social_plus th.rakuten div{background: url("../images/social_rakuten.png") no-repeat; color: #bf0000;} #member.mypage #social_plus th.line div{background: url("../images/social_line.png") no-repeat; color: #00b300;} #member.mypage #social_plus th.paypal div{background: url("../images/social_paypal.png") no-repeat; color: #293e7f;} #member.mypage #social_plus th.yahoo div.off{background: url("../images/social_yahoo_off.png") no-repeat; color: #cdcdcd;} #member.mypage #social_plus th.facebook div.off{background: url("../images/social_facebook_off.png") no-repeat; color: #cdcdcd;} #member.mypage #social_plus th.twitter div.off{background: url("../images/social_twitter_off.png") no-repeat; color: #cdcdcd;} #member.mypage #social_plus th.google div.off{background: url("../images/social_google_off.png") no-repeat; color: #cdcdcd;} #member.mypage #social_plus th.mixi div.off{background: url("../images/social_mixi_off.png") no-repeat; color: #cdcdcd;} #member.mypage #social_plus th.rakuten div.off{background: url("../images/social_rakuten_off.png") no-repeat; color: #cdcdcd;} #member.mypage #social_plus th.line div.off{background: url("../images/social_line_off.png") no-repeat; color: #cdcdcd;} #member.mypage #social_plus th.paypal div.off{background: url("../images/social_paypal_off.png") no-repeat; color: #cdcdcd;} #member.mypage #social_plus td{vertical-align: middle;} /*ポップアップここから*/ #member.mypage .popup_wrap input { display: none; } #member.mypage .popup_overlay { display: flex; justify-content: center; overflow: auto; position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); opacity: 0; transition: opacity 0.5s, transform 0s 0.5s; transform: scale(0); text-align: center; } #member.mypage .popup_trigger { position: absolute; width: 100%; height: 100%; } #member.mypage .popup_content { position: relative; align-self: center; width: 90%; max-width: 650px; padding: 30px 40px 30px; box-sizing: border-box; background: #fff; line-height: 1.4em; transition: 0.5s; } #member.mypage .close_btn { position: absolute; top: 14px; right: 16px; font-size: 30px; cursor: pointer; } #member.mypage .popup_wrap input:checked ~ .popup_overlay { opacity: 1; transform: scale(1); transition: opacity 0.5s; } #member.mypage .open_btn { color: #666; cursor: pointer; transition: .3s ease; /* position: relative; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 200px; height: 30px; margin:10px auto; padding: 8px 16px; background:#0c0d62; font-weight: bold; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); border-radius: 3px; */ } #member.mypage .open_btn:hover{ /* background:#000; */ color:#000; transition: .3s ease; } #member.mypage a.btn-flat-logo { position: inherit; display: inline-block; margin-top: 2em; padding: 1em 1em 1em; text-decoration: none; color: #fff; border-radius: 3px; background: #666; transition: .4s; } /*ポップアップココまで*/ /* ================================================================= 20.ログイン関係 使用ファイル：login.xhtml =================================================================*/ #loginNew:after {content: ""; clear: both; display: block;}/* clearfix */ #loginNew table{margin: 0 auto 20px auto; width: 428px;} #loginNew .supplement{font-size: 13px; color: #C00;display: inline-block;} #loginNew h3{margin-bottom: 15px; padding: 1px 20px; border-bottom: 1px solid #CCC; background: url("../images/marker.gif") 7px 7px no-repeat #EEE; font-size: 85%;} #loginNew .box{border: 1px solid #CCC; width: 980px; float: left; margin: 0 0px 30px; position: relative;} #loginNew .box .buttonarea{width: 100%; margin: 20px 0; padding: 0;} #loginNew .box table{margin: 10px; width: 956px !important;} #loginNew .box .link_text{text-align: right; padding: 15px 0 10px;} #loginNew .box .regist_non_area{width: 442px; margin: 0 auto;} #loginNew .box .regist_non_area p{margin: 0 0 10px;} #loginNew .box .amazon_area{width: 442px; margin: 0 auto; border-top: 1px solid #ccc;} #loginNew .box .amazon_area p{margin: 10px 0;} #loginNew .widebox{border: 1px solid #CCC; width: 960px; margin: 0 10px 30px; clear: both;} #loginNew .widebox .link{text-align: right;} #loginNew .widebox table{width: 920px;} #loginNew input[type='text'],#loginNew input[type='password']{width: 200px;} #loginNew .social_provider ul{margin: 0px 20px 0px;} #loginNew .social_provider ul:after {content: ""; clear: both; display: block;}/* clearfix */ #loginNew .social_provider ul li{width: 194px; height: 44px; font-size: 14px; display: block; float: left; margin: 0px 28px 20px 0;} #loginNew .social_provider ul li:nth-child(2n){margin-right: 0px;} #loginNew .social_provider ul li a{display: block; text-decoration: none;} #loginNew .social_provider ul li a span{padding: 14px 0 14px 25px; border: 1px solid #cdcdcd; border-left: 0px; margin: 0 0 0 53px; display: block; background: #FFF; line-height: 1; font-size: 14px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; } #loginNew .social_provider li.yahoo a{background: url("../images/social_yahoo.png") no-repeat; color: #e71017;} #loginNew .social_provider li.facebook a{background: url("../images/social_facebook.png") no-repeat; color: #3b5998;} #loginNew .social_provider li.twitter a{background: url("../images/social_twitter.png") no-repeat; color: #55acee;} #loginNew .social_provider li.google a{background: url("../images/social_google.png") no-repeat; color: #dc4e41;} #loginNew .social_provider li.mixi a{background: url("../images/social_mixi.png") no-repeat; color: #d1ad59;} #loginNew .social_provider li.rakuten a{background: url("../images/social_rakuten.png") no-repeat; color: #bf0000;} #loginNew .social_provider li.line a{background: url("../images/social_line.png") no-repeat; color: #00b300;} #loginNew .social_provider li.paypal a{background: url("../images/social_paypal.png") no-repeat; color: #293e7f;} /* ================================================================= 21.商品比較 使用ファイル：item_compare.xhtml =================================================================*/ #itemCompare .img_box{width: 80px; height: 80px; margin: 0; text-align: center; position: relative;} #itemCompare .img_box img{width: auto; max-width: 80px; max-height: 80px; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} #itemCompare .propertyimg_box{width: 60px; height: 60px; margin: 0; text-align: center; position: relative;} #itemCompare .propertyimg_box img{width: auto; max-width: 60px; max-height: 60px; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;} #itemCompare th{width: 150px;} #itemCompare .button_area .button{width: auto; display: inline-block; width: 130px;} /* validate */ #modal-messages .uk-modal-dialog{ width: 500px; height: 280px; position: relative; } #modal-messages span.valid_error{ display: block; text-align: center; font-size: 120%; } #modal-messages .btn{ position: absolute; margin: auto; left: 0; right: 0; bottom: 40px; } #modal-messages .uk-button{ color: #fff; background-color: #1747a2; } /* 404エラー */ #error404{ margin: auto; text-align: center; } #error404 h2{ margin: auto auto 2em; } #error404 p{ margin: auto auto 1em; } #error404 .btn{ } #error404 .btn a{ margin: 3em auto auto; padding: 0.6em 0; width: 50%; display: block; text-align: center; font-size: 160%; line-height: 1; color: #fff; background: #c1272d; } #error404 .btn a:hover{ text-decoration: none; } /* 会員情報入力フロー */ #member_input_flow{ margin: 100px auto 80px; display: table; width: 100%; overflow: hidden; } #member_input_flow li{ display: table-cell; text-align: center; background: #eff3f9; color: #1747a2; height: 60px; width: 25%; font-size: 14px; text-indent: 1.5em; line-height: 60px; position: relative; } #member_input_flow li.current{ background: #1747a2; color: #fff; } #member_input_flow li:before, #member_input_flow li:after{ content: ""; display: block; width: 0; height: 0; border-style: solid; position: absolute; border-width: 36px 0 36px 25px; top: -6px; z-index: 10; } #member_input_flow li:before{ border-color: transparent transparent transparent #fff; right: -25px; } #member_input_flow li:after{ border-color: transparent transparent transparent #eff3f9; right: -22px; } #member_input_flow li.current:after{ border-color: transparent transparent transparent #1747a2; right: -22px; } #member_input_flow li:last-child:before, #member_input_flow li:last-child:after{ display: none; } /* 利用規約 */ #agreement{ padding: 20px; height: 420px; overflow-y: scroll; border:solid 1px #ccc; } #next_btn{ margin: auto; display: inline-block; padding: 10px; width: 230px; font-size: 16px; line-height: 1; text-align: center; text-decoration: none; border-radius: 3px; background: #ddd; color: #808080; pointer-events: none; } #next_btn.positive{ background: #D21E21; color: #FFFFFF; pointer-events: auto; } #main p.agree_check{ margin: auto auto 50px; font-size: 24px; } #agree{ margin-right: 10px; -webkit-appearance: none; appearance: none; width: 24px; height: 24px; background: #fff; border: solid 1px #000; display: inline-block; vertical-align: -4px; } .agree_check label{ position: relative; } .agree_check label.check:after{ display: block; content: ''; position: absolute; top: 14px; left: 3px; width: 15px; height: 5px; border-left: 4px solid #000; border-bottom: 4px solid #000; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #submit_btn[disabled], #submit_btn[disabled="true"]{ pointer-events: none; background: #ccc; }