@charset "UTF-8";
body {
font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color: #333333;
}
a {
color: inherit;
text-decoration: none;
}
html,body {
height: 100%;
min-height: 100%;
}
.wrapper {
min-height: 100%;
display: flex;
flex-flow: column;
}
.wrapper #top-article {
width: 1200px;
margin: 100px auto;
flex: 1;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
.wrapper #top-article > p {
margin: 0 0 100px;
text-align: center;
}
.wrapper h2 {
font-size: 18px;
padding: 5px;
text-align: center;
font-weight: bold;
color: #ffffff;
}
.wrapper h3 {
font-size: 18px;
padding: 5px 5px 20px;
text-align: center;
}
#top-3brands img {
width: 200px;
}
.wrapper header {
height: 97px;
border-bottom: solid 1px #DFDFDF;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper footer {
background: #F5F5F5;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
}
#top-3brands a {
transition: opacity 0.3s;
}
#top-3brands a:hover {
opacity: 0.6;
}
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 0.3, 1fr;
grid-column-gap: 50px;
grid-row-gap: 10px;
}
.div1 { 
grid-area: 1 / 1 / 2 / 2;
/* border: solid 1px #7D7D7D; */
border-radius: 5px;
background: #fda30c;
}
.div2 {
grid-area: 1 / 2 / 2 / 4;
/* border: solid 1px #7D7D7D; */
border-radius: 5px;
background: #63bac7;
}
.div3 {
grid-area: 2 / 1 / 3 / 2;
border: solid 2px #8EB152;
border-radius: 5px;
padding: 20px;
height: 150px;
text-align: center;
}
.div4 {
grid-area: 2 / 2 / 3 / 3;
border: solid 2px #00446A;
border-radius: 5px;
padding: 20px;
height: 150px;
text-align: center;
}
.div5 {
grid-area: 2 / 3 / 3 / 4;
border: solid 2px #EE696F;
border-radius: 5px;
padding: 20px;v
height: 150px;
text-align: center;
}
.is-pc {
display: block;
}
.is-sp {
	display: none;
}

@media screen and (max-width: 600px) {
html {
	font-size: 2.666667vw;
}
body {
	font-size: 1.4rem;
	font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #333333;
}
a {
color: inherit;
text-decoration: none;
}
html,body {
height: 100%;
min-height: 100%;
}
.wrapper {
min-height: 100%;
display: flex;
flex-flow: column;
}
.wrapper header {
height: 6rem;
border-bottom: solid 1px #DFDFDF;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper header h1 {
width: 12.1rem;
}
.wrapper header h1 img {
height: auto;
}
.wrapper footer {
background: #F5F5F5;
height: 4.7rem;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.0rem;
}
.wrapper #top-article {
width: auto;
margin: 3.2rem 1.8rem 3.6rem;
flex: 1;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
.wrapper #top-article > p {
margin: 0 0 3.4rem;
text-align: center;
}
.wrapper h2 {
font-size: 15px;
padding: 5px;
text-align: center;
writing-mode: vertical-rl;
letter-spacing: 0.12em;
}
.wrapper h3 {
font-size: 18px;
padding: 15px 5px 20px;
text-align: center;
}
#top-3brands img {
width: 150px;
}
.wrapper header {
height: 97px;
border-bottom: solid 1px #DFDFDF;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper footer {
background: #F5F5F5;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
}
#top-3brands a {
transition: opacity 0.3s;
}
#top-3brands a:hover {
opacity: 0.6;
}
.parent {
display: grid;
grid-template-columns: 0.1fr 1fr;
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 10px;
grid-row-gap: 20px;
}
.div1 { 
grid-area: 1 / 1 / 2 / 2;
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.div2 {
grid-area: 2 / 1 / 4 / 2;
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.div3 {
grid-area: 1 / 2 / 2 / 3;
border: solid 2px #8EB152;
border-radius: 5px;
padding: 10px;
height: 150px;
text-align: center;
}
.div4 {
grid-area: 2 / 2 / 3 / 3;
border: solid 2px #00446A;
border-radius: 5px;
padding: 10px;
height: 150px;
text-align: center;
}
.div5 {
grid-area: 3 / 2 / 4 / 3;
border: solid 2px #EE696F;
border-radius: 5px;
padding: 10px;
height: 150px;
text-align: center;
}
.is-pc {
	display: none;
}
.is-sp {
display: block;

}
}