@charset "UTF-8";

*, ::after, ::before {
    box-sizing: border-box
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block
}

body {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    color: #212529;
    text-align: left;
    font-family: "Hiragino Kaku Gothic Pro", "Hiragino Sans", "segoe ui", Meiryo, YuGothic, "Yu Gothic", -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.75;
    font-size: 16px;
}
.wrapper {
    background: url("../img/bg.png") center top no-repeat;
    background-size: cover;
}

[tabindex="-1"]:focus:not(:focus-visible) {
    outline: 0 !important
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .5rem
}

dl, ol, ul {
    margin-top: 0
}

address, dl, ol, p, ul {
    margin-bottom: 1rem
}

abbr[data-original-title], abbr[title] {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    cursor: help;
    border-bottom: 0;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none
}

address {
    font-style: normal;
    line-height: inherit
}

ol ol, ol ul, ul ol, ul ul {
    margin-bottom: 0
}

dt {
    font-weight: 700
}

dd {
    margin-bottom: .5rem;
    margin-left: 0
}

blockquote, figure {
    margin: 0 0 1rem
}

b, strong {
    font-weight: bolder
}

small {
    font-size: 80%
}

sub, sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

a, a:hover {
    text-decoration: none
}

a {
    background-color: transparent;
}

a:hover {
    filter: alpha(opacity=70)
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none
}

code, kbd, pre, samp {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1em
}

pre {
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    -ms-overflow-style: scrollbar
}

img {
    border-style: none;
    height: auto;
    display: block;
    vertical-align: bottom
}

.img-full {
    width: 100%;
}

.align-center {
    text-align: center;
}
.align-right {
    text-align: right;
}

svg {
    overflow: hidden;
    vertical-align: middle
}

table {
    border-collapse: collapse
}

caption {
    padding-top: .75rem;
    padding-bottom: .75rem;
    color: #6c757d;
    text-align: left;
    caption-side: bottom
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent
}

label {
    display: inline-block;
    margin-bottom: .5rem
}

button {
    border-radius: 0
}

button:focus:not(:focus-visible) {
    outline: 0
}

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

button, input {
    overflow: visible
}

button, select {
    text-transform: none
}

[role=button] {
    cursor: pointer
}

select {
    word-wrap: normal
}

[type=button], [type=reset], [type=submit] {
    -webkit-appearance: button
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
    padding: 0;
    border-style: none
}

input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

textarea {
    overflow: auto;
    resize: vertical
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0
}

legend {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-bottom: .5rem;
    font-size: 1.5rem;
    line-height: inherit;
    color: inherit;
    white-space: normal
}

progress {
    vertical-align: baseline
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    outline-offset: -2px;
    -webkit-appearance: none
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button
}

output {
    display: inline-block
}

summary {
    display: list-item;
    cursor: pointer
}

template {
    display: none
}

[hidden] {
    display: none !important
}

h1 {
    font-size: 41px
}

h2 {
    font-size: 34px
}

h3 {
    font-size: 28px
}

h4 {
    font-size: 20px
}

h5 {
    font-size: 16px
}

h6 {
    font-size: 14px
}

figure {
    margin: 0;
    padding: 0
}

button {
    background-color: transparent;
    border: 0;
    cursor: pointer;
    outline: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

button:active, button:focus, button:hover, button:link, button:visited {
    outline: 0
}

.txt-green { color: #329157;}
.txt-blue { color: #407FBF;}
.txt-yellow { color: #B18D2B;}
.txt-red { color: #CC5555;}

/* -------------------------------------- */
/* Hidden
/* -------------------------------------- */
.hidden {
    display: none !important;
}
@media screen and (max-width: 768px) {
    .hidden-sm {
        display: none;
    }
}
@media screen and (min-width: 769px) {
    .hidden-md {
        display: none;
    }
}

/* -------------------------------------- */
/* Header
/* -------------------------------------- */

.header-home__inner .h-logo {
    width: 100%;
    padding-top: 0.5em;
}

.header__inner {
    position: relative;
    margin: 0 auto;
}
.header__inner .h-logo {
    width: 80%;
    max-width: 500px;
    padding: 10px 0 0 0;
    margin: 0 auto;
}

@media screen and (min-width: 769px) {
    /* home */
    .header-home {
        width: 100%;
        background: url("../img/bg_top_header.png") top center no-repeat;
    }
    .header-home__inner {
        margin: 0 auto;
        max-width: 1200px;
        height: 660px;
    }
    .header-home__inner .h-logo {
        width: 660px;
        margin: 0 auto;
        padding-top: 70px;
    }

    /* question,results */
    .header, .header__inner {
        width: 100%;
    }
    .header__inner {
        max-width: 1200px;
        height: 330px;
    }
    .header__inner .h-logo {
        max-width: 624px;
        padding-top: 40px;
        margin: 0 auto;
    }
}


/* -------------------------------------- */
/* Main Contents
/* -------------------------------------- */

.main-home {
    margin: 0 auto;
}
.main {
    margin: 0 auto;
}
.main__inner {
    width: 94%;
    max-width: 1280px;
    margin: 0 auto;
    background-color: #ffffff;
}

@media screen and (min-width: 769px) {
    .main-home {
        margin: -100px auto 0 auto;
    }
}

/* -------------------------------------- */
/* Card
/* -------------------------------------- */
.main-card {
    background: url("../img/bg_main_card.png") #e9e6d2 center no-repeat;
    background-size: cover;
    box-shadow: 0px 23px 33px -6px #000000;
}
.main-card-header {
    position: relative;
    height: 38px;
    background: url("../img/bg_main_card_header_sp.png") top repeat-x;
    z-index: 1;
}
.main-card-header:before, .main-card-header:after {
    position: absolute;
    top: 0;
    z-index: 5;
}
.main-card-header:before {
    content: url("../img/main_card_header_left_sp.png");
    left: 0;
}
.main-card-header:after {
    content: url("../img/main_card_header_right_sp.png");
    right: 0;
}

@media screen and (min-width: 769px) {
    .main-card-header {
        height: 76px;
        background: url("../img/bg_main_card_header.png") top repeat-x;
    }
    .main-card-header:before {
        content: url("../img/main_card_header_left.png");
    }

    .main-card-header:after {
        content: url("../img/main_card_header_right.png");
    }
}

.main-card-footer {
    position: relative;
    height: 38px;
    padding: 0;
    background: url("../img/bg_main_card_footer_sp.png") bottom repeat-x;
    z-index: 1;
}
.main-card-footer:before, .main-card-footer:after {
    position: absolute;
    z-index: 5;
}
.main-card-footer:before {
    content: url("../img/main_card_footer_left_sp.png");
    left: 0;
}
.main-card-footer:after {
    content: url("../img/main_card_footer_right_sp.png");
    right: 0;
}

@media screen and (min-width: 769px) {
    .main-card-footer {
        height: 77px;
        background: url("../img/bg_main_card_footer.png") bottom repeat-x;
    }
    .main-card-footer:before {
        content: url("../img/main_card_footer_left.png");
    }
    .main-card-footer:after {
        content: url("../img/main_card_footer_right.png");
    }
}

.main-card-body {
    position: relative;
    padding: 0 8%;
}
.main-card-body:before, .main-card-body:after {
    content: "";
    position: absolute;
    z-index: 5;
    width: 10px;
    height: 100%;
}
.main-card-body:before {
    left: 0;
    background: url("../img/main_card_body_left_sp.png") repeat-y;
}
.main-card-body:after {
    right: 0;
    top: 0;
    background: url("../img/main_card_body_right_sp.png") repeat-y;
}


@media screen and (min-width: 769px) {
    .main-card-body {
        padding: 0 6%;
    }
    .main-card-body:before, .main-card-body:after {
        width: 20px;
    }
    .main-card-body:before {
        background: url("../img/main_card_body_left.png") repeat-y;
    }
    .main-card-body:after {
        background: url("../img/main_card_body_right.png") repeat-y;
    }

}





.btn-qa-select {
    display: block;
    width: 400px;
    font-size: 50px;
    line-height: 50px;
    text-align: center;
    padding: 20px;
    background-color: #EBE30F;
    border: 6px solid #311F0E;
    color: #311F0E;
    border-radius: 16px;
}

.main-footer-band {
    overflow: hidden;
    width: 100vw;
    padding: 60px 0;
    background: linear-gradient(0deg, rgba(48, 72, 202, 1) 0%, rgba(48, 72, 202, 1) 10%, rgba(48, 72, 202, 0) 100%);
}

.band-loop {
    transform: rotate(-5deg);
}
.band-loop-slide {
    display: flex;
    flex-flow: row nowrap;
    width: 100vw;
    height: 100px;
    list-style: none;
    margin-left: -20px;
    padding-left: 0;
}
.band-loop-slide img {
    width: auto;
    height: 100%;
    padding: 0;
    margin: 0;
}

@media screen and (min-width: 769px) {
    .main-footer-band {
        padding: 100px 0;
    }
    .band-loop-slide {
        height: 200px;
    }
}


/* -------------------------------------- */
/* Footer
/* -------------------------------------- */
.footer {
    width: 100%;
}

.footer .f-primary {
    padding: 36px 0 80px;
    width: 100%;
    background: #3048CA;
}

.footer .f-primary__inner {
    margin: 0 auto;
    padding: 0 7%;
    width: 100%;
}

.footer .f-secondary {
    padding: 20px 0;
    width: 100%;
    color: #ffffff;
    background: #1D2B7A;
}

.footer .f-secondary__inner {
    padding: 0 8%;
}

.f-app-info {
    margin: 0 auto 21px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}

.f-app-info .thumb {
    width: 140px
}

.f-app-info .info .title {
    margin-bottom: 5px;
    color: #fff;
    font-size: 18px
}

.f-app-info .info .text {
    margin: 0;
    color: #fff;
    font-size: 12px;
    line-height: 1.571428571
}

.app-list, .f-sns-list {
    padding: 0;
    display: flex;
    flex-flow: row nowrap;
    list-style: none;
}

.app-list {
    margin: 0 auto;
    justify-content: center;
}
.app-list li {
    padding: 0 5px;
}
.app-list li a {
    display: block;
    height: 50px
}

.app-list li a img {
    width: auto;
    height: 100%
}

.copy {
    display: block;
    font-size: 10px;
    text-align: center;
}
.privacy {
    font-size: 10px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 0;
}

.page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 80px;
    cursor: pointer;
    z-index: 100;
}

.bnr-crossover {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 80%;
    z-index: 102;
}
.bnr-crossover_inner {
    position: relative;
    padding: 6px;
    background: rgba(255, 255, 255, 0.3);
}
.bnr-crossover-bt {
    position: absolute;
    right: 0;
    top: -16px;
    cursor: pointer;
    width: 32px;
}
.collabo {
    z-index: 9999;
    position: fixed;
    top: 5px;
    left: 5px;
    padding: 2px 8px;
    box-shadow: 0 0 3px #0316a8, 0 0 3px #011fb3 inset, 0 0 5px #000, 0 0 5px #000 inset;
    color: #ffffff;
    border: 1px solid #aad8ff;
    border-radius: 5px;
    text-shadow: 0 0 3px #293dc5, 0 0 3px #293cc5, 0 0 3px #293fc5, 0 0 10px #000, 0 0 10px #000, 0 0 10px #000;
    background: rgba(0,0,0,0.7);
}
.collabo-page-sp {
    font-size: 10px;
    text-align: center;
    text-decoration: none;
    padding: 0;
    margin: 0 0 8px 0;
}
.collabo-sns {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding: 0;
    margin: 0 0 8px 0;
    list-style: none;
}
.collabo-sns li {
    padding: 0 6px;
}
.collabo-sns li img {
    width: 24px;
}

@media screen and (min-width: 769px) {
    .footer {
        width: 100%;
    }

    .footer .f-primary {
        padding: 36px 0 80px;
        width: 100%;
        background: #3048CA;
    }

    .footer .f-primary__inner {
        margin: 0 auto;
        padding: 0 50px;
        width: 100%;
    }

    .footer .f-secondary {
        padding: 26px 0;
        width: 100%;
        color: #ffffff;
        background: #1D2B7A;
    }

    .footer .f-secondary__inner {
        margin: 0 auto;
        padding: 0 50px;
        width: 100%;
        max-width: 1200px;
    }

    .f-app-info {
        margin: 0 auto 21px;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
    }

    .f-app-info .thumb {
        margin-right: 21px;
        width: 126px
    }

    .f-app-info .info .title {
        margin-bottom: 5px;
        color: #fff;
        font-size: 24px
    }

    .f-app-info .info .text {
        margin: 0;
        color: #fff;
        font-size: 14px;
        line-height: 1.571428571
    }

    .app-list, .f-sns-list {
        padding: 0;
        display: flex;
        flex-flow: row wrap;
        list-style: none;
    }

    .app-list {
        margin: 0 auto;
        width: 527px;
        justify-content: center;
    }
    .app-list li {
        padding: 0 5px;
    }
    .app-list li a {
        display: block;
        height: 60px
    }

    .app-list li a img {
        width: auto;
        height: 100%
    }

    .copy {
        display: block;
        font-size: 16px;
        text-align: center;
    }
    .privacy {
        font-size: 10px;
        color: rgba(255,255,255,0.6);
        text-align: center;
    }
    .page-top {
        bottom: 40px;
        right: 40px;
        width: 180px;
    }
    .collabo {
        top: 10px;
        left: 10px;
        border-radius: 12px;
        padding: 8px 16px;
    }
    .collabo-page-sp {
        font-size: 12px;
    }
    .collabo-sns li {
        padding: 0 6px;
    }
    .collabo-sns li img {
        width: 40px;
    }
    .bnr-crossover {
        width: 480px;
    }
    .bnr-crossover_inner {
        padding: 12px;
    }
}




/* -------------------------------------- */
/* Main Contents
/* -------------------------------------- */
.title-home {
    margin-bottom: 16px;
}
.title-3reasons {
    margin-bottom: 40px;
    max-width: 750px;
}
.about-text {
    margin-bottom: 16px;
    max-width: 934px;
}
.about-3reasons-list {
    list-style: none;
    padding: 0;
}

.about-dot {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-bottom: 16px;
}
.about-dot div {
    margin: 0 8px;
}
.about-dot h3 {
    font-size: 12px;
    font-weight: normal;
    padding: 1px 0;
    text-align: center;
    color: #ffffff;
    background: #311F0E;
    margin-bottom: 0;
}

.txt-attention {
    color: #CC5555;
}

.about-cp ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    list-style: none;
    align-items: flex-end;
}

.about-dot-sm {
    width: 50%;
}

.about-dot-list {
    display: flex;
    flex-flow: row nowrap;
    list-style: none;
    align-items: self-end;
    padding: 0;
    margin-bottom: 0;
}
.about-dot-list li {
    text-align: center;
    padding: 0;
    font-size: 14px;
    font-weight: bold;
}
.about-dot-list li p {
    font-size: 10px;
    height: 1.8em;
}
.about-dot-small {
    letter-spacing: 0px;
}

.mushokutensei {
    margin-bottom: 80px;
}
.mushokutensei-bnr {
    max-width: 780px;
    padding: 12px;
    background: rgba(0,0,0,0.2);
    margin: 0 auto 20px auto;
    text-align: center;
}
.mushokutensei-bnr a {
    color: #ffffff;
}
.youtube-bnr {
    max-width: 960px;
    margin: 0 auto 48px auto;
}

.about-start {
    margin-bottom: 36px;
}
.btn-start-magic {
    display: table;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 8px 32px;
    margin: 0 auto;
    background-color: #EBE30F;
    border: 4px solid #311F0E;
    color: #311F0E;
    border-radius: 20px;
}
.btn-start-play {
    background-color: #E61010;
    border: 4px solid #FFFFFF !important;
    color: #FFFFFF;
    box-shadow: 0px 23px 33px -6px #000000;
}

.about-legend h2 {
    width: 100%;
    max-width: 920px;
    margin: 0 auto 24px auto;
}
.about-legend p {
    width: 100%;
    max-width: 968px;
    margin: 0 auto 48px auto;
}

.about-cp-item {
    max-width: 880px;
    margin: 0 auto;
}
.about-cp-attention {
    font-size: 10px;
    margin-bottom: 0;
    text-align: center;
}
.about-cp-follow {
    margin: 1em auto 0 auto;
    width: 64%;
    max-width: 338px;
}

.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 769px) {
    .btn-start-magic {
        font-size: 40px;
        padding: 16px 60px;
        border: 6px solid #311F0E;
    }
    .about-dot {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        margin-bottom: 60px;
    }
    .about-dot-sm {
        width: auto;
    }
    .about-dot div {
        margin: 0 8px;
    }
    .about-dot h3 {
        font-size: 16px;
        font-weight: bold;
        padding: 4px 0;
        text-align: center;
        color: #ffffff;
        background: #311F0E;
    }
    .about-dot-list li {
        padding: 0 4px;
    }
    .about-dot-list li p {
        font-size: 14px;
    }
    .title-home {
        margin-bottom: 40px;
    }
    .title-3reasons {
        margin: 0 auto 40px auto;
    }
    .about-text {
        margin: 0 auto 40px auto;
    }
    .about-3reasons-list {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        margin-bottom: 40px;
    }
    .about-start {
        margin-bottom: 72px;
    }
    .mushokutensei-bnr {
        max-width: 780px;
        padding: 20px;
        background: rgba(0,0,0,0.2);
        margin: 0 auto 20px auto;
        font-size: 18px;
    }
    .youtube-bnr {
        margin: 0 auto 40px auto;
        padding: 20px;
        background: rgba(0,0,0,0.2);
    }
    .about-cp-attention {
        font-size: 12px;
        margin-bottom: 0;
        text-align: center;
    }
}


/* -------------------------------------- */
/* Question Contents
/* -------------------------------------- */

.title-qa {
    position: relative;
    top: -30px;
    z-index: 5;
    margin-bottom: -20px;
}
.question__title {
    font-size: 16px;
    min-height: 70px;
    line-height: 1.5em;
}
.question__title span {
    display: block;
    font-size: 12px;
    line-height: 1em;
    padding: 4px 0px;
    text-align: center;
    width: 60px;
    border-radius: 60px;
    color: #ffffff;
    background: #311F0E;
}
.answer-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin-bottom: 24px;
}

.answer-list button {
    display: inline-block;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    padding: 8px;
    margin-bottom: 12px;
    background-color: #EBE30F;
    border: 3px solid #311F0E;
    color: #311F0E;
    border-radius: 16px;
}
.answer-list button:before {
    content: "";
    background: url("../img/ic_magic.png") left center no-repeat;
    background-size: 30px;
    padding: 10px 30px 10px 10px;
}
.btn-qa-back {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    padding: 8px 24px;
    background-color: rgba(255, 255, 255, 0.68);
    border: 3px solid #311F0E;
    color: #311F0E;
    border-radius: 50px;
}
.qa-count {
    text-align: right;
    margin-bottom: 0;
}

@media screen and (min-width: 769px) {
    .title-qa {
        position: relative;
        top: -80px;
        z-index: 5;
        margin-bottom: -40px;
    }
    .answer-list button {
        flex: 0 1 49.5%;
    }
    .answer-list button {
        display: inline-block;
        width: 100%;
        font-size: 28px;
        font-weight: bold;
        text-align: left;
        line-height: 60px;
        padding: 8px 16px;
        margin-bottom: 16px;
        background-color: #EBE30F;
        border: 4px solid #311F0E;
        color: #311F0E;
        border-radius: 16px;
    }
    .answer-list button:before {
        content: "";
        background: url("../img/ic_magic.png") no-repeat;
        background-size: 48px;
        vertical-align: middle;
        padding-right: 52px;
    }
    .btn-qa-back {
        font-size: 16px;
        line-height: 28px;
        padding: 8px 24px;
        border: 4px solid #311F0E;
    }
    .question__title {
        font-size: 32px;
        line-height: 1.5em;
        margin-bottom: 1.2em;
    }
    .question__title span {
        display: block;
        font-size: 20px;
        line-height: 1em;
        padding: 8px 0px;
        margin-bottom: 0.5em;
        text-align: center;
        width: 100px;
        border-radius: 60px;
        color: #ffffff;
        background: #311F0E;
    }
}


/* -------------------------------------- */
/* Result Contents
/* -------------------------------------- */
.title-result {
    position: relative;
    top: -40px;
    z-index: 5;
}

.title-sub-result {
    color: #ffffff;
    font-size: 16px;
    text-align: center;
    background-color: #311F0E;
    border-radius: 50px;
}
.result-profile-name {
    max-width: 1040px;
    margin: -20px auto 32px auto;
}
.result-primary {
    padding-bottom: 2em;
    margin-bottom: 2em;
    border-bottom: 3px dotted #876131;
}
.result-primary-score {
    margin-bottom: 0;
}
.result-secondary-text p {
    font-size: 14px;
}
.result-tweet {
    margin-top: 36px;
}
.btn-result-tweet {
    display: block;
    font-size: 18px;
    text-align: center;
    padding: 8px;
    color: #ffffff;
    border: 4px solid #ffffff;
    background-color: #1D9BF0;
    border-radius: 50px;
    margin-bottom: 36px;
}
.btn-result-tweet span {
    display: inline-block;
}
.btn-result-tweet span:before {
    content: "";
    background: url("../img/ic_twitter.png") left center no-repeat;
    background-size: 30px;
    padding: 10px 30px 10px 10px;
}
.btn-result-back {
    display: table;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    padding: 8px 24px;
    background-color: rgba(255, 255, 255, 0.68);
    border: 3px solid #311F0E;
    color: #311F0E;
    border-radius: 50px;
    margin: 40px auto 0 auto;
}
.twitter-timeline-box {
    max-height: 320px;
    overflow: scroll;
    margin: 0px auto 40px auto;
}

@media screen and (min-width: 769px) {
    .title-result {
        top: -80px;
    }
    .result-primary,
    .result-secondary {
        display: flex;
        flex-flow: row-reverse nowrap;
        justify-content: center;
    }
    .result-primary {
        align-items: center;
    }
    .result-secondary {
        align-items: flex-start;
        margin-bottom: 40px;
    }
    .result-secondary-text {
        flex: 0 1 64%;
    }
    .result-secondary-text p {
        font-size: 18px;
        padding: 0 0.6em;
        font-weight: bold;
    }
    .result-secondary-image {
        flex: 0 1 36%;
        padding-right: 1.5em;
    }

    .title-sub-result {
        font-size: 22px;
        padding: 4px 0;
        margin-bottom: 1.5em;
        margin-bottom: 1.5em;
    }

    .btn-result-tweet {
        display: table;
        font-size: 36px;
        padding: 16px 80px;
        margin: 40px auto 60px auto;
        border: 4px solid #ffffff;
    }
    .twitter-timeline-box {
        max-width: 800px;
        max-height: 600px;
        overflow: scroll;
    }
    .btn-result-back {
        font-size: 20px;
        padding: 16px 24px;
    }
}