@charset "utf-8";
/* CSS Document */
*{
    color: #2B2B2B;
	word-break: break-all;
	line-break: strict;
	word-wrap: break-word;
	overflow-wrap: break-word;
	text-rendering: optimizeLegibility;
    box-sizing: border-box;
}
body{
    padding: 0;
    margin: 0;
}
a{
    color: inherit;
    text-decoration: none;
}
a:visited{
    color: inherit;
    text-decoration: none!important;
}
a:hover {
    color: inherit;
    text-decoration: none!important;
}
a:active {
    color: inherit;
    text-decoration: none!important;
}
input{
    appearance: none;
    -webkit-appearance: none;
}
.img_wrap{
    text-align: center;
}
.img_wrap img{
    max-width: 100%;
    height: auto;
}
.blue{
    color: #2486CF;
}
.sub1{
    color: #D7E8F6;
}
.sub2{
    color: #F3F8FC;
}
.red{
    color: #F87777;
}
.text_red{
    color: #F20A0A;
}
.text_blue{
    color: #2486CF;
}
.gray_back{
    background: #F5F5F5;
}
.bold{
    font-weight: bold;
}
.shadow{
    text-shadow: 
    2px 2px 10px #1d3880 ,
    -2px 2px 10px #1d3880 ,
    2px -2px 10px #1d3880 ,
    -2px -2px 10px #1d3880;
    /*3px 3px 4px rgba(0,0,0,0.3), -3px -3px 4px rgba(29, 56, 128, 1);*/
}
.no_style{
    list-style: none;
}
.disc{
    list-style: disc;
}
table td{
    position: relative;
}
table .triangle::before,
table .circle::before,
table .cross::before,
table .triangle::after,
table .circle::after,
table .cross::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
}
table .circle::before{
    width: 41px;
    height: 41px;
    border-radius: 100%;
    border: 1px solid #167FCD;
}
table .triangle::after,
table .triangle::before{
    height: calc(60px / 2);
    width: 40px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: #167FCD;
}
table .triangle::after{
    height: calc(50px / 2);
    width: 35px;
    background: #fff;
    top: calc(50% + 1px);
}
table .cross::after,
table .cross::before{
    height: 41px;
    width: 1px;
    border-right: 2px solid #167fcd;
    display: block;
}
table .cross::after{
    transform: translate(-50%, -50%) rotate(45deg);
}
table .cross::before{
    transform: translate(-50%, -50%) rotate(-45deg);
}
.js-scrollable{
    padding: 0 15px;
}
li{
    line-height: 200%;
}
/* .header_inner */
header{
    opacity: 1;
    visibility: visible;
    transition: .8s all;
    transform: translate(0 , 0);
}
header.hidden{
    opacity: 0;
    visibility: hidden;
    transition: .8s all;
    transform: translate(0 , -100px);
}
#top_nav_check ~ label{
    border-top: 1px solid #2486CF;
    border-bottom: 1px solid #2486CF;
    height: 23px;
    width: 30px;
    position: fixed;
    top: 21px;
    right: 25px;
    transition: .2s all;
}
#top_nav_check ~ label::before{
    content:"";
    display: block;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    border-top: 1px solid #2486CF;
    transition: .2s all;
}
#top_nav_check:checked ~ label{
    border-bottom: none;
    transform: rotate(-45deg) translate(10px, 20px);
    transition: .2s all;
}
#top_nav_check:checked ~ label::before{
    transform: rotate(90deg) translate(-12px, 0px);
    transition: .2s all;
}
.header_inner ul{
    padding: 0;
    list-style: none;
    margin: 0 auto;
    width: 100%;
}
div.header_inner > nav > ul:nth-child(2){
    order: -1;
}
.header_inner ul ul li a{
    padding: 10px 15px 10px 30px;
}
.header_inner ul li a{
    border-bottom: 1px solid #2486CF;
    display: block;
    padding: 10px 15px;
}
header{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 68px;
    background: #fff;
    z-index: 100;
}
.header_inner{
    width: 100%;
    max-width: 1750px;
    margin: 0 auto;
    position: relative;
    height: 68px;
}
.top_info_wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    width: 185px;
    padding: 10px;
}
.site_title{
    font-size: 1em;
    font-weight: bold;
    margin: 0;
}
.site_title a{
    max-height: 10px;
    display: block;
}
.top_info_wrap .img_wrap{
    line-height: 1;
    width: 70%;
}
#top_nav_check ~ nav{
    position: fixed;
    top: 68px;
    background: #fff;
    width: 0;
    height: calc(100vh - 68px);
    opacity: 0;
    visibility: hidden;
    transition: .2s all;
}
#top_nav_check:checked ~ nav{
    width: 100%;
    opacity: 1;
    visibility: visible;
    transition: .2s all;
    overflow-x: scroll;
    border-top: 1px solid #2486CF;
    display: flex;
    flex-flow: column;
}
main{
    margin: 68px 0 0;
}
main a:visited,
main a{
    color: #2486CF!important;
    text-decoration: underline;
}
main .img_wrap a:visited,
main .img_wrap a{
    color: #2B2B2B!important;
    text-decoration: none;
}
.header_inner > nav > ul:nth-child(1) > li:nth-child(8){
    display: none;
}
/* footer */
footer p{
    margin: 0 auto;
}
.footer_nav_top{
    border-top: 1px solid #2486CF;
    margin: 50px auto 0;
    max-width: 1030px;
}
.footer_nav_bottom{
    max-width: 1030px;
}
footer ul{
    padding: 0;
    list-style: none;
    margin: 0;
}
.footer_contact_inner{
    margin: 0 auto;
}
.footer_contact_inner p{
    padding: 0 15px;
}
.footer_info{
    text-align: center;
}
.footer_list_inner a{
    display: block;
    padding: 10px 15px;
}
.footer_list_inner li a{
    padding: 10px 30px;
}
.footer_list_inner p{
    border-bottom: 1px solid #2486CF;
    font-weight: bold;
}
.footer_list_inner li{
    border-bottom: 1px solid #2486CF;
}
.f_contact_btn{
    padding: 10px;
    margin: 0 auto;
}
.f_contact_btn a{
    padding: 20px 50px;
    border-radius: 50px;
    display: block;
    text-align: center;
    background: #2486CF;
    color: #fff;
}
.footer_contact_inner p:nth-of-type(1){
    text-align: center;
    font-size: 1.3em;
}
.footer_contact_inner p:nth-of-type(1) > a > span > svg{
    width: 20px;
    height: auto;
    margin: 0 5px 0 0;
}
.footer_contact_inner p:nth-of-type(2){
    text-align: center;
    font-size: .8em;
}
.footer_contact_inner p:nth-of-type(3){
    margin: 2em auto;
    text-align: center;
}
.footer_contact_wrap{
    position: relative;
}
.footer_contact_wrap > p{
    padding: 0 15px;
    margin: 0 auto;
    font-weight: bold;
    text-align: center;
}


/* area */
.area_inner{
    width: calc(100% - 30px);
    padding: 50px 15px;
    border: 5px dotted #0073C8;
    background: #F5F3F3;
    border-radius: 30px;
    margin: 0 auto;
    max-width: 1030px;
}
.area_inner > .blue{
    text-align: center;
    margin: 0 auto .5em;
}
.area_list{
    padding: 0 15px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 50px auto 0;
    max-width: 900px;
}
.area_list li{
    margin: 0 5px 30px 0;
}
.area_list li a{
    text-decoration: underline;
}

/* manual */
.manual_wrap h2{
    padding: 0 15px;
}
.manual_wrap .manual_list{
    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    list-style: none;
    max-width: 1000px;
    margin: 0 auto;
}
.manual_wrap .manual_list li{
    width: 100%;
    margin: 0 auto 2em 0;
}
.manual_wrap .manual_list li a{
    text-decoration: underline;
    color: #4191CC!important;
}
.manual_wrap .manual_list li a p{
    color: #4191CC!important;
    max-width: 300px;
    margin: 0 auto;
}




.contact_attention_wrap{
    padding: 30px 15px;
    background: #F5F5F5;
    margin: 0 auto 3em;
}
.contact_attention_wrap h2{
    text-align: center;
}
.contact_attention_wrap h2::before{
    content:"!";
    display: inline-flex;
    background: #CFE5F5;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    padding: 3px 0 0;
    margin: 0 10px 0 0;
}
.contact_attention_wrap h2 .ruby{
    color: #2486CF;
    position: relative;
}
.contact_attention_wrap h2 .ruby::before{
    content:"●●";
    position: absolute;
    top: -1em;
    left: 0;
}
.contact_attention_wrap ul{
    padding: 0 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    list-style: none;
    max-width: 810px;
    margin: 2em auto;
}
.contact_attention_wrap ul li{
    position: relative;
    margin: 0 0 2em;
    text-decoration: underline;
    width: 100%;
    border-bottom: 1px dotted #707070;
    padding: 10px 0 10px 30px;
}
.contact_attention_wrap ul li::before{
    content: "";
    display: block;
    width: 1.5em;
    height: 1.5em;
    position: absolute;
    top: 10px;
    left: -10px;
    background-image: url(../../images/check.webp);
    background-position: center;
    background-size: cover;
}
.contact_attention_wrap ul li a:visited,
.contact_attention_wrap ul li a{
    color: #2486CF;
}


/* breadcrumbs */
.breadcrumbs{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 15px 15px 0;
    margin: 0 auto;
}
.breadcrumbs li{
    display: block;
    margin: 0 25px 0 0;
    position: relative;
}
.breadcrumbs li::after{
    content: ">";
    display: block;
    position: absolute;
    top: 0;
    right: -20px;
}
.breadcrumbs li:last-of-type::after{
    display: none;
}
.breadcrumbs li a{
    padding: 2px;
}

/* heading_wrap */
.heading_wrap{
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 80vw;
    margin: 0 auto;
}
.heading_wrap::before{
    content:"";
    width: 100%;
    display: block;
    border-top: 1px solid #707070;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0 , -50%);
}
.heading_wrap h2,
.heading_wrap p{
    font-size: 1.4em;
    font-weight: bold;
    background: #fff;
    display: block;
    padding: 0 30px;
    position: relative;
}
.heading_wrap h2::before,
.heading_wrap p::before,
.heading_wrap h2::after,
.heading_wrap p::after{
    content: "";
    display: block;
    height: 100%;
    width: 1px;
    border-right: 1px solid #707070;
    position: absolute;
    top: 0;
    transform: rotate(30deg);
}
.heading_wrap h2::before,
.heading_wrap p::before{
    left: 5px;
}
.heading_wrap h2::after,
.heading_wrap p::after{
    right: 5px;
}
.two_column{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding: 0;
    margin: 0;
}
.two_column .column{
    width: 100%;
}


dt.box,
dd.box,
h2.box,
h3.box,
h4.box,
p.box,
ul.box,
li.box{
    opacity: 0;
    transform: translateY(100px);
    transition: 1.5s all;
    line-height: 200%;
}
dt.box.is-active,
dd.box.is-active,
h2.box.is-active,
h3.box.is-active,
h4.box.is-active,
p.box.is-active,
ul.box.is-active,
li.box.is-active{
    opacity: 1;
    transform: translateY(0);
    transition: 1.5s all;
}
.table_scroll_wrap{
    width: 100%;
    padding: 15px;
    overflow-x: scroll;
}
.mt-1{
    margin-top: 1em;
}
.mt-3{
    margin-top: 2em;
}
.mt-3{
    margin-top: 3em;
}
@keyframes fadeIn {
    0% {
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}
.line_dl{
    padding: 0;
    margin: 0 auto;
    width: calc(100% - 30px);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}
.line_dl dt,
.line_dl dd{
    width: 100%;
    margin: 0 auto;
    line-height: 200%;
    padding: 0;
}
.full{
    width: 100%;
}
/* 768px for table*/
@media (min-width: 768px) {
    
    .full{
        width: 100%!important;
        margin: 0 auto 1em!important;
    }
    
    .footer_contact_wrap{
        background: #F5F5F5;
        font-size: 1.3em;
        border-bottom: 10px solid #D8E9F7;
    }
    .footer_contact_wrap > p{
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50% , -50%);
    }
    .footer_contact_wrap .two_column{
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        max-width: 1000px;
        margin: 0 auto;
    }
    .footer_contact_wrap .two_column > div{
        width: 60%;
        text-align: left;
        max-height: 407px;
    }
    .footer_contact_wrap .two_column > div:last-of-type{
        width: 40%;
    }
    .footer_contact_inner p{
        padding: 0;
    }
    .footer_contact_wrap .two_column > div.footer_contact_inner{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    .footer_contact_inner p:nth-of-type(1),
    .footer_contact_inner p:nth-of-type(2){
        width: 100%;
    }
    .footer_nav_bottom,
    .footer_nav_top{
        border-top: none;
        margin: 50px auto;
    }
    .footer_nav_bottom nav,
    .footer_nav_top nav{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .footer_list_inner{
        width: 33.333%;
    }
    .footer_list_inner p,
    .footer_list_inner li{
        border-bottom: none;
    }
    .footer_list_inner ul{
        list-style: disc;
        padding: 0 0 0 50px;
    }
    .footer_list_inner ul li a{
        padding: 5px 0;
    }
    .footer_info{
        border-top: 1px solid #707070;
        padding: 20px;
    }
    .footer_contact_inner p:nth-of-type(3){
        text-align: left;
    }
    
    
    .two_column .column{
        width: 50%;
    }
    .two_column .column:nth-of-type(odd){
        padding-right: 15px;
    }
    .two_column .column:nth-of-type(even){
        padding-left: 15px;
    }
    .heading_wrap{
        max-width: 100vw;
    }
    
    .manual_wrap .manual_list li{
        width: 33.3333%;
        margin: 0 0 2em;
    }
}

@media (min-width: 1050px) {
    
    .header_inner > nav > ul:nth-child(1) > li:nth-child(7) a{
        padding: 10px 15px;
        border-radius: 20px;
        background: #2486CF;
        display: block;
        color: #fff;
    }
    #top_nav_check ~ label{
        display: none;
    }
    header{
        height: 170px;
    }
    main{
        margin: 170px auto 0;
    }
    .top_info_wrap .img_wrap{
        width: auto;
    }
    .site_title{
        font-size: 1.3em;
    }
    .site_title a{
        max-height: 100px;
    }
    .top_info_wrap{
        width: 260px;
        align-items: center;
    }
    #top_nav_check ~ nav{
        position: absolute;
        width: 100%;
        opacity: 1;
        visibility: visible;
        height: auto;
        top: 0;
        background: transparent;
    }
    .header_inner ul li a{
        border-bottom: none;
    }
    .header_inner > nav > ul:nth-child(1){
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        top: 8px;
        right: 15px;
        width: calc(100% - 311px);
    }
    .header_inner > nav > ul:nth-child(1) li{
        margin: 0 0 0 auto;
        text-align: right;
    }
    .header_inner > nav > ul:nth-child(1) > li:nth-child(7),
    .header_inner > nav > ul:nth-child(1) > li:nth-child(8){
        display: block;
    }
    .header_inner > nav > ul:nth-child(1) > li:nth-child(8){
        position: absolute;
        bottom: -5px;
        right: 270px;
        font-size: 1.8em;
    }
    .header_inner > nav > ul:nth-child(1) > li:nth-child(8) a{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
    }
    .header_inner > nav > ul:nth-child(1) > li:nth-child(8) a span{
        margin: 0 5px 0 0;
    }
    .header_inner ul li a{
        padding: 0;
    }
    .header_inner > nav > ul:nth-child(2){
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        width: auto;
        position: absolute;
        right: 20px;
        top: 130px;
    }
    .header_inner > nav > ul:nth-child(2) > li{
        position: relative;
        margin: 0 85px 0 0;
    }
    .header_inner > nav > ul:nth-child(2) > li:hover::before{
        content:"";
        height: calc(tan(60deg)* 30px / 2);
        width: 30px;
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
        display: block;
        position: absolute;
        background: #E5F0FB;
        bottom: -20px;
        left: 30%;
    }
    .header_inner > nav > ul:nth-child(2) ul{
        position: fixed;
        width: 100vw;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        left: 0;
        top: 170px;
        background: #E5F0FB;
        padding: 0;
        opacity: 0;
        visibility: hidden;
        transition: .2s all;
    }
    .header_inner > nav > ul:nth-child(2) li:hover > ul{
        padding: 10px 0;
        opacity: 1;
        visibility: visible;
        transition: .2s all;
    }
    .header_inner > nav > ul:nth-child(2) ul li{
        margin: 0 10px 0 0;
    }
    .header_inner > nav > ul:nth-child(2) ul li a{
        padding: 10px;
    }
    .header_inner ul ul li a{
        padding: 0;
        white-space: nowrap;
    }
}

/* 1200px for wide pc */
@media (min-width: 1300px) {
    .header_inner > nav > ul:nth-child(1) > li:nth-child(8){
        position: absolute;
        bottom: -5px;
        right: 10px;
        transform: translate(0, 120%);
        font-size: 1.8em;
    }
}