@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ============================================================
   岸イングリッシュメソッド トップページ専用CSS
   front-page.php で出力するHTML専用。他ページには影響しない
   （全ルールを にスコープ）
   ============================================================ */

/* ============================================================
   独自ヘッダー・フッター（フロントページ + 固定ページ共通）
   header.php / footer.php で出力。投稿ページには出力されない
   ============================================================ */

.kem-header {
	background: #FFFFFF;
	border-bottom: 1px solid #E7E2D8;
	position: sticky;
	top: 0;
	z-index: 100;
}
.kem-header-inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.kem-logo {
	font-weight: 700;
	font-size: 18px;
	color: #0B0B3D;
	letter-spacing: 0.02em;
}
.kem-nav {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	font-size: 14px;
	font-weight: 600;
}
.kem-nav a {
	color: #1A1A1A;
	white-space: nowrap;
}
.kem-nav a:hover { color: #DE993E; }
.kem-nav-contact {
	color: #555555 !important;
	font-weight: 500 !important;
}
.kem-nav-cta {
	background: #DE993E;
	color: #FFFFFF !important;
	padding: 10px 20px;
	border-radius: 999px;
	font-weight: 700;
}
.kem-nav-cta:hover { background: #B8791F; }

.kem-footer {
	background: #0B0B3D;
	color: #FFFFFF;
}
.kem-footer-inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: 48px 24px 32px;
	text-align: center;
}
.kem-footer-logo {
	font-weight: 700;
	font-size: 16px;
	margin: 0 0 20px;
}
.kem-footer-nav {
	display: flex;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
	font-size: 13px;
	margin-bottom: 24px;
}
.kem-footer-nav a { color: rgba(255,255,255,0.75); }
.kem-footer-nav a:hover { color: #DE993E; }
.kem-footer-copy {
	font-size: 12px;
	color: rgba(255,255,255,0.5);
	margin: 0;
}

@media (max-width: 700px) {
	.kem-header-inner { padding: 14px 20px; }
	.kem-nav { gap: 14px; font-size: 13px; }
	.kem-nav-cta { padding: 8px 14px; }
}

.kem {
	--kem-navy: #0B0B3D;
	--kem-navy-light: #1a1a5c;
	--kem-gold: #DE993E;
	--kem-gold-deep: #B8791F;
	--kem-cream: #FDFBF7;
	--kem-white: #FFFFFF;
	--kem-text: #1A1A1A;
	--kem-subtle: #555555;
	--kem-border: #E7E2D8;
	--kem-shadow: 0 12px 32px rgba(11, 11, 61, 0.08);
	--kem-shadow-soft: 0 8px 20px rgba(11, 11, 61, 0.05);
}

.kem {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	color: var(--kem-text);
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}

.kem *,
.kem *::before,
.kem *::after {
	box-sizing: border-box;
}

.kem img { display: block; max-width: 100%; height: auto; }
.kem a { text-decoration: none; color: inherit; }

/* ---------- レイアウト共通 ---------- */

/* はみ出しテクニックの誤差で横スクロールバーが出るのを防ぐ安全策 */
body:has(.kem) {
	overflow-x: hidden;
}

/* SWELLの本文エリア（幅が制限されたコンテナ）から画面幅いっぱいにはみ出させる */
.kem-section,
.kem-hero {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.kem-section {
	padding: clamp(56px, 9vw, 96px) 24px;
}
.kem-inner {
	max-width: 1200px;
	margin-inline: auto;
}
.kem-bg-cream { background: var(--kem-cream); }
.kem-bg-white { background: var(--kem-white); }
.kem-bg-navy { background: var(--kem-navy); color: var(--kem-white); }

.kem h2.kem-heading {
	font-size: clamp(24px, 3.4vw, 32px);
	font-weight: 700;
	color: var(--kem-navy);
	text-align: center;
	margin: 0 0 12px;
}
.kem-bg-navy h2.kem-heading { color: var(--kem-white); }

.kem-sub {
	text-align: center;
	color: var(--kem-subtle);
	font-size: 15px;
	margin: 0 0 40px;
}
.kem-bg-navy .kem-sub { color: rgba(255,255,255,0.75); }

/* ---------- フェードインアニメーション ---------- */

.kem-fade {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.kem-fade.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.kem-fade-1 { transition-delay: 0.05s; }
.kem-fade-2 { transition-delay: 0.15s; }
.kem-fade-3 { transition-delay: 0.25s; }
.kem-fade-4 { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
	.kem-fade { opacity: 1; transform: none; transition: none; }
}

/* ---------- ①ヒーロー ---------- */

.kem-hero {
	background: var(--kem-navy);
	padding: clamp(70px, 11vw, 120px) 24px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.kem-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 12% 20%, rgba(222,153,62,0.14), transparent 45%),
		radial-gradient(circle at 88% 80%, rgba(222,153,62,0.10), transparent 45%);
	pointer-events: none;
}
.kem-hero-inner {
	position: relative;
	max-width: 780px;
	margin-inline: auto;
}
.kem-badge {
	display: inline-block;
	background: var(--kem-gold);
	color: var(--kem-navy);
	font-weight: 700;
	font-size: 13px;
	padding: 8px 20px;
	border-radius: 999px;
	margin-bottom: 24px;
}
.kem-hero h1 {
	font-size: clamp(32px, 5.4vw, 46px);
	font-weight: 900;
	color: var(--kem-white);
	line-height: 1.4;
	margin: 0 0 22px;
}
.kem-hero p.kem-hero-sub {
	font-size: 16px;
	color: rgba(255,255,255,0.85);
	line-height: 1.8;
	margin: 0 0 34px;
}

/* ---------- ボタン共通 ---------- */

.kem-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--kem-gold);
	color: var(--kem-navy);
	font-weight: 700;
	font-size: 16px;
	padding: 16px 34px;
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(222,153,62,0.28);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.kem-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(222,153,62,0.36);
	background: #ecb15c;
}
.kem-btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	color: var(--kem-navy);
	font-weight: 700;
	font-size: 15px;
	padding: 14px 30px;
	border-radius: 999px;
	border: 1.5px solid var(--kem-navy);
	transition: background 0.2s ease, color 0.2s ease;
}
.kem-btn-outline:hover { background: var(--kem-navy); color: var(--kem-white); }

/* ---------- 共通：セクションの英語ラベル ---------- */

.kem-eyebrow-label {
	display: block;
	text-align: center;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.12em;
	color: var(--kem-gold-deep);
	margin: 0 0 10px;
}
.kem-bg-navy .kem-eyebrow-label { color: var(--kem-gold); }

/* ---------- ②CONCEPT ---------- */

.kem-concept-text {
	max-width: 720px;
	margin: 0 auto 40px;
	text-align: center;
	font-size: 15.5px;
	line-height: 1.9;
}
.kem-concept-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr;
	gap: 16px;
	align-items: stretch;
	max-width: 1080px;
	margin: 0 auto;
}
.kem-concept-op {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 900;
	color: var(--kem-gold);
}
.kem-concept-card {
	background: var(--kem-white);
	border: 1px solid var(--kem-border);
	border-radius: 20px;
	padding: 28px 24px;
	box-shadow: var(--kem-shadow-soft);
}
.kem-concept-tag {
	display: inline-block;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--kem-gold-deep);
	margin-bottom: 10px;
}
.kem-concept-card h3 {
	font-size: 16px;
	color: var(--kem-navy);
	margin: 0 0 16px;
	line-height: 1.5;
}
.kem-concept-card ul { margin: 0; padding-left: 18px; }
.kem-concept-card li { font-size: 13.5px; margin-bottom: 8px; line-height: 1.6; color: var(--kem-subtle); }
.kem-concept-result {
	background: var(--kem-navy);
	border-color: var(--kem-navy);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.kem-concept-result .kem-concept-tag { color: var(--kem-gold); }
.kem-concept-result h3 {
	color: var(--kem-white);
	font-size: 22px;
	font-weight: 900;
	margin: 0;
}

/* ---------- ③For Students（悩み提起） ---------- */

.kem-problem-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.kem-problem-card {
	background: var(--kem-cream);
	border-radius: 20px;
	padding: 30px 26px;
}
.kem-problem-num {
	display: inline-block;
	font-weight: 900;
	font-size: 22px;
	color: var(--kem-gold);
	margin-bottom: 12px;
}
.kem-problem-card h3 {
	font-size: 16.5px;
	color: var(--kem-navy);
	margin: 0 0 12px;
	line-height: 1.6;
}
.kem-problem-card p {
	font-size: 13.5px;
	color: var(--kem-subtle);
	line-height: 1.75;
	margin: 0 0 10px;
}
.kem-problem-card p:last-child { margin-bottom: 0; }

/* ---------- ④After ---------- */

.kem-after-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-bottom: 36px;
}
.kem-after-card {
	background: var(--kem-white);
	border: 1px solid var(--kem-border);
	border-radius: 20px;
	padding: 28px 24px;
	box-shadow: var(--kem-shadow-soft);
}
.kem-after-card h3 {
	font-size: 16.5px;
	color: var(--kem-navy);
	margin: 0 0 10px;
	line-height: 1.6;
}
.kem-after-card p {
	font-size: 13.5px;
	color: var(--kem-text);
	line-height: 1.75;
	margin: 0;
}
.kem-conclusion {
	text-align: center;
	font-weight: 700;
	color: var(--kem-gold-deep);
	font-size: 17px;
	margin: 0;
}

/* ---------- ⑤Curriculum ---------- */

.kem-series-card {
	background: var(--kem-cream);
	border-radius: 28px;
	padding: 40px clamp(24px, 4vw, 48px);
}
.kem-series-card > h3 {
	font-size: 20px;
	color: var(--kem-navy);
	margin: 0 0 14px;
}
.kem-series-card > p {
	font-size: 14.5px;
	color: var(--kem-text);
	line-height: 1.85;
	margin: 0 0 32px;
	max-width: 760px;
}
.kem-lesson-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}
.kem-lesson-card {
	background: var(--kem-white);
	border-radius: 20px;
	padding: 26px 24px;
	box-shadow: var(--kem-shadow-soft);
}
.kem-lesson-card-paid { border: 2px solid var(--kem-gold); }
.kem-lesson-eyebrow {
	display: inline-block;
	font-weight: 700;
	font-size: 12px;
	color: var(--kem-gold-deep);
	margin-bottom: 8px;
}
.kem-lesson-card h4 {
	font-size: 17px;
	color: var(--kem-navy);
	margin: 0 0 10px;
}
.kem-lesson-card p {
	font-size: 13.5px;
	color: var(--kem-subtle);
	line-height: 1.7;
	margin: 0 0 18px;
}
.kem-lesson-price {
	font-weight: 700;
	font-size: 20px;
	color: var(--kem-navy);
	margin-bottom: 18px;
}
.kem-lesson-price span { font-size: 12px; font-weight: 500; color: var(--kem-subtle); }
.kem-lesson-card .kem-btn,
.kem-lesson-card .kem-btn-outline {
	width: 100%;
	justify-content: center;
	padding: 14px 20px;
	font-size: 14px;
}

/* ---------- ⑥講師の想い ---------- */

.kem-instructor {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 48px;
	align-items: start;
}
.kem-instructor-photo {
	width: 100%;
	aspect-ratio: 3 / 3.6;
	border-radius: 24px;
	background: #DADADA;
	box-shadow: var(--kem-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 13px;
	text-align: center;
}
.kem-instructor h3.kem-name {
	font-size: 24px;
	color: var(--kem-navy);
	margin: 0 0 16px;
}
.kem-tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}
.kem-tag {
	display: inline-block;
	background: var(--kem-white);
	border: 1px solid var(--kem-border);
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--kem-navy);
}
.kem-instructor p { font-size: 14.5px; line-height: 1.85; margin: 0 0 16px; }
.kem-instructor .kem-highlight {
	font-weight: 700;
	color: var(--kem-gold-deep);
	margin-bottom: 24px;
}

/* ---------- ⑦Voice ---------- */

.kem-testimonial-note {
	text-align: center;
	color: var(--kem-gold-deep);
	font-size: 13.5px;
	margin-bottom: 32px;
}
.kem-voice-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
}
.kem-voice-card {
	background: var(--kem-cream);
	border-radius: 20px;
	padding: 30px 26px;
}
.kem-voice-card h3 {
	font-size: 17px;
	color: var(--kem-navy);
	margin: 0 0 14px;
}
.kem-voice-card p.kem-quote-text {
	font-size: 14px;
	color: var(--kem-text);
	line-height: 1.75;
	margin: 0 0 16px;
}
.kem-voice-person { font-size: 12.5px; color: var(--kem-subtle); }

/* ---------- ⑧FAQ ---------- */

.kem-faq-list { max-width: 820px; margin: 0 auto; }
.kem-faq-item {
	background: var(--kem-white);
	border: 1px solid var(--kem-border);
	border-radius: 14px;
	margin-bottom: 12px;
	overflow: hidden;
}
.kem-faq-item summary {
	cursor: pointer;
	list-style: none;
	padding: 18px 22px;
	font-weight: 700;
	color: var(--kem-navy);
	font-size: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
.kem-faq-item summary::-webkit-details-marker { display: none; }
.kem-faq-item summary::after {
	content: "+";
	font-size: 22px;
	color: var(--kem-gold-deep);
	flex-shrink: 0;
	transition: transform 0.2s ease;
}
.kem-faq-item[open] summary::after { transform: rotate(45deg); }
.kem-faq-item .kem-faq-body {
	padding: 0 22px 20px;
	font-size: 14px;
	color: var(--kem-text);
	line-height: 1.8;
}

/* ---------- ⑨Start Learning（最終CTA） ---------- */

.kem-final-cta { text-align: center; }
.kem-final-cta p.kem-cta-body {
	max-width: 560px;
	margin: 0 auto 20px;
	font-size: 15px;
	color: rgba(255,255,255,0.85);
	line-height: 1.85;
}
.kem-cta-tagline {
	font-weight: 700;
	font-size: 18px;
	color: var(--kem-white);
	margin: 0 0 28px;
}

/* ============================================================
   レスポンシブ
   ============================================================ */

@media (max-width: 900px) {
	.kem-concept-grid { grid-template-columns: 1fr; }
	.kem-concept-op { transform: rotate(90deg); padding: 4px 0; }
	.kem-problem-grid { grid-template-columns: 1fr; }
	.kem-after-grid { grid-template-columns: 1fr; }
	.kem-lesson-grid { grid-template-columns: 1fr; }
	.kem-instructor { grid-template-columns: 1fr; }
	.kem-instructor-photo { max-width: 240px; margin-inline: auto; }
	.kem-voice-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.kem-hero h1 { font-size: 30px; }
}