/* --- 基本設定 --- */

html {
    /* ヘッダーの高さ（約80px）分だけ、ジャンプ位置を上にずらします */
    scroll-padding-top: 80px; 
    /* リンクをクリックした時に「スルーッ」と滑らかに移動させます */
    scroll-behavior: smooth;
}

/* 念のため section の指定も整理 */
section {
	padding: 80px 0;
    background-color: rgba(255, 255, 255, 0.95); /* 95%の不透明度の白 */
    margin: 40px auto;              /* 上下に隙間を作り、背景の模様を見せる */
    width: 95%;                     /* 横にも少し隙間を作る */
    max-width: 1100px;
    border-radius: 15px;            /* 角を丸くして柔らかい印象に */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* 背景から浮き上がらせる影 */
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.8;
    color: #333;
    margin: 0;
    padding: 0;
    background-image: url('nanmo.jpg');
	background-repeat: repeat;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

#menu-btn-check { display: none; }

/* --- ヘッダー --- */
header {
    background-color: #fff;
    border-bottom: 3px solid #4CAF50;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

/* ヘッダーロゴ：文字と高さを合わせ、横に並べる */
.header-logo {
    height: 45px; /* お好みの大きさに調整してください */
    width: auto;
    margin-right: 12px; /* ロゴと文字の間の隙間 */
}

header h1 {
    display: flex;
    align-items: center; /* 画像と文字の上下中心を揃える */
    margin: 0;
    font-size: 1.5rem;
}

/* --- スライドショーの設定 --- */

/* 1. 外枠：はみ出た画像を隠し、高さを固定 */
#hero {
    height: 400px;
    position: relative;
    overflow: hidden; /* 横にはみ出した画像を隠す */
    margin-top: 20px;
    background-color: transparent;   /* スライド自体に背景があるのでここは透明でOK */
    box-shadow: none;               /* スライドには影をつけない */
}

/* 2. スライダー本体：4枚分の横幅（400%）を確保して横に並べる */
.slider-wrapper {
    display: flex;
    width: 400%; /* 4枚分（100% × 4） */
    height: 100%;
    animation: slide-banner 20s infinite; /* 20秒で一周 */
}

/* 3. 各スライドの共通設定（透過率0.7の白フィルター付き） */
.slide {
    width: 100%; /* 親要素(400%)に対しての1/4サイズ */
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* 各画像と透過フィルターの設定 */
.slide1 { background-image: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), url('banner1.jpg'); }
.slide2 { background-image: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), url('banner2.jpg'); }
.slide3 { background-image: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), url('banner3.jpg'); }

/* 4. スライドアニメーション：左にずらしていく動き */
@keyframes slide-banner {
    0%   { transform: translateX(0); }             /* 1枚目表示 */
    25%  { transform: translateX(0); }
    30%  { transform: translateX(-25%); }         /* 2枚目へ移動 */
    55%  { transform: translateX(-25%); }
    60%  { transform: translateX(-50%); }         /* 3枚目へ移動 */
    85%  { transform: translateX(-50%); }
    90%  { transform: translateX(-75%); }         /* 4枚目（1枚目と同じ）へ移動 */
    100% { transform: translateX(-75%); }
}

/* 5. コンテンツ：画像の上に浮かせて中央配置 */
.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;
    z-index: 10; /* 画像より上に表示 */
}

/* 前回の文字の読みやすさ設定も維持 */
.hero-content h2 {
    font-size: 2.2rem;
    color: #1b5e20;
    font-weight: 800;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8);
}

.hero-content h2 {
    font-size: 2.2rem; /* 少し大きく */
    color: #1b5e20;    /* より濃い緑色にしてコントラストを上げる */
    margin: 0 0 10px 0;
    font-weight: 800;  /* 太字を強調 */
    /* 文字に薄い白い影をつけて、背景から浮かび上がらせます */
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8); 
}

.hero-content p {
    font-size: 1.1rem;
    color: #333;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}


/* --- 空室情報（強調デザイン） --- */
.vacancy-info {
    background-color: #fff3e0; /* 薄いオレンジ背景 */
    border: 2px orange solid;  /* オレンジの太枠 */
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    margin-top: 20px;
}

.vacancy-info strong {
    font-size: 1.2rem;
    color: #e65100; /* 濃いオレンジ色 */
    display: block; /* 改行させて目立たせる */
    margin-bottom: 10px;
}

/* フッターロゴ：縮小して配置 */
.footer-logo {
    height: 35px; /* ヘッダーより少し小さめに設定 */
    width: auto;
    margin-bottom: 15px;
    transition: opacity 0.3s;
}

.footer-logo:hover {
    opacity: 0.7; /* ホバー時に少し薄くして「押せる」ことを表現 */
}

/* --- フッターの調整 --- */
footer {
    background-color: #fff;
    color: #333;
    text-align: center;
    padding: 40px 20px;
    margin-top: 40px;
    border-top: 5px solid #4CAF50;
}


/* --- セクション・カード設定 --- */
section { padding: 60px 0; }
.section-title { text-align: center; margin-bottom: 40px; position: relative; padding-bottom: 10px; }
.section-title::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background-color: #4CAF50; }
.bg-light { background-color: #f9f9f9; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.card { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border-top: 4px solid #4CAF50; }

/* --- PC用表示 (769px以上) --- */
@media (min-width: 769px) {
    .menu-btn { display: none; }
    .menu-content ul {
        list-style: none; /* ドットを消す */
        display: flex;    /* 横並びにする */
        margin: 0; padding: 0;
    }
    .menu-content li { margin-left: 20px; }
    .menu-content a { text-decoration: none; color: #333; font-weight: bold; font-size: 0.95rem; }
}

/* --- スマホ用表示 (768px以下) --- */
@media (max-width: 768px) {
	/* ここから追加：ヘッダーのロゴと文字を2行にする設定 */
    .header-inner {
        padding: 5px 0; /* 上下の余白を詰める */
    }

    header h1 {
        flex-direction: column;   /* ロゴと文字を上下に並べる */
        align-items: flex-start;  /* 左寄せに揃える */
        font-size: 1.2rem;        /* 文字サイズをスマホ向けに調整 */
    }

    .header-logo {
        margin-right: 0;        /* 横の余白を消す */
        margin-bottom: 5px;     /* ロゴと文字の間に少し隙間を作る */
        height: 35px;           /* ロゴを少し小さくして収まりを良くする */
    }
    .menu-btn { display: flex; height: 50px; width: 50px; justify-content: center; align-items: center; cursor: pointer; z-index: 120; }
    .menu-btn span, .menu-btn span:before, .menu-btn span:after { content: ''; display: block; height: 3px; width: 25px; border-radius: 3px; background-color: #333; position: absolute; transition: all 0.3s; }
    .menu-btn span:before { bottom: 8px; }
    .menu-btn span:after { top: 8px; }

    .menu-content {
        width: 100%; max-height: 0;
        position: absolute; top: 100%; left: 0;
        z-index: 110; background-color: #fff;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
    }

    .menu-content ul { display: block; list-style: none; padding: 0; margin: 0; border-top: 1px solid #eee; }
    .menu-content li { border-bottom: 1px solid #eee; }
    .menu-content li a { display: block; padding: 15px 20px 15px 45px; text-decoration: none; color: #333; font-weight: bold; position: relative; }
    
    /* スマホ時のみ箇条書きドットを表示 */
    .menu-content li a::before {
        content: ""; width: 8px; height: 8px; background-color: #4CAF50; border-radius: 50%;
        position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
    }

    #menu-btn-check:checked ~ .menu-content { max-height: 400px; box-shadow: 0 5px 10px rgba(0,0,0,0.1); }
    #menu-btn-check:checked ~ .menu-btn span { background-color: transparent; }
    #menu-btn-check:checked ~ .menu-btn span:before { bottom: 0; transform: rotate(45deg); }
    #menu-btn-check:checked ~ .menu-btn span:after { top: 0; transform: rotate(-45deg); }