@charset "UTF-8";

/*2*/
@media screen and (max-width:768px) { /*SP*/
}
@media screen and (min-width:769px) , print { /*PC&TB*/
}

/*3*/
@media screen and (max-width:768px) { /*SP*/
}
@media screen and (min-width:769px) and ( max-width:1023px) { /*TB*/
}
@media screen and (min-width:1024px) , print { /*PC*/
}


/* Initialize --------------------------*/

#header{
    /* position: relative; */
    /* z-index: 100!important; */
}

body{
    font-family: 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    font-weight: 700; font-weight: 400; font-feature-settings : "palt";
	letter-spacing: 0.0em; color: #121212;
}
.serviceWrap{
    overflow: hidden;
}
/*
div{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    overflow:hidden;
}
*/
.offVisible{
    overflow: visible;
}
#footer div{
    overflow: visible;
}

/* common --------------------------*/

.windowWidth{
    width: 100%;
    display: flex; flex-wrap: nowrap;
    justify-content: center; align-items: center;
}
@media screen and (max-width:768px) { /*SP*/
    .noSP{ display: none; }
    .noPC{ display: inline-block; }
    .contentsWidth{
        width: 100%; max-width: 1000px; padding: 0 10px;
    }
    .wrapAdjustment{
        margin: 0 0 120px 0;
        position: relative;
        z-index: 1;
        overflow: visible;
    }
}
@media screen and (min-width:769px) , print { /*PC&TB*/
    .noSP{ display: inline-block; }
    .noPC{ display: none; }
    .contentsWidth{
        width: 100%; max-width: 1000px; padding: 0 30px;
    }
    .wrapAdjustment{
        margin: -300px 0 120px 0;
        overflow: visible;
    }
}
    


/* KV --------------------------*/
@media screen and (max-width:768px) { /*SP*/
    .kvBG{
        position: relative;
        background-image: url(../img/kv_01@2x.png);
        background-size: calc(1231px * 0.5) calc(693px * 0.5);
        background-repeat: no-repeat;
        background-position: calc(50% + 150px) calc(0% + 100px);
        width: 100%; height: 400px;
        backface-visibility: hidden;
        z-index: 1;
        display: inline-block!important;
    }
    .kvBG div{padding: 0!important;}
    .kvBox{
        width: 100%; height: auto;
        margin: 0 0 0 0; text-align: center;
    }
    .kvTitle{
        width: 100%; 
        position: relative; display: inline;
        /* font-size: calc(60px * 0.4); */
        font-size: 8.2vw; 
        color: #5087C5; font-weight: 700;
        letter-spacing: 1px; line-height: calc(60px*0.7);
        margin: 0 0 10px 0;
        border-bottom: 10px solid #F9F5B5;
    }
    .kvTitle span{
        /* font-size: calc(40px * 0.4); */
        font-size: 4.9vw;
    }
    .kvSubTitle{
        font-size: calc(30px * 0.5); color: #5087C5; font-weight: 700;
        letter-spacing: 1px; line-height: calc(30px*0.75);
        margin: 4vw 0 5px 4vw; text-align: left;
    }
    .kvText{
        width: 51%;
        font-size: calc(24px * 0.5); color: #6D6D6D; font-weight: 700;
        line-height: calc(24px*0.75); letter-spacing: 1px; text-align: left;
        margin: 0 0 0 4vw;
    }
}
@media screen and (min-width:769px) , print { /*PC&TB*/
    .kvBG{
        position: relative;
        background-image: url(../img/kv_01@2x.png);
        background-size: calc(1231px * 0.9) calc(693px * 0.9);
        background-repeat: no-repeat;
        background-position: calc(50% + 790px) center;
        width: 100%; height: 700px;
        backface-visibility: hidden;
        transform: translateY(-100px);
        z-index: 1;
    }
    .kvBox{
        width: 100%; height: auto;
        margin: -100px 0 0 0;
    }
    .kvTitle{
        position: relative; display: inline;
        font-size: calc(60px * 0.9); color: #5087C5; font-weight: 700;
        letter-spacing: 5px;
        margin: 0 0 30px 0; border-bottom: 10px solid #F9F5B5;
    }
    .kvTitle::after{
        /* content: '';
        position: absolute;
        top: 0; left: 0;
        width:100%; height: 100%;
        display: block;
        border-bottom: 10px solid #F9F5B5; */
    }
    .kvTitle span{
        font-size: calc(40px * 0.9);
    }
    .kvSubTitle{
        font-size: calc(30px * 0.9); color: #5087C5; font-weight: 700;
        letter-spacing: 1px;
        margin: 50px 0 20px 0;
    }
    .kvText{
        font-size: calc(24px * 0.9); color: #6D6D6D; font-weight: 700;
        line-height: calc(24px*1.25); letter-spacing: 1px;
    }
}
    


/* QUESTION --------------------------*/
@media screen and (max-width:768px) { /*SP*/
    .qBG{
        background-color: #7BA6D9;
        /* background-color: #ccc; */
        margin: 0 0 50px 0;
    }

    .qBox1_a,.qBox1_b,.qBox1_c,.qBox1_d,.qBox1_e,.qBox1_f,.qBox1_g{
        position: relative;
        display: flex; flex-wrap: nowrap;
        justify-content: center; align-items: center;
        width: auto; height: 110px;
    }
    .qMark{
        width: 100%; max-width: 55px; height: auto;
        backface-visibility: hidden;
        transform: translate(-5px,-22px); margin: 0 -5px 0 0;
    }
    .qText{
        width: 100%; text-align: left; padding: 0 0 0 5px;
        font-size: 18px; color: #fff; font-weight: 700;
        line-height: calc(18px*1.25);
    }
}
@media screen and (min-width:769px) , print { /*PC&TB*/
    .qBG{
        background-color: #7BA6D9;
        margin: 50px 0 0 0;
    }

    .qBox1_a,.qBox1_b,.qBox1_c,.qBox1_d,.qBox1_e,.qBox1_f,.qBox1_g{
        position: relative;
        display: flex; flex-wrap: nowrap;
        justify-content: center; align-items: center;
        width: auto; height: 200px;
    }
    .qMark{
        width: 100%; max-width: 115px; height: auto;
        backface-visibility: hidden;
        transform: translate(0px,-20px);
    }
    .qText{
        width: 100%; text-align: left; padding: 0 0 0 10px;
        font-size: 34px; color: #fff; font-weight: 700;
        line-height: calc(34px*1.25);
    }
}

@media screen and (max-width:768px) { /*SP*/
    /* a --------------------------*/
    .qIll_a{
        width: 100%; max-width: calc(250px * 0.45); height: auto;
        transform: translate(25px,-10px); margin: 0 0 0 -30px;
    }
    /* b --------------------------*/
    .qIll_b{
        width: 100%; max-width: calc(264px * 0.5); height: auto;
        transform: translate(20px,-12px); margin: 0 0 0 -20px;
    }
    /* c --------------------------*/
    .qIll_c{
        width: 100%; max-width: calc(310px * 0.5); height: auto;
        transform: translate(50px,0px); margin: 0 0 0 -50px;
    }
    /* d --------------------------*/
    .qIll_d{
        width: 100%; max-width: calc(232px * 0.5); height: auto;
        transform: translate(20px,0px); margin: 0 0 0 -20px;
    }
    /* e--------------------------*/
    .qIll_e{
        width: 100%; max-width: calc(296px * 0.5); height: auto;
        transform: translate(20px,0px); margin: 0 0 0 -20px;
    }
    /* f --------------------------*/
    .qIll_f{
        width: 100%; max-width: calc(243px * 0.4); height: auto;
        transform: translate(18px,0px); margin: 0 0 0 -15px;
    }
    /* g --------------------------*/
    .qIll_g{
        width: 100%; max-width: calc(297px * 0.4); height: auto;
        transform: translate(25px,-11px); margin: 0 0 0 -30px;
    }
}
@media screen and (min-width:769px) , print { /*PC&TB*/
    /* a --------------------------*/
    .qIll_a{
        width: 100%; max-width: 250px; height: auto;
        transform: translate(20px,0px);
    }
    /* b --------------------------*/
    .qIll_b{
        width: 100%; max-width: 264px; height: auto;
        transform: translate(30px,0px);
        margin: 0 0 0 -30px;
    }
    /* c --------------------------*/
    .qIll_c{
        width: 100%; max-width: 310px; height: auto;
        transform: translate(20px,0px);
    }
    /* d --------------------------*/
    .qIll_d{
        width: 100%; max-width: 232px; height: auto;
        transform: translate(20px,0px);
    }
    /* e--------------------------*/
    .qIll_e{
        width: 100%; max-width: 296px; height: auto;
        transform: translate(20px,0px);
    }
    /* f --------------------------*/
    .qIll_f{
        width: 100%; max-width: 243px; height: auto;
        transform: translate(20px,0px);
    }
    /* g --------------------------*/
    .qIll_g{
        width: 100%; max-width: 297px; height: auto;
        transform: translate(20px,0px);
    }
}

@media screen and (max-width:768px) { /*SP*/
    .qBox2{
        position: relative;
        display: flex; flex-wrap: nowrap;
        justify-content: space-between; align-items: center;
        width: 100%; height: auto;
        margin: 0 0 10px 0;
        overflow: visible;
    }
    .qBt{
        display: flex; flex-wrap: wrap;
        justify-content: center; align-items: center;
        width: 100%; max-width: 450px; height: 90px;
        background-color: #fff; border-radius: 10px;
        filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.2));
        padding: 0 5px;
        transition: 0.3s;
        overflow: visible;
    }
    .qBtMgn{
        margin: 0 0 0 10px;
    }
    .qBt:hover{
        cursor: pointer;
        background-color: #F4F3D4;
    }
    .qBtText0{
        width: 100%; height: auto; text-align: center;
        font-size: 20px; color: #000; font-weight: 700;
        line-height: calc(20px*1.2);
    }
    .qBtText1{
        width: 100%; height: auto; text-align: center;
        font-size: 20px; color: #000; font-weight: 700;
        line-height: calc(20px*1.2);
        transform: translateY(7px);
    }
    .qBtText2{
        width: 100%; height: auto; text-align: center;
        font-size: 12px; color: rgba(0,0,0,0.5); font-weight: 700;
        line-height: calc(12px*1.2);
        transform: translateY(-7px);
    }
}
@media screen and (min-width:769px) , print { /*PC&TB*/
    .qBox2{
        position: relative;
        display: flex; flex-wrap: nowrap;
        justify-content: space-between; align-items: center;
        width: 100%; height: auto;
        margin: 0 0 40px 0;
        overflow: visible;
    }
    .qBt{
        display: flex; flex-wrap: wrap;
        justify-content: center; align-items: center;
        width: 100%; max-width: 450px; height: 110px;
        background-color: #fff; border-radius: 10px;
        filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.2));
        /* padding: 5px 0 0 0; */
        transition: 0.3s;
        overflow: visible;
    }
    .qBtMgn{
        margin: 0 0 0 20px;
    }
    .qBt:hover{
        cursor: pointer;
        background-color: #F4F3D4;
    }
    .qBtText0{
        width: 100%; height: auto; text-align: center;
        font-size: 30px; color: #000; font-weight: 700;
        line-height: calc(30px*1.0);
    }
    .qBtText1{
        width: 100%; height: auto; text-align: center;
        font-size: 30px; color: #000; font-weight: 700;
        line-height: calc(30px*1.0);
        transform: translateY(10px);
    }
    .qBtText2{
        width: 100%; height: auto; text-align: center;
        font-size: 14px; color: rgba(0,0,0,0.5); font-weight: 700;
        line-height: calc(14px*1.0);
        transform: translateY(-10px);
    }
}

    


/* ANSWER --------------------------*/
@media screen and (max-width:768px) { /*SP*/
    .aBackBT{
        width: 100%; height: auto;
        display: flex; flex-wrap: nowrap;
        justify-content: center; align-items: center;
        overflow: visible;
    }
    .aBackBT span{
        width: 100px; height: auto; text-align: center;
        border-radius: 5px; background-color: #fff;
        filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.2));
        padding: 20px;
        transform: translate(0px,30px);
        transition: 0.3s;
        font-size: 14px; color: #000; font-weight: 700;
        line-height: calc(14px*1.25);
    }
    .aBackBT span:hover{
        cursor: pointer;
        background-color: #666;
        color: #fff;
    }
    .aBG{
        background-color: #F4F3D4;
        margin: 60px 0 0 0;
        padding: 60px 0 0 0;
    }
    .aBoxLink{ display: block;width: 100%; height: 100%; transition: 0.3s; }
    .aBoxLink:hover{ opacity: 0.5; }
    .aBox{
        width: 100%; height: auto;
        border-radius: 10px; background-color: #fff;
        filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.2));
        overflow: visible;
    }
    .aBox1{
        position: relative;
        display: flex; flex-wrap: nowrap;
        justify-content: center; align-items: center;
        width: auto; height: 70px;
        overflow: visible;
    }
    .aMark{
        width: 100%; max-width: 55px; height: auto;
        backface-visibility: hidden;
        transform: translate(5px,-9px); margin: 0 -15px 0 0;
    }
    .aText{
        width: 100%; text-align: left; padding: 0 0 0 10px;
        font-size: 20px; color: #000; font-weight: 700;
        line-height: calc(20px*1.25);
        margin: 0 0 0 15px;
    }
    .aMarkS{
        width: 100%; max-width: 90px; height: auto;
        backface-visibility: hidden;
        transform: translate(70px,30px); margin: 0 0 0 -70px;
        display: none;
    }
    .aMarkS_Boxsp{
        width: calc(100% - 10px); height: auto;
        font-size: 10px; color: #000; font-weight: 700;
        line-height: calc(10px*1.25);
        display: flex; flex-wrap: nowrap;
        justify-content: center; align-items: center;
        border-radius: 10px; border: 5px solid #EEEEEE;
        margin: 0 5px 5px 5px; padding: 10px;
    }
    .aMarkS_Boxsp img{
        width: 100%; max-width: 25px; height: auto;
        backface-visibility: hidden;
        /* transform: translate(70px,30px); margin: 0 0 0 -70px; */
        margin: 0 10px 0 0;
    }
    .aIll{
        width: 100%; max-width: 90px; height: auto;
        transform: translate(-10px,-10px); margin: 0 0 0 15px;
    }
    .aBox2{
        position: relative;
        display: flex; flex-wrap: wrap;
        justify-content: center; align-items: center;
        width: 100%; height: auto;
    }
    .aBox2_L{
        display: flex; flex-wrap: wrap;
        justify-content: center; align-items: center;
        width: 100%; height: auto; text-align: center;
        margin: 0 5px 5px 5px;
    }
    .aBox2_R{
        display: flex; flex-wrap: wrap;
        justify-content: center; align-items: center;
        width: 100%; height: auto; text-align: center;
        margin: 0 5px 5px 5px;
    }
    .aBox2_M{
        display: flex; flex-wrap: wrap;
        justify-content: center; align-items: center;
        width: 100%; height: auto; text-align: center;
        margin: 0 5px 5px 5px;
    }
    .aBox2Title{
        width: 100%; height: auto;
        background-color: #DDE9EC;
        padding: 10px 5px;
        font-size: 14px; color: #000; font-weight: 700;
        line-height: calc(14px*1.25);
    }
    .aBox2Contents{
        width: 100%; height: 120px;
        background-color: #F3F3F3;
        padding: 10px;
        display: flex; flex-wrap: wrap;
        justify-content: center; align-items: center;
    }
    .aBox2_bhe{
        width: 100%; max-width: calc(235px*0.8); height: auto;
    }
    .aBox2_valux{
        width: 100%; max-width: calc(296px*0.8); height: auto;
    }
    .aBox2_adp{
        width: 100%; max-width: calc(390px*0.8); height: auto;
    }
    .aBox2_cncr{
        width: 100%; max-width: calc(344px*0.7); height: auto;
    }
    .aBox2Text01{
        width: 100%;
        font-size: 14px; color: #000; font-weight: 700;
        line-height: calc(14px*1.25);
        margin: 5px 0 0 0;
    }
    .aBox2Text02{
        width: 100%;
        font-size: 20px; color: #000; font-weight: 700;
        line-height: calc(20px*1.25);
    }
    .aBox2Text03{
        width: 100%;
        font-size: 14px; color: #797979; font-weight: 700;
        line-height: calc(16px*1.25);
        margin: 5px 0 0 0;
    }
}
@media screen and (min-width:769px) , print { /*PC&TB*/
    .aBackBT{
        width: 100%; height: auto;
        display: flex; flex-wrap: nowrap;
        justify-content: center; align-items: center;
        overflow: visible;
    }
    .aBackBT span{
        width: 100px; height: auto; text-align: center;
        border-radius: 5px; background-color: #fff;
        filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.2));
        padding: 20px;
        transform: translate(0px,80px);
        transition: 0.3s;
        font-size: 18px; color: #000; font-weight: 700;
        line-height: calc(18px*1.25);
    }
    .aBackBT span:hover{
        cursor: pointer;
        background-color: #666;
        color: #fff;
    }
    .aBG{
        background-color: #F4F3D4;
        margin: 100px 0 0 0;
        padding: 100px 0 50px 0;
    }
    .aBoxLink{ display: block;width: 100%; height: 100%; transition: 0.3s; }
    .aBoxLink:hover{ opacity: 0.5; }
    .aBox{
        width: 100%; height: auto;
        border-radius: 10px; background-color: #fff;
        filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.2));
        overflow: visible;
    }
    .aBox1{
        position: relative;
        display: flex; flex-wrap: nowrap;
        justify-content: center; align-items: center;
        width: auto; height: 120px;
        overflow: visible;
    }
    .aMark{
        width: 100%; max-width: 90px; height: auto;
        backface-visibility: hidden;
        transform: translate(15px,-5px);
    }
    .aText{
        width: 100%; text-align: left; padding: 0 0 0 10px;
        font-size: 32px; color: #000; font-weight: 700;
        line-height: calc(32px*1.25);
        margin: 0 0 0 15px;
    }
    .aMarkS{
        width: 100%; max-width: 120px; height: auto;
        backface-visibility: hidden;
        transform: translate(-40px,0px);
    }
    .aMarkS_Boxsp{
        display: none;
    }
    .aMarkS_Boxsp img{
    }
    .aIll{
        width: 100%; max-width: 180px; height: auto;
        transform: translate(-20px,0px);
    }
    .aBox2{
        position: relative;
        display: flex; flex-wrap: nowrap;
        justify-content: center; align-items: center;
        width: 100%; height: auto;
    }
    .aBox2_L{
        display: flex; flex-wrap: wrap;
        justify-content: center; align-items: center;
        width: 50%; height: auto; text-align: center;
        margin: 0 2px 4px 4px;
    }
    .aBox2_R{
        display: flex; flex-wrap: wrap;
        justify-content: center; align-items: center;
        width: 50%; height: auto; text-align: center;
        margin: 0 4px 4px 2px;
    }
    .aBox2_M{
        display: flex; flex-wrap: wrap;
        justify-content: center; align-items: center;
        width: 100%; height: auto; text-align: center;
        margin: 0 4px 4px 4px;
    }
    .aBox2Title{
        width: 100%; height: auto;
        background-color: #DDE9EC;
        padding: 20px 10px;
        font-size: 18px; color: #000; font-weight: 700;
        line-height: calc(18px*1.25);
    }
    .aBox2Contents{
        width: 100%; height: 200px;
        background-color: #F3F3F3;
        padding: 10px;
        display: flex; flex-wrap: wrap;
        justify-content: center; align-items: center;
    }
    .aBox2_bhe{
        width: 100%; max-width: calc(235px*0.8); height: auto;
    }
    .aBox2_valux{
        width: 100%; max-width: calc(296px*0.8); height: auto;
    }
    .aBox2_adp{
        width: 100%; max-width: calc(390px*0.8); height: auto;
    }
    .aBox2_cncr{
        width: 100%; max-width: calc(344px*0.7); height: auto;
    }
    .aBox2Text01{
        width: 100%;
        font-size: 14px; color: #000; font-weight: 700;
        line-height: calc(14px*1.25);
        margin: 5px 0 0 0;
    }
    .aBox2Text02{
        width: 100%;
        font-size: 20px; color: #000; font-weight: 700;
        line-height: calc(20px*1.25);
    }
    .aBox2Text03{
        width: 100%;
        font-size: 14px; color: #797979; font-weight: 700;
        line-height: calc(16px*1.25);
        margin: 5px 0 0 0;
    }
}
    


/* MODAL --------------------------*/
@media screen and (max-width:768px) { /*SP*/
    .modalBox{
        width: 100%; height: auto;
        display: flex; flex-wrap: wrap;
        justify-content: space-between; align-items: center;
        margin: 30px 0 0 0;
    }
    .modalBT{
        position: relative;
        display: flex; flex-wrap: wrap;
        justify-content: center; align-items: center;
        width: 100%; height: auto; text-align: center;
        border-radius: 5px; background-color: #444444;
        filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.2));
        padding: 20px;
        transition: 0.3s;
        font-size: 18px; color: #fff; font-weight: 700;
        line-height: calc(18px*1.25);
    }
    .modalBT:first-child{
        margin: 0 0 10px 0;
    }
    .modalBT::after{
        content: '';
        position: absolute;
        top: calc(50% - 9px); right: 20px;
        background-image: url(../img/modalPlus@2x.png);
        background-size: 18px 18px;
        background-repeat: no-repeat;
        background-position: center center;
        width: 18px; height: 18px;
    }
    .modalBT:hover{
        cursor: pointer;
        background-color: #666;
        color: #fff;
    }
    .modalBT span{
        width: 100%;
        font-size: 12px; color: #fff; font-weight: 400;
        line-height: calc(12px*1.25);
        margin: 5px 0 0 0;
    }
}
@media screen and (min-width:769px) , print { /*PC&TB*/
    .modalBox{
        width: 100%; height: auto;
        display: flex; flex-wrap: nowrap;
        justify-content: space-between; align-items: center;
        margin: 50px 0 0 0;
    }
    .modalBT{
        position: relative;
        display: flex; flex-wrap: wrap;
        justify-content: center; align-items: center;
        width: calc(50% - 10px); height: auto; text-align: center;
        border-radius: 5px; background-color: #444444;
        filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.2));
        padding: 20px;
        transition: 0.3s;
        font-size: 18px; color: #fff; font-weight: 700;
        line-height: calc(18px*1.25);
		margin: 0 auto;
    }
    .modalBT::after{
        content: '';
        position: absolute;
        top: calc(50% - 9px); right: 20px;
        background-image: url(../img/modalPlus@2x.png);
        background-size: 18px 18px;
        background-repeat: no-repeat;
        background-position: center center;
        width: 18px; height: 18px;
    }
    .modalBT:hover{
        cursor: pointer;
        background-color: #666;
        color: #fff;
    }
    .modalBT span{
        width: 100%;
        font-size: 12px; color: #fff; font-weight: 400;
        line-height: calc(12px*1.25);
        margin: 5px 0 0 0;
    }
}
@media all and (-ms-high-contrast:none){
    *::-ms-backdrop, .modalBT { line-height: 30px!important; } /* IE11 */
    .qMark,.qIll_a,.qIll_b,.qIll_c,.qIll_d,.qIll_e,.qIll_f,.aMark,.aMarkS,.aIll { width: auto; }
}   


/* COMPARISON --------------------------*/
@media screen and (max-width:768px) { /*SP*/
    .compsBox{
        margin: 70px 0 0 0;
        border-radius: 7px;
    }
    .compsTitle{
        font-size: 20px; color: #000; font-weight: 700;
        line-height: calc(30px*1.25);
        background-color: #f3f3f3;
        margin:0 0 7px 0; padding: 10px 0;
        text-align: center;
    }
    .compsTableBox{
        width: 100%;
        overflow-x: scroll;
    }
    .compsTable{
        width: 800px; max-width: 1000px; height: auto;
        backface-visibility: hidden;
    }
    .compsText{
        font-size: 12px; color: #000; font-weight: 400;
        line-height: calc(14px*1.25);
        margin: 5px 0 0 0;
    }
    .compsText a{
        color: #7BA6D9;
    }
    .compsText a:hover{
        text-decoration: underline;
    }
}
@media screen and (min-width:769px) , print { /*PC&TB*/
    .compsBox{
        margin: 100px 0 0 0;
        border-radius: 7px;
    }
    .compsTitle{
        font-size: 30px; color: #000; font-weight: 700;
        line-height: calc(30px*1.25);
        background-color: #f3f3f3;
        margin:0 0 10px 0; padding: 30px 0;
        text-align: center;
    }
    .compsTableBox{
        width: 100%;
    }
    .compsTable{
        width: 100%; max-width: 1000px; height: auto;
        backface-visibility: hidden;
    }
    .compsText{
        font-size: 12px; color: #000; font-weight: 400;
        line-height: calc(14px*1.25);
        margin: 5px 0 0 0;
    }
    .compsText a{
        color: #7BA6D9;
    }
    .compsText a:hover{
        text-decoration: underline;
    }
}