@charset "utf-8";

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, ch1anvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    letter-spacing: 0.4px;
}

h1, h2, h3, h4, h5, h6, p, li, dt, dd {
    font-size: 14px;
}

p, dt, dd {
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6, strong, .btn {
    font-weight: bold;
}

li {
    list-style: none;
}

img {
    width: 100%;
}

body {
    /*position:relative;*/
    overflow: scroll;
    color: #38353c;
    background: #fff;
    font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.link {
    color: #EE486D;
    text-decoration: solid underline;
}

.text-0-5 {
    font-size: 0.5em;
}

.text-0-8 {
    font-size: 0.8em;
}

.text-1 {
    font-size: 1em;
}

.text-1-2 {
    font-size: 1.2em;
}

.text-color-gray {
    /* color: #999; */
}

.margin-top-10 {
    margin-top: 10px;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-30 {
    margin-top: 30px;
}

.margin-top-40 {
    margin-top: 40px;
}

.margin-btm-10 {
    margin-bottom: 10px;
}

.margin-btm-20 {
    margin-bottom: 20px;
}

.margin-btm-30 {
    margin-bottom: 30px;
}

.margin-btm-40 {
    margin-bottom: 40px;
}

.margin-left-10 {
    margin-left: 10px;
}

.margin-left-20 {
    margin-left: 20px;
}

.margin-left-30 {
    margin-left: 30px;
}

.margin-left-40 {
    margin-left: 40px;
}

.margin-right-10 {
    margin-right: 10px;
}

.margin-right-20 {
    margin-right: 20px;
}

.margin-right-30 {
    margin-right: 30px;
}

.margin-right-40 {
    margin-right: 40px;
}

.display-flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.justify-content-start {
    justify-content: flex-start;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-around {
    justify-content: space-around;
}

.justify-content-center {
    justify-content: center;
}

.align-items-start {
    align-items: start;
}

.align-items-end {
    align-items: end;
}

.align-items-center {
    align-items: center;
}

.align-items-baseline {
    align-items: baseline;
}

.align-items-stretch {
    align-items: stretch;
}

body.eazy {
    background: #f1f1f1;
}

body.moa {
    background: #fff0f3;
}

body.osaka {
    background: #f3f3f3;
}

body.tokyo {
    background: #f3f3f3;
}


input[type="submit"],
input[type="button"] {
    -webkit-appearance: none;
    border-radius: 0;
}

body a,
body.eazy a {
    color: #EE486D;
}

body.moa a {
    color: #fe7b93;
}

body.osaka a {
    color: #edd000;
}

body.tokyo a {
    color: #71ceea;
}

.fBlue {
    color: #FC4C02;
    font-weight: bold;
}

body.eazy .fBlue {
    color: #FC4C02;
}

body.moa .fBlue {
    color: #fe7b93;
}

body.osaka .fBlue {
    color: #edd000;
}

body.tokyo .fBlue {
    color: #71ceea;
}


.fGray {
    color: #999;
}

.fRed {
    color: #ff4342;
    font-weight: bold;
}

.fYellow {
    color: #ffab03;
    font-weight: bold;
}

.errorMessage {
    color: #ff4342;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

#totop {
    position: fixed;
    display: block;
    background: #018cf9;
    width: 35px;
    height: 35px;
    border-radius: 17px;
    bottom: 20px;
    right: 20px;
    opacity: 0.85;
}

body.eazy #totop {
    background: #018cf9;
}

body.moa #totop {
    background: #fe7b93;
}

body.osaka #totop {
    background: #edd000;
}

body.tokyo #totop {
    background: #71ceea;
}


#totop img {
    display: block;
    width: 17px;
    margin: 5px auto;
    height: 23px;
}


header {
    position: relative;
    padding: 1em;
    background: #FC4C02;
    color: #fff;
    margin-bottom: 1em;
}

header h1 {
    font-size: 18px;
    text-align: center;
}

header .prev {
    position: absolute;
    top: 1.3em;
    left: 1em;
    background: url(../img/arrow_prev.png) 0 0 no-repeat;
    background-size: 20px;
    width: 20px;
    height: 18px;
}

header .next {
    position: absolute;
    top: 1.3em;
    right: 1em;
    background: url(../img/arrow_next.png) 0 0 no-repeat;
    background-size: 20px;
    width: 20px;
    height: 18px;
}

header .prev a, header .next a {
    display: block;
    width: 100%;
    height: 100%;
}


.tab {
    width: 100%;
    overflow: hidden;
    background: #fff;
    border-bottom: 2px solid #d0d0d0;
    margin-bottom: 1em;
}

.tab li {
    float: left;
    text-align: center;
    padding: 8px 0;
    border-bottom: 5px solid #fff;
}

.tab.two li {
    width: 49%;
    float: left;
}

.tab.three li {
    width: 33%;
    float: left;
}

.tab li.active, .tab li:hover {
    border-bottom: 5px solid #FC4C02;
}

body.eazy .tab li.active,
body.eazy .tab li:hover {
    border-bottom: 5px solid #FC4C02;
}

body.moa .tab li.active,
body.moa .tab li:hover {
    border-bottom: 5px solid #fe7b93;
}

body.osaka .tab li.active,
body.osaka .tab li:hover {
    border-bottom: 5px solid #edd000;
}

body.tokyo .tab li.active,
body.tokyo .tab li:hover {
    border-bottom: 5px solid #71ceea;
}

.tab li a {
    display: block;
    border-left: 2px solid #d0d0d0;
    height: 1.8em;
    line-height: 1.8em;
    color: #38353c;
    text-decoration: none;

}

.tab li:first-child a {
    border: none;
}

.titleArea {
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid #d0d0d0;
    margin-bottom: 1em;
    text-align: center;
    padding: 0.6em 0.6em 0.5em;
}

.titleArea.radius {
    width: 90%;
    margin: 0 auto 1em;
    border-radius: 3px;
    color: #FC4C02;
}


#main {
    padding: 0 2.2% 40px;

}

#main section .container {
    border-radius: 3px;
    background: #fff;
    border: 1px solid #d0d0d0;
    margin-bottom: 1em;
}

section h2.sectionTitle {
    padding: 0 0 0.5em 1em;
    font-size: 16px;
}

.firstText {
    margin-bottom: 0.5em;
    text-align: center;

}

.btn.main {
    width: 90.9%;
    margin: 15px auto;
    text-align: center;
}

.two .btn {
    width: 48%;
}

.two .btn:first-child {
    float: left;
}

.two .btn.main + .btn.main {
    float: right;
}

.two .btn.main {
    float: left;
}

.two .btn.cancel {
    float: right;
}

.btnContainer.two:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

.btn input {
    display: block;
    width: 100%;
    border: none;
    line-height: 1.5em;
    font-size: 14px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.btn.main a,
.btn.main input {
    display: block;
    background: #EE486D;
    color: #fff;
    padding: 0.8em 0 0.7em;
    border-radius: 7px;
    text-decoration: none;
}

body.eazy .btn.main a,
body.eazy .btn.main input {
    background: #FC4C02;
    color: #fff;
}

body.moa .btn.main a,
body.moa .btn.main input {
    background: #fe7b93;
    color: #fff;
}

body.osaka .btn.main a,
body.osaka .btn.main input {
    background: #edd000;
    color: #fff;
}

body.tokyo .btn.main a,
body.tokyo .btn.main input {
    background: #71ceea;
    color: #fff;
}


.btn.cancel {
    width: 90.6%;
    margin: 0 auto;
    text-align: center;
}

.btn.cancel a {
    display: block;
    background: #999;
    color: #fff;
    padding: 0.8em 0;
    border-radius: 7px;
    text-decoration: none;
}

.btn.back {
    width: 4em;
    margin: 0 auto;
    text-align: center;
}


.btn.back a {
    display: block;
    background: #999;
    color: #fff;
    padding: 0.4em 0 0.3em;
    border-radius: 3px;
    text-decoration: none;
    margin-top: 1.4em;
}


.containerTitle {
    border-bottom: 1px solid #d0d0d0;
    padding: 0.8em 0.6em 0.7em;
    font-weight: bold;
}

.btnContainer .attention {
    text-align: center;
    margin-bottom: 0.5em;
}


/********* #popup *********/

#popup {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
}

#popupContents {
    width: 86%;
    border-radius: 7px;
    position: absolute;
    top: 3em;
    left: 7%;
    background: #fff;
    z-index: 10000;
    max-height: 100%;
    /*overflow: auto;*/
}

#popupContents p.title {
    color: #fff;
    padding: 0.8em;
    background: #FC4C02;
    border-radius: 6px 6px 0 0;
    text-align: center;
    font-weight: bold;
}

body.eazy #popupContents p.title {
    background: #FC4C02;
}

body.moa #popupContents p.title {
    background: #fe7b93;
}

body.osaka #popupContents p.title {
    background: #edd000;
}

body.tokyo #popupContents p.title {
    background: #71ceea;
}


#popupContents p.text {
    padding: 0 0.6em;
}


#popupContents .btnContainer {
    width: 90%;
    margin: 0 auto 1em;
    overflow: hidden;
}

#popupContents .two .btn.main {
    width: 48%;
    float: right;
}

#popupContents .btn.main {
    width: auto;
}

#popupContents .btn.main a {
    border-radius: 5px;
}

#popupContents .two .btn.main a, #popupContents .two .btn.cancel a {
    border-radius: 4px;
    padding: 0.6em 0 0.5em;
}

#popupContents .two .btn.cancel {
    width: 48%;
    float: left;
}

#popup .error {
    color: #ff4342;
}

#popup ul.error, #popup p.error {
    padding: 0.4em 0.8em 0.8em;
}

#popup .error li {
    padding-top: 0.8em;
}


#stepList {
    padding-top: 0.8em;
    margin-bottom: 0.8em;
}

#stepList ul {
    text-align: center;
}

#stepList ul {
    text-align: center;
}

#stepList li {
    display: inline-block;
    margin-left: 0.1em;
    padding: 0.6em 0.8em 0.5em;
    background: #999;
    border-radius: 20px;
    color: #fff;
    font-weight: normal;
    font-size: 12px;
}

#stepList li.current {
    background: #FC4C02;
    font-weight: bold;
    font-size: 14px;
}

#stepList li:first-child {
    margin-left: 0;
}


#credixAttention {
    margin-top: 2em;
}

#credixAttention h2 {
    color: #fff;
    background: #999;
    text-align: center;
    padding: 0.5em 2.2%;
    width: 100%;
    margin: 0 0 0.5em -2.2%;
}

#credixAttention b, #credixAttention strong {
    color: #FC4C02;
}

#credixAttention h2, #credixAttention h3, #credixAttention h4 {
    font-size: 12px;
}

#credixAttention p.title {
    font-size: 12px;
    font-weight: bold;
}

#credixAttention dt, #credixAttention dd, #credixAttention p, #credixAttention li, #credixAttention address {
    font-size: 11px;
}

#credixAttention dt {
    color: #FC4C02;
    margin: 0.5em 0 0.2em;
}

#credixAttention .payment_alert {
    padding: 0.5em;
    margin: 0.5em 0;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
}

#credixAttention .payment_alert strong {
    color: #ff4342;
}

#credixAttention address {
    font-style: normal;
}


#popup p.fBlue {
    text-align: center;
    margin: 0.8em 0;
}

#popup dl {
    overflow: hidden;
    padding: 0 0 0.2em;
    border-bottom: 1px dotted #999;
    margin: 0 0.8em 0.8em;
}


.cTitle {
    display: block;
    text-align: center;
    color: #ff4342;
    font-weight: bold;
    /*margin-top: 0.4em;*/
    margin-bottom: 0.4em;
    /* border: 1px solid #ff4342; */
    border-radius: 3px;
    padding: 0.8em 0.4em;
    background: #ff3;
    line-height: 1.6;
    letter-spacing: 0.8;
    /* width: 100%; */
}

.cTitle strong {
    font-size: 18px;
}

#popup.bonusup #popupContents {
    width: 86%;
    top: 10px;
    left: 7%;
    overflow: hidden;
    background: none;
    /*border: 2px solid #000;
*/
    box-sizing: border-box;
}

#popup.bonusup #popupContents .image {
    line-height: 0;
    overflow: hidden;
    border-radius: 7px;
}

#popup.bonusup #popupContents .btnContainer {
    margin: 0;
}

#popup.bonusup #popupContents .btn.main.close {
    display: block;
    background: #FC4C02;
    color: #fff;
    padding: 3% 2%;
    border-radius: 4px;
    text-decoration: none;
    z-index: 1000;
    margin: 0 auto;
    position: absolute;
    /*    bottom: 2.5%;*/
    bottom: 10.5%;
    width: 30%;
    font-size: 13px;
    left: 34%;
}

/*****************************************/
/* tutorial css
/*****************************************/
/*
男女共通 css
*/
body#tutorial {
    background-image: url(../img/tutorial_bg.jpg);
    -webkit-background-size: 50%;
    -o-background-size: 50%;
    background-size: 50%;
    background-repeat: repeat;
    max-width: 700px;
    margin: 0 auto;
}

body#tutorial #main {
}

body#tutorial header {
    background: none;
    padding: 0;
    margin: 0 auto 30px auto;
}

header img.tutorial_title {
    display: block;
    vertical-align: bottom;
}

#tutorial.tutorial_wrap {
}

#tutorial .tutorial_section {
    margin: 0 auto 30px auto;
}

#tutorial .tutorial_section img {
    display: block;
    margin: 0 auto;
}

#tutorial .tutorial_section img.arrow {
    width: 15.2112676056%;
    height: auto;
    margin: 15px auto 0 auto;
}

#tutorial #step4.tutorial_section p {
    padding: 15px;
    font-size: 12px;
    line-height: 1.2;
    background-color: #fff;
    color: #aaa;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}


#tutorial .tutorial_ban {
    border-top: solid 1px #e1e1e1;
}

#tutorial .tutorial_ban .tutorial_ban__link {
    display: block;
    border-top: solid 1px #fff;
    padding: 30px 0 0 0;
}

#tutorial .tutorial_ban .tutorial_ban__link img {
    display: block;
}

@media all and (min-width: 480px) {
    #popup.bonusup #popupContents {
        width: 440px;
        margin: 0 auto;
        position: relative;
        left: inherit;
    }
}

@media all and (max-width: 359px) {
    #popup.bonusup #popupContents {
        width: 80%;
        top: 5px;
        left: 10%;
        overflow: hidden;
        border: 2px solid #000;
        box-sizing: border-box;
    }
}


.enquete-list {
    position: fixed;
    background: #fff;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.15);
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 10;
}

.enquete-list__item {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.enquete-list__item__link {
    display: block;
    padding: 12px;
}

.enquete-list__item__link:after {
    content: "";
    display: block;
    position: absolute;
    top: 16px;
    right: 12px;
    width: 8px;
    height: 12px;
    background: url(../img/arrow_right.png) 0 0 no-repeat;
    background-size: 8px;
}


/***TutorialIndex.tpl***/
.enquete-list + header {
    padding-top: 45px;
}

/***TutorialIndex2.tpl***/
body#tutorial .enquete-list + #main,
body#work .enquete-list + #main {
    padding-top: 45px;
}


/**
* .sb-type-TYPE, .sb-type-TYPE > .sb-subtype-X:after
*
* コマ(アイコンと吹き出しをまとめたもの)部分
* frame(speaker icon and name, serief) part
*/

.sb-type-fb-flat {
    overflow: hidden;
    padding: 5px 20px;
    margin: 0;
    line-height: 1.5;
    color: #333333;
}

.sb-type-fb-flat > .sb-subtype-a:after,
.sb-type-fb-flat > .sb-subtype-b:after,
.sb-type-fb-flat > .sb-subtype-c:after,
.sb-type-fb-flat > .sb-subtype-d:after {
    display: block;
    clear: both;
    content: "";
}

/**
* .sb-type-TYPE > .sb-subtype-X > .sb-speaker
*
* 話者領域
* Speaker Field
*/

.sb-type-fb-flat > .sb-subtype-a > .sb-speaker,
.sb-type-fb-flat > .sb-subtype-c > .sb-speaker {
    float: left;
    margin-right: -70px;
    width: 70px;
}

.sb-type-fb-flat > .sb-subtype-b > .sb-speaker,
.sb-type-fb-flat > .sb-subtype-d > .sb-speaker {
    float: right;
    margin-left: -70px;
    width: 70px;
}

/**
* .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-icon
*
* 話者のアイコン部分
* Speaker Icon part
*/

.sb-type-fb-flat > .sb-subtype-a > .sb-speaker > .sb-icon,
.sb-type-fb-flat > .sb-subtype-b > .sb-speaker > .sb-icon,
.sb-type-fb-flat > .sb-subtype-c > .sb-speaker > .sb-icon,
.sb-type-fb-flat > .sb-subtype-d > .sb-speaker > .sb-icon {
    text-align: center;
    height: 60px;
}

.sb-type-fb-flat > .sb-subtype-a > .sb-speaker > .sb-icon > img.sb-icon,
.sb-type-fb-flat > .sb-subtype-b > .sb-speaker > .sb-icon > img.sb-icon,
.sb-type-fb-flat > .sb-subtype-c > .sb-speaker > .sb-icon > img.sb-icon,
.sb-type-fb-flat > .sb-subtype-d > .sb-speaker > .sb-icon > img.sb-icon {
    height: 60px;
    width: 60px;
    border-style: none;
    border-radius: 50%;
}

/**
* .sb-type-TYPE > .sb-subtype-X > .sb-speaker > .sb-name
*
* 話者の名称部分
* Speaker name part
*/

.sb-type-fb-flat > .sb-subtype-a > .sb-speaker > .sb-name,
.sb-type-fb-flat > .sb-subtype-b > .sb-speaker > .sb-name,
.sb-type-fb-flat > .sb-subtype-c > .sb-speaker > .sb-name,
.sb-type-fb-flat > .sb-subtype-d > .sb-speaker > .sb-name {
    overflow: hidden;
    font-size: 12px;
    text-align: center;
    color: #666666;
}


/*----------------------------------------------------------------------------------*/
/* fb-flatタイプの吹き出し                                                          */
/* fb-flat Type   (For a,b)                                                         */
/*----------------------------------------------------------------------------------*/

/**
* .sb-type-TYPE > .sb-subtype-X > .sb-content
* .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after
*
* セリフ&引き出し 部分
* Serief& Tail part
*/

@media screen and (min-width: 721px) {
    .sb-type-fb-flat > .sb-subtype-a > .sb-content {
        float: left;
        position: relative;
        padding-top: 14px;
        margin-left: 80px;
        margin-right: 80px;
    }
}

@media screen and (max-width: 720px) {
    .sb-type-fb-flat > .sb-subtype-a > .sb-content {
        float: left;
        position: relative;
        padding-top: 14px;
        margin-left: 80px;
    }
}

.sb-type-fb-flat > .sb-subtype-a > .sb-content:before {
    position: absolute;
    top: 23px;
    left: -6px;
    z-index: 1;
    height: 0;
    width: 0;
    border-style: solid solid solid none;
    border-width: 6px;
    border-color: transparent #EEEEEE;
    content: "";
}

.sb-type-fb-flat > .sb-subtype-a > .sb-content:after {
    position: absolute;
    top: 23px;
    left: -5px;
    z-index: 3;
    height: 0;
    width: 0;
    border-style: solid solid solid none;
    border-width: 6px;
    border-color: transparent #EEEEEE;
    content: "";
}


@media screen and (min-width: 721px) {
    .sb-type-fb-flat > .sb-subtype-b > .sb-content {
        float: right;
        position: relative;
        padding-top: 14px;
        margin-left: 80px;
        margin-right: 80px;
    }
}

@media screen and (max-width: 720px) {
    .sb-type-fb-flat > .sb-subtype-b > .sb-content {
        float: right;
        position: relative;
        padding-top: 14px;
        margin-right: 80px;
    }
}

.sb-type-fb-flat > .sb-subtype-b > .sb-content:before {
    position: absolute;
    top: 23px;
    right: -6px;
    z-index: 1;
    height: 0;
    width: 0;
    border-style: solid none solid solid;
    border-width: 6px;
    border-color: transparent #5555FF;
    content: "";
}

.sb-type-fb-flat > .sb-subtype-b > .sb-content:after {
    position: absolute;
    top: 23px;
    right: -5px;
    z-index: 3;
    height: 0;
    width: 0;
    border-style: solid none solid solid;
    border-width: 6px;
    border-color: transparent #5555FF;
    content: "";
}

/**
* .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble
*
* 吹き出しの本体部分
* Speach bubble' body part
*/

.sb-type-fb-flat > .sb-subtype-a > .sb-content > .sb-speech-bubble,
.sb-type-fb-flat > .sb-subtype-b > .sb-content > .sb-speech-bubble {
    position: relative;
    padding: 5px 10px;
    z-index: 2;
    background-color: #EEEEEE;
    border-style: solid;
    border-width: 1px;
    border-color: #EEEEEE;
    border-radius: 4px;
    color: #333333;
}

.sb-type-fb-flat > .sb-subtype-b > .sb-content > .sb-speech-bubble {
    color: #FFFFFF;
    background-color: #5555FF;
    border-color: #5555FF;
}


/*----------------------------------------------------------------------------------*/
/* fb-flat用に調整した考えてるタイプの吹き出し                                      */
/* fb-flat-Think Type   (For c,d)                                                   */
/*----------------------------------------------------------------------------------*/

/**
* .sb-type-TYPE > .sb-subtype-X > .sb-content
* .sb-type-TYPE > .sb-subtype-X > .sb-content:befor, :after
*
* セリフ&引き出し 部分
* Serief& Tail part
*/

@media screen and (min-width: 721px) {
    .sb-type-fb-flat > .sb-subtype-c > .sb-content {
        float: left;
        position: relative;
        padding-top: 14px;
        margin-left: 100px;
        margin-right: 80px;
    }
}

@media screen and (max-width: 720px) {
    .sb-type-fb-flat > .sb-subtype-c > .sb-content {
        float: left;
        position: relative;
        padding-top: 14px;
        margin-left: 100px;
    }
}

.sb-type-fb-flat > .sb-subtype-c > .sb-content:before {
    position: absolute;
    top: 24px;
    left: -17px;
    height: 12px;
    width: 12px;
    background-color: #EEEEEE;
    border-color: #EEEEEE;
    border-radius: 10px;
    color: #333333;
    content: "";
}

.sb-type-fb-flat > .sb-subtype-c > .sb-content:after {
    position: absolute;
    top: 20px;
    left: -28px;
    height: 8px;
    width: 8px;
    background-color: #EEEEEE;
    border-color: #EEEEEE;
    border-radius: 5px;
    color: #333333;
    content: "";
}


@media screen and (min-width: 721px) {
    .sb-type-fb-flat > .sb-subtype-d > .sb-content {
        float: right;
        position: relative;
        padding-top: 14px;
        margin-left: 80px;
        margin-right: 100px;
    }
}

@media screen and (max-width: 720px) {
    .sb-type-fb-flat > .sb-subtype-d > .sb-content {
        float: right;
        position: relative;
        padding-top: 14px;
        margin-right: 100px;
    }
}

.sb-type-fb-flat > .sb-subtype-d > .sb-content:before {
    top: 24px;
    right: -17px;
    height: 12px;
    width: 12px;
    background-color: #5555FF;
    border-color: #5555FF;
    position: absolute;
    border-radius: 10px;
    content: "";
}

.sb-type-fb-flat > .sb-subtype-d > .sb-content:after {
    position: absolute;
    top: 20px;
    right: -27px;
    height: 8px;
    width: 8px;
    background-color: #5555FF;
    border-color: #5555FF;
    border-radius: 5px;
    content: "";
}


/**
* .sb-type-TYPE > .sb-subtype-X > .sb-content > .sb-speech-bubble
*
* 吹き出しの本体部分
* Speach bubble' body part
*/

.sb-type-fb-flat > .sb-subtype-c > .sb-content > .sb-speech-bubble,
.sb-type-fb-flat > .sb-subtype-d > .sb-content > .sb-speech-bubble {
    position: relative;
    z-index: 2;
    padding: 5px 10px;
    background-color: #EEEEEE;
    border-style: solid;
    border-width: 1px;
    border-color: #EEEEEE;
    border-radius: 4px;
    color: #333333;
}

.sb-type-fb-flat > .sb-subtype-d > .sb-content > .sb-speech-bubble {
    background-color: #5555FF;
    border-color: #5555FF;
    color: #FFFFFF;
}


.sb-type-fb-flat br {
    display: none;
}

.sb-speech-bubble br {
    display:  block;
}

.arve-embed-container {
    position: relative !important;
    padding-bottom: 56.25% !important;
    /* padding-top: 30px !important; */
    height: 0 !important;
    overflow: hidden !important;
}

.arve-embed-container iframe,
.arve-embed-container object,
.arve-embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.btnContainer .btn.main {
    margin-top: 20px;
}

.sb-speech-bubble {
    max-width: 190px !important;
    word-wrap: break-word !important;
}

div.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .7);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1050;
    cursor: progress;
}

.loading_container .loader {
    margin: 0 auto;
}

.loader {
    z-index: 1;
    display: inline-block;
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid rgba(238, 72, 109, 1);
    width: 50px;
    height: 50px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

.spin {
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

div.caution {
    background-color: #ffff80;
    border: 2px solid #E5A500;
    color: #CC7600;
    padding: 5px 9px;
    margin: 0 0 20px;
    white-space: pre-wrap;
}

div.goodCaution {
    background-color: #e2ffaa;
    border: 2px solid #76CC0B;
    color: #3A9805;
    padding: 5px 9px;
    margin: 0 0 20px;
}

/* ビデオ通話のStatsのCSS */
.video_point {
    background: #F7F7F9;
}

.video_point h1 {
    margin: 0px auto;
    padding: 20px 0;
    font-size: 18px;
}
.video_point table {
    width: 90%;
    margin: 0 auto 20px;
    background-color: #FFFFFF;
    border-collapse: collapse;
    border-radius: 6px;
}
.video_point table th {
    padding: 10px;
    background: #FFA5B9;
    border-radius: 6px 6px 0 0;
}
.video_point table td {
    width: 50%;
    padding: 10px;
    padding-left: 40px;
    border-bottom: 1px solid #F7F7F9;
}
.video_point table .col {
    background: #ffeeee;
    font-weight: bold;
}
.video_point ul {
    display: flex;
    width: 90%;
    margin: 20px auto;
    justify-content: space-between;
}
.video_point li {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 45%;
    padding: 10px;
    text-align: center;
    background: #FFF;
    border: 1px solid #F7F7F9;
    font-weight: bold;
    border-radius: 6px;
}
.video_point li span {
    display: block;
    margin: 10px auto;
    font-size: 1.4rem;
}

.agreeFlag {
    display:-webkit-flex;
    display:flex;
    justify-content: center;
    align-items: center;
}

.truthAgreeFlagCheckBox {
    display: inline-block;
    width: 30px;
    margin: 0 10px;
}

.agreeFlagCheckBox {
    display: inline-block;
    width: 10%;
    margin: 0 5px;
}

.truthAgreeFlagCheckBoxLabel {
    width: 90%;
}

.auth-bank-page-title {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}

.auth-bank-page-sub-title {
    font-size: 20px;
    font-weight: bold;
    margin-top: 30px;
    padding-top: 20px;
}

.auth-bank-image {
    display: block;
}

input#file-upload-buton {
    width: 100%;
}

.auth-bank-explanation-container {
    margin: 0 auto;
    background-color: #c4c3c3;
    padding: 15px;
    border-radius: 20px;
}

.auth-bank-explanation-text {
    font-size: 18px;
    font-weight: 600;
}

.pay-index input.pay-file {
    margin: 0 auto 0.8em;
    padding: 0.8em 3% 0.7em;
    width: 94%;
    display: block;
}

.solid-line {
    border-top: 3px solid;
}

.authStatusText {
    text-align: center;
    margin: 50px auto;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

/* Raking Event Css */
:root {
    --pr-accent: #ee486d;
    --pr-accent-dark: #c22a54;
    --pr-gold: #f5b942;
    --pr-silver: #b9c2cc;
    --pr-bronze: #c98a52;
    --pr-you: #7c5cff;
    --pr-you-light: #a78bfa;
    --pr-you-dark: #5b3fd6;
    --pr-you-glow: rgba(124, 92, 255, 0.5);
}

.pr-page {
    background: linear-gradient(180deg, #14111f, #0c0a15);
    padding: 12px 10px 20px;
    border-radius: 20px;
}

/* Language switcher */
.pr-lang-switcher {
    position: relative;
    width: fit-content;
    margin: 10px auto 14px;
}

.pr-lang-switcher-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #241f3d, #17142a);
    border: 1px solid rgba(255, 214, 102, 0.25);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    color: #f2eefc;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.pr-lang-switcher-selected--open {
    box-shadow: 0 4px 18px rgba(124, 92, 255, 0.35);
    border-color: rgba(124, 92, 255, 0.4);
}

.pr-lang-switcher-selected i.fa-globe {
    color: var(--pr-gold, #f5b942);
}

.pr-lang-switcher-arrow {
    font-size: 9px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.pr-lang-switcher-arrow--open {
    transform: rotate(180deg);
}

.pr-lang-switcher-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 100%;
    background: linear-gradient(165deg, #241f3d, #17142a);
    border: 1px solid rgba(255, 214, 102, 0.2);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 20;
    animation: fadeIn 0.2s ease-in-out;
}

.pr-lang-switcher-dropdown li {
    padding: 10px 16px;
    font-size: 12px;
    color: #d8d2ee;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.pr-lang-switcher-dropdown li:active {
    background-color: rgba(255, 255, 255, 0.08);
}

.pr-lang-switcher-option--active {
    color: var(--pr-gold, #f5b942) !important;
    font-weight: 700;
    background-color: rgba(255, 214, 102, 0.08);
}

.section {
    background: #fff;
    padding: 0;
    margin-bottom: 16px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.pr-hero {
    position: relative;
    padding: 24px 20px 20px;
    background:
        radial-gradient(130% 90% at 50% -15%, rgba(255, 214, 102, 0.22), transparent 55%),
        radial-gradient(140% 110% at 105% 105%, rgba(124, 92, 255, 0.22), transparent 60%),
        linear-gradient(160deg, #221d3a 0%, #17142a 55%, #0c0a18 100%);
    color: #fff;
    overflow: hidden;
    animation: fadeIn 0.5s ease-in-out;
}

.pr-hero-stars {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.pr-hero-star {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 7px 1.5px rgba(255, 255, 255, 0.85);
    opacity: 0;
    animation: prStarTwinkle 2.6s ease-in-out infinite;
}

.pr-hero-star--gold {
    background: #ffd666;
    box-shadow: 0 0 8px 1.5px rgba(255, 214, 102, 0.9);
}

.pr-hero-star--sm {
    width: 2px;
    height: 2px;
}

/* Positioned only in the hero's side/top/bottom padding gutters so nothing sits behind an opaque panel */
.pr-hero-star:nth-child(1) { left: 3%;  top: 5%;  animation-delay: 0s; }
.pr-hero-star:nth-child(2) { left: 2%;  top: 30%; animation-delay: 0.5s; }
.pr-hero-star:nth-child(3) { left: 4%;  top: 58%; animation-delay: 1.1s; }
.pr-hero-star:nth-child(4) { left: 3%;  top: 86%; animation-delay: 1.7s; }
.pr-hero-star:nth-child(5) { left: 95%; top: 12%; animation-delay: 0.3s; }
.pr-hero-star:nth-child(6) { left: 97%; top: 40%; animation-delay: 0.9s; }
.pr-hero-star:nth-child(7) { left: 95%; top: 66%; animation-delay: 1.5s; }
.pr-hero-star:nth-child(8) { left: 96%; top: 92%; animation-delay: 2.1s; }

.pr-hero-status {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 20px;
    color: #ffd666;
    background: rgba(255, 214, 102, 0.12);
    border: 1px solid rgba(255, 214, 102, 0.35);
}

.pr-hero-status--ongoing {
    color: #9dffa0;
    background: rgba(124, 255, 107, 0.1);
    border-color: rgba(124, 255, 107, 0.35);
}

.pr-hero-status--ongoing::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
    background: #7cff6b;
    animation: prLivePulse 1.6s infinite;
}

.pr-hero .ranking-event-title {
    position: relative;
    margin-top: 10px;
    color: #fff;
    font-weight: bold;
    font-size: 1.4rem;
    margin-bottom: 14px;
    text-shadow: 0 0 20px rgba(255, 214, 102, 0.3), 0 2px 8px rgba(0, 0, 0, 0.5);
}

.pr-hero-period {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 214, 102, 0.2);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 16px;
}

.pr-hero-period-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 2px 8px;
    font-size: 13px;
    padding: 4px 0;
}

.pr-hero-period-label {
    opacity: 0.75;
    flex-shrink: 0;
}

.pr-hero-period-label i {
    width: 14px;
    margin-right: 4px;
    color: #ffd666;
}

.pr-hero-period-value {
    font-weight: bold;
    text-align: right;
    flex: 1 1 auto;
    min-width: 0;
}

.pr-hero-period-note {
    margin-top: 6px;
    font-size: 10px;
    opacity: 0.6;
    text-align: center;
}

.event-description {
    position: relative;
    margin-top: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
}

.event-description h3 {
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffd666;
    opacity: 0.9;
    margin-bottom: 4px;
}

.event-description p {
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.85;
    white-space: pre-line;
}

/* Countdown */
.pr-countdown-label {
    position: relative;
    font-size: 12px;
    text-align: center;
    opacity: 0.85;
    margin-bottom: 8px;
    font-weight: bold;
}

.pr-countdown-units {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.pr-countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 214, 102, 0.3);
    border-radius: 10px;
    padding: 8px 4px;
    min-width: 52px;
    box-shadow: 0 0 18px rgba(255, 214, 102, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pr-countdown-value {
    font-size: 1.4rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    background: linear-gradient(180deg, #fff, #ffd666);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: prCountdownPop 0.4s ease;
}

.pr-countdown-unit-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.65;
    margin-top: 4px;
}

@keyframes prStarTwinkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Your stats */
.user-stats {
    position: relative;
    padding: 16px;
    background: linear-gradient(165deg, #241f3d, #17142a);
    border-radius: 16px;
    border: 1px solid rgba(255, 214, 102, 0.18);
    margin-bottom: 16px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: fadeIn 0.6s ease-in-out;
}

.user-stats--top {
    border-color: var(--pr-gold, #f5b942);
    box-shadow: 0 10px 26px rgba(245, 185, 66, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.pr-stat-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.pr-stat-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.pr-stat-label {
    font-size: 11px;
    color: var(--pr-gold, #f5b942);
    font-weight: bold;
    letter-spacing: 0.03em;
}

.pr-stat-label i {
    margin-right: 4px;
}

.pr-stat-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.pr-motivation {
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: #f2eefc;
    margin-bottom: 10px;
}

/* Light "gauge" inset so the duel meter keeps its original contrast on the dark card */
.pr-duel-panel {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 214, 102, 0.15);
    border-radius: 14px;
    padding: 12px 14px 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Duel meter — head-to-head progress vs. the rank above you */
.pr-duel {
    margin-top: 2px;
}

.pr-duel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 8px;
}

.pr-duel-you-label {
    color: var(--pr-you-light, #a78bfa);
    white-space: nowrap;
}

.pr-duel-you-label i {
    margin-right: 3px;
}

.pr-duel-gap-label {
    color: #a89fc9;
    font-weight: 600;
    text-align: center;
    flex: 1;
}

.pr-duel-target-label {
    color: var(--pr-gold, #f5b942);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40%;
}

.pr-duel-track {
    position: relative;
    height: 14px;
    border-radius: 10px;
    background: linear-gradient(90deg, #efeafe, #f6eef1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.pr-duel-fill {
    position: relative;
    height: 100%;
    min-width: 14px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(90deg, var(--pr-you), #ff6f91 55%, var(--pr-gold));
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.pr-duel-fill-shine {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.35) 0 8px,
        transparent 8px 16px
    );
    background-size: 32px 32px;
    animation: prDuelStripes 1s linear infinite;
    mix-blend-mode: overlay;
}

.pr-duel-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    transition: left 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.pr-duel-marker-core {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, var(--pr-you) 65%);
    box-shadow: 0 0 0 3px #fff, 0 0 10px var(--pr-you-glow);
    animation: prMarkerPulse 1.6s ease-in-out infinite;
}

@keyframes prDuelStripes {
    from { background-position: 0 0; }
    to { background-position: 32px 0; }
}

@keyframes prMarkerPulse {
    0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 8px var(--pr-you-glow); }
    50% { box-shadow: 0 0 0 3px #fff, 0 0 18px var(--pr-you-glow); }
}

/* Podium — dark "arena" cards for maximum contrast against the pink hero */
.pr-podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    padding: 36px 12px 18px;
    background: radial-gradient(ellipse 90% 100% at 50% 0%, rgba(124, 92, 255, 0.08), transparent 65%);
}

.pr-podium-card {
    position: relative;
    flex: 1;
    max-width: 126px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient(165deg, #322c4d, #1c1830 70%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 18px 8px 14px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(20, 10, 40, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: prPodiumRise 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transition: transform 0.15s ease;
}

.pr-podium-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.1) 45%, transparent 60%);
    background-size: 220% 220%;
    animation: prShine 3.4s ease-in-out infinite;
    pointer-events: none;
}

.pr-podium-card:active {
    transform: scale(0.96);
}

.pr-podium-card--rank2 {
    order: 1;
    margin-top: 26px;
    border-color: rgba(201, 210, 224, 0.35);
    animation-delay: 0.1s;
}

.pr-podium-card--rank1 {
    order: 2;
    z-index: 2;
    padding-top: 22px;
    padding-bottom: 18px;
    border-color: rgba(255, 214, 102, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 214, 102, 0.3), 0 16px 40px rgba(245, 185, 66, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation-delay: 0.25s;
}

.pr-podium-card--rank3 {
    order: 3;
    margin-top: 26px;
    border-color: rgba(224, 162, 111, 0.35);
}

.pr-podium-card--you {
    box-shadow: 0 0 0 2px var(--pr-you), 0 12px 26px var(--pr-you-glow);
}

.pr-podium-you-tag {
    position: absolute;
    top: -8px;
    right: -6px;
    z-index: 3;
    background: linear-gradient(135deg, var(--pr-you-light), var(--pr-you-dark));
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    box-shadow: 0 0 10px var(--pr-you-glow);
    animation: prYouPulse 1.8s ease-in-out infinite;
}

.pr-podium-crown {
    color: var(--pr-gold);
    font-size: 1.15rem;
    margin-bottom: 4px;
    filter: drop-shadow(0 2px 5px rgba(245, 185, 66, 0.6));
    animation: prCrownFloat 2.2s ease-in-out infinite;
}

.pr-podium-badge {
    position: relative;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
    color: #241f3d;
    margin-bottom: 8px;
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.2), inset 0 2px 2px rgba(255, 255, 255, 0.6), 0 3px 8px rgba(0, 0, 0, 0.35);
}

.pr-podium-card--rank1 .pr-podium-badge {
    background: linear-gradient(160deg, #ffe9a8, #f5b942 60%, #d9932a);
    width: 32px;
    height: 32px;
    font-size: 15px;
}

.pr-podium-card--rank2 .pr-podium-badge {
    background: linear-gradient(160deg, #f2f5f8, #b9c2cc 60%, #929aa3);
}

.pr-podium-card--rank3 .pr-podium-badge {
    background: linear-gradient(160deg, #f0c79a, #c98a52 60%, #a86b39);
}

.pr-podium-avatar-ring {
    position: relative;
    width: 52px;
    height: 52px;
    padding: 3px;
    border-radius: 50%;
    margin-bottom: 10px;
}

.pr-podium-avatar-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ff6f91, var(--pr-gold), var(--pr-you), #ff6f91);
    animation: prRingSpin 4s linear infinite;
}

.pr-podium-card--rank1 .pr-podium-avatar-ring {
    width: 64px;
    height: 64px;
}

.pr-podium-avatar {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(160deg, #3d3760, #221d3a);
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
}

.pr-podium-card--rank1 .pr-podium-avatar {
    font-size: 1.35rem;
}

.pr-podium-name {
    font-size: 12px;
    font-weight: bold;
    color: #f2eefc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.pr-podium-points {
    font-size: 14px;
    font-weight: 800;
    margin-top: 3px;
    background: linear-gradient(90deg, #ffe9a8, var(--pr-gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pr-podium-card--rank2 .pr-podium-points {
    background: linear-gradient(90deg, #eef2f6, var(--pr-silver));
    -webkit-background-clip: text;
    background-clip: text;
}

.pr-podium-card--rank3 .pr-podium-points {
    background: linear-gradient(90deg, #f3cd9f, var(--pr-bronze));
    -webkit-background-clip: text;
    background-clip: text;
}

.pr-podium-points span {
    font-size: 10px;
    font-weight: normal;
    color: #b8b0d6;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
}

@keyframes prPodiumRise {
    0% { opacity: 0; transform: translateY(24px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes prShine {
    0% { background-position: -120% -120%; }
    50%, 100% { background-position: 120% 120%; }
}

@keyframes prRingSpin {
    to { transform: rotate(360deg); }
}

@keyframes prCrownFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes prYouPulse {
    0%, 100% { box-shadow: 0 0 6px var(--pr-you-glow); }
    50% { box-shadow: 0 0 14px var(--pr-you-glow); }
}

.pr-ranking-empty {
    text-align: center;
    padding: 30px 10px;
    color: #a89fc9;
    font-size: 13px;
}

.pr-ranking-empty i {
    margin-right: 6px;
}

.ranking-table-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow-x: auto;
}

.ranking-table {
    width: 94%;
    max-width: 600px;
    border-collapse: collapse;
    margin: 0 auto 10px;
    background: linear-gradient(165deg, #241f3d, #1a1730);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.ranking-table-thead th {
    background: rgba(255, 214, 102, 0.1);
    color: var(--pr-gold, #f5b942);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ranking-table th,
.ranking-table td {
    padding: 10px 8px;
    text-align: left;
    color: #f2eefc;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ranking-table-tbody tr {
    transition: background-color 0.15s ease;
}

.ranking-table-tbody tr:active {
    background-color: rgba(255, 255, 255, 0.06);
}

.ranking-row-you {
    background: linear-gradient(90deg, #efeafe, #e4dbfc);
    box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.35);
}

.ranking-row-you td {
    font-weight: bold;
    color: var(--pr-you-dark, #5b3fd6);
}

.ranking-row-you td:first-child {
    border-left: 4px solid var(--pr-you, #7c5cff);
}

.ranking-row-you-tag {
    display: inline-block;
    margin-left: 6px;
    background: linear-gradient(135deg, var(--pr-you-light, #a78bfa), var(--pr-you-dark, #5b3fd6));
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 8px;
    vertical-align: middle;
    box-shadow: 0 0 8px var(--pr-you-glow, rgba(124, 92, 255, 0.5));
    animation: prYouPulse 1.8s ease-in-out infinite;
}

@media (max-width: 600px) {
    .ranking-table {
        overflow-x: auto;
        white-space: nowrap;
    }

    .ranking-table-thead th,
    .ranking-table-thead td {
        padding: 12px 8px;
    }

    .ranking-table tr {
        display: table-row;
    }

    .pr-podium-card {
        max-width: 100px;
    }
}

.no-event-container {
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, #14111f, #0c0a15);
    border-radius: 20px;
}

.no-event-container-content {
    width: 84%;
    max-width: 320px;
    text-align: center;
}

.pr-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 214, 102, 0.1);
    border: 1px solid rgba(255, 214, 102, 0.3);
    box-shadow: 0 0 24px rgba(255, 214, 102, 0.15);
    color: var(--pr-gold, #f5b942);
    font-size: 1.6rem;
    animation: prFloat 3s ease-in-out infinite;
}

.pr-empty-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 8px;
}

.pr-empty-text {
    font-size: 13px;
    color: #a89fc9;
    line-height: 1.6;
}

@keyframes prLivePulse {
    0% { box-shadow: 0 0 0 0 rgba(124, 255, 107, 0.6); }
    70% { box-shadow: 0 0 0 6px rgba(124, 255, 107, 0); }
    100% { box-shadow: 0 0 0 0 rgba(124, 255, 107, 0); }
}

@keyframes prCountdownPop {
    0% { transform: scale(0.7); opacity: 0.3; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}

@keyframes prFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.ranking-event-list-table {
    margin: auto;
    margin-top: 10px;
    width: 95%;
    border-collapse: collapse;
    display: table;
}

.ranking-event-list-item-number {
    display: table-cell; /* 子要素はテーブルセル要素にする */
    vertical-align: middle;
}

.ranking-event-list-item-detail {
    display: table-cell; /* 子要素はテーブルセル要素にする */
    vertical-align: middle;
}

.ranking-event-list-item-detail div {
    background: linear-gradient(to top, rgb(247, 77, 120), #fe7b93);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .6);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .6);
    padding: 2px;
    border-radius: 5px;
    color: #fff;
}

.ranking-event-list-item-detail div a {
    color: #fff !important;
    text-decoration: none !important;
}

.ranking-event-list-table th,
.ranking-event-list-table td {
    padding: 8px;
    text-align: left;
    border: 1px solid #ddd;
}

.to-event-list-btn,
.event-page-return-btn {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}

.to-event-list-btn > a,
.to-event-list-btn > div,
.event-page-return-btn > div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--pr-you-light, #a78bfa), var(--pr-you-dark, #5b3fd6));
    box-shadow: 0 8px 22px rgba(124, 92, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    color: #fff !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.to-event-list-btn > a i,
.to-event-list-btn > div i,
.event-page-return-btn > div i {
    font-size: 12px;
    opacity: 0.9;
}

.ranking-event-list-item-detail div:active {
    transform: scale(.90);
    background: linear-gradient(to top, #fe7b93, rgb(248, 99, 136));
    box-shadow: none;
}

.to-event-list-btn > a:active,
.to-event-list-btn > div:active,
.event-page-return-btn > div:active {
    transform: scale(0.94);
    box-shadow: 0 3px 10px rgba(124, 92, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* Raking Event Css */


/* 個別ミッション */
#individual-mission-body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f4f4f9;
    color: #333;
}

.individual-mission-container {
    width: 90%;
    margin-top: 30px;
    max-width: 380px;
    background: #ffffff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.individual-mission-container h1 {
    font-size: 28px;
    text-align: center;
    margin-bottom: 15px;
}

.individual-mission-progress-container {
    margin-top: 30px;
}

.individual-mission-sub-title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 15px;
}

.individual-mission-container .event-period {
    font-size: 12px;
    text-align: center;
    padding: 5px 10px;
    border-radius: 10px;
    margin-bottom: 15px;
    display: block;
}

.countdown-to-event-start {
    font-size: 16px;
    color: #4CAF50;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

.time-left {
    font-size: 16px;
    color: red;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

.individual-mission-container .progress-bar-container {
    width: 100%;
    background: #dddddd;
    border-radius: 12px;
    overflow: hidden;
    height: 25px;
    position: relative;
    margin-bottom: 25px;
}

.individual-mission-container .progress-bar {
    width: 100%;
    background: linear-gradient(90deg, #fe7b93, rgb(248, 99, 136));
    height: 100%;
    transition: width 1s ease-in-out;
}

.individual-mission-container .progress-text {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 25px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.individual-mission-container .info {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    margin-bottom: 15px;
}

.individual-mission-container .info div {
    background: #ededed;
    padding: 10px;
    border-radius: 12px;
    width: 100%;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    margin-bottom: 10px;
}

.individual-mission-container .info div span {
    display: block;
}

.individual-mission-container .rank {
    background: #ffc107;
    padding: 10px;
    border-radius: 12px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.individual-mission-container .status-message {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

/* WebViewの言語選択のCSS ------------------------------------------------------------- */
.webview-basic-language-select {
    margin: 20px auto;
    position: relative;
    width: 250px;
    font-family: "Segoe UI", sans-serif;
}

.webview-basic-language-select-label {
    text-align: center;
    font-size: 25px;
    margin-bottom: 10px;
}

.webview-basic-language-selected {
    position: relative;
    background: linear-gradient(135deg, #4f8cff, #1b5fd4);
    color: white;
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden; /* 光がはみ出さないように */
}

/* 光沢アニメーション */
.webview-basic-language-selected::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 70%;
    height: 100%;
    background-image: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 10%,
        rgba(255, 255, 255, 0.8) 100%);
    transform: skewX(-25deg);
    animation: webviewBasicLanguageSelectshiny 2s infinite;
}

@keyframes webviewBasicLanguageSelectshiny {
    0% {
        left: -75%;
    }
    100% {
        left: 125%;
    }
}

.webview-basic-language-selected:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.webview-basic-language-select-arrow {
    font-size: 0.8rem;
}

.webview-basic-language-select-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    z-index: 1001;
    animation: fadeIn 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.webview-basic-language-select-dropdown li {
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.webview-basic-language-select-dropdown li:hover {
    background: #f0f4ff;
    transform: translateX(5px);
}

.webview-basic-language-select-dropdown li.active {
    background: #e0ebff;
    font-weight: bold;
}
/* WebViewの言語選択のCSS ------------------------------------------------------------- */