@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');
* {
  margin:0px;
  padding:0px;
}

html {
  scroll-behavior: smooth;
  color:#2F3941;
  background-color:#FFFFFF;
}

html[lang="ja"] {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

ul {
  list-style-type:none;
}

button, div#new-request input[type=submit] {
  border:solid 1px rgba(197, 225, 250, 1);
  background-color:rgba(197, 225, 250, 1);
  color:rgba(0, 0, 0, 1);
  padding:8px 16px;
  margin:8px;
  min-width:80px;
  border-radius:4px;
  cursor:pointer;
}

a {
  color:#1F73B7;
}

header {
  display:flex;
  flex-flow:row nowrap;
}

header div#logo a img {
  height:32px;
  margin: 16px;
}

header div.spacer {
  flex-grow:1;
}

header ul#header-menu, footer ul {
  display:flex;
  justify-content:flex-start;
}

header #header-menu li, footer ul li {
  position: relative;
  padding: 8px 16px;
  flex-shrink:0;
  cursor:pointer;
}

header .header-sub-menu {
  position: absolute;
  margin-left: -6px;
  margin-right: 4px;
  right: 0px;
  white-space: nowrap;
  padding: 0;
  display: none;
  background: #FFFFFF;
  border:solid 1px #888888;
}

header .header-sub-menu li a {
  padding: 5px;
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: -5px;
  display: block;
  text-decoration: none;
}

header .header-sub-menu li a:hover {
  background: #FFFFFF;
}

#container {
  display:flex;
  padding: 0px 8px;
}

@media screen and (max-width: 767px) {
  #container {
    flex-flow:column nowrap;
  }
}

@media screen and (min-width: 768px) {
  #container {
    flex-flow:row nowrap;
    padding: 0px 8px;
  }
}

ul#menu {
  display:flex;
  flex-flow:column nowrap;
  flex-shrink:0;
  border:solid 1px #dddddd;
  border-radius:4px;
}
@media screen and (max-width: 767px) {
  ul#menu {
    margin:0px 8px 16px;
  }
}
@media screen and (min-width: 768px) {
  ul#menu {
    margin:0px 8px auto;
  }
}
ul#menu li {
  margin:0px;
  padding:8px 12px;
}

ul#qa-list {
  flex-grow:1;
  margin:0px 8px auto;
}

ul#qa-list li {
  margin-bottom:16px;
}

ul#qa-list li h4 {
  color:rgba(0, 0, 0, 1);
  background-color:rgba(197, 225, 250, 1);
  font-size:14pt;
  padding:8px 8px;
  border-radius: 4px;
}

ul#qa-list li h5.question {
  color:rgba(0, 0, 0, 0.85);
  background-color:rgba(254, 254, 254, 1);
  margin:8px;
  padding:4px 8px;
  font-size: 12pt;
  text-decoration:underline;
  cursor:pointer;
}
ul#qa-list li div.answer {
  padding:8px 8px;
  word-break: break-all;
}

div#new-request {
  flex-grow:1;
  margin:0px 8px auto;
}

div#new-request div.required label:before {
   content: "■";
}

div#new-request div.form-field label {
  background-color:rgba(197, 225, 250, 1);
  color:rgba(0, 0, 0, 1);
  padding:4px;
  margin:4px;
  vertical-align:top;
}

@media screen and (max-width: 767px) {
  div#new-request div.form-field label {
    display:block;
    width:auto;
  }
}

@media screen and (min-width: 768px) {
  div#new-request div.form-field label {
    display:inline-block;
    width:250px;
  }
}
div#new-request div.form-field input,
div#new-request div.form-field select,  div#new-request div.form-field textarea,
div#new-request div.form-field #upload-dropzone {
  border:solid 1px #dddddd;
  border-radius:4px;
  margin:8px;
  max-width:unset !important;
  padding:4px;
}

div#new-request div.form-field input,
div#new-request div.form-field select, div#new-request div.form-field textarea {
}

div#new-request div.form-field textarea {
  height: 120px;
}
div#new-request div.form-field #upload-dropzone {
  display:inline-block;
}

@media screen and (max-width: 767px) {
  div#new-request div.form-field input#request_subject,
  div#new-request div.form-field textarea,
  div#new-request div.form-field #upload-dropzone {
    width:calc(100% - 16px);
    box-sizing: border-box;
  }
}
@media screen and (min-width: 768px) {
  div#new-request div.form-field input#request_subject,
  div#new-request div.form-field textarea,
  div#new-request div.form-field #upload-dropzone {
    width: 600px;
  }
}

div#new-request div.form-field label[for=request-attachments],
div#new-request div.form-field div#upload-dropzone {
  display:none;
}

div#new-request input[type=submit] {
  margin:8px auto;
}

div.answer {
  display:none;
  margin:0px 0px 8px 24px;
  border:solid 1px #888888;
  padding:8px 8px;
  border-radius:4px;
}

footer {
  display:flex;
  flex-flow:row nowrap;
}