/* --------------------------------------------------------------------- containor 
*/
.container { 
	position: relative; 
/*	opacity: 0.94; */
	overflow: hidden;
	/*		
	-webkit-animation: anime 36s 0s infinite;
    animation: anime 36s 0s infinite; 
	*/
		margin: 0 auto;

        width: 100%;
        height: calc(100vh - 52px);
		height: calc(100svh - 52px);
		height: 100svh;

    display: flex;
    background-color: rgb(138, 199, 220);
    flex-flow: wrap;
    justify-content: space-around;
	align-items: center;
}



/* --------------------------------------------------------------------- item2
*/
.item2 {
	z-index: 1009;
	position: absolute;
	/*
	top: calc(50% - 240px);
	left: calc(50% - 240px);
	margin: 32px auto 82px;
*/

	top: -18%;
	left: 0;
	right: -5px;
	bottom: 0;
	margin: auto;


	width: 80%;
	min-width: 220px;
	max-width: 280px;

	height: 100%;
	min-height: 236px;
	max-height: 300px;

	text-align: center;
}
.item2 svg {
	width: 80%;
	margin: auto;
}


@media only screen and (max-width: 501px) {
	.item2 {
		top: -33%;
		right: 0;
		min-width: auto !important;
		max-width: 46% !important;
	}
}







.image {
/*	position: absolute;*/
	width: 120%;
	height: 120%;
	object-fit: cover;
	opacity: 0;
	will-change: opacity, transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	/* animation: .4s anime4s ;*/
}





/* --------------------------------------------------------------------- l-header
*/
.l-header__container {
	position: absolute;
	top: 0;
	right: 3%;
	z-index: 1052;
}
.l-header__container.btm { border-bottom: 0px solid red;

    font-size: 80%;

	z-index: 1052;
    position: absolute;
    top: auto;
    bottom: 72px;
    right: auto;
    left: auto;
   
    display: flex;
    align-items: center;
	justify-content: flex-end;

	flex-wrap: wrap;
	align-content: flex-end;
	flex-direction: row;
	flex-direction: column;
	
    color: rgba(255, 255, 255, .6);
}
.l-header__container.btm p a {
	display: inline-block;
	margin: 0 0rem;
	padding: 0 0;
	color: inherit;
	
}
.l-header__container.btm p {
	font-size: 86%; 
	color:rgb(255, 255, 255);
	margin-top: 6%;
}
.l-header__container.btm p a {

	margin: 0 0.6rem;

	
}

@media only screen and (max-width: 501px) {

	.l-header__container {
    	top: auto;
		right: auto;
		left: auto;
		bottom: 98px;
	}
	.l-header__container.btm { 
		bottom: 58px; /* footer height + */

		height: 44%;
		max-height: 300px;

		justify-content: center;
		align-content: space-between;
		flex-direction: row;

	}
	
	.l-header__container.btm p {
		margin-top: auto;
		padding: 1.0rem .33rem;
		font-size: 80%;
	}

} /*(max-width: 501px)*/









/* --------------------------------------------------------------------- ~ .swiper-wrap
*/
.l-header__container:hover ~ .swiper-wrap {
	transition: .3s;
	opacity: .2;
}
@media (hover:none) and (pointer:none) {
    .l-header__container:active ~ .swiper-wrap {
		transition: .3s;
		opacity: .2;
    }
}

.l-header__container:hover ~ .swiper-wrap {
	transition: .3s;
	opacity: .2;
}
@media (hover:none) and (pointer:none) {

    .l-header__container:active ~ .swiper-wrap {
		transition: .3s;
		opacity: .2;
    }
}









/* --------------------------------------------------------------------- list-front-cat
*/

#list-front-cat {
	width: auto;
	margin: 0%; 
	/*margin-bottom: 5%;*/

display: flex;
flex-direction: row;
/*
flex-grow: 1
flex-wrap: wrap;
align-items: stretch;
justify-content:stretch;
*/
}
#list-front-cat a {
		display: block;
		border-right: 1px solid rgba(255, 255, 255, 0.32); 
		width : calc(100% / 3);

		max-width: 180px;
		max-width: 132px;
		padding: 1.2%;

}
#list-front-cat a:last-of-type {
		border-right: none; 
}
	#list-front-cat a#label-baisenbase {
		padding: 3% 7% 3% 0%;

	}
	#list-front-cat a#label-cue {
		padding: 3% 2% 4% ;

	}
	#list-front-cat a#label-kwkmstore {
		padding: 4% 2% 3% 4%;

	}

#list-front-cat a:hover {
	opacity: 1;	
}
#list-front-cat a .jst {
	transition: .3s;
}
#list-front-cat a:hover .jst {
	transform: scale(1.06);
}

@media (hover:none) and (pointer:none) {
	#list-front-cat a:action .jst  {
		transition: opacity .3s;
		opacity: .2;
	}
}


/* --------------------------------------------------------------------- jst / w 
*/
.jst {
	margin: 0 auto;
	width: 100%;

}
.w8 {
	width: 66% !important;
}
.w9 {
	width: 90% !important;
}








@media screen and (max-width: 501px) {

	.l-header__container.btm #list-front-cat {	
		margin: 0%;
		margin-bottom: 10%;

		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		justify-content: center;
	}

	#list-front-cat a {
		border-right: none; 
		border-bottom: 1px solid rgba(255, 255, 255, 0.32); 
		width: 80% !important;
		max-width: 72%;

		padding: 6% 22% !important;
		padding: 4% 22% !important;
	}
	#list-front-cat a:first-of-type {
		border-bottom: none; 
	}
	
} /*(min-width: 501px)*/






























/* --------------------------------------------------------------------- p-h-sns_sp 
*/
.p-h-sns_sp {
		position: relative;
	
		margin-top: 0;
		margin-right: 0%;
		padding: 1.38rem 1.38rem .03rem .98rem;
		padding: 0 0 .03rem 0;
		text-align: center;
	
		width: 100%;
		max-width: 14.8rem;
		max-width: 11.8rem;

		border-left: 0px solid rgba(255, 255, 255, .33);
}
.p-h-sns_sp__list {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		position: relative;
		-webkit-box-pack: end;
		-ms-flex-pack: end;

		justify-content: flex-end;
		justify-content: space-between;
	
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		margin: 0 auto;
		width: 100%;
}
.p-h-sns_sp__item {
		position: relative;
		padding: 1.38rem .98rem 0 0;
}
.p-h-sns_sp__item:first-of-type {
		border-right: 1px solid rgba(255, 255, 255, .33);
		margin-right:  .94rem;
}
.p-h-sns_sp__text {
		color: rgb(255, 255, 255);
}
.p-h-sns_sp__text:hover {
		opacity: .52;
}

@media (hover:none) and (pointer:none) {
	.p-h-sns_sp__text:action {
		opacity: .52;
	}
}

.p-h-sns_sp__svg {
		display: block;
		width: 14px;
		width: 1.4rem;
		height: 14px;
		height: 1.4rem;
}
.icon_tote .p-h-sns_sp__svg {
	width: 16px;
	width: 1.6rem;
	height: 16px;
	height: 1.6rem;
	margin-bottom: 2px;
}

@media only screen and (max-width: 501px) {
	.p-h-sns_sp__item:first-of-type {
    	border-right: 0px solid rgba(255, 255, 255, .33);
    	margin-right: 0rem;
	}
	.p-h-sns_sp__item {
    	border-right: none;
    	margin-right: 0;
		padding: 0 .68rem;
	}
	.p-h-sns_sp__svg {
		width: 1.1rem;
		height: 1.1rem;
	}
}



/*
.l-header__container {
	top: auto;
	right: auto;
	left: auto;
	bottom: 98px;
}
.l-header__container.btm { 
	bottom: 58px;
	height: 44%;
	max-height: 300px;

	justify-content: center;
	align-content: space-between;
	flex-direction: row;

}
.l-header__container.btm p {
	margin-top: auto;
	padding: 1.0rem .33rem;
	font-size: 80%;
}
*/

@media only screen and (max-height: 548px) {
	body {
		/*
		overflow-y: auto !important;
		height: 90vh !important;
		*/
	}
	.container { 
		min-height: 480px !important;
	}
	.item2 {
		opacity: .5;
		top: -28%;
		width: auto !important;
		min-width: auto !important;
		max-width: 148px !important;
	}
	.l-header__container.btm { 
		bottom: 52px;

		height: 44%;
		max-height: 300px;
		height: 50%;
		max-height: 300px;

		flex-direction: column;
		justify-content: center;
		align-content: space-between;
		
	
	}
	.l-header__container.btm #list-front-cat {	
		margin: 0%;
		margin-bottom: 10%;
		margin-bottom: 0%;

		display: flex;
		
		flex-direction: column-reverse;
		align-items: center;
		justify-content: center;
		/**/
		
	}

	#list-front-cat a {
		border-right: none; 
		border-bottom: 1px solid rgba(255, 255, 255, 0.32); 
		width: 80% !important;
		max-width: 72%;

		padding: 6% 22% !important;
		padding: 4% 2% !important;
	}
	#list-front-cat a {
		display: block;
		border-right: 1px solid rgba(255, 255, 255, 0.32);
		border-bottom: none;
		
		width: calc(100% / 3);
		max-width: 180px;
		max-width: 132px; max-width: 100px;
		padding: 1.2%;
	}

	#list-front-cat a:first-of-type {
		border-bottom: none; 
	}
} /*(max-height: 548px)*/





/* --------------------------------------------------------------------- footer 
*/
.l-footer {
    background: rgba(255,255,255, .43);
    width: 100%;
	height: 54px;

	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
	z-index: 1;
}
.l-footer__sub {
    position: relative;
    margin: 0 auto;
    padding: 24px 0 84px;
    padding: 2.4rem 0 8.4rem;
    width: 100%;
}
.p-f-copy {
    display: block;
	padding: .5rem;
	opacity: .52;
}
.p-f-copy, .p-f-copy a {
    color: rgba(255, 255, 255, 0.8);
	font-size: 9px;
    font-size: .9rem;
    line-height: 1.12;
    text-align: center;
}

@media screen and (min-width: 961px) {
	.is-sp {
    	display: none !important;
	}
	.container { /*
		height: calc(100vh - 44px);
		height: calc(100svh - 44px);*/
	}
}/*(min-width: 961px)*/

@media only screen and (max-width: 501px) {
	.l-footer {
		height: 52px;
	

	}
}/*(max-width: 501px)*/