@charset "utf-8";
/* CSS Document */
@media (min-width: 769px) {
/* 特徴セクション全体 */
.feature-section {
    width: 100%;
    background-color: #d4ecea; /* 画像の背景色 */
    padding: 0px 0 5%; /* 上下の余白 */
    color: #594e47; /* 画像を参考にしたテキスト色 */
	margin: 7% auto 0%; 
}

/* コンテンツ全体を囲むラッパー（PCでは80%幅） */
.content-wrapper {
    width: 80%;
    margin: 0 auto; /* 水平方向中央寄せ */
    display: flex;
    align-items: stretch; /* 子要素の高さを親要素いっぱいに伸ばす */
}

/* 左側：画像エリア */
.feature-image {
    flex-basis: 42%; /* PCでの幅を35%に指定 */
    height: auto;
}

/* 右側：テキストエリア */
.feature-description {
    flex-basis: 65%; /* PCでの幅を65%に指定 */
    box-sizing: border-box; /* paddingを幅の内側で計算する */
    padding: 20px 5%; /* テキストエリア内の余白 */

    /* 説明文を下に固定するための設定 */
    display: flex;
    flex-direction: column;
	text-align: left
}

.title-block {
    /* この要素が余白を全て埋めることで、次の要素を下に押しやる */
    flex-grow: 1; padding: 11vw 0% 0 0; 
}

.description-block {
    /* この要素は常に下部に配置される */padding: 0 0% 0 0;  margin: 0;
}

/* テキストのスタイル */
.feature-description h2 {
    margin: 0;
    font-weight: normal;
}

.feature-description .sub-title {
    display: block;
    margin-top: 0.5em;
}

.feature-description .main-text {
    font-size: 1rem;
    line-height: 1.8;
    margin-top: 1.5em; /* 上の要素との間隔 */
}
.pfont7 {font-size: clamp(1.3rem, 2.6vw, 2.9rem); color:#604e40;line-height: 100%;padding: 0px 0% 0% 0%;letter-spacing: 4px;text-align: left}
.pfont8 {font-size: clamp(1.1rem, 1.3vw, 1.3rem); color:#604e40;line-height: 100%;padding: 0% 0% 0% 0%;text-align: left;font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;font-weight: 700}
.pfont3 {font-size: clamp(0.8rem, 1.8vw, 2rem); color:#604e40;line-height: 150%;padding: 0px 0% 0% 0%;letter-spacing: 4px;text-align: left}
}


/* ===============================================
   スマートフォン表示のスタイル (画面幅が768px以下)
   =============================================== */
@media (max-width: 768px) {
	.feature-section {
    width: 100%;
    background-color: #d4ecea; /* 画像の背景色 */
    padding: 0px 0 5%; /* 上下の余白 */
    color: #594e47; /* 画像を参考にしたテキスト色 */
	margin: 7% auto 0%; 
}

/* コンテンツ全体を囲むラッパー（PCでは80%幅） */
.content-wrapper {
    width: 80%;
    margin: 0 auto; /* 水平方向中央寄せ */
    display: flex;
    align-items: stretch; /* 子要素の高さを親要素いっぱいに伸ばす */
}

/* 左側：画像エリア */
.feature-image {
    flex-basis: 42%; /* PCでの幅を35%に指定 */
    height: auto;
}

/* 右側：テキストエリア */
.feature-description {
    flex-basis: 65%; /* PCでの幅を65%に指定 */
    box-sizing: border-box; /* paddingを幅の内側で計算する */
    padding: 20px 5%; /* テキストエリア内の余白 */

    /* 説明文を下に固定するための設定 */
    display: flex;
    flex-direction: column;
	text-align: left
}

.title-block {
    /* この要素が余白を全て埋めることで、次の要素を下に押しやる */
    flex-grow: 1; padding: 3vw 0% 3vw 0; 
}

.description-block {
    /* この要素は常に下部に配置される */padding: 0 0% 0 0;  margin: 0;
}

/* テキストのスタイル */
.feature-description h2 {
    margin: 0;
    font-weight: normal;
}

.feature-description .sub-title {
    display: block;
    margin-top: 0.5em;
}

.feature-description .main-text {
    font-size: 1rem;
    line-height: 1.8;
    margin-top: 1.5em; /* 上の要素との間隔 */
}
	

    .content-wrapper {
        width: 100%; /* スマホでは幅を100%に */
        flex-direction: column; /* 要素を縦積みに変更 */
    }

    /* 画像エリア（上部に表示される） */
    .feature-image {
        width: 100%;
        min-height: 300px; /* スマホ用に高さを調整 */
    }

    /* テキストエリア（下部に表示される） */
    .feature-description {
        width: 100%;
        padding: 40px 20px; /* スマホ用に余白を調整 */
    }

    .title-block {
        flex-grow: 0; /* 縦積みなので余白を埋める必要はない */
    }
    
    .feature-description h2 {
        font-size: 2rem; /* スマホ用に文字サイズを調整 */
    }
	.pfont7 {font-size: clamp(1.3rem, 2.6vw, 2.9rem); color:#604e40;line-height: 100%;padding: 0px 0% 0% 0%;letter-spacing: 4px;text-align: left}
.pfont8 {font-size: clamp(0.8rem, 0.8vw, 0.8rem); color:#604e40;line-height: 100%;padding: 0% 0% 0% 0%;text-align: left;font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}
	.quality3{width:100%;height:auto;margin:0% auto 0% auto;padding: 3% 0% 3% 0%;background:#d4ecea}
}
		
	
/* PCレイアウト (画面幅が769px以上の場合) */
@media (min-width: 769px) {
	/* ナビゲーションコンテナ */
.sub-nav ul {
    /* グリッドレイアウトを適用 */
    display: grid;
    /* ボタン間の余白 */
    gap: 25px;
    /* リストのデフォルトスタイルをリセット */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ボタンの共通スタイル */
.sub-nav a {
    display: flex; /* テキストの上下中央揃えのため */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px 5px;
    min-height: 40px; /* ボタンの高さを担保 */
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    /* 色の変化を滑らかにするアニメーション */
    transition: background-color 0.3s, color 0.3s;
}

/* 日本語テキストのスタイル */
.sub-nav a span {
    font-size: 12px;
    margin-top: 4px;
    font-weight: normal;
}

/* 通常時のボタンスタイル */
.sub-nav a {
    background-color: #c7c1bc; /* 通常時の背景色 */
    color: #5d5d5d; /* 通常時の文字色 */
}

/* ホバー時のボタンスタイル */
.sub-nav a:hover {
    background-color: #604e40; /* ホバー・選択時の背景色 */
    color: #ffffff; /* ホバー・選択時の文字色 */
}

/* 選択時のボタンスタイル */
.sub-nav a.active {
    background-color: #604e40; /* 選択時の背景色 */
    color: #ffffff; /* 選択時の文字色 */
}
	
.sub-nav a.active2 {
    background-color: #F1F1F1; /* 選択時の背景色 */
    color: #ffffff; /* 選択時の文字色 */
}
	
    .sub-nav ul {
        grid-template-columns: repeat(5, 1fr); /* 5列表示 */
    }
.sub-nav a.active {
    /* マウスイベント（クリックなど）を無効にする */
    pointer-events: none;
    /* カーソルを通常の矢印にする */
    cursor: default;
}
.sub-nav a.active2 {
    /* マウスイベント（クリックなど）を無効にする */
    pointer-events: none;
    /* カーソルを通常の矢印にする */
    cursor: default;
}

}

	
	

/* スマートフォンレイアウト (画面幅が768px以下の場合) */
@media (max-width: 768px) {

/* ナビゲーションコンテナ */
.sub-nav ul {
    /* グリッドレイアウトを適用 */
    display: grid;
    /* ボタン間の余白 */
    gap: 8px;
    /* リストのデフォルトスタイルをリセット */
    list-style: none;
    padding: 20px 5px;
    margin: 0;
}

/* ボタンの共通スタイル */
.sub-nav a {
    display: flex; /* テキストの上下中央揃えのため */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px 5px;
    min-height: 40px; /* ボタンの高さを担保 */
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    /* 色の変化を滑らかにするアニメーション */
    transition: background-color 0.3s, color 0.3s;
}

/* 日本語テキストのスタイル */
.sub-nav a span {
    font-size: 12px;
    margin-top: 4px;
    font-weight: normal;
}

/* 通常時のボタンスタイル */
.sub-nav a {
    background-color: #c7c1bc; /* 通常時の背景色 */
    color: #5d5d5d; /* 通常時の文字色 */
}

/* ホバー時のボタンスタイル */
.sub-nav a:hover {
    background-color: #604e40; /* ホバー・選択時の背景色 */
    color: #ffffff; /* ホバー・選択時の文字色 */
}

/* 選択時のボタンスタイル */
.sub-nav a.active {
    background-color: #604e40; /* 選択時の背景色 */
    color: #ffffff; /* 選択時の文字色 */
}
	
.sub-nav ul {
        grid-template-columns: repeat(3, 1fr); /* 3列表示 */
    }

    /* 10番目のリストアイテムを中央に配置 */
    .sub-nav li:nth-child(10) {
        grid-column: 2 / 3; /* 3列グリッドの2列目に配置 */
    }
.sub-nav a.active {
    /* マウスイベント（クリックなど）を無効にする */
    pointer-events: none;
    /* カーソルを通常の矢印にする */
    cursor: default;
}
.sub-nav a.active {
    /* マウスイベント（クリックなど）を無効にする */
    pointer-events: none;
    /* カーソルを通常の矢印にする */
    cursor: default;
}
	
.sub-nav a.active2 {
    background-color: #F1F1F1; /* 選択時の背景色 */
    color: #ffffff; /* 選択時の文字色 */
}
.sub-nav a.active2 {
    /* マウスイベント（クリックなど）を無効にする */
    pointer-events: none;
    /* カーソルを通常の矢印にする */
    cursor: default;
}

}