/* CSS Document */

/*----------------------------------------
カルチャーページ　スタイルシート
PC/SP共通
----------------------------------------*/

/*--------------------
各ページ共通
--------------------*/

/*
header
*/
.culture-header{
  background: url(bg_culture_head.png) center;
  height: 320px;
}
.header-inner{
  width: 960px;
  height: 100%;
  margin: 0 auto;
}
#contents .header-inner h2{
  background: transparent;
  margin: 0;
  padding: 25px 0 10px;
}
.pc #contents .header-inner h2{
  height: 168px;
}

/*
header ロゴ
*/
.logolist{
  display: flex;
}
.logolist_wrap{
  width: 50%;
  display: flex;
}
.logolist_li{
  width: 25%;
  padding: 0 10px;
}
.logolist_li:nth-of-type(2n){
  margin: 10px 0 0 0;
}
.logolist_li a{
  display: block;
  width: 90px;
  height: 90px;
  background: #fff;
  border-radius: 90px;
  box-shadow: 5px 5px 0 0 rgba(0,0,0,0.15);
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
.logolist_li a img {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 80%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

/*
タブ上の文章
*/
.shoplist-copy {
  font-size: 16px;
  text-align: center;
  margin: 0 0 20px;
}

/*
タブ
.tabs：タブの見た目を調整　タブの色はこのクラスで数値により指定
.contain：.tabsの子要素　タイトル画像はこのクラスの背景画像として指定
*/

/*タブのwrapper*/
#contents .culture-tab{
  width: 100%;
  margin: 0 0 20px;
  padding: 0 50px;
  box-sizing: border-box;
  border-bottom: 1px solid #565456;
}
#contents .culture-tab::after{
  display: block;
  content: "";
  clear: both;
}

/*大きいタブと小さいタブ共通*/
#contents .culture-tab .tabs{
  float: left;
  padding: 0;
  position: relative;
  margin: 0 40px -1px 0;
  width: calc(50% - 40px);
}
#contents .culture-tab .tabs .contain{
  display: block;
  width: -webkit-calc(100% + 40px);
  width: calc(100% + 40px);
  height: 100%;
  background-image: url(ttl_tab.png);
  z-index: 1;
  position: relative;
  /*以下、画像置換用*/
  overflow: hidden;
  white-space: nowrap;
  text-indent: -200%;
  text-align: left;
}

/*大きいタブ　mainTitle*/
#contents .culture-tab .tabs.mainTitle{
  background-color: #8bdada;
  border: 0 solid #565456;
  border-width: 1px 0 0 1px;
  box-sizing: border-box;
  /*以下PC*/
  height: 80px;
}
#contents .culture-tab .tabs.mainTitle::after{
  content: "";
  display: block;
  width: 40px;
  height: 100%;
  position: absolute;
  top: 0;
  right: -20px;
  background: #8bdada;
  -webkit-transform: skew(26deg);
  transform: skew(26deg);
  z-index: 0;
  box-sizing: border-box;
  border: 0 solid #565456;
  border-width: 0 1px 0 0;
}
/*調整*/
  /*エンタメ＆教室　ブルーのタブ*/
.pc #contents .tabs.mainTitle.tab01{
  width: 350px;
}
.pc #contents .tabs.mainTitle.tab01 .contain{
  background-position: -90px -30px;
}
  /*ライフスタイル　ブルーのタブ*/
.pc #contents .tabs.mainTitle.tab02{
  width: 390px;
}
.pc #contents .tabs.mainTitle.tab02 .contain{
  background-position: -420px -140px;
  width: 390px;
}

/*小さいタブ　linkTab*/
#contents .culture-tab .tabs.linkTab{
  background: #e2e4e4;
  position: relative;
  /*以下PC*/
  height: 60px;
  margin-top: 19px;
}
#contents .culture-tab .tabs.linkTab::after{
  content: "";
  display: block;
  width: 40px;
  height: 100%;
  position: absolute;
  top: 0;
  right: -20px;
  background: #e2e4e4;
  -webkit-transform: skew(34deg);
  transform: skew(34deg);
  z-index: 0;
}
#contents .culture-tab .tabs.linkTab a{
  position: relative;
  z-index:1;
  /*以下PC*/
}

/*調整*/

  /*「エンタメ＆教室」グレーのタブ*/
.pc #contents .tabs.linkTab.tab01{
  width: 290px;
}
.pc #contents .tabs.linkTab.tab01 .contain{
  background-position: -90px -160px;
}
  /*「ライフスタイル」グレーのタブ*/
.pc #contents .tabs.linkTab.tab02{ 
  width: 330px;
}
.pc #contents .tabs.linkTab.tab02 .contain{ 
  background-position: -480px -50px;
}

/*
カテゴリプルダウンメニュー
*/
#pulldown{
  position: relative;
  width: 290px;
  margin: 0 auto;
}
.pulldown_btn{
  width: 100%;
  padding: 10px 40px 10px 10px;
  margin: 0 auto;
  box-sizing: border-box;
  color: #565456;
  border: 1px solid #565456;
  background: #fff;
  text-align: center;
  cursor: pointer;
  position: relative;
  z-index: 101;
}
.pulldown_btn::after{
  width: 30px;
  font-family: "Material Symbols Outlined";
  content: "\e5c5";
  display: inline-block;
  position: absolute;
  height: 100%;
  right: 0;
  top: 0;
  line-height: 45px;
  background: #8bdada;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
}
.pulldown_btn.open::after{
  font-family: "Material Symbols Outlined";
  content: "\e5c7";
}
.category_wrap{  /*メニュー初期*/
  height: 0;
  overflow: hidden;
  transition: height 0.8s;
  position: absolute;
  top: 45px;
  background: #ccc;
  left: 0;
  z-index: 100;
  border: 1px solid #565456;
  margin: -3px 0 0 0;
  box-sizing: border-box;
  width: 100%;
}
.category_wrap.open{  /*メニューオープン時*/
  /*ここのheightはjQueryで指定します*/
  border-color: #565456;
}
.category_wrap .category {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px dashed #565456;
  height: 36px;
  line-height: 36px;
  position: relative;
}
.category_wrap .category a{
  width: 100%;
  height: 100%;
  display: block;
}
.category_wrap .category a::after {
  content: "\e5df";
  right: 10px;
  font-family: "Material Symbols Outlined";
  position: absolute;
  font-weight: bold;
  color: #565456;
  font-size:20px;
}
/*
ショップの詳細情報
*/
.itemshop{
  margin: 20px 0 0 0;
  border: 1px solid #565456;
}
.itemshop_header,
.itemshop_shopcontent,
.itemshop_shopnews{
  box-sizing: border-box;
}

/* header */
.itemshop_header{
  padding: 20px;
}
.itemshop_header .floor{
  display: inline-block;
  padding: 5px 15px;
  background: #565456;
  color: #fff;
}
.itemshop_header .name{
  margin: 18px 0 0 0;
  padding: 0 170px 0 0;
}
.itemshop_header .name a{
  margin: 0 10px 0 0;
  font-size: 20px;
  font-weight: bold;
  text-decoration: underline;
}
.itemshop_header .name .itemshop_categorydetail{
}
.itemshop_header .logo{
  width: 140px;
  height: 70px;
  line-height: 0;
  position: absolute;
  top: 20px;
  right: 30px;
}
.itemshop_header .logo img{
  max-height: 100%;
  width: auto;
}

/*shopcontent*/
.itemshop_shopcontent{
  border-top: 1px dashed #565456;
}
.pc .itemshop_shopcontent{/*PCのみ*/
  display: flex;
  flex-direction: row-reverse;
}
.pc .itemshop_shopcontent .image{
  width: 380px;
}
.pc .itemshop_shopcontent .image img{
	width: 100%;
}
.pc .itemshop_shopcontent .info{
  padding: 20px;
  box-sizing: border-box;
  width: calc(100% - 380px);
}

.itemshop_shopcontent .shop_status dl{
  width: 100%;
  border-bottom: 1px solid #565456;
  display: flex;
}
.itemshop_shopcontent .shop_status dl dt{
  background: #eee700;
  font-size: 20px;
  line-height: 40px;
  min-width: 40px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.itemshop_shopcontent .shop_status dl dt.eigyouhour:before {
	font-family: "Material Symbols Outlined";
	content: "\e8b5";
	font-size: 20px;
	
}
.itemshop_shopcontent .shop_status dl dt.tel:before {
	font-family: "Material Symbols Outlined";
	content: "\e9cd";
	font-variation-settings: 'FILL' 1;
	font-size: 20px;
}
.itemshop_shopcontent .shop_status dl dd{
  line-height: 1.5em;
  box-sizing: border-box;
  padding: 10px;
}

.itemshop_shopcontent .desc_title{
  font-size: 16px;
  margin: 20px 0 0 0;
  font-weight: bold;
}
.itemshop_shopcontent .desc_contents{
  margin: 16px 0 0 0;
}
/*ショップサービス*/
.itemshop_shopcontent .shop_service{
  background: #EEF9F9;
  padding: 10px 15px 12px 55px;
  position: relative;
  margin: 15px 0 0 0;
}
.itemshop_shopcontent .shop_service::before{
  content: "\e0e0";
  font-family: "Material Symbols Outlined";
  color: #fff;
  font-size: 22px;
  padding: 10px 8px;
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  background: #8bdada;
　font-variation-settings: 'FILL' 1;
}
.itemshop_shopcontent .service_title{
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 5px 0;
}
.itemshop_shopcontent .shop_service pre{
  font-size: 12px;
  line-height: 1.2rem;
}

/*
新着ニュース
*/
#contents-main .itemshop_shopnews .itemlist{
  display: flex;
  flex-wrap: wrap;
}
#contents-main .itemshop_shopnews h3{
  width: 100%;
  border: 0;
  background: url(ttl_shopnews.png) no-repeat center / 180px auto;
  font-size: 0;
  height: 50px;
  padding: 0;
  margin: 20px 0 0;
}
#contents-main .itemshop_shopnews .item{
  width: 20%;
  padding: 10px 20px;
  box-sizing: border-box;
  margin: 20px 0;
  border-right: 1px solid #565456;
  position: relative;
}
#contents-main .itemshop_shopnews .item:nth-of-type(5n){
  border: none;
}
#contents-main .itemshop_shopnews .item::after{
  content: "";
  width: calc(100% - 40px);
  height: 0;
  border-top: 1px solid #565456;
  position: absolute;
  bottom: -20px;
}
#contents-main .itemshop_shopnews .item.cat2 .image::before {
  content: "Coupon";
  position: absolute;
  font-family: "Dosis";
  font-weight: bold;
  letter-spacing: 1px;
  background: rgb(219, 30, 100);
  border-radius: 100px;
  padding: 0 9px 1px;
  color: #fff;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 60px;
  text-align: center;
  top: 0;
  font-size: 16px;
  z-index: 5;
}
#contents-main .itemshop_shopnews .item.cat2 .image::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: 22px;
  border-width: 7px 4px;
  border-color: #db1e64 transparent transparent transparent;
  border-style: solid;
  right: 0;
  left: 0;
  margin: 0 auto;
}
#contents-main .itemshop_shopnews .item:nth-last-of-type(-n+5)::after{
  border: none;
}

#contents-main .itemshop_shopnews .item .image{
  height: 140px;
  width: 140px;
} 
#contents-main .itemshop_shopnews .item .image .logo{  /*Logoは小さめに*/
  background-size: 80px;
  border: 1px solid #ccc;
}
#contents-main .itemshop_shopnews .item .desc .date,
#contents-main .itemshop_shopnews .item .desc .sale.icon{
  display: none;
}
#contents-main .itemshop_shopnews .item h4{
  margin: 10px 0 0 0;
  font-weight: bold;
}
#contents-main .itemshop_shopnews .item .price,
#contents-main .itemshop_shopnews .item .fromto{
  margin: 5px 0 0 0;
  font-size: 12px;
}

#contents-main .itemshop_shopnews .item .morelink{
  display: none;
}

.itemshop_shopnews .itemlist{
  border-top: 1px dashed #565456;
  background: url(bg_culture_head.png);
}
.itemshop_shopnews .item{
  position: relative;
}
.itemshop_shopnews .img_bg_css.no_img_logo{
  background-color: #fff;
}



/*----------------------------------------
スマートフォン対象
----------------------------------------*/

/*--------------------
各ページ共通
--------------------*/

/*
header
*/
.sp .culture-header{
  height: 150px;
  background-size: 40px;
}
.sp .header-inner{
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 16px;
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
}
.sp #contents .header-inner h2{
  padding: 12px 0 8px;
  box-sizing: border-box;
  height: 90px;
}
.sp #contents .header-inner h2 img{
  width: 245px;
  max-height: 100%;
}

/*
headerロゴ
*/
.sp .logolist_li {
  width: -webkit-calc(100% / 3);
  width: calc(100% / 3);
  box-sizing: border-box;
  padding: 0;
}
.sp .logolist_li:nth-of-type(2n) {
  margin: 0;
}
/*奇数番目のwrap内にある偶数番目のli、
偶数番目のwrap内にある奇数番目のli*/
.sp .logolist_wrap:nth-of-type(2n-1) .logolist_li:nth-of-type(2n),
.sp .logolist_wrap:nth-of-type(2n) .logolist_li:nth-of-type(2n-1){
  margin: 5px 0 0 0;
}
.sp .logolist_li a{
  width: 45px;
  height: 45px;
  margin: 0 auto;
  box-shadow: 2px 2px 0 0 rgba(0,0,0,0.15);
}

/*
タブ上の文章
*/
.sp .shoplist-copy {
  font-size: 12px;
}

/*
タブ
*/
.sp #contents .culture-tab{
  width: 100%;
  margin: 0 -16px 20px;
  box-sizing: content-box;
  padding: 0 16px;
}

/*タブ共通*/
.sp #contents .culture-tab .tabs{
  margin: 0 20px -1px 0;
}
.sp #contents .culture-tab .tabs .contain{
  width: -webkit-calc(100% + 20px);
  width: calc(100% + 20px);
  background-size: 480px;
}

/*大きいタブ　mainTitle*/
.sp #contents .culture-tab .tabs.mainTitle {
  width: -webkit-calc(55% - 20px);
  width: calc(55% - 20px);
  height: 50px;
}
.sp #contents .culture-tab .tabs.mainTitle::after{
  right: -10px;
  width: 20px;
  -webkit-transform: skew(22deg);
  transform: skew(22deg);
}
/*調整*/
.sp #contents .tabs.mainTitle.tab01 .contain{
  background-position: center -116px;
}
.sp #contents .tabs.mainTitle.tab02 .contain{
  background-position: center -171px;
}

/*小さいタブ　linkTab*/
.sp #contents .culture-tab .tabs.linkTab {
  width: -webkit-calc(45% - 20px);
  width: calc(45% - 20px);
  height: 40px;
  margin-top: 9px;
}
.sp #contents .culture-tab .tabs.linkTab::after{
  right: -10px;
  width: 20px;
  -webkit-transform: skew(26deg);
  transform: skew(26deg);
}
/*調整*/
.sp #contents .tabs.linkTab.tab01 .contain{
  background-position: center -290px;
}
.sp #contents .tabs.linkTab.tab02 .contain{
  background-position: center -235px;
}

/*
プルダウン
*/
.sp #pulldown{
  width: 280px;
}
.sp .pulldown_btn {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  padding: 5px 40px 5px 5px;
}
.sp .pulldown_btn::after {
  line-height: 32px;
}
.sp .category_wrap{
  top: 35px;
}
.sp .category_wrap .category a{
  font-size: 11px;
}

/*
.itemshop
*/
.sp #contents .itemshop{
}
.sp #contents .itemshop_header{
  padding: 10px;
}
.sp #contents .itemshop_header .floor{
  padding: 2px 10px;
  font-size: 0.8em;
}
.sp #contents .itemshop_header .name{
  margin: 10px 0 0 0;
  padding: 0 80px 0 0;
}
.sp #contents .itemshop_header .name a{
	font-size: 16px;
}
.sp #contents .itemshop_header .name .itemshop_categorydetail{
  display: block;
}
.sp #contents .itemshop_header .logo {
  width: 70px;
  height: 35px;
  line-height: 0;
  top: 15px;
  right: 10px;
  left: none;
  left: auto;
  bottom: auto;
}

.sp #contents .itemshop_shopcontent .info{
  padding: 10px;
}

.sp #contents .itemshop_shopcontent .shop_status dl dt{
  font-size: 15px;
  line-height: 30px;
  width: 30px;
}
.sp #contents .itemshop_shopcontent .shop_status dl dd{
  line-height: normal;
  font-size: 0.8em;
  padding: 6px 8px;
}

/*
新着ニュース
*/
.sp #contents .itemshop_shopnews{
  background-size: 40px 40px;
}
.sp #contents .itemshop_shopnews h3{
  background-size: auto 25px;
  height: 50px;
  margin: 10px 0 0;
}
.sp #contents .itemshop_shopnews .itemlist{
  padding: 0 0 15px 0;
}
.sp #contents .itemshop_shopnews .item{
  width: calc(100% / 3);
  padding: 5px 10px;
  box-sizing: border-box;
  margin: 10px 0;
  border-right: 1px solid #565456;
  position: relative;
}
.sp #contents .itemshop_shopnews .item.swiper-slide-next + .item{
  border: 0;
}
.sp #contents .itemshop_shopnews .item .image {
  width: 100%;
  height: 95px;
}
.sp #contents .itemshop_shopnews .item::after{
  display: none;
}
/*desc*/
.sp #contents-main .itemshop_shopnews .item h4 {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp #contents-main .itemshop_shopnews .item h4 a {
}
.sp #contents-main .itemshop_shopnews .item .price,
.sp #contents-main .itemshop_shopnews .item .fromto {
  font-size: 10px;
  line-height: 1.4em;
  margin: 0;
}

.sp #contents-main .itemshop_shopnews .item .morelink{
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.sp #contents-main .itemshop_shopnews .item .morelink span{
  display: none;
}
/*
---------------------------------------------
カルチャーガイドのスライド
---------------------------------------------
*/
.swiper-container {
	margin-left: auto;
	margin-right:auto;
	position:relative;
	overflow: hidden;
	z-index:1;
}