/* 中脇塗装様のサンプルページ用 */
/* 2025 07 28 作成開始 */
/* 将来的なメンテや、他の人がコードを見た時に備えてメモ */
/* ------------------- */
/* CSSの記述順 */
/* 1. root は、メガメニューの配色用 */
/* 2. html,body,pなどhtmlの標準的なタグのスタイル指定 */
/* 3. トップページの装飾用（画像を全画面表示）便宜上、ヘッダーと呼称 */
/* 4. フォント設定 */
/* 5. スペーサー（縦に30px分の間隔を空ける） */
/* 6. 見出しの装飾用 */
/* 7. フレックスボックス */
/* 8. フローティングバナー（家のアイコンの配置用） */
/* 9. トップページのメニュー（メガメニュー）装飾用 */
/* 10. メディアクエリ（レスポンシブ対応関連は、ここ） */


:root {
  --primary-color: #e81e2e;
  --secondary-color: #fcfcfc;
  --accent-color: #007bff;
  --bg-color: #fcfcfc;
  --border-color: #e81e2e;
}

/* 1rem = 10px */
html {
	scroll-behavior: smooth;
	font-size: 10px;
}

body {
	overflow-x:hidden;
	font-family: Arial, sans-serif;
	background-color: #e0ffff;
	color: #333333;
}

/* 長い見出しを任意の位置で改行させるための設定 */
h1 span {
	display:inline-block;
}
h2 span {
	display:inline-block;
}
h3 span {
	display:inline-block;
}
h4 span {
	display:inline-block;
}
h5 span {
	display:inline-block;
}
h6 span {
	display:inline-block;
}


p {
	font-size:2.2rem;
	text-indent:2.2rem;
}

a {
	font-size:2.2rem;
	text-decoration: underline;
}
ol li {
	font-size:2.2rem;
}

ul li {
	font-size:2.2rem;
}

/* トップページのヘッダー（内装の写真を全画面表示） */
.header-img {
	position:relative;
	display: flex;
	width:100vw;
	height:100vh;
	justify-content: center;
	align-items: center;
}
.header-img h1{
	position:absolute;
	display:block;
	margin:0 auto;
	padding:20px;
	background-color:#333333cc;
	z-index:2;
}
.header-img img{
	position:absolute;
	width:100vw;
	height:100vh;
	top:0px;
	left:0px;
	object-position:center;
	object-fit:fill;
	z-index:1;
}


/* フォントの設定 2025 08 13 追加 */
/* googleのwebフォント『しっぽり明朝』を使用 */
/* 特定の箇所だけ、このフォントを適用したい時は、このクラスを使う */
.shippori-mincho-regular {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

/* スペーサー ちょっと間隔を空けたい時やbrタグの代用として使用 */
.spacer {
	width:100px;
	height:30px;
}

/* スペーサー（その2）ページ末尾で使用 */
.spacer2 {
	width:100px;
	height:100px;
}



/* ----------- */
/* 見出しのCSS */
/* ----------- */
/* 一番目立たせたい見出しは、これを使う */
.first_heading {
	position: relative;
	color: #fcfcfc;
	font-size:3.5rem;
	-webkit-box-reflect: below -10px -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .5));
	margin-bottom:50px;
}

.kage {
	text-shadow: #fff 2px 0, #fff -2px 0, #fff 0 -2px, #fff 0 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px, rgba(0, 0, 0, .5) 3px 3px 3px;
	font-size:1.8rem;
	padding:1em;
}

/* 2025 08 01 追加した見出し */
.box12 {
	width:90vw;
	height:auto;
	margin:0 auto;
	margin-bottom:5vh;
	padding: 4em 1em 0.5em;
	position: relative;
	border: solid 3px #333333;
	background-color:#fcfcfc;
}
.box12 .box-title {
    background: #00bfff;
    font-size: 24px;
    border-radius: 0 0 150px 0;
    font-weight: normal;
    color: #fcfcfc;
    padding: 5px 25px 5px 10px;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
}


/* ----------------------- */
/* フレックスボックスのCSS */
/* ----------------------- */

/* フレックスボックス（左配置用） */
.flex-box-left {
	display:flex;
	flex-wrap: wrap;
//	flex-shrink: 1;
	flex: 1;
	justify-content: left;
	gap: 5px;
}
.flex-box-left img {
	display:block;
}
.flex-box-left p {
	text-align:center;
}

/* ボックスを2つ配置（中央配置用） */
/* 使用している箇所一覧 */
/* construction02.htm 聚楽壁（じゅらくへき）の写真配置用 */
.flex-box-center {
	display:flex;
	flex-wrap: no-wrap;
//	flex-shrink: 1;
	flex: 1;
	justify-content: center;
	margin:0 auto;
	padding-left:30px;
	padding-right:30px;
	gap: 30px;
}
.flex-box-center img {
	display:block;
}
.flex-box-center p {
	text-align:center;
}

.flex-box-center-wrap {
	display:flex;
	flex-wrap: wrap;
//	flex-shrink: 1;
	flex: 1;
	justify-content: center;
	margin:0 auto;
	padding-left:30px;
	padding-right:30px;
	gap: 30px;
}
.flex-box-center-wrap img {
	display:block;
}
.flex-box-center-wrap p {
	text-align:center;
}


/* 2025 09 11 追加　要素を左右の端に割り振るタイプのフレックスボックス */
.flex-box-lr {
	display:flex;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: no-wrap;
	width:100vw;
	height:auto;
	background: linear-gradient(to right, #ff0000, #fcfcfc);
	padding-left:3vw;
	padding-right:3vw;
	padding-top:2vh;
	padding-bottom:2vh;
	background-color: #ff0000;
}


/* -------------------- */
/* フローティングバナー */
/* -------------------- */
/* 2025 09 12 トップページに戻るための家のアイコンのみ表示中 */
.flex_box_footer {
	display:flex;
	flex-shrink: 0;
	flex-direction: column;
	position:fixed;
	left:18px;
	bottom:18px;
//	gap:30px;
	z-index:3;
}


/* トップページのメニュー関連 */
/* 2025 09 12 赤のグラデーションに変えてみる。単色では味気ない */
/* なるべく、周囲の色になじませたい */
/* このページ下部の箇所（メディアクエリ）でグラデーションのパターンを変える */
.mega-menu-wrapper {
//  background-color: var(--primary-color);
//	background: linear-gradient(to bottom, #e81e2e, #e0ffff);
	color: #fcfcfc;
}

/* 2025 09 11 レスポンシブ対応を検討 */
.mega-menu-list {
  display: flex;
  justify-content: center;
  list-style: none;
	margin: 0;
	padding: 0;
}

.mega-menu-item {
  position: relative;
}

.mega-menu-link {
  display: block;
  padding: 1rem 1.5rem;
  color: #333333;
  text-decoration: none;
  transition: background-color 0.3s;
}

.mega-menu-link:hover,
.mega-menu-link:focus {
  background-color: var(--secondary-color);
}

.mega-menu-item .menu-toggle {
  display: none;
}

.mega-menu-submenu {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width:auto;
  background-color: #fff;
  color: var(--primary-color);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  top: 100%;
  z-index: 100;
  pointer-events: none;
}

/* PC: ホバーで表示 */
@media (hover: hover) and (pointer: fine) {
  .mega-menu-item:hover > .mega-menu-submenu {
    display: block;
    pointer-events: auto;
  }
  
  .mega-menu-item:hover .menu-toggle + .mega-menu-link {
    background-color: var(--secondary-color);
  }
}

.submenu-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* 中央寄せから均等配置に変更 */
  gap: 1rem;
}

.submenu-column {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 150px;
}

.submenu-column li a {
  display: block;
  padding: 0.5rem 0;
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s;
}

.submenu-column li a:hover {
  color: var(--accent-color);
}

/* レスポンシブ対応 */
/* スマホ表示時 */
@media (max-width: 768px) {
	.mega-menu-wrapper {
		background: linear-gradient(to right, #e81e2e, #fcfcfc);
	}
	.mega-menu-list {
		flex-direction: column;
		align-items: center;
	}
	.mega-menu-item {
		width: 100%;
		text-align: center;
		border-bottom: 1px solid #444;
	}
	.mega-menu-link {
		padding: 1rem;
	}
	.menu-toggle:checked ~ .mega-menu-submenu {
		max-height: 500px;
		display: block;
		pointer-events: auto;
	}
	.mega-menu-submenu {
	position: static;
	transform: none;
	width: 100%;
	box-shadow: none;
	padding: 0;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.5s ease-out;
	}
	.submenu-inner {
		flex-direction: column;
		padding: 1rem;
	}
	/* 亀裂の入った壁の画像サイズは、PCとスマホでサイズを変える */
	.crack-pics {
		width:100%;
		height:auto;
	}
}

/* PC表示用 */
@media (min-width: 769px) {
	.mega-menu-wrapper {
		background: linear-gradient(to bottom, #e81e2e, #e0ffff);
	}
	/* 亀裂の入った壁の画像サイズは、PCとスマホでサイズを変える */
	.crack-pics {
		width:40%;
		height:auto;
	}
}