/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Feb 03 2026 | 15:21:09 */
/* 基本リセット */
:root{
  --ink:#1f2937;
  --muted:#6b7280;
  --bg:#ffffff;
  --soft:#f5f6f7;
  --sand:#f8f5f0;
  --wood:#6b452f;
  --color1:#f6ecd8;
  --color2:#f3f0f0;	
  --border:rgba(0,0,0,.08);
  --radius:18px;
  --max:1120px;
}
body, html {
    height: 100%;
	width: 100%;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/*--------------------*/
/* セクション５エリア */
/*--------------------*/
/* Column */
.top-section5{  
	background:var(--color1);
/*
	background-image: url('https://ban-home.com/wp-content/uploads/00top/bgimage/top-1920.jpg');
*/
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

	/* ② ワイド表示 & ③ スマホで高さ100%（PCも100%に設定） */
    width: 100%;
	height: auto;          /* 高さを固定しない */
    min-height: 100vh;     /* コンテンツが少なくても最低画面分は確保 */
    padding: 60px 20px;    /* 上下に余白を作り、はみ出しを防ぐ */
    box-sizing: border-box; /* パディングを高さに含める */
/*
	height: 100vh;         
*/
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #000000;
    text-align: center;
   }

/* スマホ表示時に背景画像を変更 */
@media (max-width: 768px) {
.top-section5 {
	background:var(--sand);
/*		  
    background-image: url('https://ban-home.com/wp-content/uploads/00top/bgimage/top_1200-1700.jpg');
*/
	/* スマホで画面いっぱいの高さ（100vh）を維持 */
    height: auto;        /* スマホでも固定を解除 */
    min-height: 100vh;
/*
	height: 100vh; 
*/
	}
}

/* 文字の大きさ */
.s5-title{
	font-size:3rem;
	margin: 10px;
}
.s5-title-sub{
	font-size:3rem;
	margin: 10px;	
}
.s5-lead{
	font-size:2rem;
}
 
.column-container {
  width: 100%;
  max-width: 1120px; /* rootで定義した --max に合わせる */
  margin: 0 auto;    /* 中央寄せ */
  padding: 0 20px;   /* 左右の余白 */
  box-sizing: border-box;
}

.column{
  background:var(--soft);
}
.column-grid{
  margin-top:32px;
  display:grid;
/*
  grid-template-columns:repeat(4,1fr);
*/
	gap:16px;
	width: 100%;
    max-width: var(--max); /* コンテンツが広がりすぎないよう制限 */
}
.column{
  background:#000000;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.column img{width:100%;height:200px;object-fit:cover;}
.column-body{
	padding:14px;
    color: #ffffff;
}
.column-body h3{margin:0 0 6px;}

.column_more{
	font-style:var(--ink);
}

        /* スマホ用：2列2行 */
        @media (max-width: 768px) {
            .column-grid {
                grid-template-columns:repeat(2,1fr);
				/*
                width: calc(50% - 10px); /* 隙間(gap)を考慮して横2枚に */
            }
        }

        /* PC用：横1行 */
        @media (min-width: 769px) {
            .column-grid {
				grid-template-columns:repeat(2,1fr);
				/*
                flex: 1; /* 横いっぱいに等間隔で並べる */
				min-width: 150px;
            }
        }