@charset "utf-8";
/*******************************************************
mescius -https://www.mescius.jp/
Copyright(c)
by GrapeColors
*******************************************************/
/*****************************************************
		Root
******************************************************/
:root {
	/* Color */
	--color-main: 0, 160, 233;
	--color-sub: 0, 110, 190;
	--color-dark: 42, 68, 94;
	--color-accent: 94, 180, 30;
	--color-combi: 233, 110, 168;

	/*　Hover　*/
	--color-main-hover: 75, 182, 233;
	--color-dark-hover: 65, 112, 159;
	--color-accent-hover: 124, 206, 63;
	--color-combi-hover: 192, 72, 125;

	/* Font Size　*/

	  --font-size-p02: clamp(1rem, 5vw, 1.5rem);
	  /* 24px相当 */
	  --font-size-p03: clamp(1.4rem, 5vw, 1.88rem);
	  /* 30px相当 */
	  --font-size-p04: clamp(2rem, 5vw, 2.25rem);
	  /* 36px相当 */
	  --font-size-p05: clamp(2.4rem, 5vw, 3rem);
	  /* 48px相当 */
	  --font-size-p06: clamp(3.2rem, 10vw, 3.75rem);
	  /* 60px相当 */
	  --font-size-p07: clamp(3.5rem, 10vw, 4.5rem);
	  /* 72px相当 */
	  --font-size-p08: clamp(4.7rem, 10vw, 5.31rem);
	  /* 80px相当 */

	  /* Width */
	  --max-width-xxl: 1500px;
	  --max-width-xl: 1280px;
	  --max-width-lg: 1024px;
	  --max-width-rg: 960px;
	  --max-width-md: 768px;
	  --max-width-sm: 640px;
}
@media (max-width: 1024px) {
	:root {
	  --font-size-p02: clamp((1rem * 0.87), 5vw, (1.5rem * 0.87));
	  /* 24px相当 */
	  --font-size-p03: clamp((1.4rem * 0.85), 5vw, (1.88rem * 0.85));
	  /* 30px相当 */
	  --font-size-p04: clamp((2rem * 0.85), 5vw, (2.25rem * 0.85));
	  /* 36px相当 */
	  --font-size-p05: clamp((2.4rem * 0.85), 5vw, (3rem * 0.85));
	  /* 48px相当の70％ */
	  --font-size-p06: clamp((3.2rem * 0.85), 10vw, (3.75rem * 0.85));
	  /* 60px相当 */
	  --font-size-p07: clamp((3.5rem * 0.8), 10vw, (4.5rem * 0.8));
	  /* 72px相当の70％ */
	  --font-size-p08: clamp((4.7rem * 0.8), 10vw, (5.31rem * 0.8));
	  /* 85px相当の70％ */
	}
  }
  @media (max-width: 768px) {
	:root {
	  --font-size-p03: clamp((1.4rem * 0.7), 5vw, (1.88rem * 0.7));
	  /* 30px相当 */
	  --font-size-p04: clamp((2rem * 0.7), 5vw, (2.25rem * 0.7));
	  /* 36px相当 */
	  --font-size-p05: clamp((2.4rem * 0.7), 5vw, (3rem * 0.7));
	  /* 48px相当の70％ */
	  --font-size-p06: clamp((3.2rem * 0.7), 10vw, (3.75rem * 0.7));
	  /* 60px相当 */
	  --font-size-p07: clamp((3.5rem * 0.7), 10vw, (4.5rem * 0.7));
	  /* 72px相当の70％ */
	  --font-size-p08: clamp((4.7rem * 0.7), 10vw, (5.31rem * 0.7));
	  /* 85px相当の70％ */
	}
  }
  @media (max-width: 640px) {
	:root {
	  --font-size-p05: clamp((2.4rem * 0.6), 5vw, (3rem * 0.6));
	  /* 48px相当の70％ */
	  --font-size-p06: clamp((3.2rem * 0.5), 10vw, (3.75rem * 0.5));
	  /* 60px相当 */
	  --font-size-p07: clamp((3.5rem * 0.5), 10vw, (4.5rem * 0.5));
	  /* 72px相当の70％ */
	  --font-size-p08: clamp((4.7rem * 0.5), 10vw, (5.31rem * 0.5));
	  /* 85px相当の70％ */
	}
  }


/*****************************************************
		Main
******************************************************/
body {
	font-family: "Helvetica", YuGothic, "Yu Gothic", "ヒラギノ角ゴシック", "Hiragino Sans", "メイリオ", meiryo, verdana, sans-serif;
	background: #eff3f5;
}
main {
	width: 100%;
	min-height: calc(100vh - 600px);
	color: #666;
	letter-spacing: 0.1em;
}

img {
	object-fit: contain;
	font-family: 'object-fit: contain;'
}
p {
	/* max-width: 875px; */
	margin: 10px 0 0;
	font-size: 1rem;
	font-weight: normal;
	line-height: 1.8;
	letter-spacing: 0.05em;
	color: #666;
}

ul,li {
	/*max-width: 875px;*/
	font-size: 1rem;
	font-weight: normal;
	line-height: 2em;
	color: #666;
}

a:not:hover, a:not:active { text-decoration: none; }
a:hover { cursor: pointer; }

figure {
	/* 画像 */
}
	.figure__img {
		margin: 20px 0 50px;
	}
		figcaption {
			margin-top: 10px;
			color: #505050;
			font-size: 90%;
			text-align: center;
		}
		.row img,
		.modal-body img,
		.figure__img img {
			display: block;
			max-width: 100%;
			height: auto;
			margin-left: auto;
			margin-right: auto;
            padding: 0;
            background: none;
            border: none;
		}
		.figure__img--frame img {
			border: 1px solid #dcdcdc;
		}
		.figure__img--round-frame img {
			border: 1px solid #dcdcdc;
			border-radius: 6px;
			padding: 24px;
			background-color: #ffffff;
		}
		.figure__img--round-frame figcaption {
			text-align: center;
		}

/* --- Component -----------------------------*/
/* Background */
.bg--opaque { background: transparent; }
.bg--grayish-blue {	background: #c0d5e0; }
.bg--grayish-blue .h2--wrap { margin-top:0; }
.bg--white { background: #fff;}

.bg--bluepurple {background: #1E64A5;}

/* Block */
.block--flex { display: flex; }
.block---flex-colunm {
	display: flex;
	flex-direction: column;
}
	.justify--center { justify-content: center; }
	.item--align-center { align-items: center; }
	.flex--start { justify-content: flex-start !important; }

.scaling-wrap {
	position: relative;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
    backface-visibility: hidden
}
	.scaling-wrap::after {
		position: absolute;
		bottom: 0px;
		right: 0px;
		display: block;
		content: "";
		width: 100%;
		height: 100%;
		background: rgba(88, 88, 88, 0.5);
		background-size: auto;
		background-position: center center;
		background-repeat: no-repeat;
		z-index: 3;
	}
	.scaling-wrap > div { z-index: 5; }
	.scaling-wrap::before{ transition: all 0.5s ease; }

	.scaling-wrap:hover::before { transform: scale(1.2); }
	.scaling-wrap:hover::after { background: rgba(88, 88, 88, 0.2); }

.section--1col-img {
	display: flex;
	width: 70%;
	max-width: 795px;
	margin: 3rem auto;
	padding: 2em !important;
}

.hp-br-lg { display: block; }

/* Border */
.bdr-right--none { border-right: 0px; }

/* Color */
.color--excel {	color: #1d6f42; }
.color--white {color: #fff;}

/* Display */
.display--block { display: block; }
.display--in-block { display: inline-block; }
.from-640 { display: none;}

/* Font & Text */
.normal { font-weight:normal; }
.bold { font-weight:bold; }
.indent { text-indent: 1rem; }
.sec-line--indent {
	text-indent: -1rem;
	padding-left: 1rem;
}
.f-small { font-size:90%; }
.f-large { font-size: large;}
.t-underline { text-decoration:underline; }
.border--none { border: none !important; }
.text-align--top-left {
	text-align: left;
	vertical-align: top;
}

.line-height--2em { line-height: 2em; }

/* Layout */
.contents--wrap {
	width: 100%;
	padding: 0 120px;
}
.text-align--right { text-align: right; }
.text-align--center { text-align: center; }

/* Link */
.link--text-color { color:#333; }
	.link--text-color:hover,.link--text-color:active { color:#000; text-decoration: underline; }

/* List */
.list-style--none { list-style: none; }

/* Space */
.sub-section { margin-top: 40px; }
.section--margin { margin-top: 70px; }

.mar-top--1rem { margin-top: 1rem; }
.mar-btm--1rem { margin-bottom: 1rem; }
.mar-btm--2rem { margin-bottom: 2rem; }
.mar-btm--3rem { margin-bottom: 3rem; }
.mar-btm--5rem { margin-bottom: 5rem; }
.mar-top--2rem { margin-top: 2rem; }
.mar-top--3rem { margin-top: 3rem; }
.mar-top--5rem { margin-top: 5rem; }
.mar-ver--3rem { margin-top: 3rem; margin-bottom: 3rem; }
.mar-ver--5rem { margin-top: 5rem; margin-bottom: 5rem; }
.mar-auto { margin: auto; }
.mar--1rem--auto { margin: 1rem auto; }
.mar--3rem--auto { margin: 3rem auto; }
.mar--hor-auto { margin-right: auto; margin-left: auto; }

.pad-hor--95 { padding-left: 95px; padding-right: 95px; }
.pad-ver--3rem { padding-top: 3rem; padding-bottom: 3rem; }
.pad--0 { padding: 0px !important; }
.pad-left--1rem { padding-left: 1rem; }
.pad-left--half { padding-left: 0.5rem; }

/* Width */
.max-width--definer {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0;
}
.min-width--450 { min-width: 450px; }
.width--100per { width: 100%;}
.single-col--p { width: 70%; }

@media only screen and (max-width : 960px) {
	.hp-br-lg { display: inline; }
}

/*****************************************************
  	Parts
******************************************************/
/* --- Add ------------------- */
.notes {
    color: #646464;
    font-size: 14px;
}

.pick-up {
    width: 100%;
    padding: 20px 40px;
    background: #eef4fd;
    border: 1px solid #00a0e9;
}
/* --- Button ------------------- */
/* コンテンツ内普通サイズ */
.el_btn {
	display: inline-block;
	padding: 1rem 2rem;
	text-align: center;
	border-radius: 3rem;
	transition:.3s all;
	border: 0;
	cursor: pointer;
}
/* 小さめ */
.el_btn_s {
	display: inline-block;
	padding: .3rem 1rem;
	text-align: center;
	border-radius: 3rem;
	transition:.3s all;
	border: 0;
	cursor: pointer;
}

/* メインカラー */
.el_btn_main {
	color: #fff;
	background-color: rgb(var(--color-main));
}
	.el_btn_main:hover, .el_btn_main:active {
		color: #fff;
		text-decoration: none;
		background-color: rgb(var(--color-main-hover));
	}

/* ダークカラー */
.el_btn_dark {
	color: #fff;
	background-color: rgb(var(--color-dark));
}
	.el_btn_dark:hover, .el_btn_dark:active {
		color: #fff;
		text-decoration: none;
		background-color: rgb(var(--color-dark-hover));
	}

/* アクセントカラー/グリーン */
.el_btn_accent {
	color: #fff;
	background-color: rgb(var(--color-accent));
}
	.el_btn_accent:hover, .el_btn_accent:active {
		color: #fff;
		text-decoration: none;
		background-color: rgb(var(--color-accent-hover));
	}

/* 組み合わせ*コンビカラー/ピンク */
.el_btn_combi {
	color: #fff;
	background-color: rgb(var(--color-combi));
}
	.el_btn_combi:hover, .el_btn_combi:active {
		color: #fff;
		text-decoration: none;
		background-color: rgb(var(--color-combi-hover));
	}

/* 補助カラー/薄系ブルー */
.el_btn_part {
	color: #fff;
	background-color: rgb(107, 182, 200);
}
	.el_btn_part:hover, .el_btn_part:active {
		color: #fff;
		text-decoration: none;
		background-color: rgb(68, 137, 156);
	}

/* 枠線ブルー/背景ホワイト */
.el_btn_bor01 {
	color: rgb(var(--color-sub));
	border: solid 2px rgb(var(--color-sub));
}
	.el_btn_bor01:hover, .el_btn_bor01:active {
		color: #fff;
		text-decoration: none;
		background-color: rgb(var(--color-sub));
	}

/* 枠線ブルー/背景なし */
.el_btn_bor02 {
	color: rgb(var(--color-sub));
	border: solid 2px rgb(var(--color-sub));
	background-color: transparent;
}
	.el_btn_bor02:hover, .el_btn_bor02:active {
		color: rgb(var(--color-main));
		border: solid 2px rgb(var(--color-main));
		text-decoration: none;
	}

/* 枠線ブルー/背景メインカラー */
.el_btn_bor03 {
	color: #fff;
	border: solid 2px rgb(var(--color-sub));
	background-color: rgb(var(--color-main));
}
	.el_btn_bor03:hover, .el_btn_bor03:active {
		color: #fff;
		text-decoration: none;
		background-color: rgb(var(--color-sub));
	}

/* その他ボタン */
.btn--trial {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 280px;
	padding: 1rem;
	font-size: 1rem;
	color: #fff !important;
	background: #ee6ea8;
	border: solid 2px #fff;
	border-radius: 3rem;
	box-shadow: 0 0 3px 2px rgba(0,0,0,0.3);
}

.btn--trial:hover {
	color: #fff;
	background: #cf3c7f;
	text-decoration: none;
}

.btn--turquoise {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	font-size: 1rem;
	color: #fff !important;
	background: #4cb8cc;
	border-radius: 3rem;
}

.btn--turquoise:hover {
	color: #fff;
	background: #1f8b9e;
	text-decoration: none;
}

.btn--pink {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	font-size: 1rem;
	color: #fff !important;
	background: #ee6ea8;
	border-radius: 3rem;
}

.btn--pink:hover, .btn--pink:active {
	color: #fff !important;
	background: #cf3c7f;
	text-decoration: none;
}

.fa-external-link-alt {	margin-left: 10px; }

.red--pdf {	color: #E91F27; }

.btn--pink-line {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 170px;
	height: 50px;
	padding: 1rem;
	font-size: 1rem;
	color: #ee6ea8 !important;
	background: #fff;
	border: solid 2px #ee6ea8;
	border-radius: 3rem;
}

.btn--pink-line:hover, .btn--pink-line:active {
	color: #fff !important;
	background: #ee6ea8;
	text-decoration: none;
}
.btn--green-line {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	max-width: 100%;
	height: 50px;
	padding: 1rem;
	font-size: 1rem;
	color: #2ea875 !important;
	background: #eff3f5;
	border: solid 2px #2ea875;
	border-radius: 3rem;
}

.btn--green-line:hover, .btn--green-line:active {
	color: #fff !important;
	background: #2ea875;
	text-decoration: none;
}

.btn--blue-line {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	max-width: 100%;
	height: 50px;
	padding: 1rem;
	font-size: 1rem;
	color: #006ebe !important;
	background: #eff3f5;
	border: solid 2px #006ebe;
	border-radius: 3rem;
}

.btn--blue-line:hover, .btn--blue-line:active {
	color: #fff !important;
	background: #006ebe;
	text-decoration: none;
}


.btn--blue-line__large {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 270px;
	max-width: 85vw;
	height: 50px;
	padding: 1rem;
	font-size: 1rem;
	color: #006ebe !important;
	background: #eff3f5;
	border: solid 2px #006ebe;
	border-radius: 3rem;
}

.btn--blue-line__large:hover, .btn--blue-line__large:active {
	color: #fff !important;
	background: #006ebe;
	text-decoration: none;
}

.btn--blue-line__larger {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 350px;
	max-width: 80vw;
	height: 50px;
	padding: 1rem;
	font-size: 1rem;
	color: #006ebe !important;
	background: #eff3f5;
	border: solid 2px #006ebe;
	border-radius: 3rem;
}

.btn--blue-line__larger:hover, .btn--blue-line__larger:active {
	color: #fff !important;
	background: #006ebe;
	text-decoration: none;
}

.btn--blue {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 210px;
	height: 50px;
	padding: 1rem;
	font-size: 1rem;
	color: #fff !important;
	background: #2d9ef1;
	border: solid 2px #006ebe;
	border-radius: 3rem;
}

.btn--blue:hover, .btn--blue:active {
	color: #fff !important;
	background: #006ebe;
	text-decoration: none;
}


/* --- Cards ------------------------ */
.card {	box-shadow: 0 2px 5px #ccc; }
  .card-content { padding: 20px; }
  .card-title {
	font-size: 20px;
	line-height: 1.6;
	margin-bottom: 20px;
	text-align: center;
	color: #333;
  }
  .card-text {
	color: #777;
	font-size: 14px;
	margin-top: 10px;
  }
  .card-link {
	text-align: center;
	border-top: 1px solid #eee;
	padding: 20px;
  }
  .card-link a {
	text-decoration: none;
	color: #0bd;
	margin: 0 10px;
  }
  .card-link a:hover { color: #0090aa; }

/* --- Tag ---------------------- */
.tag {
	position: relative;
	display: inline-block;
	margin: 0 .6em .8em .6em;
	padding: .6em .6em .6em 1.2em;
	line-height: 1;
	font-size: 12px;
	color: #fff;
	text-decoration: none;
}
.tag:before {
	position: absolute;
	top: 0;
	left: -1em;
	content: '';
	border-width: 1.1em 1em 1.1em 0;
	border-style: solid;
}
.tag:after {
	position: absolute;
	top: center;
	left: 0;
	content: '●';
	color: #fff;
}
.tag-deepblue { background-color: #0366b4; }
.tag-deepblue:before { border-color: transparent #0366b4 transparent transparent; }

.tag-blue {	background-color: #0097ee; }
.tag-blue:before { border-color: transparent #0097ee transparent transparent; }

.tag-green { background-color: #01a9a1; }
.tag-green:before {	border-color: transparent #01a9a1 transparent transparent; }

.tag-yellow { background-color: #feb000; }
.tag-yellow:before { border-color: transparent #feb000 transparent transparent; }

.tag-red { background-color: #e16868; }
.tag-red:before { border-color: transparent #e16868 transparent transparent; }

.tag-purple { background-color: #896ac5; }
.tag-purple:before { border-color: transparent #896ac5 transparent transparent; }

/*一覧 - カード型UI - 上書き用*/
.card--example-3 {
	position: unset;
	border-radius: 5px;
	border: solid 1px #2ea875;
}
.card--example-title {
    margin-bottom: 50px;
	font-weight: 600;
    font-size: 34px;
    line-height: 1.5;
    color: #2ea875;
    text-align: left;
}

/* --- Headline ------------------- */
.h2--wrap {	margin-top: 80px; }

.h2--img-wrap {
	display: flex;
	align-items: baseline;
}

.h2--bar {
	display: flex;
	width: 90px;
	height: 3px;
	background: #029de2;
	margin-right: 5px;
}

.title-h2 {
	width: 90%;
	padding-left: 95px;
	font-size: 36px;
	line-height: 1.5em;
	font-weight: bold;
	color: #333;
}

.title-h3 {
	font-size: 30px;
	line-height: 48px;
	color: #333;
}

.h4 {
	margin-bottom: 20px;
	padding-top: 10px;
	font-size: 24px;
	line-height: 1.6em;
	color: #333;
	border-top: 7px solid;
    border-right: 0px solid;
    border-bottom: 0px solid;
    border-left: 0px solid;
    border-image: linear-gradient(90deg, rgba(2,157,226,1) 8px, rgba(2,157,226,0) 8px);
    border-image-slice: 1;
}


/*****************************************************
	Header
*****************************************************/
header {
	position: fixed;
    top: 0;
	width: 100%;
	height: 120px;
	background-color: rgb(var(--color-dark));
	z-index: 9999;
}
.header-wrap { height: 100%; }
.header-upper {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 35px;
	background-color: rgb(173, 208, 226);
}
	.header-upper-cont {
		max-width: var(--max-width-xxl);
		width: 100%;
		margin: auto;
		font-size: .9rem;
		text-align: right;
	}
	.header-upper-cont a:not(:last-child) { margin-right: 1.5rem; }
	.header-upper-cont a.el_btn_s:not(:last-child) { margin-right: .5rem; }

.header-lower {	height: calc(100% - 35px); }
	.header-lower-cont {
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-width: var(--max-width-xxl);
		width: 100%;
		height: 100%;
		margin: auto;
	}
	.header-logo {
		width: 100%;
		max-width: 160px;
		padding-left: 1rem;
	}
	nav{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.header-main-navi {
		display: flex;
		align-items: center;
		margin-bottom: 0;
		color:#fff;
	}
		.header-main-navi li {
			position: relative;
			list-style: none;
			height: 100%;
			margin-right: 1.5rem;
		}
		.header-main-navi a {
			color:#fff;
			font-weight: 600;
		}
		.header-main-navi a:hover,.header-main-navi:active { text-decoration: none; }
		.header-main-navi a::after {
			content:"";
			position: absolute;
			left: 0;
			bottom: -5px;
			display: inline-block;
			width: 100%;
			transition: transform .3s;
			transform-origin: right top;
			transform: scale(0, 1);
		}
		.header-main-navi a:hover::after,.header-main-navi:active::after {
			border-bottom: solid 2px #fff;
			transform-origin: left top;
			transform: scale(1, 1);
		}
		.header-sup-navi {
			width: 200px;
			padding-left: 1rem;
			font-size: .8rem;
			border-left: solid 1px #fff;
		}
			.header-sup-navi a { display: block; }
			.header-sup-navi a:not(:last-child) { margin-bottom: .5rem; }

/* Humburger */
.sp-logo { display: none; }

/* Script CSS */
.js_header_fixed { transition: .5s all; }
.js_header_fixed.hide { transform: translateY(-100%); }

/***********************************
	Card area before footer
**********************************/

.section--learn-more {
	width: 100%;
	margin-top: 120px;
	padding: 1px 0 30px;
	background: #fff;
}

.section--learn-more .h2--wrap {
	margin-top: 48px;
}

.card--3-col__wrap {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content: space-between;
	margin-top: 2rem;
}

.card--learn-more {
	display: flex;
	flex-direction: column;
	width: 220px;
	width: clamp(175px, 23%, 300px);
	margin: 0 0 50px;
	background: #fff;
	border: solid 1px #c6c6c6;
}

.card--learn-more__img {
	width: 100%;
	object-fit: cover;
}

.card--learn-more .btn {
	display: flex;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 2rem 1.2rem;
	border-radius: 0;
}

/*************
	活用例
****************/

.card--example, .card--case {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 345px;
	margin: 0 2.5% 50px;
	padding: 45px 35px 30px;
	background: #fff;
	border: solid 1px #c6c6c6;
}

.card--example-2 {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: calc((100% - 20px) / 2);
    max-width: 376px;
	min-width: 200px;
	margin: 0 8px 50px;
	padding: 45px 35px 30px;
	background: #fff;
	border: solid 1px #c6c6c6;
}

/*.card--example-2:first-of-type { margin: 0 20px 50px 0; }*/

.card--example-3 {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: calc((100% - 40px) / 3);
	min-width: 200px;
	margin: 0 0 50px;
	padding: 45px 35px 30px;
	background: #fff; 
	border: solid 1px #c6c6c6;
}

.card--example-3:nth-of-type(2) { margin: 0 auto 50px; }

.card--example-4 {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: calc((100% - 60px) / 4);
	min-width: 200px;
	margin: 0 20px 50px 0;
	padding: 45px 35px 30px;
	background: #fff; 
	border: solid 1px #c6c6c6;
}

.card--example-4:last-of-type { margin: 0 0 50px; }

.card--example::after, .card--example-2::after, .card--example-3::after, .card--example-4::after {
	position: absolute;
	content: '';
	top: -1px;
	left: -1px;
	width: 35px;
	height: 10px;
	background: #2d9ef1;
}

.card--example-title {
	margin-bottom: 50px;
	font-size: 24px;
	line-height: 36px;
	color: #074d80;
	text-align: center;
}

.card--example p, .card--example-2 p, .card--example-3 p, .card--example-4 p, .card--case p { margin-bottom: auto; }

.card--example .btn, .card--example-2 .btn, .card--example-3 .btn, .card--example-4 .btn, .card--case .btn { background: #fff; }

/**************
導入事例
*************/

.card--case::after {
	position: absolute;
	content: '';
	top: -1px;
	left: -1px;
	width: 35px;
	height: 10px;
	background: #4cb8cc;
}

/***********
	Card round
*************/
.card--round {
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	width: calc((100% - 80px) / 3);
	max-width: 350px;
	margin: 0 0 50px;
	padding: 70px 35px;
	color: #fff;
	background: #4cb8cc;
	border-radius: 50rem;
}

.card--round:nth-of-type(2) { margin: 0 auto 50px; }

.card--round-title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 2rem;
	padding-bottom: 1rem;
	font-size: 24px;
	border-bottom: solid 1px #fff;
}

.card--round-title__number {
	font-size: 90px;
	font-weight: bolder;
}

.card--round-title__number-unit {
	font-size: 36px;
	font-weight: bolder;
}

.card--round-p {
	margin: 2rem auto;
	text-align: center;
	line-height: 1.8rem;
	color: #fff;
}

/***********************************
	共通Cardレイアウト
**********************************/
.card--2box__wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	width: 100%;
	justify-content: flex-start;
	margin-top: 2rem;
}
.card--2box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: calc((100% - 20px) / 2);
	margin: 0 0 50px;
	padding: 45px 35px 30px;
	background: #fff;
	border: solid 1px #c6c6c6;
	box-sizing: border-box;
}
.card--2box:after {
	position: absolute;
	content: '';
	top: -1px;
	left: -1px;
	width: 35px;
	height: 10px;
	background: #2d9ef1;
}
.card--2box-title {
	margin-bottom: .5rem;
	font-size: clamp(1.2rem, 10vw, 30px);
	font-weight: 600;
	line-height: 36px;
	color: #074d80;
	/* text-align: center; */
}
/********************************
	FOOTER
********************************/
footer { background: #556a7a; }

.footer-wrap {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 50px 30px 0px 100px;
    color: #fff;
	background: #556a7a;
}

.footer--top { display: flex; }

.footer--logo-ank {
	display: block;
	width: 70px;
}

.footer-logo {
	margin-bottom: auto;
	max-width: 70px;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.footer--list-wrap {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding-left: 100px;
}

.footer--list-wrap ul{
	padding: 0;
	list-style: none;
	line-height: 1.5em;
}

.footer--link-ul {
	min-width: 200px;
	margin: -10px 10% 58px 0;
}

.footer--link-ul:first-of-type {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
  	width: 40%;
	min-width: 430px;
}

.footer--link-ul:not(first-of-type) { width: 20%; }

.footer--link-ul:last-of-type { margin-right: 0; }

.footer--chunck:first-of-type{ margin-right: 2em; }

.footer--link-head {
	width: 100%;
	color: #FFF;
	padding-bottom: 0.5em;
	margin-bottom: 1.5em;
	border-bottom: solid 1px #68c8f4;
}

.footer--link-pri {
	display: flex;
	font-weight: bold;
	color: #68c8f4;
	padding: 10px 10px 10px 0;
	line-height: 1.5em;
}

.footer--link-pri:hover, .footer--link-pri:active {
	color: #68c8f4;
	text-decoration: underline;
}

.footer--link-sec {
	display: flex;
	font-weight: lighter;
	color: #FFF;
	margin-left: 1rem;
	padding: 0px 10px 10px 0;
	line-height: 1.5em;
}

.footer--link-sec:hover, .footer--link-sec:active{
	color: #FFF;
	text-decoration: underline;
}

.footer--btm {
	color: #fff;
	background: #1c2e3b;
}

.footer--btm-content {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1440px;
	margin: auto;
	padding: 0px 7% 0px 8%;
}

.footer--btm-anchor-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.footer--btm-left {	padding: 1rem 0; }

.vertical--bar { margin-left: 10px; }

.copyright {
	display: flex;
	font-size: 1rem;
	margin: 0.5rem 1rem 0;
	text-align: left;
	color: #fff;
}

.footer--btm-right {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-left: 1rem;
	padding: 1rem 0;
}

.footer--btm-right *:not(:last-child) {	margin-right: 10px; }

.touch-action { height: 100%; }

/********************************
	Media query
********************************/
@media only screen and (max-width : 1200px) {
	/* --- Header ---------------*/
	.header-logo {
		width: 100%;
		max-width: 120px;
	}
	.header-main-navi li { margin-right: 1.2rem; }
	.header-main-navi a { font-size: .9rem; }

	/*nav {
		flex-direction: column-reverse;
		text-align: right;
	}
	.header-sup-navi {
		width: 100%;
		font-size: .75rem;
		border-left: 0;
		border-bottom: solid 1px #ccc;
	}
	.header-sup-navi a {
		display: inline-block;
		margin-bottom: .3rem;
	} */
}
@media only screen and (max-width : 1112px) {
	/* Card */
	.card--example-4 {
		width: calc((100% - 20px) / 2);
		max-width: none;
	}
	.card--example-4:nth-of-type(even) { margin: 0 0 50px; }

	/* Footer */
	.footer--link-ul { margin-right: 32px; }
	.footer--btm-content { flex-direction: column-reverse; }
	.footer--btm-right {
		flex-wrap: wrap;
		justify-content: flex-start;
		padding-bottom: 0.5em;
	}
		.footer--btm-right img {
			display: flex;
			margin-top: 0.5em;
			margin-block: 0.5em;
		}
}
/*1112 END*/

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

	/* --- Header ---------------*/
	header { height: 70px; }
	.header-upper {
		justify-content: center;
		align-items: center;
		height: auto;
		margin-top: 1rem;
		padding: 1rem;
	}
	.header-upper-cont {
		font-size: .85rem;
		text-align: center;
	}
	.header-upper-cont a {
		display: inline-block;
		width: 48%;
		text-align: center;
	}
	.header-upper-cont a:not(.el_btn_s) {
		position: relative;
		margin-right: 0;
		margin: 0.5rem 0 0;
    	padding: 0 0.5rem 0 0.3rem;
	}
	.header-upper-cont a:not(.el_btn_s):nth-child(odd)::after {
		content:"|";
		position: absolute;
		right:0;
	}
	.header-upper-cont .el_btn_s {
		margin-top:.5rem;
		font-size: .8rem;
	}
	.header-lower { height: auto; }
	.header-lower-cont { height: auto; }
	.header-lower-cont .header-logo { display: none; }
	.sp-logo {
		display: inline-block;
		width: 100%;
		max-width: 160px;
	}
	/* Nav */
	nav {
		flex-direction: column;
		text-align: left;
	}
	.header-main-navi {
		display: flex;
		flex-wrap: wrap;
		margin: 1rem 0;
		padding-left: 0;
	}
	.header-main-navi li {
		width: 50%;
		margin-right: 0;
		padding:.5rem;
		border-bottom: dotted 1px #7FA2C6;
		text-align: center;
	}
	.header-main-navi li:nth-child(even) { border-left: dotted 1px #7FA2C6; }
	.header-main-navi li:nth-child(-n+2) { border-top:dotted 1px #7FA2C6; }
	.header-sup-navi {
		padding-left: 0;
		padding-bottom: .5rem;
		font-size: .75rem;
		text-align:center;
	}
	.header-sup-navi a {
		display: inline-block;
		width: 48%;
		margin-bottom: 0.3rem;
		padding: 0.3rem .5rem!important;
	}
	.header-main-navi a::after { display: none;	}
	.header-main-navi a:hover, .header-main-navi a:active { color: rgb(var(--color-main)); }

	/* Hambergur */
	.hamb-button__wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		right: 0;
		width: 100%;
		height: 100%;
		padding: 15px;
		z-index: 1000;
		cursor: pointer;
	  }
	  .hamb-button__wrap.active {
		top: 0;
		color: #fff;
	  }
	  .header-wrap,
	  .header-wrap .close {	display: none; }

	  .header-wrap.open {
		display: flex;
		flex-direction: column-reverse;
		justify-content: flex-end;
		align-items: center;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 64px 20px 0;
		background-color: rgba(var(--color-dark, 0.9));
	  }
	  /* .header-wrap.open a:nth-last-of-type(2) {
		padding: 0 1em;
	  } */
	  .header-wrap.open__link {	margin: 0.4em auto; }
	  .header-wrap.open__link:hover, .header-wrap.open__link:active { font-weight: 600; }
	  .header-wrap.open__link:hover::after, .header-wrap.open__link:active::after {	border-bottom: 0; }
	  .header-wrap.open__button { margin: 0.4em auto; }
	  .hamb-button__border {
		display: inline-block;
		position: relative;
		width: 25px;
		height: 19px;
		margin-left: 2rem;
		z-index: 20;
		transition: all 0.3s;
	  }
	  .hamb-button__border span {
		display: inline-block;
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: #fff;
		border-radius: 4px;
		transition: all 0.3s;
	  }
	  .hamb-button__border span:nth-of-type(1) { top: 0; }
	  .hamb-button__border span:nth-of-type(2) { top: 8px; }
	  .hamb-button__border span:nth-of-type(3) { bottom: 0; }
	  .active .hamb-button__border span:nth-of-type(1) { transform: translateY(10px) rotate(-45deg); }
	  .active .hamb-button__border span:nth-of-type(2) { opacity: 0; }
	  .active .hamb-button__border span:nth-of-type(3) { transform: translateY(-6px) rotate(45deg); }

	.header__wrap.sec_color .hamb-button__border span {	background-color: #333; }
	  .header__wrap.sec_color .open .hamb-button__border span, .header__wrap.sec_color .open__button { background-color: #fff; }


	/* --- Card ---------------*/
	.card--example-3, .card--round {
		flex-direction: row;
		align-items: center;
		width: 100%;
		max-width: none;
		margin: 0 0 1rem;
		padding: 1rem 2rem;
	}

	.card--example-3:nth-of-type(even), .card--round:nth-of-type(even) { margin: 0 0 1rem auto; }
		.card--learn-more {
			width: 45%;
			max-width: none;
		}
		.card--round-title {
			width: 40%;
			border-right: solid 1px #fff;
			border-bottom: 0;
		}
		.card--round-title__number {
			font-size: 60px;
		}
		.card--round-p {
			padding-right: 2rem;
			padding-left: 2rem;
			text-align: left;
		}
/***********************************
	共通Cardレイアウト
**********************************/
.card--2box__wrap {
	flex-direction: column;
}
.card--2box {
	width: 100%;
	margin: 0;
}
	/* ---  Footer Link ---- */
	.footer--link-ul:first-of-type {
		width: 100%;
		min-width: 0;
		margin-right: 0;
	}

	.footer--link-ul:not(first-of-type) { width: 45%; }

	.footer--link-ul:last-of-type { margin-right: 0; }

	.footer--chunck { margin-right: 3em; }

	.h2--bar { width: 51px;	}

	.title-h2 {	padding-left: 56px;	}

	.pad-hor--95 {
		padding-left: 56px;
		padding-right: 56px;
	}

	.contents--wrap { padding: 0 56px 48px; }
}

@media only screen and (max-width : 768px) {
	.single-col--p, .text--plain { width: 100%; }
	.card--round-title { font-size: 18px; }
}

@media only screen and (max-width : 640px) {
	.till-641 { display: none; }
	.from-640 { display: block; }
	.max-width--definer {padding: 0 15px; }
	.pad-hor--95 { padding-left: 0px; padding-right: 0px; }
	.mar-btm--5rem { margin-bottom: 2rem; }
	.pad-right--15 { padding-right: 15px; }
	.section--learn-more {
		margin-top: 2rem;
		padding: 1px 0px 30px;
	}
	.single-col--p { width: 100%; }

	.btn--blue-line__larger {
		max-width: 100%;
		height: auto;
	}

	.section--1col-img {
		width: 100% !important;
		padding: 1em;
	}
		.section--1col-img { width: 100% !important; }

	td { word-break: break-all; }

	/**********
		content area
	****************/

	.contents--wrap {
		width: 100%;
		padding: 0 0 30px;
	}

	/***********
		Headings
	************/
	.h2--wrap {	margin-top: 40px; }
	.h2--img-wrap {
		display: flex;
		align-items: baseline;
	}

	.h2--bar { display: none; }

	.title-h2 {
		width: 90%;
		padding-left: 00px;
		font-size: 24px;
		line-height: 1.5em;
		font-weight: bold;
		color: #333;
	}

	.title-h3 {
		margin-bottom: 50px;
		font-size: 20px;
		line-height: 30px;
		color: #333;
	}

	.h4 {
		margin-bottom: 20px;
		padding-top: 5px;
		font-size: 18px;
		color: #333;
		border-top: 7px solid;
		border-right: 0px solid;
		border-bottom: 0px solid;
		border-left: 0px solid;
		border-image: linear-gradient(90deg, rgba(2,157,226,1) 8px, rgba(2,157,226,0) 8px);
		border-image-slice: 1;
	}
	/* Card Round */
	.card--round {
		margin: 0 auto 20px;
		border-radius: 5rem;
	}
	.card--round, .card--round:nth-of-type(2n) { margin: 0 auto 20px; }
	.card--round-title__number { font-size: 40px; }
	.card--example-3, .card--round { flex-direction: column; }
	.card--round-title {
		width: 50%;
		border-right: 0;
		border-bottom: solid 1px #fff;
	}
	.card--round-p {
		margin: 1rem auto;
		padding: 0 1rem;
	}
	.card--round-title__number { font-size: 80px; }

	.card--round-title__number-unit { font-size: 32px; }

	/* --- Footer ---------------------------- */
	.footer-wrap { padding: 3rem 5%; }

	.footer--top { flex-direction: column; }

	.footer--logo-ank { margin: 0 auto 3.5rem; }

	.footer--list-wrap { padding: 0; }

	.footer--btm {
		margin-top: 0;
		text-align: left;
	}

	.footer--btm-content { padding: 0 5%; }

	.footer--btm-right, .footer--btm-left {	margin-left: 0;	}

	.footer--btm-anchor-wrap .footer--link-sec:first-of-type, .copyright {
		margin-left: 0;
		padding-left: 0;
	}
}

@media only screen and (max-width : 480px) {
	.card--3-col__wrap { justify-content: center; }

	.card--example-2 {
		width: 100%;
		margin: 0 auto 50px;
	}

	.card--example-2:first-of-type { margin: 0 auto 50px; }

	.card--example-3 {
		width: 100%;
		margin: 0 auto 50px;
	}

	.card--round, .card--round:nth-of-type(2n) {
		width: 100%;
		max-width: 350px;
		margin: 0 auto 32px;
	}

	.card--example-3:nth-of-type(even) { margin: 0 auto 50px; }

	.card--example-4 {
		width: 100%;
		max-width: none;
		margin: 0 auto 30px;
	}

	.card--example-4:nth-of-type(even) { margin: 0 auto 30px; }
		.card--learn-more {	width: 100%; }


	/* --- Footer ----------------------------- */
	.footer--btm-anchor-wrap {
		align-items: flex-start;
		flex-direction: column;
		margin-bottom: 1rem;
	}

	.footer--btm-anchor-wrap .footer--link-sec { margin-left: 0; }

	.vertical--bar { display: none; }

	.footer--btm-right { max-width: 300px; }

	.footer--link-ul:first-of-type { flex-direction: column; }

	.footer--chunck { margin-right: 0; }

	.footer--link-ul:not(first-of-type) {
		width: 100%;
		margin-right: 0;
	}

	.copyright {
		justify-content: center;
		margin: 0;
	}
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}
	body * {max-width: 100%;}

	.card--learn-more__img {
		height: 100% !important;
		background-size: cover !important;
	}

	.sp-global--nav_li__corporate-a { height: 50px; }
}

/*　New Nav　*/
.header__wrap.hide { transform: translateY(-100%); }