@charset "utf-8";


/*
    fotter
*/
.common-footer{
    position:relative
}
.footer-middle{
    width:100%;
    background-color:#fff
}
.footer-middle .inner{
    padding:60px 40px 40px
}
.footer-lower{
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    position:relative;
    overflow:hidden;
    width:100%;
    height:284px;
    padding-top:78px;
    background-color:#f4f4f4
}
.footer-lower>.copyright{
    color:#999;
    font-family:'Lato',sans-serif;
    font-size:1.2rem;
    font-weight:400;
    line-height:1.8333;
    text-align:center
}
.footer-lower>.walk{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:80px
}
.footer-lower>.walk span{
    display:block;
    width:100%;
    height:100%;
    background-image:url(https://theo.blue/lp/campaign/color-palette/images/bg_walk-stop.png);
    background-position:51.4096% 0;
    background-repeat:repeat-x;
    background-size:603px 80px
}
.footer-logo{
    width:104px;
    height:32px;
    margin:0 auto 20px
}
.footer-logo img{
    width:100%;
    height:auto
}
.footer-misc{
    padding:30px 0 0;
    margin:0
}
.footer-misc>.title{
    margin:0;
    font-size:1.4rem;
    font-weight:bold;
    line-height:1.4286
}
.footer-misc>.desc{
    margin:6px 0 0;
    font-size:1.2rem;
    line-height:1.5
}
.footer-misc>.desc+.title{
    margin-top:24px
}
.footer-sitemap{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    padding:0 0 40px;
    border-bottom:1px solid #ccc
}
.sitemap-list{
    -ms-flex:0 0 auto;
    flex:0 0 auto;
    padding:0;
    margin:0;
    -webkit-box-flex:0;
    list-style:none
}
.sitemap-list.-contents,.sitemap-list.-external{
    width:50%
}
.sitemap-list.-util{width:100%;margin-top:50px}
.sitemap-list>.item{font-size:1.2rem;line-height:1.5}
.sitemap-list>.item a{color:#666;text-decoration:none}
.sitemap-list>.item+.item{margin-top:9px}
@media screen and (min-width: 768px){._sp{display:none !important}}
@media screen and (min-width: 768px) and (max-width: 1139px){
    .sitemap-list.-contents,.sitemap-list.-external{width:25%}
    .sitemap-list.-util{width:50%;margin-top:0}
}
@media screen and (min-width: 1140px){
    .footer-middle .inner{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        width:84.2105vw;
        max-width:1120px;
        -ms-flex-wrap:nowrap;
        flex-wrap:nowrap;
        align-content:center;
        align-items:center;
        justify-content:flex-start;
        padding:70px 0 80px;
        margin:0 auto;
        -webkit-box-align:center;
        -webkit-box-pack:start;
        -ms-flex-align:center;
        -ms-flex-line-pack:center;
        -ms-flex-pack:start
    }
    .footer-misc{padding:0 0 36px 64px}
    .footer-misc>.title{font-size:1.4rem;line-height:1.4615}
    .footer-misc>.desc+.title{margin-top:16px}
    .footer-sitemap{width:582px;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-wrap:nowrap;flex-wrap:nowrap;justify-content:flex-start;padding:20px 0;border-right:1px solid #ccc;border-bottom:none;-webkit-box-flex:0;-webkit-box-pack:start;-ms-flex-pack:start}.sitemap-list+.sitemap-list{margin-left:48px}.sitemap-list.-contents,.sitemap-list.-external{width:auto}.sitemap-list.-util{width:auto;margin-top:0}.sitemap-list>.item{font-size:1.2rem;line-height:1.3333}
    .sitemap-list>.item a{-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease}
    .sitemap-list>.item a:hover{opacity:0.6}
    .sitemap-list>.item+.item{margin-top:12px}}
@media screen and (max-width: 767px){
    ._pc{display:none !important}}
html,body,h1,h2,h3,h4,h5,h6,a,p,span,em,small,strong,sub,sup,mark,del,ins,strike,abbr,dfn,blockquote,q,cite,code,pre,ol,ul,li,dl,dt,dd,div,section,article,main,aside,nav,header,hgroup,footer,img,figure,figcaption,address,time,audio,video,canvas,iframe,details,summary,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0}html{font-size:62.5%}body{font-size:1.6rem;line-height:1.4}*{font-family:"Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "游ゴシック体", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ", sans-serif;font-size:inherit;line-height:inherit}a{color:inherit}a:visited{color:inherit}body{font-family:"Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "游ゴシック体", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ", sans-serif;}a{transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);text-decoration:none}a:hover{text-decoration:none;opacity:.4}ul.note li{list-style-type:none;text-indent:-1.5rem;padding-left:1.5rem}ul.note li:before{display:inline;content:"※ "}.align-center{text-align:center}.align-right{text-align:right}.link01,.link02{font-size:1.4rem;color:#444;padding-bottom:8px;border-bottom:1px solid #444}.link01 img{width:9px;margin-bottom:1px;margin-right:4px}.link02 img{width:13px;margin-bottom:-1px;margin-left:4px}.is-sp{display:block}@media screen and (min-width: 768px){.is-sp{display:none}}.is-pc{display:none}@media screen and (min-width: 768px){.is-pc{display:block}}.under560{display:block}@media screen and (min-width: 560px){.under560{display:none}}.over560{display:none}@media screen and (min-width: 560px){.over560{display:block}}.container{margin-left:auto;margin-right:auto;max-width:800px}.container-s{margin-left:auto;margin-right:auto;max-width:480px}.firstview-section .wrapper{height:550px;max-width:1600px;background-image:url("../images/firstview.jpg");background-size:cover;background-position:center;border:5px solid rgba(255,255,255,0.7);margin:0px auto}.firstview-section .theo-logo{position:relative;top:24px;left:24px}.firstview-section .theo-logo img{width:80px}.intro-section{padding:60px 24px 80px 24px;text-align:left;font-size:1.6rem;line-height:200%;letter-spacing:0.1rem;color:#444}.intro-section .title-intro{width:276px;margin-bottom:30px}.intro-section .red{color:#c62100}.intro-section .paint01{width:164px;position:absolute;margin-top:10px;right:0px}.table-section{background-color:#f2f6f4;padding:60px 24px 80px 24px;text-align:left}.table-section .title-table{width:188px}@media screen and (min-width: 768px){.table-section .title-table{margin:0px auto}}.table-section table{background-color:#fff;border-collapse:collapse;margin-top:40px;width:100%}.table-section table th,.table-section table td{border:1px #EEEEEE solid}.table-section table th{height:24px;background-color:#E0E0E0;color:#424242;text-align:center;font-size:1.2rem;font-weight:400}.table-section table th .note{font-size:1.0rem}.table-section table td{color:#616161}.table-section table td:nth-of-type(1){min-width:80px;text-align:center;font-size:1.2rem;padding-top:16px;padding-bottom:16px;line-height:2.0rem}.table-section table td:nth-of-type(1) img{width:55px}@media screen and (min-width: 768px){.table-section table td:nth-of-type(1) img{width:70px}}@media screen and (min-width: 768px){.table-section table td:nth-of-type(1){font-size:1.4rem}}.table-section table td:nth-of-type(2),.table-section table td:nth-of-type(3){min-width:80px;text-align:center;font-family:"Helvetica Neue" , Helvetica , Arial , sans-serif;font-size:2.0rem;line-height:1.8rem}@media screen and (min-width: 768px){.table-section table td:nth-of-type(2),.table-section table td:nth-of-type(3){font-size:2.4rem}}.table-section table td:nth-of-type(2) .per,.table-section table td:nth-of-type(3) .per{font-size:1.2rem;font-weight:700}.table-section table td:nth-of-type(2) .off,.table-section table td:nth-of-type(3) .off{font-size:1.2rem;font-weight:400}@media screen and (min-width: 768px){.table-section table td:nth-of-type(2) .off,.table-section table td:nth-of-type(3) .off{font-size:1.4rem}}.table-section table td:nth-of-type(4){padding-left:8px;font-size:1.2rem}@media screen and (min-width: 768px){.table-section table td:nth-of-type(4){font-size:1.4rem;padding-left:24px}}.table-section table li{margin-left:2rem}.table-section table li:before{display:inline}.table-section ol{margin-left:8px;margin-top:16px}.table-section ol li{list-style-type:none;text-indent:-2.5rem;padding-left:1.5rem;text-align:left;font-size:1.2rem;color:#999}.table-section ol li a{text-decoration:underline}.table-section li.number1:before{display:inline;content:"※1 "}.table-section li.number2:before{display:inline;content:"※2 "}.table-section p.black{margin-top:32px;margin-bottom:32px;text-align:left;font-size:1.6rem;line-height:170%;color:#444}.table-section .paint02{width:180px;position:absolute;margin-top:10px;right:0px}.howto-section{padding:60px 24px 40px 24px}.howto-section .paint03{width:180px;position:absolute;margin-top:1000px;left:0px;z-index:-1}.howto-section .title-howto{width:124px;margin-bottom:40px}@media screen and (min-width: 768px){.howto-section .title-howto{margin:0px auto 40px auto}}.howto-section .step1,.howto-section .step2,.howto-section .step3{border:#efeeec solid 1px;padding-top:24px;display:flex;flex-direction:column}@media screen and (min-width: 768px){.howto-section .step1 .box,.howto-section .step2 .box,.howto-section .step3 .box{width:400px}}.howto-section .step1,.howto-section .step3{background-color:#f5f3f1}@media screen and (min-width: 768px){.howto-section .step1,.howto-section .step3{flex-direction:row}}.howto-section .step2{background-color:#fff}@media screen and (min-width: 768px){.howto-section .step2{padding-top:64px;flex-direction:row-reverse}}.howto-section .step-title{width:37px;margin-left:24px}.howto-section .title{font-weight:bold;font-size:2.0rem;color:#555;margin-top:16px;margin-bottom:24px}.howto-section p{margin-left:24px;margin-right:24px;margin-bottom:32px;text-align:left;font-size:1.4rem;line-height:170%;color:#444}.howto-section .step1-img{width:274px;margin-top:40px}.howto-section .step1-img-pc{width:296px;margin-top:40px}.howto-section .step2-img{width:285px}.howto-section .step2-img-pc{width:308px}.howto-section .step3-img{width:258px;margin-top:80px}.howto-section .step3-img-pc{width:252px;margin-top:40px}.cv-section{background-color:#fff;text-align:center;padding:48px 24px;border-top:double 3px #d9d9d9;border-bottom:double 3px #d9d9d9}.cv-section p{font-size:1.6rem;margin-bottom:16px;font-weight:bold}.cv-section .link02{padding-bottom:4px}.cv-section .title2nd{margin-top:56px}.cv-section .cv-button{display:block;font-size:1.8rem;letter-spacing:0.2rem;border-radius:8px;width:100%;line-height:64px}.cv-section .cv-em{color:#fff;font-weight:bold;background:#b7270e;margin-bottom:16px}.cv-section .cv-weak{color:#b7270e;border:#b7270e solid 1px;background:#fff;margin-bottom:8px}.cv-section .chevron-img{width:7px;margin-bottom:0px}.qa-section{text-align:center;padding:48px 24px;background-color:#eef7fa}.qa-section .paint05{width:98px;position:absolute;margin-top:-70px;left:0px}.qa-section .title-qa{width:151px;margin-bottom:40px}.qa-section .qa-box{margin-top:24px}.qa-section #qa-part{text-align:left;font-size:1.4rem;line-height:2.2rem}.qa-section #qa-part .question{display:block;padding:16px;color:#0d6ccf;border:#0d6ccf 1px solid;background-color:#fff;cursor:pointer}.qa-section #qa-part .answer{border:#0d6ccf 1px solid;background-color:#fff;display:none;padding:24px;color:#0d6ccf}.qa-section #qa-part .answer .answer-text{list-style-type:none;text-indent:-1.5rem;padding-left:1rem}.qa-section #qa-part .answer .answer-text .notes{margin-top:16px}.qa-section #qa-part .answer .answer-text .note{list-style-type:none;text-indent:-1.5rem;padding-left:1.5rem;font-size:1.2rem}.qa-section #qa-part .answer .answer-text .note:before{display:inline;content:"※ "}.qa-section #qa-part .answer .answer-text:before{display:inline;content:"A. "}.qa-section #qa-part .answer a{text-decoration:underline}.qa-section #qa-part dt.active{background-color:#0d6ccf;color:#fff}.qa-section .paint06{width:132px;position:absolute;margin-top:20px;right:0px}.detail-section{padding:48px 24px}.detail-section .title-detail{width:202px}.detail-section .wrapper{background-color:#fafafa;margin-top:40px;margin-bottom:20px;padding:4px 24px 24px 24px}.detail-section h3{color:#444;font-size:2.0rem;margin-top:40px;margin-bottom:20px;padding:0.75em 0;border-top:1px solid #9e9e9e;border-bottom:1px solid #9e9e9e}.detail-section p,.detail-section li{color:#444;font-size:1.4rem;margin:10px 0px;line-height:2.0rem;color:#444}.detail-section .grey{color:#999}.detail-section li{margin-left:2rem}.detail-section li:before{display:inline}.detail-section .paint07{width:110px;position:absolute;margin-top:0px;left:0px}.detail-section .example-image{border:1px solid #a5bca0;text-align:center;background:#ffffff}.detail-section .example-image .example-image-title{background:#a5bca0;font-size:1.6rem;color:#ffffff;font-weight:700;height:32px;line-height:32px}.detail-section .example-image .wrapper{padding:24px 16px 16px 16px;margin:0px;background-color:#ffffff}.detail-section .example-image img{width:auto;height:auto;max-width:100%;max-height:100%}.footer{background-color:#f5f5f5;padding:50px 15px;line-height:1.5em}.footer a{color:#616977;text-decoration:none}.footer .footer-top{display:flex;flex-direction:column-reverse;margin-bottom:30px}.footer .footer-top .footer-links .menu-list{text-align:center;margin-bottom:10px}.footer .footer-top .footer-links .menu-list .menu{margin:0 10px;font-size:12px;font-weight:700}.footer .footer-top .footer-links .other-link-list{text-align:center}.footer .footer-top .footer-links .other-link-list .other-link{display:inline-block;font-size:10px;margin:0 5px}.footer .footer-top .footer-logo-box{text-align:center;margin-bottom:30px;flex-grow:1}.footer .footer-top .footer-logo-box .footer-logo{width:100px}.footer .footer-top .footer-logo-box .app-store-download img,.footer .footer-top .footer-logo-box .google-play-badge img{height:36px}.footer .footer-top .footer-logo-box .app-store-download{display:inline-block;margin-top:20px}.footer .footer-bottom{color:#a8afb9;font-size:10px;display:flex;flex-direction:column;text-align:center}.footer .footer-bottom .certifications,.footer .footer-bottom .copyright{font-size:10px}@media screen and (min-width: 768px){.footer{padding:100px 15px}.footer .container-wide{max-width:1170px;padding:0 15px;margin:0 auto;overflow:auto}.footer .footer-top{flex-direction:inherit}.footer .footer-top .footer-links .menu-list{text-align:left}.footer .footer-top .footer-links .menu-list .menu{margin:0 30px 0 0;font-size:13px}.footer .footer-top .footer-links .other-link-list{text-align:left}.footer .footer-top .footer-links .other-link-list .other-link{font-size:11px;margin:0 20px 0 0}.footer .footer-top .footer-logo-box{text-align:right;margin-bottom:0px}.footer .footer-top .footer-logo-box .footer-logo{width:153px}.footer .footer-top .footer-logo-box .app-store-download img,.footer .footer-top .footer-logo-box .google-play-badge img{height:44px}.footer .footer-bottom{flex-direction:inherit;align-items:flex-end;text-align:left}.footer .footer-bottom .copyright{flex-grow:1;text-align:right}}



/* ===== style.css ===== */
body {
	font: 14px/1.8 "Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "游ゴシック体", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ", sans-serif;
}

p {
    color: #4F5F6D;
    font-family: "Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "游ゴシック体", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ", sans-serif;
}

h2, h3, h4, li, dt {
    font-family: "Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "游ゴシック体", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Sans", "ヒラギノ角ゴシック", "Meiryo", "メイリオ", sans-serif;
}

.wrapper {
    position: relative;
}
.wrapper:after {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background: url(../img/bg.png) no-repeat center;
    -webkit-background-size: cover;
            background-size: cover;
    content: "";
    z-index: -50;
}

.pc-only {
    display: block;
}
.sp-only {
    display: none;
}

@media screen and ( max-width: 768px ) {
    .pc-only {
        display: none;
    }
    .sp-only {
        display: block;
    }
}

/* -- inner -- */
.inner {
    margin: 0 auto;
    max-width: 1080px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}
@media screen and ( max-width: 1100px ) {
    .inner {
        margin: 0 10px;
        width: auto;
    }
}


/*
    tag
*/
@media screen and ( min-width: 769px ) {
    a:hover {
        opacity: 0.6;
        transition: opacity 0.6s;
    }
}
@media screen and ( max-width: 768px ) {
    a:hover {
        opacity: 1;
    }
}


img {
    vertical-align: bottom;
    width: 100%;
    height: auto;
}

/* -- hide -- */
@media screen and ( min-width: 769px ) {
    .pc_hide { display: none!important; }
}
@media screen and ( max-width: 768px ) {
    .sp_hide { display: none!important; }
}


/*
	visual
*/
#visual {
    position: relative;
    padding: 114px 0 55px;
    color: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
}
#visual .inner {
    max-width: 700px;
    margin-left: 0;
    margin-right: 48px;
}

.visual_logo {
    position: absolute;
    top: 50px;
    left: 50px;
}
.visual_txt {
    margin: 0 auto;
    max-width: 542px;
}
.visual_h1 {
    margin: 50px auto 0;
    max-width: 700px;
}
.visual_loginbox_tit {
    text-align: center;
    font-size: 27px;
    margin-top: 43px;
    margin-bottom: 3px;
    color: #fff;
}
.visual_loginbox_tit:before {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -3px;
    right: 21px;
    width: 34px;
    height: 59px;
    background: url(../img/visual_loginbox_tit_decoL2.png) no-repeat 0 0;
    -webkit-background-size: 100% auto;
            background-size: 100% auto;
    content: "";
}
.visual_loginbox_tit:after {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -3px;
    left: 21px;
    width: 34px;
    height: 59px;
    background: url(../img/visual_loginbox_tit_decoR2.png) no-repeat 0 0;
    -webkit-background-size: 100% auto;
            background-size: 100% auto;
    content: "";
}
.visual_loginbox_inner {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    justify-content: center;
}
.visual_loginbox_inner img {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

.start-box_inner {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
.start-btn-link {
    margin-bottom: 50px;
}
.start-btn-link a {
    display: inline-block;
    width: 360px;
    height: 70px;
}

.start-box_inner img {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

.visual_loginbox_inner > * {
    width: 360px;
}
.start-box_inner .start-box_inner_btn {
    width: 360px;
    margin: 0 auto 50px;
}
.visual_loginbox_inner > :nth-child(2n) {
    margin-right: 0; 
}
.visual_loginbox_inner_btn {
    border-radius: 35px;
    background: #fff;
}
.visual_loginbox_inner_btn a, .start-box_inner_btn a{
    color: #fff;
    text-decoration: none;
    text-align: center;
    display: block;
    position: relative;
    height: 70px;
    border-radius: 35px;
    background: #000;
    background: -webkit-linear-gradient(to right, #f7810b 55%, #d0d701);
    background: -o-linear-gradient(to right, #f7810b 55%, #d0d701);
    background: linear-gradient(to right, #f7810b 55%, #d0d701);
}
.visual_loginbox_inner_btn a {
    border: 2px solid #fff;
}

.start-box_inner_btn a {
    border: 2px solid #cdde00;
}

.docomo .visual_loginbox_inner_btn a {
    background: -webkit-linear-gradient(#f70b1d 0%, #ff00c4 100%);
    background: -o-linear-gradient(#f70b1d 0%, #ff00c4 100%);
    background: linear-gradient(#f70b1d 0%, #ff00c4 100%);
}
.visual_loginbox_inner_btn a > span {
    font-size: 15px;
    line-height: 1.4;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    margin: 3px auto 0;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}
.start-box_inner_btn a > span {
    font-size: 15px;
    line-height: 1.4;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    margin: 3px auto 0;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}
.visual_loginbox_inner_btn a > span > span {
    font-size: 24px;
    display: inline-block;
}
.start-box_inner_btn a > span > span {
    font-size: 21px;
    display: inline-block;
}
.visual_loginbox_inner_btn img, .start-box_inner_btn img{
    position: relative;
    top: -4px;
    margin-right: 3px;
    height: 26px;
    width: auto;
}
.visual_loginbox_inner_txt {
    margin-top: 19px;
}
.visual_loginbox_inner_txt a {
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    display: block;
    padding: 7px 0 5px;
    border-radius: 20px;
    background: rgba(61, 73, 84, 0.5);
}

.top-img_wrap {
    max-width: 242px;
    text-align: right;
}
.top-img_wrap span {
    font-size: 1.1rem;
    padding-right: 10px;
}

.top-img_wrap img {
    width: 100%;
    height: auto;
}

@media screen and ( max-width: 1100px ) {
    #visual {
        width: 90%;
    }

}
@media screen and ( max-width: 768px ) {
    .visual_loginbox_inner_btn img, .start-box_inner_btn img{
        height: 24px;
    }
    .visual_loginbox_inner_btn a > span > span{
        font-size: 23px;
        font-weight: bold;
    }
    .start-box_inner_btn a > span > span {
        font-size: 18px;
    }
    .start-btn-link {
        margin-bottom: 30px;
    }
    .start-btn-link a {
        width: 90%;
        max-width: 360px;
        margin: 0 auto;
        height: auto;
    }


}

@media screen and ( max-width: 767px ) {
    #visual {
        padding: 50px 0 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #visual .inner {
        margin-right: 0;
    }
    .visual_logo {
        display: none;
    }
    .visual_h1 {
        margin-top: 29px;
    }
    .visual_loginbox_tit {
        font-size: 20px;
        margin-top: 20px;
        font-weight: bold;
    }
    .visual_loginbox_tit img {
        vertical-align: middle;
        position: relative;
        top: -6px;
        margin-right: 8px;
        width: 88px;
    }
    .visual_loginbox_tit:before {
        top: -5px;
        right: 7px;
        width: 24px;
        height: 44px;
    }
    .visual_loginbox_tit:after {
        top: -5px;
        left: 7px;
        width: 24px;
        height: 44px;
    }
    .visual_loginbox_inner {
        display: block;
        margin-top: -1px;
    }
    .visual_loginbox_inner > * {
        margin: 0 auto;
        width: 320px;
        text-align: center;
    }

    .visual_loginbox_inner_txt {
        margin-top: 26px;
    }

    .top-img_wrap {
        max-width: 170px;
        margin: 20px auto 0;
        text-align: center;
    }

}





/*
    section_explanation
*/
#section_explanation {
    color: #fff;
    background: url(../img/section_explanation_bg.png) no-repeat center;
    -webkit-background-size: cover;
            background-size: cover;
}
#section_explanation .inner {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    justify-content: space-between;
    padding: 60px 0 14px;
}
.section_explanation_tit {
    max-width: 450px;
    margin-left: 20px;
}
.section_explanation_txtbox {
    width: 50%;
    width: -webkit-calc(100% - 552px);
    width: calc(100% - 569px);
}
.section_explanation_txtbox p {
    color: #fff;
}

.section_explanation_txtbox_txt {
    font-weight: bold;
    font-size: 20px;
    line-height: 2;
}
.section_explanation_txtbox_caution {
    margin-top: 18px;
}
.section_explanation_imgbox {
    text-align: right;
    margin-top: 50px;
    margin-bottom: 70px;
}
.section_explanation_imgbox p {
    font-size: 10px;
    color: #4F5F6D;
    margin-top: 10px;
    line-height: 1.25;
}


@media screen and ( max-width: 960px ) {
    #section_explanation .inner {
        display: block;
        padding: 80px 0 60px;
    }
    .section_explanation_tit {
        margin: 0 auto;
    }
    .section_explanation_txtbox {
        width: 100%;
    }
    .section_explanation_txtbox_txt {
        font-size: 18px;
        line-height: 2.1;
        margin-top: 51px;
    }
    .section_explanation_txtbox_caution {
        line-height: 1.6;
        margin-top: 66px;
    }
}

@media screen and ( max-width: 768px ) {
    .section_explanation_imgbox {
        text-align: left;
        margin-bottom: 0;
    }
    .section_explanation_txtbox_caution {
        margin-top: 18px;
        font-weight: bold;
    }
    .section_explanation_imgbox p {
        font-weight: bold;
        line-height: 1.4;
    }

    #section_explanation {
        color: #fff;
        background: url(../img/section_explanation_bg.png) repeat center;
        -webkit-background-size: auto;
                background-size: auto;
    }

}



/*
    alink
*/
#alink {
    padding-top: 100px;
    background: #fff;
}
#alink .inner {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    padding: 30px 0 25px;
}
#alink .inner > p {
    text-align: center;
    width: 14.1%;
    border-top: 2px solid #00D080;
    line-height: 1.25;
    position: relative;
}


#alink .inner a {
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    color: #00d080;
    display: inline-block;
    padding-bottom: 7px;
    padding-top: 13px;
}
#alink .inner p:after {
    position: absolute;
    top: 65px;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 6px;
    height: 6px;
    border-bottom: 2px solid #00d080;
    border-right: 2px solid #00d080;
    content: "";
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}







@media screen and ( min-width: 769px ) {
    #alink .inner a:hover {
        opacity: 1;
    }

    #alink .inner a:hover {

        transform: translateY(10px);
        transition: all 0.1s;
    }
    #alink .inner p:hover:after {
        position: absolute;
        top: 75px;
        transition: 0.1s;
    }
}

@media screen and ( max-width: 960px ) {
    #alink .inner {
        padding: 32px 35px 25px;
    }
}
@media screen and ( max-width: 768px ) {
    #alink {
        padding-top: 60px;
    }
    #alink .inner {
        margin: 0 2px;
        padding: 0px 0 36px;
        border-radius: 60px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #alink .inner > p {
        text-align: center;
        width: 30.5%;
        margin-bottom: 40px;
        margin-left: 1.4%;
        margin-right: 1.4%;
    }
    #alink .inner > p:nth-of-type(4) {
        margin-right: 3%;
    }
    #alink .inner > p:last-of-type {
        margin-left: 3%;
    }



    #alink .inner a:after {
        bottom: 13px;
    }
    #alink .inner a {
        font-size: 14px;
        line-height: 1.2;
        display: inline-block;
        vertical-align: top;
        height: 100%;
        padding-bottom: 6px;
    }

    #alink .inner p:after {
        top: auto;
        bottom: -5px;
    }
}



/*
    contents
*/
/* -- h --*/
/* h2 */
h2 {
    font-weight: bold;
    font-size: 36px;
    line-height: 46px;
    text-align: center;
    position: relative;
    padding-top: 23px;
}
h2 span {
    font-family: Arial;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 120px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
}
@media screen and ( max-width: 768px ) {
    h2 {
        font-size: 26px;
        line-height: 1.2;
        padding-top: 73px;
    }
    h2 span {
        font-size: 96px;
    }
}



/*
    esg
*/
#esg {
    padding: 128px 0 94px;
    background: #fff;
}
#esg h2 {
    color: #3C4953;
    z-index: 0;
}
#esg h2 span {
    color: #00d080;
    opacity: 0.2;
    z-index: -1;
}
.esg_box01 {
    margin-top: 55px;
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    justify-content: space-around;
}
.esg_box01 > * {
    margin: 0 7.4% 44px 0;
    width: 46.3%;
    max-width: 460px;
}
.esg_box01 > :nth-child(2n) {
    margin-right: 0;
}
.esg_box01 > :nth-last-child(2),
.esg_box01 > :last-child {
    margin-bottom: 0;
}
.esg_box01_tit {
    font-size: 24px;
    font-weight: bold;
    color: #3d4954;
    margin-top: 15px;
    line-height: 1;
}
.esg_box01_txt {
    margin-top: 16px;
}
.esg_box02_tit {
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    color: #00d080;
    margin-top: 83px;
}
.esg_box02_img {
    text-align: center;
    margin-top: 55px;
}
.esg_box02_img img {
    position: relative;
    right: -2px;
    max-width: 947px;
}
@media screen and ( max-width: 768px ) {
    #esg {
        padding: 20px 0 76px;
    }
    #esg h2 {
        margin: 0 -10px;
    }
    .esg_box01 {
        margin-top: 47px;
        display: block;
        text-align: justify;
    }
    .esg_box01 > *,
    .esg_box01 > :nth-child(2n),
    .esg_box01 > :nth-last-child(2) {
        margin: 0 0 35px;
        width: 100%;
    }
    .esg_box01 > * {
        max-width: 100%;
    }

    .esg_box01 > :last-child {
        margin-bottom: 0;
    }
    .esg_box01_tit {
        margin-top: 20px;
    }
    .esg_box01_txt {
        margin-top: 16px;
        word-break: break-all;
        font-weight: 400;
    }
    .esg_box02_tit {
        font-size: 16px;
        margin: 53px 0px 0;
    }

    .esg_box02_img {
        margin-top: 23px;
    }
    .esg_box02_img img {
        right: 0;
        max-width: 393px;
    }
}



/*
    theogreen
*/

.c_letter-s {
    letter-spacing: -0.1rem;
}


#theogreen {
    position: relative;
    padding: 145px 0 84px;
    z-index: 10;
}
#theogreen:after {
    position: absolute;
    top: 572px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background: #F2F6F9;
    content: "";
    z-index: -20;
}
#theogreen .inner {
    max-width: 1186px;
}
#theogreen h2 {
    color: #fff;
}
#theogreen h2 span {
    color: #bcf692;
    opacity: 0.6;
    z-index: -1;
    top: -7px;
}
.theogreen_box01 {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    margin-top: 40px;
    padding-bottom: 48px;
}
.theogreen_box01 > * {
    position: relative;
    margin-right: 0.2%;
    width: 33.2%;
    padding: 0 10px 15px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}
.theogreen_box01 > :nth-child(3n) {
    margin-right: 0;
}
.theogreen_box01 > :after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    -webkit-transform: skew(0deg, 7deg);
        -ms-transform: skew(0deg, 7deg);
         -o-transform: skew(0deg, 7deg);
            transform: skew(0deg, 7deg);
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;
    background: #fff;
    content: "";
    z-index: -10;
}
.theogreen_box01 > :nth-child(2n):after {
    -webkit-transform: skew(0deg, -7deg);
        -ms-transform: skew(0deg, -7deg);
         -o-transform: skew(0deg, -7deg);
            transform: skew(0deg, -7deg);
    -webkit-transform-origin: top right;
       -moz-transform-origin: top right;
        -ms-transform-origin: top right;
         -o-transform-origin: top right;
            transform-origin: top right;
}
.theogreen_box01_img {
    text-align: center;
    font-family: Arial;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 0.1em;
    color: #00d080;
    margin: 0 auto;
    padding-top: 67px;
    width: 110px;
}
.theogreen_box01_img img {
    margin-bottom: 5px;
}
.theogreen_box01_tit {
    font-weight: bold;
    font-size: 24px;
    line-height: 1.7;
    text-align: center;
    color: #00d080;
    margin: 27px auto 0;
    max-width: 330px;
}
.theogreen_box01_txt {
    color: #4f5f6d;
    margin: 17px auto 0;
    max-width: 270px;
}
.theogreen_box02_tit {
    font-weight: bold;
    font-size: 36px;
    text-align: center;
    color: #3d4954;
    margin-top: 85px;
}
.theogreen_box02_inner {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    margin-top: 26px;
}
.theogreen_box02_inner > * {
    margin-right: 2.4%;
    width: 23.2%;
}
.theogreen_box02_inner > :nth-child(4n) {
    margin-right: 0;
}
.theogreen_box02_inner_num {
    font-family: Arial;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    color: #00d080;
    position: relative;
    padding-top: 15px;
    width: 85px;
    height: 85px;
    background: #fff;
    border: 3px solid #00d080;
    border-radius: 50%;
    z-index: 10;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
}
.theogreen_box02_inner_num span {
    font-size: 34px;
    color: #00d080;
    display: block;
    margin-top: 2px;
}
.theogreen_box02_inner_img {
    margin: -31px 13px 0 12px;
}
.theogreen_box02_inner_txt {
    font-weight: bold;
    font-size: 16px;
    color: #fff;
    position: relative;
    margin-top: 10px;
    padding: 18px 23px 19px;
    background: #00d080;
}
.theogreen_box02_inner_txt:after {
    position: absolute;
    top: 2px;
    bottom: 0;
    right: -100%;
    margin: auto;
    width: 100%;
    height: 3px;
    background: url(../img/theogreen_box02_inner_txt_line.png) no-repeat 0 0;
    -webkit-background-size: auto 100%;
    background-size: auto 100%;
    content: "";
}
.theogreen_box02_inner > :nth-child(4n) .theogreen_box02_inner_txt:after {
    display: none;
}
.theogreen_box02_caution {
    text-align: center;
    color: #3d4954;
    margin-top: 47px;
}
.theogreen_box03_tit {
    text-align: center;
    font-weight: bold;
    font-size: 28px;
    color: #3d4954;
    margin-top: 64px;
}
.theogreen_box03_txt {
    font-size: 16px;
    line-height: 1.7;
    text-align: center;
    color: #3d4954;
    margin: 10px auto 0;
    max-width: 910px;
}
.theogreen_box03_img {
    margin: 37px auto 0;
    max-width: 1087px;
}
@media screen and ( max-width: 768px ) {
    #theogreen {
        padding: 77px 0 0;
    }
    #theogreen:after {
        display: none;
    }
    #theogreen .inner {
        max-width: 1186px;
    }
    #theogreen h2 {
        padding-top: 79px;
    }
    #theogreen h2 span {
        top: 3px;
    }
    .theogreen_box01 {
        display: block;
        margin: 47px -10px 0;
        padding-bottom: 0;
    }
    .theogreen_box01 > * {
        display: flex;
        display: -webkit-flex;
        -webkit-flex-wrap: wrap;
                flex-wrap: wrap;
        justify-content: space-between;
        margin: 0 0 2px;
        width: 100%;
        padding: 0 10px 30px;
        background: #fff;
    }
    .theogreen_box01 > :last-child {
        margin-bottom: 0;
    }
    .theogreen_box01 > :after {
        display: none;
    }
    .theogreen_box01_img {
        font-size: 13px;
        margin: 0;
        padding-top: 40px;
        width: 100px;
    }
    .theogreen_box01_img img {
        margin-bottom: 6px;
    }
    .theogreen_box01_txtbox {
        padding-top: 35px;
        width: 60%;
        width: -webkit-calc(100% - 120px);
        width: calc(100% - 120px);
    }
    .theogreen_box01_tit {
        font-size: 20px;
        line-height: 1.5;
        text-align: left;
        color: #3D4954;
        margin: 0;
        max-width: none;
    }
    .theogreen_box01_txt {
        margin: 10px 0 0;
        max-width: none;
    }
    .theogreen_box02 {
        margin: 0 -10px;
        padding: 0 10px 60px;
        background: #F2F6F9;
    }
    .theogreen_box02_tit {
        font-size: 27px;
        margin-top: 0;
        padding-top: 67px;
    }
    .theogreen_box02_inner {
        display: block;
        margin: 28px auto 0;
        max-width: 275px;
    }
    .theogreen_box02_inner > * {
        margin: 0 0 20px;
        width: 100%;
    }
    .theogreen_box02_inner > :last-child {
        margin-bottom: 0;
    }
    .theogreen_box02_inner_txt {
        padding: 20px 23px 19px;
    }
    .theogreen_box02_inner_txt:after {
        top: auto;
        bottom: -6px;
        right: auto;
        left: 44px;
        margin: 0;
        width: 20px;
        -webkit-transform: rotate(90deg);
           -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
             -o-transform: rotate(90deg);
                transform: rotate(90deg);
        -webkit-transform-origin: top left;
           -moz-transform-origin: top left;
            -ms-transform-origin: top left;
             -o-transform-origin: top left;
                transform-origin: top left;
    }
    .theogreen_box02_caution {
        text-align: left;
        margin-top: 36px;
    }
    .theogreen_box02_caution br {
        display: none;
    }
    .theogreen_box03 {
        margin: 0 -10px;
        padding: 0 10px 39px;
        background: #F2F6F9;
    }
    .theogreen_box03_tit {
        font-size: 24px;
        line-height: 1.25;
        margin-top: 0;
        padding-top: 92px;
    }
    .theogreen_box03_txt {
        font-size: 14px;
        line-height: 1.8;
        text-align: left;
    }
    .theogreen_box03_img {
        text-align: center;
        margin: 31px -2px 0;
    }
    .theogreen_box03_img img {
        max-width: 398px;
    }
}




/*
    ETF
*/

#etf .inner {
    text-align: center;
}

#etf {
    position: relative;
    padding: 145px 0 84px;
    z-index: 10;
    background-color: #F2F6F9D0;
}
#etf h2 {
    color: #3D4954;
}
#etf h2 span {
    color: #bcf692;
    opacity: 0.7;
    z-index: -1;
    top: -12px;
}
.etf-box-items {
    margin-bottom: 40px;
    text-align: left;
}
.etf-box_wrap {
    width: 90%;
    position: relative;
    margin: 90px auto 0;
}

.etf-box-ttl {
    width: 47%;
    max-width: 500px;
    padding: 20px 0 20px 40px;
    background-image: linear-gradient(to right, #BCF692, #60DCCB);
    position: absolute;
    top: -50px;
    left: 0%;
}
.etf-box-ttl.type-2 {
    top: -35px;
}

.etf-box-ttl h4 {
    font-size: 20px;
    color: #3D4954;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    line-height: 1.8;
}

.etf-box-back {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    background-image: linear-gradient(to right, #BCF692, #60DCCB);
    padding: 5px;
}
.etf-box-txt {
    background-color: #fff;
    font-size: 14px;
    padding: 50px 80px 40px;
    text-align: left;
}
.etf-box-txt.type-1 {
    padding: 70px 80px 40px;
}

.sp-space-10 {
    display: none;
}

@media screen and ( max-width: 1100px ) {
    .etf-box-ttl {
        width: 55%;
        padding: 20px 0 20px 20px;
    }
    .etf-box-txt {
        text-align: justify
    }
    .etf-box-txt.type-1 {
        padding: 70px 80px 40px;
    }


}
@media screen and ( max-width: 900px ) {
    .etf-box-ttl {
        width: 90%;
        left: -3.5%;
    }
    .etf-box-txt {
        padding: 40px 30px 40px;
    }
    .etf-box-txt.type-1 {
        padding: 70px 30px 40px;
    }

}
@media screen and ( max-width: 768px ) {
    #etf {
        padding: 55px 0 60px;
    }
    #etf .inner p {
        line-height: 1.8;
        font-size: 1.12rem;
    }
    #etf h2 span {
        top: 0px;
    }
    .etf-box-ttl {
        width: 81.5%;
        padding: 20px;
    }
    .etf-box-txt {
        padding: 40px 30px 30px;
    }
    .etf-box-txt p {
        font-size: 1.4rem!important;
    }

    .etf-box-items {
        margin-bottom: 25px;
    }

    .etf-box-ttl h4 {
        font-size: 1.65rem;
        line-height: 1.3;
    }

    .sp-space-10 {
        display: block;
        width: 100%;
        height: 10px;
    }
}
@media screen and ( max-width: 601px ) {
    .etf-box-txt {
        padding: 50px 30px 30px;
    }
    .etf-box-txt.type-1 {
        padding: 60px 30px 30px;
    }
}
@media screen and ( max-width: 467px ) {
    .etf-box-txt.type-1 {
        padding: 90px 30px 30px;
    }
}





/*
    banner01
*/
#banner01 {
    position: relative;
    padding: 60px 0 120px;
    z-index: 10;
}
#banner01 .inner {
    color: #fff;
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 40px 80px 34px 40px;
    background: url(../img/banner01_bg.png) no-repeat top right;
    -webkit-background-size: cover;
            background-size: cover;
}
#banner01 .inner:after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background: -webkit-linear-gradient(#065fe3 0%, #0053ce 100%);
    background: -o-linear-gradient(#065fe3 0%, #0053ce 100%);
    background: linear-gradient(#065fe3 0%, #0053ce 100%);
    content: "";
    z-index: -10;
}
.banner01_txtbox {
    width: 70%;
    width: -webkit-calc(100% - 165px);
    width: calc(100% - 165px);
}
.banner01_tit {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
}
.banner01_tit_logo {
    margin-right: 10px;
}
.banner01_tit_tit {
    font-weight: bold;
    font-size: 24px;
    position: relative;
    top: -1px;
    color: #fff;
}
.banner01_txt {
    margin-top: 10px;
}
.banner01_txt p {
    color: #fff;
}

.banner01_btn {
    text-align: center;
    margin-bottom: 7px;
    width: 145px;
    background: #fff;
}
.banner01_btn a {
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    color: #065fe3;
    display: block;
    padding: 13px 0 11px;
    transition: background-color 0.6s;
}
.banner01_btn a:after {
    display: inline-block;
    position: relative;
    top: -1px;
    margin-left: 6px;
    width: 5px;
    height: 5px;
    border-top: 2px solid #065fe3;
    border-right: 2px solid #065fe3;
    content: "";
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
@media screen and ( min-width: 769px ) {
    .banner01_btn a:hover {
        opacity: 1;
        background: #7CADF5;
    }
}
@media screen and ( max-width: 768px ) {
    #banner01 {
        padding: 10px 0 60px;
        background-color: transparent;
    }
    #banner01 .inner {
        display: block;
        padding: 40px 31px 41px 31px;
        background: url(../img/banner01_bg_sp.png) no-repeat bottom right;
    }
    .banner01_txtbox {
        width: 100%;
    }

    .banner01_tit_tit {
        font-size: 22px;
        line-height: 1.5;
        top: 0;
        margin-top: 8px;
        width: 70%;
        width: -webkit-calc(100% - 112px);
        width: calc(100% - 112px);
    }
    .banner01_txt {
        margin-top: 15px;
        width: 99%;
        text-align: justify;
    }
    .banner01_btn {
        margin: 25px auto 0;
    }
}


/*
    User
*/

.uder-img_wrap01 {
    width: 100%;
    margin-bottom: 60px;
}
.uder-img_wrap01 img,.uder-img_item img {
    width: 100%;
    max-width: 1036px;
    margin: 0 auto;
    height: auto;
}

.uder-img_wrap02 {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.uder-img_item {
    width: 48%;
    max-width: 490px;
    background-color: #fff;
}

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

    .uder-img_wrap01 {
        margin-bottom: 30px;
    }

    .uder-img_wrap02 {
        flex-direction: column;
        justify-content: center;
    }
    .uder-img_item {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        margin-bottom: 20px;

    }


}


/*
    start
*/
.start {
    position: relative;
    padding-bottom: 90px;
    background: -webkit-linear-gradient(90deg, #bcf692 0%, #60dccb 100%);
    background: -o-linear-gradient(90deg, #bcf692 0%, #60dccb 100%);
    background: linear-gradient(90deg,#bcf692 0%, #60dccb 100%);
    z-index: 10;
}
.start:after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background: url(../img/start_bg.png) repeat center;
    z-index: -10;
    content: "";
}
.start_tit {
    font-weight: bold;
    font-size: 45px;
    text-align: center;
    color: #fff;
    padding-top: 80px;
    line-height: 1.2;
}
.start_box {
    display: flex;
    display: -webkit-flex;
    margin-top: 40px;
    justify-content: center;
}
.start_box > * {
    padding: 0 10px 52px;
    width: 67%;
    max-width: 720px;
    border-radius: 10px;
    background-color: #fff;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
    padding: 60px 0 50px;
}
.start_box > :nth-child(2n) {
    margin-right: 0;
    background: -webkit-linear-gradient(#f2f6f9 0%, #f2f6f9 100%);
    background: -o-linear-gradient(#f2f6f9 0%, #f2f6f9 100%);
    background: linear-gradient(#f2f6f9 0%, #f2f6f9 100%);
}
.start_box_tit {
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    color: #fff;
    margin-bottom: 16px;
    padding-top: 38px;
}
.start_box > :nth-child(2n) .start_box_tit {
    color: #000;
}
.start_box_btn {
    margin: 0 auto;
    max-width: 364px;
    background: #fff;
    border-radius: 35px;
}
.start_box > div >.start_box_btn:nth-child(3) {
    margin-top: 16px;
}
.start_box_btn a {
    color: #fff;
    text-decoration: none;
    text-align: center;
    display: block;
    position: relative;
    height: 70px;
    border: 2px solid #fff;
    border-radius: 35px;
    background: #000;
    background: -webkit-linear-gradient(#0b0bf7 0%, #0076ff 100%);
    background: -o-linear-gradient(#0b0bf7 0%, #0076ff 100%);
    background: linear-gradient(#0b0bf7 0%, #0076ff 100%);
}
.docomo.start_box_btn a {
    background: -webkit-linear-gradient(#f70b1d 0%, #ff00c4 100%);
    background: -o-linear-gradient(#f70b1d 0%, #ff00c4 100%);
    background: linear-gradient(#f70b1d 0%, #ff00c4 100%);
}
.free.start_box_btn a {
    background: -webkit-linear-gradient(#00d080 0%, #60dccb 100%);
    background: -o-linear-gradient(#00d080 0%, #60dccb 100%);
    background: linear-gradient(#00d080 0%, #60dccb 100%);
}
.start_box_btn a > span {
    font-size: 15px;
    line-height: 1.4;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    margin: 3px auto 0;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}
.free.start_box_btn a > span {
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    margin-top: 0;
}
.start_box_btn a > span > span {
    font-size: 12px;
}
.start_box_btn img {
    position: relative;
    top: -4px;
    margin-right: 3px;
    height: 16px;
    width: auto;
}
.start-box-txt_wrap {
    width: 35%;
    margin: 0 auto;
    text-align: left;
}

.start-box-txt_wrap p {
    margin-bottom: 20px;
    position: relative;
    line-height: 1.2;
    font-weight: bold;
}
.start-box-txt_wrap p::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #3D4954;
}
.start-box-txt_wrap p::after {
    content: '→';
    position: absolute;
    right: 0;
    top: 0;
}
.start-box-txt_wrap a {
    display: block;
    width: 100%;
}


.start-bottom_ttl {
    text-align: center;
    width: 90%;
    max-width: 910px;
    padding: 80px 0 0px;
    margin: 0 auto;
    color: #3D4954;
}
.start-bottom_ttl h4 {
    font-size: 2.8rem;
    font-weight: bold;
    margin-bottom: 30px;
}
.start-bottom_ttl p {
    font-size: 1.6rem;
    line-height: 1.8;
}


@media screen and ( max-width: 768px ) {
.start-box_inner .start-box_inner_btn {
    width: 320px;
    margin: 0 auto 35px;
}
.start-box-txt_wrap {
    width: 65%;
    max-width: 300px;
}
.start-box_inner {
    padding: 30px 0;
}
.start-bottom_ttl {
    padding: 40px 0 20px;
    width: 100%;
}
.start-bottom_ttl p {
    font-size: 1.4rem;
}
.start {
    position: relative;
    padding-bottom: 60px;
    background: -webkit-linear-gradient(120deg, #bcf692 0%, #60dccb 100%);
    background: -o-linear-gradient(120deg, #bcf692 0%, #60dccb 100%);
    background: linear-gradient(120deg, #bcf692 0%, #60dccb 100%);
    z-index: 10;
}
.start:after {
    opacity: 0.3;
}
.start_tit {
    font-size: 29px;
    padding-top: 50px;
    line-height: 1.2;
    margin-bottom: 30px;
}
.start_box {
    display: block;
    margin-top: 0px;
}
.start_box > * {
    margin: 0 auto 20px;
    padding: 50px 10px 25px;
    width: 100%;
}
.start_box > :last-child {
    margin-bottom: 0;
}
.start_box_tit {
    margin-bottom: 25px;
}
.start-bottom_ttl h4 {
    line-height: 1.5;
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.start-box-txt_wrap a {
    padding-bottom: 3px;
}


}

/* SNS */

.foot__sns-share {
    background-color: #F2F6F9D0;
    padding: 124px 0 100px;
    position: relative;
  }

.foot-sns-txt h3 {
    color: #1E5EDA;
    font-size: 2.4rem;
    font-weight: 600;
    text-align: center;
    margin-top: -30px;
    position: relative;
    z-index: 1;
}
.sns__wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    position: relative;
    z-index: 1;
  }
  .sns__icon {
    width: 50px;
    margin: 0 10px;
  }
  .sns__icon img {
    width: 100%;
  }

  .common-footer .pagetop {
    cursor: pointer;
    font-size: 72%;
    position: absolute;
    bottom: 237px;
    right: 32px;
    text-align: center;
    z-index: 5; }
    .common-footer .pagetop img {
      display: block;
      margin-bottom: 5px;
      width: 48px;
     }

.footer-middle .inner {
    position: relative;
}

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

    .foot__sns-share {
        padding: 60px 0 24px;
    }
    .sns__wrap {
        margin-top: 20px;
    }
    .foot-sns-txt h3 {
        line-height: 1.5;
        font-size: 2rem
    }
    .footer-middle .inner {
        padding: 40px 30px 60px;
    }
    .common-footer .pagetop {
        right: 25px;
    }
}



/*
    User
*/

#user .inner {
    text-align: center;
}

#user {
    position: relative;
    padding: 145px 0 0px;
    z-index: 10;
}
#user h2 {
    color: #fff;
    margin-bottom: 70px;
}
#user h2 span {
    color: #bcf692;
    opacity: 0.7;
    z-index: -1;
    top: -13px;
}

@media screen and ( max-width: 768px ) {
    #user {
        padding: 55px 0 0px;
    }
    #user h2 {
        margin-bottom: 40px;
    }

    #user h2 span {
        top: 0px;
    }


}


/*
    banner02
*/
#banner02 {
    padding: 60px 0 32px;
    background: url(../img/banner02-2.png) no-repeat center;
    background-size: cover;
}
#banner02 .inner {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 50px 50px 48px 45px;

}
.banner02-img-txt_wrap {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    justify-content: space-between;
}
.banner02_txt {
    font-weight: bold;
    text-align: left;
    color: #3d4954;
    width: 70%;
    width: -webkit-calc(100% - 265px);
    width: calc(100% - 224px);
}
.banner02_txt p {
    font-size: 15px;
    line-height: 2;
    margin-top: -8px;
}
.banner02_txt label {
    font-size: 18px;
    display: block;
    margin-top: 10px;
}
.banner02_txt span {
    font-size: 11px;
    display: inline-block;
    line-height: 1.8;
}


.banner02_txt > * {
    margin-bottom: 2px;
}
.banner02_txt > :last-child {
    margin-bottom: 0;
}
.banner02-btn_wrap {
    width: 100%;
}
.banner02_btn {
    margin-top: 40px;
    margin-left: auto;
    margin-right: 0;
    width: 312px;
    border-radius: 5px;
    background: #fff;
}
.banner02_btn a {
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    color: #065fe3;
    display: block;
    padding: 9px 16px 9px 0;
    border-radius: 5px;
    background: #fff;
    border: 2px solid #065fe3;
    position: relative;
}


.banner02_btn a:after {
    display: inline-block;
    position: absolute;
    right: 16px;
    top: 42%;
    margin-left: 10px;
    width: 5px;
    height: 5px;
    border-top: 2px solid #065fe3;
    border-right: 2px solid #065fe3;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
}



@media screen and ( min-width: 769px ) {


    .banner02_btn a:hover {
    background-color: #065fe3;
    color: #fff;
    opacity: 1;
    transition: all 0.3s ease-in-out;
    }
    .banner02_btn a:hover:after {
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        transition: 0.3s;
    }
}

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

    #banner02 {
        background-image: none;
        padding: 0;
        overflow: hidden;
    }

    #banner02 .inner {
        display: block;
        padding: 40px 15px 60px;
        background: url(../img/banner02_bg_sp.png) no-repeat center;
        -webkit-background-size: cover;
                background-size: cover;
        margin: 0;
    }
    .banner02-img-txt_wrap {
        justify-content: center;
    }
    .banner02_txt {
        font-size: 14px;
        font-weight: normal;
        line-height: 2.5;
        width: 100%;
        margin-top: 20px;
        text-align: justify;
    }
    .banner02_txt label {
        margin-top: 0;
    }

    .banner02_btn {
        margin: 29px auto 0;
    }
    .banner02_img img {
        max-width: 120px;
    }
    .banner02_txt p {
        font-size: 14px;
        margin-bottom: 0;
    }
}



/*
    faq
*/
#faq {
    padding: 150px 0 77px;
    background: #fff;
}
#faq h2 {
    color: #3d4954;
    padding-top: 53px;
    z-index: 0;
}
#faq h2 span {
    color: #00d080;
    opacity: 0.2;
    z-index: -1;
}
.faq_box {
    margin-top: 55px;
}
.faq_box dt {
    color: #3D4954;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    margin-bottom: 10px;
    padding: 27px 50px 25px 20px;
    border-radius: 5px;
    background: #F2F6F9;
}
.faq_box dt:last-of-type {
    margin-bottom: 0;
}
.faq_box dt.open {
    color: #fff;
    background: #00d080;
}
.faq_box dt:after {
    position: absolute;
    top: -5px;
    bottom: 0;
    right: 30px;
    margin: auto;
    width: 6px;
    height: 6px;
    border-bottom: 2px solid #4F5F6D;
    border-right: 2px solid #4F5F6D;
    content: "";
    z-index: 10;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
.faq_box dt.open:after {
    top: 3px;
    border: none;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
}
.faq_box dd {
    display: none;
    color: #4f5f6d;
    padding: 15px 40px 27px;
}
.faq_box dd a {
    text-decoration: underline;
}

.faq_btn {
    margin: 50px auto 0;
    max-width: 201px;
}
.faq_btn a {
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    color: #00d080;
    display: block;
    padding: 12px 0 12px;
    border-radius: 5px;
    border: 2px solid #00d080;
    background: #fff;
    transition: color 0.6s, background-color 0.6s;
}
.faq_caution_tit {
    font-weight: bold;
    font-size: 16px;
    color: #3d4954;
    margin-top: 97px;
}
.faq_caution_txt {
    margin-top: 4px;
    color: #3D4954;
}
.faq_caution_txt > * {
    padding-left: 1em;
    text-indent: -1em;
}
.faq_caution_txt > :before {
    content: "・";
}
@media screen and ( min-width: 769px ) {
    .faq_btn a:hover {
        color: #fff;
        background: #00d080;
        opacity: 1;
    }
}
@media screen and ( max-width: 768px ) {
    #faq {
        padding: 78px 0 50px;
    }
    #faq h2 {
        padding-top: 66px;
    }
    .faq_box dt {
        line-height: 1.6;
        padding: 25px 50px 25px 20px;
    }
    .faq_box dt:after {
        position: absolute;
        top: -5px;
        bottom: 0;
        right: 20px;
        margin: auto;
        width: 6px;
        height: 6px;
        border-bottom: 2px solid #4F5F6D;
        border-right: 2px solid #4F5F6D;
        content: "";
        z-index: 10;
        -webkit-transform: rotate(45deg);
           -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
             -o-transform: rotate(45deg);
                transform: rotate(45deg);
    }
    .faq_box dd {
        padding: 7px 5px 15px;
        text-align: justify;
    }
    .faq_btn {
        margin-top: 41px;
    }
    .faq_caution_tit {
        margin-top: 34px;
    }
}




/*
    footer_outer
*/
.footer_outer {
    padding-top: 1px;
    background: #fff;
}