@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,300,0..1,-25"); .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' -25, 'opsz' 48 } /*基本設定*/ :root { --color-base-text-dark: #333; /*テキストの色*/ --color-base-line-dark: #ababab; /*主に濃い罫線グレー*/ --color-base-line-light: #f0f0f2; /*主に薄い罫線グレー*/ --color-base-line-midlight: #cccccc; /*主に少し薄い罫線グレー*/ --color-base-bg-dark: #333; /*濃いグレー */ --color-base-bg-light: #f4f5f5; /*薄いグレー */ --color-base-bg-midlight: #eeeeee; /*少し薄いグレー */ --color-base-main-dark: #333; /*メインカラー*/ --color-base-main-light: #f0f0f2; /*メイン薄いカラー*/ --color-base-main-midlight: #f0f0f2; /*メイン少し薄いカラー　主にボタン用*/ --color-base-accent-dark: #e23d6c; /*アクセントカラー*/ --color-base-accent-light: #fcebf0; /*アクセント薄いカラー*/ --color-base-sub1-dark: #33a065; /*サブカラー1*/ --color-base-sub1-light: #cfe5df; /*サブカラー1うすい*/ --color-base-sub2-dark: #f8484b; /*サブカラー2*/ --color-base-sub2-light: #feeced; /*サブカラー2うすい*/ --color-base-sub3-dark: #40bbc1; /*サブカラー3*/ --color-base-sub3-light: #ecf8f9; /*サブカラー3うすい*/ --color-base-sub4-dark: #cf352b; /*サブカラー4*/ --fontfamily-base: "Noto Sans JP", "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; --fontfamily-english: 'Outfit', sans-serif; --fontfamily-icon: "Material Symbols Outlined"; --iconfont-FILL1-set: 'FILL' 1; /**/ --color-goodslike: #e23d6c; --inner-Max-Width :1200px; --inner-Min-Width :960px; --inner-Width :90%; --box-radius-small:5px; --box-radius-medium:10px; --box-radius-large:15px; --box-radius-xlarge:20px; --box-radius-full:50%; /*アンカーリンク処理*/ scroll-padding-top: 142px; } html { } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, address { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0; } address, caption, cite, code, dfn, em, th, var { font-style: normal; font-weight: normal; } li { list-style: none; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } q:before, q:after { content: ''; } abbr, acronym { border: 0; font-variant: normal; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } input, textarea, select, button { font-family: inherit; font-size: inherit; font-weight: inherit; } input, textarea, select, button { *font-size: 100%; } legend { color: #000; } img, a img { vertical-align: bottom; border: 0px; } ul, ol, li, dl, dt, dd { list-style-type: none; } table { border-collapse: collapse; } pre { white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; } /* のID名ルール施設名のアルファベットのクラス名ルール・ファイル名 */ body { background: #FFF; font-size: 90%; color: var(--color-base-text-dark); font-family: var(--fontfamily-base); line-height: 1.6em; position: relative; } a { text-decoration: none; color:var(--color-base-text-dark); } a:hover { text-decoration: none; opacity: 0.8; } img { max-width: 100%; } a.hoverlink { display: none; } a.hoverlink { display: block !important; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; text-indent: -9999em; z-index: 5; } /*商品画像を背景で読み込む共通*/ .img_bg_css { display: block; width: 100%; height: 100%; min-height: 40px; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 0px; box-sizing: border-box; } pre { font-family: var(--fontfamily-base)} /*ニュース画像がなくlogoに置き換わる箇所　共通*/ .img_bg_css.no_img_logo { background-size: 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); position: absolute; margin: 0; top: -10px; left: -10px; text-align: center; color: #fff; padding: 5px 0; font-size: 13px; border-radius: 50%; background: var(--color-base-accent-dark); width: 34px; height: 34px; box-sizing: border-box; z-index: 10; letter-spacing: 0.05em; } .ico_jobs, .ico_new2, .ico_coupon { display: inline-block; text-decoration: none; font-size: 11px; padding: 0 2px; border-radius: var(--box-radius-small); margin: 0 0px 0 3px; } .ico_jobs { background: var(--color-base-sub1-dark); color: #fff; } .ico_new2 { color: var(--color-base-accent-dark); font-weight: bold; font-family: var(--fontfamily-english); } .ico_coupon { background: var(--color-base-accent-dark); color: #fff; } span.sale { color: #f00; } .to-top { position: fixed; bottom: 20px; right: 20px; z-index: 45; width: 50px; height: 50px; } .to-top a { position: absolute; width: 100%; height: 100%; text-indent: -9999em; display: block; background: rgba(0,0,0,0.9); border-radius: 50%; opacity: 0.7; } .to-top a:before { font-family: var(--fontfamily-icon); content: "\e316"; font-size: 24px; width: 100%; height: 100%; display: block; text-indent: 0; text-align: center; line-height: 50px; position: absolute; color: #fff; top: 0; left: 0; } #main { width: 100%; margin: 0 auto; } @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: 18px 0; margin: 0 auto; font-size: 18px; font-weight: bold; text-align: center; } #contents > h2 { background: var(--color-base-bg-light); } #contents-main { float: left; width: calc(100% - 320px); padding: 20px 30px; box-sizing: border-box; } #contents-main.all { width: 100%; float: none; box-sizing: border-box; padding: 30px 0; } #contents-main h3 { padding: 15px; font-size: 20px; font-weight: bold; background: var(--color-base-sub1-light); color: var(--color-base-main-dark); line-height: 1.5em; } #sub{ width:300px; float:right; box-sizing: border-box; padding: 20px 30px; } /*header*/ body.view header { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; background-size: 10px auto; background: rgba(255, 255, 255, 0.9); z-index: 100; } body.view header { /*position: fixed;*/ position: absolute; /*スクロールしたらmenuだけfixed*/ top: 0; width: 100%; } body.pc.view header + *{ padding-top: 140px; } header._scroll .header_glo { /*スクロールしたらmenuだけfixed*/ position: fixed; top: 0; padding: 14px 0 0; min-height: 56px; width: 100%; background: #fff; border-bottom: 1px solid var(--color-base-line-dark); z-index: 5000; } #main_header h1{ display:none; } #main_header { position: relative; border-bottom: 1px solid var(--color-base-line-dark); } #main_header .sc_header_top_navi { width:100%; background: var(--color-base-line-light); height:30px; } #main_header .sc_navi { position: absolute; top:0; left:0; display: flex; width:100%; } #main_header .sc_navi li{ display: inline-block; margin:0px 4px; box-sizing: border-box; } #main_header .sc_navi li a{ display: block; padding:4px 10px; box-sizing: border-box; height:30px; } body.pc #main_header .sc_navi li a{ font-size:0.85em; } #main_header .sc_navi li.all a{ position: relative; padding-left:30px; } @media (max-width: 1270px){ body.pc #main_header .sc_navi li a{ letter-spacing: -0.05em; padding: 4px; } body.pc #main_header .sc_navi li.all a{ padding-left:30px; } } #main_header .sc_navi li.all a:before{ position: absolute; top:3px; left:0; font-family: var(--fontfamily-icon); margin: 0 4px 0 0; content: "\e58c"; font-size: 22px; } #main_header .sc_navi li.current a{ background: var(--color-base-main-dark); color:#fff; } #main_header .lang_btn { position: absolute; right:0; top:0; display: inline-block; border:1px solid #707070; border-top:none; background: #fff; box-sizing: border-box; height:30px; } #main_header .lang_btn a{ padding:0px 18px ; height:30px; box-sizing: border-box; display: inline-block; } #main_header .lang_btn a:before{ width:20px; height:20px; display: inline-block; margin:0; vertical-align: middle; content: "\e80b"; width: 24px; height: 24px; font-family: var(--fontfamily-icon); font-size: 20px; line-height: 1em; } #main_header .lang_btn.active a { font-weight:bold; } /*外国語プルダウンメニュー*/ #main_header .multilang_list { position: absolute; top:1px; right:0px; z-index: 1000; background:#fff; padding:0 10px; box-shadow: 0px 3px 10px 0px rgba(0,0,0,.2); } #main_header .multilang_list li{ border-bottom:1px dashed #ddd; } #main_header .multilang_list li:last-child{ border:none; } #main_header .multilang_list li a{ display: block; padding:10px 15px; min-width: 120px; } #main_header .multilang_list li a::after{ font-family: var(--fontfamily-icon); content: '\e5cc'; position: absolute; right:15px; font-size:1.2em; } #main_header .sns_link{ position: absolute; top: 40px; right: 0; display: flex; justify-content: space-between; width: 116px; } #main_header .sns_link li{ width: calc(100%/3 - 7px); } #main_header .sns_link img{ width: 100%; } /*-------- ----------------------------------------------- .header_logo ロゴ表示領域 -------------------------------------------------------*/ .header_wrap { display: flex; align-items:center; /*height: 140px;*/ box-sizing: border-box; flex-wrap: wrap; } .header_logo{ width:95px; text-align: center; padding:20px 0; box-sizing: border-box; display: block; margin: auto; } .header_logo img{ max-width: 95%; max-height: 95%; } /*------------------------------------------------------- グローバルメニュー ------------------------------------------------------------*/ .header_glo{ width: 100%; } .glo_menu_list{ display: flex; justify-content: space-around; padding: 0 0 10px; } .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_items:last-child{ } .glo_menu_list .glo_menu_inner { cursor: pointer; width: auto; height: 100%; display: inline-block; box-sizing: border-box; position: relative; text-align: center; line-height: 1.2em; transition: all 0.5s; } body.pc .glo_menu_list .glo_menu_inner{ /* font-size:0.85em; */ } .glo_menu_list .glo_menu_inner em{ font-style: normal; font-weight: bold; } .glo_menu_list a.glo_menu_inner:hover{ text-decoration: none; /*aタグinnerのhoverで下線を出さない*/ } .glo_menu_list .glo_menu_inner::before{ display: block; font-family: var(--fontfamily-icon); font-size: 22px; height: 22px; line-height: 1em; margin: 0 auto 4px; } .glo_menu_list .glo_menu_inner[data-value="1"]::before{content: "\e153";}/*イベント＆ニュース*/ .glo_menu_list .glo_menu_inner[data-value="2"]::before{content: "\f1cc";}/*ショップニュース*/ .glo_menu_list .glo_menu_inner[data-value="3"]::before{content: "\e53b";}/*フロアガイド*/ .glo_menu_list .glo_menu_inner[data-value="4"]::before{content: "\e8b6";}/*ショップ検索*/ .glo_menu_list .glo_menu_inner[data-value="5"]::before{content: "\e7fd";}/*求人情報*/ .glo_menu_list .glo_menu_inner[data-value="6"]::before{content: "\e8b5";}/*施設案内*/ .glo_menu_list .glo_menu_inner[data-value="7"]::before{content: "\e0c8";}/*交通アクセス*/ /*--------------------- 重要なおしらせ ----------------------*/ .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 .bnr_list .bnr_item { box-sizing: border-box; padding:10px; border-bottom:1px solid #f00; text-align: left; } .AllPageBnr .bnr_list .bnr_item em{ display: inline-block; margin-right:1em; font-family: var(--fontfamily-english); } /*緊急のおしらせ　TOP以外　other_page*/ .AllPageBnr.other_page{ width:100%; margin:0; text-align: center; } .AllPageBnr.other_page .bnr_list { width: 100%; margin:0; border:none; } .AllPageBnr.other_page .bnr_list .bnr_item { border-bottom: 1px solid var(--color-base-line-dark); text-align: center; padding:4px 0; font-size:12px; } .AllPageBnr.other_page .bnr_list .bnr_item em.date{ display: none; } .AllPageBnr.other_page .bnr_list .bnr_item a{ text-decoration: underline; } .AllPageBnr.other_page .bnr_list .bnr_item:before{ font-family: var(--fontfamily-icon); content: "\e645"; color: #fff; border-radius: var(--box-radius-full); background: #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; border-top:1px solid var(--color-base-line-midlight); padding:30px 0 0; } footer .footer_menu { display: flex; } footer .footer_menu dl { border-left: 1px solid var(--color-base-line-midlight); margin: 0; min-height: 180px; padding: 10px 10px 10px 30px; width: calc(100% / 4); box-sizing: border-box; } footer .footer_menu dl:last-child { border-right: 1px solid var(--color-base-line-midlight); } footer .footer_menu dl dt { font-weight: bold; font-size: 14px; margin-bottom:0.5em; } footer .footer_menu dl li { list-style: disc; list-style-position: inside; } footer .footer_menu dd ul li{ list-style: none; padding: 0.2em 0; } footer .footer_menu dd ul li:before{ content: "-"; display: inline-block; padding:0px 8px 0 4px; } footer .footer_menu dl.footer-sc {} footer .footer_menu dl.footer-sc .sc_name { font-weight:bold; } footer .footer_menu dl.footer-sc .sc_logo{ height:30px; } footer .footer_menu dl.footer-sc .sc_logo img{ max-height: 100%; } footer .footer_menu dl.footer-sc .sns_link { display: flex; align-items: center; } footer .footer_menu dl.footer-sc .sns_link li { margin:8px 4px; } footer .footer_menu dl.footer-sc .sns_link li:before{ display: none; } footer .footer_menu dl.footer-sc .sns_link li img{ max-height:36px; } footer .footer_menu dl.footer-sc .sns_link li.youtube img{ max-height:30px; } footer .footer_list { margin:30px 0 20px; padding:20px ; box-sizing: border-box; background:var(--color-base-main-light) ; display: flex; text-align: center; } footer .footer_list .brand_logo { width:140px; display: inline-block; margin-right:20px; } footer .footer_list .brand_logo img { width:100%; vertical-align: middle; } .footer_sc_navi { display:inline-block; } footer .footer_list .sclist{ display: inline-block; } footer .footer_list .sc_navi { display: flex; } footer .footer_list .sc_navi li{ display: inline-block; margin:0px 4px; box-sizing: border-box; } footer .footer_list .sc_navi li a{ display: block; padding:4px 10px; box-sizing: border-box; height:30px; } footer .footer_list .sc_navi li.all a{ position: relative; padding-left:30px; } footer .footer_list .sc_navi li.all a:before{ position: absolute; top: 3px; left: 0; font-family: var(--fontfamily-icon); margin: 0 4px 0 0; content: "\e58c"; font-size: 22px; } footer .footer_list .sc_navi li.current a{ background: var(--color-base-main-dark); color:#fff; } footer .footer_list .kanren { display: flex; justify-content: center; margin-top:16px; } footer .footer_list .kanren dd{ } footer .footer_list .kanren dd ul{ display: flex; justify-content: center; } footer .footer_list .kanren dd ul li a{ display:inline-block; padding:0 15px; border-right:1px solid var(--color-base-line-dark); line-height: 1; } footer .footer_list .kanren dd ul li:last-child a{ border:none; } footer .footer_payment { margin: 20px auto; } footer .footer_payment .payment_list{ display: flex; flex-wrap: wrap; align-items: inherit; justify-content: space-between; } footer .footer_payment .payment_list dt{ background: var(--color-base-sub1-light); color: var(--color-base-sub1-dark); text-align: center; padding: 12px 0 14px; width: 100%; margin-bottom: 20px; } footer .footer_payment .payment_list .pt15{ padding-top: 15px; } footer .footer_payment .payment_list .mb10{ margin-bottom: 10px; } footer .footer_payment .payment_list .box{ width: 50%; box-sizing: border-box; font-size: 12px; line-height: 1.6; } footer .footer_payment .payment_list .box:nth-child(even){ border-right: 2px dotted var(--color-base-line-midlight); } footer .footer_payment .payment_list .box:nth-child(odd){ padding-left: 25px; } footer .footer_payment .payment_list .box:nth-child(2), footer .footer_payment .payment_list .box:nth-child(3){ border-bottom: 2px dotted var(--color-base-line-midlight); } footer .footer_payment .payment_list .box .title{ font-size: 12px; font-weight: 700; color: #fff; background:var(--color-base-sub1-dark); display: inline-block; min-width: 140px; text-align: center; border-radius: 6px; margin: 0 0 10px; padding: 10px 0; line-height: 1; } footer .footer_payment .payment_list .box .img_credit{ width: 100%; max-width: 300px; } footer .footer_payment .payment_list .box .img_money{ width: 100%; max-width: 440px; } footer .footer_payment .payment_list .box .img_qr{ width: 100%; max-width: 460px; } footer .footer_payment .payment_list .chui{ font-size: 10px; margin: 0 0 10px; } footer .footer_payment .payment_list .attention{ width: 100%; margin: 20px 0 0 0; padding: 10px; border: 1px solid var(--color-base-sub4-dark); box-sizing: border-box; font-size: 10px; line-height: 1; text-align: center; } footer .ad_foot_desc { padding: 6px 0 8px; text-align: center; background: var(--color-base-bg-midlight); } footer .ad_foot_desc:last-of-type { padding: 25px 0; background: var(--color-base-bg-dark); color: #FFF; } footer .ad_foot_desc ul { display: flex; justify-content: center; } footer .ad_foot_desc ul li { padding:0 12px; font-size: 12px; } footer .ad_foot_desc ul li:not(:last-of-type)::after { content: "／"; padding-left: 12px; } footer .ad_foot_desc ul li a{ display: inline-block; } .pc footer address .zip{ padding: 0 1em; } .pc footer address .tel{ padding: 0 0 0 1em; } footer .copyright p{ font-family: var(--fontfamily-english); } /********************************** メインバナー、中バナー、小バナー関連 TOPページ、全ページフッター共通 ******************************************/ .main_banner_area{ height: auto; margin: 0 auto; width:100%; background: var(--color-base-sub1-light); padding:30px 0 20px; } .main_banner_area .bnr_wrap{ width: 100%; /*display: flex; justify-content:space-between;*/ margin: 0 auto; } .main_banner_area .bnr_wrap #banner{ width:100%; position:relative; margin-bottom:40px; } .main_banner_area .bnr_wrap #banner .swiper-container { overflow: hidden; } .main_banner_area .bnr_wrap #banner ul li{ width:650px; height: 410px; overflow: hidden; } .main_banner_area .bnr_wrap #banner ul li img { width:100%; height:auto; box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.1); box-sizing: border-box; border: 7px solid #FFF; /* object-fit: cover; height:100%; object-position: 50% 0; */ } /*Swiperパーツの制御*/ .main_banner_area #banner .swiper-pagination { position: absolute; margin: auto; left: 0; right: 0; bottom: -40px; } .main_banner_area #banner .swiper-pagination-bullet { width:14px; height:14px; background: #FFF; border: 2px solid #ccc; box-sizing: border-box; opacity: 1; } .main_banner_area #banner .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: var(--color-base-sub1-dark); border: 2px solid var(--color-base-sub1-dark); } /*バナー3種セット*/ #smallbanner2 .swiper-button-next, #smallbanner2 .swiper-button-prev, .main_banner_area .swiper-button-next, .main_banner_area .swiper-button-prev { position: absolute; top: 50%; width: 40px; height: 40px; margin-top: calc(0px - (30px / 2)); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; background: #FFF; border-radius: var(--box-radius-full); box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.1); } #smallbanner2 .swiper-button-next, .main_banner_area .swiper-button-next { right: calc(50% - 370px); left: auto; } #smallbanner2 .swiper-button-prev, .main_banner_area .swiper-button-prev { left: calc(50% - 370px); right: auto; } #smallbanner2 .swiper-button-next:after, #smallbanner2 .swiper-button-prev:after, .main_banner_area .swiper-button-next:after, .main_banner_area .swiper-button-prev:after { /*font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 0px; font-size:30px; color: var(--color-base-text-dark);*/ content: ""; background: #565656; height: calc(tan(60deg) * 17px / 2); width: 10px; clip-path: polygon(0 0, 100% 50%, 0 100%); position: relative; right: -2px; } #smallbanner2 .swiper-button-prev:after, .main_banner_area .swiper-button-prev:after { /*content: "\e5cb";*/ clip-path: polygon(0 50%, 100% 0, 100% 100%); right: inherit; left: -2px; } /***mediumbanner****/ #mediumbanner{ display: none; } .main_banner_area .bnr_wrap #mediumbanner{ width:280px; height:420px; overflow: hidden; } .main_banner_area .bnr_wrap #mediumbanner ul li{ margin:0 0 20px; width:280px; height:200px; } .main_banner_area .bnr_wrap #mediumbanner ul li img{ width:100%; height:100%; object-fit:cover; /*上から表示して下をカットする場合 */ object-position: 50% 0;} /***smallbanner1　&　2***/ #smallbanner2, .main_banner_area #smallbanner1{ width:1020px; height:80px; margin: 20px auto 5px; box-sizing: border-box; padding:0 46px; position:relative; } #smallbanner2 .swiper-container, .main_banner_area #smallbanner1 .swiper-container { overflow: hidden; padding:4px 4px; box-sizing: border-box; margin-top:-4px; } #smallbanner2 ul li, .main_banner_area #smallbanner1 ul li{ width:300px; height:80px; overflow: hidden; } #smallbanner2 ul li img, .main_banner_area #smallbanner1 ul li img{ width:100%; height:100%; object-fit:cover; /*上から表示して下をカットする場合 */ object-position: 50% 0; } #smallbanner2 .swiper-button-next, #smallbanner2 .swiper-button-prev, .main_banner_area #smallbanner1 .swiper-button-next, .main_banner_area #smallbanner1 .swiper-button-prev { position: absolute; top: 4px; width: 30px; height: 100%; margin-top: 0; } #smallbanner2 li, .main_banner_area #smallbanner1 li { box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.1); } /*これからこれからこれからこれからこれからこれからこれからこれからこれからこれからこれからこれから*/ /*******************************************/ .footer.shopsearch { border-top: 1px solid var(--color-base-line-dark); /* border-bottom: 1px solid var(--color-base-line-dark);*/ } .footer.shopsearch h4 { font-family: var(--fontfamily-english); font-weight: bold; text-align: center; font-size: 24px; padding: 30px 0 20px; color:var(--color-base-main-dark); } .shop_catlist { border: 4px solid var(--color-base-line-light); border-radius: var(--box-radius-small); background: #fff; /* width: 960px;*/ margin: 0 auto; } .shop_catlist .shoplist { padding: 0 20px 20px; } .shop_catlist h4 { font-family: var(--fontfamily-english); color: var(--color-base-main-dark); font-weight: bold; text-align: center; font-size: 24px; padding: 20px 0 18px; } .shop_catlist ul#this_cat_shoplist { text-align: center; display: flex; flex-wrap: wrap; justify-content: center; } .shop_catlist ul#this_cat_shoplist li { margin: 0 4px 8px; } .shop_catlist ul#this_cat_shoplist li a { padding: 6px 6px; border: 1px solid var(--color-base-line-dark); border-radius: var(--box-radius-small); display: inline-block; font-size: 14px; box-sizing: border-box; line-height: 1.4em; } .footer.shopsearch #cat_title_list { display: flex; justify-content: center; padding: 0 20px 30px; flex-wrap: wrap; } /*.footer.shopsearch #cat_title_list:before, .footer.shopsearch #cat_title_list:after { width: calc((100% + 20px) / 4 - 20px); margin: 0; display: block; content: ""; } .footer.shopsearch #cat_title_list:before { order: 1; }*/ .footer.shopsearch #cat_title_list .catttl { width: calc(100% / 4 - 10px); margin: 0 5px 10px; } .footer.shopsearch #cat_title_list .catttl a { display: block; width: 100%; height: 100%; border-radius: var(--box-radius-small); padding: 20px 25px 20px 10px; box-sizing: border-box; position: relative; text-align: center; font-weight: bold; border:4px solid var(--color-base-line-light); text-align: center; } /*.footer.shopsearch #cat_title_list .catttl a:before{ content: ""; background-position: center; background-repeat: no-repeat; background-size: contain; display: block; width:32px; height:32px; margin:0 auto 5px; background-image: url(../img/ico_cat_goods.png); } .footer.shopsearch #cat_title_list .catttl.cat_foods a:before {background-image: url(../img/ico_cat_foods.png);} .footer.shopsearch #cat_title_list .catttl.cat_restaurant a:before {background-image: url(../img/ico_cat_res.png);} .footer.shopsearch #cat_title_list .catttl.cat_fashion a:before {background-image: url(../img/ico_cat_fas.png);} .footer.shopsearch #cat_title_list .catttl.cat_goods a:before {background-image: url(../img/ico_cat_goods.png);} .footer.shopsearch #cat_title_list .catttl.cat_service a:before {background-image: url(../img/ico_cat_ser.png);}*/ .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-main-dark); vertical-align: middle; position: absolute; top: 35%; right: 10px; } .view .table01 { border-collapse: collapse; width: 100%; border-top: 1px solid var(--color-base-line-dark); } .view .table01 tr { border-bottom: 1px solid var(--color-base-line-dark); } /* .view .table01 tr:last-of-type { border-bottom: none; }*/ .view .table01 th { text-align: center; font-weight: bold; background: var(--color-base-bg-light); width: 24%; } .view .table01 th, .view .table01 td { padding: 20px 15px; } .sidemenu { border: 1px solid var(--color-base-line-dark); padding: 20px 20px 4px; border-radius: var(--box-radius-small); } .sidemenu dt { font-family: var(--fontfamily-english); font-weight: 700; font-size: 20px; text-align: center; padding: 0 0 10px; border-bottom: 1px solid var(--color-base-line-dark); } .sidemenu dd > a { display: block; padding: 16px 10px; font-weight: bold; position: relative; line-height: 1.6em; } .sidemenu dd > a:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; color: var(--color-base-main-dark); font-size: 24px; vertical-align: middle; position: absolute; right: 0; top: calc(50% - 12px); } .sidemenu dd ul { font-size: 90%; } .sidemenu dd ul li a { padding: 10px; line-height: 1.5em; display: block; background: var(--color-base-main-light); border-top: 2px solid #fff; } .sidemenu dd:last-child ul li:last-child { margin-bottom: 10px; } .sidemenu span.num { font-family: var(--fontfamily-english); letter-spacing: 0.1em; } #sub #sub-navi01 dl dd dl dt { background: var(--color-base-bg-light); color: var(--color-base-accent-dark); border: none; border-radius: 0px; margin: 6px 0; } #sub #sub-navi01 dl dd dl dt.catttl { position: relative; cursor: pointer; } #sub #sub-navi01 dl dd dl dt.catttl .fa { position: absolute; right: 10px; top: 26%; } #sub #sub-navi01 dl dd dl dt.catttl.up .fa { transform: rotate(180deg); } #sub #sub-navi01 dl dd dl dd.shoplist { display: none; margin: 0 5px; } #sub #sub-navi01 dl dd dl dd.shoplist ul li { border-bottom: 1px solid var(--color-base-line-dark); } #sub #sub-navi01 dl dd dl dd.shoplist ul li a { padding: 8px 12px 8px 6px; line-height: 18px; display: block; box-sizing: border-box; position: relative; } #sub #sub-navi01 dl dd dl dd.shoplist ul li:after { content: ""; display: block; position: absolute; top: 38%; width: 0; height: 0; border: 5px solid transparent; left: 98%; border-left: 6px solid var(--color-base-accent-dark); } #sub #sub-navi01.sub_lsit { margin: 0 0 32px; } #sub #sub-navi01.sub_lsit dl dt a { position: relative; padding: 10px; background: var(--color-base-bg-light); border-radius: 0px; display: block; text-decoration: none; text-align: center; color: var(--color-base-accent-dark); } #sub #sub-navi01.sub_lsit dl dt a:before { content: ""; display: inline-block; border: 5px solid transparent; border-left-color: var(--color-base-accent-dark); left: 90%; position: absolute; top: 15px; } #sub #sub-navi01.sub_lsit dl dd dl dt { padding: 0; } #sub #sub-navi01.sub_lsit dl dd.box dl dd { padding: 0; } #sub #sub-navi01.sub_lsit dl dd.box dl dd a { text-decoration: none; padding: 10px 5px; display: block; } #sub #sub-navi01.sub_lsit dl dd.box dt, #sub #sub-navi01.sub_lsit dl dd.box dd, #sub #sub-navi01.sub_lsit dl dd.box li { font-size: small; } #sub #sub-navi01.sub_lsit dl dd.box a { line-height: 1.5; } #sub #sub-navi01 dl dl dt:hover a, #sub #sub-navi01.sub_lsit dl dl dt:hover a { background: var(--color-base-accent-dark); color: #fff; } #sub #sub-navi01 dl dl dt:hover a:before, #sub #sub-navi01.sub_lsit dl dl dt:hover a:before { border-left-color: #fff; } #sub #sub-navi01 dl dl li, #sub #sub-navi01.sub_lsit dl dd.box dl dd { border-bottom: 1px solid var(--color-base-line-dark); font-size: 14px; } #sub #sub-navi01 dl dd.box dl dd a:hover { background: var(--color-base-bg-light); } #sub .sc_facility dl { margin: 24px 0 12px; background: var(--color-base-bg-light); box-sizing: border-box; padding: 12px; border-radius: var(--box-radius-small); } #sub .sc_facility #sc_map { height: 190px; width: 100%; margin: 10px 0 4px; background: var(--color-base-bg-light); border: 4px solid #fff; box-sizing: border-box; } #sub .sc_facility #sc_map .sc_point { color: #0099ff; font-weight: bold; } #sub .sc_facility #sc_map iframe { width: 100%; height: 100%; border: 0; } #sub .sc_facility dt { margin: 4px 0 0; text-align: center; font-weight: bold; } #sub .sc_facility dt .fas { margin: 0 4px 0 -6px; font-size: 18px; } #sub .sc_facility dd.location p, #sub .sc_facility dd.parking ul li { text-align: center; padding: 8px 0; line-height: 16px; } #sub .sc_facility dd.parking ul li { margin-bottom: 1px; } #sub .sc_facility dd p a { display: block; } #sub .sc_facility dd a.gmap_link { text-align: center; font-size: 12px; display: block; padding: 0; text-decoration: underline; } #sub .sc_facility dd a.access_link { display: block; font-size: 14px; text-align: center; text-decoration: none; background: #fff; padding: 12px 0; margin: 6px 0; line-height: 1.4em; font-weight: bold; border-radius: var(--box-radius-small); position: relative; } #sub .sc_facility dd a.access_link:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; color: var(--color-base-main-dark); font-size: 24px; vertical-align: middle; position: absolute; right: 8px; } #sub #sub-navi02 { margin-bottom: 16px; } #sub #sub-navi02 ul { border: 1px solid #aaa; border-radius: 0px; overflow: hidden; } #sub #sub-navi02 ul li { border-bottom: 1px solid #aaa; } #sub #sub-navi02 ul li:last-child { border: none; } #sub #sub-navi02 ul li a { display: block; text-align: center; padding: 10px 0; position: relative; } #sub #sub-navi02 ul li a:after { content: ""; display: block; position: absolute; top: 38%; width: 0; height: 0; border: 5px solid transparent; left: 92%; border-left: 6px solid var(--color-base-accent-dark); } #sub #sub-navi02 ul li.cal .fa { color: var(--color-base-accent-dark); font-size: 1.2em; margin-right: 0.4em; } #sub .bnr-sns { margin-bottom: 16px; } #sub .bnr-sns li a { display: block; padding: 10px; text-align: center; color: #fff; font-size: 2.2em; position: relative; } #sub .bnr-sns li a:after { content: ""; display: block; position: absolute; top: 38%; width: 0; height: 0; border: 5px solid transparent; left: 92%; border-left: 6px solid #fff; } #sub .bnr-sns li a:hover { opacity: 0.9; } #sub .bnr-sns li a span { display: none; } #sub .bnr-sns li.bnr_fb a { background: #5890ff; } #sub .bnr-sns li.bnr_tw a { background: #00acee; } #sub .bnr-sns li.bnr_inst a { background: #E54060; } #sub .bnr-sns li.bnr_line a { background: #06C755; } #sub #banner_mini ul { border: 1px solid #aaa; padding: 16px; border-radius: 0px; overflow: hidden; } #sub #banner_mini ul li { margin: 0 0 8px; } #sub #banner_mini ul li:last-child { margin: 0; } .sidemenu .side_shoplist dt { font-size: 14px; cursor: pointer; padding: 7px 0; } .sidemenu .side_shoplist dt:after { font-family: var(--fontfamily-icon); content: "\e147"; display: inline-block; padding-left: 5px; } .sidemenu .side_shoplist dt.up:after { font-family: var(--fontfamily-icon); content: "\e5c9"; } .sidemenu .side_shoplist dd ul li a::before { font-family: var(--fontfamily-icon); content: "\e5e1"; margin: 0 0 0 4px; color: var(--color-base-accent-dark); vertical-align: middle; } #h4_shopsearch_tag { padding: 30px 0 20px; border-top: 4px solid var(--color-base-line-light); } #h4_shopsearch_tag a{ color: var(--color-base-main-dark); } #h4_shopsearch_tag:before { content: "#"; margin: 0 3px 0 0; font-family: var(--fontfamily-english); } .tag_list { padding: 0 20px 30px; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; } .tag_list_name { margin: 0 4px 8px; } .tag_list_name a { background: var(--color-base-main-midlight); display: block; font-size: 14px; border:1px solid #ccc; border-radius:var(--box-radius-small); padding:8px 14px; box-sizing: border-box; } .tag_list_name a:before { content: "#"; margin: 0 3px 0 0; color: var(--color-base-accent-dark); font-family: sans-serif; 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: 22px; padding: 20px 0 18px; } #h4_shopsearch_mdcat:before { font-family: var(--fontfamily-icon); content: "\e065"; margin: 0 10px 0 0; vertical-align: middle; } .mdlistiew { padding: 0 20px 20px; text-align: center; } .mdlistiew .mdcat { display: inline-block; margin: 4px; padding: 0; } .mdlistiew .mdcat a { display: block; padding: 8px 10px; font-weight: bold; line-height: 1.0em; border-radius: 0px; border: 4px solid var(--color-base-line-light); background: #fff; } .item .social { margin: 0 auto; box-sizing: border-box; padding: 20px 0; text-align: center; } .item .social:before { font-family: var(--fontfamily-english); font-size: 18px; font-weight: bold; color: #000; content: "SHARE ON!"; margin-bottom: 12px; display: block; } .item .social a { display: inline-block; overflow: hidden; width: 40px; height: 40px; margin: 0 10px; text-indent: -999999em; } .item .social .twitter { background: url(../img/ico_x.png) no-repeat; background-size: cover; } .item .social .fb { background: url(../img/ico_fb.png) no-repeat; background-size: cover; } .item .social .line { background: url(../img/ico_line.png) no-repeat; background-size: cover; } .goods_like_btn { background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; } .goods_like_btn p { display: inline-block; background: var(--color-base-accent-light); border-radius: var(--box-radius-xlarge); padding: 10px; text-align: center; width: 50px; height: 50px; font-family: var(--fontfamily-english); } .goods_like_btn p i, .goods_like_btn p span { display: block; font-size: 1.5em; } .goods_like_btn p span { font-weight: bold; } .goods_like_btn p i { display: block; font-size: 1.5em; color: var(--color-base-accent-dark); } .goods_like_btn .fa-heart { color: var(--color-base-accent-dark); } .goods_like_btn.mini { position: absolute; bottom: 20px; left: 240px; position: static; margin: 5px 0; display: block; position: absolute; bottom: 16px; } .goods_like_btn.mini p { display: inline-block; padding:10px 24px; text-align: center; width: auto; height: auto; font-size: 0.8em; line-height: 1em; color: var(--color-base-text-dark); } .goods_like_btn.mini p i { display: inline-block; font-size: 1.4em; color: var(--color-base-accent-dark); vertical-align: middle; } .goods_like_btn.mini p span { display: inline-block; font-size: 1.2em; line-height: 1.2em; font-weight:normal; font-family: var(--fontfamily-english); padding: 0 0 0 0.2em; /* color: #000; border: 1px solid var(--color-base-accent-dark); border-radius: 2px; padding: 0px 10px 2px; position: relative; font-family: var(--fontfamily-english); */ vertical-align: middle; } /* .goods_like_btn.mini p span:before { content: ""; position: absolute; width: 4px; height: 4px; background: #fff; border-left: 1px solid var(--color-base-accent-dark); border-bottom: 1px solid var(--color-base-accent-dark); -webkit-transform: rotate(45deg); transform: rotate(45deg); left: -3px; top: 6px; } */ /*いいねボタンのハート指定(googlegont)*/ .goods_like_btn.mini p i.off:before{ font-family: var(--fontfamily-icon); content: "\e87d"; color: var(--color-goodslike); vertical-align: middle; display: inline-block; font-style: normal; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48 } .goods_like_btn.mini p i.on:before{ font-family: var(--fontfamily-icon); content: "\e87d"; color: var(--color-goodslike); vertical-align: middle; display: inline-block; font-style: normal; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48 } /* --------------------------------------------- ショップページ（kgm共通）bodyは記述しない --------------------------------------------- */ /*ショップページ＆各item_****.jspのヘッダー部分共通*/ /*--shop_header*--*/ .shop_header { background: var(--color-base-sub1-light); } .shop_header .inner { background: #fff; margin: 0 auto 0; } .shop_header #shop_title { position: relative; padding: 18px 30px 18px 40px; box-sizing: border-box; /* display: flex; justify-content: space-between; */ } .shop_header .inner #shop_title .bg_shop_image { position: absolute; right: 0; top: 0; display: block; width: 38%; height: 100%; background-position: center; background-size: cover; z-index: 1; } .shop_header .inner #shop_title .bg_shop_image:before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 40%; height: 100%; background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 16%, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#00ffffff", GradientType=1); } .pc .shop_header #shop_title{ min-height: 200px; } .shop_header #shop_title .shop_name { width: 60%; z-index: 10; position: relative; } .shop_header #shop_title .top_logo { margin: 20px 0 0; /* display: flex; align-items: center; */ } .shop_header #shop_title .category_detail{ display: inline-block; padding: 5px 0; font-weight: bold; font-size: 12px; line-height: 1.2em; border-bottom: 4px solid var(--color-base-line-light); } .shop_header #shop_title h2 { font-size: 24px; font-weight: bold; line-height: 30px; /*共通スタイルを無効か*/ padding: 0; border: none; margin: 15px 0 0; text-align: left; background: none; } .shop_header #shop_title .top_logo img { max-height: 60px; } .shop_header .shopmenu { position: absolute; right: 30px; bottom: 10px; z-index: 10; } .shop_header .shopmenu li { display: inline-block; margin: 0 2px; } .shop_header .shopmenu li a { background:rgba(51, 51, 51, .7); display: block; box-sizing: border-box; width: 80px; height: 100px; color: #fff; text-align: center; padding: 24px 0 0; line-height: 140%; border-radius: var(--box-radius-small); } .shop_header .shopmenu li a:hover { text-decoration: none; } .shop_header .shopmenu li a:after { font-family: var(--fontfamily-icon); content: "\e5cf"; vertical-align: middle; font-size: 24px; } .shop_header .shopmenu li a span { display: block; } .shop_header #shop_status { min-height: 120px; } .shop_header #shop_status { border-top:1px solid var(--color-base-line-dark); border-bottom: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); } .shop_header #shop_status .eigyouhour p, .shop_header #shop_status .tel_floor p{ padding:18px 30px; } .shop_header #shop_status .tel_floor { display: flex; } .shop_header #shop_status .tel_floor .tel{ width:30%; } .pc .shop_header #shop_status .eigyouhour p.hour { padding-right: 300px; } .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: bottom; width: 40px; display: inline-block; text-align: center; } .shop_header #shop_status .eigyouhour p.hour:before{ content: "\e8b5"; padding-right: 5px; } .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); } /*個別ニュース、クーポン、リクルート　ページのヘッダーを調整*/ body.item_recruit .shop_header #shop_title, body.item_coupon .shop_header #shop_title, body.item_news .shop_header #shop_title { min-height: 180px; border-bottom: 1px solid 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; } /*--shop_header*--*/ #shoppage { /* padding:0 16px;*/ } /*body.bf1 .*/ .view #shoppage #shop_info { padding: 0 0 40px; } #shoppage #shop_info .intro { padding: 20px 0; overflow: hidden; } #shoppage #shop_info .desc { font-size: 1.1em; line-height: 1.5em; margin: 0 0 5px 5px; } #shoppage #shop_info .desc h4 { font-weight: bold; margin: 10px 0 15px; font-size: 18px; } #shoppage #shop_info .desc p { white-space:pre-wrap; line-height: 1.8em; font-size: 16px; } #shoppage #shop_info .image { float: right; width: 40%; margin: 0 0 0 36px; box-sizing: border-box; border: 4px solid var(--color-base-line-light); border-radius: var(--box-radius-small); } #shoppage #shop_info .image img { border-radius: 0px; width: 100%; } #shoppage #shop_info .pickup{ margin:0 0 30px; padding: 10px 20px; background: var(--color-base-bg-light); border-radius: var(--box-radius-small); } #shoppage #shop_info .pickup div { padding: 15px 0; border-bottom: 4px solid #fff; overflow: hidden; display: flex; align-items: flex-start; } #shoppage #shop_info .pickup div:last-of-type{ border-bottom: none; } #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 0 30px; text-align: center; } #shoppage #shop_info .shopBooking { text-align: center; margin: 18px 0; } #shoppage #shop_info .shopBooking:first-of-type { margin-top: 30px; } #shoppage #shop_info .shopBooking:last-of-type { margin-bottom: 36px; } #shoppage #shop_info .shopBooking__btn { display: inline-block; color: var(--color-base-accent-dark); width: calc(100% / 2 - 50px); border-radius: var(--box-radius-small); padding: 15px 10px 18px; position: relative; margin: 0 5px; border: 2px solid var(--color-base-accent-dark); line-height: 1.0em; } #shoppage #shop_info .shopBooking__btn:after{ font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; position: absolute; right: 10px; top: calc(50% - 8px); font-size: 24px; font-weight: bold; } #shoppage #shop_info .shopBooking__btn i { margin: 0 8px; font-size: 20px; vertical-align: text-bottom; } #shoppage #shop_info .shopBooking__btn i[class*='calendar'] { color: var(--color-base-line-dark); } #shoppage #shop_info .shopBooking__btn:hover i[class*='calendar'] { color: #fff; } /*WEB予約ボタン｜サイト名出す*/ #shoppage #shop_info .shopBooking__btn[href*="gnavi"] .brandsArea::after {content: "(ぐるなび)";} #shoppage #shop_info .shopBooking__btn[href*="tabelog"] .brandsArea::after {content: "(食べログ)";} #shoppage #shop_info .shopBooking__btn[href*="loco"] .brandsArea::after {content: "(Yahoo!ロコ)";} #shoppage #shop_info .shopBooking__btn[href*="ikyu"] .brandsArea::after {content: "(一休.comレストラン)";} #shoppage #shop_info .shopBooking__btn[href*="epark"] .brandsArea::after {content: "(EPARK)";} #shoppage #shop_info .shopBooking__btn[href*="hotpepper"] .brandsArea::after {content: "(ホットペッパー)";} #shoppage #shop_info .shopBooking__btn[href*="favy"] .brandsArea::after {content: "(favy)";} #shoppage #shop_info .shopBooking__btn[href*="toreta"] .brandsArea::after {content: "(トレタ)";} #shoppage #shop_info .shopBooking__btn[href*="ozmall"] .brandsArea::after {content: "(オズモール)";} #shoppage #shop_info .shopBooking__btn[href*="retty"] .brandsArea::after {content: "(Retty)";} #shoppage #shop_info .shopBooking__btn[href*="luxa"] .brandsArea::after {content: "(LUXA)";} #shoppage #shop_info .shopBooking__btn[href*="hitorsara"] .brandsArea::after {content: "(ヒトサラ)"; } #shoppage #shop_info .data { clear: both; padding: 0 0 20px 0; } #shoppage #shop_info table.table01 th, #shoppage #shop_info table.table01 td { padding: 20px 30px; } #shoppage #shop_info .data table.table01 tr.shop-generic1 td, #shoppage #shop_info .data table.table01 tr.shop-generic5 td, #shoppage #shop_info .data table.table01 tr.shop-gourmet2 td{ display: flex; flex-wrap: wrap; gap: 10px; } #shoppage #shop_info .data table.table01 td em { display: inline-block; box-sizing: border-box; line-height: 1.2em; font-size: 12px; font-weight: bold; padding: 8px 10px; text-align: center; width: 90px; vertical-align: middle; border-radius: var(--box-radius-small); background: var(--color-base-sub1-light); } #shoppage #shop_info .data table.table01 tr.shop-generic5 td em{ background: var(--color-base-sub2-light); } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 td em{ background: var(--color-base-accent-light); } #shoppage #shop_info .data table.table01 td em.payment_taxfree{ background: var(--color-base-accent-light); color: #f00; } #shoppage #shop_info .data table.table01 td p.payment_other, #shoppage #shop_info .data table.table01 td p.service_other, #shoppage #shop_info .data table.table01 td p.kids_service{ width: 100%; } #shoppage #shop_info .data table.table01 td p.payment_other span, #shoppage #shop_info .data table.table01 td p.service_other span, #shoppage #shop_info .data table.table01 td p.kids_service span{ font-weight: bold; } #shoppage #shop_info .data table.table01 td p.payment_other span:before, #shoppage #shop_info .data table.table01 td p.service_other span:before, #shoppage #shop_info .data table.table01 td p.kids_service span:before{ font-family: var(--fontfamily-icon); font-variation-settings: var(--iconfont-FILL1-set); content: "\ef4a"; font-weight: normal; margin: 0 4px 0 0; line-height: 1.0em; color: var(--color-base-sub1-dark); font-size: 0.8em; } .pc #shoppage #shop_info .data table.table01 td p.payment_other span:after, .pc #shoppage #shop_info .data table.table01 td p.service_other span:after, .pc #shoppage #shop_info .data table.table01 td p.kids_service span:after{ font-family: var(--fontfamily-icon); content: "\f755"; line-height: 1.0em; font-size: 1.2em; vertical-align: middle; } #shoppage #shop_info .data table.table01 td em[class*="payment"]:before, #shoppage #shop_info .data table.table01 td em[class*="kids"]:before, #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em:before{ font-family: var(--fontfamily-icon); font-size: 28px; font-weight: normal; margin: 0 0 3px 0; display: block; line-height: 1.0em; color: var(--color-base-sub1-dark); } /* #shoppage #shop_info .data table.table01 td em.payment_taxfree:before{ color: #f00; } */ #shoppage #shop_info .data table.table01 td em[class*="kids"]:before, #shoppage #shop_info .data table.table01 td p.kids_service span:before{ color: var(--color-base-sub2-dark); } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 td em:before, #shoppage #shop_info .data table.table01 td p.service_other span:before{ color: var(--color-base-accent-dark); } #shoppage #shop_info .data table.table01 td em.payment1:before{content: "\e870";} #shoppage #shop_info .data table.table01 td em.payment2:before{content: "\e325";font-variation-settings:var(--iconfont-FILL1-set);} #shoppage #shop_info .data table.table01 td em.payment3:before{content: "\e570";font-variation-settings:var(--iconfont-FILL1-set);} #shoppage #shop_info .data table.table01 td em.payment4:before{content: "\e00a";} #shoppage #shop_info .data table.table01 td em.payment_taxfree:before{content: "\eafb";color: #f00;} #shoppage #shop_info .data table.table01 tr em.kids1:before{content: "\ef7b";font-variation-settings:var(--iconfont-FILL1-set);} #shoppage #shop_info .data table.table01 tr em.kids2:before{content: "\f06c";} #shoppage #shop_info .data table.table01 tr em.kids3:before{content: "\f527";} #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service1:before{content: "\eb41";} #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service2:before{content: "\f1cc";font-variation-settings:var(--iconfont-FILL1-set);} #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service3:before{content: "\f1f3";font-variation-settings:var(--iconfont-FILL1-set);} #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service4:before{content: "\e9cd";font-variation-settings:var(--iconfont-FILL1-set);} #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service5:before{content: "\e325";font-variation-settings:var(--iconfont-FILL1-set);} #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service6:before{content: "\e518";font-variation-settings:var(--iconfont-FILL1-set);} #shoppage #shop_info .data table.table01 td span.attention { display: block; font-size: 10px; width: 100%; line-height: 1.0em; } /*white-space: preのオプション*/ .shop-eigyouhour td p, .shop-tokuten td p { white-space: pre-wrap; } #shoppage #shop_info table.table01 th { vertical-align: middle; font-weight: bold; width: 24%; } #shoppage #shop_info table.table01 tr.shop-map td { font-weight:bold; font-size:1.1em; } #shoppage #shop_info table.table01 tr.shop-map td a { font-family: var(--fontfamily-english); display: inline-block; background: var(--color-base-sub1-dark); border-radius: var(--box-radius-small); margin-left: 30px; padding: 12px 40px 8px 30px; text-decoration: none; text-align: center; vertical-align: middle; text-transform: uppercase; position: relative; line-height: 1em; color: #fff; } #shoppage #shop_info table.table01 tr.shop-map td a::after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; position: absolute; right: 10px; top: calc(50% - 8px); font-size: 24px; } #shoppage #shop_info table.table01 tr.shop-map td a:hover::before { display: inline-block; } #shoppage #shop_info table.table01 tr.shop-dealitem td { /* font-size: 0.8em;*/ } #shoppage #shop_info table.table01 tr.shop-shopurl td a { border-bottom: 1px solid var(--color-base-text-dark); word-break: break-all; } #shoppage #shop_info table.table01 tr.shop-shopurl td 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% / 3 - 10px); display: inline-block; box-sizing: border-box; margin-right: 10px; } #shoppage #shop_info table.table01 tr.shop-otherurl td p:last-of-type{ margin-right: 0; } #shoppage #shop_info table.table01 tr.shop-otherurl td p a { display: block; padding: 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 i { font-size: 20px; margin: 0 10px 0 4px; font-weight: normal; vertical-align: top; } #shoppage #shop_info table.table01 tr.shop-otherurl td p a:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; color: #fff; position: absolute; right: 10px; top: calc(50% - 11px); font-size: 24px; } #shoppage #shop_info table.table01 tr.shop-otherurl td p.shop-url a { background: var(--color-base-text-dark); color: #fff; } #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a:before{content: "公式SNS";} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="facebook"]{background: #5890ff; color: #fff;} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="facebook"]:before{content: "Facebook";} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="instagram"]{background-image: linear-gradient(-135deg, #1400c8, #b900b4, #f50000); color: #fff;} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="instagram"]:before{content: "instagram";} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="twitter"], #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="https://x.com/"]{background: #000; color: #fff;} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="twitter"]:before, #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="https://x.com/"]:before{content: "X";} #shoppage #shop_info table.table01 tr.shop-otherurl td p[class*="shop-other_url"] a[href*="youtube"]{background: #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";} #shoppage #shop_info .data .shop-generic2 {} #shoppage #shop_info .data table.table01 .shop-generic2 td em{ display: block; } #shoppage #shop_info .data table.table01 tr.shop-generic1 td{ display: block; } #shoppage #shop_info .data .shop-generic1 .payments-ttl{ display: inline-block; min-width: 130px; margin: 15px 0 5px; padding: 5px 0; background: #cce7d8; border-radius: 6px; color: var(--color-base-sub1-dark); font-size: 12px; font-weight: 700; text-align: center; } #shoppage #shop_info .data .shop-generic1 .payments-ttl:first-child{ margin-top: 0; } #shoppage #shop_info .data .shop-generic1 .payment1, #shoppage #shop_info .data .shop-generic1 .payment1-2, #shoppage #shop_info .data .shop-generic1 .payment1-3{ font-size: 10px; } #shoppage #shop_info .data .shop-generic1 .payment1 img{ display: block; width: 100%; max-width: 370px; } #shoppage #shop_info .data .shop-generic1 .payment1-2 img{ display: block; width: 100%; max-width: 540px; } #shoppage #shop_info .data .shop-generic1 .payment1-3 img{ display: block; width: 100%; max-width: 640px; } .pc #shoppage #shop_info .data .shop-generic1 .payment1 img.sp_view, .pc #shoppage #shop_info .data .shop-generic1 .payment1-2 img.sp_view, .pc #shoppage #shop_info .data .shop-generic1 .payment1-3 img.sp_view{ display: none; } #shoppage #shop_info .data .shop-generic1 .attention{ font-size: 12px; } #shoppage #shop_info .data .shop-generic1 .payment1-4, #shoppage #shop_info .data .shop-generic1 .payment1-5, #shoppage #shop_info .data .shop-generic1 .payment2{ font-weight: bold; } #shoppage #shop_info .data .shop-generic2 td .payment1, #shoppage #shop_info .data .shop-generic2 td .payment4, #shoppage #shop_info .data .shop-generic2 td .payment5, #shoppage #shop_info .data .shop-generic2 td .payment6{color:#f00;} #shoppage #shop_info .data .shop-generic2 td .payment1:before, #shoppage #shop_info .data .shop-generic2 td .payment4:before, #shoppage #shop_info .data .shop-generic2 td .payment5:before, #shoppage #shop_info .data .shop-generic2 td .payment6:before{ font-family: var(--fontfamily-icon); font-weight: normal; content: "\e14b"; font-size: 18px; vertical-align: middle; margin: 0 3px 0 0; } #shoppage #shop_info .data .shop-generic2 td .payment2:before, #shoppage #shop_info .data .shop-generic2 td .payment3:before{ content:""; background-size: cover; display: inline-block; width:40px; height:40px; margin-right:5px; vertical-align: middle; } /*shopinfo ここまで*/ .cat_items { margin: 16px 0 36px; } .cat_items h3 { border: 1px solid #ccc; padding: 8px 16px; font-weight: bold; font-size: 1.1em; } /* cat(n)_viewの見出し・ショップ情報の見出し */ #cat1_view h3, #cat3_view h3, .view #shop_info h3 { background: none; border: none; margin: 0 0 20px; border-bottom: 4px solid var(--color-base-line-light); } #contents-main article.main.item h3{ } #cat1_view h3 span, #cat3_view h3 span, #contents-main article.main.item h3 span, .view #shop_info h3 span{ font-family: var(--fontfamily-english); font-size: 26px; font-weight: normal; display: block; width: var(--inner-Width); max-width: var(--inner-Max-Width); min-width: var(--inner-Min-Width); margin: auto; border-bottom: none; overflow: hidden; position: relative; text-align: left; line-height: 1; } #cat1_view h3 span em, #cat3_view h3 span em, #contents-main article.main.item h3 span em, .view #shop_info h3 span em { font-size: 14px; display: inline-block; margin-left: 10px; font-weight: bold; line-height: 1.4em; vertical-align: bottom; color: var(--color-base-line-dark); font-family: var(--fontfamily-base); } /* #contents-main article.main.item h3 { display: block; padding: 10px 0; } */ /* #cat1_view h3::before, #cat3_view h3::before, article.main.item .gcat.cat1::before, article.main.item .gcat.cat2::before, article.main.item .gcat.cat3::before, .view #shop_info h3::before { display: block; font-family: var(--fontfamily-english); font-size: 22px; font-weight: bold; } */ /* cat(n)_viewの見出し・ショップ情報の見出し - 文字*/ /* #cat1_view h3::before { content: "Shopnews!"; } #cat3_view h3::before { content: "Work together"; } article.main.item .gcat.cat1::before { content: "Shopnews!"; } article.main.item .gcat.cat2::before { content: "Coupon"; } .view #shop_info h3::before { content: "Shop detail"; } article.main.item .gcat.cat3::before { content: "Work together"; } */ /*********************/ /*店長ボイス(cat5 view)*/ #cat5_view { display: flex; align-items: center; width: var(--inner-Min-Width); margin: 0 auto 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: 10px; box-sizing: border-box; position: relative; height: auto; } .cat_items article.item .image, .bf5 article.item .image { height: 240px; width: 210px; text-align: center; overflow: hidden; position: relative; box-sizing: border-box; border: 4px solid var(--color-base-line-light); border-radius: var(--box-radius-small); } .cat_items article.item .image { float: left; margin: 0 16px 0 0; } .cat_items article.item.cat3 .image, .bf5 article.item .image { float: right; margin: 0 0 0 0; } .cat_items article.item .ico_new { top: 2px; right: auto; left: 2px; transform: rotate(-25deg); } .cat_items article.item .image a { color: var(--color-base-accent-dark); } .cat_items article.item .image img, .bf5 article.item .image img { height: 100%; box-sizing: border-box; max-width: none; } .cat_items article.item .item_image_noimg { background-size: 70%; position: relative; } .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; margin-top:5px; } .cat_items article.item .desc h4 a { font-weight: bold; font-size: 16px; } .cat_items article.item.cat2 .desc h4 a { display: block; } .cat_items article.item .desc .price { font-weight: bold; padding: 4px 0; font-size: 14px; line-height: 150%; word-break: break-all; } .cat_items article.item .desc .date, .cat_items article.item .desc .price_date, article.shopnewsitem .date, article.recruititem .date { font-size: 14px; font-family: var(--fontfamily-english); line-height: 1em; margin: 0.5em 0; color: #777; } /* @media screen and (max-width: 767px) { .cat_items article.item .desc .date, .cat_items article.item .desc .price_date, article.shopnewsitem .date, article.recruititem .date { font-size: 11px; } } */ /*sale時*/ #cat1_view article.item.sale .desc h4 a, #cat1_view article.item.sale .price { color: #f00; } /*****もっと見るボタン[汎用]*****/ .morelink { top: 0; left: 0; width: 100%; height: 100%; position: absolute; } .morelink span { display: inline-block; font-family: var(--fontfamily-english); font-size: 14px; font-weight: 700; padding: 0; margin: 0; position: absolute; top: calc(50% - 12px); right: 0; } .morelink span em { display: none; } .morelink span:after { font-family: var(--fontfamily-icon); content: "\e5cc"; color: var(--color-base-main-dark); font-size: 24px; vertical-align: middle; } /******もっと見るボタン[汎用]以上*****/ /*.cat3_view article.item .morelink, #cat3_view article.item .morelink { position: static; }*/ /* クーポン表示関連：①もっと見るボタン　②クーポン強調表示(フキダシ) */ #cat1_view .item.cat2 .desc h4::before { /*フキダシ中身*/ content: "クーポン"; background: var(--color-base-accent-dark); color: #fff; display: inline-block; padding: 6px; font-weight: bold; line-height: 1em; letter-spacing: 1px; border-radius: var(--box-radius-small); font-size: 0.8em; margin: 0 0 6px 0; } /*画像がないときはフキダシを消す*/ /*#cat1_view .item.cat2.noimg .desc::before, #cat1_view .item.cat2.noimg .desc::after{ display: none; }*/ /* 求人関連 ※#cat3_view はショップページ、個別ページ下部の一覧 ※.cat3_view　は求人一覧用の指定 */ .cat3_view article.item, #cat3_view article.item { position: relative; float: none; overflow: hidden; padding: 20px 30px 20px 20px; margin: 0 0 0; box-sizing: border-box; border-bottom: 4px solid var(--color-base-line-light); } .cat3_view article.item:last-of-type, #cat3_view article.item:last-of-type { border-bottom: none; } .cat3_view article.item .date, #cat3_view article.item .date { font-size: 12px; font-family: var(--fontfamily-english); line-height: 1em; margin: 0.5em 0; color: #777; } @media screen and (max-width: 767px) { .cat3_view article.item .date, #cat3_view article.item .date { font-size: 12px; } } .cat3_view article.item h4, #cat3_view article.item h4 { margin: 0 0 20px; padding: 16px 20px; width: -webkit-calc(100% - 220px); width: calc(100% - 220px); box-sizing: border-box; position: relative; font-weight: bold; font-size: 1.1em; line-height: 1.3em; background: #fff; border: 4px solid var(--color-base-line-light); border-radius: var(--box-radius-small); } .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 #eee; z-index: 1; } .cat3_view article.item table, #cat3_view article.item table { width: -webkit-calc(100% - 220px); width: calc(100% - 220px); margin-bottom: 10px; } .cat3_view article.item th, #cat3_view article.item th { width: 30%; } .sale.icon, .newgoods_conf #goods_title.formitem .sale, .cat_items article.item .desc .sale { background: #f00; color: #fff; display: inline-block; padding: 6px 8px; font-weight: bold; line-height: 1em; letter-spacing: 1px; border-radius:var(--box-radius-small); font-size: 0.8em; margin: 0 6px 2px 0; font-family: var(--fontfamily-english); } .cat_items article.item .goodscomment { display: none; /* overflow: hidden; white-space: nowrap; text-overflow: ellipsis; */ } .cat_items article.item .read_more { margin-top:10px; } .cat_items article.item .read_more a { color: #999; } .cat_items article.item .tag_list { text-align: left; padding: 0; border: none; } .cat_items article.item .tag_list li { display: inline; margin-right: 0.5em; white-space: normal; } .cat_items article.item .tag_list li a { text-decoration: underline; } /* ショップページ　クーポン表示 */ body.view.index.bf3 #coupon article.item .cat_name, body.popup.coupon article.item .cat_name, #shoppage article.item.cat2 .cat_name { display: none; } .cat_items article.item.cat2 .desc h4 { padding: 0px 0 10px; margin: 0; overflow: hidden; word-break: break-all; } .cat_items article.item .desc .fromto { padding: 8px 0; } .cat_items article.item .desc .fromto dt { font-weight: bold; padding: 1px 5px; background: var(--color-base-bg-light); display: inline-block; margin-right: 5px; } .cat_items article.item .desc .fromto dd { display: inline-block; } body.view.index.bf3 #coupon article.item.noimg .desc .fromto dd, body.view.index.bf3 #coupon article.item.noimg .desc .coupon_bikou dd, body.popup.coupon article.item.noimg .desc .fromto dd, body.popup.coupon article.item.noimg .desc .coupon_bikou dd, #shoppage article.item.cat2.noimg .desc .fromto dd, #shoppage article.item.cat2.noimg .desc .coupon_bikou dd { width: auto; } body.view.index.bf3 #coupon article.item .print, body.popup.coupon article.item .print, #shoppage article.item.cat2 .print { position: absolute; bottom: 8px; left: 0; width: 100%; text-align: center; margin: 5px auto; } body.view.index.bf3 #coupon article.item .print a, body.popup.coupon article.item .print a, #shoppage article.item.cat2 .print a { width: 160px; display: inline-block; padding: 16px; color: #fff; background: var(--color-base-accent-dark); border-radius: 0px; position: relative; letter-spacing: 1px; } body.view.index.bf3 #coupon article.item .print a:after, body.popup.coupon article.item .print a:after, #shoppage article.item.cat2 .print a:after { content: ""; display: block; position: absolute; top: 38%; width: 0; height: 0; border: 4px solid transparent; left: 88%; border-left: 5px solid #FFF; } body.view.index.bf3 #coupon article.item .print a i, body.popup.coupon article.item .print a i, #shoppage article.item.cat2 .print a i { margin-right: 4px; } /* --------------------------------------------- item_****** --------------------------------------------- */ /*全体*/ .shopnewsitem.item, .other_news{ width: 900px; padding: 0 0; margin: 0 auto 40px; } .shopnewsitem.item::after { /*clearfix*/ width: 900px; padding: 0 20px; content: ""; clear: both; display: block; } .shopnewsitem.item .date { margin: 20px 80px 10px; } .shopnewsitem.item .imgarea { background: var(--color-base-bg-light); padding: 0 0; margin: 0 80px 20px; border-radius: var(--box-radius-small); } .shopnewsitem.item.noimg .imgarea { display: none; } /*アイテム一覧　メイン画像*/ .shopnewsitem .slick-list { margin: 0 0 10px; } .shopnewsitem .main_img { height: 500px; /* padding-bottom: 20px; */ } .shopnewsitem .main_img img { display: block; margin: 20px auto 0; top: 0; position: relative; max-height: 100%; } .shopnewsitem .main_img img { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } /*アイテム一覧　サムネイル画像*/ .shopnewsitem .thum_imgs { width: 600px; margin: 0 auto; } .shopnewsitem .thum_img { width: 120px; height: 120px; border: 4px solid transparent; border-radius: 0px; margin: 0 10px 20px; overflow: hidden; } .shopnewsitem .thum_img span { display: block; width: 120px; height: 120px; background-position: center; background-repeat: no-repeat; background-size: cover; margin: 0 auto; cursor: pointer; } .shopnewsitem .thumb-current { border: 4px solid var(--color-base-sub1-dark); } .shopnewsitem .slick-prev, .shopnewsitem .slick-next { cursor: pointer; } .shopnewsitem .slider.slider-nav.thum_imgs { display: flex; justify-content: center; } .shopnewsitem .slick-arrow { position: absolute; top: 560px; z-index: 1000; font-size: 30px; font-weight: bold; color: var(--color-base-sub1-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: #f00; } .shopnewsitem .desc .goodscomment { border-top: 4px solid var(--color-base-line-light); margin: 16px 0; padding: 16px 0; } .shopnewsitem .mdlistiew { margin: 10px 0; padding: 0; text-align: left; } .shopnewsitem .mdlistiew li { margin: 0 5px 5px 0; } .shopnewsitem .link { text-align: center; padding-bottom: 20px; } .shopnewsitem .link a { text-align: center; text-decoration: none; background: var(--color-base-sub1-dark); color: #ffffff; padding: 20px; border-radius: var(--box-radius-small); position: relative; font-weight: 700; font-size: 16px; min-width: 40%; display: inline-block; } .shopnewsitem .link a::after { font-family: var(--fontfamily-icon); content: "\e5e1"; margin: 0 0 0 4px; color: #fff; vertical-align: middle; position: absolute; right: 10px; } .shopnewsitem .tag_list { padding: 10px 0px; justify-content: left; border-bottom: none; clear: both; } .shopnewsitem .tag_list_name { margin: 0 5px 5px 0; } .shopnewsitem .tag_list .tag_list_name a { border-radius: var(--box-radius-small); padding: 5px 12px; display: block; } /*ソーシャルボタン、いいねボタン*/ .shopnewsitem .goods_like_btn { width: calc(60% - 90px); margin: 0 0 20px 80px; background: var(--color-base-accent-light); border-radius: var(--box-radius-small); 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; } .shopnewsitem .goods_like_btn p:before { content: "このニュースにいいね！する"; color: var(--color-goodslike); margin-right: 0.3em; font-size: 16px; font-family: var(--fontfamily-base)} .shopnewsitem .goods_like_btn p i, .shopnewsitem .goods_like_btn p span { display: inline-block; margin-right: 8px; font-size: 2.0em; vertical-align: middle; color: var(--color-goodslike); } /*いいねボタンのハート指定(googlegont)*/ .shopnewsitem .goods_like_btn p i.off:before{ font-family: var(--fontfamily-icon); content: "\e87d"; margin: 0 0 0 4px; color: var(--color-goodslike); vertical-align: middle; display: inline-block; font-style: normal; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48 } .shopnewsitem .goods_like_btn p i.on:before{ font-family: var(--fontfamily-icon); content: "\e87d"; margin: 0 0 0 4px; color: var(--color-goodslike); vertical-align: middle; display: inline-block; font-style: normal; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48 } .shopnewsitem .goods_like_btn p i { animation: like_anime 4s ease infinite; transform-origin: 50% 50%; } @keyframes like_anime { 0% { transform: translate(0, -3px); } 5.55556% { transform: translate(0, 3px); } 11.11111% { transform: translate(0, -3px); } 16.66667% { transform: translate(0, 3px); } 22.22222% { transform: translate(0, -3px); } 27.77778% { transform: translate(0, 3px); } 30.55556% { transform: translate(0, 0); } 100% { transform: translate(0, 0); } } .shopnewsitem .social { float: right; background: var(--color-base-bg-light); border-radius: var(--box-radius-small); margin: 0 80px 20px 0; width: calc(40% - 90px); height: 120px; } /*アイテム1記事の際のほかのアイテム一覧でいいねボタン非表示*/ body.item_news .goods_like_btn.mini p { /*display: none;*/ } /*セール*/ .shopnewsitem.cat1.sale .sale.icon { width: 100px; letter-spacing: 1.5px; line-height: 24px; height: 25px; font-size: 19px; padding: 0; text-align: center; } /*クーポン*/ .shopnewsitem.cat2 .desc { border: 4px solid var(--color-base-line-light); width: 740px; margin: 0 80px 40px; padding: 40px 40px 20px; box-sizing: border-box; position: relative; min-height: 300px; border-radius: var(--box-radius-small); } /*.shopnewsitem.cat2 .desc:before { content: "Coupon!"; position: absolute; top: -15px; right: calc(50% - 60px); background: $KEY_COLOR_2; width: 120px; border-radius: 100px; text-align: center; font-family: $FONT_FAMILY_EN; font-weight: bold; color: #fff; height: 25px; font-size: 18px; } */ .shopnewsitem.cat2 .desc h4 { color: var(--color-base-accent-dark); margin: 0; padding: 0 0 16px; border-bottom: 1px solid var(--color-base-line-dark); line-height: 1.4em; word-break: break-word; } .shopnewsitem.cat2 .desc dl { border-bottom: 1px solid var(--color-base-line-dark); padding: 15px 0; } .shopnewsitem.cat2 .desc dt { display: inline-block; background: var(--color-base-bg-light); width: 100px; margin: 0 10px 0 0; border-radius: 0; font-weight: bold; text-align: center; } .shopnewsitem.cat2 .desc dd { display: inline-block; width: 400px; vertical-align: middle; } .shopnewsitem.cat2 .desc .print a { width: 30%; background: var(--color-base-accent-dark); display: block; padding: 20px; box-sizing: border-box; line-height: 16px; font-size: 18px; color: #fff; text-align: center; margin: 16px auto; border-radius: var(--box-radius-small); } .shopnewsitem.cat2 .desc .print a:before { font-family: var(--fontfamily-icon); content: "\e8ad"; margin-right: 8px; font-size: 24px; vertical-align: middle; } .shopnewsitem.cat2 .mdlistiew, .shopnewsitem.cat2 .tag_list{ width: 600px; padding: 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, .other_jobs{ width: 900px; padding: 0 0; margin: 0 auto 40px; } .recruititem.item h4 { /* color: var(--color-base-main-dark);*/ margin: 10px auto 20px; padding: 20px; box-sizing: border-box; position: relative; font-weight: bold; font-size: 18px; line-height: 1.5em; border: 4px solid var(--color-base-line-light); border-radius: var(--box-radius-small); } .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 #eee; z-index: 1; } .recruititem.item .date { margin: 20px 80px 10px; } .recruititem.item .imgarea { background: var(--color-base-bg-light); padding: 20px 0; margin: 0 80px 20px; border-radius: 0px; } .recruititem.item .imgarea img { display: block; margin: 0 auto; max-height: 480px; max-width: 480px; } .recruititem.item .desc { width: 740px; 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: 20px 15px; line-height: 1.3em; } .other_jobs .cat_items h3 { display: none; } #contents-main .other_jobs article.item{ padding: 10px 30px 10px 0; } /* #contents-main .other_jobs h3 { border: none; font-weight: bold; font-size: 20px; padding: 20px 0 15px; border-bottom: 10px solid var(--color-base-main-light); background: none; } */ #contents-main .other_jobs .inner{ width: auto; max-width: initial; min-width: initial; padding: 0; } /*共通戻るボタン*/ .return_shop { clear: both; margin: 20px 0; line-height: 1em; text-align: center; } .return_shop a { font-weight: 700; display: inline-block; padding: 15px 25px 15px 40px; font-size: 14px; border-radius: 40px; background: var(--color-base-bg-light); position: relative; } .return_shop a:before { font-family: var(--fontfamily-icon); content: "\e5cb"; margin: 0 0 0 4px; color: var(--color-base-main-dark); vertical-align: middle; position: absolute; left: 10px; font-size: 24px; } /* --------------------------------------------- div#goodslist-header-navi --------------------------------------------- */ div#goodslist-header-navi {} div#goodslist-header-navi dl { width: 100%; box-sizing: border-box; text-align: center; padding: 0; border-bottom: 4px solid var(--color-base-line-light); display: flex; justify-content: center; flex-wrap: wrap;} div#goodslist-header-navi dl:after { content: ""; clear: both; display: block; } div#goodslist-header-navi dt { font-family: var(--fontfamily-english); font-weight: 700; letter-spacing: 1px; } div#goodslist-header-navi dt, div#goodslist-header-navi dd { margin: 12px 0; color: #FFF; position: relative; text-align: center;} #goodslist-header-navi dl dt a, #goodslist-header-navi dl dd a { box-sizing: border-box; text-decoration: none; display: block; position: relative; font-size: 14px; border-left: 1px solid var(--color-base-line-dark); padding: 8px 12px;} #goodslist-header-navi dl dd:last-of-type a{ border-right: 1px solid var(--color-base-line-dark); } #goodslist-header-navi dl dt a:hover, #goodslist-header-navi dl dd a:hover, #goodslist-header-navi dl dt.current a, #goodslist-header-navi dl dd.current a { color: var(--color-base-main-dark); font-weight: bold;} #goodslist-header-navi dl dt.current a, #goodslist-header-navi dl dd.current a { box-sizing: border-box; } #goodslist-header-navi dl dt.current span, #goodslist-header-navi dl dd.current span { font-size: 14px; color: var(--color-base-main-dark); } body.bf4 #goodslist-header-navi dl dd a:hover, body.bf5 #goodslist-header-navi dl dd a:hover { color: var(--color-base-main-dark); font-weight: bold;} /* ----------------------------------------- goodslist.jspを基本に.NewsItemList ※この見せ方のページは、class="NewsItemList" ※上位のスタイルを上書きするために#contents-main が必要 ----------------------------------------- */ #contents-main .NewsItemList { padding: 0; 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: flex; flex-wrap: wrap; } #contents-main .NewsItemList .item { box-sizing: border-box; width: calc(100% / 3); padding: 16px 20px 0; margin: 10px 0 0; position: relative; } #contents-main .NewsItemList .item .news_box .gcat_badge { display: none; } /*#contents-main .NewsItemList .item.cat2 .news_box .image*/ #contents-main .NewsItemList .item.cat2 h3.goods:before { content: "クーポン"; background: var(--color-base-accent-dark); color: #fff; display: inline-block; padding: 6px; font-weight: bold; line-height: 1em; letter-spacing: 1px; border-radius: var(--box-radius-small); font-size: 0.8em; margin: 0 6px 2px 0; } #contents-main .NewsItemList .item .image { height: 320px; position: relative; margin: 4px 0 0; border: 4px solid var(--color-base-line-light); border-radius: var(--box-radius-small); box-sizing: border-box;} #contents-main .NewsItemList .item .image a { display: block; width: 100%; height: 100%; } #contents-main .NewsItemList .item .image img { } #contents-main .NewsItemList .item .image span { border-radius: 0px; } #contents-main .NewsItemList .item .image .item_image_noimg { } #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; } #contents-main .NewsItemList .item .desc { padding: 10px 0 0 0; position: relative; } #contents-main .NewsItemList .item .date { font-size: 12px; font-family: var(--fontfamily-english); line-height: 1em; margin: 0.5em 0; } @media screen and (max-width: 767px) { #contents-main .NewsItemList .item .date { font-size: 11px; } } #contents-main .NewsItemList .item h3.goods { font-weight: bold; font-size: 16px; line-height: 140%; margin: 4px 0; border: none; padding: 0; background: none; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-base-text-dark); } #contents-main .NewsItemList .item .price { font-weight: bold; font-size: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #contents-main .NewsItemList .item.sale .price { color: #f00; } #contents-main .NewsItemList .item.cat2 .price { display: none; } #contents-main .NewsItemList .item .name { padding-top: 4px; line-height: 14px; } #contents-main .NewsItemList .item .name a { font-size: 80%; } .pc #contents-main .NewsItemList .item .goods_like_btn.mini { bottom: auto; left: auto; top: 315px; right: 35px; margin: 0; } .pc #contents-main .NewsItemList .item .goods_like_btn.mini p{ background: #fffc; } #contents-main #goodslist .price_date, #contents-main .goodslist .price_date { font-size: 10px; padding: 10px; } #contents-main .NewsItemList .item .morelink{ display: none; } /*NewsItemListを基本にしつつsale表示変更*/ body.sale #contents h2 { background: #f00; color: #fff; border-bottom: none; } body.sale #contents-main.all{ padding-top: 0; } /* --------------------------------------------- ニュース一覧など　次へボタン --------------------------------------------- */ #goodslist-navi { margin: 20px 8px; overflow: hidden; } #goodslist-navi .back { float: left; } #goodslist-navi .next { float: right; } #goodslist-navi form input[type="submit"] { color: #000; padding: 12px 12px 12px 15px; font-size: 16px; border-radius: 0px; border: none; cursor: pointer; border: 1px solid var(--color-base-line-dark); background: var(--color-base-bg-light); text-shadow: none; appearance: none; -webkit-appearance: none; } /* --------------------------------------------- ショップ検索用　index.jsp bf=8 --------------------------------------------- */ body.index #search-category, body.index #search-on, body.index #search-floor { margin-bottom: 32px; } body.index .search { padding: 20px; } body.index .search h3 { margin-bottom: 20px; } body.index .search #search-all { clear: both; } body.index .search .search_block { margin: 0 0 32px; } body.index .search .search_block { overflow: hidden; } body.index .search .search_block ul { display: flex; justify-content: left; flex-wrap: wrap; } body.index .search .search_block li { width: calc(100% / 2 - 8px); margin: 0 4px 10px; display: block; border-radius: 0px; } body.index .search .search_block #on_title_list li{ width: calc(100% / 5 - 8px); } body.index .search .search_block li a { display: block; width: 100%; height: 100%; padding: 20px 35px 20px 10px; box-sizing: border-box; position: relative; text-align: center; font-weight: bold; border-radius: var(--box-radius-small); border:4px solid var(--color-base-line-light); } body.index .search .search_block li a:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; font-size: 30px; color: var(--color-base-main-dark); vertical-align: middle; position: absolute; top: 32%; right: 10px;} body.index .search .search_block a:hover:before { border-left-color: #fff; } body.index .search div#search-all { margin: 0 0 10px; padding-left: 0px; } body.index .search div#search-all div.title p { margin: 0 24px 4px; text-align: right; font-size: 10px; } body.index div#searchcat div.title, body.index div#searchon div.title, body.index .search #shop-icon { margin: 0 16px; } body.index .search div.title h4 { font-weight: bold; font-size: 18px; padding: 0 0 16px; text-align: center; } body.index div#searchcat table.table01, body.index div#searchon table.table01 { clear: both; } body.index div.search table.table01 td { padding: 16px 8px; } body.index div.search table.table01 td.tel, body.index div.search table.table01 td.hour, body.index div.search table.table01 td.floor { font-size: 12px; line-height: 16px; } body.index div.search table.table01 th { display: none; } body.index div.search table.table01 td.name p { font-size: 16px; line-height: 20px; } body.index div.search table.table01 td.name a { font-weight: bold;} body.index div.search table.table01 td.floor a { font-weight: bold; } body.index div.search table.table01 .name { width: 35%; padding: 16px 8px 16px 16px; } body.index div.search table.table01 .name .biz { font-size: 12px; } body.index div.search table.table01 .logo { width: 116px; text-align: center; } body.index div.search table.table01 .logo img { width: 80px; margin: 0 auto; } body.index div.search table.table01 .tel { width: 15%; } body.index div.search table.table01 .hour { width: 25%; } body.index div.search table.table01 tr:first-child { border-top: 1px solid #ccc; } body.index div.search table.table01 td.floor { text-align: center; position: relative; padding-right: 24px; font-size: 14px; background: var(--color-base-bg-light); } body.index div.search table.table01 td.floor:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; font-size: 30px; color: var(--color-base-main-dark); vertical-align: middle; position: absolute; top: calc(50% - 8px); right: 10px; } body.index div.search table.table01 td.hour p:before { font-family: var(--fontfamily-icon); content: "\e8b5"; margin: 0 4px 0 0; font-size: 16px; vertical-align: bottom; } body.index div.search table.table01 td.tel p:before { font-family: var(--fontfamily-icon); font-variation-settings: var(--iconfont-FILL1-set); content: "\e0b0"; margin: 0 4px 0 0; font-size: 16px; vertical-align: bottom; } body.index div.search #shop-icon { margin: 8px 16px; } body.index div.search #shop-icon ul li { display: inline-block; margin-right: 20px; font-size: 90%; } body.index div#category-navi { margin: -20px 0 8px; width: 100%; box-sizing: border-box; text-align: center; padding: 0; border-bottom: 4px solid var(--color-base-line-light); } body.index div#category-navi ul{ display: flex; justify-content: center; flex-wrap: wrap; } body.index div#category-navi li { margin: 8px 0; color: #FFF; position: relative; text-align: center;} body.index div#category-navi li a { box-sizing: border-box; text-decoration: none; color: #000; display: block; position: relative; font-size: 14px; border-left: 1px solid var(--color-base-line-dark); padding: 8px 12px; } body.index div#category-navi li:last-child a { border-right: 1px solid var(--color-base-line-dark); } body.index div#category-navi li.guide a { border: none; } /* --------------------------------------------- index.jsp クーポン、求人、サービス一覧ページ --------------------------------------------- */ body.index div#coupon, body.index div#recruit, body.index div#service { padding: 0 0; } body.index div#coupon h2, body.index div#recruit h2, body.index div#service h2 { margin-left: -16px; margin-right: -16px; } body.index div#coupon div.title, body.index div#recruit div.title, body.index div#service div.title { margin: 0 0 16px; overflow: hidden; } body.index div#coupon div.title h3 a, body.index div#recruit div.title h3 a, body.index div#service div.title h3 a { color: #fff; text-decoration: none; } body.index div#searchcat div.title p, body.index div#searchon div.title p, body.index div#coupon div.title p, body.index div#recruit div.title p, body.index div#service div.title p { float: right; text-align: right; font-size: 10px; } body.index div#coupon div.item, body.index div#recruit table.table01, body.index div#service table.table01 { margin: 16px 0 10px; } /* --------------------------------------------- ショップサービス bf=4 --------------------------------------------- */ body.index.bf4 #contents-main { padding-top: 0; } body.index.bf4 .ServiceItemList { margin: 20px; } body.index.bf4 div#service table.table01 { margin: 0 auto 40px; width: 100%; } body.index.bf4 div#service table.table01 td { padding: 8px; } body.index.bf4 div#service table.table01 .name { width: 30%; padding: 20px; } body.index.bf4 div#service table.table01 .name a { font-weight: bold; font-size: 16px; } body.index.bf4 div#service table.table01 .name .floor { font-size: 12px; } body.index.bf4 div#service table.table01 .logo { width: 100px; text-align: center; } body.index.bf4 div#service table.table01 .logo .image{ width: 80px; } body.index.bf4 div#service table.table01 .logo .img_bg_css{ min-height: 50px; } body.index.bf4 div#service table.table01 .logo .img_bg_css.no_img_logo { border: none; background-size: contain; } body.index.bf4 div#service table.table01 .service p { white-space: pre-wrap; padding: 10px 16px; } body.index.bf4.pc div#service table.table01 .service p { border-left: 4px solid var(--color-base-line-light); } /* --------------------------------------------- クーポン　bf=3 --------------------------------------------- */ body.index.bf3 #coupon div#goodslist-header-navi { display: none; } body.index.bf3 #coupon .NewsItemList .item .desc .fromto dt { font-weight: bold; padding: 0 4px; background: var(--color-base-accent-light); display: inline-block; margin-right: 4px; } body.index.bf3 #coupon .NewsItemList .item .desc .fromto dd { display: inline; } body.index.bf3 #coupon .NewsItemList .item h3.goods{ overflow: initial; text-overflow: unset; white-space: unset; } /* --------------------------------------------- 求人情報　bf=5 --------------------------------------------- */ body.index.bf5 .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 30px 20px 20px; overflow: hidden; position: relative; border-bottom: 4px solid var(--color-base-line-light); margin: 10px 0 0; } #event_lists .events:first-of-type { border-top: 4px solid var(--color-base-line-light); } #event_lists .events .c1 { float: right; margin-left: 24px; } #event_lists .events .c1 p.image { overflow: hidden; max-height: 240px; -moz-border-radius: 0px; border-radius: 0px; } #event_lists .events .c1 p.image img { width: 240px; } #event_lists h4 { margin: 16px 0 16px 0; font-weight: bold; overflow: hidden; font-size: 1.2em; } #event_lists .table01 { width: calc(100% - 280px); margin: 20px 0; border-collapse: collapse; border-spacing: 0; } .event-cat-title { clear: both; margin: 16px 0; } .event-cat-title .cat_title { padding: 15px; font-size: 20px; font-weight: bold; background: var(--color-base-sub1-light); color: var(--color-base-main-dark); line-height: 1.5em;} #ev-navi { text-align: center; margin: 10px 0; } .ev-navi_bottom { text-align: center; padding: 24px; } .ev-navi_bottom .ev-navi-cal, #ev-navi .ev-navi-cal { margin-left: 16px; display: inline-block; vertical-align: top; } .ev-navi_bottom .ev-navi-cal i { font-size: 18px; margin-right: 10px; } .ev-navi_bottom .ev_all_link { display: inline-block; vertical-align: top; } .ev-navi-article { width: 192px; display: inline-block; text-align: left; } .ev-navi-article dl { position: relative; } .ev-navi-article dl dt { border-radius: 0px; line-height: 40px; height: 40px; padding-left: 30px; border: 1px solid var(--color-base-line-dark); cursor: pointer; position: relative; border-radius: var(--box-radius-small); } .ev-navi-article dl dt:before { content: ""; display: inline-block; width: 1px; border-left: 1px solid var(--color-base-line-dark); height: 24px; position: absolute; right: 40px; top: 8px; } .ev-navi-article dl dt:after { font-family: var(--fontfamily-icon); content: "\e5cf"; vertical-align: middle; position: absolute; right: 0px; top: 0px; width: 40px; text-align: center; font-size: 30px; color: var(--color-base-main-dark); } .ev-navi-article dl dt.up:after { content: "\e5ce"; } .ev-navi-article dl dd { border: 1px solid var(--color-base-line-dark); position: absolute; left: 0; top: 50px; z-index: 11; background: #fff; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); } .ev-navi-article dl dd:before { content: ""; display: block; position: absolute; top: -16px; width: 0; height: 0; border: 8px solid transparent; left: calc(50% - 8px); border-bottom: 8px solid var(--color-base-line-dark); } .ev-navi-article dl dd li { border-bottom: 1px solid var(--color-base-line-dark); min-width: 190px; } .ev-navi-article dl dd li a { display: block; padding: 12px; position: relative; } .ev-navi-article dl dd li a::after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; color: var(--color-base-main-dark); font-size: 24px; vertical-align: middle; position: absolute; right: 0; top: calc(50% - 12px); } .ev-navi-article dl dd li:last-child { border-bottom: none; } .ev-navi_bottom .ev-navi-cal a, #ev-navi .ev-navi-cal a, .ev-navi_bottom .ev_all_link a { display: inline-block; padding: 8px 24px; font-size: 14px; border-radius: var(--box-radius-small); border: 1px solid var(--color-base-line-dark); } .ev-navi_bottom .ev_all_link a{ padding-left: 15px; } .ev-navi_bottom .ev-navi-cal a:before, #ev-navi .ev-navi-cal a:before { font-family: var(--fontfamily-icon); font-variation-settings: var(--iconfont-FILL1-set); content: "\ebcc"; margin: 0 4px 0 0; font-size: 24px; vertical-align: middle; } #ev-navi .ev-navi-cal a { height: 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: #555; color: #fff; padding: 4px 6px; margin-bottom: 4px; line-height: 1em; } /* .events .e_category:before { font-family: var(--fontfamily-icon); font-variation-settings: var(--iconfont-FILL1-set); margin: 0 4px 0 0; content: "\e866"; font-size: 16px; line-height: 1em; vertical-align: middle; } */ body.view.eventnews #more-btn { text-align: center; margin: 0px 16px 16px; } body.view.eventnews #more-btn span:before { font-family: var(--fontfamily-icon); content: ""; vertical-align: middle; font-size: 140%; } body.eventnews #more-btn span { display: block; background: var(--color-base-bg-light); padding: 10px 20px; cursor: pointer; border-radius: 0 0 20px 20px /0 0 20px 20px; } /* --------------------------------------------- イベントニュース　item_eventnews.jsp --------------------------------------------- */ body.item_eventnews .item { overflow: hidden; } body.item_eventnews #contents-main .item .title h3 { font-size: 18px; margin: 0 0 10px; text-align: left; } body.item_eventnews #contents-main .item .subtitle h4 { padding: 0 16px 10px; border-bottom: 1px solid #ccc; line-height: 1.4em; } body.item_eventnews #contents-main .item .images { margin: 24px 0; } body.item_eventnews #contents-main .item .images .image { margin: 0 0 16px 0; text-align: center; } body.item_eventnews #contents-main .item .images .image img { border-radius: 0px; max-width: 90%; max-height: 800px; min-width: 480px; } body.item_eventnews #contents-main .item .images .image .caption_in { display: block; width: 100%; padding: 5px; } body.item_eventnews #contents-main .item.noimg .images .desc { float: none; width: 100%; } body.item_eventnews #contents-main .item .images .subimg { text-align: center; margin: 10px auto 20px; } body.item_eventnews #contents-main .item .images .subimg li { width: 130px; height: 130px; display: inline-block; background: var(--color-base-bg-light); box-sizing: border-box; text-align: center; margin: 0 5px; } body.item_eventnews #contents-main .item .images .subimg li span { display: table-cell; width: 130px; height: 130px; box-sizing: border-box; line-height: 130px; margin: 0 auto; vertical-align: middle; } body.item_eventnews #contents-main .item .images .subimg li img { max-width: 100%; max-height: 100%; cursor: pointer; vertical-align: middle; display: block; margin: 0 auto; text-align: center; } body.item_eventnews #contents-main .item .desc { overflow: hidden; } body.item_eventnews #contents-main .item .desc .ev_content { margin-bottom: 20px; word-break: break-word; } body.item_eventnews #contents-main .item .social { /* border-top: 4px solid var(--color-base-line-light);*/ background: var(--color-base-bg-light); border-radius: var(--box-radius-small); margin-top: 40px; } body.item_eventnews #contents-main .item .desc .section { margin: 20px 0; } body.item_eventnews #contents-main .item .desc .remarks { padding: 16px; } body.item_eventnews #contents-main .item .desc .remarks dt { margin-bottom: 4px; font-weight: bold; } body.item_eventnews #contents-main .item .desc .remarks dd { font-size: 12px; line-height: 18px; } body.item_eventnews #contents-main .item .desc .link { text-align: center; margin: 30px 0; } body.item_eventnews #contents-main .item .desc .link a { text-decoration: none; display: inline-block; margin: 10px 0 0; text-align: center; color: #fff; border-radius: var(--box-radius-small); background: var(--color-base-sub1-dark); padding: 20px 50px 20px 40px; position: relative; max-width: 80%; min-width: 12em; font-weight: 700; font-size: 16px; } body.item_eventnews #contents-main .item .desc .link a:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; vertical-align: middle; font-size: 24px; position: absolute; right: 10px; top: calc(50% - 12px); } body.item_eventnews #contents-main .item .desc table.table01 th i { font-size: 20px; } /*tag list*/ body.item_eventnews #contents-main .event_tags { margin: 40px 0 0; text-align: center; border: 3px solid var(--color-base-line-light); } #contents-main .event_tags .event_tags-title { border: none; } #contents-main .event_tags .event_tags-title em { font-family: var(--fontfamily-english); font-weight: bold; font-size: 22px; letter-spacing: .05em; } #contents-main .event_tags .event_tags-title::before { content: "#"; font-family: var(--fontfamily-english); color: var(--color-base-main-dark); font-size: 22px; margin: 0px 5px 0 0; vertical-align: middle; } #contents-main .event_tags .event_tags-title::before { content: "#"; font-family: var(--fontfamily-english); color: var(--color-base-main-dark); font-size: 22px; margin: 0px 5px 0 0; vertical-align: middle; } #contents-main .event_tags p { padding: 0 0 10px; margin: -5px 0 0; font-size: 14px; } body.item_eventnews #contents-main .event_tags .tag_list { padding-bottom: 8px; } body.item_eventnews #contents-main #event_list { margin-top: 24px; overflow: hidden; } body.item_eventnews #contents-main #event_list .p_title { padding: 0 8px 0 20px; position: relative; } body.item_eventnews #contents-main #event_list .p_title h4 { font-family: var(--fontfamily-english); font-weight: bold; text-align: center; font-size: 22px; padding: 10px 0px 15px; } body.item_eventnews #contents-main #event_list { display: flex; height: 120px; padding: 25px 0; border: 4px solid var(--color-base-line-light); border-radius: var(--box-radius-small); } body.item_eventnews #contents-main #event_list .events { width: calc(100% / 3); padding: 0 15px; border-right: 4px solid var(--color-base-line-light); box-sizing: border-box; } body.item_eventnews #contents-main #event_list .events:last-of-type { border: none; } body.item_eventnews #contents-main #event_list .events strong { font-size: 14px; } body.item_eventnews #contents-main #event_list .events .term { line-height: 18px; font-size: 12px; margin-top: 2px; word-break: break-all; } body.item_eventnews #contents-main #event_list .events .term::before { font-family: var(--fontfamily-icon); font-variation-settings: var(--iconfont-FILL1-set); margin: 0 4px 0 0; font-size: 14px; content: "\e614"; vertical-align: bottom; } body.item_eventnews #contents-main #event_list .events .subtitle { font-size: 12px; white-space: nowrap; text-overflow: ellipsis; display: block; overflow: hidden; padding: 0 0 3px 0px; display: none; } body.item_eventnews #contents-main #event_list .events a { width: 100%; display: block; } body.item_eventnews #contents-main #event_list .events .e_category { margin-bottom: 4px; } body.item_eventnews #contents-main #event_list .events h4 { font-weight: bold; line-height: 18px; margin-bottom: 4px; } body.item_eventnews #contents-main #event_list .p_title p{ text-align: center; } body.item_eventnews #contents-main #event_list .btn-more{ } body.item_eventnews #contents-main #event_list .btn-more:after { } /* --------------------------------------------- 営業時間　hours --------------------------------------------- */ body.hours #contents-main article section{ padding: 24px; border-radius: var(--box-radius-small); border: 1px solid #ccc; margin: 1em 0 2em; } body.hours #contents-main article#hour h3:before{ font-family: var(--fontfamily-icon); margin: 0 4px 0 0; vertical-align: middle; font-size: 30px; font-weight: normal; color: var(--color-base-main-dark); width: calc(1em + 4px); display: inline-block; text-align: center; content: "\e8b5"; } body.hours #contents-main .hours_content section{ white-space: pre-wrap; } body.hours #contents-main .hours_content section strong{ font-size: 1.2em; } body.hours #contents-main .hours_content section a{ color: var(--color-base-main-dark); padding: 5px 10px; display: inline-block; border-radius: var(--box-radius-small); background: var(--color-base-bg-light); margin: 5px 0 0; } body.hours #contents-main .hours_content section p.btn a{ display: inline-block; margin: 10px 0 0; text-align: center; color: #fff; background: var(--color-base-accent-dark); padding: 8px 30px 12px 20px; position: relative; font-weight: bold; } body.hours #contents-main .hours_content section p.btn a:after{ font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; font-size: 30px; color: #fff; vertical-align: middle; position: absolute; top: calc(50% - 10px); right: 0; } /* --------------------------------------------- 施設案内（よくある質問）faq --------------------------------------------- */ body.hours #contents-main article#faq h3:before{ font-family: var(--fontfamily-icon); margin: 0 4px 0 0; vertical-align: middle; font-size: 30px; font-weight: normal; color: var(--color-base-main-dark); width: calc(1em + 4px); display: inline-block; text-align: center; content: "\e887"; } body.hours #contents-main .faq_content dl dt { font-weight: bold; line-height: 1.5em; color: var(--color-base-main-dark); position: relative; padding: 0 0 0.5em 2.2em; font-size: 1.2em; } body.hours #contents-main .faq_content dl dd { margin: 0.5em 0 1.5em; position: relative; padding: 0 0 2em 2.6em; border-bottom: 1px solid var(--color-base-line-dark); } body.hours #contents-main .faq_content dl dd:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } body.hours #contents-main .faq_content dl dd a { text-decoration: underline; } body.hours #contents-main .faq_content dl dt:before, body.hours #contents-main .faq_content dl dd:before { font-family: var(--fontfamily-english); 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 { box-sizing: border-box; overflow: hidden; } #free_page_area .fp_content img { max-width: 100%; } /*基本設定*/ #free_page_area .fp_content .table02 { border-collapse: collapse; width: 100%; word-break: break-all; } #free_page_area .fp_content .table02 th { background: #EAEAEA; font-weight: bold; border: 1px solid #ccc; padding: 12px 8px; } #free_page_area .fp_content .table02 td { border: 1px solid #ccc; padding: 12px 8px; } /*---------------------- Shop Guide　関連の共通メニュー ----------------------*/ .shop_guide_menu ul { height: 70px; margin: 0 0 20px; border-bottom: 4px solid var(--color-base-line-light); display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; } .shop_guide_menu ul li { width: calc(100% / 2 - 2px); 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: var(--color-base-bg-light); width: 100%; height: 70px; line-height: 70px; position: relative; } .shop_guide_menu ul li.current a { position: relative; background: var(--color-base-sub1-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: -22px; width: 0; height: 0; border: 12px solid transparent; left: 36%; left: calc(50% - 12px); border-top: 12px solid var(--color-base-sub1-dark); } /* --------------------------------------------- フロアガイド(floor.jsp用) --------------------------------------------- */ #contents[data-content*="フロアガイド3F（AZ EAST）"] article .floor_img .leaflet-left { right: 0 !important; left: inherit; } #contents[data-content*="フロアガイド3F（AZ EAST）"] article .floor_img .leaflet-touch .leaflet-bar { margin-left: 0px; margin-right: 10px; } #contents[data-content*="フロアガイド3F（AZ EAST）"] #free_page_area .fp_content .azlogo { margin: 0 auto; width: 30%; display: flex; justify-content: center; padding: 12px 30px; color: #5757b1; border: 1px solid rgb(160, 160, 218); border-radius: 6px; } #contents[data-content*="フロアガイド3F（AZ EAST）"] #free_page_area .fp_content .azlogo p { text-align: center; font-size:14px; } #contents[data-content*="フロアガイド3F（AZ EAST）"] #free_page_area .fp_content .azlogo a { display: block; } #contents[data-content*="フロアガイド3F（AZ EAST）"] #free_page_area { width: 100%; margin: 0px; } body.floor h2 strong { font-weight: bold; display: inline-block; margin-left: 10px; font-size: 1.1em; } body.floor article .floor_img, #contents[data-content*="フロアガイド3F（AZ EAST）"] article .floor_img { padding: 24px 80px; width: 100%; box-sizing: border-box; border-radius: 0px; } body.floor article .floor_img img, #contents[data-content*="フロアガイド3F（AZ EAST）"] article .floor_img img{ width:calc(100% - 22px); } body.floor article .floor_img .desc, #contents[data-content*="フロアガイド3F（AZ EAST）"] article .floor_img .desc{ background: #fff; padding: 16px; margin: 8px 0 0; background: var(--color-base-bg-light); text-align: center; } body.floor article .floor_img .desc p, #contents[data-content*="フロアガイド3F（AZ EAST）"] article .floor_img .desc p{ padding: 5px 0; text-align: center; } body.floor article .floor_img .desc .floor_icon p, #contents[data-content*="フロアガイド3F（AZ EAST）"] article .floor_img .desc .floor_icon p{ display: inline-block; font-size: 14px; line-height: 1em; margin: 1px 5px; } body.floor article .floor_img .desc .floor_icon em, #contents[data-content*="フロアガイド3F（AZ EAST）"] article .floor_img .desc .floor_icon em{ background-image: url(../static/fig_floor-signicon.svg); display: inline-block; width: 20px; height: 20px; background-position: left; background-size: auto 19px; text-indent: -9999em; overflow: hidden; background-repeat: no-repeat; padding: 0; margin: 0 2px; vertical-align: middle; } body.floor article .floor_img .desc .floor_icon em.icon1{background-position: 0 0;} body.floor article .floor_img .desc .floor_icon em.icon2{background-position: -22px 0;} body.floor article .floor_img .desc .floor_icon em.icon3{background-position: -44px 0;} body.floor article .floor_img .desc .floor_icon em.icon4{background-position: -66px 0;} body.floor article .floor_img .desc .floor_icon em.icon5{background-position: -88px 0;} body.floor article .floor_img .desc .floor_icon em.icon6{background-position: -110px 0;} body.floor article .floor_img .desc .floor_icon em.icon7{background-position: -132px 0;} body.floor article .floor_img .desc .floor_icon em.icon8{background-position: -154px 0;} body.floor article .floor_img .desc .floor_icon em.icon9{background-position: -176px 0;} body.floor article .floor_img .desc .floor_icon em.icon10{background-position: -198px 0;} body.floor article .floor_img .desc .caption, #contents[data-content*="フロアガイド3F（AZ EAST）"] article .floor_img .desc .caption{ font-size: 0.9em; } body.floor table.table01, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 { margin: 16px 0; } #contents[data-content="フロアガイド3F（AZ EAST）"] .fp_content table.table01 { border-top: 1px solid var(--color-base-line-dark); border-left: none; border-bottom: none; border-right: none; } body.floor table.table01 td.number, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 td.number { /* text-align: center; position: relative; padding: 0 0 0 10px;*/ width: 10%; } #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 td.name { /* text-align: center; position: relative; padding: 0 0 0 10px;*/ width: 30%; } body.floor table.table01 td.logo{ width: 10%; border-left: none; text-align: center; } body.floor table.table01 td.category, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 td.category{ width: 15%; font-size: 0.9em; } body.floor table.table01 td.hour, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 td.hour { width: 15%; /*font-size: 0.9em;*/ } body.floor table.table01 td.logo img, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 td.logo img{ max-width: 80px; } body.floor .cl_fl_list, #contents[data-content*="フロアガイド3F（AZ EAST）"] .cl_fl_list { overflow: hidden; margin: 0 0 10px 0; } body.floor .cl_fl_list dt, #contents[data-content*="フロアガイド3F（AZ EAST）"] .cl_fl_list dt{ float: left; padding: 5px 0; } body.floor .cl_fl_list dd .floorlist dt, #contents[data-content*="フロアガイド3F（AZ EAST）"] .cl_fl_list dd .floorlist dt{ float: left; margin: 0 2px; padding: 0; } body.floor .cl_fl_list dd .floorlist dt a, #contents[data-content*="フロアガイド3F（AZ EAST）"] .cl_fl_list dd .floorlist dt a{ position: relative; padding: 5px 10px; background: var(--color-base-bg-light); border-radius: 0px; display: inline-block; text-decoration: none; font-size: 16px; min-width: 30px; text-align: center; color: var(--color-base-accent-dark); } body.floor .cl_fl_list dd .floorlist dt a:hover, #contents[data-content*="フロアガイド3F（AZ EAST）"] .cl_fl_list dd .floorlist dt a:hover{ background: var(--color-base-accent-dark); color: #fff; } /*Zoomの追加css　*/ body.floor article .floor_img .zoom_area, #contents[data-content*="フロアガイド3F（AZ EAST）"] article .floor_img .zoom_area{ position: relative; } .leaflet-container { z-index: 10; padding:0 10px; border:1px solid #ccc; background-color:#fff; } /*----------店舗一覧テーブル----------*/ .floor_notice { padding: 10px 0; font-size: 10px; text-align: right; } body.view.floor table.table01 thead, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 thead{ display: none; } body.view.floor table.table01 td.category, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 td.category{ position: relative; } body.view.floor table.table01 td.category::after, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 td.category::after{ font-family: var(--fontfamily-icon); content: ""; margin: 0 0 0 4px; color: var(--color-base-accent-dark); vertical-align: middle; position: absolute; font-size: 20px; right: 10px; } /*構造*/ body.floor table.table01 th, body.floor table.table01 td, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 th, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 td{ box-sizing: border-box; font-size: 12px; padding: 16px; border: none; width: 30%; } /* .floor .table01 .logo img{width: 80px;} */ body.floor table.table01 td.hour, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 td.hour{ width: 20%; padding-right: 24px; position: relative; } body.floor table.table01 td.tel, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 td.tel{ width: 10%; } /*ショップ番号*/ body.floor table.table01 td.number span, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 td.number span { font-family: var(--fontfamily-english); text-align: center; font-size: 14px; font-weight: bold; line-height: 1em; display: block; padding: 0.8em 0.4em; box-sizing: border-box; background: var(--color-base-bg-light); } /*カテゴリ別色分け*/ body.floor table.table01 tr.cat1 td.number span, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 tr.cat1 td.number span{ background: #BAE2F8; } body.floor table.table01 tr.cat2 td.number span, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 tr.cat2 td.number span{ background: #D1CBE5; } body.floor table.table01 tr.cat3 td.number span, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 tr.cat3 td.number span{ background: #F9CA6B; } body.floor table.table01 tr.cat4 td.number span, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 tr.cat4 td.number span{ background: #BCD87C; } body.floor article#f_4f table.table01 tr td.number span, body.floor article#f_5f table.table01 tr td.number span, body.floor article#f_6f table.table01 tr td.number span, body.floor article#f_7f table.table01 tr td.number span, body.floor article#f_8f table.table01 tr td.number span { background: none; border: 1px solid var(--color-base-line-midlight); } body.floor table.table01 td.number span, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 td.number span { position: relative; vertical-align: middle; margin: 0 auto; } body.floor table.table01 td.name .category, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 td.name .category { font-size: 12px; font-weight: normal; margin-bottom: 0; } body.floor table.table01 td.name .shopname, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 td.name .shopname { font-size: 16px; line-height: 18px; font-weight: bold; margin-bottom: 0; } body.floor table.table01 td.name a, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 td.name a { font-weight: bold;} body.floor .floor_notice img, #contents[data-content*="フロアガイド3F（AZ EAST）"] .floor_notice img { height: 16px; width: auto; vertical-align: middle; } body.floor table.table01 .icn, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 .icn { display: block; position: absolute; top: 32%; right: 10px; } body.floor table.table01 .hour:before, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 td.hour:before { font-family: var(--fontfamily-icon); content: "\e8b5"; margin: 0 4px 0 0; font-size: 16px; vertical-align: bottom; } body.floor table.table01 .tel:before, #contents[data-content*="フロアガイド3F（AZ EAST）"] table.table01 td.tel:before { font-family: var(--fontfamily-icon); font-variation-settings: var(--iconfont-FILL1-set); content: "\e0b0"; margin: 0 4px 0 0; font-size: 16px; vertical-align: bottom; } body.floor table.table01 td.hour:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; font-size: 30px; color: var(--color-base-main-dark); vertical-align: middle; position: absolute; top: calc(50% - 12px); right: 0; } /* --------------------------------------------- フロアガイド共通マップ --------------------------------------------- */ .floor dl.floorlist, .allmap_map ul, #contents[data-content*="フロアガイド3F（AZ EAST）"] dl.floorlist { display: flex; justify-content: center; flex-wrap: wrap; margin: 20px 0 10px; display: none; } .floor .floorsearch_box dl.floorlist, #contents[data-content*="フロアガイド3F（AZ EAST）"] .floorsearch_box dl.floorlist { display: flex; } .floor dl.floorlist dt, .allmap_map li, #contents[data-content*="フロアガイド3F（AZ EAST）"] dl.floorlist dt{ margin: 0 4px 8px; text-align: center; font-size: 16px; font-weight: bold; letter-spacing: 0.1em; width: calc(100% / 6 - 20px); } .floor dl.floorlist dt a, .allmap_map li a, #contents[data-content*="フロアガイド3F（AZ EAST）"] dl.floorlist dt a{ display: block; width: 100%; height: 100%; border-radius: var(--box-radius-small); padding: 10px 15px 10px 10px; box-sizing: border-box; position: relative; text-align: center; font-weight: bold; border: 4px solid var(--color-base-line-light); } .floor dl.floorlist dt a:after, .allmap_map li a:after, #contents[data-content*="フロアガイド3F（AZ EAST）"] dl.floorlist dt a:after{ font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; font-size: 30px; color: var(--color-base-main-dark); vertical-align: middle; position: absolute; top: calc(50% - 12px); right: 10px;} .floor dl.floorlist dt a:hover, .allmap_map li a:hover, #contents[data-content*="フロアガイド3F（AZ EAST）"] dl.floorlist dt a:hover{ text-decoration: none; } /* --------------------------------------------- フロアガイド地図の＋－ボタン --------------------------------------------- */ body.floor article .floor_img .leaflet-left { right: 0 !important; left: inherit; } body.floor article .floor_img .leaflet-touch .leaflet-bar { margin-left: 0px; margin-right: 10px; } /* --------------------------------------------- フロアガイドTOPページ --------------------------------------------- */ .floor #contents #f_top { display: flex; justify-content: center; } .floor #contents #f_top .overall { width: 840px; } .pc.floor #contents #f_top .overall p { text-align: center; margin-bottom: 15px; } .pc.floor #contents #f_top .overall a { display: block; height: 75px; background: url("../pr/kjt-floor/260408fig_floor_off.png") no-repeat center; text-indent: 100%; white-space: nowrap; overflow: hidden; } .pc.floor #contents #f_top .overall a:hover { background: url(../pr/kjt-floor/260408fig_floor_on.png) no-repeat center; } .pc.floor #contents #f_top .overall a.f1 { background-position: center -531px; } .pc.floor #contents #f_top .overall a.f2 { background-position: center -455px; } .pc.floor #contents #f_top .overall a.f3 { background-position: center -379px; } .pc.floor #contents #f_top .overall a.f4 { background-position: center -303px; } .pc.floor #contents #f_top .overall a.f5 { background-position: center -227px; } .pc.floor #contents #f_top .overall a.f6 { background-position: center -152px; } .pc.floor #contents #f_top .overall a.f7 { background-position: center -76px; } .pc.floor #contents #f_top .overall a.f8 { background-position: center 0px; } /* --------------------------------------------- フロアページ下部　フロア一覧 --------------------------------------------- */ .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 { border: 4px solid var(--color-base-line-light); border-radius: var(--box-radius-small); padding: 0 16px 10px; box-sizing: border-box; background: #fff; margin: 40px auto 0; } .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 { margin: 0 0 10px 0; padding: 20px 40px; box-sizing: border-box; position: relative; } #contents.favorite #favorite .item:first-of-type{ margin-top: 20px; } #contents.favorite #favorite .item::after { content: ""; display: block; clear: both; } #contents.favorite #favorite .item .ranking_box { min-height: 60px; /*#contents.favorite #favorite .order の height と同値*/ } #contents.favorite #favorite .item .order { display: block; width: 60px; height: 60px; margin: 0 20px 0 0; background: #8A6B4F; font-family: var(--fontfamily-english); font-weight: 700; color: #fff; text-align: center; font-size: 26px; line-height: 60px; border-radius: var(--box-radius-full); position: absolute; top: 10px; left: 10px; z-index: 2;} #contents.favorite #favorite .item:nth-of-type(1) .order { background: #B29C60;} #contents.favorite #favorite .item:nth-of-type(2) .order { background: #919191; } #contents.favorite #favorite .item .image { display: block; width: 300px; height: 200px; float: left; margin: 0 20px 0 0; overflow: hidden; position: relative; border: 4px solid var(--color-base-line-light); border-radius: var(--box-radius-small);} #contents.favorite #favorite .item .image img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; } #contents.favorite #favorite .item .goods.title { margin: 0 0 20px 0; padding: 20px 0; display: block; font-size: 18px; line-height: 24px; } .pc #contents.favorite #favorite .item .goods.title { display: inline-block; border-bottom: 4px solid var(--color-base-line-light); width: calc(100% - 330px); } #contents.favorite #favorite .item .goods.title a { font-weight: bold; } #contents.favorite #favorite .goods_like_btn.mini { position: static; margin: 15px 0 0; } #contents.favorite #favorite .goods_like_btn.mini p{ padding: 15px 60px; border-radius: 40px; font-size: 1.0em; font-weight: bold; } #contents.favorite #favorite .goods_like_btn.mini p i{ vertical-align: top; } #contents.favorite #favorite .item .morelink{ display: none; } /* --------------------------------------------- 人気タグページ(shop/tag.jsp) --------------------------------------------- */ #contents #tag { text-align: center; } /*タグ　タイトル部*/ #contents.tag .tag-title{ border: 1px solid var(--color-base-line-dark); border-radius: var(--box-radius-small); color: var(--color-base-text-dark); background: none; margin: 0 10px; text-align: center; } #contents.tag .tag-title:first-of-type{ margin-top: 20px; } #contents.tag .tag-title::before { content: "#"; font-family: var(--fontfamily-english); color: var(--color-base-accent-dark); font-size: 22px; margin: 0px 5px 0 0; vertical-align: middle; } #contents.tag .tag-title_main { vertical-align: middle; } #contents.tag .tag-title_count { font-size: 16px; font-weight: bold; color: var(--color-base-accent-dark); display: inline-block; width: 30px; height: 30px; box-sizing: border-box; border-radius: var(--box-radius-full); padding: 0; margin: 0 0 0 8px; font-family: var(--fontfamily-english); background: var(--color-base-accent-light); line-height: 30px; text-align: center;} /*タグ　アイテムリスト*/ #contents #tag .goodslist { overflow: hidden; } #contents #tag .goodslist .item { width: calc(100% / 3); box-sizing: border-box; margin: 10px 0 0; padding: 16px 10px; float: left; text-align: left; /**/ position: relative; } #contents #tag .goodslist .item .news_box { width: 100%; height: 100%; box-sizing: border-box; } #contents #tag .goodslist .item p.image { width: 180px; height: 180px; border-radius: 0px; float: left; margin-top: -20px; border: 4px solid var(--color-base-line-light); border-radius: var(--box-radius-small);} #contents #tag .goodslist .item p.image span.img_bg_css.item_image_noimg img{ object-fit: contain; padding: 30px; box-sizing: border-box; } #contents #tag .goodslist .item p.image a { display: block; width: 100%; height: 100%; } #contents.tag .price_date { font-size: 10px; padding: 10px; } #contents #tag .item .desc, #contents #tag .date { padding: 0 0 0 200px; } #contents #tag .ico_new2 { display: none; } #contents #tag .goodslist .item .goods { font-weight: bold; border: none; padding: 0; background: none; text-align: left; font-size: 16px; overflow: hidden; position: relative; margin: 0 0 2px 0px; } #contents #tag .goodslist .item .name { font-size: 12px; } #contents #tag .goodslist .item .price { display: none; font-weight: bold; font-size: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #contents #tag .goodslist .item .date { font-size: 12px; font-family: var(--fontfamily-english); line-height: 1em; margin: 0.5em 0; color: #777; } @media screen and (max-width: 767px) { #contents #tag .goodslist .item .date { font-size: 11px; } } #contents #tag .goodslist .item .name { line-height: 150%; } #contents #tag .goods_like_btn, #contents #tag .morelink { display: none; } /*タグ　もっと見るボタン*/ #contents #tag .more-button-wrap { text-align: center; padding: 10px 0 40px; } /* #contents #tag .more-button-wrap .btn-more{ font-family: var(--fontfamily-english); font-weight: 700; display: inline-block; padding: 10px 34px 10px 20px; font-size: 14px; border-radius: 40px; background: var(--color-base-accent-light); position: relative; } #contents #tag .more-button-wrap .btn-more:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; color: var(--color-base-accent-dark); vertical-align: middle; position: absolute; right: 10px; font-size: 24px; } */ /*下部に並ぶタグ一覧(×フッター)*/ #contents #tag .tag_list_name{ display: inline-block; margin: 0 2px 8px; } #contents #tag .tag_list_name a { } #contents #tag .tag_list-tagname { font-weight: bold; } #contents #tag .tag_list-tagcount { font-size: 14px; font-weight: bold; background: #fff; /* color: var(--color-base-accent-dark); */ display: inline-block; width: 24px; height: 24px; box-sizing: border-box; border-radius: var(--box-radius-full); padding-top: 5px; margin-left: 8px; font-family: var(--fontfamily-english); line-height: 1em; text-align: center;} #contents #tag .more-button-wrap:last-of-type { position: relative; margin-bottom: 80px; } #contents #tag .more-button-wrap:last-of-type:after { font-family: var(--fontfamily-english); font-weight: bold; text-align: center; font-size: 24px; color: var(--color-base-accent-dark); content: "OTHER TAGS"; display: block; position: absolute; bottom: -60px; left: 0; width: 100%; padding: 0 0 15px; border-bottom: 4px solid var(--color-base-line-light); } /*下部に並ぶタグ一覧（tagitemlist）*/ #contents .trendtag_list { border: 4px solid var(--color-base-line-light); border-radius: var(--box-radius-small); background: #fff; width: 960px; margin: 0 auto; } #contents .trendtag_list h4 { font-family: var(--fontfamily-english); font-weight: bold; text-align: center; font-size: 22px; padding: 20px 0 18px; } #contents .trendtag_list h4 a{ color: var(--color-base-accent-dark); } /*#contents .trendtag_list h4:before { content: "#"; margin: 0 5px 0 0; font-family: var(--fontfamily-english); color: var(--color-base-accent-dark); }*/ /*一覧へ戻るボタン*/ #contents.tag .return_list { clear: both; margin: 20px 0; line-height: 1em; text-align: center; } #contents.tag .return_list a { font-weight: 700; display: inline-block; padding: 15px 25px 15px 40px; font-size: 14px; border-radius: 40px; background: var(--color-base-main-midlight); position: relative;} #contents.tag .return_list a:before { font-family: var(--fontfamily-icon); content: "\e5cb"; margin: 0 0 0 4px; color: var(--color-base-sub1-dark); vertical-align: middle; position: absolute; left: 10px; font-size: 24px; } /* --------------------------------------------- 特集ページ(shop/feature.jsp) --------------------------------------------- */ #contents #feature .feature { box-sizing: border-box; padding: 20px 25px 20px 10px; overflow: hidden; position: relative; border-bottom: 1px solid var(--color-base-line-dark); } #contents #feature .feature > h2{ display: none; } #contents #feature .feature .image { display: block; float: right; width: 400px; height: 160px; margin: 0 0 0 20px; border: 4px solid var(--color-base-line-light); border-radius: var(--box-radius-small); box-sizing: border-box; } #contents #feature .feature .title { padding: 10px 0; font-weight: bold; font-size: 18px; } #contents #feature .feature .date { font-size: 12px; font-family: var(--fontfamily-english); line-height: 1em; margin: 0.5em 0;} @media screen and (max-width: 767px) { #contents #feature .feature .date { font-size: 11px; } } /*ピックアップガイド個別ページ*/ body.item_feature #contents 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; white-space: pre-wrap; } /*一覧へ戻るボタン*/ #contents.feature .return_list { clear: both; margin: 20px 0; line-height: 1em; text-align: center; } #contents.feature .return_list a { font-family: var(--fontfamily-english); font-weight: 700; display: inline-block; padding: 15px 25px 15px 40px; font-size: 14px; border-radius: 40px; background: var(--color-base-bg-light); position: relative; } #contents.feature .return_list a:before { font-family: var(--fontfamily-icon); content: "\e5cb"; margin: 0 0 0 4px; color: var(--color-base-main-dark); vertical-align: middle; position: absolute; left: 10px; } /*-------------------- ショップニュースの店長ボイス 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 { font-family: var(--fontfamily-english); font-weight: 700; display: inline-block; padding: 10px 26px 10px 20px; font-size: 14px; border-radius: 40px; line-height: 1em; background: var(--color-base-main-midlight); position: relative; } #contents .btn-more:after { font-family: var(--fontfamily-icon); content: "\e5cc"; color: var(--color-base-sub1-dark); position: absolute; right: 5px; top: calc(50% - 8px); font-size: 24px; } /* --------------------------------------- ニュース、クーポン、ボイス、求人のタブ --------------------------------------- */ .shopnews_tab { height: 70px; margin: 0 0 0; border-bottom: 4px solid var(--color-base-line-light); display: flex; justify-content: space-around; } .shopnews_tab li { width: 100%; box-sizing: border-box; padding: 0; height: 70px; vertical-align: bottom; border-right: 4px solid #fff; } .shopnews_tab li:last-child { border-right: 0; } .shopnews_tab li a { display: inline-block; text-align: center; background: var(--color-base-bg-light); width: 100%; height: 70px; line-height: 70px; position: relative; } .pc .shopnews_tab li a br{ display: none; } .shopnews_tab li.current a { position: relative; background: var(--color-base-sub1-dark); border-bottom: none; margin-top: 0; line-height: 70px; height: 70px; font-weight: bold; font-size: 18px; color: #fff; } .shopnews_tab li.current a:after { content: ""; display: block; position: absolute; bottom: -22px; width: 0; height: 0; border: 12px solid transparent; left: 36%; left: calc(50% - 12px); border-top: 12px solid var(--color-base-sub1-dark); } .shopnews_tab li a .num { font-size: 14px; font-family: var(--fontfamily-english); line-height: 1em; text-align: center; background: var(--color-base-accent-dark); display: block; width: 30px; height: 30px; border-radius: 50%; box-sizing: border-box; opacity: 1.0; color: #fff; padding: 8px 0 0 2px; position: absolute; top: -8px; right: 8px; } /*.shopnews_tab li a[href*="tag"]:before { font-family: var(--fontfamily-english); content: "#"; font-weight: bold; margin: 0 8px 0 0; color: var(--color-base-accent-dark); } .shopnews_tab li a[href*="favorite"]:before { font-family: var(--fontfamily-icon); font-variation-settings: var(--iconfont-FILL1-set); margin: 0 8px 0 0; content: "\e87d"; color: var(--color-base-accent-dark); vertical-align: bottom; }*/ .shopnews_tab li.current a:before{ color: #fff; } /* --------------------------------------------- mdカテゴリ(shop/md_cat_list.jsp) --------------------------------------------- */ .md_cat_list #contents h2:before { font-family: var(--fontfamily-icon); content: "\e065"; font-size: 24px; margin: 0 4px 0 0; vertical-align: middle; } /* --------------------------------------------- --------------------------------------------- 単館用の表示設定 body#sesmd1 --------------------------------------------- --------------------------------------------- */ body#sesmd1 #main_header .sc_header_top_navi, body#sesmd1 footer .footer_list{ display: none; } body#sesmd1 #main_header .lang_btn{ top: 0; } body#sesmd1 .header_wrap { display: block; box-sizing: border-box; height: auto; } body#sesmd1 .header_logo{ width:100px; text-align: center; padding:20px 0 10px; box-sizing: border-box; display: block; margin: auto; } body#sesmd1 .header_logo img{ max-width: 100%; } body#sesmd1.pc .glo_menu_list .glo_menu_inner{ padding: 15px 0; } body#sesmd1.pc .glo_menu_list .glo_menu_inner:before{ display: inline-block; font-size: 18px; height: auto; margin: 0 4px 0 0; vertical-align: middle; } body#sesmd1 footer .ad_foot_desc ul{ margin-top: 20px; } body#sesmd1.bf0 #contents section#pickup.parts { display: initial; } /* --------------------------------------------- freepage共用デザイン --------------------------------------------- */ #free_page_area .fp_content .contents_area { /*padding: 0 15px;*/ box-sizing: border-box; margin-bottom: 30px; } #free_page_area .fp_content h3 { margin-bottom: 20px; } #free_page_area .fp_content p { line-height: 1.7; margin-bottom: 0.8em; } #free_page_area .fp_content table { width: 100%; border: 3px solid #ccc; } #free_page_area .fp_content table th { background: #eee; padding: 15px; border-top: 1px solid #ccc; vertical-align: middle; } #free_page_area .fp_content table td { padding: 15px; border-top: 1px solid #ccc; vertical-align: middle; border-right: 1px solid #ccc; }