@charset "UTF-8";


#contents {
	width: 100%;
}

#footer {
	border: none;
	margin-top: 0px!important;
}

#wrap {
/*z-index: 99999;*/
position: absolute;
top: 0px;
}
.randombg {
width: 100%;
/*height: 100vh;*/
/*background-image: url(../images/bg01.jpg);*/
background-size: 100% auto;
background-position: center top;
background-repeat: no-repeat;
position: absolute;
top: 0px;
}



/*******************************************************************************/
/* MAIN BANNER + READ TEXT */
/*******************************************************************************/
#mainbanner {
	margin-left: auto;
	margin-right: auto;
	clear: both;
}
#read {
	margin-left: auto;
	margin-right: auto;
}
#read h2 {
	font-weight: normal;
	font-size: 0.18rem;
	line-height: 0.26rem;
	text-align: center;
}
.catchcopy {
	font-family: 'mplus-1p-regular';
	font-size: 0.2rem;
	letter-spacing: 0.02rem;
}
#read h3 {
	/*font-weight: normal;
	font-size: 0.15rem!important; 
	line-height: 0.28rem!important;
	padding-top: 10px;
	text-align: left;*/
}


/*PC：737px以上で適用する内容*/
@media screen and (min-width: 1212px) {
	#logo {
        /*display: none;*/
	}


    #topmain img {
    display: none;
    /*margin-top: calc(50vh - 60px);;
    margin-left: 50px;
    width: 432px;
    height: auto;*/
    }
	#contents {
		/*padding-top: 20px !important;*/
		padding-top: 70px !important;
        margin-top: 100vh;
	}
	#mainbanner {
		width: 1190px;
	}
	#read {
		width: 1190px;
		padding-top: 35px;
        padding-bottom: 20px;
	}
	/*#read h2 {
		width: 550px;
		float: left;
		text-align: right !important;
	}*/
	.catchcopy {
		font-size: 24px !important;
		letter-spacing: 0.1em !important;
	}
	#read h3 {
        width: 70%;
        /*margin-left: 610px;
                padding-right: 110px;
                padding-top: 0px !important;*/
        letter-spacing: 0.05em;
        margin-left: auto;
        margin-right: auto;
        padding-top: 34px;
        text-align: center;
	}

    .randombg {
        background-image: url(../images/bg03.jpg);
        aspect-ratio: 1183 / 775;
        height: auto;
        background-size: 100% auto;
    }
    #contents {
        margin-top: calc(100vw * 764 / 1183);
    }
}


/*******************************************************************************/
/*壁紙*/
/*******************************************************************************/
body {
	/*background-image: url(../images/bg_cloud.jpg);
	background-repeat: repeat-x;
	background-position: center top;
	background-color:rgba(255,255,255,0.4);
	background-blend-mode:screen;*/
}
#contents {
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x;
	background-image: url(../images/bg_umbrella.png), url(../images/bg_mens.png), url(../images/bg_allweather.png), url(../images/bg_parasol.png), url(../images/bg_gradation.png);
}
/*PORTRAIT：480px以下で適用する内容*/
@media screen and (max-width: 1211px) {
    #topmain img {
        display: none;
    }
    .randombg {
        background-image: url(../images/bg04SM.jpg);
        aspect-ratio: 578 / 755;
        height: auto;
        background-size: 100% auto;
    }
    #contents {
        margin-top: calc(100vw * 735 / 578);
    }
	body {
	background-size: 150% auto;
	}
	#contents {
		background-position: calc(50% + 130px) 200px, calc(50% + 100px) 750px, calc(50% - 105px) 1920px, calc(50% - 20px) 1150px, center 0px;
		background-size: 170% auto, 170% auto, 170% auto, 150% auto, auto auto ;
	}
	/*#contents {
		background-position: calc(50% + 130px) 520px, calc(50% - 200px) 1050px, calc(50% - 25px) 2400px, calc(50% - 20px) 1600px, center 200px;
		background-size: 170% auto, 170% auto, 170% auto, 150% auto, auto auto ;
	}*/
}

/*PC：737px以上で適用する内容*/
@media screen and (min-width: 1212px) {
#contents {
background-position: calc(50% + 300px) 200px, calc(50% + 450px) 1200px, calc(50% - 350px) 2460px, calc(50% - 380px) 1510px, center 0px;
	}
	/*#contents {
		background-position: calc(50% + 300px) 880px, calc(50% + 450px) 1950px, calc(50% + 120px) 3600px, calc(50% - 320px) 2530px, center 650px;
	}*/
}


/*******************************************************************************/
/*COLLECTION*/
/*******************************************************************************/
#collection {
	clear: both;
	margin-left: auto;
	margin-right: auto;
}
#collection h3 {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
#collection ul {
	margin-left: auto;
	margin-right: auto;
	list-style-type: none;
	position: relative;
}
/*PORTRAIT：480px以下で適用する内容*/
@media screen and (max-width: 1211px) {
	#collection {
		width: 100%;
		padding-bottom: 60px;
	}
	#collection h3 {
		padding-bottom: 20px;
		width: 268px;
		height: auto;
	}
	#collection ul {
		width: 90%;
        padding-bottom: 50px;
position: relative;
	}
	#cat1, #cat2, #cat3, #cat4,
	#cat1 img, #cat2 img, #cat3 img, #cat4 img {
		width: 80%;
		height: auto;
	}
    
	#ph1 {
		width: 85%;
		height: auto;
	}
    #ph2 {
		width: 70%;
		height: auto;
	}
	#ph3 {
		width: 67%;
		height: auto;
	}
    #ph4 {
		width: 65%;
		height: auto;
	}
    #ph5 {
		width: 85%;
		height: auto;
	}
    #ph6 {
		width: 65%;
		height: auto;
	}
   #ph7 {
width: 95%;
height: auto;
	}
	

	#cat1, #cat2, #cat3, #cat4 {
		margin-left: auto;
		margin-right: auto;
	}
	#cat2, #cat3 {
		padding-bottom: 10px;
	}
	
	#ph1 {
		margin-left: 0;
		margin-right: auto;
		padding-bottom: 5px;
	}
	#ph2 {
		margin-left: auto;
		margin-right: 0;
		padding-bottom: 10px;
	}
	#ph3 {
		margin-left: 0;
		margin-right: auto;
		padding-bottom: 60px;
	}
	#ph4 {
		margin-left: auto;
		margin-right: 0;
		padding-bottom: 10px;
	}
	#ph5 {
		margin-left: 0;
		margin-right: auto;
		padding-bottom: 20px;
	}
	#ph6 {
		margin-left: auto;
		margin-right: 0;
		padding-bottom: 60px;
	}
	#ph7 {
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 0px;
	}
}

/*PC：737px以上で適用する内容*/
@media screen and (min-width: 1212px) {
	#collection {
width: 1190px;
padding-top: 120px;
padding-bottom: 180px;
	}
	#collection h3 {
		padding-bottom: 50px;
		width: 322px;
		height: 52px;
	}
	#collection ul {
		width: 1190px;
		height: 2850px;
position: relative;
	}
	#ph1, #ph2, #ph3, #ph4, #ph5, #ph6, #ph7 {
		position: absolute;
	}
	#cat1, #cat2, #cat3, #cat4 {
		position: absolute;
		width: 265px;
		height: 101px;
	}
    
/*****写真のサイズ*****/
	#ph1 {
		width: 655px;
		height: 480px;
	}
	#ph2 {
		width: 480px;
		height: 435px;
	}
	#ph3 {
		width: 430px;
		height: 530px;
	}
	#ph4 {
		width: 430px;
		height: 530px;
	}
	#ph5 {
		width: 640px;
		height: 470px;
	}
	#ph6 {
		width: 480px;
		height: 480px;
	}
	#ph7 {
		width: 750px;
		height: 474px;
	}
    
/*****カテゴリの位置*****/
	#cat1 {
		top: 692px;
		right: 330px;
	}
	#cat2 {
		top: 1984px;
		left: 387px;
	}
	#cat3 {
		top: 2496px;
		right: 100px;
	}
    
/*****写真の位置*****/
	#ph1 {
		top: 0px;
		left: 0px;
	}
	#ph2 {
		top: 230px;
		right: 0px;
	}
	#ph3 {
		top: 540px;
		left: 142px;
	}
	#ph4 {
		top: 1191px;
		right: 70px;
	}
	#ph5 {
		top: 1477px;
		left: 0px;
	}
	#ph6 {
		top: 1767px;
		right: 20px;
	}
	#ph7 {
		top: 2389px;
		left: 43px;
	}
}

/*******************************************************************************/
/*COLLECTION ANIMATION*/
/*******************************************************************************/
.cfromBottomIn,
.fromBottomIn {
	transition: transform 1.0s ease, opacity 1.0s ease;
	transform: translate(0,0);
	opacity: 1.0;
}
.cfromBottomOut,
.fromBottomOut {
	transition: transform 1.0s ease, opacity 1.0s ease;
	transform: translate(0,20px);
	opacity: 0.8;
}

/*******************************************************************************/
/*BANNER AREA*/
/*******************************************************************************/
#fbanner {
	width: 100%;
	background-color: #c7c9c7;
	zoom: 1; /* float解除 for IE6/7  */
}
#fbanner ul {
	list-style-type: none;
	margin-left: auto;
	margin-right: auto;
}

#fbanner:after, #fbanner:before {
    content: "";
    clear: both;
    display: block;
}
/*PORTRAIT：480px以下で適用する内容*/
@media screen and (max-width: 1211px) {
	#fbanner {
	padding-top: 40px;
	padding-bottom: 40px;
}
#fbanner ul {
	width: 80%;
}
#fbanner li {
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: center;
}
}

/*PC：737px以上で適用する内容*/
@media screen and (min-width: 1212px) {
	#fbanner {
	padding-top: 106px;
	padding-bottom: 106px;
}
#fbanner ul {
	width: 1020px;
    display:flex;
    justify-content: center;
}
#fbanner li {
	margin-left: 30px;
	margin-right: 30px;
}
#fbanner li img {
	width: 280px;
	height: 218px;
}
}