@charset "utf-8";
/* ##### custmize common ##### */
.cstm_fontS { font-size: 0.93rem; }
.cstm_fontL { font-size: 1.25rem; }
.cstm_fontXL { font-size: 1.5rem; }
.cstm_fontXXL { font-size: 2rem; }
.cstm_weightB { font-weight: bold; }
.cstm_colorLB { color: #5088c3; }
.cstm_colorB { color: #002C6A; }
.cstm_colorY { color: #FFFF00; }

.cstm_box {
    border: 3px solid #cbdcee;
    padding: 1rem;
}
.cstm_box2 { padding: 0 1rem; }
.cstm_boxttl {
    margin-top: -1rem;
    margin-left: -1rem;
    margin-right: -1rem;
    margin-bottom: 1.5rem;
    text-align: center;
    padding: 1.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    background: #e0e0e0;
}
.cstm_box + .cstm_box { margin-top: 1rem; }

.cstm_vcenter {
    display: flex;
    align-items: center;
}

/* ## add arrow ## */
.cstm_addArrowDown { position: relative; }
.cstm_addArrowDown:after {
    content: "";
    height: 1.45em;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: auto;
    background: url("images/arrow_down.png") center top no-repeat;
    background-size: contain;
}
.cstm_addArrowLeftRight {
    display: block;
    padding-left: 1.5em;
    background: url("images/arrow_right.png") 0.25em center no-repeat;
    background-size: contain;
} 


/* ## ttl/lead ## */
.cstm_ttlwrap {
    text-align: center;
}
.comm_secTtl {
    font-size: 1.75rem;
    background: #002C6A;
    margin-top: 1rem;
}
.comm_secSubTtlStrong {
    font-size: 1.5rem;
    border-top: 3px solid #002C6A;
    border-bottom: 3px solid #002C6A;
}
.comm_secSubTtlStrong-fit {
    margin-left: 0;
    margin-right: 0;
}
.cstm_lead {
    text-align: left;
    max-width: 900px;
    margin: 2rem auto 0 auto;
    padding: 0 20px
}

/* ## img ## */
img.cstm_max800 { width: 800px; padding: 1rem 0; }
img.cstm_max700 { width: 700px; padding: 1rem 0; }
img.cstm_max600 { width: 600px; padding: 1rem 0; }

/* ## feat box ## */
.cstm_featbox {
    display: block;
    background: #5088c3;
    color: #ffffff;
    text-align: center;
    font-weight: bold;
    padding: 0.25em 1em;
    margin-top: 0.5rem;
    border-radius: 1.75em
}
.cstm_featbox-B {
    background: #002C6A;
}

/* ## dl ## */
.cstm_dlFeat {
    display: flex;
    font-size: 1.25rem;
}
.cstm_dlFeat + .cstm_dlFeat { margin-top: 1rem; }
.cstm_dlFeat dt {
    background: #5088c3;
    color: #ffffff;
    justify-content: center;
    width: 10em;
    padding: 0.75em 0.5em;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.cstm_dlFeat dd {
    padding: 0.75em 0.5em 0.75em 1.5em;
    text-align: left;
    flex: 1;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.cstm_dlStrong {
    display: flex;
    font-size: 1.25rem;
}
.cstm_dlStrong dt {
    background: #007afa;
    color: #ffffff;
    justify-content: center;
    width: 10em;
    padding: 0.75em 0.5em;
    font-weight: bold;
    display: flex;
    align-items: center;
    font-size: 1.5rem;
}
.cstm_dlStrong dd {
    background: #0065d0;
    padding: 0.75em 1.5em;
    text-align: left;
    flex: 1;
    color: #ffffff;
}

.cstm_floatbanner {
    position: fixed;
    z-index: 50001;
    bottom: 1em;
    left: 1em;
    max-width: 300px;
    width: 80%;
    background: #ffffff;
    border: 3px solid #5088c3;
    padding: 1.25em;
}
.cstm_floatbanner_ttl {
    font-size: 18px;
    font-weight: bold;
}
.cstm_floatbanner_img {
    padding: 0.75em 0;
}
.cstm_floatbanner_links a {
    display: block;
    position: relative;
    font-size: 15px;
    padding: 0.25em 0 0.25em 1em;
}
.cstm_floatbanner_links a:before {
    content: "";
    display: block;
    width: 1em;
    height: 0.7em;
    border-top: 0.35em solid  transparent;
    border-bottom: 0.35em solid  transparent;
    border-right: 0.5em solid  transparent;
    border-left: 0.5em solid  #5088c3;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.cstm_floatbanner_closer {
    display: block;
    max-width: 28px;
    max-height: 28px;
    width: 7.5vw;
    height: 7.5vw;
    background: #999999;
    border-radius: 50%;
    position: absolute;
    right: -1.7rem;
    top: -1.7rem;
}
.cstm_floatbanner_closer:before,
.cstm_floatbanner_closer:after{
    content: "";
    display: block;
    background: #ffffff;
    width: 0.8rem;
    height: 0.15rem;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.cstm_floatbanner_closer:before { transform: rotate(45deg); }
.cstm_floatbanner_closer:after { transform: rotate(-45deg); }

@media screen and (max-width: 767px) {
    .cstm_floatbanner { max-width: 200px; }
    .cstm_floatbanner_ttl { font-size: 14px; }
    .cstm_floatbanner_links a { font-size: 13px; }
}