@charset "utf-8";
/* CSS Document */
p {
	font-size: 1.6rem;
	line-height: 1.8;
}
@media (720px <= width) {
	p {
		font-size: 1.8rem;
	}
}
.d-ib {
	display: inline-block;
}
.w_1000,
.w_1200 {
	padding: 10rem 2rem;
	margin: 0 auto;
}
/* --- セクションタイトル --- */
.section__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.section__title {
	font-size: 2.8rem;
	line-height: 1.5;
	font-weight: 700;
	text-align: center;
	margin-bottom: .5em;
	flex: 1;
}
@media (720px <= width) {
	.section__title {
		font-size: 3.6rem;
		line-height: 1.55;
	}
}
@media (1024px <= width) {
	.section__title {
		font-size: 4.6rem;
		line-height: 1.2;
	}
}
.section__title .sub {
	font-size: 60%;
	display: block;
	margin-bottom: .5em;
}
h3 {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: .5em;
}
.section__lead {
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	margin-bottom: 1em;
}
/* --- 特長（2大カード） --- */
.features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 25px;
	padding: 1em;
}
@media (720px <= width) {
	.features {
		padding: 2em;
	}
}
.feature-card {
	background-color: var(--clr-bg, #f5f5f5);
	border-radius: 12px;
	padding: 30px;
	text-align: center;
	border: 2px solid transparent;
	transition: all 0.3s ease;
}
.feature-img {
	width: 50%;
	max-width: 200px;
	margin: 0 auto 1em;
}
.feature-card h3 {
	color: #009bff;
}
/* --- 見出し装飾（ハート・サークル） --- */
.heart {
	color: #FFF;
	font-weight: 700;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: 100px;
	height: 100px;
	position: relative;
}
@media (720px <= width) {
	.heart {
		width: 150px;
		height: 150px;
	}
}
.heart::before,
.heart::after {
	content: "";
	background: var(--clr-pink, #ff47ae);
	border-radius: 50px 50px 0 0;
	display: block;
	width: 50%;
	height: 80%;
	position: absolute;
	top: 10%;
}
.heart::before {
	transform: rotate(-45deg);
	transform-origin: left bottom;
	left: 50%;
}
.heart::after {
	transform: rotate(45deg);
	transform-origin: right bottom;
	right: 50%;
}
.heart span {
	color: #FFF;
	font-size: 1.2em;
	font-weight: 700;
	z-index: 2;
}
.circle {
	background: #009bff;
	border-radius: 50%;
	color: #FFF;
	font-size: 1.2em;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: 100px;
	height: 100px;
	aspect-ratio: 1 / 1;
}
@media (720px <= width) {
	.circle {
		width: 150px;
		height: 150px;
	}
}
/* --- お見舞金セクション --- */
/* #anshin {
  background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)),
  url("../images/anshin-pack/about_bg_sp.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: center, top left;
  background-size: cover, cover;
}
@media (720px <= width) {
  #anshin {
    background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)),
      url("../images/anshin-pack/about_bg.jpg");
  }
} */
#anshin {
  background-image: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)),
  url("../images/anshin-pack/about_bg_sp.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: center, top left;
  background-size: cover, cover;
}
@media (720px <= width) {
  #anshin {
    background-image: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)),
      url("../images/anshin-pack/about_bg.jpg");
  }
}
.case-wrap {
	background: #FFF;
	border-radius: 8px;
	padding: 2em 1em;
}
.case_txt {
	font-weight: 500;
	font-size: 1.1em;
	padding-bottom: 1em;
	text-align: center;
}
.case_txt span {
	border-bottom: 2px solid var(--clr-line, #ccc);
}
@media (720px <= width) {
	.case {
		display: flex;
		justify-content: space-around;
		gap: 3em;
	}
}
.case-type {
	border-radius: 50%;
	background: radial-gradient(#F4F6FF 0, #FFF 100%);
	text-align: center;
}
@media (720px > width) {
	.case-type {
		display: flex;
		align-items: center;
		padding-bottom: 1em;
	}
	.case-type.rev {
		flex-direction: row-reverse;
	}
}
.case-type img {
	width: 40%;
}
@media (720px > width) {
	.case-type img {
		width: 35%;
	}
	.case-type p {
		width: 65%;
		padding-left: 1em;
		text-align: left;
	}
	.case-type .rev p {
		padding-left: 0;
		padding-right: 1em;
	}
}
@media (720px <= width) {
	.case-type p {
		padding-top: 1em;
	}
}
/* 補償金額リスト */
.compensation {
	position: relative;
	padding-top: 120px;
	margin-top: 1em;
}
@media (720px <= width) {
	.compensation {
		display: flex;
		justify-content: space-between;
		gap: 1.5em;
	}
}
.compensation::before,
.compensation::after {
	content: "";
	background: #005A96;
	display: block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.compensation::before {
	width: 80px;
	height: 65px;
	top: 0;
}
.compensation::after {
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	height: 40px;
	width: 140px;
	top: 60px;
}
.compensation dl {
	background: #FFF;
	border-radius: 8px;
	border: 2px solid var(--clr-main, #009bff);
	text-align: center;
	margin-bottom: 1em;
	padding: 5px;
}
@media (720px <= width) {
	.compensation dl {
		width: calc((100% - 1.5em * 2) / 3);
	}
}
.compensation dt {
	background: var(--clr-main, #009bff);
	color: #FFF;
	font-weight: 700;
	font-size: 2.4rem;
	padding: 1em;
}
.compensation dd {
	color: var(--clr-pink, #ff47ae);
	font-weight: 700;
	line-height: 1.4;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 1em;
}
.compensation dd span {
	font-size: 3rem;
}
/* 手続きフロー */
.support-box {
	background: #ffffff;
	border: 1px solid var(--clr-bg, #f5f5f5);
	border-radius: 12px;
	padding: 30px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.05);
	text-align: center;
}
.flow-steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 15px;
	margin-top: 30px;
}
.flow-step {
	flex: 1;
	min-width: 200px;
	background: var(--clr-bg, #f5f5f5);
	padding: 20px;
	border-radius: 8px;
	text-align: center;
	position: relative;
}
.flow-step h4 {
	font-weight: 500;
	font-size: 2rem;
	margin-bottom: .5em;
}
.step-num {
	background: #000042;
	color: #ffffff;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: bold;
	margin: 0 auto 10px;
}
/* --- 優待（Club Off）セクション --- */
.benefit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.5em;
	margin-bottom: 2em;
}
.benefit-item {
	background-color: var(--clr-bg, #f5f5f5);
	border-radius: 8px;
	border: 1px solid var(--clr-bg, #f5f5f5);
	padding: 2em;
	text-align: center;
	overflow: hidden;
}
.benefit-tag {
	background: var(--clr-yellow, #ffe100);
	color: #000042;
	font-weight: 500;
	text-align: center;
	display: inline-block;
	padding: 5px 1em;
	margin-bottom: 10px;
}
.benefit-item dl {
	padding-top: 1em;
}
.benefit-item dt {
	font-weight: 700;
	font-size: 2rem;
	text-align: center;
}
.benefit-item dd {
	padding-top: 1em;
}
.benefit-item dd p {
	line-height: 1.8;

	text-align: center;
}
.benefit-item dd .off-num span {
	font-size: 3.5rem;
	font-weight: 700;
	padding: 0 5px;
}
.off-num {
	color: var(--clr-pink, #ff47ae);
}
.other-sv {
	background: var(--clr-bg, #f5f5f5);
	border-radius: 8px;
	padding: 2em;
}
.other-sv p {
	background: #FFF;
	font-weight: 500;
	padding: 2px 10px;
}
/* 修正 */
/* .other-sv ul {
	display: flex;
	flex-wrap: wrap;
	padding: 1em;
	list-style: disc;
}
.other-sv li {
	padding: 0 1em .5em 0;
}
@media (720px <= width) {
	.other-sv li {
		width: 33%;
	}
} */

.other-sv ul {
  padding: 1em 0;
}
@media (720px > width) {
  .other-sv li {
    display: inline-block;
    padding: 0 1em .5em 0;
  }
  .other-sv li::after {
    content: " /";
  }
  .other-sv li:last-of-type::after {
    content: none;
  }
}
@media (720px <= width) {
  .other-sv ul {
    display: flex;
    flex-wrap: wrap;
    list-style: disc;
    padding: 1em;
  }
  .other-sv li {
    width: 33%;
    padding-bottom: 5px;
  }
}
/* 修正 */
@media (1200px <= width) {
	.other-sv li {
		width: 25%;
	}
}
/* ボタンリンク設定 */
.cluboff {
	padding: 3em 1em;
	text-align: center;
}
.cluboff p {
	font-size: 1.8rem;
	line-height: 1.4;
	padding: 1em;
}
.cluboff .button {
	background-color: var(--clr-main, #009bff);
	color: #FFF;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
	padding: 2rem 4rem 2rem 2rem;
	border-radius: 100rem;
	position: relative;
}
@media (720px <= width) {
	.cluboff .button {
		font-size: 2.4rem;
		padding: 3rem 8rem 3rem 4rem;
	}
}
@media (1024px <= width) {
	.cluboff .button {
		width: 45rem;
		margin: 0 auto;
	}
}
/* 矢印アイコン（データURIエスケープ最適化） */
.cluboff .button::after {
	content: "";
	aspect-ratio: 1;
	display: block;
	width: 3rem;
	position: absolute;
	right: 2rem;
	top: 50%;
	transform: translateY(-50%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Ccircle cx='15' cy='15' r='15' fill='white'/%3E%3Cpath d='M15.0264 10.2314C15.4505 9.87803 16.081 9.93545 16.4346 10.3593L19.7686 14.3593C20.0776 14.7302 20.0776 15.2697 19.7686 15.6406L16.4346 19.6406C16.081 20.0644 15.4505 20.1219 15.0264 19.7685C14.6021 19.4149 14.5449 18.7836 14.8984 18.3593L16.8643 15.9999H9C8.44772 15.9999 8 15.5522 8 14.9999C8 14.4477 8.44772 13.9999 9 13.9999H16.8643L14.8984 11.6406C14.5449 11.2163 14.6021 10.5849 15.0264 10.2314Z' fill='%23009BFF'/%3E%3C/svg%3E") center/cover no-repeat;
}
@media (720px <= width) {
	.cluboff .button::after {
		right: 4rem;
		width: 5rem;
	}
}
/* 店舗申し込み注意書き */
.app-section {
    background: var(--clr-bg, #f5f5f5);
	text-align: center;
	padding: 3em 1em;
}
.app-section h3 {
	color: var(--clr-main);
}
.app-section ul {
	color: #333;
	font-size: .9em;
	text-align: left;
	max-width: fit-content;
	margin: 1em auto;
}
.app-section li {
	line-height: 1.6;
}
.app-section li::before {
	content: "※ ";
}