@charset "utf-8";

button.auto-input {
  border: none;
  cursor: pointer;
  outline: none;
  appearance: none;
  
  display: inline-block;
  background-color: #00CCFF;
  font-size: 18px;
  color: #ffffff;
}

body[data-page-name=input] #ttl_area .inner ul.subttl { display: none; }

button.save {
  position: absolute;
  top: 0;
  left: calc((960px - 350px)/2 - 114px - 30px);
  width: 114px;
  border-radius: 7px;
  color: #fff;
  background: #BCBDBD;
  text-decoration: none;
  padding: 10px;
  cursor: pointer;
  border: none;
}
button.save:hover {
  background: #9f9f9f;
}


/*************************************************************************
 *
 * 「見える化」欄
 *
 *************************************************************************/
.formbox.config {}
  .formbox.config label.title {
    display: inline-block;
    width: 18em; }
  .formbox.config label.text {
    font-size: 12px; }
    .formbox.config label.text input {
      margin-left: 4px;
      font-size: 12px;
      width: auto; }
@media screen and (max-width:480px){
  .formbox.config label.title { display: block; width: auto; }
  .formbox.config label.text { display: block; text-align: right; }
}

/*************************************************************************
 *
 * 注記
 *
 *************************************************************************/
.box ul.note-list { padding: 0; margin: 0; }
.box ul.note-list > li { float: none; font-weight: normal; font-size: 14px; line-height: 24px; }
.box ul.note-list > li:nth-child(odd) { width: auto; }
.box ul.note-list > li:nth-child(oven) { width: auto; }
.box ul.note-list {}
  .box ul.note-list > li {
    padding-left: 1.2em; }
   .box ul.note-list > li::before {
     content: "※";
     display: inline-block;
     width: 1.2em;
     margin-left: -1.2em; }
  
  
/***********************************************************************************
 *
 * ダイアログ
 *
 **********************************************************************************/
.dialog-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center; }
  .dialog-background > .dialog {
    position: relative;
    box-sizing: border-box;
    max-width: 360px;
    width: 360px;
    background: #fff;
    border: 1px solid #000;
    padding: 1em; }
    .dialog-background > .dialog h3 {
      margin: 0 0 0.5em; }
    .dialog-background > .dialog button {
      background: transparent;
      border: none;
      cursor: pointer;
      outline: none;
      padding: 0;
      appearance: none; }
    .dialog-background > .dialog button.close {
      position: absolute;
      top: 1em;
      right: 1em; }
    .dialog-background > .dialog button.button {
      position: relative;
      font-size: 14px;
      line-height: 1;
      padding: 1em 2em;
      padding-left: calc(0.5em + 3em);
      border-radius: 0.5em; }
      .dialog-background > .dialog button.button:hover {
        opacity: 0.8; }
      .dialog-background > .dialog button.button > i {
        position: absolute;
        left: 1em; }
      .dialog-background > .dialog button.button.restore {
        background: #106ab6;
        color: #fff; }
      .dialog-background > .dialog button.button.restart {
        background: #ccc;
        color: #333; }
    .dialog-background > .dialog .buttons {
      margin-top: 0.5em;
      display: flex;
      flex-direction: column;
      align-items: stretch; }
      .dialog-background > .dialog .buttons .button { width: 100%; }
      
@media screen and (max-width:480px){
  .submit_btn { margin-top: calc(49px + 16px); }
  button.save {
    top: 20px;
    left: 50%;
    margin-left: calc(-114px/2);
    padding-top: 5px;
  }
  .dialog-background > .dialog { width: 96%; }
}

/***********************************************************************************
 *
 * ヘルプダイアログ
 *
 ***********************************************************************************/
.dialog-background.help-dialog {
  background: rgba(0, 0, 0, 0.6);
  align-items: start; }
  .help-dialog:not(.shown) { display: none; }
  .help-dialog > .dialog {
    margin-top: 3%;
    max-width: none;
    width: 640px;
    font-size: 14px;
    padding: 0; }
    .help-dialog > .dialog h3 {
      margin: 0;
      padding: 0.6em 1em;
      background-color: #cccccc; }
    .help-dialog > .dialog button.close {
      top: 0.6em;
      font-size: 100%; }
    .help-dialog > .dialog > .body {
      padding: 0.3em 1em;
      line-height: 1.6; }
      .help-dialog > .dialog > .body .text-and-figures {
        display: flex; }
        .help-dialog > .dialog > .body .text-and-figures > .text {
          flex: 1; }
        .help-dialog > .dialog > .body .text-and-figures > .figures {
          display: flex;
          flex-direction: column;
          align-items: end;
          margin-left: 1em; }
      .help-dialog > .dialog > .body figure {
        margin: 1em;
        display: flex;
        flex-direction: column;
        align-items: center; }
        .help-dialog > .dialog > .body  figure > figcaption { text-align: center; }
          .help-dialog > .dialog > .body figure > figcaption.nowrap { white-space: nowrap; }
      .help-dialog > .dialog > .body .row {
        display: flex;
        align-items: center; }
      .help-dialog > .dialog > .body p {
        font-size: 100%;
        margin: 0 0 0.3em; }
      .help-dialog > .dialog > .body h4 {
        font-size: 100%;
        line-height: 1;
        margin: 0.6em 0 0.3em; }
        .help-dialog > .dialog > .body h4::before { content: "＜"; }
        .help-dialog > .dialog > .body h4::after{ content: "＞"; }
      .help-dialog > .dialog > .body ul {
        margin: 0 0 0 1em; }
        .help-dialog > .dialog > .body ul > li {
          padding-left: 1.2em; }
          .help-dialog > .dialog > .body ul > li::before {
            content: "※";
            display: inline-block;
            width: 1.2em;
            margin-left: -1.2em; }
@media screen and (max-width:480px){
.help-dialog > .dialog { width: 96%; }
.help-dialog > .dialog > .body {
  box-sizing: border-box;
  max-height: calc(100vh - 3vw*2 - 44px);
  overflow-y: auto; }
.help-dialog > .dialog > .body .text-and-figures { flex-direction: column; }
.help-dialog > .dialog > .body .text-and-figures > .figures { align-items: center; margin-left:0; }
.help-dialog > .dialog > .body .row { flex-wrap: wrap; }
}

.config-notice {
  color: #f00;
  margin-top: 7px; }