@charset "UTF-8";

@media screen and (max-width: 750px){
	#brand{
		padding-top : calc( ( 21 - 4.2 ) * 100vw / 750 );
		padding-bottom : calc( 64 * 100vw / 750 );
	}
    .is-pc {
        display: none !important;
    }
}

@media print,screen and (min-width: 751px){
	#brand{
		padding-top : calc( 30px - 3.4px );
		padding-bottom : 64px;
	}
    .is-sp {
        display: none !important;
    }
}

#brand h1{
	font-weight : 700;
	color : #575757;
	border-bottom-style : solid;
}

@media screen and (max-width: 750px){
	#brand h1{
		margin-left : calc( 30 * 100% / 750 );
		margin-right : calc( 30 * 100% / 750 );
		border-bottom-width : calc( 6 * 100vw / 750 );
		border-image : linear-gradient(90deg, var(--primary) 0%, var(--primary) calc( 100 * 100% / 690 ) , #e5e5e5 calc( 100 * 100% / 690 ) , #e5e5e5 100% );
		border-image-slice : 1;
		padding-bottom : calc( ( 26 - 3.4 ) * 100vw / 750 );
	}
	#brand h1{
		font-size : 4.2rem;
		line-height : 1.2;
	}
}

@media print,screen and (min-width: 751px){
	#brand h1{
		border-bottom-width : 5px;
		border-image : linear-gradient(90deg, var(--primary) 0%, var(--primary) 100px , #e5e5e5 100px , #e5e5e5 100% );
		border-image-slice : 1;
		padding-bottom : calc( 26px - 3.4px );
	}
	#brand h1{
		font-size : 3.4rem;
		line-height : 1.2;
	}
}

/*--------------------------------------------
BRAND TOP
---------------------------------------------*/

@media screen and (max-width: 750px){
	#brandTop{
		margin-top : calc( 28 * 100vw / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#brandTop{
		display : grid;
		margin-top : 24px;
		justify-content : space-between;
		grid-template-columns : 460px 680px;
	}
	#brandTop #brandPics{
		grid-row : 1/3;
		grid-column : 1;
	}
	#brandTop #brandData{
		grid-row : 1/3;
		grid-column : 2;
	}
}

#brandPics picture{
	overflow : hidden;
}

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

#swiperMain{
	font-size : 0;
}

@media screen and (max-width: 750px){
	#swiperMain .swiper-slide{
		width : calc( 460 * 100% / 750 );
		height : calc( 306 * 100vw / 750 );
		margin-left : calc( 12* 100% / 750 );
		margin-right : calc( 12* 100% / 750 );
	}
	#swiperMain button{
		display : block;
		width : 100%;
		height : 100%;
	}
	#swiperMain .swiper-prev , #swiperMain .swiper-next{
		position : absolute;
		z-index : 5;
		background-color : #fff;
		display : grid;
		place-items : center;
		background-repeat : no-repeat;
		background-position : center;
		width : calc( 40 * 100% / 750 );
		height : calc( 40 * 100vw / 750 );
		background-size : auto calc( 16 * 100vw / 750 );
		top : calc( 133 * 100vw / 750 );
	}
	#swiperMain .swiper-prev{
		background-image : url("../images/ui/arrow/prev01.svg");
		left : 0;
	}
	#swiperMain .swiper-next{
		background-image : url("../images/ui/arrow/next01.svg");
		right : 0;
	}
	#swiperMain .swiper-prev , #swiperMain .swiper-next{
	}
}

@media print,screen and (min-width: 751px){
	#swiperMain picture{
		height : 306px;
	}
}

#swiperThumbnail{
	font-size : 0;
}

#swiperThumbnail picture{
	width : 100%;
	height : 100%;
}

@media print,screen and (min-width: 751px){
	#swiperThumbnail{
		margin-top : 10px;
	}
	#swiperThumbnail .swiper-slide{
		width : 120px;
		height : 80px;
		margin-left : 5px;
		margin-right : 5px;
	}
}

#brandData h2{
	display : grid;
	grid-template-columns : auto 1fr;
	align-items : center;
	font-weight : 400;
}

#brandData h2 img{
	object-fit : cover;
	font-size : 0;
}

#brandData .info > div{
	display : grid;
}

#brandData .info dt , #brandData .info dd{
	color : #575757;
}

#brandData .info dt{
	display : grid;
	place-items : center;
	background-color : #e5e5e5;
}

#brandData .obsessions{
	display : flex;
	flex-wrap : wrap;
}

#brandData .obsessions li{
	display : grid;
	place-items : center;
	border : 1px solid currentColor;
	color : var(--primary);
}

#brandData .awards h3{
	background-color : #e5e5e5;
	color : #575757;
	font-weight : 400;
}

#brandData .awards dl{
	display : grid;
	align-items : center;
}

#brandData .awards time{
	padding-right : 1em;
}

#brand .links{
	display : grid;
}

#brand .links a{
	display : flex;
	align-items : center;
	justify-content : center;
	color : #fff;
	height : 100%;
}

#brand .links a:before{
	content : "";
	display : block;
	background-repeat : no-repeat;
	background-size : contain;
	background-position : center;
	flex-shrink : 0;
}

#brand .bookmark a{
	background-color : #32b16c;
}

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

#brand .request a{
	background-color : #daac0a;
}

#brand .request a:before{
	background-image : url("../images/ui/icon/mail.svg");
}

#brand .detail a{
	background-color : var(--primary);
}

@media screen and (max-width: 750px){
	#brandData{
		padding-top : calc( 16 * 100vw / 750 );
	}
	#brandData h2{
		grid-row : 3;
		grid-column : 1/3;
		column-gap : calc( 8 * 100% / 690 );
	}
	#brandData h2{
		font-size : 2.2rem;
		line-height : 1.2;
	}
	#brandData h2 img{
		width : calc( 55 * 100vw / 750 );
		height : calc( 55 * 100vw / 750 );
	}
	#brandData .info{
		margin-top : calc( 28 * 100vw / 750 );
		border-bottom : calc( 2 * 100vw / 750 ) solid #e5e5e5;
	}
	#brandData .info > div{
		border-top : calc( 2 * 100vw / 750 ) solid #e5e5e5;
		padding-top : calc( 10 * 100vw / 750 );
		padding-bottom : calc( 10 * 100vw / 750 );
		grid-template-columns : calc( 120 * 100% / 690 ) 1fr;
		column-gap : calc( 10 * 100% / 690 );
	}
	#brandData .info dt , #brandData .info dd{
		font-size : 2.6rem;
		line-height : 1.2;
	}
	#brandData .info dt{
		height : calc( 40 * 100vw / 750 );
	}
	#brandData .info dd{
		padding-top : calc( 4.4 * 100vw / 750 );
	}
	#brandData .obsessions{
		margin-top : calc( 16 * 100vw / 750 );
		column-gap : calc( 10 * 100% / 690 );
		row-gap : calc( 10 * 100vw / 750 );
	}
	#brandData .obsessions li{
		font-size : 2.6rem;
		min-width : calc( 128 * 100% / 690 );
		height : calc( 40 * 100vw / 750 );
		padding-left : calc( 10 * 100vw / 750 );
		padding-right : calc( 10 * 100vw / 750 );
	}
	#brandData .awards{
		margin-top : calc( 24 * 100vw / 750 );
	}
	#brandData .awards h3{
		display : grid;
		place-items : center;
		height : calc( 60 * 100vw / 750 );
		font-size : 2.6rem;
	}
	#brandData .awards dl{
		margin-top : calc( 16 * 100vw / 750 );
		grid-template-columns : calc( 120 * 100% / 690 ) 1fr;
		column-gap : calc( 22 * 100% / 690 );
		row-gap : calc( 28 * 100vw / 750 );
	}
	#brandData .awards dd{
		font-size : 2.6rem;
		line-height : 1.2;
	}
	#brand .links{
		margin-top : calc( 40 * 100vw / 750 );
		grid-template-columns : repeat(2,50%);
		grid-template-rows : calc( 120 * 100vw / 750 );
	}
	#brand .links a{
		font-size : 2.6rem;
	}
	#brand .bookmark a{
		column-gap : calc( 5 * 100% / 345 );
	}
	#brand .bookmark a:before{
		width : calc( 28 * 100% / 345 );
		height : calc( 28 * 100vw / 750 );
	}
	#brand .request a{
		column-gap : calc( 5 * 100% / 345 );
	}
	#brand .request a:before{
		width : calc( 28 * 100% / 345 );
		height : calc( 24 * 100vw / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#brandData h2{
		column-gap : 8px;
	}
	#brandData h2{
		font-size : 1.6rem;
		line-height : 1.2;
	}
	#brandData h2 img{
		width : 46px;
		height : 46px;
	}
	#brandData .info{
		margin-top : 32px;
		display : grid;
		grid-template-columns : 280px 380px;
		column-gap : 20px;
		border-bottom : 2px solid #e5e5e5;
	}
	#brandData .info > div{
		padding-top : 8px;
		padding-bottom : 8px;
		grid-template-columns : 80px 1fr;
		column-gap : 8px;
	}
	#brandData .info > div:nth-of-type(-n+2){
		border-top : 1px solid #e5e5e5;
		border-bottom : 1px solid #e5e5e5;
	}
	#brandData .info > div:nth-of-type(n+3):not(:last-of-type){
		border-bottom : 1px solid #e5e5e5;
	}
	#brandData .info > div:nth-of-type(n+3):nth-of-type(odd):nth-last-of-type(2){
		border-bottom : 0;
	}
	#brandData .info dt , #brandData .info dd{
		font-size : 1.4rem;
		line-height : 1.2;
	}
	#brandData .info dt{
		height : 27px;
	}
	#brandData .info dd{
		padding-top : 5.2px;
	}
	#brandData .obsessions{
		margin-top : 22px;
		column-gap : 6px;
		row-gap : 10px;
	}
	#brandData .obsessions li{
		font-size : 1.4rem;
		min-width : 76px;
		height : 27px;
		padding-left : 10px;
		padding-right : 10px;
	}
	#brandData .awards{
		margin-top : 28px;
		display : grid;
		grid-template-columns : 80px 1fr;
		column-gap : 20px;
	}
	#brandData .awards h3{
		font-size : 1.4rem;
		text-align : center;
		padding-top : 16px;
	}
	#brandData .awards dl{
		padding-top : 15px;
		grid-template-columns : 74px 1fr;
		column-gap : 16px;
		row-gap : 28px;
	}
	#brandData .awards .awards01{
		height : 74px;
	}
	#brandData .awards .awards02{
		height : 70px;
	}
	#brandData .awards dd{
		font-size : 1.6rem;
		line-height : 1.2;
	}
	#brand .links{
		margin-top : 22px;
		grid-template-columns : repeat(2,50%);
		justify-content : space-between;
		grid-template-rows : 80px;
	}
	#brand .links a{
		font-size : 2.2rem;
		font-weight : 700;
	}
	#brand .bookmark a:before{
		width : 28px;
		height : 28px;
		margin-right : 4px;
	}
	#brand .request a:before{
		width : 29px;
		height : 25px;
		margin-right : 4px;
	}
}

#brandContent h3{
	font-weight : 400;
}

@media screen and (max-width: 750px){
	#brandContent{
		margin-top : calc( 88 * 100vw / 750 );
	}
	@media screen and (max-width: 750px){
		#brandContent .title03{
			margin-bottom : calc( ( 44 - 6 ) * 100vw / 750 );
		}
		#brandContent p , #brandContent h3 , #brandContent li{
			font-size : 2.6rem;
			line-height : 1.46;
		}
		#brandContent p + p , #brandContent h3{
			margin-top : calc( 38 * 100vw / 750 );
		}
	}
}

@media print,screen and (min-width: 751px){
	#brandContent{
		margin-top : 44px;
	}
	@media print,screen and (min-width: 751px){
		#brandContent .title03{
			margin-bottom : calc( 24px - 4px );
		}
		#brandContent p , #brandContent h3 , #brandContent li{
			font-size : 1.6rem;
			line-height : 1.5;
		}
		#brandContent p + p , #brandContent h3{
			margin-top : 24px;
		}
	}
}

#brendNews h3{
	color : #2b506c;
	border-color : var(--primary);
}

#brendNews picture{
	overflow : hidden;
}

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

@media screen and (max-width: 750px){
	#brendNews{
		margin-top : calc( ( 74 - 6 - 3 ) * 100vw / 750 );
	}
	#brendNews section + section{
		margin-top : calc( ( 108 - 5 ) * 100vw / 750 );
	}
	#brendNews h3{
		font-size : 3rem;
		line-height : 1.2;
	}
	#brendNews h3{
		padding-bottom : calc( ( 12 - 3 ) * 100vw / 750 );
		border-bottom-width : calc( 4 * 100vw / 750 );
	}
	#brendNews picture{
		margin-top : calc( 20 * 100vw / 750 );
		width : calc( 600 * 100% / 690 );
		height : calc( 400 * 100vw / 750 );
		margin-left : auto;
		margin-right : auto;
	}
	#brendNews p{
		font-size : 2.6rem;
		line-height : 1.38;
	}
	#brendNews p{
		margin-top : calc( ( 24 - 5 ) * 100vw / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#brendNews{
		margin-top : calc( 73px - 4px - 2px );
		display : grid;
		grid-template-columns : repeat(2,580px);
		justify-content : space-between;
	}
	#brendNews section{
		display : grid;
		row-gap : 22px;
		column-gap : 10px;
		grid-template-columns : 240px 1fr;
		align-content : start;
	}
	#brendNews h3{
		font-size : 2rem;
		line-height : 1.2;
	}
	#brendNews h3{
		padding-bottom : calc( 8px - 2px );
		border-bottom-width : 1px;
		grid-row : 1;
		grid-column : 1/-1;
	}
	#brendNews picture{
		grid-row : 2;
		grid-column : 1;
		height : 160px;
	}
	#brendNews p{
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#brendNews p{
		margin-top : -4px;
		grid-row : 2;
	}
}

#brandTabs h3{
	display : grid;
	place-item : center start;
	background-color : var(--primary);
	color : #fff;
}

#brandTabs .datalist01 > div > dt{
	background-color : #e5e5e5;
	color : var(--primary);
}

#brandTabs .indent{
	display : flex;
}

#brandTabs .indent:before{
	flex-shrink : 0;
}

#brandTabs .hr:before{
	content : "-------------------------";
	display : block;
}

#brandTabs h4{
	font-weight : 400;
}

#brandTabs .list{
	display : flex;
	flex-wrap : wrap;
}

#brandTabs .list > li:not(:last-child):after{
	content : "、";
}

#brandTabs .flow li{
	display : grid;
	align-items : center;
}

#brandTabs .flow li:before{
	content : "";
	display : block;
	background-repeat : no-repeat;
	background-size : contain;
	background-position : left center;
	font-size : 0;
}

#brandTabs .flow li:nth-child(1):before{
	background-image : url("../images/ui/icon/step01.webp");
}

#brandTabs .flow li:nth-child(2):before{
	background-image : url("../images/ui/icon/step02.webp");
}

#brandTabs .flow li:nth-child(3):before{
	background-image : url("../images/ui/icon/step03.webp");
}

#brandTabs .flow li:nth-child(4):before{
	background-image : url("../images/ui/icon/step04.webp");
}

#brandTabs .flow li:nth-child(5):before{
	background-image : url("../images/ui/icon/step05.webp");
}
#brandTabs .flow li:nth-child(6):before{
	background-image : url("../images/ui/icon/step06.webp");
}
#brandTabs .flow li:nth-child(7):before{
	background-image : url("../images/ui/icon/step07.webp");
}
#brandTabs .flow li:nth-child(8):before{
	background-image : url("../images/ui/icon/step08.webp");
}
#brandTabs .flow li:nth-child(9):before{
	background-image : url("../images/ui/icon/step09.webp");
}
#brandTabs .flow li:nth-child(10):before{
	background-image : url("../images/ui/icon/step10.webp");
}

@media screen and (max-width: 750px){
	#brandTabs{
		margin-top : calc( ( 42 - 5 ) * 100vw / 750 );
	}
	#brandTabs .tabsController{
        display: flex;
        justify-content: center;
        margin-bottom: 8px;
	}
	#brandTabs .tabsController button{
		width : 100%;
		height : 100%;
		display : grid;
		place-items : center;
		font-size : 2.4rem;
		background-color : #c1bfbf;
		transition : color .3s ease-in , background-color .3s ease-in;
        padding: 10px 5px;
        min-width: 82px;
	}
	#brandTabs .tabsController button.is-active{
		background-color : var(--primary);
		color : #fff;
	}
	#brandTabs .tabsController.footer{
		margin-top : calc( ( 64 - 2.6 ) * 100vw / 750 );
	}
	#brandTabs section:not(.is-active){
		display : none;
	}
	#brandTabs h3{
		font-size : 2.6rem;
		padding-left : calc( 24 * 100% / 690 );
		padding-right : calc( 24 * 100% / 690 );
		padding-top : calc( 27 * 100vw / 750 );
		padding-bottom : calc( 27 * 100vw / 750 );
		margin-bottom : calc( 24 * 100vw / 750 );
		border-image-source : linear-gradient(#084671,#084671);
		border-image-slice : 0 fill;
		border-image-outset : 0 100vw 0 100vw;
	}
	#brandTabs .datalist01 > div + div{
		margin-top : calc( ( 50 - 2.6 ) * 100vw / 750 );
	}
	#brandTabs .datalist01 > div > dt{
		font-size : 2.6rem;
		line-height : 1.2;
	}
	#brandTabs .datalist01 > div > dt{
		padding-left : calc( 30 * 100% / 690 );
		padding-right : calc( 30 * 100% / 690 );
		padding-top : calc(14.4 * 100vw / 750 );
		padding-bottom : calc(14.4 * 100vw / 750 );
		font-weight : 500;
	}
	#brandTabs .datalist01 > div > dd{
		font-size : 2.6rem;
		line-height : 1.2;
	}
	#brandTabs .datalist01 > div > dd{
		margin-top : calc( ( 25 - 2.6 ) * 100vw / 750 );
	}
	#brandTabs .datalist01 .space{
		margin-top : calc( 24 * 100vw / 750 );
	}
	#brandTabs .flow{
	}
	#brandTabs .flow li{
		font-size : 3rem;
		line-height : 1.5;
	}
	#brandTabs .flow li{
		grid-template-columns : calc( 70 * 100vw / 750 ) 1fr;
		column-gap : 10px;
	}
	#brandTabs .flow li:before{
		height : calc( 100 * 100vw / 750 );
	}
	#brandTabs .flow li + li{
		margin-top : 5px;
	}
}

@media print,screen and (min-width: 751px){
	#brandTabs{
		margin-top : calc( 92px - 4px );
	}
	#brandTabs section{
		display : block !important;
	}
	#brandTabs section {
		margin-top : 50px;
	}
	#brandTabs h3{
		font-size : 2.6rem;
		padding-left : 24px;
		padding-right : 24px;
		padding-top : 27px;
		padding-bottom : 27px;
		margin-bottom : 24px;
	}
	#brandTabs .datalist01 > div{
		display : grid;
		grid-template-columns : 200px 1fr;
		column-gap : 20px;
		border-bottom : 1px solid #c9c9c9;
		padding-bottom : 11px;
	}
	#brandTabs .datalist01 > div + div{
		margin-top : 11px;
	}
	#brandTabs .datalist01 > div > dt{
		font-size : 1.8rem;
		line-height : 1.2;
	}
	#brandTabs .datalist01 > div > dt{
		padding-left : 18px;
		padding-right : 18px;
		padding-top : calc( 21px - 1.8px );
		padding-bottom : calc( 21px - 1.8px );
		grid-row : 1/-1;
		grid-column : 1;
		min-height : 80px;
		font-weight : 700;
	}
	#brandTabs .datalist01 > div > dd{
		padding-top : calc( 18px - 4px );
		padding-bottom : calc( 18px - 4px );
		grid-column : 2;
	}
	#brandTabs .datalist01 > div > dd{
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#brandTabs .datalist01 .space{
		margin-top : 24px;
	}
	#brandTabs .flow{
		padding-left : 32px;
		padding-right : 32px;
	}
	#brandTabs .flow li{
		font-size : 2rem;
		line-height : 1.5;
	}
	#brandTabs .flow li{
		grid-template-columns : 150px 1fr;
		column-gap : 39px;
	}
	#brandTabs .flow li:before{
		height : 150px;
	}
	#brandTabs .flow li + li{
		margin-top : 20px;
	}
}

#modal{
	position : fixed;
	top : 0;
	left : 0;
	width : 100vw;
	height : 100vh;
	background-color : rgba(204, 204, 204, .9);
	pointer-events : none;
	opacity : 0;
	z-index : 100;
}

#modal.is-active{
	opacity : 1;
	pointer-events : auto;
}

#modal #modalContent{
	background-color : #fff;
	position : relative;
	overflow-y : auto;
}

#modal .btnCloseModal{
	position : absolute;
	top : 0;
	right : 0;
	display : grid;
	place-items : center;
}

#modal picture{
	overflow : hidden;
}

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

#modal picture{
	width : 100%;
	height : 100%;
}

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

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

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

@media screen and (max-width: 750px){
	#modal #modalContent{
		height : 100vh;
		width : 100%;
		padding-bottom : calc( 60 * 100vw / 750 );
	}
	#modal h4{
		background-color : var(--primary);
		color : #ffff;
		padding-left : calc( 30 * 100% / 750 );
		padding-right : calc( 30 * 100% / 750 );
		height : calc( 96 * 100vw / 750 );
		font-size : 3.2rem;
		display : grid;
		font-weight : 400;
		place-items : center start;
		margin-bottom : calc( 40 * 100vw / 750 );
	}
	#modal .btnCloseModal{
		width : calc( 94 * 100% / 750 );
		height : calc( 96 * 100vw / 750 );
	}
	#modal .btnCloseModal img{
		height : calc( 24 * 100vw / 750 );
		filter : invert(100%) sepia(100%) saturate(0%) hue-rotate(66deg) brightness(108%) contrast(101%);
	}
}

@media print,screen and (min-width: 751px){
	#modal{
		display : grid;
		place-items : center;
	}
	#modal #modalContent{
		width : 740px;
		height : 748px;
		padding-top : 30px;
		padding-bottom : 30px;
		padding-left : 40px;
		padding-right : 40px;
	}
	#modal .swiper-prev , #modal .swiper-next{
		width : 25px;
		height : 25px;
		top : 312.5px;
		background-size : auto 16px;
	}
	#modal .swiper-prev{
		left : 40px;
	}
	#modal .swiper-next{
		right : 40px;
	}
	#modal .btnCloseModal{
		width : 50px;
		height : 50px;
	}
	#modal .btnCloseModal img{
		height : 14px;
		filter : invert(54%) sepia(2%) saturate(0%) hue-rotate(305deg) brightness(93%) contrast(89%);
	}
}

@media screen and (max-width: 750px){
	#swiperModal{
		width : 100%;
		height : calc( 750 * 100vw / 750 );
		margin-left : auto;
		margin-right : auto;
	}
}

@media print,screen and (min-width: 751px){
	#swiperModal{
		width : 570px;
		height : 570px;
		margin-left : auto;
		margin-right : auto;
	}
}

@media screen and (max-width: 750px){
	#swiperModalThumbnail{
		margin-top : calc( 15 * 100vw / 750 );
		padding-bottom : calc( 22 * 100vw / 750 );
	}
	#swiperModalThumbnail .swiper-slide{
		width : calc( 144 * 100vw / 750 );
		height : calc( 144 * 100vw / 750 );
		margin-left : calc( 8 * 100vw / 750 );
		margin-right : calc( 8 * 100% / 690 );
	}
}

@media print,screen and (min-width: 751px){
	#swiperModalThumbnail{
		margin-top : 15px;
	}
	#swiperModalThumbnail .swiper-wrapper{
		margin-left : -8px;
	}
	#swiperModalThumbnail .swiper-slide{
		width : 80px;
		height : 80px;
		margin-left : 8px;
		margin-right : 8px;
	}
}

#swiperScrollbar{
	background-color : rgba(0,0,0,.1);
}

@media screen and (max-width: 750px){
	#swiperScrollbar{
		height : calc( 10 * 100vw / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#swiperScrollbar{
		height : 5px;
	}
}