@charset "utf-8";

/* ======================================================
 * service.css
====================================================== */

@media print, screen and (min-width: 768px) {
	
	/* ----- service-box-layout ----- */
	.service-box-layout {
		margin-top: 50px;
		padding: 30px 25px;
		background-color: #e6f9fd;
		border-radius: 10px;
	}
	.service-box-layout > .service-box_text {
		text-align: center;
		color: #0063b7;
		font-size: 2.2rem;
		font-weight: bold;
	}
	
	/* ----- tab-layout-service ----- */
	.tab-layout-service {
		margin-top: 47px;
	}
	.tab-layout-service .tab_list {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-align-items: center;
		align-items: center;
		width: 1200px;
		margin: 0 auto;
	}
	.tab-layout-service .tab_list > li {
		width: 516px;
		height: 320px;
	}
	.tab-layout-service .tab_list > li.is-current {
		width: 596px;
		height: 400px;
	}
	.tab-layout-service .tab_list > li.service01 {
		margin: 0 48px 0 40px;
	}
	.tab-layout-service .tab_list > li.service02 {
		margin: 0 40px 0 48px;
	}
	.tab-layout-service .tab_list > li.service01.is-current,
	.tab-layout-service .tab_list > li.service02.is-current {
		margin: 0;
	}
	.tab-layout-service .tab_list > li > a {
		position: relative;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		width: 100%;
		height: 100%;
		border-radius: 15px;
		color: #fff;
		font-weight: bold;
		font-size: 3.4rem;
		text-decoration: none;
		line-height: 1.4;
		transition: none;
	}
	.tab-layout-service .tab_list > li.service01 > a {
		background: url("/support/service/images/index_bg03.jpg") no-repeat 0 0 / 100% 100%;
	}
	.tab-layout-service .tab_list > li.service02 > a {
		background: url("/support/service/images/index_bg04.jpg") no-repeat 0 0 / 100% 100%;
	}
	.tab-layout-service .tab_list > li.is-current.service01 > a {
		background: url("/support/service/images/index_bg01.jpg") no-repeat 0 0 / 100% 100%;
	}
	.tab-layout-service .tab_list > li.is-current.service02 > a {
		background: url("/support/service/images/index_bg02.jpg") no-repeat 0 0 / 100% 100%;
	}
	.tab-layout-service .tab_list > li > a > span {
		position: relative;
		display: block;
		width: 386px;
		margin: 0 auto;
		padding: 24px;
		border-radius: 10px;
		text-align: center;
	}
	.tab-layout-service .tab_list > li.is-current > a > span {
		background-color: #1684e2;
	}
	.tab-layout-service .tab_list > li > a > span::after {
		position: absolute;
		bottom: -86px;
		left: 50%;
		width: 75px;
		height: 66px;
		margin-left: -37.5px;
		background: url("/support/service/images/index_ic01.png") no-repeat 0 0 / 100% 100%;
		content: "";
	}
	.tab-layout-service > .tab_detail {
		display: none;
		margin-top: 27px;
	}
	.tab-layout-service > .tab_detail .tab_detail_inner {
		width: 1200px;
		margin: 0 auto;
	}
	.tab-layout-service > .tab_detail .tab_detail_inner > *:first-child {
		margin-top: 0 !important;
	}
	
	/* ----- service_column-layout ----- */
	.service_text-lead {
		text-align: center;
		color: #0063b7;
		font-size: 2rem;
		font-weight: bold;
	}
	.service_text-lead + .service_column-layout {
		margin-top: 63px;
	}
	.service_column-layout {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		background-color: #e6f9fd;
	}
	.service_column-layout + .service_column-layout {
		margin-top: 46px;
	}
	.service_column-layout > .service_column_item {
		position: relative;
		width: 420px;
	}
	.service_column-layout > .service_column_item > .service_title {
		position: absolute;
		top: 30px;
		left: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		width: 500px;
		padding: 20px;
		background-color: #1684e2;
		color: #fff;
		font-size: 2.6rem;
		font-weight: bold;
	}
	.service_column-layout > .service_column_item > .service_title::before {
		width: 33px;
		height: 52px;
		margin-right: 26px;
		background: no-repeat 0 0 / 100% 100%;
		content: "";
	}
	.service_column-layout > .service_column_item > .service_title.service_title_number-01::before {
		background-image: url("/support/service/images/index_ic02.png");
	}
	.service_column-layout > .service_column_item > .service_title.service_title_number-02::before {
		background-image: url("/support/service/images/index_ic03.png");
	}
	.service_column-layout > .service_column_item > .service_title.service_title_number-03::before {
		background-image: url("/support/service/images/index_ic04.png");
	}
	.service_column-layout > .service_column_item > .service_title.service_title_number-04::before {
		background-image: url("/support/service/images/index_ic05.png");
	}
	.service_column-layout > .service_column_item > .service_title::after {
		position: absolute;
		bottom: 0;
		right: -21px;
		width: 21px;
		height: 92px;
		background: url("/support/service/images/index_ic06.png") no-repeat 0 0 / 100% 100%;
		content: "";
	}
	.service_column-layout > .service_column_item > .service_detail {
		margin: 161px 30px 15px;
	}
	.service_column-layout > .service_column_item > .service_detail > .service_link-button {
		margin-top: 40px;
	}
	.service_column-layout > .service_column_item > .service_detail > .service_link-button li a {
		position: relative;
		display: block;
		padding: 14px 20px;
		border-radius: 26px;
		background-color: #f5a21b;
		text-align: center;
		text-decoration: none;
		color: #fff;
		font-weight: bold;
		box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.1);
	}
	.service_column-layout > .service_column_item > .service_detail > .service_link-button li a:hover {
		background-color: #eb970f;
	}
	.service_column-layout > .service_column_item > .service_detail > .service_link-button li a::after {
		position: absolute;
		top: 50%;
		right: 19px;
		width: 13px;
		height: 11px;
		margin-top: -6px;
		background: url("/support/common/images/com_ic02.png") no-repeat 0 0 / 100% 100%;
		content: "";
	}
	.service_column-layout > .service_column_item > .service_detail > .service_link-button + .list-note {
		margin-top: 15px;
	}
	.service_column-layout > .service_image-set {
		width: 780px;
	}
}

@media only screen and (max-width: 767px) {
	
	/* ----- service-box-layout ----- */
	.service-box-layout {
		margin-top: 15px;
		padding: 21px 18px;
		background-color: #e6f9fd;
		border-radius: 10px;
	}
	.service-box-layout > .service-box_text {
		text-align: center;
		color: #0063b7;
		font-size: 1.6rem;
		font-weight: bold;
	}
	
	/* ----- tab-layout-service ----- */
	.tab-layout-service {
		margin-top: 25px;
	}
	.tab-layout-service .tab_list {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-align-items: center;
		align-items: center;
		width: 100%;
		margin: 0 auto;
	}
	.tab-layout-service .tab_list > li {
		width: calc(100vw / 2 - 30px / 2 - 25px);
		height: calc(100vw / 2 - 30px / 2 - 25px);
	}
	.tab-layout-service .tab_list > li.is-current {
		width: calc(100vw / 2 - 30px / 2);
		height: calc(100vw / 2 - 30px / 2);
	}
	.tab-layout-service .tab_list > li.service01 {
		margin: 0 15px 0 10px;
	}
	.tab-layout-service .tab_list > li.service02 {
		margin: 0 10px 0 15px;
	}
	.tab-layout-service .tab_list > li.service01.is-current,
	.tab-layout-service .tab_list > li.service02.is-current {
		margin: 0;
	}
	.tab-layout-service .tab_list > li > a {
		position: relative;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		width: 100%;
		height: 100%;
		border-radius: 8px;
		color: #fff;
		font-weight: bold;
		font-size: 1.65rem;
		text-decoration: none;
		transition: none;
	}
	.tab-layout-service .tab_list > li.service01 > a {
		background: url("/support/service/images/index_bg03_sp.jpg") no-repeat 0 0 / 100% 100%;
	}
	.tab-layout-service .tab_list > li.service02 > a {
		background: url("/support/service/images/index_bg04_sp.jpg") no-repeat 0 0 / 100% 100%;
	}
	.tab-layout-service .tab_list > li.is-current.service01 > a {
		background: url("/support/service/images/index_bg01_sp.jpg") no-repeat 0 0 / 100% 100%;
	}
	.tab-layout-service .tab_list > li.is-current.service02 > a {
		background: url("/support/service/images/index_bg02_sp.jpg") no-repeat 0 0 / 100% 100%;
	}
	.tab-layout-service .tab_list > li > a > span {
		position: relative;
		display: block;
		width: 100%;
		padding: 12px 0 6px;
		margin: -20px 8px 0;
		border-radius: 16px;
		text-align: center;
		line-height: 1.2;
	}
	.tab-layout-service .tab_list > li.is-current > a > span {
		margin: -20px 15px 0;
		padding: 12px 7px;
		background-color: #1684e2;
	}
	.tab-layout-service .tab_list > li > a > span::after {
		position: absolute;
		bottom: -39px;
		left: 50%;
		width: 38px;
		height: 33px;
		margin-left: -19px;
		background: url("/support/service/images/index_ic01.png") no-repeat 0 0 / 100% 100%;
		content: "";
	}
	.tab-layout-service > .tab_detail {
		display: none;
		margin-top: 16px;
	}
	.tab-layout-service > .tab_detail .tab_detail_inner {
		width: 100%;
		margin: 0 auto;
	}
	.tab-layout-service > .tab_detail .tab_detail_inner > *:first-child {
		margin-top: 0 !important;
	}
	
	/* ----- service_column-layout ----- */
	.service_text-lead {
		text-align: center;
		color: #0063b7;
		font-size: 1.4rem;
		font-weight: bold;
	}
	.service_text-lead + .service_column-layout {
		margin-top: 25px;
	}
	.service_column-layout {
		background-color: #e6f9fd;
	}
	.service_column-layout + .service_column-layout {
		margin-top: 16px;
	}
	.service_column-layout > .service_column_item {
		padding-top: 25px;
	}
	.service_column-layout > .service_column_item > .service_title {
		position: relative;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		width: calc(100% - 29px);
		padding: 17px 10px;
		background-color: #1684e2;
		color: #fff;
		font-size: 1.65rem;
		font-weight: bold;
	}
	.service_column-layout > .service_column_item > .service_title::before {
		width: 16.5px;
		height: 26px;
		margin-right: 13px;
		background: no-repeat 0 0 / 100% 100%;
		content: "";
	}
	.service_column-layout > .service_column_item > .service_title.service_title_number-01::before {
		background-image: url("/support/service/images/index_ic02.png");
	}
	.service_column-layout > .service_column_item > .service_title.service_title_number-02::before {
		background-image: url("/support/service/images/index_ic03.png");
	}
	.service_column-layout > .service_column_item > .service_title.service_title_number-03::before {
		background-image: url("/support/service/images/index_ic04.png");
	}
	.service_column-layout > .service_column_item > .service_title.service_title_number-04::before {
		background-image: url("/support/service/images/index_ic05.png");
	}
	.service_column-layout > .service_column_item > .service_title::after {
		position: absolute;
		bottom: 0;
		right: -14px;
		width: 14px;
		height: 100%;
		background: url("/support/service/images/index_ic06.png") no-repeat 0 0 / 100% 100%;
		content: "";
	}
	.service_column-layout > .service_column_item > .service_detail {
		margin: 23px 15px 0;
	}
	.service_column-layout > .service_column_item > .service_detail > .service_link-button {
		margin-top: 25px;
	}
	.service_column-layout > .service_column_item > .service_detail > .service_link-button li a {
		position: relative;
		display: block;
		padding: 12px 10px;
		border-radius: 18px;
		background-color: #f5a21b;
		text-align: center;
		text-decoration: none;
		color: #fff;
		font-weight: bold;
		box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.1);
	}
	.service_column-layout > .service_column_item > .service_detail > .service_link-button li a:hover {
		background-color: #eb970f;
	}
	.service_column-layout > .service_column_item > .service_detail > .service_link-button li a::after {
		position: absolute;
		top: 50%;
		right: 15px;
		width: 13px;
		height: 11px;
		margin-top: -6px;
		background: url("/support/common/images/com_ic02.png") no-repeat 0 0 / 100% 100%;
		content: "";
	}
	.service_column-layout > .service_column_item > .service_detail > .service_link-button + .list-note {
		margin-top: 11px;
	}
	.service_column-layout > .service_image-set {
		width: 100%;
		margin-top: 24px;
	}
}