/*****エリア***/
* {
	box-sizing: border-box;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
}

.area-list{
	display: flex;
	justify-content: space-around;
	flex-direction: column;/* PCデフォルトを縦並びにする */
	gap: 20px;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 100px;
	padding-left: 20px;
}

/* list をコンテナとして使用 */
.list {
	background-color: white;
	color: black;
	padding-top: 10px;
	padding-right: 30px;
	padding-bottom: 10px;
	padding-left: 10px;/* 内側の余白 */
    /* flexやwidthの設定は親要素のレイアウトに合わせて調整 */
	border-top-left-radius: 8px 8px;
	border-top-right-radius: 8px 8px;
	border-bottom-right-radius: 8px 8px;
	border-bottom-left-radius: 8px 8px;/* 角丸をシンプルに */
	border-width: 0px;
	border-style: solid;
	border-color: gray;
	letter-spacing: 2px;
	margin-right: auto;
	margin-left: auto;
	width: 100%;/* 親要素の幅いっぱい */

    /* 都市名リストの複数列表示のための設定 */
	columns: 200px 3;
	column-gap: 30px;
	text-align: left;
}

.child-box3{
    background-color: blue;
    font-size: 18px;
    color: white;
    /* line-heightを調整してテキストが見えるように */
    line-height: 1.5; 
    padding-left: 20px;
    width: 100%;
    /* リストタイトルが列をまたがないようにする */
    break-inside: avoid-column;
}

/* 追加: ulとliのスタイル調整 */
.list ul {
    list-style-type: none;
    margin-bottom: 20px;
    break-inside: avoid-column;
}

.list li {
    padding: 3px 0;
}

/* --- スマートフォン表示時の設定 (メディアクエリ) --- */
@media (max-width: 768px) {
  /* セレクタのスペースを修正 */
  .list {
    /* SP時には1列にする */
    columns: 1; 
    width: 100%; /* ボックスの幅を親要素いっぱいに広げる */
  }
  
  .child-box3 { /* このクラスは元のHTMLになかったですが、定義は修正 */
    background-color: #0080ff;
    font-size: 18px;
    color: white;
    line-height: 30px;
    padding-left: 8px;
}
}

/*************ヘッダー*****************/
body{
    margin: 0;
    padding-top: 80px; /* ヘッダーの高さ分、コンテンツ全体を下にずらす */
    font-family: sans-serif;
}

.fixed-header{
	position: fixed;/* ここで要素を固定 */
	top: 0px;/* 画面の上端に配置 */
	left: 0px;
	width: 100%;/* 幅を画面いっぱいに */
	background-color: #ffffff;
	color: black;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	box-sizing: border-box;/* paddingを含めた幅計算 */
	z-index: 1000;/* 他の要素より前面に表示 */
	height: 90px;/* ヘッダーの高さ */
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
}

.fixed-header nav a{
    color: white;
    text-decoration: none;
    margin-left: 20px;
}

.content{
    padding: 20px;
    /* スクロールを発生させるための十分な高さ */
}
/* スマートフォン表示時のスタイル: 画面幅768px以下の場合に適用 */
@media screen and (max-width: 768px) {
    .fixed-header{
     height: 100px; /* スマホでの新しい高さ（例: 60px） */
    }
    }
/*************サービス*************/
  /* --- PC・デフォルト設定（横並び） --- */
.services {
  display: flex;         /* 子要素をFlexboxアイテムにする */
  justify-content: space-around; /* ボックス間に均等な余白を配置 */
  gap: 20px;             /* ボックス間の隙間 */
  padding: 20px;
}

.box {
	background-color: white;/* サンプル用の背景色 */
	color: black;/* 文字色 */
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;/* 内側の余白 */
	flex: 1;/* 利用可能なスペースを均等に割り当てる */
	border-top-left-radius: 8px 8px;
	border-top-right-radius: 8px 8px;
	border-bottom-right-radius: 8px 8px;
	border-bottom-left-radius: 8px 8px;/* 角丸 */
	display: flex;/* Flexboxコンテナとして動作させる */
	flex-direction: column;/* 子要素（テキストなど）を縦方向に並べる */
	justify-content: flex-start;/* コンテンツを上端に揃える */
	border-width: 1px;
	border-style: none;/* 見栄えのために余白を追加 */
}

/* --- スマートフォン表示時の設定 (メディアクエリ) --- */
@media (max-width: 768px) {
  .services {
    flex-direction: column; /* SP時には子要素を縦方向に並べる */
    gap: 10px;              /* SP用の隙間調整 */
  }

  .box {
    width: auto;            /* ボックスの幅を親要素いっぱいに広げる */
  }

/* --- PC・デフォルト設定（横並び） --- */
.services {
  display: flex;
  justify-content: center; /* 中央寄せに変更すると見栄えが良くなります */
  gap: 20px;
  padding: 20px;
  }
}
/**************ながく******************/	
.image-container {
  display: flex;
  /* デフォルトで縦方向に並べる (上から下へ) */
  flex-direction: column;
  gap: 10px; /* 画像間の隙間 */
}

.image-item img {
  width: auto; /* 画像の幅を親要素に合わせる */
  height: auto;
}

/* PC表示（例として画面幅が768px以上の場合）のスタイル */
@media (min-width: 768px) {
  .image-container {
    /* PC表示では横方向に並べる */
    flex-direction: row; 
    /* 画像を均等に配置 */
    justify-content: space-around; 
  }

  .image-item {
    /* PC表示での各画像の幅を調整（例: 3分割） */
    width: 30%; 
  }
}
/****************会社概要**********************/
.box4 {
	background-color: #ffffff;
	color: black;
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;/* width: 1200px; を削除 */
	max-width: 1200px;/* ここを最大幅に変更する */
	width: 100%;/* 画面幅に合わせて伸縮するようにする */
	box-sizing: border-box;/* paddingを含めて幅を計算する */
	border-top-left-radius: 8px 8px;
	border-top-right-radius: 8px 8px;
	border-bottom-right-radius: 8px 8px;
	border-bottom-left-radius: 8px 8px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	border-width: 1px;
	border-style: none;
	list-style-position: outside;
	list-style-type: upper-alpha;
	margin-left: auto;
	margin-right: auto;
}

/* スマートフォン表示時の設定 (メディアクエリ) はこのままでOK */
@media (max-width: 768px) {
  /* ... */
  .box4 {
	width: 100%; /* autoから100%に変更するとより確実 */
    /* max-width: 100%; も追加するとより安全です */
    max-width: 100%;
	margin-left: auto;
	margin-right: auto;
  }
}
/*****************Q＆A***********************/
.faq-container {
  display: flex;         /* 子要素をFlexboxアイテムにする */
  justify-content: space-around; /* ボックス間に均等な余白を配置 */
  flex-direction: column;    /* ★PCデフォルトを縦並びにする */
  gap: 20px;             /* ボックス間の隙間 */
  padding: 20px;
}

.box2 {
	background-color: #ececec;/* サンプル用の背景色 */
	color: black;/* 文字色 */
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 15px;/* 内側の余白 */
	flex: 1;/* 利用可能なスペースを均等に割り当てる */
	border-top-left-radius: 8px 8px;
	border-top-right-radius: 8px 8px;
	border-bottom-right-radius: 8px 8px;
	border-bottom-left-radius: 8px 8px;/* 角丸 */
	display: flex;/* Flexboxコンテナとして動作させる */
	flex-direction: column;/* 子要素（テキストなど）を縦方向に並べる */
	justify-content: flex-start;/* コンテンツを上端に揃える */
	border-width: 1px;
	border-style: none;/* 見栄えのために余白を追加 */
	width: auto;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.child-box{
	background-color: #0080ff;
	font-size: 22px;
	color: white;
	line-height: 40px;
	padding-left: 20px;
	padding-top: 0px;
	padding-bottom: 0px;
}
/* --- スマートフォン表示時の設定 (メディアクエリ) --- */
@media (max-width: 768px) {
  .faq-container {
    flex-direction: column; /* SP時には子要素を縦方向に並べる */
    gap: 10px;              /* SP用の隙間調整 */
  }

  .box2 {
    width: auto;            /* ボックスの幅を親要素いっぱいに広げる */
  }
  	.child-box{
	
	background-color: #0080ff;
	
	font-size: 18px;
	
	color: white;
	
	line-height: 30px;
	
	padding-left: 8px;
	
}
}
/****************施工事例***************************/
.case-study-card {
	display: flex;
	flex-wrap: wrap;/* スマホ表示時に折り返す */
	align-items: flex-start;/* 垂直方向中央揃え */
	margin-bottom: 10px;/* 各項目の下余白 */
	margin-left: auto;
	margin-right: auto;
	background-position: center top;
	max-width: 1400px;/* PCでの最大幅を1400pxに設定 */
	color: white;
}

.content {
  flex: 1; /* 親要素の幅に合わせて伸縮 */
  padding: 15px;
  box-sizing: border-box;
}

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

/* 偶数番目の項目（または特定のクラスを持つ項目）の順序を反転 */
.case-study-card.reverse {
  flex-direction: row-reverse;
}

/* スマートフォン表示時の調整 */
@media (max-width: 768px) {
  .case-study-card, .case-study-card.reverse {
    flex-direction: column; /* 縦方向に並べる */
  }
}
/*******************ながく**********************/
 /* --- PC・デフォルト設定（横並び） --- */
.promise {
  display: flex;         /* 子要素をFlexboxアイテムにする */
  justify-content: space-around; /* ボックス間に均等な余白を配置 */
  gap: 20px;             /* ボックス間の隙間 */
  padding: 20px;
}

.box {
	background-color: white;/* サンプル用の背景色 */
	color: black;/* 文字色 */
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;/* 内側の余白 */
	flex: 1;/* 利用可能なスペースを均等に割り当てる */
	border-top-left-radius: 8px 8px;
	border-top-right-radius: 8px 8px;
	border-bottom-right-radius: 8px 8px;
	border-bottom-left-radius: 8px 8px;/* 角丸 */
	display: flex;/* Flexboxコンテナとして動作させる */
	flex-direction: column;/* 子要素（テキストなど）を縦方向に並べる */
	justify-content: flex-start;/* コンテンツを上端に揃える */
	border-width: 1px;
	border-style: none;/* 見栄えのために余白を追加 */
}

/* --- スマートフォン表示時の設定 (メディアクエリ) --- */
@media (max-width: 768px) {
  .promise {
    flex-direction: column; /* SP時には子要素を縦方向に並べる */
    gap: 10px;              /* SP用の隙間調整 */
  }

  .box {
    width: auto;            /* ボックスの幅を親要素いっぱいに広げる */
  }

/* --- PC・デフォルト設定（横並び） --- */
.promise {
  display: flex;
  justify-content: center; /* 中央寄せに変更すると見栄えが良くなります */
  gap: 20px;
  padding: 20px;
  }
}
/********************ヘッダー画像横並び**************************/
 .i-container {
  display: flex; /* 子要素を横並びにする */
  gap: 10px;     /* 画像間の余白を設定 (任意) */
  justify-content: center; /* 中央揃え (任意) */
}

.i-container img {
  width: auto; /* 画像の幅を調整 */
  height: auto;
}
}
/*********************ｓｐ電話***************************/
body {
    margin: 0;
    padding-bottom: 0; /* PCデフォルトでは余白なし */
    font-family: sans-serif;
}

header {
    background-color: #f4f4f4;
    padding: 10px;
    text-align: center;
}

main {
    padding: 20px;
}

/* ------------------------------------------- */
/* デフォルト（PC表示時）のスタイル */
/* ------------------------------------------- */
.mobile-fixed-banners {
    /* PCではバナーを完全に非表示にする */
    display: none; 
}


/* ------------------------------------------- */
/* ここからスマホ専用のスタイル (画面幅768px以下) */
/* ------------------------------------------- */
@media (max-width: 768px) {
    
    /* bodyの下部にバナーの高さ分の余白を追加（コンテンツが隠れないように） */
    /* 画像の高さが120pxなら、padding-bottomも120pxにする */
    body {
        padding-bottom: 50px; 
    }
    
    /* バナーコンテナを表示状態に戻し、画面下に固定する */
    .mobile-fixed-banners {
        display: flex;     /* Flexboxで子要素を横並びにする */
        position: fixed;   /* 画面に固定 */
        bottom: 0;         /* 画面下部に配置 */
        left: 0;           /* 画面左端に配置 */
        width: 100%;       /* 画面幅いっぱいに広げる */
        height: auto;      /* コンテナ自体の高さ */
        z-index: 100;      /* 他の要素より前面に表示 */
        background-color: white;#FFFFF
    }

    /* 個々のバナーアイテム（リンク）のスタイル */
    	.banner-item {
	
	display: block;
	
	width: 50%;/* 2つなので幅を50%ずつにする */
	
	height: 100%;/* 親要素の高さに合わせる */
        /* 境界線が必要なら border-right: 1px solid #fff; などを追加 */
	
	background-color: white;#FFFFF
	
}

    /* 画像自体のスタイル */
    .banner-item img {
        width: 100;    /* 親要素 (banner-item) の幅いっぱいに広げる */
        height: auto;   /* 親要素の高さに合わせる */
        /* 画像のアスペクト比を維持しつつ、コンテナにきっちり収める */
        object-fit: cover; 
        display: block;
    }
}