@charset "UTF-8"; /* CSS Document */ /*-------------------------------------------- For all file Last update : 2015.12.13 takashi koide --------------------------- 1-0 structure 2-0 visual setting 2-1 header 2-2 footer 2-3 mainmenu 2-4 main 2-5 itemtextarea 2-6 photoarea 2-7 itemstory 2-7-1 タイトルエリア --------------------------------------------*/ /*------------------------------------------------------------------------- 1-0 basic visual setting --------------------------------------------------------------------------*/ html { } body { font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; color: #000; background-color: #FFF; } a:link { text-decoration: none; color: #333; } a:visited { text-decoration: none; color: #333; } a:hover { text-decoration: none } a:active { text-decoration: none; color: #333; } .clearfix { clear: both } /*------------------------------------------------------------------------- 2-0 basic visual setting --------------------------------------------------------------------------*/ /*------------------------------------------------------------------------- 2-1 header --------------------------------------------------------------------------*/ header { width: 100%; clear: both; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #FF0201; height: 160px; background-color: #FFF; } #head_top { background-color: #FF0201; height: 60px; width: 100%; } #head_top #head_top_inline { width: 1024px; margin-right: auto; margin-left: auto; } #head_top .dropmenu { *zoom: 1; width: 910px; float: left; } #head_top .dropmenu:before, #head_top .dropmenu:after { content: ""; display: table; } #head_top .dropmenu:after { clear: both } #head_top .dropmenu li { position: relative; width: 18%; float: left; text-align: center; margin-right: 0; margin-bottom: 0; margin-left: 0; border-left-width: 1px; border-left-style: solid; border-left-color: #FFF; padding-right: 0; padding-left: 0; margin-top: 0px; } #head_top .dropmenu li a { display: block; margin: 0; background: #FF0201; color: #fff; font-size: 14px; line-height: 1; text-decoration: none; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: bold; padding-right: 0; padding-left: 0; padding-bottom: 11px; padding-top: 15px; } #head_top .dropmenu #account, #head_top .dropmenu #bookmark, #head_top .dropmenu #cart, #head_top .dropmenu #login { height: 60px } #head_top .dropmenu #account a span, #head_top .dropmenu #bookmark a span, #head_top .dropmenu #cart a span, #head_top .dropmenu #login a span { padding-left: 5px } #head_top .dropmenu #cart a { position: relative } #head_top .dropmenu #cart a .cart_count { position: relative } #head_top .dropmenu #account a table { margin-left: 10px } #head_top .dropmenu #account a table tr td { padding-top: 10px } #head_top .dropmenu #account a span { width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; display: block; float: left; padding-right: 10px; } #head_top .dropmenu li ul { list-style: none; position: absolute; z-index: 9999; top: 100%; left: 0; margin: 0; padding: 0; width: 200px; } #head_top .dropmenu li ul li { width: 100% } #head_top .dropmenu li ul li a { background: #555; text-align: left; border-top-width: 1px; border-top-style: solid; border-top-color: #CCC; padding-top: 13px; padding-right: 15px; padding-bottom: 13px; padding-left: 15px; } #head_top .dropmenu li ul li a:hover { height: 15px } #head_top .dropmenu li:hover > a { background: #000 } #head_top .dropmenu li a:hover { background: #000; height: 34px; } #head_top .dropmenu li ul li { overflow: hidden; height: 0; transition: .2s; } #head_top .dropmenu li:hover ul li { overflow: visible; height: 38px; } #head_top .form_area { position: relative; padding: 0px; top: 3px; margin: 0px; float: left; width: 500px; } #head_top .form_area .pure-input-2-3 { width: 300px; float: left; margin-left: 20px; } #head_top .form_area .pure-button-primary { background-color: #000; float: left; position: absolute; margin-left: 10px; top: 7px; } #head_top #sns { width: 100px; margin-top: 10px; top: 0px; float: right; } #head_top #sns ul { margin: 0; padding: 0; width: 100px; } #head_top #sns ul li { float: left } #head_top #sns ul #fb { height: 40px; width: 40px; margin-right: 5px; background-image: url(../img/images.png); background-position: -660px -2620px; background-color: #FFF; background-repeat: no-repeat; display: block; float: left; } #head_top #sns ul #fb a { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; height: 40px; width: 40px; } #head_top #sns ul #tw { height: 40px; width: 40px; background-image: url(../img/images.png); background-position: -710px -2620px; margin-right: 0px; text-indent: 100%; display: block; float: right; } #head_top #sns ul #tw a { height: 40px; width: 40px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #head_top #head_top_inline #sns ul #fb a:hover, #head_top #head_top_inline #sns ul #tw a:hover { background-color: #FFF; opacity: 0.7; } .wrap { width: 1024px; margin-right: auto; margin-left: auto; } #head_left { width: 350px; margin-top: 23px; height: 72px; float: left; } #head_left h1 { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: 0 -100px; height: 60px; width: 114px; float: left; margin: 0; padding: 0; } #head_left h1 a { text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; height: 60px; } #head_left h1 a:hover { height: 60px; width: 114px; display: block; background-image: url(../img/images.png); background-position: 0 -2620px; } #head_left ul { display: table-cell; width: 235px; float: right; } #head_left ul #copy { font-size: 12px; font-weight: 700; margin-left: 2px; line-height: 15px; } #head_left ul #tel { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -118px -132px; height: 38px; width: 191px; } #head_left ul #tel { text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; height: 38px; } #head_left ul #tel a:hover { display: block; background-image: url(../img/images.png); background-position: 0 -2620px; } #head_right { float: right; width: 605px; position: relative; margin-top: 20px; } #head_right nav { width: 100%; clear: both; padding-top: 25px; } #head_right nav ul { padding: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; } #head_right nav ul li { float: left; font-size: 14px; font-weight: bolder; } .menu01 a, .menu02 a, .menu03 a, .menu04 a, .menu05 a, .menu06 a, .menu07 a { text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #head_right nav ul .menu01 a { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -401px -143px; height: 39px; margin-right: 25px; width: 102px; display: block; } #head_right nav ul .menu01 a:hover { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -401px -192px; height: 39px; width: 102px; display: block; } #head_right nav ul .menu02 a { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -527px -143px; height: 39px; margin-right: 25px; width: 73px; display: block; } #head_right nav ul .menu02 a:hover { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -527px -192px; height: 39px; } #head_right nav ul .menu03 a { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -626px -143px; height: 39px; margin-right: 25px; display: block; width: 78px; } #head_right nav ul .menu03 a:hover { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -626px -192px; height: 39px; display: block; width: 78px; } #head_right nav ul .menu04 a { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -724px -143px; height: 39px; margin-right: 25px; width: 114px; display: block; } #head_right nav ul .menu04 a:hover { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -724px -192px; height: 39px; width: 114px; display: block; } #head_right nav ul .menu05 a { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -863px -143px; height: 39px; width: 88px; margin-right: 25px; } #head_right nav ul .menu05 a:hover { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -863px -192px; height: 39px; width: 88px; } #head_right nav ul .menu06 a { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -978px -143px; height: 39px; width: 24px; margin-top: 0; margin-right: 0px; margin-bottom: 0; margin-left: 0; } #head_right nav ul .menu06 a:hover { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -978px -192px; height: 39px; width: 24px; margin-top: 0; margin-right: 0px; margin-bottom: 0; margin-left: 0; } .search-form { display: block; position: relative; right: 0; } .search-form:before, .search-field { position: absolute; top: 0; right: -0; width: 24px; height: 50px; margin: 0; } .search-form:before { z-index: 100; line-height: 50px; background: #65b1e4; color: #FFF; text-align: center; } .search-field { -webkit-appearance: none; border-radius: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; z-index: 200; cursor: pointer; -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; transition: all .3s ease-in; } .search-field:focus { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; width: 100%; cursor: text; } .search-form input[type="submit"] { display: none } /*------------------------------------------------------------------------- 2-2 Main Visual --------------------------------------------------------------------------*/ #main_visual { clear: both; width: 100%; padding-top: 90px; padding-bottom: 60px; } #main_visual p { text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin: 0px; padding: 0px; height: 0px; } #main_visual ul { display: table; width: 1100px; margin-right: auto; margin-left: auto; padding: 0px; position: relative; } #main_visual ul li { vertical-align: top; display: table-cell; } #main_visual ul li #main_copy { padding: 0px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-top: 30px; margin-right: 0px; margin-bottom: 0px; margin-left: 38px; } #main_visual ul li #main_copy #main_copy01_01 { background-image: url(../img/mv_copy_01.png); background-repeat: no-repeat; height: 61px; width: 331px; margin: 0px; padding: 0px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #main_visual ul li #main_copy #main_copy01_02 { background-image: url(../img/mv_copy_02.png); background-repeat: no-repeat; height: 61px; width: 519px; margin: 0px; padding: 0px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #main_visual ul li ul { padding: 0px; width: 550px; display: table; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 43px; } #main_visual ul li ul li { padding: 0px; width: 118px; float: left; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 10px; } #main_visual ul li ul #mv_icon01 { background-image: url(../img/mv_icon_01.png); background-repeat: no-repeat; height: 47px; width: 118px; padding: 0px; text-indent: 100%; white-space: nowrap; overflow: hidden; display: table-cell; } #main_visual ul li ul #mv_icon02 { background-image: url(../img/mv_icon_02.png); background-repeat: no-repeat; height: 47px; width: 118px; padding: 0px; text-indent: 100%; white-space: nowrap; overflow: hidden; display: table-cell; } #main_visual ul li ul #mv_icon03 { background-image: url(../img/mv_icon_03.png); background-repeat: no-repeat; height: 47px; width: 118px; padding: 0px; text-indent: 100%; white-space: nowrap; overflow: hidden; display: table-cell; } #main_visual ul li ul #mv_icon04 { background-image: url(../img/mv_icon_04.png); background-repeat: no-repeat; height: 47px; width: 118px; padding: 0px; text-indent: 100%; white-space: nowrap; overflow: hidden; display: table-cell; } #main_visual ul li #main_copy02 { background-image: url(../img/mv_copy_03.png); background-repeat: no-repeat; height: 108px; width: 560px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-left: 38px; margin-top: 0px; background-position: 0px 0px; z-index: 100; position: absolute; top: 410px; } #main_visual ul li #mv_photo { background-image: url(../img/mv_photo.png); background-repeat: no-repeat; height: 205px; width: 612px; margin-top: 5px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #main_visual ul #mv_right { background-image: url(../img/mv_right.png); background-repeat: no-repeat; height: 548px; width: 550px; margin: 0px; padding: 0px; } #main_visual .button { width: 100%; position: relative; background-image: url(../img/button_bg.png); background-repeat: repeat-x; height: 260px; margin: 0px; padding: 0px; } #main_visual .button a { width: 1024px; margin-right: auto; margin-left: auto; display: block; background-image: url(../img/button_01.png); background-repeat: no-repeat; height: 294px; padding-top: 50px; text-align: center; } #main_visual .button a:hover { width: 1024px; margin-right: auto; margin-left: auto; display: block; background-image: url(../img/button_02.png); background-repeat: no-repeat; height: 294px; padding-top: 50px; text-align: center; } #main_visual .button a img { margin-right: auto; margin-left: auto; top: 30px; width: 645px; } .share_area { width: 1044px; margin-left: auto; margin-right: auto; position: relative; } .social-area-syncer { min-height: 190px; position: absolute; top: -10px; right: 0px; width: 240px; padding-top: 1.5em; padding-right: 0; padding-bottom: 1.5em; padding-left: 0; } .social-area-syncer_market { min-height: 190px; position: absolute; top: 0px; right: 0px; width: 240px; padding-top: 1.5em; padding-right: 0; padding-bottom: 1.5em; padding-left: 0; } .social-area-syncer { min-height: 119px } .social-area-syncer_market { min-height: 119px } ul.social-button-syncer { } ul.social-button-syncer li { float: left; text-align: center; height: 71px; margin: 0 8px; padding: 0; } .sc-tw { width: 71px } .sc-tw svg { width: 30px; height: 30px; } .sc-tw a { height: 56px; margin: 0 auto; padding-top: 6px; display: block; background: #1B95E0; font-size: 12px; color: #fff; font-weight: 700; text-decoration: none; letter-spacing: .5px; border-radius: 2px; } .sc-tw a:hover { color: #fff; background: #0c7abf; } .sc-tw span:before { white-space: pre; content: '\A'; } .sc-fb { z-index: 99; width: 69px; } #sec_head, #sec_tool, #sec_voice { padding: 0px; width: 1024px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #sec_head img, #sec_tool img, #sec_voice img { line-height: 0%; vertical-align: bottom; margin: 0px; padding: 0px; } #sec_head p, #sec_tool p, #sec_voice p, #sec_voice ul, #sec_voice h2, #sec_voice h3 { text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin: 0px; padding: 0px; height: 0px; } .button a img:hover { opacity: 0.8 } #main_visual #delivery_area { width: 1100px; margin-right: auto; margin-left: auto; position: relative; } #main_visual #delivery_area #delivery_date { background-image: url(../img/delivery_date01.png); background-repeat: no-repeat; background-position: 0px 0px; margin: 0px; padding: 0px; height: 251px; width: 481px; position: absolute; right: 0px; bottom: 0px; } #main_visual #delivery_area #delivery_date h3 { text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #main_visual #delivery_area #delivery_date #date { -moz-transform: rotate(-7deg); -webkit-transform: rotate(-7deg); -o-transform: rotate(-7deg); -ms-transform: rotate(-7deg); transform: rotate(-7deg); color: #666; margin: 0px; padding: 0px; text-indent: 0px; white-space: normal; font-weight: bold; position: absolute; left: 40px; top: 140px; font-size: 22px; line-height: 35px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } #matomete .hid { text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #matomete #sec01 { background-image: url(../img/matomete_images.png); background-repeat: no-repeat; background-position: 0px 0px; height: 350px; width: 850px; } #matomete #sec02 { background-image: url(../img/matomete_images.png); background-repeat: no-repeat; background-position: 0px -350px; height: 620px; width: 850px; } #matomete #sec03 { background-image: url(../img/matomete_images.png); background-repeat: no-repeat; background-position: 0px -970px; height: 620px; width: 850px; } #matomete #sec04 { background-image: url(../img/matomete_images.png); background-repeat: no-repeat; background-position: 0px -1590px; height: 692px; width: 850px; display: block; } #matomete #sec05 { background-image: url(../img/matomete_images.png); background-repeat: no-repeat; background-position: 0px -2282px; height: 1030px; width: 850px; display: block; } #matomete #sec06 a { background-image: url(../img/matomete_images.png); background-repeat: no-repeat; background-position: 0px -3312px; height: 193px; width: 850px; display: block; } #matomete #sec06 a:hover { height: 193px; width: 850px; opacity: 0.8; background-color: #FFF; display: block; } #point .hid { text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #point #sec01 { background-image: url(../img/point_images.png); background-repeat: no-repeat; background-position: 0px 0px; height: 283px; width: 850px; } #point #sec02 { background-image: url(../img/point_images.png); background-repeat: no-repeat; background-position: 0px -283px; height: 526px; width: 850px; } #point #sec03 { background-image: url(../img/point_images.png); background-repeat: no-repeat; background-position: 0px -825px; height: 702px; width: 850px; } #point #sec04 { background-image: url(../img/point_images.png); background-repeat: no-repeat; background-position: 0px -1531px; height: 189px; width: 850px; } #point a { background-image: url(../img/point_images.png); background-repeat: no-repeat; background-position: 0px -1531px; height: 189px; width: 850px; } #point a:hover { height: 189px; width: 850px; opacity: 0.8; background-color: #FFF; display: block; } #point #campaign01 { background-image: url(../img/point_images_campaign01.png); background-repeat: no-repeat; background-position: 0px 0px; height: 194px; width: 850px; } #point #campaign02 { background-image: url(../img/point_images_campaign02.png); background-repeat: no-repeat; background-position: 0px 0px; height: 294px; width: 850px; } /*------------------------------------------------------------------------- 2-3 Main Contents --------------------------------------------------------------------------*/ #original_item { background-color: #FF0201; padding-top: 68px; height: 572px; margin-top: 80px; } #original_item #headline01 { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -40px -319px; height: 136px; width: 100%; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #reason { background-color: #00B2B2; padding-top: 77px; margin-top: 0px; padding-bottom: 80px; } #reason h2 { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -40px -3876px; height: 80px; width: 100%; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #reason .copy { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -40px -4006px; height: 100px; width: 100%; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-top: 47px; } #reason .wrap ul { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -40px -4180px; height: 270px; width: 100%; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-top: 60px; } #reason .plus { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -40px -4492px; height: 307px; width: 100%; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-top: 40px; } #original_item ul { padding: 0; width: 100%; margin-top: 41px; margin-right: 0; margin-bottom: 0; margin-left: 0; } #original_item ul li { margin: 0; padding: 0; } #original_item ul #step01 { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -40px -495px; height: 320px; width: 321px; float: left; } #original_item ul #step02 { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -393px -495px; height: 320px; width: 320px; float: left; margin-left: 30px; } #original_item ul #step03 { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -746px -495px; height: 320px; width: 320px; float: right; } #step01 h3, #step02 h3, #step03 h3 { text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #step01 p, #step02 p, #step03 p { color: #FF0201; margin-top: 162px; padding: 10px; font-size: 16px; line-height: 23px; font-weight: 700; } #original_item_list { clear: both; width: 100%; background-color: #FF0201; padding-bottom: 75px; padding-top: 80px; } .bg_wh { background-color: #FFF; padding-top: 35px; padding-bottom: 35px; } #original_item_list .wrap.bg_wh #headline02 { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: 0 -900px; height: 78px; width: 586px; margin-right: auto; margin-left: auto; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #original_item_list .wrap.bg_wh ul { margin-top: 20px; padding-right: 30px; padding-left: 30px; } #original_item_list .wrap.bg_wh ul li a { height: 200px; width: 150px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #original_item_list .wrap.bg_wh ul li a:hover { display: block; background-image: url(../img/images.png); background-position: 0 -2620px; } #original_item_list .wrap.bg_wh ul #item01 { height: 200px; width: 150px; border: 1px solid #FF0201; background-image: url(../img/images.png); background-repeat: no-repeat; background-position: 0 -1010px; float: left; margin-right: 11px; } #original_item_list .wrap.bg_wh ul #item02 { height: 200px; width: 150px; border: 1px solid #FF0201; background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -163px -1010px; float: left; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-right: 10px; } #original_item_list .wrap.bg_wh ul #item03 { height: 200px; width: 150px; border: 1px solid #FF0201; background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -326px -1010px; float: left; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-right: 10px; } #original_item_list .wrap.bg_wh ul #item04 { height: 200px; width: 150px; border: 1px solid #FF0201; background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -488px -1010px; float: left; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-right: 10px; } #original_item_list .wrap.bg_wh ul #item05 { height: 200px; width: 150px; border: 1px solid #FF0201; background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -651px -1010px; float: left; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-right: 10px; } #original_item_list .wrap.bg_wh ul #item06 { height: 200px; width: 150px; border: 1px solid #FF0201; background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -814px -1010px; float: right; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #original_item_list .wrap.bg_wh ul #item07 { height: 200px; width: 150px; border: 1px solid #FF0201; background-image: url(../img/images.png); background-repeat: no-repeat; background-position: 0 -1224px; float: left; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-top: 10px; margin-right: 11px; } #original_item_list .wrap.bg_wh ul #item08 { height: 200px; width: 150px; border: 1px solid #FF0201; background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -163px -1224px; float: left; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-top: 10px; margin-right: 10px; } #original_item_list .wrap.bg_wh ul #item09 { height: 200px; width: 150px; border: 1px solid #FF0201; background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -326px -1224px; float: left; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-top: 10px; margin-right: 10px; } #original_item_list .wrap.bg_wh ul #item10 { height: 200px; width: 150px; border: 1px solid #FF0201; background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -489px -1224px; float: left; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-top: 10px; margin-right: 10px; } #original_item_list .wrap.bg_wh ul #item11 { height: 200px; width: 150px; border: 1px solid #FF0201; background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -652px -1224px; float: left; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-top: 10px; margin-right: 10px; } #original_item_list .wrap.bg_wh ul #item12 { height: 200px; width: 150px; border: 1px solid #FF0201; background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -815px -1224px; float: right; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-top: 10px; } #original_item_list .btn01 { margin-right: auto; margin-left: auto; background-image: url(../img/images.png); background-repeat: no-repeat; background-position: 0 -1460px; height: 90px; width: 440px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-top: 35px; } #original_item_list .btn01 a { height: 90px; width: 440px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #original_item_list .wrap.bg_wh .btn01 a:hover { display: block; background-image: url(../img/images.png); background-position: 0 -2620px; height: 90px; width: 440px; } #original_item_list .wrap.bg_wh .btn11 a { background-image: url(../img/btn11.png); background-repeat: no-repeat; width: 1024px; height: 223px; background-position: center top; margin-top: 50px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #original_item_list .wrap.bg_wh .btn11 a:hover { background-color: #FFF; opacity: 0.8; } section { background-color: #FFF } #sale { padding-top: 75px; background-color: #FFF; } #sale #headline03 { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -4px -1597px; height: 52px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; width: 1033px; margin-right: auto; margin-left: auto; } #sale p { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: 0 -1721px; padding-left: 300px; font-size: 30px; height: 182px; vertical-align: middle; display: table-cell; margin-left: 60px; width: 964px; font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; line-height: 40px; } #sale_list { width: 964px; margin-right: auto; margin-left: auto; background-color: #FFF; font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; } #sale_list ul { margin: 0; padding: 0; font-size: 0; } #sale_list ul li { padding: 0; border: 2px solid #000; width: 226px; display: inline-block; margin-right: 10px; margin-bottom: 30px; vertical-align: top; } #sale_list ul li a { display: block } #sale_list ul li a:hover { opacity: .5 } #sale_list ul li .sale_list_img { text-align: center; padding-top: 20px; padding-bottom: 10px; } #sale_list ul li .sale_list_img img { width: 185px } #sale_list ul li .sale_list_title { border-top-width: 1px; border-top-style: solid; border-top-color: #000; text-align: left; font-size: 18px; display: block; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 23px; font-weight: bold; } #sale_list ul li .sale_list_creator { padding-top: 5px; padding-right: 10px; padding-left: 10px; font-size: 15px; padding-bottom: 5px; } #sale_list ul li .sale_list_creator span { padding: 0; display: block; height: 26px; width: 26px; float: left; margin-top: 0; margin-right: 10px; margin-left: 0; } #sale_list ul li .sale_list_creator span img { width: 26px; height: 26px; } #sale_list ul li .sale_list_creator p { padding-top: 5px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } #sale_list ul li .sale_list_price { background-color: #FF0201; color: #FFF; margin-top: 5px; background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -483px -1460px; text-align: center; padding-top: 13px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; font-size: 16px; } #sale_list .btn02 { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: 0 -1940px; text-indent: 100%; white-space: nowrap; display: block; height: 90px; width: 440px; margin-right: auto; margin-left: auto; margin-top: 45px; overflow: hidden; } #sale_list .btn02 a { display: block; height: 90px; width: 440px; } #sale_list .btn11 a { background-image: url(../img/btn11.png); background-repeat: no-repeat; width: 950px; height: 223px; background-position: center top; margin-top: 10px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #sale_list .btn11 a:hover { background-color: #FFF; opacity: 0.8; } #sale_list .btn_outer { background-color: #F00; width: 950px; position: relative; } #sale_list .btn02 a:hover { display: block; text-indent: 200%; height: 90px; width: 950px; position: absolute; left: 0px; background-color: #FFF; opacity: 0.8; } #qc { margin: 0px; padding: 0px; } #qc ul { margin: 0px; padding: 0px; background-color: #F0F0E1; } #qc ul li { padding: 0px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; width: 1024px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #qc ul #qc_sec01 { background-image: url(../img/qc.png); background-repeat: no-repeat; height: 547px; width: 1024px; background-position: 0px 0px; } #qc ul #qc_sec02 { background-image: url(../img/qc.png); background-repeat: no-repeat; height: 408px; width: 1024px; background-position: 0px -547px; } #qc ul #qc_sec03 { background-image: url(../img/qc.png); background-repeat: no-repeat; height: 348px; width: 1024px; background-position: 0px -955px; } #qc ul #qc_sec04 { background-image: url(../img/qc.png); background-repeat: no-repeat; height: 334px; width: 1024px; background-position: 0px -1303px; } #qc ul #qc_sec05 { background-image: url(../img/qc.png); background-repeat: no-repeat; height: 240px; width: 1024px; background-position: 0px -1637px; } /*------------------------------------------------------------------------- 2-4 Banner Area --------------------------------------------------------------------------*/ aside { width: 100%; clear: both; background-color: #FFF; } aside table { margin: 0; padding: 0; border-right-width: 1px; border-bottom-width: 1px; border-right-style: solid; border-bottom-style: solid; border-right-color: #FF2502; border-bottom-color: #FF2502; } aside table td { border-top-width: 1px; border-left-width: 1px; border-top-style: solid; border-left-style: solid; border-top-color: #D51F02; border-left-color: #E52102; margin: 0; padding: 0; height: 150px; width: 510px; vertical-align: middle; float: left; } aside table td img { height: 150px; width: 510px; margin: 0; padding: 0; } aside table td a:hover img { opacity: .5 } /*------------------------------------------------------------------------- 2-4 Media Infomation --------------------------------------------------------------------------*/ #media_infomation { background-color: #FF0201; padding-top: 45px; padding-bottom: 45px; width: 100%; } #media_infomation #headline04 { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -40px -2107px; text-indent: 100%; white-space: nowrap; display: block; height: 48px; width: 325px; overflow: hidden; } #media_infomation ul { background-color: #FFF; margin-top: 33px; float: left; clear: both; padding-top: 30px; padding-right: 30px; padding-bottom: 6px; padding-left: 30px; } #media_infomation ul li { float: left; margin-right: 16px; margin-bottom: 16px; } #media_infomation ul li img { width: 180px } #media_infomation ul li:nth-child(5) { float: right; margin-right: 0; } #media_infomation ul li:nth-child(10) { float: right; margin-right: 0; } /*------------------------------------------------------------------------- 2-5 Infomation --------------------------------------------------------------------------*/ #infomation { clear: both; width: 600px; padding-top: 30px; padding-bottom: 30px; vertical-align: top; display: inline-block; font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; } #infomation #headline05 { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -5px -2235px; height: 45px; width: 474px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #infomation_list { width: 100%; margin-top: 27px; border-top-width: 1px; border-top-style: dotted; border-top-color: #333; } #infomation #infomation_list dl { border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #333; padding-top: 14px; padding-bottom: 10px; } #infomation #infomation_list dl dt { display: inline-block; width: 140px; vertical-align: top; line-height: 25px; } #infomation #infomation_list dl dd { display: inline-block; vertical-align: top; width: 450px; line-height: 25px; } #facebook { display: inline-block; width: 400px; background-color: #CCC; vertical-align: top; height: 500px; margin-top: 30px; margin-left: 18px; margin-bottom: 30px; } /*------------------------------------------------------------------------- 2-6 Footer --------------------------------------------------------------------------*/ footer { background-color: #FF0201; padding-top: 30px; padding-bottom: 30px; } #footer_left { width: 350px; float: left; margin-top: 20px; } #footer_left #headline06 { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -40px -2379px; height: 33px; width: 68px; text-indent: 100%; white-space: nowrap; display: inline-block; overflow: hidden; vertical-align: top; } #footer_left p { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -118px -2377px; height: 39px; width: 241px; text-indent: 100%; white-space: nowrap; display: inline-block; overflow: hidden; vertical-align: top; } #footer_right { width: 277px; float: right; height: 55px; background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -789px -2360px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-bottom: 5px; } footer ul { width: 100%; border-top-width: 1px; border-top-style: solid; border-top-color: #FFF; clear: both; padding-top: 10px; } footer ul li { float: left } footer ul #footer_menu01 a { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -40px -2434px; width: 45px; height: 20px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-right: 20px; } footer ul #footer_menu01 a:hover { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -40px -2480px; width: 45px; height: 20px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } footer ul #footer_menu02 a { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -108px -2434px; width: 100px; height: 20px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-right: 20px; } footer ul #footer_menu02 a:hover { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -108px -2480px; width: 100px; height: 20px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } footer ul #footer_menu03 a { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -230px -2434px; width: 100px; height: 20px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-right: 20px; } footer ul #footer_menu03 a:hover { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -230px -2480px; width: 100px; height: 20px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } footer ul #footer_menu04 a { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -351px -2434px; width: 113px; height: 20px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-right: 20px; } footer ul #footer_menu04 a:hover { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -351px -2480px; width: 113px; height: 20px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } footer ul #footer_menu05 a { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -486px -2434px; width: 87px; height: 20px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-right: 20px; } footer ul #footer_menu05 a:hover { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -486px -2480px; width: 87px; height: 20px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } footer ul #footer_menu06 a { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -593px -2434px; width: 172px; height: 20px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-right: 20px; } footer ul #footer_menu06 a:hover { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -593px -2480px; width: 172px; height: 20px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } footer ul #footer_menu07 a { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -785px -2434px; width: 90px; height: 20px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; margin-right: 15px; } footer ul #footer_menu07 a:hover { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -785px -2480px; width: 90px; height: 20px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } footer ul #footer_menu08 a { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -894px -2434px; width: 88px; height: 20px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } footer ul #footer_menu08 a:hover { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -894px -2480px; width: 88px; height: 20px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } footer small { color: #FFF; text-align: center; width: 100%; font-size: 14px; clear: both; padding-top: 60px; display: block; } .clear_fix { clear: both } /*------------------------------------------------------------------------- 3-1 Market Main Visual --------------------------------------------------------------------------*/ #main_visual #mv_banner { height: 320px; width: 1080px; margin-right: auto; margin-left: auto; padding: 0; } #main_visual #mv_banner .slick-dots { width: 200px; margin-left: 440px; } /*------------------------------------------------------------------------- 3-2 Market Left Pan --------------------------------------------------------------------------*/ #left { width: 200px; float: left; } #left #delivery_date_left { background-image: url(../img/delivery_date02.png); background-repeat: no-repeat; background-position: 0px 0px; padding: 0px; height: 208px; width: 208px; position: relative; margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; } #left #delivery_date_left h3 { text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #left #delivery_date_left #date { -moz-transform: rotate(2deg); -webkit-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); color: #666; margin: 0px; padding: 0px; text-indent: 0px; white-space: normal; font-weight: bold; position: absolute; left: 12px; top: 145px; font-size: 15px; line-height: 20px; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; letter-spacing: -1px; } #left #total_item { background-image: url(../img/left_images.png); background-repeat: no-repeat; background-position: 0 0; height: 150px; width: 200px; } #left #total_item h3 { text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #left #total_item p { padding-top: 55px; text-align: center; font-size: 40px; color: #FF0201; } #left #left_banner_main { background-image: url(../img/left_images.png); background-repeat: no-repeat; background-position: 0 -170px; height: 272px; width: 200px; margin-top: 20px; } #left #left_banner_2nd { margin-top: 10px } #left #left_banner_3rd { margin-top: 10px } #left #left_banner_main h3 { text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; height: 272px; width: 200px; } #left #left_banner_main h3 a { text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; height: 272px; width: 200px; } #left #left_banner_main h3 a:hover { height: 272px; width: 200px; display: block; background-image: url(../img/images.png); background-position: 0 -2620px; } #left #social_tag { border: 1px solid #FF0201; margin-top: 13px; padding-bottom: 10px; padding-right: 10px; } #left #social_tag h3 { background-image: url(../img/left_images.png); background-repeat: no-repeat; background-position: 0 -455px; height: 45px; width: 198px; text-indent: 105%; white-space: nowrap; display: block; overflow: hidden; } #left #social_tag .box { margin: 0 0 5px } #left #social_tag .box p { padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 10px; line-height: 25px; } .r_lnk { text-align: right; margin: 0 !important; } .r_lnk a { line-height: 150%; background: url(./common/design/user/css/img/arrow2.png) no-repeat left 50%; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 17px; } #left #category_search { border: 1px solid #FF0201 } #left #category_search h2 { background-image: url(../img/left_images.png); background-repeat: no-repeat; background-position: 0 -515px; text-indent: 100%; white-space: nowrap; display: block; height: 40px; width: 198px; overflow: hidden; } #category_search ul { padding: 10px 5px 0 } #category_search li { padding: 0 0 10px; margin: 0 0 10px; border-bottom: 1px dotted #d8d8d8; } #category_search li h3 { color: #333; font-size: 14px; line-height: 150%; font-weight: 700; padding-top: 5px; padding-right: 0; padding-bottom: 0; padding-left: 20px; background-image: url(./common/design/user/css/img/arrow1.png); background-repeat: no-repeat; background-position: 5px 9px; } #category_search li:last-child { padding: 0; border-bottom: none; } #category_search li a { color: #333; font-size: 14px; line-height: 150%; text-decoration: none; display: block; padding: 3px; background: url(./common/design/user/css/img/arrow1.png) no-repeat right 50%; } #category_search li a:hover { background: url(./common/design/user/css/img/arrow3.png) no-repeat right 50% } #category_search li ul { border: none; margin: 0 0 0 10px; } #category_search li ul li { padding: 0; margin: 0 0 5px; border-bottom: none; } #category_search li ul li:last-child { margin: 0 } #left #twitter_tl { margin-top: 20px } #left #left_sns { margin-top: 20px; display: table; } #left #left_sns #left_sns_fb { background-image: url(../img/left_images.png); background-repeat: no-repeat; background-position: 0 -575px; text-indent: 100%; white-space: nowrap; display: table-cell; height: 100px; width: 100px; overflow: hidden; vertical-align: top; } #left #left_sns #left_sns_fb a, #left #left_sns #left_sns_google a { display: block; height: 100px; width: 100px; } #left #left_sns #left_sns_google { background-image: url(../img/left_images.png); background-repeat: no-repeat; background-position: -100px -575px; text-indent: 100%; white-space: nowrap; display: table-cell; height: 100px; width: 100px; overflow: hidden; vertical-align: top; } #left #left_sns #left_sns_fb a:hover, #left #left_sns #left_sns_google a:hover { height: 100px; width: 100px; display: block; background-image: url(../img/images.png); background-position: 0 -2620px; } /*------------------------------------------------------------------------- 3-3 Market Market Main Contents --------------------------------------------------------------------------*/ #main_contents { float: right; width: 795px; } #main_contents #market_menu { margin: 0; padding: 0; } #main_contents #market_menu ul { margin: 0; padding: 0; } #main_contents #market_menu ul #menu_pick_up { background-image: url(../img/images.png); background-repeat: no-repeat; text-indent: 100%; white-space: nowrap; display: block; float: left; height: 110px; width: 190px; overflow: hidden; margin-right: 12px; background-position: -201px -2970px; } #main_contents #market_menu ul #menu_pick_up_carent { background-image: url(../img/images.png); background-repeat: no-repeat; text-indent: 100%; white-space: nowrap; display: block; float: left; height: 110px; width: 190px; overflow: hidden; margin-right: 12px; background-position: -201px -3110px; } #main_contents #market_menu ul #menu_pick_up a:hover { background-image: url(../img/images.png); background-repeat: no-repeat; text-indent: 100%; white-space: nowrap; display: block; float: left; height: 110px; width: 190px; overflow: hidden; margin-right: 12px; background-position: -201px -3110px; } #main_contents #market_menu ul #menu_collaboration { background-image: url(../img/images.png); background-repeat: no-repeat; text-indent: 100%; white-space: nowrap; display: block; float: left; height: 110px; width: 190px; overflow: hidden; margin-right: 11px; background-position: -403px -2970px; } #main_contents #market_menu ul #menu_collaboration_carent { background-image: url(../img/images.png); background-repeat: no-repeat; text-indent: 100%; white-space: nowrap; display: block; float: left; height: 110px; width: 190px; overflow: hidden; margin-right: 11px; background-position: -403px -3110px; } #main_contents #market_menu ul #menu_collaboration a:hover { background-image: url(../img/images.png); background-repeat: no-repeat; text-indent: 100%; white-space: nowrap; display: block; float: left; height: 110px; width: 190px; overflow: hidden; margin-right: 11px; background-position: -403px -3110px; } #main_contents #market_menu ul #menu_rankings { background-image: url(../img/images.png); background-repeat: no-repeat; text-indent: 100%; white-space: nowrap; display: block; float: right; height: 110px; width: 190px; overflow: hidden; background-position: -604px -2970px; } #main_contents #market_menu ul #menu_rankings_carent { background-image: url(../img/images.png); background-repeat: no-repeat; text-indent: 100%; white-space: nowrap; display: block; float: right; height: 110px; width: 190px; overflow: hidden; background-position: -604px -3110px; } #main_contents #market_menu ul #menu_rankings a:hover { background-image: url(../img/images.png); background-repeat: no-repeat; text-indent: 100%; white-space: nowrap; display: block; float: right; height: 110px; width: 190px; overflow: hidden; background-position: -604px -3110px; } #main_contents #market_menu ul #menu_whats_new { background-image: url(../img/images.png); background-repeat: no-repeat; text-indent: 100%; white-space: nowrap; display: block; float: left; height: 110px; width: 190px; overflow: hidden; background-position: 0px -2970px; margin-right: 12px; } #main_contents #market_menu ul #menu_whats_new_carent { background-image: url(../img/images.png); background-repeat: no-repeat; text-indent: 100%; white-space: nowrap; display: block; float: left; height: 110px; width: 190px; overflow: hidden; background-position: 0px -3110px; margin-right: 12px; } #main_contents #market_menu ul #menu_whats_new a:hover { background-image: url(../img/images.png); background-repeat: no-repeat; text-indent: 100%; white-space: nowrap; display: block; float: left; height: 110px; width: 190px; overflow: hidden; background-position: 0px -3110px; margin-right: 12px; } #main_contents #market_menu ul li a { text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; height: 110px; width: 190px; } #main_contents .market_inline { margin: 0; border: 1px solid #FF0201; width: 775px; float: left; padding-top: 20px; padding-bottom: 60px; padding-left: 20px; } #main_contents .market_inline ul { margin: 0; padding: 0; } #main_contents .market_inline ul li { width: 174px; border: 1px solid #FF0201; display: inline-block; vertical-align: top; margin-right: 12px; margin-bottom: 20px; } #main_contents .market_inline ul li a { display: block } #main_contents .market_inline ul li a:hover { display: block; background-color: #FFF; opacity: 0.7; } #main_contents .market_inline ul li a .market_list_img, #main_contents .market_inline ul li a .sale_list_img { text-align: center; padding-top: 20px; padding-bottom: 10px; } #main_contents .market_inline ul li a .market_list_img img, #main_contents .market_inline ul li a .sale_list_img img { width: 146px } #main_contents .market_inline ul li .market_list_title, #main_contents .market_inline ul li .sale_list_title { border-top-width: 1px; border-top-style: solid; border-top-color: #000; text-align: left; font-size: 15px; display: block; padding-top: 5px; padding-right: 10px; padding-left: 10px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 20px; font-weight: bold; } #main_contents .market_inline ul li .market_list_creator, #main_contents .market_inline ul li .sale_list_creator { padding-top: 0; padding-right: 10px; padding-left: 10px; font-size: 12px; padding-bottom: 5px; margin-top: 10px; } #main_contents .market_inline ul li .market_list_creator span, #main_contents .market_inline ul li .sale_list_creator span { padding: 0; display: block; height: 26px; width: 26px; float: left; margin-top: 0; margin-right: 10px; margin-left: 0; margin-bottom: 5px; } #main_contents .market_inline ul li .market_list_creator span img, #main_contents .market_inline ul li .sale_list_creator span img { width: 26px; height: 26px; } #main_contents .market_inline ul li .market_list_creator p, #main_contents .market_inline ul li .sale_list_creator p { padding-top: 5px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } #main_contents .market_inline ul li .market_list_price, #main_contents .market_inline ul li .sale_list_price { background-color: #FF0201; color: #FFF; margin-top: 5px; background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -483px -1460px; text-align: right; padding-top: 13px; padding-right: 20px; padding-bottom: 10px; padding-left: 10px; font-size: 13px; } #main_contents .btn03 { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: 0px -3540px; text-indent: 100%; white-space: nowrap; display: block; height: 90px; width: 440px; margin-right: auto; margin-left: auto; margin-top: 45px; overflow: hidden; } #main_contents .btn03 a { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: 0px -3540px; text-indent: 100%; white-space: nowrap; display: block; height: 90px; width: 440px; overflow: hidden; } #main_contents .btn04 { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -500px -3540px; text-indent: 100%; white-space: nowrap; display: block; height: 90px; width: 440px; margin-right: auto; margin-left: auto; margin-top: 45px; overflow: hidden; } #main_contents .btn04 a { text-indent: 100%; white-space: nowrap; display: block; height: 90px; width: 440px; overflow: hidden; } #main_contents .btn03 a:hover, #main_contents .btn04 a:hover { display: block; background-image: url(../img/images.png); background-position: 0 -2620px; height: 90px; width: 440px; } #main_contents #headline07 { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: 0px -3288px; text-indent: 100%; white-space: nowrap; display: block; height: 48px; width: 205px; margin-top: 20px; margin-bottom: 10px; overflow: hidden; } #main_contents #headline08 { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: 0px -3345px; text-indent: 100%; white-space: nowrap; display: block; height: 48px; width: 306px; margin-top: 20px; margin-bottom: 10px; overflow: hidden; } #main_contents #headline09 { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: 0px -3401px; text-indent: 100%; white-space: nowrap; display: block; height: 48px; width: 275px; margin-top: 20px; margin-bottom: 10px; overflow: hidden; } #main_contents .market_list_rank { background-image: url(http://up-t-devel.jp/common/img/images.png); background-repeat: no-repeat; background-position: 0px -3469px; display: block; height: 30px; width: 174px; font-size: 18px; font-weight: bold; line-height: 32px; color: #FFF; text-indent: 150px; } #main_contents .market_inline #page_nav { margin-right: auto; margin-left: auto; width: 400px; margin-top: 40px; } #main_contents .market_inline #page_nav ul { margin: 0; padding: 0; } #main_contents .market_inline #page_nav ul li { height: 30px; width: 30px; font-size: 18px; display: inline-block; text-align: center; vertical-align: middle; line-height: 32px; margin-right: 2px; } #main_contents .market_inline #page_nav ul #carent { color: #FFF; background-color: #FF0201; } #main_contents .market_inline #page_nav ul #navi_arrow { font-size: 10px } /*------------------------------------------------------------------------- 4-1 Business Main Contents --------------------------------------------------------------------------*/ #main #business #section01 h1 { text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; line-height: 0px; height: 0px; } #main #business #section01 #sec01_01 { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px 0px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 328px; width: 850px; overflow: hidden; } #main #business #section01 h2 { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -328px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 137px; width: 850px; overflow: hidden; } #main #business #section01 ul, #main #business #section01 ul li { text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; height: 0px; width: 850px; margin: 0px; padding: 0px; } #main #business #section01 #sec01_02 { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -465px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 94px; width: 850px; overflow: hidden; } #main #business #section01 #sec01_03 { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -559px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 308px; width: 850px; overflow: hidden; } #main #business #section02 h2 { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -867px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 80px; width: 850px; overflow: hidden; } #main #business #section02 #sec02_01 { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -947px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 308px; width: 850px; overflow: hidden; } #main #business #section03 h2 { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -1255px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 55px; width: 850px; overflow: hidden; } #main #business #section03 h3 { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -1403px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 70px; width: 850px; overflow: hidden; } #main #business #section03 #sec03_01 { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -1310px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 93px; width: 850px; overflow: hidden; } #main #business #section03 #sec03_02 { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -1473px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 95px; width: 850px; overflow: hidden; } #main #business #section03 #sec03_03 a { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -1568px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 101px; width: 850px; overflow: hidden; } #main #business #section03 #sec03_04 { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -1669px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 71px; width: 850px; overflow: hidden; } #main #business #section04 h2 { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -1740px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 105px; width: 850px; overflow: hidden; } #main #business #section04 h3 { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -1845px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 43px; width: 850px; overflow: hidden; } #main #business #section04 #sec04_01 { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -1888px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 80px; width: 850px; overflow: hidden; } #main #business #section04 dl { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -1968px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 136px; width: 850px; overflow: hidden; } #main #business #section04 #sec04_02 a { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -2104px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 133px; width: 850px; overflow: hidden; } #main #business #section04 #sec04_03 { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -2237px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 41px; width: 850px; overflow: hidden; } #main #business #section05 h2 { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -2278px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 111px; width: 850px; overflow: hidden; } #main #business #section05 #sec05_01 { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -2389px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 100px; width: 850px; overflow: hidden; } #main #business #section05 #sec05_02 { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -2489px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 191px; width: 850px; overflow: hidden; } #main #business #section05 #sec05_03 { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -2680px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 175px; width: 850px; overflow: hidden; } #main #business #section05 #sec05_04 { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -2855px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 175px; width: 850px; overflow: hidden; } #main #business #section05 #sec05_05 { background-image: url(../img/images_business.png); background-repeat: no-repeat; background-position: 0px -3030px; text-indent: 100%; white-space: nowrap; display: block; margin: 0px; padding: 0px; height: 174px; width: 850px; overflow: hidden; } /*------------------------------------------------------------------------- 20160526追加　確認後、上記の#business以下削除可 --------------------------------------------------------------------------*/ #main #business_re { margin: 0px; padding: 0px; } #main #business_re .hid { text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #main #business_re #section01 { background-image: url(../img/business_images_pc.png); background-repeat: no-repeat; background-position: 0px 0px; margin: 0px; padding: 0px; height: 866px; width: 850px; } #main #business_re #section02 { background-image: url(../img/business_images_pc.png); background-repeat: no-repeat; background-position: 0px -866px; margin: 0px; padding: 0px; height: 393px; width: 850px; } #main #business_re #section03 { background-image: url(../img/business_images_pc.png); background-repeat: no-repeat; background-position: 0px -1259px; margin: 0px; padding: 0px; height: 497px; width: 850px; position: relative; } #main #business_re #section03 #btn_sec03 a { height: 70px; width: 530px; display: block; margin: 0px; padding: 0px; transition: 0.6s; position: absolute; top: 339px; left: 261px; } #main #business_re #section03 #btn_sec03 a:hover { height: 70px; width: 530px; display: block; margin: 0px; padding: 0px; opacity: 0.5; background-color: #FFF; } #main #business_re #section04 { background-image: url(../img/business_images_pc.png); background-repeat: no-repeat; background-position: 0px -1756px; margin: 0px; padding: 0px; height: 522px; width: 850px; position: relative; } #main #business_re #section04 #btn_sec04 a { height: 268px; width: 790px; display: block; margin: 0px; padding: 0px; transition: 0.6s; position: absolute; top: 213px; left: 30px; } #main #business_re #section04 #btn_sec04 a:hover { height: 268px; width: 790px; display: block; margin: 0px; padding: 0px; opacity: 0.5; background-color: #FFF; } #main #business_re #section05 { background-image: url(../img/business_images_pc.png); background-repeat: no-repeat; background-position: 0px -2278px; margin: 0px; padding: 0px; height: 415px; width: 850px; } #main #business_re #section06 { background-image: url(../img/business_images_pc.png); background-repeat: no-repeat; background-position: 0px -2693px; margin: 0px; padding: 0px; height: 360px; width: 850px; } #main #business_re #section07 { background-image: url(../img/business_images_pc.png); background-repeat: no-repeat; background-position: 0px -3053px; margin: 0px; padding: 0px; height: 418px; width: 850px; position: relative; } #main #business_re #section07 #sec07_txt { position: absolute; top: 250px; width: 770px; left: 40px; font-size: 16px; line-height: 30px; } #main #business_re #section08 { background-image: url(../img/business_images_pc.png); background-repeat: no-repeat; background-position: 0px -3471px; margin: 0px; padding: 0px; height: 330px; width: 850px; position: relative; } #main #business_re #section08 #btn_sec08 a { height: 268px; width: 790px; display: block; margin: 0px; padding: 0px; transition: 0.6s; position: absolute; top: 33px; left: 30px; } #main #business_re #section08 #btn_sec08 a:hover { height: 268px; width: 790px; display: block; margin: 0px; padding: 0px; opacity: 0.5; background-color: #FFF; } #main #business_re #section09 #section09_head { background-image: url(../img/business_images_pc.png); background-repeat: no-repeat; background-position: 0px -3801px; margin: 0px; padding: 0px; height: 484px; width: 850px; position: relative; } #main #business_re #section09 #section09_head #sec09_txt { position: absolute; top: 410px; width: 770px; left: 40px; font-size: 16px; line-height: 30px; } #main #business_re #section09 #section09_mid { background-image: url(../img/business_images_pc.png); background-repeat: no-repeat; background-position: 0px -4285px; margin: 0px; padding: 0px; height: 131px; width: 850px; position: relative; } #main #business_re #section09 #sec09_dl01 { background-image: url(../img/business_images_pc.png); background-repeat: no-repeat; background-position: 0px -4416px; margin: 0px; padding: 0px; height: 277px; width: 850px; position: relative; } #main #business_re #section09 #sec09_dl01 dd { position: absolute; width: 770px; top: 222px; left: 40px; line-height: 25px; } #main #business_re #section09 #sec09_dl02 { background-image: url(../img/business_images_pc.png); background-repeat: no-repeat; background-position: 0px -4693px; margin: 0px; padding: 0px; height: 318px; width: 850px; position: relative; } #main #business_re #section09 #sec09_dl02 dd { position: absolute; top: 247px; left: 40px; width: 770px; line-height: 25px; } #main #business_re #section09 #sec09_dl03 { background-image: url(../img/business_images_pc.png); background-repeat: no-repeat; background-position: 0px -5011px; margin: 0px; padding: 0px; height: 302px; width: 850px; position: relative; } #main #business_re #section09 #sec09_dl03 dd { position: absolute; top: 242px; left: 40px; width: 770px; line-height: 25px; } #main #business_re #section10 { background-image: url(../img/business_images_pc.png); background-repeat: no-repeat; background-position: 0px -5313px; margin: 0px; padding: 0px; height: 1454px; width: 850px; position: relative; } #main #business_re #section10 #sec10_txt { position: absolute; top: 200px; width: 770px; left: 40px; font-size: 18px; line-height: 30px; color: #FFF; font-weight: bold; } #main #business_re #section10 ul { padding: 0px; margin-top: 400px; } #main #business_re #section10 ul li { float: left; width: 283px; height: 450px; } #main #business_re #section10 ul .section10_li_inline { margin-top: 290px; text-align: center; line-height: 25px; padding-right: 30px; padding-left: 30px; } #main #business_re #section10 ul .section10_li_inline span { color: #F00; padding-top: 10px; padding-bottom: 10px; } #main #business_re #section10 ul li .section10_li_inline div { font-size: 14px; text-align: left; } #main #business_re #section10 #more_lineup { margin: 0px; padding: 0px; height: 150px; width: 850px; position: absolute; top: 1303px; } #main #business_re #section10 #more_lineup a { height: 150px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; width: 850px; margin: 0px; padding: 0px; } #main #business_re #section10 #more_lineup a:hover { height: 150px; width: 850px; display: block; opacity: 0.5; background-color: #FFF; } #main #business_re #section11 { background-image: url(../img/business_images_pc.png); background-repeat: no-repeat; background-position: 0px -6767px; margin: 0px; padding: 0px; height: 1100px; width: 850px; position: relative; } #main #business_re #section11 #sec11_txt { position: absolute; top: 250px; width: 770px; left: 40px; font-size: 18px; line-height: 30px; color: #FFF; font-weight: bold; } #main #business_re #section11 #dl01 { position: relative; height: 155px; margin-top: 400px; width: 850px; } #main #business_re #section11 #dl02 { position: relative; height: 155px; margin-top: 10px; width: 850px; } #main #business_re #section11 #dl03 { position: relative; height: 155px; margin-top: 10px; width: 850px; } #main #business_re #section11 #dl04 { position: relative; height: 155px; margin-top: 10px; width: 850px; } #main #business_re #section11 #dl01 dd, #main #business_re #section11 #dl02 dd, #main #business_re #section11 #dl03 dd { position: absolute; top: 80px; left: 200px; line-height: 20px; } #main #business_re #section11 #dl04 dd { position: absolute; top: 100px; left: 200px; line-height: 20px; } #main #business_re #section12 { background-image: url(../img/business_images_pc.png); background-repeat: no-repeat; background-position: 0px -7867px; margin: 0px; padding: 0px; height: 348px; width: 850px; position: relative; } #main #business_re #section12 #btn_sec12 a { height: 268px; width: 790px; display: block; margin: 0px; padding: 0px; transition: 0.6s; position: absolute; top: 33px; left: 30px; } #main #business_re #section12 #btn_sec12 a:hover { height: 268px; width: 790px; display: block; margin: 0px; padding: 0px; opacity: 0.5; background-color: #FFF; } #main #business_re #section13 #section13_head { background-image: url(../img/business_images_pc.png); background-repeat: no-repeat; background-position: 0px -8215px; margin: 0px; padding: 0px; height: 217px; width: 850px; position: relative; } #main #business_re #section13 #section13_body { background-image: url(../img/business_images_pc.png); background-repeat: no-repeat; background-position: 0px -8432px; margin: 0px; padding: 0px; height: 727px; width: 850px; position: relative; } #main #business_re #section13 #sec13_txt { position: absolute; top: 100px; width: 620px; left: 197px; font-size: 16px; line-height: 20px; font-weight: bold; } #main #business_re #section13 dl { position: relative; height: 177px; width: 850px; } #main #business_re #section13 dl dd { position: absolute; width: 540px; top: 40px; left: 270px; line-height: 20px; } #main #business_re #section14 { background-image: url(../img/business_images_pc.png); background-repeat: no-repeat; background-position: 0px -9159px; margin: 0px; padding: 0px; height: 269px; width: 850px; position: relative; } #main #business_re #section14 #btn_sec14 a { height: 268px; width: 790px; display: block; margin: 0px; padding: 0px; transition: 0.6s; position: absolute; top: 0px; left: 30px; } #main #business_re #section14 #btn_sec14 a:hover { height: 268px; width: 790px; display: block; margin: 0px; padding: 0px; opacity: 0.5; background-color: #FFF; } /*------------------------------------------------------------------------- 20160620追加　商品のお届け日程について --------------------------------------------------------------------------*/ #delivery .hid { text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #delivery #sec01 { background-image: url(../img/delivery_images.png); background-repeat: no-repeat; background-position: 0px 0px; height: 283px; width: 850px; position: relative; } #delivery #sec01 #form_area span { position: absolute; left: -305px; top: 193px; font-size: 25px; color: #F00; display: block; font-weight: bold; } #delivery #sec02 { background-image: url(../img/delivery_images.png); background-repeat: no-repeat; background-position: 0px -283px; height: 542px; width: 850px; position: relative; } #delivery #sec02 span { display: block; position: absolute; left: -815px; bottom: 30px; font-size: 14px; } #delivery #sec03 { background-image: url(../img/delivery_images.png); background-repeat: no-repeat; background-position: 0px -825px; height: 714px; width: 850px; position: relative; } #delivery #sec04 { background-image: url(../img/delivery_images.png); background-repeat: no-repeat; background-position: 0px -1539px; height: 222px; width: 850px; display: block; } #delivery a { background-image: url(../img/delivery_images.png); background-repeat: no-repeat; background-position: 0px -1539px; height: 222px; width: 850px; display: block; } #delivery a:hover { height: 222px; width: 850px; opacity: 0.8; background-color: #FFF; display: block; } #delivery #sec03 #delivery_list { width: 560px; top: 100px; left: 30px; position: absolute; } #delivery #sec03 #delivery_list #next_day_th { width: 130px; top: 0px; left: 0px; background-color: #8495F9; margin: 0px; padding: 0px; color: #FFF; text-align: center; border-top-width: 1px; border-right-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: none; border-left-style: solid; border-top-color: #8495F9; border-right-color: #8495F9; border-left-color: #8495F9; } #delivery #sec03 #delivery_list #two_days_later_th { width: 130px; top: 0px; left: 0px; background-color: #6CE3B2; margin: 0px; padding: 0px; color: #FFF; text-align: center; border: 1px solid #6CE3B2; } #delivery #sec03 #delivery_list #next_day_td { width: 420px; top: 0px; left: 0px; border-top-width: 1px; border-left-width: 1px; border-top-style: solid; border-left-style: solid; border-top-color: #8495F9; border-left-color: #8495F9; padding: 10px; font-size: 14px; color: #8495F9; border-right-width: 1px; border-right-style: solid; border-bottom-style: none; border-right-color: #8495F9; line-height: 18px; } #delivery #sec03 #delivery_list #two_days_later_td { width: 420px; top: 0px; left: 0px; padding: 10px; font-size: 14px; color: #6CE3B2; border: 1px solid #6CE3B2; line-height: 18px; } #delivery h3, #delivery ul, #delivery ul li { background-color: #FFF; margin: 0px; padding: 0px; height: 0px; width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #delivery_day { background-image: url(../img/delivery_day.png); margin-right: auto; margin-left: auto; height: 290px; width: 1024px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; position: relative; } #delivery_day .wrap div a { position: absolute; display: block; height: 72px; width: 420px; right: 44px; bottom: 35px; } #delivery_day .wrap div a:hover { background-color: #FFF; opacity: 0.5; } /*------------------------------------------------------------------------- 5-1 item_detail --------------------------------------------------------------------------*/ .item_detail .btn12 a, #contents #main .btn12 a { background-image: url(../img/btn12.png); background-repeat: no-repeat; background-size: 100%; width: 850px; height: 223px; background-position: center top; margin-top: 50px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } .item_detail .btn12 a:hover, #contents #main .btn12 a:hover { background-color: #FFF; opacity: 0.8; } /*------------------------------------------------------------------------- 20160829追加　はじめての方へ --------------------------------------------------------------------------*/ .hide { text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } .about_renew section #sec01 { background-image: url(../img/about_01.png); background-repeat: no-repeat; background-position: 0px 0px; margin: 0px; padding: 0px; height: 610px; width: 850px; position: relative; } .about_renew section #sec01 p { width: 550px; position: absolute; top: 170px; left: 40px; font-size: 16px; line-height: 30px; } .about_renew section #sec01 #registration a { margin: 0px; padding: 0px; height: 260px; width: 850px; position: absolute; top: 350px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } .about_renew section #sec01 #registration a:hover { background-image: url(../img/about_02.png); background-repeat: no-repeat; background-position: 0px -350px; margin: 0px; padding: 0px; height: 260px; width: 850px; } .about_renew section #sec02 { background-image: url(../img/about_01.png); background-repeat: no-repeat; background-position: 0px -610px; margin: 0px; padding: 0px; height: 1025px; width: 850px; position: relative; } .about_renew section #sec02 p { width: 770px; position: absolute; top: 190px; left: 42px; font-size: 16px; line-height: 30px; } .about_renew section #sec02 #sec02_left { width: 360px; position: relative; top: 330px; left: 40px; } .about_renew section #sec02 #sec02_left p { width: 320px; padding-top: 210px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; position: absolute; left: 0px; top: 0px; line-height: 25px; } .about_renew section #sec02 #sec02_right { width: 360px; position: relative; top: 330px; left: 395px; } .about_renew section #sec02 #sec02_right p { width: 320px; padding-top: 195px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; position: absolute; right: 0px; top: 0px; line-height: 25px; } .about_renew section #sec02 #registration a { background-image: url(../img/about_01.png); background-repeat: no-repeat; background-position: 0px -4614px; margin: 0px; padding: 0px; height: 260px; width: 850px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; position: absolute; right: 0px; top: 750px; } .about_renew section #sec02 #registration a:hover { background-image: url(../img/about_02.png); background-repeat: no-repeat; background-position: 0px -4614px; margin: 0px; padding: 0px; height: 260px; width: 850px; } .about_renew section #sec_tool { background-image: url(../img/about_01.png); background-repeat: no-repeat; background-position: 0px -4900px; margin: 0px; padding: 0px; height: 1218px; width: 850px; position: relative; } .about_renew section #sec_tool #registration a { background-image: url(../img/about_01.png); background-repeat: no-repeat; background-position: 0px -4614px; margin: 0px; padding: 0px; height: 260px; width: 850px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; position: absolute; right: 0px; top: 900px; } .about_renew section #sec_tool #registration a:hover { background-image: url(../img/about_02.png); background-repeat: no-repeat; background-position: 0px -4614px; margin: 0px; padding: 0px; height: 260px; width: 850px; } .about_renew section #sec03_01 { background-image: url(../img/about_01.png); background-repeat: no-repeat; background-position: 0px -1890px; margin: 0px; padding: 0px; height: 772px; width: 850px; position: relative; } .about_renew section #sec03_01 #sec03_01_01 { font-size: 16px; line-height: 25px; display: block; margin-top: 130px; padding-right: 80px; padding-left: 150px; color: #fff; } .about_renew section #sec03_01 #sec03_01_02 { font-size: 16px; line-height: 25px; display: block; margin-top: 230px; padding-right: 80px; padding-left: 150px; color: #fff; } .about_renew section #sec03 ul #sec03_01 #sec03_01_link a { height: 100px; width: 850px; top: 675px; position: absolute; } .about_renew section #sec03 ul #sec03_01 #sec03_01_link a:hover { background-image: url(../img/about_02.png); background-repeat: no-repeat; background-position: 0px -2565px; height: 100px; width: 850px; } .about_renew section #sec03_02 { background-image: url(../img/about_01.png); background-repeat: no-repeat; background-position: 0px -2665px; margin: 0px; padding: 0px; height: 364px; width: 850px; position: relative; } .about_renew section #sec03_02 p { font-size: 16px; line-height: 25px; display: block; margin-top: 130px; padding-right: 80px; padding-left: 150px; color: #fff; } .about_renew section #sec03 ul #sec03_02 #sec03_02_link a { height: 100px; width: 850px; top: 265px; position: absolute; } .about_renew section #sec03 ul #sec03_02 #sec03_02_link a:hover { background-image: url(../img/about_02.png); background-repeat: no-repeat; background-position: 0px -2930px; height: 100px; width: 850px; } .about_renew section #sec03_03 { background-image: url(../img/about_01.png); background-repeat: no-repeat; background-position: 0px -3029px; margin: 0px; padding: 0px; height: 517px; width: 850px; position: relative; } .about_renew section #sec03_03_01 { font-size: 16px; line-height: 25px; display: block; margin-top: 130px; padding-right: 80px; padding-left: 150px; color: #fff; } .about_renew section #sec03_03_02 { font-size: 16px; line-height: 25px; display: block; margin-top: 30px; padding-right: 80px; padding-left: 150px; color: #fff; } .about_renew section #sec03 ul #sec03_03 #sec03_03_link a { height: 100px; width: 850px; top: 421px; position: absolute; } .about_renew section #sec03 ul #sec03_03 #sec03_03_link a:hover { background-image: url(../img/about_02.png); background-repeat: no-repeat; background-position: 0px -3450px; height: 100px; width: 850px; } .about_renew section #sec03_04 { background-image: url(../img/about_01.png); background-repeat: no-repeat; background-position: 0px -3546px; margin: 0px; padding: 0px; height: 375px; width: 850px; position: relative; } .about_renew section #sec03_04 p { font-size: 16px; line-height: 25px; display: block; margin-top: 130px; padding-right: 80px; padding-left: 150px; color: #fff; } .about_renew section #sec03 ul #sec03_04 #sec03_04_link a { height: 100px; width: 850px; top: 278px; position: absolute; } .about_renew section #sec03 ul #sec03_04 #sec03_04_link a:hover { background-image: url(../img/about_02.png); background-repeat: no-repeat; background-position: 0px -3824px; height: 100px; width: 850px; } .about_renew section #sec03_05 { background-image: url(../img/about_01.png); background-repeat: no-repeat; background-position: 0px -3921px; margin: 0px; padding: 0px; height: 376px; width: 850px; position: relative; } .about_renew section #sec03_05 p { font-size: 16px; line-height: 25px; display: block; margin-top: 130px; padding-right: 80px; padding-left: 150px; color: #fff; } .about_renew section #sec03 ul #sec03_05 #sec03_05_link a { height: 100px; width: 850px; top: 278px; position: absolute; } .about_renew section #sec03 ul #sec03_05 #sec03_05_link a:hover { background-image: url(../img/about_02.png); background-repeat: no-repeat; background-position: 0px -4199px; height: 100px; width: 850px; } .about_renew section #sec03 #registration a { background-image: url(../img/about_01.png); background-repeat: no-repeat; background-position: 0px -4298px; margin: 0px; padding: 0px; height: 260px; width: 850px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } .about_renew section #sec03 #registration a:hover { background-image: url(../img/about_02.png); background-repeat: no-repeat; background-position: 0px -4298px; margin: 0px; padding: 0px; height: 260px; width: 850px; } /*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* #main contents - malo特設ページ（20160113追加） *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/ .malo_cnt-Area .malo_header { line-height: 0; } .malo_cnt-Area .malo_prf { line-height: 0; } /* タイトル（イカすユル昭和グッズたち） ------------------------*/ .malo_cnt-Area .malo_tit { line-height: 0; } .malo_goods-Area { } .malo_goods-Area a { font-weight: bold; } .malo_goods-Area a:hover { text-decoration: underline; } /* グッズ１列目 ------------------------*/ .malo_goods-Area .gArea001 { height: 268px; background: #FFF url(img/malo/malo_goods01_bg.png) center no-repeat; position: relative; } .malo_goods-Area .gArea001 .l_block { position: absolute; top: 168px; left: 200px; } .malo_goods-Area .gArea001 .r_block { position: absolute; top: 220px; left: 612px; } /* グッズ２列目 ------------------------*/ .malo_goods-Area .gArea002 { height: 349px; background: #FFF url(img/malo/malo_goods02_bg.png) center no-repeat; position: relative; } .malo_goods-Area .gArea002 .l_block { position: absolute; top: 134px; left: 62px; } .malo_goods-Area .gArea002 .l_block a { font-size: 88%; } .malo_goods-Area .gArea002 .c_block { position: absolute; top: 205px; left: 444px; } .malo_goods-Area .gArea002 .r_block { position: absolute; top: 320px; left: 664px; } .malo_goods-Area .gArea002 .r_block a { font-size: 88%; } /* グッズ３列目 ------------------------*/ .malo_goods-Area .gArea003 { height: 536px; background: #FFF url(img/malo/malo_goods03_bg.png) center no-repeat; position: relative; } .malo_goods-Area .gArea003 .l01_block { position: absolute; top: 132px; left: 198px; } .malo_goods-Area .gArea003 .l02_block { position: absolute; top: 376px; left: 92px; } .malo_goods-Area .gArea003 .l02_block a { font-size: 88%; } .malo_goods-Area .gArea003 .c_block { position: absolute; top: 428px; left: 500px; } .malo_goods-Area .gArea003 .r_block { position: absolute; top: 212px; left: 642px; } .malo_goods-Area .gArea003 .r_block a { font-size: 88%; } /* ボタンエリア ------------------------*/ .malo_btnArea { height: 170px; background: #FFF url(img/malo/malo_brnArea_bg.png) center no-repeat; } .btnBlock { padding-top: 46px; } .malo_btnArea a { text-indent: -9999px; overflow: hidden; display: block; width: 686px; height: 104px; background: url(img/malo/malo_btn.png) no-repeat; text-align: center; margin: 0 auto; } .malo_btnArea a:hover { background-position:0 -104px; } /* タイトル（その他のユル昭和グッズたち） ------------------------*/ .malo_cnt-Area .malo_tit02 { line-height: 0; } .malo_othergoods-Area { height: 493px; background: #FFF url(img/malo/malo_othergoods_bg.png) center no-repeat; position: relative; display: flex; } .malo_othergoods-Area a:hover { opacity: .6; } /* ラインスタンプ エリア ------------------------*/ .malo_othergoods-Area .l_block { width: 425px; position:relative; display: inline-block; } .malo_othergoods-Area .l_block p { color: #a0856b; padding: 88px 55px 10px 66px; line-height: 152%; } .malo_othergoods-Area .l_block a { width: 425px; height: 316px; } .malo_othergoods-Area .l_block .prArea { position: absolute; top: 332px; left: 10px; } /* 書籍 エリア ------------------------*/ .malo_othergoods-Area .r_block { width: 425px; position:relative; display: inline-block; } .malo_othergoods-Area .r_block p { color: #a0856b; padding: 88px 55px 10px 66px; line-height: 152%; } .malo_othergoods-Area .r_block a { width: 259px; margin: 0 auto; text-align: center; display: block; padding-top: 20px; } .malo_othergoods-Area .r_block .prArea { position: absolute; top: 332px; right: 10px; } /*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* トップページ（20160607追加） *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/ /* スライダーパーツ追加 ------------------------*/ #main_visual #feature_area { width: 1100px; margin-right: auto; margin-left: auto; position: relative; } #main_visual #feature_area #feature_factor { background-image: url(../img/feature_img.png); background-repeat: no-repeat; background-position: 0px 0px; margin: 0px; padding: 0px; height: 223px; width: 469px; position: absolute; right: 26px; bottom: 200px; text-indent: 100%; white-space: nowrap; overflow: hidden; } /* アイテム紹介エリア ------------------------*/ #item-select { padding-top: 75px; background-color: #FFF; } #item-select #headline03 { background-image: url(../img/images_item-select.png); background-repeat: no-repeat; background-position: 0px 0px; height: 663px; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; width: 1033px; margin-right: auto; margin-left: auto; } /* シーン紹介エリア ------------------------*/ #sceneArea { background-color: #fff; height: 920px; } #sceneArea #headline01 { background-image: url(../img/images_sceneArea.png); background-repeat: no-repeat; background-position: 0px 0px; height: 210px; width: 100%; text-indent: 100%; white-space: nowrap; display: block; overflow: hidden; } #sceneArea ul { padding: 0; width: 100%; margin-top: 41px; margin-right: 0; margin-bottom: 0; margin-left: 0; } #sceneArea ul #scene01 { background-image: url(../img/images_sceneArea.png); background-repeat: no-repeat; background-position: 0px -247px; height: 181px; width: 331px; float: left; } #sceneArea ul #scene02 { background-image: url(../img/images_sceneArea.png); background-repeat: no-repeat; background-position: -350px -247px; height: 320px; width: 331px; float: left; margin-left: 15px; } #sceneArea ul #scene03 { background-image: url(../img/images_sceneArea.png); background-repeat: no-repeat; background-position: -701px -247px; height: 320px; width: 331px; float: right; } #sceneArea ul #scene04 { background-image: url(../img/images_sceneArea.png); background-repeat: no-repeat; background-position: 0px -588px; height: 181px; width: 331px; float: left; } #sceneArea ul #scene05 { background-image: url(../img/images_sceneArea.png); background-repeat: no-repeat; background-position: -350px -588px; height: 320px; width: 331px; float: left; margin-left: 15px; } #sceneArea ul #scene06 { background-image: url(../img/images_sceneArea.png); background-repeat: no-repeat; background-position: -701px -588px; height: 320px; width: 331px; float: right; } #scene01 h3, #scene02 h3, #scene03 h3,#scene04 h3, #scene05 h3, #scene06 h3 { color: #33c1e4; font-weight: 700; text-align: center; margin-top: 204px; font-size: 155%; } #scene01 p, #scene02 p, #scene03 p, #scene04 p, #scene05 p, #scene06 p { color: #33c1e4; margin-top: 16px; padding: 10px; font-size: 16px; line-height: 23px; text-align: center; } /*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* トップページ（20160614追加） *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/ /* グローバルナビMENU項目追加 ------------------------*/ #head_right { width: 645px; } #head_right nav ul .menu06 a { background-position: -1047px -143px; } #head_right nav ul .menu06 a:hover { background-position: -1047px -192px; } #head_right nav ul .menu07 a { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -953px -143px; height: 39px; margin-right: 12px; width: 94px; display: block; } #head_right nav ul .menu07 a:hover { background-image: url(../img/images.png); background-repeat: no-repeat; background-position: -953px -192px; height: 39px; width: 94px; } #head_right nav ul .menu01 a, #head_right nav ul .menu02 a, #head_right nav ul .menu03 a, #head_right nav ul .menu04 a, #head_right nav ul .menu05 a { margin-right: 12px; } /*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* フォーム周り（20160616追加） *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/ .comp dt span.subtit_pc { font-weight: bold; margin-top: 20px; display: inline-block; } .comp dt span.subtit_carrier { font-weight: bold; margin-top: 10px; display: inline-block; } /*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* J∞QUALITYページ（20160721追加） *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/ #j_qualityArea #main #business_re #section01 { background-image: url(../img/jquality_images_pc.png); background-repeat: no-repeat; background-position: 0px 0px; margin: 0px; padding: 0px; height: 466px; width: 850px; } #j_qualityArea #main #business_re #section02 { background-image: url(../img/jquality_images_pc.png); background-repeat: no-repeat; background-position: 0px -466px; margin: 0px; padding: 0px; height: 441px; width: 850px; } #j_qualityArea #main #business_re #section03 { background-image: url(../img/jquality_images_pc.png); background-repeat: no-repeat; background-position: 0px -907px; margin: 0px; padding: 0px; height: 1192px; width: 850px; } /*ボタン エリア*/ #j_qualityArea .btnArea { overflow: hidden; text-indent: 100%; white-space: nowrap; } #j_qualityArea .btnArea a { width: 850px; height: 277px; margin: 0 auto; text-align: center; display: block; background: url(../img/btn_orig_item.png) center no-repeat; padding-top: 30px; } #j_qualityArea .btnArea a:hover { width: 850px; height: 277px; margin: 0 auto; text-align: center; display: block; background: url(../img/btn_orig_item_hover.png) center no-repeat; padding-top: 30px; } /*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* トップページ　J∞QUALITYバナー（20160805追加） *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/ #qc ul #qc_sec06 { background-image: url(../img/qc.png); background-repeat: no-repeat; height: 387px; width: 1024px; background-position: 0px -1812px; } li#qc_sec06 a { display: block; height: 387px; width: 1024px; } li#qc_sec06:hover { opacity: .8; } #qc ul #qc_sec05 { height: 202px; }