@charset "UTF-8";

/* --- CSS Variables (Color Palette) --- */
:root {
	--primary-color: #004e92; /* 深い青 */
	--secondary-color: #000428; /* より深いネイビー */
	--accent-color: #f7c35f; /* ゴールド/黄色 */
	--accent-hover: #ffdb8e;
	--text-color: #333;
	--light-text: #fff;
	--bg-light: #f4f7f9;
	--bg-gradient-blue: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
	--bg-gradient-gold: linear-gradient(to right, #f7c35f, #f3e4a0);
	--font-mincho: "Shippori Mincho", serif;
	--font-gothic: "Noto Sans JP", sans-serif;
}

/* --- Reset & Global --- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: var(--font-gothic);
	line-height: 1.8;
	color: var(--text-color);
	background-color: #fff;
	overflow-x: hidden; /* 横スクロール防止 */
}

#content,
#main,
.entry-content{
	margin: 0!important;
	padding: 0!important;
}
.entry-content h2,
.main{
	border: 0 none!important;
}
.entry-content h2{
	background: transparent!important;
	box-shadow: none!important;
}
.entry-content h2::before{
	display: none!important;
}

#footer{
	display: block!important;
}
.footer-widgets, .footer-widgets-mobile{
	display: none!important;
}

.cont-area{
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 20px;
	position: relative;
	z-index: 2;
}

/* --- Typography & Utilities --- */
h1, h2, h3 {
	font-weight: 700;
	line-height: 1.4;
}

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

.sp-only { display: none; }
@media (max-width: 768px) { .sp-only { display: block; } }

/* --- Wave/Curve Separators --- */
.wave-bottom {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	transform: rotate(180deg);
}
.wave-bottom::before {
	content: "";
	display: block;
	width: 100%;
	height: 60px;
	background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="%23ffffff"></path></svg>') no-repeat center center / cover;
}
/* セクションによって波の色を変えるためのmodifier */
.role .wave-bottom::before { fill: #f4f7f9; }

.wave-top-reverse {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
}
.wave-top-reverse::before {
	content: "";
	display: block;
	width: 100%;
	height: 60px;
	background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="%23ffffff"></path></svg>') no-repeat center center / cover;
}
/* セクションによって波の色を変えるためのmodifier */
.pricing .wave-top-reverse::before, .cta-section .wave-top-reverse::before { fill: #fff; }


/* --- Components --- */
/* Buttons */
.btn-cta {
	display: inline-block;
	background: var(--bg-gradient-gold);
	color: #333!important;
	text-decoration: none!important;
	padding: 18px 45px;
	border-radius: 50px;
	font-weight: 700;
	font-size: 1.3rem;
	box-shadow: 0 5px 20px rgba(247, 195, 95, 0.4);
	position: relative;
	overflow: hidden;
	border: 2px solid #fff;
}
.btn-cta span { font-size: 0.95rem; font-weight: normal; display: block; margin-top: 5px; }
.btn-cta:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(247, 195, 95, 0.6); }
.glow-effect::after {
	content: "";
	position: absolute;
	top: -50%; left: -50%; width: 200%; height: 200%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
	transform: rotate(45deg);
	animation: glowing 3s infinite;
	opacity: 0;
}
.btn-cta:hover::after { opacity: 1; }
@keyframes glowing {
	0% { left: -50%; }
	100% { left: 150%; }
}

/* Section Titles */
.entry-content h2.section-title {
	font-family: var(--font-mincho);
	font-size: 2.2rem;
	text-align: center;
	margin-top: 1.5em!important;
	margin-bottom: 50px;
	color: var(--secondary-color);
	position: relative;
}
.title-en {
	display: block;
	font-family: var(--font-gothic);
	font-size: 0.9rem;
	color: var(--primary-color);
	letter-spacing: 0.1em;
	margin-bottom: 10px;
	font-weight: 700;
}
.section-title::after {
    content: ""; /* SVG画像を削除 */
    display: block;
    margin: 20px auto 0; /* 位置を微調整 */
    width: 60px;         /* 直線の幅 */
    height: 3px;         /* 直線の太さ */
    background-color: var(--accent-color); /* 直線の色（元の金色） */
    border-radius: 2px;  /* 端を少し丸くして柔らかい印象に */
}
.white-title { color: #fff; }
.white-title .title-en { color: #ccc; }

/* --- Header --- */
.lp-header {
	background: var(--secondary-color);
	padding: 12px 0;
	text-align: center;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.shoulder-text { font-size: 0.85rem; color: #ccc; }

/* --- Hero Section --- */
.hero {
	position: relative;
	background: var(--bg-gradient-blue);
	color: var(--light-text);
	text-align: center;
	padding: 20px 0 60px; /* 波の分下を空ける */
	overflow: hidden;
}
.hero-bg-decoration {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background-image: 
		radial-gradient(circle at 20% 30%, rgba(0, 78, 146, 0.4) 0%, transparent 50%),
		radial-gradient(circle at 80% 70%, rgba(0, 4, 40, 0.4) 0%, transparent 50%);
	pointer-events: none;
	/* キラキラした粒子の背景画像があればここに設定 */
	/* background-image: url('path/to/particles.png'); */
	opacity: 0.6;
}
.hero-shoulder { font-size: 1.2rem; margin-bottom: 15px; font-weight: 700; color: var(--accent-color); }
.main-copy {
	font-family: var(--font-mincho);
	font-size: 3.5rem;
	line-height: 1.3;
	margin-bottom: 30px;
	text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.highlight { color: var(--accent-color); position: relative; display: inline-block; }
.highlight::after {
	content: ""; position: absolute; bottom: 5px; left: 0; width: 100%; height: 8px;
	background: rgba(247, 195, 95, 0.3); z-index: -1; transform: skewX(-15deg);
}
.sub-copy { font-size: 1.1rem; max-width: 800px; margin: 0 auto 50px; opacity: 0.9; }

/* --- Empathy Section --- */
.empathy { background-color: #fff; }
.check-list-wrapper {
	background: var(--bg-light);
	padding: 40px;
	border-radius: 15px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
	border: 1px solid #eee;
}
.check-list { list-style: none; max-width: 800px; margin: 0 auto; }
.check-list li {
	padding: 15px 0 15px 35px;
	position: relative;
	border-bottom: 1px dashed #ccc;
	font-weight: 500;
}
.check-list li:last-child { border-bottom: none; }
.check-list li::before {
	content: '×'; position: absolute; left: 0; top: 15px;
	color: #e74c3c; font-weight: bold; font-size: 1.2rem;
}
.check-list li strong { color: #e74c3c; background: linear-gradient(transparent 70%, rgba(231, 76, 60, 0.2) 70%); }

/* --- Role Section --- */
.role {
	position: relative;
	background: var(--bg-gradient-blue);
	color: #fff;
	padding: 40px 0 60px;
}
.entry-content .role h2.section-title { color: #fff; }
.role .title-en { color: var(--accent-color); }
.role-content {
	max-width: 800px; margin: 0 auto; text-align: center; font-size: 1.05rem;
}
.role-content p { margin-bottom: 25px; }
.highlight-p {
	font-weight: 700; font-size: 1.2rem;
	border-top: 2px solid var(--accent-color);
	border-bottom: 2px solid var(--accent-color);
	padding: 20px 0;
	color: var(--accent-color);
}

/* --- Results Section --- */
.results { padding: 10px 0 40px; background-color: var(--bg-light); }
.note { text-align: center; font-size: 0.9rem; margin-bottom: 40px; color: #666; }
.result-grid { display: flex; gap: 30px; }
.result-card {
	flex: 1;
	background: #fff; padding: 40px 30px;
	border-radius: 15px;
	box-shadow: 0 10px 25px rgba(0, 78, 146, 0.1);
	border-top: 4px solid var(--primary-color);
	position: relative;
	overflow: hidden;
}
.card-icon {
	font-size: 2.5rem; color: var(--primary-color);
	margin-bottom: 15px; text-align: center;
	background: var(--bg-light);
	width: 70px; height: 70px; line-height: 70px;
	border-radius: 50%; margin: 0 auto 20px;
}
.entry-content .result-card h3 {
	text-align: center; font-size: 1.4rem; margin-bottom: 25px; color: var(--secondary-color);
	font-family: var(--font-mincho);
	margin-top: 0!important;
	border: 0 none!important;
}
.entry-content .result-card h3::after{ display: none; }
.result-card ul { list-style: none; }
.result-card li {
	margin-bottom: 15px; padding-left: 25px; position: relative;
}
.result-card li::before {
	content: '\2713'; position: absolute; left: 0; color: var(--accent-color);
}
.result-card li strong { color: var(--primary-color); font-size: 1.1rem; }

/* --- Pricing Section --- */
.pricing { position: relative; padding: 40px 0 50px; background: #fff!important; }
.entry-content .pricing h2.section-title { margin-top: 0!important; }
.stylish-table table {
	width: 100%; border-collapse: separate; border-spacing: 0;
	border-radius: 12px; overflow: hidden;
	box-shadow: 0 5px 20px rgba(0,0,0,0.08)!important;
}
.stylish-table th, .stylish-table td {
	padding: 18px 15px; text-align: center; border: none;
	border-bottom: 1px solid #eee!important; vertical-align: middle;
}
.stylish-table thead th {
	background: var(--secondary-color)!important; color: #fff!important; font-weight: 700;
	padding: 25px 15px; font-size: 1.1rem;
}
.stylish-table .plan-name { background: var(--primary-color)!important; }
.stylish-table .plan-recommended {
	background: var(--accent-color)!important; color: var(--secondary-color)!important; position: relative!important;
}
.plan-badge {
	position: absolute; right: 10px;
	background: #e74c3c; color: #fff; font-size: 0.7rem;
	padding: 3px 8px; border-radius: 10px; font-weight: 700;
}
.stylish-table th { background: #f9f9f9!important; text-align: left; padding-left: 25px; color: var(--primary-color)!important; }
.stylish-table .price { font-family: var(--font-mincho); font-size: 1.2rem; }
.stylish-table .price strong { font-size: 1.6rem; color: var(--primary-color)!important; }
.recommended-cell { background: #fff9f0!important; font-weight: 700; color: var(--secondary-color)!important; }
.recommended-cell strong { color: var(--secondary-color)!important; }

.options {
	margin-top: 50px; background: #fff; padding: 30px;
	border-radius: 12px; border: 2px dashed var(--primary-color);
}
.entry-content .options h3 { color: var(--primary-color); margin: 0 0 20px; text-align: center; }
.entry-content .options ul { list-style: none; display: flex; flex-wrap: wrap; margin-bottom: 0!important; padding-left: 0; justify-content: center; gap: 20px; }
.options li {
	background: var(--bg-light); padding: 10px 20px; border-radius: 30px;
	font-weight: 700; color: var(--secondary-color);
}

/* --- Why Us --- */
.why-us { padding: 20px 0 60px; background: var(--bg-light); }
.stylish-profile {
	background: #fff; padding: 40px; border-radius: 15px;
	box-shadow: 0 10px 25px rgba(0,0,0,0.05);
	display: flex; align-items: center; gap: 30px; margin-bottom: 50px;
	border-left: 6px solid var(--accent-color);
}
.entry-content .profile-text h3 {
	font-family: var(--font-mincho); font-size: 1.5rem; margin-top: 0; margin-bottom: 15px;
	color: var(--secondary-color);
	border: 0 none!important;
}
.entry-content .profile-text h3::after{ display: none; }
.entry-content .profile-text p{ margin-bottom: 0!important; }

.why-lead { text-align: center; font-size: 1.2rem; margin-bottom: 40px; }

.stylish-list { list-style: none; max-width: 900px; margin: 0 auto; }
.stylish-list li {
	background: #fff; padding: 25px 30px 25px 60px;
	margin-bottom: 20px; border-radius: 12px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.03);
	position: relative;
}
.stylish-list li::before {
	content: 'POINT'; position: absolute; left: 0; top: 0;
	background: var(--primary-color); color: #fff;
	font-size: 0.8rem; padding: 5px 10px;
	border-top-left-radius: 12px; border-bottom-right-radius: 12px;
}
.stylish-list strong {
	display: block; font-size: 1.3rem; margin-bottom: 10px;
	color: var(--primary-color); font-family: var(--font-mincho);
}
.stylish-list p { margin: 0; font-size: 1rem; }

/* --- Footer CTA & Form --- */
.main-cta {
	position: relative;
	background: var(--bg-gradient-blue);
	padding: 60px 0 40px;
	color: #fff;
}
.entry-content .main-cta h2{ color: #fff; }

.cta-wave::before { fill: var(--bg-light); } /* Why Usの背景色に合わせる */
.cta-lead { text-align: center; margin-bottom: 50px; font-size: 1.1rem; }

.stylish-form {
	max-width: 700px; margin: 0 auto;
	background: rgba(255,255,255,0.95); /* 少し透過させる */
	padding: 50px; border-radius: 20px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.2);
	color: var(--text-color);
}
.form-group { margin-bottom: 25px; }
.form-group label {
	display: block; font-weight: 700; margin-bottom: 10px; color: var(--secondary-color);
}
.form-group label span {
	background: #e74c3c; color: #fff; font-size: 0.7rem; padding: 3px 8px;
	border-radius: 4px; margin-left: 10px; vertical-align: middle;
}
.form-group input, .form-group textarea {
	width: 100%; padding: 15px; border: 2px solid #eee;
	border-radius: 8px; font-size: 1rem; transition: border-color 0.3s;
	font-family: var(--font-gothic);
}
.form-group input:focus, .form-group textarea:focus {
	border-color: var(--primary-color); outline: none;
}
.date-inputs input { margin-bottom: 10px; }
.form-submit { text-align: center; margin-top: 40px; }
.btn-submit {
	background: var(--bg-gradient-gold); border: none; color: var(--secondary-color);
	padding: 20px 60px; font-size: 1.4rem; font-weight: 700;
	border-radius: 50px; cursor: pointer; width: 100%;
	box-shadow: 0 10px 25px rgba(247, 195, 95, 0.4); position: relative; overflow: hidden;
}
.btn-submit:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(247, 195, 95, 0.6); }
.caption { margin-top: 20px; color: #888; font-size: 0.85rem; }


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
	.main-copy { font-size: 2.2rem; }
	.hero { padding: 10px 0 40px; }
	.btn-cta { font-size: 1.1rem; padding: 15px 30px; width: 100%; }
	.section-title { font-size: 1.8rem; }
	.result-grid { flex-direction: column; }
	.table-wrapper { overflow-x: auto; }
	.stylish-table th, .stylish-table td { padding: 10px; font-size: 0.9rem; }
	.stylish-table .price strong { font-size: 1.3rem; }
	.stylish-profile { flex-direction: column; text-align: center; padding: 30px; }
	.stylish-list li { padding: 40px 20px 25px; }
	.stylish-form { padding: 30px 20px; }
	.btn-submit { font-size: 1.2rem; padding: 15px 30px; }
}