@charset "utf-8";
/* =========================
   共通
========================= */
.wrapper {
	display: flex;
	min-height: 100vh;
}
.sidebar {
	width: 250px;
	background: #173b78;
	color: #fff;
	position: fixed;
	top: 60px;
	left: 0;
	height: calc(100vh - 60px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
body .menu div.select {
	background-image: linear-gradient(90deg, #2c599f, #3f79c2);
	padding: 13px 0 7px 21px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border-left: solid 4px #76befc;
}
body .menu .child-select {
	background-image: linear-gradient(90deg, #2c599f, #3f79c2);
	padding: 10px 0 0 12px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	height: 34px;
}
.category {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 68px;
	height: 28px;
	background: #F4EBE4;
	color: #5E4A39;
	font-size: 12px;
	border-radius: 5px;
}
.filter-area {
	display: flex;
	gap: 10px;
	margin-bottom: 35px;
}
.filter {
	width: 140px;
	border: 1px solid #D4D8E0;
	border-radius: 25px;
	background: #fff;
	font-size: 15px;
	cursor: pointer;
	transition: 0.3s;
	padding: 6px 0 8px;
}
.filter:hover {
	border-color: #24427F;
	color: #24427F;
}
.filter.active {
	background: #24427F;
	color: #fff;
	border-color: #24427F;
}
.search-area {
	display: flex;
	gap: 18px;
	margin-bottom: 35px;
}
.search-input {
	flex: 1;
	height: 50px;
	padding: 0 20px;
	background: #fff;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	color: #333;
}
.search-input::placeholder {
	color: #A0A6B2;
}
.search-btn {
	width: 140px;
	height: 50px;
	background: #24427F;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	cursor: pointer;
	transition: 0.3s;
}
.search-btn:hover {
	background: #18305F;
}
@media (max-width: 700px) {
	.search-area {
		flex-direction: column;
		margin-bottom: 30px;
	}
	.search-btn {
		width: 100%;
	}
	.filter-area {
		flex-wrap: wrap;
	}
	.filter {
		width: 100%;
	}
	.filter-area {
		margin-bottom: 30px;
	}
}
/* =========================
   トップセレクト
========================= */
.top-select {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: -20px 0 0 0;
}
@media (max-width: 700px) {
	.top-select {
		margin: 25vw 5% 0;
        padding-bottom: 0;
        height: auto;
	}
}
/* =========================
   ベネフィットナウ
========================= */
.logo {
	background: #ffffff;
	width: 190px;
	text-align: center;
	height: 46px;
	padding-top: 6px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	margin-left: auto;
	margin-right: auto;
}
.menu {
	margin-top: 30px;
	padding-bottom: 30px;
}
.menu-group {
	padding-left: 25px;
	margin-right: 25px;
	margin-bottom: 20px;
	border-bottom: 1px solid #6881a2;
}
.menu div:first-child {
	padding-bottom: 12px;
}
.menu-group h3 {
	font-size: 16px;
	font-weight: normal;
	margin-bottom: 15px;
	height: 30px;
}
.menu-group ul {
	margin-left: 30px;
}
.menu-group li {
	font-size: 14px;
	margin-bottom: 22px;
	border-left: 2px solid #76befc;
	padding-left: 12px;
	height: 16px;
	line-height: 1.2;
}
.menu-group li:last-child {
	margin-bottom: 25px;
}
.menu-icon {
	background-repeat: no-repeat;
	padding-left: 38px;
	background-position: 0 0;
}
.menu-group .m-icon01 {
	background-image: url("../images/menu_icon01.png");
	margin-bottom: 0;
}
.m-icon02 {
	background-image: url("../images/menu_icon02.png");
}
.m-icon03 {
	background-image: url("../images/menu_icon03.png");
}
.m-icon04 {
	background-image: url("../images/menu_icon04.png");
	line-height: 1.8;
}
.m-icon05 {
	background-image: url("../images/menu_icon05.png");
}
.m-icon06 {
	background-image: url("../images/menu_icon06.png");
}
.m-icon07 {
	background-image: url("../images/menu_icon07.png");
}
.menu-group.service-back {
	margin-top: 80px;
}
.menu-group.service-back h3 {
	height: auto;
	min-height: 30px;
	line-height: 1.45;
}
.menu-group.service-back .menu-icon {
	position: relative;
}
.menu-group.service-back .menu-icon::before {
	content: "←";
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	text-align: center;
	font-size: 16px;
	line-height: 1.45;
}
.logout {
	margin-top: 0;
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}
.acco-tit {
	cursor: pointer;
	position: relative;
}
.acco-cont {
	display: none;
}
.acco-tit::after {
	border: 4px solid transparent;
	border-top: 4px solid #cad9ea;
	box-sizing: border-box;
	content: "";
	display: block;
	height: 6px;
	position: absolute;
	right: 5px;
	top: 35%;
	width: 6px;
}
.acco-tit.open::after {
	border-bottom: 4px solid #cad9ea;
	border-top: none;
	top: 25%;
}
.main {
	margin-left: 250px;
	width: calc(100% - 250px);
}
.header {
	height: 60px;
	background: #24427f;
	display: flex;
	justify-content: space-between;
	padding: 0 35px 0 30px;
	position: fixed;
	width: 100%;
	z-index: 999;
}
.header-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 20px;
}
.search {
	background: #ffffff;
	width: 220px;
	height: 32px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	padding: 0 12px;
}
.search i {
	color: #888;
	margin-right: 8px;
}
.search input {
	border: none;
	outline: none;
	width: 100%;
}
.bell {
	position: relative;
	color: #ffffff;
	font-size: 18px;
}
.dot {
	width: 8px;
	height: 8px;
	background: #ff453a;
	border-radius: 50%;
	position: absolute;
	top: -2px;
	right: -2px;
}
.content {
	padding: 90px 40px 50px;
}
.content h1 {
	font-size: 22px;
	margin-bottom: 25px;
}
.top .welcome {
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .02);
}
.top .welcome-text {
	position: relative;
	min-height: 220px;
	padding: 35px 40px;
	display: flex;
	align-items: flex-start;
	background-image:
		linear-gradient(90deg, #ffffff 0%, #ffffff 38%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.55) 62%, transparent 75%),
		url("../images/bene_img01.png");
	background-repeat: no-repeat;
	background-position: left center, right center;
	background-size: auto, auto 100%;
	border-radius: 10px;
}
.top .welcome-text h2 {
	font-size: 26px;
	margin-bottom: 0;
	font-weight: bold;
	max-width: 52%;
	line-height: 1.5;
}
.top .welcome-text p {
	color: #666;
	line-height: 1.8;
}
.top .point {
	display: inline-block;
	background: #ff6b3d;
	color: white;
	margin-top: 20px;
	padding: 10px 28px 6px;
	border-radius: 6px;
	font-size: 16px;
	font-weight: bold;
}
.top .point strong {
	font-size: 28px;
}
.top .welcome-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.top .stats {
	margin-top: 25px;
	background: #24427f;
	color: #ffffff;
	border-radius: 10px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .02);
	width: 90%;
}
.top .stat {
	padding: 25px 45px;
	text-align: center;
	border-right: 1px solid rgba(255, 255, 255, .4);
	justify-content: space-between;
}
.top .stat-cont {
	display: flex;
	width: 100%;
	max-width: 220px;
	justify-content: center;
	margin: 0 auto;
}
.top .stat-icon01 {
	margin-top: 23px;
}
.top .stat-icon02 {
	margin-top: 15px;
}
.top .stat:last-child {
	border-right: none;
}
.top .stat i {
	font-size: 32px;
	margin-bottom: 12px;
}
.top .stat p {
	font-size: 15px;
}
.top .stat .stat-txt01 {
	margin: 5px 0;
}
.top .stat .stat-txt01 span {
	font-size: 24px;
}
.top .stat .stat-txt02 {
	font-size: 13px;
}
.top .lower-area {
	margin-top: 25px;
	display: grid;
	grid-template-columns: 310px 1fr;
	gap: 25px;
}
/* 経費カード */
.top .expense-card, .activity, .ai-card {
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .02);
}
.top .expense-card {
	padding: 25px 35px;
	text-align: center;
}
.top .expense-card h3 {
	font-size: 16px;
}
.top .price {
	margin: 10px 0;
	color: #173b78;
	font-size: 28px;
	font-weight: bold;
}
.top .price span {
	font-size: 16px;
	color: #111;
}
.top .expense-card p {
	line-height: 1.8;
	font-size: 13px;
	text-align: left;
}
.top .expense-card button {
	margin-top: 25px;
	background: #24427f;
	color: #fff;
	border: none;
	border-radius: 5px;
	width: 160px;
	height: 45px;
	font-size: 15px;
}
.top .expense-card button:hover {
	background: #173b78;
}
.top .activity {
	padding: 20px 30px 15px;
}
.top .box-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 10px;
	border-bottom: 1px solid #cad5e5;
}
.top .box-header h3 {
	font-size: 19px;
	font-weight: bold;
}
.top .tit-icon01 {
	background-image: url("../images/bene_icon05.png");
	background-repeat: no-repeat;
	padding-left: 40px;
	background-position: 0 0;
}
.top .box-header a {
	color: #555;
	font-size: 14px;
}
.top .activity li {
	padding: 10px 0;
	border-bottom: 1px solid #e5e7ec;
	font-size: 15px;
}
.top .activity li:last-child {
	border-bottom: none;
}
.top .activity span {
	display: inline-block;
	width: 100px;
	color: #999;
}
.top .ai-card {
	margin-top: 25px;
	padding: 20px 30px 25px;
}
.top .tit-icon02 {
	background-image: url("../images/bene_icon06.png");
	background-repeat: no-repeat;
	padding-left: 45px;
	background-position: 0 0px;
	background-size: 35px auto;
	padding-top: 5px;
}
.top .ai-list li {
	display: flex;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid #e6e8ee;
}
.top .ai-list li.has-qr {
	align-items: flex-start;
	padding: 14px 0;
}
.top .ai-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.top .ai-icon01 {
	margin-right: 18px;
}
/* バッジ */
.top .badge {
	width: 80px;
	text-align: center;
	color: white;
	font-size: 13px;
	padding: 4px 0;
	border-radius: 5px;
	margin-right: 20px;
	font-weight: bold;
	flex-shrink: 0;
}
.top .orange {
	background: #f4744d;
}
.top .blue {
	background: #416299;
}
.top .gray {
	background: #9AA3B2;
}
.top .item-text {
	flex: 1;
	min-width: 0;
}
.top .item-text small {
	display: block;
	color: #999;
}
.top .item-text p {
	font-size: 15px;
	margin: 0;
}
.top .item-main {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 12px 16px;
}
.top .item-main > p {
	flex: 0 1 auto;
	padding-top: 2px;
}
.top .partner-qr {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	background: #f7f9fc;
	border: 1px solid #e6e8ee;
	border-radius: 8px;
}
.top .partner-qr img {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: contain;
	background: #fff;
	border-radius: 4px;
}
.top .partner-qr span {
	font-size: 11px;
	font-weight: 600;
	color: #06C755;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
@media (min-width: 1950px) {
	.top .welcome-text {
		background-image:
			linear-gradient(90deg, #ffffff 0%, #ffffff 48%, rgba(255, 255, 255, 0.95) 58%, rgba(255, 255, 255, 0.55) 68%, transparent 80%),
			url("../images/bene_img01.png");
	}
}
@media (max-width: 1600px) {
	.top .stats {
		width: 100%;
	}
	.top .stat {
		padding: 25px 25px;
	}
}
@media (max-width: 1300px) {
	.top .stats {
		grid-template-columns: repeat(2, 1fr);
	}
	.top .stat {
		border-bottom: 1px solid rgba(255, 255, 255, .4);
	}
}
@media (max-width: 1024px) {
	.top .welcome {
		grid-template-columns: 1fr;
	}
	.top .welcome-image {
		height: 250px;
	}
	.top .stats {
		grid-template-columns: repeat(2, 1fr);
	}
	.top .lower-area {
		grid-template-columns: 1fr;
	}
	.top .expense-card p {
		text-align: center;
	}
}
@media (max-width: 700px) {
	.sidebar {
		display: none;
	}
	.menu-group h3 span, .menu-group ul {
		display: none;
	}
	.logout {
		margin-top: 12px;
		margin-bottom: 0;
		color: #888;
	}
	.menu-group.service-back {
		margin-top: 30px;
	}
	.menu-group.service-back h3 {
		height: auto;
		line-height: 1.45;
	}
	.main {
		margin-left: 0;
		width: 100%;
	}
	.header {
		padding: 0 50px 0 5%;
		height: 50px;
	}
	.logo {
		width: 150px;
		height: 40px;
		padding: 2px 15px 0;
	}
	.search {
		display: none;
	}
	.top .stats {
		grid-template-columns: 1fr;
	}
	.content {
		padding: 65px 5% 30px;
		border-bottom: 10px solid #24427f;
	}
	.content h1 {
		font-size: 20px;
		margin-bottom: 15px;
	}
	.top .welcome-text h2 {
		font-size: 20px;
		margin-bottom: 0;
		max-width: 58%;
	}
	.top .point strong {
		font-size: 26px;
	}
	.top .activity span {
		width: 100%;
		display: block;
		margin-bottom: 5px;
	}
	.top .welcome-text {
		min-height: 160px;
		padding: 24px 20px;
		background-image:
			linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.96) 55%, rgba(255, 255, 255, 0.5) 72%, transparent 88%),
			url("../images/bene_img01.png");
		background-size: auto, auto 100%;
		background-position: left center, right center;
	}
	.top .point {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}
	.top .box-header h3 {
		font-size: 16px;
		padding-top: 0;
		background-size: auto 100%;
		padding-left: 35px;
	}
	.top .welcome-text p {
		font-size: 15px;
	}
	.top .stat {
		padding: 20px;
	}
	.top .ai-list li.has-qr {
		flex-wrap: nowrap;
	}
	.top .partner-qr {
		margin-left: 0;
		margin-top: 0;
		padding: 6px 8px;
	}
	.top .partner-qr img {
		width: 80px;
		height: 80px;
	}
	.menu-group h3 {
		font-size: 15px;
		margin-bottom: 8px;
	}
	.menu-group {
		margin-bottom: 15px;
	}
	.acco-tit::after {
		border-top: 4px solid #6881a2;
		top: 32%;
	}
	.acco-tit.open::after {
		border-bottom: 4px solid #6881a2;
		top: 22%;
	}
}
/* プロフィール */
.profile .user-info {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 35px;
}
.profile .avatar {
	width: 42px;
	height: 42px;
	background: #1E5ED7;
	color: white;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	font-weight: bold;
}
.profile .name {
	font-size: 24px;
	font-weight: bold;
}
.profile .badge {
	background: #F87C4B;
	color: #fff;
	padding: 7px 15px 5px;
	border-radius: 4px;
	font-size: 15px;
	width: 136px;
	font-weight: bold;
}
.profile .email {
	color: #666;
	font-size: 14px;
}
.profile .info-area {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
	margin-bottom: 35px;
}
.profile .card {
	background: #fff;
	border-radius: 8px;
	padding: 25px 30px 20px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}
.profile .card h2 {
	color: #24427F;
	font-size: 16px;
	font-weight: bold;
	padding-bottom: 8px;
	border-bottom: 2px solid #D7E2F5;
}
.profile table {
	width: 100%;
	border-collapse: collapse;
}
.profile table tr {
	border-bottom: 1px solid #ECECEC;
}
.profile table tr:last-child {
	border-bottom: none;
}
.profile table th, .card table td {
	padding: 15px 0;
	text-align: left;
	font-size: 15px;
}
.profile table th {
	width: 200px;
	font-weight: 600;
	line-height: 1.45;
	vertical-align: middle;
}
.profile .plan-button {
	width: 100%;
	height: 42px;
	background: #24427F;
	color: white;
	border: none;
	border-radius: 5px;
	font-size: 15px;
	cursor: pointer;
	transition: 0.3s;
	padding: 10px 0 12px;
}
a.plan-button {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	box-sizing: border-box;
}
.profile .plan-button:hover {
	background: #18305F;
}
@media (max-width: 900px) {
	.profile .info-area {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 700px) {
	.profile .profile-container {
		width: 92%;
		margin: 25px auto;
	}
	.profile .user-info {
		flex-wrap: wrap;
		gap: 10px;
		text-align: center;
		margin-bottom: 25px;
	}
	.profile .avatar {
		margin-left: auto;
		margin-right: auto;
	}
	.profile .name {
		width: 100%;
		font-size: 20px;
	}
	.profile .badge {
		order: 3;
		margin-left: auto;
		margin-right: auto;
	}
	.profile .email {
		width: 100%;
		order: 4;
	}
	.profile th {
		width: 140px;
		font-size: 14px;
		line-height: 1.45;
	}
	.profile td {
		font-size: 14px;
	}
	.profile .card {
		padding: 22px 18px;
	}
	.profile .plan-button {
		font-size: 15px;
	}
	.profile .info-area {
		margin-bottom: 25px;
	}
}
/* 利用履歴 */
.history-count {
	font-size: 14px;
	color: #666;
	margin-bottom: 15px;
}
.history-card {
	background: #fff;
	border-radius: 10px;
	padding: 25px 30px 20px;
}
.history-header {
	display: grid;
	grid-template-columns: 90px 290px 1fr 140px 140px;
	padding: 0 0 10px;
	font-size: 13px;
	color: #555;
	border-bottom: 2px solid #D8E4F8;
}
.history-row {
	display: grid;
	grid-template-columns: 90px 290px 1fr 140px 140px;
	align-items: center;
	min-height: 72px;
	border-bottom: 1px solid #ECECEC;
}
.history-row:last-child {
	border-bottom: none;
}
.history .status {
	width: 75px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	border-radius: 3px;
}
.history .status.use {
	background: #F37A49;
}
.history .status.reserve {
	background: #24427F;
}
.history .service {
	font-size: 16px;
	font-weight: 600;
}
.history .detail {
	color: #333;
	font-size: 15px;
}
.history .date {
	font-size: 15px;
}
@media (max-width: 1100px) {
	.history-header {
		display: none;
	}
	.history-row {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 20px 0;
		min-height: auto;
	}
	.history .service {
		font-size: 17px;
	}
	.history .detail, .date {
		font-size: 14px;
	}
}
@media (max-width: 600px) {
	.history-container {
		width: 92%;
		margin: 25px auto;
	}
	.history-card {
		padding: 0 20px;
	}
	.history .service {
		font-size: 16px;
	}
}
/* 請求書 */
.month-control {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 35px;
}
.month-btn {
	height: 38px;
	min-width: 65px;
	background: #D6E2F0;
	color: #24427F;
	border: none;
	font-size: 16px;
	cursor: pointer;
	position: relative;
	font-weight: 500;
}
.month-btn.prev {
	clip-path: polygon(18% 0, 100% 0, 100% 100%, 18% 100%, 0 50%);
	padding-left: 7px;
	padding-bottom: 3px;
}
.month-btn.next {
	clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
	padding-right: 7px;
	padding-bottom: 3px;
}

a.month-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	box-sizing: border-box;
	line-height: 1;
	padding-bottom: 0;
}
a.month-btn:hover {
	background: #C4D4E7;
}
.month-select {
	height: 38px;
	min-width: 146px;
	padding: 0 18px 0 10px;
	border: 1px solid #C9D4E5;
	background: #ffffff;
	color: #24427F;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}
.invoice-card {
	background: #ffffff;
	border-radius: 10px;
	padding: 25px 30px 20px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .05);
}
.invoice-header {
	display: grid;
	grid-template-columns: 1.3fr 0.9fr 0.9fr 320px;
	padding: 0 0 10px;
	font-size: 13px;
	color: #555;
	border-bottom: 2px solid #D7E3F6;
}
.invoice-row {
	display: grid;
	grid-template-columns: 1.3fr 0.9fr 0.9fr 320px;
	align-items: center;
	min-height: 75px;
	border-bottom: 1px solid #ECECEC;
}
.invoice-row.last, .invoice-row:last-child {
	border-bottom: none;
}
.receipt-header {
	display: grid;
	grid-template-columns: 1.4fr 1.3fr 0.9fr 320px;
	padding: 0 0 10px;
	font-size: 13px;
	color: #555;
	border-bottom: 2px solid #D7E3F6;
}
.receipt-row {
	display: grid;
	grid-template-columns: 1.4fr 1.3fr 0.9fr 320px;
	align-items: center;
	min-height: 75px;
	border-bottom: 1px solid #ECECEC;
}
.receipt-row.last, .receipt-row:last-child {
	border-bottom: none;
}
.payment-header {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding: 0 0 10px;
	font-size: 13px;
	color: #555;
	border-bottom: 2px solid #D7E3F6;
}
.payment-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	align-items: center;
	min-height: 56px;
	border-bottom: 1px solid #ECECEC;
	font-size: 15px;
}
.payment-row.last, .payment-row:last-child {
	border-bottom: none;
}
.invoice .company {
	font-size: 15px;
}
.invoice .price {
	font-size: 16px;
	font-weight: 500;
}
.invoice .price span {
	font-size: 13px;
}
.invoice .actions {
	display: flex;
	justify-content: flex-end;
	gap: 18px;
}
.invoice .detail-btn, .invoice .download-btn {
	height: 35px;
	border: none;
	border-radius: 3px;
	font-size: 14px;
	cursor: pointer;
	transition: 0.3s;
}

a.download-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	box-sizing: border-box;
}
.invoice .download-btn:disabled,
.invoice .month-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.invoice .detail-btn {
	width: 165px;
	background: #D6E2F0;
	color: #24427F;
}
.invoice .detail-btn:hover {
	background: #C4D4E7;
}
.invoice .download-btn {
	width: 135px;
	background: #24427F;
	color: #ffffff;
}
.invoice .download-btn:hover {
	background: #18305F;
}
@media (max-width: 1200px) {
	.invoice-header, .receipt-header, .payment-header {
		display: none;
	}
	.invoice-row, .receipt-row, .payment-row {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 20px 0;
		min-height: auto;
	}
	.invoice .actions {
		width: 100%;
		justify-content: flex-start;
		margin-top: 5px;
	}
}
@media (max-width: 700px) {
	.invoice-container {
		width: 92%;
		margin: 25px auto;
	}
	.month-control {
		flex-wrap: wrap;
		margin-bottom: 25px;
	}
	.invoice .actions {
		flex-direction: column;
		width: 100%;
	}
	.invoice .detail-btn, .invoice .download-btn {
		width: 100%;
		height: 40px;
	}
	.invoice-row, .receipt-row, .payment-row {
		padding: 20px 0 25px;
	}
	.invoice-card {
		padding: 5px 30px 0;
	}
}
/* サービス管理 */
.service-card {
	background: #fff;
	border-radius: 10px;
	padding: 25px 30px 20px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}
.service-header {
	display: grid;
	grid-template-columns: 0.4fr 0.8fr 1.5fr 0.4fr 0.5fr 0.5fr 0.4fr 0.4fr;
	gap: 15px;
	padding: 0 0 10px;
	font-size: 13px;
	color: #555;
	border-bottom: 2px solid #D8E4F8;
}
.service-row {
	display: grid;
	grid-template-columns: 0.4fr 0.8fr 1.5fr 0.4fr 0.5fr 0.5fr 0.4fr 0.4fr;
	gap: 15px;
	align-items: center;
	min-height: 68px;
	padding: 15px 0;
	border-bottom: 1px solid #ECECEC;
}
.service-row:last-child {
	border-bottom: none;
}
.service .status {
	width: 75px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 3px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}
.service .status.using {
	background: #F37A49;
}
.service .status.unused {
	background: #8B8B8B;
}
.service .service-name {
	font-size: 16px;
	font-weight: 600;
}
.service .description {
	font-size: 12px;
	line-height: 1.6;
}
.service .usage {
	font-size: 14px;
}
.service .bar {
	width: 100px;
	height: 12px;
	background: #E3E6EE;
	margin-bottom: 5px;
	overflow: hidden;
}
.service .bar span {
	display: block;
	height: 100%;
	background: #24427F;
}
.service .saving {
	color: #24427F;
	font-size: 16px;
	font-weight: 700;
}
.service-row > div:nth-child(7) {
	font-size: 15px;
}
.service .manage-btn, .service .start-btn {
	width: 90px;
	height: 36px;
	border: none;
	border-radius: 3px;
	font-size: 14px;
	cursor: pointer;
	transition: 0.3s;
}
.service .manage-btn {
	background: #D6E2F0;
	color: #24427F;
}
.service .manage-btn:hover {
	background: #C3D3E7;
}
.service .start-btn {
	background: #24427F;
	color: #fff;
}
.service .start-btn:hover {
	background: #18305F;
}
@media (max-width: 1300px) {
	.service-header {
		display: none;
	}
	.service-row {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 20px 0;
		min-height: auto;
	}
	.service-name {
		font-size: 17px;
	}
}
@media (max-width: 700px) {
	.service-card {
		padding: 0 20px;
	}
	.service-name {
		font-size: 16px;
	}
	.service .saving {
		font-size: 18px;
	}
	.service .service-name {
		font-size: 18px;
	}
	.service .description {
		font-size: 15px;
	}
	.service .usage {
		width: 100%;
	}
	.service .usage p {
		font-size: 14px;
	}
	.service .bar {
		width: 100%;
		height: 14px;
	}
	.service .manage-btn, .service .start-btn {
		width: 100%;
		height: 40px;
	}
}
/* 優待・クーポン検索 */
.coupon-grid,
.process-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.coupon-card,
.process-card {
	position: relative;
	background: #fff;
	border-radius: 10px;
	padding: 25px 25px 30px;
	text-align: center;
	min-height: 300px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .05);
}
.process-card {
	display: flex;
	flex-direction: column;
}
.coupon .corner,
.process .corner {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 0;
	height: 0;
	border-top: 18px solid #24427F;
	border-right: 18px solid transparent;
	border-radius: 4px;
}
.process-card-resign .corner {
	border-top-color: #A33B3B;
}
.coupon .discount {
	color: #E25D3C;
	font-weight: 700;
	margin-bottom: 12px;
	font-size: 26px;
}
.coupon .discount .number {
	font-size: 58px;
	line-height: 1;
}
.coupon .tags {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.coupon .tag {
	background: #F4EBE4;
	color: #5B4737;
	font-size: 12px;
	padding: 5px 10px;
	border-radius: 3px;
}
.coupon-card h2,
.process-card h2 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 14px;
	min-height: 50px;
}
.coupon-card p,
.process-card p {
	font-size: 14px;
	line-height: 1.8;
	color: #333;
	margin-bottom: 20px;
	min-height: 50px;
}
.process-card p {
	flex-grow: 1;
}
.coupon-card button,
.process-card .process-btn {
	width: 100%;
	height: 42px;
	background: #24427F;
	color: #fff;
	border: none;
	border-radius: 3px;
	font-size: 16px;
	cursor: pointer;
	transition: 0.3s;
}
.process-card .process-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
.coupon-card button:hover,
.process-card .process-btn:hover {
	background: #18305F;
	color: #fff;
}
.process-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #EAF0F8;
	color: #24427F;
	font-size: 26px;
}
.process-icon-resign {
	background: #F8ECEC;
	color: #A33B3B;
}
.process-card .process-btn-resign {
	background: #A33B3B;
}
.process-card .process-btn-resign:hover {
	background: #852F2F;
	color: #fff;
}
@media (max-width: 1200px) {
	.coupon-grid,
	.process-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 700px) {
	.coupon-container {
		width: 92%;
		margin: 25px auto;
	}
	.coupon-grid,
	.process-grid {
		grid-template-columns: 1fr;
	}
	.coupon-card,
	.process-card {
		padding: 25px 20px;
	}
	.coupon .discount .number {
		font-size: 48px;
	}
	.coupon .coupon-card h2,
	.process-card h2 {
		font-size: 17px;
	}
}
/* コミュニティ */
.community-layout {
	display: grid;
	grid-template-columns: 1fr 330px;
	gap: 20px;
}
.community .post-card {
	background: #fff;
	border-radius: 10px;
	padding: 22px 25px;
	margin-bottom: 20px;
	box-shadow:
		0 1px 5px rgba(0, 0, 0, .05);
}
.community .post-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}
.community .user {
	display: flex;
	align-items: center;
	gap: 12px;
}
.community .avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}
.community .avatar.blue {
	background: #245BDB;
}
.community .avatar.green {
	background: #16A66B;
}
.community .avatar.brown {
	background: #854f0b;
}
.community .name-area {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.community .name {
	font-weight: 700;
}
.community .label {
	background: #F4EBE4;
	color: #442c29;
	padding: 3px 8px;
	font-size: 12px;
	border-radius: 4px;
}
.community .profile, .community .time {
	color: #888;
	font-size: 13px;
}
.community .post-card h2 {
	font-size: 17px;
	color: #24427f;
	font-weight: bold;
	margin-bottom: 12px;
}
.community .post-card p {
	line-height: 1.8;
	font-size: 14px;
	margin-bottom: 17px;
}
.community .reaction {
	display: flex;
	gap: 20px;
	color: #8c8c8c;
	font-size: 13px;
}
.comm-icon01 {
	background-image: url("../images/comm_icon01.png");
	background-repeat: no-repeat;
	background-position: 0 1px;
	padding-left: 24px;
}
.comm-icon02 {
	background-image: url("../images/comm_icon02.png");
	background-repeat: no-repeat;
	background-position: 0 1px;
	padding-left: 26px;
}
.comm-icon03 {
	background-image: url("../images/comm_icon03.png");
	background-repeat: no-repeat;
	background-position: 0 2px;
	padding-left: 20px;
}
.community .side-card {
	background: #fff;
	border-radius: 10px;
	padding: 20px 20px 10px;
	margin-bottom: 20px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .05);
}
.community .side-card h3 {
	color: #24427F;
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 5px;
	background-repeat: no-repeat;
}
.community .side-card .comm-tit03 {
	margin-bottom: 15px;
}
.comm-tit01 {
	background-image: url("../images/comm_icon04.png");
	background-position: 0 -2px;
	padding-left: 30px;
}
.comm-tit02 {
	background-image: url("../images/comm_icon05.png");
	background-position: 0 -1px;
	padding-left: 30px;
}
.comm-tit03 {
	background-image: url("../images/comm_icon06.png");
	background-position: 0 0;
	padding-left: 30px;
}
.community .side-card ul {
	list-style: none;
}
.comm-rank li {
	display: grid;
	grid-template-columns: 20px 80px 130px 50px;
	padding: 12px 5px;
	border-bottom: 1px solid #EEE;
	font-size: 14px;
}
.comm-topic li {
	padding: 12px 5px;
	border-bottom: 1px solid #EEE;
	font-size: 13px;
}
.community .side-card .no {
	color: #f4744d;
}
.comm-txt01 {
	color: #9b9b9b;
	padding-top: 2px;
}
.comm-txt02 {
	color: #24427f;
	font-weight: bold;
	font-size: 15px;
}
.community .side-card li:last-child {
	border-bottom: none;
}
.community .side-card li span {
	color: #24427F;
	font-weight: 700;
}
.community .join-btn {
	width: 100%;
	height: 46px;
	border: none;
	border-radius: 4px;
	background: #24427F;
	color: #fff;
	font-size: 14px;
	cursor: pointer;
	margin-bottom: 13px;
}
.community .join-btn:hover {
	background: #18305F;
}
.com-sidebar section:last-child {
	margin-bottom: 0;
}
@media (max-width: 1100px) {
	.community-layout {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 700px) {
	.community .post-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.community .reaction {
		flex-wrap: wrap;
		gap: 12px;
	}
	.community .avatar {
		width: 44px;
	}
	.search-input {
		padding: 15px 20px;
	}
}
/* =========================
   社団
========================= */
.soci-logo {
	width: 60px;
	margin: 0 auto;
}
.soci-welcome {
	background-color: #24427f;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .02);
}
.soci-welcome-text {
	padding: 39px 40px;
	background-image: url("../images/soci_fv.jpg");
	background-repeat: no-repeat;
	background-position: right 0;
}
.soci-welcome-text h2 {
	font-size: 26px;
	margin-bottom: 12px;
	font-weight: bold;
	color: #fff;
}
.soci-welcome-text p {
	color: #fff;
	line-height: 1.8;
}
.soci-empty {
	margin: 12px 0 0;
	color: #666;
	font-size: 14px;
}
.soci-schedule-card {
	margin-top: 30px;
}
.soci-schedule-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}
.soci-schedule-list li {
	display: flex;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid #e8e8e8;
	font-size: 14px;
	line-height: 1.5;
}
.soci-schedule-list li:last-child {
	border-bottom: none;
}
.soci-schedule-date {
	flex: 0 0 8.5em;
	color: #666;
}
.soci-schedule-title {
	flex: 1;
	color: #333;
}
.soci-business-card h2 {
	margin-bottom: 16px;
}
.soci-business-action .change-form-btn {
	display: inline-flex;
	width: auto;
	min-width: 140px;
	padding-left: 24px;
	padding-right: 24px;
}
.soci-business-action .change-form-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
.soci-lower-area {
	margin-top: 25px;
}
.soci .box-header h3 {
	font-size: 16px;
}
.soci .tit-icon01 {
	padding-left: 35px;
	background-size: auto 100%;
	color: #24427f;
}
.soci .profile .info-area {
	display: block;
	grid-template-columns: none;
	gap: 0;
	margin-bottom: 25px;
}
.soci .tit-icon03 {
	background-image: url(../images/soci_icon01.png);
	background-repeat: no-repeat;
	padding-left: 35px;
}
.soci .tit-icon04 {
	background-image: url(../images/soci_icon02.png);
	background-repeat: no-repeat;
	padding-left: 35px;
}
.soci .profile table th {
	width: 240px;
}
.soci .category {
	width: 40px;
	height: 24px;
	margin-right: 20px;
}
.soci-cate-blue {
	background: #cad9ea;
	color: #19335e;
}
.app .info-area {
	margin-bottom: 0;
}
@media (max-width: 700px) {
	.soci-welcome-text h2 {
		font-size: 18px;
		margin-bottom: 8px;
	}
	.soci-welcome-text {
		background-image: none;
		padding: 25px;
	}
	.soci-welcome-text p {
		color: #fff;
		line-height: 1.8;
		font-size: 14px;
	}
	.soci .category {
		margin-bottom: 6px;
	}
	.soci-logo {
		padding-top: 2px;
	}
}
/* =========================
   COB、JOB
========================= */
.cob-welcome {
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .02);
}
.cob-welcome-text {
	padding: 38px 40px;
	background-image: url("../images/cob_fv.jpg");
	background-repeat: no-repeat;
	background-position: right 0;
}
.cob-welcome-text h2 {
	font-size: 26px;
	margin-bottom: 12px;
	font-weight: bold;
}
.cob-welcome-text p {
	line-height: 1.8;
}
.cob-card01 {
	background: #fff;
	border-radius: 8px;
	padding: 32px 30px 32px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
	display: grid;
	grid-template-columns: 1fr 100px;
	gap: 15px;
}
.cob-card02 {
	background: #fff;
	border-radius: 8px;
	padding: 32px 30px 32px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
	display: grid;
	grid-template-columns: 1fr 160px;
	gap: 15px;
}
.cob-card01 p, .cob-card02 p {
	font-size: 15px;
	display: grid;
	align-items: center;
}
.confirm-btn {
	width: 100%;
	height: 40px;
	border: none;
	border-radius: 3px;
	font-size: 14px;
	cursor: pointer;
	transition: 0.3s;
	background: #24427F;
	color: #fff;
}
a.confirm-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	box-sizing: border-box;
}
.cob-tit {
	font-size: 16px;
	color: #24427f;
	font-weight: bold;
	margin-bottom: 15px;
}
body .cob-side .menu-group {
	border-bottom: none;
}
.cob-side div:first-child {
	padding-bottom: 0;
	padding-top: 13px;
}
.cob-side h3 {
	margin-bottom: 0;
}
.job-logo {
	width: 130px;
	margin: 0 auto;
}
.job-welcome {
	background-color: #24427f;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .02);
}
.job-welcome-text {
	padding: 38px 40px;
	background-image: url("../images/job_fv.jpg");
	background-repeat: no-repeat;
	background-position: right 0;
}
.job-welcome-text h2 {
	font-size: 26px;
	margin-bottom: 12px;
	font-weight: bold;
	color: #fff;
}
.job-welcome-text p {
	color: #fff;
	line-height: 1.8;
}
@media (max-width: 700px) {
	.cob-welcome-text h2 {
		font-size: 18px;
		margin-bottom: 8px;
	}
	.cob-welcome-text {
		background-image: none;
		padding: 25px;
	}
	.cob-welcome-text p {
		line-height: 1.8;
		font-size: 14px;
	}
	.cob-card01, .cob-card02 {
		padding: 25px;
		display: block;
	}
	.cob-logo {
		width: 105px;
		margin: 0 auto;
		padding-top: 1px;
	}
	.job-logo {
		width: 110px;
		margin: 0 auto;
		padding-top: 4px;
	}
	.job-welcome-text h2 {
		font-size: 18px;
		margin-bottom: 8px;
	}
	.job-welcome-text {
		background-image: none;
		padding: 25px;
	}
	.job-welcome-text p {
		color: #fff;
		line-height: 1.8;
		font-size: 14px;
	}
}

/* 支払い方法変更 */
.change-card {
	background: #ffffff;
	border-radius: 10px;
	padding: 40px 42px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, .05);
	border-left: 5px solid #24427F;
	max-width: 720px;
}
.change-card-title {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 700;
	color: #24427F;
	line-height: 1.5;
}
.change-card-text {
	margin: 0 0 28px;
	font-size: 15px;
	line-height: 1.9;
	color: #444;
}
.change-form-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 240px;
	height: 46px;
	padding: 0 28px;
	background: #24427F;
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 4px;
	transition: background 0.3s;
}
.change-form-btn:hover {
	background: #18305F;
	color: #ffffff;
}
.change-form-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}
@media (max-width: 700px) {
	.change-card {
		padding: 28px 22px;
	}
	.change-card-title {
		font-size: 18px;
	}
	.change-card-text {
		font-size: 14px;
		margin-bottom: 24px;
	}
	.change-form-btn {
		width: 100%;
		min-width: 0;
	}
}