@charset "utf-8";

img {
	max-width: 100%;
	height: auto;
}
section {
	margin-bottom: 54px;
}
.mv-point {
	margin-bottom: 64px;
}
#contents h2.primary-heading {
	font-size: 157%;
	text-align: center;
	margin-bottom: 24px;
}
.primary-heading_main {
	color: #009900;
	font-weight: bold;
}
.point-area {
	text-align: center;
}
#contents .point-area p {
	margin-bottom: 24px;
}
.point-list {
	list-style: none;
	display: flex;
	width: 600px;
	justify-content: space-between;
	margin: 0 auto 20px;
}
.point-item_inner img {
	width: 168px;
}
.point-item_inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
#contents p.point-text {
	margin-bottom: 0;
}
.text-notes {
	color: #f72900;
	font-weight: bold;
	text-align: left;
	padding-left: 40px;
	text-indent: -1em;
}
.heading_decoration {
	position: relative;
}
.heading_decoration::before, .heading_decoration::after {
	content: "";
	display: inline-block;
	width: 22px;
	height: 20px;
	position: absolute;
}
.heading_decoration::before {
	background: url(/kojin/sokin/yuchopay/images/point/line-left.png) no-repeat;	
	left: -30px;
}
.heading_decoration::after {
	background: url(/kojin/sokin/yuchopay/images/point/line-right.png) no-repeat;	
}
.circle-num, .circle-num-s {
	display: inline-flex;
	color: #333;
	font-weight: bold;
	background-color: #fff;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	margin: 0 2px;
	letter-spacing: -0.8px;
	line-height: 1;
}
.circle-num {
	width: 28px;
	height: 28px;
	margin: 0 4px 3px;
}
.circle-num-s {
	width: 22px;
	height: 22px;
}
/* .service-lead {
	background-color: #E78987;
	padding: 8px 0;
	border-radius: 50px;
	border: 3px solid #DF5177;
	margin-bottom: 20px;
}
#contents .service-lead > p {
	font-size: 134%;
	color: #fff;
	text-align: center;
	font-weight: bold;
	margin-bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.service-lead .circle-num {
	font-size: 82%;
} */
#contents h3.tertiary-heading {
	font-size: 129%;
	position: relative;
	align-items: center; 
	display: flex; 
	justify-content: center;
	margin-bottom: 16px;
}
.tertiary-heading::before, .tertiary-heading::after {
	content: "";
	height: 3px;
	width: 25px;
	background-color: #009900; 
	border-radius: 5px; 
	
}
.tertiary-heading::before {
	margin-right: 10px; 
	transform: rotate(60deg); 
}
.tertiary-heading::after {
	margin-left: 10px; 
	transform: rotate(-60deg); 
}
/* .service-attention {
	border: 3px solid #DF5177;
	border-radius: 4px;
	padding: 6px 10px 3px;
	margin-bottom: 20px;
}
#contents .service-attention > p {
	font-size: 124%;
	font-weight: bold;
	text-align: center;
	margin-bottom: 0;
} */

/**table**/
.service {
	border: 1px solid #ccc;
	position: relative;
}
.col-1 {
	width: 1%;
}
.col-2 {
	width: 5%;
}
.col-3 {
	width: 18%;
}
.col-4 {
	width: 24%;
}
.col-5 {
	width: 17%;
}
.col-6 {
	width: 12%;
}
.col-7 {
	width: 10%;
}
.col-8 {
	width: 10%;
}
.table-scroll {
	overflow-y: scroll;
	scrollbar-width: thin;
	border-right: none;
	height: 90svh;
	margin-bottom: 24px;
	border-radius: 20px 0;
	border-top-right-radius: 40px 40px;
	border-top-left-radius: 40px 40px;
	border-bottom: 1px solid #efefef;
}
.service thead {
	position: sticky;
	top: -1px;
	z-index: 1;
}
table.service , td, th {
	border-collapse: separate;
}
.service td,
.service th {
	vertical-align: middle;
	padding: 10px 5px;
	line-height: 1.3;
}
.service td {
	font-size: 93%;
}
.service th {
	text-align: center;
	font-weight: bold;
}
.service tbody th {
	border-left: 1px solid #009900;
	border-bottom: 1px solid #009900;
}
.service tbody th.bd_right {
	border-right: 1px solid #009900;
}
.service tbody td {
	border-right: 1px solid #009900;
	border-bottom: 1px solid #009900;
	font-size: 90%;
}
.thead-main {
	background-color: #009900;
	color: #fff;
	width: 100%;
}
.thead-right {
	border-left: 1px solid #fff;
}
.thead-sub {
	background-color: #BDE184;
	color: #009900;
	width: 100%;
}
.thead-sub th {
	border: 1px solid #fff;
	border-right: none;
}
.thead-sub th {
	padding: 10px 0;
}
.service span {
	font-size: 82%;
}
.number {
	text-align: center;
}
ol {
	list-style: none;
}
.bg_blue {
	background-color: #6BB9D3;
}
.bg_red {
	background-color: #E78987;
}
.bg_sky-blue {
	background-color: #b0daee;
}
.bg_light-blue {
	background-color: #D7E6EB;
	padding: 10px 0px;
}
.bg_light-red {
	background-color: #FFE2DB;
}
.bg_light-red {
	background-color: #FFE2DB;
}
.bg_orange {
	background-color: #FFF7E4;
}
span.font-s {
	font-size: 82%;
	font-weight: bold;
}
#contents p.label-heading-white {
	font-size: 128%;
	font-weight: bold;
	text-align: center;
	padding: 8px 0;
	border: 3px solid #DF5177;
	border-radius: 5px;
}
.list-type__notesNum {
	margin-bottom: 64px;
}
/**アコーディオン**/
details {
	position: relative;
	border-top: 1px solid #666666;
	margin: 10px 0;
}
.more {
	list-style-type: none;
	position: absolute;
	right: 55px;
	top: -30px;
	cursor: pointer;
	display: block;
	border: 1px solid #333;
	padding: 0 30px 0 15px;
	border-radius: 10px;
}
.more::-webkit-details-marker {
	display: none;
}
.more:before, .more:after {
	content: '';
	display: inline-block;
	position: absolute;
	background-color: #333;
	transition: transform 0.3s ease;
}
details[open] .more::before {
	transform: scaleY(0);
}
.more:before {
	width: 2px;
	height: 15px;
	top: 3px;
	right: 18px;
}
.more:after {
	width: 15px;
	height: 2px;
	top: 9px;
	right: 11px;
}
.more-inner {
	padding: 20px 0;
	border-bottom: 1px solid #666666;
}
.img-list {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-bottom: 15px;
}
.img-list li {
	padding: 10px;
	border: 1px solid #666666;
	border-radius: 5px;
}
.img-item {
	display: flex;
	flex-direction: column;
}
#contents p.more-title {
	font-size: 93%;
	font-weight: bold;
	margin-bottom: 5px;
	padding-left: 16px;
	position: relative;
}
.more-title::before {
	content: "";
	display: inline-block;
	background-color: #333;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	position: absolute;
	top: 2px;
	left: 0;
}
.img-list img:first-of-type {
	width: 100%;
}
.img-list img {
	width: 190px;
}
.close-btn {
	cursor: pointer;
	display: block;
	border: 1px solid #333;
	padding: 0 30px 0 25px;
	border-radius: 10px;
	margin: 0 auto;
	position: relative;
}
.close-btn::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 2px;
	background-color: #333;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 10px;
}
.point-chart {
	display: flex;
	margin-bottom: 24px;
}
.point-chart img {
	max-width: fit-content;
}
.fix {
	position: sticky;
	left: 0;
	z-index: 1;
}
.fix::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	z-index: -1;
}
.img-center {
	text-align: center;
	margin-bottom: 20px;
}
.column-2 {
	display: flex;
	justify-content: center;
	margin-bottom: 72px;
}
.column-left {
	text-align: center;
	margin-right: 40px;
}
.column-right {
	display: inline-flex;
	align-items: center;
}
.circle-list {
	list-style: none;
	counter-reset: number 0;
	margin-top: 40px;
}
.circle-list li {
	line-height: 1.5;
	margin-bottom: 25px;
	position: relative;
	padding-left: 40px;
}
.circle-list li::before {
	counter-increment: number 1;
	content: counter(number);
	background-color: #009900;
	color: #fff;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
}
.bl_cta {
	margin: 0 auto;
	box-sizing: border-box;
	background: #eff6cd;
	border: 3px solid #009900;
	border-radius: 10px;
	padding: 20px;
}
.w-600 {
	max-width: 600px;
	width: 100%;
	margin: 0 auto 10px;
}
#contents .bl_cta_ttl {
	font-size: 100%;
	text-align: center;
	margin-bottom: 24px;
}
.bl_cta_ttl span {
	display: block;
	font-weight: bold;
	margin-bottom: 8px;
}
.bl_cta_app {
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 32px;
}
.bl_cta_app > li {
	padding: 0 10px 0 0;
	font-size: 112.5%;
	font-weight: bold;
	text-align: center;
}
.bl_cta_app img {
	display: block;
}
.el_appBanner {
	width: auto;
	height: 40px;
}
.el_qr {
	width: auto;
	height: 100px;
}
.hp_mt_5em {
	margin-top: 0.5em !important;
}
#contents p.hp_ta_c {
	text-align: center;
	margin: 0;
}
a.bl_cta_detail {	
	color: #009900;
	font-weight: bold;
	font-size: 128%;
	position: relative;
}
a.bl_cta_detail::after {
	content: "";
	border: 8px solid transparent;
	border-left: 12px solid #009900;
	position: absolute;
	top: 4px;
	right: -24px;
}
.yuchopay-wrap {
	display: grid;
	grid-template-columns	:3fr 1fr;
	grid-template-rows: auto auto;
}
.yuchopay-title {
	grid-column: 1/2;
	grid-row: 1/2;
}
.yuchopay-guide {
	grid-column: 1/2;
	grid-row: 2/3;
}
.yuchopay-screen {
	grid-column: 2/3;
	grid-row: 1/3;
	text-align: center;
}
.list-type__notes {
	margin-bottom: 64px;
}
#contents h4.quaternary-heading {
	margin-bottom: 24px;
	padding-bottom: 5px;
	color: #DF5177;
	text-align: center;
	position: relative;
}
#contents h4.quaternary-heading::after {
	content: "";
	display: inline-block;
	background: url(/kojin/sokin/yuchopay/images/point/heading-line.png);
	width: 363px;
	height: 13px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -10px;
}
.column-wrap {
	flex-wrap: wrap;
	gap: 20px;
}
.button-column2__item:first-child {
	margin-right: 0;
}
.bl_footerModalitem {
	display: flex;
	flex-direction: column;
}
.button_modal01 p, .bl_footerModalitem p {
	font-weight: bold;
}
.button_modal01 > ul > li {
	text-align: center;
	font-weight: bold;
}

@media screen and (max-width: 479px) {
	#contents h1.mv-point {
		margin-bottom: 40px;
		margin-left: -20px;
		margin-right: -10px;
		margin-top: -20px;
	}
	section {
		margin-bottom: 48px;
	}
	#contents h2.primary-heading {
		font-size: 143%;
	}
	#contents h3.label-heading {
		font-size: 129%;
		padding: 8px 10px;
		border-radius: 15px;
		width: fit-content;
		margin: 0 auto 24px;
	}
	#contents p.label-heading-white {
		margin-bottom: 24px;
	}
	.point-list {
		width: 100%;
		flex-direction: column;
		gap: 15px;
	}
	.point-item_inner {
		display: flex;
		flex-direction: column;
		gap: 10px;
		flex-direction: row;
		align-items: center;
	}
	.point-item_inner img {
		width: 37%;
	}
	#contents p.point-text {
		text-align: left;
	}
	.list-type__notesNum {
		margin-bottom: 48px;
	}
	#contents h4.quaternary-heading {
		margin-bottom: 32px;
	}
	#contents h4.quaternary-heading::after {
		width: 90%;
		height: 15px;
		background-size: contain;
		background-repeat: no-repeat;
		bottom: -15px;
	}
	.text-notes {
		padding-left: 15px;
	}
	/* .service-lead {
		padding: 8px;
		border-radius: 16px;
	}
	#contents .service-lead > p {
		font-size: 118%;
		display: block;
	}
	.service-lead .circle-num {
		font-size: 78%;
		width: 24px;
		height: 24px;
	} */
	/* .service-attention {
		margin-bottom: 15px;
	}
	#contents .service-attention > p {
		font-size: 114%;
	} */
	#contents table.service {
		width: 680px;
	}
	.table-scroll {
		overflow-x: auto;
		overflow-y: auto;
		height: 80svh;
		border-radius: 0;
		border-top-right-radius: 0 0;
		border-top-left-radius: 0 0;
	}
	.thead-left {
		position: sticky;
		left: 0;
		z-index: 1;
	}
	th.thead-left::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #009900;
		z-index: -1;
	}
	.thead-right {
		text-align: left;
		padding-left: 30px;
	}
	.col-3 {
		width: 10%;
	}
	.sp_fix {
		position: sticky;
		left: 0;
	}
	.sp_fix.sp_fix_l2 {
		left: 37.48px;
	}
	.sp_fix.sp_fix_l3 {
		left: 73.86px;
	}
	.p-cmn-img_sp_scroll {
		overflow-x: auto;
		width: 100%;
	}
	.column-left {
		width: 40%;
		margin-right: 10px;
	}
	.column-right {
		width: 60%;
	}
	.circle-list li {
		margin-bottom: 15px;
	}
	.circle-list li::before {
		width: 25px;
		height: 25px;
		left: 8px;
	}
	#contents p.label-heading-white {
		font-size: 114%;
	}
	.more {
		right: 10px;
	}
	.img-list {
		flex-direction: column;
	}
	.img-item {
		flex-direction: row;
		justify-content: space-between;
	}
	.img-list img {
		max-width: 50%;
	}
	#contents h3.tertiary-heading {
		font-size: 100%;
	}
	.tertiary-heading::before, .tertiary-heading::after {
		margin: 0;
	}
	.point-chart {
		overflow-y: scroll;
		margin-bottom: 16px;
	}
	.button-column2__item:first-child {
		margin-bottom: 0;
	}
	a.bl_cta_detail {
		font-size: 100%;
	}
	.bl_cta_app {
		margin-bottom: 16px;
	}
	#contents .bl_cta_ttl {
		padding: 0;
		width: 95%;
		margin: 0 auto 16px;
	}
	.bl_cta {
		padding: 20px 10px;
	}
	.el_appBanner {
		height: 35px;
	}
	.bl_cta_app > li {
		padding: 0;
	}
	.bl_cta_app li:nth-child(1) {
		padding-right: 10px;
	}
	.yuchopay-wrap {
		gap: 10px 0;
	}
	.bl_footerModalitem {
		flex-direction: row;
		align-items: center;
		gap: 10px;
	}
	.column-wrap {
		margin-bottom: 64px;
	}
	.button-column2 {
		gap: 20px 10px;
	} 
	.button-column2__item {
		flex: 0 0 48%;
	}
	.button-link {
		width: auto;
		padding: 7px 0;
		font-size: 93%;
	}
	.button-link:before {
		right: 12px;
	}
}

@media screen and (max-width: 320px) {
	#contents h3.label-heading {
		font-size: 126%;
	}
	.column-2 {
		justify-content: space-between;
	}
	.column-left {
		width: 44%;
	}
	.column-right {
		width: 58%;
	}
	details {
		margin: 30px 0 10px;
	}
	.more {
		top: -30px;
	}
	a.bl_cta_detail::after {
		top: 5px;
		right: -24px;
	}
	.yuchopay-wrap {
		grid-template-rows: auto 1fr;
	}
	.yuchopay-guide {
		grid-column: 1/3;
		grid-row: 2/3;
	}
	.yuchopay-screen {
		grid-row: 1/2;
	}
	.yuchopay-title .bl_cta_ttl span {
		margin-bottom: 20px;
	}
}

/* 税公金支払い（QRコード）ご利用キャンペーン */
.service-campaign {
	border: 2px solid #009900;
	border-radius: 20px;
	padding: 20px;
}
.service-campaign .primary-heading .heading_decoration {
	color: #ff0000;
	font-size: 138%;
	display: block;
}
.service-campaign .primary-heading .heading_decoration::before,
.service-campaign .primary-heading .heading_decoration::after {
	background: none;
	content: "";
	height: 3px;
	width: 32px;
	background-color: #ff0000;
	border-radius: 5px;
	margin-bottom: 9px;
	position: static;
}
.service-campaign .primary-heading .heading_decoration::before {
	margin-right: 12px;
	transform: rotate(60deg);
}
.service-campaign .primary-heading .heading_decoration::after {
	margin-left: 5px;
	transform: rotate(-60deg);
}
.service-campaign .primary-heading span {
	color: #009900;
	font-weight: bold;
	display: inline-block;
	margin-bottom: 10px;
}
.campaign-column {
	display: flex;
	gap: 15px;
}
.campaign-column figure {
	text-align: center;
	width: 50%;
}
.campaign-column figure img {
	width: 340px;
}
.campaign-link {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	width: calc(50% - 15px);
}
#contents .campaign-link p {
	color: #009900;
	font-size: 142%;
	font-weight: bold;
	position: relative;
	margin-bottom: 15px;
}
.campaign-link p::after {
	content: "";
	border: 16px solid transparent;
	border-left: 12px solid #009900;
	position: absolute;
	left: 50%;
	bottom: -34px;
	transform: translateX(-50%) rotate(90deg);
}
.campaign-link .el_qr {
	width: 120px;
	height: 120px;
}
@media screen and (max-width: 479px) {
	.service-campaign {
		padding: 15px;
	}
	#contents .service-campaign .primary-heading {
		font-size: 115%;
	}
	.service-campaign .heading_decoration {
		font-size: 149%;
	}
	.service-campaign .heading_decoration::before,
	.service-campaign .heading_decoration::after {
		width: 26px;
		margin-bottom: 7px;
	}
	.campaign-column {
		flex-direction: column;
	}
	.campaign-column figure {
		text-align: center;
		width: 100%;
	}
	.campaign-column figure img {
		width: 100%;
		max-width: 340px;
	}
	.campaign-link {
		width: 100%;
	}
	#contents .campaign-link p {
		font-size: 118%;
	}
	#contents .campaign-link p a {
		color: #009900;
		font-weight: bold;
	}
	.campaign-link p::after {
		border: 8px solid transparent;
		border-left: 12px solid #009900;
		left: initial;
		bottom: initial;
		right: -26px;
		top: 4px;
		transform: none;
	}
	.campaign-link .el_qr {
		display: none;
	}
	.campaign-link .bl_cta_detail {
		font-size: 115%;
	}
}