@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,200..400,0..1,-25"); .material-symbols-rounded { font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' -25, 'opsz' 48 } /*基本設定*/ :root { --color-base-text-dark: #333; /*テキストの色*/ --color-base-text-light: #555; /*テキストの色*/ --color-base-line-dark: #707070; /*主に濃い罫線グレー*/ --color-base-line-middark: #888; /*少し濃い罫線グレー*/ --color-base-line-light: #ccc; /*主に薄い罫線グレー*/ --color-base-btn-light: #999; /*ボタンの色*/ --color-base-bg-light: #EEE; /*薄いグレー */ --color-base-main-dark: #EE6B74; /*メインカラー*/ --color-base-main-light: #FCE9E8; /*メイン薄いカラー*/ --color-base-main-midlight: #f0f0f2; /*メイン少し薄いカラー　主にボタン用*/ --color-base-accent-dark: #EE6B74; /*アクセントカラー　ピンク*/ --color-base-accent-light: #FCE9E8; /*アクセント薄いカラー　薄いピンク*/ --color-base-pointcard: #DA1770; /*アクセントカラー　ポイントカードピンク*/ --color-base-sub1-dark: #584E9E; /*サブカラー1*/ --color-base-sub1-light: #EEEDF6; /*サブカラー1うすい*/ --color-base-sub2-dark: #FF9A48; /*サブカラー2*/ --color-base-sub2-light: #FFF0E6; /*サブカラー2うすい*/ --color-base-sub3-dark: #37BC96; /*サブカラー3*/ --color-base-sub3-light: #CEF4E9; /*サブカラー3うすい*/ --fontfamily-base: "Noto Sans JP", "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; --fontfamily-english: "Lexend Deca", sans-serif; --fontfamily-icon: "Material Symbols Rounded"; --iconfont-FILL1-set: 'FILL' 1,'wght' 200; /**/ --color-goodslike: #ee4040;/*#ef5072*/ --inner-Max-Width :1200px; --inner-Min-Width :960px; --inner-Width :90%; --box-radius-small:4px; --box-radius-medium:10px; --box-radius-large:15px; --box-radius-xlarge:20px; --box-radius-full:50%; } html { } 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: var(--color-base-text-dark); font-family: var(--fontfamily-base); line-height: 1.6em; position: relative; } a { text-decoration: none; color:var(--color-base-text-dark); } a:hover { text-decoration: none; opacity: 0.8; } img { max-width: 100%; } a.hoverlink { display: none; } a.hoverlink { display: block !important; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; text-indent: -9999em; z-index: 5; } /*商品画像を背景で読み込む共通*/ .img_bg_css { display: block; width: 100%; height: 100%; min-height: 40px; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 0px; box-sizing: border-box; } pre { font-family: var(--fontfamily-base)} /*ニュース画像がなくlogoに置き換わる箇所　共通*/ .img_bg_css.no_img_logo { background-size: 60% auto,30% auto; } img.no_img_logo { 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;'; } .img_objfit img.no_img_logo { object-fit: contain; font-family: 'object-fit: contain;'; } body.pc .sp_view { display: none; } .ico_new { font-family: var(--fontfamily-english); margin: 0 0 0 4px; color: var(--color-base-accent-dark); } .ico_jobs, .ico_new2, .ico_coupon { display: inline-block; text-decoration: none; padding: 3px; margin: 0 0px 0 3px; line-height: 1em; } .ico_jobs, .ico_coupon { font-size: 0.8em;} .ico_jobs { background: var(--color-base-sub1-dark); color: #fff; } .ico_new2 { color: var(--color-base-accent-dark); font-family: var(--fontfamily-english); padding: 0 3px;} .ico_coupon { background: var(--color-base-accent-dark); color: #fff; } span.sale { color: #d00; } .to-top { position: fixed; bottom: 20px; right: 20px; z-index: 45; width: 50px; height: 50px; } .to-top a { position: absolute; width: 100%; height: 100%; text-indent: -9999em; display: block; background: rgba(0,0,0,0.9); border-radius: 50%; opacity: 0.7; } .to-top a:before { font-family: var(--fontfamily-icon); content: "\e316"; font-size: 24px; width: 100%; height: 100%; display: block; text-indent: 0; text-align: center; line-height: 50px; position: absolute; color: #fff; top: 0; left: 0; } #main { width: 100%; margin: 0 auto; background: rgba(88, 78, 158, 0.1); background: linear-gradient(90deg,rgba(223, 39, 24, 0.1) 0%, rgba(88, 78, 158, 0.1) 100%); } @media (max-width: 1020px) and (min-width: 768px){ .pc #main{ width: 1020px; } } #contents { clear: both; padding: 0 0 40px; margin: 0; } #contents::after { content: ""; display: block; height: 0px; clear: both; } .inner { width:var(--inner-Width); max-width: var(--inner-Max-Width); min-width: var(--inner-Min-Width); margin: 0 auto; position: relative; } .inner::after { content: ""; display: block; height: 0px; clear: both; } #contents h2 { padding: 10px 0; margin: 0 auto; font-size: 16px; text-align: center; } #contents > h2 { width: var(--inner-Width); max-width: var(--inner-Max-Width); min-width: var(--inner-Min-Width); margin: 20px auto ; font-weight: normal; background: #fff; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1); border-radius: var(--box-radius-small); } #contents-main { float: left; width: calc(100% - 280px); padding: 20px 0; box-sizing: border-box; } #contents-main.all { width: 100%; float: none; box-sizing: border-box; padding: 0; } #contents-main h3 { padding: 18px 20px; font-size: 20px; font-weight: bold; line-height: 1.5em; border-radius: var(--box-radius-small); background: linear-gradient(90deg, rgba(223, 39, 24, 0.1) 0%, rgba(88, 78, 158, 0.1) 100%); text-align: center; } #sub{ width:260px; float:right; box-sizing: border-box; padding: 40px 0 0 10px; } .contents_inner{ background: #fff; padding: 40px 6% 60px; } /*----------------------------------------- header部 -----------------------------------------*/ #main_header { position: relative; background: #fff; } #main_header h1{ display:none; } #main_header .sc_header_top_navi { width:100%; background: var(--color-base-line-light); height:30px; } #main_header .sc_navi { position: absolute; top:0; left:0; display: flex; width:100%; } #main_header .sc_navi li{ display: inline-block; margin:0px 4px; box-sizing: border-box; } #main_header .sc_navi li a{ display: block; padding:4px 10px; box-sizing: border-box; height:30px; } body.pc #main_header .sc_navi li a{ font-size:0.85em; } #main_header .sc_navi li.all a{ position: relative; padding-left:30px; } @media (max-width: 1270px){ body.pc #main_header .sc_navi li a{ letter-spacing: -0.05em; padding: 4px; } body.pc #main_header .sc_navi li.all a{ padding-left:30px; } } #main_header .sc_navi li.all a:before{ position: absolute; top:3px; left:0; font-family: var(--fontfamily-icon); margin: 0 4px 0 0; content: "\e58c"; font-size: 22px; } #main_header .sc_navi li.current a{ background: var(--color-base-main-dark); color:#fff; } body.pc #main_header .header_btn{ position: absolute; right: 0; top: 0px; display: flex; justify-content: flex-end; gap: 15px; } #main_header .lang_btn, #main_header .line_btn, #main_header .card_btn{ display: inline-block; border:1px solid var(--color-base-line-dark); border-top:none; box-sizing: border-box; height:36px; } #main_header .lang_btn a, #main_header .line_btn a, #main_header .card_btn a{ font-family: var(--fontfamily-english); padding: 0px 16px 0 13px; height:36px; line-height: 33px; font-size: 16px; box-sizing: border-box; display: inline-block; } #main_header .card_btn a{font-size: 14px;} #main_header .line_btn a{ padding: 0px 18px 0 15px; } #main_header .lang_btn a:before{ width: 20px; height: 20px; display: inline-block; margin: 0 6px 0 0; vertical-align: middle; content: "\e894"; font-family: var(--fontfamily-icon); font-size: 22px; line-height: 19px; } #main_header .line_btn a:before{ content: ""; width: 20px; height: 20px; display: inline-block; margin: -1px 6px 0 0; vertical-align: middle; background: url(../img/ico_line.png) no-repeat; background-size: cover; } #main_header .card_btn a:before{ width: 20px; height: 20px; display: inline-block; margin: 0 6px 0 0; vertical-align: middle; content: "\e06d"; font-family: var(--fontfamily-icon); font-size: 22px; line-height: 19px; } /*外国語プルダウンメニュー*/ #main_header .multilang_list { position: absolute; top:1px; right:0px; z-index: 1000; background:#fff; padding:0 10px; box-shadow: 0px 3px 10px 0px rgba(0,0,0,.2); } #main_header .multilang_list li{ border-bottom:1px dashed #ddd; } #main_header .multilang_list li:last-child{ border:none; } #main_header .multilang_list li a{ display: block; padding:10px 15px; min-width: 120px; } #main_header .multilang_list li a::after{ font-family: var(--fontfamily-icon); content: '\e5cc'; position: absolute; right:15px; font-size:1.2em; } /*-------- ----------------------------------------------- .header_logo ロゴ表示領域 -------------------------------------------------------*/ .header_wrap { display: flex; align-items: flex-end; justify-content: space-between; height: 110px; padding: 20px 0 0; box-sizing: border-box; } .header_logo{ width:100px; text-align: center; padding:0; box-sizing: border-box; display: block; margin:0 0 20px; } .header_logo img{ max-width: 100%; max-height: 100%; } /*------------------------------------------------------- グローバルメニュー ------------------------------------------------------------*/ .header_glo{ width: calc(100% - 150px); margin:0 0 0 50px; } .glo_menu_list{ display: flex; justify-content: space-between; } .glo_menu_list .glo_menu_items { height: 100%; padding: 0; box-sizing: border-box; position: relative; vertical-align: bottom; text-align: center; display: inline-block; line-height: 1em; } body.pc .glo_menu_list .glo_menu_items a{ padding: 20px 2px; } body.pc .glo_menu_list .glo_menu_items { font-size:1em; } @media screen and (max-width: 1200px) { body.pc .glo_menu_list .glo_menu_items { font-size:0.9em; } } .pc .glo_menu_list .glo_menu_items:before{ content: ""; width: 10px; height: 10px; position: absolute; top: 0; left: calc((100% - 10px) / 2 ); border-radius: 100px; background: var(--color-base-bg-light); display: block;} /*アクティブ表示*/ body.eventnews .glo_menu_list .glo_menu_items.glo_eventnews:before, body.item_eventnews .glo_menu_list .glo_menu_items.glo_eventnews:before, body.calendar .glo_menu_list .glo_menu_items.glo_eventnews:before, body.bf2 .glo_menu_list .glo_menu_items.glo_shopnews:before, body.favorite .glo_menu_list .glo_menu_items.glo_shopnews:before, body.tag .glo_menu_list .glo_menu_items.glo_shopnews:before, body.item_news .glo_menu_list .glo_menu_items.glo_shopnews:before, body.floor .glo_menu_list .glo_menu_items.glo_floor:before, body.bf8 .glo_menu_list .glo_menu_items.glo_search:before, body.bf1 .glo_menu_list .glo_menu_items.glo_search:before, body.gourmet_index .glo_menu_list .glo_menu_items.glo_gourmet:before, body.shoplist01 .glo_menu_list .glo_menu_items.glo_gourmet:before, body.shoplist02 .glo_menu_list .glo_menu_items.glo_gourmet:before, body.shoplist03 .glo_menu_list .glo_menu_items.glo_gourmet:before, body.floor-all .glo_menu_list .glo_menu_items.glo_floor:before, body.facility-info .glo_menu_list .glo_menu_items.glo_facility:before, body.access .glo_menu_list .glo_menu_items.glo_access:before, body.pointcard .glo_menu_list .glo_menu_items.glo_card:before{ background: var(--color-base-main-dark);} .glo_menu_list .glo_menu_inner { cursor: pointer; width: auto; height: 100%; display: inline-block; box-sizing: border-box; position: relative; text-align: center; line-height: 1.2em; transition: all 0.5s; } body.pc .glo_menu_list .glo_menu_inner{ /* font-size:0.85em; */ } .glo_menu_list .glo_menu_inner em{ font-style: normal; font-weight: bold; } .glo_menu_list a.glo_menu_inner:hover{ text-decoration: none; /*aタグinnerのhoverで下線を出さない*/ } /*--------------------- 重要なおしらせ ----------------------*/ .AllPageBnr{ /*縦のmargin,paddingは０以外指定NG*/ width:1020px; margin:30px auto; display: flex; } .AllPageBnr .bnr_title{ display: none; /*jsで表示させる*/ width: 280px; } .AllPageBnr .bnr_title p{ background:#d00; color:#fff; font-weight:bold; border-radius:var(--box-radius-xlarge); padding:5px 20px; width:100%; box-sizing: border-box; text-align: center; font-size:16px; } .AllPageBnr .bnr_title p:before{ font-family: var(--fontfamily-icon); content: "\e645"; color: #d00; border-radius:var(--box-radius-full) ; background: #fff; width:20px; height:20px; display: inline-block; text-align: center; vertical-align: middle; margin-right:10px; font-size:16px; line-height:20px; } .AllPageBnr .bnr_list{ /*０件の時に完全に残らないように*/ display: none;/*jsで表示させる*/ padding:0; border:0; text-align: center; width:calc(100% - 300px); margin:0 0 0 20px; border-top:1px solid #d00; } .AllPageBnr .bnr_list .bnr_item { box-sizing: border-box; padding:10px; border-bottom:1px solid #d00; text-align: left; background: #fff; a{text-decoration: underline;} } .AllPageBnr .bnr_list .bnr_item em{ display: inline-block; margin-right:1em; font-family: var(--fontfamily-english); } /*緊急のおしらせ　TOP以外　other_page*/ .AllPageBnr.other_page{ width:100%; margin:0; text-align: center; } .AllPageBnr.other_page .bnr_list { width: 100%; margin:0; border:none; } .AllPageBnr.other_page .bnr_list .bnr_item { border-top: 1px solid var(--color-base-line-light); text-align: center; padding: 4px 0; font-size: 12px; border-bottom: 0; } .AllPageBnr.other_page .bnr_list .bnr_item em.date{ display: none; } .AllPageBnr.other_page .bnr_list .bnr_item a{ text-decoration: underline; } .AllPageBnr.other_page .bnr_list .bnr_item:before{ font-family: var(--fontfamily-icon); content: "\e645"; color: #fff; border-radius: var(--box-radius-full); background: #d00; width: 18px; height: 18px; display: inline-block; text-align: center; vertical-align: middle; margin-right: 5px; font-size: 14px; line-height: 18px; } /*----------------------------------------------- footer -----------------------------------------------*/ footer { margin: 0; padding:0; background: #fff; } body.pc footer .sc_foot_desc{ background: url("../img/bg_footer.jpg") no-repeat center; background-size: cover; padding: 50px 0; } footer .sc_foot_desc .footer_bnr ul{ display: flex; flex-wrap: wrap; padding: 0 0 30px; } footer .sc_foot_desc .footer_bnr ul li{ border: 1px solid #fff; border-radius: var(--box-radius-small); box-sizing: border-box; margin:0 26px 10px 0; width: calc((100% - 78px) / 4 ); } footer .sc_foot_desc .footer_bnr ul li:nth-child(4n){ margin-right: 0; } footer .sc_foot_desc .footer_bnr ul li a{ display: block; text-align: center; color: #fff; line-height: 1.4em; padding: 18px 20px 22px; position: relative;} footer .sc_foot_desc .footer_bnr ul li a:hover{ background: rgba(0,0,0,0.5); opacity: 1; } footer .sc_foot_desc .footer_bnr ul li a:after { font-family: var(--fontfamily-icon); content: "\e89e"; margin: 0 0 0 4px; font-size: 16px; vertical-align: middle; position: absolute; top: calc(50% - 8px); right: 10px; } body.pc footer .sc_foot_desc .footer_bnr ul li a em{ display: block; text-align: center; } footer .footer_menu { display: flex; background: #fff; padding: 20px 50px; box-sizing: border-box; } footer .footer_menu dl { margin: 0; min-height: 180px; padding: 10px 10px 20px 0; width: calc(100% / 4); box-sizing: border-box; } footer .footer_menu dl:last-child { border-left: 1px solid var(--color-base-line-dark); padding:20px 0 0 44px; } footer .footer_menu dl dt { font-weight: bold; font-size: 14px; margin-bottom:0.5em; } footer .footer_menu dl li { list-style: disc; list-style-position: inside; } footer .footer_menu dd ul li{ list-style: none; padding:0.2em 0 0 1.2em; position: relative; } footer .footer_menu dd ul li:before{ content: "・"; display: block; position: absolute; left: 0; } footer .footer_menu dl.footer-sc {} footer .footer_menu dl.footer-sc .sc_name { font-weight:bold; } footer .footer_menu dl.footer-sc .sc_logo{ width: 80px; margin-bottom: 16px; } footer .footer_menu dl.footer-sc .sc_logo img{ max-height: 100%; } footer .footer_menu dl.footer-sc .sns_link { display: flex; align-items: center; } footer .footer_menu dl.footer-sc .sns_link li { margin:8px 4px; } footer .footer_menu dl.footer-sc .sns_link li:before{ display: none; } footer .footer_menu dl.footer-sc .sns_link li img{ max-height:40px; } footer .footer_menu dl.footer-sc .sns_link li.youtube img{ max-height:30px; } footer .footer_list { margin:30px 0 20px; padding:20px ; box-sizing: border-box; background:var(--color-base-main-light) ; display: flex; text-align: center; } footer .footer_list .brand_logo { width:140px; display: inline-block; margin-right:20px; } footer .footer_list .brand_logo img { width:100%; vertical-align: middle; } .footer_sc_navi { display:inline-block; } footer .footer_list .sclist{ display: inline-block; } footer .footer_list .sc_navi { display: flex; } footer .footer_list .sc_navi li{ display: inline-block; margin:0px 4px; box-sizing: border-box; } footer .footer_list .sc_navi li a{ display: block; padding:4px 10px; box-sizing: border-box; height:30px; } footer .footer_list .sc_navi li.all a{ position: relative; padding-left:30px; } footer .footer_list .sc_navi li.all a:before{ position: absolute; top: 3px; left: 0; font-family: var(--fontfamily-icon); margin: 0 4px 0 0; content: "\e58c"; font-size: 22px; } footer .footer_list .sc_navi li.current a{ background: var(--color-base-main-dark); color:#fff; } footer .footer_list .kanren { display: flex; justify-content: center; margin-top:16px; } footer .footer_list .kanren dd{ } footer .footer_list .kanren dd ul{ display: flex; justify-content: center; } footer .footer_list .kanren dd ul li a{ display:inline-block; padding:0 15px; border-right:1px solid var(--color-base-line-dark); line-height: 1; } footer .footer_list .kanren dd ul li:last-child a{ border:none; } footer .ad_foot_desc { padding: 0px 0; text-align: center; } footer .ad_foot_desc ul { display: flex; justify-content: center; margin:20px 0; } footer .ad_foot_desc ul li { padding:0 6px; } body.pc footer .ad_foot_desc ul li a{ display: inline-block; padding: 0 20px; line-height: 1em; border-right:1px solid var(--color-base-line-dark); } body.pc footer .ad_foot_desc ul li a[target="_blank"]:after { font-family: var(--fontfamily-icon); content: "\e89e"; margin: 0 0 0 4px; position: relative; font-size: 14px; top: 1px; } body.pc footer .ad_foot_desc ul li:first-of-type a{ border-left:1px solid var(--color-base-line-dark); } footer .copyright{ color: var(--color-base-text-light); font-size: 14px; margin-bottom: 20px; } /********************************** メインバナー、中バナー、小バナー関連 TOPページ、全ページフッター共通 ******************************************/ .main_banner_area{ height: auto; margin: 0 auto; width:100%; padding:30px 0; } .main_banner_area .bnr_wrap{ width: 100%; /*display: flex; justify-content:space-between;*/ margin: 0 auto; } .main_banner_area .bnr_wrap #banner{ width:100%; position:relative; margin-bottom:40px; } .main_banner_area .bnr_wrap #banner .swiper-container { overflow: hidden; padding-bottom: 6px; } .main_banner_area .bnr_wrap #banner ul li{ width:600px; height:400px; overflow: hidden; border: 8px solid #fff; box-sizing: border-box; border-radius: var(--box-radius-medium); box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.1); } .main_banner_area .bnr_wrap #banner ul li img { width:100%; height:auto; /* object-fit: cover; height:100%; object-position: 50% 0; */ } /*Swiperパーツの制御*/ .main_banner_area #banner .swiper_btnbox{ display: flex; justify-content: center; position: relative; align-items: center; margin-top: 4px; } .main_banner_area #banner .swiper-pagination { display: inline-block; width: auto; position: static; } .main_banner_area #banner .swiper-pagination-bullet { width:12px; height:12px; background: #fff; opacity: 1; margin: 0 6px; } .main_banner_area #banner .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: var(--color-base-main-dark); } /*バナー3種セット*/ #smallbanner2 .swiper-button-next, #smallbanner2 .swiper-button-prev, .main_banner_area .swiper-button-next, .main_banner_area .swiper-button-prev { position: static; margin: 0; } #smallbanner2 .swiper-button-next:after, #smallbanner2 .swiper-button-prev:after, .main_banner_area .swiper-button-next:after, .main_banner_area .swiper-button-prev:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 0px; font-size:30px; color: var(--color-base-text-light); } #smallbanner2 .swiper-button-prev:after, .main_banner_area .swiper-button-prev:after { content: "\e5cb"; } .main_banner_area .swiper-button-prev{ position: relative; left: -10px; } .main_banner_area .swiper-button-next{ position: relative; right: -10px; } /***mediumbanner****/ #mediumbanner{ display: none; } .main_banner_area .bnr_wrap #mediumbanner{ width:280px; height:420px; overflow: hidden; } .main_banner_area .bnr_wrap #mediumbanner ul li{ margin:0 0 20px; width:280px; height:200px; } .main_banner_area .bnr_wrap #mediumbanner ul li img{ width:100%; height:100%; object-fit:cover; /*上から表示して下をカットする場合 */ object-position: 50% 0;} /***smallbanner1　&　2***/ #smallbanner2, .main_banner_area #smallbanner1{ width: var(--inner-Width); max-width: var(--inner-Max-Width); min-width: var(--inner-Min-Width); margin: 18px auto 0; box-sizing: border-box; position:relative; } .pc .main_banner_area #smallbanner1 .swiper-wrapper{ justify-content:center; } #smallbanner2 .swiper-container, .main_banner_area #smallbanner1 .swiper-container { width: calc(100% + 8px); margin: 0 -4px; padding:4px 4px; overflow: hidden; box-sizing: border-box; margin-top:-4px; } .pc .main_banner_area #smallbanner1.one-slide ul, .pc .main_banner_area #smallbanner1.two-slide ul{ justify-content: center; } #smallbanner2 ul li, .main_banner_area #smallbanner1 ul li{ overflow: hidden; } .main_banner_area #smallbanner1.one-slide ul li{ width: auto!important; } #smallbanner2 ul li img, .main_banner_area #smallbanner1 ul li img{ width:100%; height:100%; object-fit:cover; /*上から表示して下をカットする場合 */ object-position: 50% 0; } #smallbanner2 .swiper-button-next, #smallbanner2 .swiper-button-prev, .main_banner_area #smallbanner1 .swiper-button-next, .main_banner_area #smallbanner1 .swiper-button-prev { position: absolute; top: 4px; width: 30px; height: 100%; margin-top: 0; } .main_banner_area #smallbanner1 ul li:nth-child(n + 3){ display:none; } .main_banner_area #smallbanner1 .swiper-button-next{ right: -40px; } .main_banner_area #smallbanner1 .swiper-button-prev{ left: -40px; } .main_banner_area #smallbanner1 .swiper-button-next.swiper-button-disabled, .main_banner_area #smallbanner1 .swiper-button-prev.swiper-button-disabled{ opacity: 0; } #smallbanner2 li, .main_banner_area #smallbanner1 li { border-radius: var(--box-radius-small); box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1); } /*******************************************/ .footer.shopsearch { background: #fff; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1); border-radius: var(--box-radius-small); width: var(--inner-Width); max-width: var(--inner-Max-Width); min-width: var(--inner-Min-Width); margin: 0 auto 40px; } .footer.shopsearch .footer_box{ } .footer.shopsearch h4 { font-family: var(--fontfamily-english); text-align: center; font-size: 30px; padding: 40px 0 20px; margin: 0 auto; } .footer.shopsearch h4 span{ position: relative; } .footer.shopsearch h4 span:before { content: ""; position: absolute; width: calc(100% + 12px); height: 10px; left: -6px; bottom: 3px; background: rgba(88, 78, 158, 0.1); background: linear-gradient(90deg, rgba(223, 39, 24, 0.1) 0%, rgba(88, 78, 158, 0.1) 100%); } .shop_catlist { box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1); border-radius: var(--box-radius-small); background: #fff; margin: 0 auto; } .shop_catlist .shoplist { padding: 0 20px 30px; } .shop_catlist h4 { font-family: var(--fontfamily-english); text-align: center; font-size: 30px; padding: 40px 0 20px; margin: 0 auto; } .shop_catlist h4 span{ position: relative; } .shop_catlist h4 span:before { content: ""; position: absolute; width: calc(100% + 12px); height: 10px; left: -6px; bottom: 3px; background: rgba(88, 78, 158, 0.1); background: linear-gradient(90deg, rgba(223, 39, 24, 0.1) 0%, rgba(88, 78, 158, 0.1) 100%); } .shop_catlist ul#this_cat_shoplist { text-align: center; display: flex; flex-wrap: wrap; justify-content: center; } .shop_catlist ul#this_cat_shoplist li { margin: 0 4px 8px; } .shop_catlist ul#this_cat_shoplist li a { padding: 6px 16px; border: 1px solid var(--color-base-line-dark); border-radius: var(--box-radius-small); display: inline-block; font-size: 14px; box-sizing: border-box; line-height: 1.4em; } .footer.shopsearch #cat_title_list { max-width: 960px; display: flex; justify-content: center; margin: 0 auto; padding: 4px 40px 10px; flex-wrap: wrap; } /*.footer.shopsearch #cat_title_list:before, .footer.shopsearch #cat_title_list:after { width: calc((100% + 20px) / 4 - 20px); margin: 0; display: block; content: ""; } .footer.shopsearch #cat_title_list:before { order: 1; }*/ .footer.shopsearch #cat_title_list .catttl { width: calc(100% / 3 - 20px); margin: 0 10px 20px; } .footer.shopsearch #cat_title_list .catttl a { display: block; width: 100%; height: 100%; font-size: 16px; border-radius: var(--box-radius-small); padding: 16px 25px 16px 10px; box-sizing: border-box; position: relative; text-align: center; font-weight: bold; border:1px solid var(--color-base-line-dark); } .footer.shopsearch #cat_title_list .catttl a:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; font-size: 30px; vertical-align: middle; position: absolute; top: calc(50% - 15px); line-height: 1em; font-weight: normal; right: 10px; color: var(--color-base-line-dark); } .view .table01 { border-collapse: collapse; width: 100%; border: 1px solid var(--color-base-line-dark); } .view .table01 tr { border-bottom: 1px solid var(--color-base-line-dark); } /* .view .table01 tr:last-of-type { border-bottom: none; }*/ .view .table01 th { text-align: center; font-weight: bold; border-right: 1px solid var(--color-base-line-dark); width: 24%; } .view .table01 th, .view .table01 td { padding: 10px 16px; } .sidemenu { padding: 20px 20px 4px; border: 1px solid var(--color-base-line-dark); } .sidemenu dt { font-family: var(--fontfamily-english); font-size: 20px; text-align: center; padding: 0 0 10px; border-bottom: 1px solid var(--color-base-line-dark); } .sidemenu dd > a{ border-bottom: 4px solid var(--color-base-bg-light); } .sidemenu dd a:last-child{ border-bottom: none; } .sidemenu dd > a { display: block; padding: 16px 10px; font-weight: bold; position: relative; line-height: 1.6em; } .sidemenu dd > a:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; font-weight: normal; font-size: 24px; vertical-align: middle; position: absolute; right: 0; top: calc(50% - 12px); color: var(--color-base-line-dark); } .sidemenu dd ul { font-size: 90%; } .sidemenu dd ul li a { padding: 10px; line-height: 1.5em; display: block; background: var(--color-base-bg-light); margin-top: 2px; } .sidemenu dd ul li:first-child a { margin-top: -2px; } .sidemenu dd:last-child ul li:last-child { margin-bottom: 10px; } .sidemenu span.num { font-family: var(--fontfamily-english); letter-spacing: 0.1em; } #sub #sub-navi01 dl dd dl dt { background: var(--color-base-bg-light); color: var(--color-base-accent-dark); border: none; border-radius: 0px; 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 solid var(--color-base-line-dark); } #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:after { content: ""; display: block; position: absolute; top: 38%; width: 0; height: 0; border: 5px solid transparent; left: 98%; border-left: 6px solid var(--color-base-accent-dark); } #sub #sub-navi01.sub_lsit { margin: 0 0 32px; } #sub #sub-navi01.sub_lsit dl dt a { position: relative; padding: 10px; background: var(--color-base-bg-light); border-radius: 0px; display: block; text-decoration: none; text-align: center; color: var(--color-base-accent-dark); } #sub #sub-navi01.sub_lsit dl dt a:before { content: ""; display: inline-block; border: 5px solid transparent; border-left-color: var(--color-base-accent-dark); left: 90%; position: absolute; top: 15px; } #sub #sub-navi01.sub_lsit dl dd dl dt { padding: 0; } #sub #sub-navi01.sub_lsit dl dd.box dl dd { padding: 0; } #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 dt, #sub #sub-navi01.sub_lsit dl dd.box dd, #sub #sub-navi01.sub_lsit dl dd.box li { font-size: small; } #sub #sub-navi01.sub_lsit dl dd.box a { line-height: 1.5; } #sub #sub-navi01 dl dl dt:hover a, #sub #sub-navi01.sub_lsit dl dl dt:hover a { background: var(--color-base-accent-dark); 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 dl dl li, #sub #sub-navi01.sub_lsit dl dd.box dl dd { border-bottom: 1px solid var(--color-base-line-dark); font-size: 14px; } #sub #sub-navi01 dl dd.box dl dd a:hover { background: var(--color-base-bg-light); } #sub .sc_facility dl { margin: 24px 0 12px; background: var(--color-base-bg-light); box-sizing: border-box; padding: 12px; } #sub .sc_facility #sc_map { height: 190px; width: 100%; margin: 10px 0 4px; background: var(--color-base-bg-light); border: 4px solid #fff; box-sizing: border-box; } #sub .sc_facility #sc_map .sc_point { color: #0099ff; font-weight: bold; } #sub .sc_facility #sc_map iframe { width: 100%; height: 100%; border: 0; } #sub .sc_facility dt { margin: 4px 0 0; text-align: center; 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; } #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: var(--box-radius-small); position: relative; } #sub .sc_facility dd a.access_link:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; font-weight: normal; font-size: 24px; vertical-align: middle; position: absolute; right: 8px; color: var(--color-base-line-dark); } #sub #sub-navi02 { margin-bottom: 16px; } #sub #sub-navi02 ul { border: 1px solid #aaa; border-radius: 0px; 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 var(--color-base-accent-dark); } #sub #sub-navi02 ul li.cal .fa { color: var(--color-base-accent-dark); 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 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 .bnr-sns li.bnr_fb a { background: #5890ff; } #sub .bnr-sns li.bnr_tw a { background: #00acee; } #sub .bnr-sns li.bnr_inst a { background: #E54060; } #sub .bnr-sns li.bnr_line a { background: #06C755; } #sub #banner_mini ul { border: 1px solid #aaa; padding: 16px; border-radius: 0px; 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: var(--fontfamily-icon); content: "\e147"; display: inline-block; padding-left: 5px; } .sidemenu .side_shoplist dt.up:after { font-family: var(--fontfamily-icon); content: "\e5c9"; } .sidemenu .side_shoplist dd ul li a::before { font-family: var(--fontfamily-icon); content: "\e5e1"; margin: 0 0 0 4px; color: var(--color-base-accent-dark); vertical-align: middle; } .tag_list { padding: 0 20px 40px; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; } .tag_list_name { margin: 0 12px 8px; } .tag_list_name a { background: #fff; display: block; font-size: 14px; border-bottom:1px solid var(--color-base-text-light); padding: 4px 6px 5px 2px; box-sizing: border-box; } .tag_list_name a:before { content: "#"; margin: 0 6px 0 0; color: var(--color-base-accent-dark); font-family: var(--fontfamily-english); font-size: 25px; vertical-align: bottom; display: inline-block; } #h4_shopsearch_mdcat { text-align: center; font-size: 22px; padding: 20px 0 18px; } #h4_shopsearch_mdcat:before { font-family: var(--fontfamily-icon); content: "\e065"; margin: 0 10px 0 0; vertical-align: middle; } .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: 0px; border: 4px solid var(--color-base-bg-light); background: #fff; } .item .social { margin: 0 auto; box-sizing: border-box; padding: 20px 0; text-align: center; } .item .social:before { font-family: var(--fontfamily-english); font-size: 22px; color: #000; content: "Share on"; margin-bottom: 12px; display: block; } .item .social a { display: inline-block; overflow: hidden; width: 40px; height: 40px; margin: 0 10px; text-indent: -999999em; } .item .social .twitter { background: url(../img/ico_x.png) no-repeat; background-size: cover; } .item .social .fb { background: url(../img/ico_fb.png) no-repeat; background-size: cover; } .item .social .line { background: url(../img/ico_line.png) no-repeat; background-size: cover; } .goods_like_btn { background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; } .goods_like_btn p { display: inline-block; background: var(--color-base-main-light); border-radius: var(--box-radius-small); padding: 10px; text-align: center; width: 50px; height: 50px; font-family: var(--fontfamily-english); } .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: var(--color-base-accent-dark); } .goods_like_btn .fa-heart { color: var(--color-base-accent-dark); } .goods_like_btn.mini { position: absolute; bottom: 28px; left: 200px; position: static; margin: 5px 0; display: block; position: absolute; bottom: 16px; } .goods_like_btn.mini p { display: inline-block; padding: 6px 20px 4px; text-align: center; width: auto; height: auto; font-size: 0.8em; line-height: 1em; color: var(--color-goodslike); } .goods_like_btn.mini p i { display: inline-block; font-size: 1.4em; color: var(--color-base-accent-dark); vertical-align: middle; } .goods_like_btn.mini p span { display: inline-block; font-size: 1.2em; line-height: 1.2em; font-weight:normal; font-family: var(--fontfamily-english); color: var(--color-base-text-dark); padding: 0 0 0 0.2em; /* color: #000; border: 1px solid var(--color-base-accent-dark); border-radius: 2px; padding: 0px 10px 2px; position: relative; font-family: var(--fontfamily-english); */ vertical-align: middle; } /* .goods_like_btn.mini p span:before { content: ""; position: absolute; width: 4px; height: 4px; background: #fff; border-left: 1px solid var(--color-base-accent-dark); border-bottom: 1px solid var(--color-base-accent-dark); -webkit-transform: rotate(45deg); transform: rotate(45deg); left: -3px; top: 6px; } */ /*いいねボタンのハート指定(googlegont)*/ .goods_like_btn.mini p i.off:before{ font-family: var(--fontfamily-icon); content: "\e87d"; color: var(--color-goodslike); vertical-align: middle; display: inline-block; font-style: normal; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48 } .goods_like_btn.mini p i.on:before{ font-family: var(--fontfamily-icon); content: "\e87d"; color: var(--color-goodslike); vertical-align: middle; display: inline-block; font-style: normal; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48 } /* --------------------------------------------- ショップページ（kgm共通）bodyは記述しない --------------------------------------------- */ /*ショップページ＆各item_****.jspのヘッダー部分共通*/ /*--shop_header*--*/ .shop_header { position: relative; } .shop_header .inner { background: #fff; margin: 20px auto 0; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1); border-radius: var(--box-radius-small); overflow: hidden;} .shop_header #shop_title { position: relative; padding: 20px 30px 18px 40px; box-sizing: border-box; /* display: flex; justify-content: space-between; */ } .shop_header .inner #shop_title .bg_shop_image { position: absolute; right: 0; top: 0; display: block; width: 38%; 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: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 16%, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#00ffffff", GradientType=1); } .pc .shop_header #shop_title{ min-height: 200px; } .shop_header #shop_title .shop_name { width: 60%; z-index: 10; position: relative; } .shop_header #shop_title .top_logo { margin: 20px 0 0; /* display: flex; align-items: center; */ } .shop_header #shop_title .category_detail{ display: inline-block; padding: 5px 8px 6px; font-size: 12px; line-height: 1.2em; background: var(--color-base-text-light); color: #fff; } .shop_header #shop_title h2 { font-size: 24px; font-weight: bold; line-height: 30px; /*共通スタイルを無効か*/ padding: 0; border: none; margin: 15px 0 0; text-align: left; background: none; } .shop_header #shop_title .top_logo img { max-height: 60px; } .shop_header .shopmenu { position: absolute; right: 40px; bottom: 10px; z-index: 10; } .shop_header .shopmenu li { display: inline-block; margin: 0 2px; } .shop_header .shopmenu li a { background:var(--color-base-text-light); display: block; box-sizing: border-box; width: 80px; height: 100px; color: #fff; text-align: center; padding: 22px 0 0; font-size: 12px; line-height: 140%; border-radius: var(--box-radius-small); } .shop_header .shopmenu li a:hover { text-decoration: none; } .shop_header .shopmenu li a:after { font-family: var(--fontfamily-icon); content: "\e5cf"; vertical-align: middle; font-size: 30px; line-height: 1em; } .shop_header .shopmenu li a span { display: block; } .shop_header #shop_status { min-height: 100px; } .shop_header #shop_status { border-top:1px solid var(--color-base-line-middark); } .shop_header #shop_status .eigyouhour, .shop_header #shop_status .tel_floor{ min-height: 50px; box-sizing: border-box; } .shop_header #shop_status .eigyouhour, .shop_header #shop_status .tel_floor p{ position: relative; } .shop_header #shop_status .eigyouhour{ border-bottom:1px solid var(--color-base-line-middark); } .shop_header #shop_status .eigyouhour p, .shop_header #shop_status .tel_floor p{ padding: 12px 0 12px 78px; } .shop_header #shop_status .tel_floor { display: flex; } .shop_header #shop_status .tel_floor .tel{ width:30%; } .shop_header #shop_status .tel_floor .floor a{ margin-left: 16px; } .shop_header #shop_status .tel_floor .floor a span{ font-family: var(--fontfamily-english); font-size: 16px; color: var(--color-base-accent-dark); text-decoration: underline; } .shop_header #shop_status .tel_floor .floor a::after { font-family: var(--fontfamily-icon); color: var(--color-base-accent-dark); content: "\e5cc"; margin: 0; vertical-align: middle; font-size: 24px; position: relative; top: -1px; } .pc .shop_header #shop_status .eigyouhour p.hour{ padding-right: 230px; } .shop_header #shop_status .eigyouhour p.hour:before, .shop_header #shop_status .tel_floor p.tel:before, .shop_header #shop_status .tel_floor p.floor:before{ font-family: var(--fontfamily-icon); font-variation-settings: 'FILL' 0; font-size: 24px; vertical-align: bottom; width: 60px; margin-right: 18px; display: inline-block; text-align: center; position: absolute; left: 0; } .shop_header #shop_status .eigyouhour p.hour:before{ content: "\e8b5"; padding-right: 5px; } .shop_header #shop_status .tel_floor p.tel:before{ content: "\e0b0"; } .shop_header #shop_status .tel_floor p.floor:before{ content: "\e55e"; } .shop_header #shop_status p:after{ content: ""; width: 1px; height: 100%; top: 0; left:60px; display: block; background: var(--color-base-line-middark); position: absolute; } /*個別ニュース、クーポン、リクルート　ページのヘッダーを調整*/ body.item_recruit .shop_header #shop_title, body.item_coupon .shop_header #shop_title, body.item_news .shop_header #shop_title { min-height: 180px; } body.item_recruit .shop_header #shop_title .top_logo, body.item_coupon .shop_header #shop_title .top_logo, body.item_news .shop_header #shop_title .top_logo{ align-items: stretch; } 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: 20px; top: 100px; transform: scale(0.9); } body.item_recruit .shop_header .inner, body.item_coupon .shop_header .inner, body.item_news .shop_header .inner { margin: 20px auto 30px; } /*--shop_header*--*/ #shoppage { width: var(--inner-Width); max-width: var(--inner-Max-Width); min-width: var(--inner-Min-Width); box-sizing: border-box; margin: 30px auto 50px; padding: 36px 0 80px; background: #fff;} /*body.bf1 .*/ .view #shoppage #shop_info {} .view #shoppage #shop_info > .section.inner{ width: 88%; max-width: var(--inner-Min-Width); min-width: auto; padding: 40px 40px 0; margin-top: 14px; border: 1px solid var(--color-base-line-dark); border-bottom: none; box-sizing: border-box; } #shoppage #shop_info .intro { padding:0 0 20px; overflow: hidden; } #shoppage #shop_info .desc { font-size: 1.1em; line-height: 1.5em; margin: 0 0 5px 5px; width: calc(60% - 50px); } #shoppage #shop_info .desc h4 { font-weight: bold; margin: 2px 0 15px; font-size: 18px; } #shoppage #shop_info .desc p { white-space:pre-wrap; line-height: 1.8em; font-size: 14px; } #shoppage #shop_info .image { float: right; width: 40%; /* margin: 0 0 0 36px; */ box-sizing: border-box; } #shoppage #shop_info .image img { border-radius: 0px; width: 100%; } #shoppage #shop_info .mewe_pointcard{ background: var(--color-base-sub1-light); margin: 0 0 20px; padding: 24px 24px 20px; display: flex; } #shoppage #shop_info .mewe_pointcard h5 a{ width: 270px; color:var(--color-base-pointcard); font-weight: bold; font-size: 16px; text-align: center; display: block; } #shoppage #shop_info .mewe_pointcard h5 a:before{ content: ""; width: 100%; height: 48px; margin: 0 auto 6px; background: url("../img/fig_shopinfo_pointcard_logo.png") no-repeat center top; background-size: auto 48px; display: block; } #shoppage #shop_info .mewe_pointcard pre{ width: calc(100% - 270px); } #shoppage #shop_info .pickup{ margin:0 0 30px; padding:0; border: 1px solid var(--color-base-line-dark); } #shoppage #shop_info .pickup div { padding: 12px 12px 12px 72px; border-bottom: 1px solid var(--color-base-line-dark); overflow: hidden; } #shoppage #shop_info .pickup div:last-of-type{ border-bottom: none; } #shoppage #shop_info .pickup h5{ float: left; text-align: center; display: block; width: 54px; position: absolute; left: 0; } #shoppage #shop_info .pickup h5 span { display: none; } #shoppage #shop_info .pickup h5:before { font-family: var(--fontfamily-icon); margin: 0; font-size: 24px; vertical-align: bottom; } #shoppage #shop_info .pickup > div{ position: relative; } #shoppage #shop_info .pickup > div:after{ content: ""; width: 1px; height: 100%; top: 0; left: 54px; display: block; background: var(--color-base-line-middark); position: absolute; } #shoppage #shop_info .pickup .shop-eigyouhour h5:before{ content: "\e8b5"; } #shoppage #shop_info .pickup .shop-tel h5:before{ content: "\e0b0"; } #shoppage #shop_info .pickup .shop-pointcard h5:before{ content: "\e06d"; } #shoppage #shop_info .pickup .shop-pointcard p:before{ content: ""; width: 38px; height: 24px; display: inline-block; background: url("../img/fig_shopinfo_pointcard.png") no-repeat; background-size: contain; vertical-align: bottom; margin-right: 10px; } #shoppage #shop_info .pickup .shop-pointcard.no_pointcard p:before{ background: none; font-family: var(--fontfamily-icon); font-size: 28px; font-weight: normal; content: "\e5cd"; color: var(--color-base-line-middark); width: 20px; vertical-align: middle; } #shoppage #shop_info .pickup .shop-ticketservice h5:before{ content: "\e53f"; } #shoppage #shop_info .pickup .shop-ticketservice p strong{ font-weight: bold; color: var(--color-base-sub1-dark); display: block; font-size: 12px; } #shoppage #shop_info .pickup .shop-tokuten h5:before{ content:"\ef91"; } #shoppage #shop_info .pickup p { /* float: left;*/ white-space: pre-wrap; font-size:14px; } /*WEB予約ボタン*/ #shoppage #shop_info .shopBooking-wrapper{ margin: 0 0 30px; text-align: center; } #shoppage #shop_info .shopBooking { text-align: center; margin: 18px 0; } #shoppage #shop_info .shopBooking:first-of-type { margin-top: 30px; } #shoppage #shop_info .shopBooking:last-of-type { margin-bottom: 36px; } #shoppage #shop_info .shopBooking__btn { display: inline-block; color: #fff; font-weight: bold; width: calc(100% / 2 - 50px); border-radius: var(--box-radius-small); padding: 16px 10px 18px; position: relative; margin: 0 5px; background: var(--color-base-accent-dark); line-height: 1.0em; } #shoppage #shop_info .shopBooking__btn:after{ font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; position: absolute; right: 10px; top: calc(50% - 8px); font-size: 24px; font-weight:normal; } #shoppage #shop_info .shopBooking__btn i { margin: 0 8px; font-size: 20px; vertical-align: text-bottom; } #shoppage #shop_info .shopBooking__btn i[class*='calendar'] { color: var(--color-base-line-dark); } #shoppage #shop_info .shopBooking__btn:hover i[class*='calendar'] { color: #fff; } /*WEB予約ボタン｜サイト名出す*/ #shoppage #shop_info .shopBooking__btn[href*="gnavi"] .brandsArea::after {content: "(ぐるなび)";} #shoppage #shop_info .shopBooking__btn[href*="tabelog"] .brandsArea::after {content: "(食べログ)";} #shoppage #shop_info .shopBooking__btn[href*="loco"] .brandsArea::after {content: "(Yahoo!ロコ)";} #shoppage #shop_info .shopBooking__btn[href*="ikyu"] .brandsArea::after {content: "(一休.comレストラン)";} #shoppage #shop_info .shopBooking__btn[href*="epark"] .brandsArea::after {content: "(EPARK)";} #shoppage #shop_info .shopBooking__btn[href*="hotpepper"] .brandsArea::after {content: "(ホットペッパー)";} #shoppage #shop_info .shopBooking__btn[href*="favy"] .brandsArea::after {content: "(favy)";} #shoppage #shop_info .shopBooking__btn[href*="toreta"] .brandsArea::after {content: "(トレタ)";} #shoppage #shop_info .shopBooking__btn[href*="ozmall"] .brandsArea::after {content: "(オズモール)";} #shoppage #shop_info .shopBooking__btn[href*="retty"] .brandsArea::after {content: "(Retty)";} #shoppage #shop_info .shopBooking__btn[href*="luxa"] .brandsArea::after {content: "(LUXA)";} #shoppage #shop_info .shopBooking__btn[href*="hitorsara"] .brandsArea::after {content: "(ヒトサラ)"; } #shoppage #shop_info .data { clear: both; padding: 0; margin: 0 -40px;} #shoppage #shop_info .data table.table01{ border-left: none; border-right: none; } #shoppage #shop_info table.table01 th, #shoppage #shop_info table.table01 td { padding: 20px 30px; } #shoppage #shop_info .data table.table01 tr.shop-generic1 td, #shoppage #shop_info .data table.table01 tr.shop-generic5 td, #shoppage #shop_info .data table.table01 tr.shop-gourmet2 td{ display: flex; flex-wrap: wrap; gap: 8px; } #shoppage #shop_info .data table.table01 td em { width: calc((100% - 32px) / 5); display: inline-block; box-sizing: border-box; line-height: 1.2em; font-size: 12px; font-weight: bold; padding: 8px 4px; text-align: center; vertical-align: middle; border-radius: var(--box-radius-small); background: var(--color-base-sub1-light); } @media screen and (max-width: 1150px) { #shoppage #shop_info .data table.table01 td em { letter-spacing: -0.03em; font-size: 11px;} } .pc #shoppage #shop_info .data table.table01 td em:nth-child(5n){ margin-right: 0; } #shoppage #shop_info .data table.table01 tr.shop-generic5 td em{ background: var(--color-base-sub2-light); } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 td em{ background: var(--color-base-accent-light); } #shoppage #shop_info .data table.table01 td em.payment_taxfree{ /* background: var(--color-base-accent-light); color: #d00;*/ } #shoppage #shop_info .data table.table01 tr.shop-generic1 .paymentlink{ display: block; width: 100%; a{ padding: 6px 20px 6px 15px; margin-top: 5px; border: 1px solid var(--color-base-line-dark); border-radius: var(--box-radius-small); display: inline-block; font-size: 14px; box-sizing: border-box; line-height: 1.4em; position: relative; } a:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0; vertical-align: middle; position: absolute; top: calc(50% - 11px); right: 0; line-height: 1em; font-size: 24px; } } #shoppage #shop_info .data table.table01 tr.shop-generic1 .paymentlink.cashonly{display: none;} #shoppage #shop_info .data table.table01 td p.payment_other, #shoppage #shop_info .data table.table01 td p.service_other, #shoppage #shop_info .data table.table01 td p.kids_service{ width: 100%; } #shoppage #shop_info .data table.table01 td p.payment_other span, #shoppage #shop_info .data table.table01 td p.service_other span, #shoppage #shop_info .data table.table01 td p.kids_service span{ font-weight: bold; } #shoppage #shop_info .data table.table01 td p.payment_other span:before, #shoppage #shop_info .data table.table01 td p.service_other span:before, #shoppage #shop_info .data table.table01 td p.kids_service span:before{ font-family: var(--fontfamily-icon); font-variation-settings: var(--iconfont-FILL1-set); content: "\ef4a"; font-weight: normal; margin: 0 4px 0 0; line-height: 1.0em; color: var(--color-base-sub1-dark); font-size: 0.8em; } .pc #shoppage #shop_info .data table.table01 td p.payment_other span:after, .pc #shoppage #shop_info .data table.table01 td p.service_other span:after, .pc #shoppage #shop_info .data table.table01 td p.kids_service span:after{ font-family: var(--fontfamily-icon); content: "\f755"; line-height: 1.0em; font-size: 1.2em; vertical-align: middle; } #shoppage #shop_info .data table.table01 td em[class*="payment"]:before, #shoppage #shop_info .data table.table01 td em[class*="kids"]:before, #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em:before{ font-family: var(--fontfamily-icon); font-size: 28px; font-weight: normal; margin: 0 0 1px 0; display: block; line-height: 1.0em; color: var(--color-base-sub1-dark); } /* #shoppage #shop_info .data table.table01 td em.payment_taxfree:before{ color: #d00; } */ #shoppage #shop_info .data table.table01 td em[class*="kids"]:before, #shoppage #shop_info .data table.table01 td p.kids_service span:before{ color: var(--color-base-sub2-dark); } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 td em:before, #shoppage #shop_info .data table.table01 td p.service_other span:before{ color: var(--color-base-accent-dark); } #shoppage #shop_info .data table.table01 td em.payment1:before{content: "\e870";} #shoppage #shop_info .data table.table01 td em.payment2:before{content: "\ef63";} #shoppage #shop_info .data table.table01 td em.payment3:before{content: "\e570";} #shoppage #shop_info .data table.table01 td em.payment4:before{content: "\ef6b";} #shoppage #shop_info .data table.table01 td em.payment_taxfree:before{content: "\eafb";/*color: #d00;*/} #shoppage #shop_info .data table.table01 tr em.kids1:before{content: "\ef7b";font-variation-settings:var(--iconfont-FILL1-set);} #shoppage #shop_info .data table.table01 tr em.kids2:before{content: "\f06c";} #shoppage #shop_info .data table.table01 tr em.kids3:before{content: "\f527";} #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service1:before{content: "\ef30";} #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service2:before{content: "\f29a";} #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service3:before{content: "\ea65";} #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service4:before{content: "\effd";} #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service5:before{content: "\ef34";} #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service6:before{content: "\e0b0";} #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service7:before{content: "\f313";} #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service8:before{content: "\f1f3";} #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service9:before{content: "\eb4a";} #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.servicea:before{content: "\f157";} #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.serviceb:before{content: "\e556";} #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.servicec:before{content: "\e51c";} #shoppage #shop_info .data table.table01 td span.attention { display: block; font-size: 12px; width: 100%; line-height: 1.0em; margin-top: 5px; } #shoppage #shop_info .data table.table01 tr.shop-generic9 .sdgs-shop-image_icons { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin-top: 10px; li{ width: auto; img { display: block; width: 100%; height: auto; } } } /*white-space: preのオプション*/ .shop-eigyouhour td p, .shop-tokuten td p { white-space: pre-wrap; } #shoppage #shop_info table.table01 th { vertical-align: middle; font-weight: bold; width: 24%; } #shoppage #shop_info table.table01 tr.shop-map td { font-weight:bold; font-size:1.1em; } #shoppage #shop_info table.table01 tr.shop-map td a { font-family: var(--fontfamily-english); display: inline-block; padding: 8px 22px 8px 12px; margin-left: 24px; font-size: 16px; font-weight: normal; border-radius: var(--box-radius-small); line-height: 1em; background: var(--color-base-text-light); color: #fff; position: relative; } #shoppage #shop_info table.table01 tr.shop-map td a::after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0; color: #fff; vertical-align: middle; position: absolute; top: calc(50% - 12px); right: 0; line-height: 1em; font-size: 24px; } #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: 12px; } #shoppage #shop_info table.table01 tr.shop-shopurl td a { border-bottom: 1px solid var(--color-base-text-dark); word-break: break-all; } #shoppage #shop_info table.table01 tr.shop-shopurl td p:after{ font-family: var(--fontfamily-icon); content: "\e89e"; margin: 0 0 0 4px; vertical-align: top; position: relative; top: 3px; } #shoppage #shop_info table.table01 tr.shop-otherurl td p { width: calc(100% / 3 - 10px); display: inline-block; box-sizing: border-box; margin-right: 10px; } #shoppage #shop_info table.table01 tr.shop-otherurl td p:last-of-type{ margin-right: 0; } #shoppage #shop_info table.table01 tr.shop-otherurl td p a { display: block; padding: 6px 18px 6px 10px; text-align: center; width: 100%; box-sizing: border-box; border-radius: var(--box-radius-small); position: relative; background: var(--color-base-accent-dark); font-family: var(--fontfamily-english); color: #fff; font-size: 16px; } #shoppage #shop_info table.table01 tr.shop-otherurl td p a i { font-size: 20px; margin: 0 10px 0 4px; font-weight: normal; vertical-align: top; } #shoppage #shop_info table.table01 tr.shop-otherurl td p a:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; color: #fff; position: absolute; right: 10px; top: calc(50% - 11px); font-size: 24px; } #shoppage #shop_info table.table01 tr.shop-otherurl td p.shop-url a { background: var(--color-base-text-dark); color: #fff; } #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a:before{content: "公式SNS";} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="facebook"]{background: #5890ff; color: #fff;} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="facebook"]:before{content: "Facebook";} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="instagram"]{background-image: linear-gradient(-135deg, #1400c8, #b900b4, #f50000); color: #fff;} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="instagram"]:before{content: "instagram";} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="twitter"], #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="https://x.com/"]{background: #000; color: #fff;} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="twitter"]:before, #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="https://x.com/"]:before{content: "X";} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="youtube"]{background: #d00; color: #fff;} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="youtube"]:before{content: "YouTube";} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="lin.ee"], #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="line."]{background: #06c755; color: #fff;} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="lin.ee"]:before, #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="line."]:before{content: "LINE";} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="tiktok"]{background: #000; color: #fff; border-right: #25f4ee 2px solid; border-left: #fe2c55 2px solid;} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="tiktok"]:before{content: "TikTok";} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="bsky"]{background: #0085ff; color: #fff;} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="bsky"]:before{content: "Bluesky";} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="blog"]:before{content: "公式ブログ";} #shoppage #shop_info .data .shop-generic2 {} #shoppage #shop_info .data table.table01 .shop-generic2 td em{ display: block; } #shoppage #shop_info .data .shop-generic2 td .payment1, #shoppage #shop_info .data .shop-generic2 td .payment4, #shoppage #shop_info .data .shop-generic2 td .payment5, #shoppage #shop_info .data .shop-generic2 td .payment6{color:#d00;} #shoppage #shop_info .data .shop-generic2 td .payment1:before, #shoppage #shop_info .data .shop-generic2 td .payment4:before, #shoppage #shop_info .data .shop-generic2 td .payment5:before, #shoppage #shop_info .data .shop-generic2 td .payment6:before{ font-family: var(--fontfamily-icon); font-weight: normal; content: "\e14b"; font-size: 18px; vertical-align: middle; margin: 0 3px 0 0; } #shoppage #shop_info .data .shop-generic2 td .payment2:before, #shoppage #shop_info .data .shop-generic2 td .payment3:before{ content:""; background-size: cover; display: inline-block; width:40px; height:40px; margin-right:5px; vertical-align: middle; } /*shopinfo ここまで*/ /*店舗写真*/ #shoppage h3.h3__shopCommon.in{ margin: 34px 0 0; background: none; border: none; padding: 0; text-align: center; } .bf1 .shop_photobox{ width: 88%; max-width: var(--inner-Min-Width); margin-top: 14px; border: 1px solid var(--color-base-line-dark); box-sizing: border-box; height: 325px; } .bf1 .photobox__container{ height: 100%; overflow-x: auto; overflow-y: hidden; padding: 36px 0; box-sizing: border-box; } .bf1 .photobox__container::-webkit-scrollbar { height: 8px; } .bf1 .photobox__container::-webkit-scrollbar-thumb { background: var(--color-base-line-dark); border-radius: 0; } .bf1 .photobox__container::-webkit-scrollbar-track { background: var(--color-base-bg-light); } .bf1 .photobox__wrapper{ height: 100%; white-space: nowrap; text-align: center; } .bf1 .shop_photobox .photobox__item{ display: inline-block; height: 100%; margin: 0 5px; } .bf1 .shop_photobox .photobox__item:first-of-type{ margin-left: 40px; } .bf1 .shop_photobox .photobox__item:last-of-type{ margin-right: 40px; } .bf1 .shop_photobox .photobox__item img{ height: 100%; width: auto; } .bf1 .photobox_prevBtn, .bf1 .photobox_nextBtn{ position: absolute; display: block; width: 40px; height: 100%; background: #333; opacity: .8; top: 0; z-index: 9; cursor: pointer; } .bf1 .photobox_prevBtn .fas, .bf1 .photobox_nextBtn .fas{ color: #fff; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; width: 10px; height: 1em; font-size: 21px; } .bf1 .photobox_prevBtn{ left: 0; } .bf1 .photobox_nextBtn{ right: 0; } /*店舗写真ここまで*/ /*ショップ以外4施設フロアボタン非表示*/ .shop_header{ #shop_title_box[data-shopid="6001"], #shop_title_box[data-shopid="7001"], #shop_title_box[data-shopid="8001"], #shop_title_box[data-shopid="8002"]{ #shop_status .tel_floor .floor a{display: none;} } } /*ショップ以外4施設フロアボタン非表示*/ #shoppage{ #shop_info[data-shopid="6001"], #shop_info[data-shopid="7001"], #shop_info[data-shopid="8001"], #shop_info[data-shopid="8002"]{ table.table01 tr.shop-map td a{display: none;} } } .cat_items { margin: 16px 0 36px; } .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, .view #shop_info h3{ background: none; border: none; margin: 0; padding: 0; text-align: center; } #contents-main article.main.item h3{ } #cat1_view h3 span, #cat3_view h3 span, #contents-main article.main.item h3 span, .view #shop_info h3 span, .view h3.h3__shopCommon.in span{ text-align: left; margin-left: -14px; display: inline-block; font-weight: normal; font-size: 14px; position: relative; } #cat1_view h3 span:before, #cat3_view h3 span:before, #contents-main article.main.item h3 span:before, .view #shop_info h3 span:before, .view h3.h3__shopCommon.in span:before{ content: ""; position: absolute; width: calc(100% + 4px); height: 10px; left: -2px; bottom: 2px; background: rgba(88, 78, 158, 0.1); background: linear-gradient(90deg, rgba(223, 39, 24, 0.1) 0%, rgba(88, 78, 158, 0.1) 100%); } #cat1_view h3 span em, #cat3_view h3 span em, #contents-main article.main.item h3 span em, .view #shop_info h3 span em, .view h3.h3__shopCommon.in span em{ font-family: var(--fontfamily-english); font-size: 30px; position: relative; text-align: left; margin-right: 10px; } /* #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: var(--fontfamily-english); font-size: 22px; font-weight: bold; } */ /* 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; width: var(--inner-Min-Width); margin: 0 auto 30px; } #cat5_view h3 { width: 234px; border: 0; padding: 0; margin: 0; background: none; text-align: left; position: relative; padding-left: 54px; line-height: 1em; font-weight: normal; font-size: 14px; } #cat5_view h3 span.icn_now{ font-family: var(--fontfamily-english); position: absolute; margin: 0; text-align: center; color: #fff; padding: 12px 0 0; font-size: 16px; border-radius: 50%; background: var(--color-base-accent-dark); width: 40px; height: 40px; box-sizing: border-box; letter-spacing: 0.05em; animation: like_anime 4s ease infinite; line-height: 1em; display: block; top: 0; left: 0; } #cat5_view h3 span.cat5_view_today{ font-family: var(--fontfamily-english); font-weight: normal; font-size: 26px; position: relative; } .pc #cat5_view h3 span.cat5_view_today:before { content: ""; position: absolute; width: 100%; height: 10px; left: 0; bottom: -24px; background: rgba(88, 78, 158, 0.1); background: linear-gradient(90deg, rgba(223, 39, 24, 0.1) 0%, rgba(88, 78, 158, 0.1) 100%); } #cat5_view h3 em{ display: block; margin-top: 8px; } #cat5_view article.item { width: calc( 100% - 215px); position: relative; } #cat5_view article.item h4 { flex-shrink: 0; border: 2px solid var(--color-base-line-light); border-radius: 0 var(--box-radius-xlarge) 0 var(--box-radius-xlarge) / 0 var(--box-radius-xlarge) 0 var(--box-radius-xlarge); box-sizing: border-box; position: relative; padding: 12px 20px 16px; } #cat5_view article.item h4 .item_main { font-weight: bold; } #cat5_view article.item .sendtime{ color: var(--color-base-accent-dark); display: block; padding: 0; font-size: 12px; font-weight: bold; } #cat5_view article.item .sendtime:before { content: "\e8b5"; width: 20px; height: 20px; display: inline-block; vertical-align: top; position: relative; top: 1px; left: 0; font-family: var(--fontfamily-icon); font-size: 20px; font-weight: normal; } /**/ #cat1_view { overflow: hidden; margin: 0 0 60px; } .bf1 #cat1_view > .inner { width: 88%; max-width: var(--inner-Min-Width); min-width: auto; } .item_coupon #cat1_view > .inner{ width: 100%; } #cat1_view article.item { width: calc((100% - 20px) / 2); float: left; margin: 25px 0px 0; padding: 0; box-sizing: border-box; position: relative; height: auto; } .pc #cat1_view article.item:nth-child(odd){ margin-right: 20px; } .cat_items article.item .image, .bf5 article.item .image { height: 240px; width: 180px; text-align: center; position: relative; box-sizing: border-box; } .cat_items article.item .image { float: left; margin: 0 20px 0 0; } .cat_items article.item.cat3 .image, .bf5 article.item .image { position: absolute; width: 240px; height: 100%; top: 0; right: 0; margin: 0; } .cat_items article.item.cat3 .image img, .bf5 article.item .image img{ border: none; } .cat_items article.item .image a { color: var(--color-base-accent-dark); } .cat_items article.item .image img, .bf5 article.item .image img { height: 100%; box-sizing: border-box; max-width: none; } .cat_items article.item .item_image_noimg { background-size: 70%; position: relative; border: 1px solid var(--color-base-line-light); } .cat_items article.item .item_image_noimg img { position: absolute; width: 70%; height: auto; margin: auto; left: 0; right: 0; bottom: 0; top: 0; border: none;} .item_coupon #cat1_view{ background: #fff; padding: 40px 6%; } .item_coupon #cat1_view h3, .item_coupon #cat1_view h3 span{ margin: 0; padding: 0; } /*各ニュース・クーポン・求人情報にショップ名読込⇒標準で非表示*/ 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; margin-top:5px; } .cat_items article.item .desc h4 a { font-weight: bold; font-size: 16px; } .cat_items article.item.cat2 .desc h4 a { display: block; } .cat_items article.item .desc .price { 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: 14px; font-family: var(--fontfamily-english); color:var(--color-base-text-light); line-height: 1em; margin: 0.5em 0 1em; } /* @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 .desc h4 a, #cat1_view article.item.sale .price { color: #d00; } /*****もっと見るボタン[汎用]*****/ .morelink { top: 0; left: 0; width: 100%; height: 100%; position: absolute; } .morelink span { display: inline-block; font-family: var(--fontfamily-english); font-size: 14px; padding: 0; margin: 0; position: absolute; top: calc(50% - 14px); right: 0; } .morelink span em { display: none; } .morelink span:after { font-family: var(--fontfamily-icon); content: "\e5cc"; font-size: 30px; font-weight: normal; vertical-align: middle; color: var(--color-base-line-dark); } /******もっと見るボタン[汎用]以上*****/ /*.cat3_view article.item .morelink, #cat3_view article.item .morelink { position: static; }*/ /* クーポン表示関連：①もっと見るボタン　②クーポン強調表示(フキダシ) */ #cat1_view .item.cat2 .desc h4::before { /*フキダシ中身*/ content: "Coupon"; background: var(--color-base-accent-dark); color: #fff; display: inline-block; padding: 6px; line-height: 1em; letter-spacing: 1px; font-size: 0.8em; margin: 0 0 6px 0; font-family: var(--fontfamily-english); font-weight: 600; } /*画像がないときはフキダシを消す*/ /*#cat1_view .item.cat2.noimg .desc::before, #cat1_view .item.cat2.noimg .desc::after{ display: none; }*/ /* 求人関連 ※#cat3_view はショップページ、個別ページ下部の一覧 ※.cat3_view　は求人一覧用の指定 */ #cat3_view{ margin-top:34px; } #cat3_view > .inner{ width: 88%; max-width:var(--inner-Min-Width); } .cat3_view article.item, #cat3_view article.item { position: relative; float: none; overflow: hidden; padding: 30px 280px 30px 40px; margin: 14px 0 20px 0; box-sizing: border-box; border: 1px solid var(--color-base-line-dark); } .cat3_view article.item.noimg, #cat3_view article.item.noimg { padding: 30px 40px; } .cat3_view article.item .date, #cat3_view article.item .date { font-size: 12px; font-family: var(--fontfamily-english); line-height: 1em; margin: 0.5em 0; } @media screen and (max-width: 767px) { .cat3_view article.item .date, #cat3_view article.item .date { font-size: 12px; } } .cat3_view article.item h4, #cat3_view article.item h4 { margin: 0 0 20px; padding: 20px; width:100%; box-sizing: border-box; position: relative; font-weight: bold; font-size: 1.1em; line-height: 1.3em; color: var(--color-base-sub1-dark); background: var(--color-base-sub1-light); border-radius: var(--box-radius-small); } /* h4フキダシ */ .cat3_view article.item h4:before, #cat3_view article.item h4:before { content: ""; position: absolute; bottom: -20px; left: 10%; margin-left: -15px; border: 8px solid transparent; border-top: 14px solid var(--color-base-sub1-light); z-index: 2; } .cat3_view article.item table, #cat3_view article.item table { width: 100%; margin-bottom: 15px; } .cat3_view article.item th, #cat3_view article.item th { width: 30%; } .cat3_view article.item .morelink, #cat3_view article.item .morelink{ position: relative; float: right; display: inline-block; width: auto; font-family: var(--fontfamily-english); padding: 8px 22px 8px 12px; border-radius: var(--box-radius-small); line-height: 1em; background: var(--color-base-text-light); color: #fff; } .cat3_view article.item .morelink span:after, #cat3_view article.item .morelink span:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0; color: #fff; vertical-align: middle; position: absolute; top: calc(50% - 12px); right: 0; line-height: 1em; font-size: 24px; } .cat3_view article.item .morelink span, #cat3_view article.item .morelink span{ position: static; font-size: 16px; } .cat3_view article.item .morelink span em, #cat3_view article.item .morelink span em{ display: block; } .sale.icon, .newgoods_conf #goods_title.formitem .sale, .cat_items article.item .desc .sale { background: #d00; color: #fff; display: inline-block; padding: 5px 8px; line-height: 1em; letter-spacing: 1px; font-size: 0.9em; margin: 0 6px 2px 0; font-family: var(--fontfamily-english); font-weight: 600;} .cat_items article.item .goodscomment { display: none; /* overflow: hidden; white-space: nowrap; text-overflow: ellipsis; */ } .cat_items article.item .read_more { margin-top:10px; } .cat_items article.item .read_more a { font-size: 12px; color: var(--color-base-line-middark); } .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 { padding: 0px 0 10px; 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: var(--color-base-bg-light); 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: var(--color-base-accent-dark); border-radius: 0px; 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, .other_news{ padding: 46px 6%; margin: 0 auto 40px; background: #fff; } .shopnewsitem.item::after { /*clearfix*/ width: 900px; padding: 0 20px; content: ""; clear: both; display: block; } .shopnewsitem.item .date { margin: 4px 80px 0; } #contents-main .shopnewsitem.item h3.gcat{ background: none; border: none; text-align: center; padding: 0; } .shopnewsitem.item .imgarea { background: var(--color-base-bg-light); padding: 0 0; margin: 0 80px 20px; } .shopnewsitem.item.noimg .imgarea { display: none; } /*アイテム一覧　メイン画像*/ .shopnewsitem .slick-list { margin: 0 0 10px; } .shopnewsitem .main_img { height: 500px; /* padding-bottom: 20px; */ } .shopnewsitem .main_img img { display: block; margin: 10px 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: 0px; 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 var(--color-base-accent-dark); } .shopnewsitem .slick-prev, .shopnewsitem .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; font-weight: bold; color: var(--color-base-accent-dark); } .shopnewsitem .slick-arrow i { display: none; } .shopnewsitem .slick-arrow.slick-next { right: 6px; } .shopnewsitem .slick-arrow.slick-next:before { font-family: var(--fontfamily-icon); content: "\e5cc"; } .shopnewsitem .slick-arrow.slick-prev { left: 6px; } .shopnewsitem .slick-arrow.slick-prev:before { font-family: var(--fontfamily-icon); content: "\e5cb"; } /*items 左側*/ .shopnewsitem .desc { width: 100%; padding: 0 80px; margin: 0 0 40px; box-sizing: border-box; float: left; } .shopnewsitem .desc h4 { font-size: 20px; font-weight: bold; margin: 16px 0; word-break: break-all; } .shopnewsitem .desc .price { font-weight: bold; word-break: break-all; } .shopnewsitem.sale .desc .price { color: #d00; } .shopnewsitem .desc .goodscomment { border-top: 1px solid var(--color-base-line-dark); margin: 16px 0; padding: 16px 0; } .shopnewsitem .mdlistiew { margin: 10px 0; padding: 0; text-align: left; } .shopnewsitem .mdlistiew li { margin: 0 5px 5px 0; } .shopnewsitem .link { text-align: center; padding-bottom: 20px; } .shopnewsitem .link a { text-align: center; text-decoration: none; background: var(--color-base-text-light); color: #ffffff; padding: 20px; border-radius: var(--box-radius-small); position: relative; font-weight: 700; font-size: 16px; min-width: 40%; display: inline-block; } .shopnewsitem .link a::after { font-family: var(--fontfamily-icon); content: "\e5e1"; margin: 0 0 0 4px; color: #fff; font-weight: 400; vertical-align: middle; position: absolute; right: 10px; } .shopnewsitem .tag_list { padding: 10px 0px; justify-content: left; border-bottom: none; clear: both; } .shopnewsitem .tag_list_name { margin: 0 12px 5px 0; } .shopnewsitem .tag_list .tag_list_name a { } /*ソーシャルボタン、いいねボタン*/ .shopnewsitem .goods_like_btn { width: calc(60% - 90px); margin: 0 0 20px 80px; background: var(--color-base-main-light); padding-top: 20px; height: 120px; } .shopnewsitem .goods_like_btn:before { font-family: var(--fontfamily-english); font-size: 22px; color: #000; content: "Like it"; margin-bottom: 12px; display: block; line-height: 1em; } .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: "このニュースにいいね！する"; margin-right: 0.3em; font-size: 16px; font-family: var(--fontfamily-base); color: var(--color-base-text-dark); } .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: var(--color-goodslike); } /*いいねボタンのハート指定(googlegont)*/ .shopnewsitem .goods_like_btn p i.off:before{ font-family: var(--fontfamily-icon); content: "\e87d"; margin: 0 0 0 4px; color: var(--color-goodslike); vertical-align: middle; display: inline-block; font-style: normal; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48 } .shopnewsitem .goods_like_btn p i.on:before{ font-family: var(--fontfamily-icon); content: "\e87d"; margin: 0 0 0 4px; color: var(--color-goodslike); vertical-align: middle; display: inline-block; font-style: normal; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48 } .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; background: var(--color-base-bg-light); 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 var(--color-base-line-dark); width: calc(100% - 160px); margin: 0 80px 20px; 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; height: 25px; font-size: 18px; } */ .shopnewsitem.cat2 .desc h4 { color: var(--color-base-accent-dark); margin: 0; padding: 0 0 16px; border-bottom: 1px solid var(--color-base-line-dark); line-height: 1.4em; word-break: break-word; } .shopnewsitem.cat2 .desc dl { border-bottom: 1px solid var(--color-base-line-dark); padding: 15px 0; } .shopnewsitem.cat2 .desc dt { display: inline-block; background: var(--color-base-bg-light); width: 100px; margin: 0 10px 0 0; border-radius: 0; font-weight: bold; text-align: center; } .shopnewsitem.cat2 .desc dd { display: inline-block; width: 400px; vertical-align: middle; } .shopnewsitem.cat2 .desc .print a { width: 30%; background: var(--color-base-accent-dark); display: block; padding: 20px 20px 20px 10px; box-sizing: border-box; line-height: 16px; font-size: 18px; color: #fff; text-align: center; margin: 16px auto; border-radius: var(--box-radius-small); } .shopnewsitem.cat2 .desc .print a:before { font-family: var(--fontfamily-icon); content: "\e8ad"; margin-right: 8px; font-size: 24px; vertical-align: middle; } .shopnewsitem.cat2 .mdlistiew, .shopnewsitem.cat2 .tag_list{ width: 600px; padding: 0 0 20px 80px; clear: both; } #contents-main .other_news .inner{ width: auto; max-width: var(--inner-Min-Width); min-width: initial; padding: 0; } #contents-main .other_news article.item .goods_like_btn.mini p{ display: none; } .pc .sp_couponview { display: none; } /*求人情報　item_recruite.jsp*/ .recruititem.item, .other_jobs{ padding: 46px 6%; margin: 0 auto 40px; background: #fff; } #contents-main .recruititem.item.item h3.gcat{ background: none; border: none; text-align: center; padding: 0; } .recruititem.item h4 { margin: 0 0 20px; padding: 20px; width: 100%; box-sizing: border-box; position: relative; font-weight: bold; font-size: 18px; line-height: 1.3em; color: var(--color-base-sub1-dark); background: var(--color-base-sub1-light); border-radius: var(--box-radius-small); } .recruititem.item h4::before{ content: ""; position: absolute; bottom: -24px; left: 7%; margin-left: -15px; border: 12px solid transparent; border-top: 12px solid var(--color-base-sub1-light); z-index: 2; } .recruititem.item .date { margin: 20px 80px 10px; } .recruititem.item .imgarea { background: var(--color-base-bg-light); padding: 20px 0; margin: 0 80px 20px; border-radius: 0px; } .recruititem.item .imgarea img { display: block; margin: 0 auto; max-height: 480px; max-width: 480px; } .recruititem.item .desc { padding: 0 80px; margin: 20px auto 40px; } .recruititem.item.cat3 th { width: 30%; padding: 10px 25px; text-align: center; font-weight: bold; } .recruititem.item.cat3 td { padding: 20px 15px; line-height: 1.3em; } .other_jobs .cat_items h3 { display: none; } #contents-main .other_jobs article.item{ } #contents-main .other_jobs h3 { border: none; text-align: center; font-weight: bold; font-size: 20px; padding: 0; background: none; } #contents-main .other_jobs #cat3_view{ margin-top: 0; } #contents-main .other_jobs .inner{ width: auto; max-width: initial; min-width: initial; padding: 0; } /*共通戻るボタン*/ .return_shop { clear: both; margin: 20px 0; line-height: 1em; text-align: center; } .return_shop a { display: inline-block; padding: 15px 25px 15px 40px; font-size: 14px; border-radius: var(--box-radius-small); color: #fff; background: var(--color-base-text-light); position: relative; } .return_shop a:before { font-family: var(--fontfamily-icon); content: "\e5cb"; margin: 0 0 0 4px; vertical-align: middle; position: absolute; left: 10px; font-size: 24px; font-weight: 400; } /* --------------------------------------------- div#goodslist-header-navi --------------------------------------------- */ div#goodslist-header-navi {} div#goodslist-header-navi dl { width: 100%; box-sizing: border-box; text-align: center; padding: 0; display: flex; justify-content: center; flex-wrap: wrap;} div#goodslist-header-navi dl:after { content: ""; clear: both; display: block; } div#goodslist-header-navi dt { font-family: var(--fontfamily-english); letter-spacing: 1px; } div#goodslist-header-navi dt, div#goodslist-header-navi dd { margin: 18px 0 0; color: #FFF; position: relative; text-align: center;} #goodslist-header-navi dl dt a, #goodslist-header-navi dl dd a { box-sizing: border-box; text-decoration: none; display: block; position: relative; font-size: 14px; border-left: 1px solid var(--color-base-line-dark); padding: 8px 12px;} #goodslist-header-navi dl dd:last-of-type a{ border-right: 1px solid var(--color-base-line-dark); } #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 { color: var(--color-base-main-dark); font-weight: bold;} #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: var(--color-base-main-dark); } body.bf4 #goodslist-header-navi dl dd a:hover, body.bf5 #goodslist-header-navi dl dd a:hover { color: var(--color-base-main-dark); font-weight: bold;} /* ----------------------------------------- goodslist.jspを基本に.NewsItemList ※この見せ方のページは、class="NewsItemList" ※上位のスタイルを上書きするために#contents-main が必要 ----------------------------------------- */ #contents-main .NewsItemList { padding: 0 0 60px; width: calc(100% + 40px) !important; box-sizing: border-box; margin: 0 -20px 10px; } #contents-main .NewsItemList:after { content: ""; clear: both; display: block; height: 1px; } #contents-main .NewsItemList #items{ display: flex; flex-wrap: wrap; } #contents-main .NewsItemList .item { box-sizing: border-box; width: calc(100% / 3); padding: 16px 20px 0; margin: 10px 0 0; position: relative; } #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"; background: var(--color-base-accent-dark); color: #fff; display: inline-block; padding: 6px; font-weight: bold; line-height: 1em; letter-spacing: 0; font-size: 0.8em; margin: 0 6px 2px 0; } #contents-main .NewsItemList .item .image { height: 320px; position: relative; margin: 4px 0 0; box-sizing: border-box; } #contents-main .NewsItemList .item .image a { display: block; width: 100%; height: 100%; } #contents-main .NewsItemList .item .image img { } #contents-main .NewsItemList .item .image span { border-radius: 0px; } #contents-main .NewsItemList .item .image .item_image_noimg { border: 1px solid var(--color-base-line-light); } #contents-main .NewsItemList .item .image .item_image_noimg img { position: absolute; margin: auto; width: 60%; height: auto; left: 0; right: 0; top: 0; bottom: 0; box-shadow: none; border: none;} #contents-main .NewsItemList .item .desc { padding: 10px 0 0 0; position: relative; } #contents-main .NewsItemList .item .date { font-size: 12px; font-family: var(--fontfamily-english); line-height: 1em; margin: 0.5em 0; } @media screen and (max-width: 767px) { #contents-main .NewsItemList .item .date { font-size: 11px; } } #contents-main .NewsItemList .item h3.goods { font-weight: bold; font-size: 16px; line-height: 140%; margin: 4px 0; border: none; padding: 0; background: none; border-radius: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-base-text-dark); } #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: #d00; } #contents-main .NewsItemList .item.cat2 .price { display: none; } #contents-main .NewsItemList .item .name { padding-top: 4px; line-height: 14px; } #contents-main .NewsItemList .item .name a { font-size: 80%; } .pc #contents-main .NewsItemList .item .goods_like_btn.mini { bottom: auto; left: auto; top: 315px; right: 35px; margin: 0; } .pc #contents-main .NewsItemList .item .goods_like_btn.mini p{ background: #fffc; } #contents-main #goodslist .price_date, #contents-main .goodslist .price_date { font-size: 10px; padding: 10px 0; } #contents-main .NewsItemList .item .morelink{ display: none; } /*NewsItemListを基本にしつつsale表示変更*/ body.sale #contents h2 { color: #fff; background: #d00; border-bottom: none; } body.sale #contents-main.all{ padding-top: 0; } body.sale #contents-main.all #goodslist{ background: #fff; padding: 22px 6% 40px; } /* --------------------------------------------- ニュース一覧など　次へボタン --------------------------------------------- */ #goodslist-navi { margin: 20px 8px; overflow: hidden; } #goodslist-navi .back { float: left; } #goodslist-navi .next { float: right; } #goodslist-navi form input[type="submit"] { color: #000; padding: 12px 12px 12px 15px; font-size: 16px; border-radius: var(--box-radius-small); border: none; cursor: pointer; border: 1px solid var(--color-base-line-dark); background: #fff; 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 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 { overflow: hidden; } body.index .search .search_block ul { display: flex; justify-content: left; flex-wrap: wrap; } body.index .search .search_block li { width: calc(100% / 3 - 8px); margin: 0 4px 10px; display: block; border-radius: 0px; } body.index .search .search_block #on_title_list li{ width: calc(100% / 5 - 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: var(--box-radius-small); border: 1px solid var(--color-base-line-dark); } body.index .search .search_block li a:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; font-size: 30px; vertical-align: middle; position: absolute; top: calc(50% - 15px); line-height: 1em; font-weight: normal; right: 10px; color: var(--color-base-line-dark);} 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 0; } body.index .search div.title h4 { font-weight: bold; font-size: 18px; padding: 0 0 20px; text-align: center; } body.index div.search .ul_shop_list{ overflow:hidden; border-top:none; margin-bottom: 36px; display: flex; flex-wrap: wrap; justify-content: left; gap: 20px; } body.index div.search .ul_shop_list li{ position: relative; width: calc(100% / 4 - 16px); box-sizing: border-box; } body.index div.search .ul_shop_list li p.image{ width:100%; height:150px; overflow: hidden; background-color: #fff; border-radius: var(--box-radius-small); box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2); box-sizing: border-box; } body.index div.search .ul_shop_list li p.image.no-image{ box-sizing: border-box; } body.index div.search .ul_shop_list li p.image img.no_img_logo{ width: 60%; background-repeat: no-repeat; margin: auto; display: block; } body.index div.search .ul_shop_list li p.logo { position: absolute; top: 106px; left:0; width: 100px; } body.index div.search .ul_shop_list li p.logo img{ max-width:76px; height:38px; background: #fff; padding: 4px 10px; display: inline-block; text-align: center; } body.index div.search .ul_shop_list li p.name{ text-align:left; padding:10px 0 0; display: block; font-weight: bold; word-break: break-all; } body.index div.search .ul_shop_list li p.name .floor{ padding-right: 0.2em; } body.index div.search .ul_shop_list li p.name .biz{ font-size: 12px; font-weight: normal; line-height: 1.4em; word-break: break-all; display: block; padding: 0.3em 0; } body.index div.search .ul_shop_list .tel, body.index div.search .ul_shop_list .hour{ font-size: 12px; line-height: 1.4em; white-space: pre-wrap; position: relative; padding: 2px 0 2px 20px; } body.index div.search .ul_shop_list .tel:before, body.index div.search .ul_shop_list .hour:before{ font-family: var(--fontfamily-icon); font-size: 16px; position: absolute; top: 0.1em; left: 0; } body.index div.search .ul_shop_list .tel:before{ font-variation-settings: var(--iconfont-FILL1-set); content: "\e0b0"; } body.index div.search .ul_shop_list .hour:before{ content: "\e8b5"; } 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 thead { 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;} 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 { max-width: 80px;} body.index div.search table.table01 .tel { width: 15%; } body.index div.search table.table01 .hour { width: 25%; p{ line-height: 16px; white-space: pre-wrap; } } body.index div.search table.table01 tr:first-child { border-top: 1px solid var(--color-base-line-dark); } body.index div.search table.table01 td.floor { text-align: center; position: relative; padding-right: 24px; p{ font-size: 14px; font-weight: bold; } } body.index div.search table.table01 td.floor:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; font-size: 30px; color: var(--color-base-text-light); vertical-align: middle; position: absolute; top: calc(50% - 8px); right: 0; } body.index div.search table.table01 td.hour p:before { font-family: var(--fontfamily-icon); content: "\e8b5"; margin: 0 4px 0 0; font-size: 16px; vertical-align: bottom; } body.index div.search table.table01 td.tel p:before { font-family: var(--fontfamily-icon); font-variation-settings: var(--iconfont-FILL1-set); content: "\e0b0"; margin: 0 4px 0 0; font-size: 16px; vertical-align: bottom; } 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.search #extract{ margin: 20px 0 0; } body.index div#category-navi { margin: -20px 0 10px; width: 100%; box-sizing: border-box; text-align: center; padding: 0; } body.index div#category-navi ul{ width: 100%; box-sizing: border-box; text-align: center; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; } body.index div#category-navi li { margin: 18px 0; color: #FFF; position: relative; text-align: center;} body.index div#category-navi li a { box-sizing: border-box; text-decoration: none; color: #000; display: block; position: relative; font-size: 14px; border-left: 1px solid var(--color-base-line-dark); padding: 8px 12px; } body.index div#category-navi li:last-child a { border-right: 1px solid var(--color-base-line-dark); } body.index div#category-navi li.guide a { border: none; } /* --------------------------------------------- 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 10px; } /* --------------------------------------------- ショップサービス bf=4 --------------------------------------------- */ body.index.bf4 #contents > .inner{ background: #fff; padding: 22px 6% 40px; margin-bottom: 50px; box-sizing: border-box; } body.index.bf4 #contents-main { padding-top: 0; } 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; font-size: 16px; } body.index.bf4 div#service table.table01 .name .floor { font-size: 12px; } body.index.bf4 div#service table.table01 .logo { width: 100px; text-align: center; } body.index.bf4 div#service table.table01 .logo .image{ width: 80px; } body.index.bf4 div#service table.table01 .logo .img_bg_css{ min-height: 50px; } body.index.bf4 div#service table.table01 .logo .img_bg_css.no_img_logo { border: none; background-size: contain; } body.index.bf4 div#service table.table01 .service p { white-space: pre-wrap; padding: 10px 16px; } body.index.bf4.pc div#service table.table01 .service p { border-left: 4px solid var(--color-base-bg-light); } /* --------------------------------------------- クーポン　bf=3 --------------------------------------------- */ body.index.bf3 #coupon div#goodslist-header-navi { display: none; } body.index.bf3 #coupon .NewsItemList .item .desc .fromto dt { font-weight: bold; padding: 0 4px; background: var(--color-base-accent-light); display: inline-block; margin-right: 4px; } body.index.bf3 #coupon .NewsItemList .item .desc .fromto dd { display: inline; } body.index.bf3 #coupon .NewsItemList .item h3.goods{ overflow: initial; text-overflow: unset; white-space: unset; } /* --------------------------------------------- 求人情報　bf=5 --------------------------------------------- */ body.index.bf5 #contents > .inner{ background: #fff; padding: 22px 6% 40px; margin-bottom: 50px; box-sizing: border-box; } body.index.bf5 .RecruitItemList { margin: 20px 0; } body.index.bf5 #contents-main { padding-top: 0; } body.index.bf5 .cat3_view article .shopname { display: block; padding: 10px 0 5px; } body.index.bf5 .cat3_view article .shopname a { font-size: 16px; 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 #contents-main{ background: #fff; padding: 40px 6%;} body.voice .VoiceItemList { } body.voice .VoiceItemList article { overflow: hidden; margin: 0 10px 20px; padding: 0 0 20px; box-sizing: border-box; width: 47%; display: inline-block; width: calc(50% - 24px); border: 2px solid var(--color-base-line-light); border-radius: 0 var(--box-radius-xlarge) 0 var(--box-radius-xlarge) / 0 var(--box-radius-xlarge) 0 var(--box-radius-xlarge); } body.voice .VoiceItemList article .detail { padding: 16px 0 20px; box-sizing: border-box; position: relative; /* border: 2px solid var(--color-base-line-light); border-radius: 0 var(--box-radius-xlarge) 0 var(--box-radius-xlarge) / 0 var(--box-radius-xlarge) 0 var(--box-radius-xlarge); */ box-sizing: border-box; position: relative; display: flex; flex-wrap: wrap; flex-direction: column-reverse; margin: 0 25px; border-bottom: 1px solid var(--color-base-line-dark); } body.voice .VoiceItemList article .sendtime{ color: var(--color-base-accent-dark); display: block; padding: 0; font-size: 12px; font-weight: bold; } body.voice .VoiceItemList article .sendtime:before { content: "\e8b5"; width: 20px; height: 20px; display: inline-block; vertical-align: top; position: relative; top: 1px; left: 0; font-family: var(--fontfamily-icon); font-size: 20px; font-weight: normal; } body.voice .VoiceItemList article .detail .goodsname { font-weight: bold; } body.voice .VoiceItemList article .shopname { /* display: block; float: left; width: calc(100% - 120px); padding: 10px 20px 0; box-sizing: border-box; */ display: block; float: left; width: calc(100% - 170px); margin: 0 25px; box-sizing: border-box; padding: 15px 0 0; } 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; */ vertical-align: middle; float: right; width: 120px; box-sizing: border-box; padding: 10px 25px 0 0; } body.voice .VoiceItemList article .logoimg img { width: 100px; max-width: auto; max-height: 100px; } /* --------------------------------------------- イベントニュース --------------------------------------------- */ body.eventnews .eventnews > .inner, body.item_eventnews .eventnews > .inner, body.calendar #contents > .inner{ background: #fff; padding: 0 4%; box-sizing: border-box; } body.eventnews .eventnews #eventnews, body.item_eventnews .eventnews #eventnews, body.calendar #contents #eventnews{ padding: 20px 10px 0 0; } #event_lists .events { padding: 20px 30px 30px 20px; overflow: hidden; position: relative; border-bottom: 4px solid var(--color-base-bg-light); margin: 10px 0 0; } #event_lists .events:first-of-type { padding-top: 30px; border-top: 4px solid var(--color-base-bg-light); } #event_lists .events .c1 { float: right; margin-left: 24px; } #event_lists .events .c1 p.image { overflow: hidden; max-height: 240px; -moz-border-radius: 0px; border-radius: 0px;} #event_lists .events .c1 p.image img { width: 240px; } #event_lists h4 { margin: 12px 0 16px 0; font-weight: bold; overflow: hidden; font-size: 1.2em; } #event_lists .table01 { width: calc(100% - 280px); margin: 20px 0; border-collapse: collapse; border-spacing: 0; } .event-cat-title { clear: both; margin: 16px 0; } .event-cat-title .cat_title { padding: 15px 20px; font-size: 20px; font-weight: bold; background: var(--color-base-bg-light); line-height: 1.5em;} #ev-navi { text-align: center; margin: 0 0 30px; } .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 { font-family: var(--fontfamily-english); /* display: inline-block; */ padding: 11px 22px 0; font-size: 14px; height: 46px; box-sizing: border-box; border-radius: var(--box-radius-small); border: 1px solid var(--color-base-line-dark); cursor: pointer; } .ev-navi-article dl dt:before { content: ""; display: inline-block; width: 1px; border-left: 1px solid var(--color-base-line-dark); height: 24px; position: absolute; right: 40px; top: 12px; } .ev-navi-article dl dt:after { font-family: var(--fontfamily-icon); content: "\e5cf"; vertical-align: middle; position: absolute; right: 2px; top: 13px; width: 40px; text-align: center; font-size: 26px; } .ev-navi-article dl dt.up:after { content: "\e5ce"; } .ev-navi-article dl dd { border: 1px solid var(--color-base-line-dark); 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 var(--color-base-line-dark); } .ev-navi-article dl dd li { border-bottom: 1px solid var(--color-base-line-dark); 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: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; font-size: 24px; vertical-align: middle; position: absolute; right: 0; top: calc(50% - 12px); } .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: 10px 24px; font-size: 14px; border-radius: var(--box-radius-small); border: 1px solid var(--color-base-line-dark); } .ev-navi_bottom .ev_all_link a{ padding-left: 15px; } .ev-navi_bottom .ev-navi-cal a:before, #ev-navi .ev-navi-cal a:before { font-family: var(--fontfamily-icon); font-variation-settings: var(--iconfont-FILL1-set); content: "\ebcc"; margin: 0 4px 0 0; font-size: 24px; vertical-align: middle; } #ev-navi .ev-navi-cal a { height: 46px; box-sizing: border-box; } .ev-navi_bottom .ev_all_link a:before { font-family: var(--fontfamily-icon); content: "\e5cb"; margin: 0 4px 0 0; font-size: 24px; vertical-align: middle; } .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: var(--color-base-text-light); color: #fff; line-height: 1em; padding: 6px;} body.view.eventnews #more-btn { text-align: center; margin: 0px 16px 16px; } body.view.eventnews #more-btn span:before { font-family: var(--fontfamily-icon); content: ""; vertical-align: middle; font-size: 140%; } body.eventnews #more-btn span { display: block; background: var(--color-base-bg-light); padding: 10px 20px; cursor: pointer; border-radius: 0 0 20px 20px /0 0 20px 20px; } /* --------------------------------------------- イベントニュース　item_eventnews.jsp --------------------------------------------- */ body.item_eventnews .item { overflow: hidden; } 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: 4px 16px 15px; border-bottom: 1px solid var(--color-base-line-dark); 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: 0px; max-width: 90%; } 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: var(--color-base-bg-light); 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 var(--color-base-line-light);*/ background: var(--color-base-bg-light); 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-decoration: none; display: inline-block; margin: 10px 0 0; text-align: center; color: #fff; border-radius: var(--box-radius-small); background: var(--color-base-main-dark); padding: 20px 50px 20px 40px; position: relative; max-width: 80%; min-width: 12em; font-weight: 700; font-size: 16px; } body.item_eventnews #contents-main .item .desc .link a:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; vertical-align: middle; font-size: 24px; position: absolute; right: 4px; top: calc(50% - 12px); font-weight: 400; } 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 var(--color-base-line-light); } #contents-main .event_tags .event_tags-title { border: none; } #contents-main .event_tags .event_tags-title em { font-family: var(--fontfamily-english); font-size: 22px; letter-spacing: .05em; } #contents-main .event_tags .event_tags-title::before { content: "#"; font-family: var(--fontfamily-english); color: var(--color-base-main-dark); font-size: 22px; margin: 0px 5px 0 0; vertical-align: middle; } #contents-main .event_tags .event_tags-title::before { content: "#"; font-family: var(--fontfamily-english); color: var(--color-base-main-dark); 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: 24px 10px 40px 40px; overflow: hidden; display: flex; height: 120px; padding: 25px 0; border: 1px solid var(--color-base-line-dark); } 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: var(--fontfamily-english); text-align: center; font-size: 22px; padding: 10px 0px 15px; } body.item_eventnews #contents-main #event_list .p_title h4 span{ position: relative; display: inline-block; } body.item_eventnews #contents-main #event_list .p_title h4 span:before{ content: ""; position: absolute; width: 100%; height: 10px; left: 0; bottom: -2px; background: rgba(88, 78, 158, 0.1); background: linear-gradient(90deg, rgba(223, 39, 24, 0.1) 0%, rgba(88, 78, 158, 0.1) 100%); } body.item_eventnews #contents-main #event_list .events { width: calc(100% / 3); padding: 0 15px; border-left: 1px solid var(--color-base-line-dark); box-sizing: border-box; } 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: var(--fontfamily-icon); font-variation-settings: var(--iconfont-FILL1-set); margin: 0 4px 0 0; font-size: 14px; content: "\e614"; vertical-align: bottom; } 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 .p_title p{ text-align: center; } body.item_eventnews #contents-main #event_list .btn-more{ } body.item_eventnews #contents-main #event_list .btn-more:after { } /* --------------------------------------------- 営業時間　hours --------------------------------------------- */ body.hours #contents-main article section{ padding: 24px; border-radius: var(--box-radius-small); border: 1px solid #ccc; margin: 1em 0 2em; } body.hours #contents-main article#hour h3:before{ font-family: var(--fontfamily-icon); margin: 0 4px 0 0; vertical-align: middle; font-size: 30px; font-weight: normal; color: var(--color-base-main-dark); width: calc(1em + 4px); display: inline-block; text-align: center; content: "\e8b5"; } body.hours #contents-main .hours_content section{ white-space: pre-wrap; } body.hours #contents-main .hours_content section strong{ font-size: 1.2em; } body.hours #contents-main .hours_content section a{ color: var(--color-base-main-dark); padding: 5px 10px; display: inline-block; border-radius: var(--box-radius-small); background: var(--color-base-bg-light); margin: 5px 0 0; } body.hours #contents-main .hours_content section p.btn a{ display: inline-block; margin: 10px 0 0; text-align: center; color: #fff; background: var(--color-base-accent-dark); padding: 8px 30px 12px 20px; position: relative; font-weight: bold; } body.hours #contents-main .hours_content section p.btn a:after{ font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; font-size: 30px; color: #fff; vertical-align: middle; position: absolute; top: calc(50% - 10px); right: 0; } /* --------------------------------------------- 施設案内（よくある質問）faq --------------------------------------------- */ body.hours #contents-main article#faq h3:before{ font-family: var(--fontfamily-icon); margin: 0 4px 0 0; vertical-align: middle; font-size: 30px; font-weight: normal; color: var(--color-base-main-dark); width: calc(1em + 4px); display: inline-block; text-align: center; content: "\e887"; } body.hours #contents-main .faq_content dl dt { font-weight: bold; line-height: 1.5em; color: var(--color-base-main-dark); position: relative; padding: 0 0 0.5em 2.2em; font-size: 1.2em; } body.hours #contents-main .faq_content dl dd { margin: 0.5em 0 1.5em; position: relative; padding: 0 0 2em 2.6em; border-bottom: 1px solid var(--color-base-line-dark); } body.hours #contents-main .faq_content dl dd:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } body.hours #contents-main .faq_content dl dd a { text-decoration: underline; } body.hours #contents-main .faq_content dl dt:before, body.hours #contents-main .faq_content dl dd:before { font-family: var(--fontfamily-english); display: inline-block; position: absolute; padding: 6px 0 0; top: 0; left: 0; font-size: 1.2em; color: #fff; border-radius: 50%; width: 30px; height: 30px; box-sizing: border-box; text-align: center; line-height: 1em; } body.hours #contents-main .faq_content dl dt:before { content: "Q"; background: var(--color-base-main-dark); } body.hours #contents-main .faq_content dl dd:before { content: "A"; color: var(--color-base-accent-dark); background: var(--color-base-line-light); } /* --------------------------------------------- free_page_area --------------------------------------------- */ .pc #free_page_area{ /* width: 960px; margin: auto; */ } #free_page_area .fp_content { box-sizing: border-box; overflow: hidden; background: #fff; padding: 40px 6% 60px; } #free_page_area .fp_content img { max-width: 100%; } /*基本設定*/ #free_page_area .fp_content .table02 { border-collapse: collapse; width: 100%; word-break: break-all; } #free_page_area .fp_content .table02 th { background: #EAEAEA; font-weight: bold; border: 1px solid #ccc; padding: 12px 8px; } #free_page_area .fp_content .table02 td { border: 1px solid #ccc; padding: 12px 8px; } /*---------------------- Shop Guide　関連の共通メニュー ----------------------*/ .shop_guide_menu ul { height: 70px; margin: 0 0 20px; border-bottom: 1px solid var(--color-base-line-dark); display: flex; justify-content: center; flex-wrap: wrap;} .shop_guide_menu ul li { width: calc(100% / 2); box-sizing: border-box; padding: 0; height: 70px; vertical-align: bottom; border-right: 10px solid #fff; } .shop_guide_menu ul li:last-of-type{ border-right: none; } .shop_guide_menu ul li a { display: inline-block; text-align: center; background: var(--color-base-bg-light); width: 100%; height: 70px; line-height: 70px; position: relative; } .shop_guide_menu ul li.current a { position: relative; background: var(--color-base-text-light); 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: -22px; width: 0; height: 0; border: 12px solid transparent; left: 36%; left: calc(50% - 12px); border-top: 12px solid var(--color-base-text-light); } /* --------------------------------------------- フロアガイド(floor.jsp用) --------------------------------------------- */ body.floor h2 strong { font-weight: bold; display: inline-block; margin-left: 10px; font-size: 1.1em; } body.floor article .floor_img { padding: 24px 0; width: 100%; box-sizing: border-box; border-radius: 0px; } body.floor article .floor_img img{ width:calc(100% - 22px); } body.floor article .floor_img .desc { background: #fff; padding: 16px; margin: 8px 0 0; background: var(--color-base-bg-light); text-align: center; } body.floor article .floor_img .desc p { padding: 5px 0; text-align: center; } body.floor article .floor_img .desc .floor_icon p { display: inline-block; font-size: 14px; line-height: 1em; margin: 1px 5px; } body[class*="floor"] .floor_icon em { background-image: url(../static/fig_floor-signicon.svg); display: inline-block; width: 20px; height: 20px; background-position: left; background-size: auto 19px; text-indent: -9999em; overflow: hidden; background-repeat: no-repeat; padding: 0; margin: 0 2px; vertical-align: middle; } body[class*="floor"] .floor_icon em.icon1{background-position: 0 0;} body[class*="floor"] .floor_icon em.icon2{background-position: -22px 0;} body[class*="floor"] .floor_icon em.icon3{background-position: -44px 0;} body[class*="floor"] .floor_icon em.icon4{background-position: -66px 0;} body[class*="floor"] .floor_icon em.icon5{background-position: -88px 0;} body[class*="floor"] .floor_icon em.icon6{background-position: -110px 0;} body[class*="floor"] .floor_icon em.icon7{background-position: -132px 0;} body[class*="floor"] .floor_icon em.icon8{background-position: -155px 0;} body[class*="floor"] .floor_icon em.icon9{background-position: -176px 0;} body[class*="floor"] .floor_icon em.icon10{background-position: -200px 0;} body[class*="floor"] .floor_icon em.icon11{background-position: -222px 0;} body[class*="floor"] .floor_icon em.icon12{background-position: -244px 0;} /* ul.allmap_list内のアイコンサイズを大きく */ body[class*="floor"] ul.allmap_list .floor_icon em { width: 26px; height: 26px; background-size: auto 25px; } body[class*="floor"] ul.allmap_list .floor_icon em.icon1{background-position: 0 0;} body[class*="floor"] ul.allmap_list .floor_icon em.icon2{background-position: -29px 0;} body[class*="floor"] ul.allmap_list .floor_icon em.icon3{background-position: -58px 0;} body[class*="floor"] ul.allmap_list .floor_icon em.icon4{background-position: -87px 0;} body[class*="floor"] ul.allmap_list .floor_icon em.icon5{background-position: -116px 0;} body[class*="floor"] ul.allmap_list .floor_icon em.icon6{background-position: -145px 0;} body[class*="floor"] ul.allmap_list .floor_icon em.icon7{background-position: -175px 0;} body[class*="floor"] ul.allmap_list .floor_icon em.icon8{background-position: -204px 0;} body[class*="floor"] ul.allmap_list .floor_icon em.icon9{background-position: -233px 0;} body[class*="floor"] ul.allmap_list .floor_icon em.icon10{background-position: -262px 0;} body[class*="floor"] ul.allmap_list .floor_icon em.icon11{background-position: -291px 0;} body[class*="floor"] ul.allmap_list .floor_icon em.icon12{background-position: -321px 0;} body.floor-all ul.allmap_list .floor_icon{ em.icon6,em.icon10,em.icon11,em.icon12{display: none;} } 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: var(--color-base-bg-light); border-radius: 0px; display: inline-block; text-decoration: none; font-size: 16px; min-width: 30px; text-align: center; color: var(--color-base-accent-dark); } body.floor .cl_fl_list dd .floorlist dt a:hover { background: var(--color-base-accent-dark); color: #fff; } /*Zoomの追加css　*/ body.floor article .floor_img .zoom_area { position: relative; text-align: center; } .leaflet-container { z-index: 100; padding:0 10px; border:1px solid #ccc; background-color:#fff; } /*----------店舗一覧テーブル----------*/ .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 { font-family: var(--fontfamily-icon); content: ""; margin: 0 0 0 4px; color: var(--color-base-accent-dark); vertical-align: middle; position: absolute; font-size: 20px; right: 10px; } /*構造*/ body.view .floor table.table01 th, body.view .floor table.table01 td { box-sizing: border-box; font-size: 12px; padding: 16px; border: none; } body.view .floor table.table01 td.hour{ padding-right: 30px; line-height: 16px; white-space: pre-wrap; } .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: 17%; } .floor .table01 .tel { width: 8%; } /*ショップ番号*/ body.view .floor .table01 td.number { text-align: center; position: relative; padding: 0 0 0 10px; } .floor .table01 td.number span { font-family: var(--fontfamily-english); text-align: center; font-size: 14px; font-weight: bold; line-height: 1em; display: block; padding: 0.8em 0.4em; box-sizing: border-box; background: var(--color-base-bg-light); } /*カテゴリ別色分け*/ .floor .table01 tr[data-cat="ファッション"] td.number span { background:#ff8aa4; color: #fff; } .floor .table01 tr[data-cat="レストラン・カフェ"] td.number span{ background-color: #fea154; color: #fff; } .floor .table01 tr[data-cat="フード・スイーツ"] td.number span{ background: #facd3c; color: #fff; } .floor .table01 tr[data-cat="ライフスタイル・バラエティ"] td.number span { background: #6cc9b7; color: #fff; } .floor .table01 tr[data-cat="ヘルス・ビューティー"] td.number span { background: #5bbfe3; color: #fff; } .floor .table01 tr[data-cat="サービス・その他"] td.number span{ background: #5bbfe3; color: #fff; } .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;} .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: var(--fontfamily-icon); content: "\e8b5"; margin: 0 4px 0 0; font-size: 16px; vertical-align: bottom; } .floor .table01 .tel:before { font-family: var(--fontfamily-icon); font-variation-settings: var(--iconfont-FILL1-set); content: "\e0b0"; margin: 0 4px 0 0; font-size: 16px; vertical-align: bottom; } .floor .table01 .hour { position: relative; } .floor .table01 .hour:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; font-size: 30px; color: var(--color-base-text-light); vertical-align: middle; position: absolute; top: calc(50% - 8px); right: 0;} /* --------------------------------------------- フロアガイド共通マップ --------------------------------------------- */ .floor dl.floorlist { display: flex; justify-content: center; flex-wrap: wrap; margin: 20px 0px 10px; gap: 10px; } .floor dl.floorlist dt { text-align: center; font-size: 16px; font-weight: bold; letter-spacing: 0.1em; width: calc(100% / 9 - 9px); } .floor dl.floorlist dt.active, .floor dl.floorlist dt.active a{ background: var(--color-base-main-dark); color: #fff; border: none; border-radius: var(--box-radius-small); } .floor dl.floorlist dt.active a:after{ color: #fff; } .floor dl.floorlist dt a{ display: block; width: 100%; height: 100%; border-radius: var(--box-radius-small); padding: 10px 15px 10px 10px; box-sizing: border-box; position: relative; text-align: center; font-weight: bold; border: 1px solid var(--color-base-line-dark); } .floor dl.floorlist dt a:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; font-size: 30px; color: var(--color-base-text-light); vertical-align: middle; position: absolute; top: calc(50% - 10px); right: 0; font-weight: normal; } .floor dl.floorlist dt a:hover, .allmap_map li a:hover { text-decoration: none; } /* レスポンシブ対応 */ @media (max-width: 1188px) { .floor dl.floorlist dt a, .allmap_map li a{ font-size: 13px; } .floor dl.floorlist dt a:after { font-size: 25px; } } /* --------------------------------------------- フロアページ全体図 --------------------------------------------- */ body.floor-all .allmap { margin: 20px 0; } body.floor-all .allmap_map { border: 1px solid var(--color-base-text-light); border-width: 1px; width: 90%; margin: 40px auto 0; } body.floor-all .allmap_map ul li{ border-bottom: 1px solid var(--color-base-text-light); } body.floor-all .allmap_map ul li:last-of-type{ border-bottom: none; } body.floor-all .allmap_map ul li dl{ display: flex; padding: 30px; align-items: center; gap: 20px; } body.floor-all .allmap_map ul li dl dd{ width: 35%; padding-left: 16px; box-sizing: border-box; } body.floor-all .allmap_map ul li:not(.f1):not(.f2) dl dd p::before{ position: absolute; font-family: var(--fontfamily-icon); content: "\e54f"; width: 17px; height: 17px; left: -20px; top: 2px; font-size: 17px; } body.floor-all .allmap_map ul li dl dd p{ position: relative; } body.floor-all .allmap_map ul li dl dd p::before{ position: absolute; font-family: var(--fontfamily-icon); content: "\e570"; width: 17px; height: 17px; left: -18px; top: 2px; font-size: 17px; } body.floor-all .allmap_map ul li dl dd p.space:before{ content: "\f387"; } body.floor-all .allmap_map ul li dl dd p.bank:before{ content: "\e84f"; } body.floor-all .allmap_map ul li dl dd p.bus::before{ content: "\eb3c"; } body.floor-all .allmap_map ul li dl dt{ display: flex; align-items: center; justify-content: space-between; width: 65%; border: 4px solid var(--color-base-bg-light); padding: 20px; border-radius: 6px; position: relative; box-sizing: border-box; } body.floor-all .allmap_map ul li dl dt::after{ font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; font-size: 30px; color: var(--color-base-text-light); vertical-align: middle; position: absolute; top: calc(50% - 12px); right: 0; font-weight: normal; } body.floor-all .allmap_map ul li dl dt p.level{ font-family: var(--fontfamily-english); font-size: 20px; background: var(--color-base-text-light); color: #fff; width: 100px; font-weight: normal; line-height: 1.7; text-align: center; } body.floor-all .allmap_map ul li dl dt .dec{ font-size: 16px; width: calc(100% - 120px); text-align: left; } body.floor-all .allmap_map ul li dl dt .dec p{ padding: 0 0 4px; font-weight: bold; } body.floor-all .allmap_map ul li dl dt .dec p span{ text-decoration: underline; position: relative; font-size: 14px; padding-left: 14px; font-weight: normal; } body.floor-all .allmap_map ul li dl dt .dec p span::after{ position: absolute; font-family: var(--fontfamily-icon); content: "\e89e"; width: 14px; height: 14px; right: -17px; top: 0px; } .floorsearch_box .floorsearch { font-family: var(--fontfamily-english); text-align: center; font-size: 30px; padding: 40px 0 20px; margin: 0 auto;} .floorsearch_box .floorlist { text-align: center; } .floorsearch_box .floorlist li { border: 4px solid var(--color-base-line-light); border-radius: 0px; display: inline-block; margin: 0 5px 10px 0; letter-spacing: 0.1em; } .floorsearch_box .floorlist a { display: block; padding: 8px 12px; font-weight: bold; } body.floor-all .allmap_map ul li dl { position: relative; } body.floor-all .allmap_map ul li dl a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; text-indent: -9999px; overflow: hidden; } body.floor-all .allmap_map ul li dl a:hover::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.3); pointer-events: none; } body.floor-all .allmap_map ul li dl dt { position: relative; z-index: 0; } .floorsearch_box h4.floorsearch span { position: relative; } .floorsearch_box h4.floorsearch span:before { content: ""; position: absolute; width: calc(100% + 12px); height: 10px; left: -6px; bottom: 3px; background: rgba(88, 78, 158, 0.1); background: linear-gradient(90deg, rgba(223, 39, 24, 0.1) 0%, rgba(88, 78, 158, 0.1) 100%); } /* --------------------------------------------- ランキングページ(shop/favorite.jsp) --------------------------------------------- */ .favorite #contents-main { background: #fff; padding: 40px 6%; box-sizing: border-box; } #contents.favorite #favorite .item { margin: 0 0 30px 0; padding: 0; box-sizing: border-box; position: relative; padding-bottom: 30px; border-bottom: 2px solid var(--color-base-line-light); } #contents.favorite #favorite .item:first-of-type{ margin-top: 30px; } #contents.favorite #favorite .item:last-of-type{ border: none; padding-bottom: 0; } #contents.favorite #favorite .item::after { content: ""; display: block; clear: both; } #contents.favorite #favorite .item .ranking_box { min-height: 60px; /*#contents.favorite #favorite .order の height と同値*/ } #contents.favorite #favorite .item .order { font-family: var(--fontfamily-english); display: inline-block; position: absolute; top: -1px; left:10px; margin: 0; padding:16px 0 10px; z-index: 2; width: 60px; text-align: center; color: white; font-size: 14px;background: linear-gradient(#F3B291 0%, #AC5E35 100%); } #contents.favorite #favorite .item .order em{ font-size: 28px; } #contents.favorite #favorite .item .order:after { content: ''; position: absolute; left: 0; top: 100%; height: 0; width: 0; border-left: 30px solid #AC5E35; border-right: 30px solid #AC5E35; border-bottom: 10px solid transparent; } #contents.favorite #favorite .item:nth-of-type(1) .order { background: linear-gradient(#F3DA91 0%, #B29C60 100%); padding-top: 14px;} #contents.favorite #favorite .item:nth-of-type(1) .order:before { width: 20px; height: 20px; vertical-align: middle; content: "\f25c"; font-family: var(--fontfamily-icon); font-size: 20px; display: block; margin: 0 auto;} #contents.favorite #favorite .item:nth-of-type(1) .order:after { border-left-color:#B29C60; border-right-color:#B29C60; } #contents.favorite #favorite .item:nth-of-type(2) .order { background: linear-gradient(#C8C8C8 0%, #9E9E9E 100%);} #contents.favorite #favorite .item:nth-of-type(2) .order:after { border-left-color: #9E9E9E; border-right-color: #9E9E9E; } #contents.favorite #favorite .item:nth-of-type(10) .order em { font-size: 24px; letter-spacing: -0.02em; } #contents.favorite #favorite .item .image { display: block; width: 300px; height: 200px; float: left; margin: 0 30px 0 0; position: relative; } #contents.favorite #favorite .item.noimg .image{box-sizing: border-box;} #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 .goods.title { margin: 0; padding: 10px 0 14px; display: block; font-size: 18px; line-height: 24px; } .pc #contents.favorite #favorite .item .goods.title { display: inline-block; width: calc(100% - 330px); } #contents.favorite #favorite .item .goods.title a { font-weight: bold; } #contents.favorite #favorite .goods_like_btn.mini { position: static; margin: 18px 0 0; } #contents.favorite #favorite .goods_like_btn.mini p{ padding: 15px 60px; border-radius: var(--box-radius-small); font-size: 1.0em; font-weight: bold; } #contents.favorite #favorite .goods_like_btn.mini p i{ vertical-align: middle; } #contents.favorite #favorite .item .morelink{ display: none; } /* --------------------------------------------- 人気タグページ(shop/tag.jsp) --------------------------------------------- */ #contents #tag { text-align: center; background: #fff; padding: 40px 6% 60px; box-sizing: border-box; } /*タグ　タイトル部*/ #contents.tag .tag-title{ border: 1px solid var(--color-base-line-dark); border-radius: var(--box-radius-small); color: var(--color-base-text-dark); background: none; margin: 0 10px; text-align: center; } #contents.tag .tag-title:first-of-type{ margin-top: 20px; } #contents.tag .tag-title::before { content: "#"; font-family: var(--fontfamily-english); color: var(--color-base-accent-dark); 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; color: var(--color-base-accent-dark); display: inline-block; width: 30px; height: 30px; box-sizing: border-box; border-radius: var(--box-radius-full); padding: 0; margin: 0 0 0 8px; font-family: var(--fontfamily-english); background: var(--color-base-accent-light); line-height: 30px; text-align: center;} /*タグ　アイテムリスト*/ #contents #tag .goodslist { overflow: hidden; } #contents #tag .goodslist .item { width: calc(100% / 3); box-sizing: border-box; margin: 10px 0 0; padding: 16px 10px; float: left; text-align: left; /**/ position: relative; } #contents #tag .goodslist .item .news_box { width: 100%; height: 100%; box-sizing: border-box; } #contents #tag .goodslist .item p.image { width: 180px; height: 180px; border-radius: 0px; float: left; margin-top: -20px; } #contents #tag .goodslist .item p.image span.img_bg_css.item_image_noimg img{ object-fit: contain; padding: 30px; box-sizing: border-box; } #contents #tag .goodslist .item p.image a { display: block; width: 100%; height: 100%; } #contents.tag .price_date { font-size: 10px; padding: 10px; } #contents #tag .item .desc, #contents #tag .date { padding: 0 0 0 200px; } #contents #tag .ico_new2 { display: none; } #contents #tag .goodslist .item .goods { font-weight: bold; border: none; padding: 0; background: none; text-align: left; font-size: 16px; overflow: hidden; position: relative; margin: 0 0 2px 0px; word-break: break-all;} #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; font-family: var(--fontfamily-english); line-height: 1em; margin: 0.5em 0; } @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: 10px 0 40px; } /*下部に並ぶタグ一覧(×フッター)*/ #contents #tag .tag_list_name{ display: inline-block; margin: 0 12px 8px; } #contents #tag .tag_list_name a { } #contents #tag .tag_list-tagname { font-weight: bold; } #contents #tag .tag_list-tagcount { font-size: 14px; background: var(--color-base-accent-light); color: var(--color-base-accent-dark); display: inline-block; width: 24px; height: 24px; box-sizing: border-box; border-radius: var(--box-radius-full); padding-top: 5px; margin-left: 8px; font-family: var(--fontfamily-english); line-height: 1em; text-align: center;} #contents #tag .more-button-wrap:last-of-type { position: relative; margin-bottom: 110px; border-bottom: 1px solid var(--color-base-line-dark); } #contents #tag .more-button-wrap:last-of-type:before { font-family: var(--fontfamily-english); text-align: center; font-size: 30px; content: "Other Tags"; display: block; position: absolute; bottom: -90px; left: 0; width: 100%; padding: 0 0 15px; } #contents #tag .more-button-wrap:last-of-type:after { content: ""; position: absolute; width: 12em; height: 10px; left: calc((100% - 12em) / 2); bottom: -80px; background: rgba(88, 78, 158, 0.1); background: linear-gradient(90deg, rgba(223, 39, 24, 0.1) 0%, rgba(88, 78, 158, 0.1) 100%); } /*タグ詳細*/ body.tagitemlist #contents #contents-main{ background: #fff; padding: 40px 6% 60px; box-sizing: border-box; } body.tagitemlist #contents #contents-main .tag-title { margin:0; } /*下部に並ぶタグ一覧（tagitemlist）*/ #contents .trendtag_list { background: #fff; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1); border-radius: var(--box-radius-small); width: var(--inner-Width); max-width: var(--inner-Max-Width); min-width: var(--inner-Min-Width); margin: 40px auto 0;} #contents .trendtag_list h4 { font-family: var(--fontfamily-english); text-align: center; font-size: 30px; padding: 40px 0 20px; margin: 0 auto; } #contents .trendtag_list h4 a{ position: relative; } #contents .trendtag_list h4 a:before { content: ""; position: absolute; width: calc(100% + 12px); height: 10px; left: -6px; bottom: 3px; background: rgba(88, 78, 158, 0.1); background: linear-gradient(90deg, rgba(223, 39, 24, 0.1) 0%, rgba(88, 78, 158, 0.1) 100%); } /*#contents .trendtag_list h4:before { content: "#"; margin: 0 5px 0 0; font-family: var(--fontfamily-english); color: var(--color-base-accent-dark); }*/ /*一覧へ戻るボタン*/ #contents.tag .return_list { clear: both; margin: 20px 0; line-height: 1em; text-align: center; } #contents.tag .return_list a { display: inline-block; padding: 15px 25px 15px 40px; font-size: 14px; border-radius: var(--box-radius-small); color: #fff; background: var(--color-base-text-light); position: relative;} #contents.tag .return_list a:before { font-family: var(--fontfamily-icon); content: "\e5cb"; margin: 0 0 0 4px; vertical-align: middle; position: absolute; left: 10px; font-size: 24px; font-weight: normal; } /* --------------------------------------------- 特集ページ(shop/feature.jsp) --------------------------------------------- */ body.feature #contents #contents-main{ background: #fff; padding: 40px 6%; box-sizing: border-box; } #contents #feature .feature.item { box-sizing: border-box; overflow: hidden; position: relative; margin: 0 0 30px 0; padding: 0 40px 30px 0; border-bottom: 2px solid var(--color-base-line-light); } #contents #feature .feature.item:last-of-type{ border: none; padding-bottom: 0; } #contents #feature .feature > h2{ display: none; } #contents #feature .feature .image { display: block; float: right; width: 400px; height: 200px; margin: 0 0 0 20px; box-sizing: border-box; overflow: hidden; } #contents #feature .feature .title { padding: 10px 0; font-weight: bold; font-size: 18px; } #contents #feature .feature .date { font-size: 12px; font-family: var(--fontfamily-english); line-height: 1em; margin: 0.5em 0;} @media screen and (max-width: 767px) { #contents #feature .feature .date { font-size: 11px; } } /*ピックアップガイド個別ページ*/ body.item_feature #contents > .inner{ background: #fff; padding: 40px 6%; box-sizing: border-box; } body.item_feature #contents article h3{ border: none; margin: 0 0 20px; padding: 0; overflow: hidden; border-bottom: 1px solid var(--color-base-line-dark); background: none; color: var(--color-base-text-dark); text-align: center; border-radius: 0; } body.item_feature #contents article h3 img{ width: 100%; /* max-width: 960px;*/ } body.item_feature #contents article h3 .title_img{ background: var(--color-base-bg-light); } body.item_feature #contents article h3 .title { font-size: 18px; padding: 20px 0 20px; } body.item_feature #contents article h3 .image { width: 100%; margin: 0 0 20px; background: var(--color-base-bg-light); text-align: center; } 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; text-align: center; white-space: pre-wrap; } /*一覧へ戻るボタン*/ #contents.feature .return_list { clear: both; margin: 20px 0; line-height: 1em; text-align: center; } #contents.feature .return_list a { display: inline-block; padding: 15px 25px 15px 40px; font-size: 14px; border-radius: var(--box-radius-small); color: #fff; background: var(--color-base-text-light); position: relative; } #contents.feature .return_list a:before { font-family: var(--fontfamily-icon); content: "\e5cb"; margin: 0 0 0 4px; vertical-align: middle; position: absolute; left: 10px; font-size: 24px; font-weight: normal; } /*-------------------- ショップニュース --------------------*/ .bf2 #voice { background: #fff; padding: 40px 0 0; } body.bf2 #contents .voice .p_title{ margin: 0 6%; position: relative; } body.bf2 #contents .voice .p_title h2{ padding-top: 0; } body.bf2 #contents .voice .p_title h2 em { font-family: var(--fontfamily-english); font-size: 30px; position: relative; text-align: left; margin-right: 10px; } body.bf2 #contents .voice .p_title h2 span{ position: relative; font-size: 14px; } body.bf2 #contents .voice .p_title h2 span:before { content: ""; position: absolute; width: calc(100% + 12px); height: 15px; left: -6px; bottom: -3px; background: rgba(88, 78, 158, 0.1); background: linear-gradient(90deg, rgba(223, 39, 24, 0.1) 0%, rgba(88, 78, 158, 0.1) 100%); } body.bf2 #contents .voice .p_title .btn-more{ position: absolute; bottom: 11px; right: 0; } body.bf2 #contents .voice .swiper-container_voice{ width: 100%; margin: -6px 0; padding: 6px 6%; } .bf2 #goodslist { background: #fff; padding: 40px 6%; } /*-------------------- ショップニュースの店長ボイス TOPページも兼用 --------------------*/ #contents .voice .p_title { } #contents .voice .p_title h2 { font-family: var(--fontfamily-english); font-size: 24px; background: #fff; margin: 0; padding: 20px 0 12px; border-bottom: 0; width: auto; text-align: left;} #contents .voice .p_title ul { width: 100%; padding: 0; } #contents .voice .p_title ul li { width: 100%; } #contents .voice .swiper-container_voice { width: calc(100% + 120px); display: flex; overflow: hidden; box-sizing: border-box; padding: 8px 60px; margin: 0 -60px; position: relative; } #contents .voice .swiper-button-next, #contents .voice .swiper-button-prev{ transition-duration: 0.2s; background: rgba(51,51,51,0.3); color: #fff; text-align: center; width: 30px; height: 100%; top: 0; margin: 0; padding: 0; box-sizing: border-box; } #contents .voice .swiper-button-next{ right: 0; border-top-left-radius: 100px; border-bottom-left-radius: 100px; padding-left: 4px; } #contents .voice .swiper-button-prev{ left: 0; border-top-right-radius: 100px; border-bottom-right-radius: 100px; padding-right: 4px; } #contents .voice .swiper-button-next:after{ font-family: var(--fontfamily-icon); content: "\e5cc"; } #contents .voice .swiper-button-prev:after{ font-family: var(--fontfamily-icon); content: "\e5cb"; } #contents .voice .swiper-button-next:after, #contents .voice .swiper-button-prev:after{ font-size: 50px; font-weight: 200; } #contents .voice .swiper-button-next.swiper-button-disabled, #contents .voice .swiper-button-prev.swiper-button-disabled{ opacity: 0; } #contents .voice .swiper-container_voice.one_item{ width: calc((100% - 20px) / 2); margin: 0; padding: 8px 0; } #contents .voice .swiper-container_voice.one_item .swiper-button-next, #contents .voice .swiper-container_voice.one_item .swiper-button-prev{ display: none; } #contents .voice ul{ display: flex; } #contents .voice ul li { flex-shrink: 0; height: auto; min-height: 94px; border: 2px solid var(--color-base-line-light); border-radius:0 var(--box-radius-xlarge) 0 var(--box-radius-xlarge)/0 var(--box-radius-xlarge) 0 var(--box-radius-xlarge); box-sizing: border-box; position: relative; } #contents .voice ul li:hover { opacity: 0.7; } #contents .voice .swiper-container_voice.one_item ul li { width: 100%; } .pc #contents .voice .swiper-container_voice.two_item ul li{ width: calc((100% - 15px) / 2 )!important; } .pc #contents .voice .swiper-container_voice ul li .detail{ padding: 14px 18px; } #contents .voice ul .logoimg{ margin-right: 10px; float: right; padding: 10px; display: none; } #contents .voice ul .logoimg .logo{ background-size: contain; background-repeat: no-repeat; background-position: center center; display: block; width: 70px; height: 70px; margin: 0 auto; } #contents .voice ul .detail { width: 100%; float: left; box-sizing: border-box; position: relative; } #contents .voice ul .goodsname { font-weight: bold; } #contents .voice ul .sendtime{ color: var(--color-base-accent-dark); display: block; padding: 0; font-size: 12px; font-weight: bold; ; } #contents .voice ul .sendtime:before { content: "\e8b5"; width: 20px; height: 20px; display: inline-block; vertical-align: top; position: relative; top: 1px; left: 0; font-family: var(--fontfamily-icon); font-size: 20px; font-weight: normal; } #contents .voice ul .shopname { display: block; font-size: 12px; } #contents .voice ul .wraplink{ opacity: 0; width: 100%; height: 100%; position: absolute; top:0; left: 0; } #contents .btn-more { font-family: var(--fontfamily-english); display: inline-block; padding: 8px 22px 8px 12px; font-size: 16px; border-radius: var(--box-radius-small); line-height: 1em; background: var(--color-base-text-light); color: #fff; position: relative; } #contents .btn-more:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0; color: #fff; vertical-align: middle; position: absolute; top: calc(50% - 12px); right: 0; line-height: 1em; font-size: 24px; } /* --------------------------------------- ニュース、クーポン、ボイス、求人のタブ --------------------------------------- */ .shopnews_tab { height: 70px; margin: 0 0 0; border-bottom: 1px solid var(--color-base-line-dark); display: flex; justify-content: space-around; } .shopnews_tab li { width: 100%; 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: var(--color-base-bg-light); width: 100%; height: 70px; line-height: 70px; position: relative; } .pc .shopnews_tab li a br{ display: none; } .shopnews_tab li.current a { position: relative; background: var(--color-base-text-light); 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: -22px; width: 0; height: 0; border: 12px solid transparent; left: 36%; left: calc(50% - 12px); border-top: 12px solid var(--color-base-text-light); } .shopnews_tab li a .num { font-size: 14px; font-family: var(--fontfamily-english); line-height: 1em; text-align: center; background: var(--color-base-accent-dark); display: block; width: 30px; height: 30px; border-radius: 50%; box-sizing: border-box; opacity: 1.0; color: #fff; padding: 8px 0 0 2px; position: absolute; top: -8px; right: 8px; } .shopnews_tab li.current a:before{ color: #fff; } /* --------------------------------------------- mdカテゴリ(shop/md_cat_list.jsp) --------------------------------------------- */ .md_cat_list #contents #goodslist { padding: 40px 6%; background: #fff; } .md_cat_list #contents #goodslist .price_date{ padding: 20px; }