/*
Theme Name: haiboku
Theme URI: https://example.com/
Author: あなたの名前
Description: モックデザインと管理性を両立した WordPress テーマ
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #ffffff;
  color: #333;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

header,
footer {
  background: #000;
  color: #fff;
  padding: 1em;
  text-align: center;
}

main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

/* ボタン */
.button,
button {
  display: inline-block;
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  border: none;
  font-size: 1rem;
  cursor: pointer;
}

.button:hover {
  opacity: 0.8;
}

/* レスポンシブ */
@media (max-width: 768px) {
  main {
    padding: 15px;
  }

  header,
  footer {
    padding: 0.8em;
  }

  .button {
    width: 100%;
    box-sizing: border-box;
  }
}
/* ===========================
   フッター用スタイル（例）
   ・背景色：#d32d25
   ・上段テキストは黒、下段コピーライトは白
   ・左右２カラム → レスポンシブで縦並びに切り替え
============================= */

.site-footer {
  background-color: #d32d25;  /* フッター背景 */
  color: #000;                /* 上段テキスト色：黒 */
  font-family: 'Noto Sans JP', sans-serif;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* 上段：左右２カラム（会社情報とロゴを並べる） */
.site-footer .footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 左カラム */
.site-footer .footer-left {
  flex: 1 1 300px;            /* 幅 300px から、余裕があれば伸びる */
  text-align: left;
}
.site-footer .footer-left p {
  margin: 4px 0;
  line-height: 1.4;
  font-size: 0.95em;
}
.site-footer .footer-company-name {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 6px;
}
.site-footer .footer-company-url a {
  color: #000;
  text-decoration: none;
}
.site-footer .footer-company-url a:hover {
  text-decoration: underline;
}
.site-footer .footer-company-address,
.site-footer .footer-company-tel,
.site-footer .footer-company-hours {
  font-size: 0.95em;
}

/* 右カラム：ロゴ */
.site-footer .footer-right {
  flex: 0 0 200px;           /* 固定幅 200px */
  text-align: right;
}
.site-footer .footer-right .footer-logo {
  max-width: 180px;           /* ロゴ画像の最大幅 */
  height: auto;
  display: inline-block;
}

/* 下段：コピーライト */
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  margin-top: 12px;
  padding-top: 12px;
  text-align: center;
}
.site-footer .footer-bottom .footer-copyright {
  color: #fff;               /* コピーライトは白 */
  font-size: 0.9em;
  line-height: 1.4;
  margin: 0;
}

/* ----------------------------
   レスポンシブ：幅 768px 以下
   ・footer-top を縦並びに切り替え
   ・ロゴを上に、会社情報を下に表示
   ・余白を小さくして詰める
----------------------------- */
@media (max-width: 768px) {
  .site-footer .footer-top {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
  }
  .site-footer .footer-right {
    order: -1;                /* ロゴを先に表示 */
    text-align: center;
    margin-bottom: 8px;       /* 下要素との隙間を少しだけ */
    flex: 1 1 100%;
  }
  .site-footer .footer-left {
    order: 0;                 /* 会社情報をロゴの下に表示 */
    text-align: center;
    margin: 0;                
    padding: 0;
    flex: 1 1 100%;
  }
  .site-footer .footer-bottom {
    margin-top: 8px;
    padding-top: 8px;
  }
}