:root{
  /*--bg:#fffafc;*/           
  --ink:#2c2c2c;
  --soft:#ffdff1;         /* トップで使ってるピンク */
  --link:#4b8fe2;         
  --maxw:920px;
}

body.contact-page{
 /*background: var(--diary-bg);*/
  color: var(--diary-ink);
}

body{
    background-color: #fffafc;
}
/* 背景 
body.top-page{
  background-image: url("bg-tile.png");
	background-repeat: repeat;
	background-attachment: fixed;
	background-position: right bottom;
  background-size: 256px;
}*/

/* 全体 */
.contact-wrap{
  max-width: var(--maxw);
  margin: 10vh auto 14vh;
  padding: 0 20px 40px;
  text-align: center;
}


/* ボタン共通 */
.mail-btn{
  border:none;
  background:#fff;
  color:#5f79c9;
  font-weight:600;
  padding:6px 16px 7px;
  border-radius:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),
              0 2px 0 rgba(95,121,201,.03);
  cursor:pointer;
  transition: transform .08s ease, filter .08s ease;
}
.mail-btn.ghost{
  background: rgba(255,255,255,.4);
}
.mail-btn:active{
  transform: translateY(1px);
  filter: brightness(.97);
}

.contact-lead{
  max-width: 820px;
  margin: 10vh auto 10px;
  padding: 0 20px;
  font-size: .78rem;
  line-height: 1.5;
  color: #6973B1;
}

/* 封筒 */
.envelope-card{
  background: rgba(255,255,255,.9);          
  border: 1px solid rgba(110,137,214,.15);   
  border-radius: 16px;                       /* 上下丸くする */
  padding: 18px 18px 14px;
  box-shadow: 0 4px 18px rgba(110,137,214,.04);
  margin-bottom: 14px;
}

.envelope-body{
  display:flex;
  gap:20px;
  align-items:flex-start;
  justify-content: space-between;
}
.envelope-fields{
  flex:1 1 auto;
  text-align:left;
}
.envelope-fields label{
  display:block;
  font-size:.7rem;
  margin-bottom: 3px;
  color:#486a9f;
}
.envelope-fields input{
  width:100%;
  background: rgba(247,249,255,.85);
  border:1px solid rgba(118,149,217,.45);
  border-radius: 9px;
  padding:6px 10px;
  font-size:.78rem;
  margin-bottom:10px;
  outline:none;
}
.envelope-fields input:focus{
  border-color:#6e89d6;
  box-shadow: 0 0 0 2px rgba(110,137,214,.16);
}

/* 切手プレビュー */
.stamp-preview{
  width:120px;
  height:140px;
  background:#fff;
  border: 3px dashed rgba(98,135,206,.6);
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
}
.stamp-preview img{
  max-width:100%;
  max-height:100%;
  border-radius:10px;
}
.stamp-placeholder{
  font-size:.6rem;
  color:#6e89d6;
  letter-spacing:.08em;
}

/* 切手タブ */
.tab-bar{
  margin: 16px auto 6px;
  display:flex;
  gap:10px;
  justify-content:flex-start;
}
.tab-btn{
  border:none;
  background:#ffffff;
  color:#6e89d6;
  padding:5px 14px 6px;
  border-radius:12px 12px 0 0;
  box-shadow: 0 -1px 0 rgba(255,255,255,.7);
  cursor:pointer;
  font-size:.7rem;
  transition: background .15s ease;
}
.tab-btn.is-active{
  background:#e8f0ff;
  color:#4d6ac7;
}

/* タブの中身 */
.tab-content{
  display:none;
  background:#ffffff;
  border:1px solid rgba(110,137,214,.12);
  border-radius: 12px;
  padding:12px;
  margin-bottom: 14px;
}
.tab-content.is-show{ display:block; }

.small-note{
  text-align:left;
  font-size:.65rem;
  color:#96a4c7;
  margin-bottom:8px;
}

/* スタンプ選択 */
.stamp-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap:12px;
}
.stamp-item{
  background: rgba(231,237,255,.5);
  border: 1px solid rgba(110,137,214,.08);
  border-radius: 11px;
  padding: 10px 12px 12px;
  text-align:left;
  position:relative;
  cursor:pointer;
  transition: transform .08s ease, border .08s ease, background .08s ease;
}
.stamp-item input{
  position:absolute;
  top:8px;
  right:10px;
  accent-color:#6e89d6;
}
.stamp-item img{
  display:block;
  max-height:42px;
  margin-bottom:6px;
}
.stamp-item .no-stamp{
  font-size:.6rem;
  color:#7f8fb3;
  text-align:center;
  padding:10px 0;
}
.stamp-item:hover{
  background: rgba(232,240,255,1);
  border:1px solid rgba(110,137,214,.36);
  transform: translateY(-1px);
}

/* 本文 */
.mail-form{
  background:#fff;
  border:1px solid rgba(110,137,214,.09);
  border-radius:14px;
  padding:14px;
  text-align:left;
  box-shadow:0 5px 24px rgba(110,137,214,.03);
}
.mail-form label{
  display:block;
  font-size:.7rem;
  margin-bottom:4px;
  color:#6a6a6a;
}
.mail-form textarea{
  width:100%;
  min-height:180px;
  background: rgba(243,245,252,.6);
  border:1px solid rgba(110,137,214,.12);
  border-radius:10px;
  padding:8px 10px;
  outline:none;
  font-size:.78rem;
}
.mail-form textarea:focus{
  border-color:#6e89d6;
}

/* 送信 */
.send-row button {
  background: #dfe9ff;                 
  color:#96a4c7;
  border: 1px solid rgba(110,137,214,.25);
  border-radius: 12px;
  padding: 8px 20px;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(110,137,214,.1);
  cursor: pointer;
  transition: background .2s ease, transform .1s ease;
}

.send-row button:hover {
  background: #cfdfff;                 
  transform: translateY(-1px);
}

.send-row button:active {
  transform: translateY(1px);
  background: #e7efff;                 /* 押した時は少し淡く */
}

/* フッター */
.site-footer{
  text-align:center;
  margin-top:14px;
  opacity:.7;
  font-size:.7rem;
}

/* スマホ */
@media (max-width:640px){
  .envelope-body{
    flex-direction: column;
  }
  .stamp-preview{
    margin: 8px auto 0;
  }
  .tab-bar{
    justify-content:center;
  }
}
/* 説明書き */
.contact-lead{
  max-width: 880px;
  margin: 0 auto 16px;
  text-align: left;
  font-size: .78rem;
  line-height: 1.5;
  color: #6973B1;
}
.contact-lead a{
  color: #4b8fe2;
  text-decoration: none;
}

/* 封筒カードの中身をはみ出さないように */
.envelope-card{
  max-width: 100%;
  overflow: hidden;          /* 念のため */
}

/* 2カラムの幅をちょっと絞る */
.envelope-body{
  gap: 18px;
}
.envelope-fields{
  flex: 1 1 68%;             /* ここで入力側を7割くらいに */
  min-width: 0;
}
.envelope-fields input{
  width: 100%;
}

/* 右のSTAMPが潰れないよう固定幅 */
.stamp-preview{
  flex: 0 0 140px;           /* ←固定幅 */
  max-width: 140px;
}

/* 狭いときは縦並び */
@media (max-width: 960px){
  .envelope-body{
    flex-direction: column;
  }
  .stamp-preview{
    flex: 0 0 auto;
    margin-top: 8px;
  }
}