@charset "utf-8";

/* == base ============================================== */
html {
	font-size: 62.5%;
}
body {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.6rem;
	line-height: 1.6;
	letter-spacing: 0.08em;
	color: #333;
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
a {
	display: block;
}
main {
	display: block;
}
input,
textarea {
	-webkit-appearance: none;
	appearance: none;
}
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}
.sp_only {
	display: none !important;
}

/* ▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲
            header
▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲ */

.headerSP {
	display: none !important;
}

header {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	transform: translateY(0);
	transition: linear 0.2s;
	z-index: 10;
}

#js-header.change {
	transform: translateY(-54%);
}

/*  ====== 下ナビゲーション ===== */
.navBott {
	position: relative;
	display: flex;
	justify-content: space-between;
	z-index: 4;
	height: 49.59px;
}
.navtop{
	height: 68px;
}
.navBott > li {
	text-align: center;
	width: 100%;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	font-weight: 500;
	color: #fff;
	border-right: 1px solid #fff;
	box-sizing: border-box;
}

.navBott > li:last-child {
	border: none;
}

.navBott > li > a {
	padding: 12px 0;
	background-color: #56a523;
	transition: linear 0.2s;
}

.navBott > li.navOpp {
	position: relative;
	cursor: pointer;
	padding: 12px 0;
	color: #fff;
	background-color: #56a523;
	transition: linear 0.2s;
}

.navBott > li.navOpp::before {
	content: "";
	position: absolute;
	bottom: -15px;
	left: 50%;
	transform: translate(-50%, 0);
	width: 22px;
	height: 15px;
	background: url(../img/Arrow-down.svg) center no-repeat;
	background-size: contain;
	visibility: hidden;
	transition: linear 0.2s;
}

.navBott > li.navOpp.open::before {
	visibility: visible;
}

.navBott > li.app a {
	background-color: #f89829;
}

.navOpp span {
	position: relative;
	padding-right: 25px;
}

.navOpp span::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 6px;
	right: 0;
	background: url(../img/Arrow-navOpp.svg) center no-repeat;
	background-size: contain;
	width: 14px;
	height: 14px;
	transition: linear 0.2s;
}

/* ========= ホバーアニメーション ========== */

.navBott > li:hover > a {
	color: #56a523;
	background-color: rgba(255, 255, 255, 0.95);
}

.navBott > li.app:hover a {
	color: #fff;
	background-color: #c47b27;
}

.navBott > li.navOpp:hover {
	color: #56a523;
	background-color: rgba(255, 255, 255, 0.95);
}

.navBott > li.navOpp:hover span::before {
	background: url(../img/Arrow-navOppf.svg) center no-repeat;
}

/* ====== ▼アコーディオンオープン時  ======= */

.navBott > li.navOpp.open:hover {
	color: #fff;
	background-color: #56a523;
}

.navBott > li.navOpp.open:hover span::before {
	background: url(../img/Arrow-navOpp.svg) center no-repeat;
}

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

#js-navBott.change > li {
	color: #56a520;
	border-right: solid 1px #eaeaea;
}

#js-navBott.change > li:last-child {
	border-right: none;
}

#js-navBott.change > li > a {
	transition: background-color linear 0.2s;
	padding: 17px 0;
	background-color: rgba(255, 255, 255, 0.95);
}

#js-navBott.change > li.navOpp {
	transition: all linear 0.2s;
	padding: 17px 0;
	background-color: rgba(255, 255, 255, 0.95);
}

#js-navBott.change > li.navOpp.open {
	color: #fff;
	background-color: rgba(86, 165, 32, 0.95);
}

#js-navBott.change > li.navOpp::before {
	display: none;
}

#js-navBott.change > li.app a {
	background-color: #f89829;
	color: #fff;
}

#js-navBott.change > li.navOpp span::before {
	background: url(../img/Arrow-f-navOpp.svg) center no-repeat;
}
#js-navBott.change > li.navOpp.open span::before {
	background: url(../img/Arrow-navOpp.svg) center no-repeat;
}

#js-navBott.change > li:hover > a {
	color: #fff;
	background-color: rgba(86, 165, 35, 0.95);
}

#js-navBott.change > li.app:hover a {
	color: #fff;
	background-color: #c47b27;
}

#js-navBott.change > li:hover.navOpp {
	color: #fff;
	background-color: rgba(86, 165, 35, 0.95);
}

#js-navBott.change > li.navOpp:hover span::before {
	background: url(../img/Arrow-navOpp.svg) center no-repeat;
}

/* アコーディオン設定 */

.accordion {
	width: 100%;
	width: 100%;
	position: absolute;
	top: 118px;
	left: 0;
	background-color: #fff;
	z-index: 3;
	transition: linear 0.2s;
	height: 0;
	overflow-y: scroll;
}

.accordion.open {
	height: 68vh;
	max-height: 500px;
    box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.2);
}

.accordion .accordionInner {
	transition: linear 0.2s;
	visibility: hidden;
}

.accordion.open .accordionInner {
	visibility: visible;
    padding-bottom: 40px;
}

.accordion.change {
	top: 127px;
}

.navOppListWrap {
	width: 100%;
	max-width: 600px;
	margin: 40px auto 0;
	display: flex;
	justify-content: space-between;
}
.navOppList li {
	font-size: 1.6rem;
	font-weight: 500;
	margin-bottom: 30px;
}
.navOppList li a {
	display: inline;
	border-bottom: solid 1px #333;
}

.navOpp.open span::before {
	transform: rotate(-180deg);
}

/* ==== ヘッダーブレイクポイント ===== */
@media screen and (max-width: 1000px) {
	.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;
		padding-left: 20px;
		background-color: #fff;
	}

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

    .header_NoFixed {
        display: flex;
        justify-content: space-between;
        width: 83%;
        background-color: #fff;
		border-bottom: solid 4px #56a523;
    }

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

	.hamBtn .border {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, 0);
		display: block;
		height: 2px;
		width: 32px;
		background-color: #333;
		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: 20%;
	}

	.headerLsit {
		overflow-y: 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%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(255, 255, 255, 0.5);
	padding: 6px 0 6px 80px;
	z-index: 2;
}
.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;
}

.breadcrumbItem a:hover {
	opacity: 0.7;
}

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

/* ==== 共通タイトル ==== */
.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: 48px;
}
.c-TitleIcon.common_mg {
	margin-top: 0;
	margin-bottom: 48px;
}
.c-TitleIcon .TitleIcon-en {
	display: block;
	font-size: 1.6rem;
	font-weight: 700;
	color: #44831c;
}
.c-TitleIcon.p-white .TitleIcon-en {
    color: #fff;
}
.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.p-white .TitleIcon-en::before {
	background: url(../img/icon-title_left_white.svg) left center no-repeat;
}
.c-TitleIcon.p-white .TitleIcon-en::after {
	background: url(../img/icon-title_right_white.svg) right center no-repeat;
}
.c-TitleIcon .TitleIcon-ja {
	display: block;
	font-weight: 700;
}
.c-TitleIcon.p-white .TitleIcon-ja {
    color: #fff;
}
.c-TitleIcon.u-mini .TitleIcon-ja {
	font-size: 1.8rem;
}
.c-TitleIcon.u-big .TitleIcon-ja {
	font-size: 3.2rem;
}
.ContactBox {
	width: 100%;
	text-align: center;
	border: solid 8px #e9e9e9;
	background-color: #fafafa;
	padding: 40px 20px;
	border-radius: 16px;
	margin-bottom: 24px;
}
.ContactBox:last-of-type {
	margin-bottom: 0;
}

/* ===== ボタン ==== */
.c-btn {
	display: block;
}
.c-btn a {
	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 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: 8px;
	height: 10px;
	transition: all 0.2s;
}

.c-btn a:hover {
	transform: translateY(4px);
	background-color: #448319;
	box-shadow: none;
}

.c-btn a:hover::before {
	right: 20px;
}

.c-btn--m a {
	width: 488px;
	padding-top: 28px;
	padding-bottom: 28px;
}
.c-btn--m a::before {
	top: 35px;
}

/* (白) */
.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--f a:hover {
	color: #fff;
	background-color: #15a369;
}

.c-btn--f a:hover::before {
	background: url(../img/Arrow-cBtn.svg) center no-repeat;
}

/* (白)小さい版 */
.c-btn--fs a {
	width: 73.47%;
	padding: 6px 0;
	color: #56a520;
	font-size: 1.4rem;
}

.c-btn--fs a:before {
	top: 13px;
	right: 19px;
	background: url(../img/Plan/icon-Arrow-plan.svg) center no-repeat;
}

.c-btn--fs a:hover:before {
	right: 19px;
	background: url(../img/Plan/icon-Arrow-plan-f.svg) center no-repeat;
}

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

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

.c-btn--opp a:hover {
	color: #fff;
	background-color: #56a520;
}

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

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

.c-btn--o a:hover {
	color: #fff;
	background-color: #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: 300px;
	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;
}

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

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

.B-tab a:hover::before {
	right: 25px;
}

/* ======= 戻るボタン ====== */
.c-btn--rev {
	margin: 48px auto 80px;
}
.c-btn--rev a {
	width: 488px;
	padding: 28px 0;
}
.c-btn--rev a::before {
	background: url(../img/icon-Arrow-rev.svg) center no-repeat;
	top: 37px;
	left: 40px;
}
.c-btn--rev a:hover::before {
	left: 32px;
	background: url(../img/icon-Arrow-rev-h.svg) center no-repeat;
}

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

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


/* スライダー */
.slideInner {
	position: relative;
	display: block;
	content: "";
	background: url(../img/TOP/sec_mv/img-mv02.jpg) no-repeat center bottom;
	background-size: cover;
	width: auto;
	height: 520px;
	z-index: 1;
}
.zuumoArea{
	position: absolute;
	bottom: -49px;
	right: 11%;
	width: 150px;
	height: 274px;
}

.slideTextArea {
	text-align: center;
	width: 100%;
	position: absolute;
	top: 51%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

@media all and (max-width: 1100px) {
	.slideInner{
	  height: 640px;
	}

	  .slideTextArea {
		top: 45%;
	  }
  }
  @media all and (max-width: 1300px) {
	.zuumoArea{
		right: 4%;
	}
   }
  @media screen and (min-width: 768px) and (max-width:1100px) {
	.zuumoArea{
		position: absolute;
		bottom: -35px;
		right: 4.267vw;
		width: 200px;
		height: 167px;
	  }
  }

  @media screen and (min-width: 768px) and (max-width:950px) {
	  .slideTextArea{
		  width: 90%;
	  }
  }
.mvTitle img {
	margin: 0 auto 15px auto;
}

.zuumoImg {
	position: absolute;
	bottom: -50px;
	right: 200px;
	z-index: 1;
}

.slideTitle {
	font-size: 4.4rem;
	font-weight: 900;
	color: #fff;
	background-color: #2ea6c3;
	display: inline-block;
	margin-bottom: 24px;
	padding: 0 10px;
}

.slideTitle span {
	font-size: 2.8rem;
}

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

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

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

/* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
    sec_reason(SISが選ばれる理由)
▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */

.sec_reason {
	padding: 80px 0 120px 0;
	background-color: #f4f8f9;
}

.reasonInner {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

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

.reasonPointItem {
	width: 30.6%;
}

.PointThum {
	background-color: #fff;
	text-align: center;
	border-radius: 16px;
	padding: 20px 0;
	margin-bottom: 20px;
}

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

.PointCatch {
	font-size: 2rem;
	font-weight: bold;
	letter-spacing: 0.08em;
}

.PointText {
	font-size: 1.6rem;
	font-weight: 500;
	color: #666;
	letter-spacing: 0.04em;
	line-height: 2;
}

/* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
    sec_plan(選べる料金プラン)
▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */

.sec_plan {
	padding: 86px 0 120px 0;
	background-color: #1d8b5e;
}

.planInner {
	width: 100%;
	max-width: 985px;
	margin: 0 auto;
}

.planTitle {
	color: #fff;
	margin-bottom: 40px;
}

.planSubTitle {
	text-align: center;
	margin-bottom: 30px;
}

.planText {
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.5;
	color: #fff;
	text-align: center;
	margin-bottom: 18px;
}

.planList {
	display: flex;
	justify-content: space-between;
    max-width: 600px;
    margin: 0 auto 60px;
}

.planListItem {
	width: 30.26%;
	text-align: center;
	border-right: 1px solid rgba(255, 255, 255, 0.6);
}

.planListItem:last-of-type {
	border: none;
}

.planListItem img {
	margin-bottom: 24px;
}

.planListText {
	font-size: 2rem;
	font-weight: bold;
	color: #fff;
}

/* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
    sec_option(豊富なオプションサービス)
▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲ */

.sec_option {
	padding: 87px 0 120px 0;
}

.optionInner {
	width: 100%;
	max-width: 990px;
	margin: 0 auto;
}

.optionTitle {
	margin-bottom: 40px;
}

.optionText {
	font-size: 2rem;
	font-weight: 500;
	text-align: center;
	margin-bottom: 57px;
}

/* === オプション一覧 トップ === */
.optionList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 72px;
}

.optionListItem {
	width: 47.98%;
	background-color: #fafafa;
	border: solid 8px #e9e9e9;
	border-radius: 16px;
	box-shadow: 0px 4px #ccc;
	transition: all 0.2s;
}

.optionListItem:nth-of-type(1),
.optionListItem:nth-of-type(2),
.optionListItem:nth-of-type(3),
.optionListItem:nth-of-type(4) {
	margin-bottom: 40px;
}

.optionListItem a {
	padding: 40px 40px 44px 40px;
}

.optionListTitle {
	text-align: center;
	font-size: 2.4rem;
	font-weight: bold;
	margin-bottom: 30px;
}

.optionListText {
	font-size: 1.6rem;
	color: #666;
	margin-bottom: 16px;
}

.optionPrice {
	font-size: 1.6rem;
	font-weight: bold;
	margin-bottom: 36px;
}

.optionPrice span {
	font-size: 2.4rem;
}

.optionListImg {
	display: block;
	margin: 0 auto 16px auto;
}

.optionListItem:hover {
	box-shadow: none;
	transform: translateY(3px);
}

.optionListItem a > .c-btn--noH span {
	padding: 20px 0;
}

.optionListItem a > .c-btn--noH span::before {
	top: 27px;
}

.optionListItem:hover .c-btn--noH span {
	background-color: #448319;
}

.optionListItem:hover .c-btn--noH span::before {
	right: 20px;
}

/* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼
      sec_flow(ご利用までの流れ)
▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */

.sec_flow {
	padding: 86px 0 120px 0;
	background-color: #1d8b5e;
}

.flowInner {
	position: relative;
	width: 100%;
	max-width: 976px;
	margin: 0 auto;
}

.flowInner::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 73%;
	left: 12%;
	background: url(../img/TOP/sec_flow/img-flowZumo.png) center no-repeat;
	background-size: contain;
	width: 150px;
	height: 226px;
	z-index: 5;
}

.flowTitle {
	color: #fff;
	margin-bottom: 40px;
}

.flowText {
	text-align: center;
	font-size: 2rem;
	font-weight: 500;
	color: #fff;
	margin-bottom: 50px;
}

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

.faqInner {
	width: 100%;
	max-width: 900px;
	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: 94px;
}

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

.Qtext::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../img/TOP/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: 66px;
}
.Atext::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 4px;
	left: 0;
	background: url(../img/TOP/sec_faq/img-Aicon.svg) center no-repeat;
	background-size: contain;
	width: 21px;
	height: 23px;
}

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

.Atext > a:hover {
	opacity: 0.8;
}

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

.sec_info {
	padding: 120px 0;
}
.sec_info.p-option {
	padding: 0;
}
.infoInner {
	width: 100%;
	max-width: 995px;
	margin: 0 auto;
}
.infoItemWrap {
	display: flex;
	justify-content: space-between;
}
.infoItem {
	width: 48%;
	padding: 32px 30px;
	background-color: #fafafa;
	border: solid 8px #e9e9e9;
	text-align: center;
	border-radius: 16px;
}
.infoList li:not(:first-of-type){
    margin-top: 40px;
}
.infoItem li:not(:first-of-type){
    margin-top: 24px;
}
.infoItemTitle {
	font-size: 3.2rem;
	font-weight: bold;
	margin-bottom: 35px;
}

.infoItemSubTitle {
	font-size: 2.4rem;
	font-weight: bold;
	margin-bottom: 20px;
	line-height: 1.6;
}
.info24 {
	display: inline-block;
	font-size: 1.6rem;
	font-weight: bold;
	padding: 5px 7px;
	border: solid 1px #333;
	margin: 24px 0 50px 0;
}
.telnum {
	display: inline-block;
	margin-bottom: 4px;
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1;
    letter-spacing: normal;
}
.telnum::before {
	content: "";
	display: inline-block;
	margin-right: 8px;
	background: url(../img/TOP/sec_info/img-telicon.svg) center no-repeat;
	background-size: contain;
	width: 16px;
	height: 24px;
}
.infoText {
	font-size: 1.4rem;
	font-weight: bold;
}
.infoText_mini {
	font-size: 1.4rem;
    font-weight: 500;
}
.infoText_big {
	font-size: 1.8rem;
	font-weight: bold;
}
.c-border::after {
    margin: 32px auto 0;
    text-align: center;
    display: block;
    content: "";
    background-color: #999;
    max-width: 320px;
    width: 100%;
    height: 1px;
}

/* --
※-※ー※-※ー※-※ー下層ページスタイルここから
-- */

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

.UmvInner {
	position: relative;
}

.c-UtitleWrap {
	position: absolute;
	top: 56%;
	left: 50%;
	transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}
.c-Utitle {
	display: inline-block;
	font-size: 3.2rem;
	font-weight: 900;
	color: #fff;
	background-color: #1d8b5e;
	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;
}

/* h3 */
.U-Title--h3 {
	font-size: 2.8rem;
	line-height: 1.2;
	font-weight: bold;
	padding: 8px 0 8px 10px;
	margin-top: 80px;
	margin-bottom: 48px;
}

/* 緑 */
.U-Title--h3-green {
	background-color: rgba(86, 165, 32, 0.1);
	border-left: 6px solid #1d8b5e;
}

/* h4 */
.U-Title--h4 {
	font-size: 2.4rem;
	line-height: 1.5;
	font-weight: bold;
	padding-bottom: 4px;
	margin-top: 48px;
	margin-bottom: 24px;
}

/* 緑 */
.U-Title--h4-green {
	border-bottom: 4px solid #1d8b5e;
}

/* h4 */
.U-Title--h4--point {
	position: relative;
	font-size: 2rem;
	font-weight: bold;
	color: #44831c;
	border-top: solid 2px #44831c;
	border-bottom: solid 2px #44831c;
	padding: 16px 0;
	margin-top: 24px;
	margin-bottom: 24px;
}

.pointTag {
	position: absolute;
	top: -17px;
	left: 0;
	display: inline-block;
	background-color: #fff;
	font-weight: bold;
	color: #44831c;
	font-size: 1.4rem;
}
.pointTagNum {
	font-weight: bold;
	color: #44831c;
	font-size: 2rem;
}

/* h5(グレー色) */
.U-Title--h5--gray {
	font-size: 1.8rem;
	font-weight: bold;
	border-bottom: 2px solid #cccccc;
	margin-top: 24px;
	margin-bottom: 16px;
}

/* ▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲
                    ▼料金プランページ
▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲*/

.PlanListInner {
	width: 100%;
	max-width: 800px;
	margin: 100px auto 160px auto;
	display: flex;
	justify-content: space-between;
}
.page_archive .PlanListInner {
	max-width: 1000px;
}
.PlanListItem {
	width: 32.26%;
}
.page_archive .PlanListItem {
	width: 19.6%;
}
.PlanTitleBox {
	position: relative;
	padding: 54px 0 24px 0;
	background-color: #1d8b5e;
	border-radius: 16px 16px 0 0;
}
.PlanTitleBox::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: -40px;
	left: 50%;
	transform: translate(-50%, 0);
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	width: 80px;
	height: 80px;
}
/* v4プラン */
.PlanTitleBox--v4::before {
	background-image: url(../img/Plan/icon-plan-v4.svg);
}
/* v6プラン */
.PlanTitleBox--v6::before {
	background-image: url(../img/Plan/icon-plan-v6.svg);
}
/* v4固定IP */
.PlanTitleBox--v4F::before {
	background-image: url(../img/Plan/icon-plan-ip4.svg);
}
/* シンプル */
.page_archive .PlanTitleBox--simple::before {
	background-image: url(../img/Plan/icon-plan-simple.svg);
}
/* スタンダード3年 */
.page_archive .PlanTitleBox--3year::before {
	background-image: url(../img/Plan/icon-plan-3year.svg);
}
/* スタンダード2年 */
.page_archive .PlanTitleBox--2year::before {
	background-image: url(../img/Plan/icon-plan-2year.svg);
}
/* セキュリテイプラス */
.PlanTitleBox--secu::before {
	background-image: url(../img/Plan/icon-plan-secu.svg);
}
/* IPv6サービス */
.PlanTitleBox--ipv::before {
	background-image: url(../img/Plan/icon-plan-ipv.svg);
}

.PLanTitle {
	font-weight: bold;
	font-size: 2.4rem;
	color: #fff;
	text-align: center;
	margin-bottom: 20px;
}
.page_archive .PLanTitle {
	font-size: 2rem;
}
.PlanDetail {
	position: relative;
	padding: 20px 0 24px;
}
.PlanDetail.top {
    min-height: 186px;
}
.PlanDetail--S {
	padding: 50px 0;
}
.PlanDetail::before {
	content: "";
	width: 40.82%;
	display: inline-block;
	height: 1px;
	background-color: #7c7069;
	opacity: 0.2;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
}
.PlanDetail.noBorder::before {
    content: none;
}
.PlanText--L {
	text-align: center;
	font-size: 1.4rem;
	font-weight: bold;
}

.PlanText--L .price--L {
	font-size: 4rem;
	font-weight: 900;
	color: #56a522;
	line-height: 1;
}

.PlanText--L .price--L-uni {
	line-height: 1.4;
}

.PlanText--L .yen--L {
	font-size: 1.8rem;
}

.PlanText--M {
	text-align: center;
	font-size: 1.4rem;
	font-weight: 500;
	padding-top: 20px;
}

.PlanText--M .price--M {
	font-size: 2.8rem;
	font-weight: bold;
	color: #56a522;
	line-height: 1;
}

.PlanText--M .yen--M {
	font-size: 1.6rem;
}

.PlanText--S {
	text-align: center;
	font-size: 1.4rem;
	font-weight: 400;
}

.PlanText--S span {
	font-size: 2rem;
	font-weight: bold;
	color: #1d8b5e;
}

/* 詳細 */
.detailItem {
	margin-bottom: 120px;
}
.detailInner {
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
}
.detailTitle {
	position: relative;
	background-color: #1d8b5e;
	border-radius: 32px 32px 0 0;
	padding: 25px 0 25px 96px;
	color: #fff;
	font-size: 3.2rem;
	font-weight: 900;
	margin-bottom: 50px;
}

.detailTitle::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 17px;
	left: 18px;
	background-size: contain;
	width: 64px;
	height: 64px;
}

.detailTitle:after {
	content: "";
	display: inline-block;
	position: absolute;
	top: -3px;
	right: 40px;
	background: url(../img/Plan/icon-plan-zuumo02.svg) center no-repeat;
	background-size: contain;
	width: 332px;
	height: 110px;
}
.detailTitle.noFree:after {
    background: none;
}

.page_archive .detailTitle:after {
	content: "";
	display: inline-block;
	position: absolute;
	top: -3px;
	right: 40px;
	background: url(../img/Plan/icon-plan-zuumo.svg) center no-repeat;
	background-size: contain;
	width: 332px;
	height: 110px;
}
.page_archive .detailTitle--ipv::after {
    background: url(../img/Plan/icon-plan-zuumo02.svg) center no-repeat;
    background-size: contain;
}
/* v4 */
.detailTitle--v4::before {
	background: url(../img/Plan/icon-plan-v4-2.svg) center no-repeat;
}
/* v6 */
.detailTitle--v6::before {
	background: url(../img/Plan/icon-plan-v6-2.svg) center no-repeat;
}
/* ip4 */
.detailTitle--v4F::before {
	background: url(../img/Plan/icon-plan-ip4-2.svg) center no-repeat;
}
/* シンプル */
.page_archive .detailTitle--simple::before {
	background: url(../img/Plan/icon-plan-simple2.svg) center no-repeat;
}
/* スタンダード3年 */
.page_archive .detailTitle--3year::before {
	background: url(../img/Plan/icon-plan-3year2.svg) center no-repeat;
}
/* スタンダード2年 */
.page_archive .detailTitle--2year::before {
	background: url(../img/Plan/icon-plan-2year2.svg) center no-repeat;
}
/* セキュリティ */
.page_archive .detailTitle--secu::before {
	background: url(../img/Plan/icon-plan-secu2.svg) center no-repeat;
}
/* IPV */
.detailTitle--ipv::before {
	background: url(../img/Plan/icon-plan-ipv.svg) center no-repeat;
}

.detailTitle--ipv::after {
	background: url(../img/Plan/icon-plan-zuumo02.svg) center no-repeat;
}

.detailItemBox {
	width: 91.3%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.detailWrap {
	width: 52.38%;
}
.ServicePrice {
	width: 42.86%;
}
.detailItem-note {
    width: 91.3%;
    margin-top: 24px;
    margin-left: auto;
    margin-right: auto;
}
.ServicePrice .c-btn a {
	width: 100%;
}

.detailSubTitle {
	font-size: 2.4rem;
	font-weight: bold;
	border-bottom: 4px solid #1d8b5e;
	margin-bottom: 16px;
}
.detailText {
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.75;
	margin-bottom: 40px;
}

.servicedeta {
	position: relative;
	border: 2px solid #1d8b5e;
	border-radius: 16px;
	padding: 32px 16px 32px 40px;
}
.servicedetaTitle {
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translate(-50%, 0);
	display: inline-block;
	color: #1d8b5e;
	font-size: 1.8rem;
	font-weight: bold;
    padding: 0 8px;
	background-color: #fff;
}
.servicedetaList li {
	font-size: 1.8rem;
	font-weight: 500;
	position: relative;
	padding-left: 22px;
	margin-top: 16px;
}
.servicedetaList li:first-of-type {
	margin-top: 0;
}
.servicedetaList li::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 9px;
	left: 0;
	display: inline-block;
	background: url(../img/Plan/icon-circle.svg) center no-repeat;
	background-size: contain;
	width: 12px;
	height: 12px;
}
.servicedetaAtt {
	font-size: 1.4rem;
	font-weight: 400;
}
.detailAtt-title {
    font-size: 1.6rem;
    font-weight: 400;
}
.detailAtt-description {
    font-size: 1.8rem;
    color: #1d8b5e;
    font-weight: bold;
}
.ServicePrice {
	background-color: #f4f8f9;
	border-radius: 16px;
	padding: 40px 8px;
}
.priceTextItem {
	position: relative;
	padding-bottom: 35px;
}
.PriceText--L {
	text-align: center;
	font-size: 1.8rem;
	font-weight: bold;
}
.PriceText--L .price {
	font-size: 5.6rem;
	color: #56a522;
	font-weight: 900;
	line-height: 1.4;
}
.PriceText--L .month {
	font-size: 2.4rem;
	font-weight: bold;
}
.PriceText--M {
	margin-top: 24px;
	text-align: center;
	font-size: 1.8rem;
	font-weight: 500;
}
.PriceText--M .price {
	font-size: 4.8rem;
	color: #56a522;
	font-weight: bold;
	line-height: 1.4;
}
.PriceText--S {
	text-align: center;
    margin-top: 16px;
}
.PriceText--S .price {
	font-size: 2rem;
	color: #1d8b5e;
	font-weight: bold;
}
.PriceText--S .yen {
	font-size: 1.6rem;
	color: #1d8b5e;
	font-weight: bold;
}

/* ====== 共通下線 ====== */
.UnderLine {
	position: relative;
}
.UnderLine::before {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
	width: 22.22%;
	height: 1px;
	background-color: #7c7069;
	opacity: 0.2;
}
.ServicePrice .UnderLine {
    padding-bottom: 16px;
}

/* 注意事項 */
.sec_att {
	padding: 80px 0 100px 0;
	background-color: #f4f8f9;
}
.AttInner {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
}
.AttTitle {
	font-size: 2.4rem;
	border-bottom: #1d8b5e solid 4px;
}
.AttListWrap {
	width: 84.21%;
	margin: 40px auto 64px auto;
}

/* ユニバーサル制度について */
.UniversalTitle {
	font-size: 1.8rem;
	font-weight: bold;
	border-bottom: 2px solid #1d8b5e;
	margin-bottom: 24px;
}
.UniversalText {
	font-size: 1.6rem;
	font-weight: 400;
	margin-bottom: 24px;
}
.sec_info--plan {
	background-color: #f4f8f9;
}

/* ▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲
                    オプションサービス
▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲*/
.optionList-underWrap {
	padding-bottom: 80px;
}

/* === オプションの一覧 下層 === */
.optionList-under {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
.optionList-under.only {
    justify-content: center;
}
.optionListItem-under .optionListItemInner {
	padding: 32px;
}
.optionListTitle-under {
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 24px;
	line-height: 1.417;
	letter-spacing: 0.04em;
	border-bottom: 4px solid #1d8b5e;
}
.optionList-flex {
	display: flex;
	align-items: flex-start;
}
.optionListImg-under {
	margin-right: 16px;
	width: 120px;
}
.optionListText-under {
	font-size: 1.6rem;
	margin-bottom: 16px;
	font-weight: 500;
}
.optionPrice-under {
	font-weight: bold;
	margin-bottom: 24px;
	letter-spacing: 0.02em;
}
.optionPrice-under .price {
	letter-spacing: 0;
	font-size: 2.8rem;
	color: #56a520;
}

/* === オプション詳細ページ その他のオプションセクション === */

.c-otherOption {
	background-color: #f4f8f9;
	margin-top: 120px;
	padding: 1px 20px 40px;
}

/* === アンカーリンクボタン === */
.c-Anchor {
	max-width: 660px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.c-btn--anchor {
	width: 47.85%;
	margin-bottom: 24px;
}
.c-btn--anchor a {
	width: 100%;
	padding: 8px 0;
}
.c-btn--anchor a::before {
	transform: rotate(90deg);
	top: 17px;
	right: 22px;
}
.c-btn--anchor a:hover::before {
	right: 22px;
}

/* サービスのポイント */
.pointListWrap {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.pointListWrap li {
	width: 48%;
	margin: 12px 0;
}

/* === 共通料金詳細 === */
.c-sec_sd {
	padding: 82px 0 0;
}
.c-sdInner {
	width: 100%;
	max-width: 840px;
	margin: 0 auto;
}
.c-sdItem {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.c-sdTitle {
	position: relative;
	font-size: 1.8rem;
	padding-top: 24px;
	text-align: center;
	margin-bottom: 20px;
}
.c-sdTitle::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	background: url(../img/Option/SISAnshin/Title-price.svg) center no-repeat;
	background-size: contain;
	width: 128px;
	height: 12px;
}
.c-sdPrice {
	width: 47.62%;
	padding: 45px 0 40px 0;
	background-color: #f4f8f9;
	border-radius: 16px;
	text-align: center;
}
.c-sdText {
	width: 47.62%;
}
.c-sdPriceText {
	position: relative;
	text-align: center;
	font-size: 2.4rem;
	font-weight: bold;
	display: inline-block;
}
.c-sdPriceText .price {
	font-size: 5.6rem;
	font-weight: 900;
	color: #56a522;
}
.c-sdPriceText .tax {
	position: absolute;
	top: 25px;
	right: 0;
	font-size: 1.4rem;
	font-weight: 300;
}
.c-sdPriceSubText {
	font-size: 1.4rem;
	font-weight: 400;
	position: relative;
	padding-top: 16px;
	margin-top: 26px;
}
.c-sdPriceSubText::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	width: 80px;
	height: 1px;
	background-color: #7c7069;
	opacity: 0.2;
}
.c-sdPriceSubText span {
	font-size: 1.6rem;
	font-weight: bold;
	color: #1d8b5e;
}
.c-sdPriceSubText span:nth-of-type(1) {
	margin-left: 8px;
}
.c-sdPriceSubText span.month {
	font-size: 2rem;
}
.c-sdSubTitle {
	font-size: 2.4rem;
	border-bottom: solid 4px #1d8b5e;
	margin-bottom: 24px;
}
.c-sdSubText {
	font-size: 1.8rem;
}

/* === テーブル === */
table {
	width: 100%;
	margin-top: 24px;
	border: solid 1px #eef6e9;
}
th {
	background-color: #eef6e9;
	border: solid 1px #fff;
	padding: 6px 0;
	font-size: 1.4rem;
	font-weight: 700;
}
td {
	border: solid 1px #edfbe4;
	height: 70px;
	font-size: 1.4rem;
	font-weight: 400;
	text-align: center;
}
table th.left,
table td.left {
	text-align: left;
	padding: 6px 12px;
}
table .c-price_sis {
	font-size: 1.5rem;
	font-weight: bold;
	color: #56a522;
}

/* Table Aoscloud */
.c-option_table.p-Aoscloud {
	table-layout: fixed;
}
.c-option_table.p-Aoscloud td {
	height: auto;
}

/* Table Mcafee */
.c-option_table.p-Mcafee {
	width: 800px;
}
.c-option_table.p-Mcafee .size_1 {
	width: 120px;
}
.c-option_table.p-Mcafee .size_2 {
	width: 400px;
}
.c-option_table.p-Mcafee .size_3 {
	width: 70px;
}

/* Table PassordwManager */
.c-option_table.p-PassordwManager {
	width: 800px;
}
.c-option_table.p-PassordwManager .size_1 {
	width: 120px;
}
.c-option_table.p-PassordwManager .size_2 {
	width: 400px;
}
.c-option_table.p-PassordwManager .size_3 {
	width: 70px;
}

/* サポートの流れ ご利用の流れ */

.c-item_UseFlow {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	padding-bottom: 24px;
	margin-bottom: 24px;
}
.c-item_UseFlow::before {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
	width: 23px;
	height: 12px;
	background: url(../img/Option/icon-UseFlowStepArrow.svg) center no-repeat;
	background-size: contain;
}
.c-item_UseFlow:last-of-type {
	margin-bottom: 0;
	padding-bottom: 0;
}

.c-item_UseFlow:last-of-type::before {
	display: none;
}

/* STEP */
.UseFlowTextBox {
	width: 56%;
}
.UseFlowStep {
	position: relative;
	background-color: #1d8b5e;
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	padding: 6px 0 8px 42px;
	margin-bottom: 18px;
}

.UseFlowStep::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 9px;
	left: 12px;
	width: 23px;
	height: 12px;
	background: url(../img/Option/icon-UseFlowStep.svg) center no-repeat;
	background-size: contain;
}

.UseFlowStep .num {
	font-size: 1.8rem;
}

.UseFlowText {
	font-size: 1.6rem;
	font-weight: bold;
}
.UseFlowText span {
	display: block;
	font-size: 1.2rem;
	font-weight: 400;
	margin-top: 24px;
}

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

/* 共通リスト */
.c-eachListItem {
	position: relative;
	padding-left: 20px;
	font-size: 1.4rem;
	font-weight: 400;
	margin-top: 8px;
}

/* リスト 米印 */
.c-eachListItem--※::before {
	content: "※";
	position: absolute;
	top: 0;
	left: 0;
}
.c-eachListItem a{
	text-decoration: underline;
	display: inline-block;
}
.under{
	color: #56a520;
	text-decoration: underline;
}
/* リスト ドット */
.c-eachListItem--dots::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	background: url(../img/Option/icon-dots.svg) center no-repeat;
	background-size: contain;
	width: 8px;
	height: 8px;
}

/* リスト 番号 */
.c-eachList--num {
	margin-left: 20px;
}
.c-eachListItem--num {
	position: relative;
	padding: 0;
	list-style-type: decimal;
	text-indent: -0.2em;
	padding-left: 0.3em;
}
.c-eachListItem--num::marker {
	color: #1d8b5e;
	font-weight: bold;
}

/* === リンク === */

/* 共通リンク */
.c-link {
	position: relative;
	display: inline-block;
	padding-right: 24px;
	margin-left: 4px;
	margin-right: 2px;
	transition: opacity 0.2s;
}

.c-link::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 2px;
	right: 0;
	background: url(../img/Option/icon-link.svg) center no-repeat;
	background-size: contain;
	width: 20px;
	height: 20px;
}

.c-link--brank::before {
	background: url(../img/Option/icon-brank.svg) center no-repeat;
}
.c-link--pdf::before {
	background: url(../img/Option/icon-pdf.svg) center no-repeat;
}
.c-link span {
	color: #56a520;
	font-weight: bold;
	border-bottom: 1px solid #56a520;
}
.c-link--solo {
	display: inline-block;
	margin-top: 24px;
}

.c-link--Arrow::before {
	background: url(../img/Plan/icon-linl-Arrow.svg) center no-repeat;
}

/* アイコンなしリンク */
.c-link.c-link--nomal {
	padding-right: 0;
	margin-right: 0;
}
.c-link.c-link--nomal::before {
	background: none;
}
.c-link:hover {
	opacity: 0.8;
}

/* 共通テキスト */
.c-eachText {
	font-size: 1.6rem;
	font-weight: 400;
	margin-top: 24px;
}

/* 共通リンクカード */

.c-LinkCardWrap {
	background-color: #f4f8f9;
	padding: 80px 0;
}

.c-LinkCard {
	width: 100%;
	max-width: 990px;
	margin: 0 auto;
	background-color: #fff;
	padding: 66px 0;
	border-radius: 16px;
}

.c-LinkCardTitle.u-big {
	margin-top: 0;
	margin-bottom: 40px;
}

.c-LinkCardtext {
	font-size: 2rem;
	font-weight: 500;
	margin-bottom: 40px;
}

/* 光回線もセットなら、お手軽!お得！ */

.sec_c-set {
	background-color: #1d8b5e;
	padding: 80px 0;
	text-align: center;
}

.c-setTitle {
	display: inline-block;
	position: relative;
	font-size: 3.2rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
	margin-bottom: 34px;
	padding: 0 20px;
}

.c-setTitle::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 16px;
	left: 0;
	background: url(../img/icon-setTitle-l.svg) center no-repeat;
	background-size: contain;
	width: 14px;
	height: 24px;
}

.c-setTitle::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 16px;
	right: 0;
	background: url(../img/icon-setTitle-r.svg) center no-repeat;
	background-size: contain;
	width: 14px;
	height: 24px;
}

.c-setBoxWrap {
	width: 100%;
	max-width: 990px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.c-setBox {
	border-radius: 16px;
	width: 48.08%;
	position: relative;
	transition: all 0.2s;
}
.c-setBox::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 6px;
	left: 50%;
	transform: translate(-50%, 0);
	width: 97.48%;
	height: 160px;
	z-index: 2;
	border-radius: 16px 16px 0 0;
}

.c-setBox--docomo::before {
	background: url(../img/img-set-docomo.jpg) center no-repeat;
	background-size: cover;
}
.c-setBox--hikari::before {
	background: url(../img/img-set-hikari.jpg) center no-repeat;
	background-size: cover;
}
.c-setBox::after {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translate(-50%, 0);
	background-color: #fff;
	width: 97.48%;
	height: 120px;
	border-radius: 0 0 16px 16px;
	z-index: 1;
}

.c-setBox a {
	position: relative;
	padding: 176px 40px 24px 40px;
	z-index: 3;
	font-size: 1.6rem;
	font-weight: 500;
}

.c-setBox a::after {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: 54px;
	right: 44px;
	background: url(../img/icon-setArrow.svg) center no-repeat;
	background-size: contain;
	width: 8px;
	height: 12px;
	z-index: 4;
	transition: all 0.2s;
}

.c-setBox--hikari {
	background-color: #f5ab52;
	box-shadow: 0 4px #c48f17;
}

.c-setBox--hikari a span {
	color: #f5ab52;
}

.c-setBox--docomo {
	background-color: #e00b41;
	box-shadow: 0 4px #aa2d0e;
}

.c-setBox--docomo a span {
	color: #e00b41;
}

.c-setBox:hover a::after {
	right: 40px;
}
.c-setBox:hover {
	transform: translateY(4px);
	box-shadow: none;
}

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

/* font */
.u-font14 {
    font-size: 1.4rem;
}
.u-font15 {
    font-size: 1.5rem;
}
.u-font18 {
    font-size: 1.8rem;
}
.u-font20 {
    font-size: 2rem;
}
.u-font24 {
    font-size: 2.4rem;
}

/* flex */

/* margin */
.u-mgt1em {
	margin-top: 1em;
}
.u-mgt8 {
	margin-top: 8px;
}
.u-mgt16 {
	margin-top: 16px;
}
.u-mgt24 {
	margin-top: 24px;
}
.u-mgt40 {
	margin-top: 40px;
}
.u-mgt80 {
	margin-top: 80px;
}
.u-mgt120 {
	margin-top: 120px;
}
/*  */
.u-mbt80 {
	margin-top: 120px;
}
/* padding */
.u-pdt120 {
	padding-top: 120px;
}
.u-pdb80 {
	padding-top: 80px;
}

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

.l-width_min {
	max-width: 720px;
	margin-right: auto;
	margin-left: auto;
}

/* ===== 1000px付近の調整 ===== */

@media screen and (max-width: 1024px) {
	main {
		margin-top: 64px;
	}
	.reasonInner,
	.planInner,
	.optionInner,
	.faqInner,
	.infoInner,
	.PlanListInner,
	.detailInner,
	.c-LinkCard,
	.c-setBoxWrap,
	.optionList-under,
	.l-width_nomal {
		width: 95%;
	}
	.telnum {
		font-size: 3.2rem;
	}
	.telnum::before {
		width: 18px;
	}
	.c-btn--noH span {
		width: 90%;
	}
}