/* page/_profile.scss
============================== */
.profile_body {
    /* profile
    /* ------------------------------ */ }
  .profile_body .profile {
    display: block;
    /*width: 595px;*/
    /*height: 842px;*/
    background: #FFFFFF;
    padding: 60px;
    /* ------ head ------ */
    /* ------ addressee ------ */
    /* ------ total ------ */
    /* ------ taxation ------ */
    /* ------ breakdown ------ */
    /* ------
    place
    date
    isued
    ------ */
    /* ------ company ------ */ }
  .profile_body .profile .table-head {
    width: 100%;
    margin-bottom: 50px; }
  .profile_body .profile .table-head td {
    width: 33.333%; }
  .profile_body .profile .table-head td:nth-child(1) span {
    font-size: 10px;
    color: #EA7070;
    border: 1px solid #EA7070;
    padding: 5px 20px; }
  .profile_body .profile .table-head td:nth-child(2) {
    font-size: 16px;
    text-align: center; }
  .profile_body .profile .table-head td:nth-child(2) span {
    display: block;
    font-size: 10px; }
  .profile_body .profile .table-head td:nth-child(3) {
    font-size: 12px;
    text-align: right; }
  .profile_body .profile .table-addressee {
    width: 100%;
    margin-bottom: 30px;
    position: relative; }
  .profile_body .profile .table-addressee::after {
    content: "";
    display: block;
    width: 100%;
    border-bottom: 1px solid #064583;
    padding-bottom: 5px;
    position: absolute; }
  .profile_body .profile .table-addressee td {
    font-size: 12px;
    vertical-align: bottom; }
  .profile_body .profile .table-addressee td:nth-child(1) {
    width: 20%;
    border-left: 3px solid #064583;
    padding: 0 10px; }
  .profile_body .profile .table-addressee td:nth-child(1) span {
    display: block;
    font-size: 10px; }
  .profile_body .profile .table-addressee td:nth-child(2) {
    text-align: left;
    font-size: 16px;
  }
  .profile_body .profile .table-addressee td:nth-child(3) {
    width: 5%;
    text-align: right;
    font-size: 16px;
  }
  
  .profile_body .profile .table-addressee-total {
    width: 100%;
    margin-bottom: 20px;
    position: relative; }
    .profile_body .profile .table-addressee-total::before {
      content: "";
      display: block;
      width: 100%;
      position: absolute;
      border-bottom: 2px solid #064583;
      bottom: -8px;
  }
  .profile_body .profile .table-addressee-total::after {
    content: "";
    display: block;
    width: 100%;
    border-bottom: 1px solid #064583;
    padding-bottom: 10px;
    position: absolute; }
  .profile_body .profile .table-addressee-total td {
    font-size: 12px;
    vertical-align: bottom; }
  .profile_body .profile .table-addressee-total td:nth-child(1) {
    width: 20%;
    border-left: 3px solid #064583;
    padding: 0 10px; }
  .profile_body .profile .table-addressee-total td:nth-child(1) span {
    display: block;
    font-size: 10px; }
  .profile_body .profile .table-addressee-total td:nth-child(2) {
    text-align: left;
    font-size: 16px;
  }
  .profile_body .profile .table-addressee-total td:nth-child(3) {
    width: 5%;
    text-align: right;
    font-size: 16px;
  }
  
  .profile_body .profile .table-total {
    width: 100%;
    margin-bottom: 25px;
    margin-bottom: 15px;
    position: relative; }
  .profile_body .profile .table-total::before, .profile_body .profile .table-total::after {
    content: "";
    display: block;
    width: 100%;
    position: absolute; }
  .profile_body .profile .table-total td {
    font-size: 12px;
    vertical-align: bottom; }
  .profile_body .profile .table-total td:nth-child(1) {
    width: 20%;
    padding: 0 12px; }
  .profile_body .profile .table-total td:nth-child(1) span {
    display: block;
    font-size: 10px; }
  .profile_body .profile .table-total td:nth-child(2) {
    width: 30%;
    font-size: 16px;
    text-align: right;
    padding: 0 2px; }
  .profile_body .profile .table-total td:nth-child(1).utiwake {
    width: 30%;
    font-size: 12px;
    line-height: 24px;
    text-align: right;
   }
  .profile_body .profile .table-total td:nth-child(2).utiwake {
    width: 30%;
    font-size: 12px;
    line-height: 24px;
    text-align: right;
     }
  .profile_body .profile .table-total td:nth-child(3) {
    width: 19%;
    padding: 0 10px; }
  .profile_body .profile .table-total td:nth-child(3) span {
    display: block;
    font-size: 10px; }
  .profile_body .profile .table-total td:nth-child(4) {
    width: 31%;
    text-align: right;
    padding-left: 10px; }
  .profile_body .profile .taxation-container {
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding-bottom: 15px; }
  .profile_body .profile .taxation-container .inner-l {
    padding-right: 10px; }
  .profile_body .profile .taxation-container .inner-r {
    padding-left: 10px; }
  .profile_body .profile .taxation-container .inner-l,
  .profile_body .profile .taxation-container .inner-r {
    width: 50%; }
  .profile_body .profile .taxation-container .inner-l table,
  .profile_body .profile .taxation-container .inner-r table {
    width: 100%; }
  .profile_body .profile .taxation-container .inner-l table tr,
  .profile_body .profile .taxation-container .inner-r table tr {
    /*border-bottom: 1px solid #064583;*/
  }
  .profile_body .profile .taxation-container .inner-l table tr th,
  .profile_body .profile .taxation-container .inner-r table tr th {
    font-weight: normal;
    text-align: left;
    /*padding: 5px 10px 5px 0;*/
  }
  .profile_body .profile .taxation-container .inner-l table tr th span,
  .profile_body .profile .taxation-container .inner-r table tr th span {
    display: block;
    font-size: 10px; }
  .profile_body .profile .taxation-container .inner-l table tr td,
  .profile_body .profile .taxation-container .inner-r table tr td {
    text-align: right;
    /*padding: 5px 0; */
  }
  .profile_body .profile .table-breakdown {
    width: 48%;
    float: left;
    margin: 0 2% 20px 0;
    position: relative; }
  .profile_body .profile .table-breakdown::before, .profile_body .profile .table-breakdown::after {
    content: "";
    display: block;
    width: 100%;
    position: absolute; }
  .profile_body .profile .table-breakdown::before {
    border-bottom: 2px solid #064583;
    bottom: 0; }
  .profile_body .profile .table-breakdown::after {
    border-bottom: 1px solid #064583;
    bottom: -3px; }
  .profile_body .profile .table-breakdown td {
    font-size: 12px; }
  .profile_body .profile .table-breakdown td.breakdown {
    width: 29%;
    text-align: center;
    padding: 0 5px; }
  .profile_body .profile .table-breakdown td.breakdown span {
    display: block;
    font-size: 10px; }
  .profile_body .profile .table-breakdown td.head {
    width: 41%;
    vertical-align: bottom;
    padding: 5px 10px 5px 0; }
  .profile_body .profile .table-breakdown td.head span {
    display: block;
    font-size: 10px; }
  .profile_body .profile .table-breakdown td.price {
    width: 30%;
    text-align: right;
    vertical-align: bottom;
    padding: 5px 0 5px 10px; }
  .profile_body .profile .table-breakdown tr:not(:last-child) .head,
  .profile_body .profile .table-breakdown tr:not(:last-child) .price {
    border-bottom: 1px solid #064583; }
  .profile_body .profile .table-place,
  .profile_body .profile .table-date,
  .profile_body .profile .table-issued {
    width: 48%;
    float: right;
    margin: 11px 0 20px 2%;
    position: relative; }
  .profile_body .profile .table-place::after,
  .profile_body .profile .table-date::after,
  .profile_body .profile .table-issued::after {
    content: "";
    display: block;
    width: 100%;
    border-bottom: 1px solid #064583;
    padding-bottom: 5px;
    position: absolute; }
  .profile_body .profile .table-place td,
  .profile_body .profile .table-date td,
  .profile_body .profile .table-issued td {
    font-size: 12px;
    vertical-align: bottom; }
  .profile_body .profile .table-place td:nth-child(1),
  .profile_body .profile .table-date td:nth-child(1),
  .profile_body .profile .table-issued td:nth-child(1) {
    width: 40%;
    border-left: 3px solid #064583;
    padding: 0 10px; }
  .profile_body .profile .table-place td:nth-child(1) span,
  .profile_body .profile .table-date td:nth-child(1) span,
  .profile_body .profile .table-issued td:nth-child(1) span {
    display: block;
    font-size: 10px; }
  .profile_body .profile .table-place td:nth-child(2),
  .profile_body .profile .table-date td:nth-child(2),
  .profile_body .profile .table-issued td:nth-child(2) {
    width: 60%;
    text-align: right;
    padding-left: 10px; }
  .profile_body .profile .company {
    float: right;
    text-align: right; }
  .profile_body .profile .company svg {
    width: 105px; }
  .profile_body .profile .company .name {
    font-size: 12px; }
  .profile_body .profile .company .address {
    font-size: 10px; }
  
  /* page/_profile.scss
  ============================== */
  .profile {
    /* head_tit
    /* ------------------------------ */
    /* section--profile
    /* ------------------------------ */ }
  .profile .wrap {
    background: url(../../assets/img/common/hama.jpg) center center/cover no-repeat;
    background-attachment: fixed;
    width: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0; }
  .profile .main {
    padding: 40px 0 100px; }
  .profile .section--head_tit {
    width: 100%;
    background: #F1F1F1;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 888;
    margin: 0 auto;
    height: 40px;
    padding: 10px 5%; }
  .profile .section--profile {
    padding: 0 5%; }
  .profile .section--profile .inner {
    background: #FFFFFF;
    padding: 20px 5% 40px;
    /* ------ num ------ */
    /* ------ issued ------ */
    /* ------ addressee ------ */
    /* ------------ profile-area ------------ */ }
  .profile .section--profile .inner .profile__num {
    font-size: 14px;
    font-weight: 700;
    position: relative;
    padding-left: 12px;
    margin-bottom: 15px;
    margin-top: 30px; }
  .profile .section--profile .inner .profile__num::before {
    content: "";
    display: inline-block;
    height: 20px;
    border-left: 2px solid #D27B22;
    position: absolute;
    top: 1px;
    left: 0; }
  .profile .section--profile .inner .profile__issued {
    font-size: 12px;
    margin-bottom: 20px; }
  .profile .section--profile .inner .profile__addressee {
    font-size: 12px;
    margin-bottom: 10px; }
  .profile .section--profile .inner input,
  .profile .section--profile .inner select,
  .profile .section--profile .inner textarea {
    display: block;
    width: 100%;
    background-color: #F1F1F1;
    border: 1px solid #C6C6C6;
    border-radius: 0;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 14px;
  }
  .profile .section--profile .inner input::placeholder {
    color: #C6C6C6; }
  .profile .section--profile .inner input + span {
    font-size: 12px; }
  .profile .section--profile .inner .btn {
    margin: 0 auto; }
  .profile .section--profile .inner .profile-area {
  }
  .profile .section--profile .inner select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5L1 1' stroke='%23C6C6C6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
  }
  .profile .section--profile .inner .radio-group,
  .profile .section--profile .inner .checkbox-group,
  .profile .section--profile .inner .postal-code-group,
  .profile .section--profile .inner .license-plate-group {
    margin-bottom: 20px;
  }
  .profile .section--profile .inner .profile__num:first-child {
    margin-top: 0;
  }
  .profile .section--profile .inner input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9 1L5 5L1 1' stroke='%23C6C6C6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
  }
  .profile .section--profile .inner .required {
    color: #EA7070;
  }
  .profile .section--profile .inner .postal-code-group {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  .profile .section--profile .inner .postal-code-group input {
    width: 100%;
    margin-bottom: 0;
  }
  .profile .section--profile .inner .postal-code-group .btn {
    width: auto;
    min-width: 100px;
    margin: 0;
    border-radius: 100px;
    text-align: center;
    padding: 10px 20px;
  }
  .profile .section--profile .inner .license-plate-group {
    display: flex;
    gap: 5px;
    align-items: center;
    margin: 0 0 20px 0;
    justify-content: flex-start;
    width: 100%;
  }
  .profile .section--profile .inner .license-plate-group select {
    width: 120px;
    min-width: 120px;
    flex: 0 0 auto;
    padding: 0 5px;
    line-height: 44px;
    font-size: 14px;
    background-color: #F1F1F1;
    border: 1px solid #C6C6C6;
    border-radius: 0;
  }
  .profile .section--profile .inner .license-plate-group .plate-hiragana {
    width: 45px;
    text-align: center;
    padding: 0 2px;
  }
  .profile .section--profile .inner .license-plate-group .plate-classification {
    width: 60px;
    text-align: center;
    padding: 0 2px;
  }
  .profile .section--profile .inner .license-plate-group .plate-number {
    width: 80px;
    text-align: center;
    padding: 0 2px;
  }
  .profile .section--profile .inner .license-plate-group input::placeholder {
    color: #C6C6C6;
    text-align: center;
    line-height: 44px;
  }
  .profile .section--profile .inner .license-plate-group input {
    text-align: center;
    padding: 0 5px;
    margin: 0;
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    background-color: #F1F1F1;
    border: 1px solid #C6C6C6;
    border-radius: 0;
  }
  .profile .section--profile .inner input:hover,
  .profile .section--profile .inner select:hover,
  .profile .section--profile .inner textarea:hover,
  .profile .section--profile .inner input:focus,
  .profile .section--profile .inner select:focus,
  .profile .section--profile .inner textarea:focus {
    border-color: #C6C6C6;
    outline: none;
  }

  /* ラジオボタングループのスタイル */
  .profile .section--profile .inner .radio-group {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
  }

  .profile .section--profile .inner .radio-group label {
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  /* アレルギーチェックボックスのスタイル */
  .profile .section--profile .inner .allergy-group {
    margin-bottom: 30px;
    transition: all 0.3s ease;
  }

  .profile .section--profile .inner .allergy-category {
    font-size: 14px;
    font-weight: 700;
    position: relative;
    padding-left: 12px;
    margin-bottom: 15px;
    margin-top: 30px;
  }

  .profile .section--profile .inner .allergy-category::before {
    content: "";
    display: inline-block;
    height: 20px;
    border-left: 2px solid #D27B22;
    position: absolute;
    top: 1px;
    left: 0;
  }

  .profile .section--profile .inner .allergy-item {
    margin-bottom: 0;
    padding: 10px;
    border-radius: 0;
    background-color: #f8f8f8;
  }

  .profile .section--profile .inner .allergy-item:first-of-type {
    border-radius: 4px 4px 0 0;
  }

  .profile .section--profile .inner .allergy-item:last-of-type {
    border-radius: 0 0 4px 4px;
    margin-bottom: 15px;
  }

  .profile .section--profile .inner .main-allergy {
    margin-bottom: 10px;
  }

  .profile .section--profile .inner .main-allergy label {
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    width: fit-content;
  }

  .profile .section--profile .inner .sub-allergies {
    padding-left: 25px;
    margin-top: 8px;
    display: none;
  }

  .profile .section--profile .inner .sub-allergies label {
    display: block;
    margin-bottom: 8px;
    font-weight: normal;
    cursor: pointer;
  }

  .profile .section--profile .inner .sub-allergies label span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
  }

  .profile .section--profile .inner .sub-allergies label input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
  }

  /* チェックボックスとラジオボタンの共通スタイル */
  .profile .section--profile .inner input[type="checkbox"],
  .profile .section--profile .inner input[type="radio"] {
    width: auto;
    margin: 0 8px 0 0;
    cursor: pointer;
  }

  /* セレクタを修正 - チェックボックスがチェックされた時の親要素配下のsub-allergiesを表示 */
  .profile .section--profile .inner .main-allergy label input[type="checkbox"]:checked ~ .sub-allergies,
  .profile .section--profile .inner .allergy-item:has(.main-allergy input[type="checkbox"]:checked) .sub-allergies {
    display: block;
  }

  /* アレルギー情報の表示制御 */
  .profile .section--profile .inner .allergy-group {
    margin-bottom: 30px;
    transition: all 0.3s ease;
  }

  /* アニメーションを追加 */
  .profile .section--profile .inner .allergy-group[style*="display: block"] {
    animation: fadeIn 0.3s ease;
  }

/* 趣味/嗜好画面のタイトル */
.profile .section--profile .inner .osirase-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* アレルギーチェックボックスのスタイル */
.profile .section--profile .inner .osirase-group {
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

.profile .section--profile .inner .osirase-category {
  font-size: 14px;
  font-weight: 700;
  position: relative;
  padding-left: 12px;
  margin-bottom: 15px;
  margin-top: 30px;
}

.profile .section--profile .inner .osirase-category::before {
  content: "";
  display: inline-block;
  height: 20px;
  border-left: 2px solid #D27B22;
  position: absolute;
  top: 1px;
  left: 0;
}

.profile .section--profile .inner .osirase-item {
  margin-bottom: 0;
  padding: 10px;
  border-radius: 0;
  background-color: #f8f8f8;
}

.profile .section--profile .inner .osirase-item:first-of-type {
  border-radius: 4px 4px 0 0;
}

.profile .section--profile .inner .osirase-item:last-of-type {
  border-radius: 0 0 4px 4px;
  margin-bottom: 15px;
}

.profile .section--profile .inner .main-osirase {
  margin-bottom: 10px;
}

.profile .section--profile .inner .main-osirase label {
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  width: fit-content;
}

.profile .section--profile .inner .sub-osirases {
  padding-left: 25px;
  margin-top: 8px;
}

.profile .section--profile .inner .sub-osirases label {
  display: block;
  margin-bottom: 8px;
  font-weight: normal;
  cursor: pointer;
}

.profile .section--profile .inner .sub-osirases label span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
}

.profile .section--profile .inner .sub-osirases label input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

/* チェックボックスとラジオボタンの共通スタイル */
.profile .section--profile .inner input[type="checkbox"],
.profile .section--profile .inner input[type="radio"] {
  width: auto;
  margin: 0 8px 0 0;
  cursor: pointer;
}

.profile .section--profile .inner .osirase-group details > summary {
  display: flex;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
}

.profile .section--profile .inner .osirase-group details summary > span {
  font-size: 14px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
}

  @keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
  }

  /* 車番情報の表示制御 */
  .profile .section--profile .inner .car-details {
    transition: all 0.3s ease;
  }

  /* アニメーションを追加 */
  .profile .section--profile .inner .car-details[style*="display: block"] {
    animation: fadeIn 0.3s ease;
  }

  /* 必須マークのスタイル調整 */
  .profile .section--profile .inner .profile__num .required {
    font-size: 12px;
    font-weight: normal;
    margin-left: 5px;
    vertical-align: middle;
  }

  /* 体重入力欄のスタイル */
  .profile .section--profile .inner .weight-input {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
  }

  .profile .section--profile .inner .weight-input input {
    margin-bottom: 0;
  }

  .profile .section--profile .inner .weight-input__unit {
    color: #767676;
    font-size: 14px;
    flex-shrink: 0;
  }

  /* ファイル入力欄のスタイル */
  .profile .section--profile .inner .file-input {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
  }

  .profile .section--profile .inner .file-input input[type="file"] {
    display: none;
  }

  .profile .section--profile .inner .file-input label {
    background-color: #F1F1F1;
    border: 1px solid #C6C6C6;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: all 0.3s ease;
  }

  .profile .section--profile .inner .file-input label:hover {
    background-color: #E5E5E5;
  }

  .profile .section--profile .inner .file-input__name {
    color: #767676;
    font-size: 14px;
    flex: 1;
  }

  /* 予防接種履歴テーブルのスタイル */
  .profile .section--profile .inner .vaccination-history {
    margin: 20px 0;
    overflow-x: scroll;
  }

  .profile .section--profile .inner .vaccination-history table {
    width: 100%;
    min-width: 500px;
    border-collapse: collapse;
    font-size: 14px;
  }

  .profile .section--profile .inner .vaccination-history th {
    background-color: #F1F1F1;
    padding: 10px 1px 10px 3px;
    text-align: left;
    font-weight: normal;
    border-bottom: 1px solid #C6C6C6;
    width: 50%; /* 2列を均等に */
  }

  /* 先頭列はボタンなので狭目に設定 */
  .profile .section--profile .inner .vaccination-history th:first-child {
    text-align: center;
    width: 20%;
  }

  .profile .section--profile .inner .vaccination-history td {
    padding: 10px 1px 10px 3px;
    border-bottom: 1px solid #E5E5E5;
  }

  .profile .section--profile .inner .vaccination-history .no-data {
    text-align: center;
    color: #767676;
  }

  .profile .section--profile .inner .vaccination-history .btn--small {
    padding: 5px 10px;
    font-size: 12px;
  }

  /* 削除対象の行のスタイル */
  .profile .section--profile .inner .vaccination-history tr.marked-for-deletion {
    background-color: #F5F5F5;
    opacity: 0.7;
  }

  .profile .section--profile .inner .vaccination-history tr.marked-for-deletion td {
    color: #999;
  }

  /* 削除確認メッセージのスタイル */
  .profile .section--profile .inner .vaccination-history .delete-notice {
    margin-bottom: 1em;
    color: #FF0000;
    display: none;
  }

  .profile .section--profile .inner .vaccination-history .delete-notice.show {
    display: block;
  }

  /* 削除ボタンのスタイル */
  .profile .section--profile .inner .vaccination-history .btn--delete {
    background-color: #1696A9;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 100px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s ease;
    min-width: 65px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  .profile .section--profile .inner .vaccination-history .btn--delete.cancel {
    background-color: #1696A9;
    color: white;
  }

  .profile .section--profile .inner .vaccination-history .btn--delete:disabled {
    background-color: #BDBDBD;
    cursor: not-allowed;
  }

  /* 愛犬写真のスタイル */
  .profile .section--profile .inner .dog-photo {
    margin-bottom: 30px;
  }

  .profile .section--profile .inner .dog-photo__preview {
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
    border-radius: 4px;
    overflow: hidden;
    background-color: #F1F1F1;
  }

  .profile .section--profile .inner .dog-photo__preview img {
    padding: 10px;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* ファイル選択ボタンを中央寄せ */
  .profile .section--profile .inner .dog-photo .file-input {
    justify-content: center;
  }

  /* プレビュー画像のホバーエフェクト */
  .profile .section--profile .inner .dog-photo__preview img:hover {
    opacity: 0.8;
    transition: opacity 0.3s ease;
  }

  /* 愛犬一覧のスタイル */
  .profile .section--profile .inner .dog-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .profile .section--profile .inner .dog-card {
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

  .profile .section--profile .inner .dog-card__info {
    flex: 1;
  }

  .profile .section--profile .inner .dog-card__name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
  }

  .profile .section--profile .inner .dog-card__breed {
    font-size: 14px;
    color: #767676;
  }

  .profile .section--profile .inner .dog-card__actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .profile .section--profile .inner .dog-card__actions .btn {
    min-width: 120px;
    text-align: center;
    padding: 10px 20px;
    border-radius: 100px;
  }

  .profile .section--profile .inner .dog-list__add {
    margin-top: 20px;
    text-align: center;
  }

  /* 成功メッセージのスタイル */
  .profile .section--profile .inner .alert {
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
  }

  .profile .section--profile .inner .alert-success {
    background-color: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #A5D6A7;
  }

  /* 編集リンクのスタイル */
  .profile .section--profile .inner .edit-link {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #1696A9;
    text-decoration: none;
    font-size: 14px;
    padding: 5px;
    transition: opacity 0.3s ease;
  }

  .profile .section--profile .inner .edit-link:hover {
    opacity: 0.7;
  }

  .profile .section--profile .inner .edit-link .edit-icon {
    width: 16px;
    height: 16px;
  }

  .profile .section--profile .inner .readonly-form {
    padding-bottom: 20px;
  }

  .readonly-form .m-b-5 {
    margin-bottom: 5px !important;
  }

  .readonly-color {
    color: #767676 !important;
    background-color: #F8F8F8 !important;
  }

  .profile .section--profile .inner .readonly-input {
    font-size: 14px;
    padding: 8px 10px 8px 10px;
    margin-bottom: 5px;
    line-height: inherit;
  }

  /* 家族情報一覧のスタイル */
  .profile .section--profile .inner .family-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .profile .section--profile .inner .family-card {
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

  .profile .section--profile .inner .family-card__info {
    flex: 1;
    padding-right: 20px;
  }

  .profile .section--profile .inner .family-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }

  .profile .section--profile .inner .family-card__name {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
  }

  .profile .section--profile .inner .family-card__badge {
    background: #EA7070;
    color: white;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
  }

  .profile .section--profile .inner .family-card__details {
    font-size: 14px;
    color: #767676;
  }

  .profile .section--profile .inner .family-card__details p {
    margin: 0;
    line-height: 1.5;
  }

  .profile .section--profile .inner .family-card__actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .profile .section--profile .inner .family-card__details .family-card__alert {
    display: flex;
    margin-top: 10px;
  }

  .profile .section--profile .inner .family-card__details .family-card__alert .alert {
    padding: 5px 5px;
    margin-bottom: 0;
  }

  .profile .section--profile .inner .family-card__actions .btn {
    min-width: 120px;
    text-align: center;
    padding: 10px 20px;
    border-radius: 100px;
  }

  .profile .section--profile .inner .family-list__add {
    margin-top: 20px;
    text-align: center;
  }

  .profile .section--profile .inner .family-list__add .btn {
    border-radius: 100px;
  }

  .date-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    width: 100%;
  }

  .date-group select {
    background-color: #F1F1F1;
    border: 1px solid #C6C6C6;
    border-radius: 4px;
    padding: 10px;
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 30px;
  }

  .date-group span {
    color: #767676;
    font-size: 14px;
    margin: 0 5px;
    flex-shrink: 0;
  }

  .date-group select:hover,
  .date-group select:focus {
    border-color: #1696A9;
    outline: none;
  }

  .profile .section--profile .inner .tel-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    width: 100%;
  }

  .profile .section--profile .inner .tel-group input {
    width: 100px;
    min-width: 60px;
    margin-bottom: 0;
    text-align: center;
  }

  .profile .section--profile .inner .tel-group span {
    color: #767676;
    font-size: 14px;
    margin: 0;
    flex-shrink: 0;
  }

  .profile .section--profile .inner .tel-group input:first-child {
    width: 80px;
  }

  /* エラーメッセージのスタイル */
  .profile .section--profile .inner .error-message {
    margin-top: -1.5em;
    margin-bottom: 1em;
    color: #FF0000;
  }

  .profile .section--profile .inner .alert-error {
    background-color: #FFEBEE;
    color: #C62828;
    border: 1px solid #FFCDD2;
  }

  .profile .section--profile .inner input:disabled,
  .profile .section--profile .inner select:disabled {
    background-color: #F8F8F8;
    border-color: #E5E5E5;
    color: #767676;
    cursor: not-allowed;
    opacity: 0.7;
  }

  .profile .section--profile .inner input:disabled:hover,
  .profile .section--profile .inner select:disabled:hover {
    border-color: #E5E5E5;
  }

  .profile .section--profile .inner .zip-search-btn {
    margin-bottom: 20px;
    border-radius: 100px;
    text-align: center;
    padding: 10px 20px;
    display: inline-block;
    width: fit-content;
    margin-left: 0;
    margin-right: 10px;
    vertical-align: middle;
  }

  .profile .section--profile .inner .zip-search-btn + .required {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 20px;
    font-size: 12px;
  }

  .profile .section--profile .inner .address-guide {
    margin-bottom: 20px;
    padding-left: 12px;
    position: relative;
  }

  .profile .section--profile .inner .address-guide::before {
    content: "※";
    position: absolute;
    left: 0;
  }

  /* モーダルのスタイル */
.profile .modal {
    display: none;
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center; 
  }

.profile .modal__bg {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
  }

.profile  .modal__inner {
    padding: 0 10%;
  }

.profile .modal__content {
    width: 100%;
    background: #FFFFFF;
    outline: 1px solid #C6C6C6;
    position: relative;
    top: 62px;
    padding: 0 0 20px;
  }

.profile .modal__tit {
    width: 100%;
    background: #064583;
    outline: 1px solid #064583;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 40px;
    position: relative;
    margin-bottom: 20px;
  }

  /* .modal .js-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    cursor: pointer;
  } */

.profile .modal .modal__inner .modal__content .js-modal-close {
    display: block;
    width: 14px;
    height: 14px;
    position: absolute;
    top: 12px;
    right: 5%; }
.profile .modal .modal__inner .modal__content .js-modal-close span {
    display: block;
    width: 14px;
    height: 2px;
    background: #FFFFFF;
    position: absolute;
    top: 7px; }
.profile .modal .modal__inner .modal__content .js-modal-close span:nth-child(1) {
    transform: rotate(45deg); }
.profile .modal .modal__inner .modal__content .js-modal-close span:nth-child(2) {
    transform: rotate(-45deg); }
.profile .modal .modal__inner .modal__content .list--form {
    padding: 0 5%;
    margin-bottom: 0; }
.profile .modal .modal__inner .modal__content .list--form .btn {
    margin: 0 auto 20px; }
.profile .modal .modal__inner .modal__content .list--form .choose_address {
    display: block;
    width: 100%;
    height: 35px;
    background: #FFFFFF;
    border: 1px solid #C6C6C6;
    padding: 10px;
    margin: 10px 0 0; }

/* 利用規定同意セクションのスタイル */
.profile .section--profile .inner .terms-agreement {
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 30px;
}

.profile .section--profile .inner .terms-agreement__title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}

.profile .section--profile .inner .terms-agreement__buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.profile .section--profile .inner .terms-button {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #F1F1F1;
    border: 1px solid #C6C6C6;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
}

.profile .section--profile .inner .terms-button:hover {
    background-color: #E5E5E5;
}

.profile .section--profile .inner .terms-button .external-link-icon {
    width: 14px;
    height: 14px;
}

.profile .section--profile .inner .terms-agreement__checkbox {
    text-align: center;
}

.profile .section--profile .inner .terms-agreement__checkbox .agreement-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
    min-height: 24px; /* チェックボックスが消えても高さを維持 */
}

.profile .section--profile .inner .terms-agreement__checkbox .agreement-text {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.profile .section--profile .inner .terms-agreement__checkbox .agreement-text.agreed {
    color: #1696A9;
    font-weight: 700;
}

/* モーダル表示時のスタイル調整 */
.profile .section--profile .inner .terms-agreement.disabled {
    opacity: 0.7;
    pointer-events: none;
}

.profile .section--profile .inner .terms-agreement.disabled .terms-button {
    background-color: #F8F8F8;
    cursor: not-allowed;
}

/* 既存のモーダルスタイルの中に追加 */

.modal .modal__inner .modal__content .policy-content {
    padding: 0 5%;
    max-height: 400px; /* Set a fixed height for scrolling */
    overflow-y: auto; /* Enable vertical scrolling */
    margin: 0 0 20px; /* Add bottom margin for spacing */
    scrollbar-width: thin; /* For Firefox */
}

/* Style scrollbar for webkit browsers */
.modal .modal__inner .modal__content .policy-content::-webkit-scrollbar {
    width: 8px;
}

.modal .modal__inner .modal__content .policy-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.modal .modal__inner .modal__content .policy-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.modal .modal__inner .modal__content .policy-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.modal .modal__inner .modal__content .policy-content ol {
    counter-reset: item;
    padding-left: 0;
}

.modal .modal__inner .modal__content .policy-content ol > li {
    counter-increment: item;
    list-style: none;
    margin-bottom: 15px;
    padding-left: 2em;
    position: relative;
    font-size: 14px;
    line-height: 1.6;
}

.modal .modal__inner .modal__content .policy-content ol > li:before {
    content: counter(item) ".";
    position: absolute;
    left: 0;
    font-weight: 700;
}

/* ネストされたリストのスタイル */
.modal .modal__inner .modal__content .policy-content ol ol {
    margin-top: 15px;
    padding-left: 0;
}

.modal .modal__inner .modal__content .policy-content ol ol > li {
    padding-left: 2.5em;
}

.modal .modal__inner .modal__content .policy-content ol ol > li:before {
    content: "(" counter(item) ")";
}

/* モーダル内のparagraphテキストスタイル */
.modal .modal__inner .modal__content .policy-content p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* 車番情報の入力欄共通スタイル */
.profile .section--profile .inner .car-details input {
    height: 44px;
    margin: 0 0 20px 0;
    padding: 0 10px;
    line-height: 44px;
    font-size: 14px;
    background-color: #F1F1F1;
    border: 1px solid #C6C6C6;
    border-radius: 0;
    vertical-align: middle;
}

/* ナンバー入力グループ */
.profile .section--profile .inner .license-plate-group {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 20px 0;
    justify-content: flex-start;
    width: 100%;
}

.profile .section--profile .inner .license-plate-group select,
.profile .section--profile .inner .license-plate-group input {
    height: 44px;
    margin: 0;  /* license-plate-group内の要素はmargin-bottomを0に */
    flex: none;
    padding: 0 5px;
    line-height: 44px;
    font-size: 14px;
}

/* 地名選択 */
.profile .section--profile .inner .license-plate-group select {
    width: 120px;
    padding-right: 30px;
    background-position: right 10px center;
    text-align: left;
    text-align-last: left;
    padding-left: 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #F1F1F1;
    border: 1px solid #C6C6C6;
    border-radius: 0;
}

/* ひらがな */
.profile .section--profile .inner .license-plate-group .plate-hiragana {
    width: 45px;
    text-align: center;
    padding: 0 2px;
}

/* 分類番号 */
.profile .section--profile .inner .license-plate-group .plate-classification {
    width: 60px;
    text-align: center;
    padding: 0 2px;
}

/* 一連指定番号 */
.profile .section--profile .inner .license-plate-group .plate-number {
    width: 80px;
    text-align: center;
    padding: 0 2px;
}

/* 車種入力欄 */
.profile .section--profile .inner .car-details input[name="car_model"] {
    width: 100%;
}

/* 色入力欄 */
.profile .section--profile .inner .car-details input[name="car_maker"] {
    width: 100%;
}

/* 備考入力欄 */
.profile .section--profile .inner .car-details input[name="car_note"] {
    width: 100%;
}

/* プレースホルダー */
.profile .section--profile .inner .car-details input::placeholder {
    color: #C6C6C6;
    line-height: 44px;
}

/* 見出しの余白調整 */
.profile .section--profile .inner .car-details .profile__addressee {
    margin-bottom: 10px;
}

.add_car_btn {
    margin-bottom: 20px;
}

/* 日付入力グループの共通スタイル */
.profile .section--profile .inner .date-group {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 20px;
}

.profile .section--profile .inner .date-group select {
    background-color: #F1F1F1;
    border: 1px solid #C6C6C6;
    border-radius: 0;
    padding: 10px;
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
    background-image: none;
    height: 44px;
    margin-bottom: 0;
}

/* 年選択の幅 */
.profile .section--profile .inner .date-group select[name$="_year"] {
  width: 60px;
  min-width: 60px;
}

/* 月・日選択の幅 */
.profile .section--profile .inner .date-group select[name$="_month"],
.profile .section--profile .inner .date-group select[name$="_day"] {
    width: 40px;
    min-width: 40px;
}

.profile .section--profile .inner .date-group .date-label {
    color: #767676;
    font-size: 14px;
    margin: 0;
    padding: 0 10px 0 2px;
    flex-shrink: 0;
    line-height: 44px;
}

/* 結婚記念日コンテナのスタイル */
.profile .section--profile .inner .wedding-date-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 10px;
}

.profile .section--profile .inner .wedding-date-container .date-group {
    margin-bottom: 0;
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

/* スマートフォン表示時のスタイル */
@media screen and (max-width: 767px) {
    .profile .section--profile .inner .wedding-date-container .date-group {
        width: 100%;
        flex-wrap: wrap;
        gap: 10px;
    }

    .profile .section--profile .inner .date-group {
        flex-wrap: wrap;
        gap: 10px;
    }

    .profile .section--profile .inner .date-group > select,
    .profile .section--profile .inner .date-group > .date-label {
        margin-bottom: 0;
    }

    /* 愛犬予防接種 過去履歴 start */
    .profile .section--profile .inner .vaccination-history th {
        width: 35%;
    }

    .profile .section--profile .inner .vaccination-history th:first-child {
        width: 35%;
    }
    /* 愛犬予防接種 過去履歴 end */
}

/* セレクトボックスの文字位置調整 */
.profile .section--profile .inner .date-group select {
    text-align: center;
    padding: 0 5px;
}

/* 地名検索のスタイル */
.profile .section--profile .inner .region-search-container {
    position: relative;
    display: inline-block;
    width: 120px;
    min-width: 120px;
}

.profile .section--profile .inner .region-search-container input[name="plate_region_search"] {
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 10px;
    line-height: 44px;
    font-size: 14px;
    background-color: #F1F1F1;
    border: 1px solid #C6C6C6;
    border-radius: 0;
    vertical-align: middle;
    text-align: left;
}

.profile .section--profile .inner .region-search-container .suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #C6C6C6;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile .section--profile .inner .region-search-container .suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.profile .section--profile .inner .region-search-container .suggestion-item:hover {
    background-color: #F1F1F1;
}

.profile .section--profile .inner .other-allergy-info {
    margin-top: 30px;
}

.profile .section--profile .inner .other-allergy-info .description {
    margin-bottom: 15px;
    line-height: 1.6;
}

.profile .section--profile .inner .other-osirase-info .description br {
    display: block;
    content: "";
}

/* 送信ボタンの無効化状態のスタイル */
.profile .section--profile .inner button[type="submit"].disabled,
.profile .section--profile .inner button[type="submit"]:disabled {
    background-color: #BDBDBD !important;
    border-color: #BDBDBD !important;
    color: #FFFFFF !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

.profile .section--profile .inner button[type="submit"].disabled:hover,
.profile .section--profile .inner button[type="submit"]:disabled:hover {
    background-color: #BDBDBD !important;
    border-color: #BDBDBD !important;
    opacity: 0.7 !important;
}

/* 登録用URLボタンのスタイル */
.profile .section--profile .inner .share-buttons {
    display: flex;
    flex-direction: row;
    gap: 5%;
    margin-top: 20px;
    justify-content: center;
}

.profile .section--profile .inner .share-buttons .btn {
    flex: 1;
    min-width: 150px;
    margin: 0;
}

/* style.cssの定義と噛み合わないので上書き */
.profile .list--form dd .date-group select {
  margin: 0;
}