/* ==================== losszero-contents-banner.css ==================== */

.losszero-contents-banner {
	display: grid;
	grid-gap: 1.5em;
	justify-items: center;
}

.losszero-contents-banner.recipe {
	margin-top: 2em;
}

.losszero-contents-banner::after {
	content: none;
}

.losszero-contents-banner img[src*="banner_simulator"] {
	width: 15.7em;
}

.losszero-contents-banner img[src*="banner_quiz"],
.losszero-contents-banner img[src*="banner_study"],
.losszero-contents-banner img[src*="banner_savings"] {
	width: 14.3em;
}

.losszero-contents-banner.quiz {
	margin-top: 2em;
}

.device-type-mouse .losszero-contents-banner a {
	transition: 150ms;
}
.device-type-mouse .losszero-contents-banner a:hover {
	opacity: 0.7;
}


.losszero-contents-banner .simulator {
	display: grid;
	grid-gap: 0.5em;
	justify-items: center;
}
.losszero-contents-banner .simulator h3 {
	margin: 0;
	color: #ff4f4f;
	font-size: 70%;
}

.losszero-contents-banner h3::before { content: '＼ '; }
.losszero-contents-banner h3::after { content: ' ／'; }


.losszero-contents-banner .contents {
	display: grid;
	grid-gap: 1em;
}


@media (min-width: 641px) {

	.losszero-contents-banner .contents {
		grid-template-columns: repeat(2, 1fr);
	}

}



/* ==================== losszero-footer.css ==================== */

.losszero-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 3em auto;
}



@media (max-width: 640px) {
	.losszero-footer img {
		width: 9em;
	}
}


@media (min-width: 641px) {
	.losszero-footer img {
		width: 10em;
	}
}



/* ==================== losszero-frame.css ==================== */

.losszero-frame, .losszero-frame img {
	font-size: 20px;
}


@media (max-width: 375px) {
	.losszero-frame, .losszero-frame img {
		font-size: 5.3333333333333vw;
	}
}


@media (min-width: 641px) and (max-width: 1112px) {
	.losszero-frame, .losszero-frame img {
		font-size: 1.7985611510791vw;
	}
}


@media (min-width: 1367px) {
	.losszero-frame, .losszero-frame img {
		font-size: 1.4641288433382vw;
	}
}



/* ==================== losszero-pankuzu.css ==================== */

.losszero-pankuzu {
  padding: 0.75em;
}
.losszero-pankuzu ul {
  display: flex;
  gap: 0.25em 0.5em;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.losszero-pankuzu ul li {
  display: flex;
  align-items: center;
  color: #5699cc;
  line-height: 1.3;
}
@media (max-width: 640px) {
  .losszero-pankuzu ul li {
    font-size: 55%;
  }
}
@media (min-width: 641px) {
  .losszero-pankuzu ul li {
    font-size: 65%;
  }
}
@media (max-width: 640px) {
  .losszero-pankuzu ul li li:nth-of-type(4) {
    display: none;
  }
}
.losszero-pankuzu ul li:not(:first-child)::before {
  content: "";
  display: block;
  width: 0.75em;
  height: 0.75em;
  margin-right: 0.5em;
  background: url(../images/pankuzu_arrow.svg) no-repeat center center/contain;
}
@media (max-width: 640px) {
  .losszero-pankuzu ul li .logo {
    width: 5em;
  }
}
@media (min-width: 641px) {
  .losszero-pankuzu ul li .logo {
    width: 6em;
  }
}
.losszero-pankuzu ul li a {
  display: flex;
  color: inherit;
  text-decoration: none;
}
.losszero-pankuzu ul li a:hover {
  text-decoration: underline;
}