/*
Theme Name: Genesis Child kobayashi
Theme URI: https://example.com/
Description: Genesis child theme - for Miyazawa Lane
Author: Media Design Matsumoto
Author URI: https://example.com/
Version: 1.0.0
Template: genesis
Text Domain: genesis-kobayashi
*/

/* =========================================================
   1) Root Variables (色・余白・文字)
========================================================= */
:root{
  /* Colors #3cb371をベースとしたカラーセット */
--White: #ffffff;
--PrimaryDark:#003b78;
--PrimaryBace:#0054a7;
--PrimaryLight:#3d7dc2;
--PrimaryPale:#eaf2fb;
--AccentOrange:#ff6b35;
--AccentTeal:#00b2a9;
--TextDark: #1a2733;
--TextGray: #5b6b7a;
--BorderGray: #d7dfe7;
--Background:#f5f8fb;
--Success:#2e9e5b;
--Warning:#f2a93b;
--Error:#e0473e;


  /* Typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-size: 16px;
  --line-height: 1.75;

  /* Layout */
	--container: 1080px;
	--gutter: 18px;	/* 左右余白 */
	--header_height: 130px;

  /* Spacing scale */
  --s-1: 6px;
  --s-2: 10px;
  --s-3: 14px;
  --s-4: 18px;
  --s-5: 24px;
  --s-6: 32px;

  /* Radius / Shadow */
  --radius: 10px; /* 角を丸くする */
  --shadow: 0 10px 30px rgba(0,0,0,.08);

}

/* =========================================================
   2) Base Reset (最小限)
========================================================= */
*,
*::before,
*::after{ box-sizing: border-box; }

html{ font-size: var(--font-size); }
body{
	margin: 0;
	font-family: var(--font-sans);
	line-height: var(--line-height);
	color: var(--TextDark);
	background: var(--White);
	-webkit-text-size-adjust: 100%;
}

img{ max-width: 100%; height: auto; vertical-align: middle; }
a{ color: var(--PrimaryBace); text-decoration: none; }
a:hover{ text-decoration: underline; }

p, ul, ol, figure{ margin: 0 0 var(--s-5); }
h1,h2,h3,h4,h5,h6{ margin: 0 0 var(--s-3); line-height: 1.25; }
hr{ border: 0; border-top: 1px solid var(--BorderGray); margin: var(--s-6) 0; }

:focus-visible{
  outline: 2px solid var(--BorderGray);
  outline-offset: 2px;
}

/* =========================================================
   3) Genesis Layout (1カラム固定)
   - 右サイドバーなどが出ても表示しない
========================================================= */
.site-container{ min-height: 100vh; }	/* 最小限の高さ　フッターが下部に留まるため */

.wrap{
  width: min(var(--container), 100%);	/* 画面が広いときは 1080px で固定。画面が狭くなり 100% の計算結果が 1080px を下回るとそちらが優先されレスポンシブに縮小します。  */
  margin-inline: auto;
  padding-inline: var(--gutter);	/* 左右余白 */
}

.site-inner{
  padding-block: var(--s-6);	/* 要素の内側の余白 */
}

.content-sidebar-wrap{
  /* Genesisの2カラム崩れを防ぐ：常に1カラム */
  display: block;
}

.content{
  width: 100%;
  max-width: 100%;
}

/* サイドバーは使わない前提 */
.sidebar,
.sidebar-primary,
.sidebar-secondary{
  display: none !important;
}

/* =========================================================
   4) Header + Nav inside header
========================================================= */
.site-header{
	background: var(--PrimaryBace);
	border-bottom: 1px solid var(--BorderGray);
	padding: 36px auto 15px auto;	/* ヘッダの上下のパディング */
	height: 100px;
}

.site-header > .wrap{
	/* .site-header .wrap  子孫セレクタ：何階層下でもマッチ .site-header > .wrap  子セレクタ：直接の子だけマッチ */*/
	min-height: var(--header_height);	/*高さの最小値*/
	display: flex;
	align-items: left;
	justify-content: space-between;		/*グリッドの横方向の配置 フレックスボックス、グリッド、マルチカラム、ボックス等をレイアウトするために使用*/
	gap: var(--s-4);	/*列方向、行方向の隙間を指定*/
	flex-wrap: wrap;	/* はみ出してでも一列に並べて表示するか ＝複数行(列)に改行*/
}


/* タイトル（ロゴ） */
.title-area{
	
}

.site-title{
	font-size: 32px;
	margin: 0;
}
.site-title a{
	color: var(--White);
	text-decoration: none;
}
.site-description{
	margin: 0;
	color: var(--Background);
	font-size: 16px;
}


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

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

/* ===== 開いた状態 → バツ ===== */
.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);
}


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

/* ハンバーガーメニューの開閉制御*/
.nav-primary.is-menu-open .menu{
	display: block;
}

/* サブメニュー：通常は非表示 */
.nav-primary .sub-menu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* クリックで表示（JSがis-submenu-openクラスを付与） */
.nav-primary .menu-item-has-children.is-submenu-open > .sub-menu {
	display: block;
}


/* PCに適用 */
@media (min-width: 961px){
	.mdm-menu-toggle{
	  display: none;
	}


	/* ナビゲーション全体のラッパーを右揃え */
	.nav-primary {
		width: 100%;
	}

	.nav-primary .wrap {
		display: flex;
		justify-content: flex-end;  /* 右揃え */
		align-items: center;
	}

	/* メニューリスト本体 */
	.nav-primary .genesis-nav-menu {
	    display: flex;
	    flex-direction: row;
	    flex-wrap: wrap;
	    justify-content: flex-end;  /* こちらにも指定（確実性のため） */
	    list-style: none;
	    margin: 0;
	    padding: 0;
	}

	/* 各メニューアイテム */
	.nav-primary .genesis-nav-menu > .menu-item {
		display: inline-block;
		position: relative;	/* ドロップダウン基準点 */
		margin: 0;
	}

	/* メニューリンク */
	.nav-primary .genesis-nav-menu > .menu-item > a {
	    display: block;
	    padding: 16px 20px;	/* 上下・左右の余白 */
	    color: var(--TextDark);	/* 文字色 */
	    font-size: 16px;
	    font-weight: bold;
	    text-decoration: none;
	    white-space: nowrap;	/* 折り返し防止 */
		transition: color 0.2s ease, background-color 0.2s ease;	/*アニメーション*/
	}

	/* ホバー */
	.nav-primary .genesis-nav-menu > .menu-item > a:hover,
	.nav-primary .genesis-nav-menu > .menu-item > a:focus {
		color: var(--TextGray);	/* ホバー時の文字色 */
		background-color: var(--Background);	/* ホバー時の背景色 */
	}

	/* 現在のページ（current-menu-item） */
	.nav-primary .genesis-nav-menu > .menu-item.current-menu-item > a,
	.nav-primary .genesis-nav-menu > .menu-item.current-menu-ancestor > a {
		color: var(--PrimaryLight);
		border-bottom: 2px solid var(--PrimaryLight);  /* 現在地の下線アクセント */
	}

	/* PC：サブメニューのドロップダウン表示 */
	.nav-primary .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		background-color: red;
		min-width: 180px;
		z-index: 100;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
		border: 1px solid pink;
	}

	.nav-primary .sub-menu .menu-item {
		display: block;
	}

	.nav-primary .sub-menu a {
		display: block;
		padding: 10px 20px;
		color: var(--text);
		font-size: 16px;
		font-weight: normal;
		text-decoration: none;
		white-space: nowrap;
	}

	.nav-primary .sub-menu a:hover {
		background-color: yellow;
		color: green;
	}

}




/* =========================================================
   7) Content styling (最低限)
========================================================= */
.entry{
  background: var(--Background);
}

.entry-content{
  font-size: 14px;
}

.entry-content a{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Buttons (任意) */
button,
input[type="submit"]{
  font: inherit;
  border-radius: 999px; /* 角を丸くする  */
  border: 1px solid red;
  padding: 10px 16px;
  background: var(--AccentOrange);
  color: var(--button_text);
  cursor: pointer;
}

button:hover,
input[type="submit"]:hover{
	border-color: color-mix(in srgb, yellow, var(--TextDark) 15%);
}

/* ↓追加　===== Content を 1100px 以上にしないでセンター  */
.content-sidebar-wrap{
  width: min(var(--container), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);	/* 左右余白 */
}

.content{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
/* ↑ Content を 1100px 以上にしないでセンター */

/* =========================================================
   8) Footer
========================================================= */
.site-footer{
  border-top: 1px solid var(--White);
  padding: var(--s-6) 0;
  color: var(--White);
  background: var(--PrimaryDark);
}
.site-footer a{ color: var(--PrimaryPale); }




/* フッターメニュー　サブメニュー */
/* 
	nav-footer	フッターメニュー固有のクラス。CSS の主要なセレクタ
	ul class
		menu	WordPress 標準のメニュークラス
		genesis-nav-menu	Genesis共通のメニュークラス（基本スタイルが当たる）
		menu-footer		このメニュー固有のクラス（メニュー名から自動生成）
		js-superfish		Genesis のドロップダウン JS 用
	li class
		menu-item	すべての項目に付く
		menu-item-has-children		子メニューを持つ項目だけに付く
		current-menu-item	表示中のページ
		current-menu-parent	表示中のページの親項目
		current-menu-ancestor	表示中のページの祖先項目（さらに上の階層）
	サブメニュー
		<ul class="sub-menu">

*/
/*　footer領域にGenesis Simple Menusを使ってmenuを表示   */
.footer-menu-container {
	text-align: left;
	padding: 10px 0;
	color: var(--White);
	background: var(--PrimaryDark);
	font-size: var(--s-3);
}
/* フッターメニュー全体 */
.nav-footer {
	padding: 1em 0;
}

/* メニュー項目を横並びに */
.nav-footer .genesis-nav-menu {
	text-align: center;
}

.nav-footer .menu-item {
	display: inline-block;
}

.nav-footer a {
	color: var(--White);
	padding: 0.5em 1em;
	text-decoration: none;
}

/* サブメニューを持つ項目だけに矢印を付ける */
.nav-footer .menu-item-has-children > a::after {
	content: " ▼";
	font-size: 0.8em;
}

/* サブメニュー：通常は非表示 */
.nav-footer .sub-menu {
	display: none;
	position: absolute;
	background-color: var(--PrimaryDark);
	min-width: 200px;
	z-index: 100;
}

/* 親をホバーしたら表示 */
.nav-footer .menu-item-has-children:hover > .sub-menu {
	display: block;
}

/* 第3階層は右側に展開 */
.nav-footer .sub-menu .sub-menu {
	left: 100%;
	top: 0;
}

/* 現在のページをハイライト */
.nav-footer .current-menu-item > a {
	color: red;
}

/* =========================================================
   全幅/幅広をGenesisでも効かせる
========================================================= */

.entry-content > .alignfull{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
	max-width: none; /* 親のmax-width継承を打ち消す */

}

.entry-content .alignwide{
  width: min(var(--container), 100%);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* =========================================================
	要素をセンターにする
========================================================= */
/* 横をセンターに */
.center_awase {
	max-width: var(--container);
	margin: 0 auto;
}
/* 縦をセンターに ×これは動きません */
.center_tate_awase {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* =========================================================
   最新記事リスト [recent_posts]
========================================================= */
.mdm-recent-posts {
	list-style: none;
	margin: 0 0 var(--s-5);
	padding: 0;
}

.mdm-recent-posts__item {
	display: flex;
	align-items: baseline;
	gap: var(--s-3);
	padding: var(--s-2) 0;
	border-bottom: 1px solid var(--border);
	font-size: 0.95rem;
}

.mdm-recent-posts__item:first-child {
	border-top: 1px solid blue;
}

.mdm-recent-posts__date {
	flex-shrink: 0;
	color: black;
	font-size: 0.85rem;
	opacity: 0.7;
}

.mdm-recent-posts__item a {
	color: black;
	text-decoration: none;
	transition: color 0.2s ease;
}

.mdm-recent-posts__item a:hover {
	color: #080808;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =========================================================
   全幅スライダー [mdm_slider]
========================================================= */
.mdm-slider {
	position: relative;
	overflow: hidden;
	height: var(--slider-h, 500px);
	background: #000;
}

.mdm-slider__track {
	display: flex;
	height: 100%;
	transition: transform 0.5s ease;
	will-change: transform;
}

.mdm-slider__slide {
	flex: 0 0 100%;
	height: 100%;
}

.mdm-slider__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 矢印ボタン（グローバルの button スタイルを上書き） */
.mdm-slider__prev,
.mdm-slider__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 48px;
	height: 48px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 32px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s;
}

.mdm-slider__prev { left: 16px; }
.mdm-slider__next { right: 16px; }

.mdm-slider__prev:hover,
.mdm-slider__next:hover {
	background: rgba(0, 0, 0, 0.75);
}

/* ドットナビ */
.mdm-slider__dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 10;
}

.mdm-slider__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: background 0.2s;
}

.mdm-slider__dot.is-active {
	background: #fff;
}

/* SP：高さを半分に縮める */
@media (max-width: 600px) {
	.mdm-slider {
		height: calc(var(--slider-h, 500px) * 0.55);
	}
}