@charset "UTF-8";

:root {
	--g-color-red: #F03737;
	--g-color-bg:  #F8F8F8;
	--g-color-btn: #333333;
	--g-transition: 0.3s;
}
.genre-size {
	font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	overflow: hidden;
}
.genre-size * { box-sizing: border-box;}
.genre-size a { text-decoration: none;}
.genre-size img { vertical-align: bottom;}
.genre-size h1,
.genre-size h2,
.genre-size h3 { padding: 0; margin: 0;}

.genre-size .genre-block-title { padding: 0; margin: 0 0 40px; border: none; font-size: 20px; font-weight: 700; text-align: center;}
.genre-size .genre-block-title span { margin: 5px 0 0; font-size: 16px; font-weight: 700; text-align: center; color: var(--g-color-red); display: block;}

@media only screen and (min-width: 750px) { 
	.genre-size .for-sp { display: none !important;}
  .genre-size { width: 900px; margin: 0 auto;}
}
@media only screen and (max-width: 749px) {
	.genre-size .for-pc { display: none !important;}
  .genre-size { width: 100%; padding: 0;}
	.genre-size .genre-block-title { margin: 0 0 30px; font-size: 18px;}
	.genre-size .genre-block-title span { font-size: 14px;}
}

/*-----------------------------------------
 見出し
-----------------------------------------*/
.genre-size #sec_head {
	margin-bottom: 50px;
}
.genre-size #sec_head .genre-size-title {
	border-bottom: 2px solid #707070;
	font-size: 30px;
	font-weight: bold;
	line-height: 1;
	padding-bottom: 14px;
	margin-bottom: 20px;
}
.genre-size #sec_head .genre-size-title > span {
	font-size: 24px;
	font-weight: inherit;
	line-height: inherit;
}
.genre-size #sec_head .genre-size-mv {
	margin-bottom: 40px;
}
.genre-size #sec_head .genre-size-lead {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
	text-align: center;
}
.genre-size #sec_head .genre-size-lead-appeal {
	color: #f03737;
	font-size: 18px;
	font-weight: bold;
	line-height: calc(30 / 18);
}
.genre-size #sec_head .genre-size-lead-text {
	font-size: 18px;
	font-weight: 500;
	line-height: calc(30 / 18);
}
@media only screen and (max-width: 749px) {
	.genre-size #sec_head {
		display: flex;
		flex-direction: column;
		margin-bottom: calc(32 / 414 * 100vw);
	}
	.genre-size #sec_head .genre-size-title {
		border-bottom: none;
		font-size: calc(26 / 414 * 100vw);
		text-align: center;
		padding-bottom: 0;
		padding-inline: calc(15 / 414 * 100vw);
		margin-bottom: calc(38 / 414 * 100vw);
	}
	.genre-size #sec_head .genre-size-title > span {
		font-size: calc(20 / 414 * 100vw);
	}
	.genre-size #sec_head .genre-size-mv {
		order: -1;
		margin-bottom: calc(26 / 414 * 100vw);
	}
	.genre-size #sec_head .genre-size-lead {
		row-gap: calc(6 / 414 * 100vw);
		padding-inline: calc(15 / 414 * 100vw);
	}
	.genre-size #sec_head .genre-size-lead-appeal {
		font-size: calc(16 / 414 * 100vw);
		line-height: calc(28 / 16);
	}
	.genre-size #sec_head .genre-size-lead-text {
		font-size: calc(16 / 414 * 100vw);
		line-height: calc(28 / 16);
	}
}

/*-----------------------------------------
 容量で選ぶ
-----------------------------------------*/
.genre-size #sec_size { padding: 50px 80px; margin: 0 0 50px; background: var(--g-color-bg);}
.genre-size #sec_size .size-list { display: flex; flex-wrap: wrap; column-gap: 30px;}
.genre-size #sec_size .size-list li { width: calc((100% - 30px * 2)/3); min-height: 48px; margin: 0 0 14px; align-self: stretch;}
.genre-size #sec_size .size-list li a {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  border: #FFF 1px solid;
  border-radius: 4px;
  background: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
	transition: var(--g-transition);
}
.genre-size #sec_size .size-list li a:hover { border: var(--g-color-red) 1px solid;}
.genre-size #sec_size .size-list li a dl { display: flex; justify-content: center; align-items: center; column-gap: 10px;}
.genre-size #sec_size .size-list li a dt { font-size: 20px; font-weight: 700;}
.genre-size #sec_size .size-list li a dd { font-size: 13px; font-weight: 500;}
.genre-size #sec_size .size-pop-button   { width: 260px; margin: calc(40px - 14px) auto 0;}
.genre-size #sec_size .size-pop-button a {
  width: 100%;
  height: 67px;
	border: var(--g-color-btn) 2px solid;
	border-radius: 4px;
  font-size: 15px;
  font-weight: 700;
	text-decoration: none;
  color: #FFF;
  display: flex;
	justify-content: center;
	align-items: center;
  background: var(--g-color-btn);
	transition: var(--g-transition);
}
.genre-size #sec_size .size-pop-button a:hover { color: var(--g-color-btn); background: #FFF;}

@media only screen and (max-width: 749px) {
	.genre-size #sec_size { padding: 16px 0 24px; margin: 0 0 35px;}
		.genre-size #sec_size .size-list {
			flex-wrap: nowrap;
			gap: 8px;
			overflow-x: auto;
			padding-bottom: 10px;
			padding-inline: 40px;
			margin-bottom: 10px;
		}
	.genre-size #sec_size .size-list li { flex-shrink: 0; width: auto; margin: 0;}
	.genre-size #sec_size .size-list li a { padding-inline: 15px;}
	.genre-size #sec_size .size-list li a dl { column-gap: 5px;}
	.genre-size #sec_size .size-list li a dt { font-size: 18px; word-break: keep-all;}
	.genre-size #sec_size .size-list li a dd { font-size: 12px; word-break: keep-all;}
	.genre-size #sec_size .size-pop-button   { width: auto; margin: 0 40px;}
	.genre-size #sec_size .size-pop-button a { height: 48px; font-size: 16px;}
}

/*-----------------------------------------
 ランキング（関連子イベント）
-----------------------------------------*/
.genre-size #sec_ranking { padding: 0; margin: 0 0 50px;}
.genre-size #sec_ranking h2.block-top-event--header { display: none;}
.genre-size #sec_ranking .block-top-event--goods { margin-bottom: 0;}
.genre-size #sec_ranking .block-ranking-r { width: auto; padding: 0; margin: 0; border: none;}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items { padding: 0; margin: 0; border: none; display: flex; flex-wrap: nowrap;}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items li { width: 170px; padding: 0; margin-bottom: 40px;}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--price-infos { text-align: left;}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--price-items { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px;}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--price { text-align: left;}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items .default-price { font-size: 11px; font-weight: 500; color: #B2B2B2;}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items .default-price .price-small { display: none;}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--goods-description .customize_block-goods-bookmark { top: 125px;}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--scomment { font-size: 10px;}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--goods-image .block-ranking-r--rank {
	width: 32px;
	height: 40px;
	border: none;
	border-radius: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 19px;
	font-weight: 700;
	color: #fff;
	justify-content: center;
	align-items: center;
	display: none;
	top: 0;
	left: 12px;
	right: auto;
	z-index: 2;
}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--goods-image .block-ranking-r--rank::before {
	content: '';
	width: 32px;
	height: 10px;
	border-left: #000 16px solid;
	border-right: #000 16px solid;
	border-bottom: transparent 10px solid;
	display: block;
	position: absolute;
	left: 0;
	bottom: -10px;
}
.genre-size #sec_ranking .block-ranking-r .block-icon .block-icon--auto-new.block-icon-blue { display: none;}
.genre-size #sec_ranking .block-ranking-r .block-icon .block-icon--auto-on-sales { left: auto; right: 7px;}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--rank.block-ranking-r--rank-1 { background-color: #BBAA71; display: flex;}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--rank.block-ranking-r--rank-2 { background-color: #7E8183; display: flex;}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--rank.block-ranking-r--rank-3 { background-color: #BB7171; display: flex;}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--rank.block-ranking-r--rank-1::before { border-left-color: #BBAA71; border-right-color: #BBAA71;}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--rank.block-ranking-r--rank-2::before { border-left-color: #7E8183; border-right-color: #7E8183;}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--rank.block-ranking-r--rank-3::before { border-left-color: #BB7171; border-right-color: #BB7171;}

.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--item.block-ranking-r--goods-rank-1 .block-ranking-r--rank { background-color: #BBAA71; display: flex;}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--item.block-ranking-r--goods-rank-2 .block-ranking-r--rank { background-color: #7E8183; display: flex;}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--item.block-ranking-r--goods-rank-3 .block-ranking-r--rank { background-color: #BB7171; display: flex;}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--item.block-ranking-r--goods-rank-1 .block-ranking-r--rank::before { 
	border-left-color: #BBAA71; border-right-color: #BBAA71;
}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--item.block-ranking-r--goods-rank-2 .block-ranking-r--rank::before {
	border-left-color: #7E8183; border-right-color: #7E8183;
}
.genre-size #sec_ranking .block-ranking-r .block-ranking-r--items .block-ranking-r--item.block-ranking-r--goods-rank-3 .block-ranking-r--rank::before {
	border-left-color: #BB7171; border-right-color: #BB7171;
}

@media only screen and (max-width: 749px) {
	.genre-size #sec_ranking { padding: 0 0 0 35px; margin-bottom: 32px;}
	.genre-size #sec_ranking h2.genre-block-title { padding-right: 35px;}
	.genre-size #sec_ranking .block-top-event--goods { margin-bottom: 0;}
	.genre-size #sec_ranking .block-ranking-r--items .block-ranking-r--goods-name {
		max-height: 15px * 1.4 * 3;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
	.genre-size #sec_ranking .swiper-scrollbar.swiper-scrollbar-horizontal { width: calc(98% - 35px);}
}

/*-----------------------------------------
 モーダル
-----------------------------------------*/
@media only screen and (min-width: 750px) { 
	.for-sp { display: none !important;}
}
@media only screen and (max-width: 749px) {
	.for-pc{ display: none !important;}
}
.modaal-content-container { padding: 0;}
.modalCnts { display: none;}

/*modalBtn*/
.modalBtn { padding: 0; border: none; background: #E5E5E5; position: absolute; top: 0; right: 0; cursor: pointer;}
.icon-close { width: 40px; height: 40px; padding: 10px; color: #444; display: block; position: relative; box-sizing: border-box;}
.icon-close:before,
.icon-close:after { content: ""; width: 20px; height: 2px; margin: auto; background-color: currentColor; position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
.icon-close:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.icon-close:after { -webkit-transform: rotate(45deg); transform: rotate(45deg);}


/*baggage*/
#baggage { padding: 55px 40px; position: relative;}
#baggage .baggageTit { margin-bottom: 35px; display: flex; justify-content: space-between; align-items: end;}
#baggage .baggageTit b { font-size: 30px;}
#baggage .baggageTit small { padding-left: 1em; font-size: 12px; color: #F00;}
#baggage .baggageData { font-size: 14px;}

/*tabCnt*/
.tabCnt { display: none;}
.tabCnt.is-active { display: block;}

.tabCnt_warap { max-height: 550px; overflow-y: auto;}

/*tabLine_btn*/
.genre-size a.js-modalBtn01 { font-size: 14px; text-decoration: underline; color: #9B9B9B;}
.genre-size a.js-modalBtn01:hover { text-decoration: none;}
#js-tabLine_btn { width: 100%; margin-bottom: 20px; display: flex;}
#js-tabLine_btn li { width: 50%;}
#js-tabLine_btn li a { padding: .7em 0; border-left: 1px solid #fff; border-right: 1px solid #fff; border-top: 1px solid #fff; border-bottom: 1px solid #70706F; font-size: 18px; font-weight: bold; text-align: center; text-decoration: none; color: #999; display: block;}
#js-tabLine_btn li a.is-active { border-left: 1px solid #70706F; border-right: 1px solid #70706F; border-top: 1px solid #70706F; border-bottom: 1px solid #fff; color: #444;}

/*tabBaggage_btn*/
.tabBaggage_btn { margin-bottom: 15px; border-radius: 10px; display: flex; overflow: hidden;}
.tabBaggage_btn li { width: calc(100% / 4);}
.tabBaggage_btn li a { padding: .7em 0; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; display: block; background: #F8F8F8;}
.tabBaggage_btn li a span { font-size: 14px; display: block;}
.tabBaggage_btn li a.is-active { color: #fff; background: #686868;}

/*t_info*/
.t_info li { margin-top: 5px; font-size: 12px;}

/*t_table table*/
.t_table table { width: 100%; margin-bottom: 40px; font-size: 14px; text-align: center;}
.t_table table tr:not(:last-child) { border-bottom: 1px solid #DEDEDE;}
.t_table table th.t_tit03:last-child ,
.t_table table th:not(:last-child) ,
.t_table table td:not(:last-child) { border-right: 1px solid #DEDEDE;}
.t_table table th.t_tit03:not(:last-child) ,
.t_table table .t_cel td:nth-child(4) ,
.t_table table .t_cel td:nth-child(5) { border-right: none;}
.t_table table th { padding: .5em 0; font-weight: bold; text-align: center; background: #FAFAFA;}
.t_table table th.t_tit01 { background: #eee;}
.t_table table span { font-weight: normal; font-size: 11px; display: block;}
.t_table table .t_bold { font-weight: bold;}
.t_table table .t_cel th { width: 250px;}
.t_table table .t_cel td { width: 80px; height: 60px;}
.t_table table .t_cel td:nth-child(3) { width: 100px;}
.t_table table .t_cel td:nth-child(7) { width: 150px;}

@media only screen and (max-width: 749px) {
  #baggage { padding: 25px 10px;}
  #baggage .baggageTit { margin-bottom: 25px;}
  #baggage .baggageTit b { font-size: 24px;}
  #baggage .baggageTit small { padding-left: 0; font-size: 12px; color: #F00; display: block;}
  #baggage .baggageData { font-size: 12px;}

  /*tabCnt*/
  .tabCnt_warap { max-height: 43vh;}

  /*tabLine_btn*/
  #js-tabLine_btn { margin-bottom: 20px; border-radius: 10px;}
  #js-tabLine_btn li { width: 50%;}
  #js-tabLine_btn li a { font-size: 15px;}
  #js-tabLine_btn li a.is-active { color: #444;}

  /*tabBaggage_btn*/
  .tabBaggage_btn { margin-bottom: 15px; border-radius: 10px;}
  .tabBaggage_btn li a { height: 100%; padding: .7em 0; font-size: 10px; display: flex; flex-direction: column; justify-content: center;}
  .tabBaggage_btn li a span { font-size: 13px;}

  /*t_table*/
  .t_table { margin-bottom: 25px; font-size: 13px;}
  .t_cel { border-bottom: 1px solid #DEDEDE;}
  .t_cel:first-child { border-top: 1px solid #DEDEDE;}
  .t_cel dt { padding: .8em .5em; background: #FAFAFA;}
  .t_cel dt p b { display: block; font-size: 14px;}
  .t_cel dt p small { font-weight: normal; font-size: 11px;}
  .t_cel dd { padding: .8em .5em;}
  .t_cel dd p small { display: block; padding: 0 1em; font-size: 12px;}

  /*t_info*/
  .t_info li { font-size: 10px; margin-top: 5px;}
}