@charset "utf-8";
/* CSS Document */

footer {
margin-top: 0;
}

.section {
    padding: 150px 0;
}


.section-header {
text-align: center;
font-size: 2em;
font-weight: 600;
}

#intro {
    background-color: #ff8689;
}


#brand {
    background-color: #2c1316;
}

#product {
    background-color: #eaeaea;
}



.top-image {
	display: grid;
	grid-template-columns: 100vw;
	grid-template-rows: 100vh;
	background: #3397FF;
    background-image: url("img/top-image.jpg");
	background-size: cover; 
	background-repeat: no-repeat;
	line-height: 1.5em;
}
 
.top-logo {
	justify-self: center;
	align-self: center;
	width: 50%;
	max-width: 600px;
	text-align: center;
}

.intro-date {
    font-size: 2rem;
    font-weight: 600;
    color: #FFF;
    margin: 2rem;
}

.intro-textarea {
    width: 98%;
    margin: auto;
    max-width: 800px;
}

.intro-text {
    text-align: justify;
    font-size: 1.1rem;
    line-height: 2.4;
    font-weight: 600;
    letter-spacing: 1px;
}

.brand-header{
	color: #FFF;

}

.brand-inner{
    width: 98%;
    margin: auto;
    max-width: 600px;
} 


.brand-logo {
    width: 40%;
    max-width: 240px;
    margin: 40px auto;
}


.brand-text {
    text-align: justify;
    font-size: 1rem;
    line-height: 2;
    letter-spacing: 0.5px;
	color: #FFF;
}


.product-inner {
    max-width: 900px;
    margin: auto;
}



.productlist {
    display: flex;
}

.product-block {
    display: flex;
    flex-wrap: wrap;
    width: 40%;
    margin: 5%;
}
.product-number {
    width: 90%;
    margin: 10px auto 0;
    text-align: center;
    border-bottom: solid 1px;
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 600;
}


.product-name{
    width: 90%;
    margin: auto;
    text-align: center;
    border-bottom: solid 1px;
    font-size: 1rem;
    line-height: 2.4;
    font-weight: 600;
}

.product-color {
    width: 90%;
    margin: 0 auto 10px;
    text-align: center;
    font-size: 0.8rem;
    line-height: 2.4;
    font-weight: 600;
}

.product-link {
    width: 90%;
    margin: auto;
	padding: 10px;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1;
    font-weight: 600;
	border: solid 1px;
}


	
@media (max-width:1023px) {
    
    .section {
    padding: 50px 0;
}
    
.top-logo {
    width: 75%;
}

    
  .intro-textarea {
    width: 80%;
    margin: auto;
    max-width: 800px;
}  
    
    .intro-date {
    font-size: 1.75rem;
    font-weight: 600;
    color: #FFF;
    margin: 2rem;
    line-height: 1.75;
    letter-spacing: 0.1rem;
}
    
    .intro-text {
    text-align: justify;
    font-size: 1rem;
    line-height: 1.875;
    font-weight: 600;
    letter-spacing: 0;
}
    
    .brand-inner {
    width: 80%;
    margin: auto;
    max-width: 600px;
}
    
    .brand-text {
    text-align: left;
    font-size: 0.85rem;
    line-height: 2;
    letter-spacing: 0.5px;
    color: #FFF;
}
    
    .productlist {
    display: flex;
    flex-wrap: wrap;
}
    
    
    .product-block {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    margin: 10%;
}
    
    ｝