/* 

header
トップ：日本語の方非表示（英語表記があるため）※確認
2階層目：ロゴが二つになるのでスマホ時は非表示　※確認

*/



body {
	font-size: 62.5%;
	/* font-family: Meiryo, メイリオ, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "MS P Gothic", "ＭＳ Ｐゴシック", Verdana, Helvetica, sans-serif, Verdana; */
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	color: #000;
}
body {
	display: flex;
	flex-direction: column;
}

body img.top-border {
	width: 100%;
	height: 21px;
	margin: 0 0 10px 0;
}

div.wrap {
	width: 100%;
	max-width: 712px;
	padding: 0 0 30px;
}

/* header */

.top header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px 0 16px;
	margin: 0 0 10px 0;
}
.top header div.logo {
	display: flex;
	align-items: center;
}
.top header div.logo img {
	width: 100%;
	max-width: 126px;
	margin: 0 20px 0 0;
}
.top header h1 {
	color: #555555;
	line-height: 1.4em;
}
.top header span {
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.4em;
}

/* main */
.top figure.mv {
	width: 100%;
}
.top figure.mv {
	object-fit: contain;
}


.top div.global {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0 0 0 16px;
}

.top div.global div.balloon {
	width: 100%;
	max-width: 136px;
}
.top div.global div.balloon a {
	position: relative;
	display: block;
}
.top div.global div.balloon a:hover {
	filter: brightness(1.3);
}
.top div.global div.balloon span {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	text-align: center;
	color: #ffffff;
	padding: 0 6px 0 6px;
}
.top div.global div.balloon img {
	width: 100%;
}

/* example */
.top div.example {
	width: calc(100% - 146px);
}
.top div.example h2 {
	font-size: 1.5em;
	color: #555555;
	margin: 0 0 6px 0;
}
.top div.example ul {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: wrap;
}
.top div.example ul li {
	width: calc(97% / 4);
	margin: 0 0 6px 0;
}

.top div.example ul li a {
	display: block;
	text-decoration: none;
}
.top div.example ul li:not(.jp) a {
	width: 100%;
	color: #ffffff;
	background: 
	repeating-linear-gradient(120deg, #ffffff21, #ffffff21 1px, transparent 1px, transparent 4px),
	linear-gradient(90deg, #042b81 0, #046ccd 100%);
	padding: 4px 10px 10px 10px;
	margin: 0 0 2px 0;
}
.top div.example ul li:not(.jp) a:hover {
		background: 
		repeating-linear-gradient(120deg, #ffffff21, #ffffff21 1px, transparent 1px, transparent 4px),
		linear-gradient(90deg, #0471be 0, #0498df 100%);
}

.top div.example ul li.jp a {
	width: 100%;
	text-align: right;
	color: #000000;
	background: linear-gradient(140deg, #cccccc 0%, #ffffff 20%);
	border-top: 1px solid #a3a3a3;
	border-left: 1px solid #a3a3a3;

	outline : 2px solid #FFFFFF;
  outline-offset : -3px;

	padding: 10px 10px 4px 10px;
	margin: 0 0 2px 0;
}
.top div.example ul li.jp a::after {
	content: '▶';
	color: #ff9c00;
	margin: 0 0 0 4px;
}
.top div.example ul li.jp a:hover::after  {
	color: #ff4800;
}

.top div.example a.top-link {
	color: #042b81;
	font-size: 1.2em;
}
.top div.example a.top-link:hover {
	color: #0498df;
}

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

	.top header div.logo img {
		max-width: 70px;
		margin: 0 10px 0 0;
	}
	.top header span {
		/* font-size: 1em; */
		display: none;
	}

	.top div.global {
		padding: 0 16px 0 16px;
	}
	.top div.example ul li {
		width: calc(99% / 2);
	}
}
@media screen and (max-width: 460px) {
	.top div.example ul li {
		width: 100%;
	}
}

.page header {
	position: relative;
	background: url('../images/page-header.png') no-repeat;
	background-size: 630px;
	margin: 0 0 20px 0;
}
.page header a.btn-home {
	position: absolute;
	top: 16px;
	left: 16px;
	
	width: 20%;
	max-width: 138px;
}
.page header a.btn-home img {
	margin: 0 0 6px 0;
}
.page header a.btn-home span {
	display: block;
	text-align: center;
	color: #ffffff;
	font-size: 1.2em;
	font-weight: 700;
}

.page header div.global {
	width: 100%;
	max-width: 460px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	flex-wrap: wrap;
	margin: 0 0 0 auto;
}
.page header h1.logo {
	width: 100%;
	max-width: 110px;
	margin: 0 20px 0 0;
}
.page header div.btn-system {
	width: 100%;
	max-width: 84px;
}
.page header div.btn-system a {
	position: relative;
	display: block;
}
.page header div.btn-system a:hover {
	filter: brightness(1.3);
}
.page header div.btn-system span {
	position: absolute;
	top: 49%;
	left: 0;
	transform: translateY(-51%);
	width: 100%;
	text-align: center;
	line-height: 1.1em;
	color: #ffffff;
	padding: 0 6px 0 6px;
}
.page header div.btn-system img {
	width: 100%;
}

.page header div nav {
	width: 100%;
}
.page header div nav span {
	font-size: 1.2em;
	font-weight: 700;
	color: #042b81;
}
.page header div nav ul {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.page header div nav ul li {
	margin: 0 10px 0 0;
}
.page header div nav ul li a {
	font-size: 1.1em;
	display: flex;
	align-items: center;
	color: #042b81;
}
.page header div nav ul li a:hover {
	color: #0498df;
}
.page header div nav ul li a::before {
	content: '●';
	color: #a3a3a3;
	font-size: 6px;
	margin: 0 4px 0 0;
}

.page main {
	width: 100%;
}

@media screen and (max-width: 712px) {
	.page header div.global {
		padding: 0 16px 0 16px;
	}
}

@media screen and (max-width: 600px) {
	.page header {
		background-size: 480px;
	}

	.page header a.btn-home {
		width: 100%;
		max-width: 70px;
	}
	.page header a.btn-home img {
		margin: 0 0 0 0;
	}
	.page header a.btn-home span {
		font-size: 1em;
	}

	.page header div.global {
		align-items: center;
	}
	.page header h1.logo {
		display: none;
		max-width: 90px;
	}
	.page header div nav {
		margin: 20px 0 0 0;
	}
}

/* footer */
footer {
	text-align: center;
	background: linear-gradient(90deg, #001d72 0, #0041c2 100%);
	color: #aaaaaa;
	border-top: 6px solid #ff9c00;
	padding: 10px 10px 10px 10px;
	margin: auto 0 0 0;
}


/* example-top */
.example-top div.solution {
	padding: 0 20px;
}
.example-top div.solution h2 {
	font-family: "Noto Serif", serif;
	font-size: 2.4em;
  font-weight: 600;
	margin: 0 0 10px 0;
}

.example-top div.solution div.main-visual {
	width: 100%;
	position: relative;
	z-index: -1;
}
.example-top div.solution div.main-visual img.text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	width: 80%;
	max-width: 485px;
	padding: 0 16px;
}

.example-top div.solution div.menu-btn {
	width: 98%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;

	margin: -60px auto 0 auto;
}
.example-top div.solution a {
	position: relative;
	width: calc(100%/6);
	max-width: 103px;
}
.example-top div.solution a::after {
	content: '▼';
	position: absolute;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 8px;
	color: #ffffff;
}
.example-top div.solution a:hover {
	filter: brightness(1.2);
}
.example-top div.solution a:hover::after {
	color: #f99902;
}

@media screen and (max-width: 600px) {
	.example-top div.solution div.main-visual img.bg {
		object-fit: cover;
		height: 330px;
	}

	.example-top div.solution div.main-visual img.text {
		position: absolute;
		top: 30px;
		transform: translate(-50%, 0);

		width: 80%;
		max-width: 485px;
		padding: 0 16px;
	}

	.example-top div.solution div.menu-btn {
		max-width: 360px;
		margin: -260px auto 0 auto;
	}
	.example-top div.solution a {
		width: calc(100%/3);
		max-width: 103px;
	}
}

main div.inner {
	padding: 0 0 0 30px;
}
@media screen and (max-width: 712px) {
	main div.inner {
		padding: 0 16px 0 16px;
	}
}

/* page */
.page h2.serif-midashi {
	font-family: "Noto Serif", serif;
	font-size: 2.4em;
  font-weight: 600;
	margin: 0 0 10px 0;
}
.policy p.lead,
.process p.lead {
	font-family: "Noto Serif", serif;
	font-size: 1.2em;
	margin: 0 0 10px 0;
}

.page h3.shadow-midashi {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	text-align: center;
	background: linear-gradient(180deg, #ebebeb 0,#ebebeb 6%, #fdfdfd 7%,#e6e6e6 100%);
	margin: 0 0 16px 0;

	overflow: hidden;
}
.page h3.shadow-midashi::before {
	content: '';
	display: block;
	flex-shrink: 0;
	background: url('../images/page_title_left.png') no-repeat;
	background-size: cover;
	background-position: right;
	width: 142px;
}
.page h3.shadow-midashi::after {
	content: '';
	display: block;
	flex-shrink: 0;
	background: url('../images/page_title_right.png') no-repeat;
	background-size: cover;
	background-position: left;
	width: 142px;
}
.page h3.shadow-midashi span {
	display: block;
	font-size: 1.2em;
	line-height: 1.2em;
	text-shadow: 0 2px 2px #5a5a5a9a;
	padding: 6px 10px 6px 10px;
}

@media screen and (max-width: 600px) {
	.page h3.shadow-midashi::before {
		width: 40px;
	}
	.page h3.shadow-midashi::after {
		width: 40px;
	}
}

/* example-child */
.example-child div.main-image {
	width: 100%;
	position: relative;
	z-index: -1;
}
.example-child div.main-image img.text {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);

	width: 80%;
	max-width: 350px;
	padding: 0 16px;
}

.example-child div.balloon {
	position: relative;
	width: 110px;
	flex-shrink: 0;
	margin: -20px 16px 0 0;
}
.example-child div.balloon p {
	position: absolute;
	top: 20px;
	left: 0;
	width: 100%;
	color: #ffffff;
	text-align: center;
	font-size: 1em;
	line-height: 1.3em;
	text-shadow: 0 1px 2px #000000;
}
.example-child div.balloon p span {
	display: block;
	font-size: 0.9em;
	margin: 0 0 2px 0;
}
.example-child div.system ul {
	width: 100%;
	max-width: 110px;
	padding: 30px 0 0 0;
	margin: 0 16px 0 0;
	order: 1;
}

.example-child div.system {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
}

.example-child div.system ul li {
	margin: 0 0 10px 0;
}
.example-child div.system a {
	display: block;
	text-decoration: none;
}
.example-child div.system a:hover span,
.example-child div.system a.on span {
		background: 
		repeating-linear-gradient(120deg, #ffffff21, #ffffff21 1px, transparent 1px, transparent 4px),
		linear-gradient(90deg, #0471be 0, #0498df 100%);
}
.example-child div.system a span {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	color: #ffffff;
	background: 
		repeating-linear-gradient(120deg, #ffffff21, #ffffff21 1px, transparent 1px, transparent 4px),
		linear-gradient(90deg, #042b81 0, #046ccd 100%);
	text-align: center;
	padding: 2px 16px 4px 8px;
	margin: 0 0 2px 0;
}
.example-child div.system a span::before {
	content: '▶';
	font-size: 6px;
	margin: 0 6px 0 0;
}
.example-child div.system a p {
	line-height: 1em;
	text-align: center;
	color: #000;
}

.example-child div.detail {
	width: calc(100% - 126px);
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: wrap;
}
.example-child div.detail div.col-1 {
	width: 100%;
}
.example-child div.detail h4 {
	width: 100%;
	font-family: "Noto Serif", serif;
  font-weight: 600;
	font-size: 1.2em;
	border-bottom: 1px dotted #000;
	padding: 12px 0 6px 0;
	margin: 0 0 6px 0;
}
.example-child div.detail div.lead {
	flex-grow: 1;
}
.example-child div.detail div.lead > p {
	width: 100%;
	font-size: 1.2em;
	margin: 0 0 20px 0;
}
.example-child div.detail div.lead > p span {
	display: block;
	flex-shrink: 0;
	width: 70px;
	background-color: #ffa800;
	font-size: 10px;
	font-weight: 700;
	text-align: center;
	color: #ffffff;
	padding: 2px 0 2px 0;
	margin: 0 10px 0 0 ;
}
.example-child div.detail figure {
	width: 100%;
	margin: 0 0 20px 0;
}

.example-child div.page-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.example-child div.page-btn a {
	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 110px;
	color: #ffffff;
	background: 
	repeating-linear-gradient(120deg, #ffffff21, #ffffff21 1px, transparent 1px, transparent 4px),
	linear-gradient(90deg, #042b81 0, #046ccd 100%);
	text-align: center;
	text-decoration: none;
	margin: 0 0 2px 0;
}
.example-child div.page-btn a:hover {
		background: 
	repeating-linear-gradient(120deg, #ffffff21, #ffffff21 1px, transparent 1px, transparent 4px),
	linear-gradient(90deg, #0471be 0, #0498df 100%);
}
.example-child div.page-btn a.next {
	padding: 2px 4px 4px 42px;
}
.example-child div.page-btn a.back {
	padding: 2px 42px 4px 4px;
}
.example-child div.page-btn a.next::after {
	content: '▶';
	font-size: 6px;
}
.example-child div.page-btn a.back::before {
	content: '◀';
	font-size: 6px;
}
.example-child div.page-btn a.back {
	margin: 0 16px 0 0;
}
.example-child div.revision {
	width: 100%;
	margin: 0 0 20px 0;
}
.example-child div.revision a {
	display: block;
	width: 100%;
	max-width: 240px;
	margin: 0 auto 0 auto;
}

.example-child.example_1 div.detail h4 {
	color: #000a88;
}
.example-child.example_2 div.detail h4 {
	color: #004388;
}
.example-child.example_3 div.detail h4 {
	color: #118b9b;
}
.example-child.example_3 div.balloon p {
	top: 16px;
	line-height: 0.8em;
}
.example-child.example_4 div.detail h4 {
	color: #008a44;
}
.example-child.example_5 div.detail h4 {
	color: #380086;
}
.example-child.example_6 div.detail h4 {
	min-height: 47PX;
	font-size: 1.3em;
	line-height: 1.2em;
	color: #500384;
	border-bottom: unset;
	padding: 12px 0 0 0;
}
.example-child.example_6 div.detail div.lead > p {
	width: 100%;
	min-height: 34px;
	display: flex;
	align-items: first baseline;
	font-size: 1em;
	line-height: 1em;
	margin: 0 0 10px 0;
}
.example-child.example_6 div.detail span.other {
	display: block;
	width: 100%;
	min-height: 26px;
	text-align: center;
	font-weight: 700;
	line-height: 0.8em;
	color: #4C4C4C;
	border: 1px solid #4C4C4C;
	padding: 4px 4px 4px 4px;
	margin: 12px 0 0 0;
}
.example-child.example_6 div.detail div.col-3 {
	width: calc(98% / 3);

	display: flex;
	align-items: stretch;
	flex-direction: column;
}
.example-child.example_6 div.detail figure {
	margin: auto 0 6px 0;
}


@media screen and (max-width: 712px) {
	
	.example-child h2 {
		font-size: 2em;
	}

	.example-child div.system {
		padding: 0 0 0 0;
	}

	.example-child div.page-btn {
		justify-content: center;
	}

	.example-child div.detail div.col-1 {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.example-child div.detail div.col-1 figure {
		width: 100%;
	}
	.example-child div.detail div.lead {
		width: calc(100% - 130px);
	}
	.example-child.example_6 div.detail div.lead {
		width: 100%;
	}

}

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

	.example-child div.main-image img.bg {
		object-fit: cover;
		height: 110px;
		object-position: left;
	}
	.example-child div.main-image img.text {
		padding: 0 16px 0 60px;
	}
	.example-child div.balloon {
		margin: -100px 0 0 6px;
	}

	.example-child div.detail {
		width: 100%;
	}
	.example-child div.menu {
		width: 100%;
		order: 2;
	}
	.example-child div.detail h4 {
		font-size: 1.4em;
		padding: 0 0 6px 0;
	}
	.example-child div.detail div.lead {
		width: 100%;
		padding: 0 10px 0 10px;
	}
	.example-child.example_6 div.detail div.col-3 {
		width: 100%;
	}
	.example-child.example_6 div.detail div.col-3:not(:last-of-type) {
		margin: 0 0 20px 0;
	}
	.example-child.example_6 div.detail div.col-3.insert-768 {
		flex-direction: unset;
		flex-wrap: wrap;
		align-items: center;
	}
	.example-child.example_6 div.detail div.insert-768 div.lead {
		width: calc(100% - 130px);
	}
	.example-child.example_6 div.detail h4 {
		min-height: unset;
		font-size: 1.4em;
	}
	.example-child.example_6 div.detail figure {
		max-width: 200px;
		margin: 0 auto 0 auto;
	}
	.example-child.example_6 div.detail span.other {
		min-height: unset;
	}

	.example-child div.system ul {
		max-width: unset;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.example-child div.system ul li {
		width: calc(97% / 3);
	}
}

.policy div.inner {
	padding: 0 0 0 30px;
}
.policy h2 {
	font-family: "Noto Serif", serif;
	font-size: 2.4em;
	font-weight: 600;
	margin: 0 0 10px 0;
}


.policy figure.pic {
	width: 100%;
	max-width: 221px;
	float: left;
}
.policy p.text {
	margin: 0 0 1em 0;
}
.policy div.iso {
	width: calc(100% - 221px);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin: 0 0 0 auto;
}
.policy div.iso figure {
	width: 100%;
	max-width: 228px;
}
.policy div.iso figure:first-child {
	margin: 0 4px 0 0 ;
}

@media screen and (max-width: 712px) {
	.policy div.inner {
		padding: 0 16px 0 16px;
	}
	.policy div.iso {
		width: 100%;
		max-width: 400px;
		margin: 0 auto 0 auto;
	}
	.policy figure.pic {
		width: 45%;
		max-width: 200px;
	}
}

/* process */
.page.process p.lead {
	margin: 0 0 40px 0;
}

.process ul.flow {
	width: 100%;
}
.process ul.flow li {
	position: relative;
}
.process ul.flow li:not(:last-of-type)::after {
	content: '';
	display: block;
	background: url('../images/process_arrow.png');
	width: 34px;
	height: 26px;
	margin: 6px auto 6px auto;
}
.process ul.flow li img {
	width: 100%;
	max-width: 113px;
}
.process ul.flow li div.list-box {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;

	border-right: 1px solid #bfbfbf;
	border-bottom: 2px solid #bfbfbf;
	padding: 0 6px 6px 0;
}
.process ul.flow li div.list-box div {
	width: calc(98% - 113px);
}
.process ul.flow li h4 {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 6px 0 8px 0;
	margin: 0 0 8px 0;
}
.process ul.flow li h4 span.midashi {
	font-size: 1.6em;
	font-weight: 700;
	color: #06349c;
}
.process ul.flow li h4::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, #b2c0e1 0, #ffffff 100%);
}

@media screen and (max-width: 712px) {
	.process ul.flow li h4 {
		flex-direction: column-reverse;
		align-items: flex-start;
	}
	.process ul.flow li img {
		max-width: 90px;
	}
	.process ul.flow li div.list-box div {
    width: calc(96% - 90px);
	}
}

/* profile */
.profile table.business {
	margin: 0 0 20px 0;
}
.profile table.business th {
	position: relative;
	vertical-align: middle;
	width: 130px;
	font-weight: 400;
	padding: 10px 10px 10px 0;
}
.profile table.business th span {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	text-align: center;
	line-height: 1em;
	color: #ffffff;
	text-shadow: 0 1px 3px #000000;
	padding: 0 10px 0 0;
}
.profile table.business td {
	line-height: 1.2em;
	padding: 4px 10px 4px 10px;
}
.profile table.detail {
	margin: 0 0 20px 0;
}
.profile table.detail tr {
	border-bottom: 1px dotted #000000;
}
.profile table.detail td {
	padding: 4px 10px 4px 10px;
}
.profile table.history tr {
	border-bottom: 1px dotted #000000;
}
.profile table.history th {
	width: 120px;
	background-color: #eeeeee;
	font-weight: 400;
}
.profile table.history th,
.profile table.history td {
	padding: 4px 10px 4px 10px;
}

@media screen and (max-width: 600px) {
	.profile table.business {
		vertical-align: top;
	}
	.profile table.business tr:nth-child(2),
	.profile table.business tr:nth-child(5) {
		border-bottom: 1px dotted #000000;
	}
	.profile table.business th {
		vertical-align: top;
	}
	.profile table.business th span {
		top: 42px;
		transform: unset;
	}
	.profile table.business td {
		display: block;
	}
}
@media screen and (max-width: 430px) {
	.profile table.business,
	.profile table.detail,
	.profile table.history {
		width: calc(100% - 20px);
		margin: 0 auto 20px auto;
	}
}


/* group */

.group-category {
	width: 100%;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0 10px;
	margin: 0 0 30px 0;
}
.group-category li {
	margin: 0;
	width: calc(97%/3);
	background-color: #F8F8F6;
}
.group-category li dl {
	padding: 0 0 2em 0;
}
.g_ja {
	border-top: 2px solid #45B0DC;
}
.g_cn {
	border-top: 2px solid #EDA61D;
}
.g_en {
	border-top: 2px solid #CA5296;
}
.group-category li dl dt {
	font-size: 1.2em;
	text-align: center;
	border-bottom: 1px solid #D8D8D8;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 2;
	background: linear-gradient(180deg, #fff 0%, #eee 100%);
	
	margin-bottom: 1em;
	padding: 1em 0;
}
.group-category li dl dt a {
	font-weight: bold;
	text-decoration: underline;
}
.group-category li dl dd {
	position: relative;
	font-size: 1.1em;
	line-height: 2;
	padding: 0 10px 0 10px;
	margin: 0 1em;
}
.group-category li dl dd a {
	text-decoration: underline;
}
.group-category li dl dd a::after {
	content: '';
	position: absolute;
	top: 6px;
	left: 0;
	width: 10px;
	height: 10px;
	background: url(../images/arrow.gif) no-repeat;
}

@media screen and (max-width: 600px) {
	img#map-world {
		margin: 0 0 10px 0;
	}
	.group-category li {
		width: 100%;
		margin: 0 0 10px 0;
	}
}

.group-list h3 {
	margin: 0;
	padding: 6px 0 6px 10px;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 2;
	background: linear-gradient(180deg, #fff 0%, #eee 100%);
}
.group-list h3 span.h3-ch {
	padding-left: 1em;
	border-left: 3px solid #EDA61D;
}
.group-list h3 span.h3-jp {
	padding-left: 1em;
	border-left: 3px solid #45B0DC;
}
.group-list h3 span.h3-en {
	padding-left: 1em;
	border-left: 3px solid #CA5296;
}

div.group-list div.detail {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
	background-color: #dfdfdf;
	padding: 10px 10px 10px 10px;
	margin: 0 0 16px 0;
}
div.group-list div.detail figure {
	max-width: 157px;
	margin: 0 20px 0 0;
}
div.group-list div.detail div.text-box {
	width: calc(100% - 177px);
}
div.group-list div.detail h4 {
	background-color: #ffffff;
	box-shadow: 0 2px 0 #b2b2b2;
	margin: 0 0 6px 0;
}
div.group-list div.detail h4 a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #000000;
	padding: 6px 10px 6px 50px;
}
div.group-list div.detail h4 a span {
	font-size: 1.4em;
}
div.group-list div.detail h4 a::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;

	background: url(../images/group_title.png) no-repeat;
	background-size: cover;
	background-position: right;
	width: 61px;
	height: 100%;
}
div.group-list div.detail h4 a::after {
	content: 'HomePage';
	display: block;
	flex-shrink: 0;
	background-color: #ff9c00;
	color: #ffffff;
	width: 80px;
	height: 20px;
	text-align: center;
	padding: 2px 2px 2px 2px;
	margin: 0 0 0 10px;
}
div.group-list div.detail p.service {
	margin: 0 0 6px 0;
}
div.group-list div.detail p.overview {
	border-top: 1px dotted #000000;
	padding: 6px 0 0 0;
}

@media screen and (max-width: 600px) {
	div.group-list div.detail {
		flex-direction: column-reverse;
	}
	div.group-list div.detail div.text-box {
		width: 100%;
	}
	div.group-list div.detail figure {
		margin: 10px auto 0 auto;
	}
	div.group-list div.detail p.service,
	div.group-list div.detail p.overview {
		max-width: 430px;
		margin: 0 auto 0 auto;
	}

	div.group-list div.detail h4 a::before {
		width: 40px;
		height: 30px;
	}
	div.group-list div.detail h4 a {
		padding: 6px 10px 6px 10px;
	}
	div.group-list div.detail h4 a::after {
		width: 60px;
	}
}

/* clients */
.clients div.col-2 {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
}

.clients div.col-2 ul {
	width: calc(100% - 240px);
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: wrap;
}
.clients div.col-2 ul li {
	width: 49%;
	border-bottom: 1px dotted #000000;
	padding: 6px 6px 6px 6px;
}

.clients div.col-2 figure {
		width: 100%;
		max-width: 230px;
}

@media screen and (max-width: 712px) {
	.clients div.col-2 ul {
		width: 60%;
	}
	.clients div.col-2 ul li {
		width: 49%;
	}
	.clients div.col-2 figure {
			width: 40%;
	}
	.clients div.col-2 figure img {
		object-fit: cover;
		object-position: left bottom;
		height: 250px;
	}
}
@media screen and (max-width: 460px) {
	.clients div.col-2 {
		flex-direction: column-reverse;
	}
	.clients div.col-2 ul {
		width: 100%;
	}
	.clients div.col-2 figure {
		width: 100%;
		max-width: unset;
	}
}

/* topic */
.page.topic h3.shadow-midashi span.small {
	font-size: 0.6em;
	padding: 0 0 0 0;
}
.topic table {
	width: 100%;
	margin: 0 0 16px 0;
}
.topic table tr {
	border-bottom: 2px solid #ffffff;
}
.topic table th {
	width: 120px;
	font-weight: 400;
	background-color: #eeeeee;
	padding: 4px 10px 4px 10px;
}
.topic table td {
	padding: 4px 10px 4px 10px;
}
.topic ul.recruit {
	width: 100%;
}
.topic ul.recruit li {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	padding: 0 0 6px 0;
	margin: 0 0 6px 0;
}
.topic ul.recruit li:first-child {
	align-items: center;
	border-bottom: 1px dotted #000000;
}
.topic ul.recruit li div {
	width: calc(100% - 93px);
}
.topic ul.recruit li span {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 83px;
	height: 83px;
	text-align: center;
	color: #ffffff;
	line-height: 1.2em;
	font-weight: 700;
	text-shadow: 0 2px 2px #0000009a;
}
.topic ul.recruit li:first-child span {
	background: linear-gradient(0deg, #7e96cc 0, #03319b 96%, #032168 100%);
	border-left: 2px solid #03216896;
}
.topic ul.recruit li:last-child span {
	background: linear-gradient(0deg, #ffcd7e 0, #f19402 96%, #aa6903 100%);
	border-left: 2px solid #aa6a0396;
}
.topic ul.recruit li table {
	margin: 10px 0 0 0;
}

@media screen and (max-width: 460px) {
	.topic div.inner > table {
		width: calc(100% - 20px);
		margin: 0 auto 16px auto;
	}
	.topic table th {
		width: 60px;
	}
	.topic ul.recruit {
		padding: 0 10px 0 10px;
	}
	.topic ul.recruit li {
		flex-direction: column;
	}
	.topic ul.recruit li span {
		width: 100%;
		height: auto;
		padding: 10px 6px 10px 6px;
		margin: 0 0 6px 0;
	}
	.topic ul.recruit li span br {
		display: none;
	}

	.topic ul.recruit li div {
		width: 100%;
	}
}