@charset "utf-8";

/******************** START COMMON ********************/

/* background */
.bg{
    height: 100%;
    overflow: hidden;
}
.blue.bg{
    background: #eef8fe;
}
.blue{
    color: #0066cc;
}

/* tab (page anchor) */
/*
.tabLayout.tabItemWrapper div{
	position: relative;
}
.tabLayout.tabItemWrapper a{}
.tabItem a span{
    position: relative;
    display: inline-block;
    padding-right: 20px;
}
.tabItem a span::before{
    content: '';
    width: 6px; height: 6px;
    border: 0px;
    border-color: #004386;
    border-top: solid 2px;
    border-right: solid 2px;
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    position: absolute; top: 50%; right: 0;
    margin-top: -6px;
}
.anchor{
    padding-top: 100px;
}
*/


/* container */

/* coloumn */
section .column{
    float: left;
}
section .column2,
section .column3{
    height: 100%;
    overflow: hidden;
    margin: auto;
}
section .column2 .column{
    width: 49%;
    padding: 24px;
}
section .column3 .column{
    width: 33%;
    padding: 12px;
}

/* article */
div.sectioning section article{
	clear: both;
	height: 100%;
	overflow: hidden;
	margin: 30px 0;
}

/* servicesOffered */
section.section_offered div.servicesOffered_component{
	position: relative;
	width: 1260px;
	margin: auto;
}

/* nav */
section .nav{
}
section .nav ul{
    display: inline-block;
    list-style: none;
    height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
section .nav ul li{
    display: inline-block;
    vertical-align: top;
}

#about div.more ul.list{
    display: inline-table;
    padding-left: 0;
}
#about div.more ul.list li{
    display: inline-grid;
    margin: 4px;
}
#about div.more ul.list li a{
    width: 260px;
}
#about .movie{
	text-align: center;
	margin-bottom: 15px;
}
#about .movie a{
	position: relative;
	display: inline-block;
	overflow: hidden;
}
#about .movie a::before{
	content: "";
	position: absolute;
	top: 125px;
	left: 250px;
	display: flex;
	width: 70px;
	height: 70px;
	background: url("/content/dam/nttcom/hq/jp/business/solutions/cloud-based-ict-infrastructure/sase-solution/img/icon_play.png") no-repeat;
}
#about .movie a:hover::before{
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

#model .column3 .column p{
	margin: 0 18px;
}
#model .movie{
	text-align: center;
	margin-bottom: 15px;
}
#model .movie a{
	position: relative;
}
#model .movie a{
	display: inline-block;
	overflow: hidden;
	width: 320px;
}
#model .movie a::before{
	content: "";
	position: absolute;
	top: 55px;
	left: 125px;
	display: flex;
	width: 70px;
	height: 70px;
	background: url("/content/dam/nttcom/hq/jp/business/solutions/cloud-based-ict-infrastructure/sase-solution/img/icon_play.png") no-repeat;
}
#model .movie a:hover::before{
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}
#component .column2 .column figure{
	text-align: center;
}
#component .column2 .column ul{
	list-style: none;
}
#component .column2 .column li{
	color: #1d7db4;
	font-weight: bold;
	line-height: 2;
}

#component .column3 .column{
	height: 180px;
	background: #1e7fb7;
	border: solid 4px #fff;
	border-radius: 10px;
}
#component .column3 .column2 figure.column{
	width: 62px !important;
	height: auto;
	color: #fff;
	border: none;
	padding: 0;
	margin: 5px 20px 0 10px;
}
#component .column3 .column2 div.column{
	display: block;
	width: 290px;
	height: 100%;
	overflow: hidden;
	background: #fff;
	padding: 12px;
}
#component .column3 .column2 div.column h2{
	text-align: left !important;
	color: #1d7db4;
	font-size: 16px;
	font-weight: bold;
	margin: 0 0 10px;
}
#component .column3 .column2 div.column p{
}

@media only screen and (min-width: 769px){
    br.is_sp{
        display: none;
    }

}
@media only screen and (max-width: 480px){
    br.is_sp{
        display: none;
    }
}
@media only screen and (max-width: 768px){
    br.is_sp{
        display: none;
    }
    #about .movie a,
    .tabNavigation_contents #about .movie a img,
    .tabNavigation_contents img,
    #model .movie a{
	    width: 270px !important;
    }
    #about .movie a::before,
    #model .movie a::before{
	    top: 40px;
	    left: 100px;
    }
}
@media only screen and (min-width: 769px){
    #about .movie a {
    	width: 569px;
    }
}

/* list */
ul.list{
    list-style: none;
    padding-left: 0;
    text-align: center;
}
ul.list li.entry{
    display: inline-block;
    vertical-align: top;
}
ul.list li.entry ul.data{
    list-style: none;
    padding-left: 0;
    
}
ul.list li.entry ul.data li.entry{

}
ul.list li.entry ul.data li.attr_img{
    
}
ul.list li.entry ul.data li.attr_img img a{
    display: block;
}


ul.list li.entry ul.data li.attr_ico{
    
}
ul.list li.entry ul.data li.attr_h{
    
}
.page_main ul.list li.entry ul.data li.attr_h{
	
}
ul.list li.entry ul.data li.attr_p{
    text-align: left;
}
ul.list li.entry ul.data li.attr_tag{
    
}
ul.list li.entry ul.data li.attr_tag ul{
    color: #666;
    text-align: right;
    list-style: none;
    padding-left: 0;
}
ul.list li.entry ul.data li.attr_tag ul li{
	display: inline;
	margin-right: 18px;
}
ul.list li.entry ul.data li.attr_tag ul li::before{
    content: "#";
}


/* button */
section div.more{
	text-align: center;
	margin-top: 15px;
}
section div.more a{
	color: #004386;
	text-decoration: none;
	line-height:1.5;
}

section div.more a.btn_line{
	display: inline-block;
	font-size: 16px;
	/*background-color: #fff;*/
	border: solid 1px #004386;
	padding: 10px 20px;
}
section div.more a.btn_line:hover{
	color: #fff;
	background-color: #004386;
}
section div.more a.btn_line::after{
    content: "";
    padding-left: 10px;
}

section div.more a.btn_underline{
	display: inline-block;
	font-size: 16px;
	color: #004386;
	background-color: #EDF6FF;
	padding: 24px 30px;
	text-decoration: underline;
}
section div.more a.btn_underline:hover{
	color: #fff;
	background-color: #004386;
}

/* a */
/*
#page_topics .section01 article ul.list li.entry ul.data li.attr_h h4 a:hover,
#page_issue .section01 article ul.list li.entry ul.data li.attr_tag ul li a:hover{
    border-bottom: dotted 1px #004386;
}
*/


/* img */
section article img{
    max-width: 100%;
}
section article img.border{
    border: solid 1px #ccc;
    margin: 20px 46px;
}
section.container img{
    margin: 20px 47px;
}
/*
ul.list li.entry ul.data li.attr_img img,
div.sectioning div.image img,
#page_issue .section01 .nav ul.menu_main li a,
#page_issue .section01 .nav ul.menu_sub li a{
    background: #f0f0f0;
}
*/

/* table */
section table{
    margin: 20px auto;
}
section table thead tr th,
section table tbody tr th{
    text-align: center;
    vertical-align: middle;
}
section table tr td{
    background: #fff;
}
section table tr td ul{
    list-style: disc inside;
    padding-left: 5px;
}

/* notes */
section ul.notes{
    padding-left: 20px;
}
section ul.notes li::before{
    content: "窶ｻ";
    margin: 0 4px 0 -20px;
}


/* other */
section strong{
	font-weight: bold;
}
section .column .bb{
    border-bottom: double 3px #ccc;
    padding-bottom: 0.8em;
    margin-bottom: 0.8em;
}
section .column3 .column h2.hl01 span.ttl{
    font-size: 24px;
}
section .column3 .column ul{
    list-style: disc outside;
    padding-left: 20px;
}
section .column3 .column ul li{
    margin-bottom: 10px;
}
/******************** END COMMON ********************/



/******************** START ORIGINAL ********************/

#tab1-4 a {
	display: initial;
	line-height: normal;
}

#tab1-6 span{
	display: initial;
	line-height: normal;
}

#page_about .section02 .article01 ul.list div.more a.btn_line{
	font-size: 16px;
	padding: 6px 12px;
}

div#contact{
    padding-top: 100px;
}
.contact_bt a:after{
    content: none;
}


@media only screen and (max-width: 768px){
    br.is_pc{
        display: none;
    }
    
    #component .column3 .column{
    	height: auto;
    }
    
    #about iframe{
        height: 100%;
    }
}

/******************** END ORIGINAL ********************/


@media only screen and (max-width: 768px){
	section.section_offered div.servicesOffered_component{
	    width: 100%;
	}
    section .column2,
    section .column3,
    section .column2 .column,
    section .column3 .column{
    	float: none !important;
    	width: auto !important;
    }
    section div.more a.btn_underline{
    	padding: 10px;
    }
    #component .column3 .column2 figure.column{
    	margin: auto;
    }
    #component .column3 .column2 div.column h2{
    	text-align: center !important;
    }
    
    .contact_bt{
        padding: 12px 10px;
    }
    .contact_bt a{
        font-size: 16px;
    }
}