@charset "UTF-8";

figure {
	position: relative;
}

figcaption {
	position: absolute;
	bottom: 4px;
	right: 8px;
	font-size: 12px;
	letter-spacing: 0.065em;
	padding: 8px 8px;
	color: #fff;
	text-shadow: 
	0px 0px 10px rgba(0, 0, 0, 0.3), 
	0px 0px 10px rgba(0, 0, 0, 0.3), 
	0px 0px 10px rgba(0, 0, 0, 0.3), 
	0px 0px 10px rgba(0, 0, 0, 0.3), 
	0px 0px 10px rgba(0, 0, 0, 0.3), 
	0px 0px 10px rgba(0, 0, 0, 0.3), 
	0px 0px 10px rgba(0, 0, 0, 0.3);
}
figcaption.black {
	color: #000;
	text-shadow: none;
}
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.error_text {
  position: absolute;
  /* left: 0; */
  bottom: -30px;
  color: #c22828;
  /* background-color: rgba(255, 255, 255, .8); */
  line-height: 2;
  letter-spacing: 1px;
  padding: 0 10px;
  font-size: 12px;
}
/* mv
---------------------------------------------- */
.mv {
	position: relative;
	/* background-image: url(../img/mv.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: cover; */
	height: 435px;
}
.mv_box {
	position: absolute;
	/* color: #fff; */
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	width: 98%;
}
.mv_img {
	display: block;
	width: clamp(190px, 39vw, 380px);
	margin-inline: auto;
}
.mv .cap {
	position: absolute;
	color: #fff;
	font-size: 12px;
	bottom: clamp(1.625rem, -0.175rem + 9vw, 10.625rem);
	left: 10px;
}


/* contents
============================= */
.contents {
	overflow: hidden;
}
.contents_wrap {
	display: flex;
	justify-content: center;
	/* column-gap: 20px; */
}
.contents_title {
	display: inline-block;
	color: rgb(90,174,201);
	background: linear-gradient(142deg, rgba(90,174,201,1) 0%, rgba(107,188,104,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: clamp(1.5rem, -0.284rem + 3.712vw, 2.5rem);
	font-weight: bold;
	line-height: 1.75;
	letter-spacing: 0.065em;
}
.contents_text {
	margin-top: 40px;
	font-size: 18px;
	line-height: 2;
	letter-spacing: 0.065em;
	font-weight: bold;
}
.contents_item {
	width: 100%;
}
.contents_img {
	width: 100%;
	position: relative;
}
.cap {
	font-size: 11px;
	letter-spacing: 0.065em;
	line-height: 2;
	word-break: break-all;
}

	@media only screen and (max-width:768px) {
	.mv {
		height: 320px;
	}
	.contents {
		padding-bottom: 40px;
	}
	.contents_wrap {
		display: contents;
	}
	.contents_title {
		font-size: 24px;
		text-align: center;
		display: block;
	}
	.contents_text {
		margin-top: 20px;
		font-size: 16px;
	}
	.cap {
		font-size: 11px;
		letter-spacing: 0.065em;
		line-height: 2;
	}
}

.main {
	background-image: url(../img/img-bg.jpg);
	background-repeat: no-repeat;
	background-size: contain;
}

/* login
----------------- */
.login_wrap .contents_item{
	padding-block: 120px;
}
.login_item01 {
	background-color: #e5f0ce;
}
.login_item01-inner {
	width: min(750px, 80%);
    margin: unset;
    margin-left: auto;
    padding-inline: min(80px, 8%) 20px;
}
.login_item02 {
	background-color: #c1e5c8;
}
.login_item02-inner {
	width: min(750px, 80%);
    margin: unset;
    margin-right: auto;
    padding-inline: min(150px, 15%) 20px;
}
.login_title {
	font-size: min(28px, 6vw);
	line-height: 1.6;
	letter-spacing: 0.1em;
}
.login_title02 {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}
.login_text01 {
	font-weight: normal;
	margin-bottom: 20px;
	font-size: min(16px, 3.6vw);
}
.login_text02 {
	font-weight: normal;
	margin-top: 0;
	margin-bottom: min(20px, 2vw);
	font-size: clamp(16px, 1.7vw, 28px);
}
.login_text03 {
	font-weight: normal;
	margin-top: 00px;
	font-size: clamp(10px, 1.1vw, 18px);
}
.login_text04 {
	margin-block: 80px;
	text-align: center;
}
.login_form {
	max-width: 400px;
}
.login_form-input {
	width: 100%;
	padding: 1em;
	margin-bottom: 1em;
}
.login_btn {
	background-color: #286552;
}
.login_texts {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: #fff;
	text-shadow: 0px 0px 10px #000, 0px 0px 10px #000, 0px 0px 10px #000, 0px 0px 10px #000, 0px 0px 10px #000;
}
/* .login_img {} */
/* 左右に覗かせるためにコンテナにパディングを確保 */
#loginSlider {
  --peek: 80px; /* 左右に覗かせたい幅 */
  padding-inline: var(--peek);
  overflow: hidden; /* 横はみ出しを隠す */
  position: relative;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
	left: 9%;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
	right: 9%;
	left: auto;
}
.swiper-button-next, .swiper-button-prev {
	color: #000;
}

/* slidesPerView:'auto' の場合、スライド幅は自分で指定 */
/* #loginSlider .swiper-slide {
  width: calc(100% - (var(--peek) * 2));
  box-sizing: border-box;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: scale(.9);
  opacity: .6;
} */

/* flow
----------------*/
.flow_img {
	width: min(333px, 50vw);
}
.flow_wrap {
	border: 1px solid #286552;
	padding: 50px;
	position: relative;
}
.flow_wrap:before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 60px;
	height: 1px;
	background-color: #286552;
	transform: translateX(-50%) rotate(90deg);
}
.flow_list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	font-weight: normal;
	margin-top: 0;
}
.flow_item {
	padding: 20px;
	position: relative;
}
.flow_item:not(:last-of-type)::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 30px;
	height: 30px;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	transform: rotateZ(45deg);
}
.flow_step {
	font-size: 24px;
	letter-spacing: 0.05em;
	color: #286552;
	font-weight: 600;
	line-height: 1.6;
	margin-bottom: 0.4em;
}
.flow_step-num {
	color: #727272;
	font-size: 18px;
	font-weight: normal;
}
.flow_step-num i {
	font-size: 180%;
	font-style: normal;
}
.flow_desc {
	font-size: 14px;
}
.flow_btn {
	width: min(500px, 90%);
	margin-inline: auto;
	margin-top: 40px;
	background-image: linear-gradient(to right, #6a8f6d, #94af96, #6a8f6d);
	font-size: 24px;
	letter-spacing: 0.05em;
}
@media screen and (max-width: 1200px) {
	.login_wrap {
		display: contents;
	}
	.login_item01-inner,
	.login_item02-inner {
		padding-inline: 20px;
        margin: 0 auto;
	}
}
@media screen and (max-width: 768px) {
    .inner {
        width: 85.333334%;
        max-width: 560px;
		margin: 0 auto;
		padding: 0;
    }
	.login_wrap .contents_item {
		padding-block: 60px;
	}
	#loginSlider {
		margin-left: -30px;
		margin-right: -30px;
	}
	:root {
    	--swiper-navigation-size: 25px;
	}
	.login_title02 {
		flex-direction: column;
	}
	.login_text04 {
		margin-bottom: 160px;
	}
	.login {
		background: url(../img/img-bg02.jpg) no-repeat center center/cover;
	}
	.login_text02 {
		font-size: max(4vw, 18px);
	}
	.login_text03 {
		font-size: max(2vw, 10px);
	}
	.flow_wrap:before {
		top: -10%;
	}
	.flow_list {
		grid-template-columns: 1fr;
	}
	.flow_wrap {
		padding-inline: 20px;
	}
	.flow_text {
		font-size: min(16px, 3.6vw);
	}
	.flow_item {
		padding-inline: min(40px, 4vw);
	}
	.flow_item:not(:last-of-type)::before {
		top: unset;
		bottom: -10%;
		left: 50%;
		transform: translateX(-50%) rotate(135deg);
	}
	.flow_desc {
		font-size: 12px;
	}
	.flow_btn {
		font-size: 20px;
	}
}