body {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}

input:disabled,
select:disabled,
textarea:disabled {
  background: #dfdfdf !important;
  color: #ccc !important;
}

img {
  -webkit-backface-visibility: hidden;
}

.ta-c {
  text-align: center;
}

*.P5msg {
  color: green;
  display: block;
}

input.P5err, select.P5err, textarea.P5err {
    background-color: #ffffcc;
}
td.P5err, th.P5err {
    background-color: #ffcccc;
}
#err-system .P5err {
  background: #fcc;
  border: 1px solid #c00;
  border-radius: 6px;
  box-sizing: border-box;
  color: #c00;
  display: block;
  font-size: 0.8rem;
  margin: 0.5em auto;
  max-width: 750px;
  padding: 0.5em 1em;
}


.error-message .P5err {
  background: #dc0000;
  border: 1px solid #999;
  color: #fff;
  display: block;
  font-size: 0.72rem;
  margin: 0 0 -1px;
  padding: 0.25em 0.5em;
}
.error-message .P5err:before {
  content: '▼';
  margin-right: 0.4em;
}

*.hide-by-inputenabler {
  display: none;
}
*.invisible-by-inputenabler {
  visibility: hidden;
}

a[href^="mailto:"] {
  color: inherit;
  text-decoration: none;
}
a.button-1 {
  transition: all 0.2S linear;
}

*.blue {
  color: #06c;
}

div.q-block {
  border-radius: 0px;
  overflow: hidden;
  z-index: 1;
}
div.q-block .fieldset .label > .question-number:after {
  content: '';
  display: block;
  height: 0;
  width: 48px;
}
div.q-block .fieldset .input input[type="date"] ,
div.q-block .fieldset .input input[type="email"] ,
div.q-block .fieldset .input input[type="password"],
div.q-block .fieldset .input input[type="text"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #cccccc;
  border-radius: 0;
  box-sizing: border-box;
  font-size: 0.8rem;
  margin: 0;
  outline: none;
  padding: 3px 5px;
}
div.q-block .fieldset .input select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(style/img/arrow.svg);
  background-position: 100% 50%;
  background-repeat: no-repeat;
  background-size: 20px 10px;
  border: 1px solid #ccc;
  border-radius: 0;
  box-sizing: border-box;
  font-size: 0.75rem;
  margin: 0;
  padding: 6px 24px 6px 5px;
}
.introduction sup,
div.q-block .fieldset .input sup {
  color: #c00;
  line-height: 1;
  margin-right: 0.2em;
  vertical-align: text-top;
}
.introduction sub,
div.q-block .fieldset .input sub {
  color: #c00;
  font-size: 0.75em;
  line-height: 1;
  margin-right: 0.2em;
  vertical-align: text-bottom;
}
div.q-block .fieldset div.introduction {
  border-radius: 0;
  border-width: 0 0 1px;
  margin: 0;
}
/* Hide pulldown arrow for IE */
select::-ms-expand {
  display: none;
}

/* footer block styles */
footer .contact {
  margin: 0.8rem auto;
  max-width: 660px;
}
footer .contact hr {
  border: 0 none transparent;
  border-top: 1px dotted #999;
  height: 0;
}
footer .contact hr:first-of-type {
  border-top: 1px solid #999;
}
footer .contact dl {
  margin: 1em;
}
footer .contact dt b,
footer .contact dt {
  font-size: 0.9rem;
}
footer .contact dd {
  font-size: 0.8rem;
  margin-left: 1em;
}
footer .privacy-block {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 1.5rem 0.5rem;
}
footer .privacy-block > div {
  align-items: center;
  display: flex;
  max-width: 356px;
}
footer .privacy-block > div p {
  font-family: "Yu Gothic", YuGothic, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  margin: 0 0.4em;
}


/* subscribe.htm */
.input .cell {
  display: block;
  flex-grow: 1;
}
.input .cell + .help {
  min-width: 270px;
}
.input .cell.fit input {
  width: 100%;
}
.input .cell.stretch {
  display: flex;
  flex-wrap: nowrap;
}
.input .cell.stretch-label label {
  display: block;
  flex-grow: 1;
  text-align: right;
}
.input .cell.stretch-input input {
  flex-grow: 1;
  width: 10%;
}
.controls .button {
  outline: none;
  transition: all 0.2S linear;
}
.controls .button:hover {
  background-color: #3c6;
}
.controls .button:focus {
  box-shadow: 0 1px 7px 0 rgba(0,0,0,0.6);
}
.controls .button.attention:hover {
  background-color: #fb0;
}
.controls .button.inconspicuous {
  background-color: #9aaa9a;
}
.controls .button.inconspicuous:hover {
  background-color: #c00;
}
.controls #logout {
  margin-right: auto;
}
.controls .wrapper {
  flex-basis: 100%;
  margin: -6px 0;
  text-align: end;
}
.controls #confirm {
  background-color: #36c;
}
.controls #confirm:hover {
  background-color: #f63;
}

/* ----- */
main > * {
  box-sizing: border-box;
  margin: auto;
  max-width: 750px;
}
/* ----- */
main + .help {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: auto;
  max-width: 980px;
}
main + .help p {
  color: #083;
  font-size: 0.8rem;
  line-height: 1.6;
  margin: 0;
}

/*
 * 確認画面
 */
html.confirm div.q-block .fieldset .input .readonly-field.isempty {
  color: #999;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
html.confirm div.q-block .fieldset .input .readonly-field.wrap > * {
  display: block;
}
/* ----- */
html.confirm .q-block {
  border-width: 2px;
  border-radius: 0;
  box-sizing: border-box;
  margin: 0 0 -2px;
}
html.confirm .q-block .label {
  background: rgba(0,0,0,0.1);
  display: block;
  font-size: 0.8rem;
  min-height: initial;
  padding: 0.8em;
}
html.confirm .q-block .label.subtitle {
  background: rgba(0,51,102,0.08);
  border-bottom: 0px solid #69f;
  padding: 0.5em 0.8em;
}
html.confirm .q-block .label b {
  font-family: 'Trebuchet MS', Verdana, sans-serif;
  font-size: 0.9rem;
  margin-right: 0.3em;
}
html.confirm div.q-block .fieldset .label a.revise {
  color: #c00;
  font-size: 0.72rem;
  margin-left: 0.5em;
  text-decoration: none;
  white-space: nowrap;
}
html.confirm div.q-block .fieldset .label a.revise.hidden {
  display: none;
}
html.confirm div.q-block .fieldset .label a.revise:before {
  color: #ccc;
  content: '◀︎';
  margin-right: 0.2em;
  transition: all 0.2s linear;
}
html.confirm div.q-block .fieldset .label a.revise:hover:before {
  color: #f00;
}
html.confirm div.q-block .fieldset .input {
  padding: 1em;
}
html.confirm div.q-block .fieldset .input .readonly-field {
  color: #03c;
  font-size: 0.9rem;
}
html.confirm .q-block.ignore-answer .fieldset .label a.revise {
  display: none;
}
html.confirm .q-block.ignore-answer .fieldset .input {
  background-color: rgba(102,102,102,0.1);
}
html.confirm div.q-block.ignore-answer .fieldset .input .readonly-field.isempty {
  color: #808080;
}
/* ----- */



#fs-F4 .input .cell {
  display: flex;
}
#fs-F4 input[type=button] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: green;
  border: 0 none transparent;
  border-radius: 4px;
  color: #fff;
  font-size: 0.7rem;
  margin: 0 0.4em;
  padding: 0.4em 0.8em;
  vertical-align: top;
}
#fs-F4 input[type=button]:disabled {
  background: silver;
}

.before-lf:before {
  content: '\A';
  white-space: pre;
}

/*
 * 前文
 */
div.introduction {
  background: #ffffe5;
  border: 1px solid #ddddc4;
  border-radius: 8px;
  box-sizing: border-box;
  margin: 1.5rem auto;
  max-width: 750px;
  padding: 1.5rem;
  text-align: justify;
}
div.introduction > *:first-child {
  margin-top: 0;
}
div.introduction > *:last-child {
  margin-bottom: 0;
}
div.introduction ul {
  margin: 1em 0 1em 1.5em;
  padding: 0;
}
div.introduction p,
div.introduction li {
  font-size: 0.9rem;
  line-height: 1.6;
}
div.introduction p {
  margin: 0;
  text-indent: 1em;
}
div.introduction p.no-indent {
  text-indent: 0;
}
div.introduction p.note {
  font-size: 0.8rem;
}
div.introduction li ol {
  margin: 0.5em 0 0.5em 2em;
  padding: 0;
}
div.introduction .focus {
  font-size: larger;
  font-weight: bold;
}
div.introduction ol.annotation {
  counter-reset: number;
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
div.introduction ol.annotation li {
  font-size: 0.8rem
}
div.introduction ol.annotation li:before {
  counter-increment: number;
  content: "※"counter(number)" ";
}
main .overview + div.introduction,
main h2 + div.introduction,
main h3 + div.introduction {
  margin-top: 0;
}
main section h4 {
  font-size: 1rem;
  margin-bottom: 0.5em;
}
main section h5 {
  font-size: 0.9rem;
  margin-bottom: 0;
}
main section p {
  font-size: 0.9rem;
  margin: 0;
  text-indent: 1em;
}
main section dl {
  margin: 0.5em auto;
}
main section dt {
  font-size: 0.9rem;
}
main section dd {
  font-size: 0.9rem;
  margin-left: 1em;
}
main section .image-with-caption {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 1.5em auto;
  max-width: 750px;
}
main section .image-with-caption p {
  text-indent: 0;
}
main section .image-with-caption img {
  max-width: 100%;
}
main section .image-with-caption.with-masonry img {
  height: 187px;
}
main section .image-with-caption .masonry {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 750px;
}
main section .image-with-caption .masonry .masonry-item {
  font-size: 0.75rem;
  text-align: center;
}
main section .image-with-caption .masonry.natural {
  align-items: flex-start;
}
main section .image-with-caption .masonry.natural img {
  height: auto;
}

.note {
  box-sizing: border-box;
  padding: 0 0.5em;
}
.note *:first-child {
  margin-top: 0;
}
.note *:last-child {
  margin-bottom: 0;
}
.note ol {
  margin: 0;
  padding: 0;
}
.note li {
  color: #333;
  font-size: 0.75rem;
  text-align: justify;
}
.note img {
  max-width: 100%;
}

section.mb1 {
  margin-bottom: 1.5rem;
}

div.controls {
  align-items: center;
  flex-wrap: wrap;
}
div.controls hr {
  border: 0 solid #ccc;
  border-top-width: 1px;
  flex-grow: 1;
  height: 0;
  margin: 0 3px;
  padding: 0;
}

div.flex-box-3 {
  display: flex;
  flex-wrap: wrap;
}
div.flex-box-3 label {
  white-space: nowrap;
  min-width: 220px;
}

div.flex-box.with-image {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 1rem;
}
div.flex-box.with-image.center {
  gap: 12px;
  justify-content: center;
}
div.flex-box.with-image ul {
  margin-top: 0;
}
div.flex-box.with-image .image {
  font-size: 0.7rem;
  line-height: 1.2;
  text-align: center;
}
div.flex-box.with-image .image img {
  margin-bottom: 0.3em;
}

#enq2-q10 .input .flex-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
#enq2-q10 .input .flex-box > label {
  width: 30%;
}
#enq2-q10 .input .flex-box > label img {
  max-width: 100%;
}
#enq2-q10 .input .flex-box > br {
  display: none;
}

.why-uses-list {
  padding-left: 0;
}

.fset .set {
  align-items: middle;
  display: flex;
  gap: 4px;
  margin: 4px auto;
  width: 100%;
}
.fset .set + br {
  display: none;
}



@media screen and (max-width: 750px) {
  img {
    max-width: 100% !important;
  }
  main > * {
    min-width: 100%;
  }
  main form > * {
    min-width: 100%;
  }
  main h2, main h3 {
    width: auto;
  }
  div.introduction {
    max-width: 100%;
  }
}


/**
 * Style for mobile devices
 */
@media screen and (max-width: 480px) {
  header h1 {
    font-size: 0.8rem;
  }
  footer .contact dl {
    margin: 0.5em 0;
  }
  footer .contact dd {
    margin-left: 0.5em;
  }
  footer .privacy-block {
    margin: 0.5rem;
  }
  footer .bottom-line {
    flex-direction: column;
    font-size: 0.6rem;
  }

  main h2, main h3 {
    font-size: 0.8rem;
  }
  main section {
    box-sizing: border-box;
    min-width: auto;
    width: 100%;
  }
  main section h4, main section h5,
  main section dd,
  main section dt,
  main section p {
    font-size: 0.8rem;
  }

  main section dd {
    overflow-wrap: break-word;
  }

  div.q-block .fieldset {
    flex-direction: column;
  }
  div.q-block .fieldset .input {
    align-items: flex-start;
    flex-direction: column;
    min-width: auto;
  }
  div.q-block .fieldset .input .help {
    margin: 0.5em 0 0;
  }
  div.q-block .fieldset .input.column > * {
    align-items: flex-start;
    flex-direction: column;
  }
  div.controls .button {
    min-width: 80px;
  }
  /*
  div.controls {
    flex-wrap: wrap;
  }
  */

  div.instruction {
    margin: 0.5rem auto;
    padding: 1rem 0.8rem;
  }

  #fs-F5 .input .cell.fit,
  #fs-F3 .input .cell.fit {
    width: 100%;
  }
  #fs-F5 .input .cell.fit input,
  #fs-F3 .input .cell.fit input {
    max-width: 360px;
  }

  div.introduction {
    padding: 0.8em;
  }
  div.introduction p {
    font-size: 0.8rem;
  }

  html.question-confirm .instruction {
    font-size: 0.8rem;
    margin: 0;
    padding: 0;
  }
  html.question-confirm main {
    margin-top: 0;
  }

  .image-text-container.center-to-mobile {
    flex-wrap: wrap;
    justify-content: center;
  }
  .image-text-container.wrap-to-mobile {
    flex-wrap: wrap;
  }
}

.wrap-url {
  word-break: break-all;
}