@charset "UTF-8";
/*
 * TUTURIGACHI 2026 / 国際事業部
 * Copyright (C) 2026 Tuturigachi Language Solutions Corp. All Rights Reserved.
 * guide.css  the guide under each English tool: How to Use It, Questions People Ask, Related Tools.
 */

.g-sec { font-size: 15px; line-height: 1.8; color: var(--sumi); }
.g-sec p { max-width: 42em; }

.g-how__steps { margin: 0 0 8px; padding: 0; list-style: none; counter-reset: g-step; }
.g-how__steps li { position: relative; max-width: 42em; margin: 0 0 14px; padding: 0 0 0 38px; counter-increment: g-step; }
.g-how__steps li::before {
  content: counter(g-step); position: absolute; left: 1px; top: 0.2em; width: 24px; height: 24px; border-radius: 50%;
  font: bold 12px/24px Arial, "Helvetica Neue", Helvetica, sans-serif; text-align: center; color: #fff;
  text-shadow: 0 -1px 0 oklch(0.2 0.03 215 / 0.5);
  background: linear-gradient(var(--fukagawa-teal-500), var(--fukagawa-teal-700) 60%, var(--fukagawa-teal-800));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.3), 1px 1px 0 var(--kusumi-gold-300);
}
.g-how__head { color: var(--fukagawa-teal-800); }

.g-faq__q { max-width: 42em; margin: 22px 0 6px; font: bold 16px/1.5 Arial, "Helvetica Neue", Helvetica, sans-serif; color: var(--sumi); }
.g-faq__q:first-of-type { margin-top: 4px; }
.g-faq__a { margin: 0 0 12px; }

.g-related__list { margin: 0 0 16px; padding: 0; list-style: none; }
.g-related__list li { position: relative; max-width: 42em; margin: 0 0 10px; padding-left: 16px; }
.g-related__list li::before {
  content: ""; position: absolute; left: 1px; top: 0.62em;
  border: 4px solid transparent; border-left: 6px solid var(--kusumi-gold-600); border-right: 0;
}
.g-related__list a { font-weight: bold; }
.g-related__what { color: var(--sumi-sub); }
.g-related__what::before { content: ": "; color: var(--sumi-sub); }

@media (max-width: 600px) {
  .g-sec { font-size: 15px; }
  .g-how__steps li { padding-left: 34px; }
}

.g-jobs { margin: 0 0 16px; padding: 0; list-style: none; }
.g-jobs li { position: relative; max-width: 42em; margin: 0 0 10px; padding-left: 16px; }
.g-jobs li::before {
  content: ""; position: absolute; left: 1px; top: 0.62em;
  border: 4px solid transparent; border-left: 6px solid var(--kusumi-gold-600); border-right: 0;
}
.g-jobs__head { color: var(--fukagawa-teal-800); }
.g-jobs__head::after { content: "."; }
.g-jobs__set { display: block; font-size: 13px; color: var(--sumi-sub); }

.g-ruby { margin: 0 0 16px; padding: 0; list-style: none; }
.g-ruby li { max-width: 42em; margin: 0 0 14px; padding: 12px 16px; background: #fff; border: 1px solid var(--jimu-gray-200); border-radius: 3px; }
.g-ruby__text { margin: 0 0 4px; font-size: 20px; line-height: 2.1; color: var(--sumi); }
.g-ruby__text rt { font-size: 0.5em; color: var(--fukagawa-teal-800); }
.g-ruby__plain { margin: 0 0 6px; font-size: 13px; color: var(--sumi-sub); }
.g-ruby__note { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--sumi-sub); }

.g-haiku { margin: 0 0 16px; padding: 0; list-style: none; }
.g-haiku li { max-width: 42em; margin: 0 0 14px; padding: 12px 16px; background: #fff; border: 1px solid var(--jimu-gray-200); border-radius: 3px; }
.g-haiku__poem { margin: 0 0 4px; font-size: 18px; line-height: 1.6; color: var(--sumi); }
.g-haiku__by { display: block; margin-top: 1px; font-size: 13px; color: var(--sumi-sub); }
.g-haiku__part { white-space: nowrap; }
.g-haiku__parts { margin: 0 0 4px; font-size: 14px; color: var(--sumi); }
.g-haiku__parts b { display: inline-block; min-width: 1.6em; margin-left: 2px; padding: 0 5px; text-align: center; border-radius: 9px; color: #fff; background: var(--fukagawa-teal-700); font-size: 12px; line-height: 18px; }
.g-haiku__sep { color: var(--jimu-gray-500); }
.g-haiku__en { margin: 0 0 4px; font-style: italic; font-size: 14px; color: var(--sumi-sub); }
.g-haiku__en-n { font-style: normal; font-size: 13px; }
.g-haiku__note { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--sumi-sub); }

.g-ex-old td[lang="ja"], .g-ex-pets td[lang="ja"] { font-size: 1.15em; white-space: nowrap; }
.g-ex-names td[lang="ja"] a { text-decoration: none; border-bottom: 1px dotted currentColor; }
@media (max-width: 600px) {
  :is(.g-ex-old, .g-ex-pets) thead { display: none; }
  :is(.g-ex-old, .g-ex-pets), :is(.g-ex-old, .g-ex-pets) :is(tbody, tr, th, td) { display: block; width: auto; }
  :is(.g-ex-old, .g-ex-pets) tr { padding: 10px 0; border-bottom: 1px solid var(--jimu-gray-200); }
  :is(.g-ex-old, .g-ex-pets) :is(th, td) { padding: 1px 0; border: 0; text-align: left; white-space: normal; }
  :is(.g-ex-old, .g-ex-pets) th { font-size: 16px; }
}