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

.main {
    background: url(imgs/main01.png) no-repeat center center;
    background-size: 100% auto;
}


.maintxt{
border-bottom: solid 1px #ccc; 
padding-bottom: 6em;
}


.trend_ttl{
font-style: normal;
font-size: 2em;
font-weight: 500;
text-align: center;
letter-spacing: .1em;
text-indent: .1em;

margin: 1em 0;
}
.cname_ttl{
font-size: 1.5em;
font-weight: 500;
margin: 1em 0 0;
}
.cname_ttl::first-letter {
 font-size: 1.1em;
}
.cname_ttl span{
font-size: 14px;
display: inline-block;
margin-left: 3em;
}



/*--流行色　まるいの------------------------------------------------------------------------*/

.d_rbox{
padding-bottom: 20px;
}


.d_rbox ul{
width: 100%;
display: flex;
flex-wrap: wrap;
space-between: space-between;
margin: 20px 0 80px;
}
.d_rbox ul:last-child{
margin-bottom: 40px;
}

/*基本5列です*/
.d_rbox ul li{
width:20%;
text-align: center;
font-size: 13px;
line-height: 1.4em;
}

.cbox {
height: 100px;
width: 100px;
display: block;
border-radius: 50%;
margin: 0 auto 10px;
border: solid 1px #ccc;
}


@media screen and (max-width: 1024px) {
.d_rbox ul li {
width: 32%;
margin-right: 2%;
margin-bottom: 30px;
}
.d_rbox ul li:nth-child(3n){
margin-right:0;
}
.cbox {
height: 60px;
width: 100%;
border-radius: 10px;
}
}


@media screen and (max-width: 860px) {
.cname_ttl span{
font-size: 14px;
display: block;
margin-left: 0;
}
.d_rbox ul li:nth-child(3n){
margin-right: auto;
}
.d_rbox ul li {
width: 48%;
margin-right: auto;
}
.d_rbox ul li:nth-child(2n){
margin-right: 0!important;
}
}
/*--流行色INDEX *--提案色　ナビ------------------------------------------------------------------------*/

.Back_number{
margin-top: 20px;
border-top: solid 1px #ccc;
}

.nav_trend {
flex-wrap: wrap;
display: flex;
/*justify-content: space-between;*/
}
.nav_trend li{
position: relative;
font-size: 13px;
box-sizing: border-box;
text-align: center;
width: 20%;
display: block;
margin: 10px 0;
}

.nav_trend li a[href$=".pdf"]{
margin-left:18px;
}


@media screen and (max-width: 1024px) {
.nav_trend li{
width: 25%;
}
.nav_trend:after {
content: none;
}
}

@media screen and (max-width: 860px) {
.nav_trend li{
width: 33.3%;
margin-left: -5px;/*後ろにアイコンがついている分中央がずれてるように見えるので調製*/
}
.nav_trend::before{
content:"";
display: block;
width: 33.3%;
order:1;
}

}
@media only screen and (max-width:480px){
.nav_trend li a[href$=".pdf"]{
margin-left:0;
}
a[href$=".pdf"] {
padding-right: 15px;
}
.nav_trend li {
margin-left: 0;
}

}