@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');

/* base */
html { font-size:10px; }
body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, select, table, td, textarea, th, ul { margin: 0; padding: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul, li { list-style: none; }
blockquote, q { quotes: none; }
table { border-collapse: collapse; border-spacing: 0; }
input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="image"], input[type="tel"], textarea, button, select { -webkit-appearance:none; -webkit-border-radius:0; border-radius:0; background:none; }
input:focus, textarea:focus { outline-style:none; } 
input { -webkit-appearance: none; -webkit-border-radius: 0; }
textarea::placeholder, input::placeholder { color:#000; opacity: 0.3; }
img { max-width:100%; height:auto; vertical-align:middle; border:0; }
a { text-decoration:none; color:#000; }
i, em { font-style:normal; }
body, button, h1, h2, h3, h4, h5, input, select, table, textarea { font-family: 'Inter', sans-serif; color:#000; font-weight:normal; font-size:1rem; line-height:1.35; }

.ani { transition: all 0.7s ease;  }



/* intro
* * * * * * * * * * * * * * * * * * * */
#intro { position:relative; background: linear-gradient( to bottom, #60448b, #412175 ); max-width:768px; min-width:320px; min-height:440px; height:100vh; margin:0 auto; text-align:center; }
#intro:after { position:absolute; left:0; right:0; bottom:0; top:0; display:block; background-repeat:no-repeat; background-image:url('../img/common/abc_bg.svg'); background-position:center; background-size:cover; content:""; opacity:0.3; }
#intro .title { position:absolute; left:36.75%; top:0; width:26.5%; background-color:#412076; z-index:10; }
#intro .title img { width:100%; height:auto; }
#intro .logo img { width:70%; height:auto;}
#intro .logo { position:absolute; left:0; right:0; top:50%; z-index:10; transform:translateY(-50%); }
#intro .btn_start { position:absolute; left:50%; right:0; top:50%; z-index:10; width:40%; transform:translate(-50%, 300%); }

#intro .copyright { position:absolute; left:0; right:0; bottom:1.6rem; color:#fff; font-size:1.4rem; line-height:1.45; z-index:10; }


/* wrap */
.wrap { position:relative; max-width:768px; min-width:320px; margin:0 auto; padding:14.5rem 0 7.0rem 0; }

#hd, #ft { position:fixed; left:0; right:0; min-width:320px; z-index:90; }

/* header */
#hd { top:0; background-color:#fff; }
#hd .head { position:relative; text-align:center; height:8.0rem; background-color:#422077; }
#hd .head .btn_back { position:absolute; left:1.0rem; top:50%; display:block; width:4.0rem; height:4.0rem; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_back.svg'); background-size:1.2rem auto; transform:translateY(-50%); cursor:pointer; font-size:0; }

#hd h1 { width:11.2rem; margin:0 auto; padding-top:2.0rem; }
#hd #nav { margin-top:0.5rem; }
#hd #nav ul { display:grid; grid-template-columns:repeat(2, 1fr); width:100%; }
#hd #nav ul li { position:relative; display:table; height:6.0rem; font-size:1.8rem; line-height:1.20; text-align:center; font-weight:700; font-family: 'Roboto Condensed', sans-serif; }
#hd #nav ul li a { position:relative; display:block; display:table-cell; vertical-align:middle; color:#CCCCCC; height:6.0rem; z-index:9; }
#hd #nav ul li a span { display:block; font-size:1.4rem; font-weight:400; }
#hd #nav ul li a strong { display:block; }
#hd #nav ul li.current a { color:#000000; }
#hd #nav ul li.current:after { position:absolute; left:0; right:0; bottom:0; display:block; height:0.5rem; background-color:#FFE500; content:""; }

/* footer */
#ft { bottom:0; height:7.0rem; background-color:#fff; }
#ft .btn_ic { position:absolute; top:0.8rem; display:block; width:7.0rem; padding-top:3.8rem; cursor:pointer; text-align:center; color:#fff; font-weight:400; outline:none; background-repeat:no-repeat; background-position:center top; background-size:4.0rem auto; }
#ft .btn_ic .tit { display:block; text-align:center; color:#000; font-size:1.2rem; line-height:1.1; opacity:0.4; }
#ft .btn_ic.btn_home { left:2.7rem; background-image:url('../img/icons/btn_home.svg');  }
#ft .btn_ic.btn_ebook { right:2.7rem; background-image:url('../img/icons/btn_ebook.svg');  }
#ft .btn_ic.btn_my { left:calc(50% - 3.5rem); background-image:url('../img/icons/btn_my.svg');  }