/*!
Module Accumulation function
Theme Name: QINeS
Author: CNX E.Takahashi & T.Furui
Version: 3.2.0


/* Fonts
/* -------------------------------------------------------------------------- */
@font-face {
  font-family: Poppins;
  src: url('assets/fonts/Poppins/Poppins-Regular.html');
  font-style: normal;
  font-weight: 400;
}

body {
  font-family: Meiryo, Poppins, 'Helvetica Neue', 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'MS PGothic', 'Segoe UI Web Regular', 'Segoe UI', 'Segoe WP', Arial, sans-serif;
}
/*logout */ 
.accform-sub-title.desk {
  font-size: .875rem;
  position: absolute;
  right: 90px;
  bottom: 0;
}

/* 注意書き */
.notice{
  font-weight: bold;
  text-decoration: underline;
}
/* 規約確認チェック用 */
.checkbox_hidden {
  display: none;
}

/* 同意のチェックボックス*/
.agree_chk {
  margin:0 0 10px 23px;
}
/* ラベルのスタイル　*/
.agree_chk label {
  padding-left:23px;/* ラベルの位置 */
  font-size:20px;
  line-height:23px;
  display:inline-block;
  cursor:pointer;
  position:relative;
}

/* ボックスのスタイル */
.agree_chk label:before {
  content:'';
  width:23px;
  height:23px;
  display:inline-block;
  position:absolute;
  left:0;
  background-color:ghostwhite;
  border-radius:3px 3px 3px 3px;
  border: 3px solid #1a2792;
}
/* 元のチェックボックスを表示しない */
.agree_chk input[type=checkbox] {
  display:none;
}
/* チェックした時のスタイル */
.agree_chk input[type=checkbox]:checked + label:before {
  content:'\2713';
  font-size:23px;
  color:ghostwhite;
  background-color:#1a2792;
}
/* 不活性字のチェックボックス */
.agree_chk input[type=checkbox]:disabled+ label:before {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color:ghostwhite;
  border: 2px solid #e6e9e9;
}

/* メニュー画面 */
.menu_ul {
  counter-reset: list;
  list-style: none;
  padding: 1;
  width:350px;
}
.menu_ul {
  margin: 0 0 0 35px;
  width:315px;
}
 
.menu_ul a{
  position: relative;
  display: block;
  text-decoration: none;
  padding: 0px 0px 10px 0px;
  color: #1a2792;
}
  
.menu_ul a:before{
  position: absolute;   
  left: -27px;
  top: 50%;
  height: 20px;
  width: 20px;
  margin-top: -1em;
  background: #1a2792;
}
 
.menu_ul a:after{
  content: '';
  top: 12%;
  position: absolute;
  left: -27px;
  border: 6px solid #1a2792;
}
.menu_ul a:hover:after{
  border-left-color: #fff;
}

/* OS選択画面 */
.manufacturer{
width: 400px;;
}

.select_os{
  width: 100%;
  border-collapse:separate;
  border-spacing: 0;
  border-radius: 5px;
  border: 1px solid #3c6690;
  text-align: left;
}
.select_os th{
  color:white;
  background: #1a2792;
  padding: 3px 0;
}
.select_os td{
  border-bottom: 1px solid #3c6690;
  margin:5px;
}

.select_os tr:nth-child(2n+2) td {
  background-color:#1a27920d
}

.select_os tr:hover td {
  background-color: gold;
}

/* ラジオボタン */
.radiobtn label {
  position: relative;
  cursor: pointer;
  padding-left: 30px;
  margin: 5px;
}


.radiobtn label::after {
  content: "";
  position: absolute;
  left: 15px; /* チェックの位置 */
  top: -5px; /* チェックの位置 */
  width: 6px; /* チェックの大きさ */
  height: 10px; /* チェックの大きさ */
  border: solid #1a2792;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  opacity: 0; /* 透明にしておく */
}

.radiobtn input:checked + label::after {
  opacity: 1;
}

.visually-hidden {
  position: absolute;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  overflow: hidden;
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
}

input[type=radio] {
  display: none; 
}

.radio {
  opacity: 0;
  width: 0;
  margin: 0;
}

/* モジュール選択画面 */
.select-now{
  background-color:rgba(232, 233, 244, 1);
}
.disp_flex{
  display: flex;
  font-size: 0.9rem;
}

.res{
  width: 100%;
  border-bottom: 1px solid #1a2792;
  font-size: larger;
  position: relative;
  background-color:rgba(232, 233, 244, 1);
  padding: 10px;
}
.res-id{
  left: 0;
}
#res-money{
  position: absolute;
  right: 15px;
}
  
/* モジュール選択エリア */
.grid-container {
  display: -ms-grid;
  display: grid;
  position: relative;
  max-width: 1080px;
  max-height: 753px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  color: #efb544;
  background-image: url("/wp-content/themes/qines/assets/images/mypage/cs.png");
  background-repeat:no-repeat;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-size: cover;
}

.logo{
  position: absolute;
  width: 98.5%;
  height:93%;
  background-image: url("/wp-content/themes/qines/assets/images/mypage/GWQINeS_logo.png");
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: bottom;
  /* background-attachment:fixed; */
}
@media (max-width: 1200px) {
  .logo{
    display: none;    
  }
}
.module {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 0.1fr 0.9fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
  -ms-grid-rows: 0fr 0fr 0.1fr 0.1fr 0.4fr 0.4fr 0.3fr 0.2fr 0.2fr; 
  grid-template-columns: 0.1fr 0.9fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
  grid-template-rows: 0fr 0fr 1fr 0.5fr 0.3fr  0.2fr 0.5fr 0.1fr 0fr;
  min-height: 650px;
  min-width: 1080px;
  background-repeat:no-repeat;
  background-position: bottom ,right;
  grid-template-areas:
  "APP APP APP APP APP APP APP APP APP APP APP APP APP APP other"
  "RTE RTE RTE RTE RTE RTE RTE RTE RTE RTE RTE RTE RTE RTE other"
  "OS OS SS MS SeC Diag Com Com Com Com OBC IO IO LIB other"
  "OS OS SS MS SeC Diag CAN LIN Eth Eth OBC IO IO LIB other"
  "OS OS SS MS SeC Diag CAN Fr Eth Eth OBC IO IO LIB other"
  "OS OS Moni MS SeC Diag CAN Fr Eth Eth OBC IO IO LIB other"
  "OS OS Moni MS SeC Diag CAN Fr Eth Eth OBC IO IO LIB other"
  "OS OS Cali MS SeC Diag CAN Fr Eth Eth OBC IO IO LIB other"
  "OS OS MCAL MCAL MCAL MCAL MCAL MCAL MCAL MCAL MCAL MCAL MCAL LIB other"
  "MCON MCON MCON MCON MCON MCON MCON MCON MCON MCON MCON MCON MCON MCON MCON";
}


.Application-Layer {
  -ms-grid-row:3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 14;
  grid-area: APP;
  background-color: rgba(66, 66, 66, 0.8);
}

.Runtime-Environment {
  -ms-grid-row: 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 14;
  grid-area: RTE;
  background-color: rgba(4, 21, 73, 0.8);
}

.RTE {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 4fr;
  grid-template-rows: 0fr;
  -ms-grid-columns: 1fr 1fr 9fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 9fr 1fr 1fr;
}

.RTE > *:nth-child(1) {
  -ms-grid-row: 4;
  -ms-grid-column: 1;
}

.RTE > *:nth-child(2) {
  -ms-grid-row: 4;
  -ms-grid-column: 2;
}

.RTE > *:nth-child(3) {
  -ms-grid-row: 4;
  -ms-grid-column: 3;
}

.RTE > *:nth-child(4) {
  -ms-grid-row: 4;
  -ms-grid-column: 4;
}

.RTE > *:nth-child(5) {
  -ms-grid-row:4;
  -ms-grid-column: 5;
}

.Microcontroller {
  -ms-grid-row: 18;
  -ms-grid-column: 1;
  -ms-grid-column-span: 15;
  grid-area: MCON;
 background-color: rgba(0, 0, 0, 0.8);
}

.Lib {
  -ms-grid-row: 5;
  -ms-grid-row-span: 10;
  -ms-grid-column: 14;
  grid-area: LIB;
  background-color: rgba(67, 76, 130, 0.8);
  border: 0.5px solid rgba(218, 159, 105, 0.3);
}

.other {
  -ms-grid-row: 3;
  -ms-grid-row-span: 13;
  -ms-grid-column: 15;
  grid-area: other;
  background-color: rgba(119, 138, 170, 0.8);
  border: 0.5px solid rgba(218, 159, 105, 0.3);
}
.module #category {
  vertical-align: top;
  width: 100%;
}

.OS {
  -ms-grid-row: 5;
  -ms-grid-row-span: 10;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: OS;
  border: 0.5px solid rgba(218, 159, 105, 0.2);
}

.SS {
  -ms-grid-row: 5;
  -ms-grid-row-span: 3;
  -ms-grid-column: 3;
  grid-area: SS;
  border: 0.5px solid rgba(218, 159, 105, 0.2);
}

.Moni {
  -ms-grid-row: 8;
  -ms-grid-column: 3;
  grid-area: Moni;
  border: 0.5px solid rgba(218, 159, 105, 0.2);
}

.Cali {
  -ms-grid-row: 9;
  -ms-grid-column: 3;
  grid-area: Cali;
  border: 0.5px solid rgba(218, 159, 105, 0.2);
}

.MCAL {
  -ms-grid-row: 11;
  -ms-grid-column: 3;
  -ms-grid-column-span: 11;
  -ms-grid-row-span: 4;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  -ms-grid-rows: 1fr 0.8fr 0.8fr 0.8fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 0fr 0fr 0fr 0fr;
  gap: 0px 0px;
  grid-area: MCAL;
  border: 0.5px solid rgba(218, 159, 105, 0.3);
}

.MCAL > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 11;
}

.MCAL > *:nth-child(2) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}

.MCAL > *:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

.MCAL > *:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
}

.MCAL > *:nth-child(5) {
  -ms-grid-row: 2;
  -ms-grid-column: 4;
}

.MCAL > *:nth-child(6) {
  -ms-grid-row: 2;
  -ms-grid-column: 5;
}

.MCAL > *:nth-child(7) {
  -ms-grid-row: 2;
  -ms-grid-column: 6;
}

.MCAL > *:nth-child(8) {
  -ms-grid-row: 2;
  -ms-grid-column: 7;
}

.MCAL > *:nth-child(9) {
  -ms-grid-row: 2;
  -ms-grid-column: 8;
}

.MCAL > *:nth-child(10) {
  -ms-grid-row: 2;
  -ms-grid-column: 9;
}

.MCAL > *:nth-child(11) {
  -ms-grid-row: 2;
  -ms-grid-column: 10;
}

.MCAL > *:nth-child(12) {
  -ms-grid-row: 2;
  -ms-grid-column: 11;
}

.MCAL > *:nth-child(13) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

.MCAL > *:nth-child(14) {
  -ms-grid-row: 3;
  -ms-grid-column: 2;
}

.MCAL > *:nth-child(15) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

.MCAL > *:nth-child(16) {
  -ms-grid-row: 3;
  -ms-grid-column: 4;
}

.MCAL > *:nth-child(17) {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}

.MCAL > *:nth-child(18) {
  -ms-grid-row: 3;
  -ms-grid-column: 6;
}

.MCAL > *:nth-child(19) {
  -ms-grid-row: 3;
  -ms-grid-column: 7;
}

.MCAL > *:nth-child(20) {
  -ms-grid-row: 3;
  -ms-grid-column: 8;
}

.MCAL > *:nth-child(21) {
  -ms-grid-row: 3;
  -ms-grid-column: 9;
}

.MCAL > *:nth-child(22) {
  -ms-grid-row: 3;
  -ms-grid-column: 10;
}

.MCAL > *:nth-child(23) {
  -ms-grid-row: 3;
  -ms-grid-column: 11;
}
.MCAL > *:nth-child(24) {
  -ms-grid-row: 4;
  -ms-grid-column: 1;
}

.MCAL > *:nth-child(25) {
  -ms-grid-row: 4;
  -ms-grid-column: 2;
}

.MCAL > *:nth-child(26) {
  -ms-grid-row: 4;
  -ms-grid-column: 3;
}

.MCAL > *:nth-child(27) {
  -ms-grid-row: 4;
  -ms-grid-column: 4;
}

.MCAL > *:nth-child(28) {
  -ms-grid-row: 4;
  -ms-grid-column: 5;
}

.MCAL > *:nth-child(29) {
  -ms-grid-row: 4;
  -ms-grid-column: 6;
}

.MCAL > *:nth-child(30) {
  -ms-grid-row: 4;
  -ms-grid-column: 7;
}

.MCAL > *:nth-child(31) {
  -ms-grid-row: 4;
  -ms-grid-column: 8;
}

.MCAL > *:nth-child(32) {
  -ms-grid-row: 4;
  -ms-grid-column: 9;
}

.MCAL > *:nth-child(33) {
  -ms-grid-row: 4;
  -ms-grid-column: 10;
}

.MCAL > *:nth-child(34) {
  -ms-grid-row: 4;
  -ms-grid-column: 11;
}


.mcal_cate {
  -ms-grid-row: 10;
  -ms-grid-column: 1;
  -ms-grid-column-span: 11;
  grid-area: 1 / 1 / 1 / 12;
}

.MS {
  -ms-grid-row: 5;
  -ms-grid-row-span: 5;
  -ms-grid-column: 4;
  grid-area: MS;
  border: 0.5px solid rgba(218, 159, 105, 0.2);
}

.Sec {
  -ms-grid-row: 5;
  -ms-grid-row-span: 5;
  -ms-grid-column: 5;
  grid-area: SeC;
  border: 0.5px solid rgba(218, 159, 105, 0.2);
}

.Diag {
  -ms-grid-row: 5;
  -ms-grid-row-span: 5;
  -ms-grid-column: 6;
  grid-area: Diag;
  border: 0.5px solid rgba(218, 159, 105, 0.2);
}

.Can {
  -ms-grid-row: 6;
  -ms-grid-row-span: 4;
  -ms-grid-column: 7;
  border-block-color: inherit;
  grid-area: CAN;
  border: 0.5px solid rgba(218, 159, 105, 0.2);
}

.Lin {
  -ms-grid-row: 6;
  -ms-grid-row-span: 2;
  -ms-grid-column: 8;
  grid-area: LIN;
  border: 0.5px solid rgba(218, 159, 105, 0.2);
}

.Fr {
  -ms-grid-row: 7;
  -ms-grid-row-span:4;
  -ms-grid-column: 8;
  grid-area: Fr;
  border: 0.5px solid rgba(218, 159, 105, 0.2);
}

.Eth {
  -ms-grid-row: 6;
  -ms-grid-row-span: 4;
  -ms-grid-column: 9;
  -ms-grid-column-span: 2;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: 1fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr auto;
  grid-template-rows: 0fr 0fr 0fr 0fr 0fr 0fr 0fr;
  gap: 0px 0px;
  grid-area: Eth;
  border: 0.5px solid rgba(218, 159, 105, 0.2);
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

.Eth > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
}

.Eth > *:nth-child(2) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}

.Eth > *:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

.Eth > *:nth-child(4) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

.Eth > *:nth-child(5) {
  -ms-grid-row: 3;
  -ms-grid-column: 2;
}

.Eth > *:nth-child(6) {
  -ms-grid-row: 4;
  -ms-grid-column: 1;
}

.Eth > *:nth-child(7) {
  -ms-grid-row: 4;
  -ms-grid-column: 2;
}

.Eth > *:nth-child(8) {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
}

.Eth > *:nth-child(9) {
  -ms-grid-row: 5;
  -ms-grid-column: 2;
}

.Eth > *:nth-child(10) {
  -ms-grid-row: 6;
  -ms-grid-column: 1;
}

.Eth > *:nth-child(11) {
  -ms-grid-row: 6;
  -ms-grid-column: 2;
}

.Eth > *:nth-child(12) {
  -ms-grid-row: 7;
  -ms-grid-column: 1;
}

.Eth > *:nth-child(13) {
  -ms-grid-row: 7;
  -ms-grid-column: 2;
} 

.Eth > *:nth-child(14) {
  -ms-grid-row: 8;
  -ms-grid-column: 1;
}

.Eth > *:nth-child(15) {
  -ms-grid-row: 8;
  -ms-grid-column: 2;
} 
.Eth > *:nth-child(16) {
  -ms-grid-row: 9;
  -ms-grid-column: 1;
}

.Eth > *:nth-child(17) {
  -ms-grid-row: 9;
  -ms-grid-column: 2;
} 
.eth_cate {
  -ms-grid-row: 6;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: 1 / 1 / 1 / 3;
}

.Com {
  -ms-grid-row: 5;
  -ms-grid-column: 7;
  -ms-grid-column-span: 4;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  -ms-grid-rows:  1fr 0.8fr 0.8fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0fr 0fr 0fr 0fr;
  gap: 0px 0px;
  grid-area: Com;
  border: 0.5px solid rgba(218, 159, 105, 0.2);
}

.Com > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 4;
}

.Com > *:nth-child(2) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}

.Com > *:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

.Com > *:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
}

.Com > *:nth-child(5) {
  -ms-grid-row: 2;
  -ms-grid-column: 4;
}

.Com > *:nth-child(6) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

.Com > *:nth-child(7) {
  -ms-grid-row: 3;
  -ms-grid-column: 2;
}

.Com > *:nth-child(8) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

.Com > *:nth-child(9) {
  -ms-grid-row: 3;
  -ms-grid-column: 4;
}

.Com > *:nth-child(10) {
  -ms-grid-row: 4;
  -ms-grid-column: 1;
}

.Com > *:nth-child(11) {
  -ms-grid-row: 4;
  -ms-grid-column: 2;
}

.Com > *:nth-child(12) {
  -ms-grid-row: 4;
  -ms-grid-column: 3;
}

.Com > *:nth-child(13) {
  -ms-grid-row: 4;
  -ms-grid-column: 4;
}

.com_cate {
  -ms-grid-column-span: 4;
  grid-area: 1 / 1 / 1 / 5;
}

.OBC {
  -ms-grid-row: 5;
  -ms-grid-row-span: 5;
  -ms-grid-column: 11;
  grid-area: OBC;
  border: 0.5px solid rgba(218, 159, 105, 0.2);
}

.IO {
  -ms-grid-row: 5;
  -ms-grid-row-span: 5;
  -ms-grid-column: 12;
  -ms-grid-column-span: 2;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  -ms-grid-rows: auto 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr auto;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 0fr auto;
  gap: 0px 0px;
  grid-area: IO;
  border: 0.5px solid rgba(218, 159, 105, 0.2);
}

.IO > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
}

.IO > *:nth-child(2) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}

.IO > *:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

.IO > *:nth-child(4) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

.io_cate {
  -ms-grid-column-span: 2;
  grid-area: 1 / 1 / 1 /3;
}

#category {
  margin-bottom: 5px;
  margin-top: 5px;
}

.blk1 {
  -ms-grid-row: 5;
  -ms-grid-row-span: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 11;
  grid-area: 3 / 3 / 4 / 12;
  background-color: rgba(46, 67, 190, 0.8);
}

.blk12 {
  -ms-grid-row: 6;
  -ms-grid-row-span: 11;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: 3 / 1 / 10 / 3;
  background-color: rgba(46, 67, 190, 0.8);
}

.blk2 {
  -ms-grid-row: 6;
  -ms-grid-row-span: 4;
  -ms-grid-column: 3;
  -ms-grid-column-span: 9;
  grid-area: 4 / 3 / 9 / 14;
  background-color: rgba(54, 108, 228, 0.8);
}

.blk22 {
  -ms-grid-row: 5;
  -ms-grid-row-span: 6;
  -ms-grid-column: 12;
  -ms-grid-column-span: 2;
  grid-area: 3 / 12 / 4 / 14;
  background-color: rgba(54, 108, 228, 0.8);
}

.blk3 {
  -ms-grid-row: 10;
  -ms-grid-row-span: 5;
  -ms-grid-column: 3;
  -ms-grid-column-span: 11;
  grid-area: 9 / 3 / 10 / 14;
  background-color: rgba(30, 80, 170, 0.8);
}

.checkbox  {
  display: block;
}

.checkbox label {
  position: relative;
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  width: 90%;
  height: auto;
  margin-right: auto;
  margin-left: auto;
}


.checkbox label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

/* 0：未開発 */
.checkbox label input[type="checkbox"]:disabled+span {
  background-color: #999999;
  -webkit-box-shadow: none;
          box-shadow: none;
}

/* 1：開発済 */
.checkbox label input[type="checkbox"]+span {
  display: block;
  background-color: #f4d948;
  color: #1a2792;
  border: 0.5px solid #1a2792;
  border-radius: 3px;
  padding: 0px;
  -webkit-box-shadow: 3px 3px 4px #1a2792;
          box-shadow: 3px 3px 4px #1a2792;
  padding: 0px;
}

/* 2：選択済み */
.checkbox label input[type="checkbox"]:checked+span {
  background-color: #1a2792;
  color: gold;
  -webkit-box-shadow: none;
          box-shadow: none;
  position: relative;
  top: 2px;
  -webkit-box-shadow:inset 2px 3px 3px black;
          box-shadow:inset 2px 3px 3px black;
  border-radius: 3px;
}


/* 4：別ベンダー */
.othervend {
  color: #efb544;
  background-color: #4a5158;
  border-radius: 3px;
  font-size: 13px;
  /* display: none; */
  margin-bottom: 7px;
  width: 90%;
  height: auto;
  margin-right: auto;
  margin-left: auto;
}
.sample label {
  width:110px;
  font-size: 13px;
  text-align: center;
  margin:5px;
}
.sample {
  margin-left:15px;
}

/*要素の選択不可*/
.unselectable{ user-select: none; display: inline-block; } 
.unselectable::selection{ background:none; } 
.unselectable::-moz-selection{ background: none; }