:root {
  --page-max: 396px;
  --outside: #f2f2f2;
  --navy: #294e8f;
  --heading-bg: #eff5fe;
  --text: #000;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--outside);
}

body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  color: var(--text);
  background: var(--outside);
  font-family: "A P-OTF Gothic MB101 Pr6N", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", Meiryo, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.info-page {
  width: min(100%, var(--page-max));
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
}

.info-brand {
  display: block;
  width: 100%;
  height: min(26.667px, 6.734vw);
  background: #fff;
}

.info-brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.info-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: min(57px, 14.394vw);
  color: #fff;
  background: var(--navy);
}

.info-title h1 {
  margin: 0;
  font-size: min(15px, 3.788vw);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.info-main {
  width: min(366.667px, 92.593%);
  margin-right: auto;
  margin-left: auto;
}

.info-main--research,
.info-main--operator {
  margin-top: min(13.333px, 3.367vw);
  margin-bottom: min(18px, 4.545vw);
}

.info-main--research .info-section {
  padding-bottom: min(5px, 1.263vw);
}

.info-main--operator .info-section {
  padding-bottom: min(8.333px, 2.104vw);
}

.info-section + .info-section {
  margin-top: min(10px, 2.525vw);
}

.info-section__title {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: min(26.667px, 6.734vw);
  margin: 0;
  padding: 0 min(10.323px, 2.607vw);
  color: #2f2f2f;
  background: var(--heading-bg);
  border-left: min(5.184px, 1.309vw) solid var(--navy);
  font-size: min(11.333px, 2.862vw);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}

.research-meta {
  display: grid;
  gap: min(5px, 1.263vw);
  margin: min(5.333px, 1.347vw) min(8.333px, 2.104vw) 0;
}

.research-meta__item h3 {
  margin: 0;
  font-size: min(9.333px, 2.357vw);
  font-weight: 600;
  line-height: min(10px, 2.525vw);
}

.research-meta__item h3::before,
.comparison-note__lead::before {
  margin-right: 1px;
  color: var(--navy);
  content: "▼";
}

.research-meta__item p,
.comparison-note p {
  margin: 1px 0 0;
  font-size: min(9px, 2.273vw);
  font-weight: 500;
  line-height: min(13.333px, 3.367vw);
}

.research-items {
  margin: min(17px, 4.293vw) min(8.333px, 2.104vw) 0;
  padding: 0;
  list-style: none;
}

.research-items li {
  display: flex;
  align-items: center;
  min-height: min(31px, 7.828vw);
  padding: 0 min(16.667px, 4.209vw) min(3.333px, 0.842vw);
  border-bottom: 1px solid #9d9d9d;
  font-size: min(13.333px, 3.367vw);
  font-weight: 500;
  line-height: 1.2;
}

.comparison-note {
  margin: min(5.333px, 1.347vw) min(8.333px, 2.104vw) 0;
}

.comparison-note__lead {
  margin: 0;
  font-size: min(9.333px, 2.357vw);
  font-weight: 600;
  line-height: min(10px, 2.525vw);
}

.result-table {
  width: calc(100% - min(16.667px, 4.209vw));
  margin: min(17.333px, 4.377vw) auto 0;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
}

.result-table col:first-child {
  width: 72%;
}

.result-table col:last-child {
  width: 28%;
}

.result-table th {
  height: min(26.667px, 6.734vw);
  padding: 0;
  background: #f2f2f2;
  font-size: min(13px, 3.283vw);
  font-weight: 500;
}

.result-table th:last-child {
  font-size: min(11.667px, 2.946vw);
}

.result-table td {
  height: min(39px, 9.848vw);
  padding: 0 min(2px, 0.505vw);
  border-bottom: 1px solid #9d9d9d;
  font-size: min(12.333px, 3.114vw);
  font-weight: 700;
  line-height: 1.25;
}

.result-table td:last-child {
  font-size: min(13.333px, 3.367vw);
}

.operator-table {
  width: min(316.667px, 86.364%);
  margin: min(16px, 4.04vw) auto 0;
  border: 1px solid #8f8f8f;
  border-collapse: collapse;
  table-layout: fixed;
}

.operator-table th,
.operator-table td {
  height: min(27px, 6.818vw);
  padding: 0 min(10px, 2.525vw);
  border-bottom: 1px solid #8f8f8f;
  font-size: min(13.333px, 3.367vw);
  font-weight: 500;
  text-align: left;
}

.operator-table tr:last-child th,
.operator-table tr:last-child td {
  border-bottom: 0;
}

.operator-table th {
  width: 40%;
  background: #f2f2f2;
}

.operator-copy {
  margin: min(4px, 1.01vw) min(8.333px, 2.104vw) 0;
  font-size: min(9px, 2.273vw);
  font-weight: 500;
  line-height: min(15px, 3.788vw);
}

.info-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(16.667px, 4.209vw);
  width: 100%;
  height: min(57px, 14.394vw);
  padding: min(6.667px, 1.684vw) min(16.667px, 4.209vw);
  color: #fff;
  background: var(--navy);
}

.info-footer a {
  display: inline-flex;
  align-items: center;
  gap: min(5px, 1.263vw);
  color: inherit;
  font-size: min(10.333px, 2.609vw);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

.info-footer a::before {
  width: 0;
  height: 0;
  border-top: min(5px, 1.263vw) solid transparent;
  border-bottom: min(5px, 1.263vw) solid transparent;
  border-left: min(7px, 1.768vw) solid #fff;
  content: "";
}

.contact-main {
  width: min(366.667px, 92.593%);
  min-height: min(336px, 84.848vw);
  margin: min(18px, 4.545vw) auto 0;
  padding-bottom: min(22.667px, 5.724vw);
}

.contact-form {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.contact-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-field + .contact-field {
  margin-top: min(10px, 2.525vw);
}

.contact-field label {
  display: block;
  margin: 0 0 min(6.667px, 1.684vw);
  font-size: min(13.333px, 3.367vw);
  font-weight: 500;
  line-height: 1;
}

.contact-field input,
.contact-field textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: min(9px, 2.273vw);
  color: #000;
  background: #fff;
  border: 1px solid #707070;
  border-radius: 0;
  font: inherit;
  font-size: 16px;
}

.contact-field input {
  height: min(33.333px, 8.418vw);
}

.contact-field textarea {
  height: min(100px, 25.253vw);
  resize: vertical;
}

.contact-field textarea::placeholder {
  color: #bbb;
  font-size: min(13.333px, 3.367vw);
  font-weight: 500;
  opacity: 1;
}

.contact-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(330px, 90%);
  height: min(43.333px, 10.943vw);
  margin: min(23.333px, 5.892vw) auto 0;
  padding: 0;
  color: #fff;
  background: linear-gradient(#50c501, #398d00);
  border: 0;
  border-radius: min(3.333px, 0.842vw);
  box-shadow: 0 min(1.333px, 0.337vw) 0 #143300;
  font-family: inherit;
  font-size: min(15px, 3.788vw);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.contact-confirm,
.contact-complete {
  width: 100%;
}

.contact-panel-title {
  display: flex;
  align-items: center;
  min-height: min(35px, 8.838vw);
  margin: 0;
  padding: 0 min(10px, 2.525vw);
  color: #2f2f2f;
  background: var(--heading-bg);
  border-left: min(5.184px, 1.309vw) solid var(--navy);
  font-size: min(14px, 3.535vw);
  font-weight: 600;
  line-height: 1.25;
}

.contact-summary {
  margin: min(14px, 3.535vw) 0 0;
  border: 1px solid #8f8f8f;
}

.contact-summary > div {
  display: grid;
  grid-template-columns: 36% 64%;
  min-height: min(46px, 11.616vw);
  border-bottom: 1px solid #b8b8b8;
}

.contact-summary > div:last-child {
  border-bottom: 0;
}

.contact-summary dt,
.contact-summary dd {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: min(9px, 2.273vw);
  font-size: min(12px, 3.03vw);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.contact-summary dt {
  background: #f2f2f2;
  font-weight: 600;
}

.contact-summary__message {
  min-height: min(94px, 23.737vw);
  align-items: flex-start !important;
  white-space: pre-wrap;
}

.contact-actions {
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  gap: min(10px, 2.525vw);
  margin-top: min(18px, 4.545vw);
}

.contact-actions button {
  height: min(43.333px, 10.943vw);
  padding: 0 min(8px, 2.02vw);
  border-radius: min(3.333px, 0.842vw);
  font-family: inherit;
  font-size: min(13px, 3.283vw);
  font-weight: 600;
  cursor: pointer;
}

.contact-actions__back {
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--navy);
}

.contact-actions__send {
  color: #fff;
  background: linear-gradient(#50c501, #398d00);
  border: 0;
  box-shadow: 0 min(1.333px, 0.337vw) 0 #143300;
}

.contact-actions__send:disabled {
  cursor: wait;
  opacity: 0.65;
}

.contact-error {
  margin: min(12px, 3.03vw) 0 0;
  padding: min(9px, 2.273vw);
  color: #a90000;
  background: #fff0f0;
  border: 1px solid #e0a7a7;
  font-size: min(11px, 2.778vw);
  font-weight: 500;
  line-height: 1.55;
}

.contact-complete {
  display: flex;
  min-height: min(311px, 78.535vw);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.contact-complete__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(58px, 14.646vw);
  height: min(58px, 14.646vw);
  color: #fff;
  background: #398d00;
  border-radius: 50%;
  font-size: min(34px, 8.586vw);
  font-weight: 700;
  line-height: 1;
}

.contact-complete h2 {
  margin: min(18px, 4.545vw) 0 0;
  color: var(--navy);
  font-size: min(22px, 5.556vw);
  line-height: 1.25;
}

.contact-complete p {
  margin: min(12px, 3.03vw) 0 0;
  font-size: min(12px, 3.03vw);
  line-height: 1.6;
}

.contact-complete a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(240px, 65.455%);
  height: min(40px, 10.101vw);
  margin-top: min(24px, 6.061vw);
  color: #fff;
  background: var(--navy);
  border-radius: min(3.333px, 0.842vw);
  font-size: min(13px, 3.283vw);
  font-weight: 600;
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

@media (max-width: 350px) {
  .info-footer {
    gap: 10px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .info-footer a {
    font-size: 9px;
  }
}