@charset "utf-8";


html {
 scroll-behavior: smooth;
}




.Value-title {
 font-size: 20px;
 text-align: center;
 padding: 50px 0;


}




.contact-section {
 padding: 80px 20px;
 text-align: center;
 font-family: 'Arial', sans-serif;
}


.contact-container {
 display: flex;
 justify-content: center;
 align-items: stretch;   /* ← 縦の高さを揃えるポイント！ */
 gap: 0px;                /* ← 縦線の間に余白を入れない */
 max-width: 1000px;
 margin: 0px auto;
 position: relative;
}


.contact-container::before {
 content: "";
 position: absolute;
 top: 0;
 bottom: 0;
 left: 50%;             /* 中央に配置 */
 width: 1px;            /* 線の太さ */
 background-color: rgba(148, 143, 143, 0.936); /* 半透明の線（調整可） */
 transform: translateX(-50%);
}




.contact-box {
 border-radius: 20px;
 flex: 1 1 400px;
 padding: 40px 20px;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 border-radius: 0px; /* ←角丸 */
 text-decoration: none; /* 念のためh3にも */
}


.contact-box:hover {
 transform: translateY(-5px);
}






.contact-box h3 {
 font-size: 1.5em;
 margin-bottom: 10px;
 color: #333;
 text-decoration: none; /* 念のためh3にも */
}






/* --- 文字ふわっと出現アニメーション追加 --- */


/* 最初はp（説明文）を隠す */
.contact-box p {
 opacity: 0;
 transform: translateY(10px); /* 少し下にずらしておく */
 transition: opacity 0.4s ease,
 transform 0.4s ease;
  color: #333;
  text-decoration: underline;

}


/* ホバー時にふわっと表示 */
.contact-box:hover p {
 opacity: 1;
 transform: translateY(0);
}


/* タイトルを少し上に動かしてスペースを作る */
.contact-box h3 {
 transition: all 0.4s ease;
}


.contact-box:hover h3 {
 transform: translateY(-10px);
}