@charset 'utf-8';

/* ------------------------------
 ひかり電話をすでに導入済みのお客様へ
------------------------------ */

/* プラン */

#plan {
	margin-top: 60px;
}

#plan .inbox {
	padding: 24px 0 30px;
}

#plan #store_plan {
	background-color: #fafff6;
	border-top: 2px solid #e5eede;
}

#plan #office_plan {
	background-color: #eaf0f8;
	border-top: 2px solid #d7dce4;
}

#contents .none {
	display: none;
}

.ex {
	color: #555;
	font-size: 10px;
	line-height: 1.8;
}

#plan .tab_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 660px;
	margin: 0 auto;
}

#plan .tab_list li {
	width: 320px;
}

#plan .tab_list li a {
	display: block;
	height: 0;
	padding-top: 60px;
	overflow: hidden;
}

#tab_store {
	border-bottom: 7px solid #489f13;
}

#tab_office {
	border-bottom: 7px solid #134c9f;
}

#tab_store .tab1 a {
	background: url(/img/first/hikari/tab_plan1_store_off.png) no-repeat;
}

#tab_store .tab2 a {
	background: url(/img/first/hikari/tab_plan2_store_off.png) no-repeat;
}

#tab_store .tab1 a.on {
	background: url(/img/first/hikari/tab_plan1_store_on.png) no-repeat;
}

#tab_store .tab2 a.on {
	background: url(/img/first/hikari/tab_plan2_store_on.png) no-repeat;
}

#tab_office .tab1 a {
	background:
		url(/img/first/hikari/tab_plan1_office_off.png)
		no-repeat;
}

#tab_office .tab2 a {
	background:
		url(/img/first/hikari/tab_plan2_office_off.png)
		no-repeat;
}

#tab_office .tab1 a.on {
	background: url(/img/first/hikari/tab_plan1_office_on.png) no-repeat;
}

#tab_office .tab2 a.on {
	background: url(/img/first/hikari/tab_plan2_office_on.png) no-repeat;
}

#plan .cont_plan {
	box-sizing: border-box;
	width: 660px;
	margin: 0 auto;
	background-color: #fff;
	border-right: 1px solid #e0ecd8;
	border-bottom: 1px solid #e0ecd8;
	border-left: 1px solid #e0ecd8;
}

#plan_store_1,
#plan_store_2,
#plan_office_1,
#plan_office_2 {
	padding: 25px 19px 35px;
}

#merit_hikari_ace_1 {
	padding: 5px 18px 22px;
	background:
		#f9f9f9 url(/img/first/hikari/bg_merit_hikari_ace_1.png)
		no-repeat right bottom;
}

#merit_hikari_ace_1 ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 528px;
}

#merit_hikari_ace_1 li {
	box-sizing: border-box;
	width: 255px;
	padding: 10px 0 3px;
	border-bottom: 1px solid #cecece;
}

#merit_hikari_ace_1 li:not(:nth-last-of-type(n + 3)) {
	padding-bottom: 0;
	border-bottom: none;
}

#txt_merit_hikari_office_1,
#txt_merit_hikari_office_2,
#txt_merit_hikari_oa_1,
#txt_merit_hikari_oa_2 {
	padding: 15px 18px 25px;
	background-color: #f9f9f9;
}

#merit_hikari {
	padding: 26px 0 36px 20px;
	background:
		#f9f9f9 url(/img/first/hikari/bg_merit_hikari.png)
		no-repeat right bottom;
}

#merit_hikari ul {
	width: 505px;
}

#merit_hikari li:not(:last-of-type) {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 4px dotted #d7e2cf;
}

#plan_store_1 {
	background:
		url(/img/first/hikari/tab_ar_store.png) no-repeat,
		url(/img/first/hikari/bg_plan_store_1.jpg) no-repeat;
	background-position: 144px top, top center;
}

#plan_store_2 {
	background:
		url(/img/first/hikari/tab_ar_store.png) no-repeat,
		url(/img/first/hikari/bg_plan_store_2.jpg) no-repeat;
	background-position: right 144px top, top center;
}

#plan_office_1 {
	background:
		url(/img/first/hikari/tab_ar_office.png) no-repeat,
		url(/img/first/hikari/bg_plan_office_1.jpg) no-repeat;
	background-position: 144px top, top center;
}

#plan_office_2 {
	background:
		url(/img/first/hikari/tab_ar_office.png) no-repeat,
		url(/img/first/hikari/bg_plan_office_2.jpg) no-repeat;
	background-position: right 144px top, top center;
}

#plan .cont_plan .pricebox {
	padding: 18px 0 22px;
	text-align: center;
	background-color: #f9f9f9;
}

#plan .cont_plan table {
	box-sizing: border-box;
	width: 564px;
	margin: 0 auto;
	border-collapse: collapse;
}

.tbl_store th,
.tbl_store td,
.tbl_office th,
.tbl_office td {
	box-sizing: border-box;
	padding: 15px 0;
	font-weight: bold;
	font-size: 18px;
	line-height: 1;
	text-align: center;
	border: 2px solid #e3e3e3;
}

.tbl_store th,
.tbl_office th {
	width: 156px;
	color: #fff;
}

.tbl_store td,
.tbl_office td {
	width: 126px;
	color: #fff;
}

.tbl_store tbody,
.tbl_office tbody {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.tbl_store tr,
.tbl_office tr {
	width: 282px;
}

.tbl_store th {
	background-color: #489f13;
	border: 1px solid #489f13;
}

.tbl_store td {
	color: #2c8200;
	background-color: #fafff6;
}

.tbl_office th {
	background-color: #134c9f;
	border: 1px solid #134c9f;
}

.tbl_office td {
	color: #134d97;
	background-color: #f6faff;
}

.plan_store_cont .merit_plan dd {
	border-top: 2px solid #489f13;
}

.plan_office_cont .merit_plan dd {
	border-top: 2px solid #134c9f;
}

/* about */

#about .inbox {
	padding-top: 30px;
	background-color: #f8f8f8;
	border-top: 2px solid #e1e1e1;
}

#about .pointbox {
	padding-bottom: 20px;
	background-color: #fffdee;
}

/* choose */

#choose .inbox {
	padding-bottom: 34px;
	background-color: #f8f8f8;
	border-top: 2px solid #e1e1e1;
}

#choose .txtbox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 660px;
	margin-right: auto;
	margin-left: auto;
}

#choose .txtbox .txt {
	width: 336px;
}

#choose .txtbox .imgbox {
	width: 304px;
}

#example_box {
	box-sizing: border-box;
	width: 660px;
	margin-right: auto;
	margin-left: auto;
	padding: 8px 0 22px;
	background-color: #f5fcff;
	border: 1px solid #d6dee2;
}

#example_box table {
	box-sizing: border-box;
	width: 564px;
	margin: 0 auto;
	border-collapse: collapse;
}

#example_box th,
#example_box td {
	box-sizing: border-box;
	padding: 15px 0;
	font-weight: bold;
	font-size: 18px;
	line-height: 1;
	text-align: center;
	border: 2px solid #e3e3e3;
}

#example_box th {
	width: 156px;
	color: #fff;
	background-color: #006092;
	border: 1px solid #006092;
}

#example_box td {
	width: 126px;
	color: #004a71;
	background-color: #fff;
}

#example_box tbody {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#example_box tr {
	width: 282px;
}

/* func */

#func {
	margin-top: 60px;
}

#func .inbox {
	padding-top: 14px;
	background-color: #f8f8f8;
	border-top: 2px solid #e1e1e1;
}

#func .list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 667px;
	margin-right: auto;
	margin-left: auto;
}

#func .pointbox {
	padding-bottom: 20px;
	background:
		#fffdee url(/img/first/hikari/bg_point_func.png)
		no-repeat right bottom;
}

#func .pointbox ul {
	width: 510px;
	margin-left: 20px;
}

#func .pointbox li:not(:last-of-type) {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 2px dotted #acacac;
}

/* lineup */

#lineup .tab_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 700px;
	margin: 0 auto;
	border-bottom: 7px solid #35a2dc;
}

#lineup .tab_list li {
	width: 220px;
}

#lineup .tab_list li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 220px;
	height: 60px;
	background: url(/img/first/hikari/bg_tab_lineup_off.png) no-repeat;
}

#lineup .tab_list li a.on {
	background: url(/img/first/hikari/bg_tab_lineup_on.png) no-repeat;
}

#lineup .tabbox {
	padding: 40px 0 24px;
}

#lineup .tabbox:nth-of-type(1) {
	background:
		#f8f8f8 url(/img/first/hikari/ar_tab_lineup.png)
		no-repeat 94px top;
}

#lineup .tabbox:nth-of-type(2) {
	background:
		#f8f8f8 url(/img/first/hikari/ar_tab_lineup.png)
		no-repeat center top;
}

#lineup .tabbox:nth-of-type(3) {
	background:
		#f8f8f8 url(/img/first/hikari/ar_tab_lineup.png)
		no-repeat right 94px top;
}

#lineup .tabbox .list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 663px;
	margin-right: auto;
	margin-left: auto;
}

#lineup .tabbox .list li {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 213px;
	background-color: #fff;
	border: 1px solid #e2e2e2;
}

#lineup .tabbox .list .txt {
	margin: 0 16px 20px;
}

#lineup .tabbox .list .txt_link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 77px;
	margin-top: auto;
	text-align: center;
	background-color: #f2faff;
	border-top: 1px solid #e2e2e2;
}

#lineup .tabbox .list .txt_link a {
	display: block;
	font-weight: bold;
	font-size: 16px;
	line-height: 1.5;
}

#lineup .tabbox .list .txt_link a .ar {
	display: inline-block;
	width: 7px;
	height: 11px;
	margin-right: 8px;
	background: url(/img/first/hikari/ar_link_lineup.png) no-repeat;
	content: "";
}

/* qa */

#qa {
	margin-top: 60px;
}

#qa .togglebox {
	padding: 18px;
	border: 1px solid #d4d4d4;
}

#qa .togglebox:first-child {
	background-position: 153px 0;
}

#qa .togglebox:last-child {
	background-position: 513px 0;
}

#qa .togglebox dt {
	margin-bottom: 10px;
	padding: 20px 35px 20px 63px;
	color: #1a4184;
	font-weight: bold;
	font-size: 18px;
	line-height: 24px;
	text-decoration: underline;
	background:
		url(/img/qa/common/tg_qa_off.png) no-repeat right center,
		url(/img/qa/common/ico_qa_q.png) no-repeat left center;
	border-bottom: 1px dotted #7f7f7f;
	cursor: pointer;
}

#qa .togglebox dt:last-of-type {
	margin-bottom: 0;
	border-bottom: none;
}

#qa .togglebox dt:hover {
	text-decoration: none;
}

#qa .togglebox dt.on {
	background:
		url(/img/qa/common/tg_qa_on.png) no-repeat right center,
		url(/img/qa/common/ico_qa_q.png) no-repeat left center;
}

#qa .togglebox dd {
	margin-bottom: 20px;
	padding: 30px 20px 20px 97px;
	color: #333;
	font-size: 16px;
	line-height: 26px;
	background: url(/img/qa/common/bg_qa_a.png) no-repeat left 10px;
}

#qa .togglebox dd a {
	color: #0f80c6;
}

#qa .togglebox dd:last-child {
	margin-bottom: 0;
}

#qa .togglebox dd .list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* merit */

#merit .togglebox .toggle {
	position: relative;
	display: table;
	width: 100%;
	margin-bottom: 20px;
	cursor: pointer;
}

#merit .togglebox .toggle .mt {
	padding-bottom: 12px;
	background:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAFCAMAAABLuo1aAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9QTFRF/Pz88fHx1dXVy8vL////RIicqAAAACNJREFUeNpiYGFhZIEABgYmZiYok5GZmRkizsCCEEWoBQgwABIZAKyMBNgOAAAAAElFTkSuQmCC)
        repeat-x left bottom;
}

#merit .toggle_ar {
	position: absolute;
	top: 22%;
	right: 18px;
	width: 42px;
	height: 42px;
	background:
		url(/img/first/hikari/ar_merit.png) no-repeat right
		center;
}

#merit .toggle_ar.on {
	transform: scale(1, -1);
}

#merit .togglebox .toggle_inbox .inbox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 40px;
	padding: 0 20px;
}

#qa .togglebox dd:last-child {
	margin-bottom: 0;
}

#merit .togglebox .toggle_inbox .txtbox {
	width: 390px;
}

#merit .togglebox .toggle_inbox .imgbox {
	width: 250px;
}

/*
--------------------------------------------------------------------------------
 END OF CSS
--------------------------------------------------------------------------------
*/