/*basic-set*/
input[type=text],
input[type=password],
textarea
{
    -webkit-box-sizing :border-box;‌​
    -moz-box-sizing :border-box;
    box-sizing :border-box;
	line-height:auto;
	vertical-align:top;
}
* { position:relative; word-break:keep-all; }

body { background: #f1f1f1; }
#wrap { max-width: 800px; margin: 0 auto; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.2); }

#header { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 800px; background: #fff; z-index: 10; box-shadow: 0 0 10px rgba(0,0,0,0.2); }
#header h1 { font-size: 35px; font-weight: 800; line-height: 100%; text-align: center; letter-spacing: -2px; padding: 10px 0; }
#header h1::before { content: ''; display: inline-block; width: 70px; height: 70px; background: url(../images/logo.png) 0/100%; vertical-align: middle; margin-right: 5px; }
#header h1 p { display: inline-block; vertical-align: middle; }
#header h1 span { display: block; font-size: 28px; color: #00b8ff; margin-right: 10px; }
#header h1 span::before { content: ''; display: inline-block; width: 30px; height: 30px; background: url(../images/ic_phone_blue.png) 0/100%; vertical-align: middle; margin-top: -5px; }

#header .call { font-size: 30px; line-height: 100%; font-weight: 800; text-align: center; background: linear-gradient(to right, #00b8ff, #fddd00); padding: 7px 10px; }
#header .call a { display: block; color: #fff; }
#header .call a i { display: inline-block; width: 30px; height: 30px; background: url(../images/ic_phone.png) 0/100%; vertical-align: middle; margin: -5px 5px 0 0; }
.header_gap { height: 135px; }

#contents { padding: 50px 30px; }
#contents h2 { font-size: 32px; font-weight: 800; text-align: center; margin-bottom: 10px; }
#contents h2 em { color: #00b8ff; }
#contents h2 span { font-size: 20px; font-weight: 600; color: #999; }
#contents .t_guide { text-align: center; margin-bottom: 40px; }
#contents .t_guide span { display: inline-block; font-size: 16px; color: #fff; text-align: center; padding: 8px 15px; background: #333; border-radius: 7px; }

section { margin-bottom: 40px; }
section:last-child { margin: 0; }
section h3 { font-size: 24px; font-weight: 800; padding-left: 14px; margin-bottom: 15px; }
section h3::before { content: ''; position: absolute; top: 4px; left: 0; width: 5px; height: 20px; background: linear-gradient(to top, #00b8ff, #fddd00); }
section h3 span { font-size: 20px; color: #666; font-weight: 600; }
section h3 b { font-weight: 800; color: #f00; text-decoration: underline; }

.tb_data { width: 100%; border: 1px solid #dfdfdf; font-size: 16px; }
.tb_data th,
.tb_data td { padding: 10px; border: 1px solid #dfdfdf; }
.tb_data th { background: #00b8ff1a; }
.tb_data.yl th { background: #fddd001a; }
.tb_data.gr th { background: #48c3b71a; }
.tb_data th.red { background: #c836361a; }
.tb_data tr:nth-child(2n) td { background: #f6f6f6; }

.b_guide { font-size: 16px; line-height: 140%; font-weight: 600; margin-top: 40px; }
.b_guide em { font-weight: 900; color: #000; }
.b_guide b { font-weight: 900; color: #f00; text-decoration: underline; }

.bot_guide { text-align: center; border: 1px solid #ddd; padding: 20px; font-size: 20px; color: #000; font-weight: 800; }

.join { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 800px; z-index: 10; box-sizing: border-box; font-size: 24px; color: #000; font-weight: 700; padding: 25px 20px; background: #00c5b2; display: flex; justify-content: space-between; border-radius: 15px 15px 0 0; box-shadow: 0 0 10px rgba(0,0,0,0.2); animation: blink 2.5s infinite; }
.join span { font-weight: 900; color: #fff; }
.join span i { display: inline-block; width: 24px; height: 24px; background: url(../images/arrow.png) 0/100%; vertical-align: middle; margin: -5px 0 0 7px; }
.join span em { color: #000; font-weight: 700; }
.join .scroll { position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); background: #0000007a; font-size: 20px; color: #fddd00; padding: 9px 15px; border-radius: 50px; animation: swing 1.8s infinite; transition: all 0.3s; }
.join.off .scroll { opacity: 0; }
.join .scroll::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border: 1px solid transparent; border-width: 7px; border-top-color: #0000007a; }
.join .scroll a { color: #fddd00; }
.join .scroll a::after { content: ''; display: inline-block; width: 18px; height: 18px; background: url(../images/arr_scroll.png) no-repeat center center/auto 100%; vertical-align: middle; margin: -3px 0 0 1px; }
.join_gap { height: 80px; }
@keyframes blink {
    0% { background-color: #00c5b2; }
    50% { background-color: #fddd00; }    
    100% { background-color: #00c5b2; }
  }
  @keyframes swing {
    0% { bottom: calc(100% + 10px); }
    50% { bottom: calc(100% + 2px); }
    100% { bottom: calc(100% + 10px); }
}
a.bt_ov { position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-indent: -9999px; }

.r_banner { position: fixed; top: 50%; left: 50%; margin-left: 415px; width: 75px; padding: 15px; background: url(../images/sph.jpg) center center/cover; border-radius: 10px; font-size: 20px; color: #fff; font-weight: 800; text-align: center; box-shadow: 0 0 10px rgba(0,0,0,0.2); }
.r_banner span { display: block; margin-top: 24px; }
.r_banner span::after { content: ''; display: block; width: 100%; height: 20px; background: url(../images/arrow.png) no-repeat center 0/auto 100%; margin-top: 5px; }
.l_banner { position: fixed; top: 50%; left: 50%; margin-left: -565px; width: 150px; height: 150px; background: url(../images/logo.png) 0/cover; border-radius: 15px; text-indent: -9999px; box-shadow: 0 0 10px rgba(0,0,0,0.2); }

@media screen and (max-width:800px) {
#header h1 { font-size: 28px; }
#header h1::before { width: 60px; height: 60px; margin-right: 3px; }
#header h1 span { font-size: 22px; margin-right: 5px; }
#header h1 span::before { width: 22px; height: 22px; }

#header .call { font-size: 20px; }
#header .call a i { width: 22px; height: 22px; margin: -3px 3px 0 0; }
.header_gap { height: 115px; }


#contents { padding: 35px 20px; }
#contents h2 { font-size: 28px; }
#contents h2 span { display: block; font-size: 18px; }
#contents .t_guide { margin-bottom: 30px; }
#contents .t_guide span { font-size: 14px; padding: 5px 10px; border-radius: 5px; }

section { margin-bottom: 30px; }
section h3 { font-size: 20px; padding-left: 10px; margin-bottom: 12px; }
section h3::before { top: 3px; width: 3px; height: 18px; }
section h3 span { font-size: 15px; font-weight: 500; display: inline-block; }

.tb_data { font-size: 14px; }
.tb_data th,
.tb_data td { padding: 8px; }

.b_guide { font-size: 14px; margin-top: 30px; }

.bot_guide { padding: 16px; font-size: 16px; }

.join { font-size: 20px; padding: 25px 15px; }
.join span i { width: 18px; height: 18px; margin: -3px 0 0 5px; }
.join span em { color: #000; font-weight: 700; }
.join .scroll { font-size: 16px; padding: 7px 12px; }
.join .scroll::after { border-width: 5px; }
.join .scroll a { display: block; min-width: 185px; text-align: center; }
.join .scroll a::after { width: 14px; height: 14px; }
.join_gap { height: 70px; }
}