@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/*必要ならばここにコードを書く*/

:root {
	--primary-color: #4A5568;
	--accent-color: #E53E3E;
	--light-accent: #FED7D7;
	--dark-accent: #C53030;
	--background-color: #F7FAFC;
	--text-color: #2D3748;
	--light-text: #718096;
	--border-color: #E2E8F0;
	--card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	--transition: all 0.3s ease;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	overflow-x: hidden;
}
.logo-header {
	position: relative;
}
.logo-header::after {
	content: "";
	position: absolute;
	right: -80px;
	/* ロゴの右側に配置 */
	top: 50%;
	transform: translateY(-50%);
	/* 縦方向の中央揃え */
	width: 77px;
	height: 65px;
	background-image: url('https://hakkenmonogatari.com/web2504/wp-content/uploads/2025/05/image-illust.png');
	/* イラストのURLを指定 */
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
/* スマホ表示でのスタイル */

@media screen and (max-width: 1023px) {
	.logo-header::after {
		right: -80px;
		/* スマホ表示ではイラストをより近くに配置 */
	}
	/* メニューボタンと重ならないようにする場合 */
	.mblt-header-mobile-buttons .logo-header::after {
		right: auto;
		/* 右からの位置指定をリセット */
		left: 100%;
		/* ロゴの直後に配置 */
		margin-left: 10px;
		/* 少し間隔をあける */
	}
}
/* さらに小さい画面サイズでの調整 */

@media screen and (max-width: 480px) {
	.logo-header::after {
		width: 80px;
		/* 小さなスクリーンではイラストを小さくする */
		height: 67px;
		/* アスペクト比を維持 */
		right: -60px;
	}
	.mblt-header-mobile-buttons .logo-header::after {
		margin-left: 5px;
		/* 間隔を少し狭める */
	}
}
.footer-bottom-logo {
	display: none;
}
.footer-bottom-content {
	text-align: center;
	color: #fff;
	width: 100%;
}
.footer-bottom-content a {
	color: #fff!important;
}
h1, h2, h3, h4, h5, h6 {
	font-family: "Noto Serif JP", serif;
	font-weight: 700;
	line-height: 1.3;
}
a {
	text-decoration: none;
	color: var(--primary-color);
	transition: var(--transition);
}
img {
	max-width: 100%;
	height: auto;
}
ul, ol {
	list-style-position: inside;
}
#header-in {
	padding: 10px 0px;
}
/*グローバルメニュー メニュー項目の左右の余白*/

#navi .navi-in>ul>li>a {
	padding: 0 2.0em;
	font-weight: 500;
	font-size:14px;
	letter-spacing:1px;
}
#navi .navi-in li {
	margin: 0 5px;
}
/*ホバー時にメニューの色が薄くなるのをやめる*/

#navi .navi-in a:hover {
	background-color: rgb(255 255 255 / 0);
	color: var(--accent-color);
}
/*ホバー時にメニューにアンダーラインを出す*/

#navi .navi-in .nav-link a:after {
	position: absolute;
	/*線の位置を絶対配置に*/
	content: "";
	/*文字はなし*/
	height: 2px;
	bottom: -4px;
	left: 0;
	background-color: var(--accent-color);
	transition: var(--transition);
	--transition: all 0.3s ease;
	width: 0;
	/*幅いっぱいに線を引く*/
}
#navi .navi-in .nav-link a:hover:after {
	width: 100%;
}
.nav-cta {
	background-color: var(--accent-color);
	color: white;
	padding: 0.5rem 1.25rem;
	border-radius: 4px;
	font-weight: 500;
	color: #fff!important;
}
.nav-cta a {
	color: #fff!important;
}
.nav-cta:hover {
	background-color: var(--dark-accent);
	color: #fff!important;
}
.nav-cta a:hover:after {
	width: 0;
	height: 0;
}
.nav-gift {
	background-color: #000;
	color: white;
	padding: 0.5rem 1.25rem;
	border-radius: 4px;
	font-weight: 500;
	color: #fff!important;
}
.nav-gift a {
	color: #fff!important;
}
.nav-gift:hover {
	background-color: #333;
	color: #fff!important;
}
.nav-gift a:hover:after {
	width: 0;
	height: 0;
}
#header-container {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
/* Full画面幅 */

.full-width {
	width: 100vw;
	position: relative;
	margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
	padding-top: 0px;
	/* 不要なら削除または、任意の数値を設定してください */
	padding-bottom: 0px;
	/* 不要なら削除または、任意の数値を設定してください */
}
.front-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}
/* Hero Section */

.hero {
	margin-top: -25px;
	background-image: url('https://hakkenmonogatari.com/web2504/wp-content/uploads/2025/04/top-image-white2.jpg');
	background-size: cover;
	background-position: center;
	height: 550px;
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: center;
}
.hero-grid {
	display: grid;
	grid-template-columns: 3fr 6fr 6fr 3fr;
	gap: 2rem;
	margin-bottom: 1rem;
	width: 90%;
	max-width: 1800px;
}
.hero-grid01 {
	grid-column: 2 / 3!important;
}
.hero-grid02 {
	grid-column: 3 / 4!important;
}
img.catch-graphic {
	max-height: 300px;
	max-width: 95%;
	margin-bottom:30px;
}
img.hero-graphic {
	max-height: 350px;
	max-width: 90%;
}
.hero::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.5);
	z-index: 1;
}
.hero-content {
	position: relative;
	z-index: 2;
	color: #333;
	max-width: 100%;
}
.hero-subtitle {
	font-size: 1rem;
	margin-bottom: 1rem;
	opacity: 0.9;
}
.hero-title {
	font-size: clamp(1.0rem, calc(16px + 0.5vw), 1.8rem);
	margin-bottom: 1.5rem;
	line-height: 1.6;
	display: block;
	white-space: pre-line;
	width: 100%;
}
.hero-title br {
	display: block;
}
.hero-cta {
	margin-top: 1rem;
	display: inline-block;
}
@media screen and (max-width: 1800px) {

.hero {height:auto;padding:50px 0px;}
.hero-grid {
	display: grid;
	grid-template-columns: 1fr 6fr 6fr 1fr;
	gap: 2rem;
	margin-bottom: 1rem;
	width: 100%;
	max-width: 1800px;
	
}
}
@media screen and (min-width: 780px) {

	.hero-subtitle {
		font-size: 1.25rem;
		margin-bottom: 2rem;
		opacity: 0.9;
	}
	.hero-grid {
		max-width: 2400px;
	}
}
.ttl-space {
	padding-left: 10px;
}
.subttl-space {
	padding-left: 15px;
}
.hero-description {
	font-size: 1rem;
	margin-top: 1rem;
	opacity: 0.9;
}
.hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background-color: var(--accent-color);
	color: white;
	padding: 0.5rem 1.5rem;
	border-radius: 4px;
	font-weight: 500;
	transition: var(--transition);
}
.hero-cta:hover {
	background-color: var(--dark-accent);
	color: #fff;
}
.product-cta {
	display: inline-flex;
	justify-content:  flex-start!important;
	align-items: center;
	gap: 0.5rem;
	background-color: #6fcd00;
	color: white;
	padding: 0.5rem 1.5rem;
	border-radius: 4px;
	font-weight: 500;
	transition: var(--transition);
}
.product-cta:hover {
	background-color: #5fb000;
	color: #fff;
}

/* Section Styling */

.section {
	padding: 2.5rem 0;
}
.section-light {
	background-color: white;
}
.section-title {
	font-size: 1.8rem;
	text-align: center;
	margin-bottom: 2rem;
	position: relative;
}
.section-title::after {
	content: '';
	position: absolute;
	width: 60px;
	height: 3px;
//	background-color: var(--accent-color);
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
}
.section-intro {
	max-width: 700px;
	margin: 0 auto 2rem;
	text-align: center;
	font-size: 1rem;
	color: var(--light-text);
}

.news-title {
	font-size: 1.2rem;
	text-align: center;
	margin-bottom: 1rem;
	position: relative;
}

/* Feature Boxes */

.features {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 2rem;
	margin-bottom: 4rem;
}
.feature {
	background-color: white;
	border-radius: 8px;
	padding: 2rem;
	box-shadow: var(--card-shadow);
	transition: var(--transition);
}
.feature:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.feature-icon {
	width: 30px;
	height: 30px;
	//	background-color: var(--light-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	margin-bottom: 1.5rem;
}
.feature-icon svg {
	width: 30px;
	height: 30px;
	color: var(--accent-color);
}
#about .feature {
	position: relative;
}
#about .feature-icon {
	float: left;
	width: 30px;
	height: 30px;
	//  background-color: var(--light-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	margin-right: 1rem;
	margin-bottom: 1rem;
}
#about .feature-title {
	display: block;
	margin-left: 45px;
	/* アイコンの幅 + 右マージン + 少し余白 */
	margin-bottom: 1rem;
	padding-top: 0rem;
	font-size:1.4em;
	/* 上部の余白を追加して垂直中央揃えの効果を出す */
}
/* 説明文の部分を調整 */

#about .feature p {
	clear: both;
	margin-top: 0.5rem;
}
#about .feature-link {
	display: inline-flex;
	clear: both;
}
#plans .feature-title {
	font-size: 1.1rem;
	margin: 1.5rem 0;
	text-align: center;
	background-color: #f7fafc;
	border-radius: 2.5em;
	padding: 7px 10px;
}
.feature-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	font-weight: 500;
	color: var(--accent-color);
}
.feature-link:hover {
	color: var(--dark-accent);
}
.feature-label {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--accent-color);
	color: white;
	padding: 0.25rem 1rem;
	border-radius: 15px;
	font-size: 0.875rem;
	font-weight: 500;
}
.feature-price {
	font-size: 1.6rem;
	font-weight: 700;
	margin: 1rem 0;
	text-align: center;
	line-height: 1.4em;
}
.feature-price span {
	font-size: 12px;
	font-weight: 200;
	line-height: 12px;
}
.feature-detail {
	color: var(--light-text);
	margin-bottom: 1.5rem;
}
.feature-detail-l {
	color: var(--light-text);
	margin-bottom: 1.5rem;
}
.feature ul {
	margin-bottom: 2rem;
	list-style: none;
	font-size: 0.8em;
	padding: 0 30px;
}
.feature li {
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--border-color);
}
.feature-cta {
	text-align: center!important;
}
.feature-camp {
	padding: 20px 20px;
	background-color: #fff6f6;
	text-align: center;
	font-size: 14px;
	margin-bottom: 20px;
}
.feature-camp span {
	background-color: #e53e3e;
	color: #fff;
	display: block;
	border-radius: 2.5em;
	margin-bottom: 10px;
	font-size: 18px;
	font-weight: bold;
}
.feature-camp img {
	max-width: 80%;
	margin-bottom: 10px;
}
/* Content Boxes */

.content-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 2rem;
	margin-bottom: 4rem;
}
.content-image {
	grid-column: span 5;
	border-radius: 8px;
	overflow: hidden;
}
.content-text {
	grid-column: span 7;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.letter-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 2rem;
	margin-bottom: 0;
	box-sizing: border-box;
}
.top-letter {
	grid-column: 3 / span 8!important;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.content-title {
	font-size: 2rem;
	margin-bottom: 1.5rem;
}
.content-description {
	margin-bottom: 1.5rem;
}
.content-link {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--accent-color);
	font-weight: 500;
}
.content-link:hover {
	color: var(--dark-accent);
}
/* Latest Boxes */

.latest-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 2rem;
}
.latest-card {
	background-color: white;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: var(--card-shadow);
	transition: var(--transition);
}
.latest-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.latest-image {
	/* より確実な正方形設定 */
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	/* 正方形を作成 */
	position: relative;
	overflow: hidden;
	background-color: #f8f9fa;
	/* 上品な薄いグレーの背景 */
}
.latest-image figure {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	/* figureのデフォルトマージンを削除 */
}
.latest-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* 画像全体を表示 */
	object-position: center;
	transition: var(--transition);
	display: block;
}
.latest-card:hover .latest-image img {
	transform: scale(1.05);
}
.latest-content {
	padding: 1.5rem;
}
.latest-meta {
	display: flex;
	gap: 1rem;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	color: var(--light-text);
}
.latest-title {
	font-size: 1.25rem;
	margin-bottom: 1rem;
}
.latest-excerpt {
	margin-bottom: 1rem;
	font-size: 0.875rem;
	color: var(--light-text);
	display:block;
}
.latest-excerpt a:hover {
	color:#333!important;
}
.latest-link {
	color: var(--accent-color);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}
.latest-link:hover {
	color: var(--dark-accent);
}
/* Testimonials */

.testimonials {
	background-color: white;
	border-radius: 8px;
	padding: 3rem;
	box-shadow: var(--card-shadow);
	position: relative;
}
.testimonials::before {
	content: '"';
	position: absolute;
	top: 20px;
	left: 30px;
	font-size: 6rem;
	color: var(--light-accent);
	font-family: serif;
	line-height: 1;
}
.testimonial-slider {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 2rem;
	padding-bottom: 2rem;
	scrollbar-width: none;
	/* Firefox */
}
.testimonial-slider::-webkit-scrollbar {
	display: none;
	/* Chrome, Safari and Opera */
}
.testimonial {
	min-width: 100%;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.testimonial-content {
	font-size: 1.25rem;
	font-style: italic;
	margin-bottom: 2rem;
	color: var(--text-color);
}
.testimonial-author {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.testimonial-avatar {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	margin-bottom: 1rem;
}
.testimonial-name {
	font-weight: 700;
	margin-bottom: 0.25rem;
}
.testimonial-role {
	font-size: 0.875rem;
	color: var(--light-text);
}
.testimonial-nav {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
}
.nav-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--border-color);
	cursor: pointer;
	transition: var(--transition);
}
.nav-dot.active {
	background-color: var(--accent-color);
}
/* Call to Action */

.cta {
	background-color: var(--primary-color);
	color: white;
	text-align: center;
	border-radius: 8px;
	padding: 4rem 2rem;
	position: relative;
	overflow: hidden;
}
.cta::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('/api/placeholder/1200/400');
	background-size: cover;
	background-position: center;
	opacity: 0.2;
}
.cta-content {
	position: relative;
	z-index: 2;
	max-width: 700px;
	margin: 0 auto;
}
.cta-title {
	font-size: 2rem;
	margin-bottom: 1.5rem;
}
.cta-description {
	font-size: 1.125rem;
	margin-bottom: 2rem;
	opacity: 0.9;
}
.cta-buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}
.cta-primary {
	background-color: var(--accent-color);
	color: white;
	padding: 0.75rem 1.5rem;
	border-radius: 4px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.cta-primary:hover {
	background-color: var(--dark-accent);
	color: #fff;
}
.cta-secondary {
	background-color: transparent;
	color: white;
	padding: 0.75rem 1.5rem;
	border-radius: 4px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid white;
}
.cta-secondary:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: #fff;
}
/* Footer */

.footer {
	background-color: var(--primary-color);
	color: white;
	padding: 1rem 0rem;
}
.footer p {
	color: #fff!important;
}
.footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}
.footer-logo {
	width: 150px;
	margin: 1rem 0;
}
.footer-description {
	margin-bottom: 1rem;
	font-size: 0.875rem;
	opacity: 0.8;
	color: #fff;
}
.footer-social {
	display: flex;
	gap: 1rem;
	margin-bottom: 1rem;
}
.social-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
}
.social-icon:hover {
	background-color: var(--accent-color);
}
.footer-title {
	font-size: 1.25rem;
	margin-bottom: 1rem;
	color: white;
}
.footer-links {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.footer-link {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.875rem;
}
.footer-link:hover {
	color: white;
}
.footer-form {
	display: flex;
	margin-bottom: 1rem;
}
.footer-input {
	flex: 1;
	padding: 0.75rem;
	border: none;
	border-radius: 4px 0 0 4px;
	outline: none;
}
.footer-button {
	background-color: var(--accent-color);
	color: white;
	border: none;
	padding: 0 1rem;
	border-radius: 0 4px 4px 0;
	cursor: pointer;
	transition: var(--transition);
}
.footer-button:hover {
	background-color: var(--dark-accent);
}
.story_notice {font-size:12px;padding-bottom:20px;padding-top:50px;}
/* CF7フォームのコンテナスタイル */
.form-part {padding:20px;border:1px solid #ccc;border-radius:4px;}

.form-part h4 {margin-bottom:0px!important;font-size:18px!important;border:none!important;padding-left:0px;}
.sentform h5 {border-bottom:none;padding-left:0px;}
.sentform p {paddin:0px 0px!important;margin:5px 0px;font-size:12px;}
.sentform textarea {height:120px!important;margin-bottom:5px;}
.sentform .message textarea {height:70px!important;margin-bottom:10px;}

/* PC（768px以上）でのみ適用 */
@media (min-width: 768px) {
    .form-part .sentform .wpcf7-form .wpcf7-submit, .contact-part .sentform .wpcf7-form .wpcf7-submit {
        width: 400px !important;
        max-width: 400px !important;
        display: block;
        margin: 0 auto; /* 中央揃えにする場合 */
    }
}

/* より大きなスクリーンサイズの場合 */
@media (min-width: 1024px) {
    .form-part .sentform .wpcf7-form .wpcf7-submit, .contact-part .sentform .wpcf7-form .wpcf7-submit {
        width: 400px !important;
    }
}

@media (max-width: 768px) {
    .sentform .custom-textarea {
        height: 120px !important;
        min-height: 120px !important;
    }
    
    .sentform .message-textarea {
        height: 70px !important;
        min-height: 70px !important;
    }
}

/* お名前とメールアドレスを左右に並べるCSS */

.name-sec {
    margin-bottom: 10px;
}

/* 空のlabel要素を非表示 */
.name-sec label:empty {
    display: none;
}

/* デスクトップ版（768px以上）で左右に並べる */

    .name-sec {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: start;
    }
    
    /* お名前セクション（左側） */
    .name-sec h5:first-of-type {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 8px;
    }
    
    .name-sec p:has(input[name="your-name"]) {
        grid-column: 1;
        grid-row: 2;
        margin: 0;
    }
    
    /* メールアドレスセクション（右側） */
    .name-sec h5:last-of-type {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 8px;
    }
    
    .name-sec p:has(input[name="email-633"]) {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
    }
    
    /* 最初の空のp要素を非表示 */
    .name-sec p:first-child {
        display: none;
    }


/* フォームのスタイリング調整 */
.name-sec h5 {
    margin-bottom: 8px;
    margin-top: 0;
    font-weight: bold;
    color: #333;
}

.name-sec p {
    margin-top: 0;
    margin-bottom: 10px;
}

.name-sec input[type="text"],
.name-sec input[type="email"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.name-sec input[type="text"]:focus,
.name-sec input[type="email"]:focus {
    border-color: #007cba;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 124, 186, 0.3);
}

/* より大きな画面でのレイアウト調整 */
@media (min-width: 1024px) {
    .name-sec {
        gap: 30px;
    }
}

.footer-form {
	display: flex;
	margin-bottom: 1rem;
	width: 100%;
	max-width: 300px!important;
}
/* wpcf7コンテナのスタイル修正 */

.footer-form .wpcf7 {
	width: 100%;
	max-width: 300px!important;
}
/* フォーム自体のスタイル */

.footer-form .wpcf7-form {
	display: flex;
	width: 100%;
	max-width: 300px!important;
}
/* 段落タグを調整 */

.footer-form .wpcf7-form p {
	display: flex;
	margin: 0;
	width: 100%;
}
/* 入力フィールドのラッパー - 重要: ここでflex比率を設定 */

.footer-form .wpcf7-form-control-wrap {
	flex: 1;
	width: 100%;
	max-width: 300px!important;
	display: block;
}
/* 入力フィールドのスタイル */

.footer-form .wpcf7-email {
	width: 100%;
	max-width: 300px!important;
	box-sizing: border-box;
	padding: 0.75rem;
	border: none;
	border-radius: 4px 0 0 4px;
	outline: none;
	height: 100%;
}
/* 送信ボタンのスタイル - 幅を明示的に制限 */

.footer-form .wpcf7-submit {
	background-color: var(--accent-color);
	color: white;
	border: none;
	padding: 0 1rem;
	border-radius: 0 4px 4px 0;
	cursor: pointer;
	transition: var(--transition);
	width: auto;
	white-space: nowrap;
	flex-shrink: 0;
}
/* ホバー状態 */

.footer-form .wpcf7-submit:hover {
	background-color: var(--dark-accent);
}
/* レスポンス出力のスタイル */

.footer-form .wpcf7-response-output {
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.5rem;
	font-size: 0.875rem;
	border-radius: 4px;
	clear: both;
}
/* 送信完了後のフォーム要素を非表示 */

.wpcf7-form.sent .wpcf7-form-control-wrap, .wpcf7-form.sent p, .wpcf7-form.sent input, .wpcf7-form.sent textarea, .wpcf7-form.sent select, .wpcf7-form.sent button, .wpcf7-form.sent label, .wpcf7-form.sent .wpcf7-submit {
	display: none !important;
}
/* 送信完了後のフォームレイアウトを調整 */

.footer-form .wpcf7-form.sent {
	display: block !important;
	/* flexからblockに変更 */
	width: 100% !important;
}
.footer-form .wpcf7-form.sent p {
	display: block !important;
	/* flexからblockに変更 */
	width: 100% !important;
}
/* 送信完了メッセージを100%幅で表示 */

.footer-form .wpcf7-form.sent .wpcf7-response-output {
	display: block !important;
	width: 100% !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
	text-align: left !important;
	padding: 0.75rem !important;
}
.wpcf7 form.sent .wpcf7-response-output {
	/* 送信ボタン下完了時 */
	background-color: #f2ffe1 !important;
	/* 背景色を薄緑に設定 */
	border: none !important;
	/* 枠線を消す */
	color: #333 !important;
	/* テキスト色を調整 */
	border-radius: 4px !important;
	/* 角を丸くする（オプション） */
}
.footer-form .wpcf7 form.sent .wpcf7-response-output {
	/* 送信ボタン下完了時 */
	background-color: transparent !important;
	border: 1px solid #fff !important;
	color: #fff !important;
	/* テキスト色を調整 */
	border-radius: 4px !important;
	/* 角を丸くする（オプション） */
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
	/* 送信ボタン下未入力警告 */
	border-color: #f88;
}
.wpcf7-not-valid-tip {
	/* 必須未入力項目下の文章 */
	color: #f88;
	font-size: 12px;
}
.footer-bottom {
	text-align: center;
	padding-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.875rem;
	opacity: 0.7;
}
#footer-in li a {
	color: #fff!important;
	font-size: 0.8em!important;
	opacity: 0.8;
}
#footer-in li a:hover {
	color: #fff!important;
	background-color: rgb(255 255 255 / 0);
	opacity: 1;
}
.process-steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2rem;
	margin-top: 4.5rem;
}
.step {
	flex: 1;
	min-width: 250px;
	background-color: white;
	border-radius: 8px;
	padding: 2rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	text-align: center;
	position: relative;
}
.step p {
	text-align: left;
}
.step-number {
	background-color: var(--accent-color);
	color: white;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	font-weight: 700;
}
.step h3 {
	margin-top: 1rem;
	margin-bottom: 1rem;
	font-size: 1.25rem;
}
/*フロント固定ページのタイトルを非表示*/

.home.page .entry-title {
	display: none;
}
/*フロント固定ページのシェアボタンを非表示*/

.home.page .sns-share {
	display: none;
}
/*フロント固定ページのフォローボタンを非表示*/

.home.page .sns-follow {
	display: none;
}
/*フロント固定ページの投稿日を非表示*/

.page .post-date {
	display: none;
}
/*フロント固定ページの更新日を非表示*/

.home.page .post-update {
	display: none;
}
/*フロント固定ページの投稿者名を非表示*/

.home.page .author-info {
	display: none;
}
.sp-br {
	display: none;
}
.sp-space {
	padding-left: 0px;
}
.widget_text, .widget_text a {
	color: #fff!important;
	opacity: 0.9!important;
}
.widget_text p.foot-menu {
	padding-bottom: 10px;
}
.quiz {
	padding: 10px 30px;
	border-radius: 10px;
	margin:30px 0px
}
.quiz-ttl {
	text-align: center;
	margin: 10px 0px;
	font-size: 0.8em;
}
.quiz-ttl span {
	text-align: center;
	;
	padding: 0px 25px;
	display: inline-block;
	border-radius: 25px;
}
.answer {
	padding: 10px 30px;
	border-radius: 10px;
}
.answer-ttl {
	text-align: center;
	margin: 10px 0px;
	font-size: 0.8em;
}
.answer-ttl span {
	text-align: center;
	border: 1px solid #ccc;
	padding: 5px 25px;
	border-radius: 25px;
}
.quiz p, .answer p {
	padding: 0 0;
	margin: 0 0;
}
.quiz-01 {
	background-color: #ded2e9;
}
.quiz-01 .quiz-ttl span {
	background-color: #9b72c0;
	color: #fff;
}
.answer-01 {
	background-color: #fbf7ff;
}
.quiz-part {
	position: relative;
	margin-top: 50px;
	margin-bottom:50px;
	padding: 1.25em 1em;
	border: solid 2px #e60012;
	box-sizing: border-box;
	border-radius: 0 4px 4px 4px;
}
.quiz-part .box-title {
	position: absolute;
	display: inline-block;
	top: -25px;
	left: -2px;
	padding: 2px 16px;
	padding-bottom: 3px;
	height: 25px;
	line-height: 20px;
	background: #e60012;
	color: #ffffff;
	border-radius: 4px 4px 0 0;
	box-sizing: border-box;
	margin-bottom: 0xp;
	box-sizing: border-box;
	font-size: 1.1em;
}
.answer-part {
	position: relative;
	margin-top: 0px;
	padding: 1.25em 1em;
	border: solid 1px #e60012;
	border-radius: 0 4px 4px 4px;
}
.answer-part .box-title {
	position: absolute;
	display: inline-block;
	top: -25px;
	left: -1px;
	padding: 2px 16px;
	padding-bottom: 3px;
	height: 25px;
	line-height: 18px;
	background: #ffeff0;
	color: #ff0000;
	border: solid 1px #e60012;
	border-bottom: solid 1px #fff;
	border-radius: 4px 4px 0 0;
	box-sizing: border-box;
	margin-bottom: 0xp;
	font-size: 1.1em;
}
.quiz-part p, .answer-part p {
	margin: 0;
	padding: 0;
	font-size: 0.9em;
	line-height:1.4em;
}
.entry-content h3 {
	font-size: 24px;
	font-family: 'Noto Serif JP', serif;
	letter-spacing: 0.1em;
	font-weight: 400;
}
.entry-content h3.blog-01 {
	position: relative;
	padding: 8px 16px;
	outline: 1px solid #333;
	color: #333;
	display: block;
	box-sizing: border-box;
	max-width: 100%;
	text-align: center;
	margin: 24px;
	margin-inline: auto;
	border-left: 0px;
}
.entry-content h3.blog-01::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 6px;
	width: 98%;
	height: 82%;
	//  background: #eee9e6;
	z-index: -999;
}
.entry-content h3.blog-01::after {
	content: "";
	position: absolute;
	top: -6px;
	right: -6px;
	border-left: 0px;
	border-right: solid 1px #333;
	border-top: solid 1px #333;
	width: 98%;
	height: 98%;
}
.entry-content h3.blog-02 {
	position: relative;
	padding-left: 40px;
	/* アイコンのためのスペース */
	display: flex;
	align-items: center;
	border: none!important;
	border-top: 5px solid #999!important;
	border-bottom: 1px solid #999!important;
}
.entry-content h3.blog-02::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	/* アイコンの幅 */
	height: 30px;
	/* アイコンの高さ */
	background-image: url('https://hakkenmonogatari.com/web2504/wp-content/uploads/2025/05/pen-icon.png');
	/* ここに実際の画像パスを入れてください */
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.entry-content h3.blog-03 {
	position: relative;
	display: inline-block;
	top: 0;
	padding: .25em 1em;
	width: 100%;
	text-align: center;
	border: none!important;
}
.entry-content h3.blog-03:before, .entry-content h3.blog-03:after {
	position: absolute;
	display: inline-block;
	top: 0;
	content: '';
	width: 1em;
	height: 100%;
}
.entry-content h3.blog-03:before {
	left: 0;
	border-top: solid 1px #333;
	border-bottom: solid 1px #333;
	border-left: solid 1px #333;
}
.entry-content h3.blog-03:after {
	right: 0;
	border-top: solid 1px #333;
	border-right: solid 1px #333;
	border-bottom: solid 1px #333;
}

.entry-content h3.blog-05 {
	position: relative;
	padding: 8px 50px 8px 50px; /* 左右にアイコン用のスペースを確保 */
	color: #333;
	display: block;
	box-sizing: border-box;
	max-width: 100%;
	text-align: center;
	margin: 24px;
	margin-inline: auto;
	border-left:none!important;
	border-right:none!important;
	border-top:none!important;
	border-bottom:none!important;
}

/* ペンのアイコン（左側） */
.entry-content h3.blog-05::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 22%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	background-image: url("https://hakkenmonogatari.com/web2504/wp-content/uploads/2025/06/paper-icon.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 1;
}

/* 紙のアイコン（右側） */
.entry-content h3.blog-05::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 22%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	background-image: url("https://hakkenmonogatari.com/web2504/wp-content/uploads/2025/06/pen-icon.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 1;
}

.entry-content h4 {
    font-size: 14px !important;
    letter-spacing: 0.1em !important;
    font-weight: 700 !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    padding:0 0 0 0;
    margin-bottom:30px;
    margin-top:40px;
}

.entry-content h4::before {
    content: none !important;
    display: none !important;
}

.entry-content h4::after {
    content: none !important;
    display: none !important;
}

/* ランダムクイズ */
.quiz-widget {
    background: linear-gradient(-5deg, #eeeeee 0%, #ffffff 100%);
//    border: 1px solid rgba(0, 0, 0, 0.08);
//    border-radius: 12px;
    padding: 25px;
    margin: 0px 0;
//    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    color: #2d3748;
    position: relative;
    overflow: hidden;
    min-height: 100px;
    transition: all 0.3s ease;
	margin-top:-30px;
}

.quiz-widget:hover {
 //   transform: translateY(-2px);
//    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.quiz-widget.loading {
    opacity: 0.7;
}

.quiz-content {
    position: relative;
    z-index: 2;
}

.quiz-title {
    margin: 0 0 3px 0;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    padding-bottom: 0px;
    color: #4a5568;
}

.quiz-question {
    font-size: 1.0em;
    line-height: 1.6;
    margin-bottom: 12px;
    text-align: center;
    font-weight:bold;
}

.quiz-link {
    text-align: center;
    margin-bottom: 20px;
}

.quiz-answer-link {
    background-color: #e53e3e;
    color: white;
    text-decoration: none;
    padding: 4px 24px;
    border-radius: 30px;
    display: inline-block;
    transition: all 0.3s ease;
    border: none;
    font-weight: bold;
    font-size: 0.8em;
    position: relative;
    overflow: hidden;
}

/* きらりと光が走るエフェクト */
.quiz-answer-link::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -100px;
    left: 0;
    width: 20px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    animation: sparkleAnimation 3.5s ease-in-out infinite;
}

@keyframes sparkleAnimation {
    0% { 
        transform: scale(0) rotate(45deg); 
        opacity: 0; 
    }
    85% { 
        transform: scale(0) rotate(45deg); 
        opacity: 0; 
    }
    88% { 
        transform: scale(2) rotate(45deg); 
        opacity: 0.6; 
    }
    92% { 
        transform: scale(8) rotate(45deg); 
        opacity: 0.8; 
    }
    100% { 
        transform: scale(25) rotate(45deg); 
        opacity: 0; 
    }
}

@-webkit-keyframes sparkleAnimation {
    0% { 
        -webkit-transform: scale(0) rotate(45deg); 
        opacity: 0; 
    }
    85% { 
        -webkit-transform: scale(0) rotate(45deg); 
        opacity: 0; 
    }
    88% { 
        -webkit-transform: scale(2) rotate(45deg); 
        opacity: 0.6; 
    }
    92% { 
        -webkit-transform: scale(8) rotate(45deg); 
        opacity: 0.8; 
    }
    100% { 
        -webkit-transform: scale(25) rotate(45deg); 
        opacity: 0; 
    }
}

.quiz-answer-link:hover {
    background-color: #d53c3c;
    color: white;
    text-decoration: none;
}

/* ホバー時は光の演出を一時停止 */
.quiz-answer-link:hover::before {
    animation-play-state: paused;
}

.quiz-timer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 0 0 12px 12px;
}

.timer-bar {
    height: 100%;
    background: linear-gradient(90deg, #a0aec0, #718096);
    border-radius: 0 0 12px 12px;
    width: 0%;
}

.quiz-loading {
    text-align: center;
    padding: 20px;
    opacity: 0.8;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .quiz-widget {
        margin: 15px 0;
        padding: 20px;
    }
    
    .quiz-title {
        font-size: 1.1em;
    }
    
    .quiz-question {
        font-size: 1em;
    }
    
    .quiz-answer-link {
        padding: 8px 16px;
        font-size: 0.9em;
    }
}



/* アニメーション効果 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quiz-content {
    animation: fadeInUp 0.5s ease-out;
}

/* アクセシビリティ対応 */
@media (prefers-reduced-motion: reduce) {
    .quiz-widget,
    .quiz-answer-link,
    .quiz-content,
    .timer-bar {
        transition: none;
        animation: none;
    }
}

/* 印刷時の対応 */
@media print {
    .quiz-widget {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        border: 2px solid #333;
    }
    
    .quiz-timer {
        display: none;
    }
}
/* レスポンシブ対応 */
@media (max-width: 480px) {
	.entry-content h3.blog-05 {
		padding: 8px 40px 8px 40px;
	}
	
	.entry-content h3.blog-05::before,
	.entry-content h3.blog-05::after {
		width: 36px;
		height: 36px;
	}
	
	.entry-content h3.blog-05::before {
		left: 18%;
	}
	
	.entry-content h3.blog-05::after {
		right: 18%;
	}
}
.entry-content .note {
	background-color: #fff;
	/* 背景色 */
	background-image: linear-gradient(180deg, #ccc 1px, transparent 1px);
	/* 罫線の色と太さ  */
	background-size: 100% 2.5em;
	/* 行の高さ */
	line-height: 2.5em;
	/* 文字の高さ */
	padding-bottom: 1px;
	/* 最終行の下にも罫線を引く */
}
.entry-content a::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url('https://hakkenmonogatari.com/web2504/wp-content/uploads/2025/05/doc-icon.png');
	/* ここに実際の画像パスを入れてください */
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 5px;
	/* アイコンとテキストの間隔 */
}
.entry-content a.no-icon::before {
	content: "";
	display: inline-block;
	width: 0px;
	height: 0px;
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-right: 0px;
	/* アイコンとテキストの間隔 */
}
.is-style-clip-box {
	background-color: #fffef9;
}
.entry-content .is-style-clip-box h3 {
	font-family: 'Noto Serif JP', serif;
	letter-spacing: 0.1em;
	padding: 0.5em 0;
	position: relative;
	border: 0px;
	border-bottom: 1px solid #333;
}
.entry-content h5 {
	margin: 5px 0px;
	font-family: 'Noto Serif JP', serif;
	letter-spacing: 0.1em;
	font-weight: 400;
	font-size: 1em;
}

.eye-catch {
	width: 320px;
	height: 320px;
	max-width: 320px;
	max-height: 320px;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	background-color: #f8f9fa;
	/* 上品な薄いグレーの背景 */
}
.eye-catch img {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: contain;
	/* 画像全体を表示 */
	object-position: center;
	/* 画像を中央に配置 */
}
.cat-label, .date-tags {
	display: none;
}
#breadcrumb {
	margin-top: -10px;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

@media screen and (min-width: 835px) {
	//	article.products {padding:30px 60px;}
}
/*1400px以下*/

@media screen and (max-width: 1400px) {
	img.hero-graphic {
		height: auto;
	}
	.hero-title {
		font-size: clamp(0.9rem, calc(16px + 0.4vw), 1.8rem);
		margin-bottom: 1.5rem;
		line-height: 1.6;
	}
}
/*1023px以下*/

@media screen and (max-width: 1023px) {
	
	.quiz-widget {margin-top:-30px;}
	img.site-logo-image {
		visibility: hidden;
	}
	.logo-menu-button.menu-button {
		background-image: url('https://hakkenmonogatari.com/web2504/wp-content/uploads/2025/05/head-logo5-sp.png');
		background-size: auto 50px;
		background-position: center;
		background-repeat: no-repeat;
	}
	.entry-content h3 {
		font-size: 18px;
	}
	.hero {
		/* 縦幅を自動調整 */
		min-height: 600px;
		height: auto;
		align-items: flex-start;
		padding: 50px 0 50px 0;
		/* 上下に余白を追加 */
	}
	img.hero-graphic {
		height: auto;
		max-width: 90%;
		/* 65% → 90% に拡大 */
	}
	img.catch-graphic {
		height: auto;
		max-width: 100%;

	}
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
		width: 100%;
	}
	.hero-grid01 {
		grid-column: 1 / -1 !important;
		margin-bottom: 40px;
		/* 横幅を統一 */
		margin-left: auto;
		margin-right: auto;
		max-width: 600px;
		width: 90%;
	}
	.hero-grid02 {
		grid-column: 1 / -1 !important;
		/* 画像表示用に横幅を少し拡大 */
		margin-left: auto;
		margin-right: auto;
		max-width: 650px;
		/* 600px → 650px */
		width: 95%;
		/* 90% → 95% */
	}
	.content-image, .content-text {
		grid-column: span 12;
	}
	.testimonials {
		padding: 2rem;
	}
	#navi .navi-in li {
		padding: 50px 0;
		margin-bottom: 50px!important;
	}
	#navi .navi-in a:hover {
		background-color: rgb(255 255 255 / 0)!important;
		color: var(--accent-color)!important;
	}
	.hero {
		margin-top: -50px;
	}
}
/*834px以下*/

@media screen and (max-width: 834px) {
	/*必要ならばここにコードを書く*/
	.hero {
		/* 縦幅を自動調整 */
		min-height: 500px;
		height: auto;
		align-items: flex-start;
		padding: 80px 0 50px 0;
	}
	img.hero-graphic {
		height: auto;
		max-width: 95%;
		/* 75% → 95% に拡大 */
	}
	img.catch-graphic {
		height: auto;
		max-width: 100%;

	}
	.hero-grid01 {
		grid-column: 1 / -1 !important;
		margin-bottom: 20px;
		/* 横幅を統一 */
		margin-left: auto;
		margin-right: auto;
		max-width: 600px;
		width: 90%;
	}
	.hero-grid02 {
		grid-column: 1 / -1 !important;
		/* 画像表示用に横幅を少し拡大 */
		margin-left: auto;
		margin-right: auto;
		max-width: 650px;
		/* 600px → 650px */
		width: 95%;
		/* 90% → 95% */
	}
	.top-letter {
		grid-column: 1 / span 12!important;
	}
	.hero-title {
		font-size: clamp(0.95rem, calc(15px + 0.6vw), 1.5rem);
		line-height: 1.7;
		margin-bottom: 1rem;
	}
	.section-title {
		font-size: 1.75rem;
	}
	.feature {
		padding: 1.5rem;
	}
	.content-title {
		font-size: 1.75rem;
	}
	.cta-title {
		font-size: 1.5rem;
	}
	/* すべてのモバイルメニュー要素に適用 */
	#navi .navi-in>.menu-mobile>li {
		margin-bottom: 15px !important;
		padding-bottom: 15px !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
	}
	/* 最後の要素の下線を消す */
	#navi .navi-in>.menu-mobile>li:last-child {
		margin-bottom: 0 !important;
		border-bottom: none !important;
	}
	/* ご注文ボタンとギフト券引換ボタンの間にさらに余白を追加 */
	#menu-item-80.nav-cta {
		margin-bottom: 20px !important;
		position: relative !important;
	}
	/* 疑似要素を使って物理的なスペースを作る */
	#menu-item-80.nav-cta::after {
		content: "" !important;
		display: block !important;
		height: 20px !important;
		width: 100% !important;
		position: absolute !important;
		bottom: -20px !important;
		left: 0 !important;
	}
	/* モバイルメニューの特定スタイルをリセット */
	.mobile-menu-buttons .menu-button, .navi-menu-content.menu-content {
		padding-bottom: 10px !important;
	}
	/* 強制的な空白の挿入 */
	.nav-cta+li.nav-gift {
		margin-top: 10px !important;
	}
}
/*480px以下*/

@media screen and (max-width: 480px) {
	/*必要ならばここにコードを書く*/
	.sp-br {
		display: block;
	}
	.sp-space {
		padding-left: 10px;
	}
	img.hero-graphic, img.catch-graphic {
		height: auto;
		max-width: 100%;
		/* 85% → 100% に拡大 */
	}
	.hero {
		/* 縦幅を自動調整 */
		min-height: 300px;
		height: auto;
		align-items: flex-start;
		padding: 60px 0 30px 0;
		/* 下paddingを増やして余白確保 */
	}
	.hero-grid01 {
		grid-column: 1 / -1 !important;
		margin-bottom: 0px;
		/* 横幅を統一 */
		margin-left: auto;
		margin-right: auto;
		max-width: 600px;
		width: 90%;
	}
	.hero-grid02 {
		grid-column: 1 / -1 !important;
		margin-top: 30px;
		margin-bottom: 10px;
		/* 適切な下余白に変更 */
		/* grid01と同じ横幅に統一 */
		margin-left: auto;
		margin-right: auto;
		max-width: 600px;
		width: 90%;
	}
	.hero-subtitle {
		font-size: 0.95rem;
		margin-bottom: 0.5rem;
		opacity: 0.9;
	}
	.hero-title {
		font-size: clamp(0.85rem, calc(14px + 0.7vw), 1.3rem);
		line-height: 1.7;
		margin-bottom: 0.5rem;
	}
	.hero-description {
		font-size: 0.8rem;
		margin-top: 0.8rem;
	}
	.section {
		padding: 3rem 0;
	}
	.section-title {
		font-size: 1.5rem;
	}
	.testimonials {
		padding: 1.5rem;
	}
	.testimonial-content {
		font-size: 1.125rem;
	}
	.cta {
		padding: 3rem 1.5rem;
	}
	.cta-title {
		font-size: 1.5rem;
	}
	/* すべてのモバイルメニュー要素に適用 */
	#navi .navi-in>.menu-mobile>li {
		margin-bottom: 15px !important;
		padding-bottom: 15px !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
	}
	/* 最後の要素の下線を消す */
	#navi .navi-in>.menu-mobile>li:last-child {
		margin-bottom: 0 !important;
		border-bottom: none !important;
	}
	/* ご注文ボタンとギフト券引換ボタンの間にさらに余白を追加 */
	#menu-item-80.nav-cta {
		margin-bottom: 20px !important;
		position: relative !important;
	}
	/* 疑似要素を使って物理的なスペースを作る */
	#menu-item-80.nav-cta::after {
		content: "" !important;
		display: block !important;
		height: 20px !important;
		width: 100% !important;
		position: absolute !important;
		bottom: -20px !important;
		left: 0 !important;
	}
	/* モバイルメニューの特定スタイルをリセット */
	.mobile-menu-buttons .menu-button, .navi-menu-content.menu-content {
		padding-bottom: 10px !important;
	}
	/* 強制的な空白の挿入 */
	.nav-cta+li.nav-gift {
		margin-top: 10px !important;
	}
}

/* Contact Form 7 エラー時のレイアウト修正 */

/* エラー状態の時のフォームレイアウトを縦並びに変更 */
.footer-form .wpcf7-form.invalid {
	flex-direction: column !important;
}

/* エラー状態でも入力部分は横並びを維持 */
.footer-form .wpcf7-form.invalid p {
	display: flex !important;
	margin: 0 0 0.5rem 0 !important;
	width: 100% !important;
}

/* エラーメッセージを確実に下の行に配置 */
.footer-form .wpcf7-form.invalid .wpcf7-response-output {
	order: 2 !important;
	margin-top: 0.5rem !important;
	width: 100% !important;
	clear: both !important;
	flex-basis: 100% !important;
}

/* 入力フィールドの幅を維持 */
.footer-form .wpcf7-form.invalid .wpcf7-form-control-wrap {
	flex: 1 !important;
	width: 100% !important;
	max-width: 300px !important;
	display: block !important;
}

/* 送信ボタンの幅を固定 */
.footer-form .wpcf7-form.invalid .wpcf7-submit {
	width: auto !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
}

/* 初期状態ではレスポンス出力を非表示 */
.footer-form .wpcf7-response-output {
	display: none !important;
}

/* エラー状態でのみレスポンス出力を表示 */
.footer-form .wpcf7-form.invalid .wpcf7-response-output,
.footer-form .wpcf7-form.unaccepted .wpcf7-response-output,
.footer-form .wpcf7-form.sent .wpcf7-response-output {
	display: block !important;
	width: 100% !important;
	margin-top: 0.5rem !important;
	padding: 0.5rem !important;
	font-size: 0.875rem !important;
	border-radius: 4px !important;
	clear: both !important;
	box-sizing: border-box !important;
}

/* バリデーションエラーの入力フィールドスタイル調整 */
.footer-form .wpcf7-not-valid {
	border-color: #f88 !important;
}

/* バリデーションエラーチップのスタイル調整 */
.footer-form .wpcf7-not-valid-tip {
	color: #f88 !important;
	font-size: 12px !important;
	display: block !important;
	margin-top: 2px !important;
	position: absolute !important;
	z-index: 10 !important;
	background-color: rgba(255, 255, 255, 0.95) !important;
	padding: 2px 5px !important;
	border-radius: 3px !important;
	white-space: nowrap !important;
}

/* 入力フィールドのラッパーを相対位置に設定 */
.footer-form .wpcf7-form-control-wrap {
	position: relative !important;
	flex: 1 !important;
	width: 100% !important;
	max-width: 300px !important;
	display: block !important;
}

/* エラー状態でも入力フィールドの高さを固定 */
.footer-form .wpcf7-email {
	width: 100% !important;
	max-width: 300px !important;
	box-sizing: border-box !important;
	padding: 0.75rem !important;
	border: none !important;
	border-radius: 4px 0 0 4px !important;
	outline: none !important;
	height: auto !important;
	min-height: 48px !important; /* 最小高さを固定 */
}

/* エラー状態の入力フィールドでも高さを維持 */
.footer-form .wpcf7-not-valid {
	border: 1px solid #f88 !important;
	min-height: 48px !important; /* 高さを固定 */
}

/* フォーム全体のレイアウト安定化 */
.footer-form .wpcf7-form p {
	display: flex !important;
	align-items: stretch !important; /* 縦方向を揃える */
	margin: 0 !important;
	width: 100% !important;
}

/* お知らせセクション全体 */
.news-sec {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  margin-top:30px;
  margin-bottom:30px;
}

/* 各ニュース項目 */
.news-set {
  display: flex;
  align-items: flex-start;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  padding: 12px 0;
  margin-bottom: -1px; /* ボーダーの重複を防ぐ */
}

/* 最初のニュース項目以外は上のボーダーを非表示 */
.news-set + .news-set {
  border-top: none;
}

/* 日付部分 */
.news-date {
  flex-shrink: 0;
  width: 120px;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  margin-right: 16px;
}

/* 本文部分 */
.news-body {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}

.news-body p {
  margin: 0;
  padding: 0;
}

/* スマートフォン表示 */
@media (max-width: 768px) {
  .news-sec {
    padding: 0 16px;
  }
  
  .news-set {
    flex-direction: column;
    padding: 16px 0;
  }
  
  .news-date {
    width: 100%;
    margin-right: 0;
    margin-bottom: 8px;
    font-size: 13px;
  }
  
  .news-body {
    font-size: 14px;
  }
}

#privacy dd {padding-left:0px;}
#privacy ul, #privacy li {
padding-left:0px;
list-style-type:    none;
}