@charset "utf-8";
/* == base ============================================== */
html {
	font-size: 62.5%;
}
body {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.6rem;
	line-height: 1.7;
	letter-spacing: 0.1em;
	color: #333;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
a,
a:link,
a:visited,
a:active {
	text-decoration: none;
}
a {
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
main {
	display: block;
}
input,
textarea {
	-webkit-appearance: none;
	appearance: none;
}
.all_wrapper {
	height: 100vh;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}
.pc_only {
	display: none !important;
}

/* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
            header
▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */
.headerPC {
	display: none !important;
}
.headerSP {
	display: block !important;
}

header {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 10;
}

.logo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 59.47%;
	padding-left: 20px;
	border-bottom: solid 4px #f8b62b;
	background-color: #fff;
}

/*  */
.headerItem {
	display: flex;
	height: 64px;
}

/* ハンバーガーメニュー */
.hamBtn {
	width: 17.07%;
	height: 64px;
	position: fixed;
	top: 0;
	right: 0;
	background-color: #fff;
	cursor: pointer;
	border: none;
	z-index: 10;
	border-bottom: solid 4px #f8b62b;
}

.hamBtn .border {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	display: block;
	height: 2px;
	width: 32px;
	background-color: #333333;
	transition: all 0.2s;
  }
  .hamBtn .border:nth-of-type(1) {
	top: 16px;
  }
  .hamBtn .border:nth-of-type(2) {
	top: 24px;
  }
  .hamBtn .border:nth-of-type(3) {
	top: 32px;
  }
  .hamBtn .js-hamText {
	position: absolute;
	top: 37px;
	left: 50%;
	transform: translate(-50%, 0);
	font-weight: bold;
	color: #333;
  }
  .hamBtn.active .border:nth-of-type(1) {
	transform: translate(-50%, 0) rotate(-43deg);
	top: 23px;
  }
  .hamBtn.active .border:nth-of-type(2) {
	left: 55%;
	opacity: 0;
	visibility: hidden;
  }
  .hamBtn.active .border:nth-of-type(3) {
	transform: translate(-50%, 0) rotate(43deg);
	top: 23px;
  }
/* webで申し込み */
.webLink {
	font-size: 1.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: #f89829;
	color: #fff;
	font-weight: bold;
	width: 23.47%;
	border-bottom: solid 4px #f8b62b;
}

.headerLsit {
	max-height: 90vh;
	overflow: auto;
	background-color: #fff;
	box-shadow: 0 3px 6px 0 #666;
}

.c-mainList {
	position: relative;
	font-size: 1.6rem;
	font-weight: bold;
	border-bottom: 1px solid #eaeaea;
}

.c-mainList:nth-child(1) {
	border-top: 1px solid #eaeaea;
}

.c-mainList a {
	padding: 20px 0 20px 40px;
}

/* アコーディオン */
.c-mainList--accordion span {
	display: block;
	padding: 20px 0 20px 40px;
}

.js-accoContent {
	opacity: 0;
	visibility: hidden;
	height: 0;
	font-size: 1.4rem;
	transition: all 0.2s;
}

.js-accoContent.open {
	opacity: 1;
	visibility: visible;
	height: 560px;
}

.js-accoContent li a {
	padding: 10px 0 10px 0;
	margin-left: 50px;
	border-bottom: 1px solid #eaeaea;
}

.c-mainList::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 26px;
	right: 24px;
	background: url(../img/Icon-headerListArrow.svg) center no-repeat;
	background-size: contain;
	width: 8px;
	height: 12px;
}

.c-mainList--accordion::before {
	transform: rotate(90deg);
}

/* SIS */
.c-mainList--sis {
	background-color: #56a523;
	color: #fff;
}
.c-mainList--sis::before {
	background: url(../img/Icon-headerListArrow-f.svg) center no-repeat;
}
/* 光 */
.c-mainList--hikari {
	background-color: #f9be2c;
	color: #fff;
}
.c-mainList--hikari::before {
	background: url(../img/Icon-headerListArrow-f.svg) center no-repeat;
}
/* ドコモ */
.c-mainList--docomo {
	background-color: #cf0f31;
	color: #fff;
}
.c-mainList--docomo::before {
	background: url(../img/Icon-headerListArrow-f.svg) center no-repeat;
}

.c-subList {
	position: relative;
	font-size: 1.4rem;
	font-weight: 500;
	background-color: #eaeaea;
	border-bottom: solid 1px #fff;
}
.c-subList::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 17px;
	right: 24px;
	background: url(../img/Icon-headerListArrow.svg) center no-repeat;
	background-size: contain;
	width: 8px;
	height: 12px;
}
.c-subList a {
	padding: 10px 0 10px 40px;
}

/* アニメーション設定 */

#js-SPheaderItem {
	position: absolute;
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s;
}
#js-SPheaderItem.active {
	position: relative;
	opacity: 1;
	visibility: visible;
}
/*  */
#js-LogoItem {
	transition: all 0.2s;
}

#js-LogoItem.fade {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
}

#js-LogoItem.fade.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/*  */
#js-webLink {
	transition: all 0.2s;
}

#js-webLink.fade {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
}

#js-webLink.fade.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
            パンくず
▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */

.breadcrumb {
	width: 100%;
	background: rgba(255, 255, 255, 0.7);
	padding: 5px 20px 5px;
}
.breadcrumbItem {
	position: relative;
	display: inline-block;
	font-size: 1.4rem;
	padding-right: 17px;
	margin-right: 8px;
}
.breadcrumbItem::after {
	content: "";
	position: absolute;
	top: 8px;
	right: 0;
	display: inline-block;
	background: url(../img/Arrow-breadcrumb.svg) center no-repeat;
	background-size: contain;
	width: 5px;
	height: 8px;
}
.breadcrumbItem:last-child::after {
	display: none;
}

.breadcrumbItem a {
	color: #56a520;
	border-bottom: 1px solid #56a520;
	transition: all 0.2s;
}

/* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
            共通
▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */

/* ==== 共通タイトル ==== */

.c-Title {
	position: relative;
	font-size: 3.2rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 80px;
}

.c-Title img {
	display: block;
	margin: 0 auto;
	margin-bottom: 12px;
}
/* タイトル左右につくIcon */
.c-TitleIcon {
	text-align: center;
}
.c-TitleIcon.u-mini {
	font-size: 1.6rem;
	font-weight: bold;
}
.c-TitleIcon.u-big {
	margin-top: 80px;
	margin-bottom: 40px;
}
.c-TitleIcon.common_mg {
	margin-top: 0;
	margin-bottom: 40px;
}
.c-TitleIcon .TitleIcon-en {
	display: block;
	font-size: 1.6rem;
	font-weight: 700;
	color: #f89829;
}
.c-TitleIcon .TitleIcon-en::before {
	content: "";
	display: inline-block;
	margin-right: 16px;
	width: 23px;
	height: 12px;
	background: url(../img/icon-title_left.svg) left center no-repeat;
}
.c-TitleIcon .TitleIcon-en::after {
	content: "";
	display: inline-block;
	margin-left: 16px;
	width: 23px;
	height: 12px;
	background: url(../img/icon-title_right.svg) right center no-repeat;
}
.c-TitleIcon .TitleIcon-ja {
	display: block;
	font-weight: 700;
}
.c-TitleIcon.u-mini .TitleIcon-ja {
	font-size: 1.8rem;
}
.c-TitleIcon.u-big .TitleIcon-ja {
	font-size: 2.4rem;
}

/* ===== ボタン ==== */
.c-btn {
	display: block;
}
.c-btn a {
	position: relative;
	font-size: 1.4rem;
	font-weight: bold;
	color: #fff;
	display: block;
	text-align: center;
	width: 300px;
	padding: 20px 0;
	border-radius: 40px;
	background-color: #56a523;
	box-shadow: 0px 4px #448319;
	transition: all 0.2s;
	margin: 0 auto;
}

.c-btn a span {
	position: relative;
}

.c-btn a::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 28px;
	right: 28px;
	background: url(../img/Arrow-cBtn.svg) center no-repeat;
	background-size: contain;
	width: 6px;
	height: 10px;
	transition: all 0.2s;
}

.c-btn--m a {
	width: 300px;
	padding: 20px 0;
}
.c-btn--m a::before {
	top: 26px;
}

/* (白) */
.c-btn--f a {
	color: #15a369;
	background-color: #fff;
	box-shadow: 0px 4px #15a369;
}
.c-btn--f a:before {
	background: url(../img/Arrow-cBtn-f.svg) center no-repeat;
}

/* オプション */
.c-btn--opp a {
	width: 90%;
	color: #56a520;
	background-color: #fff;
	box-shadow: 0px 4px #56a520;
	border: solid 2px #56a520;
	padding-top: 20px;
	padding-bottom: 20px;
}

.c-btn--opp a::before {
	top: 26px;
	background: url(../img/Arrow-cBtn-opp.svg) center no-repeat;
}

/* (オレンジ) */
.c-btn--o a {
    max-width: 320px;
	width: 100%;
	color: #fff;
	background-color: #f89829;
	box-shadow: 0px 4px #c47b26;
}

/*  */
.c-btn--uni span {
	position: relative;
	font-size: 1.6rem;
	font-weight: bold;
	color: #fff;
	display: block;
	text-align: center;
	width: 300px;
	padding: 20px 0;
	border-radius: 40px;
	background-color: #56a523;
	box-shadow: 0px 4px #448319;
	transition: all 0.2s;
	margin: 0 auto;
}

.c-btn--uni span {
	position: relative;
}

.c-btn--uni span::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 28px;
	right: 28px;
	background: url(../img/Arrow-cBtn.svg) center no-repeat;
	background-size: contain;
	width: 6px;
	height: 10px;
	transition: all 0.2s;
}

/* ===== リンクなしバージョン(シャドウなし&hoverなし) ===== */

.c-btn--noH span {
	position: relative;
	font-size: 1.6rem;
	font-weight: bold;
	color: #fff;
	display: block;
	text-align: center;
	width: 69%;
	padding: 15px 0;
	border-radius: 40px;
	background-color: #56a520;
	/* box-shadow: 0px 4px #448319; */
	transition: all 0.2s;
	margin: 0 auto;
}

.c-btn--noH span {
	position: relative;
}

.c-btn--noH span::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 23px;
	right: 28px;
	background: url(../img/Arrow-cBtn.svg) center no-repeat;
	background-size: contain;
	width: 6px;
	height: 10px;
	transition: all 0.2s;
}

/* ====== リンクなし(シャドウあり) ===== */

.c-btn--uni span {
	position: relative;
	font-size: 1.6rem;
	font-weight: bold;
	color: #fff;
	display: block;
	text-align: center;
	width: 300px;
	padding: 20px 0;
	border-radius: 40px;
	background-color: #56a523;
	box-shadow: 0px 4px #448319;
	transition: all 0.2s;
	margin: 0 auto;
}

.c-btn--uni span {
	position: relative;
}

.c-btn--uni span::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 23px;
	right: 28px;
	background: url(../img/Arrow-cBtn.svg) center no-repeat;
	background-size: contain;
	width: 6px;
	height: 10px;
	transition: all 0.2s;
}

/* ====== リンクあり(シャドウなし) ===== */

.c-btn--noS a {
	position: relative;
	font-size: 1.6rem;
	font-weight: bold;
	color: #fff;
	display: block;
	text-align: center;
	width: 100%;
	padding: 16px 0;
	border-radius: 40px;
	background-color: #56a523;
	box-shadow: none;
	transition: all 0.2s;
	margin: 0 auto 22px auto;
}

.c-btn--noS a {
	position: relative;
}

.c-btn--noS a::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 24px;
	right: 28px;
	background: url(../img/Arrow-cBtn.svg) center no-repeat;
	background-size: contain;
	width: 6px;
	height: 10px;
	transition: all 0.2s;
}

/* ==== SIS光の特徴 ==== */

.c-btn--point span {
	position: relative;
	font-size: 1.6rem;
	line-height: 1;
	font-weight: 500;
	color: #333;
	display: block;
	text-align: center;
	width: 80%;
	padding: 8px 0 9px 0;
	border-radius: 40px;
	border: solid 1px #333333;
	transition: all 0.2s;
	margin: 0 auto;
}

.c-btn--point span {
	position: relative;
	color: #fff;
	background-color: #448319;
	border: 1px solid #448319;
}

.c-btn--point span::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 12px;
	right: 15px;
	background: url(../img/sec_feature/icon-Arrowf.svg) center no-repeat;
	background-size: contain;
	width: 6px;
	height: 10px;
	transition: all 0.2s;
}

/* ======= 別タブボタンの場合 ====== */

.B-tab a::before {
	top: 20px;
	right: 25px;
	background: url(../img/icon_link.svg) center no-repeat;
	width: 16px;
	height: 16px;
}

/* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
            sec_mv
▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */

main {
	margin-top: 63px;
	position: relative;
	transition: linear 0.2s;
}

.sec_mv{
	background-color:#D5F0EA ;
}
/* スライダー */
.slideInner {
	position: relative;
	display: block;
	content: "";
	background: url(../img/sec_mv/img-mv01sp.jpg) no-repeat center bottom;
	background-size: cover;
	width: auto;
	height: 588px;
	z-index: 1;
}
.zuumoArea{
	position: absolute;
	bottom: -52px;
	right: 8.533vw;
	width: 186px;
	height: 161px;
}
.slideTextArea {
	text-align: center;
	width: 100%;
	position: absolute;
	top: 41%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.mvTitle img {
	width: 190px;
	margin: 0 auto 25px auto;
}

.slideText {
	text-align: center;
	font-size: 1.6rem;
	font-weight: 500;
}

/* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
        sec_news(お知らせ)
▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */

.sec_news {
	padding: 24px 0 38px 0;
	background-color: #1d8b5e;
}

/* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
      sec_wise(光について)
▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */

.sec_wise {
	padding: 80px 0 100px 0;
	background-color: #d5f0ea;
}

.wiseInner {
	width: 100%;
	max-width: 728px;
	margin: 0 auto;
	text-align: center;
}

.wiseTitle {
	width: 73.33%;
	margin: 0 auto 40px auto;
}

.wiseText {
	width: 90%;
	margin: 0 auto;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.75;
	margin-bottom: 40px;
}

.wiseText span {
	font-size: 1.6rem;
	font-weight: bold;
	color: #56a523;
}

.wiseServie {
	position: relative;
}

.wiseServie::before {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: -35px;
	right: 5px;
	background: url(../img/sec_wise/img-zuumo.svg) center no-repeat;
	background-size: contain;
	width: 100px;
	height: 120px;
}

/* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
          sec_feature(SIS光の特徴)
▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲ */

.sec_feature {
	padding: 80px 0 0;
}

.featureInner {
	width: 100%;
	max-width: 995px;
	margin: 0 auto;
}

.featureTitle {
	margin-bottom: 56px;
}

.featureListItem {
	width: 87%;
	margin: 145px auto 0 auto;
	margin-bottom: 86px;
}

.featureListItem:last-of-type {
	margin-bottom: 0;
}

.featureListItem > .ListItemWrap {
	padding: 40px 0 56px 0;
	border-bottom: 1px solid #cccccc;
	border-left: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	border-radius: 0 0 16px 16px;
	box-sizing: border-box;
}

.ListItemWrap > .ListItemInner {
	width: 90%;
	margin: 0 auto;
}

.featureListTitle {
	position: relative;
	text-align: center;
	font-size: 2.4rem;
	padding: 27px 0 23px 0;
	font-weight: bold;
	color: #fff;
	letter-spacing: 0.08em;
	line-height: 1;
	background-color: #f89829;
	border-radius: 16px 16px 0 0;
}

.featureListTitle::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: -103px;
	left: 50%;
	transform: translate(-50%, 0);
	width: 160px;
	height: 104px;
}

.featureListItem:nth-of-type(1) > .featureListTitle::before {
	background: url(../img/sec_feature/img-point01.svg) center no-repeat;
	background-size: contain;
}

.featureListItem:nth-of-type(2) > .featureListTitle::before {
	background: url(../img/sec_feature/img-point02.svg) center no-repeat;
	background-size: contain;
}

.featureListItem:nth-of-type(3) > .featureListTitle::before {
	background: url(../img/sec_feature/img-point03.svg) center no-repeat;
	background-size: contain;
}

.featureListText {
	text-align: center;
	font-size: 1.6rem;
	font-weight: 500;
	margin-bottom: 40px;
}

.featureAttText {
	font-size: 1.4rem;
	font-weight: 400;
	color: #666666;
	line-height: 1.7;
	margin-bottom: 40px;
}

.pointLIst {
	width: 100%;
	margin: 0 auto 32px auto;
}

.pointLIstItem {
	padding: 25px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	text-align: center;
	margin-bottom: 40px;
	background-color: #faf8dd;
	border-radius: 16px;
}
.pointLIstItem:last-of-type {
	margin-bottom: 0;
}

.pointLIstTitle {
	font-size: 2rem;
	font-weight: bold;
	color: #f89829;
	display: inline-block;
}

.pointLIstTitle--green {
	color: #56a520;
}

.pointLIstTitle span {
	font-size: 1.2rem;
	font-weight: 500;
	color: #333;
	display: block;
	text-align: right;
}

.pointLIstItem img {
	margin-bottom: 10px;
}

.pointText {
	font-size: 1.6rem;
	font-weight: bold;
}

.pointText span {
	font-size: 4rem;
	font-weight: bold;
	color: #cf0f31;
	line-height: 1;
	padding: 0 5px;
}

.point03Title {
	font-weight: bold;
	font-size: 2rem;
	line-height: 40px;
	text-align: center;
	color: #f89829;
	margin-bottom: 24px;
}

.point03List {
	width: 100%;
	margin: 0 auto;
}

.useOpp {
	margin-bottom: 70px;
}

.customOpp {
	margin-bottom: 40px;
}

.point03ListItem {
	width: 100%;
	border: solid 4px #e9e9e9;
	border-radius: 16px;
	background-color: #fafafa;
	box-shadow: 0 4px #cccccc;
	transition: all 0.2s;
	margin-bottom: 20px;
}

.customOpp .point03ListItem:nth-of-type(1),
.customOpp .point03ListItem:nth-of-type(2),
.customOpp .point03ListItem:nth-of-type(3) {
	margin-bottom: 30px;
}

.point03ListItem > a {
	text-align: center;
	padding: 20px 25px 24px 25px;
}

.point03ListTitle {
	position: relative;
	padding-bottom: 95px;
	margin-bottom: 10px;
}

.point03ListItem .point03ListTitle::before {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
	background-size: contain;
	width: 88px;
	height: 74px;
}

/* ------ 便利なオプション ------ */

.useOpp .point03ListItem:nth-of-type(1) .point03ListTitle::before {
	background: url(../img/sec_feature/point03-01-h.svg) center no-repeat;
}
.useOpp .point03ListItem:nth-of-type(2) .point03ListTitle::before {
	background: url(../img/sec_feature/point03-02-h.svg) center no-repeat;
}
.useOpp .point03ListItem:nth-of-type(3) .point03ListTitle::before {
	background: url(../img/sec_feature/point03-03-h.svg) center no-repeat;
}

/* ------ カスタマイズオプション ------- */
.customOpp .point03ListItem .point03ListTitle::before {
	background: url(../img/sec_feature/point03-04.svg) center no-repeat;
}
.customOpp .point03ListItem .point03ListTitle--AOSBOX::before {
	background: url(../img/sec_feature/point-AOSBOX.svg) center no-repeat;
}
.customOpp .point03ListItem .point03ListTitle--AOSCLOUD::before {
	background: url(../img/sec_feature/point-AOSCLOUD.svg) center no-repeat;
}
.customOpp .point03ListItem .point03ListTitle--Tunagaru::before {
	background: url(../img/sec_feature/point-Tunagaru.svg) center no-repeat;
}
.customOpp .point03ListItem .point03ListTitle--rakuraku::before {
	background: url(../img/sec_feature/point-rakuraku.svg) center no-repeat;
}
.customOpp .point03ListItem .point03ListTitle--Anshin::before {
	background: url(../img/sec_feature/point-Anshin.svg) center no-repeat;
}

.point03Price {
	font-size: 1.6rem;
	font-weight: bold;
	margin-bottom: 10px;
}

.point03Price span {
	color: #cf0f31;
}

.point03Price span:nth-of-type(1) {
	font-size: 2.8rem;
	color: #cf0f31;
}

/* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
      sec_flow(ご利用までの流れ)
▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */
.sec_flow{
	padding-top: 80px;
}
.flowTitle {
	margin-bottom: 40px;
}

/* ===== タブ ===== */

.tabBtnWrap {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	text-align: center;
}

.tab_btn {
	width: 31.73%;
	cursor: pointer;
	font-size: 1.4rem;
	line-height: 1.5;
	padding: 14px 0;
	font-weight: bold;
	color: #999999;
	background-color: #eaeaea;
}

.tab_btn.selected {
	background-color: #f89829;
	color: #fff;
}

.contentArea {
	border-top: solid 4px #f89829;
	background-color: #d5f0ea;
	padding: 40px 0 80px 0;
}
.ContentInner {
	width: 87%;
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}

/* ====== タブ内 ====== */

.stepListItem {
	margin-bottom: 40px;
}

.stepTitle {
	position: relative;
	font-size: 2.4rem;
	font-weight: bold;
	margin-bottom: 24px;
	padding-top: 85px;
}

.stepTitle::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	background-size: contain;
	width: 104px;
	height: 71px;
}

.stepTitle--01::before {
	background: url(../img/sec_feature/icon-step01.svg) center no-repeat;
}
.stepTitle--02::before {
	background: url(../img/sec_feature/icon-step02.svg) center no-repeat;
}
.stepTitle--03::before {
	background: url(../img/sec_feature/icon-step03.svg) center no-repeat;
}
.stepTitle--04::before {
	background: url(../img/sec_feature/icon-step04.svg) center no-repeat;
}

.stepTitle span {
	font-size: 1.4rem;
	vertical-align: super;
}

.stepText {
	font-size: 1.6rem;
	font-weight: 500;
	text-align: left;
}

.stepText a {
	display: inline;
	color: #56a523;
	border-bottom: 1px solid #56a523;
	transition: opacity 0.2s;
}

/* ▼転用番号とは・・・ */

.DNText {
	position: relative;
	font-size: 1.4rem;
	line-height: 2;
	font-weight: 500;
	margin-bottom: 20px;
	text-align: left;
}
.DNText::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	right: 0;
	background: url(../img/sec_feature/icon-zuumo.svg) center no-repeat;
	background-size: contain;
	width: 77px;
	height: 77px;
}

.DNText span:nth-of-type(1) {
	font-size: 10px;
	vertical-align: super;
}
.DNText span:nth-of-type(2) {
	font-size: 1.6rem;
	font-weight: bold;
}

/* ==== 取得方法 ==== */

.DNmethodTitle {
	font-size: 1.6rem;
	font-weight: bold;
	background-color: #333333;
	color: #fff;
	display: inline-block;
	padding: 6px 13px;
	margin-top: 30px;
	margin-bottom: 40px;
}

.DNmethod {
	max-width: 556px;
	margin: 0 auto 30px auto;
}

.DNmethod > .textbox {
	position: relative;
	border: solid 1px #333;
	border-radius: 16px;
	padding: 55px 40px 24px 40px;
}

.DNmethodText {
	display: inline-block;
	position: absolute;
	top: -9%;
	left: 50%;
	transform: translate(-50%, 0);
	font-size: 1.6rem;
	font-weight: 500;
	width: 250px;
	background-color: #d5f0ea;
}

.DNmethodList {
	font-size: 1.6rem;
	font-weight: 500;
	text-align: left;
}

.stepText span:nth-of-type(1) {
	font-size: 10px;
	vertical-align: super;
	line-height: 1;
}

.stepText span:nth-of-type(2) {
	font-size: 1.6rem;
	font-weight: bold;
}

.stepInfo {
	background-color: #fff;
	padding: 20px 0;
}

.stepInfoItem {
	width: 90%;
	margin: 0 auto;
}
.stepInfoItem:nth-of-type(1) {
	padding-bottom: 24px;
}

.stepInfoItem:nth-of-type(2) {
	padding-top: 24px;
	border-top: 2px dotted #333333;
}

.stepInfoTitle {
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 25px;
}

.stepInfoText {
	font-size: 2.4rem;
	font-weight: 500;
	margin-bottom: 14px;
}

.stepInfoText span {
	font-size: 4rem;
	font-weight: bold;
	vertical-align: sub;
}

.stepAttText {
	font-size: 1.4rem;
}
/* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
      sec_faq(よくあるご質問)
▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */
.sec_faq {
	background: url(../img/img-faqBG.svg) center repeat;
	background-size: cover;
	padding: 80px 0;
	border-bottom: 1px solid #eaeaea;
}

.faqInner {
	width: 87%;
	margin: 0 auto;
}

.faqTitle {
	margin-bottom: 62px;
}

.faqListItem {
	padding-bottom: 20px;
	border-bottom: 1px solid #707070;
	margin-bottom: 40px;
}

.faqListItem:last-of-type {
	border: none;
	margin-bottom: 40px;
}

.Qtext {
	position: relative;
	font-size: 1.6rem;
	font-weight: bold;
	color: #f89829;
	margin-bottom: 38px;
	padding-left: 50px;
}

.Qtext::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../img/sec_faq/img-Qicon.svg) center no-repeat;
	background-size: contain;
	width: 22px;
	height: 30px;
}
.Atext {
	position: relative;
	font-size: 1.6rem;
	line-height: 2;
	font-weight: 500;
	padding-left: 50px;
}
.Atext::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 4px;
	left: 0;
	background: url(../img/sec_faq/img-Aicon.svg) center no-repeat;
	background-size: contain;
	width: 21px;
	height: 23px;
}

.Atext > a {
	font-weight: 500;
	color: #1571da;
	display: inline;
	border-bottom: solid 1px;
	transition: opacity 0.2s;
}

.Atext li > a {
	color: #1571da;
	display: inline;
	border-bottom: solid 1px;
	transition: opacity 0.2s;
}

.pricepage {
	display: inline;
	color: #1571da;
	border-bottom: 1px solid #1571da;
	transition: all 0.2s;
}

/* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
      sec_info(お申し込みはこちら/ご相談はこちら)
▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */

.sec_info {
	padding: 80px 0;
	background-color: #f4f8f9;
}
.infoInner {
	width: 87%;
	max-width: 995px;
	margin: 0 auto;
}

.infoItem {
	width: 100%;
	padding: 32px 22px;
	background-color: #fafafa;
	border: solid 8px #e9e9e9;
	text-align: center;
	border-radius: 16px;
}
.infoItem:first-of-type {
	margin-bottom: 20px;
}

.infoItemTitle {
	font-size: 2.4rem;
	font-weight: bold;
	margin-bottom: 24px;
}

.infoItemSubTitle {
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 20px;
	line-height: 1.6;
}
.info24 {
	display: inline-block;
	font-size: 1.4rem;
	font-weight: bold;
	margin: 16px 0 40px 0;
}
.telnum {
	display: inline-block;
	margin-bottom: 4px;
	font-size: 4rem;
	font-weight: 700;
	line-height: 1;
    letter-spacing: normal;
}
.telnum::before {
	content: "";
	display: inline-block;
	margin-right: 10px;
	background: url(../img/TOP/sec_info/img-telicon.svg) center no-repeat;
	background-size: contain;
	width: 20px;
	height: 30px;
}
.infoText {
	font-size: 1.6rem;
	font-weight: bold;
}
.infoText_mini {
	font-size: 1.4rem;
    font-weight: 500;
}
.infoText_big {
	font-size: 1.6rem;
	font-weight: bold;
}
.infoText--L {
	font-size: 2rem;
}

.c-telBtn {
	padding-bottom: 6px;
	text-align: center;
	width: 100%;
	line-height: 1.2;
	font-size: 2.4rem;
	background-color: #ef4218;
	border-radius: 40px;
	color: #fff;
	font-weight: bold;
	box-shadow: 0 4px #cf0f31;
	margin-top: 12px;
	margin-bottom: 16px;
}
.c-telBtn .text {
	font-size: 1.4rem;
}
.c-telBtn .tel {
	position: relative;
	padding-left: 21px;
}
.c-telBtn .tel::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 7px;
	left: 0;
	background: url(../img/icon-tel-f.svg) center no-repeat;
	background-size: contain;
	width: 15px;
	height: 22px;
}

/* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
      sec_info01(お申し込みはこちら)
▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */

.sec_info--01 {
	padding: 80px 0;
}

.infoItem--01 {
	width: 100%;
	padding: 40px 0 47px 0;
}

.infoList--01 {
	width: 90%;
	margin: 0 auto;
}

.infoItemSubTitle--01 {
	margin: 32px 0 16px;
}
.info24--01 {
	margin: 12px 0 0 0;
}
.infoItem li:not(:first-of-type){
    margin-top: 40px;
}

/* --
下層ページスタイルここから
接頭辞: U(Under)
-- */

/* 終了したオプション文言 */
.c-endService {
	color: #ff1111;
}
.endService_main {
	font-size: 2.4rem;
	font-weight: 700;
}
.endService_sub {
	font-size: 1.6rem;
}

/* ====== 共通 ====== */

.UmvInner {
	position: relative;
}

.c-UtitleWrap {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.c-Utitle {
	display: inline-block;
	font-size: 2.4rem;
	font-weight: 900;
	color: #fff;
	background-color: #f89829;
	padding: 0 12px;
}

.c-subUtitle {
	font-weight: 900;
	text-align: center;
	font-size: 2rem;
	color: #1d8b5e;
	display: block;
	margin-bottom: 9px;
}

.c-Utitle span {
	width: 180px;
	position: absolute;
	top: -40px;
	left: 50%;
	transform: translate(-50%, 0);
	display: inline-block;
}

/* ======= 共通リスト ======= */

.c-U-section {
	padding: 80px 0;
}

.c-U-secInner {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

.c-U-Text {
	font-size: 1.8rem;
	text-align: center;
	font-weight: 500;
	margin-bottom: 40px;
}

/* オプションリスト */
.c-opWrap {
	width: 90%;
	margin: 0 auto;
}

.c-opWrap--mb100 {
	margin-bottom: 100px;
}

.c-opWrap--mb40 {
	margin-bottom: 40px;
}
.c-opListItemWrap--mb40 {
	margin-bottom: 40px;
}

/* h3 */
.U-Title--h3 {
	font-size: 2rem;
	line-height: 1.2;
	font-weight: bold;
	background-color: #fffff2;
	border-left: 6px solid #f8982b;
	padding: 8px 0 8px 10px;
	margin-bottom: 40px;
}
/* h4 */
.U-Title--h4 {
	font-size: 1.8rem;
	line-height: 1.5;
	font-weight: bold;
	border-bottom: 4px solid #f8982b;
	padding-bottom: 4px;
	margin-bottom: 25px;
}

/* グレー色 */
.U-Title--h4-gray {
	border-bottom: 4px solid #dddddd;
}
/* ▼付き */
.U-Title--h4--t {
	position: relative;
	margin-bottom: 50px;
}
.U-Title--h4--t::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 40px;
	left: 50%;
	transform: translate(-50%, 0);
	background: url(../img/Option/icon-tryangle.svg) center no-repeat;
	background-size: contain;
	width: 40px;
	height: 24px;
}

.U-priceListItem {
	width: 90%;
	margin: 0 auto;
}

/* ▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲
                料金プラン
▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲*/
.c-opListList {
	padding: 30px 20px;
	background-color: #fafafa;
	border: solid 4px #e9e9e9;
	border-radius: 16px;
	margin-bottom: 16px;
}
.c-opListList .opListList_item {
    padding-bottom: 4px;
	border-bottom: 2px solid #f8982b;
	margin-bottom: 25px;
}
.c-opListList .opListList_item:last-of-type{
    margin-bottom: 0;
}
.c-option_item {
    padding: 20px;
	background-color: #fafafa;
	border: solid 4px #e9e9e9;
	border-radius: 16px;
	margin-bottom: 16px;
}
.c-option_item .optionTitle{
    font-size: 2rem;
	font-weight: bold;
	padding-bottom: 4px;
	margin-bottom: 16px;
	border-bottom: 2px solid #f8982b;
}
.c-option_item .optionTitle .c-option_price {
    font-size: 1.8rem;
}
.c-option_item .optionTitle .c-option_price .price{
	font-size: 2.2rem;
	font-weight: bold;
	color: #f89829;
}
.opListList_item .price {
	font-size: 2.4rem;
	font-weight: bold;
	color: #f89829;
}
.opListList_item .c-span {
	display: inline-block;
	font-size: 2rem;
	font-weight: bold;
}
.opListText {
	font-size: 1.6rem;
	font-weight: 400;
}
.oppAttText {
	position: relative;
	font-size: 1.4rem;
	font-weight: 400;
	padding-left: 16px;
	margin-bottom: 14px;
}
.oppAttText:last-of-type {
	margin-bottom: 0;
}
.oppAttText::before {
	content: "※";
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}

/* ▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲
        利用が広がる便利なオプション
▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲*/

/* ==== 従来の加入電話 ==== */
.ctWrap {
	width: 100%;
	margin: 0 auto;
}
.ctItem {
	width: 100%;
	padding: 24px;
	border-radius: 16px;
	background-color: #f8f8f8;
	text-align: center;
}
.ctItem:last-of-type {
    margin-top: 24px;
}
.ctTitle {
	font-size: 2rem;
	font-weight: 500;
	margin-bottom: 15px;
}
.ctTitle span {
	font-weight: bold;
}

.ctText {
	font-size: 1.5rem;
	font-weight: 500;
	margin-top: 20px;
}

.ctPrice {
	text-align: center;
}

.ctPrice--mt12 {
	margin-top: 12px;
}

.ctPrice--mt37 {
	margin-top: 37px;
}

.ctPrice {
	font-size: 1.6rem;
	font-weight: bold;
}

.ctPrice .price {
	font-size: 3.2rem;
	font-weight: bold;
	color: #f8982b;
}

.ctAtt {
	font-size: 1.2rem;
	font-weight: 400;
}

/* ==== 選べる2つのプラン ==== */
.ufItem {
	text-align: center;
	width: 100%;
	margin: 0 auto;
	background-color: #fafafa;
	border-radius: 16px;
	margin-top: 24px;
	border: solid 4px #f8982b;
	padding: 40px 20px 45px 20px;
}
.ufItem:first-of-type {
	margin-top: 0;
}

.ufSubTitle {
	display: inline-block;
	font-size: 1.6rem;
	font-weight: bold;
	margin-bottom: 20px;
}

.ufSubTitle--recomend {
	position: relative;
	padding-left: 85px;
}

.ufSubTitle--recomend::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: -14px;
	left: 0;
	background: url(../img/Option/icon-osusume.svg) center no-repeat;
	background-size: contain;
	width: 76px;
	height: 76px;
}

.ufTitle {
	font-size: 2rem;
	font-weight: bold;
	border-bottom: 2px solid #f89829;
	margin-bottom: 10px;
}

.ufText {
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.75;
}

.ufText--zuumo {
	position: relative;
	padding-right: 100px;
	margin-top: 30px;
}
.ufText--zuumo::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: -35px;
	right: 0;
	background: url(../img/Option/icon-zuumo02.svg) center no-repeat;
	background-size: contain;
	width: 84px;
	height: 128px;
}

.ufPrice {
	font-size: 1.6rem;
	font-weight: 500;
}

.ufPrice span {
	font-size: 3.2rem;
	color: #f89829;
	font-weight: bold;
}

.ufListWrap {
	display: flex;
	justify-content: space-between;
}

.ufList li {
	position: relative;
	text-align: left;
	font-size: 1.4rem;
	font-weight: 400;
	padding-left: 10px;
}
.ufList li::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 9px;
	left: 0;
	background: url(../img/Option/icon-dots.svg) center no-repeat;
	background-size: contain;
	width: 6px;
	height: 6px;
}

/* ==== オプションサービス ==== */

.dots {
	color: #f89829;
}
.dots_HikariCall::before {
    content: "●";
    display: inline-block;
	color: #f89829;
    font-size: 2rem;
    margin-right: 4px;
}

/* ==== SIS光、リモートサービス ==== */

.c-Price span:nth-of-type(1),
.c-Price span:nth-of-type(3) {
	font-size: 1.6rem;
	font-weight: bold;
}

.c-Price span:nth-of-type(2) {
	font-size: 4.8rem;
	font-weight: 900;
	color: #f8982b;
}

.c-Price {
	text-align: center;
}

.c-Price--mb35 {
	margin-bottom: 35px;
}

.c-planListWrap {
	display: flex;
	justify-content: space-between;
}

.c-planList li {
	position: relative;
	padding-left: 10px;
	font-size: 1.4rem;
}

.c-planList li::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 10px;
	left: 0;
	background: url(../img/Option/icon-dots.svg) center no-repeat;
	background-size: contain;
	width: 6px;
	height: 6px;
}

.c-banner {
	border-radius: 16px;
	background-color: #fffde8;
	padding: 30px 24px 30px 16px;
	margin-bottom: 16px;
}
.c-bannerWrap {
	text-align: center;
}

/*==========
Utility
========== */
/* text-align */
.u-textCenter {
	text-align: center;
}
.u-textleft {
	text-align: left;
}

/* margin-top */
.u-mgt16 {
	margin-top: 16px;
}
.u-mgt24 {
	margin-top: 24px;
}
.u-mgt40 {
	margin-top: 40px;
}
.u-mgt80 {
	margin-top: 80px;
}
.u-smgt40 {
	margin-top: 40px;
}
.u-mgt100 {
	margin-top: 100px;
}
.u-mgt120 {
	margin-top: 120px;
}

/* margin-bottom */
.u-mgb16 {
	margin-bottom: 16px;
}

.u-mgb40 {
	margin-bottom: 40px;
}

/* padding */
.u-pdt120 {
	padding-top: 120px;
}

/* width */
.l-width_nomal {
	max-width: 800px;
	margin-right: auto;
	margin-left: auto;
}
.l-width_min {
	max-width: 90%;
	margin-right: auto;
	margin-left: auto;
}