@charset "UTF-8";
body {
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-weight: 500;
	font-size: 16px;
	color: #1c2438;
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt"
}
.pc-none {
	display: none
}
.pc2-none {
	display: none
}
.pc-none-inline, .pc2-none-inline {
	display: none
}
.ffs-normal {
	-webkit-font-feature-settings: normal;
	font-feature-settings: normal
}
#wrapper {
	padding-top: 4.5486vw
}
.wrapper {
	width: 100%
}
.contents {
	width: 100%;
	margin: 0 auto;
	padding-bottom: 10em
}
.-cn .contents, .-en .contents {
	padding-bottom: 0
}
.contents section {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 3vw
}
.contents section.-title {
	padding: 1.4em 3vw
}
.section-ttl {
	font-size: 45px;
	font-weight: 700;
	margin: 3.6979vw 0 1.4em
}
.section-ttl.-cm {
	margin-bottom: 0
}
header.integration-header {
	display: none
}
.integration-header.submenu {
	display: none;
	background: #f4f5f7;
	position: relative;
	z-index: 9
}
.integration-header.submenu.show {
	display: block
}
.integration-header.submenu .list-item {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-pack: flex-start;
	-webkit-box-pack: start;
	justify-content: flex-start;
	-ms-flex-align: center;
	-webkit-box-align: center;
	align-items: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	font-size: 1.0416666667vw;
	font-weight: 700;
	margin-left: 30px
}
.integration-header.submenu .list-item .item {
	margin-right: 3em
}
.integration-header.submenu a {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #1c2438;
	display: block;
	border-bottom: 2px solid transparent;
	padding: 1.5em 0 1em
}
.integration-header.submenu .item.current a {
	border-bottom: 2px solid #1c2438
}
section.menu {
	width: 100%;
	margin-top: 2em
}
.menu .tabmenu {
	width: 100%;
	background: #f4f5f7;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-pack: center;
	-webkit-box-pack: center;
	justify-content: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap
}
.menu.upper .tabmenu {
	padding: 1.2em 0 0;
	border-radius: 20px 20px 0 0
}
.-ja .menu.upper .tabmenu {
	border-radius: 0
}
.menu.lower .tabmenu {
	border-radius: 0 0 20px 20px;
	padding: 0 0 1.2em
}
.menu .tabmenu .item {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background: #fff;
	width: 9.519676481456vw;
	margin: 0 .25em
}
.menu.upper .tabmenu .item {
	border-radius: 10px 10px 0 0
}
.menu.lower .tabmenu .item {
	border-radius: 0 0 10px 10px
}
.menu .tabmenu .item a {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-pack: center;
	-webkit-box-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 1em 0
}
.menu .tabmenu .item .ttl {
	display: inline-block;
	position: relative;
	font-size: 0.8333333333vw;
	font-weight: 700;
	margin-left: -1em
}
.menu .tabmenu .item .ttl:after {
	content: "";
	display: inline-block;
	border-right: 1px solid #1c2438;
	border-bottom: 1px solid #1c2438;
	width: .4em;
	height: .4em;
	position: absolute;
	right: -1em;
	top: 40%;
	-webkit-transform: rotate(45deg) translateY(-50%);
	transform: rotate(45deg) translateY(-50%)
}
.menu.lower .tabmenu .item .ttl:after {
	border-left: 1px solid #1c2438;
	border-top: 1px solid #1c2438;
	border-right: none;
	border-bottom: none;
	top: 53%
}
.alert {
	margin-top: 1em;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 3vw;
	display: none
}
.alert .alert__inner {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid red;
	padding: 1em;
	color: #1c2438;
	font-weight: 700
}
.integrations {
	margin-top: 5em
}
.integrations.others {
	margin-bottom: 0
}
.integrations h5.ttl {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 1em
}
.integrations .integration-list {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-pack: justify;
	-webkit-box-pack: justify;
	justify-content: flex-start;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	position: relative;
    gap: 1.4%;
}
.integrations .integration-list:after {
	content: "";
	display: block;
	width: 18.88%
}
.integrations .integration-list .item {
	width: 18.88%;
	border-radius: 20px;
	overflow: hidden;
	background: #EDF1F7;
	margin-bottom: 1.4%
}
.integrations .integration-list .item .link-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    flex: 0 0 auto;
}
.integrations .integration-list .item .image-wrap {
	background: #fff;
	position: relative;
    aspect-ratio: 284 / 127;
    margin: 2rem 2rem 0;
    border-radius: 20px;
    overflow: hidden;
}
.integrations .integration-list .item .image-wrap img {
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(1);
	transform-origin: center center;
    transition: transform 0.5s ease-in-out;
}
.integrations .integration-list .item .link-wrap:hover .image-wrap img {
    transform: translate(-50%, -50%) scale(1.1);
}
.integrations .integration-list .item .content {
	flex: 1 1 auto;
    box-sizing: border-box;
    padding: 2em;
    display: flex;
    flex-direction: column;
}
.integrations .integration-list .item .ttl {
	font-size: 1.14583vw;
	font-weight: 700
}
.integrations .integration-list .item .body {
	font-size: .72916vw;
	padding: 1.5em 0
}
.integrations .integration-list .item .note {
	font-size: .72916vw;
	border-top: 1px solid rgba(28, 36, 56, .15);
	padding: 1.5em 0;
    margin-top: auto;
}
.integrations .integration-list .item .ext-link {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    width: 100%;
    height: 42px;
    font-size: 0.8333333333vw;
    font-weight: 700;
    color: #000;
    cursor: pointer;
    border-radius: 5px;
    background-color: #fff;
}
.integrations .integration-list .item .ext-link .arrow {
  position: relative;
  width: 5px;
  height: 10px;
}
.integrations .integration-list .item .ext-link .arrow::before,
.integrations .integration-list .item .ext-link .arrow::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 6px;
  background-color: black;
  right: 0;
  transform-origin: bottom center;
}
.integrations .integration-list .item .ext-link .arrow::before {
  top: calc(50% - 3px);
  transform: translateY(-50%) rotate(-135deg);
}
.integrations .integration-list .item .ext-link .arrow::after {
  bottom: calc(50% - 3px);
  transform: translateY(-50%) rotate(-45deg);
}
.integrations .underline {
	text-decoration: underline!important
}
.integrations .ext-link {
	display: inline-block;
	width: .8em;
	vertical-align: -.1em;
	margin-left: 4px
}
@media screen and (min-width:1921px) {
	.integrations h5.ttl {
		font-size: 24px
	}
	.integrations .integration-list .item .ttl {
		font-size: 21.9833px
	}
	.integrations .integration-list .item .body, .integrations .integration-list .item .note {
		font-size: 13.9833px
	}
}
@media screen and (max-width:1614px) {
	.integrations .integration-list .item .ttl {
		font-size: 22px
	}
	.integrations .integration-list .item .body, .integrations .integration-list .item .note {
		font-size: 14px
	}
}
@media screen and (max-width:1330px) {
	.menu .tabmenu .item.fold a {
		padding: .5em 0
	}
}
@media screen and (max-width:960px) {
	.section-ttl.-cm {
		padding-bottom: 0
	}
}