/* =========================================================
   Touristship JAPAN Web (English) - additional sections
   File: css/tjw-en.css
   Sections: WHAT'S INSIDE (8-topic grid) / WHY IT WORKS / Ready CTA
   NOTE: New styles only. Existing tsjp_* styles live in style.css.
   ========================================================= */

:root {
  --tjw-cream: #fbf4e2;
  --tjw-orange: #d0602c;
  --tjw-orange-cta: #c4592a;
  --tjw-ink: #423c37;
  --tjw-card-border: #efe6d2;
}

/* ---- shared small section label ("WHAT'S INSIDE" / "WHY IT WORKS") ---- */
.tjw_label {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--tjw-orange);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 0 18px;
  text-transform: uppercase;
	position: relative;
	margin-left: -15px;
}
.tjw_label::after {
  content: "";
  width: 1500px;
  height: 1px;
  background: rgba(208, 96, 44, 0.5);
	position: absolute;
	left: 12%;
}

/* ============ WHAT'S INSIDE : 8-topic grid ============ */
/* keep the new sections aligned with the "Know someone" box width */
.tsjp_topic_area {
  max-width: 1000px;
  margin: 0 auto;
  padding: 56px 24px 10px;
  box-sizing: border-box;
}
.tjw_inside_head h2 {
  color: var(--tjw-orange);
  font-size: 1.6rem;
  line-height: 1.35;
  margin: 0 0 12px;
	text-align: left;
	letter-spacing: 0em;
	font-weight: bold;
}
.tjw_inside_head p {
  color: var(--tjw-ink);
  font-size: 0.98rem;
  line-height: 1.75;
  margin: 0 0 34px;
  max-width: 760px;
}

.tjw_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.tjw_card {
  background: #fff;
  border: 1px solid var(--tjw-card-border);
  border-radius: 12px;
  padding: 6px 10px 20px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(150, 110, 60, 0.06);
}
.tjw_card_num {
  display: block;
  text-align: left;
  color: #ffe200;
  font-family: "m-plus-2p", sans-serif;
  font-weight: 900;
  font-size: 1.3rem;
  line-height: 1;
  margin-bottom: 10px;
}
.tjw_card h4 {
  color: var(--tjw-orange);
  font-size: 1.02rem;
  margin: 0 0 10px;
  font-weight: bold;
}
.tjw_card p {
  color: var(--tjw-ink);
  font-size: 0.82rem;
  line-height: 1.65;
  margin: 0;
}

/* ============ WHY IT WORKS ============ */
.tjw_why {
  margin-top: 56px;
}
.tjw_why_title {
  color: var(--tjw-orange);
  font-size: 1.5rem;
  line-height: 1.35;
  margin: 0 0 12px;
		text-align: left;
	letter-spacing: 0em;
	font-weight: bold;
}
.tjw_why_lead {
  color: var(--tjw-ink);
  font-size: 0.98rem;
  line-height: 1.75;
  margin: 0 0 30px;
  max-width: 820px;
}
.tjw_why_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}
.tjw_why_card {
  background: #fffef8;
  border: 1px solid var(--tjw-card-border);
  border-radius: 12px;
  padding: 5px 10px 10px;
}
.tjw_why_icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #ffe200;
	border-radius: 50%;
/*   -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain; */
  /* heart shape */
/*   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.3-10.3-10C.3 8 1.7 4.5 5 4.5c2 0 3.2 1.2 4 2.4.8-1.2 2-2.4 4-2.4 3.3 0 4.7 3.5 3.3 6.5C20 15.7 12 21 12 21z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.3-10.3-10C.3 8 1.7 4.5 5 4.5c2 0 3.2 1.2 4 2.4.8-1.2 2-2.4 4-2.4 3.3 0 4.7 3.5 3.3 6.5C20 15.7 12 21 12 21z'/%3E%3C/svg%3E"); */
}
.tjw_why_card h4 {
  color: var(--tjw-orange);
  font-size: 1.05rem;
  margin: 0 0 8px;
	font-weight: bold;
	padding: 0 10px;
}
.tjw_why_card p {
  color: var(--tjw-ink);
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 0;
	padding: 0 10px;
}

.tsjp_appeal_en .tsjp_appeal_character {
	bottom: 0;
	right: 13%;
}

/* ============ Ready CTA band ============ */
.tjw_ready {
  background: var(--tjw-orange-cta);
  text-align: center;
  padding: 54px 20px 60px;
}
.tjw_ready h2 {
	letter-spacing: 0;
}
.tjw_ready p {
	letter-spacing: 0.05em;
}
.tjw_ready_title {
  color: #fff;
  font-size: 1.55rem;
  margin: 0 0 10px;
}
.tjw_ready_lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  margin: 0 0 6px;
}
.tjw_ready_chars {
  margin: 20px 0 0;
}
.tjw_ready_chars img {
  width: 96px;
  height: auto;
  vertical-align: bottom;
}
.tjw_ready_btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  color: var(--tjw-orange-cta);
  text-decoration: none;
  font-size: 1.02rem;
  padding: 5px 40px;
  border-radius: 50px;
  transition: opacity 0.25s ease;
}
.tjw_ready_btn span {
  font-size: 1.2rem;
  line-height: 1;
}
.tjw_ready_btn:hover {
  opacity: 0.85;
  color: var(--tjw-orange-cta);
}

.tjw_ready .tsjp_fv_en_share_explore {
	padding: 5px 45px 5px 35px;
	font-size: 1.2rem;
}
.tjw_ready .tsjp_fv_en_share_explore::after {
	right: 7%;
    transform: translatey(-70%);
}

/* ============ responsive ============ */
@media (max-width: 900px) {
  .tjw_grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .tjw_grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tjw_why_grid { grid-template-columns: 1fr; }
  .tjw_card { padding: 18px 12px 20px; }
  .tjw_card h4 { font-size: 0.95rem; }
  .tjw_card p { font-size: 0.78rem; }
  .tjw_inside_head h2,
  .tjw_why_title { font-size: 1.3rem; }
  .tjw_ready_title { font-size: 1.3rem; }
}