@charset "utf-8";
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0;	border:0;	outline:0;	list-style:none; vertical-align:middle;	background:transparent; }
html, body { width:100%; max-width:100%; }
html {-webkit-text-size-adjust: 100%; /* 2 */-ms-text-size-adjust: 100%;}
body { line-height:1; z-index: 1; background: #f0f0f0; position: relative;}
img { border-style: none; max-width: 100%; width:auto; height: auto;}
nav ul, ul, li { list-style:none;}
strong{ vertical-align: baseline;}
*{box-sizing: border-box;}

/*-------------------
 フォント
-------------------*/
*{ font-family:'Noto Sans JP', YuGothic,'ヒラギノ角ゴ ProN W3',"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; color:#222; letter-spacing:1.5px; line-height:1.4em; font-size:16px;}
/*-------------------
 リンク
-------------------*/
a, a *, a:hover, a:hover * { transition: 0.3s ease-in-out;}
a:link, a:visited, a:hover, a:active { color:var(--link-color); text-decoration: none;}
a:hover { opacity:1; filter: alpha(opacity=100); color:var(--link-hover-color);}
/*link-btn*/
.link{ display: inline-block; padding: 4px 15px; border-radius: 6px; box-shadow: 0 0 0 400px var(--link-color-design) inset; color: var(--link-color-design-font) !important; transition: 0.8s;}
.link:hover{ color: var(--link-color-design) !important; box-shadow: 0 0 0 1px var(--link-color-design) inset;}
/*-------------------
 コンテンツ
-------------------*/
main { width:100%; height: 100vh; min-height: 300px; overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative;}
/**/
main .inner{ display: flex; flex-direction: column; padding: 20px 5%; margin-top: -10vh;}
main .inner h1{ display: block;}
main .inner h1 img{ width: 90%;  max-width: 310px; height: auto; margin:0 15px 20px;}
main .inner .formArea{ width: 340px; display: flex; flex-direction: column;}
main .inner .formArea .ftap-auth-form{ width: 100%; display: flex; flex-direction: column;}
main .inner .formArea .ftap-auth-form .ftap-error{ display: block; font-size: 14px; color: #D92B2E; opacity: 0; text-align: center;}
main .inner .formArea .ftap-auth-form label{ font-size: 12px; font-weight: 500; line-height: 1.4em; margin: 5px 0 4px;}
main .inner .loss{ display: flex; justify-content: center;}
main .inner .loss a{ display: block; line-height: 1.2em; color: #145EC3; font-size: 12px; letter-spacing:1px; text-decoration: underline;}
main .inner .loss a:hover, 
main .inner .loss:hover::before{ text-decoration: none; color: #0F9DAA;}
main .inner .loss::before{ content: "* "; color: #145EC3;}
/**/
main .fukuya{ display: flex; width: 200px; justify-content: center; position: absolute; left: 50%; bottom: 20px; margin-left: -100px;}
main .fukuya p{ display: block;}
main .fukuya a{ display: flex; flex-direction: column; justify-content: center;}
main .fukuya p a img{ width: 100px; height: auto;}
main .fukuya p a span{ font-size: 10px; color: #555; letter-spacing: 0px; text-align: center; margin-top: 4px;}
main .fukuya p a:hover{ opacity: 0.7;}
/**/
main .back{  display: block; position: absolute; right: 10px; top: 10px; z-index: 10000;}
main .back a{ display: flex; justify-content: center; align-items: center; border: solid 1px #777; border-radius: 2px; font-size: 12px; padding: 6px 10px;}
main .back a:hover{ background: #111; color: #fff; border: solid 1px #111;}
/*==============================================
 form item
================================================*/
input { width: 100%; font-size: 14px; line-height: 44px; vertical-align:middle; outline: none; background: #fff; -webkit-transition: all .3s; transition: all .3s; border-radius:2px; padding:0 6px; color: #000; border: solid 1px #bbb; letter-spacing: 0;}
input:focus { border:solid 1px #111; box-shadow: 0 0 0 3px #d5c183;}
input::placeholder{ color: #aaa;}
input{ appearance: none; -webkit-appearance: none;}

button{ margin: 20px 0; height: 56px; width: 100%; background: #cccccc; color: #999; font-weight: bold; border: none; border-radius: 4px;}
button{ background: #1c9157; color: #fff; cursor: pointer; transition: 0.3s;}
button:hover{ background: #00432D;}

@media screen and (max-width:600px) {
input { line-height: 60px;}
button{ height: 70px;}

}