/* アプリの幅が広くなり過ぎないようにする */
/*
body {
    background: -moz-linear-gradient(top, #444, #333);
    background: -webkit-linear-gradient(top, #444, #333);
    background: linear-gradient(to bottom, #444, #333);
}

ons-navigator {
    --max-width: 1000px;
    left: max( (100% - var(--max-width))/2, 0px );
    right: max( (100% - var(--max-width))/2, 0px );
}
*/
/* ----- */


/* block : 目的のフォント以外ではなるべく表示したくない場合
           短いフォントブロック期（3秒程度） → 無限の フォントスワップ期 */
/* fallback : 「できるだけ早くテキストを読んで欲しい」+「読んでる途中でフォントを入れ替えて邪魔したくない」という場合
              非常に短いフォントブロック期（おおよそ100ms以下）→ 短いフォントスワップ期（おおよそ3秒）→ フォント失敗期 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=fallback');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=fallback');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');

:root {
    --MainColor: #8784b6;
    --SubColor: #84b687;
    --PointColor: #b68784;
    --LinkColor: #5367f5;
    --LinkColorGradient: linear-gradient( 135deg, #4b5ddd 8%, 30%, #5367f5 70%, #6476f6);
    --SubColorGradient: linear-gradient( 135deg, #77a47a 8%, 20%, #84b687 50%, 80%, #90bd93 92%);
    --MainColorGradient: linear-gradient( 135deg, #7a77a4 8%, 20%, #8784b6 50%, 80%, #9390bd 92%);
    --MainColorSoftGradient: linear-gradient( 135deg, #7a77a4 8%, 20%, #8784b6 30%, #9390bd);

    --MainColorLight: #cfcee2;
    --MainTextColor: #7a77a4;
    --SubTextColor: #6a926c;
    --PointTextColor: #926c6a;

    --ChallengeColor: #a873d0;
    --ChallengeTextColor: #9768bb;
    --ChallengeColorGradient: linear-gradient( 135deg, #9768bb 8%, 20%, #a873d0 50%, 80%, #b181d0 92%);
    --ChallengeColorSoftGradient: linear-gradient( 135deg, #9768bb 8%, 20%, #a873d0 30%, #b181d0);
}

:checked+.tabbar--material__button, :checked+.tabbar__button {
    color: var(--LinkColor);
}

ons-button {
    background: var(--LinkColorGradient);
}


hr {
    width: 90%;
    margin: 0 0 var(--Margin-Large) 0;
    border-top: 1px solid #ddd;
    border-width: 1px 0px 0px;
}

.MainInnerBox {
    width: 100%;
    min-width: 300px;
    max-width: 450px;
    text-align: center;
    display: grid;
    gap: 12px;
    margin-left: auto;
    margin-right: auto;
}

.FixedWidthBox {
    max-width: 500px;
}

/* TransparentModalForProgressBarより前面に出す */
/* replaceSplash()時に隠れてOKボタン押せなくなるので */
ons-toast {
    z-index: 20000 !important;
}


/* Toolbarが2つの時、陰影が2つ並んで表示されるのが不自然なので非表示にする */
.toolbar--material {
    box-shadow: none;
    background-color: #fafafa;
}
.toolbar {
    background-color: #fafafa;
    background-size: 100% 0px;
}
.transparent_toolbar {
    background-color: transparent;
}

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

#UserDisplayNameButton {
    display: flex;
    font-size: 14px;
    color: #777;
    align-items: center;
}

#UserDisplayNameButton .UserPicture {
    display: flex;
}

#UserDisplayNameButton .UserPicture ons-icon {
    font-size: 26px;
}

/* ユーザーのプロフィールイメージがある場合 */
#UserPictureImg {
    width: 27px;
    height: 27px;
    object-fit: cover;
    border-radius: 27px;
}

/* 半角11 / 全角6文字入り、それ以上は省略表示される */
#UserDisplayNameButton .UserName {
    max-width: 90px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: 7px;
    margin-right: 2px;
}

#QuizOptionSwitch {
    width: 100%;
    height: 77px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 15px 0px 10px;
    background-color: #fafafa;
    box-shadow: 0 3px 6px rgb(0 0 0 / 7%);
}

#QuizOptionSwitch .SwitchBox {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(58px, 20%, 100px);
    margin: 0 auto;
    padding: 5px 20px;
    transition: all .5s;
    z-index: 101;
}

#QuizOptionSwitch .QuizOptionLabel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
#QuizOptionSwitch .QuizOptionLabel .Label {
    color: #999;
}
#QuizOptionSwitch .QuizOptionLabel ons-icon {
    color: var(--LinkColor);
    font-size: 14px;
}


#QuizOptionSwitch ons-select {
    margin-top: 2px;
    width: 100%;
}

#QuizOptionSwitch select {
    color: var(--LinkColor);
}

#QuizOptionSwitch .ChallengeModeBox {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(58px, 20%, 100px);
    margin: 0 auto;
    padding: 5px 20px;
    transition: all .5s;
    opacity: 0;
    z-index: 100;
}

#Challenge_Ticket {
    display: flex;
    flex-direction: column;
}

#Challenge_Ticket .ChallengeTicket_Box {
    font-size: 25px;
    color: var(--ChallengeTextColor);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 0px;
}

#Challenge_Ticket .ChallengeTicket_Box ons-icon {
    margin-right: 20px;
}

#ChallengeButton {
    top: 42px;
    font-size: 22px;
    border: 5px solid #fafafa;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    color: #fafafa;
    background: var(--ChallengeColorGradient);
    box-shadow: 0px 6px 3px -3px rgb(0 0 0 / 7%);
}

/* Toolbar.rightが空の時もAndroidでは固定幅だったので、それを無くす */
.toolbar--material__left:empty, .toolbar--material__right:empty {
    min-width: 0px;
}

ons-toolbar-button#ContentPage_MenuButton{
    margin: 0;
    padding: 0 20px;
    color: var(--LinkColor);
}

#Splash .SplashBox {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--MainColor);
    background: var(--MainColorGradient);
    color: var(--MainColorLight);
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 30px;
}

#Splash .SplashLogo {
    display: grid;
    gap: 6px;
    line-height: 1;
    text-align: center;
    letter-spacing: 0px;
    margin-bottom: 25px;
}

#Splash .SplashLogo_Row1 {
    font-size: calc(min(250px, 50vw) / 7);
}
#Splash .SplashLogo_Row2 {
    font-size: calc(min(250px, 50vw) / 5);
}
#Splash .SplashLogo_Row3 {
    font-size: calc(min(250px, 50vw) / 10.5);
    padding: 6px 12px;
    background-color: var(--MainColorLight);
    border-radius: 15px;
    color: #8784b6;
}
#Splash .SplashLogo_Row4 {
    font-size: calc(min(250px, 50vw) / 11);
    font-family: 'Arial', sans-serif;
    margin-bottom: 20px;
    width: 100%;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
}
#Splash .SplashLogo_Row4 .Text {
    width: fit-content;
    flex-grow: 1;
}
#Splash .SplashLogo_Row4 .SplashLogo_Line {
    flex-grow: 100;
    height: 1px;
    background-color: var(--MainColorLight);
    margin: 0 15px;
}



#QuizResultTop {
    display: none;
    gap: 20px;
    padding: 20px 0;
    grid-template-columns: min(600px, 100%);
    justify-content: center;
}

#QuizResultTop .Title {
    font-size: 20px;
    text-align: center;
    color: #777;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}
#QuizResultTop .Title .Text {
    width: fit-content;
    flex-grow: 1;
    letter-spacing: 2px;
    padding-top: 2px;
}
#QuizResultTop .Title .Line {
    flex-grow: 100;
    height: 1px;
    background-color: #999;
    margin: 0 15px;
}


#QuizResultTop .Score {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    color: #555;
    margin: 0px 10px;
    padding: 15px 10px;
    border-radius: 10px;
    box-shadow: 0 5px 10px 0 rgb(0 0 0 / 7%);
}
#QuizResultTop .Score .Row {
    display: flex;
    justify-content: center;
    align-items: baseline;
}
#QuizResultTop .Score .Row .WeightedTotalScore {
    font-size: 35px;
    font-weight: bold;
    margin-right: 10px;
}
#QuizResultTop .Score .Row .UnitLabel {
    font-size: 15px;
    color: #777;
}
#QuizResultTop .Score .DetailRow {
    display: flex;
    justify-content: space-evenly;
}
#QuizResultTop .Score .DetailRow .Box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.2;
    flex-grow: 1;
}
#QuizResultTop .Score .DetailRow .TotalScoreBox {
    align-items: flex-start;
}
#QuizResultTop .Score .DetailRow .Label {
    font-size: 13px;
    color: #888;
}
#QuizResultTop .Score .DetailRow .TotalScore,
#QuizResultTop .Score .DetailRow .LevelMultiplier {
    font-size: 20px;
}



#QuizResultTop .Summary {
    display: grid;
    gap: 15px;
    padding: 0 15px;
    grid-template-columns: 1fr 1fr;
}

#QuizResultTop .TotalMarkSum,
#QuizResultTop .TotalDuration {
    padding-left: 5px;
}
#QuizResultTop .Summary .Text {
    display: flex;
    align-items: baseline;
}
#QuizResultTop .Summary .TextValue {
    color: #555;
    font-weight: bold;
}
#QuizResultTop .Summary .TextValueUnitLabel {
    color: #777;
    font-size: 15px;
    padding-left: 5px;
}

#QuizResultBottom {
    display: none;
    padding-bottom: 20px;
}

#QuizResult {
    display: grid;
    gap: 15px;
    padding: 0 15px 15px 15px;
    grid-template-columns: repeat(2, min(275px, 50%));
    justify-content: center;
}

.QuizResultRow {
    display: grid;
    gap: 10px;
    text-align: center;

    padding-bottom: 15px;
    border-radius: 5px;
    box-shadow: 0 5px 10px 0 rgb(0 0 0 / 7%);
}

.QuizResultRow .QuizNumber { 
    padding-left: 7px;
}

.QuizResultRow .QuizBody {
    font-family: 'Noto Serif JP', serif;
    color: #333;
    padding: 0 5px;
}

.QuizResultRow .QuizAnswer {
    /* font-family: 'Noto Serif JP', serif; */
    font-family: 'Kosugi Maru', sans-serif;
    color: #555;
    padding: 0 5px;
}

.QuizResultRow .QuizResultBar {
    text-align: center;
    background-color: var(--SubColor);
    background: linear-gradient( 135deg, #77a47a 15%, 16%, #84b687 70%, #90bd93);
    height: 15px;
    border-radius: 5px 5px 0px 0px;
}

.QuizResultRow .PointColor {
    background-color: var(--PointColor);
    background: linear-gradient( 135deg, #a47a77 15%, 16%, #b68784 70%, #bd9390);
}

.QuizScoreBar {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #999;
    padding: 0 10px;
}

.QuizScoreBar .Box {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

#QuizCloseButton {
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px auto 10px;
    padding: 5px 40px;
    color: var(--LinkColor);
    background-color: transparent;
    border: 1px solid var(--LinkColor);
    text-align: center;
}



#SocialLoginButtonContainer {
    display: grid;
    gap: 15px;
    min-width: 300px;
    max-width: 450px;
    width: 100%;
    margin: 0 auto;
}

.SocialLoginButton_Title {
    text-align: center;
    margin-bottom: 20px;
}

#LoginPage_Terms {
    font-size: 15px;
    display: grid;
    grid-template-columns: 100%;
    justify-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--MainColorLight);
    border-radius: 5px;
    margin-bottom: 20px;
}
#LoginPage_Terms .Desc {
    font-size: 14px;
    color: #555;
}
#LoginPage_Terms .Link {
    width: 250px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}
#LoginPage_Terms .Text {
    color: var(--LinkColor);
}
#LoginPage_Terms ons-icon {
    
}


.LoginButton {
    width: 100%;
    height: 3rem;
    display: flex;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.LoginButton_Img {
    width: fit-content;
    height: 100%;
}

.LoginButton_Img img {
    height: 100%;
    object-fit: contain;
}

.LoginButton_Text {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.GoogleLogin {
    font-family: 'Roboto', sans-serif;
    background-color: #4285f4;
    border-color: #4285f4;
    color: #fff;
}

.LINELogin {
    font-family: 'Helvetica', sans-serif;
    background-color: #00c300;
    border-color: #00c300;
    color: #fff;
}

.LINELogin .LoginButton_Img {
    border-right: 1px solid #00b300;
}

.YahooJAPANLogin {
    font-family: 'Roboto', sans-serif;
    background-color: #ff0033;
    border-color: #ff0033;
    color: #fff;
}




.MainContainer {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 10px;
}

#QuizCatButtonContainer{
    display: grid;
    gap: 35px;
    margin-top: 10px;
}

#QuizCatButtonBox {
    display: grid;
    gap: 15px;
    line-height: 1;
}

#QuizCatButtonBox .Title {
    font-size: 18px;
    color: #555;
    text-align: left;
    padding-left: 5px;
    padding-bottom: 5px;
}



#Tab_Play .QuizCatButton {
    display: grid;
    grid-template-columns: 120px 1fr;
    background-color: var(--MainColor);
    background: var(--MainColorSoftGradient);
    border-radius: 5px;
    padding: 2px;
}

.QuizCatButton .Body {
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; */
    display: grid;
    gap: 8px;
    color: #fcfcfc;
    padding: 10px 0px;
    position: relative;
}

.QuizCatButton .ButtonMask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.QuizCatButton .Body .Icon {
    font-size: 35px;
}
.QuizCatButton .Body .Label {
    font-size: 14px;
}

.QuizCatButton .Desc {
    display: grid;
    align-content: center;
    gap: 8px;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 0px 3px 3px 0px;
    font-size: 14px;
    color: #555;
    padding: 5px 10px 5px 10px;
    text-align: left;
}

.QuizCatButton .Desc .DescRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.QuizCatButton .Desc .DescRow .DescMore {
    font-size: 19px;
    color: var(--LinkColor);
}

.QuizCatButton .WordsCount .Label,
.QuizCatButton .WordsLevel .Label {
    background-color: #777;
    color: #fff;
    padding: 2px 5px;
    border-radius: 5px;
    font-size: 13px;
}
.QuizCatButton .WordsCount .Text {

}

ons-back-button .back-button__icon {
    fill: var(--LinkColor);
} 
ons-back-button .back-button__label {
    color: var(--LinkColor);
}

#QuizPageContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#QuizGrid {
    width: 100%;
    height: 100%;
    display: grid;
    gap: 15px;
    grid-template: min-content 1fr / 1fr;
    padding: 10px 15px 10px 15px;
}

#QuizContainer {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

#QuizContainer .QuizInfo {
    display: grid;
    grid-template-columns: min(600px, 100%);
    gap: 15px;
    justify-content: center;
}

#QuizContainer .QuizInfoRow {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    max-width: 600px;
    margin: 0px auto;
}

#QuizContainer .QuizInfoRow .QuizInfoBar {
    display: flex;
    justify-content: space-between;
    padding: 0 3px;
}

#ChallengeScoreBar {
    display: flex;
    align-items: baseline;
    font-size: 15px;
    color: #555;
}

#ChallengeScoreBar > div {
    margin-left: 7px;
}


#QuizContainer .QuizInfoColumns {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px;
    padding-top: 10px;
    line-height: 1;
}

#QuizContainer .QuizInfoColumns .LeftColumn {
    
}

#QuizContainer .QuizInfoColumns .RightColumn {
    display: grid;
    gap: 6px;
    padding-top: 3px;
}

#QuizContainer .QuizOptions {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 5px;
    font-size: 13px;
    color: #777;
}

#QuizContainer .QuizTypeName,
#QuizContainer .ChoicesTypeName {
    font-size: 13px;
    color: #777;
}

#QuizNumber {
    font-size: 47px;
    color: #555;
    /* font-weight: bold; */
}

#QuizProgressBar {
    width: 100%;
    height: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fill, 10%);
    /* padding-bottom: 2px; */
    margin-top: 3px;
    /* border-bottom: 2px #ddd solid; */
    transition: background-color 0.3s;
    padding: 3px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.QuizProgress_O {
    background-color: var(--SubColor);
    color: #fff;
}

.QuizProgress_X {
    background-color: var(--PointColor);
    color: #fff;
}

#QuizProgressBar.flashProgressBarGreen {
    background-color: #55aa55;
    transition-duration: 0.3s;
}

#QuizProgressBar.flashProgressBarRed {
    background-color: #aa5555;
    transition-duration: 0.3s;
}

#QuizProgressBar div {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    border: 1px #eee solid;
}

#QuizCard {
    display: grid;
    grid-template-columns: 100%;
    gap: 20px;
    padding: 20px 10px;
    /* box-shadow: 0 5px 10px 0 rgb(0 0 0 / 7%); */
    /* background-color: #fcfcfc; */
    border-radius: 5px;
}

#QuizBody {
    font-family: 'Noto Serif JP', serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #555;
}

#QuizBody .BodyContainer {
    display: flex;
    justify-content: center;
    align-items: baseline;
}

#QuizBody .BodyContainer .AfterBodyContent {
    font-size: 30px;
    color: #999;
    padding-left: 10px;
}

#QuizBody .Mark_EndOfQuiz {
    width: 185px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    font-weight: bold;
    color: var(--SubTextColor);
    border: 6px solid var(--SubTextColor);
    border-radius: 50%;
    transform: rotate(-25deg);
}

#QuizMeta {
    width: 100%;
}

.QuizMeta_Container {
    width: 100%;
    height: 50px;
    padding: 0px 40px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.QuizMeta_ColorBox {
    width: 100%;
    max-width: 400px;
    height: 100%;
    border-radius: 10px 0px;
}

.QuizMeta_TextBox {
    font-size: 15px;
    color: #777;
    margin-bottom: 15px;
    text-align: center;
}




#ChoicesContainer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
    /* padding: 15px 0; */
}

#ChoicesBox {
    display: grid;
    gap: 10px;
    padding: 10px 0px;
    width: 100%;
}

#ChoicesBox.Random4Choices {
    grid-template: 1fr 1fr / 1fr 1fr;
}

#ChoicesBox.CharCardChoices {
    grid-template: 1fr 1fr / repeat(5, 1fr);
}

#ChoicesBox ons-button {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: transparent;
    border: 1px #aaa solid;
    border-radius: 10px;
    color: #555;

    font-family: 'Kosugi Maru', sans-serif;
    font-size: 18px;

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#CharCardChoices_BeforeChoicesBox {
    display: flex;
}

#CharCardChoices_Label {
    color: #999;
}

#BeforeChoicesBoxContainer {
    width: 100%;
    padding: 0 15px;
}

#AfterChoicesBoxContainer {
    width: 100%;
}

#CharCardChoices_AfterChoicesBox {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
    text-align: center;
}

#CharCardChoices_AfterChoicesBox ons-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

#CharCardChoices_AfterChoicesBox ons-button.PositiveButton {
    padding: 10px 0;
    background: var(--LinkColorGradient);
}

#CharCardChoices_AfterChoicesBox ons-button.NegativeButton {
    background-color: transparent;
    color: var(--LinkColor);
    border: 1px solid var(--LinkColor);
}


#QuizEndModal {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--MainColorGradient);
    color: #fff;
    opacity: 0;
    transition: all 0.3s;
    transition-delay: 0.5s;

    display: grid;
    justify-content: center;
    align-content: center;
    gap: 30px;
    text-align: center;
}


#QuizEndModal .TextBox {
    display: grid;
    justify-content: center;
    align-content: center;
    gap: 15px;
    font-family: 'Kosugi Maru', sans-serif;
}
#QuizEndModal .Text1 {
    font-size: 36px;
}
#QuizEndModal .Text2 {
    font-size: 52px;
}
#QuizEndModal ons-icon {
    font-size: 80px;
}




#CompanyInfo .Container {
    display: grid;
    gap: 15px;
    grid-template-columns: 80px 1fr;
    line-height: 1.5;
    align-items: start;
}

#CompanyInfo .Container .Label {
    text-align: center;
    background-color: var(--SubTextColor);
    font-size: 15px;
    color: #eee;
    border-radius: 10px;
    padding: 2px 5px;
}
#CompanyInfo .Container .Text {
    font-size: 16px;
    color: #333;
}




#Feedback .FormCard {
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 5px;
}

#Feedback .BeforeTextarea {
    width: 100%;
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: justify;
    color: #555;
}

#Feedback .BeforeTextarea .IconBox {
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    color: var(--PointColor);
}
#Feedback .BeforeTextarea .Title {
    font-size: 19px;
    color: var(--PointColor);
}
#Feedback .BeforeTextarea .Desc {
    font-size: 14px;
    padding: 5px;
}

#Feedback .Feedback_Textarea{
    width: 100%;
    border: none;
    padding: 10px;
    line-height: 1.7;
}

#Feedback .Indicator {
    width: 100%;
    font-size: 13px;
    color: #777;
    text-align: right;
    padding-right: 7px;
    padding-top: 3px;
}

#Feedback ons-list.Information ons-list-item {
    font-size: 14px;
    color: #999;
    text-align: justify;
}

#Feedback .ButtonBox {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#Feedback ons-button {
    background-color: var(--LinkColor);
}



div.DescTextBox {
    color: #667777;
    text-align: justify;
    font-size: 15px;
}


div.NoticeBoxContainer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.NoticeBox {
    display: grid;
    grid-template-columns: min(90vw, 500px);
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #555;
}

.ScoreBoardExample, .AnalyzerExample {
    transform: scale(0.8);
}

.NoticeBox ons-button {
    margin: 15px 10% 0 10%;
}



/* UpdateInfo */

.UpdateInfoBox {
    text-align: left;
    gap: 10px;
}

.UpdateInfo_Date {
    color: #999;
    font-size: 14px;
    font-weight: bold;
    margin-top: 25px;
    margin-bottom: 10px;
}

.UpdateInfo_Desc {
    color: #333;
    font-size: 14px;
    padding-left: 15px;
}


/* ProfileSummary */

#ProfileSummaryContainer {
    display: grid;
    gap: 50px;
    padding-top: 10px;
}

.ProfileSummary {
    display: grid;
    gap: 5px;
    text-align: left;

    border-radius: 7px;
    padding: 20px 10px 10px 10px;
    box-shadow: 0 5px 10px 0 rgb(0 0 0 / 7%);
}

.SummaryTitle {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

.Summary_QuizOption {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    margin-top: 10px;
}

.ProfileSummary .QuizTotalCount {
    font-weight: normal;
}

.SummaryLabel {
    color: #777;
    font-size: 14px;
}

.ScoreBoardRow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 10px 0px;
}



.SummaryBody {
    font-size: 23px;
    color: #555;
    text-align: right;
    padding-right: 5px;
    margin-top: 5px;
}

.SummarySubText {
    font-size: 15px;
    color: #555;
    text-align: right;
    padding-right: 5px;
}








/* ScoreBoardCarousel */

.ScoreBoardCarouselItems {
    padding: 20px 0px 30px 0px;
    display: grid;
    grid-template-columns: min(500px, 100%);
    justify-content: center;
    justify-items: center;
    gap: 20px;
}

.ScoreBoardCard {
    display: grid;
    width: 100%;
    grid-template-columns: 100%;
    gap: 20px;
    text-align: left;
    padding: 20px 10px;
    box-shadow: 0 5px 10px 0 rgb(0 0 0 / 7%);
    background-color: #fcfcfc;
}

.ScoreBoardCarousel_Title {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 0 5px 5px;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
}

.QuizCoverageRateGraph_Container {
    display: grid;
    gap: 5px;
}

.QuizCoverageRateGraph_Label {
    display: flex;
    justify-content: space-between;
    padding: 0 5px;
}

.QuizCoverageRateGraph_Outline {
    width: 100%;
    height: 25px;
    padding: 3px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.QuizCoverageRateGraph_Outline_Slim {
    width: 100%;
    height: 15px;
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-top: 5px;
}

.QuizCoverageRateGraph_PercentageBar {
    width: 1px;
    height: 100%;
    background-color: var(--SubColor);
    background: linear-gradient( 45deg, #77a47a 8%, 30%, #84b687 70%, #90bd93);
    transition: all 1s;
}

.ScoreBoardLabel {
    color: #888;
    font-size: 13px;
}

.ScoreBoardBodyContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ScoreBoardBody_Column {
    display: grid;
    gap: 5px;
}

.ScoreBoardBody_Column:nth-child(2) .ScoreBoardBody {
    text-align: right;
}

.ScoreBoardBody_ColumnTitle {
    font-size: 15px;
    text-align: center;
    padding: 0 0 5px 5px;
    border-bottom: 1px solid #ddd;
}

.ScoreBoardBox {
    padding: 5px;
}

.ScoreBoardBody {
    font-size: 24px;
    color: #555;
    text-align: left;
    /* padding: 0 5px; */
    margin-top: 2px;
}

.ScoreBoard_Bold {
    color: #555;
    font-weight: bold;
}

.ScoreBoard_SubText {
    font-size: 16px;
}

.ScoreBoardBody_SubColumnContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ScoreBoardBody_SubColumn {

}

.ScoreBoardBody_SubColumnContainer .ScoreBoardBody {
    font-size: 16px;
}

#ScoreBoardDetailPage_Title {
    font-size: 17px;
}


ons-toolbar.CenterToolBar {
    display: flex;
    justify-content: center;
    align-items: center;
}

#ScoreBoardDetail_CarouselTitleDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: unset;
    width: min(400px, 100%);
}

.QuizCatBadge {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: 18px;
    box-sizing: content-box;
    padding: 5px 10px;
    color: #fff;
    background-color: var(--MainColor);
    background: linear-gradient( 45deg, var(--MainTextColor) 8%, 30%, var(--MainColor) 70%, #9390bd);
    border-radius: 5px;
    font-family: 'Kosugi Maru', sans-serif;
}

.QuizCatBadge .Icon {
    font-size: 18px;
    margin-right: 7px;
}

.QuizCatBadge .Text {
    font-size: 16px;
    font-weight: bold;
}

#ScoreBoardDetail_CarouselPrev,
#ScoreBoardDetail_CarouselNext {
    color: var(--LinkColor);
}

.ScoreBoard_UnitLabel {
    font-size: 15px;
    color: #777;
    font-weight: normal;
}



/* ScoreBoardSummary */

.ScoreBoardCardContainer {
    padding: 20px 0px 30px 0px;
    display: grid;
    grid-template-columns: min(500px, 100%);
    justify-content: center;
    justify-items: center;
    gap: 20px;
}

.ScoreBoardCard .TitleBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
}

.ScoreBoardCard .TitleText {
    font-weight: bold;
}

.ScoreBoardCard .ShowDetailButton {
    font-size: 13px;
    color: var(--LinkColor);
}

#ScoreBoardSummaryCard_Today .CorrectPercentage,
#ScoreBoardSummaryCard_Total .CorrectPercentage,
.ScoreBoardCarouselItems .CorrectPercentage,
#ScoreBoardSummaryCard_Today .TotalDuration_Minute,
#ScoreBoardSummaryCard_Total .TotalDuration_Minute,
.ScoreBoardCarouselItems .TotalDuration_Minute,
#QuizResultTop .Summary .TextValue     {
    font-size: clamp( 15px, calc( (100vw - 40px) /2 / 5), 50px);
}


#AnsweredQuizCatList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.AnsweredQuizCatListIcon_Container {
    display: grid;
    gap: 5px;
}

.AnsweredQuizCatListIcon_Container .QuizCatIcon {
    font-size: 20px;
    background-color: var(--MainColor);
    background: linear-gradient( 45deg, var(--MainTextColor) 8%, 30%, var(--MainColor) 70%, #9390bd);
    color: #fff;
    border-radius: 50px;
    width: fit-content;
    box-sizing: unset;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.AnsweredQuizCatListIcon_Container .QuizCatText {
    font-size: 10px;
    color: #999;
    text-align: center;
}



/* LeaderBoard */

#ChallengeLeaderBoard .BodyContainer,
#MyChallengeLeaderBoard .BodyContainer {
    display: grid;
    gap: 0px;
    background-color: transparent;
}

.BodyContainer ons-list-item.ChallengeLeaderBoard_Row {
    padding: 0 5px 0 5px;
}

.ChallengeLeaderBoard_Row .main-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.ChallengeLeaderBoard_Row .expandable-content {
    padding: 0 0 20px 0;
}
.ChallengeLeaderBoard_Row .Name_Box {
    display: flex;
    padding-right: 5px;
}
.ChallengeLeaderBoard_Row .Score_Box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.ChallengeLeaderBoard_Row .Desc_Box {
    display: grid;
    gap: 5px;
}
.ChallengeLeaderBoard_Row .Row_Badge,
.ChallengeLeaderBoard_Row .Row_Desc {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ChallengeLeaderBoard_Row .Rank {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 25px;
    color: #555;
    padding-right: 15px;
}
.ChallengeLeaderBoard_Row .RankerName {
    display: flex;
    font-size: 14px;
    color: #777;
    align-items: center;
}
.ChallengeLeaderBoard_Row .RankerName .Picture {
    height: 27px;
    line-height: 1;
}
.ChallengeLeaderBoard_Row .RankerName .Picture img {
    width: 27px;
    height: 27px;
    object-fit: cover;
    border-radius: 27px;
}
.ChallengeLeaderBoard_Row .RankerName .Picture ons-icon {
    font-size: 27px;
}
.ChallengeLeaderBoard_Row .RankerName .Name {
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 2px 0 7px;
}
.ChallengeLeaderBoard_Row .RankerName .San {
    min-width: fit-content;
}

.ChallengeLeaderBoard_Row .Badge_Box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.ChallengeLeaderBoard_Row .Badge_Box > div{
    margin-right: 5px;
}

.ChallengeLeaderBoard_Row .Row_Desc > div {
    line-height: 1;
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.ChallengeLeaderBoard_Row .Row_Desc .TotalMark,
.ChallengeLeaderBoard_Row .Row_Desc .TotalDuration {
    padding-right: 10px;
}

.ChallengeLeaderBoard_Row .Row_Desc .Label {
    background-color: #777;
    color: #fff;
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 13px;
}
.ChallengeLeaderBoard_Row .Row_Desc .Text {
    font-size: 16px;
    color: #777;
    flex-grow: 1;
    text-align: right;
    padding-right: 5px;
}
.ChallengeLeaderBoard_Row .Row_Desc .Unit {
    font-size: 14px;
    color: #777;
    padding-right: 5px;
}

.ChallengeLeaderBoard_Row .DateTime {
    font-size: 14px;
    color: #777;
    padding-right: 5px;
}

.LeaderBoardQuizCatBadge,
.LeaderBoardChoicesTypeBadge {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    box-sizing: content-box;
    padding: 4px 9px;
    color: #fff;
    background-color: var(--ChallengeColor);
    background: var(--ChallengeColorGradient);
    border-radius: 5px;
    font-family: 'Kosugi Maru', sans-serif;
    height: 18px;
}

.LeaderBoardQuizCatBadge .Icon {
    font-size: 16px;
    margin-right: 7px;
}

.LeaderBoardQuizCatBadge .Text, 
.LeaderBoardChoicesTypeBadge .Text {
    font-size: 14px;
    /* font-weight: bold; */
}

.ChallengeLeaderBoard_Row .TotalScore {
    display: flex;
    align-items: baseline;
}
.ChallengeLeaderBoard_Row .TotalScore .Text {
    font-size: 20px;
    color: #555;
    font-weight: bold;
}
.ChallengeLeaderBoard_Row .TotalScore .Unit {
    font-size: 13px;
    color: #777;
    margin-left: 5px;
}

#LetsChallenge {
    display: none;
}
#LetsChallenge .Container {
    display: grid;
    gap: 10px;
    color: #555;
    justify-items: center;
}
#LetsChallenge .ChallengeIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    color: #fafafa;
    background-color: var(--ChallengeColor);
    background: var(--ChallengeColorGradient);
    width: 56px;
    height: 56px;
    border: 5px solid #fafafa;
    border-radius: 56px;
    box-shadow: 0px 6px 3px -3px rgb(0 0 0 / 7%);
}
#LetsChallenge .Title {
    font-size: 16px;
}
#LetsChallenge .Desc {
    font-size: 14px;
}
#LetsChallenge .Desc ul {
    padding-left: 20px;
}




/* Calendar */

#AttendanceCalendar_Container, .AnalyzerCard {
    text-align: center;
}

.AnalyzerCard .CarouselBar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 5px;
}

.AnalyzerCard .Button ons-icon {
    font-size: 17px;
    color: var(--LinkColor);
}

.AnalyzerCard .Title_YearMonth {
    font-size: 18px;
    color: #555;
}

.AnalyzerCard .DayBar,
.AnalyzerCard .Body    {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 10px 6px;
    color: #888;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
}

.AnalyzerCard .Body .DateBox {
    display: grid;
    grid-template-rows: 1fr 2fr;
}

.AnalyzerCard .Body .DateBox div {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888;
}

.AnalyzerCard .Body .DateBox .AttendDate {
    color: #555;
    font-weight: bold;
}


.AnalyzerCard .Body .DateBox .AttendanceMark {
    /* color: var(--PointColor); */
    /* border: 2px solid var(--PointColor); */
    border-radius: 20px;
    width: 28px;
    height: 28px;
    font-size: 11px;
    line-height: 1;
    transform: rotate(-25deg);

    background-color: var(--PointColor);
    background: linear-gradient( 45deg, #a47a77 8%, 30%, var(--PointColor) 70%, #bd9390);
    color: #fff;
}



ons-popover .Title {
    font-size: 16px;
    font-weight: bold;
}

ons-popover ul {
    padding-left: 20px;
}



#MenuPage {
    font-size: 15px;
}

#MenuPageContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    color: #333;
}

#MenuPageContainer ons-icon {
    width: 1.5em;
    color: #555;
}

#MenuTitle {
    width: 100%;
    height: 110px;
    background-color: var(--MainColor);
    background: var(--MainColorGradient);
    color: var(--MainColorLight);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 15px;
    /* border-bottom: 1px solid #ccc; */
}

#MenuTitle .TitleLogo {
    display: grid;
    gap: 4px;
    text-align: center;
    line-height: 1;
    font-weight: bold;
    margin-bottom: 10px;
}

#MenuTitle .TitleLogo .Row1 {
    font-size: 14px;
}
#MenuTitle .TitleLogo .Row2 {
    font-size: 20px;
}

#MenuTitle .TitleLogoBottom {
    font-size: 11px;
    font-family: 'Arial', sans-serif;
    width: 100%;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
}
#MenuTitle .TitleLogoBottom .Text {
    width: fit-content;
    flex-grow: 1;
}
#MenuTitle .TitleLogoBottom .Line {
    flex-grow: 100;
    height: 1px;
    background-color: var(--MainColorLight);
    margin: 0 10px;
}

#MenuMiddle {
    width: 100%;
}

#MenuMiddle ons-list {
    padding: var(--Margin-Small) 0;
}

#MenuBottom {
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
    padding: 20px 10px;
}

#Menu_showCancelAccountPageButton {
    font-size: 14px;
    line-height: 1.5em;
}

#Menu_Terms ons-icon {
    font-size: 15px;
}




#LogoBottomBar {
    font-size: calc(min(250px, 50vw) / 13);
    width: 100%;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
}
#LogoBottomBar .Text {
    width: fit-content;
    flex-grow: 1;
    color: var(--MainColorLight);

    display: grid;
    gap: 4px;
    line-height: 1;
    text-align: center;
    padding: 0 10px;
}
#LogoBottomBar .Text1 {
    font-size: calc(min(250px, 50vw) / 13);
}
#LogoBottomBar .Text2 {
    font-size: calc(min(250px, 50vw) / 9);
}
#LogoBottomBar .Line {
    flex-grow: 100;
    height: 1px;
    background-color: var(--MainColorLight);
    margin: 0 10px;
}

#QuizEndModal .BottomPosition {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
}



ons-list-item.list-item {
    padding: 0 8px 0px 14px;
}

.list--inset {
    margin-top: 10px;
    margin-bottom: 10px;
}


div.DialogContent {
    width: 300px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* padding-bottom: 20px; */
    background-color: #fff;
}

div.DialogTitle {
    width: 100%;
    background-color: #555;
    color: #fff;
    font-size: 17px;
    text-align: center;
    font-weight: bold;
    padding: 10px 0;
}

span.DialogSubtitle {
    font-size: 17px;
    font-weight: bold;
}

div.DialogInnerBox {
    width: 100%;
    padding: 0px 15px;
    margin: 10px 0px;
    font-size: 15px;
}

div.DialogInnerBox ons-button {
    margin-bottom: 5px;
}

ons-card {
    width: 100%;
    max-width: 500px;
}

ons-icon {
    display: inline-block;
    /* width: 1.5em; */
    text-align: center;
}

.Popover_Desc {
    padding: 10px;
    font-size: 15px;
    color: #555;
}

.Popover_Label {
    background-color: var(--BaseColor);
    color: #fff;
    padding: 4px 10px;
    border-radius: 5px;
    line-height: 2;
}

.Popover_CloseButton {
    display: block;
    margin: 0 auto 15px auto;
    width: fit-content;
    font-size: 15px;
    padding: 0px 10px;
    color: #999;
    background: transparent;
    border: solid 1px #ccc;
}

.popover__content {
    width: 70vmin;
    max-width: 500px;
}