@charset "UTF-8";
/* 年齢診断ページ -------------------------------------*/
#age_page { max-width: 1200px; margin: 35px auto 0; box-sizing: border-box; }

.age-hero { display: flex; }
.age-hero .age-hero-text { box-sizing: border-box; }
.age-hero h2 { font-size: 2.75rem; font-weight: normal; line-height: 1.08; margin: 0 0 0.38em; }
.age-hero p { line-height: 1.9; color: #67625C; }

.age-support { margin-top: 1.2em; font-weight: bold; color: #333 !important; }

.age-result-cta, .age-design-link { display: inline-block; text-decoration: none; border-radius: 3px; line-height: 1.2; padding: 0.75em 1.1em; background-color: #4D4A47; color: #FFF; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
.age-result-cta:hover, .age-result-cta:focus, .age-design-link:hover, .age-design-link:focus { background-color: #333; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14); transform: translateY(-2px); }

.age-tool { padding: 32px 36px 36px; background-color: #FFF; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1); box-sizing: border-box; }
.age-tool h3, .age-tool > p { max-width: 780px; }
.age-tool h3 { font-size: 1.55rem; font-weight: normal; }
.age-tool #testbox { margin-top: 14px; border: 0; padding: 0; }
.age-tool #testbox ul { display: block; }
.age-tool #testbox li, .age-tool #testbox li:first-of-type, .age-tool #testbox li:last-of-type { width: 100%; margin-bottom: 14px; }
.age-tool #testbox li:last-of-type { display: none; }
.age-tool #testbox input, .age-tool #testbox select { display: block; width: 100%; max-width: none; min-height: 44px; }
.age-tool #testbox #btnswitchpettype { display: none; }
.age-tool #testbox #humanage { min-height: 2.5em; margin-top: 16px; padding: 14px; background-color: #F8F7F3; color: #333; font-size: 1.08rem; line-height: 1.6; box-sizing: border-box; }
.age-tool #testbox.has-result #humanage { background-color: #EEF5E2; font-weight: bold; }

html[lang="ja"] .age-tool #testbox #humanage:empty::before { content: "結果はここに表示されます。"; color: #8a8781; font-weight: normal; }

html[lang="en"] .age-tool #testbox #humanage:empty::before { content: "Your result will appear here."; color: #8a8781; font-weight: normal; }

.age-tool p, .age-section-head p, .age-card-copy p, .age-note p { color: #67625C; line-height: 1.85; }

.age-test-panel { margin-top: 18px; }

.age-step-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 24px; padding-bottom: 12px; border-bottom: 1px solid #E4E0D8; }
.age-step-head span { color: #333; font-size: 1.08rem; font-weight: bold; line-height: 1.45; }
.age-step-head small { display: inline-flex; align-items: center; gap: 0.45em; min-height: 34px; padding: 0.35em 0.75em; background-color: #F3F1EB; color: #67625C; font-size: 0.84rem; line-height: 1.3; box-sizing: border-box; }
.age-step-head strong { color: #333; }

.age-breed-radios { margin-top: 18px; }

.age-breed-group { margin-top: 22px; }
.age-breed-group h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 1.05rem; font-weight: bold; line-height: 1.45; }
.age-breed-group img { width: 32px; height: 32px; object-fit: contain; }

.age-breed-grid { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 2px 10px; }

.age-breed-chip { display: inline-flex; cursor: pointer; }
.age-breed-chip input { position: absolute; opacity: 0; pointer-events: none; }
.age-breed-chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 0.42em 0.78em; border: 1px solid #D6D3CC; background-color: #F8F7F3; color: #333; font-size: 0.86rem; line-height: 1.25; box-sizing: border-box; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.age-breed-chip:hover span { border-color: #B7C878; background-color: #FBFAF6; transform: translateY(-1px); }
.age-breed-chip input:checked + span { border-color: #92B535; background-color: #EEF5E2; box-shadow: inset 0 0 0 1px #92B535, 0 5px 12px rgba(146, 181, 53, 0.18); font-weight: bold; }
.age-breed-chip input:focus + span { outline: 2px solid rgba(146, 181, 53, 0.32); outline-offset: 2px; }

.age-date-card { margin-top: 24px; padding: 22px; background-color: #FAF9F5; border: 1px solid #E4E0D8; box-sizing: border-box; scroll-margin-top: 18px; }
.age-date-card .age-step-head { margin-top: 0; }

.age-result-cta { display: none; width: 100%; box-sizing: border-box; margin-top: 16px; text-align: center; }

.age-result-cta.is-visible { display: block; }

.age-method, .age-card-story, .age-note { margin: 24px 10px 44px; box-sizing: border-box; }

.age-method { padding: 36px 0 8px; }

.age-section-head h3 { font-size: 2rem; font-weight: normal; line-height: 1.2; }

.age-method-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.age-method-list article { margin: 0; padding: 22px; background-color: rgba(255, 255, 255, 0.64); box-sizing: border-box; }
.age-method-list h4 { margin: 0 0 0.6em; font-size: 1.08rem; line-height: 1.45; }
.age-method-list p { margin: 0; color: #67625C; line-height: 1.75; }

.age-card-story { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(280px, 0.72fr); gap: 28px 36px; align-items: center; padding: 36px; background-color: #FFF; }

.age-card-copy h3 { font-size: 2rem; font-weight: normal; line-height: 1.2; }

.age-use-list { display: grid; gap: 9px; margin: 18px 0 0; padding: 0; list-style: none; }
.age-use-list li { position: relative; padding-left: 1.3em; line-height: 1.65; color: #67625C; }
.age-use-list li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 0.55em; height: 1px; background-color: #92B535; }

.age-card-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; align-items: end; }
.age-card-preview img { display: block; width: 100%; height: auto; background-color: #FFF; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12); }
.age-card-preview img:nth-child(2) { transform: translateY(-14px); }

.age-steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; }
.age-steps li { display: grid; grid-template-columns: 2.2em 1fr; gap: 10px; align-items: center; line-height: 1.45; }
.age-steps span { display: inline-grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background-color: #92B535; color: #FFF; font-weight: bold; }

.age-design-link { margin-top: 20px; }

.age-note { margin-bottom: 54px; background-color: transparent; }
.age-note h3 { font-size: 1.35rem; }

@media screen and (max-width: 690px) { #age_page { margin: 15px auto 0; }
  .age-hero, .age-method-list, .age-card-story, .age-steps { display: block; }
  .age-hero { gap: 22px; }
  .age-hero h2 { font-size: 2rem; }
  .age-hero img { width: 100%; }
  .age-tool { padding: 22px; }
  .age-tool, .age-method, .age-card-story, .age-note { padding: 20px; margin-left: 0; margin-right: 0; }
  .age-step-head { display: block; }
  .age-step-head small { display: flex; width: 100%; margin-top: 10px; }
  .age-date-card { padding: 16px; }
  .age-section-head h3, .age-card-copy h3 { font-size: 1.55rem; }
  .age-method-list article { margin-top: 12px; }
  .age-card-preview { margin-top: 22px; }
  .age-steps { margin-top: 24px; }
  .age-steps li { margin-top: 10px; }
  .age-design-link { display: block; margin-top: 18px; text-align: center; } }