@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400&family=Noto+Sans+JP:wght@100..900&display=swap');

@media screen and (min-width: 1200px) {}
@media screen and (max-width: 1040px) {}
@media screen and (max-width: 960px) {}

/***************************************************
　:root
***************************************************/

:root {
  --color-white: #fff;
  --color-black: #000;
  --color-gray1: #eee;
  --color-gray2: #ccc;
  --color-blue: #29abe2;
  --color-red: #EB0808;
  --color-base: #0F3867;
  --color-bg: #fff;
  --color-text: #000;
  --font-size: 16px;
	--wrapper-width: 1020px;
	--inner-width: 1020px;
	--header-height: 100px;
}
@media screen and (max-width: 960px) {
	:root {
		--font-size: 3.73vw;
		--wrapper-width: 100%;
		--inner-width: 90%;
		--header-height: 50px;
	}
}

/***************************************************
　基本設定
***************************************************/

body {
	margin-top:var(--header-height);
	font-family: "Noto Sans JP", sans-serif;
	font-size: var(--font-size);
	color: var(--color-text);
	line-height: 1.6;
	font-weight: 400;
	background: var(--color-bg);
}

img {
	width: 100%;
	display: inline-block;
}

h2,
h3 {
	line-height: 1.2;
}

a {
	transition: all .7s;
}

a:hover {
	opacity: .7;
}
@media screen and (max-width: 960px) {
	a:hover {
		opacity: 1;
	}
}

.sp {
	display: none !important;
}

.wrapper {
	margin:0 auto;
	max-width: var(--wrapper-width);
	width:100vw;
}

.inner {
	max-width: var(--inner-width);
	width:90vw;
	margin: 0 auto;
}

@media screen and (max-width: 960px) {
	.sp {
		display: block !important;
	}

	.pc {
		display: none !important;
	}

	.inner {
		width: var(--inner-width);
	}
}

.animate-on-view {
	opacity: 0;
	transform: translateY(20px);
	filter: blur(5px);
	transition: all 1s ease-in-out;
}

.animate-on-view.visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
}


/***************************************************
　タイトル
***************************************************/

.cmn-title {
	margin-bottom: 80px;
	text-align: center;
}

.cmn-title h2 {
	font-size: 300%;
	color: var(--color-base);
	font-weight: 700;
}

.cmn-title h2 span {
	font-size:120%;
}

@media screen and (max-width: 960px) {
	.cmn-title {
		margin-bottom: 8vw;
	}

	.cmn-title h2 {
		font-size: 180%;
	}
}

/***************************************************
　flexコンテンツ
***************************************************/

.flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
@media screen and (max-width: 960px) {
	.flex {
		display: block;
	}
}

.flex-sp {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}


/***************************************************
　ボタン
***************************************************/

.cta-btns {
	padding:77px 0;
	background: linear-gradient(180deg, #ABD6FF 0%, #C8E3FD 100%);
}

.cta-btns ul {
	margin:0 auto;
	max-width:820px;
	width:100%;
	font-size:140%;
	font-weight:700;
}

.download-btn {
	display: block;
	width:371px;
	height:75px;
}
.download-btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	position:relative;
	width:100%;
	height:100%;
	color:#FFF;
	background: linear-gradient(180deg, #3DAAAA 0%, #91D8BE 140.62%);
	border-radius: 4.77px;
}
.download-btn a:before {
	display: block;
	position:absolute;
	top: 50%;
	left: 10%;
	transform: translate(0,-50%);
	width: 10%;
	height: 37%;
	background:url(../img/ico-dl.svg) 0 0 no-repeat;
	background-size:100% auto;
	content:'';
}

.contact-btn {
	display: block;
	width:371px;
	height:75px;
}

.contact-btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	position:relative;
	width:100%;
	height:100%;
	color:#FFF;
	background: linear-gradient(180deg, #FC7C1A 0%, #FDBA46 142.71%);
	border-radius: 4.77px;
}
.contact-btn a:before {
	display: block;
	position:absolute;
	top: 50%;
	left: 14%;
	transform: translate(0,-50%);
	width: 8%;
	height: 36%;
	background:url(../img/ico-contact.svg) 0 0 no-repeat;
	background-size:100% auto;
	content:'';
}

.download-btn a:after,
.contact-btn a:after {
	display: block;
	position:absolute;
	top: 50%;
	left: 88%;
	transform: translate(0,-50%);
	width: 7%;
	height: 35%;
	background:url(../img/ico-arrow.svg) 0 0 no-repeat;
	background-size:100% auto;
	content:'';
}

@media screen and (max-width: 960px) {
	.cta-btns {
		padding:10vw 0;
	}
	.download-btn {
		margin: 0 auto 6vw;
		width: 85%;
		height: 15vw;
	}

	.contact-btn {
		margin: 0 auto;
		width: 85%;
		height: 15vw;
	}

	.download-btn a:before {
		height: 39%;
	}

	.contact-btn a:before {
		height: 39%;
	}

	.download-btn a:after,
	.contact-btn a:after {
		height: 39%;
	}
}


/***************************************************
　ヘッダー
***************************************************/

header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height:var(--header-height);
}
header:after {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height:var(--header-height);
	background:var(--color-base);
	content:'';
}

.header-inner {
	display: flex;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	justify-content: space-between;
}

.header-logo {
	max-width: 210px;
	padding-left: 25px;
	padding-top: 24px;
}

.header-btn {
	margin-right:40px;
	padding:25px 0 0;
	width: 500px;
	background:none;
}

.header-btn.cta-btns ul {
	margin:0 auto;
	max-width:100%;
	width:100%;
	font-size:90%;
	font-weight:700;
}

.header-btn .download-btn,
.header-btn .contact-btn {
	width:242px;
	height:49px;
}

@media screen and (max-width: 960px) {
	.header-logo {
		max-width: 130px;
		padding-left: 2%;
		padding-top: 9px;
	}

	.header-logo a {
		display: flex;
	}

	.header-btn {
		position:fixed;
		left:0;
		bottom:0;
		z-index:11;
    margin: 0 auto;
    padding: 2vw;
		width:100%;
	}
	.header-btn .download-btn,
	.header-btn .contact-btn {
		margin:0;
		width: 49%;
		height: 12vw;
	}

	.header-btn .download-btn a:before {
		left:6%;
		height: 27%;
	}

	.header-btn .contact-btn a:before {
		left:10%;
		height: 30%;
	}

	.header-btn .download-btn a:after,
	.header-btn .contact-btn a:after {
		height: 27%;
	}
}


/***************************************************
　フッター
***************************************************/

footer {
	padding:15px 0;
	color:#FFF;
	text-align:center;
	background:var(--color-base);
}
	.copy {
		font-size:13px;
	}


/***************************************************
　メインビジュアル
***************************************************/

.mv {
	margin:0 auto 10px;
	padding:52px 0;
	width:100%;
	color:var(--color-base);
	background:url(../img/mv-bg.webp) center center no-repeat;
	background-size:cover;
}
.mv .wrapper {
	max-width:1200px;
	width:90%;
	background:url(../img/mv-img.webp) right 110% no-repeat;
}
.mv h2 {
	max-width:933px;
}
.mv .txt {
	padding:20px 0 45px 12px;
	width:632px;
	font-size:125%;
	font-weight:500;
}
.mv ul {
	width:610px;
}
.mv-btn {
	margin-right:40px;
	padding:25px 0 0;
	width: 580px;
	background:none;
}
.mv-btn.cta-btns ul {
	margin:0 auto;
	max-width:100%;
	width:100%;
	font-size:90%;
	font-weight:700;
}
.mv-btn .download-btn,
.mv-btn .contact-btn {
	width:280px;
	height:57px;
}

@media screen and (max-width: 1280px) {
	.mv .wrapper {
		background-size:44vw auto;
	}
}

@media screen and (max-width: 960px) {
	.mv {
		position:relative;
		margin-bottom:2vw;
		padding:8vw 0;
		height:155vw;
		background:url(../img/mv-bg-sp.webp) center center no-repeat;
		background-size:cover;
	}
	.mv .wrapper {
		max-width:1200px;
		width:90%;
		background:url(../img/mv-img-sp.webp) center 44vw no-repeat;
		background-size:80% auto;
	}
	.mv h2 {
		margin:0 auto 52vw;
		width:90%;
	}
	.mv .txt {
		position:absolute;
		left:50%;
		bottom:8vw;
		transform: translate(-50%,0);
		padding:0;
		width:90%;
		font-size:100%;
	}
	.mv ul {
		margin:0 auto;
		width:100%;
	}
	.mv li {
		width:33%;
	}
	.mv-btn {
		display:none;
	}
}


/***************************************************
　企業ロゴ
***************************************************/

.co-logo {
	margin-bottom:5px;
	height:105px;
}

@media screen and (max-width: 960px) {
	.co-logo {
		height:13vw;
	}
}


/***************************************************
　お悩み
***************************************************/

.worries {
	position: relative;
	padding: 50px 0 50px;
}

.worries .cmn-title {
	margin-bottom:25px;
}

@media screen and (max-width: 960px) {
	.worries {
		padding: 5vw 0;
	}

	.worries .cmn-title h2 {
		font-size: 150%;
	}
}


/***************************************************
　バルテスのサービス
***************************************************/

.service {
	position: relative;
	padding: 30px 0 116px;
	background:var(--color-base);
}
.service:before {
	display:inline-block;
	position: absolute;
	left:50%;
	top:-90px;
	transform: translate(-50%,0);
	z-index:-1;
	width: 320vw;
	height: 180vw;
	background:var(--color-base);
	border-radius:50%;
	content:'';
}

.service .cmn-title {
	margin-bottom:70px;
}
.service .cmn-title h2 {
	margin:0 auto;
	max-width:85%;
	width:647px;
}

.service .box:not(:last-child) {
	margin-bottom:96px;
}
.service .box2,
.service .box4 {
	flex-direction: row-reverse;
}

.service .text {
	width:55%;
	color:#FFF;
}
.service .text .sub {
	width:187px;
}
.service .text h3 {
	margin-top:8px;
	font-size:240%;
	background: linear-gradient(180deg, #FF9700 0%, #FFEBB3 118.18%);
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.service .text h4 {
	margin-top:20px;
	font-size:150%;
	line-height:1.4;
}
.service .text .txt {
	margin-top:10px;
	font-size:110%;
}

.service .img {
	width:40%
}

@media screen and (max-width: 960px) {
	.service {
		padding: 4vw 0 10vw;
	}
	.service:before {
		top: -12vw;
	}

	.service .cmn-title {
		margin-bottom:8vw;
	}
	.service .cmn-title h2 {
		max-width:100%;
		width:100%;
	}

	.service .box:not(:last-child) {
		margin-bottom:12vw;
	}

	.service .text {
		margin-bottom:5vw;
		width:100%;
	}
	.service .text .sub {
		width:36vw;
	}
	.service .text h3 {
		margin-top:2vw;
		font-size:210%;
	}
	.service .text h4 {
		margin-top:4vw;
		font-size:120%;
	}
	.service .text .txt {
		margin-top:2vw;
		font-size:100%;
	}

	.service .img {
		width:100%
	}
}


/***************************************************
　強み
***************************************************/

.strength {
	position: relative;
	padding: 80px 0;
	color:var(--color-base);
	background: #F0F8FF;
}

.strength .wrapper,
.strength .inner {
	max-width:1100px;
}

.strength .cmn-title {
	margin:0 auto 70px;
	max-width:85%;
	width:611px;
}

.strength .content-body {
	margin-top:53px;
}
.strength .content-body ul {
	margin-top:53px;
	align-items: stretch;
}
.strength .content-body li {
	padding:1.6vw 0;
	width:31%;
	text-align:center;
	background: linear-gradient(89.87deg, #B3E4FF -33.17%, #F8FDFF 181.3%);
	border-radius:10px;
}
.strength .content-body li h3 {
	font-size:150%;
	font-weight:500;
}
.strength .content-body li .img {
	margin:16px 0;
	padding:0 1.6vw;
}
.strength .content-body li .txt {
	padding:0 1.6vw;
	text-align:left;
}
.strength .content-body li .txt span {
	color:#FF7810;
}


@media screen and (max-width: 960px) {
	.strength {
		padding: 8vw 0;
	}

	.strength .wrapper,
	.strength .inner {
		max-width:100%;
		width:100%;
	}

	.strength .cmn-title {
		margin:0 auto 8vw;
		max-width:85%;
	}
	.strength .cmn-title h2 {
		margin-top:2vw;
		font-size:160%;
	}

	.strength .content-body {
		margin:0 auto;
		width:90%;
	}
	.strength .content-body ul {
		margin-top:8vw;
	}
	.strength .content-body li {
		padding:5vw;
		width:100%;
	}
	.strength .content-body li:not(:last-child) {
		margin-bottom:8vw;
	}
	.strength .content-body li h3 {
		font-size:150%;
		font-weight:500;
	}
	.strength .content-body li .img {
	}
}

/***************************************************
　実績
***************************************************/

.case {
	padding: 120px 0;
	color:var(--color-base);
}


@media screen and (max-width: 960px) {
	.case {
		padding: 8vw 0;
	}
}

.case .swiper-button-prev:after,
.case .swiper-button-next:after {
	display: none;
}

.case .swiper {
	position: relative;
	padding-bottom:10px;
}

.case .swiper-wrapper {
	margin-bottom: 30px;
	display:flex;
	align-items: stretch;
}

.case .swiper-slide {
	overflow: hidden;
	height:auto;
	background:#FFF;
	border-radius: 9px;
	box-shadow: 3.81px 3.81px 13.33px 0px #00000040;
}

.case .box {
	overflow: hidden;
	padding: 1.5vw 1.5vw 1.5vw;
}

@media screen and (max-width: 960px) {
	.case .box {
		padding: 4vw;
	}
}

.case .sub {
	font-size:90%;
	color:#808080;
}
.case .ttl {
	font-size:120%;
	font-weight:700;
}
.case ul {
	margin-top:10px;
	padding:15px 0 10px;
	border-top:2px dotted var(--color-base);
}
.case li {
	display:inline-block;
	margin:0 5px 5px 0;
	padding:5px;
	font-size:78%;
	font-weight:700;
	line-height:1;
	border-radius:5px;
	border:1.6px solid var(--color-base);
}

.case .swiper-nav {text-align:center;}

.case .swiper-button-prev,
.case .swiper-button-next {
	position: absolute;
	width: 49px;
	height: 49px;
	z-index: 1;
	cursor: pointer;
}

.case .swiper-button-prev {
	left: 35%;
	bottom: 2px;
}

.case .swiper-button-next {
	right: 35%;
	bottom: 2px;
}

.case .swiper-pagination {
	display:inline-block;
	position: relative;
	z-index:9;
}

.case .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 12.5px;
}

.case .swiper-pagination-bullet {
	width: 15px;
	height: 15px;
	margin: 0 12.5px;
}

.case .swiper-pagination-bullet-active {
	background: var(--color-base);
}

@media screen and (max-width: 960px) {
	.case .swiper-nav {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.case .swiper-button-prev,
	.case .swiper-button-next {
		width: 30px;
		height: 30px;
		top: initial;
		transform: initial;
		-webkit-transform: initial;
		-ms-transform: initial;
		position: relative;
	}

	.case .swiper-button-prev {
		left: 7%;
		bottom: 0;
	}

	.case .swiper-button-next {
		right: 7%;
		bottom: 0;
	}

	.case .swiper-pagination-bullet {
		width: 10px;
		height: 10px;
		margin: 0 5px;
	}

	.case .swiper-pagination {
		margin-inline: 50px;
	}
}


/***************************************************
　お客様の声
***************************************************/

.voice {
	position: relative;
	padding: 80px 0;
	background: var(--color-base);
}

.voice .cmn-title {
	margin:0 auto 80px;
}
.voice .cmn-title h2 {
	color:#FFF;
}

.voice li {
	padding: 30px 50px;
	background: #FFFFFF;
	border-radius: 10px;
}
.voice li:not(:last-child) {
	margin-bottom:35px;
}
.voice li:nth-child(2) {
	flex-direction: row-reverse;
}

.voice li .txt {
	width:80%;
	color:var(--color-base);
	text-align:left;
}
.voice li .img {
	width:15%;
}

@media screen and (max-width: 960px) {
	.voice {
		padding: 8vw 0;
	}

	.voice .cmn-title {
		margin:0 auto 8vw;
	}

	.voice li {
		padding: 5vw;
	}
	.voice li:not(:last-child) {
		margin-bottom:8vw;
	}

	.voice li .txt {
		width:100%;
	}
	.voice li .img {
		margin: 0 auto 5vw;
		width:40%;
	}
}

/***************************************************
　流れ
***************************************************/

.flow {
	padding: 100px 0;
	color:var(--color-base);
	background:url(../img/flow-bg.jpg) center top no-repeat;
	background-size:cover;
}

.flow-list ol {
	position: relative;
	align-items: stretch;
	background-image:url(../img/flow-arrow.svg),url(../img/flow-arrow.svg);
	background-position: 32.3% 50%, 68.3% 50%;
	background-repeat:no-repeat;
}

.flow-list li {
	position:relative;
	width:30%;
	padding: 85px 30px 30px;
	border: 1.5px solid var(--color-base);
	background:#FFF;
	border-radius: 10px;
}
.flow-list li .img {
  position:absolute;
	top:-22%;
	left:50%;
	transform: translate(-50%,0);
	width:125px;
}
.flow-list li h3 {
	margin-bottom:10px;
  font-size:160%;
	font-weight:500;
	text-align:center;
}

@media screen and (max-width: 960px) {
	.flow {
		padding: 8vw 0;
	}
	.flow .cmn-title {
		margin-bottom: 26vw;
	}

	.flow .inner {
		padding: 8vw 0;
	}

	.flow-list ol {
		position: relative;
		align-items:center;
		margin:0 auto;
		width:90%;
		background-image:url(../img/flow-arrow-sp.svg),url(../img/flow-arrow-sp.svg);
		background-position: center 28%,center 67%;
		background-repeat:no-repeat;
	}

	.flow-list li {
		width:100%;
		padding: 17vw 6vw 6vw;
	}
	.flow-list li:not(:last-child) {
		margin-bottom:25vw;
	}
	.flow-list li .img {
		width:24vw;
	}
}


/***************************************************
　よくある質問
***************************************************/

.qa {
	padding: 120px 0;
	position: relative;
}

.qa .cmn-title h2 {
	display: flex;
	align-items: center;
	justify-content: center;
}

.qa .accordion-header {
		padding:16px 24px;
		width: 100%;
		color:var(--color-base);
		font-weight:500;
		border-radius: 10px;
		background: #E9F4FF;
		justify-content: space-between;
}
.qa .accordion-header .manrope {
	background-image:url(../img/ico-q.svg);
}
.qa .accordion-content {
	padding:24px;
	color:var(--color-base);
	justify-content: space-between;
}
.qa .accordion-content .manrope {
	background-image:url(../img/ico-a.svg);
}
.qa .manrope {
	display:inline-block;
	width:36px;
	height:36px;
	text-indent:-9999px;
	background-position:0 0;
	background-repeat:no-repeat;
	background-size:100% auto;
}
.qa .accordion-header h3,
.qa .accordion-content div {
	width:94%;
}
.qa .accordion-content div {
	padding-top:5px;
}

@media screen and (max-width: 960px) {
	.qa {
		padding: 8vw 0;
	}
	.qa .accordion-header {
			padding:5vw 10vw 5vw 5vw;
	}
	.qa .accordion-content {
			padding:5vw 5vw 5vw 5vw;
	}
	.qa .manrope {
		width:9vw;
		height:9vw;
	}
	.qa .accordion-header h3,
	.qa .accordion-content div {
		width:83%;
	}
	.qa .accordion-content div {
		padding-top:1.5vw;
	}
}



@media screen and (max-width: 960px) {
	.content-header{
		margin-left: 10px;
	}

	.content-header img{
		width: 100%;
	}
}