@charset "utf-8";

	
 /* --------------------------------
         * 基本設定
         * -------------------------------- */
        
    @media (min-width: 769px) {
        /* 全体を囲むコンテナ（ブラウザ幅100%） */
		.powder{width: 80%;padding: 3% 5% 3% 5%; margin: 3% auto 0;background-color: #fff}
        .container-full {
            width: 100%;background:#d4ecea;padding: 50px auto; margin: 0px auto;
        }

        /* コンテンツエリア（80%で中央寄せ） */
        .main-content {
            width: 80%;
            margin: 0px auto; /* 上下に余白、左右は自動で中央寄せ */
        }

        /* --------------------------------
         * グリッドレイアウト共通設定
         * -------------------------------- */
        .grid-row {
            display: flex;
            justify-content: space-between; /* 要素間の隙間を均等に配置 */
            padding-bottom: 3%; /* 各行の間の隙間 */
            align-items: stretch; /* 横並びのアイテムの高さを揃える */
        }

        .grid-item {
            background-color: #ffffff;
            display: flex; /* 子要素の配置のためにflexを指定 */
            overflow: hidden; /* 角丸などのため */
        }

        .grid-item img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        .text-content {
            padding: 15px 2%; /* 上下15px、左右2%の隙間 */
            flex-grow: 1; /* 残りのスペースを埋める */
        }

        .text-content .title {
            color: #008080; /* 緑系の色 */
            font-weight: bold;
            text-align: center;
            margin: 0 0 10px 0;
        }

        .text-content .description {
            text-align: left;
            margin: 0;
            font-size: 14px; /* ベースの文字サイズ */
            line-height: 1.6;
            /* 文字サイズをビューポート幅に応じて滑らかに変化させる */
            font-size: clamp(12px, 1.2vw, 14px);
        }

        /* --------------------------------
         * PC向けレイアウト (デスクトップファースト)
         * -------------------------------- */

        /* --- 上2段：4列レイアウト --- */
        .item-4-col {
            flex-basis: 22%; /* 幅22% */
            flex-direction: column; /* 画像とテキストを縦に並べる */
        }

        /* --- 下2段：2列レイアウト --- */
        .item-2-col {
            flex-basis: 48%; /* 幅48% */
            flex-direction: row; /* 画像とテキストを横に並べる */
        }

        .item-2-col .image-wrapper {
            flex-basis: 48%; /* 画像部分の幅を48%に */
            flex-shrink: 0; /* 縮まないようにする */
        }

        .item-2-col .image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* コンテナを埋めるように画像を調整 */
        }

        .item-2-col .text-content {
            flex-basis: 52%; /* テキスト部分の幅を52%に */
        }
       .toilet{ width: 100%;padding: 5% ;background-color: #fff}


}


        /* --------------------------------
         * スマホ向けレイアウト (幅768px以下)
         * -------------------------------- */
        @media (max-width: 768px) {
			.powder{width: 90%;padding: 7% 5% 7% 5%; margin: 0% auto 0%;background-color: #fff}
			        /* 全体を囲むコンテナ（ブラウザ幅100%） */
        .container-full {background:#d4ecea;
            width: 100%;
        }

        /* コンテンツエリア（80%で中央寄せ） */
        .main-content {
            width: 90%;
            margin: 0px auto; padding: 0% 0% 3% 0%;/* 上下に余白、左右は自動で中央寄せ */
        }

        /* --------------------------------
         * グリッドレイアウト共通設定
         * -------------------------------- */
        .grid-row {
            display: flex;
            justify-content: space-between; /* 要素間の隙間を均等に配置 */
            margin-bottom: 2%; /* 各行の間の隙間 */
            align-items: stretch; /* 横並びのアイテムの高さを揃える */
        }

        .grid-item {
            background-color: #ffffff;
            display: flex; /* 子要素の配置のためにflexを指定 */
            overflow: hidden; /* 角丸などのため */
        }

        .grid-item img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        .text-content {
            padding: 0px 2% 15px; /* 上下15px、左右2%の隙間 */
            flex-grow: 1; /* 残りのスペースを埋める */
        }

        .text-content .title {
            color: #008080; /* 緑系の色 */
            font-weight: bold;
            text-align: center;
            margin: 0 0 10px 0;
        }

        .text-content .description {
            text-align: left;
            margin: 0;
            font-size: 14px; /* ベースの文字サイズ */
            line-height: 1.6;
            /* 文字サイズをビューポート幅に応じて滑らかに変化させる */
            font-size: clamp(12px, 1.2vw, 14px);
        }

        /* --------------------------------
         * PC向けレイアウト (デスクトップファースト)
         * -------------------------------- */

        /* --- 上2段：4列レイアウト --- */
        .item-4-col {
            flex-basis: 22%; /* 幅22% */
            flex-direction: column; /* 画像とテキストを縦に並べる */
        }

        /* --- 下2段：2列レイアウト --- */
        .item-2-col {
            flex-basis: 48%; /* 幅48% */
            flex-direction: row; /* 画像とテキストを横に並べる */
        }

        .item-2-col .image-wrapper {
            flex-basis: 48%; /* 画像部分の幅を48%に */
            flex-shrink: 0; /* 縮まないようにする */
        }

        .item-2-col .image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* コンテナを埋めるように画像を調整 */
        }

        .item-2-col .text-content {
            flex-basis: 52%; /* テキスト部分の幅を52%に */
        }
			
			
            .main-content {
                width: 95%; /* スマホではコンテンツ幅を広げる */
            }

            .grid-row {
                flex-wrap: wrap; /* 要素を折り返す */
                justify-content: space-between;
            }

            /* 全てのアイテムを2列にする */
            .item-4-col,
            .item-2-col {
                flex-basis: 48%; /* 幅48%で2列に */
                margin-bottom: 15px;
            }

            /* 全てのアイテムを「上に写真、下にテキスト」の構成にする */
            .item-2-col {
                flex-direction: column;
            }

            .item-2-col .image-wrapper,
            .item-2-col .text-content {
                flex-basis: auto; /* 幅指定をリセット */
                width: 100%;
            }
        }