/*
Theme Name: My Genesis Child Dojichiken
Theme URI: https://example.com/
Description: Genesis child theme - layout/typography inspired by oac-kikaku.co.jp
Author: Media Design Matsumoto
Author URI: https://example.com/
Version: 1.0.0
Template: genesis
Text Domain: genesis-dojichiken
*/

/* ========== 0) CSS変数（配色・余白・フォント） ========== */
:root{

/* 初期値
  --brand: #97ca00; 
  --brand-dark: #6ea100;
  --ink: #222;
  --muted: #666;
  --bg: #fff;
  --bg-alt: #f7f8f9;
*/
  --brand: #2b2b2b;	/* 墨 */
  --brand-dark: #4f4f4f;	
  --ink: #2b2b2b;	/* 墨 */
  --muted: #4f4f4f;
  --bg: #f8f8f8;	/* 白磁 */
  --bg-alt: #c7802d;	/* 金茶 */

  --radius: 14px;
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;

  --fs-1: 14px; /* 最小本文 */
  --fs-2: 16px; /* 標準本文 */
  --fs-3: 18px; /* 見出し小 */
  --fs-4: 22px; /* 見出し中 */
  --fs-5: 28px; /* 見出し大 */
  --line: 1.65;
}

/* ========== 1) リセット系（必要に応じて軽量に） ========== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font: 400 var(--fs-2)/var(--line) system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* 画像・埋め込みは横幅にフィット */
img, iframe, video { max-width: 100%; height: auto; }

/*↓追加 -初期値-------------------- */

a {
	color: var(--brand);
	text-decoration: none;
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

a:focus,
a:hover {
	color: var(--brand-dark);
	text-decoration: underline;
}

button,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.button,
.gallery img {
	transition: all 0.2s ease-in-out;
}

p {
	margin: 0 0 28px;
	padding: 0;
}

ol,
ul {
	margin: 0;
	padding: 0;
}

li {
	list-style-type: none;
}

hr {
	border: 0;
	border-collapse: collapse;
	border-bottom: 1px solid currentColor;
	clear: both;
	color: #eee;
	margin: 1.65em auto;
}

b,
strong {
	font-weight: 700;
}

blockquote,
cite,
em,
i {
	font-style: italic;
}

mark {
	background: #ddd;
	color: #333;
}

blockquote {
	margin: 30px;
}
embed,
iframe,
img,
object,
video,
.wp-caption {
	max-width: 100%;
}

img {
	height: auto;
	vertical-align: top;
}

figure {
	margin: 0;
}


/*↑追加 --------------------- */

/* ========== 2) タイポグラフィ ========== */
h1,h2,h3,h4,h5 { margin: var(--space-4) 0 var(--space-2); line-height: 1.3; font-weight: 700; }
h1 { font-size: var(--fs-5); }
h2 { font-size: var(--fs-4); }
h3 { font-size: var(--fs-3); }
p  { margin: 0 0 var(--space-3); font-size: var(--fs-2); }
small { font-size: var(--fs-1); color: var(--muted); }

/* ========== 3) レイアウト（モバイル：単一カラム） ========== */
.wrap, .content, .site-inner { width: 100%; }
.site-container { overflow-x: hidden; } /* 横スクロール防止 */

/* ========== 4) ヘッダー & ロゴ ========== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid #eee;
}
.title-area { padding: var(--space-2) var(--space-3); }
.site-title a {
  text-decoration: none; color: var(--ink); font-weight: 800; letter-spacing:.2px;
}

/* 追加↓-------------- */
.site-title{
	display:none;}
.mdm-logo img{
	width:70%; height:auto;}
//タブレット以上はロゴ画像を大きくする
@media (min-width: 768px){
	.mdm-logo img{
		width:50%; height:auto;}
}
/* 追加↑ここまで-------------- */



/* ========== 5) ナビ（Genesis標準クラスを活用） ========== */
/* Genesis Responsive Menu を使う前提：.menu-toggle, .genesis-responsive-menu */
.menu-toggle {
  display: inline-flex; align-items: center; gap: .5em;
  margin: var(--space-2) var(--space-3);
  padding: .625rem .9rem;
  font-size: 15px;
  border: 1px solid #ddd; border-radius: var(--radius);
  background: var(--bg);
}
.menu-toggle:focus { outline: 2px solid var(--brand); outline-offset: 2px; }

.genesis-responsive-menu {
  /* モバイルは縦積み */
  display: none; /* JSでトグルされる */
  padding: 0 var(--space-2) var(--space-2);
}
.genesis-responsive-menu .genesis-nav-menu,
.genesis-nav-menu {
  list-style: none; margin: 0; padding: 0;
}
.genesis-nav-menu > li { border-top: 1px solid #eee; }
.genesis-nav-menu > li > a {
  display: block; padding: .9rem var(--space-3);
  text-decoration: none; color: var(--ink);
}
.genesis-nav-menu > li > a:active,
.genesis-nav-menu > li > a:focus,
.genesis-nav-menu > li > a:hover { background: var(--bg-alt); }

/* サブメニューはアコーディオン風 */
.genesis-nav-menu .sub-menu {
  display: none;
  list-style: none; margin: 0; padding: 0 0 var(--space-2) var(--space-4);
  border-left: 2px solid #eee;
}
.genesis-nav-menu .menu-item-has-children > .sub-menu-toggle{
  /* 子メニュー開閉ボタン（Genesisの補助クラス） */
  display: inline-block; margin-left: .5rem; border: 0; background: transparent;
}

/* ---------追加ハンバーガーメニュー--------------------------- */
.mdm-menu-toggle{
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
}

/* 三本線 */
.mdm-bar{
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px auto;
  background: #333;
  transition: transform .3s ease, opacity .3s ease;
}

/* スマホだけ表示 */
/* モバイルのみ有効 */
@media (max-width: 960px){

  .mdm-menu-toggle{
    display: block;
  }

  /* メニューは初期非表示 */
  .nav-primary .menu{
    display: none;
  }

  .nav-primary.is-menu-open .menu{
    display: block;
  }
}

/* ===== 開いた状態 → バツ ===== */
.nav-primary.is-menu-open .mdm-bar:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}

.nav-primary.is-menu-open .mdm-bar:nth-child(2){
  opacity: 0;
}

.nav-primary.is-menu-open .mdm-bar:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}


/* ↑ここまで---------追加ハンバーガーメニュー---------------------- */


/* ========== 6) パンくず / 見出し装飾 ========== */
.breadcrumb { padding: var(--space-2) var(--space-3); font-size: 13px; color: var(--muted); }
.breadcrumb a { color: inherit; text-decoration: none; }

/* ========== 7) コンテンツ ========== */
.entry { padding: var(--space-4) var(--space-3); }
.entry-title { margin-bottom: var(--space-2); }
.entry-content > *:first-child { margin-top: 0; }
.entry-content a { color: var(--brand); text-decoration: underline; }
.entry-content a:hover { color: var(--brand-dark); }

/* ========== 8) ボタン / CTA ========== */
.button, .button a, .wp-block-button__link, input[type="submit"], button[type="submit"]{
  display: inline-block;
  padding: .9rem 1.1rem; border-radius: var(--radius);
  background: var(--brand); color: #fff; text-decoration: none; border: none;
  font-weight: 700; line-height: 1; cursor: pointer;
}
.button:hover, .wp-block-button__link:hover, input[type="submit"]:hover { filter: brightness(.95); }

/* ========== 9) ウィジェット / サイドバー（モバイルでは下に積む想定） ========== */
.sidebar-primary, .sidebar-secondary, .widget-area {
  padding: 0 var(--space-3) var(--space-4);
}
.widget { margin: 0 0 var(--space-4); }
.widget-title { font-size: var(--fs-3); margin-bottom: var(--space-2); }

/* ========== 10) フォーム ========== */
input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="password"], textarea, select{
  width: 100%; padding: .8rem .9rem; border: 1px solid #ddd; border-radius: 10px;
  font: inherit; background: #fff;
}
label { display: block; margin: 0 0 .4rem; font-weight: 600; }

/* ========== 11) テーブル（横スクロール） ========== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { border-bottom: 1px solid #eee; padding: .7rem; text-align: left; }

/* ========== 12) カードUI（投稿一覧など） ========== */
.card {
  background: #fff; border: 1px solid #eee; border-radius: var(--radius);
  padding: var(--space-3); box-shadow: 0 2px 6px rgba(0,0,0,.03);
}
.card + .card { margin-top: var(--space-3); }
.card .card-title { font-weight: 700; margin: 0 0 .4rem; }
.card .meta { font-size: 12px; color: var(--muted); }

/* ========== 13) フッター ========== */
.site-footer {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-3);
  background: var(--brand); 
	color: #fff; 
	font-size: 13px;
}
.site-footer a { color: #eee; text-decoration: none; }

/* ========== 14) ユーティリティ（余白・配置） ========== */
.container { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-3); }
.mt-0{ margin-top:0 } .mb-0{ margin-bottom:0 }
.mt-2{ margin-top:var(--space-2) } .mb-2{ margin-bottom:var(--space-2) }
.mt-3{ margin-top:var(--space-3) } .mb-3{ margin-bottom:var(--space-3) }

/* ========== 15) アクセシビリティ・タップ領域 ========== */
a, button { -webkit-tap-highlight-color: rgba(0,0,0,0); }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 2px solid var(--brand); outline-offset: 2px;
}
button, .button, .genesis-nav-menu > li > a { min-height: 44px; } /* 指で押しやすく */


/* 追加↓-------------- */
/* Gutenbergの全幅/幅広をGenesisでも効かせる
	使い方　class=alignfull
 */
.entry-content .alignfull{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.entry-content .alignwide{
  width: min(1200px, 100%);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 追加↑-------------- */

/* =========================================================
   16) ブレークポイント（段階的に“PC的”にしていく）
   目安: 600px: タイポ拡大, 768px: 2カラム, 1024px: デスクトップ
   ========================================================= */

/* >= 600px */
@media (min-width: 600px){
  :root{ --fs-2: 17px; --fs-3: 19px; --fs-4: 24px; }
  .entry { padding: var(--space-5) var(--space-3); }
}

/* >= 768px（タブレット） */
@media (min-width: 768px){
  /* ヘッダー配置 */
  .site-header .wrap { display: flex; align-items: center; justify-content: space-between; }
  .title-area { padding: var(--space-2) var(--space-3); }

  /* ナビを横並びに（Genesis Responsive Menuが自動で表示切替する場合は調整） */
  .menu-toggle { display: none; }        /* トグル非表示 */
  .genesis-responsive-menu { display: block !important; padding: 0; }
  .genesis-nav-menu { display: flex; gap: .25rem; align-items: center; }
  .genesis-nav-menu > li { border: 0; }
  .genesis-nav-menu > li > a {
    padding: .9rem 1rem; border-radius: 10px;
  }
  .genesis-nav-menu .sub-menu {
    position: absolute; left: -9999px; opacity: 0; pointer-events: none;
    background: #fff; border: 1px solid #eee; border-radius: 10px; padding: .4rem; min-width: 220px;
  }
  .genesis-nav-menu li:hover > .sub-menu {
    left: 0; opacity: 1; pointer-events: auto; z-index: 100;
  }


/* >= 1024px（デスクトップ） */
@media (min-width: 1024px){
  :root{ --fs-2: 18px; --fs-3: 20px; --fs-4: 26px; --fs-5: 32px; }
	.site-header .wrap,
	.nav-primary .wrap,
	.content-sidebar-wrap,
	.site-footer .wrap{
		margin: 0 auto;
		width: 1024px;
	}
  .entry { padding: var(--space-5) 0; }
  .genesis-nav-menu { gap: .4rem; }
}