@charset "UTF-8";
/* =====================================================================
[Master Template] MTST-1 CSS
=====================================================================*/

/* ------------ FixHeader ------------ */
.fixheader{
    border-bottom: solid 1px #f0f0f0;
}
.fixheader_inner{
    box-sizing: border-box;
    max-width: 1440px;
    margin: 0 auto;
    padding: 15px 30px;
    line-height: 1;
}
.fixheader_inner img{
    width: 200px;
    height: auto;
    aspect-ratio: auto 150 / 35;
}
@media screen and (max-width: 750px) {
    .fixheader_inner{
        padding: 5px 15px;
    }
    .fixheader_inner img{
        width: 120px;
    }
}

/* ------------ CP ------------ */
.mvb_cp{
    padding: 1px 0;
    background: #fafafa;
}
@media screen and (max-width: 750px) {
    .mvb_cp .cnbr{
        width: 87%;
    }
}
/* ------------ reg_box ------------ */
.reg_box{
    padding: 50px 0;
    background: #d71244;
}
.acc_open_txt{
    text-align: center;
    margin: 0 auto 10px;
    font-size: 36px;
    letter-spacing: 5px;
    color: #fff;
}
.acc_open_txt span{
    position:relative;
    top: 5px;
    font-size: 150%;
    font-style: italic;
}
@media screen and (max-width: 750px) {
    .reg_box{
        padding: 10px 0 20px;
    }
    .acc_open_txt{
        font-size: 20px;
    }
    .acc_open_txt span{
        top: 2px;
    }
}
a.acc_open {
    position: relative;
    display: block;
    box-sizing: border-box;
    overflow: hidden;
    max-width: 530px;
    margin: 10px auto 0;
    padding: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #d71244;
    text-decoration: none;
    text-align: center;
    background: #fff;
    border-radius: 100px;
    z-index: 99
}
a.acc_open:before {
    backface-visibility: hidden;
    background: rgba(216, 18, 67, 0.11) none repeat scroll 0 0;
    content: "";
    height: 100px;
    left: 50%;
    position: absolute;
    top: 0;
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, -150%, 0px);
    transition: transform 0.9s ease 0s;
    width: 120%;
    z-index: 3;
}
a.acc_open::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    background: url(../../lpimg/cmn/icons/ico_arrow_nr_red.svg) no-repeat;
    background-size: 25px 25px;
    right: 30px;
    top: 26px;
    transition: all 0.3s;
}
a.acc_open:hover::after {
    right: 20px;
    transition: all 0.3s;
    color: #005a9d;
}
a.acc_open:hover::before {
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, 500%, 0px);
}
@media screen and (max-width: 750px) {
    a.acc_open {
        max-width: 90%;
        padding: 10px;
        font-size: 18px;
    }
    a.acc_open::after {
        top: 16px;
        right: 11px;
        width: 20px;
        height: 20px;
        background-size: 15px 15px;
    }
    a.acc_open:hover::after {
        right: 6px;
    }
}
/* ------------ background ------------ */
.st_sec{
    padding-top: 30px;
    padding-bottom: 80px;
}
.st_sec_ptr{
    background: url(../../lpimg/MT/MTST-1/partern_bg.png) no-repeat bottom right;
    background-size: cover;
}
.bg_gry{
    background: #f6f6f6;
}

/* ------------ img ------------ */
.st_sec img{
    max-width: 100%;
}
.st_sec img.img90{
    max-width: 90%;
}
.st_sec img.img80{
    max-width: 80%;
}
/* ------------ title & description ------------ */
main h2{
    position: relative;
    margin: 80px 0 100px;
    text-align: center;
    font-size: 28px;
    letter-spacing: .1em;
    font-weight: bold;
    color: #333333;
}
main h2::after{
    position: absolute;
    content: "";
    bottom: -15px;
    left: calc(50% - 35px);
    width: 80px;
    height: 3px;
    background-color: #005a9d;
    border-radius: 2px;
}
main h2.has_label{
    margin-top: 35px;
}
main h2.has_label.has_label_tp{
    margin-top: 140px;
}
main h2.has_label::before{
    position: absolute;
    content: "";
    left: calc(50% - 33px);
    top: -100px;
    height: 85px;
    width: 66px;
    background: url(../../lpimg/MT/MTST-1/bullet_down.png) no-repeat;
    background-position: center;
}
@media screen and (max-width: 750px) {
    main h2{
        font-size: 20px;
        margin: 30px 0 50px;
    }
    main h2.has_label.has_label_tp{
        margin-top: 100px;
    }
}
.descr{
    text-align: center;
    margin: 80px 0;
    font-size: 18px;
    line-height: 2;
}
.sys_txt{
    text-align: center;
    font-size: 14px;
    line-height: 2em;
}

/* ------------ section nav ------------ */
ul.st_nav{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin:0 0 50px;
    padding: 0;
    list-style: none;
    text-align: center;
}
ul.st_nav li{
    display: inline-block;
    flex-basis: 30%;
    margin: 10px;
    padding: 0;
    vertical-align: bottom;
    border: solid 2px #ececec;
}
ul.st_nav li:hover{
    box-shadow: 3px 5px 5px rgba(0,0,0,0.1);
}
ul.st_nav li a{
    position: relative;
    display: block;
    padding: 60px 20px;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 700;
    text-decoration: none;
    color: #333333;
}
ul.st_nav li a::before{
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    border: solid 2px #c8c8c8;
    right: 0;
    bottom: 14px;
    left: calc(50% - 14px);
    border-radius: 100px;
    box-sizing: border-box;
    background: #fff;
}
ul.st_nav li a::after{
    content: "";
    position: absolute;
    right: 0;
    left: calc(50% - 7px);
    bottom: 20px;
    width: 14px;
    height: 14px;
    background:url(../../lpimg/cmn/icons/ico_arrow_nd_gr.svg) no-repeat;
    background-size: 14px 14px;
    transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 750px) {
    ul.st_nav li{
        flex-basis: 100%;
    }
    ul.st_nav li a{
        padding: 15px 10px;
        font-size: 16px;
    }
    ul.st_nav li a::before{
        bottom: -10px;
    }
    ul.st_nav li a::after{
        bottom: -4px;
    }
}

/* ------------ section 初めてでも簡単設定！3ステップで取引開始 ------------ */
ul.spsteps{
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 30px 0;
    padding: 20px;
    list-style: none;
}
ul.spsteps li{
    position: relative;
    flex: 1;
    margin:0;
    padding: 20px;
    text-align: center;
    background: #fff;
    box-shadow: 0 0 20px #e1e1e1;
}
ul.spsteps li:not(:last-child)::after{
    position: absolute;
    content: "";
    left: calc(100% - 46px);
    top: 50%;
    width: 92px;
    height: 19px;
    background: url(../../lpimg/MT/MTST-1/arrow_right_line.png) no-repeat right ;
    background-size: 68px;
    z-index: 1;
}
ul.spsteps li p{
    text-align: left;
    font-size: 14px;
}
ul.spsteps li p.step{
    margin-top: -58px;
    margin-bottom: 20px;
    line-height: 1;
    font-size: 35px;
    font-weight: bold;
    text-align: center;
    color: #d71244;
}
ul.spsteps li p.step span{
    font-size: 60px;
    font-style: italic;
}
@media screen and (max-width: 750px) {
    ul.spsteps{
        flex-flow: column;
    }
    ul.spsteps li:not(:last-child)::after{
        left: calc(100% - 70px);
        top: calc(100% - 10px);
        transform: rotate(90deg);
    }
    ul.spsteps li p.step{
        margin-top: -50px;
        text-align: left;
    }
    ul.spsteps li img.img90{
        max-width: 60%;
    }
}

/* ------------ section 少額から気軽にスタート1,000通貨取引OK！手数料も無料 ------------ */
/* big_num */
.big_num{
    display:flex;
    justify-content: center;
    align-items:flex-end;
    margin: 30px auto;
    max-width: 1000px;
    text-align: center
}
.big_num span{
    line-height: 1;
}
.big_num span.num{
    font-size: 200px;
    color: #d71244;
    font-style: italic;
    font-weight: bold;
    letter-spacing: -0.05em;
}
.big_num span.dec{
    padding-left: 10px;
    padding-bottom:24px;
    font-size: 40px;
    line-height: 1.3;
    color:#333;
    font-weight: bold;
}
.big_num span.dec.zero{
    padding-bottom:72px;
}
.big_num span.txt{
    padding-bottom: 10px;
    font-size: 140px;
    color:#333;
    font-style: italic;
    font-weight: bold;
}
.big_num span.txt.zero{
    font-size: 80px;
    padding-left:10px;
    padding-bottom: 30px;
}
@media screen and (max-width: 1000px) {
    .big_num span.num{
        font-size: 18vw;
    }
    .big_num span.dec{
        padding-left: 1vw;
        padding-bottom:2vw;
        font-size: 3.7vw;
    }
    .big_num span.dec.zero{
        padding-bottom:6vw;
    }
    .big_num span.txt{
        padding-bottom: 1vw;
        font-size: 13.2vw;
    }
    .big_num span.txt.zero{
        font-size: 7vw;
        padding-left:1wv;
        padding-bottom: 3vw;
    }
}
/* levr_ttl */
.levr_ttl{
    margin: 40px 0;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
}

/* minlot_table */
.minlot_table{
    width: 95%;
    max-width: 1000px;
    margin: 30px auto 50px;
    text-align: center;
    line-height: 1.2;
}
.minlot_table th{
    font-size: 20px;
    padding: 20px 0;
}
.minlot_table th img{
    margin-right: 10px;
    max-width: 70px;
    vertical-align: middle;
}
.minlot_table td{
    padding: 40px 0;
    position:relative;
    font-size: 40px;
    color: #d71244;
    font-weight: bold;
    font-family: var(--custom-font);
}
.minlot_table td span.mini{
    color: #333;
    font-size: 18px;
}
.minlot_table td:not(:last-child)::after{
    position: absolute;
    right: 0;
    top: 20%;
    content:"";
    height: 60%;
    border-right: solid 1px #9aa1af;
}
.minlot_table tr.boder td{
    border-bottom: dotted 1px #9aa1af;
}
@media screen and (max-width: 750px) {
    .minlot_table th{
        font-size: 12px;
    }
    .minlot_table th img{
        margin-right: 0;
        margin-bottom: 5px;
        max-width: 50px;
    }
    .minlot_table td{
        font-size: 18px;
    }
    .minlot_table td span.mini{
        font-size: 14px;
    }
}

/* zeroDetail */
.zeroDetail{
    display: flex;
    flex-wrap: wrap;
    width: 76%;
    list-style: none;
    margin: 20px auto 30px;
    padding:0;
}
.zeroDetail li{
    flex: 1;
    text-align: center;
    font-size: var(--font14px);
    font-family: var(--custom-font);
    font-weight: bold;
    border-right: solid 1px #ccc;
}
.zeroDetail li:first-child{
    border-left: solid 1px #ccc;
}
@media screen and (max-width: 750px) {
    .zeroDetail{
        width: 95%;
        gap: 20px 0;
    }
    .zeroDetail li{
        flex: 32%;
    }
    .zeroDetail li:nth-of-type(3),
    .zeroDetail li:nth-of-type(6){
        border-right: none;
    }
    .zeroDetail li:first-child{
        border-left: none;
    }
}
/* ------------ section 専用のスマホアプリで いつでもどこでも取引できる ------------ */
/* app_dl */
.app_dl{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 30px auto;
    padding: 20px;
    max-width: 1000px;
    background: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.app_dl span{
    flex:1;
}
.app_dl span a{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.app_dl h3{
    flex:1;
    width: 80%;
    min-width: 200px;
    text-align: center;
    padding: 5px;
    border-radius: 100px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    background: #005a9d;
}
@media screen and (max-width: 750px) {
    .app_dl{
        flex-flow: column;
        gap: 10px;
    }
}

/* ------------ section トレーダー選びに迷ったら セレクターランキングをチェック！ ------------ */
.rank_check img{
    width: 80%;
}
.rank_check p{
    padding: 40px;
    font-size: 18px;
    line-height: 2;
}
@media screen and (max-width: 750px) {
    .rank_check p{
        padding: 0px;
        font-size: 16px;
    }
}

/* ------------ section みんなのシストレはここが違う！ ------------ */

table.st_sec_tb{
    width: 100%;
    min-width: 600px;
    text-align: center;
    font-weight: bold;
    border: solid 1px #c7c7c7;
    border-collapse: collapse;
}
table.st_sec_tb th{
    padding: 17px;
    font-size: 18px;
    color: #333;
    border: solid 1px #c7c7c7;
    border-bottom: solid 2px #c7c7c7;
}
table.st_sec_tb td{
    padding: 12px;
    font-size: 16px;
    color: #333;
}
table.st_sec_tb tr:nth-child(odd) td{
    background: #ececec;
}
table.st_sec_tb tr td:first-child{
    white-space: nowrap;
    color: #005a9d;
    text-align: left; 
}
table.st_sec_tb tr td.pink-bg{
    color: #fff;
    background: #d71244;
    border-top: solid 1px #fff;
}
@media screen and (max-width: 750px) {
    .st_sec_tb_wrap{
        overflow-y:scroll;
    }
    table.st_sec_tb th{
        padding: 10px;
    }
    table.st_sec_tb td{
        padding: 5px 7px;
    }
    
}






/* ------------ サポート ------------ */
.support{
    margin: 50px auto;
}
.support h2{
    padding: 5px 0;
    font-size: 24px;
    text-align: center;
    color: #fff;
    font-weight: normal;
    background: #c00317;
}
.support p.subtxt{
    margin: 30px 0;
    text-align: center;
    font-size: 18px;
}
.support .img100{
    width: 100%;
}
.support .mini{
    font-size: 13px;
}
.support .sup_img{
    max-width: 90%;
}
@media screen and (max-width: 750px) {
    .support h2{
        font-size: 18px;
    }
    .support h3,
    .support p{
        margin-right: 15px;
        margin-left: 15px;
    }
}
.support .mini {
    font-size: 13px;
}
.support_subttl {
    font-size: 18px;
    margin: 30px 0;
    font-weight: bold;
    text-align: center;
}

/* ------------ お取引までの流れ ------------ */
.txt-center{
    text-align: center;
}
.support h3{
    color: #E6923E;
    border: solid 2px #454545;
    border-radius: 100px;
    padding: 15px;
    font-size: 18px;
    margin: 80px auto 20px;
    width: 60%;
    font-weight: bold;
    box-sizing: border-box;
    text-align: center;
}
@media screen and (max-width: 750px) {
    .support h3{
        width: 100%;
        margin: 50px 0 20px;
        padding: 12px 0 9px;
        font-size: 16px;
    }
}
/* support_flow_ttl */
.support_flow_ttl{
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 10px;
    text-align: center;
}
.support_flow_ttl span{
    font-size: 24px;
    color: #D9243A;
}

.support_flow_ttl_desc{
    font-size: 14px;
    margin: 0 0 10px;
    text-align: center;
}

.support_step_image img{
    width: 100%;
}


/* sup_tel */
.sup_tel{
    margin: 50px auto 80px;
    text-align: center;
}
.sup_tel img{
    width: 80%;
    max-width: 551px;
}

.support .ly_fle {
    text-align: center;
    margin-bottom: 50px;
}
.support .ly_fle img{
    width: 90%;
}

/* .bank */
.bank{
    margin: 50px auto 80px;
    text-align: center;
}
.bank h3{
    font-size: 18px;
    font-weight: normal;
}
ul.banklist{
    margin: 30px auto;
    max-width: 800px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}
ul.banklist li{
    width: 25%;
}
ul.banklist img{
    width: 95%;
}
@media screen and (max-width: 750px) {
    .bank h3{
        font-size: 20px;
    }
    ul.banklist li{
        width: 33%;
    }
}

/* depositflow */
.depositflow h4{
    margin: 20px auto;
    padding: 5px 0;
    max-width: 280px;
    font-weight: normal;
    color: #fff;
    background: #566b80;
    border-radius: 50px;
}
.depositflow p{
    color: #333;
    font-size: 12px;
    margin-bottom: 30px;
}
.depositflow div{
    margin-bottom: 30px;
    font-size: 15px;
    color: #7da5d7;
}
.depositflow div img{
    max-width: 70%;
    vertical-align: middle;
}
.depositflow span{
    font-size: 12px;
    padding: 3px 10px;
    border: solid 1px #333;
    border-radius: 30px;
}
.depositflow span.blue{
    color: #fff;
    border-color: #7da5d7;
    background: #7da5d7;
}
@media screen and (max-width: 750px) {
    .depositflow.ly_fle div.flex1{
        margin-bottom: 50px;
    }
}

/* trade_flow */
.trade_flow{
    width: 80%;
    margin: 40px auto;
}
@media screen and (max-width: 750px) {
    .trade_flow{
        width: 90%;
    }
}