.contact-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #f7f7f9;
}

.contact-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-form-wrapper {
  width: 100%;
  max-width: 900px;
  aspect-ratio: auto;
  height: 82dvh;
  max-height: none;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin: 100px 0 80px;
}

.contact-form-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.contact-form-wrapper.contact-scrollable {
    width: 100%;
    max-width: 900px;
    height: 75vh;
    /* ここで見せたい高さを決める */
    overflow: auto;
    /* 親でスクロールを管理 */
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.contact-form-wrapper.contact-scrollable iframe {
    width: 100%;
    height: 1400px;
    /* フォームの長さより少し大きめに。必要に応じて調整 */
    border: 0;
}

/* WebKit系（Chrome/Edge/Safari）のスクロールバー装飾 */
.contact-form-wrapper.contact-scrollable::-webkit-scrollbar {
    width: 10px;
}

.contact-form-wrapper.contact-scrollable::-webkit-scrollbar-track {
    background: #f0f2f5;
    border-radius: 10px;
}

.contact-form-wrapper.contact-scrollable::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #9aa5b1, #6b7280);
    border-radius: 10px;
    border: 2px solid #f0f2f5;
}

.contact-form-wrapper.contact-scrollable::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #6b7280, #4b5563);
}

/* Firefox用 */
.contact-form-wrapper.contact-scrollable {
    scrollbar-width: thin;
    /* auto | thin | none */
    scrollbar-color: #6b7280 #f0f2f5;
    /* thumb track */
}

.contact-form-wrapper.hide-scrollbar {
    width: 100%;
    max-width: 900px;
    height: 75vh;
    overflow: auto;
    background: #fff;
    border-radius: 12px;
}

.contact-form-wrapper.hide-scrollbar iframe {
    width: 100%;
    height: 1400px;
    border: 0;
}

/* Chrome/Edge/Safari */
.contact-form-wrapper.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Firefox */
.contact-form-wrapper.hide-scrollbar {
    scrollbar-width: none;
}

/* 既存のヘッダーを上部に固定している場合は、必要に応じて余白を確保
       例: .contact-main { padding-top: 96px; } など。 */
@media (max-width: 640px) {
    .contact-form-wrapper {
        max-width: 100%;
        border-radius: 10px;
        aspect-ratio: auto;
        height: 92vh;
        max-height: none;
        margin: 20px 0;
    }

    .contact-main {
    padding: 40px 0 60px;
}
}