/* :rootでサイト全体のデザイン変数を定義 */
:root {
  --page-background: #f0f2f5;
  --card-background: #ffffff;
  --card-border-radius: 16px;
  --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --card-shadow-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* bodyや親要素のスタイル */
body {
  margin: 0;
}

/* 親要素(#contact)の設定 */
#contact {
  margin-top: 10vh;
  display: grid;
  place-content: center;
  min-height: 100dvh;
  padding: 4rem 1rem; /* 上下の余白を少し増やす */
  background-color: var(--page-background);
  box-sizing: border-box;
}

/* iframeのラッパー要素 */
.contact-us-wrapper {
  width: 80vw;
  max-width: 900px; /* PC表示用に横幅を広げる */
  margin-inline: auto;
  background-color: var(--card-background);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  
  /* フォームと枠線の間に余白を追加 */
  padding: 1rem; 
  
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-us-wrapper:hover {
  transform: translateY(-8px);
  box-shadow: var(--card-shadow-hover);
}

/* iframe自体の設定 */
.contact-us-wrapper iframe {
  display: block;
  width: 100%;
  /* フォームの内容に合わせて十分な高さを確保 */
  height: 1050px; 
  border: 0;
}