@charset "UTF-8"; @import url("../lib/iconfont/style.css"); @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"); .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' -25, 'opsz' 48 } /*基本設定*/ :root { --color-base-text-dark: #333; /*テキストの色*/ --color-base-text-lightshade: #bcc6c8; /*すこし明るいテキストの色*/ --color-base-line-dark: #bcc6c8; /*主に濃い罫線グレー*/ --color-base-line-light: #e3e8e9; /*主に薄い罫線グレー*/ --color-base-bg-light: #e3e8e9; /*薄いグレー */ --color-base-main-dark: #333; /*メインカラー*/ --color-base-main-light: #e3e8e9; /*メイン薄いカラー*/ --color-base-main-midlight: #e3e8e9; /*メイン少し薄いカラー　主にボタン用*/ --color-base-accent-dark: #E93722; /*アクセントカラー*/ --color-base-accent-light: #fce1de; /*アクセント薄いカラー*/ --color-base-sub1-dark: #005160; /*サブカラー1*/ --color-base-sub1-light: rgba(0, 81, 96, 0.5); /*サブカラー1うすい*/ --color-base-sub2-dark: #e95377; /*サブカラー2*/ --color-base-sub2-light: #fef7fa; /*サブカラー2うすい*/ --fontfamily-base: "Noto Sans JP", "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; --fontfamily-english: "Cantarell", sans-serif; --fontfamily-icon: "Material Symbols Outlined"; --iconfont-FILL1-set: 'FILL' 1; --iconfont-wght700GRAD200-set: 'wght' 700,'GRAD' 200; /**/ --color-goodslike: #E93722; --inner-Max-Width :1400px; --inner-Min-Width :960px; --inner-Width :80%; --box-radius-small:5px; --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;} .shop_header {font-size: 15px;} header nav .gn__inTitle, footer .sc_foot_desc a, footer .footer_menu dl dt, footer .footer_list ul li, footer .ad_foot_desc address, .common_navi_btn .guidenav .guidenav_guide li a, .tag_list_name a, #shoppage .pickUp__gr, #recruit .cat3_view article.item tr th, #cat3_view article.item tr th {font-size: 14px;} footer .ad_foot_desc .copyright, #recruit .cat3_view article.item tr td, #cat3_view article.item tr td, .cat_items article.item .desc .fromto {font-size: 12px;} .ico_jobs, .ico_new2, .ico_coupon {font-size: 11px;} header nav .gn__inSubttl {font-size: 10px;} em.icon__bimiyokocho{ align-items: center; color: #fff; display: flex; justify-content: center; padding-bottom: .125rem; text-align: center; width: 6rem; margin: .125rem 0; font-size: 14px; line-height: 1.2em;} /* の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: 70% 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;'; border-radius: 0px; } .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); font-weight: 700; color: var(--color-base-accent-dark); } .ico_jobs, .ico_new2, .ico_coupon { display: inline-block; text-decoration: none; padding: 0 2px; border-radius: 2px; line-height: 140%; margin: 0 0px 0 3px; vertical-align: middle; } .ico_jobs { border: 1px solid var(--color-base-sub1-dark); color: var(--color-base-sub1-dark); } .ico_new2 { color: var(--color-base-accent-dark); font-weight: bold; font-family: var(--fontfamily-english); vertical-align: baseline; } .ico_coupon { border: 1px solid var(--color-base-accent-dark); color: var(--color-base-accent-dark); } span.sale { color: #f00; } .arw_r { position: relative; } .arw_r:after { content: ""; display: block; position: absolute; top: 38%; width: 0; height: 0; border: 4px solid transparent; left: 92%; border-left: 5px solid var(--color-base-sub1-dark); } .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: #aaa; border-radius: 50%; opacity: 0.7; } .to-top a:before { font-family: var(--fontfamily-icon); content: "\e5d8"; font-weight: 900; font-size: 28px; 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; } @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: 16px 0; margin: 0 auto; font-size: 18px; font-weight: bold; text-align: center; } #contents > h2 { background-image: url(../img/bg_h2whiteback.png), url(../img/bg_pattern1.png); background-repeat: repeat-y,repeat; background-position: center bottom,center 10px; background-size: 960px 80px, auto; } #contents-main { float: left; width: calc(100% - 320px); padding: 20px 30px; } #contents-main.all { width: 100%; float: none; box-sizing: border-box; padding: 30px; } #contents-main h3 { padding: 16px; font-weight: bold; font-size: 16px; background: var(--color-base-bg-light); text-align: center; } #sub{ float: right; width: 240px; margin: 30px 0 0 0; } /*----------------------------------------- header部 -----------------------------------------*/ #main_header h1{ display:none; } #main_header { position: relative; border-bottom: 4px solid var(--color-base-line-light); background: rgba(255, 255, 255, 0.9); z-index: 100; } #main_header .sc_header_top_navi { width:100%; background: var(--color-base-line-light); height:30px; } #main_header .head_lang { position: absolute; right:0; top:0px; display: inline-block; border-top:none; box-sizing: border-box; height:30px; } #main_header .head_lang li { display: inline-block; vertical-align: top; } #main_header .head_lang li a{ background: #333; color: #fff; font-family: var(--fontfamily-english); font-weight: 700; display: block; text-align: center; font-size: 12px; line-height: 26px; -webkit-transition-duration: .1s; transition-duration: .1s; padding: 0 10px 0 6px; } #main_header .head_lang li a:before{ display: inline-block; margin:0; vertical-align: middle; content: "\e894"; width: 24px; height: 24px; font-family: var(--fontfamily-icon); font-size: 20px; line-height: 1em; font-weight: normal; } #main_header .head_lang li a:hover { opacity: 1; padding-top: 3px; } #main_header .head_lang.active li a { font-weight:bold; } /*-------------------------------------------------------- .header_logo ロゴ表示領域 -------------------------------------------------------*/ .header_logo{ width: 150px; height: 50px; margin: 0 auto; padding: 20px 0 10px; line-height: 0; } .header_logo img{ width: 100%; vertical-align: middle; } header .head_icons { position: absolute; display: inline-block; top: 50px; right: 0px; } header .head_icons ul li { float: left; width: 32px; height: 32px; padding: 0 5px; text-align: right; } header .head_icons ul li a { display: block; width: 100%; height: 100%; border-radius: 50%; text-align: center; } /*------------------------------------------------------- グローバルメニュー ------------------------------------------------------------*/ .header_glo{ width: 100%; } .glo_menu_list{ display: flex; justify-content: space-around; } .glo_menu_list .glo_menu_items { height: 100%; padding: 0 2px; 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 { font-size:0.94em; } .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; } .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で下線を出さない*/ } .header_glo nav ul.inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; } .header_glo nav ul.inner::after { display: none; } .header_glo nav ul { margin: 10px 0 0 0; } .header_glo nav ul li { -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 15px; } .header_glo nav ul li.active a::after { background: var(--color-base-accent-dark); height: 4px; } .header_glo nav:last-of-type a { padding-right: 0; } .header_glo nav a { display: block; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; padding: 8px 0; /**/ position: relative; } .header_glo nav a::after { content: ""; display: block; width: 100%; height: 0; -webkit-transition-duration: .2s; transition-duration: .2s; position: absolute; bottom: -4px; } .header_glo nav a:hover::after { background: var(--color-base-accent-dark); height: 4px; } .header_glo nav .gn__inWrap { width: 100%; background: rgba(255, 255, 255, 0.8); margin: 0 auto; position: absolute; -webkit-transition-duration: .2s; transition-duration: .2s; top: calc(100% + 4px); left: 0; right: 0; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 30px 40px 20px 50px; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; /*最初は非表示*/ display: none; height: 0; } .header_glo nav .active .gn__inWrap { display: -webkit-box; display: -ms-flexbox; display: flex; height: auto; } .header_glo nav ul li .gn__inItem { width: calc((100% / 2) - 10px); margin: 0 10px 10px 0; height: 100px; -webkit-box-sizing: border-box; box-sizing: border-box; } .header_glo nav ul li .gn__inItem a { display: block; background: #fff; border: 1px solid var(--color-base-line-dark); width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px; text-align: left; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; -webkit-transition-duration: .2s; transition-duration: .2s; } .header_glo nav ul li .gn__inItem a::after { content: "\e5cc"; background: transparent; top: 0; bottom: 0; margin: auto; height: 1em; right: 0; width: 30px; text-align: center; font-family: var(--fontfamily-icon); font-weight: bold; font-size: 22px; color: var(--color-base-accent-dark); position: absolute; line-height: 1em; right: 4px; } .header_glo nav ul li .gn__inItem a.exLink::after { content: "\e89e"; color: var(--color-base-text-lightshade); font-weight: bold; font-size: 20px; right: 8px; } .pc .header_glo nav ul li .gn__inItem a:hover { opacity: 1; border-color: var(--color-base-accent-dark); } .header_glo nav ul li.about .gn__inItem { width: calc((100% / 3) - 10px); height: 70px; } .header_glo nav ul li.about .gn__inItem a { padding: 10px 18px; } body.bf0.pc header nav li.top > a:after, body[class*="floor"].pc header nav li.floor > a:after, body.bf6.pc header nav li.shopnavi > a:after, body.bf7.pc header nav li.shopnavi > a:after, body.bf8.pc header nav li.shopnavi > a:after, body[class*="gourmet"].pc header nav li.gourmet > a:after, body[class*="shoplist"].pc header nav li.shopnavi > a:after, body[class*="eventnews"].pc header nav li.event > a:after, body.calendar.pc header nav li.event > a:after, body.bf2.pc header nav li.snews > a:after, body.item_news.pc header nav li.snews > a:after, body.item_coupon.pc header nav li.snews > a:after, body[class*="tag"].pc header nav li.snews > a:after, body.favorite.pc header nav li.snews > a:after, body.feature.pc header nav li.snews > a:after, body.guide.pc header nav li.about > a:after, body.pageid_8.pc header nav li.ev_space > a:after, body.pageid_9.pc header nav li.other > a:after, body.pageid_10.pc header nav li.concept > a:after, body.pageid_1.pc header nav li.information > a:after, body.pageid_3.pc header nav li.location > a:after { background: var(--color-base-accent-dark); height: 4px; } .header_glo nav .gn__inImg { width: 80px; height: 80px; float: left; background: transparent center / cover; margin: 0 10px 0 0; } .header_glo nav .gn__inTitle { line-height: 1.4em; } .header_glo nav li.facility .gn__inWrap li:nth-child(3) .gn__inTitle { letter-spacing: -0.1em; } .header_glo nav li.facility .gn__inWrap li:nth-child(3) .gn__inTitle:first-line { font-size: 10px; } .header_glo nav .gn__inSubttl { line-height: 1.4em; } /*--------------------- 重要なおしらせ ----------------------*/ .AllPageBnr{ /*縦のmargin,paddingは０以外指定NG*/ /* width:1020px; margin:30px auto; display: flex; */ } .AllPageBnr .bnr_title{ display: none; /*jsで表示させる*/ width: 280px; } .AllPageBnr .bnr_title p{ background:#f00; 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: #f00; 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 #f00; */ } .AllPageBnr{ width:100%; margin:0; text-align: center; } .AllPageBnr .bnr_list { width: 100%; margin:0; border:none; } .AllPageBnr .bnr_list .bnr_item { border-bottom: 1px solid var(--color-base-line-dark); text-align: center; padding:4px 0; font-size:12px; background: #fff; } .AllPageBnr .bnr_list .bnr_item em.date{ display: none; } .AllPageBnr .bnr_list .bnr_item a{ text-decoration: underline; } .AllPageBnr .bnr_list .bnr_item:before{ font-family: var(--fontfamily-icon); content: "\e645"; color: #fff; border-radius: var(--box-radius-full); background: #f00; 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; background: #fff; } footer .inner { padding: 20px 0 0; width: 960px; } footer .sc_foot_desc { background: var(--color-base-bg-light); color: var(--color-base-text-dark); } footer .sc_foot_desc a { color: var(--color-base-text-dark); } .footer__sBnr { padding: 20px 0 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .footer__sBnr li { width: calc((100% / 3) - (30px / 3) * 2); height: 90px; } .footer__sBnr li::after { content: ""; clear: both; display: block; } .footer__sBnr li a { display: block; background: #fff; border: 1px solid var(--color-base-line-dark); width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px; text-align: left; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .footer__sBnr li a::after { content: "\e5cc"; background: transparent; top: 0; bottom: 0; margin: auto; height: 1em; right: 2px; width: 30px; text-align: center; font-family: var(--fontfamily-icon); position: absolute; line-height: 1em; font-variation-settings: var(--iconfont-wght700GRAD200-set); color: var(--color-base-accent-dark); vertical-align: middle; font-size: 22px; } .footer__sBnr li .sBnr__theater img { height: 60px; padding-left: 10px; } .footer__sBnr li .sBnr__hotel img { padding: 0 0 0 5px; } .footer__sBnr li .sBnr__sns img { height: 60px; margin: auto; box-sizing: border-box; } .footer__sBnr li:nth-of-type(3){ border-top: 4px solid var(--color-base-sub1-dark); border-bottom: 4px solid var(--color-base-sub1-dark); border-right: 4px solid var(--color-base-accent-dark); border-left: 4px solid var(--color-base-accent-dark); box-sizing: border-box; } footer .footer_menu { padding: 0 0 50px; border-top: 4px solid #fff; display: flex; flex-wrap: wrap; justify-content: space-around; box-sizing: border-box; } footer .footer_menu dl { margin: 0; padding: 30px 0 0; box-sizing: border-box; vertical-align: top; } footer .footer_menu dl dt { font-weight: bold; margin: 0 0 6px; } footer .footer_menu dl li::before { content: "\e5cc"; font-family: var(--fontfamily-icon); font-variation-settings: var(--iconfont-wght700GRAD200-set); color: var(--color-base-accent-dark); vertical-align: middle; font-size: 20px; } footer .footer_menu dl li a[target*="_blank"]:after, footer .footer_list ul li a[target*="_blank"]:after{ content: "\e89e"; font-family: var(--fontfamily-icon); font-size: 16px; line-height: 1.2em; vertical-align: middle; margin-left: 2px; } footer .footer_list { padding: 0; border-bottom: 4px solid var(--color-base-line-light); } footer .footer_list ul { padding: 12px 0 18px; text-align: center; } footer .footer_list ul li { display: inline-block; letter-spacing: normal; padding: 0px 20px 0 16px; line-height: 100%; border-right: 1px solid #333; } footer .footer_list ul li:last-of-type { border: none; } footer .footer_list ul li i { margin-left: 4px; } footer .ad_foot_desc { padding: 40px 0; position: relative; } footer .ad_foot_desc .footer_sclogo { width: 150px; display: block; float: left; margin-right: 28px; } footer .ad_foot_desc address { line-height: 2em; } footer .ad_foot_desc address strong { display: block; } footer .ad_foot_desc address .tel { display: block; } footer .ad_foot_desc .copyright { font-family: var(--fontfamily-english); font-weight: bold; } footer .ad_foot_desc .others { position: absolute; bottom: 50px; right: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; } footer .ad_foot_desc .others__logo { width: 100px; height: 50px; margin-left: 10px; position: relative; display: block; text-align: center; } footer .ad_foot_desc .others__logo a { display: block; border: 1px solid var(--color-base-line-dark); width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 8px 10px; } footer .ad_foot_desc .others__logo span{ display: block; width: 100%; box-sizing: border-box; font-size: 10px; } /********************************** メインバナー、中バナー、小バナー関連 TOPページ、全ページフッター共通 ******************************************/ .main_banner_area{ height: auto; margin: 0 auto; width:100%; background: var(--color-base-line-light); padding:40px 0; } body:not(.bf0) .main_banner_area{ padding-bottom: 20px; } .main_banner_area .bnr_wrap{ width: 100%; 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; } .pc .main_banner_area .bnr_wrap #banner ul li{ width: 660px; height: 420px; padding: 0 25px 5px; } .main_banner_area .bnr_wrap #banner ul li img{ width: 100%; height: 100%; display: block; padding: 0; box-sizing: border-box; border: 10px solid #fff; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.4); background: #fff; transition-duration: .2s; } .main_banner_area .bnr_wrap #banner ul li a:hover{ opacity: 1; } /*Swiperパーツの制御*/ .main_banner_area #banner .swiper-pagination { position: absolute; margin: auto; left: 0; right: 0; bottom: -25px; } .main_banner_area #banner .swiper-pagination-bullet { width:10px; height:10px; background: #fff; opacity: 1; } .main_banner_area #banner .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: var(--color-base-accent-dark); } /*バナー*/ .main_banner_area .swiper-button-next, .main_banner_area .swiper-button-prev { display: block; width: 40px; height: 40px; background: #fff; border-radius: 40px; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4); } .main_banner_area .swiper-button-next { right: calc(50% - 380px); left: auto; } .main_banner_area .swiper-button-prev { left: calc(50% - 380px); right: auto; } .main_banner_area .swiper-button-next:after, .main_banner_area .swiper-button-prev:after { font-family: var(--fontfamily-icon); content: "\e5cc"; padding: 6px 8px 0; font-size: 28px; font-variation-settings: var(--iconfont-wght700GRAD200-set); color: var(--color-base-sub1-dark); display: block; } .main_banner_area .swiper-button-prev:after { content: "\e5cb"; padding: 6px 8px 0 6px; } /*ミニバナー*/ .main_banner_area #smallbanner1{ width:900px; height:80px; margin: 20px auto; box-sizing: border-box; padding:0 46px; position:relative; } .main_banner_area #smallbanner1 .swiper-container { overflow: hidden; padding:4px 4px; box-sizing: border-box; margin-top:-4px; } .main_banner_area #smallbanner1 ul li{ width:256px; height:81px; overflow: hidden; } .main_banner_area #smallbanner1 ul li img{ width:100%; height:100%; object-fit:cover; /*上から表示して下をカットする場合 */ object-position: 50% 0; } .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; border-radius: 0; z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; background: #333; opacity: 1; } .main_banner_area #smallbanner1 .swiper-button-prev{ left: calc(50% - 440px); right: auto; } .main_banner_area #smallbanner1 .swiper-button-next{ right: calc(50% - 440px); left: auto; } .main_banner_area #smallbanner1 .swiper-button-next:after, .main_banner_area #smallbanner1 .swiper-button-prev:after { padding: 0; color: #fff; } .main_banner_area #smallbanner1 li { box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.1); } /*フッター*/ .footer.shopsearch{ padding: 20px 0 0; background: #fff; } .footer.shopsearch h4 { font-family: var(--fontfamily-english); font-weight: bold; text-align: center; font-size: 18px; padding: 20px 0 18px; position: relative; } .footer.shopsearch h4::after { content: ""; display: block; position: absolute; margin: auto; left: 0; right: 0; bottom: 10px; width: 160px; height: 4px; background: var(--color-base-accent-dark); } .shop_catlist { background: var(--color-base-bg-light); width: 960px; margin: 0 auto; border-radius: var(--box-radius-small); } .shop_catlist .shoplist { padding: 0 10px 20px; } .shop_catlist h4 { font-family: var(--fontfamily-english); font-weight: bold; text-align: center; font-size: 18px; padding: 20px 0 6px; margin: 0 0 24px; position: relative; } .shop_catlist h4::after { content: ""; display: block; width: 160px; height: 4px; position: absolute; left: 0; right: 0; bottom: -4px; margin: auto; background: var(--color-base-accent-dark); } .shop_catlist ul#this_cat_shoplist { text-align: center; } .shop_catlist ul#this_cat_shoplist li { display: inline-block; margin: 0 4px 10px; } .shop_catlist ul#this_cat_shoplist li a { line-height: 25px; padding: 2px 6px; background: #fff; border-radius: 4px; display: inline-block; font-size: 14px; } .footer.shopsearch .tag_list_name a { background: var(--color-base-bg-light); } .footer.shopsearch #cat_title_list { display: flex; justify-content: center; padding: 10px 20px 30px; flex-wrap: wrap; gap: 15px; } .footer.shopsearch #cat_title_list .catttl { width: calc(100% / 3 - 10px); } .footer.shopsearch #cat_title_list .catttl a { display: block; width: 100%; height: 100%; border-radius: 4px; border: 1px solid var(--color-base-line-dark); background: var(--color-base-bg-light); padding: 10px 25px 10px 10px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; text-align: center; font-weight: bold; } .footer.shopsearch #cat_title_list .catttl a:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; font-size: 30px; color: var(--color-base-accent-dark); vertical-align: middle; position: absolute; top: calc(50% - 12px); right: 0; } /* ID4を非表示 */ .footer.shopsearch #cat_title_list .catttl.cat4{ display: none; } /*ナビボタン*/ .common_navi_btn{ background: #fff; } .common_navi_btn .guidenav { width: 960px; margin: 0 auto; padding: 20px 0; } .common_navi_btn .guidenav .guidenav_guide { overflow: hidden; } .common_navi_btn .guidenav .guidenav_guide li { width: 16%; width: calc(100% / 6); float: left; border-right: 1px solid var(--color-base-line-dark); -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } .common_navi_btn .guidenav .guidenav_guide li:first-of-type { border-left: 1px solid var(--color-base-line-dark); } .common_navi_btn .guidenav .guidenav_guide li a { display: block; padding: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; line-height: 1.2em; } .common_navi_btn .guidenav .guidenav_guide li a *[class*='iconkitte'] { font-size: 40px; display: block; margin-bottom: 10px; } .common_navi_btn .guidenav .guidenav_guide li a *[class*='iconkitte']::before { color: var(--color-base-text-dark); } /* .common_navi_btn .guidenav .guidenav_guide li a[target*="_blank"]:after{ content: "\e89e"; font-family: var(--fontfamily-icon); font-size: 16px; position: absolute; top: 30px; right: 30px; } */ .common_navi_btn .guidenav .guidenav_guide .cnt { position: absolute; top: 4px; right: 22px; display: block; width: 40px; background: #333; border-radius: 100px; color: #fff; font-family: var(--fontfamily-english); line-height: 20px; font-weight: bold; } .common_navi_btn .subGuide { width: 960px; margin: 0 auto; padding: 0 0 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 20px; } .common_navi_btn .subGuide_list { width: 420px; text-align: center; font-size: 14px; /* margin: 0 18px; */ } .common_navi_btn .subGuide_list a { border: 1px solid var(--color-base-line-dark);; display: block; width: 100%; border-radius: 100px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; padding: 16px 26px 16px 60px; } .common_navi_btn .subGuide_list span[class*='iconkitte'] { font-size: 34px; position: absolute; top: .35em; left: 30px; } .common_navi_btn .subGuide_list span[class*='iconkitte']::before { color: var(--color-base-text-dark); } .common_navi_btn .subGuide_list em::after { content: "\e5cc"; font-family: var(--fontfamily-icon); font-weight: bold; color: var(--color-base-accent-dark); position: absolute; right: 16px; font-size: 20px; } .common_navi_btn .subGuide_list em::before { content: ""; vertical-align: top; color: var(--color-base-accent-dark); font-size: 20px; font-family: var(--fontfamily-english); font-weight: bold; margin: 0 15px 0 0; } .common_navi_btn .subGuide_list a[href*='floor'] em::before { content: "FLOOR GUIDE"; } .common_navi_btn .subGuide_list a[href*='gourmet'] em::before { content: "GOURMET GUIDE"; } /*table*/ .view .table01 { border-collapse: collapse; width: 100%; border-top: 4px solid var(--color-base-line-light); border-bottom: 4px solid var(--color-base-line-light); } .view .table01 tr { border-bottom: 1px solid var(--color-base-line-dark); } .view .table01 tr:last-child { border-bottom: none; } .view .table01 th, .view .table01 td { padding: 20px 10px; font-size: 14px; line-height: 1.3em; -webkit-box-sizing: border-box; box-sizing: border-box; } .view .table01 th { background: var(--color-base-bg-light); font-weight: bold; text-align: center; } .view .table01 td { padding-left: 20px; } /*sidemenu*/ .sidemenu { border-top: 1px solid var(--color-base-line-dark); border-bottom: 1px solid var(--color-base-line-dark); } .sidemenu dt { display: none; font-family: var(--fontfamily-english); font-weight: 700; font-size: 20px; text-align: center; padding: 0 0 10px; } .sidemenu dd > a { display: block; padding: 16px; background: var(--color-base-bg-light); 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; color: var(--color-base-accent-dark); font-size: 24px; vertical-align: middle; position: absolute; right: 0; top: calc(50% - 12px); } .sidemenu dd { border-bottom: 1px solid var(--color-base-line-dark); } .sidemenu dd:last-child { border-bottom: none; } .sidemenu dd ul { font-size: 90%; padding: 0 0 0 8px; background: var(--color-base-bg-light); } .sidemenu dd ul li { list-style-position: outside; background: #fff; border-top: 1px dotted var(--color-base-line-dark); } .sidemenu dd ul li a { line-height: 1.5em; display: block; padding: 10px; } .sidemenu dd:last-child ul li:last-child { margin-bottom: 10px; } .sidemenu span.num { font-family: var(--fontfamily-english); font-weight: bold; letter-spacing: 0.1em; font-size: 90%; } #sub .sc_facility dl { margin: 24px 0 12px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid var(--color-base-line-dark); padding: 12px; } #sub .sc_facility #sc_map { height: 190px; width: 100%; margin: 10px 0 4px; background: #eeeeee; border: 4px solid var(--color-base-line-light); -webkit-box-sizing: border-box; box-sizing: border-box; } #sub .sc_facility #sc_map iframe { width: 100%; height: 100%; border: 0; } #sub .sc_facility dt { margin: 4px 0 0; text-align: center; font-size: 16px; font-weight: bold; } #sub .sc_facility dt:before{ margin: 0 4px 0 0; font-size: 18px; font-family: var(--fontfamily-icon); content: "\e0c8"; font-variation-settings: var(--iconfont-FILL1-set); vertical-align: middle; } #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: 60px; position: relative; border: 1px solid var(--color-base-line-dark); } #sub .sc_facility dd a.access_link:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; color: var(--color-base-accent-dark); font-size: 24px; vertical-align: middle; position: absolute; right: 8px; } #h4_shopsearch_tag { font-family: var(--fontfamily-english); font-weight: bold; text-align: center; font-size: 18px; padding: 18px 0 20px; } #h4_shopsearch_tag a{ color: var(--color-base-main-dark); } #h4_shopsearch_tag:before { content: "#"; margin: 0 3px 0 0; } .tag_list { padding: 0 20px 15px; text-align: center; } .tag_list_name { display: inline-block; margin: 0 5px 10px; border-radius: 4px; } .tag_list_name a { background: var(--color-base-bg-light); padding: 3px 10px; display: block; border-radius: 4px; border: 1px solid var(--color-base-line-dark); line-height: 1.6em; } .tag_list_name a:before { content: "#"; margin: 0 3px 0 0; color: var(--color-base-accent-dark); font-family: var(--fontfamily-english); font-weight: bold; font-size: 18px; vertical-align: bottom; display: inline-block; } #h4_shopsearch_mdcat { font-family: var(--fontfamily-english); font-weight: bold; text-align: center; font-size: 18px; padding: 20px 0 18px; } .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: 4px solid var(--color-base-line-light); background: #fff; font-size: 14px; } .mdlistiew .mdcat a:before { font-family: var(--fontfamily-icon); content: "\e157"; margin: 0 4px 0 0; vertical-align: middle; transform: rotate(-45deg); display: inline-block; font-size: 18px; } .item .social { margin: 0 auto; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 20px 0 0; text-align: center; } .item .social:before { font-family: var(--fontfamily-english); font-size: 18px; font-weight: bold; content: "SHARE ON"; margin-bottom: 8px; display: block; color: var(--color-base-text-dark); } .item .social a { display: inline-block; overflow: hidden; width: 40px; height: 40px; margin: 0 14px 0 16px; text-indent: -999999em; } .item .social a:last-of-type { border-right: none; } .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-accent-light); border-radius: var(--box-radius-full); 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; color: var(--color-base-accent-dark); } .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: 20px; left: 0; right: 0; margin: auto; } .goods_like_btn.mini p { background: none; height: auto; border: 1px solid var(--color-base-line-dark); border-radius: 50px; padding: 0px 12px; line-height: 23px; } .goods_like_btn.mini p i { display: inline-block; font-size: 1.4em; margin-right: 2px; color: var(--color-base-accent-dark); position: relative; top: 0; color: var(--color-base-accent-dark); } .goods_like_btn.mini p span { display: inline-block; font-size: 1.2em; letter-spacing: 1px; line-height: 1em; color: var(--color-base-accent-dark); border-radius: 2px; position: relative; font-family: var(--fontfamily-english); } /*いいねボタンのハート指定(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 { background: url(../img/bg_pattern1.png) repeat center; } .shop_header .inner { background: #fff; margin: 0 auto 0; position: relative; } .shop_header #shop_title { position: relative; padding: 20px 0 15px 40px; -webkit-box-sizing: border-box; box-sizing: border-box; min-height: 240px; } .shop_header .inner #shop_title .bg_shop_image { position: absolute; right: 0; top: 0; display: block; width: 60%; height: 100%; background-position: center; background-size: cover; z-index: 1; } .shop_header .inner #shop_title .bg_shop_image:before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 40%; height: 100%; background: -webkit-gradient(linear, left top, right top, from(white), color-stop(16%, white), color-stop(99%, rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, white 0%, white 16%, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); } .shop_header #shop_title .shop_name { width: 50%; z-index: 10; position: relative; } .shop_header #shop_title .category_detail{ background: var(--color-base-bg-light); border-radius: 4px; display: inline-block; padding: 5px 12px; line-height: 1.4em; margin: 0 0 10px; font-size: 14px; white-space: nowrap; } .shop_header #shop_title h2 { font-size: 24px; font-weight: bold; line-height: 30px; /*共通スタイルを無効か*/ padding: 0; margin: 0; border: none; margin: 0 0 2px; text-align: left; background: none; } .shop_header .inner #shop_title .top_logo { margin: 20px 0 0; } .shop_header .inner #shop_title .top_logo img { max-height: 60px; } .shop_header .inner .shopmenu { position: absolute; right: 10px; bottom: 4px; z-index: 10; } .shop_header .inner .shopmenu li { display: inline-block; overflow: hidden; margin: 0 2px; } .shop_header .inner .shopmenu li a { font-size: 13px; /**/ background: #333; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 80px; height: 100px; color: #fff; text-align: center; padding: 24px 0 0; line-height: 140%; font-weight: bold; } .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: 22px; padding: 8px 0 0; } .shop_header .shopmenu li a span { display: block; } .pc .shop_header > .inner { /* width: 80%; */ min-width: var(--inner-Min-Width); max-width: var(--inner-Max-Width); border-bottom: 1px solid var(--color-base-line-dark); } .shop_header #shop_status { min-height: 120px; } .shop_header #shop_status { border-top:1px solid var(--color-base-line-dark); background: #fff; } .shop_header #shop_status .eigyouhour, .shop_header #shop_status .tel_floor{ min-height: 60px; box-sizing: border-box; } .shop_header #shop_status .eigyouhour{ border-bottom:1px solid var(--color-base-line-dark); white-space: pre-wrap; } .shop_header #shop_status .eigyouhour p, .shop_header #shop_status .tel_floor p{ padding:18px 20px; } .shop_header #shop_status .tel_floor { display: flex; align-items: center; } .shop_header #shop_status .tel_floor .tel{ width:40%; } .pc .shop_header #shop_status .eigyouhour p.hour{ padding: 14px 300px 14px 63px; position: relative; } .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: 26px; vertical-align: middle; width: 40px; display: inline-block; text-align: center; } .shop_header #shop_status .eigyouhour p.hour:before{ content: "\e8b5"; display: block; position: absolute; top: 16px; left: 20px; } .shop_header #shop_status .tel_floor p.tel:before{ content: "\e9cd"; font-variation-settings: var(--iconfont-FILL1-set); } .shop_header #shop_status .tel_floor p.floor:before{ content: "\e569"; font-variation-settings: var(--iconfont-FILL1-set); } .shop_header #shop_status .tel_floor .floor em{ margin-left: 6px; } .shop_header #shop_status .tel_floor .floor em img{ height: 25px; vertical-align: middle; } /*個別ニュース、クーポン、リクルート　ページのヘッダーを調整*/ body.item_recruit .shop_header #shop_title, body.item_coupon .shop_header #shop_title, body.item_news .shop_header #shop_title { min-height: 220px; border-bottom: 1px solid var(--color-base-line-dark); } 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: 0px; top: 100px; transform: scale(0.8); } body.item_recruit .shop_header .inner, body.item_coupon .shop_header .inner, body.item_news .shop_header .inner { margin: 0 auto; } /*個別ページ時新着ニュースタブ非表示*/ body.item_recruit .shop_header .shopmenu li.shopnews, body.item_news .shop_header .shopmenu li.shopnews, body.item_coupon .shop_header .shopmenu li.shopnews{ display: none; } /*--shop_header*--*/ .bf1 #contents-main.all { padding: 0 0 40px; } #shoppage { /* padding:0 16px;*/ } /* ショップページid4を非表示 */ .shop.index .shopmenu .shopinfo.cat4{ display: none; } /*body.bf1 .*/ .view #shoppage #shop_info { padding: 0 0 40px; padding: 0 0 10px; } .view #shoppage #shop_info > .section { border: 4px solid var(--color-base-line-light); } #shoppage #shop_info .intro { padding: 36px 36px 40px; overflow: hidden; } #shoppage #shop_info .desc { font-size: 1.1em; line-height: 1.5em; } #shoppage #shop_info .desc h4 { font-weight: bold; margin: 0 0 20px; font-size: 18px; } #shoppage #shop_info .desc p { white-space:pre-wrap; line-height: 1.6em; font-size: 15px; } #shoppage #shop_info .image { float: right; width: 400px; margin: 0 0 0 32px; border: 1px solid var(--color-base-line-dark); } #shoppage #shop_info .image img { width: 100%; } #shoppage #shop_info .pickup{ margin-top: -10px; } #shoppage #shop_info .pickup div { padding: 15px 0; border-bottom: 4px solid #fff; overflow: hidden; } #shoppage #shop_info .pickup div:last-of-type{ border-bottom: none; } .pickUp__scene { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 26px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .pickUp__scene li { width: calc((100% / 2) - 20px); margin: 10px 10px 30px; background: var(--color-base-bg-light); } .pickUp__scene .pickUp__detail { width: 100%; display: block; padding: 14px 26px; display: block; font-size: 14px; font-weight: bold; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; } .pickUp__scene .pickUp__detail::before { content: "SCENE"; font-family: var(--fontfamily-english); color: var(--color-base-accent-dark); display: inline-block; margin: 0 26px 0 -10px; } /*席数等*/ #shoppage .pickUp__gr { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0 36px; margin: -16px 0 30px; } #shoppage .pickUp__gr .pickUp__grDetail { border: 1px solid var(--color-base-line-dark); border-width: 0 0 1px; padding: 15px 0; font-size: 14px; width: calc(100% / 4); } #shoppage .pickUp__gr .pickUp__grDetail::before { content: ""; font-family: var(--fontfamily-icon); color: var(--color-base-accent-dark); margin: 0 6px 0 0; font-size: 22px; vertical-align: bottom; min-width: 26px; display: inline-block; text-align: center; } #shoppage .pickUp__gr .pickUp__grDetail.icon-chair::before { content: "\e903";font-variation-settings: var(--iconfont-FILL1-set);} #shoppage .pickUp__gr .pickUp__grDetail.icon-budget::before { content: "\e56c";margin: 0 6px 0 0;} #shoppage .pickUp__gr .pickUp__grDetail.icon-a::before { content: "\eb4a";font-variation-settings: var(--iconfont-FILL1-set);} #shoppage .pickUp__gr .pickUp__grDetail.icon-b::before { content: "\eb4f";font-variation-settings: var(--iconfont-FILL1-set);} #shoppage .pickUp__gr .pickUp__grDetail.icon-c::before { content: "\eb4e";font-variation-settings: var(--iconfont-FILL1-set);} #shoppage .pickUp__gr .pickUp__grDetail.icon-d::before { content: "\e9cd";font-variation-settings: var(--iconfont-FILL1-set);} #shoppage .pickUp__gr .pickUp__grDetail.icon-e::before { content: "\e32c";} #shoppage .pickUp__gr .pickUp__grDetail.icon-f::before { content: "\ea12";} #shoppage .pickUp__gr .pickUp__grDetail.icon-g::before { content: "\e614";font-variation-settings: var(--iconfont-FILL1-set);} #shoppage .pickUp__gr .pickUp__grDetail.icon-h::before { content: "\eb41";} #shoppage .pickUp__gr .pickUp__grDetail.icon-i::before { content: "\f1cc";font-variation-settings: var(--iconfont-FILL1-set);} #shoppage .pickUp__gr .pickUp__grDetail.icon-j::before { content: "\f1f3";font-variation-settings: var(--iconfont-FILL1-set);} #shoppage .pickUp__gr .pickUp__grDetail.icon-k::before { content: "\e518";font-variation-settings: var(--iconfont-FILL1-set);} #shoppage .pickUp__gr .pickUp__grDetail.icon-l::before { content: "\e51c";font-variation-settings: var(--iconfont-FILL1-set);} /* #shoppage .pickUp__gr .pickUp__grDetail.icon-delivery::before { content: "\e32c";font-variation-settings: var(--iconfont-FILL1-set); display: inline-block;vertical-align: middle;} .pc #shoppage .pickUp__gr .pickUp__grDetail.icon-delivery::before{padding-top: 4px;} */ #shoppage .pickUp__gr .pickUp__grDetail .chairNum, #shoppage .pickUp__gr .pickUp__grDetail .budgetNum { display: inline-block; } #shoppage .pickUp__gr .pickUp__grDetail.icon-chair, #shoppage .pickUp__gr .pickUp__grDetail.icon-budget, #shoppage .pickUp__gr .pickUp__grDetail.icon-delivery{ width: 100%; } .pc #shoppage .pickUp__gr .pickUp__grDetail.icon-delivery{ display: flex; } #shoppage #shop_info .pickUp__gr .pickUp__grDetail.icon-delivery p{ margin-right: 10px; display: inline-block; padding: 0 0 10px; } .pc #shoppage #shop_info .pickUp__gr .pickUp__grDetail.icon-delivery p{ padding: 4px 0 0; } .icon-delivery .deliveryNum{ display: flex; gap: 10px; width: calc(100% - 170px); } .icon-delivery .deliveryNum li[class*="icon"]{ display: inline-block; overflow: hidden; width: 25%; } .icon-delivery .deliveryNum li[class*="icon"] a{ display: block; padding: 4px; text-align: center; border: 1px solid var(--color-base-line-dark); border-radius: var(--box-radius-xlarge); } .icon-delivery .deliveryNum li[class*="icon"] a:hover{ background: var(--color-base-bg-light); } .icon-delivery .deliveryNum li[class*="icon"] a:before{ content: ""; width: 30px; height: 24px; background-image: url(../img/fig_shop-delivery.png); background-size: auto 24px; display: inline-block; overflow: hidden; background-repeat: no-repeat; padding: 0; margin: 0 5px 0 0; vertical-align: middle; } .icon-delivery .deliveryNum li[class*="icon"] a:after { font-family: var(--fontfamily-icon); content: "\e89e"; margin: 0 0 0 6px; font-size: 18px; vertical-align: middle; } .icon-delivery .deliveryNum li.icon-a a:before{ background-position: 0px 0; } .icon-delivery .deliveryNum li.icon-b a:before{ background-position: -30px 0; } .icon-delivery .deliveryNum li.icon-c a:before{ background-position: -60px 0; width: 22px; } .icon-delivery .deliveryNum li.icon-d a:before{ background-position: -82px 0; } #shoppage #shop_info .pickup h5{ float: left; padding: 4px 0; text-align: center; display: block; width: 60px; } #shoppage #shop_info .pickup h5 span { display: none; } #shoppage #shop_info .pickup h5:before { font-family: var(--fontfamily-icon); margin: 0; font-size: 26px; vertical-align: bottom; } #shoppage #shop_info .pickup .shop-eigyouhour h5:before{ content: "\e8b5"; } #shoppage #shop_info .pickup .shop-tel h5:before{ content: "\e9cd"; font-variation-settings: var(--iconfont-FILL1-set); } #shoppage #shop_info .pickup .shop-tokuten h5:before{ content:"\e8b1"; } #shoppage #shop_info .pickup p { /* float: left;*/ white-space: pre-wrap; font-size:14px; padding:4px; } /*WEB予約ボタン*/ #shoppage #shop_info .shopBooking-wrapper{ margin: 0 25px 30px; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 0; } .shopBooking { text-align: center; margin: 18px 0; } .shopBooking:first-of-type { margin-top: 30px; } .shopBooking:last-of-type { margin-bottom: 36px; } .shopBooking__btn { display: inline-block; color: var(--color-base-text-dark); border: 2px solid var(--color-base-accent-dark); width: calc(100% / 2 - 20px); border-radius: 100px; font-size: 15px; padding: 8px; -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-box-shadow: 2px 2px 0 #e4e9ea; box-shadow: 2px 2px 0 #e4e9ea; margin: 0 10px; box-sizing: border-box; } .shopBooking__btn:after{ font-family: var(--fontfamily-icon); content: "\e89e"; margin: 0 0 0 4px; font-size: 20px; vertical-align: middle; } .shopBooking__btn:hover{ background: var(--color-base-accent-dark); color: #fff; } .shopBooking__btn:hover:before{ color: #fff; } /* ヒトサラ　リンク3つある場合はヒトサラを上部に配置させる（PC表示） */ body.pc #shoppage #shop_info .shopBooking-wrapper:has(.shopBooking__btn:nth-of-type(3)) .shopBooking__btn.hitosara { width: 40vw; } @media screen and (max-width: 1175px) { body.pc #shoppage #shop_info .shopBooking-wrapper:has(.shopBooking__btn:nth-of-type(3)) .shopBooking__btn.hitosara { width: 476px; } } /*WEB予約ボタン｜サイト名出す*/ .shopBooking__btn[href*="gnavi"] .brandsArea::after {content: "(楽天ぐるなび)";} .shopBooking__btn[href*="tabelog"] .brandsArea::after {content: "(食べログ)";} .shopBooking__btn[href*="loco"] .brandsArea::after {content: "(Yahoo!ロコ)";} .shopBooking__btn[href*="ikyu"] .brandsArea::after {content: "(一休.comレストラン)";} .shopBooking__btn[href*="epark"] .brandsArea::after {content: "(EPARK)";} .shopBooking__btn[href*="hotpepper"] .brandsArea::after {content: "(ホットペッパー)";} .shopBooking__btn[href*="favy"] .brandsArea::after {content: "(favy)";} .shopBooking__btn[href*="toreta"] .brandsArea::after {content: "(トレタ)";} .shopBooking__btn[href*="ozmall"] .brandsArea::after {content: "(オズモール)";} .shopBooking__btn[href*="retty"] .brandsArea::after {content: "(Retty)";} .shopBooking__btn[href*="luxa"] .brandsArea::after {content: "(LUXA)";} .shopBooking__btn[href*="hitorsara"] .brandsArea::after {content: "(ヒトサラ)";} .shopBooking__btn[href*="aumo"] .brandsArea::after {content: "(aumo)";} .shopBooking__btn[href*="ekiten"] .brandsArea::after {content: "(エキテン)";} .shopBooking__btn[href*="yelp"] .brandsArea::after {content: "(yelp)";} .shopBooking__btn[href*="tripadvisor"] .brandsArea::after {content: "(トリップアドバイザー)";} .shopBooking__btn[href*="fast-pick"] .brandsArea::after {content: "(Fast Pick)";} .shopBooking__btn[href*="instagram"] .brandsArea::after {content: "(instagram)";} .shopBooking__btn[href*="x.com"] .brandsArea::after {content: "(X)";} .shopBooking__btn[href*="lin.ee"] .brandsArea::after, .shopBooking__btn[href*="line."] .brandsArea::after {content: "(LINE)";} /*デリバリ―*/ .shopBooking__btn[href*="demae-can"] .brandsArea::after {content: "(出前館)";} .shopBooking__btn[href*="ubereats"] .brandsArea::after {content: "(Uber Eats)";} .shopBooking__btn[href*="wolt"] .brandsArea::after {content: "(Wolt)";} .shopBooking__btn[href*="menu.jp"] .brandsArea::after {content: "(menu)";} #shoppage #shop_info .data table.table01{ border: none; border-top: 1px solid var(--color-base-line-dark); } #shoppage #shop_info table.table01 th, #shoppage #shop_info table.table01 td { padding: 20px 26px; } #shoppage #shop_info table.table01 .shop-eigyouhour td p, #shoppage #shop_info table.table01 .shop-tokuten td p, #shoppage #shop_info table.table01 .shop-dealitem td p{ white-space: pre-wrap; word-break: break-all; } #shoppage #shop_info table.table01 th { vertical-align: middle; font-weight: bold; width: 26%; text-align: left; font-size: 15px; padding: 20px 16px 20px 36px; background: #fff; border-right: 4px solid var(--color-base-line-light); } /*網掛けアリ*/ #shoppage #shop_info table.table01 .marked th { background: var(--color-base-bg-light); font-weight: bold; position: relative; } #shoppage #shop_info table.table01 .marked th:before{ font-family: var(--fontfamily-icon); font-size: 24px; vertical-align: bottom; width: 35px; display: inline-block; font-weight: normal; } #shoppage #shop_info table.table01 .shop-eigyouhour th:before{ content: "\e8b5"; } #shoppage #shop_info table.table01 .shop-tel th:before{ content: "\e9cd"; font-variation-settings: var(--iconfont-FILL1-set); } #shoppage #shop_info table.table01 .shop-map th:before{ content: "\e569"; font-variation-settings: var(--iconfont-FILL1-set); } #shoppage #shop_info table.table01 .shop-service th:before{ content: "\e8b1"; } #shoppage #shop_info table.table01 .shop-service td p { white-space: pre-wrap; } #shoppage #shop_info table.table01 tr.shop-map td { font-weight:bold; } #shoppage #shop_info table.table01 tr.shop-map td a { display: inline-block; margin: -6px 20px; background: var(--color-base-bg-light); font-family: var(--fontfamily-english); padding: 0 5px 0 14px; border-radius: 4px; font-size: 15px; font-weight: bold; line-height: 30px; border: 1px solid var(--color-base-line-dark); -webkit-box-sizing: border-box; box-sizing: border-box; } #shoppage #shop_info table.table01 tr.shop-map td a::after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin-left: 5px; font-size: 22px; font-weight: bold; color: var(--color-base-accent-dark); vertical-align: bottom; font-variation-settings: var(--iconfont-wght700GRAD200-set); } #shoppage #shop_info table.table01 tr.shop-map td a::before { content: ""; } #shoppage #shop_info table.table01 tr.shop-map td a:hover::before { display: inline-block; } #shoppage #shop_info table.table01 tr.shop-map td em{ margin-left: 6px; } #shoppage #shop_info table.table01 tr.shop-map td em img{ height: 25px; vertical-align: middle; } #shoppage #shop_info table.table01 tr.shop-dealitem td { font-size: 0.9em; } #shoppage #shop_info .data table.table01 tr.shop-ticket td p{ white-space: pre-wrap; } /*ギフト対応*/ #shoppage .shop_giftList{ display: flex; flex-wrap: wrap; gap: 10px; } #shoppage .shop_giftItem { display: inline-block; border: 1px solid var(--color-base-line-dark); font-size: 14px; line-height: 1em; padding: 8px 10px; border-radius: 4px; } #shoppage .shop_giftItem[class*="icon"]:before { content: "\ea12"; font-family: var(--fontfamily-icon); color: var(--color-base-accent-dark); margin: 0 4px 0 0; font-size: 22px; vertical-align: bottom; display: inline-block; text-align: center; } #shoppage .shop_giftItem.icon-b:before { content: "\ef91";} #shoppage .shop_giftItem.icon-c:before { content: "\ea70";} #shoppage .shop_giftItem.icon-d:before { content: "\ef63";} #shoppage .shop_giftItem.icon-e:before { content: "\f562";} #shoppage .shop_giftItem.icon-f:before { content: "\f1cc";} #shoppage .shop_giftItem.icon-g:before { content: "\e866";} #shoppage .shop_giftItem.icon-h:before { content: "\f05b";} /*generic1_en*/ #shoppage #shop_info .data table.table01 tr.shop-generic1_en span.taxfree_icn { display: inline-block; background: #f00; color: #fff; font-family: var(--fontfamily-english); font-weight: bold; padding: 4px 6px; } /*generic2_en*/ #shoppage .shop_multilingualList{ display: flex; flex-wrap: wrap; gap: 10px; } #shoppage .multilingual_icn { display: inline-block; border: 1px solid var(--color-base-line-dark); font-size: 14px; line-height: 1em; padding: 8px 10px 8px 6px; border-radius: 4px; } #shoppage .multilingual_icn:before { content: "\e894"; font-family: var(--fontfamily-icon); color: var(--color-base-accent-dark); margin: 0 4px 0 0; font-size: 22px; vertical-align: bottom; display: inline-block; text-align: center; } #shoppage #shop_info .data table.table01 td span.attention { display: block; font-size: 10px; width: 100%; line-height: 1.0em; } #shoppage #shop_info table.table01 tr.shop-shopurl td p{ word-break: break-all; } #shoppage #shop_info table.table01 tr.shop-shopurl td a { border-bottom: 1px solid var(--color-base-text-dark); } #shoppage #shop_info table.table01 tr.shop-shopurl td a:after{ font-family: var(--fontfamily-icon); content: "\e89e"; margin: 0 0 0 4px; vertical-align: top; } #shoppage #shop_info table.table01 tr.shop-otherurl td p { width: calc(100% / 4 - 6px); display: inline-block; box-sizing: border-box; margin-right: 2px; } #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: 10px 18px 10px 10px; text-align: center; width: 100%; box-sizing: border-box; border-radius: var(--box-radius-small); font-weight: bold; position: relative; background: var(--color-base-accent-dark); color: #fff; } #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% - 9px); font-size: 24px; } #shoppage #shop_info table.table01 tr.shop-otherurl td p.shop-url a { background: #555; 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: #F00;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";} /*shopinfo ここまで*/ .cat_items { margin: 35px 0 36px; } .cat_items h3 { border: 1px solid #ccc; padding: 8px 16px; font-weight: bold; font-size: 1.1em; } .pc .cat_items:not(#cat3_view):not(.cat3_view) .morelink { display: none; } /* cat(n)_viewの見出し・ショップ情報の見出し */ #cat1_view h3, #cat3_view h3, #contents-main article.main.item h3, .view #shop_info h3, #contents-main .h3__shopCommon { background: none; text-align: center; border: none; font-size: 12px; font-weight: normal; margin: 20px 0 24px; padding: 10px 0 6px; position: relative; border-bottom: 4px solid var(--color-base-line-light); /**/ line-height: 1.6em; } .pc.view #shop_info h3, .pc #contents-main .h3__shopCommon.in { margin-bottom: 0; border-bottom: 0; z-index: 1; } #contents-main article.main.item h3 { display: block; } #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, #contents-main .h3__shopCommon::before { content: ""; width: 160px; height: 4px; display: block; background: var(--color-base-accent-dark); left: 0; right: 0; margin: auto; bottom: -4px; position: absolute; } #cat1_view h3::after, #cat3_view h3::after, article.main.item .gcat.cat1::after, article.main.item .gcat.cat2::after, article.main.item .gcat.cat3::after, .view #shop_info h3::after, #contents-main h3.h3__shopCommon::after { display: block; font-family: var(--fontfamily-english); font-size: 18px; font-weight: bold; line-height: 1.2em; } /* cat(n)_viewの見出し・ショップ情報の見出し - 文字*/ #cat1_view h3::after { content: "SHOP NEWS"; } #cat3_view h3::after { content: "HELP WANTED"; } article.main.item .gcat.cat1::after { content: "SHOP NEWS"; } article.main.item .gcat.cat2::after { content: "COUPON"; } .view #shop_info h3::after { content: "SHOP DETAIL"; } article.main.item .gcat.cat3::after { content: "HELP WANTED"; } /* id4を変更 */ .view #shop_info.cat4 h3::after{ content: "OFFICE DETAIL"; } /*********************/ /*店長ボイス(cat5 view)*/ #cat5_view { display: flex; align-items: center; width: var(--inner-Min-Width); margin: 0 auto 20px; } #cat5_view h3 { width: 200px; border: 0; padding: 0; margin: 0; font-family: var(--fontfamily-english); font-weight: normal; font-size: 22px; background: none; color: var(--color-base-accent-dark); text-align: right; position: relative; } #cat5_view h3:after{ content: "Now"; font-family: var(--fontfamily-english); position: absolute; margin: 0; text-align: center; color: #fff; padding: 12px 0 0; font-size: 13px; border-radius: 50%; background: var(--color-base-accent-dark); width: 34px; height: 34px; 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 article.item { width: calc( 100% - 215px); margin-left: 20px; position: relative; } #cat5_view article.item:before{ right: 100%; top: calc(100% / 2); border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } #cat5_view article.item:before { border-right-color: var(--color-base-accent-light); border-width: 10px; margin-top: -10px; } #cat5_view article.item h4 { padding: 20px 25px; border-radius: var(--box-radius-medium); background: var(--color-base-accent-light); } #cat5_view article.item h4 .item_main { font-weight: bold; } /**/ #cat1_view { overflow: hidden; margin: 0 0 36px; } #cat1_view article.item { width: 50%; float: left; margin: 10px 0px 0; padding: 20px 20px 20px 20px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; height: 300px; } .pc #cat1_view article.item .morelink { display: none; } .cat_items article.item .image, .bf5 article.item .image { float: right; height: 100%; width: 200px; text-align: center; overflow: hidden; position: relative; margin: 10px 0 0 20px; border: 1px solid var(--color-base-line-dark); border-width: 1px; } .cat_items article.item .desc, .bf5 article.item .desc { width: calc(100% - 222px); position: relative; min-height: 100%; } .cat_items article.item .image img, .bf5 article.item .image img { height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; max-width: none; } .cat_items article.item .item_image_noimg { background-size: 70%; position: relative; } .cat_items article.item .item_image_noimg img { position: absolute; width: 70%; height: auto; margin: auto; left: 0; right: 0; bottom: 0; top: 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; line-height: 1.3em; } /*セール赤く*/ .cat_items article.item .desc .sale.icon + h4 a { color: #e33; } .cat_items article.item .desc h4 a { font-weight: bold; font-size: 14px; } .cat_items article.item.cat2 .desc h4 a { display: block; } .cat_items article.item .desc .price { padding: 8px 0 0; font-size: 14px; line-height: 150%; word-break: break-all; } .cat_items article.item .desc .date, .cat_items article.item .desc .price_date, article.shopnewsitem .date, article.recruititem .date { font-size: 12px; font-weight: bold; font-family: var(--fontfamily-english); color: var(--color-base-text-dark); } /*sale時*/ #cat1_view article.item.sale .desc h4 a, #cat1_view article.item.sale .price { color: #e33; } /*****もっと見るボタン[汎用]*****/ .morelink { /* width: 80px; height: 80px; position: absolute; bottom: 0; right: 0; display: block; overflow: hidden; font-family: $FONT_FAMILY_EN; text-align: center; */ } .morelink:hover { text-decoration: none; } .morelink span { display: inline-block; background: var(--color-base-bg-light); font-family: var(--fontfamily-english); padding: 2px 5px 2px 10px; border-radius: 4px; font-size: 14px; font-weight: bold; line-height: 1.6em; border: 1px solid var(--color-base-line-dark); -webkit-box-sizing: border-box; box-sizing: border-box; } .morelink span em { font-weight: inherit; } .morelink span:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin-left: 5px; font-size: 22px; font-weight: bold; color: var(--color-base-accent-dark); vertical-align: middle; } /******もっと見るボタン[汎用]以上*****/ .cat3_view article.item .morelink, #cat3_view article.item .morelink { /*求人情報のみ*/ bottom: 0; } /* クーポン表示関連：①もっと見るボタン　②クーポン強調表示(フキダシ) */ #cat1_view .item.cat2 .desc h4::before { /*フキダシ中身*/ content: "COUPON"; text-align: center; font-family: var(--fontfamily-english); font-weight: bold; color: var(--color-base-accent-dark); border: 1px solid var(--color-base-accent-dark); line-height: 1.1em; font-size: 12px; padding: 4px 7px; margin: 0 0 4px; display: inline-block; } /*画像がないときはフキダシを消す*/ /*#cat1_view .item.cat2.noimg .desc::before, #cat1_view .item.cat2.noimg .desc::after{ display: none; }*/ /* 求人関連 ※#cat3_view はショップページ、個別ページ下部の一覧 ※.cat3_view　は求人一覧用の指定 */ .pc #recruit #goodslist-header-navi .cat dd:first-of-type a { border: 1px solid var(--color-base-line-dark); border-width: 0 1px; } .cat3_view article.item, #cat3_view article.item { position: relative; float: none; overflow: hidden; padding: 0px 20px 24px; margin: 0 0 20px; -webkit-box-sizing: border-box; box-sizing: border-box; } .cat3_view article.item:not(:first-of-type), #cat3_view article.item:not(:first-of-type) { padding-top: 40px; border: 4px solid var(--color-base-line-light); border-width: 4px 0 0; } .cat3_view article.item .date, #cat3_view article.item .date { color: var(--color-base-text-dark); font-size: 12px; line-height: 1em; margin-bottom: 4px; font-family: var(--fontfamily-english); } .cat3_view article.item .shopname, #cat3_view article.item .shopname { font-weight: bold; font-size: 14px; } .cat3_view article.item h4, #cat3_view article.item h4 { color: var(--color-base-text-dark); float: left; width: calc(100% - 232px); -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; font-weight: bold; font-size: 14px; border: 4px solid var(--color-base-line-light); border-width: 4px; margin: 10px 0 20px; padding: 15px; } .cat3_view article.item.noimg h4, #cat3_view article.item.noimg h4, .cat3_view article.item.noimg table, #cat3_view article.item.noimg table { width: 100%; } /* h4フキダシ */ .cat3_view article.item h4:before, #cat3_view article.item h4:before { content: ""; position: absolute; bottom: -24px; left: 10%; margin-left: -15px; border: 12px solid transparent; border-top: 12px solid #FFF; z-index: 2; } .cat3_view article.item h4:after, #cat3_view article.item h4:after { content: ""; position: absolute; bottom: -35px; left: 10%; margin-left: -21px; border: 18px solid transparent; border-top: 17px solid var(--color-base-line-light); z-index: 1; } .cat3_view article.item table, #cat3_view article.item table { width: calc(100% - 232px); margin-bottom: 24px; border: 1px solid var(--color-base-line-dark); } .cat3_view article.item tr, #cat3_view article.item tr { border-color: var(--color-base-line-dark); } .cat3_view article.item tr th, .cat3_view article.item tr td, #cat3_view article.item tr th, #cat3_view article.item tr td { padding: 12px 8px; } .cat3_view article.item th, #cat3_view article.item th { width: 95px; font-weight: normal; } .cat3_view article.item tr td, #cat3_view article.item tr td { padding-left: 20px; } .cat3_view article.item a.morelink span, #cat3_view article.item a.morelink span { border: 1px solid var(--color-base-line-dark); display: inline-block; background: var(--color-base-bg-light); margin: 0; padding: 2px 5px 2px 10px; font-size: 14px; line-height: 1.6em; border-radius: 4px; font-family: var(--fontfamily-english); font-weight: bold; } .cat3_view article.item a.morelink span::after, #cat3_view article.item a.morelink span::after { content: "\e5cc"; font-family: var(--fontfamily-icon); color: var(--color-base-accent-dark); margin: 0 0 0 5px; font-size: 22px; display: inline-block; vertical-align: top; font-variation-settings: var(--iconfont-wght700GRAD200-set); } .sale.icon, .newgoods_conf #goods_title.formitem .sale, .cat_items article.item .desc .sale { background: #e33; color: #fff; display: inline-block; width: 39px; padding: 4px 8px; font-size: 1em; font-weight: bold; line-height: 1em; letter-spacing: 1px; font-size: 12px; margin: 0 4px 4px 0; font-family: var(--fontfamily-english); } .cat_items article.item .goodscomment { padding: 10px 0 0; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; line-height: 1.4em; } .cat_items article.item .read_more a { font-size: 12px; color: var(--color-base-text-lightshade); } .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 12px; margin: 0; } .cat_items article.item .desc .fromto { padding: 0 0 8px; } .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; } /* --------------------------------------------- item_****** --------------------------------------------- */ /*全体*/ .shopnewsitem.item, .other_news{ width: 900px; padding: 0 0; margin: 0 auto 40px; } .shopnewsitem.item::after { /*clearfix*/ width: 900px; padding: 0 20px; content: ""; clear: both; display: block; } /*h3を横いっぱいにする*/ .pc.item_news #contents > .inner, .pc.item_coupon #contents > .inner, .pc.item_recruit #contents > .inner, .pc.item_news #contents-main.all, .pc.item_coupon #contents-main.all, .pc.item_recruit #contents-main.all { max-width: none; min-width: 0; width: 100%; padding: 0; } .pc.item_news article.shopnewsitem, .pc.item_coupon article.shopnewsitem, .pc.item_recruit article.shopnewsitem { width: 100%; } .pc.item_news article .inner, .pc.item_coupon article .inner, .pc.item_recruit article .inner { width: 900px; padding: 0 0; margin: 0 auto 40px; } /*以上*/ .shopnewsitem.item .date { margin: 20px 80px 0; } .shopnewsitem.item .imgarea { background: var(--color-base-bg-light); padding: 0 0; margin: 0 80px 0; } .shopnewsitem.item.noimg .imgarea { display: none; } /*アイテム一覧　メイン画像*/ .shopnewsitem .slick-list { margin: 0 0 10px; } .shopnewsitem .main_img { height: 500px; } .shopnewsitem .main_img img { display: block; margin: 20px auto 0; top: 0; position: relative; max-height: 100%; } .shopnewsitem .main_img img { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } /*アイテム一覧　サムネイル画像*/ .shopnewsitem .thum_imgs { width: 600px; margin: 0 auto; } .shopnewsitem .thum_img { width: 120px; height: 120px; border: 4px solid transparent; 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: 50px; 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: 740px; padding: 0 80px; margin: 0 0 40px; float: left; } .shopnewsitem .desc h4 { font-size: 20px; font-weight: bold; margin: 16px 0; } .shopnewsitem .desc .price { font-weight: bold; } .shopnewsitem.sale .desc .price { color: #e33; } .shopnewsitem .desc .goodscomment { border: 4px solid var(--color-base-line-light); border-width: 4px 0 0; margin: 16px 0; padding: 16px 0; font-size: 14px; font-family: var(--fontfamily-base); } .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: 30px; margin-bottom: 30px; border: 1px solid var(--color-base-line-dark); border-width: 0 0 1px; } .shopnewsitem .link a { text-align: center; text-decoration: none; background: #fff; padding: 20px; border-radius: 8px; position: relative; font-weight: 700; font-size: 16px; min-width: 40%; display: inline-block; border: 1px solid var(--color-base-line-dark); border-radius: 4px; padding: 16px 20px; } .shopnewsitem .link a::after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 10px; font-size: 20px; display: inline-block; font-weight: bold; vertical-align: middle; position: absolute; right: 8%; color: var(--color-base-accent-dark); } .shopnewsitem .tag_list { padding: 10px 0px; text-align: left; border-bottom: none; clear: both; } .shopnewsitem .tag_list_name { margin: 0 5px 5px 0; } /*ソーシャルボタン、いいねボタン*/ .shopnewsitem .goods_like_btn { width: calc(60% - 90px); margin: 0 0 20px 80px; border: 4px solid var(--color-base-line-light); padding-top: 20px; height: 120px; } .shopnewsitem .goods_like_btn:before { font-family: var(--fontfamily-english); font-size: 18px; font-weight: bold; color: #000; content: "LIKE IT"; margin-bottom: 8px; display: block; } .shopnewsitem .goods_like_btn p { display: inline-block; padding: 0 0 20px; text-align: center; width: 100%; height: auto; border-radius: 0; background: none; } .shopnewsitem .goods_like_btn p:before { content: "このニュースにいいね！する"; color: var(--color-base-text-dark); margin-right: 16px; font-size: 16px; font-family: var(--fontfamily-base); vertical-align: middle; } .shopnewsitem .goods_like_btn p i, .shopnewsitem .goods_like_btn p span { display: inline-block; margin-right: 8px; font-size: 1.8em; vertical-align: middle; color: var(--color-base-accent-dark); } /*いいねボタンのハート指定(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; border: 4px solid var(--color-base-line-light); margin: 0 80px 20px 80px; width: calc(100% - 160px); 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 { width: calc(100% - 160px); margin: 0 80px 40px; padding: 20px 0 20px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } .shopnewsitem.cat2 .desc h4 { color: var(--color-base-text-dark); margin: 0; padding: 0 0 16px; border: 4px solid var(--color-base-line-light); border-width: 0 0 4px; line-height: 1.4em; word-break: break-word; } .shopnewsitem.cat2 .desc dl { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; border: 1px solid var(--color-base-line-dark); border-width: 0 0 1px; } .shopnewsitem.cat2 .desc dl:last-of-type { border: 4px solid var(--color-base-line-light); border-width: 0 0 4px; } .shopnewsitem.cat2 .desc dt, .shopnewsitem.cat2 .desc dd { padding: 20px; font-size: 16px; line-height: 1.4em; -webkit-box-sizing: border-box; box-sizing: border-box; } .shopnewsitem.cat2 .desc dt { background: var(--color-base-bg-light); width: 20%; font-weight: bold; text-align: center; } .shopnewsitem.cat2 .desc dd { width: 80%; } .shopnewsitem.cat2 .desc .print a { width: 40%; border-radius: 4px; display: block; padding: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 16px; font-size: 18px; border: 1px solid var(--color-base-accent-dark); color: var(--color-base-text-dark); text-align: center; margin: 30px auto 20px; -webkit-transition-duration: .2s; transition-duration: .2s; } .shopnewsitem.cat2 .desc .print a:before { font-family: var(--fontfamily-icon); content: "\e8ad"; margin-right: 8px; font-size: 24px; vertical-align: middle; color: var(--color-base-accent-dark); } .shopnewsitem.cat2 .desc .print a:hover { background: var(--color-base-accent-dark); color: #fff; opacity: 1; } .shopnewsitem.cat2 .desc .print a:hover::before { color: #fff; } .shopnewsitem.cat2 .mdlistiew, .shopnewsitem.cat2 .tag_list{ width: 600px; padding: 20px 40px 20px 80px; clear: both; } #contents-main .other_news .inner{ width: auto; max-width: initial; 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 h4 { color: var(--color-base-text-dark); margin: 10px auto 20px; padding: 20px 30px 26px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; font-weight: bold; font-size: 18px; line-height: 1.5em; border: 4px solid var(--color-base-line-light); } .recruititem.item h4::before{ content: ""; position: absolute; bottom: -24px; left: 10%; margin-left: -15px; border: 12px solid transparent; border-top: 12px solid #FFF; z-index: 2; } .recruititem.item h4::after { content: ""; position: absolute; bottom: -35px; left: 10%; margin-left: -21px; border: 18px solid transparent; border-top: 17px solid var(--color-base-line-light); z-index: 1; } .recruititem.item .date { margin: 20px 80px 0; } .recruititem.item .imgarea { background: var(--color-base-bg-light); padding: 20px 0; margin: 0 80px 20px; } .recruititem.item .imgarea img { display: block; margin: 0 auto; max-height: 480px; max-width: 480px; } .recruititem.item .desc { width: 800px; padding: 0 80px; margin: 20px 0 40px; } .recruititem.item.cat3 th { width: 30%; padding: 10px 25px; text-align: center; font-weight: bold; } .recruititem.item.cat3 td { padding: 16px 20px 16px 25px; line-height: 1.3em; } .other_jobs .cat_items h3 { display: none; } #contents-main .other_jobs h3 { background: none; text-align: center; border: none; font-size: 12px; font-weight: normal; margin: 20px 0 24px; padding: 10px 0 6px; position: relative; border: 4px solid var(--color-base-line-light); border-width: 0 0 4px; line-height: 1.6em; } #contents-main .other_jobs h3:before { content: ""; width: 160px; height: 4px; display: block; background: var(--color-base-accent-dark); left: 0; right: 0; margin: auto; bottom: -4px; position: absolute; } #contents-main .other_jobs h3:after { content: "HELP WANTED"; display: block; font-family: var(--fontfamily-english); font-size: 18px; font-weight: bold; line-height: 1.2em; } /*共通戻るボタン*/ .return_shop { clear: both; margin: 20px 0; line-height: 1em; text-align: center; } .return_shop a, .return_list a { display: inline-block; padding: 16px 24px; border-radius: 4px; background: var(--color-base-bg-light); font-size: 14px; border: 1px solid var(--color-base-line-dark); } .return_shop a:before, .return_list a:before { font-family: var(--fontfamily-icon); content: "\e5cb"; font-size: 20px; margin-right: 8px; vertical-align: middle; color: var(--color-base-accent-dark);font-variation-settings: var(--iconfont-wght700GRAD200-set); } /* --------------------------------------------- div#goodslist-header-navi --------------------------------------------- */ .pc div#goodslist-header-navi { padding: 20px 0; } .pc div#goodslist-header-navi dl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .pc div#goodslist-header-navi dl a { font-size: 15px; padding: 2px 18px; border-right: 1px solid var(--color-base-line-dark); position: relative; } .pc div#goodslist-header-navi dl dt a, .pc div#goodslist-header-navi dl dd:first-child a { border-left: 1px solid var(--color-base-line-dark); } .pc div#goodslist-header-navi dl a::after { -webkit-transition-duration: .2s; transition-duration: .2s; position: absolute; content: ""; display: block; width: calc(100% - 36px); height: 0; background: var(--color-base-accent-dark); bottom: -8px; left: 0; right: 0; margin: auto; } .pc div#goodslist-header-navi dl .current a, .pc div#goodslist-header-navi dl a:hover { opacity: 1; } .pc div#goodslist-header-navi dl .current a::after, .pc div#goodslist-header-navi dl a:hover::after { height: 4px; } .pc div#goodslist-header-navi dt.all { font-family: var(--fontfamily-english); font-weight: bold; } /* id4を非表示対応 */ div#goodslist-header-navi dd.cat4{ display: none; } /* ----------------------------------------- goodslist.jspを基本に.NewsItemList ※この見せ方のページは、class="NewsItemList" ※上位のスタイルを上書きするために#contents-main が必要 ----------------------------------------- */ #contents-main .NewsItemList { padding: 0; width: 100% !important; box-sizing: border-box; margin: 0 0 10px; } #contents-main .NewsItemList:after { content: ""; clear: both; display: block; height: 1px; } #contents-main .NewsItemList #items{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } #contents-main .NewsItemList .item { width: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 24px 32px; position: relative; overflow: hidden; margin: 6px 0 0; } #contents-main .NewsItemList .item .news_box { width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } #contents-main .NewsItemList .item .image { width: 160px; height: 210px; float: right; position: relative; border: 1px solid var(--color-base-line-dark); -webkit-box-sizing: border-box; box-sizing: border-box; } #contents .NewsItemList .item p.image .ico_new { top: -16px; right: -10px; } #contents-main .NewsItemList .item .image a { display: block; width: 100%; height: 100%; } #contents .NewsItemList .item p.image .no_img_logo { border: none; background-size: 100px auto; } #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; } .pc #contents-main .NewsItemList .item .desc { width: calc(100% - 175px); position: relative; padding: 25px 0 0 0; } #contents-main .NewsItemList .item .desc .goods { font-size: 14px; font-weight: bold; border: none; padding: 0; margin: 0; background: none; text-align: left; position: relative; line-height: 20px; word-break: break-all; } #contents-main .NewsItemList .item.sale .desc .goods a { color: #e33; } #contents-main .NewsItemList .item.cat2 .desc .goods:before { text-align: center; font-family: var(--fontfamily-english); color: var(--color-base-accent-dark); display: block; font-size: 12px; border: 1px solid var(--color-base-accent-dark); border-width: 1px; padding: 0 0; vertical-align: top; margin: 0 0 4px; box-sizing: border-box; } #contents-main .NewsItemList .item.cat2 .desc .goods:before { content: "COUPON"; width: 6.5em; } #contents-main .NewsItemList .item.cat2 .desc .goods a { line-height: 18px; margin-left: 2px; } #contents-main .NewsItemList .item .desc .name { font-size: 12px; line-height: 16px; margin-top: 10px; } #contents-main .NewsItemList .item .desc .price { font-weight: bold; font-size: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #contents-main .NewsItemList .item .desc .price .tax { font-size: 80%; margin-left: .3em; } #contents-main .NewsItemList .item .date { position: absolute; font-size: 12px; line-height: 1em; margin: 4px 0 12px; font-family: var(--fontfamily-english); font-weight: bold; } #contents-main .NewsItemList .item .desc .date .ico_new { margin-left: 4px; } #contents-main .NewsItemList .item .goods_like_btn.mini { left: 32px; right: auto; bottom: 66px; } #contents-main .NewsItemList .item .goods_like_btn.mini p{ background: #fff; } #contents-main .NewsItemList .item .morelink { position: absolute; bottom: 28px; left: 32px; } #contents-main .price_date { padding: 0 28px; margin: 20px 0 0; font-size: 10px; } /*NewsItemListを基本にしつつsale表示変更*/ body.sale #contents h2 { background: #e33; color: #fff; border-bottom: none; } body.sale #contents-main.all{ padding-top: 0; } /* --------------------------------------------- ニュース一覧など　次へボタン --------------------------------------------- */ #goodslist-navi { margin: 40px 0 0; 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: 4px; border: none; cursor: pointer; border: 1px solid var(--color-base-line-dark); background: var(--color-base-bg-light); text-shadow: none; -moz-appearance: none; appearance: none; -webkit-appearance: none; } /* --------------------------------------------- ショップ検索用　index.jsp bf=8 --------------------------------------------- */ body.index #search-category, body.index #search-on, body.index #search-floor { margin-bottom: 32px; } body.index .search { padding: 0 0 0; } body.index .search h3 { margin-bottom: 20px; } body.index .search #search-all { clear: both; } body.index .search .search_block { margin: 0 0 32px; } body.index .search .search_block { text-align: center; overflow: hidden; } body.index .search .search_block ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } body.index .search .search_block li { width: calc(100% / 2 - 8px); margin: 0 4px 10px; display: block; border-radius: 8px; } /* 検索画面でid=4を非表示 */ body.index .search .search_block li.cat4{ display: none; } body.index .search .table01 tr.jptower, body.index .shopnavi .table01 tr.jptower{ display: none; } body.index .search .search_block #on_title_list li { width: calc(100% / 4 - 8px); } body.index .search .search_block ul li a { display: block; width: 100%; height: 100%; padding: 20px 30px 20px 10px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; text-align: center; font-weight: bold; border-radius: 4px; border: 1px solid var(--color-base-line-dark); } body.index .search .search_block li a:after { font-family: var(--fontfamily-icon); content: "\e5cc"; color: var(--color-base-accent-dark); font-size: 24px; position: absolute; right: 5px; top: calc(100% / 2 - 0.5em); } 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 .search div.title h4 { padding: 16px; font-weight: bold; font-size: 16px; background: var(--color-base-bg-light); text-align: center; margin-bottom: 20px; } body.index div#searchcat table.table01, body.index div#searchon table.table01 { clear: both; } body.index div.search table.table01 td { padding: 16px 8px; } body.index div.search table.table01 td.tel, body.index div.search table.table01 td.hour, body.index div.search table.table01 td.floor { font-size: 12px; line-height: 16px; } body.index div.search table.table01 th { display: none; } body.index div.search table.table01 td.name { width: 35%; padding: 16px 8px 16px 16px; } 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 .biz { font-size: 14px; } body.index div.search table.table01 .logo { width: 120px; text-align: center; border-right: 4px solid var(--color-base-line-light); padding: 20px 20px 20px 0; } body.index div.search table.table01 .logo img { max-width: 100px; margin: 0 auto; } body.index div.search table.table01 .tel { width: 18%; position: relative; padding-left: 42px; } body.index div.search table.table01 td.tel p:before { font-family: var(--fontfamily-icon); font-variation-settings: var(--iconfont-FILL1-set); content: "\e0b0"; font-size: 18px; position: absolute; top: calc(50% - 8px); left: 20px; } body.index div.search table.table01 .hour { width: 25%; white-space: pre-wrap; position: relative; padding-left: 26px; } body.index div.search table.table01 td.hour:before { font-family: var(--fontfamily-icon); content: "\e8b5"; margin: 0 4px 0 0; font-size: 18px; display: block; position: absolute; top: calc(50% - 8px); left: 4px; } body.index div.search table.table01 td.floor { text-align: center; position: relative; padding-right: 20px; } body.index div.search table.table01 td.floor a { font-weight: bold; } body.index div.search table.table01 td.floor:after { font-family: var(--fontfamily-icon); content: "\e5cc"; color: var(--color-base-accent-dark); font-size: 24px; font-variation-settings: var(--iconfont-wght700GRAD200-set); position: absolute; right: 2px; top: calc(100% / 2 - 8px); } body.index.pc div.search table.table01 tr:first-child { border-top: 4px solid var(--color-base-line-light); } body.index div.search table.table01 td .ico_jobs, body.index div.search table.table01 td .ico_new2, body.index div.search table.table01 td .ico_coupon { display: none; } body.index div.search #shop-icon { display: none; margin: 8px 16px; } body.index div.search #shop-icon ul li { display: inline-block; margin-right: 20px; font-size: 90%; } body.pc.index div#category-navi { padding: 0 0 30px; } body.pc.index div#category-navi ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } body.pc.index div#category-navi ul a { font-size: 15px; padding: 2px 18px; border-right: 1px solid var(--color-base-line-dark); position: relative; } body.pc.index div#category-navi ul a::after { -webkit-transition-duration: .2s; transition-duration: .2s; position: absolute; content: ""; display: block; width: calc(100% - 36px); height: 0; background: var(--color-base-accent-dark); bottom: -8px; left: 0; right: 0; margin: auto; } body.pc.index div#category-navi ul li:first-child a { border-left: 1px solid var(--color-base-line-dark); } body.pc.index div#category-navi ul .current a, body.pc.index div#category-navi ul a:hover { opacity: 1; } body.pc.index div#category-navi ul .current a::after, body.pc.index div#category-navi ul a:hover::after { height: 4px; } /* id=4を非表示 */ body.index div#category-navi ul li.cat4{ display: 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; } /* --------------------------------------------- ショップサービス bf=4 --------------------------------------------- */ body.index.bf4 #contents-main { padding-top: 0; } body.index.bf4 .ServiceItemList { margin: 20px 0; } body.index.bf4.pc div#goodslist-header-navi { padding-bottom: 0; } body.index.bf4 div#service table.table01 { margin: 0 auto 40px; width: 100%; } 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: 140px; text-align: center; } body.index.bf4 div#service table.table01 .logo .image{ width: 120px; } 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 { border-left: 4px solid var(--color-base-line-light); } body.index.bf4 div#service table.table01 .service p { white-space: pre-wrap; padding: 0 16px; } body.index.bf4.pc div#service table.table01 .service p { white-space: pre-wrap; padding: 0 16px; } /* --------------------------------------------- クーポン　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: 1px 5px; background: var(--color-base-bg-light); display: inline-block; margin-right: 5px; } 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 --------------------------------------------- */ .pc .index.bf5 #goodslist-header-navi { padding-bottom: 0; } .pc .index.bf5 #goodslist-header-navi dl dd:first-of-type a { border-left: 1px solid var(--color-base-line-dark); } 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 .VoiceItemList { margin: 20px; } body.voice .VoiceItemList article { overflow: hidden; margin: 0 10px 10px; padding: 10px 0; box-sizing: border-box; width: 47%; display: inline-block; width: calc(50% - 24px); } body.voice .VoiceItemList article .detail { padding: 20px 25px; box-sizing: border-box; position: relative; border-radius: var(--box-radius-medium); background: var(--color-base-accent-light); } body.voice .VoiceItemList article .detail:after { right: 50px; bottom: -20px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-top-color: var(--color-base-accent-light); border-width: 10px; } body.voice .VoiceItemList article .detail .goodsname { font-weight: bold; } body.voice .VoiceItemList article .detail .sendtime { position: absolute; background: var(--color-base-accent-dark); color: #fff; display: block; top: -10px; padding: 0px 8px; font-size: 12px; font-weight: bold; border-radius: 40px; left: 10px; } body.voice .VoiceItemList article .shopname { display: block; float: left; width: 280px; padding: 20px 20px 0; box-sizing: border-box; } body.voice .VoiceItemList article .shopname span { display: block; font-size: 12px; } body.voice .VoiceItemList article .shopname a { font-weight: bold; text-decoration: underline; font-size: 16px; } body.voice .VoiceItemList article .logoimg { vertical-align: middle; float: right; width: 120px; box-sizing: border-box; padding: 20px 20px 0; } body.voice .VoiceItemList article .logoimg img { width: 100px; max-width: auto; max-height: 100px; } /* --------------------------------------------- イベントニュース --------------------------------------------- */ #event_lists .events { padding: 20px; overflow: hidden; position: relative; margin: 10px 0 0; border-top: 1px solid var(--color-base-line-dark); } #event_lists .events_block:last-of-type { border-bottom: 1px solid var(--color-base-line-dark); } #event_lists .events .c1 { float: right; margin-left: 24px; } #event_lists .events .c1 p.image { overflow: hidden; max-height: 280px; } #event_lists .events .c1 p.image img { width: 240px; } #event_lists h4 { margin: 16px 0 16px 0; font-weight: bold; overflow: hidden; font-size: 16px; word-break: break-all; } #event_lists h4 a { text-decoration: underline; } #event_lists .table01 { width: calc(100% - 280px); margin: 20px 0; border-collapse: collapse; border-spacing: 0; } #event_lists .table01 th, #event_lists .table01 td { padding: 10px; font-size: 12px; } #event_lists .table01 th { width: 25%; } .event-cat-title { clear: both; margin: 16px 0; } .event-cat-title .cat_title { padding: 12px 16px; font-weight: bold; font-size: 16px; background: var(--color-base-bg-light); text-align: center; } #ev-navi { text-align: center; margin: 10px 0; } .ev-navi_bottom { text-align: center; padding: 24px; } .ev-navi_bottom .ev-navi-cal, #ev-navi .ev-navi-cal { margin-left: 16px; display: inline-block; vertical-align: top; } .ev-navi_bottom .ev_all_link { display: inline-block; vertical-align: top; } .pc #ev-navi, .pc .ev-navi_bottom { display: none; } .ev-navi-article { width: 192px; display: inline-block; text-align: left; } .ev-navi-article dl { position: relative; } .ev-navi-article dl dt { border: 1px solid var(--color-base-line-dark); line-height: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; padding-right: 40px; text-align: center; font-size: 14px; border-radius: 0; font-size: 4.375vw; } .ev-navi-article dl dt:before { content: ""; display: inline-block; width: 0; border-left: 1px solid var(--color-base-line-dark); height: 24px; position: absolute; right: 40px; top: 0; bottom: 0; margin: auto; } .ev-navi-article dl dt:after { content: "\e5cf"; font-family: var(--fontfamily-icon); font-weight: bold; color: inherit; font-size: 20px; color: var(--color-base-text-dark); position: absolute; right: 0px; top: 0px; width: 40px; text-align: center; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .ev-navi-article dl dt.active::after, .ev-navi-article dl dt.up::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } @media screen and (min-width: 769px) { .ev-navi-article dl dt { font-size: 14px; } } .ev-navi-article dl dd { display: none; position: absolute; top: 42px; left: 0; width: 100%; border: 1px solid var(--color-base-line-dark); border-top: none; z-index: 20; background: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; border-radius: 0; font-size: 4.0625vw; } .ev-navi-article dl dd li, .ev-navi-article dl dd > dd, .ev-navi-article dl dd > dt { display: block; } .ev-navi-article dl dd li:not(:last-of-type), .ev-navi-article dl dd > dd:not(:last-of-type), .ev-navi-article dl dd > dt:not(:last-of-type) { border-bottom: 1px solid #e3e8e9; } .ev-navi-article dl dd li > a, .ev-navi-article dl dd > dd > a, .ev-navi-article dl dd > dt > a { padding: 4px 10px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: block; } .ev-navi-article dl dd li > a::after, .ev-navi-article dl dd > dd > a::after, .ev-navi-article dl dd > dt > a::after { content: "\e5cc"; font-family: var(--fontfamily-icon); font-weight: bold; color: inherit; font-size: 20px; display: inline-block; color: var(--color-base-accent-dark); position: absolute; left: auto; right: 0px; top: calc(100% / 2 - 12px); bottom: auto; width: 1em; } @media screen and (min-width: 769px) { .ev-navi-article dl dd { font-size: 13px; } } .ev-navi_bottom .ev-navi-cal a, #ev-navi .ev-navi-cal a, .ev-navi_bottom .ev_all_link a { display: inline-block; padding: 8px 24px; font-size: 14px; border: 1px solid var(--color-base-line-dark); } #ev-navi .ev-navi-cal a { font-size: 18px; } .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"; font-size: 24px; } #ev-navi .ev-navi-cal a { height: 42px; box-sizing: border-box; } .ev-navi_bottom .ev_all_link a:before { font-family: var(--fontfamily-icon); content: "\e5cb"; margin: 0 4px 0 0; color: var(--color-base-main-dark); 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: #333; color: #fff; padding: 0 6px; } body.view.eventnews #more-btn { text-align: center; margin: 0px 16px 16px; } body.eventnews #more-btn span { display: block; background: var(--color-base-bg-light); padding: 10px 20px; cursor: pointer; } /* --------------------------------------------- イベントニュース　item_eventnews.jsp --------------------------------------------- */ body.item_eventnews .item { overflow: hidden; border-bottom: 4px solid var(--color-base-line-light); } body.item_eventnews #contents-main .item .title h3 { font-size: 18px; margin: 0 0 10px; text-align: left; } body.item_eventnews #contents-main .item .subtitle h4 { padding: 0 16px 10px; border-bottom: 1px dotted 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 { max-width: 560px; max-height: 420px; } body.item_eventnews #contents-main .item .images .image .caption_in { display: block; width: 100%; padding: 5px; } body.item_eventnews #contents-main .item.noimg .images .desc { float: none; width: 100%; } body.item_eventnews #contents-main .item .images .subimg { text-align: center; margin: 10px auto 20px; } body.item_eventnews #contents-main .item .images .subimg li { width: 130px; height: 130px; display: inline-block; background: #eeeeee; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; margin: 0 5px; border: 1px solid var(--color-base-line-dark); } body.item_eventnews #contents-main .item .images .subimg li span { display: table-cell; width: 130px; height: 130px; -webkit-box-sizing: border-box; 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 a { text-decoration: underline; } body.item_eventnews #contents-main .item .desc .ev_content { margin-bottom: 20px; word-break: break-word; font-size: 14px; } body.item_eventnews #contents-main .item .social { border-top: 4px solid var(--color-base-line-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; white-space: pre-wrap; } body.item_eventnews #contents-main .item .desc .link { text-align: center; margin: 30px 0; } body.item_eventnews #contents-main .item .desc .link a { text-align: center; text-decoration: none; padding: 20px 30px 20px 20px; border-radius: 4px; position: relative; font-weight: 700; font-size: 16px; min-width: 40%; display: inline-block; border: 1px solid var(--color-base-accent-dark); } body.item_eventnews #contents-main .item .desc .link a:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 10px; font-size: 20px; color: var(--color-base-accent-dark); display: inline; position: absolute; right: 10px; } body.item_eventnews #contents-main .item .desc table.table01 td { white-space: pre-wrap; } body.item_eventnews #contents-main　.tag_list{ padding: 20px 15px 0; } body.item_eventnews #contents-main　.item .desc .tag_list a{ text-decoration: none; } /*tag list*/ body.item_eventnews #contents-main .event_tags { margin: 40px 0 0; text-align: center; background: var(--color-base-bg-light); } #contents-main .event_tags .event_tags-title { border: none; position: relative; margin-bottom: 10px; padding-bottom: 12px; -webkit-box-sizing: border-box; box-sizing: border-box; } #contents-main .event_tags .event_tags-title em { font-family: var(--fontfamily-english); font-weight: bold; font-size: 18px; } #contents-main .event_tags .event_tags-title::before { content: "#"; font-family: var(--fontfamily-english); color: var(--color-base-accent-dark); margin: 0px 5px 0 0; } #contents-main .event_tags .event_tags-title:after { content: ""; position: absolute; display: block; width: 4em; height: 4px; background: var(--color-base-accent-dark); left: 0; right: 0; margin: auto; bottom: 0; } #contents-main .event_tags p { padding: 0 0 10px; margin: -5px 0 0; font-size: 14px; } body.item_eventnews #contents-main .event_tags .tag_list { padding-bottom: 8px; } body.item_eventnews #contents-main #event_list { margin-top: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 20px 0; border: 4px solid var(--color-base-line-light); } body.item_eventnews #contents-main #event_list .p_title { margin-top: -57px; width: 100%; } body.item_eventnews #contents-main #event_list .p_title h4 { font-family: var(--fontfamily-english); font-weight: bold; text-align: center; font-size: 18px; padding: 0 0 12px; margin-bottom: 0; position: relative; } body.item_eventnews #contents-main #event_list .p_title p{ display: none; } body.item_eventnews #contents-main #event_list { display: flex; /* height: 75px; */ padding: 25px 0; border: 4px solid var(--color-base-line-light); } body.item_eventnews #contents-main #event_list .p_title h4:after { content: ""; position: absolute; display: block; width: 10em; height: 4px; background: var(--color-base-accent-dark); left: 0; right: 0; margin: auto; bottom: 3px; } body.item_eventnews #contents-main #event_list .events { width: calc(100% / 3); padding: 0 18px; border-right: 1px solid var(--color-base-line-dark); -webkit-box-sizing: border-box; box-sizing: border-box; } body.item_eventnews #contents-main #event_list .events:last-of-type { border: none; } body.item_eventnews #contents-main #event_list .events strong { font-size: 14px; } body.item_eventnews #contents-main #event_list .events .term { font-size: 12px; margin-top: 2px; word-break: break-all; } 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 .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 { text-decoration: underline; } body.item_eventnews #contents-main #event_list .events .e_category { margin-bottom: 4px; } /* --------------------------------------------- イベントカレンダー　calendar.jsp --------------------------------------------- */ .cal_contents #event_lists h3 { border-bottom: 4px solid #eee; } .cal_contents #date_list02 { display: none; } /* --------------------------------------------- 営業時間　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); font-weight: 700; 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); } /* --------------------------------------------- access --------------------------------------------- */ body.access #contents-main article h3:before{ font-family: var(--fontfamily-icon); margin: 0 4px 0 0; vertical-align: bottom; font-size: 30px; font-weight: normal; color: var(--color-base-main-dark); width: calc(1em + 4px); display: inline-block; text-align: center; content: "\e88e"; } body.access #contents-main article.access_method h3:before{ content: "\e0c8"; } body.access #contents-main section.access_parking h3:before{ content: "\e54f"; } body.access #contents-main section { padding: 15px 15px 30px; } body.access #contents-main #sc_map { border: 1px solid #ccc; box-sizing: border-box; height: 340px; width: 100%; } body.access #contents-main #sc_map iframe { width: 100%; height: 100%; border: none; } body.access #contents-main .sc_map_link { text-align: right; padding: 4px; } body.access #contents-main .sc_map_link a { text-decoration: underline; } body.access #contents-main .sc_map_link a span { font-size: 0.9em; } body.access #contents-main .sc_map_link .fa { margin-right: 5px; } body.access #contents-main table.table01 th { border-left: none; width: 30%; } body.access #contents-main tr.sc_payment td img{ max-width: 400px; margin-bottom: 10px; } body.access #contents-main table.table01 td { border-right: none; white-space: pre-wrap; } body.access #contents-main table.table01 td strong{ font-size: 1.1em; } body.access #contents-main section dl { padding: 24px; border-radius: var(--box-radius-small); border: 1px solid #ccc; margin: 1em 0 2em; } body.access #contents-main section dl dt { padding: 0 0 15px 0; border-bottom: 10px solid var(--color-base-bg-light); font-weight: bold; font-size: 1.1em; } body.access #contents-main section dl.acbox dt:before { font-family: var(--fontfamily-icon); margin: 0 4px 0 0; vertical-align: middle; font-size: 30px; font-weight: normal; } body.access #contents-main section dl#station dt:before { content: "\e570"; font-variation-settings: var(--iconfont-FILL1-set); } body.access #contents-main section dl#bus dt:before { content: "\e530"; font-variation-settings: var(--iconfont-FILL1-set); } body.access #contents-main section dl#car dt:before { content: "\e531"; font-variation-settings: var(--iconfont-FILL1-set); } body.access #contents-main section dl#parking dt:before { content: "\e531"; font-variation-settings: var(--iconfont-FILL1-set); } body.access #contents-main section dl#bicycle_parking dt:before { content: "\e52f"; } body.access #contents-main section dl dd{ padding: 15px 0 0; white-space: pre-wrap; } body.access #contents-main section dl dd strong{ font-size: 1.1em; } body.access #contents-main section dl dd span{ font-weight: bold; } body.access #contents-main article.access_method dl dd img{ padding: 5px 0; max-width: 600px; } body.access #contents-main .guide_information section, body.access #contents-main .lostitem_inquiry section{ white-space: pre-wrap; } body.access #contents-main .guide_information section h4, body.access #contents-main .lostitem_inquiry section h4{ padding: 10px 0 15px 0; border-bottom: 10px solid var(--color-base-bg-light); font-weight: bold; font-size: 1.1em; } body.access #contents-main .access_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; } body.access #contents-main .access_content section p.btn a{ display: block; margin: 10px 0 0; width: 12em; text-align: center; color: #fff; background: var(--color-base-main-dark); padding: 10px 30px; position: relative; } body.access #contents-main .access_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; } /* --------------------------------------------- free_page_area --------------------------------------------- */ .pc #free_page_area{ width: 960px; margin: auto; } #free_page_area .fp_content { padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; } #free_page_area .fp_content img { max-width: 100%; } /*基本設定*/ #free_page_area h2 { text-align: left; } .fp_content h3 { margin: 16px 0; border: 1px solid #ccc; padding: 8px 16px; border-radius: 20px; font-weight: bold; font-size: 16px; background: #fff; } #free_page_area .fp_content h4 { font-weight: bold; margin: 8px 16px 4px; } #free_page_area .fp_content p { margin: 0 16px 16px; } #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% / 3); box-sizing: border-box; padding: 0; height: 70px; vertical-align: bottom; border-right: 4px solid #fff; } .shop_guide_menu ul li a { display: inline-block; text-align: center; background: #eeeeee; width: 100%; height: 70px; line-height: 70px; position: relative; } .shop_guide_menu ul li.current a { position: relative; background: var(--color-base-main-dark); border-bottom: none; margin-top: 0; line-height: 70px; height: 70px; font-weight: bold; font-size: 18px; color: #fff; } .shop_guide_menu ul li.current a:after { content: ""; display: block; position: absolute; bottom: -23px; width: 0; height: 0; border: 12px solid transparent; left: 36%; left: calc(50% - 12px); border-top: 12px solid #555555; } /* --------------------------------------------- フロアガイド(floor/floor.jsp、floor.jsp用) --------------------------------------------- */ body.floor h2 strong { font-weight: bold; display: inline-block; margin-left: 10px; font-size: 1.1em; } body.floor #contents-main{ padding: 10px 0; } body.floor #contents-main h3 { background: #fff; text-align: center; border: none; font-size: 20px; font-weight: bold; margin: 24px 0; padding: 20px 0 10px; position: relative; border: 4px solid var(--color-base-line-light); border-width: 0 0 4px; } body.floor #contents-main h3:after { content: ""; width: 4em; height: 4px; display: block; background: var(--color-base-accent-dark); left: 0; right: 0; margin: auto; bottom: -4px; position: absolute; } body.floor #contents-main h4 { background: var(--color-base-line-light); color: var(--color-base-accent-dark); font-size: 16px; font-weight: bold; text-align: center; padding: 16px; } body.floor-all .allmap { margin: 20px 0; } body.floor-all .allmap_map { border: 4px solid var(--color-base-line-light); border-width: 4px; width: 90%; margin: 0 auto; } body.floor-all .allmap_map ul.allmap_list > li { padding: 30px 0; border: 4px solid var(--color-base-line-light); border-width: 0 0 4px; } body.floor-all .allmap_map ul.allmap_list > li:last-child { border: none; } body.floor-all .allmap_map ul.allmap_list > li.fb1 { position: relative; } body.floor-all .allmap_map ul.allmap_list > li.fb1:before { content: ""; display: block; background: var(--color-base-line-light); width: 108%; height: 8px; position: absolute; left: -4%; top: -8px; } body.floor-all .allmap_map dl { display: table; width: 100%; border-spacing: 40px 0; } body.floor-all .allmap_map dt { display: table-cell; vertical-align: middle; width: 22%; font-weight: bold; font-size: 32px; letter-spacing: 0.1em; font-family: var(--fontfamily-english); text-align: center; } body.floor-all .allmap_map dd { display: table-cell; vertical-align: middle; border-radius: 4px; } body.floor-all .allmap_map dd.shop { width: 38%; text-align: center; background: var(--color-base-accent-light); border: 1px solid var(--color-base-line-dark); border-width: 1px; box-sizing: border-box; } body.floor-all .allmap_map dd.shop a { display: block; padding: 20px; box-sizing: border-box; font-weight: bold; font-size: 16px; position: relative; } body.floor-all .allmap_map dd.shop a:after { content: "\e5cc"; font-family: var(--fontfamily-icon); color: var(--color-base-accent-dark); vertical-align: top; font-size: 30px; display: inline-block; padding-right: 6px; position: absolute; right: 10px; top: calc(50% - 12px); } body.floor-all .allmap_map dd.other { background: var(--color-base-line-light); box-sizing: border-box; padding: 10px 20px; position: relative; } body.floor-all .allmap_map dd.other li { border-bottom: 1px solid #fff; line-height: 1.2em; padding: 10px 0; font-size: 14px; } body.floor-all .allmap_map dd.other li a { text-decoration: underline; } body.floor-all .allmap_map dd.other li:last-child { border: none; } /* 来店型事務所 */ body.floor-all .allmap_map li.jptower dt{ line-height: 120%; font-size: 24px; } body.floor-all .floor_icon.floor-all{ padding: 16px; margin: 8px 0 0; background: var(--color-base-bg-light); text-align: center; } article.f_section { margin-bottom: 20px; background: #fff; } article.f_section .inner{ padding-bottom: 30px; } body.floor article.f_section .floor_img { padding: 24px 80px; width: 100%; box-sizing: border-box; border-radius: 0px; } body.floor article.f_section .floor_img:after { content: ""; display: block; position: fixed; top: 0px; left: 0px; z-index: -1; width: 100%; height: 100vh; } body.floor article.f_section .floor_img .desc { background: #fff; padding: 0 16px 16px; margin: 0 0 0; background: var(--color-base-bg-light); text-align: center; } body.floor article.f_section .floor_img .desc p { padding: 5px 0; text-align: center; } body[class*="floor"] .floor_icon { padding: 20px 0 0; } body[class*="floor"] .floor_icon em { background-image: url(../static/fig_floor-signicon.svg); display: inline-block; width: 31px; height: 30px; background-position: center; background-size: auto 30px; text-indent: -9999em; overflow: hidden; background-repeat: no-repeat; padding: 0; margin: 0 2px; vertical-align: middle; } body[class*="floor"] .floor_icon em.icn-1 { background-position: 0px 0;} body[class*="floor"] .floor_icon em.icn-2 { background-position: -37px 0;} body[class*="floor"] .floor_icon em.icn-3 { background-position: -75px 0;} body[class*="floor"] .floor_icon em.icn-4 { background-position: -112px 0;} body[class*="floor"] .floor_icon em.icn-5 { background-position: -150px 0;} body[class*="floor"] .floor_icon em.icn-6 { background-position: -186px 0;} body[class*="floor"] .floor_icon em.icn-7 { background-position: -225px 0;} body[class*="floor"] .floor_icon em.icn-8 { background-position: -262px 0;} body[class*="floor"] .floor_icon em.icn-9 { background-position: -299px 0;} body[class*="floor"] .floor_icon em.icn-10 { background-position: -337px 0;} body[class*="floor"] .floor_icon em.icn-11 { background-position: -375px 0;} body[class*="floor"] .floor_icon p{ display: inline-block; margin-right: 5px; } body.floor.pc .allmap_map dd.other:before { content: ""; display: block; background: var(--color-base-line-light); width: 4px; height: 100%; position: absolute; left: -20px; top: 0; } body.floor article.f_section .floor_img .desc .caption { font-size: 0.9em; } /*Zoomの追加css　*/ body.floor article.f_section .floor_img .zoom_area { position: relative; z-index: 1; } .leaflet-container { z-index: 100; padding:0 10px; border:1px solid #ccc; background-color:#fff; } /*フロア説明*/ body.floor article.f_section div[class^="floordesc_"]{ margin: 0 auto 30px; align-items: center; display: flex; justify-content: center; } body.floor article.f_section div[class^="floordesc_"] h5{ align-items: center; display: flex; justify-content: center; position: relative; margin-right: 20px; } body.floor article.f_section div[class^="floordesc_"] h5:after{ font-family: var(--fontfamily-icon); content: "\e941"; font-size: 40px; position: absolute; left: 50%; } body.floor article.f_section div[class^="floordesc_"] img{ width: auto; margin-right: 60px; } body.floor article.f_section div[class^="floordesc_"] p{ width: 50%; } /*----------店舗一覧テーブル----------*/ .floor_notice { padding: 10px 0; font-size: 10px; text-align: right; } .floor .table01 thead { display: none; } /*構造*/ body.floor .table_shop_list { margin: 16px 0 40px; } body.floor .table_shop_list td { padding: 20px 0; } body.floor .table_shop_list td.number { width: 7%; text-align: center; } /*ショップ番号*/ body.floor .table_shop_list td.number span { font-family: var(--fontfamily-english); text-align: center; line-height: 1em; padding: 0.8em 0.4em; box-sizing: border-box; display: block; font-weight: bold; font-size: 16px; color: #fff; width: 3.6em; background: #f2897b; } /*カテゴリ別色分け*/ body.floor .table_shop_list .cat1 td.number span{ background: #FCA230; } body.floor .table_shop_list .cat2 td.number span{ background: #FF695A; } body.floor .table_shop_list .cat3 td.number span{ background: #9BCE65; } body.floor #f_jptower .table_shop_list td.number span{ background: var(--color-base-sub1-dark); } /*カテゴリ別bimiyokocho*/ body.floor .table_shop_list tr.bimiyokocho td.number span { background: #fff; color: var(--color-base-text-dark);border: 1px solid #D8DB42; } body.floor .table_shop_list td.name { width: 36%; font-size: 14px; position: relative; padding: 16px 10px; } body.floor .table_shop_list.japanpost td.name { width: 43%; } body.floor .table_shop_list td.name .shopname { font-size: 16px; font-weight: bold; } body.floor .table_shop_list td.logo { width: 115px; padding-right: 15px; text-align: right; } body.floor .table_shop_list td.logo img { max-width: 100px; margin: 0 auto; } body.floor.pc .table_shop_list td.logo { border-right: 4px solid var(--color-base-line-light); } body.floor .table_shop_list td.tel { width: 18%; position: relative; padding-left: 42px; } body.floor .table_shop_list.japanpost td.tel{ width: 24%; } body.floor .table_shop_list td.hour { white-space: pre-wrap; position: relative; padding: 26px; } body.floor .table_shop_list .hour:before { font-family: var(--fontfamily-icon); content: "\e8b5"; margin: 0 4px 0 0; font-size: 18px; display: block; position: absolute; top: calc(50% - 8px); left: 4px; } body.floor .table_shop_list .tel:before { font-family: var(--fontfamily-icon); font-variation-settings: var(--iconfont-FILL1-set); content: "\e0b0"; font-size: 18px; position: absolute; top: calc(50% - 8px); left: 20px; } body.floor .table_shop_list .hour:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; font-size: 30px; color: var(--color-base-accent-dark); font-variation-settings: var(--iconfont-wght700GRAD200-set); vertical-align: middle; position: absolute; top: calc(50% - 12px); right: 0; } body.floor .table_shop_list.japanpost .hour:after { content: "\e89e"; font-size: 18px; color: var(--color-base-text-dark); font-weight: normal; } /* --------------------------------------------- フロアガイド共通リストボタン --------------------------------------------- */ .floor dl.floorlist{ display: flex; justify-content: center; flex-wrap: wrap; margin: 20px auto 10px; gap: 10px; } .floor dl.floorlist dt{ border: 1px solid var(--color-base-line-dark); border-width: 1px; border-radius: 4px; display: inline-block; width: calc(100% / 5 - 15px); text-align: center; background: #fff; } .floor dl.floorlist dt a{ display: block; padding: 12px 0px 12px 20px; font-weight: bold; font-size: 16px; letter-spacing: 0.1em; font-family: var(--fontfamily-english), var(--fontfamily-base); } .floor dl.floorlist dt a:after{ font-family: var(--fontfamily-icon); content: "\e5cc"; font-size: 30px; color: var(--color-base-accent-dark); vertical-align: bottom; } .floor dl.floorlist dt.fid_jptower{ width: 70%; } .floor dl.floorlist dt.all-btn { background: #333; border-color: #fff; width: calc(100% / 5 + 10px); } .floor dl.floorlist dt.all-btn a { color: #fff; padding: 12px 0 12px 10px; } .floor dl.floorlist dt.all-btn a:after { color: #fff; } .floor dl.floorlist dt a:hover { text-decoration: none; } /* --------------------------------------------- フロアページ下部　フロア一覧 --------------------------------------------- */ .floorsearch_box .floorsearch { font-family: var(--fontfamily-english); font-weight: bold; text-align: center; font-size: 24px; padding: 20px 0 0; color: var(--color-base-main-dark); } .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; } /* --------------------------------------------- ランキングページ(shop/favorite.jsp) --------------------------------------------- */ #contents.favorite #favorite .item { border-bottom: 4px solid var(--color-base-line-light); margin: 0 0 10px 0; padding: 20px 20px 30px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } #contents.favorite #favorite .item::after { content: ""; display: block; clear: both; } #contents.favorite #favorite .item .ranking_box { min-height: 100px; /*#contents.favorite #favorite .order の height と同値*/ } #contents.favorite #favorite .item .order { display: block; width: 100px; height: 200px; height: 240px; margin: 0 30px 0 0; background: #8A6B4F; font-family: var(--fontfamily-english); font-weight: 700; color: #fff; text-align: center; font-size: 26px; float: left; line-height: 100px; letter-spacing: 0.05em; } #contents.favorite #favorite .item:nth-of-type(1) .order { background: #AE9860; line-height: 20px; } #contents.favorite #favorite .item:nth-of-type(1) .order::before { content: ""; background: url(../img/ico_ranking-white.svg); background-size: cover; display: block; margin: 24px auto 10px auto; width: 30px; height: 40px; } #contents.favorite #favorite .item:nth-of-type(2) .order { background: #8D8D8D; } #contents.favorite #favorite .item .image { display: block; width: 160px; height: 240px; float: right; margin: 0 0 0 0; overflow: hidden; position: relative; border: 1px solid var(--color-base-line-dark); } #contents.favorite #favorite .item .image img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; } #contents.favorite #favorite .item .desc { display: block; width: calc(100% - 320px); float: left; } #contents.favorite #favorite .item .goods.title { margin: 0 0 20px 0; padding: 20px 0; display: block; border-bottom: 1px dotted var(--color-base-line-dark); font-size: 18px; line-height: 24px; } #contents.favorite #favorite .item .goods.title a { font-weight: bold; } /*いいねカウンター*/ #contents.favorite #favorite .goods_like_btn.mini { position: static; margin: 15px 0 15px; } #contents.favorite #favorite .goods_like_btn.mini p { width: auto; padding: 4px 30px; } #contents.favorite #favorite .item .fa-heart { font-size: 19px; margin: 0 8px 0 0; } #contents.favorite #favorite .item .cnt { display: inline-block; border-radius: 3px; padding: 2px 0 3px 0; position: relative; font-family: var(--fontfamily-english); font-weight: bold; font-size: 22px; } /*morebtn*/ #contents.favorite #favorite .item .morelink { position: static; } #contents.favorite #favorite .item .morelink span { margin: 0; } /* --------------------------------------------- 人気タグページ(shop/tag.jsp) --------------------------------------------- */ /* #contents #tag { text-align: center; } */ /*タグ　タイトル部*/ #contents.tag .tag-title { position: relative; background: transparent; padding: 30px 0 10px 0; font-size: 18px; } #contents.tag .tag-title::after { content: ""; background: var(--color-base-accent-dark); position: absolute; display: block; width: 180PX; height: 4px; left: 0; right: 0; margin: auto; bottom: -4px; } #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; font-weight: bold; background: #333; color: #fff; display: inline-block; width: 40px; height: 1.3em; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 100px; margin-left: 8px; font-family: var(--fontfamily-english); font-weight: 700; line-height: 1.3em; } /*タグ　アイテムリスト*/ #contents #tag { text-align: center; } #contents #tag .goodslist { overflow: hidden; border: 4px solid var(--color-base-line-light); border-bottom: none; padding: 20px 15px 0; } #contents #tag .goodslist .item { width: calc(100% / 3); height: 200px; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 10px 0 0; padding: 16px; float: left; text-align: left; position: relative; } #contents #tag .goodslist .item .news_box { width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } #contents #tag .goodslist .item p.image { width: 140px; height: 180px; float: right; border: 1px solid var(--color-base-line-dark); /**/ position: absolute; top: 5px; right: 14px; } #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 { width: calc(100% - 150px); position: relative; padding: 0; } #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: 14px; overflow: hidden; position: relative; margin: 0 0 2px 0px; line-height: 20px; } #contents #tag .goodslist .item .name { font-size: 12px; } #contents #tag .goodslist .item .price { display: none; font-weight: bold; font-size: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #contents #tag .goodslist .item .date { font-size: 12px; font-weight: bold; line-height: 1em; font-family: var(--fontfamily-english); } #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; text-align: center; padding: 10px 0 25px; border: 4px solid var(--color-base-line-light); border-top: none; margin: 0 0 15px; } #contents #tag .more-button-wrap:last-of-type { position: relative; margin-bottom: 60px; } #contents #tag .more-button-wrap:last-of-type:after { content: "OTHER TAGS"; display: inline-block; text-align: center; font-family: var(--fontfamily-english); position: absolute; bottom: -70px; font-size: 18px; font-weight: bold; border-bottom: 4px solid var(--color-base-accent-dark); left: calc(50% - 3.5em); } #contents #tag .tag_list_name:first-of-type { margin-top: 25px; } /*下部に並ぶタグ一覧(×フッター)*/ #contents #tag .tag_list_name a { padding: 7px 18px; } #contents #tag .tag_list_name a::before { vertical-align: unset; } #contents #tag .tag_list-tagname { font-weight: bold; } #contents #tag .tag_list-tagcount { font-size: 14px; font-weight: bold; background: #fff; display: inline-block; width: 24px; height: 24px; line-height: 24px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; padding-top: 0; margin-left: 8px; font-family: var(--fontfamily-english); font-weight: 700; } /*下部に並ぶタグ一覧（tagitemlist）*/ #contents .trendtag_list { background: var(--color-base-bg-light); width: 960px; margin: 0 auto; } #contents .trendtag_list h4 { font-family: var(--fontfamily-english); font-weight: bold; text-align: center; font-size: 18px; padding: 20px 0 6px; margin: 0 0 24px; position: relative; font-size: 18px; position: relative; } #contents .trendtag_list h4::after { content: ""; display: block; width: 160px; height: 4px; position: absolute; left: 0; right: 0; bottom: -4px; margin: auto; background: var(--color-base-accent-dark); } /*Tag一覧ページのみ*/ .tagitemlist #contents.tag .tag-title { padding-top: 0; } .tagitemlist #contents.tag h3.tag-title::before { vertical-align: top; } .tagitemlist .tag_list_name a { background: #fff; } #contents.tag .NewsItemList { border: 4px solid #eaeaea; padding: 15px; } /*一覧へ戻るボタン*/ #contents.tag .return_list { clear: both; margin: 20px 0; text-align: center; } /* --------------------------------------------- 特集ページ(shop/feature.jsp) --------------------------------------------- */ #contents #feature .feature { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 20px 10px; border-bottom: 4px solid #eeeeee; overflow: hidden; } #contents #feature .feature > h2{ display: none; } #contents #feature .feature .image { display: block; float: right; width: 400px; height: 200px; margin: 0 0 0 20px; } #contents #feature .feature .title { padding: 10px 0; font-weight: bold; font-size: 18px; } #contents #feature .feature .date { display: none; font-size: 12px; font-family: var(--fontfamily-english); line-height: 1em; margin: 0.5em 0; } /*ピックアップガイド個別ページ*/ #contents #feature .feature article .content1 { white-space: pre-wrap; } #contents #feature .feature article .content2 { font-size: 10px; } body.item_feature #contents article h3{ border: none; margin: 0 0 20px; padding: 0; overflow: hidden; border-bottom: 4px solid var(--color-base-line-light); background: none; color: var(--color-base-text-dark); text-align: center; } 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; } /*一覧へ戻るボタン*/ #contents.feature .return_list { display: none; clear: both; margin: 20px 0; text-align: center; } /*-------------------- ショップニュースの店長ボイス TOPページも兼用 --------------------*/ .bf2 #contents .voice { background: #fff; display: flex; margin: 0 0 40px; } #contents .voice .p_title { width: 240px; text-align: center; } #contents .voice .p_title h2 { font-family: var(--fontfamily-english); font-weight: 700; font-size: 24px; background: #fff; margin: 0; padding: 20px 0 12px; border-bottom: 0; width: auto; } #contents .voice .p_title ul { width: 100%; padding: 0; } #contents .voice .p_title ul li { width: 100%; } #contents .voice .swiper-container_voice { width: calc(100% - 240px); display: flex; overflow: hidden; box-sizing: border-box; padding: 10px 0 0; } #contents .voice ul li { width: 50%; flex-shrink: 0; padding-left: 1px; } #contents .voice .swiper-container_voice.one_item ul li { width: 100%; } .pc #contents .voice .swiper-container_voice.one_item ul li .detail{ padding: 25px 15px 0 25px; } #contents .voice ul .logoimg{ margin-right: 10px; float: right; display: block; padding: 10px; } #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: calc(100% - 110px); float: left; padding: 15px 15px 0 15px; box-sizing: border-box; position: relative; min-height: 94px; box-sizing: border-box; border-radius: var(--box-radius-medium); background: var(--color-base-accent-light); } #contents .voice ul .detail:after{ content: ""; display: block; position: absolute; top: calc(50% - 12px); width: 0; height: 0; border: 12px solid transparent; right: -22px; border-left: 12px solid var(--color-base-accent-light); } #contents .voice ul .goodsname { font-weight: bold; } #contents .voice ul .sendtime{ position: absolute; color: var(--color-base-accent-dark); display: block; bottom: 10px; padding: 0px 8px; font-size: 12px; font-weight: bold; right: 10px; } #contents .voice ul .shopname a { display: block; font-size: 12px; } #contents .btn-more { display: inline-block; background: var(--color-base-bg-light); font-family: var(--fontfamily-english); padding: 0 5px 0 14px; border-radius: 4px; font-size: 14px; font-weight: bold; line-height: 1.6em; border: 1px solid var(--color-base-line-dark); -webkit-box-sizing: border-box; box-sizing: border-box; } #contents .btn-more em { font-weight: inherit; } #contents .btn-more:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin-left: 5px; font-size: 20px; font-weight: bold; color: var(--color-base-accent-dark); vertical-align: middle; } /* --------------------------------------- ニュース、クーポン、ボイス、求人のタブ --------------------------------------- */ /* タブを非表示 */ .shop .shopnews_tab{ display: none; } .shopnews_tab { height: 70px; margin: 0 0 0; display: flex; justify-content: space-around; } .shopnews_tab li { width: 100%; -webkit-box-sizing: border-box; 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; } .shopnews_tab li a::after { content: "\e5cc"; font-family: var(--fontfamily-icon); font-weight: bold; font-size: 24px; vertical-align: bottom; margin-left: 25px; color: #e83722; position: absolute; right: 25px; -webkit-transition-duration: .2s; transition-duration: .2s; font-variation-settings: var(--iconfont-wght700GRAD200-set); } .shopnews_tab li a:hover::after { right: 20px; } .shopnews_tab li.current a { position: relative; background: #333; border-bottom: none; margin-top: 0; line-height: 70px; height: 70px; font-weight: bold; color: #fff; font-size: 20px; } .shopnews_tab li.current a:after { content: "\e5cf"; color: #fff; bottom: -24px; right: 0; left: 0; font-size: 90%; margin-left: 0; } .shopnews_tab li.current a:hover::after { bottom: -28px; } .shopnews_tab li a .num { font-size: 17px; font-family: var(--fontfamily-english); font-weight: bold; margin-left: 4px; } .shopnews_tab li a .num::before { content: "("; } .shopnews_tab li a .num::after { content: ")"; } .shopnews_tab li:nth-child(4) a:before { content: "#"; font-family: var(--fontfamily-english); margin: 0 4px 0 0; color: var(--color-base-sub1-dark); }