@charset "UTF-8";

.inner {
	margin: 0 auto;
	width: 90vw;
	max-width: 1280px;
	position: relative;
	z-index: 3;
	font-family: 'Noto Sans JP', sans-serif;
	-webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
	letter-spacing: .05em;
	color: #002233;
	text-align: center;
}
.title_main {
	background-color: #638eff;
	border-radius: 1em;
	overflow: hidden;
	margin: 1em 0;
	padding: 1em .5em 20%;
	position: relative;
}
	.ttlType01 {
		color: #fff;
	}
		.ttlType01 span {
			position: relative;
			font-weight: 800;
			font-size:  7vw;
			line-height: 1.2;
		}
		.ttlType01 span::before {
			-webkit-transform: rotate(-30deg);
			transform: rotate(-30deg);
			left: -1em;
		}
		.ttlType01 span::after {
			-webkit-transform: rotate(30deg);
			transform: rotate(30deg);
			right: -1em;
		}
		.ttlType01 span::before, .ttlType01 span::after {
			width: .08em;
			height: 2.5em;
			background: #ffffff;
			content: "";
			display: block;
			position: absolute;
			bottom: -.2em;
		}
	.ttlType02 {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: auto;
	}
		.ttlType02 span {
			display: inline-block;
			line-height: 1;
		}
		.logoType01 {
			width: 35vw;
			margin-right: .2em;
		}
			.logoType01 img {
				vertical-align: middle;
				margin-bottom: .1em;
			}
		.ttlText {
			font-size: 5vw;
			font-weight: bold;
		}
.imgMain {
	position: relative;
	margin: 1em 0 0;
}
	.pic01 {
		position: relative;
		width: 25%;
		left: 37.5%;
		z-index: 2;
	}
	.pic02 {
		position: absolute;
		width: 20%;
		margin: auto;
		top: -15%;
		left: 58.5%;
		z-index: 1;
	}
		.pic02 span { display: block;}
		.pic02_img {}
		.pic02_text {
			position: absolute;
			top: 21%;
			left: 26%;
			font-size: 4.2vw;
			line-height: 1.2;
			letter-spacing: .05em;
			font-weight: 600;
		}
	.imgSub {}
		.pic_person01,.pic_person02,.pic_person07,.pic_person08 { display: none;}
		.pic_person01,.pic_person02,.pic_person03,.pic_person04,.pic_person05,.pic_person06,.pic_person07,.pic_person08 {
			position: absolute;
			bottom: -2%;
			width: 20%;
			z-index: 3;
		}
		.pic_person03 { left: 5%;}
		.pic_person04 { left: 27.5%;}
		.pic_person05 { left: 52.5%;}
		.pic_person06 { left: 75%;}

.mailguide { margin: 0 0 2em;}
.title_sub__inner {}
	.imgType01 {
		margin: 1em auto;
		width: 60%;
	}
	.title_sub {}
		.ttlType03 {}
			.ttlType03 span {
				position: relative;
				font-size:  1.7rem;
				line-height: 1.4;
				color: #638EFF;
			}
			.ttlType03 span::before {
				-webkit-transform: rotate(-30deg);
				transform: rotate(-30deg);
				left: -.8em;
			}
			.ttlType03 span::after {
				-webkit-transform: rotate(30deg);
				transform: rotate(30deg);
				right: -.8em;
			}
			.ttlType03 span::before, .ttlType03 span::after {
				width: 1px;
				height: 1.3em;
				background: #638EFF;
				content: "";
				display: block;
				position: absolute;
				bottom: -.2em;
			}
		.ttlType04 {
			font-weight: 800;
			font-size: 2rem;
			line-height: 1.2;
		}
			.ttlType04 span {
				font-weight: 800;
				font-size: 2.6rem;
				display: block;
			}

.listType01 { margin: 0 0 2em;}
	.listType01 li {
		position: relative;
		margin: 1em 0;
	}
		.guide_image {
			margin: auto;
			width: 50vw;
		}
		.guide_title {
			color: #638EFF;
			position: absolute;
			top: 33vw;
			left: 20vw;
			width: 50vw;
			font-size: 5vw;
			line-height: 1.2;
		}
			.guide_title span {
				display: block;
				font-weight: 800;
			}
.detail {}
	.detail dt {
		font-weight: 600;
		font-size: 2.2rem;
		line-height: 1.2;
		margin: .5em 0 .2em;
	}
	.date {
		display: inline;
		font-size: 1.6rem;
		font-weight: 600;
		color: #638EFF;
		background: url("../images/pic_mail01.svg") 0 .05em no-repeat;
		background-size: 1em auto;
		padding-left: 1.5em;
	}
		.date span {
			font-size: .8em;
		}
		.date span:nth-child(2){
			padding-left: .2em;
		}
	.explanation {
		font-size: 1.5rem;
		margin-top: .5em;
	}
.btnArea01 {
	width: 70%;
	margin: .5em auto;
}
.btnType01 {
	display: block;
	border: solid 3px;
	border-radius: 100px;
	color: #002233;
	background-color: #FFFF00;
	text-align: center;
	line-height: 1.2;
	padding: .8em;
	font-size: 1.8rem;
}
.btnType01 span {
	position: relative;
	padding: 0 0 0 2em;
	font-weight: 600;
}
.btnType01 span::before {
	content: "";
	position: absolute;
	top: 50%;
	left: .35em;
	width: .6em;
	height: .6em;
	border-top: #002233 .1em solid;
	border-right: #002233 .1em solid;
	-webkit-transform: translateY(-50%) rotate(45deg);
	transform: translateY(-50%) rotate(45deg);
}

/* !Elements ------------------- */
.fzSS { font-size: 1.1rem; color: #999999;}

/* !Animation ------------------- */
.animation01s {
	visibility: visible;
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}
.animation02s {
	visibility: visible;
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}
.animation03s {
	visibility: visible;
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
}
.animation04s {
	visibility: visible;
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}
.animation05s {
	visibility: visible;
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}
.animation06s {
	visibility: visible;
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}
.animation07s {
	visibility: visible;
	-webkit-animation-delay: 0.7s;
	animation-delay: 0.7s;
}
.animation08s {
	visibility: visible;
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
}
.animation09s {
	visibility: visible;
	-webkit-animation-delay: 0.9s;
	animation-delay: 0.9s;
}
.animation10s {
	visibility: visible;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}

@keyframes bounce01 {
	0% { opacity:0; transform:scale(0.5,1.5) translateY(-100%);}
	50% { opacity:1; transform:scale(1.5,0.5) translateY(0);}
	100% { opacity:1; transform:scale(1,1) translateY(0px);}
}
.bounce01 {
    -webkit-animation-name: bounce01;
	animation-name: bounce01;
	-webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
	animation-timing-function: ease-out;
}

@keyframes bounce02 {
	0% { opacity: 0; transform: scale(.8);}
	40% { opacity: 1; transform: scale(1.1);}
	70% { opacity: 1; transform: scale(.9);}
	100% { opacity: 1; transform: scale(1);}
}
.bounce02 {
	-webkit-animation-name: bounce02;
	animation-name: bounce02;
	-webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
	animation-timing-function: ease-in-out;
}

@-webkit-keyframes l_to_r {
	0% { right: -390px;}
	100% { right: -240px;}
}
@keyframes l_to_r {
	0% { right: -390px;}
	100% { right: -240px;}
}
.l_to_r {
	-webkit-animation-name: l_to_r;
	animation-name: l_to_r;
	-webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
	animation-timing-function:ease-out;
}
@-webkit-keyframes l_to_r2 {
	0% { right: -255px;}
	100% { right: -105px;}
}
@keyframes l_to_r2 {
	0% { right: -255px;}
	100% { right: -105px;}
}
.l_to_r2 {
	-webkit-animation-name: l_to_r2;
	animation-name: l_to_r2;
	-webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
	animation-timing-function:ease-out;
}

@-webkit-keyframes r_to_l {
	0% { left: -390px;}
	100% { left: -240px;}
}
@keyframes r_to_l {
	0% { left: -390px;}
	100% { left: -240px;}
}
.r_to_l {
	-webkit-animation-name: r_to_l;
	animation-name: r_to_l;
	-webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
	animation-timing-function: ease-out;
}
@-webkit-keyframes r_to_l2 {
	0% { left: -255px;}
	100% { left: -105px;}
}
@keyframes r_to_l2 {
	0% { left: -255px;}
	100% { left: -105px;}
}
.r_to_l2 {
	-webkit-animation-name: r_to_l2;
	animation-name: r_to_l2;
	-webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
	animation-timing-function: ease-out;
}

@-webkit-keyframes b_to_t {
	0% {
		opacity: 1;
		-webkit-transform: translateY(200px);
		transform: translateY(200px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
@keyframes b_to_t {
	0% {
		opacity: 1;
		-webkit-transform: translateY(200px);
		transform: translateY(200px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
.b_to_t {
	-webkit-animation-name: b_to_t;
	animation-name: b_to_t;
	-webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
	animation-timing-function: ease-out;
}

@-webkit-keyframes b_to_t2 {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
@keyframes b_to_t2 {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
.b_to_t2 {
	-webkit-animation-name: b_to_t2;
	animation-name: b_to_t2;
	-webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
	animation-timing-function: ease-out;
}

@-webkit-keyframes circleRotation {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(-360deg);
		transform: rotate(-360deg);
	}
}
@keyframes circleRotation {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(-360deg);
		transform: rotate(-360deg);
	}
}
.circleRotation {
	-webkit-animation: circleRotation infinite 15s linear;
	animation: circleRotation infinite 15s linear;
}

.sa {
	opacity: 0;
	transition: all .4s ease;
}
.sa.show {
	opacity: 1;
	transform: none;
}
.sa--lr { transform: translate(-40px, 0);}
.sa--rl { transform: translate(40px, 0);}
.sa--up { transform: translate(0, 20px);}
.sa--down { transform: translate(0, -20px);}
.sa--scaleUp { transform: scale(.5);}
.sa--scaleDown { transform: scale(1.2);}
.sa--rotateL { transform: rotate(10deg);}
.sa--rotateR { transform: rotate(-10deg);}

/* !Medium screens
---------------------------------------------------------- */
@media only print, screen and (min-width: 481px) {
.inner { width: 100%;}
	.ttlType01 span { font-size: 2em;}
	.logoType01 {
		width: 35%;
		max-width: 200px;
	}
	.ttlText { font-size: .8em;}
	.pic02_text {font-size: 1.4em;}
	.guide_image { width: 50%;}
	.guide_title {
		top: 40%;
		left: 0;
		width: 100%;
		font-size: 1.4em;
	}
	.btnArea01 {
		width: 60%;
		max-width: 300px;
	}
}

/* !Large screens
---------------------------------------------------------- */
@media only print, screen and (min-width: 768px) {
	.ttlType01 span { font-size: 2.5em;}
	.ttlType02 { margin: .2em auto;}
	.pic01 {
		width: 120px;
		left: calc(50% - 60px);
	}
	.pic02 {
		width: 105px;
		left: calc(50% + 40px);
	}
	.pic02_text {
		font-size: 1.5em;
		top: 1em;
		left: 1.15em;
	}
	.imgType01 { width: 50%;}
	.ttlType03 span { font-size: 1.5em;}
	.ttlType04 { font-size: 1.5em;}
	.ttlType04 span { font-size: 1.3em;}
	.listType01 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.listType01 li { width: 50%;}
	.guide_image { width: 200px;}
	.guide_title {
		top: 130px;
		font-size: 1.3em;
	}
	.detail dt { font-size: 1.9rem;}
	.explanation {
		text-align: justify;
		padding: 0 1em;
	}
	.explanation br { display: none;}
	.btnType01 { padding: 1em;}
}

/* !XLarge screens
---------------------------------------------------------- */
@media only print, screen and (min-width: 1024px) {
	.title_main { padding: 2em 2em 40px;}
	.pic_person01,.pic_person02,.pic_person03,.pic_person04,.pic_person05,.pic_person06,.pic_person07,.pic_person08 {
		width: 100px;
	}
	.pic_person04 { left: 25%;}
	.pic_person05 { left: auto; right: 25%;}
	.pic_person06 { left: auto; right: 5%;}
	.title_sub__inner {
		display: flex;
		align-items: center;
		width: 650px;
		margin: auto;
	}
	.imgType01 { width: 200px;}
	.listType01 li { margin: 0 0 1em;}
	.guide_image { width: 240px;}
	.guide_title {
		top: 160px;
		font-size: 1.5em;
	}
	.detail dt { font-size: 2rem;}
}

/* !XXLarge screens
---------------------------------------------------------- */
@media only print, screen and (min-width: 1280px) {
	.title_main { padding: 2em 2em 30px;}
	.ttlType01 span { font-size: 3em;}
	.ttlText { font-size: 1em;}
	.imgMain { margin: 2em 0 0;}
	.pic_person01, .pic_person02, .pic_person03, .pic_person04, .pic_person05, .pic_person06, .pic_person07, .pic_person08 {
		width: 110px;
	}
	.pic_person04 { left: 23%;}
	.pic_person05 { right: 23%;}
	.pic_person01, .pic_person02, .pic_person07, .pic_person08 { display: block;}
	.pic_person01, .pic_person02 { transform: rotate(90deg);}
	.pic_person07, .pic_person08 { transform: rotate(-90deg);}
	.pic_person01 {
		top: -240px;
		left: -240px;
	}
	.pic_person02 {
		top: 30px;
		left: -105px;
	}
	.pic_person07 {
		top: 30px;
		right: -105px;
	}
	.pic_person08 {
		top: -240px;
		right: -240px;
	}
	.title_sub__inner { width: 800px;}
	.imgType01 {
		width: 300px;
		padding-right: 1em;
	}
	.ttlType04 { font-size: 1.8em;}
	.listType01 li { width: calc(100% / 3);}
	
	.btn01 {
		transition: transform .3s cubic-bezier(.175,.885,.32,1.275);
	}
	.btn01:hover {
		transition: transform .3s cubic-bezier(.175,.885,.32,1.275);
		transform: scale(1.1);
	}
}