@charset "utf-8";
 html {
     font-size: 90%;
 }

 body{
     font-family:
     "MS Pゴシック" ,
     Arial,
     "Hiragino Kaku Gothic ProN",
     "Hiragino Sans",
     Meiryo,
     sans-serif;
 }
 body,
 input,
 textarea,
 select {
     font-weight: 300;
     line-height: 1.6em;
     color: #191919;
     margin: 0;
 }
 @media screen and (max-width: 320px) {
     body,
     input,
     textarea,
     select {
         font-weight: 300;
         line-height: 1.75em;
         color: #191919;
         margin: 0;
     }
 }

 a {
     /* 囲んでいる要素全体をクリックできるように */
     display: block;
 }
 pre{
    font-size:1rem;
    line-height:1.1rem;
 }
 body,
 #wrapper {
      display: flex;
      flex-direction: column;
      min-height: 80vh;
      background: #f3f3f3;
      width: 100%;
      position: relative;
 }

 /*-----------------------------------------
 header
 */
 header {
     position: relative;
 }
 header #logo {
    margin:15px 0 0 10px;
    color: #585858;
    font-family: Roboto !important;
 }
 /*-----------------------------------------
  footer
 */
 footer {
     position: fixed;
     text-align: center;
     background: #323232;
     color: #fff;
     font-size: 0.8rem;
     bottom:0;
     width:100%;
 }
 
 /*-----------------------------------------
   main
 */
 main {
    position:relative;
    width: 500px;
    height: 100%;
    min-height: 100vh;
    margin: 0 auto;
    background-color: #fff;
 }
 .contents{
    background-color: #fff; 
    padding: 10px 10px 20px 10px;
    max-width:1200px;
    margin:auto
 }
 .bottomBox {
    position: fixed;
    bottom: 0;
    left: 50%;
    width:100%;
    transform: translate(-50%, -50%);
  }
  .bottomBox.-center {
    text-align: center;
  }
 /*------------------------
  header box
 ------------------------*/
 .headerBox {
     display: flex;
 }
 .headerBox>div {
     margin: 0;
     margin-left: 5px;
     margin-right: 5px;
     text-align: center;
     min-width: 30px;
     height: 30px;
     line-height: 30px;
 }
 .headerBox>div:nth-of-type(2) {
 margin-right: auto;
 }
 /*-----------------------------------------
  section
 */
 section {
     background:#fff;
     margin:auto;;
 }
 
 /*-----------------------------------------
  article
 */
 article {
     width: 100%;
 }
 article h1 {
     width: 100%;
     margin-top: 25px;
     margin-bottom: 25px;
     text-align: center;
     font-size: 1.8rem;
 }
 
 article p {
     text-align: center;
     display: block;
 }
 /* ゲーム用 */
 #stage{
     display: flex;
     flex-wrap: wrap;
     width:100%;
     margin: auto;
     align-items: center;
     justify-content: center;
 }
 
 /* 画面サイズ 400px 未満 */
 @media (max-width: 399px) {
    main, .contents, .bottomBox, .controllerBox{
        /* background:green; */
         width: 350px!important;
     }
 }
 /* 画面サイズ 500px 未満 */
 @media only screen and (min-width: 400px) and (max-width: 499px) {
    main, .contents, .bottomBox, .controllerBox{
        /* background:blue; */
        width: 390px!important;
     }
 }
 /* 画面サイズ 600px 未満 */
 @media only screen and (min-width: 500px) and (max-width: 599px) {
    main, .contents, .bottomBox, .controllerBox{
        /* background:red; */
         width: 490px!important;
     }
 }
 /* 画面サイズ 600px 以上 80px 未満 */
 @media only screen and (min-width: 600px) and (max-width: 799px) {
    main, .contents, .bottomBox, .controllerBox{
        /* background:green; */
         width: 580px!important;
     }
 }
  /* 画面サイズ 600px 以上 1000px 未満 */
  @media only screen and (min-width: 800px) and (max-width: 1099px) {
    main, .contents, .bottomBox, .controllerBox{
        /* background:purple; */
         width: 800px!important;
     }
 }
   /* 画面サイズ 600px 以上 1200px 未満 */
   @media only screen and (min-width: 1000px) and (max-width: 1199px) {
    main, .contents, .bottomBox, .controllerBox{
        /* background:purple; */
         width: 1000px!important;
     }
 }
 /* 画面サイズ 1200px 以上 */
 @media (min-width: 1200px) {
    main {
        /* background:blue; */
        /* これ必要 */
        width: 1200px;
    }
    .contents, .bottomBox, .controllerBox{
        /* background:rgb(111, 59, 71); */
        /* max-width: 500px; */
    }
 }
  img {
      outline: none;
      border-style: none;
  }
  
  h1, h2, h3, h4, h5, h6 {
      font-weight: 300;
      letter-spacing: -0.025em;
  }
  
  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
      color: inherit;
      text-decoration: none;
  }
  
  a {
      color: #80BA8E;
      text-decoration: none;
  }
  
  a:visited {
      color: #7b6f92;
  }
  a:hover {
      color: #80BA8E;
      text-decoration: none;
  }
  
  hr {
      border: 0;
      border-top: solid 1px #ddd;
      margin: 2em 0 2em 0;
  }
  
  p, ul, ol, dl, table {
      margin-bottom: 1em;
  }
  
 table {
     border-spacing: 0;
 }
 table th, table td {
     position: relative;
 }
 td.-center{
    text-align:center!important;
    background:red;
 }

 table {
     width: 100%; 
     table-layout: fixed;
 }
 @media screen and (max-width: 768px) {
     table {
         table-layout: auto;
     }
 }
 ul {
      list-style: none;
 }
 .title2{
    color: #888786;
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 0;
 }
 .title {
     color: #888786;
     font-size: 1.4rem;
     font-weight: 500;
     margin-bottom: 15px;
 }
 .title{
     color: #888786;
 }
 .title.-m{
     font-size: 1.2rem;
 }
 .title.-s{
     font-size: 1rem;
 }
 .title .-links {
     display: flex;
     margin-top: 5px;
     margin-right: -5px;
 }
 .title .-links li {
     margin-right: 5px;
 }
 .title .-links .btn {
     padding: 4px 20px !important;
     border-radius: 5px;
 }
 .title .-links .btn:hover {
     border-radius: 6px !important;
     opacity: 0.6;
 }
 /*-----------------------------------------
   images
 */
 .image {
      display: inline-block;
 }
  
 .image img {
      display: block;
      width: 100%;
 }
  
 .image.left {
      float: left;
      margin: 0 2em 2em 0;
 }
  
 .image.centered {
      display: block;
      margin: 0 0 2em 0;
 }
 .col {
     background: #fff;
     padding: 30px 20px;
     margin-bottom: 30px;
     box-shadow: 0 0 15px 0 rgba(0, 91, 172, 0.35);
 }
 @media screen and (max-width: 768px) {
     .col {
       padding: 15px;
     }
  }
  /*-----------------------------------------
   list
  */
  ul.default,
  ul.style,
  ul.horizontal {
      margin: 0;
      padding: 0 0 1.5em 0;
  }
  
  ul.default li,
  ul.style li {
      border-top: 1px solid;
      border-color: rgba(0, 0, 0, .1);
  }
  
  ul.default li:first-child,
  ul.style li:first-child {
      padding-top: 0;
      border-top: none;
  }
  
  /* ul list */
 ul.list li {
      padding: 2em 0 1.5em 0;
  }
  /* horizontal */
  ul.horizontal li {
      display: inline-block;
      margin: 0 1em;
  }
  ul.horizontal li a {
      color: inherit;
      font-size: 1.75em;
      display: inline-block;
  }
  ul.horizontal li a:hover {
      color: #fff;
  }
  /* cotainer */
  .container {
     width:100%;
     height:auto;
     display:flex;
     flex-direction:column;
     align-items:center; 
     position:relative;
 }


/*-------------------------
 flexBox */
 .flexBox {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     padding:0;
 } 
 .flexBox.-center{
    justify-content: center;
}
 .flexBox.-left{
     justify-content: start;
 }
.flexBox li {
    position:relative;
    width: calc(33.33% - 20px); /* 3列配置 */
    border: 1px solid #dddddd;
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
    cursor: pointer;
    text-align: center;
    background-color: #fff;
    box-sizing: border-box;
}
.flexBox.-right_space div{
    margin-right:10px;
}
.flexBox li.-column2{
    width: calc(50% - 20px); /* 2列配置 */
}

.flexBox li.-column4 {
  width: calc(25% - 20px); /* 4列配置 */
}

.flexBox li.-column5 {
  width: calc(20% - 20px); /* 5列配置 */
}

.flexBox li.-column1 {
  width: 100%; /* 1列配置 */
  margin: 5px;
  padding: 5px;
}
/*-----------------------------------------
button
*/
.btnBox {
     max-width: 500px;
     margin: 0 auto;
 }
 .btnBox.-flex{
     display: flex;
 }
 .btnBox.-center{
     text-align:center;
 }
 @media screen and (min-width: 500px) {
     .btnBox {
         max-width: unset;
     }
 }
 .btnBox div {
     margin: 0 auto;
 }
 .btn {
      position: relative;
      display: inline-block;
      background: #b3c0b3;
      padding: 0.3em 0.9em;
      text-decoration: none !important;
      color: #fff !important;
      text-align: center;
      border:none;
      border-radius: 0.2rem;
      cursor: pointer;
      user-select: none;
      font-weight: bold;
      font-weight:normal;
      min-width: 90px;
  }
 .item {
     position: relative;
     display: inline-block;
     background:blue;
     width:100%;
     margin:auto;
     text-align: center;
 
 }
  .btn:hover {
      background: #595a57;
      color: #FFF !important;
  }
  .btn.-s {
      padding: 0.2em 1.2em;
      font-size: 0.8rem;
      min-width: 70px;
  }
  .btn.-m {
      padding: 0.7em 1.2em;
      min-width: 120px;
  }
  .btn.-l {
     padding: 0.8em 2em;
     font-size: 1.2rem;
     min-width: 150px;
 }
 .btn.-red {
    background: rgb(241, 38, 75);
}
  .btn.-blue {
     background: rgb(121, 145, 173);
 }
  .btn.-green {
     background: rgb(128, 140, 121);
 }
 .btn.-pink {
    background: rgb(249, 203, 241);
    color:#999b96!important;
}
 .btn.-yellow {
    background: rgb(236, 236, 153);
    color:#dcdfe3!important;
}
  .btn.-gray {
      background: rgb(174, 175, 178)!important;
  }
  .btn.-white {
     background: #fff!important;
     color:#aea7a7!important;
     border: 1px solid rgb(187, 186, 186);
 }
  .btn.-active {
      background: #F7958E;
  }
  
  .btn.active_level {
      background: #F7958E;
  }
 .btn.-start {
     background: #625555;
     padding: 5px 0;
     width: 20rem;
 }
 
 .btn.-back {
    right: 15px;
    bottom: 18px;
    opacity: 0.6;
    background: rgba(98, 85, 85, .8);
    z-index: 1000;
    border-radius: 0;
 }
  /*-----------------------------------------
   page top
  */
  #page_top {
     position: fixed;
     width: 50px;
     height: 50px;
     right: 8px;
     bottom: 8px;
     opacity: 0.6;
     border-radius: 50%;
     background: rgba(98, 85, 85, .8);
     color: #dbdbdb;
     text-align: center;
     z-index: 1000;
     cursor: pointer;
     line-height: 1.25rem;
     padding-top: 12px;
 }
 
  @media (max-height: 550px) {
      /* キーボードが表示されたときなどは、リセットボタン非表示 */
      /* #js_reset {
          display: none;
      } */
  }
  
  /*-----------------------------------------
   row
  */
  .rows {
      display: flex;
      text-align: center;
  }
  
  .rows section.row_3 {
      width: 33.33%;
  }
  
  .rows section.row_2 {
      width: 50%;
  }
  
  .rows h3 {
      font-size: 1.2rem;
      margin-bottom: 20px;
  }
  
  .rows section>p {
      min-height: 70px;
      margin: 0 auto 20px;
      width: 70%;
      color: #a9a9a9;
  }
  
  .rows img {
      width: 70%;
      max-width: 500px;
      margin: 0 auto;
      height: 150px;
  }  
  /*-----------------------------------------
   fa
  */
  .fa-gray {
      color: #dddddd;
  }
  @media screen and (max-width: 767px) {
      .rows {
          display: block;
          text-align: center;
      }
      .rows section.row_3,
      .rows section.row_2 {
          width: 100%;
      }
      .rows img {
          width: 70%;
          max-width: 500px;
          margin: 0 auto;
          height: 110px;
      }
  }
  @media screen and (max-width: 320px) {
      .rows {
          display: block;
          text-align: center;
      }
      .rows section.row_3,
      .rows section.row_2 {
          width: 100%;
      }
  }
  
  /*-----------------------------------------
   文字の装飾
  */
  .error {
      color: rgb(208, 77, 77) !important;
  }
  #error_message{
     /* min-height: 30px; */
     color: rgb(208, 77, 77) !important;
  }
  
   .errorinput {
     background: #f9d1d1 !important;
     outline: 1px solid #e94d4d !important;
   }
   .errorBox {
     background: #f9d1d1 !important;
     padding: 5px;
   }
   .error.select {
     background: #f9d1d1 !important;
     outline: 1px solid #e94d4d !important;
   }
 .notice{
     color: rgb(77, 145, 208) !important;
 }
 .exp{
    font-size:.8em;
    color: rgb(77, 145, 208) !important;
 }
  .ruby {
      font-size: .9rem;
      color:#6ba9fa;
      font-weight:bold;
  }
  
  .txt_right {
     text-align:right!important;
  }
  
  .txt_left {
      text-align: left!important;
  }
  
  .txt_center {
      text-align: center!important;
  }
  .txt_s {
    font-size:0.8em;
}

  .-red {
      color: rgb(204, 73, 73);
  }
  .-red2 {
     color: rgb(227, 137, 137);
 }
 .caution {
    color: red;
    font-size:0.8rem;
    line-height:1rem;
}
.-blue {
    color: #20548f;
}
.-gray {
     color: #a7a3a3;
 }
.-white {
    color: #fff;
}
.b, .bold{
    font-weight: bold;
}
.font_s{
    font-size: 0.9em;
}
.font_l{
    font-size: 1em;
}
.font_ll{
    font-size: 1.2em;
}
.font_xl{
    font-size: 1.5em;
}
.font_xxl{
    font-size: 1.7em;
}
.bg_pink{
    background-color: #f9e1fb;
}
.bg_blue{
    background-color: #d5e2fa;
}
.bg_green{
    background-color: #dffad5;
}
.bg_yellow{
    background-color: #faf9d5;
}
.bg_orange{
    background-color: #fae2d5;
}
.bg_purple{
    background-color: #f7d5fa;
}

  /*-----------------------------------------
   テンキー
  */
  .tenkeyBox {
     display: grid;
     grid-template-columns: 20% 20% 20% 20% 21%;
     /* border: 1px solid #b3c8b7; */
     border-radius: 3px;
     padding: 5px;
     margin: 16px auto;
     width: 95%;
     background: #f2f4f6;
   }
   
   .tenkeyBox.-col3 {
     display: grid;
     grid-template-columns: 33% 33% 34%;
   }
   
   .tenkeyBox.-row3 {
     display: grid;
     grid-template-columns: 16% 16% 16% 17% 17% 17%;
   }
  
  .tenkeyBox>li {
      height: 50px;
      line-height: 50px;
      margin-top: 6px;
      border: 1px solid #d4ddd4;
      border-radius: 3px;
      text-align: center;
      font-size: 1.5rem;
      margin-right: 5px;
      background: #fff;
      cursor: pointer;
      user-select: none;
  }
  
  .tenkey:hover {
      background: #eaffee;
  }
 
  .hide{
     display: none !important;;
  }
  .noborder {
      border: none;
  }
  .w100per {
     width: 100%;
 }
  .w50 {
      width: 50px;
  }
  .w80 {
      width: 80px;
  }
  .w100 {
     width: 100px;
 }
 .w150 {
     width: 150px;
 }
 .w200 {
     width: 200px;   
 }
 .w300 {
     width: 300px;
 }
 .w500 {
     width: 300px;
 }
.center {
    margin: 0 auto;
}
 
 .mt10 {
     margin-top: 10px;
 }
 .mt20 {
     margin-top: 20px;
 }
 .mt30 {
     margin-top: 30px!important;
 }
 .mt50 {
     margin-top: 50px;
 }
 .mb10 {
     margin-bottom: 10px;
 }
 .mb20 {
      margin-bottom: 20px;
}
.mb30 {
     margin-bottom: 30px;
 }
 .ml10{
     margin-left:10px;
 }
 .mr10{
    margin-right:10px;
}
.pointer {
    cursor: pointer;
}
.icon {
    width: 20px;
    cursor: pointer;
    margin:auto;
}
 
 /*-------------------------------
 /* トグル
 */ 
 .toggleBox{
     margin-bottom:8px;
 }
 .toggleBox input[type="checkbox"] {
     display: none;
 }
 /* トグルの外観 */
 .toggle-item {
     width: 40px;
     box-sizing: border-box;
     text-align: left;
     line-height: 1;
     background-color: lightgray;
 }
 /* トグル内部で動くボックス */
 .toggle-item > div {
     width: 50%;
     background: gray;
     transition: .2s;
 }
 /* トグル外観とその内部で高さ・丸さ・余白を共通にする */
 .toggle-item, .toggle-item > div {
     height: 20px;
     border-radius: 20px;
     margin: auto 0;
 }
 
 
 /* ON時のトグル内部の移動 */
 .toggleBox > input[type="checkbox"]:checked + .toggle-item > div {
     transform: translateX(100%);
     background: #80ba8e;
 }
 /* 右隣の説明文 */
 .toggleBox .description {
     display: inline-block;
     vertical-align: top;
     margin-left: 10px;
     font-weight: normal;
 }
 /* トグルと説明文の高さを揃える */
 .toggleBox {
     display: flex;
 }
 /*-------------------------------
 /* タブメニュー
 */
 .tabBox {
     display: flex;
     flex-wrap: wrap;
     gap: 0 8px;
     max-width: 500px;
 }
 .tabBox.-s{
     gap: 0 6px;
     min-width: 70px;
 }
 .tabBox.-ss{
     gap: 0 4px;
     min-width: 65px;
 }
 .tabBox.-sss{
     gap: 0 3px;
     min-width: 50px;
 }
 .tabBox > label {
     flex: 1 1;
     order: -1;
     opacity: .8;
     min-width: 74px;
     padding: .3em 0.4em;
     border-radius: 5px 5px 0 0;
     background-color: #99bb96;
     color: #121010;
     /* font-size: .9em; */
     text-align: center;
     cursor: pointer;
 }
 .tabBox.-status > label {
     flex: 1 1;
     order: -1;
     opacity: .6;
     min-width: 25px;
     max-width: 70px;
     padding: .3em .1em;
     border-radius: 5px;
     background-color: #99bb96;
     color: #141313;
     font-size: 1.1em;
     text-align: center;
     cursor: pointer;
 }
 .tabBox.-blue > label {
     background-color: #96aabb;
 }
 .tabBox.-pink > label {
     background-color: #bb96b4;
 }
 .tabBox.-yellow > label {
     background-color: #bbb596;
 }
 .tabBox.-s > label {
     min-width: 65px;
 }
 .tabBox.-ss > label {
     min-width: 50px;
 }
 .tabBox > label:hover {
     opacity: .7;
 }
 
 .tabBox input {
     display: none;
 }
 
 .tabBox > div {
     display: none;
     width: 100%;
     padding: 1.em 1em;
     background-color: #fff;
 }
 
 .tabBox label:has(:checked) {
     opacity: 1;
     color:#fff;
 }
 
 .tabBox label:has(:checked) + div {
     display: block;
 }
 
 .preview_open{
     cursor:pointer;
 }

 /*-------------------------------
 /* タブメニュー2
 */
 .tabBox2 {
    display: flex;
    flex-direction: row;
    text-align: center;
    background-color: #fff !important;
    margin: 0 !important;
  }
  .tabBox2 > li {
    flex: 1;
    flex-basis: 120px;
    max-width: 120px;

    display: block;
    text-decoration: none;
    color: #fff;
    background-color: #65c6ba;
    opacity: 0.4;
    cursor: pointer;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
  }
  .tabBox2 > li.on {
    opacity: 1;
  }
  .tabBox2_div {
    margin: 30px 15px;
    display: none;
    text-align: center;
  }
  .tabBox2_div.on {
    display: block;
  }





/* PCサイズ */
/* @media only screen and (min-width: 1025px) and (min-height: 1025px) { */
/* @media only screen and (min-width: 1025px) and (min-height: 750px) { */
@media screen and (min-width: 768px) {
    main{
        /* background:rgb(218, 234, 236); */
    }
    .pc_only{
        /* background:red!important; */
        display:'';
    }
    .sp_only{
        display:none!important;
    }
}
/* スマートフォンサイズ */
@media screen and (max-width: 767px) {
/* @media only screen and (max-width: 767px), (max-height: 767px) { */
    main{
        /* background:rgb(235, 221, 232); */
    }
    .pc_only{
         /* background:blue!important; */
        display:none!important;
    }
    .sp_only{
        display:'';
    }
}
 /*-------------------------------
 code
 */
pre code{
	/* word-wrap: normal !important; */
	/* overflow-wrap: normal !important; */
	white-space: pre !important;
    font-family: Consolas, Monaco, 'Courier New', Courier, monospace;
    font-size: 14px;
    background-color: #f4f4f4;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ddd;
    display: block;
    overflow-x: auto;
}
 /*-------------------------------
ステータス 
*/
.status{
    background:#a5c4ec;
    color:#fff;
    border-radius: 10px;
    text-align:center;
    padding:1px 5px 1px 5px;
    /* font-size:0.9rem; */
    max-width:60px;
}
.status.-blue{
    background:#a5c4ec;
    color:#fff;
}
.status.-green{
    background:#a5c38b;
    color:#fff;
}
.status.-red{
    background:#eca5be;
    color:#fff;
}
.status.-gray{
    background:#c7c8c9;
    color:#fff;
}
.status.-purple{
    background:#dd92fc;
    color:#fff;
}
.status.-yellow{
    background:#f5f36c;
    color:#6b5f5f;
}
.status.-orange{
    background:#f5ac6c;
    color:#6b5f5f;
}
 /*-------------------------------
copy & tooltip 
*/
.copy {
    position: absolute; /* アイコンを絶対位置に設定 */
    top: 0; /* 上端に位置 */
    right: 0; /* 右端に位置 */
    margin: 10px; /* 任意でアイコンと端の間にスペースを追加 */
  
  }
  .tooltip {
    position: absolute;
    top: -30px;
    right: 0;
    background-color: black;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }


/*-------------------------------
drag icon
*/
  #drag_icon_table {
    border-collapse: collapse;
    width: 100%!important;
    table-layout: fixed;
  }
  #drag_icon_table td {
    border: 1px solid black;
    width: 16.6%; /* 7列のテーブルのため */
    height: 75px;
    text-align: center;
    /* vertical-align: middle; */
    position: relative;
    vertical-align: top;
    font-size:0.7em;
    margin:0 auto;
  }
  #drag_icon_table img {
    width:80%!important;
    bottom:0;
  }
  /* タブレット以上 */
  @media screen and (min-width: 768px) {
    #drag_icon_table td {
      height: 110px;
      font-size:0.9em;
    }
  }
  #drag_icon_list {
    display: flex;
    overflow-x: scroll; 
    overflow-y: hidden;
    white-space: nowrap; 
    height:90px;
    width: 100%;
    background-color: rgb(228, 247, 240);
  }
  /* #drag_icon_list img {
    margin: 5px;
    cursor: pointer;
    width: 75px;
  } */
  #drag_icons {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 180px;
    border: 1px solid #ccc;
    position: relative;
  }
  #drag_icons img {
    position:absolute;
    margin: 5px;
    cursor: pointer;  
    width: 75px;
  }

  #progress{
    font-size: 1.2rem;
  }

/*-------------------------------
ドラッグパズル用
*/
.draggable-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}
  .draggable-choices {
    position: relative;
    border:1px solid #272829; 
    height:200px;
  }
  .draggable-choices .d_div {
    min-width: 90px;
    height: 30px;
    line-height: 30px;
    background-color: #c0e4f0;
    border: 1px solid #ddd;
    text-align: center;
    cursor: pointer;
    position: absolute;
    color:#272829;
    padding: 2px 5px;
  
  }
  .drag_item{
    opacity:0;
  }
  .draggable-choices .d_div.-pink{
    background-color: #f6bdd7;
  }
  .draggable-choices .d_div.-green{
    background-color: #d6f6bd;
  }
  .draggable-choices .d_div.-yellow{
    background-color: #f6f4bd;
  }
  .draggable-choices .d_div.-purple{
    background-color: #eebdf6;
  }
  .draggable-choices .d_div.-orange{
    background-color: #f6d8bd;
  }.draggable-choices .d_div.-deep_green{
    background-color: #92b352;
  }
/* スマホ */
@media screen and (max-width: 500px) {
  .draggable-container td:nth-of-type(1){
    width:70px!important;
  }
}


/*-------------------------------
フロートボタン
*/
.float_btn {
    width: 45px;
    height: 45px;
    background-color: #f39c12;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 45px;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s, box-shadow 0.3s;
    margin-left: 10px; /* ボタン間のスペース */
}

.float_btn.-green{
    background-color: #8cde5d;
}
.float_btn.-purple{
    background-color: #9b5dde;
}
.float_btn:hover {
    background-color: #e67e22;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.float_btn img {
    width: 22px;
    cursor: pointer;
    margin: 10px auto;
}

.bottomRightBox,
.topRightBox,
.topLeftBox {
    position: absolute;
    display: flex;
    z-index: 1000;
}
/* 右下 */
.bottomRightBox {
    bottom: 10px;
    right: 0;
    flex-direction: row-reverse; /* 右から左に並べる */
}
/* 右上 */
.topRightBox {
    top: 10px;
    right:0;
    flex-direction: row-reverse; /* 右から左に並べる */
}
/* 左上 */
.topLeftBox {
    top: 10px;
    left: 0;
    flex-direction: row-reverse; /* 右から左に並べる */
}
/* todoきいてない */
.topLeftBox .float_btn .last-child {
    background:red!important;
    margin-right: 0; 
    /* 最初のボタンにはmarginを適用しない */
}

/* 正解の丸 */
.circleMark {
    display: none;
    width: 300px;
    height: 300px;
    border: 30px solid #db3939; /* 緑色のボーダーを指定 */
    border-radius: 50%; /* 丸くするための設定 */
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: transparent; /* 背景を透明に設定 */
    opacity: .3;
}
/* 不正解のバツ */
.crossMark {
    display: none;
    width: 100px;
    height: 100px;
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    opacity: .3;
}
.crossMark::before,
.crossMark::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 30px; /* 線の太さを指定 */
    background-color: #59b55c;
    top: 30%;
    left: -100px;
    transform: translateY(-50%) rotate(45deg); /* 45度回転して斜めに */
}
.crossMark::after {
    transform: translateY(-50%) rotate(-45deg); /* 逆方向に45度回転 */
}

.-s{
    font-size: 0.8em;
}
#timer{
    font-size:1.2rem;
}
.pickup {
    margin-top: 20px;
    border: 2px dashed #66bb6a;
    padding: 10px!important;
    position: relative;
  }

.pickup div {
    background-color: #66bb6a;
    color: white;
    padding: 3px 7px;
    position: absolute;
    top: -20px;
    left: 20px;
    border-radius: 5px;
}