@charset "utf-8";

:root{
    --characterColor-red: #ED6B6B;
    --characterColor-blueGreen: #30BFBF;
    --characterColor-green: #6AB891;
    --characterColor-black: #515254;
    --characterColor-pink: #E2B4E3;
    --characterColor-orange: #EEA74F;
    --characterColor-blue: #4284E8;
}

/*================================
Article header section--character
================================*/
.article__header{
    margin-top: 80px;
}

.titleSubCharacter{
    display: block;
    text-align: center;
}

.title__character{
    display: flex;
    justify-content: center;
    margin: 0 auto;
    align-items: center;
    width: 41.3%;
    height: auto;
}

.title img{
    width: 77px;
    height: auto;
}

.subTxt{
    margin-top: 30px;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 2;
}

.section--character{
    margin: 60px var(--margin-pc) 0;
    max-width: 1120px;
}

/* 1441px以上の横幅でも、コンテンツを中央にする↓ */
@media screen and (min-width: 1441px){
    .section--character{
        margin: 60px auto 0;
    }
}

.character__item{
    margin-top: 100px;
}

.character__item:first-child{
    margin-top: 60px;
}

.emblem{
    display: flex;
    justify-content: center;
    margin: 0 auto;
    align-items: center;
    gap: 20px;
}

.emblem img{
    width: 4.46%;
    height: auto;
}

.emblemTopic{
    color: var(--primary-title);
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1;
}

.emblemTopic span{
    font-size: 2.8rem;
}

.emblemTxt{
    margin-top: 20px;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.33;
}

.character{
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.spName{
    display: none;
}

.introduction{
    width: 30%;
}

.name{
    display: block;
    text-align: center;
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.33;
}

.txt{
    margin-top: 30px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.5;
}

.meet{
    padding: 20px 4%;
    border-radius: 25px;
    border: 2px solid var(--primary-txt);
    width: 39.6%;
}

.title__meet{
    color: var(--primary-title);
    text-align: center;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.2;
}

.meet__imgTxt{
    margin-top: 16px;
    display: flex;
    align-items: center;
    transition: all 0.4s ease-in-out;
}

.meet__imgTxt img{
    width: 46.7%;
    height: auto;
    margin-right: 2.73%;
}

.txt__meet{
    text-align: center;
    font-weight: 500;
    line-height:  1.5;
    text-decoration-line: underline;
    text-decoration-style: solid;
}

/*==========================
以下、キャラごとの色別設定
==========================*/
.emblemTopic__red span,
.name__red{
    color: var(--characterColor-red);
}

.emblemTopic__blueGreen span,
.name__blueGreen{
    color: var(--characterColor-blueGreen);
}

.emblemTopic__green span,
.name__green{
    color: var(--characterColor-green);
}

.emblemTopic__black span,
.name__black{
    color: var(--characterColor-black);
}

.emblemTopic__pink span,
.name__pink{
    color: var(--characterColor-pink);
}

.emblemTopic__orange span,
.name__orange{
    color: var(--characterColor-orange);
}

/* blue */
.emblemTopic__blue span,
.name__blue{
    color: var(--characterColor-blue);
}

.character__blue img{
    width: 23.2%;
    height: auto;
}

.introduction__blue{
    text-align: center;
}

.meet__blue{
    padding: 47px 4%;
    text-align: center;
}

.txt__meet--blue{
    margin-top: 28px;
    font-weight: 500;
    line-height: 1.5;
}

/*==========================
slick
==========================*/
.character__slider{
    width: 23.2%;
    height: auto;
    left: 0;
    bottom: 0;
}

.character__slider .slick-list{
    width: 100%;
}