@charset "UTF-8";

@import url("ress.css");
/* リセット用のCSSを読み込み 「ress.css」resset.dev • v5.0.2　*/

/* ---------------------------
  フォームのCSS
--------------------------- */
:root {
  --dark: #333;
  --mid: #555;
  --light: #ccc;
  --accent_r: #ff0000;
  --accent_y: #fbf00d;
  --accent_g: #4caf50;

  --light_r: hsl(2, 82%, 93%);
  --light_y: hsla(57, 98%, 82%, 0.267);
  --light_g: hsl(133, 97%, 82%);
  --theme_dark: hsl(230, 100%, 25%);
  --theme: hsl(215, 48%, 57%);
  --theme_light: hsl(215, 100%, 95%);
  /* --theme_dark:navy;
    --theme:#5e8dc7;
    --theme_light:hsl(213, 48%, 92%); */
  --success_icon: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!Font%20Awesome%20Free%206.7.2%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20fill%3D%22%234CAF50%22%20d%3D%22M256%20512A256%20256%200%201%200%20256%200a256%20256%200%201%200%200%20512zM369%20209L241%20337c-9.4%209.4-24.6%209.4-33.9%200l-64-64c-9.4-9.4-9.4-24.6%200-33.9s24.6-9.4%2033.9%200l47%2047L335%20175c9.4-9.4%2024.6-9.4%2033.9%200s9.4%2024.6%200%2033.9z%22%2F%3E%3C%2Fsvg%3E);

  --failure_icon: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C!--!Font%20Awesome%20Free%206.7.2%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20fill%3D%22%23ff0000%22%20%20d%3D%22M256%2032c14.2%200%2027.3%207.5%2034.5%2019.8l216%20368c7.3%2012.4%207.3%2027.7%20.2%2040.1S486.3%20480%20472%20480L40%20480c-14.3%200-27.6-7.7-34.7-20.1s-7-27.8%20.2-40.1l216-368C228.7%2039.5%20241.8%2032%20256%2032zm0%20128c-13.3%200-24%2010.7-24%2024l0%20112c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24l0-112c0-13.3-10.7-24-24-24zm32%20224a32%2032%200%201%200%20-64%200%2032%2032%200%201%200%2064%200z%22%2F%3E%3C%2Fsvg%3E);
}

* {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
}

.wrapper {
  width: min(100%, 680px);
  margin: 0 auto;
  /* padding: 1rem min(4vw,1rem); */
  display: flex;
  flex-direction: column;
  align-items: center;
}

  @media screen and (min-width:768px) {
    .wrapper {
      padding: 1rem min(4vw, 1rem);
    }
  }


/* サイドコンテンツ<aside>が有る場合 */
.wrapper:has(aside) {
  width: 100%;
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
  row-gap: 2rem;
  margin: 0;
}

.wrapper:has(aside) .next_hojin_main {
  width: min(100%, 640px);
}

.next_hojin_aside {
  width: min(100%, 640px);
  background: #eee;
  padding: 1rem;
}
/* END　サイドコンテンツ<aside>が有る場合 */

  @media screen and (min-width:768px) {
    .wrapper {
      margin: 40px auto;
    }

    /* min-width:768px サイドコンテンツ<aside>が有る場合 */
    .wrapper:has(aside) {
      margin: 0 auto;
      flex-direction: row;
      align-items: stretch;
      justify-content: space-between;
      width: min(100%, 1024px);
      gap: 2rem;
    }

    .wrapper:has(aside) .next_hojin_main {
      flex-grow: 1;
      padding: 1rem min(4vw, 1rem);
    }

    .next_hojin_aside {
      width: min(100%, 280px);
      background: #eee;
      padding: 1rem;
      flex-grow: 0;
    }
    /* END　min-width:768px サイドコンテンツ<aside>が有る場合 */
  }

  /* サイドコンテンツのスタイル */
  .next_hojin_aside{
    background:#f1f4f4;
    border-top:solid 4px var(--theme);
  }
  .aside-title{
    font-weight:bold;
    color:var(--theme_dark);
    margin-bottom:1rem;
  }
  ul.explain-list{
    display:grid;
    gap:0.5rem;
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    list-style:none;
  }

  li.explain-unit{
    background:#fff;
    /* aspect-ratio: 1 / 1; */
    /* border:1px solid #ddd; */
    border-radius:8px;
    padding:1rem;
  }
  .explain-image{
    display:flex;
    justify-content:center;
    margin-bottom:1rem;
    max-height: 100px;
  }
  .explain-image img{
    object-fit: contain;
    max-width: 100%;
  }
  .explain-title{
    margin-bottom:0.25rem;
    font-size:0.875rem;
  }
  .explain-text{
    font-size:0.65rem;
  }
    @media screen and (min-width:1024px){
      ul.explain-list{
        gap:1rem;
        grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
      }
      li.explain-unit{
        padding:1.5rem;
      }
      .explain-image{
        max-height: 150px;
      }
      .explain-title{
        margin-bottom:0.5rem;
        font-size:0.975rem;
      }   
    }
  /* END　サイドコンテンツのスタイル */




h2 {
  margin-bottom: 2rem;
  padding: 0 1rem;
}

.form {
  width: 100%;
}

@media screen and (min-width:768px) {
  .form {
    padding: 0;
  }
}

.formpadding-wrap {
  padding: 0 1rem;
}

.textwrap{
  padding: 1rem;
}

.lead {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.lead .attention ul li{
  list-style-position: inside;
  margin-left: 1rem;
  letter-spacing: 0.04em;
}



/* ------------------------------
 プログレスバーのスタイル 
 ------------------------------*/

.progress {
  padding: 0 1rem 1rem;
}

/* 上段 */
.progressbar {
  display: flex;
  justify-content: space-between;
  margin: 0 0 0.5rem;
  counter-reset: step;
}

.progress-step {
  width: 100%;
  position: relative;
  text-align: center;
  color: #bbb;
}

.progress-step::before {
  counter-increment: step;
  content: counter(step);
  width: min(30vw, 60px);
  height: min(30vw, 60px);
  line-height: 30px;
  border: 2px solid #bbb;
  display: inline-block;
  border-radius: 4px;
  background-color: white;
  /* margin-bottom: 8px; */
  display: grid;
  place-items: center;
}

.progress-step::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #bbb;
  z-index: -1;
}

.progress-step:last-child {
  width: inherit;
}

.progress-step:last-child::after {
  display: none;
}

.progress-step.active {
  color: var(--theme);
}

.progress-step.active::before {
  border-color: var(--theme);
  background-color: var(--theme);
  color: white;
}

.progress-step.active::after {
  background-color: var(--theme);
}

/* 下段 */
.progressbar-bottom {
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.progressbar-bottom li {
  list-style-type: none;
  display: list-item;
  list-style-position: inside;
  width: min(30vw, 60px);
  font-size: 0.75rem;
  color: #bbb;
  /* background: #aaa; */
}

.progressbar-bottom li.active {
  color: var(--theme);
}

/* END プログレスバー */


.form-item {
  display: block;
  width: 100%;
  align-items: center;
  margin: 30px auto;
  word-break: break-all;
}

.form-item input::placeholder {
  color: #aaa;
}

.form-textwrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0 0 0.5rem;
}

@media screen and (min-width:1024px) {
  .form-textwrap {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
}

.form-item-name {
  display: flex;
  align-items: center;
  font-weight: bold;
  /* width: 100%; */
}
  @media screen and (min-width:1024px) {
    .form-item-name > span{
      white-space: nowrap;
    }
  }

.form-rule { /* 入力規則の文 */
  color: var(--theme_dark);
  font-size: 0.75em;
  /* width: 100%; */
}

.form-item-required { /* 必須タグ */
  display: inline-block;
  margin-left: 8px;
  padding: 2px;
  border-radius: 6px;
  width: 40px;
  font-size: 0.75em;
  text-align: center;
  color: #fff;
  background: var(--accent_r);
}

/* 電話番号のレイアウト */
.form-telwrap{
  display:flex;
}
.form-telwrap .tel_item:not(:last-of-type){
  display:flex;
  align-items:center;
}

  @media screen and (min-width:375px){
    .form-telwrap{
      gap:0.5rem;
    }
    .form-telwrap .tel_item:not(:last-of-type){
      gap:0.5rem;
    }
  }

.form-telwrap .tel_item:not(:last-of-type)::after{
  content:"-";
  display:block;
}

.form-item-input {
  display: block;
  border: 0.5px solid var(--light);
  border-radius: 4px;
  width: 100%;
  height: initial;
  font-size: 16px;
  padding: 0.5rem 0.75rem;
  /* 0.5rem 2rem 0.5rem 0.75rem; */
  /* background-position: 98% center;
  background-size: 1.25rem;
  background-repeat: no-repeat; */
}

/* focus時の枠線 */
input:focus,
textarea:focus,
select:focus {
  border: 1px solid var(--theme);
  box-shadow: 0 0 2px rgba(0, 123, 255, 0.5);
}

/* error時の枠線と背景色 */
.form-item-input[data-error="true"],
textarea[data-error="true"],
select[data-error="true"],
.form-item-radio-group[data-error="true"] {
  border-color: var(--accent_r);
  box-shadow: 0 0 2px rgba(220, 53, 69, 0.5);
  background-color: var(--light_r);
}

/* セレクトボックス内右端に下向き▼を配置 */
.select-wrap {
  position: relative;
  /* 疑似要素を絶対配置するため */
}

.form-item-select {
  border: 0.5px solid var(--light);
  height: initial;
  padding: 0.5rem 0.75rem;
}

.form-item-select {
  position: relative;
  /* 疑似要素を絶対配置するため */
  width: 100%;
  padding: 10px 40px 10px 10px;
  /* 右に余白確保 */
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

/* ▼マーク */
.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  /* 右からの距離 */
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  background-color: #666;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
  /* アイコン上でもクリックできるようにする */
}

/* --------------------------------------------------------
  縦サイズが伸縮するテキストエリア　※jsと組み合わせ 
-----------------------------------------------------------*/
.FlexTextarea {
  position: relative;
}

.FlexTextarea__dummy {
  overflow: hidden;
  visibility: hidden;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  min-height: 42px;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  border: 1px solid;
}

.FlexTextarea.large .FlexTextarea__dummy{
  min-height: 10.5rem;
}


.FlexTextarea__textarea {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  width: 100%;
  height: 100%;
  background-color: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  resize: none;
}


/* ----------------------------
  エラーメッセージ 
-------------------------------*/
/* 各フォーム下に表示するエラー内容 */
.form-item-error {
  width: 100%;
  font-size: 15px;
  color: var(--accent_r);
  padding: 0.25rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* デフォルトは非表示 */
.form-item-error::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
}

/* data-error属性がtrueの時は表示 */
.form-item-error[data-error="true"]::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background-image: var(--failure_icon);
}

.form-all-error {
  /* display: none;  */
  margin-bottom: 1rem;
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent_r);
  border: 2px solid var(--accent_r);
  padding: 0.75rem;
  /* background: var(--light_y); */
}

/* ラジオボタンの整列 */
.form-item-radio-group {
  height: initial;
  /* main */
  /* padding: 0.5rem 0.75rem; */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid transparent;
}

@media screen and (min-width:768px) {
  .form-item-radio-group {
    flex-direction: row;
  }
}

.form-item-radio-group label {
  padding: 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--light);
}

.form-item-radio-group label:hover {
  border: 1px solid var(--theme_light);
  background: var(--theme_light);
}

input[type='radio'] {
  margin-right: 4px;
}

.form-item-radio-group label:focus-within {
  background: var(--theme_light);
}

.form-agreewrap label:focus-within {
  border: 2px solid var(--theme);
}


/* -------------------------------
  ボタンのスタイル
------------------------------- */
/* ボタン共通のスタイル */
.form-item-button {
  border-radius: 6px;
  margin: 16px auto 16px;
  width: 100%;
  height: 45px;
  align-items: center;
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  border: 1px solid var(--theme_dark)
}


/* 入力画面の「次へ」デフォルトのスタイル */
.hojin_index .form-item-button[type='submit'] {
  background: var(--light);
  color: #fff;
  pointer-events: none;
  border: 1px solid var(--light)
}

/* -------------------------------
  「～に同意する」のスタイル
------------------------------- */
.form-item .form-agreewrap label input{
  margin-top: 3px; 
  width:15px;
}
.form-item .form-agreewrap label span{
  padding:5px 0px;
}
.form-item .form-agreewrap label span a{
  padding-left: 0.25rem;
}
/* 「プライバシーポリシーに同意する」＆「利用規約に同意する」チェックボックスが連続する場合のみ、マージン */
.form-item .form-agreewrap label + label{
  margin-top: 4px;
}

/* request「●●に同意する」にチェックが入った時のスタイル */
.request .form-item.agreement_field:has(input:checked) + #indexSubmitButton[type='submit'] {
  background: var(--theme_dark);
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
}
.request .form-item.agreement_field:has(input:checked) .form-agreewrap label{
  border:2px solid var(--light);
}


/* entry「●●に同意する」にチェックが入った時のスタイル */
.entry .form-item.agreement_field:has(input#privacyPolicyCheckbox:checked):has(input#termsOfUseCheckbox:checked) + #indexSubmitButton[type='submit'] {
  background: var(--theme_dark);
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
}

.entry .form-item.agreement_field:has(input#privacyPolicyCheckbox:checked):has(input#termsOfUseCheckbox:checked) .form-agreewrap label{
  border:2px solid var(--light);
}


.form-item.agreement_field>p {
  font-size: 0.875em;
  padding: 4px;
}

.comment p {
  text-align: center;
}


.form-agreewrap label {
  display: block;
  padding: 0.5rem;
  border-radius: 4px;
  border: 2px solid var(--theme_light);
}

.form-agreewrap label:hover {
  background: var(--theme_light);
}

/* -------------------------------
  確認画面のスタイル
------------------------------- */

.confirm .form-item-input {
  border: none;
  background: #eee;
  color: var(--theme_dark);
}

@media screen and (min-width:375px) {
  .confirm .form-textwrap {
    align-items: center;
    justify-content: flex-start;
  }
}

/* textarea#remarks,textarea#remarks2 {
  height: min(10vh,120px);
} */


/* 確認画面「送信」ボタン */
.confirm #submitButton[type='submit'] {
  background: var(--theme_dark);
}

/* 確認画面「戻る」ボタン */
.confirm .backButton[type='button'] {
  color: var(--theme_dark);
}

/* -------------------------------
  完了画面のスタイル
------------------------------- */
.complete h2 {
  margin-bottom: 1rem;
}

.complete h3.success-or-failure {
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.complete .complete_inner {
  padding: 0 1rem;
}

.complete .textwrap {
  padding: 1rem 0;
  font-size: 0.875rem;
}

@media screen and (min-width:768px) {
  .complete .complete_inner {
    padding: 0;
  }

  .complete .textwrap {
    padding: 1rem;
    font-size: 1rem;
  }
}

.complete .user-mailaddress {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--theme);
}
  @media screen and (min-width:768px) {
    .complete .user-mailaddress {
      flex-direction: row;
    }
  }
.complete .user-mailaddress dt,
.complete .user-mailaddress dd {
  padding: 0.5rem;
}

.complete .user-mailaddress dt {
  background: var(--theme_light);
  display: flex;
  align-items: center;
  min-width: 8em;
}
.complete .user-mailaddress dd {
  word-break: break-all;
}
.complete ul {
  list-style-position: inside;
}

.complete a.link-nexttop {
  display: inline-block;
  margin: 1rem 0;
}

/* success */
.complete .success h3.success-or-failure {
  background-color: var(--light_y);
}

.complete .success h3.success-or-failure::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: var(--success_icon);
}

/* failure */
.complete .failure h3.success-or-failure {
  background-color: var(--light_r);
  font-size: clamp(16px, 2.8vw, 18px);
  color: red;
}

.complete .failure h3.success-or-failure::before {
  content: "";
  display: block;
  width: clamp(20px, 3.2vw, 24px);
  height: clamp(20px, 3.2vw, 24px);
  background-image: var(--failure_icon);
}

.complete .failure a.link-form {
  display: grid;
  place-items: center;
  width: 13rem;
  margin: 0 auto;
  font-size: 0.875rem;
}

@media screen and (min-width:768px) {
  .complete .failure a.link-form {
    font-size: 1rem;
  }
}

.complete .contact-department {
  border: 2px solid var(--theme_dark);
}

.complete .contact-department:first-of-type {
  margin-bottom: 1rem;
}

.complete .hojin_help_contact .contact-department dt {
  padding: 0.5rem 0.75rem;
  background: var(--theme_dark);
  color: #fff;
  font-size: 0.875rem;
}

.complete .hojin_help_contact dd {
  padding: 0.5rem;
}

.complete .hojin_help_contact .detail h4 {
  padding: 0 0.25rem 0.25rem;
}

.complete .hojin_help_contact .detail ul {
  list-style-type: square;
}

.complete .hojin_help_contact .detail ul li {
  text-indent: 0.5rem;
  font-size: 0.875rem;
}

.complete .hojin_help_contact .detail ul li::marker {
  color: var(--theme);
}

.complete .hojin_help_contact .detail ul li a {
  word-break: break-all;
}


@media (pointer: fine),
(hover: hover) {
  .detail a:where([href^="tel:"]) {
    pointer-events: none;
    text-decoration: none;
    color: inherit;
  }
}



/********************************************
  header
********************************************/
div#header {
  width: 100%;
  background: url(https://ec.kobe-np.co.jp/hojin/entry/manage/img/bg_header.png) repeat-x;
  height: 66px;
}

div#header_logo {
  width: 200px;
  /* float: left; */
}

div#header_logo a {
  display: block;
}

div#headerIn {
  width: min(100%, 600px);
  margin: 0 auto;
  padding-left: min(4vw, 1rem);
  display: flex;
  justify-content: space-between;
}

@media screen and (min-width:600px) {
  div#headerIn {
    width: min(100%, 980px);
  }
}



div#help_box {
  /* float: right; */
  margin: 0;
}

div#help_box a {
  display: block;
}


/********************************************
  footer
********************************************/
div#footer {
  width: 100%;
  margin: 0 0 0 0;
  background: url(https://ec.kobe-np.co.jp/hojin/entry/manage/img/bg_policy.png) repeat-x center top;
  text-align: center;
}

div#footer ul {
  width: min(100%, 600px);
  margin: 0 auto;
  padding: 30px min(4vw, 1rem);
}

@media screen and (min-width:600px) {
  div#footer ul {
    width: min(100%, 980px);
  }
}


div#footer ul li {
  display: inline;
}


div#footer div#copy_bg {
  width: 100%;
  margin: 0;
  background: url(https://ec.kobe-np.co.jp/hojin/entry/manage/img/bg_copy.png) repeat-x center top / contain;
}

div#footer div#copy_bg p {
  width: min(100%, 600px);
  margin: 0 auto;
  padding: 10px min(4vw, 1rem);
}

@media screen and (min-width:600px) {
  div#footer div#copy_bg p {
    width: min(100%, 980px);
  }
}

.copyright {
  padding: 10px 0;
}

/********************************************
  entry_form, request_control_panel
********************************************/
.entry .progress-step.active::before {
  border-color: var(--theme_dark);
  background-color: var(--theme_dark);
  color: white;
}

.entry .progress-step.active::after {
  background-color: var(--theme_dark);
}

.entry .progressbar-bottom li.active {
  color: var(--theme_dark);
}


@media screen and (min-width: 676px) {
    .contracts {
        border: 1px solid var(--theme_light);
    }
    .applicant-information, .billing-information,
    .request-information, .entry-information, .management-information {
        border: 1px solid var(--theme_light);
    }
}

.readonly-item input,.readonly-item textarea {
    background-color: #eee;
    color: var(--theme_dark);
}


.billing-information .billing-form,
.entry-information .entry-form,
.management-information .management-form {
  padding: 1rem;
}

/* .billing-information .form-item {
  margin: 0 auto;
} */

.billing-info-head,
.request-info-head,
.entry-info-head,
.management-info-head {
  color: var(--theme_dark);
  width: 100%;
}

.about-np-kakebarai {
  margin-bottom: 2rem;
}

@media screen and (min-width:768px) {
  .about-np-kakebarai {
    margin-bottom: 1rem;
  }
}

.about-np-kakebarai p {
  font-size: 0.875em;
  color: darkblue;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.about-np-kakebarai .np-banner {
  display: block;
  width: min(100%, 282px);
}

.about-np-kakebarai .np-banner img {
  width: 100%;
}

.copybtn button {
  width: 100%;
  height: 3em;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: bold;
  color: #fff;
  background: var(--theme);
  padding: 4px;
  border-radius: 4px;
}


.request .attention{
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: none;
  background: var(--theme_light);
  font-size: 0.875rem;
  color: var(--theme_dark);
}
.request .attention p{
  font-weight: 600;
}
.entry .contact{
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: none;
  background: var(--light_y);
  color: var(--dark);
  font-size: 0.875rem;
}
  @media screen and (min-width:768px) {
    .request .attention,.entry .contact{
      border-radius: 4px;
    }
  }

.entry .attention{
  margin-bottom: 1rem;
  padding: 0.5rem 0 2rem;
  font-size: 0.975rem;
  letter-spacing: 0.04em;
  background: var(--light_y);
  color:var(--theme_dark);
}
  @media screen and (min-width:768px) {
    .entry .attention{
      margin-top: 1rem;
      margin-bottom: 3rem;
      padding: 0.5rem;
      border-radius: 4px;
      border: 2px solid var(--theme);
      background: none;
    }
  }

.entry .attention h5{
  font-weight: bold;
  font-size: 1.25rem;
  text-align: center;
  margin-bottom: 0.5rem;
}

.entry .attention ul{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.entry .attention ul li{
  /* list-style: '●'; */
  list-style-position: inside;
}
.entry .attention ul li::marker{
  color: var(--theme);
}

.textwrap.attention p{
  margin-bottom: 0.5rem;
}
.textwrap.attention ul li{
  list-style-position: inside;
}


@media screen and (min-width:768px) {

  /* 「申込情報からコピー」ボタンの位置調整 */
  .billing-information {
    position: relative;
  }

  .copybtn {
    position: absolute;
    margin: 0.5rem;
    top: 0;
    right: 0;
    z-index: 2;
  }

  .copybtn button {
    height: inherit;
    padding: 4px 1rem;
    border-radius: 3px;
    margin-bottom: 0;
  }
}

.applicant-information {
  margin: 2rem auto;
}

.request-information {
  margin: 2rem auto;
}

.entry-information {
  margin: 2rem auto;
}

.headline-wrap {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--theme_light);
  padding: 0.5rem 1rem;
}

.headline-wrap .form-textwrap {
  margin-bottom: 0;
}

.multiitem-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.multiitem-wrap button {
  width: 100%;
  font-size: 0.875rem;
  font-weight: bold;
  color: #fff;
  background: var(--theme);
  padding: 4px;
  border-radius: 4px;
}

@media screen and (min-width:480px) {
  .multiitem-wrap {
    flex-direction: row;
  }

  .multiitem-wrap button {
    max-width: 14em;
  }
}

.address-body {
  padding: 1rem;
  border: 1px solid #eee;
}

/* 情報登録フォーム内の、入力不要・編集不可のパート */
.readonly-item .form-item-name {
  color: var(--theme_dark);
}

.readonly-item input {
  background-color: #eee;
  color: var(--theme_dark);
}