@charset "utf-8";

/* -----------------------
add_style.css：追加要素制御
-----------------------　*/

/* .content_box
----------------------------------- */

#worries .content_box,
#escalate .scroll-hint__wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;

	width: 1100px;
	background: #fff;
	margin: 0 auto;
	padding: 20px;
	border-radius: 10px;
}

.content_box dl {
	flex-direction: row;
	flex: 1 1 calc(33.333% - 16px);
	gap: 16px;
	box-sizing: border-box;
	align-items: flex-start;
}

.content_box dl:nth-child(n+3):nth-child(-n+6) {
	margin: 0;
}

.content_box dd {
	width: 100%;
	padding: 10px;

	text-align: center;
	font-size: .9em;
}

.content_box dd h3 {
	margin: 5px 0 10px 0;
}

.content_box dd p {
	margin: 0 0 10px 0;
	line-height: 1.6;
	text-align: left;
}

.content_box dd p:last-child {
	margin: 0;
}

.content_box dd p b {
	color: #B90000;
}

@media screen and (max-width: 768px), screen and (max-width: 1024px)  {

	.content_box {
		gap: 10px;

		width: 90%;
		margin: 0 auto;
	}

	.content_box dl {
		flex: 1 1 calc(49% - 16px);
		width: 260px;
	}

	.content_box dd {
		padding: 5px 0;
		font-size: .8em;
	}

	.content_box .scroll-hint {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

	#escalate .scroll-hint__wrap {
		display: flex;
		flex-wrap: nowrap;
		gap: 20px;

    width: max-content;
  }

	#worries .content_box {
		width: 90%;
		margin: 0 auto;
	}

}


/* #fv
----------------------------------- */

#fv {
	background: url("../img/bg_fv_pc.jpg") no-repeat 0 100% / cover;
	padding: 90px 0 0 0;
}


@media screen and (max-width: 768px), screen and (max-width: 1024px)  {

	#fv {
		background: url("../img/bg_fv_sp.jpg") no-repeat 0 100% / cover;
		padding: 0;
	}

	#fv .inner img {
			margin: 0 0 -2px 0;
	}

}

/* #worries
----------------------------------- */

#worries {
	position: relative;
	background: url("../img/bg_worries.jpg") no-repeat 0 100% / cover;
	margin: 0;
	padding: 0 0 90px 0;
}

#worries::after {
  position: absolute;
  left: 50%;
  bottom: -140px;
  transform: translate(-50%);
  content: "";
  background: url(../img/bg_arrow.svg) no-repeat 50% 0 / contain;
  width: 700px;
  height: 189px;
}

#worries .ttl {
	padding: 40px 0;
}

#worries .ttl .second {
	background: none;
	color: #fff;
}

#worries .ttl .second span {
	background: #fff;
	color: #3D4AB2;
	font-size: 1em;
	padding: 4px 10px 6px 10px;
	line-height: 1;
	display: inline-block;
}

#worries .ttl .second small {
	margin: 0 8px 0 10px;
}

#worries .ttl .third {
	background: #FFEE1E;
	color: #3D4AB2;
	font-size: 0.7em;
	padding: 8px 10px;
	line-height: 1;
	display: inline-block;
}

@media screen and (max-width: 768px), screen and (max-width: 1024px)  {

	#worries {
		padding: 0 0 60px 0;
	}

	#worries::after {
	  bottom: -70px;
	  width: 345px;
	  height: 93px;
	}

	#worries .ttl {
		padding: 20px 0;
	}

	#worries .ttl .first {
		font-size: .9em;
	}

	#worries .ttl .second {
    font-size: 1em;
	}

	#worries .ttl .second span {
    display: block;
    width: fit-content;
    margin: 10px auto;

    font-size: 1.4em;
	}

	#worries .ttl .third {
		padding: 5px 10px;
		line-height: 1.4;
    font-size: .75em;
	}

}


/* #escalate
----------------------------------- */

#escalate {
	background: url("../img/bg_escalate.jpg") no-repeat 0 100% / cover;
	margin: 0;
	padding: 160px 0 60px 0;
}

#escalate .caution {
	position: relative;
	width: 1100px;
	margin: 190px auto 0 auto;

	text-align: center;
}

#escalate .caution::after {
  position: absolute;
  left: 50%;
  top: -130px;
  transform: translate(-50%);
  content: "";
  background: url(../img/img_caution.svg) no-repeat 0 0 / contain;
  width: 115px;
  height: 102px;
}

#escalate .caution .yellow {
	display: inline-block;
	background: #FFEE1E;
	margin: 0 0 10px 0;
	padding: 8px 5px 8px 10px;

	line-height: 1.1;
	font-weight: 600;
	font-size: 1.4em;
}

@media screen and (max-width: 768px), screen and (max-width: 1024px) {

	#escalate {
		display: block;
		padding: 100px 0 20px 0;
	}

	#escalate .content_box {
		display: inherit;
	}

	#escalate .caution {
		width: 100%;
		margin: 150px auto 0 auto;
	}

	#escalate .caution::after {
	  top: -110px;
	  width: 90px;
	  height: 95px;
	}

	#escalate .caution .yellow {
		width: 90%;
		margin: 0 auto 20px auto;

		font-size: 1.1em;
	}

}


/* #caution
----------------------------------- */

/* #available
----------------------------------- */

#available {
	background: none;
	padding: 40px 0;
}

#available::after {
	position: absolute;
  left: inherit;
  bottom: inherit;
  transform: none;
  content: none;
	background: none;
  width: inherit;
  height: inherit;
}

#available .medium_box {
	width: 1100px;
	margin: 40px auto;
}

#available .medium_box ul {
	display: flex;
	gap: 20px;
}

@media screen and (max-width: 768px), screen and (max-width: 1024px) {

	#available {
		padding: 0 0 20px 0;
	}

	#available .medium_box {
		width: 90%;
		margin: 20px auto;
	}

	#available .medium_box ul {
		display: flex;
	  flex-wrap: wrap;
	  list-style: none;
	  padding: 0;
	  margin: 0;
	  gap: 8px; /* アイテム間の余白 */
	  justify-content: center;
	}

	#available .medium_box ul li {
	  text-align: center;
	  flex: 1 1 calc(50% - 4px);
	}

	#available .medium_box ul li:nth-child(5) {
	  flex: 0 1 auto;
	  width: 50%;
	  display: flex;
	  justify-content: center;
	}

}

/* #works
----------------------------------- */

#works .voice_box {
	width: 1100px;
	margin: 0 auto;
	padding: 30px;
	border: 1px solid #222;
	border-radius: 10px;
}

#works .voice_box .comment h4 {
	margin: 0 0 10px 0;
}

@media screen and (max-width: 768px), screen and (max-width: 1024px) {

	#works .voice_box {
		width: 100%;
		margin: 0;
		padding: 20px;
	}

}

/* #price
----------------------------------- */


/* #flow
----------------------------------- */

#flow ._pink {
	background: #EDF3FF;
}

#flow ._pink_arrow::after {
  border-color: #EDF3FF transparent transparent transparent;
}


/* .faq
----------------------------------- */

#faq {
	background: #EDF3FF;
}

#faq .faq_anser h4::before {
	background: linear-gradient(180deg,#5E79EB,#2C4AC9);
}


/* #contact
------------------------------------------------------------------------ */

#contact {
	background: url("../../lp02/img/bg_contact_pc.jpg") no-repeat 0 0 / cover;
}

#contact .contact_header {
	width: 100%;
	background: url("../../lp02/img/bg_contact_ttl_pc.png") no-repeat 0 0 / cover;
}

/* .cta
------------------------------------------------------------------------ */

.cta {
  background: #EDF3FF;
}

.cta .inner .left {
  margin: 0 20px -80px 0;
}

.cta._first .cta_ttl {
	padding: 40px 0;
}

@media screen and (max-width: 768px), screen and (max-width: 1024px)  {

	.cta._first .cta_ttl {
		padding: 20px 0;
	}

}