@charset "utf-8";

body::before {
	content: "";
	width: 100%;
	height: 100%;
	background-image: url(../img/common/pc_bg.jpg);
	background-position: center;
	background-size: cover;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}

.contents_wrap {
	position: relative;
	max-width: 6.40rem;
	margin: auto;
	z-index: 1;
	box-shadow: 0 0 0.16rem rgba(0,0,0,0.16);
	background-color: #FFF;
}

main {
	padding-top: 1.00rem;
	@media screen and (max-width: 640px) {
		padding-top: 0.80rem;
	}
	@media screen and (max-width: 1024px) and (orientation: landscape) {
		padding-top: 0.60rem;
	}
}

/*============================
ヘッダー
============================*/
header {
	transition: transform 0.5s 0.3s;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 6.40rem;
	z-index: 10;
	background-color: #FFF;
	padding: 0.20rem;
	box-sizing: border-box;
	@media screen and (max-width: 640px) {
		padding: 0.20rem 0;
	}
	@media screen and (max-width: 1024px) and (orientation: landscape) {
		padding: 0.10rem 0.20rem;
	}
	.logo {
		width: 66%;
		@media screen and (max-width: 1024px) and (orientation: landscape) {
			width: 3.00rem;
		}
	}
	.site_description {
		text-indent: -9999px;
		position: absolute;
		top: 0;
		z-index: 0;
	}
	.glo_navi {
		display: none;
		.list {
			padding-top: 0.20rem;
			margin-bottom: -0.20rem;
			box-shadow: 0 0.06rem 0.08rem rgba(0,0,0,0.1);
			width: calc(100% + 0.40rem);
			position: relative;
			left: -0.20rem;
			@media screen and (max-width: 640px) {
				padding-top: 0.10rem;
				margin-bottom: -0.17rem;
				left: 0;
			}
			@media screen and (max-width: 1024px) and (orientation: landscape) {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: -0.10rem;
			}
			.link {
				line-height: 2.5;
				border-bottom: 1px solid #CCC;
				@media screen and (max-width: 1024px) and (orientation: landscape) {
					width: 50%;
				}
				a {
					display: block;
					font-size: 0.30rem;
					font-weight: 700;
					color: #0068b7;
					padding-left: 0.20rem;
					@media screen and (max-width: 640px) {
						font-size: 0.18rem;
					}
					@media screen and (max-width: 1024px) and (orientation: landscape) {
						font-size: 0.22rem;
					}
				}
				&:last-child {
					border-bottom: none;
				}
			}
		}
	}
	.tel_btn {
		position: absolute;
		top: 0.15rem;
		right: 1.10rem;
		width: 0.80rem;
		height: 0.80rem;
		background-color: #f39800;
		@media screen and (max-width: 640px) {
			width: 0.55rem;
			height: 0.55rem;
			right: 0.70rem;
		}
		&::before {
			content: "";
			width: 0.32rem;
			height: 0.32rem;
			background-image: url(../common/img/icon_tel_white.svg);
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
			@media screen and (max-width: 640px) {
				width: 0.24rem;
				height: 0.24rem;
				top: 36%;
			}
		}
		.txt {
			font-size: 0.16rem;
			font-weight: 700;
			color: #FFF;
			position: absolute;
			text-align: center;
			width: 100%;
			bottom: 0.10rem;
			@media screen and (max-width: 640px) {
				font-size: 0.11rem;
				bottom: 0.06rem;
			}
		}
		@media screen and (max-width: 1024px) and (orientation: landscape) {
			transform: scale(0.6);
			top: -0.02rem;
			right: 0.60rem;
		}
	}
	#SPnaviBtn {
		position: absolute;
		top: 0.15rem;
		right: 0.20rem;
		width: 0.80rem;
		height: 0.80rem;
		background-color: #2986c2;
		cursor: pointer;
		@media screen and (max-width: 640px) {
			width: 0.55rem;
			height: 0.55rem;
			right: 0.10rem;
		}
		.txt {
			font-size: 0.16rem;
			font-weight: 700;
			color: #FFF;
			position: absolute;
			text-align: center;
			width: 100%;
			bottom: 0.10rem;
			@media screen and (max-width: 640px) {
				font-size: 0.11rem;
				bottom: 0.06rem;
			}
		}
		#SPmenuBars {
			height: 0.60rem;
			top: 40%;
			@media screen and (max-width: 640px) {
				height: 0.40rem;
			}
			span {
				background-color: #FFF;
			}
		}
		@media screen and (max-width: 1024px) and (orientation: landscape) {
			transform: scale(0.6);
			top: -0.02rem;
			right: 0;
		}
	}
}

.img_box {
	img {
		display: block;
		width: 100%;
	}
}

/*========================
テキストエリア
========================*/
.txt_area {
	padding: 0.30rem;
	height: 2.50rem;
	overflow: hidden;
	position: relative;
	transition: height 0.5s;
	@media screen and (max-width: 640px) {
		padding: 0.20rem;
		height: 2.00rem;
	}
	&::before {
		content: "";
		width: 100%;
		height: 2.00rem;
		background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%,rgba(255,255,255,1) 100%);
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
	}
	&::after {
		content: "続きを読む";
		width: fit-content;
		line-height: 2;
		border-bottom: 0.03rem solid #0068b6;
		font-size: 0.26rem;
		font-weight: 700;
		color: #0068b6;
		background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%,rgba(255,255,255,1) 100%);
		position: absolute;
		bottom: 0.50rem;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		z-index: 2;
		cursor: pointer;
		@media screen and (max-width: 640px) {
			font-size: 0.18rem;
		}
	}
	.txt {
		font-size: 0.26rem;
		font-weight: 400;
		line-height: 1.875;
		text-align: justify;
		position: relative;
		z-index: 0;
		@media screen and (max-width: 640px) {
			font-size: 0.18rem;
		}
	}
	&.-bg_blue01 {
		background-color: #e6f4f9;
	}
	&.active {
		height: fit-content;
		&::before {
			content: none;
		}
		&::after {
			content: none;
		}
	}
}

/*========================
下層MV
========================*/
.under_mv {
	.page_ttl {
		background-color: #ffe100;
		padding: 0.25rem 0 0.20rem;
		text-align: center;
		font-size: 0.50rem;
		font-weight: 900;
		color: #0068b7;
		@media screen and (max-width: 640px) {
			font-size: 0.34rem;
			padding: 0.14rem 0;
		}
	}
  .mv_img {
    width: 100%;
    img {
      display: block;
      width: 100%;
    }
  }
}

/*============================
下層ページMV下のバナー
============================*/
.mv_bottom_bnr {
	background-color: #0068b7;
	padding: 0.15rem 0.20rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	.wrap_link {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.ph {
		width: 1.70rem;
		height: 1.70rem;
		border-radius: 50%;
		overflow: hidden;
		@media screen and (max-width: 640px) {
			width: 1.00rem;
			height: 1.00rem;
		}
		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.txt_box {
		padding-left: 0.20rem;
		.ttl {
			font-size: 0.54rem;
			font-weight: 900;
			color: #FFF;
			padding-bottom: 0.15rem;
			@media screen and (max-width: 640px) {
				font-size: 0.30rem;
			}
			span {
				color: #fff000;
			}
		}
		.txt {
			background-color: #FFF;
			font-size: 0.46rem;
			font-weight: 900;
			color: #0c2e50;
			text-align: center;
			padding: 0.10rem 0 0.12rem;
			@media screen and (max-width: 640px) {
				font-size: 0.24rem;
				padding: 0.06rem 0 0.08rem;
			}
		}
		&.-small {
			.ttl {
				font-size: 0.48rem;
				@media screen and (max-width: 640px) {
					font-size: 0.26rem;
				}
			}
		}
	}
}

/*============================
信頼・安心の水道局指定業者
============================*/
.anshin {
  background-color: #57A4D1;
  padding: 0.30rem 0;
  @media screen and (max-width: 640px) {
    padding: 0.20rem 0;
  }
}

/* トラブルでお困りではありませんか？ */
.trouble_intro {
  background-color: #d2ecfa;
  padding: 0.20rem;
  .ttl {
    background-color: #0068b6;
    padding: 0.10rem 0 0.12rem;
    font-size: 0.40rem;
    font-weight: 900;
    line-height: 1.2;
    color: #FFF;
    border-radius: 0.10rem;
    text-align: center;
		@media screen and (max-width: 640px) {
			font-size: 0.26rem;
		}
  }
  .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.15rem 0;
    padding: 0.20rem 0 0.15rem;
    .txt {
      width: 49%;
      padding: 0.10rem 0;
      box-sizing: border-box;
      font-size: 0.24rem;
      font-weight: 700;
      line-height: 1.2;
      border-radius: 0.10rem;
      color: #1A1A1A;
      text-align: center;
      background-color: #FFF;
			@media screen and (max-width: 640px) {
				font-size: 0.18rem;
			}
    }
		&.-line1 {
			.txt {
				padding: 0.20rem 0;
			}
		}
  }
  .kakomi {
    background-color: #FFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    border-radius: 0.10rem;
    &::before {
      content: "";
      width: 44%;
      height: 100%;
      background-color: #9ed8f5;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      border-radius: 0.10rem 0 0 0.10rem;
    }
    .kakomi_ttl {
      width: 44%;
      text-align: center;
      font-size: 0.36rem;
      font-weight: 700;
      color: #FFF;
      position: relative;
      z-index: 1;
			@media screen and (max-width: 640px) {
				font-size: 0.20rem;
			}
    }
    .kakomi_txt {
      width: 50%;
      font-size: 0.30rem;
      font-weight: 500;
      line-height: 1.3;
      color: #0068b6;
      padding: 0.10rem 0;
			@media screen and (max-width: 640px) {
				font-size: 0.18rem;
			}
    }
  }
  .bottom_txt {
    text-align: center;
    padding-top: 0.20rem;
    font-size: 0.50rem;
    font-weight: 800;
    color: #0068b6;
    line-height: 1.3;
		@media screen and (max-width: 640px) {
			font-size: 0.34rem;
		}
    span {
      display: block;
      font-family: "Inter", sans-serif;
      font-size: 0.36rem;
			@media screen and (max-width: 640px) {
				font-size: 0.18rem;
				padding-top: 0.05rem;
			}
    }
  }
}

/* 水漏れの原因とは？ */
.mizumore {
  background-color: #fefdf0;
  .mizumore_ttl {
    padding: 0.40rem 0;
    text-align: center;
    font-size: 0.36rem;
    font-weight: 900;
		@media screen and (max-width: 640px) {
			font-size: 0.24rem;
		}
  }
  .list {
    padding: 0 0.30rem 0.30rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.30rem 0;
		@media screen and (max-width: 640px) {
			padding: 0 0.20rem 0.30rem;
		}
    .detail {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      &:nth-of-type(2n) {
        flex-direction: row-reverse;
      }
      .ph_wrap {
        width: 50%;
        height: 2.00rem; 
        border-radius: 0.10rem;
        overflow: hidden;
				@media screen and (max-width: 640px) {
					height: 40vw;
				}
        img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .txt_box {
        width: 47%;
        .list_ttl {
          text-align: center;
          font-size: 0.20rem;
          font-weight: 700;
          line-height: 1.3;
          padding-bottom: 0.10rem;
					@media screen and (max-width: 640px) {
						font-size: 0.17rem;
						br {
							display: none;
							&.sp_only {
								display: block;
							}
						}
					}
        }
        .txt {
          font-size: 0.15rem;
          line-height: 1.5;
          text-align: justify;
					@media screen and (max-width: 640px) {
						font-size: 0.12rem;
						br {
							display: none;
						}
					}
        }
      }
    }
  }
	&.-white {
		background-color: #FFF;
	}
}

/* 料金表 */
.price_list {
  background-color: #EDF8FD;
  padding: 0.30rem;
	@media screen and (max-width: 640px) {
		padding: 0.30rem 0.20rem;
	}
  .price_list_header {
    padding-bottom: 0.20rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    .txt_box {
      width: 75%;
      .ttl {
        text-align: center;
        padding: 0.15rem 0 0.17rem;
        font-size: 0.36rem;
        font-weight: 900;
        color: #FFF;
        background-color: #509cc7;
        border-radius: 0.10rem;
				line-height: 1.2;
				@media screen and (max-width: 640px) {
					font-size: 0.22rem;
				}
      }
      .caption {
        padding-top: 0.10rem;
        font-size: 0.20rem;
				font-weight: 500;
				@media screen and (max-width: 640px) {
					font-size: 0.16rem;
				}
      }
    }
    .icon {
      width: 20%;
    }
		&.-caption {
			padding-top: 0.60rem;
		}
  }
  .list {
    background-color: #FFF;
    border-radius: 0.10rem;
    overflow: hidden;
    .detail {
      display: flex;
      align-items: center;
      padding: 0.20rem;
      flex-wrap: wrap;
      position: relative;
      border-bottom: 2px solid #EDF8FD;
			@media screen and (max-width: 640px) {
				padding: 0.20rem 0.15rem;
			}
      &:last-child {
        border-bottom: none;
      }
      .icon {
        width: 13%;
      }
      .txt_box {
        padding-left: 0.20rem;
				@media screen and (max-width: 640px) {
					padding-left: 0.10rem;
				}
        .price_ttl {
          font-size: 0.26rem;
          font-weight: 700;
					@media screen and (max-width: 640px) {
						font-size: 0.16rem;
					}
        }
        .txt {
          font-size: 0.18rem;
          font-weight: 600;
          padding-top: 0.10rem;
					@media screen and (max-width: 640px) {
						font-size: 0.12rem;
						font-weight: 500;
					}
        }
        .price {
          font-size: 0.26rem;
          font-weight: 700;
          font-family: "Inter", sans-serif;
          position: absolute;
          bottom: 0.24rem;
          right: 0.20rem;
					@media screen and (max-width: 640px) {
						font-size: 0.16rem;
						right: 0.15rem;
					}
          span {
            font-size: 0.24rem;
						@media screen and (max-width: 640px) {
							font-size: 0.15rem;
						}
          }
          &.-jp {
            font-family: "Noto Sans JP", sans-serif;
          }
        }
      }
    }
  }
  .tel_btn {
    margin: 0.30rem auto;
    width: 80%;
		@media screen and (max-width: 640px) {
			width: 90%;
		}
    a {
      display: block;
      background-color: #509cc7;
      padding: 0.20rem 0;
      border-radius: 0.40rem;
      font-size: 0.34rem;
      font-weight: 700;
      color: #FFF;
      text-align: center;
			@media screen and (max-width: 640px) {
				font-size: 0.20rem;
			}
      span {
        &::before {
          content: "";
          width: 0.30rem;
          height: 0.30rem;
          background-image: url(../img/common/tel_icon.svg);
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
          position: relative;
          display: inline-block;
          margin-right: 0.10rem;
					@media screen and (max-width: 640px) {
						width: 0.20rem;
						height: 0.20rem;
						top: 0.01rem;
					}
        }
      }
    }
  }
  .back_btn {
    margin: 0.30rem auto;
    width: 80%;
		@media screen and (max-width: 640px) {
			width: 90%;
		}
    a {
      display: block;
      background-color: #0068b6;
      padding: 0.20rem 0 0.16rem;
      border-radius: 0.40rem;
      font-size: 0.26rem;
      font-weight: 700;
			line-height: 1;
      color: #FFF;
      text-align: center;
			@media screen and (max-width: 640px) {
				font-size: 0.18rem;
			}
      span {
        &::before {
          content: "◀";
					font-size: 0.16rem;
          width: 0.30rem;
          height: 0.30rem;
          position: relative;
          display: inline-block;
          margin-right: 0.10rem;
					top: -0.03rem;
					@media screen and (max-width: 640px) {
						width: 0.20rem;
						height: 0.20rem;
						top: -0.02rem;
						font-size: 0.12rem;
					}
        }
      }
    }
  }
  .txt_list {
    padding-bottom: 0.20rem;
		@media screen and (max-width: 640px) {
			padding-bottom: 0.10rem;
		}
    .txt {
      font-size: 0.26rem;
      font-weight: 500;
      line-height: 1.45;
      padding-bottom: 0.15rem;
      text-indent: -0.13rem;
      margin-left: 0.26rem;
			@media screen and (max-width: 640px) {
				font-size: 0.17rem;
				text-indent: -0.09rem;
				margin-left: 0.20rem;
			}
      &::before {
        content: "●";
        color: #509cc7;
        display: inline-block;
      }
    }
  }
  .last_caption {
    font-size: 0.24rem;
    line-height: 1.5;
		@media screen and (max-width: 640px) {
			font-size: 0.16rem;
		}
  }
}

/*============================
お困りのトラブルはどこですか？
============================*/
.trouble {
	.header {
		.lead {
			text-align: center;
			font-size: 0.28rem;
			font-weight: 700;
			padding: 0.20rem 0 0.50rem;
			@media screen and (max-width: 640px) {
				font-size: 0.20rem;
				padding-bottom: 0.20rem;
			}
		}
	}
	.price_wrap {
		.list {
			display: flex;
			justify-content: space-between;
			padding: 0 0.20rem;
			flex-wrap: wrap;
			gap: 0.50rem 0;
			.detail {
				width: 48%;
				a {
					display: block;
					color: #1A1A1A;
					&:hover {
						.ph_wrap {
							img {
								transform: scale(1.04);
							}
						}
						.more_btn {
							background: linear-gradient(135deg, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
						}
					}
				}
				.ph_wrap {
					width: 100%;
					height: 1.80rem;
					overflow: hidden;
					border-radius: 0.10rem;
					@media screen and (max-width: 640px) {
						height: 30vw;
					}
					img {
						display: block;
						width: 100%;
						height: 100%;
						object-fit: cover;
						transition: all 0.3s;
					}
				}
				.ttl {
					font-size: 0.23rem;
					font-weight: 900;
					text-align: center;
					color: #0068b7;
					padding: 0.15rem 0 0.10rem;
					@media screen and (max-width: 640px) {
						font-size: 0.17rem;
						line-height: 1.5;
					}
				}
				.txt {
					font-size: 0.16rem;
					text-align: center;
					@media screen and (max-width: 640px) {
						font-size: 0.12rem;
					}
				}
				.price {
					font-size: 0.36rem;
					font-weight: 800;
					font-family: "Inter", sans-serif;
					color: #dc2e2a;
					text-align: center;
					padding: 0.20rem 0 0.10rem;
					@media screen and (max-width: 640px) {
						font-size: 0.30rem;
					}
					span {
						font-family: "Noto Sans JP", sans-serif;
						font-weight: 900;
						font-size: 0.28rem;
						display: inline-block;
						position: relative;
						top: -0.02rem;
						@media screen and (max-width: 640px) {
							font-size: 0.20rem;
						}
					}
				}
				.more_btn {
					background: linear-gradient(135deg, rgba(82,191,230,1) 0%,rgba(70,155,212,1) 100%);
					border-radius: 0.60rem;
					padding: 0.10rem 0 0.12rem;
					text-align: center;
					font-size: 0.20rem;
					line-height: 1.3;
					font-weight: 700;
					color: #FFF;
					text-align: center;
					position: relative;
					transition: all 0.3s;
					@media screen and (max-width: 640px) {
						font-size: 0.14rem;
					}
					&::after {
						content: "";
						width: 0.14rem;
						height: 0.14rem;
						background-image: url(../common/img/icon_right_bold_white.svg);
						background-position: right center;
						background-repeat: no-repeat;
						background-size: contain;
						position: absolute;
						top: 50%;
						right: 0.20rem;
						transform: translateY(-50%);
						@media screen and (max-width: 640px) {
							width: 0.10rem;
							height: 0.10rem;
							right: 0.10rem;
						}
					}
				}
			}
		}
	}
	.icon_wrap {
		padding: 0.20rem 0;
		.list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.icon {
				width: 33.3%;
				a {
					display: block;
					padding: 0.20rem 0.20rem;
					color: #1A1A1A;
					@media screen and (max-width: 640px) {
						padding: 0.10rem;
					}
					img {
						display: block;
					}
					&:hover {
						opacity: 0.7;
					}
					.txt {
						text-align: center;
						font-size: 0.26rem;
						font-weight: 700;
						line-height: 1.3;
						@media screen and (max-width: 640px) {
							font-size: 0.16rem;
							letter-spacing: 0;
						}
					}
				}
			}
		}
	}
}

/*============================
安心修理のお約束
============================*/
.yakusoku {
	.upper_box {
		padding: 0.30rem;
		@media screen and (max-width: 640px) {
			padding: 0.20rem;
		}
		.ttl {
			background-color: #5187c4;
			padding: 0.20rem 0 0.22rem;
			border-radius: 0.10rem;
			text-align: center;
			font-size: 0.40rem;
			font-weight: 700;
			color: #FFF;
			position: relative;
			@media screen and (max-width: 640px) {
				font-size: 0.24rem;
			}
			span {
				position: relative;
				&::before {
					content: "";
					width: 0.60rem;
					height: 0.60rem;
					background-image: url(../img/common/yakusoku_ttl_icon.png);
					background-position: center;
					background-repeat: no-repeat;
					background-size: contain;
					position: absolute;
					top: 50%;
					left: -0.70rem;
					transform: translateY(-50%);
					@media screen and (max-width: 640px) {
						width: 0.36rem;
						height: 0.36rem;
						left: -0.42rem;
					}
				}
			}
			i {
				width: 0.30rem;
				height: 0.30rem;
				position: absolute;
				top: 50%;
				right: 0.30rem;
				transform: translateY(-50%);
				@media screen and (max-width: 640px) {
					width: 0.20rem;
					height: 0.20rem;
					right: 0.15rem;
				}
				&::before {
					content: "";
					width: 100%;
					height: 0.04rem;
					border-radius: 0.08rem;
					background-color: #FFF;
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
				}
				&::after {
					content: "";
					width: 0.04rem;
					height: 100%;
					border-radius: 0.08rem;
					background-color: #FFF;
					position: absolute;
					top: 0;
					left: 50%;
					transform: translateX(-50%);
					transition: all 0.3s;
				}
			}
			&.-open {
				i {
					&::after {
						transform: translateX(-50%) rotate(90deg);
					}
				}
			}
		}
		.acc_box {
			padding: 0.30rem 0;
			.sub_ttl {
				font-size: 0.36rem;
				font-weight: 700;
				text-align: center;
				padding-bottom: 0.20rem;
				@media screen and (max-width: 640px) {
					font-size: 0.24rem;
				}
			}
			.txt {
				font-size: 0.20rem;
				line-height: 1.75;
				text-align: justify;
				@media screen and (max-width: 640px) {
					font-size: 0.16rem;
				}
				strong {
					color: #dc2e2a;
					font-weight: 500;
				}
			}
		}
	}
	.point_wrap {
		background-color: #d5edf7;
		padding: 0.30rem;
		display: flex;
		flex-wrap: wrap;
		gap: 0.30rem 0;
		@media screen and (max-width: 640px) {
			padding: 0.20rem;
			gap: 0.20rem 0;
		}
		.point_box {
			background-color: #FFF;
			border-radius: 0.30rem;
			display: flex;
			align-items: center;
			padding: 0.30rem;
			width: 100%;
			box-sizing: border-box;
			.icon {
				width: 0.85rem;
				@media screen and (max-width: 640px) {
					width: 0.40rem;
				}
				img {
					display: block;
				}
			}
			.txt_box {
				width: calc(100% - 0.85rem);
				padding-left: 0.20rem;
				box-sizing: border-box;
				color: #1d477a;
				@media screen and (max-width: 640px) {
					width: calc(100% - 0.40rem);
				}
				.point_ttl {
					font-size: 0.40rem;
					font-weight: 800;
					line-height: 1.3;
					@media screen and (max-width: 640px) {
						font-size: 0.21rem;
					}
				}
				.txt {
					font-size: 0.24rem;
					font-weight: 700;
					padding-top: 0.10rem;
					@media screen and (max-width: 640px) {
						font-size: 0.16rem;
					}
				}
			}
		}
	}
}

/*============================
フッター共通
============================*/
footer {
	img {
		display: block;
		width: 100%;
	}
}

/*============================
お問い合せから解決までの流れ
============================*/
footer {
	/* お問い合せから解決までの流れ */
	.flow {
		.flow_ttl {
			background-color: #0068b7;
			padding: 0.20rem 0 0.22rem;
			text-align: center;
			font-size: 0.36rem;
			font-weight: 700;
			color: #FFF;
			@media screen and (max-width: 640px) {
				font-size: 0.24rem;
			}
		}
		.list {
			padding: 0.30rem;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			gap: 0.30rem 0;
			@media screen and (max-width: 640px) {
				padding: 0.20rem;
			}
			.detail {
				position: relative;
				width: 48%;
				.num {
					position: absolute;
					top: 0;
					left: 0;
					width: 0.50rem;
					height: 0.50rem;
					line-height: 0.50rem;
					text-align: center;
					font-family: "Inter", sans-serif;
					font-size: 0.40rem;
					font-weight: 700;
					color: #FFF;
					background-color: #d8a13d;
					border-radius: 0.06rem;
					z-index: 2;
					@media screen and (max-width: 640px) {
						width: 0.30rem;
						height: 0.30rem;
						line-height: 0.30rem;
						font-size: 0.26rem;
						border-radius: 0.06rem;
					}
				}
				.sub_ttl {
					font-size: 0.28rem;
					font-weight: 700;
					padding-left: 0.65rem;
					padding-top: 0.10rem;
					@media screen and (max-width: 640px) {
						font-size: 0.16rem;
						padding-left: 0.40rem;
						letter-spacing: 0;
						padding-top: 0.05rem;
					}
				}
				.icon_box {
					width: 100%;
					position: relative;
					z-index: 1;
					img {
						display: block;
					}
				}
				.txt {
					font-size: 0.18rem;
					font-weight: 600;
					line-height: 1.65;
					text-align: justify;
					@media screen and (max-width: 640px) {
						font-size: 0.14rem;
					}
				}
			}
		}
	}

	/* フッターのアコーディオンテキスト */
	.txt_area {
		display: none;
	}
}

.area {
	background-color: #e4f3fa;
	.upper_box {
		padding: 0.30rem;
		@media screen and (max-width: 640px) {
			padding: 0.20rem;
		}
		.area_ttl {
			background-color: #0068b7;
			font-size: 0.36rem;
			font-weight: 700;
			color: #FFF;
			padding: 0.20rem 0 0.22rem;
			border-radius: 0.10rem;
			text-align: center;
			@media screen and (max-width: 640px) {
				font-size: 0.24rem;
				padding: 0.15rem 0 0.17rem;
			}
		}
		.lead {
			font-size: 0.26rem;
			font-weight: 600;
			line-height: 1.5;
			text-align: justify;
			padding: 0.20rem 0;
			@media screen and (max-width: 640px) {
				font-size: 0.16rem;
			}
		}
		.area_list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			/* padding-top: 0.20rem; */
			.list {
				width: 33.3%;
				.txt {
					font-size: 0.22rem;
					font-weight: 600;
					line-height: 1.6;
					@media screen and (max-width: 640px) {
						font-size: 0.14rem;
					}
					&::before {
						content: "●";
						color: #0068b7;
					}
				}
			}
		}
	}

	.fuguaikaisho {
		padding: 0 0.30rem 1.80rem;
		background-color: #FFF;
		position: relative;
		@media screen and (max-width: 640px) {
			padding: 0 0.20rem 1.20rem;
		}
		&::before {
			content: "";
			width: calc(100% - 0.60rem);
			height: calc(100% - 2.30rem);
			border: 0.10rem solid #0068b7;
			border-radius: 0.20rem;
			position: absolute;
			bottom: 1.90rem;
			left: 0.30rem;
			z-index: 0;
			box-sizing: border-box;
			@media screen and (max-width: 640px) {
				border: 0.06rem solid #0068b7;
				width: calc(100% - 0.40rem);
				height: calc(100% - 1.50rem);
				left: 0.20rem;
				bottom: 1.20rem;
				border-radius: 0.16rem;
			}
		}
		.txt_box {
			padding: 0.20rem 0.40rem 0.50rem;
			position: relative;
			z-index: 1;
			@media screen and (max-width: 640px) {
				padding: 0.10rem 0.30rem 0.30rem;
			}
			.img {
				width: 40%;
				margin: 0 auto 0.10rem;
			}
			.ttl {
				font-size: 0.48rem;
				font-weight: 700;
				color: #0068b6;
				line-height: 1.4;
				@media screen and (max-width: 640px) {
					font-size: 0.25rem;
					line-height: 1.5;
				}
			}
			.txt {
				font-size: 0.24rem;
				font-weight: 700;
				line-height: 1.5;
				padding-top: 0.20rem;
				text-align: justify;
				@media screen and (max-width: 640px) {
					font-size: 0.16rem;
				}
				&.-blue {
					color: #0068b6;
				}
			}
		}
	}

	.bottom_box {
		background-color: #2983C6;
		padding: 0.30rem;
		padding-bottom: 2.10rem;
		@media screen and (max-width: 640px) {
			padding: 0.30rem 0.20rem;
			padding-bottom: 1.60rem;
		}
		.icon {
			width: 1.50rem;
			margin-left: 0.30rem;
			@media screen and (max-width: 640px) {
				width: 0.60rem;
				margin-left: 0.20rem;
			}
			img {
				display: block;
			}
		}
		.ttl {
			font-size: 0.70rem;
			font-weight: 800;
			color: #FFF;
			line-height: 1.3;
			text-align: center;
			padding: 0.10rem 0 0.30rem;
			@media screen and (max-width: 640px) {
				font-size: 0.40rem;
				line-height: 1.4;
				padding: 0.10rem 0 0.20rem;
			}
		}
		.kakomi {
			background-color: #FFF;
			padding: 0.20rem 0 0.22rem;
			text-align: center;
			border-radius: 0.20rem;
			font-size: 0.60rem;
			font-weight: 800;
			color: #0068b7;
			width: calc(100% - 0.40rem);
			margin: 0 auto;
			position: relative;
			@media screen and (max-width: 640px) {
				width: 100%;
				font-size: 0.36rem;
				padding: 0.15rem 0 0.18rem;
			}
		}
	}
}

.taiki {
	background-color: #FFF;
	padding: 0.30rem;
	@media screen and (max-width: 640px) {
		padding: 0.20rem;
	}
	.ttl {
		padding-bottom: 0.30rem;
	}
	.taiki_ttl {
		font-size: 0.36rem;
		font-weight: 700;
		padding-bottom: 0.15rem;
		padding-top: 0.30rem;
		@media screen and (max-width: 640px) {
			font-size: 0.24rem;
		}
	}
	.txt {
		font-size: 0.26rem;
		font-weight: 500;
		line-height: 1.65;
		padding-bottom: 0.10rem;
		@media screen and (max-width: 640px) {
			font-size: 0.16rem;
		}
	}
	.taiki_bottom_box {
		padding-top: 0.30rem;
		@media screen and (max-width: 640px) {
			padding-top: 0.20rem;
		}
		.bottom_ttl {
			display: flex;
			align-items: center;
			img {
				display: block;
				width: 0.32rem;
				padding-right: 0.10rem;
				position: relative;
				top: 0.02rem;
				@media screen and (max-width: 640px) {
					width: 0.20rem;
					padding-right: 0.06rem;
				}
			}
			span {
				display: block;
				font-size: 0.30rem;
				font-weight: 700;
				@media screen and (max-width: 640px) {
					font-size: 0.18rem;
				}
			}
		}
		.bottom_sub_ttl {
			display: flex;
			align-items: center;
			padding-top: 0.30rem;
			padding-bottom: 0.30rem;
			@media screen and (max-width: 640px) {
				padding: 0.20rem 0;
			}
			img {
				display: block;
				width: 0.32rem;
				padding-right: 0.10rem;
				position: relative;
				top: 0.02rem;
				@media screen and (max-width: 640px) {
					width: 0.20rem;
					padding-right: 0.04rem;
					top: 0.01rem;
				}
			}
			span {
				display: block;
				font-size: 0.26rem;
				font-weight: 700;
				letter-spacing: 0;
				line-height: 1.4;
				@media screen and (max-width: 640px) {
					font-size: 0.16rem;
					word-break: keep-all;
				}
			}
		}
	}
}

/* 固定TEL */
.floating_tel {
	position: fixed;
	left: 50%;
	bottom: 0;
	transition: all 0.3s;
	z-index: 10;
	width: 100%;
	max-width: 6.40rem;
	transform: translateX(-50%);
	@media screen and (max-width: 1024px) and (orientation: landscape) {
		&::before {
			content: "";
			width: 100%;
			height: 0.80rem;
			background-color: #f3d925;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 0;
		}
	}
	a {
		display: block;
		position: relative;
		z-index: 1;
		img {
			@media screen and (max-width: 1024px) and (orientation: landscape) {
				max-width: 3.50rem;
				margin: auto;
			}
		}
	}
}

/* よくある質問 */
.faq {
	margin-top: -1.30rem;
	padding: 0 0.30rem 2.00rem;
	position: relative;
	z-index: 1;
}
@media screen and (max-width: 640px) {
	.faq {
		margin-top: -1.00rem;
		padding: 0 0.20rem 1.40rem;
	}
}

.faq .txt_area {
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0.50rem;
}

.faq .faq_ttl {
	text-align: center;
	background-color: #0068b6;
	padding: 0.20rem 0;
	text-align: center;
	font-size: 0.32rem;
	font-weight: 700;
	color: #FFF;
	border-radius: 0.20rem;
}
@media screen and (max-width: 640px) {
	.faq .faq_ttl {
		padding: 0.15rem 0;
		font-size: 0.22rem;
		border-radius: 0.10rem;
	}
}

.faq .faq_list_wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 0.30rem 0;
	padding-top: 0.30rem;
}
@media screen and (max-width: 640px) {
	.faq .faq_list_wrap {
		gap: 0.20rem 0;
	}
}

.faq .faq_list_wrap .faq_list {
	width: 100%;
}

.faq .faq_list_wrap .faq_list .q_ttl {
	font-size: 0.24rem;
	font-weight: 700;
	line-height: 1.5;
	text-indent: -0.42rem;
	padding-left: 0.42rem;
	padding-right: 0.40rem;
	margin-bottom: 0.10rem;
	position: relative;
	cursor: pointer;
}
@media screen and (max-width: 640px) {
	.faq .faq_list_wrap .faq_list .q_ttl {
		font-size: 0.17rem;
		text-indent: -0.30rem;
		padding-left: 0.30rem;
		padding-right: 0.30rem;
	}
}

.faq .faq_list_wrap .faq_list .q_ttl span {
	color: #0068b6;
}

.faq .faq_list_wrap .faq_list .q_ttl i {
	position: absolute;
	width: 0.16rem;
	height: 0.16rem;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}
@media screen and (max-width: 640px) {
	.faq .faq_list_wrap .faq_list .q_ttl i {
		width: 0.12rem;
		height: 0.12rem;
	}
}

.faq .faq_list_wrap .faq_list .q_ttl i::before {
	content: "";
	width: 100%;
	height: 0.02rem;
	background-color: #57A4D1;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.faq .faq_list_wrap .faq_list .q_ttl i::after {
	content: "";
	width: 0.02rem;
	height: 100%;
	background-color: #57A4D1;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition: all 0.3s;
}

.faq .faq_list_wrap .faq_list.-open .q_ttl i::after {
	transform: translate(-50%,-50%) rotate(90deg);
}

.faq .faq_list_wrap .faq_list .txt_box {
	position: relative;
	padding-left: 0.42rem;
	display: none;
}
@media screen and (max-width: 640px) {
	.faq .faq_list_wrap .faq_list .txt_box {
		padding-left: 0.30rem;
	}
}

.faq .faq_list_wrap .faq_list .txt_box::before {
	content: "A.";
	color: #f39800;
	position: absolute;
	font-size: 0.24rem;
	font-weight: 700;
	top: 0.07rem;
	left: 0.16rem;
}
@media screen and (max-width: 640px) {
	.faq .faq_list_wrap .faq_list .txt_box::before {
		font-size: 0.16rem;
		top: 0.05rem;
		left: 0.10rem;
	}
}

.faq .faq_list_wrap .faq_list .txt_box .txt {
	font-size: 0.20rem;
	line-height: 1.85;
	text-align: justify;
}
@media screen and (max-width: 640px) {
	.faq .faq_list_wrap .faq_list .txt_box .txt {
		font-size: 0.15rem;
	}
}

.syuri_box {
	background-color: #FFF;
	padding: 0.30rem;
	@media screen and (max-width: 640px) {
		padding: 0.20rem;
	}
	a {
		display: block;
		border: 0.10rem solid #0068b6;
		border-radius: 0.20rem;
		padding: 0.30rem;
		@media screen and (max-width: 640px) {
			border: 0.06rem solid #0068b6;
			padding: 0.20rem;
			border-radius: 0.10rem;
		}
		.ttl {
			font-size: 0.45rem;
			font-weight: 700;
			color: #1A1A1A;
			line-height: 1.1;
			padding-left: 1.10rem;
			position: relative;
			@media screen and (max-width: 640px) {
				font-size: 0.26rem;
				padding-left: 0.60rem;
			}
			&::before {
				content: "";
				width: 0.90rem;
				height: 0.90rem;
				background-image: url(../img/common/syuri_icon_header.png);
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				@media screen and (max-width: 640px) {
					width: 0.50rem;
					height: 0.50rem;
				}
			}
		}
		.catch {
			padding: 0.20rem 0 0.15rem;
			font-size: 0.37rem;
			font-weight: 900;
			color: #1A1A1A;
			@media screen and (max-width: 640px) {
				font-size: 0.22rem;
				padding: 0.15rem 0 0.10rem;
			}
			span {
				color: #0068b6;
			}
		}
		.lead {
			line-height: 1.4;
			font-size: 0.35rem;
			font-weight: 500;
			color: #1A1A1A;
			@media screen and (max-width: 640px) {
				font-size: 0.20rem;
			}
		}
		.list {
			padding: 0.20rem 0;
			display: flex;
			flex-wrap: wrap;
			gap: 0.15rem 0;
			@media screen and (max-width: 640px) {
				padding: 0.15rem 0;
				gap: 0.06rem 0;
			}
			.detail {
				width: 100%;
				display: flex;
				align-items: center;
				.icon {
					width: 0.50rem;
					@media screen and (max-width: 640px) {
						width: 0.26rem;
					}
				}
				.txt {
					font-size: 0.30rem;
					font-weight: 500;
					color: #1A1A1A;
					padding-left: 0.14rem;
					@media screen and (max-width: 640px) {
						font-size: 0.18rem;
						padding-left: 0.10rem;
					}
				}
			}
		}
		.bottom_txt {
			text-align: center;
			font-size: 0.35rem;
			font-weight: 700;
			line-height: 1.2;
			color: #1A1A1A;
			@media screen and (max-width: 640px) {
				font-size: 0.22rem;
			}
		}
		.btn {
			margin-top: 0.20rem;
			background-color: #0068b6;
			text-align: center;
			border-radius: 0.10rem;
			font-size: 0.35rem;
			font-weight: 700;
			line-height: 1;
			color: #FFF;
			padding: 0.25rem 0 0.28rem;
			@media screen and (max-width: 640px) {
				margin-top: 0.15rem;
				font-size: 0.22rem;
				padding: 0.15rem 0 0.18rem;
				border-radius: 0.06rem;
			}
		}
	}
}