@charset 'UTF-8';

/* 共通
----------------------------------------------- */
sup,span{
	color:inherit;
}

.only-sp{
	display:none;
}
@media screen and (max-width: 480px) {
	.only-pc{
		display:none;
	}
	.only-sp{
		display:block;
	}
}

/*画像*/
.img_wrap{
	width:100%;
	text-align:center;
	margin:0 auto;
}
.img_wrap img{
	max-width:100%;
}
@media screen and (max-width: 767px) {
	.img_wrap img{
		max-width:100%;
	}
}

/*下線*/
a.underline{
	text-decoration:underline !important;
}
a:hover.underline{
	text-decoration:none !important;
}

/*注釈*/
.note{
	list-style: none;
	margin: 0;
	padding: 0;
}
.note li{
	padding-left: 1.2em;
	text-indent: -1.2em;
	font-size:12px;
	margin-bottom:0.3em;
}


/* MV
----------------------------------------------- */
.img-mv__contents--inner{
	width: auto;
}

/*チェックボックス*/
.head-checkbox {
	display: flex;
	flex-wrap: wrap;
	margin-top: 2.0em;
}

.head-checkbox > li {
	color: #333;
	display: flex;
	align-items: center;
	font-weight: bold;
	margin-right: 2.25em;
	margin-bottom: 0.5em;
	padding-left: 1em;
	text-indent: -1em;
}

.head-checkbox>li:last-of-type {
	margin-right: 0;
}


/* ナビ
----------------------------------------------- */
@media screen and (min-width: 769px) {
	.page-nav__list--item a {
		line-height:1.2;
	}
}


/* メドコムサービス from NTT Communications とは？
----------------------------------------------- */
.about_outer_wrap{
	width: 880px;
	margin:0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap:20px 0;
}
.about_outer_pic{
	width:520px;
	text-align:center;
}
.about_outer_pic img{
	width:100%;
	max-width:520px;
}

.about_outer_icon{
	width:340px;
}

@media screen and (max-width: 768px) {
	.about_outer_wrap,
	.about_outer_pic,
	.about_outer_icon{
		width:100%;
	}
}

.about_inner_wrap{
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap:20px 0;
}
.about_inner_wrap > li{
	width:calc((100% - 20px) / 2);
}
.about_inner_wrap li img{
	width:100%;
}
.about_inner_ttl{
	color:#002060;
	font-size:16px;
	font-weight:bold;
	line-height:1.5;
	text-align:center;
	margin:0 0 5px 0;
}
.about_inner_icon{
	width:120px;
	margin:0 auto;
}


/* メドコムサービス × オフィスリンク
----------------------------------------------- */
.service_logo_wrap{
	width:100%;
}
.service_logo_wrap img{
	max-width:100%;
}


/* 特徴
----------------------------------------------- */
.feature_wrap{
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap:10px 0;
}
.feature_pic{
	width:25%;
	text-align:center;
}
.feature_detail{
	width:calc(100% - 25% - 30px);
}
@media screen and (max-width: 768px) {

}
@media screen and (max-width: 480px) {
	.feature_pic,
	.feature_detail{
		width:100%;
	}
}

.feature_detail img,
.feature_pic img{
	display:block;
	max-width:100%;
}

.feature_ttl{
	color:#1F37A5;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.3;
	margin-bottom: 15px;
}
.feature_detail p{
	padding-left: 1.2em;
	text-indent: -1.2em;
	margin: 0.5em 0;
}


/* 実現できること
----------------------------------------------- */
.realization_wrap{
	width: 860px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap:10px 0;
}
@media screen and (max-width: 768px) {
	.realization_wrap{
		width: 100%;
	}
}

.realization_icon{
	width:120px;
	text-align:center;
}
.realization_detail{
	width:calc(100% - 120px - 30px);
}

@media screen and (max-width: 480px) {
	.realization_icon{
		margin:0 auto;
	}
	.realization_detail{
		width:100%;
	}
}

.realization_icon img{
	display:block;
	max-width:100%;
	margin:0 auto;
}

.realization_ttl{
	color:#002060;
	font-size:16px;
	font-weight:bold;
	line-height:1.5;
	text-align:center;
	margin:0 0 5px 0;
}

.realization_detail p{
	padding-left: 1em;
	text-indent: -1em;
	margin: 0.5em 0;
}

.realization_check{
	color:#008CD7;
}


/* ご利用料金
----------------------------------------------- */
/*赤枠*/
.charge_outer_wrap{
	width:60%;
	border:3px solid #C03;
	border-radius:15px;
	padding:20px;
	margin:0 auto;
}
@media screen and (max-width: 768px) {
	.charge_outer_wrap{
		width:100%;
	}
}

.charge_outer_ttl{
	font-size:20px;
	font-weight:bold;
	line-height:1.3;
	text-align:center;
	margin:0 0 20px 0;
}
/*金額カラム*/
.charge_inner_wrap{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap:10px;
	margin:0 auto;
}
.charge_inner_type{
	width:90px;
}
.charge_inner_detail{
	width:auto;
}
@media screen and (max-width: 480px) {
	.charge_inner_type{
		width:60px;
	}
}
/*月額*/
.charge_inner_circle {
	background: #C03;
	border-radius: 50%;
	width: 90px;
	height: 90px;
	color: #FFF;
	font-size: 20px;
	text-align: center;
	line-height: 90px;
}
/*金額*/
.charge_inner_id{
	font-size:18px;
	line-height:1.5;
	margin:0;
}
.charge_inner_price{
	font-size:24px;
	font-weight:bold;
}
.charge_inner_price span{
	font-size:60px;
}
@media screen and (max-width: 480px) {
	.charge_inner_circle {
		width: 60px;
		height: 60px;
		font-size: 14px;
		line-height: 60px;
	}
	.charge_inner_id{
		font-size:14px;
	}
	.charge_inner_price{
		font-size:14px;
	}
	.charge_inner_price span{
		font-size:35px;
	}
}

.charge_note_wrap{
	border:1px solid #CCC;
	padding:20px;
}


/* 詳細は下記▼お問い合わせよりご相談ください
----------------------------------------------- */
.more_detail_ttl{
	font-size:22px;
	font-weight:bold;
	line-height:1.3;
	text-align:center;
}

/*ボタン*/
.orig_btn_wrap{
	width:240px;
	margin:0 auto;
}
@media screen and (max-width: 480px) {
	.orig_btn_wrap{
		width:100%;
	}
}

.orig_btn a {
	display: block;
	position: relative;
	width: 100%;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	background-color: #cc023a;
	border-radius: 6px;
	border: 2px solid #000;
	padding: 15px 0;
	transition: opacity .3s ease;
	transition-duration: 1s;
}

.orig_btn a::before {
	background-image: url("/content/dam/nttcom/hq/cmn/img/arrow-right-accent.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	bottom: 0;
	content: '';
	display: block;
	height: 10px;
	margin: auto;
	position: absolute;
	right: 15px;
	top: 0;
	width: 6px;
	transition: all 0.5s ease;
}

.orig_btn a:hover::before{
	right: 10px;
	transition: all 0.1s ease;
}

.orig_btn a:hover {
	opacity: 0.8;
	background-color: #fd0449;
	text-shadow: 0px 0px 5px rgb(0 0 0);
	transition: all 0.3s ease;
}