@charset "UTF-8";

.sns-box{
width: 32%; /* 3つ並べるため、約3分の1の幅に固定 */
  position: relative;
  background-color: #e0f7fa; /* 元の水色（必要に応じて色コードを調整してください） */
  padding: 20px 10px;        /* 内側の余白 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;    /* 中身を上から下に並べる */
  align-items: center;       /* 中身を中央寄せにする */
}
.sns-photo {
  margin-bottom: 20px;
}
.sns-icon{
margin-top: -40px; /* 上に飛び出させる（アイコンのサイズに合わせて調整） */
  margin-bottom: 15px;
  z-index: 10;
}
.sns-icon img {
  width: 80px;  /* アイコンの適切なサイズ */
  height: 80px;
  object-fit: contain;
}

/* ウィジェットがブルーの枠幅に自動で収まるようにする */
.snapwidget-widget {
width: 100%;
  max-width: 100%;
  border: none;
  /* 必要に応じて高さを調整してください（例: height: 300px; など） */
}

/* ボタンを中央寄せにして、少し上の余白をあける場合 */
.button_w {
text-align: center;
}


.banner-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.section-title {
  font-size: 45px;
  margin-top: 100px;
}
@media screen and (max-width:900px){

.section-title{
  font-size:28px;
}

.sns-flex{
  flex-direction:column;
}

.sns-box{
  width:100%;
}

.voice-box{
  flex-direction:column;
  text-align:center;
}

.voice-text{
  width:100%;
}

.banner-grid{
  grid-template-columns:1fr;
  margin: 0 20px;
}

.cta-button{
  font-size:24px;
  padding:25px 30px;
}

}


/* --- SNSエリアを強制的に横並びにする設定 --- */

.custom-sns-row {
display: flex ;
  justify-content: space-between ;
  /* ↓ flex-start から stretch に変更することで、高さを一番高いボックスに自動で揃えます */
  align-items: stretch ;  
  width: 100% ;
  max-width: 1200px;
  margin: 200px auto ;
  box-sizing: border-box ;
}

/* 各水色ボックスの幅と高さを固定 */
.custom-sns-row .sns-box {
width: 31%;
  background-color: #e0f7fa ;
  box-sizing: border-box ; /* ※前回の記述ミス「border-box: border-box」を修正しました */
  padding: 20px 15px 80px ; /* ↓ 下側にボタン用の余白（80px）をあらかじめ確保します */
  display: flex ;
  flex-direction: column ;
  align-items: center ;
  position: relative ;     /* ↓ ボタンを一番下に固定するために必要です */
}

/* アイコンの位置調整 */
.custom-sns-row .sns-icon {
  margin-top: -40px ;       /* 水色枠の上に半分飛び出させる */
  margin-bottom: 20px ;
}

.custom-sns-row .sns-icon img {
  width: 80px ;
  height: 80px ;
  object-fit: contain ;
}

/* SnapWidget（Instagramの埋め込み）のサイズ制限 */
.custom-sns-row .snapwidget-widget {
  width: 100% ;             /* 水色枠の幅いっぱいに広げる */
  height: 250px ;           /* 高さを指定（好みに合わせて調整してください） */
  border: none ;
}

/* フォローボタンの調整 */
.custom-sns-row .button_w {
position: absolute ;     /* ボックス内での絶対位置を指定 */
  bottom: 20px ;           /* 下から20pxの位置に固定 */
  left: 0 ;
  width: 100% ;
  text-align: center ;
}

.custom-sns-row .sns_button {
  display: inline-block ;
  padding: 8px 24px ;
  background-color: #d93175 ; /* ボタンの色（ピンク） */
  color: #ffffff ;
  text-decoration: none ;
  border-radius: 4px ;
}
.sns_button {
  display: inline-block ;
  padding: 8px 24px ;
  background-color: #d93175 ; /* ボタンの色（ピンク） */
  color: #ffffff ;
  text-decoration: none ;
  border-radius: 4px ;
  font-size: 16px;
}


@media screen and (max-width:900px) {
  .custom-sns-row {
    flex-direction: column;
}

.custom-sns-row .sns-box {
width: 100%;
margin-bottom: 100px;
}
.custom-sns-row .sns-box:last-child {
  margin-bottom: 30px;

}
}