@charset "utf-8"; html { overflow-y: scroll; } img { vertical-align: top; } ul, ol { list-style: none; letter-spacing: -0.4em; } ul li, ol li { letter-spacing: normal; } /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } nav ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; } ins { background-color: #ff9; color: #000; text-decoration: none; } mark { background-color: #ff9; color: #000; font-style: italic; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } /* YUI 3.4.1 (build 4118) Copyright 2011 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */ body { font: 13px/1.231 arial, helvetica, clean, sans-serif; *font-size: small; *font: x-small; } select, input, button, textarea { font: 99% arial,helvetica,clean,sans-serif; } table { font-size: inherit; font: 100%; } pre, code, kbd, samp, tt { font-family: monospace; *font-size: 108%; line-height: 100%; } /* clearfix */ .clearfix { *zoom: 1; } .clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } /* font-smoothing */ html { height: 100%; min-height: 100%; } body { height: 100%; min-height: 100%; line-height: 1; color: #333333; font-family: "メイリオ", "ヒラギノ角ゴ Pro W1", "Hiragino Kaku Gothic Pro", Osaka, "Meiryo", "MS Pゴシック", "MS PGothic", Sans-Serif; font-size: 14px; } body a { font-size: 14px; } body a:link { color: #666666; text-decoration: none; } body a:hover { color: #666666; text-decoration: none; opacity: 0.7; } body a:visited { color: #666666; text-decoration: none; } body a:active { color: #666666; text-decoration: none; } body p { font-size: 14px; line-height: 1.6em; } body #page-top { position: fixed; bottom: 67px; right: 20px; font-size: 77%; z-index: 100; } body #page-top a { background: #666; text-decoration: none; color: #fff; width: 39px; height: 39px; padding: 0; text-align: center; display: block; } body #page-top a:hover { text-decoration: none; background-image: url("/images/pagetop_on.gif"); } body #page-top a:hover img { opacity: 0; } body #wrapper { width: 100%; overflow: hidden; } body #wrapper #contents { position: relative; z-index: 1; padding-bottom: 20px; } body #wrapper header { width: 100%; background-image: url("/images/bg_round.png"); background-repeat: no-repeat; background-position: center bottom; height: 170px; position: relative; z-index: 5; } body #wrapper header .wrap { background-image: url("/images/bg_header.png"); background-repeat: repeat; background-position: center 10px; height: 130px; margin: 0 auto; } body #wrapper header .wrap .hgroup { display: table; width: 960px; margin: 0 auto; padding-top: 36px; position: relative; } body #wrapper header .wrap .hgroup .headline { display: table-cell; vertical-align: middle; color: #ffffff; font-size: 11px; font-weight: normal; text-align: left; } body #wrapper header .wrap .hgroup .logo { display: table-cell; vertical-align: middle; color: #ffffff; width: 134px; text-align: center; } body #wrapper header .wrap .hgroup .information { display: table-cell; vertical-align: middle; color: #ffffff; font-size: 11px; font-weight: normal; text-align: right; } body #wrapper header .wrap .hgroup .menu { letter-spacing: -0.4em; position: absolute; top: 0; right: 0; } body #wrapper header .wrap .hgroup .menu a { letter-spacing: normal; display: inline-block; width: 48px; height: 36px; background-color: rgba(255, 255, 255, 0.2); text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 7px; margin: 0 4px; -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; -ms-border-radius: 0 0 6px 6px; -o-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; float: left; } body #wrapper header .wrap .navigation_header { width: 960px; margin: 0 auto; padding-top: 14px; } body #wrapper header .wrap .navigation_header ul { letter-spacing: -0.4em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-image: url("/images/navi_line.png"); background-repeat: no-repeat; background-position: right center; } body #wrapper header .wrap .navigation_header ul li { letter-spacing: normal; display: inline-block; text-align: center; width: 20%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-image: url("/images/navi_line.png"); background-repeat: no-repeat; background-position: left center; } body #wrapper header .wrap .navigation_header ul li a { width: 100%; height: 56px; padding-top: 20px; display: block; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body footer { width: 100%; background-color: #54617d; } body footer .wrap { width: 960px; margin: 0 auto; padding: 48px 0; } body footer .wrap .left { float: left; width: 480px; color: #fff; } body footer .wrap .left h4 { font-size: 18px; line-height: 1.7em; font-weight: normal; } body footer .wrap .left p { margin-top: 20px; } body footer .wrap .left p a { color: #fff; text-decoration: underline; } body footer .wrap .right { float: left; width: 480px; } body footer .wrap .right .navigation_footer ul { float: left; width: 220px; } body footer .wrap .right .navigation_footer ul:first-child { margin-right: 30px; } body footer .wrap .right .navigation_footer ul li { height: 24px; } body footer .wrap .right .navigation_footer ul li a { display: block; color: #fff; background-image: url("/images/icon_arrow_footer.png"); background-repeat: no-repeat; background-position: left center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 14px; } body footer .copyright { clear: both; background-color: #29395d; color: #ffffff; font-size: 11px; text-align: center; height: 60px; line-height: 60px; } #sub-column #snav_calendar h2 { background-image: none; } #sub-column #subc_calendar { /*background: url(../img/BGline-scolumn.gif) repeat left top;*/ padding: 8px; width: 194px; margin-bottom: 20px; } #sub-column div.subc_cal_cont { background-color: #FFF; width: 164px; padding: 10px 15px 15px 15px; } #sub-column div#subc_calendar h2 { width: 164px; text-align: center; padding: 21px 0 3px 0; margin: 0 0 10px 0; border-bottom: 1px dotted #333; /*background: url(../img/Title-scolumn_calendar.gif) no-repeat;*/ background-position: center; } #sub-column div.cal_wrapper { padding: 7px 0 0 0; } #sub-column div.cal_wrapper table.cal { width: 100%; line-height: 130%; } #sub-column div.cal_wrapper table.cal tr th p.month { float: left; width: 70%; text-align: center; font-size: 80%; } #sub-column div.cal_wrapper table.cal tr th input { float: left; border: none; } #sub-column div.cal_wrapper table.cal tr th input.prev { background: url(../img/calendar_pleft.gif) no-repeat left bottom white; width: 15%; height: 17px; } #sub-column div.cal_wrapper table.cal tr th input.next { background: url(../img/calendar_pright.gif) no-repeat right bottom white; width: 15%; height: 17px; } #sub-column div.cal_wrapper table.cal tr td { border: solid 1px #CCC; font-size: 70%; text-align: center; } #sub-column div.cal_wrapper table.cal tr.headline td { border: none; padding: 10px 0 2px 0; } #sub-column div.subc_cal_cont .cap { font-size: 60%; font-family: "MS ゴシック", "MS Gothic", "Osaka-等幅", Osaka-mono, monospace; width: auto; } #sub-column div.subc_cal_cont .cap ul { margin: 3px 0 0; } #sub-column div.subc_cal_cont .cap li { display: inline-block; line-height: 140%; overflow: hidden; } #sub-column div.subc_cal_cont .cap li span { margin: 0 10px 0 0; } #sub-column div.subc_cal_cont .cap .ico_cap01 { font-size: 120%; vertical-align: middle; margin: 0 2px 0 0; color: #FF5078; } #sub-column div.subc_cal_cont .cap .ico_cap02 { font-size: 120%; vertical-align: middle; margin: 0 2px 0 0; color: #39F; } #sub-column div.subc_cal_cont .cap .cap-info { line-height: 140%; padding: 10px 0 0; } #sub-column div.cal_wrapper table.cal tr td div.Today { background-color: #eee; font-weight: bold; } #sub-column div.cal_wrapper table.cal tr td div.Deli { background-color: #EFE; } #sub-column div.cal_wrapper table.cal tr td div.Holyday { background-color: #FF5078; color: #FFFFFF; } #sub-column div.cal_wrapper table.cal tr td div.backward { color: #CCC; font-weight: normal; background-color: #FFF; } #sub-column div.cal_wrapper table.cal tr td div.pointer { cursor: pointer; } #sub-column div.cal_wrapper table.cal tr td div.pointer:hover { background-color: #EEE; } #sub-column #snav_mailMag { background: url(../img/BGline-scolumn.gif) repeat left top; padding: 8px; width: 194px; margin-bottom: 20px; } @media screen and (max-width: 979px) { /*---------------------------------------------------- (タブレット) ----------------------------------------------------*/ } @media screen and (max-width: 767px) { /*---------------------------------------------------- (スマホ) ----------------------------------------------------*/ } body #wrapper .main_visual { top: -42px; width: 960px; height: 520px; margin: 0 auto; position: relative; z-index: 1; } body #wrapper .main_visual .list_slide { text-align: center; z-index: 100 !important; } body #wrapper .main_visual .list_slide .owl-stage-outer { overflow: visible; } body #wrapper .main_visual .list_slide .item { display: block; } body #wrapper .main_visual .preview { position: absolute; left: -10px; top: 50%; margin: -21px; filter: Alpha(Opacity=50); opacity: 0.5; cursor: pointer; z-index: 101; } body #wrapper .main_visual .next { position: absolute; right: -10px; top: 50%; margin: -21px; filter: Alpha(Opacity=50); opacity: 0.5; cursor: pointer; z-index: 101; } body #wrapper .main_visual + #contents { margin-top: -42px; } body #wrapper #contents { overflow: hidden; width: 960px; margin: 0 auto; padding-top: 20px; } body #wrapper #contents article { display: block; float: right; overflow: hidden; width: 720px; } body #wrapper #contents #main-column { margin-left: 20px; float: right; margin-left: 20px; width: 720px; overflow: hidden; } body #wrapper #contents #main-column .list_future { padding-bottom: 20px; } body #wrapper #contents #main-column .list_future ul { letter-spacing: -0.4em; } body #wrapper #contents #main-column .list_future ul li { letter-spacing: normal; display: inline-block; vertical-align: top; margin-bottom: 10px; float: left; } body #wrapper #contents #main-column .list_future ul li:nth-child(even) { margin-left: 10px; } body #wrapper #contents #main-column .ranking { margin-top: 20px; } body #wrapper #contents #main-column .ranking:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } body #wrapper #contents #main-column .ranking h2 { background-image: url("/images/headline_ranking.png"); background-repeat: no-repeat; background-position: left center; height: 24px; overflow: hidden; text-indent: 100%; white-space: nowrap; margin-bottom: 20px; } body #wrapper #contents #main-column .ranking section { letter-spacing: normal; display: inline-block; vertical-align: top; margin-bottom: 30px; float: left; width: 230px; background-image: url("/images/item_dotted.png"); background-repeat: repeat-x; background-position: center bottom; margin-left: 15px; padding-bottom: 42px; position: relative; } body #wrapper #contents #main-column .ranking section:first-child { margin-left: 0; } body #wrapper #contents #main-column .ranking section:first-child + * + * + * { margin-left: 0; } body #wrapper #contents #main-column .ranking section .itemThumb-wrap { border: solid 1px #cccccc; text-align: center; overflow: hidden; } body #wrapper #contents #main-column .ranking section .itemThumb-wrap .badge { position: absolute; top: 1px; left: 1px; z-index: 10; } body #wrapper #contents #main-column .ranking section .itemThumb-wrap .itemThumb a { display: block; } body #wrapper #contents #main-column .ranking section .itemThumb-wrap .itemThumb a span { display: block; width: 230px; } body #wrapper #contents #main-column .ranking section .itemThumb-wrap .itemThumb a span img { width: auto; height: 230px; } body #wrapper #contents #main-column .ranking h3 { display: block; padding-top: 10px; font-weight: normal; } body #wrapper #contents #main-column .ranking h3 a { color: #000; font-size: 16px; line-height: 1.4em; } body #wrapper #contents #main-column .ranking .price { display: block; padding-top: 10px; color: #fe0000; font-size: 17px; position: absolute; bottom: 15px; left: 0; } body #wrapper #contents #main-column .pickup { margin-top: 20px; } body #wrapper #contents #main-column .pickup:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } body #wrapper #contents #main-column .pickup h2 { background-image: url("/images/headline_recommend.png"); background-repeat: no-repeat; background-position: left center; height: 24px; overflow: hidden; text-indent: 100%; white-space: nowrap; margin-bottom: 20px; } body #wrapper #contents #main-column .pickup section { letter-spacing: normal; display: inline-block; vertical-align: top; margin-bottom: 30px; float: left; width: 168px; background-image: url("/images/item_dotted.png"); background-repeat: repeat-x; background-position: center bottom; margin-left: 15px; padding-bottom: 42px; position: relative; } body #wrapper #contents #main-column .pickup section:first-child { margin-left: 0; } body #wrapper #contents #main-column .pickup section:first-child + * + * + * + * { margin-left: 0; } body #wrapper #contents #main-column .pickup section .itemThumb-wrap { border: solid 1px #cccccc; text-align: center; overflow: hidden; } body #wrapper #contents #main-column .pickup section .itemThumb-wrap .badge { position: absolute; top: 1px; left: 1px; z-index: 10; } body #wrapper #contents #main-column .pickup section .itemThumb-wrap .itemThumb a { display: block; } body #wrapper #contents #main-column .pickup section .itemThumb-wrap .itemThumb a span { display: block; width: 168px; } body #wrapper #contents #main-column .pickup section .itemThumb-wrap .itemThumb a span img { width: auto; height: 168px; } body #wrapper #contents #main-column .pickup h3 { display: block; padding-top: 10px; font-weight: normal; } body #wrapper #contents #main-column .pickup h3 a { color: #000; font-size: 16px; line-height: 1.4em; } body #wrapper #contents #main-column .pickup .price { display: block; padding-top: 10px; color: #fe0000; font-size: 17px; position: absolute; bottom: 15px; left: 0; } body #wrapper #contents #main-column .list_ranking { margin-top: 30px; } body #wrapper #contents #main-column .list_ranking h2 { margin-bottom: 20px; } body #wrapper #contents #main-column .list_ranking ul { letter-spacing: -0.4em; } body #wrapper #contents #main-column .list_ranking ul li { letter-spacing: normal; display: inline-block; vertical-align: top; margin-bottom: 30px; float: left; width: 230px; height: 296px; background-image: url("/images/item_dotted.png"); background-repeat: repeat-x; background-position: center bottom; margin-left: 15px; position: relative; } body #wrapper #contents #main-column .list_ranking ul li:first-child { margin-left: 0; } body #wrapper #contents #main-column .list_ranking ul li:first-child + * + * + * { margin-left: 0; } body #wrapper #contents #main-column .list_ranking ul li a { display: block; width: 100%; height: 100%; } body #wrapper #contents #main-column .list_ranking ul li a img.border { border: solid 1px #cccccc; } body #wrapper #contents #main-column .list_ranking ul li a .title { display: block; padding-top: 10px; color: #000; font-size: 16px; } body #wrapper #contents #main-column .list_ranking ul li a .value { display: block; padding-top: 10px; color: #fe0000; font-size: 12px; } body #wrapper #contents #main-column .list_ranking ul li a .icon_ranking { position: absolute; top: 1px; left: 1px; } body #wrapper #contents #main-column .list_recommend { margin-top: 30px; } body #wrapper #contents #main-column .list_recommend h2 { margin-bottom: 20px; } body #wrapper #contents #main-column .list_recommend ul { letter-spacing: -0.4em; } body #wrapper #contents #main-column .list_recommend ul li { letter-spacing: normal; display: inline-block; vertical-align: top; margin-bottom: 30px; float: left; width: 170px; height: 240px; background-image: url("/images/item_dotted.png"); background-repeat: repeat-x; background-position: center bottom; margin-left: 12px; position: relative; } body #wrapper #contents #main-column .list_recommend ul li:first-child { margin-left: 0; } body #wrapper #contents #main-column .list_recommend ul li:first-child + * + * + * + * { margin-left: 0; } body #wrapper #contents #main-column .list_recommend ul li a { display: block; width: 100%; height: 100%; } body #wrapper #contents #main-column .list_recommend ul li a img.border { border: solid 1px #cccccc; } body #wrapper #contents #main-column .list_recommend ul li a .title { display: block; padding-top: 10px; color: #000; font-size: 16px; } body #wrapper #contents #main-column .list_recommend ul li a .value { display: block; padding-top: 10px; color: #fe0000; font-size: 12px; } body #wrapper #contents #main-column .list_recommend ul li a .icon_ranking { position: absolute; top: 1px; left: 1px; } body #wrapper #contents #main-column .guide_area { border: solid 1px #cccccc; padding: 30px 20px; margin-top: 20px; } body #wrapper #contents #main-column .guide_area h2 { text-align: center; } body #wrapper #contents #main-column .guide_area .box_container { width: 320px; } body #wrapper #contents #main-column .guide_area .box_container h3 { background-color: #e0e3ec; font-size: 16px; text-align: left; padding: 10px; margin-top: 20px; margin-bottom: 16px; } body #wrapper #contents #main-column .guide_area .box_container p { margin-bottom: 4px; } body #wrapper #contents #main-column .guide_area .box_container p a { text-decoration: underline; } body #wrapper #contents #main-column .guide_area .box_container p.image { text-align: left; } body #wrapper #contents #main-column .guide_area .left { float: left; } body #wrapper #contents #main-column .guide_area .right { float: right; } body #wrapper #sub-column { float: left; width: 220px; overflow: hidden; } body #wrapper #sub-column .searchbox { letter-spacing: -0.4em; height: 28px; border: solid 1px #777777; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body #wrapper #sub-column .searchbox .title { letter-spacing: normal; display: inline-block; vertical-align: top; } body #wrapper #sub-column .searchbox form { letter-spacing: normal; display: inline-block; vertical-align: top; } body #wrapper #sub-column .searchbox form input.inputbox { width: 124px; height: 24px; border: none; outline: none; -webkit-appearance: none; } body #wrapper #sub-column .side_navigation { padding: 10px 0; } body #wrapper #sub-column .side_navigation ul li { background-color: #e9ebee; } body #wrapper #sub-column .side_navigation ul li a { display: block; height: 74px; border-top: solid 1px #ffffff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; background-image: url("/images/icon_arrow_open.png"); background-repeat: no-repeat; background-position: right center; } body #wrapper #sub-column .side_navigation ul li a.open { background-image: url("/images/icon_arrow_close.png"); } body #wrapper #sub-column .side_navigation ul li a.once { background-image: url("/images/icon_arrow.png"); background-position: 204px center; } body #wrapper #sub-column .side_navigation ul li ul { display: none; } body #wrapper #sub-column .side_navigation ul li ul li a { height: 34px; background-image: url("/images/icon_arrow.png"); background-repeat: no-repeat; background-position: 8px center; padding: 10px 0 0 22px; width: 90%; margin: 0 auto; font-size: 12px; background-size: 5px; } body #wrapper #sub-column .side_navigation ul li ul li ul { display: block; } body #wrapper #sub-column .side_navigation ul li ul li ul li a { background-position: 16px center; padding-left: 28px; font-size: 11px; background-size: 4px; } body #wrapper #sub-column .side_navigation ul li ul li ul li ul li a { background-position: 24px center; padding-left: 42px; } body #wrapper #sub-column .bnr_area { padding-bottom: 10px; } body #wrapper #sub-column .bnr_area li { margin-top: 10px; } @media screen and (max-width: 979px) { /*---------------------------------------------------- (タブレット) ----------------------------------------------------*/ } @media screen and (max-width: 767px) { /*---------------------------------------------------- (スマホ) ----------------------------------------------------*/ } body #wrapper #contents #main-column-full .guide_area { border: solid 1px #cccccc; padding: 30px 20px; margin: 20px auto; width: 678px; } body #wrapper #contents #main-column-full .guide_area h2 { text-align: center; } body #wrapper #contents #main-column-full .guide_area .box_container { width: 320px; } body #wrapper #contents #main-column-full .guide_area .box_container h3 { background-color: #e0e3ec; font-size: 16px; text-align: left; padding: 10px; margin-top: 20px; margin-bottom: 16px; } body #wrapper #contents #main-column-full .guide_area .box_container p { margin-bottom: 4px; } body #wrapper #contents #main-column-full .guide_area .box_container p a { text-decoration: underline; } body #wrapper #contents #main-column-full .guide_area .box_container p.image { text-align: left; } body #wrapper #contents #main-column-full .guide_area .left { float: left; } body #wrapper #contents #main-column-full .guide_area .right { float: right; }