@charset "UTF-8";

/*--- 固定ボタン ----*/

.contact_box {
	background: #2dc36a;
}

.contact_box > div > a:nth-of-type(2) > p {
	margin: 0 0 0 13px;
}

.contact_box > div > a:nth-of-type(2) > p img {
	max-width: 80px;
	display: block;
	margin: 0 0 3px;
}

.contact_box > div > a:nth-of-type(3) > img {
	filter: brightness(1) drop-shadow(2px 2px 1px rgba(0, 0, 0, 30%));
}

/*--- 固定ボタン　ここまで ----*/


/*--- サイドメニューここから ---*/

.side_nav {
	display: none;
	flex-flow: column;
	gap: 20px;
	position: fixed;
	right: 20px;
	top: 30%;
	z-index: 3;
}

.side_nav a {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	color: #eb6120;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
	position: relative;
	opacity: 0.5;
	transition: 0.3s;
}

.side_nav a::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid #eb6120;
}

.side_nav a:hover {
	color: #eb6120;
	opacity: 1;
	transform: scale(1.2, 1.2);
	margin: 0 18px 0 0;
}

.side_nav a:hover::after {
	background: #eb6120;
}

.side_nav a.active {
	color: #eb6120;
    opacity: 1;
    transform: scale(1.2, 1.2);
    margin: 0 18px 0 0;
}
.side_nav a.active::after {
	background: #eb6120;
}

/*--- サイドメニューここまで ---*/


.inner_large {
	padding: 60px 30px !important;
}

.full-width {
	color: #333;
}

.full-width h2 {
	display: flex;
	flex-flow: column-reverse;
	align-items: center;
	font-size: 2.4rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
}

.full-width h2 span {
	display: flex;
	justify-content: center;
	font-size: 1.8rem;
	color: #2dc36a;
	position: relative;
	margin: 0 0 20px;
}

.full-width h2 span::after {
	content: "";
	width: 100px;
	height: 4px;
	background: #2dc36a;
	border-radius: 4px;
	position: absolute;
	bottom: -5px;
}

.full-width .info h2 {
	font-size: 2rem;
	line-height: 50px;
}

.full-width .info h2 span {
	bottom: -10px;
}

.full-width .info h2 span::after {
	display: none;
}

.full-width a {
	transition: 0.3s;
}

.full-width a:hover {
	opacity: 0.3;
}

.hero_box {
	height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url(/product/misemeg/mini/images/hero_bg.png) no-repeat center;
	background-size: cover;
}

.hero_box h1 {
	color: #eb6120;
	text-align: center;
	margin: 0 0 20px;
}

.hero_box h1 img {
	width: 100%;
	max-width: 230px;
}

.hero_box section {
	display: grid;
	gap: 0 30px;
}

.hero_box section > div:nth-of-type(1) {
	grid-row: 1/2;
	grid-column: 1/2;
	margin: 30px 0 0;
}

.hero_box section > div:nth-of-type(1) > div {
	text-align: center;
	margin: 0 0 20px;
}

.hero_box section > div:nth-of-type(1) > div p {
	display: inline;
	font-size: 2.6rem;
	font-weight: bold;
	line-height: 1.5;
	border-bottom: 2px solid #2dc36a;
}

.hero_box section > div:nth-of-type(1) > p:nth-of-type(1) span {
	font-size: 3rem;
}

.hero_box section > div:nth-of-type(1) > p {
	text-align: center;
}

.hero_box section > div:nth-of-type(2) {
	height: 400px;
	grid-row: 1/3;
	grid-column: 2/3;
	display: flex;
	gap: 30px;
	overflow: hidden;
}

.hero_box section > div:nth-of-type(2) > div {
	display: flex;
	flex-flow: column;
	align-items: center;
	gap: 10px;
	position: relative;
}

.hero_box section > div:nth-of-type(2) > div:nth-of-type(1) {
	top: 30px;
}

.hero_box section > div:nth-of-type(2) > div:nth-of-type(2) {
	flex-flow: column-reverse;
	bottom: 30px;
}

.hero_box section > div:nth-of-type(2) > div > div:nth-of-type(1) {
	display: flex;
	gap: 10px;
}

.hero_box section > div:nth-of-type(2) p {
	width: 90px;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #eb6120;
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
	background: #fff;
	border: 2px solid #eb6120;
	border-radius: 45px;
	position: relative;
}

.hero_box section > div:nth-of-type(2) p::after {
	content: "";
	width: 80px;
	height: 80px;
	border: 1px solid #eb6120;
	border-radius: 40px;
	position: absolute;
}

.hero_box section > div:nth-of-type(2) img {
	width: 100%;
	max-width: 180px;
}

.hero_box section > div:nth-of-type(3) {
	grid-row: 2/3;
	grid-column: 1/2;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	margin: 0 0 30px;
}

.hero_box section > div:nth-of-type(3) > p {
	font-weight: bold;
}

.hero_box section > div:nth-of-type(3) a {
	width: 100%;
	max-width: 300px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.6rem;
	background: #2dc36a;
	border-bottom: none;
	border-radius: 25px;
	position: relative;
}

.full-width .minitoha_box h2 {
	width: 100%;
	display: flex;
	flex-flow: initial;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	position: relative;
	margin: 0 0 30px;
}

.full-width .minitoha_box h2::before,
.full-width .minitoha_box h2::after {
	content: "";
	height: 1px;
	flex-grow: 1;
	background-color: #666;
}

.full-width .minitoha_box h2::before {
	margin-right: 10px;
}

.full-width .minitoha_box h2::after {
	margin-left: 10px;
}

.minitoha_box > div {
	display: grid;
	align-items: center;
	grid-template-columns: 400px 1fr;
	gap: 30px;
	margin: 0 auto;
}

.minitoha_box > div > div:nth-of-type(1) a {
	display: block;
	position: relative;
}

.minitoha_box > div > div:nth-of-type(1) a::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 70px;
	height: 50px;
	border-radius: 20%;
	background: rgba(0, 0, 0, 50%);
	margin: -25px 0 0 -35px;
}

.minitoha_box > div > div:nth-of-type(1) a:hover {
	opacity: 1;
}

.minitoha_box > div > div:nth-of-type(1) a:hover::before {
	background: rgba(255, 0, 0, 100%);
}

.minitoha_box > div > div:nth-of-type(1) a::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	border-top: 12px solid transparent;
	border-left: 16px solid rgba(255, 255, 255, 100);
	border-bottom: 12px solid transparent;
	margin: -12px 0 0 -6px;
}

.minitoha_box > div > div:nth-of-type(1) a video {
	width: 100%;
	background: linear-gradient(to right, #ecf5f3, #9fe5e9);
	border-radius: 10px;
	padding: 20px 10px 10px 70px;
}

.minitoha_box > p:nth-of-type(1) {
	text-align: center;
	margin: 0 0 30px;
}

.minitoha_box > p:nth-of-type(1) img {
	width: 100%;
	max-width: 500px;
}

.minitoha_box > div > div:nth-of-type(2) > p:nth-of-type(1) {
	text-align: center;
	margin: 0 0 10px;
}

.minitoha_box > div > div:nth-of-type(2) > p:nth-of-type(2) {
	color: #eb6120;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
	margin: 0 0 20px;
}

.minitoha_box > div > div:nth-of-type(2) > p:nth-of-type(2) span {
	font-size: 4rem;
}

.minitoha_box > div > div:nth-of-type(2) > p:nth-of-type(2) img {
	width: 100%;
	max-width: 160px;
	margin: 0 5px 0 0;
}

.minitoha_box > div > div:nth-of-type(2) > p:nth-of-type(3) {
	color: #eb6120;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
}

.minitoha_box > div > div:nth-of-type(2) > ul {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin: 0 0 30px;
}

.minitoha_box > div > div:nth-of-type(2) > ul li {
	width: 100%;
	max-width: 150px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.6rem;
	font-weight: bold;
	background: #2dc36a;
}

.features_box > div {
	max-width: 900px;
	display: flex;
	gap: 30px;
	background: #fff;
	box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
	border-radius: 10px;
	padding: 30px 20px;
	margin: 0 60px 60px 0;
}

.features_box > div:nth-of-type(odd) {
	flex-flow: row-reverse;
	margin: 0 0 60px auto;
}

.features_box > div:last-of-type {
	margin: 0 60px 0 0;
}

.features_box > div h3 {
	color: #40b86a;
	line-height: 1.5;
	margin: 0 0 10px;
}

.features_box > div img {
	width: auto;
	max-width: 200px;
	height: 150px;
	object-fit: contain;
}

.features_box > div:nth-of-type(1) img {
	border-radius: 10px;
	box-shadow: 0 3px 5px 0 rgb(0, 0, 0, 30%);
}

.features_box > div:nth-of-type(3) img {
	height: 130px;
}

.features_box > div:nth-of-type(4) img {
	height: 130px;
	border: 5px solid #40b86a;
	padding: 5px;
}

.features_box > div > div:nth-of-type(1) {
	max-width: 200px;
	min-width: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.features_box > div p:nth-of-type(2) {
	margin: 10px 0 0;
}

.service_box > div.title {
	width: 100%;
	height: 70px;
	display: flex;
	justify-content: center;
	color: #fff;
	padding: 20px 0 0;
	margin: 0 0 60px;
}

.service_box > div.title:nth-of-type(1) {
	background: url(/product/misemeg/mini/images/bg_noren_green.svg) repeat-x;
	background-size: contain;
}

.service_box > div.title:nth-of-type(3) {
	background: url(/product/misemeg/mini/images/bg_noren_orange.svg) repeat-x;
	background-size: contain;
}

.service_box > div.title > h3 {
	font-size: 1.6rem;
}

.service_box > div.title > h3 span {
	font-size: 2.2rem;
}

/* 変更前 */
/*
.service_box .first {
    max-width: 800px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto 30px;
}
*/

/* 変更後 */
/* .service_box .first {
    max-width: 950px;
    display: grid; */
    /* 3つの均等な列を作成 */
    /* grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    margin: 0 auto 30px;
} */

/* 変更前 */
/*
.service_box .first > div {
    display: flex;
    flex-flow: column;
    align-items: center;
    background: #f6faf5;
    border-radius: 10px;
    box-shadow: 3px 3px 3px 0 rgb(88, 156, 52, 50%);
    position: relative;
    padding: 20px;
    min-height: 480px; 
}
*/

/* 変更後 */
/* .service_box .first > div {
    display: flex;
    flex-flow: column; */
    /* align-items を削除または初期値に戻す */
    /* align-items: center; */ 
    /* background: #f6faf5;
    border-radius: 10px;
    box-shadow: 3px 3px 3px 0 rgb(88, 156, 52, 50%);
    position: relative;
    padding: 20px;
} */

/* ↓ このコードブロックを新しく追加 */
/* .service_box .first > div > *:last-child {
    margin-top: auto;
} */
/* 
.service_box .first > div:nth-of-type(1) {
	grid-row: 1/3;
	grid-column: 1/2;
}

.service_box .first > div:nth-of-type(2) {
	grid-row: 1/2;
	grid-column: 2/3;
}

.service_box .first > div:nth-of-type(3) {
	grid-row: 2/3;
	grid-column: 2/3;
} */

/* .service_box .first > div:nth-of-type(1) p:nth-of-type(1) {
	width: 80px;
	height: 80px;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: #589c34;
	border-radius: 40px;
	position: absolute;
	top: -20px;
	left: -20px;
} */

/* .service_box .first > div > p:first-of-type { もしくは p:nth-of-type(1) */
    /* position: absolute;
    top: 20px;
    left: 20px;
} */

/* .service_box .first h3,
.service_box .second h3 {
	font-size: 1.8rem;
	text-align: center;
	line-height: 1.5;
	margin: 0 0 20px;
}

.service_box .second > div:nth-of-type(4) h3,
.service_box .second > div:nth-of-type(6) h3 {
	min-height: 54px;
}

.service_box .first p:nth-of-type(1) {
	color: #589c34;
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
}

.service_box .first p:nth-of-type(1) span,
.service_box .second p:nth-of-type(1) span {
	font-size: 3rem;
}

.service_box .first p:nth-of-type(3) {
	margin: 10px 0 0 auto;
} */

/* .service_box .first img {
    width: 100%;
    max-width: 120px;
    height: 200px; 画像の高さを固定 */
    /* object-fit: contain; 縦横比を維持したままボックス内に収める */
    /* margin: 0 0 20px;
} */

/* .service_box .first > div:nth-of-type(1) img {
	max-width: 250px;
} */

/* --- 「基本機能」セクションのレイアウト --- */

/* 全体のコンテナ */
.service_box .first {
    max-width: 960px; /* 全体の幅 */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3つの均等な列を作成 */
    gap: 30px;
    margin: 0 auto 30px;
}

/* 全ての機能ボックスの共通スタイル */
.service_box .first > div {
    background: #f6faf5;
    border-radius: 10px;
    box-shadow: 3px 3px 3px 0 rgb(88, 156, 52, 50%);
    position: relative;
    padding: 20px;
}

/* 機能1（一番上）のスタイル */
.service_box .first > div:first-child {
    grid-column: 1 / -1; /* 1列目から最後まで結合して横幅いっぱいにする */
    /* ▼▼▼ 以下2行を追加 ▼▼▼ */
    background: #f6faf5;  /* 背景色を他の機能と合わせる */
    padding: 20px;        /* ボックス内の余白を広げて高さを確保 */
}
.service_box .first > div:first-child .feature-content {
    display: flex;
    align-items: center;
    gap: 30px; /* 画像とテキストの間の余白 */
}

.service_box .first > div:first-child .feature-text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: left;
}

.service_box .first > div:first-child .feature-text p:not(.stext) {
    color: #333;
    font-weight: normal;
}

.service_box .first > div:first-child .feature-text .stext {
    margin-top: auto;
    text-align: left;
}

.service_box .first > div:first-child img {
    max-width: 220px; /* 機能1の画像サイズ */
    height: auto;
}

/* 機能1のヘッダー（アイコンとタイトル） */
.feature-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 1em;
}

.feature-header p {
    color: #589c34;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    margin: 0;
}

.feature-header p span {
    font-size: 3rem;
}

.feature-header h3 {
    margin: 0;
    font-size: 1.8rem;
    text-align: left;
    line-height: 1.5;
}

/* 機能2, 3, 4（下の段）のスタイル */
.service_box .first > div:nth-child(n+2) {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.service_box .first > div:nth-child(n+2) > *:last-child {
    margin-top: auto;
}

.service_box .first > div:nth-child(n+2) .stext {
    text-align: right;
}

.service_box .first > div:nth-child(n+2) img {
    max-width: 120px;
    height: 200px;
    object-fit: contain;
    margin-bottom: 20px;
}

/* 機能2,3,4のアイコン */
.service_box .first > div:nth-child(n+2) > p:first-of-type {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #589c34;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
}

.service_box .first > div:nth-child(n+2) > p:first-of-type span {
    font-size: 3rem;
}

/* 共通のh3スタイル */
.service_box .first h3 {
    font-size: 1.8rem;
    text-align: center;
    line-height: 1.5;
    margin: 0 0 20px;
}

.service_box .second {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin: 0 auto 30px;
}

.service_box .second > div {
	display: flex;
	flex-flow: column;
	align-items: center;
	background: #fef7f4;
	border-radius: 10px;
	box-shadow: 3px 3px 3px 0 rgb(235, 97, 31, 50%);
	position: relative;
	padding: 20px;
}

.service_box .second > div p:nth-of-type(1) {
	color: #eb611f;
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
	position: absolute;
	top: 20px;
	left: 20px;
}

.service_box .second img {
	width: 100%;
	max-width: 200px;
	height: 150px;
	object-fit: contain;
	margin: 0 0 20px;
}

.service_box .second > div:nth-of-type(2) img,
.service_box .second > div:nth-of-type(3) img {
	height: 200px;
}

.service_box .second > div:nth-of-type(5) img {
	max-width: 230px;
	margin: 0 0 50px;
}

.service_box .second > div:nth-of-type(6) img {
	height: 170px;
	margin: 0 0 30px;
}

.features_box a.zoom,
.service_box .first > div a,
.service_box .second > div a {
	position: relative;
}

.features_box a.zoom::after {
	content: "";
	width: 30px;
	height: 30px;
	background: url(/assets/img/common/icon_magnifying-glass.svg) no-repeat;
	background-size: contain;
	position: absolute;
	bottom: 10px;
	right: 10px;
}

.service_box .first > div h3 + a::after,
.service_box .second > div h3 + a::after {
	content: "";
	width: 30px;
	height: 30px;
	background: url(/assets/img/common/icon_magnifying-glass.svg) no-repeat;
	background-size: contain;
	position: absolute;
	bottom: 30px;
	right: 10px;
}

.service_box .second > div:nth-of-type(n+5) p:nth-of-type(2) {
	margin: 0 0 10px;
}

.service_box .second > div:nth-of-type(n+5) p:nth-of-type(3) {
	width: 100%;
	text-align: right;
}

.service_box > ul {
	margin: 0 0 60px;
}

.service_box > ul:last-of-type {
	margin: 0;
}

.service_box ul li {
	list-style: disc;
	line-height: 1.5;
	margin: 0 0 10px 2rem;
}


.linkage_box > div:nth-of-type(1) {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
	padding: 30px 20px;
	margin: 0 0 60px;
}

.linkage_box > div:nth-of-type(1) img {
	width: 100%;
	max-width: 800px;
	display: block;
	margin: 0 auto 30px;
}

.linkage_box > div:nth-of-type(1) p:nth-of-type(1) {
	margin: 0 0 10px;
}

.linkage_box > div:nth-of-type(n+2) {
	max-width: 900px;
	display: flex;
	gap: 10px 30px;
	margin: 0 auto 60px;
}

.linkage_box > div:nth-of-type(n+2) > div:nth-of-type(1) {
	min-width: 250px;
	max-width: 250px;
	text-align: center;
}

.linkage_box > div:nth-of-type(n+2) > div:nth-of-type(1) img:nth-of-type(1) {
	width: auto;
	height: 40px;
	display: block;
	margin: 0 auto 10px;
}

.linkage_box > div:nth-of-type(3) > div:nth-of-type(1) img:nth-of-type(1) {
	height: 50px;
}

.linkage_box > div:nth-of-type(n+2) > div:nth-of-type(1) img:nth-of-type(2) {
	width: 100%;
	max-width: 200px;
	max-height: 200px;
	object-fit: contain;
}

.linkage_box > div:nth-of-type(n+2) > div:nth-of-type(2) > p {
	margin: 0 0 10px;
}

.linkage_box > div:nth-of-type(2) > div:nth-of-type(2) > p:last-of-type,
.linkage_box > div:nth-of-type(3) > div:nth-of-type(2) > p:last-of-type,
.linkage_box > div:nth-of-type(4) > div:nth-of-type(2) > p:last-of-type {
	margin: 0 0 20px;
}


.linkage_box > div:nth-of-type(n+2) > div:nth-of-type(2) a.link_btn {
	max-width: 300px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	border-bottom: none;
	border-radius: 10px;
	box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
	position: relative;
	margin: 0 0 0 auto;
}

.linkage_box > div:nth-of-type(2) > div:nth-of-type(2) a.link_btn {
	background: #00863C;
}

.linkage_box > div:nth-of-type(3) > div:nth-of-type(2) a.link_btn {
	background: #004098;
}

.linkage_box > div:nth-of-type(4) > div:nth-of-type(2) a.link_btn {
	background: #eb611f;
}

.linkage_box > div:nth-of-type(n+2) > div:nth-of-type(2) > div {
	display: flex;
	gap: 20px;
	margin: 0 0 20px;
}

.linkage_box > div:last-of-type {
	margin: 0 auto;
}

.chart_box > div:nth-of-type(1) {
	width: 100%;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
	position: relative;
	padding: 20px;
	margin: 0 auto 30px;
}

.chart_box > div:nth-of-type(1) > div {
	overflow-x: scroll;
}

.chart_box table {
	width: 910px;
	text-align: center;
	border-collapse: collapse;
	margin: 0 auto;
}

.chart_box table tr:nth-of-type(odd) {
	background: #ebe6e4;
}

.chart_box table tr:nth-of-type(1) {
	background: #fff;
}

.chart_box table tr:nth-of-type(1) td {
	vertical-align: bottom;
}

.chart_box table tr:nth-of-type(1) td > div {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.chart_box table tr:nth-of-type(1) td > div > div {
	width: min-content;
}

.chart_box table tr:nth-of-type(2) td:nth-of-type(n+2) {
	color: #fff;
	font-weight: bold;
	padding: 20px 10px;
}

.chart_box table tr:nth-of-type(2) td:nth-of-type(1) {
	padding: 0;
}

.chart_box table tr:nth-of-type(2) td:nth-of-type(1) div {
	width: 100%;
	background: #fff;
	border-top: 1px solid #ebe6e4;
	border-left: 1px solid #ebe6e4;
	border-right: 1px solid #ebe6e4;
	padding: 20px 10px;
}

.chart_box table tr:nth-of-type(2) td:nth-of-type(2) {
	background: #2dc36a;
}

.chart_box table tr:nth-of-type(2) td:nth-of-type(3) {
	background: #00863C;
}

.chart_box table tr:nth-of-type(2) td:nth-of-type(4) {
	background: #589c34;
}

.chart_box table tr:nth-of-type(n+3):nth-of-type(-n+6) td:nth-of-type(2) {
	color: #2dc36a;
	font-size: 2rem;
}

.chart_box table tr:nth-of-type(n+3):nth-of-type(-n+11) td:nth-of-type(3) {
	color: #00863C;
	font-size: 2rem;
}

.chart_box table tr:nth-of-type(n+3):nth-of-type(-n+13) td:nth-of-type(4) {
	color: #589c34;
	font-size: 2rem;
}

.chart_box table td {
	padding: 10px;
}

.chart_box table td:nth-of-type(1) {
	width: 20%;
}

.chart_box table td:nth-of-type(n+2) {
	width: calc(80% / 3);
}

.chart_box table td:nth-of-type(-n+3) {
	border-right: 5px solid #fff;
}

.chart_box table td .stext {
	color: #333;
	line-height: 1;
}

.chart_box table img,
.chart_box > div:nth-of-type(2) img {
	width: 80px;
	height: 25px;
	background: #fff;
	border: 1px solid #000;
	border-radius: 5px;
	object-fit: contain;
	padding: 5px;
}

.chart_box > div:nth-of-type(2) {
	display: grid;
	grid-template-columns: repeat(4, auto);
	justify-content: right;
	gap: 10px 30px;
	margin: 0 auto 30px;
}

.chart_box > div:nth-of-type(2) > div {
	display: flex;
	gap: 5px;
}

.chart_box > div:nth-of-type(2) > div p {
	font-size: 1.2rem;
	white-space: nowrap;
}

.chart_box > p:nth-of-type(1) {
	text-align: center;
	margin: 0 0 10px;
}

.chart_box > p:nth-of-type(2) {
	text-align: center;
	margin: 0 0 30px;
}

.chart_box > p:nth-of-type(3) {
	text-align: right;
}

#faq h3 {
	color: #333;
	text-align: center;
	padding: 0;
	margin: 50px 0 0;
}

.case_box > div {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	margin: 0 auto;
}

.case_box > div > div {
	background: #fff;
	border: 2px dashed #eb6120;
	position: relative;
	padding: 30px;
}

.case_box > div > div::after {
	content: "";
	background: #eb6120;
	width: 70px;
	height: 70px;
	clip-path: polygon(0 0, 0 100%, 100% 100%);
	position: absolute;
	top: -2px;
	left: -2px;
	transform: rotate(90deg);
}

.case_box > div > div > p:nth-of-type(1) {
	display: block;
	color: #fff;
	font-size: 3rem;
	font-weight: bold;
	position: absolute;
	top: 5px;
	left: 7px;
	z-index: 2;
}

.case_box > div > div > div {
	display: flex;
	justify-content: center;
	gap: 30px;
}

.case_box > div > div > div img {
	width: 100%;
	max-width: 150px;
}

.case_box h3 {
	text-align: center;
	margin: 0 0 30px;
}

.flow_box img {
	width: 100%;
	display: block;
	max-width: 800px;
	margin: 0 auto;
}

.request_box > p {
	text-align: center;
	margin: 0 0 30px;
}

.request_box > a {
	max-width: 600px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.8rem;
	font-weight: bold;
	border-bottom: none;
	border-radius: 10px;
	text-shadow: 1px 2px 3px rgb(0, 0, 0, 50%);
	margin: 0 auto;
}

.request_box > a:hover {
	color: #fff;
}

.request_box > a:nth-of-type(1) {
	background: #eb6120;
	margin: 0 auto 30px;
}

.request_box > a:nth-of-type(2) {
	background: #72ad47;
}

.msns_box > p {
	font-size: 2rem;
	text-align: center;
	margin: 0 0 30px;
}

.link_text,
.link_window {
	color: #72ad47;
}

.bg_gray {
	background: #ebe6e4;
}

.bg_green {
	background: #f8fbf2;
}

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

	/*--- サイドメニューここから ---*/

	.side_nav {
		display: none !important;
	}

	/*--- サイドメニューここまで ---*/

	.hero_box {
		height: auto;
	}

	.hero_box section {
		gap: 30px;
		padding: 30px 20px;
	}

	.hero_box section > div:nth-of-type(1) {
		grid-row: auto;
		grid-column: auto;
		margin: 0;
	}

	.hero_box section > div:nth-of-type(1) > div p {
		font-size: 2rem;
	}

	.hero_box section > div:nth-of-type(2) {
		height: auto;
		align-items: flex-start;
		justify-content: center;
		grid-row: auto;
		grid-column: auto;
	}

	.hero_box section > div:nth-of-type(2) img {
		max-width: 130px;
	}

	.hero_box section > div:nth-of-type(2) p {
		width: 70px;
		height: 70px;
		font-size: 1.2rem;
		border-radius: 35px;
	}

	.hero_box section > div:nth-of-type(2) p::after {
		width: 60px;
		height: 60px;
		border-radius: 30px;
	}

	.hero_box section > div:nth-of-type(2) > div:nth-of-type(1) {
		top: 0;
	}

	.hero_box section > div:nth-of-type(2) > div:nth-of-type(2) {
		bottom: 0;
	}

	.hero_box section > div:nth-of-type(3) {
		flex-flow: column;
		align-items: center;
		grid-row: auto;
		grid-column: auto;
		margin: 0;
	}

	.hero_box section > div:nth-of-type(3) a {
		max-width: 280px;
	}

	.minitoha_box > div {
		max-width: 600px;
		grid-template-columns: repeat(1, 1fr);
	}

	.features_box > div,
	.features_box > div:nth-of-type(odd) {
		margin: 0 auto 60px;
	}

	.features_box > div:last-of-type {
		margin: 0 auto;
	}

	.service_box .second {
		grid-template-columns: repeat(2, 1fr);
	}

	.chart_box > div:nth-of-type(1) {
		padding: 20px 10px;
	}

	.chart_box table {
		width: 600px;
	}

	.chart_box table tr:nth-of-type(1) td:nth-of-type(1) {
		height: 150px;
	}

	.chart_box table tr:nth-of-type(6) td:nth-of-type(1) {
		height: 100px;
	}

	.chart_box table tr:nth-of-type(12) td:nth-of-type(1) {
		height: 56px;
	}

	.chart_box table tr:nth-of-type(13) td:nth-of-type(1) {
		height: 60px;
	}

	.chart_box table tr:nth-of-type(3) td:nth-of-type(1),
	.chart_box table tr:nth-of-type(5) td:nth-of-type(1),
	.chart_box table tr:nth-of-type(7) td:nth-of-type(1),
	.chart_box table tr:nth-of-type(9) td:nth-of-type(1),
	.chart_box table tr:nth-of-type(11) td:nth-of-type(1),
	.chart_box table tr:nth-of-type(13) td:nth-of-type(1) {
		background: #ebe6e4;
	}

	.chart_box table tr:nth-of-type(1) td > div {
		flex-flow: column;
	}

	.chart_box table tr:nth-of-type(2) td:nth-of-type(1) {
		height: 52px;
	}

	.chart_box table td {
		font-size: 1.2rem;
		position: relative;
		z-index: 1;
		padding: 10px 5px;
	}

	.chart_box table td:nth-of-type(1) {
		width: 120px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		position: absolute;
		z-index: 2;
	}

	.chart_box > div:nth-of-type(2) {
		grid-template-columns: repeat(2, auto);
	}

}

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

	/*--- 固定ボタン ----*/

	.contact_box > div > a {
		background: #2dc36a;
	}

	.contact_box > div > a:nth-of-type(2) {
		background: #fff;
	}

	.contact_box > div > a:nth-of-type(2) > p {
		color: #2dc36a;
		margin: 0;
	}

	.contact_box > div > a > p {
		color: #fff;
	}

	.contact_box > div > a:nth-of-type(1) > img {
		filter: brightness(0) invert(1);
	}

	.contact_box > div > a:nth-of-type(2) > img {
		filter: brightness(140%);
	}

	/*--- 固定ボタン ここまで----*/

	.inner_large {
		padding: 60px 20px !important;
	}


	.minitoha_box > div > div:nth-of-type(2) > p:nth-of-type(1),
	.minitoha_box > div > div:nth-of-type(2) > p:nth-of-type(2) {
		text-align: left;
	}

	.minitoha_box > div > div:nth-of-type(2) > p:nth-of-type(1) br,
	.minitoha_box > div > div:nth-of-type(2) > p:nth-of-type(2) br {
		display: none;
	}

	.minitoha_box > div > div:nth-of-type(2) > p:nth-of-type(2) {
		font-size: 2rem;
	}

	.minitoha_box > div a video {
		padding: 20px 10px 0px 30px;
	}

	.features_box > div,
	.features_box > div:nth-of-type(odd) {
		max-width: 500px;
		flex-flow: column;
		align-items: center;
	}

	.service_box .first {
		max-width: 500px;
		grid-template-columns: 1fr;
	}

	.service_box .first > div:nth-of-type(1),
	.service_box .first > div:nth-of-type(2),
	.service_box .first > div:nth-of-type(3) {
		grid-row: auto;
		grid-column: auto;
	}

	.service_box .first > div:nth-of-type(1) p:nth-of-type(1) {
		top: -10px;
		left: -10px;
	}

	.service_box .second {
		max-width: 500px;
		grid-template-columns: repeat(1, 1fr);
	}

	.service_box .second > div:nth-of-type(6) h3 {
		min-height: auto;
	}

	.service_box .second > div:nth-of-type(5) img,
	.service_box .second > div:nth-of-type(6) img {
		margin: 0 0 20px;
	}

	.chart_box > div:nth-of-type(2) {
		grid-template-columns: repeat(1, auto);
		justify-content: center;
	}

	.linkage_box > div:nth-of-type(n+2) {
		max-width: 500px;
		flex-flow: column;
	}

	.linkage_box > div:nth-of-type(n+2) > div:nth-of-type(1) {
		max-width: 100%;
	}

	.linkage_box > div:nth-of-type(n+2) > div:nth-of-type(2) a.link_btn {
		margin: 0 auto;
	}

	.case_box > div {
		max-width: 500px;
		grid-template-columns: repeat(1, 1fr);
	}

	.case_box > div > div::after {
		width: 60px;
		height: 60px;
	}

	.case_box > div > div > p:nth-of-type(1) {
		font-size: 2.6rem;
		top: 3px;
		left: 5px;
	}

	.case_box > div > div > div {
		flex-flow: column;
		align-items: center;
	}

	.request_box > a {
		font-size: 1.6rem;
	}

}

/* ▼▼▼ ここから新しく追加 ▼▼▼ */

/* 機能1を3列分の幅にする */
.service_box .first > div:first-child {
    grid-column: 1 / -1; /* 1列目から最後まで広がる */
}

/* 機能1の中身（画像とテキスト）を横並びにする */
.service_box .first > div:first-child .feature-content {
    display: flex;
    align-items: center; /* 画像とテキストを中央揃え */
    gap: 20px; /* 画像とテキストの間の余白 */
}

/* 機能1のテキスト部分のスタイル */
.service_box .first > div:first-child .feature-text {
    text-align: left; /* テキストを左揃えに */
}

/* 機能1の画像サイズを調整 */
.service_box .first > div:first-child img {
    max-width: 200px; /* 機能1の画像サイズを再設定 */
    height: auto;
}

/* 機能2,3,4のテキストを中央揃えに */
.service_box .first > div:nth-child(n+2) {
    align-items: center;
    text-align: center;
}

/* 機能2,3,4の画像サイズを維持 */
.service_box .first > div:nth-child(n+2) img {
    max-width: 120px;
    height: 200px;
    object-fit: contain;
}

/* 機能2,3,4の最後の要素を下に配置（高さ揃えのため） */
.service_box .first > div:nth-child(n+2) > *:last-child {
    margin-top: auto;
}

/* ▲▲▲ ここまで新しく追加 ▲▲▲ */
/* ▼▼▼ 機能1のテキスト調整用のCSS ▼▼▼ */

/* テキスト全体を囲むコンテナ(.feature-text)の設定 */
.service_box .first > div:first-child .feature-text {
    display: flex;          /* Flexboxレイアウトを有効に */
    flex-direction: column; /* 子要素を縦方向に並べる */
    flex-grow: 1;           /* 親要素の高さ全体に広がるようにする */
    text-align: left;       /* 中のテキストを左揃えに */
}

/* メインの説明文（「デジタル会員証に...」の部分）の色の変更 */
.service_box .first > div:first-child .feature-text p:not(.stext) {
    color: #333; /* テキストの色を濃いグレーに変更 */
}

/* 「※」印のテキスト(.stext)を右下に配置 */
.service_box .first > div:first-child .feature-text .stext {
    margin-top: auto;   /* 上に自動で余白を取り、一番下に配置 */
    text-align: left;  /* テキスト自体を右揃えに */
}

/* ▲▲▲ ここまで追加 ▲▲▲ */
/* 機能1の本文を標準の太さに戻すCSS */
.service_box .first > div:first-child .feature-text p:not(.stext) {
    font-weight: normal; /* 太字を解除して標準の太さに */
}
/* --- 機能1のヘッダー（アイコンとタイトル）調整用 --- */

/* アイコンとタイトルを囲むラッパー */
.feature-header {
    display: flex;
    align-items: center;  /* アイコンとタイトルを上下中央に揃える */
    gap: 15px;            /* アイコンとタイトルの間の余白 */
    margin-bottom: 1em;   /* ヘッダーの下の余白 */
}

/* ヘッダー内のアイコンのスタイル */
.feature-header p {
    color: #589c34;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    margin: 0; /* 不要な余白をリセット */
}

/* アイコン内の数字のスタイル */
.feature-header p span {
    font-size: 3rem;
}
/* 機能1のアイコンテキスト（「機能」の部分） */
.feature-header p {
    color: #589c34 !important;     /* 文字色を強制的に緑色に */
    font-weight: bold !important; /* 太字を強制的に指定 */
}

/* 機能1のアイコン数字（「01」の部分） */
.feature-header p span {
    /* ▼▼▼ この一行を追加 ▼▼▼ */
    color: #589c34 !important;     /* 数字の文字色も強制的に緑色に */
    font-size: 3rem !important; /* 文字サイズを強制的に大きくする */
}