/* =============================
   基本リセット
============================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =============================
   全体のスタイル
============================= */
body {
    font-family: YakuHanMP_Noto, "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif;
    font-size: 16px;
    line-height: 1.6;
    padding-top: 60px; /* 固定ヘッダー対策 */
}


html {
    scroll-behavior: smooth;
}


section, .wrap, .wrap2 {
    scroll-margin-top: 90px; /* ヘッダーの高さ分を確保 */
}
/* =============================
   ヘッダー
============================= */
header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: black;
    padding: 15px 20px;
    color: white;
    z-index: 1000;
}

/* ナビゲーションメニュー */
.menu {
    display: flex;
    transition: opacity 0.5s ease, max-height 0.5s ease;
    opacity: 1;
}

.menu a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
}

.menu a:hover {
    background: #555;
}

/* ハンバーガーメニュー */
.hamburger {
    display: none;
    font-size: 24px;
    cursor: pointer;
}

main {
    margin: 0px;
    padding: 10px;
}

footer {
    margin: 0px;
    padding: 0px;
}

/* フッターのスタイル */
.footer-box {
    background-color: black;
    color: #FFF;
    text-align: center;
    padding: 10px 0;
    width: 100%;
    font-size: 14px;
    position: relative;
    margin-top: 20px;
    height: 100px;
}

.footer-box p {
    color: #FFF;
}

/* =============================
   wrapコンテナのスタイル
============================= */
.wrap {
    border: 1px solid #ccc; /* グレーの枠線 */
    border-radius: 5px;
    max-width: 1200px;
    margin: 10px auto 0;
    display: flex; /* 横に並べる */
    justify-content: space-between;
    gap: 20px; /* 列間の余白 */
    padding: 20px;
}

.wrap2 {
    border: 1px solid #ccc; /* グレーの枠線 */
    border-radius: 5px;
    max-width: 1200px;
    margin: 10px auto 0;
    display: flex; /* 横に並べる */
    justify-content: space-between;
    gap: 20px; /* 列間の余白 */
    padding: 2px;
	flex-direction: column;
}


.title-12 {
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 15px;
	text-align: center;
	width: 100%;
	background-color: #D6E2D8;
}




/* 各列を整える */
.column {
    display: flex;
    flex-direction: column; /* 縦に積み重ねる */
    width: 48%; /* 各列が横並びになるように幅を指定 */
}

.column2 {
  display: flex;
  align-items: center; /* 縦の中央揃え */
  gap: 20px; /* 画像と文章の間隔 */
}

.column3 {
    display: flex;
    flex-direction: column; /* 縦に積み重ねる */
    width: 100%; /* 各列が横並びになるように幅を指定 */
	margin:1px;
	text-align:center;
}



.half {
  flex: 1; /* 画像エリアの幅を調整 */
}



/* 見出しのスタイル */
.column h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
}

.column h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
}

.column h4 {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
}


/* 段落のスタイル */
.column p {
    font-size: 1rem;
    line-height: 1.8;
    text-align: justify;
}

/* 見出しのスタイル */
.column3 h2 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
}

.column3 h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
}

.column3 h4 {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
}


/* 段落のスタイル */
.column3 p {
    font-size: 1rem;
    line-height: 1.8;
    text-align: justify;
}


/* 各列内を上下に分ける */
.half {
    flex: 1; /* 各項目が均等に高さを持つ */
    margin-bottom: 20px; /* 各セクション間の余白 */
}

.half1 {
	flex: 1; /* 各項目が均等に高さを持つ */
	margin-bottom: 20px; /* 各セクション間の余白 */
	width: 85%;
	padding: 20px;
	 border-radius: 5px;
}



.half2 {
	flex: 1; /* 各項目が均等に高さを持つ */
	margin-bottom: 20px; /* 各セクション間の余白 */
	width: 70%;
	padding: 20px;
	background-color: #FFF;
	 border-radius: 5px;
}

.half3 {
	flex: 1; /* 各項目が均等に高さを持つ */
	margin:0 auto;
	width: 50%;
	padding: 20px;
	background-color: #FFF;
	 border-radius: 5px;
	 text-align:center;
}

.half3 p{
	text-align:center;
}



.half img {
    width: 90%;
	 border-radius: 5px;
}

.top {
    text-align: left;
}

.bottom {
    text-align: right;
}


.btn-view-more {
    display: inline-block;
    padding: 12px 30px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #000;
	border: 1px solid #000; /* 黒の枠線を追加 */
    background-color: #FFF; /* コーラルカラー（好みに変更可） */
    border-radius: 50px; /* 丸みを持たせる */
    text-decoration: none;
    transition: background 0.3s ease, transform 0.2s ease;
	white-space: nowrap; /* 改行を防ぐ */
    text-align: center;
}

/* ホバー時のスタイル */
.btn-view-more:hover {
    background-color: #000; /* 少し濃い色に変化 */
	color:#FFF;
    /*transform: scale(1.05);*/ /* 少し大きくする */
}

.btn-view-more::after{
	content: "";
    display: inline-block;
    margin-left: 1em;
    vertical-align: 1px;
    width: 7px;
    height: 7px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(-45deg);
}

/* ホバー時のスタイル */
.btn-view-more:hover::after {
    border-right: 2px solid #FFF; /* 矢印の色を白に */
    border-bottom: 2px solid #FFF; /* 矢印の色を白に */
}


/*Newsのカラム*/

.news-container{
	width: 98%;
	padding: 10px;
	margin: 0px;
	background-color: #FFF;
	flex-direction: column;
	overflow:hidden;
}


.news-box{
	padding:10px;
	margin:5px;
	width:30%;
	background-color:#EAEBE2;
	float:left;
	}

.news-box img{
	width:98%;
	 text-align: center;
	  margin: 10px auto 0;
}


.cont{
	width: 90%;
	padding: 10px;
	margin: 0px;
  flex: 1; /* 文章エリアの幅を調整 */
  text-align:center;
  
}

 .google-map{
	width: 100%;
	height: 200px;
	padding-bottom: 500px;
	position: relative;
	margin-top:10px;
	 
 }

/* PC用の設定 */
@media screen and (min-width: 768px) {
/* =============================
   ヘッダー画像（レスポンシブ対応）
============================= */
.hero {
    width: 100%;
    background-size: cover; /* 背景画像をカバー */
    background-position: center; /* 画像の中心を表示 */
    background-repeat: no-repeat; /* 繰り返しを防ぐ */
    height: 90vh; /* ビューポートの70%の高さ */
    min-height: 600px;
    background-image: url("../img/header-img05.jpg"); /* PC用画像 */
    }
	
	
	.hero-text {
    position: absolute; /* 絶対位置で配置 */
    top: 50%; /* 上から50%の位置に配置 */
    left: 50%; /* 左から50%の位置に配置 */
    transform: translate(-50%, -50%); /* 完全に中央にするために、位置を調整 */
    text-align: center; /* テキストを中央揃え */
    color: white; /* テキストの色（必要に応じて変更） */
    font-size: 2rem; /* フォントサイズ（必要に応じて調整） */
}

/* サブタイトルや説明文のスタイル */
.hero-text p {
    font-size: 1.2rem;
    margin-top: 10px;
}
}

/* =============================
   レスポンシブ対応
============================= */
@media (max-width: 768px) {
	
	
	
	.hero {
    width: 100%;
    background-size: cover; /* 背景画像をカバー */
    background-position: center; /* 画像の中心を表示 */
    background-repeat: no-repeat; /* 繰り返しを防ぐ */
    height: 60vh; /* ビューポートの70%の高さ */
    min-height: 600px;
    background-image: url("../img/sp-header-img05.jpg"); /* PC用画像 */
    }
	
	
    .menu {
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        background: rgba(51, 51, 51, 0.9);
        width: 100%;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
    }

    .menu.show {
        max-height: 400px;
        opacity: 1;
    }

    .hamburger {
        display: block;
    }

    .wrap {
        flex-direction: column; /* モバイルで縦に並べる */
        padding: 15px;
    }

    .column {
        width: 100%; /* モバイルでは全幅 */
    }

    .half {
        margin-bottom: 15px;
    }

    /* 見出しのスタイル */
    .column h2 {
        font-size: 2.2rem;
        font-weight: bold;
        margin-bottom: 15px;
        text-align: center;
    }
	
	.hero-text {
    position: absolute; /* 絶対位置で配置 */
    top: 33%; /* 上から50%の位置に配置 */
    left: 50%; /* 左から50%の位置に配置 */
    transform: translate(-50%, -50%); /* 完全に中央にするために、位置を調整 */
    text-align: center; /* テキストを中央揃え */
    color: white; /* テキストの色（必要に応じて変更） */
    font-size: 1.5rem; /* フォントサイズ（必要に応じて調整） */
	width: 80%; /* 横幅を広げる（80%の幅に設定） */
}

/* サブタイトルや説明文のスタイル */
.hero-text h3 {
    font-size: 1rem;
    margin-top: 10px;
}



.hero-text p {
    font-size: 1rem;
    margin-top: 10px;
}

.news-box{
	padding:10px;
	margin-top:10px;
	width:85vw;
	background-color:#EAEBE2;
	}



}