@charset "UTF-8"; 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%; vertical-align: baseline; background: transparent; font-weight: normal; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } img { vertical-align: bottom; } ul, ol { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: none; } a { margin: 0; padding: 0; vertical-align: baseline; background: transparent; } ins { background-color: #ff9; color: #000; text-decoration: none; } mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; border: 1px solid #ddd; } address { font-style: normal; } /* form */ button, fieldset, form, input, label, legend, select, textarea { font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0; padding: 0; vertical-align: baseline; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } /* For IE 6/7 (trigger hasLayout) */ .clearfix { zoom: 1; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } input, button, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; } * { -webkit-box-sizing: border-box; box-sizing: border-box; } *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .img-responsive, .wrap_img-responsive img { display: block; max-width: 100%; height: auto; margin: auto; } .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } .container-fluid { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } .row { margin-left: -15px; margin-right: -15px; } .clearfix:before, .clearfix:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after { content: " "; display: table; } .clearfix:after, .container:after, .container-fluid:after, .row:after { clear: both; } .center-block { display: block; margin-left: auto; margin-right: auto; } .pull-right { float: right !important; } .pull-left { float: left !important; } /* ======================================== containerの幅を変更 ======================================== */ @media (min-width: 768px) { .container { width: 100%; } } @media (min-width: 992px) { .container { width: 100%; } } @media (min-width: 1026px) { .container { max-width: 1026px; } } /* ======================================== 間隔を70pxに拡張 ======================================== */ /* .container{ padding-left: 35px; padding-right: 35px; } */ .row-70 { overflow: hidden; margin-left: -35px; margin-right: -35px; } .row-70 > [class^="col-"], .row-70 > [class*=" col-"] { padding-left: 35px; padding-right: 35px; } /* ======================================== 間隔を50pxに拡張 ======================================== */ /* .container{ padding-left: 25px; padding-right: 25px; } */ .row-50 { overflow: hidden; margin-left: -25px; margin-right: -25px; } .row-50 > [class^="col-"], .row-50 > [class*=" col-"] { padding-left: 25px; padding-right: 25px; } /* ======================================== 間隔を40pxに拡張 ======================================== */ /* .container{ padding-left: 20px; padding-right: 20px; } */ .row-40 { margin-left: -20px; margin-right: -20px; } .row-40 > [class^="col-"], .row-40 > [class*=" col-"] { padding-left: 20px; padding-right: 20px; } /* ======================================== 間隔を20pxに縮小 ======================================== */ /* .container{ padding-left: 10px; padding-right: 10px; } */ .row-20 { margin-left: -10px; margin-right: -10px; } .row-20 > [class^="col-"], .row-20 > [class*=" col-"] { padding-left: 10px; padding-right: 10px; } /* ======================================== 間隔を10pxに縮小 ======================================== */ /* .container{ padding-left: 5px; padding-right: 5px; } */ .row-10 { margin-left: -5px; margin-right: -5px; } .row-10 > [class^="col-"], .row-10 > [class*=" col-"] { padding-left: 5px; padding-right: 5px; } /* ======================================== 間隔を0に ======================================== */ /* .container{ padding-left: 0; padding-right: 0; } */ .row-pad0 { margin-left: 0; margin-right: 0; } .row-pad0 > [class^="col-"], .row-pad0 > [class*=" col-"] { padding-left: 0; padding-right: 0; } .row-pad5 { margin-left: -5px; margin-right: -5px; } .row-pad5 [class^="col"], .row-pad5 [class*=" col"] { padding-left: 5px; padding-right: 5px; } .row-pad10 { margin-left: -10px; margin-right: -10px; } .row-pad10 [class^="col"], .row-pad10 [class*=" col"] { padding-left: 10px; padding-right: 10px; } /* ======================================== pull-left ======================================== */ @media only screen and (min-width: 480px), print and (max-width: 1cm) { .pull-xs−left { float: left !important; } .pull-xs−left + [class^="col-"] .img-responsive, .pull-xs−left + [class^="col-"] .wrap_img-responsive img, .wrap_img-responsive .pull-xs−left + [class^="col-"] img, .pull-xs−left [class*=" col-"] .img-responsive, .pull-xs−left [class*=" col-"] .wrap_img-responsive img, .wrap_img-responsive .pull-xs−left [class*=" col-"] img { width: 100%; } } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .pull-sm−left { float: left !important; } .pull-sm−left + [class^="col-"] .img-responsive, .pull-sm−left + [class^="col-"] .wrap_img-responsive img, .wrap_img-responsive .pull-sm−left + [class^="col-"] img, .pull-sm−left [class*=" col-"] .img-responsive, .pull-sm−left [class*=" col-"] .wrap_img-responsive img, .wrap_img-responsive .pull-sm−left [class*=" col-"] img { width: 100%; } } @media only screen and (min-width: 992px), print and (min-width: 2cm) { .pull-md−left { float: left !important; } .pull-md−left + [class^="col-"] .img-responsive, .pull-md−left + [class^="col-"] .wrap_img-responsive img, .wrap_img-responsive .pull-md−left + [class^="col-"] img, .pull-md−left [class*=" col-"] .img-responsive, .pull-md−left [class*=" col-"] .wrap_img-responsive img, .wrap_img-responsive .pull-md−left [class*=" col-"] img { width: 100%; } } @media only screen and (min-width: 1200px), print and (min-width: 2cm) { .pull-lg−left { float: left !important; } .pull-lg−left + [class^="col-"] .img-responsive, .pull-lg−left + [class^="col-"] .wrap_img-responsive img, .wrap_img-responsive .pull-lg−left + [class^="col-"] img, .pull-lg−left [class*=" col-"] .img-responsive, .pull-lg−left [class*=" col-"] .wrap_img-responsive img, .wrap_img-responsive .pull-lg−left [class*=" col-"] img { width: 100%; } } /* ======================================== pull-right ======================================== */ @media only screen and (min-width: 480px), print and (max-width: 1cm) { .pull-xs−right { float: right !important; } .pull-xs−right + [class^="col-"] .img-responsive, .pull-xs−right + [class^="col-"] .wrap_img-responsive img, .wrap_img-responsive .pull-xs−right + [class^="col-"] img, .pull-xs−right [class*=" col-"] .img-responsive, .pull-xs−right [class*=" col-"] .wrap_img-responsive img, .wrap_img-responsive .pull-xs−right [class*=" col-"] img { width: 100%; } } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .pull-sm−right { float: right !important; } .pull-sm−right + [class^="col-"] .img-responsive, .pull-sm−right + [class^="col-"] .wrap_img-responsive img, .wrap_img-responsive .pull-sm−right + [class^="col-"] img, .pull-sm−right [class*=" col-"] .img-responsive, .pull-sm−right [class*=" col-"] .wrap_img-responsive img, .wrap_img-responsive .pull-sm−right [class*=" col-"] img { width: 100%; } } @media only screen and (min-width: 992px), print and (min-width: 2cm) { .pull-md−right { float: right !important; } .pull-md−right + [class^="col-"] .img-responsive, .pull-md−right + [class^="col-"] .wrap_img-responsive img, .wrap_img-responsive .pull-md−right + [class^="col-"] img, .pull-md−right [class*=" col-"] .img-responsive, .pull-md−right [class*=" col-"] .wrap_img-responsive img, .wrap_img-responsive .pull-md−right [class*=" col-"] img { width: 100%; } } @media only screen and (min-width: 1200px), print and (min-width: 2cm) { .pull-lg−right { float: right !important; } .pull-lg−right + [class^="col-"] .img-responsive, .pull-lg−right + [class^="col-"] .wrap_img-responsive img, .wrap_img-responsive .pull-lg−right + [class^="col-"] img, .pull-lg−right [class*=" col-"] .img-responsive, .pull-lg−right [class*=" col-"] .wrap_img-responsive img, .wrap_img-responsive .pull-lg−right [class*=" col-"] img { width: 100%; } } /* ======================================== br ======================================== */ /*br-XX-block*/ .br-xs-block { display: none; } @media only screen and (min-width: 480px), print and (max-width: 1cm) { .br-xs-block { display: inline-block; } } .br-sm-block { display: none; } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .br-sm-block { display: inline-block; } } .br-md-block { display: none; } @media only screen and (min-width: 992px), print and (min-width: 2cm) { .br-md-block { display: inline-block; } } .br-lg-block { display: none; } @media only screen and (min-width: 1200px), print and (min-width: 2cm) { .br-lg-block { display: inline-block; } } /*br-XX-none*/ @media only screen and (min-width: 480px), print and (max-width: 1cm) { .br-xs-none { display: none; } } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .br-sm-none { display: none; } } @media only screen and (min-width: 992px), print and (min-width: 2cm) { .br-md-none { display: none; } } @media only screen and (min-width: 1200px), print and (min-width: 2cm) { .br-lg-none { display: none; } } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .br-sm-min-none { display: none; } } .br-xs-min-block { display: none; } @media only screen and (max-width: 479px), print and (max-width: 1cm) { .br-xs-min-block { display: inline-block; } } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .mb1e-sm-min { margin-bottom: 1em; } } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .mb2e-sm-min { margin-bottom: 2em; } } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .mb3e-sm-min { margin-bottom: 2em; } } .img-center .img-responsive, .img-center .wrap_img-responsive img, .wrap_img-responsive .img-center img { margin: 0 auto; } /* ======================================== グリッド　5等分.col-XX-1-5　追加ver ======================================== */ .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } .col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col-xs-1, .col-xs-1-5, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: none; width: 100%; } .col-xxs-1, .col-xxs-1-5, .col-xxs-2, .col-xxs-3, .col-xxs-4, .col-xxs-5, .col-xxs-6, .col-xxs-7, .col-xxs-8, .col-xxs-9, .col-xxs-10, .col-xxs-11, .col-xxs-12 { float: left; position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } .col-xxs-12 { width: 100%; } .col-xxs-11 { width: 91.66666667%; } .col-xxs-10 { width: 83.33333333%; } .col-xxs-9 { width: 75%; } .col-xxs-8 { width: 66.66666667%; } .col-xxs-7 { width: 58.33333333%; } .col-xxs-6 { width: 50%; } .col-xxs-5 { width: 41.66666667%; } .col-xxs-4 { width: 33.33333333%; } .col-xxs-3 { width: 25%; } .col-xxs-2 { width: 16.66666667%; } .col-xxs-1-5 { width: 20%; } .col-xxs-1 { width: 8.33333333%; } .col-xxs-pull-12 { right: 100%; } .col-xxs-pull-11 { right: 91.66666667%; } .col-xxs-pull-10 { right: 83.33333333%; } .col-xxs-pull-9 { right: 75%; } .col-xxs-pull-8 { right: 66.66666667%; } .col-xxs-pull-7 { right: 58.33333333%; } .col-xxs-pull-6 { right: 50%; } .col-xxs-pull-5 { right: 41.66666667%; } .col-xxs-pull-4 { right: 33.33333333%; } .col-xxs-pull-3 { right: 25%; } .col-xxs-pull-2 { right: 16.66666667%; } .col-xxs-pull-1 { right: 8.33333333%; } .col-xxs-pull-0 { right: auto; } .col-xxs-push-12 { left: 100%; } .col-xxs-push-11 { left: 91.66666667%; } .col-xxs-push-10 { left: 83.33333333%; } .col-xxs-push-9 { left: 75%; } .col-xxs-push-8 { left: 66.66666667%; } .col-xxs-push-7 { left: 58.33333333%; } .col-xxs-push-6 { left: 50%; } .col-xxs-push-5 { left: 41.66666667%; } .col-xxs-push-4 { left: 33.33333333%; } .col-xxs-push-3 { left: 25%; } .col-xxs-push-2 { left: 16.66666667%; } .col-xxs-push-1 { left: 8.33333333%; } .col-xxs-push-0 { left: auto; } .col-xxs-offset-12 { margin-left: 100%; } .col-xxs-offset-11 { margin-left: 91.66666667%; } .col-xxs-offset-10 { margin-left: 83.33333333%; } .col-xxs-offset-9 { margin-left: 75%; } .col-xxs-offset-8 { margin-left: 66.66666667%; } .col-xxs-offset-7 { margin-left: 58.33333333%; } .col-xxs-offset-6 { margin-left: 50%; } .col-xxs-offset-5 { margin-left: 41.66666667%; } .col-xxs-offset-4 { margin-left: 33.33333333%; } .col-xxs-offset-3 { margin-left: 25%; } .col-xxs-offset-2 { margin-left: 16.66666667%; } .col-xxs-offset-1 { margin-left: 8.33333333%; } .col-xxs-offset-0 { margin-left: 0%; } @media (min-width: 480px) { .col-xs-1, .col-xs-1-5, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; } .col-xs-12 { width: 100%; } .col-xs-11 { width: 91.66666667%; } .col-xs-10 { width: 83.33333333%; } .col-xs-9 { width: 75%; } .col-xs-8 { width: 66.66666667%; } .col-xs-7 { width: 58.33333333%; } .col-xs-6 { width: 50%; } .col-xs-5 { width: 41.66666667%; } .col-xs-4 { width: 33.33333333%; } .col-xs-3 { width: 25%; } .col-xs-2 { width: 16.66666667%; } .col-xs-1-5 { width: 20%; } .col-xs-1 { width: 8.33333333%; } .col-xs-pull-12 { right: 100%; } .col-xs-pull-11 { right: 91.66666667%; } .col-xs-pull-10 { right: 83.33333333%; } .col-xs-pull-9 { right: 75%; } .col-xs-pull-8 { right: 66.66666667%; } .col-xs-pull-7 { right: 58.33333333%; } .col-xs-pull-6 { right: 50%; } .col-xs-pull-5 { right: 41.66666667%; } .col-xs-pull-4 { right: 33.33333333%; } .col-xs-pull-3 { right: 25%; } .col-xs-pull-2 { right: 16.66666667%; } .col-xs-pull-1 { right: 8.33333333%; } .col-xs-pull-0 { right: auto; } .col-xs-push-12 { left: 100%; } .col-xs-push-11 { left: 91.66666667%; } .col-xs-push-10 { left: 83.33333333%; } .col-xs-push-9 { left: 75%; } .col-xs-push-8 { left: 66.66666667%; } .col-xs-push-7 { left: 58.33333333%; } .col-xs-push-6 { left: 50%; } .col-xs-push-5 { left: 41.66666667%; } .col-xs-push-4 { left: 33.33333333%; } .col-xs-push-3 { left: 25%; } .col-xs-push-2 { left: 16.66666667%; } .col-xs-push-1 { left: 8.33333333%; } .col-xs-push-0 { left: auto; } .col-xs-offset-12 { margin-left: 100%; } .col-xs-offset-11 { margin-left: 91.66666667%; } .col-xs-offset-10 { margin-left: 83.33333333%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-offset-8 { margin-left: 66.66666667%; } .col-xs-offset-7 { margin-left: 58.33333333%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-offset-5 { margin-left: 41.66666667%; } .col-xs-offset-4 { margin-left: 33.33333333%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-offset-2 { margin-left: 16.66666667%; } .col-xs-offset-1 { margin-left: 8.33333333%; } .col-xs-offset-0 { margin-left: 0%; } } @media (min-width: 768px) { .col-sm-1, .col-sm-1-5, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; } .col-sm-12 { width: 100%; } .col-sm-11 { width: 91.66666667%; } .col-sm-10 { width: 83.33333333%; } .col-sm-9 { width: 75%; } .col-sm-8 { width: 66.66666667%; } .col-sm-7 { width: 58.33333333%; } .col-sm-6 { width: 50%; } .col-sm-5 { width: 41.66666667%; } .col-sm-4 { width: 33.33333333%; } .col-sm-3 { width: 25%; } .col-sm-2 { width: 16.66666667%; } .col-sm-1-5 { width: 20%; } .col-sm-1 { width: 8.33333333%; } .col-sm-pull-12 { right: 100%; } .col-sm-pull-11 { right: 91.66666667%; } .col-sm-pull-10 { right: 83.33333333%; } .col-sm-pull-9 { right: 75%; } .col-sm-pull-8 { right: 66.66666667%; } .col-sm-pull-7 { right: 58.33333333%; } .col-sm-pull-6 { right: 50%; } .col-sm-pull-5 { right: 41.66666667%; } .col-sm-pull-4 { right: 33.33333333%; } .col-sm-pull-3 { right: 25%; } .col-sm-pull-2 { right: 16.66666667%; } .col-sm-pull-1 { right: 8.33333333%; } .col-sm-pull-0 { right: auto; } .col-sm-push-12 { left: 100%; } .col-sm-push-11 { left: 91.66666667%; } .col-sm-push-10 { left: 83.33333333%; } .col-sm-push-9 { left: 75%; } .col-sm-push-8 { left: 66.66666667%; } .col-sm-push-7 { left: 58.33333333%; } .col-sm-push-6 { left: 50%; } .col-sm-push-5 { left: 41.66666667%; } .col-sm-push-4 { left: 33.33333333%; } .col-sm-push-3 { left: 25%; } .col-sm-push-2 { left: 16.66666667%; } .col-sm-push-1 { left: 8.33333333%; } .col-sm-push-0 { left: auto; } .col-sm-offset-12 { margin-left: 100%; } .col-sm-offset-11 { margin-left: 91.66666667%; } .col-sm-offset-10 { margin-left: 83.33333333%; } .col-sm-offset-9 { margin-left: 75%; } .col-sm-offset-8 { margin-left: 66.66666667%; } .col-sm-offset-7 { margin-left: 58.33333333%; } .col-sm-offset-6 { margin-left: 50%; } .col-sm-offset-5 { margin-left: 41.66666667%; } .col-sm-offset-4 { margin-left: 33.33333333%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-2 { margin-left: 16.66666667%; } .col-sm-offset-1 { margin-left: 8.33333333%; } .col-sm-offset-0 { margin-left: 0%; } } @media (min-width: 992px) { .col-md-1, .col-md-1-5, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; } .col-md-12 { width: 100%; } .col-md-11 { width: 91.66666667%; } .col-md-10 { width: 83.33333333%; } .col-md-9 { width: 75%; } .col-md-8 { width: 66.66666667%; } .col-md-7 { width: 58.33333333%; } .col-md-6 { width: 50%; } .col-md-5 { width: 41.66666667%; } .col-md-4 { width: 33.33333333%; } .col-md-3 { width: 25%; } .col-md-2 { width: 16.66666667%; } .col-md-1-5 { width: 20%; } .col-md-1 { width: 8.33333333%; } .col-md-pull-12 { right: 100%; } .col-md-pull-11 { right: 91.66666667%; } .col-md-pull-10 { right: 83.33333333%; } .col-md-pull-9 { right: 75%; } .col-md-pull-8 { right: 66.66666667%; } .col-md-pull-7 { right: 58.33333333%; } .col-md-pull-6 { right: 50%; } .col-md-pull-5 { right: 41.66666667%; } .col-md-pull-4 { right: 33.33333333%; } .col-md-pull-3 { right: 25%; } .col-md-pull-2 { right: 16.66666667%; } .col-md-pull-1 { right: 8.33333333%; } .col-md-pull-0 { right: auto; } .col-md-push-12 { left: 100%; } .col-md-push-11 { left: 91.66666667%; } .col-md-push-10 { left: 83.33333333%; } .col-md-push-9 { left: 75%; } .col-md-push-8 { left: 66.66666667%; } .col-md-push-7 { left: 58.33333333%; } .col-md-push-6 { left: 50%; } .col-md-push-5 { left: 41.66666667%; } .col-md-push-4 { left: 33.33333333%; } .col-md-push-3 { left: 25%; } .col-md-push-2 { left: 16.66666667%; } .col-md-push-1 { left: 8.33333333%; } .col-md-push-0 { left: auto; } .col-md-offset-12 { margin-left: 100%; } .col-md-offset-11 { margin-left: 91.66666667%; } .col-md-offset-10 { margin-left: 83.33333333%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-8 { margin-left: 66.66666667%; } .col-md-offset-7 { margin-left: 58.33333333%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-5 { margin-left: 41.66666667%; } .col-md-offset-4 { margin-left: 33.33333333%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-2 { margin-left: 16.66666667%; } .col-md-offset-1 { margin-left: 8.33333333%; } .col-md-offset-0 { margin-left: 0%; } } @media (min-width: 1200px) { .col-lg-1, .col-lg-1-5, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; } .col-lg-12 { width: 100%; } .col-lg-11 { width: 91.66666667%; } .col-lg-10 { width: 83.33333333%; } .col-lg-9 { width: 75%; } .col-lg-8 { width: 66.66666667%; } .col-lg-7 { width: 58.33333333%; } .col-lg-6 { width: 50%; } .col-lg-5 { width: 41.66666667%; } .col-lg-4 { width: 33.33333333%; } .col-lg-3 { width: 25%; } .col-lg-2 { width: 16.66666667%; } .col-lg-1-5 { width: 20%; } .col-lg-1 { width: 8.33333333%; } .col-lg-pull-12 { right: 100%; } .col-lg-pull-11 { right: 91.66666667%; } .col-lg-pull-10 { right: 83.33333333%; } .col-lg-pull-9 { right: 75%; } .col-lg-pull-8 { right: 66.66666667%; } .col-lg-pull-7 { right: 58.33333333%; } .col-lg-pull-6 { right: 50%; } .col-lg-pull-5 { right: 41.66666667%; } .col-lg-pull-4 { right: 33.33333333%; } .col-lg-pull-3 { right: 25%; } .col-lg-pull-2 { right: 16.66666667%; } .col-lg-pull-1 { right: 8.33333333%; } .col-lg-pull-0 { right: auto; } .col-lg-push-12 { left: 100%; } .col-lg-push-11 { left: 91.66666667%; } .col-lg-push-10 { left: 83.33333333%; } .col-lg-push-9 { left: 75%; } .col-lg-push-8 { left: 66.66666667%; } .col-lg-push-7 { left: 58.33333333%; } .col-lg-push-6 { left: 50%; } .col-lg-push-5 { left: 41.66666667%; } .col-lg-push-4 { left: 33.33333333%; } .col-lg-push-3 { left: 25%; } .col-lg-push-2 { left: 16.66666667%; } .col-lg-push-1 { left: 8.33333333%; } .col-lg-push-0 { left: auto; } .col-lg-offset-12 { margin-left: 100%; } .col-lg-offset-11 { margin-left: 91.66666667%; } .col-lg-offset-10 { margin-left: 83.33333333%; } .col-lg-offset-9 { margin-left: 75%; } .col-lg-offset-8 { margin-left: 66.66666667%; } .col-lg-offset-7 { margin-left: 58.33333333%; } .col-lg-offset-6 { margin-left: 50%; } .col-lg-offset-5 { margin-left: 41.66666667%; } .col-lg-offset-4 { margin-left: 33.33333333%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-offset-2 { margin-left: 16.66666667%; } .col-lg-offset-1 { margin-left: 8.33333333%; } .col-lg-offset-0 { margin-left: 0%; } } /* ------------------------------------------------------------ フレーム ------------------------------------------------------------ */ .mt_0 { margin-top: 0 !important; } .mt_5 { margin-top: 5px !important; } .mt_10 { margin-top: 10px !important; } .mt_15 { margin-top: 15px !important; } .mt_20 { margin-top: 20px !important; } .mt_25 { margin-top: 25px !important; } .mt_30 { margin-top: 30px !important; } .mt_35 { margin-top: 35px !important; } .mt_40 { margin-top: 40px !important; } .mt_1em { margin-top: 1em !important; } .mt_2em { margin-top: 2em !important; } .mt_3em { margin-top: 3em !important; } .mt_4em { margin-top: 4em !important; } .mr_0 { margin-right: 0 !important; } .mr_5 { margin-right: 5px !important; } .mr_10 { margin-right: 10px !important; } .mr_15 { margin-right: 15px !important; } .mr_20 { margin-right: 20px !important; } .mr_25 { margin-right: 25px !important; } .mr_30 { margin-right: 30px !important; } .mr_35 { margin-right: 35px !important; } .mr_40 { margin-right: 40px !important; } .mb_0 { margin-bottom: 0 !important; } .mb_5 { margin-bottom: 5px !important; } .mb_10 { margin-bottom: 10px !important; } .mb_15 { margin-bottom: 15px !important; } .mb_20 { margin-bottom: 20px !important; } .mb_25 { margin-bottom: 25px !important; } .mb_30 { margin-bottom: 30px !important; } .mb_35 { margin-bottom: 35px !important; } .mb_40 { margin-bottom: 40px !important; } .mb_1em { margin-bottom: 1em !important; } .mb_2em { margin-bottom: 2em !important; } .mb_3em { margin-bottom: 3em !important; } .mb_4em { margin-bottom: 4em !important; } .ml_0 { margin-left: 0 !important; } .ml_5 { margin-left: 5px !important; } .ml_10 { margin-left: 10px !important; } .ml_15 { margin-left: 15px !important; } .ml_20 { margin-left: 20px !important; } .ml_25 { margin-left: 25px !important; } .ml_30 { margin-left: 30px !important; } .ml_35 { margin-left: 35px !important; } .ml_40 { margin-left: 40px !important; } .pt_0 { padding-top: 0 !important; } .pt_5 { padding-top: 5px !important; } .pt_10 { padding-top: 10px !important; } .pt_15 { padding-top: 15px !important; } .pt_20 { padding-top: 20px !important; } .pt_25 { padding-top: 25px !important; } .pt_30 { padding-top: 30px !important; } .pt_35 { padding-top: 35px !important; } .pt_40 { padding-top: 40px !important; } .pr_0 { padding-right: 0 !important; } .pr_5 { padding-right: 5px !important; } .pr_10 { padding-right: 10px !important; } .pr_15 { padding-right: 15px !important; } .pr_20 { padding-right: 20px !important; } .pr_25 { padding-right: 25px !important; } .pr_30 { padding-right: 30px !important; } .pr_35 { padding-right: 35px !important; } .pr_40 { padding-right: 40px !important; } .pr_1em { padding-right: 1em !important; } .pb_0 { padding-bottom: 0 !important; } .pb_5 { padding-bottom: 5px !important; } .pb_10 { padding-bottom: 10px !important; } .pb_15 { padding-bottom: 15px !important; } .pb_20 { padding-bottom: 20px !important; } .pb_25 { padding-bottom: 25px !important; } .pb_30 { padding-bottom: 30px !important; } .pb_35 { padding-bottom: 35px !important; } .pb_40 { padding-bottom: 40px !important; } .pl_0 { padding-left: 0 !important; } .pl_5 { padding-left: 5px !important; } .pl_10 { padding-left: 10px !important; } .pl_15 { padding-left: 15px !important; } .pl_20 { padding-left: 20px !important; } .pl_25 { padding-left: 25px !important; } .pl_30 { padding-left: 30px !important; } .pl_35 { padding-left: 35px !important; } .pl_40 { padding-left: 40px !important; } .pl_1em { padding-left: 1em !important; } .img_responsive { display: block; width: 100%; height: auto; } .hover:hover { opacity: 0.8; text-decoration: none; } .clear { clear: both; } .lefty { float: left; } .righty { float: right; } .pos_rel { position: relative; } /* ------------------------------ テキスト ------------------------------ */ .txt__center { text-align: center !important; } .txt__right { text-align: right !important; } .txt__left { text-align: left !important; } .txt__justify { text-justify: inter-ideograph; text-align: justify; } .txt__paragraph { text-justify: inter-ideograph; text-align: justify; } .txt__paragraph2 { text-justify: inter-ideograph; text-align: justify; margin-top: 2em; } .txt__paragraph + .txt__paragraph, .txt__paragraph2 + .txt__paragraph { margin-top: 1em; } .txt__indent { display: block; text-indent: -1em; margin-left: 1em; } .txt__block { margin-top: 1em; } .txt__lead { margin-bottom: 30px; } .txt__sub_lead { margin-bottom: 20px; } .txt__small { font-size: 0.7em; } .txt__shadow_white { text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8), 0px 0px 2px white; } .txt__uppercase { text-transform: uppercase; } .txt__white_space { overflow: hidden; text-indent: 100%; white-space: nowrap; } .txt__strong { font-weight: bold; } .txt__color_main { color: #676F78; } .small__basic { font-size: 0.8em; letter-spacing: 0; } .nowrap { white-space: nowrap; } .visible { visibility: visible !important; } .disnon { display: none; } /* タイトルに隣接するテキストの調整 */ @media only screen and (min-width: 768px), print and (min-width: 2cm) { .br_none { display: none; } } /* ------------------------------ タイトル ------------------------------ */ [class^="ttl__"] img, [class*=" ttl__"] img { max-width: 100%; height: auto; margin: auto; } /* ウエイト順 */ .ttl__2border_top { position: relative; margin-bottom: 10px; padding: 15px 0; border-top: 4px solid #676F78; text-align: center; } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .ttl__2border_top { margin-bottom: 20px; } } .ttl__2border_top:after { content: ""; position: absolute; top: 2px; right: 0; bottom: auto; left: 0; border-top: 1px solid #666; } .ttl__before_short_hr { padding-bottom: 20px !important; margin-bottom: 15px; } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .ttl__before_short_hr { margin-bottom: 0; } } .ttl__before_short_hr:before { display: block; content: ""; position: absolute; top: auto; bottom: 0px; left: 0px; right: 0px; width: 3em; margin: auto; border-bottom: 2px solid #DDD; } .ttl__solid_fill_black { font-size: 18px; font-size: 1.8rem; line-height: 1.7; position: relative; margin-bottom: 1em; padding: 0.6em 0.2em 0.4em; background-color: #676F78; color: #fff; font-weight: bold; text-align: center; } .ttl__solid_fill_black:after { content: ""; position: absolute; top: 3px; right: 0; bottom: auto; left: 0; border-top: 1px solid #fff; } .ttl__2border_top_txt { font-size: 24px; font-size: 2.4rem; line-height: 1.7; font-weight: bold; line-height: 1.2; } .ttl__2border_top_txt:first-letter { color: #676F78; } .ttl__border_top_bottom { font-size: 16px; font-size: 1.6rem; line-height: 1.7; margin-bottom: 1em; padding: 0.4em 0.3em; border-top: 2px solid #000; border-bottom: 2px solid #000; font-weight: bold; text-align: center; } .ttl__solid_fill_gray { font-size: 16px; font-size: 1.6rem; line-height: 1.7; position: relative; margin-bottom: 1em; padding: 0.6em 0.2em 0.4em; background-color: #eee; color: #666; font-weight: bold; text-align: center; } .ttl__solid_fill_gray:after { content: ""; position: absolute; top: 3px; right: 0; bottom: auto; left: 0; border-top: 1px solid #fff; } .wrap__ttl_more { position: relative; } .wrap__ttl_more .txt__more { position: absolute; right: 0; bottom: 12px; } .wrap__ttl_more .txt__more a { display: block; background-color: #676F78; } .wrap__ttl_more .txt__more a img { vertical-align: middle; line-height: 1; margin: 8px 10px 9px; } .txt__more { height: 30px; text-align: center; } .txt__more a { display: block; background-color: #676F78; } .txt__more a img { vertical-align: middle; line-height: 1; margin: 8px 10px 9px; } .ttl__shop_facebook { font-size: 16px; font-size: 1.6rem; line-height: 1.7; position: relative; padding: 0.6em 0.2em 0.4em; background-color: #3B5998; color: #fff; font-weight: bold; text-align: center; } .ttl__shop_facebook:after { content: ""; position: absolute; top: 3px; right: 0; bottom: auto; left: 0; border-top: 1px solid #fff; } .ttl__shop_twitter { font-size: 16px; font-size: 1.6rem; line-height: 1.7; position: relative; padding: 0.6em 0.2em 0.4em; background-color: #00A8E8; color: #fff; font-weight: bold; text-align: center; } .ttl__shop_twitter:after { content: ""; position: absolute; top: 3px; right: 0; bottom: auto; left: 0; border-top: 1px solid #fff; } .ttl__shop_ameba { font-size: 16px; font-size: 1.6rem; line-height: 1.7; position: relative; padding: 0.6em 0.2em 0.4em; background-color: #01B933; color: #fff; font-weight: bold; text-align: center; } .ttl__shop_ameba:after { content: ""; position: absolute; top: 3px; right: 0; bottom: auto; left: 0; border-top: 1px solid #fff; } .ttl__solid_fill { padding: 7px 0 7px 1em; background-color: #676F78; color: #fff; font-weight: bold; font-size: 18px; font-size: 1.8rem; line-height: 1.7; letter-spacing: 0.1em; } .ttl__back_number { font-size: 20px; font-size: 2rem; line-height: 1.7; border-bottom: 1px solid #676F78; color: #676F78; font-weight: bold; text-align: center; } .ttl__left_square { font-size: 17px; font-size: 1.7rem; line-height: 1.7; position: relative; margin-bottom: 1.3em; padding: 0.4em 0 0.4em 1.4em; background-color: #faeae5; border-bottom: 1px solid #676F78; color: #676F78; font-weight: bold; letter-spacing: 0.1em; } .ttl__left_square:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 0.8em; height: 0.8em; margin: auto; background-color: #676F78; } .ttl__left_border { font-size: 16px; font-size: 1.6rem; line-height: 1.7; margin-bottom: 1.3em; padding: 0.2em 0 0.2em 0.7em; border-left: 5px solid #676F78; font-weight: bold; letter-spacing: 0.1em; } .ttl__left_bottom_border { font-size: 17px; font-size: 1.7rem; line-height: 1.7; position: relative; margin-bottom: 1.3em; padding: 0.2em 0 0.4em 1em; border-bottom: 1px solid #ccc; color: #666; font-weight: bold; letter-spacing: 0.1em; } .ttl__left_bottom_border:after { content: ""; position: absolute; top: 0; bottom: 4px; left: 0; border-left: 5px solid #676F78; } .ttl__left_border_fill { font-size: 17px; font-size: 1.7rem; line-height: 1.7; position: relative; margin-bottom: 15px; padding: 0.45em 0 0.45em 1.5em; background-color: #fbfbfb; border: 1px solid #ddd; color: #DCDCDC; font-weight: bold; letter-spacing: 0.1em; } .ttl__left_border_fill:before { position: absolute; top: 8px; left: 11px; bottom: 8px; display: block; content: ""; border-left: 5px solid #DCDCDC; } .ttl__bg_color_sub { font-size: 17px; font-size: 1.7rem; line-height: 1.7; padding: 0.4em; background-color: #DCDCDC; color: #fff; font-weight: bold; } .ttl__bold_color_main { font-size: 15px; font-size: 1.5rem; line-height: 1.7; margin-bottom: 0.7em; color: #676F78; font-weight: bold; } /* ------------------------------ リンク ------------------------------ */ .link__bgc_gray a, .list__link__bgc_gray a { position: relative; display: block; padding: 0.8em 1em; background-color: #ddd; border-top: 1px solid #fff; color: #333 !important; font-weight: bold; } .link__bgc_gray a:after, .list__link__bgc_gray a:after { position: absolute; content: ">"; display: block; height: 1em; top: 0; right: 0.5em; bottom: 0; left: auto; margin: auto; color: #676F78; font-size: 1.7em; font-weight: normal; line-height: 1; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); vertical-align: middle; } .list__link__bgc_gray { overflow: hidden; } .list__link__bgc_gray li { width: 50%; float: left; } .list__link__bgc_gray li:nth-child(2n+1) { border-right: 1px solid #fff; } /* ------------------------------ リスト ------------------------------ */ .ul__lines { margin-top: -0.4em; } .ul__lines > li { margin-top: 0.4em; } .ul__decimal { padding-left: 1.8em; } .ul__decimal > li { margin-top: 0.4em; list-style-type: decimal; } .ul__disc { padding-left: 1.4em; } .ul__disc > li { margin-top: 0.4em; list-style: disc; } .ul__square { position: relative; } .ul__square > li { background-image: none; padding-left: 1.3em; } .ul__square > li:before { content: "■"; position: absolute; left: 0; } .ul__square__link li a { position: relative; padding-left: 1.3em !important; } .ul__square__link li a:before { font-size: 12px; font-size: 1.2rem; line-height: 1.3; content: "■"; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; height: 1em; line-height: 1; color: #676F78; } /* ------------------------------ テーブル ------------------------------ */ .table__basic, .table__basic_thin { width: 100%; } .table__basic caption, .table__basic_thin caption { padding: 0.8em 1.5em; background-color: #41586F; color: #FFF; } .table__basic th, .table__basic_thin th, .table__basic td, .table__basic_thin td { padding: 0.8em 1.5em; vertical-align: middle; } .table__basic th, .table__basic_thin th { border: 1px solid #eee; background-color: #eee; border-bottom: 1px solid #fff; } .table__basic tr:last-child th, .table__basic_thin tr:last-child th { border-bottom: 1px solid #eee; } .table__basic td, .table__basic_thin td { border: 1px solid #eee; } .table__basic .inner__table th, .table__basic_thin .inner__table th, .table__basic .inner__table td, .table__basic_thin .inner__table td { padding: 0; border: none; vertical-align: top; } .table__basic .inner__table th, .table__basic_thin .inner__table th { background: none; } .table__basic .inner__table td, .table__basic_thin .inner__table td { text-indent: -1em; padding-left: 1em; } .table__basic_thin th, .table__basic_thin td { padding: 0.5em; white-space: normal; } .table__th_nowrap tbody th { min-width: 10%; white-space: nowrap; } .thead__strong { border-bottom: 2px solid #bbb; } .thead__strong th { background-color: #41586f; color: #fff; border: 1px solid #fff; border-top: 1px solid #41586f; border-bottom: 1px solid #41586f; text-align: center; } .thead__strong th:first-child { border-left: 1px solid #41586f; text-align: left; } .thead__strong th:last-child { border-right: 1px solid #41586f; } .thead__second { border-bottom: 2px solid #bbb; } .thead__second th { background-color: #eee; text-align: center; } .thead__second th:first-child { text-align: left; } .table__th_fill th, .table__th_fill td { vertical-align: middle; } .table__th_fill th { padding: 0.5em 1em; background-color: #DCDCDC; color: #fff; text-align: center; white-space: nowrap; } .table__th_fill td { padding: 0.5em 0 0.5em 1em; } .table__th_fill_continue { margin-top: -20px; border-collapse: separate; border-spacing: 0 25px; } .td_fill { background-color: #cae2e8; } /* ------------------------------ ボタン ------------------------------ */ /* ------------------------------ その他 ------------------------------ */ .after_ttl { margin-top: -0.4em; } .slide_toggle dt { margin-bottom: 1em; padding-right: 2em; color: #676F78; cursor: pointer; background: url(/foreign/img/icon_arrow_down_pink.gif) no-repeat right top; } .slide_toggle dt.active { background: url(/foreign/img/icon_arrow_up_pink.gif) no-repeat right top; } .slide_toggle dd { display: none; margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #eee; } .faqBox .slide_toggle dt { position: relative; padding-left: 1.5em; } .faqBox .slide_toggle dt:before { content: "Q."; display: block; position: absolute; left: 0; top: 0; } .faqBox .slide_toggle dd { display: none; } /* ------------------------------ SNSボタン ------------------------------ */ .socialbtn { margin-top: 1em; } .socialbtn .btn_shopinfo { padding: 10px 0; } /* ------------------------------ アイテム・コーデ情報 ------------------------------ */ #items #photoSlide, #coordinateInfo #photoSlide { visibility: hidden; margin-bottom: 30px; } @media only screen and (min-width: 480px), print and (max-width: 1cm) { #items #photoSlide, #coordinateInfo #photoSlide { float: left; width: 52%; margin-bottom: 0; } } #items #photoSlide .bx-wrapper .bx-viewport, #coordinateInfo #photoSlide .bx-wrapper .bx-viewport { -webkit-box-shadow: none; box-shadow: none; border: none; left: 0; } #items #photoSlide #bxSlider, #coordinateInfo #photoSlide #bxSlider { overflow: hidden; *zoom: 1; } #items #photoSlide #bxSlider img, #coordinateInfo #photoSlide #bxSlider img { margin: auto; max-width: none; width: 100%; height: auto; } #items .nosilder #bxSlider, #coordinateInfo .nosilder #bxSlider { margin: 0 auto; width: auto; } #items .nosilder #bxSlider li, #coordinateInfo .nosilder #bxSlider li { text-align: center; } #items .nosilder #bxSlider li img, #coordinateInfo .nosilder #bxSlider li img { display: block; margin: 0 auto; max-width: 100%; } #items .bx-wrapper, #coordinateInfo .bx-wrapper { margin-bottom: 0; } #items #bx-pager, #coordinateInfo #bx-pager { padding: 15px 0 0 0; margin-right: -4px; margin-left: -4px; overflow: hidden; *zoom: 1; } #items #bx-pager li, #coordinateInfo #bx-pager li { float: left; width: 25%; padding: 0 4px 8px 4px; } #items #bx-pager li img, #coordinateInfo #bx-pager li img { width: 100%; height: auto; } #items #bx-pager li a, #coordinateInfo #bx-pager li a { display: block; border: solid 1px #CCC; padding: 2px; opacity: 1; -webkit-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1); /* easeOutQuart */ } #items #bx-pager .active, #coordinateInfo #bx-pager .active { border: 1px #E50065 solid; cursor: default; } #items .no-opacity #bx-pager li a, #coordinateInfo .no-opacity #bx-pager li a { filter: alpha(opacity=100); } #items .msov #bx-pager li a, #coordinateInfo .msov #bx-pager li a { opacity: .5; } #items .msov #bx-pager .motarget, #coordinateInfo .msov #bx-pager .motarget { opacity: 1; } #items .no-opacity ul.msov li a, #coordinateInfo .no-opacity ul.msov li a { filter: alpha(opacity=50); } #items .no-opacity ul.msov .motarget, #coordinateInfo .no-opacity ul.msov .motarget { filter: alpha(opacity=100); } @media only screen and (min-width: 480px), print and (max-width: 1cm) { #items #infoTxt, #coordinateInfo #infoTxt { float: right; width: 48%; padding-left: 30px; } } #items #infoTxt .shopInfo, #coordinateInfo #infoTxt .shopInfo { padding: 20px 0; min-height: 40px; border-top: 1px solid #000; } #items #infoTxt .itemSocials, #coordinateInfo #infoTxt .itemSocials { overflow: hidden; } #items #infoTxt .itemSocials .socialbtn, #coordinateInfo #infoTxt .itemSocials .socialbtn { float: left; margin: 0 10px 30px 0; } #items .item_attribute .dl_attribute, #coordinateInfo .item_attribute .dl_attribute { overflow: hidden; } #items .item_attribute .dl_attribute + .dl_attribute, #coordinateInfo .item_attribute .dl_attribute + .dl_attribute { margin-top: 20px; } #items .item_attribute .dl_attribute dt, #coordinateInfo .item_attribute .dl_attribute dt { margin-bottom: 4px; padding-bottom: 2px; border-bottom: 1px solid #000; font-size: 117%; /*14px*/ font-weight: bold; } #items .ciImg, #coordinateInfo .ciImg { text-align: center; } #items .info_header, #coordinateInfo .info_header { margin-bottom: 15px; } #items .ciShop, #coordinateInfo .ciShop { margin-bottom: 5px; color: #E50065; font-weight: bold; font-size: 134%; /*16px*/ } #items .ciTitle, #coordinateInfo .ciTitle { font-weight: bold; font-size: 134%; /*16px*/ line-height: 1.5; } #items .price, #coordinateInfo .price { font-weight: bold; font-size: 167%; /*20px*/ } #items .ciTxt, #coordinateInfo .ciTxt { padding: 35px 0; } #items .ciFloor, #coordinateInfo .ciFloor { margin-bottom: 1em; } #items .backtoList, #coordinateInfo .backtoList { margin-top: 30px; text-align: center; border: 1px solid #676F78; padding: 0.8em 1em; } /* ------------------------------ タブ ------------------------------ */ .tabNav { margin-bottom: 30px; padding: 0 15px; border-bottom: 1px solid #000; } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .tabNav #tab { display: table; width: 100%; } } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .tabNav #tab { overflow: hidden; display: block; background-color: #f3f3f3; } .tabNav #tab.auto { overflow: visible; display: table; width: 100%; background-color: transparent; } .tabNav #tab.auto .active { border: 1px solid #000; border-bottom: none; } } .tabNav #tab li { display: table-cell; vertical-align: middle; height: 100%; position: relative; bottom: -1px; border: 1px solid transparent; border-bottom: none; } .tabNav #tab li.active { background-color: #fff; } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .tabNav #tab li.active { border: 1px solid #000; border-bottom: none; } } .tabNav #tab li.active a { color: #676F78; } .tabNav #tab li.active span { font-weight: bold; } .tabNav #tab li:hover a { color: #676F78; } .tabNav #tab li a { display: table; width: 100%; height: 100%; padding: 8px; color: #000; text-align: center; text-decoration: none; } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .tabNav #tab li a { padding: 12px 8px; } } .tabNav #tab li a span { display: table-cell; vertical-align: middle; } .catNav { margin-top: 25px; border-bottom: 1px solid #000; } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .catNav #tabCatNav { display: table; width: 100%; } } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .catNav #tabCatNav { overflow: hidden; display: block; background-color: #eee; } } .catNav #tabCatNav li { display: table-cell; vertical-align: middle; height: 100%; position: relative; bottom: -1px; border: 1px solid transparent; border-bottom: none; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .catNav #tabCatNav li { display: block; float: left; width: 50%; border-bottom: 1px solid #fff; } } @media only screen and (max-width: 479px), print and (max-width: 1cm) { .catNav #tabCatNav li { width: 50%; } .catNav #tabCatNav li.cat2, .catNav #tabCatNav li.cat3, .catNav #tabCatNav li.category2, .catNav #tabCatNav li.category3 { width: 100%; } } .catNav #tabCatNav li.active { background-color: #fff; } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .catNav #tabCatNav li.active { border: 1px solid #000; border-bottom: none; } } .catNav #tabCatNav li.active a { color: #676F78; } .catNav #tabCatNav li.active span { font-weight: bold; } .catNav #tabCatNav li:hover a { color: #676F78; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .catNav #tabCatNav li.cat1 br, .catNav #tabCatNav li.cat2 br, .catNav #tabCatNav li.cat3 br, .catNav #tabCatNav li.cat5 br, .catNav #tabCatNav li.category0 br, .catNav #tabCatNav li.category2 br, .catNav #tabCatNav li.category3 br, .catNav #tabCatNav li.category5 br { display: none; } } .catNav #tabCatNav li a { display: table; width: 100%; height: 100%; padding: 8px; color: #000; text-align: center; text-decoration: none; } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .catNav #tabCatNav li a { padding: 12px 8px; } } .catNav #tabCatNav li a span { display: table-cell; vertical-align: middle; } /* ------------------------------ 検索結果 ------------------------------ */ #resultBox { border-bottom: solid 2px #676F78; } #resultBox a { color: #000; text-decoration: none; } #resultBox .resultTable dl { display: table; width: 100%; } #resultBox .resultTable dl:hover { background-color: #676F78 !important; } #resultBox .resultTable dl:hover dt, #resultBox .resultTable dl:hover dd, #resultBox .resultTable dl:hover .sIntro { color: #fff; } #resultBox .resultTable dl dt, #resultBox .resultTable dl dd { display: table-cell; padding: 5px 10px; vertical-align: middle; } #resultBox .resultTable dl dt { vertical-align: middle; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { #resultBox .resultTable dl .sName { display: block; padding-bottom: 0; font-weight: bold; } #resultBox .resultTable dl .sCat { float: left; width: auto; } #resultBox .resultTable dl .sFloor { float: right; width: auto; } } #resultBox .resultTable.even { background-color: #EEE; } #resultBox .resultTableTheader dl { display: table; width: 100%; background-color: #676F78; } #resultBox .resultTableTheader dl dt, #resultBox .resultTableTheader dl dd { display: table-cell; padding: 5px 10px; vertical-align: middle; color: #fff; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { #resultBox .resultTableTheader dl .sName, #resultBox .resultTableTheader dl .sCat { float: left; } #resultBox .resultTableTheader dl .sCat, #resultBox .resultTableTheader dl .sFloor { width: auto; } #resultBox .resultTableTheader dl .sFloor { float: right; } } #resultBox .sCat { width: 254px; } #resultBox .sFloor { width: 78px; text-align: center; } #resultBox .sIntro { display: block; margin-bottom: 2px; font-size: 80%; color: #777; } /* ------------------------------ 画像ズーム ------------------------------ */ .zoom_cont_wrap { position: relative; overflow: hidden; } .zoom_cont_wrap .zoom_inner { position: relative; cursor: move; } .zoom_cont_wrap .zoom_inner img { width: 100%; height: auto; } .zoom_cont_wrap .zoom .zoom_inner img { width: auto !important; height: auto !important; } .zoom_btn { position: absolute; top: 0; right: 0; width: 50px; height: 50px; background: url(../../floorguide/img/btn_zoom_off.png) no-repeat 0 0; cursor: pointer; } .zoom_btn.active { background: url(../../floorguide/img/btn_zoom_on.png) no-repeat 0 0; } #foreign .zoom_btn { background: url(../foreign/img/btn_zoom_en_off.png) no-repeat 0 0; } #foreign .zoom_btn.active { background: url(../foreign/img/btn_zoom_en_on.png) no-repeat 0 0; } /* ------------------------------ ボタン ------------------------------ */ .btn__style01 { text-align: center; } .btn__style01 .btn-item { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-width: 110px; height: 40px; padding: 0 1.5em 0 1em; border: solid 1px currentColor; background: url(../img/arrow2.png) no-repeat center right 6px/14px auto; -webkit-transition: all .3s; transition: all .3s; color: #676F78; text-align: center; line-height: 1.3; } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .btn__style01 .btn-item { font-size: 14px; font-size: 1.4rem; line-height: 1.7; } } .btn__style01 .btn-item:hover { background-color: #676F78; background-image: url(../img/arrow2_white.png); opacity: 1; color: #fff; text-decoration: none; } .sidr { display: none; position: absolute; position: fixed; top: 0; height: 100%; z-index: 999999; width: 260px; overflow-x: none; overflow-y: auto; font-size: 15px; background-color: #ddd; } .sidr .sidr-inner > p { margin-left: 15px; margin-right: 15px; } .sidr.right { left: auto; right: -260px; } .sidr.left { left: -260px; right: auto; } .sidr ul { display: block; padding: 0; } .sidr-inner { padding-bottom: 0 !important; } .sidr-inner a { display: block; padding: 0.7em 0; } .sidr-inner li:last-child a { border-bottom: none !important; } #sidr-id-gNav { padding: 1em; background-color: #676F78; } #sidr-id-gNav a { border-bottom: 1px solid #fff; color: #fff !important; } .sidr-class-nav__utility { padding: 1em; } .sidr-class-nav__utility a { border-bottom: 1px solid #bbb; color: #333 !important; } /*------------------------------------------------------------ Bootstrap 上書き ------------------------------------------------------------*/ /*------------------------------------------------------------ ------------------------------------------------------------*/ html { font-size: 62.5%; } body { font-size: 12px; font-size: 1.2rem; line-height: 1.3; font-family: 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; color: #333333; line-height: 1.6; -webkit-text-size-adjust: 100%; overflow-x: hidden; } a { text-decoration: none; color: #676F78; } a:link { text-decoration: none; color: #676F78; } a:visited { text-decoration: none; color: #676F78; } a:hover { text-decoration: underline; color: #676F78; } a:focus { overflow: hidden; } #coordinateInfo .keyword, #items .keyword { overflow: hidden; margin-bottom: 35px; } #coordinateInfo .keyword p, #items .keyword p { padding: 5px 10px; background-color: #676F78; color: #fff; float: left; margin-right: 10px; margin-bottom: 5px; } /*------------------------------------------------------- ** @ wrap -------------------------------------------------------*/ #wrap { overflow: hidden; } body.sidr-animating #wrap, body.sidr-open #wrap { padding-top: 0 !important; } @media only screen and (max-width: 991px), print and (max-width: 1cm) { #wrap { padding-top: 0 !important; } } /*------------------------------------------------------- ** @ スマホ用ボトムメニュー、humber menu -------------------------------------------------------*/ .menu_active { position: fixed; } #wrap__spnav { background-color: #676F78; position: fixed; bottom: 0; z-index: 99999; width: 100%; } @media only screen and (min-width: 768px), print and (min-width: 2cm) { #wrap__spnav { display: none; } } #wrap__spnav .container { height: 80px; } #wrap__spnav #menu-bt { background-color: #EA0065; text-align: center; } #wrap__spnav .spnav { display: -webkit-box; display: -ms-flexbox; display: flex; } #wrap__spnav .spnav__item { width: 20%; } #wrap__spnav .spnav__item img { display: block; max-width: 100%; } #sp_menu_wrap .active { -webkit-transform: scale(1, 1) !important; transform: scale(1, 1) !important; -webkit-transition: -webkit-transform .2s ease-in; transition: -webkit-transform .2s ease-in; transition: transform .2s ease-in; transition: transform .2s ease-in, -webkit-transform .2s ease-in; } #sp_menu_wrap #menu { -webkit-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: bottom center; transform-origin: bottom center; z-index: 99999; overflow: auto; background-color: #fff; padding: 20px; width: 100%; position: fixed; bottom: 0; top: 0; left: 0; padding-bottom: 118px; } #sp_menu_wrap #menu ul { margin: 0px; padding: 0px; } #sp_menu_wrap #menu ul li { list-style-type: none; font-weight: bold; } #sp_menu_wrap #menu ul li a { width: 100%; display: block; background-color: #fff; border-bottom: 1px solid #efefef; text-align: left; padding: 15px 0; } #sp_menu_wrap #menu ul li .menu_sub li { font-weight: normal; } #sp_menu_wrap #menu ul li .menu_sub li a { padding-left: 20px; } #sp_menu_wrap #menu ul li .inputTextSet { text-align: center; padding: 20px; background-color: #fff; } #sp_menu_wrap #menu ul li .inputTextSet input { width: 80%; height: 30px; } #sp_menu_wrap #menu ul li .inputTextSet button { border: none; vertical-align: bottom; background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #sp_menu_wrap #menu .nav_sns a { display: inline-block; float: left; width: 50%; text-align: center; border-bottom: none; } #sp_menu_wrap #menu .site_id { border-bottom: solid 2px #676F78; text-align: center; display: block; padding-bottom: 20px; } #sp_menu_wrap #menu .site_id img { width: 30%; height: auto; } /*------------------------------------------------------- ** @ globalHeader -------------------------------------------------------*/ #header__global { overflow: hidden; position: relative; left: 0; top: 0; z-index: 10000; width: 100%; margin-bottom: 25px; padding: 25px 0; border-bottom: 2px solid #676F78; background-color: #FFF; *zoom: 1; } @media only screen and (min-width: 992px), print and (min-width: 2cm) { #header__global { position: fixed; } } @media only screen and (max-width: 767px), print and (min-width: 2cm) { #header__global { display: table; width: 100%; padding: 3.5em 15px 1em; } } body.sidr-animating #header__global, body.sidr-open #header__global { position: relative; } #header__global .site_id { max-width: 160px; width: 30%; height: auto; margin: auto; } #header__global .site_id img { max-width: 100%; height: auto; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { #header__global .site_id { display: block; vertical-align: middle; } } @media only screen and (min-width: 768px), print and (min-width: 2cm) { #header__global .site_id { position: absolute; top: auto; bottom: 25px; left: 0; right: 0; width: 160px; margin: auto; } } #header__global #wrapGnav { padding-top: 60px; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { #header__global #wrapGnav { display: none; } } #header__global #wrapGnav #gNav { overflow: hidden; *zoom: 1; } #header__global #wrapGnav #gNav li { width: 20%; float: left; } #header__global #wrapGnav #gNav li a { display: block; } @media only screen and (min-width: 768px), print and (min-width: 2cm) { #header__global #wrapGnav #gNav li a { overflow: hidden; text-indent: 100%; white-space: nowrap; } } @media only screen and (min-width: 768px), print and (min-width: 2cm) { #header__global #wrapGnav #gNav .li__gnav_shop_guide a { width: 109px; height: 32px; background: url(../img/header/gnav__shop_guide.png) no-repeat left top; text-align: left; } #header__global #wrapGnav #gNav .li__gnav_floor_guide { margin-right: 20%; } #header__global #wrapGnav #gNav .li__gnav_floor_guide a { width: 116px; height: 32px; background: url(../img/header/gnav__floor_guide.png) no-repeat left top; text-align: left; } #header__global #wrapGnav #gNav .li__gnav_shop_blog a { width: 104px; height: 32px; margin-right: 15px; background: url(../img/header/gnav__event_info.png) no-repeat left top; float: right; } #header__global #wrapGnav #gNav .li__gnav_members_app a { width: 126px; height: 32px; background: url(../img/header/gnav__members_app.png) no-repeat left top; float: right; } } #header__global .wrap__header_sub_nav { position: absolute; top: 0; left: 0; width: 100%; } #header__global #wrapNavUtility { overflow: hidden; *zoom: 1; font-size: 11px; font-size: 1.1rem; line-height: 1.3; width: 100%; background-color: #676F78; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { #header__global #wrapNavUtility { display: none; } } #header__global #wrapNavUtility .nav__utility { overflow: hidden; } #header__global #wrapNavUtility .list__utility { overflow: hidden; float: right; } #header__global #wrapNavUtility .list__utility li { position: relative; float: left; } #header__global #wrapNavUtility .list__utility li:before { position: absolute; top: 7px; bottom: 7px; left: 0; display: block; content: ""; border-right: 1px solid #fff; } #header__global #wrapNavUtility .list__utility li:first-child:before { display: none; } #header__global #wrapNavUtility .list__utility li:last-child a { margin-right: 0; } #header__global #wrapNavUtility .list__utility li a { margin: 0 1em; color: #fff; line-height: 2.3em; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { #header__global .wrap__nav__language { background-color: #676F78; } } @media only screen and (min-width: 768px), print and (min-width: 2cm) { #header__global .wrap__nav__language { margin-top: 8px; } } #header__global .wrap__nav__language .nav__language { float: right; } #header__global .wrap__nav__language .icon__global { font-size: 11px; font-size: 1.1rem; line-height: 1.3; float: left; color: #fff; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { #header__global .wrap__nav__language .icon__global { line-height: 2.5em; } } @media only screen and (min-width: 768px), print and (min-width: 2cm) { #header__global .wrap__nav__language .icon__global { overflow: hidden; text-indent: 100%; white-space: nowrap; width: 19px; height: 20px; background: url(../img/header/icon__global.png) no-repeat left center; } } #header__global .wrap__nav__language .list__language { float: left; } #header__global .wrap__nav__language .list__language:after { display: block; content: ""; clear: both; } #header__global .wrap__nav__language .list__language li { position: relative; float: left; } #header__global .wrap__nav__language .list__language li:before { position: absolute; top: 7px; bottom: 7px; left: 0; display: block; content: ""; border-right: 1px solid #333; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { #header__global .wrap__nav__language .list__language li:before { border-right: 1px solid #fff; } } #header__global .wrap__nav__language .list__language li:first-child a { margin: 0 1em 0 0.5em; } #header__global .wrap__nav__language .list__language li:first-child:before { display: none; } #header__global .wrap__nav__language .list__language li:last-child a { margin-right: 0; } #header__global .wrap__nav__language .list__language li a { margin: 0 1em; color: #333; font-size: 11px; font-size: 1.1rem; line-height: 1.3; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { #header__global .wrap__nav__language .list__language li a { color: #fff; line-height: 2.5em; } } /* ======================================== toggle-panel ======================================== */ #nav_sp { display: table-cell; vertical-align: middle; } @media only screen and (min-width: 768px), print and (min-width: 2cm) { #nav_sp { display: none; } } #panel-btn { position: relative; display: block; float: right; width: 40px; height: 40px; background-color: #676F78; -webkit-transition: 0.3s; transition: 0.3s; } #panel-btn-icon { display: block; position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; margin: -1px 0 0 -10px; background-color: #fff; -webkit-transition: 0.2s; transition: 0.2s; } #panel-btn-icon:before, #panel-btn-icon:after { display: block; content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; margin-left: -10px; background-color: #fff; -webkit-transition: 0.3s; transition: 0.3s; } #panel-btn-icon:before { margin-top: -7px; } #panel-btn-icon:after { margin-top: 5px; } #panel-btn-icon.close { background: transparent; } #panel-btn-icon.close:before, #panel-btn-icon.close:after { margin-top: 0; } #panel-btn-icon.close:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #panel-btn-icon.close:after { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } #panel { display: none; width: 100%; margin: 0; padding: 120px 0; background-color: #E3F2FD; text-align: center; } /*------------------------------------------------------- ** @ contents -------------------------------------------------------*/ #contents { margin: 0 auto 54px; } /*------------------------------------------------------- ** @ breadComb -------------------------------------------------------*/ #breadComb { margin: -0.7em 0 2em; font-size: 90%; } #breadComb li { display: inline; margin-right: 2px; } #breadComb li a { margin-right: 6px; color: #000; } #breadComb strong { font-weight: normal; color: #666C78; } /*------------------------------------------------------- ** @ main -------------------------------------------------------*/ .mainArea { margin-bottom: 70px; } .mainArea .selectArea { background-color: #fff; border: 1px solid #999; } .mainArea .selectTxt { padding: 0 30px 0 5px; line-height: 24px; } .mainArea .selectTxt::after { content: url(../img/btn__arrow_down_black_large.gif); width: 26px; height: 26px; line-height: 26px; } .mainArea input[type=text] { padding-left: 5px; line-height: 24px; border: 1px solid #999; } .section { margin-bottom: 50px; } .section_inner { margin-bottom: 30px; } /*------------------------------------------------------- ** @ news -------------------------------------------------------*/ .list__news_list li { padding: 1.5em; border-bottom: 1px solid #eee; } .list__news_list li time { font-size: 14px; font-size: 1.4rem; line-height: 1.7; display: block; color: #676F78; } .list__news_list li a { color: #333333; } .list__news_list li a:hover { color: #676F78; } .list__news_list li:first-child { padding-top: 0; } .article__news_detail header { margin-bottom: 3em; padding: 0 1.5em 1.5em; border-bottom: 1px solid #eee; } .article__news_detail time { font-size: 15px; font-size: 1.5rem; line-height: 1.7; display: block; color: #676F78; } .article__news_detail .ttl__news_detail { font-size: 18px; font-size: 1.8rem; line-height: 1.7; font-weight: bold; } .article__news_detail .list__news_detail_img { overflow: hidden; *zoom: 1; margin: 0 -5% 3em 0; padding: 0 1.5em; } .article__news_detail .list__news_detail_img li { width: 45%; float: left; margin-right: 5%; } .article__news_detail .list__news_detail_img li img { width: 100%; height: auto; } .article__news_detail .article__body { padding: 0 1.5em; line-height: 1.7; } /*------------------------------------------------------- ** @ common -------------------------------------------------------*/ .list__items li a { position: relative; overflow: hidden; display: block; background-color: #f8f8f8; } .list__items li a .itemInfo { opacity: 0; position: absolute; z-index: 1; color: #fff; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .list__items li a .itemInfo time { display: block; margin-bottom: 5px; } .list__items li a:after { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; } .list__items li a:hover:after { background-color: rgba(103, 111, 120, 0.5); } .list__items li a:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } .list__items li a:hover .itemInfo { opacity: 1; } .list__items .items__large { font-size: 15px; font-size: 1.5rem; line-height: 1.7; } .list__items .items__large .itemInfo { right: 30px; bottom: 20px; left: 30px; padding: 15px; } .list__items .items__large .itemInfo .shop_no { display: block; line-height: 1; } .list__items .maxHeight { width: auto !important; height: 100% !important; } .list__items .maxWidth { width: 100% !important; height: auto !important; } .wrap__item { overflow: hidden; *zoom: 1; } .shop_no { margin-right: 3px; } .wrap_itemImg img { position: absolute; top: 0; right: -100%; bottom: 0; left: -100%; width: auto; height: auto; max-width: 100%; max-height: 100%; vertical-align: middle; display: block; margin: auto; -webkit-transition: -webkit-transform 0.5s linear 0s; transition: -webkit-transform 0.5s linear 0s; transition: transform 0.5s linear 0s; transition: transform 0.5s linear 0s, -webkit-transform 0.5s linear 0s; } /*------------------------------------------------------- ** @ coodnite -------------------------------------------------------*/ #coodnite .list__items li a { padding-top: 133.333%; } #coodnite .list__items li a .itemInfo { right: 15px; bottom: 10px; left: 15px; padding: 5px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; } #coodnite .list__items li a .itemInfo .shop_no { display: block; line-height: 1; } #coodnite .list__items .items__large { font-size: 15px; font-size: 1.5rem; line-height: 1.7; } #coodnite .list__items .items__large .itemInfo { right: 30px; bottom: 20px; left: 30px; padding: 15px; } /*------------------------------------------------------- ** @ New Item -------------------------------------------------------*/ #newItem .list__items li a { padding-top: 100%; } #newItem .list__items li a .itemInfo { right: 0; bottom: 0; left: 0; padding: 10px; } /*------------------------------------------------------- ** @ ranking -------------------------------------------------------*/ /*------------------------------------------------------- ** @ shopBlog -------------------------------------------------------*/ #shopBlog .comment_box { position: relative; display: block; width: 100%; height: 100%; padding-top: 100%; } #shopBlog .comment_box .figure { background-color: #fff; } #shopBlog .comment_box .figure img { position: absolute; top: -100%; right: -100%; bottom: -100%; left: -100%; display: block; width: 70%; height: auto; margin: auto; } #shopBlog .text { display: table-cell; padding: 10px; vertical-align: middle; color: #fff; font-weight: bold; } #shopBlog .shop_name { margin-top: 10px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #shopBlog .shop_name .shop_no { display: block; } .flip-boards { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .flip-boards .board { position: relative; width: 100%; height: 100%; cursor: pointer; } .flip-boards .board .front, .flip-boards .board .flipped { position: absolute; width: 100%; height: 100%; text-align: center; border-radius: 0; } .flip-boards .board .front:hover { opacity: 0; } .flip-boards .board .front { color: #eee; border: 1px solid #ddd; background-color: #fff; z-index: 9999; } .flip-boards .board .flipped { display: table; color: #fff; border: 1px solid #676F78; background-color: #676F78; z-index: 999; } /*------------------------------------------------------- ** ページネーション -------------------------------------------------------*/ .list__pagination { overflow: hidden; margin-top: 25px; text-align: center; } .list__pagination li { display: inline-block; margin: 0 0.3em 0.75em; vertical-align: middle; } .list__pagination li a { display: block; width: 1.7em; border: 1px solid transparent; color: #666E78; line-height: 1.5em; -webkit-transition-property: background, color; transition-property: background, color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .list__pagination li a:hover { background-color: #687079; color: #fff; text-decoration: none; } .list__pagination li.current a { color: #fff; background-color: #687079; pointer-events: none; } .list__pagination li.prev a, .list__pagination li.next a { width: 1.7em; line-height: 1.8em; } /*------------------------------------------------------- ** @ side -------------------------------------------------------*/ .sideArea aside img { width: 100%; } .side__cont { position: relative; margin-bottom: 36px; } .side__cont:after { content: ""; position: absolute; top: auto; right: 0; bottom: -6px; left: 0; border-top: 4px solid #000; } .flguideBtn img { width: 100%; } .ttl__bk_pink { padding: 6px 0 7px; background-color: #676F78; text-align: center; } /* estInfo */ .estInfo:after { border-color: #676F78; } .estInfo .inner__estInfo { padding: 10px 0; border: 1px solid #676F78; border-top: none; } .estInfo .ttl__est_info { padding: 6px 0 7px; background-color: #676F78; text-align: center; } .estInfo .nav__access { margin-bottom: 10px; text-align: center; } .estInfo .nav__access img { max-width: 100%; height: auto; margin: auto; } .estInfo .dl__est_info { text-align: center; } .estInfo .dl__est_info dt { color: #676F78; font-weight: bold; } .estInfo .dl__est_info dd { margin: 2px 0 5px; } /* estnews */ .estnews:after { border-color: #676F78; } .estnews .wrap__ttl_more .txt__list { position: absolute; top: 0; right: 10px; bottom: 0; left: auto; height: 1.3em; margin: auto; } .estnews .wrap__ttl_more .txt__list a { color: #fff; line-height: 1; } .estnews .dl__est_news { height: 161px; overflow-y: scroll; padding: 10px; border: 1px solid #000; border-top: none; } .estnews .dl__est_news dt { color: #676F78; } .estnews .dl__est_news dd { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid #eee; } .estnews .dl__est_news a { color: #333333; } .estnews .dl__est_news a:hover { color: #676F78; } /* shopSearch */ .shopSearch:after { border-color: #676F78; } .shopSearch .inner__shopSearch { border: 1px solid #000; border-top: none; } .shopSearch .ttl__search_kind { padding: 5px 0 7px; background-color: #f8f8f8; border-top: 1px solid #676F78; text-align: center; } .shopSearch .list__shop_search { position: relative; overflow: hidden; } .shopSearch .list__shop_search .search_name { padding: 8px; border-bottom: 1px solid #f5f5f5; overflow: hidden; *zoom: 1; } .shopSearch .list__shop_search .search_name:last-child { border: none; } .shopSearch .list__shop_search .search_name .ttl__search_name { vertical-align: middle; } @media only screen and (min-width: 480px), print and (max-width: 1cm) { .shopSearch .list__shop_search .search_name { float: left; width: 50%; } } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .shopSearch .list__shop_search .search_name { width: 100%; } } .shopSearch button { float: left; padding: 0; margin: 0; border: none; background: none; } .shopSearch button[type=submit] img { vertical-align: top; } .shopSearch .list__search_cat { overflow: hidden; } .shopSearch .list__search_cat .search_name { padding: 8px; border-bottom: 1px solid #f5f5f5; overflow: hidden; *zoom: 1; } .shopSearch .list__search_cat .search_name:last-child { border: none; } .shopSearch .list__search_cat .search_name .ttl__search_name { max-width: 100%; height: auto; vertical-align: middle; } @media only screen and (min-width: 480px), print and (max-width: 1cm) { .shopSearch .list__search_cat .search_name { float: left; width: 50%; } } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .shopSearch .list__search_cat .search_name { width: 100%; } } .shopSearch #search3 { position: relative; overflow: hidden; *zoom: 1; } .shopSearch #search3 input { float: none; width: 100%; margin-right: 18px; padding-right: 20px; } .shopSearch #search3 button { position: absolute; right: 0; top: 0; } .shopSearch .selectArea { float: left; width: 60px; height: 18px; border: 1px solid #999; } .shopSearch input[type=text] { float: left; display: block; padding: 0 4px; height: 18px; border: 1px #999 solid; } .shopSearch .selectTxt { padding-right: 20px; line-height: 18px; text-align: center; } .shopSearch .selectTxt::after { content: url(../img/side/search/btn__arrow_down_black.gif); width: 18px; height: 18px; line-height: 18px; } /* flguideBtn */ .flguideBtn { margin-bottom: 30px !important; } .flguideBtn:after { display: none; } /* bnrs */ .aside__recruit { margin: 30px 0; } .sideArea aside li { margin-bottom: 10px; } .twitterArea { position: relative; margin-bottom: 30px !important; } .twitterArea:after { border-color: #00A8E8; bottom: 0; } .twitterArea .ttl__twitter { padding: 6px 0 7px 10px; background-color: #F4F4F4; } .twitterArea .btn__twitter_follow { position: absolute !important; top: 6px; right: 9px; } .instagramArea { position: relative; background-color: #EAEAEA; } .instagramArea .ttl__instagram { padding: 6px 0 5px 10px; } .instagramArea:after { border-color: #2A5A83; } .instagramArea .btn__instagram { position: absolute !important; top: 7px; right: 11px; background-color: #2F5283; border-radius: 3px; } .instagramArea .ig-b- { display: inline-block; padding: 0 5px; vertical-align: middle; } .instagramArea .ig-b- img { visibility: hidden; float: left; } .instagramArea .ig-b-:hover { background-position: 2px -60px; } .instagramArea .ig-b-:active { background-position: 2px -120px; } .instagramArea .ig-b-16 { width: 16px; height: 16px; background: url(https://badges.instagram.com/static/images/ig-badge-sprite-16.png) no-repeat 2px 0; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .instagramArea .ig-b-16 { background-image: url(https://badges.instagram.com/static/images/ig-badge-sprite-16@2x.png); background-size: 60px 178px; } } .instagramArea .ig-b-16 { width: auto; height: 15px; } .instagramArea .follow { float: left; color: #fff; font-size: 11px; } #instagramArea { overflow: hidden; margin: -3% -3% 0 0; padding: 0 8px 8px; } #instagramArea .image { float: left; width: 30%; margin: 3% 3% 0 0; border: 1px solid #D5D5D5; } #instagramArea .image img { width: 100%; height: auto; border: 1px solid #FBFBFB; } #instafeed { margin: 0 -1%; overflow: hidden; } #instafeed p { list-style: none; padding: 1%; width: 50%; float: left; } #instafeed p img { width: 100%; height: auto; } .aside__bnr ul { overflow: hidden; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .aside__bnr ul { margin: -10px -10px 0; } .aside__bnr ul li { float: left; width: 33.33333%; margin-bottom: 0 !important; padding: 10px; } } @media only screen and (max-width: 479px), print and (max-width: 1cm) { .aside__bnr ul { margin: -5px -5px 0; } .aside__bnr ul li { float: left; width: 50%; padding: 5px; } } /*------------------------------------------------------- ** @ globalFooter -------------------------------------------------------*/ @media only screen and (max-width: 767px), print and (min-width: 2cm) { #globalFooter { padding-bottom: 117px; } } #globalFooter .inner { /* overflow:hidden; /zoom:1; */ zoom: 1; min-height: 1px; } #globalFooter .inner::after { clear: both; content: "."; display: block; height: 0; line-height: 0; /* CSS HACK: Safari */ font-size: 0; /* CSS HACK: Firefox3 */ visibility: hidden; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { #globalFooter .wrap__socialBtns { overflow: hidden; } } @media only screen and (min-width: 768px), print and (min-width: 2cm) { #globalFooter .socialBtns { padding: 0 0 5px; float: left; } #globalFooter .socialBtns .socialbtn { float: left; margin: 0 10px 0 0; } } @media only screen and (max-width: 767px), print and (min-width: 2cm) { #globalFooter .socialBtns { position: relative; left: 50%; float: left; margin: 15px 0 10px; text-align: center; } #globalFooter .socialBtns .socialbtn { margin: 0 8px !important; } #globalFooter .socialBtns .fb-like, #globalFooter .socialBtns #ftTwit, #globalFooter .socialBtns #ftLine { position: relative; float: left; left: -50%; } } #globalFooter .nav__footer { margin: 5px 0 10px; overflow: hidden; } @media only screen and (min-width: 768px), print and (min-width: 2cm) { #globalFooter .nav__footer { float: right; margin: 5px 0 0; } } #globalFooter .nav__footer ul { text-align: center; } #globalFooter .nav__footer ul li { display: inline-block; margin: 0 0 5px 15px; } @media only screen and (min-width: 768px), print and (min-width: 2cm) { #globalFooter .nav__footer ul li { margin: 0 0 5px 25px; } } #globalFooter .nav__footer ul li:first-child { margin-left: 0; } #globalFooter .nav__footer ul li a { color: #333333; } @media only screen and (max-width: 479px), print and (max-width: 1cm) { #globalFooter .nav__footer ul li a { font-size: 11px; font-size: 1.1rem; line-height: 1.3; } } @media only screen and (min-width: 768px), print and (min-width: 2cm) { #globalFooter .nav__footer ul li a { padding-left: 12px; background: url(../img/icon__dot.png) no-repeat left center; } } #globalFooter .copyright { padding-top: 20px; background-color: #fff; border-top: 2px #676F78 solid; text-align: center; } #globalFooter .copyright img { width: 100px; height: auto; } #globalFooter .copyright span { display: block; margin-top: 20px; padding: 6px 0; color: #fff; font-size: 90%; background-color: #676F78; } #pageTop { position: fixed; bottom: -150px; right: 0; z-index: 10; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { #pageTop { display: none; } } #pageTop a { display: block; width: 38px; height: 130px; background: url(/foreign/img/common/btn_pagetop_txt.png) no-repeat left 34px; position: relative; } #pageTop a > img { display: block; position: absolute; top: 0; left: 0; z-index: 20; -webkit-transition: all 180ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 180ms cubic-bezier(0.165, 0.84, 0.44, 1); } #pageTop a:hover > img { top: -10px; } .fade { -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .fade:hover { filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } /*------------------------------------------------------- ** @ classModules -------------------------------------------------------*/ .inner { margin: 0 auto; } .text-center { text-align: center; } .selectArea { position: relative; cursor: pointer; } .selectTxt { position: relative; color: #666; } .selectTxt::after { position: absolute; top: -1px; right: -1px; display: inline-block; text-align: center; background-color: #000; color: #fff; font-size: 11px; } .selectArea .selectObj { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); } /** **/ .h_level_top { padding: 30px 0 30px 40px; background: url(../img/h_level_top.png) no-repeat left top; font-size: 138.4%; /*18px*/ } .h_level_top img { display: block; } /** .bg_ribon { @include fz(13); @media only screen and (min-width:768px), print and (min-width: 2cm){ @include fz(15); line-height: 34px !important; } position: relative; margin:0 30px 15px 0; padding-left: 32px; background: url(/common/img/bg_ribon_rp.gif) repeat-x left center; color: #fff; //font-weight: bold; line-height: 34px !important; &.search:before{ display: block; content: ""; width: 16px; height: 16px; position: absolute; top: 0; bottom: 0; left: 10px; right: auto; margin: auto; background: url(../img/icon__search.png) no-repeat left center; background-size: 16px auto; } &:after{ display: block; content: url(../img/bg_ribon.png); position: absolute; z-index: -1; bottom: -7px; right: -30px; height: 34px; } }//bg_sp_ribon **/ .bg_ribon { font-size: 13px; font-size: 1.3rem; line-height: 1.7; position: relative; margin: 0 0 15px 0; padding-left: 32px; background-color: #676F78; color: #fff; line-height: 34px !important; } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .bg_ribon { font-size: 15px; font-size: 1.5rem; line-height: 1.7; line-height: 34px !important; } } .bg_ribon.search:before { display: block; content: ""; width: 16px; height: 16px; position: absolute; top: 0; bottom: 0; left: 10px; right: auto; margin: auto; background: url(../img/icon__search.png) no-repeat left center; background-size: 16px auto; } .designline_box { position: relative; border: 1px solid #687079; width: 99.9%; -webkit-box-sizing: border-box; box-sizing: border-box; } /* .designline_box::before { content:""; position:absolute; top:0; left:0; z-index:10; display:block; width:100%; height:10px; //background:url(../img/bg_3line_left_top.png) no-repeat left top; } .designline_box::after { content:""; position:absolute; top:0; right:0; z-index:10; display:block; width:12px; height:10px; background:url(../img/bg_3line_right_top.png) no-repeat left top; } */ .dlb_inner { min-height: 84px; padding: 10px; } /* .dlb_inner::before { content:""; position:absolute; bottom:0; left:0; z-index:12; display:block; width:100%; height:10px; background:url(../img/bg_3line_left_btm.png) no-repeat left top; } .dlb_inner::after { content:""; position:absolute; bottom:0; right:0; z-index:12; display:block; width:12px; height:10px; background:url(../img/bg_3line_right_btm.png) no-repeat left top; } */ .pagerSet { margin-top: 40px; } .pager { text-align: center; } .nowPage { text-align: center; padding-top: 10px; } /*------------------------------------------------------- ** @ clearfix -------------------------------------------------------*/ /* CSS HACK: IE5.5 - IE7 */ .clearfix { zoom: 1; min-height: 1px; } /* CSS HACK: Modern Browser */ .clearfix:after { clear: both; content: "."; display: block; height: 0; line-height: 0; /* CSS HACK: Safari */ font-size: 0; /* CSS HACK: Firefox3 */ visibility: hidden; } /*------------------------------------------------------- ** @ IE6,7用のメッセージ -------------------------------------------------------*/ .errorView, .errorView body, .errorView #wrap { position: relative; width: 100%; height: 100%; overflow: hidden; } #ie67 { position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; background-color: #FFF; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 30px; font-weight: bold; color: #DB1150; } #ie67 table { width: 100%; height: 100%; border: 10px #E50065 solid; } #ie67 table, #ie67 td { width: 100%; height: 100%; text-align: center; vertical-align: middle; } .isIE6 #ie67, .isIE7 #ie67 { display: block; } #ie67 small { line-height: 1.4; color: #666; font-size: 16px; } #ie67 a { font-size: 20px; font-weight: normal; } .check_btn { border: solid 1px #676F78; padding: 10px; text-align: center; width: 40%; font-weight: bold; margin: 20px auto 0; } .check_btn a { display: block; } /*------------------------------------------------------- ** @ setting -------------------------------------------------------*/ img { max-width: 100%; } .ff_Barlow { font-family: "Barlow"; } /*------------------------------------------------------- ** @ BASE -------------------------------------------------------*/ .foreign { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; font-size: 1.2rem; /*------------------------------------------------------- ** @ HEADER -------------------------------------------------------*/ /*------------------------------------------------------- ** @ FOOTER -------------------------------------------------------*/ /*------------------------------------------------------- ** @ foodhall -------------------------------------------------------*/ /*------------------------------------------------------- ** @ title -------------------------------------------------------*/ /*------------------------------------------------------- ** @ link-arrow -------------------------------------------------------*/ /*------------------------------------------------------- ** @ top-mv -------------------------------------------------------*/ /*------------------------------------------------------- ** @ top-sec -------------------------------------------------------*/ } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .foreign { font-size: 1.6rem; } } .foreign #wrap { padding-bottom: 60px; } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .foreign #wrap { padding-top: 114px; padding-bottom: 0; } } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .foreign #globalHeader { width: 100%; padding-top: 25px; padding-bottom: 25px; background: #fff; -webkit-box-shadow: 0 3px 6px 0 rgba(62, 58, 57, 0.2); box-shadow: 0 3px 6px 0 rgba(62, 58, 57, 0.2); overflow: hidden; position: fixed; z-index: 5; top: 0; left: 0; } } .foreign #globalHeader .logo { margin: 15px auto; max-width: 160px; width: 30%; height: auto; } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .foreign #globalHeader .logo { float: left; margin: 0 15px 0 0; } } .foreign #globalHeader .logo img { max-width: 100%; height: auto; } .foreign #globalHeader #globalNav { font-size: 1.2rem; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign #globalHeader #globalNav { width: 100%; padding: 6px 10px 10px; background: #efefef; position: fixed; bottom: 0; left: 0; z-index: 100; } } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .foreign #globalHeader #globalNav { float: right; } } .foreign #globalHeader #globalNav ul { overflow: hidden; display: table; width: 100%; text-align: center; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign #globalHeader #globalNav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; overflow: visible; } } .foreign #globalHeader #globalNav ul li { display: table-cell; vertical-align: bottom; text-align: center; } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .foreign #globalHeader #globalNav ul li { text-align: left; height: 60px; padding-left: 30px; } } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign #globalHeader #globalNav ul li { width: 25%; } } @media only screen and (max-width: 479px), print and (max-width: 1cm) { .foreign #globalHeader #globalNav ul li { height: 40px; } } .foreign #globalHeader #globalNav ul li:first-child { padding-left: 0; } .foreign #globalHeader #globalNav ul li a { position: relative; display: block; overflow: hidden; width: 100%; height: 60px; } .foreign #globalHeader #globalNav ul li a:hover img { margin-top: -60px; } @media only screen and (max-width: 479px), print and (max-width: 1cm) { .foreign #globalHeader #globalNav ul li a:hover img { margin-top: -40px; } } @media only screen and (max-width: 479px), print and (max-width: 1cm) { .foreign #globalHeader #globalNav ul li a { width: 100%; height: 40px; } .foreign #globalHeader #globalNav ul li a img { width: auto; height: 80px; } } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign #globalHeader #globalNav .language-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: auto; margin: 15px auto 0; } } .foreign #globalHeader #globalNav .language-box .selectArea { position: relative; width: 100px; height: 18px; border: 1px solid #676f78; background: #fff none repeat scroll 0% 0%; cursor: pointer; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign #globalHeader #globalNav .language-box .selectArea { width: 100%; } } .foreign #globalHeader #globalNav .language-box .selectTxt { padding-left: 5px; text-align: left; } .foreign #globalHeader #globalNav .language-box .selectTxt:after { content: "▼"; position: absolute; display: inline-block; width: 18px; height: 18px; text-align: center; line-height: 18px; background-color: #000; color: #fff; font-size: 11px; } .foreign #globalHeader #globalNav .language-box .txt_language { margin-bottom: 7px; text-align: center; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign #globalHeader #globalNav .language-box .txt_language { -ms-flex-negative: 0; flex-shrink: 0; margin: 0 1em 0 0; line-height: 1; } } .foreign #globalFooter { padding-bottom: 0; } .foreign #globalFooter .email { position: relative; margin-top: -5px; padding: 0 0 10px; text-align: center; } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .foreign #globalFooter .email { float: right; } } .foreign #globalFooter .socialBtns { line-height: 1; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign#foodhall .foodhall-shop { padding-top: 0; } } .foreign#foodhall .foodhall-shop__right { text-align: left; } .foreign .foreign-ttl01 { padding-top: 17px; border-top: solid 3px #676F78; margin-bottom: 40px; text-align: center; position: relative; } .foreign .foreign-ttl01::before { width: 100%; height: 1px; background: #676F78; position: absolute; top: 2px; left: 0; content: ""; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign .foreign-ttl01 { margin-bottom: 20px; } } .foreign .foreign-ttl01 img { height: 27px; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign .foreign-ttl01 img { height: 18px; } } .foreign .foreign-ttl02 { margin-top: 1em; margin-bottom: 0.5em; position: relative; font-family: "Barlow"; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign .foreign-ttl02 { margin-top: 1.5em; } } .foreign .foreign-ttl02::before { width: 100%; height: 1px; background: #676F78; position: absolute; top: 50%; left: 0; content: ""; } .foreign .foreign-ttl02 .ttl-in { display: inline-block; padding-right: 0.8em; background: #fff; position: relative; z-index: 2; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign .foreign-ttl02 .ttl-in { font-size: 1.4rem; } } .foreign .foreign-ttl03 { margin-bottom: 0.3em; font-size: 2rem; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign .foreign-ttl03 { font-size: 1.4rem; } } .foreign .link-arrow_right { display: inline-block; padding-right: 1em; position: relative; } .foreign .link-arrow_right::after { width: 0.5em; height: 0.5em; border: solid #EA0065; border-width: 2px 2px 0 0; position: absolute; top: 0.52em; right: 0; content: ""; -webkit-transform: rotate(45deg); transform: rotate(45deg); } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign .link-arrow_right::after { border-width: 1px 1px 0 0; } } .foreign .link-arrow_right:hover { color: #EA0065; } .foreign .link-arrow_right:focus { overflow: visible; } .foreign .top-mv { position: relative; } .foreign .top-mv__slider { position: relative; } .foreign .top-mv__slider .slick-slide { padding: 0 2px; } .foreign .top-mv__slider .slick-arrow { width: 70px; height: 70px; background: no-repeat center / contain; border: none; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 2; font-size: 0; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign .top-mv__slider .slick-arrow { width: 40px; height: 40px; } } .foreign .top-mv__slider .slick-prev { background-image: url(/foreign/img/mv_prev01.png); left: 0; } .foreign .top-mv__slider .slick-next { background-image: url(/foreign/img/mv_next01.png); right: 0; } @media only screen and (min-width: 1200px), print and (min-width: 2cm) { .foreign .top-mv__txt { display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(80% - 4px); height: 100%; margin: auto; position: absolute; top: 0; left: 0; right: 0; } } .foreign .top-mv__txt .top-open { padding: 1.5em 15px; background-color: #EA0065; color: #fff; } @media only screen and (min-width: 768px), print and (min-width: 2cm) { .foreign .top-mv__txt .top-open { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media only screen and (min-width: 1200px), print and (min-width: 2cm) { .foreign .top-mv__txt .top-open { width: 56%; padding: 0px 1% 0 18%; margin: 0 0 0 auto; position: relative; background-color: transparent; background-image: linear-gradient(-67deg, rgba(234, 0, 101, 0.5) 65%, transparent 65.2%, transparent); line-height: 1.5; } } .foreign .top-mv__txt .top-open__left { padding-bottom: 1.5em; margin-bottom: 1.5em; position: relative; text-align: center; } .foreign .top-mv__txt .top-open__left::before { width: 50px; height: 2px; margin: auto; background: #fff; position: absolute; bottom: 0; left: 0; right: 0; content: ""; } @media only screen and (min-width: 1200px), print and (min-width: 2cm) { .foreign .top-mv__txt .top-open__left { padding-bottom: 2em; margin-bottom: 2em; } .foreign .top-mv__txt .top-open__left::before { height: 3px; } } .foreign .top-mv__txt .top-open__img { width: 60px; margin: auto; } @media only screen and (min-width: 1200px), print and (min-width: 2cm) { .foreign .top-mv__txt .top-open__img { width: 80px; } } .foreign .top-mv__txt .top-open__time { font-family: "Barlow"; font-size: 3.6rem; } @media only screen and (min-width: 1200px), print and (min-width: 2cm) { .foreign .top-mv__txt .top-open__time { font-size: 5rem; } } .foreign .top-mv__txt .top-open__time2 { font-family: "Barlow"; font-size: 3.4rem; line-height: 1; margin: 0.3em 0; } @media only screen and (min-width: 1200px), print and (min-width: 2cm) { .foreign .top-mv__txt .top-open__time2 { font-size: 4rem; } } .foreign .top-mv__txt .top-open__time2-sbj { display: block; font-size: 1.8rem; text-decoration: underline; } @media only screen and (min-width: 1200px), print and (min-width: 2cm) { .foreign .top-mv__txt .top-open__time2-sbj { font-size: 2.4rem; } } .foreign .top-sec { margin-top: 100px; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign .top-sec { margin-top: 60px; } } .foreign #access .gmap { position: relative; padding-bottom: 64%; padding-top: 30px; height: 0; overflow: hidden; } .foreign #access .gmap iframe, .foreign #access .gmap object, .foreign #access .gmap embed { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .foreign #shop .tabCat { margin-bottom: -1px; position: relative; z-index: 2; font-size: 1.6rem; line-height: 1.125; } @media only screen and (max-width: 479px), print and (max-width: 1cm) { .foreign #shop .tabCat { margin-top: 25px; margin-bottom: 0; font-size: 1.2rem; } } .foreign #shop .tabCat #tabCatNav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media only screen and (max-width: 479px), print and (max-width: 1cm) { .foreign #shop .tabCat #tabCatNav { margin-right: -1px; } } .foreign #shop .tabCat #tabCatNav > li { width: 25%; border: solid 1px transparent; position: relative; cursor: pointer; text-align: center; font-weight: bold; } @media only screen and (max-width: 479px), print and (max-width: 1cm) { .foreign #shop .tabCat #tabCatNav > li { width: 50%; border-color: #676F78; margin-bottom: -1px; } .foreign #shop .tabCat #tabCatNav > li:nth-child(even) { margin-left: -1px; } } .foreign #shop .tabCat #tabCatNav > li.active { border-color: #676F78; -webkit-box-shadow: 0 3px 0 0 #EA0065 inset; box-shadow: 0 3px 0 0 #EA0065 inset; pointer-events: none; } .foreign #shop .tabCat #tabCatNav > li.active::before { width: 100%; height: 1px; background: #fff; position: absolute; bottom: -1px; left: 0; content: ""; } @media only screen and (max-width: 479px), print and (max-width: 1cm) { .foreign #shop .tabCat #tabCatNav > li.active { background: #EA0065; color: #fff; } .foreign #shop .tabCat #tabCatNav > li.active::before { display: none; } } .foreign #shop .tabCat #tabCatNav > li > a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 70px; } @media only screen and (max-width: 479px), print and (max-width: 1cm) { .foreign #shop .tabCat #tabCatNav > li > a { height: 45px; color: inherit; text-decoration: none; } } .foreign #shop .tabCat #tabCatNav > li > a span { font-weight: bold; } .foreign #shop .tab-contents-wrap { border: solid 1px #676F78; background-color: #fff; overflow: hidden; } @media only screen and (max-width: 479px), print and (max-width: 1cm) { .foreign #shop .tab-contents-wrap { padding: 20px 10px; } } .foreign #shop .tab-contents { display: none; position: relative; } .foreign #shop .tab-contents_active { display: block; } .foreign #shop #floorMap { position: relative; border: 1px #676f78 solid; margin-bottom: 10px; } .foreign #shop #map_cont { overflow: hidden; position: relative; padding-top: 86.86131%; background-color: #fff; border-top: none; } @media only screen and (max-width: 479px), print and (max-width: 1cm) { .foreign #shop #map_cont { padding: 0.5em; } } .foreign #shop #map_cont #wp { position: absolute; top: 0; bottom: 0; right: 0; left: 0; } @media only screen and (max-width: 479px), print and (max-width: 1cm) { .foreign #shop #map_cont #wp { position: static; } } .foreign #shop #map_cont #wp.zoom #move { width: 1370px; height: 1190px; position: absolute; cursor: move; } .foreign #shop #map_cont #wp.zoom #move img { width: 1370px; height: 1190px; } .foreign #shop #map_cont #move { width: 100%; height: auto; } .foreign #shop #map_cont #move img { width: 100%; height: auto; display: none; } .foreign #shop #btn_zoom { position: absolute; top: 0; right: 0; width: 50px; height: 50px; background: url(/foreign/img/btn_zoom_off.png) no-repeat 0 0; cursor: pointer; } .foreign #shop #btn_zoom.active { background: url(/foreign/img/btn_zoom_on.png) no-repeat 0 0; } @media only screen and (max-width: 479px), print and (max-width: 1cm) { .foreign #shop #btn_zoom { display: none; } } .foreign #shop .info-facility__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .foreign #shop .info-facility__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 15px 20px 0 0; } .foreign #shop .info-facility__ico { width: 26px; margin-right: 5px; -ms-flex-negative: 0; flex-shrink: 0; } .foreign #shop .info-facility__txt { color: #333333; font-family: "Barlow"; font-size: 1.4rem; line-height: 1; } @media only screen and (max-width: 479px), print and (max-width: 1cm) { .foreign #shop .info-facility__txt { font-size: 1.2rem; } } .foreign #taxfree .brand-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -12px; margin-right: -12px; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign #taxfree .brand-list { margin-left: -4px; margin-right: -4px; } } .foreign #taxfree .brand-list__item { width: 20%; padding: 0 12px 24px; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign #taxfree .brand-list__item { width: 25%; padding: 0 4px 8px; } } .foreign #taxfree .brand-list__item img { display: block; border: solid 1px #efefef; background: #fff; } .foreign .fh-bnr { display: block; margin: 90px auto 0; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign .fh-bnr { max-width: 650px; margin-top: 50px; } } .foreign #service .pay-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .foreign #service .pay-list > li { margin: 0 15px 15px 0; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign #service .pay-list { margin-right: -15px; } } .foreign #faq { padding-top: 40px; padding-bottom: 40px; background: #efefef; } .foreign #faq .foreign-ttl01 { padding-top: 0; border-top: none; margin-bottom: 25px; } .foreign #faq .foreign-ttl01::before { display: none; } .foreign #faq .faq-list__box { margin-top: 1.6em; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign #faq .faq-list__box { margin-top: 2em; } } .foreign #faq .faq-list__q { padding: 0.5em 3.5em 0.5em 60px; background: #fff; position: relative; cursor: pointer; font-weight: bold; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign #faq .faq-list__q { padding: 0.7em 3em 0.7em 45px; } } .foreign #faq .faq-list__q::before { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 40px; height: 100%; background: #EA0065; position: absolute; top: 0; left: 0; content: "Q"; color: #fff; font-size: 2rem; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign #faq .faq-list__q::before { width: 35px; font-size: 1.8rem; } } .foreign #faq .faq-list__q::after { position: absolute; top: 50%; right: 0.6em; content: "＋"; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 2.4rem; line-height: 1; font-weight: normal; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign #faq .faq-list__q::after { font-size: 1.6rem; } } .foreign #faq .faq-list__q_active::after { content: "－"; } .foreign #faq .faq-list__a { display: none; padding-top: 0.4em; } @media only screen and (max-width: 767px), print and (min-width: 2cm) { .foreign #faq .faq-list__a { padding-top: 1em; } } /* マップの左右中央寄せ */ .foreign #shop #map_cont #wp { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .foreign #shop #map_cont #move { padding: 20px; text-align: center; } .foreign #shop #map_cont #move img.map.map03.cat3 { width: 95%; } /*# sourceMappingURL=base.css.map */