@charset "utf-8";
/* CSS Document */
html{
    font-size: 62.5%;
}
body.tele_main{
    font-size: 1.5rem;
}

.sp .tele_main{
    color: black;
}
span.marker{
    background: linear-gradient(transparent 40%, #f6ff5f 40%);
}

.tele_main p{
    font-size: 15px;
    font-size:calc(1.2rem + ((1vw - 0.3rem) * 0.1875));
    margin-top: 0.5em;
    line-height: 1.7;
}
.tele_main h1{
    font-size: 30px;
    font-size: calc(2.2rem + ((1vw - 0.3rem) * 0.5));
    margin: 0.5em 0;
    color: black;
    text-align: center;
}
.tele_main{
	width: 98%;
	margin: auto;
    padding: 0 3em;
}
.sp .tele_main{
    padding: 0;
    width: 95%;
}
p.lead{
	font-size: medium;
    text-align: center;
    margin: 2em 0;
    color: black;
}
.navi{
    margin: 4em auto 2em auto;
}
.navi p.mokuji{
    font-weight: 700;
    text-align: center;
    font-size: larger;
}
.navi p{
    text-align: center;
}
.navi ul{
    border: 3px solid #cbcbcb;
    border-radius: 0.5em;
    padding: 1.5em;
    margin: 1em auto 0 auto;
    max-width: 400px;
}
.navi ul li{
    margin-top: 0.3em;
    font-weight: 700;
}
.sp .navi ul li{
    margin-top: 1em;
}
.tele_main h2{
    font-size: 26px;
    font-size:  calc(2rem + ((1vw - 0.3rem) * 0.375));
    border-bottom: 3px solid #bcbcbc;
    margin: 3em 0 1em  0;
    color: black;
}
h2#section3{
    margin-top:0 ;
}
ul.merit{
    list-style: square;
    margin: 1em;
}
ul.merit li{
    margin: 0.5em 1em;
}
p.rednote{
    color: red;
    margin-top:5em;
    font-weight: 600;
}
ul.graph{
    display: flex;
    margin: 1em auto;
}
.sp ul.graph{
    flex-direction: column;
}
ul.graph li {
    width: 50%;
    text-align: center;
    font-weight: 800;
}
.sp ul.graph li{
    width: 100%;
}
ul.graph li p{
    margin: 1em auto;
}
ul.graph li img{
    height: 250px;
}
.sp ul.graph li img{
    height: auto;
    width: 100%;
}
.tele_main .highlight{
    margin: 2em 0;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
    }
.highlight dt{
     font-size: 1.2em;
    background: #318bad;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.highlight dd{
     padding: 15px 20px;
    margin: 0;
}
.tele_main h3{
    font-size: 24px;
    font-size: calc(1.8rem + ((1vw - 0.3rem) * 0.375));
    margin:2em 0 1em 0;    
    text-align: center;
}
.tele_main h3.cp_free{
    background-color: #b13e69;
    padding: 0.5em 0;
    border-radius: 1em;
    color: white;
}
.tele_main h4{
    padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #fffaf4;/*背景色*/
  border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
  margin: 2em 0 1em 0;
}
p.note{
    font-size: smaller;
}
div.point ul{
    display: flex;
    justify-content: space-between;
}
.sp div.point ul{
    flex-direction: column;
}
div.point ul li:first-child{
    width: 68%;
}
.sp div.point ul li:first-child{
    width: 100%;
}
div.point ul li:last-child{
    width: 30%;
}
.sp div.point ul li:last-child{
    width: 80%;
    margin: auto;
}
div.point ul li:last-child img{
    width: 100%;
}
table.cp_table{
    margin: 1em auto;
    font-size: 1.1em;
}
table.cp_table td{
    padding: 0 0.8em 0 0.8em;
}
table.cp_table th{
    white-space: nowrap;
    -moz-text-align-last: justify;
    text-align-last: justify;
    color:#318bad;
    font-weight: 700;
}
th.long_th{
    width: 9em;
}
img.text_space{
    margin: 1em 0;
    width: 100%;
}
ul.roumu{
    list-style: disc;
    margin:1em;
}
ul.roumu li{
    margin-top:2em;
}
span.bold{
    font-weight: 700;
}
table.speed{
    margin: 1em auto;
    table-layout: auto;
}
.sp table.speed{
    width: 95%;
}
table.speed caption{
    font-weight: 700;;
}
table.speed th{
    background-color: rgb(87, 87, 87);
    padding: 2%;
    font-weight: 600;
    white-space: nowrap;
    word-break: keep-all;
    color: white;
    border: white 1px solid;
    text-align: center;
    min-width: 5em;
}
.sp table.speed tr{
    display: block;
    float:left;
    width: 33%;
}

.sp table.speed tr:last-child{
    float: right;
}
.sp table.speed th,
.sp table.speed td{
    display: block;
    width: 100%;
}
.sp table.speed tr > th{
    height:30px;
}
.sp table.speed tr > td{
    height:24px;
}
.sp table.speed tr:first-child > th{
    height:66px;
}
table.speed td{
    border: 1px solid lightgrey;
    padding: 5px;
    text-align: right;
}
ul.tannouki{
    display: flex;
    justify-content: space-between;
    margin:2em auto;
}
.sp ul.tannouki{
    flex-direction: column;
}
ul.tannouki li{
    border: 1px #807596 solid;
    padding: 1em;
    width: 45%;
    text-align: center;
}
.sp ul.tannouki li{
    width: 100%;
    margin-top: 2em;
    padding: 0;
}
ul.tannouki li a p:first-of-type{
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 1em;
}
ul.tannouki li img{
    max-width: 80%;
    max-height: 70%;
}
a.btn{
    padding: 1em;
    background-color: #4d5269;
    color: white;
    font-weight: 800;
    display: block;
    margin: 2em auto;
    text-decoration: none;
    width: 20em;
    text-align: center;
}

p.movie_ttl{
    margin-top: 3em;
}
div.movie{
    margin-top:1em;
    position: relative;
    padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
    height: 0;
    overflow: hidden; 
}
div.movie iframe{
    position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
div.movie p{
    margin-top: 2em;
}

.contact .title{
    text-align: center;
    padding: 2%;
    width:70%;
    background-color: lightgray;
    font-weight: 700;
    margin: auto;
}
.sp .contact .title{
    width: 95%;
}
.contact .call{
    padding: 2%;
    width: 70%;
    border: 1px solid lightgray;
    margin: auto;
    text-align: center;
}
.sp .contact .call{
    width: 95%;
}
.contact .btn{
    margin:1em auto;
}
span.tel{
    font-size: 3em;
}
@media screen and (min-width: 751px){
    span.tel a {
      pointer-events: none;
    }
  }
.cp_tele{
    font-weight: 500;
    color: red;
}
.keiyaku{
    display: flex;
    border:#5b6878 2px solid;
    border-radius: 0.5em;
    margin: 1em;
}
.sp .keiyaku{
    flex-direction: column;
}
.keiyaku p{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #5b6878;
    color: white;
    width: 20%;
    margin: 0;
    padding: 2em 0;
    font-weight: 700;
}
.sp .keiyaku p{
    width: 100%;
    padding: 1em 0;
}
.keiyaku ul{
    width: 80%;
    padding: 1em 0.5em 1em 1.5em;
    list-style: square;
}
.sp .keiyaku ul{
    width: 90%;
}
.tele_main .cp_yusho dt{
    background-color: #b13e69;
    padding:1em 0;
}
.cp_yusho{
    border: 2px solid #b13e69;
}
.link_ttl{
    font-weight: 700;
    font-size: larger;
    color: #0e44a8;
}
.link_ttl::before{
    content:"▶　";
}
img.w_i{
    width: 25%;
}
ul.recomend{
    display: flex;
    margin-top: 3em;
    justify-content: space-between;
    border: 3px solid #9fb0bf;
    padding: 1em;
    border-radius: 1em;
}
ul.recomend img{
    max-width: 70%;
    width: none;
    margin-top: 1em;
}
ul.recomend li:first-child{
    width: 40%;
    text-align: center;
}
ul.recomend li:last-child{
    padding:0.5em;
    width: 60%;
    font-weight: 700;
    font-size: 1.1em;
}
a.longurl{
    word-break: break-all;
}
ul.movie_list{
    display: flex;
    justify-content: space-between;
}
.sp ul.movie_list{
    flex-direction: column;
}
ul.movie_list li{
    width: 48%;
}
.sp ul.movie_list li{
    width: 100%;
}
p.addnote{
    color:red;
    font-weight: 700;
    margin-left: 1em;
}
.center_img{
    margin: 2em auto;
    text-align: center;
}
.center_img img{
    max-width: 100%;
}
ul.tele_style{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.sp ul.tele_style{
    flex-wrap: wrap;
}
ul.tele_style > li{
    text-decoration: none;
}
ul.tele_style > li:first-child{
    width: 65%;
}
.sp ul.tele_style > li:first-child{
    width: 100%;
}
ul.tele_style > li:last-child{
    width: 33%;
}
.sp ul.tele_style > li:last-child{
    width: 100%;
    text-align: center;
    margin-top: 1em;
}
ul.tele_style > li:last-child img{
    max-width: 100%;
}
ul.tele_style li ul{
    margin-top:1em;
    margin-left: 2em;
    padding-left: 2em;
}
ul.tele_style li ul li{
    list-style: disc;
}
ul.tele_style + p{
    margin-top:2em;
}
.page_slct{
    display: flex;
    justify-content: space-between;
}
.sp .page_slct{
    flex-wrap: wrap;
}
.page_slct li{
    width: 48%;
}
.sp .page_slct li{
    width: 100%;
}
.page_slct li:first-child .page_btn{
    text-align: left;
}
.page_btn{
    padding: 1em;
    text-align: right;
    margin: 2em 0 2em auto;
    display: block;
    width: 45%;
    text-decoration: none;
    color: black;
    font-weight: bold;
}
.sp .page_btn{
    margin: 0;
    width: 100%;
}
.page_slct li .page_btn{
    width: 100%;
}
.security_topic{
    padding:0.5em auto;
}
.security_topic::before{
    content:"";
	display:inline-block;
	width:1em;
    height:1em;
    vertical-align: middle;
	background:url(../telework/images/new_std/sheild.png) no-repeat;
	background-size:contain;
    margin-right:5px;
}
.security_topic::after{
    content:"";
	display:inline-block;
	width:1em;
    height:1em;
    vertical-align: middle;
	background:url(../telework/images/new_std/sheild.png) no-repeat;
	background-size:contain;
    margin-left:5px;
}
.half{
    display: flex;
    justify-content: space-between;
    margin: 2em auto;
    flex-wrap: wrap;
}
.half li{
    width: 48%;
    border: #199BFF 4px solid;
    border-radius: 1em;
    margin-top: 1em;
}
.graph_jn li{
    border: none;
}
.sp .half li{
    width: 100%;
}
.half li .center_img{
    margin: 1em auto;
}
.tele_main .half li h4{
    border-left: none;
    background-color: #199BFF;
    text-align: center;
    margin: 0;
    color: white;
}
.half li p{
    padding: 2%;
}
.half li h4 + p{
    font-weight: 800;
    text-align: center;
    font-size: 18px;
    font-size: 1.3em;
}
.half li img{
    text-align: center;
    margin: auto;
    max-width: 100%;
}

.half li:last-child{
    width: 100%;
}
.graph_jn li:last-child{
    width: 48%;
}
.sp .graph_jn li:last-child{
    width: 100%;
}
.graph_jn p{
    text-align: center;
}
.graph_jn img{
    height:340px;
}
.sp .graph_jn img{
    height: auto;
}
.option{
    margin-top:1em;
    border: #F6AC00 4px solid;
}
.option h4{
    border:none;
    background: #F6AC00;
    color: white;
    padding:0.5em 0;
    margin: 0;
    text-align: center;
    font-size: larger;
}
.option h4 + p{
    font-weight: 800;
    font-size: 1.3em;
    text-align: center;
}
.option h4 + p img{
    max-width: 320px;
    max-height: 70px;
    margin: 1em auto;
}
.sp .option h4 + p img{
    max-width: 90%;
    max-height:90%;
}
.option span{
    font-size: 1em;    
}
.option p{
    padding:0 1%;
}
.graph_ttl{  
    font-weight: 800;
}

.option ul.tele_style {
    padding: 10px;
}
h3.line_point{
    text-align: left;
    font-size: 18px;
    font-size: 1.3em;
}
.recomend_vaio{
    border: #707CAE 4px solid;
    margin: 2em auto;
}
.recomend_vaio h3{
    background-color: #707CAE;
    color: white;
    margin-top: 0;
}
.store ul,
.recomend_vaio ul{
    display: flex;
    margin: 1em auto 0 auto;
    justify-content: space-between;
}
.sp .store ul,
.sp .recomend_vaio ul{
    flex-wrap: wrap;
}
.store ul,
.recomend_vaio ul li{
    padding: 10px;
}
.store ul li img,
.recomend_vaio ul li img{
    max-width: 100%;
}
.store ul li:first-child,
.recomend_vaio ul li:first-child{
    width: 35%;
}
.sp .store ul li:first-child,
.sp .recomend_vaio ul li:first-child{
    width: 100%;
}
.store ul li:last-child,
.recomend_vaio ul li:last-child{
    width: 62%;
}
.sp .store ul li:last-child,
.sp .recomend_vaio ul li:last-child{
    width: 100%;
}
.recomend_vaio ul li p:first-child{
    font-weight: 800;
}
.recomend_vaio ul li >p span{
    background-color: #6EA5BA;
    color: white;
    padding: 5px;
    margin: 0 5px;
    width: 300px;
    border-radius: 5px;
}
.recomend_vaio ul.thin{
    background-color: #bbe5ff;
    margin:10px;
}
.recomend_goods{
    display: flex;
    justify-content: space-around;
}
.recomend_goods{
    flex-wrap: wrap;
}
.recomend_goods li{
    width: 45%;
    text-align: center;
}
.sp .recomend_goods li{
    width: 100%;
}
.recomend_goods li img{
    height: 150px;
}
.recomend_goods li img{
    text-align: center;
}
.recomend_goods li img + p{
    font-weight: 800;
}
.recomend_goods a + p{
    text-align: left;
}
.store{
    border:1px solid #D99F2B;
    padding: 20px;
    margin:4em auto;
}
.store ul li p:first-child{
    font-weight: 800;
}
.store > a > img{
    margin:1.5em auto;
}
.emphasisWrapper{
    margin:0;
}
.img_left{
    display: flex;
}
.sp .img_left{
    flex-wrap: wrap;
}
.img_left li{
    padding: 10px;
}
.img_left li img{
    max-width: 100%;
}
.img_left li:first-child{
    width: 30%;
    text-align: center;
}
.sp .img_left li:first-child{
    width: 100%;
}
.movie_link{
    margin: 2em auto;
    text-align: center;
}
.movie_link a{ 
    display: block;
    position: relative;
}
.movie_link a::before{
    background: url(/images/yt_icon_rgb.png) center center / 90px 64px no-repeat;
    content: "";
    display: block;
    width: 90px;
    height: 64px;
    margin: -32px auto 0;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 1;
}
.movie_link img{
    width:70%
}
.sp .movie_link img{
    width: 98%;
}
.monitor{
    margin: 2em auto;
}
.monitor p:first-child{
    font-weight: 800;
}
table.incident{
    margin: auto;
    width: 60%;
}
.sp table.incident{
    width: 100%;
}
.incident td{
    border: white 1px solid;
    padding: 10px;
    background: #F5F2DC;
    color: black;
}
.incident th{
    padding: 10px;
    color: white;
    font-weight: 800;
    background-color: #5C5B53;
    border: 1px solid white
}
a.cp_link{
    display: block;
    text-decoration: none;
    background-color: #b13e69;
    padding: 0.5em 0;
    border-radius: 1em;
    color: white;
    font-weight: 800;
    font-size: 18px;
    font-size: 1.3em;
    width: 545px;
    width: 30em;
    margin: 1em auto;
    text-align: center;
}
.sp a.cp_link{
    width: 95%;
}
.note_sim{text-align: center;
    margin-bottom: 1.3em;
    display: block;
    color: red;}