@charset "UTF-8";

@font-face {
  font-family: "Noto Sans JP";
  src:
    url('font/NotoSansJP-VariableFont_wght.ttf') format('truetype');
}

body, button, select, input, textarea {
  font-family: "ヒラギノ角ゴシック","Hiragino Sans",
               "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",
               "メイリオ",Meiryo,
               "游ゴシック体","Yu Gothic","YuGothic",
               sans-serif;
}

body {
  background: #F9FDFF;
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
  color: #111;
}
img {
  vertical-align: top;
}
p {
  padding: 0;
  margin: 0;
}
a {
  color: #005075;
}
a:hover {
  color: #009FE8;
}
input, select, textarea {
  box-sizing: border-box;
}
textarea {
  resize: none;
  vertical-align: top;
  flex: 1;
  width: 100%;
}

header {
  background: url(images/header-logo.png) no-repeat;
  background-size: 100%;
  width: 980px;
  height: 64px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}
header h1 {
    margin: 0;
    padding: 0;
    font-size: 1.3em;
    color: #009FE8;
    padding: 30px 0 40px;
}
header h2.subtitle {
  font-size: 0.8rem;
  font-weight: normal;
  margin-top: -0.67em;
  text-align: right;
}
header .hint {
  color: #808080;
  font-size: 0.8rem;
  text-align: center;
}

main {
  margin: 2em auto;
  max-width: 980px;
}
main .overview {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin:1em;
}
main .overview p {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}
main .end-message p {
  text-align: center;
}
main form {
  align-items: center;
  display: flex;
  flex-direction: column;
}

div.q-block {
  border: 2px solid #000;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: auto auto 1rem;
  z-index: 1;
}
div.q-block .fieldset .label {
  border-bottom: 1px solid #000;
  display: flex;
  margin: 0;
  min-height: 48px;
}
div.q-block .fieldset .label > .question-number {
  align-items: center;
  border-right: 1px solid #000;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  font-family: 'Trebuchet MS', Verdana, sans-serif;
  font-size: 0.9rem;
  justify-content: center;
  padding: 0.5em;
  white-space: nowrap;
}
div.q-block .fieldset .label > .question {
  align-items: center;
  display: inline-flex;
  flex-grow: 1;
  font-size: 0.9rem;
  padding: 0.5em 0.8em;
}
div.q-block .subset .label > .question {
  font-size: 0.9rem;
  padding: 0.5em 0.8em;
}

div.q-block .subset .input,
div.q-block .fieldset .input {
  line-height: 1.5;
  margin: 0;
  padding: 0.8em;
}
div.q-block .subset .input {
  padding-top: 0;
}
div.q-block .subset .input label,
div.q-block .fieldset .input label {
  font-size: 0.8rem;
  margin-right: 0.8em;
  margin-bottom: 0.25em;
}
div.q-block .subset .input .freeanswer,
div.q-block .fieldset .input .freeanswer {
  font-size: 0.8rem;
}
div.q-block .subset .input .sub-question .label,
div.q-block .fieldset .input .sub-question .label {
  border-bottom: 0 none transparent;
  display: inline;
  font-size: 0.8rem;
}
div.q-block .fieldset .input.matrix {
  padding: 0;
}
div.q-block .matrix table {
  border-collapse: collapse;
  margin: -1px;
}
div.q-block .matrix th,
div.q-block .matrix td {
  border: 1px solid #000;
  font-size: 0.8rem;
  font-weight: normal;
  padding: 0.5em 0.8em;
  text-align: center;
}
div.q-block .matrix th {
  text-align: left;
}
div.q-block .matrix .sub-question td {
  text-align: start;
}
div.q-block .matrix .sub-question td .input {
  padding: 0;
}

div.controls {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  margin: 2rem auto 0;
}
div.controls .button {
  border: 0 none transparent;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  font-size: 0.9rem;
  margin: 0 3px;
  min-width: 120px;
  outline: none;
  padding: 0.5em 0.8em;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
}
div.controls button {
  height: 40px;
/*  border-radius: 4px;*/
}



/* 設問群のタイトル色 */
main .overview p {
  color: #039;
}
/* 設問の枠線色 */
div.q-block .fieldset .label > .question-number,
div.q-block .fieldset .label,
div.q-block {
  border-color: #36c;
}
/* 設問番号の背景色 */
div.q-block .fieldset .label > .question-number {
  background-color: #9cf;
}
/* 回答形式の文字色 */
div.q-block .subset .label > .question .explanation,
div.q-block .fieldset .label > .question .explanation {
  color: #f39;
}
/* マトリクスの罫線色 */
div.q-block .matrix th,
div.q-block .matrix td {
  border-color: #36c;
}
/* ボタンの色 */
div.controls .button {
  background-color: #005075;
  color: #fff;
}
div.controls .button:hover {
  background-color: #009FE8;
  color: #fff;
}

/*
html.contact header {
  box-sizing: border-box;
  margin: auto;
  max-width: 980px;
}
html.contact header h1 {
  background-color: transparent;
  color: #000;
  font-size: 1.3rem;
  padding: 0.4em;
  text-align: center;
}
html.contact main {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  margin: 2em auto;
  max-width: 980px;
}
html.contact header {
	background: url(images/obi-design2.png) no-repeat 50% 0;
	width: 980px;
	margin-right: auto;
	margin-left: auto;
  padding-top: 1px;
	position: relative;
}
html.contact header h1 {
  background-color: transparent;
  font-size: 1.3em;
  font-weight: bold;
  margin: 32px auto;
  padding: 0;
  text-align: center;
  white-space: nowrap;
}
html.contact h2 {
  background-color: #999;
  box-sizing: border-box;
  color: #fff;
  margin: 1.5em auto;
  padding: 0.3em 0.5em;
  text-align: center;
  width: 750px;
}
html.contact main form > * {
  box-sizing: border-box;
  max-width: 750px;
  width: auto;
}
html.contact-sheet main form .fieldset {
  align-items: start;
  box-sizing: border-box;
  display: flex;
  margin: 0.5em auto;
  width: 750px;
}
html.contact-sheet main form .fieldset > * {
  box-sizing: border-box;
  flex-grow: 1;
  width: auto;
}
html.contact-sheet main form .fieldset label {
  border: 1px solid transparent;
  display: inline-block;
  flex-grow: unset;
  line-height: normal;
  margin-top: 0;
  padding: 0.5em;
  width: 140px;
}
html.contact-sheet main form .fieldset textarea,
html.contact-sheet main form .fieldset select,
html.contact-sheet main form .fieldset input[type=email],
html.contact-sheet main form .fieldset input[type=text] {
  appearance: none;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0;
  font-size: 14px;
  outline: none;
  padding: 0.5em;
}
html.contact-sheet main form .fieldset #body {
  height: 20em;
  resize: none;
}
html.contact-sheet div.controls {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  margin: 2rem auto 2.5rem;
}
html.contact-sheet div.controls button,
html.contact-sheet div.controls .button {
  background-color: #999;
  border: 0 none transparent;
  border-radius: 4px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 0.9rem;
  margin: 0 3px;
  min-width: 120px;
  outline: none;
  padding: 0.5em 0.8em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
html.contact-sheet div.controls button:hover,
html.contact-sheet div.controls .button:hover {
  background-color: #36c;
}
html.contact-sent main form > * {
  min-width: auto;
}
*/

div.controls .button.align-left {
  margin-right: auto;
}
.kasen{
  background: #FAFF00;
}
.para-block {
  display: flex;
  align-items: flex-start;
  gap: 38px;
}
.read-txt {
  font-size: 18px;
  font-weight: bold;
  color: #ff3030;
}
.caution {
  background: #FFFCFC;
  border: 1px solid #FF3030;
  padding: 20px;
  flex: 1;
}
.caution h2 {
  font-size: 18px;
  color: #009fe8;
  padding: 0;
  margin: 0 0 20px;
}
.caution h3 {
  font-size: 15px;
  color: #009fe8;
  padding: 0;
  margin: 0;
}
.caution .container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.login-block {
  background: #fff;
  border: 1px solid #009FE8;
  padding: 20px;
  width: 340px;
}
.fieldset {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
}
.fieldset input {
  border-radius: 2px;
  padding: 10px;
  border: 1px solid #ccc;
  min-width: 220px;
}
.fieldset label {
  font-size: 14px;
  margin-top: 10px;
}
.fieldset label.w140 {
  width: 140px;
}
.complete {
  text-align: center;
}
.flex-left {
  justify-content: flex-start!important;
}
.attention span {
  font-size: 13px;
  color: #FF3030;
}
.font13 {
  font-size: 1.3rem;
}
.sheet {
  align-items: flex-start;
}
.sheet .fieldset{
  width: 100%;
  margin: 10px auto;
}
.sheet input,
.sheet select{
  /* width: 100%; */
  flex: 1;
}
.sheet .controls{
  margin: 2rem 0 0 auto;
}
.contact .title {
  color: #009FE8;
}
.logout {
  background: #A4B6BE;
  border: 0 none transparent;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  color: #fff;
  display: inline-block;
  font-size: 0.9rem;
  margin: 0 3px;
  min-width: 120px;
  outline: none;
  padding: 0.5em 0.8em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.logout:hover {
  background: #87959C;
}
.underline {
  text-decoration: underline;
}
.company_id input {
  width: 220px!important;
  flex: none;
}

.container{/* ここからmovie用 */
  display: flex;
  flex-direction: column;
  align-items: center;      /* 中央寄せ（linkviewのmax-widthに合わせる） */
}
.linkview {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2列配置 */
  gap: 20px;
  max-width: 900px;
  width: 100%;
}

.linkcard {
  display: block;  /* aタグをカード全体に広げる */
  border: 2px solid #1E90FF;
  border-radius: 8px;
  padding: 16px;
  background: #F0F8FF;
  color: #104E8B;
  text-decoration: none; /* 下線を消す */
  transition: 0.3s;
}

.linkcard:hover {
  background: #E6F0FF;
  border-color: #4682B4;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.linkcard h3 {
  margin: 0 0 8px;
  font-size: 14px;
  color: #104E8B;
}

.linkcard h4 {
  margin: 0 0 8px;
  font-size: 11.5px;
  color: #104E8B;
}

.linkcard p {
  margin: 0;
  font-size: 13px;
  color: #0066CC;
}

/* 画面が狭いときは1列にする */
@media (max-width: 680px) {
  .linkview {
    grid-template-columns: 1fr;
  }
}