@charset "UTF-8";
/*-----------------------------------------------------------
*** [ UQコミュニケーションズ株式会社 共通 main] ***
------------------------------------------------------------*/

/* = [ 共通 ] ===========================================*/

img {
  max-width: 100%;
	height: auto;
}
sup {
	position: relative;
	top: 1px;
	font-weight: 400;
	font-size: 60%;
}
.f-color01 { color: #0091D7; }
.f-color02 { color: #E6218F; }

.bg-color01 { background-color: #f5f5f5; }
.bg-color02 { background-color: #f0f8fc; }


/* = [ レイアウト ] ===========================================*/
.page-wrap {
	max-width: 780px;
	margin: 0 auto;
}
.p-lead {
	padding: 20px 0 25px;
}
.p-lead p {
	line-height: 1.5;
	text-align: center;
}
.p-lead-main {
	font-weight: 900;
	font-size: 3.5rem;
	letter-spacing: 0.03em;
}
.p-lead-sub {
	margin-top: 10px;
	font-weight: 700;
	font-size: 2.2rem;
	letter-spacing: 0.05em;
}
.p-heading {
	text-align: center;
}
.p-heading span {
	position: relative;
	display: inline-block;
	padding: 0 30px;
	font-weight: 900;
	font-size: 3rem;
	letter-spacing: 0.05em;
}
.p-heading span::before,
.p-heading span::after {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3px;
	height: 40px;
	margin: auto;
	background-color: #333333;
	content: "";
}
.p-heading span::before {
	left: 0;
	transform: rotate(-30deg);
}
.p-heading span::after {
	right: 0;
	transform: rotate(30deg);
}
@media screen and (max-width: 768px) {
	.p-lead p {
		line-height: 1.3;
	}
	.p-lead-sub {
		margin-top: 20px;
	}
	.p-heading span {
		padding: 0 25px;
		line-height: 1.2;
	}
	.p-heading span::before,
	.p-heading span::after {
		width: 2px;
		height: 63px;
	}
	.p-heading span::before {
		transform: rotate(-28deg);
	}
	.p-heading span::after {
		transform: rotate(28deg);
	}
}

/* = [ kv ] ===========================================*/
.kv__bnr {
	margin: auto;
	text-align: center;
}
.kv__bnr img {
	width: auto;
	max-height: 346px;
}
@media screen and (max-width: 768px) {
	.kv__bnr img {
		max-height: 100%;
	}
}

/* = [ p-comparison-point ] ===========================================*/
.p-comparison-point {
	display: flex;
	justify-content: space-between;
	margin-top: 65px;
}
.p-comparison-point__inner {
	position: relative;
	width: calc(100% / 3 - 30px / 2);
	max-width: 240px;
	padding: 47px 20px 20px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	border-radius: 10px;
}
.p-comparison-point-num {
	position: absolute;
	top: -30px;
	right: 0;
	left: 0;
	text-align: center;
}
.p-comparison-point-heading {
	font-weight: 900;
	font-size: 2rem;
	line-height: 1.35;
	text-align: center;
	color: #0091d7;
}
.p-comparison-point-heading::before {
	position: relative;
	display: block;
	width: 100px;
	height: 74px;
	margin: 0 auto 15px;
	content: "";
}
.p-comparison-point__inner:nth-of-type(1) .p-comparison-point-heading::before {
	background: url("../img/comparison_icon01.svg") no-repeat 0 0 / cover;
}
.p-comparison-point__inner:nth-of-type(2) .p-comparison-point-heading::before {
	background: url("../img/comparison_icon02.svg") no-repeat 0 0 / cover;
}
.p-comparison-point__inner:nth-of-type(3) .p-comparison-point-heading::before {
	background: url("../img/comparison_icon03.svg") no-repeat 0 0 / cover;
}
.p-comparison-point-text {
	margin-top: 15px;
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 1.57;
}
.p-comparison-point-notes {
	font-size: 1.1rem;
	line-height: 1.45;
}
@media screen and (max-width: 768px) {
	.p-comparison-point {
		flex-direction: column;
		row-gap: 50px;
		margin-top: 60px;
	}
	.p-comparison-point__inner {
		width: 100%;
		max-width: 313px;
		margin: 0 auto;
		padding: 47px 27px 20px;
	}
}

/* = [ .p-comparison-table ] ===========================================*/
.p-comparison-table-wrap {
	position: relative;
	margin-top: 50px;
}
.p-comparison-table {
	width: 747px;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	background-color: #fff;
}
.p-comparison-table th:nth-child(1) {
	width: 77px;
}
.p-comparison-table th:nth-child(n+2) {
	width: 134px;
}
.p-comparison-table th,
.p-comparison-table td {
	position: relative;
	padding: 15px 0 12px;
	font-weight: 400;
	font-size: 1.3rem;
	line-height: 1.2;
	text-align: center;
	border-right: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
	z-index: 100;
}
.p-comparison-table tr:first-child th {
  border-top: 1px solid #dcdcdc;
}
.p-comparison-table th:first-child,
.p-comparison-table td:first-child {
  border-left: 1px solid #dcdcdc;
}
.p-comparison-table th strong,
.p-comparison-table td strong {
	color: #e4007f;
}
.p-comparison-table th em,
.p-comparison-table td em {
	font-weight: 900;
}
.p-comparison-table td em span {
	display: block;
	margin-top: 5px;
}
.p-comparison-table .th-top th {
	height: 80px;
	font-weight: 900;
	font-size: 1.4rem;
	line-height: 1.4;
	text-align: center;
	color: #fff;
	background-color: #9a9a9a;
}
.p-comparison-table .th-top th:first-child {
	border-right: 1px solid #0091d7 !important;
}
.th-logo {
	border-top: 1px solid #0091d7 !important;
	border-right: 1px solid #0091d7 !important;
	background-color: #0091d7 !important;
}
.table-text-strong01 {
	font-size: 2rem;
}
.table-text-strong02 {
	font-size: 1.6rem;
}
.table-text-strong03 {
	font-size: 1.3rem;
}
.p-comparison-table-bg {
	position: relative;
	padding: 50px 15px 230px;
}
.p-comparison-table-bg::after {
	position: absolute;
	bottom: -78px;
	right: 0;
	left: 0;
	width: 100%;
	height: 238px;
	background: url("../img/otokuwari_bg01.svg") repeat-x 0 0 / 334px 238px;
	content: "";
}

.table-bg-color01 { background-color: #faf7f3; }
.table-bg-color02 { background-color: #fff; }
.table-bg-color03 { background-color: #fffbd9; }

.p-comparison-table-notes {
	font-size: 1.2rem;
}
.p-comparison-table-notes a {
	color: #0091d7;
	text-decoration: underline !important;
}
.p-comparison-table-notes a:hover {
	text-decoration: none !important;
}
.p-comparison-table-button {
	position: relative;
	max-width: 400px;
	margin: 55px auto 0;
}
.p-comparison-table-button::after {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 25px;
	transform: rotate(45deg);
	width: 9px;
	height: 9px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	content: "";
}
.p-comparison-table-button__link {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 54px;
	font-weight: 500;
	font-size: 1.8rem;
	letter-spacing: 0.1em;
	border-radius: 27px;
	color: #fff;
	background-color: #0091d7;
}
.table-icon {
	position: absolute;
	top: 6px;
	left: -5px;
	width: 32px;
	height: 32px;
}
.p-comparison-table .col-a,
.p-comparison-table .col-b {
	position: sticky;
	left: 0;
	z-index: 300;
}
.table-bg-color01 .col-a,
.table-bg-color01 .col-b {
	background-color: #faf7f3;
}
.table-bg-color02 .col-a,
.table-bg-color02 .col-b {
	background-color: #fff;
}
.table-bg-color03 .col-a,
.table-bg-color03 .col-b {
	background-color: #fffbd9;
}
.p-comparison-table .col-b {
	left: 77px;
}
.p-comparison-table .col-b::before {
	position: absolute;
	top: 0;
	left: -1px;
	width: 136px;
	height: calc(100% + 2px);
	border-right: 6px solid #0091d7;
	border-left: 6px solid #0091d7;
	z-index: -1;
	content: "";
}
.p-comparison-table tr:last-child .col-b::before {
	border-bottom: 6px solid #0091d7;
}
.p-comparison-table .col-b::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 135px;
	height: calc(100% + 2px);
	mix-blend-mode: multiply;
	background-color: #e5f4fb;
	z-index: -2;
	content: "";
}
.p-comparison-table .col-b--bg-none::after {
	display: none;
}
@media screen and (max-width: 980px) {
	.p-comparison-table-wrap {
		margin-top: 27px;
		overflow-x: auto;
		overflow-y: hidden;
	}
	.p-comparison-table-button {
		max-width: 340px;
		margin: 25px auto 0;
	}
	.p-comparison-table-bg {
		padding: 50px 15px 113px;
	}
	.p-comparison-table-bg::after {
		bottom: -40px;
		height: 120px;
		background: url("../img/otokuwari_bg01.svg") repeat-x 0 0 / 168px 120px;
	}
}

/* = [ バナー ] ===========================================*/
.otokuwari-other-banner {
	display: flex;
	max-width: 980px;
	margin: 137px auto 70px;
}
.otokuwari-other-banner__inner {
	width: calc(50% - 38px / 2);
	margin: auto;
}
@media screen and (max-width: 767px) {
	.otokuwari-other-banner {
		display: block;
		max-width: 100%;
		margin: 73px auto 10px;
	}
	.otokuwari-other-banner__inner {
		width: 345px;
	}
	.otokuwari-other-banner__inner:last-child {
		margin-top: 15px;
	}
}