/** Shopify CDN: Minification failed Line 1049:10 Expected identifier but found "{" Line 1549:1 "argin" is not a known CSS property Line 2755:2 Expected identifier but found "*" Line 3333:22 "text-decolation" is not a known CSS property Line 3915:15 Expected ":" Line 4389:21 "text-decolation" is not a known CSS property Line 5072:0 "badkground" is not a known CSS property Line 5692:0 Unexpected "{" Line 6083:2 Expected identifier but found "*" Line 6152:1 Expected identifier but found "*" ... and 15 more hidden warnings **/ /* ============================================================ LEGACY DESKTOP TREE (edo1.jp /user_data/packages/edo1smp20211026_replace_test) Verbatim port of the edo1.jp legacy stylesheets (first-party assets mirrored in legacy-migration-workspace/assets). Only two mechanical edits were made: @charset/@import directives were removed (the files are concatenated here in the legacy @import order) and url() image references were rewritten to the flat Shopify asset filenames from docs/legacy-migration/asset-manifest.csv. ============================================================ */ /* ---------- css/block.css ---------- */ /* Start For Block */ /* Block Header ------------------------------- */ div#bloc_head { margin:0 auto; padding:3px 0; border-bottom: 2px solid #444; clear:both; } div#bloc_head .t_in_cart { margin:0; padding: 2% 15%; font-size: 14px; font-weight: bold; color: #333; background: url(legacy-pc-img-icon-icon_cart.png) no-repeat 1% 50%; } .t_login { margin:0; padding: 2% 15%; font-size: 14px; font-weight: bold; color: #333; background: url(legacy-pc-img-icon-icon_login.png) no-repeat 1% 50%; } .t_search { margin:5px 0 15px 0; padding: 3% 15%; font-size: 14px; font-weight: bold; color: #333; border-bottom: 1px dotted #333; background: url(legacy-pc-img-icon-icon_search.png) no-repeat 1% 50%; } .txt10 { font-size: 10px; font-weight: normal; color: #333; } .t_category { margin:0; padding: 5px 7%; font-size: 14px; font-weight: bold; color: #333; background: url(legacy-pc-img-icon-icon_category.png) no-repeat 1% 50%; } #leftcolumn .t_category, #rightcolumn .t_category{ padding: 2% 15%; background: url(legacy-pc-img-icon-icon_category.png) no-repeat 1% 50%; } .t_ranking { margin:0; padding: 0 20%; font-size: 14px; font-weight: bold; color: #333; background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) no-repeat 3% 50%; } /* -------------------------------------------- */ /* In Cart Block ------------------------------ */ div#cartarea { margin: 0 0 7% 0; width: 100%; padding: 2% 0; background-color: #fff; } div#cartarea p { margin:5px auto 10px auto; padding:0; overflow: hidden; } div#cartarea p.item { padding: 0 0 10px 0; border-bottom:1px dotted #999; } /* -------------------------------------------- */ /* Category Block ----------------------------- */ div#categoryarea { margin: 0 0 7% 0; width: 100%; padding:0; background-color: #fff; overflow:hidden; } /* -------------------------------------------- */ /* Guide Link --------------------------------- */ #guidearea { margin:0 auto 10% auto; line-height: 0; } /* -------------------------------------------- */ /* Login Block -------------------------------- */ div#loginarea { margin: 0 0 7% 0; width: 100%; padding: 2% 0; background-color: #fff; } div#loginarea .welcome { padding:5px 10px; margin: 10px auto; font-weight: bold; font-size: 15px; line-height: 1.5rem; } div#loginarea .welcome span { color: #d96040; padding: 0 5px; } div#loginarea .welcome .w_point { background: #d96040; margin: 3px 0; padding: 3px; text-align: center; color: #fff; } div#loginarea p { margin:5px auto 10px auto; padding:0; line-height: 1.2rem; } div#loginarea p span { font-size: 12px; margin-left:5px; padding:0; } div#login img { padding: 0 5px 0 0; vertical-align: bottom; } #loginarea .box96 { width: 82%; border: solid 1px #ccc; padding:2%; font-size:0.8rem; } /* -------------------------------------------- */ /* Search Block ------------------------------- */ div#searcharea { margin: 0 0 7% 0; padding: 2% 5%; background-color: #fff; border: 1px dotted #ccc; } div#searcharea p { overflow: hidden; } #searcharea .box142 { margin:1% 0 10% 0; padding:2%; width: 90%; background: #fff; border: solid 1px #ccc; font-size:14px; } #searcharea .box47 { margin:1% 2% 1% 0; padding:2%; width: 70%; background: #fff; border: solid 1px #ccc; } /* -------------------------------------------- */ /* Calender Block ----------------------------- */ /*真ん中配置*/ #block-calendar { width:100%; margin:0; padding:5% 0; background-color:#fff; overflow: hidden; } #block-calendar table { border-collapse: collapse; margin: 1%; text-align: center; width: 48%; float: left; } #block-calendar th, #block-calendar td { padding: 5px; border-bottom: 1px solid #aaa; text-align:center; } #block-calendar th { background: #fff; color: #555; text-align:center; } #block-calendar .off { background: #fff; color: #ff0000; } #block-calendar caption { color: #555; padding:10px; font-size:15px; background: #ffffff; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2YzZjNmMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */ } /*左右配置*/ #leftcolumn #block-calendar, #rightcolumn #block-calendar { width:100%; margin:0; padding:5% 0; background-color:#fff; overflow: hidden; } #leftcolumn #block-calendar table, #rightcolumn #block-calendar table { border-collapse: collapse; margin: 1% auto; text-align:center; width: 100%; } #leftcolumn #block-calendar th, #block-calendar td, #rightcolumn #block-calendar th, #block-calendar td { padding: 5px; border-bottom: 1px solid #aaa; text-align:center; } #leftcolumn #block-calendar th, #rightcolumn #block-calendar th { background: #fff; color: #555; text-align:center; } #leftcolumn #block-calendar .off, #rightcolumn #block-calendar .off { background: #fff; color: #ff0000; } #leftcolumn #block-calendar caption, #rightcolumn #block-calendar caption { color: #555; padding:10px; font-size:15px; background: #ffffff; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2YzZjNmMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */ } /* -------------------------------------------- */ /* Bannar ------------------------------------- */ ul#banner { padding: 15px 0 0 0; } #banner li { padding: 0 0 10px 0; } /* -------------------------------------------- */ /* Button Type Input --------------------- */ input[type='image'] { border: none; } input[type='image'].box190 { width: 190px; height: 30px; } input[type='image'].box180 { width: 180px; height: 30px; } input[type='image'].box150 { width: 150px; height: 30px; } input[type='image'].box140 { width: 140px; height: 30px; } input[type='image'].box130 { width: 130px; height: 30px; } input[type='image'].box51 { width: 51px; height: 22px; } /* -------------------------------------------- */ /* End For Block */ /* ---------- css/btn.css ---------- */ /* Start For Blutton */ /* ボタンエリア指定 -------------- */ .btn_area_l{ width:50%; margin:0 auto 10px; padding:0; text-align:center; overflow:hidden; } .btn_area_l2{ width: 220px; margin: 1% auto; padding: 0; text-align: center; overflow: hidden; } .btn_area_n{ width:450px; margin:5% auto; padding:0; text-align:center; overflow:hidden; } .btn_area_n2{ width:450px; margin: 2% auto 3% auto; padding: 0; text-align:center; overflow:hidden; } .btn_area_n2 ul{ width:100%; margin:0 auto; padding: 0; text-align:center; } .btn_area_n2 li{ width:45%; margin:1% auto 5% 5px; padding: 0; text-align:center; } /*---------------------------------------*/ /* ボタン共通指定 ----------------------- */ /*next*/ .btn{ width: 90%; margin: 10px; padding: 0; float: left; font-size: 0.85em; background: #333; text-decoration: none;} /*prev*/ .btn2{ width: 90%; margin: 10px; padding: 0; float: left; font-size: 0.85em; background: #fff; text-decoration: none; border:2px solid #333; } .bt_next{ width: 90%; margin: 10px; padding: 0; float: left; font-size: 0.85em; background: #333; clear: both; text-decoration: none; } .btn_mini { margin:5px; padding:0; width:193px; height:30px; float:left; text-align:center; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; box-shadow: 0 1px 6px #ccc inset; -moz-box-shadow: 0 1px 6px #ccc inset; -webkit-box-shadow: 0 1px 6px #ccc inset; background:#fff; } .btn_prev{ margin: 0; padding: 0; } .btn_prev a{ margin: 0; font-size: 15px; color: #333 !important; width: 100%; height: 25px; padding:10px 0 10px 5px; display: block; text-align: center; text-decoration: none; background: url(legacy-pc-img-icon-icon_prev.png) no-repeat 3% 50%; } .btn_prev a:hover{ text-decoration:none; opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1; } .btn_next{ margin: 0; padding: 0; } .btn_next a { font-size: 15px; color: #fff !important; width: 100%; height: 23px; padding: 12px 0 3px 0; display: block; text-align: center; float: right; text-decoration: none; background: url(legacy-pc-img-icon-icon_next.png) no-repeat 96% 50%;} .btn_next a:hover { text-decoration:none; opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1; } .btn_next #n_b_entrycomp { font-size: 15px; color: #fff !important; width: 100%; height: 38px; padding: 9px 0 6px 0; display: block; text-align: center; float: right; text-decoration: none; background: url(legacy-pc-img-icon-icon_next.png) no-repeat 96% 50%; border-style: solid; border-color: #333; cursor: pointer; } .btn_next_mini { margin: 0; padding: 0; } .btn_next_mini a { margin:0; padding: 8px 30px 8px 0; font-size:12px; color:#333 !important; width: 160px; height: 14px; display:block; text-decoration:none; background:url(legacy-pc-img-icon-icon_next.png) no-repeat 98% 50%; } .btn_next_mini a:hover { text-decoration:underline; } /*---------------------------------------*/ /*Block Button*/ /*Block Cart -----------------------*/ .btn_cart { width: 100%; margin: 20px auto 5px auto; padding: 3px; font-size: 1em; font-weight: normal; color: #fff; letter-spacing: 0.2em; /*border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;*/ background: #7d7e7d; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */ background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%); /* W3C */ -ms-filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-8 */ text-align:center; clear: both; } .btn_cart a{ margin: 0 auto; padding: 10px 0; display:block; color:#fff; text-decoration:none; } .btn_cart a:hover{ background: #45484d; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ1NDg0ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #45484d 0%,#000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #45484d 0%,#000000 100%); /* IE10+ */ background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-8 */ color:#aaa; } /*---------------------------------------*/ /*Block Category -----------------------*/ /*中央配置*/ #one_maincolumn #categoryarea #categorytree, #two_maincolumn #categoryarea #categorytree, three_maincolumn #categoryarea #categorytree { padding:0; } #one_maincolumn #categoryarea ul, #two_maincolumn #categoryarea ul, #three_maincolumn #categoryarea ul {width:100%;margin:0;padding:0;} #one_maincolumn #categoryarea ul li, #two_maincolumn #categoryarea ul li, #three_maincolumn #categoryarea ul li {width:20%;float:left;} #one_maincolumn #categoryarea li a img, #two_maincolumn #categoryarea li a img, #three_maincolumn #categoryarea li a img {width:60%;height:auto;padding:10px;} #one_maincolumn #categoryarea li a, #two_maincolumn #categoryarea li a, #three_maincolumn #categoryarea li a { padding: 0; color: #333; display: block; text-align:center; } #one_maincolumn #categoryarea li a span, #two_maincolumn #categoryarea li a span, #three_maincolumn #categoryarea li a span{ display: block; /* position: relative; top: -10px; */ } #one_maincolumn #categoryarea li a:hover, #two_maincolumn #categoryarea li a:hover, #three_maincolumn #categoryarea li a:hover { color: #FFF; text-decoration: none; } #one_maincolumn #categoryarea li.level1, #two_maincolumn #categoryarea li.level1, #three_maincolumn #categoryarea li.level1 { border-bottom: 1px dotted #ccc; margin:0; padding: 0; } #one_maincolumn #categoryarea li.level1 a, #two_maincolumn #categoryarea li.level1 a, #three_maincolumn #categoryarea li.level1 a { margin: 5px 0; padding: 8px 0; text-decoration:none; } #one_maincolumn #categoryarea li.level1 a:hover, #two_maincolumn #categoryarea li.level1 a:hover, #three_maincolumn #categoryarea li.level1 a:hover { background: #aaa url(legacy-pc-img-icon-icon_arrow_c.png) no-repeat 95% center; } #one_maincolumn #categoryarea li.level1 li.level2 a, #two_maincolumn #categoryarea li.level1 li.level2 a, #three_maincolumn #categoryarea li.level1 li.level2 a { margin: 0; padding: 8px 0 8px 20px; font-weight: lighter; border: none; background: url(legacy-pc-img-icon-icon_arrow_a.png) no-repeat 0 center; display:none; } #one_maincolumn #categoryarea li.level1 li.level2 a:hover, #two_maincolumn #categoryarea li.level1 li.level2 a:hover, #three_maincolumn #categoryarea li.level1 li.level2 a:hover { background: #333 url(legacy-pc-img-icon-icon_arrow_c.png) no-repeat 95% center; display:none; } #one_maincolumn #categoryarea li .onlink, #two_maincolumn #categoryarea li .onlink, #three_maincolumn #categoryarea li .onlink { color: #333; /*background: #333 url(legacy-pc-img-icon-icon_arrow_c.png) no-repeat 95% center!important;*/ } #one_maincolumn #categoryarea li.onlink:hover, #two_maincolumn #categoryarea li.onlink:hover, #three_maincolumn #categoryarea li.onlink:hover { color: #FFF; background: #666 url(legacy-pc-img-icon-icon_arrow_c.png) no-repeat 195px center!important; } /*左右配置*/ #leftcolumn #categoryarea #categorytree, #rightcolumn #categoryarea #categorytree { padding:0; } #leftcolumn #categoryarea ul, #rightcolumn #categoryarea ul{width:100%;margin:0;padding:0;} #leftcolumn #categoryarea ul li, #rightcolumn #categoryarea ul li{width:100%;float:none;} #leftcolumn #categoryarea li a img, #rightcolumn #categoryarea li a img{width:40px;height:auto;padding:0;} #leftcolumn #categoryarea li a, #rightcolumn #categoryarea li a{ padding: 0; color: #333; display: block; } #leftcolumn #categoryarea li a span, #rightcolumn #categoryarea li a span{ display: inline; /* position: relative; top: -10px; */ } #leftcolumn #categoryarea li a:hover, #rightcolumn #categoryarea li a:hover { color: #FFF; text-decoration: none; } #leftcolumn #categoryarea li.level1 , #rightcolumn #categoryarea li.level1 { border-bottom: 1px dotted #ccc; margin:0; padding: 0; } #leftcolumn #categoryarea li.level1 a, #rightcolumn #categoryarea li.level1 a { margin: 5px 0; padding: 8px 0 8px 20px; background: url(legacy-pc-img-icon-icon_arrow_b.png) no-repeat 0 center; text-decoration:none; } #leftcolumn #categoryarea li.level1 a:hover, #rightcolumn #categoryarea li.level1 a:hover { background: #aaa url(legacy-pc-img-icon-icon_arrow_c.png) no-repeat 95% center; } #leftcolumn #categoryarea li.level1 li.level2 a, #rightcolumn #categoryarea li.level1 li.level2 a { margin: 0; padding: 8px 0 8px 20px; font-weight: lighter; border: none; background: url(legacy-pc-img-icon-icon_arrow_a.png) no-repeat 0 center; } #leftcolumn #categoryarea li.level1 li.level2 a:hover, #rightcolumn #categoryarea li.level1 li.level2 a:hover { background: #333 url(legacy-pc-img-icon-icon_arrow_c.png) no-repeat 95% center; } #leftcolumn #categoryarea li .onlink, #rightcolumn #categoryarea li .onlink { color: #FFF; background: #333 url(legacy-pc-img-icon-icon_arrow_c.png) no-repeat 95% center!important; } #leftcolumn #categoryarea li.onlink:hover, #rightcolumn #categoryarea li.onlink:hover{ color: #FFF; background: #666 url(legacy-pc-img-icon-icon_arrow_c.png) no-repeat 195px center!important; } /*---------------------------------------*/ /*Block Guide -----------------------*/ #guidearea li { margin:1px auto; width:100%; text-align:left; font-size: 12px; font-weight: normal; border-bottom: 1px solid #555; background: #fff; } #guidearea li a { position:relative; padding: 20px 0 16px 5px; display:block; color: #333; text-decoration: none; background: url(legacy-pc-img-icon-icon_guide.png) no-repeat 97% 55%; } #guidearea li a:hover { display:block; padding: 20px 0 16px 5px; color:#666; background:#f9f9f9 url(legacy-pc-img-icon-icon_guide.png) no-repeat 97% 55%; text-decoration:none; } /*---------------------------------------*/ /*Block Login and logout -----------------------*/ .btn_login { width: 100%; margin: 20px auto 5px auto; padding: 3px; font-size: 1em; font-weight: normal; color: #fff; letter-spacing: 0.2em; /*border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;*/ background: #7d7e7d; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */ background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%); /* W3C */ -ms-filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-8 */ text-align:center; clear: both; } .btn_login a { margin: 0 auto; padding: 10px 0; display:block; color:#fff; text-decoration:none; } .btn_login a:hover{ background: #45484d; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ1NDg0ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #45484d 0%,#000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #45484d 0%,#000000 100%); /* IE10+ */ background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-8 */ color:#aaa; } .btn_logout { width: 100%; margin: 20px auto 5px auto; padding: 3px; font-size: 1em; font-weight: normal; color: #fff; letter-spacing: 0.2em; /*border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;*/ background: #ffffff; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iI2Y2ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGVkZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-8 */ border:1px solid #ccc; text-align:center; clear: both; text-decoration:none; } .btn_logout a { margin: 0 auto; padding: 10px 0; display:block; color:#666; text-decoration:none; /*background: url(legacy-pc-img-icon-icon_mini_kotira.png) no-repeat 95% center;*/ } .btn_logout a:hover{ background: #f4f4f4; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y0ZjRmNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #f4f4f4 0%, #e5e5e5 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f4f4f4 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f4f4f4 0%,#e5e5e5 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f4f4f4 0%,#e5e5e5 100%); /* IE10+ */ background: linear-gradient(to bottom, #f4f4f4 0%,#e5e5e5 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-8 */ text-decoration:none; color:#aaa; } /*---------------------------------------*/ /*Block Search -----------------------*/ .btn_search{ margin: 10px auto; padding: 0; text-align: center; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background: #7d7e7d; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZTBlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */ background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-8 */ overflow: hidden; } .btn_search a { display:block; margin: 0; padding: 10px 20px ; color:#fff; text-decoration:none; } .btn_search a:hover{ /*text-decoration:underline;*/ padding: 10px; background: #45484d; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ1NDg0ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #45484d 0%,#000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #45484d 0%,#000000 100%); /* IE10+ */ background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-8 */ color:#aaa } /*---------------------------------------*/ /* End For Block Button*/ /*Button Shopping Contents ---------------------*/ div#incart_btn{ width:950px; margin:0; padding:0; } div#incart_btn ul{ margin:10px auto; padding:0; width:360px; } div#incart_btn ul li{ margin:0 5px 0 0; padding:0; width:150px; height:30px; float:left; text-align:center; border-radius:4px; background:#444; } /* Button Guide Contents ------------------------------ */ .btn_ad{ margin:10px 0; padding:5px; width:30%; height:20px; color: #fff !important; text-decoration: none; text-align:center; border-radius:4px; background:#aaa; overflow: hidden; } .btn_ad a:{ text-decoration: none; } .btn_ad a:link { color:#fff; text-decoration: none !important; } .btn_ad a:hover { text-decoration:none !important; } /* Page Detail ----------------------- */ .newbtn { margin: 5px 10px 5px 0; padding: 0; float: left; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; border:2px solid #409efd; color:#409efd; } .newbtn a { margin: 0; padding: 5px 10px 5px 30px; display:block; color:#409efd; text-decoration:none; background: url(legacy-pc-img-icon-icon_contact.png) no-repeat 5% center; background-size: 20px 20px; } .newbtn a:hover{ border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; background:#eee url(legacy-pc-img-icon-icon_contact.png) no-repeat 5% center; } /*入荷お知らせメールリスト ---------------------*/ .newbtn2 { margin: 2%; padding:0; /* clear: both; */ text-align: center; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background: #febf01; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlYmYwMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWJmMDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #febf01 0%, #febf01 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#febf01), color-stop(100%,#febf01)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #febf01 0%,#febf01 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #febf01 0%,#febf01 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #febf01 0%,#febf01 100%); /* IE10+ */ background: linear-gradient(to bottom, #febf01 0%,#febf01 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febf01', endColorstr='#febf01',GradientType=0 ); /* IE6-8 */ } .newbtn2 a { display:block; margin: 0; padding:3px 0 ; color:#fff; text-decoration:none; /*background: url(legacy-pc-img-icon-icon_contact.png) no-repeat 15% center;*/ } .newbtn2 a:hover{ /*text-decoration:underline;*/ padding:3px 0; background: #fcd45a; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZDQ1YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmY2MzMTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #fcd45a 0%, #fcc319 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcd45a), color-stop(100%,#fcc319)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fcd45a 0%,#fcc319 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fcd45a 0%,#fcc319 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #fcd45a 0%,#fcc319 100%); /* IE10+ */ background: linear-gradient(to bottom, #fcd45a 0%,#fcc319 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd45a', endColorstr='#fcc319',GradientType=0 ); /* IE6-8 */ color:#fff; } /*お気に入り ---------------------*/ .favoritebtn { margin: 5px 0 20px 0; padding: 0; float: left; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; border:2px solid #409efd; color:#409efd; } .favoritebtn a { margin: 0; padding: 5px 10px 5px 30px; display:block; color:#409efd; text-decoration:none; background: url(legacy-pc-img-icon-icon_recomend.png) no-repeat 3% 40%; background-size: 20px 20px; } .favoritebtn a:hover{ border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; background:#eee url(legacy-pc-img-icon-icon_recomend.png) no-repeat 3% 40%; } /*購入ボタン ---------------------*/ .cartbtn { width: 200px; display: block; float: right; margin: 0; padding: 0; text-align: center; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background: #7d7e7d; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); overflow: hidden; } .cartbtn a{ display: block; margin: 0; padding:10px 0px 10px 25px; color: #fff; font-size:14px; text-decoration: none; background: url(legacy-pc-img-icon-icon_cart_in.png) no-repeat 23% 40% ; } .cartbtn:hover{ text-decoration:none; opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1; } /*定期購入ボタン ---------------------*/ .t_cartbtn { width: 200px; margin: 0 auto; padding: 0; float: right; text-align: center; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background: #91db3d; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #91db3d 0%, #6cbc16 50%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#91db3d), color-stop(50%,#6cbc16), color-stop(100%,#7cbc0a)); background: -webkit-linear-gradient(top, #91db3d 0%,#6cbc16 50%,#7cbc0a 100%); background: -o-linear-gradient(top, #91db3d 0%,#6cbc16 50%,#7cbc0a 100%); background: -ms-linear-gradient(top, #91db3d 0%,#6cbc16 50%,#7cbc0a 100%); background: linear-gradient(to bottom, #91db3d 0%,#6cbc16 50%,#7cbc0a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91db3d', endColorstr='#7cbc0a',GradientType=0 ); } .t_cartbtn a{ display: block; margin: 0; padding: 10px 0px 10px 25px; font-size: 14px; color: #fff; text-decoration: none; background: url(legacy-pc-img-icon-icon_cart_in.png) no-repeat 22% 40% ; } .t_cartbtn:hover{ text-decoration:none; opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1; } /*List Page*/ /*商品一覧（詳しくはこちらボタン） -------------------------------*/ .rpst_btnbox{ max-width: 260px; margin: 10px auto; background: #fff; font-weight:bold; border: 2px solid #ccc; overflow: hidden; } .rpst_btnbox a{ margin: 0; padding: 7px 0 5px 0; display: block; color: #333; text-align:center; text-decoration: none; } .rpst_btnbox a:hover{ background: #eee; } /*お気に入り ---------------------*/ .cartbtn2 { margin: 10px auto; padding: 5px 3px 3px 3px; max-width: 255px; text-align: center; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border:2px solid #60abf8; overflow: hidden; color:#499bea; } .cartbtn2:hover{ padding: 5px 3px 3px 3px; background: #7abcff; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhYmNmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzYwYWJmOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MDk2ZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */ background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-8 */ color:#fff; } /*一覧購入ボタン -------------------*/ .lst_cartbtn { margin: 10px auto; padding: 0; max-width: 260px; text-align: center; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background: #7d7e7d; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); overflow: hidden; } .lst_cartbtn a{ display: block; margin: 0; padding:10px 0 10px 25px; color: #fff; font-size:14px; text-decoration: none; background: url(legacy-pc-img-icon-icon_cart_in.png) no-repeat 25% 40%; } .lst_cartbtn:hover{ text-decoration:none; opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1; } /*一覧購入ボタン中央配置の時*/ #three_maincolumn #productscolumn .lst_cartbtn{ margin: 10px auto; padding: 0; max-width: 210px; text-align: center; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background: #7d7e7d; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); overflow: hidden; } #three_maincolumn #productscolumn .lst_cartbtn a{ display: block; margin: 0; padding:10px 0 10px 15px; color: #fff; font-size:14px; text-decoration: none; background: url(legacy-pc-img-icon-icon_cart_in.png) no-repeat 10% 40%; } #three_maincolumn #productscolumn .lst_cartbtn:hover{ text-decoration:none; opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1; } /*一覧定期購入ボタン -------------------*/ .t_cartbtn2 { margin: 10px auto; padding: 0; max-width: 260px; text-align: center; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background: #91db3d; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #91db3d 0%, #6cbc16 50%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#91db3d), color-stop(50%,#6cbc16), color-stop(100%,#7cbc0a)); background: -webkit-linear-gradient(top, #91db3d 0%,#6cbc16 50%,#7cbc0a 100%); background: -o-linear-gradient(top, #91db3d 0%,#6cbc16 50%,#7cbc0a 100%); background: -ms-linear-gradient(top, #91db3d 0%,#6cbc16 50%,#7cbc0a 100%); background: linear-gradient(to bottom, #91db3d 0%,#6cbc16 50%,#7cbc0a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91db3d', endColorstr='#7cbc0a',GradientType=0 ); overflow: hidden; } .t_cartbtn2 a{ display: block; margin: 0; padding:10px 0 10px 25px; font-size: 14px; color: #fff; text-decoration: none; background: url(legacy-pc-img-icon-icon_cart_in.png) no-repeat 26% 40%; } .t_cartbtn2:hover{ text-decoration:none; opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1; } /*一覧定期購入ボタン中央配置の時*/ #three_maincolumn #productscolumn .t_cartbtn2 { margin: 10px auto; padding: 0; text-align: center; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background: #91db3d; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #91db3d 0%, #6cbc16 50%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#91db3d), color-stop(50%,#6cbc16), color-stop(100%,#7cbc0a)); background: -webkit-linear-gradient(top, #91db3d 0%,#6cbc16 50%,#7cbc0a 100%); background: -o-linear-gradient(top, #91db3d 0%,#6cbc16 50%,#7cbc0a 100%); background: -ms-linear-gradient(top, #91db3d 0%,#6cbc16 50%,#7cbc0a 100%); background: linear-gradient(to bottom, #91db3d 0%,#6cbc16 50%,#7cbc0a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91db3d', endColorstr='#7cbc0a',GradientType=0 ); overflow: hidden; } #three_maincolumn #productscolumn .t_cartbtn2 a{ display: block; margin: 0; padding:10px 0 10px 15px; font-size: 14px; color: #fff; text-decoration: none; background: url(legacy-pc-img-icon-icon_cart_in.png) no-repeat 10% 40%; } #three_maincolumn #productscolumn .t_cartbtn2:hover{ text-decoration:none; opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1; } /*その他ボタン -------------------------------------*/ .btn_down { color:#999999; padding:0 20px 0 0; background: url(legacy-pc-img-icon-icon_down.png) no-repeat 98% center; text-decoration:none; } .btn_down a { color:#333333; text-decoration:none; } .btn_down a:hover{ text-decoration:underline; } /*ランキング、オススメ*/ .btnbox { margin: 10px auto 0 auto; padding: 0; text-align: center; font-size: 1em; width: 150px; float: right; clear: both; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; background: #f6f6f6; border: 1px solid #ccc; font-size: 14px; } .btnbox a { margin: 0; padding:5px 10px 5px 10px; display: block; color: #555; text-decoration: none; /*background: url(legacy-pc-img-icon-icon_mini_kotira.png) no-repeat 90% center;*/ } .btnbox :hover{ background:#eee url(legacy-pc-img-icon-icon_mini_kotira.png) no-repeat 99% center; text-decoration:none; } #leftcolumn .btnbox, #rightcolumn .btnbox { argin: 0 auto; padding: 0; text-align: center; font-size: 1em; width: 98%; float: none; clear: both; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; background: #f6f6f6; border: 1px solid #ccc; font-size: 14px; display: block; } /*おすすめ詳細ボタン*/ .btnbox166 { width: 100%; margin: 0 auto; border: 1px solid #ddd; background: #ffffff; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-8 */ padding: 0; text-align: center; float: left; border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; display:none; } .btnbox166 a { margin: 0; padding: 5px 0; display:block; color:#444; font-size:12px; letter-spacing:0.01em; text-decoration:none; } .btnbox166 a:hover{ background: #eeeeee; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjY2NjY2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */ background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-8 */ } /*新しいお届け先を追加する(左配置)*/ .btnbox_l { margin: 10px 0 20px 0; float: left; background: rgb(100,167,229); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(100,167,229,1) 0%, rgba(74,146,224,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(100,167,229,1)), color-stop(100%,rgba(74,146,224,1))); background: -webkit-linear-gradient(top, rgba(100,167,229,1) 0%,rgba(74,146,224,1) 100%); background: -o-linear-gradient(top, rgba(100,167,229,1) 0%,rgba(74,146,224,1) 100%); background: -ms-linear-gradient(top, rgba(100,167,229,1) 0%,rgba(74,146,224,1) 100%); background: linear-gradient(to bottom, rgba(100,167,229,1) 0%,rgba(74,146,224,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64a7e5', endColorstr='#4a92e0',GradientType=0 ); } .btnbox_l a { margin: 0; padding: 10px 20px; min-width: 100px; display: block; color: #fff; text-decoration: none; } .btnbox_l a:hover{ background: #888; } /*新しいお届け先を追加する(右配置)*/ .btnbox_r { margin: 10px 0 20px 0; float: right; background: rgb(100,167,229); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(100,167,229,1) 0%, rgba(74,146,224,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(100,167,229,1)), color-stop(100%,rgba(74,146,224,1))); background: -webkit-linear-gradient(top, rgba(100,167,229,1) 0%,rgba(74,146,224,1) 100%); background: -o-linear-gradient(top, rgba(100,167,229,1) 0%,rgba(74,146,224,1) 100%); background: -ms-linear-gradient(top, rgba(100,167,229,1) 0%,rgba(74,146,224,1) 100%); background: linear-gradient(to bottom, rgba(100,167,229,1) 0%,rgba(74,146,224,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64a7e5', endColorstr='#4a92e0',GradientType=0 ); } .btnbox_r a { margin: 0; padding: 10px 20px; min-width: 100px; display: block; color: #fff; text-decoration: none; } .btnbox_r a:hover{ background: #888; } /*非会員住所変更ボタン*/ .btn_nomenber { width: 50%; margin: 0 auto; padding: 0; font-size:15px; font-weight:bold; text-align: center; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background: #ffffff; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); border: 1px solid #ccc; } .btn_nomenber a { margin: 0; padding: 10px 0; display: block; font-size:120%; font-weight:600; color: #333; text-decoration: none; } .btn_nomenber a:hover{ text-decoration:none; opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1; } /*みんなのレビュー*/ .btn_review { width: 35%; margin: 0 auto; padding: 0; text-align: center; float: left; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background: #ffffff; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); border: 1px solid #ccc; } .btn_review a { margin: 0; padding: 10px 0; display: block; font-weight:600; color: #333; text-decoration: none; } .btn_review a:hover{ text-decoration:none; opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1; } /*---------------------------------------*/ /*マイページナビボタン*/ #mynavarea ul { margin:0 auto; padding:0; } #mynavarea li { margin:5px auto; padding:5px 0; display:block; text-align:left; font-size: 14px; font-weight: normal; border-bottom:1px dotted #ccc; /*box-shadow: 0 1px 6px #ccc inset; -moz-box-shadow: 0 1px 6px #ccc inset; -webkit-box-shadow: 0 1px 6px #ccc inset; background:#fff;*/ background: url(legacy-pc-img-icon-icon_guide.png) no-repeat 98% 50%; } #mynavarea li a { position:relative; margin: 0 auto; padding: 8px 0 10px 10px; display:block; width: 95%; height:auto; color: #444; text-decoration: none; background: url(legacy-pc-img-icon-icon_guide2.png) no-repeat 97% 50%; } #mynavarea li a:hover { text-decoration:none; background-color:#555; color:#fff; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } /*取り消しボタン*/ .btn_fv { width: 100px; height: 0; margin: 0 auto 25px auto; padding: 0; font-size: 0.85em; text-align: center; line-height: 0; clear: both; } .btn_fv a { color:#555; margin: 0; padding:10px 0; display: block; text-decoration:none; background: #C9C9C9; border: double 3px #f7f7f7; } .btn_fv a:hover{ color:#fff; text-decoration:none; background:#d96040; border: double 3px #f7f7f7; } /*マガジンメール登録*/ .mgz_btn{ width: 15%; margin: 0 0 0 10px; padding: 6px 0; display: block; float: left; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; background:#f6f6f6; border:1px solid #ccc; font-size:14px; } .maga_input{width:80%;padding:5px;float:left;} .btn_teach_mail{ width: 25%; margin: 1%; padding: 5px 0 5px 40px; display: block; float: left; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; box-shadow: 0 0 5px #ccc inset; -moz-box-shadow: 0 0 5px #ccc inset; -webkit-box-shadow: 0 0 5px #ccc inset; background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) no-repeat 98% 50%; } .btn_teach_mail a { color: #333; text-decoration: none; display: block; } .btn_teach_mail a:hover { text-decoration: underline; } .btn_teach_fb{ width: 25%; margin: 1%; padding: 5px 0 5px 40px; display: block; float: left; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; box-shadow: 0 0 5px #ccc inset; -moz-box-shadow: 0 0 5px #ccc inset; -webkit-box-shadow: 0 0 5px #ccc inset; background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) no-repeat 5% 50%; } .btn_teach_fb a { color: #333; text-decoration: none; display: block; } .btn_teach_fb a:hover { text-decoration: underline; } .btn_teach_tw{ width: 25%; margin: 1%; padding: 5px 0 5px 40px; display: block; float: left; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; box-shadow: 0 0 5px #ccc inset; -moz-box-shadow: 0 0 5px #ccc inset; -webkit-box-shadow: 0 0 5px #ccc inset; background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) no-repeat 5% 50%; } .btn_teach_tw a { color: #333; text-decoration: none; display: block; } .btn_teach_tw a:hover { text-decoration: underline; } /*リピスト用*/ .btn_rpst1{ width: 25%; margin: 10px 0 0 220px; padding: 0px 3px; float: left; font-size: 0.85em; background: #ffffff; border: 2px solid #555; } .btn_rpst2{ width: 25%; margin: 10px 0 0 10px; padding: 0px 3px; float: left; font-size: 0.85em; background: #ff6945; } .btn_rpst1e{ width: 25%; margin: 10px 0 0 180px; padding: 0 3px; float: left; font-size: 0.85em; background: #ffffff; border: 2px solid #555; text-align: center; } .btn_rpst2e{ width: 25%; margin: 10px 0 0 10px; padding: 0 3px; float: left; font-size: 0.85em; background: #333; text-align: center; } /*お届け日の確認ボタン*/ .t_daybox a{ color:#fff; text-decoration: none; font-size:15px } .btn_day{ width:200px; margin: 5px 10px 5px 15px; padding: 10px; float: left; font-size: 0.85em; border-radius: 2px; -webkit-border-radius: 2px; moz-border-radius: 2px; background: #7d7e7d; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); text-align: center; } .btn_day a{ color:#fff; text-decoration: none; font-size:15px } .t_daybox a:hover{ text-decoration:none; opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1; } /*LPアップセル用*/ .upsell{ width: 200px; margin: 20px auto; padding: 14px; text-align: center; background: #C8FFD1; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; box-shadow: 0 0 6px #85DB8C inset; -moz-box-shadow: 0 0 6px #85DB8C inset; -webkit-box-shadow: 0 0 6px #85DB8C inset; } .upsell a{ color: #39943D; text-decoration: none; font-size: 15px; } .upsell a:hover{text-decoration: underline;} .btn_area_shopping{ width:100%; margin:5% auto; padding:0; text-align:center; overflow: hidden; } .btn_area_shopping ul{ list-style: none; margin : 0 auto; } .btn_area_shopping li{ float: left; width: 33%; } .lp_combtn { width: 30%; list-style: none; margin: 2px; padding: 9px 0; font-size: 14px; text-align: center; float: left; color: #fff; border: 1px dotted #666; background: #ccc; } .lp_combtn a { color: #666; } /* lp_complete.png に対応するボタン */ .confirm_button { background: linear-gradient(#888888 0%, #000000 100%); border-width: 0px; border-radius: 8px; box-shadow: 0 0 0px rgba(0, 0, 0, 0.28); color: #ffffff; cursor: pointer; display: inline-block; overflow: hidden; text-decoration: none; text-align: center; vertical-align: top; } .pc_confirm_button { font-size: 22px; font-weight: bold; height: 65px; letter-spacing: 0.1em; margin-top: 4px; line-height: 38px; width: 275px; } /* ---------- css/footer.css ---------- */ /* Page Top -------------------------- */ #pagetop { width: 970px; margin: 0 auto; padding: 20px 40px 0 10px; text-align: right; overflow:hidden; } #pagetop .button { margin:0 0 20px 0; padding:5px; width:100px; font-size:10px; text-align:center; float:right; border-radius: 4px; border-radius: 4px; -webkit-border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -moz-border-radius: 4px; border:2px solid #666; } #pagetop .button a { color:#555; text-decoration:none; } #pagetop .button a:hover { color:#aaa; text-decoration:underline; } /* ----------------------------------- */ /* Footer Navi ----------------------- */ #foot_navi { margin:0 auto; padding:0; width:1000px; height:40px; } #foot_navi ul { margin:0; padding:0; } #foot_navi ul li{ margin:0; padding:5px; width:240px; height:30px; float:left; } /*-------------------------------------*/ /* Footer------------------------------*/ #footer { color:#333; width: 100%; margin: 0 auto; padding: 10px 0; background-color: #ffffff; border-top:1px solid #555; font-size: 10px; color: #666; text-align: center; clear:both; } #footer_inner{ width:1000px; margin:0 auto; } #footer a { color:#666; font-size: 12px; text-decoration:none; } #footer a:hover { color:#999; font-size: 12px; text-decoration:underline; } #footer ul { margin:0; padding:0; } #footer ul li { margin:0 10px 0 0; padding:0; float:left; } /* copyright------------------------------*/ #footer .copyright{text-align:left;margin:10px 0;} /*-------------------------------------*/ /* ---------- css/frame.css ---------- */ /* フレーム ----------------------------------------------- */ div#container { width: 1000px; margin: 0 auto; padding: 10px; background-color: #fff; text-align: left; overflow:hidden; } #container:after {/* firefox背景色表示用 */ content: ""; display: block; clear: both; height: 1px; overflow: hidden; } div#leftcolumn { float: left; width: 20%; margin-right: 30px; } div#rightcolumn { float: right; width: 20%; margin-left: 30px; } /* メインコンテンツ ----------------------------------------------- */ /* 3カラム設定 */ div#three_maincolumn { float: left; width: 54%; margin:0 auto; } /* 2カラム設定 */ div#two_maincolumn { margin: 0; padding: 0; float: left; width: 77%; } /* 1カラム設定 */ div#one_maincolumn { margin: 0; padding: 0; } /* ---------- css/guide.css ---------- */ /* 下層共通指定 -------------------------- */ div#guidecolumn { width: 100%; margin: 0 auto; clear: both; font-size:14px; overflow:hidden; padding: 5rem 0; } div#guidecolumn p { margin:0 auto; padding:10px; line-height:1.3rem; /*width: 90%;*/ overflow: hidden; } div#guidecolumn a { text-decoration: none; } div#guidecolumn a:hover { text-decoration: underline; } div#guidecolumn .mini{ font-size: 12px; padding:5px 0; /*float:left;*/ } .mini_add{ clear: both; padding:1em 0 0; } .g_table { width: 90%; table-layout: fixed; } .g_tr{ margin: 0; padding: 0; } .g_th { margin: 0; padding: 10px; width: 160px; } .g_td { margin: 0; padding: 10px; } div#guidecolumn .ad{ float:left; } div#guidecolumn .yuubin{ float:left; } .fs10{ font-size: 12px; line-height: 14px; text-decoration: underline; } #bloc_head{ display: none; } #bloc_head .t_category{ display: none; } /* ------------------------------------------- */ /* Cart Table ----------------------------------------------- */ div#guidecolumn table{ width: 100%; margin: 20px auto 0 auto; border-collapse: collapse; text-align: left; } div#guidecolumn table th{ padding:15px 8px; border-bottom: 1px solid #ccc; background: #fff; font-weight: normal; width: 20%; font-weight: bold; } div#guidecolumn table td { padding:15px 8px; border-bottom: 1px solid #ccc; width: 80%; } #guide div#guidecolumn table th{ padding: 0; width: auto; border: none; } #guide div#guidecolumn table td{ padding: 0; width: auto; border: none; } #guide div#guidecolumn .t_return { background: url(legacy-pc-img-icon-icon_return.png) no-repeat 0 48%; font-size: 25px; border: none; margin: 0; } #guide div#guidecolumn h2{ font-size: 30px; border-bottom: 1px solid #ccc; letter-spacing: .2em; margin: 30px 0; padding-bottom: 10px; } /* ヘッダー ------------------------------- */ div#guidecolumn .head { margin:0 auto; font-size: 120%; font-weight: bold; background:#fff; /*border-bottom: 2px solid #333;*/ font-family: Helvetica, san-serif; } div#guidecolumn .head2 { margin: 20px auto 0 auto; padding: 10px 0 0 0; font-size: 100%; font-weight: bold; background: #fff; border-top: 1px dashed #ddd; font-family: Helvetica, san-serif; } div#guidecolumn .t_about { padding: 8px 40px; color: #333; background: url(legacy-pc-img-icon-icon_about.png) no-repeat 1% 48%; } div#guidecolumn .t_contact { padding: 8px 40px; color: #333; background: url(legacy-pc-img-icon-icon_contact.png) no-repeat 1% 48%; } div#guidecolumn .t_order { padding: 8px 40px; color: #333; background: url(legacy-pc-img-icon-icon_tokutei.png) no-repeat 1% 48%; } div#guidecolumn .t_return { padding: 8px 40px; color: #333; background: url(legacy-pc-img-icon-icon_return.png) no-repeat 1% 48%; } div#guidecolumn .t_privacy { padding: 8px 40px; color: #333; background: url(legacy-pc-img-icon-icon_privacy.png) no-repeat 1% 48%; } div#guidecolumn .t_content { padding: 8px 10px; color: #333; /*background: url(legacy-pc-img-icon-icon_content.png) no-repeat 1% 48%;*/ } div#guidecolumn .t_entry { padding: 8px 40px; color: #333; background: url(legacy-pc-img-icon-icon_entry.png) no-repeat 1% 48%; } /* -------------------------------------------- */ /* お問い合わせ --------------------------- */ .box120 { width: 120px; padding: 5px; border: 1px solid #ccc; } .box60 { width: 60px; padding: 5px; border: 1px solid #ccc; } .box380 { width: 380px; margin: 5px 0; padding: 5px; border: 1px solid #ccc; } .area380 { width: 380px; height: 250px; margin: 5px 0 0 0; padding: 5px; border: 1px solid #ccc; font-size:1.6rem; } .zipimg img { margin: 5px 0 0 0; } /* -------------------------------------------- */ /* 会員登録 --------------------------------- */ .area470 { width: 660px; height: 520px; margin: 0 auto; padding: 38px; border: 1px solid #ccc; font-size:12px; } .area500 { width: 500px; height: 520px; margin: 0 auto; padding: 19px; border: 1px solid #ccc; font-size:12px; } .box320 { width: 320px; margin: 5px 0 0 0; padding: 2px; border: 1px solid #ccc; } div#completetext { width: 600px; margin: 15px auto 0 auto; padding: 15px; border: 5px solid #ccc; } div#completetext em { font-weight: normal; } div#completetext p{ padding: 20px 0 0 0; text-align: left; } /* -------------------------------------------- *//*インプットタイプ ----------------------------------------------- */ div#guidecolumn input[type="radio"], input[type="checkbox"] { display: inline-block; margin-right: 6px; } div#guidecolumn input[type=radio] + label, div#guidecolumn input[type=checkbox] + label { position: relative; display: inline-block; margin-right: 12px; font-size: 14px; line-height: 30px; cursor: pointer; } @media (min-width: 1px) { div#guidecolumn input[type=radio], div#guidecolumn input[type=checkbox] { display: none; margin: 0; } div#guidecolumn input[type=radio] + label, div#guidecolumn input[type=checkbox] + label { padding: 0 0 0 24px; } div#guidecolumn input[type=radio] + label::before, div#guidecolumn input[type=checkbox] + label::before { content: ""; position: absolute; top: 50%; left: 0; -moz-box-sizing: border-box; box-sizing: border-box; display: block; width: 18px; height: 18px; margin-top: -9px; background: #FFF; } div#guidecolumn input[type=radio] + label::before { border: 2px solid #ccc; border-radius: 30px; } div#guidecolumn input[type=checkbox] + label::before { border: 2px solid #ccc; } div#guidecolumn input[type=radio]:checked + label::after, div#guidecolumn input[type=checkbox]:checked + label::after { content: ""; position: absolute; top: 50%; -moz-box-sizing: border-box; box-sizing: border-box; display: block; } div#guidecolumn input[type=radio]:checked + label::after { left: 5px; width: 8px; height: 8px; margin-top: -4px; background: #3e86fc; border-radius: 8px; } div#guidecolumn input[type=checkbox]:checked + label::after { left: 3px; width: 16px; height: 8px; margin-top: -8px; border-left: 3px solid #E71063; border-bottom: 3px solid #E71063; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } } /* ---------- css/header.css ---------- */ /* Header Logo new---------------------- */ div#header { width: 100%; margin: 0 auto; padding:0; background: #fff; } div#head_inner{ width: 1000px; margin: 0 auto; padding: 0; background-color: #fff; overflow: hidden; } div#logo_space a { float: left; display: block; margin: 10px 0 10px 10px; width: 200px; height: 70px; background: url(legacy-pc-img-header-logo.png); } div#head_inner em { display: none; } /* ---------------------------------- */ /* Header Right --------------------- */ div#information { float: right; margin-top:15px; } div#information ul{margin:10px 0 0 0;} div#information ul li { position:relative; margin:30px 0 0 2px; height:20px; font-size:14px; float:left; /*border-right:1px dotted #ccc;*/ } /*会員登録 MYページ*/ div#information .info_mb{margin: 5px 0 ;color: #666;padding:0px;} div#information .info_mb a {} div#information .info_mb a:hover{ opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1;} /*ログイン ログアウト*/ div#information .info_mp{background: #fff;margin: 5px 0 ;color: #666;padding:5px;} div#information .info_mp a {background:url(legacy-pc-img-header-head_mg.png)1% 50% no-repeat;text-decoration:none;color:#555;padding:5px 5px 5px 30px;} div#information .info_mp a:hover{ opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1;} /*カートを見る*/ div#information .info_sc{ background: #fff; margin: 0; border:2px solid #288ae4; padding:8px 10px 5px 10px; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; overflow: hidden; } div#information .info_sc a {background: url(legacy-pc-img-header-head_ct.png) 2% 50% no-repeat;text-decoration: none;color: #288ae4;padding: 10px 0px 5px 30px;} div#information .info_sc a:hover{ text-decoration:none; opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1;} /* ---------------------------------- */ /* Global Navi ---------------------- */ div#g_navi { margin: 0 auto; padding: 0; width: 100%; height: 50px; clear: both; } .dropmenu{ *zoom: 1; list-style-type: none; width: 1000px; margin: 5px auto 30px auto; padding: 0; } .dropmenu:before, .dropmenu:after{ content: ""; display: table; } .dropmenu:after{ clear: both; } .dropmenu li{ position: relative; width: 19.8%; float: left; margin: 0; padding: 0; text-align: center; } .dropmenu li a{ display: block; margin: 0 10px; padding: 15px 0 11px; background: #fff; color: #333; font-size: 14px; line-height: 1; text-decoration: none; } .dropmenu li ul{ list-style: none; position: absolute; z-index: 9999; top: 100%; left: 0; margin: 0; padding: 0; -webkit-box-shadow: 0 10px 6px -6px #ddd: -moz-box-shadow: 0 10px 6px -6px #ddd; box-shadow: 0 10px 6px -6px #ddd; } .dropmenu li ul li{ width: 100%; } .dropmenu li ul li a{ padding: 13px 15px; border-top: 1px solid #fff; background:#eee; /*background-color: rgba(238,238,238,0.6);*/ text-align: left; } .dropmenu li:hover > a{ background:#eee; /*background-color: rgba(202,202,202,0.6);*/ } .dropmenu li a:hover{ background:#cacaca; background-color: rgba(202,202,202,0.6); } #normal li ul{ display: none; } #normal li:hover ul{ display: block; } .g_li_01{ margin:0; padding:0; border-left:dotted 1px #ccc; border-right:dotted 1px #ccc; } .g_li_02{ margin:0 auto; padding:0; border-right:dotted 1px #ccc; } /* ---------- css/index.css ---------- */ /* FLASH ----------------------------------------------- */ div#flasharea { width: 100%; margin: 0 auto 2% auto; clear: both; background: url(legacy-pc-img-main-main_pic_bg.png); background-repeat: repeat-x; } div#magazine_window{margin:0 auto 7% auto;overflow:hidden;} /*----------------------------------------------- */ /* カテゴリーサムネイル表示用 ----------------------------------------------- */ #categoryarea {margin: 5px 6px 0 6px;} #categoryarea ul.list{} #categoryarea ul.list li {display: block;margin-top:1px;padding:10px 0;background: #d6d6d6 url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) no-repeat 95% 50%;} #categoryarea ul.list li a{height:75px;padding: 0 8px;display: block;} #categoryarea ul.list li a:link {color: #565656; text-decoration: none;} #categoryarea ul.list li a:visited{color: #565656; text-decoration: none;} #categoryarea ul.list li a:hover {color: #565656; text-decoration: none;} #categoryarea ul.list .img {float:left;width:85px;height:100%;} #categoryarea ul.list .img span{ width:75px;height:75px; display: inline-block;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6); -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6); box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6); overflow:hidden; } #categoryarea ul.list .img span{background-size:cover;} #categoryarea ul.list .txt {/*background-color:#fff;*/height:100%;padding-left:5px;} #categoryarea ul.list .txt_one{/*background-color:#fff;*/height:100%;padding-left:5px;} #categoryarea ul.list p{height:75px;display:table-cell;vertical-align:middle;} /* タイトル1 */ #categoryarea h2.title{ background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #d6d6d6), color-stop(0.75, #dbdbdb), color-stop(0.56, #e2e2e2), color-stop(0.26, #f6f6f6), color-stop(0.00, #ffffff)); background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 26%, #e2e2e2 56.00000000000001%, #dbdbdb 75%, #d6d6d6 100%); background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 26%, #e2e2e2 56.00000000000001%, #dbdbdb 75%, #d6d6d6 100%); background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 26%, #e2e2e2 56.00000000000001%, #dbdbdb 75%, #d6d6d6 100%); background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 26%, #e2e2e2 56.00000000000001%, #dbdbdb 75%, #d6d6d6 100%); background: linear-gradient(top, #ffffff 0%, #f6f6f6 26%, #e2e2e2 56.00000000000001%, #dbdbdb 75%, #d6d6d6 100%); font-size:12px;height:22px;color:#997d6f;padding: 5px 8px 0 8px; letter-spacing: 0px;text-shadow: 1px 1px 0px #fff; } #categoryarea h2.title .ttl {float:left;width:130px;} #categoryarea .mac h2.title{padding: 7px 8px 0 8px;} /* ---------- css/main.css ---------- */ /************************************************************************************ RESET *************************************************************************************/ ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,dl,dt,dd{ margin: 0; padding: 0; } table,p,img,fieldset { border: 0; } /* set image max width to 100% */ img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } body { font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Arial,Helvetica,sans-serif; color: #555555; /*background: #ccc url(legacy-pc-img-common-bg_common.png);*/ font-size: .8em; line-height: 1.4em; letter-spacing:1px; height: 100%; } li { list-style-type: none; } /*間隔 ----------------------------------------------- */ .pdr5{padding-right:5px;} .pdr10{padding-right:10px;} .pdr14{padding-right:14px;} .pdr15{padding-right:15px;} .pdl5{padding-left:5px;} .pdl10{padding-left:10px;} .pdlr5{padding-left:5px;padding-right:5px;} .pdlr10{padding-left:10px;padding-right:10px;} .pd10{padding:10px;} .pdtb10{padding:10px 0;line-height:1.3rem;} .pdt15{padding-top:15px;} .mga10{margin:10px;} .mga15{margin:15px;} .mgt10{margin-top:10px;} .mgt20{margin-top:20px;} .mgt30{margin-top:30px;} .mgb10{margin-bottom:10px;} .mgb15{margin-bottom:15px;} .mgb20{margin-bottom:20px;} .mgtb10{margin:10px 0;} .mgtb15{margin:15px 0;} /*回り込み*/ .fl_r{float:right;} .fl_l{float:left;} /*配置*/ .pst-7{position:relative;top:-7px} .pst3{position:relative;top:3px;} .pst4{position:relative;top:4px;} .pst5{position:relative;top:5px;} .pst7{position:relative;top:7px;} .pst10{position:relative;top:10px;} .pst13{position:relative;top:13px;} .pst15{position:relative;top:15px;} .pst20{position:relative;top:20px;} .psl30{position:relative;left:30px;} /* Select --------------------------------- */ select { border: solid 1px #ccc; float: left; height: 30px; border: 1px solid #ccc; font-size: 1rem; padding: 0; border-radius: 0; box-shadow: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 5px 0; } #select_pay { border: solid 1px #ccc; float: center; } /* Text Field --------------------------------- */ input[type='text'] { border: 1px solid #C4CCCE; box-shadow: none; font-size: 16px; height: 20px; line-height: 1.1; /*border-radius*/ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px !important;; } input[type='password'] { border: 1px solid #C4CCCE; box-shadow: none; font-size: 1rem; height: 20px; line-height: 1.1; /*border-radius*/ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px !important;; } input, button, select{ font-family: inherit; font-size: inherit; line-height: inherit; } textarea { font-family: inherit; font-size: inherit; line-height: inherit; margin: 5px 0; } input[type="radio"]{font-size:x-large;} /* ------------------------------- セレクト装飾用 -------------------------------*/ form .custom-selectbox { display: inline-block; position: relative; background-color: white; border: 1px solid #c8c8c8; vertical-align: middle; z-index: 1; /*box-sizing*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /*border-radius*/ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } form .custom-selectbox:before { display: block; position: absolute; top: 0; right: 0; width: 15px; height: 100%; padding: 0 0.35em; background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) no-repeat center center; text-align: center; content: ''; z-index: 1; pointer-events: none; } form .custom-selectbox select { display: block; width: 100%; padding:0 10px !important; height: 30px; margin: 0; border: 0 none; line-height: normal; box-shadow: none; -moz-appearance: none; -webkit-appearance: none; font-size:1em; /*background:#fff;*/ /*box-sizing*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /*border-radius*/ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } /*お届け変更用セレクト*/ form .custom-regselectbox { display: inline-block; position: relative; background-color: white; border: 1px solid #c8c8c8; vertical-align: middle; z-index: 1; /*box-sizing*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /*border-radius*/ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } form .custom-regselectbox:before { display: block; position: absolute; top: 0; right: 0; width: 15px; height: 100%; padding: 0 0.35em; background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) no-repeat center center; text-align: center; content: ''; z-index: 1; pointer-events: none; } form .custom-regselectbox select { display: block; width: 100%; padding:0 20px 0 10px !important; height: 30px; margin: 0; border: 0 none; line-height: normal; box-shadow: none; -moz-appearance: none; -webkit-appearance: none; font-size:1em; /*background:#fff;*/ /*box-sizing*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /*border-radius*/ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .w10{width:10%;} .w15{width:15%;} .w20{width:20%;} .w30{width:30%;} .w40{width:40%;} .w50{width:50%;} .w60{width:60%;} .w65{width:65%;} .w70{width:70%;} .w80{width:80%;} .w90{width:90%;} .w95{width:95%;} .w98{width:98%;} .w100{width:100%;} /*PHOTO --------------------------------- */ .picture { /*border: 1px solid #ccc;*/ } /* 大枠 ----------------------------------------------- */ #wrapper{ margin: 0 auto; height: 0; width: 100%; height: 100%; } /* フロート回り込み解除 ----------------------------------------------- */ br.clear { clear: both; display: none; font-size: 0px; line-height: 0%; height: 0px } /* フォント ----------------------------------------------- */ h1,h2,h3,h4,h5 { font-size: 100%; line-height: 150%; } .price { color: #e20000; font-weight: bold; } .attention {color: #e20000;font-size:12px;line-height:1.5rem; } .mini { font-size: 12px; clear:both; } em { font-size: 12px; font-style: normal; color: #e20000; margin: 5px 0; } .pr_amt em{ font-size: 16px; font-weight: bold; } div#red01 { color:#e20000; } div.red02 { color:#e20000; } .phototd { width: 75px; text-align: center; } .centertd { text-align: center; } .pricetd { text-align: right; } .pricetd em { font-weight: bold; } div#completetext { width: 90%; margin: 3% auto 0 auto; padding: 3%; border: 1px solid #ccc; overflow: hidden; } div#completetext em { font-weight: normal; } div#completetext p{ padding: 4% 0 0 0; text-align: left; clear:both; } /*shopping_ポイント*/ .bd_solid { border: 1px solid #ccc; padding: 0; margin: 0 auto; overflow: hidden; } .bd_dash { border: 1px dashed #aaa; padding: 10px; margin: 10px; width: 43%; } .allbg_blue{background:rgb(235,246,255);padding:10px;overflow:hidden;} .allbg_gray{background:#f6f6f6;padding:10px;overflow:hidden;} /* ラベル ----------------------------------------------- */ span.required { margin: 0 0 0 1em; padding: 0.1em 0.5em; font-size: 70%; background: #E54848; color: #fff; border-radius: 0.4em; vertical-align: middle; position: relative; top: -0.25em; } span.any { margin: 0 0 0 1em; padding: 0.1em 0.5em; font-size: 70%; background: #999; color: #fff; border-radius: 0.4em; vertical-align: middle; position: relative; top: -0.25em; } #three_maincolumn span.required{ margin: 0 0 0 0.3em; padding: 0.1em 0.3em; } #three_maincolumn span.any{ margin: 0 0 0 0.3em; padding: 0.1em 0.3em; } /*住所自動入力 ------------------------------------------------*/ .zipimg{margin:0;padding:0;} .zipimg img {margin: 5px 0 0 0 ;} .zipimg a {color:#666;text-decolation:none;} .zipimg a:hover{color:#666;} .zip_bt{ padding: 5px 10px; line-height:1rem; margin: 0 0 0 5px ; cursor: pointer; font-weight:noramal; font-size: 100%; letter-spacing:0.002rem; text-decoration: none; border: 1px solid #ccc; position: relative; background-color: #f1f1f1; background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1)); background: -webkit-linear-gradient(top,#fff,#f1f1f1); background: -moz-linear-gradient(top,#fff,#f1f1f1); background: -ms-linear-gradient(top,#fff,#f1f1f1); background: -o-linear-gradient(top,#fff,#f1f1f1); background: linear-gradient(top,#fff,#f1f1f1); -pie-background: linear-gradient(top,#fff,#f1f1f1); /*border-radius*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; /*box-shadow*/ -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1); -o-box-shadow: 0 1px 1px rgba(0,0,0,.1); box-shadow: 0 1px 1px rgba(0,0,0,.1); } /*------------------------------------------------*/ /* ---------- css/news.css ---------- */ .page_info/* News ----------------------------------------- */ div#news_all { margin: 1% auto 3% auto; padding: 0; overflow: hidden; clear: both; } div#bloc_head_news { text-align: center; width: 100%; margin: 0; background: url(legacy-pc-img-common-line.gif) center center repeat-x; } div#bloc_head_news h2 { padding: 0 20px 0 20px; color: #191919; font-size: 18px; line-height: 1.2em; background-color: #fff; font-weight: 400; z-index: 9999; width: 160px; margin: 0 auto; } div#head_newsm { margin:1% auto; border-bottom:2px solid #444; } div#head_newsm h2 { padding: 8px 0 8px 40px; font-size: 14px; font-weight: bold; color: #333; background: url(legacy-pc-img-icon-icon_news.png) 2% center no-repeat; } /*----------------------------------------------- */ /* News Top ----------------------------------------------- */ div#newsarea { width: 100%; margin: 1% auto; padding:0; font-size: 14px; word-break: break-all; overflow:hidden; } /*center*/ dl.news_acd { /* background: #DDD; */ width: 100%; margin: 0 auto; padding: 0; font-size: 14px; border-bottom:1px solid #EEE; overflow:hidden; } dl.news_acd dt { background:url(legacy-pc-img-icon-open.png) 97% center no-repeat; height:40px; text-indent:10px; line-height:35px; color:#333; font-weight:normal; cursor:pointer; } dl.news_acd dt.open { background:url(legacy-pc-img-icon-close.png) 97% center no-repeat; } dl.news_acd dt span, dl.news_acd dt p {float:left;} dl.news_acd dd { background:#FFF; padding:5px 10px; line-height:1.5; display:none; font-size: 90%; } /*left right*/ #leftcolumn #news_all, #rightcolumn #news_all { width: 100%; margin: 0 0 10% 0; padding:0; overflow:hidden; clear: both; } #leftcolumn #bloc_head_news, #rightcolumn #bloc_head_news { text-align: center; width: 100%; margin: 0; padding: 0 0 5px 0; background-image: none; border-bottom: 2px solid #555; } #leftcolumn #bloc_head_news h2, #rightcolumn #bloc_head_news h2 { padding: 0; color: #191919; font-size: 1rem; line-height: 1.2em; background-color: #fff; font-weight: bold; z-index: 9999; width: 100px; margin: 0 auto; } #leftcolumn dl.news_acd dt, #rightcolumn dl.news_acd dt { background: url(legacy-pc-img-icon-open.png) 97% 10% no-repeat; height: auto; padding:5px 0; text-indent: 0; line-height: 1.5rem; color: #333; font-weight: normal; cursor: pointer; font-size:90%; } #leftcolumn dl.news_acd dt .open, #rightcolumn dl.news_acd dt .open { background:url(legacy-pc-img-icon-close.png) 97% center no-repeat; } #leftcolumn dl.news_acd dt span, #rightcolumn dl.news_acd dt span { float:none; width:100%; } #leftcolumn dl.news_acd dt p, #rightcolumn dl.news_acd dt p { float:none; width:100%; } #leftcolumn dl.news_acd dd, #rightcolumn dl.news_acd dd { background:#FFF; padding:5px 0; line-height:1.5; display:none; font-size: 90%;} /* News More -------------------------------- */ div#news_m_all { width: 100%; margin: 0 auto 10px auto; font-size: 12px; word-break: break-all; clear: both; } .nw_area { padding: 10px; border-bottom: 1px solid #eee; } .nw_txt { padding: 10px; } .nw_day { padding: 0 0 0 20px; background: url(legacy-pc-img-icon-icon_news_s.png) left center no-repeat; } .page_info { margin:20px 0 0 0; padding:10px; /*border-top:dotted 1px #999;*/ } .page_info ul { margin:0 auto; width:100%; } .p_prev{ width:100px; padding:0 0 0 30px; float:left; background: url(legacy-pc-img-icon-icon_prev_s.png) left center no-repeat; text-align:left; } .p_next{ width:100px; padding:0 30px 0 0px; float:right; background: url(legacy-pc-img-icon-icon_next_s.png) right center no-repeat; text-align:right; } /* ----------------------------------------------- */ /* ---------- css/products.css ---------- */ div.listrightblock li div#productscolumn { width: 100%; margin: 2% auto; overflow: hidden; } /* 検索結果 ----------------------------------------------- */ /*p.conditionarea { clear: both; width: 566px; margin: 0 auto; padding: 5px; border: solid 1px #333; }*/ /* ページ送り ----------------------------------------------- */ .pagenumberarea { margin: 0 auto 1% auto; padding: 1% 0; font-size: 12px; } .pagecondarea { margin: 0 auto 1% auto; padding: 2% 1%; font-size: 12px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } .pagenumberarea, .pagecondarea a{ color:#333333; text-decoration:none; } .pagenumberarea, .pagecondarea a:hover{ color:#999999; text-decoration:none; } ul.pagenumberarea { height: 1em; padding: 10px 0; clear: both; } ul.pagecondarea { margin: 0 auto; border: 1px solid #ccc; background: #f6f6f6; line-height:1.5rem; } li .pagecondarea{padding:5px 0;} ul.pagenumberarea li { width: 32%; } ul.pagenumberarea li.left { color:#333333; text-align: left; padding: 0 0 0 5px; white-space: nowrap; display: none; } ul.pagenumberarea li.center { text-align: center; white-space: pre; display: none; } ul.pagenumberarea li.center a { color: #1984de; text-decoration:none; } ul.pagenumberarea li.center a:hover { text-decoration:underline; } ul.pagenumberarea li.right { text-align: right; white-space: nowrap; margin-left: auto; } .pagenumberarea .pagenumber{ color: #e20000; font-weight: bold; letter-spacing: 0.1em; font-size: 14px; padding-right: 3px; } p.pagenumberarea .number{ font-weight: bold; } /* 商品一覧 */ div#categoryarea{ margin: 0; } #product-list .mainv{ background: url(legacy-pc-assets-img-contents-product-mainv.jpg)center/cover no-repeat; height: 55rem; } #product-list .bg{ background: url(legacy-pc-assets-img-contents-product-bg.jpg) no-repeat; background-size: cover; padding-bottom: 10rem; } #product-list .ict_bg{ height: auto; font-size: 1.6rem; } #product-list .vegetables{ margin: 5.5rem 0 20rem 0; } #product-list .vegetables h2{ text-align: center; font-size: 5rem; margin-bottom: 3.5rem; } #product-list .vegetables p{ text-align: center; font-size: 1.8rem; margin: 1.8rem 0; } #product-list ul.category-list.flex { margin: 0 auto; width: 50%; justify-content: space-between; } #product-list ul.category-list.flex li{ position: relative; } #product-list ul.category-list.flex li:before{ position: absolute; content: ""; width: .1rem; height: 2rem; background: black; left: -3rem; top: 17%; } #product-list ul.category-list.flex{ position: relative; } #product-list ul.category-list.flex:after{ position: absolute; content: ""; width: .1rem; height: 2rem; background: black; right: -3rem; top: 17%; } #product-list ul.category-list a:hover{ color: #ff6945; } #product-list .lst_cartbtn{ background: #ff6945; background: #ff6945; width: 23rem; } #product-list .rpst_btnbox{ display: none; } /* タイトル ----------------------------------------------- */ div#listtitle { margin:10px auto; font-size: 16px; font-weight: normal; } div#listtitle a:first-child{ display: none; } div#listtitle h2 { padding: 10px 0 10px 40px; color: #333333; background: url(legacy-pc-img-icon-icon_mini_tag.png) no-repeat 1% 50%; border-bottom:2px solid #333; display: flex; justify-content: space-between; margin-top: 2.5rem; } div#listtitle h2 a:first-child{ display: contents; } div#listtitle h2 a{ color: #333333; text-decoration: none; } div#listtitle h2 a:hover{ text-decoration: underline; } /*パンくず ----------------------------------------------- */ .ict_bg, .kanren{margin:10px 0 0 0;padding:0; font-size:90%; height:16px; overflow:hidden; color:#9c9c9c;} .ict_bg a, .kanren a{color:#454545;text-decoration:none;} .ict_bg a:hover, .kanren a:hover{color:#454545;text-decoration:none; text-decoration:underline;} /*関連カテゴリ*/ .kanren_ct{border-top:1px dotted #ccc;padding: 10px 0 0 0;margin: 10px 0;overflow: hidden;font-size: 14px;} .kanren_ct span{border-right:1px dotted #ccc;padding:0 3px 0 5px;line-height:1.5rem;} .kanren_ct span:last-child { list-style: none;border: 0; } /* 商品1 ----------------------------------------------- */ div.listarea { width: 32%; height: 100%; margin: 0 auto 10px auto; padding: 0; overflow: auto; display: inline-block; } div.listphoto { margin: 0 auto; padding: 10px; text-align:center; } div.listphoto img{ width: auto; height: 150px; margin:0 auto; } div.listrightblock { width: 90%; margin: 0 auto; padding: 2% 0; } div.listrightblock ul { margin:0 auto; } div.listrightblock li { display: inline-block; padding: 3px 0 3px 3px; } div.listrightblock h3 { margin:0; padding: 5px 10px; font-size: 14px; font-weight:bold; overflow: hidden; } div.listrightblock h3 a { font-size: 100%; color:#333; text-decoration:none; line-height:1.2em; letter-spacing: 0.005em; word-break: break-all; font-size: 2rem; } div.listrightblock h3 a:hover { text-decoration:underline; } div.listrightblock .listcomment { padding:5px 10px; letter-spacing: 0.005em; word-break: break-all; overflow:hidden; display: none; } div.listrightblock .listcont { padding:10px; overflow:hidden; } div.listrightblock .pricebox { font-size: 14px; padding: 0 5px; } div.listrightblock .pricebox .price{ color: black; } div.listrightblock .soldout { padding:0 10px; clear: both; } div.listrightblock .in_cart { margin: 0 1%; padding: 0 2%; } div.listrightblock .quantity { width: 150px; } /*規格*/ div.listrightblock .ct_list { padding:5px 0 0 0; margin-top:10px; display: none; } div.listrightblock .ct_list dl{ width:100%;div.listrightblock .ct_list margin:0; padding:0; } div.listrightblock .ct_list dt { display: block; font-size:90%; text-align: left; padding: 3px 3px 0 3px; font-weight: normal; } div.listrightblock .ct_list dd { padding: 3px; display: block; } /*数量*/ div.listrightblock .num_quantity{margin:0;padding:0;width: 30%;} div.listrightblock .num_quantity dl{width:100%;padding: 5px 0 0 0;} div.listrightblock .num_quantity dt { display: inline-block; font-size: 12px; text-align: left; padding: 10px 0 0 10px; width:20%; font-weight: bold; } div.listrightblock .num_quantity dd { padding: 3px; display: inline-block; } div.listrightblock .box54 { width: 54px; border: solid 1px #ff6945; text-align:center; height: 4rem; } /* 商品詳細 */ /* タイトル ----------------------------------------------- */ div#detailtitle { margin:10px auto; font-size: 14px; font-weight: bold; background:#f6f6f6; } div#detailtitle h2 { padding: 10px 0 10px 40px; color: #333333; background: url(legacy-pc-img-icon-icon_mini_tag.png) no-repeat 2% 50%; } /* 商品詳細情報 ----------------------------------------------- */ #categoryarea{ margin-bottom: 3.5rem; display: none; } .products-detail{ padding-top: 10rem; } .products-detail #detailrightblock h2{ font-size: 5rem; } .dt_comment{ margin:10px auto 30px auto; font-size: 14px; clear:both; } .dt_comment p{ font-size: 1.8rem; } .dt_comment h3 { padding: 10px 0 ; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; text-align: center; display: none; } .dt_comment .txt{ margin: 3rem 0; } .dt_comment ul li{ display: flex !important; position: relative; margin: 2rem 0; padding-left: 2.5rem; } .dt_comment ul li .detail{ position: absolute; left: 20rem; } .bd_area .price{ font-size: 3rem; color: black; } .bd_area .price span.tax { font-size: 1.8rem; } .bd_area p { display: none; } .dt_comment ul li .detail:before{ content: ""; background: black; height: .1rem; width: 2.5rem; position: absolute; top: 50%; left: -6rem; } .dt_comment ul li:before{ content: ""; background: #ff6945; height: 3rem; width: .3rem; position: absolute; left: 0; } div#customervoicearea{ display: none !important; } div#one_maincolumn { margin: 0; padding: 0; } .dt_comment h3 span { font-weight: bold; padding: 10px 0 ; color: #333333; } .detail_p{ margin: 10px 0 10px 0; padding:0; word-break: break-all; } .mail-order{ margin-bottom: 6rem !important; width: 100rem !important; } p.fukuro { font-size: 1.6rem; } .mail-order h2{ font-size: 2.4rem !important; margin-bottom: 2.5rem !important; } .mail-order p{ font-size: 1.6rem !important; } .mail-order .btn{ text-align: center; color: white; background: #fbd47a; padding: 1.7rem 2.5rem; width: 19rem; margin: 0 auto; display: block; margin-top: 14.5rem; } .bd_area{ display: flex !important; } .cartbtn{ width: 30rem !important; background: none; } .cartbtn a{ background: #ff6945; color: white !important; } /* 商品2 ----------------------------------------------- */ div#detailarea { width: 100%; margin: 0 0 2% 0; padding: 0; overflow:hidden; } div.detail_product div.detail_product_img{position:relative;width:950px;height:410px;} div.detail_product div.main_img{width:950px;height:400px;position:absolute;z-index:3;top:0;left:0;} div.detail_product div.sub_img{position:absolute;z-index:4;top:20px;left:812px;} div.detail_product div.sub_img .sub_img_img{width:118px;margin:2px;padding-bottom:12px;cursor:pointer;} div.detail_product div.product_detail_numbox{font-size:8.33px;} div.detail_product h1.ttl{color:#444;font-size:21px;font-weight:bold;letter-spacing: -1px;margin-bottom:10px;} div.detail_product h2.sub_ttl{color:#444;font-size:12px;font-weight:100;letter-spacing: 0.5px;} div.detail_product input[type="text"].product_detail_numbox{background-color:#fff;border: 1px solid #000;width:24px;margin: 0 5px;} div.detail_product div.detail_area{width:950px;} div.detail_product div.detail_product_area{width:950px;border: 1px solid #ccc;} div.detail_product div.detail_product_body{} div.detail_product div.detail_product_area .area1{float:left;width:260px;} div.detail_product div.detail_product_area .area2{float:left;width:400px;font-size:10px;} div.detail_product div.detail_product_area .area3{float:left;width:290px;} div.detail_product div.detail_etc{font-size:10px;} div.detail_product div.detail_etc a{color:#444;} div.detail_product div.detail_etc a:link{color:#444;text-decoration: none} div.detail_product div.detail_etc a:visited{color:#444;text-decoration: none} div.detail_product div.detail_etc a:hover{color:#444;text-decoration:underline;} div.support_area{background-color:#f7f7f7;} div.support_area .input_style{} div.support_area .input_style input[type="text"]{color: #999;padding:5px;margin:0 10px 10px 0;background-color:#fff;border: 1px #ccc solid;-khtml-border-radius:5px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;} div.support_area .input_style input[type="text"]:focus, input[type="text"].focused { border-color: #000; color: #333;} .cloud-zoom-lens {border: 4px solid #888;margin:-4px; /* Set this to minus the border thickness. */background-color:#fff; /*cursor:move;*/} /* This is the moving lens square underneath the mouse pointer. */ .cloud-zoom-title {font-family:Arial, Helvetica, sans-serif;position:absolute !important;background-color:#000;color:#fff;padding:3px;width:100%;text-align:center;font-weight:bold;font-size:10px;top:0px;} /* This is for the title text. */ .cloud-zoom-big {border:4px solid #ccc;overflow:hidden;} /* This is the zoom window. */ .cloud-zoom-loading {color:white; background:#222;padding:3px;border:1px solid #000;} /* This is the loading message. */ .bd_area{padding: 10px 0 0 0;margin: 10px 0;clear:both;overflow: hidden; font-size: 14px; line-height: 1.2rem;} .related_items{} .sub_ttl{color:#000;font-size:12px;/*font-weight:bold;*/font-family: Verdana,Arial,Helvetica,sans-serif;letter-spacing: -1px;} /*商品写真（左） ----------------------------------------------- */ div#detailphotoblock { margin:0 20px 0 0; float: right; width: 36%; } div#detailphotoblock p { margin: 10px; } div#detailphotoblock img{width:100%; margin:0 auto 10px auto;} div#detailphotoblock #gallery { width: 100%; margin: 0; padding: 0; overflow: hidden; } div.sub_all { float: left; width: 20%; } div#detailphotoblock #gallery ul { width: 100%; margin: 0; padding: 0; } div#detailphotoblock #gallery li { margin: 0 5%; padding: 0; } /*商品詳細（右） ----------------------------------------------- */ div#detailrightblock { float: left; width: 50%; margin:0 0 30px 0; } div#detailrightblock li { display: inline; } /*#detailrightbloc title*/ div#detailrightblock h2 { color:#555555; margin: 10px 0; padding: 0; font-size: 130%; font-weight: normal; } /*#detailrightbloc dl dt dd*/ div#detailrightblock dl { margin:0; padding:0; width: 100%; overflow: hidden; } div#detailrightblock dt { font-weight: normal; width: 20%; padding: 5px 0; margin: 0 0 0 0; float: left; overflow: hidden; } div#detailrightblock dd { width: 75%; margin: 0 15px 0 0; float: left; overflow: hidden; } /*#detailrightbloc table*/ div#detailrightblock table{ width: 100%; margin: 15px auto 15px auto; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-collapse: collapse; text-align: left; } div#detailrightblock table th{ padding: 8px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; background: #f0f0f0; font-weight: normal; } div#detailrightblock table td{ padding: 8px; background: #fff; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } .ft_h2{ color:#555555; margin: 0 0 5px 0; padding: 0; font-size: 3rem; font-weight: normal; } div#detailrightblock #enpt_area{display:none;font-size:12px;} div#detailrightblock .en_area{display:table-cell;padding:3px 0 0 0 ;} div#detailrightblock .en_area span{ /* padding: 0; */position: relative;top: -5px;padding:0 10px 0 0;} div#detailrightblock .pt_area {display: table-cell;padding:3px 0 0 0 ;margin: 0;} div#detailrightblock .pt_area span {/* padding: 0; */position: relative;top: -5px;} div#detailrightblock .pt_area span img,div#detailrightblock .en_area span img{position:relative;top:10px;} div#detailrightblock .zaiko_area{font-size:12px; display:none;} div#detailrightblock .zaiko_area span{position: relative;top: -5px;} div#detailrightblock .lg_en{font-size:140%;color:#ff0000;} div#detailrightblock .numarea{float:left;width:35%;margin:5px 0 0 0;} div#detailrightblock .numarea .box54 { width: 40px; padding:3px; margin:0 10px 0 10px; text-align:center; border: solid 1px #ff977e; } /*#detailrightbloc teiki*/ div#detailrightblock .teiki_area { margin: 20px 0; padding: 10px 0px; overflow: hidden; clear: both; } div#detailrightblock .teiki_area h3 { margin:10px 0; padding:10px; background:#fff; border-top: 1px solid #888; border-bottom: 1px dotted #888; overflow: hidden; clear:both; } div#detailrightblock .tx_teiki { font-size:18px; float:left; } div#detailrightblock .tx_teiki_en { float:right; } div#detailrightblock .teiki_area .attention { color: #e20000; float: left; width: 100%; } /*マトリックス表示*/ div#detailrightblock .kikaku_bl{width:100%;margin:10px 0;} /* サブタイトル ----------------------------------------------- */ div.subarea { margin:5px auto; padding:0; float:left; clear: both; width: 300px; } div.subarea h3 { margin:5px auto; padding:5px; font-size: 12px; font-weight: bold; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; background:#000; box-shadow: 0 1px 6px #ccc; -moz-box-shadow: 0 1px 6px #ccc; -webkit-box-shadow: 0 1px 6px #ccc; } div.subphotoimg { float: left; width: 60px; height:60px; display: block; } h3.sub_h3 { float: left; width: 100%; } div.subtext { width: 65%; margin: 0; padding: 1%; float: left; font-size: 0.6em; } /* ---------- css/shopping.css ---------- */ /* 下層共通指定 ----------------------------------------------- */ div#shoppingcolumn { width: 100rem; margin: 2% auto; } div#shoppingcolumn a{text-decolation:none;} /* ヘッダー ----------------------------------------------- */ div#shoppingcolumn .head { margin: 5px auto 10px; font-size: 160%; font-weight: bold; border-bottom: 1px solid #ccc; font-family: Helvetica, san-serif; } div#shoppingcolumn .head2 { margin: 5px auto 10px; font-size: 140%; font-weight: bold; border-bottom: 1px solid #ccc; font-family: Helvetica, san-serif; } div#shoppingcolumn .subhead { margin:0 auto 0 auto; padding:0; font-size: 120%; font-weight: nomal; background-color:#fff; font-family: Helvetica, san-serif; } div#shoppingcolumn .t_cartin { padding: 8px 0; color: #000; /*background: url(legacy-pc-img-icon-icon_cart.png) no-repeat 2% 48%;*/ } div#shoppingcolumn .t_login { padding: 8px 40px; color: #000; background-image:none; font-size:16px; background: url(legacy-pc-img-icon-icon_login.png) no-repeat 1% 48%; } div#shoppingcolumn .t_nomem { padding: 8px 44px; color: #000; background: url(legacy-pc-img-icon-icon_privacy.png) no-repeat 2% 48%; } div#shoppingcolumn .t_payment { padding: 8px 0px; color: #000; /*background: url(legacy-pc-img-icon-icon_deli.png) no-repeat 2% 48%;*/ } div#shoppingcolumn .t_conf { padding: 8px 0; color: #000; /*background: url(legacy-pc-img-icon-icon_cate_head.png) no-repeat 2% 48%;*/ } div#shoppingcolumn .t_comp { padding: 8px 0; color: #000; /*background: url(legacy-pc-img-icon-icon_comp.png) no-repeat 2% 48%;*/ } div#shoppingcolumn .t_method { padding: 8px 0; color: #000; /*background: url(legacy-pc-img-icon-icon_method.png) no-repeat 2% 48%;*/ } div#shoppingcolumn .t_time { padding: 8px 0; color: #000; /*background: url(legacy-pc-img-icon-icon_time.png) no-repeat 2% 48%;*/ } div#shoppingcolumn .t_e_contact { padding: 8px 0; color: #000; /*background: url(legacy-pc-img-icon-icon_contact.png) no-repeat 2% 48%;*/ } div#shoppingcolumn .t_point { padding: 8px 0; color: #000; /*background: url(legacy-pc-img-icon-icon_point.png) no-repeat 2% 48%;*/ } div#shoppingcolumn .t_inpday { padding: 8px 0px; color: #000; /*background: url(legacy-pc-img-icon-icon_time.png) no-repeat 2% 48%;*/ } div#shoppingcolumn .t_deliv { padding: 8px 0px; color: #000; /*background: url(legacy-pc-img-icon-icon_deli.png) no-repeat 2% 48%;*/ } div#shoppingcolumn table { width: 950px; } div.area_cont{ width:900px; margin:0 auto; } /* h3 ----------------------------------------------- */ div#shoppingcolumn .have{ margin: 0 0; padding:10px 10px 10px 40px; color:#333; font-weight:bold; font-size:16px; background: url(legacy-pc-img-icon-icon_head.png) no-repeat 1% 50%; } div#shoppingcolumn .d_have{ margin: 0 0; padding:10px 10px 10px 40px; color:#333; font-weight:bold; font-size:16px; background: url(legacy-pc-img-icon-icon_head.png) no-repeat 1% 50%; } /* Cart Table ----------------------------------------------- */ div#shoppingcolumn table{ width: 100%; margin: 15px auto ; border-top: 1px solid #ccc; border-collapse: collapse; text-align: left; font-size:14px; } div#shoppingcolumn table th{ padding: 8px; border-bottom: 1px solid #ccc; color: rgb(0,0,0); background: #f0f0f0; font-weight: normal; } div#shoppingcolumn table td { padding: 8px; border-bottom: 1px solid #ccc; } div#shoppingcolumn table .qponbg { background-color: #e6f8fb; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } div#shoppingcolumn table .totalbg { background-color: #fef0f0; border: 5px solid #ffd4d4; } div#shoppingcolumn table .righttd{ text-align: right; border-right: 1px solid #ccc; } div#shoppingcolumn .qpon_pr { color: #e20000; font-weight: normal; } div#shoppingcolumn .price { color: #e20000; font-weight: normal; font-size: 120%; } /*定期●回総合計*/ div#shoppingcolumn table .totalreg { background-color: #fff; border-bottom: 1px solid #ccc; } div#shoppingcolumn .reg_price { color: #535353; font-weight: normal; font-size: 15px; } div#shoppingcolumn table .bdnone{ text-align: right; } div#shoppingcolumn .regular_dt{border-radius: 5px;border:3px solid #eee;padding:1.2%;} div#shoppingcolumn .regular_dt h3 {margin: 0 !important;padding: 0;font-weight: 450 !important;font-size: 1.3em;color: #000;} div#shoppingcolumn .regular_dt h4 {margin: 0 !important;padding: 10px 0 0 0;font-weight: 450 !important;font-size: 1.2em;color: #000;} div#shoppingcolumn .regular_dt .ttl {width: 100%;background: #767676;color: #fff;text-align: left !important;margin: 5px 0 0 0;padding: 10px 0;letter-spacing: 0.1em;font-size: 1.2em;display: inline-block;font-weight: 500;border-top: 1px solid #ccc;} div#shoppingcolumn .regular_dt table {width: 100% !important;margin: 0 auto 10px auto;border-collapse: collapse;text-align: left;font-size: 14px;color: #000;} div#shoppingcolumn .regular_dt table th{text-align: center;padding:5px 10px;background:#f6f6f6;border-bottom:1px solid #dedede;} div#shoppingcolumn .regular_dt table td {padding: 5px 10px;} div#shoppingcolumn .regular_dt table .cttd{text-align: center;} div#shoppingcolumn .regular_dt table .lftd{text-align: left;} div#shoppingcolumn .regular_dt table .rttd{text-align: right;} div#shoppingcolumn .regular_dt table .pd10{padding:10px !important;} div#shoppingcolumn .regular_dt table .bgnone{background:none !important;} div#shoppingcolumn .regular_dt table .bd_rt{border-right: 1px solid #dedede;} div#shoppingcolumn .regular_dt table .totalreg {background-color: #f0f9fc;border: 5px solid #d4f4fe;} div#shoppingcolumn .regular_dt table .totalreg td {padding: 8px;font-size: 1.1em;} div#shoppingcolumn .regular_dt .reg_price {color: #000;font-weight: 600;font-size: 1.1em;} div#shoppingcolumn .regular_dt .bdnone {text-align: right;padding: 10px;font-weight: 600;} div#shoppingcolumn .reg_memo {margin-top: 10px;text-align: left;line-height: 1.5rem;} div#shoppingcolumn .reg_memo p{background: #f6fef0;padding: 10px;border-radius:5px;} /* カートの中 ----------------------------------------------- */ .totalmoneyarea { width: 100%; 　margin: 0 auto; padding: 0; /* border: 1px solid #ccc; */ text-align: center; font-size: 14px; line-height: 1.5em; } div#shoppingcolumn_cart th { text-align: center; } div#shoppingcolumn table th.resulttd { text-align: right; } div#shoppingcolumn td#quantity { text-align: center; width: 70px; } div#shoppingcolumn ul#quantity_level li { display: inline; padding: 3px; } div#shoppingcolumn .empty { text-align: center; margin: 10px 0; padding: 10px; background-color: #f6f6f6; } .pr_amt{ background-color: #fff1f6; text-align: center; margin: 2% 0; padding: 10px; font-size: 16px; font-weight: normal; } .pr_amt p{line-height: 1.5em;} .tblareabtn{margin:30px 0;overflow:hidden;} .tblareabtn p{text-align:center;padding:10px 0;margin:0 auto;} #shoppingcolumn .tblareabtn .btn_ups { display: inline-block; cursor: pointer; } /* お客様情報入力 ----------------------------------------------- */ div#shoppingcolumn_customer { } .flowarea { margin: 20px auto; padding:5px; overflow:hidden; } .flowarea ul { clear:both; } .flowarea li { padding:5px 30px 5px 5px; float:left; background: url(legacy-pc-img-icon-icon_guide.png) no-repeat 96% 50%; } .flowarea .inon { padding:5px 30px 5px 5px; float:left; background: none; } .flowarea .txt_green{ color:#60cb26; } div#shoppingcolumn_customer th em { color: #000; font-weight: bold; } div#shoppingcolumn_customer .box120 { width: 120px; padding: 2px; border: 1px solid #ccc; } div#shoppingcolumn_customer .box60 { width: 60px; padding: 2px; border: 1px solid #ccc; } div#shoppingcolumn_customer .box380 { width: 380px; margin: 5px 0 0 0; padding: 2px; border: 1px solid #ccc; } div#shoppingcolumn_customer .box320 { width: 320px; margin: 5px 0 0 0; padding: 2px; border: 1px solid #ccc; } div#shoppingcolumn_customer .zipimg img { margin: 5px 0 0 0; } /* お届け先指定 ----------------------------------------------- */ .addbtn { margin: 10px 0 0 0; } .deli_word { padding:10px; } /*nomenber ----------------------------------------------- */ div#shoppingcolumn .nomenber_tb{ width: 100%; margin:0 auto; } div#shoppingcolumn .nomenber_tb table{ width: 100%; margin: 15px auto 0 auto; border-collapse: collapse; text-align: left; border-top: none; } div#shoppingcolumn .nomenber_tb table th{ padding:15px 8px; border-bottom: 1px solid #ccc; background: #fff; font-weight: normal; } div#shoppingcolumn .nomenber_tb table td { padding:15px 8px; border-bottom: 1px solid #ccc; } div#shoppingcolumn .deliv_sitei{padding:2% 0;margin:0 auto} div#shoppingcolumn .deliv_sitei table { width: 100%; margin: 0 auto; border-collapse: collapse; text-align: left; border-top: none; } div#shoppingcolumn .deliv_sitei table th{ padding:15px 8px; border-bottom: 1px solid #ccc; background: #fff; font-weight: normal; } div#shoppingcolumn .deliv_sitei table td { padding:15px 8px; border-bottom: 1px solid #ccc; background: #fff; } .another_deliv{background:#f0f0f0;padding:2%;margin:0 auto;} .txt_center{text-align:center;padding:10px 0 ;margin:0 auto;} /* お届け時間・日程の指定 ----------------------------------------------- */ .t_daybox{ padding-bottom: 10px; border-bottom: 1px dotted #ccc; overflow: hidden; padding:10px 0; } #shoppingcolumn .mgt10{margin-top:10px;} #shoppingcolumn .mgt15{margin-top:15px;} #shoppingcolumn .mgt20{margin-top:20px;} #shoppingcolumn .pdt20{padding-top:10px;} div#shoppingcolumn .t_daybox label { font-size: 16px; font-weight: 500; margin-left: 10px; } div#shoppingcolumn .t_daybox select { font-size: 1.1em; } div#shoppingcolumn .t_daybox input[type="radio"], input[type="checkbox"], div#shoppingcolumn .t_daybox2 input[type="radio"], input[type="checkbox"] { font-size: x-large; padding: 0; margin: 10px 0 10px 5px; box-sizing: border-box; } div#shoppingcolumn .shopping_calendar { width: 100%; margin: 1% auto; padding: 0 0 2% 0; border-bottom: 1px dotted #999; overflow: hidden; float: left; } div#shoppingcolumn .tday { font-size: 15px; font-weight: bold; margin: 10px auto 0 auto; padding: 10px; color: #555; text-align: left; background-color: #f6f6f6; } div#shoppingcolumn .tday .ft_red{color:#C30;} div#shoppingcolumn .tday span { margin-right: 30px; border-left: 1px solid #666; padding: 0 30px 0 10px; } /* お支払い方法・お届け時間等の指定 ----------------------------------------------- */ div#shoppingcolumn .payarea { margin: 0 auto; padding: 0 0 30px 0; border-bottom: 1px solid #555; } div#shoppingcolumn h3 { margin: 0 0 15px 0; } div#shoppingcolumn .payarea02 { margin: 0 auto; padding: 10px 0 30px 0; border-bottom: 1px solid #555; overflow: hidden; } div#shoppingcolumn .payarea02 em { font-weight: bold; font-size:0.85rem; color: #333; } div#shoppingcolumn .payarea table { } div#shoppingcolumn .payarea table th { text-align: center; } div#shoppingcolumn payarea02 .area660 { width: 100%; margin: 5px auto; padding: 2px; border: 1px solid #ccc; } div#shoppingcolumn .pointarea { margin: 10px auto; } div#shoppingcolumn .pointarea p { line-height:1.5rem; } div#shoppingcolumn .pointarea div { } /* ポイント使用の指定 ----------------------------------------------- */ div#shoppingcolumn .use_point_area { margin: 0; padding: 0 0 10px 10px; line-height: 150%; overflow: hidden; background: #fefefe; width: 51%; display: inline-block; } div#shoppingcolumn .use_point_area li{ padding: 10px 0; border-bottom: 1px #ddd solid; } /* 確認 ----------------------------------------------- */ div#shoppingcolumn_shopping table.delivname thead th { width: 70%; text-align: left; font-weight: bold; } div#shoppingcolumn_shopping table.delivname tbody th { text-align: left; width: 155px; } div#shoppingcolumn_shopping table.delivname td { text-align: left; width: 55%; } div#shoppingcolumn .cf_ttl{ float:left; padding:10px 0; font-weight:bold; font-size:14px; color:#000; } /* 決済モジュール(決済情報入力画面) ----------------------------------------------- */ div#shoppingcolumn_shopping .box60 { width: 60px; padding: 2px; border: 1px solid #ccc; } div#shoppingcolumn_shopping .box120 { width: 120px; padding: 2px; border: 1px solid #ccc; } /* ログイン ----------------------------------------------- */ div#shoppingcolumn .loginarea { width: 46%; margin: 2% 1%; padding: 1%; float: left; min-height: 420px; box-shadow: 0 2px 4px #ccc; -webkit-box-shadow: 0 2px 4px #ccc; -moz-box-shadow: 0 2px 4px #ccc; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; } div#shoppingcolumn .loginarea .inputtext { margin: 15px auto; } div#shoppingcolumn .loginarea .inputtext02 { margin: 15px auto 0 auto; font-size: 90%; float:left; } div#shoppingcolumn .loginarea .inputbox { width: 90%; margin: 3% auto; padding: 5%; background: #f0f0f0; } div#shoppingcolumn .loginarea .inputbox .passwd { margin: 15px 0 0 0; } div#shoppingcolumn .loginarea .inputbox .box250 { width: 69%; margin: 5px 0 0 0; padding: 5px; border: 1px solid #ccc; } div#shoppingcolumn .loginarea .inputbox .box275 { width: 69%; margin: 5px 0 0 28px; padding: 5px; border: 1px solid #ccc; } div#shoppingcolumn .loginarea .inputbox02 { width: 460px; margin: 15px auto 0 auto; padding: 15px 20px; text-align: center; } div#shoppingcolumn .box65 { text-align:center; } /* エラー ----------------------------------------------- */ div#shoppingcolumn_error { } div#shoppingcolumn_error .messagearea { margin: 15px auto 0 auto; padding: 10px 5px; border: 5px solid #ccc; text-align: center; } div#shoppingcolumn_error .messagearea .error { padding: 120px 0; } .lp_h3{margin: 15px 0 0 0; font-size: 1.2em; padding: 7px; color: #333; text-align: left; border-right: none;border-bottom: 2px solid #333; badkground:#fff;} /* アップセル定期購入に変更ボタン ----------------------------------------------- */ a#ups_button { display: block; line-height: 3.2em; height: auto; font-size: 1.5em; margin: 4px auto 0; width: 85%; cursor: pointer; font-weight: bold; font-family: inherit; vertical-align: top; border-radius: 3px; text-decoration: none; color: #fff; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #28a108), color-stop(0.00, #64d549)); background: -webkit-linear-gradient(#64d549, #28a108); background: -moz-linear-gradient(#64d549, #28a108); background: -o-linear-gradient(#64d549, #28a108); background: -ms-linear-gradient(#64d549, #28a108); background: linear-gradient(#64d549, #28a108); border: 1px solid #41b723; box-shadow: inset 0 0 9px 0px rgb(255, 255, 255), 2px 2px 5px rgba(000,000,000,0.4); -moz-box-shadow: inset 0 0 9px 0px rgb(255, 255, 255) ,2px 2px 5px rgba(000,000,000,0.4); -webkit-box-shadow: inset 0 0 9px 0px rgb(255, 255, 255), 2px 2px 5px rgba(000,000,000,0.4); } /* ---------- css/sub_function.css ---------- */ /* お客様の声 ----------------------------------------------- */ div#customervoicearea { clear: both; margin: 10px auto ; padding: 1%; border-top: 1px dotted #ccc; overflow:hidden; } div#customervoicearea .title { clear: both; margin: 10px 20px 15px 0; font-size: 14px; font-weight: bold; } div#customervoicearea h2 { padding: 0 0 0 30px; color: #333; background: url(legacy-pc-img-icon-icon_voice.png) no-repeat 0% 70%; } div#customervoicearea .voicedate{ font-weight: bold; margin: 10px 0 0 0; text-align: right; } div#customervoicearea .voicetitle{ padding: 5px 0; font-size: 120%; font-weight: bold; } div#customervoicearea li { margin: 10px auto; padding:10px; background: #f6f6f6; } div#customervoicearea .head_review { clear: both; margin: 10px 0; padding: 20px 0 10px 0; border-bottom: 1px dotted #ccc; } .voicecomment{margin:10px 0;} /* トラックバック ----------------------------------------------- */ div#trackbackarea { clear: both; margin: 10px auto; padding: 1%; border-top: 1px dotted #ccc; } div#trackbackarea .head{ clear:both; margin:10px auto 10px auto; font-size: 14px; font-weight: bold; } div#trackbackarea h2 { padding: 0 0 0 30px; color: #333; background: url(legacy-pc-img-icon-icon_voice.png) no-repeat 0% 70%; } div#trackbackarea h3 { font-size: 100%; font-weight: bold; padding: 0 0 10px 0; } div#trackbackarea .box500 { width: 500px; padding: 5px; margin: 0 0 10px 0; border: solid 1px #ccc; } /* この商品を買った人はこんな商品も買っています ----------------------------------------------- */ div#whoboughtarea { clear: both; margin: 10px auto; padding: 1% 0; border-top: 1px dotted #ccc; overflow:hidden; } div#whoboughtarea .head{ clear:both; margin:10px auto; font-size: 14px; font-weight: bold; } div#whoboughtarea h2 { padding: 0 0 0 30px; color: #333333; background: url(legacy-pc-img-icon-icon_osusume.png) no-repeat 0% 70%; } div.whoboughtblock { width:100%; clear: both; float:left; } div.whoboughtleft { /*float: left; width: 13.8%; min-height:240px; margin:0 0 10px 0; padding: 10px;*/ float: left; width: 15.5%; min-height: 240px; margin: 0 0 10px 0; padding: 3px; } div.whoboughtleft img { display: block; margin: 5px 0; } div.whoboughtleft p { padding:5px 0; } div.whoboughtleft h3 { font-size: 100%; display:block; } div.whoboughtleft h3 a { color:#000; text-decoration:none; } div.whoboughtleft h3 a:hover { text-decoration:underline; } /*div.whoboughtright { float: left; width: 90px; min-height:220px; margin:0 5px 10px 5px; padding: 10px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; background: #fff; box-shadow: 0 1px 6px #ccc; -moz-box-shadow: 0 1px 6px #ccc; -webkit-box-shadow: 0 1px 6px #ccc; } div.whoboughtright h3 { font-size: 100%; } div.whoboughtright img { display: block; float: left; margin: 0 5px 0 0; } div.whoboughtright p { margin: 0 0 5px 0; }*/ /* ---------- css/recommend.css ---------- */ /* Recomend,Recomend1 共通 ------------------------------------- */ div#bloc_head_recommend { text-align: center; width: 100%; margin: 30px 0 0 0; background: url(legacy-pc-img-common-line.gif) center center repeat-x; } div#bloc_head_recommend h2 { padding: 0 20px 0 30px; color: #191919; font-size: 18px; line-height: 1.2em; background-color: #fff; font-weight: 400; z-index: 9999; width: 160px; margin: 0 auto; } /* Recomend1 スライダー表示 ------------------------------------- */ div#recommend_all2 { margin:10px auto 30px auto; padding:0; height:300px; overflow:hidden; clear: both; } div#recomendarea2 { width: 100%; margin: 0 auto; } .recomendblock2 { width: 100%; margin:0; overflow:hidden; } .recomendblock2 li{color: #666;} .recomendblock2 a{ color:#666; text-decoration:none;width:100px; } .recomendblock2 h3 {height:30px;line-height:1rem;overflow:hidden;} .recomendblock2 a:hover{ text-decoration:underline; } .recomendblock2 p{padding:5px 0;} .reco_pic2{ margin: 0 0 10px 0px; text-align: center; } .reco_pic2 h3{width:100px;} /* Recomend2〜5 固定表示------------------------------------- */ /*#threemaincolumn*/ div#recommend_all { margin:0; padding:0; overflow:hidden; } div#recomendarea { width: 100%; margin: 0 auto; } .recomendblock { width: 20%; margin: 2%; display: inline-block; } .recomendblock h3 { /* height: 35px; */ padding: 5px 0; line-height: 1rem; } .recomendblock li{color: #666;} .recomendblock img { width:auto; height: 120px; } .recomendblock a{ color:#666; text-decoration:none; } .reco_pic{ margin: 0 0 10px 0; text-align:center; } .reco_cmt{height:30px;font-size:12px;overflow:hidden; word-break:break-all;} /*#leftcolumn・#rightcolumn ----------------------------------------------- */ #leftcolumn #recommend_all, #rightcolumn #recommend_all { margin: 10px auto; padding: 0; overflow: hidden; } #leftcolumn #bloc_head_recommend, #rightcolumn #bloc_head_recommend { text-align: center; width: 100%; margin: 0 0 20px 0; background: none; } #leftcolumn #bloc_head_recommend h2, #rightcolumn #bloc_head_recommend h2 { padding: 0 20px 0 30px; color: #191919; font-size: 16px; line-height: 1.2em; background-color: #fff; font-weight: 400; z-index: 9999; width: 160px; margin: 0 auto; border-bottom:2px solid #555; } #leftcolumn .recomendblock h3, #rightcolumn .recomendblock h3{ /* height: 35px; */ padding: 5px 0; font-size: 80%; line-height: 120%; } #leftcolumn #recomendarea, #rightcolumn #recomendarea { width: 100%; margin: 0 auto; } #leftcolumn .recomendblock, #rightcolumn .recomendblock { width: 45%; margin: 1%; display: inline-block; } #leftcolumn .recomendblock li{color: #666;} #rightcolumn .recomendblock li{color: #666;} #leftcolumn .recomendblock img, #rightcolumn .recomendblock img { width: auto; height: 90px; margin: 0 auto; padding: 0; } #leftcolumn .recomendblock p, #rightcolumn .recomendblock p { display:none; /*display:blockに変えると価格、コメントが表示されます。*/ } #leftcolumn .recomendblock a, #rightcolumn .recomendblock a{ color:#666; text-decoration:none; } .recomendblock a:hover{ text-decoration:underline; } #leftcolumn .recomendblock a:hover, #rightcolumn .recomendblock a:hover{ text-decoration:underline; } #leftcolumn .reco_pic, #rightcolumn .reco_pic { margin: 0 0 10px 0; padding: 0; } /* -------------------------------------------- */ /* ---------- css/ranking.css ---------- */ div#ranking_all { width: 100%; margin:1% 0; padding:0; overflow:hidden; } div#bloc_head_ranking { text-align: center; width: 100%; margin: 0 0 20px 0; background: url(legacy-pc-img-common-line.gif) center center repeat-x; } div#bloc_head_ranking h2 { padding: 0 20px 0 20px; color: #191919; font-size: 18px; line-height: 1.2em; background-color: #fff; font-weight: 400; z-index: 9999; width: 160px; margin: 0 auto; } div#head_rankm { margin:2% auto; background:#fff; border-bottom:2px solid #333; } div#head_rankm h2 { padding: 8px 0 8px 30px; font-size: 14px; font-weight: bold; color: #000; background: url(legacy-pc-img-icon-icon_rank.png) no-repeat 0% 50%; } /*----------------------------------------------- */ /* Ranking Top ------------------------------------- */ .rankarea { width: 18%; margin: 0; padding: 0 5px; float: left; overflow: hidden; position: relative; } .rank_txt{ font-size:14px; font-weight:bold; margin:0 0 10px 0; padding:5px 0; text-align:center; } .rank_txt2{ font-size:14px; font-weight:bold; margin:0 0 10px 0; padding:5px 0; } .rankrightblock { margin:10px 0; float:left; min-height:65px; } .rankrightblock h3 a { color:#555; text-decoration:none; } .rank_pic{ max-width:100% !important; float:left; } /* -------------------------------------------- */ /* Ranking More ------------------------------------- */ #rank_m_all { width: 100%; margin: 0 auto; clear: both; } #rank_m_all .rank_m_area { width: 100%; margin: 10px 0 30px 0; padding: 0 0 10px 0; overflow: hidden; border-bottom: 1px dotted #ccc;} #rank_m_all .rank_m_pic{ float: left; width: 15%; } #rank_m_all .rank_m_rightblock { width: 65%; margin:0; padding:0 0 10px 30px; float:left; } #rank_m_all h3 a { font-size:18px; padding:15px 0; color:#555; line-height:1.5em; text-decoration:none; } /* -------------------------------------------- */ /*左右配置*/ #leftcolumn #ranking_all, #rightcolumn #ranking_all { width: 100%; margin: 0 0 10% 0; padding: 0; overflow: hidden; } #leftcolumn #bloc_head_ranking, #rightcolumn #bloc_head_ranking { text-align: center; width: 100%; margin: 0; padding: 0 0 5px 0; background-image: none; border-bottom: 2px solid #555; } #leftcolumn #bloc_head_ranking h2, #rightcolumn #bloc_head_ranking h2 { padding: 0; color: #191919; font-size: 1rem; line-height: 1.2em; background-color: #fff; font-weight: bold; z-index: 9999; width: 100px; margin: 0 auto; } #leftcolumn .rankarea, #rightcolumn .rankarea { width: 80%; margin: 5px 0; padding: 0 5px; float: none; overflow: hidden; position: relative; } #leftcolumn .rank_txt, #rightcolumn .rank_txt { font-size:14px; font-weight:bold; margin:0 0 10px 0; padding:5px 0; text-align:center; } #leftcolumn .rank_txt2, #rightcolumn .rank_txt2, { font-size:14px; font-weight:bold; margin:0 0 10px 0; padding:5px 0; } #leftcolumn .rankrightblock, #rightcolumn.rankarea .rankrightblock { margin:10px 0; float:left; min-height:65px; } #leftcolumn .rankrightblock h3 a { color:#555; text-decoration:none; } #leftcolumn .rank_pic{ max-width:100% !important; float:left; } /* ---------- css/window.css ---------- */ /* 商品詳細拡大写真 ----------------------------------------------- */ div#bigimage { width: 520px; margin: 15px auto 0 auto; background-color: #ffffff; } div#bigimage img { padding: 10px; background-color: #ffffff; } /* カート拡大写真 ----------------------------------------------- */ div#cartimage { width: 280px; margin: 15px auto 0 auto; background-color: #ffffff; } div#cartimage img { padding: 10px; background-color: #ffffff; } /* お客様の声の書き込み・新しいお届け先の追加・変更 ----------------------------------------------- */ div#windowcolumn { width: 550px; margin: 15px auto 0 auto; padding:5px 0; background-color: #fff; font-size:12px; overflow:hidden; } /* ヘッダー ----------------------------------------------- */ div#windowcolumn .head { margin:5px auto; font-size: 14px; font-weight: bold; background:#fff; border-bottom:2px solid #333; } div#windowcolumn h2 { padding: 5px 30px; color: #000; background: url(legacy-pc-img-icon-icon_about.png) no-repeat 1% 48%; font-size:16px; } div#windowcolumn p { padding: 10px 0px 5px 0; /*background: #F2F3F4;*/ } div#windowarea { width: 500px; margin: 15px auto 0 auto; } div#windowarea p.windowtext { margin: 15px 0 0 0; } div#windowarea table { width: 490px; margin-top:10px; padding:10px 0; } div#windowarea th{ text-align: left; width: 25%; padding: 10px 0; background: #fff; border-bottom: 1px dotted #aaa; font-size: 14px; font-weight: normal; } div#windowarea td{ text-align:left; padding:10px; border-bottom:1px dotted #aaa; } div#windowarea .zipimg img { margin: 5px 0 0 0; } div#windowarea .box350 { width: 350px; padding: 5px; border: 1px solid #ccc; } div#windowarea .area350 { width: 350px; height: 120px; border: 1px solid #ccc; } div#windowarea .box120 { width: 120px; padding: 5px; border: 1px solid #ccc; font-size:14px; } div#windowarea .box60 { width: 60px; padding: 5px; border: 1px solid #ccc; font-size:14px; } div#windowarea .box300 { width: 300px; margin:0 0 5px 0; padding: 5px; border: 1px solid #ccc; font-size:14px; } div#windowarea #completebox { width: 490px; margin: 15px 0 0 0; border: 2px solid #ccc; } div#windowarea #completebox p{ padding: 60px 5px; text-align: center; } /* 郵便番号検索 ----------------------------------------------- */ div#zipsearchcolumn { width: 460px; margin: 15px auto 0 auto; background-color: #fff; border-top: 5px solid #29abe2; border-bottom: 5px solid #29abe2; } div#zipsearchcolumn h2 { width: 460px; margin: 0 0 15px 0; } div#zipsearcharea { width: 460px; margin: 15px auto 0 auto; } div#zipsearchcolumn .btn { margin: 15px 0 30px 0; text-align: center; } div#zipsearcharea #completebox p{ padding: 60px 5px; text-align: center; } div#mypagecolumn input[type="radio"], input[type="checkbox"] { display: inline-block; margin-right: 6px; } /*パスワードを忘れた方 ----------------------------------------------- */ div#window_fogot { width: 550px; margin: 0 auto !important; padding: 0; background-color: #fff; font-size: 12px; overflow: hidden; } div#window_fogot #fgt_wd{ width:450px !important; margin:0 auto; } div#window_fogot #fgt_wd .head { margin:5px auto; font-size: 14px; font-weight: bold; background:#fff; border-bottom:2px solid #333; } div#window_fogot #fgt_wd h2 { padding: 5px 30px; color: #000; background: url(legacy-pc-img-icon-icon_about.png) no-repeat 1% 48%; font-size:16px; } /*説明文*/ div#window_fogot .fg_msg { padding: 0.8em 0 0 0; line-height: 1.5em; font-size: 120%; } div#window_fogot .fg_msg span{ color:#d00000; font-weight:500; letter-spacing: 0.001em; } div#window_fogot .fg_msg .ft_red{ font-weight: 600; font-size:125%; letter-spacing: 0.05em; } div#window_fogot .fg_msg .attention_box { margin-top: 5px; padding: 0.3% 0 0 0; border-radius: 3px; border: 2px solid #37a544; } div#window_fogot .fg_msg .attention_box .attention { color: #37a544; font-size: 88%; font-weight: 600; letter-spacing: 0.01em; padding: 0 0 0 10px; } /*入力フォーム*/ div#window_fogot #fg_box { margin: 0.8em auto; padding: 0.5em 5em !important; border-radius: 3px; background: #f6f6f6; font-weight: 600; font-size: 120%; } div#window_fogot #fg_box p{ text-align: left; padding:5px 0 !important; } div#window_fogot #fg_box .mail { margin: 0 auto; padding: 2.5% 0 5% 0; } div#window_fogot #fg_box .pass { margin: 0 auto; padding: 1% 0; } div#window_fogot #fg_box .box300 { width: 300px; margin:0 0 5px 0; padding: 5px; border: 1px solid #ccc; font-size:14px; } div#window_fogot #fg_box span{ position:relative; } div#window_fogot #fg_box .attention { margin-left: 0 !important; color: #d00000 !important; font-size: 12px !important; line-height: 1rem !important; letter-spacing: 0.005em; /*position: absolute;*/ word-wrap: break-word; width:50%; } div#window_fogot .btn { width: 90%; margin: 0 !important; padding: 0; float: left; font-size: 0.85em; background: #333; text-decoration: none; } /* ---------- css/flexslider.css ---------- */ .flexslider{ margin: 0 auto; max-width: 1000px; } /* Browser Resets */ .flex-container a:active, .flexslider a:active {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* FlexSlider Necessary Styles *********************************/ .flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {width: 100%; display: block; height: auto;} .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} /* FlexSlider Default Theme *********************************/ .flexslider {width: 100%;background: #fff; position: relative; /*-webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;*/ zoom: 1;} .flexslider .slides {zoom: 1;} .flexslider .slides > li {position: relative;} /* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */ .flex-container {zoom: 1; position: relative;} /* Caption style */ /* IE rgba() hack */ .flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;} .flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 16px;} /* 横の次へ前へのナビゲーション */ .flex-direction-nav li a {width: 45px; height: 45px; display: block;position: absolute; top: 50%;text-indent: -9999px;} .flex-direction-nav li .flex-next {background-position: -52px 0;right: -13px; background:url(legacy-pc-img-top-arrow_right.png) no-repeat 0 0; cursor: pointer;z-index:3; margin: -10px 0;} .flex-direction-nav li .flex-prev {left: 5px; background:url(legacy-pc-img-top-arrow_left.png) no-repeat 0 0;cursor: pointer;z-index:3;margin: -10px 0;} .flex-direction-nav li .disabled {opacity: .8; filter:alpha(opacity=30); cursor: default;} /* 下のナビゲーション */ .flex-control-nav { width: 100%; position: absolute; bottom: 20px; text-align: center; } .flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; *display: inline; } .flex-control-paging li a { width: 8px; height: 8px; display: block; background: #666; background: rgba(235, 235, 235, 0.5); cursor: pointer; text-indent: -9999px; border-radius: 50%; } .flex-control-paging li a:hover { background: #666; background: rgba(133, 133, 133, 0.7); } .flex-control-paging li a.flex-active { background: #666; background: rgba(133, 133, 133, 0.7); cursor: default; } .flex-control-thumbs { margin: 5px 0 0; position: static; overflow: hidden; } .flex-control-thumbs li { width: 25%; float: left; margin: 0; } .flex-control-thumbs img { width: 100%; height: auto; display: block; opacity: .7; cursor: pointer; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .flex-control-thumbs img:hover { opacity: 1; } .flex-control-thumbs .flex-active { opacity: 1; cursor: default; } /* ---------- css/owl.theme.css ---------- */ /* * Owl Carousel Owl Demo Theme * v1.3.3 */ .owl-theme .owl-controls{ margin-top: 10px; text-align: center; height: 6px; } /* Styling Next and Prev buttons */ .owl-theme .owl-controls .owl-buttons div{ color: #ada1a3; display: inline-block; zoom: 1; *display: inline;/*IE7 life-saver */ margin: 5px; font-size: 30px; filter: Alpha(Opacity=50);/*IE7 fix*/ opacity: 1; } /* Clickable class fix problem with hover on touch devices */ /* Use it for non-touch hover action */ .owl-theme .owl-controls.clickable .owl-buttons div:hover{ filter: Alpha(Opacity=100);/*IE7 fix*/ opacity:0.5; text-decoration: none; } /* Styling Pagination*/ .owl-theme .owl-controls .owl-page{ display: inline-block; zoom: 1; *display: inline;/*IE7 life-saver */ } .owl-theme .owl-controls .owl-page span{ display: block; width: 12px; height: 12px; margin: 5px 7px; filter: Alpha(Opacity=50);/*IE7 fix*/ opacity: 0.5; background: #7c716f; } .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span{ filter: Alpha(Opacity=100);/*IE7 fix*/ opacity: 1; } /* If PaginationNumbers is true */ .owl-theme .owl-controls .owl-page span.owl-numbers{ height: auto; width: auto; color: #FFF; padding: 2px 10px; font-size: 12px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } /* preloading images */ .owl-item.loading{ min-height: 150px; background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) no-repeat center center } #slider3 .owl-pagination{display:none;} #slider3 .owl-buttons{position:relative;top:-93px;margin:0;} #slider3 .owl-prev{position:relative;left:-471px;top: 20px;margin:0;background: url(legacy-pc-img-common-cl_prev.gif) no-repeat ;width:21px;height:30px;} #slider3 .owl-next{position:relative;right:-471px;top: 20px;margin:0;background: url(legacy-pc-img-common-cl_next.gif) no-repeat ;width:21px;height:30px;} #slider1 .owl-pagination{display:none;} #slider1 .owl-buttons{position:relative;top:-200px;margin:0;} #slider1 .owl-prev{z-index:3;text-align:left;/*left:-471px;*/float:left;margin:50px 0;background: url(legacy-pc-img-common-cl_prev.gif) no-repeat ;width:21px;height:30px} #slider1 .owl-next{z-index:3;position:relative;text-align:right;float:right;/*right:-471px;*/margin:50px 0;background: url(legacy-pc-img-common-cl_next.gif) no-repeat ;width:21px;height:30px} /* ---------- css/owl.carousel.css ---------- */ /* * Core Owl Carousel CSS File * v1.3.2 */ /* clearfix */ .owl-carousel .owl-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } /* display none until init */ .owl-carousel{ display: none; position: relative; width: 100%; margin: 2% auto; -ms-touch-action: pan-y; } .owl-carousel .owl-wrapper{ display: none; position: relative; -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper-outer{ overflow: hidden; position: relative; margin: 0 auto; } .owl-carousel .owl-wrapper-outer.autoHeight{ -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } .owl-carousel .owl-item{ float: left; } .owl-controls .owl-page, .owl-controls .owl-buttons div{ cursor: pointer; } .owl-controls { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* mouse grab icon */ /*.grabbing { cursor:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) 8 8, move; }*/ /* fix */ .owl-carousel .owl-wrapper, .owl-carousel .owl-item{ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); height:auto; } /*#slider1*/ #slider1 .item img { display: block; margin: 0 auto; width: auto; height: 120px; } #slider1 .item{ background: #fff; margin: 5px; color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align: left; widht:120px; } #one_maincolumn #slider1 .item { background: #fff; margin: 10px 30px 30px 30px; widht: 120px; } /*#slider2*/ #slider2 .item img{ display: block; width: 100%; height: auto; } #slider2 .item{ background: #fff; margin: 5px; color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align: left; widht:120px; } #one_maincolumn #slider2 .item { background: #fff; margin: 10px 30px 30px 30px; widht: 120px; } /*#slider3*/ #slider3 .item img{ display: block; width: 100%; height: auto; } #slider3 .item{ background: #fff; margin: 5px; color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align: left; widht:120px; } #one_maincolumn #slider3 .item { background: #fff; margin: 10px 30px 30px 30px; widht: 120px; } /* ---------- css/owl.transitions.css ---------- */ /* * Owl Carousel CSS3 Transitions * v1.3.2 */ .owl-origin { -webkit-perspective: 1200px; -webkit-perspective-origin-x : 50%; -webkit-perspective-origin-y : 50%; -moz-perspective : 1200px; -moz-perspective-origin-x : 50%; -moz-perspective-origin-y : 50%; perspective : 1200px; } /* fade */ .owl-fade-out { z-index: 10; -webkit-animation: fadeOut .7s both ease; -moz-animation: fadeOut .7s both ease; animation: fadeOut .7s both ease; } .owl-fade-in { -webkit-animation: fadeIn .7s both ease; -moz-animation: fadeIn .7s both ease; animation: fadeIn .7s both ease; } /* backSlide */ .owl-backSlide-out { -webkit-animation: backSlideOut 1s both ease; -moz-animation: backSlideOut 1s both ease; animation: backSlideOut 1s both ease; } .owl-backSlide-in { -webkit-animation: backSlideIn 1s both ease; -moz-animation: backSlideIn 1s both ease; animation: backSlideIn 1s both ease; } /* goDown */ .owl-goDown-out { -webkit-animation: scaleToFade .7s ease both; -moz-animation: scaleToFade .7s ease both; animation: scaleToFade .7s ease both; } .owl-goDown-in { -webkit-animation: goDown .6s ease both; -moz-animation: goDown .6s ease both; animation: goDown .6s ease both; } /* scaleUp */ .owl-fadeUp-in { -webkit-animation: scaleUpFrom .5s ease both; -moz-animation: scaleUpFrom .5s ease both; animation: scaleUpFrom .5s ease both; } .owl-fadeUp-out { -webkit-animation: scaleUpTo .5s ease both; -moz-animation: scaleUpTo .5s ease both; animation: scaleUpTo .5s ease both; } /* Keyframes */ /*empty*/ @-webkit-keyframes empty { 0% {opacity: 1} } @-moz-keyframes empty { 0% {opacity: 1} } @keyframes empty { 0% {opacity: 1} } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } } @-moz-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } } @keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } } @-webkit-keyframes backSlideOut { 25% { opacity: .5; -webkit-transform: translateZ(-500px); } 75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } } @-moz-keyframes backSlideOut { 25% { opacity: .5; -moz-transform: translateZ(-500px); } 75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } } @keyframes backSlideOut { 25% { opacity: .5; transform: translateZ(-500px); } 75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } } @-webkit-keyframes backSlideIn { 0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; -webkit-transform: translateZ(-500px); } 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); } } @-moz-keyframes backSlideIn { 0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; -moz-transform: translateZ(-500px); } 100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); } } @keyframes backSlideIn { 0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; transform: translateZ(-500px); } 100% { opacity: 1; transform: translateZ(0) translateX(0); } } @-webkit-keyframes scaleToFade { to { opacity: 0; -webkit-transform: scale(.8); } } @-moz-keyframes scaleToFade { to { opacity: 0; -moz-transform: scale(.8); } } @keyframes scaleToFade { to { opacity: 0; transform: scale(.8); } } @-webkit-keyframes goDown { from { -webkit-transform: translateY(-100%); } } @-moz-keyframes goDown { from { -moz-transform: translateY(-100%); } } @keyframes goDown { from { transform: translateY(-100%); } } @-webkit-keyframes scaleUpFrom { from { opacity: 0; -webkit-transform: scale(1.5); } } @-moz-keyframes scaleUpFrom { from { opacity: 0; -moz-transform: scale(1.5); } } @keyframes scaleUpFrom { from { opacity: 0; transform: scale(1.5); } } @-webkit-keyframes scaleUpTo { to { opacity: 0; -webkit-transform: scale(1.5); } } @-moz-keyframes scaleUpTo { to { opacity: 0; -moz-transform: scale(1.5); } } @keyframes scaleUpTo { to { opacity: 0; transform: scale(1.5); } } /* ---------- css/new_mypage.css ---------- */ /*マイページナビボタン*/ #mynavarea li { margin:0 auto; padding:5px 0; display:block; text-align:left; font-size: 14px; font-weight: normal; border-bottom:1px dotted #ccc; background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) no-repeat 98% 50%; } form .custom-selectbox:before { display: block; position: absolute; top: 0; right: 0; width: 15px; height: 100%; padding: 0 0.35em; background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) no-repeat center center; text-align: center; content: ''; z-index: 1; pointer-events: none; } form .custom-regselectbox:before { display: block; position: absolute; top: 0; right: 0; width: 15px; height: 100%; padding: 0 0.35em; background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) no-repeat center center; text-align: center; content: ''; z-index: 1; pointer-events: none; } div#windowarea { width: 100%; margin: 15px auto 0 auto; } div#windowarea table { margin-top: 10px; padding: 10px 0; width: 0; } div#windowarea th { text-align: left; padding: 10px 0; background: #fff; border-bottom: 1px dotted #aaa; font-size: 14px; font-weight: normal; width: 90px; } div#mypagecolumn input[type="radio"], div#mypagecolumn input[type="checkbox"] { } /* ----------------------------------------------- 下層共通指定 ----------------------------------------------- */ #mypagecolumn { width: 100%; margin: 2% auto; } /* ----------------------------------------------- MYPAGE共通指定 ----------------------------------------------- */ #mycontentsarea { width: 75%; margin: 2% 0 0 1%; padding: 1%; float: right; font-size: 14px; } #mycontentsarea table th.resulttd { text-align: right; } #mycontentsarea table.delivname{margin:0 auto;padding:0;} #mycontentsarea table.delivname th { text-align: left; width: 30%; color:#555; background:#fff; border-bottom:1px solid #ccc; } #mycontentsarea table.delivname td{ padding: 10px 8px; border-bottom: 1px solid #ccc; line-height:1.5rem; } .delivname p{padding:5px 0;} #mycontentsarea table caption { border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc; padding: 8px; background-color: #f0f0f0; text-align: left; font-weight: bold; color: #000; } #mycontentsarea .order_delchange input[type="button"] { width:150px; padding: 10px; text-decoration: none; border: 1px solid #ddd; position: relative; color: #313131; background-color: #f1f1f1; border-radius: 2px; background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1)); background: -webkit-linear-gradient(top,#fff,#f1f1f1); background: -moz-linear-gradient(top,#fff,#f1f1f1); background: -ms-linear-gradient(top,#fff,#f1f1f1); background: -o-linear-gradient(top,#fff,#f1f1f1); background: linear-gradient(top,#fff,#f1f1f1); -pie-background: linear-gradient(top,#fff,#f1f1f1); display: block; margin: 0 auto; cursor: pointer; font-weight:normal; font-size: 100%; white-space: normal; -webkit-border-radius: 1px; white-space: normal; float:right; } #mypagecolumn em { font-size: 12px; font-style: normal; color: #e20000; margin: 5px 0; } /*回り込み ---------------------------------*/ #mypagecolumn .fl_r{float:right;} #mypagecolumn .fl_l{float:left;} /*間隔 ---------------------------------*/ /*パディング(内側)*/ #mypagecolumn .pdr5,#windowcolumn .pdr5{padding-right:5px;} #mypagecolumn .pdl5,#windowcolumn .pdl5{padding-left:5px;} #mypagecolumn .pdl10,#windowcolumn .pdl10{padding-left:10px;} #mypagecolumn .pdlr5,#windowcolumn .pdlr5{padding-left:5px;padding-right:5px;} #mypagecolumn .pdlr10,#windowcolumn .pdlr10{padding-left:10px;padding-right:10px;} #mypagecolumn .pd10,#windowcolumn .pd10{padding:10px;} #mypagecolumn .pdtb10,#windowcolumn .pdtb10{padding:10px 0;line-height:1.3rem;} #mypagecolumn .pdt15,#windowcolumn .pdt15{padding-top:15px;} /*マージン(外側)*/ #mypagecolumn .mgt10,#windowcolumn .mgt10{margin-top:10px;} #mypagecolumn .mgt20,#windowcolumn .mgt20{margin-top:20px;} #mypagecolumn .mgt30,#windowcolumn .mgt30{margin-top:30px;} #mypagecolumn .mgb10,#windowcolumn .mgb10{margin-bottom:10px;} #mypagecolumn .mgb15,#windowcolumn .mgb15{margin-bottom:15px;} #mypagecolumn .mgb20,#windowcolumn .mgb20{margin-bottom:20px;} #mypagecolumn .mgtb10,#windowcolumn .mgtb10{margin-top:10px;margin-bottom:10px;} #mypagecolumn .mgtb15,#windowcolumn .mgtb15{margin-top:15px;margin-bottom:15px;} /*配置*/ #mypagecolumn .pst-10{position:relative;top:-10px} #mypagecolumn .pst-7{position:relative;top:-7px} #mypagecolumn .pst-5{position:relative;top:-5px} #mypagecolumn .pst{position:relative;top:0} #mypagecolumn .pst3{position:relative;top:3px;} #mypagecolumn .pst4{position:relative;top:4px;} #mypagecolumn .pst5{position:relative;top:5px;} #mypagecolumn .pst7{position:relative;top:7px;} #mypagecolumn .pst10{position:relative;top:10px;} #mypagecolumn .pst13{position:relative;top:13px;} #mypagecolumn .pst15{position:relative;top:15px;} #mypagecolumn .pst20{position:relative;top:20px;} /*フォント ---------------------------------*/ #mypagecolumn .ft-size120{font-weight:bold;font-size:100%;} #mypagecolumn .cl_red{font-size: 100%; font-style: normal; color: #e20000; margin: 5px 0; } #mypagecolumn .red{color:#C30;} /*select 装飾用 ---------------------------------*/ #mypagecolumn form .custom-selectbox, #windowcolumn form .custom-selectbox { display: inline-block; position: relative; background-color: white; border: 1px solid #c8c8c8; vertical-align: middle; z-index: 1; /*box-sizing*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /*border-radius*/ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } #mypagecolumn form .custom-selectbox:before, #windowcolumn form .custom-selectbox:before { display: block; position: absolute; top: 0; right: 0; width: 15px; height: 100%; padding: 0 0.35em; background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) no-repeat center center; text-align: center; content: ''; z-index: 1; pointer-events: none; } #mypagecolumn form .custom-selectbox select, #windowcolumn form .custom-selectbox select { display: block; width: 100%; padding:0 10px !important; height: 30px; margin: 0; border: 0 none; line-height: normal; box-shadow: none; -moz-appearance: none; -webkit-appearance: none; font-size:1em; /*background:#fff;*/ /*box-sizing*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /*border-radius*/ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } /* select 装飾用(定期申込お届け変更用)*/ #mypagecolumn form .custom-regselectbox{ display: inline-block; position: relative; background-color: white; border: 1px solid #c8c8c8; vertical-align: middle; z-index: 1; /*box-sizing*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /*border-radius*/ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #mypagecolumn form .custom-regselectbox:before { display: block; position: absolute; top: 0; right: 0; width: 15px; height: 100%; padding: 0 0.35em; background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) no-repeat center center; text-align: center; content: ''; z-index: 1; pointer-events: none; } #mypagecolumn form .custom-regselectbox select { display: block; width: 100%; padding:0 20px 0 10px !important; height: 30px; margin: 0; border: 0 none; line-height: normal; box-shadow: none; -moz-appearance: none; -webkit-appearance: none; font-size:1em; /*background:#fff;*/ /*box-sizing*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /*border-radius*/ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } /* 幅*/ #mypagecolumn .w10, #windowcolumn .w10{width:10%;} #mypagecolumn .w15, #windowcolumn .w15{width:15%;} #mypagecolumn .w20, #windowcolumn .w20{width:20%;} #mypagecolumn .w30, #windowcolumn .w30{width:30%;} #mypagecolumn .w40, #windowcolumn .w40{width:40%;} #mypagecolumn .w50, #windowcolumn .w50{width:50%;} #mypagecolumn .w60, #windowcolumn .w60{width:60%;} #mypagecolumn .w65, #windowcolumn .w65{width:65%;} #mypagecolumn .w70, #windowcolumn .w70{width:70%;} #mypagecolumn .w80, #windowcolumn .w80{width:80%;} #mypagecolumn .w90, #windowcolumn .w90{width:90%;} #mypagecolumn .w95, #windowcolumn .w95{width:95%;} #mypagecolumn .w98, #windowcolumn .w98{width:98%;} #mypagecolumn .w100, #windowcolumn .w100{width:100%;} /* インプットタイプ (マイページ全体) -----------------------------------------------*/ #mypagecolumn input[type="radio"]{font-size:x-large;} #mypagecolumn input[type="radio"], #mypagecolumn input[type="checkbox"] { display: inline-block; margin-right: 6px; } #mypagecolumn td input[type="radio"] { display: inline-block; margin-right: 10px; } #mypagecolumn input[type=radio] + label { position: relative; display: inline-block; margin-right: 12px; font-size: 14px; line-height: 30px; left:-27px; top: -1px; cursor: pointer; } #mypagecolumn input[type=checkbox] + label { position: relative; display: inline-block; margin-right: 12px; font-size: 14px; line-height: 30px; left:0px; cursor: pointer; } @media (min-width: 1px) { #mypagecolumn input[type=radio]{ display: none; margin: 0; } #mypagecolumn input[type=checkbox] { display: none; margin: 0; } #mypagecolumn input[type=radio] + label{ padding: 0 0 0 24px; } #mypagecolumn input[type=checkbox] + label { padding: 0 0 0 24px; } #mypagecolumn input[type=radio] + label::before, #mypagecolumn input[type=checkbox] + label::before { content: ""; position: absolute; top: 50%; left: 0; -moz-box-sizing: border-box; box-sizing: border-box; display: block; width: 18px; height: 18px; margin-top: -9px; background: #FFF; } #mypagecolumn input[type=radio] + label::before { border: 2px solid #ccc; border-radius: 30px; } #mypagecolumn input[type=checkbox] + label::before { border: 2px solid #ccc; } #mypagecolumn input[type=radio]:checked + label::after, #mypagecolumn input[type=checkbox]:checked + label::after { content: ""; position: absolute; top: 50%; -moz-box-sizing: border-box; box-sizing: border-box; display: block; } #mypagecolumn input[type=radio]:checked + label::after { left: 5px; width: 8px; height: 8px; margin-top: -4px; background: #3e86fc; border-radius: 8px; } #mypagecolumn input[type=checkbox]:checked + label::after { left: 3px; width: 16px; height: 8px; margin-top: -8px; border-left: 3px solid #E71063; border-bottom: 3px solid #E71063; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } } #mypagecolumn input[type='text'] { border: 1px solid #C4CCCE; box-shadow: none; font-size: 1rem; height: 20px; line-height: 1.1; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px !important; } /*お支払い方法 radio/checkbox -----------------------------------------------*/ /*payment_info*/ #mypagecolumn .payment_info ul li input[type="radio"], #mypagecolumn .payment_info ul li input[type="checkbox"] { display: none; margin-right: 5px; } #mypagecolumn .payment_info ul li input[type=radio] + label { position: relative; display: inline-block; margin-right: 12px; font-size: 14px; line-height: 30px; left:-27px; top: -1px; cursor: pointer; } #mypagecolumn .payment_info ul li input[type=checkbox] + label { position: relative; display: inline-block; margin-right: 12px; font-size: 14px; line-height: 30px; left:0px; cursor: pointer; } @media (min-width: 1px) { #mypagecolumn .payment_info ul li input[type=radio], #mypagecolumn .payment_info ul li input[type=checkbox] { display: none; margin: 0; } #mypagecolumn .payment_info ul li input[type=radio] + label, #mypagecolumn .payment_info ul li input[type=checkbox] + label { padding: 0 0 0 24px; } #mypagecolumn .payment_info ul li input[type=radio] + label::before{ content: ""; position: absolute; top: 50%; left: 30px; -moz-box-sizing: border-box; box-sizing: border-box; display: block; width: 18px; height: 18px; margin-top: -9px; background: #FFF; } #mypagecolumn .payment_info ul li input[type=checkbox] + label::before { content: ""; position: absolute; top: 50%; left: 0; -moz-box-sizing: border-box; box-sizing: border-box; display: block; width: 18px; height: 18px; margin-top: -9px; background: #FFF; } #mypagecolumn .payment_info ul li input[type=radio] + label::before { border: 2px solid #ccc; border-radius: 30px; } #mypagecolumn .payment_info ul li input[type=checkbox] + label::before { border: 2px solid #ccc; } #mypagecolumn .payment_info ul li input[type=radio]:checked + label::after, #mypagecolumn .payment_info ul li input[type=checkbox]:checked + label::after { content: ""; position: absolute; top: 50%; -moz-box-sizing: border-box; box-sizing: border-box; display: block; } #mypagecolumn .payment_info ul li input[type=radio]:checked + label::after { left: 35px; width: 8px; height: 8px; margin-top: -4px; background: #3e86fc; border-radius: 8px; } #mypagecolumn .payment_info ul liinput[type=checkbox]:checked + label::after { left: 3px; width: 16px; height: 8px; margin-top: -8px; border-left: 3px solid #E71063; border-bottom: 3px solid #E71063; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } } /* ラベル -----------------------------------------------*/ #mypagecolumn span.required, #windowcolumn span.required { margin: 0 0 0 1em; padding: 0.1em 0.5em; font-size: 70%; background: #E54848; color: #fff; border-radius: 0.4em; vertical-align: middle; position: relative; top: -0.25em; } #mypagecolumn span.any, #windowcolumn span.any { margin: 0 0 0 1em; padding: 0.1em 0.5em; font-size: 70%; background: #999; color: #fff; border-radius: 0.4em; vertical-align: middle; position: relative; top: -0.25em; } #mypagecolumn .attention, #windowcolumn .attention {margin-left:5px;color: #d00000;font-size:12px;line-height:1.5rem;} /*住所自動入力 -----------------------------------------------*/ #mypagecolumn .zipimg, #windowcolumn .zipimg {margin:0;padding:0;} #mypagecolumn .zipimg img, #windowcolumn .zipimg img {margin: 5px 0 0 0 ;} #mypagecolumn .zipimg a, #windowcolumn .zipimg a {color:#666;text-decolation:none;} #mypagecolumn .zipimg a:hover, #windowcolumn .zipimg a:hover {color:#666;} #mypagecolumn .zip_bt, #windowcolumn .zip_bt{ padding: 5px 10px; line-height:1rem; margin: 0 0 0 5px ; cursor: pointer; font-weight:noramal; font-size: 100%; letter-spacing:0.002rem; text-decoration: none; border: 1px solid #ccc; position: relative; background-color: #f1f1f1; background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1)); background: -webkit-linear-gradient(top,#fff,#f1f1f1); background: -moz-linear-gradient(top,#fff,#f1f1f1); background: -ms-linear-gradient(top,#fff,#f1f1f1); background: -o-linear-gradient(top,#fff,#f1f1f1); background: linear-gradient(top,#fff,#f1f1f1); -pie-background: linear-gradient(top,#fff,#f1f1f1); /*border-radius*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; /*box-shadow*/ -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1); -o-box-shadow: 0 1px 1px rgba(0,0,0,.1); box-shadow: 0 1px 1px rgba(0,0,0,.1); } /*マイページ テーブル -----------------------------------------------*/ #mypagecolumn table{ width: 100%; /*margin: 0 auto 10px auto;*/ padding:0; border-collapse: collapse; text-align: left; } #mypagecolumn table th { padding: 5px 8px; background: #666; color:#fff; font-weight: normal; } #mypagecolumn table td { padding: 15px 8px; border-bottom: 1px solid #ccc; } /* ヘッダー -----------------------------------------------*/ #mypagecolumn .head { margin: 5px auto 0; padding: 0; font-size: 150%; font-weight: normal; border-bottom: 1px solid #666; overflow: hidden; } #mypagecolumn .subhead { margin:5px auto; font-size: 12px; font-weight: nomal; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; background-color:#f7f7f7; -moz-box-shadow: 0 1px 6px #ccc; -webkit-box-shadow: 0 1px 6px #ccc; box-shadow: 0 1px 6px #ccc; } #mypagecolumn .t_mypage { padding: 0; color: #333; font-weight: bold; } #mypagecolumn .t_login { padding: 8px 40px; color: #000; background: url(legacy-pc-img-icon-icon_login.png) no-repeat 1% 48%; font-size:16px; } #mypagecolumn .t_area { margin: 0 0 10px 0; overflow: hidden; padding-bottom: 5px; } /*タイトル -----------------------------------------------*/ #mypagecolumn .mycont_head { margin: 0 auto 10px auto; font-size: 100%; font-weight: bold; overflow: hidden; } #mypagecolumn .mycont_head h3 { padding: 0 0 5px 0; color: #555; font-size: 1.3rem; font-weight: normal; } #mypagecolumn .mycont_headttl{ font-size:14px; padding: 5px; color:#313131; font-weight:normal; border: 1px solid #ddd; position: relative; color: #313131; background-color: #f1f1f1; border-radius: 2px; background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1)); background: -webkit-linear-gradient(top,#fff,#f1f1f1); background: -moz-linear-gradient(top,#fff,#f1f1f1); background: -ms-linear-gradient(top,#fff,#f1f1f1); background: -o-linear-gradient(top,#fff,#f1f1f1); background: linear-gradient(top,#fff,#f1f1f1); -pie-background: linear-gradient(top,#fff,#f1f1f1); } #mypagecolumn .mycont_headttl2{ font-size:14px; padding: 5px; color:#313131; font-weight:bold; border-bottom:2px solid #666; position: relative; color: #313131; overflow:hidden; } #mypagecolumn .mycont_headttl3{ font-size:14px; padding: 5px; font-weight:normal; position: relative; color: #fff; border-radius: 2px; background:#666; } #mypagecolumn .ttl_blue{ background:#4a89be; padding:5px; color:#fff; overflow:hidden;} #mypagecolumn .have{ margin: 0 0; padding: 2% 2% 2% 10%; color:#000; font-wight:bold; font-size:16px; background: url(legacy-pc-img-icon-icon_head.png) no-repeat 1% 50%; } #mypagecolumn .d_have{ margin: 0 0; padding: 2% 2% 2% 10%; color:#000; font-wight:bold; font-size:16px; background: url(legacy-pc-img-icon-icon_head.png) no-repeat 1% 50%; } /*段落 -----------------------------------------------*/ .p_waku { margin: 10px auto; padding: 10px; background: #fff; border: 1px solid #ccc; } .p_waku1 { margin: 10px auto; padding: 10px; background:#f6f6f6; } .p_waku2 { margin: 10px auto; padding: 10px; background: #fff; border: 1px solid #ccc; } .p_waku3 { margin: 10px auto; padding: 10px; background: rgb(235,246,255); !important; } /*ページビュー -----------------------------------------------*/ .bg_pgnav{background:#f6f6f6;line-height:1.5rem;text-align:center;padding:5px;} .pg_nav{text-align: right;margin:5px 5px 10px 5px;} .pg_nav a{color:#0073ea;} /*ページ件数 -----------------------------------------------*/ .pg_num{display:inline-block;float:left;margin: 10px 0;padding: 0} /*共通指定ここまで----------------------------*/ /* ----------------------------------------------- ログイン -----------------------------------------------*/ #mypagecolumn .loginarea { width: 46%; margin: 2% 1%; padding: 1%; float:left; min-height: 420px; box-shadow:0 2px 4px #ccc; -webkit-box-shadow:0 2px 4px #ccc; -moz-box-shadow:0 2px 4px #ccc; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; } #mypagecolumn .loginarea .inputtext { margin: 5% auto; } #mypagecolumn .loginarea .inputtext02 { margin: 5% auto 0 auto; font-size: 90%; float:left; } #mypagecolumn .loginarea .inputbox { width: 90%; margin: 3% auto; padding: 5%; background: #f6f6f6; } #mypagecolumn .loginarea .inputbox .passwd { margin: 15px 0 0 0; } #mypagecolumn .loginarea .inputbox .box250 { width: 69%; margin: 5px 0 0 0; padding: 5px; border: 1px solid #ccc; } #mypagecolumn .loginarea .inputbox .box275 { width: 69%; margin: 5px 0 0 0px; padding: 5px; border: 1px solid #ccc; position:relative; left:23px; } #mypagecolumn .loginarea .inputbox02 { width: 460px; margin: 15px auto 0 auto; padding: 15px 20px; text-align: center; } /* ----------------------------------------------- マイページボタン -----------------------------------------------*/ /*共通 -----------------------------*/ /*戻るボタン*/ .btn_rpst3_1{ width: 25%; margin: 20px 0 10px 10px; padding: 0px 3px; display: inline-block; font-size: 0.85em; background: #333; } .btn_rpst3_2 { width: 25%; float: left; font-size: 0.85em; background: #ffffff; } .btn_mgprev{ margin: 0; padding: 0; text-align: left; } .btn_mgprev a { margin: 10px 0; font-size: 15px; color: #333 !important; height: 25px; padding: 10px 5px 0 30px; display: block; text-decoration: none; background: url(legacy-pc-img-icon-icon_prev.png) no-repeat 2% 50%; } .btn_mgprev a:hover{ text-decoration:none; opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1; } /*定期コース申込詳細 -----------------------------*/ /*ボタンエリア*/ #mypagecolumn .course_dt { margin: 0; padding: 0; float: right; position: relative; top: -5px; } #mypagecolumn .course_dt span { display: inline-block; padding:0; margin: 0 auto; } /*スキップ、一時停止、解約*/ #mypagecolumn .gbtn{padding:3px; cursor: pointer;width: 100px;text-align: center;} #mypagecolumn .gbtn a{ padding:3px; /* text-shadow: rgb(76, 76, 76) 2px 1px 2px; */ display: block; margin: 0 auto; cursor: pointer; font-weight: normal; font-size: 100%; -webkit-border-radius: 1px; text-decoration: none; border: 1px solid #ddd; position: relative; color: #313131; /*background*/ background-color: #f1f1f1; background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1)); background: -webkit-linear-gradient(top,#fff,#f1f1f1); background: -moz-linear-gradient(top,#fff,#f1f1f1); background: -ms-linear-gradient(top,#fff,#f1f1f1); background: -o-linear-gradient(top,#fff,#f1f1f1); background: linear-gradient(top,#fff,#f1f1f1); -pie-background: linear-gradient(top,#fff,#f1f1f1); /*border-radius*/ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; /*box-shadow*/ -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1); -o-box-shadow: 0 1px 1px rgba(0,0,0,.1); box-shadow: 0 1px 1px rgba(0,0,0,.1); } #mypagecolumn .gbtn a:hover, #mypagecolumn .bbtn a:hover {opacity:0.5; /*border-radius*/ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } /*閉じるボタン*/ #mypagecolumn .bbtn { padding: 3px; cursor: pointer; width: 100px; text-align: center; margin: 0 auto; } #mypagecolumn .bbtn a {padding:3px; /* text-shadow: rgb(76, 76, 76) 2px 1px 2px; */ display: block; margin: 0 auto; cursor: pointer; font-weight: normal; font-size: 100%; -webkit-border-radius: 1px; text-decoration: none; border: 1px solid #ddd; position: relative; color: #fff; background-color: #4a89be; /*border-radius*/ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; /*box-shadow*/ -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1); -o-box-shadow: 0 1px 1px rgba(0,0,0,.1); box-shadow: 0 1px 1px rgba(0,0,0,.1); } #mypagecolumn input .regbtn{ display: block; margin: 0 auto; padding:3px; cursor: pointer; font-weight:600; font-size: 100%; text-decoration: none; white-space: normal; border: double 5px #f6f6f6; -webkit-border-radius: 1px; position: relative; color:#666; text-decoration:none; white-space: normal; /*border-radius*/ -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; /* border-image*/ border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; /*background*/ background: #ddd; background: -moz-linear-gradient(top, #ddd 0%, #e8e8e8 100%); background: -webkit-linear-gradient(top, #ddd 0%,#e8e8e8 100%); background: linear-gradient(to bottom, #ddd 0%,#e8e8e8 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddd', endColorstr='#e8e8e8',GradientType=0 ); } /*変更するボタン(サイクル、希望日、支払い方法)*/ .mouosikomi_tb input[type="button"] { width: 100px; padding: 3px; text-decoration: none; border: 1px solid #ddd; position: relative; color: #313131; display: block; margin: 0 auto; cursor: pointer; font-weight: normal; font-size: 100%; white-space: normal; /*border-radius*/ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; /*background*/ background-color: #f1f1f1; background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1)); background: -webkit-linear-gradient(top,#fff,#f1f1f1); background: -moz-linear-gradient(top,#fff,#f1f1f1); background: -o-linear-gradient(top,#fff,#f1f1f1); background: -linear-gradient(top,#fff,#f1f1f1); -pie-bacms-linear-gradient(top,#fff,#f1f1f1); background: kground: linear-gradient(top,#fff,#f1f1f1); /*box-shadow*/ -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1); -o-box-shadow: 0 1px 1px rgba(0,0,0,.1); box-shadow: 0 1px 1px rgba(0,0,0,.1); } /*お届け先リスト -----------------------------*/ /*新規追加ボタン*/ #mypagecolumn .del_newbox{ background: #f0f0f0; border: 1px solid #ddd; padding: 2%; margin:0 auto 20px auto; line-height:160%; overflow: hidden; } #mypagecolumn .deliv_newbt{ width: 260px; margin:0 0 10px 0; float: right; position: relative; top: 3px; right:10px; text-align:center; background-color: #4a89be; border: 1px solid #ddd; /*border-radius*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; /*box-shadow*/ -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1); -o-box-shadow: 0 1px 1px rgba(0,0,0,.1); box-shadow: 0 1px 1px rgba(0,0,0,.1); } #mypagecolumn .deliv_newbt a { margin: 0; padding: 10px 20px; min-width: 100px; display: block; font-weight: normal; color: #fff; text-decoration: none; } #mypagecolumn .deliv_newbt a:hover{ background: #61aeef; color:#fff; } /*変更・削除ボタン*/ #mypagecolumn .del_bt { width: 100px; height: 0; margin: 0 auto 25px auto; padding: 0; font-size: 1em; text-align: center; line-height: 0; clear: both; } #mypagecolumn .del_bt a { margin: 0; padding:15px 0; display: block; text-decoration:none; border: 1px solid #ddd; position: relative; color: #313131; background-color: #f1f1f1; border-radius: 2px; background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1)); background: -webkit-linear-gradient(top,#fff,#f1f1f1); background: -moz-linear-gradient(top,#fff,#f1f1f1); background: -ms-linear-gradient(top,#fff,#f1f1f1); background: -o-linear-gradient(top,#fff,#f1f1f1); background: linear-gradient(top,#fff,#f1f1f1); /*border-radius*/ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; /*box-shadow*/ -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1); -o-box-shadow: 0 1px 1px rgba(0,0,0,.1); box-shadow: 0 1px 1px rgba(0,0,0,.1); } #mypagecolumn .del_bt a:hover{ color:#fff; text-decoration:none; background:#d96040; border-radius: 2px; border: 1px solid #ddd; } /*ポイント・お気に入り -----------------------------*/ /*詳細ボタン*/ #mypagecolumn .btn_fv { width: 80px; height: 0; margin: 0 auto 25px auto; padding: 0; font-size: 0.85em; text-align: center; line-height: 0; clear: both; } #mypagecolumn .btn_fv a { margin: 0; padding:10px 0; display: block; text-decoration:none; border: 1px solid #ddd; position: relative; color: #313131; background-color: #f1f1f1; border-radius: 2px; background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1)); background: -webkit-linear-gradient(top,#fff,#f1f1f1); background: -moz-linear-gradient(top,#fff,#f1f1f1); background: -ms-linear-gradient(top,#fff,#f1f1f1); background: -o-linear-gradient(top,#fff,#f1f1f1); background: linear-gradient(top,#fff,#f1f1f1); } #mypagecolumn .btn_fv a:hover{ color:#fff; text-decoration:none; background:#d96040; border-radius: 2px; border: 1px solid #ddd; } /*お気に入り -----------------------------*/ /*チェックしたアイテムを一括削除ボタン*/ #mypagecolumn .btn_fv2 { width: 240px; margin: 0 auto; font-size: 0.85em; text-align: center; line-height: 0; float:right; } #mypagecolumn .btn_fv2 a { margin: 0 auto ; padding:15px 0; display: block; text-decoration:none; border: 1px solid #ddd; position: relative; color: #313131; background-color: #f1f1f1; border-radius: 2px; background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1)); background: -webkit-linear-gradient(top,#fff,#f1f1f1); background: -moz-linear-gradient(top,#fff,#f1f1f1); background: -ms-linear-gradient(top,#fff,#f1f1f1); background: -o-linear-gradient(top,#fff,#f1f1f1); background: linear-gradient(top,#fff,#f1f1f1); } #mypagecolumn .btn_fv2 a:hover{ color:#fff; text-decoration:none; background:#d96040; border-radius: 2px; border: 1px solid #ddd; } /*購入履歴、定期申込一覧 -----------------------------*/ /*詳細エリア*/ .list_area { margin: 0 auto; padding:2%; width: 100%; } .list_area ul { width: 100%; display: table; } .list_area ul li { display: table-cell; overflow: hidden; } .list_area ul li a { color: #555; } /*詳細ボタン*/ .mg_dtbtn { float: left; height: 40px; padding: 0 3px; width: 90%; line-height: 1rem; cursor: pointer; font-weight: noramal; font-size: 100%; letter-spacing: 0.002rem; text-decoration: none; position: relative; letter-spacing: 0.002rem; text-decoration: none; border: 1px solid #ccc; /*background*/ background-color: #f1f1f1; background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1)); background: -webkit-linear-gradient(top,#fff,#f1f1f1); background: -moz-linear-gradient(top,#fff,#f1f1f1); background: -ms-linear-gradient(top,#fff,#f1f1f1); background: -o-linear-gradient(top,#fff,#f1f1f1); background: linear-gradient(top,#fff,#f1f1f1); -pie-background: linear-gradient(top,#fff,#f1f1f1); /*border-radius*/ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; /*box-shadow*/ -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1); -o-box-shadow: 0 1px 1px rgba(0,0,0,.1); box-shadow: 0 1px 1px rgba(0,0,0,.1); } /*お届け先変更ボタン*/ .mg_dtbtn2 { float: right; height: 40px; width: 80%; margin-right: 8px; padding: 0; line-height: 1rem; cursor: pointer; color:#fff; font-weight: noramal; font-size: 90%; letter-spacing: 0.002rem; text-decoration: none; border: 1px solid #ccc; position: relative; background-color: #666; /*border-radius*/ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; /*box-shadow*/ -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1); -o-box-shadow: 0 1px 1px rgba(0,0,0,.1); box-shadow: 0 1px 1px rgba(0,0,0,.1); } .mg_dtbtn:hover,.mg_dtbtn2:hover,mg_dtbtn3:hover{ color:#fff; text-decoration:none; background:#d96040; border-radius: 2px; border: 1px solid #ddd; /*border-radius*/ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .mg_dtbtn3 { width: 50%; margin: 0 auto; padding: 5px 20px; line-height: 1rem; text-align: center; cursor: pointer; font-weight: noramal; font-size: 100%; letter-spacing: 0.002rem; -webkit-border-radius: 1px; text-decoration: none; border: 1px solid #ccc; position: relative; background-color: #f1f1f1; background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1)); background: -webkit-linear-gradient(top,#fff,#f1f1f1); background: -moz-linear-gradient(top,#fff,#f1f1f1); background: -ms-linear-gradient(top,#fff,#f1f1f1); background: -o-linear-gradient(top,#fff,#f1f1f1); background: linear-gradient(top,#fff,#f1f1f1); -pie-background: linear-gradient(top,#fff,#f1f1f1); -moz-border-radius: 10px; border-radius: 10px; } .mg_dtbtn3 a{ color:#555;} .btn_dt { font-size: 90%; text-align: center; line-height: 1rem; display: inline-block; } .btn_dt a { color: #212121; margin: 0; padding: 7px 12px 5px 12px; display: block; text-decoration: none; border: 1px solid #ddd; position: relative; color: #333; background-color: #f1f1f1; border-radius: 2px; background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1)); background: -webkit-linear-gradient(top,#fff,#f1f1f1); background: -moz-linear-gradient(top,#fff,#f1f1f1); background: -ms-linear-gradient(top,#fff,#f1f1f1); background: -o-linear-gradient(top,#fff,#f1f1f1); background: linear-gradient(top,#fff,#f1f1f1); -pie-background: linear-gradient(top,#fff,#f1f1f1); -webkit-border-radius: 4px; -moz-border-radius: 4x; border-radius: 4px; text-align: center; cursor: pointer; } .btn_dt a:hover{ opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1;} .btn_ch { font-size: 90%; text-align: center; line-height:1rem; display: inline-block; } .btn_ch a { color: #fff; margin: 0; padding: 7px 5px 5px 5px; display: block; text-decoration: none; border: 1px solid #ddd; background:#666; -webkit-border-radius: 4px; -moz-border-radius: 4x;#mypagecolumn .reglar_list table td border-radius: 4px; text-align: center; } .btn_ch a:hover{ opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1;} .reg_btn{ padding: 6px 12px 5px 12px; display: inline-block; line-height:1rem; margin: 0 auto; cursor: pointer; font-weight:normal; font-size: 90%; -webkit-border-radius: 1px; text-decoration: none; border: 1px solid #ddd; position: relative; color: #333; background-color: #f1f1f1; border-radius: 2px; background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1)); background: -webkit-linear-gradient(top,#fff,#f1f1f1); background: -moz-linear-gradient(top,#fff,#f1f1f1); background: -ms-linear-gradient(top,#fff,#f1f1f1); background: -o-linear-gradient(top,#fff,#f1f1f1); background: linear-gradient(top,#fff,#f1f1f1); -pie-background: linear-gradient(top,#fff,#f1f1f1); -moz-border-radius: 4x; border-radius: 4px; } .reg_btn:hover{ opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1;} /*戻るボタン*/ .mypage_back { border-top: 1px solid #ccc; margin: 0 auto; padding: 10px 0; } .mg_btnarea{ background:#f0f0f0;padding:3% 10%;margin:0 auto;border:#ccc; } /*支払方法変更,退会する ---------------------------*/ /*決定ボタン*/ .mg_newbtn{ list-style: none; margin: 4% auto; padding: 0; width:350px; font-size: 14px; line-height: 40px; text-align: center; background: #4a89be; } .mg_newbtn a { display: block; height: 40px; padding: 0px ; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color:#fff; } .mg_newbtn a:hover{ text-decoration:none; opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1; } /*退会ボタン(NO)*/ .refusal_no { list-style: none; margin: 2% auto; padding: 0; /* width: 350px; */ font-size: 14px; line-height: 30px; text-align: center; clear: both; border: 1px solid #ddd; position: relative; color: #313131; background-color: #f1f1f1; border-radius: 2px; background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1)); background: -webkit-linear-gradient(top,#fff,#f1f1f1); background: -moz-linear-gradient(top,#fff,#f1f1f1); background: -ms-linear-gradient(top,#fff,#f1f1f1); background: -o-linear-gradient(top,#fff,#f1f1f1); background: linear-gradient(top,#fff,#f1f1f1); -pie-background: linear-gradient(top,#fff,#f1f1f1); } .refusal_no a { display: block; height: 30px; padding: 0px ; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color:#333; } .refusal_no a:hover{ text-decoration:none; opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1; } .mp_graybt{width:180px;padding:5px;color:#444;background:#ccc;text-align:center;} /*カード情報 -----------------------------------------------/* 変更ボタン*/ .cardch_bt { width: 200px; height: 0; margin: 0 5px 25px auto; padding: 0; font-size: 1em; text-align: center; line-height: 0; clear: both; } .cardch_bt a { margin: 0; padding:10px 0; height:10px; display: block; text-decoration:none; border: 1px solid #ddd; color: #313131; /*border-radius*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; /*backgroun*/ background-color: #f1f1f1; background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1)); background: -webkit-linear-gradient(top,#fff,#f1f1f1); background: -moz-linear-gradient(top,#fff,#f1f1f1); background: -ms-linear-gradient(top,#fff,#f1f1f1); background: -o-linear-gradient(top,#fff,#f1f1f1); background: linear-gradient(top,#fff,#f1f1f1); /*box-shadow*/ -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1); -o-box-shadow: 0 1px 1px rgba(0,0,0,.1); box-shadow: 0 1px 1px rgba(0,0,0,.1); } .cardch_bt a:hover{ color:#fff; text-decoration:none; background:#d96040; border: 1px solid #ddd; /*border-radius*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } /*新規ボタン*/ .cardnew_bt{ margin:0 0 10px 0; float: right; position: relative; top: -5px; background: #4a89be; border: 1px solid #ddd; /*border-radius*/ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; /*box-shadow*/ -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1); -o-box-shadow: 0 1px 1px rgba(0,0,0,.1); box-shadow: 0 1px 1px rgba(0,0,0,.1); } .cardnew_bt a { margin: 0; padding: 10px 20px; min-width: 100px; display: block; font-weight:normal; color: #fff; text-decoration: none; } .cardnew_bt a:hover{ background: #61aeef; color:#fff; } /* ----------------------------------------------- My Page Navigation*/ #mypagecolumn #mynavarea { /*margin: 10px 0; padding: 1%;*/ overflow:hidden; display: inline-block; width:20%; } /*マイページナビタイトル*/ #mypagecolumn .titleCommon { /*background:#666;*/ } #mypagecolumn .titleCommon.sideColumn { margin: 30px 0 0 0; padding: 3px 0 3px 3px; font-size: 15px; line-height: 1.5rem; font-weight: 700; color: #444; border-bottom: 1px solid #ccc; white-space: nowrap; font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif; } /*マイページナビボタン*/ #mypagecolumn #mynavarea ul { margin:0 auto; padding:0; border-bottom: none; } #mypagecolumn #mynavarea li { margin: 0 auto; padding: 5px 0; display: block; text-align: left; font-size: 14px; font-weight: normal; border-bottom: 1px dotted #ccc; background: none; box-shadow: none; } #mypagecolumn #mynavarea li a { position:relative; margin: 0 auto; padding: 8px 0 10px 5px; display:block; width: 95%; height:auto; color: #444; text-decoration: none; background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) no-repeat 98% 50%; } #mypagecolumn #mynavarea li a:hover { text-decoration:none; background-color:#eee; color:#333; font-weight:bold; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; } #mypagecolumn #mynavarea .mynav li { overflow: hidden; padding:5px 0; border-bottom: 1px solid #eee;} #mypagecolumn #mynavarea ul.mynav p.menu { float: left; margin-top: 1px; padding: 15px 0; font-weight: normal; cursor: pointer; font-size: 110%; line-height: 1.3rem; } #mypagecolumn #mynavarea .nav_bt { float: right; margin: 1px 0 1px 8px; padding: 10px 0; text-align: left; cursor: pointer; } #mypagecolumn #mynavarea .nav_bt a { color: rgb(255, 255, 255); background: #666; /* Old browsers */ display: block; width: 115px; margin: 0 auto; padding: 5px 0 3px 5px; cursor: pointer; font-weight: normal; font-size: 100%; /* -webkit-box-shadow: 2px 2px 1px #D4D4D4; */ text-decoration: none; white-space: normal; border: double 5px #f6f6f6; -webkit-border-radius: 5px; position: relative; letter-spacing: 0.001rem; } #mypagecolumn #mynavarea .nav_bt a::after { display: block; content: ''; position: absolute; top: 30%; right: 5%; width: 6px; height: 6px; font-weight: bold; border-right: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #mypagecolumn .pg_num1 { /*padding: 10px;*/ overflow: hidden; } #mypagecolumn #mynavarea .sidememo{ font-size:13px; letter-spacing:0.0001em; font-weight:normal; margin-left:5px; } /* ----------------------------------------------- welcome*/ #mypagecolumn .welcome{ font-weight:bold; font-size: 14px; line-height: 1.5rem; float:right; text-align:right; font-weight:normal; } #mypagecolumn .welcome span{color:#d96040;padding: 0 5px;} #mypagecolumn .welcome .w_point{border:1px solid #d96040background:#d96040;margin: 3px 0;padding:3px;text-align:center;color:#fff;} #mypagecolumn .welcome .re_point{background:#d96040;color:#fff;font-size:13px;padding:0 10px;letter-spacing:0.001rem;text-align:center;display:inline-block;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;} /*購入履歴・定期申込一覧*/ .mptxt_area{padding:10px 0;line-height:1.5em;} .new_area{margin:10px 0;overflow:hidden;} .new_area ul { width: 97%; display: table; border: #ff5c5c 2px solid; background: #ffe5e5; margin: 10px auto; padding: 10px; overflow: hidden; } .new_area ul li{display:table-cell;} #mycontentsarea table.blue_tbl th { text-align: left; background: #4a89be; color:#fff; font-weight:normal; font-size:100%; } #mypagecolumn .history_list { margin: 0 auto; padding: 0; overflow: hidden; clear: both; } #mypagecolumn .history_list table{ width: 100%; margin: 0 auto; padding:0; border-collapse: collapse; text-align: left; } #mypagecolumn .reglar_list table{ width: 100%; margin-top: 10px; padding:0; border-collapse: collapse; text-align: left; } #mypagecolumn .history_list table th, #mypagecolumn .reglar_list table th { padding: 5px 8px; border-bottom: none; background: #666; font-weight: normal; color: #fff; /* box-shadow: 1px 2px 5px #D6D6D6; */ webkit-box-shadow: 1px 2px 5px #D6D6D6; -moz-box-shadow: 1px 2px 5px #D6D6D6; } #mypagecolumn .history_list table td { padding: 8px; /* border-right: 1px solid #ccc; */ border-bottom: 1px solid #ccc; } /* マイページ発送済みアイコン*/ #mypagecolumn .history_list table p object { height:20px; vertical-align: text-top; } #mypagecolumn .reglar_list table td { padding: 0 8px; line-height: 1.5rem; border-bottom:none; } #mycontentsarea .reglar_list hr { border: none; border-bottom: 1px solid #aaa; margin-top: 10px; /* padding: 0; */ } #mycontentsarea .mouosikomi_tb{margin:0 auto 20px auto;} #mycontentsarea .mouosikomi_tb table th{ width:100%; text-align: left; background: #4a89be; color:#fff; font-weight:normal; font-size:100%; border-bottom:1px solid #ccc; } #mycontentsarea .mouosikomi_tb table td { /*width: 50%;*/ border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; padding:10px; } #mycontentsarea .mouosikomi_tb table td.righttd{ text-align: right; border-right: 1px solid #ccc;} #mycontentsarea .mouosikomi_tb table td:last-child { border-right:none; } .mouosikomi_tb dl{margin:0 auto;padding:0;} .mouosikomi_tb dl dt{padding:10px 0;border-bottom:1px solid #ccc;clear:both;display:block;} #mycontentsarea .mouosikomi_tb2{margin:20px auto;} #mycontentsarea .mouosikomi_tb2 table th { padding: 5px; background: #e7edee; color: #333; font-weight: normal; font-size: 100%; /* border-bottom: 3px solid #aaa; */ } #mycontentsarea .mouosikomi_tb2 table td { border-bottom: 1px solid #ccc; padding: 10px; } #mycontentsarea .mouosikomi_tb2 table td:last-child { border-right:none; } #mycontentsarea hr { border: none; border-bottom: 1px solid #aaa; margin: 0; padding: 0; } /* ----------------------------------------------- 定期申込一覧*/ #mycontentsarea .regular_list dl{width:100%;margin:0 auto;padding: 10px 0;} #mycontentsarea .regular_list dl dt ul { margin: 0 auto; padding: 0 8px; border-bottom: 5px solid #d4d4d4; background: #f0f0f0; font-weight: normal; text-align: center; } #mycontentsarea .regular_list dl dd{border-bottom:1px solid #ccc;} #mycontentsarea .regular_list dl dd ul { padding:0;margin: 0 auto;} #mycontentsarea .regular_list dl dt ul li { display: inline-block;width:19.3%;padding:10px 0;} #mycontentsarea .regular_list dl dd ul li { display: inline-block;width:19.3%;padding:10px 0;} /*定期コース申込詳細*/ .app_list{width:100%;} .app_list table{} .app_list td{} .app_list th{ padding: 5px 8px; border-bottom: 3px solid #4a89be; background: #f0f0f0; font-weight: normal; } .totalbg { background-color: #fef0f0; border: 5px solid #ffd4d4; } .righttd { text-align: right; border-right: 1px solid #ccc; } .appli_dt{ border:1px solid #aaa; mamrgin:5%; padding:3% 3% 0 3%; margin:0 auto; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; background:#fff; box-shadow: 1px 2px 5px #D6D6D6; webkit-box-shadow: 1px 2px 5px #D6D6D6; -moz-box-shadow: 1px 2px 5px #D6D6D6; } .appli_dt h3 {padding:0 0 0 30px;} .appli_dt .appli_head { background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)0% 50% no-repeat; text-decoration: none; margin: 0 0 20px 0; } .mouosikomi_tb .flr{float:right;} /*定期購入　サイクル変更 希望日変更 お届け先変更*/ #cycle_change_dialog table, #nextdate_change_dialog table, #deliv_list_table {width:100%;border-collapse: collapse;} /*サイクル変更*/ #cycle_change_dialog table th{ width:100%; text-align: left; position: relative; color: #313131; font-weight:normal; font-size:120%; padding:5px 5px; } #cycle_change_dialog table td{ width:100%; padding:10px 0; } #cycle_change_dialog #set_date1, #cycle_change_dialog #set_date2, #cycle_change_dialog #set_date3 { background: rgb(235,246,255); padding: 10px 20px; } #cycle_change_dialog table input[type="radio"]{ margin:0 auto; padding:0; text-align:center; font-size:large; position:background:#fff; } #cycle_change_dialog p{padding:0 0 10px 0;} #cycle_change_dialog #set_date1 label, #cycle_change_dialog #set_date2 label, #cycle_change_dialog #set_date3 label {margin-left:10px;font-size:110%;} #cycle_change_dialog select{ font-size:1rem; margin-right:5px; float:none; background:#fff;} /*希望日変更*/ #nextdate_change_dialog table th{ width:100%; text-align: left; position: relative; font-size:120%; font-weight:normal; padding:10px 5px; } #nextdate_change_dialog table td { width:100%; padding:10px 10px 0 10px; font-size:100%; background: rgb(235,246,255); padding: 10px 20px; } #nextdate_change_dialog select{ font-size:1rem; margin-right:5px; float:none; width:300px;} /*お届け先変更*/ #deliv_list_table th{ text-align: left; position: relative; color: #313131; font-weight:normal; font-size:120%; padding:10px 5px; } #deliv_list_table td{ padding:10px; border-bottom:1px solid #ccc; } #deliv_list_table td .other_deliv_bg{ background: rgb(235,246,255); padding: 10px 20px; } #deliv_list_table input[type="radio"] {margin:0 auto;padding:0;text-align:center;font-size:large;position: relative; left: 30px;} /* ----------------------------------------------- 購入履歴/詳細*/ #mycontentsarea h4 { margin: 20px 0 0 0; font-size:14px; font-weight:normal; } #mycontentsarea table th { } #mycontentsarea p.myconditionarea { clear: both; margin: 0 auto 20px auto; padding: 10px; /* border: solid 1px #333; */ /*background-color: #f6f6f6;*/ line-height: 1.5rem;} #mycontentsarea p.delivempty { clear: both; margin: 15px auto; padding: 20px; border: solid 1px #CCC; text-align: center; } .myconditionarea { box-shadow: 1px 2px 5px #ccc; webkit-box-shadow: 1px 2px 5px #ccc; -moz-box-shadow: 1px 2px 5px #ccc; padding:0; background: #f6f6f6; } .myconditionarea p{line-height:1.5rem;} #mypagecolumn .myconditionarea table { width: 100%; margin: 0 auto; padding: 0; background: #fff; } #mypagecolumn .myconditionarea th { background: #f6f6f6; padding: 10px; width: 30%; border-bottom: 1px dotted #ddd; color: #666; font-weight: normal; } #mypagecolumn .myconditionarea td { height: 30px; padding: 0 10px; border-bottom: 1px dotted #ddd; }.myconditionarea dt:last-child {border:0;} .reg_change{margin:0 auto;padding:0;} .reg_change ul{width:100%;margin:0 auto;text-align:center;} .reg_change ul li{display:inline-block;width:32.8%;} .reg_change ul li input[type="button"] { width:100%; padding: 10px; text-decoration: none; border: 1px solid #ddd; position: relative; color: #fff; border-radius: 2px; background: #4a89be; display: block; margin: 0 auto; cursor: pointer; font-weight: normal; font-size: 100%; white-space: normal; -webkit-border-radius: 1px; white-space: normal; } /* ----------------------------------------------- 会員登録内容変更/退会 */ #mypagecolumn .mg_change table { width: 100%; margin: 0 auto 10px auto; padding: 0; border-collapse: collapse; text-align: left; } #mycontentsarea .mg_change th { text-align: left; color:#555; background:#fff; border-bottom:1px solid #ccc; } #mycontentsarea .box120 { width: 120px; padding: 5px; border: 1px solid #ccc; } #mycontentsarea .box60 { width: 60px; padding: 5px; border: 1px solid #ccc; } #mycontentsarea .box300 { width: 300px; margin: 5px 0 0 0; padding: 5px; border: 1px solid #ccc; } #mycontentsarea .box260 { width: 260px; margin: 5px 0 0 0; padding: 5px; border: 1px solid #ccc; } #mycontentsarea .zipimg img { margin: 5px 0 0 0; } #mycontentsarea #completetext { width: 90%; margin: 3% auto 0 auto; padding: 4%; border: 2px solid #ccc; } div#completetext p.changetext { padding: 40px 0; text-align: center; } /* ----------------------------------------------- お届け先リスト一覧*/ .deliv_list{ margin: 0 0 10px 0; overflow: hidden; padding-bottom: 5px; } .deliv_list h3 { padding: 0 0 0 30px; } .deliv_head{ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)0% 50% no-repeat; text-decoration: none; margin: 0 0 10px 0; } #mypagecolumn .deliv_tb{margin-top:20px;} #mypagecolumn .deliv_tb table{margin-top:10px;} #mypagecolumn .deliv_tb th { background: #666; color: #fff; padding: 5px 10px; font-weight: normal; } /* ----------------------------------------------- カード情報*/ #mypagecolumn .card_tb{ margin:10px auto 30px auto; padding:0; overflow:hidden; } #mypagecolumn .card_tb table{ /*margin: 0 auto 20px auto;*/ } #mypagecolumn .card_tb table th { color: #666; padding: 0; font-weight: normal; background:#eee; } #mypagecolumn .card_tb table td{ background:#fff; padding:10px; color: #666; } .card_ttl { margin: 0; padding: 0; color: #555; overflow: hidden; } .card_ttl h3 { font-size:100%; display: inline-block; color: #4a89be; font-weight: normal; padding: 10px; } /*カード情報の追加・変更*/ .info_change{ margin: 0; font-size:100%; } #mypagecolumn .info_change table{ width: 100%; margin: 15px auto; border-collapse: collapse; text-align: left; font-size: 0.85rem; line-height: 1.5rem; } #mypagecolumn .info_change table th{ padding:15px 8px; border-bottom: 1px solid #ccc; background: #fff; color:#666; font-weight: normal; } #mypagecolumn .info_change table td{ padding:10px 8px; border-bottom: 1px solid #ccc; } /* ----------------------------------------------- ポイント*/ .use_point_area { margin: 5px 0; padding: 0; line-height: 150%; overflow:hidden; background: #fefefe; } #mypagecolumn .use_point_tb table {margin:0;border-collapse: collapse;} #mypagecolumn .use_point_tb th { background: #666; color: #fff; padding: 5px 10px; font-weight: normal; } #mypagecolumn .use_point_tb td { padding:10px 8px; border-bottom:0; line-height:1.5rem; border-right:1px solid #ccc; border-bottom:1px solid #ccc; } /*商品名*/ .pt_detail{width:100%;margin:0 auto;padding:0;} .pt_detail p{padding:0;margin:0 auto;} .pt_detail a{color:#333;font-size:14px;text-decoration:none;} .pt_detail a:hover,.pt_detail a img:hover{ font-size:14px; opacity:0.7; filter: alpha(opacity=70); /* ie lt 8 */ -ms-filter: "alpha(opacity=70)"; /* ie 8 */ -moz-opacity:0.7; /* FF lt 1.5, Netscape */ -khtml-opacity: 0.7; /* Safari 1.x */ zoom:1; text-decoration:underline; } .pt_detail a img{width:auto;height:14px;margin:0;padding:0;} /*ポイント利用・獲得*/ /*利用*/ .pt_use{color:#2c7fef;font-weight:600;} .pt_usebg{background:#ddeeff;color:#333;font-weight:bold;} /*付与*/ .pt_get{color:#e30000;font-weight:600;} .pt_getbg{background:#fde0e7;color:#333;font-weight:bold;} /*調整*/ .pt_adjust{color:#43a84c;font-weight:600;} .pt_adjustbg{background:#f2fbf2;color:#333;font-weight:bold;} /*失効*/ .pt_lose{color:#666666;font-weight:600;} .pt_losebg{background:#ededed;color:#333;font-weight:bold;} #mypagecolumn .use_point_tb td:last-child{ border-right:none; } /*総合計*/ #mypagecolumn .pr_s{font-size:12px;} /*備考吹き出し*/ #mypagecolumn .receipt_dt { color: #19283C; position: relative; line-height: 1.4; top: 100%; left: -13px; margin-top: 8px; padding: 10px; border: 1px solid #ccc; border-radius: 10px; background-color: #fff; box-shadow: 0 4px 6px rgba(4,0,0,.15); text-align: left; color: #333; font-size: 13px; font-weight: 400; z-index: 10;} #mypagecolumn .receipt_dt a{font-size:12px;color:#09F;} #mypagecolumn .receipt_dt:before { content: ''; display: block; position: absolute; top: -11px; left: 20px; width: 0; height: 0; border-top: none; border-right: 6px solid transparent; border-left: 6px solid transparent; border-bottom: 11px solid #cdcdcd; } #mypagecolumn .receipt_dt:after { content: ''; display: block; position: absolute; top: -9px; left: 20px; width: 0; height: 0; border-style: solid; border-width: 0 6px 6px 6px; border-top: none; border-right: 6px solid transparent; border-left: 6px solid transparent; border-bottom: 11px solid #fff; } /*閉じるボタン*/ #mypagecolumn .receipt_dt .bbtn{padding: 3px; cursor: pointer; width: 100px; text-align: center; margin: 0 auto;} #mypagecolumn .receipt_dt .bbtn a{padding: 3px; display: block; margin: 0 auto; cursor: pointer; font-weight: normal; font-size: 100%; -webkit-border-radius: 1px; text-decoration: none; border: 1px solid #ddd; position: relative; color: #fff; background-color: #4a89be; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1); -o-box-shadow: 0 1px 1px rgba(0,0,0,.1); box-shadow: 0 1px 1px rgba(0,0,0,.1); } .use_point_area li{ padding: 10px 0; border-bottom: 1px #999 dotted; } .point_list { margin: 0; padding: 0; overflow: hidden; width: 60%; } .point_list dl { margin: 0 auto 20px auto; /* margin-right: 15px; */ padding: 0; border: 1px solid #ccc; overflow: hidden; text-align: center; } .point_list dt{background:#f0f0f0;width:50%;float:left;padding:20px 0;} .point_list dd{background:#fff;width:50%;float:right;padding:20px 0;color:#C30;font-size:150%;} /* ----------------------------------------------- マイクーポン */ /*可能クーポン・詳細*/ .cpon{margin:0 auto;padding:0 0 20px 0;border-bottom:1px dotted #ccc;clear:both;} .cpon:last-child {border:0;} .area_coupon { padding: 0 0 10px 0; overflow:hidden; } #mypagecolumn .area_coupon table{margin:0 auto;padding:0;} #mypagecolumn .area_coupon table th { padding: 5px 8px; border-bottom:none; background: #666; font-weight: normal; color:#fff; } .qp_box { border: 1px solid #666; margin: 10px 0 0 0; width: 47%; display: inline-block; } .qp_ttl { background: #666; color: #fff; padding: 10px; font-size: 100%; font-weight: normal; } .qp_box p { padding-right: 10px; padding-left: 10px; padding-bottom: 10px; line-height: 1.3rem; } .qp_dtl { display: inline-block; width: 50%; margin-left: 20px; position: relative; top: 5px; float: right; } .qp_dtl h3{font-size:100%;} .qp_dtl ul{padding:0;margin:0 auto;} .qp_dtl ul li{border-bottom:1px solid #ccc;padding:5px;text-aling:left;} .expiration_date_diff{color:#C30;font-weight:normal;font-size:18px;} /* ----------------------------------------------- 友達キャンペーン*/ .friend_area{margin:0 auto;padding-bottom:20px;} .fr_intro{padding:10px 0;line-height:200%;} .fr_input{width:400px;padding:3px 5px;} .friend_area ul{margin:0 auto;padding:0;} .friend_area ul li { display: inline-block; width: 32.8%; margin-top: 10px; } .friend_area ul li a{ text-decoration: none; color:#555; border: 1px solid #eee; text-align: center; padding: 10px 0; margin: 10px 0; display: block; border: 1px solid #ccc; position: relative; background-color: #f1f1f1; background: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1)); background: -webkit-linear-gradient(top,#fff,#f1f1f1); background: -moz-linear-gradient(top,#fff,#f1f1f1); background: -ms-linear-gradient(top,#fff,#f1f1f1); background: -o-linear-gradient(top,#fff,#f1f1f1); background: linear-gradient(top,#fff,#f1f1f1); -pie-background: linear-gradient(top,#fff,#f1f1f1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1); -o-box-shadow: 0 1px 1px rgba(0,0,0,.1); box-shadow: 0 1px 1px rgba(0,0,0,.1); } .friend_area ul li a:hover { background: #d96040; color:#fff; } .fr_attend{line-height:200%;border:1px dashed #ccc;padding:10px;} /* ----------------------------------------------- お気に入り*/ #fv_list{width:100%;margin:0 auto;padding:0;clear:both;} #fv_list dl { display: inline-block; width: 19.3%; margin:10px 0; } #fv_list dl dt {padding:1%;} #fv_list dl dt img{margin:0 auto;width:100%;} @-moz-document url-prefix() { .fv_list dl dt img{margin:0 auto;width:100%;} } #fv_list p{line-height:1.2rem;padding-top:5px;font-size:12px;} #fv_list p a{color:#555;text-decoration: none;} #fv_list p .ft_bold{font-weight:bold;} .all_delete{background:#eee;padding:10px;overflow:hidden;} .allcheck{display: inline-block;position: relative;top: 0;left: 5px;} /* ----------------------------------------------- お支払い方法*/ .order_list{padding:15px 0;margin:0;height: 50px;} .payment_info{ margin-top: 10px; padding: 3%; border: 1px solid #ccc; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } .payment_info h3{padding:5px 0;} .payment_info ul{list-syle:none;margin:0;padding:0;} .payment_info ul li{border-bottom:1px solid #ccc;padding:5px 0;} .payment_info ul li p{padding:0 10px 0 30px;} .credit_info{margin-top:20px;margin-bottom:1px;} .credit_info h3 { padding: 5px 10px; margin-top: 10px; background:#666; color:#fff; } .credit_info dl { border-bottom:1px solid #ccc; } .credit_info dt { float:left; width:120px; background:#f0f0f0; } .credit_info dd { margin-left:130px; } #mypagecolumn .order_info{ margin:0 0 5px 0; } #mypagecolumn .order_info table {margin:0;border-collapse: collapse;} #mypagecolumn .order_info th { background: #666; color: #fff; padding: 5px 10px; font-weight: normal; } #mypagecolumn .order_info td { padding:0 8px; border-bottom:0; font-weight: normal; line-height:1.5rem; } #mypagecolumn .order_info hr { border: none; border-bottom: 1px solid #d2d2d2; margin: 0; padding: 0; } /*お支払方法>カード情報入力*/ #mypagecolumn .credit_info table { margin-top:0;border-collapse: collapse; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; } #mypagecolumn .credit_info th { background: #fff; color: #555; padding: 5px 10px; font-weight: normal; border-bottom:1px solid #ccc; } #mypagecolumn .credit_info td { padding:10px 8px; border-bottom:0; font-weight: normal; line-height:1.5rem; border-bottom:1px solid #ccc; } #mypagecolumn .credit_info hr { border: none; border-bottom: 1px solid #d2d2d2; margin: 0; padding: 0; } /*クレジット支払い確認・変更*/ .cd_ttl { font-size: 15px; padding: 10px 0 15px 0; } #card_change_card_list table { width: 100%; border-collapse: collapse; border-bottom: 1px solid #ccc; margin:0 auto 20px auto; } #card_change_card_list table th { width: 100%; text-align: left; position: relative; color: #313131; font-weight: normal; font-size: 120%; padding: 0; } #card_change_card_list table td { width:25％; padding: 8px 0; text-align: center; } #card_change_card_list table input[type="radio"]{ margin:0 auto; padding:0; text-align:center; font-size:large; position:background:#fff; } #card_change_card_list .cd_use { background: #2db312; border-radius: 3px; color: #fff; width: 60px; text-align: center; font-size: 12px; float: right; } #card_change_card_list .bg1{background:#f6f6f6;} #card_change_card_list .cd_ttl { margin: 10px auto; padding: 0 0 10px 0; font-size: 16px; } #card_change_card_list #set_date1, #card_change_card_list #set_date2, #card_change_card_list #set_date3 { height: 32px; } #card_change_card_list .set_off { background: #e3f0fc; padding: 0 10px; } #card_change_card_list .set_on { background: #ffe8e8; padding: 0 5px 0 10px; } #card_change_card_list #set_date1 p, #card_change_card_list #set_date2 p, #card_change_card_list #set_date3 p {font-size:14px;} #card_change_card_list #set_date1 label, #card_change_card_list #set_date2 label, #card_change_card_list #set_date3 label { margin-left: 10px; font-size: 15px; letter-spacing: 0.001rem; } #mypagecolumn .drop_bt { width: 100px; height: 30px; line-height: 20px; position: relative; font-size: 13px; right: 10px; color: #313131; display: inline-block; float: right; } .change_message{color: #fff; line-height: 1.5rem; text-align: center; background: #d23f3f; border-radius:60px; } .mypage_loading { background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) no-repeat center center; height: 100px; width: 100%; } /* ---------- css/captcha.css ---------- */ /** * captcha form css */ /*============================================*/ /* PC */ /*============================================*/ /* signup */ /*--------------------------------------------*/ ._p_captcha_pc_signup { width : 414px; background-color : #aaa; } ._p_captcha_pc_signup > .captcha_image { width : 400px; height : 100px; padding : 7px; } ._p_captcha_pc_signup > .captcha_form { border-style : solid; border-width : 0 2px 0; border-color : #aaa; padding : 0 5px 2px; } ._p_captcha_pc_signup > .captcha_form > .input_text { width : 280px; } ._p_captcha_pc_signup > .captcha_form > .reload_button { width : 94px; margin : 5px; padding : 6px; font-size : 0.85em; background : #333; color : #fff; } /*--------------------------------------------*/ /* login bloc */ /*--------------------------------------------*/ ._p_captcha_pc_login_bloc { } ._p_captcha_pc_login_bloc > .captcha_image { width : 286px; height : 72px; padding : 7px; } ._p_captcha_pc_login_bloc > .captcha_form { } ._p_captcha_pc_login_bloc > .captcha_form > .input_text { width : 200px; } ._p_captcha_pc_login_bloc > .captcha_form > .reload_button { width : 94px; margin : 5px; padding : 6px; font-size : 0.85em; background : #333; color : #fff; } /*--------------------------------------------*/ /* login */ /*--------------------------------------------*/ ._p_captcha_pc_login { background-color : #aaa; } ._p_captcha_pc_login > .captcha_image { width : 400px; height : 100px; padding : 7px; } ._p_captcha_pc_login > .captcha_form { border-style : solid; border-width : 0 2px 0; border-color : #aaa; padding : 0 5px 2px; } ._p_captcha_pc_login > .captcha_form > .input_text { width : 40em; } ._p_captcha_pc_login > .captcha_form > .reload_button { width : 94px; margin : 5px; padding : 6px; font-size : 0.85em; background : #333; color : #fff; } /*--------------------------------------------*/ /* creditcard_shopping */ /*--------------------------------------------*/ ._p_captcha_pc_creditcard_shopping { width : 414px; background-color : #aaa; } ._p_captcha_pc_creditcard_shopping > .captcha_image { width : 400px; height : 100px; padding : 7px; } ._p_captcha_pc_creditcard_shopping > .captcha_form { border-style : solid; border-width : 0 2px 0; border-color : #aaa; padding : 0 5px 2px; } ._p_captcha_pc_creditcard_shopping > .captcha_form > .input_text { width : 280px; } ._p_captcha_pc_creditcard_shopping > .captcha_form > .reload_button { width : 94px; margin : 5px; padding : 6px; font-size : 0.85em; background : #333; color : #fff; } /*--------------------------------------------*/ /* creditcard_mypage */ /*--------------------------------------------*/ ._p_captcha_pc_creditcard_mypage { width : 414px; background-color : #aaa; } ._p_captcha_pc_creditcard_mypage > .captcha_image { width : 400px; height : 100px; padding : 7px; } ._p_captcha_pc_creditcard_mypage > .captcha_form { border-style : solid; border-width : 0 2px 0; border-color : #aaa; padding : 0 5px 2px; } ._p_captcha_pc_creditcard_mypage > .captcha_form > .input_text { width : 280px; } ._p_captcha_pc_creditcard_mypage > .captcha_form > .reload_button { width : 94px; margin : 5px; padding : 6px; font-size : 0.85em; background : #333; color : #fff; } /* ---------- assets/css/slick.css ---------- */ /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* ---------- assets/css/style.css ---------- */ /*----------------------- reset -----------------------*/ html, body, div, span, applet, object, iframe, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; vertical-align: middle; font-weight: 200; } q::before, q::after, blockquote::before, blockquote::after { content: ""; content: none; } a { display: inline-block; } a img { border: none; } img { vertical-align: bottom; max-width: 100%; } ul { list-style: none; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } p { margin: 0; } /* a{ color: #000; text-decoration: none; &:link { color: #000; } &:active { color: #000; } &:visited { color: #000; } &:hover { cursor: pointer; } } input, button, textarea, select { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } *:focus { outline: none; } *,*:before,*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } */ /*color*/ /*mediaquery*/ /*mixin*/ /* Font系 */ /*----------------------- common -----------------------*/ html { font-size: 62.5%; line-height: 1; margin-top: 0 !important; } body { position: relative; color: #000; font-size: 1.8rem; letter-spacing: 0.05em; line-height: 1.6; width: 100%; font-family: yu-mincho-pr6, sans-serif; font-weight: 400; font-style: normal; -webkit-text-size-adjust: 100%; } @media (min-width: 768px) and (max-width: 1024px) { body { font-size: 1.4rem; -webkit-font-smoothing: antialiased; } } @media (max-width: 767px) { body { font-size: 1.4rem; -webkit-font-smoothing: antialiased; } } .inner { width: 92%; max-width: 100rem; margin: 0 auto; } .sp { display: none; } @media (max-width: 767px) { .sp { display: block; } } .tab { display: none; } @media (min-width: 768px) and (max-width: 1024px) { .tab { display: block; } } @media (max-width: 767px) { .tab { display: none; } } @media (min-width: 768px) and (max-width: 1024px) { .pc { display: block; } } @media (max-width: 767px) { .pc { display: none; } } .clearfix { overflow: hidden; } .fL { float: left; } .fR { float: right; } .flex { display: flex; } .center { text-align: center; } .right { text-align: right; } .left { text-align: left; } .mT20 { margin-top: 2rem; } .mT40 { margin-top: 4rem; } .mT60 { margin-top: 6rem; } .mT80 { margin-top: 8rem; } .mB20 { margin-bottom: 2rem; } .mB40 { margin-bottom: 4rem; } .mB60 { margin-bottom: 6rem; } .mB80 { margin-bottom: 8rem; } .before-none, .li-before-none li:before, .after-none, .li-after-none li:after { content: none !important; } .figure { margin: 0; overflow: hidden; position: relative; text-align: center; } @media (min-width: 768px) { .figure:hover img { transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); } } .figure img { height: auto; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; width: 100%; vertical-align: bottom; display: block; } .font-s { font-size: 80%; } @media (max-width: 767px) { .font-s { font-size: 1.2rem; } } /*================================================== * Tags *================================================*/ /** * img */ img { height: auto; max-width: 100%; transition: .3s; } /** * a */ a { transition: .3s; } a:-webkit-any-link { text-decoration: none; color: #23181b; } a:hover img { opacity: .7; } /** * blockquote */ blockquote { font-size: 100%; } /** * media */ embed, iframe, object { max-width: 100%; } div#container { width: 100%; padding: 0; } .btn { background: none; margin: 0; width: 100%; float: none; } .header { border-bottom: solid 0.4rem #e60012; background-color: #fff; padding: 2rem 0 0; } .header a { color: #000; text-decoration: none; } .header .logo { text-align: center; margin-bottom: 2rem; } .header .logo a img { width: 17.8rem; } .header .menu { justify-content: center; position: relative; } .header .menu .gNav li { margin-right: 5rem; padding-bottom: 2rem; box-sizing: border-box; } .header .menu .gNav li.hover { font-weight: 400; font-family: ten-mincho, serif; font-size: 2rem; line-height: 1.3; letter-spacing: 0; font-style: normal; /*position: relative; &::after { content: ''; border-bottom: 2px solid $red; border-right: 2px solid $red; position: absolute; left: 0; right: 0; width: 10px; height: 10px; bottom: 10px; margin: auto; transform: rotate(45deg); }*/ } .header .menu .gNav li.hover ul.baby { position: absolute; display: none; justify-content: flex-start; width: 100%; padding: 10px 10%; top: 45px; left: 0; right: 0; margin: auto; border-bottom: 4px solid #e60012; background-color: #fff; transition: .3s; opacity: 1; z-index: 9; box-sizing: border-box; } .header .menu .gNav li.hover ul.baby:hover { opacity: 1; display: flex; } .header .menu .gNav li.hover ul.baby li { margin: auto; padding: 10px 0; text-align: center; } .header .menu .gNav li.hover ul.baby li span { font-size: 16px; display: block; margin-top: 1rem; } .header .menu .gNav li.hover:hover ul.baby { opacity: 1; display: flex; } .header .menu .gNav li a { font-family: ten-mincho, serif; font-weight: 400; font-style: normal; letter-spacing: 0; font-size: 2rem; line-height: 1; } .header .menu .gNav li a:hover { color: #e60012; } .header .menu .btns li:first-child { margin-right: 2rem; } .header .menu .btns li a { background: #f09192; width: 3.2rem; height: 3.2rem; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .header .menu .btns li a .fas { color: #fff; font-size: 1.6rem; } .header .menu .btns li a:hover { opacity: .7; } .footer { padding: 5.6rem 0 3rem; background: #000; } .footer .inner { justify-content: space-between; } .footer a { color: #fff; font-size: 1.6rem; } .footer .footer-l .logo { margin-bottom: 2rem; } .footer .footer-l .logo img { width: 22rem; } .footer .footer-l .sns { justify-content: center; } .footer .footer-l .sns li { margin: 0 1.2rem; } .footer .footer-l .sns li a { font-size: 3.5rem; } .footer .footer-r ul { margin-right: 6rem; } .footer .footer-r ul:last-child { margin-right: 0; } .footer .footer-r ul li a { line-height: 2.5; } .footer .copyright { text-align: center; font-family: 'Noto Sans JP', sans-serif; font-size: 1.2rem; color: #fff; margin-top: 3rem; } .btn_next a { background: url(legacy-user_data-packages-edo120210126-img-icon-icon_next.png) no-repeat 96% 50% #e60012; padding: 12px 0 12px 0; } #mypagecolumn .pdtb10, #windowcolumn .pdtb10 { padding: 0 0 10px; line-height: 2; } main#top { background: url(legacy-pc-assets-img-common-bg.jpg) top center/cover no-repeat; } main#top .top-fv .mainv-slider { background-color: #fff; } main#top .top-fv .mainv-slider img { width: 100%; } main#top .top-fv .mainv-slider ul.slick-dots { display: flex; justify-content: center; padding: 5rem 0; position: absolute; margin: auto; left: 0; right: 0; } main#top .top-fv .mainv-slider ul.slick-dots li { margin: 0 3rem; background-color: #fff; width: 1.5rem; height: 1.5rem; border: .3rem solid #ffa18e; border-radius: 5rem; cursor: pointer; transition: .3s; } main#top .top-fv .mainv-slider ul.slick-dots li.slick-active { background-color: #ff6945; border: .3rem solid #ff6945; } main#top .top-fv .mainv-slider ul.slick-dots li.slick-active:hover { background-color: #ff6945; } main#top .top-fv .mainv-slider ul.slick-dots li:hover { background-color: #ffa18e; } main#top .top-fv .kv { padding: 10rem 0; } main#top .top-fv .kv .inner { position: relative; } main#top .top-fv .kv .catch { position: absolute; top: 5%; right: 6%; } main#top .top-fv .kv .video { border-radius: 1rem; border: solid 0.8rem #fbd47a; overflow: hidden; } main#top .top-fv .intro { padding: 17rem 0; } main#top .top-fv .intro .inner { display: flex; } main#top .top-fv .intro h2 { width: 60%; order: 2; } main#top .top-fv .intro .txt { width: 40%; padding-right: 4rem; order: 1; font-size: 3rem; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; line-height: 2.8; } main#top .about .image img { width: 100%; } main#top .about .txt { padding: 8vw 0; } main#top .about .txt .inner { position: relative; } main#top .about .txt h2 { position: absolute; bottom: 105%; } main#top .about .txt p { font-size: 2.6rem; line-height: 2; } main#top .about .appeal .txt h2 { right: 0; } main#top .about .history .txt .inner { text-align: right; } main#top .about .history .txt p { display: inline-block; text-align: left; } main#top .about .tsukiji .txt h2 { right: 0; } main#top .limited { padding: 9rem 0 10rem; text-align: center; } main#top .limited h2 { margin-bottom: 8rem; } main#top .limited .image { margin-bottom: 8rem; } main#top .limited .product-name { font-size: 4rem; color: #f46847; margin-bottom: 1rem; } main#top .limited .desc { font-size: 2.6rem; margin-bottom: 2rem; } main#top .limited .price { font-size: 3.5rem; color: #23181b; margin-bottom: 2rem; } main#top .products { padding: 10rem 0; } main#top .products h2 { text-align: center; margin-bottom: 8rem; } main#top .products ul li { margin-bottom: 4rem; } main#top .products ul li:last-child { margin-bottom: 0; } main#top .products ul li a { display: block; background: #fff; } div#recommend_all2 { display: none; } @media (min-width: 768px) and (max-width: 1024px) { .header .menu .gNav li { margin-right: 2vw; } .header .menu .gNav li.hover { font-size: 2.2vw; } .header .menu .gNav li a { font-size: 2.2vw; } /* TOP */ main#top .top-fv .mainv-slider ul.slick-dots { padding: 3vw 0; } main#top .top-fv .intro { padding: 12vw 0 6vw; } main#top .top-fv .intro .inner { justify-content: center; } main#top .top-fv .intro h2 { width: 48%; } main#top .top-fv .intro .txt { width: 48%; font-size: 3vw; padding-right: 3vw; } main#top .products { padding: 3vw 0 10vw; } } div#guidecolumn { font-size: 16px; } div#guidecolumn a { text-decoration: underline; } div#guidecolumn a:hover { text-decoration: none; } #product-list .ict_bg { margin: 0; padding: 3rem 0 4rem; } .pagenumberarea { margin: 0 auto 10rem auto; } #productscolumn .cat_mainv img { width: 100%; } #productscolumn .cont-all-wrap { background: #fff; padding: 4rem; } #productscolumn .page-number { border-bottom: 1px solid #000; margin-bottom: 4rem; padding-bottom: 1rem; justify-content: space-between; font-size: 16px; } #productscolumn .page-number .cunt-btn { padding: 0 .6rem; } #productscolumn .page-number.under { margin: 0 auto; padding: 1rem 0 0; border-bottom: none; border-top: 1px solid #000; } #productscolumn .quantity-box { display: none; } .products-detail div#detailrightblock { position: relative; padding-bottom: 80px; } .products-detail div#detailrightblock .box-wrap { width: 95%; position: absolute; bottom: 0; justify-content: space-between; } .products-detail div#detailrightblock .box-wrap .name { width: 37%; } .products-detail div#detailrightblock .box-wrap .name p { font-size: 14px; } .products-detail div#detailrightblock .box-wrap .get_btn { width: 63%; } .products-detail div#detailrightblock .box-wrap .get_btn .yen { font-size: 14px; } .products-detail div#detailrightblock .box-wrap .get_btn .cartbtn { line-height: 1; } .img_bnr { margin-top: 6rem; } .img_bnr h3 { font-size: 2.4rem; border-bottom: 0.1rem solid #000; margin-bottom: 3rem; } .dt_comment p.title { width: 10rem; position: relative; } .dt_comment p.title::after { content: ''; width: 3.5rem; height: .1rem; background-color: #000; position: absolute; top: 1.4rem; right: -4rem; } .dt_comment ul li { position: inherit; } .dt_comment ul li .detail { position: inherit; padding-left: 7rem; left: 0; } /* category page */ @media (min-width: 768px) and (max-width: 1024px) { /* category page */ } @media (min-width: 768px) and (max-width: 1024px) { #productscolumn .cont-all-wrap { padding: 3vw; } #productscolumn .in_cart { display: none; } } div#guidecolumn { width: 92%; max-width: 1000px; } div#mypagecolumn { width: 92%; max-width: 1200px; } div#mypagecolumn a { text-decoration: underline; } div#mypagecolumn a:hover { text-decoration: none; } div#mypagecolumn .btn a { text-decoration: none; } div#shoppingcolumn p { line-height: 1.4; } #one_maincolumn .back_btn { margin: 3rem auto; padding: 0; } #one_maincolumn .back_btn a { height: auto; position: inherit; box-shadow: none; padding: 10px 0; } /*company*/ #company .fadeInDown { -webkit-animation-fill-mode: both; -ms-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; -ms-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; visibility: visible !important; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } #company .eachTextAnime span { opacity: 0; } #company .eachTextAnime.appeartext span { animation: text_anime_on 1s ease-out forwards; } @keyframes text_anime_on { 0% { opacity: 0; } 100% { opacity: 1; } } #company .breadcrumbs { margin-bottom: 3rem; } #company .mainv { background: url(legacy-pc-assets-img-contents-company-mainv.jpg) center/cover no-repeat; background-size: cover; padding: 22rem 0; } #company .mainv h2 { margin: auto; width: 70%; text-align: right; } #company .contents { padding: 4rem 11rem; } #company .contents:before { background: url(legacy-pc-assets-img-contents-company-bg.jpg) center/cover no-repeat; } #company h2 { font-size: 5rem; text-align: center; margin-bottom: 5rem; } #company .about { background: url(legacy-pc-assets-img-contents-company-bg1.jpg) top -1.5vw right/100%; padding-top: 5rem; } #company .about h2 { margin-bottom: 5rem; } #company .about .image img { width: 100%; height: 34vw; object-fit: cover; } #company .about table { width: 100%; } #company .about table tr { border-bottom: 1px dotted black; } #company .about table tr:first-child { border-top: 1px dotted black; } #company .about table tr th { font-size: 2rem; padding-left: 7rem; } #company .about table tr td { line-height: initial; font-size: 2rem; padding: 2rem 0; } #company .appeal .position .positioninner .title, #company .history .position .positioninner .title, #company .tsukiji .position .positioninner .title { position: relative; top: -37rem; } #company .appeal .position .positioninner .title h2, #company .history .position .positioninner .title h2, #company .tsukiji .position .positioninner .title h2 { position: absolute; top: 0; } #company .appeal .txt, #company .history .txt, #company .tsukiji .txt { padding: 10rem 0; line-height: 2; } #company .appeal .txt p, #company .history .txt p, #company .tsukiji .txt p { font-size: 2.6rem; } #company .appeal .position .positioninner .title h2 { right: 0; } #company .history .position .positioninner .title h2 { left: 0; } #company .history .txt p { padding-left: 30rem; } #company .tsukiji { padding-bottom: 3vw; } #company .tsukiji .position .positioninner .title h2 { right: 0; } #company .appeal .position .positioninner .title h2 { right: 0; } #company .history .position .positioninner .title h2 { left: 0; } #company .company-bg { background: url(legacy-pc-assets-img-contents-company-bg2.jpg) top/cover no-repeat; padding-top: 7rem; padding-bottom: 10rem; } #company .commitment { background: url(legacy-pc-assets-img-contents-company-bg2.jpg) center/cover no-repeat; padding-bottom: 6rem; } #company .local-nav { text-align: center; justify-content: center; margin-bottom: 12rem; font-size: 2rem; margin-top: 5.5rem; } #company .local-nav .flex a { border-left: 1px solid black; padding: 0 3.5rem; } #company .local-nav .flex a:last-child { border-right: 1px solid black; } #company section.commitment { padding-top: 16.5rem; } #company section.commitment .flex { justify-content: space-between; align-items: center; margin-bottom: 6rem; } #company section.commitment .flex:last-child { margin-bottom: 0; } #company section.commitment .flex img { width: 48%; } #company section.commitment .flex .txt { width: 48%; } #company section.commitment .flex p.head { font-size: 2.4rem; margin-bottom: 3rem; } div#guidecolumn p { line-height: 1.8 !important; } /* category page */ #shop #mainv { background: url(legacy-pc-assets-img-contents-shop-mainv.jpg) center/cover no-repeat; padding: 22rem 0; } #shop #mainv h2 { font-size: 6rem; text-align: right; margin: auto; width: 70%; } #shop #allWrap { margin-bottom: 13rem; } #shop #allWrap .breadcrumb { padding: 3rem 0 4rem; } #shop #allWrap .shop-wrap { justify-content: space-between; margin-bottom: 10rem; } #shop #allWrap .shop-wrap:last-child { margin-bottom: 0; } #shop #allWrap .shop-wrap:nth-child(even) { flex-direction: row-reverse; } #shop #allWrap .shop-info { width: 50%; } #shop #allWrap .shop-info h3 { font-size: 3rem; padding: 0 2rem; border-bottom: 0.2rem solid #e60012; margin-bottom: 3rem; } #shop #allWrap .shop-info .intro { margin-bottom: 3rem; } #shop #allWrap .shop-info .address { display: flex; flex-wrap: wrap; } #shop #allWrap .shop-info .address dt, #shop #allWrap .shop-info .address dd { margin-bottom: 1rem; } #shop #allWrap .shop-info .address dt { width: 30%; } #shop #allWrap .shop-info .address dd { width: 70%; } #shop #allWrap .shop-info .address dd .caution { color: #e60012; font-size: 1.4rem; } #shop #allWrap .landscape { width: 47%; } #shop #allWrap .landscape .shop-image { margin-bottom: 2rem; } #shop #allWrap .landscape .shop-image img { width: 100%; } #recipe .breadcrumb { padding: 3rem 0 4rem; } #recipe #mainv { background: url(legacy-pc-assets-img-contents-recipe-mainv.jpg) center/cover no-repeat; padding: 22rem 0; } #recipe #mainv h2 { font-size: 6rem; text-align: right; margin: auto; width: 70%; } #recipe .rest { padding: 0 0 10rem; } @media (min-width: 768px) and (max-width: 1024px) { /* category page */ } @media (min-width: 768px) and (max-width: 1024px) { #company .mainv { padding: 10vw 0; } #company .mainv h2 { font-size: 5vw; } #company h2 { font-size: 5vw; } #company .appeal .position .positioninner .title, #company .history .position .positioninner .title, #company .tsukiji .position .positioninner .title { top: -20rem; } #company .appeal .position .positioninner .title h2, #company .history .position .positioninner .title h2, #company .tsukiji .position .positioninner .title h2 { width: 20%; } #company .appeal .txt, #company .history .txt, #company .tsukiji .txt { padding: 5vw 0; } #company .appeal .txt p, #company .history .txt p, #company .tsukiji .txt p { padding-right: 24vw; font-size: 2.6vw; } #company .history .txt p { padding-left: 24vw; padding-right: 0; } #shop #mainv { padding: 10vw 0; } #shop #mainv h2 { font-size: 5vw; } #recipe #mainv { padding: 10vw 0; } #recipe #mainv h2 { font-size: 5vw; } }