/* ソーシャルログイン 公式ボタン（既定View V2） */

/* ログイン/会員登録ボタン：各社公式アセットを中央寄せ。テーマボタン（button button-main）は使わず背景・枠・余白をリセットする。SPセクションに限定して既存ボタン仕様へ影響させない */
.loginSocial .social-login-btn,
.entrySocial .social-login-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    text-decoration: none;
}

/* 公式ボタン画像：高さ40pxに統一し、横伸ばしせず各社アセットの比率を維持する（全幅でもストレッチしない）。
   狭幅で max-width が効いた場合も object-fit で比率を保ち横方向に潰れないようにする */
.loginSocial .social-login-official,
.entrySocial .social-login-official {
    height: 40px;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

/* 公式素材を持たないプロバイダ（X 等）の中立テキストリンク：テーマ色を使わず白地＋細枠で表示する */
.loginSocial .social-login-text,
.entrySocial .social-login-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
}

/* マイページ連携リストのブランドアイコン：24px（V1 と同階層 .social-login-status で統一） */
.social-login-status .social-login-icon {
    height: 24px;
    width: auto;
    margin-right: 8px;
    vertical-align: middle;
}

/* マイページ連携の操作ボタンセル：お届け先一覧より文言が長い（連携する/解除する）ため、横並び時のみセル幅を広げて折り返しを防ぐ。
   流用元と同じコンテナクエリ（横並び＝min-width:701px）に限定。狭幅は縦積み（flex-direction:column）になるため指定しない（高さに作用させない） */
@container (min-width: 701px) {
    .social-login-status .social-login-btn-cell {
        flex-basis: 160px;
    }
}