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

/*--------------------------------------
    カスタムプロパティ
--------------------------------------*/
:root {
  --page-main: #4678be;
  --page-sub: #ffd20a;
  --page-normal: #333333;
  --bg-normal: #efefef;
  --uq-pink: #E4007F;
	--au-orange: #EB5505;
	--header-h: initial!important;
}

/*--------------------------------------
    共通
--------------------------------------*/
img {
  max-width: 100%;
	height: auto;
}
.font-color-uq {
	color: var(--uq-pink)!important;
}
.font-color-au {
	color: var(--au-orange)!important;
}
.font-color-w {
	color: #fff!important;
}
.font-color-bk {
	color: var(--page-normal)!important;
}

/* = [ 背景 ] ===========================================*/
.bg-wrap {
	position: relative;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
}
.bg-wrap--main {
	background-color: var(--page-main);
}
.bg-wrap--sub {
	background-color: var(--page-sub);
}

/* = [ リンクボタン ] ===========================================*/
.common-button {
	max-width: 508px;
	margin: 0 auto;
}
.common-button-link {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	height: 90px;
	font-weight: 500;
	font-size: 3rem;
	font-feature-settings: "palt";
	letter-spacing: 0.08em;
	color: #fff;
	background-color: var(--page-normal);
	border-radius: 46px;
}
.common-button--color .common-button-link {
	background-color: var(--page-main);
}
.another-page .common-button--color .common-button-link {
	background-color: var(--page-another);
}
.link-window::after {
	position: absolute;
	top: 0;
	right: 30px;
	bottom: 0;
	width: 28px;
	height: 28px;
	margin: auto;
	background: url("/shop/beginner/common/img/link_window_icon.svg") no-repeat 0 0 / cover;
	content: "";
}
.link-arrow::after {
	position: absolute;
	top: 0;
	right: 30px;
	bottom: 0;
	width: 20px;
  height: 20px;
	margin: auto;
  border-top: solid 6px #fff;
  border-right: solid 6px #fff;
	transform: rotate(45deg);
	content: "";
}
@media screen and (max-width: 980px) {
	.common-button {
		max-width: 254px;
	}
	.common-button-link {
		height: 45px;
		font-size: 1.5rem;
		border-radius: 23px;
	}
	.link-window::after {
		right: 15px;
		width: 14px;
		height: 14px;
	}
	.link-arrow::after {
		right: 15px;
		width: 10px;
		height: 10px;
		border-top: solid 3px #fff;
		border-right: solid 3px #fff;
	}
}

/* = [ 見出し ] ===========================================*/
.main-heading {
	font-weight: 900;
	font-size: 4.8rem;
	font-feature-settings: "palt";
	text-align: center;
	letter-spacing: 0.04em;
	color: var(--page-main);
}
.main-heading-lead {
	font-weight: 400;
	font-size: 2.8rem;
	text-align: center;
	line-height: 1.75;
}
.main-heading-note {
	display: flex;
	justify-content: center;
	font-weight: 400;
	font-size: 2.4rem;
	line-height: 1.8;
}
@media screen and (max-width: 980px) {
	.main-heading {
		font-size: 2.4rem;
	}
	.main-heading-lead {
		font-size: 1.4rem;
	}
	.main-heading-note {
		font-size: 1.2rem;
	}
}
.sub-heading {
	position: relative;
	font-size: 3.2rem;
	text-align: center;
}
.sub-heading em {
	font-size: 6rem;
}
.sub-heading,
.sub-heading em {
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
}
.sub-heading-lead {
	margin-top: 20px;
	font-weight: 500;
	font-size: 2.8rem;
	text-align: center;
	line-height: 1.6;
	letter-spacing: 0.05em;
	color: var(--page-main);
}
@media screen and (max-width: 980px) {
	.sub-heading {
		font-size: 1.6rem;
	}
	.sub-heading em {
		font-size: 3rem;
	}
	.sub-heading-lead {
		margin-top: 10px;
		font-size: 1.4rem;
	}
}

/*--------------------------------------
    ページコンテンツ
--------------------------------------*/
.page-tel-chat-personal {
	max-width: 750px;
	margin: 0 auto;
}
@media screen and (max-width: 980px) {
	.page-tel-chat-personal {
		max-width: 375px;
	}
}

/* = [ キービジュアル ] ===========================================*/
.kv-area {
	max-width: 750px;
	margin: 0 auto;
	text-align: center;
}
.kv-area span {
	display: none;
}
.kv-sub-title {
	position: relative;
	height: 616px;
	padding-top: 12px;
	font-weight: 900;
	font-size: 3.8rem;
	font-feature-settings: "palt";
	letter-spacing: 0.08em;
	text-align: center;
}
.kv-sub-title::before {
	position: absolute;
	right: 0;
	top: 96px;
	left: 0;
	width: 654px;
	height: 314px;
	margin: auto;
	background: url("/shop/tel/chat/personal/common/img/personal_img01.svg") no-repeat 0 0 / cover;
	content: "";
}
.kv-sub-title span {
	display: inline-block;
	position: relative;
	padding: 0 30px;
}
.kv-sub-title span::before,
.kv-sub-title span::after {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 4px;
	height: 48px;
	margin: auto;
	background-color: var(--page-normal);
	content: "";
}
.kv-sub-title span::before {
	left: 0;
	transform: rotate(-22deg);
}
.kv-sub-title span::after {
	right: 0;
	transform: rotate(22deg);
}
@media screen and (max-width: 980px) {
	.kv-area {
		max-width: 375px;
	}
	.kv-sub-title {
		height: 308px;
		padding-top: 6px;
		font-size: 1.9rem;
		letter-spacing: 0.04em;
	}
	.kv-sub-title::before {
		top: 48px;
		width: 327px;
		height: 157px;
	}
	.kv-sub-title span {
		padding: 0 15px;
	}
	.kv-sub-title span::before,
	.kv-sub-title span::after {
		width: 2px;
		height: 24px;
	}
}

/* = [ ご予約の相談時間 ] ===========================================*/
.tel-chat-lead-wrap {
	position: relative;
}
.tel-chat-lead {
	position: absolute;
	right: 0;
	bottom: -66px;
	left: 0;
	width: 690px;
	height: 272px;
	margin: 0 auto;
	padding: 6px;
	background-color: #fff;
	border-radius: 20px;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.45);
	content: "";
}
.tel-chat-lead__heading {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 94px;
	font-weight: 900;
	font-size: 3.4rem;
	font-feature-settings: "palt";
	letter-spacing: 0.07em;
	color: #fff;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	background-color: var(--page-main);
}
.tel-chat-lead__text {
	margin-top: 14px;
	padding: 0 20px;
	font-weight: 500;
	font-size: 2.8rem;
	font-feature-settings: "palt";
	letter-spacing: 0.06em;
	line-height: 1.714;
}
.tel-chat-info {
	position: relative;
	margin-top: 102px;
	padding: 0 30px;
}
.tel-chat-info::before {
	position: absolute;
	top: -132px;
	right: 30px;
	width: 260px;
	height: 232px;
	background: url("/shop/tel/chat/personal/common/img/personal_img02.svg") no-repeat 0 0 / cover;
	content: "";
}
.tel-chat-info__hour {
	padding: 0 30px;
}
.tel-chat-info__hour-title {
	font-weight: 700;
	font-size: 2.8rem;
	font-feature-settings: "palt";
	letter-spacing: 0.06em;
	line-height: 1;
}
.tel-chat-info__hour-text {
	margin-top: 16px;
	font-weight: 900;
	font-size: 5.4rem;
	font-feature-settings: "palt";
	letter-spacing: 0.08em;
	color: var(--page-main);
	line-height: 1;
}
.tel-chat-info__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 40px;
	margin: 64px auto 0;
}
.tel-chat-info__item {
	width: calc(100% / 2 - 38px / 2);
}
.tel-chat-info__link {
	display: flex;
	align-items: center;
	column-gap: 12px;
	position: relative;
	width: 100%;
	height: 180px;
	padding: 0 0 14px 14px;
	font-weight: 700;
	font-size: 2.8rem;
	line-height: 1.35;
	background-color: #fff;
	box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.4);
	border-radius: 20px;
}
.tel-chat-info__link::before {
	position: relative;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	width: 96px;
	height: 96px;
	content: "";
}
.tel-chat-info__item:nth-child(1) .tel-chat-info__link::before {
	background: url("/shop/tel/chat/personal/common/img/personal_icon01.svg") no-repeat 0 0 / cover;
}
.tel-chat-info__item:nth-child(2) .tel-chat-info__link::before {
	background: url("/shop/tel/chat/personal/common/img/personal_icon02.svg") no-repeat 0 0 / cover;
}
.tel-chat-info__item:nth-child(3) .tel-chat-info__link::before {
	background: url("/shop/tel/chat/personal/common/img/personal_icon03.svg") no-repeat 0 0 / cover;
}
.tel-chat-info__item:nth-child(4) .tel-chat-info__link::before {
	background: url("/shop/tel/chat/personal/common/img/personal_icon04.svg") no-repeat 0 0 / cover;
}
.tel-chat-info__link::after {
	position: absolute;
	right: 0;
	bottom: 14px;
	left: 0;
	width: 28px;
	height: 28px;
	margin: auto;
	background: url("/shop/tel/chat/personal/common/img/personal_icon05.svg") no-repeat 0 0 / cover;
	content: "";
}
.tel-chat-info__link--page::after {
	transform: rotate(-90deg);
}
@media screen and (max-width: 980px) {
	.tel-chat-lead {
		bottom: -33px;
		width: 345px;
		height: 136px;
		padding: 3px;
		border-radius: 10px;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.45);
	}
	.tel-chat-lead__heading {
		height: 47px;
		font-size: 1.7rem;
		letter-spacing: 0.035em;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	.tel-chat-lead__text {
		margin-top: 7px;
		padding: 0 10px;
		font-size: 1.4rem;
		letter-spacing: 0.03em;
	}
	.tel-chat-info {
		margin-top: 51px;
		padding: 0 15px;
	}
	.tel-chat-info::before {
		top: -66px;
		right: 15px;
		width: 130px;
		height: 116px;
	}
	.tel-chat-info__hour {
		padding: 0 15px;
	}
	.tel-chat-info__hour-title {
		font-size: 1.4rem;
		letter-spacing: 0.03em;
	}
	.tel-chat-info__hour-text {
		margin-top: 8px;
		font-size: 2.7rem;
		letter-spacing: 0.04em;
	}
	.tel-chat-info__list {
		row-gap: 20px;
		margin: 32px auto 0;
	}
	.tel-chat-info__item {
		width: calc(100% / 2 - 19px / 2);
	}
	.tel-chat-info__link {
		column-gap: 6px;
		height: 90px;
		padding: 0 0 7px 7px;
		font-size: 1.4rem;
		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.4);
		border-radius: 10px;
	}
	.tel-chat-info__link::before {
		width: 48px;
		height: 48px;
	}
	.tel-chat-info__link::after {
		bottom: 7px;
		width: 14px;
		height: 14px;
	}
}

/* = [ 電話相談予約の流れ ] ===========================================*/
.flow-step {
	margin-top: 70px;
}
.flow-step .main-heading,
.tel-chat-available .main-heading,
.p-qa .main-heading {
	padding-top: 56px;
}
.flow-step__list {
	padding-bottom: 36px;
}
.flow-step__item {
	position: relative;
	width: 100%;
	max-width: 690px;
	min-height: 840px !important;
	margin: 60px 30px 0;
	border-radius: 20px;
	background-color: #fff;
}
.flow-step__title {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 10px;
	margin-top: 50px;
	font-weight: 900;
	font-size: 5rem;
	font-feature-settings: "palt";
	letter-spacing: 0.16em;
	line-height: 1;
	text-align: center;
	color: var(--page-main);
}
.flow-step__title span {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80px;
	height: 80px;
	padding-left: 8px;
	font-size: 5rem;
	font-feature-settings: "palt";
	letter-spacing: 0.16em;
	border-radius: 100vh;
	background-color: var(--page-sub);
}
.flow-step__inner {
	margin-top: 40px;
	padding: 0 60px;
}
.flow-step__inner-title {
	font-weight: 700;
	font-size: 3.8rem;
	line-height: 1.316;
	text-align: center;
}
.flow-step__inner-text {
	display: flex;
	align-items: center;
	min-height: 135px;
	font-weight: 500;
	font-size: 2.8rem;
	line-height: 1.6;
}
.flow-step__inner-img {
	width: 538px;
	height: 378px;
	margin: 32px auto 0;
}
.flow-step__inner-content {
	margin-top: 30px;
}
.flow-step__text {
	font-size: 1.8rem;
	line-height: 1.6;
}
.flow-step .slick-arrow {
	top: 474px;
	right: 0;
	left: 0;
	z-index: 1;
	mix-blend-mode: multiply;
	width: 92px;
	height: 92px;
	margin: auto;
	border-radius: 50%;
	background-color: #595959 !important;
}
.flow-step .slick-arrow:hover {
	opacity: 0.8;
	background-color: #595959 !important;
	color: #fff !important;
}
.flow-step .slick-arrow:focus-visible {
	outline: 3px solid #E59701;
}
.flow-step .slick-prev {
	transform: translateX(-317px);
}
.flow-step .slick-next {
	transform: translateX(317px);
}
.flow-step .slick-arrow::before {
	opacity: 1 !important;
	color: #fff;
	font-size: 8rem;
	font-family: "Material Icons";
}
.flow-step .slick-prev::before {
	content: "\e5cb";
}
.flow-step .slick-next::before {
	content: "\e5cc";
}
.flow-step .slick-disabled {
	display: none !important;
}
.flow-step .slick-dots {
	position: relative;
	bottom: auto;
	margin-top: 24px;
}
.flow-step .slick-dots li {
	width: 28px;
	height: 28px;
	margin: 0 24px;
}
.flow-step .slick-dots li button {
	width: 28px;
	height: 28px;
}
.flow-step .slick-dots li button::before {
	width: 28px;
	height: 28px;
	line-height: 28px;
	opacity: 1;
	color: #d6d6d6;
	font-size: 2.8rem;
}
.flow-step .slick-dots li.slick-active button::before {
	opacity: 1;
	color: var(--page-sub);
}
.flow-step .slick-dotted.slick-slider {
	margin-bottom: 0;
}
@media screen and (max-width: 980px) {
	.flow-step {
		margin-top: 35px;
	}
	.flow-step .main-heading,
	.tel-chat-available .main-heading,
	.p-qa .main-heading {
		padding-top: 28px;
	}
	.flow-step__list {
		padding-bottom: 18px;
	}
	.flow-step__item {
		max-width: 345px;
		min-height: 420px !important;
		margin: 30px 15px 0;
		border-radius: 10px;
	}
	.flow-step__title {
		column-gap: 5px;
		margin-top: 25px;
		font-size: 2.5rem;
		letter-spacing: 0.08em;
	}
	.flow-step__title span {
		width: 40px;
		height: 40px;
		padding-left: 2px;
		font-size: 2.5rem;
		letter-spacing: 0.08em;
	}
	.flow-step__inner {
		margin-top: 20px;
		padding: 0 30px;
	}
	.flow-step__inner-title {
		font-size: 1.9rem;
	}
	.flow-step__inner-text {
		min-height: 67.5px;
		font-size: 1.4rem;
	}
	.flow-step__inner-img {
		width: 269px;
		height: 189px;
		margin: 16px auto 0;
	}
	.flow-step__inner-content {
		margin-top: 19px;
	}
	.flow-step__text {
		font-size: 1.6rem;
		line-height: 1.563;
	}
	.flow-step .slick-arrow {
		top: 237px;
		width: 46px;
		height: 46px;
	}
	.flow-step .slick-arrow:focus-visible {
		outline: 2px solid #E59701;
	}
	.flow-step .slick-prev {
		transform: translateX(-158px);
	}
	.flow-step .slick-next {
		transform: translateX(158px);
	}
	.flow-step .slick-arrow::before {
		font-size: 4rem;
	}
	.flow-step .slick-dots {
		margin-top: 6px;
	}
	.flow-step .slick-dots li {
		width: 15px;
		height: 15px;
		margin: 0 12px;
	}
	.flow-step .slick-dots li button {
		width: 15px;
		height: 15px;
	}
	.flow-step .slick-dots li button::before {
		width: 15px;
		height: 15px;
		line-height: 15px;
		font-size: 1.5rem;
	}
}

/* = [ お電話で相談できること ] ===========================================*/
.tel-chat-available__table {
	width: 690px;
	margin: 65px auto 0;
}
.tel-chat-available__table,
.tel-chat-available__table th,
.tel-chat-available__table td {
	border: 4px solid #3f3b39;
}
.tel-chat-available__table th,
.tel-chat-available__table td {
	padding: 40.5px 0;
	font-weight: 700;
	font-size: 2.8rem;
	line-height: 1;
	text-align: center;
}
.tel-chat-available__th {
	color: #fff;
	background-color: var(--page-main);
}
.tel-chat-available__td-title {
	background-color: var(--bg-normal);
}
@media screen and (max-width: 980px) {
	.tel-chat-available__table {
		width: 345px;
		margin: 32px auto 0;
	}
	.tel-chat-available__table,
	.tel-chat-available__table th,
	.tel-chat-available__table td {
		border: 2px solid #3f3b39;
	}
	.tel-chat-available__table th,
	.tel-chat-available__table td {
		padding: 20.5px 0;
		font-size: 1.4rem;
	}
}

/* = [ Q&A ] ===========================================*/
.p-qa {
	width: 690px;
	margin: 100px auto 0;
  padding-bottom: 54px;
}
.p-qa__list {
	margin: 55px auto 0;
}
.p-qa__inner {
  margin-top: 40px;
	border-radius: 20px;
	background-color: #fff;
}
.p-qa__inner:first-child {
  margin-top: 0;
}
.p-qa__q,
.p-qa__a {
  display: flex;
  align-items: center;
	column-gap: 14px;
	padding-right: 100px;
	padding-left: 34px;
}
.p-qa__q {
  position: relative;
	min-height: 148px;
	background: none;
  border: none;
  cursor: pointer;
}
.p-qa__q:focus-visible {
  outline: 3px solid #E59701;
}
.p-qa__q::after {
  position: absolute;
  right: 34px;
	width: 40px;
	height: 40px;
	background: url("/shop/tel/chat/personal/common/img/personal_icon07.svg") no-repeat 0 0 / contain;
  content: "";
}
.p-qa .is-open::after {
	background-image: url("/shop/tel/chat/personal/common/img/personal_icon06.svg");
}
.p-qa__a {
	margin-top: 20px;
	padding-bottom: 33px;
}
.p-qa__icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 68px;
	height: 68px;
	padding-left: 6px;
	font-weight: 700;
	font-size: 3.74rem;
	font-feature-settings: "palt";
	line-height: 1;
	letter-spacing: 0.16em;
	border-radius: 100vh;
}
.p-qa__icon--q {
	color: #fff;
	background-color: var(--page-main);
}
.p-qa__icon--a {
	color: var(--page-main);
	background-color: var(--page-sub);
}
.p-qa__q-text,
.p-qa__a-text {
	width: 474px;
	font-weight: 500;
	font-size: 2.8rem;
	line-height: 1.429;
	text-align: left;
}
.p-qa__more-wrap {
	margin: 48px auto 0;
	padding: 3px 0;
	text-align: center;
}
.p-qa__more-button {
	width: 508px;
	height: 90px;
	font-weight: 700;
	font-size: 3rem;
	font-feature-settings: "palt";
	letter-spacing: 0.1em;
	background-color: #fff;
	border: 4px solid var(--page-normal);
	border-radius: 44px;
	cursor: pointer;
}
.p-qa__more-button:focus-visible {
	outline: 3px solid #E59701;
}
.p-qa__more .is-acco-box {
	margin-top: 54px;
}
@media screen and (max-width: 900px) {
	.p-qa {
		width: 345px;
		margin: 50px auto 0;
		padding-bottom: 27px;
	}
	.p-qa__list {
		margin: 27px auto 0;
	}
	.p-qa__inner {
		margin-top: 20px;
		border-radius: 10px;
	}
	.p-qa__q,
	.p-qa__a {
		column-gap: 7px;
		padding-right: 50px;
		padding-left: 14px;
	}
	.p-qa__q {
		min-height: 74px;
	}
	.p-qa__q:focus-visible {
		outline: 2px solid #E59701;
	}
	.p-qa__q::after {
		right: 17px;
		width: 20px;
		height: 20px;
	}
	.p-qa__a {
		margin-top: 10px;
		padding-bottom: 16px;
	}
	.p-qa__icon {
		width: 34px;
		height: 34px;
		padding-left: 2px;
		font-size: 1.87rem;
		letter-spacing: 0.08em;
	}
	.p-qa__q-text,
	.p-qa__a-text {
		width: 237px;
		font-size: 1.4rem;
	}
	.p-qa__more-wrap {
		margin: 28px auto 0;
		padding: 2px 0;
	}
	.p-qa__more-button {
		width: 254px;
		height: 45px;
		font-size: 1.5rem;
		border: 2px solid var(--page-normal);
		border-radius: 22px;
	}
	.p-qa__more-button:focus-visible {
		outline: 2px solid #E59701;
	}
	.p-qa__more .is-acco-box {
		margin-top: 27px;
	}
}

/* = [ 追従バナー ] ===========================================*/
.p-scroll-banner {
	padding: 34px 0 34px 201px;
	position: fixed;
	left: 0;
	bottom: -200px;
	z-index: 99;
	width: 100%;
	background-color: #083090;
	text-align: center;
	transition: bottom 0.5s ease-out;
	box-shadow: 0px -8px 4px 0px #000;
}
.p-scroll-banner.is-active {
  bottom: 0;
}
.c-scroll-button {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 508px;
	height: 90px;
	margin: 0 auto;
	font-weight: 700;
	font-size: 3rem;
	letter-spacing: 0.1em;
	color: #083090;
	background-color: #ffd20a;
	border-radius: 46px;
}
@media screen and (min-width: 767px) and (max-width: 900px) {
	.p-scroll-banner {
		padding: 17px 0 17px 201px;
		box-shadow: 0px -4px 2px 0px #000;
	}
	.c-scroll-button {
		max-width: 254px;
		height: 45px;
		font-size: 1.5rem;
		letter-spacing: 0.05em;
		border-radius: 23px;
	}
}
@media screen and (max-width: 766px) {
	.p-scroll-banner {
		padding: 17px 0;
		box-shadow: 0px -4px 2px 0px #000;
	}
	.c-scroll-button {
		max-width: 254px;
		height: 45px;
		font-size: 1.5rem;
		letter-spacing: 0.05em;
		border-radius: 23px;
	}
}