@charset "utf-8";
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.min.css");

/*******************************************************
mescius -http://www.mescius.jp/
Copyright(c)
by GrapeColors
*******************************************************/
/* --- Common ---------------------*/
#forguncyTop {}
main { padding-top: 0; overflow: hidden; }
a:hover,a:active { text-decoration: none; }

/* --- Main Visual ---------------------*/
.section--slider {
    position: relative;
	height: 760px;
	overflow: hidden;
}
.section--main-visual {
	position: relative;
	width: 100%;
	height: auto;
	padding-top: 120px;
}

.main-visual {
	width: 100%;
	height: 100%;
	background-color:#3b55a0;
}
	.main-visual-cont {
	}
	.main-visual h1{
		/* text-shadow: 2px 2px 2px #7ac4e1, 0 0 2px #7ac4e1; */
	}
	.slide-heading {
		border-bottom: 2px solid #00A0E8;
		color: #00A0E8;
		font-size: 0.6em;
		/* padding: 0.1em 0.5em 0.2em; */
		/* background-color: #00A0E8; */
		/* border-radius: 10px; */
	}


.main-visual-cont {
	display: grid;
	grid-template-columns: 1fr clamp(28.75rem, -32.679rem + 57.14vw, 33.75rem);
	/* grid-template-columns: 1fr clamp(29.375rem, 8.158rem + 19.74vw, 34.063rem); */
	max-width: var(--max-width-xxl);
	width: 80%;
	height: 100%;
	min-height: clamp(26.25rem, 21.1rem + 10.73vw, 32.5rem);
	/* min-height: clamp(26.25rem, 7.917rem + 30.56vw, 36.563rem); */
	/* min-height: 585px; */
	margin: auto;
	z-index: 5;
	background-color: transparent;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow:hidden;
}

.mark-itreview { width: 400%; }

.main-visual-detail {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	background-color: transparent;
	padding-left: 2rem;
}
	.main-visual-detail button {
		padding-right: 4rem;
		padding-left: 4rem;
		font-weight: 600;
		border:solid 2px #fff;
		box-shadow: 5px 2px 10px 3px rgba(0, 0, 0, 0.2);
	}

.visual-title {
	margin: 0rem 0 2rem;
	color:#fff;
	font-size: clamp(2.5rem, 1.264rem + 2.58vw, 4rem);
	/* font-size: clamp(64px, 10vw, 80px); */
	font-weight: 600;
}
	/* .visual-title-decorate {
		position: relative;
		display: inline-block;
		background-image: url(../imgs/top/decorate_line.svg);
		background-position: center bottom;
		background-repeat: no-repeat;
		background-size: 100%;
	} */

	.visual-title-decorate {
		vertical-align: baseline;
		background: linear-gradient(transparent 70%, #EED76F 70%);
	}
	.visual-title .visual-title-decorate {
		letter-spacing: -0.02em;
	}
	.visual-msg {
		padding-left: 0;
	}
	.visual-msg li {
		list-style-type: none;
		color:#fff;
		font-size: clamp(1.125rem, 0.507rem + 1.29vw, 1.875rem);
		font-weight: 600;
		line-height: 1.7;
	}

	.main-visual-img {
		/* position: absolute;
		top: 3rem;
		bottom: 0;
		right: 2rem; */
		display: grid;
		padding-right: 2rem;
		padding-top: 3rem;
		/* max-width: 520px;
		width: 33%; */
	}
	.main-visual-imgbg {
		margin-top: -1rem;
	}
	.main-visual-imgmsg img,
	.main-visual-imgbg img {
		width: 100%;
		object-fit: contain;
	}
	.main-visual-imgmsg {
		align-self: flex-end;
	}
	.main-visual-imgbg {
		align-self: flex-start;
	}




/* top slide */
.hp-disp-grid {
	display: flex;
	justify-content: center;
	position: absolute;
	width: 100%;
	bottom: 1rem;
	left: 50%;
	align-items: center;
	transform: translateX(-50%);
}
.splide__pagination {
	counter-reset: pagination-num;
	position: static;
}

.splide__pagination__page:before {
	counter-increment: pagination-num;
	content: counter( pagination-num );
}

.splide-example .splide__arrows,
.splide-features .splide__arrows {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	margin-top: 3rem;
	margin-bottom: -4rem;
}
.splide-example .splide__arrow,
.splide-features .splide__arrow {
	position: static;
	background-color: #fff;
	font-size: 1.5rem;

}
/* .splide-example .splide__arrow svg,
.splide-features .splide__arrow svg {
	fill: rgb(0, 160, 233);

} */

.splide-top .splide__arrow {
	position: static;
	transform: none;
	background-color: #2a445e;
	color: #ffffff;
	display: grid;
	justify-content: center;
	align-items: center;
	font-size: 1rem;
}
.fg__pagination__page.is-active {
	background: #2a445e;
	color: #ffffff;
}
@media only screen and (max-width : 767px) {
	.splide__pagination__page:before {
		content: "";
	}
	.splide-top .splide__arrow {
		font-size: 0.7rem;
	}

}

@media only screen and (min-width : 768px) {
	.fg-pagination li {
		display: inline-block;
		line-height: 1;
		list-style-type: none;
		margin: 0;
		pointer-events: auto;
	}
	.fg__pagination__page {
		justify-content: center;
		display: inline-flex;
		width: 1.5rem;
		height: 1.5rem;
		margin-left: .5rem;
		background: #363e40;
		border-radius: 4px;
		align-items: center;
		font-family: Splide Heading, sans-serif;
		font-size: 0.8rem;
		color: #c4d5d7;
		line-height: 1;
	}
}






/* --- What's New ---------------------*/
.section--news {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 2rem;
	background: #1E64A5;
	color: #fff;
}
	.box--news-wrap {}

	.box--news-title {
		margin: 0 0 1rem;
		padding: 0;
		line-height: 1.5;
		font-size: var(--font-size-p03);
		text-align: center;
	}
	.box--news-title a { color: #fff; }

	.box--news-ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.anchor--news {
		display: flex;
		flex-wrap: wrap;
		padding: 0 0.5em;
		color: #fff;
	}

	.anchor--news:hover, .anchor--news:active {
		color: #fff;
		text-decoration: underline !important;
	}

	.anchor--news__date { margin-right: 2rem; }

	/*style for banner*/
	.banner--exist .box--news-wrap {
		flex-wrap: wrap;
		margin: 1.5em 5rem 1.5em 0;
	}
	.img--news-banner {
		width: 100%;
		max-width: 450px;
		height: auto;
		object-fit: contain;
	}
		.img--news-banner:hover { opacity: .8; }

	.big-number {
		color: #fff;
		background-color: #00a0e9;
		padding: 10px;
		margin: 5px;
	}
/*******
	movie section
****************/
.section--forguncy-movie {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 3rem;
}
.section--2col-left { width: 50%; }
.section--movie-left { width: 50%; }
.section--movie-left .h2--wrap { margin-top: 80px; }
.section--movie-right {
	position: relative;
	display:block;
    max-width: 720px;
    width: 100%;
	height: 100%;
	height: fit-content;
    margin: auto;
}
.section--movie-right::after {
	position: absolute;
    bottom: 0px;
    right: 0px;
    display: flex;
    font-family: bootstrap-icons;
    font-size: calc(100vw * 0.65 / 3 * 2 * 0.15);
	font-size: clamp(3em, 10vw, 100px);
    color: rgba(255, 255, 255, 0.8);
    content: '\F4F3';
    text-decoration: none;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    z-index: 3;
}
.section--movie-right:hover::after, .section--movie-right:active::after { color: rgba(255, 255, 255, 1); }
.section--movie-thumb {	width: 100%; }
.section--2col-wrap {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 5rem 0;
	padding-bottom: 0;
}
.section--2col-right-img {
    width: 45%;
	max-width: 400px;
	margin: auto;
	object-fit: contain;
}
/********************************
	Contents
********************************/
/* --- Common ---------------------*/
.section-title {
	padding-top: 1.2rem;
	color: rgb(var(--color-main));
	font-size: var(--font-size-p05);
	font-weight: 600;
	text-align: center;
	/* background-image: url(../imgs/h2.svg); */
	background-position: center top;
	background-size: 5rem;
	background-repeat: no-repeat;
}
.section-title-sec {
	padding-top: 1rem;
	font-size: var(--font-size-p02);
	text-align: left;
	/* background-image: url(../imgs/h3.svg); */
	background-position: left top;
	background-size: 2rem;
	background-repeat: no-repeat;
}

/* --- Solution ---------------------*/
.section--solution { position: relative; }
  .section--solution:after {
	content: '';
	position: absolute;
	top: 100%;
	box-sizing: border-box;
	border-right: 50vw solid transparent;
	border-left: 50vw solid transparent;
	border-top: 100px solid #fff;
	overflow: hidden;
  }
	.section--solution-cont {
		padding: 4rem 0 2rem;
		text-align: center;
		background-color: #fff;
	}
	.section--solution-title {
		margin-bottom: 2rem;
		color:rgb(var(--color-main));
		font-size: var(--font-size-p04);
		font-weight: 600;
	}

/* Before */
.section--solution-before {
	margin-top: 10rem;
}
	.section--solution-before-cont {
		max-width: var(--max-width-lg);
		margin: auto;
		padding: 4rem 0;
	}
	.section--solution-before-title {
		color: #333;
		font-size: var(--font-size-p06);
		font-weight: 600;
		text-align: center;
	}
	.section--solution-before-subtitle {
		width: 85%;
		margin: 2rem auto 5rem;
		color: rgb(var(--color-sub));
		font-size: var(--font-size-p04);
		font-weight: 600;
		text-align: center;
	}
		.solution-before-wrap {
			position: relative;
			display: grid;
			grid-template-columns: 35% 35%;
			grid-template-rows: 1fr;
			grid-column-gap: 30%;
			grid-row-gap: 0px;
		}
			.solution-before01 {
				grid-area: 1 / 1 / 2 / 2;
				width: 100%;
				max-width: 350px;
			}
			.solution-before02 {
				grid-area: 1 / 2 / 2 / 3;
				width: 100%;
				max-width: 350px;
			}
			.solution-before03 {
				position: absolute;
				top:50%;
				left:50%;
				transform:translate(-55%,-90%);
				width: 35%;
			}
			.solution-dep { margin: auto; text-align: center; }
				.solution-dep span {
					display: inline-block;
					min-width: 120px;
					padding: .3rem 1rem;
					color:#fff;
					text-align: center;
					background-color: rgb(var(--color-dark));
					border-radius: 2rem;
				}
				.solution-bubble {
					position: relative;
					display: inline-block;
					margin: 1.5em 0;
					padding: 1rem;
					min-width: 120px;
					max-width: 100%;
					color: #555;
					font-size: 16px;
					background: #fff;
					border-radius: 15px;
					-webkit-filter:drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.2));
					-moz-filter:drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.2));
					-ms-filter:drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.2));
					filter:drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.2));
				  }
				  .solution-bubble:before {
					content: "";
					position: absolute;
					top: -25px;
					left: 50%;
					margin-left: -15px;
					border: 15px solid transparent;
					border-bottom: 15px solid #fff;
				  }


/* After */
.section--solution-after { background-color: #fff; }
	.section--solution-after-cont {
		max-width: var(--max-width-lg);
		margin: auto;
		padding: 4rem 0;
	}
		.section--solution-after-title {
			color: rgb(var(--color-main));
			font-size: var(--font-size-p06);
			font-weight: 600;
			text-align: center;
		}
		.section--solution-after-subtitle {
			width: 60%;
			margin: 2.3rem auto 4rem;
			color: rgb(var(--color-main));
			font-size: var(--font-size-p04);
			font-weight: 600;
			text-align: center;
		}
		.solution-after-wrap {
			position: relative;
			display: grid;
			grid-template-columns: 35% 35%;
			grid-template-rows: 1fr;
			grid-column-gap: 30%;
			grid-row-gap: 0px;
		}
			.solution-after01 {
				grid-area: 1 / 1 / 2 / 2;
				width: 100%;
				max-width: 350px;
				padding-top: 3.5rem;
			}
			.solution-after02 {
				grid-area: 1 / 2 / 2 / 3;
				width: 100%;
				max-width: 350px;
				padding-bottom: 8rem;
			}
			.solution-after03 {
				position: absolute;
				top:50%;
				left:50%;
				transform:translate(-50%,-55%);
				width: 58%;
			}
			.solution-check {
				list-style-type: none;
			}
			.solution-check li {
				background-image: url(../imgs/top/blt-check.svg);
				background-repeat: no-repeat;
				background-position: 0 1px;
				background-size: 1.4rem;
				padding-left: 1.8rem;
				font-size: .9rem;
				line-height: 1.5;
			}

/* --- Features ---------------------*/
.section--features {}
	.section--features-cont {
		max-width: var(--max-width-xl);
		margin: auto;
		padding: 4rem 0;
	}
		.block-movie {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 2%;
			margin-top: 4rem;
		}
		.block-movie-item {}
		.block-movie-caption {
			margin-top: 1rem;
			text-align: center;
		}

		.block-link {
			margin: 4rem auto;
			text-align: center;
		}
		.block-link button { min-width: 240px; }
		.block-link button:first-child { margin-right: 1rem; }

		.block-features {
			margin-top: 2rem;
			padding: 4rem 2rem;
			border-top: solid 1px #ccc;
		}
		.item-features-cont {
			display: grid;
			grid-template-columns: 1fr 45%;
			grid-template-rows: 1fr;
			grid-column-gap: 5rem;
			grid-row-gap: 0px;
			width: 100%;
			margin: auto;
		}
			.item-features-text {
				grid-area: 1 / 1 / 2 / 2;
			}
			.item-features-img {
				grid-area: 1 / 2 / 2 / 3;
				max-width: 500px;
				width: 100%;
				margin: auto;
			}
			.item-features-img img {
				width: 100%;
				height: 100%;
			}



/* --- Function ---------------------*/
.section--function { background-color: #fff; }
	.section--function-cont {
		max-width: var(--max-width-lg);
		margin: auto;
		padding: 4rem 0;
	}
	.function-text {
		width: 98%;
		margin: 3rem auto;
		text-align: center;
	}
		.block-function {}
			.block-function-create {
				padding: 2rem;
				background-color: #81C2E0;
			}
			.function-create-title {
				color: rgb(var(--color-dark));
				font-size: var(--font-size-p03);
				font-weight: 600;
				text-align: center;
			}
			.function-list {
				display: flex;
				flex-wrap: wrap;
				gap: 24px 12px;
				margin: 2rem auto 1.2rem;
			}
			.function-create-item {
				list-style-type: none;
				width: calc(20% - 12px);
				background-color: #fff;
				border: solid 1px #ccc;
			}
			.function-create-item span {
				display: grid;
				place-items: center;
				width: 100%;
				min-height: 90px;
				padding: 16px;
				color: #fff;
				text-align: center;
				line-height: 1.2;
				background-color: rgb(var(--color-main));
				border: solid 10px #fff;
			}

			.block-function-operation {
				padding: 2rem;
				background-color: #2A445E;
			}
			.function-operation-title {
				color: #fff;
				font-size: var(--font-size-p03);
				font-weight: 600;
				text-align: center;
			}
			.function-operation-item {
				list-style-type: none;
				width: calc(20% - 12px);
				background-color: #fff;
				border: solid 1px #333;
			}
			.function-operation-item span {
				display: grid;
				place-items: center;
				width: 100%;
				min-height: 90px;
				padding: 16px;
				color: rgb(var(--color-main));
				text-align: center;
				line-height: 1.15;
				background-color: #fff;
				border: solid 10px rgb(var(--color-main));
			}

		.function-btn {
			margin: 4rem auto 0;
			text-align: center;
		}

/* --- Example ---------------------*/
.section--example { background-color: #C0D5E0; }
	.section--example-cont {
		max-width: var(--max-width-lg);
		margin: auto;
		padding: 4rem 0;
	}
	.block-example {
		width: 100%;
		margin-top: 4rem;
	}
	.item-example {
		display: block;
		width: 33%;
		height: 100%;
		margin: 0 .3%;
		background-color: #fff;
		border: solid 1px #ccc;
	}
	.item-example-img {
		width: 100%;
		height: 180px;
		overflow: hidden;
	}
		.item-example-img img { width: 100%; }

	.item-example-text {
		min-height: 215px;
		padding: 1rem 1.5rem;
	}
		.item-example-title {
			margin-bottom: 1rem;
			color: #074D80;
			font-size: 1rem;
			font-weight: 600;
		}
		.item-example-title span {
			display: block;
			margin-top: .4rem;
			font-size: .9rem;
		}

	.example-btn {
		margin: 4rem auto 0;
		text-align: center;
	}

/* --- Satisfaction ---------------------*/
.section--satisfaction {}
	.section--satisfaction-cont {
		max-width: var(--max-width-lg);
		margin: auto;
		padding: 4rem 0;
	}
		.block-satisfaction {
			display: flex;
			gap: 0 2rem;
			margin-top: 4rem;
		}

		.item-satisfaction {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			width: 33.3333%;
		}
		.satisfaction-bubble {
			grid-area: 1 / 1 / 2 / 2;
			position: relative;
			height: 100px;
			padding: 1rem;
			background-color: #fff;
			border-radius: 1rem;
			background-image: url(../imgs/top/comma.svg);
			background-repeat: no-repeat;
			background-position: 90% 50%;
			background-size: 24%;
			/* box-shadow: 3px 3px 9px 5px rgba(0, 0, 0, 0.1); */
			-webkit-filter:drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
			-moz-filter:drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
			-ms-filter:drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
			filter:drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
		}
			.satisfaction-bubble::before {
				content:'';
				position: absolute;
				right: 50px;
				bottom: -21px;
				width: 0;
				height: 0;
				border-width: 21px 21px 0 0;
				border-style: solid;
				border-color: #fff transparent transparent transparent;
			}
			.satisfaction-bubble::after {
				content:'';
				position: absolute;
				right: 54px;
				bottom: -14px;
				width: 0;
				height: 0;
				border-width: 14px 14px 0 0;
				border-style: solid;
				border-color: #fff transparent transparent transparent;
			}
			.star5_rating {
				position: relative;
				z-index: 0;
				display: inline-block;
				white-space: nowrap;
				color: #ccc; /* グレーカラー 自由に設定化 */
				font-size: 13px; /* フォントサイズ 自由に設定化 */
			}
			.star5_rating:before, .star5_rating:after{
				content: '★★★★★';
				letter-spacing: 2px;
			}
			.star5_rating:after{
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
				overflow: hidden;
				white-space: nowrap;
				color: #ffcf32; /* イエローカラー 自由に設定化 */
			}
			.star5_rating[data-rate="5"]:after{ width: 100%; } /* 星5 */
			.star5_rating[data-rate="4.5"]:after{ width: 90%; } /* 星4.5 */
			.star5_rating[data-rate="4"]:after{ width: 80%; } /* 星4 */
			.star5_rating[data-rate="3.5"]:after{ width: 70%; } /* 星3.5 */
			.star5_rating[data-rate="3"]:after{ width: 60%; } /* 星3 */
			.star5_rating[data-rate="2.5"]:after{ width: 50%; } /* 星2.5 */
			.star5_rating[data-rate="2"]:after{ width: 40%; } /* 星2 */
			.star5_rating[data-rate="1.5"]:after{ width: 30%; } /* 星1.5 */
			.star5_rating[data-rate="1"]:after{ width: 20%; } /* 星1 */
			.star5_rating[data-rate="0.5"]:after{ width: 10%; } /* 星0.5 */
			.star5_rating[data-rate="0"]:after{ width: 0%; } /* 星0 */

			.bubble-comment {
				margin-top: 0.2rem;
				font-size: .88rem;
				font-weight: 600;
				line-height: 1.5;
			}

		.satisfaction-img {
			grid-area: 2 / 1 / 3 / 2;
			width: 80px;
			height: 80px;
			margin: 2rem auto;
			background-color: rgb(var(--color-dark));
			border-radius: 50%;
			overflow: hidden;
		}
		.satisfaction-img img {
			width: 70px;
			padding: 15px 0 0 10px!important;
			background-color: transparent!important;
			border:0!important;
		}
		.satisfaction-info {
			grid-area: 3 / 1 / 4 / 2;
			width: auto;
			margin: auto;
			font-size: .87rem;
			line-height: 1.7;
		}

	.satisfaction-source {
		margin-top: 4rem;
		font-size: .8rem;
		text-align: right;
	}
	.logo-itreview {
		width: 100px;
		padding: 0 .5rem .5rem 0!important;
		background-color: transparent!important;
		border:0!important;
	}

/* --- Reason ---------------------*/
.section--reason { background-color: #fff; }
	.section--reason-cont {
		max-width: var(--max-width-lg);
		margin: auto;
		padding: 4rem 0;
	}
		.block-reason { margin-top: 4rem; }

	.section--reason-txt {
		margin: 3rem auto;
		/* width: 74%; */
	}

	.ly-reasons {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10vh auto 5vh;
	}

	.bl-reason {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 230px;
		height: 230px;
		margin: 0 auto;
		text-align: center;
		border-radius: 50%;

		background: #4cb8cc;
	}

	.el-reason {
		color: #fff;
		font-size: 1.7rem;
		vertical-align: baseline;
		margin-bottom: 0;
	}

	.el-reason span {
		margin: 0 auto;
		font-size: 5.3rem;
		font-weight: bold;
		line-height: 4rem;
	}

	.el-reason__txt {
		font-family: Verdana, sans-serif;
		font-weight: bold;
		font-size: 2.8rem;
		line-height: 1.4em;
	}

/* --- Content Information ---------------------*/
.section--reccomend {  }
	.section--reccomend-cont {
		max-width: var(--max-width-lg);
		margin: auto;
		padding: 4rem 0;
	}
		.block-reccomend { margin-top: 4rem; }
		.reccomend-list {
			display: flex;
			align-items: center;
			gap: 0 3rem;
			padding: 1rem 2rem;
			border-bottom: solid 1px #999;
		}
		.reccomend-list:first-child {
			border-top: solid 1px #999;
		}
			.reccomend-list-date { min-width: 160px; }
				.reccomend-list-cat {
					display: block;
					font-weight: 600;
				}

/* --- Support ---------------------*/
.section--support {
	display: grid;
	grid-template-columns: repeat(2, 50%);
	grid-template-rows: 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;

	width: 100%;
}
	.block-trial {
		grid-area: 1 / 1 / 2 / 2;
		width: 100%;
		height: 100%;
		margin: auto;
		text-align: center;
		background-color: #FFF5E9;
	}
		.block-trial-cont {
			position: relative;
			max-width: var(--max-width-md);
			display: grid;
			grid-template-columns: 100%;
			grid-template-rows: 1fr 30%;
			grid-column-gap: 0px;
			grid-row-gap: 0px;
			height: 100%;
			min-height: 450px;
			margin: auto;
			text-align: center;
		}
			.trial-title {
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: center;

				grid-area: 1 / 1 / 2 / 2;
				width: 65%;
				height: 100%;
				margin: 0 auto;
			}
				.block-trial img#trial-img {
					width: 100%;
					padding: 0;
					background: transparent;
					border: 0;
				}
			.trial-btn {
				grid-area: 2 / 1 / 3 / 2;
			}

	.block-sup {
		grid-area: 1 / 2 / 2 / 3;
		position: relative;
		width: 100%;
		height: 100%;
		margin: auto;
		text-align: center;
		background-image:url(../imgs/card-contact.png);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
		.block-sup::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			display: inline-block;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.35);
		}
		.block-sup-cont {
			position: relative;
			display: grid;
			grid-template-columns: 100%;
			grid-template-rows: 1fr 30%;
			grid-column-gap: 0px;
			grid-row-gap: 0px;
			max-width: var(--max-width-md);
			height: 100%;
			min-height: 450px;
			margin: auto;
			color: #fff;
			z-index:50;
			text-align: center;
		}
		.sup-title {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;

			grid-area: 1 / 1 / 2 / 2;
			width: 60%;
			height: 100%;
			margin: 0 auto;
			padding-bottom: 4rem;
			font-size: var(--font-size-p04);
			font-weight: 600;
			line-height: 1.5;
		}
		.sup-btn {
			grid-area: 2 / 1 / 3 / 2;
		}

/********************************
	Media query
********************************/

@media only screen and (max-width: 1720px) {
	.main-visual-cont {
		grid-template-columns: 1fr 38%;
		max-width: 1124px;
	}
	.main-visual-img {
		padding-right: 0;
	}
}
@media only screen and (max-width: 1500px) {
	.main-visual-cont {
		grid-template-columns: 1fr 40%;
		max-width: 1024px;
		/* max-width: var(--max-width-xl);	 */
	}
	/* .visual-title {	font-size: clamp(2.5rem, 0.926rem + 3.28vw, 4rem);	} */
	/* .visual-title {	font-size: clamp(54px, 10vw, 64px);	} */

}
@media only screen and (max-width: 1500px) and (min-aspect-ratio: 16/9) {
	.main-visual {
		min-height: 375px;
		max-height: calc(100vh - 285px);
	}
	.main-visual-cont {
		scale: 0.9;
		transform-origin: top center;
	}
}

@media only screen and (max-width : 1200px) {
	/* --- Main Visual ---------------------*/
	.section--slider { height: auto; }
	.main-visual-cont {
		max-width: var(--max-width-lg);
		/* min-height: 540px; */
	}
	/* .visual-title {	font-size: clamp(48px, 10vw, 56px);	} */
}
@media only screen and (max-width : 1024px) {
	/* --- Main Visual ---------------------*/
	.main-visual-cont {
		width: 85%;
		max-width: var(--max-width-rg);
		/* min-height: 480px; */
	}
	/* .visual-title {	font-size: clamp(40px, 10vw, 48px);	} */

	/* --- Solution ---------------------*/
	.section--solution-before-cont { max-width: var(--max-width-rg); }


	/* --- Satisfactio ---------------------*/
	.bubble-comment { font-size: .75rem; }

	/* --- Reason ---------------------*/
	.section--reason-cont { max-width: var(--max-width-rg); }

	.bl-reason {
		width: 200px;
		height: 200px;
	}

	.el-reason {
		font-size: 1.4rem;
	}

	.el-reason span {
		font-size: 4.3rem;
	}

	.el-reason__txt {
		font-size: 2.4rem;
	}
	/* --- Support ---------------------*/
	.trial-title { width: 70%; justify-content: center; }
	.sup-title { width: 80%; }
}
@media only screen and (max-width : 960px) {
	/* --- Main Visual ---------------------*/

	/* reset */
	.main-visual {
		min-height: auto;
		max-height: none;
	}
	.main-visual-cont {
		scale: initial;
	}


	.section--main-visual {	padding-top: 70px; }
	.main-visual { background-size: 110%;	}
	.main-visual-cont {
		max-width: 90%;
		/* min-height: 420px; */
	}
	.visual-title {
		margin: 0 0 2rem;
		font-size: clamp(32px, 10vw, 40px);
	}

	/* --- Solution ---------------------*/
	.section--solution-before-cont { max-width: var(--max-width-md); }

	/* --- Function ---------------------*/
	.block-function-create {
		margin: 0;
		padding: 2rem 1rem;
	}
	.function-list {
		margin: 2rem 0;
		padding: 0;
	}
	.function-create-item span { padding: 12px 8px;	}

	/* --- Satisfactio ---------------------*/
	.block-satisfaction { flex-wrap: wrap; }
	.item-satisfaction { width: 48%; margin-bottom: 2rem; }

	/* --- Reason ---------------------*/
	.section--reason-cont { max-width: var(--max-width-md); }

}
@media only screen and (max-width : 768px) {
	/* --- Main Visual ---------------------*/
	.main-visual-detail button {
		/* padding-right: 1.5rem;
		padding-left: 1.5rem; */
		padding: 0.8rem 1.2rem;
	}
	.main-visual .main-visual-cont {
		display: block;
		padding-right: 0;
		/* width: 96%;
		max-width: 100%; */
		min-height: 360px;
	}
	.main-visual-img {
		position: relative;
		left: 0;
		display: grid;
		grid-template-columns: 45% 1fr;
		margin-inline: auto;
	}
	.main-visual-imgmsg {
		align-self: center;
		margin-bottom: 2rem;
	}
	.main-visual-imgbg {
		align-self: center;
	}
	.main-visual-detail {
		width: 100%;
		padding-left: 0;
		margin-top: 3rem;
	}
	.visual-title {
        font-size: clamp(2.5rem, -0.556rem + 7.41vw, 3rem);
    }
	.visual-msg li {
		font-size: clamp(1.125rem, -0.403rem + 3.7vw, 1.375rem);
	}

	/* --- Function ---------------------*/
	.function-create-item, .function-operation-item { width: calc(33.3% - 12px); }


	/* --- Satisfactio ---------------------*/
	.item-satisfaction { width: 45%; margin-bottom: 2rem; }

	/**/
	.max-width--definer { padding: 0 15px; }
	.pad-hor--95 {
		padding-left: 0px;
		padding-right: 0px;
	}

	.contents--wrap {
		padding-right: 0px;
		padding-left: 0px;
	}

	.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;
	}

	.section--forguncy-movie, .section--2col-wrap {	flex-direction: column;	}
	.section--movie-left, .section--2col-left, .section--movie-right { width: 100%; }
		.popup-vimeo { margin-top: 0;}

	.bg--grayish-blue {	padding: 3rem 15px;	}

	.section--2col-right-img, .section--1col-img { width: 100%; }

	/* --- What's New ---------------------*/
	.section--news { padding: 1.5em 15px; }

}

@media only screen and (max-width : 660px) {
	/* --- Main Visual ---------------------*/
	.main-visual-cont {
		display: block;
        width: 95%;
		min-height: 300px;
	}
	.main-visual { background-position:50% 100%; }

	.visual-title {
        font-size: clamp(2.625rem, 0.816rem + 7.72vw, 4rem);
		line-height: 1.425;
    }
	.visual-msg {
		display: none;
	}
	.visual-title-decorate {
		vertical-align: baseline;
		background: linear-gradient(transparent 70%, #EED76F 70% 90%, transparent 90%);
	}
	.main-visual-img {
		padding-top: 1rem;
	}

	/* --- What's New ---------------------*/
	.box--news-ul {	margin: 0; }
	.box--news-wrap { padding: 0; }

	/* --- Solution ---------------------*/
	.section--solution-cont { padding: 3rem 1rem 2rem; }
		.section--solution:after { border-top: 50px solid #fff; }
		.section--solution-before {	margin-top: 5rem; }
			.section--solution-before-cont { padding: 2rem 0; }
			.section--solution-before-subtitle { width: 90%; }
			.solution-before03 { width: 45%; }
			.section--solution-after-subtitle {	width: 72%; margin-bottom: 6rem; }
			.solution-after-wrap {
				grid-template-columns: 45% 45%;
				grid-column-gap: 10%;
			}
			.solution-after01 {	padding-top: 0; }
			.solution-after02 {	padding-bottom: 0; }
			.solution-after03 {	transform: translate(-50%,-100%); }
			.solution-bubble { font-size: .9rem; }

	/* --- Features ---------------------*/
	.block-link button:first-child { margin-right: 0; margin-bottom: 1rem; }
	.item-features-cont {
		display: block;
		margin: auto;
	}
	.item-features-text {
		grid-area: 1 / 1 / 2 / 2;
		margin-bottom: 2rem;
	}
	.item-features-img {
		grid-area: 2 / 1 / 3 / 2;
	}
	.block-features {
		margin-top: 2rem;
		padding: 4rem 2rem 0;
	}

	/* --- Satisfactio ---------------------*/
	.item-satisfaction { width: 100%; margin-bottom: 2rem; }
	#forguncyTop .logo-itreview { width: 100px!important; }
	.satisfaction-source { text-align: center; }

	/* --- Example ---------------------*/
	.item-example-img {	height: 140px; }

	/* --- Reason ---------------------*/
	.section--reason-cont {	padding: 3rem 0 2rem; }
	.block-reason {
		width: 90%;
		margin: 3rem auto 0;
	}

	.bl-reason {
		width: 30vw;
		height: 30vw;
	}

	.el-reason {
		font-size: 3.2vw;
	}

	.el-reason span {
		font-size: 9vw;
	}

	.el-reason__txt {
		font-size: 5vw;
	}

	/* --- Reccomend ---------------------*/
	.block-reccomend { width:90%; margin: 2rem auto 0; }

	/* --- Support ---------------------*/
	.section--support, .block-trial, .block-sup { display: block;	}
	.block-trial-cont, .block-sup-cont { min-height: 380px; padding: 2rem 0; }
	.sup-title {
		justify-content: center;
		padding-bottom: 0;
		line-height: 1.2;
	}
	.trial-title { width: 80%; }
}

@media only screen and (max-width : 480px) {
	/* --- What's New ---------------------*/
	.box--news-wrap, .anchor--news {
		flex-direction: column;
		width: 100%;
		padding: 0;
	}
	.box--news-li:first-of-type { margin: 1em 0 0.5em; }

	/* --- Solution ---------------------*/
	.solution-before-wrap, .solution-after-wrap { display: block; }
	.solution-before01 {
		position: relative;
		width: 80%;
		margin: 0 auto 2rem;
	}
	.solution-before02 {
		position: relative;
		width: 80%;
		margin: 2rem auto 0;
	}
	.solution-before03 {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		width: 45%;
		margin: auto;
	}
	.solution-bubble {
		position: absolute;
		top: 10%;
		left: 0;
		background: #fff;
		border: 2px solid #15739D;
		-webkit-filter: drop-shadow(0px 0px 0px rgba(20, 115, 157, 1));
		-moz-filter: drop-shadow(0px 0px 0px rgba(20, 115, 157, 1));
		-ms-filter: drop-shadow(0px 0px 0px rgba(20, 115, 157, 1));
		filter: drop-shadow(0px 0px 0px rgba(20, 115, 157, 1));
	}
	.solution-bubble:after, .solution-bubble:before {
		top: 100%;
		left: 50%;
		border: solid transparent;
		content: "";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}
	.solution-bubble:after {
		border-color: rgba(255, 255, 255, 0);
		border-top-color: #fff;
		border-width: 15px;
		margin-left: -15px;
	}
	.solution-bubble:before {
		border-color: rgba(21, 115, 157, 0);
		border-top-color: #15739D;
		border-width: 18px;
		margin-left: -18px;
	}
	.solution-before-img {
		width: 80%;
		margin: 10rem auto 0;
	}

	.section--solution-before .solution-before-wrap img { padding: 0!important; }

	.section--solution-after-subtitle {
		width: 90%;
		margin: 1.5rem auto;
	}

	.section--solution-after-cont {	padding: 2rem 0; }
		.solution-after01 {
			width: 80%;
			margin: auto;
			padding-top: 0;
		}
		.solution-after02 {
			width: 80%;
			margin: auto;
			padding-bottom: 0;
		}
		.solution-after03 {
			position: relative;
			top: auto;
			left: auto;
			transform: none;
			width: 60%;
			margin: auto;
		}

	/* --- Features ---------------------*/
	.section--features-cont { padding: 3rem 0 2rem; }
	.block-movie {
		flex-direction: column;
		width: 90%;
		justify-content: center;
		margin: 2rem auto 0;
	}
	.block-movie-item:last-child { margin-top: 2rem; }

	/* --- Function ---------------------*/
	.function-create-item, .function-operation-item { width: calc(50% - 6px); }

	/* --- Satisfaction ---------------------*/
	.satisfaction-source {
		margin-top: 2rem;
		font-size: .8rem;
		text-align: center;
	}

	/* --- Example ---------------------*/
	.block-example { margin-top: 2rem; }

	/* --- Reason ---------------------*/
	.section--reason-cont {	padding: 3rem 0 2rem; }
	.block-reason {	margin-top: 2rem; }

	.ly-reasons {
		display: block;
		margin: 10vh auto 5vh;
	}

	.bl-reason {
		width: 50vw;
		height: 50vw;
		margin: 4vh auto;
	}

	.el-reason {
		font-size: 6.5vw;
	}

	.el-reason span {
		font-size: 16vw;
	}

	.el-reason__txt {
		font-size: 9vw;
	}
	/* --- Reccomend ---------------------*/
	.reccomend-list {
		flex-direction: column;
		align-items: flex-start;
	}
	.reccomend-list-cat {
		display: inline-block;
		margin-right: 1rem;
	}
	.reccomend-list-date {
		min-width: 100%;
		margin-bottom: 0.5rem;
	}
	/* --- Support ---------------------*/
	.trial-title { width: 90%; }
}



/* splide-arrow */
.splide__arrow {
	background-color: #ffffff;
	color: #1e64a5;
}
.splide__arrow svg {
	fill: #1e64a5;
}
.thumbnail-wrap {
	padding-bottom: 1.1rem;
	background-color: #3b55a0;
	border: 2px solid #3b55a0;
}
#thumbnail-slider {
	position: relative;
	max-width: var(--max-width-xxl);
	margin-inline: auto;
}
#thumbnail-slider .splide__track {
	position: relative;
	width: 90%;
	margin-inline: auto;
}
#thumbnail-slider .splide__slide a {
	display: block;
	border: 3px solid #eff3f5;
	transition: border-color 0.5s;
}
#thumbnail-slider .splide__slide img {
	width: 100%;
}
@media screen and (max-width: 560px) {

	#thumbnail-slider .splide__track {
		width: 100%;
	}
	#thumbnail-slider .splide__slide {
		padding-inline: 4%;
	}
}



/* corevalue-banner */

.corevalue-materials {
    background-color: #1d5b95;
}

.btn--corevalue__white {
    color: #1d5b95;
    background: #fff;
    border: solid 2px #1d5b95;
}
.btn--corevalue {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 350px;
    max-width: 80vw;
    height: 50px;
    padding: 1rem;
    font-size: 1rem;
    border-radius: 3rem;
    text-decoration: none;
}
.hp-bgc-corevalue {
    background: #1d5b95;
}
.hp-triangle {
    display: inline-block;
    width: 12px;
    height: 16px;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.corevalue-txt {
    font-size: calc(1.3rem + .6vw) !important;
}
@media (min-width: 1200px) {
    .corevalue-txt {
        font-size: 1.75rem !important;
    }
}