/* --------------------------------------- CSS初期化 --------------------------------------- */ @import"../lib/fontawesome5/css/all.min.css"; @import url('https://fonts.googleapis.com/css?family=Muli'); @import url('https://fonts.googleapis.com/css2?family=Hind:wght@400;500;600;700&display=swap'); html{color:#000;background:#FFF;} 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,strong,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;} /* to preserve line-height and selector appearance */ sup {vertical-align:text-top;} sub {vertical-align:text-bottom;} input,textarea,select,button{font-family:inherit;font-size:inherit;font-weight:inherit;} /*to enable resizing for IE*/ input,textarea,select,button{*font-size:100%;} /*because legend doesn't inherit in IE */ legend{color:#000;} /*画像の隙間をなくす*/ img,a img{ vertical-align: top; border: 0px;} ul,ol,li,dl,dt,dd{list-style-type:none;} table{border-collapse:collapse;} pre{ white-space:-moz-pre-wrap; /* Mozilla */ white-space:-pre-wrap; /* Opera 4-6 */ white-space:-o-pre-wrap; /* Opera 7 */ white-space:pre-wrap; /* CSS3 */ word-wrap:break-word; /* IE 5.5+ */ font-family: 'Muli',"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; } a {text-decoration:none; color:#666; } a:hover {text-decoration:underline; color:#444; } .cfix{} .cfix:after{ content:""; display: block; height: 0px; clear: both; } /* のID名ルール施設名のアルファベットのクラス名ルール・管理画面共通 kanri　⇒ knr ・本部管理のみ master →　ms ・モール管理のみ dev ・ショップ管理のみ kgm ・ファイル名 */ /* -------------- effect -------------- */ /* 画面外 */ .scroll-block { transform: translateY(120px); transition: all .7s ease-in; opacity: 0; } /* 画面に入った時の動き */ .scroll-block.blockIn { transform: translateY(0); opacity: 1; } /* --------------------------------------------- 共通部分をスタイルする --------------------------------------------- */ body{ /*jQueryでfadein()する。当初jqueryでhide()で処理していたが、他のjsと衝突するためcssで対応*/ /*display: none;*/ background:#FFF; font-size:90%; color:#666666; font-family: 'Muli',"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; line-height:150%; position:relative; } #fade_cover{ position:absolute; top:0; right:0; bottom:0; left:0; background: #fff; z-index: 5000; } /*全ページお知らせ表示*/ .AllPageBnr{ border-top:1px solid #aaa; padding: 10px 0; text-align: center; } .AllPageBnr a{ text-decoration: underline; color:red; } /*IE10以上でフォントをメイリオ*/ @media all and (-ms-high-contrast: none){ body{ font-family: "メイリオ", "Meiryo", sans-serif; } } .to-top { position: fixed; bottom: 10px; right: 10px; width: 100px; background: rgba(0, 0, 0,.7); border-radius: 3px; font-size: 12px; z-index: 1000; } .to-top a { display: block; color: #fff; padding: 7px 5px 5px; text-align: center; text-decoration: none; } .to-top a:before { content:"▲"; line-height: 110%; display:block; text-align: center; } .to-top:hover { background: rgba(0, 0, 0,.6); } .ico_jobs, .ico_new, .ico_coupon{ display:inline-block; text-decoration: none; color:#fff; font-size:0.8em; padding:0 2px; border-radius:2px; line-height: 140%; margin:0 0px 0 3px; } /*.ico_jobs{background: #00A496;}*/ .ico_new{color:#333;font-weight:bold;font-size:0.8em;text-transform:lowercase;background: #FF0;color: #EA080C;background: none;font-size: 1em;margin: 0;} .ico_coupon{background: #E84466;} span.sale{color:red;} .arw_r { position:relative; } .arw_r:after { content: ""; display: block; position: absolute; top: 38%; width: 0; height: 0; border: 4px solid transparent; left: 92%; border-left: 5px solid #E84466; } a:hover { opacity: 0.8; } img{ max-width:100%; } a.hoverlink { display: none; } /* --------------------------------------------- スマホコンテンツを非表示 --------------------------------------------- */ body.pc .sp_view{ display:none; } /* --------------------------------------------- 基本レイアウト(view,dev,kgm) --------------------------------------------- */ #main { width: 100%; margin: 0 auto; } header{ } #contents { clear: both; padding: 0; margin:0px 0 40px; } #contents:after { content:""; display: block; height: 0px; clear: both; } .inner { width:100%; margin:0 auto; min-width:960px; } .inner:after { content:""; display: block; height:0px; clear: both; } body.pc .variable { width:80%; min-width:800px; max-width:1024px; margin:0 auto; } /* header .logo{ float: left; max-width:200px; padding:20px 20px 0 0px; } header .logo img{ max-width:100%; max-height:100px; } header:after{ content:""; display: block; height:0px; clear: both; } */ /* header nav ul { margin:10px 0 0 0; } header nav ul li { float:left; box-sizing: border-box; display: inline-block; max-width:173px; } header nav ul li a{ display: block; box-sizing: border-box; text-align: center; padding:10px 10px 10px 0px; color:#555; } header nav ul li a:before { content:"●"; display: inline-block; color:#ccc; float: left; font-size:0.9em; margin-right:14px; } header nav ul li:last-of-type a { padding-right:0; } header nav ul li:last-of-type a:after { content:"●"; display: inline-block; color:#ccc; float: right; font-size:0.9em; margin-left:14px; } */ /* グローバルメニュー */ .glo_menu_list{ display: flex; max-width:1020px; margin:auto; } .glo_menu_list .glo_menu_items { width: 100%; height: 100%; padding: 0 2px; box-sizing: border-box; position: relative; vertical-align: bottom; font-size:0.94em; } .glo_menu_list .glo_menu_inner { color: #666; cursor: pointer; width: 100%; height: 100%; display: block; box-sizing: border-box; position: relative; text-align: center; font-weight: bold; font-size: 0.9em; line-height: 1.2em; } .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: 15px; line-height: 1em; margin: 0 auto 5px ; padding: 12px 0 4px; 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_home.png);}/*HOME*/ .glo_menu_list .glo_menu_inner[data-value="2"]::before{background-image: url(../img/menu/ico_event.png);}/*イベント*/ .glo_menu_list .glo_menu_inner[data-value="3"]::before{background-image: url(../img/menu/ico_floor.png);}/*フロアガイド*/ .glo_menu_list .glo_menu_inner[data-value="4"]::before{background-image: url(../img/menu/ico_shoplist.png);}/*ショップリスト*/ .glo_menu_list .glo_menu_inner[data-value="5"]::before{background-image: url(../img/menu/ico_shopnews.png);}/*ショップニュース*/ .glo_menu_list .glo_menu_inner[data-value="6"]::before{background-image: url(../img/menu/ico_limited.png);}/*期間限定ショップ*/ .glo_menu_list .glo_menu_inner[data-value="7"]::before{background-image: url(../img/menu/ico_access.png);}/*アクセス*/ .glo_menu_list .glo_menu_inner[data-value="8"]::before{background-image: url(../img/menu/ico_qa.png);}/*Ｑ＆Ａ*/ /*メニュー数少ないとき*/ .pc .glo_menu_list[data-display="slim"] .glo_menu_inner::before{ display: inline-block; width: 3em; margin-right: 1em; vertical-align: middle; } /***************************/ /**/ #contents-main { width:100%; } #contents-main.all { width:100%; } #sub{ width:100%; } #sub .variable_max{ width:100%; padding:20px 0; border-top:4px solid #eee; border-bottom:none; } #contents-main h3 { padding: 14px 20px; font-size: 16px; background: #fff; font-weight:bold; box-sizing: border-box; border-radius:4px; border:4px solid #eee; } footer { margin:60px 0 50px 0 ; /*ipad対策*/ width:100%; min-width:960px; } footer #footer__sitemap{ background: #666; padding:30px 0; } footer #footer__sitemap .f_s_block > ul > li strong, footer #footer__sitemap a{ color:#fff; } footer #footer__sitemap .variable{ display: flex; } footer #footer__sitemap .f_s_block{ width:calc(100%/4); width: 100%; padding: 5px 20px ; box-sizing: border-box; border-left:1px solid #FFF; } .pc footer #footer__sitemap .f_s_block:last-child{ border-right:1px solid #FFF; } footer #footer__sitemap .f_s_block ul li { margin-bottom:10px; } footer #footer__sitemap .f_s_block > ul > li strong{ font-weight:bold; margin-bottom:10px; display: block; } footer #footer__sitemap .f_s_block > ul > li { font-weight:bold; } footer #footer__sitemap .f_s_block > ul > li > ul { margin-top:10px; } footer #footer__sitemap .f_s_block > ul > li > ul > li { font-weight:normal; font-size: 90%; list-style-type: disc; color: #fff; margin-left: 1.6em; } footer #footer__sitemap .f_s_block .sub__item { font-weight:normal; } footer .sc_foot_desc { padding:25px 0 25px 0; text-align: center; } footer .sc_foot_desc ul { } footer .sc_foot_desc ul li{ display: inline-block; padding:1px 30px; line-height: 100%; border-right:1px solid #333; } /*2022.5.12 PCのみ適用*/ body.pc footer .sc_foot_desc ul li{ margin:5px 0; } footer .sc_foot_desc ul li:last-of-type{ border:none; } footer address { text-align: center; font-weight:bold; display: block; margin:0; padding:30px 0; overflow: hidden; background:#eee; } footer address strong{ display:block; font-weight:bold; } footer address .hours{ display: block; } footer address .hours .hours_sub{ font-size:0.9em; } footer .dev_foot_desc { padding:0px 0px 70px ; } footer #footer_desc { float:left; width:735px; } footer #footer_desc dt{ float:left; width:70px; } footer #footer_desc dd{ padding:10px 0; } footer #footer_desc dt img{ width:100%; } footer #footer_desc dd ul li{ display: inline-block; padding:0px 6px; font-size:12px; line-height: 100%; border-right:1px solid #333; } footer #footer_desc dd ul li:last-of-type{ border:none; } footer .copyright { float:right; text-align: right; font-size:11px; padding:15px 0 0 ; width:285px; } footer .copyright img { width:140px; } /* --------------------------------------------- .viewh表示側　共通設定　（） --------------------------------------------- */ body.view header{ position: relative; border-bottom: 1px solid #aaa; min-width:960px; } body.view header .inner{ position: relative; } body.view header h1{ display:none; } body.view .header__inner{ margin: 0 auto; position: relative; min-width:960px; } h2.pagename { width:100%; text-align: center; background:#666; color:#fff; font-weight:bold; padding:12px 0; margin-bottom:30px; } /*-------- .header__logo ロゴ表示領域 --------*/ .header__logo{ height: 100px; text-align: center; padding: 12px 0; box-sizing: border-box; } .header__logo a{ } .header__logo img{ height:72px; -webkit-backface-visibility: hidden; /* image-rendering: pixelated; */} /*-------- .header__subNav サブメニュー（外国語サイト・SP用ハンバーガー） --------*/ .header__subNav{ position: absolute; top: 0; left: 0; height: 100%; } .pc .header__subNav .btn_menu{ display: none; } .header__subNav .nav_search{ height: 100%; line-height: 100px; width: 60px; } .header__subNav .nav_search a{ display: block; width: 100%; height: 40px; position: absolute; margin: auto; top: 0; bottom: 0; overflow: hidden; background: url('../img/menu/ico_gb.png') no-repeat center left / 50px; -webkit-backface-visibility: hidden; } /*-------- .header__glo　グローバルナビ、SNSリンクを含むwrapper --------*/ .header__glo{ border-top: 1px solid #aaa; padding:12px 0; } /*-------- .sc__snsLink　SNSリンクのul ---------*/ .sc__snsLink{ background: #eee; text-align: center; padding:25px; } .sc__snsLink li{ display: inline-block; /* width: 36px; */ height: 100%; margin:0 10px; } .sc__snsLink li a{ display: block; border-radius: 100%; background: #00f;/*class別に上書き*/ color: #fff; position: relative; text-align: center; width: 46px; height: 46px; top: calc(50% - 18px); } .sc__snsLink li a:hover{ text-decoration: none; } .sc__snsLink li a::after{ content: ""; font-family: "Font Awesome 5 Brands"; font-size: 1.6em; top: .5em; line-height: 46px; } .sc__snsLink li span{display:none;} .sc__snsLink li.fb a{background: #2D78F2;} /* 20231213 MR Xlogを変更する .sc__snsLink li.tw a{background: #1da1f2;} */ /*20231213 MR X logを変更するため、CSSデザインを変更する ↓*/ .sc__snsLink li.tw a{ background: #000000; margin-bottom: -15px; } /*20231213 MR X logを変更するため、CSSデザインを変更する ↑*/ .sc__snsLink li.insta a{background: linear-gradient(135deg,#427eff 0%,#f13f79 70%) no-repeat;} .sc__snsLink li.line a{background: #00c300;} .sc__snsLink li.fb a::after{content: "\f082";} /* 20231213 MR Xlogを変更する .sc__snsLink li.tw a::after{ content: "\f099";} */ /*20231213 MR X logを変更するため、CSSデザインを変更する ↓*/ .sc__snsLink li.tw a::after{ content: ''; display: block; height:46px; background:url("../img/logo_x.svg") center center; background-repeat: no-repeat; background-size:22px; } /*20231213 MR X logを変更するため、CSSデザインを変更する ↑*/ .sc__snsLink li.insta a::after{ content: "\f16d";} .sc__snsLink li.line a::after{ content: "\f3c0";} /**/ /*検索窓設置*/ #word_seach_box { position: absolute; right:0; top:calc((100% / 2) - 15px); } #word_seach_box form input[type="text"]{ border:2px solid #aaa; padding:5px 10px; box-sizing: border-box; border-radius:2px; width:150px; } #word_seach_box form input[type="submit"]{ padding:5px 10px; background: #aaa; border:none; box-sizing: border-box; color:#fff; border-radius:2px; } /*外国語プルダウンメニュー*/ .header__inner .multilamg_list { position: absolute; top:80%; left:-20px; z-index: 1000; background:#fff; padding:0 10px; box-shadow: 0px 3px 10px 0px rgba(0,0,0,.2); border-radius:5px; } /* .header__inner .multilamg_list:before { content: ""; display: block; position: absolute; top:-7px; left:20%; width:15px; height: 15px; background:#E8E8E8; transform: rotate(-45deg); z-index: 1; } */ .header__inner .multilamg_list li{ border-bottom:1px dashed #ddd; } .header__inner .multilamg_list li:last-child{ border:none; } .header__inner .multilamg_list li a{ display: block; padding:10px 15px; min-width: 120px; } .header__inner .multilamg_list li a:after{ display: inline-block; content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight:bold; font-size:18px; position: absolute; right:10px; } /*テーブル基本*/ body.view table.table01 { border-collapse: collapse; width:100%; } body.view table.table01 tr{ } body.view table.table01 th, body.view table.table01 td{ padding: 16px 16px; border:1px solid #ccc; /* border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; */ } body.view table.table01 th{ background:#eee; text-align:center; font-weight:bold; } /* スクロール時にメニューを固定 */ body.pc #fix_gnavi{ display: none; position: fixed; top:0; left:0; right:0; z-index: 2000; background: rgba(255,255,255,1); box-shadow: 1px 1px 20px 2px rgba(0,0,0,.1); text-align: center; } body.pc #fix_gnavi header{ border-bottom:none; } body.pc #fix_gnavi #word_seach_box, body.pc #fix_gnavi .AllPageBnr, body.pc #fix_gnavi h1, body.pc #fix_gnavi .header__subNav{ display: none; } body.pc #fix_gnavi .header__inner{ margin: 0 30px 0 0; display: inline-block; } body.pc #fix_gnavi .header__inner.variable { width:auto; min-width: auto; max-width: auto; } body.pc #fix_gnavi .header__logo { height: 50px; text-align:left; padding: 5px 0; box-sizing: border-box; } body.pc #fix_gnavi .header__logo img { max-height: 36px; vertical-align: middle; } /*IE11のみ対応*/ body.pc.ua_ie11 #fix_gnavi .header__logo img { vertical-align:top; } body.pc #fix_gnavi .header__glo{ border: none; display: inline-block; width:auto; } body.pc #fix_gnavi .header__glo .inner{ min-width: auto; } body.pc #fix_gnavi .header__glo .glo_menu_items{ width:auto; padding:0 20px; } body.pc #fix_gnavi .header__glo .glo_menu_items a { padding:6px 0; } body.pc #fix_gnavi .header__glo .glo_menu_items a::before{ display: none; } /* 　ミニバナー１ */ #banner_mini ul li img{ width:100%; max-height: 150px; -webkit-backface-visibility: hidden; } body.view #banner_mini ul { overflow: hidden; display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; margin:0 -16px; } body.view #banner_mini ul li{ padding:16px 0; box-sizing: border-box; width:calc(calc(100% - 96px) / 3); margin:0 16px; } /*ミニバナー２**/ #banner_mini2 { width:100%; background: #666; padding:40px 0; position: relative; } #banner_mini2 .variable{ width:920px; } #banner_mini2 ul li { padding:5px; box-sizing: border-box; width:calc(100%/4); } #banner_mini2 ul li img { border-radius:3px; -webkit-backface-visibility: hidden; } #banner_mini2.no__swipe ul{ display: flex; justify-content: center; } body #banner_mini2.no__swipe .footer_swiper-button-prev, body #banner_mini2.no__swipe .footer_swiper-button-next{ display: none; } body #banner_mini2 .footer_swiper-button-prev, body #banner_mini2 .footer_swiper-button-next{ position: absolute; z-index: 15; top:80px; display: inline-block; width:20px; height:40px; cursor:pointer; } body #banner_mini2 .footer_swiper-button-prev{ right:50%; margin-right:460px; } body #banner_mini2 .footer_swiper-button-next{ left:50%; margin-left:460px; } body #banner_mini2 .footer_swiper-button-prev:before, body #banner_mini2 .footer_swiper-button-next:before{ display: inline-block; font-family: "Font Awesome 5 Free"; font-weight:bold; color:#ccc; font-size:25px; position: absolute; top:0px; left:0; } body #banner_mini2 .footer_swiper-button-prev:before{ content: "\f053"; } body #banner_mini2 .footer_swiper-button-next:before{ content: "\f054"; } /* --------------------------------------------- TOPページ --------------------------------------------- */ body.bf0 .variable_max{ width:100%; padding:20px 0; border-bottom:4px solid #eee; } body.bf0 #sub #tag_list_area.variable_max{ border-top:none; } /*共通パーツ*/ body.bf0 .parts { /* margin-bottom:15px; */ overflow: hidden; } body.bf0 .parts:after { content:""; clear: both; display: block; height:0px; } body.bf0 #contents-main .parts .p_title{ padding:0 10px; margin-top:30px; } body.bf0 #contents-main .parts .p_title h2{ font-family: "Hind","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; border: none; font-weight: 700; font-size: 2.5rem; line-height: 44px; letter-spacing: 0px; background: none; border-radius: 0; display: inline-block; } body.bf0 #contents-main .parts .p_title h2 span{ color:#666; display: inline-block; margin-left:30px; font-size: 1rem; font-weight:bold; } body.bf0 #contents-main .parts .p_title ul { display: inline-block; float: right; } body.bf0 #contents-main .parts .p_title ul li{ display: inline-block; } body.bf0 #contents-main .parts .p_title ul li a{ display: block; float: right; padding:10px 20px; background: #eeeeee; border-radius:20px; font-weight: bold; } body.bf0 #contents-main .parts .p_title ul li a:after{ content: "\f105"; display: inline-block; font-family: "Font Awesome 5 Free"; margin-left:4px; } /*カレンダー*/ body.bf0 .cal_contents #day_content02 { max-height:500px; overflow-y:scroll !important; } body.bf0 #calendar { background:#fff; border:8px solid #eee; padding:16px; } /*バナー*/ body.bf0 #banner .swiper-container::before, body.bf0 #banner .swiper-container::after { content: ""; display: block; position: absolute; width: 100%; height:390px; background: rgba(255, 255, 255, 0.8); top: 0; z-index: 10; } body.bf0 #banner .swiper-container::before { right:50%; margin-right:480px; } body.bf0 #banner .swiper-container::after { left:50%; margin-left:480px; } body.bf0 #banner { /* border-top: 1px solid #aaa;*/ width:100%; box-sizing: border-box; text-align: center; position: relative; height:420px; } body.bf0 #banner section.swiper-container{ width: 1920px; height: 390px; position: absolute; margin: 0 auto; top: 0; left: -9000%; right: -9000%; overflow: visible; } body.bf0 #banner.no__swipe section.swiper-container{ background: #666; } body.bf0 #banner ul li { height:390px; overflow: hidden; } body.bf0 #banner.no__swipe .top_swiper-button-prev, body.bf0 #banner.no__swipe .top_swiper-button-next{ display: none; } body.bf0 #banner .top_swiper-button-prev, body.bf0 #banner .top_swiper-button-next{ position: absolute; z-index: 15; top:170px; display: inline-block; width:60px; height:60px; border-radius:50%; background: rgba(0,0,0,0.4); cursor:pointer; box-sizing: border-box; } body.bf0 #banner .top_swiper-button-prev{ right:50%; margin-right:500px; } body.bf0 #banner .top_swiper-button-next{ left:50%; margin-left:500px; } body.bf0 #banner .top_swiper-button-prev:before, body.bf0 #banner .top_swiper-button-next:before{ display: inline-block; font-family: "Font Awesome 5 Free"; font-weight:bold; color:#FFF; font-size:30px; position: absolute; top:20px; left:19px; } body.bf0 #banner .top_swiper-button-prev:before{ content: "\f053"; } body.bf0 #banner .top_swiper-button-next:before{ content: "\f054"; left:24px; } body.bf0 #banner .top_swiper-pagination { display: block; width:100%; position:absolute; top:390px; text-align: center; z-index: 10; padding:5px 0 ; border-top:1px solid #eee; } body.bf0 #banner .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 50%; overflow: hidden; display: inline-block; margin:0 3px; background: #666666; opacity: 1; } body.bf0 #banner .swiper-pagination-bullet-active { opacity: 1; background:#FDC028; } /*TOP専用グローバルナビ*/ body.bf0 .top_g_navi .header__glo { border:none; border-bottom:4px solid #eee; padding-bottom:20px; } body.bf0 .top_g_navi .header__glo .glo_menu_items { font-size: 1em; } body.bf0 .top_g_navi .header__glo .glo_menu_inner::before { height: 62px; margin: 0 auto 10px; background-size: auto; } /*幅狭*/ body.bf0.pc .top_g_navi .header__glo .glo_menu_list[data-display="slim"]{ font-size: 1.2em; } body.bf0.pc .top_g_navi .header__glo .glo_menu_list[data-display="slim"] .glo_menu_inner::before { width: 3.5em; height: 3.5em; margin: 0 1em 0 0; background-size: contain; } /*キーテナント*/ body.bf0 .variable_max.key_logo{ background: #eee; } body.bf0 #key_logo { display: flex; flex-wrap: wrap; align-items: center; } body.bf0 #key_logo article { width:24%; box-sizing: border-box; overflow: hidden; margin:0.5%; } body.bf0.gn_off #key_logo article{ text-align: center; background: #fff; height:100px; } body.bf0 #key_logo article img{ box-sizing: border-box; padding: 12px 8px; max-height: 90px; background: #fff; } body.bf0 #key_logo article a { overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background: #fff; height:100px; } /*FreeHTML枠*/ body.bf0 .top_freehtml a{ text-decoration: underline; /*color:#0000ee;*/ } /*イベントニュース、ショップニュースMIX 　およびイベント（画像）のみ*/ body.bf0 .top_ev_news { width:100%; display: flex; flex-wrap:wrap; } body.bf0 .top_ev_news article { width:calc(100%/3); box-sizing: border-box; } /* body.bf0 .top_ev_news article.item .news_box:before { color:#fff; background: #00A496; display: inline-block; position: absolute; top:-1px; right:8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; width:54px; height:36px; padding:6px 0 0 ; box-sizing: border-box; font-size:11px; white-space: pre; text-align: center; line-height: 1.0em; z-index: 2; letter-spacing: 0.6px; -moz-opacity: 0.8; opacity: 0.8; }*/ /* \A と　white-space: pre;　で改行できる　*/ /* body.bf0 .topics .top_ev_news article.item.eventnews .news_box:before{ content: "Event&\ANews"; } body.bf0 .topics .top_ev_news article.item.shopnews .news_box:before { content: "Shop\ANews"; background: #E84466; } body.bf0 .topics .top_ev_news article.item.shopnews.cat2 .news_box:before { content: "Shop\A Coupon"; background: #E84466; } */ body.bf0 .top_ev_news article.item.sale .news_box:before { position: absolute; top:10px; right:10px; content: "SALE"; color: #f00; letter-spacing: 1px; background: none; font-size: 200%; width: auto; z-index: 10; } body.bf0 .top_ev_news article .news_box{ margin:10px; box-sizing: border-box; position: relative; background: #fff; } body.bf0 .top_ev_news article .news_box a.hoverlink{ /*一旦非表示*/ display: none; } body.bf0 .top_ev_news article.noimg .news_box a.hoverlink{ /*画像がない場合に表示*/ /* display: block; position: absolute; width:100%; height:100%; top:0;left:0; text-indent: -9999em;*/ } .item .image.noimg a.no_logo::before{ /*画像ない場合の表示項目　※ショップニュース一覧と共通*/ content: "　"; /*content: "SHOP NEWS";*/ color: #ccc; background: url(../img/bg_shopnews.png) no-repeat center / contain; display: block; /* width: 100%; height: 100%; line-height: calc(240px - .5em); font-size: 2.2em; font-weight: bold;*/ position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height:100%; object-fit: cover; object-position: 50% 0; } body.bf0 .top_ev_news article .image { overflow: hidden; border-radius:4px; border:4px solid #eee; box-sizing: border-box; position: relative; overflow: hidden; } body.bf0 .top_ev_news article .image:before { content: ""; display: block; padding-top: calc(3 / 4 * 100%); /*padding-top: calc(4 / 4 * 100%); 正方形の場合*/ } body.bf0 .top_ev_news article .image img{ position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height:100%; object-fit: cover; object-position: 50% 0; /*object-fit:contain; 正方形の場合*/ } body.bf0 .top_ev_news article .image img:hover{ /* transform:scale(1.1,1.1);*/ } body.bf0 .top_ev_news article .image.noimg { display: flex; align-items: center; justify-content: center; text-align: center; } body.bf0 .top_ev_news article .image.noimg a{ display: flex; align-items: center; justify-content: center; width:100%; height:100%; } body.bf0 .top_ev_news article .image.noimg a:hover{ text-decoration: none; } body.bf0 .top_ev_news article .image.noimg img { width:auto; height:auto; max-height:170px; max-width:70%; } body.bf0 .top_ev_news article .image.noimg img.no_logo { max-height:100%; max-width:100%; } body.bf0 .top_ev_news article .desc { padding:10px 0; position: relative; } body.bf0 .top_ev_news article .desc .category{ display: inline-block; background: #666; color:#fff; border-radius:20px; padding:5px 20px; margin-bottom:10px; font-size:0.8rem; } body.bf0 .top_ev_news article .desc .category a{ color:#fff; } body.bf0 #contents-main .top_ev_news article .desc h3.title { font-weight:bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border:none; padding: 0; margin-bottom:3px; background: none; font-size:1.1rem; } body.bf0 .top_ev_news article .desc .subtitle{ font-size:0.9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.bf0 .top_ev_news article .desc .subtitle .event_term:before{ content: "\f274"; display: inline-block; font-family: "Font Awesome 5 Free"; margin-right:4px; } body.bf0 .top_ev_news article .desc .subtitle .event_place:before{ content: "\f124"; display: inline-block; font-family: "Font Awesome 5 Free"; margin-right:4px; font-weight: 900; } body.bf0 .top_ev_news article .desc .price{ font-weight: bold; font-size:90%; } body.bf0 .top_ev_news article.sale .desc .price{ color:#f00; } body.bf0 .top_ev_news article .gcat_badge { display:none; } body.bf0 .top_ev_news article .desc .date{ display: none; } body.bf0 .top_ev_news article.item .ico_new{ color:#EA080C; background: none; /*position: absolute; right:0; font-size:0.8em; background: #fff; border-radius: 10px; padding:0px 5px; margin:1px;*/ /* font-size: 0.8em; */ margin-right: 0.3em; } body.bf0 .parts .more__btn { margin:20px auto; text-align: center; } body.bf0 .parts .more__btn span, body.bf0 .parts .more__btn a{ display: inline-block; padding:15px 40px; background: #eee; font-weight: bold; border-radius:4px; cursor: pointer; } body.bf0 .parts .more__btn span:after, body.bf0 .parts .more__btn a:after{ content:"\f105"; display: inline-block; font-family: "Font Awesome 5 Free"; margin-left: 10px; } /*-------------------------------------- イベント　テキストのみ -----------------------------------*/ body.bf0 #event.parts dl{ clear: both; padding:12px 4px; border-bottom:2px solid #eee; background: #fff; display: flex; align-items: center; } body.bf0 #event.parts article:first-of-type dl{ border-top:2px solid #eee; } body.bf0 #event.parts dl dt{ width:auto; box-sizing: border-box; padding:4px 8px 4px ; white-space: nowrap; } body.bf0 #event.parts dl dd { padding:4px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.bf0 #event.parts dl dt span.e_category{ display: inline-block; background: #666; color: #fff; border-radius: 20px; padding: 3px 20px; margin:0 15px; font-size: 0.8rem; } body.bf0 #event.parts dl dt span.e_category a{ color:#fff; } body.bf0 #event.parts dl dd a strong{ font-weight:bold; display: inline-block; margin-right:20px; font-size:1.1em; } body.bf0 #event.parts dl dd span.subtitle{ font-size:0.9em; display: inline-block; margin-right:20px; } body.bf0 #event.parts dl dd span.subtitle .event_term:before { content: "\f274"; display: inline-block; font-family: "Font Awesome 5 Free"; margin-right: 4px; } body.bf0 #event.parts dl dd span.subtitle .event_place:before { content: "\f124"; display: inline-block; font-family: "Font Awesome 5 Free"; margin-right: 4px; font-weight: 900; } /*-------------------------------------- TOPページLIMITED SHOP -----------------------------------*/ body.bf0 #limitedshop.parts .desc .category, body.bf0 #limitedshop.parts .desc .subtitle{ display: none; } /*ショップリスト　FULL版、簡易版　共通*/ body.bf0 .parts.shoplist { } body.bf0 .variable_max.shoplist { background: #eee; } body.bf0.pc .parts.shoplist .shop_wrap { display: flex; flex-wrap: wrap; } body.bf0 .parts.shoplist .shop{ background: #fff; border-bottom:2px solid #eee; width:100%; padding:20px; box-sizing: border-box; border-radius:4px; margin:0 0 20px 0; overflow: hidden; position: relative; } body.bf0 .parts.shoplist .shop:last-child{ margin-bottom:0; } body.bf0 .parts.shoplist .shop .hidden{ display:none; } body.bf0 .parts.shoplist .shop .sh_header{ border-bottom:2px solid #eee; padding:0 0 15px; margin-bottom:15px; overflow: hidden; } body.bf0 .parts.shoplist .shop .sh_logo { float:right; } body.bf0 .parts.shoplist .shop .sh_logo img { /*height:44px;*/ max-width:130px; max-height: 80px; } body.bf0 #contents-main .parts.shoplist .shop h3 { font-size:1.6em; font-weight:bold; padding:12px 0; border:none; } body.bf0 .parts.shoplist .shop .desc{ overflow: hidden; float: left; width:calc(100% - 420px); } body.bf0 .parts.shoplist .shop.noimg .desc{ width: 100%; } body.bf0 .parts.shoplist .shop .desc h5{ font-weight:bold; margin: 0 0 0.6em; font-size:1.1rem; } body.bf0 .parts.shoplist .shop .desc .sh_con pre{ line-height: 1.6; } body.bf0 .parts.shoplist .shop .sh_image{ float:right; width:380px; } body.bf0 .parts.shoplist .shop .sh_image img:nth-child(2){ display: none; } body.bf0 .parts.shoplist .shop .sh_image img{ width:100%; border-radius:4px; } body.bf0 .parts.shoplist .shop .desc dl{ overflow:hidden; display: flex; flex-wrap: wrap; border-top:1px solid #eee; margin:10px 0; } body.bf0 .parts.shoplist .shop .desc dt, body.bf0 .parts.shoplist .shop .desc dd{ border-bottom:1px solid #eee; padding:12px 5px; box-sizing: border-box; } body.bf0 .parts.shoplist .shop .desc dt{ font-weight:bold; width:28%; } body.bf0 .parts.shoplist .shop .desc dd { overflow:auto; width:72%; } body.bf0 .parts.shoplist .shop.noimg .desc dt{ width:18%; } body.bf0 .parts.shoplist .shop.noimg .desc dd{ width:82%; } body.bf0 .parts.shoplist .shop .desc dd a { text-decoration:underline; } body.bf0 .parts.shoplist .shop .desc dt i{ margin-right:10px; font-size:1rem; } body.bf0 .parts.shoplist .shop .desc .sh_url { text-align: left; } body.bf0 .parts.shoplist .shop .desc .sh_url a{ display: inline-block; } body.bf0 .parts.shoplist .shop .desc .sh_url a i{ margin-left:10px; } body.bf0 .parts.shoplist .shop .shop_link { display: inline-block; position: absolute; right:20px; bottom:20px; } /*簡易版*/ body.bf0 #shoplist02.parts.shoplist .shop_wrap { display: flex; flex-wrap: wrap; justify-content: space-around; } body.bf0 #shoplist02.parts.shoplist .shop{ width:48%; box-sizing: border-box; position: relative; padding:20px; } body.bf0 #shoplist02.parts.shoplist .shop h3 { font-size: 1.2em; font-weight: bold; padding: 0 0 8px 0; border:none; } body.bf0 #shoplist02.parts.shoplist .shop h5 { font-size: 1em; line-height:1.2em; } body.bf0 #shoplist02.parts.shoplist .shop .sh_logo { float: right; margin-right: 0px; width:130px; text-align: right; } body.bf0 #shoplist02.parts.shoplist .shop .desc { float: left; width:calc(100% - 150px); } body.bf0 #shoplist02.parts.shoplist .shop.noimg .desc{ width:100%; } body.bf0 #shoplist02.parts.shoplist .shop .desc dl, body.bf0 #shoplist02.parts.shoplist .shop .desc dt, body.bf0 #shoplist02.parts.shoplist .shop .desc dd{ border:none; padding:0; } body.bf0 #shoplist02.parts.shoplist .shop .desc dt{ width: calc(5em + 10px); } body.bf0 #shoplist02.parts.shoplist .shop .desc dd{ width: calc((100% - 5em) - 10px); } body.bf0 #shoplist02.parts.shoplist .shop .desc dl{ margin: 5px 0 0 0; } /* --------------------------------------------- ショップページ（kgmとは別）bodyは記述しない --------------------------------------------- */ #shoppage { /*padding:0 16px;*/ } #shoppage .max_variable { border-bottom:4px solid #eee; padding:0 0 20px; } #shoppage .shop_header:after{ content:""; clear: both; display: block; } #shoppage .shop_header .s_h_images{ float: left; width:340px; border:4px solid #eee; border-radius:4px; overflow: hidden; margin:0 30px 20px 0; } #shoppage .shop_header .s_h_images .main_logo { padding:10px; text-align: center; } #shoppage .shop_header .s_h_images .main_logo img { max-height: 70px; } #shoppage .shop_header .s_h_images .main_image img { width:100%; } #shoppage .shop_header .s_h_detail{ overflow: hidden; } #shoppage .shop_header .s_h_detail h2{ font-weight:bold; font-size:2rem; line-height: 100%; margin-bottom:15px; } #shoppage .shop_header .s_h_detail h2 span{ /* display: block; */ font-size:.8rem; font-weight: normal; } #shoppage .shop_header .s_h_detail h2 span.cat_detail{ display:block; line-height: 1.2em; padding:0 3px; } #shoppage .shop_header .s_h_detail h4{ font-weight:bold; font-size:1.1rem; margin:3px 0 10px ; } /* #shoppage .shop_header .s_h_detail .eigyouhour::before, #shoppage .shop_header .s_h_detail .floor::before, #shoppage .shop_header .s_h_detail .tel::before{ content: ""; font-family: "Font Awesome 5 Free"; font-weight: bold; color: #333; } #shoppage .shop_header .s_h_detail .eigyouhour::before{content: "\f017"} #shoppage .shop_header .s_h_detail .floor::before{content: "\f124"} #shoppage .shop_header .s_h_detail .tel::before{content: "\f095"} */ #shoppage .shop_header .s_h_detail .shopcontents{ white-space: pre-wrap; margin:0 0 20px; padding:0 10px 0 0; box-sizing: border-box; } #shoppage .shop_header .s_h_detail .floor_tel, #shoppage .shop_header .s_h_detail .eigyouhour{ border-top:4px solid #eee; padding: 15px 0; } #shoppage .shop_header .s_h_detail .eigyouhour{ white-space: pre-wrap; } #shoppage .shop_header .s_h_detail .floor_tel{ border-bottom:4px solid #eee; padding: 11px 0; position: relative; } #shoppage .shop_header .s_h_detail .floor, #shoppage .shop_header .s_h_detail .tel{ padding: 4px 0 4px 5px; display: inline-block; } #shoppage .shop_header .s_h_detail .floor + .tel{ border-left: 1px solid #666; margin-left: 10px; padding-left: 10px; } #shoppage .shop_header .s_h_detail .button{ padding: 18px 0; display: flex; } #shoppage .shop_header .s_h_detail .button p a{ } /*フロア*/ /*↓ボタン　※基礎情報のものと兼用*/ #shoppage .shop_header .s_h_detail .floor a, #shoppage #shop_info table.table01 tr.shop-map td a{ display: inline-block; background: #eee; border-radius: 100px; padding: 4px 12px; margin: -5px 2px -5px 10px; font-weight: bold; font-size: 95%; } .shop_header .s_h_detail .floor a::after, #shoppage #shop_info table.table01 tr.shop-map td a::after{ content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: bold; font-size: .8em; margin: 0 2px 0 5px; } .shop_header .s_h_detail .eigyouhour::before, .shop_header .s_h_detail .floor::before, .shop_header .s_h_detail .tel::before{ content: ""; font-family: "Font Awesome 5 Free"; font-weight: bold; color: #333; /*別途指定*/ margin: 0 5px 0 7px; } /*アイコン指定*/ .shop_header .s_h_detail .eigyouhour::before{content: "\f017"} .shop_header .s_h_detail .floor::before{content: "\f124"} .shop_header .s_h_detail .tel::before{content: "\f879";} /*営業時間改行による調整*/ #shoppage .shop_header .s_h_detail .eigyouhour{ padding-left: calc(2em + 5px); /*時計アイコン分の余白を左に確保*/ } #shoppage .shop_header .s_h_detail .eigyouhour::before{ margin-left: -1.5em; /*↑で確保した余白分詰める*/ margin-right: 0.5em; } #shoppage #shop_title{ border:2px solid #ccc; border-radius: 16px; padding:20px; margin:0 -16px 15px; } #shoppage #shop_title h2{ font-size:24px; font-weight:bold; float: left; line-height:30px; width:520px; /*共通スタイルを無効か*/ padding:0;margin:0;border:none; } #shoppage #shop_title h2 .kana{ display: block; font-size: 14px; font-weight:normal; line-height: 20px; float: none; padding-top: 0px; opacity: 1; } #shoppage #shop_title .top_logo { float:right; width:100px; height:50px; text-align: center; } #shoppage #shop_title .top_logo img{ max-width: 100%; max-height: 100%; } #shoppage #shop_status .category { float:left; } #shoppage #shop_status .button{ float: right; width:300px; text-align: right; } #shoppage #shop_status .button .jobs, #shoppage #shop_status .button .coupon{ float:right; display: none; } #shoppage #shop_status .button .jobs a, #shoppage #shop_status .button .coupon a{ color:#fff; border-radius: 20px; padding:3px 18px; background: #eee; position: relative; font-size:0.9em; } #shoppage #shop_status .button .jobs a:after, #shoppage #shop_status .button .coupon a:after { content: ""; display: block; position: absolute; top: 33%; width: 0; height: 0; border: 4px solid transparent; left: 92%; border-left: 5px solid #FFF; } #shoppage #shop_status .button p:last-child{ margin-right:10px; } /*#shoppage #shop_status .button .jobs a{ background:#00A496 ; }*/ #shoppage #shop_status .button .coupon a{ background:#E84466 ; } /*スタッフ募集中アイコン*/ #shoppage .shop_header .s_h_detail .jobs a::before{ content: "\f007"; margin-right: .5em; font-family: "Font Awesome 5 Free"; } /*inner link*/ #shoppage .inner_link ul{ display: flex; justify-content: center; padding: 20px 0; } #shoppage .inner_link ul li{ margin: 0 10px; min-width: 260px; display: inline-block; } #shoppage .inner_link ul li a{ background: #666666; color: #fff; display: block; border-radius: 100px; padding: 10px 20px; text-align: center; font-weight: bold; position: relative; } #shoppage .inner_link ul li a::after{ font-weight: bold; content: "\f078"; font-family: "Font Awesome 5 Free"; position: absolute; right: 20px; } #shoppage .inner_link ul li a:hover{ opacity: 1; } /*shop_info*/ #shoppage .max_variable.shop_info { background: #eee; padding:40px 0; } #shoppage #shop_info { } #shoppage #shop_info h3{ font-family: "Hind","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; border: none; font-weight: 600; border-radius: 0; font-size:2.2rem; background: none; padding:0; margin:0 0 15px; } #shoppage #shop_info h3 span{ color:#666; font-size:0.8rem; display: inline-block; margin-left:20px; font-weight:normal; } /*#shoppage #shop_info .desc{ font-size:1.1em; line-height: 1.5em; } #shoppage #shop_info .desc h4{ font-weight:bold; margin:0 0 20px; } #shoppage #shop_info .image{ float:right; width:260px; margin:0 0 20px 16px; } #shoppage #shop_info .image img{ border-radius: 16px; width:100%; } #shoppage #shop_info .data{ clear: both; padding:24px 0 10px 0; } */ #shoppage #shop_info table.table01{ width:100%; background: #fff; } #shoppage #shop_info table.table01 tr { border-bottom:1px solid #aaa; } #shoppage #shop_info table.table01 tr:last-child { border-bottom:none; } #shoppage #shop_info table.table01 th, #shoppage #shop_info table.table01 td{ padding: 24px 24px; word-break: break-all; border:none; } #shoppage #shop_info table.table01 td{ position: relative; } #shoppage #shop_info table.table01 td:before{ content:""; display: block; width:4px; height:100%; background: #eee; position: absolute; left:0; top:0; } #shoppage #shop_info table.table01 th { background: #fff; vertical-align: top; font-weight:bold; width: 200px; } #shoppage #shop_info table.table01 tr.shop-eigyouhour p{ white-space: pre-wrap; } #shoppage #shop_info table.table01 tr.shop-map td a{ /* display: inline-block; margin-left:12px; background: #00A496; color:#fff; padding:1px 8px; border-radius:2px; font-size:0.9em; */} #shoppage #shop_info table.table01 tr.shop-categorydetail td{ font-size:1.2em; font-weight:bold; } #shoppage #shop_info table.table01 tr.shop-mail td a, #shoppage #shop_info table.table01 tr.shop-url td a{ text-decoration:underline; } #shoppage #shop_info table.table01 tr.shop-dealitem td{ font-size:0.8em; } /*ショップの取り組み(generic9)改行する*/ #shoppage #shop_info table.table01 tr.shop-generic9 td { white-space: pre-wrap; } /*決済方法*/ #shoppage #shop_info table.table01 tr.shop-generic1 .pay__wrap em{ display: inline-block; border: 1px solid; border-radius: 4px; margin: 0 10px 10px 0; padding: 6px 10px; font-size: 90%; } #shoppage #shop_info table.table01 tr.shop-generic1 .pay__wrap em::before{ content: ""; font-family: "Font Awesome 5 Free"; font-weight: bold; margin-right: .3em; } /*アイコン個別設定*/ #shoppage #shop_info table.table01 tr.shop-generic1 .pay__wrap em.pay_cash::before{content: "\f157"} #shoppage #shop_info table.table01 tr.shop-generic1 .pay__wrap em.pay_card::before{content: "\f09d";font-weight:normal;} #shoppage #shop_info table.table01 tr.shop-generic1 .pay__wrap em.pay_ic::before{content: "\f09d";font-weight:normal;} #shoppage #shop_info table.table01 tr.shop-generic1 .pay__wrap em.pay_emoney::before{content: "\f3cd"} #shoppage #shop_info table.table01 tr.shop-generic1 .pay__wrap em.pay_qr::before{content: "\f029"} #shoppage #shop_info table.table01 tr.shop-generic1 .shop-generic2{ margin: 0px 0 -8px; } #shoppage #shop_info table.table01 tr.shop-generic1 .attention{ font-size: 10px; display: block; margin: 6px 0 -10px; } /*Web予約btn*/ /*webモバイルオーダーボタン*/ #shoppage #shop_info .shop-generic7 td p, #shoppage #shop_info .shop-generic6 td p{ display: inline-block; } #shoppage #shop_info .shop-generic7 td a, #shoppage #shop_info .shop-generic6 td a{ display: inline-block; background: #ddd;/*ブランドに応じて変更*/ color: #fff; margin: -6px 0 -6px 24px; padding: 6px 36px 6px 24px; font-weight: bold; border-radius: 4px; font-size: 90%; position: relative; } #shoppage #shop_info .shop-generic7 td a::after, #shoppage #shop_info .shop-generic6 td a::after{ content: "\f35d"; font-family: "Font Awesome 5 Free"; font-size: 75%; margin-left: .5em; } #shoppage #shop_info .shop-generic7 td a::before, #shoppage #shop_info .shop-generic6 td a::before{ content: "\f054"; font-family: "Font Awesome 5 Free"; font-size: 90%; display: inline-block; position: absolute; right: 10px; } /*公式url*/ #shoppage #shop_info .shop_link_area { display: flex; justify-content: center; flex-wrap: nowrap; margin: 25px 0px -10px; } #shoppage #shop_info .shop-url{ margin:0 5px; } #shoppage #shop_info .shop-url a{ display: inline-block; width: 300px; text-align: center; /* padding: 10px;*/ border: 2px solid #000;/*ブランドに応じて変更*/ border-radius: 4px; box-sizing: border-box; font-weight: bold; position: relative; height:50px; line-height: 46px; white-space: nowrap; } #shoppage #shop_info .shop-url a::after{ content: "\f35d"; font-family: "Font Awesome 5 Free"; font-size: 75%; margin-left: .5em; } #shoppage #shop_info .shop-url a::before{ /*afterは「＞」印で使用済*/ content: "\f054"; font-family: "Font Awesome 5 Free"; font-size: 90%; margin-left: .5em; position: absolute; right: 20px; } #shoppage #shop_info .shop_sns_link_area{ display: flex; justify-content: center; flex-wrap: nowrap; } #shoppage #shop_info .shop_sns_link_area .shop-sns{ margin:0 5px; } #shoppage #shop_info .shop_sns_link_area .shop-sns a{ display: inline-block; border-radius: 4px; background: #00f;/*class別に上書き*/ color: #fff; position: relative; text-align: center; /*padding: 10px;*/ height:50px; line-height: 50px; min-width:100px; } #shoppage #shop_info .shop_sns_link_area .shop-sns a:hover{ text-decoration: none; } #shoppage #shop_info .shop_sns_link_area .shop-sns a::after{ content: ""; font-family: "Font Awesome 5 Brands"; font-size: 1.8em; line-height: 50px; } #shoppage #shop_info .shop_sns_link_area .shop-sns span{display:none;} #shoppage #shop_info .shop_sns_link_area .shop-sns.fb a{background: #2D78F2;} /*20231213 MR Xlogoを変更する #shoppage #shop_info .shop_sns_link_area .shop-sns.tw a{background: #1da1f2;} */ /*20231213 MR Xlogoを変更するためCSSデザインを変更する ↓*/ #shoppage #shop_info .shop_sns_link_area .shop-sns.tw a{background: #000000;} /*20231213 MR Xlogoを変更するためCSSデザインを変更する ↑*/ #shoppage #shop_info .shop_sns_link_area .shop-sns.insta a{background: linear-gradient(135deg,#427eff 0%,#f13f79 70%) no-repeat;} #shoppage #shop_info .shop_sns_link_area .shop-sns.line a{background: #00c300;} #shoppage #shop_info .shop_sns_link_area .shop-sns.fb a::after{content: "\f082";} /*20231213 MR Xlogoを変更する #shoppage #shop_info .shop_sns_link_area .shop-sns.tw a::after{ content: "\f099";} */ /*20231213 MR Xlogoを変更するためCSSデザインを変更 ↓*/ #shoppage #shop_info .shop_sns_link_area .shop-sns.tw a::after{ content:''; height: 50px; display: block; background: url('../img/logo_x.svg') center center; background-repeat: no-repeat; background-size: 25px; } /*20231213 MR Xlogoを変更するためCSSデザインを変更する ↑*/ #shoppage #shop_info .shop_sns_link_area .shop-sns.insta a::after{ content: "\f16d";} #shoppage #shop_info .shop_sns_link_area .shop-sns.line a::after{ content: "\f3c0";} /* items */ #shoppage .cat_items { margin:60px auto; } #shoppage .cat_items h3{ font-family: "Hind","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; border: none; font-weight: 600; border-radius: 0; font-size: 2.2rem; background: none; padding: 0 0 12px; margin: 0 0 0; border-bottom: 5px solid #eee; } #shoppage .cat_items h3 span{ color: #666; font-size: 0.8rem; display: inline-block; margin-left: 20px; font-weight: normal; } #shoppage article.item { overflow: hidden; position: relative; padding: 32px 0 28px; box-sizing: border-box; border-bottom: 1px solid #666; } #shoppage article.item .desc{ overflow: hidden; } #shoppage article.item .image{ float: left; width: 300px; text-align: center; margin-right: 30px; } #shoppage article.item .image span.noimg{ display: block; border-radius: 6px; border: 4px solid #eee; box-sizing: border-box; height:200px; } #shoppage article.item .image span.noimg:before{ content: ""; color: #ccc; background: url(../img/bg_shopnews.png) no-repeat center / contain; display: block; width: 100%; height: 100%; line-height: calc(200px - .5em); font-size: 2.0em; font-weight: bold; } #shoppage article.item.cat1 .image span.noimg:before{ } #shoppage article.item .image a:hover{ text-decoration: none; } #shoppage article.item .image img{ width:100%; border-radius: 6px; border: 4px solid #eee; box-sizing: border-box; } #shoppage article.item .image .morelink{ display: inline-block; margin: 10px auto 0; text-align: center; width:90px; background: #eee; border-radius:20px; /* font-size:0.9em; */ padding: 4px 12px; position: relative; font-weight: bold; } #shoppage article.item .image .morelink::after { content: "\f054"; display: block; display: inline; margin: 0 -1.5em 0 1em; font-family: "Font Awesome 5 Free"; font-size: 0.9em; } #shoppage article.item .desc h4 { padding: 10px 0; margin: 2px 0 8px; font-size: 130%; } #shoppage article.item .desc h4 a{ font-weight:bold; text-decoration: underline; font-size:1.2em; } #shoppage article.item .desc .price{ padding: 0 0 12px; } #shoppage article.item .desc .date, #shoppage article.item .desc .price_date { font-size: 0.9em; } /*sale時*/ #shoppage article.item.sale .price { color:#FF0000; } .newgoods_conf #goods_title.formitem .sale, #shoppage article.item .desc .sale { background: #FF0000; color:#fff; display: inline-block; padding:0 6px; font-size:0.9em; letter-spacing: 2px; } #shoppage article.item .goodscomment { padding: 0 0 10px; margin: 0 0 10px; } /* ショップページ　クーポン表示 */ /*popup「クーポン」消す*/ .view.popup article .cat_name{display:none;} /*期間*//*popupと共用*/ #shoppage article.item.cat2 .fromto, .view.popup article .fromto{ display: inline-block; background: #eee; /*ブランドに応じて変更*/ padding: 8px; margin: 0 0 14px; border-radius: 4px; } .view.popup article .fromto{margin-top:10px;} #shoppage article.item.cat2 .fromto dt, #shoppage article.item.cat2 .fromto dd, .view.popup article .fromto dt, .view.popup article .fromto dd{ display: inline-block; } #shoppage article.item.cat2 .fromto dt, .view.popup article .fromto dt{ margin-right: .5em; } /*備考*/ #shoppage article.item.cat2 .coupon_bikou{ margin: 0 0 12px; } #shoppage article.item.cat2 .coupon_bikou dt, .view.popup article .coupon_bikou dt{ display: none; } #shoppage article.item.cat2 .image span.noimg:before{ content: ""; background-image: url(../img/bg_coupon.png); } /*クーポン開くボタン　article.item.cat2 .print a ※基礎情報部のボタン(.s_h_detail .jobs a)も兼用*/ /*popupの「印刷する」ボタンと兼用*/ body.view.index.bf3 #coupon article.item .print a, #shoppage article.item.cat2 .print a, #shoppage .shop_header .s_h_detail .jobs a, .view.popup.coupon article .print a{ display: inline-block; background: #eee; /*ブランドに応じて変更*/ border-radius: 100px; text-align: center; font-weight: bold; color: #fff; padding: 10px; position: relative; width: 100%; box-sizing: border-box; width: 260px; margin-right: 15px; } body.view.index.bf3 #coupon article.item .print a:after, #shoppage article.item.cat2 .print a::after, #shoppage .shop_header .s_h_detail .jobs a::after, .view.popup.coupon article .print a::after{ content: "\f054"; font-family: "Font Awesome 5 Free"; position: absolute; right: 20px; } /*非表示*/ #shoppage article.item .price_date{ display: none; } /****ショップページ下部　SHOP SEARCH******/ #shoppage #shop_search.max_variable { border-bottom:none; border-top:4px solid #eee; padding:20px 0; } #shoppage #shop_search h3 { font-family: "Hind","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; border: none; font-weight: 600; border-radius: 0; font-size: 1.8rem; background: none; padding: 0; text-align: center; margin: 15px 0; } #shoppage #shop_search h3:before{ content: "\f002"; font-family: "Font Awesome 5 Free"; font-size: 1; margin-right: .5em; font-weight: 900; } #shoppage #shop_search ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content:center; } #shoppage #shop_search ul li { margin:2px ; flex-basis: auto; width: calc(calc(100% / 3) - 4px); } #shoppage #shop_search ul li a { display: block; padding:18px 5px ; background: #eee; border-radius: 4px; white-space:nowrap; text-align: center; position: relative; font-weight:bold; } #shoppage #shop_search ul li a:after { content: "\f054"; font-family: "Font Awesome 5 Free"; font-size: 90%; margin-left: .5em; font-weight: 900; position: absolute; right:20px; } #shoppage #shop_search ul.other{ margin-top:15px; } #shoppage #shop_search ul.other li{ width:calc(calc(100% / 2) - 4px); } /* --------------------------------------------- popup --------------------------------------------- */ /*PCのみ一部非表示、修正*/ /* body.pc.popup .AllPageBnr, body.pc.popup .header__subNav, body.pc.popup .header__glo{ display: none; } body.pc.popup .variable { width:100%; max-width:700px; min-width: unset; padding:0 8px; box-sizing: border-box; } body.pc.popup .inner { width: 100%; box-sizing: border-box; min-width: unset; } body.pc.popup #main { position: relative; padding-bottom:50px; } body.pc.popup .shoplink{ text-align: center; padding:20px auto; } body.pc.popup .shoplink a{ display: inline-block; padding: 10px 20px; background: #eee; border-radius:4px; font-weight:bold; } body.pc.popup .close a{ display: inline-block; padding: 5px 15px; background: #eee; border-radius:4px; font-weight:bold; } body.pc.popup .close a:before{ content: "×"; display: inline-block; font-size:1.2em; padding:0 3px 0 0; } body.pc.popup .close.top{ position: absolute; right:20px; top:25px; } body.pc.popup .close.bottom{ text-align: center; padding:20px auto; } body.pc.popup header .header__logo { } body.popup header .header__logo img{ max-width: 160px; max-height: 72px; height:auto; } body.popup header .scname { font-size: 22px; padding: 24px 0 0; margin: 0 0 0 30px; } body.popup #contents {margin:0;} body.popup #contents-main h2 { padding: 16px 10px; box-sizing: border-box;} */ body.popup .max_variable { border-bottom: 4px solid #eee; padding: 0 0 20px; } body.popup .max_variable:after{ content: ""; clear: both; display: block; } body.popup .shop_header .s_h_images { float: left; width: 300px; border: 4px solid #eee; border-radius: 4px; overflow: hidden; margin: 0 30px 0px 0; } body.popup .shop_header .s_h_images .main_logo { padding: 10px; text-align: center; } body.popup .shop_header .s_h_images .main_logo img { max-height: 50px; } body.popup .shop_header .s_h_detail h2 { font-weight: bold; font-size: 1.6rem; line-height: 100%; margin-bottom: 5px; } body.popup .shop_header .s_h_detail h2 span { font-size: .8rem; font-weight: normal; } body.popup .shop_header .s_h_detail h2 span.cat_detail { display: block; line-height: 1.2em; padding: 5px 0 3px; } body.popup .shop_header .s_h_detail p { display: inline-block; padding-right:20px; } body.popup .shop_header p .floor{ padding-right:20px; } body.popup .shop_header p .floor a { display: none; } body.popup article { padding:24px 24px 40px; position: relative; overflow: hidden; border-radius: 16px; max-width:700px; margin:0 auto; } body.popup article .gcat { display:none; } body.popup article .image { text-align:center; margin:16px 0; } body.popup article .image img{ max-width:100%; max-height:640px; border-radius:4px; } body.popup article h4 { border:none; padding: 0; margin: 10px 0 0; font-weight: bold; font-size: 120%; } body.popup article .price { font-weight: bold; padding: 4px 0; } body.popup article.sale .price { color: #FF0000; } body.popup article .desc .bikou, body.popup article .desc .date, body.popup article .desc .price_date { font-size:0.8em; } body.popup article .desc .sale { background: #FF0000; color:#fff; display: inline-block; padding:0 6px; font-size:0.9em; letter-spacing: 2px; } body.popup article .desc .goodscomment { padding:16px; border-radius: 4px; background: #eee; margin:8px 0 } body.popup .return_shop.btn1 { margin:50px auto; text-align: center; } body.popup .return_shop.btn1 a{ display: inline-block; padding:18px 30px; font-weight: bold; font-size: 1.2em; text-align: center; border:4px solid #eee; } body.popup .return_shop.btn1 a:before{ content: "\f54e"; display: inline-block; font-family: "Font Awesome 5 Free"; margin-left: 10px; font-size:1.5; font-weight: bold; } body.popup.coupon article.item .desc h4{ color: #E84466; font-size: 1.1em; } body.popup.recruit #contents #contents-main { padding:0 20px; box-sizing: border-box; } body.popup.recruit #contents #contents-main table{ margin-bottom:8px; margin-top:10px; } body.popup.recruit #contents #contents-main p.date{ font-size:0.8em; } body.popup.recruit #contents #contents-main td a.goods_generic2 { display: inline-block; padding: 8px 20px 8px 40px; background: #eee; border-radius: 4px; position: relative; } body.popup.recruit #contents #contents-main td a.goods_generic2:after { content: ""; display: block; position: absolute; top: 38%; width: 0; height: 0; border: 4px solid transparent; left: 20px; border-left: 5px solid #E84466; } /*固定header表示を表示させない*/ body.popup #fix_gnavi{ /* display: none!important;*/ } /*印刷ボタン余白調整*/ body.popup.coupon .print{margin-top: 15px;text-align: center;} /* --------------------------------------------- goodslist bf=2 --------------------------------------------- */ body.index.bf2 div#goodslist-header-navi { margin: -4px 10px 12px; } body.index.bf2 div#goodslist-header-navi dl { width: 100%; box-sizing: border-box; /* border-bottom:1px solid #ccc; */ border-bottom: 4px solid #eee; display: flex; justify-content: center; } body.index.bf2 div#goodslist-header-navi dl:after { content: ""; clear:both; display: block; } body.index.bf2 div#goodslist-header-navi dt, body.index.bf2 div#goodslist-header-navi dd { float: left; margin: 0 6px; color: #FFF; } body.index.bf2 #goodslist-header-navi dl dt a, body.index.bf2 #goodslist-header-navi dl dd a { text-decoration: none; color: #666; display: block; height: 100%; padding: 0px 15px 16px; position:relative; box-sizing: border-box; font-weight: bold; } body.index.bf2 #goodslist-header-navi dl dt a:hover, body.index.bf2 #goodslist-header-navi dl dd a:hover, body.index.bf2 #goodslist-header-navi dl dt.current a, body.index.bf2 #goodslist-header-navi dl dd.current a{ color:#E84466; border-radius:3px; } body.index.bf2 #goodslist-header-navi dl dt.current a:after, body.index.bf2 #goodslist-header-navi dl dd.current a:after { content: ""; display: block; position: absolute; bottom: -2px; width: 0; height: 0; border: 6px solid transparent; left: 42%; border-top: 8px solid #E84466; } /*ショップニュース共通　bf=2 ,tagitemlist, tag*/ body.tag .goodslist, body.tagitemlist #items, body.index.bf2 #items { padding:4px 0; width:100% !important; box-sizing: border-box; display: flex; flex-wrap: wrap; } .shopnews_item { width:33.33333333333%; box-sizing: border-box; } .shopnews_item .news_box{ margin: 10px; box-sizing: border-box; position: relative; background: #fff; } .shopnews_item.noimg .news_box{ /* padding-top:30px; */ } /*body.index.bf2 #items .item section .gcat_badge { position: absolute; left: -95px; top: -25px; font-size:0.9em; background: #00A496; color: #fff; display: inline-block; padding:50px 4px 4px; width: 200px; font-weight: bold; text-align: center; transform: rotate(-45deg); } */ .shopnews_item .news_box .gcat_badge { display:none; } .shopnews_item .news_box:before { color:#fff; background: #E84466; display: inline-block; position: absolute; top: 0px; right: 0px; border-bottom-left-radius: 4px; width: 60px; height: 40px; padding: 6px 0 0; box-sizing: border-box; font-size: 12px; white-space: pre; text-align: center; line-height: 1.2em; z-index: 2; letter-spacing: 0.6px; -moz-opacity: 0.8; /* opacity: 0.8; */ } /*クーポンbefore div.ico_wrapに入れる TOPページも共通*/ .shopnews_item.cat2 .ico_wrap::after, body.index.bf0 .item.cat2 .ico_wrap::after { content: "COUPON"; background: #e84466; color: #fff; font-size: 76%; padding: 0 10px; font-weight: bold; display: inline-block; margin: 0 0 .3em .3em; border-radius: 100px; } .shopnews_item.sale .news_box:before { content: "SALE"; color: #f00; letter-spacing: 1px; background: none; font-size: 200%; width: auto; right: 8px; } .shopnews_item .image { overflow: hidden; /* max-height:200px; */ /* height: 240px;*/ border-radius: 4px; border:4px solid #eee; box-sizing: border-box; position: relative; } .shopnews_item .image:before { content: ""; display: block; padding-top: calc(3 / 4 * 100%); } .shopnews_item img{ position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height:100%; object-fit: cover; object-position: 50% 0; } .shopnews_item .image:not(.noimg) img:hover{ /* -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -ms-transform: scale(1.1,1.1);*/ } .shopnews_item .image.noimg { display: flex; align-items: center; justify-content: center; text-align: center; } .shopnews_item .image.noimg a{ display: flex; align-items: center; justify-content: center; width:100%; height:100%; } .shopnews_item .image.noimg a.no_logo:hover{ text-decoration: none; } .shopnews_item .image.noimg img { width:auto; height:auto; max-height:170px; max-width:70%; } .shopnews_item .image.noimg img.no_logo { max-height:100%; max-width:100%; } /**/ .shopnews_item .desc { padding: 10px 0; position: relative; } .shopnews_item .date{ font-size:70%; color:#777; } .shopnews_item h3.goods{ font-size: 1.2em !important; font-weight:bold !important; line-height: 140%; margin: 0 0 3px; border:none !important; padding:0 !important; background: none !important; } .shopnews_item .price{ font-weight:bold; font-size: 90%; } .shopnews_item.sale .price{ color:#f00; } .shopnews_item.cat2 .price{ display:none; } .shopnews_item .name{ font-size: 80%; } .shopnews_item .ico_new{ -moz-transform: rotate(-6deg) skew(-6deg); -o-transform: rotate(-6deg) skew(-6deg); -ms-transform: rotate(-6deg) skew(-6deg); } body.index #goodslist-navi { margin:20px 8px; overflow: hidden; } body.index #goodslist-navi .back{float:left;} body.index #goodslist-navi .next{float:right;} body.index #goodslist-navi form input[type="submit"]{ color: #000; padding:5px 12px 5px 15px; font-size:16px; border-radius:4px; border:1px solid #aaa; cursor: pointer; background:#eee; text-shadow: -1px -1px 0px rgba(255,255,255,1); } /* --------------------------------------------- ショップ検索用　index.jsp bf=8 --------------------------------------------- */ body.view.index #search-category, body.view.index #search-on, body.view.index #search-floor{ margin-bottom:32px; } body.view.index .search #search-all{ clear:both; } body.view.index .search dl.search_block{ margin:0 0 32px; } body.view.index .search dl.search_block dt, body.view.index .search #search-all h3{ margin:0 0 16px; padding: 14px 20px; font-size: 16px; background: #fff; font-weight:bold; box-sizing: border-box; border-radius:4px; border:4px solid #eee; } body.view.index .search dl.search_block dd{ margin:0 16px 0; } body.view.index .search dl.search_block dd a{ display: inline-block; background:#eee; color:#E84466; padding:16px 40px; margin:0 0 4px 0; text-align:center; border-radius:3px; font-size:16px; text-decoration:none; font-weight:bold; letter-spacing:2px; } body.view.index .search dl.search_block dd a:before { content: ""; display: inline-block; border: 5px solid transparent; border-left-color: #E84466; margin:0 4px 2px 0; } body.view.index .search dl.search_block dd a:hover{ background:#E84466; color:#fff; } body.view.index .search dl.search_block dd a:hover:before { border-left-color: #fff; } body.view.index .search div#search-all{ margin:0 0 10px; padding-left:0px; } body.view.index .search div#search-all div.title p{ margin:0 24px 4px; text-align:right; font-size:10px; } body.view.index div#searchcat div.title, body.view.index div#searchon div.title, body.view.index .search #shop-icon{ margin:0 auto; } body.view.index div#searchcat table.table01, body.view.index div#searchon table.table01{ clear:both; } body.view.index div.search table.table01{ margin:0 auto; } body.view.index div.search table.table01 td.biz, body.view.index div.search table.table01 td.tel, body.view.index div.search table.table01 td.hour, body.view.index div.search table.table01 td.floor{ font-size:12px; } body.view.index div.search table.table01 th.biz, body.view.index div.search table.table01 td.biz, body.view.index div.search table.table01 th.tel, body.view.index div.search table.table01 td.tel, body.view.index div.search table.table01 th.hour, body.view.index div.search table.table01 td.hour, body.view.index div.search table.table01 th.floor, body.view.index div.search table.table01 td.floor{ border-left:1px dashed #ccc; } body.view.index div.search table.table01 td.name a{ font-weight:bold; text-decoration:none; } body.view.index div.search table.table01 td.floor a{ /*background:#00A496;*/ color:#fff; padding:8px 16px; text-align:center; border-radius:3px; text-decoration:none; font-weight:bold; display: inline-block; line-height: 1.1; /*white-space: nowrap;*/ } body.view.index div.search table.table01 .name{ width:300px; } body.view.index div.search table.table01 .logo{ width:100px; text-align:center; } body.view.index div.search table.table01 .logo img{ width:90px; margin:0 auto; } body.view.index div.search table.table01 .biz{ width:180px; } body.view.index div.search table.table01 .tel{ width:120px; text-align:center; } body.view.index div.search table.table01 .hour{ width:240px; } body.view.index div.search table.table01 .hour p{ white-space: pre-wrap; } body.view.index div.search table.table01 .floor{ text-align:center; width:100px; } body.view.index div.search #shop-icon { width:924px; margin: 12px auto 30px; } body.view.index div.search #shop-icon ul li{ display: inline-block; margin-right:20px; font-size:90%; } body.view.index div#category-navi{ width: 100%; box-sizing: border-box; overflow:hidden; margin: 0 0 10px; } body.view.index div#category-navi li{ float: left; margin-right: 8px; margin-bottom: 8px; } body.view.index div#category-navi li a{ text-decoration: none; display: block; height: 100%; padding: 6px; position: relative; font-size: 90%; background: #eee; color: #E84466; border-radius: 3px; } body.view.index div#category-navi li.guide a{ border:none; } /* --------------------------------------------- index.jsp クーポン、求人、サービス一覧ページ --------------------------------------------- */ body.view.index div#coupon, body.view.index div#recruit, body.view.index div#service { padding:0 16px; } body.view.index div#coupon div.title, body.view.index div#recruit div.title, body.view.index div#service div.title{ margin:0 0px 10px; overflow:hidden; } body.view.index div#searchcat div.title h3, body.view.index div#searchon div.title h3, body.view.index div#coupon div.title h3, body.view.index div#recruit div.title h3, body.view.index div#service div.title h3{ /*float:left; background:#00A496; color:#fff; padding:8px 32px; text-align:center; border-radius:4px 4px 0 0/4px 4px 0 0; font-size:1.2em; text-decoration:none; font-weight:bold; letter-spacing:2px; border:none;*/ } body.view.index div#coupon div.title h3 a, body.view.index div#recruit div.title h3 a, body.view.index div#service div.title h3 a{ color:#fff; text-decoration: none; } body.view.index div#searchcat div.title p, body.view.index div#searchon div.title p, body.view.index div#coupon div.title p, body.view.index div#recruit div.title p, body.view.index div#service div.title p{ float:right; text-align:right; font-size:10px; } body.view.index div#coupon div.item, body.view.index div#recruit table.table01, body.view.index div#service table.table01{ margin:16px 0; } /* --------------------------------------------- ショップサービス bf=4 --------------------------------------------- */ body.view.index div#service table.table01{ border:1px solid #CCC; width:100%; } body.view.index div#service table.table01 th, body.view.index div#service table.table01 td{ border-top:1px dashed #CCC; padding:8px; } body.view.index div#service table.table01 th{ background:#eee; font-weight:bold; } body.view.index div#service table.table01 th.name{ width:25%; } body.view.index div#service table.table01 th.service{ width:75%; } /* --------------------------------------------- クーポン　bf=3 --------------------------------------------- */ body.view.index.bf3 .item_non, body.view.index.bf5 .item_non{ background: #eaeaea; text-align: center; position: relative; padding:100px 0; margin:20px 0 40px; border-radius: 10px; font-size:1em; } body.view.index.bf3 .item_non .fa, body.view.index.bf5 .item_non .fa{ font-size:1.4em; margin-right:6px; } body.view.index.bf3 .item_non span, body.view.index.bf5 .item_non span{ position: absolute; left:16px; top:16px; font-size:2em; color:#aaa; font-weight:bold; } body.view.index.bf3 #coupon article.item { margin: 0 0 16px; } body.view.index.bf3 #coupon h3{ margin:16px 0 0; } /*******************************************/ body.view.index.bf3 #coupon article.item { overflow: hidden; position: relative; padding: 32px 0 28px; box-sizing: border-box; border-bottom: 1px solid #666; } body.view.index.bf3 #coupon article.item .image{ float: left; width: 300px; text-align: center; margin-right: 30px; } body.view.index.bf3 #coupon article.item .image span.noimg{ display: block; border-radius: 6px; border: 4px solid #eee; box-sizing: border-box; height:200px; } body.view.index.bf3 #coupon article.item .image a:hover { text-decoration: none; } body.view.index.bf3 #coupon article.item .image img{ width:100%; border-radius: 6px; border: 4px solid #eee; box-sizing: border-box; } body.view.index.bf3 #coupon article.item .desc{ overflow: hidden; } body.view.index.bf3 #coupon article.item .desc h4 { padding: 5px 0 10px; margin: 2px 0 8px; font-size: 130%; line-height: 1.4; } body.view.index.bf3 #coupon article.item .desc h4 a{ font-weight:bold; text-decoration: underline; font-size:1.2em; } body.view.index.bf3 #coupon article.item .cat_name{display:none;} body.view.index.bf3 #coupon article.item .fromto{ display: inline-block; background: #eee; /*ブランドに応じて変更*/ padding: 8px; margin: 0 0 14px; border-radius: 4px; } body.view.index.bf3 #coupon article.item .fromto dt, body.view.index.bf3 #coupon article.item .fromto dd{ display: inline-block; } body.view.index.bf3 #coupon article.item .fromto dt{ margin-right: .5em; } body.view.index.bf3 #coupon article.item .coupon_bikou{ margin: 0 0 12px; } body.view.index.bf3 #coupon article.item .image span.noimg:before{ content: ""; color: #ccc; background: #fff; background: url(../img/bg_coupon.png) no-repeat center / contain; display: block; width: 100%; height: 100%; line-height: calc(200px - .5em); font-size: 2.2em; font-weight: bold; } body.view.index.bf3 #coupon article.item dl.name dt{ display: none; } body.view.index.bf3 #coupon article.item dl.name dd{ font-weight:bold; font-size:1.2em; margin-bottom:20px; } body.view.index.bf3 #coupon article.item dl.coupon_bikou dt{ float:left; } body.view.index.bf3 #coupon article.item .print { padding-top:10px; } /* --------------------------------------------- 求人情報　bf=5 --------------------------------------------- */ body.view.index.bf5 #recruit article { padding: 0; border: 1px solid #ccc; margin: 0 0 16px; position: relative; } body.view.index.bf5 #recruit h3{ margin:16px 0 0; } body.view.index.bf5 #recruit article:last-of-type { margin-bottom:24px; } body.view.index.bf5 #recruit article dl { width:80%; border-bottom:1px dashed #ccc; display: table; } body.view.index.bf5 #recruit article dl:last-of-type{ border:none; } body.view.index.bf5 #recruit article dl dd, body.view.index.bf5 #recruit article dl dt{ display: table-cell; padding:8px; } body.view.index.bf5 #recruit article dl dt{ width:130px; background: #eaeaea; font-weight: bold; } body.view.index.bf5 #recruit article dl dd a{ text-decoration: underline; } body.view.index.bf5 #recruit article h4.name { font-size: 1.2em; font-weight: bold; margin:8px 0; } body.view.index.bf5 #recruit article h4.name span{ display: inline-block; padding:0 0 0 5px; } body.view.index.bf5 #recruit article p{ margin:0 0 4px; } body.view.index.bf5 #recruit article p strong{ display: inline-block; background: #eee; padding:1px 5px; font-size: 0.9em; border-radius: 2px; margin-right:5px; width:100px; text-align: center; } body.view.index.bf5 #recruit article a.window-recruit { display: inline-block; position:absolute; /*background:#00A496 ;*/ color:#FFF; padding:8px; right:16px; top:35%; border-radius: 4px; } body.view.index.bf5 #recruit article a.window-recruit .fa{ padding-right:4px; } /* --------------------------------------------- フロアガイド --------------------------------------------- */ body.floor h2 strong { font-weight:bold; display: inline-block; margin-left:10px; font-size:1.1em; } body.floor article .floor_img { background: #fff; padding:6px; width:100%; box-sizing: border-box; border-radius:4px; border:4px solid #eee; } body.floor article .floor_img img{ width:100%; } body.floor article .floor_img .desc { background:#fff; padding:16px; border-radius:8px; margin:8px 0 0 ; } body.floor #contents-main article .floor_img .desc h3{ font-weight:bold; border:none; padding:0; } body.floor article .floor_img .desc p{ font-size:0.9em; } body.floor table.table01 { margin:16px 0; } body.floor table.table01 td.number{width:3%;border-right:none;padding-right:3px;} body.floor table.table01 td.name {width:20%;border-right:none;border-left:none;font-weight:bold;padding-left:3px;} body.floor table.table01 td.logo{width:8%;border-left:none;} body.floor table.table01 td.category{width:15%;font-size:0.9em;} body.floor table.table01 td.hour{width:24%;font-size:0.9em;white-space: pre-wrap;} body.floor table.table01 td.logo img {max-width:80px;} body.floor table.table01 td.number span{ display: inline-block; padding:5px 10px; text-align: center; border-radius:3px; font-weight:bold; } body.floor ul.floorlist { display: flex; justify-content: center; align-items: center; padding:5px; margin:0 auto 20px; } body.floor ul.floorlist li{ margin:5px ; } body.floor ul.floorlist li a{ display: inline-block; padding:15px 30px; background: #fff; border-radius: 4px; font-weight:bold; border:2px solid #ccc; } body.floor ul.floorlist li.current a{ background: #aaa; color:#fff; } body.floor ul.floorlist li a:after{ content: "\f105"; display: inline-block; font-family: "Font Awesome 5 Free"; margin-left: 10px; font-size:1.5; } body.floor .cat_lists{ display: flex; justify-content: center; flex-wrap: wrap; margin:0px 0 20px; padding:10px 0 20px; } body.floor .cat_lists .catlist { white-space: nowrap; padding:5px 10px; font-weight:bold; } body.floor .cat_lists .catlist span{ display: inline-block; border-radius:3px; width:24px; height:24px; vertical-align: middle; margin-right:5px; } /* --------------------------------------------- --------------------------------------------- */ /* --------------------------------------------- 施設案内（よくある質問）faq --------------------------------------------- */ /* body.faq faq_detail_conf*/ .faq_contents { } .faq_contents dl{ padding:24px; border-radius: 4px; background:#eee; margin:1em 0 2em; } .faq_contents dl dt{ font-weight:bold; font-size:1.2em; line-height: 1.5em; color:#00A496; position: relative; padding: 0 0 0 2em; } .faq_contents dl dd{ margin:0.5em 0 2.5em ; position: relative; padding: 0 0 0 2.5em; } .faq_contents dl dd a{ text-decoration: underline; } .faq_contents dl dt:before, .faq_contents dl dd:before{ font-weight:bold; display: inline-block; position: absolute; padding:0 5px 0 0; top:0; left:0; font-size:1.2em; color:#fff; border-radius: 4px; padding:0 5px ; } .faq_contents dl dt:before{ content:"Q"; background:#00A496 ; } .faq_contents dl dd:before{ content:"A"; background:#E84466 ; margin-left:3px; } /* --------------------------------------------- access --------------------------------------------- */ body.access h3{} body.access #contents-main section { } body.access #contents-main section h3 { margin:0 0 16px; } body.access #sc_map { border:1px solid #ccc; box-sizing: border-box; height:340px; width:100%; } body.access .sc_map_link { margin:30px 0; text-align:center; padding:4px; } body.access .sc_map_link a{ text-decoration: none; font-weight:bold; display: inline-block; padding:15px 30px; border-radius:4px; background: #aaa; color:#fff; } body.access .sc_map_link a span{ font-size:0.9em; } body.access .sc_map_link .fa{ margin-right:5px; } body.access .access_table{ margin-bottom:16px; } body.access table.table01 th{ border-left:none; width:30%; } body.access table.table01 td{ border-right:none; } body.access section dl.acbox{ margin:0 0 16px; background: #eee; border-radius: 4px; padding:24px; } body.access section dl.acbox dt{ padding:0 0 16px 0; border-bottom:2px solid #fff; color: #00A496; font-weight:bold; font-size:1.1em; } body.access section dl.acbox dt strong{ display: inline-block; color:#333; font-size:1.2em; font-weight:bold; padding:0 10px; } body.access section dl.acbox dt span{ color:#E84466; } body.access section dl.acbox dt .fa{ color:#333; font-size:1.4em; margin-right:10px; } body.access section dl.acbox dd{ padding:10px 0; } body.access section dl.acbox dd h4{ font-weight:bold; } body.access section dl.acbox dd p{ margin:0 0 1em; } body.access section dl.acbox dd p a{ text-decoration: underline; } #sc_map iframe{ width:100%; height:100%; border:0; } /*========================================== 新　イベントニュース関連 ==========================================*/ /*------------------------------------------*/ /*カレンダーありの通常表示 /*------------------------------------------*/ body.view.eventnews #more-btn, .ev-navi_bottom { clear:both; text-align: center; margin: 0 0 40px; border-top: 4px solid #eee; padding: 40px 0 16px; } /**週間カレンダー**/ #contents.eventnews .cal_week_notice{ background: #eee; display: inline-block; padding:15px 20px 0; border-radius:4px 4px 0 0; width:100%; box-sizing: border-box; text-align: center; font-weight:bold; } #contents.eventnews .cal_week_view_wrap { background:#E0DECA; border-radius:0 0 4px 4px; display: flex; align-items: center; /* 変更なし */ justify-content: center; padding:0 1px 15px; width:100%; box-sizing: border-box; } #contents.eventnews #cal_week_view_container{ width:86%; } #contents.eventnews #cal_week_view { } #contents.eventnews #cal_week_view .w_block{ display: none; float:left; width:100%; } #contents.eventnews #cal_week_view .w_block.b1{ display: block; } #contents.eventnews .cal_week_view_wrap p.prev, #contents.eventnews .cal_week_view_wrap p.next{ display: flex; flex-direction: column; /* 変更なし */ justify-content: center; /* 変更なし */ align-items: center; /* 変更なし */ cursor: pointer; color:#666; margin:0 10px; padding:10px; height:30px; } #contents.eventnews .cal_week_view_wrap p.prev i, #contents.eventnews .cal_week_view_wrap p.next i{ font-size: 30px; } #contents.eventnews #cal_week_view .day_sel{ width:calc(100%/7); height:90px; text-align: center; padding:8px; box-sizing: border-box; margin:0; float: left; } #contents.eventnews #cal_week_view .day_sel .w_d_inner{ background: #fff; border-radius: 4px; width:100%; box-sizing: border-box; height:100%; display: flex; font-weight:bold; flex-direction: column; /* 変更なし */ justify-content: center; /* 変更なし */ align-items: center; /* 変更なし */ cursor: pointer; font-family: "Hind","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; font-size:1.1em; } #contents.eventnews #cal_week_view .day_sel .w_d_inner:hover{ border:3px solid #D05098; } #contents.eventnews #cal_week_view .day_sel.select_day .w_d_inner { border:3px solid #D05098; background:#FDE3F6; } #contents.eventnews #cal_week_view .day_sel.ev_none2 .w_d_inner, #contents.eventnews #cal_week_view .day_sel.ev_none .w_d_inner { background: #eee; cursor: none; pointer-events: none; border:2px solid #fff; } #contents.eventnews #cal_week_view .day_sel.Sat{color:#2B6DB1;} #contents.eventnews #cal_week_view .day_sel.holiday, #contents.eventnews #cal_week_view .day_sel.Sun{color:#C41E4C;} /*#contents.eventnews span{ display: inline-block; font-weight:bold; }*/ #contents.eventnews .cal_m {padding-right:1px;} #contents.eventnews .cal_d {font-size:30px;} #contents.eventnews .cal_w { border-top:1px solid #ccc; display: block; margin-top:0px; padding-top:2px; width:100%; font-weight: bold; } /***/ #contents.eventnews .choice_hold{ display: flex; justify-content: center; margin:20px 0; } #contents.eventnews .choice_hold > li { cursor: pointer; display: flex; flex-direction: column; /* 変更なし */ justify-content: center; /* 変更なし */ align-items: center; /* 変更なし */ cursor: pointer; font-weight:bold; box-sizing: border-box; border-radius:4px; border:4px solid #eee; flex-basis: 50%; } /*余白調整*/ #contents.eventnews .choice_hold > li {margin: 0 5px;} #contents.eventnews .choice_hold > li:first-of-type {margin-left: 0;} #contents.eventnews .choice_hold > li:last-of-type {margin-right: 0;} #contents.eventnews .choice_hold > li.btn_all{ background: #eee; } #contents.eventnews .choice_hold > li:hover{ opacity: 0.7; } /*過去のイベントが表示された場合*/ /*幅に合わせて調整　「終了した～」が１行に収まるように*/ #contents.eventnews .choice_hold.li4 > li:last-of-type { font-size: 90%; } @media screen and (max-width: 1100px){ #contents.eventnews .choice_hold.li4 > li:last-of-type { flex-basis: 55%; } } .pc #contents.eventnews .choice_hold.li4 > li:last-of-type a{ padding: 15px 0; } #contents.eventnews .choice_hold .past_list{/* flex-basis: 26%; */} #contents.eventnews .choice_hold > li a { display: block; width:100%; height:100%; text-align: center; padding: 15px 10px; box-sizing: border-box; } /***イベント情報の出力関連**/ #contents.eventnews #temp_ev_list_f { display:none; } body.view.eventnews #more-btn span { display: inline-block; background:#3EAF94; padding: 10px 20px; cursor: pointer; border-radius: 20px; margin-top:20px;color:#fff; } /*月間カレンダー*/ #contents.eventnews .etc_select { display:inline-block; float: right; } #contents.eventnews .etc_select dl dt i { margin-right:5px; } #contents.eventnews .etc_select dl dt:after{ content: "\f078"; display: inline-block; font-family: "Font Awesome 5 Free"; margin-left:10px ; font-weight:bold; } #contents.eventnews dl#cal_month{ position: relative; float: right; } #contents.eventnews dl#cal_month dt { display:inline-block; padding:10px 40px; background: #ccc; color:#fff; border-radius: 5px; cursor: pointer; border-radius:20px; } #contents.eventnews dl#cal_month .cal_month_view_wrap { display: none; background:#ccc; border-radius: 4px; padding: 12px; width:280px; position: absolute; right:0; top: calc(100%); z-index: 100; box-shadow: 0px 4px 16px 0px rgb(0 0 0 / 20%); } #contents.eventnews .cal_month_view_wrap .month_header{ display: flex; align-items: center; /* 変更なし */ background:#fff; border-radius:3px; padding:5px; margin:0 0 10px ; } #contents.eventnews .cal_month_view_wrap .month_header .month_title { width:100%; text-align: center; font-weight:bold; font-size:20px; } #contents.eventnews .cal_month_view_wrap .month_header p.prev, #contents.eventnews .cal_month_view_wrap .month_header p.next{ display: inline-block; flex-direction: column; /* 変更なし */ justify-content: center; /* 変更なし */ align-items: center; /* 変更なし */ cursor: pointer; background: #666; color:#fff; margin:0 0px; border-radius: 3px; padding:10px; height:18px; } #contents.eventnews #cal_month_view { display: block; justify-content: space-evenly; width:100%; align-items: center; /* 変更なし */ z-index:10; } #contents.eventnews #cal_month_view li{ width:calc(100% / 7); float: left; padding:4px; box-sizing: border-box; } #contents.eventnews #cal_month_view li p{ text-align: center; padding:10px; border-radius:50%; box-sizing: border-box; font-weight:bold; background: #fff; width:35px; height:35px; display: flex; flex-direction: column; /* 変更なし */ justify-content: center; /* 変更なし */ align-items: center; /* 変更なし */ cursor: pointer; } #contents.eventnews #cal_month_view li p:hover{ border:2px solid #D05098; } #contents.eventnews #cal_month_view li.select_day p { border:2px solid #D05098; background:#FDE3F6; } #contents.eventnews #cal_month_week_title li{ width:calc(100% / 7); float: left; box-sizing: border-box; text-align: center; padding:3px; font-weight:bold; display: flex; flex-direction: column; /* 変更なし */ justify-content: center; /* 変更なし */ align-items: center; /* 変更なし */ color:#fff; } #contents.eventnews #cal_month_week_title li.Sat, #contents.eventnews #cal_month_view li.Sat p{color:#49C9FF;} #contents.eventnews #cal_month_week_title li.Sun, #contents.eventnews #cal_month_view li.holiday p, #contents.eventnews #cal_month_view li.Sun p{color:#FF6D8D;} #contents.eventnews #cal_month_view li.ev_none { cursor: none; pointer-events: none; } #contents.eventnews #cal_month_view li.ev_none2 p, #contents.eventnews #cal_month_view li.ev_none p { cursor: none; pointer-events: none; opacity: .6; } /*カテゴリプルダウン*/ #contents.eventnews dl#btn_category{ position: relative; float: right; /* text-align: right; */ margin-right:15px; } #contents.eventnews dl#btn_category dt{ display: inline-block; color:#fff; padding:10px 40px; border-radius:20px; cursor: pointer; } #contents.eventnews dl#btn_category dd{ display: none; position: absolute; right:0; width:100%; z-index: 5; border-radius:5px; background: #fff; border:3px solid #ccc; } #contents.eventnews dl#btn_category .ev_cat_list li{ padding:8px; border-bottom:1px dotted #aaa; text-align: left; cursor: pointer; } #contents.eventnews dl#btn_category .ev_cat_list li a{ display: block; } #contents.eventnews dl#btn_category .ev_cat_list li:hover{ background: #eee; } /*「記事一覧」(=１個目)のみに適用*/ #contents.eventnews dl#btn_category .ev_cat_list li:first-of-type{ padding: 0; } #contents.eventnews dl#btn_category .ev_cat_list li:first-of-type a{ padding: 8px; } /**絞りこみタイトル**/ #contents.eventnews .event_title_wrap{ margin:30px 0 20px 0; } #contents.eventnews .event_title_wrap h3{ border: none; padding: 0px; border-radius:0px; font-weight: bold; font-size: 30px; background: #fff; line-height: 30px; } /*ページネーション*/ #contents.eventnews .paging{ background: #eee; padding:20px; border-radius:10px; margin:10px 0; clear: both; text-align: center; vertical-align: center; } #contents.eventnews .paging span{ display: inline-block; height:40px; width:40px; text-align: center; box-sizing: border-box; padding:5px; background: #fff; border-radius: 10%; margin:5px ; cursor: pointer; font-weight:bold; border:5px solid #fff; line-height: 1.5em; } #contents.eventnews .paging .page_btn.on, #contents.eventnews .paging .page_btn:hover{ background:none; } #contents.eventnews span.page_next, #contents.eventnews span.page_prev{ background: none; border:none; padding: 10px; margin:0px; } #contents.eventnews span.page_next:before, #contents.eventnews span.page_prev:before{ display: inline-block; font-family: "Font Awesome 5 Free"; font-size:1.5em; } #contents.eventnews span.page_prev:before{ content: "\f104"; } #contents.eventnews span.page_next:before{ content: "\f105"; } #contents.eventnews .paging.top{ padding:8px 20px; } #contents.eventnews .paging.top .page_btn{ height:30px; width:30px; padding:5px; } /**イベント表示部**/ #contents.eventnews #event_item_lists { overflow: hidden; display: flex; flex-wrap: wrap; clear:both; margin-bottom:20px; } #contents.eventnews #event_item_lists .events_block { border:none; margin: 0px; overflow: hidden; display: flex; flex-wrap: wrap; width:100%; } #contents.eventnews #event_item_lists .events { width:50%; box-sizing: border-box; padding:15px 0; border:none; border-bottom:1px solid #aaa; } #contents.eventnews #event_item_lists .events:last-child, #contents.eventnews #event_item_lists .events:nth-last-child(2):nth-child(odd){ border-bottom:none; } #contents.eventnews #event_item_lists .events .desc { overflow: hidden; display: flex; flex-wrap:nowrap; } .pc #contents.eventnews #event_item_lists .events:nth-child(even) .desc { border-left:1px solid #aaa; padding:10px 0 10px 20px; } .pc #contents.eventnews #event_item_lists .events:nth-child(odd) .desc { padding:10px 20px 10px 0px; } #contents.eventnews #event_item_lists .events .c1 { margin-right: 15px; width:40%; } #contents.eventnews #event_item_lists .events .c2 { width:60%; } #contents.eventnews #event_item_lists .events .table01 { display: none; } #contents.eventnews #event_item_lists h4 { display: block; font-size:1.1em; font-weight:bold; margin-bottom:10px; } #contents.eventnews #event_item_lists h4 a { } #contents.eventnews #event_item_lists .events .c1 p.image { border-radius:4px; overflow: hidden; border: 4px solid #eee; box-sizing: border-box; position: relative; } #contents.eventnews #event_item_lists .events .c1 p.image:before { content: ""; display: block; padding-top: calc(3 / 4 * 100%); } #contents.eventnews #event_item_lists .events .c1 p.image img { position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height:100%; object-fit: cover; object-position: 50% 0; /*height: 136px;*/ } /*IE11のみ対応 body.pc.ua_ie11 #contents.eventnews #event_item_lists .events .c1 p.image:before { } body.pc.ua_ie11 #contents.eventnews #event_item_lists .events .c1 p.image img { width:100%; height:auto; transform: translate(0,0); top:0; left:0; } */ #contents.eventnews #event_item_lists .events .c1 p.image.noimg { display: flex; align-items: center; justify-content: center; text-align: center; /*height: 136px;*/ } #contents.eventnews #event_item_lists .events .c1 p.image.noimg a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } #contents.eventnews #event_item_lists .events .c1 p.image.noimg img{ width: auto; height: auto; max-width: 50%; } #contents.eventnews #event_item_lists .events .c2 .e_category{ background: #666; color: #fff; border-radius: 20px; padding: 7px 14px; display: inline-block; font-size: 0.9em; margin-bottom: 10px; line-height: 1.2; } /*------------------------------------------*/ /*カレンダー無のシンプル表示 /*------------------------------------------*/ #event_cal.ev_simpleview .cal_week_view_wrap, #event_cal.ev_simpleview .cal_week_notice, #event_cal.ev_simpleview .choice_hold, #event_cal.ev_simpleview .etc_select #cal_month { display:none; } /*過去のイベント表示*/ #past_eventnews .past_notice { text-align: center; border-bottom:5px solid #eee; } #past_eventnews .choice_hold { display: block; } #past_eventnews .choice_hold li{ margin:0 auto; } /* #past_eventnews #event_lists { display: flex; flex-wrap: wrap; } #past_eventnews #event_lists article.events{ border-bottom:1px dashed #ccc; overflow: hidden; padding:10px; box-sizing: border-box; width:49%; margin:0 0.5%; } #past_eventnews #event_lists article.events .image { width:100px; float: left; margin:0 20px 0 0; } #past_eventnews #event_lists article.events .image img{ width:100%; height:80px; object-fit: cover; border-radius:4px; } #past_eventnews .events .c2 .e_category{ background: #666; color:#fff; border-radius:20px; padding:4px 10px; display: inline-block; font-size:0.9em; } #past_eventnews .events .c2 { overflow: hidden; } #past_eventnews .events .c2 .name { font-weight: bold; font-size:1.1em; padding:5px 0; } */ /*---期間限定ショップ---*/ #contents.limitedshops article.events{ display: flex; flex-wrap: wrap; justify-content: space-between; margin: 40px 0; border-bottom: 4px solid #eee; padding: 0 0 40px; } #contents.limitedshops article.events:last-of-type{ padding: 0; border: none; } /*画像zone*/ #contents.limitedshops article.events .c1{ width: calc(42% - 35px); overflow: hidden; border-radius: 4px; } /*画像ないとき*/ #contents.limitedshops article.events .c1 .noimg{ border: 4px solid #eee; border-radius: 5px; height: 300px; position: relative; } #contents.limitedshops article.events .c1 .noimg a{ display: block; width: 100%; height: 100%; } #contents.limitedshops article.events .c1 .noimg a img{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } /*テキストzone*/ #contents.limitedshops article.events .c2{ width: calc(58%); } #contents.limitedshops article.events .c2 .e_category{ display: none; } #contents.limitedshops article.events .c2 .name{ font-size: 1.4em; font-weight: bold; margin: .5em 0 1em; } /*---期間限定ショップ　以上---*/ /* --------------------------------------------- イベントニュース　Pop-eventnews.jsp --------------------------------------------- */ body.pop-eventnews .item { padding:16px; margin: 0 auto 20px; overflow: hidden; max-width: 800px; } body.pop-eventnews .item .e_category{ background: #666; color: #fff; border-radius: 20px; padding: 4px 14px; display: inline-block; font-size: 0.9em; } body.pop-eventnews #contents-main .item h3{ background: #eee; border-radius: 4px; font-size: 16px; padding: 16px; margin: 16px 0 24px; border:none; } body.pop-eventnews #contents-main .item .image { margin: 0 0 24px 0; text-align: center; } body.pop-eventnews #contents-main .item .image img { border-radius: 4px; max-width: 560px; max-height: 560px; } body.pop-eventnews #contents-main .item .desc { overflow:auto; } body.pop-eventnews #contents-main .item.noimg .desc{ float: none; width:100%; } body.pop-eventnews #contents-main .item .desc .section {margin: 1.5em 0;} body.pop-eventnews #contents-main .item .desc .link{ text-align: center; } body.pop-eventnews #contents-main .item .desc .link a{ display: inline-block; padding: 10px 20px 10px 40px; margin: 40px auto 0; background: #eee; border-radius: 4px; position: relative; font-weight:bold; } body.pop-eventnews #contents-main .item .desc .link a:after { content: ""; display: block; position: absolute; top: 38%; width: 0; height: 0; border: 4px solid transparent; left: 20px; border-left: 5px solid #E84466; } body.pop-eventnews #contents-main .item .desc table.table01 th{ width:24%; text-align:left; } body.pop-eventnews #contents-main .item .desc table.table01 tr.event_join td p{ white-space: pre-wrap; } /*複数写真掲載*/ body.pop-eventnews #contents-main .item .images .image .caption_in{ display: block; width:100%; padding:5px; } body.pop-eventnews #contents-main .item.noimg .images .desc{ float: none; width:100%; } body.pop-eventnews #contents-main .item .images .subimg { display: flex; justify-content: center; text-align: center; margin:10px auto 20px; } body.pop-eventnews #contents-main .item .images .subimg li { width: 130px; height: 130px; display: inline-block; background: #eeeeee; box-sizing: border-box; text-align: center; margin: 0 5px; } body.pop-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.pop-eventnews #contents-main .item .images .subimg li img { width: 100%; height: 100%; cursor: pointer; vertical-align: middle; display: block; object-fit: cover; object-position: 50% 0; margin: 0 auto; text-align: center; } body.pop-eventnews #contents-main .item .social { border-top: 4px solid #eeeeee; margin-top: 40px; } /* ソーシャルSHAREボタン共通 */ .item .social{ margin: 0 auto; box-sizing: border-box; padding: 20px 0 0; text-align: center; } .item .social:before{ font-family: "Font Awesome 5 Free",'Baumans', sans-serif; letter-spacing: 0.05em; font-size: 18px; font-weight: bold; color: #555; content: "\f0d7　Share on!　\f0d7"; margin-bottom: 8px; display: block; } .item .social a { display: inline-block; border-right: 1px dotted #888888; overflow: hidden; width: 40px; height: 40px; line-height: 40px; padding: 0 14px 0 16px; } /*20231213 MR xlogo変更するためCSSデザインを変更する↓*/ .item .social a.twitter { padding-right: 16px; } /*20231213 MR xlogo変更するためCSSデザインを変更する↑*/ .item .social a:last-of-type { border-right: none; } .item .social a::before { font-family: "Font Awesome 5 Brands"; font-weight: 400; font-size: 40px; vertical-align: middle; margin-right: 100%; } /* 20231213 MR xlogo変更する .item .social .twitter.btn::before { content: "\f081"; color: #2696DE; } */ /*20231213 MR xlogo変更するためCSSデザインを変更する↓*/ .item .social .twitter.btn::before { content:''; width: 36px; height: 36px; background: url("../img/logo_x.svg") center center; background-repeat: no-repeat; background-size: 20px; display: block; background-color: black; border-radius: 5px; margin-top: 3px; } /*20231213 MR xlogo変更するためCSSデザインを変更する↑*/ .item .social .fb.btn::before { content: "\f082"; color: #1877f2; } .item .social .line.btn::before { content: "\f3c0"; color: #16B83A; } /*イベント一覧、カテゴリボタン*/ .ev-navi_bottom { display: flex; justify-content: center; } .ev-navi_bottom .ev_all_link, .ev-navi_bottom #btn_category { margin:5px; } .ev-navi_bottom .ev_all_link a{ background: rgb(0,164,150); color: #fff; padding: 10px 40px; border-radius: 20px; display: inline-block; } .ev-navi_bottom .ev_all_link a::before{ content: "\f053"; font-weight: bold; font-family: "Font Awesome 5 Free"; margin: 0 10px 0 -10px; } /*pop-eventnews 下部　その他イベントスライド（同一カテゴリを抽出）*/ body.pop-eventnews .other_event_list{ background: #eee; border-radius: 4px; padding:15px ; margin-bottom:30px; } body.pop-eventnews .other_event_list h2{ font-size:1.2em; font-weight:bold; padding:10px 0; } body.pop-eventnews .other_event_list .item{ width:50%; box-sizing: border-box; border:none; padding:0 ; } body.pop-eventnews .other_event_list .item .news_box { overflow: hidden; display: flex; flex-wrap:nowrap; background: #fff; padding:10px; } body.pop-eventnews .other_event_list .item p.image { margin: 0 15px 0 0; width:180px; /* height: 180px;*/ border-radius:4px; overflow: hidden; border: 4px solid #eee; box-sizing: border-box; position: relative; } body.pop-eventnews .other_event_list .item p.image:before { content: ""; display: block; padding-top: calc(3 / 4 * 100%); } body.pop-eventnews .other_event_list .item p.image img { position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height:100%; object-fit: cover; object-position: 50% 0; } body.pop-eventnews .other_event_list .item p.image.noimg{ display: flex; align-items: center; justify-content: center; text-align: center; } body.pop-eventnews .other_event_list .item p.image.noimg img{ width: auto; height: auto; max-width: 50%; } body.pop-eventnews .other_event_list .item .desc { width:auto; max-width:60%; } body.pop-eventnews .other_event_list .item h3 { background: none; display: block; font-size: 1.1em; font-weight: bold; margin: 0px; margin-bottom: 10px; text-overflow: ellipsis; white-space: nowrap; border:none; padding: 0; overflow: hidden; } body.pop-eventnews .other_event_list .item .desc .category{ background: #666; color: #fff; border-radius: 20px; padding: 7px 14px; display: inline-block; font-size: 0.9em; margin-bottom: 10px; line-height: 1.2; } body.pop-eventnews .other_event_list .item .desc .subtitle{ font-size:0.9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.pop-eventnews .other_event_list .item .desc .subtitle .event_term:before{ content: "\f274"; display: inline-block; font-family: "Font Awesome 5 Free"; margin-right:4px; } body.pop-eventnews .other_event_list .item .desc .subtitle .event_place:before{ content: "\f124"; display: inline-block; font-family: "Font Awesome 5 Free"; margin-right:4px; font-weight: 900; } body.pop-eventnews .other_event_list .no__swipe .swiper-wrapper { justify-content: flex-start; } body.pop-eventnews .other_event_list .no__swipe .swiper-wrapper article{ width:100%; max-width: none; } /* 全ページ共通 #タグ */ #h4_shopsearch_tag{ font-family: "Hind","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; font-weight: bold; text-align: center; font-size: 2em; padding: 18px 0 20px; letter-spacing: 0.05em; } #h4_shopsearch_tag::before{ content:"#"; margin: 0 3px 0 0; } .tag_list { max-width:1280px; margin:0 auto; padding: 0 20px 15px; text-align: center; } .tag_list_name { display: inline-block; margin: 0 6px 15px 0; border-radius: 100px; } .tag_list_name a { background: #fff; padding: 6px 16px; display: block; border-radius: 100px; border: 1px solid #888888; } .tag_list_name a::before{ content: "#"; margin: 0 3px 0 0; color: #e93399; font-family: 'Baumans', sans-serif; font-weight: bold; font-size: 22px; vertical-align: bottom; display: inline-block; } /* --------------------------------------------- 人気タグページ(shop/tag.jsp) --------------------------------------------- */ /*タグ　タイトル部*/ #contents.tag .tag-title { text-align: center; background: #eee; } #contents.tag .tag-title::before{ content: "#"; font-family: 'Baumans', sans-serif; color: #e93399; font-size: 22px; margin: 0px 5px 0 0; vertical-align: middle; } #contents.tag .tag-title_main{ vertical-align: middle; } #contents.tag .tag-title_count{ font-size: 16px; font-weight: bold; background: #fff; display: inline-block; width: 30px; height: 30px; box-sizing: border-box; border-radius: 50%; padding-top: 4px; margin-left: 8px; font-family: 'Baumans', sans-serif; font-weight: 700; } /*タグ　アイテムリスト*/ #contents #tag{ text-align: center; } #contents #tag .goodslist { overflow: hidden; } #contents #tag .goodslist .item { width: calc(100% / 3); height: 150px; box-sizing: border-box; margin: 10px 0 0; padding: 16px; border-left: 2px solid #eee; float: left; text-align: left; /**/ position: relative; } .pc #contents #tag .goodslist .item:nth-of-type(3n) {/*PCのみ*/ border-right: 2px solid #eee; } #contents #tag .goodslist .item .news_box { width: 100%; height: 100%; box-sizing: border-box; margin:0; } #contents #tag .goodslist .item p.image { width: 140px; /*height: 180px;*/ float: right; border-radius: 5px; /**/ position: absolute; top: 5px; right: 0; } #contents #tag .goodslist .item p.image:before { content: ""; display: block; padding-top: calc(3 / 4 * 100%); } #contents #tag .goodslist .item p.image img { position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height:100%; object-fit: cover; object-position: 50% 0; } #contents #tag .goodslist .item p.image.noimg{ display: flex; align-items: center; justify-content: center; text-align: center; } #contents #tag .goodslist .item p.image.noimg img { width: auto; height: auto; max-width: 80%; } #contents #tag .goodslist .item p.image span.img_bg_css{ border-radius:5px; } #contents #tag .goodslist .item p.image a { width: 100%; height: 100%; } #contents.tag .price_date { font-size: 10px; padding: 10px; } /*#contents #tag .date*/ #contents #tag .item .desc { width: -webkit-calc(100% - 150px); width: calc(100% - 150px); position: relative; padding: 0; } #contents #tag .ico_new2{ display: none; } #contents #tag .goodslist .item .goods { font-weight: bold; border: none; padding: 0; background: none; text-align: left; font-size: 14px;/* max-height:3.5em;*/ overflow: hidden; position: relative; margin: 5px 0 2px 0px; line-height: 20px; } #contents #tag .goodslist .item .name { font-size:12px; } #contents #tag .goodslist .item .price { display: none; font-weight: bold; font-size: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #contents #tag .goodslist .item .date { font-size:10px; } #contents #tag .goodslist .item .name { line-height: 150%; } #contents #tag .goodslist .item .name a { } #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 { background: #eee; display: inline-block; padding:5px 20px; border-radius: 20px; font-size:1.2em; font-family: "Hind","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; } #contents #tag .more-button-wrap .btn-more::before{ font-family: "Font Awesome 5 Free"; content: "\f0da"; margin: 0 8px 0 0; font-weight:bold; } /*下部に並ぶタグ一覧(×フッター)*/ #contents #tag .tag_list_name a { padding: 7px 18px; } #contents #tag .tag_list-tagname { font-weight: bold; } #contents #tag .tag_list-tagcount{ font-size: 14px; font-weight: bold; background: #f7e7f1; display: inline-block; width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; padding-top: 0; margin-left: 8px; font-family: 'Baumans', sans-serif; font-weight: 700; } /*下部に並ぶタグ一覧（tagitemlist）*/ #contents .trendtag_list{ border: 4px dotted #ccc; background: #fff; width: 100%; margin: 0 auto; box-sizing: border-box; } #contents .trendtag_list h4 { font-family: "Hind","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif; font-weight: bold; text-align: center; font-size: 22px; padding: 20px 0 18px; letter-spacing: 0.05em; } #contents .trendtag_list h4:before { content: "#"; margin: 0 5px 0 0; color: #e93399; } /*一覧へ戻るボタン*/ #contents.tag .return_list { clear: both; margin: 20px 0; line-height: 1em; text-align: center; } #contents.tag .return_list a { display: inline-block; padding: 10px 24px; border-radius: 24px; background: #eeeeee; font-size: 14px; } #contents.tag .return_list a:before { font-family: "Font Awesome 5 Free"; font-weight: bold; content: "\f0d9"; font-size: 20px; margin-right: 8px; vertical-align: middle; } body.popup #contents-main .tag_list{ margin:30px 0 20px; } /*========================================== 施設別の色指定誤#00A395　⇒　rgb(0, 163, 149) 正#00A496 　⇒rgb(0,164,150) #F09199　⇒　rgb(240,145,153) ok ==========================================*/ /*求人アイコン（l:156）*/ .ico_jobs{background: rgb(0,164,150);} /*TOPページ　文字*/ .item .image.noimg a.no_logo::before{ /*ショップニュース画像ない場合*/ color: rgb(0,164,150); } body.bf0 #event.parts dl dd a strong, body.bf0 #contents-main .parts .p_title ul li a, body.bf0 #contents-main .parts .p_title h2, body.bf0 .parts .more__btn span, body.bf0 .parts .more__btn a, body.bf0 .parts.shoplist .shop .desc dt i, body.bf0 .parts.shoplist .shop h5, body.bf0.pc #shoplist02.parts.shoplist .shop h5 { color: rgb(0,164,150); } body.bf0 #banner .swiper-pagination-bullet-active { background: rgb(0,164,150); } body.bf0 .parts.shoplist .shop .desc .sh_url a{ color: rgb(0,164,150); border-color:rgb(0,164,150); } body.bf0 #banner .swiper-pagination-bullet-active { opacity: 1; background: rgb(0,164,150); } /*フッター*/ footer #footer__sitemap { background: rgb(0,164,150); } /*イベントのカテゴリ背景*/ #contents.eventnews #event_item_lists .events .c2 .e_category{ } .ev-navi_bottom .ev_all_link a{ background: rgb(0,164,150); } #contents.eventnews .event_title_wrap h3{ color:rgb(0,164,150); } #contents.eventnews dl#btn_category dt { background: rgb(0,164,150); color: #fff; } #contents.eventnews dl#cal_month dt { background:rgb(240,145,153); color: #fff; } #contents.eventnews dl#cal_month .cal_month_view_wrap { background:rgb(240,145,153); } #contents.eventnews .paging, #contents.eventnews .cal_week_notice, #contents.eventnews .cal_week_view_wrap { background: rgba(0,164,150,0.2); } /*ショップページ文字色一括変更*/ /*----色１----*/ /*↓↓↓↓↓↓文字色に適用↓↓↓↓↓↓*/ /*トレンドタグ*/ #contents #tag .more-button-wrap .btn-more, .tag_list_name a::before, #contents.tag .tag-title::before, #contents .trendtag_list h4:before, /*見出し*/ #shoppage #shop_search h3, #shoppage .shop_header .s_h_detail h4, #shoppage #shop_info h3, #shoppage .cat_items h3, /*アイコン色*/ .shop_header .s_h_detail .eigyouhour::before, .shop_header .s_h_detail .floor::before, .shop_header .s_h_detail .tel::before, /*「フロアガイド」ボタン*/ .shop_header .s_h_detail .floor a, #shoppage #shop_info table.table01 tr.shop-map td a, /*「公式サイト」ボタン*/ #shoppage #shop_info .shop-url a, /*下部SHOP SEARCH　アイコン*/ #shoppage #shop_search ul li a:after, /*決済方法アイコン*/ #shoppage #shop_info table.table01 tr.shop-generic1 .pay__wrap em::before, /*その他*/ #shoppage article.item.cat1 .image span.noimg:before, #shoppage article.item .image a, /* id="shop_status" */ #shoppage #shop_status .category, /**/ #shoppage #shop_info table.table01 tr.shop-mail td a, #shoppage #shop_info table.table01 tr.shop-url td a, /*よくある質問*/ .faq_contents dl dt{ color: rgb(0,164,150); } /*↑↑↑↑↑↑↑↑↑*/ /*tagのカウント数背景*/ #contents #tag .tag_list-tagcount{ background: rgba(0, 164, 150, .2) } /**/ #shoppage #shop_status .button .jobs a{ background: rgb(0,164,150); } #shoppage #shop_status .category { color: rgb(0,164,150); } /*web予約ボタン*/ /*webモバイルオーダーボタン*/ #shoppage #shop_info .shop-generic7 td a, #shoppage #shop_info .shop-generic6 td a{ background-color: rgb(0,164,150); } /*公式サイトボタン*/ #shoppage #shop_info .shop-url a{ border-color: rgb(0, 164, 150); background: #fff; } /*決済方法表示*/#shoppage #shop_info table.table01 tr.shop-generic1 .pay__wrap em{ border-color: rgba(0, 164, 150, .5) } /*よくある質問「Ｑ」*/ .faq_contents dl dt::before{ background: rgb(0,164,150); } /*検索窓ボタン*/ #word_seach_box form input[type="submit"]{ background: rgb(0,164,150); } /*アクセスページ　googleマップボタン*/ body.access .sc_map_link a{ background: rgb(0,164,150); } /*----色２----*/ body.view.index.bf3 #coupon article.item .print a, #shoppage article.item.cat2 .print a, #shoppage .shop_header .s_h_detail .jobs a, #shoppage .shop_header .s_h_detail .coupon a, .view.popup.coupon article .print a{ background: rgb(240, 145, 153); } body.view.index.bf3 #coupon article.item .image span.noimg:before, #shoppage article.item.cat2 .image span.noimg:before { color:rgb(240, 145, 153); } /*半透明*/ body.view.index.bf3 #coupon article.item .fromto, #shoppage article.item.cat2 .fromto, .view.popup.coupon article .fromto{ background: rgba(240, 145, 153, .2); } /***フロアガイド　各フロアのボタン****/ body.floor ul.floorlist li a{ border:2px solid rgb(0,164,150); } body.floor ul.floorlist li a:hover{ background:rgba(0,164,150,.3); } body.floor ul.floorlist li.current a{ background:rgb(0,164,150); } /*フロアボタン色*/ body.view.index div.search table.table01 td.floor a{ background: rgb(0, 164, 150); } /*求人ボタン色*/ body.view.index.bf5 #recruit article a.window-recruit{ background: rgb(0, 164, 150); }