@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@40,400,0..1,0"); /*基本設定*/ :root { --color-base-text-dark: #333; /*テキストの色*/ --color-base-text-light: #666; /*テキストの色*/ --color-base-text-midlight: #999; /*テキストの色*/ --color-base-line-dark: #CCCCCC; /*主に濃い罫線グレー*/ --color-base-line-light: #EDEDED; /*主に薄い罫線グレー*/ --color-base-bg-light: #EFEFEF; /*薄いグレー */ --color-base-main-dark: #3F2A5D; /*メインカラー　紫*/ --color-base-main-light: #ECF8FC; /*メイン薄いカラー　薄い水色*/ --color-base-main-midlight: #D9F1FB; /*メイン少し薄いカラー　薄い水色　主にボタン用 */ --color-base-accent-dark: #E10021; /*アクセントカラー　赤*/ --color-base-accent-light: #E66C00; /*アクセントカラー　オレンジ*/ --color-base-accent-coupon: #1E3C8C; /*アクセントカラー　COUPON*/ --color-base-accent-mmb: #46413C; /*ワーカーズサイトカラー　グレー*/ --color-base-accent-mmb-sub: #CDB4B4; /*ワーカーズサイトカラー　薄ピンク*/ --color-base-accent-mmb-text: #4B3728; /*ワーカーズサイトテキスト色　紅色*/ --color-base-gradation: linear-gradient(0deg, rgba(242, 242, 242, 1) 0%, rgba(255, 255, 255, 1) 100%); /*グレー */ --fontfamily-base: "Noto Sans JP", "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; --fontfamily-english: "Bodoni Moda", sans-serif; --fontfamily-english-sub: 'Roboto Condensed', sans-serif; --fontfamily-icon: "Material Symbols Outlined"; /**/ --color-goodslike: #E66C00; --inner-Max-Width: 1130px; --inner-Min-Width: 960px; --inner-Width: 90%; --box-radius-small: 5px; --box-radius-medium: 10px; --box-radius-large: 16px; --box-radius-xlarge: 20px; --box-radius-full: 50%; } html {} body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, address { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0; } address, caption, cite, code, dfn, em, th, var { font-style: normal; font-weight: normal; } li { list-style: none; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } q:before, q:after { content: ''; } abbr, acronym { border: 0; font-variant: normal; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } input, textarea, select, button { font-family: inherit; font-size: inherit; font-weight: inherit; } input, textarea, select, button { *font-size: 100%; } legend { color: #000; } img, a img { vertical-align: bottom; border: 0px; } ul, ol, li, dl, dt, dd { list-style-type: none; } table { border-collapse: collapse; } pre { white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; } /* のID名ルール施設名のアルファベットのクラス名ルール・ファイル名 */ body { background: #FFF; font-size: 90%; color: var(--color-base-text-dark); font-family: var(--fontfamily-base); line-height: 1.6em; position: relative; } a { text-decoration: none; color: var(--color-base-text-dark); transition-duration: 0.5s; } 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; } body.sp .pc_view { display: none; } .ico_new { background: url("../img/ico_new.svg") no-repeat; position: absolute; margin: 0; top: -12px; left: 0px; width: 64px; height: 56px; box-sizing: border-box; z-index: 10; overflow: hidden; text-indent: 100%; white-space: nowrap; } .ico_jobs, .ico_new2, .ico_coupon { display: inline-block; text-decoration: none; font-size: 14px; padding: 0 2px; margin: 0 0px 0 3px; vertical-align: middle; line-height: 1.6em; } .ico_jobs { color: var(--color-base-main-dark); line-height: 1em; padding: 0 0 2px; margin: 0 2px; font-size: 13px; font-weight: 500; position: relative; border-bottom: 1px solid var(--color-base-main-dark); top: -1px; } .ico_new2 { color: var(--color-base-accent-dark); font-family: var(--fontfamily-english-sub); } .ico_coupon { color: var(--color-base-accent-coupon); line-height: 1em; padding: 0 0 2px; margin: 0 4px; font-size: 13px; font-weight: 500; position: relative; border-bottom: 1px solid var(--color-base-accent-coupon); top: -1px; } span.sale { color: var(--color-base-accent-dark); } .to-top { position: fixed; bottom: 20px; right: 20px; z-index: 100; 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; } #contents { clear: both; padding: 0 0 70px; margin: 0; } #contents::after { content: ""; display: block; height: 0px; clear: both; } .inner { width: var(--inner-Width); max-width: var(--inner-Max-Width); min-width: var(--inner-Min-Width); margin: 0 auto; position: relative; } .inner::after { content: ""; display: block; height: 0px; clear: both; } #contents h2 { padding: 16px 0; margin: 0 auto; font-size: 16px; font-weight: 700; text-align: center; } #contents > h2 { border-bottom: 2px solid var(--color-base-bg-light); border-top: 1px solid var(--color-base-bg-light); } #contents-main { float: left; width: calc(100% - 320px); padding: 40px 30px; box-sizing: border-box; } #contents-main.all { width: 100%; float: none; box-sizing: border-box; padding: 30px 0; } #contents-main h3 { background: none; color: var(--color-base-main-dark); border: none; margin: 30px 0 10px; font-weight: 500; font-size: 20px; text-align: center; position: relative; box-sizing: border-box; } .pc #contents-main h3 { min-width: 260px; } #contents-main h3:before { content: ""; width: 48px; height: 2px; margin: 0 auto 16px; display: block; background: var(--color-base-main-dark); } #sub { width: 300px; float: right; box-sizing: border-box; padding: 20px 30px; } /*----------------------------------------- header部 -----------------------------------------*/ #main_header h1 { display: none; } .pc #main_header { position: relative; min-width: var(--inner-Min-Width); } .bf0 #main_header { background: #F2F2F2; } #main_header .sc_header_top_navi { width: 100%; background: var(--color-base-main-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: 0; left: 0; content: ""; width: 20px; height: 20px; display: inline-block; margin: 5px; background-image: url(../img/ico_alltop.png); background-repeat: no-repeat; background-size: contain; vertical-align: middle; } #main_header .sc_navi li.current a { background: var(--color-base-main-dark); color: #fff; } #main_header .lang_btn { position: absolute; right: 0; top: 0px; 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 10px; height: 30px; box-sizing: border-box; display: inline-block; } #main_header .lang_btn a:before { content: ""; width: 20px; height: 20px; display: inline-block; margin: 5px; background-image: url(../img/ico_global.png); background-repeat: no-repeat; background-size: contain; vertical-align: middle; } #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; } #fixed-header { position: fixed; top: -60px; width: 100%; height: 60px; text-align: center; color: #fff; background: #fff; box-sizing: border-box; transition: .5s; /* アニメーションタイミング */ z-index: 9999; } #fixed-header .inner { display: flex; height: 60px; align-items: center; } #fixed-header.is-show { top: 0; box-shadow: 0 3px 6px -4px #999; } #fixed-header .fixed-header_logo img { width: 180px; height: auto; max-width: 180px; } #fixed-header nav { width: calc(100% - 210px); margin-left: 30px; } #fixed-header ul { display: flex; margin: auto; justify-content: flex-end; } /*#fixed-header ul li { margin-left: 22px; } #fixed-header ul li:first-of-type { margin-left: 0; } #fixed-header ul li a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; font-size: 14px; position: relative; padding: 20px 0; } #fixed-header ul li a:hover { color: var(--color-base-main-dark); } @media (max-width: 1240px) { #fixed-header nav { width: calc(100% - 200px); margin-left: 20px; } #fixed-header ul li { margin-left: 20px; } #fixed-header ul li a { font-size: 13px; } } @media (max-width: 1160px) { #fixed-header ul li { margin-left: 16px; letter-spacing: -0.05em; } } @media (max-width: 960px) { #fixed-header { display: none; } }*/ #fixed-header ul li { } #fixed-header ul li:first-of-type { margin-left: 0; } #fixed-header ul li a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; font-size: 14px; position: relative; padding: 20px 10px; } #fixed-header ul li a:hover { color: var(--color-base-main-dark); } @media (max-width: 1240px) { #fixed-header nav { width: calc(100% - 200px); } #fixed-header ul li { } #fixed-header ul li a { font-size: 13px; padding: 20px 5px } } @media (max-width: 1095px) { #fixed-header ul li a { font-size: 12px; } } @media (max-width: 960px) { #fixed-header { display: none; } } /*-------- ----------------------------------------------- .header_logo ロゴ表示領域 -------------------------------------------------------*/ .header_wrap { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; height: 80px; box-sizing: border-box; } .pc .header_logo { width: 260px; height: 26px; position: absolute; left: 50%; margin-left: -130px; } @media (max-width: 1240px) { .pc .header_logo { width: 240px; height: 20px; margin-left: -120px; } } .header_logo img { /* max-width: 95%; max-height: 95%;*/ max-width: 100%; } .header_other_menu { display: flex; } .header_other_menu li a { line-height: 80px; display: block; color: var(--color-base-main-dark); } .header_other_menu li.mmb a { background: #e6e6e6; line-height: 1.3em; margin-left: 30px; padding: 20px 40px 0 30px; position: relative; min-height: 80px; box-sizing: border-box; } .header_other_menu li.gb a { font-size: 16px; font-family: var(--fontfamily-english-sub); } .header_other_menu li.mmb a::after { position: absolute; top: 0; right: 10px; font-family: var(--fontfamily-icon); content: "\e5cc"; vertical-align: middle; display: block; font-size: 20px; line-height: 80px; } /*------------------------------------------------------- グローバルメニュー ------------------------------------------------------------*/ .header_glo { border-top: 2px solid #fff; border-top: 1px solid var(--color-base-line-dark); border-bottom: 1px solid var(--color-base-line-light); } /*TOPページでは非表示*/ .pc.bf0 .header_glo { display: none; } .pc.gourmet_index .header_glo, .pc.gourmet_shoplist .header_glo{ border-bottom: none; } .pc .glo_menu_list { display: flex; justify-content: center; width: var(--inner-Width); max-width: var(--inner-Max-Width); min-width: var(--inner-Min-Width); margin: 0 auto; } .pc .glo_menu_list br { display: none; } .glo_menu_list li { /*flex-grow: 1;*/ height: 100%; box-sizing: border-box; position: relative; vertical-align: bottom; text-align: center; display: inline-block; } .glo_menu_list li:first-child { padding-left: 0; } .glo_menu_list li:last-child { padding-right: 0; } .glo_menu_list li a{ display: block; padding: 16px 20px; position: relative; } @media (max-width: 1220px) { .glo_menu_list li a { padding: 16px 14px; font-size: 14px; } } /*active設定*/ .pc .glo_menu_list li a:before{ width: 50px; height: 4px; background: var(--color-base-main-dark); display: block; position: absolute; left: calc((100% - 50px)/2); bottom: 0;} .pc .glo_menu_list li a:before, .pc #fixed-header li a:before{ width: 100%; height: 4px; background: var(--color-base-main-dark); display: block; position: absolute; left: 0; /*left: calc((100% - 50px)/2);*/ bottom: 0;} .pc.eventnews .glo_menu_list li.event a, .pc.gourmet_index .glo_menu_list li.gourmet a, .pc.gourmet_shoplist .glo_menu_list li.gourmet a, .pc.bf8 .glo_menu_list li.shop a, .pc.floor .glo_menu_list li.floor a, .pc.access .glo_menu_list li.access a, .pc.eventnews #fixed-header li.event a, .pc.gourmet_index #fixed-header li.gourmet a, .pc.gourmet_shoplist #fixed-header li.gourmet a, .pc.bf8 #fixed-header li.shop a, .pc.floor #fixed-header li.floor a, .pc.access #fixed-header li.access a{ background: #f2f2f2;} .pc.eventnews .glo_menu_list li.event a:before, .pc.gourmet_index .glo_menu_list li.gourmet a:before, .pc.gourmet_shoplist .glo_menu_list li.gourmet a:before, .pc.bf8 .glo_menu_list li.shop a:before, .pc.floor .glo_menu_list li.floor a:before, .pc.access .glo_menu_list li.access a:before, .pc.eventnews #fixed-header li.event a:before, .pc.gourmet_index #fixed-header li.gourmet a:before, .pc.gourmet_shoplist #fixed-header li.gourmet a:before, .pc.bf8 #fixed-header li.shop a:before, .pc.floor #fixed-header li.floor a:before, .pc.access #fixed-header li.access a:before{ content: "";} .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; padding: 10px 20px 0; transition: all 0.5s; } @media (max-width: 1520px) { .glo_menu_list .glo_menu_inner { padding: 10px 15px 0; } } @media (max-width: 1270px) { .glo_menu_list .glo_menu_inner { padding: 10px 10px 0; } } @media (max-width: 1120px) { .glo_menu_list .glo_menu_inner { padding: 10px 5px 0; } } 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 { content: ""; display: block; height: 24px; line-height: 1em; margin: 0 auto 10px; background-position: center; background-repeat: no-repeat; background-size: contain; } .glo_menu_list .glo_menu_inner[data-value="1"]::before { background-image: url(../img/menu/ico_topics.png); } /*TOPICS*/ .glo_menu_list .glo_menu_inner[data-value="2"]::before { background-image: url(../img/menu/ico_shopnews.png); } /*ショップニュース*/ .glo_menu_list .glo_menu_inner[data-value="3"]::before { background-image: url(../img/menu/ico_gourmet.png); } /*レストラン＆カフェ*/ .glo_menu_list .glo_menu_inner[data-value="4"]::before { background-image: url(../img/menu/ico_limited.png); } /*期間限定ショップ*/ .glo_menu_list .glo_menu_inner[data-value="5"]::before { background-image: url(../img/menu/ico_floor.png); } /*フロアガイド*/ .glo_menu_list .glo_menu_inner[data-value="6"]::before { background-image: url(../img/menu/ico_search.png); } /*ショップ検索*/ .glo_menu_list .glo_menu_inner[data-value="7"]::before { background-image: url(../img/menu/ico_openhours.png); } /*営業時間*/ .glo_menu_list .glo_menu_inner[data-value="8"]::before { background-image: url(../img/menu/ico_access.png); } /*施設情報*/ /*--------------------- 重要なおしらせ ----------------------*/ .AllPageBnr { display: flex; width: 100%; margin: 0; text-align: center; justify-content: center; } .AllPageBnr .bnr_title { display: none!important; /*jsで表示させる*/ padding: 8px 0; } .AllPageBnr .bnr_title p { color: var(--color-base-accent-dark); } .AllPageBnr .bnr_title p:before { font-family: var(--fontfamily-icon); content: "\e645"; color: #fff; border-radius: var(--box-radius-full); background: var(--color-base-accent-dark); width: 16px; height: 16px; display: inline-block; text-align: center; vertical-align: middle; margin-right: 5px; font-size: 14px; line-height: 16px; } .AllPageBnr .bnr_list { /*０件の時に完全に残らないように*/ display: none; /*jsで表示させる*/ padding: 0; border: 0; margin: 0; } .AllPageBnr .bnr_list .bnr_item { padding: 8px 0; } .pc .AllPageBnr .bnr_list .bnr_item em { margin: 0 10px; } /*緊急のおしらせ　TOP以外　other_page*/ .AllPageBnr.other_page {} .AllPageBnr .bnr_list { width: 100%; margin: 0; border: none; } .AllPageBnr .bnr_list .bnr_item { border-bottom: 1px solid var(--color-base-line-light); text-align: center; padding: 8px 0; font-size: 14px; } .bf0 .AllPageBnr .bnr_list .bnr_item{ border-bottom: none; } .AllPageBnr .bnr_list .bnr_item:nth-child(n + 2){ display: none; } .AllPageBnr .bnr_list .bnr_item em.date { display: none; } .AllPageBnr .bnr_list .bnr_item a {} .AllPageBnr .bnr_list .bnr_item:before { font-family: var(--fontfamily-icon); content: "\e645"; color: #fff; border-radius: var(--box-radius-full); background: var(--color-base-accent-dark); width: 16px; height: 16px; display: inline-block; text-align: center; vertical-align: middle; margin-right: 5px; font-size: 14px; line-height: 16px; } /*----------------------------------------------- guidenav -----------------------------------------------*/ .guidenav { margin: 40px 0; } .guidenav ul { background: var(--color-base-gradation); border: 1px solid var(--color-base-line-dark); border-radius: var(--box-radius-large); display: flex; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); overflow: hidden; } .guidenav ul li { width: calc(100% / 8); text-align: center; box-sizing: border-box; border-right: 1px solid var(--color-base-line-dark); } .guidenav ul li:last-child { border: none; } .guidenav ul li a { display: block; padding: 24px 4px 14px; color: var(--color-base-main-dark); font-size: 16px; line-height: 1.2em; letter-spacing: -0.03em; height: 100%; box-sizing: border-box; position: relative; } .guidenav ul li a:hover { opacity: 1; } .guidenav ul li a:after { content: ""; display: block; width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background: linear-gradient(0deg, rgba(63, 42, 93, 1) 0%, rgba(255, 255, 255, 0) 100%); ; opacity: 0; transition-duration: 0.5s; } .guidenav ul li a:hover:after { opacity: 0.1; } @media (max-width: 1240px) { .guidenav ul li a { font-size: 14px; } } .guidenav ul li a:before { content: ""; width: 56px; height: 56px; display: block; margin: 0 auto 12px; background-image: url("../img/ico_event.svg"); background-repeat: no-repeat; background-position: top center; } .guidenav ul li.gourmet a:before { background-image: url("../img/ico_gourmet.svg"); } .guidenav ul li.shop a:before { background-image: url("../img/ico_shop.svg"); margin-bottom: 20px; } .guidenav ul li.floor a:before { background-image: url("../img/ico_floor.svg"); margin-bottom: 20px; } .guidenav ul li.culture a:before { background-image: url("../img/ico_culture.svg"); margin-bottom: 20px; } .guidenav ul li.info a:before { background-image: url("../img/ico_info.svg"); margin-bottom: 20px; } .guidenav ul li.access a:before { background-image: url("../img/ico_access.svg"); margin-bottom: 20px; } .guidenav ul li.office a:before { background-image: url("../img/ico_office.svg"); } .pc .guidenav ul li a br.sp { display: none; } /*----------------------------------------------- footer -----------------------------------------------*/ footer { margin: 0; padding: 46px 0 0; background: var(--color-base-bg-light); } .footer_minibnr ul { display: flex; flex-wrap: wrap; } .pc .footer_minibnr ul li { width: calc((100% - 90px)/4); margin: 0 30px 30px 0; } .pc .footer_minibnr ul li:first-of-type, .pc .footer_minibnr ul li:nth-of-type(2) { width: calc((100% - 30px)/2); } .footer_minibnr ul li:nth-of-type(2), .footer_minibnr ul li:nth-of-type(4n + 2) { margin-right: 0; } .footer_minibnr ul li img { width: 100%; } .pc footer .sc_foot_desc { width: var(--inner-Width); max-width: var(--inner-Max-Width); min-width: var(--inner-Min-Width); } footer .sc_foot_desc { margin: 0 auto 48px; display: flex; flex-wrap: wrap; } footer .sc_foot_desc .footer-sc { width: 200px; text-align: center; color: var(--color-base-main-dark); } footer .sc_foot_desc .footer-sc .sc_logo { width: 140px; margin: 0 auto 14px; } footer .sc_foot_desc .footer-sc .sc_name { font-size: 16px; margin-bottom: 6px; } footer .sc_foot_desc .footer-sc .address { font-size: 12px; line-height: 1.4em; } footer .sc_foot_desc .footer_menu { width: calc(100% - 200px); display: flex; flex-wrap: wrap; padding-left: 40px; box-sizing: border-box; font-size: 16px; } footer .sc_foot_desc .footer_menu ul { width: calc(100% / 3); position: relative; } footer .sc_foot_desc .footer_menu ul:first-child:after, footer .sc_foot_desc .footer_menu ul:nth-child(2):after { content: ""; width: 1px; height: 100%; display: inline-block; background: var(--color-base-line-dark); position: absolute; right: 20px; top: 0; } footer .sc_foot_desc .footer_menu ul li { margin-bottom: 8px; margin-right: 40px; } footer .sc_foot_desc .footer_menu ul li:last-child { margin-bottom: 0; } footer .sc_foot_desc .footer_menu ul.sns_link { width: 100%; margin-top: 32px; display: flex; } footer .sc_foot_desc .footer_menu ul.sns_link li { margin-right: 10px; } footer .sc_foot_desc .footer_menu ul.sns_link a img { width: 28px; } 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: 0; left: 0; content: ""; width: 20px; height: 20px; display: inline-block; margin: 5px; background-image: url(../img/ico_alltop.png); background-repeat: no-repeat; background-size: contain; vertical-align: middle; } footer .footer_list .sc_navi li.current a { background: var(--color-base-main-dark); color: #fff; } footer .footer_list .kanren { display: flex; justify-content: center; margin-top: 16px; } footer .footer_list .kanren dd {} footer .footer_list .kanren dd ul { display: flex; justify-content: center; } footer .footer_list .kanren dd ul li a { display: inline-block; padding: 0 15px; border-right: 1px solid var(--color-base-line-dark); line-height: 1; } footer .footer_list .kanren dd ul li:last-child a { border: none; } footer .ad_foot_desc { padding: 30px 0; text-align: center; background: var(--color-base-main-dark); color: #fff; } .pc footer .ad_foot_desc > .inner { display: flex; justify-content: space-between; } footer .ad_foot_desc > .inner::after { display: none; } .pc footer .ad_foot_desc ul { display: flex; justify-content: center; } footer .ad_foot_desc ul li { margin-right: 16px; } footer .ad_foot_desc ul li:after { content: ""; width: 1px; height: 12px; background: #fff; display: inline-block; position: relative; top: 2px; } footer .ad_foot_desc ul li:last-child:after { display: none; } footer .ad_foot_desc ul li a { display: inline-block; font-size: 12px; color: #fff; margin-right: 16px; } footer .copyright { font-size: 12px; color: var(--color-base-line-dark); } /********************************** メインバナー、中バナー、小バナー関連 TOPページ、全ページフッター共通 ******************************************/ .main_banner_area { height: auto; margin: 0 auto; width: 100%; padding: 60px 0 40px; border-top: 2px solid var(--color-base-line-light); } .main_banner_area .bnr_wrap { width: var(--inner-Width); max-width: var(--inner-Max-Width); min-width: var(--inner-Min-Width); display: flex; justify-content: space-between; margin: 0 auto; } .main_banner_area .bnr_wrap #banner { width: 100%; position: relative; } .main_banner_area .bnr_wrap #banner .swiper-container { overflow: hidden; } .main_banner_area .bnr_wrap #banner ul li { width: 380px; height: 235px; overflow: hidden; } .main_banner_area .bnr_wrap #banner ul li img { width: 100%; height: auto; /* object-fit: cover; height:100%; object-position: 50% 0; */ } /*Swiperパーツの制御*/ .main_banner_area #banner .swiper-pagination { position: absolute; margin: auto; left: 0; right: 0; bottom: -30px; } .main_banner_area #banner .swiper-pagination-bullet { width: 10px; height: 10px; } .main_banner_area #banner .swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--color-base-main-dark); } /*バナー3種セット*/ #smallbanner2 .swiper-button-next, #smallbanner2 .swiper-button-prev, .main_banner_area .swiper-button-next, .main_banner_area .swiper-button-prev { position: absolute; top: 50%; width: 30px; height: 30px; margin-top: calc(0px - (30px / 2)); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.3); } #smallbanner2 .swiper-button-next, .main_banner_area .swiper-button-next { right: 0px; left: auto; } #smallbanner2 .swiper-button-prev, .main_banner_area .swiper-button-prev { left: 0px; 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: #fff; } #smallbanner2 .swiper-button-prev:after, .main_banner_area .swiper-button-prev:after { content: "\e5cb"; } /***mediumbanner****/ .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-sub); color: var(--color-base-main-dark); font-weight: 700; text-align: center; font-size: 20px; padding: 20px 0 18px; } .footer.shopsearch h4:before { content: ""; width: 48px; height: 2px; margin: 20px auto 12px; display: block; background: var(--color-base-main-dark); } .shop_catlist { background: var(--color-base-bg-light); width: 100%; max-width: 100%; min-width: 100%; margin: 0 auto; } .shop_catlist .shoplist { padding: 0 20px 30px; } .shop_catlist h4 { font-family: var(--fontfamily-english-sub); color: var(--color-base-main-dark); font-weight: 700; text-align: center; font-size: 20px; padding: 20px 0 18px; } .shop_catlist h4:before { content: ""; width: 48px; height: 2px; margin: 20px auto 12px; display: block; background: var(--color-base-main-dark); } .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: 10px 40px 10px 30px; background: #fff; border: 2px solid var(--color-base-line-dark); border-radius: 100px; display: inline-block; font-size: 14px; box-sizing: border-box; line-height: 1.4em; position: relative; } .shop_catlist ul#this_cat_shoplist li a .ico_new2, .shopnavi .search .name .ico_new2{ line-height: 1em; display: none; } .shop_catlist ul#this_cat_shoplist li a:after { position: absolute; top: calc((100% - 20px)/2); right: 4px; font-family: var(--fontfamily-icon); font-weight: normal; content: "\e5cc"; vertical-align: middle; display: block; color: var(--color-base-line-dark); font-size: 20px; } .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% / 3 - 10px); margin: 0 5px 10px; } .footer.shopsearch #cat_title_list .catttl a { display: block; width: 100%; height: 100%; border-radius: 100px; padding: 14px 25px 14px 10px; line-height: 1em; box-sizing: border-box; position: relative; border: 2px 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 { position: absolute; top: calc((100% - 14px)/2); right: 10px; font-family: var(--fontfamily-icon); font-weight: normal; content: "\e5cc"; vertical-align: middle; display: block; font-size: 20px; color: var(--color-base-line-dark); } .view .table01 { border-collapse: collapse; width: 100%; border: 2px solid var(--color-base-line-light); border-top: none; } .view .table01 tr:nth-child(odd) th, .view .table01 tr:nth-child(odd) td{ background: var(--color-base-line-light); } .view .table01 tr { /*border-bottom: 1px solid var(--color-base-line-light);*/ } /* .view .table01 tr:last-of-type { border-bottom: none; }*/ .view .table01 th { text-align: center; font-weight: bold; color: var(--color-base-main-dark); border-right: 1px solid var(--color-base-line-dark); width: 24%; } .view .table01 th, .view .table01 td { padding: 20px 30px; } .view #eventnews.catid2 .table01 .date{ display: none; } .sidemenu { border-top: 2px solid var(--color-base-main-dark); margin-top: 20px; padding: 14px 0 0; } .sidemenu dt { font-family: var(--fontfamily-english-sub); font-size: 22px; 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; border-bottom: 1px solid var(--color-base-line-dark); } .sidemenu dd > a:after { position: absolute; top: calc(50% - 10px); right: 0; font-family: var(--fontfamily-icon); font-weight: normal; content: "\e5cc"; vertical-align: middle; display: block; font-size: 20px; color: var(--color-base-line-dark); } .sidemenu dd ul { border: 2px solid var(--color-base-line-light); margin-top: -1px; position: relative; z-index: 1; } .sidemenu dd ul li { border-bottom: 1px solid var(--color-base-line-dark); } .sidemenu dd ul li:last-child { border-bottom: none; } .sidemenu dd ul li a { padding: 12px 14px; line-height: 1.5em; display: block; font-size: 95%; } .sidemenu dd:last-child ul li:last-child { margin-bottom: 10px; } .sidemenu span.num { font-family: var(--fontfamily-english-sub); 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: 20px; } #sub .sc_facility #sc_map { height: 190px; width: 100%; margin: 10px 0; background: var(--color-base-bg-light); border: 2px 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: 10px 0; margin: 10px 0 0; line-height: 1.4em; font-weight: bold; border-radius: 100px; position: relative; } #sub .sc_facility dd a.access_link:after { position: absolute; top: calc(50% - 9px); right: 6px; font-family: var(--fontfamily-icon); font-weight: normal; content: "\e5cc"; vertical-align: middle; display: block; font-size: 20px; color: var(--color-base-line-dark); } #sub #sub-navi02 { margin-bottom: 16px; } #sub #sub-navi02 ul { border: 1px solid #aaa; border-radius: 0px; overflow: hidden; } #sub #sub-navi02 ul li { border-bottom: 1px solid #aaa; } #sub #sub-navi02 ul li:last-child { border: none; } #sub #sub-navi02 ul li a { display: block; text-align: center; padding: 10px 0; position: relative; } #sub #sub-navi02 ul li a:after { content: ""; display: block; position: absolute; top: 38%; width: 0; height: 0; border: 5px solid transparent; left: 92%; border-left: 6px solid var(--color-base-accent-dark); } #sub #sub-navi02 ul li.cal .fa { color: var(--color-base-accent-dark); font-size: 1.2em; margin-right: 0.4em; } #sub .bnr-sns { margin-bottom: 16px; } #sub .bnr-sns li a { display: block; padding: 10px; text-align: center; color: #fff; font-size: 2.2em; position: relative; } #sub .bnr-sns li a:after { content: ""; display: block; position: absolute; top: 38%; width: 0; height: 0; border: 5px solid transparent; left: 92%; border-left: 6px solid #fff; } #sub .bnr-sns li a:hover { opacity: 0.9; } #sub .bnr-sns li a span { display: none; } #sub .bnr-sns li.bnr_fb a { background: #5890ff; } #sub .bnr-sns li.bnr_tw a { background: #00acee; } #sub .bnr-sns li.bnr_inst a { background: #E54060; } #sub .bnr-sns li.bnr_line a { background: #06C755; } #sub #banner_mini ul { border: 1px solid #aaa; padding: 16px; border-radius: 0px; overflow: hidden; } #sub #banner_mini ul li { margin: 0 0 8px; } #sub #banner_mini ul li:last-child { margin: 0; } .sidemenu .side_shoplist dt { font-size: 14px; cursor: pointer; padding: 7px 0; } .sidemenu .side_shoplist dt:after { font-family: var(--fontfamily-icon); content: "\e147"; display: inline-block; padding-left: 5px; } .sidemenu .side_shoplist dt.up:after { font-family: var(--fontfamily-icon); content: "\e5c9"; } .sidemenu .side_shoplist dd ul li a::before { font-family: var(--fontfamily-icon); content: "\e5e1"; margin: 0 0 0 4px; color: var(--color-base-accent-dark); vertical-align: middle; } #h4_shopsearch_tag { padding: 30px 0 20px; border-top: 2px 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: #fff; display: block; font-size: 14px; border: 1px solid var(--color-base-line-dark); 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 20px; border-radius: 100px; font-weight: bold; line-height: 1.0em; border: 2px 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-sub); font-size: 20px; font-weight: 700; 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; padding: 10px; text-align: center; width: 50px; height: 50px; } .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: 250px; position: static; margin: 0; display: block; position: absolute; bottom: 6px; } .goods_like_btn.mini p { display: inline-block; padding: 0; text-align: center; width: auto; height: auto; font-size: 0.8em; line-height: 1em; color: var(--color-base-accent-light); } .goods_like_btn.mini p i { display: inline-block; font-size: 20px; color: var(--color-base-accent-light); font-variation-settings: 'FILL'1; vertical-align: middle; } .goods_like_btn.mini p span { display: inline-block; font-size: 16px; line-height: 1.2em; font-weight: 700; font-family: var(--fontfamily-english-sub); 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-base-accent-light); 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-base-accent-light); 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-bg-light); margin-bottom: 10px; } .shop_header .inner { background: #fff; margin: 0 auto 0; } .shop_header #shop_title { position: relative; padding: 24px 30px 18px 40px; box-sizing: border-box; justify-content: space-between; } .shop_header .inner #shop_title .bg_shop_image { position: absolute; right: 0; top: 0; display: block; width: 60%; height: 100%; background-position: center; background-size: cover; z-index: 1; } .shop_header .inner #shop_title .bg_shop_image:before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 40%; height: 100%; background: 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: 50%; position: relative; z-index: 10; } .shop_header #shop_title .top_logo { margin: 20px 0 0; } .shop_header .inner #shop_title .top_logo img { max-height: 60px; } .shop_header #shop_title .category_detail { display: inline-block; font-size: 16px; color: var(--color-base-main-dark); } .shop_header #shop_title h2 { font-size: 24px; font-weight: bold; line-height: 30px; /*共通スタイルを無効か*/ padding: 0; margin: 0; border: none; margin: 2px 0 0; text-align: left; background: none; } .shop_header #shop_title .top_logo img { max-height: 60px; } .shop_header .shopmenu { position: absolute; right: 20px; bottom: 20px; z-index: 10; background: var(--color-base-gradation); border: 1px solid var(--color-base-line-dark); border-radius: var(--box-radius-large); display: flex; overflow: hidden; } .shop_header .shopmenu li { width: calc(100% / 3); margin: 0; position: relative; border-right: 1px solid var(--color-base-line-dark); box-sizing: border-box; } .shop_header .shopmenu li:last-child { border-right: none; } .shop_header .shopmenu.no_news li, .shop_header .shopmenu.no_recruit li { width: 50%; } .shop_header .shopmenu.no_news.no_recruit li { width: 100%; } .shop_header .shopmenu li a { display: block; box-sizing: border-box; width: 120px; height: 100px; color: var(--color-base-main-dark); text-align: center; padding: 26px 0 0; line-height: 1.2em; font-size: 16px; font-weight: 500; position: relative; } .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: 20px; color: var(--color-base-line-dark); position: absolute; width: 100%; bottom: 10px; left: 0; } .shop_header .shopmenu li a:before { content: ""; display: block; width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background: linear-gradient(0deg, rgba(63, 42, 93, 1) 0%, rgba(255, 255, 255, 0) 100%); opacity: 0; transition-duration: 0.5s; } .shop_header .shopmenu li a:hover:before { opacity: 0.1; } .shop_header .shopmenu li a span { display: block; } .shop_header #shop_status { min-height: 100px; font-size: 16px; border-top: 1px solid var(--color-base-line-light); border-bottom: 1px solid var(--color-base-line-light); background: #fff; } .shop_header #shop_status .eigyouhour, .shop_header #shop_status .tel_floor { min-height: 50px; box-sizing: border-box; } .shop_header #shop_status .eigyouhour { border-bottom: 1px solid var(--color-base-line-light); } .shop_header #shop_status .eigyouhour p, .shop_header #shop_status .tel_floor p { padding: 14px 30px; width: calc(100% - 470px); } .shop_header #shop_status .eigyouhour p { white-space: pre-wrap; padding: 14px 30px 14px 76px; position: relative; } .shop_header #shop_status .tel_floor { display: flex; } .shop_header #shop_status .tel_floor .tel { width: 30%; padding: 14px 30px 14px 76px; position: relative; } .shop_header #shop_status .eigyouhour p.hour:before, .shop_header #shop_status .tel_floor p.tel:before, .shop_header #shop_status .tel_floor p.floor:before { font-family: var(--fontfamily-icon); font-variation-settings: 'FILL'0; font-size: 26px; vertical-align: bottom; width: 40px; display: inline-block; text-align: center; color: var(--color-base-main-dark); } .shop_header #shop_status .tel_floor p.floor { width: calc(70% - 500px); border-left: 1px solid var(--color-base-line-light); } .shop_header #shop_status .eigyouhour p.hour:before { content: "\e8b5"; padding-right: 5px; font-variation-settings: 'FILL'1; position: absolute; top: 16px; left: 30px; } .shop_header #shop_status .tel_floor p.tel:before { content: "\e9cd"; font-variation-settings: 'FILL'1; position: absolute; top: 16px; left: 30px; } .shop_header #shop_status .tel_floor p.floor:before { content: "\e53b"; font-variation-settings: 'FILL'1; } /*個別ニュース、クーポン、リクルート　ページのヘッダーを調整*/ 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: 10px; bottom: 10px; 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 .*/ .bf1 #contents { padding-bottom: 0; } .bf1 #contents-main.all { padding-top: 0; } .view #shoppage #shop_info { padding: 0 0 40px; } #shoppage #shop_info .intro { padding: 40px; margin-bottom: 30px; overflow: hidden; border: 2px solid var(--color-base-line-light); display: flex; flex-direction: row-reverse; align-items: center; } #shoppage #shop_info .desc { width: 60%; font-size: 1.1em; line-height: 1.5em; margin: 0 0 5px 5px; } #shoppage #shop_info .desc h4 { margin: 0 0 30px; font-size: 24px; font-weight: 500; line-height: 1.4em; color: var(--color-base-main-dark); } #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; } #shoppage #shop_info .image img { border-radius: 0px; width: 100%; } #shoppage #shop_info .pickup { margin: 0 0 30px; display: flex; flex-wrap: wrap; font-size: 16px; } #shoppage #shop_info .pickup div { width: calc((100% - 16px) /2); padding: 30px; overflow: hidden; background: var(--color-base-bg-light); box-sizing: border-box; display: flex; align-items: center; } .pc #shoppage #shop_info .pickup div.shop-tel { margin-left: 16px; } #shoppage #shop_info .pickup div.shop-tel p { white-space: normal; } #shoppage #shop_info .pickup div.shop-tokuten { width: 100%; margin-top: 16px; } #shoppage #shop_info .pickup h5 { width: 150px; color: var(--color-base-main-dark); position: relative; } #shoppage #shop_info .pickup .shop-tokuten h5 { width: 210px; } #shoppage #shop_info .pickup h5:before { font-family: var(--fontfamily-icon); font-variation-settings: 'FILL'1; margin: 0 10px 0 0; font-size: 22px; vertical-align: bottom; } #shoppage #shop_info .pickup h5:after { content: ""; width: 1px; height: 24px; background: var(--color-base-main-dark); display: inline-block; position: absolute; top: calc((100% - 24px)/2); right: 20px; } #shoppage #shop_info .pickup .shop-eigyouhour h5:before { content: "\e8b5"; } #shoppage #shop_info .pickup .shop-tel h5:before { content: "\e9cd"; font-variation-settings: 'FILL'1; } #shoppage #shop_info .pickup .shop-tokuten h5:before { content: "\e8b1"; } #shoppage #shop_info .pickup p { width: calc(100% - 150px); white-space: pre-wrap; } #shoppage #shop_info .pickup .shop-tokuten p { width: calc(100% - 210px); } #shoppage #shop_info .data { clear: both; padding: 0; border: 2px solid var(--color-base-line-light); border-top: none; border-bottom-width: 1px; } #shoppage #shop_info table.table01 { border: none; } #shoppage #shop_info table.table01 tr:nth-child(odd) { background: var(--color-base-line-light); } #shoppage #shop_info table.table01 th, #shoppage #shop_info table.table01 td { padding: 20px 30px; } #shoppage #shop_info table.table01 .shop-generic1 td, #shoppage #shop_info table.table01 .shop-gourmet2 td { padding-bottom: 14px; } #shoppage #shop_info .data table.table01 td em { margin: 0 4px 4px 0; display: inline-block; font-size: 14px; padding: 6px 10px; box-sizing: border-box; line-height: 1.0em; border-radius: var(--box-radius-small); } #shoppage #shop_info .data table.table01 td em[class*="payment"] { padding: 6px 0; } #shoppage #shop_info .data table.table01 tr.shop-generic1 em, #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em, #shoppage #shop_info .data table.table01 tr.shop-generic11 em { font-size: 14px; padding: 8px 12px; margin: 0 6px 6px 0; line-height: 1em; color: var(--color-base-main-dark); border: 1px solid var(--color-base-main-dark); border-radius: var(--box-radius-xlarge); background: #fff; } #shoppage #shop_info .data table.table01 tr.shop-generic1 em:before, #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em:before, #shoppage #shop_info .data table.table01 tr.shop-generic11 em:before { font-family: var(--fontfamily-icon); font-weight: normal; font-size: 20px; font-variation-settings: 'FILL'1; vertical-align: middle; margin: 0 3px 0 0; position: relative; top: -1px; } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment1:before { content: "\e870"; } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment2:before { content: "\e325"; } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment3:before { content: "\e570"; } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment4:before { content: "\e25c"; } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment5:before { content: "\e00a"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service1:before { content: "\eb4f"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service2:before { content: "\eff4"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service3:before { content: "\e0b0"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service4:before { content: "\e531"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service5:before { content: "\ea74"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service6:before { content: "\e518"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service7:before { content: "\f6d6"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service8:before { content: "\ea65"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service9:before { content: "\e903"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.servicea:before { content: "\e8f9"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.serviceb:before { content: "\eb41"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.servicec:before { content: "\e51c"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.serviced:before { content: "\eb4b"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.servicee:before { content: "\eb4a"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet3 em { /* background: #f0e5f1; color: #7974AC;*/ } #shoppage #shop_info .data table.table01 tr.shop-gourmet3 em:before { font-family: var(--fontfamily-icon); font-weight: normal; content: "\eb4b"; font-size: 20px; vertical-align: middle; margin: 0 3px 0 0; } #shoppage #shop_info .data table.table01 tr.shop-gourmet3 em.smoking1:before { content: "\eb4a"; } #shoppage #shop_info .data table.table01 tr.shop-generic11 em.service1:before { content: "\ea67"; } #shoppage #shop_info .data table.table01 tr.shop-generic11 em.service2:before { content: "\e53f"; } #shoppage #shop_info .data table.table01 tr.shop-generic11 em.service3:before { content: "\e531"; } #shoppage #shop_info .data table.table01 td span.attention { display: block; font-size: 10px; } /*white-space: preのオプション*/ .shop-eigyouhour td p, .shop-tokuten td p { white-space: pre-wrap; } #shoppage #shop_info table.table01 th { vertical-align: middle; font-weight: 700; text-align: left; 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 { display: inline-block; background: var(--color-base-main-dark); border-radius: var(--box-radius-xlarge); color: #fff; font-weight: normal; margin-left: 30px; padding: 2px 40px 4px; text-decoration: none; text-align: center; vertical-align: middle; height: 20px; text-transform: uppercase; position: relative; font-family: var(--fontfamily-english-sub); font-size: 14px; top: -2px; } #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: 8px; top: 2px; } #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 .shopBooking-wrapper { display: flex; justify-content: center; align-items: center; width: 90%; margin: 0 auto; } #shoppage #shop_info .shopBooking-wrapper a { border: 2px solid var(--color-base-accent-light); color: var(--color-base-accent-light); border-radius: 40px; font-size: 16px; padding: 10px; margin: 0 10px 40px 0; width: calc((100% - 20px) /2); text-align: center; position: relative; } #shoppage #shop_info .shopBooking-wrapper a:after { font-family: var(--fontfamily-icon); content: "\f8ce"; vertical-align: middle; font-size: 18px; position: absolute; bottom: calc((100% - 26px)/2); right: 12px; } #shoppage #shop_info .shopBooking-wrapper a:hover { background: var(--color-base-accent-light); color: #fff; } #shoppage #shop_info .shopBooking-wrapper a:last-child { margin-right: 0; } /*WEB予約ボタン｜サイト名出す*/ .shopBooking__btn[href*="gnavi"] .brandsArea::after { content: "(ぐるなび)"; } .shopBooking__btn[href*="tabelog"] .brandsArea::after { content: "(食べログ)"; } .shopBooking__btn[href*="loco"] .brandsArea::after { content: "(Yahoo!ロコ)"; } .shopBooking__btn[href*="ikyu"] .brandsArea::after { content: "(一休.comレストラン)"; } .shopBooking__btn[href*="epark"] .brandsArea::after { content: "(EPARK)"; } .shopBooking__btn[href*="hotpepper"] .brandsArea::after { content: "(ホットペッパーグルメ)"; } .shopBooking__btn[href*="favy"] .brandsArea::after { content: "(favy)"; } .shopBooking__btn[href*="toreta"] .brandsArea::after { content: "(トレタ)"; } .shopBooking__btn[href*="ozmall"] .brandsArea::after { content: "(オズモール)"; } .shopBooking__btn[href*="retty"] .brandsArea::after { content: "(Retty)"; } .shopBooking__btn[href*="luxa"] .brandsArea::after { content: "(LUXA)"; } .shopBooking__btn[href*="hitorsara"] .brandsArea::after { content: "(ヒトサラ)"; } #shoppage #shop_info .siteurl { position: relative; text-align: center; padding: 20px; border: 2px solid var(--color-base-line-light); border-top: none; } #shoppage #shop_info .siteurl p { width: 24%; display: inline-block; box-sizing: border-box; padding: 0 5px; margin: 0; } #shoppage #shop_info .siteurl p a { display: block; padding: 10px 28px 10px 10px; text-align: center; width: 100%; box-sizing: border-box; border-radius: 40px; font-weight: 500; position: relative; color: var(--color-base-main-dark); border: 2px solid var(--color-base-main-dark); } #shoppage #shop_info .siteurl p a i { font-size: 20px; margin: 0 10px 0 4px; font-weight: normal; vertical-align: top; } #shoppage #shop_info .siteurl p a:after { font-family: var(--fontfamily-icon); content: "\f8ce"; vertical-align: middle; font-size: 18px; position: absolute; bottom: 8px; right: 12px; font-weight: normal; } #shoppage #shop_info .siteurl p.shop-url a { border-color: var(--color-base-main-dark); } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a:before { content: "公式SNS"; } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="facebook"] { border-color: #5890ff; color: #5890ff; } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="facebook"]:before { content: "Facebook"; } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="instagram"] { border-color: #833AB4; color: #833AB4; } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="instagram"]:before { content: "instagram"; } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="twitter"] { border-color: #000; color: #000; } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="twitter"]:before { content: "X(Twitter)"; } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="youtube"] { border-color: var(--color-base-accent-dark); color: var(--color-base-accent-dark); } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="youtube"]:before { content: "YouTube"; } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="lin.ee"], #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="line.me"] { border-color: #06c755; color: #06c755; } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="lin.ee"]:before, #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="line.me"]:before { content: "LINE"; } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="tiktok"] { border-color: #000; color: #000; } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="tiktok"]:before { content: "TikTok"; } #shoppage #shop_info .data .shop-generic2 {} #shoppage #shop_info .data table.table01 .shop-generic2 td em { display: block; } #shoppage #shop_info .data .shop-generic2 td .payment1, #shoppage #shop_info .data .shop-generic2 td .payment4 { color: var(--color-base-accent-dark); } #shoppage #shop_info .data .shop-generic2 td .payment1:before, #shoppage #shop_info .data .shop-generic2 td .payment4: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: 10px; vertical-align: middle; } #shoppage #shop_info .data .shop-generic2 td .payment2:before { background-image: url("../img/ico-mark-jrepoint.png"); } #shoppage #shop_info .data .shop-generic2 td .payment3:before { background-image: url("../img/ico-mark-suica.png"); } /*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 { min-width: 260px; background: none; border: none; margin: 30px 0 16px; padding: 10px 16px; font-weight: 500; font-size: 22px; letter-spacing: 0.05em; text-align: center; position: relative; box-sizing: border-box; color: var(--color-base-main-dark); } #cat1_view h3:before, #cat3_view h3:before, .view #shop_info h3:before { content: ""; width: 48px; height: 2px; margin: 0 auto 18px; display: block; background: var(--color-base-main-dark); } #contents-main article.main.item h3 { color: var(--color-base-main-dark); margin-top: 0; } /* #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; } #cat5_view h3 { width: 200px; border: 0; padding: 0; margin: 0; font-family: var(--fontfamily-english); font-weight: bold; font-size: 22px; background: none; } #cat5_view .cat5_view_today { color: var(--color-base-accent-dark); } #cat5_view article.item { width: calc(100% - 215px); margin-left: 15px; position: relative; background: #fff; border-radius: 0px; border: 1px solid var(--color-base-line-dark); } #cat5_view article.item:before, #cat5_view article.item:after { 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-line-dark); border-width: 10px; margin-top: -10px; } #cat5_view article.item:after { border-right-color: #fff; border-width: 9px; margin-top: -9px; } #cat5_view article.item h4 { padding: 20px 25px; color: #777; } #cat5_view article.item h4 .item_main { font-weight: bold; color: #000; } /**/ #cat1_view { overflow: hidden; margin: 0 0 36px; } .item_coupon #cat1_view.cat_items > .inner { width: 100%; padding: 0; } #cat1_view article.item { width: 50%; width: calc((100% - 40px) /2); float: left; margin: 0 0 40px; padding: 0; box-sizing: border-box; position: relative; height: auto; } #cat1_view article.item:nth-of-type(odd) { margin-right: 40px; } .cat_items article.item .image, .bf5 article.item .image { width: 230px; height: 230px; text-align: center; overflow: hidden; position: relative; box-sizing: border-box; } .cat_items article.item .image { float: left; margin: 0 20px 0 0; } .cat_items article.item.cat3 .image, .bf5 article.item .image { margin: 0; position: absolute; right: 30px; top: 30px; } .cat_items article.item .ico_new { top: -10px; right: auto; left: 0; } .cat_items article.item .image a { color: var(--color-base-accent-dark); } .cat_items article.item .image img, .bf5 article.item .image img { height: 100%; box-sizing: border-box; max-width: none; } .cat_items article.item .item_image_noimg { background-size: 70%; position: relative; border: 2px solid var(--color-base-line-light); } .cat_items article.item .item_image_noimg img { position: absolute; width: 70%; height: auto; margin: auto; left: 0; right: 0; bottom: 0; top: 0; } /*各ニュース・クーポン・求人情報にショップ名読込⇒標準で非表示*/ 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: 4px; } .cat_items article.item .desc h4 a { font-weight: 500; font-size: 22px; line-height: 1.4em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .cat_items article.item.cat2 .desc h4 a { /*display: block;*/ } .cat_items article.item .desc .price { padding: 4px 0; font-size: 16px; font-weight: 700; line-height: 150%; word-break: break-all; color: var(--color-base-main-dark); } .cat_items article.item .desc .date, .cat_items article.item .desc .price_date, article.shopnewsitem .date, article.recruititem .date { font-size: 16px; font-family: var(--fontfamily-english-sub); line-height: 1em; margin: 0 0 0.5em; color: #777; font-weight: 500; } /* @media screen and (max-width: 767px) { .cat_items article.item .desc .date, .cat_items article.item .desc .price_date, article.shopnewsitem .date, article.recruititem .date { font-size: 11px; } } */ /*sale時*/ #cat1_view article.item.sale .price { color: var(--color-base-accent-dark); } /*****もっと見るボタン[汎用]*****/ .morelink { top: 0; left: 0; width: 100%; height: 100%; position: absolute; } .morelink span { display: inline-block; font-family: var(--fontfamily-english-sub); 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 { position: absolute; top: 0; right: 0; font-family: var(--fontfamily-icon); font-weight: normal; content: "\e5cc"; vertical-align: middle; display: block; color: var(--color-base-line-dark); font-size: 20px; } /******もっと見るボタン[汎用]以上*****/ /*.cat3_view article.item .morelink, #cat3_view article.item .morelink { position: static; }*/ /* クーポン表示関連：①もっと見るボタン　②クーポン強調表示(フキダシ) */ #cat1_view .item.cat2 .desc h4::before { /*フキダシ中身*/ content: "COUPON"; display: inline-block; font-weight: bold; line-height: 1em; margin: 0 0 6px 0; font-family: var(--fontfamily-english-sub); color: var(--color-base-accent-coupon); border-bottom: 1px solid var(--color-base-accent-coupon); } /*画像がないときはフキダシを消す*/ /*#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; margin: 0; padding: 30px; padding-right: 300px; min-height: 295px; box-sizing: border-box; border: 2px solid var(--color-base-line-light); display: flex; flex-wrap: wrap; align-content: center; cursor: pointer; transition-duration: 0.5s; } .cat3_view article.item:hover, #cat3_view article.item:hover { background: rgba(237, 237, 237, 0.5); } .cat3_view article.item, #cat3_view article.item:nth-of-type(n + 2) { border-top: none; } .cat3_view article.item.noimg, #cat3_view article.item.noimg { min-height: 130px; padding: 40px 30px; } .cat3_view article.item .date, #cat3_view article.item .date { width: 100%; font-size: 16px; font-family: var(--fontfamily-english-sub); line-height: 1em; margin: 0 30px 10px 0; color: var(--color-base-text-light); display: inline-block; } @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 { font-weight: 500; font-size: 24px; margin-bottom: 14px; line-height: 1.4em; margin-right: 30px; color: var(--color-base-main-dark); } .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%; float: left; } .cat3_view article.item table, #cat3_view article.item table { display: none; width: -webkit-calc(100% - 290px); width: calc(100% - 290px); margin-top: 30px; font-size: 16px; } #cat3_view article.item table th { background: none; } #cat3_view article.item table tr:nth-child(odd) { background: var(--color-base-bg-light); } .cat3_view article.item table td, #cat3_view article.item table td { width: 84%; } .cat3_view article.item .morelink, #cat3_view article.item .morelink, .cat3_view article.item .morelink span, #cat3_view article.item .morelink span { position: static; } .cat3_view article.item .morelink, #cat3_view article.item .morelink { display: block; width: -webkit-calc(100% - 290px); width: calc(100% - 290px); } .cat3_view article.item .morelink span, #cat3_view article.item .morelink span { width: 170px; line-height: 22px; padding-top: 2px; text-align: center; font-family: var(--fontfamily-english-sub); position: relative; border: 2px solid var(--color-base-line-light); border-radius: 100px; color: var(--color-base-text-midlight); transition-duration: 0.5s; } .cat3_view article.item.noimg .morelink, #cat3_view article.item.noimg .morelink { width: 100%; } .cat3_view article.item .morelink span em, #cat3_view article.item .morelink span em { display: block; } .cat3_view article.item:hover .morelink span, #cat3_view article.item:hover .morelink span { background: rgba(255, 255, 255, 0.5); border-color: #e5e5e5; } .cat3_view article.item { margin-bottom: 40px; border: 2px solid var(--color-base-line-light); } body.index.bf5 div#recruit .cat3_view article.item table.table01 { display: table; width: 100%; margin: 10px 0 20px; border-top: 2px solid var(--color-base-line-light); } .cat3_view article.item table th, .cat3_view article.item table td { background: #fff; padding: 10px 20px; text-align: left; } body.index.bf5 .cat3_view article.item table tr:nth-child(odd) th, body.index.bf5 .cat3_view article.item table tr:nth-child(odd) td{ background: #fff; } .cat3_view article.item table tr:not(:first-of-type) th, .cat3_view article.item table tr:not(:first-of-type) td { border-top: 1px solid var(--color-base-line-dark); } .cat3_view article.item table th { width: 6em; } .cat3_view article.item table td { width: calc(100% - 6em); } .sale.icon, .newgoods_conf #goods_title.formitem .sale, .cat_items article.item .desc .sale { display: inline-block; font-weight: bold; line-height: 1em; margin: 0 6px 2px 0; font-family: var(--fontfamily-english-sub); color: var(--color-base-accent-dark); border-bottom: 1px solid var(--color-base-accent-dark); } .cat_items article.item .goodscomment { display: none; /* overflow: hidden; white-space: nowrap; text-overflow: ellipsis; */ } .cat_items article.item .read_more { position: absolute; bottom: 0; right: 0; border: 2px solid var(--color-base-line-light); border-radius: 100px; } .cat_items article.item .read_more a { width: 170px; line-height: 24px; display: block; text-align: center; color: var(--color-base-text-midlight); font-family: var(--fontfamily-english-sub); position: relative; } @media screen and (max-width: 1200px) { .cat_items article.item .read_more a { width: 120px; } } .cat_items article.item .read_more a:after { position: absolute; top: 0; right: 0; font-family: var(--fontfamily-icon); content: "\e5cc"; vertical-align: middle; display: block; color: var(--color-base-line-dark); font-size: 20px; } .cat_items article.item .read_more a:hover { background: var(--color-base-line-light); } .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: 0; } .cat_items article.item .desc .fromto dt { display: inline; margin-right: 5px; } .pc .cat_items article.item .desc .fromto dt:after { content: "："; display: inline; } .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_****** --------------------------------------------- */ /*全体*/ .item_news #contents, .item_coupon #contents, .item_recruit #contents { margin-bottom: 0; padding-bottom: 0; } .shopnewsitem.item {} .shopnewsitem.item, .other_news { width: 900px; padding: 0 0; margin: 10px 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 10px; } .shopnewsitem.item.noimg .imgarea { display: none; } /*アイテム一覧　メイン画像*/ .shopnewsitem .slick-list { margin: 0 0 10px; } .shopnewsitem .main_img { height: 500px; } .shopnewsitem .main_img img { display: block; margin: 10px auto 0; top: 0; position: relative; max-height: 100%; } .shopnewsitem .main_img img { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } /*アイテム一覧　サムネイル画像*/ .shopnewsitem .thum_imgs { width: 600px; margin: 0 auto; } .shopnewsitem .thum_img { width: 120px; height: 120px; border: 4px solid transparent; border-radius: 0px; margin: 0 10px 20px; overflow: hidden; box-sizing: border-box; } .shopnewsitem .thum_img span { display: block; width: 112px; height: 112px; background-position: center; background-repeat: no-repeat; background-size: cover; margin: 0 auto; cursor: pointer; } .shopnewsitem .thumb-current { border: 4px solid #fff; box-shadow: 0 3px 6px -4px #999; } .shopnewsitem .thumb-current span { opacity: 0.5; } .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: 34px; } .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: var(--color-base-accent-dark); } .shopnewsitem .desc .goodscomment { border-top: 2px 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-main-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: rgba(230, 108, 0, 0.2); padding-top: 20px; height: 120px; } .shopnewsitem .goods_like_btn:before { font-family: var(--fontfamily-english-sub); font-size: 18px; font-weight: 700; content: "LIKE IT!"; margin-bottom: 8px; display: block; color: var(--color-base-text-dark); } .shopnewsitem .goods_like_btn p { display: inline-block; padding: 0 0 20px; text-align: center; font-weight: bold; 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; border: 2px solid var(--color-base-bg-light); margin: 0 80px 20px 0; width: calc(40% - 90px); height: 120px; } /*アイテム1記事の際のほかのアイテム一覧でいいねボタン非表示*/ body.item_news .goods_like_btn.mini p { /*display: none;*/ } /*セール*/ .shopnewsitem.cat1.sale .sale.icon { line-height: 28px; height: 25px; font-size: 19px; padding: 0; text-align: center; border-bottom: 1px solid var(--color-base-accent-dark); } /*クーポン*/ .shopnewsitem.cat2 .desc { border: 2px solid var(--color-base-bg-light); width: 740px; margin: 0 80px 40px; padding: 40px 40px 20px; box-sizing: border-box; position: relative; min-height: 300px; } /*.shopnewsitem.cat2 .desc:before { content: "Coupon!"; position: absolute; top: -15px; right: calc(50% - 60px); background: $KEY_COLOR_2; width: 120px; border-radius: 100px; text-align: center; font-family: $FONT_FAMILY_EN; font-weight: bold; color: #fff; height: 25px; font-size: 18px; } */ .shopnewsitem.cat2 .desc h4 { margin: 0; padding: 0 0 16px; color: var(--color-base-accent-coupon); 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; 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: 50%; color: var(--color-base-accent-coupon); border: 2px solid var(--color-base-accent-coupon); display: block; padding: 20px; box-sizing: border-box; line-height: 16px; font-size: 18px; text-align: center; margin: 16px auto; border-radius: 100px; } .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: 20px; line-height: 1.5em; border: 2px solid var(--color-base-bg-light); } .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: 10px 0 40px; } .recruititem.item.cat3 th { width: 30%; padding: 20px 30px; text-align: left; font-weight: 700; } .recruititem.item.cat3 td { padding: 20px 30px; } .other_jobs .cat_items h3 { display: none; } #contents-main .other_jobs h3 { border: none; font-weight: 700; font-size: 20px; padding: 20px 0 10px; 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 { display: inline-block; padding: 14px 30px 14px 40px; font-size: 14px; line-height: 1.4em; border-radius: 40px; background: var(--color-base-bg-light); position: relative; font-weight: normal; } .return_shop a:before { font-family: var(--fontfamily-icon); content: "\e5cb"; vertical-align: middle; position: absolute; top: calc(50% - 10px); left: 14px; font-size: 20px; color: var(--color-base-line-dark); } /* --------------------------------------------- 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: 2px 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-sub); font-weight: 700; letter-spacing: 1px; } div#goodslist-header-navi dt, div#goodslist-header-navi dd { margin: 0 0 12px; color: #FFF; position: relative; text-align: center; padding: 2px 12px; } #goodslist-header-navi dl dt, #goodslist-header-navi dl dd { box-sizing: border-box; text-decoration: none; display: block; position: relative; font-size: 14px; border-left: 1px solid var(--color-base-line-light); } #goodslist-header-navi dl dd:last-of-type { border-right: 1px solid var(--color-base-line-light); } #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); border-bottom: 1px solid var(--color-base-main-dark); font-weight: bold; } .pc #goodslist-header-navi dl dt.current a, .pc #goodslist-header-navi dl dd.current a { box-sizing: border-box; padding-bottom: 2px; } #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, .md_cat_list #contents-main .NewsItemList#items{ display: flex; flex-wrap: wrap; } #contents-main .NewsItemList .item { box-sizing: border-box; width: calc(100% / 3); padding: 16px 20px 30px; margin: 10px 0 20px; position: relative; } #contents-main .NewsItemList .item .news_box .gcat_badge { display: none; } /*#contents-main .NewsItemList .item.cat2 .news_box .image*/ #contents-main .NewsItemList .item.cat2 h3.goods:before { content: "COUPON"; display: inline-block; font-weight: bold; line-height: 1em; margin: 0 6px 2px 0; font-family: var(--fontfamily-english-sub); color: var(--color-base-accent-coupon); border-bottom: 1px solid var(--color-base-accent-coupon); width: auto; height: auto; background: none; } #contents-main .NewsItemList .item .image { height: 320px; position: relative; margin: 4px 0 0; border: 2px solid var(--color-base-line-light); 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-sub); line-height: 1em; margin: 0.5em 0 0; font-weight: 500; color: #777; } #contents-main .NewsItemList .item .date .ico_new2 { line-height: 1em; } @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 h3.goods:before { display: none; } #contents-main .NewsItemList .item .price { font-weight: bold; padding-right: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #contents-main .NewsItemList .item.sale .price { color: var(--color-base-accent-dark); } #contents-main .NewsItemList .item.cat2 .price { display: none; } #contents-main .NewsItemList .item .name { padding-top: 6px; padding-right: 80px; line-height: 14px; } #contents-main .NewsItemList .item .name a { font-size: 90%; font-weight: 500; } .pc #contents-main .NewsItemList .item .goods_like_btn.mini { bottom: 0; left: 20px; margin: 0; } .pc #contents-main .NewsItemList .item .goods_like_btn.mini p { background: #fffc; } #contents-main #goodslist .price_date { font-size: 10px; padding: 10px; } #contents-main .NewsItemList .item .morelink { display: none; } /*NewsItemListを基本にしつつsale表示変更*/ body.sale #contents h2 { background: var(--color-base-accent-dark); 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: var(--color-base-text-dark); padding: 12px; font-size: 16px; border-radius: 100px; 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 #contents-main .search h3 { margin-bottom: 20px; } body.index .search #search-all { clear: both; } body.index .search .search_block { margin: 0 0 32px; } body.index .search .search_block { overflow: hidden; } body.index .search .search_block ul { display: flex; justify-content: left; flex-wrap: wrap; } body.index .search .search_block li { width: calc(100% / 3 - 16px); margin: 0 8px 16px; display: block; border-radius: 0px; } body.index .search .search_block li a { display: block; width: 100%; height: 100%; padding: 16px 35px 16px 10px; box-sizing: border-box; position: relative; text-align: center; font-weight: bold; font-size: 16px; border-radius: 100px; border: 2px solid var(--color-base-line-light); } body.index .search .search_block li a:after { position: absolute; top: calc(50% - 12px); right: 12px; font-family: var(--fontfamily-icon); font-weight: normal; content: "\e5cc"; vertical-align: middle; display: block; font-size: 24px; color: var(--color-base-line-dark); } body.index .search .search_block a:hover:before { border-left-color: #fff; } body.index .search div#search-all { margin: 0 0 10px; padding-left: 0px; } body.index .search div#search-all div.title p { margin: 0 24px 4px; text-align: right; font-size: 10px; } body.index div#searchcat div.title, body.index div#searchon div.title, body.index .search #shop-icon { margin: 0 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; line-height: 1.2em; margin-top: 6px; } 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; border: 4px solid #fff; } body.index div.search table.table01 .tel { width: 15%; } body.index div.search table.table01 .hour { width: 25%; } body.index div.search table.table01 td.floor { text-align: center; position: relative; padding-right: 24px; font-size: 14px; } body.index div.search table.table01 td.floor:after { position: absolute; top: calc(50% - 10px); right: 12px; font-family: var(--fontfamily-icon); font-weight: normal; content: "\e5cc"; vertical-align: middle; display: block; font-size: 20px; color: var(--color-base-line-dark); } 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: 'FILL'1; content: "\e0b0"; margin: 0 4px 0 0; font-size: 16px; vertical-align: bottom; } body.index div.search #shop-icon { margin: 8px 0; } body.index div.search #shop-icon ul li { display: inline-block; margin-right: 20px; font-size: 90%; } body.index div#category-navi { margin: 0 0 8px; width: 100%; box-sizing: border-box; text-align: center; padding: 0; border-bottom: 2px 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: 16px 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: 0 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; } body.index div#service, body.index div#recruit { margin-top: 30px; } /* --------------------------------------------- ショップサービス 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: 20px 20px 20px 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.pc div#service table.table01 .logo { width: 100px; text-align: center; border-right: 1px solid var(--color-base-line-dark); } body.index.bf4.pc div#service table.table01 .logo .image { width: 100px; height: 50px; border: 10px solid #fff; } 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; } /* --------------------------------------------- クーポン　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; width: 100%; margin: 0 40px 0 0; } 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; background: #fff; border-radius: 0px; border: 1px solid var(--color-base-line-dark); } body.voice .VoiceItemList article .detail:before, body.voice .VoiceItemList article .detail:after { right: calc(100% / 2 - 10px); bottom: -20px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } body.voice .VoiceItemList article .detail:before { border-top-color: var(--color-base-line-dark); border-width: 10px; margin-bottom: 0px; } body.voice .VoiceItemList article .detail:after { border-top-color: #fff; border-width: 10px; margin-bottom: 1px; } 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 { border-top: 2px solid var(--color-base-line-light); } .calendar #event_lists { border-top: none; } #event_lists .events { padding: 30px 20px; overflow: hidden; position: relative; border-bottom: 1px solid var(--color-base-line-dark); margin: 10px 0 0; } #event_lists .events.cat_title_2 .c1 { display: none; } #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 .events.cat_title_2 .date{ display: none; } #event_lists h4 { margin: 10px 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_lists .table01 th, #event_lists .table01 td, .item_eventnews .item .table01 th, .item_eventnews .item .table01 td { padding: 10px; background: #fff; border-top: 2px solid var(--color-base-line-light); } .item_eventnews .item .table01 th, .item_eventnews .item .table01 td { padding: 20px 30px; } #event_lists .morelink span:after { display: none; } .event-cat-title { clear: both; margin: 16px 0; } .event-cat-title .cat_title { padding: 16px 20px; font-size: 20px; font-weight: bold; background: var(--color-base-bg-light); color: var(--color-base-main-dark); line-height: 1.5em; } #ev-navi { text-align: center; margin: 0 0 30px; } .ev-navi_bottom { text-align: center; padding: 24px; } .ev-navi_bottom .ev-navi-cal, #ev-navi .ev-navi-cal { margin-left: 16px; display: inline-block; vertical-align: top; } .ev-navi_bottom .ev-navi-cal i { font-size: 18px; margin-right: 10px; } .ev-navi_bottom .ev_all_link { display: inline-block; vertical-align: top; } .ev-navi-article { width: 200px; display: inline-block; text-align: left; } .ev-navi-article dl { position: relative; } .ev-navi-article dl dt { line-height: 40px; height: 40px; padding-left: 40px; border: 2px solid var(--color-base-line-light); cursor: pointer; position: relative; border-radius: 100px; } .ev-navi-article dl dt:before { content: ""; display: inline-block; width: 1px; border-left: 1px solid var(--color-base-line-dark); height: 20px; position: absolute; right: 40px; top: 10px; } .ev-navi-article dl dt:after { font-family: var(--fontfamily-icon); content: "\e5cf"; vertical-align: middle; position: absolute; right: 2px; top: 1px; width: 40px; text-align: center; font-size: 20px; color: var(--color-base-line-dark); font-weight: normal; } .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 20px 12px 12px; position: relative; } .ev-navi-article dl dd li a::after { font-family: var(--fontfamily-icon); content: "\e5cc"; color: var(--color-base-line-dark); font-size: 20px; vertical-align: middle; position: absolute; right: 4px; top: calc(50% - 12px); font-weight: normal; } .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 30px; font-size: 14px; border: 2px solid var(--color-base-line-light); border-radius: 100px; position: relative; } .ev-navi_bottom .ev-navi-cal a, #ev-navi .ev-navi-cal a { padding-right: 44px; } .ev-navi_bottom .ev-navi-cal a:after, #ev-navi .ev-navi-cal a:after { font-family: var(--fontfamily-icon); content: "\e5cc"; color: var(--color-base-line-dark); font-size: 20px; vertical-align: middle; position: absolute; top: calc(50% - 11px); right: 8px; font-weight: normal; } .ev-navi_bottom .ev_all_link a { padding-left: 44px; } #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"; color: var(--color-base-line-dark); font-size: 20px; vertical-align: middle; position: absolute; top: calc(50% - 11px); left: 8px; font-weight: normal; } .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: 14px; font-weight: 700; color: var(--color-base-main-dark); } .events .e_category:before { font-family: var(--fontfamily-icon); font-variation-settings: 'FILL'1; content: "\e866"; margin: 0 2px 0 0; font-size: 20px; position: relative; vertical-align: middle; top: -1px; } 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; margin-top: 10px; } body.item_eventnews #contents-main .item .title h3 { padding: 16px 20px; font-size: 20px; font-weight: bold; background: var(--color-base-bg-light); color: var(--color-base-main-dark); line-height: 1.5em; margin: 6px 0 0; text-align: left; } body.item_eventnews #contents-main .item .title h3:before { display: none; } body.item_eventnews #contents-main .item .subtitle h4 { padding: 16px; border-bottom: 1px solid var(--color-base-line-dark); line-height: 1.4em; } body.item_eventnews #contents-main .item .images { margin: 24px 0; } body.item_eventnews #contents-main .item .images .image { margin: 0 0 16px 0; text-align: center; } body.item_eventnews #contents-main .item .images .image img { border-radius: 0px; max-width: 90%; 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: 2px solid var(--color-base-line-light); margin-top: 40px; padding-bottom: 0; } body.item_eventnews #contents-main .item .desc .section { margin: 20px 0; } body.item_eventnews #contents-main .item .desc .remarks { padding: 16px; } body.item_eventnews #contents-main .item .desc .remarks dt { margin-bottom: 4px; font-weight: bold; } body.item_eventnews #contents-main .item .desc .remarks dd { font-size: 12px; line-height: 18px; } body.item_eventnews #contents-main .item .desc .link { text-align: center; margin: 30px 0; } body.item_eventnews #contents-main .item .desc .link a { text-decoration: none; display: inline-block; margin: 10px 0 0; text-align: center; color: #fff; border-radius: var(--box-radius-small); background: var(--color-base-main-dark); padding: 20px 50px 20px 40px; position: relative; max-width: 80%; min-width: 12em; font-weight: 700; font-size: 16px; } body.item_eventnews #contents-main .item .desc .link a:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; vertical-align: middle; font-size: 24px; line-height: 1.4em; position: absolute; right: 10px; top: calc(50% - 15px); font-weight: normal; } 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; display: flex; flex-wrap: wrap; padding: 24px 30px 14px; background: var(--color-base-line-light); } body.item_eventnews #contents-main #event_list .p_title { width: 100%; margin-bottom: 16px; position: relative; } body.item_eventnews #contents-main #event_list .p_title h4 { font-family: var(--fontfamily-english-sub); font-weight: 700; text-align: center; font-size: 20px; padding: 0; } body.item_eventnews #contents-main #event_list .events { width: 100%; padding: 14px 0; border-top: 1px solid var(--color-base-line-dark); box-sizing: border-box; } body.item_eventnews #contents-main #event_list .events strong { font-size: 16px; } body.item_eventnews #contents-main #event_list .events .term { line-height: 18px; font-size: 12px; margin-top: 2px; word-break: break-all; color: var(--color-base-main-dark); } 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; position: absolute; top: -4px; right: 0; } body.item_eventnews #contents-main #event_list .btn-more { width: 100px; position: relative; line-height: 24px; padding-top: 2px; background: rgba(255, 255, 255, 0.5); border-color: #e5e5e5; } body.item_eventnews #contents-main #event_list .btn-more:after { position: absolute; top: calc(50% - 12px); right: 4px; font-family: var(--fontfamily-icon); font-weight: normal; content: "\e5cc"; vertical-align: middle; display: block; font-size: 16px; color: var(--color-base-line-dark); } /* --------------------------------------------- 営業時間　hours --------------------------------------------- */ body.hours #contents-main article 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 section { padding: 15px 15px 30px; } body.hours #contents-main .hours_content section { white-space: pre-wrap; } body.hours #contents-main .hours_content section strong { font-size: 1.1em; } 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: block; margin: 10px 0 0; width: 12em; text-align: center; color: #fff; background: var(--color-base-main-dark); padding: 10px 30px; position: relative; } 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; } /* --------------------------------------------- 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; } /*FREE PAGE 専門店クオリティ*/ #contents[data-content*="専門店クオリティ"] > h2 { display: none; } #contents[data-content*="専門店クオリティ"] .fp_content h3 { margin: 16px 0; } #contents[data-content*="専門店クオリティ"] .fp_content h4 { font-weight: bold; margin: 8px 16px 4px; } #contents[data-content*="専門店クオリティ"] .fp_content p { margin: 0 0 16px; } #contents[data-content*="専門店クオリティ"] .fp_content p a { text-decoration: underline; color: var(--color-base-main-dark); font-weight: bold; } /*---------------------- Shop Guide　関連の共通メニュー ----------------------*/ .shop_guide_menu ul { height: 70px; margin: 0; border-bottom: 2px solid var(--color-base-line-light); display: flex; justify-content: center; flex-wrap: wrap; } .shop_guide_menu ul li { width: calc((100% - 4px)/2); box-sizing: border-box; padding: 0; height: 70px; vertical-align: bottom; margin-right: 4px; } .shop_guide_menu ul li:last-child { margin-right: 0; } .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-main-dark); border-bottom: none; margin-top: 0; line-height: 70px; height: 70px; font-weight: bold; font-size: 18px; color: #fff; } .shop_guide_menu ul li.current a:after { content: ""; display: block; position: absolute; bottom: -22px; width: 0; height: 0; border: 12px solid transparent; left: 36%; left: calc(50% - 12px); border-top: 12px solid var(--color-base-main-dark); } /* --------------------------------------------- フロアガイド(floor.jsp用) --------------------------------------------- */ body.floor h2 strong { font-weight: bold; display: inline-block; margin-left: 10px; font-size: 1.1em; } body.floor article .floor_img { padding: 24px 0; width: 100%; box-sizing: border-box; border-radius: 0px; } body.floor article .floor_img img { width: calc(100% - 22px); } body.floor article .floor_img .desc { background: #fff; padding: 16px; margin: 8px 0 0; background: var(--color-base-bg-light); } body.floor #contents-main article .floor_img .desc em[class^="icon"] { padding: 0.5em; display: inline-block; line-height: 1em; } body.floor #contents-main article .floor_img .desc em[class^="icon"]:before { display: inline-block; font-family: var(--fontfamily-icon); width: calc(1em + 0.5em); height: calc(1em + 0.5em); background: #000; color: #fff; border-radius: 50%; box-sizing: border-box; line-height: 1.5em; margin-right: 0.2em; } body.floor #contents-main article .floor_img .desc p.detail { font-weight: bold; } body.floor article .floor_img .desc p { padding: 5px 0; text-align: center; } body.floor article .floor_img .desc .detail { font-weight: bold; } body.floor article .floor_img .desc .caption { font-size: 0.9em; } body.floor article#f_top h3 span { display: block; text-align: center; font-weight: 500; font-size: 16px; margin-top: 4px; } body.floor article .floor_ico { margin: 0 auto; max-width: 1000px; } body.floor article .floor_ico ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } body.floor article .floor_ico ul li { margin: 0 30px 10px 0; display: flex; } body.floor article .floor_ico ul li a { display: flex; text-decoration: underline; } body.floor article .floor_ico ul li img { margin-right: 6px; width: 20px; height: auto; } body.floor table.table01 { margin: 16px 0; } body.floor table.table01 td.number { width: 6%; border-right: none; padding-right: 3px; } body.floor table.table01 td.name { width: 34%; border-right: none; border-left: none; font-weight: bold; padding-left: 3px; } body.floor.pc #f_3f table.table01 td.name, body.floor.pc #f_4f table.table01 td.name{ width: 84%; } body.floor table.table01 td.logo { width: 10%; border-left: none; text-align: right; } body.floor table.table01 td.category { width: 15%; font-size: 0.9em; } body.floor table.table01 td.hour { width: 30%; font-size: 0.9em; } body.floor table.table01 td.logo img { max-width: 80px; margin: 0 auto; } body.floor .cl_fl_list { overflow: hidden; margin: 0 0 10px 0; } body.floor .cl_fl_list dt { float: left; padding: 5px 0; } body.floor .cl_fl_list dd .floorlist dt { float: left; margin: 0 2px; padding: 0; } body.floor .cl_fl_list dd .floorlist dt a { position: relative; padding: 5px 10px; background: var(--color-base-bg-light); border-radius: 0px; display: inline-block; text-decoration: none; font-size: 16px; min-width: 30px; text-align: center; color: var(--color-base-accent-dark); } body.floor .cl_fl_list dd .floorlist dt a:hover { background: var(--color-base-accent-dark); color: #fff; } /*Zoomの追加css　*/ body.floor article .floor_img .zoom_area { position: relative; } .leaflet-container { z-index: 100; padding: 100px 10px; border: 1px solid var(--color-base-line-dark); background-color: #fff; } /*----------店舗一覧テーブル----------*/ .floor_notice { padding: 10px 0; font-size: 10px; text-align: right; } .floor .table01 thead { display: none; } .floor .table01 td.category { position: relative; } .floor .table01 td.category::after { font-family: var(--fontfamily-icon); content: ""; margin: 0 0 0 4px; color: var(--color-base-accent-dark); vertical-align: middle; position: absolute; font-size: 20px; right: 10px; } /*構造*/ body.view .floor table.table01 th, body.view .floor table.table01 td { box-sizing: border-box; font-size: 12px; padding: 16px; border: none; } body.view .floor table.table01 td.hour { padding-right: 34px; } .floor .table01 .number { width: 5%; } .floor .table01 .name { width: 40%; font-size: 14px; position: relative; } .floor .table01 .logo { width: 116px; text-align: center; } /* .floor .table01 .logo img{width: 80px;} */ .floor .table01 .hour { width: 15%; } .floor .table01 .tel { width: 20%; } /*ショップ番号*/ body.view .floor .table01 td.number { text-align: center; position: relative; padding: 0 0 0 10px; } .floor .table01 td.number span { font-family: var(--fontfamily-english-sub); text-align: center; font-size: 14px; color: #454545; font-weight: bold; line-height: 1em; display: block; padding: 0.8em 0.4em; box-sizing: border-box; background: var(--color-base-bg-light); } /*カテゴリ別色分け*/ .floor .table01 tr.cat4 td.number span, .floor .table01 tr.cat5 td.number span { background: #fde26d; } .floor #f_b1f .table01 tr.cat1 td.number span, .floor #f_b1f .table01 tr.cat2 td.number span, .floor #f_b1f .table01 tr.cat3 td.number span { background: #bbd165; } .floor #f_1f .table01 tr.cat1 td.number span, .floor #f_1f .table01 tr.cat2 td.number span, .floor #f_1f .table01 tr.cat3 td.number span { background: #f4ac94; } .floor #f_2f .table01 tr.cat1 td.number span, .floor #f_2f .table01 tr.cat2 td.number span, .floor #f_2f .table01 tr.cat3 td.number span { background: #73bed3; } .floor #f_3f .table01 tr td.number span { background: #93CEAE; } .floor #f_4f .table01 tr td.number span { background: #D789B2; } .floor #f_7f .table01 tr.cat1 td.number span, .floor #f_7f .table01 tr.cat2 td.number span, .floor #f_7f .table01 tr.cat3 td.number span { background: #f8ae01; } .floor #f_53f .table01 tr.cat1 td.number span, .floor #f_53f .table01 tr.cat2 td.number span, .floor #f_53f .table01 tr.cat3 td.number span { background: #008298; color: #fff; } .floor #f_54f .table01 tr.cat1 td.number span, .floor #f_54f .table01 tr.cat2 td.number span, .floor #f_54f .table01 tr.cat3 td.number span { background: #1561AE; color: #fff; } .floor #f_b1f .table01 tr.code69 td.number span { background: #93CEAE; } /*ショップコード個別指定*/ .floor .table01 tr.code13 td.number span { background: #bbd165; } .floor .table01 tr.code15 td.number span, .floor .table01 tr.code16 td.number span, .floor .table01 tr.code17 td.number span { background: #fde26d; } .floor .table01 tr.code21 td.number span, .floor .table01 tr.code22 td.number span, .floor .table01 tr.code23 td.number span { background: #f4ac94; } .floor .table01 tr.code38 td.number span, .floor .table01 tr.code39 td.number span, .floor .table01 tr.code40 td.number span, .floor .table01 tr.code41 td.number span { background: #73bed3; } .floor .table01 tr.code51 td.number span, .floor .table01 tr.code52 td.number span { background: #f8ae01; } .floor .table01 tr.code51 td.number span, .floor .table01 tr.code52 td.number span { background: #f8ae01; } .floor .table01 td.number span { position: relative; vertical-align: middle; margin: 0 auto; width: 34px; height: 34px; border-radius: 50%; } .floor .table01 td.name .category { font-size: 12px; line-height: 1.2em; margin-top: 6px; font-weight: normal; } .floor .table01 td.name .shopname { font-size: 16px; line-height: 18px; } .floor .table01 td.name a { font-weight: bold; } .floor .floor_notice img { height: 16px; width: auto; vertical-align: middle; } .floor .table01 .icn { display: block; position: absolute; top: 32%; right: 10px; } .floor .table01 .hour:before { font-family: var(--fontfamily-icon); content: "\e8b5"; margin: 0 4px 0 0; font-size: 16px; vertical-align: bottom; } .floor .table01 .tel:before { font-family: var(--fontfamily-icon); font-variation-settings: 'FILL'1; content: "\e0b0"; margin: 0 4px 0 0; font-size: 16px; vertical-align: bottom; } .floor .table01 .hour { position: relative; } .floor .table01 .hour:after { position: absolute; top: calc(50% - 12px); right: 0; font-family: var(--fontfamily-icon); font-weight: normal; content: "\e5cc"; vertical-align: middle; display: block; font-size: 24px; color: var(--color-base-line-dark); } /* --------------------------------------------- フロアガイド共通マップ --------------------------------------------- */ .floor dl.floorlist, .allmap_map ul { display: flex; justify-content: center; flex-wrap: wrap; margin: 20px 0 10px; } .floor dl.floorlist dt, .allmap_map li { margin: 0 8px 8px 0; text-align: center; font-size: 16px; font-weight: bold; letter-spacing: 0.1em; width: calc((100% - 32px) / 5); font-family: var(--fontfamily-english-sub); } .pc.floor dl.floorlist dt:nth-of-type(5n), .floor dl.floorlist dt:last-of-type { margin-right: 0; } .floor dl.floorlist dt.fid_top { letter-spacing: 0; font-family: var(--fontfamily-base); } .floor dl.floorlist dt a, .allmap_map li a { display: block; width: 100%; height: 100%; padding: 10px 15px 10px 10px; box-sizing: border-box; position: relative; text-align: center; font-weight: bold; font-size: 16px; border-radius: 100px; border: 2px solid var(--color-base-line-light); } .floor dl.floorlist dt a:after, .allmap_map li a:after { position: absolute; top: calc(50% - 12px); right: 12px; font-family: var(--fontfamily-icon); font-weight: normal; content: "\e5cc"; vertical-align: middle; display: block; font-size: 24px; color: var(--color-base-line-dark); } .floor dl.floorlist dt a:hover, .allmap_map li a:hover { text-decoration: none; } /* --------------------------------------------- フロアページ下部　フロア一覧 --------------------------------------------- */ .floorsearch_box .floorsearch { font-family: var(--fontfamily-english-sub); color: var(--color-base-main-dark); font-weight: 700; text-align: center; font-size: 20px; padding: 20px 0 0; } .floorsearch_box .floorsearch:before { content: ""; width: 48px; height: 2px; margin: 20px auto 12px; display: block; background: var(--color-base-main-dark); } .floorsearch_box { box-sizing: border-box; background: #fff; margin: 40px auto 0; } .floorsearch_box .floorlist { text-align: center; } .floorsearch_box .floorlist li { border: 2px 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 #eee; 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 #eee; 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 #eee; 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: var(--color-base-accent-light); color: var(--color-base-accent-dark); display: inline-block; width: 24px; height: 24px; box-sizing: border-box; border-radius: var(--box-radius-full); padding-top: 5px; margin-left: 8px; font-family: var(--fontfamily-english); line-height: 1em; text-align: center; } #contents #tag .more-button-wrap:last-of-type { position: relative; margin-bottom: 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'S TAG"; display: block; position: absolute; bottom: -60px; left: 0; width: 100%; padding: 0 0 15px; border-bottom: 2px solid var(--color-base-line-light); } /*下部に並ぶタグ一覧（tagitemlist）*/ #contents .trendtag_list { border: 4px solid #EEEEEE; 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-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.tag .return_list a:before { font-family: var(--fontfamily-icon); content: "\e5cb"; margin: 0 0 0 4px; color: var(--color-base-accent-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: 200px; border-radius: 0px; margin: 0 0 0 20px; } #contents #feature .feature .title { padding: 10px 0; font-weight: bold; font-size: 18px; } #contents #feature .feature .date { font-size: 12px; 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 h2{ display: none; } body.item_feature #contents article h3 { border: none; margin: 0 0 20px; padding: 0; overflow: hidden; border-bottom: 2px solid var(--color-base-line-light); background: none; color: var(--color-base-text-dark); text-align: center; } body.item_feature #contents article h3:before{ display: none; } body.item_feature #contents article h3 img { width: 100%; max-width: 960px; } body.item_feature #contents article h3 .title { font-size: 18px; padding: 20px 0; } body.item_feature #contents article h3 .image { width: 100%; margin: 0 0 20px; background: var(--color-base-bg-light); text-align: center; } body.item_feature #contents-main .NewsItemList { margin: 0 0 40px; } body.item_feature #contents-main .NewsItemList .goodscomment { /*display: none;*/ white-space: pre-wrap; } body.item_feature .item .goodscomment { display: none; } body.item_feature #contents .content1, body.item_feature #contents .content2 { box-sizing: border-box; text-align: center; } /*一覧へ戻るボタン*/ #contents.feature .return_list { display: none; clear: both; margin: 20px 0; 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: 20%; text-align: center; } #contents .voice .p_title h2 { font-family: var(--fontfamily-english); font-weight: 700; font-size: 22px; background: #fff; margin: 0; padding: 0 0 12px; border-bottom: 0; width: auto; } #contents .voice .p_title ul { width: 100%; padding: 0; } #contents .voice .p_title ul li { width: 100%; } #contents .voice .swiper-container_voice { width: 80%; display: flex; overflow: hidden; box-sizing: border-box; padding: 0; } #contents .voice ul li { width: 50%; flex-shrink: 0; } #contents .voice .swiper-container_voice.one_item ul li { width: 100%; } #contents .voice ul .logoimg a { border-radius: 0px; float: left; width: 70px; height: 70px; box-sizing: border-box; padding: 20px 0 0; } #contents .voice ul .detail { width: calc(100% - 110px); float: right; margin: 0 20px 0 0; padding: 10px 20px; box-sizing: border-box; position: relative; min-height: 70px; background: #fff; border-radius: 0px; border: 1px solid var(--color-base-line-dark); } #contents .voice ul .detail:before, #contents .voice ul .detail:after { right: 100%; top: calc(100% / 2); border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } #contents .voice ul .detail:before { border-right-color: var(--color-base-line-dark); border-width: 10px; margin-top: -10px; } #contents .voice ul .detail:after { border-right-color: #fff; border-width: 9px; margin-top: -9px; } #contents .voice ul .goodsname { font-weight: bold; } #contents .voice ul .shopname a { display: block; font-size: 12px; } #contents .btn-more { width: 180px; display: inline-block; font-size: 14px; border-radius: 40px; border: 2px solid var(--color-base-line-light); line-height: 1em; font-family: var(--fontfamily-english-sub); color: var(--color-base-text-midlight); } /* --------------------------------------- ニュース、クーポン、ボイス、求人のタブ --------------------------------------- */ .shopnews_tab { height: 70px; margin: 0 0 0; border-bottom: 1px 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-main-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-main-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: 'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 48; 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; } /* --------------------------------------------- よくある質問（/shop/faq.jsp） --------------------------------------------- */ #faq.faq_content dt { color: var(--color-base-main-dark); font-size: 18px; line-height: 1.3em; font-weight: 500; padding: 14px 14px 14px 56px; position: relative; background: var(--color-base-bg-light); } #faq.faq_content dt:before { content: "Q"; font-family: var(--fontfamily-english-sub); background: var(--color-base-main-dark); color: #fff; font-size: 18px; width: 30px; height: 30px; line-height: 30px; border-radius: 100px; text-align: center; display: inline-block; position: absolute; top: 10px; left: 14px; } #faq.faq_content dd { font-size: 16px; margin: 20px 0 50px; } #faq.faq_content dd a.link { color: var(--color-base-main-dark); display: inline-block; position: relative; margin-top: 6px; padding-right: 16px; text-decoration: underline; } #faq.faq_content dd a.link:after { font-family: var(--fontfamily-icon); font-weight: normal; content: "\e5cc"; font-size: 18px; position: absolute; top: 1px; right: -4px; } #faq.faq_content dd a.link.blank:after { font-size: 16px; content: "\e89e"; } /* --------------------------------------------- 会社概要（page.jsp?id=8） --------------------------------------------- */ #free_page_area .company_info .sec:not(:last-of-type) { margin-bottom: 80px; } .pc #free_page_area .company_info h3 { margin-bottom: 20px; } #free_page_area .company_info #carrier ul { display: flex; flex-wrap: wrap; } #free_page_area .company_info #carrier ul li { width: calc((100% - 60px)/ 3); margin-right: 30px; padding: 20px 14px; margin-bottom: 20px; border: 1px solid var(--color-base-line-dark); border-left: 2px solid var(--color-base-main-dark); box-sizing: border-box; } #free_page_area .company_info #carrier ul li:nth-of-type(3n) { margin-right: 0; } #free_page_area .company_info #constitute p { line-height: 1.6em; } #free_page_area .company_info #constitute p:not(:last-of-type) { margin-bottom: 24px; } #free_page_area .company_info #outline .table01 { margin-bottom: 10px; } #free_page_area .company_info #outline .note { margin-top: 4px; font-size: 14px; color: var(--color-base-text-light); } .pc #free_page_area .company_info #story th br { display: none; } /* --------------------------------------------- 取材・撮影について（page.jsp?id=6） --------------------------------------------- */ #free_page_area .shooting .content { margin-top: 40px; } .pc #free_page_area .shooting .content > p { font-size: 16px; line-height: 1.8em; text-align: center; } #free_page_area .shooting .contact { background: var(--color-base-bg-light); padding: 30px; margin-top: 50px; text-align: center; } #free_page_area .shooting .contact h4 { font-weight: bold; color: var(--color-base-main-dark); font-size: 16px; } #free_page_area .shooting .contact strong { font-weight: 500; color: var(--color-base-main-dark); } #free_page_area .shooting .contact .cult_info { max-width: 800px; margin: 30px auto 0; padding-top: 30px; border-top: 1px solid var(--color-base-line-dark); } #free_page_area .shooting .contact .cult_info dl { flex-wrap: wrap; margin-top: 10px; display: flex; justify-content: center; align-items: center; } #free_page_area .shooting .contact .cult_info dt { display: block; width: 100%; margin: 0 0 10px; font-weight: 500; color: var(--color-base-main-dark); } #free_page_area .shooting .contact .cult_info dd a { font-size: 26px; font-family: var(--fontfamily-english-sub); color: var(--color-base-main-dark); background: #fff; padding: 12px 40px 10px; display: inline-block; border-radius: 100px; } #free_page_area .shooting .contact ul { display: flex; align-items: center; justify-content: center; margin: 12px 0 6px; } #free_page_area .shooting .contact ul li { font-family: var(--fontfamily-english-sub); color: var(--color-base-main-dark); background: #fff; padding: 12px 40px 10px; display: inline-block; border-radius: 100px; display: flex; font-weight: 600; } #free_page_area .shooting .contact ul li:not(:first-of-type) { margin-left: 30px; } #free_page_area .shooting .contact ul li a { margin-left: 8px; font-size: 26px; font-weight: normal; color: var(--color-base-main-dark); } /* --------------------------------------------- プライバシーポリシー（page.jsp?id=3） --------------------------------------------- */ #free_page_area .privacy h3, #free_page_area .sitepolicy h3 { background: var(--color-base-bg-light); border-left: 2px solid var(--color-base-main-dark); padding: 14px 20px; margin: 40px 0 20px; box-sizing: border-box; position: relative; font-size: 18px; text-align: left; } #free_page_area .privacy h3:first-of-type, #free_page_area .sitepolicy h3:first-of-type { margin-top: 20px; } #free_page_area .privacy h3:before, #free_page_area .sitepolicy h3:before { display: none; /* width: 2px; height: calc(0.5em + 14px); bottom: 0; left: -2px; position: absolute; margin: 0; background: #FCD78C;*/ } #free_page_area .privacy p.info { border: 2px solid var(--color-base-bg-light); padding: 14px 20px; margin-top: 20px; display: inline-block; } /* --------------------------------------------- 会員証またはチケット・チケット半券でご優待サービス（card_ticketservice_2023.jsp） --------------------------------------------- */ .card_ticketservice #contents-main { background: #fde4a6; padding: 30px; } .card_ticketservice .titlearea { text-align: center; color: var(--color-base-main-dark); } .card_ticketservice .titlearea .date { font-size: 20px; margin: 10px auto; } .card_ticketservice .titlearea .title { font-size: 24px; font-weight: bold; } .pc.card_ticketservice .titlearea .title br { display: none; } .card_ticketservice .head { background: #fff; margin-top: 30px; } .pc.card_ticketservice .head .wrap_hd { padding: 30px 30px 20px; } .card_ticketservice .head .wrap_hd > p { text-align: center; font-size: 16px; line-height: 1.8em; font-weight: bold; margin-bottom: 20px; } .pc.card_ticketservice .head .wrap_hd > p.announce br { display: none; } .card_ticketservice #contents-main .head .wrap_hd h3 { display: flex; padding: 12px; margin-top: 0; font-weight: bold; background: var(--color-base-main-dark); color: #fff; align-items: center; justify-content: center; z-index: 2; } .card_ticketservice #contents-main .head .wrap_hd h3 img { margin-right: 14px; width: auto; height: 34px; display: block; } .card_ticketservice #contents-main .head .wrap_hd h3:before { display: none; } .card_ticketservice #contents-main .head .card_list, .card_ticketservice #contents-main .head .card_ul { display: flex; align-items: center; justify-content: flex-start; } .pc.card_ticketservice #contents-main .head .card_list { width: 726px; margin: 20px auto 0; } .card_ticketservice #contents-main .head .card_list h4 { font-weight: bold; margin-right: 30px; font-size: 16px; position: relative; box-sizing: border-box; padding: 20px 20px 20px 10px; width: 200px; background: var(--color-base-bg-light); text-align: center; color: var(--color-base-main-dark); } .pc.card_ticketservice #contents-main .head .card_list h4::before, .pc.card_ticketservice #contents-main .head .card_list h4::after { content: ''; display: block; width: 52%; height: 50%; background-color: #fff; position: absolute; right: -32%; z-index: 1; } .card_ticketservice #contents-main .head .card_list h4::before { transform: rotate(55deg); top: 0; } .card_ticketservice #contents-main .head .card_list h4::after { transform: rotate(-55deg); top: 50%; } .card_ticketservice #contents-main .head .card_list ul { z-index: 2; } .card_ticketservice #contents-main .head .card_list li:not(:last-of-type) { margin-right: 20px; } .card_ticketservice #contents-main .head .kome { font-weight: normal; font-size: 14px; line-height: 1.4em; color: var(--color-base-text-light); margin-top: 12px; position: relative; z-index: 2; width: 726px; margin: 14px auto 0; text-align: left; } .card_ticketservice #contents-main .head .qr { display: flex; border-top: 2px solid var(--color-base-line-light); margin-top: 20px; padding-top: 20px; flex-wrap: wrap; justify-content: center; } .card_ticketservice #contents-main .head .qr .single { display: flex; align-items: center; margin-right: 30px; } .card_ticketservice #contents-main .head .qr .single:last-of-type { margin-right: 0; } .card_ticketservice #contents-main .head .qr .single p { font-size: 16px; margin-right: 20px; } .card_ticketservice #contents-main .head .qr > p { width: 100%; text-align: center; margin-top: 10px; } .card_ticketservice #contents-main .head .qr > p span { display: inline-block; background: var(--color-base-line-light); border-radius: 100px; padding: 6px 60px 8px; margin-top: 10px; box-sizing: border-box; } .card_ticketservice .head .wrap_hd p.txt { margin-bottom: 0; } .card_ticketservice .head .wrap_hd p.parkingqr { margin-top: 10px; } .card_ticketservice .disc { margin: 30px 0; } .card_ticketservice .disc li { position: relative; display: block; padding-left: 16px; margin-bottom: 6px; color: var(--color-base-text-light); } .card_ticketservice .disc li:before { content: ''; width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-base-text-light); position: absolute; top: 9px; left: 0; } .card_ticketservice #shoplist {} .card_ticketservice #shoplist h5 { background: #700042; color: #fff; text-align: center; font-size: 22px; line-height: 1em; padding: 12px 10px 10px; font-family: var(--fontfamily-english-sub); } .card_ticketservice #shoplist #res_ss h5 { background: #00548a; } .card_ticketservice #shoplist .tab-area { display: flex; } .card_ticketservice #shoplist .tab-area li { background: var(--color-base-text-midlight); color: #fff; width: calc((100% - 20px)/2); text-align: center; padding: 16px 0 30px; font-weight: 700; border-radius: 5px 5px 0 0 /5px 5px 0 0; position: relative; cursor: pointer; } .card_ticketservice #shoplist .tab-area li p { transition-duration: 0.5s; } .card_ticketservice #shoplist .tab-area li:hover p { opacity: 0.7; } .card_ticketservice #shoplist .tab-area li:after { font-family: var(--fontfamily-icon); content: "\e5cf"; vertical-align: middle; font-size: 20px; position: absolute; width: 100%; bottom: 4px; left: 0; } .card_ticketservice #shoplist .tab-area li span { display: block; text-align: center; font-size: 24px; font-weight: bold; margin-top: 4px; letter-spacing: 0.05em; font-family: var(--fontfamily-english-sub); } .card_ticketservice #shoplist .tab-area li.res.select { background: #980557; } .card_ticketservice #shoplist .tab-area li.res_ss { margin-left: 20px; } .card_ticketservice #shoplist .tab-area li.res_ss.select { background: #0081ab; } .card_ticketservice #shoplist .panel { display: none; padding: 30px; background: var(--color-base-bg-light); } .card_ticketservice #shoplist .panel.select { display: block; } .pc.card_ticketservice #shoplist .panel .heading { display: none; } .card_ticketservice #shoplist .shoplistbox:not(:last-of-type) { margin: 0 0 40px; } .card_ticketservice #shoplist .shoplistbox .item { box-sizing: border-box; padding: 20px 24px; margin-top: 14px; background: #fff; display: flex; cursor: pointer; transition-duration: 0.5s; } .card_ticketservice #shoplist .shoplistbox .item:hover { opacity: 0.7; } .card_ticketservice #shoplist .shoplistbox .item > div { width: calc(100% - 80px); margin-right: 20px; } .card_ticketservice #shoplist .shoplistbox .item > .respond { width: 60px; } .card_ticketservice #shoplist .shoplistbox .item ul.respond { margin-bottom: 0; } .pc.card_ticketservice #shoplist .shoplistbox .item ul.respond li:not(:last-of-type) { margin-bottom: 4px; } .card_ticketservice #shoplist .shoplistbox .item .name { border-bottom: 2px solid var(--color-base-line-light); padding-bottom: 8px; margin-bottom: 4px; } .card_ticketservice #shoplist .shoplistbox .item .name a { font-weight: bold; font-size: 20px; display: block; } .card_ticketservice #shoplist .shoplistbox .item .name a span { font-weight: normal; margin-left: 10px; font-size: 14px; } .card_ticketservice #shoplist .shoplistbox .item .name .tel a:before { content: "\e9cd"; font-family: var(--fontfamily-icon); font-variation-settings: 'FILL'1; font-size: 18px; vertical-align: bottom; display: inline-block; text-align: center; top: 2px; position: relative; } .card_ticketservice #shoplist .shoplistbox .item .service { margin-top: 10px; display: flex; } .card_ticketservice #shoplist .shoplistbox .item .service p.text { line-height: 1.3em; } .card_ticketservice #shoplist .shoplistbox .item .service p.text span { font-size: 20px; line-height: 1.4em; display: block; font-weight: bold; color: var(--color-base-accent-dark); margin-bottom: 6px; } .card_ticketservice #shoplist .shoplistbox .item .service .respond { width: 60px; } /* --------------------------------------------- 施設案内（page.jsp?id=2） --------------------------------------------- */ .company_info .linkbtn{ width: 100%; max-width: 800px; margin: 0 auto; text-align: center; } .company_info .linkbtn a { width: 100%; max-width: 360px; background: var(--color-base-main-dark); color: #fff; font-size: 16px; display: inline-block; line-height: 46px; text-align: center; position: relative; margin: 0 auto; padding: 0 100px 2px; box-sizing: border-box; } .company_info .linkbtn a::after { position: absolute; top: calc(50% - 10px); right: 10px; font-family: var(--fontfamily-icon); content: "\e5cc"; vertical-align: middle; display: block; font-size: 20px; line-height: 1em; font-weight: normal; } .company_info .linkbtn a.blank::after { content: "\f8ce"; } .company_info .linkbtn a.pdf::after { content: "\e415"; } .pc .company_info .table01.patternB{ border-top: 2px solid var(--color-base-line-light); } .company_info .table01.patternB th{ background: var(--color-base-line-light); border-right: none; width: 20%; min-width: 60px; padding: 20px; } .company_info .table01.patternB tr:nth-child(odd) td{ background: #fff; } .company_info .table01.patternB th, .company_info .table01.patternB td{ border-bottom: 1px solid var(--color-base-line-dark); } .company_info #service .table01.patternB td.t_s{ font-size: 13px; letter-spacing: -0.07em; } .pc .company_info #service .table01.patternB td.floorlinkbtn{ position: relative; padding-right: 80px; } .company_info #service .table01.patternB td.floorlinkbtn a.btn{ display: inline-block; background: var(--color-base-main-dark); border-radius: var(--box-radius-xlarge); color: #fff; padding: 0 20px 0 14px; line-height: 22px; text-decoration: none; text-align: center; vertical-align: middle; height: 24px; text-transform: uppercase; font-size: 12px; position: absolute; top: calc((100% - 24px)/2); right: 12px; letter-spacing: normal; } .company_info #service .table01.patternB td.floorlinkbtn a.btn::after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; position: absolute; top: calc((100% - 24px)/2); right: 4px; } .company_info #service .table01.patternB td .floor_em{ display: inline-block; width: 2.5em; } .company_info #service #smokingroom .table01.patternB td .floor_em, .company_info #service #wheelchair_toilet .table01.patternB td .floor_em{ width: 80px; } .pc .company_info #service #wheelchair_toilet .table01.patternB td.floor{ width: 5em; padding-right: 0; } .pc .company_info #service #wheelchair_toilet .table01.patternB td.name{ width: 14em; } .pc .company_info #service #wheelchair_toilet .table01.patternB td.ico{ padding-left: 0; } .company_info #service .table01.patternB td.ico img{ width: 26px; height: 26px; margin-left: 4px; } .company_info .note{ margin-top: 4px; font-size: 14px; color: var(--color-base-text-light); } .company_info .note li{ line-height: 1.4em; padding-left: 1em; position: relative; margin-bottom: 4px; } .company_info .note li:before{ content: "・"; display: block; position: absolute; top: 0; left: 0; } .company_info #purpose{ margin-bottom: 60px; } .company_info #purpose p{ font-size: 16px; line-height: 2em; margin-bottom: 16px; text-align: center; } .company_info #purpose p:last-of-type{ margin-bottom: 0; } .company_info #purpose .linkbtn{ display: flex; margin-top: 40px; justify-content: center; margin-top: 30px; } .company_info #purpose .linkbtn li{ margin-right: 30px; } .company_info #purpose .linkbtn li:last-child{ margin-right: 0; } .company_info #overview { text-align: center; margin-bottom: 40px; } .company_info #overview .facility_list{ margin: 40px 0 18px; text-align: left; } .company_info #overview .facility_list ul{ display: flex; flex-wrap: wrap; } .company_info #overview .facility_list ul li{ width: calc((100% - 30px)/4); margin-right: 10px; margin-bottom: 42px; } .company_info #overview .facility_list ul li:nth-of-type(4n){ margin-right: 0; } .company_info #overview .facility_list ul li .photo img{ width: 100%; } .company_info #overview .facility_list ul li dt{ display: flex; margin: 10px 0; padding-left: 30px; font-size: 16px; line-height: 1.4em; position: relative; font-weight: bold; color: #0F5046; } .company_info #overview .facility_list ul li dt .num{ background: #0F5046; color: #fff; font-family: var(--fontfamily-english-sub); width: 24px; height: 24px; text-align: center; font-size: 14px; line-height: 25px; display: inline-block; border-radius: 100px; position: absolute; left: 0; top: 0;} .company_info #overview .facility_list ul li dt .floor{ padding-right: 15px; position: relative; } .company_info #overview .facility_list ul li dt .floor:after{ content: ""; width: 1px; height: 1em; background: #0F5046; position: absolute; right: 6px; top: 5px; display: inline-block; } .company_info #overview .facility_list ul li dd{ font-size: 16px; line-height: 1.6em; } .company_info #overview .facility_list ul li.a dt, .company_info #overview .facility_list ul li.f dt{ color: #CD5121; } .company_info #overview .facility_list ul li.a dt .num, .company_info #overview .facility_list ul li.a dt .floor:after, .company_info #overview .facility_list ul li.f dt .num, .company_info #overview .facility_list ul li.f dt .floor:after{ background: #CD5121; } .company_info #service #service-navi{ margin-bottom: 14px; } .pc .company_info #service #service-navi .service_sel{display: none; } .company_info #service #service-navi ul li{ width: calc((100% - 32px) /3); position: relative; font-weight: 500; font-size: 16px; color: var(--color-base-main-dark); margin: 0 16px 16px 0; line-height: 1; box-sizing: border-box; border: 2px solid var(--color-base-bg-light); border-radius: 100px; display: flex; align-items: center; transition-duration: 0.5s; } .company_info #service #service-navi ul li:nth-of-type(3n){ margin-right: 0; } .company_info #service #service-navi ul li a{ width: 100%; color: var(--color-base-main-dark); position: relative; display: block; padding: 12px 34px 14px 20px; } .company_info #service #service-navi ul li a:after { font-family: var(--fontfamily-icon); content: "\e5cf"; vertical-align: middle; font-size: 20px; color: var(--color-base-line-dark); position: absolute; bottom: calc(50% - 9px); right: 10px; } .pc .company_info #service #service-navi ul li.t_s a{ font-size: 14px; } .company_info #service ul{ display: flex; flex-wrap: wrap; } .company_info #service ul .service_item{ width: 100%; margin-bottom: 80px; } .company_info #service ul .service_item:last-of-type{ margin-bottom: 0; } .company_info #service ul .service_item .linkbtn{ margin-top: 20px; } .pc .company_info #service ul .service_item.half{ width: calc((100% - 60px)/2); position: relative; } .pc .company_info #service ul .service_item.half.h_linkbtn{ margin-top: 0; padding-bottom: 70px; } .pc .company_info #service ul .half .table01.patternB th, .pc .company_info #service ul .half .table01.patternB td{ padding: 14px 16px; } .pc .company_info #service ul .service_item.half.h_linkbtn .linkbtn{ position: absolute; bottom: 0; left: 0; } .pc .company_info #service ul .service_item.half.bicycleparking .linkbtn{ position: static; } .pc .company_info #service ul #publicphone.service_item, .pc .company_info #service ul #wheelchair.service_item, .pc .company_info #service ul #taxi.service_item, .pc .company_info #service ul #smokingroom.service_item { margin-right: 60px; } .company_info #service ul .service_item .item{ display: flex; flex-wrap: wrap; } .company_info #service ul .service_item .item > dt{ width: 100%; background: var(--color-base-bg-light); border-left: 2px solid var(--color-base-main-dark); padding: 14px 20px; margin:0 0 20px; box-sizing: border-box; position: relative; font-size: 18px; font-weight: 500; text-align: left; color: var(--color-base-main-dark); } .company_info #service ul .service_item .item > dd{ width: 100%; } .company_info #service ul .service_item .item dd:not(:last-of-type){ margin-bottom: 30px; } .company_info #service ul #wheelchairrental.service_item .item dd:not(:last-of-type), .company_info #service ul #wheelchair_toilet.service_item .item dd:not(:last-of-type){ margin-bottom: 20px; } .company_info #service ul .service_item .item dd.photo{ text-align: center; margin-bottom: 20px; } .pc .company_info #service ul .service_item .item dd.photo.half{ width: 360px; margin-right: 30px; } .pc .company_info #service ul .service_item .item dd.half{ width: calc(100% - 390px); } .company_info #service ul .service_item .item dd strong{ font-size: 18px; margin-bottom: 8px; display: block; color: var(--color-base-main-dark); } .company_info #service ul .service_item .item dd .note strong{ font-size: 14px; margin: 14px 0 4px; color: var(--color-base-text-light); } .company_info #service ul .service_item .item dd .table01.patternB:not(:first-child){ margin-top: 20px; } .company_info #service ul #post_atm.service_item .item dd .table01.patternB{ margin-top: 10px; } .company_info #service .route{ margin: 20px 0 10px; } .company_info #service .route dt{ font-size: 18px; margin-bottom: 8px; display: block; font-weight: bold; color: var(--color-base-main-dark); } .company_info #service .route dt p{ display: inline-block; margin-left: 10px; font-size: 14px; } .company_info #service .route dd li{ width: calc((100% - 40px)/3); margin-right: 20px; } .company_info #service .route dd li:last-of-type{ margin-right: 0; } .company_info #service #parking .linkbtn p{ font-weight: 500; font-size: 16px; color: var(--color-base-main-dark); margin: 30px auto 10px; } /* --------------------------------------------- 施設案内（page.jsp?id=2） --------------------------------------------- */ .access .note{ margin-top: 10px; font-size: 14px; color: var(--color-base-text-light); } .access .linkbtn{ text-align: center; } .access .linkbtn p { font-weight: 500; font-size: 16px; color: var(--color-base-main-dark); margin: 30px auto 10px; } .pc.access .linkbtn p .sp{ display: none; } .access .linkbtn a { background: var(--color-base-main-dark); color: #fff; font-size: 16px; display: inline-block; line-height: 46px; text-align: center; position: relative; margin: 0 auto; padding: 0 80px 2px; box-sizing: border-box; } .access .linkbtn a::after { position: absolute; top: calc(50% - 10px); right: 10px; font-family: var(--fontfamily-icon); content: "\e5cc"; vertical-align: middle; display: block; font-size: 20px; line-height: 1em; font-weight: normal; } .access .linkbtn a.blank::after { content: "\f8ce"; } .access .linkbtn a.pdf::after { content: "\e415"; } .access .access_nav{ display: flex; margin-bottom: 30px; } .access .access_nav li { width: calc((100% - 64px) /5); position: relative; font-weight: 500; font-size: 16px; color: var(--color-base-main-dark); margin: 0 16px 0 0; line-height: 1; box-sizing: border-box; border: 2px solid var(--color-base-bg-light); border-radius: 100px; display: flex; align-items: center; transition-duration: 0.5s; } .access .access_nav li:last-child{ margin-right: 0; } .access .access_nav li a { width: 100%; text-align: center; color: var(--color-base-main-dark); position: relative; display: block; padding: 12px 20px 14px 20px; } .access .access_nav li a img{ width: 20px; height: 20px; position: relative; top: 2px; margin-right: 8px; } .access .access_map{ margin-bottom: 60px; } .access .access_map iframe{ width: 100%; height: 400px; border:1px solid var(--color-base-line-dark);; } .access .sc_address{ margin: 20px auto; text-align: center; font-size: 16px; line-height: 1.4em; } .access .sc_address img{ width: 220px; height: auto; margin: 0 0 10px; } .access .access_method dl dt.ttl{ width: 100%; background: var(--color-base-bg-light); border-left: 2px solid var(--color-base-main-dark); padding: 14px 20px 14px 54px; margin:0 0 20px; box-sizing: border-box; position: relative; font-size: 18px; font-weight: 500; text-align: left; color: var(--color-base-main-dark); position: relative; } .access .access_method dl dt.ttl:before{ content: ""; width: 24px; height: 24px; display: inline-block; position: absolute; top: 13px; left: 20px; background-size: contain; background-position: center center; background-repeat: no-repeat; background-image: url(/cmsdata/static/img/ico_train.svg); } .access .access_method dl#bass dt.ttl:before{ background-image: url(/cmsdata/static/img/ico_bass.svg); } .access .access_method dl#car dt.ttl:before{ background-image: url(/cmsdata/static/img/ico_car.svg); } .access .access_method dl#bike dt.ttl:before{ background-image: url(/cmsdata/static/img/ico_bike.svg); } .access .access_method dl#motorbike dt.ttl:before{ background-image: url(/cmsdata/static/img/ico_motorbike.svg); } .access .access_method h4{ font-size: 18px; margin-bottom: 8px; display: block; color: var(--color-base-main-dark); font-weight: bold; } .access .access_method .access_method_item:not(:last-of-type){ margin-bottom: 80px; } .access .access_method .accessimg{ margin: 30px auto; text-align: center; } .access .access_method .accessimg img{ max-width: 800px; } .access .access_method .table01 th, .access .access_method .table01 td{border-right: 1px solid var(--color-base-line-dark);} .access .access_method .table01 td a{ text-decoration: underline; color: var(--color-base-main-dark); } .access #bass .linkbtn{ display: flex; justify-content: center; margin-top: 30px; } .access #bass .linkbtn li{ margin-right: 30px; } .access #bass .linkbtn li:last-child{ margin-right: 0; } .access #bass .table01 td p:not(:last-of-type){ margin-bottom: 8px; } .access #bass .table01 td .bassnum{ background: #F5B096; font-family: var(--fontfamily-english-sub); width: 24px; height: 24px; text-align: center; font-size: 14px; line-height: 25px; display: inline-block; border-radius: 100px; font-weight: bold; margin: 0 4px 0 0; } .access #car .inter, .access #car .b2f{ border-top: 2px solid var(--color-base-line-light); padding-top: 40px; margin-top: 40px; } .pc.access #car .b2f .note{ text-align: center; } .access #car .asterisk{ text-align: center; margin: 0 auto 20px; font-weight: 500; } .access #car .asterisk span{ color: #F60300;} .access #car .inter ul.list{ border: 2px solid var(--color-base-line-light); border-top: none; } .access #car .inter ul.list li{ padding: 20px 30px; } .access #car .inter ul.list li:nth-child(odd) { background: var(--color-base-line-light); } .access #bike .table01{ margin-top: 12px; } .access #motorbike .table01{ margin-top: 10px; } .access .note li { line-height: 1.4em; position: relative; margin-bottom: 4px; } /* --------------------------------------------- サイトマップ（page.jsp?id=7） --------------------------------------------- */ .pc #sitemap .sitemap_list{ overflow: hidden; width: calc((100% - 60px)/2); float: left; } .pc #sitemap .sitemap_list:nth-child(2){ margin-left: 60px; } .pc #sitemap .sitemap_list dl:not(:last-of-type){ margin-bottom: 60px; } #sitemap .sitemap_list dt h3{ border-bottom: 1px solid var(--color-base-main-dark); padding: 14px 0; margin: 40px 0 0; box-sizing: border-box; position: relative; font-size: 18px; text-align: left; } #sitemap .sitemap_list dl:first-of-type dt h3{ margin-top: 0; } #sitemap .sitemap_list dt h3 a{ color: var(--color-base-main-dark); display: block; position: relative; } #sitemap .sitemap_list dt h3:before{ display: none; } #sitemap .sitemap_list dd li{ border-bottom: 1px solid var(--color-base-line-dark); } #sitemap .sitemap_list dd li:last-of-type{ margin-bottom: 0; } #sitemap .sitemap_list dd li a{ padding: 14px 0; display: block; position: relative;} #sitemap .sitemap_list dt h3 a::after, #sitemap .sitemap_list dd li a::after { position: absolute; top: calc(50% - 10px); right: 0; font-family: var(--fontfamily-icon); font-weight: normal; content: "\e5cc"; vertical-align: middle; display: block; font-size: 20px; color: var(--color-base-line-dark); }