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


/*--------------------------------------------------
HIGH LIGHT PAGE
--------------------------------------------------*/

.fanrising-link{

    width: fit-content;
    margin:60px auto 0;
    padding:18px 28px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.5);
    border-radius:14px;

    text-decoration:none;

    transition:.3s;

}

.fanrising-link:hover{

    background:rgba(255,255,255,.3);

    border-color:#fff;

    transform:translateY(-3px);

    box-shadow:0 8px 24px rgba(255,255,255,.12);

}

.fanrising-logo img{

    display:block;

    width:170px;
    height:auto; margin-right: 20px;

}

.fanrising-text{

    display:flex;
    align-items:center;
	text-align: center;
    gap:15px;

    color:#fff;

    font-size:20px;
    font-weight:700;
    letter-spacing:.05em; line-height: 1.3;

}

.arrow{

    font-size:28px;

    transition:.3s;

}

.fanrising-link:hover .arrow{

    transform:translateX(8px);

}

@media screen and (max-width:767px){

.fanrising-link{

    flex-direction:column;

    gap:20px;

    padding:20px;

}

.fanrising-logo img{

    width:150px;

}

.fanrising-text{

    font-size:20px;

}

}

/*--------------------------------------------------
card
--------------------------------------------------*/

.topics-card{

    display:flex;
    align-items:flex-start;
    gap:40px;

    position:relative;

    background:#fff;
    border-radius:12px;

    padding:25px 25px 30px;
    margin-bottom:35px;

    border:1px solid rgba(255,255,255,.4);

    box-shadow:0 8px 20px rgba(0,0,0,.12);

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s cubic-bezier(.22,1,.36,1);

}

.topics-card:hover{

    transform:translateY(-6px);

    box-shadow:0 22px 45px rgba(0,0,0,.22);

}


/*--------------------------------------------------
NO
--------------------------------------------------*/

.topics-no{

    width:120px;

    flex-shrink:0;

    text-align:center;

    border-right:1px solid #ddd;

    padding-right:25px;

}

.topics-no span{

    display:block;

    font-size:15px;

    letter-spacing:.2em;

    color:#c60018;

    font-family:'Oswald',sans-serif;

    font-weight:bold;

}

.topics-no strong{

    display:block;

    font-size:60px;

    line-height:1;

    color:#c60018;

    font-family:'Oswald',sans-serif;

    transition:transform .35s cubic-bezier(.22,1,.36,1);

}

.topics-card:hover .topics-no strong{

    transform:scale(1.05);

}


/*--------------------------------------------------
BODY
--------------------------------------------------*/

.topics-body{

    flex:1;

}

.topics-en{

    font-family:'Oswald',sans-serif;

    color:#c60018;

    letter-spacing:.08em;

    font-size:22px;

    margin-bottom:5px;

    font-weight:bold;

    transition:
        letter-spacing .35s ease,
        color .35s ease;

}

.topics-card:hover .topics-en{

    letter-spacing:.16em;

    color:#980011;

}


/*--------------------------------------------------
TITLE
--------------------------------------------------*/

.topics-title{

    position:relative;

    display:block;

    padding-bottom:14px;

    margin-bottom:18px;

    font-size:25px;

    line-height:1.35;

    font-weight:700;

    color:#111;

}

.topics-title::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:70px;

    height:4px;

    background:#c60018;

    border-radius:999px;

    transition:width .45s cubic-bezier(.22,1,.36,1);

}

.topics-card:hover .topics-title::after{

    width:100%;

}


/*--------------------------------------------------
TEXT
--------------------------------------------------*/

.topics-text{

    font-size:16px;

    line-height:1.4;

    color:#444;

}


/*--------------------------------------------------
SP
--------------------------------------------------*/

@media screen and (max-width:767px){

.topics-card{

    display:block;

    padding:25px;

    margin-bottom:25px;

}

.topics-card:hover{

    transform:none;

}

.topics-no{

    width:auto;

    border:none;

    border-bottom:1px solid #ddd;

    padding:0 0 15px;

    margin-bottom:20px;

    text-align:left;

}

.topics-no span{

    font-size:14px;

}

.topics-no strong{

    font-size:56px;

}

.topics-en{

    font-size:18px;

}

.topics-title{

    /*font-size:28px;*/
    line-height:1.2;
    padding-bottom:12px;

}

.topics-title span{letter-spacing: -0.07em;}

.topics-title::after{

    width:60px;

    height:3px;

}

/*
.topics-text{
    font-size:15px;
    line-height:1.5;
}*/

}