@charset "utf-8";

/*========= 共通CSS ===============*/

#bg-video{
 position: fixed;
 right: 0;
 bottom: 0;
 min-width: 100%;
 min-height: 100%;
 width: auto;
 height: auto;
 z-index: -100;
 background-size: cover;
 opacity: 0.6;
}

html, body{
  margin: 0;
  padding: 0;
}

body{
  background: linear-gradient(to bottom, #ffffff, #f9f9f9);
  color: #333333;
  font-family: 'Shippori Mincho', serif;
}

li {
  list-style: none;
}

/* フラッシュメッセージ*/
.flash-message {
  transition: opacity 3s ease-in-out;
  z-index: 10000;
}

/* ページタイトル */
.page-title{
  color: #ad9a7a;
  border-bottom: solid 5px #ad9a7a;
}

a{
  text-decoration: none;
  color: unset;
}

.text-dark {
  text-decoration: none!important; /*Safariでは下線が表示されないが、Chromeでは表示されてしまう。*/
}

/* simple_format 改行対策 */
.no-extra-space {
  white-space: pre-line;
}

.contents {
  margin-top: 90px; /* ナビゲーションの高さに合わせて調整 */
}
@media screen and (max-width: 768px) {
  .contents {
    margin-top: 60px; /* ナビゲーションの高さに合わせて調整 */
  }
}

/* 検索フォーム */
.border-form {
  border-radius: 10px;
  border: 1px solid #ad9a7a;
}

.bottom-line {
  border-bottom: 1px solid #ad9a7a;
}

/* ページネーション */
.page-link {
  background: none!important;
  border: none;
  color: #ad9a7a!important;
}

.pagination .active .page-link {
  color: #7B7791!important;
}

@media (hover: hover) {
  .page-link:hover {
    opacity: 0.6!important;
  }
}

/* pading/margin
.mx-md-6 {
  margin: 0 150px!important;
}*/

/* btn */
@media (hover: hover) {
  .btn-custom:hover, .btn-custom-2:hover, .btn-custom-3:hover, .btn-custom-5:hover, .btn-custom-7:hover, .btn-custom-10:hover, .btn-custom-11:hover{
    opacity: 0.6;
    color: #fff;
  }
  .btn-custom-4:hover{
    opacity: 0.6;
    color: #ad9a7a;
  }
  .btn-outline:hover, .btn-outline-2:hover, .btn-outline-3:hover, .btn-outline-4:hover, .btn-outline-6:hover, .btn-outline-8:hover, .btn-outline-9:hover, .btn-outline-12:hover{
    opacity: 0.6;
    color: #838382;
  }
}

.btn:active {
 color: #838382;
}

.btn-custom{
  background-color: #d2b978;
  color: #f9f9f9;
  padding: 3px 40px;
}
.btn-outline{
  border-color: #d2b978;
  color: #d2b978;
  padding: 3px 40px;
}

.btn-custom-2{
  background-color: #d2b978;
  color: #f9f9f9;
  padding: 10px 60px;
}
.btn-outline-2{
  border-color: #d2b978;
  color: #d2b978;
  padding: 10px 60px;
}

.btn-custom-3{
  background-color: #d2b978;
  color: #f9f9f9;
  padding: 10px;
  width: 150px;
}
.btn-outline-3{
  border-color: #d2b978;
  color: #d2b978;
  padding: 10px;
  width: 150px;
}

.btn-custom-4{
  background-color: #fff;
  color: #707B89;
  padding: 3px 30px;
}

.btn-custom-5{
  border-color: #a1a7ad;
  background-color: #D0C8A7;
  color: #fff;
  padding: 3px 30px;
}

.btn-outline-6{
  border-color: #d2b978;
  color: #d2b978;
  padding: 3px 0px;
  width: 80px
}

.btn-custom-7{
  background-color: #d2b978;
  color: #f9f9f9;
  padding: 3px 10px;
}

.btn-outline-8{
  border-color: #d2b978;
  color: #d2b978;
  padding: 3px 3px;
  width: 120px
}

.btn-outline-9{
  border-color: #06c755;
  color: #06c755;
  padding: 3px 10px;
}

.btn-custom-10{
  background-color: #d2b978;
  border-radius: 15px;
  color: #f9f9f9;
  padding: 3px 10px;
}

.btn-custom-11{
  background-color: #707B89;
  color: #f9f9f9;
  padding: 3px 10px;
}

.btn-outline-12{
  border-color: #d2b978;
  color: #d2b978;
  padding: 3px 10px;
}

.btn-outline-13{
  border-color: #d2b978;
  color: #d2b978;
  padding: 1px 7px;
}



/* color */
.c-accent_1 {
  color: #ad9a7a;
}
.c-accent_2 {
  color: #838382;
}
.c-accent_3 {
  color: #bfbfbf!important;
}
.c-accent_4 {
  color: #6A5532;
}
.c-accent_5 {
  color: #454161;
}
.c-accent_6 {
  color: #f5f5f5;
}
.bg-accent-1 {
  background-color: #707B89;
}
.bg-accent-2 {
  background-color: #ad9a7a;
}
.bg-accent-3 {
  background-color: #d1c8a6!important;
}
.bg-accent-4 {
  background-color: #e8e8e8!important;
}
.bg-accent-5 {
  background-color: #ad9a7a!important;
}
.bg-accent-6 {
  background-color: #d1cdc0!important;
}
.bg-accent-7 {
  background-color: #fcf7f0!important;
}

/* form */
.form-control, .form-select {
  background-color: #fcf7f0;/*
  background: linear-gradient(to bottom, #ffffff, #FDF2E1);*/
}

.form-control:focus, .form-select:focus {
  border-color: #d2b978;
  outline: none;
  box-shadow: 2px 2px 2px #d2b978;
}

/* check_box */
.check_box_size {
  transform: scale(1.1);
  transition: transform 0.2s;
}

.check_box_size:hover {
  transform: scale(1.2);
}

.check_box_size:checked {
  transform: scale(1.4);
}

.check_box_size_2 {
  transform: scale(1.3);
  transition: transform 0.2s;
}

.check_box_size_2:hover {
  transform: scale(1.4);
}

.check_box_size_2:checked {
  transform: scale(1.6);
}

/* font */
@media screen and (max-width: 768px) {
  .fs-xs{
    font-size: 12px;
  }
  .fs-065 {
    font-size: 0.65em;
  }
  .fs-07 {
    font-size: 0.7em;
  }
  .fs-08 {
    font-size: 0.8em;
  }
}
.fs-small {
  font-size: 13px
}
.fs-09 {
  font-size: 0.9em;
}
.fs-04 {
    font-size: 0.4em;
}
.fs-12 {
  font-size: 1.1em;
}

/* table */
.table-striped tr:nth-child(even) {
  background-color: #f9f9f9;
}
.table-striped {
  border-bottom: solid 0.5px #ad9a7a;
}

.table-head {
  background-color: #ad9a7a;
}

.table-contents {
  cursor :pointer;
}
@media (hover: hover) {
  .table-contents:hover {
   background-color: #FDF2E1!important;
  }
}
table thead {
  position: sticky;
  top: 90px;
  background-color: #fff;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  table thead {
    top: 60px;
  }
}

.table-custom-bordered {
  border-top: solid 1px #ad9a7a;
  border-bottom: solid 1px #ad9a7a
}

.table-custom-borderd-2 {
  border-right: solid 2px #ad9a7a;
}

.table-custom-borderd-3 {
  border-top: double 4px #838382;
}

.table-custom-borderd-4 {
  border-right: solid 1px #ad9a7a;
}

/* list-line
li.list-under-line:not(:last-child)::after {
  content: "";
  display: block;
  height: 1px;
  width: 85%; /* 長さを調整します
  background-image: linear-gradient(to right, #fff 50%, transparent 50%);
  background-size: 4px 100%; /* 点のサイズを調整します
  margin: 0 auto; /* 中央寄せ
}
*/

/* 削除アイコン */
@media (hover: hover) {
  .fa-trash-alt:hover {
   color: red;
  }
}

/*========= user/contract new, confirm ===============*/
.contact-list{
  border-bottom: solid 1px #d2b978;
}

.optional-label {
  display: inline-block;
  padding: 3px 8px;
  margin: 0px;
  background: #f5f5f5;
  font-size: 0.8em;
  border-radius: 3px;
  color: #707070;
}

.essential-label {
  display: inline-block;
  padding: 3px 8px;
  margin: 0px;
  background: #838382;
  font-size: 0.8em;
  border-radius: 3px;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .contact-list{
    margin-left: 15px;
    margin-right: 15px;
  }

  .optional-label, .essential-label {
    padding: 3px 3px;
  }
}

.non-editable {
  background-color: transparent; /* 背景色を透明にする */
  border: none;
  pointer-events: none; /* マウスイベントを無効にする */
}

/*========= duplication index ===============*/
.dtw-a{
  width: 11%;
}
.dtw-b{
  width: 10%;
}
.dtw-c{
  width: 10%;
}
.dtw-d{
  width: 25%;
}
.dtw-e{
  width: 20%;
}
.dtw-f{
  width: 12%;
}
.dtw-g{
  width: 12%;
}
@media screen and (max-width: 768px) {
  .dtw-a{
    width: 15%;
  }
  .dtw-c{
    width: 20%;
  }
  .dtw-h{
    width: 40%;
  }
  .dtw-i{
    width: 25%;
  }
}

.part {
  border-bottom: 0.5px solid #fff; /* 境界線の色と太さを設定 */
  padding: 5px 0; /* テキストと境界線の間隔を設定 */
}
.part:last-child {
  border-bottom: none; /* 最後の要素の境界線を削除 */
}
.part-2 {
  border-bottom: 0.5px solid #838382; /* 境界線の色と太さを設定 */
  padding: 5px 0; /* テキストと境界線の間隔を設定 */
}
.part-2:last-child {
  border-bottom: none; /* 最後の要素の境界線を削除 */
}
.part-3 {
  border-bottom: 1px solid #838382; /* 境界線の色と太さを設定 */
  padding: 5px 0; /* テキストと境界線の間隔を設定 */
}
.part-3:last-child {
  border-bottom: none; /* 最後の要素の境界線を削除 */
}

/*========= sessions new ===============*/
.background-image-layer {
  background-image: url('/images/login_bg_image.png');
  background-repeat: no-repeat;
  background-position: center calc(50% - 550px);
  background-attachment: fixed;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: 100%;
}

.typing {
  height: 30vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.typing-effect {
  width: 14ch;
  animation: typing 2s steps(14), effect .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 4em;
  font-family: 'Libre Baskerville', serif;
  text-shadow: 2px 2px 4px #fff;
}
@media screen and (max-width: 768px) {
  .typing-effect {
    font-size: 1.8em;
  }
  .typing {
    height: 60vh;
  }
  .background-image-layer{
    background-position: center center;
    /*background-position: center calc(50% - 80px);*/
  }
}

@keyframes typing {
  from {
    width: 0
  }
}

@keyframes effect {
  50% {
    border-color: transparent
  }
}

.login-main {
  margin-top: 50px;
  /*margin-bottom: 200px;*/
  /*z-index: 0;*/
}

.logo-img img {
  width: 400px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .logo-img img {
    width: 250px;
    height: auto;
  }
}
/*
.sessions .footer {
  display: none;
}*/

/*========= contract index ===============*/
#contract-table td, #contract-table th{
  font-size: 0.8em!important;
  padding-top: 0px!important;
  padding-bottom: 0px!important;
}

.ctw-a{
  width: 5%;
}
.ctw-b{
  width: 8%;
}
.ctw-c{
  width: 10%;
}
.ctw-d{
  width: 12%;
}
.ctw-e{
  width: 11%;
}
.ctw-f{
  width: 7%;
}
.ctw-g{
  width: 8%;
}
.ctw-h{
  width: 9%;
}
.ctw-i{
  width: 15%;
}
.ctw-j{
  width: 15%;
}
@media screen and (max-width: 768px) {
  .ctw-a{
    width: 10%;
  }
  .ctw-b{
    width: 10%;
  }
  .ctw-c{
    width: 40%;
  }
  .ctw-d{
    width: 40%;
  }
}

/*========= user index ===============*/
.utw-a{
  width: 3%;
}
.utw-b{
  width: 6%;
}
.utw-c{
  width: 11%;
}
.utw-d{
  width: 13%;
}
.utw-e{
  width: 12%;
}
.utw-j{
  width: 12%;
}
.utw-f{
  width: 3%;
}
.utw-g{
  width: 23%;
}
.utw-h{
  width: 17%;
}
@media screen and (max-width: 768px) {
  .utw-a{
    width: 10%;
  }
  .utw-b{
    width: 25%;
  }
  .utw-c{
    width: 35%;
  }
  .utw-d{
    width: 30%;
  }
}

.rank {
  color: #ad9a7a;
  border: 1px solid #ad9a7a;
  border-radius: 4px;
}
@media (hover: hover) {
  .rank:hover {
    opacity: 0.4;
  }
}

/*========= user ranking ===============*/
.rank-content {
  border-bottom: 1px solid #d2b978;
  padding: 5px 0;
  opacity: 0;
}

@media screen and (max-width: 768px) {
  .width-05 { width: 100px; }

}
/*========= user show ===============*/
.custom-tab-link {
  padding: 0px;
}

.my-page-haed {
  border-bottom: solid 1px #838382;
}

/* タブ表示  */
/* ulのデフォルトスタイルを消去 */
.tabs-menu {
  margin-bottom: 0;
  padding: 0;
  list-style-type: none;
}

/* タブの基本スタイル */
.tabs-menu li {
  float: left;
  margin-right: 3px;
  /*margin-bottom: -1px;*/
  border-style: solid;
  border-width: 1px;
  border-color: transparent;
  border-radius: 4px 4px 0 0;
  height: 50px;
  background-color: #f5f5f5;
  /* 各プロパティをふわっと変える演出 */
  transition: all .15s;
}
.tabs-menu a {
  display: block;
  padding: 10px 1px;
  color: #a3a3a3;
  text-decoration: none;
  font-size: 1.1em;
  /*font-weight: bold;*/
}

/* 非選択のタブにマウスカーソルを乗せたら色を変える */
@media screen and (min-width: 768px) {
  .tabs-menu li:not(.active):hover {
    /*border-color: #f0f0f0 #f0f0f0;*/
    background-color: #d6d6d6;
  }
}
/* 選択中のタブの色を設定 */
.tabs-menu .active {
  border-color: #f5f5f5 #f5f5f5 transparent #f5f5f5;
  background-color: #fcf7f0;
}
.tabs-menu .active a {
  color: #ad9a7a;
}

/* タブコンテンツ表示エリア */
.tabs-content {
  clear: both;
  border: 1px solid #fcf7f0;
  border-radius: 0 0 4px 4px;
  padding: 10px;
  background-color: #fcf7f0;
  border-top: none;
  margin-right: 12px;
}

/* 各タブのコンテンツはデフォルトで非表示 */
.tabs-content section {
  display: none;
}

.fa{
transition: ease-in-out 100ms;
}
.rotate-fa{
transform: rotate(180deg);
}

.accordion-title {
  border-bottom: solid 1px #a8883d;
}

.accordion-title .fa{
float: right;
margin-right: 7px;
line-height: 25px;
}

.accordion-content {
    display: none;
}

.usage-on {
  color: #8B7857;
  border-bottom: none;
}

/* table(contracts)表示  */
.usctw-a { width: 15%; }
.usctw-b { width: 27%; }
.usctw-c { width: 28%; }
.usctw-d { width: 15%; }
.usctw-e { width: 15%; }
@media screen and (max-width: 768px) {
  .usctw-a { width: 10%; }
  .usctw-b { width: 55%; }
  .usctw-c { width: 35%; }
}

/* table(rewards)表示  */
.usrtw-a { width: 10%; }
.usrtw-b { width: 10%; }
.usrtw-c { width: 18%; }
.usrtw-d { width: 20%; }
.usrtw-e { width: 20%; }
.usrtw-f { width: 12%; }
@media screen and (max-width: 768px) {
  .usrtw-a { width: 35%; }
  .usrtw-b { width: 35%; }
  .usrtw-c { width: 30%; }
}

.icon-overlay {
  position: relative;
  display: inline-block;
}

.icon-overlay .text-danger {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%); /* アイコンを要素の外に少し移動させる */
}



.earning-contents {
  border-bottom: solid 1px #808080;
}

.status-disply {
  background-color: #109954;
  color: #fff;
  pointer-events: none; /* マウスイベントを無効にする */
  cursor: default; /* マウスカーソルをデフォルトにする */
}

.status-disply-2 {
  background-color: #696969;
  color: #fff;
  pointer-events: none; /* マウスイベントを無効にする */
  cursor: default; /* マウスカーソルをデフォルトにする */
}

/* table(points)表示
.usptw-a { width: 25%; }
.usptw-b { width: 25%; }
.usptw-c { width: 20%; }
.usptw-d { width: 30%; }
.usptw-e { width: 60%; }*/

/* 質問のバッジ表示  */
.badge-open {
  border-radius: 15px;
  background-color: #7B7791;
  padding: 1px 10px;
  color: #fff;
}
.badge-solved {
  border-radius: 15px;
  background-color: #4F7068;
  padding: 1px 10px;
  color: #fff;
}

/*========= user edit ===============*/
.profile-image {
  border: 2px solid #d2b978;
  border-radius: 15px;
}

#imagePreview, #croppedImagePreview {
  max-width: 150px;
  height: auto; /* 縦横比を維持 */
  border: 2px solid #d2b978;
  border-radius: 15px;
}

.cropper-container {
  width: 150px;
  height: auto; /* 縦横比を維持 */
  max-height: 400px;
}

/*========= help index ===============*/
/* 1階層目のスタイル */
.help-accordion-title {
  background-color: #D0C1A7;
  border: 1px solid #AD9A7A;
  color: #333333;
  padding: 10px;
  cursor: pointer;
  border-radius: 7px;
}

.help-accordion-content {
  border: 1px solid #ccc;
  background-color: #FDF2E1;
  border-radius: 0 0 4px 4px;
}

/* 2階層目のスタイル */
.help-accordion-content .help-accordion-title {
  background-color: #D0C1A7;
  color: #333333;
  padding: 10px;
  border: 1px solid #AD9A7A;
  cursor: pointer;
  border-radius: 4px;
}

.help-accordion-content .help-accordion-content {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #AD9A7A;
  border-radius: 0 0 4px 4px;
}

.help-usage-on {
  background-color: #ad9a7a!important;
  color: #fff!important;
  border-bottom: none!important;
  border-radius: 4px 4px 0 0!important;
}

.img-size {
  width: 50%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .img-size {
    width: 100%;
    height: auto;
  }
}

.img-size-2 {
  width: 100%;
  height: auto;
}

.highlight-text {
  position: relative;
  color: red;
}

.highlight-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;  /* 50% の高さから開始 */
  width: 100%;
  height: 50%;  /* 下半分の高さ */
  background-color: yellow;  /* マーカー色 */
  z-index: -1;  /* テキストの背後 */
}

#s-help-b {
  cursor :pointer;
}
#help-btn {
  display: none;
}

/*========= appointment new ===============*/
.radio-group {
  display: flex;
  align-items: center;
}

.radio-option {
  display: flex;
  align-items: center;
}


/*========= ip_ponts index ===============*/
.iptw-a{
  width: 10%;
}
.iptw-b
{
  width: 5%;
}
.iptw-c{
  width: 15%;
}
.iptw-d{
  width: 15%;
}
.iptw-e{
  width: 55%;
}
@media screen and (max-width: 768px) {
  .iptw-a{
    width: 23%;
  }
  .iptw-b{
    width: 27%;
  }
  .iptw-c{
    width: 50%;
  }
}

.remarks-counter-over {
  color: #dc3545;
  font-weight: bold;
}

/*========= question show ===============*/
/* プロフィール写真 */
.question-prf {
  border-radius: 5px;
}
/* 質問ボックス */
.question-border {
  border-radius: 10px;
  border: 1px solid #5D5978;
}

/* コメント吹き出し */
.balloon {
  position: relative;
  display: inline-block;
  padding: 10px 12px;
  background: #FDF2E1;
  border: solid 2px #AD9A7A;
  box-sizing: border-box;
  border-radius: 15px;
  width: 100%;
}

.balloon:before {
  content: "";
  position: absolute;
  top: -24px;
  left: 10%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-bottom: 13px solid #FDF2E1;
  z-index: 2;
}

.balloon:after {
  content: "";
  position: absolute;
  top: -30px;
  left: 10%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-bottom: 14px solid #AD9A7A;
  z-index: 1;
}

.balloon p {
  margin: 0;
  padding: 0;
}

/* ベストアンサー表示 */
.best-answer-view {
  background: linear-gradient(to top, #FFCCCC, #FFE6E6);
  /*background-color: #FFCCCC;*/
  color: #B75E5E;
  border-radius: 10px;
  padding: 3px 20px;
}

/* ページ下部に固定するボタンのスタイル */
.answer-button {
  position: fixed;
  background: linear-gradient(to top, #FFCCCC, #FFE6E6);
  color: #B75E5E;
  border-radius: 10px;
  width: 40%;
  padding: 10px;
  bottom: 20px; /* ページの下からの位置 */
  left: 50%; /* 左端から画面の中央までの位置 */
  transform: translateX(-50%); /* 要素の幅の半分だけ左に移動 */
  z-index: 997; /* 他の要素より上に表示 */
}
@media screen and (max-width: 768px) {
  .answer-button { width: 97%; }
}

@media (hover: hover) {
  .answer-button:hover{
    opacity: 0.8;
    color: #dc143c;
  }
}

.resolved {
  position: fixed;
  background-color: #dcdcdc;
  color: #B75E5E;
  border-top: 1px solid #B75E5E;
  border-bottom: 1px solid #B75E5E;
  /*border-radius: 10px;*/
  width: 55%;
  padding: 10px;
  bottom: 20px; /* ページの下からの位置 */
  left: 50%; /* 左端から画面の中央までの位置 */
  transform: translateX(-50%); /* 要素の幅の半分だけ左に移動 */
  z-index: 997; /* 他の要素より上に表示 */
}
@media screen and (max-width: 768px) {
  .resolved { width: 100%; }
}

#modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  background: white;
  width: 40%;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 768px) {
  #modal { width: 90%; }
}

#modal-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 998;
}

#closeModal { cursor :pointer; }


/*========= question index ===============*/
/* タブ表示  */
/* ulのデフォルトスタイルを消去 */
.tabs-menu-2 {
  margin-bottom: 0;
  padding: 0;
  list-style-type: none;
}

/* タブの基本スタイル */
.tabs-menu-2 li {
  float: left;
  margin-right: 3px;
  /*margin-bottom: -1px;*/
  border-style: solid;
  border-width: 1px;
  border-color: transparent;
  border-radius: 4px 4px 0 0;
  height: 50px;
  background-color: #f5f5f5;
  /* 各プロパティをふわっと変える演出 */
  transition: all .15s;
}
.tabs-menu-2 a {
  display: block;
  padding: 10px 1px;
  color: #a3a3a3;
  text-decoration: none;
  font-size: 1.1em;
  /*font-weight: bold;*/
}

/* 非選択のタブにマウスカーソルを乗せたら色を変える */
@media screen and (min-width: 768px) {
  .tabs-menu-2 li:not(.active):hover {
    /*border-color: #f0f0f0 #f0f0f0;*/
    background-color: #d6d6d6;
  }
}
/* 選択中のタブの色を設定 */
.tabs-menu-2 .active {
  border-color: #f5f5f5 #f5f5f5 transparent #f5f5f5;
  background-color: #fcf7f0;
  font-size: 1.1em;
}
.tabs-menu-2 .active a {
  color: #ad9a7a;
}

/* 質問 */
.question-border-2 {
  border-radius: 10px;
  border: 1px solid #ad9a7a;
  background-color: #fff;
}

@media (hover: hover) { 
  .question-index-link:hover { color: #ad9a7a!important; } 
}
.question-index-link:active { color: #ad9a7a; }

/*========= user profile ===============*/
.profile-border {
  border: 1px solid #838382;
  border-radius: 10px;
}

/*========= count_kpi ===============*/
.cout-kpi-tb-a{ width: 30%!important; }
.cout-kpi-tb-b{ width: 20%!important; }
/*.cout-kpi-tb-c{ width: 20%; }
.cout-kpi-tb-d{ width: 5%; }
.cout-kpi-tb-e{ width: 31%; }
.cout-kpi-tb-f{ width: 23%; }
.cout-kpi-tb-g{ width: 10%; }
.cout-kpi-tb-h{ width: 33%; }
.kpi-table td { width: 20% }*/

.accordion-title-2 {
  border-bottom: solid 1px #a8883d;
}

.accordion-title-2 .fa{
float: right;
margin-right: 7px;
line-height: 25px;
}

.accordion-content-2 {
    display: none;
}

.kpi-fill-commit {
  color: rgba(255, 127, 127, 1)
}
.kpi-fill-achi {
  color: rgba(76, 153, 153, 1)
}
.kpi-fill-rate {
  color: rgba(162, 205, 75, 1)
}

.kpi-progress-bar_1 {
  background-color: #547768;
}

.kpi-progress-bar_2 {
  background-color: #AA5939;
}

.progress-container {
  position: relative;
  width: 100%;
}

.progress {
  border-radius: 12px;
}

.progress-marks {
  position: absolute;
  width: 99%;
  top: 28px;
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .progress-marks { width: 97%; }
}

.mark- {
  position: absolute;
  top: 0;
  font-size: 9px;
}

/*========= feedback ===============*/
.feedback-comment {
  border-radius: 10px;
  background-color: #f5f2e9;
}

.responsive-image {
  width: 100%; /* 親要素の幅に合わせる */
  height: auto; /* アスペクト比を維持 */
  object-fit: contain; /* 画像が切れないように調整 */
}


/*========= cp index ===============*/
.cptw-a{width: 15%; }
.cptw-b{width: 45%; }
.cptw-c{width: 20%; }
.cptw-d{width: 10%; }
.cptw-e{width: 10%; }
@media screen and (max-width: 768px) {
  .cptw-a{width: 10%; }
  .cptw-b{width: 70%; }
  .cptw-c{width: 20%; }
}

/*========= cp show ===============*/
/* チェックインボタン */
.btn-check-in {
  background: url('/images/btn_check_in.png') no-repeat center center;
  background-size: contain;
  width: 240px;
  height: 240px;
  border: none;
  outline: none;             /* ← クリック時の枠を非表示 */
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

.btn-check-in:hover {
  filter: brightness(1.15);
  transform: scale(1.05);
}

.btn-check-in:active {
  filter: brightness(0.8);
  transform: scale(0.95);
}

/* フォーカス枠も完全に無効化 */
.btn-check-in:focus {
  outline: none;
  box-shadow: none;
}


/*========= cp_users completion ===============*/
.checkin-completion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
}

.checkin-video {
  width: 100%;
  max-width: 480px;
}