@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@40,400,0..1,0"); @import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap"); @import url("https://use.fontawesome.com/releases/v6.4.0/css/all.css"); /*基本設定*/ :root { --color-base-text-dark: #535353; /*テキストの色*/ --color-base-text-light: #777777; /*テキストの色*/ --color-base-text-midlight: #999; /*テキストの色*/ --color-base-line-dark: #cfcfcf; /*主に濃い罫線グレー*/ --color-base-line-light: #d1d1d2; /*主に薄い罫線グレー*/ --color-base-bg-light: #f8f7fa;/*#f1f3f5;*/ /*薄いグレー */ --color-base-bg-red: #f8ebed; /*薄い赤 */ --color-base-bg-green: #eff5f0; /*薄い緑 */ --color-base-bg-blue: #dfe6eb; /*薄い藍 */ --color-base-bg-yellow: #fcf5e3; /*薄い黄色 */ --color-base-bg-purple: #f1edf2; /*薄い紫 */ --color-base-bg-lightblue: #ebf5f6; /*薄い水色 */ --color-base-main-red: #dd99a4; /*メインカラー　赤*/ --color-base-main-green: #afceb6; /*メインカラー　緑*/ --color-base-main-blue: #618099; /*メインカラー　藍*/ --color-base-main-yellow: #f2cb75; /*メインカラー　黄色*/ --color-base-main-purple: #b9a4bc; /*メインカラー　紫*/ --color-base-main-orange: #e8b182; /*メインカラー　オレンジ*/ --color-base-main-lightblue: #9ccfd3; /*メインカラー　水色*/ --color-base-accent-dark: #e51a1a; /*アクセントカラー　赤*/ --color-base-accent-light: #f2cb75; /*アクセントカラー　黄色*/ --color-base-accent-coupon: #dd99a4; /*アクセントカラー　*/ --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: "Imprima", sans-serif; /*--fontfamily-english-sub: 'Roboto Condensed', sans-serif;*/ --fontfamily-icon: "Material Symbols Outlined"; /**/ --color-goodslike: #dd99a4; --inner-Max-Width: 1200px; --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%; --box-shadow-small: 0 0 10px rgba(0,0,0,0.1); --box-shadow-medium: 0 0 15px rgba(0,0,0,0.1); } .material-symbols-outlined, .material-icons{ display: inline-flex; vertical-align: middle; } 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; } .desc{ word-break: break-all; } pre { font-family: var(--fontfamily-base) } /*ニュース画像がなくlogoに置き換わる箇所　共通*/ .img_bg_css.no_img_logo { background-size: 70% auto; } img.no_img_logo { background-image: url(../img/default_bg_logo.png); background-position: center; background-size: contain; } /*画像をimgで設置するがcssのcoverのようにする*/ .img_objfit { width: 100%; height: 100%; } .img_objfit img { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; border-radius: 0px; } .img_objfit img.no_img_logo { object-fit: contain; font-family: 'object-fit: contain;'; } body.pc .sp_view { display: none; } .ico_new { position: absolute; margin: 0; top: -10px; left: -10px; text-align: center; color: #fff; padding: 12px 0 12px 2px; font-size: 14px; border-radius: 50%; background: var(--color-base-accent-light); width: 50px; height: 50px; box-sizing: border-box; z-index: 10; font-weight: bold; letter-spacing: 0.05em; } .ico_jobs, .ico_new2, .ico_coupon { display: inline-block; text-decoration: none; font-size: 14px; padding: 0 2px; border-radius: var(--box-radius-small); margin: 0 0 0 6px; vertical-align: middle; line-height: 1.6em; position: relative; top: -2px; } .ico_jobs { background: var(--color-base-accent-light); color: #fff; font-size: 11px; padding: 0 4px 2px; } .ico_new2 { color: var(--color-base-accent-dark); } .ico_coupon { background: var(--color-base-accent-coupon); color: #fff; font-size: 11px; padding: 0 4px 2px; } span.sale { color: var(--color-base-accent-dark); } .to-top { position: fixed; bottom: 20px; right: 20px; z-index: 45; width: 50px; height: 50px; } .to-top a { position: absolute; width: 100%; height: 100%; text-indent: -9999em; display: block; background: rgba(0, 0, 0, 0.9); border-radius: 50%; opacity: 0.7; } .to-top a:before { font-family: var(--fontfamily-icon); content: "\e316"; font-size: 24px; width: 100%; height: 100%; display: block; text-indent: 0; text-align: center; line-height: 50px; position: absolute; color: #fff; top: 0; left: 0; } #main { width: 100%; margin: 0 auto; } @media (max-width: 1020px) and (min-width: 768px){ .pc #main{ width: 1020px; } } #contents { clear: both; padding: 0; 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);*/ background: var(--color-base-bg-light); } #contents-main { float: left; width: calc(100% - 320px); padding: 50px 30px; box-sizing: border-box; } #contents-main.all { width: 100%; float: none; box-sizing: border-box; padding: 30px 0; } #contents-main h3 { min-width: 260px; background: none; color: var(--color-base-main-dark); border: none; margin: 30px 0 10px; font-weight: 500; font-size: 16px; text-align: left; position: relative; box-sizing: border-box; } #contents-main h3:before { content: ""; display: inline-block; width: 24px; height: 24px; background: var(--color-base-main-lightblue); margin: 0 16px 0 0; border-radius: 3px; position: relative; top: 5px; } #contents-main #cat1_view h3:before { background: var(--color-base-main-red);} #contents-main #cat3_view h3:before { background: var(--color-base-main-yellow);} #contents-main #shop_info h3:before { background: var(--color-base-main-green);} #contents-main h3 .en{ font-family: var(--fontfamily-english); font-weight: 700px; font-size: 30px; margin-right: 12px; } #sub { width: 300px; float: right; box-sizing: border-box; padding: 50px 30px; } /* SNSアイコン */ .sns_icons { /* position: absolute; display: inline-block; top: 50px; right: 0px; */ } .sns_icons ul{ display: flex; gap:10px; } .sns_icons ul li { width: 35px; height: 35px; } .sns_icons ul li a { display: block; width: 100%; height: 100%; text-align: center; } /* .sns_icons ul li a i { font-size: 20px; line-height: 42px; color: #fff; } */ .sns_icons ul li.fb a { background: #333; } /* .sns_icons ul li.fb a i { font-size: 26px; line-height: 40px; } .sns_icons ul li.ig a { background: transparent; } .sns_icons ul li.ig a i { font-size: 36px; color: var(--color-base-text-dark); line-height: 33px; } .sns_icons ul li.line a i { font-size: 32px; color: var(--color-base-text-dark); line-height: 33px; } */ .sns_icons ul li a[href*="facebook"]{ background-image: url(../img/ico-facebook.svg); background-repeat: no-repeat; background-size: contain; } .sns_icons ul li a[href*="instagram"]{ background-image: url(../img/ico-instagram.png); background-repeat: no-repeat; background-size: contain; } .sns_icons ul li a[href*="twitter"] { background-image: url(../img/ico-x.svg); background-repeat: no-repeat; background-size: contain; } .sns_icons ul li a[href*="youtube"] { background-image: url(../img/ico-youtube.svg) ; background-repeat: no-repeat; background-size: contain; } .sns_icons ul li a[href*="lin.ee"], .sns_icons ul li a[href*="line.me"] { background-image: url(../img/ico-line.svg); background-repeat: no-repeat; background-size: contain; } /*----------------------------------------- header部 -----------------------------------------*/ #main_header h1 { display: none; } .pc #main_header { position: relative; min-width: var(--inner-Min-Width); border-bottom: 1px solid var(--color-base-line-light); } .bf0 #main_header { background: #FFF; } #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; } #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; } #fixed-header ul li a span{ display: none; } } */ /*-------- ----------------------------------------------- .header_logo ロゴ表示領域 -------------------------------------------------------*/ .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; } .header_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; height: 100px; box-sizing: border-box; } .header_wrap .sns_icons{ order: 0; } .header_wrap .sns_icons ul{ } .header_wrap .sns_icons ul li{ padding: 0; float: none; } .pc .header_logo { width: 235px; height: 50px; position: absolute; left: 0; right: 0; margin: 0 auto; padding: 0 35px 0 0; } .header_logo img { max-width: 100%; } .head_tel{ width: 220px; background-color: #f1f3f5; position: relative; padding: 5px 10px; text-align: right; border-radius: 5px; order: 1; box-sizing: border-box; } .head_tel p{ color:var(--color-base-main-blue); font-size: 14px; display: inline-block; text-align: left; font-weight: bold; } .head_tel p span{ color: #595757; font-size: 23px; } .head_tel::before{ position: absolute; content:"support_agent"; font-family:"Material Symbols Outlined"; font-size: 45px; color: var(--color-base-main-blue); top: 20px; left: 5px; } /*------------------------------------------------------- グローバルメニュー ------------------------------------------------------------*/ .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 .glo_menu_list { display: flex; justify-content: space-evenly; width: var(--inner-Width); max-width: var(--inner-Max-Width); min-width: var(--inner-Min-Width); margin: 0 auto; } .glo_menu_list li { /*flex-grow: 1;*/ /* height: 100%; padding: 16px 20px; */ width: calc(100%/6 - 10px); box-sizing: border-box; position: relative; vertical-align: bottom; text-align: center; /* display: inline-block; */ } .glo_menu_list li a{ display: block; box-sizing: border-box; text-align: center; padding: 16px 0; position: relative; } .glo_menu_list li:not(:last-of-type) a::after { content: ""; display: block; height: 24px; width: 0; position: relative; bottom: 0; border-right: 1px solid #d6d6d6; float: right; } .glo_menu_list li a::before{ position: absolute; content: ""; bottom: 0; left: 44%; width: 20px; height: 10px; border-radius:100px 100px 0 0; } .glo_menu_list li:nth-child(1) a::before{ background:var(--color-base-main-red); } .glo_menu_list li:nth-child(2) a::before{ background:var(--color-base-main-lightblue); } .glo_menu_list li:nth-child(3) a::before{ background:var(--color-base-accent-light); } .glo_menu_list li:nth-child(4) a::before{ background:var(--color-base-main-blue); } .glo_menu_list li:nth-child(5) a::before{ background:var(--color-base-main-green); } .glo_menu_list li:nth-child(6) a::before{ background:var(--color-base-main-purple); } .glo_menu_list li:last-child {} .glo_menu_list .glo_menu_inner { cursor: pointer; width: auto; height: 100%; display: inline-block; box-sizing: border-box; position: relative; text-align: center; line-height: 1.2em; 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 { /*縦のmargin,paddingは０以外指定NG*/ display: flex; } .AllPageBnr .bnr_title { display: none; /*jsで表示させる*/ } .AllPageBnr .bnr_title p {} .AllPageBnr .bnr_list { /*０件の時に完全に残らないように*/ display: none; /*jsで表示させる*/ padding: 0; border: 0; margin: 0; } .AllPageBnr .bnr_list .bnr_item {} .AllPageBnr .bnr_list .bnr_item em {} /*緊急のおしらせ　TOP以外　other_page*/ .AllPageBnr.other_page { width: 100%; margin: 0; text-align: center; } .AllPageBnr.other_page .bnr_list { width: 100%; margin: 0; border: none; } .AllPageBnr.other_page .bnr_list .bnr_item { border-bottom: 1px solid var(--color-base-line-light); text-align: center; padding: 10px 0 16px; font-size: 18px; background: #f8ebed; color: var(--color-base-accent-dark); } .AllPageBnr.other_page .bnr_list .bnr_item em.date { display: none; } .AllPageBnr.other_page .bnr_list .bnr_item a { text-decoration: underline; color: var(--color-base-accent-dark); } .AllPageBnr.other_page .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: 24px; height: 24px; display: inline-block; text-align: center; vertical-align: middle; margin-right: 12px; font-size: 18px; line-height: 24px; position: relative; top: -1px; } /*----------------------------------------------- main_banner -----------------------------------------------*/ .w_full#banner{ width: 100%; margin: 0 0 20px; padding: 140px 0 0; overflow: hidden; position: relative; background: transparent no-repeat center / cover; } /*----------------------------------------------- guidenav -----------------------------------------------*/ .guidenav{ /*width: 420px;*/ width: calc(100% - 785px); } .guidenav ul{ display: flex; flex-wrap: wrap; gap: 26px 20px; justify-content: space-between; } .guidenav ul li{ width: calc(100%/2 - 10px); text-align: center; box-sizing: border-box; } .guidenav ul li:last-child{ border: none; } .guidenav ul li a{ display: block; padding: 31px 4px; 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; background-color: #fff; border-radius: var(--box-radius-medium); box-shadow: var(--box-shadow-medium); } .guidenav ul li a:hover{ opacity: 0.8; } .guidenav ul li a:after{ content: ""; width: 30px; height: 30px; display: block; position: absolute; bottom: 0; right: 0; border-radius: 100% 0 var(--box-radius-medium) 0; transition-duration: 0.5s; } .guidenav ul li.shop a::after { background: var(--color-base-main-lightblue); } .guidenav ul li.access a::after { background: var(--color-base-main-purple); } .guidenav ul li.info a::after { background: var(--color-base-main-blue); } .guidenav ul li.event a::after { background: var(--color-base-main-green); } .guidenav ul li.gourmet a::after { background: var(--color-base-main-red); } .guidenav ul li.kids a::after { background: var(--color-base-main-yellow); } .guidenav ul li a:hover:after{ opacity: 0.8; } @media (max-width: 1240px) { .guidenav ul li a{ font-size: 14px; } } .guidenav ul li a:before{ content: ""; width: 46px; height: 46px; display: block; margin: 0 auto 12px; background-image: url("../img/ico_shop.svg"); background-repeat: no-repeat; background-position: top center; } .guidenav ul li.access a:before{background-image: url("../img/ico_access.svg"); width: 60px;} .guidenav ul li.info a:before{background-image: url("../img/ico_info.svg");margin-bottom: 20px;} .guidenav ul li.event a:before{background-image: url("../img/ico_event.svg");margin-bottom: 20px; width: 60px;} .guidenav ul li.gourmet a:before{background-image: url("../img/ico_gourmet.svg"); height: 55px;} .guidenav ul li.kids a:before{background-image: url("../img/ico_kids.svg"); height: 55px;} .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; } .footer_minibnr ul li{ width: calc((100% - 90px)/4); margin:0 30px 30px 0; } .footer_minibnr ul li:nth-child(4n){ margin-right: 0; } .footer_minibnr ul li:nth-child(n + 4){ margin-bottom: 0; } .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; */ width: 45%; text-align: center; color: var(--color-base-text-dark); position: relative; } footer .sc_foot_desc .footer-sc::after{ content: ""; width: 1px; height: 100%; display: inline-block; background:var(--color-base-line-dark); position: absolute; right: 0px; top: 0; } footer .sc_foot_desc .footer-sc .sc_logo{ width: 345px; margin: 0 0 30px; } footer .sc_foot_desc .footer-sc .sc_name{ font-size: 16px; margin-bottom: 6px; } footer .sc_foot_desc .footer-sc dd.add{ line-height: 1.4em; text-align: left; } footer .sc_foot_desc .footer-sc dd.add p.tel{ padding: 0 0 25px; } footer .sc_foot_desc .footer-sc .address span.zip, footer .sc_foot_desc .footer-sc .tel span.ceo, footer .sc_foot_desc .footer-sc .tel span.lost{ padding: 0 15px 0 0; } footer .footer_menu{ width: 55%; padding: 0 0 0 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: space-between; -ms-flex-pack: space-between; justify-content: space-between; -webkit-box-sizing: border-box; box-sizing: border-box; } footer .footer_menu dl { width: calc(100% / 3 - 30px); margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: top; } @media screen and (max-width:1270px){ footer .footer_menu dl {width: calc(100% / 3 - 10px);} } footer .footer_menu dl dt { margin: 0 0 25px; font-size: 20px; } footer .footer_menu dl dd { padding-left: 8px; } 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: 20px 0; text-align: center; background: #fff; /* background: var(--color-base-main-dark); */ color: var(--color-base-text-dark); } /* .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; /*border-bottom: 1px solid var(--color-base-line-light); padding: 0 0 20px;*/ gap:16px; } footer .ad_foot_desc ul li { /*margin-right: 16px;*/ position: relative; } .pc footer .ad_foot_desc ul li:after{ content: ""; width: 1px; height: 12px; background: var(--color-base-line-light);; 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: 13px; padding-right: 27px; color: var(--color-base-text-dark); } footer .ad_foot_desc ul li a::after{ font-family: var(--fontfamily-icon); content: "\e89e"; vertical-align: middle; font-size: 15px; color: var(--color-base-main-dark); font-variation-settings: 'FILL'1, 'wght'600, 'GRAD'200, 'opsz'48; margin-left: 6px; } footer .ad_foot_desc ul li:not(:first-of-type) a::after{ content: "\e5cc"; } footer .ad_foot_desc .dev_logo{ padding: 20px 0 0; } footer .ad_foot_desc .dev_logo a{ display: flex; justify-content: center; align-items: center; width: 250px; margin: 0 auto; } footer .ad_foot_desc .dev_logo img{ width: 100px; margin-right: 10px; } footer .copy{ font-size: 13px; color: #fff; background: #004d9f; padding: 8px 0; } footer .copy p{ text-align: center; font-size: 13px; } /********************************** メインバナー、中バナー、小バナー関連 TOPページ、全ページフッター共通 ******************************************/ .main_banner_inner{ display: flex; flex-wrap: wrap; justify-content: center; width: var(--inner-Width); max-width: var(--inner-Max-Width); min-width: var(--inner-Min-Width); margin: 0 auto; box-sizing: border-box; gap: 25px; } #banner { position: relative; /*width: calc(100% - 445px); min-width: 755px;*/ width: 755px; } #banner .swiper-container { width: 100%; margin: 0; overflow: hidden; box-shadow: var(--box-shadow-medium); } #banner .swiper-container li img { border-radius: var(--box-radius-small); } #banner .swiper-container li.swiper-slide-next, #banner .swiper-container li.swiper-slide-prev { opacity: 0.5; } .pc #banner .swiper-container li { min-width: 755px; border: 20px solid #fff; background: #fff; box-sizing: border-box; border-radius: var(--box-radius-medium); } #banner .swiper-container li a{ width: 100%; display: block; padding: 0; } #banner .swiper-container li img { /*border: 20px solid #fff; background: #fff; box-sizing: border-box;*/ border-radius: var(--box-radius-medium); } #banner .swiper-pagination { height: 8px; bottom: 0; line-height: 0; } #banner .swiper-pagination-clickable .swiper-pagination-bullet { margin: 0 7px; background: #fff; opacity: 1; } #banner .swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--color-base-text-dark); } @media screen and (max-width:1340px){ .guidenav{ width: calc(100% - 700px);} .guidenav ul { gap: 14px 10px;} .guidenav ul li a{ padding: 26px 4px;} #banner { width: 670px;} #banner,.pc #banner .swiper-container li{min-width: auto;} } @media screen and (max-width:1270px){ .guidenav { width: calc(100% - 680px); } .guidenav ul { gap: 13px 10px;} .guidenav ul li a:after{ width: 20px; height: 20px;} #banner { width: 650px;} } /* 小バナー */ #smallbanner1 .swiper-container li a{ width: 100%; display: block; padding: 0; box-sizing: border-box; border: 10px solid #fff; text-align: center; background: #fff; border-radius: var(--box-radius-medium); } /* #banner .swiper-button-prev, #banner .swiper-button-next{ width: 45px; height: 45px; background: #fff; border-radius: 50%; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.09); border: 1px solid #E5E5E5; } #banner .swiper-button-prev:after, #banner .swiper-button-next:after{ text-indent: 100%; white-space: nowrap; overflow: hidden; } */ /* #banner .swiper-button-next:before{ content: ""; position: absolute; top: calc(50% - 6px); right: 16px; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #5A5A5A; transition: all 0.2s; } #banner .swiper-button-next:after{ content: ""; position: absolute; top: calc(50% - 6px); right: 18px; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #FFF; transition: all 0.2s; } */ /* #banner .swiper-button-prev:before{ content: ""; position: absolute; top: calc(50% - 6px); right: 18px; width: 0; height: 0; border-style: solid; border-width: 6px 10px 6px 0; border-color: transparent #5A5A5A transparent transparent; transition: all 0.2s; } #banner .swiper-button-prev:after{ content: ""; position: absolute; top: calc(50% - 6px); right: 16px; width: 0; height: 0; border-style: solid; border-width: 6px 10px 6px 0; border-color: transparent #FFF transparent transparent; transition: all 0.2s; } */ .pc .main_banner_area { height: auto; margin: 0 auto; padding: 0; padding: 45px 0; background: url("../img/bg_thukashin.jpg") no-repeat; background-position: center bottom; background-size: cover; justify-content: center; background-color: rgba(255,255,255,0.3); background-blend-mode: lighten; } .main_banner_area .bnr_wrap { 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; } /*Swiperパーツの制御*/ .main_banner_area #banner .swiper-pagination { position: absolute; margin: auto; left: 0; right: 0; bottom: 0; } .main_banner_area #banner .swiper-pagination-bullet { width: 35px; height: 4px; border-radius: 0; } .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); */ } #banner .swiper-button-next { right: -13px; left: auto; } #banner .swiper-button-prev { left: -13px; right: auto; } #smallbanner1 .swiper-button-next{ right: -15px; left: auto; } #smallbanner1 .swiper-button-prev{ left: -15px; right: auto; } #smallbanner1 .swiper-button-next:after, #smallbanner1 .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"; */ font-size: 32px; font-weight: bold; color: var(--color-base-text-dark); color: var(--color-base-text-dark); text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0-1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #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: 100%; margin: 20px auto 0px; /*padding: 0 14px;*/ position: relative; box-sizing: border-box; } #smallbanner2 .swiper-container, .main_banner_area #smallbanner1 .swiper-container { overflow: hidden; box-sizing: border-box; } #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: 0; width: 30px; height: 100%; margin-top: 0; } #smallbanner2 li, .main_banner_area #smallbanner1 li { box-shadow: var(--box-shadow-small); } /*これからこれからこれからこれからこれからこれからこれからこれからこれからこれからこれからこれから*/ /*******************************************/ .footer.shopsearch { border-top: 1px solid var(--color-base-line-dark); /* border-bottom: 1px solid var(--color-base-line-dark);*/ padding: 30px 0; } .footer.shopsearch h4 { font-family: var(--fontfamily-english); color: var(--color-base-main-dark); font-weight: 500; text-align: center; font-size: 32px; padding: 20px 0 40px; } .shop_catlist { background: var(--color-base-bg-light); border-radius: var(--box-radius-large); width: var(--inner-Width); max-width: var(--inner-Max-Width); min-width: var(--inner-Min-Width); margin: 0 auto 60px; } .shop_catlist .shoplist { padding: 0 20px 30px; } .shop_catlist h4 { font-family: var(--fontfamily-english); color: var(--color-base-main-dark); text-align: center; font-size: 30px; padding: 30px 0 40px; } .shop_catlist ul#this_cat_shoplist { text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .shop_catlist ul#this_cat_shoplist li { } .shop_catlist ul#this_cat_shoplist li a { padding: 10px 40px 10px 30px; background: #fff; 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{ line-height: 0; position: relative; top: -3px; } .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; gap:16px; } /*.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 - 12px); /*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; text-align: center; box-shadow: var(--box-shadow-medium); } .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: 30px; color: var(--color-base-main-lightblue); } .footer.shopsearch .trendtag{ } .footer.shopsearch .trendtag .tag_list{ justify-content: center; gap: 12px; padding: 0 20px 30px; flex-wrap: wrap; } .footer.key_logo{ padding: 30px 0; border-top:1px solid var(--color-base-line-dark); } .footer.key_logo ul{ display: flex; justify-content: center; gap:40px; } .footer.key_logo ul li{ width: 150px; } .footer.key_logo ul li img{ width: 100%; } .footer.dev_logo{ padding: 20px 0; border-top:1px solid var(--color-base-line-dark); text-align: center; } .footer.dev_logo a{ display: flex; justify-content: center; align-items: center; width: 250px; margin: 0 auto; } .footer.dev_logo img{ width: 80px; margin-right: 15px; } .view .table01 { border-collapse: collapse; width: 100%; border-bottom: 2px solid var(--color-base-line-light); } .view .table01 tr { } .view .table01 th { text-align: center; font-weight: bold; width: 24%; } .view .table01 th, .view .table01 td { padding: 20px 10px; border-bottom: 1px solid var(--color-base-line-dark); } .sidemenu { padding: 16px; box-shadow: var(--box-shadow-medium); box-sizing: border-box; border-radius: var(--box-radius-large); } .sidemenu dt { font-family: var(--fontfamily-english); font-weight: 700; font-size: 24px; text-align: center; padding: 0 0 10px; /*border-bottom: 2px solid var(--color-base-line-light);*/ } .sidemenu dt::after { content: ""; display: block; width: 40%; height: 4px; background: var(--color-base-main-lightblue); margin: 12px auto 0; } /*緑指定*/ .eventnews .sidemenu dt::after, .calendar .sidemenu dt::after{background: var(--color-base-main-green);} /*紫指定*/ .benefit .sidemenu dt::after, .access .sidemenu dt::after{background: var(--color-base-main-purple);} .sidemenu dd > a { display: block; padding: 20px 10px 10px; font-weight: bold; position: relative; line-height: 1.6em; } .sidemenu dd > a:after { position: absolute; top: calc(50% - 6px); right:0; font-family: var(--fontfamily-icon); font-weight: normal; content: "\e5cc"; vertical-align: middle; display: block; font-size: 20px; color: #FFF; background: var(--color-base-main-lightblue); border-radius: 100px; padding: 0 0 0 2px; /*line-height: 1;*/ } /*緑指定*/ .eventnews .sidemenu dd > a:after, .calendar .sidemenu dd > a:after{ background: var(--color-base-main-green);} /*紫指定*/ .benefit .sidemenu dd > a:after, .access .sidemenu dd > a:after{background: var(--color-base-main-purple);} .sidemenu dd ul { font-size: 90%; /*border:1px solid var(--color-base-line-dark);*/ } .sidemenu dd ul li{ /*border-bottom:1px solid var(--color-base-line-dark);*/ position: relative; } .sidemenu dd ul li::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: 20px; color: var(--color-base-line-dark); } .sidemenu dd ul li:last-child{ border-bottom:none; } .sidemenu dd ul li a { padding: 10px; line-height: 1.5em; display: block; } .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: 40px 0 ; } #h4_shopsearch_tag a { color: var(--color-base-main-dark); } #h4_shopsearch_tag:before { content: "#"; margin: 0 12px 0 0; font-family: var(--fontfamily-english); font-weight: 700; color: var(--color-base-main-lightblue); } .tag_list { padding: 0; text-align: center; display: flex; align-items: center; justify-content: space-between; gap: 5px; } .tag_list_name { margin: 0; } .tag_list_name a { background: #fff; display: block; font-size: 1em; border-radius: 50px; padding: 8px 16px; box-sizing: border-box; box-shadow: var(--box-shadow-medium); } .tag_list_name a:before { content: "#"; margin: 0 3px 0 0; color: var(--color-base-main-lightblue); font-family: sans-serif; font-weight: bold; font-size: 18px; vertical-align: bottom; display: inline-block; position: relative; top: 2px; } #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); 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_tw.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: static; margin: 0; display: block; position: absolute; bottom: 6px; border:1px solid var(--color-base-main-red); background: #FFF; border-radius: var(--box-radius-small); padding: 0 8px 6px 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-text-dark); } .goods_like_btn.mini p i { display: inline-block; font-size: 20px; color: var(--color-base-main-red); 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; padding: 0; /* 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-main-red); 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-main-red); 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: 60px;*/ } .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%; z-index: 10; position: relative; } .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: 14px; 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: 0 0 8px; text-align: left; background: none; } .shop_header #shop_title .top_logo img { max-height: 60px; } .shop_header .shopmenu { position: absolute; right: 30px; bottom: 20px; z-index: 10; display: flex; gap:16px } .shop_header .shopmenu li { width: calc(100% / 3); margin: 0; position: relative; background: #FFF; border-radius: var(--box-radius-large); box-shadow: var(--box-shadow-medium); 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; overflow: hidden; } .shop_header .shopmenu li a:hover { text-decoration: none; } .shop_header .shopmenu li a:before { content: ""; display: block; width: 20px; height: 20px; position: absolute; bottom: 0; right: 0; border-radius: 100% 0 var(--box-radius-medium) 0; } .shop_header .shopmenu li.shopnews a:before {background: var(--color-base-main-red);} .shop_header .shopmenu li.shopinfo a:before {background: var(--color-base-main-green);} .shop_header .shopmenu li.recruit a:before {background: var(--color-base-main-yellow);} .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 20px; width: calc(100% - 470px); } .shop_header #shop_status .eigyouhour p{white-space: pre-wrap; padding: 14px 30px 14px 63px; position: relative;} .shop_header #shop_status .tel_floor { display: flex; } .shop_header #shop_status .tel_floor .tel { width: 30%; } .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); line-height: 0.8; } .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; position: absolute; top: 16px; left: 20px; } .shop_header #shop_status .tel_floor p.tel:before { content: "\e0b0"; } .shop_header #shop_status .tel_floor p.floor:before { content: "\e0c8"; } /*個別ニュース、クーポン、リクルート　ページのヘッダーを調整*/ 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: 60px; /* background-size: 500px; background-image: url(../img/bg_round.png), url(../img/bg_wave.png), url(../img/bg_leaf.png), url(../img/bg_bird.png), url(../img/bg_stairs.png); background-repeat: no-repeat,no-repeat,no-repeat,no-repeat; background-position: -2% -2%,left center,-2% bottom, 102% 20%,right bottom 200px;*/ /*background-color: rgba(255,255,255,0.9); background-blend-mode: lighten;*/ position: relative; z-index: 0; } .view #shoppage #shop_info { padding: 0 0 40px; } #shoppage #shop_info .intro { margin-bottom: 30px; overflow: hidden; display: flex; align-items: flex-start; } #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: 16px; font-weight: 700; 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: 14px; } #shoppage #shop_info .image { width: 45%; margin: 0 0 0 36px; box-sizing: border-box; border-radius: var(--box-radius-large); overflow: hidden; } #shoppage #shop_info .image img { border-radius: 0px; width: 100%; } #shoppage #shop_info .pickup { margin: 0 0 30px; font-size: 16px; background: var(--color-base-bg-light); border-radius: var(--box-radius-large); } #shoppage #shop_info .pickup div { padding: 24px; overflow: hidden; box-sizing: border-box; display: flex; align-items: center; border-bottom: 1px solid var(--color-base-line-dark); } #shoppage #shop_info .pickup div:last-of-type { border-bottom:0; } #shoppage #shop_info .pickup div.shop-tel p{ white-space: normal; } #shoppage #shop_info .pickup h5 { width: 220px; color: var(--color-base-main-dark); position: relative; } #shoppage #shop_info .pickup h5:before { font-family: var(--fontfamily-icon); margin: 0 10px 0 0; font-size: 24px; vertical-align: bottom; line-height: 0.8; } #shoppage #shop_info .pickup .shop-eigyouhour h5:before { content: "\e8b5";} #shoppage #shop_info .pickup .shop-tel h5:before { content: "\e0b0";} #shoppage #shop_info .pickup .shop-tokuten h5:before { content: "\ea12";} #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 p { white-space: pre-wrap; width: calc(100% - 220px); font-size: 14px; } #shoppage #shop_info .data { clear: both; padding: 0; } #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{ padding: 20px 0; } #shoppage #shop_info table.table01 td{ padding: 20px 30px; } #shoppage #shop_info table.table01 th::before { content:""; margin-right: 16px; border-left: 3px solid var(--color-base-main-green); } /*#shoppage #shop_info table.table01 td::before { content:""; margin-right: 30px; border-left: 1px solid var(--color-base-line-light); }*/ #shoppage #shop_info table.table01 td p, #shoppage #shop_info table.table01 td pre{ display: inline-block; } #shoppage #shop_info table.table01 .shop-generic1 td, #shoppage #shop_info table.table01 .shop-gourmet2 td{ display: flex; flex-wrap: wrap; gap:12px 16px; } #shoppage #shop_info .data table.table01 td em { font-size: 14px; } #shoppage #shop_info .data table.table01 td em[class*="payment"] { padding: 6px 0; display: flex; align-items: center; } #shoppage #shop_info .data table.table01 tr.shop-generic1 em:before, #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em:before{ font-family: var(--fontfamily-icon); font-weight: normal; font-size: 20px; font-variation-settings: 'FILL'1; vertical-align: middle; margin: 0 5px 0 0; line-height: 0.8; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em:before{ color: var(--color-base-main-lightblue); } #shoppage #shop_info .data table.table01 td em[class*="payment"]:before { content: ""; display: inline-block; width: 45px; height: 25px; background-repeat: no-repeat; background-size: contain; background-position: center center; margin: 0; } /*支払いサービスアイコン*/ #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-a:before {background-image:url(../img/pymt/ico-cc-visa.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-b:before {background-image:url(../img/pymt/ico-cc-jcb.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-c:before {background-image:url(../img/pymt/ico-cc-amex.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-d:before {background-image:url(../img/pymt/ico-cc-diners.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-e:before {background-image:url(../img/pymt/ico-cc-dc.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-f:before {background-image:url(../img/pymt/ico-cc-mufg.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-g:before {background-image:url(../img/pymt/ico-cc-saison.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-h:before {background-image:url(../img/pymt/ico-cc-aplus.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-i:before {background-image:url(../img/pymt/ico-cc-nicos.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-j:before {background-image:url(../img/pymt/ico-cc-jaccs.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-k:before {background-image:url(../img/pymt/ico-cc-ts3.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-l:before {background-image:url(../img/pymt/ico-cc-tsukashin.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-m:before {background-image:url(../img/pymt/ico-dm-id.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-n:before {background-image:url(../img/pymt/ico-dm-quic.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-o:before {background-image:url(../img/pymt/ico-dm-nanaco.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-p:before {background-image:url(../img/pymt/ico-dm-rakuten.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-q:before {background-image:url(../img/pymt/ico-dm-ic.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-r:before {background-image:url(../img/pymt/ico-py-yucho.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-s:before {background-image:url(../img/pymt/ico-py-pp.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-t:before {background-image:url(../img/pymt/ico-py-line.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-u:before {background-image:url(../img/pymt/ico-py-rakuten.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-v:before {background-image:url(../img/pymt/ico-py-d.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-w:before {background-image:url(../img/pymt/ico-py-au.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-x:before {background-image:url(../img/pymt/ico-py-mer.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-y:before {background-image:url(../img/pymt/ico-py-jcoin.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-z:before {background-image:url(../img/pymt/ico-py-amasaki.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-1:before {background-image:url(../img/pymt/ico-py-ali.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-2:before {background-image:url(../img/pymt/ico-py-wechat.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-3:before {background-image:url(../img/pymt/ico-tax.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-4:before {display: none; } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-5:before {background-image:url(../img/pymt/ico-cc-epos.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-6:before {background-image:url(../img/pymt/ico-cc-master.png) } #shoppage #shop_info .data table.table01 tr.shop-generic1 em.payment-7:before {background-image:url(../img/pymt/ico-py-habatan.png) } /*グルメサービスアイコン*/ #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service1:before { content: "\e0b0"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service2:before { content: "\f1cc"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service3:before { content: "\e56c"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service4:before { content: "\eb42"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service5:before { content: "\efee"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service6:before { content: "\eb41"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service7:before { content: "\e8d0"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service8:before { content: "\e325"; } #shoppage #shop_info .data table.table01 tr.shop-gourmet2 em.service9:before { content: "\eb29"; } #shoppage #shop_info .data table.table01 td span.attention { display: block; font-size: 10px; } /*white-space: preのオプション*/ .shop-eigyouhour td p, .shop-tokuten td p { white-space: pre-wrap; } #shoppage #shop_info table.table01 th { vertical-align: top; font-weight: 700; text-align: left; width: 24%; border-bottom: 1px solid var(--color-base-line-dark); } #shoppage #shop_info table.table01 td { border-bottom: 1px solid var(--color-base-line-dark); } #shoppage #shop_info table.table01 tr.shop-map td { font-weight: bold; font-size: 14px; } #shoppage #shop_info table.table01 tr.shop-map td a { display: inline-block; font-weight: normal; margin-left: 40px; text-decoration: none; text-align: center; vertical-align: middle; position: relative; padding-right: 40px; } #shoppage #shop_info table.table01 tr.shop-map td a::after { font-family: var(--fontfamily-icon); content: "\e5cc"; display: block; width: 30px; height: 30px; box-sizing: border-box; border-radius: 50%; background: var(--color-base-main-green); color: #FFF; position: absolute; right: 0; top: -3px; text-align: center; font-size: 24px; padding: 4px 0 4px 1px; } #shoppage #shop_info table.table01 tr.shop-map td a:hover::before { display: inline-block; } #shoppage #shop_info table.table01 tr.shop-dealitem td { /* font-size: 0.8em;*/ } /*メンバーズカードアイコンを表示する*/ #shoppage #shop_info table.table01 tr td.card{ padding: 20px 30px 20px 85px; background: url("../img/ico-card.png") no-repeat; background-position: 30px center; background-size: auto; } /*エポスカードアイコンを表示する*/ #shoppage #shop_info table.table01 tr td.card_epos{ padding: 20px 30px 20px 70px; background: url("../img/ico-epos.png") no-repeat; background-position: 30px center; background-size: auto; } /*エポスカードお買物券を表示する*/ #shoppage #shop_info table.table01 tr.shop-point_service .ps-3{ padding: 20px 0 20px 110px; background-image: url("../img/ico-epos-crd.png"),url("../img/ico-epos-csh.png") ; background-repeat: no-repeat, no-repeat; background-position: -3px center, 50px center; background-size: 50px, 50px; } #shoppage #shop_info table.table01 tr.shop-point_service .ps-2{ padding: 0 0 0 70px; background: url("../img/ico-epos-csh.png") no-repeat; background-position: 0px center; background-size: 50px; } #shoppage #shop_info table.table01 tr.shop-point_service .ps-1{ padding: 20px 0 20px 60px; background: url("../img/ico-epos-crd.png") no-repeat; background-position: 0px center; background-size: 50px; } /* つかしんお買い物券を表示する */ #shoppage #shop_info table.table01 tr td.ticket_okaimonoken{ padding: 20px 30px 20px 90px; background: url("../img/ico-okaimonoken.png") no-repeat; background-position: 30px center; background-size: 45px; } #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-main-green); background: #FFF; color: var(--color-base-text-dark); border-radius: var(--box-radius-large); 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-main-green); 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; display: flex; justify-content: center; column-gap: 16px; width: 70%; margin: 40px auto 0; box-sizing: border-box; } #shoppage #shop_info .siteurl p { box-sizing: border-box; padding: 0 5px; margin: 0; width: calc(100%/4); } #shoppage #shop_info .siteurl p a { display: block; padding: 20px 0; text-align: center; width: 100%; box-sizing: border-box; border-radius: var(--box-radius-large); position: relative; color: var(--color-base-main-dark); background: #FFF; box-shadow: var(--box-shadow-medium); overflow: hidden; } #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 { content: ""; display: block; width: 25px; height: 25px; position: absolute; bottom: 0; right: 0; border-radius: 100% 0 var(--box-radius-medium) 0; background: var(--color-base-main-green); } #shoppage #shop_info .siteurl p.shop-url a { border-color: var(--color-base-main-dark); } #shoppage #shop_info .siteurl p.shop-url a:before { content: ""; display: block; width: 25px; height: 30px; margin: 0 auto; background: url(../img/ico-shopurl.svg) no-repeat; } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a:before { content: "公式SNS"; background: url(../img/ico-shopurl.svg) no-repeat; } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="facebook"]:before { content: "Facebook"; background-image: url(../img/ico-facebook.svg); } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="instagram"]:before { content: "instagram"; background-image: url(../img/ico-instagram.svg); } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="twitter"]:before, #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="https://x.com/"]:before{ content: "X"; background-image: url(../img/ico-x.svg); } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="bsky"]:before { content: "Bluesky"; background-image: url(../img/ico-bsky.svg); } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="youtube"]:before { content: "YouTube"; background-image: url(../img/ico-youtube.svg); } #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"; background-image: url(../img/ico-line2.svg); } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="tiktok"]:before { content: "TikTok"; background-image: url(../img/ico-tiktok.svg); } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a::before{ background-position: center top; background-repeat: no-repeat; background-size: 25px; padding-top: 30px; display: block; } #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="facebook"]:after {background: var(--color-base-main-blue);} #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="instagram"]:after {background: var(--color-base-main-purple);} #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="twitter"]:after, #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="https://x.com/"]:after {background: var(--color-base-text-dark);} #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="bsky"]:after {background: var(--color-base-main-blue);} #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="youtube"]:after {background: var(--color-base-main-red);} #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="lin.ee"]:after {background: var(--color-base-main-green);} #shoppage #shop_info .siteurl p[class*="shop-other_url"] a[href*="tiktok"]:after {background: var(--color-base-text-dark);} #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 { margin: 60px 0 30px; padding: 0; position: relative; box-sizing: border-box; color: var(--color-base-main-dark); } #cat5_view h3:before,#cat1_view h3:before, #cat3_view h3:before, .view #shop_info h3:before { top: 1px; } #contents-main article.main.item h3 { color: var(--color-base-main-dark); font-weight: 700; margin-top: 0; } #contents-main article.main.item h3::before { background: var(--color-base-main-red); } #contents-main article.main.recruititem h3::before { background: var(--color-base-main-yellow); } /* #contents-main article.main.item h3 { display: block; padding: 10px 0; } */ /* #cat1_view h3::before, #cat3_view h3::before, article.main.item .gcat.cat1::before, article.main.item .gcat.cat2::before, article.main.item .gcat.cat3::before, .view #shop_info h3::before { display: block; font-family: var(--fontfamily-english); font-size: 22px; font-weight: bold; } */ /* cat(n)_viewの見出し・ショップ情報の見出し - 文字*/ /* #cat1_view h3::before { content: "Shopnews!"; } #cat3_view h3::before { content: "Work together"; } article.main.item .gcat.cat1::before { content: "Shopnews!"; } article.main.item .gcat.cat2::before { content: "Coupon"; } .view #shop_info h3::before { content: "Shop detail"; } article.main.item .gcat.cat3::before { content: "Work together"; } */ /*********************/ /*店長ボイス(cat5 view)*/ #cat5_view { display: flex; align-items: center; width: var(--inner-Width); max-width: var(--inner-Max-Width); min-width: var(--inner-Min-Width); margin: 0 auto; } #cat5_view h3 { width: 200px; border: 0; padding: 0; margin: 0; background: none; } #cat5_view h3 .en { font-family: var(--fontfamily-english); font-weight: 500; font-size: 30px; } #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: var(--box-radius-large); box-shadow: var(--box-shadow-medium); } #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; } #cat5_view article.item h4 .item_main { /*font-weight: bold;*/ } /**/ #cat1_view { overflow: hidden; margin: 0 0 36px; } .item_coupon #cat1_view.cat_items > .inner{ width: 100%; padding: 0; } #cat1_view .itemBox{ display: flex; justify-content: space-between; gap:40px; flex-wrap: wrap; } #cat1_view article.item { width: 50%; width: calc((100% - 40px) /2); margin: 0 0 20px; padding: 0; box-sizing: border-box; position: relative; height: auto; display: flex; justify-content: space-between; flex-direction: row-reverse; } .cat_items article.item .image, .bf5 article.item .image { width: 220px; height: 280px; text-align: center; position: relative; box-sizing: border-box; border-radius: var(--box-radius-large); box-shadow: var(--box-shadow-small); } #cat3_view article.item .image{ width: 330px; height: 240px; } /*.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; border-radius: var(--box-radius-large); } .cat_items article.item .item_image_noimg { background-size: 70%; position: relative; /*border: 1px solid var(--color-base-line-light);*/ background: #FFF; border-radius: var(--box-radius-large); } .cat_items article.item .item_image_noimg img { position: absolute; width: 70%; height: auto; margin: auto; left: 0; right: 0; bottom: 0; top: 0; } .cat_items article.item .desc{ width: calc(100% - 240px); position: relative; } /*各ニュース・クーポン・求人情報にショップ名読込⇒標準で非表示*/ 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, body.bf1 .cat_items article.item .logo,body.item_recruit .cat_items article.item .logo { display: none; } /*商品リスト時は、mdカテゴリリストの非表示*/ .cat_items article.item .mdlistiew.itemlist { display: none; } .cat_items article.item .desc h4 { word-break: break-all; margin: 12px 0; } .cat_items article.item .desc h4 a { font-weight: 700; font-size: 16px; 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: 12px; font-family: var(--fontfamily-english); line-height: 1em; margin: 0 0 0.5em; color: var(--color-base-text-light); } .cat_items article.item .ico_new2{ position: absolute; margin: 0; top: -10px; left: -10px; text-align: center; color: #fff; padding: 13px 0; font-size: 14px; border-radius: 50%; background: var(--color-base-accent-light); font-family: var(--fontfamily-english); width: 50px; height: 50px; box-sizing: border-box; z-index: 10; font-weight: bold; letter-spacing: 0.05em; } /* @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; } #contents .btn-more { width: 90px; display: inline-block; font-size: 14px; border-radius: 40px; line-height: 1em; font-family: var(--fontfamily-base); color: var(--color-base-text-dark); position: relative; } #contents .btn-more::before { font-family: var(--fontfamily-icon); content: "\e5cc"; display: block; width: 30px; height: 30px; box-sizing: border-box; border-radius: 50%; background: var(--color-base-main-red); color: #FFF; position: absolute; right: 0; top: -6px; text-align: center; font-size: 24px; padding: 9px 0 4px 1px; } #contents .voice .btn-more::before {background: var(--color-base-main-lightblue);} /******もっと見るボタン[汎用]以上*****/ /*.cat3_view article.item .morelink, #cat3_view article.item .morelink { position: static; }*/ /* クーポン表示関連：①もっと見るボタン　②クーポン強調表示(フキダシ) */ #cat1_view .item.cat2 .desc h4::before { /*フキダシ中身*/ content: "クーポン"; display: inline-block; font-weight: bold; line-height: 1em; margin: 0 0 14px 0; font-size: 13px; padding: 2px 4px 4px; background: var(--color-base-accent-coupon); color: #FFF; border-radius: var(--box-radius-small); } /*画像がないときはフキダシを消す*/ /*#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; overflow: hidden; margin: 0; padding: 30px; box-sizing: border-box; display: flex; justify-content: space-between; flex-direction: row-reverse; align-content: center; cursor: pointer; transition-duration: 0.5s; box-shadow: var(--box-shadow-medium); border-radius: var(--box-radius-large); background: #FFF; } .cat3_view article.item:not(:first-child), #cat3_view article.item:not(:first-child) { margin-top: 20px; } .cat3_view article.item::after, #cat3_view article.item::after { content: ""; display: block; width: 30px; height: 30px; position: absolute; bottom: 0; right: 0; border-radius: 100% 0 var(--box-radius-medium) 0; background: var(--color-base-main-yellow); } /*.cat3_view article.item.noimg, #cat3_view article.item.noimg{ min-height: 130px; padding:40px 30px; }*/ .cat3_view article.item .desc, #cat3_view article.item .desc{ width: calc(100% - 350px); } .cat3_view article.item.noimg .desc, #cat3_view article.item.noimg .desc{ width: 100%; } .cat3_view article.item .date, #cat3_view article.item .date { font-size: 14px; line-height: 1em; background: var(--color-base-bg-light); padding: 10px 16px; display: inline-block; margin: 20px 0 0; border-radius: var(--box-radius-medium); } @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-size: 16px; font-weight: 700; line-height: 2em; padding-left: 12px; border-left: 5px solid var(--color-base-main-yellow); } .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 { margin-top: 20px; border-top: 1px solid var(--color-base-line-dark); border-bottom: 1px solid var(--color-base-line-dark); } #cat3_view article.item table th { background: none; } .cat3_view article.item th, #cat3_view article.item th { width: 18%; max-width: 140px; text-align: left; color: var(--color-base-main-yellow); padding: 16px 0; } .cat3_view article.item th, #cat3_view article.item th, .cat3_view article.item table td, #cat3_view article.item table td{ border-bottom: 1px solid var(--color-base-line-dark); } .cat3_view article.item table td, #cat3_view article.item table td{ font-size: 14px; } .cat3_view article.item .morelink span, #cat3_view article.item .morelink span{ position: absolute; bottom: 6px; top: auto; right: 0; width: 150px; line-height: 24px; display: block; text-align: center; color: var(--color-base-text-dark); font-size: 14px; font-weight: normal; } .cat3_view article.item .morelink span::after, #cat3_view article.item .morelink span::after{ font-family: var(--fontfamily-icon); content: "\e5cc"; display: block; width: 30px; height: 30px; box-sizing: border-box; border-radius: 50%; background: var(--color-base-main-yellow); color: #FFF; position: absolute; right: 0; top: -3px; text-align: center; font-size: 24px; padding: 4px 0 4px 1px; } /*.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.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; } .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); color: #FFF; background: var(--color-base-accent-dark); padding: 2px 8px; border-radius: var(--box-radius-small); } .cat_items article.item .goodscomment { /*display: none;*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-top: 1px solid var(--color-base-line-dark); padding-top: 12px; margin-top: 12px; } .cat_items article.item .read_more { position: absolute; bottom: 6px; right: 0; } .cat_items article.item .read_more a { width: 150px; line-height: 24px; display: block; text-align: center; color: var(--color-base-text-dark); position: relative; font-size: 14px; } .cat_items article.item .read_more a:after { font-family: var(--fontfamily-icon); content: "\e5cc"; display: block; width: 30px; height: 30px; box-sizing: border-box; border-radius: 50%; background: var(--color-base-main-lightblue); color: #FFF; position: absolute; right: 0; top: -3px; text-align: center; font-size: 24px; padding: 4px 0 4px 1px; } #cat1_view.cat_items article.item .read_more a:after { background: var(--color-base-main-red); } /*.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; font-size: 14px; line-height: 1em; background: var(--color-base-bg-light); font-family: var(--fontfamily-english); padding: 10px 16px; display: inline-block; margin: 12px 0 0; border-radius: var(--box-radius-medium); } .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: 30px auto 10px; } .shopnewsitem.item .imgarea { /*background: var(--color-base-bg-light);*/ padding: 0 0; margin: 0 auto 24px; } .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: 100%; padding: 0 ; 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-red); 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 10px 5px 0; } .shopnewsitem .tag_list .tag_list_name a { border-radius: 50px; padding: 6px 20px 8px; display: block; } /*ソーシャルボタン、いいねボタン*/ .shopnewsitem .goods_like_btn { width: calc(60%); margin: 0 0 20px 0; background: var(--color-base-bg-red); padding-top: 20px; height: 120px; } .shopnewsitem .goods_like_btn:before { font-family: var(--fontfamily-english); 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 0 20px 0; width: calc(40% - 20px); 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 10px; text-align: center; border-bottom: 2px solid var(--color-base-accent-dark); } /*クーポン*/ .shopnewsitem.cat2 .desc { border: 2px solid var(--color-base-bg-light); width: 100%; margin: 0 0 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; border-left: 4px solid var(--color-base-accent-coupon); } .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: 24px 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: 18px; line-height: 1.5em; background: var(--color-base-bg-yellow); } .recruititem.item .date { margin: 30px auto 10px; } .recruititem.item .imgarea { /*background: var(--color-base-bg-light);*/ padding: 20px 0; margin: 0 auto 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; margin: 10px 0 40px; } .recruititem.item.cat3 th { width: 30%; padding: 20px 30px; text-align: left; font-weight: 700; position: relative; } .recruititem.item.cat3 th::before { content: ""; display: inline-block; background: var(--color-base-main-yellow); width: 4px; height: 32%; position: absolute; top: 23px; left: 0; } .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 h3::before { background: var(--color-base-main-yellow); } #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: 1px 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: 12px 0; color: #FFF; position: relative; text-align: center; } #goodslist-header-navi dl dt a, #goodslist-header-navi dl dd a { box-sizing: border-box; text-decoration: none; display: block; position: relative; font-size: 14px; border-left: 1px solid var(--color-base-line-light); padding: 2px 12px; margin: 4px 0; } #goodslist-header-navi dl dd:last-of-type a { 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-red); font-weight: bold; } #goodslist-header-navi dl dt.current a, #goodslist-header-navi dl dd.current a { box-sizing: border-box; } #goodslist-header-navi dl dt.current span, #goodslist-header-navi dl dd.current span { font-size: 14px; color: var(--color-base-main-red); } body.bf4 #goodslist-header-navi dl dd a:hover, body.bf5 #goodslist-header-navi dl dd a:hover { color: var(--color-base-main-red); font-weight: bold; } /* ----------------------------------------- goodslist.jspを基本に.NewsItemList ※この見せ方のページは、class="NewsItemList" ※上位のスタイルを上書きするために#contents-main が必要 ----------------------------------------- */ #contents-main .goodslist h3{ text-align: left; color: var(--color-base-text-dark); font-size: 16px; } #contents-main .goodslist h3 .en{ font-family: var(--fontfamily-english); font-size: 42px; margin-right: 16px; } #contents-main .goodslist h3::before{ content: ""; display: inline-block; width: 30px; height: 30px; background: var(--color-base-main-lightblue); margin: 0 16px 0 0; border-radius: 3px; } #contents-main .NewsItemList { padding: 30px 0; width: 100% !important; box-sizing: border-box; margin: 0 0 10px; } #contents-main .NewsItemList:after { content: ""; clear: both; display: block; height: 1px; } #contents-main .NewsItemList #items { display: flex; flex-wrap: wrap; gap: 40px; } #contents-main .NewsItemList .item { box-sizing: border-box; width: calc(100% / 3 - 27px); padding: 0 0 40px; margin: 0; position: relative; } #contents-main .NewsItemList .item .news_box .gcat_badge { display: none; } /*#contents-main .NewsItemList .item.cat2 .news_box .image*/ #contents-main .NewsItemList .item.cat2 h3.goods:before { content: "クーポン"; background: var(--color-base-accent-coupon); color: #fff; display: inline-block; padding: 4px; font-weight: bold; line-height: 1em; letter-spacing: 1px; border-radius: var(--box-radius-small); font-size: 0.8em; margin: 0 6px 2px 0; width: auto; height: auto; position: relative; top: 0; } #contents-main .NewsItemList .item .image { height: 320px; position: relative; margin: 10px 0 0; border-radius: var(--box-radius-large); box-sizing: border-box; overflow: hidden; box-shadow: var(--box-shadow-small); } #contents-main .NewsItemList .item.noimg .image, #contents #tag .goodslist .item.noimg p.image{ /*border: 1px 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; } #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; font-size: 90%; 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: 4px; line-height: 14px; } #contents-main .NewsItemList .item .name a { font-size: 80%; } .pc #contents-main .NewsItemList .item .goods_like_btn.mini { bottom: 0; left: 0; 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 0; 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 12px 12px 15px; font-size: 16px; border-radius: 0px; border: none; cursor: pointer; border: 1px solid var(--color-base-line-dark); background: var(--color-base-bg-light); text-shadow: none; appearance: none; -webkit-appearance: none; } /* --------------------------------------------- ショップ検索用　index.jsp bf=8 --------------------------------------------- */ body.index #search-category, body.index #search-on, body.index #search-floor { margin-bottom: 32px; } body.index .search { padding: 20px; } body.index #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;gap: 20px; padding: 10px; } body.index .search .search_block li { width: calc(100% / 3 - 14px); /*margin: 0 8px 16px;*/ display: block; border-radius: 0px; } body.index .search .search_block li a { display: block; width: 100%; height: 100%; padding: 10px 15px 10px 10px; box-sizing: border-box; position: relative; text-align: center; font-size: 16px; border-radius:100px; box-shadow: var(--box-shadow-medium); } 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-main-lightblue); } 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 { margin: 0 0 3px; font-size: 18px; padding: 15px 0; text-align: center; font-weight: bold; background: var(--color-base-bg-lightblue); } body.index .search div.title h4[data-cat="ファッション"] {background: var(--color-base-main-yellow); color: #fff;} body.index .search div.title h4[data-cat="ファッション雑貨"] {background: var(--color-base-main-orange); color: #fff;} body.index .search div.title h4[data-cat="生活雑貨"] {background: var(--color-base-main-lightblue); color: #fff;} body.index .search div.title h4[data-cat="グルメ"] {background: var(--color-base-main-red); color: #fff;} body.index .search div.title h4[data-cat="フード"] {background: var(--color-base-main-green); color: #fff;} body.index .search div.title h4[data-cat="クリニック"] {background: var(--color-base-main-blue); color: #fff;} body.index .search div.title h4[data-cat="サービス・アミューズメント・スクール"] {background: var(--color-base-main-purple); color: #fff;} body.index div#searchcat table.table01, body.index div#searchon table.table01 { clear: both; } body.index div.search table.table01 td { padding: 20px 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; position: relative; } body.index div.search table.table01 .name::before { content: ""; display: inline-block; background: var(--color-base-main-lightblue); width: 4px; height: 45%; position: absolute; top: 25px; left: 0; } body.index div.search table.table01 .name .biz { font-size: 12px; } body.index div.search table.table01 .logo { width: 116px; text-align: center; } body.index div.search table.table01 .logo img { width: 80px; margin: 0 auto; 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: 36px; font-size: 14px; } body.index div.search table.table01 td.floor:after { position: absolute; top: calc(50% - 7px); right: 12px; font-family: var(--fontfamily-icon); font-weight: normal; content: "\e5cc"; vertical-align: middle; display: block; font-size: 20px; color: var(--color-base-main-lightblue); } 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: 12px 0; } body.index div.search #shop-icon ul li { display: inline-block; margin-right: 20px; font-size: 90%; } body.index div#category-navi { margin: -20px 0 8px; width: 100%; box-sizing: border-box; text-align: center; padding: 0; border-bottom: 2px solid var(--color-base-line-light); } body.index div#category-navi ul { display: flex; justify-content: center; flex-wrap: wrap; margin: 30px auto 10px; } body.index div#category-navi li { margin: 8px 0; color: #FFF; position: relative; text-align: center; } body.index div#category-navi li a { box-sizing: border-box; text-decoration: none; color: var(--color-base-text-dark); display: block; position: relative; font-size: 14px; border-left: 1px solid var(--color-base-line-dark); padding: 8px 12px; } body.index div#category-navi li:last-child a { border-right: 1px solid var(--color-base-line-dark); } body.index div#category-navi li.guide a { border: none; } /* --------------------------------------------- index.jsp クーポン、求人、サービス一覧ページ --------------------------------------------- */ body.index div#coupon, body.index div#recruit, body.index div#service { padding: 0 0; } body.index div#coupon h2, body.index div#recruit h2, body.index div#service h2 { margin-left: -16px; margin-right: -16px; } body.index div#coupon div.title, body.index div#recruit div.title, body.index div#service div.title { margin: 0 0 16px; overflow: hidden; } body.index div#coupon div.title h3 a, body.index div#recruit div.title h3 a, body.index div#service div.title h3 a { color: #fff; text-decoration: none; } body.index div#searchcat div.title p, body.index div#searchon div.title p, body.index div#coupon div.title p, body.index div#recruit div.title p, body.index div#service div.title p { float: right; text-align: right; font-size: 10px; } body.index div#coupon div.item, body.index div#recruit table.table01, body.index div#service table.table01 { margin: 16px 0 10px; } /* --------------------------------------------- ショップサービス bf=4 --------------------------------------------- */ body.index.bf4 #contents-main { padding-top: 0; } body.index.bf4 .ServiceItemList { margin: 20px; } body.index.bf4 #contents-main .ServiceItemList h3{ margin: 0 0 3px; font-size: 24px; color: #fff; padding: 15px 0; text-align: center; font-weight: bold; } body.index.bf4 #contents-main .ServiceItemList h3::before{ content: none; } body.index.bf4 #contents-main .ServiceItemList h3#cat1{ background: var(--color-base-main-yellow); } body.index.bf4 #contents-main .ServiceItemList h3#cat2{ background: #e8b182; } body.index.bf4 #contents-main .ServiceItemList h3#cat3{ background: var(--color-base-main-lightblue); } body.index.bf4 #contents-main .ServiceItemList h3#cat4{ background: var(--color-base-main-red); } body.index.bf4 #contents-main .ServiceItemList h3#cat5{ background: var(--color-base-main-green); } body.index.bf4 #contents-main .ServiceItemList h3#cat7{ background: var(--color-base-main-purple); } body.index.bf4 div#service table.table01 { margin: 0 auto 40px; width: 100%; } body.index.bf4 div#service table.table01 td { padding: 8px; } body.index.bf4 div#service table.table01 .name { width: 30%; padding: 20px; } body.index.bf4 div#service table.table01 .name a { font-weight: bold; font-size: 16px; } body.index.bf4 div#service table.table01 .name .floor { font-size: 12px; } body.index.bf4 div#service table.table01 .logo { width: 100px; text-align: center; } body.index.bf4 div#service table.table01 .logo .image { width: 100px; height: 50px; } body.index.bf4 div#service table.table01 .logo .img_bg_css { min-height: 50px; } body.index.bf4 div#service table.table01 .logo .img_bg_css.no_img_logo { border: none; background-size: contain; } body.index.bf4 div#service table.table01 .service p { white-space: pre-wrap; padding: 10px 16px; } body.index.bf4.pc div#service table.table01 .service p { /* border-left: 2px solid var(--color-base-line-light); */ } /* --------------------------------------------- クーポン　bf=3 --------------------------------------------- */ body.index.bf3 #coupon div#goodslist-header-navi { display: none; } body.index.bf3 #coupon .NewsItemList .item .desc .fromto dt { font-weight: bold; padding: 0 4px; background: var(--color-base-accent-light); display: inline-block; margin-right: 4px; } body.index.bf3 #coupon .NewsItemList .item .desc .fromto dd { display: inline; } body.index.bf3 #coupon .NewsItemList .item h3.goods { overflow: initial; text-overflow: unset; white-space: unset; } /* --------------------------------------------- 求人情報　bf=5 --------------------------------------------- */ body.index.bf5 #contents-main .title h4{ margin: 0 0 3px; font-size: 18px; padding: 15px 0; text-align: center; font-weight: bold; } body.index.bf5 #contents-main .title h4#cat1{background: var(--color-base-main-yellow); color: #fff;} body.index.bf5 #contents-main .title h4#cat2{background: var(--color-base-main-orange); color: #fff;} body.index.bf5 #contents-main .title h4#cat3{background: var(--color-base-main-lightblue); color: #fff;} body.index.bf5 #contents-main .title h4#cat4{background: var(--color-base-main-red); color: #fff;} body.index.bf5 #contents-main .title h4#cat5{background: var(--color-base-main-green); color: #fff;} body.index.bf5 #contents-main .title h4#cat6{background: var(--color-base-main-blue); color: #fff;} body.index.bf5 #contents-main .title h4#cat7{background: var(--color-base-main-purple); color: #fff;} body.index.bf5 .RecruitItemList { margin: 20px 0; } body.index.bf5 #contents-main { padding-top: 0; } body.index.bf5 .cat3_view article{ flex-wrap: wrap; flex-direction: row; } body.index.bf5 .cat3_view article .logo{ order: 0; width: 150px; margin: 0 0 20px; } body.index.bf5 .cat3_view article .shopname { display: block; padding: 10px 0 5px; order: 1; width: calc(100% - 180px ); } body.index.bf5 .cat3_view article .shopname a { font-size: 18px; font-weight: bold; } body.index.bf5 .cat3_view article .shopname span { display: block; font-size: 12px; font-weight: normal; } body.index.bf5 .cat3_view article.item .desc{ order: 2; } body.index.bf5 .cat3_view article .image{ order: 3; width: 280px; } /* --------------------------------------------- 店長ボイス用　voice.jsp voice --------------------------------------------- */ body.voice .VoiceItemList { margin: 20px; } body.voice .VoiceItemList article { overflow: hidden; margin: 0 10px 10px; padding: 10px; box-sizing: border-box; width: 47%; display: inline-block; width: calc(50% - 24px); vertical-align: top; } body.voice .VoiceItemList article .detail { padding: 40px 30px; box-sizing: border-box; position: relative; background: #FFF; border-radius: var(--box-radius-large); font-size: 18px; box-shadow: var(--box-shadow-medium); } body.voice .VoiceItemList article .detail::after { content: ""; display: block; position: absolute; bottom: -6px; left: 40px; width: 13px; height: 13px; background: #FFF; -webkit-transform: rotate(45deg); transform: rotate(45deg); } body.voice .VoiceItemList article .detail .sendtime { position: absolute; background: var(--color-base-main-lightblue); color: #fff; display: block; top: -10px; padding: 0px 10px; font-size: 12px; font-weight: var(--font-weight); 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: var(--font-weight); 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);*/ margin-bottom: 30px; } #event_lists .events { padding: 30px 20px 30px 25px; overflow: hidden; position: relative; /*border-bottom: 1px solid var(--color-base-line-dark);*/ margin: 40px 0 0; box-shadow: var(--box-shadow-medium); border-radius: var(--box-radius-large); } #event_lists .events::after { content: ""; display: block; width: 30px; height: 30px; position: absolute; bottom: 0; right: 0; border-radius: 100% 0 var(--box-radius-medium) 0; background: var(--color-base-main-green); } #event_lists .events.cat_title_1::after {background: var(--color-base-main-yellow);} #event_lists .events.cat_title_2::after {background: var(--color-base-main-red);} #event_lists .events.cat_title_3::after {background: var(--color-base-main-blue);} #event_lists .events.cat_title_4::after {background: var(--color-base-main-lightblue);} #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: var(--box-radius-medium); } #event_lists .events .c1 p.image img { width: 240px; } #event_lists h4 { margin: 16px 0; font-weight: bold; overflow: hidden; font-size: 16px; font-weight: 700; line-height: 2em; padding-left: 12px; border-left: 5px solid var(--color-base-main-green); } #event_lists .cat_title_1 h4{border-left: 5px solid var(--color-base-main-yellow);} #event_lists .cat_title_2 h4{border-left: 5px solid var(--color-base-main-red);} #event_lists .cat_title_3 h4{border-left: 5px solid var(--color-base-main-blue);} #event_lists .cat_title_4 h4{border-left: 5px solid var(--color-base-main-lightblue);} #event_lists .table01 { width: calc(100% - 280px); margin: 20px 0; border-collapse: collapse; border-spacing: 0; border: 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: 1px solid var(--color-base-line-light); } .item_eventnews .item .table01 th,.item_eventnews .item .table01 td{ padding: 20px 30px; } #event_lists .table01 th, .item_eventnews .item .table01 th{ width: 18%; max-width: 140px; text-align: left; color: var(--color-base-main-green); padding: 16px 0; } #event_lists .cat_title_1 .table01 th, .item_eventnews .catid1 .item .table01 th{color: var(--color-base-main-yellow);} #event_lists .cat_title_2 .table01 th, .item_eventnews .catid2 .item .table01 th{color: var(--color-base-main-red);} #event_lists .cat_title_3 .table01 th, .item_eventnews .catid3 .item .table01 th{color: var(--color-base-main-blue);} #event_lists .cat_title_4 .table01 th, .item_eventnews .catid4 .item .table01 th{color: var(--color-base-main-lightblue);} #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-green); color: var(--color-base-main-dark); line-height: 1.5em;*/ background: none; color: var(--color-base-main-dark); border: none; margin: 30px 0 10px; margin-bottom: 10px; font-weight: 500; font-size: 16px; text-align: left; position: relative; box-sizing: border-box; } .event-cat-title .cat_title::before { content: ""; display: inline-block; width: 24px; height: 24px; background: var(--color-base-main-green); margin: 0 16px 0 0; border-radius: 3px; position: relative; top: 5px; } .event-cat-title #cat_title_1.cat_title::before {background: var(--color-base-main-yellow);} .event-cat-title #cat_title_2.cat_title::before {background: var(--color-base-main-red);} .event-cat-title #cat_title_3.cat_title::before {background: var(--color-base-main-blue);} .event-cat-title #cat_title_4.cat_title::before {background: var(--color-base-main-lightblue);} #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: 1px solid var(--color-base-line-light); cursor: pointer; position: relative; border-radius: 100px; /*box-shadow: var(--box-shadow-medium);*/ background: #FFF; } .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); } .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"; margin: 0 0 0 4px; color: var(--color-base-line-dark); font-size: 20px; vertical-align: middle; position: absolute; right: 0; top: calc(50% - 10px); } .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: 6px 30px 8px; font-size: 14px; border: 1px solid var(--color-base-line-light); border-radius: 100px; /*box-shadow: var(--box-shadow-medium);*/ position: relative; background: #FFF; } .ev-navi_bottom .ev_all_link a { padding-left: 24px; } .ev-navi_bottom .ev-navi-cal a:before, #ev-navi .ev-navi-cal a:before { /*font-family: var(--fontfamily-icon); font-variation-settings: 'FILL'1; content: "\ebcc"; font-size: 20px; vertical-align: middle;*/ position: relative; top: 4px; margin: 0 6px 0 0; content:""; width: 18px; height: 20px; display: inline-block; background-image: url(../img/ico_cal.png); background-size: cover; background-repeat: no-repeat; } #ev-navi .ev-navi-cal a { height: 42px; box-sizing: border-box; } .ev-navi_bottom .ev_all_link a:before { font-family: var(--fontfamily-icon); content: "\e5cb"; margin: 0 4px 0 0; color: var(--color-base-line-dark); font-size: 20px; vertical-align: middle; } .ev-navi_bottom .ev-navi-cal a .fa, .ev-navi_bottom #ev-navi .ev-navi-cal a .fa, .ev-navi_bottom .ev_all_link a .fa { margin-right: 12px; font-size: 18px; } .events .e_category { font-size: 14px; font-weight: 700; color: var(--color-base-main-dark); display: inline-block; padding: 2px 10px 3px; background-color: var(--color-base-bg-light); } .events .e_category.catid1 {background-color: var(--color-base-main-yellow); color: #FFF;} .events .e_category.catid2 {background-color: var(--color-base-main-red); color: #FFF;} .events .e_category.catid3 {background-color: var(--color-base-main-blue); color: #FFF;} .events .e_category.catid4 {background-color: var(--color-base-main-lightblue); color: #FFF;} /*.item_eventnews .events .e_category.catid1, .item_eventnews .events .e_category.catid2, .item_eventnews .events .e_category.catid3, .item_eventnews .events .e_category.catid4{ background-color: var(--color-base-bg-light); color: var(--color-base-text-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: 0px 16px; font-size: 24px; font-weight: bold; /*background: var(--color-base-bg-light);*/ color: var(--color-base-main-dark); line-height: 1.5em; margin: 20px 0 0; text-align: left; border-left: 5px solid var(--color-base-main-green); } body.item_eventnews #contents-main .catid1 .item .title h3 {border-left: 5px solid var(--color-base-main-yellow);} body.item_eventnews #contents-main .catid2 .item .title h3 {border-left: 5px solid var(--color-base-main-red);} body.item_eventnews #contents-main .catid3 .item .title h3 {border-left: 5px solid var(--color-base-main-blue);} body.item_eventnews #contents-main .catid4 .item .title h3 {border-left: 5px solid var(--color-base-main-lightblue);} body.item_eventnews #contents-main .item .title h3:before{ display: none; } body.item_eventnews #contents-main .item .subtitle h4 { padding:16px 20px; /*border-bottom: 1px solid var(--color-base-line-dark);*/ line-height: 1.4em; } body.item_eventnews #contents-main .item .images { margin: 24px 0; padding: 20px 0 10px; } 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: 0; } body.item_eventnews #contents-main .item .desc .section { margin: 20px 0; } body.item_eventnews #contents-main .item .desc .remarks { padding: 20px 0; } 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: 13px; 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-large); background: var(--color-base-main-green); padding: 20px 50px 20px 40px; position: relative; max-width: 80%; min-width: 12em; font-weight: 700; font-size: 16px; } body.item_eventnews #contents-main .catid1 .item .desc .link a {background: var(--color-base-main-yellow);} body.item_eventnews #contents-main .catid2 .item .desc .link a {background: var(--color-base-main-red);} body.item_eventnews #contents-main .catid3 .item .desc .link a {background: var(--color-base-main-blue);} body.item_eventnews #contents-main .catid4 .item .desc .link a {background: var(--color-base-main-lightblue);} body.item_eventnews #contents-main .item .desc .link a:after { font-family: var(--fontfamily-icon); content: "\e5cc"; margin: 0 0 0 4px; vertical-align: middle; font-size: 24px; position: absolute; right: 10px; top: calc(50% - 12px); } body.item_eventnews #contents-main .item .desc table.table01 th i { font-size: 20px; } /*tag list*/ body.item_eventnews #contents-main .event_tags { margin: 40px 0 0; text-align: center; border: 3px solid var(--color-base-line-light); } #contents-main .event_tags .event_tags-title { border: none; } #contents-main .event_tags .event_tags-title em { font-family: var(--fontfamily-english); font-weight: bold; font-size: 22px; letter-spacing: .05em; } #contents-main .event_tags .event_tags-title::before { content: "#"; font-family: var(--fontfamily-english); color: var(--color-base-main-dark); font-size: 22px; margin: 0px 5px 0 0; vertical-align: middle; } #contents-main .event_tags .event_tags-title::before { content: "#"; font-family: var(--fontfamily-english); color: var(--color-base-main-dark); font-size: 22px; margin: 0px 5px 0 0; vertical-align: middle; } #contents-main .event_tags p { padding: 0 0 10px; margin: -5px 0 0; font-size: 14px; } body.item_eventnews #contents-main .event_tags .tag_list { padding-bottom: 8px; } body.item_eventnews #contents-main #event_list { margin: 24px 0; overflow: hidden; display: flex; flex-wrap: wrap; column-gap: 15px; padding: 24px 30px 30px; background:var(--color-base-bg-light); border-radius: var(--box-radius-large) } 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); text-align: center; font-size: 30px; padding: 10px 0 30px; } body.item_eventnews #contents-main #event_list .events { width: calc(100%/3 - 10px); padding: 12px; /*border-top: 1px solid var(--color-base-line-dark);*/ box-sizing: border-box; background: #FFF; border-radius: var(--box-radius-medium); } body.item_eventnews #contents-main #event_list .events .photo{ margin-bottom: 12px; } body.item_eventnews #contents-main #event_list .events .photo .image span{ min-height: 140px; } body.item_eventnews #contents-main #event_list .events strong { font-size: 16px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } 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: 10px; } body.item_eventnews #contents-main #event_list .p_title p { text-align: center; position: absolute; top: 10px; right: 0; } body.item_eventnews #contents-main #event_list .btn-more { width: 140px; } body.item_eventnews #contents-main #event_list .btn-more::before { top: -8px; background-color: var(--color-base-main-green) } /* --------------------------------------------- 営業時間　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; } /* --------------------------------------------- access --------------------------------------------- */ body.access #contents-main article h3{ margin: 30px 0 20px } body.access #contents-main article h3:before { background: var(--color-base-main-purple); } body.access #contents-main .access_content .p-title{ text-align: center; margin: 0 auto 30px; position: relative; font-size: 24px; font-weight: bold; } body.access #contents-main .access_content .p-title:not(:first-of-type){ margin-top: 40px; } body.access #contents-main .access_content .p-title::after{ content: ""; display: block; width: 100px; height: 7px; background: var(--color-base-main-purple); margin: 14px auto 0; } body.access #contents-main section { padding: 30px; background: var(--color-base-bg-light); border-radius: var(--box-radius-large); } body.access #contents-main section .flex-box{ display: flex; justify-content: space-between; column-gap: 20px; } body.access #contents-main section .flex-box .section{ width: 50%; } body.access #contents-main section .section.ico{ position: relative; padding-left: 85px; min-height: 60px; } body.access #contents-main section .section.ico:not(:first-of-type){ margin-top: 30px; } body.access.pc #contents-main section #ico-m_bicycle.section, body.access.pc #contents-main section #ico-parking.section{ margin-top: 0; } body.access.pc #contents-main section #ico-parking2.section{ margin-bottom: 30px; } body.access #contents-main section .section.ico::before{ font-family: var(--fontfamily-icon); content: ""; text-align: center; font-size: 40px; color: #FFF; padding-top: 16px; display: block; width: 60px; height: 60px; box-sizing: border-box; border-radius: var(--box-radius-full); background: var(--color-base-main-purple); position: absolute; top: 0; left: 0; } body.access #contents-main section #ico-car.section.ico::before{ content: "\e531"; } body.access #contents-main section #ico-parking.section.ico::before, body.access #contents-main section #ico-parking2.section.ico::before, body.access #contents-main section #ico-parking3.section.ico::before, body.access #contents-main section #ico-parking4.section.ico::before{ content: "\e54f"; padding: 19px 0 0 3px; } body.access #contents-main section #ico-train.section.ico::before, body.access #contents-main section #ico-train2.section.ico::before{ content: "\e570"; padding-top: 20px; } body.access #contents-main section #ico-bus.section.ico::before{ content: "\e530"; padding-top: 20px; } body.access #contents-main section #ico-bicycle.section.ico::before{ content: "\eb29"; } body.access #contents-main section #ico-m_bicycle.section.ico::before{ content: "\e91b"; } body.access #contents-main section #ico-present.section.ico::before{ content: "\e8b1"; padding-top: 20px; } body.access #contents-main section #ico-ev.section.ico::before{ content: "\e209"; padding-top: 20px; } body.access #contents-main section #ico-carshare.section.ico::before{ content: "\e69e"; } body.access #contents-main .table01, body.access #contents-main .table01.no-b_b tr:last-of-type th, body.access #contents-main .table01.no-b_b tr:last-of-type td{ border-bottom: 0; } body.access #contents-main .table01.no-b_b tr:last-of-type th, body.access #contents-main .table01.no-b_b tr:last-of-type td{ padding-bottom: 0; } body.access #contents-main .table01.first tr:first-of-type th, body.access #contents-main .table01.first tr:first-of-type td{ padding-top: 0; } body.access #contents-main .table01.first tr:first-of-type th::before{ top: 0; } body.access #contents-main .table01 th{ position: relative; width: 30%; text-align: left; padding-left: 20px; vertical-align: top; } body.access #contents-main .table01 th::before{ content: ""; display: inline-block; background: var(--color-base-main-purple); width: 4px; height: 25px; position: absolute; top: 20px; left: 0; } body.access #contents-main section #ico-parking3 .table01 th{ width: 50%; } /*body.access #contents-main #sc_map { border: 1px solid #ccc; box-sizing: border-box; height: 340px; width: 100%; } body.access #contents-main #sc_map iframe { width: 100%; height: 100%; border: none; } body.access #contents-main .sc_map_link { text-align: right; padding: 4px; } body.access #contents-main .sc_map_link a { text-decoration: underline; } body.access #contents-main .sc_map_link a span { font-size: 0.9em; } body.access #contents-main .sc_map_link .fa { margin-right: 5px; } body.access #contents-main table.table01 th { border-left: none; width: 30%; } body.access #contents-main tr.sc_payment td img { max-width: 400px; margin-bottom: 10px; } body.access #contents-main table.table01 td { border-right: none; white-space: pre-wrap; } body.access #contents-main table.table01 td strong { font-size: 1.1em; } body.access #contents-main section dl { padding: 0 0 30px; } body.access #contents-main section dl dt { padding: 0 0 15px 0; border-bottom: 10px solid var(--color-base-bg-light); font-weight: bold; font-size: 1.1em; } body.access #contents-main section dl dd { padding: 15px 0 0; white-space: pre-wrap; } body.access #contents-main section dl dd strong { font-size: 1.1em; } body.access #contents-main section dl dd span { font-weight: bold; } body.access #contents-main section dl#car dd img { padding: 5px 0; max-width: 600px; }*/ body.access #contents-main section h5 { font-weight: bold; font-size: 16px; } body.access #contents-main section .image{ margin-top: 20px; border-radius: var(--box-radius-medium); overflow: hidden; } body.access #contents-main .access_map section .image{ margin-top: 0px; } body.access #contents-main section h5 + p{ margin-top: 8px; } body.access #contents-main section table + ul, body.access #contents-main section ul + p, body.access #contents-main section table + p{ margin-top: 16px; } body.access #contents-main section #ico-parking p{ font-size: 16px; font-weight: bold; color:var(--color-base-accent-dark); } body.access #contents-main section a{ background: var(--color-base-main-purple); padding: 0px 8px 0px; color: #FFF; font-size: 85%; border-radius: 50px; display: inline-block; } body.access #contents-main section p.btn{ text-align: center; } body.access #contents-main section p.btn a { display: block; margin: 30px auto 0; width: 50%; text-align: center; color: var(--color-base-text-dark); background: #fff; box-sizing: border-box; box-shadow: var(--box-shadow-small); border-radius: var(--box-radius-medium); padding: 10px 30px; position: relative; font-size: 14px; } body.access #contents-main section p.btn a:after { content: ""; width: 20px; height: 20px; display: block; position: absolute; bottom: 0; right: 0; border-radius: 100% 0 10px 0; background: var(--color-base-main-purple); } /*10/22駐車場システム変更による追記*/ body.access #contents-main .parking-info{ background: var(--color-base-bg-red); padding: 30px; margin-bottom: 30px; border-radius: var(--box-radius-large); border: 2px solid var(--color-base-accent-dark); } body.access #contents-main .parking-info h5{ font-size: 20px; font-weight: bold; color: var(--color-base-accent-dark); text-align: center; margin-bottom: 12px; } body.access #contents-main section #ico-parking3 .table01 th{ width: 40%; } body.access #contents-main #ico-parking3 strong{ color: var(--color-base-accent-dark); } body.access #contents-main section #ico-yen.section.ico::before{ content: "\ef63"; padding-top: 20px; } body.access #contents-main section #ico-yen .table01 td{ word-break: break-all; } body.access.pc #contents-main section .solo h5{ display: flex; align-items: center; min-height: 60px; } body.access #contents-main section #ico-ev{ display: flex; align-items: center; } body.access.pc #contents-main section #ico-ev table th, body.access.pc #contents-main section #ico-ev table td{ padding-bottom: 0; } body.access #contents-main section #ico-ev table th, body.access #contents-main section #ico-ev table td{ border-bottom: 0; } /* 260302 駐車場満空表示追加 */ body.access #contents-main article.parking_info{ margin: 0 0 30px; } body.access #contents-main section .parkarea{ margin: 30px 0 0; } body.access #contents-main section .parkarea .status-bar { display: flex; gap: 8px; flex-wrap: wrap; } body.access #contents-main section .parkarea .status-card { flex: 1; min-width: 80px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(0,0,0,0.1); text-align: center; } body.access #contents-main section .parkarea .status-card .label { font-size: 1rem; padding: 12px 6px; font-weight: 600; line-height: 1.3; } body.access #contents-main section .parkarea .status-card.east .label { background: #60819a; color: #fff; } body.access #contents-main section .parkarea .status-card.west .label { background: #f1cc74; } body.access #contents-main section .parkarea .status-card.tachi .label { background: #9ccfd3; } body.access #contents-main section .parkarea .status-card.yuno .label { background: #de9aa5; } body.access #contents-main section .parkarea .status-card .badge { display: block; font-size: 1.6rem; font-weight: 900; padding: 6px 4px; background: #fff; } body.access #contents-main section .parkarea .status-card .badge.stts_0{ color: #3bc3d7; } body.access #contents-main section .parkarea .status-card .badge.stts_1{ color: #f29a19; } body.access #contents-main section .parkarea .status-card .badge.stts_2{ color: #e41a1a; } body.access #contents-main section .parkarea .status-card .badge.stts_7{ color: #535353; } body.access #contents-main section .parkarea .status-card.east .badge { border-right: 5px solid #60819a; border-bottom: 5px solid #60819a; border-left: 5px solid #60819a; border-top: 1px solid #60819a; border-radius: 0 0 6px 6px; } body.access #contents-main section .parkarea .status-card.west .badge { border-right: 5px solid #f1cc74; border-bottom: 5px solid #f1cc74; border-left: 5px solid #f1cc74; border-top: 1px solid #f1cc74; border-radius: 0 0 6px 6px; } body.access #contents-main section .parkarea .status-card.tachi .badge { border-right: 5px solid #9ccfd3; border-bottom: 5px solid #9ccfd3; border-left: 5px solid #9ccfd3; border-top: 1px solid #9ccfd3; border-radius: 0 0 6px 6px; } body.access #contents-main section .parkarea .status-card.yuno .badge { border-right: 5px solid #de9aa5; border-bottom: 5px solid #de9aa5; border-left: 5px solid #de9aa5; border-top: 1px solid #de9aa5; border-radius: 0 0 6px 6px; } body.access #contents-main section .parkarea .map-wrap { position: relative; width: 100%; max-width: 768px; margin: 30px auto 0; } body.access #contents-main section .parkarea .map-wrap img { width: 100%; height: auto; display: block; } /* ── オーバーレイ吹き出し ── */ body.access #contents-main section .parkarea .map-wrap .overlay-badge { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 10%; pointer-events: none; } body.access #contents-main section .parkarea .map-wrap .overlay-badge img { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.4)); } /* place04 = 湯の華廊駐車場 */ body.access #contents-main section .parkarea .map-wrap .overlay-place04 { left: 36.6%; top: 9%; } /* place03 = 立体駐車場 */ body.access #contents-main section .parkarea .map-wrap .overlay-place03 { left: 66.5%; top: 17%; } /* place02 = にしまち地下 */ body.access #contents-main section .parkarea .map-wrap .overlay-place02 { left: 28.4%; top: 55%; } /* place01 = ひがしまち地下 */ body.access #contents-main section .parkarea .map-wrap .overlay-place01 { left: 65%; top: 56%; } /* アンカーリンク */ body.access #contents-main p.btn a { display: block; margin: 30px auto 0; width: 50%; text-align: center; color: var(--color-base-text-dark); background: #fff; box-sizing: border-box; box-shadow: var(--box-shadow-small); border-radius: var(--box-radius-medium); padding: 10px 30px; position: relative; font-size: 14px; } body.access #contents-main p.btn a:after { content: ""; width: 20px; height: 20px; display: block; position: absolute; bottom: 0; right: 0; border-radius: 100% 0 10px 0; background: var(--color-base-main-purple); } /* --------------------------------------------- チラシページ --------------------------------------------- */ .chirashi.pc .sec-chirashi{ width: 860px; margin: 0 auto; } .chirashi #contents-main .sec-chirashi h3::before{ background-color: var(--color-base-main-yellow); } .chirashi .chirashiBox iframe{ border: 0; overflow: hidden; box-sizing: border-box; margin: 30px auto; display: block; } .chirashi.pc .chirashiBox iframe{ width: 846px; height: 300px; } .chirashi.sp .chirashiBox iframe{ width: 100%; height: 280px; margin: 20px auto 30px; } /* --------------------------------------------- free_page_area --------------------------------------------- */ /* .pc #free_page_area { width: 960px; margin: auto; } */ #free_page_area .fp_content { box-sizing: border-box; overflow: hidden; padding-bottom: 15px; } #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; } */ /* テナント募集 */ #contents[data-content*="テナント募集"] .sidemenu dt::after { background: var(--color-base-main-yellow); } #contents[data-content*="テナント募集"] .sidemenu dd > a:after{ background: var(--color-base-main-yellow); } #contents[data-content*="つかしんギャラリー"] .sidemenu dt::after { background: var(--color-base-main-green); } #contents[data-content*="つかしんギャラリー"] .sidemenu dd > a:after{ background: var(--color-base-main-green); } #free_page_area .fp_content #headerbg.tenant p { text-align: center; } #free_page_area .fp_content p.subttl{ text-align: center; font-weight: bold; font-size: 18px; margin: 40px 0 50px; line-height: 150%; } #contents[data-content*="つかしんギャラリー"] .fp_content p.subttl{ margin: 40px 0 0px; } #free_page_area .fp_content p.attention{ font-size: 16px; font-weight: normal; text-align: center; margin: 10px 0 50px; } #free_page_area .fp_content .p-title{ text-align: center; margin: 30px auto; position: relative; font-size: 24px; font-weight: bold; line-height: 150%; } #free_page_area .fp_content .p-title:not(:first-of-type){ margin-top: 40px; } #free_page_area .fp_content .p-title::after{ content: ""; display: block; width: 225px; height: 7px; margin: 14px auto 0; } #contents[data-content*="テナント募集"] .fp_content .p-title::after{ background: var(--color-base-main-yellow); } #contents[data-content*="つかしんギャラリー"] .fp_content .p-title.fee::after{ background: var(--color-base-main-green); width: 188px; } #contents[data-content*="つかしんギャラリー"] .fp_content .p-title.ues::after{ background: var(--color-base-main-green); width: 156px; } #free_page_area .fp_content article h3{ margin: 30px 0 20px; font-weight: bold; } #contents[data-content*="テナント募集"] .fp_content article h3:before { background: var(--color-base-main-yellow); } #contents[data-content*="つかしんギャラリー"] .fp_content article h3:before { background: var(--color-base-main-green); } #free_page_area .fp_content ul{ display: flex; flex-wrap: wrap; align-items: center; gap: 20px; justify-content: space-between; } #free_page_area .fp_content li:first-child, #free_page_area .fp_content li:last-child{ width: calc(100%/2 - 50px); } #free_page_area .fp_content section.intro { padding: 30px 30px 40px; background: var(--color-base-bg-yellow); border-radius: var(--box-radius-large); } #free_page_area .fp_content section.intro p{ padding: 10px 0 40px; font-size: 16px; letter-spacing: 4px; line-height: 150%; } #free_page_area .fp_content section { padding: 30px 30px 40px; background: var(--color-base-bg-light); border-radius: var(--box-radius-large); } #free_page_area .fp_content section .flex-box{ display: flex; justify-content: space-between; column-gap: 20px; } #free_page_area .fp_content section .flex-box .section{ width: 50%; } #free_page_area .fp_content section .section.ico{ position: relative; padding-left: 85px; min-height: 60px; } #free_page_area .fp_content section .section.ico:not(:first-of-type){ margin-top: 50px; } #free_page_area .fp_content section #ico-m_bicycle.section, #free_page_area .fp_content section #ico-parking.section{ margin-top: 0; } #free_page_area .fp_content section #ico-parking2.section{ margin-bottom: 30px; } #free_page_area .fp_content section .section.ico::before{ font-family: var(--fontfamily-icon); content: ""; text-align: center; font-size: 40px; color: #FFF; padding-top: 16px; display: block; width: 60px; height: 60px; box-sizing: border-box; border-radius: var(--box-radius-full); position: absolute; top: 0; left: 0; } #contents[data-content*="テナント募集"] .fp_content section .section.ico::before{ background: var(--color-base-main-yellow); } #contents[data-content*="つかしんギャラリー"] .fp_content section .section.ico::before{ background: var(--color-base-main-green); } #free_page_area .fp_content section #ico-info.section.ico::before{ content: "\e873"; padding: 18px 0 0 4px; } #free_page_area .fp_content section #ico-time.section.ico::before{ content: "\e8b5"; padding: 19px 0 0; } #contents[data-content*="つかしんギャラリー"] .fp_content section #ico-time p{ font-weight: bold; padding: 16px 0 0; } #free_page_area .fp_content section #ico-mony.section.ico::before{ content: "\eafb"; padding: 19px 0 0; } #free_page_area .fp_content section #ico-mony.section h5{ margin: 20px 0 10px; } #free_page_area .fp_content section #ico-calendar.section.ico::before{ content: "\e742"; } #contents[data-content*="つかしんギャラリー"] .fp_content section #ico-calendar p{ font-weight: bold; padding: 16px 0 0; } #free_page_area .fp_content section #ico-mic.section.ico::before{ content: "\e029"; padding: 19px 0 0; } #contents[data-content*="つかしんギャラリー"] .fp_content article.g_info .section.ico{ margin-top: 30px; } #free_page_area .fp_content section #ico-one.section.ico::before{ content: "1"; font-family: var(--fontfamily-base); font-weight: bold; } #contents[data-content*="つかしんギャラリー"] .fp_content article.g_info p{ padding: 0 0 24px; border-bottom: 1px solid var(--color-base-line-dark); } #contents[data-content*="つかしんギャラリー"] .fp_content article.g_info p.p_35{ padding: 0px 0 35px; } #contents[data-content*="つかしんギャラリー"] .fp_content article.g_info section a{ background:transparent; padding: 0; font-size: 14px; color: #225a94; } #free_page_area .fp_content section #ico-two.section.ico::before{ content: "2"; font-family: var(--fontfamily-base); font-weight: bold; } #free_page_area .fp_content section #ico-three.section.ico::before{ content: "3"; font-family: var(--fontfamily-base); font-weight: bold; } #free_page_area .fp_content section #ico-fore.section.ico::before{ content: "4"; font-family: var(--fontfamily-base); font-weight: bold; } #free_page_area .fp_content section #ico-five.section.ico::before{ content: "5"; font-family: var(--fontfamily-base); font-weight: bold; } #contents[data-content*="つかしんギャラリー"] .fp_content section #ico-no.section.ico::before{ background: transparent; } #contents[data-content*="つかしんギャラリー"] .fp_content article.g_info #ico-no.section.ico p{ padding: 0 0 16px; border-bottom: none; } #free_page_area .fp_content section #ico-map.section.ico::before{ content: "\e55e"; } #free_page_area .fp_content section #ico-floor.section.ico::before{ content: "\e3ec"; } #free_page_area .fp_content #ico-map.section.ico{ margin-top: 0; } #free_page_area .fp_content article.map section h5 + p { margin-bottom: 16px; } #free_page_area .fp_content article.map p.btn a{ margin: 42px auto 0; padding: 20px; font-size: 16px; width: 32%; } #free_page_area .fp_content .table01, #free_page_area .fp_content .table01.no-b_b tr:last-of-type th, #free_page_area .fp_content .table01.no-b_b tr:last-of-type td{ border-bottom: 0; } #free_page_area .fp_content .table01.no-b_b tr:last-of-type th, #free_page_area .fp_content .table01.no-b_b tr:last-of-type td{ padding-bottom: 0; } #free_page_area .fp_content .table01.first tr:first-of-type th, #free_page_area .fp_content .table01.first tr:first-of-type td{ padding-top: 0; } #free_page_area .fp_content .table01.first tr:first-of-type th::before{ top: 0; } #free_page_area .fp_content .table01 th{ position: relative; width: 30%; text-align: left; padding-left: 20px; vertical-align: top; } #free_page_area .fp_content .table01 th::before{ content: ""; display: inline-block; background: var(--color-base-main-yellow); width: 4px; height: 25px; position: absolute; top: 20px; left: 0; } #contents[data-content*="テナント募集"] .fp_content .table01 th::before{ background: var(--color-base-main-yellow); } #contents[data-content*="つかしんギャラリー"] .fp_content .table01 th::before{ background: var(--color-base-main-green); } #free_page_area .fp_content section #ico-parking3 .table01 th{ width: 50%; } #free_page_area .fp_content section h5 { font-weight: bold; font-size: 16px; } #free_page_area .fp_content section .image{ margin-top: 20px; border-radius: var(--box-radius-medium); overflow: hidden; } #free_page_area .fp_content .access_map section .image{ margin-top: 0px; } #free_page_area .fp_content section h5 + p{ margin-top: 8px; } #free_page_area .fp_content section #ico-baby h5 + p{ margin-bottom: 25px; } #free_page_area .fp_content section #ico-locker p{ margin-bottom: 25px; } #free_page_area .fp_content section #ico-freeze h5{ margin-bottom: 25px; padding: 10px 0 0; } #free_page_area .fp_content section #ico-pet p{ margin-bottom: 40px; } #free_page_area .fp_content section table + ul, #free_page_area .fp_content section ul + p, #free_page_area .fp_content section table + p{ margin-top: 16px; margin-top: 16px; border-top: 1px solid var(--color-base-line-dark); padding: 10px 0; } #free_page_area .fp_content section #ico-parking p{ font-size: 16px; font-weight: bold; color:var(--color-base-accent-dark); } #free_page_area .fp_content section a{ background: var(--color-base-main-yellow); padding: 1px 8px 2px; color: #FFF; font-size: 85%; border-radius: 50px; } #free_page_area .fp_content p.btn{ text-align: center; } #free_page_area .fp_content p.btn a { display: block; margin: 72px auto 0; width: 50%; text-align: center; color: var(--color-base-text-dark); background: #fff; box-sizing: border-box; box-shadow: var(--box-shadow-small); border-radius: var(--box-radius-medium); padding: 30px 30px; position: relative; font-size: 25px; font-weight: bold; } #free_page_area .fp_content p.btn a:after { content: ""; width: 20px; height: 20px; display: block; position: absolute; bottom: 0; right: 0; border-radius: 100% 0 10px 0; background: var(--color-base-main-yellow); } #contents[data-content*="テナント募集"] .fp_content p.btn a:after{ background: var(--color-base-main-yellow); } #contents[data-content*="つかしんギャラリー"] .fp_content p.btn a:after{ background: var(--color-base-main-green); } #free_page_area .fp_content section p.att{ text-align: center; padding: 50px 0 0px; font-weight: bold; } #free_page_area .fp_content section p.contact{ padding: 16px 0 0; font-weight: bold; } #free_page_area .fp_content .gallery{ display: flex; margin: 0 0 42px; } #free_page_area .fp_content dl dd{ display: flex; background-color: var(--color-base-main-green); /* padding: 24px 12px 24px 24px; */ justify-content: center; } #free_page_area .fp_content dl dd .content{ display: flex; padding: 20px; gap: 15px; font-size: 14px; background-color: #fff; width: 100%; text-align: center; font-weight: bold; border-radius: var(--box-radius-large); justify-content: space-around; } #free_page_area .fp_content dl dd.left{ padding: 24px 12px 24px 24px;; } #free_page_area .fp_content dl dd.right{ padding: 24px 24px 24px 12px; } /*---------------------- 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% / 2); box-sizing: border-box; padding: 0; height: 70px; vertical-align: bottom; border-right: 4px solid #fff; } .shop_guide_menu ul li:last-of-type { border-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-lightblue); 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-lightblue); } /* --------------------------------------------- フロアガイド(floor.jsp用) --------------------------------------------- */ body.floor h2 strong { font-weight: bold; display: inline-block; margin-left: 10px; font-size: 1.1em; } body.floor #contents-main h4 { margin: 40px 0 0; font-size: 18px; padding: 15px 0; text-align: center; font-weight: bold; color: #FFF; background: var(--color-base-main-lightblue); } body.floor #contents-main #f_e1f h4, body.floor #contents-main #f_e2f h4, body.floor #contents-main #f_e3f h4, body.floor #contents-main #f_e4rf h4{ background:var(--color-base-main-blue); } body.floor #contents-main #f_w1f h4, body.floor #contents-main #f_w2f h4{ background:var(--color-base-main-yellow); } body.floor .floor_icon{ padding-top: 20px; } body.floor .floor_icon p{ display: inline-block; font-size: 14px; line-height: 1em; margin: 1px 5px; } body.floor .floor_icon em{ background-image: url(../static/fig_floor-signicon.svg); display: inline-block; width: 22px; height: 20px; background-position: center; background-size: auto 20px; text-indent: -9999em; overflow: hidden; background-repeat: no-repeat; padding: 0 !important; margin: 0 2px; vertical-align: middle; } body.floor .floor_icon em.icon1{background-position: 0px 0px;} body.floor .floor_icon em.icon2{background-position: -25px 0;} body.floor .floor_icon em.icon3{background-position: -50px 0;} body.floor .floor_icon em.icon4{background-position: -75px 0;} body.floor .floor_icon em.icon5{background-position: -100px 0;} body.floor .floor_icon em.icon6{background-position: -125px 0;} body.floor .floor_icon em.icon7{background-position: -150px 0;} body.floor .floor_icon em.icon8{background-position: -175px 0;} body.floor .floor_icon em.icon9{background-position: -200px 0;} body.floor .floor_icon em.icon10{background-position: -225px 0;} body.floor .floor_icon em.icon11{background-position: -250px 0;} body.floor .floor_icon em.icon12{background-position: -275px 0;} body.floor .floor_icon em.icon13{background-position: -300px 0;} body.floor .floor_icon em.icon14{background-position: -325px 0;} body.floor .floor_icon em.icon15{background-position: -350px 0;} body.floor .floor_icon em.icon16{background-position: -375px 0;} body.floor .floor_icon em.icon17{background-position: -400px 0;} body.floor .floor_icon em.icon18{background-position: -425px 0;} body.floor .floor_icon em.icon19{background-position: -450px 0;} body.floor .floor_icon em.icon20{background-position: -475px 0;} body.floor .floor_icon em.icon21{background-position: -500px 0;} body.floor .floor_icon em.icon22{background-position: -525px 0;} body.floor .floor_icon em.icon23{background-position: -550px 0;} body.floor .floor_icon em.icon24{background-position: -575px 0;} body.floor .floor_icon em.icon25{background-position: -600px 0;} body.floor article .floor_img { padding: 24px 0; width: 100%; box-sizing: border-box; border-radius: 0px; } body.floor article .floor_img img { width: calc(100% - 22px); } body.floor article .floor_img .desc { background: #fff; padding: 16px; margin: 8px 0 0; background: var(--color-base-bg-light); text-align: center; } body.floor #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; display: block; } body.floor table.table01 { margin: 16px 0; } body.floor table.table01 td.number { width: 3%; border-right: none; padding-right: 3px; } body.floor table.table01 td.name { width: 20%; border-right: none; border-left: none; font-weight: bold; padding-left: 3px; } body.floor table.table01 td.logo { width: 8%; border-left: none; } body.floor table.table01 td.category { width: 15%; font-size: 0.9em; } body.floor table.table01 td.hour { width: 15%; font-size: 0.9em; } body.floor table.table01 td.logo img { max-width: 80px; } body.floor .cl_fl_list { overflow: hidden; margin: 0 0 10px 0; } body.floor .cl_fl_list dt { float: left; padding: 5px 0; } body.floor .cl_fl_list dd .floorlist dt { float: left; margin: 0 2px; padding: 0; } body.floor .cl_fl_list dd .floorlist dt a { position: relative; padding: 5px 10px; background: var(--color-base-bg-light); border-radius: 0px; display: inline-block; text-decoration: none; font-size: 16px; min-width: 30px; text-align: center; color: var(--color-base-accent-dark); } body.floor .cl_fl_list dd .floorlist dt a:hover { background: var(--color-base-accent-dark); color: #fff; } /*Zoomの追加css　*/ body.floor article .floor_img .zoom_area { position: relative; } .leaflet-container { z-index: 10; padding: 0px 10px; border: 1px solid #ccc; background-color: #fff; } /*----------店舗一覧テーブル----------*/ .floor_notice { padding: 10px 0; font-size: 10px; text-align: right; } .floor .table01 thead { display: none; } .floor .table01 td.category { position: relative; } .floor .table01 td.category::after { font-family: var(--fontfamily-icon); content: ""; margin: 0 0 0 4px; color: var(--color-base-accent-dark); vertical-align: middle; position: absolute; font-size: 20px; right: 10px; } /*構造*/ body.view .floor table.table01 th, body.view .floor table.table01 td { box-sizing: border-box; font-size: 12px; padding: 20px 16px; } 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: 10%; } /*ショップ番号*/ body.view .floor .table01 td.number { text-align: center; position: relative; padding: 0; } .floor .table01 td.name{ position: relative; } .floor .table01 tr td.name::before { content: ""; display: inline-block; background: var(--color-base-bg-light); width: 4px; height: 45%; position: absolute; top: 20px; left: 0; } /*カテゴリ別色分け*/ .floor .table01 tr[data-cat="ファッション"] td.name::before { background: var(--color-base-main-yellow); } .floor .table01 tr[data-cat="ファッション雑貨"] td.name::before { background: var(--color-base-main-orange); } .floor .table01 tr[data-cat="生活雑貨"] td.name::before { background: var(--color-base-main-lightblue); } .floor .table01 tr[data-cat="グルメ"] td.name::before { background: var(--color-base-main-red); } .floor .table01 tr[data-cat="フード"] td.name::before { background: var(--color-base-main-green); } .floor .table01 tr[data-cat="クリニック"] td.name::before { background: var(--color-base-main-blue); } .floor .table01 tr[data-cat="サービス・アミューズメント・スクール"] td.name::before { background: var(--color-base-main-purple); } .floor .table01 td.name .category { font-size: 12px; font-weight: normal; } .floor .table01 td.name .shopname { font-size: 16px; line-height: 18px; } .floor .table01 td.name a { font-weight: bold; } .floor .floor_notice img { height: 16px; width: auto; vertical-align: middle; } .floor .table01 .icn { display: block; position: absolute; top: 32%; right: 10px; } .floor .table01 .hour:before { font-family: var(--fontfamily-icon); content: "\e8b5"; margin: 0 4px 0 0; font-size: 16px; vertical-align: bottom; } .floor .table01 .tel:before { font-family: var(--fontfamily-icon); font-variation-settings: '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-main-lightblue); } /* --------------------------------------------- フロアガイド共通マップ --------------------------------------------- */ .floor dl.floorlist, .allmap_map ul { display: flex; justify-content: center; flex-wrap: wrap; margin: 40px 0 10px; gap: 20px; } .floor dl.floorlist dt, .allmap_map li { text-align: center; font-size: 16px; letter-spacing: 0.1em; width: calc(100% / 4 - 32px); } .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; border-radius: 100px; box-shadow: var(--box-shadow-medium); } .floor dl.floorlist dt a:after, .allmap_map li a:after { position: absolute; top: calc((100% - 20px)/2); right: 5px; font-family: var(--fontfamily-icon); font-weight: normal; content: "\e5cc"; vertical-align: middle; display: block; font-size: 24px; color: var(--color-base-main-lightblue); } .floor dl.floorlist dt.fid_e1f a:after, .floor dl.floorlist dt.fid_e2f a:after, .floor dl.floorlist dt.fid_e3f a:after, .floor dl.floorlist dt.fid_e4rf a:after { color: var(--color-base-main-blue); } .floor dl.floorlist dt.fid_w1f a:after, .floor dl.floorlist dt.fid_w2f a:after { color: var(--color-base-main-yellow); } .floor dl.floorlist dt a:hover, .allmap_map li a:hover { text-decoration: none; } /* --------------------------------------------- フロアページ下部　フロア一覧 --------------------------------------------- */ .floor #contents-main .floorsearch_box .floorsearch { font-family: var(--fontfamily-english); color: var(--color-base-main-dark); text-align: center; font-size: 30px; padding: 30px 0 40px; background: none; } /*.floorsearch_box .floorsearch:before { content: ""; width: 48px; height: 2px; margin: 20px auto 12px; display: block; background: var(--color-base-main-dark); }*/ .floorsearch_box { background: var(--color-base-bg-light); border-radius: var(--box-radius-large); margin: 50px auto 60px; } .floorsearch_box dl.floorlist { text-align: center; padding: 0 20px 30px; margin: 0 auto; } .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 dl.floorlist dt a { display: block; padding: 8px 12px; font-weight: normal; background: #FFF; box-shadow: none; } /* --------------------------------------------- ランキングページ(shop/favorite.jsp) --------------------------------------------- */ #contents.favorite #favorite .item { margin: 0 0 30px 0; padding: 20px 40px; box-sizing: border-box; position: relative; } #contents.favorite #favorite .item:first-of-type { margin-top: 30px; } #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: 50px; height: 50px; margin: 0 20px 0 0; background: var(--color-base-main-red); font-family: var(--fontfamily-english); font-weight: 700; color: #fff; text-align: center; font-size: 24px; line-height: 50px; border-radius: var(--box-radius-full); position: absolute; top: 5px; left: 20px; z-index: 2; } #contents.favorite #favorite .item:nth-of-type(1) .order { background: url(../img/ico-clown.svg) no-repeat; background-position: center; background-size: contain; width: 70px; height: 60px; border-radius: 0; line-height: 65px; top: 0; left: 10px; } /*#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 25px 0 0; overflow: hidden; position: relative; border-radius: var(--box-radius-large); box-shadow: var(--box-shadow-small); } #contents.favorite #favorite .item.noimg .image{ /*border: 1px solid var(--color-base-line-light);*/ } #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; padding: 0; width: calc(100% - 330px); } #contents.favorite #favorite .item .goods.title a { font-weight: bold; } #contents.favorite #favorite .goods_like_btn.mini { color: var(--color-base-main-red); width: 70px; height: 70px; text-align: center; line-height: 0px; border-radius: var(--box-radius-full); border: solid 2px var(--color-base-main-red); font-size: 18px; background: #FFF; position: relative; bottom: -10px; padding: 0; } #contents.favorite #favorite .goods_like_btn.mini p { padding: 0; border-radius: 0; font-size: 1.0em; font-weight: bold; } #contents.favorite #favorite .goods_like_btn.mini p i { vertical-align: top; position: relative; top: 1px; font-weight: 400; } #contents.favorite #favorite .item .morelink { display: none; } /* --------------------------------------------- 人気タグページ(shop/tag.jsp) --------------------------------------------- */ #contents #tag { text-align: center;padding: 0 0 50px; } /*タグ　タイトル部*/ #contents.tag .tag-title { color: var(--color-base-text-dark); background: none; text-align: center; padding: 16px 0; border: 1px solid var(--color-base-line-light); border-width: 1px 0 1px 0; margin: 0 auto 10px; } #contents.tag .tag-title:first-of-type { margin-top: 0px; border-width: 0 0 1px 0; } #contents.tag .tag-title::before { content: "#"; font-family: var(--fontfamily-english); color: var(--color-base-main-lightblue); font-size: 22px; margin: 0px 3px 0 0; vertical-align: middle; background: none; position: relative; top: 0px; font-weight: 700; } .tagitemlist #contents.tag .tag-title{ font-size: 18px; font-weight: bold; background: var(--color-base-bg-lightblue); border: 0; } .tagitemlist #contents.tag .tag-title::before { font-size: 28px; top: -3px; } #contents.tag .tag-title_main { vertical-align: middle; } #contents.tag .tag-title_count { font-size: 16px; font-weight: bold; color: #FFF; 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-main-red); line-height: 30px; text-align: center; } /*タグ　アイテムリスト*/ #contents #tag .goodslist { /*overflow: hidden;*/ display: flex; /*justify-content: space-between;*/ } #contents #tag .goodslist .item { width: calc(100% / 3); box-sizing: border-box; margin: 10px 0 0; padding: 16px 10px; text-align: left; /**/ position: relative; } #contents #tag .goodslist .item .news_box { width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 20px; } #contents #tag .goodslist .item p.image { width: 180px; height: 180px; border-radius: 0px; border-radius: var(--box-radius-medium); overflow: hidden; box-shadow: var(--box-shadow-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 .item .desc{ width: calc(100% - 200px); } #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; min-width: inherit; } #contents #tag .goodslist .item .goods::before{ display: none; } #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: 20px 0 40px; } #contents #tag .more-button-wrap .btn-more { display: inline-block; padding: 16px 34px 16px 20px; font-size: 14px; border-radius: 40px; position: relative; box-shadow: var(--box-shadow-medium); width: 120px; } #contents #tag .more-button-wrap .btn-more::before{ top: 8px; background: var(--color-base-main-lightblue); right: 11px; } /*#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 6px 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-main-red); color: #FFF; 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: 100px; } #contents #tag .more-button-wrap:last-of-type:after { font-family: var(--fontfamily-english); text-align: center; font-size: 24px; content: "Other Tags"; display: block; position: absolute; bottom: -75px; left: 0; width: 100%; padding: 0 0 20px; border-bottom: 1px solid var(--color-base-line-light); } /*下部に並ぶタグ一覧（tagitemlist）*/ #contents .trendtag_list { background: var(--color-base-bg-light); border-radius: var(--box-radius-large); width: var(--inner-Width); max-width: var(--inner-Max-Width); min-width: var(--inner-Min-Width); margin: 0 auto 60px; } #contents .trendtag_list h4 { font-family: var(--fontfamily-english); color: var(--color-base-main-dark); text-align: center; font-size: 30px; padding: 30px 0 40px; } #contents .trendtag_list h4 a { } #contents .trendtag_list .tag_list{ padding: 0 20px 30px; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } #contents .trendtag_list .tag_list .tag_list_name a{ box-shadow: none; } /*一覧へ戻るボタン*/ #contents.tag .return_list { clear: both; margin: 20px 0; line-height: 1em; text-align: center; } #contents.tag .return_list a { display: inline-block; padding: 15px 25px 15px 40px; font-size: 14px; border-radius: 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; 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 #contents article h3 { border: none; margin: 0 0 20px; padding: 0; overflow: hidden; background: none; text-align: center; background: var(--color-base-bg-light); } 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: 0 0 20px; display: none; } 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; padding: 24px 0 12px; white-space: pre-wrap; } body.item_feature #contents .content2 { padding: 0 0 24px; } /*一覧へ戻るボタン*/ #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; align-items: center; } #contents .voice .p_title h3{ margin: 0; } #contents .voice .p_title h3::before{ top: 1px; } #contents .voice .p_title p{ margin: 8px 0 0 40px; } #contents .voice .p_title ul { width: 100%; padding: 0; } #contents .voice .swiper-container_voice { width: 80%; display: flex; overflow: hidden; box-sizing: border-box; padding: 10px 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: 100%; height: auto; box-sizing: border-box; padding: 0; } #contents .voice ul .detail { width: calc(100% - 130px); float: right; margin: 0 20px 0 0; padding: 10px 20px; box-sizing: border-box; position: relative; min-height: 70px; background: #fff; border-radius: var(--box-radius-medium); box-shadow: var(--box-shadow-medium); } #contents .voice ul .detail:before, #contents .voice ul .detail:after { right: 100%; top: 46px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } #contents .voice ul .detail:before { border-right-color: #ebebeb; border-width: 10px; margin-top: -8px; } #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{ width: 100%; } #contents .voice ul .shopname a { display: block; font-size: 12px; } #contents .voice .swiper-container-vertical { width: calc(100% - 450px); height: 270px; display: flex; flex-wrap: wrap; overflow: hidden; box-sizing: border-box; padding: 0 0 5px; } #contents .voice ul li { display: flex; width: 100%; flex-shrink: 0; align-items: center; } #contents .voice .swiper-container.one_item ul li { width: 100%; display: flex; align-items: center; } #contents .voice ul .logoimg{ width: 88px; margin-right: 30px; border: 1px solid var(--color-base-line-light); border-radius: var(--box-radius-full); text-align: center; background-color: #fff; } #contents .voice ul .logoimg .logo{ background-size: contain; background-repeat: no-repeat; background-position: center center; display: block; width: 64px; height: 64px; margin: 10px auto; } #contents .voice ul p{ font-size: 15px; width: 100%; } #contents .voice ul p span:last-child{ color: #5A5A5A; } /* --------------------------------------- ニュース、クーポン、ボイス、求人のタブ --------------------------------------- */ .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-red); 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-red); } .shopnews_tab li a .num { font-size: 14px; font-family: var(--fontfamily-english); line-height: 1em; text-align: center; background: var(--color-base-accent-dark); display: block; width: 30px; height: 30px; border-radius: 50%; box-sizing: border-box; opacity: 1.0; color: #fff; padding: 8px 0 0 2px; position: absolute; top: -8px; right: 8px; } .shopnews_tab li.current a[href*="tag"]{ background: var(--color-base-main-lightblue); } .shopnews_tab li.current a[href*="tag"]:after{ border-top: 12px solid var(--color-base-main-lightblue); } /*.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; }*/ /* --------------------------------------------- 特典ページ --------------------------------------------- */ .benefit .bene_box{ position: relative; text-align: center } .benefit .bene_box:not(:first-of-type){ margin-top: 40px; } .benefit .bene_box p.txt{ margin: 15px auto 0; text-align: center; position: relative; display: inline-block; box-sizing: border-box; padding: 0 40px; } .benefit .bene_box p.txt::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: #FFF; background: var(--color-base-main-purple); border-radius: 100px; padding: 2px 1px 0; line-height: 1; } .line_benefit #contents-main.all, .rain_benefit #contents-main.all{ padding: 0; } /* バナー */ #headerbg.benefit li, #headerbg.benefit p{ margin: 30px 0 0; text-align: center; } /* ナビゲーション */ .benefit_navi{ margin: 60px 0; padding: 0 40px; } .benefit_navi ul{ display: flex; flex-wrap: nowrap; justify-content: space-around; align-items: center; column-gap: 40px; } .benefit_navi ul li{ width: calc(100%/6 - 40px); } .benefit_navi ul li a{ display: block; width: 100%; height: 100%; position: relative; box-sizing: border-box; padding: 30px 0; text-align: center; border-radius: 16px; box-shadow: var(--box-shadow-small); } .benefit_navi ul li a::before{ content: ""; display: block; width: 100%; height: 50px; margin-bottom: 12px; } .benefit_navi ul li.btn_gr01 a::before{background: url(../img/ico_fash.png) no-repeat center; background-size: contain;} .benefit_navi ul li.btn_gr02 a::before{background: url(../img/ico_goods.png) no-repeat center; background-size: contain;} .benefit_navi ul li.btn_gr03 a::before{background: url(../img/ico_life.png) no-repeat center; } .benefit_navi ul li.btn_gr04 a::before{background: url(../img/ico_gourm.png) no-repeat center; background-size: contain;} .benefit_navi ul li.btn_gr05 a::before{background: url(../img/ico_food.png) no-repeat center;} .benefit_navi ul li.btn_gr06 a::before{background: url(../img/ico_clinic.png) no-repeat center; background-size: contain;} .benefit_navi ul li.btn_gr07 a::before{background: url(../img/ico_service.png) no-repeat center; background-size: contain;} .benefit_navi ul li a::after{ content: ""; width: 30px; height: 30px; display: block; position: absolute; bottom: 0; right: 0; border-radius: 100% 0 16px 0; } .benefit_navi ul li.btn_gr01 a::after{background: var(--color-base-main-yellow);} .benefit_navi ul li.btn_gr02 a::after{background: #e8b182;} .benefit_navi ul li.btn_gr03 a::after{background: var(--color-base-main-lightblue);} .benefit_navi ul li.btn_gr04 a::after{background: var(--color-base-main-red);} .benefit_navi ul li.btn_gr05 a::after{background: var(--color-base-main-green);} .benefit_navi ul li.btn_gr06 a::after{background: var(--color-base-main-blue);} .benefit_navi ul li.btn_gr07 a::after{background: var(--color-base-main-purple);} @media (max-width: 1270px) { .benefit_navi{ padding: 0;} .benefit_navi ul{ column-gap: 20px;} .benefit_navi ul li{ width: calc(100%/6 - 10px);} .benefit_navi ul li a{ padding: 20px 0;} .benefit_navi ul li a::after{ width: 25px; height: 25px;} } /* ---------------------- ticket.jsp ナビメニュー調整 ---------------------- */ .ticket_benefit #header_wrapper .p-ttl{ background: var(--color-base-bg-green); font-size: 32px; font-weight: bold; line-height: 1.5; padding: 30px 0; } .ticket_benefit #header_wrapper .p-ttl strong{ font-size: 42px; } .benefit_navi.ticket{ margin: 60px 0; padding: 0 235px; } .benefit_navi.ticket ul{ flex-wrap: wrap; gap: 25px; justify-content: center; } .benefit_navi.ticket ul li{ width: calc(100%/4 - 25px); } @media (max-width: 1270px) { .benefit_navi.ticket{padding: 0 80px;} } /* h3調整 */ #contents-main .benefit h3{ margin: 0 0 3px; font-size: 24px; color: #fff; padding: 15px 0; text-align: center; font-weight: bold; } #contents-main .benefit h3#cat1{ background: var(--color-base-main-yellow); } #contents-main .benefit h3#cat2{ background: #e8b182; } #contents-main .benefit h3#cat3{ background: var(--color-base-main-lightblue); } #contents-main .benefit h3#cat4, #contents-main #redticket.benefit h3{ background: var(--color-base-main-red); } #contents-main .benefit h3#cat5{ background: var(--color-base-main-green); } #contents-main .benefit h3#cat6{ background: var(--color-base-main-blue); } #contents-main .benefit h3#cat7{ background: var(--color-base-main-purple); } #contents-main .benefit h3#cat1::before, #contents-main .benefit h3#cat2::before, #contents-main .benefit h3#cat3::before, #contents-main .benefit h3#cat4::before, #contents-main .benefit h3#cat5::before, #contents-main .benefit h3#cat6::before, #contents-main .benefit h3#cat7::before, #contents-main .benefit h3#cat8::before, #contents-main #redticket.benefit h3::before{ content: none; } /* テキスト */ #contents-main .benefit .catlist{ margin: 0 0 50px; } #contents-main .benefit .index{ display: flex; gap: 2px; font-size: 18px; font-weight: bold; text-align: center; } #contents-main .benefit .index p{ padding: 10px 0; background-color: #edeff1; } #contents-main .benefit .index p.shop{ width: 35%; } #contents-main .benefit .index p.benefit{ width: 65%; } .benefit .table01 th, .benefit .table01 td{ padding: 20px 15px; } .benefit .table01 td.logo{ width: 100px; height: 50px; } .benefit .generic span{ color: #e51a1a; font-weight: bold; } .benefit .item .name{ font-size: 18px; font-weight: bold; text-align: left; } .benefit .item .floor{ font-weight: normal; font-size: 14px; } /* ---------------------- ticket.jsp テキストstyle ---------------------- */ .benefit.ticket .itemlist{ display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 20px 0 0; justify-content: space-between; } .benefit.ticket .item{ width: calc(100%/2 - 40px); display: flex; justify-content: space-between; border-bottom: 1px solid var(--color-base-line-dark); padding: 0 0 20px; } .benefit.ticket .item .logo{ width: 100px; height: 50px; } /* ---------------------- preferential.jsp card.jsp ---------------------- */ /* バナーの高さ */ #headerbg.benefit .cardbnr img{ min-height: 320px; /*width: 100%;*/ } /* ナビゲーション共通 */ #headerbg.benefit .members_navi{ /*background: var(--color-base-main-yellow);*/ padding: 30px 120px; } #headerbg.benefit .members_navi ul{ display: flex; flex-wrap: nowrap; justify-content: space-around; align-items: center; column-gap: 30px; } #headerbg.benefit .members_navi ul li{ width: calc(100%/4 - 30px); margin: 0; } #headerbg.benefit .members_navi ul li a{ display: block; width: 100%; height: 100%; position: relative; box-sizing: border-box; padding: 30px 0; text-align: center; border-radius: 16px; box-shadow: var(--box-shadow-small); background-color: #fff; font-weight : bold; font-size: 1.3em; line-height: 150%; } #headerbg.benefit .members_navi ul li a::after{ content: ""; width: 30px; height: 30px; display: block; position: absolute; bottom: 0; right: 0; border-radius: 100% 0 16px 0; } #headerbg.benefit .members_navi ul li.btn_mem01 a::after{background: var(--color-base-main-blue);} #headerbg.benefit .members_navi ul li.btn_mem02 a::after{background: var(--color-base-main-lightblue);} #headerbg.benefit .members_navi ul li.btn_mem03 a::after{background: var(--color-base-main-blue);} #headerbg.benefit .members_navi ul li.btn_mem04 a::after{background: var(--color-base-main-lightblue);} @media screen and (max-width:1270px){ #headerbg.benefit .members_navi{padding: 30px 60px;} #headerbg.benefit .members_navi ul li a::after{width: 25px; height: 25px;} } /* ---------------------- card.jsp ---------------------- */ /* サイドメニュー */ .members .sidemenu dt::after { background: var(--color-base-main-blue); } .members .sidemenu dd > a:after { background: var(--color-base-main-blue); } .members #contents-main{ padding: 0; } .members #contents-main p.atten{ margin: 0 auto; } .members #contents-main p.atten a{ display: block; font-size : 18px; letter-spacing : 0.72px; font-weight: bold; border: 3px solid #e51a1a; padding: 25px 0; text-align: center; margin: 50px 0 0; position: relative; } .members #contents-main p.atten a::after{ position: absolute; font-family: var(--fontfamily-icon); content: "\e5cc"; display: block; width: 30px; height: 30px; color: #e51a1a; right: 0; top: 26px; text-align: center; font-size: 24px; } .members #contents-main .cardguide{ margin: 40px 0; border-radius: var(--box-radius-xlarge); background: url("../static/img/bg_cardguid2.png") #FCF5E3; background-size: cover; padding: 40px 60px; position: relative; text-align: center; container-type: inline-size; width: 100%; box-sizing: border-box; } @media screen and (max-width: 1120px){ .members #contents-main .cardguide{ padding: 40px; } } .members #contents-main .cardguide h4{ font-size: 32px; font-weight: bold; margin-bottom: 20px; } .members #contents-main .cardguide h5{ font-size: 18px; font-weight: bold; padding-bottom: 4px; border-bottom: 3px solid #cf3b3a; display: inline; white-space: nowrap; } .members #contents-main .cardguide strong{ color: #cf3b3a; } .members #contents-main .cardguide strong span{ font-size: 170%; font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; font-variation-settings: "wdth" 75; position: relative; top: 2px; padding: 0 5px; } .members #contents-main .cardguide .entry_bnft{ background: #FFF; border-radius: var(--box-radius-xlarge); padding: 30px; margin-top: 36px; font-size: clamp(18px, 3cqw, 26px); font-weight: bold; line-height: 1.5em; } .members #contents-main .cardguide .entry_bnft em{ background: linear-gradient(transparent 70%, #F2CB75 70%); } .members #contents-main .cardguide .entry_bnft.limited{ position: relative; } .members #contents-main .cardguide .entry_bnft.limited::before{ content: "期間限定"; background: #cf3b3a; color: #FFF; display: block; position: absolute; top: -10px; left: -10px; width: 100px; height: 100px; border-radius: var(--box-radius-full); box-sizing: border-box; padding: 20px; line-height: 1.2; transform: rotate(-15deg); font-size: 22px; } .members #contents-main .cardguide .entry_bnft.limited dt{ background: #e8b18247; border-radius: var(--box-radius-xlarge); display: inline-block; padding: 2px 0 1px; font-size: 18px; width: 70%; margin: 0 auto; } .members #contents-main .cardguide .entry_bnft.limited dd{ padding: 16px 0 32px; } .members #contents-main .cardguide .entry_bnft.limited dd{ } .members #contents-main .cardguide .entry_bnft.limited .time{ background: #cf3b3a; color: #FFF; display: inline-block; padding: 8px 0px 2px; border-radius: 30px; width: 70%; margin: 0 auto; font-size: 140%; font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; font-variation-settings: "wdth" 100; } .members #contents-main .cardguide .entry_bnft.limited .time strong{ background: #FFF; border-radius: var(--box-radius-full); color: var(--color-base-text-dark); font-size: 16px; padding: 2px 4px; position: relative; top: -5px; margin: 0 6px 0 1px; } .members #contents-main .cardguide .btn{ margin: 36px auto 0; width: 500px; font-size: 25px; } .members #contents-main .cardguide .btn::after { background-color: rgba(242, 203, 117, 1); } .members #contents-main h3{ background: none; padding: 0; margin: 60px 0 40px; position: relative; font-size: 24px; text-align: center; } .members #contents-main h3::before{ content: none; } .members #contents-main h3::after{ content: ""; display: block; height: 7px; background: var(--color-base-main-blue); width: 138px; margin: 14px auto 0; } .members #contents-main .service_content{ border-radius: var(--box-radius-xlarge); padding: 40px 45px 40px 145px; position: relative; margin: 0 0 40px; } .members #contents-main .point_service, .members #contents-main .sale{ background-color: var(--color-base-bg-lightblue); } .members #contents-main .parking, .members #contents-main .service{ background-color: var(--color-base-bg-light); } .members #contents-main .service_content .ico{ position: absolute; top: 40px; left: 40px; width: 67px; } .members #contents-main .service_content h4{ font-weight : bold; font-size : 18px; margin: 0 0 10px; } .members #contents-main .service_content p{ font-size : 14px; } .members #contents-main .point_service dl{ display: flex; /*background-color: var(--color-base-bg-yellow);*/ background: #FFF; flex-wrap: wrap; align-items: center; gap: 20px; border-radius: 60px; padding: 10px 15px; } .members #contents-main .point_service dl:not(:last-child){ margin: 20px 0 10px; } .members #contents-main .point_service dt{ width: 44px; } .members #contents-main .point_service dd{ width: calc(100% - 70px); font-size: 15px; font-weight : bold; } .members #contents-main .point_service dd span{ /*color: var(--color-base-main-red);*/ color: var(--color-base-main-blue); } .members #contents-main p.btn{ display: block; position: relative; box-sizing: border-box; padding: 20px 0; text-align: center; border-radius: 16px; box-shadow: var(--box-shadow-small); background-color: #fff; font-weight: bold; font-size: 1.3em; line-height: 150%; width: 462px; margin: 25px 0 0; font-size: 16px; } .members #contents-main p.btn::after{ content: ""; width: 30px; height: 30px; display: block; position: absolute; bottom: 0; right: 0; border-radius: 100% 0 16px 0; } .members #contents-main .service_content.point_service .btn::after, .members #contents-main .service_content.sale .btn::after{ background: var(--color-base-main-lightblue); } .members #contents-main .service_content.service .btn::after{ background: var(--color-base-main-blue); } .members #contents-main .application.btn::after{ background: var(--color-base-main-lightblue); } .members #contents-main p.btn.application{ width: 500px; margin: 40px auto 140px; font-size: 25px; } /* ---------------------- cardservice.jsp ---------------------- */ #contents .search .search_item { display: inline-block; padding: 0.5em 0.8em; cursor: pointer; border: 1px solid #473930; font-size: 14px; border-radius: 4px; margin:0 0.1em; } #contents .use_navi{ padding: 0 160px; margin: 30px 0 0; } #contents .use_navi ul{ display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } #contents .use_navi ul li { width: calc(100%/3 - 20px); margin-top: 0; } #contents .use_navi li a{ font-size: 1.3em; display: block; width: 100%; position: relative; box-sizing: border-box; padding: 20px 0; text-align: center; border-radius: 60px; box-shadow: var(--box-shadow-small); } .pc #contents .use_navi li a::after { position: absolute; font-family: var(--fontfamily-icon); content: "\e69b"; display: block; width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; color: #FFF; position: absolute; right: 16px; top: calc(50% - 12px); text-align: center; font-size: 24px; padding: 3px 0px 0px 0px; } #contents .use_navi li.btn_use01 a::after{ background: var(--color-base-main-lightblue); } #contents .use_navi li.btn_use02 a::after{ background: var(--color-base-main-blue); } #contents .use_navi li.btn_use03 a::after{ background: #edeff1; color:#000; } .ticket_benefit #contents .use_navi li{ width: 100%; } .ticket_benefit #contents .use_navi li.btn_use02 a::after{ background: var(--color-base-main-red); } @media (max-width: 1270px) { #contents .use_navi{padding: 0} } .members_shop #contents-main h3.use{ background: none; padding: 0; margin: 50px 0 30px; position: relative; font-size: 24px; text-align: center; font-weight : bold; } .members_shop #contents-main h3.use#not_available{ margin: 50px 0; } .members_shop #contents-main h3.use::before{ content: none; } .members_shop #contents-main h3.use::after{ content: ""; display: block; height: 7px; width: 163px; margin: 14px auto 0; } .members_shop #contents-main h3#available::after{ background: var(--color-base-main-lightblue); } .members_shop #contents-main h3#store::after{ background: var(--color-base-main-blue); width: 210px; } .members_shop #contents-main h3#not_available::after{ background: #edeff1; width: 424px; } .members_shop #contents-main p.att{ font-size: 1.3em; text-align: center; margin: 0 0 35px; } .members_shop #contents-main .benefit.ticket{ margin: 0 0 130px; } .members_shop .is-hide { display: none; } .members_shop #contents-main .search .true{ position: relative; } .members_shop #contents-main .search .search_item { display: inline-block; padding: 0.5em 1.5em; cursor: pointer; border: 1px solid var(--color-base-line-dark); font-size: 14px; border-radius: 4px; margin:0 0.1em; } .members_shop #contents-main .search .search_item.true.is-active { color: #fff; background-color: var(--color-base-main-lightblue); border: 1px solid var(--color-base-main-lightblue); } .members_shop #contents-main .search .search_item.part.is-active { color: #fff; background-color: var(--color-base-main-blue); border: 1px solid var(--color-base-main-blue); } .members_shop #contents-main .search .search_item.false.is-active { background: #edeff1; color: #000; border: 1px solid #edeff1; } .members_shop #contents-main .search .search_item.default{ line-height: 1.7em; } .members_shop #contents-main .search .search_item.default.is-active { color: #fff; background-color: var(--color-base-main-blue); border: 1px solid var(--color-base-main-blue); } .members_shop #contents-main .guideBOX table td.name { width: 50%; padding: 16px 8px 16px 16px; } .members_shop #contents-main .guideBOX table td.name .logo { display: block; width: 120px; text-align: center; float: right; } .members_shop #contents-main .guideBOX table td.name .logo img { max-height: 50px; margin: 0 auto; } .members_shop #contents-main .guideBOX table td.name a { display: block; font-weight: bold; margin-top: 0.5em; } .members_shop #contents-main .guideBOX table td.name .biz { font-size: 14px; } .members_shop #contents-main .guideBOX table td.name p { font-size: 16px; line-height: 20px; float: left; width: calc(100% - 120px); } .members_shop #contents-main .guideBOX table.table01 th:first-of-type { background: var(--color-base-bg-lightblue); border-right: none; } .members_shop #contents-main .guideBOX table td.floor { background: var(--color-base-bg-lightblue); font-weight: bold; text-align: center; } .members_shop #contents-main .guideBOX table.table01 th { border-right: 1px solid var(--color-base-line-dark); background: var(--color-base-bg-light); } .members_shop #contents-main .guideBOX table.table01 th:last-child{ border-right: none; } .members_shop #contents-main .guideBOX table td.gen { text-align: center; border-left: 1px solid var(--color-base-line-dark); position: relative; padding: 10px 10px 20px; } /* 対象店舗アイコン */ .members_shop #contents-main .search .search_item.true, .members_shop #contents-main .search .search_item.part, .members_shop #contents-main .search .search_item.false{ padding: 0.5em 1.5em 0.5em 1em; } /* .members_shop #contents-main .search .search_item{ position: relative; } */ .members_shop #contents-main .search .search_item::before{ font-family: var(--fontfamily-icon); font-weight: normal; font-size: 20px; vertical-align: middle; position: relative; top: -1px; margin-right: 5px; } .members_shop #contents-main .search .search_item.true::before{ content: "\f12e"; color: var(--color-base-main-lightblue); } .members_shop #contents-main .search .search_item.part::before{ content: "\e836"; color: var(--color-base-main-blue); } .members_shop #contents-main .search .search_item.false::before{ content: "\e5cd"; color: var(--color-base-text-dark); } .members_shop #contents-main .search .search_item.true.is-active::before, .members_shop #contents-main .search .search_item.part.is-active::before{ color:#fff } .members_shop #contents-main .search .search_item.false.is-active::before{ color: var(--color-base-text-dark); } .members_shop #contents-main .guideBOX table td.gen .true::before, .members_shop #contents-main .guideBOX table td.gen .part::before, .members_shop #contents-main .guideBOX table td.gen .false::before{ font-family: var(--fontfamily-icon); font-weight: normal; font-size: 30px; vertical-align: middle; display: block; } .members_shop #contents-main .guideBOX table td.gen .true::before { content: "\f12e"; color: var(--color-base-main-lightblue); } .members_shop #contents-main .guideBOX table td.gen .part::before{ content: "\e836"; color: var(--color-base-main-blue); } .members_shop #contents-main .guideBOX table td.gen .false::before{ content: "\e5cd"; color: var(--color-base-text-dark); } .members_shop #contents-main .hdl_txt{ text-align: center; margin-bottom: 24px; font-size: 90%; } .members_shop #contents-main .hdl_txt strong{ color: rgba(232, 177, 130, 1); } /* --------------------------------------------- facility.jsp --------------------------------------------- */ /* サイドメニュー */ body.facility_info .sidemenu dt::after{ background: var(--color-base-main-blue); } body.facility_info .sidemenu dd > a:after{ background: var(--color-base-main-blue); } /* タイトル */ body.facility_info #contents-main article h3{ margin: 30px 0 20px } body.facility_info #contents-main article h3:before { background: var(--color-base-main-blue); } body.facility_info #contents-main .facility_info_content .p-title{ text-align: center; margin: 0 auto 30px; position: relative; font-size: 24px; font-weight: bold; } body.facility_info #contents-main .facility_info_content .p-title:not(:first-of-type){ margin-top: 40px; } body.facility_info #contents-main .facility_info_content .p-title::after{ content: ""; display: block; width: 100px; height: 7px; background: var(--color-base-main-blue); margin: 14px auto 0; } body.facility_info #contents-main section { padding: 30px 30px 40px; background: var(--color-base-bg-light); border-radius: var(--box-radius-large); } body.facility_info #contents-main section #sc_map { box-sizing: border-box; width: 100%; height: 311px; margin-bottom: 25px; } body.facility_info #contents-main section #sc_map iframe { width: 100%; height: 100%; border: none; border-radius: var(--box-radius-large); } body.facility_info #contents-main section .flex-box{ display: flex; justify-content: space-between; column-gap: 20px; } body.facility_info #contents-main section .flex-box .section{ width: 50%; } body.facility_info #contents-main section .section.ico{ position: relative; padding-left: 85px; min-height: 60px; } body.facility_info #contents-main section .section.ico:not(:first-of-type){ margin-top: 50px; } body.facility_info.pc #contents-main section #ico-m_bicycle.section, body.facility_info.pc #contents-main section #ico-parking.section{ margin-top: 0; } body.facility_info.pc #contents-main section #ico-parking2.section{ margin-bottom: 30px; } body.facility_info #contents-main section .section.ico::before{ font-family: var(--fontfamily-icon); content: ""; text-align: center; font-size: 40px; color: #FFF; padding-top: 16px; display: block; width: 60px; height: 60px; box-sizing: border-box; border-radius: var(--box-radius-full); background: var(--color-base-main-blue); position: absolute; top: 0; left: 0; } body.facility_info #contents-main section #ico-car.section.ico::before{ content: "\e531"; } body.facility_info #contents-main section #ico-time.section.ico::before{ content: "\e8b5"; padding: 19px 0 0; } body.facility_info #contents-main section #ico-exclamation.section.ico::before{ content: "\e645"; } body.facility_info #contents-main section #ico-info.section.ico::before{ content: "\e88e"; padding: 19px 0 0; } body.facility_info #contents-main section #ico-contact.section.ico::before{ content: "\f0e2"; } body.facility_info #contents-main section #ico-atm.section.ico::before{ content: "\e573"; padding: 19px 0 0; } body.facility_info #contents-main section #ico-baby.section.ico::before{ content: "\e11d"; } body.facility_info #contents-main section #ico-babycar.section.ico::before{ content: "\eb42"; padding: 19px 0 0; } body.facility_info #contents-main section #ico-locker.section.ico::before{ content: "\e897"; padding: 19px 0 0; } body.facility_info #contents-main section #ico-freeze.section.ico::before{ content: "\eb3b"; padding: 19px 0 0; } body.facility_info #contents-main section #ico-pet.section.ico::before{ content: "\e91d"; } body.facility_info #contents-main .table01, body.facility_info #contents-main .table01.no-b_b tr:last-of-type th, body.facility_info #contents-main .table01.no-b_b tr:last-of-type td{ border-bottom: 0; } body.facility_info #contents-main .table01.no-b_b tr:last-of-type th, body.facility_info #contents-main .table01.no-b_b tr:last-of-type td{ padding-bottom: 0; } body.facility_info #contents-main .table01.first tr:first-of-type th, body.facility_info #contents-main .table01.first tr:first-of-type td{ padding-top: 0; } body.facility_info #contents-main .table01.first tr:first-of-type th::before{ top: 0; } body.facility_info #contents-main .table01 th{ position: relative; width: 30%; text-align: left; padding-left: 20px; vertical-align: top; } body.facility_info #contents-main .table01 th::before{ content: ""; display: inline-block; background: var(--color-base-main-blue); width: 4px; height: 25px; position: absolute; top: 20px; left: 0; } body.facility_info #contents-main section #ico-time .table01 th{ width: 40%; } body.facility_info #contents-main section #ico-parking3 .table01 th{ width: 50%; } body.facility_info #contents-main section h5 { font-weight: bold; font-size: 16px; } body.facility_info #contents-main section .image{ margin-top: 20px; border-radius: var(--box-radius-medium); overflow: hidden; } body.facility_info #contents-main .access_map section .image{ margin-top: 0px; } body.facility_info #contents-main section h5 + p{ margin-top: 8px; } body.facility_info #contents-main section #ico-baby h5 + p{ margin-bottom: 25px; } body.facility_info #contents-main section #ico-locker p{ margin-bottom: 25px; } body.facility_info #contents-main section #ico-freeze h5{ margin-bottom: 25px; padding: 10px 0 0; } body.facility_info #contents-main section #ico-pet p{ margin-bottom: 40px; } body.facility_info #contents-main section table + ul, body.facility_info #contents-main section ul + p, body.facility_info #contents-main section table + p{ margin-top: 16px; margin-top: 16px; border-top: 1px solid var(--color-base-line-dark); padding: 10px 0; } body.facility_info #contents-main section #ico-parking p{ font-size: 16px; font-weight: bold; color:var(--color-base-accent-dark); } body.facility_info #contents-main section a{ background: var(--color-base-main-blue); padding: 1px 8px 2px; color: #FFF; font-size: 85%; border-radius: 50px; } body.facility_info #contents-main section p.btn{ text-align: center; } body.facility_info #contents-main section p.btn a { display: block; margin: 30px auto 0; width: 50%; text-align: center; color: var(--color-base-text-dark); background: #fff; box-sizing: border-box; box-shadow: var(--box-shadow-small); border-radius: var(--box-radius-medium); padding: 10px 30px; position: relative; font-size: 14px; font-weight: bold; } body.facility_info #contents-main section p.btn a:after { content: ""; width: 20px; height: 20px; display: block; position: absolute; bottom: 0; right: 0; border-radius: 100% 0 10px 0; background: var(--color-base-main-blue); } body.facility_info #contents-main section p.att{ text-align: center; padding: 50px 0 0px; font-weight: bold; } body.facility_info #contents-main section p.contact{ padding: 16px 0 0; font-weight: bold; } /* --------------------------------------------- card_epos.jsp cardservice_epos.jsp preferential_epos.jsp 20250501追加 --------------------------------------------- */ /* -------------------------------- 共通 -------------------------------- */ /* ---------------------- ナビゲーション ---------------------- */ #headerbg.benefit .members_navi.epos_navi ul li.btn_mem01 a::after{background: rgba(242, 203, 117, 1);} #headerbg.benefit .members_navi.epos_navi ul li.btn_mem02 a::after{background: rgba(232, 177, 130, 1);} #headerbg.benefit .members_navi.epos_navi ul li.btn_mem03 a::after{background: rgba(242, 203, 117, 1);} #headerbg.benefit .members_navi.epos_navi ul li.btn_mem04 a::after{background: rgba(232, 177, 130, 1);} /* ---------------------- サイドメニュー ---------------------- */ .members .sidemenu dt::after { background: rgba(242, 203, 117, 1); } .members .sidemenu dd > a:after { background: rgba(242, 203, 117, 1); } /* -------------------------------- card_epos.jsp -------------------------------- */ .members #contents-main.contents-main_epos h3 { line-height: normal; } .members #contents-main.contents-main_epos h3::after { content: ""; display: block; height: 7px; background: var(--color-base-main-orange); width: 138px; margin: 14px auto 0; } /* ポイントサービス */ .members #contents-main.contents-main_epos .point_service, .members #contents-main.contents-main_epos .sale, .members #contents-main.contents-main_epos .service{ background-color: rgba(232, 177, 130, 0.2); } .members #contents-main.contents-main_epos .parking{ background-color: rgba(242, 203, 117, 0.2); } .members #contents-main.contents-main_epos .point_service p.text strong { color: #cf3b3a; } .members #contents-main.contents-main_epos .point_service dl { border-radius: 30px; } .members #contents-main.contents-main_epos .point_service dd span { color: inherit; } .members #contents-main.contents-main_epos .point_service dd ul { } .members #contents-main.contents-main_epos .point_service dd li { display: flex; border-bottom: 1px dashed #e0e0e0; padding: 9px 0; } .members #contents-main.contents-main_epos .point_service dd li:last-of-type { border-bottom: none; } .members #contents-main.contents-main_epos .point_service dd li span.title { width: 30%; } .members #contents-main.contents-main_epos .point_service dd li span.description { flex: 1; } .members #contents-main.contents-main_epos .point_service dd li strong { color: #cf3b3a; } .members #contents-main.contents-main_epos .point_service .btn { padding: 0; } .members #contents-main.contents-main_epos .point_service .btn::after { background: var(--color-base-main-orange); pointer-events: none; } .members #contents-main.contents-main_epos .point_service .btn a { padding: 20px 0; display: block; } /* 専門店ご優待サービス */ .members #contents-main.contents-main_epos .service_content.service .btn::after { background: rgba(232, 177, 130, 1); } /* カード詳細とお申込みはこちら */ .members #contents-main.contents-main_epos .application.btn::after { background-color: rgba(242, 203, 117, 1); } /* -------------------------------- cardservice_epos.jsp -------------------------------- */ /* 切替ボタン */ /* .members_shop #contents-main.contents-main_epos .search .search_item.default.is-active { background: rgba(232, 177, 130, 1); border: 1px solid rgba(232, 177, 130, 1); } .members_shop #contents-main.contents-main_epos .search .search_item.default::before { color: rgba(232, 177, 130, 1); } .members_shop #contents-main.contents-main_epos .search .search_item.part.is-active { background: rgba(232, 177, 130, 1); border: 1px solid rgba(232, 177, 130, 1); } .members_shop #contents-main.contents-main_epos .search .search_item.part::before { color: rgba(232, 177, 130, 1); } .members_shop #contents-main.contents-main_epos .search .search_item.true.is-active { background-color: rgba(242, 203, 117, 1); } .members_shop #contents-main.contents-main_epos .search .search_item.true::before { color: rgba(242, 203, 117, 1); } .members_shop #contents-main.contents-main_epos .search .search_item.true.is-active::before, .members_shop #contents-main.contents-main_epos .search .search_item.part.is-active::before { color: #fff; } */ .members_shop #contents-main.contents-main_epos .search_menu { margin: 0 0 30px; } .members_shop #contents-main.contents-main_epos .search_menu ul { display: flex; justify-content: center; align-items: center; gap: 5px; } .members_shop #contents-main.contents-main_epos .search_menu ul li { width: calc((100% - 15px) / 4); } .members_shop #contents-main.contents-main_epos .search_menu ul li .search_item { display: block; text-align: center; background: var(--color-base-bg-light); width: 100%; height: 70px; line-height: 70px; font-size: 16px; cursor: pointer; } .members_shop #contents-main.contents-main_epos .search_menu ul li .search_item.is-active { background: rgba(232, 177, 130, 1); color: #fff; font-size: 18px; font-weight: bold; position: relative; } .members_shop #contents-main.contents-main_epos .search_menu ul li .search_item.is-active: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 rgba(232, 177, 130, 1); } .members_shop #contents-main .search_menu ul li .search_item::before{ font-family: var(--fontfamily-icon); content: ""; display: inline-block; padding-right: 10px; position: relative; top: 3px; font-weight: normal!important } .members_shop #contents-main .search_menu ul li .search_item.true::before{ content: "\f12e"; } .members_shop #contents-main .search_menu ul li .search_item.part::before{ content: "\e836"; } .members_shop #contents-main .search_menu ul li .search_item.false::before{ content: "\e5cd"; } /*説明文*/ .members_shop #contents-main.contents-main_epos .summery_txt{ text-align: center; margin-bottom: 24px; } .members_shop #contents-main.contents-main_epos .summery_txt::before{ font-family: var(--fontfamily-icon); font-weight: normal; font-size: 20px; vertical-align: middle; position: relative; top: -1px; margin-right: 5px; content: "\e836"; color: rgba(232, 177, 130, 1); } /* アイコン */ .members_shop #contents-main.contents-main_epos .guideBOX table td.gen .part::before, .members_shop #contents-main.contents-main_epos .guideBOX table td.gen .true::before { color: rgba(232, 177, 130, 1); } /* 表 */ .members_shop #contents-main.contents-main_epos .guideBOX table.table01 th:first-of-type { background-color: rgba(242, 203, 117, 0.2); } .members_shop #contents-main.contents-main_epos .guideBOX table td.floor { background-color: rgba(242, 203, 117, 0.2); } /* テーブル表　フロアによって色分け */ .members_shop #contents-main.contents-main_epos .guideBOX table.table01 tr td.floor { color: #333; } .members_shop #contents-main.contents-main_epos .guideBOX table.table01 tr.list_item[data-floor="ひがしまち1F"] td.floor, .members_shop #contents-main.contents-main_epos .guideBOX table.table01 tr.list_item[data-floor="ひがしまち2F"] td.floor, .members_shop #contents-main.contents-main_epos .guideBOX table.table01 tr.list_item[data-floor="ひがしまち3F"] td.floor, .members_shop #contents-main.contents-main_epos .guideBOX table.table01 tr.list_item[data-floor="ひがしまち4F～屋上"] td.floor { background: #DFE6EC; } .members_shop #contents-main.contents-main_epos .guideBOX table.table01 tr.list_item[data-floor="にしまち1F"] td.floor, .members_shop #contents-main.contents-main_epos .guideBOX table.table01 tr.list_item[data-floor="にしまち2F"] td.floor { background: #FCF5E3; } /* -------------------------------- ticket_epos.jsp -------------------------------- */ /* つかしんエポスカードお買物券　概要説明 */ .ticket_benefit_epos #headerbg.benefit .about-epos-ticket { background-color: rgba(242, 203, 117, 0.2); padding: 30px 40px; } .ticket_benefit_epos #headerbg.benefit .about-epos-ticket .about-epos-ticket_title { position: relative; } .ticket_benefit_epos #headerbg.benefit .about-epos-ticket .about-epos-ticket_title h3 { text-align: center; font-weight: bold; font-size: 24px; } .ticket_benefit_epos #headerbg.benefit .about-epos-ticket .about-epos-ticket_title p { margin-top: 0; display: inline-block; border: 2px solid #535353; border-radius: 20px; padding: 3px 10px 5px 10px; line-height: 1; color: #535353; font-size: 16px; font-weight: bold; position: absolute; right: 0; top: 50%; /* left: 0%; */ transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .ticket_benefit_epos #headerbg.benefit .about-epos-ticket .about-epos-ticket_box { display: flex; flex-direction: column; /* gap: 20px; */ margin-top: 30px; } .ticket_benefit_epos #headerbg.benefit .about-epos-ticket .about-epos-ticket_item { display: flex; justify-content: flex-start; align-items: center; } .ticket_benefit_epos #headerbg.benefit .about-epos-ticket .about-epos-ticket_item:first-of-type { border-bottom: 1px dashed; padding-bottom: 20px; margin-bottom: 20px; } .ticket_benefit_epos #headerbg.benefit .about-epos-ticket .about-epos-ticket_item .about-epos-ticket_image { display: flex; justify-content: center; align-items: center; width: 30%; gap: 10px; } .ticket_benefit_epos #headerbg.benefit .about-epos-ticket .about-epos-ticket_item .about-epos-ticket_image img { width: calc((100% - 10px) / 2) } .ticket_benefit_epos #headerbg.benefit .about-epos-ticket .about-epos-ticket_item p { margin: 0; } .ticket_benefit_epos #headerbg.benefit .about-epos-ticket .about-epos-ticket_item .name { width: 25%; font-weight: bold; font-size: 20px; } .ticket_benefit_epos #headerbg.benefit .about-epos-ticket .about-epos-ticket_item .description { width: 45%; text-align: left; } /* 絞り込み */ /* .ticket_benefit_epos #contents-main.contents-main_epos .search .search_item::before { display: none !important; } .ticket_benefit_epos #contents-main.contents-main_epos .search .search_item.true, .ticket_benefit_epos #contents-main.contents-main_epos .search .search_item.part, .ticket_benefit_epos #contents-main.contents-main_epos .search .search_item.false { padding: 0.5em 1em; } */ .ticket_benefit_epos #contents-main.contents-main_epos .search_menu { margin: 0 0 30px; } .ticket_benefit_epos #contents-main.contents-main_epos .search_menu ul { display: flex; justify-content: center; align-items: center; gap: 5px; } .ticket_benefit_epos #contents-main.contents-main_epos .search_menu ul li { width: calc((100% - 15px) / 4); } .ticket_benefit_epos #contents-main.contents-main_epos .search_menu ul li .search_item { display: block; text-align: center; background: var(--color-base-bg-light); width: 100%; height: 70px; line-height: 70px; font-size: 16px; cursor: pointer; } .ticket_benefit_epos #contents-main.contents-main_epos .search_menu ul li .search_item.is-active { background: rgba(232, 177, 130, 1); color: #fff; font-size: 18px; font-weight: bold; position: relative; } .ticket_benefit_epos #contents-main.contents-main_epos .search_menu ul li .search_item.is-active: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 rgba(232, 177, 130, 1); } /* テーブル表　幅調整 */ .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table.table01 th.floor { width: 10%; background-color: #F8F7FA; } .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table.table01 th.name { width: 40%; } .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table.table01 th.gen1, .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table.table01 th.gen2 { width: 20%; border-right: none; border-left: 1px solid var(--color-base-line-dark); } .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table.table01 td.name .name-flexbox { display: flex; justify-content: space-between; align-items: center; } .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table.table01 td.name .name-flexbox_item:first-of-type { flex: 1; } .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table.table01 td.gen { padding: 10px; z-index: -1; } .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table.table01 td.gen .displaynone { font-size: 0; width: 0; height: 0; display: block; } .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table.table01 td.name .logo { position: relative; z-index: -1; } .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table td.gen .true::before, .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table td.gen .part::before, .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table td.gen .false::before { font-size: 25px; } /* テーブル表　フロアによって色分け */ .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table.table01 tr td.floor { color: #333; } .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table.table01 tr.list_item[data-floor="ひがしまち1F"] td.floor, .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table.table01 tr.list_item[data-floor="ひがしまち2F"] td.floor, .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table.table01 tr.list_item[data-floor="ひがしまち3F"] td.floor, .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table.table01 tr.list_item[data-floor="ひがしまち4F～屋上"] td.floor { background: #DFE6EC; } .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table.table01 tr.list_item[data-floor="にしまち1F"] td.floor, .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table.table01 tr.list_item[data-floor="にしまち2F"] td.floor { background: #FCF5E3; } /* テーブルヘッダー画像 */ .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table.table01 .table-head-fixed th .table-head-image { display: flex; justify-content: center; align-items: center; gap: 10px; } .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table.table01 .table-head-fixed th .table-head-image img { width: calc((100% - 10px) / 2); } /* テーブルヘッダー追従 */ .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table.table01 .table-head-fixed { position: sticky; top: 0; z-index: 20; } .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table.table01 .table-head-fixed th { position: relative; } .ticket_benefit_epos #contents-main.contents-main_epos .guideBOX table.table01 .table-head-fixed th::before { content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); width: 100%; height: 1px; background-color: var(--color-base-line-dark); } /* -------------------------------- ticket.jsp つかしんお買い物券対象店舗一覧 2026/01追加 -------------------------------- */ /* タイトル */ .ticket_benefit_tsukashin #headerbg.benefit p.p-ttl { background-color: var(--color-base-main-lightblue); color: #fff; padding: 50px 0; font-size: 36px; font-weight: bold; line-height: 1.2; } /* 概要説明 */ .ticket_benefit_tsukashin .about-ticket { display: flex; justify-content: center; align-items: stretch; gap: 30px; background: var(--color-base-bg-lightblue); max-width: 960px; margin: 30px auto 0; padding: 30px; } .ticket_benefit_tsukashin .about-ticket .about-ticket__img { width: 300px; } .ticket_benefit_tsukashin #headerbg.benefit .about-ticket p { margin: 0; text-align: left; } .ticket_benefit_tsukashin #headerbg.benefit .about-ticket .about-ticket__description { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; } .ticket_benefit_tsukashin #headerbg.benefit .about-ticket p.about-ticket__title { font-size: 26px; font-weight: bold; line-height: 1.2; } .ticket_benefit_tsukashin #headerbg.benefit .about-ticket p.about-ticket__text { } /* つかしんエポスカードお買物券対象店舗一覧はこちら　リンク */ /* つかしんお買い物券対象店舗一覧はこちら　リンク */ .ticket_benefit_tsukashin #headerbg.benefit .other-ticket-link, .ticket_benefit_epos #headerbg.benefit .other-ticket-link { text-align: center; } .ticket_benefit_tsukashin #headerbg.benefit .other-ticket-link a, .ticket_benefit_epos #headerbg.benefit .other-ticket-link a { display: inline-block; position: relative; box-sizing: border-box; text-align: center; border-radius: 16px; box-shadow: var(--box-shadow-small); background-color: #fff; font-weight: bold; font-size: 1.3em; line-height: 150%; margin-top: 30px; } .ticket_benefit_tsukashin #headerbg.benefit .other-ticket-link a { background-image: url(../img/ico-epos-crd.png), url(../img/ico-epos-csh.png); background-repeat: no-repeat, no-repeat; background-position: 40px center, 90px center; background-size: 50px, 50px; padding: 20px 60px 20px 150px; } .ticket_benefit_epos #headerbg.benefit .other-ticket-link a { background: url(../img/ico-okaimonoken.png); background-repeat: no-repeat; background-position: 40px center; background-size: 50px; padding: 20px 60px 20px 110px; } .ticket_benefit_tsukashin #headerbg.benefit .other-ticket-link a::after, .ticket_benefit_epos #headerbg.benefit .other-ticket-link a::after { content: ""; width: 30px; height: 30px; display: block; position: absolute; bottom: 0; right: 0; border-radius: 100% 0 16px 0; } .ticket_benefit_tsukashin #headerbg.benefit .other-ticket-link a::after { background: rgba(242, 203, 117, 1); } .ticket_benefit_epos #headerbg.benefit .other-ticket-link a::after { background: var(--color-base-main-lightblue); } .ticket_benefit_tsukashin #contents-main.contents-main_ticket .search_menu { margin: 0 0 30px; } .ticket_benefit_tsukashin #contents-main.contents-main_ticket .search_menu ul { display: flex; justify-content: center; align-items: center; gap: 5px; width: 80%; margin: 0 auto; } .ticket_benefit_tsukashin #contents-main.contents-main_ticket .search_menu ul li { width: calc((100% - 10px) / 3); } .ticket_benefit_tsukashin #contents-main.contents-main_ticket .search_menu ul li .search_item { display: block; text-align: center; background: var(--color-base-bg-light); width: 100%; height: 70px; line-height: 70px; font-size: 16px; cursor: pointer; } .ticket_benefit_tsukashin #contents-main.contents-main_ticket .search_menu ul li .search_item.is-active { background: var(--color-base-main-lightblue); color: #fff; font-size: 18px; font-weight: bold; position: relative; } .ticket_benefit_tsukashin #contents-main.contents-main_ticket .search_menu ul li .search_item.is-active: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-lightblue); } /* テーブル表　幅調整 */ .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table.table01 th.floor { width: 10%; background-color: #F8F7FA; } .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table.table01 th.name { width: 40%; } .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table.table01 th.gen1, .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table.table01 th.gen2 { width: 20%; border-right: none; border-left: 1px solid var(--color-base-line-dark); } .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table.table01 td.name .name-flexbox { display: flex; justify-content: space-between; align-items: center; } .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table.table01 td.name .name-flexbox_item:first-of-type { flex: 1; } .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table.table01 td.gen { padding: 10px; z-index: -1; } .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table.table01 td.gen .displaynone { font-size: 0; width: 0; height: 0; display: block; } .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table.table01 td.name .logo { position: relative; z-index: -1; } .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table td.gen .true::before, .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table td.gen .part::before, .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table td.gen .false::before { font-size: 25px; } /* テーブル表　フロアによって色分け */ .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table.table01 tr td.floor { color: #333; } .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table.table01 tr.list_item[data-floor="ひがしまち1F"] td.floor, .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table.table01 tr.list_item[data-floor="ひがしまち2F"] td.floor, .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table.table01 tr.list_item[data-floor="ひがしまち3F"] td.floor, .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table.table01 tr.list_item[data-floor="ひがしまち4F～屋上"] td.floor { background: #DFE6EC; } .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table.table01 tr.list_item[data-floor="にしまち1F"] td.floor, .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table.table01 tr.list_item[data-floor="にしまち2F"] td.floor { background: #FCF5E3; } /* テーブルヘッダー画像 */ .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table.table01 .table-head-fixed th .table-head-image { display: flex; justify-content: center; align-items: center; gap: 10px; } .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table.table01 .table-head-fixed th .table-head-image img { width: 100px; } /* テーブルヘッダー追従 */ .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table.table01 .table-head-fixed { position: sticky; top: 0; z-index: 20; } .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table.table01 .table-head-fixed th { position: relative; } .ticket_benefit_tsukashin #contents-main.contents-main_ticket .guideBOX table.table01 .table-head-fixed th::before { content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); width: 100%; height: 1px; background-color: var(--color-base-line-dark); } /* --------------------------------------------- フリーページ　テナント --------------------------------------------- */