@charset "UTF-8";
html {
	scroll-behavior: smooth;
	font-size: 10px;
}

body {
	color: #333333;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "游ゴシック", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	box-sizing: border-box;
	font-size: 1.8rem;
	line-height: 1.5;
	overflow-x: hidden;
}

img {
	width: 100%;
}

p {
	margin-bottom: 0.8em;
}

a {
	color: #2d92ff;
	text-decoration: none;
}

a:hover {
	color: #056839;
	transition: 0.4s;
}

h1 {
	display: block;
	max-width: 360px;
	margin: 40px auto 8px;
	color: #056839;
	font-size: 2.4rem;
	text-align: center;
}

h2 {
	display: block;
	margin: auto;
	color: #056839;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
}

h3 {
	padding-bottom: 8px;
	border-bottom: 1px solid #d5d5d5;
	font-size: 1.8rem;
	font-weight: bold;
}

h4 {
	position: relative;
	padding: 8px 8px 8px 48px;
	line-height: 1.6;
	color: #056839;
	font-size: 2.8rem;
	font-weight: bold;
}

h4:before {
	font: var(--fa-font-solid);
	content: "\f138";
	font-weight: 900;
	position: absolute;
	font-size: 3rem;
	left: 8px;
	top: 15px;
	color: #f0ffe4;
}

section {
	margin-top: 80px;
}

.pc {
	display: none;
}

.flex {
	display: flex;
	align-items: center;
}

.side-space {
	padding-right: 16px;
	padding-left: 16px;
}

.margin-t8 {
	margin-top: 8px !important;
}

.margin-t16 {
	margin-top: 16px !important;
}

.margin-t24 {
	margin-top: 24px !important;
}

.margin-t32 {
	margin-top: 32px !important;
}

.margin-t40 {
	margin-top: 40px !important;
}

.margin-t80 {
	margin-top: 80px !important;
}

.margin-b16 {
	margin-bottom: 16px;
}

.fontsize14 {
	font-size: 1.4rem;
}

.fontsize24 {
	font-size: 2.4rem;
}

.fontsize40 {
	font-size: 4rem;
}

.background-gray {
	background: #F8F8F8;
}

.red {
	color: #dc1414;
}

.text-center {
	text-align: center;
}

.number {
	color: #dc1414;
	font-family: "Roboto", "ヒラギノ角ゴ Pro W3", sans-serif;
	font-size: 4.8rem;
	font-weight: bold;
}

/* =====================
 パンくずリンク
 ===================== */
.breadcrumb {
	list-style: none;
}

.breadcrumb li {
	display: inline-block;
	position: relative;
	margin-right: 16px;
	list-style: none;
	font-weight: bold;
}
.breadcrumb li:after,
.breadcrumb li.now:after {
	content: "";
	position: absolute;
	top: 0;
	left: 100%;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent;
	border-left-color: #f0ffe4;
	border-width: 15px 12px;
}

.breadcrumb li a,
.breadcrumb li.now span  {
	display: inline-block;
	padding: 4px 8px;
	color: #056839;
	background: #f0ffe4;
	font-size: 14px;
	text-decoration: none;
	text-shadow: 1px 1px 0 #ffffff;
}

.breadcrumb li.now span {
	color: #6f89a8;
	background: #f3f7ff;
	text-shadow: 1px 1px 0 #ffffff;
}

.breadcrumb li.now:after {
	border-left-color: #f3f7ff;
}

.breadcrumb li a:hover {
	color: #333333;
}

/* =====================
 コンバージョン
 ===================== */
.fix-conversion {
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: 32px 16px;
	background: #056839;
	color: #ffffff;
}

/*PC版右上固定、SP版メインビジュアル下コンバージョンボタン*/
.fix-conversion-button {
	max-width: 600px;
	margin: auto;
	border-radius: 16px;
	background: #FFF825;
	-webkit-transition: all 150ms linear;
	transition: all 150ms linear;
}

.fix-conversion-button a {
	display: inline-block;
	padding: 20px 24px;
	color: #056839;
}

.fix-conversion-button:hover,
.conversion-button:hover {
	background: #fffdc8;
	box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
	text-shadow: -1px -1px 0 #ffffff;
}

/*本文中コンバージョンボタン*/
.conversion {
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: 32px 16px;
	color: #ffffff;
}

/*コンバージョンボタン*/
.conversion-button {
	max-width: 600px;
	margin: auto;
	border: 4px solid #056839;
	border-radius: 16px;
	background: #FFF825;
	-webkit-transition: all 150ms linear;
	transition: all 150ms linear;
}

.conversion-button a {
	display: inline-block;
	padding: 20px 24px;
	color: #056839;
}

/* =====================
ヘッダー
 ===================== */
/*ヘッダーロゴ*/
header img {
	width: 240px;
	padding: 16px;
}

/*ハンバーガーメニュー*/
.hamburger-contents {
	position: fixed;
	top: 0;
	right: 0;
	opacity: 1;
	transition: opacity 0.3s;
	z-index: 1002;
}

.hamburger-contents.scrolled {
	opacity: 0.4; /* スクロール時の透明度 */
}

.hamburger-button {
	position: relative; /*ボタン内側の基点となるためrelativeを指定*/
	width: 50px;
	height: 50px;
	margin: 16px;
	border-radius: 5px;
	background: #056839;
	cursor: pointer;
	z-index: 1001;
}

/*ボタン内側*/
.hamburger-button .openbtn-area {
	transition: all .6s; /*アニメーションの設定*/
	width: 50px;
	height: 50px;
}

.hamburger-button span {
	display: inline-block;
	position: absolute;
	left: 14px;
	width: 45%;
	height: 3px;
	border-radius: 2px;
	background: #fff;
	transition: all .4s;
}

.hamburger-button span:nth-of-type(1) {
	top: 15px;
}

.hamburger-button span:nth-of-type(2) {
	top: 23px;
}

.hamburger-button span:nth-of-type(3) {
	top: 31px;
}

/*activeクラスが付与されると .openbtn-areaが360度回転し、その中の線が回転して×に*/
.hamburger-button.active .openbtn-area {
	transform: rotate(360deg);
}

.hamburger-button.active span:nth-of-type(1) {
	top: 18px;
	left: 18px;
	transform: translateY(6px) rotate(-45deg);
	width: 30%;
}

.hamburger-button.active span:nth-of-type(2) {
	opacity: 0;
}

.hamburger-button.active span:nth-of-type(3) {
	top: 30px;
	left: 18px;
	transform: translateY(-6px) rotate(45deg);
	width: 30%;
}

/*ナビゲーションメニュー*/
header nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #f0ffe4;
	overflow-y: auto;
	transform: scale(0); /* 初期状態では縮小して非表示 */
	transform-origin: center center; /* 中央からの拡大・縮小を指定 */
	transition: transform 0.3s ease; /* スムーズなアニメーション */
	z-index: 1000;
}

header nav.active {
	transform: scale(1); /* activeクラスが追加されたら通常サイズに */
}

header nav ul {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

header nav ul li {
	margin: 16px 0;
}

header nav ul a {
	color: #333333;
	font-size: 24px;
}

/* =====================
メインビジュアル
 ===================== */
.main-visual-contents {
	position: relative;
}

.main-visual-contents::after {
	content: "";
	position: absolute;
	bottom: -4px;
	right: -16px;
	width: 92%;
	height: 120px;
	background-color: #056839;
	clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
	z-index: -1;
	overflow: hidden;
}

.main-visual-feature {
	width: 100%;
}

.main-visual-feature img {
	width: 100%;
}

/*IT導入補助金*/
.subsidy-banner {
	margin-bottom: 2rem;
	padding: 1rem;
	background-color: #056839; /* 信頼感ある濃青 */
	color: #FFF;
	text-align: center;
	font-size: 1.4rem;
	font-weight: bold;
	letter-spacing: 0.05em;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* =====================
大幅に効率化できるって知っていましたか？
 ===================== */
#problem-presentation .list-up {
	position: relative;
}

/*下向き三角*/
#problem-presentation .list-up::after {
	content: "";
	display: block;
	position: absolute;
	left: 50%; /* 左から50%の位置に配置 */
	transform: translateX(-50%); /* X軸方向に-50%移動して中央に配置 */
	width: 0;
	height: 0;
	border-left: 50px solid transparent; /* 三角形の左側 */
	border-right: 50px solid transparent; /* 三角形の右側 */
	border-top: 32px solid #056839; /* 三角形の上側 */
}

#problem-presentation li {
	padding: 4px 8px 4px 36px;
	border-bottom: 1px solid #f0ffe4;
	background: url(../img/check-box.png) top 0.5em left 8px / 18px auto no-repeat;
}

/* =====================
選ばれる理由
 ===================== */
.choosing {
	padding: 32px 0;
}

/*計算式*/
.formula {
	display: block;
	max-width: 400px;
	margin: 16px auto 0;
	padding: 16px 0;
	border: 5px double #333333;
	border-radius: 8px;
	background: #ffffff;
	color: #056839;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.8;
}

.formula span {
	padding: 12px;
	border-radius: 4px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
	background-color: #f0ffe4;
	color: #056839;
}

.formula::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 8px solid #dc1414;
	margin-right: 8px;
}

.choosing li {
	margin-top: 16px;
	line-height: 1.2;
}

/*Googleマテリアルの位置を調整*/
.material-symbols-outlined {
	display: inline-flex;
	vertical-align: -5px;
}

/* =====================
 お客様の声
 ===================== */
#testimonial .testimonial-contents {
	margin-bottom: 32px;
	padding: 16px 24px;
	border-radius: 16px;
	background: #f0ffe4;
}

#testimonial .testimonial-contents img {
	display: block;
	width: 160px;
	margin: 16px auto 0;
}

#testimonial .testimonial-contents .name {
	display: flex;
	font-size: 1.4rem;
	flex-direction: column;
	align-items: center;
}

#testimonial .testimonial-contents .name span {
	font-size: 1.6rem;
}

#testimonial .testimonial-contents .title {
	display: flex;
	justify-content: center;
	font-weight: bold;
}

#testimonial .testimonial-contents div.text {
	font-size: 1.4rem;
	line-height: 1.2;
}

#testimonial .testimonial-contents div.text p {
	margin-top: 8px;
}


/* =====================
利用開始までの流れ
 ===================== */
#flow,
#automatic-response,
#support,
#change,
#manage {
	padding: 32px 16px;
}

#flow div.flow-box {
	margin-bottom: 40px;
	padding: 24px 0;
	border-radius: 16px;
	background: #f0ffe4;
	font-weight: bold;
	text-shadow: 1px 1px 4px #ffffff;
}

/*下向き三角（3つ目には表示しない）*/
#flow div.flow-box:not(:last-child)::after {
	content: "";
	display: block;
	position: relative;
	bottom: -54px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 32px solid #f0ffe4;
}

#flow .step {
	font-family: 'Montserrat', sans-serif;
}

#flow .step .number {
	font-size: 5.6rem;
	font-weight: normal;
}

#flow img,
#support img,
#change img,
#manage img {
	height: 180px;
	margin-bottom: 16px;
	object-fit: contain;
}

/* =====================
Zoom導入サポート
 ===================== */
#implementation-support {
	margin: 80px auto 0;
}

#implementation-support img,
#automatic-response img,
#feature img {
	display: block;
	max-width: 360px;
	margin: auto;
}

#automatic-response img,
#feature img {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* =====================
システムが自動で対応！
 ===================== */
#automatic-response .auto-step,
#automatic-response .auto-step div {
	flex-direction: column;
}

#automatic-response p {
	margin-top: 16px;
}

#automatic-response p span {
	font-size: 1.2rem;
}

#automatic-response .auto-step > div:not(:last-child) p::after {
	content: "";
	display: block;
	position: relative;
	bottom: -24px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 32px solid #056839;
}

/* =====================
特徴
 ===================== */
#feature .feature-contents > div {
	padding: 32px 24px;
	border-radius: 16px;
	background: #f0ffe4;
}

#feature h3 {
	position: relative;
	padding-left: 40px;
	text-shadow: 1px 1px 0 #ffffff;
}

#feature h3::before {
	font: var(--fa-font-solid);
	content: "\f0a4";
	position: absolute;
	top: 0;
	left: 0;
	padding-right: 8px;
	color: #056839;
	font-size: 3.2rem;
	text-shadow: -1px -1px 0 #ffffff, /* 左上の影 */ 1px -1px 0 #ffffff, /* 右上の影 */ -1px 1px 0 #ffffff, /* 左下の影 */ 1px 1px 0 #ffffff; /* 右下の影 */
}

#feature p {
	margin-top: 16px;
}


/* トップへ戻るボタン */
#page_top {
	position: fixed;
	bottom: 10px;
	right: 10px;
	width: 50px;
	height: 50px;
	padding: 0;
	background: #056839;
	opacity: 0.6;
	border-radius: 50%;
}

#page_top a {
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	text-decoration: none;
}

#page_top a::before {
	font: var(--fa-font-solid); content: "\f077";
	position: absolute;
	top: 25%;
	right: 25%;
	margin: auto;
	color: #fff;
	font-size: 24px;
	text-align: center;
}

/* =====================
サポート・セキュリティ
 ===================== */
#support .support-contents > div,
#change .change-contents > div,
#manage .manage-contents > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 16px;
	padding: 16px;
	border-radius: 16px;
	background: #ffffff;
}

#support .support-contents > div > p,
#change .change-contents > div > p,
#manage .manage-contents > div > p {
	font-size: 1.4rem;
	font-weight: normal;
}

/* =====================
フッター
 ===================== */
footer {
	border-top: 16px solid #056839;
	border-bottom: 16px solid #056839;
	background: #f0ffe4;
	color: #056839;
}

footer div {
	padding: 16px;
	background: #ffffff;
}

footer img {
	width: 100%;
	background: #ffffff;
}

footer li {
	margin-top: 8px;
}

footer a {
	font-size: 1.4rem;
}

footer p {
	font-size: 1.2rem;
}

footer .menu {
	gap: 16px;
	align-items: flex-start;
	justify-content: space-around;
	text-align: left;
}

/* =====================
 機能・特徴
 ===================== */
#function h1,
#price h1,
#user-voice h1,
#faq h1,
#company h1,
#tokusho h1,
#privacypolicy h1 {
	padding: 8px;
	border: solid 3px #056839;
	border-radius: 16px;
	background: #ffffff;
}


/* =====================
 料金
 ===================== */
#price span {
	color: #dc1414;
	box-shadow: none;
	background: none;
}

#price ul.points {
	justify-content: space-between;
	font-size: 1.2rem;
}

#price ul.points li {
	width: 100px;
	margin-top: 16px;
	padding: 16px;
	border-radius: 16px;
	box-shadow: 4px 4px 0 #056839;
	background: #f0ffe4;
	font-weight: bold;
	text-align: center;
	transform: skewX(-4deg);
}

#price ul.points li .number {
	text-shadow: 2px 2px 0 #ffffff;
}

#price .example {
	flex-wrap: wrap;
	justify-content: center;
}

#price .commuting,
#price .camp {
	padding: 32px 0;
	border-top: 1px solid #056839;
	border-bottom: 1px solid #056839;
}

/*料金例*/
#price .example div {
	width: 400px;
	border-radius: 16px;
	box-shadow: 2px 2px 8px #d5d5d5;
}

#price .example div p {
	padding: 16px;
	font-size: 2.4rem;
	text-align: center;
}

#price .example div .data span,
#price .example div .annotation span {
	font-family: 'Roboto', "ヒラギノ角ゴ Pro W3", sans-serif;
}

#price .example div p span {
	font-size: 1.5em;
	font-weight: bold;
}

#price .example div .title {
	padding-bottom: 8px;
	background-color: #f0ffe4;
	color: #056839;
	font-weight: bold;
}

#price .example div .title:first-child {
	border-radius: 16px 16px 0 0;
}

#price .example div .annotation,
#price .annotation {
	padding-top: 0;
	font-size: 1.4rem;
}

#price .example .sign {
	font-size: 4rem;
}

#price .example .rotate {
	transform: rotate(90deg);
}

/*オプション・カスタマイズ*/
#price #option table {
	box-sizing: border-box;
}

#price #option table tbody tr {
	display: flex;
	flex-direction: column;
	margin-top: 16px;
	border: 1px solid #f0ffe4;
	border-radius: 8px;
}

#price #option table tbody tr th {
	padding: 8px 16px;
	background: #f0ffe4;
}

#price #option table tbody tr td {
	padding: 16px;
	font-size: 1.6rem;
}

#price #option table tbody tr td div {
	margin-bottom: 0.5em;
}

/* 横長スペース用のスタイル */
#price #option table tbody tr.full-width {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0 16px 16px;
	box-sizing: border-box;
}

#price #option table tbody tr.full-width td {
	width: 100%;
	padding: 0; /* td自体のパディングは不要 */
	border: 1px solid #f0ffe4;
	border-radius: 8px;
	background: #F9FBFF;
	font-size: 1.6rem;
	line-height: 1.6; /* 読みやすくするための行間 */
}

#price #option table tbody tr.full-width .content-wrapper {
	padding: 16px;
}

#price #option table tbody tr.full-width  .content-wrapper strong {
	color: #2d92ff;
}

#price #option table tbody tr.full-width  .content-wrapper p {
	font-size: 1.4rem;
}

/* ボタン共通スタイル */
.button-link {
	display: inline-block;
	text-align: center;
	padding: 12px 24px;
	font-size: 1.6rem;
	font-weight: bold;
	color: #ffffff;
	border: 1px solid #007BFF;
	border-radius: 8px;
	background-color: #007BFF;
	text-decoration: none;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* ボタンのホバー時スタイル */
.button-link:hover {
	border: 1px solid #007BFF;
	background-color: #fff;
	color: #007BFF;
}

.under-yellow {
	background: linear-gradient(transparent 50%, #fcffbc 50%);
	background-size: 100%;
	background-repeat: no-repeat;
	font-weight: bold;
}

/* 価格表示（強調スタイル） */
.price-highlight {
	font-size: 28px;
	font-weight: bold;
	color: #D64545; /* 落ち着いた赤系（目に優しい） */
	display: inline-block;
	background: #FFF0F0;
	padding: 6px 12px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(214, 69, 69, 0.2);
}

/* Googleアイコン付きリスト装飾 */
.feature-list {
	list-style: none;
	padding: 0;
}

.feature-list li {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 16px;
	font-size: 24px;
}

.feature-list .material-icons {
	font-size: 24px;
	margin-right: 12px;
	color: #056839; /* ブランドカラーに合わせて調整可能 */
}

/* =====================
 お客様の声ページ
 ===================== */
#user-voice .explanation {
	flex-wrap: wrap;
	justify-content: center;
}

#user-voice .explanation p {
	margin-top: 16px;
}


/* =====================
 FAQ
 ===================== */
#faq {
	margin-top: 0;
	padding: 0 16px;
	background: url("../img/faq-background.png") no-repeat top center fixed;
	background-size: cover;
}

#faq .faq-item .answer .link {
	margin: 40px 0;
	transition: 0.2s;
}

#faq .faq-item .answer .link:hover {
	opacity: 0.6;
}

#faq a {
	padding: 16px 40px;
	border: 4px solid #056839;
	border-radius: 8px;
	background: #FFF825;
	color: #056839;
	font-weight: bold;
}

#faq .faq-container {
	max-width: 800px;
	margin: 40px auto 0;
}

#faq .faq-item {
	margin-bottom: 20px;
	border: 1px solid #f0ffe4;
	border-radius: 4px;
	overflow: hidden;
}

#faq .faq-item .question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px;
	background-color: #f0ffe4;
	cursor: pointer;
}

#faq .faq-item .icon {
	color: #056839;
	font-size: 1.6em;
}

#faq .faq-item .answer {
	display: none;
	padding: 16px;
	border-top: 1px solid #f0ffe4;
	background: #ffffff;
	font-size: 1.6rem;
}

/* =====================
 運営会社／特定商取引法
 ===================== */
#tokusho dl,
#company dl {
	margin: 0 auto 48px;
	display: flex;
	flex-wrap: wrap;
	text-align: left;
}

#tokusho dt,
#company dt {
	width: 28%;
	margin: 0;
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	line-height: 2;
	padding: 16px 16px 16px 0;
	vertical-align: middle;
	align-items: center;
}

#tokusho dd,
#company dd {
	width: 72%;
	margin: 0;
	padding: 16px 16px 16px 0;
	border-bottom: 1px solid #ccc;
	vertical-align: middle;
	line-height: 1.8;
}

/* =====================
 お問い合わせボタン
 ===================== */
.contact-button {
	max-width: 320px;
	padding: 16px;
	border: 4px solid #056839;
	border-radius: 16px;
	background: #f0ffe4;
	text-align: center;
	transition: all 150ms linear;
}

.contact-button:hover {
	background: rgba(228, 241, 255, 0.4);
	box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
	text-shadow: -1px -1px 0 #ffffff;
}

.contact-button a {
	color: #056839;
}

/* =====================
 IT導入補助金
 ===================== */
#ithojo {
	max-width: 768px;
	margin: 0 auto;
}

#ithojo h3 {
	font-size: 1.8rem;
	font-weight: bold;
	margin-top: 32px;
	margin-bottom: 8px;
	color: #056839;
}

#ithojo ul li::before {
	content: '■';
	margin-right: 8px;
	color: #056839;
	font-weight: bold;
}

#ithojo table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 16px;
	background-color: #ffffff;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

#ithojo table th,
#ithojo table td {
	border: 1px solid #d5d5d5;
	padding: 12px 16px;
	text-align: center;
	font-size: 1.6rem;
}

#ithojo table th {
	background-color: #f0ffe4;
	color: #056839;
	font-weight: bold;
}

#ithojo .conversion-button {
	margin-top: 24px;
	border: 4px solid #efb507;
	background-color: #FFC107;
}

#ithojo .conversion-button a {
	display: block;
	padding: 16px 24px;
	text-align: center;
	color: #222;
	border-radius: 8px;
	font-weight: bold;
	transition: background-color 0.3s ease;
}

#ithojo .conversion-button:hover {
	background-color: rgba(255, 193, 7, 0.4);
}

#ithojo .request {
	border: 4px solid #388E3C;
	background-color: #8fd492;
}

#ithojo .request:hover {
	background-color: rgba(76, 175, 80, 0.4);
}

/*トップページのバナー風*/
.banner-box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	max-width: 640px;
	margin: 24px auto;
	padding: 16px 20px;
	border: 1px solid #dce3ed;
	border-radius: 12px;
	background-image: repeating-linear-gradient(
			45deg,               /* 斜め方向（↘） */
			#f9fbff,             /* ベース色1 */
			#f9fbff 8px,         /* ストライプ幅 */
			#f1f4fa 8px,         /* ストライプ間隔 */
			#f1f4fa 16px
	);
	background-color: #f9fbff; /* ベース色保険 */	font-family: "Noto Sans JP", sans-serif;
}

.banner-text {
	flex: 1;
}

.banner-header {
	font-size: 2rem;
	font-weight: bold;
	color: #056839;
	margin-bottom: 4px;
}

.banner-main {
	font-size: 2.2rem;
	font-weight: bold;
	color: #111;
	margin-bottom: 6px;
}

.hilight-yellow {
	background: linear-gradient(transparent 60%, #fff352 60%);

}

.banner-main strong {
	font-size: 2.8rem;
	color: #005FCC;
}

.banner-sub {
	font-size: 1.5rem;
	color: #111;
	margin-left: 4px;
}

.banner-note {
	font-size: 1.8rem;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}

.banner-step {
	background: #fff;
	border: 2px solid #005FCC;
	color: #005FCC;
	padding: 2px 10px;
	border-radius: 4px;
	font-weight: bold;
}

.banner-step .bold {
	font-size: 1.8rem;
}

.banner-button {
	background: #FFF825;
	text-align: center;
	font-weight: bold;
	font-size: 2rem;
	border: 4px solid #056839;
	border-radius: 8px;
	flex-shrink: 0;
	height: 100%;
	display: flex;
	align-items: center;
	line-height: 1.4;
	white-space: nowrap;
	transition: 0.2s;
}

.banner-button:hover {
	background: rgba(255, 248, 37, 0.4);
}

.banner-button a {
	padding: 32px 34px;
	text-decoration: none;
	color: #056839;
	display: block;
}

.highlight-number {
	font-size: 2.4rem;
	font-weight: bold;
	color: #005FCC;
}


/**************
768px以上
***************/
@media (min-width: 768px) {
	.pc {
		display: block;
	}

	.sp {
		display: none;
	}

	h2 {
		font-size: 3.2rem;
	}

	h3 {
		font-size: 2rem;
	}

	/* =====================
 	パンくずリンク
	 ===================== */
	.breadcrumb {
		max-width: 1300px;
		margin: 24px auto 0;
	}

	/* =====================
	 コンバージョン
	 ===================== */
	.conversion {
		display: flex;
		justify-content: center;
		background: none;
		gap: 16px;
	}

	.conversion-button {
		max-width: 320px;
		border-radius: 16px;
		background: #FFF825;
		color: #056839;
		text-align: center;
		-webkit-transition: all 150ms linear;
		transition: all 150ms linear;
	}

	.conversion-button:hover {
		background: #fffdc8;
		box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
		text-shadow: -1px -1px 0 #ffffff;
	}

	#ithojo .conversion-button {
		margin: 0;
	}

	/* =====================
	ヘッダー
	 ===================== */
	header .wrapper {
		flex-wrap: wrap;
		max-width: 1300px;
		margin: 24px auto 0;
	}

	header img {
		max-width: 320px;
	}

	header .hamburger-button {
		display: none;
	}

	header nav {
		position: static;
		background-color: rgba(0, 0, 0, 0);
		transition: none;
	}

	header nav ul {
		flex-direction: row;
		justify-content: normal;
		padding: 0 24px 8px;
		border-bottom: 1px solid #d5d5d5;
	}

	header nav ul li {
		margin-right: 24px;
	}

	header nav ul li a {
		position: relative;
		padding: 8px;
		font-size: 1.6rem;
	}

	/*ヘッダーメニューでマウスホバーすると下線がゆっくり引かれる*/
	header nav ul li a::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 0;
		height: 1px;
		background-color: #056839;
		transition: all 0.3s ease-in-out;
		transform-origin: center;
	}

	header nav ul li a:hover::before {
		width: 100%;
		left: 0;
	}


	/* =====================
	メインビジュアル
	 ===================== */
	.main-visual-contents::after {
		width: 64%;
		height: 200px;
	}

	header .fix-conversion,
	#main-visual .fix-conversion {
		position: fixed;
		top: 0;
		right: 8px;
		width: 320px;
		background: #056839;
		color: #ffffff;
		opacity: 1;
		transition: opacity 0.3s;
		z-index: 1001;
	}

	header .fix-conversion.scrolled,
	#main-visual .fix-conversion.scrolled {
		box-shadow: 2px 2px 8px #000000;
		opacity: 0.4; /* スクロール時の透明度 */
	}

	header .fix-conversion:hover,
	#main-visual .fix-conversion:hover {
		opacity: 1; /* ホバー時の透明度 */
	}

	header .fix-conversion-button,
	#main-visual .fix-conversion-button {
		border-radius: 16px;
		background: #FFF825;
		color: #056839;
		-webkit-transition: all 150ms linear;
		transition: all 150ms linear;
	}

	header .fix-conversion-button:hover,
	#main-visual .fix-conversion-button:hover {
		background: #fffdc8;
		box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
		text-shadow: -1px -1px 0 #ffffff;
	}

	#main-visual .main-visual-contents {
		display: flex;
		align-items: center;
		max-width: 1024px;
		margin: auto;
	}

	#main-visual .main-visual-contents .explanation {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1;
		width: 100%;
	}

	#main-visual .main-visual-contents img {
		max-width: 560px;
	}

	/*IT導入補助金*/
	.subsidy-banner {
		padding: 1.2rem 0;
		font-size: 4rem;
	}


	/* =====================
	 大幅に効率化
	 ===================== */
	#problem-presentation {
		position: relative;
		max-width: 960px;
		margin: 80px auto;
	}

	#problem-presentation::before {
		content: url("../img/worried.png");
		position: absolute;
		top: -108px;
		right: -280px;
		transform: scale(0.3);
		z-index: 1000;
	}

	#problem-presentation h2 {
		text-align: center;
	}

	#problem-presentation .list-up {
		display: flex;
		justify-content: center;
		margin-bottom: 80px;
	}

	#problem-presentation .list-up::after {
		bottom: -64px;
		border-left: 80px solid transparent;
		border-right: 80px solid transparent;
		border-top: 48px solid #056839;
	}

	#problem-presentation .right-list {
		padding-left: 32px;
	}

	/* =====================
	 選ばれる理由
	 ===================== */
	.choosing {
		background: none;
		padding: 32px 0 64px;
	}

	.choosing section.choosing-contents,
	.choosing section.choosing-contents-re {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
	}

	.choosing section:not(:last-child) {
		margin-bottom: 120px;
	}

	.choosing section.choosing-contents {
		flex-direction: row-reverse;
	}

	.choosing section.choosing-contents::after,
	.choosing section.choosing-contents-re::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 80%;
		height: 100%;
		background-color: #F8F8F8;
		z-index: -10;
		transform: skewy(-5deg);
	}

	.choosing section.choosing-contents-re::after {
		left: 0;
		transform: skewy(5deg);
	}

	.choosing section .choosing-img {
		max-width: 512px;
	}

	.choosing section .choosing-img img {
		object-fit: cover;
		height: 100%;
	}

	.choosing section .choosing-text {
		width: 52%;
		padding: 80px;
	}

	/* =====================
 	お客様の声
 	===================== */
	#testimonial {
		max-width: 640px;
		margin: 80px auto 0;
	}

	#user-voice #testimonial,
	#user-voice .explanation {
		max-width: 900px;
		margin: 80px auto 0;
	}

	/*grid調整*/
	#testimonial .testimonial-contents {
		display: grid;
		grid-template-columns: 1fr auto; /* 1つ目の列は残りのスペースを取り、2つ目の列は画像のサイズに合わせます */
		grid-template-rows: auto auto 1fr; /* 1つ目と2つ目の行は内容に合わせ、3つ目の行は残りのスペースを取ります */
		gap: 8px; /* グリッドの要素間のスペース */
	}

	.testimonial-contents img {
		grid-area: 1 / 2 / 3 / 3; /* 画像は1行目から2行目までの間、2列目に配置 */
	}

	.testimonial-contents .name {
		grid-area: 1 / 1; /* nameは1行目、1列目に配置 */
	}

	.testimonial-contents .title {
		grid-area: 2 / 1; /* titleは2行目、1列目に配置 */
	}

	.testimonial-contents .text {
		grid-area: 3 / 1 / 4 / 3; /* textは3行目、1列目から2列目までの間に配置 */
	}

	#testimonial .testimonial-contents {
		padding: 32px;
	}

	#testimonial .testimonial-contents .name {
		margin-top: 32px;
		font-size: 1.6rem;
	}

	#testimonial .testimonial-contents .name span {
		font-size: 1.8rem;
	}

	#testimonial .testimonial-contents p.title {
		font-size: 2.4rem;
	}

	#testimonial .testimonial-contents div.text {
		font-size: 1.8rem;
	}

	#testimonial .testimonial-contents div.text p {
		margin-top: 16px;
	}

	/* =====================
	 利用開始までの流れ
	 ===================== */
	#flow .flow-contens {
		display: flex;
		justify-content: center;
	}

	#flow div.flow-box {
		width: 280px;
		height: 400px;
		margin-top: 16px;
	}

	#flow div.flow-box:not(:last-child) {
		margin-right: 40px;
	}

	#flow div.flow-box:not(:last-child)::after {
		content: "";
		display: block;
		position: relative;
		bottom: 50%;
		left: 320px;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-top: 50px solid transparent;
		border-bottom: 50px solid transparent;
		border-left: 32px solid #f0ffe4;
	}

	/* =====================
	Zoom導入サポート
 	===================== */
	#implementation-support {
		max-width: 900px;
	}

	/* =====================
	システムが自動で対応！
 	===================== */
	#automatic-response p {
		line-height: 2;
	}

	#automatic-response p span {
		font-size: 1.6rem;
	}

	#automatic-response .auto-step > div:not(:last-child) p::after {
		margin: 24px 0;
	}

	#automatic-response img {
		max-width: 480px;
	}

	/* =====================
	 特徴
	 ===================== */
	#feature {
		max-width: 900px;
		margin: 80px auto 0;
	}

	#feature img {
		max-width: 768px;
		margin-top: 24px;
	}

	#feature h3 {
		font-size: 2.4rem;
		text-shadow: 1px 1px 0 #ffffff;
	}

	#feature h3::before {
		position: static;
	}

	#feature .feature-contents > div:not(:first-child) {
		margin-top: 64px;
	}

	#feature p {
		padding: 8px 32px;
	}

	/* =====================
	 サポート・セキュリティ
	 ===================== */
	#support .support-contents,
	#change .change-contents,
	#manage .manage-contents {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		gap: 16px;
		width: 768px;
		margin: auto;
	}

	#support .support-contents > div,
	#change .change-contents > div,
	#manage .manage-contents > div {
		width: 320px;
		height: 448px;
	}

	/* =====================
	 フッター
	 ===================== */
	footer img {
		width: 24%;
	}

	footer .menu {
		justify-content: center;
		gap: 136px;
		padding-bottom: 40px;
	}

	/* =====================
 	料金
 	===================== */
	#price {
		max-width: 768px;
		margin: auto;
	}

	#price h4 {
		padding: 8px 8px 8px 56px;
		font-size: 3.2rem;
	}

	#price h4::before {
		top: 16px;
		font-size: 3.4rem;
	}

	#price ul.points {
		justify-content: space-between;
		font-size: 2.4rem;
	}

	#price ul.points li {
		width: 200px;
		padding: 24px 0;
		box-shadow: 8px 8px 0 #056839;
	}

	#price ul.points li span.number {
		font-size: 6.4rem;
	}

	#price .example {
		flex-wrap: nowrap;
	}

	#price .example div {
	}

	#price .example div p {
		font-size: 1.8rem;
	}

	#price .example div .annotation,
	#price .annotation {
		font-size: 1.2rem;
	}

	#price .example .sign {
		padding: 0 16px;
	}

	#price .example .rotate {
		transform: rotate(0deg);
	}

	/*オプション・カスタマイズ*/
	#price #option table {
		width: 100%;
		border: 1px solid #f0ffe4;
		border-radius: 8px;
	}

	#price #option table thead {
		background: #f0ffe4;
	}

	#price #option table tbody tr {
		display: block;
		width: 100%;
		margin-top: 0;
		border: none;
		border-radius: 0;
	}

	#price #option table thead tr th,
	#price #option table tbody tr th {
		width: 380px;
		padding: 16px;
		border-top: 1px solid #f0ffe4;
		background: none;
		font-size: 1.6rem;
	}

	#price #option table thead tr td,
	#price #option table tbody tr td {
		width: 388px;
		padding: 16px;
		border-top: 1px solid #f0ffe4;
		font-size: 1.6rem;
	}


	/* =====================
 	運営会社
 	===================== */
	#company {
		width: 768px;
		margin: 0 auto;
	}

	/* =====================
	特定商取引法
	===================== */
	#tokusho {
		width: 900px;
		margin: 0 auto;
	}


	/* =====================
	 IT導入補助金
	===================== */
	#ithojo h1 {
		max-width: 100%;
	}

	#ithojo ul,
	#ithojo ol {
		margin-left: 1.2em;
		padding-left: 1em;
		line-height: 1.8;
	}

	/*トップページのバナー風*/
	.banner-box {
		flex-direction: row;
	}
}