/* ====== Insurance Card  ====== */
.area-syusin {
  border-left: 10px solid #FF7A34;
}
.area-teiki{
  border-left: 10px solid #67BBE6;
}
.area-gakusi {
  border-left: 10px solid #F0909B;
}
.area-choju {
  border-left: 10px solid #00ADC4;
}
.area-yoro {
  border-left: 10px solid #00A7F0;
}
.p-mg0 {
  margin: 0;
}
.title-mg {
  margin: 0.2rem 0 0 0;
}

.insurance-card {
  border: 2px solid #D3D3D3;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  transition: border-color 0.3s;
  max-width: 100%;
}

.insurance-card label {
  display: flex;
  align-items: stretch;
}

.label-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-left {
  width: 50px;
  background: #EDEDED;
  position: relative;
  flex-shrink: 0;
}

.checkmark {
  width: 32px;
  height: 32px;
  border: 2px solid #B3B3B3;
  border-radius: 4px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.insurance-card.checked {
  border-color: #0061d5 !important;
}

.insurance-card.checked .card-left {
  background: #0061d5 !important;
}

.insurance-card.checked .checkmark {
  background: #0061d5 !important;
  border-color: #0061d5 !important;
}

.insurance-card.checked .checkmark::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 3px;
  width: 12px;
  height: 18px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.divider {
  width: 100%;
  border: none;
  border-top: 1px solid #ccc;
  margin: 16px 0;
  flex-shrink: 0;
  align-self: stretch;
}

.description {
  margin: 0;
  color: #333;
  font-size: 0.85rem;
  line-height: 1.5;
}

.card-icon img,
.sp-card-icon img {
  width: 100%;
  height: auto;
  display: block;
}

.plan-type {
  background: #0061d5;
  color: #fff;
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  width: fit-content;
}

/* PC / SP コントロール */
.pc-only,
.sp-only {
  display: none;
}

/* ====== PC 画面設定  ====== */
@media screen and (min-width: 768px) {
  .pc-only {
    display: block;
  }

  .card-main {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .card-icon {
    width: 130px;
    height: 130px;
    margin-right: 1.75rem;
    flex-shrink: 0;
  }

  .hoken-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hoken-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .checked-bar-inner {
    display: flex;
    width: 100%;
    justify-content: center;
    position: relative;
    flex-wrap: wrap;
    align-items: center;
  }

  .checked-info {
    right: 0;
    color: #fff;
    font-size: 16px;
    margin-left:28px;
  }

  #btn_submit_fixed {
    min-width: 300px;
  }

  #checked-count {
    font-size: 25px;
  }

  .card-cancer{
    display: flex;
    align-items: center;
    flex: 1;
    margin-top: -10px;
  }
}

/* ====== SP 画面設定 ====== */
@media screen and (max-width: 767px) {
  .sp-only {
    display: block;
  }

  .sp-card-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .sp-card-icon {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
  }

  .sp-hoken-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .sp-hoken-text span {
    display: block;
  }

  .checked-fixed-bar {
    flex-direction: column;
    align-items: center;
  }

  .checked-bar-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 5px;
  }
  
  .checked-info {
    order: 1;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    text-align: center;
  }
  
   .st-Btn11__request {
    order: 2;
    width: 90%;
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
  }

  .st-Btn11__request .d-flex-center5 {
    justify-content: center;
  }

  #btn_submit_fixed {
    order: 2;
    min-width: 250px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom-width: 5px;
    margin-top: 10px;
  }

  #checked-count {
    font-size: 22px;
  }

  /* input SP 4px */
  .input-sp-mgb{
    margin-bottom: 4px;
  }

  .sp-card-cancer{
    width: 80px;
    height: auto;
    flex-shrink: 0;
  }

  .approval-number-sp {
    font-size: 0.75rem;
    margin-top: 4px;
  }
}

/* ====== 下段固定バー (PC/SP 共通) ====== */
#checked-fixed-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4); 
  z-index: 1000;
  display: flex;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none; 
}

.checked-info {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}


#checked-fixed-bar.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ====== container_request ====== */
.container_request {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 767px) {
  .container_request {
    padding-right: 8px;
    padding-left: 8px;
  }
}

@media (min-width: 576px) {
  .container_request {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container_request {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container_request {
    max-width: 960px;
  }
}

@media (min-width: 1230px) {
  .container_request {
    max-width: 1000px;
  }
}

.area-cancer{
  border-left: 10px solid #0870E4;
}

.cancer-font-color{
  color:#116DD3;
}

.cancer-bg-color{
  background-color: #EEF7FE;
}

.hanbai-divider {
  width: 200px;
  border: none;
  border-top: 2px solid #B3B3B3;
  margin-top:-10px;
  flex-shrink: 0;
  align-self: stretch;
}

.hoken-divider{
  border: none;
  border-top: 5px solid #ccc;
  color: #fff;
  background-color: #fff;
  height: 1px;
  width: 100%;
}

.cancer-text{
   font-size: 0.85rem;
}

.cancer-image-area{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  margin-bottom: -15px;
}

.cancer-image{
  width: 100px;
  height: auto;
  margin-left: auto; 
  flex-shrink: 0;
  background-color: white;
  padding: 6px 8px 6px 8px;
}

.cancer-card-header {
  display: flex;
  justify-content: space-between; 
  align-items: center; 
}

.cancer-card-header .text-area {
  flex: 1; 
}

.approval-number {
  font-size: 0.75rem;
  text-align: center;
  margin-top: 4px;
}

.cancer-margin{
  margin-bottom: -15px;
}