/* normalize */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0} body,html{background:#fff;font-size:14px;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} a, img, :after, :before { /*-webkit-transition: opacity .5s cubic-bezier(.5, 0, 0, 1);*/ /*-moz-transition: opacity .5s cubic-bezier(.5, 0, 0, 1);*/ /*-o-transition: opacity .5s cubic-bezier(.5, 0, 0, 1);*/ /*transition: opacity .5s cubic-bezier(.5, 0, 0, 1);*/ } input,textarea,select,button{border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color: transparent;} input[type="checkbox"]{ -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important; } a,a *,div,div *{-webkit-tap-highlight-color:rgba(0, 0, 0, 0.25)} a{overflow:hidden;outline:none} a:hover{text-decoration:none} article,section,table,tbody{display:block} table{border-collapse:collapse} fieldset,img{border:0;vertical-align:top} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal} ol,ul{list-style:none} caption,th{text-align:left} h1,h2,h3,h4,h5,h6{font-weight:400;text-align: justify;} q:before,q:after{content:''} abbr,acronym{border:0} figure{margin:0 !important} .clearfix{width:100%} .clearfix:after{content:"";display:block;clear:both} p,aside,li{word-wrap:break-word;text-align:justify;} *{-webkit-touch-callout:none} *,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} *:before, *:after{pointer-events:none;} input, select {vertical-align: middle;} section {position: relative;} a { text-decoration: none; color: #222; word-break: break-all; margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; overflow: hidden; outline: none; text-decoration: none; } a:visited {} a:link {} a:hover { /*opacity: 0.5;*/ } /* common */ html {} body, input, textarea, select { /*font-family: 'Poppins',"游ゴシック","Yu Gothic",YuGothic,"Meiryo",Hiragino Kaku Gothic ProN,sans-serif*/ /*font-family: 'Montserrat', 'Noto Sans JP', sans-serif;*/ font-family: 'Noto Sans JP', sans-serif; } select, input[type="file"] {cursor: pointer;} body {-webkit-text-size-adjust: 100%;-moz-text-size-adjust: 100%;-ms-text-size-adjust: 100%;text-size-adjust: 100%;position: relative;background-image: url(../img/common/bdy-bg.png);background-size: 1400px auto;background-position: 50% 0;} body * {font-size: 14px;line-height: 2.14em;color: #222;letter-spacing: .075em;} .ttl, .ttlWrp>.sub, .cmnBtn>span {line-height: 1.75em;} .cmnBtn>span {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block;} p, ul.att {margin: 1em 0;} p:first-child, ul.att:first-child, .srvWrp>.frm>.bdyWrp>.dtlWrp>*:first-child, .trmWrp>*:first-child, .trmWrp p:first-child {margin-top: 0;} p:last-child, ul.att:last-child, .srvWrp>.frm>.bdyWrp>.dtlWrp>*:last-child, .trmWrp>*:last-child, .trmWrp p:last-child {margin-bottom: 0;} p, aside, li {word-wrap: break-word;text-align: justify;} .sec {padding-bottom: 120px;position: relative;} .sec:last-child {padding-bottom: 0;} .imgWrp>img {display: block;width: 100%;height: auto;} .cmnBtn {display: block;background: #0dcc51;border-radius: 100px;padding: 30px;text-align: center;position: relative;border: 3px solid rgba(0,0,0,.1);width: 100%;height: auto;overflow: hidden;} .cmnBtn:before, .cmnBtn:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0; } .cmnBtn:after { opacity: .05; transform: skew(-65deg, 0); left: 50%; } .cmnBtn.colRed {background-color: #d80a30;} .cmnBtn.colGry {background-color: #777;} .cmnBtn>span {font-size: 20px;font-weight: 900;color: #FFF;position: relative;z-index: 1;text-shadow: -1px -1px 1px rgba(0,0,0,.25);} .cmnBtn.icn>span>i {color: #FFF;transform: scale(2);margin-right: 1.5em;} p>a, .cfm>a, #cttWrp>#brdcrmWrp>.frm>.unt>a, #cttWrp>#brdcrmWrp>.frm>.unt>a>i, .srvWrp>.frm>.bdyWrp>.infWrp>ul>.unt a, .pwdWrp>.frm>.dtlWrp>.frm>.btnWrp>.unt>.frm>a {text-decoration: underline;color: #50b6ff;font-weight: 900;} .attWrp {width: 75%;margin: 80px auto;border: 2px solid rgba(0,0,0,.035);background-color: rgba(255,255,255,.5);} .attWrp>.frm {padding: 60px 80px;} .attWrp>.frm>.ttlWrp {font-size: 20px;margin-bottom: 20px;position: relative;border-bottom: 1px solid rgba(0,0,0,.15);padding-bottom: 10px;} .attWrp>.frm>.ttlWrp>.ttl {font-size: 1em;text-align: center;} .bg {position: relative;display: block;width: 100%;height: 100%;background-position: 50%;background-size: cover;background-repeat: no-repeat;} ul.att {} ul.att>li {position: relative;padding-left: 1.5em;} ul.att>li.acc, .txtRed {color: #d80a30;} ul.att>li:before {content: "※";display: block;position: absolute;top: 0;left: 0;} ol>li, ol>li>ol>li {padding-left: 2em;position: relative;} ol>li:nth-child(n+2) {margin-top: .5em;} ol>li>ol>li:nth-child(n+2), ol>li>ol>li>ol>li:nth-child(n+2) {margin-top: .25em;} ol>li:before, ol>li>ol>li:before { content: ""; display: block; position: absolute; top: 0; left: 0; } ol>li:nth-child(1):before {content: "01.";} ol>li:nth-child(2):before {content: "02.";} ol>li:nth-child(3):before {content: "03.";} ol>li:nth-child(4):before {content: "04.";} ol>li:nth-child(5):before {content: "05.";} ol>li:nth-child(6):before {content: "06.";} ol>li:nth-child(7):before {content: "07.";} ol>li:nth-child(8):before {content: "08.";} ol>li:nth-child(9):before {content: "09.";} ol>li:nth-child(10):before {content: "10.";} ol>li:nth-child(11):before {content: "11.";} ol>li:nth-child(12):before {content: "12.";} ol>li:nth-child(13):before {content: "13.";} ol>li:nth-child(14):before {content: "14.";} ol>li:nth-child(15):before {content: "15.";} ol>li:nth-child(16):before {content: "16.";} ol>li:nth-child(17):before {content: "17.";} ol>li:nth-child(18):before {content: "18.";} ol>li:nth-child(19):before {content: "19.";} ol>li:nth-child(20):before {content: "20.";} ol>li:nth-child(21):before {content: "21.";} ol>li:nth-child(22):before {content: "22.";} ol>li:nth-child(23):before {content: "23.";} ol>li:nth-child(24):before {content: "24.";} ol>li:nth-child(25):before {content: "25.";} ol>li:nth-child(26):before {content: "26.";} ol>li:nth-child(27):before {content: "27.";} ol>li:nth-child(28):before {content: "28.";} ol>li:nth-child(29):before {content: "29.";} ol>li {} ol>li>ol {} ol>li>ol>li {} ol>li>ol>li:nth-child(1):before {content: "(1)";} ol>li>ol>li:nth-child(2):before {content: "(2)";} ol>li>ol>li:nth-child(3):before {content: "(3)";} ol>li>ol>li:nth-child(4):before {content: "(4)";} ol>li>ol>li:nth-child(5):before {content: "(5)";} ol>li>ol>li:nth-child(6):before {content: "(6)";} ol>li>ol>li:nth-child(7):before {content: "(7)";} ol>li>ol>li:nth-child(8):before {content: "(8)";} ol>li>ol>li:nth-child(9):before {content: "(9)";} ol>li>ol>li:nth-child(10):before {content: "(10)";} ol>li>ol>li:nth-child(11):before {content: "(11)";} ol>li>ol>li:nth-child(12):before {content: "(12)";} ol>li>ol>li:nth-child(13):before {content: "(13)";} ol>li>ol>li:nth-child(14):before {content: "(14)";} ol>li>ol>li:nth-child(15):before {content: "(15)";} ol>li>ol>li:nth-child(16):before {content: "(16)";} ol>li>ol>li:nth-child(17):before {content: "(17)";} ol>li>ol>li:nth-child(18):before {content: "(18)";} ol>li>ol>li:nth-child(19):before {content: "(19)";} ol>li>ol>li:nth-child(20):before {content: "(20)";} ol>li>ol>li:nth-child(21):before {content: "(21)";} ol>li>ol>li:nth-child(22):before {content: "(22)";} ol>li>ol>li:nth-child(23):before {content: "(23)";} ol>li>ol>li:nth-child(24):before {content: "(24)";} ol>li>ol>li:nth-child(25):before {content: "(25)";} ol>li>ol>li:nth-child(26):before {content: "(26)";} ol>li>ol>li:nth-child(27):before {content: "(27)";} ol>li>ol>li:nth-child(28):before {content: "(28)";} ol>li>ol>li:nth-child(29):before {content: "(29)";} ol>li>ol>li>p {margin: 0 !important;} ol>li>ol>li>ol>li:nth-child(1):before {content: "①";} ol>li>ol>li>ol>li:nth-child(2):before {content: "②";} ol>li>ol>li>ol>li:nth-child(3):before {content: "③";} ol>li>ol>li>ol>li:nth-child(4):before {content: "④";} ol>li>ol>li>ol>li:nth-child(5):before {content: "⑤";} ol>li>ol>li>ol>li:nth-child(6):before {content: "⑥";} ol>li>ol>li>ol>li:nth-child(7):before {content: "⑦";} ol>li>ol>li>ol>li:nth-child(8):before {content: "⑧";} ol>li>ol>li>ol>li:nth-child(9):before {content: "⑨";} ol>li>ol>li>ol>li:nth-child(10):before {content: "⑩";} ol>li>ol>li>ol>li:nth-child(11):before {content: "⑪";} ol>li>ol>li>ol>li:nth-child(12):before {content: "⑫";} ol>li>ol>li>ol>li:nth-child(13):before {content: "⑬";} ol>li>ol>li>ol>li:nth-child(14):before {content: "⑭";} ol>li>ol>li>ol>li:nth-child(15):before {content: "⑮";} ol>li>ol>li>ol>li:nth-child(16):before {content: "⑯";} ol>li>ol>li>ol>li:nth-child(17):before {content: "⑰";} ol>li>ol>li>ol>li:nth-child(18):before {content: "⑱";} ol>li>ol>li>ol>li:nth-child(19):before {content: "⑲";} ol>li>ol>li>ol>li:nth-child(20):before {content: "⑳";} ol>li>ol>li>ol>li:nth-child(21):before {content: "㉑";} ol>li>ol>li>ol>li:nth-child(22):before {content: "㉒";} ol>li>ol>li>ol>li:nth-child(23):before {content: "㉓";} ol>li>ol>li>ol>li:nth-child(24):before {content: "㉔";} ol>li>ol>li>ol>li:nth-child(25):before {content: "㉕";} ol>li>ol>li>ol>li:nth-child(26):before {content: "㉖";} ol>li>ol>li>ol>li:nth-child(27):before {content: "㉗";} ol>li>ol>li>ol>li:nth-child(28):before {content: "㉘";} ol>li>ol>li>ol>li:nth-child(29):before {content: "㉙";} /* common end */ /* easing */ a, img, :after, :before { /* -webkit-transition: opacity .5s cubic-bezier(.5, 0, 0, 1); */ /* -moz-transition: opacity .5s cubic-bezier(.5, 0, 0, 1); */ /* -o-transition: opacity .5s cubic-bezier(.5, 0, 0, 1); */ /* transition: opacity .5s cubic-bezier(.5, 0, 0, 1); */ } .cmnBtn, #pageTop, #pageTop>a, .acWrp>.unt>.ttlWrp>.frm>span:before, .acWrp>.unt>.ttlWrp>.frm>span:after, .acWrp.oprStl>.unt>.tglBtn>span:after, .nwsWrp>ul>.unt>article>a>.frm>.frm, body>header { -webkit-transition: transform .3s cubic-bezier(.5, 0, 0, 1); -moz-transition: transform .3s cubic-bezier(.5, 0, 0, 1); -o-transition: transform .3s cubic-bezier(.5, 0, 0, 1); transition: transform .3s cubic-bezier(.5, 0, 0, 1); } .cmnBtn:before, input[type="checkbox"]+label:after { -webkit-transition: opacity .3s cubic-bezier(.5, 0, 0, 1); -moz-transition: opacity .3s cubic-bezier(.5, 0, 0, 1); -o-transition: opacity .3s cubic-bezier(.5, 0, 0, 1); transition: opacity .3s cubic-bezier(.5, 0, 0, 1); } .btn.arw { -webkit-transition: transform .3s cubic-bezier(.5, 0, 0, 1), border-width .3s cubic-bezier(.5, 0, 0, 1); -moz-transition: transform .3s cubic-bezier(.5, 0, 0, 1), border-width .3s cubic-bezier(.5, 0, 0, 1); -o-transition: transform .3s cubic-bezier(.5, 0, 0, 1), border-width .3s cubic-bezier(.5, 0, 0, 1); transition: transform .3s cubic-bezier(.5, 0, 0, 1), border-width .3s cubic-bezier(.5, 0, 0, 1); } .btn.arw:before { -webkit-transition: transform .3s cubic-bezier(.5, 0, 0, 1), opacity .3s cubic-bezier(.5, 0, 0, 1); -moz-transition: transform .3s cubic-bezier(.5, 0, 0, 1), opacity .3s cubic-bezier(.5, 0, 0, 1); -o-transition: transform .3s cubic-bezier(.5, 0, 0, 1), opacity .3s cubic-bezier(.5, 0, 0, 1); transition: transform .3s cubic-bezier(.5, 0, 0, 1), opacity .3s cubic-bezier(.5, 0, 0, 1); } .pagWrp>.frm>ul>li>a, .srcWrp>.frm>form .srcBtn>input, body>header>.inr>.frm>.btnWrp>ul>li>a, body>header>.inr>.cmn>.btnWrp>ul>li>a, .tblWrp>table>tbody>tr>td>.btn, .frmWrp>form>table>tbody>tr>td>.btn, body>header>.inr>.cmn>.unt>.btnWrp>ul>li>a { -webkit-transition: color .3s cubic-bezier(.5, 0, 0, 1), background-color .3s cubic-bezier(.5, 0, 0, 1); -moz-transition: color .3s cubic-bezier(.5, 0, 0, 1), background-color .3s cubic-bezier(.5, 0, 0, 1); -o-transition: color .3s cubic-bezier(.5, 0, 0, 1), background-color .3s cubic-bezier(.5, 0, 0, 1); transition: color .3s cubic-bezier(.5, 0, 0, 1), background-color .3s cubic-bezier(.5, 0, 0, 1); } .nwsWrp>ul>.unt>article>a, .appWrp>.frm>ul>.unt>.frm, .rsrWrp>ul>.unt>.btnWrp>.unt>button, .acWrp>.unt>.ttlWrp, .acWrp.oprStl>.unt>.ttlWrp { -webkit-transition: background-color .3s cubic-bezier(.5, 0, 0, 1); -moz-transition: background-color .3s cubic-bezier(.5, 0, 0, 1); -o-transition: background-color .3s cubic-bezier(.5, 0, 0, 1); transition: background-color .3s cubic-bezier(.5, 0, 0, 1); } .rsrWrp>ul>.unt>.btnWrp>.unt>button *, body>header>.inr>.cmn>.btnWrp>ul>li>a *, body>header>.inr>.cmn>.unt>.btnWrp>ul>li>a * { -webkit-transition: color .3s cubic-bezier(.5, 0, 0, 1); -moz-transition: color .3s cubic-bezier(.5, 0, 0, 1); -o-transition: color .3s cubic-bezier(.5, 0, 0, 1); transition: color .3s cubic-bezier(.5, 0, 0, 1); } body>footer>.inr>.btnWrp>ul>li>a { -webkit-transition: opacity .3s cubic-bezier(.5, 0, 0, 1); -moz-transition: opacity .3s cubic-bezier(.5, 0, 0, 1); -o-transition: opacity .3s cubic-bezier(.5, 0, 0, 1); transition: opacity .3s cubic-bezier(.5, 0, 0, 1); } #mpgAtf>.inr>.bdyWrp>.tblFkdWrp>.unt { -webkit-transition: opacity 1.5s cubic-bezier(.5, 0, 0, 1), transform 1.5s cubic-bezier(.5, 0, 0, 1); -moz-transition: opacity 1.5s cubic-bezier(.5, 0, 0, 1), transform 1.5s cubic-bezier(.5, 0, 0, 1); -o-transition: opacity 1.5s cubic-bezier(.5, 0, 0, 1), transform 1.5s cubic-bezier(.5, 0, 0, 1); transition: opacity 1.5s cubic-bezier(.5, 0, 0, 1), transform 1.5s cubic-bezier(.5, 0, 0, 1); } #cttWrp>.msgWrp>.frm>.clsBtn { -webkit-transition: color .3s cubic-bezier(.5, 0, 0, 1), background-color .3s cubic-bezier(.5, 0, 0, 1), border-color .3s cubic-bezier(.5, 0, 0, 1); -moz-transition: color .3s cubic-bezier(.5, 0, 0, 1), background-color .3s cubic-bezier(.5, 0, 0, 1), border-color .3s cubic-bezier(.5, 0, 0, 1); -o-transition: color .3s cubic-bezier(.5, 0, 0, 1), background-color .3s cubic-bezier(.5, 0, 0, 1), border-color .3s cubic-bezier(.5, 0, 0, 1); transition: color .3s cubic-bezier(.5, 0, 0, 1), background-color .3s cubic-bezier(.5, 0, 0, 1), border-color .3s cubic-bezier(.5, 0, 0, 1); } /* easing end */ /* header */ body>header.setB, body>header.setB>.inr, body>header.setB>.inr>.cmn {height: 106px;} body>header {position: fixed;top: 0;left: 0;width: 100%;min-width: 1100px;height: auto;z-index: 999;} body>header.out {transform: translateY(-100%);} body>header>.inr {} body>header>.inr>.cmn, body>header>.inr>.frm {padding: 20px;} body>header>.inr>.cmn { background-color: #FFF; border-bottom: 1px solid #EEE; position: relative; } body>header>.inr>.cmn>#hdrLogo { margin: auto; display: block; width: 175px; height: auto; } body>header>.inr>.cmn>#hdrLogo>img { width: 100%; height: auto; display: block; } body>header>.inr>.cmn>.btnWrp { position: absolute; top: 0; bottom: 0; right: 20px; margin: auto; width: auto; height: 40px; } body>header>.inr>.cmn>.btnWrp>ul {} body>header>.inr>.cmn>.btnWrp>ul>li {float: left;} body>header>.inr>.cmn>.btnWrp>ul>li:nth-child(n+2) {margin-left: 10px;} body>header>.inr>.cmn>.btnWrp>ul>li>a {background-color: #d80a30;} body>header>.inr>.cmn>.btnWrp>ul>li>a, body>header>.inr>.cmn>.btnWrp>ul>li>a * {color: #FFF;} body>header>.inr>.cmn>.btnWrp>ul>li>a, body>header>.inr>.frm>.btnWrp>ul>li>a {line-height: 20px;padding: 8px 20px;display: block;border: 2px solid rgba(0,0,0,.1);border-radius: 5px;font-weight: 900;} body>header>.inr>.cmn>.btnWrp>ul>li>a>i {margin-right: 5px;} body>header>.inr>.frm {background-color: #EEE;} body>header>.inr>.frm>.lgiWrp {float: left;} body>header>.inr>.frm>.lgiWrp>.user {line-height: 20px;padding: 10px 0;font-weight: 900;} body>header>.inr>.frm>.btnWrp {float: right;} body>header>.inr>.frm>.btnWrp>ul {} body>header>.inr>.frm>.btnWrp>ul>li {float: left;} body>header>.inr>.frm>.btnWrp>ul>li:nth-child(n+2) {margin-left: 10px;} body>header>.inr>.frm>.btnWrp>ul>li>a {border-radius: 50px;background-color: #FFF;} /* 220304 add */ body>header>.inr>.frm>.btnWrp>ul>li.subUnt {position: relative;} body>header>.inr>.frm>.btnWrp>ul>li.subUnt>.unt {position: absolute;width: 200px;height: auto;z-index: 9998;bottom: 0;transform: translateY(100%);} body>header>.inr>.frm>.btnWrp>ul>li.subUnt:not(:last-child)>.unt {left: 0;} body>header>.inr>.frm>.btnWrp>ul>li.subUnt:last-child>.unt {right: 0;} body>header>.inr>.frm>.btnWrp>ul>li.subUnt>.unt * {line-height: 1.75em;} body>header>.inr>.frm>.btnWrp>ul>li.subUnt>.unt>.frm {border-radius: 10px;background-color: #FFF;border: 2px solid rgba(0,0,0,.1);margin-top: 15px;position: relative;padding: 5px 15px;} body>header>.inr>.frm>.btnWrp>ul>li.subUnt>.unt>.frm:before {content: "";width: 20px;height: 20px;border: 10px solid transparent;border-bottom-color: rgba(0,0,0,.1);transform: translateY(-100%);position: absolute;top: 0;} body>header>.inr>.frm>.btnWrp>ul>li.subUnt:not(:last-child)>.unt>.frm:before {left: 20px;} body>header>.inr>.frm>.btnWrp>ul>li.subUnt:last-child>.unt>.frm:before {right: 20px;} body>header>.inr>.frm>.btnWrp>ul>li.subUnt>.unt>.frm>ul {} body>header>.inr>.frm>.btnWrp>ul>li.subUnt>.unt>.frm>ul>li {} body>header>.inr>.frm>.btnWrp>ul>li.subUnt>.unt>.frm>ul>li:nth-child(n+2) {border-top: 1px solid rgba(0,0,0,.1);} body>header>.inr>.frm>.btnWrp>ul>li.subUnt>.unt>.frm>ul>li>a {padding: 10px 0;display: block;position: relative;} body>header>.inr>.frm>.btnWrp>ul>li.subUnt>.unt>.frm>ul>li>a>.txt {display: block;padding-right: 20px;font-size: 13px;} body>header>.inr>.frm>.btnWrp>ul>li.subUnt>.unt>.frm>ul>li>a>.btn.arw {transform: scale(.15);right: -6px;} body>header>.inr>.frm>.btnWrp>ul>li.subUnt>.unt>.frm>ul>li>a:hover>.btn.arw {transform: scale(.5);} body>header>.inr>.frm>.btnWrp>ul>li.subUnt>.unt { -webkit-transition: opacity .3s cubic-bezier(.5, 0, 0, 1); -moz-transition: opacity .3s cubic-bezier(.5, 0, 0, 1); -o-transition: opacity .3s cubic-bezier(.5, 0, 0, 1); transition: opacity .3s cubic-bezier(.5, 0, 0, 1); } body>header>.inr>.frm>.btnWrp>ul>li.subUnt>a.hov {background-color: #d80a30;color: #FFF;} body>header>.inr>.frm>.btnWrp>ul>li.subUnt>a+.unt {opacity: 0;visibility: hidden;} body>header>.inr>.frm>.btnWrp>ul>li.subUnt>a.hov+.unt {opacity: 1;visibility: visible;} /* 220304 add end */ /* agreement mypage */ /*body>header>.inr>.cmn>.unt {float: left;display: table;position: relative;}*/ body>header>.inr>.cmn>.unt#hdrLogoWrp {position: absolute;top: 0;bottom: 0;left: 0;margin: auto;height: 38px;padding-left: 20px;display: block;} body>header>.inr>.cmn>.unt>.frm {display: table;height: 100%;} body>header>.inr>.cmn>.unt>.frm>#hdrLogo, body>header>.inr>.cmn>.unt>.frm>.ttl {display: table-cell;vertical-align: middle;} body>header>.inr>.cmn>.unt>.frm>#hdrLogo {width: 175px;height: 30px;} body>header>.inr>.cmn>.unt>.frm>.ttl {padding-left: 20px;font-size: 11px;letter-spacing: 0;width: 280px;} body>header>.inr>.cmn>.unt>.frm>#hdrLogo>a {display: block;position: relative;height: 100%;} body>header>.inr>.cmn>.unt>.frm>#hdrLogo>a>img {width: 100%;height: auto;display: block;position: absolute;top: 0;bottom: 0;left: 0;margin: auto;} body>header>.inr>.cmn>.unt#gnvPnl {float: right;} body>header>.inr>.cmn>.unt>.btnWrp {display: table-cell;vertical-align: middle;} body>header>.inr>.cmn>.unt>.btnWrp:nth-child(n+2) {padding-left: 10px;} body>header>.inr>.cmn>.unt>.btnWrp>ul>li {float: left;} body>header>.inr>.cmn>.unt>.btnWrp>ul>li:nth-child(n+2) {margin-left: 10px;} body>header>.inr>.cmn>.unt>.btnWrp>ul>li>a, body>header>.inr>.cmn>.unt>.btnWrp>ul>li>a>i {text-align: center;} body>header>.inr>.cmn>.unt>.btnWrp>ul>li>a { display: block; width: 110px; font-size: 12px; font-weight: 900; border: 2px solid rgba(0,0,0,.1); background-color: #FFF; border-radius: 10px; padding: 10px 0 6px; letter-spacing: 0;} body>header>.inr>.cmn>.unt>.btnWrp>ul>li>a>i {display: block;font-size: 20px;} body>header>.inr>.cmn>.unt>.btnWrp>ul>li.login>a, body>header>.inr>.cmn>.unt>.btnWrp>ul>li.login>a *, body>header>.inr>.cmn>.unt>.btnWrp>ul>li.logout>a, body>header>.inr>.cmn>.unt>.btnWrp>ul>li.logout>a * {color: #FFF;} body>header>.inr>.cmn>.unt>.btnWrp>ul>li.login>a {background-color: #0dcc51;} body>header>.inr>.cmn>.unt>.btnWrp>ul>li.logout>a {background-color: #d80a30;} /* agreement mypage end */ /* header end */ /* footer */ #pageTop { width: 60px; height: 180px; position: fixed; bottom: 0; right: 20px; overflow: hidden; transform: translateY(100%); z-index: 998; } #pageTop.in {transform: translateY(0);} #pageTop.out {transform: translateY(100%);} #pageTop>a { width: 100%; height: 100%; display: block; padding: 30px 0; background-color: #d80a30; color: #FFF; font-weight: 900; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl; font-size: 12px; line-height: 20px; padding: 30px 20px 0; border-radius: 50px 50px 0 0; transform: translateY(10px); } body>footer {} body>footer>.inr { width: 1140px; margin-left: auto; margin-right: auto; padding: 0 20px; } body>footer>.inr>#copyright { text-align: center; font-size: 12px; padding: 40px 0; background-color: #777; color: #FFF; font-weight: 900; margin: 0 auto; border-radius: 30px 30px 0 0; } /* agreement */ body>footer>.inr>.btnWrp {display: table;margin: auto;background-color: #EEE;padding: 20px 100px 50px;border-radius: 30px 30px 0 0;margin-bottom: -30px;} body>footer>.inr>.btnWrp>ul {} body>footer>.inr>.btnWrp>ul>li {float: left;} body>footer>.inr>.btnWrp>ul>li:nth-child(n+2) {margin-left: 40px;} body>footer>.inr>.btnWrp>ul>li>a, body>footer>.inr>.btnWrp>ul>li>a>i {font-weight: 900;} body>footer>.inr>.btnWrp>ul>li>a {} body>footer>.inr>.btnWrp>ul>li>a>i {margin-left: 5px;} /* agreement end */ /* footer end */ /* cttWrp */ #cttWrp {overflow: hidden;padding-bottom: 200px;min-width: 1140px;} body>header.setA+#cttWrp>.ctt>:first-child {padding-top: 220px !important;} body>header.setB+#cttWrp>.ctt>:first-child {padding-top: 180px !important;} #cttWrp.noHdr>.ctt>:first-child {padding-top: 100px !important;} body>header.setA+#cttWrp>#brdcrmWrp {top: 160px;} body>header.setB+#cttWrp>#brdcrmWrp {top: 120px;} #cttWrp>#brdcrmWrp {width: 1140px;padding: 0 20px;position: relative;z-index: 998;left: 0;right: 0;margin: auto;} #cttWrp>#brdcrmWrp>.frm>.unt {float: left;position: relative;} #cttWrp>#brdcrmWrp>.frm>.unt:nth-child(n+2) {margin-left: 20px;padding-left: 20px;} #cttWrp>#brdcrmWrp>.frm>.unt:nth-child(n+2):before {content: "";display: block;position: absolute;top: 0;bottom: 0;left: 0;margin: auto;width: 8px;height: 8px;border-top: 2px solid;border-right: 2px solid;transform: rotate(45deg) translate(-50%,50%);opacity: .25;} #cttWrp>.ctt {} #cttWrp>.ctt>.sec {min-width: 1140px;} #cttWrp>.ctt>.sec.colAct {background-color: rgba(0,0,0,.035);padding: 100px 0;margin-top: 0;} #cttWrp>.ctt>.sec.colAct.red {background-color: rgba(216,10,48,.035);} #cttWrp>.ctt>.sec.colAct.green {background-color: rgba(13,204,81,.065);} #cttWrp>.ctt>.sec.colAct.bg{background-color: transparent;background-image: url(../img/common/sec-act-bg.png);background-size: 2000px auto;background-position: 50% 0;background-repeat: repeat-x;} #cttWrp>.ctt>.sec.colAct+.sec {margin-top: 100px;} #cttWrp>.ctt>.sec.colAct.bg:last-child {padding-bottom: 0;} #cttWrp>.ctt>.sec>.inr {width: 1140px;margin-left: auto;margin-right: auto;padding: 0 20px;} #cttWrp>.ctt>.sec>.inr>.ttlWrp, #cttWrp>.ctt>.sec>.inr>.actWrp>.ttlWrp { font-size: 30px; margin-bottom: 40px; padding-top: 100px; margin-top: -100px; position: relative; } #cttWrp>.ctt>.sec>.inr>.ttlWrp>.ttl>img { width: auto; height: auto; display: block; margin: auto; } #cttWrp>.ctt>.sec>.inr>.ttlWrp:before, #cttWrp>.ctt>.sec>.inr>.actWrp>.ttlWrp:before, #cttWrp>.ctt>.sec>.inr>.bdyWrp>.bdySubWrp>.unt>.ttlWrp:before { content: ""; display: block; width: 10%; height: 4px; position: absolute; top: 80px; left: 0; right: 0; margin: auto; border-radius: 50px; transform: translateY(-100%); background-color: rgba(0,0,0,.15); background-color: #d80a30; } #cttWrp>.ctt>.sec>.inr>.ttlWrp.noDeco:before {display: none;} #cttWrp>.ctt>.sec>.inr>.ttlWrp>.ttl, #cttWrp>.ctt>.sec>.inr>.ttlWrp>.sub, #cttWrp>.ctt>.sec>.inr>.actWrp>.ttlWrp>.ttl, #cttWrp>.ctt>.sec>.inr>.actWrp>.ttlWrp>.sub {text-align: center;} #cttWrp>.ctt>.sec>.inr>.ttlWrp>.ttl, #cttWrp>.ctt>.sec>.inr>.actWrp>.ttlWrp>.ttl {font-size: 1em;} #cttWrp>.ctt>.sec>.inr>.ttlWrp>.sub, #cttWrp>.ctt>.sec>.inr>.actWrp>.ttlWrp>.sub {font-size: .5em;opacity: .5;margin: 0 auto;font-weight: 900;} #cttWrp>.ctt>.sec>.inr>.ttlWrpEx {width: 100%;background-color: #0dcc51;padding: 20px 40px;border-radius: 40px 40px 0 0;margin-bottom: 2px;border: 2px solid rgba(0,0,0,.035);} #cttWrp>.ctt>.sec>.inr>.ttlWrpEx>.ttl {font-weight: 900;text-align: center;color: #FFF;font-size: 22px;} #cttWrp>.ctt>.sec>.inr>.actWrp, #cttWrp>.ctt>.sec>.inr>.actWrp>.bgWrp {min-height: 700px;} #cttWrp>.ctt>.sec>.inr>.actWrp {position: relative;margin-bottom: 100px;} #cttWrp>.ctt>.sec>.inr>.actWrp>* {position: relative;z-index: 2;} #cttWrp>.ctt>.sec>.inr>.actWrp>.bgWrp { width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; z-index: 1; padding-top: 150px; mix-blend-mode: multiply; } #cttWrp>.ctt>.sec>.inr>.actWrp>.bgWrp>.bg {background-size: contain;background-position: 50% 0;} #cttWrp>.ctt>.sec>.inr>.actWrp>.bgWrp>.bg:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient(90deg, rgba(255,255,255,0) 25%, rgba(255,255,255,.5) 100%); background-image: linear-gradient(0deg, rgba(255,255,255,0) 25%, rgba(255,255,255,.5) 100%); } #cttWrp>.ctt>.sec>.inr>.actWrp>.ttlWrp {} #cttWrp>.ctt>.sec>.inr>.actWrp>.ttlWrp>.ttl {} #cttWrp>.ctt>.sec>.inr>.actWrp>.dtlWrp { width: 75%; margin: auto; background-color: rgba(255,255,255,.95); padding: 30px 80px; box-shadow: 0 30px 60px -10px rgba(0,0,0,.1); border-radius: 20px; overflow: hidden; border: 2px solid rgba(0,0,0,.035); margin-top: 350px; } #cttWrp>.ctt>.sec>.inr>.actWrp>.dtlWrp>.frm>.ttlWrp {margin-bottom: 20px;font-size: 18px;} #cttWrp>.ctt>.sec>.inr>.actWrp>.dtlWrp>.frm>.ttlWrp>.ttl {text-align: center;font-weight: 900;font-size: 1em;} #cttWrp>.ctt>.sec>.inr>.bdyWrp {} #cttWrp>.ctt>.sec>.inr>.bdyWrp>:first-child {margin-top: 0 !important;} #cttWrp>.ctt>.sec>.inr>.bdyWrp>:last-child {margin-bottom: 0 !important;} #cttWrp>.ctt>.sec>.inr>.bdyWrp>.txtWrp, #cttWrp>.ctt>.sec>.inr>.bdyWrp>.altWrp {margin: 40px auto;width: 75%;} #cttWrp>.ctt>.sec>.inr>.bdyWrp>.txtWrp>*, #cttWrp>.ctt>.sec>.inr>.bdyWrp>.altWrp>p {text-align: center;} #cttWrp>.ctt>.sec>.inr>.bdyWrp>.altWrp {border-radius: 50px;border: 2px solid #d80a30;padding: 10px 20px;-webkit-animation: altWrpAnm 2s linear infinite;animation: altWrpAnm 2s linear infinite;} @-webkit-keyframes altWrpAnm {0% {opacity: 1;}70% {opacity: 1;}85% {opacity: 0;}100% {opacity: 1;}} @keyframes altWrpAnm {0% {opacity: 1;}70% {opacity: 1;}85% {opacity: 0;}100% {opacity: 1;}} #cttWrp>.ctt>.sec>.inr>.bdyWrp>.altWrp>p, #cttWrp>.ctt>.sec>.inr>.bdyWrp>.altWrp * {font-size: 16px;color: #d80a30;} #cttWrp>.ctt>.sec>.inr>.bdyWrp>.altWrp>p>span {font-weight: 900;} #cttWrp>.ctt>.sec>.inr>.bdyWrp>.btnWrp {margin: 100px auto;} #cttWrp>.ctt>.sec>.inr>.bdyWrp>.btnWrp>.unt {} #cttWrp>.ctt>.sec>.inr>.bdyWrp>.btnWrp.sizS .cmnBtn {padding: 10px;} #cttWrp>.ctt>.sec>.inr>.bdyWrp>.btnWrp.sizS .cmnBtn>span {font-size: 16px;} #cttWrp>.ctt>.sec>.inr>.bdyWrp>.bdySubWrp {} #cttWrp>.ctt>.sec>.inr>.bdyWrp>.bdySubWrp>.unt {} #cttWrp>.ctt>.sec>.inr>.bdyWrp>.bdySubWrp>.unt:nth-child(n+2) {margin-top: 100px;} #cttWrp>.ctt>.sec>.inr>.bdyWrp>.bdySubWrp>.unt>.ttlWrp {font-size: 22px;margin-bottom: 40px;padding-top: 100px;margin-top: -100px;position: relative;} #cttWrp>.ctt>.sec>.inr>.bdyWrp>.bdySubWrp>.unt>.ttlWrp:before {height: 2px;width: 5%;} #cttWrp>.ctt>.sec>.inr>.bdyWrp>.bdySubWrp>.unt>.ttlWrp>.ttl {font-size: 1em;text-align: center;} .btnWrp.clm>.unt {float: left;} .btnWrp.clm.set2>.unt {width: 50%;} .btnWrp.clm.set2>.unt:nth-child(1) {padding: 0 30px 0 60px;} .btnWrp.clm.set2>.unt:nth-child(2) {padding: 0 60px 0 30px;} .btn.arw { display: block; width: 30px; height: 30px; position: absolute; margin: auto; border-radius: 50%; border: 15px solid #d80a30; overflow: hidden; top: 0; bottom: 0; right: 0; transform: scale(.25); } .btn.arw:before { content: ""; display: block; width: 8px; height: 8px; position: absolute; top: 0; bottom: 0; left: -3px; right: 0; margin: auto; border: 2px solid #d80a30; border-left: none; border-bottom: none; transform: rotate(45deg) translate(-20px,20px); opacity: 0; } .srvWrp {position: relative;} .srvWrp>.frm {position: relative;z-index: 2;} .srvWrp>.frm>.ttlWrp {width: 60%;margin-bottom: 40px;} .srvWrp>.frm>.ttlWrp>*>img {display: block;width: 100%;height: auto;} .srvWrp>.frm>.bdyWrp {width: 50%;} .srvWrp>.frm>.bdyWrp>.dtlWrp {padding-right: 80px;} .srvWrp>.frm>.bdyWrp>.dtlWrp>* {margin: 15px 0;} .srvWrp>.frm>.bdyWrp>.dtlWrp>ul {padding-left: 5px;} .srvWrp>.frm>.bdyWrp>.dtlWrp>ul>li, .srvWrp>.frm>.bdyWrp>.dtlWrp>ul>li>i {color: #0dcc51;} .srvWrp>.frm>.bdyWrp>.dtlWrp>ul>li { font-weight: 900; font-size: 20px; } .srvWrp>.frm>.bdyWrp>.dtlWrp>ul>li:nth-child(n+2) {margin-top: 5px;} .srvWrp>.frm>.bdyWrp>.dtlWrp>ul>li>i { transform: scale(2); margin-right: 20px; } .srvWrp>.frm>.bdyWrp>.dtlWrp>dl {} .srvWrp>.frm>.bdyWrp>.dtlWrp>dl>dt { background-color: #0dcc51; display: inline-block; padding: 5px 20px; border-radius: 50px; color: #FFF; font-weight: 900; } .srvWrp>.frm>.bdyWrp>.dtlWrp>dl>dd, .srvWrp>.frm>.bdyWrp>.dtlWrp>dl>dd * {color: #0dcc51;font-weight: 900;text-align: center;font-size: 16px;} .srvWrp>.frm>.bdyWrp>.dtlWrp>dl>dd { margin-bottom: 15px; border: 2px solid; border-radius: 20px; padding: 20px 40px; margin-top: -20px; background-color: rgba(255,255,255,.95); } .srvWrp>.frm>.bdyWrp>.dtlWrp>dl>dd:last-child {margin-bottom: 0;} .srvWrp>.frm>.bdyWrp>.dtlWrp>dl>dd>ul {} .srvWrp>.frm>.bdyWrp>.dtlWrp>dl>dd>ul>li {float: left;} .srvWrp>.frm>.bdyWrp>.dtlWrp>dl>dd>ul>li:nth-child(n+2):before { content: "/"; padding: 0 10px; } .srvWrp>.frm>.bdyWrp>.btnWrp {margin-top: 40px;} .srvWrp>.frm>.bdyWrp>.infWrp {} .srvWrp>.frm>.bdyWrp>.infWrp>.ttlWrp {margin-bottom: 20px;} .srvWrp>.frm>.bdyWrp>.infWrp>.ttlWrp>.ttl, .srvWrp>.frm>.bdyWrp>.infWrp>.ttlWrp>.ttl>i {font-weight: 900;font-size: 18px;line-height: 1.75em;} .srvWrp>.frm>.bdyWrp>.infWrp>.ttlWrp>.ttl {padding-left: 10px;} .srvWrp>.frm>.bdyWrp>.infWrp>.ttlWrp>.ttl>i {transform: scale(1.5);margin-right: 15px;} .srvWrp>.frm>.bdyWrp>.infWrp>ul {height: 400px;overflow-y: auto;box-shadow: 0 30px 60px -10px rgba(0,0,0,.1);border-radius: 20px;border: 2px solid rgba(0,0,0,.035);background-color: rgba(255,255,255,.95);} .srvWrp>.frm>.bdyWrp>.infWrp>ul>.unt {border-bottom: 1px dashed rgba(0,0,0,.15);} .srvWrp>.frm>.bdyWrp>.infWrp>ul>.unt:last-child {border-bottom: none;} .srvWrp>.frm>.bdyWrp>.infWrp>ul>.unt>.frm {display: table;width: 100%;padding: 30px 40px;} .srvWrp>.frm>.bdyWrp>.infWrp>ul>.unt>.frm>time, .srvWrp>.frm>.bdyWrp>.infWrp>ul>.unt>.frm>.ttl {display: table-cell;vertical-align: top;} .srvWrp>.frm>.bdyWrp>.infWrp>ul>.unt>.frm>time {width: 25%;padding-right: 20px;font-weight: 900;opacity: .5;} .srvWrp>.frm>.bdyWrp>.infWrp>ul>.unt>.frm>.ttl {width: 75%;} .srvWrp>.imgWrp {width: 70%;height: auto;position: absolute;z-index: 1;bottom: 0;right: 0;transform: translateX(15%);mix-blend-mode: multiply;} .srvWrp>.frm>.bdyWrp.flx {width: 100%;} .srvWrp>.frm>.bdyWrp.flx>.dtlWrp {padding-right: 0;} .stpWrp {} .stpWrp>.unt {position: relative;margin-top: 60px;} .stpWrp>.unt:nth-child(n+2) {margin-top: 100px;} .stpWrp>.unt:before { content: ""; display: block; width: calc(200% + 80px); height: 100%; position: absolute; top: 50px; background-image: -webkit-linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.035) 50%); background-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.035) 50%); } .stpWrp>.unt:nth-child(odd):before {left: -80px;border-radius: 40px 0 0 0;} .stpWrp>.unt:nth-child(even):before {right: -80px;border-radius: 0 40px 0 0;} .stpWrp>.unt>.txtWrp, .stpWrp>.unt>.imgWrp {position: relative;} .stpWrp>.unt>.txtWrp {float: left;width: 60%;} .stpWrp>.unt>.txtWrp>.ttlWrp {position: relative;padding-bottom: 40px;margin-bottom: 35px;} .stpWrp>.unt>.txtWrp>.ttlWrp:before { content: ""; display: block; background-color: #d80a30; width: 400%; height: 2px; position: absolute; bottom: 0; left: 0; transform: translateX(-75%); } .stpWrp>.unt>.txtWrp>.ttlWrp>.ttl, .stpWrp>.unt>.txtWrp>.ttlWrp>.sub {line-height: 1.1em;} .stpWrp>.unt>.txtWrp>.ttlWrp>.ttl { font-size: 80px; letter-spacing: 0; color: #d80a30; font-weight: 900; } .stpWrp>.unt>.txtWrp>.ttlWrp>.sub {font-size: 30px;font-weight: 900;} .stpWrp>.unt>.txtWrp>.dtlWrp {} .stpWrp>.unt>.txtWrp>.dtlWrp>p {font-size: 16px;} .stpWrp>.unt>.txtWrp>.splWrp {padding: 15px 30px;margin-top: 35px;border: 2px solid rgba(0,0,0,.15);background-color: #FFF;border-radius: 10px;} .stpWrp>.unt>.txtWrp>.splWrp>p {font-size: 12px;} .stpWrp>.unt>.imgWrp {width: 30%;float: right;box-shadow: 0 30px 60px -10px rgba(0,0,0,.1);border-radius: 20px;overflow: hidden;border: 2px solid rgba(0,0,0,.035);} .nwsWrp {} .nwsWrp>ul {} .nwsWrp>ul>.unt {position: relative;border-bottom: 1px solid rgba(0,0,0,.15);} .nwsWrp>ul>.unt:first-child {border-top: 1px solid rgba(0,0,0,.15);} .nwsWrp>ul>.unt>article {} .nwsWrp>ul>.unt>article>a {width: 100%;height: auto;display: block;padding: 30px 40px;} .nwsWrp>ul>.unt>article>a>.frm {position: relative;padding-right: 60px;} .nwsWrp>ul>.unt>article>a>.frm>.frm {display: table;} .nwsWrp>ul>.unt>article>a>.frm>.frm>time, .nwsWrp>ul>.unt>article>a>.frm>.frm>.ttl {display: table-cell;vertical-align: top;} .nwsWrp>ul>.unt>article>a>.frm>.frm>time {width: 140px;padding-right: 20px;font-weight: 900;opacity: .5;} .acWrp {border-top: 1px solid rgba(0,0,0,.15);} .acWrp>.unt {border-bottom: 1px solid rgba(0,0,0,.15);} .acWrp>.unt>.ttlWrp, .acWrp>.unt>.bdyWrp {position: relative;padding: 30px 40px;} .acWrp>.unt>.ttlWrp {cursor: pointer;} .acWrp>.unt>.bdyWrp, .acWrp>.unt>.frmWrp {display: none;} .acWrp>.unt>.frmWrp>.frm>table {margin-bottom: 1px;} .acWrp>.unt>.frmWrp>.frm>table>tfoot {margin-bottom: 100px;} .acWrp>.unt>.bdyWrp {border-top: 1px dotted rgba(0,0,0,.15);} .acWrp>.unt>.ttlWrp>.frm, .acWrp>.unt>.bdyWrp>.frm {display: block;position: relative;} .acWrp>.unt>.ttlWrp>.frm {font-size: 18px;line-height: 1.75em;padding-right: 60px;} .acWrp>.unt>.ttlWrp>.frm:before, .acWrp>.unt>.bdyWrp>.frm:before { display: block; font-size: 20px; font-weight: 900; position: relative; margin-bottom: 10px; } .acWrp>.unt>.ttlWrp>.frm:before {color: #d80a30;} .acWrp.faqStl>.unt>.bdyWrp>.frm:before {color: #50b6ff;} .acWrp.faqStl>.unt:nth-child(1)>.ttlWrp>.frm:before {content: "Question.01";} .acWrp.faqStl>.unt:nth-child(2)>.ttlWrp>.frm:before {content: "Question.02";} .acWrp.faqStl>.unt:nth-child(3)>.ttlWrp>.frm:before {content: "Question.03";} .acWrp.faqStl>.unt:nth-child(4)>.ttlWrp>.frm:before {content: "Question.04";} .acWrp.faqStl>.unt:nth-child(5)>.ttlWrp>.frm:before {content: "Question.05";} .acWrp.faqStl>.unt:nth-child(6)>.ttlWrp>.frm:before {content: "Question.06";} .acWrp.faqStl>.unt:nth-child(7)>.ttlWrp>.frm:before {content: "Question.07";} .acWrp.faqStl>.unt:nth-child(8)>.ttlWrp>.frm:before {content: "Question.08";} .acWrp.faqStl>.unt:nth-child(9)>.ttlWrp>.frm:before {content: "Question.09";} .acWrp.faqStl>.unt:nth-child(10)>.ttlWrp>.frm:before {content: "Question.10";} .acWrp.faqStl>.unt:nth-child(11)>.ttlWrp>.frm:before {content: "Question.11";} .acWrp.faqStl>.unt:nth-child(12)>.ttlWrp>.frm:before {content: "Question.12";} .acWrp.faqStl>.unt:nth-child(13)>.ttlWrp>.frm:before {content: "Question.13";} .acWrp.faqStl>.unt:nth-child(14)>.ttlWrp>.frm:before {content: "Question.14";} .acWrp.faqStl>.unt:nth-child(15)>.ttlWrp>.frm:before {content: "Question.15";} .acWrp.faqStl>.unt:nth-child(16)>.ttlWrp>.frm:before {content: "Question.16";} .acWrp.faqStl>.unt:nth-child(17)>.ttlWrp>.frm:before {content: "Question.17";} .acWrp.faqStl>.unt:nth-child(18)>.ttlWrp>.frm:before {content: "Question.18";} .acWrp.faqStl>.unt:nth-child(19)>.ttlWrp>.frm:before {content: "Question.19";} .acWrp.faqStl>.unt:nth-child(1)>.bdyWrp>.frm:before {content: "Answer.01";} .acWrp.faqStl>.unt:nth-child(2)>.bdyWrp>.frm:before {content: "Answer.02";} .acWrp.faqStl>.unt:nth-child(3)>.bdyWrp>.frm:before {content: "Answer.03";} .acWrp.faqStl>.unt:nth-child(4)>.bdyWrp>.frm:before {content: "Answer.04";} .acWrp.faqStl>.unt:nth-child(5)>.bdyWrp>.frm:before {content: "Answer.05";} .acWrp.faqStl>.unt:nth-child(6)>.bdyWrp>.frm:before {content: "Answer.06";} .acWrp.faqStl>.unt:nth-child(7)>.bdyWrp>.frm:before {content: "Answer.07";} .acWrp.faqStl>.unt:nth-child(8)>.bdyWrp>.frm:before {content: "Answer.08";} .acWrp.faqStl>.unt:nth-child(9)>.bdyWrp>.frm:before {content: "Answer.09";} .acWrp.faqStl>.unt:nth-child(10)>.bdyWrp>.frm:before {content: "Answer.10";} .acWrp.faqStl>.unt:nth-child(11)>.bdyWrp>.frm:before {content: "Answer.11";} .acWrp.faqStl>.unt:nth-child(12)>.bdyWrp>.frm:before {content: "Answer.12";} .acWrp.faqStl>.unt:nth-child(13)>.bdyWrp>.frm:before {content: "Answer.13";} .acWrp.faqStl>.unt:nth-child(14)>.bdyWrp>.frm:before {content: "Answer.14";} .acWrp.faqStl>.unt:nth-child(15)>.bdyWrp>.frm:before {content: "Answer.15";} .acWrp.faqStl>.unt:nth-child(16)>.bdyWrp>.frm:before {content: "Answer.16";} .acWrp.faqStl>.unt:nth-child(17)>.bdyWrp>.frm:before {content: "Answer.17";} .acWrp.faqStl>.unt:nth-child(18)>.bdyWrp>.frm:before {content: "Answer.18";} .acWrp.faqStl>.unt:nth-child(19)>.bdyWrp>.frm:before {content: "Answer.19";} .acWrp>.unt>.ttlWrp>.frm>span {display: block;position: absolute;top: 0;bottom: 0;right: 0;margin: auto;width: 40px;height: 40px;} .acWrp>.unt>.ttlWrp>.frm>span:before, .acWrp>.unt>.ttlWrp>.frm>span:after {content: "";display: block;width: 40%;height: 2px;background-color: #000;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;} .acWrp>.unt>.ttlWrp>.frm>span:after {transform: rotate(-90deg);} .acWrp>.unt.on>.ttlWrp>.frm>span:after {transform: rotate(0);} /* 220304 add */ .acWrp>.unt>.bdyWrp>.frm>dl>dt {font-weight: 900;} .acWrp>.unt>.bdyWrp>.frm ul>li {position: relative;padding-left: 2em;} .acWrp>.unt>.bdyWrp>.frm ul>li:nth-child(n+2) {margin-top: .5em;} .acWrp>.unt>.bdyWrp>.frm ul>li:before {content: "・";position: absolute;top: 0;left: 0;} .acWrp>.unt>.bdyWrp>.frm li>ul>li {font-size: .9em;} .acWrp>.unt>.bdyWrp>.frm li>ul>li:nth-child(n+2) {margin-top: 0;} /* 220304 add end */ .prgWrp {} .prgWrp.clm>.unt {float: left;position: relative;} .prgWrp.clm>.unt:nth-child(n+2) {padding-left: 2px;} .prgWrp.clm.set3>.unt {width: 33%;} .prgWrp.clm.set3>.unt:first-child {width: 34%;} .prgWrp.clm.set4>.unt {width: 25%;} .prgWrp.clm>.unt>.frm {background-color: #EEE;padding: 20px 40px;position: relative;} .prgWrp.clm>.unt>.frm:before {display: block;} .prgWrp.clm>.unt:nth-child(1)>.frm:before {content: "STEP.1";} .prgWrp.clm>.unt:nth-child(2)>.frm:before {content: "STEP.2";} .prgWrp.clm>.unt:nth-child(3)>.frm:before {content: "STEP.3";} .prgWrp.clm>.unt:nth-child(4)>.frm:before {content: "STEP.4";} .prgWrp.clm>.unt:nth-child(5)>.frm:before {content: "STEP.5";} .prgWrp.clm>.unt>.frm:after { content: ""; display: block; width: 20px; height: 20px; position: absolute; top: 0; bottom: 0; right: 1px; margin: auto; transform: translateX(50%) rotate(45deg); z-index: 1; background-color: #EEE; box-shadow: 2px -2px 0 0px #fff; } .prgWrp.clm>.unt:last-child>.frm:after {display: none;} .prgWrp.clm>.unt>.frm>span {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block;} .prgWrp.clm>.unt>.frm:before, .prgWrp.clm>.unt>.frm * {font-weight: 900;} .prgWrp.clm>.unt.on>.frm:after, .prgWrp.clm>.unt.on>.frm {background-color: #d80a30;} .prgWrp.clm>.unt.on>.frm:before, .prgWrp.clm>.unt.on>.frm> * {color: #FFF;} .prgWrp.clm>.unt>.dtlWrp {padding: 20px 40px;border: 2px solid rgba(0,0,0,.035);border-top: none;background-color: #FFF;min-height: 142px;} .prgWrp.clm>.unt>.dtlWrp>* {font-size: 12px;} .frmWrp {position: relative;} .frmWrp>.bdgWrp {position: absolute;top: 0;right: 0;} .frmWrp>.bdgWrp>.frm {position: relative;} .frmWrp>.bdgWrp>.frm>.unt {line-height: 20px;padding: 4px 20px;display: block;border: 2px solid;border-radius: 5px;font-weight: 900;float: left;} .frmWrp>.bdgWrp>.frm>.unt:nth-child(n+2) {margin-left: 10px;} .frmWrp>.frm {position: relative;} .frmWrp>.frm>table {} .frmWrp>.frm>table:nth-child(n+2), .tblWrp>table:nth-child(n+2) {margin-top: 60px;} .frmWrp>.frm>table>thead, .tblWrp>table>thead {margin-bottom: 20px;display: block;} .frmWrp>.frm>table>thead>tr>th, .frmWrp>.frm>table>thead>tr>td, .tblWrp>table>thead>tr>th, .tblWrp>table>thead>tr>td {display: block;} .frmWrp>.frm>table>thead>tr>th, .tblWrp>table>thead>tr>th {font-weight: 900;font-size: 18px;line-height: 1.75em;} .frmWrp>.frm>table>thead>tr>td, .tblWrp>table>thead>tr>td {margin-top: 10px;} .frmWrp>.frm>table>tbody, .tblWrp>table>tbody, .appWrp>.frm>ul, .appWrp>.frm>ul {border-top: 1px solid rgba(0,0,0,.15);} .frmWrp>.frm>table>tbody>tr, .tblWrp>table>tbody>tr {display: table;width: 100%;height: auto;border-bottom: 1px solid rgba(0,0,0,.15);} .frmWrp>.frm>table>tbody>tr>th, .frmWrp>.frm>table>tbody>tr>td, .tblWrp>table>tbody>tr>*, .appWrp>.frm>ul>.unt>.frm>.frm>.unt {display: table-cell;padding: 30px 40px;position: relative;} .frmWrp>.frm>table>tbody>tr>th.require:before {content: "必須";background-color: #d80a30;color: #FFF;font-weight: 900;position: absolute;top: 0;bottom: 0;right: 0;margin: auto;text-align: center;font-size: 12px;line-height: 40px;width: 40px;height: 40px;border-radius: 20px;transform: translateX(50%);z-index: 1;letter-spacing: 0;} .frmWrp>.frm>table>tbody>tr>th, .tblWrp>table>tbody>tr>th {width: 30%;background-color: rgba(0,0,0,.075);} .frmWrp>.frm>table.colRed>tbody>tr>th, .tblWrp>table.colRed>tbody>tr>th {background-color: rgba(216,10,48,.075);} .frmWrp>.frm>table.colGreen>tbody>tr>th, .tblWrp>table.colGreen>tbody>tr>th {background-color: rgba(13,204,81,.1);} .frmWrp>.frm>table>tbody>tr>td, .tblWrp>table>tbody>tr>td {width: 70%;background-color: rgba(255,255,255,.5);} .frmWrp>.frm>table>tbody>tr>td>.clm {max-width: 100%;} .frmWrp>.frm>table>tbody>tr>td>.clm>.unt {float: left;} .frmWrp>.frm>table>tbody>tr>td>.clm>.unt, .flx>.unt {position: relative;display: block;} .frmWrp>.frm>table>tbody>tr>td>.clm>.unt:nth-child(n+2) {margin-left: 24px;} .frmWrp>.frm>table>tbody>tr>td>.clm.set2>.unt {width: calc(50% - 12px);} .frmWrp>.frm>table>tbody>tr>td>.clm.set2>.unt:nth-child(odd) {margin-left: 0;} .frmWrp>.frm>table>tbody>tr>td>.clm.set3>.unt {width: calc(33.33% - 16px);} .frmWrp>.frm>table>tbody>tr>td>.clm.set4>.unt {width: calc(25% - 18px);} .frmWrp>.frm>table>tbody>tr>td>.clm.set5>.unt {width: calc(20% - 19.2px);} .frmWrp>.frm>table>tbody>tr>td>.cfm {display: block;word-break: break-all;} .frmWrp>.frm>table>tbody>tr>td>.validation {background-color: #d80a30;color: #FFF;padding: 5px 10px;display: block;margin-top: 5px;font-size: 12px;line-height: 1.75em;font-weight: 900;position: relative;border-radius: 5px;text-align: center;} .frmWrp>.frm>table>tbody.srl, .tblWrp>table>tbody.srl {overflow-y: scroll;height: auto;max-height: 400px;border-bottom: 1px solid rgba(0,0,0,.15);} .frmWrp>.frm>table>tbody.srl>tr:last-child, .tblWrp>table>tbody.srl>tr:last-child {border-bottom: none;} .tblWrp>table>tbody>tr>td>.btn, .frmWrp>form>table>tbody>tr>td>.btn { position: absolute; top: 0; bottom: 0; right: 40px; margin: auto; width: 150px; height: 40px; text-align: center; line-height: 20px; padding: 8px 20px; display: block; border: 2px solid rgba(0,0,0,.1); border-radius: 50px; font-weight: 900; background-color: #FFF; } .frmWrp>form>table>tbody>tr>td>.btn {cursor: pointer;padding-top: 0;padding-bottom: 0;} .tblWrp>table>tbody>tr>td>span {display: block;} .tblWrp>table>tbody>tr>td>.btn+span {padding-right: 190px;} .frmWrp>form>table>tbody>tr>td>.btn+input {width: calc(100% - 190px);} .frmWrp>.frm>table>tbody>tr>td>dl, .tblWrp>table>tbody>tr>td>dl {margin: 1em auto;} .frmWrp>.frm>table>tbody>tr>td>dl:first-child, .tblWrp>table>tbody>tr>td>dl:first-child {margin-top: 0;} .frmWrp>.frm>table>tbody>tr>td>dl:last-child, .tblWrp>table>tbody>tr>td>dl:last-child {margin-bottom: 0;} .frmWrp>.frm>table>tbody>tr>td>dl>dt, .tblWrp>table>tbody>tr>td>dl>dt, .frmWrp>.frm>table>tbody>tr>td>dl>dd, .tblWrp>table>tbody>tr>td>dl>dd {} .frmWrp>.frm>table>tbody>tr>td>dl>dt:nth-child(n+2), .tblWrp>table>tbody>tr>td>dl>dt:nth-child(n+2) {margin-top: 1em;} .frmWrp>.frm>table>tbody>tr>td>dl>dt, .tblWrp>table>tbody>tr>td>dl>dt {/*width: 20%;*/} .frmWrp>.frm>table>tbody>tr>td>dl>dd, .tblWrp>table>tbody>tr>td>dl>dd {/*width: 80%;*/} .frmWrp>.frm>table>tfoot, .tblWrp>table>tfoot {margin-top: 30px;} .frmWrp>.frm>table>tfoot, .tblWrp>table>tfoot, .frmWrp>.frm>table>tfoot>tr, .tblWrp>table>tfoot>tr, .frmWrp>.frm>table>tfoot>tr>*, .tblWrp>table>tfoot>tr>* {width: 100%;display: block;} .frmWrp>.frm>table>tfoot>tr .cmnBtn, .tblWrp>table>tfoot>tr .cmnBtn {padding: 10px;margin: auto;max-width: 60%;} .flx {flex-basis: 100%;display: flex;flex-wrap: wrap;} .flx.set2>.unt {width: 48%;flex-basis: 48%;flex-shrink: 0;margin-right: 4%;} .flx.set2>.unt:nth-child(2n) {margin-right: 0;} .flx.set2>.unt:nth-child(n+3) {margin-top: 30px;} .flx.set3>.unt {width: 31%;flex-basis: 31%;flex-shrink: 0;margin-right: 3.5%;} .flx.set3>.unt:nth-child(3n) {margin-right: 0;} .flx.set3>.unt:nth-child(n+4) {margin-top: 30px;} .flx.set4>.unt {width: 23%;flex-basis: 23%;flex-shrink: 0;margin-right: 2.66%;} .flx.set4>.unt:nth-child(4n) {margin-right: 0;} .flx.set4>.unt:nth-child(n+5) {margin-top: 30px;} .flx.frmOn>.unt {background-color: rgba(0,0,0,.025);} .flx.frmOn>.unt>.frmWrp {padding: 40px 60px;} .flx .frmWrp>.frm>.btnWrp {margin-top: 20px;} .flx .frmWrp>.frm>.btnWrp button {padding: 10px;} .flx.hrz {} .flx.hrz>.unt {} .flx.hrz.set2>.unt:nth-child(n+3) {margin-top: 40px;} .flx.hrz>.unt>.frm {display: table;} .flx.hrz>.unt>.frm>* {display: table-cell;vertical-align: top;} .flx.hrz>.unt>.frm>.imgWrp {width: 30%;} .flx.hrz>.unt>.frm>.imgWrp>img {box-shadow: 0 30px 60px -10px rgba(0,0,0,.1);border-radius: 10px;overflow: hidden;border: 2px solid rgba(0,0,0,.035);} .flx.hrz>.unt>.frm>.dtlWrp {width: 70%;padding-left: 30px;} .flx.hrz>.unt>.frm>.dtlWrp>.ttlWrp {margin-bottom: 10px;} .flx.hrz>.unt>.frm>.dtlWrp>.ttlWrp>.ttl {font-weight: 900;font-size: 16px;} .flx.hrz>.unt>.frm>.dtlWrp>.ttlWrp>.ttl>br {} .flx.hrz>.unt>.frm>.dtlWrp>.txtWrp, .flx.hrz>.unt>.frm>.dtlWrp>ul.att {font-size: 13px;} .flx.hrz>.unt>.frm>.dtlWrp>.txtWrp * {font-size: 1em;} .flx.hrz>.unt>.frm>.dtlWrp>ul.att {margin: .5em 0;} .flx.hrz>.unt>.frm>.dtlWrp>ul.att>li {font-size: .75em;} .frmWrp>.frm>table>tbody>tr input, .frmWrp>.frm>table>tbody>tr select, .frmWrp>.frm>table>tbody>tr textarea, .srcWrp>.frm>form input, .srcWrp>.frm>form select {border: 1px solid rgba(0,0,0,.15);width: 100%;padding: 10px 20px;background-color: #FFF;border-radius: 0;} .frmWrp>.frm>table>tbody>tr input[type="text"], .frmWrp>.frm>table>tbody>tr input[type="file"], .frmWrp>.frm>table>tbody>tr input[type="email"], .frmWrp>.frm>table>tbody>tr select, .srcWrp>.frm>form input[type="text"], .srcWrp>.frm>form input[type="search"], .srcWrp>.frm>form select {height: calc(2.14em + 20px);} .frmWrp>.frm>table>tbody>tr textarea {height: 300px;min-height: 300px;resize: vertical;} input[type="checkbox"] {position: absolute;top: 0;left: 0;z-index: 1;-webkit-appearance: none;appearance: none;width: 100%;height: 100%;cursor: pointer;opacity: 0;} input[type="checkbox"]+label {position: relative;padding-left: 3em;display: block;cursor: pointer;} input[type="checkbox"]+label:before, input[type="checkbox"]+label:after {content: "";display: block;width: 24px;height: 24px;position: absolute;top: 0;bottom: 0;left: 0;margin: auto;background-color: #EEE;border:1px solid rgba(0,0,0,.15);} input[type="checkbox"]+label:after {background-color: #d80a30;transform: scale(.5);opacity: 0;} input:checked[type="checkbox"]+label:after {opacity: 1;} .frmWrp>.frm>table>tbody>tr>td>.clm>.unt input, .frmWrp>.frm>table>tbody>tr>td>.clm>.unt select {width: 100%;} .frmWrp>.frm>table>tbody>tr.vrtWrp {} .frmWrp>.frm>table>tbody>tr.vrtWrp, .frmWrp>.frm>table>tbody>tr.vrtWrp>* {display: block;width: 100%;} .frmWrp>.frm>table>tbody>tr.vrtWrp>th {padding-right: 80px;} .frmWrp>.frm>table>tbody>tr.vrtWrp>th.require:before {transform: translateX(-50%);} .frmWrp>.frm>table>tbody>tr.vrtWrp>td {background-color: rgba(0,0,0,.025);} .frmWrp>.frm>table>tbody>tr>td>.flx {align-items: center;} .frmWrp>.frm>.btnWrp {margin-top: 60px;} .frmWrp>.frm>.btnWrp button {cursor: pointer;} .frmWrp>.frm>.agrWrp {margin: 40px auto;width: 75%;} .frmWrp>.frm>.agrWrp>.cbxWrp {display: table;margin: 20px auto;position: relative;} .hrzWrp {margin: 100px auto;} .hrzWrp>.unt {display: table;} .hrzWrp>.unt:nth-child(n+2) {margin-top: 60px;} .hrzWrp>.unt>* {display: table-cell;vertical-align: middle;} .hrzWrp>.unt>.imgWrp {width: 30%;padding-right: 60px;} .hrzWrp>.unt>.imgWrp>img {box-shadow: 0 30px 60px -10px rgba(0,0,0,.1);border-radius: 20px;overflow: hidden;border: 2px solid rgba(0,0,0,.035);} .hrzWrp>.unt>.txtWrp {width: 70%;} .hrzWrp>.unt>.txtWrp>.ttlWrp {margin-bottom: 20px;} .hrzWrp>.unt>.txtWrp>.ttlWrp>.ttl {font-weight: 900;font-size: 18px;} .hrzWrp>.unt>.txtWrp>.ttlWrp>.tag {background-color: #d80a30;display: inline-block;padding: 5px 20px;border-radius: 50px;margin-bottom: 20px;font-size: 12px;font-weight: 900;color: #FFF;} .hrzWrp>.unt>.txtWrp>.btnWrp {margin-top: 20px;} .hrzWrp>.unt>.txtWrp>.btnWrp>.unt>.cmnBtn {padding: 10px;max-width: 60%;} .hrzWrp.half>.unt>* {width: 50%;} .hrzWrp.half>.unt>.txtWrp+.imgWrp {padding-left: 60px;padding-right: 0;} .hrzWrp.numStl {} .hrzWrp.numStl>.unt {} .hrzWrp.numStl>.unt>.txtWrp>.ttlWrp {position: relative;} .hrzWrp.numStl>.unt>.txtWrp>.ttlWrp:before { position: absolute; top: 0; right: 0; font-size: 100px; font-weight: 900; opacity: .1; line-height: 1em; transform: translateY(-.35em); } .hrzWrp.numStl>.unt:nth-child(1)>.txtWrp>.ttlWrp:before {content: "01";} .hrzWrp.numStl>.unt:nth-child(2)>.txtWrp>.ttlWrp:before {content: "02";} .hrzWrp.numStl>.unt:nth-child(3)>.txtWrp>.ttlWrp:before {content: "03";} .hrzWrp.numStl>.unt:nth-child(4)>.txtWrp>.ttlWrp:before {content: "04";} .hrzWrp.numStl>.unt:nth-child(5)>.txtWrp>.ttlWrp:before {content: "05";} .hrzWrp.numStl>.unt:nth-child(6)>.txtWrp>.ttlWrp:before {content: "06";} .hrzWrp.numStl>.unt:nth-child(7)>.txtWrp>.ttlWrp:before {content: "07";} .hrzWrp.numStl>.unt:nth-child(8)>.txtWrp>.ttlWrp:before {content: "08";} .hrzWrp.numStl>.unt:nth-child(9)>.txtWrp>.ttlWrp:before {content: "09";} .hrzWrp.numStl>.unt>.txtWrp>.ttlWrp>.ttl {font-size: 30px;} .tblWrp {margin: 100px auto} .appWrp {} .appWrp>.frm {} .appWrp>.frm>ul {} .appWrp>.frm>ul {width: 100%;height: auto;display: block;} .appWrp>.frm>ul>.unt {display: block;width: 100%;border-bottom: 1px solid rgba(0,0,0,.15);} .appWrp>.frm>ul>.unt:first-child {background-color: rgba(0,0,0,.075);} .appWrp>.frm>ul>.unt>.frm {overflow: visible;padding-left: 40px;padding-right: 40px;display: block;} .appWrp>.frm>ul>.unt>.frm>.frm {display: table;width: 100%;overflow: visible;position: relative;padding-right: 60px;} .appWrp>.frm>ul>.unt>.frm>.frm>.unt {padding-left: 5px;padding-right: 5px;line-height: 1.75em;vertical-align: middle;width: 17%;text-align: center;} .appWrp>.frm>ul>.unt>.frm>.frm>.dat {width: 11%;} .appWrp>.frm>ul>.unt>.frm>.frm>.stt {width: 17%;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr {width: 55%;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr>.frm {display: block;width: 100%;background-color: #FFF;box-shadow: 0 -10px 20px 0 rgba(0,0,0,.1)inset;border-radius: 40px;padding: 15px 40px;border:2px solid rgba(0,0,0,.035);} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr>.frm>.frm {display: table;width: 100%;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr>.frm>.frm {-webkit-animation: particleAnm 3s linear infinite;animation: particleAnm 3s linear infinite;} @-webkit-keyframes particleAnm {0% {opacity: 1;}70% {opacity: 1;}85% {opacity: 0;}100% {opacity: 1;}} @keyframes particleAnm {0% {opacity: 1;}70% {opacity: 1;}85% {opacity: 0;}100% {opacity: 1;}} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p100>.frm>.frm {-webkit-animation: none;animation: none;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr>.frm>.frm * {color: #d80a30;font-weight: 900;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr>.frm>.frm>.unt {position: relative;display: table-cell;vertical-align: middle;line-height: 1.75em;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr>.frm>.frm>.unt.icon {width: 25%;background-repeat: no-repeat;background-position: 50%;background-size: 100% auto;height: 40px;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr>.frm>.frm>.unt.stt {width: 35%;padding: 0 10px;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p20>.frm>.frm>.unt.icon {background-image: url(../img/support-call-24/pgr-check.svg);} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p30>.frm>.frm>.unt.icon {background-image: url(../img/support-call-24/pgr-check.svg);} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p40>.frm>.frm>.unt.icon {background-image: url(../img/support-call-24/pgr-good.svg);} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p60>.frm>.frm>.unt.icon {background-image: url(../img/support-call-24/pgr-good.svg);} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p80>.frm>.frm>.unt.icon {background-image: url(../img/support-call-24/pgr-good.svg);} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p100>.frm>.frm>.unt.icon {background-image: url(../img/support-call-24/pgr-ok.svg);} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr>.frm>.frm>.unt.rate {width: 40%;padding-left: 4em;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr>.frm>.frm>.unt.rate>.frm {display: block;width: 100%;height: 16px;position: relative;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr>.frm>.frm>.unt.rate>.frm:before, .appWrp>.frm>ul>.unt>.frm>.frm>.pgr>.frm>.frm>.unt.rate>.frm>.bar:before, .appWrp>.frm>ul>.unt>.frm>.frm>.pgr>.frm>.frm>.unt.rate>.frm>.bar:after {content: "";display: block;position: absolute;top: 0;left: 0;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr>.frm>.frm>.unt.rate>.frm:before {bottom: 0;left: -1em;margin: auto;height: 20px;line-height: 20px;transform: translateX(-100%);width: 4em;text-align: right;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p20>.frm>.frm>.unt.rate>.frm:before {content: "20%";} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p30>.frm>.frm>.unt.rate>.frm:before {content: "30%";} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p40>.frm>.frm>.unt.rate>.frm:before {content: "40%";} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p40>.frm>.frm * {color: #0dcc51;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p60>.frm>.frm>.unt.rate>.frm:before {content: "60%";} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p60>.frm>.frm * {color: #0dcc51;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p80>.frm>.frm>.unt.rate>.frm:before {content: "80%";} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p80>.frm>.frm * {color: #0dcc51;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p100>.frm>.frm>.unt.rate>.frm:before {content: "100%";} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p100>.frm>.frm * {color: #50b6ff;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr>.frm>.frm>.unt.rate>.frm>.bar {width: 100%;height: 100%;border-radius: 10px;background-color: #EEE;display: block;position: absolute;top: 0;bottom: 0;left: 0;margin: auto;box-shadow: -8px 8px 10px -5px rgba(0,0,0,.1)inset} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr>.frm>.frm>.unt.rate>.frm>.bar:before, .appWrp>.frm>ul>.unt>.frm>.frm>.pgr>.frm>.frm>.unt.rate>.frm>.bar:after {height: 100%;border-radius: 10px;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr>.frm>.frm>.unt.rate>.frm>.bar:before {background-color: #d80a30;box-shadow: 0 -5px 0 0 rgba(0,0,0,.1)inset;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr>.frm>.frm>.unt.rate>.frm>.bar:after {background-image: url(../img/common/bg-slant.svg);background-position: 0 0;background-repeat: repeat;background-size: 5px 5px;opacity: .75;-webkit-animation: bgSlantAnm .1s linear infinite;animation: bgSlantAnm .1s linear infinite;} @-webkit-keyframes bgSlantAnm {0% {background-position: 0 0;}100% {background-position: 5px 0;}} @keyframes bgSlantAnm {0% {background-position: 0 0;}100% {background-position: 5px 0;}} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p20>.frm>.frm>.unt.rate>.frm>.bar:before, .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p20>.frm>.frm>.unt.rate>.frm>.bar:after {width: 20%;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p30>.frm>.frm>.unt.rate>.frm>.bar:before, .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p30>.frm>.frm>.unt.rate>.frm>.bar:after {width: 30%;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p40>.frm>.frm>.unt.rate>.frm>.bar:before, .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p40>.frm>.frm>.unt.rate>.frm>.bar:after {width: 40%;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p40>.frm>.frm>.unt.rate>.frm>.bar:before {background-color: #0dcc51;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p60>.frm>.frm>.unt.rate>.frm>.bar:before, .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p60>.frm>.frm>.unt.rate>.frm>.bar:after {width: 60%;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p60>.frm>.frm>.unt.rate>.frm>.bar:before {background-color: #0dcc51;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p80>.frm>.frm>.unt.rate>.frm>.bar:before, .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p80>.frm>.frm>.unt.rate>.frm>.bar:after {width: 80%;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p80>.frm>.frm>.unt.rate>.frm>.bar:before {background-color: #0dcc51;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p100>.frm>.frm>.unt.rate>.frm>.bar:before, .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p100>.frm>.frm>.unt.rate>.frm>.bar:after {width: 100%;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p100>.frm>.frm>.unt.rate>.frm>.bar:after {-webkit-animation: none;animation: none;opacity: .25;} .appWrp>.frm>ul>.unt>.frm>.frm>.pgr.p100>.frm>.frm>.unt.rate>.frm>.bar:before {background-color: #50b6ff;} .appWrp.setA>.frm>ul {} .appWrp.setA>.frm>ul>.unt>.frm>.frm>.unt {width: 17%;} .appWrp.setA>.frm>ul>.unt>.frm>.frm>.typ {width: 17%;} .appWrp.setA>.frm>ul>.unt>.frm>.frm>.dat {width: 13%;} .appWrp.setA>.frm>ul>.unt>.frm>.frm>.ctt {width: 53%;} .appWrp.setA>.frm>ul>.unt>.frm>.frm>.typ+.dat+.ctt {width: 36%;} .appWrp.setA>.frm>ul>.unt:nth-child(n+2)>.frm>.frm>.ctt {text-align: left;font-size: .9em;} .appWrp.setA>.frm>ul>.unt>.frm>.frm>.stt {width: 17%;} .srcWrp {margin: 20px auto;} .srcWrp>.frm {} .srcWrp>.frm>form {width: 100%;} .srcWrp>.frm>form>.unt {float: left;width: 25%;} .srcWrp>.frm>form>.unt:nth-child(n+2) {margin-left: 20px;} .srcWrp>.frm>form input, .srcWrp>.frm>form select {} .srcWrp>.frm>form .srcBtn {width: 100px;border-radius: 100px; overflow: hidden;} .srcWrp>.frm>form .srcBtn>input {background-color: #EEE;font-weight: 900;cursor: pointer;border-radius: 100px;} .pagWrp {margin: 40px auto;} .pagWrp>.frm {display: table;margin: auto;} .pagWrp>.frm>ul {display: block;} .pagWrp>.frm>ul>li {float: left;width: 50px;height: 50px;display: block;} .pagWrp>.frm>ul>li:nth-child(n+2) {margin-left: 4px;} .pagWrp>.frm>ul>li * {text-align: center;font-weight: 900;} .pagWrp>.frm>ul>li>a, .pagWrp>.frm>ul>li>span {display: block;width: 100%;height: 100%;line-height: 20px;padding: 15px 0;border-radius: 50%;overflow: hidden;background-color: #FFF;} .pagWrp>.frm>ul>li>a {background-color: #EEE;} .pagWrp>.frm>ul>li.current>* {background-color: #d80a30;color: #FFF;} #cttWrp>.msgWrp { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 1000; } #cttWrp>.msgWrp>span { display: block; position: absolute; top: 0; left: 0; background-color: #000; width: 100%; height: 100%; opacity: .25; } #cttWrp>.msgWrp>.frm { position: absolute; width: 1100px; height: auto; top: 50%; left: 0; right: 0; margin: auto; transform: translateY(-50%); background-color: #FFF; border: 2px solid; border-radius: 20px; padding: 20px 30px; } #cttWrp>.msgWrp>.frm>p {text-align: center;} #cttWrp>.msgWrp>.frm>.clsBtn { line-height: 20px; padding: 8px 20px; display: block; border: 2px solid; border-radius: 50px; font-weight: 900; text-align: center; margin: auto; width: 25%; cursor: pointer; } .trmWrp {width: 100%;height: auto;} .trmWrp.scr {height: 300px;overflow-y: auto;padding: 30px 40px;border: 1px solid rgba(0,0,0,.25);background-color: #FFF;} .trmWrp.scr * {font-size: 12px;} .trmWrp .ttl, .trmWrp>dl>dt, .trmWrp>dl>dd>dl>dt {font-weight: 900;} .trmWrp>.ttl {font-size: 14px;margin-bottom: 1.5em;} /*.trmWrp>.ttlWrp {margin-bottom: 30px;}*/ /*.trmWrp>.ttlWrp>.ttl {font-size: 18px;}*/ .trmWrp>dl {} .trmWrp>dl>dt:nth-child(n+2), .trmWrp>dl>dd>dl>dt:nth-child(n+2) {margin-top: 2.5em;} .trmWrp.scr>dl>dt:nth-child(n+2), .trmWrp.scr>dl>dd>dl>dt:nth-child(n+2) {margin-top: 1.5em;} .trmWrp>dl dd>ul>li {padding-left: 2em;position: relative;} .trmWrp>dl dd>ul>li:before {content: "・";display: block;position: absolute;top: 0;left: 0;} .trmWrp>dl>dd>dl {padding-left: 2em;} .trmWrp p {margin: .5em 0;} /* language_support */ .lupWrp {border-radius: 20px;box-shadow: 0 30px 60px -10px rgba(0,0,0,.1), 0 0 0 2px rgba(0,0,0,.035) inset;padding: 40px 0 0;background-color: #FFF;position: relative;} .lupWrp>.frm {position: relative;overflow: hidden;} .lupWrp>.frm>.unt {padding-bottom: 200px;} .lupWrp>.frm.flx.set4>.unt {width: 25%;flex-basis: 25%;margin-right: 0;} .lupWrp>.frm>.unt:nth-child(n+2):before {content: "";width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;box-shadow: -60px 200px 60px -60px rgba(0,0,0,.15);} .lupWrp>.frm>.unt>.frm {position: relative;padding: 0 40px;} .lupWrp>.frm>.unt:after { display: block; color: #FFF; background-color: #0dcc51; font-size: 16px; letter-spacing: 0; font-weight: 900; position: absolute; top: 0; left: 0; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl; line-height: 38px; border-radius: 10px 0 0 10px; padding: 20px 0; border: 2px solid rgba(0,0,0,.035); border-right: none; } .lupWrp>.frm>.unt:nth-child(1):after {content: "SUPPORT.01";} .lupWrp>.frm>.unt:nth-child(2):after {content: "SUPPORT.02";} .lupWrp>.frm>.unt:nth-child(3):after {content: "SUPPORT.03";} .lupWrp>.frm>.unt:nth-child(4):after {content: "SUPPORT.04";} .lupWrp>.frm>.unt>.frm>.imgWrp {box-shadow: 0 30px 60px -10px rgba(0,0,0,.1);border-radius: 0 20px 20px 20px;overflow: hidden;border: 2px solid rgba(0,0,0,.035);} .lupWrp>.frm>.unt>.frm>.ttlWrp {margin: 20px auto 15px;display: table;height: 62px;} .lupWrp>.frm>.unt>.frm>.ttlWrp>.ttl {font-size: 18px;font-weight: 900;text-align: center;display: table-cell;vertical-align: middle;} .lupWrp>.frm>.unt>.frm>.dtlWrp {} .lupWrp>.frm>.unt>.frm>.dtlWrp>p {} .lupWrp>.frm>.rngWrp { width: 100%; height: auto; position: absolute; bottom: 50px; left: 0; } .lupWrp>.frm>.rngWrp>.unt { width: 100%; height: auto; padding: 0 10px; padding: 0 30px 0; } .lupWrp>.frm>.rngWrp>.unt:nth-child(1) {width: 50%;} .lupWrp>.frm>.rngWrp>.unt:nth-child(2) {width: 75%;} .lupWrp>.frm>.rngWrp>.unt:nth-child(3) { width: 25%; margin-left: auto; margin: auto !important; top: 0; bottom: 0; right: 0; position: absolute; display: block; } .lupWrp>.frm>.rngWrp>.unt:nth-child(n+2) {margin-top: 10px;} .lupWrp>.frm>.rngWrp>.unt>.frm, .lupWrp>.frm>.rngWrp>.unt>.frm>span {color: #0dcc51;font-weight: 900;} .lupWrp>.frm>.rngWrp>.unt>.frm {background-color: #FFF;border-radius: 50px;text-align: center;box-shadow: 0 0 0 2px #0dcc51 inset;padding: 10px;line-height: 20px;} .lupWrp>.frm>.rngWrp>.unt:nth-child(3)>.frm {padding-top: 35px;padding-bottom: 35px;} .lupWrp>.frm>.rngWrp>.unt>.frm>span {font-size: .5em;} .rsrWrp {margin-top: 60px;} .rsrWrp:first-child {margin-top: 0;} .plnWrp>.unt {border-radius: 20px;box-shadow: 0 30px 60px -10px rgba(0,0,0,.1), 0 0 0 2px rgba(0,0,0,.035) inset;} .plnWrp>.unt:nth-child(2n) {margin-right: 0;} .plnWrp>.unt:nth-child(n+3) {margin-top: 30px;} .plnWrp>.unt.underContract {background-color: #EEE;} .plnWrp>.unt.underContract .cmnBtn {pointer-events: none;background-color: #777;} .plnWrp>.unt.noContract {background-color: #e7faee;} .plnWrp>.unt * {text-align: center;} .plnWrp>.unt>.frm {padding: 40px 60px 160px 60px;} .plnWrp>.unt>.frm>.ttlWrp>.ttl {font-size: 30px;font-weight: 900;} .plnWrp>.unt>.frm>.feeWrp {} .plnWrp>.unt>.frm>.feeWrp>.unt {margin: 10px auto 20px;} .plnWrp>.unt>.frm>.feeWrp>.unt>.frm {font-size: 40px;line-height: 1.75em;font-weight: 900;} .plnWrp>.unt>.frm>.feeWrp>.unt>.frm>span {font-size: .5em;} .plnWrp>.unt>.frm>.feeWrp>.unt>.frm>.crc {font-size: .75em;margin-right: .25em;} .plnWrp>.unt>.frm>ul {padding: 0 0 0 80px;} .plnWrp>.unt>.frm>ul>li {font-weight: 900;text-align: left;font-size: 16px;} .plnWrp>.unt>.frm>ul>li:nth-child(n+2) {margin-top: .5em;} .plnWrp>.unt>.frm>ul>li>i {transform: scale(1.5);margin-right: 10px;} .plnWrp>.unt .btnWrp {position: absolute;bottom: 0;left: 0;right: 0;width: 350px;margin: auto;transform: translateY(-100%);} .plnWrp>.unt .cmnBtn {padding: 10px;} .rsrWrp {} .rsrWrp>ul {} .rsrWrp>ul>.unt {display: table;width: 100%;} .rsrWrp>ul>.unt:nth-child(n+2) {margin-top: 20px;padding-top: 20px;border-top: 1px solid rgba(0,0,0,.15);} .rsrWrp>ul>.unt>.frm, .rsrWrp>ul>.unt>.btnWrp {display: table-cell;vertical-align: middle;} .rsrWrp>ul>.unt>.frm {width: 80%;} .rsrWrp>ul>.unt>.frm>.unt {background-color: #FFF;padding: 10px 20px;word-break: break-all;line-height: 1.75em;} .rsrWrp>ul>.unt>.frm>.unt:nth-child(n+2) {margin-top: 2px;} .rsrWrp>ul>.unt>.btnWrp {width: 20%;} .rsrWrp>ul>.unt>.btnWrp>.unt {} .rsrWrp>ul>.unt>.btnWrp>.unt>button {background-color: background-color: #EEE;margin: auto;display: block;width: 80%;cursor: pointer;border:1px solid rgba(0,0,0,.15);border-radius: 5px;} /* language_support end */ /* agreement */ .pnlA {} .pnlA>.unt {box-shadow: 0 30px 60px -10px rgba(0,0,0,.1), 0 0 0 2px rgba(0,0,0,.035)inset;border-radius: 40px;overflow: hidden;background-color: #FFF;} .pnlA>.unt>.frm {padding: 30px 30px 50px;} .pnlA>.unt>.frm>.imgWrp {box-shadow: 0 30px 60px -10px rgba(0,0,0,.1);border-radius: 20px;overflow: hidden;border: 2px solid rgba(0,0,0,.035);} .pnlA>.unt>.frm>.ttlWrp {margin: 30px auto 25px;} .pnlA>.unt>.frm>.ttlWrp>.ttl {font-weight: 900;text-align: center;font-size: 22px;} .pnlA>.unt>.frm>.dtlWrp {} .pnlA.trouble>.unt {box-shadow: none;border-radius: 0;overflow: visible;background-color: transparent;} .pnlA.trouble>.unt>.frm {box-shadow: 0 30px 60px -10px rgba(0,0,0,.1), 0 0 0 2px rgba(0,0,0,.035)inset;border-radius: 40px;background-color: #FFF;margin-top: 30px;position: relative;} .pnlA.trouble>.unt>.frm>.imgWrp.icon {border-radius: 50% !important;width: 60px;height: 60px;position: absolute;top: 0;left: 0;right: 0;margin: auto;transform: translateY(-50%);box-shadow: 0 20px 40px -10px rgb(0 0 0 / 15%);border: 2px solid rgba(0,0,0,.035);} .pnlA.trouble>.unt>.frm>.ttlWrp {margin: 15px auto 5px;} .pnlA.trouble>.unt.trouble-key>.frm>.ttlWrp>.ttl {color: #ed8888;} .pnlA.trouble>.unt.trouble-gas>.frm>.ttlWrp>.ttl {color: #e2c31f;} .pnlA.trouble>.unt.trouble-ele>.frm>.ttlWrp>.ttl {color: #94c166;} .pnlA.trouble>.unt.trouble-wat>.frm>.ttlWrp>.ttl {color: #37a3e8;} .pnlA.trouble>.unt.trouble-fac>.frm>.ttlWrp>.ttl {color: #f9c589;} .pnlA.trouble>.unt.trouble-toi>.frm>.ttlWrp>.ttl {color: #83a2a8;} .pnlA.trouble>.unt>.frm>.imgWrp {box-shadow: none;border-radius: 0;border: none;} .fkdWrp {background-color: rgba(216,10,48,.075);margin: 100px auto 100px;border-radius: 40px;width: 75%;border: 2px solid rgba(0,0,0,.035);} .fkdWrp>.frm {padding: 30px 40px;position: relative;} .fkdWrp>.frm>.ttlWrp {font-size: 22px;margin-bottom: 20px;padding-top: 100px;margin-top: -100px;position: relative;} .fkdWrp>.frm>.ttlWrp>.ttl {font-size: 1em;text-align: center;} .fkdWrp>.frm>.dtlWrp {} .fkdWrp>.frm>.dtlWrp>p {text-align: center;} .fkdWrp>.frm>.dtlWrp>.cmnBtn {width: 75%;margin: auto;padding: 10px;margin-top: 30px;} .pwdWrp {border: 2px solid rgba(0,0,0,.035);background-color: rgba(0,0,0,.025);width: 60%;margin: auto;} .pwdWrp>.frm {padding: 60px 80px;} .pwdWrp>.frm>.ttlWrp {margin-bottom: 20px;} .pwdWrp>.frm>.ttlWrp>.ttl {font-weight: 900;font-size: 18px;} .pwdWrp>.frm>.dtlWrp {} .pwdWrp>.frm>.dtlWrp>.frm>p {} .pwdWrp>.frm>.dtlWrp>.frm>table {margin: 40px auto;} .pwdWrp>.frm>.dtlWrp>.frm>table>tbody {} .pwdWrp>.frm>.dtlWrp>.frm>table>tbody>tr, .pwdWrp>.frm>.dtlWrp>.frm>table>tbody>tr>th, .pwdWrp>.frm>.dtlWrp>.frm>table>tbody>tr>td {display: block;width: 100%;} .pwdWrp>.frm>.dtlWrp>.frm>table>tbody>tr {} .pwdWrp>.frm>.dtlWrp>.frm>table>tbody>tr:nth-child(n+2) {margin-top: 20px;} .pwdWrp>.frm>.dtlWrp>.frm>table>tbody>tr>th {} .pwdWrp>.frm>.dtlWrp>.frm>table>tbody>tr>td {} .pwdWrp>.frm>.dtlWrp>.frm>table>tbody>tr>td input {width: 100%;border: 1px solid rgba(0,0,0,.15);width: 100%;padding: 10px 20px;background-color: #FFF;border-radius: 0;height: calc(2.14em + 20px);} .pwdWrp>.frm>.dtlWrp>.frm>table>tbody>tr>td>.frm {position: relative;} .pwdWrp>.frm>.dtlWrp>.frm>table>tbody>tr>td>.frm>.icn {display: block;width: 50px;height: 100%;position: absolute;top: 0;bottom: 0;right: 0;margin: auto;cursor: pointer;} .pwdWrp>.frm>.dtlWrp>.frm>table>tbody>tr>td>.frm>.icn:before {content: "";width: 24px;height: 2px;display: block;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;background-color: #000;transform: rotate(-45deg);opacity: 1;} .pwdWrp>.frm>.dtlWrp>.frm>table>tbody>tr>td>.frm>.icn.on:before {opacity: 0;} .pwdWrp>.frm>.dtlWrp>.frm>table>tbody>tr>td>.frm>.icn>i {text-align: center;display: block;height: 1em;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;} .pwdWrp>.frm>.dtlWrp>.frm>table>tbody>tr>td>.frm>.icn+input {padding-right: 50px;} .pwdWrp>.frm>.dtlWrp .btnWrp {margin-top: 30px;} .pwdWrp>.frm>.dtlWrp .btnWrp>.unt>.cmnBtn {padding: 10px;cursor: pointer;} .pwdWrp>.frm>.dtlWrp>.frm>.btnWrp>.unt>.frm {margin-top: 20px;text-align: center;} .pwdWrp>.frm>.dtlWrp>.frm>.btnWrp>.unt>.frm>a {text-align: center;display: inline-block;} /* agreement end */ /* myoage */ #cttWrp>.ctt>#mpgAtf {padding-top: 0 !important;} #mpgAtf * {-webkit-backface-visibility: hidden;backface-visibility: hidden;} #mpgAtf>.frm {height: 750px;position: relative;} #mpgAtf>.frm>.deco {display: block;width: 150%;height: 100%;transform: translate(-16.5%,-30%);} #mpgAtf>.frm>.deco:before, #mpgAtf>.frm>.deco:after {content: "";display: block;position: absolute;top: 0;left: 0;right: 0;margin: auto;border-radius: 50%;background-color: rgba(0,124,191,.1);width: 100%;height: 100%;opacity: 0;} #mpgAtf>.frm>.deco:after {transform: translateY(-25%);} #mpgAtf>.frm>.ttlWrp {position: absolute;top: 150px;left: 0;right: 0;margin: auto;z-index: 1;width: 600px;height: auto;} #mpgAtf>.frm>.ttlWrp>.ttl {} #mpgAtf>.frm>.ttlWrp>.ttl>img {display: block;width: 100%;height: auto;} #mpgAtf>.frm>.ttlWrp>.sub {text-align: center;background-color: #d80a30;border-radius: 50px;color: #FFF;font-weight: 900;padding: 5px 10px;font-size: 16px;margin-left: auto;margin-right: auto;width: 70%;} #mpgAtf>.frm>.imgWrp {position: absolute;bottom: 50px;left: 0;right: 0;margin: auto;width: 100%;height: auto;max-width: 2000px;} #mpgAtf>.frm>.imgWrp>img {width: 50%;position: absolute;bottom: 0;} #mpgAtf>.frm>.imgWrp>img:nth-child(1) {left: 0;} #mpgAtf>.frm>.imgWrp>img:nth-child(2) {right: 0;} #mpgAtf>.frm>.dtlWrp {position: absolute;bottom: 0;left: 0;right: 0;} #mpgAtf>.frm>.dtlWrp>.imgWrp {width: 600px;height: auto;position: absolute;bottom: 50px;left: 0;right: 0;margin: auto;overflow: hidden;} #mpgAtf>.frm>.dtlWrp>.imgWrp>img {transform: translateY(100%);} #mpgAtf>.frm>.dtlWrp>.txtWrp, #mpgAtf>.frm>.dtlWrp>.txtWrp * {color: #0dcc51;} #mpgAtf>.frm>.dtlWrp>.txtWrp {border: 3px solid;background-color: #FFF;border-radius: 50px;width: auto;margin: auto;position: relative;padding: 20px 80px;font-size: 24px;font-weight: 900;display: table;} #mpgAtf>.frm>.dtlWrp>.txtWrp>p {font-size: 1em;line-height: 1.75em;text-align: center;} #mpgAtf>.inr {} #mpgAtf>.inr>.bdyWrp {} #mpgAtf>.inr>.bdyWrp>.tblFkdWrp {padding: 40px 0;} #mpgAtf>.inr>.bdyWrp>.tblFkdWrp>.unt {width: 45%;margin: auto;position: relative;opacity: 0;transform: translateX(0);} #mpgAtf>.inr>.bdyWrp>.tblFkdWrp>.unt:nth-child(n+2) {margin-top: 20px;} #mpgAtf.lodCmp>.inr>.bdyWrp>.tblFkdWrp>.unt, #mpgAtf>.inr>.bdyWrp>.tblFkdWrp.on>.unt {opacity: 1;} #mpgAtf.lodCmp>.inr>.bdyWrp>.tblFkdWrp>.unt:nth-child(odd), #mpgAtf>.inr>.bdyWrp>.tblFkdWrp.on>.unt:nth-child(odd) {transform: translateX(20px);} #mpgAtf.lodCmp>.inr>.bdyWrp>.tblFkdWrp>.unt:nth-child(even), #mpgAtf>.inr>.bdyWrp>.tblFkdWrp.on>.unt:nth-child(even) {transform: translateX(-20px);} #mpgAtf.lodCmp>.inr>.bdyWrp>.tblFkdWrp>.unt:nth-child(1), #mpgAtf>.inr>.bdyWrp>.tblFkdWrp.on>.unt:nth-child(1) {transition-delay: 0s;} #mpgAtf.lodCmp>.inr>.bdyWrp>.tblFkdWrp>.unt:nth-child(2), #mpgAtf>.inr>.bdyWrp>.tblFkdWrp.on>.unt:nth-child(2) {transition-delay: .2s;} #mpgAtf.lodCmp>.inr>.bdyWrp>.tblFkdWrp>.unt:nth-child(3), #mpgAtf>.inr>.bdyWrp>.tblFkdWrp.on>.unt:nth-child(3) {transition-delay: .4s;} #mpgAtf.lodCmp>.inr>.bdyWrp>.tblFkdWrp>.unt:nth-child(4), #mpgAtf>.inr>.bdyWrp>.tblFkdWrp.on>.unt:nth-child(4) {transition-delay: .6s;} #mpgAtf.lodCmp>.inr>.bdyWrp>.tblFkdWrp>.unt:nth-child(5), #mpgAtf>.inr>.bdyWrp>.tblFkdWrp.on>.unt:nth-child(5) {transition-delay: .8s;} #mpgAtf.lodCmp>.inr>.bdyWrp>.tblFkdWrp>.unt:nth-child(6), #mpgAtf>.inr>.bdyWrp>.tblFkdWrp.on>.unt:nth-child(6) {transition-delay: 1.0s;} #mpgAtf.lodCmp>.inr>.bdyWrp>.tblFkdWrp>.unt:nth-child(7), #mpgAtf>.inr>.bdyWrp>.tblFkdWrp.on>.unt:nth-child(7) {transition-delay: 1.2s;} #mpgAtf.lodCmp>.inr>.bdyWrp>.tblFkdWrp>.unt:nth-child(8), #mpgAtf>.inr>.bdyWrp>.tblFkdWrp.on>.unt:nth-child(8) {transition-delay: 1.4s;} #mpgAtf.lodCmp>.inr>.bdyWrp>.tblFkdWrp>.unt:nth-child(9), #mpgAtf>.inr>.bdyWrp>.tblFkdWrp.on>.unt:nth-child(9) {transition-delay: 1.6s;} #mpgAtf>.inr>.bdyWrp>.tblFkdWrp>.unt:before, #mpgAtf>.inr>.bdyWrp>.tblFkdWrp>.unt:after {content: "";width: 40px;height: 40px;position: absolute;bottom: 0;border: 20px solid #0dcc51;border-top-color: transparent !important;border-left-color: transparent !important;z-index: 11111111111111;} #mpgAtf>.inr>.bdyWrp>.tblFkdWrp>.unt:after {border-color: rgba(0,0,0,.1);} #mpgAtf>.inr>.bdyWrp>.tblFkdWrp>.unt:nth-child(odd):before, #mpgAtf>.inr>.bdyWrp>.tblFkdWrp>.unt:nth-child(odd):after {right: 0;transform: rotateY(45deg)rotateX(45deg)rotateZ(45deg)translate(-50%,150%);} #mpgAtf>.inr>.bdyWrp>.tblFkdWrp>.unt:nth-child(even):before, #mpgAtf>.inr>.bdyWrp>.tblFkdWrp>.unt:nth-child(even):after {left: 0;transform: rotateY(-45deg)rotateX(45deg)rotateZ(45deg)translate(150%,-50%);} #mpgAtf>.inr>.bdyWrp>.tblFkdWrp>.unt * {text-align: center;color: #FFF;font-weight: 900;font-size: 20px;} #mpgAtf>.inr>.bdyWrp>.tblFkdWrp>.unt>.frm {background-color: #0dcc51;box-shadow: 0 -15px 0 0 rgba(0,0,0,.05)inset,0 20px 20px -10px rgba(0,0,0,.1);border: 2px solid rgba(0,0,0,.1);border-radius: 50px;position: relative;padding: 5px 20px;z-index: 1;} #mpgAtf>.inr>.bdyWrp>.cttWrp {border: 3px solid #d80a30;padding: 50px 40px 30px;width: 75%;margin: auto;position: relative;background-color: #FFF;margin-top: 24px;} #mpgAtf>.inr>.bdyWrp>.cttWrp * {text-align: center;} #mpgAtf>.inr>.bdyWrp>.cttWrp>.ttl {position: absolute;top: 0;left: 0;right: 0;margin: auto;width: 60%;transform: translateY(-50%);background-color: #FFF;border: 3px solid;border-radius: 0;padding: 10px 20px;color: #d80a30;font-weight: 900;font-size: 18px;} #mpgAtf>.inr>.bdyWrp>.cttWrp>.ttlWrp {} #mpgAtf>.inr>.bdyWrp>.cttWrp>.ttlWrp>.sub {font-weight: 900;font-size: 18px;} #mpgAtf>.inr>.bdyWrp>.cttWrp>.btnWrp {margin: 10px auto;} #mpgAtf>.inr>.bdyWrp>.cttWrp>.btnWrp>.telBtn {color: #d80a30;font-weight: 900;font-size: 50px;display: block;line-height: 1.25em;letter-spacing: 0;} #mpgAtf>.inr>.bdyWrp>.cttWrp>aside {display: table;margin: auto;} #mpgAtf>.inr>.bdyWrp>.cttWrp>aside * {font-size: 12px;} #mpgAtf>.inr>.bdyWrp>.cttWrp>aside>ul {} #mpgAtf>.inr>.bdyWrp>.cttWrp>aside>ul>li {float: left;line-height: 1.75em;} #mpgAtf>.inr>.bdyWrp>.cttWrp>aside>ul>li>span {font-size: .75em;} #mpgAtf>.inr>.bdyWrp>.cttWrp>aside>ul>li:nth-child(n+2):before {content: "/";padding: 0 10px;} #mpgAtf.lodCmp>.frm>.dtlWrp>.imgWrp>img {transform: translateY(0);-webkit-animation: mpgAtfImg 1s cubic-bezier(.5, 0, 0, 1);animation: mpgAtfImg 1s cubic-bezier(.5, 0, 0, 1);} @-webkit-keyframes mpgAtfImg {0% {transform: translateY(100%);}100% {transform: translateY(0);}} @keyframes mpgAtfImg {0% {transform: translateY(100%);}100% {transform: translateY(0);}} #mpgAtf.lodCmp>.frm>.deco:before, #mpgAtf.lodCmp>.frm>.deco:after {opacity: 1;} #mpgAtf.lodCmp>.frm>.deco:before {-webkit-animation: mpgAtfBgL 2s cubic-bezier(.5, 0, 0, 1);animation: mpgAtfBgL 2s cubic-bezier(.5, 0, 0, 1);} @-webkit-keyframes mpgAtfBgL {0% {opacity: 0;top: -50%;}100% {opacity: 1;top: 0;}} @keyframes mpgAtfBgL {0% {opacity: 0;top: -50%;}100% {opacity: 1;top: 0;}} #mpgAtf.lodCmp>.frm>.deco:after {-webkit-animation: mpgAtfBgR 2s cubic-bezier(.5, 0, 0, 1);animation: mpgAtfBgR 2s cubic-bezier(.5, 0, 0, 1);} @-webkit-keyframes mpgAtfBgR {0% {opacity: 0;top: -50%;}25% {opacity: 0;top: -50%;}100% {opacity: 1;top: 0;}} @keyframes mpgAtfBgR {0% {opacity: 0;top: -50%;}25% {opacity: 0;top: -50%;}100% {opacity: 1;top: 0;}} .etrWrp {} .etrWrp>.unt {} .etrWrp>.unt>.imgWrp {position: relative;} .etrWrp>.unt:nth-child(n+2)>.imgWrp:before, .etrWrp>.unt:nth-child(n+2)>.imgWrp:after { content: ""; display: block; width: 88px; height: 88px; position: absolute; z-index: 2; top: 0; left: 0; margin: auto; transform: translateX(-75%); } .etrWrp>.unt:nth-child(n+2)>.imgWrp:before {background-color: #777;border-radius: 50%;border: 2px solid rgba(0,0,0,.1);} .etrWrp>.unt:nth-child(n+2)>.imgWrp:after {transform: rotateX(55deg)rotateZ(45deg)scale(.65)translate(-100%,100%);border: 44px solid #FFF;border-bottom-color: transparent;border-left-color: transparent;} .etrWrp>.unt>.imgWrp>.frm {box-shadow: 0 30px 60px -10px rgba(0,0,0,.1);border-radius: 20px;overflow: hidden;border: 2px solid rgba(0,0,0,.035);position: relative;padding: 60px 0 0;background-color: #FFF;} .etrWrp>.unt>.imgWrp>.frm>.ttlWrp {background-color: #d80a30;width: 50%;height: auto;margin: auto;border-radius: 50px;border: 2px solid rgba(0,0,0,.1);position: absolute; left: 0;right: 0;top: 30px;} .etrWrp>.unt:nth-child(2)>.imgWrp>.frm>.ttlWrp {background-color: #0dcc51;} .etrWrp>.unt>.imgWrp>.frm>.ttlWrp>.ttl {color: #FFF;font-weight: 900;font-size: 20px;text-align: center;} .etrWrp>.unt>.imgWrp>.frm>img {display: block;width: 100%;height: auto;} .etrWrp>.unt>.imgWrp>aside {font-size: 12px;margin-top: 10px;} .etrWrp>.unt>.dtlWrp {margin-top: 30px;} .acWrp.oprStl { border-top: none; background-image: url(../img/mypage/img-operator-intro.png); background-repeat: no-repeat; background-position: 50% 0; padding-top: 400px; background-size: 100% auto; margin-top: -120px; } .acWrp.oprStl>.unt {border-bottom: none;} .acWrp.oprStl>.unt:nth-child(n+2) {margin-top: 60px;} .acWrp.oprStl>.unt>.ttlWrp, .acWrp.oprStl>.unt>.bdyWrp {} .acWrp.oprStl>.unt>.ttlWrp {background-color: rgba(13,204,81,.2);z-index: 2;box-shadow: 0 30px 60px -10px rgba(0,0,0,.1), 0 0 0 2px rgba(0,0,0,.035)inset;border-radius: 20px;} .acWrp.oprStl>.unt>.ttlWrp>.ttl {color: #0dcc51;font-weight: 900;font-size: 30px;text-align: center;padding: 0 40px;} .acWrp.oprStl>.unt>.ttlWrp>img { position: absolute; bottom: 0; left: 0; width: auto; height: 180px; transform: translate(-30px, 15%); pointer-events: none; } .acWrp.oprStl>.unt>.bdyWrp, .acWrp.oprStl>.unt>.tglBtn {background-color: rgba(13,204,81,.05);} .acWrp.oprStl>.unt>.bdyWrp { z-index: 1; border-top: none; padding: 60px; width: 90%; border-radius: 0 0 20px 20px; margin: auto;} .acWrp.oprStl>.unt>.bdyWrp>.frm>.txtWrp {margin: 30px auto;} .acWrp.oprStl>.unt>.bdyWrp>.frm>.txtWrp>p {text-align: center;} .acWrp.oprStl>.unt>.bdyWrp>.frm>.hrzWrp {margin: 30px auto;} .acWrp.oprStl>.unt>.bdyWrp>.frm>.hrzWrp.numStl>.unt>.txtWrp>.ttlWrp, .acWrp.oprStl>.unt>.bdyWrp>.frm>.hrzWrp.numStl>.unt>.txtWrp>.ttlWrp>.ttl {color: #0dcc51;} .acWrp.oprStl>.unt>.bdyWrp>.frm>:first-child {margin-top: 0;} .acWrp.oprStl>.unt>.bdyWrp>.frm>:last-child {margin-bottom: 0;} .acWrp.oprStl>.unt>.tglBtn { width: 250px; height: 50px; display: block; margin: auto; border-radius: 0 0 20px 20px; cursor: pointer; position: relative; z-index: 1; } .acWrp.oprStl>.unt>.tglBtn>span {display: block;width: 100%;height: 100%;position: relative;} .acWrp.oprStl>.unt>.tglBtn>span:before, .acWrp.oprStl>.unt>.tglBtn>span:after { content: ""; display: block; width: 20px; height: 2px; background-color: #0dcc51; position: absolute; top: 0; bottom: 4px; left: 0; right: 0; margin: auto; } .acWrp.oprStl>.unt>.tglBtn>span:after {transform: rotate(-90deg);} .acWrp.oprStl>.unt.on>.tglBtn>span:after {transform: rotate(0);} /* myoage end */ /* cttWrp end */ /* media query 1155px以上 */ @media only screen and (min-width: 1155px){ #cttWrp {min-height: 800px;} } /* media query 641px以上 */ @media only screen and (min-width: 641px){ p>a:hover, #cttWrp>#brdcrmWrp>.frm>.unt>a:hover, #cttWrp>#brdcrmWrp>.frm>.unt>a:hover>i, .srvWrp>.frm>.bdyWrp>.infWrp>ul>.unt a:hover, .pwdWrp>.frm>.dtlWrp>.frm>.btnWrp>.unt>.frm>a:hover {text-decoration: none;} .acWrp.oprStl>.unt>.ttlWrp:hover {background-color: rgba(13,204,81,.1);} body>footer>.inr>.btnWrp>ul>li>a:hover {opacity: .5;} .cmnBtn:hover {transform: scale(1.05);} .cmnBtn:hover:before {opacity: .1;} .pagWrp>.frm>ul>li>a:hover, .srcWrp>.frm>form .srcBtn>input:hover, .tblWrp>table>tbody>tr>td>.btn:hover, .frmWrp>form>table>tbody>tr>td>.btn:hover, body>header>.inr>.cmn>.unt>.btnWrp>ul>li>a:hover {background-color: #d80a30;color: #FFF;} body>header>.inr>.frm>.btnWrp>ul>li>a:hover {background-color: #d80a30;color: #FFF;} .rsrWrp>ul>.unt>.btnWrp>.unt>button:hover {background-color: #d80a30;} .rsrWrp>ul>.unt>.btnWrp>.unt>button:hover *, body>header>.inr>.cmn>.unt>.btnWrp>ul>li>a:hover * {color: #FFF;} body>header>.inr>.cmn>.btnWrp>ul>li>a:hover {background-color: #FFF;border-color: rgba(216,10,48,.1);} body>header>.inr>.cmn>.btnWrp>ul>li>a:hover, body>header>.inr>.cmn>.btnWrp>ul>li>a:hover * {color: #d80a30;} #pageTop>a:hover {transform: translateY(0);} .nwsWrp>ul>.unt>article>a:hover, .appWrp>.frm>ul>.unt>.frm:hover, .acWrp>.unt>.ttlWrp:hover {background-color: rgba(0,0,0,.025);} .nwsWrp>ul>.unt>article>a:hover>.frm>.frm {transform: translateX(20px);} a:hover .btn.arw {transform: scale(1);border-width: 2px;} a:hover .btn.arw:before {transform: rotate(45deg) translate(0);opacity: 1;transition-delay: .1s;} body>header>.inr>.cmn>.unt>.btnWrp>ul>li.login>a:hover, body>header>.inr>.cmn>.unt>.btnWrp>ul>li.logout>a:hover {background-color: #777;} #cttWrp>.msgWrp>.frm>.clsBtn:hover {background-color: #000;color: #FFF;border-color: #000;} #cttWrp>.ctt>.sec>.inr>.ttlWrp>.ttl>br, #cttWrp>.ctt>.sec>.inr>.actWrp>.ttlWrp>.ttl>br, #mpgAtf>.frm>.dtlWrp>.txtWrp>p>br, #mpgAtf>.inr>.bdyWrp>.cttWrp>.ttl>br, #mpgAtf>.inr>.bdyWrp>.cttWrp>.ttlWrp>.sub>br, .acWrp.oprStl>.unt>.ttlWrp>.ttl>br {display: none;} a.telBtn {pointer-events: none;} .hrzWrp.alt>.unt:nth-child(even) {transform: scale(-1, 1);} .hrzWrp.alt>.unt:nth-child(even)>* {transform: scale(-1, 1);} .hrzWrp.alt>.unt:nth-child(even)>.imgWrp {padding-right: 0;padding-left: 60px;} .etrWrp>.unt:nth-child(n+2)>.imgWrp:before, .etrWrp>.unt:nth-child(n+2)>.imgWrp:after {bottom: 0;} #gnvBtn {display: none;} } /* 230512 add */ .cmnBtn>span {overflow: visible;text-overflow: initial;white-space: initial;} ul.att>li {line-height: 1.75em;} ul.att>li * {font-size: inherit;line-height: inherit;} ul.att>li:nth-child(n+2) {margin-top: .5em;} .cbxWrp {position: relative;} .thin {width: 75%;margin-left: auto;margin-right: auto;} .flx.set1>.unt {width: 100%;flex-basis: 100%;flex-shrink: 0;} .flx.set1>.unt:nth-child(n+2) {margin-top: 20px;} .flx.frmOn>.unt.colGreen {background-color: #e7faee;} .flx>.unt>.frm {padding: 40px 60px;} .flx>.unt>.frm>.ttlWrp {margin-bottom: 30px;} .flx>.unt>.frm>.ttlWrp>.ttl {text-align: center;font-weight: 900;font-size: 20px;} .flx>.unt>.frm>.ttlWrp>.ttl>span {font-size: .75em;} .flx>.unt>.frm>.bdyWrp>:nth-child(n+2) {margin-top: 30px;} .flx>.unt>.frm>.bdyWrp .att {line-height: 1.75em;} .flx>.unt>.frm>.bdyWrp .att>li {line-height: inherit;} .flx>.unt>.frm .cbxWrp {display: table;} input[type="radio"] {display: none;} input[type="radio"]+label {display: table;position: relative;cursor: pointer;margin: auto;} input[type="radio"]+label>.lbl {padding-left: 2.5em;position: relative;} input[type="radio"]+label>.lbl:before, input[type="radio"]+label>.lbl:after {content: "";content: "";display: block;width: 24px;height: 24px;position: absolute;top: 0;bottom: 0;left: 0;margin: auto;background-color: #EEE;border: 1px solid rgba(0,0,0,.15);border-radius: 50%;} input[type="radio"]+label>.lbl:after {background-color: #d80a30;transform: scale(.5);opacity: 0;transition: opacity .3s cubic-bezier(.5, 0, 0, 1);} input[type="radio"]:checked+label>.lbl:after {opacity: 1;} .rdoWrp input[type="radio"]+label {display: flex;justify-content: center;background-color: rgba(0,0,0,.025);padding: 20px;} .rdoWrp input[type="radio"]+label>.lbl {font-size: 20px;font-weight: 900;} .rdoWrp:nth-child(n+2) {margin-top: 30px;} .rdoWrp>.flx>.unt {} .lock__switch {transition: filter .3s cubic-bezier(.5, 0, 0, 1), opacity .3s cubic-bezier(.5, 0, 0, 1);} .lock__switch.lock {filter: grayscale(100%);pointer-events: none;opacity: .25;} @media only screen and (min-width: 641px){ .rdoWrp input[type="radio"]+label>.lbl:before, .rdoWrp input[type="radio"]+label>.lbl:after {width: 30px;height: 30px;} } @media only screen and (max-width: 640px){ ul.att>li>p {font-size: 11px;} .thin {width: 100%;} .flx>.unt>.frm {padding: 30px 40px;} .flx>.unt>.frm>.ttlWrp {margin-bottom: 20px;} .flx>.unt>.frm>.ttlWrp>.ttl {font-size: 18px;} .flx>.unt>.frm>.bdyWrp>:nth-child(n+2) {margin-top: 20px;} .rdoWrp input[type="radio"]+label>.lbl {font-size: 16px;} } /* 230512 add end */