@charset "UTF-8";

/*--------------------------------------------
COMMON
---------------------------------------------*/

#columns .swiper-slide a{
	display : block;
}

#columns .swiper-slide h3{
	color : var(--primary);
	font-weight : 700;
}

#columns .swiper-prev , #columns .swiper-next{
	position : absolute;
	z-index : 1;
	background-color : #fff;
	display : grid;
	place-items : center;
	background-repeat : no-repeat;
	background-position : center;
}

#columns .swiper-prev{
	background-image : url("../images/ui/arrow/prev01.svg");
	left : 0;
}

#columns .swiper-next{
	background-image : url("../images/ui/arrow/next01.svg");
	right : 0;
}

@media screen and (max-width: 750px){
	#columns .swiper{
		margin-top : calc( 22 * 100vw / 750 );
	}
	#columns .swiper-slide{
		margin-left : calc( 10 * 100% / 750 );
		margin-right : calc( 10 * 100% / 750 );
		width : calc( 315 * 100% / 750 );
	}
	#columns .swiper-slide h3{
		font-size : 2.6rem;
		line-height : calc( 31.2 / 26 );
	}
	#columns .swiper-slide h3{
		margin-top : calc( ( 8 - 2.6 ) * 100vw / 750 );
	}
	#columns .swiper-prev , #columns .swiper-next{
		width : calc( 40 * 100% / 750 );
		height : calc( 40 * 100vw / 750 );
		background-size : auto calc( 16 * 100vw / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#columns .swiper{
		margin-top : 12px;
	}
	#columns .swiper-wrapper{
		margin-left : -5px;
	}
	#columns .swiper-slide{
		margin-left : 5px;
		margin-right : 5px;
		width : 210px;
	}
	#columns .swiper-slide h3{
		font-size : 1.6rem;
		line-height : calc( 19.2 / 16 );
	}
	#columns .swiper-slide h3{
		margin-top : calc( 10px - 1.6px );
	}
	#columns .swiper-prev , #columns .swiper-next{
		width : 25px;
		height : 25px;
		background-size : auto 16px;
	}
}

/*--------------------------------------------
NEW AND FRANCHISE
---------------------------------------------*/

#new .swiper-slide picture , #franchise .swiper-slide picture{
	overflow : hidden;
}

#new .swiper-slide picture > img , #franchise .swiper-slide picture > img{
	width : 100%;
	height : 100%;
	object-fit : contain;
}

@media screen and (max-width: 750px){
	#new , #franchise{
		padding-bottom : calc( ( 68 - 2.6 ) * 100vw / 750 );
	}
	#new .swiper-slide picture , #franchise .swiper-slide picture{
		height : calc( 210 * 100vw / 750 );
	}
	#new .swiper-prev , #new .swiper-next , #franchise .swiper-prev , #franchise .swiper-next{
		top : calc( 92 * 100vw / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#new , #franchise{
		padding-bottom : calc( 46px - 1.6px );
	}
	#new .swiper-slide picture , #franchise .swiper-slide picture{
		height : 140px;
	}
	#new .swiper-prev , #new .swiper-next , #franchise .swiper-prev , #franchise .swiper-next{
		top : 88px;
	}
}

/*--------------------------------------------
NEW
---------------------------------------------*/

#new .title01:before{
	background-image : url("../images/ui/icon/party_cracker.svg");
}

@media screen and (max-width: 750px){
	#new{
		padding-bottom : calc( ( 68 - 2.6 ) * 100vw / 750 );
	}
	#new .title01:before{
		width : calc( 78 * 100% / 750 );
		height : calc( 74 * 100vw / 750 );
		top : calc( 2 * 100vw / 750 );
		left : calc( -20 * 100% / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#new{
		padding-bottom : calc( 46px - 1.6px );
	}
	#new .title01:before{
		width : 46px;
		height : 43px;
		top : 13px;
		left : -4px;
	}
}

/*--------------------------------------------
FRANCHISE
---------------------------------------------*/

#franchise .title01:before{
	background-image : url("../images/ui/icon/star.svg");
}

@media screen and (max-width: 750px){
	#franchise{
		padding-bottom : calc( ( 62 - 2.6 ) * 100vw / 750 );
	}
	#franchise .title01:before{
		width : calc( 81 * 100% / 750 );
		height : calc( 81 * 100vw / 750 );
		top : calc( 2 * 100vw / 750 );
		left : calc( -8 * 100% / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#franchise{
		padding-bottom : calc( 47px - 1.6px );
	}
	#franchise .title01:before{
		width : 53px;
		height : 53px;
		top : 2px;
		left : -9px;
	}
}

/*--------------------------------------------
SEARCH
---------------------------------------------*/

#search .title01:before{
	background-image : url("../images/ui/icon/search.svg");
}

#search h3 button{
	width : 100%;
	display : grid;
	place-items : center start;
	font-weight : 700;
	color : #fff;
	background-color : #95a8b2;
}

#search p , #search a{
	color : var(--primary);
}

#search .area > ul > li > p , #search .area > ul > li > a{
	font-weight : 700;
}

#search .area li li a{
	display : grid;
	grid-auto-flow : column;
}

#search .area li li a:after{
	content : "｜";
	white-space : pre;
}

#search .area ul ul{
	display : flex;
	flex-wrap : wrap;
}

#search .genre > ul , #search .obsession > ul , #search .funds > ul{
	grid-template-columns : repeat(2,1fr);
}

@media screen and (max-width: 750px){
	#search{
		padding-bottom : calc( ( 84 - 64 ) * 100vw / 750 );
	}
	#search .title01:before{
		width : calc( 72 * 100% / 750 );
		height : calc( 73 * 100vw / 750 );
		left : calc( -8 * 100% / 750 );
		top : calc( 16 * 100vw / 750 );
	}
	#search .box{
		margin-top : calc( 32 * 100vw / 750 );
	}
	#search h3 button{
		font-size : 3.4rem;
		line-height : calc( 40.8 / 34 );
	}
	#search h3 button{
		padding-top : calc( 19.6 * 100vw / 750 );
		padding-bottom : calc( 19.6 * 100vw / 750 );
		padding-left : calc( 13 * 100% / 690 );
		padding-right : calc( 13 * 100% / 690 );
		position : relative;
		overflow : hidden;
	}
	#search h3 button:after{
		content : "";
		display : block;
		pointer-events : none;
		background : url("../images/ui/arrow/down01.svg") 0 0 / contain no-repeat;
		width : calc( 20 * 100% / 690 );
		height : calc( 12 * 100vw / 750 );
		position : absolute;
		transition : transform .3s ease-in;
		right : calc( 20 * 100% / 690 );
		top : calc( 50% - ( 6 ) * 100vw / 750 );
	}
	#search h3 button.is-open:after{
		transform : rotate(-180deg);
	}
	#search .area > ul{
		padding-bottom : calc( ( 70 - 11 - 12 ) * 100vw / 750 );
		padding-top : calc( ( 38 - 11 ) * 100vw / 750 );
	}
	#search .area > ul > li + li{
		margin-top : calc( 20 * 100vw / 750 );
	}
	#search .area ul ul{
		display : flex;
		flex-wrap : wrap;
		margin-top : calc( 20 * 100vw / 750 );
	}
	#search .area p , #search .area a{
		font-size : 2.6rem;
		line-height : calc( 48 / 26 );
	}
	#search .box > div + div{
		margin-top : calc( 12 * 100vw / 750 );
	}
	#search .genre > ul , #search .obsession > ul , #search .funds > ul{
		padding-top : calc( ( 28 - 2.6 ) * 100vw / 750 );
		padding-bottom : calc( ( 64 - 2.6 - 12 ) * 100vw / 750 );
		display : grid;
		grid-template-columns : repeat(2,1fr);
		row-gap : calc( ( 26 - 2.6 - 2.6 ) * 100vw / 750 );
	}
	#search .genre a , #search .obsession a , #search .funds a{
		font-size : 2.6rem;
		line-height : calc( 31.2 / 26 );
	}
}

@media print,screen and (min-width: 751px){
	#search{
		padding-bottom : calc( 50px - 4px );
	}
	#search .title01:before{
		width : 43px;
		height : 43px;
		top : 10px;
		left : -4px;
	}
	#search h3 button{
		font-size : 2rem;
		line-height : calc( 24 / 20 );
	}
	#search h3 button{
		padding-top : 5px;
		padding-bottom : 5px;
		padding-left : 12px;
		padding-right : 12px;
		cursor : inherit;
	}
	#search .box{
		display : grid;
		margin-top : 18px;
		grid-template-columns : repeat(2,380px);
		row-gap : calc( 32px - 4px );
		column-gap : 20px;
	}
	#search .area{
		grid-row : 1/5;
		grid-column : 1;
	}
	#search .area p , #search .area a{
		font-size : 1.6rem;
		line-height : calc( 24 / 16 );
	}
	#search .area > ul{
		display : block !important;
		margin-top : calc( 10px - 4px );
	}
	#search .area > ul > li + li{
		margin-top : 10px;
	}
	#search .area ul ul{
		margin-top : 10px;
	}
	#search .area ul ul:before{
		content : "";
		display : block;
		order : 2;
		width : 100%;
	}
	#search .area > ul > li:nth-child(2) li:nth-child(-n+4){
		order : 1;
	}
	#search .area > ul > li:nth-child(2) li:nth-child(n+5){
		order : 3;
	}
	#search .area > ul > li:nth-child(3) li:nth-child(-n+4){
		order : 1;
	}
	#search .area > ul > li:nth-child(3) li:nth-child(n+5){
		order : 3;
	}
	#search .genre > ul , #search .obsession > ul , #search .funds > ul{
		display : grid!important;
		margin-top : calc( 10px - 4px );
		row-gap : calc( 15px - 4px - 4px );
	}
	#search .genre a , #search .obsession a , #search .funds a{
		font-size : 1.6rem;
		line-height : calc( 19.2 / 16 );
	}
}

/*--------------------------------------------
MAGAZINE
---------------------------------------------*/

#magazine .title01:before{
	background-image : url("../images/ui/icon/book.svg");
	transform : rotate(31.65deg);
	transform-origin : center;
}

#magazine .swiper-slide picture{
	overflow : hidden;
}

#magazine .swiper-slide picture > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}

@media screen and (max-width: 750px){
	#magazine{
		padding-bottom : calc( 76 * 100vw / 750 );
	}
	#magazine .title01:before{
		width : calc( 89 * 100% / 750 );
		height : calc( 65 * 100vw / 750 );
		top : calc( 15 * 100vw / 750 );
		left : calc( -22 * 100% / 750 );
	}
	#magazine .swiper-slide picture{
		height : calc( 315 * 100vw / 750 );
	}
	#magazine .swiper-prev , #magazine .swiper-next{
		top : calc( 138 * 100vw / 750 );
	}
	#magazine .link01{
		margin-top : calc( ( 55 - 2.6 ) * 100vw / 750 );
		width : calc( 240 * 100% / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#magazine{
		padding-bottom : 32px;
	}
	#magazine .title01:before{
		width : 53px;
		height : 53px;
		top : 2px;
		left : -13px;
	}
	#magazine .swiper-slide picture{
		height : 210px;
	}
	#magazine .swiper-prev , #magazine .swiper-next{
		top : 90px;
	}
	#magazine .link01{
		margin-top : calc( 43px - 1.6px );
	}
}

/*--------------------------------------------
NEWS
---------------------------------------------*/

#news .title01:before{
	background-image : url("../images/ui/icon/book.svg");
	transform : rotate(31.65deg);
	transform-origin : center;
}

#news .swiper-slide picture{
	overflow : hidden;
}

#news .swiper-slide picture > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}

@media screen and (max-width: 750px){
	#news{
		padding-bottom : calc( 76 * 100vw / 750 );
	}
	#news .title01:before{
		width : calc( 89 * 100% / 750 );
		height : calc( 65 * 100vw / 750 );
		top : calc( 15 * 100vw / 750 );
		left : calc( -22 * 100% / 750 );
	}
	#news .swiper-slide picture{
		height : calc( 315 * 100vw / 750 );
	}
	#news .swiper-prev , #news .swiper-next{
		top : calc( 138 * 100vw / 750 );
	}
	#news .link01{
		margin-top : calc( ( 55 - 2.6 ) * 100vw / 750 );
		width : calc( 240 * 100% / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#news{
		padding-bottom : 32px;
	}
	#news .title01:before{
		width : 53px;
		height : 53px;
		top : 2px;
		left : -13px;
	}
	#news .swiper-slide picture{
		height : 210px;
	}
	#news .swiper-prev , #news .swiper-next{
		top : 90px;
	}
	#news .link01{
		margin-top : calc( 43px - 1.6px );
	}
}

/*--------------------------------------------
RANKING
---------------------------------------------*/

#sidebarRanking h2{
	font-weight : 700;
	position : relative;
}

#sidebarRanking h2:before{
	content : "";
	display : block;
	background : url("../images/ui/icon/flag_black.svg") 0 center / contain no-repeat;
	font-size : 0;
}

#sidebarRanking li a{
	position : relative;
}

#sidebarRanking li a:before , #sidebarRanking li a:after{
	content : "";
	display : block;
}

#sidebarRanking li a:before{
	background-repeat : no-repeat;
	background-position : center;
	background-size : contain;
}

#sidebarRanking li a:after{
	position : absolute;
	width : 100%;
	left : 0;
	z-index : -1;
}

#sidebarRanking li:nth-child(1) a:before{
	background-image : url("../images/ui/icon/rank01.svg");
}

#sidebarRanking li:nth-child(2) a:before{
	background-image : url("../images/ui/icon/rank02.svg");
}

#sidebarRanking li:nth-child(3) a:before{
	background-image : url("../images/ui/icon/rank03.svg");
}

#sidebarRanking li:nth-child(4) a:before{
	background-image : url("../images/ui/icon/rank04.svg");
}

#sidebarRanking li:nth-child(5) a:before{
	background-image : url("../images/ui/icon/rank05.svg");
}

#sidebarRanking picture{
	overflow : hidden;
}

#sidebarRanking picture > img{
	width : 100%;
	height : 100%;
	object-fit : contain;
}

#sidebarRanking h3{
	font-weight : 700;
	color : var(--primary);
}

@media screen and (max-width: 750px){
	#sidebarRanking{
		padding-bottom : calc( 58 * 100vw / 750 );
	}
	#sidebarRanking h2{
		font-size : 4rem;
		line-height : calc( 54 / 40 );
	}
	#sidebarRanking h2{
		padding-top : calc( 13 * 100vw / 750 );
		padding-bottom : calc( 13 * 100vw / 750 );
		padding-left : calc( 72 * 100% / 750 );
		padding-right : calc( 72 * 100% / 750 );
		background-color : #b38e0b;
		color : #fff;
		position : relative;
		overflow : hidden;
	}
	#sidebarRanking h2:before{
		width : calc( 60 * 100% / 750 );
		height : calc( 68 * 100vw / 750 );
		left : calc( 3 * 100% / 690 );
		top : calc( 17 * 100vw / 750 );
		position : absolute;
		filter : invert(99%) sepia(40%) saturate(0%) hue-rotate(166deg) brightness(118%) contrast(100%);
	}
	#sidebarRanking ol{
		margin-top : calc( 32 * 100vw / 750 );
	}
	#sidebarRanking li + li{
		margin-top : calc( 40 * 100vw / 750 );
	}
	#sidebarRanking li a{
		display : grid;
		align-items : start;
		justify-content : space-between;
		grid-template-columns : repeat(2 , calc( 315 * 100% / 690 ));
		grid-template-rows : auto;
		padding-top : calc( 14 * 100vw / 750 );
	}
	#sidebarRanking li a:before{
		position : absolute;
		width : calc( 98 * 100% / 690 );
		height : calc( 81 * 100vw / 750 );
		top : 0;
	}
	#sidebarRanking li a:after{
		height : calc( 40 * 100vw / 750 );
		top : calc( 41 * 100vw / 750 );
	}
	#sidebarRanking li:nth-child(1) a:after{
		background : linear-gradient( 90deg, #b89a00 0%, #b89a00 calc( 40 * 100% / 690 ), #fff calc( 40 * 100% / 690 ), #fff calc( 155 * 100% / 690 ),#b89a00 calc( 155 * 100% / 690 ) , #b89a00 calc( 375 * 100% / 690 ) , transparent calc( 375 * 100% / 690 ) , transparent 100%);
	}
	#sidebarRanking li:nth-child(2) a:after{
		background : linear-gradient( 90deg, transparent 0%, transparent calc( 315 * 100% / 690 ), #95a8b2 calc( 315 * 100% / 690 ), #95a8b2 calc( 415 * 100% / 690 ),#fff calc( 415 * 100% / 690 ) , #fff calc( 530 * 100% / 690 ), #95a8b2 calc( 530 * 100% / 690 ) , #95a8b2 100%);
	}
	#sidebarRanking li:nth-child(3) a:after{
		background : linear-gradient( 90deg, #aa631a 0%, #aa631a calc( 40 * 100% / 690 ), #fff calc( 40 * 100% / 690 ), #fff calc( 155 * 100% / 690 ),#aa631a calc( 155 * 100% / 690 ) , #aa631a calc( 375 * 100% / 690 ) , transparent calc( 375 * 100% / 690 ) , transparent 100%);
	}
	#sidebarRanking li:nth-child(4) a:after{
		background : linear-gradient( 90deg, transparent 0%, transparent calc( 315 * 100% / 690 ), #717071 calc( 315 * 100% / 690 ), #717071 calc( 415 * 100% / 690 ),#fff calc( 415 * 100% / 690 ) , #fff calc( 530 * 100% / 690 ), #717071 calc( 530 * 100% / 690 ) , #717071 100%);
	}
	#sidebarRanking li:nth-child(5) a:after{
		background : linear-gradient( 90deg, #717071 0%, #717071 calc( 40 * 100% / 690 ), #fff calc( 40 * 100% / 690 ), #fff calc( 155 * 100% / 690 ),#717071 calc( 155 * 100% / 690 ) , #717071 calc( 375 * 100% / 690 ) , transparent calc( 375 * 100% / 690 ) , transparent 100%);
	}
	#sidebarRanking picture , #sidebarRanking h3{
		grid-row : 1;
	}
	#sidebarRanking li:nth-child(odd) a:before{
		left : calc( 49 * 100% / 690 );
	}
	#sidebarRanking li:nth-child(odd) picture{
		grid-column : 2;
	}
	#sidebarRanking li:nth-child(odd) h3{
		grid-column : 1;
	}
	#sidebarRanking li:nth-child(even) a:before{
		left : calc( 425 * 100% / 690 );
	}
	#sidebarRanking li:nth-child(even) picture{
		grid-column : 1;
	}
	#sidebarRanking li:nth-child(even) h3{
		grid-column : 2;
	}
	#sidebarRanking h3{
		padding-top : calc( ( 84 - 2.6 ) * 100vw / 750 );
	}
	#sidebarRanking h3{
		font-size : 2.6rem;
		line-height : calc( 31.2 / 26 );
	}
	#sidebarRanking .link01{
		margin-top : calc( 50 * 100vw / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#sidebarRanking h2{
		color : #b38e0b;
		font-size : 2.8rem;
		display : grid;
		align-items : center;
		border-bottom : 3px solid currentColor;
		grid-template-columns : 30px 1fr;
		padding-left : 3px;
		column-gap : 10px;
	}
	#sidebarRanking h2:before{
		height : 34px;
		filter : invert(65%) sepia(66%) saturate(3529%) hue-rotate(17deg) brightness(90%) contrast(91%);
	}
	#sidebarRanking ol{
		margin-top : 13px;
	}
	#sidebarRanking li a{
		display : block;
	}
	#sidebarRanking li a:before{
		width : 52px;
		height : 43px;
		margin-left : auto;
		margin-right : auto;
		margin-bottom : 10px;
	}
	#sidebarRanking li a:after{
		height : 20px;
		top : 20px;
	}
	#sidebarRanking li:nth-child(1) a:after{
		background : linear-gradient( 90deg, #b89a00 0%, #b89a00 100px, #fff 100px, #fff 180px,#b89a00 180px , #b89a00 100%);
	}
	#sidebarRanking li:nth-child(2) a:after{
		background : linear-gradient( 90deg, #95a8b2 0%, #95a8b2 100px, #fff 100px, #fff 180px,#95a8b2 180px , #95a8b2 100%);
	}
	#sidebarRanking li:nth-child(3) a:after{
		background : linear-gradient( 90deg, #aa631a 0%, #aa631a 100px, #fff 100px, #fff 180px,#aa631a 180px , #aa631a 100%);
	}
	#sidebarRanking li:nth-child(n+4) a:after{
		background : linear-gradient( 90deg, #717071 0%, #717071 100px, #fff 100px, #fff 180px,#717071 180px , #717071 100%);
	}
	#sidebarRanking li + li{
		margin-top : calc( 32px - 1.6px );
	}
	#sidebarRanking picture{
		width : 100%;
		height : 186px;
	}
	#sidebarRanking h3{
		font-size : 1.6rem;
		line-height : calc( 19.2 / 16 );
	}
	#sidebarRanking h3{
		margin-top : calc( 8px - 1.6px );
	}
	#sidebarRanking .link01{
		margin-top : calc( 36px - 1.6px );
	}
}