@charset "UTF-8";

/*===== STYLE LIST ==========================================================
1: Custom Setting
2: Framework
3: Header
4: Main
5: Aside
6: Page Top
7: Footer
8: Module
9: CSS Icon
============================================================================= */

/* 1: Custom Setting
============================================================================= */
html {
    font-size: 62.5%;
    letter-spacing: .06rem;
    line-height: 1.7;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

body {
    min-width: 1100px;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    color: #222222;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, Segoe UI, Helvetica Neue, Meiryo, "メイリオ", "游ゴシック", "游ゴシック体", Yu Gothic Medium, YuGothic, "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: 1.4rem;
}

@media (max-width: 767px) {
    html {
        letter-spacing: .02rem;
        line-height: 1.6;
    }

    body {
        max-width: 100%;
        min-width: 320px;
        font-size: 1.6rem;
        overflow: hidden;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* TEXT ===================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}

h1 {
    margin-bottom: 1em;
    font-size: 2.4rem;
}

h2 {
    margin-bottom: 1.5em;
    font-size: 2.4rem;
}

h2.line {
    position: relative;
    padding-bottom: 1.5rem;
    text-align: center;
}

h2.line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 6rem;
    height: 3px;
    margin-left: -3rem;
    background-color: #00A3E5;
}

h2.link {
    display: flex;
    justify-content: space-between;
    padding-bottom: .2rem;
    border-bottom: .3rem solid #1C5572;
    font-size: 1.6rem;
}

h2.link a {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin-left: auto;
    padding-left: 2.4rem;
    font-size: 1.4rem;
    font-weight: normal;
}

h3 {
    margin-bottom: 1.25em;
    font-size: 2rem;
}

h3.line {
    padding: .8rem 0 .8rem 1.6rem;
    border-left: .4rem solid #00A3E5;
}

h4 {
    margin-bottom: 1em;
    font-size: 1.6rem;
}

h4.line {
    padding-bottom: .8rem;
    border-bottom: .3rem solid #00A3E5;
}

h5,
h6 {
    margin-bottom: .5em;
    font-size: 1.4rem;
}

h5.mark {
    position: relative;
    padding-left: 2.4rem;
}

h5.mark::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: -.45em;
    border: .3rem solid #00A3E5;
    border-radius: 50vh;
}

p {
    margin-top: 0;
}

b,
strong,
em {
    font-family: -apple-system, BlinkMacSystemFont, Roboto, Segoe UI, Helvetica Neue, Meiryo, "メイリオ", "游ゴシック", "游ゴシック体", Yu Gothic Medium, YuGothic, "Hiragino Kaku Gothic ProN", sans-serif;
    font-style: normal;
}

@media (max-width: 767px) {

    h2 {
        margin-bottom: 1em;
    }

    h4.line {
        font-size: 1.8rem;
    }

    h5,
    h6 {
        font-size: 1.6rem;
    }

    h5.mark {
        font-size: 1.6rem;
    }

    h5.mark::after {
        width: 1.6rem;
        height: 1.6rem;
        margin-top: -.45em;
    }

}

/* LIST ===================================================================== */
/* Bullet points ------------------------------------------------------------ */
ol,
ul {
    margin-top: 0;
    padding-left: 2rem;
}

ul ul,
ol ul,
ul ol,
ol ol {
    margin-bottom: 0;
}

ol li,
ul li {
    margin-bottom: .5em;
}

/* Note List */
ul.note,
ol.note-num {
    padding-left: 0;
    list-style: none;
}

ul.note.small,
ol.note-num.small {
    color: #666666;
    font-size: 1.2rem;
}

.note li {
    position: relative;
    padding-left: 1.5em;
}

.note li::before {
    content: '*';
    position: absolute;
    top: 0;
    left: 0;
    width: 1.5em;
    font-size: 2rem;
    line-height: 1.4;
}

ol.note-num li {
    counter-increment: num;
    position: relative;
    padding-left: 3rem;
}

ol.note-num li::before {
    content: '*' counter(num) '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2em;
}

@media (max-width: 767px) {

    ul.note.small,
    ol.note-num.small {
        font-size: 1.4rem;
    }

}

/* Side Note List */
.sidenoteList .note {
    position: relative;
    padding-left: 2.8em;
    color: #666666;
    font-size: 1.2rem;
}

.sidenoteList .note::after {
    content: '';
    position: absolute;
    top: .75em;
    left: 1.6em;
    width: 1rem;
    height: .1rem;
    background: linear-gradient(to right, #666666, #666666 .3rem, transparent .4rem, transparent .8rem) repeat-x;
    background-size: .6rem .1rem;
}

@media (max-width: 767px) {

    .sidenoteList .note {
        display: block;
        margin-top: .5em;
        padding-left: 1.4em;
        font-size: 1.4rem;
    }

    .sidenoteList .note::after {
        left: 0;
    }

}

/* Definition list ---------------------------------------------------------- */
dl {
    margin-top: 0;
}

dl dd {
    margin-left: 0;
}

/* HR ======================================================================= */
hr {
    margin: 1rem auto;
    border: 0;
    border-bottom: 1px solid #CCCCCC;
}

/* LINK ===================================================================== */
a {
    text-decoration: none;
}

a:link {
    color: #0033CC;
}

a:visited {
    color: #003399;
}

a:hover {
    text-decoration: underline;
}

a:active {
    color: #0033CC;
    text-decoration: underline;
}

a:focus {
    color: #0033CC;
    text-decoration: underline;
}

/* IMAGE ==================================================================== */
img {
    max-width: 100%;
    width: auto;
    height: auto;
    vertical-align: bottom;
}

a img {
    border: none;
}

figure {
    margin: 0;
}

/* TABLE ==================================================================== */
table {
    max-width: 100%;
    width: 100%;
    border-collapse: collapse;
}

table caption {
    margin-bottom: .5rem;
    font-weight: bold;
    text-align: left;
}

table caption span:only-child {
    margin-left: .5em;
    font-weight: normal;
}

table th,
table td {
    border: 1px solid #CCCCCC;
    padding: 1rem;
}

table thead th {
    text-align: center;
}

table tbody th,
table td {
    text-align: left;
}

table th {
    background: #FAFAFA;
}

table.equal {
    table-layout: fixed;
}

table.layout,
table.layout > thead > tr > th,
table.layout > tbody > tr > th,
table.layout > tbody > tr > td {
    background-color: #FFFFFF;
    border: none;
}

table.th20-100 th {
    width: 20%;
}

table.nowrap th,
table.nowrap-thead th,
table.nowrap-tbody th {
    white-space: nowrap;
}

table.align-r-td td {
    text-align: right;
}

table.align-c th,
table.align-c td,
table.align-c-th th,
table.align-c-th tbody th,
table.align-c-td td {
    text-align: center;
}

table.valign-m th,
table.valign-m td,
table.valign-m-th th,
table.valign-m-td td {
    vertical-align: middle;
}

table + p {
    margin-top: 1rem;
}

@media (max-width: 767px) {

    .table01 table,
    .table01 table caption,
    .table01 table thead,
    .table01 table tbody,
    .table01 table tr,
    .table01 table th,
    .table01 table td {
        display: block;
    }

    .table01 table {
        border-bottom: 1px solid #CCCCCC;
    }

    .table01 table th {
        width: auto;
    }

    .table01 table th,
    .table01 table td {
        border-bottom: none;
    }

    table.scroll {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.th20-100 th {
        width: 100%;
    }

}

/* Form ===================================================================== */
form {
    display: block;
    margin-bottom: 0;
}

input[type='password'],
input[type='tel'],
input[type='text'],
input[type='email'],
input[type='search'] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    padding: .8rem 1rem;
    background-color: #FFFFFF;
    border: .1rem solid #CCCCCC;
    border-radius: .2rem;
    overflow: hidden;
}

textarea,
select {
    padding: .8rem 1rem;
    background-color: #FFFFFF;
    border: .1rem solid #CCCCCC;
    border-radius: .2rem;
    overflow: hidden;
}

button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
    display: inline-block;
    padding: .8rem 1rem;
    font-size: 1.6rem;
    font-weight: normal;
}

button[disabled],
input[type='button'][disabled],
input[type='reset'][disabled],
input[type='submit'][disabled] {
    background-color: #E7E7E7;
    border-color: #E7E7E7;
    opacity: 1;
}

label,
legend {
    display: inline-block;
    font-weight: normal;
}

::-webkit-input-placeholder {
    color: #999999;
    opacity: 1;
}

::-moz-placeholder {
    color: #999999;
    opacity: 1;
}

:-ms-input-placeholder {
color: #999999;
line-height: 2.8rem;
}

::-ms-input-placeholder {
    position: relative;
    color: #999999;
}

:placeholder-shown {
    color: #999999;
}

:focus:placeholder-shown {
    color: #999999;
}

:placeholder {
    color: #999999;
}

/* 2: Framework
============================================================================= */
#container {
    display: flex;
    flex-flow: column;
    position:relative;
    min-height: 100vh;
    overflow: hidden;
}

.read-block {
    margin-bottom: 4rem;
}

/* 3: Header
============================================================================= */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 5rem;
    width: 1100px;
    margin: 0 auto;
    padding: 1rem 0;
    background-color: #FFFFFF;
}

header > :last-child {
    margin-bottom: 0;
}

header h1,
header .logo {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

header h1 img,
header .logo img {
    width: 10rem;
}

header h1,
header .logo span {
    margin-left: 1.5rem;
    color: #666666;
    font-size: 1.3rem;
}

header .head-menu ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 0;
    padding-left: 0;
    font-size: 1.3rem;
    list-style: none;
}

header .head-menu li {
    margin-bottom: 0;
}

header .head-menu li + li {
    margin-left: 3rem;
}

header .head-menu a {
    display: flex;
    align-items: center;
    border: .1rem solid #FFFFFF;
    border-radius: .2rem;
}

header .head-menu a:hover,
header .head-menu a:active,
header .head-menu a:focus {
    color: #02A5C7;
    text-decoration: none;
}

/* Entry */
header .entry a {
    position: relative;
    padding: 0 1.6rem;
    transition: .3s ease-in-out;
}

header .entry a::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    right: -1.6rem;
    width: 2.4rem;
    height: 2.4rem;
    background: url("/assets/images/btn-icon-click.png") no-repeat left top;
    background-size: contain;
    opacity: 0;
    transform: rotate(-20deg);
    transition: .3s ease-in-out;
}

header .entry a:hover,
header .entry a:active,
header .entry a:focus {
    border-color: #02A5C7;
}

header .entry a:hover::after,
header .entry a:active::after,
header .entry a:focus::after {
    opacity: 1;
}

/* Login */
header .login a:hover .icon-login,
header .login a:active .icon-login,
header .login a:focus .icon-login {
    border-color: #02A5C7;
}

header .login a:hover .icon-login::before,
header .login a:hover .icon-login::after,
header .login a:active .icon-login::before,
header .login a:active .icon-login::after,
header .login a:focus .icon-login::before,
header .login a:focus .icon-login::after {
    transition: .3s ease-in-out;
}

header .login a:hover .icon-login::before,
header .login a:active .icon-login::before,
header .login a:focus .icon-login::before {
    left: .4rem;
    background-color: #02A5C7;
}

header .login a:hover .icon-login::after,
header .login a:active .icon-login::after,
header .login a:focus .icon-login::after {
    left: .4rem;
    border-color: #02A5C7;
}

@media (min-width: 768px) and (max-width: 950px) {

    header {
        padding: 1rem;
    }

}

@media (max-width: 767px) {

    header {
        width: 100%;
        padding: 1.5rem 1rem;
        border-bottom: .1rem solid #222222;
    }

    header .logo span {
        display: none;
    }

    header .head-menu {
        display: none;
    }

}

/* Global Navigation ======================================================== */
nav.global-navi {
    position: relative;
    background-color: #222222;
}

nav.global-navi :last-child {
    margin-bottom: 0;
}

nav.global-navi ul {
    display: flex;
    align-items: center;
    width: 1100px;
    margin: 0 auto;
    padding-left: 0;
    border: .1rem solid #666666;
    border-width: 0 .1rem;
    list-style: none;
}

nav.global-navi li {
    width: calc(100% / 5);
    margin-bottom: 0;
    text-align: center;
    white-space: nowrap;
}

nav.global-navi li + li {
    border-left: 1px solid #666666;
}

nav.global-navi li:nth-child(n+6) {
    display: none;
}

nav.global-navi a {
    display: flex;
    align-items: center;
    justify-content:center;
    flex-basis: 1;
    position: relative;
    padding: .8rem 1rem;
    background-color: #222222;
    color: #FFFFFF;
    text-align: center;
    transition: .3s ease-in-out;
}

nav.global-navi a:hover,
nav.global-navi a:active,
nav.global-navi a:focus {
    background-color: #494949;
    text-decoration: none;
}

@media (max-width: 767px) {

    nav.global-navi {
        display: none;
    }

    nav.global-navi ul {
        flex-direction: column;
        width: 100%;
        margin: 0;
        border: none;
    }

    nav.global-navi li {
        width: 100%;
        padding: 0;
    }

    nav.global-navi li + li {
        border-left: none;
    }

    nav.global-navi li:not(:last-child) a {
        justify-content: flex-start;
        position: relative;
        padding: 1.5rem 4rem;
    }

    nav.global-navi li:not(:last-child) a::before {
        content: '';
        display:block;
        position: absolute;
        top: 50%;
        right: 3rem;
        width: 1.2rem;
        height: 1.2rem;
        margin-top: -.6rem;
        border: .2rem solid #FFFFFF;
        border-width:  0 .2rem .2rem 0;
        transform: rotate(-45deg);
        transition: .3s ease-in-out;
    }

    nav.global-navi li:last-child {
        display: flex;
        justify-content: space-between;
        padding: 1rem 1rem 2rem 1rem;
    }

    nav.global-navi li:last-child a {
        width: calc((100% - 1rem) / 2);
        border: 1px solid #FFFFFF;
    }

    nav.global-navi li .entry {
        padding: .8rem 2.4rem .8rem 4rem;
        background-image: url("/assets/images/btn-icon-entry.png");
        background-repeat: no-repeat;
        background-position: 2.4rem center;
        background-size: 1.6rem;
    }

}

/* Breadcrumb =============================================================== */
.breadcrumb {
    padding: .4rem 0;
    border-bottom: 0.1rem solid #222222;
}

.breadcrumb ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 1100px;
    margin: 0 auto;
    padding: 0;
    color: #666666;
    list-style: none;
}

.breadcrumb li {
    position: relative;
    margin-bottom: 0;
    font-size: 1.3rem;
}

.breadcrumb li:first-child a {
    display: inline-block;
    width: 1.25em;
}

.breadcrumb li:first-child span {
    display: block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

.breadcrumb li:first-child span::before {
    content: '';
    position: absolute;
    top: .4em;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 9px 8px;
    border-color: transparent transparent #666666 transparent;
}

.breadcrumb li:first-child span::after {
    content: '';
    position: absolute;
    top: 1em;
    left: 3px;
    width: 11px;
    height: 8px;
    background-color: #666666;
}

.breadcrumb li:not(:first-child) {
    padding-left: 3rem;
}

.breadcrumb li:not(:first-child)::after {
    content: ">";
    position: absolute;
    top: 0;
    left: 1rem;
    margin-top: -.05em;
}

@media (min-width: 768px) and (max-width: 950px) {

    .breadcrumb {
        padding: 0.4rem 1rem;
    }

}

@media (max-width: 767px) {

    .breadcrumb {
        width: 100%;
        padding: 1rem;
        overflow-x: auto;
    }

    .breadcrumb ul {
        flex-wrap: nowrap;
        width: auto;
        margin: 0;
    }

    .breadcrumb ul li {
        white-space: nowrap;
    }

    .breadcrumb ul li:last-child {
        padding-right: 1rem;
    }

}

/* 4: Main
============================================================================= */
main {
    flex: 1 auto;
    display: block;
}

header + main {
    border-top: 0.1rem solid #222222;
}

/* 5: Aside
============================================================================= */

/* Service Search Area ====================================================== */
.service-search-area {
    padding: 4rem 0;
    border-top: .4rem solid #E0F0F9;
}

.service-search-area > section {
    width: 1100px;
    margin: 0 auto;
}

.service-search-area h2 {
    margin-bottom: 1em;
}

.service-search-area dl {
    display: flex;
    margin-bottom: 0;
}

.service-search-area dt {
    width: 17rem;
    margin-bottom: 0;
    padding: .4rem 0;
    font-size: 1.4rem;
    font-weight: normal;
}

.service-search-area dd {
    flex: 1 auto;
}

.service-search-area ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0 1rem;
    padding-left: 0;
    list-style: none;
}

.service-search-area li {
    text-align: center;
}

.service-search-area .crossSearch li {
    width: calc((100% - 1.2rem) / 4);
}

.service-search-area li:not(:last-child) {
    margin-right: .4rem;
}

.service-search-area a {
    display: block;
    padding: .8rem 1.4rem;
    background-color: #FFFFFF;
    border: .1rem solid #135570;
    border-radius: .2rem;
    color: #135570;
    transition: .3s ease-in-out;
}

.service-search-area .crossSearch a {
    padding: .6rem 1.6rem .6rem 3.2rem;
    background-repeat: no-repeat;
    background-position: 1rem center;
    background-size: 2rem;
}

.service-search-area li.company a {
    background-image: url("/assets/images/service-icon-company.png");
}

.service-search-area li.newspaper a {
    background-image: url("/assets/images/service-icon-newspaper.png");
}

.service-search-area li.credit a {
    background-image: url("/assets/images/service-icon-credit.png");
}

.service-search-area li.person a {
    background-image: url("/assets/images/service-icon-person.png");
}

.service-search-area a:hover,
.service-search-area a:active,
.service-search-area a:focus {
    border-color: #02A5C8;
    color: #02A5C8;
    text-decoration: none;
}

@media (min-width: 768px) and (max-width: 950px) {

    .service-search-area > section {
        padding: 0 1rem;
    }

}

@media (max-width: 767px) {

    .service-search-area {
        padding: 3rem 1rem;
    }

    .service-search-area > section {
        width: 100%;
        margin: 0;
    }

    .service-search-area h2 {
        font-size: 2rem;
      }

    .service-search-area dl {
          flex-direction: column;
    }

    .service-search-area dl + dl {
        margin-top: 1.6rem;
    }

    .service-search-area dt {
        width: 100%;
        margin-bottom: 1rem;
        font-size: 1.6rem;
    }

    .service-search-area ul {
        margin: 0;
    }

    .service-search-area li {
        margin-top: .4rem;
        font-size: 1.6rem;
    }

    .service-search-area a {
        padding: 1rem 1.4rem;
    }

    .service-search-area .crossSearch ul {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .service-search-area .crossSearch li {
        width: 100%;
        text-align: left;
    }

    .service-search-area .crossSearch a {
        padding: 1rem 1.6rem 1rem 5rem;
        background-size: 2.4rem;
    }

}

/* Membership Area ========================================================== */
.membership-area {
    position: relative;
    padding: 4rem 0;
    background-color: #E0F0F9;
}

.membership-area > section {
    width: 960px;
    margin: 0 auto;
}

.membership-area .read-block {
    margin-bottom: 3rem;
}

.membership-area .membership {
    display: flex;
    justify-content: center;
    margin-bottom:  3rem;
}

.membership-area .membership section {
    position: relative;
    width: calc(100% / 3);
    padding: 2rem 1.6rem;
    background-color: rgba(255, 255, 255, .9);
    border-radius: .8rem;
    box-shadow: 0 .2rem .6rem 0 rgb(0 0 0 / 10%);
}

.membership-area .membership section::after {
    content: '';
    position: absolute;
    top: 2rem;
    left: -1em;
    width: 6rem;
    height: 6rem;
    background-color: #FFFFFF;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 7rem;
    border-radius: 50vh;
}

.membership-area .membership section:nth-child(1)::after {
    background-image: url("/comp/images/point-icon-company.png");
}

.membership-area .membership section:nth-child(2)::after {
    background-image: url("/comp/images/point-icon-check.png");
}

.membership-area .membership section:nth-child(3)::after {
    background-image: url("/comp/images/point-icon-cost.png");
}

.membership-area .membership section + section {
    margin-left: 2.4rem;
}

.membership-area h3 {
    margin-bottom: .5em;
}

.membership-area h3 span {
    display: inline-block;
    background-image: -webkit-linear-gradient(left, #2E66E5 0%, #00A3E5 100%); /* IE11対策 */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.membership-area section :last-child {
    margin-bottom: 0;
}

.membership-area section h3 {
    padding-left: 4rem;
}

@media (max-width: 767px) {

    .membership-area {
        padding: 3rem 1rem;
    }

    .membership-area > .inner {
        flex-direction: column;
        width: 100%;
        margin: 0;
    }

    .membership-area > section {
        width: 100%;
        margin: 0;
    }

    .membership-area section + section {
        margin-top: 1rem;
    }

    .membership-area .membership {
        flex-direction: column;
    }

    .membership-area .membership section {
        width: calc(100% - 2.4rem);
        margin-left: 1.6rem;
        padding-left: 5.2rem;
    }

    .membership-area .membership section + section {
        margin-left: 1.6rem;
    }

    .membership-area section h3 {
        padding-left: 0;
    }

}

/* Support Information Area ================================================= */
.support-info-area {
    padding: 6rem 0;
    background-color: #F9F9F9;
}

.support-info-area > .inner {
    display: flex;
    justify-content: space-between;
    width: 1100px;
    margin: 0 auto;
}

.support-info-area h2 {
    margin-bottom: 2.5rem;
    padding-bottom: 0.2rem;
    border-bottom: 2px solid #1C5572;
    font-size: 1.6rem;
}

@media (min-width: 768px) and (max-width: 950px) {

    .support-info-area > .inner {
        padding: 0 1rem;
    }

}

@media (max-width: 767px) {

    .support-info-area {
        padding: 4rem 0 8rem 0;
        background-color: #FAFAFA;
    }

    .support-info-area > .inner {
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 0 1rem;
    }

    .support-info-area > .inner > section + section {
        margin: 4rem 0 0 0;
    }

    .support-info-area h2 {
        padding-bottom: .8rem;
    }

    .support-info-area h2.link {
        flex-direction: column;
        margin-bottom: .5em;
        border-bottom: none;
        font-size: 2rem;
        text-align: left;
    }

    .support-info-area h2.link span:not([class]) {
        margin-bottom: 1.5rem;
        border-bottom: 2px solid #1C5572;
    }

    .support-info-area h2.link a {
        padding-left: 0;
        font-size: 1.6rem;
    }

}

/* local Navigation --------------------------------------------------------- */
.support-info-area .local-navi {
    width: 640px;
}

.support-info-area .local-navi ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.support-info-area .local-navi li {
    flex-basis: calc((100% - 2rem) / 3);
    margin: .2rem 0 .2rem 1rem;
}

.support-info-area .local-navi li:nth-child(3n+1) {
    margin-left: 0;
}

.support-info-area .local-navi li a {
    display: block;
    padding: .5rem 1rem .5rem 3.2rem;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 2.4rem;
    border: 1px solid transparent;
    border-radius: .2rem;
    transition: .3s ease-in-out;
}

.support-info-area .local-navi li a:hover,
.support-info-area .local-navi li a:active,
.support-info-area .local-navi li a:focus {
    text-decoration: none;
}

.support-info-area .local-navi li a:visited {
    color: #0033CC;
}

.support-info-area .local-navi li.company a {
    background-image: url("/assets/images/service-icon-company.png");
}

.support-info-area .local-navi li.newspaper a {
    background-image: url("/assets/images/service-icon-newspaper.png");
}

.support-info-area .local-navi li.magazine a {
    background-image: url("/assets/images/service-icon-magazine.png");
}

.support-info-area .local-navi li.compliance a {
    background-image: url("/assets/images/service-icon-compliance.png");
}

.support-info-area .local-navi li.person a {
    background-image: url("/assets/images/service-icon-person.png");
}

.support-info-area .local-navi li.law a {
    background-image: url("/assets/images/service-icon-law.png");
}

.support-info-area .local-navi li.map a {
    background-image: url("/assets/images/service-icon-map.png");
}

.support-info-area .local-navi li.marketing a {
    background-image: url("/assets/images/service-icon-market.png");
}

.support-info-area .local-navi li.overseas a {
    background-image: url("/assets/images/service-icon-overseas.png");
}

.support-info-area .local-navi li.bid a {
    background-image: url("/assets/images/service-icon-bid.png");
}

@media (max-width: 767px) {

    .support-info-area .local-navi {
        width: 100%;
        margin-bottom: 3rem;
    }

    .support-info-area .local-navi ul {
        flex-direction: column;
    }

    .support-info-area .local-navi li {
        flex-basis: auto;
        margin: 0;
        padding: 0;
        border-top: none;
        background-position: 1rem center;
    }

    .support-info-area .local-navi li:last-child {
        border-bottom: 1px solid #CCCCCC;
    }

    .support-info-area .local-navi li a {
        display: block;
        padding: 1rem 1rem 1rem 4rem;
        border-top: 1px solid #CCCCCC;
    }

    .support-info-area .local-navi li:first-child a {
        border-top: none;
    }

    .support-info-area .local-navi li:last-child {
        border-bottom: 1px solid #CCCCCC;
    }

}

/* Animate FadeIn ----------------------------------------------------------- */
.support-info-area .local-navi li a {
    position: relative;
}

.support-info-area .local-navi li a::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: .5rem;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border: .2rem solid #135570;
    border-width: 0 .2rem .2rem 0;
    opacity: 0;
    transform: rotate(-45deg);
    transition: .3s ease-in-out;
}

.support-info-area .local-navi li a:hover,
.support-info-area .local-navi li a:active,
.support-info-area .local-navi li a:focus {
    color: #02A5C8;
}

.support-info-area .local-navi li a:hover:after,
.support-info-area .local-navi li a:hover:active,
.support-info-area .local-navi li a:hover:focus {
    opacity: 1;
}

@media (max-width: 767px) {

    .support-info-area .local-navi li a::after {
        opacity: 1;
    }

}

/* Support List ------------------------------------------------------------- */
.support-info-area .support-menu {
    width: 400px;
}

.support-info-area .support-menu ul {
    display: flex;
    justify-content: space-between;
    padding: 0;
    list-style: none;
}

.support-info-area .support-menu li {
    width: calc((100% - 3rem) / 4);
    margin-bottom: 0;
    background-color: #FFFFFF;
}

.support-info-area .support-menu li + li {
    margin-left: 1rem;
}

.support-info-area .support-menu li a {
    display: block;
    padding-top: 8rem;
    background-repeat: no-repeat;
    background-position: center 30%;
    background-size: 50%;
    border: 0.1rem solid #CCCCCC;
    border-radius: .2rem;
    font-size: 1.2rem;
    text-align: center;
    text-decoration: none;
    transition: .3s ease-in-out;
}

.support-info-area .support-menu li a.manual {
    background-image: url("/assets/images/support-icon-manual.png");
}

.support-info-area .support-menu li a.procedure {
    background-image: url("/assets/images/support-icon-procedure.png");
}

.support-info-area .support-menu li a.faq {
    background-image: url("/assets/images/support-icon-faq.png");
}

.support-info-area .support-menu li a.helpdesk {
    background-image: url("/assets/images/support-icon-helpdesk.png");
}

.support-info-area .support-menu li a span {
    display: block;
    padding: .4rem 0;
    background-color: #ECECEC;
}

.support-info-area .support-menu li a:hover,
.support-info-area .support-menu li a:active,
.support-info-area .support-menu li a:focus {
    border-color: #00A1B9;
    color: #135570;
}

.support-info-area .support-menu li a:hover span,
.support-info-area .support-menu li a:active span,
.support-info-area .support-menu li a:focus span {
    background-color: #E2E2E2;
}

@media (min-width: 768px) and (max-width: 950px) {

    .support-info-area > .inner {
        padding: 0 1rem;
    }

}

@media (max-width: 767px) {

    .support-info-area .support-menu {
        width: 100%;
    }

    .support-info-area .support-menu ul {
        width: 100%;
        margin-bottom: 0;
    }

}

/* 6: Page Top
============================================================================= */
#page-top {
    position: fixed;
    right: 1rem;
    margin-bottom: 0;
    opacity: 0;
    transform: translateY(10rem);
    z-index: 2;
}

#page-top a {
    display: block;
    position: relative;
    width: 5rem;
    height: 5rem;
    background-color: rgba(34, 34, 34, 1);
    border: 2px solid #FFFFFF;
    border-radius: .8rem;
    overflow: hidden;
    text-indent: 110%;
    transition: .3s ease-in-out;
    white-space: nowrap;
}

#page-top a::before {
    content: '';
    display:block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.8rem;
    height: 1.8rem;
    margin: -.5rem 0 0 -.9rem;
    border: .3rem solid #FFFFFF;
    border-left-width :0;
    border-top-width: 0;
    transform: rotate(-135deg);
    transition: .3s ease-in-out;
}

#page-top a:hover,
#page-top a:active,
#page-top a:focus {
    background-color: rgba(102, 102, 102, .9);
}

#page-top.UpMove {
    animation: UpAnime .5s forwards;
}

@keyframes UpAnime {

    from {
      opacity: 0;
      transform: translateY(10rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }

}

#page-top.DownMove {
    animation: DownAnime .5s forwards;
}

@keyframes DownAnime {

  from {
      opacity: 1;
    transform: translateY(0);
  }
  to {
      opacity: 1;
    transform: translateY(10rem);
  }

}

/* 7: Footer
============================================================================= */
footer {
    padding: 2rem 0;
    background-color: #222222;
    color: #FFFFFF;
}

footer > .inner {
    display: flex;
    align-items: flex-end;
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 1100px;
    margin: 0 auto;
}

footer > small {
    display: block;
    text-align: center;
}

footer a {
    color: #FFFFFF;
}

@media (max-width: 767px) {

    footer {
        padding: 3rem 1rem;
    }

    footer > .inner {
        flex-direction: column;
        width: 100%;
    }

}

/* Footer Menu ============================================================== */
footer .foot-menu ul {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0;
    list-style: none;
}

footer .foot-menu ul li {
    margin-bottom: 0;
}

footer .foot-menu ul li + li {
    margin-left: 2rem;
    padding-left: 2rem;
    border-left: 1px solid #666666;
}

footer .foot-menu li a {
    padding: .2rem;
    color: #FFFFFF;
}

footer .foot-menu small {
    display: block;
    color: #CCCCCC;
    font-size: 1.1rem;
}


@media (min-width: 768px) and (max-width: 950px) {

    footer > .inner {
        padding: 0 1rem;
    }

}

@media (max-width: 767px) {

    footer .foot-menu {
        width: 100%;
        margin-top: 2rem;
    }

    footer .foot-menu ul {
        flex-direction: column;
        width: 100%;
        align-items: center;
        margin-bottom: 1rem;
    }

    footer .foot-menu ul li {
        width: 100%;
        padding: 0;
    }

    footer .foot-menu ul li + li {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }

    footer .foot-menu li a {
        display: inline-block;
        padding: 1rem 1.6rem;
        text-align: center;
    }

    footer .foot-menu small {
        text-align: center;
    }

}

/* Animate Underline -------------------------------------------------------- */
@media (min-width: 951px) {
    footer .foot-menu li a {
        position: relative;
    }

    footer .foot-menu li a::after {
        content: '';
        position: absolute;
        bottom: -4px;
        right: 0;
        width: 100%;
        height: 1px;
        transform: scale(0, 1);
        transform-origin: center top;
        transition: transform .3s;
    }

    footer .foot-menu li a::after {
        background-color: #FFFFFF;
    }

    footer .foot-menu li a:hover::after,
    footer .foot-menu li a:active::after,
    footer .foot-menu li a:focus::after {
        transform: scale(1, 1);
    }
}

footer .foot-menu li a:hover,
footer .foot-menu li a:active,
footer .foot-menu li a:focus {
    text-decoration: none;
}

/* SNS ====================================================================== */
footer .sns-list h2 {
    margin-bottom: .5em;
    font-size: 1.2rem;
    font-weight: normal;
}

footer .sns-list ul {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
}

footer .sns-list li {
    width: 5rem;
    margin-bottom: 0;
}

footer .sns-list li + li {
    margin-left: 1rem;
}

footer .sns-list a {
    display: block;
    width: 5rem;
    height: 5rem;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    border-radius: 50vh;
    color: #FFFFFF;
    font-size: 1.2rem;
    overflow: hidden;
    text-align: center;
    text-indent: 100%;
    transition: .3s ease-in-out;
    white-space: nowrap;
}

footer .sns-list li.twitter a {
    background-image: url("/assets/logo/logo-twitter.png");
}

footer .sns-list li.facebook a {
    background-image: url("/assets/logo/logo-facebook.png");
}

footer .sns-list li.youtube a {
    background-image: url("/assets/logo/logo-youtube.png");
}

footer .sns-list .twitter a:hover,
footer .sns-list .twitter a:active,
footer .sns-list .twitter a:focus {
    background-color: #1DA1F2;
}

footer .sns-list .facebook a:hover,
footer .sns-list .facebook a:active,
footer .sns-list .facebook a:focus {
    background-color: #4267B2;
}

footer .sns-list .youtube a:hover,
footer .sns-list .youtube a:active,
footer .sns-list .youtube a:focus {
    background-color: #FF0000;
}

@media (max-width: 767px) {
    footer .sns-list {
        width: 100%;
    }

    footer .sns-list h2 {
        text-align: center;
    }

    footer .sns-list ul {
        justify-content: center;
    }

    footer .sns-list li {
        min-width: 0;
    }
}

/* 8: Module
============================================================================= */

/* Text ===================================================================== */

/* Yellow Marker */
.marker {
    display: inline-block;
    padding: 0 1rem;
    background: linear-gradient(transparent 70%, #FFFF00 0%);
}

/* Color */
.text-red {
    color: #FF0000;
}

/* Position ================================================================= */
.align-l {
    text-align: left;
}

.align-c {
    text-align: center;
}

.align-r {
    text-align: right;
}

.valign-t {
    vertical-align: top;
}

.valign-m {
    vertical-align: middle;
}

.valign-b {
    vertical-align: bottom;
}

/* Space ==================================================================== */
.mb00 {
    margin-bottom: 0 !important;
}

.mb10 {
    margin-bottom: 1rem !important;
}

.mb20 {
    margin-bottom: 2rem !important;
}

.mb30 {
    margin-bottom: 3rem !important;
}

.mb40 {
    margin-bottom: 4rem !important;
}

/* Noscript ================================================================= */
.noscript {
    display: block;
    padding: 4rem 1rem;
    font-size: 2rem;
    border-bottom: .1rem solid #222222;
    text-align: center;
}

.noscript :last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {

    .noscript {
        text-align: left;
    }

}

/* Button =================================================================== */

/* Button Animate ----------------------------------------------------------- */
/* Fade In-Out */
[class^='btn-'] a,
[class^='btn-'] .fade {
    display: inline-block;
    position: relative;
    padding: .6rem 1rem;
    overflow: hidden;
    text-align: center;
    transition: .3s ease-in-out;
    vertical-align: top;
    white-space: nowrap;
}

[class^='btn-'] a:hover,
[class^='btn-'] a:active,
[class^='btn-'] a:focus {
    text-decoration: none;
}

@media (max-width: 767px) {

    [class^='btn-'] a,
    [class^='btn-'] .fade {
        display: block;
        padding: 1rem;
        white-space: normal;
    }

}

/* Button Basic ------------------------------------------------------------- */
/* Button Background */
.btn-blue,
.btn-marine {
    text-align: center;
}

.btn-blue a,
.btn-marine a,
.btn-blue span,
.btn-marine span {
    min-width: 80%;
    padding: .6rem 4rem;
    background-color: #2C3840;
    background-position: 2.4em center;
    background-repeat: no-repeat;
    background-size: 2.4rem;
    border-radius: 50vh;
    color: #FFFFFF;
}

.btn-marine a {
    background-color: #1643B6;
}

.btn-blue a:hover,
.btn-blue a:active,
.btn-blue a:focus,
.btn-marine a:hover,
.btn-marine a:active,
.btn-marine a:focus,
a:hover .btn-blue span,
a:active .btn-blue span,
a:focus .btn-blue span,
a:hover .btn-marine span,
a:active .btn-marine span,
a:focus .btn-marine span {
    background-color: #00A1B9;
}

@media (max-width: 767px) {

    .btn-blue a,
    .btn-marine a,
    .btn-blue span,
    .btn-marine span {
        min-width: 30rem;
        padding: 1rem 4rem;
    }

}

/* Button Line */
.btn-line {
    text-align: center;
}

.btn-line a {
    padding: .6rem 4rem;
    border: .1rem solid #135570;
    border-radius: 50vh;
    text-align: center;
    transition: .3s ease-in-out;
}

.btn-line a:hover,
.btn-line a:active,
.btn-line a:focus {
    background-color: #00A1B9;
    border-color: #00A1B9;
    color: #FFFFFF;
}

/* Entry */
.btn-marine.entry a {
    min-width: 30rem;
    padding: 1rem 6rem 1rem 9rem;
    background-image: url("/assets/images/btn-icon-entry.png");
    font-size: 1.6rem;
}

@media (max-width: 767px) {

    .btn-marine.entry a {
        width: 80%;
        margin: 0 auto;
        padding: 1.6rem 4rem 1.6rem 6rem;
        font-size: 1.8rem;
    }

}

/* Button Icon Popup */
a.popup,
a span.popup {
    display: inline-block;
    position: relative;
    padding-right: 5rem;
}

a.popup::before,
a span.popup::before {
    content: '';
    display:block;
    position: absolute;
    top: 50%;
    right: 20px;
    width: 12px;
    height: 12px;
    margin-top: -3px;
    border: 1px solid #1C5572;
    transition: .3s ease-in-out;
}

a.popup::after,
a span.popup::after {
    content: '';
    display:block;
    position: absolute;
    top: 50%;
    right: 25px;
    width: 12px;
    height: 12px;
    margin-top: -8px;
    border: 1px solid #1C5572;
    transition: .3s ease-in-out;
}

.btn-blue .popup::before,
.btn-blue .popup::after,
.btn-marine .popup::before,
.btn-marine .popup::after,
.btn-line .popup:hover:before,
.btn-line .popup:hover::after,
.btn-line .popup:active:before,
.btn-line .popup:active::after,
.btn-line .popup:focus:before,
.btn-line .popup:focus::after {
    border-color: #FFFFFF;
}

/* Global Navigation -------------------------------------------------------- */
.btn-gnav {
    display: none;
    position: relative;
    width: 3.2rem;
    height: 2.6rem;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .btn-gnav {
        display: inline-block;
    }

    .btn-gnav a {
        display: block;
        width: 3.2rem;
        height: 2.6rem;
        overflow: hidden;
    }

    .btn-gnav a::after,
    .btn-gnav a::before {
        content: '';
        position: absolute;
        left: 0;
        width: 3.2rem;
        height: .3rem;
        background-color: #222222;
        border-radius: 50vh;
        transition: .3s ease-in-out;
    }

    .btn-gnav a::after {
        bottom: 0;
    }

    .btn-gnav a::before {
        top: 0;
    }

    .btn-gnav span {
        display: inline-block;
        position: absolute;
        top: 1.2rem;
        left: 0;
        width: 3.2rem;
        height: .3rem;
        background-color: #222222;
        border-radius: .1rem;
        overflow: hidden;
        transition: .3s ease-in-out;
    }

    .btn-gnav a.open::after {
        bottom: 1.1rem;
        transform: rotate(-45deg);
    }

    .btn-gnav a.open::before {
        top: 1.2rem;
        transform: rotate(45deg);
    }

    .btn-gnav a.open span {
        display: none;
    }
}

/* Button Login ------------------------------------------------------------- */
.btn-login a {
    display: block;
    border-radius: .2rem;
    color: #FFFFFF;
    z-index: 0;
}

.btn-login a::after,
.btn-login a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.btn-login a::before {
    background: linear-gradient(#00A3E5, #0D96D5);
    transition: .3s ease-in-out;
    z-index: -1;
}

.btn-login a::after {
    background: linear-gradient(#1643B6, #1643B6);
    z-index: -2;
}

.btn-login a:hover::before,
.btn-login a:active::before,
.btn-login a:focus:before {
    opacity: 0;
}

/* Accordion ================================================================ */
.accordion-01 {
    margin-top: 2rem;
    border: 1px solid #CCCCCC;
    border-radius: .4rem;
}

.accordion-01 .title {
    position: relative;
    margin-bottom: 0;
    padding: 1rem;
}

.accordion-01 .title::before {
    content: '';
    position: absolute;
    top: 50%;
    right: .9rem;
    width: 1.5rem;
    height: .1rem;
    margin-top: .1rem;
    background-color: #222222;
}

.accordion-01 .title::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 1.6rem;
    width: .1rem;
    height: 1.5rem;
    margin-top: -.6rem;
    background-color: #222222;
    transition: all 0.4s;
}

.accordion-01 .title:hover,
.accordion-01 .title:active,
.accordion-01 .title:focus {
    background-color: #F9F9F9;
    cursor: pointer;
    transition: .3s ease-in-out;
}

.accordion-01 .title.open {
    background-color: #ECECEC;
}

.accordion-01 .title.open:hover,
.accordion-01 .title.open:active,
.accordion-01 .title.open:focus {
    background-color: #ECECEC;
}

.accordion-01 .title.open::after  {
    transform: rotate(90deg);
}

.accordion-01 .title + ul {
    display: none;
    padding: 1.5rem 1rem;
    font-size: 1.2rem;
    list-style: none;
}

.accordion-01 .title + ul :last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .accordion-01 .title + ul {
        font-size: 1.4rem;
    }
}

/* 9: CSS Icon
============================================================================= */
[class^='icon-'],
[class^='icon- '] {
    display: inline-block;
    position: relative;
    width: 1.8rem;
    height: 1.8rem;
    margin-right: .6em;
    vertical-align: middle;
}

[class^='icon-']::after,
[class^='icon- ']::after,
[class^='icon-']::before,
[class^='icon- ']::before {
    content: '';
    display: block;
    position: absolute;
}

.icon-arrow-r {
    background-color: #1C5572;
}

.icon-arrow-r::after {
    top: .5rem;
    left: .4rem;
    width: .6rem;
    height: .6rem;
    border: .1rem solid #FFFFFF;
    border-width: 0 .2rem .2rem 0;
    transform: rotate(-45deg);
}

.icon-home {
    margin-left: .3rem;
}

.icon-home::before {
    top: .4rem;
    left: 0;
    width: 1.4rem;
    height: 1.4rem;
    border: .1rem solid #FFFFFF;
    border-width: 0 .1rem .1rem 0;
    transform: rotate(-135deg);
}

.icon-home::after {
    top: .9rem;
    left: 0;
    width: 1.4rem;
    height: .8rem;
    border: .1rem solid #FFFFFF;
    border-top: 0;
}

.icon-service {
    border: .1rem solid #FFFFFF;
}

.icon-service::after,
.icon-service::before {
    width: .3rem;
    height: .1rem;
    left: .3rem;
    box-shadow: 0 0.4rem 0, 0 0.8rem 0, 0 1.2rem 0;
}

.icon-service::after {
    width: .6rem;
    left: .7rem;
}

.icon-news {
    border: .1rem solid #FFFFFF;
    border-radius: 50vh;
}

.icon-news::after {
    content: 'i';
    top: .2rem;
    left: .7rem;
    color: #FFFFFF;
    font-size: 1.2rem;
    line-height: 1em;
}

.icon-procedure {
    border: .1rem solid #FFFFFF;
}

.icon-procedure::after {
    top: .8rem;
    left: .6rem;
    width: .8rem;
    height: .4rem;
    border: .2rem solid #FFFFFF;
    border-width: .2rem .2rem 0 0;
    transform: rotate(135deg);
}

.icon-procedure::before {
    left: .3rem;
    width: .8rem;
    height: .1rem;
    box-shadow: 0 .4rem 0, 0 .8rem 0;
}

.icon-faq {
    border: .1rem solid #FFFFFF;
    border-radius: 50vh;
}

.icon-faq::after {
    content: '?';
    top: .2rem;
    left: .6rem;
    color: #FFFFFF;
    font-size: 1.2rem;
    line-height: 1em;
}

.icon-help {
    background-color: #222222;
    border-radius: 50vh;
}

.icon-help::after {
    content: '?';
    top: .3rem;
    left: .65rem;
    color: #FFFFFF;
    font-size: 1.2rem;
    line-height: 1em;
}

.icon-login,
.icon-login-wh {
    border: .1rem solid #222222;
    border-right: 0;
}

.icon-login::after,
.icon-login-wh::after {
    width: .7rem;
    height: .7rem;
    top: .5rem;
    left: .6rem;
    border: .1rem solid #222222;
    border-width:  .1rem .1rem 0 0;
    transform: rotate(-135deg);
}

.icon-login::before,
.icon-login-wh::before {
    top: .8rem;
    left: .6rem;
    width: 1rem;
    height: .1rem;
    background-color: #222222;
}

.icon-login-wh,
.icon-login-wh::after {
    border-color: #FFFFFF;
}

.icon-login-wh::before {
    background-color: #FFFFFF;
}

.icon-price {
    margin-top: -.5rem;
    border: .1rem solid #00A3E5;
}

.icon-price::after  {
    content: '\0a5';
    top: .12rem;
    left: .4rem;
    color: #00A3E5;
    font-size: 1.2rem;
    line-height: 1em;
}

.icon-document {
    margin-top: -.5rem;
    border: .1rem solid #00A3E5;
    border-top-right-radius: .6rem;
}

.icon-document::before {
    top: .2rem;
    left: .4rem;
    box-shadow: 0 .4rem 0, 0 .7rem 0, 0 1rem 0;
    width: .8rem;
    height: .1rem;
    color: #00A3E5;
}

.icon-document::after {
    top: -.1rem;
    right: 0;
    width: .6rem;
    height: .5rem;
    border: .1rem solid #00A3E5;
    border-width: 0 0 .1rem .1rem;
}

.icon-setting {
    border-radius: 100%;
    box-shadow: inset 0 0 0 .5rem;
    color: #222222;
}

.icon-setting::after,
.icon-setting::before {
    width: .3rem;
    height: .3rem;
    top: 50%;
    left: 50%;
    box-shadow: .8rem 0, -.8rem 0, 0 .8rem, 0 -.8rem;
    color: #FFFFFF;
}

.icon-setting::after {
    transform: translate(-50%, -50%) rotate(45deg);
}

.icon-setting::before {
    transform: translate(-50%, -50%);
}

.icon-database,
.icon-database-wh {
    height: 1.2rem;
    box-shadow: inset .065em 0, inset -.065em 0;
    color: #00A3E5;
}

.icon-database-wh {
    color: #FFFFFF;
}

.icon-database::before,
.icon-database::after,
.icon-database-wh::before,
.icon-database-wh::after {
    top: -.4rem;
    width: 1.8rem;
    height: .5rem;
    border-radius: 50vh;
    box-shadow: inset 0 0 0 .1rem;
}

.icon-database::after,
.icon-database-wh::after {
    top: .8rem;
}

.icon-tag {
    width: 1.6rem;
    height: 1.5rem;
    margin-left: .3rem;
    border: .1rem solid #00A3E5;
    border-right: 0;
    transform: rotate(-135deg);
}

.icon-tag::before {
    top: .4rem;
    left: 1.3rem;
    width: .4rem;
    height: .4rem;
    border: .1rem solid #00A3E5;
    border-radius: 100%;
}

.icon-tag:after {
    top: 0.1rem;
    right: -0.6rem;
    width: 1.2rem;
    height: 1.2rem;
    border: .1rem solid #00A3E5;
    border-width: 0 .1rem .1rem 0;
    border-bottom-right-radius: .4rem;
    transform: rotate(-45deg);
}

.icon-search {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: -.8rem;
    border: .1rem solid #00A3E5;
    border-radius: 50vh;
}

.icon-search::after {
    top: .95rem;
    left: 1.6rem;
    width: .1rem;
    height: .9rem;
    background-color: #00A3E5;
    transform: rotate(-45deg);
}

.icon-pdf {
    width: auto;
    height: auto;
    margin: -.24% .6em 0 .6em;
    padding: .2rem .8rem;
    border: .1rem solid #B30B00;
    color: #B30B00;
    font-size: 1.1rem;
    line-height: 1;
}

a .icon-pdf:last-child {
    margin-right: 0;
}

@media (max-width: 767px) {

    .icon-pdf {
        font-size: 1.3rem;
    }

}