@charset "utf-8";
/* CSS Document */
/* 言語共通 */
/* リスト全体のスタイル */
.sns_wrap {
    display: flex;
    flex-wrap: wrap; /* ボタンが入り切らない場合に折り返す */
    justify-content: center; /* 中央寄せ */
    gap: 8px; /* ボタン同士の間隔 */
    list-style: none;
    padding: 8px 0 0;
    margin: 0 auto;
    max-width: 400px; /* 折り返しを制御するための最大幅（任意） */
}

/* liをボタンにする基本設定 */
.sns_wrap__li {
    width: 60px;  /* 基本の幅（正円） */
    height: 60px; /* ボタンの高さ */
    background-color: #ffffff; /* 初期背景色 */
    border: 4px solid #ffd500; /* 指定のボーダーを追加 */
    border-radius: 30px; /* 高さを基準に丸める（正円・カプセル共通） */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* ボーダーを含めてサイズを固定する */
    
    /* 「ふわっとゆっくり」変化させるためのトランジション */
    transition: background-color 0.6s ease; 
    overflow: hidden;
    flex-shrink: 0;
}

/* 4つ目の要素が存在する場合のみ、その要素の横幅を150pxにする。
   これより、3つ以下の場合はすべて正円のままになります。
*/
.sns_wrap__li:nth-child(4) {
    width: 150px; 
}

/* ホバー時の背景色変化 */
.sns_wrap__li:hover {
    background-color: #ffd500;
}

/* リンクエリアをボタンいっぱいに広げる */
.sns_wrap__li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* 画像のサイズ調整 */
.sns_wrap__li img {
    height: 40%;  /* 高さを基準にサイズ調整 */
    width: auto;
    object-fit: contain;
}

/* 画像のサイズ調整 */
.sns_wrap__li img {
    height: 40%;  /* 高さを基準にサイズ調整 */
    width: auto;
    object-fit: contain;
}
.header__nav__snsDiv {
  display: flex;
  padding: 1rem 19% !important;
  margin-top: -0.2rem;
  padding-bottom: 120px !important;
  justify-content: center;
}
.header__nav__snsDiv a.sns-x-icon img{
	width: 36px;
	vertical-align: top;
	padding-top: 11px;
}
.sns_youtube_iframe {
  position: relative;
  width: 100%;
  padding-top: 66.25%;
  margin-bottom: 10px;
}
@media (max-width: 640px) {
   .sns_wrap {
       max-width: 280px; 
       column-gap: 15px;
       row-gap: 5px; 
   }
   
   .sns_wrap__li:nth-child(4) {
       margin-top: 0;
       width: 160px; 
   }
}