@charset "UTF-8";
@media screen and (min-width: 640px) {
    #wrapper {
        width: 700px;
        padding: 0 0 0 0;
        overflow: hidden;
        margin: auto;
        box-shadow: 0 0 39px 0 #cbcbcb;
        position: relative;
    }
}

img.pics {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}

.mt30 {
    display: block;
    margin-top: 30px auto;
}

.mb30 {
    margin-bottom: 30px;
}

.mb20 {
    margin-bottom: 20px;
}

.qestion {
    position: relative;
}

.abs {
    position: absolute;
}

.btn {
    top: 83%;
    left: 10%;
}

.fcB {
    color: #0060af;
}

.fcy {
    color: #fef900;
}

.fcO {
    color: #fc6e00;
    font-weight: bold;
}

.fsL {
    font-size: 1.1em;
    font-weight: bold;
}

.pc_dp_n {
    display: none;
}

footer a {
    text-align: center;
    color: #fff;
    text-decoration: none;
}

footer {
    padding: 5% 3%;
    text-align: center;
    background-color: #003581;
}

.header {
    padding: 2% 3% 1% 3%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.header_left {
    margin-right: 2%;
}

.header p {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 0;
}



.cta {
    background-color: #e8f7fc;
    position: relative;
}

.cta_area {
    width: 100%;
}

.cta_tel {
    margin: 0 auto;
    text-align: center;
    position: absolute;
    bottom: 41%;
    left: 0;
    right: 0;
}

.cta_tel img,
.cta_web img {
    width: 80%;
}

.cta_web {
    margin: 0 auto;
    text-align: center;
    position: absolute;
    bottom: 24%;
    left: 0;
    right: 0;
}

.cta_a {
    background-color: #e8f7fc;
    padding: 0 0 5% 0;
}

.cta_a div {
    /*display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;*/
    width: 80%;
    margin: 0 auto;
}

/*.cta_a a.fas{
    padding: 0 1% 0 0;
}
.cta_a a.las{
    padding: 0 0 0 1%;
}*/

/*お客様の声*/
.uservoice {
    text-align: center;
    padding: 3% 0 5% 0;
}

.uservoice h3 {
    margin-bottom: 5%;
}

/*スライダー部分*/
/*1*/
p.slide_icon {
    margin-top: 0 !important;
}

.pb {
    margin-bottom: 0 !important;

}

.slick01 .slick-slide img {
    display: inline;
}

.slick01 .slide_contents {
    border-radius: 10px;
}

.slick01 .slide_contents p {
    text-align: left;
    margin: 3% 2%;
}

.slick01 .slide_icon {
    background-color: #0060af;
    padding: 5px 10px;
    color: #fff;
    display: table;
    font-weight: bold;
    border-radius: 5px;
}

.slick01 .slick-prev:before,
.slick01 .slick-next:before {
    color: #07438b;
}

.slick01 .slick-next:before {
    content: '▶';
}

.slick01 .slick-prev:before {
    content: '◀';
}

.slick01 .slick-next {
    right: 1vw;
}

.slick01 .slick-prev {
    left: 1vw;
}

.slick01 .slick-prev,
.slick01 .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

/*スライダー共通*/
.comment {
    padding: 3% 0 4% 0;
    background: transparent url(../img/bg_base.png) 0 0 repeat;
    border-radius: 0 0 10px 10px;
}

li.slide_contents {
    width: 96% !important;
}

.slick-initialized .slick-slide {
    display: inline;
    margin: 0;
}

.slick-slide img {
    width: 100%;
    height: auto;
    border-radius: 10px 10px 0 0;
}

.slick-prev,
.slick-next {
    z-index: 1;
}

.slick-prev:before,
.slick-next:before {
    color: #000;
}

.slick-slide {
    transition: all ease-in-out .3s;
    opacity: .1;
}

.slick-active {
    opacity: 1;
}

.slick-current {
    opacity: 1;
}

.thumb {
    margin: 20px 0 0;
}

.thumb .slick-slide {
    cursor: pointer;
}

.thumb .slick-slide:hover {
    opacity: .7;
}

.slick01 .slick-dots li button:before {
    font-size: 15px;
    line-height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: #c2c2c2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick01 .slick-dots li.slick-active button:before {
    color: #a4a4a4;
}

.slick01 .slide_contents p.re {
    text-align: right;
}

h3 {
    font-size: 36px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    padding: 3% 0;
    color: #fff;
    background-color: #00b4ff;
}

/*FAQ*/
.answer {
    padding: 0 0 3% 0;
}

.answer2 {
    max-width: 750px;
    margin: 5% auto;
}

/*アコーディオン*/
.q_arrow {
    position: absolute;
    top: 40%;
    right: 4%;
    width: 2%;
    transition: all 0.5s;
}

.sp_close_1,
.sp_close_2,
.sp_close_3,
.sp_close_4,
.sp_close_5,
.sp_close_6,
.sp_close_7,
.sp_close_8,
.sp_close_9 {
    display: none;
    width: 100%;
    margin: 0 auto;
}

.OaC_btn_1,
.OaC_btn_2,
.OaC_btn_3,
.OaC_btn_4,
.OaC_btn_5,
.OaC_btn_6,
.OaC_btn_7,
.OaC_btn_8,
.OaC_btn_9 {
    display: block;
    padding: 17px;
    color: #ffffff;
    background: #0060af;
    font-weight: bold;
    position: relative;
    font-size: 1em;
    line-height: 1.5;
    padding-right: 12%;
    margin: 20px 10px 0px 10px;
}

.close {
    line-height: 1.6;
    padding: 3%;
    margin: 0 10px 10px;
    padding-top: 10px;
    padding-bottom: 20px;
    color: #000;
    border: 2px solid #0060af;
}

.another {
    width: 100%;
    padding: 5px 110px 20px;
    font-weight: bold;
    border-top: 1px solid #5f86bb;
}


.open .q_arrow {
    transform: rotate(180deg);
}


/*----------sp------------*/
@media (max-width: 767px) {
    h3 {
        font-size: 7.5vw;
        padding: 5%;
        line-height: 1.2;
    }

    /*アコーディオン*/
    .q_arrow {
        position: absolute;
        top: 40%;
        right: 4%;
        width: 6%;
    }


    .close {
        line-height: 1.6;
        padding: 3%;
        margin: 0 10px 10px;
        padding-top: 10px;
        padding-bottom: 20px;
        color: #000;
        border: 2px solid #0060af;
    }

    .another {
        width: 100%;
        padding: 5px 110px 20px;
        font-weight: bold;
        border-top: 1px solid #5f86bb;
    }

}

/*----------sp------------*/
@media (max-width: 767px) {
    h3 {
        font-size: 7.5vw;
        padding: 5%;
        line-height: 1.2;
    }

    /*スライダー*/

    .slick01 .slide_contents p {
        font-size: 4vw;
    }

    .section .slick-prev:before,
    .section .slick-next:before {
        font-size: 5vw;
    }

    .slick01 .slick-next {
        right: 1vw;
    }

    .slick01 .slick-prev {
        left: 1vw;
    }

    .section .slick-dots li button:before {
        font-size: 10px;
        line-height: 40px;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
    }
}

/*----------sp------------*/
@media screen and (max-width: 640px) {
    #wrapper {
        width: 100%;
        padding: 0 0 0 0;
        overflow: hidden;
    }

    .mt30 {
        margin: 30px auto;
    }

    .header p {
        font-size: 0.8em !important;
    }

    #Realtime,
    #Realtime01,
    #Realtime02,
    #Realtime03 {
        font-size: 1.1em !important;
    }

}

@media screen and (max-width:320px) {

    #Realtime,
    #Realtime01,
    #Realtime02,
    #Realtime03 {
        font-size: 1em;
    }
}

#Realtime,
#Realtime01,
#Realtime02,
#Realtime03 {
    font-size: 1.5em;
    font-weight: 700;
    margin: 0 auto;
    text-align: center;
    font-family: 'Meiryo', 'メイリオ', sans-serif;
    position: absolute;
    top: 15.5%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    width: 100%;
}

#Realtime04{
        text-align: center;
    font-weight: bold;
    font-size: 22px;
    margin: 2% 0 2%;
}

@media screen and (max-width:768px) {
   #Realtime04{
    font-size: 20px;
}
 
}

/* 点滅 */
.blinking {
    animation: flash 1.5s linear infinite;
}

@keyframes flash {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }


    100% {
        opacity: 1;
    }
}

.b_cta {
    display: none;
}

.cta2 {
    background-color: #e8f7fc;
}

.cta2 img {
    width: 80%;
    padding: 2% 2% 2% 2%;
    margin: auto;
}

/*-------追従ボタン--------------------------------------*/
@media screen and (max-width: 640px) {
    .b_cta {
        display: block;
        background-image: url(../img/fixed_cta_bg.png);
        background-size: 100% 100%;
        box-sizing: border-box;
        height: 130px;
    }

    .b_cta img {
        width: 100%;
    }

    .b_cta a {
        display: block;
        width: 74%;
        padding-left: 10px;
        transform: translateY(105%);
    }

    .b_cta a img {
        display: block;
        width: 97%;
        margin: 0 auto
    }

    #button {
        display: block;
        position: fixed;
        z-index: 999;
        transition: all 0.1s;
        bottom: 0;
        right: 0;
        text-align: center;
    }

    #button:hover {
        opacity: 0.5;
    }

    footer {
        /*margin-top: 15%;*/
        position: relative;
        padding-top: 5%;
    }

    /*このクラスが付与されると表示する*/
    .active {
        /*opacity: 1;*/
        visibility: visible;
    }

    /*このクラスが付与されると表示する*/
    .absolute {
        position: absolute;
        top: -70px;
        height: auto;
        opacity: 0;
    }
    .hekomu img{
        animation: hekomu2 2s infinite;
    }
    @keyframes hekomu2 {
        0% {
            top: 0px;
        }
        10% {
            box-shadow: none;
            position: relative;
            top: 8px;
        }
        20% {
            top: 0px;
        }
        30% {
            box-shadow: none;
            position: relative;
            top: 8px;
        }
        40% {
            top: 0px;
        }
    }
}

/*会社情報*/
body#profile {
    background-color: #e8f7fc;
}

#profile .contents {
    max-width: 650px;
    padding: 1% 2%;
    overflow: hidden;
    margin: auto;
    /*box-shadow: 0 0 39px 0 #cbcbcb;*/
    background-color: #fff;
}

#profile h2 {
    font-size: 23px;
    margin: 10% 0 2% 0;
    text-align: center;
    font-weight: bold;
}

#profile h3 {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
    text-align: left;
    padding: 3% 0 1% 1%;
    color: #00b4ff;
    background-color: #fff;
    border-bottom: 2px solid #00b4ff;
    margin: 1% 0;
}

#profile table,
#profile td,
#profile th {
    border: 1px solid #c3c3c3;
    border-collapse: collapse;
}

#profile td,
#profile th {
    padding: 1%;
    font-size: 14px;
}

#profile table {
    width: 100%;
}

#profile th {
    background: #e9e9e9;
    width: 30%;
    text-align: left;
}

#profile td {
    text-align: center;
}

#profile p {
    font-size: 14px;
}

#profile p.tyuu {
    font-size: 12px;
    text-align: right;
    margin-top: 1%;
    color: #c3c3c3;
}

#profile b {
    font-weight: bold;
}

#profile .profile-txt {
    margin: 5% 0;
}

/* 対応エリアのアコーディオン */
/* アコーディオン1  */
#accordion_area {
    padding: 2% 0 5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #E8F7FC;
}

.accordion_one {
    width: 80%;
    max-width: 100%;
}

.acc {
    border: 3px solid #014492;
    margin-bottom: 10px;
}

.acc_header {
    background: #014492;
    color: #fff;
    padding: 0.5% 0 0.5%;
    text-align: center;
    font-size: 1.7rem;
    position: relative;
    cursor: pointer;
    font-size: 22px;
}

.acc_header::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-top: #fff 2px solid;
    border-right: #fff 2px solid;
    -webkit-transform: rotate(136deg);
    -ms-transform: rotate(136deg);
    transform: rotate(136deg);
    position: absolute;
    right: 5%;
    top: -13%;
    bottom: 10%;
    margin: auto;
    transition: all .4s ease-in-out;
}

.acc_header.open::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-top: #fff 2px solid;
    border-right: #fff 2px solid;
    -webkit-transform: rotate(315deg);
    -ms-transform: rotate(315deg);
    transform: rotate(315deg);
    position: absolute;
    right: 5%;
    top: 28%;
    bottom: 4%;
    margin: auto;
    transition: all .4s ease-in-out;
}

@media screen and (max-width:699px){
    .acc_header::after {
        top: -25%;
    }
    .acc_header.open::after {
        top: 32%;
    }
}


.acc {
    position: relative;
}

.acc-contents {
    padding: 3%;
    background-color: #fff;
}

@media screen and (max-width:741px) {
    .accordion_one {
        width: 90%;
        max-width: 100%;
    }

    .acc_header {
        font-size: 17px;
    }

    .acc-p {
        font-size: 3.7vw;
    }

}


/*離脱ポップCSS*/
#withdrawalPopup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    max-width: 400px;
  }
  #withdrawalOverlay {
    display: none;
    position: fixed;
    z-index: 1000;
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100);
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
  }
  span.exit {
    position: absolute;
    top: -15%;
    right: 0%;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
  }
  
  #withdrawalPopup img {
      width: 100%;
  }
  
  @media (max-width: 700px) {
    div#withdrawalPopup {
      width: 80%;
    }

    div span.exit {
      top: 0;
      padding: 1% 3%;
      line-height: 1.6;
    }
    .pop_flex img:first-child {
      width: 71%;
      object-fit: contain;
    }
    .pop_flex img {
      width: 29%;
      object-fit: contain;
    }
    div #withdrawalPopup {
      padding: 46px 20px 19%;
    }
    div #withdrawalPopup p {
      margin-top: 5%;
    }
  }