/* --- 変数設定 --- */
:root {
    --deep-green: #0b210b;   /* 苔色（ベース） */
    --mid-green: #1a3d1a;    /* 常盤色（アクセント） */
    --light-green: #78ab78;  /* 若竹色（ハイライト） */
    --paper-white: #fdfaf2;  /* 和紙色 */
}

/* --- 全体 --- */
body {
    margin: 0;
    font-family: 'Noto Serif JP', serif;
    background-color: var(--paper-white);
    color: #333;
    line-height: 2;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

.footer-copy {
    font-size: 11px;
    letter-spacing: 0.08em;
}

h1, h2 { margin: 0; font-weight: 700; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; }

h3 { margin: 0; font-weight: 400; line-height: 1.8; font-size: 0.95rem; color: #555; }

/* --- ナビゲーション（PC基準） --- */
.global-nav {
    position: fixed; top: 0; left: 0; width: 100%;
    padding: 30px 0; z-index: 100;
    background: rgba(253, 250, 242, 0.9);
    border-bottom: 1px solid rgba(11, 33, 11, 0.1);
}
.global-nav ul.menu {
    display: flex; justify-content: center; list-style: none; margin: 0; padding: 0;
}
.global-nav li { margin: 0 25px; }
.global-nav a {
    font-family: 'Montserrat', sans-serif; font-size: 13px; letter-spacing: 0.2em;
    font-weight: 600; color: var(--deep-green);
}
.global-nav a:hover { color: var(--light-green); }
.menu-btn, .menu-icon { display: none; }

/* --- セクション共通 --- */
.section { padding: 100px 0; box-sizing: border-box; }
.wa-title { font-size: 2.2rem; margin-bottom: 20px; position: relative; color: var(--deep-green); }
.wa-title.center { text-align: center; }

/* --- 1. コンセプトエリア --- */
.about-area { position: relative; }
.about-area .container { position: relative; min-height: 540px; }
.about-flex { display: flex; align-items: center; position: relative; width: 100%; }
.about-image-box { width: 60%; height: 500px; background: var(--mid-green); box-shadow: 40px 40px 0 rgba(120, 171, 120, 0.2); }
.about-image-box img { width: auto; height: 100%; object-fit: cover; object-position: center top; margin:0 15%;}
.about-text-box {
    width: 50%; padding: 60px; background: #fff;
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    border: 1px solid #eee; box-sizing: border-box; box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.concept-desc { font-size: 0.95rem; color: #555; margin-top: 20px; }

/* --- 2. サービスエリア --- */
.service-area { position: relative; background-color: var(--paper-white); }
.service-list {
    list-style: none; padding: 0; margin: 40px auto 0;
    display: flex; flex-wrap: wrap; gap: 30px; width: 100%; box-sizing: border-box;
}
.service-list li {
    flex: 1; min-width: 320px; background: #fff; padding: 35px;
    border-bottom: 5px solid #78ab78; box-shadow: 0 4px 10px rgba(0,0,0,0.05); box-sizing: border-box;
    display: flex; flex-direction: column;
}
.service-img-wrap { width: 100%; height: 240px; margin-bottom: 20px; overflow: hidden; }
.service-list img { width: 100%; height: 100%; object-fit: cover; }
.service-list h2 { font-size: 1.4rem; color: var(--deep-green); margin-bottom: 15px; font-weight: 700; }
.more-link { margin-top: auto; padding-top: 20px; font-weight: 700; color: var(--mid-green); }

/* 💡 書道教室・インバウンド体験専用のモダンなリストUI */
.service-sub-list {
    list-style: none; padding: 0; margin: 40px auto 0;
    display: flex; flex-direction: column; gap: 15px; width: 100%; box-sizing: border-box;
}
.service-sub-list li {
    background: #fff; border: 1px solid #eee; box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    border-radius: 4px; transition: 0.3s; width: 100%; box-sizing: border-box;
}
.service-sub-list a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 22px 30px; font-weight: 700; color: var(--deep-green); box-sizing: border-box; width: 100%;
}
.service-sub-list .sub-title { font-size: 1.1rem; }
.service-sub-list .sub-arrow { font-size: 0.95rem; color: var(--light-green); transition: 0.3s; }
.service-sub-list li:hover { background: var(--mid-green); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); border-color: var(--mid-green); }
.service-sub-list li:hover a { color: #fff; }
.service-sub-list li:hover .sub-arrow { color: #fff; }

/* --- 3. プロフィールエリア --- */
.profile-area { position: relative; background-color: var(--paper-white); }
.profile-flex { display: flex; align-items: center; justify-content: space-between; gap: 8%; }
.profile-image-box { width: 46%; height: 550px; background: var(--mid-green); box-shadow: 20px 20px 0 rgba(120, 171, 120, 0.2); overflow: hidden; }
.profile-image-box img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.profile-text-box { width: 46%; padding: 20px 0; box-sizing: border-box; }
.profile-text-box h2 { font-size: 1.5rem; color: var(--deep-green); line-height: 1.6; }
.btn-text { display: inline-block; color: var(--mid-green); font-weight: 700; margin-top: 15px; }
.btn-text:hover { color: var(--light-green); }

/* --- 4. 実績エリア --- */
.works-area { position: relative; }
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.work-card { background: #fff; padding: 30px; border-bottom: 4px solid var(--mid-green); transition: 0.4s; }
.work-card:hover { transform: translateY(-10px); background: var(--mid-green); color: #fff; }
.card-num { font-family: 'Montserrat', sans-serif; font-size: 30px; margin-bottom: 10px; }
.card-num:hover { transform: translateY(-10px); background: var(--mid-green); color: #fff; }
.card-title { font-weight: bold; }

/* --- フッター --- */
footer { text-align: center; padding: 60px; background: var(--deep-green); color: #fff; font-size: 14px; line-height: 2.2; }
footer span { display: inline-block; margin-bottom: 5px; opacity: 0.9; }

/* --- トップ（ヒーロー） --- */
.hero { background: var(--deep-green); color: #fff; position: relative; padding-top: 60px; min-height: 80vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-inner { position: relative; width: 100%; height: 680px; display: flex; flex-direction: column; max-width:1250px; }
.hero-inner img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; z-index: 1; opacity: 0.6; }
.hero-content { position: relative; z-index: 2; max-width: 720px; margin: 0 ; padding: 160px 20px; text-align: center; box-sizing: border-box; }
.hero-sub { font-size: clamp(14px, 2.5vw, 18px); letter-spacing: 0.1em; margin: 10px 0; }
.hero-catch { font-size: clamp(30px, 6vw, 55px); line-height: 1.4; margin: 20px 0; font-weight: 700; letter-spacing: 0.05em; }
.btn-primary { display: inline-block; background-color: var(--light-green); color: var(--deep-green); padding: 12px 35px; font-weight: 600; border-radius: 4px; margin-top: 20px; transition: 0.3s; }
.btn-primary:hover { background-color: #fff; transform: translateY(-2px); }


/* ==========================================
   ▼ レスポンシブ対応（タブレット・スマホ統合）
========================================== */
@media (max-width: 960px) {
    .container { padding: 0 20px; }
    .section { padding: 60px 0; }
    
    /* Concept */
    .about-area .container { min-height: auto !important; }
    .about-flex { flex-direction: column; align-items: stretch; }
    .about-image-box { width: 100%; height: 300px; box-shadow: 20px 20px 0 rgba(120, 171, 120, 0.2); }
    .about-text-box { width: 100%; position: static !important; transform: none !important; padding: 30px 0 0; margin-top: 20px; box-shadow: none; border: none; background: transparent; }
    .about-image-box img {margin:0 30%;}

    /* Services (カード) */
    .service-list { flex-direction: column; margin-top: 20px; }
    .service-list li { width: 100%; min-width: 0; padding: 25px; }
    .service-img-wrap { height: 200px; }
    
    /* Services (下部テキストリンク) */
    .service-sub-list { margin-top: 20px; }
    .service-sub-list a { padding: 18px 20px; }
    .service-sub-list .sub-title { font-size: 1rem; }
    .service-sub-list .sub-arrow { font-size: 0.85rem; }
    
    /* Profile */
    .profile-flex { flex-direction: column; align-items: stretch; gap: 30px; }
    .profile-image-box { width: 100%; height: 400px; box-shadow: 15px 15px 0 rgba(120, 171, 120, 0.2); }
    .profile-text-box { width: 100%; padding: 0; }

    /* Works */
    .works-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* スマートフォン専用（768px以下） */
@media (max-width: 768px) {
    .global-nav { padding: 15px 20px; height: 50px; box-sizing: border-box;}
    .global-nav .menu {
        display: flex; position: fixed; top: 0; right: -100%;
        width: 75%; height: 100vh; background: rgba(253, 250, 242, 0.98);
        padding: 100px 40px; box-sizing: border-box;
        transition: all 0.4s ease; z-index: 99;
        box-shadow: -5px 0 20px rgba(0,0,0,0.1);
        flex-direction: column; justify-content: flex-start;
    }
	.global-nav ul.menu {
	    display: flex; justify-content: normal; list-style: none; margin: 0; padding-top: 60px;
	}
    .global-nav li { margin:20px 25px; text-align:left; }
    .global-nav a { font-size: 16px; display: block;border-bottom: 1px solid var(--light-green); }
    .menu-icon { display: block; position: absolute; top: 10px; right: 20px; cursor: pointer; padding: 15px; z-index: 100; }
    .menu-icon .navicon { background: var(--deep-green); display: block; height: 2px; position: relative; width: 24px; transition: background 0.2s ease-out; }
    .menu-icon .navicon:before, .menu-icon .navicon:after { background: var(--deep-green); content: ''; display: block; height: 100%; position: absolute; width: 100%; transition: all 0.2s ease-out; }
    .menu-icon .navicon:before { top: 7px; }
    .menu-icon .navicon:after { top: -7px; }
    .menu-btn:checked ~ .menu { right: 0; }
    .menu-btn:checked ~ .menu-icon .navicon { background: transparent; }
    .menu-btn:checked ~ .menu-icon .navicon:before { transform: rotate(-45deg); top: 0; }
    .menu-btn:checked ~ .menu-icon .navicon:after { transform: rotate(45deg); top: 0; }
}

/* 極小スマホ（576px以下） */
@media (max-width: 576px) {
    .wa-title { font-size: 1.5rem; }
    .works-grid { grid-template-columns: 1fr; }
    .service-sub-list a { flex-direction: column; align-items: flex-start; gap: 5px; }

    .about-image-box img {margin:0 20%;}

}