@charset "UTF-8";

/* メインビジュアル */
#mv * {
	margin: 0;
	padding: 0;
	}

#mv {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 10px auto;
	padding: 20px 0 0 0;
	}
@media screen and (max-width: 767.98px) {
#mv {
	padding: 4vw 4vw 0 4vw;
	}
}

#mv div {
	width: 100%;
	padding: 20px;
	background: #fff;
	border: 10px solid #e4007f;
	}

#mv img {
	display: block;
	width: 100%;
	}

/* ローカルメニュー */
#local_menu * {
	margin: 0;
	padding: 0;
	}

#local_menu {
	position: relative;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	z-index: 1000;
	}

#local_menu ul {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding: 20px;
	}
@media screen and (max-width: 999.98px) {
#local_menu ul {
	padding: 10px;
	}
}

#local_menu li {
	display: block;
	width: 100%;
	padding: 10px;
	text-align: left;
	}
@media screen and (max-width: 999.98px) {
#local_menu li {
	padding: 5px;
	}
}

#local_menu li a {
	display: block;
	color: #036eb8;
	font-size: 16px;
	font-weight: bold;
	line-height: 1em;
	}
@media screen and (max-width: 767.98px) {
#local_menu li a {
	font-size: 4vw;
	}
}

/* 本文カラム */
.content_body * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

.content_body {
	position: relative;
	display: block;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto 10px auto;
	padding: 0;
	background: #fff;
	}

.content_body h3 {
	display: block;
	padding: 30px 0 20px 0;
	color: #036eb8;
	font-size: 24px;
	line-height: 1em;x
	}
@media screen and (max-width: 767.98px) {
.content_body h3 {
	font-size: 6vw;
	line-height: 1.5em;
	padding: 30px 4vw 20px 4vw;
	}
}

.content_body p {
	display: block;
	font-size: 16px;
	line-height: 1.5em;
	}
@media screen and (max-width: 767.98px) {
.content_body p {
	padding: 0 4vw;
	font-size: 4vw;
	text-align: left;
	}
.content_body p br {
	display: none;
	}
}

.content_body sup {
	font-size: 0.5em;
	}

.content_body p.notice {
	display: block;
	padding: 20px;
	font-size: 12px;
	line-height: 1.5em;
	text-align: left;
	}
@media screen and (max-width: 767.98px) {
.content_body p.notice {
	font-size: 4vw;
	}
}

/* hi-ho forドコモ光 とは */
#about .illust {
	display: block;
	width: 100%;
	margin: 20px 0;
	padding: 0 4vw;
	}

#about .illust img {
	display: block;
	width: 100%;
	}

#about ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	margin: 10px 0 -100px 0;
	padding: 20px 10px 10px 10px;
	}
@media screen and (max-width: 767.98px) {
#about ul {
	margin: 10px 0;
	padding: 4vw;
	}
}

#about li {
	display: block;
	width: 100%;
	max-width: 33%;
	background: #fff;
	border: 2px solid #e4007f;
	border-radius: 10px;
	}
@media screen and (max-width: 767.98px) {
#about li {
	max-width: 100%;
	margin: 0 0 4vw 0;
	}
}

#about li h4 {
	display: block;
	padding: 10px 0;
	color: #fff;
	font-size: 24px;
	font-weight: normal;
	line-height: 1em;
	background: #e4007f;
	border-radius: 7px 7px 0 0;
	}
@media screen and (max-width: 767.98px) {
#about li h4 {
	font-size: 5vw;
	}
}

#about li p {
	display: block;
	margin: 0;
	padding: 10px 20px;
	font-size: 16px;
	line-height: 1.5em;
	}
@media screen and (max-width: 767.98px) {
#about li p {
	font-size: 4vw;
	}
}

#about li p .num {
	font-size: 1.5em;
	}

#about .notice {
	padding: 110px 20px 20px 20px;
	background: #fbe6ef;
	}
@media screen and (max-width: 767.98px) {
#about .notice {
	padding: 4vw;
	}
}

#about .notice p {
	margin: 0;
	padding: 0 0 10px 0;
	}

/* ドコモ光料金 */
#price_docomo .tab {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background: #f5f5f5;
	}

#price_docomo .tab li {
	position: relative;
	display: block;
	width: 49.5%;
	height: 80px;
	cursor: pointer;
	color: #204fa1;
	background: #e9e8e7;
	border-radius: 5px 5px 0 0;
	transition: .3s ease;
	}
@media screen and (max-width: 767.98px) {
#price_docomo .tab li {
	display: block;
	padding: 10px 0;
	height: auto;
	}
}

#price_docomo .tab li:hover,
#price_docomo .tab li.on {
	color: #333;
	background: #fff;
	}

#price_docomo .tab li span {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	display: block;
	width: 100%;
	font-size: 20px;
	font-weight: bold;
	}
@media screen and (max-width: 767.98px) {
#price_docomo .tab li span {
	position: relative;
	left: auto;
	top: auto;
	transform: translate(0,0);
	font-size: 4vw;
	}
#price_docomo .tab li span br {
	display: none;
	}
}

.price_docomo_column {
	display: none;
	padding: 0 30px 10px 30px;
	}
@media screen and (max-width: 767.98px) {
.price_docomo_column {
	padding: 0 4vw 10px 4vw;
	}
}
.price_docomo_column.on {
	display: block;
	}

.price_docomo_column h4 {
	display: block;
	text-align: left;
	margin: 0 0 10px 0;
	}

.price_docomo_column {
	margin: 10px 0;
	}

.price_docomo_column p {
	margin-bottom: 20px;
	}

.price_docomo_column p a {
	color: #036eb8;
	}

.price_docomo_column .table-scroll {
	margin: 0 0 20px 0;
	}

.price_docomo_column table {
	font-size: 14px;
	}
@media screen and (max-width: 767.98px) {
.price_docomo_column table {
	font-size: 4vw;
	}
}

.price_docomo_column table thead th {
	padding: 10px;
	font-weight: bold;
	background: #fadce9;
	border: 1px solid #b5b5b5;
	}

.price_docomo_column table tbody th {
	padding: 10px;
	font-weight: bold;
	background: #fdeff5;
	border: 1px solid #b5b5b5;
	}

.price_docomo_column table tbody th {
	width: 170px;
	}

.price_docomo_column table td {
	padding: 10px 0;
	font-weight: bold;
	}
@media screen and (max-width: 767.98px) {
.price_docomo_column table td {
	padding: 10px;
	}
}

.price_docomo_column .illust {
	display: block;
	width: 100%;
	}

.price_docomo_column div.benefit {
	padding: 0 0 20px 0;
	background: #fbe6ef;
	}

.price_docomo_column div.benefit h3 {
	color: #e4007f;
	}

.price_docomo_column div.benefit ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 0 10px 0;
	}
@media screen and (max-width: 767.98px) {
.price_docomo_column div.benefit ul {
	padding: 0 2vw;
	}
}

.price_docomo_column div.benefit ul li {
	display: block;
	margin: 5px;
	padding: 10px;
	width: 100%;
	max-width: 290px;
	text-align: center;
	background: #fff;
	border-radius: 10px;
	}
@media screen and (max-width: 767.98px) {
.price_docomo_column div.benefit ul li {
	max-width: 100%;
	}
}

#content_tab2 div.benefit ul li {
	max-width: 45%;
	}
@media screen and (max-width: 767.98px) {
#content_tab2 div.benefit ul li {
	max-width: 100%;
	}
}

.price_docomo_column div.benefit ul li h4 {
	display: block;
	padding: 10px 0 5px 0;
	color: #e4007f;
	text-align: center;
	border-bottom: 2px solid #e4007f;
	}

.price_docomo_column div.benefit ul li p {
	display: block;
	min-height: 80px;
	}

.price_docomo_column div.benefit p.notice {
	display: block;
	margin: 0 0 10px 0;
	padding: 0 20px;
	text-align: left;
	}

.price_docomo_column div.benefit a {
	display: block;
	margin: 0 0 10px 0;
	padding: 0 20px;
	text-indent: 1em;
	text-align: left;
	}

.price_docomo_column div.notice h4 {
	padding: 10px;
	font-size: 16px;
	line-height: 1.5em;
	border-bottom: 1px solid #333;
	}

.price_docomo_column div.notice ul {
	display: block;
	padding: 0 20px 20px 20px;
	}

.price_docomo_column div.notice li {
	display: block;
	margin: 0 0 5px 0;
	padding-left: 1em;
	font-size: 14px;
	line-height: 1.5em;
	text-indent: -1em;
	text-align: left;
	}

.price_docomo_column div.notice li.red {
	color: #e60012;
	}

.price_docomo_column div.notice a {
	display: inline-block;
	padding: 5px 0 10px 1em;
	color: #036eb8;
	font-size: 16px;
	font-weight: bold;
	}

.price_docomo_column div.notice li:before {
	content: "・";
	}

/* お申し込みについて */
#about_entry {
	padding: 0 30px 10px 30px;
	}
@media screen and (max-width: 767.98px) {
#about_entry {
	padding: 0 4vw 10px 4vw;
	}
}

#about_entry p {
	margin-bottom: 10px;
	}

#about_entry p a {
	display: inline-block;
	padding: 0 .5em;
	color: #036eb8;
	font-weight: bold;
	}
@media screen and (max-width: 767.98px) {
#about_entry p a {
	display: block;
	margin: 0;
	padding: 10px 0;
	line-height: 1em;
	}
}

#about_entry div {
	border: 2px solid #898989;
	}

#about_entry h4 {
	padding: 10px 0;
	font-size: 18px;
	border-bottom: 1px solid #898989;
	background: #fadce9;
	}
@media screen and (max-width: 767.98px) {
#about_entry h4 {
	padding: 2vw;
	font-size: 5vw;
	line-height: 1.3em;
	}
}

#about_entry ul {
	padding: 10px 30px;
	font-size: 16px;
	text-align: left;
	border-top: 0;
	background: #fff;
	}
@media screen and (max-width: 767.98px) {
#about_entry ul {
	padding: 10px 4vw;
	font-size: 4vw;
	}
}

#about_entry ul li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	padding: 5px 0;
	}

#about_entry ul li h5 {
	width: 30%;
	height: auto;
	margin: 0;
	padding: 0;
	font-size: 18px;
	text-align: left;
	line-height: 30px;
	vertical-align: middle;
	}
@media screen and (max-width: 767.98px) {
#about_entry ul li h5 {
	width: 100%;
	font-size: 5vw;
	text-align: center;
	}
}

#about_entry ul li .num {
	width: 30%;
	margin: 0;
	padding: 0;
	text-align: left;
	line-height: 30px;
	vertical-align: middle;
	}
@media screen and (max-width: 767.98px) {
#about_entry ul li .num {
	width: 100%;
	font-size: 5vw;
	text-align: center;
	}
}

#about_entry ul li .num span {
	color: #e4007f;
	font-size: 1.5em;
	font-weight: bold;
	}

#about_entry ul li .notice {
	width: 40%;
	margin: 0;
	padding: 0;
	line-height: 30px;
	text-align: left;
	}
@media screen and (max-width: 767.98px) {
#about_entry ul li .notice {
	width: 100%;
	font-size: 3vw;
	text-align: center;
	}
}

#about_entry .notice span {
	color: #e4007f;
	font-size: 1.3em;
	font-weight: bold;
	}