@charset "utf-8";

.contents_outer.brandkit {
text-align: center;
line-height: 1.7;
font-size: clamp(0.875rem, 0.833rem + 0.21vw, 1rem);
}

a.guide {
display: inline-block;
color: #ff8800;
transition: .3s all;
}

a.guide:hover {
color: #fff;
}

.dl_all {
display: block;
height: 54px;
line-height: 50px;
width: 65vw;
max-width: 260px;
background: #25213E;
color: #ff8800;
outline: none;
text-align: center;
font-size: clamp(0.875rem, 0.833rem + 0.21vw, 1rem);
font-weight: 400;
margin: 50px auto 80px;
position: relative;
border: 2px solid #ff8800;
transition: .3s all;
}

.contents_outer.brandkit .svg {
margin-left: 10px;
}

.contents_outer.brandkit a:hover .svg {
   fill: #25213E;
}

.dl_all:hover {
background: #ff8800;
color: #25213E;
border: 2px solid #25213E;
}

.contents_outer.brandkit h4 {
font-size: clamp(1.25rem, 1.125rem + 0.63vw, 1.625rem);
line-height: 1;
}

.brandkit_wrap {
padding: 10px 0 0;
margin-bottom: 90px;
}

.brandkit_wrap li:first-child {
margin-bottom: 10px;
}

.asset.dark,
.asset.light {
width: 100%;
border: 1px solid #ff8800;
background: #fff;
}

.asset.dark { background: #fff; }
.asset.light { background: #25213E; }

.asset.wide{ max-width: 400px; }
.asset.square { max-width: 220px; }

.dl_wrap {
display: flex;
justify-content: center;
column-gap: 5px;
}


.contents_outer.brandkit .svg_dl {
margin-left: 1px;
}

.dl_png a,
.dl_svg a {
color: #fff;
transition: .3s all;
display: inline-block;
padding: 5px 10px;
font-size: clamp(0.813rem, 0.792rem + 0.1vw, 0.875rem);
}

.dl_png a:hover,
.dl_svg a:hover {
color: #ff8800;
}

.parallel {
display: flex;
column-gap: 15px;
}

.parallel .p_wrap {
width: 100%;
}

.brandkit_wrap.mono li {
margin-bottom: 10px;
}

@media screen and (min-width: 768px) {
.brandkit_wrap {
display: flex;
justify-content: center;
column-gap: 15px;
}

.brandkit_wrap li {
width: 100%;
max-width: 400px;
}

.logo_m-t_outer {
display: flex;
justify-content: center;
column-gap: 15px;
}

.inner {
width: 100%;
max-width: 400px;
}

.brandkit_wrap.mono {
display: flex;
justify-content: center;
flex-wrap:wrap;
column-gap: 15px;
}

.brandkit_wrap.mono li {
width: calc((100%/2) - 15px);
max-width: 400px;
}
}


@media screen and (min-width: 1024px) {
.dl_png a,
.dl_svg a {
padding: 5px 10px 10px;
}
}