@charset "UTF-8";

/* -----------------------
	共通レイアウト
------------------------*/
.wrapper{
    min-width: 1000px;
    overflow-y: hidden;	
}

.wrapper .pane-contents{
	width: 100%;
	max-width: 100%;
}

.block-top-event,
.block-top-free-2,
.block-top-free-1,
.block-top-free-4,
.pane-right-menu{
	/* max-width: 1200px;
	margin: 0 auto; */
}

.g-cont-inner{
	max-width: 1200px;
	margin: 0 auto;
}

.page-top .block-top-event,
.page-top .block-top-topic{display: none;}

/* -----------------------
	共通スタイル
------------------------*/
.g-sec{
	padding: 100px 0;
}

.g-common-head{text-align: center;}
.g-common-head h2{
	font-size: 26px;
	font-weight: 600;
	margin: 0;
}

.g-common-head h2 span{
	display: block;
	font-size: 14px;
	font-weight: 400;
	color: #999;	
}

/* ボタン */
.g-common-btn{margin-top: 38px;}
.g-common-btn a{
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 320px;
	height: 50px;
	border-radius: 50px;
	margin: 0 auto;
	background: #000;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
}

.g-common-btn a:after{
	position: absolute;
    content: "";
    right: 30px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: solid 2px #fff;
    border-bottom: solid 2px #fff;
    border-radius: 1px;
	transform: translate(0, -50%) rotate(-45deg);	
}

.g-common-btn a:hover{
	opacity: 0.8;
    transition: all 0.1s;
	text-decoration: none;
}

/* ブランドタブ */
.g-common-tab{
	display: flex;
    width: 470px;
    margin: 42px auto 0;
	gap: 10px;
}

.g-common-tab .g-common-tab-item{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
    width: calc(100% / 3);
	border-radius: 5px;
	border: solid 1px #ddd;
	min-height: 70px;
	cursor: pointer;
	background: #fff;
	padding: 0px 1px;
}

.g-common-tab .g-common-tab-sa img{width: 70px;}
.g-common-tab .g-common-tab-cns img{width: 81px;}
.g-common-tab .g-common-tab-otb img{width: 51px;}

.g-common-tab .g-common-tab-item.active{
	border: solid 2px #000;
	padding: 0;
}
.g-common-tab .g-common-tab-item.active::before,
.g-common-tab .g-common-tab-item.active::after{
	position: absolute;
    content: "";
    left: 50%;
    transform: translate(-50%, 0);
    border-top-width: 16px;
    border-top-style: solid;
    border-right: 8px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 8px solid transparent;
}

.g-common-tab .g-common-tab-item.active::after {
    bottom: -31px;
    border-top-color: #000;
    z-index: 1;
}

.g-common-tab .g-common-tab-item.active::before{
    bottom: -28px;
    border-top-color: #fff;
    z-index: 2;
}

.g-common-tab-content{margin-top: 30px;}

.g-common-tab-label,
.u-tab-panel{display: none;}
.g-common-tab-label.active,
.u-tab-panel.active{display: block;}

/* サブタブ */
.g-common-sub-tab{
	display: flex;
    gap: 0 3px;
    width: 500px;
	max-width: 500px;
    height: 40px;
    margin: 30px auto 30px auto;
    background: #fff;
    text-align: center;
    padding: 3px;
    border-radius: 5px;
}

.g-common-sub-tab.g-common-sub-tab-3col .g-tab-list{width: calc(100% / 3);}
.g-common-sub-tab.g-common-sub-tab-2col .g-tab-list{width: calc(100% / 2);}
.g-common-sub-tab .g-tab-list{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;	
}

.g-common-sub-tab .g-tab-list.active{
	background: #FF0000;
	color: #fff;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
}

/* カテゴリ */
.sec-category .g-sec{background: #F6F6F6;}
.g-common-category-list{
	display: flex;
	flex-wrap: wrap;
	gap: 21px 25px;
}

.g-common-category-list.g-common-category-list-cen{justify-content: center;}

.g-common-category-list li{
	width: calc(100% / 7 - 22px);
	min-width: 140px;
}

.g-common-category-list li a{text-decoration: none;}
.g-common-category-list li a:hover{
	opacity: 0.8;
    transition: all 0.1s;	
}

.g-common-category-list li span{
	margin-top: 5px;
	display: block;
	font-size: 12px;
	text-align: center;
}

.g-common-category-list img{border-radius: 8px;}

/* ajax */
.u-ajax-common-list{
	display: flex;
	gap: 0 15px;
}

.u-ajax-common-list-item{width: calc(100% / 5);}
.u-ajax-common-list-item a{
	text-decoration: none;
	display: block;
}

.u-ajax-common-list-item img{border-radius: 8px;}
.u-ajax-common-txt{
	font-size: 14px;
	font-weight: 400;
	margin-top: 10px;
}

.g-brand-shop-area{background: #F6F6F6;}


.sec-category .g-common-tab-category .g-common-sub-tab{
	width: 746px;
	max-width: 746px;
	border: solid 1px #ddd;
}

/* -----------------------
	ajax部分
------------------------*/
.g-common-ajax-inner{
	max-width: 1200px;
	margin: 0 auto;
}

/* -----------------------
	メインスライダー
------------------------*/
.block-top-body{position: relative;}
.main-slider {
  width: 100%;
  opacity: 0;
  margin-top: 20px;
  padding-bottom: 50px;
  position: relative;
  overflow: hidden;
  margin-bottom: 80px;
}

.main-slider.is-loaded {opacity: 1;}
.main-slider .slick-list {overflow: visible !important;}
.main-slider .slick-track {
  float: none;
  display: flex;
  left: 0;
  gap: 10px;
}

.main-slider .slick-slide img {
	width: 480px;
	border-radius: 8px;
}
.main-slider .slick-slide > div {display: flex;}
.slide-item-wrap {
  display: flex !important;
  gap: 10px;
}

/* dot */
.main-slider .slick-dots {
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  margin-top: 20px;
  gap: 10px;
}

.main-slider .slick-dots li {
  overflow: hidden;
  width: 30px;
  height: 3px;
  cursor: pointer;
  background: #ddd;
}

.main-slider .slick-dots .slick-active {
  height: 6px;
  background: var(--sa-color);
}

.main-slider .slick-dots li button {
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  text-indent: -999px;
  border: none;
  outline: none;
  background: transparent;
  appearance: none;
}

/* arrow */
.main-slider .slick-arrow {
  cursor: pointer;
  overflow: hidden;
  width: 26px;
  height: 26px;
  border: none;
  outline: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  text-indent: -9999px;
  bottom: 0;
  left: 50%;
  z-index: 2;
}

.main-slider .slick-prev {
	background: url(../../img/usr/pc/common/brand_slider_prev.png) no-repeat;
    transform: translate(-50%, 0);
    left: calc(50% - 45px);
}

.main-slider .slick-next {
  background: url(../../img/usr/pc/common/brand_slider_next.png) no-repeat;
  transform: translate(-50%, 0);
  left: calc(50% + 45px);
}

.main-slider .slick-slide a{outline: 0;}

.slider-pager{
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    position: absolute;
	bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

/* -----------------------
	インフォメーション
------------------------*/
.g-brand-info-area{
	background: #F6F6F6;
	padding: 100px 0;
}

.g-brand-info-inner{
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
	gap: 23px;
}

.g-brand-info-item{
	width: calc(100% / 3 - 16px);
	background-color: #fff;
	border-radius: 8px;
	padding: 60px 30px 45px;
	text-align: center;
	min-width: 360px;
}

.g-brand-info-comment{
	margin-top: 18px;
	min-height: 45px;
}

.g-brand-info-comment p{
	font-size: 14px;
	font-weight: 600;
}

.g-brand-info-comment span{
	display: block;
	margin-top: 10px;
	font-size: 12px;
	font-weight: 400;
}

.g-brand-info-img figure{
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.g-brand-info-btn{
	margin-top: 20px;
	padding: 0 15px;
}

.g-brand-info-btn a{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 500;
	border:solid 1px #ccc;
	height: 50px;
	width: 100%;
	border-radius: 50px;
	position: relative;
	margin-top: 13px;
	text-decoration: none;
}

.g-brand-info-btn a:hover{
    opacity: 0.8;
    transition: all 0.1s;	
}

.g-brand-info-btn a:before{
	position: absolute;
    content: "";
	right: 24px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: solid 2px #000;
    border-bottom: solid 2px #000;
    border-radius: 1px;
    transform: translate(0, -50%) rotate(-45deg);
}

.g-brand-info-btn a.g-brand-info-btn-cart:after,
.g-brand-info-btn a.g-brand-info-btn-store:after{
	position: absolute;
    content: "";
    top: 50%;
    transform: translate(0, -50%);	
}

.g-brand-info-btn a.g-brand-info-btn-cart:after{
	background: url(../../img/usr/top/icon_cart.png) no-repeat;
	left: 24px;
	width: 23px;
	height: 22px;
}

.g-brand-info-btn a.g-brand-info-btn-store:after{
	background: url(../../img/usr/top/icon_position.png) no-repeat;
	left: 28px;	
	width: 17px;
	height: 23px;
}

/* -----------------------
	公式アカウント
------------------------*/
.g-official-account-list{margin-top: 30px;}
.g-official-account-inner ul{
	display: flex;
	justify-content: center;
}

.g-official-account-inner ul li{
	text-align: center;
	width: calc(100% / 3);
	border-right: solid 1px #ddd;
}

.g-official-account-inner ul li:nth-child(3n){border: none;}
.g-official-account-inner ul li figure{
	min-height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.g-official-account-name{
	font-size: 14px;
	font-weight: 600;
	margin-top: 18px;
}

.g-official-account-text{
	font-size: 12px;
	font-weight: 400;
	margin-top: 18px;	
}

.g-official-account-sns{
	margin-top: 16px;
	display: flex;
	gap: 10px;
	justify-content: center;	
}

/* -----------------------
	お知らせ
------------------------*/
.u-ajax-info{
	margin-top: 25px;	
	border-bottom: dashed 1px #CBCBCB;
	padding: 0 8px;
}

.u-text-link{
	display: block;
	padding: 25px 20px 25px;
	text-decoration: none;
}

a.u-text-link:hover{
	opacity: 0.8;
    transition: all 0.1s;
	text-decoration: none;
}

.u-ajax-info-tr{border-top: dashed 1px #CBCBCB;}
.u-ajax-info-th{
	display: flex;
	align-items: center;
}

.u-ajax-info-th .u-ajax-info-date{
	font-size: 16px;
    font-weight: 600;
	margin-right: 10px;
}

.u-ajax-info-td{
	margin-top: 12px;
	font-size: 14px;
    font-weight: 400;
}

.u-ajax-info-label {
	border-radius: 3px;
    border: 1px solid #ddd;
    color: #999;
    width: max-content;
    padding: 4px 10px;
    box-sizing: border-box;
    display: inline-block;
	font-size: 12px;
	font-weight: 400;
	color: #000;	
}

.u-ajax-info-label.u-ajax-info-label-news_important{
	border: 1px solid #FF0000;
	color: #FF0000;
}

/* -----------------------
	店舗検索
------------------------*/
.block-top-scroll-store-search{
    position: relative;
	height: 625px;
    min-height: 625px;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    z-index: 1;
	background-image: url("../../img/usr/top/sc_bg.jpg");	
}

.block-top-scroll-store-search .block-top-scroll-store-search-inner{
	text-align: center;
	padding-top: 110px;
}

.block-top-scroll-store-search .block-top-scroll-store-search-inner h2{
	color: #fff;
	font-size: 26px;
    font-weight: 600;	
}

.block-top-scroll-store-search .block-top-scroll-store-search-inner h2 span{
	display: block;
	font-size: 14px;
    font-weight: 400;		
}

.block-top-scroll-store-search .block-header-search--search-frame{
    position: relative;
    width: 100%;
    height: 36px;
    border-radius: 18px;
    border: 1px solid #CCC;
    background: #FFF;	
}

.block-top-scroll-store-search input.block-top-scroll-store-search--keyword{
    width: 100%;
    padding: 2px 110px 6px 55px;
    vertical-align: top;
    border: none;
    background: transparent;
	font-size: 18px;
	box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .025);	
}

.block-top-scroll-store-search a.block-top-scroll-store-search-list-btn{
	position: relative;
	display: inline-block;
	background: #fff;
	border: solid 1px #ccc;
	color: #000;
	width: 320px;
	font-size: 16px;
	padding: 15px 0;
	margin-bottom: 36px;
    margin-top: 36px;
	border-radius: 50px;	
}

.block-top-scroll-store-search a.block-top-scroll-store-search-list-btn:hover{
    opacity: 0.8;
    transition: all 0.1s;
	text-decoration: none;	
}

.block-top-scroll-store-search a.block-top-scroll-store-search-list-btn:after{
	position: absolute;
	content: "";
	right: 20px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: solid #000 2px;
	border-bottom: solid #000 2px;
	transform: translate(0, -50%) rotate(-45deg);
	border-radius: 1px;
}

.block-top-scroll-store-search a.block-top-scroll-store-search-list-btn:before{
	position: absolute;
	content: "";
	left: 28px;
	top: 0;
	top: 50%;
	width: 17px;
	height: 23px;
	background: url(../../img/usr/top/icon_position.png) no-repeat;
	transform: translate(0, -50%);	
}

.block-top-scroll-store-search a span{position: relative;}
.block-top-scroll-store-search a span:after{position: absolute;}
.block-top-scroll-store-search-form{
    position: relative;
	max-width: 600px;
    width: 100%;
    height: 50px;
    border-radius: 50px;
    border: 1px solid #CCC;
    background: #FFF;
    margin: 0 auto;
	box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .1);	
}

.block-top-scroll-store-search-form .search-img{
	position: absolute;
    top: 14px;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 1;	
}

.block-top-scroll-store-search-form .block-top-scroll-store-search--keyword{height: 50px;}

.block-top-scroll-store-search-list ul{
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 20px;
}
.block-top-scroll-store-search-list ul li{
	width: 520px;
	padding-right: 20px;
	margin-bottom: 10px;
}
.block-top-scroll-store-search-list ul li:last-child{margin-right: 0;}
.block-top-scroll-store-search-list ul li a{
	position: relative;
	display: flex;
	align-items: center;
	padding: 20px;
	background: #fff;
	border-radius: 8px;
}

.block-top-scroll-store-search-list ul li a:after{
	position: absolute;
	content: "";
	right: 30px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: solid 2px #000;
	border-bottom: solid 2px #000;
	transform: rotate(-45deg);
	border-radius: 1px;	
}

.block-top-scroll-store-search-list ul li a:hover{text-decoration: none;}
.block-top-scroll-store-search-list ul li a:hover .block-top-scroll-store-search-list-desc{text-decoration: underline;}
.block-top-scroll-store-search-list ul li a figure{
	display: inline-block;
	min-width: 120px;
	max-width: 120px;
} 
.block-top-scroll-store-search-list ul li a > div{
	display: inline-block;
	text-align: left;
	padding: 0 10px 0 20px;
} 

.block-top-scroll-store-search-list ul li a .block-top-scroll-store-search-list-ttl{
	display: block;
	color: #EA0D29;
	font-size: 18px;
	font-weight: 600;
    margin-bottom: 2px;	
}

.block-top-scroll-store-search-list ul li a .block-top-scroll-store-search-list-desc{
	display: block;
	font-size: 18px;
	font-weight: 400;
    line-height: 1.4;	
}

.block-top-scroll-store-search .block-top-scroll-store-search--submit {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 100px;
    height: 40px;
    padding: 0;
    background: #222;
    color: #FFF;
    text-align: center;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 4px;
	border: none;
    vertical-align: top;	
}

.block-top-scroll-store-search .block-top-scroll-store-search--submit:hover{
	opacity: 0.8;
	transition: all 0.1s;
}


/* -----------------------
	スタッフスタート
------------------------*/
.section-staffsnap .coordinate-list .card-list-frame{gap: 0 15px;}
.section-staffsnap .coordinate-list .coordinate-item{
    flex-basis: 228px;
	width: 228px;
	margin-right: 0;
	min-width: 228px;
}

.section-staffsnap .coordinate-list .coordinate-item .coordinate-item--main-img figure{width: 228px;}
.section-staffsnap .coordinate-list .coordinate-item .coordinate-item--main-img img{
	border-radius: 8px;
	width: 228px;	
}

/* ------------------ topic ------------------------ */
.page-top .block-top-topic {
	width: 960px;
	margin: 0 auto;
	padding: 0;
	background: #fff;
}

.page-top .block-top-topic h2.block-top-topic--header {display: none;}
.page-top .block-top-topic .block-top-topic--body {
	position: relative;
	width: 960px;
}

.page-top .block-top-topic .block-top-topic--body a.bx-prev {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 40px;
  height: 56px;
  justify-content: center;
  align-items: center;
  text-indent: -9999px;
  background: #FFF;
}

.page-top .block-top-topic .block-top-topic--body a.bx-prev::after {
  display: block;
  width: 7px;
  height: 7px;
  border-left: 2px solid #222;
  border-bottom: 2px solid #222;
  transform: rotate(45deg);
  content: "";
}

.page-top .block-top-topic .block-top-topic--body a.bx-next {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  width: 40px;
  height: 56px;
  justify-content: center;
  align-items: center;
  text-indent: -9999px;
  background: #FFF;
}

.page-top .block-top-topic .block-top-topic--body a.bx-next::after {
  display: block;
  width: 7px;
  height: 7px;
  border-right: 2px solid #222;
  border-bottom: 2px solid #222;
  transform: rotate(-45deg);
  content: "";
}

.page-top .block-top-topic ul.block-top-topic--items li {
  padding: 0;
  text-align: center;
  border: 0;
}

.page-top .block-top-topic ul.block-top-topic--items li dl {
  display: flex;
  width: 100%;
  height: 56px;
  justify-content: center;
  align-items: center;
}

.page-top .block-top-topic ul.block-top-topic--items li dl dt {display: none;}
.page-top .block-top-topic ul.block-top-topic--items li dl dd,
.page-top .block-top-topic ul.block-top-topic--items li dl dd a {
  color: #E83434;
  font-size: 14px;
}

.page-top .block-top-topic ul.block-top-topic--items li dd {
  margin: 0;
  padding: 0;
}