* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html {
	font-size: 62.5%;
}
#main {
	font-family: 'Noto Sans JP', serif;
	color: #4d4d4d;
	width: 100%;
	position: relative;
	line-height: 2;
}
h2 img {
	display: block;
	text-align: center;
	padding-top: 8.5rem;
	margin: 0 auto 7rem;
}
/*ナビゲーション*/
.nav-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	background-color: #231815;
}
.nav-content {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	height: 60px;
	align-items: center;
	justify-content: flex-end;
}

.nav-list {
	font-family: 'Zen Maru Gothic', serif;
	font-size: 1.3rem;
	list-style: none;
	display: flex;
	gap: 20px;
	margin-left: 20px;
}
.nav-list .nav-item a {
	color: #ffffff;
	text-decoration: none;
}
.nav-item a:hover {
	text-decoration: none;
}
.hamburger {
	display: none;
	background: none;
	border: none;
	outline: none;
	cursor: pointer;
	z-index: 1000;
	width: 44px;
	height: 44px;
	position: relative;
}

/* ボタン内の三本線 */
.hamburger span {
	display: block;
	position: absolute;
	left: 10px;
	width: 24px;
	height: 2px;
	background-color: #fff;
	transition: all 0.4s;
}
.hamburger span:nth-child(1) {
	top: 13px;
}
.hamburger span:nth-child(2) {
	top: 21px;
}
.hamburger span:nth-child(3) {
	top: 29px;
}
/*ファーストビュー*/
#fv {
	width: 100%;
	background-color: #5ed45e;
	overflow: hidden;
	padding-top: 8rem;
}
.fv-content {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
}
.fv-content picture img {
	width: 100%;
	height: auto;
	display: block;
}
.fv-btn {
	position: absolute;
	width: 240px;
	bottom: 10%;
	left: 28.5%;
}

/*サービスについて*/
#service {
	font-family: 'Zen Maru Gothic', serif;
	background-color: #e2f7e2;
	padding-bottom: 8.5rem;
}
.service-content {
	max-width: 1000px;
	margin: 0 auto;
}
.title{
	display: flex;
	align-items: center;
    justify-content: center;
	padding: 7rem 0 5rem;
	gap: 1rem;
}
.title h2{
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 900;
	font-size: 4.3rem;
	color: #5ed45e;
	text-align: center;
	line-height: 1.3;
    margin: 0;
}
.title picture img {
  display: block;
  width: auto; 
  height: auto;
}
.service-content h3 {
	font-size: 3rem;
	font-weight: 800;
	text-align: center;
	line-height: 1.8;
	padding-bottom: 5rem;
}
.color-text {
	color: #5ed45e;
}
.service-content h4 {
	font-size: 2.2rem;
	text-align: center;
	line-height: 2;
	padding-bottom: 5rem;
}
.service_under {
	background: linear-gradient(transparent 60%, #ffff00 60%);
}
.three-points {
	display: block;
	text-align: center;
	padding-bottom: 7rem;
}
.service-box {
	background-color: #ffffff;
	border-radius: 2rem;
	padding: 6rem;
	display: flex;
	gap: 6rem;
}
.left-content {
	flex: 1;
}
.text-img img {
	width: 100%;
	height: auto;
	margin-bottom: 3.5rem;
}
.service-img img {
	width: 100%;
	height: auto;
	border-radius: 20px;
}
.right-content {
	flex: 1;
}
.right-content p {
	font-size: 2rem;
}
.right-content ul li {
	font-size: 2.4rem;
}

#issue {
	background-color: #e2e2e2;
	padding-bottom: 8.5rem;
}
.issue-container {
	max-width: 1000px;
	margin: 0 auto;
}
.issue-content01 {
	display: flex;
	gap: 9.5rem;
	width: 900px;
	margin: 0 auto;
}
.issue-left {
	flex: 1;
}
.issue-left ul li {
	position: relative;
	font-size: 2.2rem;
	line-height: 2.3;
	padding-left: 3.5rem;
}
.issue-left ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	border: 3px solid #fff;
}
.issue-left ul li span {
	color: #5ed45e;
	font-weight: 900;
	background: linear-gradient(transparent 80%, #fff 70%);
}
.issue-right {
	display: flex;
	flex-direction: column;
}
.issue-text img {
	padding-bottom: 4rem;
}
.card-container {
	max-width: 1000px;
	display: flex;
	justify-content: space-between;
	gap: 3.5rem;
	padding-bottom: 7rem;
}
.card {
	flex: 1;
	background-color: #ffffff;
	border-radius: 2rem;
	overflow: hidden;
	height: 210px;
}
.card-header {
	background-color: #3e3a39;
	color: #ffffff;
	font-size: 2.4rem;
	font-weight: 700;
	text-align: center;
}
.card-body p {
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.8;
}
.card-body p span {
	color: #5ed45e;
}
.red-box {
	width: 800px;
	height: 200px;
	background-color: #ffe8ed;
	padding: 3rem 7.2rem;
	border-radius: 2rem;
	border: 2px solid #ec5b5b;
	margin: 0 auto;
}
.red-box p {
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.8;
	text-align: center;
}
.red-box p span {
	color: #ec5b5b;
	font-weight: 800;
	background: linear-gradient(transparent 80%, #fff 70%);
}

#solution {
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
	padding-bottom: 19rem;
}
.solution-title {
	display: block;
	text-align: center;
	padding-bottom: 2.2rem;
}
.solution-title img {
	max-width: 195px;
	height: auto;
}
.solution-container {
	position: relative;
}
.solution-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4.5rem 3rem;
}
.solution-grid picture img {
	width: 100%;
	height: auto;
	display: block;
}
.solution-chara {
	position: absolute;
	right: -65px;
	bottom: -100px;
	width: 185px;
	z-index: 10;
}

.solution-chara img {
	width: 100%;
	height: auto;
}
/*オカリクが選ばれる理由*/
#reason {
	background-color: #e2f7e2;
	padding-bottom: 8.5rem;
}
.reason-content {
	max-width: 1000px;
	margin: 0 auto;
}
.features-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6rem 5.7rem;
}
.feature-card {
	position: relative;
	padding-top: 2rem;
}
.card-content {
	background-color: #ffffff;
	border-radius: 2rem;
	overflow: hidden;
}
.card-reason {
	background-color: #5ed45e;
	color: #ffffff;
	font-size: 2.4rem;
	font-weight: 800;
	text-align: center;
	padding: 2.2rem 2rem;
}
.card-text {
	font-size: 1.8rem;
	font-weight: 700;
	padding: 2.5rem 2rem;
}
.card-text p {
	text-align: center;
}
.number-icon {
	position: absolute;
	top: -10px;
	left: 20px;
	width: 50px;
	height: 50px;
	z-index: 10;
}

.number-icon img {
	width: 100%;
	height: auto;
	display: block;
}

/*強み*/
#strength {
	max-width: 1000px;
	margin: 0 auto;
	padding-bottom: 8.5rem;
	font-family: 'Zen Maru Gothic', serif;
}
.intro {
	display: flex;
	gap: 3.5rem;
	align-items: center;
	padding-bottom: 8rem;
}
.video {
	flex: 1;
	aspect-ratio: 16 / 9;
}
.video img{
	width: 500px;
}
.intro-text {
	flex: 1;
	font-size: 1.8rem;
	line-height: 2.2;
	text-align: justify;
}
.strength-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
.strength-card {
	background-color: #5ed45e;
	border-radius: 2rem;
	padding: 1.8rem 2.7rem;
	text-align: center;
}
.strength-title{
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 900;
	color: #ffffff;
	font-size: 3.6rem;
	text-align: center;
	margin-bottom: 2rem;
	}
.strength-card img{
	height: 100px;
}
.strength-text {
	font-size: 1.8rem;
	text-align: justify;
	margin-top: 3rem;
}
/*選べるプラン*/
#plan {
	background-color: #e2f7e2;
	padding-bottom: 8.5rem;
}
.plan-container {
	max-width: 100%;
	margin: 0 auto;
	padding: 0 2rem;
}

/* タブボタン */
.plan-tabs {
	display: flex;
	flex-wrap: wrap;
	max-width: 550px;
	justify-content: center;
	list-style: none;
	margin: 0 auto 1rem;
	gap: 15px 10px;
}
.tab-item {
	width: calc(50% - 10px); /* 2列並べるための計算 */
	opacity: 1;
	transition: 0.3s;
}
.tab-item.active {
	opacity: 1;
}

/* カードの基本設計 */
.plan-slider,
.slick-list,
.slick-track {
	padding-top: 3rem;
}
.slick-initialized .slick-slide {
	display: block;
	margin: 0 10px;
}
.slick-track {
	display: flex !important;
	justify-content: center;
}
.slick-list {
	overflow: unset;
}
.slick-slide {
	height: auto !important;
	display: flex !important;
}
.plan-slider {
	max-width: 1366px;
	margin: 0 auto;
}
.plan-card-wrapper {
	display: flex;
	flex-direction: column;
	height: auto;
	background-color: #e1e1e1;
	border-radius: 2rem;
	overflow: visible;
}
.plan-card {
	border-radius: 2rem 2rem 0 0;
	overflow: visible;
	background: #5ed45e;
	padding: 2.35rem 1rem;
	position: relative;
}
.height {
	padding-top: 3.5rem;
	padding-bottom: 3.2rem;
}
.plan-name h3 {
	text-align: center;
}
.plan-name h3 img {
	margin: 2.5rem auto 0;
	height: 55px;
}
.plan-name01 img {
	height: 35px !important;
}
.fukidashi {
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	width: 75%;
}
.card-detail {
	padding: 1.5rem 2rem 0;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.price {
	font-size: 2rem;
	font-weight: 800;
	text-align: center;
	margin-bottom: -1rem;
}
.price span {
	font-size: 3.5rem;
	color: #5ed45e;
}
.duration {
	width: 180px;
	margin: 0 auto;
	text-align: center;
	font-size: 2rem;
	font-weight: 800;
	border-top: solid 2px #5ed45e;
	padding-top: 0.5rem;
}
.summary-box {
	width: 100%;
	background-color: #ffffff;
	border-radius: 2rem;
	margin: 2.5rem auto;
	padding: 1.2rem 2.5rem;
}
.summary-title {
	text-align: center;
}
.summary-title img {
	margin: 0 auto;
	padding-bottom: 1rem;
	width: 200px;
}
.summary-text {
	font-size: clamp(1.3rem, 1vw, 1.5rem);
	text-align: justify;
	line-height: 1.8;
}
.summary-text span {
	font-weight: 800;
}
/* 詳細エリアの制御 */
.detail-content {
	display: none; /* JSで開閉 */
	background: #e1e1e1;
	/*width: 250px;*/
	margin: 0 auto;
}
.detail-list li {
	font-size: clamp(1.3rem, 1.1vw, 1.6rem);
	font-weight: 800;
}
.detail-more {
    list-style-type: none; /* デフォルトの黒丸を一度消す */
    margin-bottom: 2rem;
    padding-left: 1.5em;   /* 全体を右に寄せる（ここで位置を調整） */
}
.detail-more li {
    font-size: clamp(1.3rem, 1.1vw, 1.6rem);
    font-weight: 400;
    position: relative;
    text-indent: -1em;      /* 1行目だけ左に戻して黒丸のスペースを作る */
}
/* 疑似要素で黒丸を自作すると制御しやすくなります */
.detail-more li::before {
    content: "•";           /* 黒丸を表示 */
    padding-right: 0.5em;  /* 丸と文字の間の距離 */
    font-weight: bold;
}
.optional-box {
	width: 100%;
	background-color: #ffffff;
	border-radius: 2rem;
	margin: 3rem auto;
	padding: 1.7rem 2rem;
}
.optional-title {
	text-align: center;
}
.optional-title img {
	width: 250px;
	margin: 0 auto;
	padding-bottom: 1rem;
}
.addition {
    list-style-type: none; /* デフォルトの黒丸を一度消す */
    padding-left: 1.5em;   /* 全体を右に寄せる（ここで位置を調整） */
}
.addition li {
    font-size: clamp(1.3rem, 1vw, 1.6rem);
    font-weight: 400;
    position: relative;
    text-indent: -1em;      /* 1行目だけ左に戻して黒丸のスペースを作る */
}
/* 疑似要素で黒丸を自作すると制御しやすくなります */
.addition li::before {
    content: "•";           /* 黒丸を表示 */
    padding-right: 0.5em;  /* 丸と文字の間の距離 */
    font-weight: bold;
}
/* ボタン共通設定 */
.btn-toggle {
	cursor: pointer;
	text-align: center;
	margin: 2rem auto; /* 上下に余白、左右は中央 */
	margin-top: auto;
	width: 100%; /* 一旦幅を100%にして */
}
.btn-toggle picture,
.btn-toggle img {
	display: inline-block; /* 中央寄せが効くようにする */
	margin: 0 auto;
	max-width: 125px;
	height: auto;
}
/* closeボタンが show() された時も中央を維持 */
.btn-toggle.close {
	display: none; /* JSで制御されるが初期は非表示 */
	opacity: 1;
}
/* slickの矢印カスタマイズ */
/* 矢印共通設定 */
.custom-arrow {
	z-index: 10;
	text-indent: -9999px;
}
/* 左矢印の設定 */
.slick-prev.custom-arrow {
	width: 50px;
	height: 50px;
	left: -20px;
	top: 280px;
	background: url(../img/okarec/arrow_prev.png) no-repeat center center !important;
	background-size: 50px !important;
}
/* 右矢印の設定 */
.slick-next.custom-arrow {
	width: 50px;
	height: 50px;
	right: -20px;
	top: 280px;
	background: url(../img/okarec/arrow_next.png) no-repeat center center !important;
	background-size: 50px !important;
}
.plan-contact-btn {
	width: 540px;
	display: block;
    margin: 0 auto;
	margin-top: 8rem;
}
@media screen and (min-width: 1001px) {
	.plan-slider {
		display: flex; /* カルーセルを解除して横並びにする */
		justify-content: center;
		gap: 20px;
	}
	.plan-card-wrapper {
		flex: 0 0 calc(25% - 15px);
		max-width: calc(25% - 15px);
	}
	.plan-tabs,
	.custom-arrow {
		display: none; /* PCでは不要なものを消す */
	}
}

/*動画活用事例*/
.movie-container {
	max-width: 1000px;
	margin: 0 auto;
	font-family: 'Zen Maru Gothic', serif;
	padding-bottom: 8.5rem;
}
.youtube-movie {
	display: flex;
	gap: 6rem;
	justify-content: space-between;
}
.movie-content {
	flex: 1;
}
.movie-title {
	background-color: #5ed45e;
	color: #ffffff;
	font-size: 2.4rem;
	font-weight: 800;
	border-radius: 1rem;
	width: 310px;
	height: 52px;
	text-align: center;
	margin: 0 auto;
	margin-bottom: 3rem;
}
.movie-text {
	font-size: 2rem;
	text-align: center;
	margin-bottom: 3rem;
}
.short-video {
    width: auto;
    height: 500px;
    overflow: hidden;
    margin: 0 auto;
    position: relative; /* ボタンの基準点 */
    cursor: pointer;
	text-align: center;
}

.short-video video {
    height: 100%; /* 高さいっぱいに広げる */
    width: 100%;
}

/* 再生ボタンのデザイン（三角形） */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

/* 再生マーク（三角形） */
.play-button::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 25px;
    border-color: transparent transparent transparent #fff;
    margin-left: 5px; /* 真ん中に見えるよう微調整 */
}

/* 再生中はボタンを隠す */
.play-button.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.short-content {
	display: flex;
	gap: 4rem;
	justify-content: space-around;
	padding-top: 3rem;
}
.sns-btn {
	width: 250px;
	height: auto;
	padding-top: 5.5rem;
	margin: 0 auto;
}

/*スタッフ紹介*/
#staff {
	background-color: #e2f7e2;
	padding-bottom: 8.5rem;
	font-family: 'Zen Maru Gothic', serif;
}
.staff-container {
	max-width: 1000px;
	margin: 0 auto;
}
.staff-header {
	text-align: center;
	margin-bottom: 6rem;
}
.staff-header img {
	max-width: 100%;
	height: auto;
}
.staff-grid {
	display: flex;
	justify-content: space-between;
	gap: 12rem;
	flex-wrap: wrap;
}
.staff-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.staff-item img {
	width: 100%;
}
.staff-text {
	font-size: 1.8rem;
	margin-top: 2rem;
	text-align: justify;
	max-width: 250px;
}

/*導入までの流れ*/
#flow {
	background-color: #e2e2e2;
	padding-bottom: 8.5rem;
	font-family: 'Zen Maru Gothic', serif;
}
.flow-container {
	max-width: 1000px;
	margin: 0 auto;
}
.flow-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 650px;
    margin: 0 auto;
}
.flow-item {
	display: flex;
	align-items: flex-start;
	width: 100%;
	max-width: 710px;
	margin: 0 auto;
}
.flow-step {
	flex-shrink: 0;
	width: 50px;
	margin-right: 20px;
}
.flow-step img {
	width: 100%;
	height: auto;
}
.flow-content {
    text-align: left;
}
.flow-content h4 {
	font-size: 2.6rem;
	font-weight: 800;
	margin-top: 7px;
	margin-bottom: 15px;
}
.flow-content p {
	font-size: 2rem;
	line-height: 1.8;
}
.flow-content p span {
	font-size: 1.8rem;
}
.flow-arrow {
	width: 110px;
	margin: 3rem 0;
}
.flow-arrow img {
	width: 100%;
	height: auto;
}

/*よくある質問*/
#faq {
	background-color: #e2f7e2;
	padding-bottom: 5.5rem;
	font-family: 'Zen Maru Gothic', serif;
}

/* 全体コンテナのスタイル */
.faq_content {
	max-width: 820px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
/* 各リスト項目の余白 */
.card00 {
	margin-bottom: 3rem;
}
/* アコーディオンの外枠 */
.accordion-003 {
	background-color: #fff;
	border: 4px solid #9ce49e;
	border-radius: 2rem;
	overflow: hidden;
}
/* 質問部分（summary）のスタイル */
.accordion-003 summary {
	display: flex;
	width: 757px;
	align-items: center;
	position: relative;
	margin: 0 auto;
	padding: 24px 60px 24px 80px; /* アイコン分と右側の矢印分の余白 */
	font-size: 2rem;
	font-weight: 800;
	cursor: pointer;
	list-style: none; /* デフォルトの三角形を消す */
}

.accordion-003 summary::-webkit-details-marker {
	display: none;
}
/* Qアイコンの配置 */
.accordion-003 summary::before {
	content: '';
	position: absolute;
	left: 15px;
	width: 50px;
	height: 50px;
	background-image: url(../img/okarec/faq_q.png); /* Qアイコンのパス */
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* 共通設定：＋のベースとなる横棒 */
.accordion-003 summary::after {
	content: '';
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	width: 35px;
	height: 3px;
	background-color: #57d491;
	transition: transform 0.3s; /* 動きを滑らかに */
}

.accordion-003 summary .icon-plus {
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	width: 35px;
	height: 3px;
	background-color: #57d491;
	transition: transform 0.3s;
	/* 縦棒にするために90度回転させる */
	transform: translateY(-50%) rotate(90deg);
}

/* 開いている時（マイナスにする）の設定 */
.accordion-003[open] summary .icon-plus {
	transform: translateY(-50%) rotate(0deg);
	opacity: 0;
}

/* 回答部分（p）のスタイル */
.accordion-003 p {
	position: relative;
	width: 757px;
	font-size: 2rem;
	margin: 0 auto;
	padding: 24px 24px 24px 80px; /* Qアイコンと同じ位置に合わせる */
	border-top: 1px solid #5ed45e; /* 開いた時の区切り線 */
	line-height: 1.8;
}
/* Aアイコンの配置 */
.accordion-003 p::before {
	content: '';
	position: absolute;
	left: 15px;
	top: 18px;
	width: 50px;
	height: 50px;
	background-image: url(../img/okarec/faq_a.png); /* Aアイコンのパス */
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
/* リンクのスタイル（もしあれば） */
.accordion-003 a {
	color: #007bff;
	text-decoration: underline;
}
/* 開いている時の挙動（必要に応じて） */
.accordion-003[open] summary {
	/* 開いた時の質問部分の背景色などを変えたい場合はここ */
}
/*お問い合わせ*/
#contact {
	background-color: #e2e2e2;
	padding-bottom: 8.5rem;
}
.contact-container {
	max-width: 1000px;
	margin: 0 auto;
}
.contact-flex {
	display: flex;
	gap: 3.8rem;
	justify-content: space-between;
}
.contact-card {
	background-color: #ffffff;
	border-radius: 2rem;
	padding: 3.5rem 1.6rem;
	flex: 1;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.card-lead {
	font-size: 2.2rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.8;
	padding-bottom: 1.5rem;
}
.card-subtext {
	font-size: 1.8rem;
	text-align: center;
	padding-bottom: 2rem;
}
.card-lead-tel {
	font-size: 2.4rem;
	font-weight: 800;
	text-align: center;
	padding-bottom: 1rem;
}
.card-subtext-tel {
	font-size: 1.8rem;
	text-align: center;
	padding-bottom: 1rem;
}
.card-tantou {
	font-size: 2.2rem;
	text-align: center;
}
.contact-btn,
.tel-number {
	margin: 0 auto;
}

.contact-btn img,
.tel-number img {
	max-width: 100%;
	height: auto;
}
.tel-number img {
	padding-bottom: 1rem;
}
.pcbr {
	display: block;
}
.spbr {
	display: none;
}

/*フッター*/
footer {
	background: #000 !important;
	padding: 2rem 3rem !important;
}
footer a {
	display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  font-size: 4rem;
  line-height: 1;
  gap: 1rem;
  color: #fff !important;
  text-decoration: none !important;
}
footer span{
	font-size: 2rem;
}
footer a:hover {
  text-decoration: none !important;
}
footer a img {
	height: 1.5em;
	width: auto;
	vertical-align: middle;
}
footer .copyright {
	padding: 0;
	background: transparent !important;
  	line-height: 1 !important;
  	height: auto !important;
  	margin-top: 2rem;
}
@media screen and (max-width: 1000px) {
	.nav-container{
		background-color:  rgba(255,0,0,0);
	}
	/*ハンバーガーメニュー*/
	.hamburger {
		display: block; /* ボタンを表示 */
		right: 10px;
		background-color: #231815;
		border-radius: 5px;
    }
	#fv {
    	padding-top: 0;
	}
	.nav-list {
		/* メニューを画面全体に広げる */
		position: fixed;
		top: 0;
		right: -100%; /* 初期状態は画面の外 */
		width: 100%;
		height: 100dvh;
		background-color: rgba(35, 24, 21, 0.95); /* 背景色 */
		flex-direction: column; /* 縦並び */
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		gap: 30px;
		transition: all 0.4s; /* スライドのアニメーション */
	}

	/* メニューが開いている状態 */
	.nav-list.is-open {
		right: 0;
	}

	/* ボタンがバツ印に変わるアニメーション */
	.hamburger.is-open span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}
	.hamburger.is-open span:nth-child(2) {
		opacity: 0;
	}
	.hamburger.is-open span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}

	.issue-content01 {
		width: 100%;
		max-width: 100%;
		gap: 6rem;
		flex-direction: column;
		align-items: center;
	}
	.card-container {
		flex-direction: column;
		gap: 2rem;
		padding-bottom: 3.3rem;
		width: 90%;
		margin: 0 auto;
	}
	.card{
		width: 500px;
		margin: 0 auto;
	}
	.red-box {
		width: 680px;
    	padding: 3rem 3rem;
	}
    .solution-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
		width: 65%;
        margin: 0 auto;
    }
	.solution-chara {
        right: 85px; 
        bottom: -85px; 
    }
	.features-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
		width: 70%;
        margin: 0 auto;
    }
	.intro {
        flex-direction: column;
        padding-bottom: 3rem;
        gap: 2.5rem;
    }
	.intro-text{
		width: 80%;
	}
    .staff-grid {
        gap: 4rem 2rem; /* 上下の余白を4rem、左右を2remに調整（デザインに合わせて） */
        justify-content: center;
    }
    /* 1枚目：横幅100%にして1行独占 */
    .staff-item:nth-child(1) {
        flex: 0 0 100%;
    }
    /* 2枚目・3枚目：横幅を半分にする（gap分を引く計算） */
    .staff-item:nth-child(n+2) {
        flex: 0 0 calc(50% - 1rem); 
    }
	.faq_content {
    max-width: 770px;
    }
	.contact-card {
    width: 80%;
    margin: 0 auto;
}

	/*選べるプラン*/
	/* カートの中身が親の高さに引きずられないようにする */
    .plan-card-wrapper {
        height: auto !important;
    }
    .card-detail {
        display: block; /* flexを解除するか、高さを保持しない設定に */
        height: auto;
        padding-bottom: 2rem; /* 下部に少し余白を設ける */
    }
    /* Slickのコンテナ自体も高さ自動にする */
    .slick-track {
        display: block !important; /* 要素を詰め込まず、高さなりに配置 */
    }
	.plan-container {
		max-width: 500px;
		padding: 0;
	}
	.fukidashi img {
		margin: 0 auto;
	}
	.plan-name h3 img {
		margin-top: 4.5rem;
	}
	.super {
		padding-bottom: 1.2rem;
	}
	.plan-contact-btn{
		width: 80%;
	}

	.service-content {
		max-width: 95%;
	}
	.contact-flex,
	.youtube-movie,
	.short-content {
		flex-direction: column;
	}
	.youtube{
		text-align: center;
	}
}

@media screen and (max-width: 767px) {

	h2 img {
		width: 250px;
		padding-top: 3.7rem;
		margin: 0 auto 2.6rem;
	}
	.sub-title img{
		width: 290px;
	}
	.title{
		padding: 4rem 0 3rem;
	}
	.title h2{
		font-size: 2.4rem;
	}
	.title picture {
        flex-shrink: 0; 
        display: flex; 
        justify-content: flex-end; 
    }
    .title picture img {
        width: 50px;   
        height: auto;
    }
	/*ファーストビュー*/
	#fv {
		padding-top: 0;
	}
	.fv-btn {
		width: 45%;
		bottom: 5%;
		left: 10%;
	}
	#service,
	#issue,
	#reason,
	#strength,
	#plan,
	.movie-container,
	#staff,
	#contact,
	#flow {
		padding-bottom: 3.5rem;
	}
	/*サービスについて*/
	.service-content {
		max-width: 90%;
	}

	.service-content h3 {
		font-size: 1.5rem;
		padding-bottom: 2.3rem;
	}
	.service-content h4 {
		font-size: 1.25rem;
		padding-bottom: 2.3rem;
	}
	.three-points {
		width: 275px;
		margin: 0 auto;
		padding-bottom: 3.3rem;
	}
	.service-box {
		border-radius: 1rem;
		width: 275px;
		margin: 0 auto;
		flex-direction: column;
		padding: 1.7rem;
		gap: 2.2rem;
	}
	.left-content {
		display: flex;
		flex-direction: column;
		display: contents; /* 親の枠組みを無視して子要素を直列に並べる */
	}
	.text-img {
		order: 1;
		text-align: center;
	}
	.text-img img {
		margin-bottom: 0;
	}
	.right-content {
		order: 2;
		width: 100%;
	}
	.right-content p {
		font-size: 1.2rem;
		text-align: center;
	}
	.right-content ul li {
		font-size: 1.3rem;
		text-align: center;
	}
	.service-img {
		order: 3;
		width: 100%;
	}
	.service-img img {
		width: 100%;
		height: auto;
	}
	.issue-container {
		max-width: 90%;
	}
	.issue-content01 {
		width: 100%;
		max-width: 100%;
		gap: 2.2rem;
		flex-direction: column;
		align-items: center;
	}
	.issue-left {
		width: 100%;
		display: flex;
        justify-content: center;
	}
	.issue-left ul {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
        text-align: left;
    }
	.issue-left ul li {
		font-size: 1.25rem;
		line-height: 2.3;
		padding-left: 1.5rem;
	}
	.issue-left ul li::before {
		content: '';
    	position: absolute;
    	left: 0;
    	/* 50%ではなく、1行目の高さに合わせた固定値にする */
    	top: 1rem; 
    	transform: none; /* 中央寄せを解除 */
		width: 10px;
		height: 10px;
		border: 2px solid #fff;
	}
	.issue-right {
		flex-direction: row;
		align-items: center;
		text-align: center;
	}
	.issue-text img {
		padding-bottom: 2rem;
		width: 80%;
		margin: 0 auto;
	}
	.issue-right picture:last-child img {
		width: 70%;
		height: auto;
	}
	.card-container {
		flex-direction: column;
		gap: 2rem;
		padding-bottom: 3.3rem;
		width: 90%;
		margin: 0 auto;
	}
	.card {
		width: 260px;
		flex: none;
		height: auto;
		border-radius: 1rem;
		margin: 0 auto;
	}
	.card-header {
		font-size: 1.5rem;
		padding: 0.5rem 0;
	}
	.card-body {
		padding: 0;
	}
	.card-body p {
		font-size: 1.3rem;
		padding: 1.5rem 1rem;
	}
	.red-box {
		width: 280px;
		height: auto;
		padding: 1.3rem 1.6rem;
		border-radius: 1rem;
	}
	.red-box p {
		font-size: 1.4rem;
		line-height: 1.68;
	}
	.pcbr {
		display: none;
	}
	.spbr {
		display: block;
	}
	#solution {
		max-width: 90%;
		padding-bottom: 10rem;
	}
	.solution-title img {
		width: 100px;
	}
	.solution-container {
        max-width: 280px;
        margin: 0 auto; 
    }
    .solution-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .solution-grid picture img {
        width: 100%;
        margin: 0;
    }
    .solution-chara {
        position: absolute;
        right: -52px; 
        bottom: -65px; 
        width: 120px;
        z-index: 10;
    }
	

	/*オカリクが選ばれる理由*/
	.reason-content {
		max-width: 90%;
	}
	.card-content {
		width: 300px;
        margin: 0 auto;
		border-radius: 1rem;
	}
	.features-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.feature-card {
        position: relative;
        padding-top: 15px; /* 数字アイコンがはみ出すスペース */
        max-width: 300px;  /* 前回の画像サイズ(280px)等に合わせて調整 */
        margin: 0 auto;    /* カード自体を中央に固定 */
        width: 100%;       /* 画面が300pxより小さい時用の担保 */
    }

    .number-icon {
        position: absolute;
        /* カードの左上端を基準に固定 */
        top: 0;
        left: 5px; 
        width: 33px;  /* 画像の比率に合わせて微調整してください */
        height: 33px;
        z-index: 10;
    }
	.card-reason {
		font-size: 1.5rem;
		padding: 0.9rem 1.3rem;
	}
	.card-text {
		font-size: 1.3rem;
		padding: 1.1rem 1.5rem;
	}
	/*強み*/
	#strength {
		max-width: 90%;
		padding-bottom: 3.5rem;
	}
	.video {
		width: 300px;
	}
	.intro {
		flex-direction: column;
		padding-bottom: 3rem;
		gap: 2.5rem;
	}
	.intro-text {
		width: 300px;
		font-size: 1.25rem;
		line-height: 1.8;
	}
	.strength-grid {
		grid-template-columns: none;
		max-width: 250px;
		margin: 0 auto;
	}
	.strength-card {
		padding: 1.5rem 2rem;
		border-radius: 1rem;
	}
	.strength-title{
		font-size: 2.5rem;
		margin-bottom: 1rem;
	}
	.strength-card img {
		max-width: 65%;
	}
	.strength-text {
		font-size: 1.3rem;
		margin-top: 1rem;
		line-height: 1.5;
	}

	/*選べるプラン*/
	.plan-container {
		max-width: 90%;
		padding: 0;
	}
	.plan-slider {
		display: block !important;
	}
	.light {
		padding-bottom: 3.8rem;
	}
	.plan-contact-btn {
		width: 260px;
		margin-top: 2rem;
	}
	.plan-card-wrapper {
		border-radius: 1rem;
	}
	.plan-card {
		border-radius: 1rem 1rem 0 0;
	}
	
	.youtube {
		width: 100%;
		aspect-ratio: 16 / 9;
	}
	.short-video {
		width: 70%;
		height: auto;
		aspect-ratio: 9 / 16;
		margin: 0 auto;
	}
	.short-video.tiktok {
		aspect-ratio: 9 / 18.1;
	}
	.short-video blockquote {
		margin-top: 0;
	}
	.youtube iframe,
	.short-video iframe {
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}
	.movie-title {
		font-size: 1.6rem;
		width: fit-content;
		height: auto;
		padding: 0 15px;
		margin-bottom: 1.5rem;
	}
	.youtube-movie {
		gap: 3.5rem;
	}
	.movie-text {
		font-size: 1.25rem;
		margin-bottom: 1.5rem;
	}
	.movie-container {
		max-width: 90%;
		margin: 0 auto;
	}
	.staff-container,
	.flow-container,
	.contact-container {
		max-width: 90%;
		margin: 0 auto;
	}
	.short-content {
		padding-top: 0;
	}
	.sns-btn {
		width: 200px;
		padding-top: 4rem;
	}

	.staff-text {
		font-size: 1.3rem;
		width: 250px;
	}
	.staff-header {
		margin-bottom: 3rem;
	}
	.staff-grid {
		gap: 2.5rem;
	}
	.staff-item picture {
		width: 200px;
	}

	#faq {
		padding-bottom: 3rem;
	}
	.faq-container {
		max-width: 90%;
		margin: 0 auto;
	}
	.flow-step {
		width: 30px;
		margin-right: 15px;
	}
	.flow-content h4 {
		font-size: 1.4rem;
	}
	.flow-content p,
	.flow-content p span {
		font-size: 1.2rem;
	}
	.flow-arrow {
		width: 60px;
		margin: 1.5rem 0 1rem;
	}
	.flow-list{
		max-width: 460px;
	}
	.accordion-003 {
		border: 2px solid #9ce49e;
		border-radius: 1rem;
	}
	.accordion-003 summary {
		width: auto;
		padding: 15px 45px 15px 58px;
		font-size: 1.3rem;
	}
	.accordion-003 summary::before {
		left: 14px;
		width: 30px;
		height: 30px;
	}
	.accordion-003 summary::after {
		right: 15px;
		width: 20px;
		height: 2px;
	}
	.accordion-003 summary .icon-plus {
		right: 15px;
		width: 20px;
		height: 2px;
	}
	.accordion-003 p {
		width: auto;
		font-size: 1.3rem;
		padding: 15px 10px 15px 57px;
	}
	.accordion-003 p::before {
		left: 14px;
		top: 18px;
		width: 30px;
		height: 30px;
	}
	.card00 {
    margin-bottom: 2rem;
	}

	.contact-card {
		padding: 1.5rem 1.4rem;
	}
	.contact-flex {
		width: 95%;
        margin: 0 auto;
		gap: 2rem;
	}
	.card-lead,
	.card-lead-tel {
		font-size: 1.3rem;
		padding-bottom: 0.7rem;
	}
	.card-subtext,
	.card-subtext-tel {
		font-size: 1.3rem;
		padding-bottom: 1rem;
	}
	.tel-number {
		width: 220px;
	}
	.card-tantou {
		font-size: 1.5rem;
	}
}