@charset "UTF-8";

/* -------------------------
TOP用.
--------------------------*/


h1 span {
    font-size: 30px;
}

h3 {
    font-size: 27px !important;
}

h4 {
    font-size: 20px !important;
}

main li {
    line-height: 2em;
    /* TOPのみ2em*/
}

.annotation {
    font-size: 90%;
}

.topics dl {
    padding: 15px 0 0;
}

.topics dt {
    padding-bottom: 5px;
    font-weight: bold;
    float: left;
}

.topics dd {
    line-height: 1.5em;
    float: left;
}

@media screen and (min-width: 768px) {
    .topics dt {
        clear: left;
        float: left;
        width: 15%;
    }

    .topics dd {
        margin-left: 15%;
    }
}

/* ニュース・お知らせ */
.c-news-list {
    line-height: 1.4;
    padding-left: 0px;
}

.c-news-list li {
    border-bottom: 1px solid #cddbde;
    margin-bottom: 10px;
    padding-bottom: 10px;
    display: flex;
}

.c-news-list li .date {
    width: 155px;
    clear: both;
    font-weight: bold;
    display: block;
}

.c-news-list .txt {
    /* font-size: 14px; */
    display: block;
    width: calc(100% - 255px);
}

@media screen and (max-width: 768px) {
    .c-news-list li {
        display: block;
    }

    .c-news-list li .date,
    .c-news-list li .txt {
        width: 100%;
    }

    .new-style-2019-06 .section-news .c-news-list {
        border-bottom: none !important;
    }
}

.c-news-list .txt a:hover {
    text-decoration: underline;
}

/* icon設置のため非表示
.c-news-list .txt a:before {
content: url(/content/dam/nttcom/cmn/img/icon_right_arrow.png);
margin-right: 5px;
}
*/


/* Re ConnectX banner */

.banner_link_re-connect-x{ width: 55%; margin:0 auto; }
.banner_link_re-connect-x img { width: 100%; vertical-align: top;}

@media screen and (max-width: 768px) {
    .banner_link_re-connect-x{ width: 100%;}
}




/* お問い合わせボタン */
.contact-link {
    display: inline-block;
    padding: 0;
    margin: 0;
    font-weight: bold;
}

.contact-link a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0.5em 1em;
    margin: 0;
    border: solid 1px #004386;
    background-color: #fff;
}

.contact-link a:hover {
    color: #fff;
    background-color: #004386;
}

.contact-link p {
    font-size: 150%;
}

@media screen and (max-width: 768px) {
    .contact-link p {
        font-size: 85%;
    }
}


table.service_table {
    width: 1200px;
    line-height: 1.4em;
}

table.service_table thead tr {
    background-color: #ccdcff;
}

table.service_table thead td {
    text-align: center;
}

table.service_table thead td.left-cell,
table.service_table tbody td.left-cell {
    width: 250px;
    vertical-align: middle;
}

table.service_table tbody tr {
    background-color: #fff;
}

table.service_table tbody td p {
    text-indent: 1em;
}

@media screen and (max-width: 768px) {
    .scroll-table {
        overflow: auto;
    }

    table.service_table td {
        padding: 5px;
    }

    table.service_table thead td.left-cell,
    table.service_table tbody td.left-cell {
        width: 160px !important;
    }
}

/* ul.section_block_list li{ margin-bottom: 25px;} */

.kanren-banner{ 
    display: flex; 
    flex-direction: row;
    justify-content: space-between;
}

.link_ntt_img {
    flex-basis: 49%;
    margin: 0;
    padding: 0;
}

.link_ntt_img img {
    width: 100%;
}

@media screen and (max-width: 768px) {
    .kanren-banner { flex-direction: column; }
    .link_ntt_img:first-child { margin-bottom: 20px }
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

/* menu 4column */
.col_4 {
    width: 100%;
    display: flex;
    display: -ms-flexbox;
    /* IE10 */
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    /* IE10 */
}

.col_4>div {
    width: 25%;
    /* padding: 10px; */
}

@media screen and (max-width: 768px) {
    .col_4>div {
        width: 100%;
    }
}

/* 5column */
.col_5 {
    width: 100%;
    display: flex;
    display: -ms-flexbox;
    /* IE10 */
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    /* IE10 */
}

.col_5>div {
    width: 20%;
    /* padding: 10px; */
}

.col_5>div>div {
    position: relative;
    overflow: hidden
}

@media screen and (max-width: 768px) {
    .col_5>div {
        width: 100%;
    }
}

/* menu */
.menu {
    background-color: #004386;
}

.menu div {
    border: 1px solid #fff;
    color: #ffff;
}

.menu div a {
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px 0;
    color: #fff;
    background-color: #004386;
}

.menu div a:hover {
    color: #fff;
    background-color: #33699e;
}

.menu div a:visited {
    color: #fff;
}

.menu div a:active {
    color: #fff;
}


/* link underline */
.link-under {
    font-weight: bold;
    text-align: center;
}

.link-under a:hover {
    text-decoration: underline;
}

/* link 別窓 */
li span.blank-link a:after,
li.blank-link a:after {
    content: url(/content/dam/nttcom/hq/jp/about-us/img/icon_new_window.png);
    vertical-align: middle;
    margin-left: 5px;
}

/* list link */
ul.list-link {
    list-style: none;
    padding-left: 23px;
}

ul.list-link2 {
    list-style: none;
    padding-left: 0px;
}

ul.list-link a:hover,
ul.list-link2 a:hover {
    text-decoration: underline;
}

ul.list-link a:before,
ul.list-link2 a:before {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    background: url(/content/dam/nttcom/hq/jp/about-us/covid-19/img/link_arrow.png) no-repeat;
    background-size: contain;
    padding-left: 14px;
}

/* icon */
.icon {
    width: 100px;
}

.icon>.inner-news,
.icon>.inner-update {
    width: 100%;
    margin-right: 10px;
    padding: 2px 12px 3px;
    border-radius: 15px;
    font-size: 75%;
    text-align: center;
}

.icon>.inner-news {
    background-color: #004386;
    color: #fff;
}

.icon>.inner-update {
    background-color: #fff;
    color: #004386;
    border: 1px solid #004386;
}

/* phone table */
table.phone {
    box-sizing: border-box;
    border-collapse: collapse;
    text-align: left;
    width: 600px;
}

table.phone th,
table.phone td {
    border: 1px solid #999;
    padding: .1em .8em;
}

table.phone th {
    width: 60%;
    background: #d2e4fb;
}

table.phone td {
    width: 60%;
    background: #fff;
}

@media (max-width: 650px) {
    table.phone {
        width: 100%;
    }

    table.phone th {
        font-size: 90%;
    }

    table.phone th,
    table.phone td {
        display: block;
        width: 100%;
    }

    table.phone th,
    table.phone td {
        border-top: none;
    }

    table.phone tr:first-child th {
        border-top: 1px solid #999;
    }
}


@media screen and (min-width: 768px) {
    .sp_br {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .menu div a {
        padding: 10px 0;
    }
}