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


html {
    font-size: 0.7320644217vw;
    box-sizing:border-box;
}
body {
    font-size: 1em;
}


/* link style
--------------------------------------------------------- */
a {
    color: #000;
    text-decoration: none;
}
a:link {
    color: #000;
    text-decoration: none;
}
a:visited {
    color: #000;
    text-decoration: none;
}
a:hover {
    color: #000;
    text-decoration: none;
    opacity: 0.6;
}


.bold{
    font-weight: 700;
}



/* main
--------------------------------------------------------- */


.headerWrapper {
    background-image: url(../img/cashless.png);
    height: 12vw;
    background-size: 100% auto;
    padding: 1.5vw 3vw 3vw 3vw;
}
.header_link {
    display: flex;
    align-items: center;
}
.headerWrapper p {
    font-size: 5rem;
    font-weight: lighter;
    padding: 0 1vw;
}
.visa_icon_header img {
    width: 7vw;
}
.mynavi_icon_header img {
    width: 19vw;
}
.mainSectionWrapper {
    position: relative;
    background: #1a1f72;
}
.main_visual {
    position: relative;
    height: 43vw;
}
.main_visual .cashless {
    position: absolute;
    bottom: 0;
    left: 0;
}
.main_visual .cashless img {
    position: relative;
}
.top_illust img {
    width: 47vw;
    position: absolute;
    top: 4vw;
    left: 1vw;
    z-index: 2;
}
.top_illust_q01 img {
    max-width: 40vw;
    position: absolute;
    top: -3.6vw;
    left: -46vw;
    z-index: 2;
}
.top_illust_q02 img {
    max-width: 40vw;
    position: absolute;
    top: -3.6vw;
    left: -46vw;
    z-index: 2;
}
.top_illust_q03 img {
    max-width: 39.5vw;
    position: absolute;
    top: -3vw;
    left: -45vw;
    z-index: 2;
}
.top_illust_q04 img {
    max-width: 27vw;
    position: absolute;
    top: -4vw;
    left: -40vw;
    z-index: 2;
}
.top_illust_q05 img {
    max-width: 40vw;
    position: absolute;
    top: -1vw;
    left: -45vw;
    z-index: 2;
}
.top_illust_q06 img {
    max-width: 36vw;
    position: absolute;
    top: 1vw;
    left: -43vw;
    z-index: 2;
}
.top_illust_q07 img {
    max-width: 35vw;
    position: absolute;
    top: -1.8vw;
    left: -43vw;
    z-index: 2;
}
.top_illust_q08 img {
    max-width: 37vw;
    position: absolute;
    top: 2vw;
    left: -44vw;
    z-index: 2;
}
.top_illust_q09 img {
    max-width: 33vw;
    position: absolute;
    top: 0vw;
    left: -42vw;
    z-index: 2;
}
.top_illust_q10 img {
    max-width: 36vw;
    position: absolute;
    top: 1vw;
    left: -43vw;
    z-index: 2;
}
.top_visual img {
    width: 51vw;
    position: absolute;
    top: -8vw;
    right: 5vw;
    z-index: 3;
}
.top_visual_q img {
    width: 51vw;
    position: absolute;
    top: -6vw;
    right: 5vw;
    z-index: 3;
}
.top_visual p {
    position: absolute;
    bottom: 14vw;
    right: 9vw;
    z-index: 20;
    font-size: 1.7rem;
    line-height: 3.4rem;
    width: 44vw;
    text-align: center;
}
.top_start a {
    position: absolute;
    bottom: 6vw;
    right: 16vw;
    z-index: 4;
}
.top_start a img {
    width: 30vw;
    height: 100%;
}
.sns {
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 2px solid #000;
    border-radius: 40px;
    background: #fff;
    width: 40vw;
    padding: 1vw 3vw;
    margin: 0 auto;
    position: absolute;
    bottom: -2.5vw;
    left: 0;
    right: 0;
}
.sns img {
    width: 3vw;
}
.sns p {
    font-size: 2.4rem;
    font-weight: bold;
}
.mynavi_icon_footer {
    text-align: center;
    padding-top: 5vw;
}
.mynavi_icon_footer img {
    width: 20vw;
}
.mynavi_icon_footer p, .mynavi_icon_footer a {
    font-size: 1.8rem;
    line-height: 1.8rem;
}
.pr  {
    padding-top: 3vw;
}
.pi_link  {
    display: flex;
    justify-content: space-around;
    padding: 3vw 29vw 0 29vw;
}
.pi_link span {
    padding-right: 0.5vw;
}
.pi_link p {
    border-bottom: 1px solid #000;
    padding-bottom: 1vw;
    display: inline;
}
.pi_link_item {
    display: flex;
}
.copyright  {
    padding-top: 4vw;
    padding-bottom: 8vw;
}
.result_main {
    position: relative;
    display: flex;
}
.result_main p {
    position: absolute;
    top: 23vw;
    right: 11.5vw;
    width: 46vw;
    font-size: 2rem;
    line-height: 3rem;
}
.result_main p sup{
    display: inline;
    vertical-align:baseline;
}
.result_main p .c_red {
    color: #da4477;
}
.result_illust01 {
    position: absolute;
    top: 2.5vw;
    left: 11vw;
}
.result_illust02 {
    position: absolute;
    top: 2.5vw;
    left: 12vw;
}
.result_illust03 {
    position: absolute;
    top: 2.5vw;
    left: 16vw;
}
.result_illust01 img {
    width: 24vw;
}
.result_illust02 img {
    width: 22vw;
}
.result_illust03 img {
    width: 20vw;
}
.result_visual {
    position: absolute;
    top: -5vw;
    right: 7vw;
}
.result_visual img {
    width: 55vw;
}
.result_main .result_tptxt p {
    position: absolute;
    top: 7vw;
    right: 29vw;
    font-size: 2.5rem;
    line-height: 4rem;
    color: #1a1f72;
    z-index: 3;
    width: 11vw;
}
.share_a {
    position: absolute;
    top: 59vw;
    right: 12vw;
}
.share_a img {
    width: 45vw;
}
.share_b {
    position: absolute;
    top: 65vw;
    right: 12vw;
}
.share_b img {
    width: 45vw;
}
.share_c {
    position: absolute;
    top: 60vw;
    right: 12vw;
}
.share_c img {
    width: 45vw;
}
.cashless01 {
    position: absolute;
    bottom: 23vw;
    left: 0;
}
.cashless01 img {
    width: 100vw;
}
.main_visual02 {
    position: relative;
    height: 80vw;
}
.main_below {
    text-align: center;
}
.visa_banner img {
    width: 78vw;
}
.visa_introduction p {
    font-size: 1.8rem;
    line-height: 3.2rem;
    color: #fff;
    padding: 4vw 23vw;
}
.readmore {
    padding-bottom: 2vw;
}
.readmore img {
    width: 50vw;
}
.restart {
    padding-bottom: 8vw;
    z-index: 5;
    position: relative;
}
.restart img {
    width: 27vw;
}
.cashless02 {
    position: absolute;
    bottom: 0vw;
    left: 0;
    z-index: 3;
}
.cashless02 img {
    width: 100vw;
}








/* 分岐
--------------------------------------------------------- */


/* --- Button --- */
.btn, .list-question li {
    display: block;
    text-align: center;
}

.btn__inner, .list-question li button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 1vw 3vw;
    cursor: pointer;
    position: relative;
    transition: 0.4s;
    background: linear-gradient(#1a1f72, #3d4083);
    color: #fff;
    border-radius: 20px;
    font-weight: bold;
    font-size: 3.2rem;
    line-height: 4.4rem;
    text-align: center;
    margin-top: 2vw;
}
.btn__inner:hover, .list-question li button:hover {
    opacity: .85;
}

/* --- BOX --- */
.box__view, .section-question__view {
    background-color: #fff;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
.box__view .line, .section-question__view .line {
    padding: 5px;
}
.box__contents, .section-question__contents {
    padding: 0 2vw;
    color: #1a1f72;
    font-size: 2.5rem;
    line-height: 4rem;
    font-weight: bold;
    text-align: center;
}
.box__contents .title, .section-question__contents .title {
    height: 86px;
    width: 208px;
    line-height: 86px;
    color: #fff;
    font-weight: bold;
    font-size: 0.1rem;
    position: absolute;
    top: -42px;
    left: 50%;
    margin: 0;
    margin-left: -104px;
}

/* --- TOP --- */
/* --- QUESTION --- */
.list-question {
    list-style: none;
    padding-left: 0;
}
.list-question li {
    margin-bottom: 0.5vw;
}

.section-question {
    padding: 0;
    position: absolute;
    z-index: 20;
    top: 5vw;
    right: 9.5vw;
    width: 42.5vw;
}


/* responsive
--------------------------------------------------------- */
@media screen and (min-width:768px) {

.br-sp {
    display: none;
}
.forpc {
    display: block;
}
.forsp {
    display: none;
}

}

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

html {
    font-size: 1.3037809648vw;
    box-sizing:border-box;
}
body {
    font-size: 1em;
}
.br-pc {
    display: none;
}
.forpc {
    display: none;
}
.forsp {
    display: block;
}
.headerWrapper {
    height: 16vw;
    padding: 3vw 5vw;
}
.visa_icon_header img {
    width: 19vw;
}
.headerWrapper p {
    font-size: 7rem;}
.mynavi_icon_header img {
    width: 50vw;
}
.header_link {
    justify-content: center;
}
.main_visual {
    height: 156vw;
}
.top_illust img {
    width: 80vw;
    top: -4vw;
    left: 0;
    right: 0;
    margin: auto;
}
.top_visual img {
    width: 100vw;
    top: 33vw;
    right: 0;
}
.top_visual p {
    bottom: 33vw;
    right: 5vw;
    font-size: 2.6rem;
    line-height: 5.2rem;
    width: 90vw;
}
.top_start a {
    z-index: 4;
    bottom: 16vw;
    right: 0;
    left: 0;
    margin: auto;
    display: flex;
    justify-content: center;
}
.top_start a img {
    width: 60vw;
    height: 100%;
}
.sns {
    width: 90vw;
    padding: 3vw 5vw;
    bottom: -7.5vw;
}
.sns img {
    width: 8vw;
}
.sns p {
    font-size: 3.4rem;
}
.mynavi_icon_footer {
    padding-top: 15vw;
}
.mynavi_icon_footer img {
    width: 60vw;
}
.mynavi_icon_footer p, .mynavi_icon_footer a {
    font-size: 2.6rem;
    line-height: 2.6rem;
}
.pr {
    padding-top: 6vw;
    padding-bottom: 8vw;
}
.mynavi_icon_footer a {
    margin-bottom: 5vw;
}
.pi_link {
    display: flex;
    padding: 3vw;
    flex-direction: column;
    align-items: center;
}
.copyright {
    padding-top: 4vw;
    padding-bottom: 20vw;
}
.section-question {
    top: 22vw;
    width: 80vw;
}
.box__contents, .section-question__contents {
    font-size: 3.6rem;
    line-height: 4.8rem;
}
.btn__inner, .list-question li button {
    margin-top: 5vw;
    font-size: 3rem;
    line-height: 4.8rem;
    padding: 3vw 6vw;
}
.top_illust_q img {
    width: 44vw;
    top: -4vw;
    left: 6vw;
}
.top_visual_q img {
    width: 100vw;
    top: 0;
    right: 0;
}
.main_visual_q {
    height: 155vw;
}
.main_visual02 {
    height: auto;
}
.result_main .result_tptxt p {
    position: absolute;
    top: 20vw;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 3rem;
    line-height: 4rem;
    color: #1a1f72;
    z-index: 3;
    width: 25vw;
}
.visa_banner img {
    width: 95vw;
    padding-top: 10vw;
}
.visa_introduction p {
    padding: 9vw 3vw;
}
.readmore {
    padding-bottom: 4vw;
}
.readmore img {
    width: 90vw;
}
.restart {
    padding-bottom: 20vw;
}
.restart img {
    width: 50vw;
}
.result_main p {
    top: 105vw;
    right: 7vw;
    width: 85vw;
    font-size: 2.6rem;
    line-height: 4.8rem;
}
.result_main p.type_B {
    line-height: 4.2rem;
}
.share_a {
    position: absolute;
    top: 233vw;
    right: 8.5vw;
}
.share_a img {
    width: 85vw;
}
.share_b {
    position: absolute;
    top: 233vw;
    right: 8.5vw;
}
.share_b img {
    width: 85vw;
}
.share_c {
    position: absolute;
    top: 237vw;
    right: 8.5vw;
}
.share_c img {
    width: 85vw;
}
.list-question {
    padding-top: 40vw;
}
.top_illust_q01 img {
    max-width: 40vw;
    position: absolute;
    top: 11vw;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
}
.top_illust_q02 img {
    max-width: 40vw;
    position: absolute;
    top: 24vw;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
}
.top_illust_q03 img {
    max-width: 40vw;
    position: absolute;
    top: 15vw;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
}
.top_illust_q04 img {
    max-width: 28vw;
    position: absolute;
    top: 16vw;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
}
.top_illust_q05 img {
    max-width: 40vw;
    position: absolute;
    top: 15vw;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
}
.top_illust_q06 img {
    max-width: 40vw;
    position: absolute;
    top: 14vw;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
}
.top_illust_q07 img {
    max-width: 40vw;
    position: absolute;
    top: 13vw;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
}
.top_illust_q08 img {
    max-width: 40vw;
    position: absolute;
    top: 28vw;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
}
.top_illust_q09 img {
    max-width: 40vw;
    position: absolute;
    top: 19vw;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
}
.top_illust_q10 img {
    max-width: 40vw;
    position: absolute;
    top: 20vw;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
}




}