@charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap"); @import url("https://use.fontawesome.com/releases/v5.8.2/css/all.css"); html { color: #000; background: #FFF; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, address { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0; } address, caption, cite, code, dfn, em, th, var { font-style: normal; font-weight: normal; } li { list-style: none; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } q:before, q:after { content: ''; } abbr, acronym { border: 0; font-variant: normal; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } input, textarea, select, button { font-family: inherit; font-size: inherit; font-weight: inherit; } input, textarea, select, button { *font-size: 100%; } legend { color: #000; } img, a img { vertical-align: bottom; border: 0px; } ul, ol, li, dl, dt, dd { list-style-type: none; } table { border-collapse: collapse; } pre { white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; } /* のID名ルール施設名のアルファベットのクラス名ルール・ファイル名 */ body { background: #FFF; font-size: 90%; color: #333333; font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; line-height: 1.6em; position: relative; } /*IE10以上でフォントをメイリオ*/ @media all and (-ms-high-contrast: none) { body { font-family: "メイリオ", "Meiryo", sans-serif; } } a { text-decoration: none; color: #333333; } a:hover { text-decoration: none; opacity: 0.8; } img { max-width: 100%; } a.hoverlink { display: none; } /*商品画像を背景で読み込む共通*/ .img_bg_css { display: block; width: 100%; height: 100%; min-height: 40px; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 4px; box-sizing: border-box; } pre { font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; } /*ニュース画像がなくlogoに置き換わる箇所　共通*/ .img_bg_css.no_img_logo { background-size: 70% auto; border: 1px solid #ccc; } img.no_img_logo { background-image: url(../img/default_bg_logo.png); background-position: center; background-size: contain; } /* ロゴ画像がない時用に常に背景にSCのロゴを掲出*/ /*.item .image { background-image: url(../img/default_bg_logo.png); background-position: center; background-size: contain; } */ /*画像をimgで設置するがcssのcoverのようにする*/ .img_objfit { width: 100%; height: 100%; } .img_objfit img { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; border-radius: 4px; } .img_objfit img.no_img_logo { object-fit: contain; font-family: 'object-fit: contain;'; } /* のID名ルール施設名のアルファベットのクラス名ルール・管理画面共通 kanri　⇒ knr ・本部管理のみ master →　ms ・モール管理のみ dev ・ショップ管理のみ kgm ・ファイル名 */ /* --------------------------------------------- 共通部分をスタイルする --------------------------------------------- */ .to-top { position: fixed; bottom: 0px; right: 10px; z-index: 45; width: 105px; height: 84px; } .to-top a { position: absolute; width: 100%; height: 100%; display: block; bottom: 0; transition-duration: .3s; } .pc .to-top a:hover { bottom: 12px; opacity: 1; } .fixed_btn{ position: fixed; bottom: 0px; left: 10px; z-index: 45; width: 200px; height: 180px; } .fixed_btn a { position: absolute; width: 100%; height: 100%; display: block; bottom: 0; transition-duration: .3s; } .ico_new { font-family: "Quicksand", sans-serif; font-weight: 700; position: absolute; margin: 0; text-align: center; top: 0; left: 0; background: #fee101; padding: 0; line-height: 50px; color: #ea5e00; width: 50px; height: 50px; box-sizing: border-box; z-index: 10; } .ico_jobs, .ico_new2, .ico_coupon { display: inline-block; text-decoration: none; font-size: 11px; padding: 0 2px; border-radius: 4px; line-height: 140%; margin: 0 0px 0 3px; vertical-align: middle; } .ico_jobs { background: #ea5e00; color: #fff; } .ico_new2 { font-size: 13px; color: #ea5e00; font-weight: bold; font-family: "Quicksand", sans-serif; } .ico_coupon { background: #63b3aa; color: #fff; } span.sale { color: red; } .arw_r { position: relative; } .arw_r:after { content: ""; display: block; position: absolute; top: 38%; width: 0; height: 0; border: 4px solid transparent; left: 92%; border-left: 5px solid #63b3aa; } /* アイコン全体を囲むspan（aタグの中） */ .external-icon-wrapper { display: inline-flex; align-items: center; margin-left: 4px; vertical-align: middle; } /* SVGアイコン */ .external-icon { width: 1em; height: 1em; position: relative; top: -2px; } /* aタグの「外」に追加されるテキスト */ .external-text { font-size: 0.85em; color: #666; margin-left: 4px; vertical-align: middle; } /* --------------------------------------------- スマホコンテンツを非表示 --------------------------------------------- */ body.pc .sp_view { display: none; } /* --------------------------------------------- 基本レイアウト(view) --------------------------------------------- */ #main { width: 100%; margin: 0 auto; } @media (max-width: 1020px) and (min-width: 768px){ .pc #main{ width: 1400px; } } #contents { clear: both; padding: 0 0 40px; margin: 0; } #contents:after { content: ""; display: block; height: 0px; clear: both; } .inner { width: 960px; margin: 0 auto; position: relative; } .inner:after { content: ""; display: block; height: 0px; clear: both; } body.view header { position: relative; box-sizing: border-box; background-size: 10px auto; } body.view header > .inner { width: 80%; min-width: 960px; max-width: 1200px; } body.view header:before { content: ""; position: absolute; display: block; top: 0; width: 100%; height: 16px; } body.view header h1 { display: none; } body.view header .scname { font-size: 24px; padding: 46px 0 0; margin: 0; } body.view header .head_icons { position: absolute; display: inline-block; top: 20px; right: 0px; } body.view header .head_icons ul li { float: left; width: 40px; padding: 0 10px; text-align: right; } body.view header .head_icons ul li a { display: block; width: 40px; height: 40px; border-radius: 50%; text-align: center; } body.view header .head_icons ul li a i { font-size: 20px; line-height: 42px; color: #fff; } body.view header .head_icons ul li.fb a { background: #5890ff; } body.view header .head_icons ul li.tw a { background: #00acee; } body.view header .head_icons ul li.ig a { background-image: linear-gradient(-135deg, #1400c8, #b900b4, #f50000); } body.view header .head_icons ul li.line a { background: #00b900; } body.view header .head_icons ul li.lang a { background: #555555; } body.view.pc.gn_off header nav { float: right; margin-top: 55px; } body.view.pc.gn_off header nav li { width: 200px; } body.view.pc.gn_off header .scname { padding: 60px 0 0; margin: 0 0 0 0px; width: 400px; float: left; } header .logo { width: 128px; margin: 0; padding: 0; line-height: 80px; } header .logo img { width: 100%; vertical-align: middle; } header .mitsuilogo { position: absolute; width: 195px; height: 33px; line-height: 80px; top: 0; right:0; a { display:block; img { width: 100%; vertical-align: middle; } } } header:after { content: ""; display: block; height: 0px; clear: both; } header nav { border: 1px solid #ccc; border-width: 1px 0; } header nav ul.inner { width: 80%; min-width: 960px; max-width: 1200px; display: flex; justify-content: space-between; } header nav ul.inner::after { display: none; } header nav ul { margin: 10px 0 0 0; } header nav ul li { box-sizing: border-box; display: inline-block; text-align: center; } header nav ul li.home { width: 10%; } header nav ul li.home i { font-size: 20px; } header nav ul li a { display: block; text-align: center; position: relative; padding: 12px 0; transition-property: color; transition-duration: .2s; } header nav ul li a::after { content: ""; position: absolute; margin: auto; left: 0; right: 0; bottom: 0; display: inline-block; width: 0; height: 0; border: 6px solid; border-color: transparent transparent #ea5e00 transparent; transition-duration: .2s; } header nav ul li a:hover { color: #ea5e00; } header nav ul li a:hover:after { bottom: 0.2em; } header nav ul li:last-of-type a { padding-right: 0; } /*----------駐車場満空----------*/ .hd_parking { border: 2px solid #EA5E00; border-radius: 6px; position: absolute; top: 14px; left: 160px; display: flex; padding: 8px; box-sizing: border-box; } .hd_parking > * { padding: 0 12px; border-right: 1px solid #ccc; line-height: 30px; } .hd_parking > *:last-of-type { border-right: none; } .hd_parking-ttl { color: #ea5e00; } .hd_parking-ttl h3 { font-weight: bold; } .hd_parking-north, .hd_parking-south, .hd_parking-list { display: flex; } .hd_parking h4 { margin-right: .4em; } .hd_parking-status { position: relative; } .hd_parking-south .hd_parking-status { /*駐車場名併記に伴う調整*/ padding-left: 8px; margin-left: 12px; } .hd_parking-p_name { font-size: 8px; display: block; text-align: center; writing-mode: vertical-rl; white-space: nowrap; position: absolute; top: -100%; bottom: -100%; left: -16px; margin: auto; } /*status icon*/ .p-status_icon { width: 30px; height: 30px; display: inline-block; text-align: center; line-height: 30px; color: #fff; font-weight: bold; background: #ccc; border-radius: 4px; font-size: 18px; } .p-status_icon._isVacant { background: #4192B9; } .p-status_icon._isCrowded { background: #49B624; } .p-status_icon._isFull { background: #FF4949; } /************************/ /*ロゴ画像がない場合　body.no_logo */ body.no_logo header .logo { display: none; } body.no_logo header nav ul li { width: 20%; max-width: none; } #contents h2 { padding: 16px 0; margin: 0 auto; font-size: 18px; font-weight: bold; text-align: center; background: #efeeec; /*border-bottom: 1px solid #ccc;*/ /*h2が画面幅100％の場合は以下トル width: 960px;*/ } #contents-main { float: left; width: calc(100% - 320px); padding: 20px 30px; } #contents-main.all { width: 100%; float: none; box-sizing: border-box; padding: 30px; } #contents-main h3 { padding: 20px 16px; font-weight: bold; font-size: 16px; background: #EFEEEC; text-align: center; } #sub { float: right; width: 220px; margin: 30px 30px 0 0; } /*navi*/ .common_navi_btn { background: #EFEEEC; } .common_navi_btn .guidenav { width: 960px; margin: 0 auto; padding: 20px 0; } .common_navi_btn .guidenav .guidenav_guide { overflow: hidden; display: flex; } .common_navi_btn .guidenav .guidenav_guide li { /*width: calc(100% / 6);*/ width: 100%; margin: 0 5px; } .common_navi_btn .guidenav .guidenav_guide li a { display: block; border-radius: 6px; box-sizing: border-box; text-align: center; font-size: 14px; font-weight: bold; background: #fff; height: 90px; position: relative; } .guideImg { position: absolute; width: 100%; height: calc(100% - 32px); } .guideImg img { position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; max-height: 80%; max-width: 70%; } .guideTtl { position: absolute; bottom: 0; width: 100%; height: 32px; line-height: 32px; font-weight: normal; background: #ea5e00; color: #fff; text-align: center; } .guidenav_guide li a { overflow: hidden; } .guidenav_guide li:nth-of-type(2n) .guideTtl { background: #63b3aa; } .guidenav_guide li:nth-of-type(2n-1) .guideTtl { background: #ea5e00; } .foot_bnr { padding: 40px 0; background: #efeeec; border-bottom: 2px solid #fff;} .foot_bnr .swiper-container_f { width: 80%; min-width: 960px; max-width: 1200px; margin: 0 auto; overflow: hidden; } .foot_bnr .swiper-container_f li{ border:2px solid #FFF; box-sizing: border-box; } .foot_bnr .static ul { display: flex; justify-content: center; } .foot_bnr .static ul li { width: calc(100% / 3); margin: 0 5px; } /****トレッサポイント****/ .foot_trepo { width: 960px; margin: 0 auto; padding: 35px 0; display: flex; justify-content: space-between; } .foot_trepo h3 img { width: 220px;} .trepo-list { /*width: 75%;*/ display: flex; justify-content: space-between; } .trepo-list li { width: calc(50% - 12px); } .trepo-list li a { display: block; width: 100%; height: 100%; border: 1px solid #CCCCCC; border-radius: 6px; box-sizing: border-box; overflow: hidden; text-align: center; } /**************/ footer { margin: 0; } footer .footer_menu { background: #EFEEEC; padding: 60px 0; } footer .footer_menu dl { float: left; margin: 0; min-height: 180px; padding: 0 24px 0 0; width: 24%; box-sizing: border-box; } /*footer menu sns*/ footer .footer_menu dl.footer-sns { width: calc(100% - (24% * 3)); border-left: 4px solid #fff; padding: 0 0 0 24px; } .footer-sns-treon { /*らいおん画像*/ position: absolute; z-index: 0; top: -25px; right: 20px; } footer .footer_menu dl.footer-sns dt { font-family: "Quicksand"; font-size: 1.4rem; color: #ea5e00; } footer .footer_menu dl.footer-sns ul{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap:15px; margin-top: 10px; } footer .footer_menu dl.footer-sns li { width: calc(100%/2 - 8px); margin: 0; text-align: center; } footer .footer_menu dl.footer-sns li a { display: block; background: #fff; border-radius: 6px; padding: 1em 0; font-size: 1rem; } footer .footer_menu dl.footer-sns li::before { display: none; } footer .footer_menu .footer-sns a .fab { color: #ea5e00; width: inherit; margin-right: 0; text-align: center; display: block; font-size: 30px; } footer .footer_menu .footer-sns .footer-sns-instagram a .fab { color: #CF2E92;} footer .footer_menu .footer-sns .footer-sns-line a .fab { color: #06c655;} footer .footer_menu .footer-sns .footer-sns-facebook a .fab { color: #1877f2;} footer .footer_menu .footer-sns .footer-sns-twitter a img { height: 30px;} footer .footer_menu .footer-sns a::after { content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: bold; position: absolute; right: 16px; transition-duration: .2s; color: #ea5e00; display: none; } footer .footer_menu .footer-sns a:hover::after { right: 12px; } footer .footer_menu dl dt { font-weight: bold; font-size: 14px; } footer .footer_menu dl li { list-style: none; list-style-position: inside; margin: .5em 0; font-size: 14px; font-size: 0.85rem; } footer .footer_menu dl li::before { content: ""; background: #ea5e00; width: 0.5em; height: 2px; display: inline-block; margin: 0 0.7em 0 0; position: relative; top: -0.3em; } footer .footer_list ul { padding: 30px 0; font-size: 12px; width: 80%; min-width: 960px; max-width: 1200px; margin: auto; display: grid; grid-template-columns: repeat(4, 1fr) min-content; column-gap: 40px; row-gap: 20px; } footer .footer_list ul li { letter-spacing: normal; line-height: 100%; white-space: nowrap; } footer .footer_list ul li:last-of-type { border: none; } footer .footer_list ul li i { margin-left: 4px; } footer .ad_foot_desc { padding: 25px 0 100px; border-top: 1px solid #ccc;} footer .ad_foot_desc .inner { display: flex; justify-content: space-between; align-items: flex-end; width: 80%; min-width: 960px; max-width: 1200px;} footer .ad_foot_desc .inner::after { /*clearFix取り消し*/ display: none; } footer .ad_foot_desc address { text-align: center; line-height: 1.4; min-width: 50%; font-size: 90%; text-align: left; } footer .ad_foot_desc .footer-logo-img { display: block; width: 128px; float: left; margin: .6em 24px 0 0; } footer .ad_foot_desc address i { margin: 0 4px 0 10px; } footer .ad_foot_desc address strong { font-size: 1rem; margin: 0 0 0.2em; } footer .ad_foot_desc address strong, footer .ad_foot_desc address .tel { display: block; text-align: left; } .footer-logo-mitsui { gap:20px; display:flex; p { a{ display:block; height: 30px; } &.mfadclogo a{ height: 28px; } img { max-height:100%; width: auto;} } } footer .ad_foot_desc .copyright { font-size: 11px; text-align: right; } #banner_mini ul li img { width: 100%; max-width: 100%; } /* 全ページフッター共通ショップページ　他店舗表示 */ .footer.shopsearch { background: #efeeec; } .footer.shopsearch.tagitemlist{ background: #FFF; } .footer.shopsearch h4 { font-family: "Quicksand", sans-serif; font-weight: bold; text-align: center; font-size: 22px; padding: 20px 0 12px; letter-spacing: 0.05em; color: #ea5e00; } .footer.shopsearch h4::before {/* font-family: "font Awesome 5 Free"; font-weight: bold; content: "\f002"; margin: 0 10px 0 0; */} /*ショップページのみ*/ .shop_catlist { border: 4px solid #efeeec; background: #fff; width: 960px; margin: 0 auto; border-radius: 10px; } .shop_catlist .shoplist { padding: 0 20px 20px; } .shop_catlist h4 { font-family: "Quicksand", sans-serif; font-weight: bold; text-align: center; font-size: 22px; padding: 28px 0 18px; letter-spacing: 0.05em; } .shop_catlist ul#this_cat_shoplist { text-align: center; } .shop_catlist ul#this_cat_shoplist li { display: inline-block; margin: 0 4px 10px; } .shop_catlist ul#this_cat_shoplist li a { line-height: 25px; padding: 4px 16px; border-radius: 4px; display: inline-block; background: #EFEEEC; } /* 全ページフッター共通ショップページ⇒自店カテゴリ非表示 */ .footer.shopsearch #cat_title_list { display: flex; justify-content: space-between; padding: 0 20px 15px; flex-wrap: wrap; border-bottom: 4px solid #EFEEEC; } /* justify-contentのレイアウト調整 */ .footer.shopsearch ul#cat_title_list::before, .footer.shopsearch ul#cat_title_list::after { width: 200px; margin: 10px 0; display: block; content: ""; } .footer.shopsearch ul#cat_title_list::before { order: 1; } /*以上*/ .footer.shopsearch ul#cat_title_list::before, .footer.shopsearch ul#cat_title_list::after { width: calc((100% + 20px) / 3 - 14px); margin: 0; display: block; content: ""; } .footer.shopsearch #cat_title_list .catttl { width: calc(100% / 3 - 8px); margin: 8px 0; } .footer.shopsearch #cat_title_list .catttl a { display: block; width: 100%; height: 100%; background: #fff; border-radius: 8px; padding: 10px 25px 10px 10px; box-sizing: border-box; position: relative; text-align: center; font-weight: bold; } .footer.shopsearch #cat_title_list .catttl a::after { font-family: "font Awesome 5 Free"; font-weight: bold; content: "\f054"; position: absolute; top: 10px; right: 15px; display: block; color: #ea5e00; font-size: 14px; } /* 全ページ共通 #タグ */ #h4_shopsearch_tag { font-family: "Quicksand", sans-serif; font-weight: bold; text-align: center; font-size: 22px; /* padding: 20px 0 20px; */ letter-spacing: 0.05em; } #h4_shopsearch_tag::before { content: "#"; margin: 0 3px 0 0; } #h4_shopsearch_tag a{ color:#ea5e00; } .tag_list { padding: 0 20px 15px; text-align: center; } .tag_list_name { display: inline-block; margin: 0 6px 15px 0; border-radius: 100px; } .tag_list_name a { background: #FFE5DC; padding: 6px 16px; display: block; border-radius: 100px; } .tag_list_name a::before { content: ""; font-family: "font Awesome 5 Free"; font-weight: bold; color: #ea5e00; margin: 0 3px 0 0; font-size: 1.1em; vertical-align: bottom; display: inline-block; } /* 全ページ共通 MDカテゴリ */ #h4_shopsearch_mdcat { font-family: "Quicksand", sans-serif; font-weight: bold; text-align: center; font-size: 22px; padding: 20px 0 18px; letter-spacing: 0.05em; } #h4_shopsearch_mdcat:before { font-family: "font Awesome 5 Free"; font-weight: bold; content: "\f0c1"; margin: 0 4px 0 0; } .mdlistiew { padding: 0 20px 20px; text-align: center; } .mdlistiew .mdcat { display: inline-block; margin: 4px; padding: 0; } .mdlistiew .mdcat a { display: block; padding: 8px 10px; font-weight: bold; line-height: 1.0em; border-radius: 4px; border: 4px solid #EFEEEC; background: #fff; } .mdlistiew .mdcat a:before { font-family: "font Awesome 5 Free"; font-weight: bold; content: "\f0c1"; margin: 0 4px 0 0; } /* --------------------------------------------- 共通設定 --------------------------------------------- */ body.view #contents { background: #fff; } body.view #contents .inner { background: #fff; } body.view.pc #contents > .inner { width: 80%; min-width: 960px; max-width: 1200px; } body.view table.table01 { border-collapse: collapse; width: 100%; border-top: 3px solid #eee; border-bottom: 3px solid #eee;} body.view table.table01 tr { border-bottom: 1px solid #ddd; } body.view table.table01 tr:last-of-type { border-bottom: none; } body.view table.table01 th, body.view table.table01 td { padding: 12px 18px; } body.view table.table01 th { text-align: center; font-weight: bold; background: #EFEEEC; width: 24%; } body.view table.table01 tr.shop-gourmet2 td{ padding-bottom: 6px; } /* ----------------------------------------------------- サイドナビ部 ----------------------------------------------------- */ .sidemenu { border: 4px solid #EFEEEC; padding: 20px 20px 4px; border-radius: 8px; } .sidemenu dt { font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 20px; text-align: center; padding: 0 0 10px; border-bottom: 1px solid #ccc; } .sidemenu dt a{ color:#ea5e00; } .sidemenu dd > a { display: block; padding: 16px 10px; font-weight: bold; position: relative; line-height: 1.6em; } .sidemenu dd > a:after { font-family: "font Awesome 5 Free"; content: "\f054"; font-weight: 900; display: inline; padding-right: 4px; font-size: 14px; color: #ea5e00; position: absolute; right: 0; top: calc(50% - 12px); } .sidemenu dd ul { font-size: 90%; } .sidemenu dd ul li a { padding: 10px; line-height: 1.5em; display: block; background: #EFEEEC; border-top: 2px solid #fff; } .sidemenu dd:last-child ul li:last-child { margin-bottom: 10px; } .sidemenu span.num { font-family: "Quicksand", sans-serif; letter-spacing: 0.1em; } /**/ #sub #sub-navi01 dl dd dl dt { background: #EFEEEC; color: #43B2EF; border: none; border-radius: 8px; margin: 6px 0; } #sub #sub-navi01 dl dd dl dt.catttl { position: relative; cursor: pointer; } #sub #sub-navi01 dl dd dl dt.catttl .fa { position: absolute; right: 10px; top: 26%; } #sub #sub-navi01 dl dd dl dt.catttl.up .fa { transform: rotate(180deg); } #sub #sub-navi01 dl dd dl dd.shoplist { display: none; margin: 0 5px; } #sub #sub-navi01 dl dd dl dd.shoplist ul li { border-bottom: 1px dashed #ccc; } #sub #sub-navi01 dl dd dl dd.shoplist ul li a { padding: 8px 12px 8px 6px; line-height: 18px; display: block; box-sizing: border-box; position: relative; } #sub #sub-navi01 dl dd dl dd.shoplist ul li a:after { content: ""; display: block; position: absolute; top: 38%; width: 0; height: 0; border: 5px solid transparent; left: 98%; border-left: 6px solid #43B2EF; } /*イベントニュース、フロアガイド用*/ #sub #sub-navi01.sub_lsit { margin: 0 0 32px; } #sub #sub-navi01.sub_lsit dl dd dl dt { padding: 0; } #sub #sub-navi01.sub_lsit dl dt a { position: relative; padding: 10px; background: #EFEEEC; border-radius: 4px; display: block; text-decoration: none; font-size: 16px; text-align: center; color: #63b3aa; } #sub #sub-navi01.sub_lsit dl dt a:before { content: ""; display: inline-block; border: 5px solid transparent; border-left-color: #63b3aa; left: 90%; position: absolute; top: 15px; } #sub #sub-navi01 dl dl dt:hover a, #sub #sub-navi01.sub_lsit dl dl dt:hover a { background: #63b3aa; color: #fff; } #sub #sub-navi01 dl dl dt:hover a:before, #sub #sub-navi01.sub_lsit dl dl dt:hover a:before { border-left-color: #fff; } #sub #sub-navi01.sub_lsit dl dd.box dl dd { padding: 0; } #sub #sub-navi01 dl dl li, #sub #sub-navi01.sub_lsit dl dd.box dl dd { border-bottom: 1px dashed #ccc; font-size: 14px; } #sub #sub-navi01.sub_lsit dl dd.box dl dd a { text-decoration: none; padding: 10px 5px; display: block; } #sub #sub-navi01.sub_lsit dl dd.box dl dd a:hover { background: #EFEEEC; } #sub #sub-navi01.sub_lsit dd.box dt, #sub #sub-navi01.sub_lsit dd.box dd, #sub #sub-navi01.sub_lsit dd.box li { font-size: small; } #sub #sub-navi01.sub_lsit dd.box a { line-height: 1.5; } #sub .sc_facility dl { margin: 24px 0 12px; background: #EFEEEC; box-sizing: border-box; padding: 12px; border-radius: 8px; } #sub .sc_facility #sc_map { height: 190px; width: 100%; margin: 10px 0 4px; background: #EFEEEC; border: 4px solid #fff; box-sizing: border-box; } #sub .sc_facility #sc_map .sc_point { color: #0099ff; font-weight: bold; } #sub .sc_facility dt { margin: 4px 0 0; text-align: center; font-size: 16px; font-weight: bold; } #sub .sc_facility dt .fas { margin: 0 4px 0 -6px; font-size: 18px; } #sub .sc_facility dd.location p, #sub .sc_facility dd.parking ul li { text-align: center; padding: 8px 0; line-height: 16px; } #sub .sc_facility dd.parking ul li { margin-bottom: 1px; } #sub .sc_facility dd p a { display: block; } #sc_map iframe { width: 100%; height: 100%; border: 0; } #sub .sc_facility dd a.gmap_link { text-align: center; font-size: 12px; display: block; padding: 0; text-decoration: underline; } #sub .sc_facility dd a.access_link { display: block; font-size: 14px; text-align: center; text-decoration: none; background: #fff; padding: 12px 0; margin: 6px 0; line-height: 1.4em; font-weight: bold; border-radius: 60px; position: relative; } #sub .sc_facility dd a.access_link:after { font-family: "font Awesome 5 Free"; content: "\f054"; font-weight: 900; display: inline; padding-right: 4px; font-size: 14px; color: #ea5e00; position: absolute; right: 8px; } #sub #sub-navi02 { margin-bottom: 16px; } #sub #sub-navi02 ul { border: 1px solid #aaa; border-radius: 8px; overflow: hidden; } #sub #sub-navi02 ul li { border-bottom: 1px solid #aaa; } #sub #sub-navi02 ul li:last-child { border: none; } #sub #sub-navi02 ul li a { display: block; text-align: center; padding: 10px 0; position: relative; } #sub #sub-navi02 ul li a:after { content: ""; display: block; position: absolute; top: 38%; width: 0; height: 0; border: 5px solid transparent; left: 92%; border-left: 6px solid #43B2EF; } #sub #sub-navi02 ul li.cal .fa { color: #43B2EF; font-size: 1.2em; margin-right: 0.4em; } #sub .bnr-sns { margin-bottom: 16px; } #sub .bnr-sns li a { display: block; padding: 10px; text-align: center; color: #fff; font-size: 2.2em; position: relative; } #sub .bnr-sns li.bnr_fb a { background: #3B5997; } #sub .bnr-sns li.bnr_tw a { background: #1DA1F3; } #sub .bnr-sns li.bnr_inst a { background: #E54060; } #sub .bnr-sns li.bnr_line a { background: #00BA01; } #sub .bnr-sns li a:after { content: ""; display: block; position: absolute; top: 38%; width: 0; height: 0; border: 5px solid transparent; left: 92%; border-left: 6px solid #fff; } #sub .bnr-sns li a:hover { opacity: 0.9; } #sub .bnr-sns li a span { display: none; } #sub #banner_mini ul { border: 1px solid #aaa; padding: 16px; border-radius: 8px; overflow: hidden; } #sub #banner_mini ul li { margin: 0 0 8px; } #sub #banner_mini ul li:last-child { margin: 0; } .sidemenu .side_shoplist dt { font-size: 14px; cursor: pointer; padding: 7px 0; } .sidemenu .side_shoplist dt::after { font-family: "font Awesome 5 Free"; content: "\f055"; display: inline-block; padding-left: 5px; } .sidemenu .side_shoplist dt.up::after { font-family: "font Awesome 5 Free"; content: "\f056"; } .sidemenu .side_shoplist dd ul li a::before { font-family: "font Awesome 5 Free"; content: "\f054"; font-weight: 900; display: inline; padding-right: 4px; font-size: 11px; } /* --------------------------------------------- ソーシャルSHAREボタン共通 --------------------------------------------- */ .item .social { margin: 0 auto; box-sizing: border-box; padding: 20px 0 0; text-align: center; } .item .social:before { font-family: "font Awesome 5 Free", "Quicksand", sans-serif; letter-spacing: 0.05em; font-size: 18px; font-weight: bold; color: #555; content: "\f0d7　Share on!　\f0d7"; margin-bottom: 8px; display: block; } .item .social a { display: inline-block; border-right: 1px dotted #ccc; overflow: hidden; width: 40px; height: 40px; line-height: 40px; padding: 0 14px 0 16px; } .item .social a:last-of-type { border-right: none; } .item .social a::before { font-family: "Font Awesome 5 Brands"; font-weight: 400; font-size: 40px; vertical-align: middle; margin-right: 100%; } .item .social .twitter.btn::before { content: ""; display: block; margin-top: 5px; border-radius: 5px; width: 35px; height: 35px; background: #000000 url("../img/logo-x-white.png"); background-size: 22px; background-position: center; background-repeat: no-repeat; } .item .social .fb.btn::before { content: "\f082"; color: #1877f2; } .item .social .line.btn::before { content: "\f3c0"; color: #16B83A; } /* --------------------------------------------- ショップページ（kgm共通）bodyは記述しない --------------------------------------------- */ /*ショップページ＆各item_****.jspのヘッダー部分共通*/ /*--shop_header*--*/ .shop_header { background: linear-gradient(-60deg, #FFE5DC, #ffe4e4); } .shop_header .inner { background: #fff; margin: 0 auto 0; } .shop_header .inner #shop_title { position: relative; padding: 30px 0 15px 20px; box-sizing: border-box; min-height: 220px; } .shop_header .inner #shop_title .bg_shop_image { position: absolute; right: 0; top: 0; display: block; width: 60%; height: 100%; background-position: center; background-size: cover; z-index: 1; } .shop_header .inner #shop_title .bg_shop_image:before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 40%; height: 100%; background: -moz-linear-gradient(left, white 0%, white 16%, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(left, white 0%, white 16%, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to right, white 0%, white 16%, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); } .shop_header .inner #shop_title .shop_name { width: 45%; z-index: 10; position: absolute; top: 20px; left: 25px; } .shop_header .inner #shop_title h2 { font-size: 24px; font-weight: bold; line-height: 30px; /*共通スタイルを無効か*/ padding: 0; margin: 0; border: none; margin: 0 0 5px; text-align: left; background: none; } .shop_header .inner #shop_title .top_logo { margin: 20px 0 0; } .shop_header .inner #shop_title .top_logo img { max-height: 60px; } .shop_header .inner { position: relative; } .pc .shop_header > .inner { width: 80%; min-width: 960px; max-width: 1200px; } .shop_header .inner .shopmenu { position: absolute; right: 20px; top: 145px; z-index: 10; } .shop_header .inner .shopmenu li { display: inline-block; overflow: hidden; margin: 0 2px; } .shop_header .inner .shopmenu li a { background: rgb(234 94 0); display: block; box-sizing: border-box; width: 100px; height: 100px; color: #fff; text-align: center; padding: 24px 0 0; line-height: 140%; font-weight: bold; border-radius: 4px; } .shop_header .inner .shopmenu li a:hover { opacity: 1; } .shop_header .inner .shopmenu li a::after { font-family: "font Awesome 5 Free"; font-weight: bold; content: "\f078"; display: block; margin: 0.4em 0 0; transition-duration: .1s; } .shop_header .inner .shopmenu li a:hover::after { margin: .5em 0 0; } .shop_header .inner .shopmenu li a span { display: block; } .shop_header .inner #shop_status dl:first-of-type { border-top: 1px solid #ccc; } .shop_header .inner #shop_status dl { border-bottom: 1px solid #ccc; overflow: hidden; display: flex; } .shop_header .inner #shop_status dl.tel, .shop_header .inner #shop_status dl.floor { width: 50%; float: left; } .shop_header .inner #shop_status dt { background: #fff; font-size: 20px; line-height: 40px; width: 50px; text-align: center; } .shop_header .inner #shop_status dd { line-height: 1.5em; box-sizing: border-box; padding: 10px 10px 10px 5px; } .shop_header .inner #shop_status dl.eigyouhour dd { white-space: pre-wrap; } body.pc .shop_header .inner #shop_status dl.eigyouhour dd { /*赤丸リンクボタンの干渉除け　PCのみ*/ padding-right: 360px; } /*個別ニュース、クーポン、リクルート　ページのヘッダーを調整*/ body.item_recruit .shop_header #shop_title, body.item_coupon .shop_header #shop_title, body.item_news .shop_header #shop_title { min-height: 180px; border-bottom: 1px solid #ccc; } body.item_recruit .shop_header #shop_title h2, body.item_coupon .shop_header #shop_title h2, body.item_news .shop_header #shop_title h2 { width: 100%; } body.item_recruit .shop_header #shop_status, body.item_coupon .shop_header #shop_status, body.item_news .shop_header #shop_status { display: none; width: 50%; float: right; padding: 20px; box-sizing: border-box; } body.item_recruit .shop_header #shop_status dl.eigyouhour dd.eigyouhour, body.item_coupon .shop_header #shop_status dl.eigyouhour dd.eigyouhour, body.item_news .shop_header #shop_status dl.eigyouhour dd.eigyouhour { padding: 10px 10px 10px 8px; } body.item_recruit .shop_header .inner .shopmenu, body.item_coupon .shop_header .inner .shopmenu, body.item_news .shop_header .inner .shopmenu { right: 0px; top: 100px; transform: scale(0.8); } body.item_recruit .shop_header .inner, body.item_coupon .shop_header .inner, body.item_news .shop_header .inner { margin: 0 auto; } /*--shop_header*--*/ #shoppage { /* padding:0 16px;*/ } .view #shoppage #shop_info { padding: 0 0 40px; } #shoppage #shop_info .section { border: 4px solid #EFEEEC; border-top: none; } #shoppage #shop_info .intro { /* background: #EFEEEC; */ padding: 24px; overflow: hidden; } #shoppage #shop_info .pickup h5 { font-weight: bold; font-size: 18px; padding: 12px 0; background: #efeeec; width: 50px; display: block; text-align: center; color: #ea5e00; } #shoppage #shop_info .pickup p { width: calc(76% - 20px); white-space: pre-wrap; padding: 12px 18px; } #shoppage #shop_info .pickup i { margin-right: 4px; } #shoppage #shop_info .pickup div { margin: 0 24px; border-bottom: 1px solid #ccc; overflow: hidden; display: flex; } #shoppage #shop_info .pickup div:first-of-type{ border-top: 1px solid #ccc; } #shoppage #shop_info .desc { font-size: 1.1em; line-height: 1.5em; margin: 0 0 5px 0; } #shoppage #shop_info .desc h4 { font-weight: bold; margin: 5px 0 15px; font-size: 18px; color: #ea5e00; } #shoppage #shop_info .desc pre { font-size: 90%; } #shoppage #shop_info .image { float: right; width: 260px; margin: 0 0 0 20px; } #shoppage #shop_info .image img { border-radius: 0; width: 100%; } #shoppage #shop_info .data { clear: both; padding: 24px; } #shoppage #shop_info .data table.table01 td em { margin: 0 6px 6px 0; display: inline-block; font-size: 14px; padding: 6px 10px; box-sizing: border-box; line-height: 1.0em; border-radius: 4px; border: 1px solid #CCCCCC; border-radius: 100px; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em { } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em i{ color: #ea5e00 } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em i.fa--original-reserve::before{ content: ""; display: inline-block; width: 1.5em; height: 1em; background: url("../img/ico_gr_reserve.svg") no-repeat center / contain; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em i.fa--original-takeout::before{ content: ""; display: inline-block; width: 1em; height: 1em; background: url("../img/ico_gr_takeout.svg") no-repeat center / contain; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em i.fa--original-delivery::before{ content: ""; display: inline-block; width: 1.5em; height: 1em; background: url("../img/ico_gr_delivery.svg") no-repeat center / contain; } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment3, #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment4, #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment5, #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment6, #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment7, #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment8, #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment9 { padding: 2px 10px; vertical-align: bottom; } #shoppage #shop_info .data table.table01 tr.shop-generic1{} #shoppage #shop_info .data table.table01 tr.shop-generic1 em img{ max-height: calc(1em + 8px); margin: 0 0px; } #shoppage #shop_info .data table.table01 td em i { margin-right: 4px; } #shoppage #shop_info .data table.table01 td span.attention { display: block; font-size: 10px; } /*white-space: preのオプション*/ .shop-eigyouhour td p, .shop-tokuten td p { white-space: pre-wrap; } #shoppage #shop_info table.table01 th { vertical-align: top; font-weight: bold; width: 24%; } #shoppage #shop_info table.table01 tr.shop-map td a { display: inline-block; margin-left: 12px; font-family: "Quicksand", sans-serif; padding: 0 10px 0 14px; border-radius: 10px; height: 25px; line-height: 25px; font-size: 1.1em; font-weight: bold; color: #55B5AA; border: 2px solid #55B5AA; } #shoppage #shop_info table.table01 tr.shop-map td a::after { content: "\f054"; font-family: "font Awesome 5 Free"; margin-left: 8px; font-size: 0.6em; font-weight: bold; } #shoppage #shop_info table.table01 tr.shop-map td a:hover::before { display: inline-block; } #shoppage #shop_info table.table01 tr.shop-dealitem td { font-size: 0.8em; } #shoppage #shop_info .siteurl { margin: 0 24px 24px; position: relative; text-align: center; display: flex; justify-content: center; } #shoppage #shop_info .siteurl p { width: 20%; display: inline-block; box-sizing: border-box; border-right: 4px solid #efeeec; } #shoppage #shop_info .siteurl p a { display: block; padding: 10px; text-align: center; width: 100%; box-sizing: border-box; position: relative; min-height: 50px; line-height: 25px; } #shoppage #shop_info .siteurl .shop-mobileurl a{ line-height: 1; padding: 10px 10px 10px 15px; } #shoppage #shop_info .siteurl p a i { font-size: 20px; margin: 0 10px 0 4px; /*font-weight: normal;*/ vertical-align: middle; color: #ea5e00; } #shoppage #shop_info .siteurl .shop-other_url1 a i {color: #1877f2;} #shoppage #shop_info .siteurl .shop-other_url2 a i {color: #CF2E92;} #shoppage #shop_info .siteurl .shop-mobileurl a img { height: 20px; position: absolute; top: calc(100% - 35px); left: 20px;} #shoppage #shop_info .siteurl .shop-other_url3 a img { height: 17px; margin: 0 10px 0 4px; vertical-align: middle;} #shoppage #shop_info .siteurl p:last-of-type { border-right: none; } #shoppage #shop_info .siteurl p a:after { content: ""; display: inline-block; border: 6px solid transparent; border-left-color: #fff; position: absolute; right: 8px; top: calc(50% - 6px); display: none; } .cat_items { margin: 16px 0 36px; } .cat_items .more { border: 2px solid #EA5E00; border-radius: 5px; padding: 10px; display: block; width: 200px; text-align: center; background: #fff; color: #ea5e00; margin: 20px auto 10px; position: relative; } .cat_items .more::after{ content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: bold; position: absolute; right: 10px; } .cat_items h3 { border: 1px solid #ccc; padding: 8px 16px; font-weight: bold; font-size: 1.1em; } /* cat(n)_viewの見出し・ショップ情報の見出し */ #cat1_view h3, #cat3_view h3, #contents-main article.main.item h3, .view #shop_info h3 { background: none; text-align: center; border: none; font-size: 14px; font-weight: normal; margin: 28px 0 0; padding: 0 8px 20px; border-bottom: 4px solid #efeeec; text-align: left; } #contents-main article.main.item h3 { display: block; padding: 10px 0; } #cat1_view h3::before, #cat3_view h3::before, article.main.item .gcat.cat1::before, article.main.item .gcat.cat2::before, article.main.item .gcat.cat3::before, .view #shop_info h3::before { display: block; font-family: "Quicksand", sans-serif; letter-spacing: 0.05em; font-size: 32px; font-weight: bold; color: #ea5e00; line-height: 1.2; } /* cat(n)_viewの見出し・ショップ情報の見出し - 文字*/ #cat1_view h3::before { content: "Shopnews"; } #cat3_view h3::before { content: "Work together"; } article.main.item .gcat.cat1::before { content: "Shopnews"; } article.main.item .gcat.cat2::before { content: "Coupon"; } .view #shop_info h3::before { content: "Shop detail"; } article.main.item .gcat.cat3::before { content: "Work together"; } /*********************/ /*店長ボイス(cat5 view)*/ #cat5_view { display: flex; align-items: center; } #cat5_view h3 { width: 200px; border: 0; padding: 0; margin: 0; font-family: "Quicksand", sans-serif; font-weight: bold; letter-spacing: 0.05em; font-size: 22px; background: none; } #cat5_view .cat5_view_today { color: #63b3aa; } #cat5_view article.item { width: calc( 100% - 215px); margin-left: 15px; position: relative; background: #FFE5DC; border-radius: 8px; } #cat5_view article.item::after { content: ""; display: block; position: absolute; bottom: 25px; left: -8px; width: 13px; height: 13px; background: #FFE5DC; -webkit-transform: rotate(45deg); transform: rotate(45deg); } #cat5_view article.item h4 { padding: 20px 25px; color: #777; } #cat5_view article.item h4 .item_main { font-weight: bold; color: #555555; } /**/ #cat1_view { overflow: hidden; margin: 0 0 36px; } #cat1_view article.item { width: 50%; float: left; margin: 10px 0px 0; padding: 20px; box-sizing: border-box; position: relative; height: 240px; border-left: 4px solid #EFEEEC; } .pc #cat1_view article.item:last-of-type, .pc #cat1_view article.item:nth-of-type(2n) { border-right: 4px solid #EFEEEC; } .cat_items article.item .image, .bf5 article.item .image { float: right; height: 200px; width: 140px; text-align: center; overflow: hidden; position: relative; margin: 0 0 0 20px; } .cat_items article.item .image a { color: #43B2EF; } .cat_items article.item .image img, .bf5 article.item .image img { height: 100%; box-sizing: border-box; max-width: none; } .cat_items article.item .image .morelink { display: inline-block; margin: 3px auto; text-align: center; width: 90px; background: #fff; border: 1px solid #43B2EF; border-radius: 24px; font-size: 0.9em; padding: 2px 10px; position: relative; } .cat_items article.item .image .morelink:after { content: ""; display: block; position: absolute; top: 38%; width: 0; height: 0; border: 4px solid transparent; left: 88%; border-left: 5px solid #43B2EF; } /*各ニュース・クーポン・求人情報にショップ名読込⇒標準で非表示*/ body.bf1 .cat_items article.item .shopname, body.item_news .cat_items article.item .shopname, body.item_coupon .cat_items article.item .shopname, body.item_recruit .cat_items article.item .shopname { display: none; } /*商品リスト時は、mdカテゴリリストの非表示*/ .cat_items article.item .mdlistiew.itemlist { display: none; } .cat_items article.item .desc h4 { word-break: break-all; } .cat_items article.item .desc h4 a { font-weight: bold; text-decoration: underline; font-size: 16px; } .cat_items article.item.cat2 .desc h4 a { display: block; } .cat_items article.item .desc .price { font-weight: bold; padding: 4px 0; font-size: 14px; line-height: 150%; word-break: break-all; } .cat_items article.item .desc .date, .cat_items article.item .desc .price_date, article.shopnewsitem .date, article.recruititem .date { font-size: 12px; line-height: 1em; margin: 0.5em 0; color: #777; } @media screen and (max-width: 767px) { .cat_items article.item .desc .date, .cat_items article.item .desc .price_date, article.shopnewsitem .date, article.recruititem .date { font-size: 11px; } } /*sale時*/ #cat1_view article.item.sale .price { color: #e33; } /*****もっと見るボタン[汎用]*****/ .morelink { width: 80px; height: 80px; position: absolute; bottom: 0; right: 0; display: block; overflow: hidden; font-family: "Quicksand", sans-serif; text-align: center; display: none;} .morelink:hover { text-decoration: none; } .morelink span { width: 160px; height: 80px; background: #ea5e00; display: block; padding: 0; box-sizing: border-box; line-height: 20px; font-size: 16px; opacity: 0.9; color: #fff; transform: rotate(-42deg); position: absolute; top: 34px; left: -10px; } .item.sale .morelink span { background: #e33; } .morelink span em { font-weight: inherit; } .morelink span.coupon { background: #63b3aa; } .morelink span.recruit { background: #CCCCCC; } .morelink span:after { font-family: "font Awesome 5 Free"; content: ""; display: block; margin: -3px; font-size: 22px; font-weight: bold; } /******もっと見るボタン[汎用]以上*****/ .cat3_view article.item .morelink, #cat3_view article.item .morelink { /*求人情報のみ位置調整*/ bottom: 0; } /* クーポン表示関連：①もっと見るボタン　②クーポン強調表示(フキダシ) */ .item.cat2 .morelink span { background: #63b3aa; } #cat1_view .item.cat2 .desc h4::before { /*フキダシ中身*/ content: "Coupon!"; border: #63b3aa 1px solid; text-align: center; font-family: "Quicksand", sans-serif; font-weight: bold; color: #63b3aa; letter-spacing: 1px; line-height: 1em; font-size: 90%; padding: 4px 12px; margin: 0 0 4px; display: inline-block; } /*画像がないときはフキダシを消す*/ /*#cat1_view .item.cat2.noimg .desc::before, #cat1_view .item.cat2.noimg .desc::after{ display: none; }*/ /* 求人関連 ※#cat3_view はショップページ、個別ページ下部の一覧 ※.cat3_view　は求人一覧用の指定 */ .cat3_view article.item, #cat3_view article.item { position: relative; float: none; overflow: hidden; border-bottom: 4px solid #EFEEEC; padding: 20px; margin: 0 0 20px; box-sizing: border-box; } .cat3_view article.item .date, #cat3_view article.item .date { font-size: 12px; line-height: 1em; margin: 0.5em 0; color: #777; } @media screen and (max-width: 767px) { .cat3_view article.item .date, #cat3_view article.item .date { font-size: 11px; } } .cat3_view article.item h4, #cat3_view article.item h4 { color: #ea5e00; margin: 10px 0 20px; padding: 16px 20px; width: -webkit-calc(100% - 170px); width: calc(100% - 170px); box-sizing: border-box; position: relative; font-weight: bold; font-size: 1.1em; line-height: 1.3em; background: #ffe5dc; border-radius: 8px; } .cat3_view article.item.noimg h4, #cat3_view article.item.noimg h4 { width: 100%; } .cat3_view article.item h4::after, #cat3_view article.item h4::after { /* h4フキダシ content: ""; display: block; position: absolute; bottom: -6px; left: 24px; width: 13px; height: 13px; background: #ffe5dc; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);*/ } .cat3_view article.item table, #cat3_view article.item table { width: -webkit-calc(100% - 170px); width: calc(100% - 170px); } .cat3_view article.item th, #cat3_view article.item th { width: 30%; } .sale.icon, .newgoods_conf #goods_title.formitem .sale, .cat_items article.item .desc .sale { background: #e33; color: #fff; display: inline-block; padding: 4px 12px; font-size: 1em; font-weight: bold; line-height: 1em; letter-spacing: 1px; border-radius: 16px; font-size: 90%; margin: 0 4px 0px 0; font-family: "Quicksand", sans-serif; } .cat_items article.item .goodscomment { padding: 0; margin: 4px 0 0px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .cat_items article.item .read_more a { color: #999; } .cat_items article.item .tag_list { text-align: left; padding: 0; border: none; } .cat_items article.item .tag_list li { display: inline; margin-right: 0.5em; white-space: normal; } .cat_items article.item .tag_list li a { text-decoration: underline; } /* ショップページ　クーポン表示 */ body.view.index.bf3 #coupon article.item .cat_name, body.popup.coupon article.item .cat_name, #shoppage article.item.cat2 .cat_name { display: none; } .cat_items article.item.cat2 .desc h4 { border-bottom: 1px dotted #ccc; padding: 0px 0 14px; margin: 0; overflow: hidden; word-break: break-all; } .cat_items article.item .desc .fromto { padding: 8px 0; } .cat_items article.item .desc .fromto dt { font-weight: bold; padding: 1px 5px; background: #ffe4e4; display: inline-block; margin-right: 5px; } .cat_items article.item .desc .fromto dd { display: inline-block; } body.view.index.bf3 #coupon article.item.noimg .desc .fromto dd, body.view.index.bf3 #coupon article.item.noimg .desc .coupon_bikou dd, body.popup.coupon article.item.noimg .desc .fromto dd, body.popup.coupon article.item.noimg .desc .coupon_bikou dd, #shoppage article.item.cat2.noimg .desc .fromto dd, #shoppage article.item.cat2.noimg .desc .coupon_bikou dd { width: auto; } body.view.index.bf3 #coupon article.item .print, body.popup.coupon article.item .print, #shoppage article.item.cat2 .print { position: absolute; bottom: 8px; left: 0; width: 100%; text-align: center; margin: 5px auto; } body.view.index.bf3 #coupon article.item .print a, body.popup.coupon article.item .print a, #shoppage article.item.cat2 .print a { width: 160px; display: inline-block; padding: 16px; color: #fff; background: #63b3aa; border-radius: 8px; position: relative; letter-spacing: 1px; } body.view.index.bf3 #coupon article.item .print a:after, body.popup.coupon article.item .print a:after, #shoppage article.item.cat2 .print a:after { content: ""; display: block; position: absolute; top: 38%; width: 0; height: 0; border: 4px solid transparent; left: 88%; border-left: 5px solid #FFF; } body.view.index.bf3 #coupon article.item .print a i, body.popup.coupon article.item .print a i, #shoppage article.item.cat2 .print a i { margin-right: 4px; } /* --------------------------------------------- item_****** --------------------------------------------- */ /*全体*/ .shopnewsitem.item { width: 900px; padding: 0 0; margin: 0 auto 40px; } .shopnewsitem.item::after { /*clearfix*/ width: 900px; padding: 0 20px; content: ""; clear: both; display: block; } .shopnewsitem.item .date { margin: 20px 80px 0; } .shopnewsitem.item .imgarea { background: #EFEEEC; padding: 0 0; margin: 0 80px 20px; border-radius: 8px; } .shopnewsitem.item.noimg .imgarea { display: none; } /*アイテム一覧　メイン画像*/ .shopnewsitem .slick-list { margin: 0 0 10px; } .shopnewsitem .main_img { height: 500px; } .shopnewsitem .main_img img { display: block; margin: 20px auto 0; top: 0; position: relative; max-height: 100%; } .shopnewsitem .main_img img { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } /*アイテム一覧　サムネイル画像*/ .shopnewsitem .thum_imgs { width: 600px; margin: 0 auto; } .shopnewsitem .thum_img { width: 120px; height: 120px; border: 4px solid transparent; border-radius: 8px; margin: 0 10px 20px; overflow: hidden; } .shopnewsitem .thum_img span { display: block; width: 120px; height: 120px; background-position: center; background-repeat: no-repeat; background-size: cover; margin: 0 auto; cursor: pointer; } .shopnewsitem .thumb-current { border: 4px solid #63b3aa; } .shopnewsitem .slick-prev, .slick-next { cursor: pointer; } .shopnewsitem .slider.slider-nav.thum_imgs { display: flex; justify-content: center; } .shopnewsitem .slick-arrow { position: absolute; top: 560px; z-index: 1000; font-size: 30px; color: #63b3aa; } .shopnewsitem .slick-next { right: 6px; } .shopnewsitem .slick-prev { left: 6px; } /*items 左側*/ .shopnewsitem .desc { width: 740px; padding: 0 80px; margin: 0 0 40px; float: left; } .shopnewsitem .desc h4 { font-size: 20px; font-weight: bold; margin: 16px 0; } .shopnewsitem .desc .price { font-weight: bold; } .shopnewsitem.sale .desc .price { color: #e33; } .shopnewsitem .desc .goodscomment { border-top: 1px dotted #ccc; margin: 16px 0; padding: 16px 0; } .shopnewsitem .mdlistiew { margin: 30px 0 -8px; padding: 0; text-align: left; } .shopnewsitem .mdlistiew li { margin: 0 5px 5px 0; } .shopnewsitem .link { text-align: center; margin: 0; } .shopnewsitem .link a { text-align: center; text-decoration: none; background: #ea5e00; color: #ffffff; padding: 20px; border-radius: 8px; position: relative; font-weight: 700; font-size: 16px; min-width: 40%; display: inline-block; } .shopnewsitem .link a::after { font-family: "font Awesome 5 Free"; margin: 0 0 0 10px; font-size: 14px; display: inline-block; content: "\f054"; font-weight: bold; vertical-align: middle; } .shopnewsitem .tag_list { padding: 0; margin: 20px 0 0; text-align: left; border-bottom: none; clear: both; } .shopnewsitem .tag_list_name { margin: 0 5px 5px 0; } .shopnewsitem .tag_list .tag_list_name a { border-radius: 100px; padding: 5px 20px; display: block; } /*ソーシャルボタン、いいねボタン*/ .shopnewsitem .goods_like_btn { width: calc(60% - 90px); margin: 0 0 20px 80px; background: #ffe5dc; border-radius: 8px; padding-top: 20px; height: 120px; } .shopnewsitem .goods_like_btn:before { font-family: "font Awesome 5 Free", "Quicksand", sans-serif; letter-spacing: 0.05em; font-size: 18px; font-weight: bold; color: #555; content: "\f0d7　Like it!　\f0d7"; margin-bottom: 8px; display: block; } .shopnewsitem .goods_like_btn p { display: inline-block; padding: 0 0 20px; text-align: center; width: 100%; height: auto; border-radius: 0; } .shopnewsitem .goods_like_btn p:before { content: "このニュースにいいね！する"; color: #ea5e00; margin-right: 16px; font-size: 16px; font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; } .shopnewsitem .goods_like_btn p i, .shopnewsitem .goods_like_btn p span { display: inline-block; margin-right: 8px; font-size: 2.0em; vertical-align: middle; color: #ea5e00; } .shopnewsitem .goods_like_btn p i { animation: like_anime 4s ease infinite; transform-origin: 50% 50%; } @keyframes like_anime { 0% { transform: translate(0, -3px); } 5.55556% { transform: translate(0, 3px); } 11.11111% { transform: translate(0, -3px); } 16.66667% { transform: translate(0, 3px); } 22.22222% { transform: translate(0, -3px); } 27.77778% { transform: translate(0, 3px); } 30.55556% { transform: translate(0, 0); } 100% { transform: translate(0, 0); } } .shopnewsitem .social { float: right; border: 4px solid #EFEEEC; border-radius: 8px; margin: 0 80px 20px 0; width: calc(40% - 90px); height: 120px; } /*アイテム1記事の際のほかのアイテム一覧でいいねボタン非表示*/ body.item_news .goods_like_btn.mini p { /*display: none;*/ } /*セール*/ .shopnewsitem.cat1.sale .sale.icon { width: 100px; letter-spacing: 1.5px; line-height: 24px; height: 25px; font-size: 19px; padding: 0; text-align: center; } /*クーポン*/ .shopnewsitem.cat2 .desc { border: 1px solid #ccc; width: 740px; margin: 0 80px 40px; padding: 40px 40px 20px; box-sizing: border-box; position: relative; min-height: 300px; } /*.shopnewsitem.cat2 .desc:before { content: "Coupon!"; position: absolute; top: -15px; right: calc(50% - 60px); background: $KEY_COLOR_2; width: 120px; border-radius: 100px; text-align: center; font-family: $FONT_FAMILY_EN; font-weight: bold; color: #fff; letter-spacing: 0.05em; height: 25px; font-size: 18px; } */ .shopnewsitem.cat2 .desc h4 { color: #63b3aa; margin: 0; padding: 0 0 16px; border-bottom: 2px solid #63b3aa; line-height: 1.4em; word-break: break-word; } .shopnewsitem.cat2 .desc dl { border-bottom: 1px dotted #ccc; padding: 15px 0; } .shopnewsitem.cat2 .desc dt { display: inline-block; background: #ffe4e4; width: 100px; margin: 0 10px 0 0; border-radius: 24px; font-weight: bold; text-align: center; } .shopnewsitem.cat2 .desc dd { display: inline-block; width: 400px; vertical-align: middle; } .shopnewsitem.cat2 .desc .print a { width: 60%; border-radius: 8px; background: #63b3aa; display: block; padding: 16px; box-sizing: border-box; line-height: 16px; font-size: 18px; color: #fff; text-align: center; margin: 16px auto; } .shopnewsitem.cat2 .desc .print a:before { font-family: "font Awesome 5 Free"; font-weight: bold; content: "\f02f"; margin-right: 8px; } .shopnewsitem.cat2 .mdlistiew { width: 600px; padding: 20px 40px 20px 80px; clear: both; } .pc .sp_couponview { display: none; } /*求人情報　item_recruite.jsp*/ .pc .recruititem.item { width: 900px; padding: 0 0; margin: 0 auto 40px; } .recruititem.item h4 { color: #ea5e00; margin: 10px auto 20px; padding: 20px 30px 26px; box-sizing: border-box; position: relative; font-weight: bold; font-size: 20px; line-height: 1.5em; background: #ffe5dd; border-radius: 8px; } .recruititem.item h4::after {/* content: ""; display: block; position: absolute; bottom: -6px; left: 24px; width: 13px; height: 13px; background: #ffe5dc; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);*/ } .recruititem.item .date { margin: 20px 80px; } .recruititem.item .imgarea { background: #EFEEEC; padding: 20px 0; margin: 0 80px 20px; border-radius: 8px; } .recruititem.item .imgarea img { display: block; margin: 0 auto; max-height: 480px; max-width: 480px; } .pc .recruititem.item .desc { width: 740px; padding: 0 80px; margin: 20px 0 40px; } .recruititem.item .desc a{ background: #ffe5dc; border-radius: 20px; padding: 4px 16px; margin: -2px 0; } .recruititem.item .desc a i{ margin-left: 8px; } .recruititem.item.cat3 th { width: 30%; padding: 10px 25px; text-align: center; font-weight: bold; } .recruititem.item.cat3 td { padding: 16px 20px 16px 25px; line-height: 1.3em; } .other_jobs .cat_items h3 { display: none; } #contents-main .other_jobs h3 { border: none; font-family: "Quicksand", sans-serif; font-weight: bold; text-align: center; font-size: 20px; padding: 20px 0 0; letter-spacing: 0.05em; } /*共通戻るボタン*/ .return_shop { clear: both; margin: 20px 0; line-height: 1em; text-align: center; } .return_shop a { display: inline-block; padding: 16px 28px 16px 24px; border-radius: 24px; background: #EFEEEC; font-size: 14px; } .return_shop a:before { font-family: "font Awesome 5 Free"; font-weight: bold; content: "\f053"; margin-right: 16px; vertical-align: middle; } /* --------------------------------------------- div#goodslist-header-navi --------------------------------------------- */ div#goodslist-header-navi { } div#goodslist-header-navi dl { width: 100%; box-sizing: border-box; text-align: center; padding: 5px 0; } div#goodslist-header-navi dl:after { content: ""; clear: both; display: block; } div#goodslist-header-navi dt { font-family: "Quicksand", sans-serif; font-weight: 700; letter-spacing: 1px; } div#goodslist-header-navi dt, div#goodslist-header-navi dd { margin: 12px 0; color: #FFF; position: relative; text-align: center; display: inline-block; } #goodslist-header-navi dl dt a, #goodslist-header-navi dl dd a { text-decoration: none; color: #555555; display: block; padding: 8px 10px; position: relative; font-size: 14px; border-radius: 8px; border: 2px solid #EFEEEC; } #goodslist-header-navi dl dt a:hover, #goodslist-header-navi dl dd a:hover, #goodslist-header-navi dl dt.current a, #goodslist-header-navi dl dd.current a { background: #EFEEEC; color: #555555; } #goodslist-header-navi dl dt.current a, #goodslist-header-navi dl dd.current a { box-sizing: border-box; } #goodslist-header-navi dl dt.current span, #goodslist-header-navi dl dd.current span { font-size: 14px; color: #ea5e00; } body.bf4 #goodslist-header-navi dl dd a:hover, body.bf5 #goodslist-header-navi dl dd a:hover { background: #EFEEEC; } /* ----------------------------------------- goodslist.jspを基本に.NewsItemList ※この見せ方のページは、class="NewsItemList" ※上位のスタイルを上書きするために#contents-main が必要 ----------------------------------------- */ #contents-main .NewsItemList { padding: 0; width: 100% !important; box-sizing: border-box; margin: 0 0 10px; } #contents-main .NewsItemList:after { content: ""; clear: both; display: block; height: 1px; } #contents-main .NewsItemList .item { box-sizing: border-box; float: left; height: 440px; width: 33.33333333333%; width: calc(100% / 3); padding: 16px 20px 0; margin: 10px 0 0; position: relative; border-left: 4px solid #EFEEEC; } .pc #contents-main .NewsItemList .item:last-of-type, .pc #contents-main .NewsItemList .item:nth-of-type(3n) { border-right: 4px solid #EFEEEC; } #contents-main .NewsItemList .item .news_box .gcat_badge { display: none; } /*#contents-main .NewsItemList .item.cat2 .news_box .image*/ #contents-main .NewsItemList .item.cat2 h3.goods:before { content: "Coupon!"; margin: 0 auto; border: #63b3aa 1px solid; text-align: center; font-family: "Quicksand", sans-serif; font-weight: bold; color: #63b3aa; font-size: 90%; line-height: 1em; padding: 4px 12px; display: block; margin-bottom: 10px; } #contents-main .NewsItemList .item .image { height: 260px; position: relative; margin: 4px 0 0; } #contents-main .NewsItemList .item .image a { display: block; width: 100%; height: 100%; } #contents-main .NewsItemList .item .image img { border-radius: 8px; } #contents-main .NewsItemList .item .image span { border-radius: 8px; } #contents-main .NewsItemList .item .image .ico_new2 { font-family: "Quicksand", sans-serif; font-weight: 700; position: absolute; margin: 0; text-align: center; top: 0px; left: 0px; background: #fee101; padding: 0; line-height: 50px; color: #ea5e00; width: 50px; height: 50px; box-sizing: border-box; z-index: 10; border-radius: 0} #contents-main .NewsItemList .item .desc { padding: 12px 0 0 0; position: relative; } #contents-main .NewsItemList .item .date { font-size: 12px; line-height: 1em; margin: 0.5em 0; color: #777; } @media screen and (max-width: 767px) { #contents-main .NewsItemList .item .date { font-size: 11px; } } #contents-main .NewsItemList .item h3.goods { font-weight: bold; line-height: 140%; margin: 4px 0; border: none; padding: 0; background: none; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #contents-main .NewsItemList .item .price { font-weight: bold; font-size: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #contents-main .NewsItemList .item.sale .price { color: #f00; } #contents-main .NewsItemList .item.cat2 .price { display: none; } #contents-main .NewsItemList .item .name { padding-right: 20px; padding-top: 4px; line-height: 14px; } #contents-main .NewsItemList .item .name a { font-size: 80%; } #contents-main .NewsItemList .item .goods_like_btn.mini { bottom: 0px; left: 20px; } #contents-main #goodslist .price_date { font-size: 10px; padding: 10px; background: #efeeec; margin-top: 40px;} #contents-main .NewsItemList .item .shoplogo{ display: none; } /*NewsItemListを基本にしつつcoupon表示変更*/ #contents-main #coupon div#goodslist-header-navi { display: none; } #contents-main #coupon .NewsItemList { position: relative; } #contents-main #coupon .NewsItemList .item { height: 260px; width: 50%; } #contents-main #coupon .NewsItemList .item:nth-of-type(2n) { border-right: 4px solid #EFEEEC; } #contents-main #coupon .NewsItemList .item:nth-of-type(3n) { border-right: none; } #contents-main #coupon .NewsItemList .item h3.goods { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #contents-main #coupon .NewsItemList .item .image { float: right; height: 220px; width: 160px; margin: 4px 0 0 12px; } #contents-main #coupon .NewsItemList .item .name { padding-right: 0; } #contents-main #coupon .NewsItemList .item .desc { padding: 0 0 12px; position: static; } #contents-main #coupon .NewsItemList .item .desc .fromto { padding: 8px 0; font-size: 12px; } #contents-main #coupon .NewsItemList .item .desc .fromto dt { font-weight: bold; padding: 1px 2px; background: #ffe4e4; display: inline-block; margin-right: 4px; } #contents-main #coupon .NewsItemList .item .desc .fromto dd { display: inline; } #contents-main #coupon .NewsItemList .item .goods_like_btn.mini { position: absolute; } /*NewsItemListを基本にしつつsale表示変更*/ body.sale #contents h2 { background: #e33; color: #fff; border-bottom: none; } body.sale #contents-main .shopnews_tab li.current a { background: #e33; } body.sale .shopnews_tab li.current a:after { border-top-color: #e33; } body.sale #contents-main .NewsItemList .item { border-left-color: #e33; } body.sale #contents-main .NewsItemList .item:nth-of-type(3n) { border-right-color: #e33; } /* --------------------------------------------- ニュース一覧など　次へボタン --------------------------------------------- */ #goodslist-navi { background: #efeeec; margin: 0; padding: 0 20px 20px; overflow: hidden;} #goodslist-navi .back { float: left; } #goodslist-navi .next { float: right; } #goodslist-navi form input[type="submit"] { padding: 12px 12px 12px 15px; font-size: 16px; border-radius: 4px; border: none; cursor: pointer; background: #FFF; color: #333; text-shadow: none; appearance: none; -webkit-appearance: none; } /* --------------------------------------------- ショップ検索用　index.jsp bf=8 --------------------------------------------- */ body.index #search-category, body.index #search-on, body.index #search-floor { margin-bottom: 32px; } body.index .search { padding: 20px; } body.index .search h3 { margin-bottom: 20px; } body.index .search #search-all { clear: both; } body.index .search .search_block { margin: 0 0 32px; } body.index .search .search_block { text-align: center; overflow: hidden; } body.index .search .search_block ul { display: flex; justify-content: center; flex-wrap: wrap; } body.index .search .search_block li { width: calc(100% / 3 - 8px); margin: 0 4px 10px; display: block; border-radius: 8px; } body.index .search .search_block li a { display: block; width: 100%; height: 100%; padding: 20px 35px 20px 10px; box-sizing: border-box; position: relative; text-align: center; font-weight: bold; border-radius: 8px; border: 1px solid #ccc; } body.index .search .search_block li a:after { font-family: "font Awesome 5 Free"; font-weight: bold; content: "\f054"; position: absolute; top: calc(50% - 14px); right: 16px; display: block; color: #ea5e00; font-size: 20px; } body.index .search .search_block a:hover:before { border-left-color: #fff; } body.index .search div#search-all { margin: 0 0 10px; padding-left: 0px; } body.index .search div#search-all div.title p { margin: 0 24px 4px; text-align: right; font-size: 10px; } body.index div#searchcat div.title, body.index div#searchon div.title, body.index .search #shop-icon { margin: 0 16px; } body.index .search div.title h4 { font-weight: bold; font-size: 18px; padding: 0 0 16px; text-align: center; } body.index div#searchcat table.table01, body.index div#searchon table.table01 { clear: both; } body.index div.search table.table01 td { padding: 16px 8px; } body.index div.search table.table01 td.tel, body.index div.search table.table01 td.hour, body.index div.search table.table01 td.floor { font-size: 12px; line-height: 16px; } body.index div.search table.table01 th { display: none; } body.index div.search table.table01 td.name p { font-size: 16px; line-height: 20px; } body.index div.search table.table01 td.name a { font-weight: bold; text-decoration: underline; } body.index div.search table.table01 td.floor a { font-weight: bold; } body.index div.search table.table01 .name { width: 35%; padding: 16px 8px 16px 16px; } body.index div.search table.table01 .name .biz { font-size: 12px; } body.index div.search table.table01 .logo { width: 116px; text-align: center; } body.index div.search table.table01 .logo img { width: 80px; margin: 0 auto; } body.index div.search table.table01 .tel { width: 15%; } body.index div.search table.table01 .hour { width: 25%; } body.index div.search table.table01 tr:first-child { border-top: 1px solid #ccc; } body.index div.search table.table01 td.floor { text-align: center; position: relative; padding-right: 24px; background: #FFE5DC; } body.index div.search table.table01 td.floor:after { font-family: "font Awesome 5 Free"; content: "\f054"; font-weight: bold; font-size: 20px; display: inline-block; color: #ea5e00; position: absolute; right: 6px; top: 40%; top: calc(50% - 8px); } body.index div.search table.table01 td.hour p:before { font-family: "font Awesome 5 Free"; font-weight: normal; content: "\f017"; margin: 0 4px 0 0; font-size: 14px; } body.index div.search table.table01 td.tel p:before { font-family: "font Awesome 5 Free"; font-weight: bold; content: "\f095"; margin: 0 4px 0 0; font-size: 14px; } body.index div.search #shop-icon { margin: 8px 16px; } body.index div.search #shop-icon ul li { display: inline-block; margin-right: 20px; font-size: 90%; } body.index div#category-navi { margin: -20px 0 8px; width: 100%; box-sizing: border-box; text-align: center; padding: 0; border-bottom: 4px solid #EFEEEC; } body.index div#category-navi li { margin: 8px 0; color: #FFF; position: relative; text-align: center; display: inline-block; } body.index div#category-navi li a { box-sizing: border-box; text-decoration: none; color: #555555; display: block; position: relative; font-size: 14px; border-left: 4px solid #EFEEEC; padding: 8px 8px 8px 12px; } body.index div#category-navi li:last-child a { border-right: 4px solid #EFEEEC; } body.index div#category-navi li.guide a { border: none; } /* --------------------------------------------- 目的・シーンから探す　scene.jsp --------------------------------------------- */ body.scene #contents-main.scene h3 { margin-bottom: 20px; } body.scene .scene section { padding: 20px 20px 0; } body.scene .scene .scene_box ul { margin: 20px 0; display: flex; justify-content: center; flex-wrap: wrap; } body.scene .scene .scene_box ul li { margin: 0 4px; width: calc(100% / 4 - 8px); } body.scene .scene .scene_box ul li .imgbnr { border: 1px solid #ccc; } body.scene .scene .scene_box ul li .txt p:before { font-family: "font Awesome 5 Free"; font-weight: bold; content: ""; margin: 0 4px 0 0; color: #ea5e00; font-size: 18px; } body.scene .scene .news_box ul { margin: 20px 0; display: flex; justify-content: center; flex-wrap: wrap; } body.scene .scene .news_box ul li { width: calc(100% / 4 - 8px); margin: 0 4px; box-sizing: border-box; position: relative; } body.scene .scene .news_box ul li i { display: block; font-size: 32px; margin-bottom: 4px; } body.scene .scene .news_box ul li a { padding: 20px 0; box-sizing: border-box; display: block; text-align: center; border-radius: 8px; border: 1px solid #ccc; } body.scene .scene .news_box ul li .num { display: block; text-align: center; border-radius: 50%; color: #63b3aa; font-size: 16px; font-family: "Quicksand", sans-serif; letter-spacing: 0.05em; font-weight: bold; line-height: 1em; padding-top: 4px; } body.scene .scene .favorite_box .item { width: 20%; height: 240px; padding: 16px; margin: 10px 0 0; float: left; box-sizing: border-box; border-left: 4px solid #EFEEEC; position: relative; overflow: hidden; } body.scene.pc .scene .favorite_box .item:nth-of-type(5n) { border-right: 4px solid #EFEEEC; } body.scene .scene .favorite_box .item .ranking_box { width: 100%; height: 100%; overflow: hidden; } body.scene .scene .favorite_box .item .rank { position: absolute; background: #8E6B4F; display: block; color: #fff; text-align: center; font-family: "Quicksand", sans-serif; font-weight: bold; z-index: 10; top: 14px; left: -40px; padding: 4px 60px 4px; box-sizing: border-box; line-height: 1em; transform: rotate(-45deg); font-size: 16px; } body.scene .scene .favorite_box .item:nth-of-type(1) .rank { background: #B29C60; } body.scene .scene .favorite_box .item:nth-of-type(2) .rank { background: #919191; } body.scene .scene .favorite_box .item .image { height: 140px; position: relative; } body.scene .scene .favorite_box .item .image .img_bg_css.no_img_logo { background-size: 70px auto; } body.scene .scene .favorite_box .item .goods_like { float: left; padding-top: 14px; margin: 0 8px 0 0; width: 40px; height: 60px; box-sizing: border-box; display: block; color: #63b3aa; background: #ffe4e4; font-family: "Quicksand", sans-serif; text-align: center; font-size: 14px; line-height: 1.4em; } body.scene .scene .favorite_box .item .goods_like i { display: block; } body.scene .scene .favorite_box .item .image.img_objfit img { border-radius: 8px; } body.scene .scene .favorite_box .item .desc { margin-top: 10px; } body.scene .scene .favorite_box .item .title { display: block; margin: 0 0 2px 0; font-weight: bold; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } body.scene .scene .favorite_box .item .name.subtitle, body.scene .scene .favorite_box .item .floor { line-height: 16px; font-size: 12px; } /* --------------------------------------------- index.jsp クーポン、求人、サービス一覧ページ --------------------------------------------- */ body.index div#coupon, body.index div#recruit, body.index div#service { padding: 0 0; } body.index div#coupon h2, body.index div#recruit h2, body.index div#service h2 { margin-left: -16px; margin-right: -16px; } body.index div#coupon div.title, body.index div#recruit div.title, body.index div#service div.title { margin: 0 0 16px; overflow: hidden; } body.index div#coupon div.title h3 a, body.index div#recruit div.title h3 a, body.index div#service div.title h3 a { color: #fff; text-decoration: none; } body.index div#searchcat div.title p, body.index div#searchon div.title p, body.index div#coupon div.title p, body.index div#recruit div.title p, body.index div#service div.title p { float: right; text-align: right; font-size: 10px; } body.index div#coupon div.item, body.index div#recruit table.table01, body.index div#service table.table01 { margin: 16px 0; } /* --------------------------------------------- ショップサービス bf=4 --------------------------------------------- */ body.index.bf4 .ServiceItemList { margin: 20px 0; } body.index.bf4 div#service table.table01 { margin: 0 auto 40px; width: 100%; } body.index.bf4 div#service table.table01 td { padding: 8px; } body.index.bf4 div#service table.table01 .name { width: 30%; padding: 20px; } body.index.bf4 div#service table.table01 .name a { font-weight: bold; text-decoration: underline; font-size: 16px; } body.index.bf4 div#service table.table01 .name .floor { font-size: 12px; } body.index.bf4 div#service table.table01 .logo { width: 116px; text-align: center; } body.index.bf4 div#service table.table01 .logo .img_bg_css.no_img_logo { border: none; } body.index.bf4 div#service table.table01 .service { background: #ffe4e4; } body.index.bf4 div#service table.table01 .service p { white-space: pre-wrap; padding: 0 16px; } /* --------------------------------------------- クーポン　bf=3 --------------------------------------------- */ body.index.bf3 .cat_items { overflow: hidden; padding: 0 20px; } body.index.bf3 .cat_items article { overflow: hidden; position: relative; border-bottom: 1px solid #ccc; padding: 10px 10px 30px; } body.index.bf3 .cat_items article .morelink { bottom: 0px; } body.index.bf3 .cat_items article .shopname { display: block; padding: 5px 0 0; } body.index.bf3 .cat_items article .shopname a { color: #63b3aa; } body.index.bf3 .goods_like_btn.mini { bottom: auto; left: auto; position: static; } /* --------------------------------------------- 求人情報　bf=5 --------------------------------------------- */ body.index.bf5 .RecruitItemList { margin: 20px 0; } /*body.index.bf5 #contents-main{ padding-top: 0; }*/ body.index.bf5 #contents-main .merit_box h3{ background: url("../pr/kjt-recruit/img/bnr_recruit.jpg"); background-size: cover; width: 100%; font-size: 0; padding: 0; box-sizing: border-box; } body.index.bf5 #contents-main .merit_box h3::before{ content: ''; display: block; padding-top: 33%; } body.index.bf5 .merit_box .link_btn{ background: #ffe5dc; padding: 15px; } body.index.bf5 .merit_box .link_btn a{ display: block; width: 50%; margin: 0 auto; background: #ea5e00; border-radius: 50px; padding: 10px; text-align: center; color:#FFF; font-weight: bold; position: relative; box-sizing: border-box; } body.index.bf5 .merit_box .link_btn a::after{ content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: bold; position: absolute; right: 10px; } body.index.bf5 .cat3_view article .shopname { display: block; padding: 8px 0 0; } body.index.bf5 .cat3_view article .shopname a { font-size: 16px; text-decoration: underline; font-weight: bold; } body.index.bf5 .cat3_view article .shopname span { display: inline-block; font-size: 12px; margin-left: 8px; font-weight: normal; } /* --------------------------------------------- 店長ボイス用　voice.jsp voice --------------------------------------------- */ body.voice .VoiceItemList { margin: 20px; } body.voice .VoiceItemList article { overflow: hidden; margin: 0 10px 10px; padding: 10px 0; box-sizing: border-box; width: 47%; display: inline-block; width: calc(50% - 24px); vertical-align: bottom;} body.voice .VoiceItemList article .detail { padding: 20px 25px; box-sizing: border-box; position: relative; background: #FFE5DC; border-radius: 8px; } body.voice .VoiceItemList article .detail::after { content: ""; display: block; position: absolute; bottom: -6px; left: 40px; width: 13px; height: 13px; background: #FFE5DC; -webkit-transform: rotate(45deg); transform: rotate(45deg); } body.voice .VoiceItemList article .detail .goodsname { font-weight: bold; } body.voice .VoiceItemList article .detail .sendtime { position: absolute; background: #63b3aa; color: #fff; display: block; top: -10px; padding: 0px 8px; font-size: 12px; font-weight: bold; border-radius: 40px; left: 10px; } body.voice .VoiceItemList article .shopname { display: block; float: left; width: 280px; padding: 20px 20px 0; box-sizing: border-box; } body.voice .VoiceItemList article .shopname span { display: block; font-size: 12px; } body.voice .VoiceItemList article .shopname a { font-weight: bold; text-decoration: underline; font-size: 16px; } body.voice .VoiceItemList article .logoimg { vertical-align: middle; float: right; width: 120px; box-sizing: border-box; padding: 20px 20px 0; } body.voice .VoiceItemList article .logoimg img { width: 100px; max-width: auto; max-height: 100px; } .voice-list-title { display: inline-block; width: 7em; background: #ea5e00; color: #fff; font-family: "Quicksand"; border-radius: 100px; font-weight: bold; border: 2px solid #ea5e00; position: relative; padding: .1em; transition-duration: .4s; font-size: 16px; } .voice-list-title::after { content: "\f054"; font-family: "Font Awesome 5 Free"; color: #fff; position: absolute; font-size: 75%; right: .8em; transition-duration: .4s; } .voice-list-title:hover::after { right: .4em; } /* --------------------------------------------- イベントニュース --------------------------------------------- */ #event_lists { border-top: 4px solid #EFEEEC; } #event_lists .events { padding: 20px; overflow: hidden; position: relative; border-bottom: 4px solid #EFEEEC; margin: 10px 0 0; } #event_lists .events .c1 { float: right; margin-left: 24px; } #event_lists .events .c1 p.image { overflow: hidden; max-height: 280px; -moz-border-radius: 8px; border-radius: 8px; } #event_lists .events .c1 p.image img { width: 240px; } #event_lists h4 { margin: 16px 0 16px 0; font-weight: bold; overflow: hidden; font-size: 1.2em; } #event_lists h4 a { text-decoration: underline; } #event_lists article .morelink { bottom: 0; display: none;} #event_lists .table01 { width: calc(100% - 280px); margin: 20px 0 0 0; border-collapse: collapse; border-spacing: 0; } .event-cat-title { clear: both; margin: 16px 0; } .event-cat-title .cat_title { padding: 12px 16px; font-weight: bold; font-size: 16px; background: #EFEEEC; text-align: center; } #ev-navi { text-align: center; margin: 10px 0; } .ev-navi_bottom { text-align: center; padding: 24px; } .ev-navi_bottom .ev-navi-cal, #ev-navi .ev-navi-cal { margin-left: 16px; display: inline-block; vertical-align: top; } .ev-navi_bottom .ev-navi-cal i { font-size: 18px; margin-right: 10px; } .ev-navi_bottom .ev_all_link { display: inline-block; vertical-align: top; } .ev-navi-article { width: 192px; display: inline-block; text-align: left; } .ev-navi-article dl { position: relative; } .ev-navi-article dl dt { border-radius: 8px; line-height: 40px; height: 40px; padding-left: 30px; border: 3px solid #EFEEEC; cursor: pointer; position: relative; } .ev-navi-article dl dt:before { content: ""; display: inline-block; width: 1px; border-left: 1px solid #ddd; height: 24px; position: absolute; right: 40px; top: 8px; } .ev-navi-article dl dt:after { font-family: "font Awesome 5 Free"; content: ""; font-weight: 900; font-size: 20px; color: #ea5e00; position: absolute; right: 0px; top: 0px; width: 40px; text-align: center; } .ev-navi-article dl dt.up:after { content: "\f0de"; top: 4px; } .ev-navi-article dl dd { border: 3px solid #EFEEEC; position: absolute; left: 0; top: 50px; z-index: 11; background: #fff; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); } .ev-navi-article dl dd:before { content: ""; display: block; position: absolute; top: -16px; width: 0; height: 0; border: 8px solid transparent; left: calc(50% - 8px); border-bottom: 8px solid #EFEEEC; } .ev-navi-article dl dd li { border-bottom: 1px solid #ddd; min-width: 190px; } .ev-navi-article dl dd li a { display: block; padding: 12px; position: relative; } .ev-navi-article dl dd li a::after { font-family: "font Awesome 5 Free"; content: "\f054"; font-weight: 900; font-size: 18px; display: inline-block; color: #ea5e00; position: absolute; right: 12px; top: 21%; } .ev-navi-article dl dd li:last-child { border-bottom: none; } .ev-navi_bottom .ev-navi-cal a, #ev-navi .ev-navi-cal a, .ev-navi_bottom .ev_all_link a { display: inline-block; padding: 8px 24px; font-size: 14px; border-radius: 8px; background: #EFEEEC; } .ev-navi_bottom .ev-navi-cal a:after { font-family: "font Awesome 5 Free"; margin: 0 0 0 10px; font-size: 18px; display: inline-block; content: "\f054"; font-weight: bold; color: #ea5e00; } #ev-navi .ev-navi-cal a { font-size: 18px; } #ev-navi .ev-navi-cal a .fa { margin-right: 6px; } #ev-navi .ev-navi-cal a:after { font-family: "font Awesome 5 Free"; margin: 0 0 0 10px; font-size: 14px; display: inline-block; content: "\f054"; font-weight: bold; color: #ea5e00; } .ev-navi_bottom .ev_all_link a:before { font-family: "font Awesome 5 Free"; content: "\f053"; font-weight: 900; display: inline; padding-right: 8px; font-size: 14px; color: #ea5e00; } .ev-navi_bottom .ev-navi-cal a .fa, .ev-navi_bottom #ev-navi .ev-navi-cal a .fa, .ev-navi_bottom .ev_all_link a .fa { margin-right: 12px; font-size: 18px; } .events .e_category { font-size: 12px; display: inline-block; background: #63b3aa; padding: 1px 16px; border-radius: 16px; color: #FFF; } .events .e_category:before { font-family: "font Awesome 5 Free"; font-weight: bold; margin: 0 4px 0 0; content: "\f02b"; } body.view.eventnews #more-btn { text-align: center; margin: 0px 16px 16px; } body.eventnews #more-btn span { display: block; background: #eaeaea; padding: 10px 20px; cursor: pointer; border-radius: 0 0 20px 20px /0 0 20px 20px; } /* --------------------------------------------- イベントニュース　item_eventnews.jsp --------------------------------------------- */ body.item_eventnews .item { overflow: hidden; border-bottom: 4px solid #EFEEEC; } body.item_eventnews #contents-main .item .e_category{ border-radius: 8px 8px 0 0; } body.item_eventnews #contents-main .item .title h3 { font-size: 18px; margin: 0 0 10px; text-align: left; } body.item_eventnews #contents-main .item .subtitle h4 { padding: 0 16px 10px; border-bottom: 1px solid #ddd; line-height: 1.4em; } body.item_eventnews #contents-main .item .images { margin: 24px 0; } body.item_eventnews #contents-main .item .images .image { margin: 0 0 16px 0; text-align: center; } body.item_eventnews #contents-main .item .images .image img { border-radius: 8px; max-width: 560px; max-height: 420px; } body.item_eventnews #contents-main .item .images .image .caption_in { display: block; width: 100%; padding: 5px; } body.item_eventnews #contents-main .item.noimg .images .desc { float: none; width: 100%; } body.item_eventnews #contents-main .item .images .subimg { text-align: center; margin: 10px auto 20px; } body.item_eventnews #contents-main .item .images .subimg li { width: 130px; height: 130px; display: inline-block; background: #EFEEEC; box-sizing: border-box; text-align: center; margin: 0 5px; } body.item_eventnews #contents-main .item .images .subimg li span { display: table-cell; width: 130px; height: 130px; box-sizing: border-box; line-height: 130px; margin: 0 auto; vertical-align: middle; } body.item_eventnews #contents-main .item .images .subimg li img { max-width: 100%; max-height: 100%; cursor: pointer; vertical-align: middle; display: block; margin: 0 auto; text-align: center; } body.item_eventnews #contents-main .item .desc { overflow: hidden; } body.item_eventnews #contents-main .item .desc .ev_content { margin-bottom: 20px; word-break: break-word; } body.item_eventnews #contents-main .item .social { border-top: 4px solid #EFEEEC; margin-top: 40px; } body.item_eventnews #contents-main .item .desc .section { margin: 20px 0; } body.item_eventnews #contents-main .item .desc .remarks { padding: 16px; } body.item_eventnews #contents-main .item .desc .remarks dt { margin-bottom: 4px; font-weight: bold; } body.item_eventnews #contents-main .item .desc .remarks dd { font-size: 12px; line-height: 18px; } body.item_eventnews #contents-main .item .desc .link { text-align: center; margin: 30px 0; } body.item_eventnews #contents-main .item .desc .link a { text-align: center; text-decoration: none; background: #ea5e00; color: #ffffff; padding: 20px; border-radius: 8px; position: relative; font-weight: 700; font-size: 16px; min-width: 40%; display: inline-block; } body.item_eventnews #contents-main .item .desc .link a:after { font-family: "font Awesome 5 Free"; margin: 0 0 0 10px; font-size: 18px; display: inline-block; content: "\f054"; font-weight: bold; vertical-align: middle; } body.item_eventnews #contents-main .item .desc table.table01 th i { font-size: 20px; } /*tag list*/ body.item_eventnews #contents-main .event_tags { margin: 40px 0 0; text-align: center; border: 3px solid #EFEEEC; } #contents-main .event_tags .event_tags-title { border: none; } #contents-main .event_tags .event_tags-title em { font-family: "Quicksand", sans-serif; font-weight: bold; font-size: 22px; letter-spacing: .05em; } #contents-main .event_tags .event_tags-title::before { content: "#"; font-family: "Quicksand", sans-serif; color: #ff4949; font-size: 22px; margin: 0px 5px 0 0; vertical-align: middle; } #contents-main .event_tags .event_tags-title::before { content: "#"; font-family: "Quicksand", sans-serif; color: #ff4949; font-size: 22px; margin: 0px 5px 0 0; vertical-align: middle; } #contents-main .event_tags p { padding: 0 0 10px; margin: -5px 0 0; font-size: 14px; } body.item_eventnews #contents-main .event_tags .tag_list { padding-bottom: 8px; } body.item_eventnews #contents-main #event_list { margin-top: 24px; overflow: hidden; } body.item_eventnews #contents-main #event_list .p_title { padding: 0 8px 0 20px; position: relative; } body.item_eventnews #contents-main #event_list .p_title h4 { font-family: "Quicksand", sans-serif; font-weight: bold; text-align: center; font-size: 22px; letter-spacing: 0.05em; padding: 20px 0px 12px; color:#ea5e00;} body.item_eventnews #contents-main #event_list { display: flex; height: 120px; padding: 25px 0; border: 4px solid #EFEEEC; } body.item_eventnews #contents-main #event_list .events { width: 26.6666666667%; padding: 0 18px; border-right: 4px solid #EFEEEC; box-sizing: border-box; } body.item_eventnews #contents-main #event_list .events:last-of-type { border: none; } body.item_eventnews #contents-main #event_list .events strong { font-size: 14px; } body.item_eventnews #contents-main #event_list .events .term { line-height: 18px; font-size: 12px; margin-top: 2px; word-break: break-all; } body.item_eventnews #contents-main #event_list .events .term::before { font-family: "font Awesome 5 Free"; margin: 0 6px 0 0; font-size: 1em; content: "\f274"; vertical-align: middle; color:#63b3aa;} body.item_eventnews #contents-main #event_list .events .subtitle { font-size: 12px; white-space: nowrap; text-overflow: ellipsis; display: block; overflow: hidden; padding: 0 0 3px 0px; display: none; } body.item_eventnews #contents-main #event_list .events a { width: 100%; display: block; } body.item_eventnews #contents-main #event_list .events .e_category { margin-bottom: 4px; } body.item_eventnews #contents-main #event_list .events h4 { font-weight: bold; line-height: 18px; margin-bottom: 4px; } body.item_eventnews #contents-main #event_list .btn-more::before { font-family: "font Awesome 5 Free"; margin: 0 10px 0 0; font-size: 14px; display: inline-block; content: "\f054"; vertical-align: middle; } /* --------------------------------------------- 施設案内（TOP）facility --------------------------------------------- */ body.facility #contents-main > section{ padding: 8px 16px 24px; } .facility_content h2 { text-align: left; } .facility_content h3{ margin: 0 auto 24px; } .facility_content h4{ border: 1px solid #333; padding: 8px; font-weight: bold; text-align: center; margin: 0 auto 24px; } .facility_content h5{ color:#ea5e00; font-size: 16px; font-weight: bold; margin: 16px 0 16px; } .facility_content h5.north{ color:#63b3aa; } .facility_content section{ margin: 0 auto 32px; } .facility_content section p, .facility_content section li{ text-align: justify; text-justify: inter-ideograph; -ms-text-justify: inter-ideograph; } .facility_content section p.image{ text-align: center; margin: 24px auto; width: 70%; } .facility_content section p.image img{ width: 100%; vertical-align: bottom; } .facility_content section ul,.facility_content section ol{ margin: 0 16px 16px; padding-left: 24px; } .facility_content section ul li{ list-style: dotted none outside; margin: 0 auto 8px; } .facility_content section ol li{ list-style: decimal none outside; margin: 0 auto 8px; } .facility_content .facility_content section table{ width: 95%; margin: 0 auto; } .facility_content section .border-box{ border: 1px solid #ccc; padding: 16px; box-sizing: border-box; width: 95%; margin: 0 auto; } .facility_content section .border-box p{ margin: 0; text-align: center; } .facility_content section .border-box p strong{ display: block; font-size: 16px; font-weight: bold; color:#ea5e00; margin-bottom: 8px; } .facility_content p.link_btn{ width: 50%; margin: 24px auto; } .facility_content p.link_btn a{ background: #FFE5DC; padding: 8px 16px; display: block; border-radius: 100px; text-align: center; color:#ea5e00; position: relative; } .facility_content p.link_btn a::after{ font-family: "font Awesome 5 Free"; content: "\f054"; font-weight: 900; display: inline; padding-right: 4px; font-size: 14px; color: #ea5e00; position: absolute; right: 8px; top: calc(50% - 10px); } .facility_content ul.linkbox{ padding: 20px; text-align: center; } .facility_content ul.linkbox li{ display: inline-block; margin: 0 4px 16px; width: calc(100% / 3 - 12px); } .facility_content ul.linkbox.col2 li{ width:calc(100% / 2 - 12px); } .facility_content ul.linkbox li.col2{ width: calc(100% / 3 / calc(1/2) - 10px); } .facility_content ul.linkbox.col2 li.col2{ width:calc(100% - 14px); } .facility_content ul.linkbox li a{ background: #FFE5DC; padding: 8px 16px; display: block; border-radius: 100px; text-align: center; color:#ea5e00; position: relative; } .facility_content ul.linkbox li a:after{ font-family: "font Awesome 5 Free"; content: "\f054"; font-weight: 900; display: inline; padding-right: 4px; font-size: 14px; color: #ea5e00; position: absolute; right: 8px; top: calc(50% - 10px); } .facility_content .table02 { border-collapse: collapse; width: 100%; word-break: break-all; margin: 24px auto; border-collapse: collapse; border-top: 3px solid #eee; border-bottom: 3px solid #eee; } .facility_content .table02 tr{ border-bottom: 1px solid #ddd; } .facility_content .table02 th { background: #EFEEEC; text-align: center; font-weight: bold; padding: 12px 8px; width: 15%;} .facility_content .table02 td { padding: 12px 8px;} .facility_content .table02 td:first-of-type {width: 20%; text-align: center;} .facility_content .table02 td:last-of-type {border-left: 2px solid #EFEEEC; width: auto;text-align: left;padding: 12px 28px;} .facility_content .table02 td a{ color: #ea5e00;background: #ffe5dc;padding: 3px 26px 3px 15px;border-radius: 50px; position: relative;} .facility_content .table02 td a.north{ color: #63b3aa;background: #d8ebe9;} .facility_content .table02 td a.shoplink{ background: none; padding: 0; text-decoration: underline;} .facility_content .table02 td a::after{ font-family: "font Awesome 5 Free"; content: "\f054"; font-weight: 900; display: inline; padding-right: 4px; font-size: 14px; color: #ea5e00; position: absolute; right: 8px; top: calc(50% - 10px); } .facility_content .table02 td a.north::after{color: #63b3aa;} .facility_content .table02 td a.shoplink::after{ display: none;} .facility_content .navibox{ margin: 0 auto 24px; width: 90%; } .facility_content .navibox ul{ } .facility_content .navibox ul li{ display: inline-block; width: calc(100%/3 - 13px); text-align: center; margin: 0 5px 10px; } .facility_content .navibox.col2 ul li{ width: calc(100%/2 - 13px); } .facility_content .navibox ul li a{ display: block; padding: 10px; border: 4px solid #efeeec; border-radius: 8px; position: relative; } .facility_content .navibox ul li a::after{ font-family: "font Awesome 5 Free"; content: "\f078"; font-weight: 900; display: inline; padding-right: 4px; font-size: 14px; color: #ea5e00; position: absolute; right: 8px; top: calc(50% - 10px); } /* --------------------------------------------- access --------------------------------------------- */ body.access #contents-main section { padding: 8px 16px 24px; } body.access #contents-main section h3 { margin: 0 0 16px; } body.access #contents-main #sc_map { border: 1px solid #ccc; box-sizing: border-box; height: 340px; width: 100%; } body.access #contents-main .sc_map_link { margin: 0 0 24px; text-align: right; padding: 4px; } body.access #contents-main .sc_map_link a { text-decoration: underline; } body.access #contents-main .sc_map_link a span { font-size: 0.9em; } body.access #contents-main .sc_map_link .fa { margin-right: 5px; } body.access #contents-main .section{ margin: 0 auto 24px; } body.access #contents-main table.table01 th { border-left: none; width: 30%; } body.access #contents-main table.table01 td { border-right: none; white-space: pre-wrap; } body.access #contents-main h3{ margin: 0 auto 24px; } body.access #contents-main h4{ border: 1px solid #333; padding: 8px; font-weight: bold; text-align: center; margin: 0 auto 24px; } body.access #contents-main h5{ color:#ea5e00; font-size: 16px; font-weight: bold; margin: 16px 0 16px; } body.access #contents-main h5.north{ color:#63b3aa; } body.access #contents-main section{ margin: 0 auto 32px; } body.access #contents-main section p, body.access #contents-main section li{ text-align: justify; text-justify: inter-ideograph; -ms-text-justify: inter-ideograph; } body.access #contents-main section a{ color:#ea5e00; } body.access #contents-main section p.image{ text-align: center; margin: 24px auto; width: 70%; } body.access #contents-main section p.image.w50{ width: 50%; } body.access #contents-main section p.image img{ width: 100%; vertical-align: bottom; } body.access #contents-main section .navibox{ margin: 0 auto 24px; width: 90%; } body.access #contents-main section .navibox ul{ text-align: center; } body.access #contents-main section .navibox ul li{ display: inline-block; width: calc(100%/3 - 13px); text-align: center; margin: 0 5px 10px; } body.access #contents-main section .navibox ul li a{ display: block; padding: 10px; border: 4px solid #efeeec; border-radius: 8px; position: relative; } body.access #contents-main section .navibox ul li a::after{ font-family: "font Awesome 5 Free"; content: "\f078"; font-weight: 900; display: inline; padding-right: 4px; font-size: 14px; color: #ea5e00; position: absolute; right: 8px; top: calc(50% - 10px); } body.access #contents-main section table i{color:#63b3aa; margin: 0 5px 0 2px;} body.access #contents-main .tsu02{color: #3366ff;} body.access #contents-main .tsu03{color: #ff3366;} body.access #contents-main .tsu07{color: #ff3333;} body.access #contents-main .tsu23{color: #ff8000;} body.access #contents-main .yo104{color: #339900;} body.access #contents-main .ni93{ color: #6666cc;} body.access #contents-main p.link_btn{ width: 50%; margin: 24px auto; } body.access #contents-main p.link_btn a{ background: #FFE5DC; padding: 8px 16px; display: block; border-radius: 100px; text-align: center; color:#ea5e00; position: relative; } body.access #contents-main p.link_btn a::after{ font-family: "font Awesome 5 Free"; content: "\f054"; font-weight: 900; display: inline; padding-right: 4px; font-size: 14px; color: #ea5e00; position: absolute; right: 8px; top: calc(50% - 10px); } body.access #contents-main ul.linkbox{ padding: 0 20px 15px; text-align: center; } body.access #contents-main ul.linkbox li{ display: inline-block; margin: 0 4px 16px; width: calc(100% / 3 - 12px); } body.access #contents-main ul.linkbox li.col2{ width: calc(100% / 3 / calc(1/2) - 10px); } body.access #contents-main ul.linkbox li a{ background: #FFE5DC; padding: 8px 16px; display: block; border-radius: 100px; text-align: center; color:#ea5e00; position: relative; } body.access #contents-main ul.linkbox li a:after{ font-family: "font Awesome 5 Free"; content: "\f054"; font-weight: 900; display: inline; padding-right: 4px; font-size: 14px; color: #ea5e00; position: absolute; right: 8px; top: calc(50% - 10px); } /* --------------------------------------------- goods_like_button　個別ページ --------------------------------------------- */ .goods_like_btn { background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; } .goods_like_btn p { display: inline-block; background: #ffe5dc; border-radius: 50%; padding: 10px; text-align: center; width: 50px; height: 50px; font-family: "Quicksand", sans-serif; } .goods_like_btn p i, .goods_like_btn p span { display: block; font-size: 1.5em; } .goods_like_btn p span { font-weight: bold; } .goods_like_btn p i { display: block; font-size: 1.5em; color: #ea5e00; } /**goods_like_button　リスト部*/ .goods_like_btn.mini { position: absolute; bottom: 0px; left: 20px; } .goods_like_btn.mini p { display: inline-block; background: none; border-radius: none; padding: 0px; text-align: center; width: auto; height: auto; border: 1px solid #ea5e00; border-radius: 100px; padding: 4px 16px; } .goods_like_btn.mini p i { display: inline-block; font-size: 1.2em; /* margin-right: 5px; */ vertical-align: middle; } .goods_like_btn.mini p span { display: inline-block; font-size: 1em; letter-spacing: 1px; line-height: 1em; color: #ea5e00; /* padding: 0px 10px 2px; */ /* position: relative; */ font-family: "Quicksand", sans-serif; vertical-align: middle; } /*---------------------- Shop Guide　関連の共通メニュー ----------------------*/ .shop_guide_menu ul { height: 70px; margin: 0 0 20px; } .shop_guide_menu ul li { float: left; width: calc(100% / 2); box-sizing: border-box; padding: 0; height: 70px; vertical-align: bottom; border-right: 4px solid #fff; } .shop_guide_menu ul li a { display: inline-block; text-align: center; background: #EFEEEC; width: 100%; height: 70px; line-height: 70px; position: relative; } .shop_guide_menu ul li.current a { position: relative; background: #ea5e00; border-bottom: none; margin-top: 0; line-height: 70px; height: 70px; font-weight: bold; font-size: 18px; color: #fff; } .shop_guide_menu ul li.current a:after { content: ""; display: block; position: absolute; bottom: -23px; width: 0; height: 0; border: 12px solid transparent; left: 36%; left: calc(50% - 12px); border-top: 12px solid #ea5e00; } /* --------------------------------------------- フロアガイド(floor.jsp用) --------------------------------------------- */ /*全体マップ用*/ .fmap_whole { width: 960px; margin: 0 auto; overflow: visible; } .fmap_floor { /*display: flex; flex-wrap: wrap;*/ clear: both; position: relative; } .fmap_floor_s { width: 430px; float: left; border: 2px solid #ea5e00; border-width: 0 2px 3px 2px; position: relative; box-sizing: border-box; } .fmap_floor_n { width: 420px; float:right; border: 2px solid #63b3aa; border-width: 0 2px 3px 2px; position: relative; box-sizing: border-box; } .fmap_pass { width: 110px; float: left; text-align: center; position: absolute; left: 430px; top: 38px; background: #efeeec; font-size: 12px; line-height: 1.3; padding: 20px 0px; } .fmap_floor_s a, .fmap_floor_n a, .fmap_floor_both a { display: table; padding: 0; width: 100%; height: 100%; box-sizing: border-box; table-layout: fixed; position: relative; z-index: 2; } .fmap_floor_s a::after, .fmap_floor_n a::after, .fmap_floor_both a::after{ content: "\f054"; position: absolute; display: inline; font-family: "Font Awesome 5 free"; font-weight: bold; right: 10px; top: calc(50% - 1em); margin: auto; } .fmap_num, .fmap_name{ padding: 0 15px; font-weight: bold; box-sizing: border-box; } .fmap_num{ box-sizing: border-box; text-align: center; font-size: 24px; position: absolute; top: 45%; left: -60px; } .fmap_floor_n .fmap_num{ left: auto; right: -60px; } .fmap_num em{ font-weight: bold; } .fmap_name{ display: table-cell; vertical-align: top; font-size: 14px; line-height: 1.4; width: calc(100%); text-align: center; padding: 20px; } .fmap_floor_s._key .fmap_name, .fmap_floor_n._key .fmap_name{ padding: 20px 40px 80px; position: relative; } ._1f .fmap_floor_n._key .fmap_name{ padding: 20px 40px 99px;} ._3f .fmap_floor_n._key .fmap_name{ padding: 30px 40px 90px;} .fmap_floor_s._key .fmap_name::before, .fmap_floor_n._key .fmap_name::before{ content:""; width: 370px; height: 55px; position: absolute; bottom: 10px; left:20px; background: #efeeec; border-top: 2px solid #ffe5dc; } .fmap_floor_n._key .fmap_name::before{ width: 360px; border-top: 2px solid #d8ebe9; } .fmap_floor._1f .fmap_floor_s._key .fmap_name::before{ background: url(../../shop/caimage/photologo?id=21010&m=80&r=100),url(../../shop/caimage/photologo?id=21571&m=80&r=100); background-repeat: no-repeat,no-repeat,no-repeat; background-position: 35% 75%,75% 75%; } .fmap_floor._2f .fmap_floor_s._key .fmap_name::before{ background: url(../../shop/caimage/photologo?id=22010&m=80&r=100),url(../../shop/caimage/photologo?id=22300&m=80&r=100),url(../../shop/caimage/photologo?id=22672&m=80&r=100); background-repeat: no-repeat,no-repeat,no-repeat; background-position: 17% 75%, 52% 75%, 88% 75%; } .fmap_floor._3f .fmap_floor_s._key .fmap_name::before{ background: url(../../shop/caimage/photologo?id=23020&m=80&r=100),url(../../shop/caimage/photologo?id=23271&inc=1&m=80&r=100),url(../../shop/caimage/photologo?id=23062&inc=1&m=80&r=100),url(../../shop/caimage/photologo?id=23041&m=80&r=100),url(../../shop/caimage/photologo?id=23280&m=80&r=100); background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat; background-size: 60px; background-position: 0% 75%, 25% 75%, 50% 75%,75% 75%,100% 75%; } .fmap_floor._1f .fmap_floor_n._key .fmap_name::before{ background: none; } .fmap_floor._2f .fmap_floor_n._key .fmap_name::before{ background: url(../../shop/caimage/photologo?id=12162&inc=1&m=80&r=100),url(../../shop/caimage/photologo?id=12090&m=80&r=100); background-repeat: no-repeat,no-repeat,no-repeat; background-position: 37% 75%, 70% 75%; } .fmap_floor._3f .fmap_floor_n._key .fmap_name::before{ background: url(../../shop/caimage/photologo?id=13020&m=80&r=100),url(../../shop/caimage/photologo?id=13052&m=80&r=100),url(../../shop/caimage/photologo?id=13019&m=80&r=100),url(../../shop/caimage/photologo?id=13018&m=80&r=100); background-repeat: no-repeat,no-repeat,no-repeat,no-repeat; background-position: 9% 75%, 45% 75%, 76% 75%, 101% 75%; } .fmap_floor._4f .fmap_floor_n._key .fmap_name::before, .fmap_floor._5f .fmap_floor_n._key .fmap_name::before, .fmap_floor._6f .fmap_floor_n._key .fmap_name::before, .fmap_floor._7f .fmap_floor_n._key .fmap_name::before{ background: url(../../shop/caimage/photologo?id=14010&m=80&r=100); background-repeat: no-repeat; background-position: center bottom; background-size: contain; } .fmap_floor._4f .fmap_floor_s, .fmap_floor._5f .fmap_floor_s, .fmap_floor._4f .fmap_floor_n, .fmap_floor._5f .fmap_floor_n, .fmap_floor._6f .fmap_floor_n, .fmap_floor._7f .fmap_floor_n{ border: 0; } .fmap_floor._3f .fmap_floor_s._key .fmap_name{ padding: 20px 20px 80px 120px; } .fmap_floor._4f .fmap_floor_s, .fmap_floor._5f .fmap_floor_s{ height: 83px; } .fmap_floor._4f .fmap_floor_s{ border-bottom: 2px solid #ea5e00; } .fmap_floor._4f .fmap_floor_n .fmap_name, .fmap_floor._5f .fmap_floor_n .fmap_name, .fmap_floor._6f .fmap_floor_n .fmap_name, .fmap_floor._7f .fmap_floor_n .fmap_name{ width: 160px; float: right; padding: 12px 30px 50px 20px; border:2px solid #ff9900; border-width: 0px 2px 2px 2px; } .fmap_floor._7f .fmap_floor_n .fmap_name{ border-width: 2px; } .fmap_floor._4f .fmap_floor_n .fmap_name::before, .fmap_floor._5f .fmap_floor_n .fmap_name::before, .fmap_floor._6f .fmap_floor_n .fmap_name::before, .fmap_floor._7f .fmap_floor_n .fmap_name::before{ width: 110px; height: 30px; } .fmap_parking{ width: 100px; position: absolute; text-align: center; line-height: 1.3; font-size: 12px; font-weight: bold; padding: 5px; box-sizing: border-box; z-index: 0; } .fmap_parking.orv{background: #d3ebe3; color:#49ae8f; border:2px solid #49ae8f;} .fmap_parking.sru{background: #fcfbbe; color:#e9bd0b; border:2px solid #e9bd0b;} .fmap_parking.right, .fmap_parking.left{background: #ffddf1; color:#ff6666; border:2px solid #ff6666;} .fmap_floor._3f .fmap_floor_s .fmap_parking{ width: 120px; left: -2px; top: -2px; padding: 29px 0; z-index: 1; } .fmap_floor._4f .fmap_floor_s .fmap_parking.orv, .fmap_floor._5f .fmap_floor_s .fmap_parking.orv{ width: calc(100%/2 - 30px); bottom: -2px; left: 0; padding: 33px 0; } .fmap_floor._4f .fmap_floor_s .fmap_parking.sru, .fmap_floor._5f .fmap_floor_s .fmap_parking.sru{ width: calc(100%/2 - 30px); bottom: -2px; right: 0; padding: 33px 0; } .fmap_floor._4f .fmap_floor_n .fmap_parking.right, .fmap_floor._5f .fmap_floor_n .fmap_parking.right, .fmap_floor._6f .fmap_floor_n .fmap_parking.right, .fmap_floor._7f .fmap_floor_n .fmap_parking.right{width: 134px;padding: 33px 0;bottom: 0px;right: 158px;} .fmap_floor._4f .fmap_floor_n .fmap_parking.left, .fmap_floor._5f .fmap_floor_n .fmap_parking.left, .fmap_floor._6f .fmap_floor_n .fmap_parking.left, .fmap_floor._7f .fmap_floor_n .fmap_parking.left{width: 262px;padding: 33px 0;bottom: 0px;left: 0px;} .fmap_floor._00{ } .fmap_floor._00 h3{ margin-top: 0px; } #contents-main .fmap_floor._00 .fmap_floor_s h3{background: #ffe5dc;} #contents-main .fmap_floor._00 .fmap_floor_n h3{background: #d8ebe9;} .fmap_notice{ display: inline-block; background: #D0111A; color: #fff; margin: 0 0 4px; padding: 2px 6px; } .fmap_sta{ width: 78px; position: absolute; right: calc(38px - 78px); bottom: 4px; text-align: center; padding: 0 0 4px; } .fmap_sta img{ display: block; margin: 0 auto; } body.floor h2 strong { font-weight: bold; display: inline-block; margin-left: 10px; font-size: 1.1em; } body.floor article .floor_img { padding: 24px; width: 100%; box-sizing: border-box; border-radius: 16px; } body.floor article .floor_img img { width: 100%; } body.floor article .floor_img .desc { background: #efeeec; padding: 16px; margin: 8px 0 0; text-align: left; width:70%; margin: 30px auto 0;} body.floor #contents-main article .floor_img .desc em[class^="icon"] { padding: 0.5em; display: inline-block; line-height: 1.4em; vertical-align: top; font-size: 11px; } body.floor #contents-main article .floor_img .desc em[class^="icon"]::before{ content: ""; display: inline-block; width: calc(1em + 0.5em); height: calc(1em + 0.5em); box-sizing: border-box; margin-right: 0.4em; vertical-align: top; } body.floor #contents-main article .floor_img .desc em.icon1::before{background: url("../pr/kjt-floor/icn_info.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc em.icon2::before{background: url("../pr/kjt-floor/icn_rest.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc em.icon3::before{background: url("../pr/kjt-floor/icn_rest-mlt.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc em.icon4::before{background: url("../pr/kjt-floor/icn_rest-mlt2.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc em.icon5::before{background: url("../pr/kjt-floor/icn_osm.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc em.icon6::before{background: url("../pr/kjt-floor/icn_rest-kids.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc em.icon7::before{background: url("../pr/kjt-floor/icn_aed.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc em.icon8::before{background: url("../pr/kjt-floor/icn_elv.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc em.icon9::before{background: url("../pr/kjt-floor/icn_elv-p.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc em.icon10::before{background: url("../pr/kjt-floor/icn_esc.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc em.icon11::before{background: url("../pr/kjt-floor/icn_esc-p.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc em.icon12::before{background: url("../pr/kjt-floor/icn_step.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc em.icon13::before{background: url("../pr/kjt-floor/icn_kidsroom.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc em.icon14::before{background: url("../pr/kjt-floor/icn_ciger.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc em.icon15::before{background: url("../pr/kjt-floor/icn_phone.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc em.icon16::before{background: url("../pr/kjt-floor/icn_locker.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc em.icon17::before{background: url("../pr/kjt-floor/icn_charge.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc em.icon18::before{background: url("../pr/kjt-floor/icn_atm.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc em.icon19::before{background: url("../pr/kjt-floor/icn_post.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc em.icon20::before{background: url("../pr/kjt-floor/icn_cart.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc em.icon21::before{background: url("../pr/kjt-floor/icn_point.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc em.icon22::before{background: url("../pr/kjt-floor/icn_babycar.svg") no-repeat center / contain;} body.floor #contents-main article .floor_img .desc h3 { font-weight: bold; border: none; padding: 0; } body.floor article .floor_img .desc p { padding: 5px 0; text-align: center; } body.floor article .floor_img .desc .detail { font-weight: bold; } body.floor article .floor_img .desc .caption { font-size: 0.9em; } body.floor table.table01 { margin: 16px 0; } body.floor table.table01 td.number { width: 3%; border-right: none; padding-right: 3px; } body.floor table.table01 td.name { width: 20%; border-right: none; border-left: none; font-weight: bold; padding-left: 3px; } body.floor table.table01 td.logo { width: 8%; border-left: none; } body.floor table.table01 td.category { width: 15%; font-size: 0.9em; } body.floor table.table01 td.hour { width: 15%; font-size: 0.9em; } body.floor table.table01 td.logo img { max-width: 80px; } body.floor .cl_fl_list { overflow: hidden; margin: 0 0 10px 0; } body.floor .cl_fl_list dt { float: left; padding: 5px 0; } body.floor .cl_fl_list dd .floorlist dt { float: left; margin: 0 2px; padding: 0; } body.floor .cl_fl_list dd .floorlist dt a { position: relative; padding: 5px 10px; background: #EFEEEC; border-radius: 4px; display: inline-block; text-decoration: none; font-size: 16px; min-width: 30px; text-align: center; color: #63b3aa; } body.floor .cl_fl_list dd .floorlist dt a:hover { background: #63b3aa; color: #fff; } /* --------------------------------------------- フロアガイド --------------------------------------------- */ #contents .floor article.f_section { padding: 20px; } #contents .floor article.f_section h3{ background: #ffe5dc; color:#ea5e00; } #contents .floor article#f_n1f h3, #contents .floor article#f_n2f h3, #contents .floor article#f_n3f h3, #contents .floor article#f_n4f h3{ background: #d8ebe9; color:#63b3aa; } #contents .floor article.f_section .floor_img { text-align: center; padding: 24px; } #contents .floor article.f_section .floor_img img { width: 70%; margin: 0 auto; } .floor .f_section .cat_list{ border-left: 2px solid #ddd; border-right: 2px solid #ddd; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; padding: 0 20px; display: none; } .floor .f_section .cat_list a{ transition: all 0.3s; } .floor .f_section .cat_list a:hover{ text-decoration: underline; color:#ea5e00; } /*----------店舗一覧テーブル----------*/ .floor_notice { padding: 10px 0; font-size: 10px; text-align: right; } .floor .table01 thead { display: none; } .floor .table01 td.category { position: relative; } .floor .table01 td.category::after { content: "\f054"; font-family: "font Awesome 5 Free"; display: inline-block; position: absolute; font-size: 14px; margin: auto; right: 10px; font-weight: bold; } /*構造*/ body.view .floor table.table01 th, body.view .floor table.table01 td { box-sizing: border-box; font-size: 12px; padding: 14px 10px 10px; border: none; } .floor .table01 .number { width: 5%; } .floor .table01 .name { width: 40%; font-size: 14px; position: relative; } .floor .table01 .logo { width: 116px; text-align: center; } /* .floor .table01 .logo img{width: 80px;} */ .floor .table01 .hour { width: 25%; } .floor .table01 .tel { width: 10%; } .floor .table01 .money { width: 15%; } /*ショップ番号*/ body.view .floor .table01 td.number { text-align: center; position: relative; padding: 0 0 0 10px; } .floor .table01 td.number span { text-align: center; font-size: 12px; font-weight: bold; line-height: 1em; display: block; border-radius: 50%; width: 32px; height: 32px; box-sizing: border-box; padding-top: 10px; background: #EFEEEC; } /*カテゴリ別色分け*/ body.view .floor .table01 .cat_name th { font-size: 18px; border-top: 50px solid #FFF; } .floor .table01 #catfid_1 th { background: #ffcc97; } .floor .table01 #catfid_2 th{ background: #fcee97; } .floor .table01 #catfid_3 th { background: #c6e0b3; } .floor .table01 #catfid_4 th { background: #fe8889; } .floor .table01 #catfid_5 th { background: #fdd780; } .floor .table01 #catfid_6 th{ background: #cadcf0; } .floor .table01 #catfid_7 th { background: #abd7d6; } .floor .table01 #catfid_8 th { background: #d2eda9; } .floor .table01 #catfid_9 th { background: #edd5b4; } .floor .table01 #catfid_10 th { background: #faa8a4; } .floor .table01 #catfid_11 th { background: #c8c8ea; } .floor .table01 td.number span { position: relative; vertical-align: middle; margin: 0 auto; } .floor .table01 td.name .category { font-size: 12px; font-weight: normal;} .floor .table01 td.name .shopname { font-size: 16px; line-height: 18px; } .floor .table01 td.name a { font-weight: bold; text-decoration: underline; } .floor .floor_notice img { height: 16px; width: auto; vertical-align: middle; } .floor .table01 .icn { display: block; position: absolute; top: 32%; right: 10px; } .floor .table01 .hour:before { font-family: "font Awesome 5 Free"; font-weight: normal; content: "\f017"; margin: 0 4px 0 0; font-size: 14px; } .floor .table01 .tel:before { font-family: "font Awesome 5 Free"; font-weight: bold; content: "\f095"; margin: 0 4px 0 0; font-size: 14px; } .floor .table01 .tel { position: relative; } .floor .table01 td.money { position: relative; text-align: center; } .floor .table01 td.money em { color: #ea5e00; } .floor .table01 .money:after { font-family: "font Awesome 5 Free"; content: "\f054"; font-weight: 900; font-size: 14px; display: inline-block; color: #ea5e00; position: absolute; right: 3px; top: 32%; top: calc(50% - 12px); } /*北棟1Fオートモールの表示設定*/ .floor .table01 .automall{ display: none; } .floor #f_n1f .table01 .automall{ display: table-row; } /* --------------------------------------------- フロアガイド共通マップ --------------------------------------------- */ .floor dl.floorlist, .allmap_map ul { display: flex; justify-content: center; flex-wrap: wrap; margin: 30px 0 0; } .floor dl.floorlist dt, .allmap_map li { margin: 0 4px 8px; text-align: center; font-size: 16px; font-weight: bold; letter-spacing: 0.1em; } .floor dl.floorlist dt a, .allmap_map li a { display: block; box-sizing: border-box; padding: 8px 16px 8px 26px; border-radius: 4px; border: 4px solid #EFEEEC; } .floor dl.floorlist dt a:after, .allmap_map li a:after { content: "\f054"; font-family: "font Awesome 5 Free"; font-weight: bold; margin: 0 0 0 8px; } .floor dl.floorlist dt a:hover, .allmap_map li a:hover { text-decoration: none; } .floor dl.floorlist dt.fid_s1f a, .floor dl.floorlist dt.fid_s2f a, .floor dl.floorlist dt.fid_s3f a{ border: 4px solid #ffe5dc;} .floor dl.floorlist dt.fid_n1f a, .floor dl.floorlist dt.fid_n2f a, .floor dl.floorlist dt.fid_n3f a, .floor dl.floorlist dt.fid_n4f a{ border: 4px solid #d8ebe9;} /* --------------------------------------------- フロアページ下部　フロア一覧 --------------------------------------------- */ .floorsearch_box .floorsearch { border: none; font-family: "Quicksand", sans-serif; font-weight: bold; color: #555555; font-size: 150%; letter-spacing: 0.05em; text-align: center; padding: 20px 0 18px; } .floorsearch_box .floorsearch::before { content: "\f5fd"; font-family: "font Awesome 5 Free"; margin-right: 10px; } .floorsearch_box { border: 4px dotted #ccc; padding: 0 18px 8px; margin-top: 40px; box-sizing: border-box; background: #fff; width: 960px; margin: 0 auto; } .floorsearch_box .floorlist { text-align: center; } .floorsearch_box .floorlist li { border: 4px solid #EFEEEC; border-radius: 4px; display: inline-block; margin: 0 5px 10px 0; letter-spacing: 0.1em; } .floorsearch_box .floorlist a { display: block; padding: 8px 12px; font-weight: bold; } /* --------------------------------------------- ランキングページ(shop/favorite.jsp) --------------------------------------------- */ #contents.favorite #favorite .item { border-bottom: 4px solid #EFEEEC; margin: 0 0 10px 0; padding: 20px; box-sizing: border-box; position: relative; } #contents.favorite #favorite .item::after { content: ""; display: block; clear: both; } #contents.favorite #favorite .item .ranking_box { min-height: 100px; /*#contents.favorite #favorite .order の height と同値*/ } #contents.favorite #favorite .item .order { display: block; width: 100px; height: 200px; margin: 0 30px 0 0; background: #8A6B4F; font-family: "Quicksand", sans-serif; font-weight: 700; color: #fff; text-align: center; font-size: 26px; float: left; line-height: 100px; letter-spacing: 0.05em; } #contents.favorite #favorite .item:nth-of-type(1) .order { background: #AE9860; line-height: 20px; } #contents.favorite #favorite .item:nth-of-type(1) .order::before { font-family: "font Awesome 5 Free"; content: "\f521"; display: block; margin: 24px 0 10px 0; } #contents.favorite #favorite .item:nth-of-type(2) .order { background: #8D8D8D; } #contents.favorite #favorite .item .image { display: block; width: 300px; height: 200px; float: right; margin: 0 0 0 0; overflow: hidden; position: relative; } #contents.favorite #favorite .item .image img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; } #contents.favorite #favorite .item .desc { display: block; width: calc(100% - 460px); float: left; } #contents.favorite #favorite .item .goods.title { margin: 0 0 20px 0; padding: 20px 0; display: block; border-bottom: 1px dotted #ccc; font-size: 18px; line-height: 24px; } #contents.favorite #favorite .item .goods.title a { font-weight: bold; } /*いいねカウンター*/ #contents.favorite #favorite .goods_like_btn.mini { position: static; margin: 15px 0 0; } #contents.favorite #favorite .item .fa-heart { font-size: 25px; margin: 0 12px 0 0; } #contents.favorite #favorite .item .cnt { display: inline-block; color: #555555; border: 2px solid #63b3aa; border-radius: 4px; padding: 2px 10px 3px 14px; position: relative; font-family: "Quicksand", sans-serif; font-weight: bold; font-size: 22px; letter-spacing: 0.1em; } #contents.favorite #favorite .item .cnt::before { content: ""; position: absolute; width: 7px; height: 7px; background: #fff; border-left: 2px solid #ff4949; border-bottom: 2px solid #ff4949; -webkit-transform: rotate(45deg); transform: rotate(45deg); left: -6px; top: 8px; } /* --------------------------------------------- 人気タグページ(shop/tag.jsp) --------------------------------------------- */ /*タグ　タイトル部*/ #contents.tag .tag-title::before { content: "#"; font-family: "Quicksand", sans-serif; color: #ea5e00; font-size: 22px; margin: 0px 5px 0 0; vertical-align: middle; } #contents.tag .tag-title_main { vertical-align: middle; } #contents.tag .tag-title_count { font-size: 16px; font-weight: bold; background: #fff; display: inline-block; width: 30px; height: 30px; box-sizing: border-box; border-radius: 50%; padding-top: 3px; margin-left: 9px; font-family: "Quicksand", sans-serif; font-weight: 700; } /*タグ　アイテムリスト*/ #contents #tag { text-align: center; } #contents.tag #tag .tag-title { background: none; border: 4px solid #efeeec; display: inline-block; margin: 30px 0 0; padding: 10px 20px 12px 36px; border-radius: 6px; width: auto; } #contents.tag .tag-title { background: none; font-size: 18px; position: relative; border: 4px solid #efeeec; display: inline-block; margin: 0 25% 40px; width: 50%; padding: 10px 20px 12px 20px; border-radius: 6px; } #contents.tag #tag .tag-title .tag-title_count { background: #ffe5dc; } #contents #tag .goodslist { overflow: hidden; padding: 24px 0; display: flex; flex-wrap: wrap; position: relative;} #contents #tag .goodslist .item { width: calc(100% / 3); height: 200px; box-sizing: border-box; margin: 10px 0 0; padding: 16px; border-left: 4px solid #EFEEEC; float: left; text-align: left; /**/ position: relative; } .pc #contents #tag .goodslist .item:nth-of-type(3n) { /*PCのみ*/ border-right: 4px solid #EFEEEC; } #contents #tag .goodslist .item .news_box { width: 100%; height: 100%; box-sizing: border-box; } #contents #tag .goodslist .item p.image { width: 140px; height: 180px; float: right; border-radius: 4px; /**/ position: absolute; top: 5px; right: 14px; } #contents #tag .goodslist .item p.image span.img_bg_css { border-radius: 4px; } #contents #tag .goodslist .item p.image a { display: block; width: 100%; height: 100%; } #contents.tag .price_date { font-size: 10px; margin-top: 40px; padding: 8px 20px; background: #efeeec;} #contents #tag .item .desc, #contents #tag .date { width: -webkit-calc(100% - 150px); width: calc(100% - 150px); position: relative; padding: 0; } #contents #tag .ico_new2 { font-family: "Quicksand", sans-serif; font-weight: 700; position: absolute; margin: 0; text-align: center; top: 0px; left: 0px; background: #fee101; padding: 0; line-height: 40px; color: #ea5e00; width: 40px; height: 40px; box-sizing: border-box; z-index: 10; border-radius: 0; } #contents #tag .goodslist .item .goods { font-weight: bold; border: none; padding: 0; background: none; text-align: left; font-size: 14px; /* max-height:3.5em;*/ overflow: hidden; position: relative; margin: 0 0 2px 0px; line-height: 20px; } #contents #tag .goodslist .item .name { font-size: 12px; } #contents #tag .goodslist .item .price { display: none; font-weight: bold; font-size: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #contents #tag .goodslist .item .date { font-size: 12px; line-height: 1em; margin: 0.5em 0; color: #777; } @media screen and (max-width: 767px) { #contents #tag .goodslist .item .date { font-size: 11px; } } #contents #tag .goodslist .item .name { line-height: 150%; } #contents #tag .goods_like_btn, #contents #tag .morelink { display: none; } /*タグ　もっと見るボタン*/ #contents #tag .more-button-wrap { text-align: center; padding: 20px 0 26px; margin-bottom: 30px; background: #ffe5dc; position: relative;} #contents #tag .more-button-wrap .btn-more::before { font-family: "font Awesome 5 Free"; content: "\f054"; margin: 0 8px 0 0; } #contents #tag .more-button-wrap .btn-more{ display: inline; background: #FFF; } #contents #tag .more-button-wrap:last-of-type { margin-bottom: 130px; } #contents #tag .more-button-wrap:last-of-type::after { content: "# Other Tags"; display: inline-block; text-align: center; font-family: "Quicksand", sans-serif; font-weight: bold; color:#ea5e00; position: absolute; bottom: -90px; left: 0; width: 100%; font-size: 24px; } /*下部に並ぶタグ一覧(×フッター)*/ #contents #tag .tag_list_name a { padding: 7px 18px; } #contents #tag .tag_list-tagname { font-weight: bold; } #contents #tag .tag_list-tagcount { font-size: 14px; font-weight: bold; background: #ffe4e4; display: inline-block; width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; padding-top: 0; margin-left: 8px; font-family: "Quicksand", sans-serif; font-weight: 700; } #contents #tag .tag_list_name .tag_list-tagcount { background: #FFF; } /*下部に並ぶタグ一覧（tagitemlist）*/ #contents .trendtag_list { border: 4px solid #efeeec; background: #fff; width: 960px; margin: 0 auto; border-radius: 10px; } #contents .trendtag_list h4 { font-family: "Quicksand", sans-serif; font-weight: bold; text-align: center; font-size: 22px; padding: 20px 0 18px; letter-spacing: 0.05em; } #contents .trendtag_list h4 a{ color:#ea5e00; } #contents .trendtag_list h4:before { content: "#"; margin: 0 5px 0 0; color: #ea5e00; } /*一覧へ戻るボタン*/ #contents.tag .return_list { clear: both; margin: 20px 0; line-height: 1em; text-align: center; } #contents.tag .return_list a { display: inline-block; padding: 10px 24px; border-radius: 24px; background: #EFEEEC; font-size: 14px; } #contents.tag .return_list a:before { font-family: "font Awesome 5 Free"; font-weight: bold; content: ""; font-size: 20px; margin-right: 8px; vertical-align: middle; } /* --------------------------------------------- ピックアップガイド(shop/feature.jsp) --------------------------------------------- */ #contents.feature h2:before { font-family: "font Awesome 5 Free"; content: "\f08d"; margin: 0 4px 0 0; color:#ea5e00;} #contents #feature .feature { box-sizing: border-box; padding: 20px 10px; overflow: hidden; position: relative; border-bottom: 4px solid #EFEEEC; } #contents #feature .feature .image { display: block; float: right; width: 400px; height: 200px; border-radius: 4px; margin: 0 0 0 20px; } #contents #feature .feature .title { padding: 10px 0; font-weight: bold; font-size: 18px; } #contents #feature .feature .date { font-size: 12px; line-height: 1em; margin: 0.5em 0; color: #777; } @media screen and (max-width: 767px) { #contents #feature .feature .date { font-size: 11px; } } #contents #feature .item .morelink { bottom: 0; } /*ピックアップガイド個別ページ*/ body.item_feature #contents h2{ display:none; } body.item_feature #contents article h3 { border: none; margin: 0 0 20px; padding: 0; overflow: hidden; /*background: linear-gradient(-60deg, #FFE5DC, #ffe4e4);*/} body.item_feature #contents article h3 .title { font-size: 18px; padding: 0 0 20px; } body.item_feature #contents article h3 .image { width: 50%; margin: 0 auto; } body.item_feature #contents article h3 .image img { width: 100%; max-height:382px;} body.item_feature #contents-main .NewsItemList { margin: 0 0 40px; } body.item_feature #contents-main .NewsItemList .goodscomment { /*display: none;*/ white-space: pre-wrap; } body.item_feature .item .goodscomment { display: none; } body.item_feature #contents .content1, body.item_feature #contents .content2 { box-sizing: border-box; padding: 0 20px 20px; text-align: center; white-space: pre-wrap;} /*一覧へ戻るボタン*/ #contents.feature .return_list { clear: both; margin: 20px 0; line-height: 1em; text-align: center; display: none;} #contents.feature .return_list a { display: inline-block; padding: 10px 24px; border-radius: 24px; background: #EFEEEC; font-size: 14px; } #contents.feature .return_list a:before { font-family: "font Awesome 5 Free"; font-weight: bold; content: ""; font-size: 20px; margin-right: 8px; vertical-align: middle; } /*-------------------- ショップニュースの店長ボイス TOPページも兼用 --------------------*/ .bf2 #contents .voice { background: #fff; display: flex; margin: 0 0 40px; } #contents .voice .p_title { width: 20%; text-align: center; } #contents .voice .p_title h2 { font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 22px; background: #fff; margin: 0; padding: 0 0 12px; border-bottom: 0; width: auto; } #contents .voice .p_title ul { width: 100%; padding: 0; } #contents .voice .p_title ul li { width: 100%; } #contents .voice .swiper-container_voice { width: 80%; display: flex; overflow: hidden; box-sizing: border-box; padding: 0; } #contents .voice ul li { width: 50%; flex-shrink: 0; } #contents .voice .swiper-container_voice.one_item ul li { width: 100%; } #contents .voice ul .logoimg a { border-radius: 100%; float: left; width: 100px; height: 100px; box-sizing: border-box; background: #fff; position: relative; } #contents .voice ul .logoimg a img { position: absolute; width: 65%; margin: auto; left: 0; right: 0; top: 0; bottom: 0; } #contents .voice ul .detail { width: calc(100% - 145px); float: right; margin: 0 20px 0 0; padding: 12px 15px; box-sizing: border-box; position: relative; min-height: 100px; background: #fff; border-radius: 6px; } #contents .voice ul .detail::after { content: ""; display: block; position: absolute; width: 13px; height: 13px; top: 45px; left: -6px; background: #fff; transform: rotate(45deg); background: #fff; } #contents .voice ul .goodsname { font-weight: bold; } #contents .voice ul .shopname a { display: block; font-size: 12px; } #contents .btn-more { font-family: "Quicksand", sans-serif; font-weight: 700; display: block; background: #efeeec; border-radius: 120px; font-size: 16px; padding: 6px 20px 8px; text-decoration: none; text-align: center; vertical-align: middle; color: #ea5e00;} /* --------------------------------------- ニュース、クーポン、ボイス、求人のタブ --------------------------------------- */ .shopnews_tab { height: 70px; margin: 0 0 0; } .shopnews_tab li { float: left; width: 25%; box-sizing: border-box; padding: 0; height: 70px; vertical-align: bottom; border-right: 4px solid #fff; } .shopnews_tab li:last-child { border-right: 0; } .shopnews_tab li a { display: inline-block; text-align: center; background: #EFEEEC; width: 100%; height: 70px; line-height: 70px; position: relative; } .shopnews_tab li.current a { position: relative; background: #ea5e00; border-bottom: none; margin-top: 0; line-height: 70px; height: 70px; font-weight: bold; font-size: 18px; color: #fff; } .shopnews_tab li.current a:after { content: ""; display: block; position: absolute; bottom: -23px; width: 0; height: 0; border: 12px solid transparent; left: 36%; left: calc(50% - 12px); border-top: 12px solid #ea5e00; } .shopnews_tab li a .num { font-size: 14px; font-family: "Quicksand", sans-serif; line-height: 1em; text-align: center; color: #ea5e00; display: block; width: 30px; height: 30px; border-radius: 50%; box-sizing: border-box; opacity: 1.0; background: #fff; padding: 8px 0 0 2px; position: absolute; top: -8px; right: 8px; } .shopnews_tab li a[href*="tag"]:before { content: "#"; font-family: "Quicksand", sans-serif; margin: 0 4px 0 0; color: #ea5e00;display: none; } .shopnews_tab li.current a[href*="tag"]:before { color: #FFF; } .shopnews_tab li a[href*="favorite"]:before { font-family: "font Awesome 5 Free"; content: "\f521"; margin: 0 4px 0 0; color: #63b3aa; font-weight: bold; } /* --------------------------------------------- mdカテゴリ(shop/md_cat_list.jsp) --------------------------------------------- */ .md_cat_list #contents h2:before { font-family: "font Awesome 5 Free"; font-weight: bold; content: "\f0c1"; margin: 0 4px 0 0; } /* --------------------------------------------- コロナ衛生対策 --------------------------------------------- */ #shoppage #shop_info .eisei .shop-eisei { margin: 24px 24px 0; padding: 18px 20px 15px; text-align: center; background: #DFEFED; display: flex; flex-wrap: wrap; justify-content: center; } #shoppage #shop_info .eisei .eisei-wrap { position: relative; line-height: 1.6; padding: 55px 0 10px; margin: 0 5px 10px; width: calc((100% - 40px) / 4); box-sizing: border-box; background: #fff; border-radius: 15px; } #shoppage #shop_info .eisei .eisei-wrap::before { content: ""; display: block; width: 100%; height: 35px; position: absolute; top: 19px; left: 0; right: 0; margin: auto; background: url(../img/icn_crn1.svg) no-repeat center; } /******衛生アイコン******/ #shoppage #shop_info .eisei .eisei-wrap.eisei2::before { background-image: url("../img/icn_crn2.svg"); } #shoppage #shop_info .eisei .eisei-wrap.eisei3::before { background-image: url("../img/icn_crn3.svg"); } #shoppage #shop_info .eisei .eisei-wrap.eisei4::before { background-image: url("../img/icn_crn4.svg"); } #shoppage #shop_info .eisei .eisei-wrap.eisei5::before { background-image: url("../img/icn_crn5.svg"); } #shoppage #shop_info .eisei .eisei-wrap.eisei6::before { background-image: url("../img/icn_crn6.svg"); } #shoppage #shop_info .eisei .eisei-wrap.eisei7::before { background-image: url("../img/icn_crn7.svg"); } /********************/ #shoppage #shop_info .eisei .eisei-target { display: block; font-size: 12px; position: absolute; top: 5px; left: 5px; display: inline-block; border: 2px solid #55b5aa; padding: 1px 8px; border-radius: 100px; font-weight: bold; color: #55b5aa; } #shoppage #shop_info .eisei h5 { font-weight: bold; width: 100%; font-size: 16px; margin: 0 0 11px; color: #55b5aa; } #shoppage #shop_info .eisei div em { margin: 5px; display: inline-block; border: 1px solid #ccc; padding: 6px 10px; box-sizing: border-box; line-height: 1.0em; border-radius: 4px; } #shoppage #shop_info .eisei .shop-eiseiother { margin: 8px 24px 0; background: #DFEFED; text-align: center; padding: 20px; } #shoppage #shop_info .eisei .shop-eisei + .shop-eiseiother { margin-top: 0; padding-top: 0; } #shoppage #shop_info .eisei .shop-eiseiother h5 { margin-bottom: 3px; }