@charset "utf-8";

/*---------------------------------

	2020/09 追加分

---------------------------------*/
/*申し込みボタンエリア*/
.apply_area{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	justify-content:space-between;
}
.apply_area > div{
	width: 49%;
}
/* スマホタブレット */
@media only screen and (max-width: 768px){
	.apply_area > div{
		width: 100%;
	}
}
/*角丸*/
.apply_btn{
	position: relative;
	width:100%;
	padding:10px 20px;
	text-align: center;
	line-height: 1.25;
	text-decoration:none;
	font-size:18px;
	font-weight:bold;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	}
/*オンライン*/
.online_btn{
	background: #ffd601!important;/*赤#CF1E1Eを黄色に*/
	border: 2px solid #000000!important;/*臙脂600000を紺に*/
	text-decoration: none;
	color: #000000!important;/*白FFFFを紺に*/
}
.online_btn:hover{
	background: #fdea8a;;/*薄赤#D64040を薄黄色に*/
}
/*オンライン　くの字*/
.online_btn:after{
	content:"";
	position:absolute;
	top:0;
	bottom:.1em;
	right:1em;
	margin:auto;
	width: .3em;
	height: .3em;
	/* border-top: .13em solid #fff; */
	/* border-right: .13em solid #fff; */
	border-top: .13em solid #000000!important;
	border-right: .13em solid #000000!important;
	transform: rotate(45deg);
}
/*資料請求*/
.request_btn{
	background: #cc023a!important;/*黄#ffd601;からドコモ赤に*/
	border: 2px solid #000000!important;/*青#004386;から臙脂に*/
	text-decoration: none;
	color: #FFFFFF!important;/*紺#004386;を白に*/
}
.request_btn:hover{
	background: #cc023a!important;/*薄黄#fdea8aを薄赤に*/
}
/*資料請求　くの字*/
.request_btn:after{
	content:"";
	position:absolute;
	top:0;
	bottom:.1em;
	right:1em;
	margin:auto;
	width: .3em;
	height: .3em;
	/* border-top: .13em solid #004386; */
	/* border-right: .13em solid #004386; */
	border-top: .13em solid #fff!important;
	border-right: .13em solid #fff!important;
	transform: rotate(45deg);
}
/*追従ボタン*/
.js-contact_bt_1,
.js-contact_bt_2{
	font-weight:bold;
}
.js-contact_bt_2{
	text-align:center;
}
/*
	オンライン申し込み対応プランはこちら
	モーダル・ページ共通
---------------------------------*/
.plan_ttl{
	background-color: #004386;
	color: #FFF;
	font-size: 1.5em;
	padding: 15px;
	margin: 50px 0 30px;
	text-align: center;
	font-weight: bold;
}
.plan_area{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	justify-content:space-between;
}
.plan_area > div{
	width: 49%;
	margin:0 0 20px 0;
}
@media only screen and (max-width: 768px){
	.plan_area > div{
		width: 100%;
	}
}
.plan_box{
	border: 2px solid #ebebeb;
}
/*モーダル時のみ線色変化*/
.plan_box.hovline:hover{
	border: 2px solid #004386;
}
.plan_box a{
	display:block;
}
.plan_box a:hover{
	opacity:.7;
}
.plan_name{
	color:#333;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	line-height:1.2;
	background-color: #eaf5fc;
	padding: 15px 0;
}
.plan_name span{
	font-size:18px;
}
.plan_txt{
	color:#333;
	font-size: 16px;
	line-height: 1.3em;
	padding: 15px;
}
.plan_btn_area{
	padding:0 15px 20px 15px;
}
/*
	オンライン申し込み対応プランはこちら
	ページ
---------------------------------*/
/*2列ボタンエリア*/
.support_area{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	justify-content:space-between;
	padding: 0 15px;
}
.support_area > div{
	width: 48.5%;
	margin:0 0 20px 0;
}
/* スマホタブレット */
@media only screen and (max-width: 768px){
	.support_area > div{
		width: 100%;
	}
}
/*サービス詳細ボタン*/
.service_btn{
	background: #2665a6;/*青*/
	border: 2px solid #004386;/*濃青*/
	text-decoration: none;
	color: #FFF;
}
.service_btn:hover{
	background: #5d8ab9;/*薄青*/
}
/*サービス詳細ボタン　オンラインボタン*/
.support_area .online_btn,
.support_area .service_btn,
.complan .online_btn,
.complan .service_btn{
	font-size:15px;
}

.support_area .online_btn:after,
.support_area .service_btn:after,
.complan .online_btn:after,
.complan .service_btn:after{
	content:"";
	position:absolute;
	top:0;
	bottom:.1em;
	right:1em;
	margin:auto;
	width: .3em;
	height: .3em;
	border-top: .15em solid #FFF;
	border-right: .15em solid #FFF;
	transform: rotate(45deg);
}

/*1列ボタンエリア*/
.complan{
margin:5px 0 10px 0;
}


---------------------------------*/
/*最適なプランから選ぶ*/

/*
	オンライン申し込み対応プランはこちら
	モーダル
---------------------------------*/
.plan_wrapper{
	margin:50px 15px 20px 15px;
}
@media only screen and (max-width: 768px){
	.plan_wrapper{
		margin:0 0 20px 0;
	}
}
/*リンク*/
.plan_link{
	font-size:20px;
	position:relative;
}
.smt_only{
	display:none;/*SP時のみ表示*/
}
@media only screen and (max-width: 768px){
	.plan_link{
		font-size:18px;
	}
	.smt_only{
		display:none;/*SP時のみ表示*/
	}
}
@media only screen and (max-width: 480px){
	.smt_only{
		display:inline;/*SP時のみ表示*/
	}
}
/*リンク くの字*/
.plan_link a:after{
	content:"";
	position:absolute;
	top:0;
	bottom:.1em;
	right:-1em;
	margin:auto;
	width: .3em;
	height: .3em;
	border-top: .1em solid #004386;
	border-right: .1em solid #004386;
	transform: rotate(45deg);
}

/*---------------------------------
ページ下部　申し込みボタンエリア*/
.foot_apply_area{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	justify-content:space-around;
}
.foot_apply_area > div{
	width: 45%;
}
/* ページ下部　スマホタブレット */
@media only screen and (max-width: 768px){
	.foot_apply_area > div{
		width: 90%;
	}
}
/*ページ下部　角丸*/
.foot_apply_btn{
	position: relative;
	width:100%;
	padding:15px 20px 14px;
	text-align: center;
	line-height: 1.25;
	text-decoration:none;
	font-size:22px;
	font-weight:bold;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	}
/*ページ下部　オンライン　くの字*/
.foot_apply_btn.online_btn:after{
	content:"";
	position:absolute;
	top:0;
	bottom:.1em;
	right:1em;
	margin:auto;
	width: .5em;
	height: .5em;
	border-top: .13em solid #fff;
	border-right: .13em solid #fff;
	transform: rotate(45deg);
}
/*ページ下部　問い合わせ　くの字*/
.foot_apply_btn.request_btn:after{
	content:"";
	position:absolute;
	top:0;
	bottom:.1em;
	right:1em;
	margin:auto;
	width: .5em;
	height: .5em;
	border-top: .13em solid #004386;
	border-right: .13em solid #004386;
	transform: rotate(45deg);
}


/*---------------------------------
タブ*/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:20px 0;
}
.tab-label {
  color:#FFF;
  width:30%;
  font-size:16px;
  line-height:1.4;
  background: #999;
  font-weight: bold;
  text-align: center;
  padding: 15px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px;
  flex: 1;
}
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
.tab-switch:checked+.tab-label {
  background: #004386;
}
.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 15px;
  opacity: 1;
  transition: .5s opacity;
}
.tab-switch {
  display: none;
}
/*タブフキダシ*/
.tab-switch:checked+.tab-label:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #004386;
    border-width: 14px;
    margin-left: -14px;
}
.tab-switch:checked+.tab-label {
    background: #004386;
    position: relative;
}
/*タブ中身*/
.bestplan_area{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	justify-content:space-between;
}
.bestplan_area > div{
	width: 49%;
	margin:0 0 20px 0;
}
@media only screen and (max-width: 768px){
	.bestplan_area > div{
		width: 100%;
	}
}
.bestplan_box{
	border: 2px solid #ebebeb;
}
.bestplan_name{
	color:#333;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	line-height:1.3;
	padding:15px;
}
.bestplan_name span{
	font-size:12px;
	font-weight:normal;
}
.bestplan_txt{
	color:#333;
	font-size: 16px;
	line-height: 1.3em;
	padding: 15px;
}
.bestplan_btn_area{
	padding:0 15px 20px 15px;
}
/*bestplan 2列ボタンエリア*/
.bestplan_support_area{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	justify-content:space-between;
	padding: 0 15px;
}
.bestplan_support_area > div{
	width: 48.5%;
	margin:0 0 20px 0;
}
/* スマホタブレット */
@media only screen and (max-width: 768px){
	.bestplan_support_area > div{
		width: 100%;
	}
}

/*サービス詳細ボタン*/
.service_btn{
	background: #2665a6;/*青*/
	border: 2px solid #004386;/*濃青*/
	text-decoration: none;
	color: #FFF;
}
.service_btn:hover{
	background: #5d8ab9;/*薄青*/
}

/*サービス詳細ボタン　オンラインボタン*/
.bestplan_support_area .online_btn,
.bestplan_support_area .service_btn{
	font-size:15px;
}
.bestplan_support_area .online_btn:after,
.bestplan_support_area .service_btn:after{
	content:"";
	position:absolute;
	top:0;
	bottom:.1em;
	right:1em;
	margin:auto;
	width: .3em;
	height: .3em;
	border-top: .15em solid #FFF;
	border-right: .15em solid #FFF;
	transform: rotate(45deg);
}
.bestplan_detail{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	justify-content:space-between;
	align-items:center;
	padding:0 15px;
}
.bestplan_detail .month,
.bestplan_detail .people {
	background:#E0EDF5;
	font-size:12px;
	text-align:center;
	padding:5px 0;
}
.bestplan_detail .month{
	width:23%;
}
.bestplan_detail .people{
	width:15%;
}
.bestplan_detail .month_value{
	width:37%;
	font-size:12px;
	font-weight:bold;
	text-align:center;
}
.bestplan_detail .month_value span{
	font-size:20px;
}
.bestplan_detail .people_value{
	width:20%;
	font-size:16px;
	font-weight:bold;
	text-align:center;
}
/* スマホタブレット */
@media only screen and (max-width: 768px){
	.bestplan_detail .month,
	.bestplan_detail .people {
		width:30%;
		margin-bottom:5px;
	}
	.bestplan_detail .month_value,
	.bestplan_detail .people_value{
		width:60%;
		margin-bottom:10px;
	}
}
.bestplan_function {
	width: calc ( 100% - 30px );
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
	justify-content:space-between;
	align-items:center;
	padding: 0 15px;
	margin:15px 0;
}
.bestplan_function .label{
	width: calc( ( 100% - 30px ) / 3 );
    border: 1px solid #004386;
    text-align: center;
    padding: 3px 0;
    font-size: 10px;
    margin: 3px 0;
}
.bestplan_function .label.unable{
	color:#CCC;
	border: 1px solid #CCC;
}
/*お気軽にお問合せ*/
.tab_contct_lead{
	font-size:22px;
	font-weight:bold;
	text-align:center;
	margin-bottom:20px;
}
.tab_contct_btn_area{
	width:50%;
	margin:10px auto;
}
@media only screen and (max-width: 768px){
	.tab_contct_btn_area{
		width:100%;
		padding:0 15px;
	}
}

/*---------------------------------

	2022/03 修正分

---------------------------------*/
/*bestplan 2列ボタンが1列に変更*/
.bestplan_support_area.btn-one-col{
	justify-content: center;
}

.contact_bt{
    padding: 12px 20px 12px 20px;
}

/*---------------------------------

	2022/07 追加分

---------------------------------*/
.firstSection .notation {
	margin: 0 auto 2rem;
	position: relative;
	z-index: 500;
}

@media screen and (max-width: 768px) {
	.firstSection .notation {
		padding: 0 6.1%;
	}
}

.firstSection .notation > p {
	font-size: 20px;
	font-size: 1.25rem;
	text-align: center;
}

@media screen and (max-width: 768px) {
	.firstSection .notation > p {
		font-size: 18px;
		font-size: 1.125rem;
	}
}

.firstSection .notation > p a {
	color: #004386;
}

.firstSection .notation > p a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border: 1px solid;
    border-color: #004386 #004386 transparent transparent;
    transform: rotate(45deg) translateY(-4px);
}

/* =========================================================
 * 2022
 * 新テンプレ調整
 * ====================================================== */

/*下部問い合わせ文字*/ 
.wrapper .p-contact .p-contact__item .p-contact-item__button .c-btn__link{
	font-size:16px;
	font-weight:bold;
}
/*黄ボタン文字色*/
.wrapper .p-contact .p-contact__item .p-contact-item__button .c-btn.--yellow.--large .c-btn__link{
	color:#000 !important;
}

/*---------------------------------

	2022/12 追加分

---------------------------------*/
/*PDF資料ダウンロード*/
.document-wrap{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	border:1px solid #004386;
	padding:25px 35px;
	background-color:#eaf5fc;
}
@media only screen and (max-width: 480px){
	.document-wrap{
		padding:15px 15px 30px;
	}
}
.document-ttl{
	width: 100%;
}
.document-ttl h4{
	font-size:22px;
	font-weight:bold;
	text-align:center;
	margin:0 0 20px 0;
}
.document-pic{
	width: 405px;
	text-align:center;
}
.document-txt{
	width: 455px;
}
@media only screen and (max-width: 768px){
	.document-pic,
	.document-txt{
		width: 100%;
	}
}
.document-pic img {
	max-width:100%;
}
.document-txt p {
	font-size: 17px;
	font-weight: bold;
	line-height:1.5;
	margin:0;
}

/*DLボタン*/
.document-btn-wrap a,
.document-btn-wrap a:visited,
.document-btn-wrap a:hover,
.document-btn-wrap a:active{
	text-decoration:none !important;
}
.document-btn-wrap{
	margin-top:30px;
	padding:0 10px;
}
@media only screen and (max-width: 480px){
	.document-btn-wrap{
		padding:0;
	}
}
.document-btn{
	margin:0 auto;
	position: relative;
	width:100%;
	max-width:435px;
	padding:20px 20px 20px 70px;
	text-align: center;
	color: #FFFFFF;
	line-height: 1.25;
	text-decoration:none;
	font-size:20px;
	font-weight:bold;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	background-color:#004386;
}
/*DLアイコン*/
.document-btn:before{
	position:absolute;
	content: "";
	display: inline-block;
	width: 28px;
	height: 28px;
	margin:0 0 0 -40px;
	background: url("/content/dam/nttcom/hq/jp/business/services/application/mail-groupware/microsoft365/img/document_icon_download.svg") no-repeat;
	background-size: contain;
	vertical-align: middle;
}
.document-btn:hover{
	opacity:.7;
}
@media only screen and (max-width: 480px){
	.document-btn{
		padding:20px 20px 20px 60px;
	}
	.document-btn:before{
		margin:14px 0 0 -40px;
	}
}