@media (max-width: 840px) {
	p {
		font-size: 1rem;
	}
	.pc{
		display: none; /* PCを隠して */
	}
	.sp{
		  display: block; /* SPを改行する */
	}
/* ============================================
	2. レイアウト & 共通クラス
============================================ */
	.lp-container {
		max-width: 100%;
	}

	.section-padding {
		padding: 80px 0;
	}
	/* 見出しのデザイン */
	.section-title {
		font-size: 2rem;
	}

	.section-title--small {
		font-size: 1.2rem;
	}

	/* オレンジボタン */
	.btn-orange,
	.cta__btn-orange {
		padding: 15px 25px;
	}

/* ============================================
   3. header
============================================ */
	.header {
		padding: 3px 0;
	}
	.header__inner {
		width: 100%;
		justify-content: space-around;
		padding: 0 20px;
	}

	.header__logo { 
		margin: 2% 0;
	}

	.header__logo img { 
		height: 45px; 
		margin: 10px 0;
	}
/* ハンバーガーボタンの見た目 */
	.hamburger {
        display: block !important; /* 強制的に表示 */
        position: relative;
        width: 30px;
        height: 30px;
        border: none;
        background: transparent;
        cursor: pointer;
        z-index: 200; /* メニューより上 */
        padding: 0;   /* 余計な余白を消す */
		margin-top: 5px;
        margin-left: auto; /* ロゴとの距離を保ち右端へ */
    }

    /* 三本線の共通設定 */
    .hamburger span {
        display: block;
        position: absolute;
        right: 10px;
        width: 100%;
        height: 2px;
        background-color: var(--color-main); /* 線の色 */
        transition: all 0.3s ease;
    }

    /* 線の位置を固定pxで指定（崩れ防止） */
    .hamburger span:nth-child(1) { top: 0; }
    .hamburger span:nth-child(2) { top: 11px; }
    .hamburger span:nth-child(3) { top: 22px; }
	
	/* --- アニメーション（is-activeがついた時） --- */
    .hamburger.is-active span:nth-child(1) {
        transform: translateY(11px) rotate(45deg) !important;
    }
    .hamburger.is-active span:nth-child(2) {
        opacity: 0!important;
    }
    .hamburger.is-active span:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg)!important;
    }

    /* ナビゲーションを全画面メニューにする */
    .header__nav {
        position: fixed;
        top: 10%;
        right: -100%; /* 最初は画面の右側に隠しておく */
        width: 100%;
        height: 50vh;
        background: rgba(255, 255, 255, 0.9);
        transition: all 0.4s;
        z-index: 150;
    }

    /* メニューが開いた時の状態 */
    .header__nav.is-active {
        right: 0; /* 画面内にスライドイン */
    }

    .header__nav ul {
        flex-direction: column; /* 縦並びにする */
        justify-content: center;
        align-items: center;
        height: 100%;
        gap: 40px; /* メニュー間の余白を広げる */
		padding-right: 8%;
    }

    .header__nav a {
        font-size: 1.2rem;
    }

    /* ボタンが押された時の三本線の動き（×印にする） */
    .hamburger.is-active span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
    .hamburger.is-active span:nth-child(2) { opacity: 0; }
    .hamburger.is-active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

	/* 背景カバーの基本設定 */
	.nav-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(224, 232, 232, 0.6); /* 背景を40%の黒にする */
		z-index: 140;                /* メニュー(150)のすぐ下 */
		opacity: 0;                  /* 最初は見えない */
		visibility: hidden;          /* クリックもできない状態 */
		transition: all 0.4s;        /* ふわっと表示させる */
	}

	/* メニューが開いた時（is-activeが付いた時） */
	.nav-overlay.is-active {
		opacity: 1;
		visibility: visible;
	}
	

/* ============================================
   4. TOP hero 
============================================ */
	.hero {
		width: 98%;
		margin: 80px auto 50px;
		padding: 25px 0 0;
	}

	.hero__catch-main {
		font-size: 1.4rem;
		margin: 2%;
		line-height: 1.6;
		top: 3%;
	}

	.catch_text {
		font-size: 2rem;
	}

	.hero__catch-sub {
		font-size: 1.1rem;
		margin: 2%;
		bottom: 10%;
	}

/* ============================================
   5. About
============================================ */
	.concept {
		background: url(/wp-content/themes/lightning/lp/images/about_bg-sp3.png) center / cover no-repeat;
		line-height: 1.6;
		margin: 50px auto;
	}

	.concept__text-box {
		margin: 0 auto;
	}

	.concept-title {
		font-size: 1.6rem;
		font-weight: 800;
		color: var(--color-text);
	}

	.concept-title span {
		font-size: 2rem;
	}

	.concept__desc {
		width: 80%;
		margin: 0 auto;
		padding: 20px 0; 
		font-size: 1.1rem;
		font: 500;
		text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff,0px 1px 0 #fff,  0px -1px 0 #fff, 1px  0px 0 #fff, -1px  0px 0 #fff;
	}

/* ============================================
   6. Thanks cards
============================================ */
	.culture-container {
		display: inline-block;
		margin: 0 auto;
		text-align: center;
		padding: 0;
	}

	.culture__intro {
		width: 80%;
		margin: 0 auto;	
		padding-bottom: 30px;
	}
	
	.culture__intro p {
		text-align: left;
	}

	.culture-title {
		font-size: 2rem;
		text-align: center;
		font-weight: 800;
	}

	.culture__board-wrapper {
		margin: 0 auto;
		width:100%;
	}
	.culture__board {
		width: 86%;
		margin: 0 auto;
		padding-top: 20px;
	}
	/* ガヤ（手書き風文字） */
	.gaya-text {
		padding: 5px 10px;
		transform: rotate(-5deg);
		z-index: 10;
	}
	.pos-left { 
		top: 5px; left: -5px; 
	}

/* ============================================
  7. 雇用情報
============================================ */
	.welfare__chart {
		margin: 50px auto 80px;
	}
	.zoom-img {
		/* 長押し時のシステムメニュー（コピーや保存）を無効化 */
		-webkit-touch-callout: none; 
		
		transition: transform 0.3s ease;
	}

	.zoom-img:active {
		transform: scale(1.2); /* スマホなら1.2倍くらいが自然 */
	}

	.overlay-illust {
		display: none;
	}

/* ============================================
   8. 求人カード（横スクロール）
============================================ */
	.s-icon img {
		width: 25%;
	}
	
/* ============================================
  9. Q&A（LINE風チャット）
============================================ */
	.chat-container {
		max-width: 90%;
	}
	.chat-icon img {
		width: 60px;
		height: 60px;
	}
	
	/* 左側（質問者） */
	.chat-left .chat-icon { margin-right: 10px; }
	.chat-left .chat-bubble { border-radius: 15px 15px 15px 0; }

	/* 右側（クマ/回答者） */
	.chat-right { flex-direction: row-reverse; }
	.chat-right .chat-icon { margin-left: 10px; }
	.chat-right .chat-bubble {
		background: #D1F2EB; /* 薄いエメラルドグリーン */
		border-radius: 15px 15px 0 15px;
}

/* ============================================
   10. アニメーション（プルンと動くボタン）
============================================ */
	.cta__button-area {
		margin: 50px auto 0;
	}
	.cta__btn-orange a {
		text-align: center;
		font-size: 1rem;
	}
	.cta__bear {
		height: 40px;
}

/* ============================================
   11. フローティングボタン
============================================ */
	.floating-btn {
		bottom: 20px;
		right: 10px;
	}
	.floating-btn a {
		padding: 10px 20px;
		font-size: 1ewm;
		text-align: center;
	}
}
/* 841px以上の時はボタンを隠す */
@media (min-width: 841px) {
    .hamburger { display: none; }
}

@media (max-width: 748px) {

}