* { box-sizing: border-box; }
a { text-decoration: none; }
body { -webkit-text-size-adjust : none; -ms-text-size-adjust : none; text-size-adjust : none }
html, body { width: 100%; height: 100%; }
body { margin: 0; padding: 0; font-size: 14px; }
body, input, textarea { font-family: 'HelveticaNeue-Light', 'AppleSDGothicNeo-Light', 'sans-serif'; }

body { background-color: #f0f0f0; }
.root { }
.root-header { background: url(../img/bg_pattern.jpg) 0 0 repeat; }
.root-header-title { margin: 0; height: 100px; background: url(../img/bg_title01.png) 50% 0 no-repeat; border-bottom: 1px solid #036bf9; text-indent: -1000em; }

.root-content { margin: 10px auto; padding: 20px 30px ; max-width: 960px; min-height: 1000px; color: #666; background-color: #fff; }
.root-content header > *:first-child { margin-top: 0; }
.root-content section { padding: 1px 0; }
.root-content h1 { margin: 20px 0; font-size: 34px; font-weight: 400; color: #000; }
.root-content h2 { margin: 20px 0; padding-bottom: 10px; font-size: 24px; font-weight: 300; color: #000; border-bottom: 1px solid #ebebeb; }
.root-content h3 { margin: 20px 0; font-size: 20px; font-weight: 400; color: #000; }
.root-content h4 { margin: 20px 0; color: #000; }
.root-content p { margin: 20px 0; }
.root-content iframe,
.root-content img { max-width: 100%; }
.root-content ul,
.root-content ol { padding-left: 30px; line-height: 1.8; }

.tab-nav { position: relative; margin: 0 auto; border-collapse: collapse; width: 100%; background-color: #fff; overflow: hidden; }
.tab-nav.is-fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 10; }
.tab-nav:after { content: ' '; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; background-color: #dedede; }
.tab-nav-item { position: relative; float: left; text-align: center; width: 25%; color: #6f7173; font-size: 24px; white-space: nowrap; overflow: hidden; }
.tab-nav-item:after { content: ' '; position: absolute; top: 12px; right: 0; bottom: 12px; width: 1px; background-color: #dedede; }
.tab-nav-item:last-child:after { display: none; }
.tab-nav-item span { position: relative; display: inline-block; padding: 24px 20px; height: 100%; text-decoration: none; }
.tab-nav-item:active { opacity: 0.8; }
.tab-nav-item.active { position: relative; color: #078dff; z-index: 1; }
.tab-nav-item.active span:after { content: ' '; position: absolute; left: 0; bottom: 0; right: 0; height: 4px; background-color: #078dff; }

.content-list { margin: 10px auto; max-width: 960px; background-color: #fff; }
.content-list-title { margin: 0; height: 60px; border-bottom: 1px solid #ebebeb; font-size: 24px; font-weight: normal; text-align: center; line-height: 60px; color: #353535; }
.content-list-inner { margin: -1px 0 0 0; padding: 0; list-style: none; border-bottom: 1px solid #ebebeb; }
.content-list-inner:after { content: ' '; display: block; clear: both; }
.content-item { position: relative; float: left; padding-left: 20px; width: 50%; height: 70px; line-height: 70px; border-bottom: 1px solid #ebebeb; white-space: nowrap; overflow: hidden; }
.content-item:nth-child(2n+1):after { content: ' '; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background-color: #ebebeb; }
.content-item-link { font-size: 22px; color: #078dff; }
.content-item-link:before { content: ' '; display: inline-block; margin-top: -3px; margin-right: 10px; width: 4px; height: 4px; background-color: #878787; border-radius: 50%; vertical-align: middle; }

.btn-top { position: fixed; bottom: 20px; right: 50%; margin-right: -460px; width: 90px; height: 90px; line-height: 90px; background-color: rgba(0, 0, 0, 0.2); border-radius: 50%; overflow: hidden; text-align: center; }
.btn-top > span { position: absolute; top: -1000em; left: -1000em; }
.btn-top:active { opacity: 0.8; }

.ico { display: inline-block; vertical-align: middle; }
.ico-arrow-up { width: 30px; height: 44px; background: url(../img/ico_arrow-up.png) 0 0 no-repeat; }

.video-area { max-width: 560px; }
.video-area-inner { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; }
.video-area .video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media screen and (max-width: 960px) {
  body { margin: 0; padding: 0; font-size: 12px; }

  .root-header-title { height: 50px; background-size: auto 50px; text-indent: -1000em; }

  .root-content { padding: 10px 15px; overflow: hidden; }
  .root-content h1 { margin: 10px 0; font-size: 17px; }
  .root-content h2 { margin: 10px 0; padding-bottom: 10px; font-size: 14px; font-weight: 400; }
  .root-content h3 { margin: 10px 0; font-size: 12px; font-weight: bold; }
  .root-content h4 { margin: 10px 0; }
  .root-content p { margin: 10px 0; }

  .tab-nav-item { font-size: 12px; }
  .tab-nav-item span { padding: 12px 10px; }
  .tab-nav-item.active span:after { height: 2px; }

  .btn-top { right: 20px; margin-right: 0; }

  .content-list { margin: 5px auto; }
  .content-list-title { height: 30px; font-size: 12px; line-height: 30px; }
  .content-item { padding-left: 10px; height: 35px; line-height: 35px; }
  .content-item-link { font-size: 11px; }
  .content-item-link:before { margin-top: -2px; margin-right: 5px; width: 2px; height: 2px; }

  .btn-top { bottom: 10px; right: 10px; margin-right: 0; width: 45px; height: 45px; line-height: 45px; }
  .ico-arrow-up { width: 15px; height: 22px; background-size: 15px 22px; }
}