:root {
    --line-green: #06C755;
    --line-green-dark: #05A044;
    --text-black: #111111;
    --text-gray: #444444;
    --bg-color: #F8F9FA;
    --card-bg: #FFFFFF;
    --border-color: #DDDDDD;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
body { background-color: var(--bg-color); color: var(--text-black); line-height: 1.8; font-size: 18px; /* 大きめ文字 */ }
a { text-decoration: none; color: inherit; }

/* 1. Header Navigation */
header { background: var(--card-bg); border-bottom: 2px solid var(--border-color); position: sticky; top: 0; z-index: 1000; padding: 15px 0; }
.header-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
.logo-box { font-size: 26px; font-weight: bold; color: var(--line-green); display: flex; align-items: center; gap: 10px; }
.logo-box span { color: var(--text-black); font-size: 18px; border-left: 2px solid #ccc; padding-left: 10px; }
.nav-links { display: flex; gap: 20px; }
.nav-links a { font-size: 18px; font-weight: bold; padding: 10px 15px; border-radius: 8px; transition: background 0.3s; }
.nav-links a:hover { background: #E8F8F0; color: var(--line-green-dark); }

/* 2. Main Visual Slider */
.hero-wrapper { max-width: 1100px; margin: 40px auto; padding: 0 20px; }
.hero-card { background: var(--card-bg); border-radius: 20px; padding: 50px; display: flex; align-items: center; gap: 40px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); border: 1px solid var(--border-color); }
.hero-text { flex: 1; }
.hero-text h2 { font-size: 36px; margin-bottom: 20px; line-height: 1.4; color: var(--text-black); }
.hero-text p { font-size: 20px; color: var(--text-gray); margin-bottom: 35px; }
.btn-large { display: inline-block; background: var(--line-green); color: #fff; font-size: 24px; font-weight: bold; padding: 20px 50px; border-radius: 50px; text-align: center; box-shadow: 0 6px 12px rgba(6, 199, 85, 0.3); transition: 0.3s; }
.btn-large:hover { background: var(--line-green-dark); transform: translateY(-2px); }
.hero-img { flex: 1; border-radius: 15px; overflow: hidden; }
.hero-img img { width: 100%; display: block; border-radius: 15px; }

/* 3. Category Navigation */
.section-container { max-width: 1100px; margin: 60px auto; padding: 0 20px; }
.section-title { font-size: 30px; text-align: center; margin-bottom: 40px; font-weight: bold; color: var(--text-black); border-bottom: 4px solid var(--line-green); display: inline-block; padding-bottom: 5px; left: 50%; position: relative; transform: translateX(-50%); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; }
.cat-box { background: var(--card-bg); border: 2px solid var(--border-color); padding: 30px; border-radius: 15px; text-align: center; transition: 0.3s; }
.cat-box:hover { border-color: var(--line-green); background: #FCFFFD; transform: scale(1.02); }
.cat-box h3 { font-size: 22px; color: var(--line-green-dark); margin-bottom: 15px; }
.cat-box p { font-size: 18px; color: var(--text-gray); }

/* 4. Announcement Area */
.notice-board { background: var(--card-bg); border-radius: 15px; padding: 40px; border: 2px solid #E0E0E0; max-width: 900px; margin: 0 auto 60px; }
.notice-item { display: flex; align-items: flex-start; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--border-color); }
.notice-item:last-child { border-bottom: none; padding-bottom: 0; }
.notice-date { font-size: 18px; color: var(--text-gray); min-width: 120px; font-weight: bold; }
.notice-tag { background: #FF3366; color: #fff; padding: 5px 12px; border-radius: 5px; font-size: 16px; font-weight: bold; }
.notice-text { font-size: 20px; color: var(--text-black); }
.notice-text:hover { color: var(--line-green-dark); text-decoration: underline; }

/* 5. Features / Columns Area */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.feature-card { background: var(--card-bg); border-radius: 15px; border: 2px solid var(--border-color); overflow: hidden; display: flex; flex-direction: column; }
.feature-img { height: 220px; background: #eee; }
.feature-img img { width: 100%; height: 100%; object-fit: cover; }
.feature-body { padding: 30px; }
.feature-body h4 { font-size: 24px; margin-bottom: 15px; color: var(--text-black); }
.feature-body p { font-size: 18px; color: var(--text-gray); }

/* 6. Help Center & 7. Official Account */
.bottom-guides { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 60px; }
.guide-box { flex: 1; min-width: 350px; background: var(--card-bg); border: 2px solid var(--line-green); border-radius: 15px; padding: 40px; text-align: center; }
.guide-box h3 { font-size: 26px; color: var(--line-green-dark); margin-bottom: 20px; }
.guide-box p { font-size: 18px; color: var(--text-gray); margin-bottom: 30px; }
.btn-outline { display: inline-block; border: 2px solid var(--line-green); color: var(--line-green-dark); padding: 15px 30px; border-radius: 50px; font-size: 20px; font-weight: bold; transition: 0.3s; }
.btn-outline:hover { background: var(--line-green); color: #fff; }
.sns-row { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.sns-pill { background: #EEE; color: #333; padding: 12px 24px; border-radius: 30px; font-size: 18px; font-weight: bold; }

/* 8. Footer */
footer { background: #333333; color: #FFFFFF; padding: 60px 20px 30px; margin-top: 60px; }
.footer-wrapper { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; }
.foot-col h4 { font-size: 20px; margin-bottom: 25px; border-bottom: 2px solid #555; padding-bottom: 10px; color: #ccc; }
.foot-col ul { list-style: none; }
.foot-col ul li { margin-bottom: 15px; }
.foot-col ul li a { color: #fff; font-size: 18px; transition: color 0.3s; }
.foot-col ul li a:hover { color: var(--line-green); text-decoration: underline; }
.footer-copy { text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid #555; font-size: 16px; color: #aaa; }

img{height:auto}
.wrap,.news,.cols,.two,footer{content-visibility:auto;contain-intrinsic-size:auto 520px}