/*
Theme Name: Twenty Twenty-Two Child
Theme URI: https://habone.biz/twenty-twenty-two-child-download/
Author: Himaart
Author URI: https://habone.biz/
Description: A child theme for TT2.
Requires at least: 6.3
Tested up to: 6.3.1
Requires PHP: 8.0
Version: 2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo-child
Template: twentytwentytwo
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments

Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two Child is distributed under the terms of the GNU GPL.
*/



 /* ここから追記ここから追記 */


.required {
  color: #9b080a;
  font-size: 0.8em;     /* 少し小さくしたい場合 */
}

/* フッターを常に下に固定 */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wp-site-blocks {
  flex: 1;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}


/* トップページのフッターを常に下に固定  */

body.page-id-17 .wp-site-blocks {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.page-id-17 .wp-site-blocks > *:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.page-id-17 main {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


@media (min-width: 1024px) {
  body.page-id-17 .wp-site-blocks {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body.page-id-17 .wp-site-blocks > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body.page-id-17 main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body.page-id-17 .pc {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
    height: auto !important;
  }
}


@media (max-width: 768px) {
  body.page-id-17 .wp-site-blocks {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body.page-id-17 .wp-site-blocks > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body.page-id-17 main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body.page-id-17 .mb {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
    height: auto !important;
  }
}

/* 該当ページのみ中央揃え＋フッター固定 */
body.page-id-17 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

  
/* ナビゲーションがモバイル表示になるブレークポイントを調整するCSS */
@media (max-width: 820px) {
  /* メニュー開閉ボタンは常に表示 */
  .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }

  /* メニュー本体（開く前は非表示） */
  .wp-block-navigation__responsive-container {
    display: none !important;
  }

  /* メニュー本体が開いたとき表示 */
  .wp-block-navigation__responsive-container.is-menu-open {
    display: block !important;
  }

  /* 閉じるボタンも常に表示 */
  .wp-block-navigation__responsive-container-close {
    display: flex !important;
  }
}



/* ヘッダーとフッターの余白を消す */
body.home .wp-site-header,
body.home .wp-site-footer {
  margin: 0 auto;
  padding: 0;
  width: 100% !important;     /* ← 100vwから変更 */
  max-width: 100% !important; /* ← 追加 */
}

body.home .wp-block-group.alignfull {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;     /* ← 100vwから変更 */
}


/* WORKSのリンクのリンク */
.category-nav a {
  color: #c9caca;
  text-decoration: none;
  margin-left: 1em;
  padding-left: 1em;
  position: relative;
}

.category-nav a:hover {
  color: #000;
}

/* 縦線（左側に表示） */
.category-nav a:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 1px;
  background-color: #000;
}


/* お問い合わせ */
/* フォーム全体を中央寄せ */
.mw_wp_form {
  max-width: 600px;
  margin: 0 auto;
}

/* ラベル調整 */
.mw_wp_form label {
  display: block;
  margin: 20px 0 5px;
}

/* 入力欄共通スタイル（テキスト、メール、電話） */
.mw_wp_form input[type="text"],
.mw_wp_form input[type="email"],
.mw_wp_form input[type="tel"],
.mw_wp_form textarea {
  width: 100%;
  background-color: #ddd8d8;  /* 色ベタ背景 */
  border: none;               /* 罫線なし */
  padding: 10px 15px;
  font-size: 15px;
  color: #000;
  box-sizing: border-box;
}


/* 入力欄のプレースホルダー（ダミー文字）を白く */
.mw_wp_form input::placeholder,
.mw_wp_form textarea::placeholder {
  color: #ffffff;
  opacity: 1;
}



/* テキストエリア（メッセージ欄）の高さ調整 */
.mw_wp_form textarea {
  height: 150px;
  resize: none;
}


/* 共通ボタンデザイン */
.mwform-btn {
  display: inline-block;
  min-width: 120px;
  padding: 10px 20px;
  text-align: center;
  border: 1px solid #000;
  font-size: 16px;
  margin: 10px;
  cursor: pointer;
  background-color: #000;
  color: #fff;
}

/* 戻るボタンだけ白背景 */
.mwform-btn.back {
  background-color: #fff;
  color: #000;
}

/* ボタンを中央寄せ */
.mwform-button-container {
  text-align: center;
  margin-top: 30px;
}






/* カバーの縦横比 */
.image-size-fix {
  padding:0 0 calc(2000/4000*100%) !important;
  min-height: 0 !important;
}
.image-size-fix .wp-block-cover__inner-container{
  position: absolute;
  padding: 0;
  top: 40%;
}


/* 画像の切り替え */
/* PCサイズ（1280px以上） */
.pc { display: block !important; }
.tb, .mb { display: none !important; }




/* タブレットサイズ（768〜1279px） */
@media screen and (max-width: 1279px) {
  .pc { display: none !important; }
  .tb { display: block !important; }
  .mb { display: none !important; }
}

/* スマホサイズ（767px以下） */
@media screen and (max-width: 767px) {
  .pc, .tb { display: none !important; }
  .mb { display: block !important; }
}


/* 画像の切り替え2種 */
/* デフォルト（PC・タブレット用） */
.pc-tb {
  display: block;
}
.mb {
  display: none;
}

/* スマホ・タブレット縦で切り替え（必要なら 900px以下などに調整） */
@media screen and (max-width: 767px) {
  .pc-tb {
    display: none !important;
  }
  .mb {
    display: block !important;
  }
}


/* 中央揃え */
.center img {
  display: block;
  margin: 0 auto;
}

/* ヒーローセクションの高さ調整 */
.hero-section {
  min-height: 100vh; /* ビューポートの高さに合わせる */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 上下中央寄せ */
  align-items: center;     /* 左右中央寄せ */
  position: relative;
}

/* ロゴ画像のサイズと余白調整（必要に応じて） */
.hero-section img {
  max-width: 90%;
  height: auto;
  margin-bottom: 2rem;
}

/* フッターの表示調整（スクロールで隠れないように） */
footer {
  position: relative;
  z-index: 10;
}



/* オーバーレイ幅や右寄せだけ制御 */
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed;
  top: 0;
  right: 0;
  width: 50vw;
  max-height: 100vh;
  background-color: rgba(255, 255, 255, 0.8) !important;
  color: #000 !important;
  z-index: 9999;
  padding: 1em;
  box-sizing: border-box;
}



/* オーバーレイメニュー全体の文字色 */
.wp-block-navigation__responsive-container.is-menu-open {
  color: #000 !important;
  background-color: rgba(255,255,255,0.8)!important;
}

/* メニュー項目のリンク色を個別に強制的に変更 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content a {
  color: #000 !important;
}

/* 現在のページ（アクティブなページ）のリンク色も強制的にスミに変更 */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.is-active {
  color: #000 !important;
}

/* 閉じるボタン（×）の色も念のため再設定 */
.wp-block-navigation__responsive-container-close {
  color: #000 !important;
}

/* オーバーレイメニューで最初の項目に下線がつく問題を打ち消す */
.wp-block-navigation__responsive-container.is-menu-open li:first-child a {
  text-decoration: none !important;
}




  /* トップページで常にフッターを全部表示 */
body.home .wp-site {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

body.home .wp-site-main {
  overflow-y: auto;
}

body.home .wp-site-footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: #fff; /* 背景が透けないように明示的に指定（必要に応じて変更） */
}

  
  /* グループの中を天地センター */
.centered-group {
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 50vh; /* 必要に応じて調整 */
   }


   /* 幅広・全幅ブロックの左右余白を削除 */
.wp-block-group.alignwide,
.wp-block-group.alignfull,
.wp-block-columns.alignwide,
.wp-block-columns.alignfull {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* 幅広の最大幅を強制的に設定 */
.alignwide {
  max-width: 1900x;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}



   /*飾り罫の太さ*/
.thin-line {
  min-height: 0 !important;
  height: 10px; /* 飾り罫の太さを調整 */
  padding: 0 !important;
  margin: 0 !important;
}



   /*ライトボックスのキャプションを複数行を複数行*/
/* 最上位キャプションラッパー */
.pswp__caption {

  max-width: 90%;
  margin: 0.5em auto;
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  left: 0 !important;
  right: 0 !important;

}

/* キャプション本体 */
.pswp__caption__center {
  max-width: 90%;
  width: 100% !important;
  text-align: left !important;
  padding: 1em 2em !important;
  box-sizing: border-box !important;
  color: white !important;
  font-size: 1em !important;
  line-height: 1.8 !important;
  white-space: normal !important;
  display: inline-block;
  margin: 0em 0em;
  word-break: normal !important;      /* ← 本体にも一応指定 */
  overflow-wrap: anywhere !important; /* ← 極端に狭い時に柔軟に対応 */
}

/* 小さい文字にしたい部分 */
.small-caption {
  font-size: 0.85em;
  line-height: 1.6;
  display: block;
  margin: 0.8em 0em;
  white-space: normal;
  word-break: normal; 
}*

/* 小さい文字日付部分 */
.small-date {
  font-size: 0.85em;
  line-height: 1.6;
  display: block;
  margin: 0em;
  white-space: normal;
  word-break: normal; 
}*

/* WORKSのグリッド */
.works-grid {
  display: grid;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  grid-template-columns: repeat(3, 1fr); /* デフォルト3列 */
}

@media (max-width: 768px) {
  .works-grid {
    grid-template-columns: repeat(3, 1fr); /* タブレットでも3列 */
  }
}

@media (max-width: 600px) {
  .works-grid {
    grid-template-columns: 1fr; /* スマホでは1列 */
  }
}

.grid-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* トップページ天地センターにロゴ */
.wp-block-cover {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}


/*横スクロール抑止*/

html, body {
  overflow-x: hidden;
}


/* カスタムクラスで全幅に広げるブロックの設定 */
.custom-fullwidth {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

.items-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em; /* 項目間のスペース */
  line-height: 0.1; /* 行間（必要であればここも小さく） */
}

.items-wrap span {
  white-space: nowrap;        /* 単語内改行禁止 */
  font-size: 1rem;         /* 文字サイズ（調整可） */
  line-height: 0.1;           /* 行間（調整可） */
}


/* 左右センター、天地上揃え */
.column-image-wrapper {
  display: flex;
  justify-content: center; /* 左右中央 */
  align-items: flex-start; /* 上揃え */
  height: 100%; /* 必要に応じて親要素に合わせる */
}


/* カラムの幅を個別に指定 */
.wp-block-column.column-50 {
  flex: 0 0 50%;
  max-width: 50%;
}

.wp-block-column.column-25 {
  flex: 0 0 25%;
  max-width: 25%;
}