https://www.dot-st.com/static/docs/c/pages/241213_cosmebrand/https://www.dot-st.com/static/docs/c/pages/241213_cosmebrand/https://www.dot-st.com/static/docs/c/pages/241213_cosmebrand/@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&family=Lato:wght@100;300;400;700&family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700&display=swap');
*:focus {
  outline: none;
}

@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}

body {
    padding: 0;
    margin: 0;
}

h2{
	color: #fff;
	font-family: "Cormorant", serif;
	font-size: 2.2em!important;
	font-weight: 500;
	margin-bottom: 5%;
}

#st_wrap{
    width: 100%;
	margin: 0 auto;
	text-align: center;
	color: #464646;
	background: #e5e4e2;
    display: block;
    font-weight: 400;
    letter-spacing: 2px;
    overflow: hidden;
    font-family: 'Noto Sans JP', sans-serif;
    -webkit-animation: fadein 1.2s forwards ease;
    animation: fadein 1.2s forwards ease;
	font-feature-settings: "palt";
}

#st_wrap img{
    width: 100%;
    vertical-align: bottom;
}

#st_head {
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
}

.st_top{
	position: relative;
}

#st_head .brand_lead{
	font-size: 14px;
	line-height: 1.6;
    letter-spacing: 1.4px;
	text-align: left;
}
#st_head .brand_lead .small{
	font-size: 10px;
	margin: 2% 0;
}

.brandBox .brand:first-child .brand_lead{
    height: 135px;
}
.brandBox .brand:nth-child(4) .brand_lead{
	height: 157px;
}
.brandBox .brand:nth-child(8) .brand_lead{
	height: 135px;
}
.brandBox .brand:nth-child(10) .brand_lead{
	height: 157px;
}
.brandBox .brand:nth-child(11) .brand_lead{
	height: 134px;
}
.brandBox .brand:nth-child(12) .brand_lead{
	height: 134px;
}
.brandBox .brand:nth-child(13) .brand_lead{
	height: 154px;
}
.brandBox .brand:nth-child(14) .brand_lead{
	height: 154px;
}
.brandBox .brand:nth-child(15) .brand_lead{
	height: 90px;
}
.brandBox .brand:nth-child(16) .brand_lead{
	height: 90px;
}

.brand_box{
	padding: 3% 0 0;
	position: relative;
	z-index: 1;
	background-image: linear-gradient(180deg, rgba(180, 175, 171), rgba(191, 191, 191) 50% 50%);
}

.brandBox{
    display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 5%;
	position: relative;
}

.brandBox::after {
    content: '';
    position: absolute;
    top: 0; 
    bottom: 0; 
    left: 50%;
    width: 1px;
    background-color: rgba(255,255,255,.5);
    z-index: 0;
}

.brand{
	width: 45%;
	text-align: left;
	position: relative;
	padding-bottom: 15px;
}
.brand::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: -24px;
    width: 111%;
    height: 1px;
    background-color:  rgba(255,255,255,.5);
}
.brand:nth-child(17)::after,
.brand:nth-child(18)::after{
    content: none;
}

.logo{
	height: 65px;
	margin-top: 5%;
}
.brand:nth-of-type(1) .logo {
    width: 26%!important;
}
.brand:nth-of-type(2) .logo {
    width: 28%!important;
}
.brand:nth-of-type(3) .logo {
    width: 26%!important;
}
.brand:nth-of-type(4) .logo {
    width: 22%!important;
}
.brand:nth-of-type(5) .logo {
    width: 22%!important;
}
.brand:nth-of-type(6) .logo {
    width: 28%!important;
}
.brand:nth-of-type(7) .logo {
    width: 27%!important;
}
.brand:nth-of-type(8) .logo {
    width: 24%!important;
}
.brand:nth-of-type(9) .logo {
    width: 33%!important;
}
.brand:nth-of-type(10) .logo {
    width: 25%!important;
}
.brand:nth-of-type(11) .logo {
	margin-bottom: 5%;
}
.brand:nth-of-type(12) .logo {
	margin: 5% 0;
}
.brand:nth-of-type(13) .logo {
    width: 30%!important;
	height: auto;
	margin: 8% 0 7.5%;
}
.brand:nth-of-type(14) .logo {
    width: 40%!important;
    height: auto;
    margin: 33px 0;
}
.brand:nth-of-type(15) .logo {
    width: 45%!important;
    height: auto;
    margin: 37px 0;
}
.brand:nth-of-type(16) .logo {
    width: 38%!important;
    height: auto;
    margin: 25px 0;
}
.brand:nth-of-type(17) .logo {
    width: 30%!important;
    height: auto;
	margin: 25px 0;
}

.kv{
	margin: 0 0 5%;
}

#st_content{
    width: 100%;
    text-align: center;
    margin: 5% auto 0;
    position: relative;
    display: block;
}

/************************************************************
                other
************************************************************/
.bg{
	background-image: url("https://www.dot-st.com/static/docs/c/pages/241213_cosmebrand/images/bg.jpg");
	background-size: cover;
	padding: 5% 0;
}
#st_head .lead{
    font-size: 14px;
    letter-spacing: 2px;
	line-height: 1.8;
}
.sp {
	display:none;
}
.pc{
    display: block;
}

/************************************************************
                button
************************************************************/
.btnBox{
	display: flex;
	margin: 5% 0
}

.btn01{
	width: 90%;
}
.btn02{
	width: 90%;
}

.btn01 a{
	color: #807c78;
	text-decoration: none;
	padding: 4% 5%;
	font-size: 15px;
	display: inline-block;
	border: 1px solid #807c78;
	font-family: "Cormorant", serif;
	font-weight: bold;
	width: 85%;
    text-align: center;
}
.btn01 a:hover{
	background: #807c78;
	color: #fff;
}
.btn02 a{
	color: #fff;
	background: #807c78;
	text-decoration: none;
	padding: 4% 5%;
	font-size: 15px;
	display: inline-block;
	border: 1px solid #807c78;
	font-family: "Cormorant", serif;
	font-weight: bold;
    width: 85%;
    text-align: center;
}
.btn02 a:hover{
	background: transparent;
	border: 1px solid #807c78;
	color: #807c78;
}

/************************************************************
                SP
************************************************************/
@media only screen and (max-width:768px){
	h2{
		margin: 0;
		padding: 10% 0;
	}
	
	#st_wrap {
		width: 100%;
        margin: 0% auto;
		text-align: center;
        letter-spacing: 1px;
    }

    #st_head .lead{
        font-size: 13px;
        letter-spacing: 0.5px;
		padding: 10% 5%;
    }
	
	.bg{
		background-image: url("https://www.dot-st.com/static/docs/c/pages/241213_cosmebrand/images/bg_s.jpg");
	}
	
	#st_head .brand_lead{
		font-size: 12px;
        margin: 5% auto 10%;
	}
	
	.brand{
		margin-bottom: auto;
	}
	.brand::after{
		width: 111%;
		left: -8px;
	}	
	
	.brand_box{
		padding: 0;
	}
	
	.logo{
		width: 45%!important;
		margin-top: auto;
	}
	
    .brand:nth-of-type(1) .logo {
        width: 55%!important;
    }
    .brand:nth-of-type(2) .logo {
        width: 66%!important;
    }
    .brand:nth-of-type(3) .logo {
        width: 55%!important;
    }
    .brand:nth-of-type(4) .logo {
        width: 40%!important;
    }
    .brand:nth-of-type(5) .logo {
        width: 44%!important;
    }
    .brand:nth-of-type(6) .logo {
        width: 57%!important;
    }
    .brand:nth-of-type(7) .logo {
        width: 55%!important;
    }
    .brand:nth-of-type(8) .logo {
        width: 46%!important;
    }
    .brand:nth-of-type(9) .logo {
        width: 66%!important;
    }
    .brand:nth-of-type(10) .logo {
        width: 45%!important;
    }
	.brand:nth-of-type(11) .logo {
        margin: 17% 0;
    }
    .brand:nth-of-type(12) .logo {
        width: 50%!important;
        margin: 17% 0;
    }
    .brand:nth-of-type(13) .logo {
        width: 65%!important;
    }
    .brand:nth-of-type(14) .logo {
        width: 80%!important;
		margin: 13px 0;
    }
    .brand:nth-of-type(15) .logo {
        width: 80%!important;
        margin: 18% 0;
    }
    .brand:nth-of-type(16) .logo {
        width: 60%!important;
    }
    .brand:nth-of-type(17) .logo {
        width: 60%!important;
		margin: 20px 0;
    }	
	
	.btnBox{
		display: block;
		text-align: center;
	}
	
	.btn01{
		margin-bottom: 5%;
		width: 100%;
	}

	.btn02{
		width: 100%;
	}	
	
	
    .pc {
		display:none;
	}
	
	.sp {
		display:block;
		width: 100%;
	}
}

/*スマホ 小*/
@media only screen and (max-width:375px){
    .brandBox .brand:nth-child(14) .brand_lead{
        height: 266px!important;
    }
    .brand:nth-of-type(16) .logo {
        margin: 24px 0;
    }	
    .brandBox .brand:nth-child(16) .brand_lead{
		height: 186px!important;
    }
	
}

/*スマホ 中*/
@media only screen and (max-width:393px){
    .brandBox .brand:first-child .brand_lead{
        height: 230px;
    }
    .brandBox .brand:nth-child(2) .brand_lead{
        height: 230px;
    }
	.brandBox .brand:nth-child(3) .brand_lead{
        height: 288px;
    }	
	.brandBox .brand:nth-child(4) .brand_lead{
        height: 288px;
    }
    .brandBox .brand:nth-child(5) .brand_lead{
        height: 268px;
    }
    .brandBox .brand:nth-child(6) .brand_lead{
        height: 268px;
    }
	.brandBox .brand:nth-child(7) .brand_lead{
        height: 269px;
    }
    .brandBox .brand:nth-child(8) .brand_lead{
        height: 269px;
    }	
	.brandBox .brand:nth-child(9) .brand_lead{
        height: 268px;
    }		
    .brandBox .brand:nth-child(10) .brand_lead{
        height: 268px;
    }
	.brandBox .brand:nth-child(11) .brand_lead{
        height: 269px;
    }
    .brandBox .brand:nth-child(12) .brand_lead{
        height: 269px;
    }
    .brandBox .brand:nth-child(13) .brand_lead{
        height: 265px;
    }
    .brandBox .brand:nth-child(14) .brand_lead{
        height: 267px;
    }	
    .brandBox .brand:nth-child(15) .brand_lead{
        height: 185px;
    }
    .brandBox .brand:nth-child(16) .brand_lead{
        height: 186px;
    }	
}

/*スマホ 大*/
@media only screen and (min-width: 394px) and (max-width: 768px) {
    .brandBox .brand:first-child .brand_lead{
        height: 211px;
    }
    .brandBox .brand:nth-child(2) .brand_lead{
        height: 211px;
    }
	.brandBox .brand:nth-child(3) .brand_lead{
        height: 269px;
    }	
	.brandBox .brand:nth-child(4) .brand_lead{
        height: 269px;
    }
    .brandBox .brand:nth-child(5) .brand_lead{
        height: 249px;
    }
    .brandBox .brand:nth-child(6) .brand_lead{
        height: 249px;
    }
	.brandBox .brand:nth-child(7) .brand_lead{
        height: 250px;
    }
    .brandBox .brand:nth-child(8) .brand_lead{
        height: 250px;
    }	
	.brandBox .brand:nth-child(9) .brand_lead{
        height: 252px;
    }		
    .brandBox .brand:nth-child(10) .brand_lead{
        height: 252px;
    }
    .brandBox .brand:nth-child(11) .brand_lead{
        height: 269px;
    }	
    .brandBox .brand:nth-child(12) .brand_lead{
        height: 269px;
    }
    .brandBox .brand:nth-child(13) .brand_lead{
        height: 243px;
    }	
    .brandBox .brand:nth-child(14) .brand_lead{
        height: 242px;
    }		
    .brandBox .brand:nth-child(15) .brand_lead{
        height: 165px;
    }	
    .brandBox .brand:nth-child(16) .brand_lead{
        height: 167px;
    }
	
    .brand:nth-of-type(14) .logo {
        width: 80%!important;
        margin: 8% 0;
    }	
    .brand:nth-of-type(15) .logo {
		margin: 17% 0;
    }	
}