@charset "utf-8";

/* ===== style.css ===== */
/* -- font -- */
/* Archivo */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');

/* -- html -- */
html {
    font-size: 10px;
}
@media screen and ( max-width: 900px ) {
    html {
        font-size: 9px;
    }
}

/* -- body -- */
body {
    color: #115680;
    word-break: keep-all;
    font: 16px/1.5 "Archivo", sans-serif;
    background: #00629D;
}
@media screen and ( min-width: 901px ) and ( max-width: 1220px ) {
    body {
        word-break: break-all;
    }
}

@media screen and ( max-width: 900px ) {
    body {
        font-size: 14px;
    }
}

/* -- wrapper -- */
.wrapper::after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    height: 800px;
    background: url(../img/common/bg.png) repeat center top / 120px auto;
    opacity: .1;
    content: "";
    z-index: -10;
}
@media screen and ( max-width: 900px ) {
    .wrapper::after {
        height: 812px;
    }
}

/* -- inner -- */
.inner {
    margin: 0 auto;
    width: 100%;
    max-width: 1100px;
    box-sizing: border-box;
}
@media screen and ( max-width: 1190px ) {
    .inner {
        margin: 0 15px;
        width: auto;
    }
}


/*
    tag
*/
/* -- a -- */
a {
    color: #115680;
    text-decoration: underline;
    transition: opacity .6s;
}
@media screen and ( min-width: 901px ) {
    a:hover {
        opacity: .7;
    }
}

/* -- img -- */
img {
    max-width: 100%;
    height: auto;
}
@media screen and ( max-width: 900px ) {
    img {
        max-width: none;
        width: 100%;
    }
}


/*
    common
*/
/* -- hide -- */
@media screen and ( min-width: 901px ) {
    .pc_hide { display: none!important; }
}
@media screen and ( max-width: 900px ) {
    .sp_hide { display: none!important; }
}

/* - margin -- */
.mt0 { margin-top: 0!important; }
.mt5 { margin-top: .5rem!important; }
.mt3 { margin-top: .3rem!important; }
.mt13 { margin-top: 1.3rem!important; }
.mt18 { margin-top: 1.8rem!important; }
.mt36 { margin-top: 3.6rem!important; }
.mt55 { margin-top: 5.5rem!important; }

/* text-decoration */
.tdU { text-decoration: underline!important; }
@media screen and ( min-width: 901px ) {
    .tdU:hover {
        text-decoration: none!important;
        opacity: 1;
    }
}

/* - font -- */
.ffNS { font-family: "noto-sans-cjk-jp", sans-serif; }
.fz15 { font-size: 1.5rem!important; }
.fwN { font-weight: normal!important; }


/*
    header
*/
header {
    display: flex;
    align-items: flex-start;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    padding-bottom: 31px;
    z-index: 1000;
}
header > * {
    position: relative;
    z-index: 30;
}
/* open */
header.open {
    position: fixed;
}
/* - header_logo - */
.header_logo {
    padding: 30px 0 0 39px;
}
.header_logo a {
    display: block;
    position: relative;
}
.header_logo img.color {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .6s;
}
/* - gnav - */
#gnav {
    margin: 0 0 0 auto;
    padding: 34px 40px 0 40px;
    z-index: 20;
}
/* gnavBtn */
#gnavBtn {
    position: relative;
    width: 30px;
    z-index: 20;
}
#gnavBtn a {
    display: block;
    position: relative;
    height: 28px;
}
#gnavBtn span {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 30px;
    height: 4px;
    background: #fff;
    transition: width .6s, background .6s, transform .15s;
}
#gnavBtn span:nth-child(1) {
    top: 0;
    bottom: auto;
}
#gnavBtn span:nth-child(2) {
    margin-right: 0;
    width: 15px;
}
#gnavBtn span:nth-child(3) {
    top: auto;
    bottom: 0;
}
/* open */
header.open #gnavBtn span {
    top: 0;
    bottom: 0;
    width: 30px;
    transform: rotate(45deg);
    background: #115680;
}
header.open #gnavBtn span:nth-child(3) {
    transform: rotate(-45deg);
}
/* gnavCnt */
#gnavCnt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    z-index: 10;
}
.gnavCnt_linkList {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-right: 39px;
    padding-top: 2px;
}
.gnavCnt_linkList li:not(:last-child) {
    margin-right: 40px;
}
.gnavCnt_linkList a {
    text-decoration: none;
    font-weight: bold;
    color: #FFF;
    transition: color .6s;
}
.gnavCnt_contactBtn {
    width: 118px;
}
.gnavCnt_contactBtn a {
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    color: #115680;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 10px 0;
    height: 42px;
    background: #E2FF00;
    border: 1px solid #E2FF00;
    border-radius: 10rem;
    transition: color .6s, background .6s;
}
/* - header_link - */
.header_link {
    padding: 43px 39px 0 0;
}
.header_link a {
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
    color: #FFF;
    transition: color .6s;
}
.header_link svg {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin-left: 5px;
    width: 8px;
    fill: #fff;
    transition: fill .6s;
}
/* open */
header.open .header_link a {
    color: #115680;
}
header.open .header_link svg {
    fill: #115680;
}
@media screen and ( min-width: 901px ) {
    /* - gnav - */
    #gnavBtn {
        display: none;
    }
    /* gnavCnt */
    /* hover */
    .gnavCnt_linkList a:hover {
        color: #E2FF00;
        opacity: 1;
    }
    .gnavCnt_contactBtn a:hover {
        color: #E2FF00;
        background: #115680;
        opacity: 1;
    }
    /* - header_link - */
    /* hover */
    .header_link a:hover {
        color: #E2FF00;
        opacity: 1;
    }
    .header_link a:hover svg {
        fill: #E2FF00;
    }
}
@media screen and ( min-width: 901px ) and ( max-width: 1220px ) {
    /* - gnav - */
    #gnav {
        padding-right: 20px;
    }
    /* gnavCnt_linkList */
    .gnavCnt_linkList {
        font-size: 12px;
        margin-right: 8px;
    }
    .gnavCnt_linkList li:not(:last-child) {
        margin-right: 15px;
    }
    .gnavCnt_contactBtn {
        font-size: 12px;
        width: 85px;
    }
}
@media screen and ( max-width: 900px ) {
    header {
        padding-bottom: 25px;
    }
    /* - header_logo - */
    .header_logo {
        padding: 18px 0 0 20px;
        order: 1;
    }
    .header_logo img {
        width: 155px;
    }
    /* open */
    header.open .header_logo img.color {
        opacity: 1;
    }
    /* - gnav - */
    #gnav {
        margin: 0;
        padding: 25px 25px 0 0;
        order: 3;
    }
    /* gnavCnt */
    #gnavCnt {
        display: none;
        position: fixed;
        overflow-y: scroll;
        top: 0;
        right: 0;
        left: 0;
        margin: 0 auto;
        padding: 157px 51px 50px;
        height: 100vh;
        background: #fff;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    #gnavCnt::-webkit-scrollbar {
      display: none;
    }
    .gnavCnt_linkList {
        display: block;
        margin-right: 0;
        padding-top: 0;
    }
    .gnavCnt_linkList li:not(:last-child) {
        margin: 0 0 33px;
    }
    .gnavCnt_linkList a {
        font-size: 18px;
        color: #115680;
    }
    .gnavCnt_contactBtn {
        margin-top: 76px;
        width: 100%;
    }
    .gnavCnt_contactBtn a {
        font-size: 16px;
        padding: 0 10px;
        height: 51px;
    }
    /* - header_link - */
    .header_link {
        margin: 0 0 0 auto;
        padding: 28px 29px 0 0;
        order: 2;
    }
}


/*
    footer
*/
footer {
    padding: 106px 0 128px;
    background: #115680;
}
#top footer {
    border-top: 1px solid #fff;
}
/* - footer_box01 - */
.footer_box01 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.footer_box01 > * {
    text-align: center;
}
.footer_box01 > :not(:last-child) {
    margin-right: 8.8%;
}
.footer_box01 a {
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -.07em;
    color: #FFF;
    display: block;
    transition: color .6s;
}
.footer_box01 svg {
    display: block;
    margin: 0 auto 19px;
    height: 28px;
    width: auto;
    fill: #fff;
    transition: fill .6s;
}
/* download */
.footer_box01 .download svg {
    height: 24px;
    margin-bottom: 23px;
}
/* - footer_box02 - */
.footer_box02 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 106px;
    padding: 61px 30px 0;
    border-top: 1px solid #fff;
}
/* footer_box02_lbox */
.footer_box02_lbox {
    margin: 50px 30px 0 0;
}
.footer_box02_lbox ul {
    display: flex;
    flex-wrap: wrap;
}
.footer_box02_lbox a {
    text-decoration: none;
    color: #FFF;
    transition: color .6s;
}
.footer_box02_lbox .sub {
    margin-top: 32px;
}
.footer_box02_lbox .sub a {
    font-size: 14px;
}
.footer_box02_lbox .sub a svg {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin-left: 5px;
    width: 8px;
    fill: #fff;
    transition: fill .6s;
}
/* footer_box02_rbox */
.footer_box02_rbox {
    margin-top: 53px;
}
.footer_box02_rbox_logo {
    text-align: right;
}
.copyright {
    font-weight: bold;
    font-size: 12px;
    color: #FFF;
    margin-top: 28px;
    opacity: 0.3;
}
@media screen and ( min-width: 901px ) {
    /* - footer_box01 - */
    /* hover */
    .footer_box01 a:hover {
        color: #E2FF00;
        opacity: 1;
    }
    .footer_box01 a:hover svg {
        fill: #E2FF00;
    }
    /* - footer_box02 - */
    /* footer_box02_lbox */
    .footer_box02_lbox ul > :not(:last-child) {
        margin-right: 30px;
    }
    /* hover */
    .footer_box02_lbox a:hover {
        color: #E2FF00;
        opacity: 1;
    }
    .footer_box02_lbox .sub a:hover svg {
        fill: #E2FF00;
    }
}
@media screen and ( max-width: 900px ) {
    footer {
        padding: 57px 0 97px;
    }
    /* - footer_box01 - */
    .footer_box01 {
        display: block;
        margin: 0 auto;
        padding: 0 20px;
        width: fit-content;
    }
    .footer_box01 > * {
        text-align: left;
    }
    .footer_box01 > :not(:last-child) {
        margin: 0 0 40px;
    }
    .footer_box01 a {
        text-align: left;
        font-size: 30px;
        display: inline-block;
        position: relative;
        padding-left: 55px;
    }
    .footer_box01 svg {
        display: inline-block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto 0;
        height: 26px;
    }
    /* faq */
    .footer_box01 .faq svg {
        top: 3px;
    }
    /* download */
    .footer_box01 .download svg {
        margin-bottom: 0;
        height: 26px;
    }
    /* - footer_box02 - */
    .footer_box02 {
        display: block;
        margin-top: 69px;
        padding: 45px 30px 0;
    }
    /* footer_box02_lbox */
    .footer_box02_lbox {
        margin-right: 0;
    }
    .footer_box02_lbox ul {
        display: flex;
        flex-wrap: wrap;
    }
    .footer_box02_lbox ul > * {
        margin-bottom: 23px;
        width: 50%;
    }
    .footer_box02_lbox ul > :nth-child(2n) {
        margin-left: 10%;
        width: 40%;
    }
    .footer_box02_lbox ul > :last-child,
    .footer_box02_lbox ul > :nth-last-child(2) {
        margin-bottom: 0;
    }
    .footer_box02_lbox .sub {
        margin-top: 50px;
    }
    .footer_box02_lbox .sub a {
        font-size: 12px;
    }
    /* footer_box02_rbox */
    .footer_box02_rbox {
        margin-top: 49px;
    }
    .footer_box02_rbox_logo {
        text-align: left;
        width: 190px;
    }
    .copyright {
        font-weight: normal;
        font-size: 10px;
        margin: 26px 0 0 -5px;
    }
}



/*
    contents
*/
#contents {
    padding-bottom: 30px;
}
@media screen and ( max-width: 900px ) {
    #contents {
        padding-bottom: 15px;
    }
}

/* -- tag / txtLink -- */
#contents a {
    word-break: break-all;
    text-decoration: none;
}
#contents a[target="_blank"]:not(.noTicon) svg,
a.txtLink svg,
a.txtLink_pdf svg {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin-left: 5px;
    width: 8px;
    fill: #115680;
}
/* - txtLink_pdf - */
a.txtLink_pdf svg {
    width: 9px;
    fill: #ED4A49;
}

/* -- pageTitBox -- */
.pageTitBox {
    margin: 0 auto;
    max-width: 1400px;
    padding: 91px 76px 0;
    opacity: 0;
    transform: translateY(50px); 
    transition: opacity 0.6s, transform 0.6s;
}
.pageTitBox h1 {
    font-weight: bold;
    font-size: 90px;
    line-height: 1;
    letter-spacing: -.07em;
    color: #FFF;
}
/* - on - */
.on.pageTitBox {
    transform: translateY(0); 
    opacity: 1;
}
@media screen and ( max-width: 900px ) {
    .pageTitBox {
        padding: 5px 30px 0;
    }
    .pageTitBox h1 {
        font-size: 50px;
    }
}

/* -- main -- */
.main {
    margin: 134px auto 0;
    padding: 117px 0 116px;
    max-width: 1340px;
    background: #FFF;
    border-radius: 20px;
    opacity: 0;
    transform: translateY(50px); 
    transition: opacity 0.6s, transform 0.6s;
}
.main > .inner:first-child > :first-child {
    margin-top: 0;
}
/* - main - */
.on.main {
    transform: translateY(0); 
    opacity: 1;
}
/* mtS */
.mtS.main {
    margin-top: 28px;
}
@media screen and ( max-width: 1400px ) {
    .main {
        margin: 134px 30px 0;
    }
}
@media screen and ( max-width: 900px ) {
    .main {
        margin: 50px 15px 0;
        padding: 30px 0;
    }
}

/* -- h -- */
/* h2 */
h2 {
    font-weight: bold;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.07em;
    margin: 117px 0 38px;
}
/* h3 */
h3 {
    font-weight: bold;
    font-size: 20px;
    line-height: 1.2;
    margin: 42px 0 17px;
}
@media screen and ( min-width: 901px ) {
    /* h3 */
    h3.mS {
        margin: 19px 0 16px;
    }
}
@media screen and ( max-width: 900px ) {
    /* h2 */
    h2 {
        font-size: 28px;
        margin: 60px 0 30px;
    }
    /* h3 */
    h3 {
        font-size: 18px;
        margin: 35px 0 10px;
    }
}

/* -- iconBox -- */
.iconBox {
    line-height: 1.42;
    position: relative;
    padding-left: 2.6rem
}
.iconBox svg {
    position: absolute;
    top: 3px;
    left: 0;
    width: 15px;
    fill: #00629D;
}


/* -- btnN -- */
.btnN {
    margin-top: 40px;
}
.btnN a {
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
    color: #115680;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 10px 0;
    width: 100%;
    height: 62px;
    background: #E2FF00;
    border: 1px solid #E2FF00;
    border-radius: 10rem;
    transition: color .6s, background .6s;
}
.btnN svg {
    margin-right: 14px;
    fill: #115680;
    transition: fill .6s;
}
/* - mail - */
.mail.btnN svg {
    width: 24px;
}
/* - faq - */
.faq.btnN svg {
    width: 22px;
}
/* - download - */
.download.btnN svg {
    width: 29px;
}
/* - ptrn2 - */
.ptrn2.btnN a {
    font-size: 16px;
    color: #7E7E7E;
    background: #fff;
    border-color: #F2F2F2;
    border-width: 2px;
}
.ptrn2.btnN svg {
    fill: #7E7E7E;
}
/* - btnN_Crm2 - */
.btnN_Crm2 {
    display: flex;
    flex-wrap: wrap;
}
.btnN_Crm2 .btnN {
    margin-top: 20px;
}
@media screen and ( min-width: 901px ) {
    /* hover */
    .btnN a:hover {
        color: #E2FF00;
        background: #115680;
        opacity: 1;
    }
    .btnN a:hover svg {
        fill: #E2FF00;
    }
    /* - ptrn2 - */
    .ptrn2.btnN a:hover  {
        color: #fff;
        background: #7E7E7E;
    }
    .ptrn2.btnN a:hover svg {
        fill: #fff;
    }
    /* - btnN_Crm2 - */
    .btnN_Crm2 > .btnN {
        width: calc((100% - 10px) / 2);
    }
    .btnN_Crm2 > .btnN:not(:nth-child(2n)) {
        margin-right: 10px;
    }
}
@media screen and ( max-width: 900px ) {
    .btnN {
        margin-top: 30px;
    }
    .btnN a {
        font-size: 18px;
        align-items: center;
    }
    .btnN svg {
        position: relative;
        top: -2px;
        margin-right: 10px;
    }
    /* - mail - */
    .mail.btnN svg {
        width: 20px;
    }
    /* - faq - */
    .faq.btnN svg {
        width: 18px;
    }
    /* - download - */
    .download.btnN svg {
        width: 25px;
    }
    /* - ptrn2 - */
    .ptrn2.btnN a {
        font-size: 14px;
    }
    /* - btnN_Crm2 - */
    .btnN_Crm2 {
        display: block;
        margin-top: 20px;
    }
    .btnN_Crm2 > .btnN {
        margin-top: 10px;
        width: 100%;
    }
}

/* -- txtBox -- */
.txtBox > *:not(:last-child) {
    margin-bottom: 53px;
}
/* - mbS - */
.mbS.txtBox > *:not(:last-child) {
    margin-bottom: 2px;
}
/* - mbM - */
.mbM.txtBox > *:not(:last-child) {
    margin-bottom: 33px;
}
/* - mbL - */
.mbL.txtBox > *:not(:last-child) {
    margin-bottom: 43px;
}
@media screen and ( max-width: 900px ) {
    .txtBox > *:not(:last-child) {
        margin-bottom: 20px;
    }
    /* - min - */
    .min.txtBox > *:not(:last-child) {
        margin-bottom: 8px;
    }
    /* - big - */
    .big.txtBox > *:not(:last-child) {
        margin-bottom: 30px;
    }
}

/* -- list -- */
.list > li {
    position: relative;
    padding-left: 17px;
}
.list > li:not(:last-child) {
    margin-bottom: 3px;
}
.list > li::before {
    display: block;
    position: absolute;
    top: .45em;
    left: 0;
    width: .45em;
    height: .45em;
    background: #115680;
    border-radius: 50%;
    content: "";
}
@media screen and ( max-width: 900px ) {
    .list > li {
        padding-left: 12px;
    }
    .list > li:not(:last-child) {
        margin-bottom: 8px;
    }
}
/* - listNum - */
.listNum {
    list-style-type: decimal;
    padding-left: 1em;
}
.listNum > li:not(:last-child) {
    margin-bottom: 3px;
}
/* - listCome - */
.listCome > li {
    font-weight: 500;
    font-size: 12px;
    position: relative;
    padding-left: .5em;
}
.listCome > li:before {
    position: absolute;
    top: .1em;
    left: .1em;
    content: "*";
}
.listCome > li:not(:last-child) {
    margin-bottom: .6rem;
}

/* -- crmBox -- */
.crmBox {
    display: flex;
    justify-content: space-between;
}
.crmBox > .boxL > :first-child {
    margin-top: 0;
}
/* - inner - */
.inner > .crmBox:not(:last-child) {
    margin-bottom: 120px;
}
@media screen and ( min-width: 901px ) {
    .crmBox > .boxL {
        margin-top: 1px;
        width: 220px;
    }
    .crmBox > .boxR {
        width: calc(100% - 260px);
    }
}
@media screen and ( max-width: 900px ) {
    .crmBox {
        display: block;
    }
    .crmBox > .boxR {
        margin-top: 30px;
    }
    /* - inner - */
    .inner > .crmBox:not(:last-child) {
        margin-bottom: 80px;
    }
}

/* - crmTxtImgBox - */
.crmTxtImgBox {
    display: flex;
}
.crmTxtImgBox > * > :first-child {
    margin-top: 0;
}
@media screen and ( min-width: 901px ) {
    .crmTxtImgBox > * {
        width: calc((100% - 40px) / 2);
    }
    .crmTxtImgBox > *:not(:nth-child(2n)) {
        margin-right: 40px;
    }
}
@media screen and ( max-width: 900px ) {
    .crmTxtImgBox {
        display: block;
    }
    .crmTxtImgBox > .img {
        margin-top: 15px;
    }
}

/* - crmBox2 - */
.crmBox2 {
    display: flex;
    flex-wrap: wrap;
}
@media screen and ( min-width: 901px ) {
    .crmBox2 {
        margin-bottom: -60px;
    }
    .crmBox2 > * {
        margin-bottom: 60px;
        width: calc((100% - 40px) / 2);
    }
    .crmBox2 > *:not(:nth-child(2n)) {
        margin-right: 40px;
    }
    
}
@media screen and ( max-width: 900px ) {
    .crmBox2 > * {
        width: 100%;
    }
    .crmBox2 > *:not(:last-child) {
        margin-bottom: 40px;
    }
}

/* - crmBox3 - */
.crmBox3 {
    display: flex;
    flex-wrap: wrap;
}
@media screen and ( min-width: 901px ) {
    .crmBox3 > * {
        width: calc((100% - 84px) / 3);
    }
    .crmBox3 > *:not(:nth-child(3n)) {
        margin-right: 42px;
    }
}
@media screen and ( max-width: 900px ) {
    .crmBox3 > * {
        width: 100%;
    }
    .crmBox3 > *:not(:last-child) {
        margin-bottom: 40px;
    }
}

/* -- tableBox -- */
.tableBox {
    margin-top: 50px;
}
.tableBox table {
    overflow: hidden;
    width: 100%;
    border: 1px solid #CDD9E0;
    border-radius: 16px;
    border-collapse: separate;
    border-spacing: 0;
}
.tableBox table > * > tr > * {
    padding: 23px 19px 22px;
}
.tableBox table > * > tr > *:not(:last-child) {
    border-right: 1px solid #CDD9E0;
}
.tableBox table > * > tr:not(:last-child) > * {
    border-bottom: 1px solid #CDD9E0;
}
.tableBox table > * > tr > th {
    font-weight: 500;
    color: #FFF;
    width: 280px;
    background: #00629D;
}
.tableBox table > * > tr > td {
    background: #EBF1F5;
}
/* - fixed - */
.tableBox.fixed table {
    table-layout: fixed;
}
.tableBox.fixed table > * > tr > th {
    width: auto;
}
/* - bg - */
.tableBox table .bg > tr > th {
    color: #115680;
    background: #EBF1F5;
}
.tableBox table .bg > tr > td {
    background: #fff;
}
/* - bdr - */
.tableBox table .bdr > tr > th {
    border-right-color: #00629D;
}
/* - flxCenter - */
.tableBox table > * > tr > th.flxCenter {
    position: relative;
    padding: 0;
}
.tableBox table > * > tr > th.flxCenter span {
    line-height: 1.1875;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    padding: 0 19px;
}
/* - color2 - */
.tableBox table > * > tr > th.color2 {
    color: #FFFFFF;
    background: #ABD132;
}
.tableBox table > * > tr > td.color2 {
    background: #FBFFDB;
}
@media screen and ( max-width: 900px ) {
    .tableBox table > * > tr > * {
        padding: 10px;
    }
    .tableBox table > * > tr > th {
        width: 145px;
    }
    /* - flxCenter - */
    .tableBox table > * > tr > th.flxCenter span {
        display: block;
        position: static;
        padding: 10px;
    }
    /* - spWidth - */
    .spWidth.tableBox {
        overflow-x: scroll;
    }
    .spWidth.tableBox table {
        width: 900px;
    }
}

/* -- tabBox -- */
.tabBox {
    margin-top: 108px;
    padding: 0;
    background: none;
    border-radius: 0;
}
/* - tabBox_btn - */
.tabBox_btn {
    display: flex;
}
.tabBox_btn > * {
    width: 100%;
    background: #84A9BF;
    border-radius: 20px 20px 0 0;
    transition: background .6s;
}
.tabBox_btn a {
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.07em;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 103px;
    padding: 2px 15px 0;
    transition: color .6s, opacity .6s;
}
/* act */
.tabBox_btn > *.act {
    background: #FFF;
}
.tabBox_btn > *:not(.act) a {
    color: #FFF;
}
/* - tabBox_cnt - */
.tabBox_cnt {
    padding: 119px 0 120px;
    border-radius: 0 0 20px 20px;
    background: #FFF;
}
/* act */
.tabBox_cnt > *:not(.act) {
    display: none;
}
@media screen and ( min-width: 901px ) {
    /* - tabBox_btn - */
    .tabBox_btn > *:not(:last-child) {
        margin-right: 4px;
    }
}
@media screen and ( max-width: 900px ) {
    .tabBox {
        margin-top: 30px;
    }
    /* - tabBox_btn - */
    .tabBox_btn a {
        font-size: 18px;
        height: 60px;
    }
    /* - tabBox_cnt - */
    .tabBox_cnt {
        padding: 30px 0;
    }
}

/* -- youtube -- */
.youtube {
    margin: 0 auto 0;
}
.youtube > * {
    position: relative;
    padding-top: 56.25%;
    width: 100%;
}
.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/* -- blogBox_catecory -- */
.blogBox_catecory {
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
}
.blogBox_catecory li:not(:last-child) {
    margin-right: 10px;
}
.blogBox_catecory li::before {
    display: inline-block;
    margin-right: 3px;
    width: 7px;
    height: 7px;
    content: "";
}
.blogBox_catecory .np::before { background: #8DAE74; }
.blogBox_catecory .tps::before { background: #9487F8; }


/* -- blogBox_day -- */
.blogBox_day {
    font-size: 10px;
    color: #777;
}


/*
    js
*/
.fadeUp {
    opacity: 0;
    transform: translateY(50px); 
    transition: opacity 0.6s, transform 0.6s;
}
.on.fadeUp {
    transform: translateY(0); 
    opacity: 1;
}