@charset "UTF-8";
html {
  scroll-behavior: smooth;
}

/* ============================================
	1. ベース設定 (Colors & Fonts)
============================================ */
:root {
	--color-main: #087a84;	  /* エメラルドグリーン */
	--color-main-light: #E8F8F5; /* 薄いグリーン（背景用） */
	--color-accent: #F39C12;	/* アプリコットオレンジ */
	--color-text: #333333;	  /* 文字色 */
	--color-bg-gray: #FAFAFA;   /* 薄いグレー */
	--font-base: "M PLUS Rounded 1c", sans-serif; /* 丸ゴシック */
}

body {
	font-family: var(--font-base);
	color: var(--color-text);
	line-height: 1.6;
	margin: 0;
	padding: 0;
	background-color: #fff;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

a {
	text-decoration: none;
	transition: 0.3s;
}

p {
	font-size: 1.2rem;
}
.pc{
	display: block; /* PCを改行する */
}
.sp{
	display: none; /* SPの改行を隠して */
}
/* ============================================
	2. レイアウト & 共通クラス
============================================ */
.lp-container {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 20px;
	position: relative;
}

.section-padding {
	padding: 100px 0;
}

.text-center { text-align: center; }
.bg-green-light { background-color: var(--color-main-light); }
.bg-gray { background-color: var(--color-bg-gray); }

/* 見出しのデザイン */
.section-title {
	font-size: 2.8rem;
	color: var(--color-main);
	text-align: center;
	margin-bottom: 40px;
	font-weight: 800;
}
.section-title span {
	border-bottom: 4px solid var(--color-accent);
	display: inline-block;
	line-height: 1.2;
}

.section-title--small {
	font-size: 1.5rem;
	color: var(--color-main);
	margin-bottom: 30px;
	font-weight: 800;
}

/* オレンジボタン */
.btn-orange,
.cta__btn-orange {
	display: inline-block;
	background-color: var(--color-accent);
	color: #fff;
	padding: 15px 40px;
	border-radius: 50px;
	font-weight: bold;
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.btn-orange:hover,
.cta__btn-orange:hover{
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(243, 156, 18, 0.4);
}

/* ============================================
   3. header
============================================ */
.header {
	background: #fff;
	padding: 5px 0;
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.header__inner {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
}

.header__logo img { height: 60px; }
.header__nav ul {
	display: flex;
	list-style: none;
	gap: 20px;
	margin: 0;
	padding: 0;
}

.header__nav a {
	color: var(--color-main);
	font-weight: bold;
}

.btn-nav {
	background: var(--color-main);
	color: #fff !important;
	padding: 8px 20px;
	border-radius: 20px;
}
/* style.css (PC側) */
.hamburger {
    display: none; /* 基本は非表示 */
}
/* ============================================
   4. TOP hero 
============================================ */
.hero {
	width: 90%;
	margin: 80px auto 50px;
	/*background: url('lp/images/rec-top01.png') center / contain no-repeat; */
	background-color: #ffffff; 
	padding: 80px 0 50px;
	text-align: center;
}

.hero picture {
	position: relative;
}

.hero__catch-main {
	font-size: 2.0rem;
	color: var(--color-main);
	text-shadow: 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff,0px 2px 0 #fff,  0px -2px 0 #fff, 2px  0px 0 #fff, -2px  0px 0 #fff;	 /* 縁取り */
	margin: 5% 5% 0;
	text-align: left;
	line-height: 1.6;
	position: absolute;
	top: 5%;
}

.catch_text {
	font-size: 3.5rem;
}

.hero__catch-sub {
	text-align: left;
	font-size: 1.6rem;
	font-weight: bold;
	text-shadow: 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff,0px 2px 0 #fff,  0px -2px 0 #fff, 2px  0px 0 #fff, -2px  0px 0 #fff;  /* 縁取り */
	margin: 5% 5% 0;
	position: absolute;
	bottom: 8%;
}

/*.hero-i {
	height: auto;
	position: absolute;
}
.hi01 {
	width: 7%;
	top: 20%;
	left: 5%;
}
.hi02 {
	width: 10%;
	top: 10%;
	right: 5%;
}
.hi03 {
	width: 10%;
	bottom: 10%;
	right: 5%;
}*/
/* ============================================
   5. About
============================================ */
.concept {
	background: url(/wp-content/themes/lightning/lp/images/about_bg0.png) center / cover no-repeat;
	line-height: 1.8;
}

.concept__text-box {
	margin: 100px auto;
	position: relative;
	text-align: center;
}

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

.concept-title span {
	color: var(--color-main);
	background: linear-gradient(transparent 50%, rgba(243, 156, 18, 0.5) 50%);
}

.concept__desc {
	padding: 30px 0 0;
}

/* ============================================
   6. Thanks cards
============================================ */

.culture-container {
	display: flex;
	justify-content: space-around;
	padding: 50px 0;
}

.culture__intro{
	width: 38%;
}

.culture-title {
	font-size: 2.8rem;
	color: #fff;
	margin: 0 auto;
	text-align: left;
	letter-spacing: 0.1rem;
	text-shadow: 2px 2px 0 #087a84, -2px 2px 0 #087a84, 2px -2px 0 #087a84, -2px -2px 0 #087a84,0px 2px 0 #087a84,  0px -2px 0 #087a84, 2px  0px 0 #087a84, -2px  0px 0 #087a84;  /* 縁取り */
	margin-bottom: 40px;
	font-weight: 800;
}

.culture__board-wrapper {
	margin: 0 auto;
	width:62%;
	position: relative;
}

.culture__board {
	width: 100%;
	box-shadow: 0 10px 20px rgba(0,0,0,0.1);
	transform: rotate(-1deg);/* ちょっと傾けて手作り感を出す */
}
/*.culture__board img {
	filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3)); /* filter: drop-shadow(右へのズレ 下へのズレ ぼかし具合 色); 
}*/

/* ガヤ（手書き風文字） */
.gaya-text {
	position: absolute;
	font-weight: bold;
	color: #555;
	font-family: cursive; /* 手書き風フォント（デバイスによる） */
	background: #FFEB3B; /* 蛍光ペン風マーカー */
	padding: 5px 10px;
	transform: rotate(-5deg);
	z-index: 10;
}
.pos-left { 
	top: -20px; left: -20px; 
}

/* ============================================
  7. 雇用情報
============================================ */
.welfare__chart {
	margin: 70px auto;
}

picture img {
	width: 100%;	/* 親要素の幅いっぱいに広げる */
	height: auto;   /* アスペクト比を維持する */
	display: block; /* 画像の下にできる謎の隙間を消す */
	filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3)); /* filter: drop-shadow(右へのズレ 下へのズレ ぼかし具合 色); */
	z-index: 20; /* 背景なので一番下に */
}

.main-image{
	position: relative; /* 子要素の基準点 */
    width: 100%;        /* 親要素の幅 */
    margin: 0 auto;     /* 中央寄せ */
    /* ここでheightを指定するか、背景画像をposition:absoluteで配置して調整 */
    padding-bottom: 7%; /* 例: 16:9のアスペクト比を維持（画像の高さ/幅 * 100%）*/
    overflow: hidden;   /* はみ出た子要素を隠す */
}

.overlay-illust {
    position: absolute; /* 親要素内での絶対配置 */
    z-index: 21;         /* 背景画像より手前に表示 */
    /* 各イラストのサイズ調整 */
    width: 15%; /* 親要素に対するパーセンテージ */
    height: auto;
}

/* 各イラストの位置を調整 */
.illust-a {
    top: 20%;
    right: -10%;
	transform: rotate(8deg);
}

.illust-b {
    top: 35%;
    left: -10%;
	transform: rotate(-8deg);
}

.illust-c {
    top: 52.5%;
    right: -9%;
}

.illust-d {
    top: 74.5%;
    left: -10%;
	width: 18%; /* 親要素に対するパーセンテージ */
}

/* ============================================
   8. 求人カード（横スクロール）
============================================ */
.recruit {
	background: url('images/bk_rec.png')  center / cover no-repeat;
}
.s-icon img {
	width: 15%;
	height: auto;
}
.recruit-scroll {
	display: flex;
	gap: 15px;
	overflow-x: auto; /* 横スクロールを許可 */
	padding: 20px 10px;
	scroll-snap-type: x mandatory; /* スクロールした時にピタッと止まる */
	margin-bottom: 100px;
}
/* スクロールバーを隠す（見た目を綺麗に） */
.recruit-scroll::-webkit-scrollbar { display: none; }

.job-card {
	min-width: 280px; /* カードの幅を固定 */
	max-width: 300px;
	background: #fff;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
	scroll-snap-align: center; /* 画面の中央で止まる */
}
.job-card__img img {
	width: 100%;
	height: 180px;
	object-fit: cover;
}
.job-card__body { padding: 12px; }
.tag-green {
	background: var(--color-main);
	color: #fff;
	font-size: 0.8rem;
	padding: 3px 10px;
	border-radius: 4px;
}
.job-card__title { font-size: 1.1rem; margin: 10px 0; color: var(--color-main); }
.job-card__salary { font-weight: bold; color: var(--color-accent); font-size: 1.1rem; }
.job-card__tags {
	list-style: none;
	padding: 0;
	display: flex;
	gap: 5px;
	margin: 10px 0;
}
.job-card__tags li {
	font-size: 0.8rem;
	background: #f0f0f0;
	padding: 3px 8px;
	border-radius: 10px;
}
.btn-orange-outline {
	display: block;
	text-align: center;
	border: 2px solid var(--color-accent);
	color: var(--color-accent);
	padding: 8px;
	border-radius: 20px;
	font-weight: bold;
}
.btn-orange-outline:hover {
	background: var(--color-accent);
	color: #fff;
}
.scroll-hint { text-align: center; font-size: 0.9rem; color: #888; display: none; }

/* スマホのみヒントを表示
@media (max-width: 767px) {
	.scroll-hint { display: block; margin-top: 10px; }
} */

/* ============================================
  9. Q&A（LINE風チャット）
============================================ */
.chat-container {
	max-width: 80%;
	margin: 0 auto;
}
.chat-row {
	display: flex;
	align-items: flex-end; /* 下揃え */
	margin-bottom: 20px;
}
.chat-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 1px solid #fff;
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.chat-icon img {
	width: 100%;
}
.chat-bubble {
	background: #fff;
	padding: 15px;
	border-radius: 15px;
	position: relative;
	max-width: 70%;
	font-size: 0.95rem;
	box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
/* 左側（質問者） */
.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 {
	background-color: var(--color-main-light); 
}
.btn-animate {
	display: flex;           /* Flexboxを有効化 */
    align-items: center;     /* 垂直方向（上下）の中央揃え */
    justify-content: center; /* 水平方向（左右）の中央揃え */
    text-decoration: none;   /* リンクの下線を消す */
    text-align: left;        /* テキスト内の改行を左寄せ（任意） */
	font-size: 1.2rem;
	animation: jelly 3s infinite;
}
@keyframes jelly {
	0%, 100% { transform: scale(1, 1); }
	5% { transform: scale(1.1, 0.9); }
	10% { transform: scale(0.9, 1.1); }
	15% { transform: scale(1.05, 0.95); }
	20% { transform: scale(1, 1); }
}
.cta__button-area {
	width: 80%;
	margin: 100px auto 0;
}
.cta__bear {
	width: auto;
	height: 50px;
	margin-right: 10px
}

.cta__btn-orange a {
	color: #fff;
}

/*.cta__btn-orange a:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 15px rgba(243, 156, 18, 0.4);
}*/

/* ============================================
   11. フローティングボタン
============================================ */
.floating-btn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 999;
}
.floating-btn a {
	display: block;
	background: var(--color-accent);
	color: #fff;
	padding: 15px 30px;
	border-radius: 50px;
	font-weight: bold;
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}