/* ===================== */

/* Header section */

.header__logo {
    position: relative;
    z-index: 1000;
    width: 200px;
    max-width: 100%;
    margin:0 auto;
}

.header__logo a:hover {
    opacity: 0.8;
}

.header__title {
    width: 110%;
    margin-left: -5%;
    margin-bottom: -4%;
}
.header__title img {
    width: 100%;
}



/* ===================== */

/* Hero */

.information-holder:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 70%;
    background: linear-gradient(180deg, #F4F5F7 0%, #8DF1F3 55.29%, #162E87 100%);
    bottom: 0;
    left: 0;
}
.information-holder {
    background: url(../images/hero-bg.png) no-repeat center top;
    /* background-size: contain, cover; */
    position: relative;
}

.information-holder__inner {
    padding:30px 70px 80px;
    position: relative;
    background: url(../images/inner-bg.jpg) center top;
}

.campaign-hero {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.campaign-hero__bg-sp {
    display: none;
}

.campaign-hero__inner {
    position: relative;
    width: min(100%, 740px);
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Magic frame player area */
.video-mask {
    position: absolute;
    z-index: 1;
    width: 85%;
    height: 75%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    background: #000;
}

.bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.frame-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background-image: url('../images/frame.png');
    background-image: image-set(
        url('../images/frame.webp') type('image/webp'),
        url('../images/frame.png') type('image/png')
    );
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Layout for ranking-summary */


.ranking-summary {
border: 2px solid;
border-image-source: linear-gradient(270deg, #714B0B 0%, #D78E15 58.65%, #714B0B 100%);
background-color: var(--color-white);
}

.ranking-summary__content {
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: 40px;
    border: 2px solid;
    border-image-source: none;
    border-image-source: linear-gradient(270deg, #714B0B 0%, #D78E15 58.65%, #714B0B 100%);
    margin-bottom: 100px;
}

.ranking-summary__count {
    font-size: 35px;
    font-weight: bold;
    text-align: center;
    margin: 60px auto 15px;
    line-height: 1;
}

/* ===== title ===== */

.ranking-summary__title {
    width: 510px;
    margin: 0 auto 40px;
    max-width: 100%;
}

.ranking-summary__title-image {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

/* ===== stamps ===== */

.ranking-summary__stamps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 140px;
}

/* 4 per row on desktop */
.ranking-summary__stamp {
    position: relative;
    flex: 0 0 calc(18% - 18px);
    padding-top: 18%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    overflow: hidden;
}

/* base: READY state per index */
/* 1 */
.ranking-summary__stamp--1 {
    background-image: url('../images/paper_q.png');
}

.ranking-summary__stamp--1.ranking-summary__stamp--filled {
    background-image: url('../images/achievement_box_1_done.png');
}

/* 2 */
.ranking-summary__stamp--2 {
    background-image: url('../images/paper_q.png');
}

.ranking-summary__stamp--2.ranking-summary__stamp--filled {
    background-image: url('../images/achievement_box_2_done.png');
}

/* 3 */
.ranking-summary__stamp--3 {
    background-image: url('../images/paper_q.png');
}

.ranking-summary__stamp--3.ranking-summary__stamp--filled {
    background-image: url('../images/achievement_box_3_done.png');
}

/* 4 */
.ranking-summary__stamp--4 {
    background-image: url('../images/paper_q.png');
}

.ranking-summary__stamp--4.ranking-summary__stamp--filled {
    background-image: url('../images/achievement_box_4_done.png');
}

/* 5 */
.ranking-summary__stamp--5 {
    background-image: url('../images/paper_q.png');
}

.ranking-summary__stamp--5.ranking-summary__stamp--filled {
    background-image: url('../images/achievement_box_5_done.png');
}

/* 6 */
.ranking-summary__stamp--6 {
    background-image: url('../images/paper_q.png');
}

.ranking-summary__stamp--6.ranking-summary__stamp--filled {
    background-image: url('../images/achievement_box_6_done.png');
}

/* 7 */
.ranking-summary__stamp--7 {
    background-image: url('../images/paper_q.png');
}

.ranking-summary__stamp--7.ranking-summary__stamp--filled {
    background-image: url('../images/achievement_box_7_done.png');
}

/* 8 */
.ranking-summary__stamp--8 {
    background-image: url('../images/paper_q.png');
}

.ranking-summary__stamp--8.ranking-summary__stamp--filled {
    background-image: url('../images/achievement_box_8_done.png');
}

/* 9 */
.ranking-summary__stamp--9 {
    background-image: url('../images/paper_q.png');
}

.ranking-summary__stamp--9.ranking-summary__stamp--filled {
    background-image: url('../images/achievement_box_9_done.png');
}

/* 10 */
.ranking-summary__stamp--10 {
    background-image: url('../images/paper_q.png');
}

.ranking-summary__stamp--10.ranking-summary__stamp--filled {
    background-image: url('../images/achievement_box_10_done.png');
}

/* ===== speech bubble & rank ===== */

.ranking-summary__speech:before {
    content: '';
    background: url(../images/achievement_pi.png);
    position: absolute;
    left: -60px;
    bottom: -40px;
    width: 180px;
    height: 140px;
}
.ranking-summary__speech {
    position: relative;
    border: 2px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(270deg, #714B0B 0%, #D78E15 58.65%, #714B0B 100%);
    background: #fff;
    padding: 100px 60px 60px;
    text-align: center;
}

.ranking-summary__speech .title {
    width: 380px;
    margin: -160px auto 35px;
    max-width: 100%;
}

.ranking-summary__speech-inner {

}

.ranking-info {
    display: flex;
    align-items: baseline;
    gap: 10px;
    justify-content: center;
    margin-bottom: 15px;
}

.ranking-summary__text span {
    font-size: 30px;
    display: block;
    margin-bottom: 20px;
    font-weight: bold;
    line-height: 1;
}
.ranking-summary__text {
    margin-bottom: 35px;
    text-align: center;
    font-size: 20px;
}

ul.ranking-summary__socials {
    display: flex;
    gap: 35px;
    justify-content: center;
}

ul.ranking-summary__socials li a:hover {
    cursor: pointer;
    opacity: 0.8;
}

/* label + crown via pseudo */

.ranking-summary__rank-label {
    position: relative;
    font-size: 40px;
    font-weight: bold;
    color: var(--color-black);
    line-height: 1;
}

/* rank number */

.ranking-summary__rank-value {
    margin: 0;
    font-size: 50px;
    line-height: 1;
    font-weight: 900;
    color: #DF0000;
}

.ranking-summary__rank-value span {
    font-size: 5.4rem;
    color: #DF0000;
    font-weight: bold;
    line-height: 1;
}

.ranking-summary__buttons.pc-only {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.ranking-summary__buttons li a:hover {
    opacity: 0.8;
}

/* Ranking Summary End */

/* ===================== */
/* Layout for guide */
.overview {
    background: url(../images/overview-bg.png) repeat center top/contain;
    display: flex;
    gap: 100px;
    padding: 120px 25px 140px;
    flex-direction: column;
}


.overview__inner {
    display: flex;
    flex-direction: column;
    width: 960px;
    max-width: 100%;
    margin: 0 auto;
    gap: 140px;
}

/* ===================== */
/* Layout for guide STEP*/

.guide {}

.guide__content {
    background: url(../images/inner-bg.jpg) no-repeat center top;
    padding: 90px 95px 65px;
    position: relative;
}

.guide__header {
    width: 380px;
    margin: -150px auto 40px;
    max-width: 100%;
}

.guide__steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.guide__step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    justify-content: center;
}

.guide__step-head {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
}

ul.guide__steps li .guide__step.guide__step-number {
    position: relative;
}

.guide__step-number {
    position: relative;
    top: 0;
}

.guide__step-number img {
    display: block;
    width: 100px;
    height: auto;
    position: relative;
    z-index: 1;
}

.guide__step-body {
    flex: 1;
}

.guide__step-title {
    font-size: 23px;
    font-weight: 900;
    margin-bottom: 20px;
    line-height: 1.4;
}

.guide__step-description {
    font-size: 15px;
}
.guide__step-description .gray {
    color: #8C8C8C;
}

.guide__step-text:before {
    content: "";
    position: absolute;
    top: 10%;
    left: -15px;
    border-width: 15px 20px 15px 0;
    border-style: solid;
    border-color: transparent var(--color-white) transparent transparent;
}

.guide__step-text-sub {
    margin: 30px auto;
}

.guide__step-text {
    position: relative;
    background: var(--color-white);
    padding: 35px 50px;
    border-radius: 10px;
    width: 640px;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.guide__step-img {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin-bottom: 40px;
}

.guide__buttons a {
    margin-top: 20px;
    display: block;
    max-width: 100%;
    padding: 0 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    line-height: 34px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-white);
    transition: background 0.3s ease;
    background: linear-gradient(180deg, #A434FF 50%, #7319CE 50%);
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.15);
}

.guide__buttons a:hover {
    opacity: 0.8;
}

/* ===================== */
/* Layout for campaign */
.campaign {}

.campaign__content {
    background: url(../images/inner-bg.jpg) repeat center top;
    padding: 90px 80px;
}

.campaign__header {
    text-align: center;
}

.campaign__header {
    width: 380px;
    margin: -150px auto 40px;
    max-width: 100%;
}

.campaign__section {
    margin-bottom: 50px;
    background-color: var(--color-white);
}

.campaign__section:last-of-type {
    margin-bottom: 0;
}

.campaign__heading {
    font-size: 24px;
    color: var(--color-white);
    background: #0B1763;
    text-align: center;
    padding: 12px;
    font-weight: 900;
}

.campaign__list {
    padding: 20px;
}

.campaign__list--notes {
    font-size: 12px;
}

.campaign__list--notes a {
    text-decoration: underline;
}

.campaign__list--notes a:hover {
    text-decoration: none;
}



.campaign__list--notes li:first-child {
    display:block;
}

.campaign__list--notes span {
    padding-left: 1em;
}

.campaign__list li:before {
    /* content: "•";       
    padding-right: 8px;
    flex-shrink: 0;     
    color: inherit; */
    content: "•";
    position: absolute;
    left: 5px;
    top: 0;
    color: inherit;
}

.campaign__list li {
    line-height: 1.75;
     /* display: flex; */ 
    list-style: none;
    position: relative;
    padding-left: 15px;
}

.campaign__list--bordered {
    margin: 20px 0 25px;
}

ul.campaign__list--bordered li {
    padding: 15px 0;
    border-bottom: 1px solid var(--color-gray1);
    display: flex;
    align-items: center;
}

ul.campaign__list--bordered li span {
    width: 15%;
    font-weight: 700;
}

ul.campaign__list--bordered li p {
    width: 85%;
    line-height: 2;
}

ul.campaign__list--bordered li:first-child {
    border-top: 1px solid var(--color-gray1);
}

.campaign__prize-group {
    padding:20px;
}

.campaign__subheading {
    margin-bottom: 10px;
    font-size: 20px;
}

.campaign__group {
    line-height: 1.5;
}

.campaign__container {
    padding: 20px;
}
 
.campaign__prize-group p {
    margin-bottom: 20px;
}

.campaign__text {
    line-height: 1.5;
}

.campaign__prize-group .campaign__text li {
    /* display: block; */
    list-style: none;
    position: relative;
    padding-left: 15px;
}

.campaign__prize-group .campaign__text li:before {
    /* content: "•";
    padding-right: 8px;
    flex-shrink: 0;
    color: inherit; */
    content: "•";
    position: absolute;
    left: 5px;
    top: 0;
    color: inherit;
}

ul.campaign__list-text {
    display: flex;
    flex-direction: column;
}

ul.campaign__list-text li:before {
    content: "•";
    padding-right: 8px;
    flex-shrink: 0;
    color: inherit;
}

ul.campaign__list-text li {
    line-height: 1.5;
}

.overview span.gray, p.gray {
    font-size: 14px;
    color: var(--color-gray1);
    display: block;
}


/* interview section */

/*.hero { padding-bottom:0; }*/
.interview {
    box-sizing: border-box;
    background: url(../images/ranking_bg_repeat.png) repeat center top;
    background-size: auto;
    position: relative;
    padding: 0 25px;
}

/*  */

.interview__container {
    display: flex;
    gap: 80px;
    padding: 80px 80px 250px;
    flex-direction: column;
    position: relative;
}

.interview__inner {
    padding: 40px;
    border-radius: 40px;
    position: relative;
    z-index: 10;
    border: 40px solid #fbfcec;
    background-color: var(--color-white);
    width: 960px;
    max-width: 100%;
    margin: 0 auto;
}

.interview__inner h2 {
    width: 510px;
    max-width: 100%;
    margin: 30px auto 65px;
}

/* one ranking row */
.ranking {
    margin-bottom: 40px;
    /* space between 1st / 2nd / 3rd rows */
}

.ranking:last-of-type {
    margin-bottom: 0;
}

.ranking-holder {
    border: 2px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(270deg, #714B0B 0%, #D78E15 58.65%, #714B0B 100%);
    background: #fff;
    padding: 60px 40px 40px;
}

.ranking-holder .title {
    width: 380px;
    margin: -125px auto 40px;
    max-width: 100%;
}

/* center the content if you want a max width */
.ranking__layout {
    max-width: 100%;
    margin: 0 auto;
}

/* left (images) + right (text) */
.ranking__row {
    display: flex;
    align-items: center;
    gap: 45px;
    justify-content: center;
}

/* the two thumbs (character + medal) */
.ranking__thumbs {

}


.ranking__thumbs li img {
    display: block;
    height: auto;
    max-width: 100%;
}

/* right side text column */
.ranking__text {
    display: flex;
    line-height: 100%;
    align-items: flex-end;
    gap: 40px;
}

/* “120レッスン” */
.ranking__num {
    font-size: 24px;
    font-weight: bold;
    line-height: 100%;
}

.ranking__num span {
    font-size: 45px;
    color: var(--color-secondary);
}

/* name line */
.ranking__name {
    font-size: 24px;
    font-weight: bold;
    line-height: 100%;
    color:var(--color-black);
}

.ranking__name span {
    display: inline-block;
}

.ranking__name small {
    font-size: 1em;
    margin-left: 0.25em;
}




/* ===================== */
/* Layout for footer */

.footer:before {
    content: '';
    background: url(../images/share_bg_left.png) no-repeat bottom center/contain;
    position: absolute;
    left: 0;
    top: auto;
    width: 315px;
    height: 90%;
    bottom: 0px;
}

.footer::after {
    content: '';
    background: url(../images/share_bg_right.png) no-repeat bottom center/contain;
    position: absolute;
    right: 0;
    top: auto;
    width: 280px;
    height: 90%;
    bottom: 0;
}

.footer {
    background: var(--color-white);
    height: 280px;
    position: relative;
    padding: 45px 0;
    box-sizing: border-box;
    overflow: hidden
}

.footer__wrapper {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.footer__title {
    font-size: 40px;
    font-weight: bold;
    color: var(--color-gray);
}

.footer__text {
    font-size: 16px;
    color: var(--color-black);
    position: relative;
    z-index: 10;
    font-weight: bold;
}

.footer__socials {
    display: flex;
    justify-content: center;
    gap: 40px;
    position: relative;
    z-index: 10;
    margin-top: 20px;
}

.footer__socials li a {
    width: 240px;
    display: block;
}

.footer__socials li a:hover {
    opacity: 0.8;
    cursor: pointer;
}


.footer__social {
    width: 32px;
    height: 32px;
    background-size: contain;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
}