@charset "UTF-8";


/* =========================================================
 * ページ全体の定義
 * @ PAGE
 * ====================================================== */
body {
	/* background-image:url(/content/dam/nttcom/cmn/img/backgrounds/bg-l-services-detail-lvl2.jpg); */
}
p {
	line-height: 1.2;
}
h2{
	text-align:center;
	font-size:28px;
	margin-bottom:40px;
	margin-top:90px;
}
.readTxt p{
	text-align:center;
	font-size:20px;
	margin-bottom:90px;
}
.accordion_header{
	border:none;
	font-size:20px;
}
.area1{
	margin-top:0px;
	margin-bottom:0px;
}
.area1 .image_component{
	margin-bottom:0;
}

.area2 h1{
	margin:0 auto;
	font-size:36px;
}
.sp_only{
	display:none;
}
.area4-5Wrap{
	display:table;
	width:100%;
}
.area4{
	width:938px;
	display:table-cell;
	vertical-align:top;
	text-align:center;
	margin:0 auto;
}

.area5{
/*	float:right;*/
	width:287px;
	display:table-cell;
	vertical-align:top;
	text-align:right;
}
.area5 ul{
	list-style:none;
	margin:0;
	padding:0;
}
.area5 ul li{
	background:#ffdc57;
	padding:32px 10px 32px 20px;
	border-bottom:1px solid #fff;
	text-align:left;
}
.area5 ul li a{
	display:block;
	color:#000;
}

.area5 ul li img {
	margin-right: 10px;
	vertical-align: middle;
	float:left;
}
/*5/13不要連絡により削除
.area5 ul li.chat{
	padding:13px 10px 13px 30px;
}
.area5 ul li.chat img{
	margin-top:13px;
}
*/
/*ポイント1.2.3*/

.pointBox{
	width:398px;
	float:left;
	border:7px solid #ededed;
	position:relative;
	padding:65px 15px 20px;
}
.pointBox:first-child{
	margin-right:25px;
}
.pointBox:last-child{
	float:right;
}
.pointBox .pointMark{
	width: 74px;
	height: 74px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background-color: #d80000;
	color:#fff;
	text-align:center;
	position:absolute;
	top:-32px;
	left:152px;
}
.pointBox .pointMark p{
	font-size:30px;
	padding-top:10px;
}
.pointBox .pointMark p span{
	font-size:16px;
}
.pointBox .pointDetail{
	font-size:20px;
}
.pointBox .pointDetail p.strongTxt{
	color:#d80000;
	font-size:27px;
	margin-bottom:10px;
}
.pointBox .pointDetail p.strongTxt span{
	color:#000;
	font-size:20px;
}
.pointBox .pointDetail p.note{
	font-size:12px;
	text-indent:-1em;
	padding-left:1rem;
}
.feeBox{
	margin:15px 0 40px;
}
.feeBox .tax{
	text-align:right;
	font-size:12px;
}
.feeBox sup{
	color:#1300ca;
}
.feeBox .jimu,
.feeBox .kouji{
	border:1px solid #c3ccd9;
}
.feeBox .jimu,
.feeBox .plus{
	float:left;
}
.feeBox .jimu{
	width:220px;
}
.feeBox .kouji{
	float:right;
	width:562px;
}
.feeBox .plus{
	padding:36px 14px 0 ;
}
.feeBox .ttl{
	background:#f7f9fa;
	text-align:center;
	padding:15px;
	border-bottom:1px solid #c3ccd9;
	font-size:16px;
}
.feeBox .detail{
	padding:15px;
	text-align:center;
	font-size:16px;
}
.feeBox .detail span{
	color:#d80000;
	font-weight:bold;
}
.feeBox .detail .note{
	font-size:12px;
	margin-top:10px;
}
.area6 .noteArea{
	font-size:12px;
	padding:15px;
	line-height:1.5;
}
.area6 .noteArea p{
	text-indent:-1.5em;
	padding-left:1.5em;
}
.area6 .noteArea span{
	color:#1300ca;
}
.area6 .noteArea .sp_ttl{
	display:none;
}
.area6 .noteArea.flow{
	margin:50px 30px;
}
.area6 .feeappBt{
	width:840px;
	margin:40px auto 0;
}
.area6 .feeappBt .left{
	float:left;
}
.area6 .feeappBt .right{
	float:right;
}
.area6 .feeappBt .left span,
.area6 .feeappBt .right span{
	display:none;
}
.area6 .optionBox,
.area6 .stepBox{
	border:1px solid #c4cfda;
	padding:20px;
}
.area6 .optionBox h3,
.area6 .stepBox h3{
	border-left:3px solid #004387;
	padding-left:10px;
	font-size:18px;
	margin:0;
	margin-bottom:15px;
}
.area6 .optionBox p,
.area6 .stepBox p{
	margin-bottom:15px;
}
.area6 .optionBox .tag{
	background:#d80000;
	padding:5px;
	color:#fff;
	margin-right:10px;
}
.area6 .optionBox .link_component{
	margin:0;
}
.area6 .noteArea a.blank{
	background:url(/content/dam/nttcom/cmn/img/icn_blank.png) no-repeat right center;
	padding-right:15px;
}
.area6 .stepBox{
	padding:30px;
}
.uketsuke{
	margin-bottom:30px;
}
.uketsuke table{
	float:left;
	margin-bottom:0;
}
.uketsuke table th,
.uketsuke table td{
	border-color:#c3ccd9;
	text-align:center;
	vertical-align:middle;
	padding: 15px 20px;
}
.uketsuke table th{
	background:#f7f9fa;
}
.uketsuke table .ps_bolno{
	border-left:none;
}
a.mainBtnD {
	border-style: solid;
	border-width: 1px;
	border-color: rgb(201, 207, 210);
	background-image: -moz-linear-gradient( 90deg, rgb(233,233,233) 0%, rgb(255,255,255) 100%);
	background-image: -webkit-linear-gradient( 90deg, rgb(233,233,233) 0%, rgb(255,255,255) 100%);
	background-image: -ms-linear-gradient( 90deg, rgb(233,233,233) 0%, rgb(255,255,255) 100%);
	width: 300px;
	padding:20px;
	display:inline-block;
	color:#000;
	font-size:17px;
}
.uketsuke table td .tel{
	background:url(/content/dam/nttcom/cmn/img/freed.png) no-repeat left center;
	font-size:22px;
	font-weight:bold;
	padding-left:40px;
}
.uketsuke table td div{
	font-size:12px;
	margin-top:10px;
}
.kakunin{
	border:1px solid #c3ccd9;
	width:100%;
}
.kakunin .ttl{
	background:#f7f9fa;
	text-align:center;
	padding:15px;
	border-bottom:1px solid #c3ccd9;
	font-size:18px;
	color:#d80000;
}
.kakunin .ttl img{
	vertical-align:middle;
}
.kakunin .detail{
	padding:20px 30px 10px;
	text-align:center;
	font-size:16px;
}
.kakunin .detail p.list{
	width:60%;
	margin:0 auto 15px;
	text-align:left;
}
.faqdocomo{
	padding:10px;
	width:840px;
	margin:30px auto 90px;
}

.related_information_page{
	width:880px;
	margin:70px auto 90px;
}

/*お客様サポート*/
.area6 .support_menu{
	display:table;
	width:80%;
	margin:40px auto 90px;
}
.area6 .support_menu_row{
	display:table-row;
}
.area6 .support_menu_cell{
	display:table-cell;
	vertical-align:middle;
	padding:10px;
}
.area6 .support_menu_cell img{
	vertical-align:middle;
	margin-right:20px;
}
/*
------------------------------------------------------------------------------------------------------------------------------------------------
 * ----- メディアクエリ -----
 * タブレット版
 * 768px以下に適応
------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:768px) {
/* ----- / @media screen and (max-width:768px) ----- */
.area4-5Wrap{
	display:block;
}
.area4 {
	width:100%;
	display:block;
}
.area4 img{
	width:100%;
}
.area5{
	width:100%;
	display:block;
}
.area5 ul li{
	padding:15px 10px;
}
/*ポイント1.2.3*/
.pointBox{
	width:32%;
}
.pointBox:first-child {
    margin-right: 10px;
}
.pointBox .pointMark{
	left: 35%;
}
.pointBox .pointDetail{
	display:none;
}
.feeBox .jimu{
	width:30%;
}
.feeBox .kouji{
	float:right;
	width:60%;
}
.feeBox .plus{
	padding:5px ;
	width:10%;
}
.feeBox .plus img{
	width:100%;
}
.feeBox .ttl,
.feeBox .detail{
	padding:10px 5px;
}
.area6 .feeappBt{
	width:100%;
}
.area6 .feeappBt .left{
	width:48%;
}
.area6 .feeappBt .right{
	width:48%;
}
.area6 .feeappBt img{
	width:100%;
}
a.mainBtnD {
	width:100%;
	font-size:14px;
}
.faqdocomo{
	width:100%;
}
.related_information_page{
	width:100%;
}
.sp-slide iframe{
	width:100%;
	height:auto;
}

/* ----- / @media screen and (max-width:768px) ----- */
}



/*
------------------------------------------------------------------------------------------------------------------------------------------------
 * ----- メディアクエリ -----
 * スマホ版
 * 480px以下に適応
------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:480px) {
.pc_only{
	display:none;
}
h2{
	font-size:22px;
	margin-bottom:25px;
	margin-top:50px;
}
p{
	font-size:14px;
}
.readTxt p{
	margin-bottom:50px;
	font-size:18px;
}
.accordion_header{
	font-size:16px;
}
.sectioning_layout-inner.allPd .allPd.tabChange_dropdown{
	padding:0;
}

/*
.area5 ul{
	display:table;
	table-layout: auto;
	width:100%;
}
.area5 ul li{
	display:table-cell;
	border-left:1px solid #fff;
}
.area5 ul li.chat{
	display:none;
}
*/

.uketsuke table{
	float:none;
	width:100%;
}
.uketsuke table .sp_only{
	display:table-cell;
}
.uketsuke table .ps_bolno{
	border-left:1px solid #c3ccd9;
}
.uketsuke table .sp_botno{
	border-top:none;
}
.uketsuke table th,
.uketsuke table td{
	padding: 10px;
	font-size:.8rem;
}

.pointBox{
	width:100%;
	border:1px solid #ededed;
	float:none;
	padding:0;
	margin-bottom:20px;
}
.pointBox:first-child{
	margin-right:0;
}
.pointBox:last-child{
	float:none;
}
.pointBox .pointMark{
	background:none;
	position:static;
	color: #d80000;
	height:auto;
	width:100%;
	font-weight:bold;
}
.pointBox .pointMark p{
	padding:0 0 0 10px;
	width:100%;
	text-align:left;
}

.pointBox .pointDetail{
	padding:15px;
	border-top:1px solid #ededed;
}

.area6 .tabChange_dropdown select{
	font-size:.8rem;
}
.area6 .noteArea .sp_ttl{
	display:block;
	font-size:1rem;
}
.area6 .noteArea.flow {
	margin: 20px 0;
}
.area6 .noteArea .flowAttenDetail{
	display:none;
}
.area1{
	margin-top:0px;
	margin-bottom:0px;
}
.area2 h1{
	margin:0 auto;
	font-size:26px;
}
.area5 ul li{
	padding:10px;
}
/*
.area5 ul li img{
	width:20%;
}
*/
.kakunin .detail p.list{
	width:100%;
}

.area6 .stepBox {
	padding: 10px;
}
.area6 .optionBox h3, .area6 .stepBox h3{
	font-size:16px;
}
.faqdocomo {
	margin: 30px auto 0;
}

.related_information_page{
	width:100%;
	margin:20px 0;
}
.related_information_page h3{
	font-size:16px;
	margin:30px 0 15px;
}
.related_information_page .column_component.colnum-2 > .cc-colnum, .column_component.colnum-3 > .cc-colnum, .column_component.colnum-3 > .cc-colnum:nth-of-type(2), .column_component.colnum-4 > .cc-colnum{
	padding:0;
}
.area6 .feeappBt .left{
	float:none;
	background:#006cc6;
	text-align:center;
	width:100%;
}
.area6 .feeappBt .right{
	float:none;
	background:#d00000;
	text-align:center;
	width:100%;
	margin-top:10px;
}
.area6 .feeappBt .left img{
	display:none;
}
.area6 .feeappBt .right img{
	display:none;
}
.area6 .feeappBt .left span,
.area6 .feeappBt .right span{
	display:block;
	color:#fff;
	font-weight:bold;
	font-size:20px;
	padding:15px;
}

.pointMark p,
.sp_ttl {
	padding-right: 2rem;
	position: relative;
}
.pointMark p:after,
.sp_ttl:after{
	content: "";
	position: absolute;
	display: inline-block;
	width: 24px;
	height: 24px;
	top: 50%;
	right: 5px;
	margin-top: -12px;
	background: url(/content/dam/nttcom/cmn/img/btn-blind-open.png) left top no-repeat;
	background-size: contain;
}
.pointMarkOpen p:after,
.sp_ttlOpen:after {
	background-image: url(/content/dam/nttcom/cmn/img/btn-blind-close.png);
}

/*お客様サポート*/

.area6 .support_menu{
	width:100%;
	margin:0 auto 40px;
}
.area6 .support_menu_cell{
	display:block;
}

/* ----- / @media screen and (max-width:480px) ----- */
}


#CarouselTopPSSvceTop{
	margin:0 auto;
}

/*スライダーボタン色上書き*/
.sp-button {
	border:2px solid #e1e1e1;
	background:#e1e1e1;
}
.sp-selected-button{
	border:2px solid #f9cb30;
	background:#f9cb30;
}
.sp-previous-arrow::before, .sp-previous-arrow::after, .sp-next-arrow::before, .sp-next-arrow::after{
	background-color: rgba(255,255,255,0.6);
}

/*タブナビゲーション上書き*/
.tabLayout.tabItemWrapper div a{
	height:auto;
	line-height:1;
}






/*
------------------------------------------------------------------------------------------------------------------------------------------------
 * 2016.08.02 追加
------------------------------------------------------------------------------------------------------------------------------------------------
*/
.area2 h1 + .HTML p:first-child {
	margin-top: 5px;
	margin-bottom: 20px;
	text-align: center;
}


/*----------
TAB以下
----------*/
@media screen and (max-width:768px) {
	.area2 h1 + .HTML p:first-child {
		margin-bottom: 20px;
	}
}
/*----------
sp以下
----------*/
@media screen and (max-width:480px) {

	.area2 h1 + .HTML p:first-child {
		margin-top: 5px;
		margin-bottom: 15px;
	}
}





/* =========================================================
 * 自由記述の中身の定義
 * @ PAGE
 * ====================================================== */
.second_nav .subnav{
	display:table;
}
.second_nav .subnav div{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
	padding:12px 20px;

	font-size:12px;
}
.kojin_topNav-Svce-Brand ul li.active .second_nav .subnav div a{
	color: #004386;
}
.second_nav .subnav div.ttlLink{
	max-width:150px;
	padding:20px 0;
}

.second_nav .subnav div.ttlLink p{
	border-right:1px dotted #ccc;
}
.second_nav .subnav div.ttlLink p a{
	margin:0;
	padding-bottom:0;
	padding-top:3px;
	color: #004386;
}
.second_nav .subnav a.redarrow{
	background:url(/content/dam/nttcom/cmn/img/icn_redarrow.png) no-repeat left center;
	padding-left:14px;
	display:inline;
}
.second_nav .subnav a.orangearrow{
	background:url(/content/dam/nttcom/cmn/img/icn_orangearrow.png) no-repeat left center;
	padding-left:14px;
	display:inline;
}
.second_nav .subnav div.bt{
	padding:12px 5px;
}
.second_nav .subnav div.bt a{
	margin:0;
	padding:0;
}
.inLink .ttl{
	font-weight:bold;
	margin-bottom:10px;
}
.inLink .ttl.mgt{
	margin-top:15px;
}
.inLink .ttl .orange{
	border-left: 3px solid #ff9b08;
	padding:2px 0 0 5px;
}
.inLink .note{
	font-size:11px;
}
/*
------------------------------------------------------------------------------------------------------------------------------------------------
 * ----- メディアクエリ -----
 * タブレット版
 * 768px以下に適応
------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:768px) {
/* ----- / @media screen and (max-width:768px) ----- */

.second_nav .subnav{
	display:block;
	width:100%;
}
.second_nav .subnav div{
	display:block;
	text-align:left;
	width:100%;
	font-size:1rem;
}
.second_nav .subnav div.ttlLink{
	max-width:100%;
	padding:20px 20px;
}
.second_nav .subnav div.ttlLink p{
	border-right:none;
	padding:0;
}
.second_nav .subnav div.ttlLink p img,
.second_nav .subnav div.ttlLink p a{
	float:left;
	padding:0;
}
.second_nav .subnav div.ttlLink p img{
	vertical-align:middle;
	margin-right:5px;
	margin-top:3px;
}
.second_nav .subnav div{
	background:#f3f3f3;

}
.second_nav .subnav div.ttlLink,
.second_nav .subnav div.bt{
	background:#fff;
}
.second_nav .subnav div.bt {
	float:right;
	width:48%;
}
.second_nav .subnav div.bt a{
	display:inline;
}
.second_nav .subnav div.bt a img{
	width:90%;
}
.second_nav .subnav div.inLink{
	width:94%;
	margin:0 auto;
	border-bottom:1px solid #fff;
}
/* ----- / @media screen and (max-width:768px) ----- */
}



/*
------------------------------------------------------------------------------------------------------------------------------------------------
 * ----- メディアクエリ -----
 * スマホ版
 * 480px以下に適応
------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (max-width:480px) {


/* ----- / @media screen and (max-width:480px) ----- */
}