@charset "UTF-8";
/* service.css */

/* === service card === */
.card {
	position: relative;
	padding: 50px;
	padding-left:  min(3.9vw,50px);
	padding-right: min(3.9vw,50px);
	border-radius: 20px;
	background-color: #fff;
}
/* maxWidth */
.card_contWrap {
	max-width: 980px;
	margin-left:  auto;
	margin-right: auto;
}
/* カード大見出し */
.card_head img {
	height: 6.5vw;
	max-height: 76px;
}
/* 左右コンテンツ */
.card .left_cont  {
	width: calc(60% - 15px);
}
.card .right_cont {
	width: calc(40% - 15px);
}
/*カード右上のアイコン */
.card .icon_wrap {
	position: absolute;
	top:   0;
	right: 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	transform: translate(-40px,50px);
}
.card .icon_wrap .img_wrap {
	width: 8vw;
	max-width: 85px;
}
.card .icon_wrap .img_wrap:not(:first-of-type) {
	margin-left: 1vw;
}
.card .icon_wrap img {
	width:  100%;
	height: 100%;
}

/* 背景色つきBOX */
.color_box {
	padding: 30px;
	border-radius: 10px;
	background-color: #ccc;
}
.li_sankaku {
	letter-spacing: .12em;
	line-height: 1.9em;
	text-indent:  -19px;
	padding-left: 19px;
}
.card ul li:not(:first-of-type) {
	margin-top: .5em;
}
.sankaku    {
	font-size: 14px;
	margin-right: 5px;
}
.plus_icon {
	width: fit-content;
	align-self: center;
}
.plus_icon img  {
	width: 40px;
}
/* card-table */
.card .table_flex {
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
}
.card .table_flex > div.cont_wrap {
	width: calc(100%/2 - 40px);
	width: calc(100%/2 - min(6vw,40px));
}
.card .table_wrap {
	overflow-x: scroll;
}
.card table {
	width: 100%;
	min-width: 440px;
}
.card table + table th {
	min-width: 13.4em;
}
.card tr:not(:first-of-type) th:before {
	content: "";
	width: 100%;
	height: 1px;
	position: absolute;
	top:  0;
	left: 0;
	transform: translateY(-1px);
	background-color: #fff;
}
.card thead th:not(:first-of-type):before {
	content: "";
	width:    1px;
	height: 100%;
	position: absolute;
	top: 0;
	left: -1.5px;
	background-color: #fff;
}
.card th,
.card td    {
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	letter-spacing: 0;
	vertical-align: middle;
	padding:   10px;
	border: 2px solid #000;
}
.card th {
	font-size: 18px;
	line-height: 1.5em;
	position: relative;
	color: #fff;
	background-color: #000;
}
.card td {
	color: #231815;
}
.card table strong {
	font-size: 34px;
	font-size: 30px;
}

/* 送迎サービス(みどり) */
.card_green .color_box {
	background-color: #cceae0;
}
.card_green h4,
.sankaku    {
	color: #009362;
}
.card_green h3.h3_maruBox {
	margin-left:  auto;
	margin-right: auto;
	color: #009362;
	border-color: #009362;
	box-shadow: 3px 5px #009362;
}
.card_green th,
.card_green td {
	border: 2px solid #009362;
}
.card_green th {
	min-width: 10em;
	background-color: #009362;
}
.card_green td {
	min-width: 8em;
	background-color: #dbf0e9;
}

/* 付き添いサービス(あお) */
.card_blue h4 {
	color: #007ab4;
}
.card_blue h3.h3_maruBox {
	color: #007ab4;
	border-color: #007ab4;
	box-shadow: 3px 5px #007ab4;
}
.card_blue th,
.card_blue td {
	border: 2px solid #007ab4;
}
.card_blue th {
	background-color: #007ab4;
}
.card_blue td {
	background-color: #d9ebf4;
}

/* 訪問マッサージ(ピンク) */
.card_pink .color_box {
	background-color: #fce9ec;
}
.card_pink h4 {
	color: #ec6d81;
}
.card_pink h3.h3_maruBox {
	color: #ec6d81;
	border-color: #ec6d81;
	box-shadow: 3px 5px #ec6d81;
}
.card_pink th,
.card_pink td {
	border: 2px solid #ec6d81;
}
.card_pink th {
	background-color: #ec6d81;
}
.card_pink td {
	background-color: #fce9ec;
}
.card_pink dt {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}
.card_pink dt .title {
	min-width: 14.5em;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25em;
	letter-spacing: .12em;
	margin-right:  20px;
	margin-bottom: 10px;
	color: #ec6d81;
}
.card_pink dt .box {
	font-size:   18px;
	font-weight: 500;
	margin-left: 10px;
	padding: 2.5px 20px;
	color: #fff;
	border-radius: 50px;
	background-color: #ec6d81;
}
.card_pink dt .cont {
	line-height: 1.9em;
}
.card_pink dt small {
	font-size: 18px;
}
.card_pink dd {
	width: fit-content;
	font-size: 20px;
	display: flex;
	align-items: baseline;
	align-self: flex-end;
	margin-left: 30px;
}
.card dl .width-fit {
	flex-wrap: wrap;
}
.card dl .width-fit p.title {
	min-width: inherit;
}
.card_pink dd strong {
	font-size: 34px;
	margin-left: .15em;
}
.card .heading_flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.card .heading_flex h4 {
	margin-right: .5em;
	margin-bottom: 15px;
}
.card .heading_flex h3 {
	margin-bottom: 15px;
}
.card dl {
	padding-top: 20px;
	padding-bottom: 30px;
	/* ドット */
	background-image : linear-gradient(to right, #000 2px, transparent 2px);
	background-size: 9px 2px;
	background-repeat: repeat-x;
	background-position: left bottom;
}
.card dt {
	letter-spacing: .12em;
}
.card dl:not(:first-of-type) {
	padding-top: 30px;
}
.card dl div {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
}
.card dl div + dd {
	font-size: 18px;
	font-size: min(2.081vw,18px);
	line-height: 1.9em;
	margin-left: 0;
	margin-top: 10px;
	margin-bottom: 5px;
}
/* 保険適用料金表（ピンク2つめ） */
.table_pinkfee th {
	width: calc(100%/6);
	font-size: 15px;
	padding: 8px;
	color: #000;
	background-color: #f9d3d9;
}
.table_pinkfee th strong {
	font-size: 26px;
	margin-right: .05em;
}
.table_pinkfee th span {
	 font-size: 18px;	
}
.table_pinkfee thead th:not(:first-of-type):before {
	content: none;
}
.table_pinkfee td {
	font-size: 16px;
	padding: 8px;
	background-color: #fff;
}
.table_pinkfee td strong {
	font-size: 26px;
	font-size: clamp(22px,2.6vw,26px);
	letter-spacing: .05em;
	margin-right: .05em;
}
.table_pinkfee .tablecont_none {
	background-image: linear-gradient(to right top, transparent calc(50% - 1px), #ec6d81 50%, #ec6d81 calc(50% + 1px), transparent calc(50% + 2px));
}
.note_flex {
	display: inline-flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.note_flex p {
	font-size: clamp(14px,2.081vw,17px);
}
.note_flex p:not(:last-of-type) {
	margin-right: .65em;
}






/* 行政書士サービス(むらさき) */
.card_purple h4 {
	color: #a74d85;
}
.card_purple h3.h3_maruBox {
	color: #a74d85;
	border-color: #a74d85;
	box-shadow: 3px 5px #a74d85;
}
.card_purple th,
.card_purple td {
	border: 2px solid #a74d85;
}
.card_purple th {
	background-color: #a74d85;
}
.card_purple td {
	background-color: #f2e4ed;
}

/* 影付きリストボックス */
.shadow_box {
	padding: 15px;
	border: 2px solid #a74d85;
	border-radius: 20px;
	box-shadow: 3px 5px #a74d85;
}
.shadow_box li {
	line-height: 1.9em;
	text-indent: -1em;
	padding-left: 1em;
	letter-spacing: .12em;
	color: #a74d85;
}
.shadow_box li:before {
	content: "・";
	color: #a74d85;
}
.shadow_box li:not(:first-of-type) {
	margin-top: 10px;
}

/* ===== responsive ===== */
@media screen and (max-width:949px) {
	.card .icon_wrap {
		transform: translate(-30px,50px);
	}
	/* 送迎サービス */
	.card_green h4 .tab_blk {
		display: block !important;
	}
}


/* ===== responsive ===== */
@media screen and (max-width:768px) {
	/* 共通パーツ */
	h3.h3_maruBox {
		width: 100%;
		letter-spacing: .12em;
		line-height: 1.9;
		padding: 0;
		border: none;
		border-radius: 0;
		background-color: inherit;
		box-shadow: inherit !important;
	}
	.card_contWrap {
		max-width: 500px;
	}
	.card {
		padding: 30px 20px;
		padding: min(8vw,30px) min(6vw,30px);
		border-radius: 10px;
	}
	.color_box {
		padding: 15px;
		border-radius: 5px;
	}
	.card_head {
		width: 100%;
		max-height: 55px;
		margin-left:  auto;
		margin-right: auto;
	}
	.card_head img {
		width: 100%;
		height: auto;
		max-height: inherit;
		min-height: inherit;
	}
	.card_headWrap   {
		width: 100%;
		display: inline-block;
	}
	.card .icon_wrap {
		display: flex;
		align-items: center;
		flex-wrap:   nowrap;
		justify-content: center;
		position: relative;
		margin-top: 10px;
		transform: translate(0);
	}
	.card .icon_wrap .img_wrap {
		width: auto;
		max-width: inherit;
		height: 9vw;
		max-height: 35px;
	}
	.card .icon_wrap .img_wrap:not(:first-of-type) {
		margin-left: 10px;
	}
	.card .left_cont,
	.card .right_cont {
		width: 100%;
	}
	.card table {
		min-width: inherit;
	}
	.card th,
	.card td,
	.card table + table th {
		min-width: inherit !important;
		padding: 5px;
	}
	.card th {
		font-size: 14px;
		letter-spacing: .02em;
	}
	.card table + table th {
		min-width:7.4em !important;
	}
	.card td {
		font-size: 14px;
		min-width: 10em !important;
	}
	.card table strong {
		font-size: 24px;
	}
	/* 最初のコンテンツ */
	#service_about .img_wrap {
		width: 75%;
	}
	/* 送迎サービス(みどり) */
	.card_green h3.h3_maruBox {
		width: 108%;
		letter-spacing: 0;
		transform: scaleX(1) translateX(-4%);
	}
	.card .table_flex {
		flex-wrap: wrap;
		justify-content: center;
	}
	.card .table_flex > div.cont_wrap {
		width: 100%;
	}
	/* 付き添いサービス(あお) */
	.card_blue h3.h3_maruBox {
		width: 110%;
		letter-spacing: 0.07em;
		transform: scaleX(.95) translateX(-5%);
	}

	/* 訪問マッサージ(ピンク) */
	.card_pink .color_box {
		padding-top:    20px;
		padding-bottom: 20px;
		padding: min(4vw,40px);
	}
	.card_pink h3.h3_maruBox {
		letter-spacing: .05em;
		margin-bottom: 0;
		padding: 10px;
		border-radius: 0;
		background-color: #fff;
	}
	.card dl {
		padding-bottom: 20px;
	}
	.card dl:not(:first-of-type) {
		padding-top: 20px !important;
	}
	.card dl div {
		flex-wrap: wrap;
	}
	.card dl div + dd {
		font-size: 16px;
	}
	.card_pink dt {
		width: 100%;
	}
	.card_pink dt .title {
		min-width: inherit;
		font-size: 16px;
		letter-spacing: .12em;
		margin-right: 0;
	}
	.card_pink dt .box {
		font-size: 14px;
		letter-spacing: .05em;
		padding-left:   15px;
		padding-right:  15px;
	}
	.card_pink dt small {
		font-size: 14px;	
	}
	.card_pink dd {
		display: inline-block;
		line-height: 1.9em;
		flex-wrap: wrap;
		margin-top:  0px;
		margin-left: auto;
	}
	.card_pink .width-fit dd {
		margin-top: 0;
	}
	@media screen and (min-width:490px) {
		.br_add {
			display: none !important;
		}	
	}	
	/* 保険適用料金表（ピンク2つめ） */
	.table_pinkfee {
		min-width: 850px !important;
	}
	.note_flex p {
		font-size: 14px;
	}
	
	/* 行政書士サービス(むらさき) */
	.card_purple .shadow_box {
		padding: 0;
		border: none;
		border-radius: 0;
		box-shadow: inherit;
	}
	.card_purple th {
		font-size: 14px;
	}
}