@charset "utf-8";

/* ----------------------------------------------------------------------
 user reset
---------------------------------------------------------------------- */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
	list-style: none;
}

table {
	border-collapse: collapse;
}

ul {
	list-style: none;
}

*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	box-sizing: inherit;
}

h5 {
	font-weight: 500;
	;
}

*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}

html {
	font-size: 50%;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
}

@media (min-width: 1025px) {
	html {
		font-size: 62.5%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		scroll-behavior: smooth;
	}
}

@media only screen and (max-width: 1024px) {
	html {
		-webkit-text-size-adjust: 100%;
	}
}

body {
	color: #fff;
	font-family: YakuHanJP, "Noto Sans JP", sans-serif, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
	font-weight: 400;
	font-size: 1.8rem;
	line-height: 2;
	letter-spacing: .2em;
	background: linear-gradient(90deg, rgba(3, 100, 168, 1) 0%, rgba(18, 115, 148, 1) 50%, rgba(34, 181, 114, 1) 100%);
	background-size: 200% 200%;
	animation: bggradient 15s ease infinite;
}

body a {
	text-decoration: none;
}

@keyframes bggradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

/* ----------------------------------------------------------------------
 layout
---------------------------------------------------------------------- */
.flex {
	display: flex;
}

.fl-reverse {
	flex-direction: row-reverse;
}

.fl-wrap {
	flex-wrap: wrap;
}

.fl-column {
	flex-direction: column;
}

.fl-center {
	justify-content: center;
	align-items: center;
}

.fl-between {
	flex-wrap: wrap;
	justify-content: space-between;
}

.fl-justify {
	justify-content: center;
}

.fl-around {
	justify-content: space-around;
}

.fl-end {
	justify-content: flex-end;
}

.fl-start {
	justify-content: flex-start;
}

.fl-align-center {
	align-items: center;
}

.fl-align-start {
	align-items: flex-start;
}

.fl-align-end {
	align-items: flex-end;
}

.fl-align-self-start-only {
	align-self: flex-start;
}

.fl-align-self-end {
	align-self: center;
}

@media (min-width: 768px) {
	.fl-align-self-end {
		align-self: flex-end;
	}
}

.fl-align-self-start {
	align-self: center;
}

@media (min-width: 768px) {
	.fl-align-self-start {
		align-self: flex-start;
	}
}

.col-2 {
	width: 100%;
}

@media (min-width:768px) {
	.col-2 {
		width: 50%;
	}
}

.col-xs-2 {
	width: 50%;
}

.col-xs-2-sub {
	width: 48.5%;
}

.col-3 {
	width: 100%;
}

@media (min-width:768px) {
	.col-3 {
		width: 31%;
	}
}

.col-xs-3 {
	width: 48%;
}

@media (min-width:768px) {
	.col-xs-3 {
		width: 31%;
	}
}

.col-4 {
	width: calc(48% - 1px);
}

@media (min-width:768px) {
	.col-4 {
		width: calc(24% - 1px);
	}
}

/* sub-page */
.col-2-sub {
	width: 100%;
}

@media (min-width:768px) {
	.col-2-sub {
		width: 47%;
	}
}

.col-4-sub {
	width: calc(50% - 10px);
}

@media (min-width:768px) {
	.col-4-sub {
		width: calc(25% - 10px);
	}
}

@media (min-width:1025px) {
	.col-4-sub {
		width: calc(25% - 20px);
	}
}

.contents,
.contents-120,
.contents-140 {
	max-width: 100%;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	margin-right: auto;
	margin-left: auto;
}

@media (min-width:768px) {

	.contents,
	.contents-120,
	.contents-140 {
		width: 94%;
	}
}

@media (min-width: 1025px) {
	.contents {
		width: 100rem;
	}

	.contents-120 {
		width: 120rem;
	}

	.contents-140 {
		width: 140rem;
	}
}

.text-j {
	text-align: justify;
}

.text-c {
	text-align: center;
}

.text-r {
	text-align: right;
}

.text-lc,
.text-l,
.text-lr {
	text-align: left;
}

.text-cl,
.text-cr {
	text-align: center;
}

@media (min-width:768px) {
	.text-lc {
		text-align: center;
	}

	.text-cl {
		text-align: left;
	}

	.text-lr {
		text-align: right;
	}

	.text-cr {
		text-align: right;
	}
}

.text-deco-none {
	text-decoration: none;
}

.rotate-90 {
	transform: rotate(90deg);
}

.rotate-180 {
	transform: rotate(180deg);
}

.rotate-270 {
	transform: rotate(270deg);
}

/* ----------------------------------------------------------------------
共通
---------------------------------------------------------------------- */
.grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.grid-column {
	padding: 1.5rem 1rem;
	max-width: 43.4rem;
}

/* 3つ */
.grid-3 {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

@media (min-width:768px) {
	.grid-3 {
		display: grid;
		gap: 3rem;
		grid-template-columns: repeat(auto-fit, minmax(29%, 1fr));
	}
}

/* ----------------------------------------------------------------------
 表示・非表示
---------------------------------------------------------------------- */
.sp-only-on {
	display: block;
}

@media (min-width: 768px) {
	.sp-only-on {
		display: none;
	}
}

.tab-on {
	display: none;
}

@media (min-width: 768px) {
	.tab-on {
		display: block;
	}
}

.sp-on {
	display: block;
}

@media (min-width: 1025px) {
	.sp-on {
		display: none;
	}
}

.pc-on {
	display: none;
}

@media (min-width: 1025px) {
	.pc-on {
		display: block;
	}
}

/* ----------------------------------------------------------------------
 スマホ特例
---------------------------------------------------------------------- */
@media (max-width:767px) {
	.sp-column {
		flex-direction: column;
	}

	.sp-center {
		text-align: center;
	}

	.sp-mgn {
		padding-left: 4rem;
		padding-right: 4rem;
	}

	.sp-mt-1 {
		margin-top: 1rem;
	}

	.sp-mt-2 {
		margin-top: 2rem;
	}

	.sp-mt-3 {
		margin-top: 3rem;
	}

	.sp-mt-5 {
		margin-top: 5rem;
	}

	.sp-mt-8 {
		margin-top: 8rem;
	}

	.sp-mt-10 {
		margin-top: 10rem;
	}

	.sp-mt-3vh {
		margin-top: 3vh;
	}

	.sp-mt-4vh {
		margin-top: 4vh;
	}

	.sp-mt-5vh {
		margin-top: 5vh;
	}

	.sp-mt-m1 {
		margin-top: -1rem;
	}

	.sp-mt-m2 {
		margin-top: -2rem;
	}

	.sp-mt-m3 {
		margin-top: -3rem;
	}

	.sp-mt-m4 {
		margin-top: -4rem;
	}

	.sp-mt-m5 {
		margin-top: -5rem;
	}

	.sp-width-80 {
		width: 80%;
	}

	.sp-width-90 {
		width: 90%;
	}

	.sp-width-96 {
		width: 96%;
	}

	.sp-width-100 {
		width: 100%;
	}

	.sp-pd-tb-1 {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	.sp-pd-tb-2 {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	.sp-pd-tb-3 {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}

	.sp-pd-tb-4 {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}

	.sp-pd-tb-5 {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
}

/* ----------------------------------------------------------------------
 タブレット特例
---------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.tb-mt-1 {
		margin-top: 1rem;
	}

	.tb-mt-2 {
		margin-top: 2rem;
	}

	.tb-mt-3 {
		margin-top: 3rem;
	}

	.tb-mt-8 {
		margin-top: 8rem;
	}
}

/* ----------------------------------------------------------------------
 margin
---------------------------------------------------------------------- */
.mt-1 {
	margin-top: 1rem;
}

.mt-2 {
	margin-top: 2rem;
}

.mt-3 {
	margin-top: 1.5rem;
}

@media (min-width: 768px) {
	.mt-3 {
		margin-top: 3rem;
	}
}

.mt-4 {
	margin-top: 2rem;
}

@media (min-width: 768px) {
	.mt-4 {
		margin-top: 4rem;
	}
}

.mt-5 {
	margin-top: 2.5rem;
}

@media (min-width: 768px) {
	.mt-5 {
		margin-top: 5rem;
	}
}

.mt-6 {
	margin-top: 3rem;
}

@media (min-width: 768px) {
	.mt-6 {
		margin-top: 6rem;
	}
}

.mt-7 {
	margin-top: 3.5rem;
}

@media (min-width: 768px) {
	.mt-7 {
		margin-top: 7rem;
	}
}

.mt-8 {
	margin-top: 4rem;
}

@media (min-width: 768px) {
	.mt-8 {
		margin-top: 8rem;
	}
}

.mt-10 {
	margin-top: 5rem;
}

@media (min-width: 768px) {
	.mt-10 {
		margin-top: 10rem;
	}
}

.mt-15 {
	margin-top: 8rem;
}

@media (min-width: 768px) {
	.mt-15 {
		margin-top: 15rem;
	}
}

.mt-20 {
	margin-top: 8rem;
}

@media (min-width: 768px) {
	.mt-20 {
		margin-top: 20rem;
	}
}

.mt-25 {
	margin-top: 8rem;
}

@media (min-width: 768px) {
	.mt-25 {
		margin-top: 25rem;
	}
}

.mb-5 {
	margin-bottom: 3rem;
}

@media (min-width: 768px) {
	.mb-5 {
		margin-bottom: 5rem;
	}
}

.mb-10 {
	margin-bottom: 5rem;
}

@media (min-width: 768px) {
	.mb-10 {
		margin-bottom: 10rem;
	}
}

.mb-15 {
	margin-bottom: 7.5rem;
}

@media (min-width: 768px) {
	.mb-15 {
		margin-bottom: 15rem;
	}
}

.mb-20 {
	margin-bottom: 10rem;
}

@media (min-width: 768px) {
	.mb-20 {
		margin-bottom: 20rem;
	}
}

.ml-05 {
	margin-left: .5rem;
}

.ml-1 {
	margin-left: 1rem;
}

.ml-2 {
	margin-left: 2rem;
}

.ml-3 {
	margin-left: 3rem;
}

.mr-03 {
	margin-right: .3rem;
}

.mr-1 {
	margin-right: 1rem;
}

.mr-2 {
	margin-right: 2rem;
}

.mr-3 {
	margin-right: 3rem;
}

.m-auto {
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 767px) {
	.m-auto-sp {
		margin-left: auto;
		margin-right: auto;
	}
}

.ml-auto {
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 768px) {
	.ml-auto {
		margin-left: auto;
		margin-right: 0;
	}
}

.mr-auto {
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 768px) {
	.mr-auto {
		margin-left: 0;
		margin-right: auto;
	}
}

.mt-0 {
	margin-top: 0;
}

.mb-0 {
	margin-bottom: 0;
}

.pt-10 {
	padding-top: 5rem;
}

@media (min-width: 768px) {
	.pt-10 {
		padding-top: 10rem;
	}
}

.pt-20 {
	padding-top: 8rem;
}

@media (min-width: 768px) {
	.pt-20 {
		padding-top: 20rem;
	}
}

.pd-1 {
	padding: 1rem;
}

.pd-2 {
	padding: 2rem;
}

.pd-3 {
	padding: 2rem;
}

@media (min-width: 1025px) {
	.pd-3 {
		padding: 3rem;
	}
}

.pd-5 {
	padding: 3rem;
}

@media (min-width: 1025px) {
	.pd-5 {
		padding: 5rem;
	}
}

.pd-5-p {
	padding: 3rem 0;
}

@media (min-width: 1025px) {
	.pd-5-p {
		padding: 5rem;
	}
}

.pd-8 {
	padding: 5rem;
}

@media (min-width: 1025px) {
	.pd-8 {
		padding: 8rem;
	}
}

.pb-1 {
	padding-bottom: 1rem;
}

.pb-20 {
	padding-bottom: 10rem;
}

@media (min-width: 1025px) {
	.pb-20 {
		padding-bottom: 20rem;
	}
}

.pd-tb-4 {
	padding: 4rem 0;
}

.pd-tb-10 {
	padding: 5rem 0;
}

@media (min-width: 1025px) {
	.pd-tb-10 {
		padding: 10rem 0;
	}
}

.pd-tb-12 {
	padding: 6rem 0;
}

@media (min-width: 1025px) {
	.pd-tb-12 {
		padding: 12rem 0;
	}
}

.pd-tb-hero {
	padding: 5rem 0;
}

@media (min-width: 1025px) {
	.pd-tb-hero {
		padding: 12rem 0;
	}
}

.pd-tb-c {
	padding-top: 10rem;
	padding-bottom: 3rem;
}

@media (min-width: 1025px) {
	.pd-tb-c {
		padding-top: 12rem;
		padding-bottom: 12rem;
	}
}

.pd-tb-p {
	padding-top: 5rem;
	padding-bottom: 3rem;
}

@media (min-width: 1025px) {
	.pd-tb-p {
		padding-top: 6rem;
		padding-bottom: 12rem;
	}
}

.mg-lr-3 {
	margin-left: 3rem;
	margin-right: 3rem;
}

.mt-m1 {
	margin-top: -1rem;
}

.height-100p {
	height: 100%;
}

.width-fv {
	width: 100%;
}

@media (min-width: 768px) {
	.width-fv {
		max-width: 42rem;
	}
}

.width-c {
	width: 100%;
}

@media (min-width: 768px) {
	.width-c {
		width: 70%;
	}
}

.width-p {
	width: 100%;
}

@media (min-width: 768px) {
	.width-p {
		width: 76%;
	}
}

.width-what {
	width: 100%;
}

@media (min-width: 768px) {
	.width-what {
		width: 56rem;
	}
}

.width-70p {
	width: 76%;
}

@media (min-width: 768px) {
	.width-70p {
		width: 70%;
	}
}

.width-83p {
	width: calc(100% - 3rem);
}

@media (min-width: 768px) {
	.width-83p {
		width: 83%;
	}
}

.width-100p {
	width: 100%;
}

.background-size-100 {
	background-size: 100% auto
}

.box-sizing-border-box {
	box-sizing: border-box;
}

.border {
	border: 1px solid #C6E7F0;
}

.border-t {
	border-top: 1px solid #C6E7F0;
}

.border-b {
	border-bottom: 1px solid;
	padding-bottom: 2rem;
}

.width-privacy {
	width: 100%;
}

@media (min-width: 768px) {
	.width-privacy {
		width: 40rem;
	}
}

/* ----------------------------------------------------------------------
 フォント関連
---------------------------------------------------------------------- */
.fs-100 {
	letter-spacing: 0px;
	color: #FFFFFF;
	opacity: 1;
	font-size: 40px;
	line-height: .9;
}

@media only screen and (min-width: 376px) {
	.fs-100 {
		font-size: 70px;
	}
}

@media (min-width: 768px) {
	.fs-100 {
		font-size: 100px;
	}
}

/* 不動産広告管理者養成講座終了認定証 */
.fs-nintei {
	letter-spacing: 0px;
	color: #FFFFFF;
	opacity: 1;
	font-size: 30px;
	line-height: .9;
}

@media only screen and (min-width: 376px) {
	.fs-nintei {
		font-size: 36px;
	}
}

@media (min-width: 768px) {
	.fs-nintei {
		font-size: 100px;
	}
}

.fs-50-top {
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: 20px;
	line-height: 32.85px;
	letter-spacing: 10px;
	color: #FFFFFF;
	opacity: 1;
}

@media only screen and (min-width: 376px) {
	.fs-50-top {
		font-size: 23px;
		line-height: 34.5px;
	}
}

@media (min-width: 768px) {
	.fs-50-top {
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
		font-size: 50px;
		line-height: 73px;
	}
}

.fs-50 {
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: 24px;
	line-height: 32.85px;
	letter-spacing: 10px;
	color: #FFFFFF;
	opacity: 1;
}

@media only screen and (min-width: 376px) {
	.fs-50 {
		font-size: 26px;
		line-height: 36.5px;
	}
}

@media (min-width: 768px) {
	.fs-50 {
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
		font-size: 50px;
		line-height: 73px;
	}
}

.fs-39 {
	font-style: normal;
	font-variant: normal;
	font-weight: medium;
	font-size: 27.3px;
	line-height: 32px;
	color: #FFFFFF;
	opacity: 1;
	font-weight: 500;
}

@media (min-width: 768px) {
	.fs-39 {
		font-style: normal;
		font-variant: normal;
		font-weight: medium;
		font-size: 39px;
		line-height: 50px;
	}
}

.fs-36 {
	letter-spacing: .15em;
	color: #FFFFFF;
	font-weight: 500;
	font-size: 22px;
}

@media only screen and (min-width: 376px) {
	.fs-36 {
		font-size: 25.2px;
	}
}

@media (min-width: 768px) {
	.fs-36 {
		font-size: 36px;
	}
}

.fs-30 {
	font-weight: 500;
	line-height: 1.6;
	font-size: 18px;
}

@media only screen and (min-width: 376px) {
	.fs-30 {
		font-size: 21px;
	}
}

@media (min-width: 768px) {
	.fs-30 {
		font-size: 30px;
	}
}

.fs-24 {
	color: #FFFFFF;
	opacity: 1;
	font-weight: 500;
	font-size: 2.2rem;
	line-height: 1.5;
	letter-spacing: .15em;
}

@media (min-width: 768px) {
	.fs-24 {
		font-size: 2.4rem;
	}
}

.fs-22 {
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: 14px;
	line-height: 24px;
	letter-spacing: .2em;
	color: #FFFFFF;
	opacity: 1;
}

@media only screen and (min-width: 376px) {
	.fs-22 {
		font-size: 15.4px;
		line-height: 25.2px;
	}
}

@media (min-width: 768px) {
	.fs-22 {
		font-style: normal;
		font-variant: normal;
		font-weight: normal;
		font-size: 22px;
		line-height: 36px;
	}
}

.fs-20 {
	font-size: 1.8rem;
	line-height: 1.8;
}

@media (min-width: 768px) {
	.fs-20 {
		font-size: 2rem;
	}
}

.fs-18 {
	font-size: 1.8rem;
	line-height: 1.8;
}

.fs-16 {
	font-size: 1.6rem;
	line-height: 1.8;
}

.fs-15 {
	font-size: 1.5rem;
}

.fs-14 {
	font-size: 1.4rem;
}

.fs-80p {
	font-size: 80%;
}

.fs-90p {
	font-size: 90%;
}

.fs-110p {
	font-size: 110%;
}

.fs-120p {
	font-size: 120%;
}

.en {
	font-family: YakuHanJP, "Roboto", sans-serif;
	letter-spacing: .4rem;
}

.bold {
	font-weight: 700 !important;
}

.footer-bold {
	font-weight: 500 !important;
}

@media (min-width: 768px) {
	.footer-bold {
		font-weight: 700 !important;
	}
}

.normal {
	font-weight: 400 !important;
}

.line-10 {
	line-height: 1.0;
}

.line-14 {
	line-height: 1.4;
}

.line-15 {
	line-height: 1.5;
}

.line-16 {
	line-height: 1.6;
}

.line-17 {
	line-height: 1.8;
}

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

.line-27 {
	line-height: 2.7;
}

/* 色*/
.white {
	color: #ffffff;
}

.gray {
	color: #D5D5D5;
}

.black {
	color: #333333;
}

.red {
	color: #B12A1D;
}

.blue {
	color: #0160D6;
}

.blue2 {
	color: #057CB4;
}

.aqua {
	color: #C6E7F0;
}

.green {
	color: #00A99D;
}

.orange {
	color: #FBB03B;
}

/* インデント */
.indent-1 {
	padding-left: 1em;
	text-indent: -1em;
}

.indent-15 {
	padding-left: 1.5em;
	text-indent: -1.5em;
}

/* position */
.p-relative {
	position: relative;
}

/* padding */
.bg-pd {
	padding-top: 7.5rem;
	padding-bottom: 7.5rem;
}

@media (min-width: 1025px) {
	.bg-pd {
		padding-top: 12.8rem;
		padding-bottom: 12.8rem;
	}
}

/* ----------------------------------------------------------------------
 cta-area
---------------------------------------------------------------------- */
.pagetop {
	display: none;
	position: fixed;
	right: 0;
	bottom: 2rem;
	z-index: 999;
}

@media (min-width: 768px) {
	.pagetop {
		right: 0rem;
		bottom: 1rem;
	}
}

@media (min-width: 1025px) {
	.pagetop {
		right: 1rem;
	}
}

.pagetop img {
	width: 44px;
}

@media (min-width: 768px) {
	.pagetop img {
		width: 60px;
	}
}

/* cp */
.page-cp {
	display: none;
	position: fixed;
	right: 0;
	bottom: 2rem;
	z-index: 999;
}

@media (min-width: 768px) {
	.page-cp {
		right: 0rem;
		bottom: 1rem;
	}
}

@media (min-width: 1025px) {
	.page-cp {
		right: 1rem;
	}
}

.page-cp img {
	width: 44px;
}

@media (min-width: 768px) {
	.page-cp img {
		width: 60px;
	}
}

/* cpあり */
.pagetop-con {
	display: flex;
	flex-direction: column;
	align-items: center;
	scroll-behavior: smooth;
}

#page-c,
#page-p {
	display: block;
}

@media (min-width: 768px) {

	#page-c,
	#page-p {
		display: none;
	}
}

/* ----------------------------------------------------------------------
 動画埋め込み
---------------------------------------------------------------------- */
.movie-wrap {
	position: relative;
	padding-bottom: 56.25%;
	/*アスペクト比 16:9の場合の縦幅*/
	height: 0;
	overflow: hidden;
	margin: 1rem auto 5rem auto;
}

.movie-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media (min-width: 1025px) {
	.movie-wrap {
		margin: 6rem auto 10rem auto;
		width: 80%;
	}
}

/* ----------------------------------------------------------------------
 GoogleMap埋め込み
---------------------------------------------------------------------- */
.gmap {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
}

.gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

/* ----------------------------------------------------------------------
画像
---------------------------------------------------------------------- */
img.scale,
img.responsive {
	max-width: 100%;
	height: auto;
}

/* ----------------------------------------------------------------------
ボタン
---------------------------------------------------------------------- */
.btn-con {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-align: center;
}

@media (min-width: 768px) {
	.btn-con {
		width: 368px;
	}
}

.btn {
	position: relative;
	overflow: hidden;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	outline: none;
	transition: ease .2s;
	border-radius: 15px;
	padding-top: 2rem;
	padding-bottom: 2rem;
	font-size: 2rem;
	width: 100%;
}

@media (min-width: 768px) {
	.btn {
		width: 368px;
	}
}

.btn-top {
	position: relative;
	overflow: hidden;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	outline: none;
	transition: ease .2s;
	/*border-radius: 15px;*/
	padding-top: 2rem;
	padding-bottom: 2rem;
	font-size: 2rem;
	width: 100%;
	margin-top: 3rem;
}

@media (min-width: 1025px) {
	.btn-top {
		width: 460px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-top: 4rem;
	}
}

.btn-map {
	position: relative;
	overflow: hidden;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	outline: none;
	transition: ease .2s;
	border-radius: 15px;
	padding-top: .5rem;
	padding-bottom: .5rem;
	width: 135px;
}

@media (min-width: 768px) {
	.btn-map {
		width: 135px;
	}
}

.btn-contact {
	position: relative;
	overflow: hidden;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	outline: none;
	transition: ease .2s;
	border-radius: 15px;
	padding-top: 1rem;
	padding-bottom: 1rem;
	width: 100%;
	line-height: 1.6;
}

@media (min-width: 768px) {
	.btn-contact {
		width: 368px;
	}
}

.btn-iclick {
	position: relative;
	overflow: hidden;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	outline: none;
	transition: ease .2s;
	border-radius: 15px;
	padding-top: 2rem;
	padding-bottom: 2rem;
	font-size: 2rem;
	width: 100%;
	margin-top: 3rem;
}

@media (min-width: 1025px) {
	.btn-iclick {
		width: 368px;
		display: block;
		margin-left: auto;
	}
}

.btn span,
.btn-map span,
.btn-contact span,
.btn-iclick span,
.btn-top span {
	position: relative;
	z-index: 3;
}

.bgskew::before {
	content: '';
	position: absolute;
	top: 0;
	left: -130%;
	width: 120%;
	height: 100%;
	transform: skewX(-25deg);
}

.bgskew:hover::before {
	animation: skewanime .5s forwards;
}

@keyframes skewanime {
	100% {
		left: -10%;
	}
}

/* 色 */
.btn-blue {
	background: #0160D6;
}

.btn-blue span {
	color: #fff;
}

.bgskew-blue::before {
	background: #fff;
}

.btn-blue:hover span {
	color: #0160D6;
}

.btn-blue2 {
	background: #057CB4;
}

.btn-blue2 span {
	color: #fff;
}

.bgskew-blue2::before {
	background: #fff;
}

.btn-blue2:hover span {
	color: #057CB4;
}

.btn-green {
	background: #00A99D;
}

.btn-green span {
	color: #fff;
}

.bgskew-green::before {
	background: #fff;
}

.btn-green:hover span {
	color: #00A99D;
}

.btn-orange {
	background: #FBB03B;
}

.btn-orange span {
	color: #fff;
}

.bgskew-orange::before {
	background: #fff;
}

.btn-orange:hover span {
	color: #FBB03B;
}

.btn-top-c {
	background: #fff;
}

.btn-top-c span {
	color: #00A99D;
}

.bgskew-top-c::before {
	background: #FBB03B;
}

.btn-top-c:hover span {
	color: #fff;
}

.btn-top-p {
	background: #fff;
}

.btn-top-p span {
	color: #FBB03B;
}

.bgskew-top-p::before {
	background: #0160D6;
}

.btn-top-p:hover span {
	color: #fff;
}

/* ----------------------------------------------------------------------
header
---------------------------------------------------------------------- */
header {
	position: fixed;
	width: 100%;
	height: 8rem;
	z-index: 9999;
	/*background:  linear-gradient(90deg, rgba(3,100,168,1) 0%, rgba(18,115,148,1) 50%, rgba(35,144,153,1) 100%);*/
	display: flex;
}

@media (min-width: 1025px) {
	header {
		display: flex;
		height: 10rem;
		align-items: center;
	}
}

.header-con {
	max-width: 100%;
	height: 100%;
	margin-left: 2rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

@media (min-width:768px) {
	.header-con {
		width: 94%;
	}
}

@media (min-width: 1025px) {
	.header-con {
		margin-right: auto;
		margin-left: auto;
		width: 140rem;
	}
}

.header-logo {
	margin-top: 2.5rem;
	width: 130px;
	z-index: 200;
}

@media (min-width: 1025px) {
	.header-logo {
		width: 180px;
		margin-top: 5.5rem;
	}
}

.pc-nav2 {
	display: none;
}

@media (min-width: 1025px) {
	.pc-nav2 {
		display: flex;
		justify-content: space-around;
		margin-left: auto;
	}

	.pc-nav2 li {
		margin: 0;
		line-height: 1.7;
		font-size: 15.5px;
	}

	.pc-nav2 li a {
		display: block;
		font-family: YakuHanJP, "Roboto", sans-serif;
		color: #fff;
		font-weight: 400;
		text-decoration: none;
		height: 100%;
		padding-left: 1rem;
		padding-right: 1rem;
		padding-top: 6rem;
		padding-bottom: 1rem;

		position: relative;
		text-align: center;
		overflow: hidden;
	}

	.pc-nav2 li a::after {
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		content: "";

		transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	}

	.pc-nav2 li a span {
		display: block;
		width: 100%;
		margin: 0 auto;
		transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	}

	.pc-nav2 li a span.pc-nav-ja {
		position: absolute;
		top: 100%;
		left: 0%;
		font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
		font-size: 15px;
		font-weight: 400;
		letter-spacing: .1em;
		white-space: nowrap;
	}

	.pc-nav2 li a span.pc-nav-en {
		font-family: YakuHanJP, "Roboto", sans-serif;
		letter-spacing: .4rem;
	}

	.pc-nav2 li a:hover::after {
		width: 100%;
	}

	.pc-nav2 li a:hover span.pc-nav-en {
		transform: translate(0%, +250%);
	}

	.pc-nav2 a:hover span.pc-nav-ja {
		top: 58%;
	}

	.pc-nav2 li a:hover {
		transition: all .2s;
	}

	.pc-nav2 li.selected {
		/* 背景グラデーション
		background: linear-gradient(210deg, rgba(3,100,168,1) 0%, rgba(18,115,148,1) 30%, rgba(34, 181, 114,1) 100%);
		*/
		border-bottom: 1px solid #fff;
		transition: all .2s;
	}
}

/* change-color */
.change-color .header-logo {
	margin-top: 2.5rem;
	width: 130px;
	z-index: 200;
	transition: all 0.3s;
}

@media (min-width: 1025px) {
	.change-color .header-logo {
		width: 180px;
		margin-top: 3.5rem;
	}
}

.change-color {
	background: linear-gradient(90deg, rgba(3, 100, 168, 1) 0%, rgba(18, 115, 148, 1) 50%, rgba(34, 181, 114, 1) 100%);
	background-size: 200% 200%;
	animation: bggradient 15s ease infinite;
	transition: all 0.3s;
}

@media (min-width: 1025px) {
	.change-color .pc-nav2 li a {
		display: block;
		font-family: YakuHanJP, "Roboto", sans-serif;
		color: #fff;
		font-weight: 400;
		text-decoration: none;
		height: 100%;
		padding-left: 1rem;
		padding-right: 1rem;
		padding-top: 4rem;
		/* kokogatigau */
		padding-bottom: 1rem;

		position: relative;
		text-align: center;
		overflow: hidden;
		transition: all 0.3s;
	}

	.change-color .pc-nav2 li a:hover span.pc-nav-en {
		transform: translate(0%, +250%);
	}

	.change-color .pc-nav2 a:hover span.pc-nav-ja {
		top: 39%;
	}

	.change-color .pc-nav2 li.selected {
		/* 背景グラデーション
		background: linear-gradient(210deg, rgba(3,100,168,1) 0%, rgba(18,115,148,1) 30%, rgba(34, 181, 114,1) 100%);
		*/
		border-bottom: 2px solid #FBB03B;
		transition: all .2s;
	}
}

.gnavi-iclick {
	width: 14.62rem;
}

/* バーガーメニュー */
.nav {
	display: block;
	margin-left: auto;
}

@media (min-width: 1025px) {
	.nav {
		display: none;
	}
}

.drawer-hidden {
	display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer-open {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: 20px;
	z-index: 100;
	/* 重なり順を一番上にする */
	cursor: pointer;
	padding-top: 4rem;
}

/* ハンバーガーメニューのアイコン */
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
	content: '';
	display: block;
	height: 3px;
	width: 25px;
	border-radius: 3px;
	background: #fff;
	transition: 0.5s;
	position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer-open span:before {
	bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer-open span:after {
	top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-input:checked~.drawer-open span {
	background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-input:checked~.drawer-open span::before {
	bottom: 0;
	transform: rotate(45deg);
}

#drawer-input:checked~.drawer-open span::after {
	top: 0;
	transform: rotate(-45deg);
}

/* メニューのデザイン*/
.nav-content {
	position: fixed;
	bottom: 100%;
	left: 0%;
	z-index: 99;
	width: 100%;
	height: 100%;
	transition: .5s;
	text-align: center;
	background: linear-gradient(90deg, rgba(3, 100, 168, 1) 0%, rgba(18, 115, 148, 1) 50%, rgba(35, 144, 153, 1) 100%);
	background-size: 200% 200%;
	animation: bggradient 15s ease infinite;
}

/* メニュー黒ポチを消す */
.nav-list {
	list-style: none;
	margin-top: 26%;
}

@media (min-width:480px) {
	.nav-list {
		margin-top: 35%;
	}
}

.nav-item a {
	font-family: YakuHanJP, "Roboto", sans-serif;
	font-size: 2.2rem;
	line-height: 2.5;
	letter-spacing: .4rem;
	color: #fff;
	text-decoration: none;
}

@media (min-width: 376px) {
	.nav-item a {
		font-size: 3rem;
		line-height: 2.5;
	}
}

.nav-item-img {
	width: 160px;
	margin-top: 1rem;
}

@media (min-width: 376px) {
	.nav-item-img {
		width: 220px;
		margin-top: 1rem;
	}
}

.icon-tel {
	display: none;
}

@media (min-width: 376px) {
	.icon-tel {
		display: block;
	}
}

/* アイコンがクリックされたらメニューを表示 */
#drawer-input:checked~.nav-content {
	bottom: 0;
	/* メニューを画面に入れる */

}

/* ----------------------------------------------------------------------
footer
---------------------------------------------------------------------- */
footer {
	max-width: 100%;
	height: auto;
	background: #ffffff;
	text-align: center;
}

@media (min-width: 1025px) {
	footer {
		padding-top: 8rem;

	}
}

.footer-con {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
}

@media (min-width:768px) {
	.footer-con {
		width: 94%;
	}
}

@media (min-width: 1025px) {
	.footer-con {
		width: 100rem;
	}
}

.col-footer-1 {
	width: 100%;
}

@media (min-width: 1025px) {
	.col-footer-1 {
		width: 33%;
	}
}

.p-mark {
	width: 180px;
	margin-left: auto;
	margin-right: auto;
}

.col-footer-2 {
	width: 100%;
	margin-top: 3rem;
}

@media (min-width: 1025px) {
	.col-footer-2 {
		width: 66%;
		margin-top: 0;
	}
}

.footer-logo {
	margin-top: 7rem;
	width: 170px;
}

@media only screen and (min-width: 376px) {
	.footer-logo {
		font-size: 200px;
	}
}

@media (min-width: 1025px) {
	.footer-logo {
		margin-top: 0;
		width: 237px;
	}
}

.footer-servies {
	border-bottom: 2px solid #C6E7F0;
	padding-left: 0;
	padding-bottom: 1rem;
	font-weight: 500;
	background: linear-gradient(135deg, #48ADC1 0%, #018BD5 50%, #1D9BD0 100%);
	background: -webkit-linear-gradient(-45deg, #48ADC1 0%, #018BD5 50%, #1D9BD0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
}

@media (min-width: 1025px) {
	.footer-servies {
		text-align: left;
		font-weight: 700;
	}
}

.footer-servies-btn {
	transition: all 0.2s ease-out;
	border-radius: 5px;
}

.footer-servies-btn:hover {
	background: linear-gradient(270deg, #1AA782 0%, #0173B9 25%, #0173B9 51%, #1AA782 100%);
	padding: .5rem .8rem;
}

.footer-servies-btn span {
	position: relative;
	background: linear-gradient(135deg, #48ADC1 0%, #018BD5 50%, #1D9BD0 100%);
	background: -webkit-linear-gradient(-45deg, #48ADC1 0%, #018BD5 50%, #1D9BD0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	letter-spacing: .1em;
}

.footer-servies-btn span:hover {
	background: linear-gradient(135deg, #fff 0%, #fff 50%, #fff 100%);
	background: -webkit-linear-gradient(-45deg, #fff 0%, #fff 50%, #fff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.footer-nav {
	display: none;
}

@media (min-width: 1025px) {
	.footer-nav {
		display: flex;
		margin-left: auto;
		margin-right: auto;
	}

	.footer-nav li {
		margin: 0;
		line-height: 1.7;
		font-size: 15px;
	}

	.footer-nav li a {
		display: block;
		font-family: YakuHanJP, "Roboto", sans-serif;
		font-weight: 400;
		text-decoration: none;
		height: 100%;
		padding-left: 1rem;
		padding-right: 1rem;
		padding-top: 1rem;
		position: relative;
		text-align: center;
		overflow: hidden;
		background: linear-gradient(135deg, #48ADC1 0%, #018BD5 50%, #1D9BD0 100%);
		background: -webkit-linear-gradient(-45deg, #48ADC1 0%, #018BD5 50%, #1D9BD0 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.footer-nav li a::after {
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		content: "";
		transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	}

	.footer-nav li a span {
		display: block;
		width: 100%;
		margin: 0 auto;
		transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
		background: linear-gradient(135deg, #48ADC1 0%, #018BD5 50%, #1D9BD0 100%);
		background: -webkit-linear-gradient(-45deg, #48ADC1 0%, #018BD5 50%, #1D9BD0 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.footer-nav li a span.pc-nav-ja {
		position: absolute;
		top: 100%;
		left: 0%;
		font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
		font-size: 15px;
		font-weight: 400;
		letter-spacing: .1em;
		white-space: nowrap;
	}

	.footer-nav li a span.pc-nav-en {
		font-family: YakuHanJP, "Roboto", sans-serif;
		letter-spacing: .4rem;
	}

	.footer-nav li a:hover::after {
		width: 100%;
	}

	.footer-nav li a:hover span.pc-nav-en {
		transform: translate(0%, +250%);
	}

	.footer-nav a:hover span.pc-nav-ja {
		top: 18%;
	}

	.footer-nav li a:hover {
		transition: all .2s;
	}
}

.footer-tel-con {
	width: 100%;
	font-size: 8.5vw;
	font-weight: 600;
	border-top: 2px solid #C6E7F0;
	border-bottom: 2px solid #C6E7F0;
}

@media (min-width: 768px) {
	.footer-tel-con {
		font-size: 3.4rem;
		font-weight: 700;
		border-top: none;
		border-bottom: none;
	}
}

@media (min-width: 1025px) {
	.footer-tel-con {
		font-size: 1.8rem;
		width: 14rem;
	}
}

.footer-tel {
	letter-spacing: normal;
}

.footer-border-con-1 {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
}

@media (min-width: 1025px) {
	.footer-border-con-1 {
		justify-content: center;
		width: 25%;
	}
}

.footer-border-con-2 {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
}

@media (min-width: 1025px) {
	.footer-border-con-2 {
		border-left: 2px solid #C6E7F0;
		border-right: 2px solid #C6E7F0;
		width: 46%;
		height: 4rem;
		justify-content: center;
	}
}

.footer-border-con-3 {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
}

@media (min-width: 1025px) {
	.footer-border-con-3 {
		width: 25%;
		justify-content: center;
	}
}

.footer-font {
	position: relative;
	background: linear-gradient(135deg, #48ADC1 0%, #018BD5 50%, #1D9BD0 100%);
	background: -webkit-linear-gradient(-45deg, #48ADC1 0%, #018BD5 50%, #1D9BD0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: all .2s;
	letter-spacing: .1em;
}

.footer-font:hover {
	background: linear-gradient(135deg, #1394D0 0%, #48ADC1 100%);
	background: -webkit-linear-gradient(-45deg, #1394D0 0%, #48ADC1 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.copyright {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 10px;
	color: #fff;
	background: linear-gradient(90deg, rgba(74, 173, 192, 1) 0%, rgba(21, 149, 207, 1) 50%, rgba(95, 192, 199, 1) 100%);
	background-size: 200% 200%;
	animation: bggradient 15s ease infinite;
	height: 6rem;
	letter-spacing: .1em;
}

@media only screen and (min-width: 376px) {
	.copyright {
		font-size: 12px;
	}
}

/* ----------------------------------------------------------------------
 アニメーション
---------------------------------------------------------------------- */

/*1.フェードインアニメーションの指定*/

/* アニメーションの基本設定 */
[data-animation] {
	opacity: 0;
	/* 初期透明度を0に設定 */
	visibility: hidden;
	/* 初期状態では非表示 */
	will-change: opacity, transform;
	/* パフォーマンス最適化のために変更が予想されるプロパティを指定 */
}

/* 下から上へ */
.downup {
	animation: downup 0.6s ease-out forwards;
}

@keyframes downup {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 上から下へ */
@keyframes updown {
	0% {
		opacity: 0;
		visibility: visible;
		transform: translateY(-30px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.updown {
	animation: updown 0.6s ease-out forwards;
}

/* 右から左へ */
@keyframes slideRight {
	0% {
		opacity: 0;
		visibility: visible;
		transform: translateX(20px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.slide-right {
	animation: slideRight 0.6s ease-out forwards;
}

/* 左から右へ */
@keyframes slideLeft {
	0% {
		opacity: 0;
		visibility: visible;
		transform: translateX(-20px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.slide-left {
	animation: slideLeft 0.6s ease-out forwards;
}


/* アニメーション適用クラス */
.downup,
.updown,
.slide-right,
.slide-left {
	animation-fill-mode: forwards;
	/* アニメーション終了時のスタイルを保持 */
	animation-timing-function: ease-out;
	/* タイミング関数 */
}


/* ----------------------------------------------------------------------
inview アニメーションの基本スタイル 
---------------------------------------------------------------------- */
.inview {
	opacity: 0;
	transition: opacity 0.6s ease-out;
}

/* アニメーション適用クラス */
.animated {
	opacity: 1;
	transition: opacity 0.6s ease-out;
}

/* 下から上へのアニメーション */
.inview.downup {
	animation: downup 0.6s ease-out forwards;
}

@keyframes downup {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 上から下へのアニメーション */
.inview.updown {
	animation: updown 0.6s ease-out forwards;
}

@keyframes updown {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 右から左へのアニメーション */
.inview.slide-right {
	animation: slideRight 0.6s ease-out forwards;
}

@keyframes slideRight {
	from {
		opacity: 0;
		transform: translateX(20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* 左から右へのアニメーション */
.inview.slide-left {
	animation: slideLeft 0.6s ease-out forwards;
}

@keyframes slideLeft {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/*表示時差*/
.animated.delay01 {
	transition-delay: 0.1s;
}

.animated.delay02 {
	transition-delay: 0.4s;
}

.animated.delay03 {
	transition-delay: 0.7s;
}

.animated.delay04 {
	transition-delay: 1s;
}

/* ----------------------------------------------------------------------
modal
---------------------------------------------------------------------- */
.modaal-container {
	background: linear-gradient(90deg, rgba(3, 100, 168, 1) 0%, rgba(18, 115, 148, 1) 50%, rgba(35, 144, 153, 1) 100%) !important;
}

.modal-area {
	color: #fff;
}

/* ----------------------------------------------------------------------
top
---------------------------------------------------------------------- */
.hero {
	height: 78vh;
}

@media (min-width: 1025px) {
	.hero {
		height: auto;
	}
}

.hero-anime {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 1025px) {
	.hero-anime {
		width: 46rem;
	}
}

/*スクロールダウン全体の場所*/
.scrolldown2 {
	display: none;
}

@media (min-width: 1025px) {
	.scrolldown2 {
		position: absolute;
		top: 0;
		left: 1%;
		display: block;
	}

	/*Scrollテキストの描写*/
	.scrolldown2 span {
		position: absolute;
		left: 10px;
		top: 10px;
		/*テキストの形状*/
		color: #eee;
		font-size: 1.3rem;
		font-family: YakuHanJP, "Roboto", sans-serif;
		letter-spacing: 0.05em;
		/*縦書き設定*/
		-ms-writing-mode: tb-rl;
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
	}

	/* 丸の描写 */
	.scrolldown2:before {
		content: "";
		/*描画位置*/
		position: absolute;
		bottom: 0;
		left: -4px;
		/*丸の形状*/
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #eee;
		/*丸の動き1.6秒かけて透過し、永遠にループ*/
		animation:
			circlemove 1.6s ease-in-out infinite,
			cirlemovehide 1.6s ease-out infinite;
	}

	/*下からの距離が変化して丸の全体が上から下に動く*/
	@keyframes circlemove {
		0% {
			bottom: 0;
		}

		100% {
			bottom: -42rem;
		}
	}

	/*上から下にかけて丸が透過→不透明→透過する*/
	@keyframes cirlemovehide {
		0% {
			opacity: 0
		}

		50% {
			opacity: 1;
		}

		80% {
			opacity: 0.9;
		}

		100% {
			opacity: 0;
		}
	}

	/* 線の描写 */
	.scrolldown2:after {
		content: "";
		/*描画位置*/
		position: absolute;
		top: 0;
		left: 0;
		/*線の形状*/
		width: 1px;
		height: 42rem;
		background: #eee;
	}
}

.top-creative {
	background: linear-gradient(90deg, rgba(0, 93, 220, 1) 0%, rgba(165, 165, 94, 1) 50%, rgba(253, 175, 57, 1) 100%);
	background-size: 200% 200%;
	animation: bggradient 15s ease infinite;
}

.top-products {
	background: linear-gradient(90deg, rgba(0, 110, 190, 1) 0%, rgba(0, 168, 157, 1) 50%, rgba(34, 181, 114, 1) 100%);

	background-size: 200% 200%;
	animation: bggradient 15s ease infinite;
}

.top-about-img {
	width: 246px;
}

@media only screen and (min-width: 768px) {
	.top-about-img {
		width: 318px;
	}
}

.col-top-slide-1 {
	width: 100%;
}

@media (min-width: 768px) {
	.col-top-slide-1 {
		width: 20%;
	}
}

.col-top-slide-2 {
	width: 100%;
}

@media (min-width: 768px) {
	.col-top-slide-2 {
		width: 80%;
	}
}


/* ----------------------------------------------------------------------
サブページ共通
---------------------------------------------------------------------- */
.wrapper {
	width: 100%;
	padding-top: 8rem;
}

@media (min-width: 1025px) {
	.wrapper {
		padding-top: 10rem;
	}
}

.bg-10p {
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 15px;
	padding: 3rem;
}

.heading-bg {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	color: #fff;
	font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
	background: linear-gradient(90deg, rgba(0, 169, 157, 1) 0%, rgba(197, 174, 80, 1) 80%, rgba(251, 176, 59, 1) 100%);
	background-size: 200% 200%;
	animation: bggradient 15s ease infinite;
}

/* ----------------------------------------------------------------------
iclick
---------------------------------------------------------------------- */
.iclick-what {
	width: 30rem;
}

@media only screen and (min-width: 768px) {
	.iclick-what {
		width: 41rem;
	}
}

.bnr-area-con {
	background: #ffffff;
	height: 6rem;
	padding-top: 1.5rem;
}

@media only screen and (min-width: 768px) {
	.bnr-area-con {
		height: 8rem;
		padding-top: 3rem;
	}
}

@media only screen and (min-width: 1025px) {
	.bnr-area-con {
		height: 9rem;
		padding-top: 1.5rem;
	}
}

@media only screen and (min-width: 1500px) {
	.bnr-area-con {
		height: 12.5rem;
		padding-top: 2.5rem;
	}
}

.bnr-item {
	margin-right: 5px;
	margin-left: 5px;
}

.bnr-item img {
	width: 100%;
	max-width: 270px;
	height: auto;
}

/* 吹き出し見出し */
.fukidashi {
	position: relative;
	padding: 1rem;
	border: 1px solid #fff;
	text-align: center;
	margin: 1.5em auto;
	padding: 16px 30px;
	min-width: 120px;
	max-width: 100%;
	border-radius: 10px;
	color: #fff;
}

.fukidashi:before,
.fukidashi:after {
	position: absolute;
	left: 50%;
	content: "";
	height: 0;
	width: 0;
}

.fukidashi:before {
	top: 100%;
	border: 9px solid;
	border-color: transparent;
	border-top-color: #fff;
	margin-left: -9px;
}

.fukidashi:after {
	top: 100%;
	border: 8px solid;
	border-color: transparent;
	border-top-color: #fff;
	margin-left: -8px;
}

.label-project {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	line-height: 1.8;
	border-radius: 2rem;
	color: #fff;
	background: #00A99D;
	font-size: 14px;
	font-weight: 400;
	width: 135px;
	height: 25px;
	text-align: center;
	margin-right: 1.5rem;
}

.label-number {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	line-height: 1.8;
	border-radius: 2rem;
	color: #fff;
	background: #00A99D;
	font-size: 16px;
	font-weight: 500;
	width: 100%;
	text-align: center;
	letter-spacing: .1em;
}

/* before after */
.col-2-iclick {
	width: 100%;
}

@media (min-width: 768px) {
	.col-2-iclick {
		width: 46%;
	}
}

.icon-arrow {}

@media (min-width:768px) {
	.icon-arrow {
		transform: rotate(-90deg);
	}
}

/* graph container */
.graph-cont {
	width: 100%;
	margin: 3rem auto 0;
	/* 簡潔に書き換えました */
	max-width: 1000px;
}

/* Base style for bar */
.bar {
	height: 15px;
	line-height: 15px;
	/* 高さとラインハイトを同じにする */
	max-width: 1000px;
	margin: 0 auto 10px;
	font-size: 16px;
	color: white;
	padding: 5px 0 5px 10px;
	/* 内部の高さを合わせるためのパディング */
	position: relative;
	background: #ecf0f1;
}

@media (min-width: 768px) {
	.bar {
		height: 30px;
		line-height: 30px;
		/* 高さとラインハイトを同じにする */
	}
}

/* Background before animation starts */
.bar::before {
	content: '';
	width: 100%;
	position: absolute;
	left: 0;
	height: 100%;
	/* 親要素の高さと同じにする */
	top: 0;
	z-index: 0;
	background: #ecf0f1;
}

/* Animated bar element */
.bar::after {
	content: '';
	background: #FBB03B;
	height: 100%;
	/* 親要素の高さと同じにする */
	transition: 0.7s;
	width: 0%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

/* Animation trigger class */
.bar.start::after {
	width: 75%;
	/* 各.bar要素に合わせて変更する */
	-webkit-animation: bar-before 1s ease-out forwards;
	animation: bar-before 1s ease-out forwards;
}

/* Keyframes for the animation */
@-webkit-keyframes bar-before {
	0% {
		width: 0%;
	}

	100% {
		width: 71%;
		/* 各.bar要素に合わせて変更する */
	}
}

@keyframes bar-before {
	0% {
		width: 0%;
	}

	100% {
		width: 71%;
		/* 各.bar要素に合わせて変更する */
	}
}

.col-2-slide-1,
.col-2-slide-2 {
	width: 100%;
}

@media (min-width:1025px) {
	.col-2-slide-1 {
		width: 58%;
	}
}

@media (min-width:1025px) {
	.col-2-slide-2 {
		width: 40%;
	}
}

/* ----------------------------------------------------------------------
creative
---------------------------------------------------------------------- */
.tab {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
}

.tab li {
	width: 48%;
}

.tab li a {
	display: block;
	text-decoration: none;
	background: #B8B8B8;
	border-radius: 15px;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.tab li.active a {
	background: #00A99D;
	color: #fff;
}

.btn-tab {
	position: relative;
	overflow: hidden;
	text-decoration: none;
	text-align: center;
	outline: none;
	transition: ease .2s;
	line-height: 1.6;
	font-size: 13px;
}

@media (min-width: 376px) {
	.btn-tab {
		font-size: 14px;
	}
}

.btn-tab span {
	position: relative;
	z-index: 3;
}

.btn-green-tab {
	background: #fff;
}

.btn-green-tab span {
	color: #fff;
}

.bgskew-green-tab::before {
	background: #00A99D;
}

.btn-green-tab:hover span {
	color: #fff;
}

.area {
	display: none;
	opacity: 0;
	overflow: normal;
}

.area.is-active {
	display: block;
	animation-name: displayAnime;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

@keyframes displayAnime {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.scrolldown-creative-1 {
	display: none;
}

@media (min-width: 1025px) {
	.scrolldown-creative-1 {
		position: absolute;
		top: 0;
		left: 1%;
		display: block;
	}

	/* 丸の描写 */
	.scrolldown-creative-1:before {
		content: "";
		/*描画位置*/
		position: absolute;
		bottom: 0;
		left: -4px;
		/*丸の形状*/
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #eee;
		/*丸の動き1.6秒かけて透過し、永遠にループ*/
		animation:
			circlemove-creative-1 5s ease-in-out infinite,
			cirlemovehide 1.6s ease-out infinite;
	}

	/* 線の描写 */
	.scrolldown-creative-1:after {
		content: "";
		/*描画位置*/
		position: absolute;
		top: 0;
		left: 0;
		/*線の形状*/
		width: 1px;
		height: 308rem;
		background: #eee;
	}
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove-creative-1 {
	0% {
		bottom: 0;
	}

	100% {
		bottom: -308rem;
	}
}

.scrolldown-creative-2 {
	display: none;
}

@media (min-width: 1025px) {
	.scrolldown-creative-2 {
		position: absolute;
		top: 0;
		left: 1%;
		display: block;
	}

	/* 丸の描写 */
	.scrolldown-creative-2:before {
		content: "";
		/*描画位置*/
		position: absolute;
		bottom: 0;
		left: -4px;
		/*丸の形状*/
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #eee;
		/*丸の動き1.6秒かけて透過し、永遠にループ*/
		animation:
			circlemove-creative-2 6s ease-in-out infinite,
			cirlemovehide 1.6s ease-out infinite;
	}

	/* 線の描写 */
	.scrolldown-creative-2:after {
		content: "";
		/*描画位置*/
		position: absolute;
		top: 0;
		left: 0;
		/*線の形状*/
		width: 1px;
		height: 377rem;
		background: #eee;
	}
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove-creative-2 {
	0% {
		bottom: 0;
	}

	100% {
		bottom: -377rem;
	}
}


.flow-font {
	position: relative;
	background: linear-gradient(135deg, #48ADC1 0%, #018BD5 50%, #1D9BD0 100%);
	background: -webkit-linear-gradient(-45deg, #48ADC1 0%, #018BD5 50%, #1D9BD0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: all .2s;
	letter-spacing: .1em;
	line-height: 1.2;
}


.flow-contents {
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
	background: #fff;
}

@media (min-width:768px) {
	.flow-contents {
		width: 94%;
	}
}

@media (min-width: 1025px) {
	.flow-contents {
		width: 100rem;
	}
}

.flow-contents p {
	color: #333;
}

.col-2-flow-1 {
	width: 100%;
}

@media (min-width:1025px) {
	.col-2-flow-1 {
		width: 45.5%;
		height: 28.4rem;
	}
}

.col-2-flow-2 {
	width: 100%;
	padding-left: 3rem;
	padding-right: 3rem;
	padding-bottom: 3rem;
}

@media (min-width:1025px) {
	.col-2-flow-2 {
		width: calc(54% - 6rem);
		padding-left: 5rem;
		padding-right: 1rem;
		padding-bottom: 0;
	}
}


/* ----------------------------------------------------------------------
company
---------------------------------------------------------------------- */

.company-logo {
	width: 168px;
}

@media only screen and (min-width: 768px) {
	.company-logo {
		width: 247px;
	}
}

.type-01 table {
	table-layout: auto;
	width: 100%;
	min-width: 100%;
	border-collapse: collapse;
	border-top: none;
	border-bottom: none;
	font-size: 1.6rem;
	line-height: 1.8;
	letter-spacing: .1em;
}

@media only screen and (min-width: 768px) {
	.type-01 table {
		table-layout: fixed;
		border-top: 1px solid #C6E7F0;
		border-bottom: 1px solid #C6E7F0;
	}
}

.type-01 table tr {
	border-top: none;
	border-bottom: none;
}

@media only screen and (min-width: 768px) {
	.type-01 table tr {
		border-bottom: 1px solid #C6E7F0;
	}
}

.type-01 table td:nth-child(odd) {
	display: block;
	vertical-align: middle;
	text-align: center;
	color: #fff;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 5px;
	width: 100%;
	padding: 1rem 0px;
}

@media only screen and (min-width: 768px) {
	.type-01 table td:nth-child(odd) {
		display: table-cell;
		width: 25%;
		background: none;
		padding: 1rem;
	}

}

.type-01 table td {
	display: block;
	text-align: left;
	vertical-align: middle;
	padding: 2.5rem 1rem 2.5rem 1rem;
}

@media only screen and (min-width: 768px) {
	.type-01 table td {
		padding: 2.5rem 1rem 2.5rem 5rem;
	}
}

.col-company-1 {
	width: 100%;
}

@media (min-width: 1025px) {
	.col-company-1 {
		width: 70%;
	}
}

.col-company-2 {
	width: 100%;
}

@media (min-width: 1025px) {
	.col-company-2 {
		width: 25%;
	}
}

/* ----------------------------------------------------------------------
recruit
---------------------------------------------------------------------- */
.recruit-illust {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 1025px) {}

/* ----------------------------------------------------------------------
contact
---------------------------------------------------------------------- */
/*
input, button, textarea, select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
*/

input,
textarea {
	padding: 15px 15px !important;
	background: #fff;
	border-radius: 5px;
	font-size: 14px;
	border: none;
	font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
}

textarea {
	min-width: 100%;
	min-height: 200px;
}

@media only screen and (min-width: 1025px) {
	textarea {
		min-height: 400px;
	}
}


input[type="checkbox"] {
	padding: 0 !important;
}

@media only screen and (min-width: 768px) {
	input[type="checkbox"] {
		width: 20px;
		height: 20px;
	}
}

input:focus,
textarea:focus {
	outline: none;
	background: #fff;
}

input:-webkit-autofill {
	box-shadow: 0 0 0 1000px #eee inset;
}

input::placeholder,
textarea::placeholder {
	color: #D5D5D5;
	font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
}

.contact-head {
	display: flex;
	align-items: center;
	margin: 2em 0 1rem 0;
	font-weight: 700;
}

@media only screen and (min-width: 1025px) {
	.contact-head {
		margin: 5rem 0 1.5rem 0;
	}
}

.required {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	line-height: 1.8;
	border-radius: 2rem;
	color: #fff;
	background: #00A99D;
	font-size: 14px;
	font-weight: 400;
	height: 25px;
	margin-right: 1rem;
}

.contact-name {
	font-size: 1.8rem;
	font-weight: 500;
}

@media only screen and (min-width: 1025px) {
	.contact-name {
		font-size: 1.6rem;
	}
}

.form-s {
	width: 100%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

@media only screen and (min-width: 1025px) {
	.form-s {
		width: 490px;
	}
}

.form-m {
	width: 100%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

@media only screen and (min-width: 1025px) {
	.form-m {
		width: 490px;
	}
}

.form-l,
.form-xl {
	width: 100%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.form-xl {
	height: 250px;
}

@media only screen and (min-width: 1025px) {
	.form-xl {
		height: 300px;
	}
}

.contact-doi {
	display: flex;
	flex-wrap: wrap;
	font-size: 1.6rem;
	line-height: 1.8;
	max-width: 78%;
}

@media only screen and (min-width: 1025px) {
	.contact-doi {
		font-size: 1.5rem;
	}
}

.submit-btn {
	border: none;
	font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
	display: block;
	cursor: pointer;
	margin-top: 3rem;
	margin-bottom: 3rem;
	margin-left: auto;
	margin-right: auto;

}

@media only screen and (min-width: 1025px) {
	.submit-btn {
		margin-top: 10rem;
		margin-bottom: 0;
	}
}

/* mailformpro okを削除するコード */
.mfp_ok {
	display: none !important;
}