body {
    background-color: #F7F1EC;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    margin: 0;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 30px;
}

h1 {
    color: #564A4A;
    margin-bottom: 30px;
    padding-right: 80px;
    font-size: 64px;
    font-family: "GFS Didot", serif;
    font-weight: 400;
    border-bottom: 2px solid #DA738A;
    width: fit-content;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  color: #555;
  font-size: 0.95rem;
  justify-content: flex-end;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb li + li::before {
  content: " - "; /* または " > " でもOK */
  margin: 0 0.5em;
  color: #999;
}

.breadcrumb a {
  color: #898888;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.entry__title {
    padding: 40px 0 60px;
    margin-bottom: 70px;
    text-align: center;
    border-bottom: 1px solid #CDC1AA;
}

.entry__title h2 {
    font-family: 'Shippori Mincho', serif;
    font-weight: 400;
    font-size: 40px;
}

form {
    display: grid;
    gap: 30px;
}


.form-group {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 40px;
}

.form-group.text-area {
    align-items: baseline;
}

.text-area label::after {
    content: "任意";
    color: #564A4A;
    font-size: 14px;
    vertical-align: middle;
    background: #fff;
    padding: 2px 9px;
    float: right;
}

label {
    display: block;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.required::after {
    content: "必須";
    color: #FFF;
    font-size: 14px;
    vertical-align: middle;
    background: #DA738A;
    padding: 2px 9px;
    float: right;
}

input[type="radio"] {
  accent-color: #DA738A; /* ピンク系に変更 */
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
select {
    /* ユーザー指定のデザインを適用 */
    background: #FFF;
    display: flex;
    width: 60%; /* 実際のフォームの幅に合わせて調整 */
    padding: 12px 22px; /* 516pxは幅の指定と重複するため、paddingを調整 */
    align-items: center;
    box-sizing: border-box; /* paddingをwidthに含める */
    border: none;
    font-size: 16px;
}

input::placeholder, textarea::placeholder {
  color: #D4D4D4;
}

textarea {
    resize: vertical;
    height: 100px;
}

/* チェックマーク画像を変えたい場合はここで差し替える */
:root {
  --check-img: url("../assets/images/img/icon_check.svg");
}

/* input自体を隠す */
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

/* labelの基本スタイル */
label[for="privacy_policy"] {
  position: relative;
  padding-left: 32px; 
  cursor: pointer;
  display: inline-block;
  line-height: 1.5;
}

/* 疑似要素で見た目のボックスを作成 */
label[for="privacy_policy"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background-color: #fff;
  box-sizing: border-box;
}

/* チェックされたときの見た目変更 */
input[type="checkbox"]:checked + label::before {
  background-image: var(--check-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}

@media (min-width: 851px) {
    .form-group {
        flex-wrap: wrap;
    }
    .error {
        margin-left: 260px;
        margin-top: -36px;
    }
    label {
        width: 220px;
    }
    .privacy-policy-text {
        margin-top: -20px;
    }
}
/* フォームの幅が618pxなので、それに合わせて調整 */
@media (max-width: 850px) {
    .form-group {
        display: unset;
    }

    input[type="text"],
    input[type="email"],
    input[type="number"],
    textarea,
    select {
        width: 100%;
        padding: 12px;
    }

    label {
        justify-content: unset;
        gap: 20px;
        margin-bottom: 10px;
    }

    .checkbox-group {
        margin-bottom: 10px;
    }
}

.radio-group, .checkbox-group {
    display: flex;
    align-items: center;
    gap: 20px;
}

.radio-group label, .checkbox-group label {
    font-weight: normal;
    margin-bottom: 0;
    display: inline-block;
    width: auto !important;
}

.privacy_policy {
    padding-bottom: 60px;
    border-bottom: 1px solid #CDC1AA;
}

.privacy_policy a {
    color: #E18C9E;
    text-decoration: underline;
}

.privacy_policy a:hover {
    color: #564A4A;
}

.privacy-policy-text {
    /* border: 1px solid #ddd; */
    padding: 15px;
    height: 300px;
    overflow-y: scroll;
    background-color: #f9f9f9;
    margin-bottom: 10px;
    font-size: 0.9em;
}

.privacy-policy-text ul li {
    list-style: disc;
}

.privacy-policy-text ol, .privacy-policy-text ul {
  padding-left: 1.5em; /* 左余白を統一 */
  margin-left: 0;      /* ブラウザのデフォルトmarginを消す */
}

.privacy-policy-text ol>li {
    margin-top: 10px;
}

.submit-button {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 60px;
}

button {
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-button button {
    font-family: 'Shippori Mincho', serif;
    font-weight: 400; /* 修正: font-weightを普通に */
    background: linear-gradient(95deg, #E18C9E 0%, #E5A689 109.79%);
    width: fit-content;
    margin-bottom: 20px;
    color: #fff;
    font-size: 20px;
    padding: 20px 92px;
}

.submit-button button:hover {
    background:#fff;
    color: #E18C9E;
}

.error {
    color: red;
    font-size: 0.9em;
}

.success-message {
    text-align: center;
    padding: 50px;
}

.message-txt {
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid #CDC1AA;
}

.success-message h2 {
    color: #564A4A;
    font-family: 'Shippori Mincho', serif;
    font-weight: 400;
    font-size: 32px;
    margin-bottom: 48px;
}

.contact__list {
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
}

.back-link {
    text-align: center;
    font-family: 'YuGothic', 'Yu Gothic', 'Segoe UI', sans-serif;
    text-decoration: none;
    margin: 0 auto;
}

@media (max-width: 480px) {
    .container {
        padding: 16px;
    }
    h1 {
        font-size: 32px;
    }
    .entry__title h2 {
        font-size: 22px;
    }
    .entry__title {
        padding: 25px 0 40px;
        margin-bottom: 50px;
    }
    form {
        gap: 16px;
    }
    .required::after, .text-area label::after {
        padding: 3px 8px;
        font-size: 12px;
    }
    .privacy_policy {
        padding-bottom: 50px;
    }
    .submit-button {
        margin-top: 16px;
        margin-bottom: 30px;
    }
    .submit-button button {
        font-size: 16px;
        padding: 12px 70px;
    }
    .success-message {
        padding: 0;
    }
    .success-message h2 {
        font-size: 20px;
        margin-bottom: 20px;
    }
    .contact__list {
    flex-direction: column;
}
    .back-link {
        margin-top: 30px;
    }
}