/* =====================================================
   共通フッター(_Layout.cshtmlの<footer>に適用)。
   genericStyle.cssから独立させたファイルです(header.cssと同様、
   _Layout.cshtml以外のページからは参照されていないため)。

   クラス名について: 当初「.footer」としていましたが、これはASP.NET Core
   既定のスキャフォールドが持つ.footerクラス(CarAssist21Replace.styles.css。
   white-space: nowrap; line-height: 60px; 等を含む)と同名で衝突しており、
   セキュリティ表記が折り返さない・会社情報の行間が異常に広い、という
   不具合の原因になっていました。衝突を避けるため「.siteFooter」に
   変更しています。

   ・上端はヘッダーと同じ色(#1850a2)の細いsolid線、それ以外は薄いグレーの
     枠線で全体を囲んでいます。<footer>要素自体は画面幅いっぱいのままとし、
     内側のロゴ・会社情報は.standardPageContainerでmax-width: 1200pxに
     絞っています(ヘッダーと同じ考え方です)。
   ・セキュリティ表記(ベリサインのラベル)は削除したため、ロゴ+会社情報
     (住所・電話番号・URL)のブロックのみをフッター中央に横並びで表示します。
   ・スマートフォン画面(768px以下)では、ロゴ+会社情報のブロック内で
     ロゴと会社情報を縦積みにします。
   ・最下段に薄い文字色のコピーライトを中央ぞろえで表示しています。

   ===== フッターの表示位置(sticky footer) =====
   本文(.mainContentWrapper、_Layout.cshtmlの<div class="container">に
   追加したクラス)とフッターをFlexboxの縦並びにし、
   .mainContentWrapper側をflex: 1 0 auto;で伸縮させることで、
   ・PC表示(1025px以上)で本文が短い場合でも、bodyの最小高さを900pxに
     しているため、フッターの下端がだいたい900px付近の位置に来ます
     (本文がその分だけ引き伸ばされ、フッターは常にその下に続きます)。
   ・本文が900pxより長い場合は、.mainContentWrapperがflex-grow:1でも
     内容以下には縮まないため、フッターは通常のドキュメントの流れとして
     本文の後ろに続くだけになり、bodyと重なることはありません。
   ===================================================== */
.siteFooter {
    border: 1px solid #CCCCCC;
    border-top: 2px solid #1850a2;
    box-sizing: border-box;
    margin-top: 24px;
    line-height: normal;
    flex-shrink: 0;
}

body {
    display: flex;
    flex-direction: column;
}

.mainContentWrapper {
    flex: 1 0 auto;
}

/* 「縦に短い画面の場合、PC表示ではフッターの下端が900px付近に来る」
   というご要望のため、PC相当(1025px以上)にのみmin-heightを適用して
   います。スマホ/タブレットでは本文の実際の高さのままにしています。 */
@media (min-width: 1025px) {
    body {
        min-height: 900px;
    }
}

/* .standardPageContainer(最大幅1200px)と組み合わせて使うクラス。
   ロゴ+会社情報のブロックのみになったため、中央ぞろえで表示します。
   paddingはshorthandで書くと.standardPageContainerの
   padding: 0 23px;(左右の余白)を上書きしてしまうため、
   padding-top/bottomのみ指定しています。 */
.footerContent {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
    box-sizing: border-box;
    width: 100%;
}

/* ロゴ+会社情報のブロック */
.footerCompanyBlock {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
}

#footerLogo {
    height: 60px;
    width: auto;
}

/* 会社住所・電話番号・URL(会社名はロゴ画像に含まれているため省略) */
.footerCompanyInfo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: smaller;
    line-height: 1.4;
    color: #404040;
    white-space: nowrap;
}

#footerCompanyWebsite {
    color: #404040;
}

.footerCopyright {
    text-align: center;
    color: #B3B3B3;
    font-size: smaller;
    margin: 0;
    padding: 8px 0 16px;
}

/* スマートフォン(768px以下): ロゴ+会社情報のブロック内でも、
   ロゴと会社情報を縦積みにします */
@media (max-width: 768px) {
    .footerCompanyBlock {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
}